Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
harry-whorlow wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/moody-wings-type.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@tanstack/ai-devtools-core': patch
---

Moves devtools theme to the component to avoid theme miss-match.
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix typo: "miss-match" should be "mismatch".

The word should be "mismatch" (one word, no hyphen).

📝 Proposed fix 
-Moves devtools theme to the component to avoid theme miss-match.
+Moves devtools theme to the component to avoid theme mismatch.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Moves devtools theme to the component to avoid theme miss-match.
Moves devtools theme to the component to avoid theme mismatch.
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.changeset/moody-wings-type.md at line 5, Replace the typo "miss-match" with
the correct single-word "mismatch" in the changeset text (search for the string
"miss-match" in .changeset/moody-wings-type.md and update it to "mismatch") so
the sentence reads "Moves devtools theme to the component to avoid theme
mismatch."

19 changes: 14 additions & 5 deletions packages/typescript/ai-devtools/src/components/Shell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
import { createSignal, onCleanup, onMount } from 'solid-js'
import {
createSignal,
onCleanup,
onMount,
ThemeContextProvider,
} from 'solid-js'
Comment on lines +1 to +6
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix import member ordering to clear lint failure.

ThemeContextProvider placement in the named import list violates sort-imports and will keep lint red.

Proposed fix 
 import {
+  ThemeContextProvider,
   createSignal,
   onCleanup,
   onMount,
-  ThemeContextProvider,
 } from 'solid-js'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import {
createSignal,
onCleanup,
onMount,
ThemeContextProvider,
} from 'solid-js'
import {
ThemeContextProvider,
createSignal,
onCleanup,
onMount,
} from 'solid-js'
🧰 Tools
🪛 ESLint

[error] 5-5: Member 'ThemeContextProvider' of the import declaration should be sorted alphabetically.

(sort-imports)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/typescript/ai-devtools/src/components/Shell.tsx` around lines 1 - 6,
The named imports from 'solid-js' are not in the order required by the
sort-imports rule; reorder the import specifiers so they are alphabetically
sorted (adjust the placement of ThemeContextProvider among createSignal,
onCleanup and onMount) so the import list in Shell.tsx satisfies the linter.

import { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'
Comment on lines +5 to 7
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Locate all uses/imports of ThemeContextProvider
rg -n -C3 '\bThemeContextProvider\b' packages

# Locate exports/definitions to confirm owning module
rg -n -C3 'export .*ThemeContextProvider|const ThemeContextProvider|function ThemeContextProvider' packages

Repository: TanStack/ai

Length of output: 1548

🏁 Script executed:

# Check what's exported from `@tanstack/devtools-ui` package
rg -n 'export.*ThemeContextProvider|export.*from.*theme' packages/typescript/ai-devtools -A2 -B2

# Check the actual devtools-ui index or main export files
fd -e ts -e tsx -e js packages/typescript/ai-devtools/node_modules/@tanstack/devtools-ui 2>/dev/null | head -20

# Try to find the devtools-ui package.json or exports
find packages -name 'package.json' -path '*devtools-ui*' 2>/dev/null

Repository: TanStack/ai

Length of output: 37

🌐 Web query:

solid-js ThemeContextProvider export

💡 Result:

solid-js does not export a built-in ThemeContextProvider. In Solid, you create a context with createContext(), and the returned context object contains a .Provider component you use in your own exported provider. (docs.solidjs.com)

// theme-context.ts
import { createContext, useContext, type ParentComponent } from "solid-js";

type ThemeCtx = { theme: () => "light" | "dark"; setTheme: (t: "light" | "dark") => void };
const ThemeContext = createContext<ThemeCtx>();

export const ThemeProvider: ParentComponent<{ value: ThemeCtx }> = (props) => (
  <ThemeContext.Provider value={props.value}>
    {props.children}
  </ThemeContext.Provider>
);

export const useTheme = () => useContext(ThemeContext);

If what you want is a ready-made “export both provider + hook” helper, @solid-primitives/context provides createContextProvider(), which returns a Provider component plus a useContext helper you can export. (primitives.solidjs.community)

Citations:

Remove ThemeContextProvider from solid-js import—it does not exist in that package.

solid-js only exports createContext() for creating provider components, not a ready-made ThemeContextProvider. This import will fail at build time. The component needs to be either imported from its actual source (likely a local file or @solid-primitives/context) or defined locally using createContext().

🧰 Tools
🪛 ESLint

[error] 5-5: Member 'ThemeContextProvider' of the import declaration should be sorted alphabetically.

(sort-imports)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/typescript/ai-devtools/src/components/Shell.tsx` around lines 5 - 7,
The import of ThemeContextProvider from 'solid-js' is invalid; remove
ThemeContextProvider from the solid-js import list and either import the actual
provider from its correct package (e.g., the real source or a package like
`@solid-primitives/context`) or create a local provider using createContext() and
export a ThemeContextProvider wrapper used by the Shell component; update any
usage of ThemeContextProvider in this file to the newly imported/defined
provider so the build no longer fails.

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 { DevtoolProps } from '@tanstack/devtools-utils/solid'

export default function Devtools(props: DevtoolProps) {
return (
<AIProvider>
<DevtoolsContent />
</AIProvider>
<ThemeContextProvider theme={props.theme}>
<AIProvider>
<DevtoolsContent />
</AIProvider>
</ThemeContextProvider>
)
}

Expand Down
Loading