Clean up legacy instance shell and theme additions

package-lock.json

@@ -1296,6 +1296,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-darwin-x64": {
       "version": "4.52.5",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.5.tgz",
@@ -1531,6 +1541,109 @@
         "solid-js": "^1.8.6"
       }
     },
+    "node_modules/@suid/base": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@suid/base/-/base-0.11.0.tgz",
+      "integrity": "sha512-jNe+LlXuxfkSZo8/MP9koqYYWswucDWSCwc7ViqUhQ0Y/V7sP2RiQ/Bnms+ePSMBZsk5k1b9fAjvj7DtNbbHXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "@suid/css": "0.4.1",
+        "@suid/system": "0.14.0",
+        "@suid/types": "0.8.0",
+        "@suid/utils": "0.11.0",
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/css": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@suid/css/-/css-0.4.1.tgz",
+      "integrity": "sha512-Hsi4O3dBOm7rrlqKoWfNoTeRFAXm/7TPaeEmyxNx+wFaT3eROjMVdhadAIiagFT+PsHrq/6fDauUI5TkL+5Zvg==",
+      "license": "MIT"
+    },
+    "node_modules/@suid/icons-material": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@suid/icons-material/-/icons-material-0.9.0.tgz",
+      "integrity": "sha512-2idgaT/JARd12dwDfocZBQizaiZVgR0ujRsVc61OlAuPZbeH+3TrSxUJkE3Z7+TPftw9+6p0A24GhJjJLvi6RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@suid/material": "0.19.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/material": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@suid/material/-/material-0.19.0.tgz",
+      "integrity": "sha512-vfudxYpHdur5CWTjd3eBb7q1b6A9X/pDWTEf2twc0gXVTcErS9VtY/VPBLa65AzO2SPJsdjAE+BCdVZiXASBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@suid/base": "0.11.0",
+        "@suid/css": "0.4.1",
+        "@suid/system": "0.14.0",
+        "@suid/types": "0.8.0",
+        "@suid/utils": "0.11.0",
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/styled-engine": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@suid/styled-engine/-/styled-engine-0.9.0.tgz",
+      "integrity": "sha512-IfNHjQ3Im63mFIjFl/doiwdn5qbwgcwi/vUXnX7dmIUC/Cw1f3LPhzVT9V8Z3eqyvvFToy53O+BsuLy2e/WmDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@suid/css": "0.4.1",
+        "@suid/utils": "0.11.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/system": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@suid/system/-/system-0.14.0.tgz",
+      "integrity": "sha512-aRVilPP53hHkqyAyQp2pasT/u8aQCcELwU4kFDnt3b+rj4fsPQRlhMumlX5mZ5aijIboH1CngU6TDG6Z9Mr3UA==",
+      "license": "MIT",
+      "dependencies": {
+        "@suid/css": "0.4.1",
+        "@suid/styled-engine": "0.9.0",
+        "@suid/types": "0.8.0",
+        "@suid/utils": "0.11.0",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/types": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@suid/types/-/types-0.8.0.tgz",
+      "integrity": "sha512-/Z2abkbypMjF6ygSpnjqnWohcmPqvgw8Xpx1wPPHeh+LajBP2imNT6uEa5dBqNEkJY8O3wEUCVqErAad/rmn5Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
+    "node_modules/@suid/utils": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@suid/utils/-/utils-0.11.0.tgz",
+      "integrity": "sha512-dk+6YJkex9kcU2qQHCOk8J0/zkOKKbng0SsjC0LBLyBrf2OC3OtDQq7o22pH3m/8CU/0M6uyM7tnyzZA4eWF3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@suid/types": "0.8.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.7"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.17",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
@@ -3102,6 +3215,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -8895,6 +9017,9 @@
         "@kobalte/core": "0.13.11",
         "@opencode-ai/sdk": "^1.0.138",
         "@solidjs/router": "^0.13.0",
+        "@suid/icons-material": "^0.9.0",
+        "@suid/material": "^0.19.0",
+        "@suid/system": "^0.14.0",
         "debug": "^4.4.3",
         "github-markdown-css": "^5.8.1",
         "lucide-solid": "^0.300.0",

packages/ui/package.json

@@ -14,6 +14,9 @@
     "@kobalte/core": "0.13.11",
     "@opencode-ai/sdk": "^1.0.138",
     "@solidjs/router": "^0.13.0",
+    "@suid/icons-material": "^0.9.0",
+    "@suid/material": "^0.19.0",
+    "@suid/system": "^0.14.0",
     "debug": "^4.4.3",
     "github-markdown-css": "^5.8.1",
     "lucide-solid": "^0.300.0",

packages/ui/src/components/instance/instance-shell.tsx

@@ -1,356 +0,0 @@
-import { For, Show, createEffect, createMemo, createSignal, onCleanup, onMount, type Component } from "solid-js"
-import type { Accessor } from "solid-js"
-import type { Instance } from "../../types/instance"
-import type { Command } from "../../lib/commands"
-import { activeParentSessionId, activeSessionId as activeSessionMap, getSessionFamily, setActiveSession } from "../../stores/sessions"
-import { keyboardRegistry, type KeyboardShortcut } from "../../lib/keyboard-registry"
-import { messageStoreBus } from "../../stores/message-v2/bus"
-import { clearSessionRenderCache } from "../message-block"
-import { buildCustomCommandEntries } from "../../lib/command-utils"
-import { getCommands as getInstanceCommands } from "../../stores/commands"
-import { isOpen as isCommandPaletteOpen, hideCommandPalette } from "../../stores/command-palette"
-import SessionList from "../session-list"
-import KeyboardHint from "../keyboard-hint"
-import InstanceWelcomeView from "../instance-welcome-view"
-import InfoView from "../info-view"
-import AgentSelector from "../agent-selector"
-import ModelSelector from "../model-selector"
-import CommandPalette from "../command-palette"
-import Kbd from "../kbd"
-import ContextUsagePanel from "../session/context-usage-panel"
-import SessionView from "../session/session-view"
-import { getLogger } from "../../lib/logger"
-const log = getLogger("session")
-
-
-interface InstanceShellProps {
-  instance: Instance
-  escapeInDebounce: boolean
-  paletteCommands: Accessor<Command[]>
-  onCloseSession: (sessionId: string) => Promise<void> | void
-  onNewSession: () => Promise<void> | void
-  handleSidebarAgentChange: (sessionId: string, agent: string) => Promise<void>
-  handleSidebarModelChange: (sessionId: string, model: { providerId: string; modelId: string }) => Promise<void>
-  onExecuteCommand: (command: Command) => void
-}
-
-const DEFAULT_SESSION_SIDEBAR_WIDTH = 350
-const MOBILE_SIDEBAR_BREAKPOINT = 1024
-const SESSION_CACHE_LIMIT = 2
-
-const InstanceShell: Component<InstanceShellProps> = (props) => {
-  const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
-  const [isCompactLayout, setIsCompactLayout] = createSignal(false)
-  const [isSidebarOpen, setIsSidebarOpen] = createSignal(true)
-  const [cachedSessionIds, setCachedSessionIds] = createSignal<string[]>([])
-  const [pendingEvictions, setPendingEvictions] = createSignal<string[]>([])
-  const sidebarId = `session-sidebar-${props.instance.id}`
-  let previousIsCompact = false
-
-  const shouldShowSidebarToggle = () => isCompactLayout() && !isSidebarOpen()
-
-  onMount(() => {
-    if (typeof window === "undefined") return
-
-    const handleResize = () => {
-      const compact = window.innerWidth < MOBILE_SIDEBAR_BREAKPOINT
-      setIsCompactLayout(compact)
-      if (!compact) {
-        setIsSidebarOpen(true)
-      } else if (!previousIsCompact && compact) {
-        setIsSidebarOpen(false)
-      }
-      previousIsCompact = compact
-    }
-
-    handleResize()
-    window.addEventListener("resize", handleResize)
-
-    onCleanup(() => {
-      window.removeEventListener("resize", handleResize)
-    })
-  })
-
-  const activeSessions = createMemo(() => {
-    const parentId = activeParentSessionId().get(props.instance.id)
-    if (!parentId) return new Map<string, ReturnType<typeof getSessionFamily>[number]>()
-    const sessionFamily = getSessionFamily(props.instance.id, parentId)
-    return new Map(sessionFamily.map((s) => [s.id, s]))
-  })
-
-  const activeSessionIdForInstance = createMemo(() => {
-    return activeSessionMap().get(props.instance.id) || null
-  })
-
-  const parentSessionIdForInstance = createMemo(() => {
-    return activeParentSessionId().get(props.instance.id) || null
-  })
- 
-  const activeSessionForInstance = createMemo(() => {
-    const sessionId = activeSessionIdForInstance()
-    if (!sessionId || sessionId === "info") return null
-    return activeSessions().get(sessionId) ?? null
-  })
-
-
-  const customCommands = createMemo(() => buildCustomCommandEntries(props.instance.id, getInstanceCommands(props.instance.id)))
-  const instancePaletteCommands = createMemo(() => [...props.paletteCommands(), ...customCommands()])
-  const paletteOpen = createMemo(() => isCommandPaletteOpen(props.instance.id))
-
-  const keyboardShortcuts = createMemo(() =>
-    [keyboardRegistry.get("session-prev"), keyboardRegistry.get("session-next")].filter(
-      (shortcut): shortcut is KeyboardShortcut => Boolean(shortcut),
-    ),
-  )
-
-  const handleSessionSelect = (sessionId: string) => {
-    setActiveSession(props.instance.id, sessionId)
-  }
-
-  const evictSession = (sessionId: string) => {
-    if (!sessionId) return
-    log.info("Evicting cached session", { instanceId: props.instance.id, sessionId })
-    const store = messageStoreBus.getInstance(props.instance.id)
-    store?.clearSession(sessionId)
-    clearSessionRenderCache(props.instance.id, sessionId)
-  }
-
-  const scheduleEvictions = (ids: string[]) => {
-    if (!ids.length) return
-    setPendingEvictions((current) => {
-      const existing = new Set(current)
-      const next = [...current]
-      ids.forEach((id) => {
-        if (!existing.has(id)) {
-          next.push(id)
-          existing.add(id)
-        }
-      })
-      return next
-    })
-  }
-
-  createEffect(() => {
-    const pending = pendingEvictions()
-    if (!pending.length) return
-    const cached = new Set(cachedSessionIds())
-    const remaining: string[] = []
-    pending.forEach((id) => {
-      if (cached.has(id)) {
-        remaining.push(id)
-      } else {
-        evictSession(id)
-      }
-    })
-    if (remaining.length !== pending.length) {
-      setPendingEvictions(remaining)
-    }
-  })
-
-  createEffect(() => {
-    const sessionsMap = activeSessions()
-    const parentId = parentSessionIdForInstance()
-    const activeId = activeSessionIdForInstance()
-    setCachedSessionIds((current) => {
-      const next: string[] = []
-      const append = (id: string | null) => {
-        if (!id || id === "info") return
-        if (!sessionsMap.has(id)) return
-        if (next.includes(id)) return
-        next.push(id)
-      }
-
-      append(parentId)
-      append(activeId)
-      current.forEach((id) => append(id))
-
-      const limit = parentId ? SESSION_CACHE_LIMIT + 1 : SESSION_CACHE_LIMIT
-      const trimmed = next.length > limit ? next.slice(0, limit) : next
-      const trimmedSet = new Set(trimmed)
-      const removed = current.filter((id) => !trimmedSet.has(id))
-      if (removed.length) {
-        scheduleEvictions(removed)
-      }
-      return trimmed
-    })
-  })
-
-  return (
-    <>
-      <Show when={activeSessions().size > 0} fallback={<InstanceWelcomeView instance={props.instance} />}>
-        <div
-          class="flex flex-1 min-h-0 relative"
-          classList={{ "session-layout-compact": isCompactLayout() }}
-        >
-          <div
-            id={sidebarId}
-            class="session-sidebar flex flex-col bg-surface-secondary"
-            classList={{
-              "session-sidebar-overlay": isCompactLayout(),
-              "session-sidebar-collapsed": isCompactLayout() && !isSidebarOpen(),
-            }}
-            style={!isCompactLayout() ? { width: `${sessionSidebarWidth()}px` } : undefined}
-            aria-hidden={isCompactLayout() && !isSidebarOpen()}
-          >
-            <SessionList
-              instanceId={props.instance.id}
-              sessions={activeSessions()}
-              activeSessionId={activeSessionIdForInstance()}
-              onSelect={handleSessionSelect}
-              onClose={(id) => {
-                const result = props.onCloseSession(id)
-                if (result instanceof Promise) {
-                  void result.catch((error) => log.error("Failed to close session:", error))
-                }
-              }}
-              onNew={() => {
-                const result = props.onNewSession()
-                if (result instanceof Promise) {
-                  void result.catch((error) => log.error("Failed to create session:", error))
-                }
-              }}
-              showHeader
-              showFooter={false}
-              headerContent={
-                <div class="session-sidebar-header">
-                  <div class="session-sidebar-header-row">
-                    <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">Sessions</span>
-                    <Show when={isCompactLayout()}>
-                      <button
-                        type="button"
-                        class="session-sidebar-close"
-                        onClick={() => setIsSidebarOpen(false)}
-                        aria-label="Close session sidebar"
-                      >
-                        Close
-                      </button>
-                    </Show>
-                  </div>
-                  <div class="session-sidebar-shortcuts">
-                    {keyboardShortcuts().length ? (
-                      <KeyboardHint shortcuts={keyboardShortcuts()} separator=" " showDescription={false} />
-                    ) : null}
-                  </div>
-                </div>
-              }
-              onWidthChange={setSessionSidebarWidth}
-            />
-
-            <div class="session-sidebar-separator border-t border-base" />
-            <Show when={activeSessionForInstance()}>
-              {(activeSession) => (
-                <>
-                  <ContextUsagePanel instanceId={props.instance.id} sessionId={activeSession().id} />
-                  <div class="session-sidebar-controls px-3 py-3 border-r border-base flex flex-col gap-3">
-                    <AgentSelector
-                      instanceId={props.instance.id}
-                      sessionId={activeSession().id}
-                      currentAgent={activeSession().agent}
-                      onAgentChange={(agent) => props.handleSidebarAgentChange(activeSession().id, agent)}
-                    />
-
-                    <div class="sidebar-selector-hints" aria-hidden="true">
-                      <span class="hint sidebar-selector-hint sidebar-selector-hint--left">
-                        <Kbd shortcut="cmd+shift+a" />
-                      </span>
-                      <span class="hint sidebar-selector-hint sidebar-selector-hint--right">
-                        <Kbd shortcut="cmd+shift+m" />
-                      </span>
-                    </div>
-
-                    <ModelSelector
-                      instanceId={props.instance.id}
-                      sessionId={activeSession().id}
-                      currentModel={activeSession().model}
-                      onModelChange={(model) => props.handleSidebarModelChange(activeSession().id, model)}
-                    />
-
-                  </div>
-                </>
-              )}
-            </Show>
-          </div>
-
-          <div class="content-area flex-1 min-h-0 overflow-hidden flex flex-col">
-            <Show
-              when={shouldShowSidebarToggle() && (!activeSessionIdForInstance() || activeSessionIdForInstance() === "info")}
-            >
-              <button
-                type="button"
-                class="session-sidebar-menu-button session-sidebar-menu-button--floating"
-                onClick={() => setIsSidebarOpen(true)}
-                aria-controls={sidebarId}
-                aria-expanded={isSidebarOpen()}
-                aria-label="Open session list"
-              >
-                <span aria-hidden="true" class="session-sidebar-menu-icon">☰</span>
-              </button>
-            </Show>
-            <Show
-              when={activeSessionIdForInstance() === "info"}
-              fallback={
-                <Show
-                  when={cachedSessionIds().length > 0 && activeSessionIdForInstance()}
-                  fallback={
-                    <div class="flex items-center justify-center h-full">
-                      <div class="text-center text-gray-500 dark:text-gray-400">
-                        <p class="mb-2">No session selected</p>
-                        <p class="text-sm">Select a session to view messages</p>
-                      </div>
-                    </div>
-                  }
-                >
-                  <For each={cachedSessionIds()}>
-                    {(sessionId) => {
-                      const isActive = () => activeSessionIdForInstance() === sessionId
-                      return (
-                        <div
-                          class="session-cache-pane flex flex-col flex-1 min-h-0"
-                          style={{ display: isActive() ? "flex" : "none" }}
-                          data-session-id={sessionId}
-                          aria-hidden={!isActive()}
-                        >
-                          <SessionView
-                            sessionId={sessionId}
-                            activeSessions={activeSessions()}
-                            instanceId={props.instance.id}
-                            instanceFolder={props.instance.folder}
-                            escapeInDebounce={props.escapeInDebounce}
-                            showSidebarToggle={shouldShowSidebarToggle()}
-                            onSidebarToggle={() => setIsSidebarOpen(true)}
-                            forceCompactStatusLayout={shouldShowSidebarToggle()}
-                            isActive={isActive()}
-                          />
-                        </div>
-                      )
-                    }}
-                  </For>
-                </Show>
-              }
-            >
-              <InfoView instanceId={props.instance.id} />
-            </Show>
-          </div>
-
-          <Show when={isCompactLayout() && isSidebarOpen()}>
-            <button
-              type="button"
-              class="session-sidebar-backdrop"
-              aria-label="Close session sidebar"
-              onClick={() => setIsSidebarOpen(false)}
-            />
-          </Show>
-        </div>
-      </Show>
-
-      <CommandPalette
-        open={paletteOpen()}
-        onClose={() => hideCommandPalette(props.instance.id)}
-        commands={instancePaletteCommands()}
-        onExecute={props.onExecuteCommand}
-      />
-    </>
-  )
-}
-
-export default InstanceShell

packages/ui/src/components/message-section.tsx

@@ -1,15 +1,11 @@
 import { Show, createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js"
 import Kbd from "./kbd"
 import MessageBlockList, { getMessageAnchorId } from "./message-block-list"
-import MessageListHeader from "./message-list-header"
 import MessageTimeline, { buildTimelineSegments, type TimelineSegment } from "./message-timeline"
 import { useConfig } from "../stores/preferences"
 import { getSessionInfo } from "../stores/sessions"
-import { showCommandPalette } from "../stores/command-palette"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import { useScrollCache } from "../lib/hooks/use-scroll-cache"
-import { sseManager } from "../lib/sse-manager"
-import { formatTokenTotal } from "../lib/formatters"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 
 const SCROLL_SCOPE = "session"
@@ -19,10 +15,6 @@ const SCROLL_INTENT_KEYS = new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown"
 const QUOTE_SELECTION_MAX_LENGTH = 2000
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
-function formatTokens(tokens: number): string {
-  return formatTokenTotal(tokens)
-}
-
 export interface MessageSectionProps {
   instanceId: string
   sessionId: string
@@ -77,11 +69,6 @@ export default function MessageSection(props: MessageSectionProps) {
     return `${showThinking}|${thinkingExpansion}|${showUsage}`
   })
 
-  const connectionStatus = () => sseManager.getStatus(props.instanceId)
-  const handleCommandPaletteClick = () => {
-    showCommandPalette(props.instanceId)
-  }
- 
   const handleTimelineSegmentClick = (segment: TimelineSegment) => {
     if (typeof document === "undefined") return
     const anchor = document.getElementById(getMessageAnchorId(segment.messageId))
@@ -757,17 +744,6 @@ export default function MessageSection(props: MessageSectionProps) {
 
   return (
     <div class="message-stream-container">
-      <MessageListHeader
-        usedTokens={tokenStats().used}
-        availableTokens={tokenStats().avail}
-        connectionStatus={connectionStatus()}
-        onCommandPalette={handleCommandPaletteClick}
-        formatTokens={formatTokens}
-        showSidebarToggle={props.showSidebarToggle}
-        onSidebarToggle={props.onSidebarToggle}
-        forceCompactStatusLayout={props.forceCompactStatusLayout}
-      />
-
       <div class={`message-layout${hasTimelineSegments() ? " message-layout--with-timeline" : ""}`}>
         <div class="message-stream-shell" ref={setShellElement}>
           <div class="message-stream" ref={setContainerRef} onScroll={handleScroll} onMouseUp={handleStreamMouseUp}>

packages/ui/src/lib/theme.tsx

@@ -1,4 +1,6 @@
-import { createContext, createEffect, createSignal, onMount, useContext, type JSX } from "solid-js"
+import { createContext, createEffect, createMemo, createSignal, onMount, useContext, type JSX } from "solid-js"
+import { createTheme, ThemeProvider as MuiThemeProvider } from "@suid/material/styles"
+import CssBaseline from "@suid/material/CssBaseline"
 import { useConfig } from "../stores/preferences"
 
 interface ThemeContextValue {
@@ -10,6 +12,7 @@ interface ThemeContextValue {
 const ThemeContext = createContext<ThemeContextValue>()
 
 function applyTheme(dark: boolean) {
+  if (typeof document === "undefined") return
   if (dark) {
     document.documentElement.setAttribute("data-theme", "dark")
     return
@@ -18,8 +21,61 @@ function applyTheme(dark: boolean) {
   document.documentElement.removeAttribute("data-theme")
 }
 
+interface ResolvedPaletteColors {
+  backgroundDefault: string
+  backgroundPaper: string
+  primary: string
+  primaryContrast: string
+  textPrimary: string
+  textSecondary: string
+  divider: string
+}
+
+const lightPaletteFallbacks: ResolvedPaletteColors = {
+  backgroundDefault: "#ffffff",
+  backgroundPaper: "#f5f5f5",
+  primary: "#0066ff",
+  primaryContrast: "#ffffff",
+  textPrimary: "#1a1a1a",
+  textSecondary: "#666666",
+  divider: "#e0e0e0",
+}
+
+const darkPaletteFallbacks: ResolvedPaletteColors = {
+  backgroundDefault: "#1a1a1a",
+  backgroundPaper: "#2a2a2a",
+  primary: "#0080ff",
+  primaryContrast: "#1a1a1a",
+  textPrimary: "#cfd4dc",
+  textSecondary: "#999999",
+  divider: "#3a3a3a",
+}
+
+const readCssVar = (token: string, fallback: string, rootStyle: CSSStyleDeclaration | null) => {
+  if (!rootStyle) return fallback
+  const value = rootStyle.getPropertyValue(token)
+  if (!value) return fallback
+  const trimmed = value.trim()
+  return trimmed || fallback
+}
+
+const resolvePaletteColors = (dark: boolean): ResolvedPaletteColors => {
+  const fallbackSet = dark ? darkPaletteFallbacks : lightPaletteFallbacks
+  const rootStyle = typeof window !== "undefined" ? getComputedStyle(document.documentElement) : null
+
+  return {
+    backgroundDefault: readCssVar("--surface-base", fallbackSet.backgroundDefault, rootStyle),
+    backgroundPaper: readCssVar("--surface-secondary", fallbackSet.backgroundPaper, rootStyle),
+    primary: readCssVar("--accent-primary", fallbackSet.primary, rootStyle),
+    primaryContrast: readCssVar("--text-inverted", fallbackSet.primaryContrast, rootStyle),
+    textPrimary: readCssVar("--text-primary", fallbackSet.textPrimary, rootStyle),
+    textSecondary: readCssVar("--text-secondary", fallbackSet.textSecondary, rootStyle),
+    divider: readCssVar("--border-base", fallbackSet.divider, rootStyle),
+  }
+}
+
 export function ThemeProvider(props: { children: JSX.Element }) {
-  const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)")
+  const mediaQuery = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null
   const { themePreference, setThemePreference } = useConfig()
   const [isDark, setIsDarkSignal] = createSignal(true)
 
@@ -39,14 +95,15 @@ export function ThemeProvider(props: { children: JSX.Element }) {
   })
 
   onMount(() => {
+    if (!mediaQuery) return
     const handleSystemThemeChange = () => {
       applyResolvedTheme()
     }
 
-    systemPrefersDark.addEventListener("change", handleSystemThemeChange)
+    mediaQuery.addEventListener("change", handleSystemThemeChange)
 
     return () => {
-      systemPrefersDark.removeEventListener("change", handleSystemThemeChange)
+      mediaQuery.removeEventListener("change", handleSystemThemeChange)
     }
   })
 
@@ -58,7 +115,72 @@ export function ThemeProvider(props: { children: JSX.Element }) {
     setTheme(true)
   }
 
-  return <ThemeContext.Provider value={{ isDark, toggleTheme, setTheme }}>{props.children}</ThemeContext.Provider>
+  const muiTheme = createMemo(() => {
+    const paletteColors = resolvePaletteColors(isDark())
+    return createTheme({
+      palette: {
+        mode: isDark() ? "dark" : "light",
+        primary: {
+          main: paletteColors.primary,
+          contrastText: paletteColors.primaryContrast,
+        },
+        secondary: {
+          main: paletteColors.primary,
+        },
+        background: {
+          default: paletteColors.backgroundDefault,
+          paper: paletteColors.backgroundPaper,
+        },
+        text: {
+          primary: paletteColors.textPrimary,
+          secondary: paletteColors.textSecondary,
+        },
+        divider: paletteColors.divider,
+      },
+      typography: {
+        fontFamily: "var(--font-family-sans)",
+      },
+      shape: {
+        borderRadius: 8,
+      },
+      components: {
+        MuiDrawer: {
+          styleOverrides: {
+            paper: {
+              backgroundColor: paletteColors.backgroundPaper,
+              color: paletteColors.textPrimary,
+            },
+          },
+        },
+        MuiAppBar: {
+          styleOverrides: {
+            root: {
+              backgroundColor: paletteColors.backgroundPaper,
+              color: paletteColors.textPrimary,
+              boxShadow: "none",
+              borderBottom: `1px solid ${paletteColors.divider}`,
+            },
+          },
+        },
+        MuiToolbar: {
+          styleOverrides: {
+            root: {
+              minHeight: "56px",
+            },
+          },
+        },
+      } as any,
+    })
+  })
+
+  return (
+    <ThemeContext.Provider value={{ isDark, toggleTheme, setTheme }}>
+      <MuiThemeProvider theme={muiTheme()}>
+        <CssBaseline />
+        {props.children}
+      </MuiThemeProvider>
+    </ThemeContext.Provider>
+  )
 }
 
 export function useTheme() {