feat(devtools): extract theme to devtool components (TanStack#366)

* feat(devtools): extract theme to devtool components

* chore: bump  versions

Author: harry-whorlow

.changeset/moody-wings-type.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/ai-devtools-core': patch
+---
+
+Moves devtools theme to the component to avoid theme miss-match.

packages/typescript/ai-devtools/package.json

@@ -80,8 +80,8 @@
   "dependencies": {
     "@tanstack/ai": "workspace:*",
     "@tanstack/ai-event-client": "workspace:*",
-    "@tanstack/devtools-ui": "^0.5.0",
-    "@tanstack/devtools-utils": "0.3.2",
+    "@tanstack/devtools-ui": "^0.5.1",
+    "@tanstack/devtools-utils": "^0.4.0",
     "goober": "^2.1.18",
     "solid-js": "^1.9.10"
   },

packages/typescript/ai-devtools/src/components/Shell.tsx

@@ -1,15 +1,28 @@
 import { createSignal, onCleanup, onMount } from 'solid-js'
-import { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'
+import {
+  Header,
+  HeaderLogo,
+  MainPanel,
+  ThemeContextProvider,
+} from '@tanstack/devtools-ui'
 import { useStyles } from '../styles/use-styles'
 import { AIProvider } from '../store/ai-context'
 import { ConversationsList } from './ConversationsList'
 import { ConversationDetails } from './ConversationDetails'
 
-export default function Devtools() {
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
+
+interface DevtoolProps {
+  theme: TanStackDevtoolsTheme
+}
+
+export default function Devtools(props: DevtoolProps) {
   return (
-    <AIProvider>
-      <DevtoolsContent />
-    </AIProvider>
+    <ThemeContextProvider theme={props.theme}>
+      <AIProvider>
+        <DevtoolsContent />
+      </AIProvider>
+    </ThemeContextProvider>
   )
 }
 

packages/typescript/preact-ai-devtools/package.json

@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@tanstack/ai-devtools-core": "workspace:*",
-    "@tanstack/devtools-utils": "0.3.2"
+    "@tanstack/devtools-utils": "^0.4.0"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "4.0.14",

packages/typescript/react-ai-devtools/package.json

@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@tanstack/ai-devtools-core": "workspace:*",
-    "@tanstack/devtools-utils": "0.3.2"
+    "@tanstack/devtools-utils": "^0.4.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",

packages/typescript/solid-ai-devtools/package.json

@@ -48,7 +48,7 @@
   ],
   "dependencies": {
     "@tanstack/ai-devtools-core": "workspace:*",
-    "@tanstack/devtools-utils": "0.3.2"
+    "@tanstack/devtools-utils": "^0.4.0"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"