feat(dashboard): integrate ThemeProvider and ThemePicker into App

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

understand-anything-plugin/packages/dashboard/src/App.tsx

@@ -15,6 +15,9 @@ import KeyboardShortcutsHelp from "./components/KeyboardShortcutsHelp";
 import WarningBanner from "./components/WarningBanner";
 import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
 import type { KeyboardShortcut } from "./hooks/useKeyboardShortcuts";
+import { ThemeProvider } from "./themes/index.ts";
+import { ThemePicker } from "./components/ThemePicker.tsx";
+import type { ThemeConfig } from "./themes/index.ts";
 
 function App() {
   const graph = useDashboardStore((s) => s.graph);
@@ -28,6 +31,16 @@ function App() {
   const [loadError, setLoadError] = useState<string | null>(null);
   const [graphIssues, setGraphIssues] = useState<GraphIssue[]>([]);
   const [showKeyboardHelp, setShowKeyboardHelp] = useState(false);
+  const [metaTheme, setMetaTheme] = useState<ThemeConfig | null>(null);
+
+  useEffect(() => {
+    fetch("/meta.json")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((meta) => {
+        if (meta?.theme) setMetaTheme(meta.theme);
+      })
+      .catch(() => {});
+  }, []);
 
   // Define keyboard shortcuts
   const shortcuts = useMemo<KeyboardShortcut[]>(
@@ -185,6 +198,7 @@ function App() {
   );
 
   return (
+    <ThemeProvider metaTheme={metaTheme}>
     <div className="h-screen w-screen flex flex-col bg-root text-text-primary noise-overlay">
       {/* Header */}
       <header className="flex items-center justify-between px-5 py-3 bg-surface border-b border-border-subtle shrink-0">
@@ -198,6 +212,7 @@ function App() {
         <div className="flex items-center gap-4">
           <DiffToggle />
           <LayerLegend />
+          <ThemePicker />
           <button
             onClick={() => setShowKeyboardHelp(true)}
             className="text-text-muted hover:text-accent transition-colors"
@@ -278,6 +293,7 @@ function App() {
         />
       )}
     </div>
+    </ThemeProvider>
   );
 }
 

understand-anything-plugin/packages/dashboard/src/themes/ThemeContext.tsx

@@ -75,7 +75,7 @@ export function ThemeProvider({ metaTheme, children }: ThemeProviderProps) {
   }, [metaTheme]);
 
   const setPreset = useCallback((presetId: PresetId) => {
-    setConfig((prev) => {
+    setConfig((_prev) => {
       const newPreset = getPreset(presetId);
       return { presetId, accentId: newPreset.defaultAccentId };
     });