From 6c331b7b97d3903c775a848728458bf386d5880a Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Mon, 22 Sep 2025 13:16:23 +0200
Subject: [PATCH 1/7] add devtools client for other libs to listen to

---
 examples/react/basic/package.json             |   2 +-
 .../react/basic/src/package-json-panel.tsx    | 166 ++++++++++++++++++
 examples/react/basic/src/setup.tsx            |   5 +
 examples/react/basic/vite.config.ts           |   1 +
 packages/devtools-vite/package.json           |   9 +-
 packages/devtools-vite/src/client.ts          |   1 +
 packages/devtools-vite/src/event.ts           |  28 +++
 packages/devtools-vite/src/plugin.ts          |  36 +++-
 packages/devtools-vite/src/utils.ts           |  15 +-
 packages/devtools-vite/vite.config.ts         |   2 +-
 pnpm-lock.yaml                                |   5 +
 11 files changed, 259 insertions(+), 11 deletions(-)
 create mode 100644 examples/react/basic/src/package-json-panel.tsx
 create mode 100644 packages/devtools-vite/src/client.ts
 create mode 100644 packages/devtools-vite/src/event.ts

diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
index bf8a0e1f..2b5ad0f0 100644
--- a/examples/react/basic/package.json
+++ b/examples/react/basic/package.json
@@ -41,4 +41,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/examples/react/basic/src/package-json-panel.tsx b/examples/react/basic/src/package-json-panel.tsx
new file mode 100644
index 00000000..2952bf0b
--- /dev/null
+++ b/examples/react/basic/src/package-json-panel.tsx
@@ -0,0 +1,166 @@
+import { devtoolsEventClient } from "@tanstack/devtools-vite/client"
+import { useEffect, useState } from "react"
+import type { CSSProperties } from "react"
+
+export const PackageJsonPanel = () => {
+  const [packageJson, setPackageJson] = useState<any>(null)
+  const [outdatedDeps, setOutdatedDeps] = useState<Record<string, { current: string; wanted: string; latest: string; type?: 'dependencies' | 'devDependencies' }>>({})
+
+  useEffect(() => {
+    devtoolsEventClient.emit("mounted", undefined as any)
+    const off = devtoolsEventClient.on("ready", (event) => {
+      setPackageJson(event.payload.packageJson)
+      setOutdatedDeps(event.payload.outdatedDeps || {})
+    })
+    return () => { off?.() }
+  }, [])
+
+  const hasOutdated = Object.keys(outdatedDeps || {}).length > 0
+
+  // Helpers
+  const stripRange = (v?: string) => (v ?? '').replace(/^[~^><=v\s]*/, '')
+  const parseSemver = (v?: string) => {
+    const s = stripRange(v)
+    const m = s.match(/^(\d+)\.(\d+)\.(\d+)/)
+    if (!m) return null
+    return { major: +m[1], minor: +m[2], patch: +m[3] }
+  }
+  const diffType = (current?: string, latest?: string): 'major' | 'minor' | 'patch' | null => {
+    const c = parseSemver(current)
+    const l = parseSemver(latest)
+    if (!c || !l) return null
+    if (l.major > c.major) return 'major'
+    if (l.major === c.major && l.minor > c.minor) return 'minor'
+    if (l.major === c.major && l.minor === c.minor && l.patch > c.patch) return 'patch'
+    return null
+  }
+  const diffColor: Record<'major' | 'minor' | 'patch', string> = {
+    major: '#ef4444',
+    minor: '#f59e0b',
+    patch: '#10b981',
+  }
+
+  const containerStyle: CSSProperties = { padding: 10 }
+  const metaStyle: CSSProperties = { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 6, marginBottom: 8 }
+  const sectionStyle: CSSProperties = { margin: '8px 0', padding: '8px', border: '1px solid #444', borderRadius: 6 }
+  const tableStyle: CSSProperties = { width: '100%', borderCollapse: 'collapse' }
+  const thtd: CSSProperties = { borderBottom: '1px solid #333', padding: '4px 6px', textAlign: 'left' }
+  const badge = (text: string, color: string) => <span style={{ background: color, color: '#fff', borderRadius: 4, padding: '1px 4px', fontSize: 11 }}>{text}</span>
+  const btn = (label: string, onClick: () => void, variant: 'primary' | 'ghost' = 'primary') => (
+    <button onClick={onClick} style={{
+      padding: '2px 6px', borderRadius: 5, border: variant === 'primary' ? '1px solid #6d28d9' : '1px solid transparent', cursor: 'pointer',
+      background: variant === 'primary' ? '#7c3aed' : 'transparent', color: variant === 'primary' ? '#fff' : '#7c3aed', fontSize: 12
+    }}>{label}</button>
+  )
+
+  const VersionCell = ({ dep, specified }: { dep: string, specified: string }) => {
+    const info = outdatedDeps[dep]
+    const current = info?.current ?? specified
+    const latest = info?.latest
+    const dt = info ? diffType(current, latest) : null
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+        <span>{current}</span>
+        {dt && latest ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+          <span style={{ opacity: 0.6 }}>→</span>
+          {badge(`latest ${latest}`, diffColor[dt])}
+        </span> : null}
+      </div>
+    )
+  }
+
+  const UpgradeRowActions = ({ name }: { name: string }) => {
+    const info = outdatedDeps[name]
+    if (!info) return null
+    return (
+      <div style={{ display: 'flex', gap: 6 }}>
+        {btn('Wanted', () => (devtoolsEventClient as any).emit('upgrade-dependency', { name, target: info.wanted } as any))}
+        {btn('Latest', () => (devtoolsEventClient as any).emit('upgrade-dependency', { name, target: info.latest } as any), 'ghost')}
+      </div>
+    )
+  }
+
+  const makeLists = (names?: string[]) => {
+    const entries = Object.entries(outdatedDeps).filter(([n]) => !names || names.includes(n))
+    const wantedList = entries.map(([name, info]) => ({ name, target: info.wanted }))
+    const latestList = entries.map(([name, info]) => ({ name, target: info.latest }))
+    return { wantedList, latestList }
+  }
+
+  const BulkActions = ({ names }: { names?: string[] }) => {
+    const { wantedList, latestList } = makeLists(names)
+    if (wantedList.length === 0 && latestList.length === 0) return null
+    return (
+      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+        {btn('All → wanted', () => (devtoolsEventClient as any).emit('upgrade-dependencies-bulk', { list: wantedList } as any))}
+        {btn('All → latest', () => (devtoolsEventClient as any).emit('upgrade-dependencies-bulk', { list: latestList } as any), 'ghost')}
+      </div>
+    )
+  }
+
+  const renderDeps = (title: string, deps?: Record<string, string>) => {
+    const names = Object.keys(deps || {})
+    const someOutdatedInSection = names.some((n) => !!outdatedDeps[n])
+    return (
+      <div style={sectionStyle}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
+          <h3 style={{ margin: 0, fontSize: 14 }}>{title}</h3>
+          {someOutdatedInSection ? <BulkActions names={names} /> : null}
+        </div>
+        <table style={tableStyle}>
+          <thead>
+            <tr>
+              <th style={thtd}>Package</th>
+              <th style={thtd}>Version</th>
+              <th style={thtd}>Status</th>
+              <th style={thtd}>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {Object.entries(deps || {}).map(([dep, version]) => {
+              const info = outdatedDeps[dep]
+              const isOutdated = !!info && info.current !== info.latest
+              return (
+                <tr key={dep}>
+                  <td style={thtd}>{dep}</td>
+                  <td style={thtd}><VersionCell dep={dep} specified={version as string} /></td>
+                  <td style={thtd}>{isOutdated ? badge('Outdated', '#e11d48') : badge('OK', '#10b981')}</td>
+                  <td style={thtd}>{isOutdated ? <UpgradeRowActions name={dep} /> : null}</td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+
+  return (
+    <div style={containerStyle}>
+      <h2 style={{ margin: '0 0 8px 0', fontSize: 16 }}>Package.json</h2>
+      {packageJson ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <div style={sectionStyle}>
+            <h3 style={{ marginTop: 0, marginBottom: 6, fontSize: 14 }}>Package info</h3>
+            <div style={metaStyle}>
+              <div><strong>Name</strong></div><div>{packageJson.name}</div>
+              <div><strong>Version</strong></div><div>v{packageJson.version}</div>
+              <div><strong>Description</strong></div><div>{packageJson.description}</div>
+              <div><strong>Author</strong></div><div>{packageJson.author}</div>
+              <div><strong>License</strong></div><div>{packageJson.license}</div>
+              <div><strong>Repository</strong></div><div>{packageJson.repository?.url || packageJson.repository}</div>
+            </div>
+          </div>
+          {renderDeps('Dependencies', packageJson.dependencies)}
+          {renderDeps('Dev Dependencies', packageJson.devDependencies)}
+          <div style={sectionStyle}>
+            <h3 style={{ marginTop: 0, marginBottom: 6, fontSize: 14 }}>Outdated (All)</h3>
+            {hasOutdated ? <BulkActions /> : <p style={{ margin: 0 }}>All dependencies are up to date.</p>}
+          </div>
+        </div>
+      ) : (
+        <p style={{ margin: 0 }}>No package.json data available</p>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/examples/react/basic/src/setup.tsx b/examples/react/basic/src/setup.tsx
index 610f65f7..0c2da836 100644
--- a/examples/react/basic/src/setup.tsx
+++ b/examples/react/basic/src/setup.tsx
@@ -9,6 +9,7 @@ import {
   createRouter,
 } from '@tanstack/react-router'
 import { TanStackDevtools } from '@tanstack/react-devtools'
+import { PackageJsonPanel } from './package-json-panel'
 
 const rootRoute = createRootRoute({
   component: () => (
@@ -72,6 +73,10 @@ export default function DevtoolsExample() {
             name: 'TanStack Router',
             render: <TanStackRouterDevtoolsPanel router={router} />,
           },
+          {
+            name: "Package.json",
+            render: () => <PackageJsonPanel />,
+          }
           /* {
             name: "The actual app",
             render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
diff --git a/examples/react/basic/vite.config.ts b/examples/react/basic/vite.config.ts
index f4d37d0d..f3cfee27 100644
--- a/examples/react/basic/vite.config.ts
+++ b/examples/react/basic/vite.config.ts
@@ -10,6 +10,7 @@ export default defineConfig({
     devtools({
       removeDevtoolsOnBuild: true,
     }),
+
     Inspect(),
     sonda(),
     react({
diff --git a/packages/devtools-vite/package.json b/packages/devtools-vite/package.json
index b2e78167..921df1b9 100644
--- a/packages/devtools-vite/package.json
+++ b/packages/devtools-vite/package.json
@@ -27,6 +27,12 @@
         "default": "./dist/esm/index.js"
       }
     },
+    "./client": {
+      "import": {
+        "types": "./dist/esm/client.d.ts",
+        "default": "./dist/esm/client.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -56,6 +62,7 @@
     "@babel/parser": "^7.28.3",
     "@babel/traverse": "^7.28.3",
     "@babel/types": "^7.28.2",
+    "@tanstack/devtools-event-client": "workspace:*",
     "@tanstack/devtools-event-bus": "workspace:*",
     "chalk": "^5.6.0",
     "launch-editor": "^2.11.1"
@@ -66,4 +73,4 @@
     "@types/babel__traverse": "^7.28.0",
     "happy-dom": "^18.0.1"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/devtools-vite/src/client.ts b/packages/devtools-vite/src/client.ts
new file mode 100644
index 00000000..b0eb2a04
--- /dev/null
+++ b/packages/devtools-vite/src/client.ts
@@ -0,0 +1 @@
+export { devtoolsEventClient } from "./event"
\ No newline at end of file
diff --git a/packages/devtools-vite/src/event.ts b/packages/devtools-vite/src/event.ts
new file mode 100644
index 00000000..dd01884a
--- /dev/null
+++ b/packages/devtools-vite/src/event.ts
@@ -0,0 +1,28 @@
+import { EventClient } from "@tanstack/devtools-event-client"
+
+interface EventMap {
+  "tanstack-devtools-vite:ready": {
+    packageJson: {
+      name?: string
+      version?: string
+      dependencies?: Record<string, string>
+      devDependencies?: Record<string, string>
+      peerDependencies?: Record<string, string>
+      [key: string]: any
+    } | null
+    outdatedDeps: Record<string, { current: string; wanted: string; latest: string; dependent: string; location: string }> | null
+  }
+  "tanstack-devtools-vite:mounted": void
+}
+
+export class DevtoolsEventClient extends EventClient<EventMap> {
+  constructor() {
+    super({
+      pluginId: "tanstack-devtools-vite",
+    })
+  }
+}
+
+const devtoolsEventClient = new DevtoolsEventClient()
+
+export { devtoolsEventClient }
\ No newline at end of file
diff --git a/packages/devtools-vite/src/plugin.ts b/packages/devtools-vite/src/plugin.ts
index 8c43c6b2..cee1fc52 100644
--- a/packages/devtools-vite/src/plugin.ts
+++ b/packages/devtools-vite/src/plugin.ts
@@ -1,7 +1,7 @@
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 import { normalizePath } from 'vite'
 import chalk from 'chalk'
-import { handleDevToolsViteRequest } from './utils'
+import { handleDevToolsViteRequest, readPackageJson, tryParseJson, } from './utils'
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
 import { removeDevtools } from './remove-devtools'
 import { addSourceToJsx } from './inject-source'
@@ -9,6 +9,8 @@ import { enhanceConsoleLog } from './enhance-logs'
 import type { Plugin } from 'vite'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
+import { exec } from 'node:child_process'
+import { devtoolsEventClient } from './event'
 
 export type TanStackDevtoolsViteConfig = {
   /**
@@ -55,14 +57,31 @@ export type TanStackDevtoolsViteConfig = {
 export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
   config
 
-export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
+export const devtools = async (args?: TanStackDevtoolsViteConfig): Promise<Array<Plugin>> => {
   let port = 5173
   const logging = args?.logging ?? true
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
   const injectSourceConfig = args?.injectSource ?? { enabled: true }
   const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true
   const bus = new ServerEventBus(args?.eventBusConfig)
-
+  const packageJson = await readPackageJson()
+  let outdatedDeps: any = null;
+  exec('npm outdated --json', (_, stdout) => {
+    // npm outdated exits with code 1 if there are outdated packages, but still outputs valid JSON
+    if (stdout) {
+      outdatedDeps = tryParseJson(stdout);
+      devtoolsEventClient.emit("ready", {
+        packageJson,
+        outdatedDeps
+      })
+    }
+  });
+  devtoolsEventClient.on("mounted", () => {
+    devtoolsEventClient.emit("ready", {
+      packageJson,
+      outdatedDeps
+    })
+  })
   return [
     {
       enforce: 'pre',
@@ -155,6 +174,17 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         return transform
       },
     },
+    {
+      name: "@tanstack/devtools:listener",
+      async handleHotUpdate({ file }) {
+        if (file.endsWith("package.json")) {
+          console.log(packageJson)
+          const newPackageJson = await readPackageJson();
+          console.log(newPackageJson)
+          //console.log("package.json changed, you might want to restart the dev server")
+        }
+      }
+    },
     {
       name: '@tanstack/devtools:better-console-logs',
       enforce: 'pre',
diff --git a/packages/devtools-vite/src/utils.ts b/packages/devtools-vite/src/utils.ts
index 754a5569..bebdd033 100644
--- a/packages/devtools-vite/src/utils.ts
+++ b/packages/devtools-vite/src/utils.ts
@@ -1,5 +1,5 @@
 import { normalizePath } from 'vite'
-// import fs from 'node:fs/promises'
+import fs from 'node:fs/promises'
 import type { Connect } from 'vite'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 
@@ -50,7 +50,7 @@ export const handleDevToolsViteRequest = (
     try {
       const parsedData = JSON.parse(dataToParse.toString())
       cb(parsedData)
-    } catch (e) {}
+    } catch (e) { }
     res.write('OK')
   })
 }
@@ -66,7 +66,7 @@ export const parseOpenSourceParam = (source: string) => {
   return { file, line, column }
 }
 
-/* export const tryReadFile = async (
+export const tryReadFile = async (
   filePath: string
 ) => {
   try {
@@ -78,11 +78,16 @@ export const parseOpenSourceParam = (source: string) => {
   }
 }
 
-export const tryParseJson = (jsonString: string) => {
+export const tryParseJson = (jsonString: string | null | undefined) => {
+  if (!jsonString) {
+    return null
+  }
   try {
     const result = JSON.parse(jsonString)
     return result
   } catch (error) {
     return null
   }
-} */
+}
+
+export const readPackageJson = async () => await tryParseJson(await tryReadFile(process.cwd() + '/package.json'))
\ No newline at end of file
diff --git a/packages/devtools-vite/vite.config.ts b/packages/devtools-vite/vite.config.ts
index c75b23d1..12c8ec8c 100644
--- a/packages/devtools-vite/vite.config.ts
+++ b/packages/devtools-vite/vite.config.ts
@@ -18,7 +18,7 @@ export default mergeConfig(
   config,
   tanstackViteConfig({
     cjs: false,
-    entry: ['./src/index.ts'],
+    entry: ['./src/index.ts', "./src/client.ts"],
     srcDir: './src',
   }),
 )
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b00b5b92..84b9668d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -468,6 +468,8 @@ importers:
         specifier: ^4.2.4
         version: 4.2.4
 
+  examples/react/start/generated/prisma: {}
+
   examples/react/time-travel:
     dependencies:
       '@tanstack/devtools-event-client':
@@ -630,6 +632,9 @@ importers:
       '@tanstack/devtools-event-bus':
         specifier: workspace:*
         version: link:../event-bus
+      '@tanstack/devtools-event-client':
+        specifier: workspace:*
+        version: link:../event-bus-client
       chalk:
         specifier: ^5.6.0
         version: 5.6.0

From 043876581477accf36fd85f76c5f0f329fafd161 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 22 Sep 2025 11:17:32 +0000
Subject: [PATCH 2/7] ci: apply automated fixes

---
 examples/react/basic/package.json             |   2 +-
 .../react/basic/src/package-json-panel.tsx    | 233 ++++++++++++++----
 examples/react/basic/src/setup.tsx            |   4 +-
 packages/devtools-vite/package.json           |   2 +-
 packages/devtools-vite/src/client.ts          |   2 +-
 packages/devtools-vite/src/event.ts           |  21 +-
 packages/devtools-vite/src/plugin.ts          |  34 +--
 packages/devtools-vite/src/utils.ts           |  10 +-
 packages/devtools-vite/vite.config.ts         |   2 +-
 9 files changed, 233 insertions(+), 77 deletions(-)

diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
index 2b5ad0f0..bf8a0e1f 100644
--- a/examples/react/basic/package.json
+++ b/examples/react/basic/package.json
@@ -41,4 +41,4 @@
       "last 1 safari version"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/examples/react/basic/src/package-json-panel.tsx b/examples/react/basic/src/package-json-panel.tsx
index 2952bf0b..46f80904 100644
--- a/examples/react/basic/src/package-json-panel.tsx
+++ b/examples/react/basic/src/package-json-panel.tsx
@@ -1,18 +1,30 @@
-import { devtoolsEventClient } from "@tanstack/devtools-vite/client"
-import { useEffect, useState } from "react"
-import type { CSSProperties } from "react"
+import { devtoolsEventClient } from '@tanstack/devtools-vite/client'
+import { useEffect, useState } from 'react'
+import type { CSSProperties } from 'react'
 
 export const PackageJsonPanel = () => {
   const [packageJson, setPackageJson] = useState<any>(null)
-  const [outdatedDeps, setOutdatedDeps] = useState<Record<string, { current: string; wanted: string; latest: string; type?: 'dependencies' | 'devDependencies' }>>({})
+  const [outdatedDeps, setOutdatedDeps] = useState<
+    Record<
+      string,
+      {
+        current: string
+        wanted: string
+        latest: string
+        type?: 'dependencies' | 'devDependencies'
+      }
+    >
+  >({})
 
   useEffect(() => {
-    devtoolsEventClient.emit("mounted", undefined as any)
-    const off = devtoolsEventClient.on("ready", (event) => {
+    devtoolsEventClient.emit('mounted', undefined as any)
+    const off = devtoolsEventClient.on('ready', (event) => {
       setPackageJson(event.payload.packageJson)
       setOutdatedDeps(event.payload.outdatedDeps || {})
     })
-    return () => { off?.() }
+    return () => {
+      off?.()
+    }
   }, [])
 
   const hasOutdated = Object.keys(outdatedDeps || {}).length > 0
@@ -25,13 +37,17 @@ export const PackageJsonPanel = () => {
     if (!m) return null
     return { major: +m[1], minor: +m[2], patch: +m[3] }
   }
-  const diffType = (current?: string, latest?: string): 'major' | 'minor' | 'patch' | null => {
+  const diffType = (
+    current?: string,
+    latest?: string,
+  ): 'major' | 'minor' | 'patch' | null => {
     const c = parseSemver(current)
     const l = parseSemver(latest)
     if (!c || !l) return null
     if (l.major > c.major) return 'major'
     if (l.major === c.major && l.minor > c.minor) return 'minor'
-    if (l.major === c.major && l.minor === c.minor && l.patch > c.patch) return 'patch'
+    if (l.major === c.major && l.minor === c.minor && l.patch > c.patch)
+      return 'patch'
     return null
   }
   const diffColor: Record<'major' | 'minor' | 'patch', string> = {
@@ -41,19 +57,69 @@ export const PackageJsonPanel = () => {
   }
 
   const containerStyle: CSSProperties = { padding: 10 }
-  const metaStyle: CSSProperties = { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 6, marginBottom: 8 }
-  const sectionStyle: CSSProperties = { margin: '8px 0', padding: '8px', border: '1px solid #444', borderRadius: 6 }
-  const tableStyle: CSSProperties = { width: '100%', borderCollapse: 'collapse' }
-  const thtd: CSSProperties = { borderBottom: '1px solid #333', padding: '4px 6px', textAlign: 'left' }
-  const badge = (text: string, color: string) => <span style={{ background: color, color: '#fff', borderRadius: 4, padding: '1px 4px', fontSize: 11 }}>{text}</span>
-  const btn = (label: string, onClick: () => void, variant: 'primary' | 'ghost' = 'primary') => (
-    <button onClick={onClick} style={{
-      padding: '2px 6px', borderRadius: 5, border: variant === 'primary' ? '1px solid #6d28d9' : '1px solid transparent', cursor: 'pointer',
-      background: variant === 'primary' ? '#7c3aed' : 'transparent', color: variant === 'primary' ? '#fff' : '#7c3aed', fontSize: 12
-    }}>{label}</button>
+  const metaStyle: CSSProperties = {
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+    gap: 6,
+    marginBottom: 8,
+  }
+  const sectionStyle: CSSProperties = {
+    margin: '8px 0',
+    padding: '8px',
+    border: '1px solid #444',
+    borderRadius: 6,
+  }
+  const tableStyle: CSSProperties = {
+    width: '100%',
+    borderCollapse: 'collapse',
+  }
+  const thtd: CSSProperties = {
+    borderBottom: '1px solid #333',
+    padding: '4px 6px',
+    textAlign: 'left',
+  }
+  const badge = (text: string, color: string) => (
+    <span
+      style={{
+        background: color,
+        color: '#fff',
+        borderRadius: 4,
+        padding: '1px 4px',
+        fontSize: 11,
+      }}
+    >
+      {text}
+    </span>
+  )
+  const btn = (
+    label: string,
+    onClick: () => void,
+    variant: 'primary' | 'ghost' = 'primary',
+  ) => (
+    <button
+      onClick={onClick}
+      style={{
+        padding: '2px 6px',
+        borderRadius: 5,
+        border:
+          variant === 'primary' ? '1px solid #6d28d9' : '1px solid transparent',
+        cursor: 'pointer',
+        background: variant === 'primary' ? '#7c3aed' : 'transparent',
+        color: variant === 'primary' ? '#fff' : '#7c3aed',
+        fontSize: 12,
+      }}
+    >
+      {label}
+    </button>
   )
 
-  const VersionCell = ({ dep, specified }: { dep: string, specified: string }) => {
+  const VersionCell = ({
+    dep,
+    specified,
+  }: {
+    dep: string
+    specified: string
+  }) => {
     const info = outdatedDeps[dep]
     const current = info?.current ?? specified
     const latest = info?.latest
@@ -61,10 +127,14 @@ export const PackageJsonPanel = () => {
     return (
       <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
         <span>{current}</span>
-        {dt && latest ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
-          <span style={{ opacity: 0.6 }}>→</span>
-          {badge(`latest ${latest}`, diffColor[dt])}
-        </span> : null}
+        {dt && latest ? (
+          <span
+            style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
+          >
+            <span style={{ opacity: 0.6 }}>→</span>
+            {badge(`latest ${latest}`, diffColor[dt])}
+          </span>
+        ) : null}
       </div>
     )
   }
@@ -74,16 +144,37 @@ export const PackageJsonPanel = () => {
     if (!info) return null
     return (
       <div style={{ display: 'flex', gap: 6 }}>
-        {btn('Wanted', () => (devtoolsEventClient as any).emit('upgrade-dependency', { name, target: info.wanted } as any))}
-        {btn('Latest', () => (devtoolsEventClient as any).emit('upgrade-dependency', { name, target: info.latest } as any), 'ghost')}
+        {btn('Wanted', () =>
+          (devtoolsEventClient as any).emit('upgrade-dependency', {
+            name,
+            target: info.wanted,
+          } as any),
+        )}
+        {btn(
+          'Latest',
+          () =>
+            (devtoolsEventClient as any).emit('upgrade-dependency', {
+              name,
+              target: info.latest,
+            } as any),
+          'ghost',
+        )}
       </div>
     )
   }
 
   const makeLists = (names?: string[]) => {
-    const entries = Object.entries(outdatedDeps).filter(([n]) => !names || names.includes(n))
-    const wantedList = entries.map(([name, info]) => ({ name, target: info.wanted }))
-    const latestList = entries.map(([name, info]) => ({ name, target: info.latest }))
+    const entries = Object.entries(outdatedDeps).filter(
+      ([n]) => !names || names.includes(n),
+    )
+    const wantedList = entries.map(([name, info]) => ({
+      name,
+      target: info.wanted,
+    }))
+    const latestList = entries.map(([name, info]) => ({
+      name,
+      target: info.latest,
+    }))
     return { wantedList, latestList }
   }
 
@@ -92,8 +183,19 @@ export const PackageJsonPanel = () => {
     if (wantedList.length === 0 && latestList.length === 0) return null
     return (
       <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-        {btn('All → wanted', () => (devtoolsEventClient as any).emit('upgrade-dependencies-bulk', { list: wantedList } as any))}
-        {btn('All → latest', () => (devtoolsEventClient as any).emit('upgrade-dependencies-bulk', { list: latestList } as any), 'ghost')}
+        {btn('All → wanted', () =>
+          (devtoolsEventClient as any).emit('upgrade-dependencies-bulk', {
+            list: wantedList,
+          } as any),
+        )}
+        {btn(
+          'All → latest',
+          () =>
+            (devtoolsEventClient as any).emit('upgrade-dependencies-bulk', {
+              list: latestList,
+            } as any),
+          'ghost',
+        )}
       </div>
     )
   }
@@ -103,7 +205,14 @@ export const PackageJsonPanel = () => {
     const someOutdatedInSection = names.some((n) => !!outdatedDeps[n])
     return (
       <div style={sectionStyle}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6 }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 6,
+          }}
+        >
           <h3 style={{ margin: 0, fontSize: 14 }}>{title}</h3>
           {someOutdatedInSection ? <BulkActions names={names} /> : null}
         </div>
@@ -123,9 +232,17 @@ export const PackageJsonPanel = () => {
               return (
                 <tr key={dep}>
                   <td style={thtd}>{dep}</td>
-                  <td style={thtd}><VersionCell dep={dep} specified={version as string} /></td>
-                  <td style={thtd}>{isOutdated ? badge('Outdated', '#e11d48') : badge('OK', '#10b981')}</td>
-                  <td style={thtd}>{isOutdated ? <UpgradeRowActions name={dep} /> : null}</td>
+                  <td style={thtd}>
+                    <VersionCell dep={dep} specified={version as string} />
+                  </td>
+                  <td style={thtd}>
+                    {isOutdated
+                      ? badge('Outdated', '#e11d48')
+                      : badge('OK', '#10b981')}
+                  </td>
+                  <td style={thtd}>
+                    {isOutdated ? <UpgradeRowActions name={dep} /> : null}
+                  </td>
                 </tr>
               )
             })}
@@ -141,21 +258,47 @@ export const PackageJsonPanel = () => {
       {packageJson ? (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
           <div style={sectionStyle}>
-            <h3 style={{ marginTop: 0, marginBottom: 6, fontSize: 14 }}>Package info</h3>
+            <h3 style={{ marginTop: 0, marginBottom: 6, fontSize: 14 }}>
+              Package info
+            </h3>
             <div style={metaStyle}>
-              <div><strong>Name</strong></div><div>{packageJson.name}</div>
-              <div><strong>Version</strong></div><div>v{packageJson.version}</div>
-              <div><strong>Description</strong></div><div>{packageJson.description}</div>
-              <div><strong>Author</strong></div><div>{packageJson.author}</div>
-              <div><strong>License</strong></div><div>{packageJson.license}</div>
-              <div><strong>Repository</strong></div><div>{packageJson.repository?.url || packageJson.repository}</div>
+              <div>
+                <strong>Name</strong>
+              </div>
+              <div>{packageJson.name}</div>
+              <div>
+                <strong>Version</strong>
+              </div>
+              <div>v{packageJson.version}</div>
+              <div>
+                <strong>Description</strong>
+              </div>
+              <div>{packageJson.description}</div>
+              <div>
+                <strong>Author</strong>
+              </div>
+              <div>{packageJson.author}</div>
+              <div>
+                <strong>License</strong>
+              </div>
+              <div>{packageJson.license}</div>
+              <div>
+                <strong>Repository</strong>
+              </div>
+              <div>{packageJson.repository?.url || packageJson.repository}</div>
             </div>
           </div>
           {renderDeps('Dependencies', packageJson.dependencies)}
           {renderDeps('Dev Dependencies', packageJson.devDependencies)}
           <div style={sectionStyle}>
-            <h3 style={{ marginTop: 0, marginBottom: 6, fontSize: 14 }}>Outdated (All)</h3>
-            {hasOutdated ? <BulkActions /> : <p style={{ margin: 0 }}>All dependencies are up to date.</p>}
+            <h3 style={{ marginTop: 0, marginBottom: 6, fontSize: 14 }}>
+              Outdated (All)
+            </h3>
+            {hasOutdated ? (
+              <BulkActions />
+            ) : (
+              <p style={{ margin: 0 }}>All dependencies are up to date.</p>
+            )}
           </div>
         </div>
       ) : (
@@ -163,4 +306,4 @@ export const PackageJsonPanel = () => {
       )}
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/examples/react/basic/src/setup.tsx b/examples/react/basic/src/setup.tsx
index 0c2da836..191f158c 100644
--- a/examples/react/basic/src/setup.tsx
+++ b/examples/react/basic/src/setup.tsx
@@ -74,9 +74,9 @@ export default function DevtoolsExample() {
             render: <TanStackRouterDevtoolsPanel router={router} />,
           },
           {
-            name: "Package.json",
+            name: 'Package.json',
             render: () => <PackageJsonPanel />,
-          }
+          },
           /* {
             name: "The actual app",
             render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,
diff --git a/packages/devtools-vite/package.json b/packages/devtools-vite/package.json
index 921df1b9..50e3a43d 100644
--- a/packages/devtools-vite/package.json
+++ b/packages/devtools-vite/package.json
@@ -73,4 +73,4 @@
     "@types/babel__traverse": "^7.28.0",
     "happy-dom": "^18.0.1"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/devtools-vite/src/client.ts b/packages/devtools-vite/src/client.ts
index b0eb2a04..a40fe940 100644
--- a/packages/devtools-vite/src/client.ts
+++ b/packages/devtools-vite/src/client.ts
@@ -1 +1 @@
-export { devtoolsEventClient } from "./event"
\ No newline at end of file
+export { devtoolsEventClient } from './event'
diff --git a/packages/devtools-vite/src/event.ts b/packages/devtools-vite/src/event.ts
index dd01884a..97ee5536 100644
--- a/packages/devtools-vite/src/event.ts
+++ b/packages/devtools-vite/src/event.ts
@@ -1,7 +1,7 @@
-import { EventClient } from "@tanstack/devtools-event-client"
+import { EventClient } from '@tanstack/devtools-event-client'
 
 interface EventMap {
-  "tanstack-devtools-vite:ready": {
+  'tanstack-devtools-vite:ready': {
     packageJson: {
       name?: string
       version?: string
@@ -10,19 +10,28 @@ interface EventMap {
       peerDependencies?: Record<string, string>
       [key: string]: any
     } | null
-    outdatedDeps: Record<string, { current: string; wanted: string; latest: string; dependent: string; location: string }> | null
+    outdatedDeps: Record<
+      string,
+      {
+        current: string
+        wanted: string
+        latest: string
+        dependent: string
+        location: string
+      }
+    > | null
   }
-  "tanstack-devtools-vite:mounted": void
+  'tanstack-devtools-vite:mounted': void
 }
 
 export class DevtoolsEventClient extends EventClient<EventMap> {
   constructor() {
     super({
-      pluginId: "tanstack-devtools-vite",
+      pluginId: 'tanstack-devtools-vite',
     })
   }
 }
 
 const devtoolsEventClient = new DevtoolsEventClient()
 
-export { devtoolsEventClient }
\ No newline at end of file
+export { devtoolsEventClient }
diff --git a/packages/devtools-vite/src/plugin.ts b/packages/devtools-vite/src/plugin.ts
index cee1fc52..f5b45f80 100644
--- a/packages/devtools-vite/src/plugin.ts
+++ b/packages/devtools-vite/src/plugin.ts
@@ -1,7 +1,11 @@
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 import { normalizePath } from 'vite'
 import chalk from 'chalk'
-import { handleDevToolsViteRequest, readPackageJson, tryParseJson, } from './utils'
+import {
+  handleDevToolsViteRequest,
+  readPackageJson,
+  tryParseJson,
+} from './utils'
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
 import { removeDevtools } from './remove-devtools'
 import { addSourceToJsx } from './inject-source'
@@ -57,7 +61,9 @@ export type TanStackDevtoolsViteConfig = {
 export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
   config
 
-export const devtools = async (args?: TanStackDevtoolsViteConfig): Promise<Array<Plugin>> => {
+export const devtools = async (
+  args?: TanStackDevtoolsViteConfig,
+): Promise<Array<Plugin>> => {
   let port = 5173
   const logging = args?.logging ?? true
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
@@ -65,21 +71,21 @@ export const devtools = async (args?: TanStackDevtoolsViteConfig): Promise<Array
   const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true
   const bus = new ServerEventBus(args?.eventBusConfig)
   const packageJson = await readPackageJson()
-  let outdatedDeps: any = null;
+  let outdatedDeps: any = null
   exec('npm outdated --json', (_, stdout) => {
     // npm outdated exits with code 1 if there are outdated packages, but still outputs valid JSON
     if (stdout) {
-      outdatedDeps = tryParseJson(stdout);
-      devtoolsEventClient.emit("ready", {
+      outdatedDeps = tryParseJson(stdout)
+      devtoolsEventClient.emit('ready', {
         packageJson,
-        outdatedDeps
+        outdatedDeps,
       })
     }
-  });
-  devtoolsEventClient.on("mounted", () => {
-    devtoolsEventClient.emit("ready", {
+  })
+  devtoolsEventClient.on('mounted', () => {
+    devtoolsEventClient.emit('ready', {
       packageJson,
-      outdatedDeps
+      outdatedDeps,
     })
   })
   return [
@@ -175,15 +181,15 @@ export const devtools = async (args?: TanStackDevtoolsViteConfig): Promise<Array
       },
     },
     {
-      name: "@tanstack/devtools:listener",
+      name: '@tanstack/devtools:listener',
       async handleHotUpdate({ file }) {
-        if (file.endsWith("package.json")) {
+        if (file.endsWith('package.json')) {
           console.log(packageJson)
-          const newPackageJson = await readPackageJson();
+          const newPackageJson = await readPackageJson()
           console.log(newPackageJson)
           //console.log("package.json changed, you might want to restart the dev server")
         }
-      }
+      },
     },
     {
       name: '@tanstack/devtools:better-console-logs',
diff --git a/packages/devtools-vite/src/utils.ts b/packages/devtools-vite/src/utils.ts
index bebdd033..2a9239c6 100644
--- a/packages/devtools-vite/src/utils.ts
+++ b/packages/devtools-vite/src/utils.ts
@@ -50,7 +50,7 @@ export const handleDevToolsViteRequest = (
     try {
       const parsedData = JSON.parse(dataToParse.toString())
       cb(parsedData)
-    } catch (e) { }
+    } catch (e) {}
     res.write('OK')
   })
 }
@@ -66,14 +66,11 @@ export const parseOpenSourceParam = (source: string) => {
   return { file, line, column }
 }
 
-export const tryReadFile = async (
-  filePath: string
-) => {
+export const tryReadFile = async (filePath: string) => {
   try {
     const data = await fs.readFile(filePath, 'utf-8')
     return data
   } catch (error) {
-
     return null
   }
 }
@@ -90,4 +87,5 @@ export const tryParseJson = (jsonString: string | null | undefined) => {
   }
 }
 
-export const readPackageJson = async () => await tryParseJson(await tryReadFile(process.cwd() + '/package.json'))
\ No newline at end of file
+export const readPackageJson = async () =>
+  await tryParseJson(await tryReadFile(process.cwd() + '/package.json'))
diff --git a/packages/devtools-vite/vite.config.ts b/packages/devtools-vite/vite.config.ts
index 12c8ec8c..a9bccc2d 100644
--- a/packages/devtools-vite/vite.config.ts
+++ b/packages/devtools-vite/vite.config.ts
@@ -18,7 +18,7 @@ export default mergeConfig(
   config,
   tanstackViteConfig({
     cjs: false,
-    entry: ['./src/index.ts', "./src/client.ts"],
+    entry: ['./src/index.ts', './src/client.ts'],
     srcDir: './src',
   }),
 )

From 830bb72e6b6cd989a7f00def81e44dceba67313c Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 8 Oct 2025 14:03:05 +0000
Subject: [PATCH 3/7] ci: apply automated fixes

---
 packages/devtools-vite/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devtools-vite/package.json b/packages/devtools-vite/package.json
index 0d0a1a84..b2e90704 100644
--- a/packages/devtools-vite/package.json
+++ b/packages/devtools-vite/package.json
@@ -73,4 +73,4 @@
     "@types/babel__traverse": "^7.28.0",
     "happy-dom": "^18.0.1"
   }
-}
\ No newline at end of file
+}

From 59803234538e2b5e8c21dfb1dfd6df8c3cf9adb7 Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Wed, 8 Oct 2025 17:08:08 +0200
Subject: [PATCH 4/7] separate event client

---
 examples/react/basic/package.json             |  3 +-
 .../react/basic/src/package-json-panel.tsx    | 36 ++++++++----
 packages/devtools-client/README.md            |  3 +
 packages/devtools-client/eslint.config.js     | 10 ++++
 packages/devtools-client/package.json         | 56 +++++++++++++++++++
 .../event.ts => devtools-client/src/index.ts} |  6 +-
 packages/devtools-client/tests/test-setup.ts  |  1 +
 packages/devtools-client/tsconfig.docs.json   |  4 ++
 packages/devtools-client/tsconfig.json        | 15 +++++
 packages/devtools-client/vite.config.ts       | 24 ++++++++
 packages/devtools-vite/package.json           |  9 +--
 packages/devtools-vite/src/client.ts          |  1 -
 packages/devtools-vite/src/plugin.ts          |  5 +-
 packages/devtools-vite/vite.config.ts         |  2 +-
 pnpm-lock.yaml                                | 22 ++++++++
 15 files changed, 170 insertions(+), 27 deletions(-)
 create mode 100644 packages/devtools-client/README.md
 create mode 100644 packages/devtools-client/eslint.config.js
 create mode 100644 packages/devtools-client/package.json
 rename packages/{devtools-vite/src/event.ts => devtools-client/src/index.ts} (85%)
 create mode 100644 packages/devtools-client/tests/test-setup.ts
 create mode 100644 packages/devtools-client/tsconfig.docs.json
 create mode 100644 packages/devtools-client/tsconfig.json
 create mode 100644 packages/devtools-client/vite.config.ts
 delete mode 100644 packages/devtools-vite/src/client.ts

diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
index affa8c08..7338b57d 100644
--- a/examples/react/basic/package.json
+++ b/examples/react/basic/package.json
@@ -9,6 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/devtools-client": "0.0.1",
     "@tanstack/devtools-event-client": "0.3.2",
     "@tanstack/react-devtools": "^0.7.4",
     "@tanstack/react-query": "^5.90.1",
@@ -41,4 +42,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/examples/react/basic/src/package-json-panel.tsx b/examples/react/basic/src/package-json-panel.tsx
index 46f80904..b6bdb6f1 100644
--- a/examples/react/basic/src/package-json-panel.tsx
+++ b/examples/react/basic/src/package-json-panel.tsx
@@ -1,4 +1,4 @@
-import { devtoolsEventClient } from '@tanstack/devtools-vite/client'
+import { devtoolsEventClient } from '@tanstack/devtools-client'
 import { useEffect, useState } from 'react'
 import type { CSSProperties } from 'react'
 
@@ -22,12 +22,10 @@ export const PackageJsonPanel = () => {
       setPackageJson(event.payload.packageJson)
       setOutdatedDeps(event.payload.outdatedDeps || {})
     })
-    return () => {
-      off?.()
-    }
+    return off
   }, [])
 
-  const hasOutdated = Object.keys(outdatedDeps || {}).length > 0
+  const hasOutdated = Object.keys(outdatedDeps).length > 0
 
   // Helpers
   const stripRange = (v?: string) => (v ?? '').replace(/^[~^><=v\s]*/, '')
@@ -120,7 +118,12 @@ export const PackageJsonPanel = () => {
     dep: string
     specified: string
   }) => {
-    const info = outdatedDeps[dep]
+    const info = outdatedDeps[dep] as {
+      current: string
+      wanted: string
+      latest: string
+      type?: 'dependencies' | 'devDependencies'
+    } | undefined
     const current = info?.current ?? specified
     const latest = info?.latest
     const dt = info ? diffType(current, latest) : null
@@ -140,7 +143,12 @@ export const PackageJsonPanel = () => {
   }
 
   const UpgradeRowActions = ({ name }: { name: string }) => {
-    const info = outdatedDeps[name]
+    const info = outdatedDeps[name] as {
+      current: string
+      wanted: string
+      latest: string
+      type?: 'dependencies' | 'devDependencies'
+    } | undefined
     if (!info) return null
     return (
       <div style={{ display: 'flex', gap: 6 }}>
@@ -163,7 +171,7 @@ export const PackageJsonPanel = () => {
     )
   }
 
-  const makeLists = (names?: string[]) => {
+  const makeLists = (names?: Array<string>) => {
     const entries = Object.entries(outdatedDeps).filter(
       ([n]) => !names || names.includes(n),
     )
@@ -178,7 +186,7 @@ export const PackageJsonPanel = () => {
     return { wantedList, latestList }
   }
 
-  const BulkActions = ({ names }: { names?: string[] }) => {
+  const BulkActions = ({ names }: { names?: Array<string> }) => {
     const { wantedList, latestList } = makeLists(names)
     if (wantedList.length === 0 && latestList.length === 0) return null
     return (
@@ -202,6 +210,7 @@ export const PackageJsonPanel = () => {
 
   const renderDeps = (title: string, deps?: Record<string, string>) => {
     const names = Object.keys(deps || {})
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const someOutdatedInSection = names.some((n) => !!outdatedDeps[n])
     return (
       <div style={sectionStyle}>
@@ -227,13 +236,18 @@ export const PackageJsonPanel = () => {
           </thead>
           <tbody>
             {Object.entries(deps || {}).map(([dep, version]) => {
-              const info = outdatedDeps[dep]
+              const info = outdatedDeps[dep] as {
+                current: string
+                wanted: string
+                latest: string
+                type?: 'dependencies' | 'devDependencies'
+              } | undefined
               const isOutdated = !!info && info.current !== info.latest
               return (
                 <tr key={dep}>
                   <td style={thtd}>{dep}</td>
                   <td style={thtd}>
-                    <VersionCell dep={dep} specified={version as string} />
+                    <VersionCell dep={dep} specified={version} />
                   </td>
                   <td style={thtd}>
                     {isOutdated
diff --git a/packages/devtools-client/README.md b/packages/devtools-client/README.md
new file mode 100644
index 00000000..1dfd3ab3
--- /dev/null
+++ b/packages/devtools-client/README.md
@@ -0,0 +1,3 @@
+# @tanstack/devtools-utils
+
+This package is still under active development and might have breaking changes in the future. Please use it with caution.
diff --git a/packages/devtools-client/eslint.config.js b/packages/devtools-client/eslint.config.js
new file mode 100644
index 00000000..e472c69e
--- /dev/null
+++ b/packages/devtools-client/eslint.config.js
@@ -0,0 +1,10 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+export default [
+  ...rootConfig,
+  {
+    rules: {},
+  },
+]
diff --git a/packages/devtools-client/package.json b/packages/devtools-client/package.json
new file mode 100644
index 00000000..c26bca74
--- /dev/null
+++ b/packages/devtools-client/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@tanstack/devtools-client",
+  "version": "0.0.1",
+  "description": "TanStack Devtools client that is used to interact with the event system produced by the Devtools.",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/devtools.git",
+    "directory": "packages/devtools"
+  },
+  "homepage": "https://tanstack.com/devtools",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "devtools"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@tanstack/devtools-event-client": "workspace:^"
+  },
+  "files": [
+    "dist/",
+    "src"
+  ],
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "tsup-preset-solid": "^2.2.0",
+    "vite-plugin-solid": "^2.11.8"
+  }
+}
\ No newline at end of file
diff --git a/packages/devtools-vite/src/event.ts b/packages/devtools-client/src/index.ts
similarity index 85%
rename from packages/devtools-vite/src/event.ts
rename to packages/devtools-client/src/index.ts
index 97ee5536..ab460109 100644
--- a/packages/devtools-vite/src/event.ts
+++ b/packages/devtools-client/src/index.ts
@@ -1,7 +1,7 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 interface EventMap {
-  'tanstack-devtools-vite:ready': {
+  'tanstack-devtools-core:ready': {
     packageJson: {
       name?: string
       version?: string
@@ -21,13 +21,13 @@ interface EventMap {
       }
     > | null
   }
-  'tanstack-devtools-vite:mounted': void
+  'tanstack-devtools-core:mounted': void
 }
 
 export class DevtoolsEventClient extends EventClient<EventMap> {
   constructor() {
     super({
-      pluginId: 'tanstack-devtools-vite',
+      pluginId: 'tanstack-devtools-core',
     })
   }
 }
diff --git a/packages/devtools-client/tests/test-setup.ts b/packages/devtools-client/tests/test-setup.ts
new file mode 100644
index 00000000..a9d0dd31
--- /dev/null
+++ b/packages/devtools-client/tests/test-setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'
diff --git a/packages/devtools-client/tsconfig.docs.json b/packages/devtools-client/tsconfig.docs.json
new file mode 100644
index 00000000..2880b4df
--- /dev/null
+++ b/packages/devtools-client/tsconfig.docs.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["tests", "src"]
+}
diff --git a/packages/devtools-client/tsconfig.json b/packages/devtools-client/tsconfig.json
new file mode 100644
index 00000000..acf9bbd2
--- /dev/null
+++ b/packages/devtools-client/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  },
+  "extends": "../../tsconfig.json",
+  "include": [
+    "src",
+    "tsup.config.ts",
+    "eslint.config.js",
+    "vite.config.ts",
+    "tests",
+    "vite.config.solid.ts"
+  ]
+}
diff --git a/packages/devtools-client/vite.config.ts b/packages/devtools-client/vite.config.ts
new file mode 100644
index 00000000..92e9a947
--- /dev/null
+++ b/packages/devtools-client/vite.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { tanstackViteConfig } from '@tanstack/config/vite'
+import packageJson from './package.json'
+
+const config = defineConfig({
+  plugins: [],
+  test: {
+    name: packageJson.name,
+    dir: './',
+    watch: false,
+    environment: 'jsdom',
+    setupFiles: ['./tests/test-setup.ts'],
+    globals: true,
+  },
+})
+
+export default mergeConfig(
+  config,
+  tanstackViteConfig({
+    entry: ['./src/index.ts'],
+    srcDir: './src',
+    cjs: false,
+  }),
+)
diff --git a/packages/devtools-vite/package.json b/packages/devtools-vite/package.json
index b2e90704..8164b701 100644
--- a/packages/devtools-vite/package.json
+++ b/packages/devtools-vite/package.json
@@ -27,12 +27,6 @@
         "default": "./dist/esm/index.js"
       }
     },
-    "./client": {
-      "import": {
-        "types": "./dist/esm/client.d.ts",
-        "default": "./dist/esm/client.js"
-      }
-    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -62,6 +56,7 @@
     "@babel/parser": "^7.28.4",
     "@babel/traverse": "^7.28.4",
     "@babel/types": "^7.28.4",
+    "@tanstack/devtools-client": "workspace:*",
     "@tanstack/devtools-event-client": "workspace:*",
     "@tanstack/devtools-event-bus": "workspace:*",
     "chalk": "^5.6.2",
@@ -73,4 +68,4 @@
     "@types/babel__traverse": "^7.28.0",
     "happy-dom": "^18.0.1"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/devtools-vite/src/client.ts b/packages/devtools-vite/src/client.ts
deleted file mode 100644
index a40fe940..00000000
--- a/packages/devtools-vite/src/client.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { devtoolsEventClient } from './event'
diff --git a/packages/devtools-vite/src/plugin.ts b/packages/devtools-vite/src/plugin.ts
index 8b614e2b..7e97128d 100644
--- a/packages/devtools-vite/src/plugin.ts
+++ b/packages/devtools-vite/src/plugin.ts
@@ -1,3 +1,5 @@
+import { exec } from 'node:child_process'
+import { devtoolsEventClient } from '@tanstack/devtools-client'
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 import { normalizePath } from 'vite'
 import chalk from 'chalk'
@@ -13,8 +15,6 @@ import { enhanceConsoleLog } from './enhance-logs'
 import type { Plugin } from 'vite'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
-import { exec } from 'node:child_process'
-import { devtoolsEventClient } from './event'
 
 export type TanStackDevtoolsViteConfig = {
   /**
@@ -214,7 +214,6 @@ export const devtools = async (
           console.log(packageJson)
           const newPackageJson = await readPackageJson()
           console.log(newPackageJson)
-          //console.log("package.json changed, you might want to restart the dev server")
         }
       },
     },
diff --git a/packages/devtools-vite/vite.config.ts b/packages/devtools-vite/vite.config.ts
index a9bccc2d..c75b23d1 100644
--- a/packages/devtools-vite/vite.config.ts
+++ b/packages/devtools-vite/vite.config.ts
@@ -18,7 +18,7 @@ export default mergeConfig(
   config,
   tanstackViteConfig({
     cjs: false,
-    entry: ['./src/index.ts', './src/client.ts'],
+    entry: ['./src/index.ts'],
     srcDir: './src',
   }),
 )
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9da01323..cff4dad7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
 
   examples/react/basic:
     dependencies:
+      '@tanstack/devtools-client':
+        specifier: 0.0.1
+        version: link:../../../packages/devtools-client
       '@tanstack/devtools-event-client':
         specifier: 0.3.2
         version: link:../../../packages/event-bus-client
@@ -505,6 +508,22 @@ importers:
         specifier: ^2.11.8
         version: 2.11.8(@testing-library/jest-dom@6.8.0)(solid-js@1.9.9)(vite@7.1.7(@types/node@22.15.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.90.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))
 
+  packages/devtools-client:
+    dependencies:
+      '@tanstack/devtools-event-client':
+        specifier: workspace:^
+        version: link:../event-bus-client
+    devDependencies:
+      tsup:
+        specifier: ^8.5.0
+        version: 8.5.0(@microsoft/api-extractor@7.47.7(@types/node@22.15.2))(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.0)
+      tsup-preset-solid:
+        specifier: ^2.2.0
+        version: 2.2.0(esbuild@0.25.9)(solid-js@1.9.9)(tsup@8.5.0(@microsoft/api-extractor@7.47.7(@types/node@22.15.2))(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.0))
+      vite-plugin-solid:
+        specifier: ^2.11.8
+        version: 2.11.8(@testing-library/jest-dom@6.8.0)(solid-js@1.9.9)(vite@7.1.7(@types/node@22.15.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.90.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))
+
   packages/devtools-ui:
     dependencies:
       clsx:
@@ -563,6 +582,9 @@ importers:
       '@babel/types':
         specifier: ^7.28.4
         version: 7.28.4
+      '@tanstack/devtools-client':
+        specifier: workspace:*
+        version: link:../devtools-client
       '@tanstack/devtools-event-bus':
         specifier: workspace:*
         version: link:../event-bus

From 9271b5822a16f31e35e6947ebc19d195b16d439b Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 8 Oct 2025 15:08:43 +0000
Subject: [PATCH 5/7] ci: apply automated fixes

---
 examples/react/basic/package.json             |  2 +-
 .../react/basic/src/package-json-panel.tsx    | 42 +++++++++++--------
 packages/devtools-client/package.json         |  2 +-
 packages/devtools-vite/package.json           |  2 +-
 4 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
index 7338b57d..a17cd8b7 100644
--- a/examples/react/basic/package.json
+++ b/examples/react/basic/package.json
@@ -42,4 +42,4 @@
       "last 1 safari version"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/examples/react/basic/src/package-json-panel.tsx b/examples/react/basic/src/package-json-panel.tsx
index b6bdb6f1..ae470034 100644
--- a/examples/react/basic/src/package-json-panel.tsx
+++ b/examples/react/basic/src/package-json-panel.tsx
@@ -118,12 +118,14 @@ export const PackageJsonPanel = () => {
     dep: string
     specified: string
   }) => {
-    const info = outdatedDeps[dep] as {
-      current: string
-      wanted: string
-      latest: string
-      type?: 'dependencies' | 'devDependencies'
-    } | undefined
+    const info = outdatedDeps[dep] as
+      | {
+          current: string
+          wanted: string
+          latest: string
+          type?: 'dependencies' | 'devDependencies'
+        }
+      | undefined
     const current = info?.current ?? specified
     const latest = info?.latest
     const dt = info ? diffType(current, latest) : null
@@ -143,12 +145,14 @@ export const PackageJsonPanel = () => {
   }
 
   const UpgradeRowActions = ({ name }: { name: string }) => {
-    const info = outdatedDeps[name] as {
-      current: string
-      wanted: string
-      latest: string
-      type?: 'dependencies' | 'devDependencies'
-    } | undefined
+    const info = outdatedDeps[name] as
+      | {
+          current: string
+          wanted: string
+          latest: string
+          type?: 'dependencies' | 'devDependencies'
+        }
+      | undefined
     if (!info) return null
     return (
       <div style={{ display: 'flex', gap: 6 }}>
@@ -236,12 +240,14 @@ export const PackageJsonPanel = () => {
           </thead>
           <tbody>
             {Object.entries(deps || {}).map(([dep, version]) => {
-              const info = outdatedDeps[dep] as {
-                current: string
-                wanted: string
-                latest: string
-                type?: 'dependencies' | 'devDependencies'
-              } | undefined
+              const info = outdatedDeps[dep] as
+                | {
+                    current: string
+                    wanted: string
+                    latest: string
+                    type?: 'dependencies' | 'devDependencies'
+                  }
+                | undefined
               const isOutdated = !!info && info.current !== info.latest
               return (
                 <tr key={dep}>
diff --git a/packages/devtools-client/package.json b/packages/devtools-client/package.json
index c26bca74..6dc449e6 100644
--- a/packages/devtools-client/package.json
+++ b/packages/devtools-client/package.json
@@ -53,4 +53,4 @@
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.11.8"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/devtools-vite/package.json b/packages/devtools-vite/package.json
index 8164b701..92536b9d 100644
--- a/packages/devtools-vite/package.json
+++ b/packages/devtools-vite/package.json
@@ -68,4 +68,4 @@
     "@types/babel__traverse": "^7.28.0",
     "happy-dom": "^18.0.1"
   }
-}
\ No newline at end of file
+}

From da3009bb3e5991023116e25b0ca6db1e1f6aa500 Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Fri, 10 Oct 2025 12:33:52 +0200
Subject: [PATCH 6/7] fix tests

---
 .changeset/curly-bikes-play.md                | 13 +++
 examples/angular/ssr/package.json             |  5 ++
 .../react/basic/src/package-json-panel.tsx    | 42 +++++----
 package.json                                  |  4 +-
 packages/devtools-client/package.json         |  9 +-
 packages/devtools-client/src/index.ts         | 69 +++++++++++----
 packages/devtools-client/tsconfig.json        |  4 -
 packages/devtools-vite/package.json           |  3 +-
 packages/devtools-vite/src/plugin.ts          | 86 +++++++++++++------
 packages/devtools-vite/src/utils.ts           | 13 +--
 packages/devtools/src/components/trigger.tsx  | 20 +++--
 .../src/context/devtools-context.test.ts      |  4 +-
 .../devtools/src/context/devtools-context.tsx | 15 ++--
 .../devtools/src/context/devtools-store.ts    |  5 ++
 packages/devtools/src/tabs/settings-tab.tsx   |  8 ++
 packages/event-bus-client/src/plugin.ts       | 29 +++++++
 pnpm-lock.yaml                                | 15 +---
 17 files changed, 231 insertions(+), 113 deletions(-)
 create mode 100644 .changeset/curly-bikes-play.md
 create mode 100644 examples/angular/ssr/package.json

diff --git a/.changeset/curly-bikes-play.md b/.changeset/curly-bikes-play.md
new file mode 100644
index 00000000..2a0b064c
--- /dev/null
+++ b/.changeset/curly-bikes-play.md
@@ -0,0 +1,13 @@
+---
+'@tanstack/devtools-event-client': patch
+'@tanstack/devtools-client': patch
+'@tanstack/devtools-vite': patch
+'@tanstack/devtools': patch
+---
+
+
+Number of improvements to various parts of the DevTools:
+- Update event client to allow users to disable it
+- Allow trigger to be completely hidden
+- Add a new package `@tanstack/devtools-client` to allow users to listen to events we emit from Vite.
+- Fix bugs inside of the DevTools like plugins being nuked on page refresh.
\ No newline at end of file
diff --git a/examples/angular/ssr/package.json b/examples/angular/ssr/package.json
new file mode 100644
index 00000000..bd16199b
--- /dev/null
+++ b/examples/angular/ssr/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "ssr",
+  "version": "0.0.0",
+  "private": true
+}
\ No newline at end of file
diff --git a/examples/react/basic/src/package-json-panel.tsx b/examples/react/basic/src/package-json-panel.tsx
index ae470034..6963431b 100644
--- a/examples/react/basic/src/package-json-panel.tsx
+++ b/examples/react/basic/src/package-json-panel.tsx
@@ -18,11 +18,17 @@ export const PackageJsonPanel = () => {
 
   useEffect(() => {
     devtoolsEventClient.emit('mounted', undefined as any)
-    const off = devtoolsEventClient.on('ready', (event) => {
-      setPackageJson(event.payload.packageJson)
+    const cleanupOutdated = devtoolsEventClient.on("outdated-deps-read", (event) => {
       setOutdatedDeps(event.payload.outdatedDeps || {})
     })
-    return off
+    const cleanupPackageJson = devtoolsEventClient.on("package-json-read", (event) => {
+      console.log('package-json-read', event)
+      setPackageJson(event.payload.packageJson)
+    })
+    return () => {
+      cleanupOutdated()
+      cleanupPackageJson()
+    }
   }, [])
 
   const hasOutdated = Object.keys(outdatedDeps).length > 0
@@ -120,11 +126,11 @@ export const PackageJsonPanel = () => {
   }) => {
     const info = outdatedDeps[dep] as
       | {
-          current: string
-          wanted: string
-          latest: string
-          type?: 'dependencies' | 'devDependencies'
-        }
+        current: string
+        wanted: string
+        latest: string
+        type?: 'dependencies' | 'devDependencies'
+      }
       | undefined
     const current = info?.current ?? specified
     const latest = info?.latest
@@ -147,11 +153,11 @@ export const PackageJsonPanel = () => {
   const UpgradeRowActions = ({ name }: { name: string }) => {
     const info = outdatedDeps[name] as
       | {
-          current: string
-          wanted: string
-          latest: string
-          type?: 'dependencies' | 'devDependencies'
-        }
+        current: string
+        wanted: string
+        latest: string
+        type?: 'dependencies' | 'devDependencies'
+      }
       | undefined
     if (!info) return null
     return (
@@ -242,11 +248,11 @@ export const PackageJsonPanel = () => {
             {Object.entries(deps || {}).map(([dep, version]) => {
               const info = outdatedDeps[dep] as
                 | {
-                    current: string
-                    wanted: string
-                    latest: string
-                    type?: 'dependencies' | 'devDependencies'
-                  }
+                  current: string
+                  wanted: string
+                  latest: string
+                  type?: 'dependencies' | 'devDependencies'
+                }
                 | undefined
               const isOutdated = !!info && info.current !== info.latest
               return (
diff --git a/package.json b/package.json
index 9614c8e0..ecc5b285 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     },
     {
       "path": "packages/event-bus-client/dist/esm/plugin.js",
-      "limit": "1 KB"
+      "limit": "1.1 KB"
     }
   ],
   "devDependencies": {
@@ -85,4 +85,4 @@
     "@tanstack/solid-devtools": "workspace:*",
     "@tanstack/devtools-vite": "workspace:*"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/devtools-client/package.json b/packages/devtools-client/package.json
index 6dc449e6..bbc4f13e 100644
--- a/packages/devtools-client/package.json
+++ b/packages/devtools-client/package.json
@@ -42,15 +42,10 @@
     "clean": "premove ./build ./dist",
     "lint:fix": "eslint ./src --fix",
     "test:eslint": "eslint ./src",
-    "test:lib": "vitest",
+    "test:lib": "vitest --passWithNoTests",
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
     "build": "vite build"
-  },
-  "devDependencies": {
-    "tsup": "^8.5.0",
-    "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "^2.11.8"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/devtools-client/src/index.ts b/packages/devtools-client/src/index.ts
index ab460109..939132e8 100644
--- a/packages/devtools-client/src/index.ts
+++ b/packages/devtools-client/src/index.ts
@@ -1,25 +1,58 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
+export interface PackageJson {
+  name?: string
+  version?: string
+  description?: string
+  author?: string
+  license?: string
+  scripts?: Record<string, string>
+  keywords?: Array<string>
+  homepage?: string
+  repository?:
+    | string
+    | {
+        type: string
+        url: string
+      }
+  bugs?:
+    | string
+    | {
+        url?: string
+        email?: string
+      }
+  readme?: string
+  packageManager?: string
+  engines?: Record<string, string>
+  private?: boolean
+  type?: 'module' | 'commonjs'
+  overrides?: Record<string, string>
+  dependencies?: Record<string, string>
+  devDependencies?: Record<string, string>
+  peerDependencies?: Record<string, string>
+  [key: string]: any
+}
+
+export interface OutdatedDeps {
+  [key: string]: {
+    current: string
+    wanted: string
+    latest: string
+    dependent: string
+    location: string
+  }
+}
+
 interface EventMap {
   'tanstack-devtools-core:ready': {
-    packageJson: {
-      name?: string
-      version?: string
-      dependencies?: Record<string, string>
-      devDependencies?: Record<string, string>
-      peerDependencies?: Record<string, string>
-      [key: string]: any
-    } | null
-    outdatedDeps: Record<
-      string,
-      {
-        current: string
-        wanted: string
-        latest: string
-        dependent: string
-        location: string
-      }
-    > | null
+    packageJson: PackageJson | null
+    outdatedDeps: OutdatedDeps | null
+  }
+  'tanstack-devtools-core:outdated-deps-read': {
+    outdatedDeps: OutdatedDeps | null
+  }
+  'tanstack-devtools-core:package-json-read': {
+    packageJson: PackageJson | null
   }
   'tanstack-devtools-core:mounted': void
 }
diff --git a/packages/devtools-client/tsconfig.json b/packages/devtools-client/tsconfig.json
index acf9bbd2..9addc1ae 100644
--- a/packages/devtools-client/tsconfig.json
+++ b/packages/devtools-client/tsconfig.json
@@ -1,8 +1,4 @@
 {
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
-  },
   "extends": "../../tsconfig.json",
   "include": [
     "src",
diff --git a/packages/devtools-vite/package.json b/packages/devtools-vite/package.json
index 92536b9d..4c8b36e1 100644
--- a/packages/devtools-vite/package.json
+++ b/packages/devtools-vite/package.json
@@ -57,7 +57,6 @@
     "@babel/traverse": "^7.28.4",
     "@babel/types": "^7.28.4",
     "@tanstack/devtools-client": "workspace:*",
-    "@tanstack/devtools-event-client": "workspace:*",
     "@tanstack/devtools-event-bus": "workspace:*",
     "chalk": "^5.6.2",
     "launch-editor": "^2.11.1"
@@ -68,4 +67,4 @@
     "@types/babel__traverse": "^7.28.0",
     "happy-dom": "^18.0.1"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/devtools-vite/src/plugin.ts b/packages/devtools-vite/src/plugin.ts
index 7e97128d..1110afe2 100644
--- a/packages/devtools-vite/src/plugin.ts
+++ b/packages/devtools-vite/src/plugin.ts
@@ -12,6 +12,7 @@ import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
 import { removeDevtools } from './remove-devtools'
 import { addSourceToJsx } from './inject-source'
 import { enhanceConsoleLog } from './enhance-logs'
+import type { OutdatedDeps } from '@tanstack/devtools-client'
 import type { Plugin } from 'vite'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
@@ -24,7 +25,13 @@ export type TanStackDevtoolsViteConfig = {
   /**
    * The configuration options for the server event bus
    */
-  eventBusConfig?: ServerEventBusConfig
+  eventBusConfig?: ServerEventBusConfig & {
+    /**
+     * Should the server event bus be enabled or not
+     * @default true
+     */
+    enabled?: boolean // defaults to true
+  }
   /**
    * Configuration for enhanced logging.
    */
@@ -61,33 +68,33 @@ export type TanStackDevtoolsViteConfig = {
 export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
   config
 
-export const devtools = async (
-  args?: TanStackDevtoolsViteConfig,
-): Promise<Array<Plugin>> => {
+const emitOutdatedDeps = async () => {
+  return await new Promise<OutdatedDeps | null>((resolve) => {
+    exec('npm outdated --json', (_, stdout) => {
+      // npm outdated exits with code 1 if there are outdated packages, but still outputs valid JSON
+      if (stdout) {
+        const newOutdatedDeps = tryParseJson<OutdatedDeps>(stdout)
+        if (!newOutdatedDeps) {
+          return
+        }
+        devtoolsEventClient.emit('outdated-deps-read', {
+          outdatedDeps: newOutdatedDeps,
+        })
+        resolve(newOutdatedDeps)
+      }
+    })
+  })
+}
+
+export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   let port = 5173
   const logging = args?.logging ?? true
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
   const injectSourceConfig = args?.injectSource ?? { enabled: true }
   const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true
+  const serverBusEnabled = args?.eventBusConfig?.enabled ?? true
   const bus = new ServerEventBus(args?.eventBusConfig)
-  const packageJson = await readPackageJson()
-  let outdatedDeps: any = null
-  exec('npm outdated --json', (_, stdout) => {
-    // npm outdated exits with code 1 if there are outdated packages, but still outputs valid JSON
-    if (stdout) {
-      outdatedDeps = tryParseJson(stdout)
-      devtoolsEventClient.emit('ready', {
-        packageJson,
-        outdatedDeps,
-      })
-    }
-  })
-  devtoolsEventClient.on('mounted', () => {
-    devtoolsEventClient.emit('ready', {
-      packageJson,
-      outdatedDeps,
-    })
-  })
+
   return [
     {
       enforce: 'pre',
@@ -142,7 +149,9 @@ export const devtools = async (
         return config.mode === 'development'
       },
       configureServer(server) {
-        bus.start()
+        if (serverBusEnabled) {
+          bus.start()
+        }
 
         server.middlewares.use((req, _res, next) => {
           if (req.socket.localPort && req.socket.localPort !== port) {
@@ -208,12 +217,37 @@ export const devtools = async (
       },
     },
     {
-      name: '@tanstack/devtools:listener',
+      name: '@tanstack/devtools:event-client-setup',
+      apply(config, { command }) {
+        if (
+          process.env.CI ||
+          process.env.NODE_ENV !== 'development' ||
+          command !== 'serve'
+        )
+          return false
+        return config.mode === 'development'
+      },
+      async configureServer() {
+        const packageJson = await readPackageJson()
+        const outdatedDeps = emitOutdatedDeps().then((deps) => deps)
+
+        // whenever a client mounts we send all the current info to the subscribers
+        devtoolsEventClient.on('mounted', async () => {
+          devtoolsEventClient.emit('outdated-deps-read', {
+            outdatedDeps: await outdatedDeps,
+          })
+          devtoolsEventClient.emit('package-json-read', {
+            packageJson,
+          })
+        })
+      },
       async handleHotUpdate({ file }) {
         if (file.endsWith('package.json')) {
-          console.log(packageJson)
           const newPackageJson = await readPackageJson()
-          console.log(newPackageJson)
+          devtoolsEventClient.emit('package-json-read', {
+            packageJson: newPackageJson,
+          })
+          emitOutdatedDeps()
         }
       },
     },
diff --git a/packages/devtools-vite/src/utils.ts b/packages/devtools-vite/src/utils.ts
index 2a9239c6..bc11747c 100644
--- a/packages/devtools-vite/src/utils.ts
+++ b/packages/devtools-vite/src/utils.ts
@@ -1,7 +1,8 @@
-import { normalizePath } from 'vite'
 import fs from 'node:fs/promises'
+import { normalizePath } from 'vite'
 import type { Connect } from 'vite'
 import type { IncomingMessage, ServerResponse } from 'node:http'
+import type { PackageJson } from '@tanstack/devtools-client'
 
 export const handleDevToolsViteRequest = (
   req: Connect.IncomingMessage,
@@ -66,7 +67,7 @@ export const parseOpenSourceParam = (source: string) => {
   return { file, line, column }
 }
 
-export const tryReadFile = async (filePath: string) => {
+const tryReadFile = async (filePath: string) => {
   try {
     const data = await fs.readFile(filePath, 'utf-8')
     return data
@@ -75,17 +76,19 @@ export const tryReadFile = async (filePath: string) => {
   }
 }
 
-export const tryParseJson = (jsonString: string | null | undefined) => {
+export const tryParseJson = <T extends any>(
+  jsonString: string | null | undefined,
+) => {
   if (!jsonString) {
     return null
   }
   try {
     const result = JSON.parse(jsonString)
-    return result
+    return result as T
   } catch (error) {
     return null
   }
 }
 
 export const readPackageJson = async () =>
-  await tryParseJson(await tryReadFile(process.cwd() + '/package.json'))
+  tryParseJson<PackageJson>(await tryReadFile(process.cwd() + '/package.json'))
diff --git a/packages/devtools/src/components/trigger.tsx b/packages/devtools/src/components/trigger.tsx
index ec799b55..a2944e79 100644
--- a/packages/devtools/src/components/trigger.tsx
+++ b/packages/devtools/src/components/trigger.tsx
@@ -1,4 +1,4 @@
-import { createMemo } from 'solid-js'
+import { Show, createMemo } from 'solid-js'
 import clsx from 'clsx'
 import { useDevtoolsSettings } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
@@ -24,13 +24,15 @@ export const Trigger = ({
     )
   })
   return (
-    <button
-      type="button"
-      aria-label="Open TanStack Devtools"
-      class={buttonStyle()}
-      onClick={() => setIsOpen(!isOpen())}
-    >
-      <img src={image || TanStackLogo} alt="TanStack Devtools" />
-    </button>
+    <Show when={!settings().triggerHidden}>
+      <button
+        type="button"
+        aria-label="Open TanStack Devtools"
+        class={buttonStyle()}
+        onClick={() => setIsOpen(!isOpen())}
+      >
+        <img src={image || TanStackLogo} alt="TanStack Devtools" />
+      </button>
+    </Show>
   )
 }
diff --git a/packages/devtools/src/context/devtools-context.test.ts b/packages/devtools/src/context/devtools-context.test.ts
index 5ebb4520..1adff919 100644
--- a/packages/devtools/src/context/devtools-context.test.ts
+++ b/packages/devtools/src/context/devtools-context.test.ts
@@ -7,7 +7,7 @@ describe('getStateFromLocalStorage', () => {
     localStorage.clear()
   })
   it('should return undefined when no data in localStorage', () => {
-    const state = getStateFromLocalStorage()
+    const state = getStateFromLocalStorage(undefined)
     expect(state).toEqual(undefined)
   })
   it('should return parsed state from localStorage and not remove valid plugins', () => {
@@ -53,7 +53,7 @@ describe('getStateFromLocalStorage', () => {
   })
   it('should handle invalid JSON in localStorage gracefully', () => {
     localStorage.setItem(TANSTACK_DEVTOOLS_STATE, 'invalid json')
-    const state = getStateFromLocalStorage()
+    const state = getStateFromLocalStorage(undefined)
     expect(state).toEqual(undefined)
   })
 })
diff --git a/packages/devtools/src/context/devtools-context.tsx b/packages/devtools/src/context/devtools-context.tsx
index efb7ecb8..4b51ca47 100644
--- a/packages/devtools/src/context/devtools-context.tsx
+++ b/packages/devtools/src/context/devtools-context.tsx
@@ -39,11 +39,11 @@ export interface TanStackDevtoolsPlugin {
    * ```
    */
   name:
-    | string
-    | ((
-        el: HTMLHeadingElement,
-        theme: DevtoolsStore['settings']['theme'],
-      ) => void)
+  | string
+  | ((
+    el: HTMLHeadingElement,
+    theme: DevtoolsStore['settings']['theme'],
+  ) => void)
   /**
    * Unique identifier for the plugin.
    * If not provided, it will be generated based on the name.
@@ -100,13 +100,14 @@ const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {
 }
 
 export function getStateFromLocalStorage(
-  plugins?: Array<TanStackDevtoolsPlugin>,
+  plugins: Array<TanStackDevtoolsPlugin> | undefined,
 ) {
   const existingStateString = getStorageItem(TANSTACK_DEVTOOLS_STATE)
   const existingState =
     tryParseJson<DevtoolsStore['state']>(existingStateString)
   const pluginIds =
     plugins?.map((plugin, i) => generatePluginId(plugin, i)) || []
+
   if (existingState?.activePlugins) {
     const originalLength = existingState.activePlugins.length
     // Filter out any active plugins that are no longer available
@@ -127,7 +128,7 @@ const getExistingStateFromStorage = (
   config?: TanStackDevtoolsConfig,
   plugins?: Array<TanStackDevtoolsPlugin>,
 ) => {
-  const existingState = getStateFromLocalStorage()
+  const existingState = getStateFromLocalStorage(plugins)
   const settings = getSettings()
 
   const state: DevtoolsStore = {
diff --git a/packages/devtools/src/context/devtools-store.ts b/packages/devtools/src/context/devtools-store.ts
index 1555aa94..8ff46b39 100644
--- a/packages/devtools/src/context/devtools-store.ts
+++ b/packages/devtools/src/context/devtools-store.ts
@@ -66,6 +66,10 @@ export type DevtoolsStore = {
      * @default TanStackLogo
      */
     triggerImage: string
+    /**
+     * Whether the trigger should be completely hidden or not (you can still open with the hotkey)
+     */
+    triggerHidden?: boolean
   }
   state: {
     activeTab: TabName
@@ -92,6 +96,7 @@ export const initialState: DevtoolsStore = {
         ? 'dark'
         : 'light',
     triggerImage: '',
+    triggerHidden: false,
   },
   state: {
     activeTab: 'plugins',
diff --git a/packages/devtools/src/tabs/settings-tab.tsx b/packages/devtools/src/tabs/settings-tab.tsx
index 0a906fad..b4ac5fd3 100644
--- a/packages/devtools/src/tabs/settings-tab.tsx
+++ b/packages/devtools/src/tabs/settings-tab.tsx
@@ -71,6 +71,14 @@ export const SettingsTab = () => {
             }
             checked={settings().hideUntilHover}
           />
+          <Checkbox
+            label="Completely hide trigger"
+            description="Completely removes the trigger from the DOM (you can still open it with the hotkey)"
+            onChange={() =>
+              setSettings({ triggerHidden: !settings().triggerHidden })
+            }
+            checked={settings().triggerHidden}
+          />
           <Input
             label="Trigger Image"
             description="Specify the URL of the image to use for the trigger"
diff --git a/packages/event-bus-client/src/plugin.ts b/packages/event-bus-client/src/plugin.ts
index eae03a04..75f871c1 100644
--- a/packages/event-bus-client/src/plugin.ts
+++ b/packages/event-bus-client/src/plugin.ts
@@ -19,6 +19,7 @@ export class EventClient<
       : never
     : never,
 > {
+  #enabled = true
   #pluginId: TPluginId
   #eventTarget: () => EventTarget
   #debug: boolean
@@ -62,11 +63,15 @@ export class EventClient<
   constructor({
     pluginId,
     debug = false,
+    enabled = true,
   }: {
     pluginId: TPluginId
     debug?: boolean
+
+    enabled?: boolean
   }) {
     this.#pluginId = pluginId
+    this.#enabled = enabled
     this.#eventTarget = this.getGlobalTarget
     this.#debug = debug
     this.debugLog(' Initializing event subscription for plugin', this.#pluginId)
@@ -180,6 +185,14 @@ export class EventClient<
     eventSuffix: TSuffix,
     payload: TEventMap[`${TPluginId & string}:${TSuffix}`],
   ) {
+    if (!this.#enabled) {
+      this.debugLog(
+        'Event bus client is disabled, not emitting event',
+        eventSuffix,
+        payload,
+      )
+      return
+    }
     // wait to connect to the bus
     if (!this.#connected) {
       this.debugLog('Bus not available, will be pushed as soon as connected')
@@ -220,6 +233,13 @@ export class EventClient<
     ) => void,
   ) {
     const eventName = `${this.#pluginId}:${eventSuffix}` as const
+    if (!this.#enabled) {
+      this.debugLog(
+        'Event bus client is disabled, not registering event',
+        eventName,
+      )
+      return () => {}
+    }
     const handler = (e: Event) => {
       this.debugLog('Received event from bus', (e as CustomEvent).detail)
       cb((e as CustomEvent).detail)
@@ -232,6 +252,11 @@ export class EventClient<
   }
 
   onAll(cb: (event: TanStackDevtoolsEvent<string, any>) => void) {
+    if (!this.#enabled) {
+      this.debugLog('Event bus client is disabled, not registering event')
+      return () => {}
+    }
+
     const handler = (e: Event) => {
       const event = (e as CustomEvent).detail
 
@@ -245,6 +270,10 @@ export class EventClient<
       )
   }
   onAllPluginEvents(cb: (event: AllDevtoolsEvents<TEventMap>) => void) {
+    if (!this.#enabled) {
+      this.debugLog('Event bus client is disabled, not registering event')
+      return () => {}
+    }
     const handler = (e: Event) => {
       const event = (e as CustomEvent).detail
       if (this.#pluginId && event.pluginId !== this.#pluginId) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cff4dad7..bc568e0e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,6 +75,8 @@ importers:
         specifier: ^3.2.4
         version: 3.2.4(@types/node@22.15.2)(happy-dom@18.0.1)(jiti@2.5.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.1)(sass@1.90.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
 
+  examples/angular/ssr: {}
+
   examples/react/basic:
     dependencies:
       '@tanstack/devtools-client':
@@ -513,16 +515,6 @@ importers:
       '@tanstack/devtools-event-client':
         specifier: workspace:^
         version: link:../event-bus-client
-    devDependencies:
-      tsup:
-        specifier: ^8.5.0
-        version: 8.5.0(@microsoft/api-extractor@7.47.7(@types/node@22.15.2))(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.0)
-      tsup-preset-solid:
-        specifier: ^2.2.0
-        version: 2.2.0(esbuild@0.25.9)(solid-js@1.9.9)(tsup@8.5.0(@microsoft/api-extractor@7.47.7(@types/node@22.15.2))(jiti@2.5.1)(postcss@8.5.6)(tsx@4.20.3)(typescript@5.9.2)(yaml@2.8.0))
-      vite-plugin-solid:
-        specifier: ^2.11.8
-        version: 2.11.8(@testing-library/jest-dom@6.8.0)(solid-js@1.9.9)(vite@7.1.7(@types/node@22.15.2)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.90.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))
 
   packages/devtools-ui:
     dependencies:
@@ -588,9 +580,6 @@ importers:
       '@tanstack/devtools-event-bus':
         specifier: workspace:*
         version: link:../event-bus
-      '@tanstack/devtools-event-client':
-        specifier: workspace:*
-        version: link:../event-bus-client
       chalk:
         specifier: ^5.6.2
         version: 5.6.2

From e76c6c2b7c0eca01e262fdcb32c265051a9d1c3c Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 10 Oct 2025 10:34:26 +0000
Subject: [PATCH 7/7] ci: apply automated fixes

---
 .changeset/curly-bikes-play.md                |  4 +-
 examples/angular/ssr/package.json             |  2 +-
 .../react/basic/src/package-json-panel.tsx    | 50 +++++++++++--------
 package.json                                  |  2 +-
 packages/devtools-client/package.json         |  2 +-
 packages/devtools-vite/package.json           |  2 +-
 .../devtools/src/context/devtools-context.tsx | 10 ++--
 7 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/.changeset/curly-bikes-play.md b/.changeset/curly-bikes-play.md
index 2a0b064c..fa0a684f 100644
--- a/.changeset/curly-bikes-play.md
+++ b/.changeset/curly-bikes-play.md
@@ -5,9 +5,9 @@
 '@tanstack/devtools': patch
 ---
 
-
 Number of improvements to various parts of the DevTools:
+
 - Update event client to allow users to disable it
 - Allow trigger to be completely hidden
 - Add a new package `@tanstack/devtools-client` to allow users to listen to events we emit from Vite.
-- Fix bugs inside of the DevTools like plugins being nuked on page refresh.
\ No newline at end of file
+- Fix bugs inside of the DevTools like plugins being nuked on page refresh.
diff --git a/examples/angular/ssr/package.json b/examples/angular/ssr/package.json
index bd16199b..9d0250c7 100644
--- a/examples/angular/ssr/package.json
+++ b/examples/angular/ssr/package.json
@@ -2,4 +2,4 @@
   "name": "ssr",
   "version": "0.0.0",
   "private": true
-}
\ No newline at end of file
+}
diff --git a/examples/react/basic/src/package-json-panel.tsx b/examples/react/basic/src/package-json-panel.tsx
index 6963431b..c5d26b4f 100644
--- a/examples/react/basic/src/package-json-panel.tsx
+++ b/examples/react/basic/src/package-json-panel.tsx
@@ -18,13 +18,19 @@ export const PackageJsonPanel = () => {
 
   useEffect(() => {
     devtoolsEventClient.emit('mounted', undefined as any)
-    const cleanupOutdated = devtoolsEventClient.on("outdated-deps-read", (event) => {
-      setOutdatedDeps(event.payload.outdatedDeps || {})
-    })
-    const cleanupPackageJson = devtoolsEventClient.on("package-json-read", (event) => {
-      console.log('package-json-read', event)
-      setPackageJson(event.payload.packageJson)
-    })
+    const cleanupOutdated = devtoolsEventClient.on(
+      'outdated-deps-read',
+      (event) => {
+        setOutdatedDeps(event.payload.outdatedDeps || {})
+      },
+    )
+    const cleanupPackageJson = devtoolsEventClient.on(
+      'package-json-read',
+      (event) => {
+        console.log('package-json-read', event)
+        setPackageJson(event.payload.packageJson)
+      },
+    )
     return () => {
       cleanupOutdated()
       cleanupPackageJson()
@@ -126,11 +132,11 @@ export const PackageJsonPanel = () => {
   }) => {
     const info = outdatedDeps[dep] as
       | {
-        current: string
-        wanted: string
-        latest: string
-        type?: 'dependencies' | 'devDependencies'
-      }
+          current: string
+          wanted: string
+          latest: string
+          type?: 'dependencies' | 'devDependencies'
+        }
       | undefined
     const current = info?.current ?? specified
     const latest = info?.latest
@@ -153,11 +159,11 @@ export const PackageJsonPanel = () => {
   const UpgradeRowActions = ({ name }: { name: string }) => {
     const info = outdatedDeps[name] as
       | {
-        current: string
-        wanted: string
-        latest: string
-        type?: 'dependencies' | 'devDependencies'
-      }
+          current: string
+          wanted: string
+          latest: string
+          type?: 'dependencies' | 'devDependencies'
+        }
       | undefined
     if (!info) return null
     return (
@@ -248,11 +254,11 @@ export const PackageJsonPanel = () => {
             {Object.entries(deps || {}).map(([dep, version]) => {
               const info = outdatedDeps[dep] as
                 | {
-                  current: string
-                  wanted: string
-                  latest: string
-                  type?: 'dependencies' | 'devDependencies'
-                }
+                    current: string
+                    wanted: string
+                    latest: string
+                    type?: 'dependencies' | 'devDependencies'
+                  }
                 | undefined
               const isOutdated = !!info && info.current !== info.latest
               return (
diff --git a/package.json b/package.json
index ecc5b285..4d39c4a9 100644
--- a/package.json
+++ b/package.json
@@ -85,4 +85,4 @@
     "@tanstack/solid-devtools": "workspace:*",
     "@tanstack/devtools-vite": "workspace:*"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/devtools-client/package.json b/packages/devtools-client/package.json
index bbc4f13e..c4df57fd 100644
--- a/packages/devtools-client/package.json
+++ b/packages/devtools-client/package.json
@@ -48,4 +48,4 @@
     "test:build": "publint --strict",
     "build": "vite build"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/devtools-vite/package.json b/packages/devtools-vite/package.json
index 4c8b36e1..22d87c32 100644
--- a/packages/devtools-vite/package.json
+++ b/packages/devtools-vite/package.json
@@ -67,4 +67,4 @@
     "@types/babel__traverse": "^7.28.0",
     "happy-dom": "^18.0.1"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/devtools/src/context/devtools-context.tsx b/packages/devtools/src/context/devtools-context.tsx
index 4b51ca47..4bc6cd19 100644
--- a/packages/devtools/src/context/devtools-context.tsx
+++ b/packages/devtools/src/context/devtools-context.tsx
@@ -39,11 +39,11 @@ export interface TanStackDevtoolsPlugin {
    * ```
    */
   name:
-  | string
-  | ((
-    el: HTMLHeadingElement,
-    theme: DevtoolsStore['settings']['theme'],
-  ) => void)
+    | string
+    | ((
+        el: HTMLHeadingElement,
+        theme: DevtoolsStore['settings']['theme'],
+      ) => void)
   /**
    * Unique identifier for the plugin.
    * If not provided, it will be generated based on the name.