diff --git a/.changeset/breezy-schools-fail.md b/.changeset/breezy-schools-fail.md
new file mode 100644
index 00000000..3f0ee9fe
--- /dev/null
+++ b/.changeset/breezy-schools-fail.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-vite': minor
+---
+
+Console piping functionality
diff --git a/.changeset/shaggy-taxes-turn.md b/.changeset/shaggy-taxes-turn.md
new file mode 100644
index 00000000..b37fd02f
--- /dev/null
+++ b/.changeset/shaggy-taxes-turn.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+Fix a UI bug
diff --git a/examples/react/start/src/components/Header.tsx b/examples/react/start/src/components/Header.tsx
index 3bc20cca..dfb649d4 100644
--- a/examples/react/start/src/components/Header.tsx
+++ b/examples/react/start/src/components/Header.tsx
@@ -11,6 +11,12 @@ import {
   StickyNote,
   X,
 } from 'lucide-react'
+import { createServerFn } from '@tanstack/react-start'
+
+const logger = createServerFn({ method: 'POST' }).handler(async ({ data }) => {
+  console.log('triggered logger server function')
+  console.log(data)
+})
 
 export default function Header() {
   const [isOpen, setIsOpen] = useState(false)
@@ -22,7 +28,11 @@ export default function Header() {
     <>
       <header className="p-4 flex items-center bg-gray-800 text-white shadow-lg">
         <button
-          onClick={() => setIsOpen(true)}
+          onClick={() => {
+            console.log('Opening menu')
+            logger()
+            setIsOpen(true)
+          }}
           className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
           aria-label="Open menu"
         >
diff --git a/examples/react/start/src/routes/demo/start.api-request.tsx b/examples/react/start/src/routes/demo/start.api-request.tsx
index 2ddab6d8..e25c4ed3 100644
--- a/examples/react/start/src/routes/demo/start.api-request.tsx
+++ b/examples/react/start/src/routes/demo/start.api-request.tsx
@@ -9,7 +9,11 @@ function getNames() {
 
 export const Route = createFileRoute('/demo/start/api-request')({
   component: Home,
+  beforeLoad: () => {
+    console.log('Before loading Start API Request Demo route')
+  },
   loader: () => {
+    console.log('Navigated to Start API Request Demo')
     emitRouteNavigation('API Request', '/demo/start/api-request')
   },
 })
diff --git a/examples/react/start/src/routes/demo/start.server-funcs.tsx b/examples/react/start/src/routes/demo/start.server-funcs.tsx
index c62770df..3e0f527c 100644
--- a/examples/react/start/src/routes/demo/start.server-funcs.tsx
+++ b/examples/react/start/src/routes/demo/start.server-funcs.tsx
@@ -1,20 +1,18 @@
 import fs from 'node:fs'
 import { useCallback, useState } from 'react'
 import { createFileRoute, useRouter } from '@tanstack/react-router'
-import { createServerFn } from '@tanstack/react-start'
+import { createMiddleware, createServerFn } from '@tanstack/react-start'
 import { emitRouteNavigation } from '../../devtools'
 
-/*
 const loggingMiddleware = createMiddleware().server(
   async ({ next, request }) => {
-    console.log("Request:", request.url);
-    return next();
-  }
-);
-const loggedServerFunction = createServerFn({ method: "GET" }).middleware([
+    console.log('Request:', request.url)
+    return next()
+  },
+)
+const loggedServerFunction = createServerFn({ method: 'GET' }).middleware([
   loggingMiddleware,
-]);
-*/
+])
 
 const TODOS_FILE = 'todos.json'
 
diff --git a/examples/react/start/src/routes/demo/start.ssr.data-only.tsx b/examples/react/start/src/routes/demo/start.ssr.data-only.tsx
index f42a8eb4..2b3ae53c 100644
--- a/examples/react/start/src/routes/demo/start.ssr.data-only.tsx
+++ b/examples/react/start/src/routes/demo/start.ssr.data-only.tsx
@@ -6,6 +6,7 @@ export const Route = createFileRoute('/demo/start/ssr/data-only')({
   ssr: 'data-only',
   component: RouteComponent,
   loader: async () => {
+    console.log('Navigated to Data Only SSR Demo')
     emitRouteNavigation('Data Only SSR', '/demo/start/ssr/data-only')
     return await getPunkSongs()
   },
diff --git a/examples/react/start/src/routes/demo/start.ssr.full-ssr.tsx b/examples/react/start/src/routes/demo/start.ssr.full-ssr.tsx
index 709dd7ed..e28b13ed 100644
--- a/examples/react/start/src/routes/demo/start.ssr.full-ssr.tsx
+++ b/examples/react/start/src/routes/demo/start.ssr.full-ssr.tsx
@@ -5,6 +5,7 @@ import { emitRouteNavigation } from '../../devtools'
 export const Route = createFileRoute('/demo/start/ssr/full-ssr')({
   component: RouteComponent,
   loader: async () => {
+    console.log('Navigated to Full SSR Demo')
     emitRouteNavigation('Full SSR', '/demo/start/ssr/full-ssr')
     return await getPunkSongs()
   },
diff --git a/examples/react/start/vite.config.ts b/examples/react/start/vite.config.ts
index 5294ebca..4e86880e 100644
--- a/examples/react/start/vite.config.ts
+++ b/examples/react/start/vite.config.ts
@@ -8,7 +8,9 @@ import { nitro } from 'nitro/vite'
 
 const config = defineConfig({
   plugins: [
-    devtools(),
+    devtools({
+      consolePiping: {},
+    }),
     nitro(),
     // this is the plugin that enables path aliases
     viteTsConfigPaths({
diff --git a/examples/solid/basic/src/index.tsx b/examples/solid/basic/src/index.tsx
index c9ac6b6e..58b08c41 100644
--- a/examples/solid/basic/src/index.tsx
+++ b/examples/solid/basic/src/index.tsx
@@ -13,6 +13,7 @@ import Router, { router } from './setup'
 const queryClient = new QueryClient()
 
 function App() {
+  console.log('Rendering App Component')
   return (
     <QueryClientProvider client={queryClient}>
       <h1>TanStack Devtools Solid Basic Example</h1>
diff --git a/examples/solid/start/src/app.tsx b/examples/solid/start/src/app.tsx
index 5d1915ae..856d38cc 100644
--- a/examples/solid/start/src/app.tsx
+++ b/examples/solid/start/src/app.tsx
@@ -4,7 +4,7 @@ import './app.css'
 
 export default function App() {
   const [count, setCount] = createSignal(0)
-
+  console.log('App component rendered with count:', count())
   return (
     <main>
       <TanStackDevtools plugins={[]} />
diff --git a/packages/devtools-vite/src/enhance-logs.test.ts b/packages/devtools-vite/src/enhance-logs.test.ts
index 02770b08..995e4dd6 100644
--- a/packages/devtools-vite/src/enhance-logs.test.ts
+++ b/packages/devtools-vite/src/enhance-logs.test.ts
@@ -5,7 +5,7 @@ const removeEmptySpace = (str: string) => {
   return str.replace(/\s/g, '').trim()
 }
 
-describe('remove-devtools', () => {
+describe('enhance-logs', () => {
   test('it adds enhanced console.logs to console.log()', () => {
     const output = removeEmptySpace(
       enhanceConsoleLog(
diff --git a/packages/devtools-vite/src/index.ts b/packages/devtools-vite/src/index.ts
index 06e031f4..08e19278 100644
--- a/packages/devtools-vite/src/index.ts
+++ b/packages/devtools-vite/src/index.ts
@@ -1,2 +1,2 @@
 export { devtools, defineDevtoolsConfig } from './plugin'
-export type { TanStackDevtoolsViteConfig } from './plugin'
+export type { TanStackDevtoolsViteConfig, ConsoleLevel } from './plugin'
diff --git a/packages/devtools-vite/src/plugin.ts b/packages/devtools-vite/src/plugin.ts
index ba91fbc0..8ae03e04 100644
--- a/packages/devtools-vite/src/plugin.ts
+++ b/packages/devtools-vite/src/plugin.ts
@@ -2,7 +2,11 @@ import { devtoolsEventClient } from '@tanstack/devtools-client'
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 import { normalizePath } from 'vite'
 import chalk from 'chalk'
-import { handleDevToolsViteRequest, readPackageJson } from './utils'
+import {
+  handleDevToolsViteRequest,
+  readPackageJson,
+  stripEnhancedLogPrefix,
+} from './utils'
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
 import { removeDevtools } from './remove-devtools'
 import { addSourceToJsx } from './inject-source'
@@ -13,10 +17,14 @@ import {
   emitOutdatedDeps,
   installPackage,
 } from './package-manager'
+import { generateConsolePipeCode } from './virtual-console'
+import type { ServerResponse } from 'node:http'
 import type { Plugin } from 'vite'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
 
+export type ConsoleLevel = 'log' | 'warn' | 'error' | 'info' | 'debug'
+
 export type TanStackDevtoolsViteConfig = {
   /**
    * Configuration for the editor integration. Defaults to opening in VS code
@@ -70,6 +78,23 @@ export type TanStackDevtoolsViteConfig = {
       components?: Array<string | RegExp>
     }
   }
+  /**
+   * Configuration for console piping between client and server.
+   * When enabled, console logs from the client will appear in the terminal,
+   * and server logs will appear in the browser console.
+   */
+  consolePiping?: {
+    /**
+     * Whether to enable console piping.
+     * @default true
+     */
+    enabled?: boolean
+    /**
+     * Which console methods to pipe.
+     * @default ['log', 'warn', 'error', 'info', 'debug']
+     */
+    levels?: Array<ConsoleLevel>
+  }
 }
 
 export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
@@ -82,6 +107,9 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   const injectSourceConfig = args?.injectSource ?? { enabled: true }
   const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true
   const serverBusEnabled = args?.eventBusConfig?.enabled ?? true
+  const consolePipingConfig = args?.consolePiping ?? { enabled: true }
+  const consolePipingLevels: Array<ConsoleLevel> =
+    consolePipingConfig.levels ?? ['log', 'warn', 'error', 'info', 'debug']
 
   let devtoolsFileId: string | null = null
   let devtoolsPort: number | null = null
@@ -175,16 +203,77 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
           }
           await editor.open(path, lineNum, columnNum)
         }
+
+        // SSE clients for broadcasting server logs to browser
+        const sseClients: Array<{
+          res: ServerResponse
+          id: number
+        }> = []
+        let sseClientId = 0
+        const consolePipingEnabled = consolePipingConfig.enabled ?? true
+
         server.middlewares.use((req, res, next) =>
-          handleDevToolsViteRequest(req, res, next, (parsedData) => {
-            const { data, routine } = parsedData
-            if (routine === 'open-source') {
-              return handleOpenSource({
-                data: { type: data.type, data },
-                openInEditor,
-              })
-            }
-            return
+          handleDevToolsViteRequest(req, res, next, {
+            onOpenSource: (parsedData) => {
+              const { data, routine } = parsedData
+              if (routine === 'open-source') {
+                return handleOpenSource({
+                  data: { type: data.type, data },
+                  openInEditor,
+                })
+              }
+              return
+            },
+            ...(consolePipingEnabled
+              ? {
+                  onConsolePipe: (entries) => {
+                    for (const entry of entries) {
+                      const prefix = chalk.cyan('[Client]')
+                      const logMethod = console[entry.level as ConsoleLevel]
+                      const cleanedArgs = stripEnhancedLogPrefix(
+                        entry.args,
+                        (loc) => chalk.gray(loc),
+                      )
+                      logMethod(prefix, ...cleanedArgs)
+                    }
+                  },
+                  onConsolePipeSSE: (res, req) => {
+                    res.setHeader('Content-Type', 'text/event-stream')
+                    res.setHeader('Cache-Control', 'no-cache')
+                    res.setHeader('Connection', 'keep-alive')
+                    res.setHeader('Access-Control-Allow-Origin', '*')
+                    res.flushHeaders()
+
+                    const clientId = ++sseClientId
+                    sseClients.push({ res, id: clientId })
+
+                    req.on('close', () => {
+                      const index = sseClients.findIndex(
+                        (c) => c.id === clientId,
+                      )
+                      if (index !== -1) {
+                        sseClients.splice(index, 1)
+                      }
+                    })
+                  },
+                  onServerConsolePipe: (entries) => {
+                    try {
+                      const data = JSON.stringify({
+                        entries: entries.map((e) => ({
+                          level: e.level,
+                          args: e.args,
+                          source: 'server',
+                          timestamp: e.timestamp || Date.now(),
+                        })),
+                      })
+
+                      for (const client of sseClients) {
+                        client.res.write(`data: ${data}\n\n`)
+                      }
+                    } catch {}
+                  },
+                }
+              : {}),
           }),
         )
       },
@@ -417,6 +506,8 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
             packageJson,
           })
         })
+
+        // Console piping is now handled via HTTP endpoints in the custom-server plugin
       },
       async handleHotUpdate({ file }) {
         if (file.endsWith('package.json')) {
@@ -428,6 +519,56 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         }
       },
     },
+    // Inject console piping code into entry files (both client and server)
+    {
+      name: '@tanstack/devtools:console-pipe-transform',
+      enforce: 'pre',
+      apply(config, { command }) {
+        return (
+          config.mode === 'development' &&
+          command === 'serve' &&
+          (consolePipingConfig.enabled ?? true)
+        )
+      },
+      transform(code, id) {
+        // Inject the console pipe code into entry files
+        if (
+          id.includes('node_modules') ||
+          id.includes('dist') ||
+          id.includes('?') ||
+          !id.match(/\.(tsx?|jsx?)$/)
+        ) {
+          return
+        }
+
+        // Only inject once - check if already injected
+        if (code.includes('__tsdConsolePipe')) {
+          return
+        }
+
+        // Check if this is a root entry file (with <html> JSX or client entry points)
+        // In SSR frameworks, this file runs on BOTH server (SSR) and client (hydration)
+        // so our runtime check (typeof window === 'undefined') handles both environments
+        const isRootEntry =
+          /<html[\s>]/i.test(code) ||
+          code.includes('StartClient') ||
+          code.includes('hydrateRoot') ||
+          code.includes('createRoot') ||
+          (code.includes('solid-js/web') && code.includes('render('))
+
+        if (isRootEntry) {
+          const viteServerUrl = `http://localhost:${port}`
+          const inlineCode = generateConsolePipeCode(
+            consolePipingLevels,
+            viteServerUrl,
+          )
+
+          return `${inlineCode}\n${code}`
+        }
+
+        return undefined
+      },
+    },
     {
       name: '@tanstack/devtools:better-console-logs',
       enforce: 'pre',
diff --git a/packages/devtools-vite/src/utils.test.ts b/packages/devtools-vite/src/utils.test.ts
new file mode 100644
index 00000000..b760aee3
--- /dev/null
+++ b/packages/devtools-vite/src/utils.test.ts
@@ -0,0 +1,184 @@
+import { describe, expect, test } from 'vitest'
+import { parseOpenSourceParam, stripEnhancedLogPrefix } from './utils'
+
+describe('parseOpenSourceParam', () => {
+  test('parses simple file:line:column format', () => {
+    const result = parseOpenSourceParam('src/file.tsx:26:13')
+    expect(result).toEqual({ file: 'src/file.tsx', line: '26', column: '13' })
+  })
+
+  test('parses file path with multiple slashes', () => {
+    const result = parseOpenSourceParam('src/components/Header.tsx:100:5')
+    expect(result).toEqual({
+      file: 'src/components/Header.tsx',
+      line: '100',
+      column: '5',
+    })
+  })
+
+  test('parses file path with colons in filename (Windows-style)', () => {
+    const result = parseOpenSourceParam('C:/Users/test/file.tsx:10:20')
+    expect(result).toEqual({
+      file: 'C:/Users/test/file.tsx',
+      line: '10',
+      column: '20',
+    })
+  })
+
+  test('returns null for invalid format without line/column', () => {
+    const result = parseOpenSourceParam('src/file.tsx')
+    expect(result).toBeNull()
+  })
+
+  test('returns null for invalid format with only one number', () => {
+    const result = parseOpenSourceParam('src/file.tsx:26')
+    expect(result).toBeNull()
+  })
+})
+
+describe('stripEnhancedLogPrefix', () => {
+  test('returns empty array for empty input', () => {
+    const result = stripEnhancedLogPrefix([])
+    expect(result).toEqual([])
+  })
+
+  test('returns args unchanged when no enhanced log URL is present', () => {
+    const args = ['hello', 'world', 123]
+    const result = stripEnhancedLogPrefix(args)
+    expect(result).toEqual(args)
+  })
+
+  test('extracts source location and user args from enhanced log format', () => {
+    // Simulated enhanced log format:
+    // ['%cLOG%c %cGo to Source: http://localhost:3000/__tsd/open-source?source=%2Fsrc%2Ffile.tsx%3A26%3A13%c \n → ', 'style1', 'style2', 'style3', 'style4', 'user message']
+    const args = [
+      '%cLOG%c %cGo to Source: http://localhost:3000/__tsd/open-source?source=%2Fsrc%2Ffile.tsx%3A26%3A13%c \n → ',
+      'color: blue',
+      'color: reset',
+      'color: green',
+      'color: reset',
+      'user message',
+    ]
+    const result = stripEnhancedLogPrefix(args)
+    expect(result).toEqual(['src/file.tsx:26:13', 'user message'])
+  })
+
+  test('handles multiple user args after enhanced log prefix', () => {
+    const args = [
+      '%cLOG%c %cGo to Source: http://localhost:3000/__tsd/open-source?source=%2Fsrc%2Fcomponents%2FHeader.tsx%3A100%3A5%c \n → ',
+      'style1',
+      'style2',
+      'style3',
+      'style4',
+      'message 1',
+      { key: 'value' },
+      42,
+    ]
+    const result = stripEnhancedLogPrefix(args)
+    expect(result).toEqual([
+      'src/components/Header.tsx:100:5',
+      'message 1',
+      { key: 'value' },
+      42,
+    ])
+  })
+
+  test('handles source location with leading slash by removing it', () => {
+    const args = [
+      '%cINFO%c %cGo to Source: http://localhost:3000/__tsd/open-source?source=%2Fapp%2Fpage.tsx%3A10%3A1%c \n → ',
+      's1',
+      's2',
+      's3',
+      's4',
+      'info log',
+    ]
+    const result = stripEnhancedLogPrefix(args)
+    // Leading slash is removed
+    expect(result).toEqual(['app/page.tsx:10:1', 'info log'])
+  })
+
+  test('applies custom formatter to source location', () => {
+    const args = [
+      '%cWARN%c %cGo to Source: http://localhost:3000/__tsd/open-source?source=%2Fsrc%2Findex.ts%3A5%3A2%c \n → ',
+      's1',
+      's2',
+      's3',
+      's4',
+      'warning message',
+    ]
+    const customFormatter = (loc: string) => `[${loc}]`
+    const result = stripEnhancedLogPrefix(args, customFormatter)
+    expect(result).toEqual(['[src/index.ts:5:2]', 'warning message'])
+  })
+
+  test('handles ANSI prefix format (second variant)', () => {
+    // Format: ['\x1b[...]%s\x1b[...]', '%cLOG%c %cGo to Source: ...%c \n → ', 'style...', ..., 'message']
+    const args = [
+      '\x1b[90m%s\x1b[0m',
+      '%cDEBUG%c %cGo to Source: http://localhost:3000/__tsd/open-source?source=%2Fsrc%2Fdebug.ts%3A1%3A1%c \n → ',
+      's1',
+      's2',
+      's3',
+      's4',
+      'debug output',
+    ]
+    const result = stripEnhancedLogPrefix(args)
+    // The source URL is in index 1, so source location should be extracted from there
+    expect(result).toEqual(['src/debug.ts:1:1', 'debug output'])
+  })
+
+  test('returns original args when source URL decoding fails', () => {
+    const args = [
+      '%cLOG%c %cGo to Source: http://localhost:3000/__tsd/open-source?source=%INVALID%c \n → ',
+      's1',
+      's2',
+      's3',
+      's4',
+      'message',
+    ]
+    // Should gracefully handle decoding error and return user args without source
+    const result = stripEnhancedLogPrefix(args)
+    // Since decoding fails, sourceLocation will be empty, so result should just have user args
+    expect(result).toEqual(['message'])
+  })
+
+  test('handles enhanced log with no user args after style markers', () => {
+    const args = [
+      'Go to Source: http://localhost:3000/__tsd/open-source?source=%2Fsrc%2Ftest.ts%3A1%3A1%c',
+      'style-arg', // This is consumed as a style arg due to %c marker
+    ]
+    const result = stripEnhancedLogPrefix(args)
+    // One %c marker means one style arg follows the source arg, leaving no user args
+    expect(result).toEqual(['src/test.ts:1:1'])
+  })
+
+  test('handles enhanced log at non-zero index in args array', () => {
+    const args = [
+      'some prefix',
+      '%cERROR%c %cGo to Source: http://localhost:3000/__tsd/open-source?source=%2Fsrc%2Ferror.ts%3A50%3A10%c \n → ',
+      's1',
+      's2',
+      's3',
+      's4',
+      'error details',
+    ]
+    const result = stripEnhancedLogPrefix(args)
+    expect(result).toEqual(['src/error.ts:50:10', 'error details'])
+  })
+
+  test('handles deeply nested path in source location', () => {
+    const args = [
+      '%cLOG%c %cGo to Source: http://localhost:5173/__tsd/open-source?source=%2Fpackages%2Fdevtools-vite%2Fsrc%2Fplugin.ts%3A123%3A45%c \n → ',
+      's1',
+      's2',
+      's3',
+      's4',
+      'deep path log',
+    ]
+    const result = stripEnhancedLogPrefix(args)
+    expect(result).toEqual([
+      'packages/devtools-vite/src/plugin.ts:123:45',
+      'deep path log',
+    ])
+  })
+})
diff --git a/packages/devtools-vite/src/utils.ts b/packages/devtools-vite/src/utils.ts
index bc11747c..aaa858df 100644
--- a/packages/devtools-vite/src/utils.ts
+++ b/packages/devtools-vite/src/utils.ts
@@ -4,12 +4,31 @@ import type { Connect } from 'vite'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import type { PackageJson } from '@tanstack/devtools-client'
 
+type DevToolsRequestHandler = (data: any) => void
+
+type DevToolsViteRequestOptions = {
+  onOpenSource?: DevToolsRequestHandler
+  onConsolePipe?: (entries: Array<any>) => void
+  onServerConsolePipe?: (entries: Array<any>) => void
+  onConsolePipeSSE?: (
+    res: ServerResponse<IncomingMessage>,
+    req: Connect.IncomingMessage,
+  ) => void
+}
+
 export const handleDevToolsViteRequest = (
   req: Connect.IncomingMessage,
   res: ServerResponse<IncomingMessage>,
   next: Connect.NextFunction,
-  cb: (data: any) => void,
+  cbOrOptions: DevToolsRequestHandler | DevToolsViteRequestOptions,
 ) => {
+  // Normalize to options object for backward compatibility
+  const options: DevToolsViteRequestOptions =
+    typeof cbOrOptions === 'function'
+      ? { onOpenSource: cbOrOptions }
+      : cbOrOptions
+
+  // Handle open-source requests
   if (req.url?.includes('__tsd/open-source')) {
     const searchParams = new URLSearchParams(req.url.split('?')[1])
 
@@ -24,7 +43,7 @@ export const handleDevToolsViteRequest = (
     }
     const { file, line, column } = parsed
 
-    cb({
+    options.onOpenSource?.({
       type: 'open-source',
       routine: 'open-source',
       data: {
@@ -38,6 +57,62 @@ export const handleDevToolsViteRequest = (
     res.end()
     return
   }
+
+  // Handle console-pipe SSE endpoint (browser subscribes to server logs)
+  if (req.url?.includes('__tsd/console-pipe/sse') && req.method === 'GET') {
+    if (options.onConsolePipeSSE) {
+      options.onConsolePipeSSE(res, req)
+      return
+    }
+    return next()
+  }
+
+  // Handle server console-pipe POST endpoint (from app server runtime)
+  if (req.url?.includes('__tsd/console-pipe/server') && req.method === 'POST') {
+    if (options.onServerConsolePipe) {
+      let body = ''
+      req.on('data', (chunk: Buffer) => {
+        body += chunk.toString()
+      })
+      req.on('end', () => {
+        try {
+          const { entries } = JSON.parse(body)
+          options.onServerConsolePipe!(entries)
+          res.statusCode = 200
+          res.end('OK')
+        } catch {
+          res.statusCode = 400
+          res.end('Bad Request')
+        }
+      })
+      return
+    }
+    return next()
+  }
+
+  // Handle console-pipe POST endpoint (from client)
+  if (req.url?.includes('__tsd/console-pipe') && req.method === 'POST') {
+    if (options.onConsolePipe) {
+      let body = ''
+      req.on('data', (chunk: Buffer) => {
+        body += chunk.toString()
+      })
+      req.on('end', () => {
+        try {
+          const { entries } = JSON.parse(body)
+          options.onConsolePipe!(entries)
+          res.statusCode = 200
+          res.end('OK')
+        } catch {
+          res.statusCode = 400
+          res.end('Bad Request')
+        }
+      })
+      return
+    }
+    return next()
+  }
+
   if (!req.url?.includes('__tsd')) {
     return next()
   }
@@ -50,7 +125,7 @@ export const handleDevToolsViteRequest = (
     const dataToParse = Buffer.concat(chunks)
     try {
       const parsedData = JSON.parse(dataToParse.toString())
-      cb(parsedData)
+      options.onOpenSource?.(parsedData)
     } catch (e) {}
     res.write('OK')
   })
@@ -92,3 +167,80 @@ export const tryParseJson = <T extends any>(
 
 export const readPackageJson = async () =>
   tryParseJson<PackageJson>(await tryReadFile(process.cwd() + '/package.json'))
+
+/**
+ * Extracts and formats the source location from enhanced client console logs.
+ * Instead of stripping the prefix entirely, we extract the file:line:column
+ * from the "Go to Source" URL and use that as a prefix.
+ *
+ * Enhanced logs format (two variants):
+ * 1. ['%cLOG%c %cGo to Source: http://...?source=%2Fsrc%2F...%c \n → ', 'color:...', 'color:...', 'color:...', 'color:...', 'message']
+ * 2. ['\x1b[...]%s\x1b[...]', '%cLOG%c %cGo to Source: ...%c \n → ', 'color:...', 'color:...', 'color:...', 'color:...', 'message']
+ *
+ * Output: ['src/components/Header.tsx:26:13', 'message']
+ */
+export const stripEnhancedLogPrefix = (
+  args: Array<unknown>,
+  formatSourceLocation?: (location: string) => unknown,
+): Array<unknown> => {
+  if (args.length === 0) return args
+
+  // Find the arg that contains the Go to Source URL
+  let sourceArgIndex = -1
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]
+    if (typeof arg === 'string' && arg.includes('__tsd/open-source?source=')) {
+      sourceArgIndex = i
+      break
+    }
+  }
+
+  // If no source URL found, return args as-is (not an enhanced log)
+  if (sourceArgIndex === -1) {
+    return args
+  }
+
+  const sourceArg = args[sourceArgIndex] as string
+
+  // Extract the source from the "Go to Source" URL
+  // URL format: http://localhost:3000/__tsd/open-source?source=%2Fsrc%2Ffile.tsx%3A26%3A13%c
+  // Note: The URL ends with %c which is a console format specifier, not URL encoding
+  let sourceLocation = ''
+  const sourceMatch = sourceArg.match(/source=([^&\s]+?)%c/)
+  if (sourceMatch?.[1]) {
+    try {
+      sourceLocation = decodeURIComponent(sourceMatch[1])
+      // Remove leading slash if present
+      if (sourceLocation.startsWith('/')) {
+        sourceLocation = sourceLocation.slice(1)
+      }
+    } catch {
+      // If decoding fails, leave it empty
+    }
+  }
+
+  // Count %c markers in the source arg to know how many style args follow it
+  const styleCount = (sourceArg.match(/%c/g) || []).length
+
+  // The actual user args start after the source arg and all its style args
+  const userArgsStart = sourceArgIndex + 1 + styleCount
+
+  // Build the result: source location prefix + remaining args (the actual user data)
+  const result: Array<unknown> = []
+
+  // Add source location as prefix if we found one
+  if (sourceLocation) {
+    result.push(
+      formatSourceLocation
+        ? formatSourceLocation(sourceLocation)
+        : sourceLocation,
+    )
+  }
+
+  // Add remaining args (the actual user data)
+  for (let i = userArgsStart; i < args.length; i++) {
+    result.push(args[i])
+  }
+
+  return result.length > 0 ? result : args
+}
diff --git a/packages/devtools-vite/src/virtual-console.test.ts b/packages/devtools-vite/src/virtual-console.test.ts
new file mode 100644
index 00000000..26f05b88
--- /dev/null
+++ b/packages/devtools-vite/src/virtual-console.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, test } from 'vitest'
+import { generateConsolePipeCode } from './virtual-console'
+
+const TEST_VITE_URL = 'http://localhost:5173'
+
+describe('virtual-console', () => {
+  test('generates inline code with specified levels', () => {
+    const code = generateConsolePipeCode(['log', 'error'], TEST_VITE_URL)
+
+    expect(code).toContain('["log","error"]')
+    expect(code).toContain('originalConsole')
+    expect(code).toContain('__TSD_CONSOLE_PIPE_INITIALIZED__')
+  })
+
+  test('uses fetch to send client logs', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain('/__tsd/console-pipe')
+    expect(code).toContain("method: 'POST'")
+  })
+
+  test('uses SSE to receive server logs', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain("new EventSource('/__tsd/console-pipe/sse')")
+  })
+
+  test('includes environment detection', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain("typeof window === 'undefined'")
+    expect(code).toContain('isServer')
+  })
+
+  test('includes batcher configuration', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain('BATCH_WAIT')
+    expect(code).toContain('BATCH_MAX_SIZE')
+  })
+
+  test('includes flush functionality', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain('flushBatch')
+  })
+
+  test('includes beforeunload listener for browser', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain('beforeunload')
+  })
+
+  test('wraps code in IIFE', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain('(function __tsdConsolePipe()')
+    expect(code).toContain('})();')
+  })
+
+  test('has no external imports', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).not.toContain('import ')
+  })
+
+  test('includes vite server URL for server piping', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain(TEST_VITE_URL)
+    expect(code).toContain('/__tsd/console-pipe/server')
+  })
+})
diff --git a/packages/devtools-vite/src/virtual-console.ts b/packages/devtools-vite/src/virtual-console.ts
new file mode 100644
index 00000000..dc79798f
--- /dev/null
+++ b/packages/devtools-vite/src/virtual-console.ts
@@ -0,0 +1,202 @@
+import type { ConsoleLevel } from './plugin'
+
+// export const VIRTUAL_MODULE_ID = 'virtual:tanstack-devtools-console'
+// export const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID
+
+/**
+ * Generates inline code to inject into entry files (both client and server).
+ * This code detects the environment at runtime and:
+ *
+ * CLIENT:
+ * 1. Store original console methods
+ * 2. Create batched wrappers that POST to server via fetch
+ * 3. Override global console with the wrapped methods
+ * 4. Listen for server console logs via SSE
+ *
+ * SERVER (Nitro/Vinxi runtime):
+ * 1. Store original console methods
+ * 2. Create batched wrappers that POST to Vite dev server
+ * 3. Override global console - original logging still happens, just also pipes to Vite
+ *
+ * Returns the inline code as a string - no imports needed since we use fetch.
+ */
+export function generateConsolePipeCode(
+  levels: Array<ConsoleLevel>,
+  viteServerUrl: string,
+): string {
+  const levelsArray = JSON.stringify(levels)
+
+  return `
+;(function __tsdConsolePipe() {
+  // Detect environment
+  var isServer = typeof window === 'undefined';
+  var envKey = isServer ? '__TSD_SERVER_CONSOLE_PIPE_INITIALIZED__' : '__TSD_CONSOLE_PIPE_INITIALIZED__';
+  var globalObj = isServer ? globalThis : window;
+  
+  // Only run once per environment
+  if (globalObj[envKey]) return;
+  globalObj[envKey] = true;
+
+  var CONSOLE_LEVELS = ${levelsArray};
+  var VITE_SERVER_URL = ${JSON.stringify(viteServerUrl)};
+
+  // Store original console methods before we override them
+  var originalConsole = {};
+  for (var i = 0; i < CONSOLE_LEVELS.length; i++) {
+    var level = CONSOLE_LEVELS[i];
+    originalConsole[level] = console[level].bind(console);
+  }
+
+  // Simple inline batcher implementation
+  var batchedEntries = [];
+  var batchTimeout = null;
+  var BATCH_WAIT = isServer ? 50 : 100;
+  var BATCH_MAX_SIZE = isServer ? 20 : 50;
+
+  function flushBatch() {
+    if (batchedEntries.length === 0) return;
+    
+    var entries = batchedEntries;
+    batchedEntries = [];
+    batchTimeout = null;
+    
+    // Determine endpoint based on environment
+    var endpoint = isServer 
+      ? VITE_SERVER_URL + '/__tsd/console-pipe/server'
+      : '/__tsd/console-pipe';
+    
+    // Send to Vite server via fetch
+    fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ entries: entries }),
+    }).catch(function( ) {
+     // Swallow errors  
+    });
+  }
+
+  function addToBatch(entry) {
+    batchedEntries.push(entry);
+    
+    if (batchedEntries.length >= BATCH_MAX_SIZE) {
+      if (batchTimeout) {
+        clearTimeout(batchTimeout);
+        batchTimeout = null;
+      }
+      flushBatch();
+    } else if (!batchTimeout) {
+      batchTimeout = setTimeout(flushBatch, BATCH_WAIT);
+    }
+  }
+
+  // Override global console methods
+  for (var j = 0; j < CONSOLE_LEVELS.length; j++) {
+    (function(level) {
+      var original = originalConsole[level];
+      console[level] = function() {
+        var args = Array.prototype.slice.call(arguments);
+        
+        // Always call original first so logs appear normally
+        original.apply(console, args);
+        
+        // Skip our own TSD Console Pipe logs to avoid recursion/noise
+        if (args.length > 0 && typeof args[0] === 'string' && 
+            (args[0].indexOf('[TSD Console Pipe]') !== -1 || 
+             args[0].indexOf('[@tanstack/devtools') !== -1)) {
+          return;
+        }
+
+        // Serialize args safely
+        var safeArgs = args.map(function(arg) {
+          if (arg === undefined) return 'undefined';
+          if (arg === null) return null;
+          if (typeof arg === 'function') return '[Function]';
+          if (typeof arg === 'symbol') return arg.toString();
+          try {
+            JSON.stringify(arg);
+            return arg;
+          } catch (e) {
+            return String(arg);
+          }
+        });
+
+        var entry = {
+          level: level,
+          args: safeArgs,
+          source: isServer ? 'server' : 'client',
+          timestamp: Date.now(),
+        };
+        
+        addToBatch(entry);
+      };
+    })(CONSOLE_LEVELS[j]);
+  }
+
+  // CLIENT ONLY: Listen for server console logs via SSE
+  if (!isServer) {
+    // Transform server log args - strip ANSI codes and convert source paths to clickable URLs
+    function transformServerLogArgs(args) {
+      var escChar = String.fromCharCode(27);
+      var transformed = [];
+      
+      for (var k = 0; k < args.length; k++) {
+        var arg = args[k];
+        if (typeof arg === 'string') {
+          // Strip ANSI escape sequences (ESC[...m patterns)
+          var cleaned = arg;
+          // Remove ESC character followed by [...m] - need to build regex dynamically
+          while (cleaned.indexOf(escChar) !== -1) {
+            cleaned = cleaned.split(escChar).join('');
+          }
+          // Also remove any leftover bracket codes like [35m
+          cleaned = cleaned.replace(/\\[[0-9;]*m/g, '');
+          
+          // Transform source paths to clickable URLs
+          // Match patterns like /src/components/Header.tsx:17:3
+          var sourceRegex = /(\\/[^\\s]+:\\d+:\\d+)/g;
+          cleaned = cleaned.replace(sourceRegex, function(match) {
+            return window.location.origin + '/__tsd/open-source?source=' + encodeURIComponent(match);
+          });
+          
+          if (cleaned.trim()) {
+            transformed.push(cleaned);
+          }
+        } else {
+          transformed.push(arg);
+        }
+      }
+      
+      return transformed;
+    }
+
+    var eventSource = new EventSource('/__tsd/console-pipe/sse');
+    
+    eventSource.onmessage = function(event) {
+      try {
+        var data = JSON.parse(event.data);
+        if (data.entries) {
+          for (var m = 0; m < data.entries.length; m++) {
+            var entry = data.entries[m];
+            var transformedArgs = transformServerLogArgs(entry.args);
+            var prefix = '%c[Server]%c';
+            var prefixStyle = 'color: #9333ea; font-weight: bold;';
+            var resetStyle = 'color: inherit;';
+            var logMethod = originalConsole[entry.level] || originalConsole.log;
+            logMethod.apply(console, [prefix, prefixStyle, resetStyle].concat(transformedArgs));
+          }
+        }
+      } catch (err) {
+        // Swallow errors  
+      }
+    };
+
+    eventSource.onerror = function() {
+      // Swallow errors  
+    };
+
+    // Flush on page unload
+    window.addEventListener('beforeunload', flushBatch);
+  }
+})();
+`
+}
diff --git a/packages/devtools/src/components/tabs.tsx b/packages/devtools/src/components/tabs.tsx
index bab30fbd..0e30ebc5 100644
--- a/packages/devtools/src/components/tabs.tsx
+++ b/packages/devtools/src/components/tabs.tsx
@@ -45,6 +45,7 @@ export const Tabs = (props: TabsProps) => {
         <div
           style={{
             'margin-top': 'auto',
+            width: '100%',
           }}
         >
           <button