From 7617f594412acd3545bce6f6dd07f86d36b25560 Mon Sep 17 00:00:00 2001
From: ewired <37567272+ewired@users.noreply.github.com>
Date: Sat, 27 Dec 2025 19:53:17 -0500
Subject: [PATCH 01/60] Allow line numbers and ranges in autocomplete (#4238)

---
 .../cmd/tui/component/prompt/autocomplete.tsx | 68 ++++++++++++++++---
 1 file changed, 57 insertions(+), 11 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx b/packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx
index cef083ad734..a5823289505 100644
--- a/packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx
@@ -12,6 +12,38 @@ import { useTerminalDimensions } from "@opentui/solid"
 import { Locale } from "@/util/locale"
 import type { PromptInfo } from "./history"
 
+function removeLineRange(input: string) {
+  const hashIndex = input.lastIndexOf("#")
+  return hashIndex !== -1 ? input.substring(0, hashIndex) : input
+}
+
+function extractLineRange(input: string) {
+  const hashIndex = input.lastIndexOf("#")
+  if (hashIndex === -1) {
+    return { baseQuery: input }
+  }
+
+  const baseName = input.substring(0, hashIndex)
+  const linePart = input.substring(hashIndex + 1)
+  const lineMatch = linePart.match(/^(\d+)(?:-(\d*))?$/)
+
+  if (!lineMatch) {
+    return { baseQuery: baseName }
+  }
+
+  const startLine = Number(lineMatch[1])
+  const endLine = lineMatch[2] && startLine < Number(lineMatch[2]) ? Number(lineMatch[2]) : undefined
+
+  return {
+    lineRange: {
+      baseName,
+      startLine,
+      endLine,
+    },
+    baseQuery: baseName,
+  }
+}
+
 export type AutocompleteRef = {
   onInput: (value: string) => void
   onKeyDown: (e: KeyEvent) => void
@@ -142,9 +174,11 @@ export function Autocomplete(props: {
     async (query) => {
       if (!store.visible || store.visible === "/") return []
 
+      const { lineRange, baseQuery } = extractLineRange(query ?? "")
+
       // Get files from SDK
       const result = await sdk.client.find.files({
-        query: query ?? "",
+        query: baseQuery,
       })
 
       const options: AutocompleteOption[] = []
@@ -153,15 +187,27 @@ export function Autocomplete(props: {
       if (!result.error && result.data) {
         const width = props.anchor().width - 4
         options.push(
-          ...result.data.map(
-            (item): AutocompleteOption => ({
-              display: Locale.truncateMiddle(item, width),
+          ...result.data.map((item): AutocompleteOption => {
+            let url = `file://${process.cwd()}/${item}`
+            let filename = item
+            if (lineRange && !item.endsWith("/")) {
+              filename = `${item}#${lineRange.startLine}${lineRange.endLine ? `-${lineRange.endLine}` : ""}`
+              const urlObj = new URL(url)
+              urlObj.searchParams.set("start", String(lineRange.startLine))
+              if (lineRange.endLine !== undefined) {
+                urlObj.searchParams.set("end", String(lineRange.endLine))
+              }
+              url = urlObj.toString()
+            }
+
+            return {
+              display: Locale.truncateMiddle(filename, width),
               onSelect: () => {
-                insertPart(item, {
+                insertPart(filename, {
                   type: "file",
                   mime: "text/plain",
-                  filename: item,
-                  url: `file://${process.cwd()}/${item}`,
+                  filename,
+                  url,
                   source: {
                     type: "file",
                     text: {
@@ -173,8 +219,8 @@ export function Autocomplete(props: {
                   },
                 })
               },
-            }),
-          ),
+            }
+          }),
         )
       }
 
@@ -383,8 +429,8 @@ export function Autocomplete(props: {
       return prev
     }
 
-    const result = fuzzysort.go(currentFilter, mixed, {
-      keys: [(obj) => obj.display.trimEnd(), "description", (obj) => obj.aliases?.join(" ") ?? ""],
+    const result = fuzzysort.go(removeLineRange(currentFilter), mixed, {
+      keys: [(obj) => removeLineRange(obj.display.trimEnd()), "description", (obj) => obj.aliases?.join(" ") ?? ""],
       limit: 10,
       scoreFn: (objResults) => {
         const displayResult = objResults[0]

From 613813ac12fa17cfae9b3b26d7b0d2105e273a63 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Sun, 28 Dec 2025 00:53:48 +0000
Subject: [PATCH 02/60] chore: generate

---
 packages/plugin/package.json | 2 +-
 packages/sdk/js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index 4d82f2a5fd8..63174acec23 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -24,4 +24,4 @@
     "typescript": "catalog:",
     "@typescript/native-preview": "catalog:"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/sdk/js/package.json b/packages/sdk/js/package.json
index ac6f8480269..7933647718b 100644
--- a/packages/sdk/js/package.json
+++ b/packages/sdk/js/package.json
@@ -29,4 +29,4 @@
   "publishConfig": {
     "directory": "dist"
   }
-}
\ No newline at end of file
+}

From 9d485dd307ebced056729ae56903064c66cff85c Mon Sep 17 00:00:00 2001
From: Ivan Pantic <panta82@users.noreply.github.com>
Date: Sun, 28 Dec 2025 01:54:27 +0100
Subject: [PATCH 03/60] docs: add opencode-notificator to ecosystem plugins
 list (#6269)

Co-authored-by: Ivan Pantic <panta@talentkit.io>
Co-authored-by: Aiden Cline <63023139+rekram1-node@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/web/src/content/docs/ecosystem.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web/src/content/docs/ecosystem.mdx b/packages/web/src/content/docs/ecosystem.mdx
index 9c772b99305..de0d5fd3769 100644
--- a/packages/web/src/content/docs/ecosystem.mdx
+++ b/packages/web/src/content/docs/ecosystem.mdx
@@ -32,6 +32,7 @@ You can also check out [awesome-opencode](https://github.com/awesome-opencode/aw
 | [opencode-md-table-formatter](https://github.com/franlol/opencode-md-table-formatter/tree/main)   | Clean up markdown tables produced by LLMs                                                      |
 | [opencode-morph-fast-apply](https://github.com/JRedeker/opencode-morph-fast-apply)                | 10x faster code editing with Morph Fast Apply API and lazy edit markers                        |
 | [oh-my-opencode](https://github.com/code-yeongyu/oh-my-opencode)                                  | Background agents, pre-built LSP/AST/MCP tools, curated agents, Claude Code compatible         |
+| [opencode-notificator](https://github.com/panta/opencode-notificator)                             | Desktop notifications and sound alerts for OpenCode sessions                                   |
 | [opencode-zellij-namer](https://github.com/24601/opencode-zellij-namer)                           | AI-powered automatic Zellij session naming based on OpenCode context                           |
 
 ---

From de28fafb471cca4a79be2b9e0b8767ec852ea5ab Mon Sep 17 00:00:00 2001
From: Aiden Cline <aidenpcline@gmail.com>
Date: Sat, 27 Dec 2025 19:07:25 -0600
Subject: [PATCH 04/60] fix: search all recent models instead of only top 5 in
 TUI /models command

---
 .../src/cli/cmd/tui/component/dialog-model.tsx      | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx b/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx
index fc0559cd686..bc90dbb5c6e 100644
--- a/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx
@@ -37,11 +37,9 @@ export function DialogModel(props: { providerID?: string }) {
     const recents = local.model.recent()
 
     const recentList = showExtra()
-      ? recents
-          .filter(
-            (item) => !favorites.some((fav) => fav.providerID === item.providerID && fav.modelID === item.modelID),
-          )
-          .slice(0, 5)
+      ? recents.filter(
+          (item) => !favorites.some((fav) => fav.providerID === item.providerID && fav.modelID === item.modelID),
+        )
       : []
 
     const favoriteOptions = favorites.flatMap((item) => {
@@ -182,7 +180,10 @@ export function DialogModel(props: { providerID?: string }) {
     // Apply fuzzy filtering to each section separately, maintaining section order
     if (q) {
       const filteredFavorites = fuzzysort.go(q, favoriteOptions, { keys: ["title"] }).map((x) => x.obj)
-      const filteredRecents = fuzzysort.go(q, recentOptions, { keys: ["title"] }).map((x) => x.obj)
+      const filteredRecents = fuzzysort
+        .go(q, recentOptions, { keys: ["title"] })
+        .map((x) => x.obj)
+        .slice(0, 5)
       const filteredProviders = fuzzysort.go(q, providerOptions, { keys: ["title", "category"] }).map((x) => x.obj)
       const filteredPopular = fuzzysort.go(q, popularProviders, { keys: ["title"] }).map((x) => x.obj)
       return [...filteredFavorites, ...filteredRecents, ...filteredProviders, ...filteredPopular]

From 7a94d7a2c5a12c9fbda987b8c63dddd5df3f1393 Mon Sep 17 00:00:00 2001
From: processtrader <232431073+processtrader@users.noreply.github.com>
Date: Sun, 28 Dec 2025 02:10:23 +0100
Subject: [PATCH 05/60] fix: stats command to correctly handle `--days 0` for
 current day statistics (#6259)

Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>
Co-authored-by: rekram1-node <rekram1-node@users.noreply.github.com>
---
 packages/opencode/src/cli/cmd/stats.ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/stats.ts b/packages/opencode/src/cli/cmd/stats.ts
index f41b23ee971..94f1b549f40 100644
--- a/packages/opencode/src/cli/cmd/stats.ts
+++ b/packages/opencode/src/cli/cmd/stats.ts
@@ -82,12 +82,21 @@ async function getAllSessions(): Promise<Session.Info[]> {
   return sessions
 }
 
-async function aggregateSessionStats(days?: number, projectFilter?: string): Promise<SessionStats> {
+export async function aggregateSessionStats(days?: number, projectFilter?: string): Promise<SessionStats> {
   const sessions = await getAllSessions()
-  const DAYS_IN_SECOND = 24 * 60 * 60 * 1000
-  const cutoffTime = days ? Date.now() - days * DAYS_IN_SECOND : 0
+  const MS_IN_DAY = 24 * 60 * 60 * 1000
+
+  const cutoffTime = (() => {
+    if (days === undefined) return 0
+    if (days === 0) {
+      const now = new Date()
+      now.setHours(0, 0, 0, 0)
+      return now.getTime()
+    }
+    return Date.now() - days * MS_IN_DAY
+  })()
 
-  let filteredSessions = days ? sessions.filter((session) => session.time.updated >= cutoffTime) : sessions
+  let filteredSessions = cutoffTime > 0 ? sessions.filter((session) => session.time.updated >= cutoffTime) : sessions
 
   if (projectFilter !== undefined) {
     if (projectFilter === "") {
@@ -198,7 +207,7 @@ async function aggregateSessionStats(days?: number, projectFilter?: string): Pro
     }
   }
 
-  const actualDays = Math.max(1, Math.ceil((latestTime - earliestTime) / DAYS_IN_SECOND))
+  const actualDays = Math.max(1, Math.ceil((latestTime - earliestTime) / MS_IN_DAY))
   stats.dateRange = {
     earliest: earliestTime,
     latest: latestTime,

From 8a2f4ddf70813aa37c69810d5c5a96a1388dd6fa Mon Sep 17 00:00:00 2001
From: Connor Adams <connorads@users.noreply.github.com>
Date: Sun, 28 Dec 2025 01:10:51 +0000
Subject: [PATCH 06/60] chore: update `INVALID_DIRS` to include plural 'skills'
 directory (#6255)

---
 packages/opencode/src/config/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/opencode/src/config/config.ts b/packages/opencode/src/config/config.ts
index c94a34be0e6..807cd46fd26 100644
--- a/packages/opencode/src/config/config.ts
+++ b/packages/opencode/src/config/config.ts
@@ -155,7 +155,7 @@ export namespace Config {
     }
   })
 
-  const INVALID_DIRS = new Bun.Glob(`{${["agents", "commands", "plugins", "tools"].join(",")}}/`)
+  const INVALID_DIRS = new Bun.Glob(`{${["agents", "commands", "plugins", "tools", "skills"].join(",")}}/`)
   async function assertValid(dir: string) {
     const invalid = await Array.fromAsync(
       INVALID_DIRS.scan({

From 2fe7a7f2d32e8f61d1e88e2bd2966b66ee9a9cd3 Mon Sep 17 00:00:00 2001
From: Nindaleth <Nindaleth@users.noreply.github.com>
Date: Sun, 28 Dec 2025 02:11:30 +0100
Subject: [PATCH 07/60] docs: document attach command (#6254)

Co-authored-by: Black_Fox <radekliska@gmail.com>
---
 packages/web/src/content/docs/cli.mdx | 29 ++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/content/docs/cli.mdx b/packages/web/src/content/docs/cli.mdx
index 4a826e5b3ff..35ef993b8ec 100644
--- a/packages/web/src/content/docs/cli.mdx
+++ b/packages/web/src/content/docs/cli.mdx
@@ -57,6 +57,33 @@ opencode agent [command]
 
 ---
 
+### attach
+
+Attach a terminal to an already running OpenCode backend server started via `serve` or `web` commands.
+
+```bash
+opencode attach [url]
+```
+
+This allows using the TUI with a remote OpenCode backend. For example:
+
+```bash
+# Start the backend server for web/mobile access
+opencode web --port 4096 --hostname 0.0.0.0
+
+# In another terminal, attach the TUI to the running backend
+opencode attach http://10.20.30.40:4096
+```
+
+#### Flags
+
+| Flag         | Short | Description                       |
+| ------------ | ----- | --------------------------------- |
+| `--dir`      |       | Working directory to start TUI in |
+| `--session`  | `-s`  | Session ID to continue            |
+
+---
+
 #### create
 
 Create a new agent with custom configuration.
@@ -325,7 +352,7 @@ opencode run --attach http://localhost:4096 "Explain async/await in JavaScript"
 
 ### serve
 
-Start a headless opencode server for API access. Check out the [server docs](/docs/server) for the full HTTP interface.
+Start a headless OpenCode server for API access. Check out the [server docs](/docs/server) for the full HTTP interface.
 
 ```bash
 opencode serve

From 2c0d9a46cbd394b5f50e12e6a4a03928307607c2 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Sun, 28 Dec 2025 01:12:02 +0000
Subject: [PATCH 08/60] chore: generate

---
 packages/web/src/content/docs/cli.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/content/docs/cli.mdx b/packages/web/src/content/docs/cli.mdx
index 35ef993b8ec..1553dc80ee9 100644
--- a/packages/web/src/content/docs/cli.mdx
+++ b/packages/web/src/content/docs/cli.mdx
@@ -77,10 +77,10 @@ opencode attach http://10.20.30.40:4096
 
 #### Flags
 
-| Flag         | Short | Description                       |
-| ------------ | ----- | --------------------------------- |
-| `--dir`      |       | Working directory to start TUI in |
-| `--session`  | `-s`  | Session ID to continue            |
+| Flag        | Short | Description                       |
+| ----------- | ----- | --------------------------------- |
+| `--dir`     |       | Working directory to start TUI in |
+| `--session` | `-s`  | Session ID to continue            |
 
 ---
 

From e35d97f9d7005a4227eb56cc008cffb230161eda Mon Sep 17 00:00:00 2001
From: scarf <greenscarf005@gmail.com>
Date: Sun, 28 Dec 2025 10:14:56 +0900
Subject: [PATCH 09/60] feat: add bash shell completions (#6239)

---
 packages/opencode/src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/opencode/src/index.ts b/packages/opencode/src/index.ts
index 638ee7347db..03ccf76042f 100644
--- a/packages/opencode/src/index.ts
+++ b/packages/opencode/src/index.ts
@@ -77,6 +77,7 @@ const cli = yargs(hideBin(process.argv))
     })
   })
   .usage("\n" + UI.logo())
+  .completion("completion", "generate shell completion script")
   .command(AcpCommand)
   .command(McpCommand)
   .command(TuiThreadCommand)

From 7ea0d37ee3b01be8788a95db5b6f08690d01465c Mon Sep 17 00:00:00 2001
From: rektide <rektide@voodoowarez.com>
Date: Sun, 28 Dec 2025 01:32:33 +0000
Subject: [PATCH 10/60] Thinking & tool call visibility settings for `/copy`
 and `/export` (#6243)

Co-authored-by: Aiden Cline <aidenpcline@gmail.com>
---
 .../src/cli/cmd/tui/routes/session/index.tsx  |  51 ++++--
 .../cli/cmd/tui/ui/dialog-export-options.tsx  | 148 ++++++++++++++++++
 2 files changed, 187 insertions(+), 12 deletions(-)
 create mode 100644 packages/opencode/src/cli/cmd/tui/ui/dialog-export-options.tsx

diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
index 177c43a463a..d5298518700 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
@@ -52,7 +52,6 @@ import { DialogMessage } from "./dialog-message"
 import type { PromptInfo } from "../../component/prompt/history"
 import { iife } from "@/util/iife"
 import { DialogConfirm } from "@tui/ui/dialog-confirm"
-import { DialogPrompt } from "@tui/ui/dialog-prompt"
 import { DialogTimeline } from "./dialog-timeline"
 import { DialogForkFromTimeline } from "./dialog-fork-from-timeline"
 import { DialogSessionRename } from "../../component/dialog-session-rename"
@@ -67,7 +66,7 @@ import stripAnsi from "strip-ansi"
 import { Footer } from "./footer.tsx"
 import { usePromptRef } from "../../context/prompt"
 import { Filesystem } from "@/util/filesystem"
-import { DialogSubagent } from "./dialog-subagent.tsx"
+import { DialogExportOptions } from "../../ui/dialog-export-options"
 
 addDefaultParsers(parsers.parsers)
 
@@ -784,8 +783,22 @@ export function Session() {
             for (const part of parts) {
               if (part.type === "text" && !part.synthetic) {
                 transcript += `${part.text}\n\n`
+              } else if (part.type === "reasoning") {
+                if (showThinking()) {
+                  transcript += `_Thinking:_\n\n${part.text}\n\n`
+                }
               } else if (part.type === "tool") {
-                transcript += `\`\`\`\nTool: ${part.tool}\n\`\`\`\n\n`
+                transcript += `\`\`\`\nTool: ${part.tool}\n`
+                if (showDetails() && part.state.input) {
+                  transcript += `\n**Input:**\n\`\`\`json\n${JSON.stringify(part.state.input, null, 2)}\n\`\`\``
+                }
+                if (showDetails() && part.state.status === "completed" && part.state.output) {
+                  transcript += `\n**Output:**\n\`\`\`\n${part.state.output}\n\`\`\``
+                }
+                if (showDetails() && part.state.status === "error" && part.state.error) {
+                  transcript += `\n**Error:**\n\`\`\`\n${part.state.error}\n\`\`\``
+                }
+                transcript += `\n\`\`\`\n\n`
               }
             }
 
@@ -812,6 +825,14 @@ export function Session() {
           const sessionData = session()
           const sessionMessages = messages()
 
+          const defaultFilename = `session-${sessionData.id.slice(0, 8)}.md`
+
+          const options = await DialogExportOptions.show(dialog, defaultFilename, showThinking(), showDetails())
+
+          if (options === null) return
+
+          const { filename: customFilename, thinking: includeThinking, toolDetails: includeToolDetails } = options
+
           let transcript = `# ${sessionData.title}\n\n`
           transcript += `**Session ID:** ${sessionData.id}\n`
           transcript += `**Created:** ${new Date(sessionData.time.created).toLocaleString()}\n`
@@ -826,22 +847,28 @@ export function Session() {
             for (const part of parts) {
               if (part.type === "text" && !part.synthetic) {
                 transcript += `${part.text}\n\n`
+              } else if (part.type === "reasoning") {
+                if (includeThinking) {
+                  transcript += `_Thinking:_\n\n${part.text}\n\n`
+                }
               } else if (part.type === "tool") {
-                transcript += `\`\`\`\nTool: ${part.tool}\n\`\`\`\n\n`
+                transcript += `\`\`\`\nTool: ${part.tool}\n`
+                if (includeToolDetails && part.state.input) {
+                  transcript += `\n**Input:**\n\`\`\`json\n${JSON.stringify(part.state.input, null, 2)}\n\`\`\``
+                }
+                if (includeToolDetails && part.state.status === "completed" && part.state.output) {
+                  transcript += `\n**Output:**\n\`\`\`\n${part.state.output}\n\`\`\``
+                }
+                if (includeToolDetails && part.state.status === "error" && part.state.error) {
+                  transcript += `\n**Error:**\n\`\`\`\n${part.state.error}\n\`\`\``
+                }
+                transcript += `\n\`\`\`\n\n`
               }
             }
 
             transcript += `---\n\n`
           }
 
-          // Prompt for optional filename
-          const customFilename = await DialogPrompt.show(dialog, "Export filename", {
-            value: `session-${sessionData.id.slice(0, 8)}.md`,
-          })
-
-          // Cancel if user pressed escape
-          if (customFilename === null) return
-
           // Save to file in current working directory
           const exportDir = process.cwd()
           const filename = customFilename.trim()
diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-export-options.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-export-options.tsx
new file mode 100644
index 00000000000..874a236ee4c
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/ui/dialog-export-options.tsx
@@ -0,0 +1,148 @@
+import { TextareaRenderable, TextAttributes } from "@opentui/core"
+import { useTheme } from "../context/theme"
+import { useDialog, type DialogContext } from "./dialog"
+import { createStore } from "solid-js/store"
+import { onMount, Show, type JSX } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+
+export type DialogExportOptionsProps = {
+  defaultFilename: string
+  defaultThinking: boolean
+  defaultToolDetails: boolean
+  onConfirm?: (options: { filename: string; thinking: boolean; toolDetails: boolean }) => void
+  onCancel?: () => void
+}
+
+export function DialogExportOptions(props: DialogExportOptionsProps) {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+  let textarea: TextareaRenderable
+  const [store, setStore] = createStore({
+    thinking: props.defaultThinking,
+    toolDetails: props.defaultToolDetails,
+    active: "filename" as "filename" | "thinking" | "toolDetails",
+  })
+
+  useKeyboard((evt) => {
+    if (evt.name === "return") {
+      props.onConfirm?.({
+        filename: textarea.plainText,
+        thinking: store.thinking,
+        toolDetails: store.toolDetails,
+      })
+    }
+    if (evt.name === "tab") {
+      const order: Array<"filename" | "thinking" | "toolDetails"> = ["filename", "thinking", "toolDetails"]
+      const currentIndex = order.indexOf(store.active)
+      const nextIndex = (currentIndex + 1) % order.length
+      setStore("active", order[nextIndex])
+      evt.preventDefault()
+    }
+    if (evt.name === "space") {
+      if (store.active === "thinking") setStore("thinking", !store.thinking)
+      if (store.active === "toolDetails") setStore("toolDetails", !store.toolDetails)
+      evt.preventDefault()
+    }
+  })
+
+  onMount(() => {
+    dialog.setSize("medium")
+    setTimeout(() => {
+      textarea.focus()
+    }, 1)
+    textarea.gotoLineEnd()
+  })
+
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          Export Options
+        </text>
+        <text fg={theme.textMuted}>esc</text>
+      </box>
+      <box gap={1}>
+        <box>
+          <text fg={theme.text}>Filename:</text>
+        </box>
+        <textarea
+          onSubmit={() => {
+            props.onConfirm?.({
+              filename: textarea.plainText,
+              thinking: store.thinking,
+              toolDetails: store.toolDetails,
+            })
+          }}
+          height={3}
+          keyBindings={[{ name: "return", action: "submit" }]}
+          ref={(val: TextareaRenderable) => (textarea = val)}
+          initialValue={props.defaultFilename}
+          placeholder="Enter filename"
+          textColor={theme.text}
+          focusedTextColor={theme.text}
+          cursorColor={theme.text}
+        />
+      </box>
+      <box flexDirection="column">
+        <box
+          flexDirection="row"
+          gap={2}
+          paddingLeft={1}
+          backgroundColor={store.active === "thinking" ? theme.backgroundElement : undefined}
+          onMouseUp={() => setStore("active", "thinking")}
+        >
+          <text fg={store.active === "thinking" ? theme.primary : theme.textMuted}>
+            {store.thinking ? "[x]" : "[ ]"}
+          </text>
+          <text fg={store.active === "thinking" ? theme.primary : theme.text}>Include thinking</text>
+        </box>
+        <box
+          flexDirection="row"
+          gap={2}
+          paddingLeft={1}
+          backgroundColor={store.active === "toolDetails" ? theme.backgroundElement : undefined}
+          onMouseUp={() => setStore("active", "toolDetails")}
+        >
+          <text fg={store.active === "toolDetails" ? theme.primary : theme.textMuted}>
+            {store.toolDetails ? "[x]" : "[ ]"}
+          </text>
+          <text fg={store.active === "toolDetails" ? theme.primary : theme.text}>Include tool details</text>
+        </box>
+      </box>
+      <Show when={store.active !== "filename"}>
+        <text fg={theme.textMuted} paddingBottom={1}>
+          Press <span style={{ fg: theme.text }}>space</span> to toggle, <span style={{ fg: theme.text }}>return</span>{" "}
+          to confirm
+        </text>
+      </Show>
+      <Show when={store.active === "filename"}>
+        <text fg={theme.textMuted} paddingBottom={1}>
+          Press <span style={{ fg: theme.text }}>return</span> to confirm, <span style={{ fg: theme.text }}>tab</span>{" "}
+          for options
+        </text>
+      </Show>
+    </box>
+  )
+}
+
+DialogExportOptions.show = (
+  dialog: DialogContext,
+  defaultFilename: string,
+  defaultThinking: boolean,
+  defaultToolDetails: boolean,
+) => {
+  return new Promise<{ filename: string; thinking: boolean; toolDetails: boolean } | null>((resolve) => {
+    dialog.replace(
+      () => (
+        <DialogExportOptions
+          defaultFilename={defaultFilename}
+          defaultThinking={defaultThinking}
+          defaultToolDetails={defaultToolDetails}
+          onConfirm={(options) => resolve(options)}
+          onCancel={() => resolve(null)}
+        />
+      ),
+      () => resolve(null),
+    )
+  })
+}

From 953e4e9446bee016ddbc531f4738cee079a3f34f Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sat, 27 Dec 2025 19:43:52 -0600
Subject: [PATCH 11/60] chore(desktop): vertical tabs

---
 packages/ui/src/components/tabs.css | 66 +++++++++++++++++++++++++++++
 packages/ui/src/components/tabs.tsx |  5 ++-
 2 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
index d60edc5c509..3ec7ece904e 100644
--- a/packages/ui/src/components/tabs.css
+++ b/packages/ui/src/components/tabs.css
@@ -205,4 +205,70 @@
     /* [data-slot="tabs-content"] { */
     /* } */
   }
+
+  &[data-orientation="vertical"] {
+    flex-direction: row;
+
+    [data-slot="tabs-list"] {
+      flex-direction: column;
+      width: auto;
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      &::after {
+        width: 100%;
+        height: auto;
+        flex-grow: 1;
+        border-bottom: none;
+        border-right: 1px solid var(--border-weak-base);
+      }
+    }
+
+    [data-slot="tabs-trigger-wrapper"] {
+      width: 100%;
+      height: auto;
+      border-bottom: none;
+      border-right: 1px solid var(--border-weak-base);
+
+      &:has([data-selected]) {
+        border-right-color: transparent;
+      }
+    }
+
+    [data-slot="tabs-content"] {
+      overflow-x: auto;
+      overflow-y: auto;
+    }
+
+    &[data-variant="alt"] {
+      [data-slot="tabs-list"] {
+        padding-left: 0;
+        padding-right: 0;
+        padding-top: 24px;
+        padding-bottom: 24px;
+        border-bottom: none;
+        border-right: 1px solid var(--border-weak-base);
+
+        &::after {
+          border: none;
+        }
+      }
+
+      [data-slot="tabs-trigger-wrapper"] {
+        border-bottom: none;
+        border-right-width: 2px;
+        border-right-style: solid;
+        border-right-color: transparent;
+
+        [data-slot="tabs-trigger"] {
+          border-bottom: none;
+        }
+
+        &:has([data-selected]) {
+          border-right-color: var(--icon-strong-base);
+        }
+      }
+    }
+  }
 }
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index d91ad3c4156..0a4d5b91a2c 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -4,6 +4,7 @@ import type { ComponentProps, ParentProps } from "solid-js"
 
 export interface TabsProps extends ComponentProps<typeof Kobalte> {
   variant?: "normal" | "alt"
+  orientation?: "horizontal" | "vertical"
 }
 export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {}
 export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
@@ -16,12 +17,14 @@ export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger>
 export interface TabsContentProps extends ComponentProps<typeof Kobalte.Content> {}
 
 function TabsRoot(props: TabsProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "variant"])
+  const [split, rest] = splitProps(props, ["class", "classList", "variant", "orientation"])
   return (
     <Kobalte
       {...rest}
+      orientation={split.orientation}
       data-component="tabs"
       data-variant={split.variant || "normal"}
+      data-orientation={split.orientation || "horizontal"}
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,

From fc082a0f14852ff23ecac3c07d3a4a407b42e625 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sat, 27 Dec 2025 19:49:35 -0600
Subject: [PATCH 12/60] fix(desktop): drag file over entire body to attach

---
 packages/app/src/components/prompt-input.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index f1bb9132a59..61200150102 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -270,7 +270,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     addPart({ type: "text", content: plainText, start: 0, end: 0 })
   }
 
-  const handleDragOver = (event: DragEvent) => {
+  const handleGlobalDragOver = (event: DragEvent) => {
     event.preventDefault()
     const hasFiles = event.dataTransfer?.types.includes("Files")
     if (hasFiles) {
@@ -278,15 +278,14 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
   }
 
-  const handleDragLeave = (event: DragEvent) => {
-    const related = event.relatedTarget as Node | null
-    const form = event.currentTarget as HTMLElement
-    if (!related || !form.contains(related)) {
+  const handleGlobalDragLeave = (event: DragEvent) => {
+    // relatedTarget is null when leaving the document window
+    if (!event.relatedTarget) {
       setStore("dragging", false)
     }
   }
 
-  const handleDrop = async (event: DragEvent) => {
+  const handleGlobalDrop = async (event: DragEvent) => {
     event.preventDefault()
     setStore("dragging", false)
 
@@ -302,9 +301,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   onMount(() => {
     editorRef.addEventListener("paste", handlePaste)
+    document.addEventListener("dragover", handleGlobalDragOver)
+    document.addEventListener("dragleave", handleGlobalDragLeave)
+    document.addEventListener("drop", handleGlobalDrop)
   })
   onCleanup(() => {
     editorRef.removeEventListener("paste", handlePaste)
+    document.removeEventListener("dragover", handleGlobalDragOver)
+    document.removeEventListener("dragleave", handleGlobalDragLeave)
+    document.removeEventListener("drop", handleGlobalDrop)
   })
 
   createEffect(() => {
@@ -1024,9 +1029,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       </Show>
       <form
         onSubmit={handleSubmit}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
         classList={{
           "bg-surface-raised-stronger-non-alpha shadow-xs-border relative": true,
           "rounded-md overflow-clip focus-within:shadow-xs-border": true,

From d70e9fb01e6c7f4d3fd4c9ce6d13251108d6a7f4 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sat, 27 Dec 2025 19:59:16 -0600
Subject: [PATCH 13/60] chore(desktop): cleanup

---
 packages/app/src/context/global-sync.tsx | 13 -------------
 packages/app/src/pages/layout.tsx        |  8 +++++++-
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/app/src/context/global-sync.tsx b/packages/app/src/context/global-sync.tsx
index 50c8a9d1c87..22fdd0276eb 100644
--- a/packages/app/src/context/global-sync.tsx
+++ b/packages/app/src/context/global-sync.tsx
@@ -82,7 +82,6 @@ function createGlobalSync() {
   })
 
   const children: Record<string, ReturnType<typeof createStore<State>>> = {}
-  const permissionListeners: Set<(info: { directory: string; permission: Permission }) => void> = new Set()
   function child(directory: string) {
     if (!directory) console.error("No directory provided")
     if (!children[directory]) {
@@ -330,7 +329,6 @@ function createGlobalSync() {
       }
       case "permission.updated": {
         const permissions = store.permission[event.properties.sessionID]
-        const isNew = !permissions || !permissions.find((p) => p.id === event.properties.id)
         if (!permissions) {
           setStore("permission", event.properties.sessionID, [event.properties])
         } else {
@@ -347,11 +345,6 @@ function createGlobalSync() {
             }),
           )
         }
-        if (isNew) {
-          for (const listener of permissionListeners) {
-            listener({ directory, permission: event.properties })
-          }
-        }
         break
       }
       case "permission.replied": {
@@ -439,12 +432,6 @@ function createGlobalSync() {
     project: {
       loadSessions,
     },
-    permission: {
-      onUpdated(listener: (info: { directory: string; permission: Permission }) => void) {
-        permissionListeners.add(listener)
-        return () => permissionListeners.delete(listener)
-      },
-    },
   }
 }
 
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 538a3b8409d..bd368bb6ca0 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -118,7 +118,13 @@ export default function Layout(props: ParentProps) {
   })
 
   onMount(() => {
-    const unsub = globalSync.permission.onUpdated(({ directory, permission }) => {
+    const seenPermissions = new Set<string>()
+    const unsub = globalSDK.event.listen((e) => {
+      if (e.details?.type !== "permission.updated") return
+      const directory = e.name
+      const permission = e.details.properties
+      if (seenPermissions.has(permission.id)) return
+      seenPermissions.add(permission.id)
       const currentDir = params.dir ? base64Decode(params.dir) : undefined
       const currentSession = params.id
       if (directory === currentDir && permission.sessionID === currentSession) return

From 2e972b3fdc4b7f3ccb2224f693391a8f11572c3c Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sat, 27 Dec 2025 20:18:59 -0600
Subject: [PATCH 14/60] fix(desktop): copy/paste in terminal

---
 packages/app/src/components/prompt-input.tsx |  1 +
 packages/app/src/components/terminal.tsx     | 45 ++++++++++++++++++--
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 61200150102..3c3225137da 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -248,6 +248,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   }
 
   const handlePaste = async (event: ClipboardEvent) => {
+    if (!isFocused()) return
     const clipboardData = event.clipboardData
     if (!clipboardData) return
 
diff --git a/packages/app/src/components/terminal.tsx b/packages/app/src/components/terminal.tsx
index abf03fc0640..1d6bab2a44a 100644
--- a/packages/app/src/components/terminal.tsx
+++ b/packages/app/src/components/terminal.tsx
@@ -23,6 +23,35 @@ export const Terminal = (props: TerminalProps) => {
   let fitAddon: FitAddon
   let handleResize: () => void
   const prefersDark = usePrefersDark()
+  const focusTerminal = () => term?.focus()
+  const copySelection = () => {
+    if (!term || !term.hasSelection()) return false
+    const selection = term.getSelection()
+    if (!selection) return false
+    const clipboard = navigator.clipboard
+    if (clipboard?.writeText) {
+      clipboard.writeText(selection).catch(() => {})
+      return true
+    }
+    if (!document.body) return false
+    const textarea = document.createElement("textarea")
+    textarea.value = selection
+    textarea.setAttribute("readonly", "")
+    textarea.style.position = "fixed"
+    textarea.style.opacity = "0"
+    document.body.appendChild(textarea)
+    textarea.select()
+    const copied = document.execCommand("copy")
+    document.body.removeChild(textarea)
+    return copied
+  }
+  const handlePointerDown = () => {
+    const activeElement = document.activeElement
+    if (activeElement instanceof HTMLElement && activeElement !== container) {
+      activeElement.blur()
+    }
+    focusTerminal()
+  }
 
   onMount(async () => {
     ghostty = await Ghostty.load()
@@ -48,8 +77,17 @@ export const Terminal = (props: TerminalProps) => {
       ghostty,
     })
     term.attachCustomKeyEventHandler((event) => {
+      const key = event.key.toLowerCase()
+      if (key === "c") {
+        const macCopy = event.metaKey && !event.ctrlKey && !event.altKey
+        const linuxCopy = event.ctrlKey && event.shiftKey && !event.metaKey
+        if ((macCopy || linuxCopy) && copySelection()) {
+          event.preventDefault()
+          return true
+        }
+      }
       // allow for ctrl-` to toggle terminal in parent
-      if (event.ctrlKey && event.key.toLowerCase() === "`") {
+      if (event.ctrlKey && key === "`") {
         event.preventDefault()
         return true
       }
@@ -62,6 +100,8 @@ export const Terminal = (props: TerminalProps) => {
     term.loadAddon(fitAddon)
 
     term.open(container)
+    container.addEventListener("pointerdown", handlePointerDown)
+    focusTerminal()
 
     if (local.pty.buffer) {
       if (local.pty.rows && local.pty.cols) {
@@ -75,8 +115,6 @@ export const Terminal = (props: TerminalProps) => {
       fitAddon.fit()
     }
 
-    container.focus()
-
     fitAddon.observeResize()
     handleResize = () => fitAddon.fit()
     window.addEventListener("resize", handleResize)
@@ -134,6 +172,7 @@ export const Terminal = (props: TerminalProps) => {
     if (handleResize) {
       window.removeEventListener("resize", handleResize)
     }
+    container.removeEventListener("pointerdown", handlePointerDown)
     if (serializeAddon && props.onCleanup) {
       const buffer = serializeAddon.serialize()
       props.onCleanup({

From 1b5bf32ce560f44dd558f3951121c3f4b0560e85 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sat, 27 Dec 2025 20:40:25 -0600
Subject: [PATCH 15/60] chore: permissions ux

---
 packages/app/src/pages/layout.tsx            | 38 ++++++++++++++++----
 packages/ui/src/components/session-turn.tsx  |  6 ++++
 packages/ui/src/components/toast.tsx         |  5 +--
 packages/ui/src/hooks/create-auto-scroll.tsx | 17 +++++++++
 4 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index bd368bb6ca0..0b4e040b749 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -41,7 +41,7 @@ import {
 } from "@thisbeyond/solid-dnd"
 import type { DragEvent } from "@thisbeyond/solid-dnd"
 import { useProviders } from "@/hooks/use-providers"
-import { showToast, Toast } from "@opencode-ai/ui/toast"
+import { showToast, Toast, toaster } from "@opencode-ai/ui/toast"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useNotification } from "@/context/notification"
 import { Binary } from "@opencode-ai/util/binary"
@@ -118,13 +118,15 @@ export default function Layout(props: ParentProps) {
   })
 
   onMount(() => {
-    const seenPermissions = new Set<string>()
+    const seenSessions = new Set<string>()
+    const toastBySession = new Map<string, number>()
     const unsub = globalSDK.event.listen((e) => {
       if (e.details?.type !== "permission.updated") return
       const directory = e.name
       const permission = e.details.properties
-      if (seenPermissions.has(permission.id)) return
-      seenPermissions.add(permission.id)
+      const sessionKey = `${directory}:${permission.sessionID}`
+      if (seenSessions.has(sessionKey)) return
+      seenSessions.add(sessionKey)
       const currentDir = params.dir ? base64Decode(params.dir) : undefined
       const currentSession = params.id
       if (directory === currentDir && permission.sessionID === currentSession) return
@@ -133,7 +135,7 @@ export default function Layout(props: ParentProps) {
       if (directory === currentDir && session?.parentID === currentSession) return
       const sessionTitle = session?.title ?? "New session"
       const projectName = getFilename(directory)
-      showToast({
+      const toastId = showToast({
         persistent: true,
         icon: "checklist",
         title: "Permission required",
@@ -144,7 +146,6 @@ export default function Layout(props: ParentProps) {
             onClick: () => {
               navigate(`/${base64Encode(directory)}/session/${permission.sessionID}`)
             },
-            dismissAfter: true,
           },
           {
             label: "Dismiss",
@@ -152,8 +153,33 @@ export default function Layout(props: ParentProps) {
           },
         ],
       })
+      toastBySession.set(sessionKey, toastId)
     })
     onCleanup(unsub)
+
+    createEffect(() => {
+      const currentDir = params.dir ? base64Decode(params.dir) : undefined
+      const currentSession = params.id
+      if (!currentDir || !currentSession) return
+      const sessionKey = `${currentDir}:${currentSession}`
+      const toastId = toastBySession.get(sessionKey)
+      if (toastId !== undefined) {
+        toaster.dismiss(toastId)
+        toastBySession.delete(sessionKey)
+        seenSessions.delete(sessionKey)
+      }
+      const [store] = globalSync.child(currentDir)
+      const childSessions = store.session.filter((s) => s.parentID === currentSession)
+      for (const child of childSessions) {
+        const childKey = `${currentDir}:${child.id}`
+        const childToastId = toastBySession.get(childKey)
+        if (childToastId !== undefined) {
+          toaster.dismiss(childToastId)
+          toastBySession.delete(childKey)
+          seenSessions.delete(childKey)
+        }
+      }
+    })
   })
 
   function sortSessions(a: Session, b: Session) {
diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index ce4845a71c0..8cb4263872e 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -328,6 +328,12 @@ export function SessionTurn(
     }
   })
 
+  createEffect(() => {
+    if (permissionParts().length > 0) {
+      autoScroll.forceScrollToBottom()
+    }
+  })
+
   createEffect(() => {
     if (working() || !isLastUserMessage()) return
 
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
index 7e90e9f2f32..f34c46d4271 100644
--- a/packages/ui/src/components/toast.tsx
+++ b/packages/ui/src/components/toast.tsx
@@ -92,7 +92,6 @@ export type ToastVariant = "default" | "success" | "error" | "loading"
 export interface ToastAction {
   label: string
   onClick: "dismiss" | (() => void)
-  dismissAfter?: boolean
 }
 
 export interface ToastOptions {
@@ -132,10 +131,8 @@ export function showToast(options: ToastOptions | string) {
                 onClick={() => {
                   if (typeof action.onClick === "function") {
                     action.onClick()
-                    if (action.dismissAfter) toaster.dismiss(props.toastId)
-                  } else {
-                    toaster.dismiss(props.toastId)
                   }
+                  toaster.dismiss(props.toastId)
                 }}
               >
                 {action.label}
diff --git a/packages/ui/src/hooks/create-auto-scroll.tsx b/packages/ui/src/hooks/create-auto-scroll.tsx
index e262b7c6945..b780f47c666 100644
--- a/packages/ui/src/hooks/create-auto-scroll.tsx
+++ b/packages/ui/src/hooks/create-auto-scroll.tsx
@@ -35,6 +35,22 @@ export function createAutoScroll(options: AutoScrollOptions) {
     })
   }
 
+  function forceScrollToBottom() {
+    if (!scrollRef) return
+
+    setStore("userScrolled", false)
+    isAutoScrolling = true
+    if (autoScrollTimeout) clearTimeout(autoScrollTimeout)
+    autoScrollTimeout = setTimeout(() => {
+      isAutoScrolling = false
+    }, 1000)
+
+    scrollRef.scrollTo({
+      top: scrollRef.scrollHeight,
+      behavior: "smooth",
+    })
+  }
+
   function handleScroll() {
     if (!scrollRef) return
 
@@ -161,6 +177,7 @@ export function createAutoScroll(options: AutoScrollOptions) {
     handleScroll,
     handleInteraction,
     scrollToBottom,
+    forceScrollToBottom,
     userScrolled: () => store.userScrolled,
   }
 }

From 79c263494ff1426c7f25e5c05c3f55b0e0b0fe9d Mon Sep 17 00:00:00 2001
From: Aiden Cline <aidenpcline@gmail.com>
Date: Sat, 27 Dec 2025 21:20:00 -0600
Subject: [PATCH 16/60] tweak: inform agent if no skills are available

---
 packages/opencode/src/session/system.ts |  1 -
 packages/opencode/src/tool/skill.ts     | 31 ++++++++++++++-----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/opencode/src/session/system.ts b/packages/opencode/src/session/system.ts
index 429e696db3b..e10ee3bad30 100644
--- a/packages/opencode/src/session/system.ts
+++ b/packages/opencode/src/session/system.ts
@@ -2,7 +2,6 @@ import { Ripgrep } from "../file/ripgrep"
 import { Global } from "../global"
 import { Filesystem } from "../util/filesystem"
 import { Config } from "../config/config"
-import { Skill } from "../skill"
 
 import { Instance } from "../project/instance"
 import path from "path"
diff --git a/packages/opencode/src/tool/skill.ts b/packages/opencode/src/tool/skill.ts
index 2503f76398b..b56276f61ef 100644
--- a/packages/opencode/src/tool/skill.ts
+++ b/packages/opencode/src/tool/skill.ts
@@ -26,20 +26,25 @@ export const SkillTool: Tool.Info<typeof parameters> = {
       })
     }
 
+    const description =
+      accessibleSkills.length === 0
+        ? "Load a skill to get detailed instructions for a specific task. No skills are currently available."
+        : [
+            "Load a skill to get detailed instructions for a specific task.",
+            "Skills provide specialized knowledge and step-by-step guidance.",
+            "Use this when a task matches an available skill's description.",
+            "<available_skills>",
+            ...accessibleSkills.flatMap((skill) => [
+              `  <skill>`,
+              `    <name>${skill.name}</name>`,
+              `    <description>${skill.description}</description>`,
+              `  </skill>`,
+            ]),
+            "</available_skills>",
+          ].join(" ")
+
     return {
-      description: [
-        "Load a skill to get detailed instructions for a specific task.",
-        "Skills provide specialized knowledge and step-by-step guidance.",
-        "Use this when a task matches an available skill's description.",
-        "<available_skills>",
-        ...accessibleSkills.flatMap((skill) => [
-          `  <skill>`,
-          `    <name>${skill.name}</name>`,
-          `    <description>${skill.description}</description>`,
-          `  </skill>`,
-        ]),
-        "</available_skills>",
-      ].join(" "),
+      description,
       parameters,
       async execute(params, ctx) {
         const agent = await Agent.get(ctx.agent)

From d6db6ff198c4513ca5511ae49b03d4277bc21718 Mon Sep 17 00:00:00 2001
From: Matt Silverlock <matt@eatsleeprepeat.net>
Date: Sat, 27 Dec 2025 22:24:10 -0500
Subject: [PATCH 17/60] fix: handle non-text response parts in GitHub action
 (#6173)

---
 packages/opencode/src/cli/cmd/github.ts       |  60 +++++++-
 .../opencode/test/cli/github-action.test.ts   | 129 ++++++++++++++++++
 2 files changed, 186 insertions(+), 3 deletions(-)
 create mode 100644 packages/opencode/test/cli/github-action.test.ts

diff --git a/packages/opencode/src/cli/cmd/github.ts b/packages/opencode/src/cli/cmd/github.ts
index 748a9638490..26e0fb73dc3 100644
--- a/packages/opencode/src/cli/cmd/github.ts
+++ b/packages/opencode/src/cli/cmd/github.ts
@@ -158,6 +158,29 @@ export function parseGitHubRemote(url: string): { owner: string; repo: string }
   return { owner: match[1], repo: match[2] }
 }
 
+/**
+ * Extracts displayable text from assistant response parts.
+ * Returns null for tool-only or reasoning-only responses (signals summary needed).
+ * Throws for truly unusable responses (empty, step-start only, etc.).
+ */
+export function extractResponseText(parts: MessageV2.Part[]): string | null {
+  // Priority 1: Look for text parts
+  const textPart = parts.findLast((p) => p.type === "text")
+  if (textPart) return textPart.text
+
+  // Priority 2: Reasoning-only - return null to signal summary needed
+  const reasoningPart = parts.findLast((p) => p.type === "reasoning")
+  if (reasoningPart) return null
+
+  // Priority 3: Tool-only - return null to signal summary needed
+  const toolParts = parts.filter((p) => p.type === "tool" && p.state.status === "completed")
+  if (toolParts.length > 0) return null
+
+  // No usable parts - throw with debug info
+  const partTypes = parts.map((p) => p.type).join(", ") || "none"
+  throw new Error(`Failed to parse response. Part types found: [${partTypes}]`)
+}
+
 export const GithubCommand = cmd({
   command: "github",
   describe: "manage GitHub agent",
@@ -890,10 +913,41 @@ export const GithubRunCommand = cmd({
           )
         }
 
-        const match = result.parts.findLast((p) => p.type === "text")
-        if (!match) throw new Error("Failed to parse the text response")
+        const text = extractResponseText(result.parts)
+        if (text) return text
+
+        // No text part (tool-only or reasoning-only) - ask agent to summarize
+        console.log("Requesting summary from agent...")
+        const summary = await SessionPrompt.prompt({
+          sessionID: session.id,
+          messageID: Identifier.ascending("message"),
+          model: {
+            providerID,
+            modelID,
+          },
+          tools: { "*": false }, // Disable all tools to force text response
+          parts: [
+            {
+              id: Identifier.ascending("part"),
+              type: "text",
+              text: "Summarize the actions (tool calls & reasoning) you did for the user in 1-2 sentences.",
+            },
+          ],
+        })
+
+        if (summary.info.role === "assistant" && summary.info.error) {
+          console.error(summary.info)
+          throw new Error(
+            `${summary.info.error.name}: ${"message" in summary.info.error ? summary.info.error.message : ""}`,
+          )
+        }
+
+        const summaryText = extractResponseText(summary.parts)
+        if (!summaryText) {
+          throw new Error("Failed to get summary from agent")
+        }
 
-        return match.text
+        return summaryText
       }
 
       async function getOidcToken() {
diff --git a/packages/opencode/test/cli/github-action.test.ts b/packages/opencode/test/cli/github-action.test.ts
new file mode 100644
index 00000000000..e2d4a693236
--- /dev/null
+++ b/packages/opencode/test/cli/github-action.test.ts
@@ -0,0 +1,129 @@
+import { test, expect, describe } from "bun:test"
+import { extractResponseText } from "../../src/cli/cmd/github"
+import type { MessageV2 } from "../../src/session/message-v2"
+
+// Helper to create minimal valid parts
+function createTextPart(text: string): MessageV2.Part {
+  return {
+    id: "1",
+    sessionID: "s",
+    messageID: "m",
+    type: "text" as const,
+    text,
+  }
+}
+
+function createReasoningPart(text: string): MessageV2.Part {
+  return {
+    id: "1",
+    sessionID: "s",
+    messageID: "m",
+    type: "reasoning" as const,
+    text,
+    time: { start: 0 },
+  }
+}
+
+function createToolPart(tool: string, title: string, status: "completed" | "running" = "completed"): MessageV2.Part {
+  if (status === "completed") {
+    return {
+      id: "1",
+      sessionID: "s",
+      messageID: "m",
+      type: "tool" as const,
+      callID: "c1",
+      tool,
+      state: {
+        status: "completed",
+        input: {},
+        output: "",
+        title,
+        metadata: {},
+        time: { start: 0, end: 1 },
+      },
+    }
+  }
+  return {
+    id: "1",
+    sessionID: "s",
+    messageID: "m",
+    type: "tool" as const,
+    callID: "c1",
+    tool,
+    state: {
+      status: "running",
+      input: {},
+      time: { start: 0 },
+    },
+  }
+}
+
+function createStepStartPart(): MessageV2.Part {
+  return {
+    id: "1",
+    sessionID: "s",
+    messageID: "m",
+    type: "step-start" as const,
+  }
+}
+
+describe("extractResponseText", () => {
+  test("returns text from text part", () => {
+    const parts = [createTextPart("Hello world")]
+    expect(extractResponseText(parts)).toBe("Hello world")
+  })
+
+  test("returns last text part when multiple exist", () => {
+    const parts = [createTextPart("First"), createTextPart("Last")]
+    expect(extractResponseText(parts)).toBe("Last")
+  })
+
+  test("returns text even when tool parts follow", () => {
+    const parts = [createTextPart("I'll help with that."), createToolPart("todowrite", "3 todos")]
+    expect(extractResponseText(parts)).toBe("I'll help with that.")
+  })
+
+  test("returns null for reasoning-only response (signals summary needed)", () => {
+    const parts = [createReasoningPart("Let me think about this...")]
+    expect(extractResponseText(parts)).toBeNull()
+  })
+
+  test("returns null for tool-only response (signals summary needed)", () => {
+    // This is the exact scenario from the bug report - todowrite with no text
+    const parts = [createToolPart("todowrite", "8 todos")]
+    expect(extractResponseText(parts)).toBeNull()
+  })
+
+  test("returns null for multiple completed tools", () => {
+    const parts = [
+      createToolPart("read", "src/file.ts"),
+      createToolPart("edit", "src/file.ts"),
+      createToolPart("bash", "bun test"),
+    ]
+    expect(extractResponseText(parts)).toBeNull()
+  })
+
+  test("ignores running tool parts (throws since no completed tools)", () => {
+    const parts = [createToolPart("bash", "", "running")]
+    expect(() => extractResponseText(parts)).toThrow("Failed to parse response")
+  })
+
+  test("throws with part types on empty array", () => {
+    expect(() => extractResponseText([])).toThrow("Part types found: [none]")
+  })
+
+  test("throws with part types on unhandled parts", () => {
+    const parts = [createStepStartPart()]
+    expect(() => extractResponseText(parts)).toThrow("Part types found: [step-start]")
+  })
+
+  test("prefers text over reasoning when both present", () => {
+    const parts = [createReasoningPart("Internal thinking..."), createTextPart("Final answer")]
+    expect(extractResponseText(parts)).toBe("Final answer")
+  })
+
+  test("prefers text over tools when both present", () => {
+    const parts = [createToolPart("read", "src/file.ts"), createTextPart("Here's what I found")]
+    expect(extractResponseText(parts)).toBe("Here's what I found")
+  })
+})

From 613494b7acf6c631a0c81cefd429c0a6162f1716 Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 02:49:36 -0800
Subject: [PATCH 18/60] fix(server): remove duplicate variable declaration in
 session list endpoint

---
 packages/opencode/src/server/server.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/opencode/src/server/server.ts b/packages/opencode/src/server/server.ts
index 936701d2217..4508f474b7d 100644
--- a/packages/opencode/src/server/server.ts
+++ b/packages/opencode/src/server/server.ts
@@ -679,8 +679,7 @@ export namespace Server {
           },
         }),
         async (c) => {
-          const sessions = await Array.fromAsync(Session.list())
-          pipe(
+          const sessions = pipe(
             await Array.fromAsync(Session.list()),
             filter((s) => !s.time.archived),
             sortBy((s) => s.time.updated),

From 8d6ff2d9ec89ccccdad2eb86f1b8d9a3148698b9 Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 02:49:43 -0800
Subject: [PATCH 19/60] fix(app): filter archived sessions from session list in
 sync context

---
 packages/app/src/context/sync.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/app/src/context/sync.tsx b/packages/app/src/context/sync.tsx
index 3a769c7f155..9ef3b534b7c 100644
--- a/packages/app/src/context/sync.tsx
+++ b/packages/app/src/context/sync.tsx
@@ -24,6 +24,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
         sdk.client.session.list().then((x) => {
           const sessions = (x.data ?? [])
             .slice()
+            .filter((s) => !s.time.archived)
             .sort((a, b) => a.id.localeCompare(b.id))
             .slice(0, store.limit)
           setStore("session", sessions)
@@ -113,6 +114,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           await sdk.client.session.list().then((x) => {
             const sessions = (x.data ?? [])
               .slice()
+              .filter((s) => !s.time.archived)
               .sort((a, b) => a.id.localeCompare(b.id))
               .slice(0, store.limit)
             setStore("session", sessions)

From 204a4c163738d39d4a758410da899ed67e80bc00 Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 02:49:49 -0800
Subject: [PATCH 20/60] feat(config): add dependency install locking and
 caching with marker files

---
 packages/opencode/src/config/config.ts | 83 +++++++++++++++++++++-----
 1 file changed, 69 insertions(+), 14 deletions(-)

diff --git a/packages/opencode/src/config/config.ts b/packages/opencode/src/config/config.ts
index 7c10b7ca073..a5d9680348b 100644
--- a/packages/opencode/src/config/config.ts
+++ b/packages/opencode/src/config/config.ts
@@ -165,26 +165,81 @@ export namespace Config {
     }
   }
 
-  async function installDependencies(dir: string) {
-    if (Installation.isLocal()) return
+  // Per-directory install locks to serialize concurrent installs
+  const installLocks = new Map<string, Promise<void>>()
 
-    const pkg = path.join(dir, "package.json")
+  // Marker file schema for tracking installed dependencies
+  const DepsInstalledMarker = z.object({
+    version: z.string(),
+    timestamp: z.number(),
+  })
 
-    if (!(await Bun.file(pkg).exists())) {
-      await Bun.write(pkg, "{}")
+  async function installDependencies(dir: string) {
+    // Wait for any ongoing install in this directory to complete
+    const existingLock = installLocks.get(dir)
+    if (existingLock) {
+      await existingLock
+      return
     }
 
-    const gitignore = path.join(dir, ".gitignore")
-    const hasGitIgnore = await Bun.file(gitignore).exists()
-    if (!hasGitIgnore) await Bun.write(gitignore, ["node_modules", "package.json", "bun.lock", ".gitignore"].join("\n"))
+    // Create a new lock for this directory
+    let resolveLock: () => void
+    const lockPromise = new Promise<void>((resolve) => {
+      resolveLock = resolve
+    })
+    installLocks.set(dir, lockPromise)
+
+    try {
+      const markerPath = path.join(dir, ".deps-installed.json")
+      const targetVersion = Installation.isLocal() ? "latest" : Installation.BASE_VERSION
+
+      // Check if dependencies are already installed with correct version
+      try {
+        const markerContent = await Bun.file(markerPath).text()
+        const marker = DepsInstalledMarker.parse(JSON.parse(markerContent))
+        if (marker.version === targetVersion) {
+          log.debug("dependencies already installed", { dir, version: marker.version })
+          return
+        }
+      } catch {
+        // Marker doesn't exist or is invalid, proceed with install
+      }
+
+      const pkg = path.join(dir, "package.json")
+
+      if (!(await Bun.file(pkg).exists())) {
+        await Bun.write(pkg, "{}")
+      }
+
+      const gitignore = path.join(dir, ".gitignore")
+      const hasGitIgnore = await Bun.file(gitignore).exists()
+      if (!hasGitIgnore) {
+        await Bun.write(
+          gitignore,
+          ["node_modules", "package.json", "bun.lock", ".gitignore", ".deps-installed.json"].join("\n"),
+        )
+      }
 
-    // Use BASE_VERSION for @opencode-ai/plugin since it's published by upstream without our -N suffix
-    await BunProc.run(
-      ["add", "@opencode-ai/plugin@" + (Installation.isLocal() ? "latest" : Installation.BASE_VERSION), "--exact"],
-      {
+      // Use BASE_VERSION for @opencode-ai/plugin since it's published by upstream without our -N suffix
+      await BunProc.run(["add", "@opencode-ai/plugin@" + targetVersion, "--exact"], {
         cwd: dir,
-      },
-    ).catch(() => {})
+      })
+
+      // Write marker file after successful install
+      await Bun.write(
+        markerPath,
+        JSON.stringify({
+          version: targetVersion,
+          timestamp: Date.now(),
+        }),
+      )
+      log.info("dependencies installed", { dir, version: targetVersion })
+    } catch (err) {
+      log.error("failed to install dependencies", { dir, error: err })
+    } finally {
+      installLocks.delete(dir)
+      resolveLock!()
+    }
   }
 
   const COMMAND_GLOB = new Bun.Glob("command/**/*.md")

From e1fbf1f18e3f6535d557436fd486a7eff30c2068 Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 02:49:55 -0800
Subject: [PATCH 21/60] feat(app): redesign create project dialog with separate
 create and clone tabs

---
 .../src/components/dialog-create-project.tsx  | 366 ++++++++++++++++--
 1 file changed, 332 insertions(+), 34 deletions(-)

diff --git a/packages/app/src/components/dialog-create-project.tsx b/packages/app/src/components/dialog-create-project.tsx
index f743824cc69..ee8b0ef9a71 100644
--- a/packages/app/src/components/dialog-create-project.tsx
+++ b/packages/app/src/components/dialog-create-project.tsx
@@ -23,6 +23,34 @@ interface DirectoryInfo {
   isExistingProject: boolean
 }
 
+// Helper to validate project name (no path separators, no traversal)
+function validateProjectName(name: string): string | undefined {
+  if (!name.trim()) return "Project name is required"
+  if (name.includes("/") || name.includes("\\")) return "Project name cannot contain path separators"
+  if (name === "." || name === "..") return "Invalid project name"
+  if (name.includes("..")) return "Project name cannot contain path traversal"
+  return undefined
+}
+
+// Helper to derive folder name from repo URL
+function deriveFolderNameFromRepo(repoUrl: string): string {
+  if (!repoUrl.trim()) return ""
+  // Remove trailing slashes, .git suffix, and get the last path segment
+  const cleaned = repoUrl.trim().replace(/\/+$/, "").replace(/\.git$/, "")
+  const parts = cleaned.split("/")
+  const lastPart = parts[parts.length - 1] || ""
+  // Remove any remaining path separators from the derived name
+  return lastPart.replace(/[/\\]/g, "")
+}
+
+// Helper to compute resolved path
+function computeResolvedPath(parentDir: string, projectName: string): string {
+  if (!parentDir || !projectName.trim()) return ""
+  // Normalize parent dir (remove trailing slash)
+  const normalizedParent = parentDir.replace(/\/+$/, "")
+  return `${normalizedParent}/${projectName.trim()}`
+}
+
 export const DialogCreateProject: Component = () => {
   const dialog = useDialog()
   const globalSDK = useGlobalSDK()
@@ -31,19 +59,61 @@ export const DialogCreateProject: Component = () => {
   const platform = usePlatform()
   const sync = useGlobalSync()
 
-  const [activeTab, setActiveTab] = createSignal<"create" | "existing">("existing")
+  const [activeTab, setActiveTab] = createSignal<"existing" | "create" | "clone">("existing")
   const [selectedDir, setSelectedDir] = createSignal<DirectoryInfo | null>(null)
 
   const [store, setStore] = createStore({
-    path: "",
-    repo: "",
-    degit: false,
+    // Common
     error: undefined as string | undefined,
     loading: false,
+    // Create New flow
+    createParentDir: "",
+    createProjectName: "",
+    // Clone flow
+    cloneRepoUrl: "",
+    cloneParentDir: "",
+    cloneProjectName: "", // Optional, derived from repo if empty
+    cloneDegit: false,
   })
 
   const homedir = createMemo(() => sync.data.path.home || "~")
 
+  // Computed resolved paths
+  const createResolvedPath = createMemo(() => computeResolvedPath(store.createParentDir, store.createProjectName))
+
+  const cloneDerivedName = createMemo(() => {
+    if (store.cloneProjectName.trim()) return store.cloneProjectName.trim()
+    return deriveFolderNameFromRepo(store.cloneRepoUrl)
+  })
+
+  const cloneResolvedPath = createMemo(() => computeResolvedPath(store.cloneParentDir, cloneDerivedName()))
+
+  // Validation for Create New
+  const createNameError = createMemo(() => validateProjectName(store.createProjectName))
+  const createPathError = createMemo(() => {
+    const path = createResolvedPath()
+    if (!path) return undefined
+    if (!path.startsWith("/") && !path.startsWith("~")) return "Path must be absolute"
+    return undefined
+  })
+
+  // Validation for Clone
+  const cloneRepoError = createMemo(() => {
+    if (!store.cloneRepoUrl.trim()) return "Repository URL is required"
+    return undefined
+  })
+  const cloneNameError = createMemo(() => {
+    const name = cloneDerivedName()
+    if (!name) return "Project name is required (enter manually or provide valid repo URL)"
+    return validateProjectName(name)
+  })
+  const clonePathError = createMemo(() => {
+    const path = cloneResolvedPath()
+    if (!path) return undefined
+    if (!path.startsWith("/") && !path.startsWith("~")) return "Path must be absolute"
+    return undefined
+  })
+
   // Fetch directories for browsing - returns a function for the List component
   async function fetchDirectories(query: string): Promise<DirectoryInfo[]> {
     const result = await globalSDK.client.project.browse({
@@ -62,14 +132,25 @@ export const DialogCreateProject: Component = () => {
   async function handleCreateSubmit(e: SubmitEvent) {
     e.preventDefault()
 
-    const path = store.path?.trim()
-    if (!path) {
-      setStore("error", "Project path is required")
+    // Validate
+    const nameError = createNameError()
+    if (nameError) {
+      setStore("error", nameError)
+      return
+    }
+    if (!store.createParentDir) {
+      setStore("error", "Parent directory is required")
+      return
+    }
+    const pathError = createPathError()
+    if (pathError) {
+      setStore("error", pathError)
       return
     }
 
-    if (!path.startsWith("/") && !path.startsWith("~/")) {
-      setStore("error", "Path must be absolute (start with / or ~)")
+    const resolvedPath = createResolvedPath()
+    if (!resolvedPath) {
+      setStore("error", "Could not resolve project path")
       return
     }
 
@@ -78,9 +159,8 @@ export const DialogCreateProject: Component = () => {
 
     try {
       const result = await globalSDK.client.project.create({
-        path,
-        repo: store.repo.trim() || undefined,
-        degit: store.degit,
+        path: resolvedPath,
+        name: store.createProjectName.trim(),
       })
 
       if (result.error) {
@@ -109,6 +189,73 @@ export const DialogCreateProject: Component = () => {
     }
   }
 
+  async function handleCloneSubmit(e: SubmitEvent) {
+    e.preventDefault()
+
+    // Validate
+    const repoError = cloneRepoError()
+    if (repoError) {
+      setStore("error", repoError)
+      return
+    }
+    if (!store.cloneParentDir) {
+      setStore("error", "Parent directory is required")
+      return
+    }
+    const nameError = cloneNameError()
+    if (nameError) {
+      setStore("error", nameError)
+      return
+    }
+    const pathError = clonePathError()
+    if (pathError) {
+      setStore("error", pathError)
+      return
+    }
+
+    const resolvedPath = cloneResolvedPath()
+    if (!resolvedPath) {
+      setStore("error", "Could not resolve project path")
+      return
+    }
+
+    setStore("error", undefined)
+    setStore("loading", true)
+
+    try {
+      const result = await globalSDK.client.project.create({
+        path: resolvedPath,
+        repo: store.cloneRepoUrl.trim(),
+        degit: store.cloneDegit,
+        name: cloneDerivedName(),
+      })
+
+      if (result.error) {
+        const errorMessage = (result.error as { message?: string }).message || "Failed to clone repository"
+        setStore("error", errorMessage)
+        setStore("loading", false)
+        return
+      }
+
+      const { project, created } = result.data!
+      dialog.close()
+      openProject(project.worktree)
+
+      showToast({
+        variant: "success",
+        icon: "circle-check",
+        title: created ? "Repository cloned" : "Project added",
+        description: created
+          ? `Cloned to ${project.worktree.replace(homedir(), "~")}`
+          : `Added ${project.worktree.replace(homedir(), "~")}`,
+      })
+    } catch (e: unknown) {
+      const errorMessage = e instanceof Error ? e.message : "Failed to clone repository"
+      setStore("error", errorMessage)
+      setStore("loading", false)
+    }
+  }
+
   async function handleAddExisting(dir?: DirectoryInfo | null) {
     const directory = dir ?? selectedDir()
     if (!directory) return
@@ -144,7 +291,7 @@ export const DialogCreateProject: Component = () => {
     }
   }
 
-  async function handleBrowse() {
+  async function handleBrowseExisting() {
     const result = await platform.openDirectoryPickerDialog?.({
       title: "Select folder to add as project",
       multiple: false,
@@ -177,6 +324,26 @@ export const DialogCreateProject: Component = () => {
     }
   }
 
+  async function handleBrowseCreateParent() {
+    const result = await platform.openDirectoryPickerDialog?.({
+      title: "Select parent directory for new project",
+      multiple: false,
+    })
+    if (result && typeof result === "string") {
+      setStore("createParentDir", result)
+    }
+  }
+
+  async function handleBrowseCloneParent() {
+    const result = await platform.openDirectoryPickerDialog?.({
+      title: "Select parent directory for cloned repository",
+      multiple: false,
+    })
+    if (result && typeof result === "string") {
+      setStore("cloneParentDir", result)
+    }
+  }
+
   function handleSelect(dir: DirectoryInfo | undefined) {
     if (!dir) return
     if (dir.isExistingProject) {
@@ -210,6 +377,14 @@ export const DialogCreateProject: Component = () => {
             <Icon name="plus" />
             Create New
           </Button>
+          <Button
+            variant={activeTab() === "clone" ? "secondary" : "ghost"}
+            class="flex-1 justify-center"
+            onClick={() => setActiveTab("clone")}
+          >
+            <Icon name="github" />
+            Git Clone
+          </Button>
         </div>
 
         {/* Add Existing tab content */}
@@ -253,7 +428,7 @@ export const DialogCreateProject: Component = () => {
 
             {/* Browse button */}
             <Show when={platform.openDirectoryPickerDialog}>
-              <Button variant="ghost" onClick={handleBrowse} class="justify-start">
+              <Button variant="ghost" onClick={handleBrowseExisting} class="justify-start">
                 <Icon name="folder" />
                 Browse filesystem...
               </Button>
@@ -275,49 +450,172 @@ export const DialogCreateProject: Component = () => {
         <Show when={activeTab() === "create"}>
           <form onSubmit={handleCreateSubmit} class="flex flex-col gap-4">
             <div class="text-14-regular text-text-base">
-              Enter the full path where you want to create your new project. A new directory will be created and
+              Select a parent directory and enter a name for your new project. A new folder will be created and
               initialized as a git repository.
             </div>
+
+            {/* Parent directory picker */}
+            <div class="flex flex-col gap-2">
+              <label class="text-14-medium text-text-strong">Parent directory</label>
+              <div class="flex gap-2">
+                <TextField
+                  class="flex-1"
+                  type="text"
+                  placeholder="~/projects"
+                  name="createParentDir"
+                  value={store.createParentDir}
+                  onChange={(value) => setStore("createParentDir", value)}
+                />
+                <Show when={platform.openDirectoryPickerDialog}>
+                  <Button type="button" variant="secondary" onClick={handleBrowseCreateParent}>
+                    <Icon name="folder" />
+                    Browse
+                  </Button>
+                </Show>
+              </div>
+            </div>
+
+            {/* Project name */}
             <TextField
               autofocus={activeTab() === "create"}
               type="text"
-              label="Project path"
-              placeholder="~/projects/my-new-app"
-              name="path"
-              value={store.path}
-              onChange={(value) => setStore("path", value)}
-              validationState={store.error && activeTab() === "create" ? "invalid" : undefined}
-              error={activeTab() === "create" ? store.error : undefined}
+              label="Project name"
+              placeholder="my-new-app"
+              name="createProjectName"
+              value={store.createProjectName}
+              onChange={(value) => setStore("createProjectName", value)}
+              validationState={createNameError() ? "invalid" : undefined}
+              error={createNameError()}
             />
+
+            {/* Resolved path preview */}
+            <Show when={createResolvedPath()}>
+              <div class="flex flex-col gap-1">
+                <label class="text-12-regular text-text-weak">Will create at:</label>
+                <div class="text-14-regular text-text-base font-mono bg-surface-base px-3 py-2 rounded">
+                  {createResolvedPath().replace(homedir(), "~")}
+                </div>
+              </div>
+            </Show>
+
+            <Show when={store.error && activeTab() === "create"}>
+              <div class="text-14-regular text-red-500">{store.error}</div>
+            </Show>
+
+            <div class="flex gap-3 justify-end pt-2">
+              <Button variant="ghost" onClick={() => dialog.close()} disabled={store.loading}>
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={store.loading || !store.createParentDir || !store.createProjectName || !!createNameError()}
+              >
+                {store.loading ? (
+                  <span class="flex items-center gap-2">
+                    <Spinner class="size-4" />
+                    Creating...
+                  </span>
+                ) : (
+                  "Create Project"
+                )}
+              </Button>
+            </div>
+          </form>
+        </Show>
+
+        {/* Git Clone tab content */}
+        <Show when={activeTab() === "clone"}>
+          <form onSubmit={handleCloneSubmit} class="flex flex-col gap-4">
+            <div class="text-14-regular text-text-base">
+              Clone a git repository into a new project folder.
+            </div>
+
+            {/* Repository URL */}
             <TextField
+              autofocus={activeTab() === "clone"}
               type="text"
-              label="Git repository URL (optional)"
+              label="Repository URL"
               placeholder="https://github.com/user/repo"
-              name="repo"
-              value={store.repo}
-              onChange={(value) => setStore("repo", value)}
+              name="cloneRepoUrl"
+              value={store.cloneRepoUrl}
+              onChange={(value) => setStore("cloneRepoUrl", value)}
             />
+
+            {/* Parent directory picker */}
+            <div class="flex flex-col gap-2">
+              <label class="text-14-medium text-text-strong">Parent directory</label>
+              <div class="flex gap-2">
+                <TextField
+                  class="flex-1"
+                  type="text"
+                  placeholder="~/projects"
+                  name="cloneParentDir"
+                  value={store.cloneParentDir}
+                  onChange={(value) => setStore("cloneParentDir", value)}
+                />
+                <Show when={platform.openDirectoryPickerDialog}>
+                  <Button type="button" variant="secondary" onClick={handleBrowseCloneParent}>
+                    <Icon name="folder" />
+                    Browse
+                  </Button>
+                </Show>
+              </div>
+            </div>
+
+            {/* Project name (optional, derived from repo) */}
+            <TextField
+              type="text"
+              label="Project name (optional)"
+              placeholder={deriveFolderNameFromRepo(store.cloneRepoUrl) || "Derived from repo URL"}
+              name="cloneProjectName"
+              value={store.cloneProjectName}
+              onChange={(value) => setStore("cloneProjectName", value)}
+              validationState={store.cloneProjectName.trim() && cloneNameError() ? "invalid" : undefined}
+              error={store.cloneProjectName.trim() ? cloneNameError() : undefined}
+            />
+
+            {/* Resolved path preview */}
+            <Show when={cloneResolvedPath()}>
+              <div class="flex flex-col gap-1">
+                <label class="text-12-regular text-text-weak">Will clone to:</label>
+                <div class="text-14-regular text-text-base font-mono bg-surface-base px-3 py-2 rounded">
+                  {cloneResolvedPath().replace(homedir(), "~")}
+                </div>
+              </div>
+            </Show>
+
+            {/* Degit toggle */}
             <div class="flex items-center gap-2">
-              <Switch
-                checked={store.degit}
-                onChange={(checked) => setStore("degit", checked)}
-                disabled={!store.repo.trim()}
-              >
+              <Switch checked={store.cloneDegit} onChange={(checked) => setStore("cloneDegit", checked)}>
                 Degit (remove .git history after cloning)
               </Switch>
             </div>
+
+            <Show when={store.error && activeTab() === "clone"}>
+              <div class="text-14-regular text-red-500">{store.error}</div>
+            </Show>
+
             <div class="flex gap-3 justify-end pt-2">
               <Button variant="ghost" onClick={() => dialog.close()} disabled={store.loading}>
                 Cancel
               </Button>
-              <Button type="submit" disabled={store.loading}>
+              <Button
+                type="submit"
+                disabled={
+                  store.loading ||
+                  !store.cloneRepoUrl.trim() ||
+                  !store.cloneParentDir ||
+                  !cloneDerivedName() ||
+                  !!cloneNameError()
+                }
+              >
                 {store.loading ? (
                   <span class="flex items-center gap-2">
                     <Spinner class="size-4" />
-                    Creating...
+                    Cloning...
                   </span>
                 ) : (
-                  "Create Project"
+                  "Clone Repository"
                 )}
               </Button>
             </div>

From 8f0671e7d0a1431a8b6f37444c02334da6a19039 Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 02:50:03 -0800
Subject: [PATCH 22/60] test: add tests for dependency install caching, project
 create, and session filtering

---
 packages/opencode/test/config/config.test.ts  |  64 +++++++++++
 .../opencode/test/project/project.test.ts     | 106 ++++++++++++++++++
 .../opencode/test/session/session.test.ts     |  71 ++++++++++++
 3 files changed, 241 insertions(+)

diff --git a/packages/opencode/test/config/config.test.ts b/packages/opencode/test/config/config.test.ts
index 0bc1bb5616c..2d3b148acc2 100644
--- a/packages/opencode/test/config/config.test.ts
+++ b/packages/opencode/test/config/config.test.ts
@@ -692,3 +692,67 @@ test("compaction config can disable both auto and prune", async () => {
     },
   })
 })
+
+// Issue 210: Test that .opencode directories are processed for dependencies
+test("processes .opencode directory without errors in local dev mode", async () => {
+  await using tmp = await tmpdir({
+    init: async (dir) => {
+      // Create a .opencode directory with a tool
+      const opencodeDir = path.join(dir, ".opencode")
+      await fs.mkdir(opencodeDir, { recursive: true })
+      const toolDir = path.join(opencodeDir, "tool")
+      await fs.mkdir(toolDir, { recursive: true })
+
+      // Create a basic tool file (won't actually load without deps, but tests config processing)
+      await Bun.write(
+        path.join(toolDir, "test.ts"),
+        `export const tool = { name: "test", description: "test tool" }`
+      )
+    },
+  })
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      // Config loading should not throw even when processing .opencode directories
+      const config = await Config.get()
+      expect(config).toBeDefined()
+      
+      // Verify the .opencode directory is in the list of processed directories
+      const dirs = await Config.directories()
+      expect(dirs.some((d: string) => d.endsWith(".opencode"))).toBe(true)
+    },
+  })
+})
+
+test(".opencode directory gets package.json and gitignore created", async () => {
+  await using tmp = await tmpdir({
+    init: async (dir) => {
+      const opencodeDir = path.join(dir, ".opencode")
+      await fs.mkdir(opencodeDir, { recursive: true })
+    },
+  })
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      await Config.get()
+      
+      const opencodeDir = path.join(tmp.path, ".opencode")
+      
+      // Verify package.json was created
+      const pkgPath = path.join(opencodeDir, "package.json")
+      const pkgExists = await Bun.file(pkgPath).exists()
+      expect(pkgExists).toBe(true)
+      
+      // Verify .gitignore was created
+      const gitignorePath = path.join(opencodeDir, ".gitignore")
+      const gitignoreExists = await Bun.file(gitignorePath).exists()
+      expect(gitignoreExists).toBe(true)
+      
+      // Verify .gitignore contains necessary entries
+      const gitignoreContent = await Bun.file(gitignorePath).text()
+      expect(gitignoreContent).toContain("node_modules")
+      expect(gitignoreContent).toContain("package.json")
+      expect(gitignoreContent).toContain("bun.lock")
+    },
+  })
+})
diff --git a/packages/opencode/test/project/project.test.ts b/packages/opencode/test/project/project.test.ts
index 988c49bcc22..ee0f99575cf 100644
--- a/packages/opencode/test/project/project.test.ts
+++ b/packages/opencode/test/project/project.test.ts
@@ -257,6 +257,112 @@ describe("Project.fromDirectory", () => {
   })
 })
 
+describe("Project.create", () => {
+  test("should create project at specified path", async () => {
+    await using tmp = await tmpdir()
+    const projectPath = path.join(tmp.path, "new-project")
+
+    const result = await Project.create({ path: projectPath })
+
+    expect(result.project).toBeDefined()
+    expect(result.created).toBe(true)
+    expect(result.project.worktree).toBe(projectPath)
+
+    // Verify directory was created
+    const stats = await fs.stat(projectPath)
+    expect(stats.isDirectory()).toBe(true)
+
+    // Verify git repo was initialized
+    const gitDir = path.join(projectPath, ".git")
+    const gitExists = await fs.access(gitDir).then(() => true).catch(() => false)
+    expect(gitExists).toBe(true)
+  })
+
+  test("should reject relative paths", async () => {
+    await expect(Project.create({ path: "relative/path" })).rejects.toThrow()
+  })
+
+  test("should expand tilde paths", async () => {
+    // Skip if home directory is not accessible
+    const home = process.env.HOME
+    if (!home) return
+
+    await using tmp = await tmpdir()
+    // Use a temp dir under home for this test
+    const projectName = `opencode-test-${Date.now()}`
+    const projectPath = path.join(home, projectName)
+
+    try {
+      const result = await Project.create({ path: `~/${projectName}` })
+
+      expect(result.project).toBeDefined()
+      expect(result.created).toBe(true)
+      expect(result.project.worktree).toBe(projectPath)
+    } finally {
+      // Cleanup
+      await fs.rm(projectPath, { recursive: true, force: true }).catch(() => {})
+    }
+  })
+
+  test("should clone repository when repo URL provided", async () => {
+    // Create a source repo to clone from
+    await using sourceRepo = await tmpdir({ git: true })
+    await using tmp = await tmpdir()
+    const projectPath = path.join(tmp.path, "cloned-repo")
+
+    const result = await Project.create({
+      path: projectPath,
+      repo: sourceRepo.path, // Use local git repo as source
+    })
+
+    expect(result.project).toBeDefined()
+    expect(result.created).toBe(true)
+  })
+
+  test("should set custom name when provided", async () => {
+    await using tmp = await tmpdir()
+    const projectPath = path.join(tmp.path, "named-project")
+    const customName = "My Custom Project"
+
+    const result = await Project.create({
+      path: projectPath,
+      name: customName,
+    })
+
+    expect(result.project).toBeDefined()
+    expect(result.project.name).toBe(customName)
+  })
+
+  test("should handle existing directory without git", async () => {
+    await using tmp = await tmpdir()
+    const projectPath = path.join(tmp.path, "existing-dir")
+
+    // Create directory with a file
+    await fs.mkdir(projectPath, { recursive: true })
+    await fs.writeFile(path.join(projectPath, "README.md"), "# Test")
+
+    const result = await Project.create({ path: projectPath })
+
+    expect(result.project).toBeDefined()
+    expect(result.created).toBe(true)
+
+    // Verify git was initialized
+    const gitDir = path.join(projectPath, ".git")
+    const gitExists = await fs.access(gitDir).then(() => true).catch(() => false)
+    expect(gitExists).toBe(true)
+  })
+
+  test("should add existing git repository without creating", async () => {
+    await using tmp = await tmpdir({ git: true })
+
+    const result = await Project.create({ path: tmp.path })
+
+    expect(result.project).toBeDefined()
+    expect(result.created).toBe(false) // Existing repo, not newly created
+    expect(result.project.worktree).toBe(tmp.path)
+  })
+})
+
 describe("Project.discover", () => {
   test("should discover favicon.png in root", async () => {
     await using tmp = await tmpdir({ git: true })
diff --git a/packages/opencode/test/session/session.test.ts b/packages/opencode/test/session/session.test.ts
index 219cef12713..fa137efb1f0 100644
--- a/packages/opencode/test/session/session.test.ts
+++ b/packages/opencode/test/session/session.test.ts
@@ -4,6 +4,8 @@ import { Session } from "../../src/session"
 import { Bus } from "../../src/bus"
 import { Log } from "../../src/util/log"
 import { Instance } from "../../src/project/instance"
+import { Server } from "../../src/server/server"
+import { pipe, filter, sortBy } from "remeda"
 
 const projectRoot = path.join(__dirname, "../..")
 Log.init({ print: false })
@@ -69,3 +71,72 @@ describe("session.started event", () => {
     })
   })
 })
+
+describe("session.list", () => {
+  test("archived sessions should be excluded from the list API endpoint", async () => {
+    await Instance.provide({
+      directory: projectRoot,
+      fn: async () => {
+        // Create two sessions
+        const session1 = await Session.create({})
+        const session2 = await Session.create({})
+
+        // Archive session1
+        await Session.update(session1.id, (s) => {
+          s.time.archived = Date.now()
+        })
+
+        // Verify Session.list returns both (no filtering at source)
+        const allSessions = await Array.fromAsync(Session.list())
+        const ids = allSessions.map((s) => s.id)
+        expect(ids).toContain(session1.id)
+        expect(ids).toContain(session2.id)
+
+        // Verify that filtering works as expected (simulating endpoint behavior)
+        const filteredSessions = pipe(
+          allSessions,
+          filter((s) => !s.time.archived),
+          sortBy((s) => s.time.updated),
+        )
+        const filteredIds = filteredSessions.map((s) => s.id)
+        expect(filteredIds).not.toContain(session1.id)
+        expect(filteredIds).toContain(session2.id)
+
+        // Cleanup
+        await Session.remove(session1.id)
+        await Session.remove(session2.id)
+      },
+    })
+  })
+
+  test("archived sessions should be removed from list when archiving via update", async () => {
+    await Instance.provide({
+      directory: projectRoot,
+      fn: async () => {
+        const session = await Session.create({})
+
+        // Verify session is in the filtered list initially
+        let sessions = pipe(
+          await Array.fromAsync(Session.list()),
+          filter((s) => !s.time.archived),
+        )
+        expect(sessions.map((s) => s.id)).toContain(session.id)
+
+        // Archive the session
+        await Session.update(session.id, (s) => {
+          s.time.archived = Date.now()
+        })
+
+        // Verify session is no longer in the filtered list
+        sessions = pipe(
+          await Array.fromAsync(Session.list()),
+          filter((s) => !s.time.archived),
+        )
+        expect(sessions.map((s) => s.id)).not.toContain(session.id)
+
+        // Cleanup
+        await Session.remove(session.id)
+      },
+    })
+  })
+})

From 4a9ff9412e8daedc36319bd2ee8ca62d5aa52be7 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 28 Dec 2025 05:12:32 -0600
Subject: [PATCH 23/60] feat(desktop): themes

---
 packages/app/index.html                       |  12 +-
 packages/app/script/inject-theme-preload.ts   |  18 +
 packages/app/src/app.tsx                      |  87 +-
 packages/app/src/components/terminal.tsx      |  67 +-
 packages/app/src/pages/layout.tsx             | 173 +++-
 packages/app/vite.js                          |  18 +
 packages/desktop/index.html                   |  12 +-
 packages/ui/package.json                      |   3 +
 packages/ui/script/generate-preload.ts        |  16 +
 packages/ui/src/components/message-part.css   |   3 +
 packages/ui/src/components/session-turn.css   |   2 +
 packages/ui/src/styles/theme.css              | 979 ------------------
 packages/ui/src/theme/color.ts                | 267 +++++
 packages/ui/src/theme/context.tsx             | 280 +++++
 packages/ui/src/theme/default-themes.ts       |  35 +
 .../ui/src/theme/desktop-theme.schema.json    | 104 ++
 packages/ui/src/theme/index.ts                |  71 ++
 packages/ui/src/theme/loader.ts               | 213 ++++
 packages/ui/src/theme/preload.ts              | 115 ++
 packages/ui/src/theme/resolve.ts              | 365 +++++++
 packages/ui/src/theme/themes/ayu.json         | 131 +++
 packages/ui/src/theme/themes/catppuccin.json  | 131 +++
 packages/ui/src/theme/themes/dracula.json     | 131 +++
 packages/ui/src/theme/themes/monokai.json     | 131 +++
 packages/ui/src/theme/themes/nord.json        | 131 +++
 packages/ui/src/theme/themes/oc-1.json        | 535 ++++++++++
 packages/ui/src/theme/themes/onedarkpro.json  | 131 +++
 .../ui/src/theme/themes/shadesofpurple.json   | 131 +++
 packages/ui/src/theme/themes/solarized.json   | 131 +++
 packages/ui/src/theme/themes/tokyonight.json  | 155 +++
 packages/ui/src/theme/types.ts                |  94 ++
 31 files changed, 3573 insertions(+), 1099 deletions(-)
 create mode 100644 packages/app/script/inject-theme-preload.ts
 create mode 100644 packages/ui/script/generate-preload.ts
 create mode 100644 packages/ui/src/theme/color.ts
 create mode 100644 packages/ui/src/theme/context.tsx
 create mode 100644 packages/ui/src/theme/default-themes.ts
 create mode 100644 packages/ui/src/theme/desktop-theme.schema.json
 create mode 100644 packages/ui/src/theme/index.ts
 create mode 100644 packages/ui/src/theme/loader.ts
 create mode 100644 packages/ui/src/theme/preload.ts
 create mode 100644 packages/ui/src/theme/resolve.ts
 create mode 100644 packages/ui/src/theme/themes/ayu.json
 create mode 100644 packages/ui/src/theme/themes/catppuccin.json
 create mode 100644 packages/ui/src/theme/themes/dracula.json
 create mode 100644 packages/ui/src/theme/themes/monokai.json
 create mode 100644 packages/ui/src/theme/themes/nord.json
 create mode 100644 packages/ui/src/theme/themes/oc-1.json
 create mode 100644 packages/ui/src/theme/themes/onedarkpro.json
 create mode 100644 packages/ui/src/theme/themes/shadesofpurple.json
 create mode 100644 packages/ui/src/theme/themes/solarized.json
 create mode 100644 packages/ui/src/theme/themes/tokyonight.json
 create mode 100644 packages/ui/src/theme/types.ts

diff --git a/packages/app/index.html b/packages/app/index.html
index 2c3a0eabd40..4f003c05bc7 100644
--- a/packages/app/index.html
+++ b/packages/app/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" style="background-color: var(--background-base)">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -13,14 +13,12 @@
     <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
     <meta property="og:image" content="/social-share.png" />
     <meta property="twitter:image" content="/social-share.png" />
+    <!-- Theme preload script - injected by Vite plugin to avoid FOUC -->
+    <script id="oc-theme-preload-script">
+      /* THEME_PRELOAD_SCRIPT */
+    </script>
   </head>
   <body class="antialiased overscroll-none text-12-regular overflow-hidden">
-    <script>
-      ;(function () {
-        const savedTheme = localStorage.getItem("theme") || "oc-1"
-        document.documentElement.setAttribute("data-theme", savedTheme)
-      })()
-    </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" class="flex flex-col h-screen"></div>
     <script src="/src/entry.tsx" type="module"></script>
diff --git a/packages/app/script/inject-theme-preload.ts b/packages/app/script/inject-theme-preload.ts
new file mode 100644
index 00000000000..511ab7a3b5b
--- /dev/null
+++ b/packages/app/script/inject-theme-preload.ts
@@ -0,0 +1,18 @@
+/**
+ * Injects the theme preload script into index.html.
+ * Run this as part of the build process.
+ */
+
+import { generatePreloadScript } from "@opencode-ai/ui/theme"
+
+const htmlPath = new URL("../index.html", import.meta.url).pathname
+const html = await Bun.file(htmlPath).text()
+
+const script = generatePreloadScript()
+const injectedHtml = html.replace(
+  /<script id="oc-theme-preload-script">\s*\/\* THEME_PRELOAD_SCRIPT \*\/\s*<\/script>/,
+  `<script id="oc-theme-preload-script">${script}</script>`,
+)
+
+await Bun.write(htmlPath, injectedHtml)
+console.log("Injected theme preload script into index.html")
diff --git a/packages/app/src/app.tsx b/packages/app/src/app.tsx
index de8fcf7d124..bf5ba956622 100644
--- a/packages/app/src/app.tsx
+++ b/packages/app/src/app.tsx
@@ -8,6 +8,7 @@ import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
 import { CodeComponentProvider } from "@opencode-ai/ui/context/code"
 import { Diff } from "@opencode-ai/ui/diff"
 import { Code } from "@opencode-ai/ui/code"
+import { ThemeProvider } from "@opencode-ai/ui/theme"
 import { GlobalSyncProvider } from "@/context/global-sync"
 import { LayoutProvider } from "@/context/layout"
 import { GlobalSDKProvider } from "@/context/global-sdk"
@@ -45,48 +46,50 @@ export function App() {
   return (
     <MetaProvider>
       <Font />
-      <ErrorBoundary fallback={(error) => <ErrorPage error={error} />}>
-        <DialogProvider>
-          <MarkedProvider>
-            <DiffComponentProvider component={Diff}>
-              <CodeComponentProvider component={Code}>
-                <GlobalSDKProvider url={url}>
-                  <GlobalSyncProvider>
-                    <LayoutProvider>
-                      <NotificationProvider>
-                        <Router
-                          root={(props) => (
-                            <CommandProvider>
-                              <Layout>{props.children}</Layout>
-                            </CommandProvider>
-                          )}
-                        >
-                          <Route path="/" component={Home} />
-                          <Route path="/:dir" component={DirectoryLayout}>
-                            <Route path="/" component={() => <Navigate href="session" />} />
-                            <Route
-                              path="/session/:id?"
-                              component={(p) => (
-                                <Show when={p.params.id || true} keyed>
-                                  <TerminalProvider>
-                                    <PromptProvider>
-                                      <Session />
-                                    </PromptProvider>
-                                  </TerminalProvider>
-                                </Show>
-                              )}
-                            />
-                          </Route>
-                        </Router>
-                      </NotificationProvider>
-                    </LayoutProvider>
-                  </GlobalSyncProvider>
-                </GlobalSDKProvider>
-              </CodeComponentProvider>
-            </DiffComponentProvider>
-          </MarkedProvider>
-        </DialogProvider>
-      </ErrorBoundary>
+      <ThemeProvider>
+        <ErrorBoundary fallback={(error) => <ErrorPage error={error} />}>
+          <DialogProvider>
+            <MarkedProvider>
+              <DiffComponentProvider component={Diff}>
+                <CodeComponentProvider component={Code}>
+                  <GlobalSDKProvider url={url}>
+                    <GlobalSyncProvider>
+                      <LayoutProvider>
+                        <NotificationProvider>
+                          <Router
+                            root={(props) => (
+                              <CommandProvider>
+                                <Layout>{props.children}</Layout>
+                              </CommandProvider>
+                            )}
+                          >
+                            <Route path="/" component={Home} />
+                            <Route path="/:dir" component={DirectoryLayout}>
+                              <Route path="/" component={() => <Navigate href="session" />} />
+                              <Route
+                                path="/session/:id?"
+                                component={(p) => (
+                                  <Show when={p.params.id || true} keyed>
+                                    <TerminalProvider>
+                                      <PromptProvider>
+                                        <Session />
+                                      </PromptProvider>
+                                    </TerminalProvider>
+                                  </Show>
+                                )}
+                              />
+                            </Route>
+                          </Router>
+                        </NotificationProvider>
+                      </LayoutProvider>
+                    </GlobalSyncProvider>
+                  </GlobalSDKProvider>
+                </CodeComponentProvider>
+              </DiffComponentProvider>
+            </MarkedProvider>
+          </DialogProvider>
+        </ErrorBoundary>
+      </ThemeProvider>
     </MetaProvider>
   )
 }
diff --git a/packages/app/src/components/terminal.tsx b/packages/app/src/components/terminal.tsx
index 1d6bab2a44a..03251fe5f5e 100644
--- a/packages/app/src/components/terminal.tsx
+++ b/packages/app/src/components/terminal.tsx
@@ -1,9 +1,9 @@
 import { Ghostty, Terminal as Term, FitAddon } from "ghostty-web"
-import { ComponentProps, onCleanup, onMount, splitProps } from "solid-js"
+import { ComponentProps, createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js"
 import { useSDK } from "@/context/sdk"
 import { SerializeAddon } from "@/addons/serialize"
 import { LocalPTY } from "@/context/terminal"
-import { usePrefersDark } from "@solid-primitives/media"
+import { resolveThemeVariant, useTheme } from "@opencode-ai/ui/theme"
 
 export interface TerminalProps extends ComponentProps<"div"> {
   pty: LocalPTY
@@ -12,8 +12,28 @@ export interface TerminalProps extends ComponentProps<"div"> {
   onConnectError?: (error: unknown) => void
 }
 
+type TerminalColors = {
+  background: string
+  foreground: string
+  cursor: string
+}
+
+const DEFAULT_TERMINAL_COLORS: Record<"light" | "dark", TerminalColors> = {
+  light: {
+    background: "#fcfcfc",
+    foreground: "#211e1e",
+    cursor: "#211e1e",
+  },
+  dark: {
+    background: "#191515",
+    foreground: "#d4d4d4",
+    cursor: "#d4d4d4",
+  },
+}
+
 export const Terminal = (props: TerminalProps) => {
   const sdk = useSDK()
+  const theme = useTheme()
   let container!: HTMLDivElement
   const [local, others] = splitProps(props, ["pty", "class", "classList", "onConnectError"])
   let ws: WebSocket
@@ -22,7 +42,35 @@ export const Terminal = (props: TerminalProps) => {
   let serializeAddon: SerializeAddon
   let fitAddon: FitAddon
   let handleResize: () => void
-  const prefersDark = usePrefersDark()
+
+  const getTerminalColors = (): TerminalColors => {
+    const mode = theme.mode()
+    const fallback = DEFAULT_TERMINAL_COLORS[mode]
+    const currentTheme = theme.themes()[theme.themeId()]
+    if (!currentTheme) return fallback
+    const variant = mode === "dark" ? currentTheme.dark : currentTheme.light
+    if (!variant?.seeds) return fallback
+    const resolved = resolveThemeVariant(variant, mode === "dark")
+    const text = resolved["text-base"] ?? fallback.foreground
+    const background = resolved["background-stronger"] ?? fallback.background
+    return {
+      background,
+      foreground: text,
+      cursor: text,
+    }
+  }
+
+  const [terminalColors, setTerminalColors] = createSignal<TerminalColors>(getTerminalColors())
+
+  createEffect(() => {
+    const colors = getTerminalColors()
+    setTerminalColors(colors)
+    if (!term) return
+    const setOption = (term as unknown as { setOption?: (key: string, value: TerminalColors) => void }).setOption
+    if (!setOption) return
+    setOption("theme", colors)
+  })
+
   const focusTerminal = () => term?.focus()
   const copySelection = () => {
     if (!term || !term.hasSelection()) return false
@@ -62,17 +110,7 @@ export const Terminal = (props: TerminalProps) => {
       fontSize: 14,
       fontFamily: "IBM Plex Mono, monospace",
       allowTransparency: true,
-      theme: prefersDark()
-        ? {
-            background: "#191515",
-            foreground: "#d4d4d4",
-            cursor: "#d4d4d4",
-          }
-        : {
-            background: "#fcfcfc",
-            foreground: "#211e1e",
-            cursor: "#211e1e",
-          },
+      theme: terminalColors(),
       scrollback: 10_000,
       ghostty,
     })
@@ -192,6 +230,7 @@ export const Terminal = (props: TerminalProps) => {
       ref={container}
       data-component="terminal"
       data-prevent-autofocus
+      style={{ "background-color": terminalColors().background }}
       classList={{
         ...(local.classList ?? {}),
         "size-full px-6 py-3 font-mono": true,
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 0b4e040b749..08b3401871f 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -47,6 +47,7 @@ import { useNotification } from "@/context/notification"
 import { Binary } from "@opencode-ai/util/binary"
 import { Header } from "@/components/header"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
 import { DialogSelectProvider } from "@/components/dialog-select-provider"
 import { useCommand } from "@/context/command"
 import { ConstrainDragXAxis } from "@/utils/solid-dnd"
@@ -89,6 +90,41 @@ export default function Layout(props: ParentProps) {
   const providers = useProviders()
   const dialog = useDialog()
   const command = useCommand()
+  const theme = useTheme()
+  const availableThemeEntries = createMemo(() => Object.entries(theme.themes()))
+  const colorSchemeOrder: ColorScheme[] = ["system", "light", "dark"]
+  const colorSchemeLabel: Record<ColorScheme, string> = {
+    system: "System",
+    light: "Light",
+    dark: "Dark",
+  }
+
+  function cycleTheme(direction = 1) {
+    const ids = availableThemeEntries().map(([id]) => id)
+    if (ids.length === 0) return
+    const currentIndex = ids.indexOf(theme.themeId())
+    const nextIndex = currentIndex === -1 ? 0 : (currentIndex + direction + ids.length) % ids.length
+    const nextThemeId = ids[nextIndex]
+    theme.setTheme(nextThemeId)
+    const nextTheme = theme.themes()[nextThemeId]
+    showToast({
+      title: "Theme switched",
+      description: nextTheme?.name ?? nextThemeId,
+    })
+  }
+
+  function cycleColorScheme(direction = 1) {
+    const current = theme.colorScheme()
+    const currentIndex = colorSchemeOrder.indexOf(current)
+    const nextIndex =
+      currentIndex === -1 ? 0 : (currentIndex + direction + colorSchemeOrder.length) % colorSchemeOrder.length
+    const next = colorSchemeOrder[nextIndex]
+    theme.setColorScheme(next)
+    showToast({
+      title: "Color scheme",
+      description: colorSchemeLabel[next],
+    })
+  }
 
   onMount(async () => {
     if (platform.checkUpdate && platform.update && platform.restart) {
@@ -286,57 +322,94 @@ export default function Layout(props: ParentProps) {
     }
   }
 
-  command.register(() => [
-    {
-      id: "sidebar.toggle",
-      title: "Toggle sidebar",
-      category: "View",
-      keybind: "mod+b",
-      onSelect: () => layout.sidebar.toggle(),
-    },
-    ...(platform.openDirectoryPickerDialog
-      ? [
-          {
-            id: "project.open",
-            title: "Open project",
-            category: "Project",
-            keybind: "mod+o",
-            onSelect: () => chooseProject(),
-          },
-        ]
-      : []),
-    {
-      id: "provider.connect",
-      title: "Connect provider",
-      category: "Provider",
-      onSelect: () => connectProvider(),
-    },
-    {
-      id: "session.previous",
-      title: "Previous session",
-      category: "Session",
-      keybind: "alt+arrowup",
-      onSelect: () => navigateSessionByOffset(-1),
-    },
-    {
-      id: "session.next",
-      title: "Next session",
-      category: "Session",
-      keybind: "alt+arrowdown",
-      onSelect: () => navigateSessionByOffset(1),
-    },
-    {
-      id: "session.archive",
-      title: "Archive session",
-      category: "Session",
-      keybind: "mod+shift+backspace",
-      disabled: !params.dir || !params.id,
-      onSelect: () => {
-        const session = currentSessions().find((s) => s.id === params.id)
-        if (session) archiveSession(session)
+  command.register(() => {
+    const commands = [
+      {
+        id: "sidebar.toggle",
+        title: "Toggle sidebar",
+        category: "View",
+        keybind: "mod+b",
+        onSelect: () => layout.sidebar.toggle(),
+      },
+      ...(platform.openDirectoryPickerDialog
+        ? [
+            {
+              id: "project.open",
+              title: "Open project",
+              category: "Project",
+              keybind: "mod+o",
+              onSelect: () => chooseProject(),
+            },
+          ]
+        : []),
+      {
+        id: "provider.connect",
+        title: "Connect provider",
+        category: "Provider",
+        onSelect: () => connectProvider(),
+      },
+      {
+        id: "session.previous",
+        title: "Previous session",
+        category: "Session",
+        keybind: "alt+arrowup",
+        onSelect: () => navigateSessionByOffset(-1),
       },
-    },
-  ])
+      {
+        id: "session.next",
+        title: "Next session",
+        category: "Session",
+        keybind: "alt+arrowdown",
+        onSelect: () => navigateSessionByOffset(1),
+      },
+      {
+        id: "session.archive",
+        title: "Archive session",
+        category: "Session",
+        keybind: "mod+shift+backspace",
+        disabled: !params.dir || !params.id,
+        onSelect: () => {
+          const session = currentSessions().find((s) => s.id === params.id)
+          if (session) archiveSession(session)
+        },
+      },
+      {
+        id: "theme.cycle",
+        title: "Cycle theme",
+        category: "Theme",
+        keybind: "mod+shift+t",
+        onSelect: () => cycleTheme(1),
+      },
+    ]
+
+    for (const [id, definition] of availableThemeEntries()) {
+      commands.push({
+        id: `theme.set.${id}`,
+        title: `Use theme: ${definition.name ?? id}`,
+        category: "Theme",
+        onSelect: () => theme.setTheme(id),
+      })
+    }
+
+    commands.push({
+      id: "theme.scheme.cycle",
+      title: "Cycle color scheme",
+      category: "Theme",
+      keybind: "mod+shift+s",
+      onSelect: () => cycleColorScheme(1),
+    })
+
+    for (const scheme of colorSchemeOrder) {
+      commands.push({
+        id: `theme.scheme.${scheme}`,
+        title: `Use color scheme: ${colorSchemeLabel[scheme]}`,
+        category: "Theme",
+        onSelect: () => theme.setColorScheme(scheme),
+      })
+    }
+
+    return commands
+  })
 
   function connectProvider() {
     dialog.show(() => <DialogSelectProvider />)
diff --git a/packages/app/vite.js b/packages/app/vite.js
index 6b8fd61376c..5ab36883653 100644
--- a/packages/app/vite.js
+++ b/packages/app/vite.js
@@ -1,6 +1,23 @@
 import solidPlugin from "vite-plugin-solid"
 import tailwindcss from "@tailwindcss/vite"
 import { fileURLToPath } from "url"
+import { generatePreloadScript } from "@opencode-ai/ui/theme"
+
+/**
+ * Vite plugin that injects the theme preload script into index.html.
+ * This ensures the theme is applied before the page renders, avoiding FOUC.
+ * @type {import("vite").Plugin}
+ */
+const themePreloadPlugin = {
+  name: "opencode-desktop:theme-preload",
+  transformIndexHtml(html) {
+    const script = generatePreloadScript()
+    return html.replace(
+      /<script id="oc-theme-preload-script">\s*\/\* THEME_PRELOAD_SCRIPT \*\/\s*<\/script>/,
+      `<script id="oc-theme-preload-script">${script}</script>`,
+    )
+  },
+}
 
 /**
  * @type {import("vite").PluginOption}
@@ -21,6 +38,7 @@ export default [
       }
     },
   },
+  themePreloadPlugin,
   tailwindcss(),
   solidPlugin(),
 ]
diff --git a/packages/desktop/index.html b/packages/desktop/index.html
index faeb1a1fde0..ea656068ca9 100644
--- a/packages/desktop/index.html
+++ b/packages/desktop/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" style="background-color: var(--background-base)">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -13,14 +13,12 @@
     <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
     <meta property="og:image" content="/social-share.png" />
     <meta property="twitter:image" content="/social-share.png" />
+    <!-- Theme preload script - injected by Vite plugin to avoid FOUC -->
+    <script id="oc-theme-preload-script">
+      /* THEME_PRELOAD_SCRIPT */
+    </script>
   </head>
   <body class="antialiased overscroll-none text-12-regular overflow-hidden">
-    <script>
-      ;(function () {
-        const savedTheme = localStorage.getItem("theme") || "oc-1"
-        document.documentElement.setAttribute("data-theme", savedTheme)
-      })()
-    </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" class="flex flex-col h-screen"></div>
     <script src="/src/index.tsx" type="module"></script>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index bb6adb0fb76..0aa059cd974 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -11,6 +11,9 @@
     "./context/*": "./src/context/*.tsx",
     "./styles": "./src/styles/index.css",
     "./styles/tailwind": "./src/styles/tailwind/index.css",
+    "./theme": "./src/theme/index.ts",
+    "./theme/*": "./src/theme/*.ts",
+    "./theme/context": "./src/theme/context.tsx",
     "./icons/provider": "./src/components/provider-icons/types.ts",
     "./icons/file-type": "./src/components/file-icons/types.ts",
     "./fonts/*": "./src/assets/fonts/*",
diff --git a/packages/ui/script/generate-preload.ts b/packages/ui/script/generate-preload.ts
new file mode 100644
index 00000000000..180b30564ef
--- /dev/null
+++ b/packages/ui/script/generate-preload.ts
@@ -0,0 +1,16 @@
+/**
+ * Generates the theme preload script content.
+ * Run this to get the script that should be embedded in index.html.
+ */
+
+import { generatePreloadScript, generatePreloadScriptFormatted } from "../src/theme/preload"
+
+const formatted = process.argv.includes("--formatted")
+
+if (formatted) {
+  console.log("<script>")
+  console.log(generatePreloadScriptFormatted())
+  console.log("</script>")
+} else {
+  console.log("<script>" + generatePreloadScript() + "</script>")
+}
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index a8a9e6a31ed..92323876ca2 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -137,6 +137,9 @@
 
   [data-slot="message-part-tool-error-message"] {
     color: var(--text-on-critical-weak);
+    max-height: 240px;
+    overflow-y: auto;
+    word-break: break-word;
   }
 }
 
diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index 1748feab963..599116d28a8 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/packages/ui/src/components/session-turn.css
@@ -343,6 +343,8 @@
 
   .error-card {
     color: var(--text-on-critical-base);
+    max-height: 240px;
+    overflow-y: auto;
   }
 
   [data-slot="session-turn-collapsible-content-inner"] {
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 6584a5e6487..e8de4a06cb5 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -68,987 +68,8 @@
   color-scheme: light;
   --text-mix-blend-mode: multiply;
 
-  /* OC-1-light */
-  --background-base: #f8f7f7;
-  --background-weak: var(--smoke-light-3);
-  --background-strong: var(--smoke-light-1);
-  --background-stronger: #fcfcfc;
-  --surface-base: var(--smoke-light-alpha-2);
-  --base: var(--smoke-light-alpha-2);
-  --surface-base-hover: #0500000f;
-  --surface-base-active: var(--smoke-light-alpha-3);
-  --surface-base-interactive-active: var(--cobalt-light-alpha-3);
-  --base2: var(--smoke-light-alpha-2);
-  --base3: var(--smoke-light-alpha-2);
-  --surface-inset-base: var(--smoke-light-alpha-2);
-  --surface-inset-base-hover: var(--smoke-light-alpha-3);
-  --surface-inset-strong: #1f000017;
-  --surface-inset-strong-hover: #1f000017;
-  --surface-raised-base: var(--smoke-light-alpha-1);
-  --surface-float-base: var(--smoke-dark-1);
-  --surface-float-base-hover: var(--smoke-dark-2);
-  --surface-raised-base-hover: var(--smoke-light-alpha-2);
-  --surface-raised-base-active: var(--smoke-light-alpha-3);
-  --surface-raised-strong: var(--smoke-light-1);
-  --surface-raised-strong-hover: var(--white);
-  --surface-raised-stronger: var(--white);
-  --surface-raised-stronger-hover: var(--white);
-  --surface-weak: var(--smoke-light-alpha-3);
-  --surface-weaker: var(--smoke-light-alpha-4);
-  --surface-strong: #ffffff;
-  --surface-raised-stronger-non-alpha: var(--white);
-  --surface-brand-base: var(--yuzu-light-9);
-  --surface-brand-hover: var(--yuzu-light-10);
-  --surface-interactive-base: var(--cobalt-light-3);
-  --surface-interactive-hover: var(--cobalt-light-4);
-  --surface-interactive-weak: var(--cobalt-light-2);
-  --surface-interactive-weak-hover: var(--cobalt-light-3);
-  --surface-success-base: var(--apple-light-3);
-  --surface-success-weak: var(--apple-light-2);
-  --surface-success-strong: var(--apple-light-9);
-  --surface-warning-base: var(--solaris-light-3);
-  --surface-warning-weak: var(--solaris-light-2);
-  --surface-warning-strong: var(--solaris-light-9);
-  --surface-critical-base: var(--ember-light-3);
-  --surface-critical-weak: var(--ember-light-2);
-  --surface-critical-strong: var(--ember-light-9);
-  --surface-info-base: var(--lilac-light-3);
-  --surface-info-weak: var(--lilac-light-2);
-  --surface-info-strong: var(--lilac-light-9);
-  --surface-diff-unchanged-base: #ffffff00;
-  --surface-diff-skip-base: var(--smoke-light-2);
-  --surface-diff-hidden-base: var(--blue-light-3);
-  --surface-diff-hidden-weak: var(--blue-light-2);
-  --surface-diff-hidden-weaker: var(--blue-light-1);
-  --surface-diff-hidden-strong: var(--blue-light-5);
-  --surface-diff-hidden-stronger: var(--blue-light-9);
-  --surface-diff-add-base: #dafbe0;
-  --surface-diff-add-weak: var(--mint-light-2);
-  --surface-diff-add-weaker: var(--mint-light-1);
-  --surface-diff-add-strong: var(--mint-light-5);
-  --surface-diff-add-stronger: var(--mint-light-9);
-  --surface-diff-delete-base: var(--ember-light-3);
-  --surface-diff-delete-weak: var(--ember-light-2);
-  --surface-diff-delete-weaker: var(--ember-light-1);
-  --surface-diff-delete-strong: var(--ember-light-6);
-  --surface-diff-delete-stronger: var(--ember-light-9);
-  --input-base: var(--smoke-light-1);
-  --input-hover: var(--smoke-light-2);
-  --input-active: var(--cobalt-light-1);
-  --input-selected: var(--cobalt-light-4);
-  --input-focus: var(--cobalt-light-1);
-  --input-disabled: var(--smoke-light-4);
-  --text-base: var(--smoke-light-11);
-  --text-weak: var(--smoke-light-9);
-  --text-weaker: var(--smoke-light-8);
-  --text-strong: var(--smoke-light-12);
-  --text-invert-base: var(--smoke-dark-alpha-11);
-  --text-invert-weak: var(--smoke-dark-alpha-9);
-  --text-invert-weaker: var(--smoke-dark-alpha-8);
-  --text-invert-strong: var(--smoke-dark-alpha-12);
-  --text-interactive-base: var(--cobalt-light-9);
-  --text-on-brand-base: var(--smoke-light-alpha-11);
-  --text-on-interactive-base: var(--smoke-light-1);
-  --text-on-interactive-weak: var(--smoke-dark-alpha-11);
-  --text-on-success-base: var(--apple-light-10);
-  --text-on-critical-base: var(--ember-light-10);
-  --text-on-critical-weak: var(--ember-light-8);
-  --text-on-critical-strong: var(--ember-light-12);
-  --text-on-warning-base: var(--smoke-dark-alpha-11);
-  --text-on-info-base: var(--smoke-dark-alpha-11);
-  --text-diff-add-base: var(--mint-light-11);
-  --text-diff-delete-base: var(--ember-light-10);
-  --text-diff-delete-strong: var(--ember-light-12);
-  --text-diff-add-strong: var(--mint-light-12);
-  --text-on-info-weak: var(--smoke-dark-alpha-9);
-  --text-on-info-strong: var(--smoke-dark-alpha-12);
-  --text-on-warning-weak: var(--smoke-dark-alpha-9);
-  --text-on-warning-strong: var(--smoke-dark-alpha-12);
-  --text-on-success-weak: var(--apple-light-6);
-  --text-on-success-strong: var(--apple-light-12);
-  --text-on-brand-weak: var(--smoke-light-alpha-9);
-  --text-on-brand-weaker: var(--smoke-light-alpha-8);
-  --text-on-brand-strong: var(--smoke-light-alpha-12);
-  --button-secondary-base: #fdfcfc;
-  --button-secondary-hover: #faf9f9;
-  --border-base: var(--smoke-light-alpha-7);
-  --border-hover: var(--smoke-light-alpha-8);
-  --border-active: var(--smoke-light-alpha-9);
-  --border-selected: var(--cobalt-light-alpha-9);
-  --border-disabled: var(--smoke-light-alpha-8);
-  --border-focus: var(--smoke-light-alpha-9);
-  --border-weak-base: var(--smoke-light-alpha-5);
-  --border-strong-base: var(--smoke-light-alpha-7);
-  --border-strong-hover: var(--smoke-light-alpha-8);
-  --border-strong-active: var(--smoke-light-alpha-7);
-  --border-strong-selected: var(--cobalt-light-alpha-6);
-  --border-strong-disabled: var(--smoke-light-alpha-6);
-  --border-strong-focus: var(--smoke-light-alpha-7);
-  --border-weak-hover: var(--smoke-light-alpha-6);
-  --border-weak-active: var(--smoke-light-alpha-7);
-  --border-weak-selected: var(--cobalt-light-alpha-5);
-  --border-weak-disabled: var(--smoke-light-alpha-6);
-  --border-weak-focus: var(--smoke-light-alpha-7);
-  --border-interactive-base: var(--cobalt-light-7);
-  --border-interactive-hover: var(--cobalt-light-8);
-  --border-interactive-active: var(--cobalt-light-9);
-  --border-interactive-selected: var(--cobalt-light-9);
-  --border-interactive-disabled: var(--smoke-light-8);
-  --border-interactive-focus: var(--cobalt-light-9);
-  --border-success-base: var(--apple-light-6);
-  --border-success-hover: var(--apple-light-7);
-  --border-success-selected: var(--apple-light-9);
-  --border-warning-base: var(--solaris-light-6);
-  --border-warning-hover: var(--solaris-light-7);
-  --border-warning-selected: var(--solaris-light-9);
-  --border-critical-base: var(--ember-light-6);
-  --border-critical-hover: var(--ember-light-7);
-  --border-critical-selected: var(--ember-light-9);
-  --border-info-base: var(--lilac-light-6);
-  --border-info-hover: var(--lilac-light-7);
-  --border-info-selected: var(--lilac-light-9);
-  --icon-base: var(--smoke-light-9);
-  --icon-hover: var(--smoke-light-11);
-  --icon-active: var(--smoke-light-12);
-  --icon-selected: var(--smoke-light-12);
-  --icon-disabled: var(--smoke-light-8);
-  --icon-focus: var(--smoke-light-12);
-  --icon-invert-base: #ffffff;
-  --icon-weak-base: var(--smoke-light-7);
-  --icon-weak-hover: var(--smoke-light-8);
-  --icon-weak-active: var(--smoke-light-9);
-  --icon-weak-selected: var(--smoke-light-10);
-  --icon-weak-disabled: var(--smoke-light-6);
-  --icon-weak-focus: var(--smoke-light-9);
-  --icon-strong-base: var(--smoke-light-12);
-  --icon-strong-hover: #151313;
-  --icon-strong-active: #020202;
-  --icon-strong-selected: #020202;
-  --icon-strong-disabled: var(--smoke-light-8);
-  --icon-strong-focus: #020202;
-  --icon-brand-base: var(--smoke-light-12);
-  --icon-interactive-base: var(--cobalt-light-9);
-  --icon-success-base: var(--apple-light-7);
-  --icon-success-hover: var(--apple-light-8);
-  --icon-success-active: var(--apple-light-11);
-  --icon-warning-base: var(--amber-light-7);
-  --icon-warning-hover: var(--amber-light-8);
-  --icon-warning-active: var(--amber-light-11);
-  --icon-critical-base: var(--ember-light-10);
-  --icon-critical-hover: var(--ember-light-11);
-  --icon-critical-active: var(--ember-light-12);
-  --icon-info-base: var(--lilac-light-7);
-  --icon-info-hover: var(--lilac-light-8);
-  --icon-info-active: var(--lilac-light-11);
-  --icon-on-brand-base: var(--smoke-light-alpha-11);
-  --icon-on-brand-hover: var(--smoke-light-alpha-12);
-  --icon-on-brand-selected: var(--smoke-light-alpha-12);
-  --icon-on-interactive-base: var(--smoke-light-1);
-  --icon-agent-plan-base: var(--purple-light-9);
-  --icon-agent-docs-base: var(--amber-light-9);
-  --icon-agent-ask-base: var(--cyan-light-9);
-  --icon-agent-build-base: var(--cobalt-light-9);
-  --icon-on-success-base: var(--apple-light-alpha-9);
-  --icon-on-success-hover: var(--apple-light-alpha-10);
-  --icon-on-success-selected: var(--apple-light-alpha-11);
-  --icon-on-warning-base: var(--amber-lightalpha-9);
-  --icon-on-warning-hover: var(--amber-lightalpha-10);
-  --icon-on-warning-selected: var(--amber-lightalpha-11);
-  --icon-on-critical-base: var(--ember-light-alpha-9);
-  --icon-on-critical-hover: var(--ember-light-alpha-10);
-  --icon-on-critical-selected: var(--ember-light-alpha-11);
-  --icon-on-info-base: var(--lilac-light-9);
-  --icon-on-info-hover: var(--lilac-light-alpha-10);
-  --icon-on-info-selected: var(--lilac-light-alpha-11);
-  --icon-diff-add-base: var(--mint-light-11);
-  --icon-diff-add-hover: var(--mint-light-12);
-  --icon-diff-add-active: var(--mint-light-12);
-  --icon-diff-delete-base: var(--ember-light-10);
-  --icon-diff-delete-hover: var(--ember-light-11);
-  --syntax-comment: var(--text-weak);
-  --syntax-regexp: var(--text-base);
-  --syntax-string: #006656;
-  --syntax-keyword: var(--text-weak);
-  --syntax-primitive: #fb4804;
-  --syntax-operator: var(--text-base);
-  --syntax-variable: var(--text-strong);
-  --syntax-property: #ed6dc8;
-  --syntax-type: #596600;
-  --syntax-constant: #007b80;
-  --syntax-punctuation: var(--text-base);
-  --syntax-object: var(--text-strong);
-  --syntax-success: var(--apple-light-10);
-  --syntax-warning: var(--amber-light-10);
-  --syntax-critical: var(--ember-light-10);
-  --syntax-info: #0092a8;
-  --syntax-diff-add: var(--mint-light-11);
-  --syntax-diff-delete: var(--ember-light-11);
-  --syntax-diff-unknown: #ff0000;
-  --markdown-heading: #d68c27;
-  --markdown-text: #1a1a1a;
-  --markdown-link: #3b7dd8;
-  --markdown-link-text: #318795;
-  --markdown-code: #3d9a57;
-  --markdown-block-quote: #b0851f;
-  --markdown-emph: #b0851f;
-  --markdown-strong: #d68c27;
-  --markdown-horizontal-rule: #8a8a8a;
-  --markdown-list-item: #3b7dd8;
-  --markdown-list-enumeration: #318795;
-  --markdown-image: #3b7dd8;
-  --markdown-image-text: #318795;
-  --markdown-code-block: #1a1a1a;
-  --border-color: #ffffff;
-  --border-weaker-base: var(--smoke-light-alpha-3);
-  --border-weaker-hover: var(--smoke-light-alpha-4);
-  --border-weaker-active: var(--smoke-light-alpha-6);
-  --border-weaker-selected: var(--cobalt-light-alpha-4);
-  --border-weaker-disabled: var(--smoke-light-alpha-2);
-  --border-weaker-focus: var(--smoke-light-alpha-6);
-  --button-ghost-hover: var(--smoke-light-alpha-2);
-  --button-ghost-hover2: var(--smoke-light-alpha-3);
-  --avatar-background-pink: #feeef8;
-  --avatar-background-mint: #e1fbf4;
-  --avatar-background-orange: #fff1e7;
-  --avatar-background-purple: #f9f1fe;
-  --avatar-background-cyan: #e7f9fb;
-  --avatar-background-lime: #eefadc;
-  --avatar-text-pink: #cd1d8d;
-  --avatar-text-mint: #147d6f;
-  --avatar-text-orange: #ed5f00;
-  --avatar-text-purple: #8445bc;
-  --avatar-text-cyan: #0894b3;
-  --avatar-text-lime: #5d770d;
-
   @media (prefers-color-scheme: dark) {
     color-scheme: dark;
     --text-mix-blend-mode: plus-lighter;
-
-    /* OC-1-dark */
-    --background-base: var(--smoke-dark-1);
-    --background-weak: #1c1717;
-    --background-strong: #151313;
-    --background-stronger: #191515;
-    --surface-base: var(--smoke-dark-alpha-2);
-    --base: var(--smoke-dark-alpha-2);
-    --surface-base-hover: #e0b7b716;
-    --surface-base-active: var(--smoke-dark-alpha-3);
-    --surface-base-interactive-active: var(--cobalt-dark-alpha-2);
-    --base2: var(--smoke-dark-alpha-2);
-    --base3: var(--smoke-dark-alpha-2);
-    --surface-inset-base: #0e0b0b7f;
-    --surface-inset-base-hover: #0e0b0b7f;
-    --surface-inset-strong: #060505cc;
-    --surface-inset-strong-hover: #060505cc;
-    --surface-raised-base: var(--smoke-dark-alpha-3);
-    --surface-float-base: var(--smoke-dark-1);
-    --surface-float-base-hover: var(--smoke-dark-2);
-    --surface-raised-base-hover: var(--smoke-dark-alpha-4);
-    --surface-raised-base-active: var(--smoke-dark-alpha-5);
-    --surface-raised-strong: var(--smoke-dark-alpha-4);
-    --surface-raised-strong-hover: var(--smoke-dark-alpha-6);
-    --surface-raised-stronger: var(--smoke-dark-alpha-6);
-    --surface-raised-stronger-hover: var(--smoke-dark-alpha-7);
-    --surface-weak: var(--smoke-dark-alpha-4);
-    --surface-weaker: var(--smoke-dark-alpha-5);
-    --surface-strong: var(--smoke-dark-alpha-7);
-    --surface-raised-stronger-non-alpha: var(--smoke-dark-3);
-    --surface-brand-base: var(--yuzu-light-9);
-    --surface-brand-hover: var(--yuzu-light-10);
-    --surface-interactive-base: var(--cobalt-light-3);
-    --surface-interactive-hover: var(--cobalt-light-4);
-    --surface-interactive-weak: var(--cobalt-light-2);
-    --surface-interactive-weak-hover: var(--cobalt-light-3);
-    --surface-success-base: var(--apple-light-3);
-    --surface-success-weak: var(--apple-light-2);
-    --surface-success-strong: var(--apple-light-9);
-    --surface-warning-base: var(--solaris-light-3);
-    --surface-warning-weak: var(--solaris-light-2);
-    --surface-warning-strong: var(--solaris-light-9);
-    --surface-critical-base: var(--ember-dark-3);
-    --surface-critical-weak: var(--ember-dark-2);
-    --surface-critical-strong: var(--ember-dark-9);
-    --surface-info-base: var(--lilac-light-3);
-    --surface-info-weak: var(--lilac-light-2);
-    --surface-info-strong: var(--lilac-light-9);
-    --surface-diff-unchanged-base: var(--smoke-dark-1);
-    --surface-diff-skip-base: var(--smoke-dark-alpha-1);
-    --surface-diff-hidden-base: var(--blue-dark-2);
-    --surface-diff-hidden-weak: var(--blue-dark-1);
-    --surface-diff-hidden-weaker: var(--blue-dark-3);
-    --surface-diff-hidden-strong: var(--blue-dark-5);
-    --surface-diff-hidden-stronger: var(--blue-dark-11);
-    --surface-diff-add-base: var(--mint-dark-3);
-    --surface-diff-add-weak: var(--mint-dark-4);
-    --surface-diff-add-weaker: var(--mint-dark-3);
-    --surface-diff-add-strong: var(--mint-dark-5);
-    --surface-diff-add-stronger: var(--mint-dark-11);
-    --surface-diff-delete-base: var(--ember-dark-3);
-    --surface-diff-delete-weak: var(--ember-dark-4);
-    --surface-diff-delete-weaker: var(--ember-dark-3);
-    --surface-diff-delete-strong: var(--ember-dark-5);
-    --surface-diff-delete-stronger: var(--ember-dark-11);
-    --input-base: var(--smoke-dark-2);
-    --input-hover: var(--smoke-dark-2);
-    --input-active: var(--cobalt-dark-1);
-    --input-selected: var(--cobalt-dark-2);
-    --input-focus: var(--cobalt-dark-1);
-    --input-disabled: var(--smoke-dark-4);
-    --text-base: var(--smoke-dark-alpha-11);
-    --text-weak: var(--smoke-dark-alpha-9);
-    --text-weaker: var(--smoke-dark-alpha-8);
-    --text-strong: var(--smoke-dark-alpha-12);
-    --text-invert-base: var(--smoke-dark-alpha-11);
-    --text-invert-weak: var(--smoke-dark-alpha-9);
-    --text-invert-weaker: var(--smoke-dark-alpha-8);
-    --text-invert-strong: var(--smoke-dark-alpha-12);
-    --text-interactive-base: var(--cobalt-dark-11);
-    --text-on-brand-base: var(--smoke-dark-alpha-11);
-    --text-on-interactive-base: var(--smoke-dark-12);
-    --text-on-interactive-weak: var(--smoke-dark-alpha-11);
-    --text-on-success-base: var(--apple-dark-9);
-    --text-on-critical-base: var(--ember-dark-9);
-    --text-on-critical-weak: var(--ember-dark-8);
-    --text-on-critical-strong: var(--ember-dark-12);
-    --text-on-warning-base: var(--smoke-dark-alpha-11);
-    --text-on-info-base: var(--smoke-dark-alpha-11);
-    --text-diff-add-base: var(--mint-dark-11);
-    --text-diff-delete-base: var(--ember-dark-9);
-    --text-diff-delete-strong: var(--ember-dark-12);
-    --text-diff-add-strong: var(--mint-dark-8);
-    --text-on-info-weak: var(--smoke-dark-alpha-9);
-    --text-on-info-strong: var(--smoke-dark-alpha-12);
-    --text-on-warning-weak: var(--smoke-dark-alpha-9);
-    --text-on-warning-strong: var(--smoke-dark-alpha-12);
-    --text-on-success-weak: var(--apple-dark-8);
-    --text-on-success-strong: var(--apple-dark-12);
-    --text-on-brand-weak: var(--smoke-dark-alpha-9);
-    --text-on-brand-weaker: var(--smoke-dark-alpha-8);
-    --text-on-brand-strong: var(--smoke-dark-alpha-12);
-    --button-secondary-base: #231f1f;
-    --button-secondary-hover: #2a2727;
-    --border-base: var(--smoke-dark-alpha-7);
-    --border-hover: var(--smoke-dark-alpha-8);
-    --border-active: var(--smoke-dark-alpha-9);
-    --border-selected: var(--cobalt-dark-alpha-11);
-    --border-disabled: var(--smoke-dark-alpha-8);
-    --border-focus: var(--smoke-dark-alpha-9);
-    --border-weak-base: var(--smoke-dark-alpha-6);
-    --border-strong-base: var(--smoke-dark-alpha-8);
-    --border-strong-hover: var(--smoke-dark-alpha-7);
-    --border-strong-active: var(--smoke-dark-alpha-8);
-    --border-strong-selected: var(--cobalt-dark-alpha-6);
-    --border-strong-disabled: var(--smoke-dark-alpha-6);
-    --border-strong-focus: var(--smoke-dark-alpha-8);
-    --border-weak-hover: var(--smoke-dark-alpha-7);
-    --border-weak-active: var(--smoke-dark-alpha-8);
-    --border-weak-selected: var(--cobalt-dark-alpha-6);
-    --border-weak-disabled: var(--smoke-dark-alpha-6);
-    --border-weak-focus: var(--smoke-dark-alpha-8);
-    --border-interactive-base: var(--cobalt-light-7);
-    --border-interactive-hover: var(--cobalt-light-8);
-    --border-interactive-active: var(--cobalt-light-9);
-    --border-interactive-selected: var(--cobalt-light-9);
-    --border-interactive-disabled: var(--smoke-light-8);
-    --border-interactive-focus: var(--cobalt-light-9);
-    --border-success-base: var(--apple-light-6);
-    --border-success-hover: var(--apple-light-7);
-    --border-success-selected: var(--apple-light-9);
-    --border-warning-base: var(--solaris-light-6);
-    --border-warning-hover: var(--solaris-light-7);
-    --border-warning-selected: var(--solaris-light-9);
-    --border-critical-base: var(--ember-dark-5);
-    --border-critical-hover: var(--ember-dark-7);
-    --border-critical-selected: var(--ember-dark-9);
-    --border-info-base: var(--lilac-light-6);
-    --border-info-hover: var(--lilac-light-7);
-    --border-info-selected: var(--lilac-light-9);
-    --icon-base: var(--smoke-dark-9);
-    --icon-hover: var(--smoke-dark-10);
-    --icon-active: var(--smoke-dark-11);
-    --icon-selected: var(--smoke-dark-12);
-    --icon-disabled: var(--smoke-dark-7);
-    --icon-focus: var(--smoke-dark-12);
-    --icon-invert-base: var(--smoke-dark-1);
-    --icon-weak-base: var(--smoke-dark-6);
-    --icon-weak-hover: var(--smoke-light-7);
-    --icon-weak-active: var(--smoke-light-8);
-    --icon-weak-selected: var(--smoke-light-9);
-    --icon-weak-disabled: var(--smoke-light-4);
-    --icon-weak-focus: var(--smoke-light-9);
-    --icon-strong-base: var(--smoke-dark-12);
-    --icon-strong-hover: #f6f3f3;
-    --icon-strong-active: #fcfcfc;
-    --icon-strong-selected: #fdfcfc;
-    --icon-strong-disabled: var(--smoke-dark-8);
-    --icon-strong-focus: #fdfcfc;
-    --icon-brand-base: var(--white);
-    --icon-interactive-base: var(--cobalt-dark-9);
-    --icon-success-base: var(--apple-dark-7);
-    --icon-success-hover: var(--apple-dark-8);
-    --icon-success-active: var(--apple-dark-11);
-    --icon-warning-base: var(--amber-dark-7);
-    --icon-warning-hover: var(--amber-dark-8);
-    --icon-warning-active: var(--amber-dark-11);
-    --icon-critical-base: var(--ember-dark-9);
-    --icon-critical-hover: var(--ember-dark-11);
-    --icon-critical-active: var(--ember-dark-12);
-    --icon-info-base: var(--lilac-dark-7);
-    --icon-info-hover: var(--lilac-dark-8);
-    --icon-info-active: var(--lilac-dark-11);
-    --icon-on-brand-base: var(--smoke-light-alpha-11);
-    --icon-on-brand-hover: var(--smoke-light-alpha-12);
-    --icon-on-brand-selected: var(--smoke-light-alpha-12);
-    --icon-on-interactive-base: var(--smoke-dark-12);
-    --icon-agent-plan-base: var(--purple-dark-9);
-    --icon-agent-docs-base: var(--amber-dark-9);
-    --icon-agent-ask-base: var(--cyan-dark-9);
-    --icon-agent-build-base: var(--cobalt-dark-11);
-    --icon-on-success-base: var(--apple-dark-alpha-9);
-    --icon-on-success-hover: var(--apple-dark-alpha-10);
-    --icon-on-success-selected: var(--apple-dark-alpha-11);
-    --icon-on-warning-base: var(--amber-darkalpha-9);
-    --icon-on-warning-hover: var(--amber-darkalpha-10);
-    --icon-on-warning-selected: var(--amber-darkalpha-11);
-    --icon-on-critical-base: var(--ember-dark-alpha-9);
-    --icon-on-critical-hover: var(--ember-dark-alpha-10);
-    --icon-on-critical-selected: var(--ember-dark-alpha-11);
-    --icon-on-info-base: var(--lilac-dark-9);
-    --icon-on-info-hover: var(--lilac-dark-alpha-10);
-    --icon-on-info-selected: var(--lilac-dark-alpha-11);
-    --icon-diff-add-base: var(--mint-dark-11);
-    --icon-diff-add-hover: var(--mint-dark-10);
-    --icon-diff-add-active: var(--mint-dark-11);
-    --icon-diff-delete-base: var(--ember-dark-9);
-    --icon-diff-delete-hover: var(--ember-dark-10);
-    --syntax-comment: var(--text-weak);
-    --syntax-regexp: var(--text-base);
-    --syntax-string: #00ceb9;
-    --syntax-keyword: var(--text-weak);
-    --syntax-primitive: #ffba92;
-    --syntax-operator: var(--text-weak);
-    --syntax-variable: var(--text-strong);
-    --syntax-property: #ff9ae2;
-    --syntax-type: #ecf58c;
-    --syntax-constant: #93e9f6;
-    --syntax-punctuation: var(--text-weak);
-    --syntax-object: var(--text-strong);
-    --syntax-success: var(--apple-dark-10);
-    --syntax-warning: var(--amber-dark-10);
-    --syntax-critical: var(--ember-dark-10);
-    --syntax-info: #93e9f6;
-    --syntax-diff-add: var(--mint-dark-11);
-    --syntax-diff-delete: var(--ember-dark-11);
-    --syntax-diff-unknown: #ff0000;
-    --markdown-heading: #9d7cd8;
-    --markdown-text: #eeeeee;
-    --markdown-link: #fab283;
-    --markdown-link-text: #56b6c2;
-    --markdown-code: #7fd88f;
-    --markdown-block-quote: #e5c07b;
-    --markdown-emph: #e5c07b;
-    --markdown-strong: #f5a742;
-    --markdown-horizontal-rule: #808080;
-    --markdown-list-item: #fab283;
-    --markdown-list-enumeration: #56b6c2;
-    --markdown-image: #fab283;
-    --markdown-image-text: #56b6c2;
-    --markdown-code-block: #eeeeee;
-    --border-color: #ffffff;
-    --border-weaker-base: var(--smoke-dark-alpha-3);
-    --border-weaker-hover: var(--smoke-dark-alpha-4);
-    --border-weaker-active: var(--smoke-dark-alpha-6);
-    --border-weaker-selected: var(--cobalt-dark-alpha-3);
-    --border-weaker-disabled: var(--smoke-dark-alpha-2);
-    --border-weaker-focus: var(--smoke-dark-alpha-6);
-    --button-ghost-hover: var(--smoke-dark-alpha-2);
-    --button-ghost-hover2: var(--smoke-dark-alpha-3);
-    --avatar-background-pink: #501b3f;
-    --avatar-background-mint: #033a34;
-    --avatar-background-orange: #5f2a06;
-    --avatar-background-purple: #432155;
-    --avatar-background-cyan: #0f3058;
-    --avatar-background-lime: #2b3711;
-    --avatar-text-pink: #e34ba9;
-    --avatar-text-mint: #95f3d9;
-    --avatar-text-orange: #ff802b;
-    --avatar-text-purple: #9d5bd2;
-    --avatar-text-cyan: #369eff;
-    --avatar-text-lime: #c4f042;
-  }
-}
-
-html[data-theme="oc-2-paper"] {
-  /* OC-2-paper */
-  --background-base: #f7f8f8;
-  --background-weak: var(--ink-light-3);
-  --background-strong: var(--ink-light-1);
-  --background-stronger: #fcfcfc;
-  --surface-base: var(--ink-light-alpha-2);
-  --base: var(--ink-light-alpha-2);
-  --surface-base-hover: #0005050f;
-  --surface-base-active: var(--ink-light-alpha-3);
-  --surface-base-interactive-active: var(--cobalt-light-alpha-3);
-  --base2: var(--ink-light-alpha-2);
-  --base3: var(--ink-light-alpha-2);
-  --surface-inset-base: var(--ink-light-alpha-2);
-  --surface-inset-base-hover: var(--ink-light-alpha-3);
-  --surface-inset-strong: #001f1f17;
-  --surface-inset-strong-hover: #001f1f17;
-  --surface-raised-base: var(--ink-light-alpha-1);
-  --surface-float-base: var(--ink-dark-1);
-  --surface-float-base-hover: var(--ink-dark-2);
-  --surface-raised-base-hover: var(--ink-light-alpha-2);
-  --surface-raised-base-active: var(--ink-light-alpha-3);
-  --surface-raised-strong: var(--ink-light-1);
-  --surface-raised-strong-hover: var(--white);
-  --surface-raised-stronger: var(--white);
-  --surface-raised-stronger-hover: var(--white);
-  --surface-weak: var(--ink-light-alpha-3);
-  --surface-weaker: var(--ink-light-alpha-4);
-  --surface-strong: #ffffff;
-  --surface-raised-stronger-non-alpha: var(--white);
-  --surface-brand-base: var(--yuzu-light-9);
-  --surface-brand-hover: var(--yuzu-light-10);
-  --surface-interactive-base: var(--cobalt-light-3);
-  --surface-interactive-hover: var(--cobalt-light-4);
-  --surface-interactive-weak: var(--cobalt-light-2);
-  --surface-interactive-weak-hover: var(--cobalt-light-3);
-  --surface-success-base: var(--apple-light-3);
-  --surface-success-weak: var(--apple-light-2);
-  --surface-success-strong: var(--apple-light-9);
-  --surface-warning-base: var(--solaris-light-3);
-  --surface-warning-weak: var(--solaris-light-2);
-  --surface-warning-strong: var(--solaris-light-9);
-  --surface-critical-base: var(--ember-light-3);
-  --surface-critical-weak: var(--ember-light-2);
-  --surface-critical-strong: var(--ember-light-9);
-  --surface-info-base: var(--lilac-light-3);
-  --surface-info-weak: var(--lilac-light-2);
-  --surface-info-strong: var(--lilac-light-9);
-  --surface-diff-unchanged-base: #ffffff00;
-  --surface-diff-skip-base: var(--ink-light-2);
-  --surface-diff-hidden-base: var(--blue-light-3);
-  --surface-diff-hidden-weak: var(--blue-light-2);
-  --surface-diff-hidden-weaker: var(--blue-light-1);
-  --surface-diff-hidden-strong: var(--blue-light-5);
-  --surface-diff-hidden-stronger: var(--blue-light-9);
-  --surface-diff-add-base: var(--mint-light-3);
-  --surface-diff-add-weak: var(--mint-light-2);
-  --surface-diff-add-weaker: var(--mint-light-1);
-  --surface-diff-add-strong: var(--mint-light-5);
-  --surface-diff-add-stronger: var(--mint-light-9);
-  --surface-diff-delete-base: var(--ember-light-3);
-  --surface-diff-delete-weak: var(--ember-light-2);
-  --surface-diff-delete-weaker: var(--ember-light-1);
-  --surface-diff-delete-strong: var(--ember-light-6);
-  --surface-diff-delete-stronger: var(--ember-light-9);
-  --text-base: var(--ink-light-11);
-  --input-base: var(--ink-light-1);
-  --input-hover: var(--ink-light-2);
-  --input-active: var(--cobalt-light-1);
-  --input-selected: var(--cobalt-light-4);
-  --input-focus: var(--cobalt-light-1);
-  --input-disabled: var(--ink-light-4);
-  --text-weak: var(--ink-light-9);
-  --text-weaker: var(--ink-light-8);
-  --text-strong: var(--ink-light-12);
-  --text-interactive-base: var(--cobalt-light-9);
-  --text-on-brand-base: var(--ink-light-alpha-11);
-  --text-on-interactive-base: var(--ink-light-1);
-  --text-on-interactive-weak: var(--ink-light-alpha-11);
-  --text-on-success-base: var(--apple-light-10);
-  --text-on-critical-base: var(--ember-light-10);
-  --text-on-critical-weak: var(--ember-light-8);
-  --text-on-critical-strong: var(--ember-light-12);
-  --text-on-warning-base: var(--ink-dark-alpha-11);
-  --text-on-info-base: var(--ink-dark-alpha-11);
-  --text-diff-add-base: var(--mint-light-11);
-  --text-diff-delete-base: var(--ember-light-10);
-  --text-diff-delete-strong: var(--ember-light-12);
-  --text-diff-add-strong: var(--mint-light-12);
-  --text-on-info-weak: var(--ink-dark-alpha-9);
-  --text-on-info-strong: var(--ink-dark-alpha-12);
-  --text-on-warning-weak: var(--ink-dark-alpha-9);
-  --text-on-warning-strong: var(--ink-dark-alpha-12);
-  --text-on-success-weak: var(--apple-light-6);
-  --text-on-success-strong: var(--apple-light-12);
-  --text-on-brand-weak: var(--ink-light-alpha-9);
-  --text-on-brand-weaker: var(--ink-light-alpha-8);
-  --text-on-brand-strong: var(--ink-light-alpha-12);
-  --button-secondary-base: #fcfdfd;
-  --button-secondary-hover: #f9fafa;
-  --border-base: var(--ink-light-alpha-7);
-  --border-hover: var(--ink-light-alpha-8);
-  --border-active: var(--ink-light-alpha-9);
-  --border-selected: var(--cobalt-light-alpha-9);
-  --border-disabled: var(--ink-light-alpha-8);
-  --border-focus: var(--ink-light-alpha-9);
-  --border-weak-base: var(--ink-light-alpha-5);
-  --border-strong-base: var(--ink-light-alpha-7);
-  --border-strong-hover: var(--ink-light-alpha-8);
-  --border-strong-active: var(--ink-light-alpha-7);
-  --border-strong-selected: var(--cobalt-light-alpha-6);
-  --border-strong-disabled: var(--ink-light-alpha-6);
-  --border-strong-focus: var(--ink-light-alpha-7);
-  --border-weak-hover: var(--ink-light-alpha-6);
-  --border-weak-active: var(--ink-light-alpha-7);
-  --border-weak-selected: var(--cobalt-light-alpha-5);
-  --border-weak-disabled: var(--ink-light-alpha-6);
-  --border-weak-focus: var(--ink-light-alpha-7);
-  --border-interactive-base: var(--cobalt-light-7);
-  --border-interactive-hover: var(--cobalt-light-8);
-  --border-interactive-active: var(--cobalt-light-9);
-  --border-interactive-selected: var(--cobalt-light-9);
-  --border-interactive-disabled: var(--ink-light-8);
-  --border-interactive-focus: var(--cobalt-light-9);
-  --border-success-base: var(--apple-light-6);
-  --border-success-hover: var(--apple-light-7);
-  --border-success-selected: var(--apple-light-9);
-  --border-warning-base: var(--solaris-light-6);
-  --border-warning-hover: var(--solaris-light-7);
-  --border-warning-selected: var(--solaris-light-9);
-  --border-critical-base: var(--ember-light-6);
-  --border-critical-hover: var(--ember-light-7);
-  --border-critical-selected: var(--ember-light-9);
-  --border-info-base: var(--lilac-light-6);
-  --border-info-hover: var(--lilac-light-7);
-  --border-info-selected: var(--lilac-light-9);
-  --icon-base: var(--ink-light-9);
-  --icon-hover: var(--ink-light-11);
-  --icon-active: var(--ink-light-12);
-  --icon-selected: var(--ink-light-12);
-  --icon-disabled: var(--ink-light-8);
-  --icon-focus: var(--ink-light-12);
-  --icon-invert-base: #ffffff;
-  --icon-weak-base: var(--ink-light-7);
-  --icon-weak-hover: var(--ink-light-8);
-  --icon-weak-active: var(--ink-light-9);
-  --icon-weak-selected: var(--ink-light-10);
-  --icon-weak-disabled: var(--ink-light-6);
-  --icon-weak-focus: var(--ink-light-9);
-  --icon-strong-base: var(--ink-light-12);
-  --icon-strong-hover: #131515;
-  --icon-strong-active: #020202;
-  --icon-strong-selected: #020202;
-  --icon-strong-disabled: var(--ink-light-8);
-  --icon-strong-focus: #020202;
-  --icon-brand-base: var(--ink-light-12);
-  --icon-interactive-base: var(--cobalt-light-9);
-  --icon-success-base: var(--apple-light-7);
-  --icon-success-hover: var(--apple-light-8);
-  --icon-success-active: var(--apple-light-11);
-  --icon-warning-base: var(--amber-light-7);
-  --icon-warning-hover: var(--amber-light-8);
-  --icon-warning-active: var(--amber-light-11);
-  --icon-critical-base: var(--ember-light-10);
-  --icon-critical-hover: var(--ember-light-11);
-  --icon-critical-active: var(--ember-light-12);
-  --icon-info-base: var(--lilac-light-7);
-  --icon-info-hover: var(--lilac-light-8);
-  --icon-info-active: var(--lilac-light-11);
-  --icon-on-brand-base: var(--ink-light-alpha-11);
-  --icon-on-brand-hover: var(--ink-light-alpha-12);
-  --icon-on-brand-selected: var(--ink-light-alpha-12);
-  --icon-on-interactive-base: var(--ink-light-1);
-  --icon-agent-plan-base: var(--purple-light-9);
-  --icon-agent-docs-base: var(--amber-light-9);
-  --icon-agent-ask-base: var(--cyan-light-9);
-  --icon-agent-build-base: var(--cobalt-light-9);
-  --icon-on-success-base: var(--apple-light-alpha-9);
-  --icon-on-success-hover: var(--apple-light-alpha-10);
-  --icon-on-success-selected: var(--apple-light-alpha-11);
-  --icon-on-warning-base: var(--amber-lightalpha-9);
-  --icon-on-warning-hover: var(--amber-lightalpha-10);
-  --icon-on-warning-selected: var(--amber-lightalpha-11);
-  --icon-on-critical-base: var(--ember-light-alpha-9);
-  --icon-on-critical-hover: var(--ember-light-alpha-10);
-  --icon-on-critical-selected: var(--ember-light-alpha-11);
-  --icon-on-info-base: var(--lilac-light-9);
-  --icon-on-info-hover: var(--lilac-light-alpha-10);
-  --icon-on-info-selected: var(--lilac-light-alpha-11);
-  --icon-diff-add-base: var(--mint-light-11);
-  --icon-diff-add-hover: var(--mint-light-12);
-  --icon-diff-add-active: var(--mint-light-12);
-  --icon-diff-delete-base: var(--ember-light-10);
-  --icon-diff-delete-hover: var(--ember-light-11);
-  --syntax-comment: var(--text-weak);
-  --syntax-regexp: var(--text-base);
-  --syntax-string: #007663;
-  --syntax-keyword: var(--text-weak);
-  --syntax-primitive: #fb7f51;
-  --syntax-operator: var(--text-weak);
-  --syntax-variable: var(--text-strong);
-  --syntax-property: #ec6cc8;
-  --syntax-type: #738400;
-  --syntax-constant: #00b2b9;
-  --syntax-punctuation: var(--text-weak);
-  --syntax-object: var(--text-strong);
-  --syntax-success: var(--apple-light-10);
-  --syntax-warning: var(--amber-light-10);
-  --syntax-critical: var(--ember-light-9);
-  --syntax-info: #0091a7;
-  --syntax-diff-add: var(--mint-light-11);
-  --syntax-diff-delete: var(--ember-light-11);
-  --syntax-diff-unknown: #ff0000;
-  --markdown-heading: #d68c27;
-  --markdown-text: #1a1a1a;
-  --markdown-link: #3b7dd8;
-  --markdown-link-text: #318795;
-  --markdown-code: #3d9a57;
-  --markdown-block-quote: #b0851f;
-  --markdown-emph: #b0851f;
-  --markdown-strong: #d68c27;
-  --markdown-horizontal-rule: #8a8a8a;
-  --markdown-list-item: #3b7dd8;
-  --markdown-list-enumeration: #318795;
-  --markdown-image: #3b7dd8;
-  --markdown-image-text: #318795;
-  --markdown-code-block: #1a1a1a;
-  --border-color: #ffffff;
-  --border-weaker-base: var(--ink-light-alpha-3);
-  --border-weaker-hover: var(--ink-light-alpha-4);
-  --border-weaker-active: var(--ink-light-alpha-6);
-  --border-weaker-selected: var(--cobalt-light-alpha-4);
-  --border-weaker-disabled: var(--ink-light-alpha-2);
-  --border-weaker-focus: var(--ink-light-alpha-6);
-  --button-ghost-hover: var(--ink-light-alpha-2);
-  --button-ghost-hover2: var(--ink-light-alpha-3);
-
-  @media (prefers-color-scheme: dark) {
-    --background-base: var(--ink-dark-1);
-    --background-weak: #171c1c;
-    --background-strong: #131515;
-    --background-stronger: #151919;
-    --surface-base: var(--ink-dark-alpha-2);
-    --base: var(--ink-dark-alpha-2);
-    --surface-base-hover: #b8e0e00f;
-    --surface-base-active: var(--ink-dark-alpha-3);
-    --surface-base-interactive-active: var(--cobalt-light-alpha-3);
-    --base2: var(--ink-dark-alpha-2);
-    --base3: var(--ink-dark-alpha-2);
-    --surface-inset-base: #0b0e0e7f;
-    --surface-inset-base-hover: #0b0e0e7f;
-    --surface-inset-strong: #050606cc;
-    --surface-inset-strong-hover: #050606cc;
-    --surface-raised-base: var(--ink-light-alpha-1);
-    --surface-float-base: var(--ink-dark-1);
-    --surface-float-base-hover: var(--ink-dark-2);
-    --surface-raised-base-hover: var(--ink-light-alpha-2);
-    --surface-raised-base-active: var(--ink-light-alpha-3);
-    --surface-raised-strong: var(--ink-light-1);
-    --surface-raised-strong-hover: var(--white);
-    --surface-raised-stronger: var(--white);
-    --surface-raised-stronger-hover: var(--white);
-    --surface-weak: var(--ink-dark-alpha-4);
-    --surface-weaker: var(--ink-dark-alpha-5);
-    --surface-strong: var(--ink-dark-alpha-7);
-    --surface-raised-stronger-non-alpha: var(--white);
-    --surface-brand-base: var(--yuzu-light-9);
-    --surface-brand-hover: var(--yuzu-light-10);
-    --surface-interactive-base: var(--cobalt-light-3);
-    --surface-interactive-hover: var(--cobalt-light-4);
-    --surface-interactive-weak: var(--cobalt-light-2);
-    --surface-interactive-weak-hover: var(--cobalt-light-3);
-    --surface-success-base: var(--apple-light-3);
-    --surface-success-weak: var(--apple-light-2);
-    --surface-success-strong: var(--apple-light-9);
-    --surface-warning-base: var(--solaris-light-3);
-    --surface-warning-weak: var(--solaris-light-2);
-    --surface-warning-strong: var(--solaris-light-9);
-    --surface-critical-base: var(--ember-light-3);
-    --surface-critical-weak: var(--ember-light-2);
-    --surface-critical-strong: var(--ember-light-9);
-    --surface-info-base: var(--lilac-light-3);
-    --surface-info-weak: var(--lilac-light-2);
-    --surface-info-strong: var(--lilac-light-9);
-    --surface-diff-unchanged-base: #ffffff00;
-    --surface-diff-skip-base: var(--ink-light-2);
-    --surface-diff-hidden-base: var(--blue-light-3);
-    --surface-diff-hidden-weak: var(--blue-light-2);
-    --surface-diff-hidden-weaker: var(--blue-light-1);
-    --surface-diff-hidden-strong: var(--blue-light-5);
-    --surface-diff-hidden-stronger: var(--blue-light-9);
-    --surface-diff-add-base: var(--mint-light-3);
-    --surface-diff-add-weak: var(--mint-light-2);
-    --surface-diff-add-weaker: var(--mint-light-1);
-    --surface-diff-add-strong: var(--mint-light-5);
-    --surface-diff-add-stronger: var(--mint-light-9);
-    --surface-diff-delete-base: var(--ember-light-3);
-    --surface-diff-delete-weak: var(--ember-light-2);
-    --surface-diff-delete-weaker: var(--ember-light-1);
-    --surface-diff-delete-strong: var(--ember-light-6);
-    --surface-diff-delete-stronger: var(--ember-light-9);
-    --text-base: var(--ink-light-11);
-    --input-base: var(--ink-light-1);
-    --input-hover: var(--ink-light-2);
-    --input-active: var(--cobalt-light-1);
-    --input-selected: var(--cobalt-light-4);
-    --input-focus: var(--cobalt-light-1);
-    --input-disabled: var(--ink-light-4);
-    --text-weak: var(--ink-light-9);
-    --text-weaker: var(--ink-light-8);
-    --text-strong: var(--ink-light-12);
-    --text-interactive-base: var(--cobalt-light-9);
-    --text-on-brand-base: var(--ink-light-alpha-11);
-    --text-on-interactive-base: var(--ink-light-1);
-    --text-on-interactive-weak: var(--ink-light-alpha-11);
-    --text-on-success-base: var(--apple-light-10);
-    --text-on-critical-base: var(--ember-light-10);
-    --text-on-critical-weak: var(--ember-light-8);
-    --text-on-critical-strong: var(--ember-light-12);
-    --text-on-warning-base: var(--ink-dark-alpha-11);
-    --text-on-info-base: var(--ink-dark-alpha-11);
-    --text-diff-add-base: var(--mint-light-11);
-    --text-diff-delete-base: var(--ember-light-10);
-    --text-diff-delete-strong: var(--ember-light-12);
-    --text-diff-add-strong: var(--mint-light-12);
-    --text-on-info-weak: var(--ink-dark-alpha-9);
-    --text-on-info-strong: var(--ink-dark-alpha-12);
-    --text-on-warning-weak: var(--ink-dark-alpha-9);
-    --text-on-warning-strong: var(--ink-dark-alpha-12);
-    --text-on-success-weak: var(--apple-light-6);
-    --text-on-success-strong: var(--apple-light-12);
-    --text-on-brand-weak: var(--ink-light-alpha-9);
-    --text-on-brand-weaker: var(--ink-light-alpha-8);
-    --text-on-brand-strong: var(--ink-light-alpha-12);
-    --button-secondary-base: #fcfdfd;
-    --button-secondary-hover: #f9fafa;
-    --border-base: var(--ink-light-alpha-7);
-    --border-hover: var(--ink-light-alpha-8);
-    --border-active: var(--ink-light-alpha-9);
-    --border-selected: var(--cobalt-light-alpha-9);
-    --border-disabled: var(--ink-light-alpha-8);
-    --border-focus: var(--ink-light-alpha-9);
-    --border-weak-base: var(--ink-light-alpha-5);
-    --border-strong-base: var(--ink-light-alpha-7);
-    --border-strong-hover: var(--ink-light-alpha-8);
-    --border-strong-active: var(--ink-light-alpha-7);
-    --border-strong-selected: var(--cobalt-light-alpha-6);
-    --border-strong-disabled: var(--ink-light-alpha-6);
-    --border-strong-focus: var(--ink-light-alpha-7);
-    --border-weak-hover: var(--ink-light-alpha-6);
-    --border-weak-active: var(--ink-light-alpha-7);
-    --border-weak-selected: var(--cobalt-light-alpha-5);
-    --border-weak-disabled: var(--ink-light-alpha-6);
-    --border-weak-focus: var(--ink-light-alpha-7);
-    --border-interactive-base: var(--cobalt-light-7);
-    --border-interactive-hover: var(--cobalt-light-8);
-    --border-interactive-active: var(--cobalt-light-9);
-    --border-interactive-selected: var(--cobalt-light-9);
-    --border-interactive-disabled: var(--ink-light-8);
-    --border-interactive-focus: var(--cobalt-light-9);
-    --border-success-base: var(--apple-light-6);
-    --border-success-hover: var(--apple-light-7);
-    --border-success-selected: var(--apple-light-9);
-    --border-warning-base: var(--solaris-light-6);
-    --border-warning-hover: var(--solaris-light-7);
-    --border-warning-selected: var(--solaris-light-9);
-    --border-critical-base: var(--ember-light-6);
-    --border-critical-hover: var(--ember-light-7);
-    --border-critical-selected: var(--ember-light-9);
-    --border-info-base: var(--lilac-light-6);
-    --border-info-hover: var(--lilac-light-7);
-    --border-info-selected: var(--lilac-light-9);
-    --icon-base: var(--ink-light-9);
-    --icon-hover: var(--ink-light-11);
-    --icon-active: var(--ink-light-12);
-    --icon-selected: var(--ink-light-12);
-    --icon-disabled: var(--ink-light-8);
-    --icon-focus: var(--ink-light-12);
-    --icon-invert-base: #ffffff;
-    --icon-weak-base: var(--ink-light-7);
-    --icon-weak-hover: var(--ink-light-8);
-    --icon-weak-active: var(--ink-light-9);
-    --icon-weak-selected: var(--ink-light-10);
-    --icon-weak-disabled: var(--ink-light-6);
-    --icon-weak-focus: var(--ink-light-9);
-    --icon-strong-base: var(--ink-light-12);
-    --icon-strong-hover: #131515;
-    --icon-strong-active: #020202;
-    --icon-strong-selected: #020202;
-    --icon-strong-disabled: var(--ink-light-8);
-    --icon-strong-focus: #020202;
-    --icon-brand-base: var(--ink-light-12);
-    --icon-interactive-base: var(--cobalt-light-9);
-    --icon-success-base: var(--apple-light-7);
-    --icon-success-hover: var(--apple-light-8);
-    --icon-success-active: var(--apple-light-11);
-    --icon-warning-base: var(--amber-light-7);
-    --icon-warning-hover: var(--amber-light-8);
-    --icon-warning-active: var(--amber-light-11);
-    --icon-critical-base: var(--ember-light-10);
-    --icon-critical-hover: var(--ember-light-11);
-    --icon-critical-active: var(--ember-light-12);
-    --icon-info-base: var(--lilac-light-7);
-    --icon-info-hover: var(--lilac-light-8);
-    --icon-info-active: var(--lilac-light-11);
-    --icon-on-brand-base: var(--ink-light-alpha-11);
-    --icon-on-brand-hover: var(--ink-light-alpha-12);
-    --icon-on-brand-selected: var(--ink-light-alpha-12);
-    --icon-on-interactive-base: var(--ink-light-1);
-    --icon-agent-plan-base: var(--purple-light-9);
-    --icon-agent-docs-base: var(--amber-light-9);
-    --icon-agent-ask-base: var(--cyan-light-9);
-    --icon-agent-build-base: var(--cobalt-light-9);
-    --icon-on-success-base: var(--apple-light-alpha-9);
-    --icon-on-success-hover: var(--apple-light-alpha-10);
-    --icon-on-success-selected: var(--apple-light-alpha-11);
-    --icon-on-warning-base: var(--amber-lightalpha-9);
-    --icon-on-warning-hover: var(--amber-lightalpha-10);
-    --icon-on-warning-selected: var(--amber-lightalpha-11);
-    --icon-on-critical-base: var(--ember-light-alpha-9);
-    --icon-on-critical-hover: var(--ember-light-alpha-10);
-    --icon-on-critical-selected: var(--ember-light-alpha-11);
-    --icon-on-info-base: var(--lilac-light-9);
-    --icon-on-info-hover: var(--lilac-light-alpha-10);
-    --icon-on-info-selected: var(--lilac-light-alpha-11);
-    --icon-diff-add-base: var(--mint-light-11);
-    --icon-diff-add-hover: var(--mint-light-12);
-    --icon-diff-add-active: var(--mint-light-12);
-    --icon-diff-delete-base: var(--ember-light-10);
-    --icon-diff-delete-hover: var(--ember-light-11);
-    --syntax-comment: var(--text-weak);
-    --syntax-regexp: var(--text-base);
-    --syntax-string: #007663;
-    --syntax-keyword: var(--text-weak);
-    --syntax-primitive: #fb7f51;
-    --syntax-operator: var(--text-weak);
-    --syntax-variable: var(--text-strong);
-    --syntax-property: #ec6cc8;
-    --syntax-type: #738400;
-    --syntax-constant: #00b2b9;
-    --syntax-punctuation: var(--text-weak);
-    --syntax-object: var(--text-strong);
-    --syntax-success: var(--apple-light-10);
-    --syntax-warning: var(--amber-light-10);
-    --syntax-critical: var(--ember-light-9);
-    --syntax-info: #0091a7;
-    --syntax-diff-add: var(--mint-light-11);
-    --syntax-diff-delete: var(--ember-light-11);
-    --syntax-diff-unknown: #ff0000;
-    --markdown-heading: #d68c27;
-    --markdown-text: #1a1a1a;
-    --markdown-link: #3b7dd8;
-    --markdown-link-text: #318795;
-    --markdown-code: #3d9a57;
-    --markdown-block-quote: #b0851f;
-    --markdown-emph: #b0851f;
-    --markdown-strong: #d68c27;
-    --markdown-horizontal-rule: #8a8a8a;
-    --markdown-list-item: #3b7dd8;
-    --markdown-list-enumeration: #318795;
-    --markdown-image: #3b7dd8;
-    --markdown-image-text: #318795;
-    --markdown-code-block: #1a1a1a;
-    --border-color: #ffffff;
-    --border-weaker-base: var(--ink-light-alpha-3);
-    --border-weaker-hover: var(--ink-light-alpha-4);
-    --border-weaker-active: var(--ink-light-alpha-6);
-    --border-weaker-selected: var(--cobalt-light-alpha-4);
-    --border-weaker-disabled: var(--ink-light-alpha-2);
-    --border-weaker-focus: var(--ink-light-alpha-6);
-    --button-ghost-hover: var(--ink-light-alpha-2);
-    --button-ghost-hover2: var(--ink-light-alpha-3);
   }
 }
diff --git a/packages/ui/src/theme/color.ts b/packages/ui/src/theme/color.ts
new file mode 100644
index 00000000000..3a0526ca6c3
--- /dev/null
+++ b/packages/ui/src/theme/color.ts
@@ -0,0 +1,267 @@
+/**
+ * Color utilities for theme generation using OKLCH color space.
+ * OKLCH provides perceptually uniform color manipulation.
+ */
+
+import type { HexColor, OklchColor } from "./types"
+
+/**
+ * Convert hex color to RGB values (0-1 range)
+ */
+export function hexToRgb(hex: HexColor): { r: number; g: number; b: number } {
+  const h = hex.replace("#", "")
+  const full =
+    h.length === 3
+      ? h
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : h
+
+  const num = parseInt(full, 16)
+  return {
+    r: ((num >> 16) & 255) / 255,
+    g: ((num >> 8) & 255) / 255,
+    b: (num & 255) / 255,
+  }
+}
+
+/**
+ * Convert RGB (0-1 range) to hex color
+ */
+export function rgbToHex(r: number, g: number, b: number): HexColor {
+  const toHex = (v: number) => {
+    const clamped = Math.max(0, Math.min(1, v))
+    const int = Math.round(clamped * 255)
+    return int.toString(16).padStart(2, "0")
+  }
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+/**
+ * Convert linear RGB to sRGB
+ */
+function linearToSrgb(c: number): number {
+  if (c <= 0.0031308) return c * 12.92
+  return 1.055 * Math.pow(c, 1 / 2.4) - 0.055
+}
+
+/**
+ * Convert sRGB to linear RGB
+ */
+function srgbToLinear(c: number): number {
+  if (c <= 0.04045) return c / 12.92
+  return Math.pow((c + 0.055) / 1.055, 2.4)
+}
+
+/**
+ * Convert RGB to OKLCH
+ */
+export function rgbToOklch(r: number, g: number, b: number): OklchColor {
+  // Convert to linear RGB
+  const lr = srgbToLinear(r)
+  const lg = srgbToLinear(g)
+  const lb = srgbToLinear(b)
+
+  // RGB to OKLab matrix multiplication
+  const l_ = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb
+  const m_ = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb
+  const s_ = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb
+
+  const l = Math.cbrt(l_)
+  const m = Math.cbrt(m_)
+  const s = Math.cbrt(s_)
+
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s
+  const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s
+  const bOk = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+
+  const C = Math.sqrt(a * a + bOk * bOk)
+  let H = Math.atan2(bOk, a) * (180 / Math.PI)
+  if (H < 0) H += 360
+
+  return { l: L, c: C, h: H }
+}
+
+/**
+ * Convert OKLCH to RGB
+ */
+export function oklchToRgb(oklch: OklchColor): { r: number; g: number; b: number } {
+  const { l: L, c: C, h: H } = oklch
+
+  const a = C * Math.cos((H * Math.PI) / 180)
+  const b = C * Math.sin((H * Math.PI) / 180)
+
+  const l = L + 0.3963377774 * a + 0.2158037573 * b
+  const m = L - 0.1055613458 * a - 0.0638541728 * b
+  const s = L - 0.0894841775 * a - 1.291485548 * b
+
+  const l3 = l * l * l
+  const m3 = m * m * m
+  const s3 = s * s * s
+
+  const lr = 4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3
+  const lg = -1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3
+  const lb = -0.0041960863 * l3 - 0.7034186147 * m3 + 1.707614701 * s3
+
+  return {
+    r: linearToSrgb(lr),
+    g: linearToSrgb(lg),
+    b: linearToSrgb(lb),
+  }
+}
+
+/**
+ * Convert hex to OKLCH
+ */
+export function hexToOklch(hex: HexColor): OklchColor {
+  const { r, g, b } = hexToRgb(hex)
+  return rgbToOklch(r, g, b)
+}
+
+/**
+ * Convert OKLCH to hex
+ */
+export function oklchToHex(oklch: OklchColor): HexColor {
+  const { r, g, b } = oklchToRgb(oklch)
+  return rgbToHex(r, g, b)
+}
+
+/**
+ * Generate a 12-step color scale from a seed color.
+ * Steps 1-4: Very light (backgrounds)
+ * Steps 5-7: Mid tones (borders, subtle UI)
+ * Steps 8-9: Saturated (primary buttons, text)
+ * Steps 10-12: Dark (text, strong accents)
+ *
+ * @param seed - The seed color (typically step 9 - the main accent)
+ * @param isDark - Whether generating for dark mode
+ */
+export function generateScale(seed: HexColor, isDark: boolean): HexColor[] {
+  const base = hexToOklch(seed)
+  const scale: HexColor[] = []
+
+  // Lightness values for each step (0-1)
+  // These are tuned to match Radix-style color scales
+  const lightSteps = isDark
+    ? [0.15, 0.18, 0.22, 0.26, 0.32, 0.38, 0.46, 0.56, base.l, base.l - 0.05, 0.75, 0.93]
+    : [0.99, 0.97, 0.94, 0.9, 0.85, 0.79, 0.72, 0.64, base.l, base.l + 0.05, 0.45, 0.25]
+
+  // Chroma multipliers - less saturation at extremes
+  const chromaMultipliers = isDark
+    ? [0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.85, 1, 1, 0.9, 0.6]
+    : [0.1, 0.15, 0.25, 0.35, 0.45, 0.55, 0.7, 0.85, 1, 1, 0.95, 0.85]
+
+  for (let i = 0; i < 12; i++) {
+    scale.push(
+      oklchToHex({
+        l: lightSteps[i],
+        c: base.c * chromaMultipliers[i],
+        h: base.h,
+      }),
+    )
+  }
+
+  return scale
+}
+
+/**
+ * Generate a neutral gray scale from a seed color.
+ * The seed color's hue is used to tint the grays slightly.
+ *
+ * @param seed - A neutral-ish color to derive the gray scale from
+ * @param isDark - Whether generating for dark mode
+ */
+export function generateNeutralScale(seed: HexColor, isDark: boolean): HexColor[] {
+  const base = hexToOklch(seed)
+  const scale: HexColor[] = []
+
+  // Very low chroma for neutrals - just a hint of the hue
+  const neutralChroma = Math.min(base.c, 0.02)
+
+  const lightSteps = isDark
+    ? [0.13, 0.16, 0.2, 0.24, 0.28, 0.33, 0.4, 0.52, 0.58, 0.66, 0.82, 0.96]
+    : [0.995, 0.98, 0.96, 0.94, 0.91, 0.88, 0.84, 0.78, 0.62, 0.56, 0.46, 0.2]
+
+  for (let i = 0; i < 12; i++) {
+    scale.push(
+      oklchToHex({
+        l: lightSteps[i],
+        c: neutralChroma,
+        h: base.h,
+      }),
+    )
+  }
+
+  return scale
+}
+
+/**
+ * Generate alpha variants of a color scale.
+ * Returns hex colors with alpha pre-multiplied against white (light) or black (dark).
+ */
+export function generateAlphaScale(scale: HexColor[], isDark: boolean): HexColor[] {
+  // Alpha values for each step
+  const alphas = isDark
+    ? [0.02, 0.04, 0.08, 0.12, 0.16, 0.2, 0.26, 0.36, 0.44, 0.52, 0.76, 0.96]
+    : [0.01, 0.03, 0.06, 0.09, 0.12, 0.15, 0.2, 0.28, 0.48, 0.56, 0.64, 0.88]
+
+  return scale.map((hex, i) => {
+    const { r, g, b } = hexToRgb(hex)
+    const a = alphas[i]
+
+    // Pre-multiply against white (light) or black (dark)
+    const bg = isDark ? 0 : 1
+    const blendedR = r * a + bg * (1 - a)
+    const blendedG = g * a + bg * (1 - a)
+    const blendedB = b * a + bg * (1 - a)
+
+    // Return as hex with alpha encoded in the color itself
+    // For true alpha, we'd need rgba(), but this approximates it
+    return rgbToHex(blendedR, blendedG, blendedB)
+  })
+}
+
+/**
+ * Mix two colors together
+ */
+export function mixColors(color1: HexColor, color2: HexColor, amount: number): HexColor {
+  const c1 = hexToOklch(color1)
+  const c2 = hexToOklch(color2)
+
+  return oklchToHex({
+    l: c1.l + (c2.l - c1.l) * amount,
+    c: c1.c + (c2.c - c1.c) * amount,
+    h: c1.h + (c2.h - c1.h) * amount,
+  })
+}
+
+/**
+ * Lighten a color by a given amount (0-1)
+ */
+export function lighten(color: HexColor, amount: number): HexColor {
+  const oklch = hexToOklch(color)
+  return oklchToHex({
+    ...oklch,
+    l: Math.min(1, oklch.l + amount),
+  })
+}
+
+/**
+ * Darken a color by a given amount (0-1)
+ */
+export function darken(color: HexColor, amount: number): HexColor {
+  const oklch = hexToOklch(color)
+  return oklchToHex({
+    ...oklch,
+    l: Math.max(0, oklch.l - amount),
+  })
+}
+
+/**
+ * Adjust the alpha/opacity of a hex color (returns rgba string)
+ */
+export function withAlpha(color: HexColor, alpha: number): string {
+  const { r, g, b } = hexToRgb(color)
+  return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha})`
+}
diff --git a/packages/ui/src/theme/context.tsx b/packages/ui/src/theme/context.tsx
new file mode 100644
index 00000000000..d8ca6d50777
--- /dev/null
+++ b/packages/ui/src/theme/context.tsx
@@ -0,0 +1,280 @@
+/**
+ * Theme context for SolidJS applications.
+ * Provides reactive theme management with localStorage persistence and caching.
+ *
+ * Works in conjunction with the preload script to provide zero-FOUC theming:
+ * 1. Preload script applies cached CSS immediately from localStorage
+ * 2. ThemeProvider takes over, resolves theme, and updates cache
+ */
+
+import {
+  createContext,
+  useContext,
+  createSignal,
+  onMount,
+  onCleanup,
+  createEffect,
+  type JSX,
+  type Accessor,
+} from "solid-js"
+import type { DesktopTheme } from "./types"
+import { resolveThemeVariant, themeToCss } from "./resolve"
+import { STORAGE_KEYS, getThemeCacheKey } from "./preload"
+import { DEFAULT_THEMES } from "./default-themes"
+
+export type ColorScheme = "light" | "dark" | "system"
+
+interface ThemeContextValue {
+  /** Currently active theme ID */
+  themeId: Accessor<string>
+  /** Current color scheme preference */
+  colorScheme: Accessor<ColorScheme>
+  /** Resolved current mode (light or dark) */
+  mode: Accessor<"light" | "dark">
+  /** All available themes */
+  themes: Accessor<Record<string, DesktopTheme>>
+  /** Set the active theme by ID */
+  setTheme: (id: string) => void
+  /** Set color scheme preference */
+  setColorScheme: (scheme: ColorScheme) => void
+  /** Register a custom theme */
+  registerTheme: (theme: DesktopTheme) => void
+}
+
+const ThemeContext = createContext<ThemeContextValue>()
+
+/**
+ * Static tokens that don't change between themes
+ */
+const STATIC_TOKENS = `
+  --font-family-sans: "Inter", "Inter Fallback";
+  --font-family-sans--font-feature-settings: "ss03" 1;
+  --font-family-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
+  --font-family-mono--font-feature-settings: "ss01" 1;
+  --font-size-small: 13px;
+  --font-size-base: 14px;
+  --font-size-large: 16px;
+  --font-size-x-large: 20px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --line-height-large: 150%;
+  --line-height-x-large: 180%;
+  --line-height-2x-large: 200%;
+  --letter-spacing-normal: 0;
+  --letter-spacing-tight: -0.16;
+  --letter-spacing-tightest: -0.32;
+  --paragraph-spacing-base: 0;
+  --spacing: 0.25rem;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.625rem;
+  --shadow-xs: 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+  --shadow-md: 0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
+  --shadow-xs-border: 0 0 0 1px var(--border-base), 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+  --shadow-xs-border-base: 0 0 0 1px var(--border-weak-base), 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+  --shadow-xs-border-select: 0 0 0 3px var(--border-weak-selected), 0 0 0 1px var(--border-selected), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
+  --shadow-xs-border-focus: 0 0 0 1px var(--border-base), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak), 0 0 0 3px var(--border-selected);
+`
+
+const THEME_STYLE_ID = "oc-theme"
+
+function ensureThemeStyleElement(): HTMLStyleElement {
+  const existing = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null
+  if (existing) {
+    return existing
+  }
+  const element = document.createElement("style")
+  element.id = THEME_STYLE_ID
+  document.head.appendChild(element)
+  return element
+}
+
+/**
+ * Resolve a mode from system preference
+ */
+function getSystemMode(): "light" | "dark" {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+}
+
+/**
+ * Apply theme CSS to the document
+ */
+function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "dark"): void {
+  const isDark = mode === "dark"
+  const variant = isDark ? theme.dark : theme.light
+  const tokens = resolveThemeVariant(variant, isDark)
+  const css = themeToCss(tokens)
+
+  // Cache to localStorage for preload script
+  const cacheKey = getThemeCacheKey(themeId, mode)
+  try {
+    localStorage.setItem(cacheKey, css)
+  } catch {
+    // localStorage might be full or disabled
+  }
+
+  // Build full CSS
+  const fullCss = `:root {
+  ${STATIC_TOKENS}
+  color-scheme: ${mode};
+  --text-mix-blend-mode: ${isDark ? "plus-lighter" : "multiply"};
+  ${css}
+}`
+
+  // Remove preload style if it exists
+  const preloadStyle = document.getElementById("oc-theme-preload")
+  if (preloadStyle) {
+    preloadStyle.remove()
+  }
+
+  const themeStyleElement = ensureThemeStyleElement()
+  themeStyleElement.textContent = fullCss
+
+  // Update data attributes
+  document.documentElement.dataset.theme = themeId
+  document.documentElement.dataset.colorScheme = mode
+}
+
+/**
+ * Cache both light and dark variants of a theme
+ */
+function cacheThemeVariants(theme: DesktopTheme, themeId: string): void {
+  for (const mode of ["light", "dark"] as const) {
+    const isDark = mode === "dark"
+    const variant = isDark ? theme.dark : theme.light
+    const tokens = resolveThemeVariant(variant, isDark)
+    const css = themeToCss(tokens)
+    const cacheKey = getThemeCacheKey(themeId, mode)
+    try {
+      localStorage.setItem(cacheKey, css)
+    } catch {
+      // localStorage might be full or disabled
+    }
+  }
+}
+
+export function ThemeProvider(props: { children: JSX.Element; defaultTheme?: string }) {
+  const [themes, setThemes] = createSignal<Record<string, DesktopTheme>>(DEFAULT_THEMES)
+  const [themeId, setThemeIdSignal] = createSignal(props.defaultTheme ?? "oc-1")
+  const [colorScheme, setColorSchemeSignal] = createSignal<ColorScheme>("system")
+  const [mode, setMode] = createSignal<"light" | "dark">(getSystemMode())
+
+  // Listen for system color scheme changes
+  onMount(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+    const handler = () => {
+      if (colorScheme() === "system") {
+        setMode(getSystemMode())
+      }
+    }
+    mediaQuery.addEventListener("change", handler)
+    onCleanup(() => mediaQuery.removeEventListener("change", handler))
+
+    // Load saved preferences
+    const savedTheme = localStorage.getItem(STORAGE_KEYS.THEME_ID)
+    const savedScheme = localStorage.getItem(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null
+
+    if (savedTheme && themes()[savedTheme]) {
+      setThemeIdSignal(savedTheme)
+    }
+
+    if (savedScheme) {
+      setColorSchemeSignal(savedScheme)
+      if (savedScheme !== "system") {
+        setMode(savedScheme)
+      }
+    }
+
+    // Cache current theme variants for future preloads
+    const currentTheme = themes()[themeId()]
+    if (currentTheme) {
+      cacheThemeVariants(currentTheme, themeId())
+    }
+  })
+
+  // Apply theme when themeId or mode changes
+  createEffect(() => {
+    const id = themeId()
+    const m = mode()
+    const theme = themes()[id]
+    if (theme) {
+      applyThemeCss(theme, id, m)
+    }
+  })
+
+  const setTheme = (id: string) => {
+    const theme = themes()[id]
+    if (!theme) {
+      console.warn(`Theme "${id}" not found`)
+      return
+    }
+
+    setThemeIdSignal(id)
+    localStorage.setItem(STORAGE_KEYS.THEME_ID, id)
+
+    // Cache both variants for future preloads
+    cacheThemeVariants(theme, id)
+  }
+
+  const setColorSchemePref = (scheme: ColorScheme) => {
+    setColorSchemeSignal(scheme)
+    localStorage.setItem(STORAGE_KEYS.COLOR_SCHEME, scheme)
+
+    if (scheme === "system") {
+      setMode(getSystemMode())
+    } else {
+      setMode(scheme)
+    }
+  }
+
+  const registerTheme = (theme: DesktopTheme) => {
+    setThemes((prev) => ({
+      ...prev,
+      [theme.id]: theme,
+    }))
+  }
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        themeId,
+        colorScheme,
+        mode,
+        themes,
+        setTheme,
+        setColorScheme: setColorSchemePref,
+        registerTheme,
+      }}
+    >
+      {props.children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext)
+  if (!ctx) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+  return ctx
+}
diff --git a/packages/ui/src/theme/default-themes.ts b/packages/ui/src/theme/default-themes.ts
new file mode 100644
index 00000000000..749d5e97ccb
--- /dev/null
+++ b/packages/ui/src/theme/default-themes.ts
@@ -0,0 +1,35 @@
+import type { DesktopTheme } from "./types"
+import oc1ThemeJson from "./themes/oc-1.json"
+import tokyoThemeJson from "./themes/tokyonight.json"
+import draculaThemeJson from "./themes/dracula.json"
+import monokaiThemeJson from "./themes/monokai.json"
+import solarizedThemeJson from "./themes/solarized.json"
+import nordThemeJson from "./themes/nord.json"
+import catppuccinThemeJson from "./themes/catppuccin.json"
+import ayuThemeJson from "./themes/ayu.json"
+import oneDarkProThemeJson from "./themes/onedarkpro.json"
+import shadesOfPurpleThemeJson from "./themes/shadesofpurple.json"
+
+export const oc1Theme = oc1ThemeJson as DesktopTheme
+export const tokyonightTheme = tokyoThemeJson as DesktopTheme
+export const draculaTheme = draculaThemeJson as DesktopTheme
+export const monokaiTheme = monokaiThemeJson as DesktopTheme
+export const solarizedTheme = solarizedThemeJson as DesktopTheme
+export const nordTheme = nordThemeJson as DesktopTheme
+export const catppuccinTheme = catppuccinThemeJson as DesktopTheme
+export const ayuTheme = ayuThemeJson as DesktopTheme
+export const oneDarkProTheme = oneDarkProThemeJson as DesktopTheme
+export const shadesOfPurpleTheme = shadesOfPurpleThemeJson as DesktopTheme
+
+export const DEFAULT_THEMES: Record<string, DesktopTheme> = {
+  "oc-1": oc1Theme,
+  tokyonight: tokyonightTheme,
+  dracula: draculaTheme,
+  monokai: monokaiTheme,
+  solarized: solarizedTheme,
+  nord: nordTheme,
+  catppuccin: catppuccinTheme,
+  ayu: ayuTheme,
+  onedarkpro: oneDarkProTheme,
+  shadesofpurple: shadesOfPurpleTheme,
+}
diff --git a/packages/ui/src/theme/desktop-theme.schema.json b/packages/ui/src/theme/desktop-theme.schema.json
new file mode 100644
index 00000000000..b60a8f37cad
--- /dev/null
+++ b/packages/ui/src/theme/desktop-theme.schema.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://opencode.ai/desktop-theme.json",
+  "title": "OpenCode Desktop Theme",
+  "description": "A theme definition for the OpenCode desktop application",
+  "type": "object",
+  "required": ["name", "id", "light", "dark"],
+  "properties": {
+    "$schema": {
+      "type": "string",
+      "description": "JSON Schema reference"
+    },
+    "name": {
+      "type": "string",
+      "description": "Human-readable theme name"
+    },
+    "id": {
+      "type": "string",
+      "description": "Unique theme identifier (slug)",
+      "pattern": "^[a-z0-9-]+$"
+    },
+    "light": {
+      "$ref": "#/definitions/ThemeVariant",
+      "description": "Light mode color variant"
+    },
+    "dark": {
+      "$ref": "#/definitions/ThemeVariant",
+      "description": "Dark mode color variant"
+    }
+  },
+  "definitions": {
+    "HexColor": {
+      "type": "string",
+      "pattern": "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$",
+      "description": "A hex color value like #fff, #ffff, #ffffff, or #ffffffff"
+    },
+    "ColorValue": {
+      "type": "string",
+      "pattern": "^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})|var\(--[a-z0-9-]+\))$",
+      "description": "Either a hex color value (#rgb/#rgba/#rrggbb/#rrggbbaa) or a CSS variable reference"
+    },
+    "ThemeSeedColors": {
+      "type": "object",
+      "description": "The minimum set of colors needed to generate a theme",
+      "required": ["neutral", "primary", "success", "warning", "error", "info", "interactive", "diffAdd", "diffDelete"],
+      "properties": {
+        "neutral": {
+          "$ref": "#/definitions/HexColor",
+          "description": "Base neutral color for generating the gray scale"
+        },
+        "primary": {
+          "$ref": "#/definitions/HexColor",
+          "description": "Primary brand/accent color"
+        },
+        "success": {
+          "$ref": "#/definitions/HexColor",
+          "description": "Success state color (typically green)"
+        },
+        "warning": {
+          "$ref": "#/definitions/HexColor",
+          "description": "Warning state color (typically yellow/orange)"
+        },
+        "error": {
+          "$ref": "#/definitions/HexColor",
+          "description": "Error/critical state color (typically red)"
+        },
+        "info": {
+          "$ref": "#/definitions/HexColor",
+          "description": "Informational state color (typically purple/blue)"
+        },
+        "interactive": {
+          "$ref": "#/definitions/HexColor",
+          "description": "Interactive element color (links, buttons)"
+        },
+        "diffAdd": {
+          "$ref": "#/definitions/HexColor",
+          "description": "Color for diff additions"
+        },
+        "diffDelete": {
+          "$ref": "#/definitions/HexColor",
+          "description": "Color for diff deletions"
+        }
+      }
+    },
+    "ThemeVariant": {
+      "type": "object",
+      "description": "A theme variant (light or dark) with seed colors and optional overrides",
+      "required": ["seeds"],
+      "properties": {
+        "seeds": {
+          "$ref": "#/definitions/ThemeSeedColors",
+          "description": "Seed colors used to generate the full palette"
+        },
+        "overrides": {
+          "type": "object",
+          "description": "Optional direct overrides for any CSS variable (without -- prefix)",
+          "additionalProperties": {
+            "$ref": "#/definitions/ColorValue"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/ui/src/theme/index.ts b/packages/ui/src/theme/index.ts
new file mode 100644
index 00000000000..8f3da4ca130
--- /dev/null
+++ b/packages/ui/src/theme/index.ts
@@ -0,0 +1,71 @@
+/**
+ * Desktop Theme System
+ *
+ * Provides JSON-based theming for the desktop app. Unlike TUI themes,
+ * desktop themes use more design tokens and generate full color scales
+ * from seed colors.
+ *
+ * Usage:
+ * ```ts
+ * import { applyTheme } from "@opencode/ui/theme"
+ * import myTheme from "./themes/my-theme.json"
+ *
+ * applyTheme(myTheme)
+ * ```
+ */
+
+// Types
+export type {
+  DesktopTheme,
+  ThemeSeedColors,
+  ThemeVariant,
+  HexColor,
+  OklchColor,
+  ResolvedTheme,
+  ColorValue,
+  CssVarRef,
+} from "./types"
+
+// Color utilities
+export {
+  hexToRgb,
+  rgbToHex,
+  hexToOklch,
+  oklchToHex,
+  rgbToOklch,
+  oklchToRgb,
+  generateScale,
+  generateNeutralScale,
+  generateAlphaScale,
+  mixColors,
+  lighten,
+  darken,
+  withAlpha,
+} from "./color"
+
+// Theme resolution
+export { resolveThemeVariant, resolveTheme, themeToCss } from "./resolve"
+
+// Theme loader
+export { applyTheme, loadThemeFromUrl, getActiveTheme, removeTheme, setColorScheme } from "./loader"
+
+// Theme context (SolidJS)
+export { ThemeProvider, useTheme, type ColorScheme } from "./context"
+
+// Preload script utilities
+export { generatePreloadScript, generatePreloadScriptFormatted, STORAGE_KEYS, getThemeCacheKey } from "./preload"
+
+// Default themes
+export {
+  DEFAULT_THEMES,
+  oc1Theme,
+  tokyonightTheme,
+  draculaTheme,
+  monokaiTheme,
+  solarizedTheme,
+  nordTheme,
+  catppuccinTheme,
+  ayuTheme,
+  oneDarkProTheme,
+  shadesOfPurpleTheme,
+} from "./default-themes"
diff --git a/packages/ui/src/theme/loader.ts b/packages/ui/src/theme/loader.ts
new file mode 100644
index 00000000000..b25c833dd3d
--- /dev/null
+++ b/packages/ui/src/theme/loader.ts
@@ -0,0 +1,213 @@
+/**
+ * Theme loader - loads theme JSON files and applies them to the DOM.
+ */
+
+import type { DesktopTheme, ResolvedTheme } from "./types"
+import { resolveThemeVariant, themeToCss } from "./resolve"
+
+/** Currently active theme */
+let activeTheme: DesktopTheme | null = null
+
+const THEME_STYLE_ID = "opencode-theme"
+
+function ensureLoaderStyleElement(): HTMLStyleElement {
+  const existing = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null
+  if (existing) {
+    return existing
+  }
+  const element = document.createElement("style")
+  element.id = THEME_STYLE_ID
+  document.head.appendChild(element)
+  return element
+}
+
+/**
+ * Load and apply a theme to the document.
+ * Creates or updates a <style> element with the theme's CSS custom properties.
+ *
+ * @param theme - The desktop theme to apply
+ * @param themeId - Optional theme ID for the data-theme attribute
+ */
+export function applyTheme(theme: DesktopTheme, themeId?: string): void {
+  activeTheme = theme
+
+  // Resolve both variants
+  const lightTokens = resolveThemeVariant(theme.light, false)
+  const darkTokens = resolveThemeVariant(theme.dark, true)
+
+  const targetThemeId = themeId ?? theme.id
+
+  // Build the CSS
+  const css = buildThemeCss(lightTokens, darkTokens, targetThemeId)
+
+  const themeStyleElement = ensureLoaderStyleElement()
+  themeStyleElement.textContent = css
+
+  document.documentElement.setAttribute("data-theme", targetThemeId)
+}
+
+/**
+ * Build CSS string from resolved theme tokens
+ */
+function buildThemeCss(light: ResolvedTheme, dark: ResolvedTheme, themeId: string): string {
+  const isDefaultTheme = themeId === "oc-1"
+
+  // Static tokens that don't change between themes
+  const staticTokens = `
+  --font-family-sans: "Inter", "Inter Fallback";
+  --font-family-sans--font-feature-settings: "ss03" 1;
+  --font-family-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
+  --font-family-mono--font-feature-settings: "ss01" 1;
+
+  --font-size-small: 13px;
+  --font-size-base: 14px;
+  --font-size-large: 16px;
+  --font-size-x-large: 20px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --line-height-large: 150%;
+  --line-height-x-large: 180%;
+  --line-height-2x-large: 200%;
+  --letter-spacing-normal: 0;
+  --letter-spacing-tight: -0.1599999964237213;
+  --letter-spacing-tightest: -0.3199999928474426;
+  --paragraph-spacing-base: 0;
+
+  --spacing: 0.25rem;
+
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.625rem;
+
+  --shadow-xs:
+    0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+  --shadow-md:
+    0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
+  --shadow-xs-border:
+    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
+    0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+  --shadow-xs-border-base:
+    0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
+    0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+  --shadow-xs-border-select:
+    0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
+    0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
+    0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
+  --shadow-xs-border-focus:
+    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
+    0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0),
+    0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));`
+
+  const lightCss = themeToCss(light)
+  const darkCss = themeToCss(dark)
+
+  // For the default theme, we use :root directly
+  // For named themes, we use the [data-theme] selector
+  if (isDefaultTheme) {
+    return `
+:root {
+  ${staticTokens}
+
+  color-scheme: light;
+  --text-mix-blend-mode: multiply;
+
+  ${lightCss}
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+    --text-mix-blend-mode: plus-lighter;
+
+    ${darkCss}
+  }
+}
+`
+  }
+
+  return `
+html[data-theme="${themeId}"] {
+  ${staticTokens}
+
+  color-scheme: light;
+  --text-mix-blend-mode: multiply;
+
+  ${lightCss}
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+    --text-mix-blend-mode: plus-lighter;
+
+    ${darkCss}
+  }
+}
+`
+}
+
+/**
+ * Load a theme from a JSON file URL
+ */
+export async function loadThemeFromUrl(url: string): Promise<DesktopTheme> {
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`Failed to load theme from ${url}: ${response.statusText}`)
+  }
+  return response.json()
+}
+
+/**
+ * Get the currently active theme
+ */
+export function getActiveTheme(): DesktopTheme | null {
+  const activeId = document.documentElement.getAttribute("data-theme")
+  if (!activeId) {
+    return null
+  }
+  if (activeTheme?.id === activeId) {
+    return activeTheme
+  }
+  return null
+}
+
+/**
+ * Remove the current theme and clean up
+ */
+export function removeTheme(): void {
+  activeTheme = null
+  const existingElement = document.getElementById(THEME_STYLE_ID)
+  if (existingElement) {
+    existingElement.remove()
+  }
+  document.documentElement.removeAttribute("data-theme")
+}
+
+/**
+ * Force a specific color scheme (light/dark) regardless of system preference
+ */
+export function setColorScheme(scheme: "light" | "dark" | "auto"): void {
+  if (scheme === "auto") {
+    document.documentElement.style.removeProperty("color-scheme")
+  } else {
+    document.documentElement.style.setProperty("color-scheme", scheme)
+  }
+}
diff --git a/packages/ui/src/theme/preload.ts b/packages/ui/src/theme/preload.ts
new file mode 100644
index 00000000000..a5eadb323f4
--- /dev/null
+++ b/packages/ui/src/theme/preload.ts
@@ -0,0 +1,115 @@
+/**
+ * Theme preload script generator.
+ *
+ * Generates a minimal inline script that:
+ * 1. Reads theme preferences from localStorage
+ * 2. Applies cached theme CSS immediately (avoiding FOUC)
+ * 3. Falls back to embedded default theme CSS on first visit
+ *
+ * The script should be placed in the document <head> before any stylesheets.
+ */
+
+import { resolveThemeVariant, themeToCss } from "./resolve"
+import type { DesktopTheme } from "./types"
+import oc1Theme from "./themes/oc-1.json"
+
+// Storage keys used by both the preload script and the ThemeProvider
+export const STORAGE_KEYS = {
+  THEME_ID: "opencode-theme-id",
+  COLOR_SCHEME: "opencode-color-scheme",
+  THEME_CSS_PREFIX: "opencode-theme-css",
+} as const
+
+/**
+ * Get the localStorage key for cached theme CSS
+ */
+export function getThemeCacheKey(themeId: string, mode: "light" | "dark"): string {
+  return `${STORAGE_KEYS.THEME_CSS_PREFIX}-${themeId}-${mode}`
+}
+
+/**
+ * Generate the embedded default theme CSS for the preload script.
+ * This is used as a fallback when no cached theme exists.
+ */
+function generateEmbeddedDefaults(): { light: string; dark: string } {
+  const theme = oc1Theme as DesktopTheme
+  const lightTokens = resolveThemeVariant(theme.light, false)
+  const darkTokens = resolveThemeVariant(theme.dark, true)
+
+  return {
+    light: themeToCss(lightTokens),
+    dark: themeToCss(darkTokens),
+  }
+}
+
+/**
+ * Static tokens that don't change between themes.
+ * These are embedded in the preload CSS.
+ */
+const STATIC_TOKENS = `--font-family-sans:"Inter","Inter Fallback";--font-family-sans--font-feature-settings:"ss03" 1;--font-family-mono:"IBM Plex Mono","IBM Plex Mono Fallback";--font-family-mono--font-feature-settings:"ss01" 1;--font-size-small:13px;--font-size-base:14px;--font-size-large:16px;--font-size-x-large:20px;--font-weight-regular:400;--font-weight-medium:500;--line-height-large:150%;--line-height-x-large:180%;--line-height-2x-large:200%;--letter-spacing-normal:0;--letter-spacing-tight:-0.16;--letter-spacing-tightest:-0.32;--paragraph-spacing-base:0;--spacing:0.25rem;--breakpoint-sm:40rem;--breakpoint-md:48rem;--breakpoint-lg:64rem;--breakpoint-xl:80rem;--breakpoint-2xl:96rem;--container-3xs:16rem;--container-2xs:18rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.625rem;--shadow-xs:0 1px 2px -1px rgba(19,16,16,0.04),0 1px 2px 0 rgba(19,16,16,0.06),0 1px 3px 0 rgba(19,16,16,0.08);--shadow-md:0 6px 8px -4px rgba(19,16,16,0.12),0 4px 3px -2px rgba(19,16,16,0.12),0 1px 2px -1px rgba(19,16,16,0.12)`
+
+/**
+ * Generate the inline preload script.
+ *
+ * This script should be placed in the document <head> to avoid FOUC.
+ * It reads theme preferences from localStorage and applies the theme CSS
+ * immediately, falling back to an embedded default theme.
+ */
+export function generatePreloadScript(): string {
+  const defaults = generateEmbeddedDefaults()
+
+  // Minified version of the preload logic
+  // Variables: T=themeId, S=scheme, D=isDark, M=mode, C=css, K=cacheKey
+  return `(function(){var T=localStorage.getItem("${STORAGE_KEYS.THEME_ID}")||"oc-1";var S=localStorage.getItem("${STORAGE_KEYS.COLOR_SCHEME}")||"system";var D=S==="dark"||(S==="system"&&matchMedia("(prefers-color-scheme:dark)").matches);var M=D?"dark":"light";var K="${STORAGE_KEYS.THEME_CSS_PREFIX}-"+T+"-"+M;var C=localStorage.getItem(K);if(!C&&T==="oc-1"){C=D?${JSON.stringify(defaults.dark)}:${JSON.stringify(defaults.light)}}if(C){var s=document.createElement("style");s.id="oc-theme-preload";s.textContent=":root{${STATIC_TOKENS};color-scheme:"+M+";--text-mix-blend-mode:"+(D?"plus-lighter":"multiply")+";"+C+"}";document.head.appendChild(s)}document.documentElement.dataset.theme=T;document.documentElement.dataset.colorScheme=M})();`
+}
+
+/**
+ * Generate a formatted (readable) version of the preload script.
+ * Useful for debugging.
+ */
+export function generatePreloadScriptFormatted(): string {
+  const defaults = generateEmbeddedDefaults()
+
+  return `(function() {
+  var THEME_KEY = "${STORAGE_KEYS.THEME_ID}";
+  var SCHEME_KEY = "${STORAGE_KEYS.COLOR_SCHEME}";
+  var CSS_PREFIX = "${STORAGE_KEYS.THEME_CSS_PREFIX}";
+
+  // Read preferences from localStorage
+  var themeId = localStorage.getItem(THEME_KEY) || "oc-1";
+  var scheme = localStorage.getItem(SCHEME_KEY) || "system";
+
+  // Determine if dark mode
+  var isDark = scheme === "dark" ||
+    (scheme === "system" && matchMedia("(prefers-color-scheme: dark)").matches);
+  var mode = isDark ? "dark" : "light";
+
+  // Try to get cached CSS for this theme + mode
+  var cacheKey = CSS_PREFIX + "-" + themeId + "-" + mode;
+  var css = localStorage.getItem(cacheKey);
+
+  // Fallback to embedded default for oc-1 theme
+  if (!css && themeId === "oc-1") {
+    css = isDark
+      ? ${JSON.stringify(defaults.dark)}
+      : ${JSON.stringify(defaults.light)};
+  }
+
+  // Apply CSS if we have it
+  if (css) {
+    var style = document.createElement("style");
+    style.id = "oc-theme-preload";
+    style.textContent = ":root{" +
+      "${STATIC_TOKENS};" +
+      "color-scheme:" + mode + ";" +
+      "--text-mix-blend-mode:" + (isDark ? "plus-lighter" : "multiply") + ";" +
+      css +
+    "}";
+    document.head.appendChild(style);
+  }
+
+  // Set data attributes for CSS/JS reference
+  document.documentElement.dataset.theme = themeId;
+  document.documentElement.dataset.colorScheme = mode;
+})();`
+}
diff --git a/packages/ui/src/theme/resolve.ts b/packages/ui/src/theme/resolve.ts
new file mode 100644
index 00000000000..e8b6d9c3ee4
--- /dev/null
+++ b/packages/ui/src/theme/resolve.ts
@@ -0,0 +1,365 @@
+/**
+ * Theme resolver - generates all CSS custom properties from theme seed colors.
+ */
+
+import type { ColorValue, DesktopTheme, HexColor, ResolvedTheme, ThemeVariant } from "./types"
+import { generateNeutralScale, generateScale, hexToOklch, oklchToHex, withAlpha } from "./color"
+
+/**
+ * Resolve a theme variant to all CSS custom properties
+ */
+export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): ResolvedTheme {
+  const { seeds, overrides = {} } = variant
+
+  // Generate color scales
+  const neutral = generateNeutralScale(seeds.neutral, isDark)
+  const primary = generateScale(seeds.primary, isDark)
+  const success = generateScale(seeds.success, isDark)
+  const warning = generateScale(seeds.warning, isDark)
+  const error = generateScale(seeds.error, isDark)
+  const info = generateScale(seeds.info, isDark)
+  const interactive = generateScale(seeds.interactive, isDark)
+  const diffAdd = generateScale(seeds.diffAdd, isDark)
+  const diffDelete = generateScale(seeds.diffDelete, isDark)
+
+  // Generate alpha variants for neutral
+  const neutralAlpha = generateNeutralAlphaScale(neutral, isDark)
+
+  // Build the full token map
+  const tokens: ResolvedTheme = {}
+
+  // === Background tokens ===
+  tokens["background-base"] = neutral[0]
+  tokens["background-weak"] = neutral[2]
+  tokens["background-strong"] = neutral[0]
+  tokens["background-stronger"] = isDark ? neutral[1] : "#fcfcfc"
+
+  // === Surface tokens ===
+  tokens["surface-base"] = neutralAlpha[1]
+  tokens["base"] = neutralAlpha[1]
+  tokens["surface-base-hover"] = neutralAlpha[2]
+  tokens["surface-base-active"] = neutralAlpha[2]
+  tokens["surface-base-interactive-active"] = withAlpha(interactive[2], 0.3) as ColorValue
+  tokens["base2"] = neutralAlpha[1]
+  tokens["base3"] = neutralAlpha[1]
+  tokens["surface-inset-base"] = neutralAlpha[1]
+  tokens["surface-inset-base-hover"] = neutralAlpha[2]
+  tokens["surface-inset-strong"] = isDark
+    ? (withAlpha(neutral[0], 0.5) as ColorValue)
+    : (withAlpha(neutral[3], 0.09) as ColorValue)
+  tokens["surface-inset-strong-hover"] = tokens["surface-inset-strong"]
+  tokens["surface-raised-base"] = neutralAlpha[0]
+  tokens["surface-float-base"] = isDark ? neutral[0] : neutral[11]
+  tokens["surface-float-base-hover"] = isDark ? neutral[1] : neutral[10]
+  tokens["surface-raised-base-hover"] = neutralAlpha[1]
+  tokens["surface-raised-base-active"] = neutralAlpha[2]
+  tokens["surface-raised-strong"] = isDark ? neutralAlpha[3] : neutral[0]
+  tokens["surface-raised-strong-hover"] = isDark ? neutralAlpha[5] : "#ffffff"
+  tokens["surface-raised-stronger"] = isDark ? neutralAlpha[5] : "#ffffff"
+  tokens["surface-raised-stronger-hover"] = isDark ? neutralAlpha[6] : "#ffffff"
+  tokens["surface-weak"] = neutralAlpha[2]
+  tokens["surface-weaker"] = neutralAlpha[3]
+  tokens["surface-strong"] = isDark ? neutralAlpha[6] : "#ffffff"
+  tokens["surface-raised-stronger-non-alpha"] = isDark ? neutral[2] : "#ffffff"
+
+  // Brand surface
+  tokens["surface-brand-base"] = primary[8]
+  tokens["surface-brand-hover"] = primary[9]
+
+  // Interactive surfaces
+  tokens["surface-interactive-base"] = interactive[2]
+  tokens["surface-interactive-hover"] = interactive[3]
+  tokens["surface-interactive-weak"] = interactive[1]
+  tokens["surface-interactive-weak-hover"] = interactive[2]
+
+  // Status surfaces
+  tokens["surface-success-base"] = success[2]
+  tokens["surface-success-weak"] = success[1]
+  tokens["surface-success-strong"] = success[8]
+  tokens["surface-warning-base"] = warning[2]
+  tokens["surface-warning-weak"] = warning[1]
+  tokens["surface-warning-strong"] = warning[8]
+  tokens["surface-critical-base"] = error[2]
+  tokens["surface-critical-weak"] = error[1]
+  tokens["surface-critical-strong"] = error[8]
+  tokens["surface-info-base"] = info[2]
+  tokens["surface-info-weak"] = info[1]
+  tokens["surface-info-strong"] = info[8]
+
+  // Diff surfaces
+  tokens["surface-diff-unchanged-base"] = isDark ? neutral[0] : "#ffffff00"
+  tokens["surface-diff-skip-base"] = isDark ? neutralAlpha[0] : neutral[1]
+  tokens["surface-diff-hidden-base"] = interactive[isDark ? 1 : 2]
+  tokens["surface-diff-hidden-weak"] = interactive[isDark ? 0 : 1]
+  tokens["surface-diff-hidden-weaker"] = interactive[isDark ? 2 : 0]
+  tokens["surface-diff-hidden-strong"] = interactive[4]
+  tokens["surface-diff-hidden-stronger"] = interactive[isDark ? 10 : 8]
+  tokens["surface-diff-add-base"] = diffAdd[2]
+  tokens["surface-diff-add-weak"] = diffAdd[isDark ? 3 : 1]
+  tokens["surface-diff-add-weaker"] = diffAdd[isDark ? 2 : 0]
+  tokens["surface-diff-add-strong"] = diffAdd[4]
+  tokens["surface-diff-add-stronger"] = diffAdd[isDark ? 10 : 8]
+  tokens["surface-diff-delete-base"] = diffDelete[2]
+  tokens["surface-diff-delete-weak"] = diffDelete[isDark ? 3 : 1]
+  tokens["surface-diff-delete-weaker"] = diffDelete[isDark ? 2 : 0]
+  tokens["surface-diff-delete-strong"] = diffDelete[isDark ? 4 : 5]
+  tokens["surface-diff-delete-stronger"] = diffDelete[isDark ? 10 : 8]
+
+  // === Input tokens ===
+  tokens["input-base"] = isDark ? neutral[1] : neutral[0]
+  tokens["input-hover"] = neutral[1]
+  tokens["input-active"] = interactive[0]
+  tokens["input-selected"] = interactive[3]
+  tokens["input-focus"] = interactive[0]
+  tokens["input-disabled"] = neutral[3]
+
+  // === Text tokens ===
+  tokens["text-base"] = neutral[10]
+  tokens["text-weak"] = neutral[8]
+  tokens["text-weaker"] = neutral[7]
+  tokens["text-strong"] = neutral[11]
+  tokens["text-invert-base"] = isDark ? neutral[10] : neutralAlpha[10]
+  tokens["text-invert-weak"] = isDark ? neutral[8] : neutralAlpha[8]
+  tokens["text-invert-weaker"] = isDark ? neutral[7] : neutralAlpha[7]
+  tokens["text-invert-strong"] = isDark ? neutral[11] : neutralAlpha[11]
+  tokens["text-interactive-base"] = interactive[isDark ? 10 : 8]
+  tokens["text-on-brand-base"] = neutralAlpha[10]
+  tokens["text-on-interactive-base"] = isDark ? neutral[11] : neutral[0]
+  tokens["text-on-interactive-weak"] = neutralAlpha[10]
+  tokens["text-on-success-base"] = success[isDark ? 8 : 9]
+  tokens["text-on-critical-base"] = error[isDark ? 8 : 9]
+  tokens["text-on-critical-weak"] = error[7]
+  tokens["text-on-critical-strong"] = error[11]
+  tokens["text-on-warning-base"] = neutralAlpha[10]
+  tokens["text-on-info-base"] = neutralAlpha[10]
+  tokens["text-diff-add-base"] = diffAdd[10]
+  tokens["text-diff-delete-base"] = diffDelete[isDark ? 8 : 9]
+  tokens["text-diff-delete-strong"] = diffDelete[11]
+  tokens["text-diff-add-strong"] = diffAdd[isDark ? 7 : 11]
+  tokens["text-on-info-weak"] = neutralAlpha[8]
+  tokens["text-on-info-strong"] = neutralAlpha[11]
+  tokens["text-on-warning-weak"] = neutralAlpha[8]
+  tokens["text-on-warning-strong"] = neutralAlpha[11]
+  tokens["text-on-success-weak"] = success[isDark ? 7 : 5]
+  tokens["text-on-success-strong"] = success[11]
+  tokens["text-on-brand-weak"] = neutralAlpha[8]
+  tokens["text-on-brand-weaker"] = neutralAlpha[7]
+  tokens["text-on-brand-strong"] = neutralAlpha[11]
+
+  // === Button tokens ===
+  tokens["button-secondary-base"] = isDark ? neutral[2] : neutral[0]
+  tokens["button-secondary-hover"] = isDark ? neutral[3] : neutral[1]
+  tokens["button-ghost-hover"] = neutralAlpha[1]
+  tokens["button-ghost-hover2"] = neutralAlpha[2]
+
+  // === Border tokens ===
+  tokens["border-base"] = neutralAlpha[6]
+  tokens["border-hover"] = neutralAlpha[7]
+  tokens["border-active"] = neutralAlpha[8]
+  tokens["border-selected"] = withAlpha(interactive[8], isDark ? 0.9 : 0.99) as ColorValue
+  tokens["border-disabled"] = neutralAlpha[7]
+  tokens["border-focus"] = neutralAlpha[8]
+  tokens["border-weak-base"] = neutralAlpha[isDark ? 5 : 4]
+  tokens["border-strong-base"] = neutralAlpha[isDark ? 7 : 6]
+  tokens["border-strong-hover"] = neutralAlpha[7]
+  tokens["border-strong-active"] = neutralAlpha[isDark ? 7 : 6]
+  tokens["border-strong-selected"] = withAlpha(interactive[5], 0.6) as ColorValue
+  tokens["border-strong-disabled"] = neutralAlpha[5]
+  tokens["border-strong-focus"] = neutralAlpha[isDark ? 7 : 6]
+  tokens["border-weak-hover"] = neutralAlpha[isDark ? 6 : 5]
+  tokens["border-weak-active"] = neutralAlpha[isDark ? 7 : 6]
+  tokens["border-weak-selected"] = withAlpha(interactive[4], isDark ? 0.6 : 0.5) as ColorValue
+  tokens["border-weak-disabled"] = neutralAlpha[5]
+  tokens["border-weak-focus"] = neutralAlpha[isDark ? 7 : 6]
+  tokens["border-weaker-base"] = neutralAlpha[2]
+  tokens["border-weaker-hover"] = neutralAlpha[3]
+  tokens["border-weaker-active"] = neutralAlpha[5]
+  tokens["border-weaker-selected"] = withAlpha(interactive[3], isDark ? 0.3 : 0.4) as ColorValue
+  tokens["border-weaker-disabled"] = neutralAlpha[1]
+  tokens["border-weaker-focus"] = neutralAlpha[5]
+
+  // Interactive borders
+  tokens["border-interactive-base"] = interactive[6]
+  tokens["border-interactive-hover"] = interactive[7]
+  tokens["border-interactive-active"] = interactive[8]
+  tokens["border-interactive-selected"] = interactive[8]
+  tokens["border-interactive-disabled"] = neutral[7]
+  tokens["border-interactive-focus"] = interactive[8]
+
+  // Status borders
+  tokens["border-success-base"] = success[5]
+  tokens["border-success-hover"] = success[6]
+  tokens["border-success-selected"] = success[8]
+  tokens["border-warning-base"] = warning[5]
+  tokens["border-warning-hover"] = warning[6]
+  tokens["border-warning-selected"] = warning[8]
+  tokens["border-critical-base"] = error[isDark ? 4 : 5]
+  tokens["border-critical-hover"] = error[6]
+  tokens["border-critical-selected"] = error[8]
+  tokens["border-info-base"] = info[5]
+  tokens["border-info-hover"] = info[6]
+  tokens["border-info-selected"] = info[8]
+  tokens["border-color"] = "#ffffff"
+
+  // === Icon tokens ===
+  tokens["icon-base"] = neutral[8]
+  tokens["icon-hover"] = neutral[isDark ? 9 : 10]
+  tokens["icon-active"] = neutral[isDark ? 10 : 11]
+  tokens["icon-selected"] = neutral[11]
+  tokens["icon-disabled"] = neutral[isDark ? 6 : 7]
+  tokens["icon-focus"] = neutral[11]
+  tokens["icon-invert-base"] = isDark ? neutral[0] : "#ffffff"
+  tokens["icon-weak-base"] = neutral[isDark ? 5 : 6]
+  tokens["icon-weak-hover"] = neutral[6]
+  tokens["icon-weak-active"] = neutral[7]
+  tokens["icon-weak-selected"] = neutral[8]
+  tokens["icon-weak-disabled"] = neutral[isDark ? 3 : 5]
+  tokens["icon-weak-focus"] = neutral[8]
+  tokens["icon-strong-base"] = neutral[11]
+  tokens["icon-strong-hover"] = isDark ? "#f6f3f3" : "#151313"
+  tokens["icon-strong-active"] = isDark ? "#fcfcfc" : "#020202"
+  tokens["icon-strong-selected"] = isDark ? "#fdfcfc" : "#020202"
+  tokens["icon-strong-disabled"] = neutral[7]
+  tokens["icon-strong-focus"] = isDark ? "#fdfcfc" : "#020202"
+  tokens["icon-brand-base"] = isDark ? "#ffffff" : neutral[11]
+  tokens["icon-interactive-base"] = interactive[8]
+  tokens["icon-success-base"] = success[isDark ? 6 : 6]
+  tokens["icon-success-hover"] = success[7]
+  tokens["icon-success-active"] = success[10]
+  tokens["icon-warning-base"] = warning[6]
+  tokens["icon-warning-hover"] = warning[7]
+  tokens["icon-warning-active"] = warning[10]
+  tokens["icon-critical-base"] = error[isDark ? 8 : 9]
+  tokens["icon-critical-hover"] = error[10]
+  tokens["icon-critical-active"] = error[11]
+  tokens["icon-info-base"] = info[isDark ? 6 : 6]
+  tokens["icon-info-hover"] = info[7]
+  tokens["icon-info-active"] = info[10]
+  tokens["icon-on-brand-base"] = neutralAlpha[10]
+  tokens["icon-on-brand-hover"] = neutralAlpha[11]
+  tokens["icon-on-brand-selected"] = neutralAlpha[11]
+  tokens["icon-on-interactive-base"] = isDark ? neutral[11] : neutral[0]
+
+  // Agent icons (using semantic colors)
+  tokens["icon-agent-plan-base"] = info[8]
+  tokens["icon-agent-docs-base"] = warning[8]
+  tokens["icon-agent-ask-base"] = interactive[8]
+  tokens["icon-agent-build-base"] = interactive[isDark ? 10 : 8]
+
+  // Status icons
+  tokens["icon-on-success-base"] = withAlpha(success[8], 0.9) as ColorValue
+  tokens["icon-on-success-hover"] = withAlpha(success[9], 0.9) as ColorValue
+  tokens["icon-on-success-selected"] = withAlpha(success[10], 0.9) as ColorValue
+  tokens["icon-on-warning-base"] = withAlpha(warning[8], 0.9) as ColorValue
+  tokens["icon-on-warning-hover"] = withAlpha(warning[9], 0.9) as ColorValue
+  tokens["icon-on-warning-selected"] = withAlpha(warning[10], 0.9) as ColorValue
+  tokens["icon-on-critical-base"] = withAlpha(error[8], 0.9) as ColorValue
+  tokens["icon-on-critical-hover"] = withAlpha(error[9], 0.9) as ColorValue
+  tokens["icon-on-critical-selected"] = withAlpha(error[10], 0.9) as ColorValue
+  tokens["icon-on-info-base"] = info[8]
+  tokens["icon-on-info-hover"] = withAlpha(info[9], 0.9) as ColorValue
+  tokens["icon-on-info-selected"] = withAlpha(info[10], 0.9) as ColorValue
+
+  // Diff icons
+  tokens["icon-diff-add-base"] = diffAdd[10]
+  tokens["icon-diff-add-hover"] = diffAdd[isDark ? 9 : 11]
+  tokens["icon-diff-add-active"] = diffAdd[isDark ? 10 : 11]
+  tokens["icon-diff-delete-base"] = diffDelete[isDark ? 8 : 9]
+  tokens["icon-diff-delete-hover"] = diffDelete[isDark ? 9 : 10]
+
+  // === Syntax tokens ===
+  tokens["syntax-comment"] = "var(--text-weak)"
+  tokens["syntax-regexp"] = "var(--text-base)"
+  tokens["syntax-string"] = isDark ? "#00ceb9" : "#006656"
+  tokens["syntax-keyword"] = "var(--text-weak)"
+  tokens["syntax-primitive"] = isDark ? "#ffba92" : "#fb4804"
+  tokens["syntax-operator"] = isDark ? "var(--text-weak)" : "var(--text-base)"
+  tokens["syntax-variable"] = "var(--text-strong)"
+  tokens["syntax-property"] = isDark ? "#ff9ae2" : "#ed6dc8"
+  tokens["syntax-type"] = isDark ? "#ecf58c" : "#596600"
+  tokens["syntax-constant"] = isDark ? "#93e9f6" : "#007b80"
+  tokens["syntax-punctuation"] = isDark ? "var(--text-weak)" : "var(--text-base)"
+  tokens["syntax-object"] = "var(--text-strong)"
+  tokens["syntax-success"] = success[9]
+  tokens["syntax-warning"] = warning[9]
+  tokens["syntax-critical"] = error[isDark ? 9 : 9]
+  tokens["syntax-info"] = isDark ? "#93e9f6" : "#0092a8"
+  tokens["syntax-diff-add"] = diffAdd[10]
+  tokens["syntax-diff-delete"] = diffDelete[10]
+  tokens["syntax-diff-unknown"] = "#ff0000"
+
+  // === Markdown tokens ===
+  tokens["markdown-heading"] = isDark ? "#9d7cd8" : "#d68c27"
+  tokens["markdown-text"] = isDark ? "#eeeeee" : "#1a1a1a"
+  tokens["markdown-link"] = isDark ? "#fab283" : "#3b7dd8"
+  tokens["markdown-link-text"] = isDark ? "#56b6c2" : "#318795"
+  tokens["markdown-code"] = isDark ? "#7fd88f" : "#3d9a57"
+  tokens["markdown-block-quote"] = isDark ? "#e5c07b" : "#b0851f"
+  tokens["markdown-emph"] = isDark ? "#e5c07b" : "#b0851f"
+  tokens["markdown-strong"] = isDark ? "#f5a742" : "#d68c27"
+  tokens["markdown-horizontal-rule"] = isDark ? "#808080" : "#8a8a8a"
+  tokens["markdown-list-item"] = isDark ? "#fab283" : "#3b7dd8"
+  tokens["markdown-list-enumeration"] = isDark ? "#56b6c2" : "#318795"
+  tokens["markdown-image"] = isDark ? "#fab283" : "#3b7dd8"
+  tokens["markdown-image-text"] = isDark ? "#56b6c2" : "#318795"
+  tokens["markdown-code-block"] = isDark ? "#eeeeee" : "#1a1a1a"
+
+  // === Avatar tokens ===
+  tokens["avatar-background-pink"] = isDark ? "#501b3f" : "#feeef8"
+  tokens["avatar-background-mint"] = isDark ? "#033a34" : "#e1fbf4"
+  tokens["avatar-background-orange"] = isDark ? "#5f2a06" : "#fff1e7"
+  tokens["avatar-background-purple"] = isDark ? "#432155" : "#f9f1fe"
+  tokens["avatar-background-cyan"] = isDark ? "#0f3058" : "#e7f9fb"
+  tokens["avatar-background-lime"] = isDark ? "#2b3711" : "#eefadc"
+  tokens["avatar-text-pink"] = isDark ? "#e34ba9" : "#cd1d8d"
+  tokens["avatar-text-mint"] = isDark ? "#95f3d9" : "#147d6f"
+  tokens["avatar-text-orange"] = isDark ? "#ff802b" : "#ed5f00"
+  tokens["avatar-text-purple"] = isDark ? "#9d5bd2" : "#8445bc"
+  tokens["avatar-text-cyan"] = isDark ? "#369eff" : "#0894b3"
+  tokens["avatar-text-lime"] = isDark ? "#c4f042" : "#5d770d"
+
+  // Apply any overrides
+  for (const [key, value] of Object.entries(overrides)) {
+    tokens[key] = value
+  }
+
+  return tokens
+}
+
+/**
+ * Generate neutral alpha scale (approximated as solid colors)
+ */
+function generateNeutralAlphaScale(neutralScale: HexColor[], isDark: boolean): HexColor[] {
+  const alphas = isDark
+    ? [0.02, 0.04, 0.08, 0.12, 0.16, 0.2, 0.26, 0.36, 0.44, 0.52, 0.72, 0.94]
+    : [0.01, 0.03, 0.06, 0.09, 0.12, 0.15, 0.2, 0.27, 0.46, 0.61, 0.5, 0.87]
+
+  return neutralScale.map((hex, i) => {
+    const baseOklch = hexToOklch(hex)
+    // Adjust lightness based on alpha - closer to background color
+    const targetL = isDark ? 0.1 + alphas[i] * 0.8 : 1 - alphas[i] * 0.8
+    return oklchToHex({
+      ...baseOklch,
+      l: baseOklch.l * alphas[i] + targetL * (1 - alphas[i]),
+    })
+  })
+}
+
+/**
+ * Resolve a complete theme to CSS for both light and dark modes
+ */
+export function resolveTheme(theme: DesktopTheme): { light: ResolvedTheme; dark: ResolvedTheme } {
+  return {
+    light: resolveThemeVariant(theme.light, false),
+    dark: resolveThemeVariant(theme.dark, true),
+  }
+}
+
+/**
+ * Convert resolved theme tokens to CSS custom properties string
+ */
+export function themeToCss(tokens: ResolvedTheme): string {
+  return Object.entries(tokens)
+    .map(([key, value]) => `--${key}: ${value};`)
+    .join("\n  ")
+}
diff --git a/packages/ui/src/theme/themes/ayu.json b/packages/ui/src/theme/themes/ayu.json
new file mode 100644
index 00000000000..944241450ac
--- /dev/null
+++ b/packages/ui/src/theme/themes/ayu.json
@@ -0,0 +1,131 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Ayu",
+  "id": "ayu",
+  "light": {
+    "seeds": {
+      "neutral": "#fdfaf4",
+      "primary": "#55b4d4",
+      "success": "#6ac782",
+      "warning": "#f2ae49",
+      "error": "#f05f65",
+      "info": "#36a3d9",
+      "interactive": "#55b4d4",
+      "diffAdd": "#b8df8a",
+      "diffDelete": "#f05f65"
+    },
+    "overrides": {
+      "background-base": "#fdfaf4",
+      "background-weak": "#f6f0e7",
+      "background-strong": "#f1ebe2",
+      "background-stronger": "#ece4da",
+      "border-weak-base": "#e6ddcf",
+      "border-weak-hover": "#dcd3c5",
+      "border-weak-active": "#d1c9ba",
+      "border-weak-selected": "#c6bfaf",
+      "border-weak-disabled": "#f7f0e6",
+      "border-weak-focus": "#cbc4b6",
+      "border-base": "#bfb3a3",
+      "border-hover": "#b4a898",
+      "border-active": "#a99e8e",
+      "border-selected": "#9e9383",
+      "border-disabled": "#efe5d8",
+      "border-focus": "#b09f8f",
+      "border-strong-base": "#8f806f",
+      "border-strong-hover": "#837465",
+      "border-strong-active": "#77685a",
+      "border-strong-selected": "#6b5d51",
+      "border-strong-disabled": "#d8cabc",
+      "border-strong-focus": "#7c6d5e",
+      "surface-diff-add-base": "#eef5e4",
+      "surface-diff-delete-base": "#fde5e5",
+      "surface-diff-hidden-base": "#e3edf3",
+      "text-base": "#5c6773",
+      "text-weak": "#8a939f",
+      "text-strong": "#2a3038",
+      "syntax-string": "#86b300",
+      "syntax-primitive": "#f28779",
+      "syntax-property": "#55b4d4",
+      "syntax-type": "#f29e32",
+      "syntax-constant": "#36a3d9",
+      "syntax-info": "#36a3d9",
+      "markdown-heading": "#55b4d4",
+      "markdown-text": "#5c6773",
+      "markdown-link": "#55b4d4",
+      "markdown-link-text": "#36a3d9",
+      "markdown-code": "#86b300",
+      "markdown-block-quote": "#f29e32",
+      "markdown-emph": "#f29e32",
+      "markdown-strong": "#f28779",
+      "markdown-horizontal-rule": "#d7cec0",
+      "markdown-list-item": "#55b4d4",
+      "markdown-list-enumeration": "#36a3d9",
+      "markdown-image": "#55b4d4",
+      "markdown-image-text": "#36a3d9",
+      "markdown-code-block": "#55b4d4"
+    }
+  },
+  "dark": {
+    "seeds": {
+      "neutral": "#0f1419",
+      "primary": "#39bae6",
+      "success": "#7fd962",
+      "warning": "#ebb062",
+      "error": "#ff8f77",
+      "info": "#73d0ff",
+      "interactive": "#39bae6",
+      "diffAdd": "#5cc885",
+      "diffDelete": "#ff8f77"
+    },
+    "overrides": {
+      "background-base": "#0f1419",
+      "background-weak": "#121920",
+      "background-strong": "#0d1116",
+      "background-stronger": "#0a0e13",
+      "border-weak-base": "#262c34",
+      "border-weak-hover": "#2b323d",
+      "border-weak-active": "#303746",
+      "border-weak-selected": "#363d50",
+      "border-weak-disabled": "#080b0f",
+      "border-weak-focus": "#323a48",
+      "border-base": "#3d4555",
+      "border-hover": "#454d61",
+      "border-active": "#4c556d",
+      "border-selected": "#545d79",
+      "border-disabled": "#0e1218",
+      "border-focus": "#495368",
+      "border-strong-base": "#626c81",
+      "border-strong-hover": "#6c7690",
+      "border-strong-active": "#76819f",
+      "border-strong-selected": "#808bae",
+      "border-strong-disabled": "#151b23",
+      "border-strong-focus": "#6f7a96",
+      "surface-diff-add-base": "#102922",
+      "surface-diff-delete-base": "#2b1718",
+      "surface-diff-hidden-base": "#182028",
+      "text-base": "#ced0d6",
+      "text-weak": "#8f9aa5",
+      "text-strong": "#f6f7f9",
+      "syntax-string": "#b8cc52",
+      "syntax-primitive": "#f59074",
+      "syntax-property": "#39bae6",
+      "syntax-type": "#ebb062",
+      "syntax-constant": "#73d0ff",
+      "syntax-info": "#73d0ff",
+      "markdown-heading": "#39bae6",
+      "markdown-text": "#ced0d6",
+      "markdown-link": "#39bae6",
+      "markdown-link-text": "#73d0ff",
+      "markdown-code": "#b8cc52",
+      "markdown-block-quote": "#ebb062",
+      "markdown-emph": "#ebb062",
+      "markdown-strong": "#f59074",
+      "markdown-horizontal-rule": "#1f2630",
+      "markdown-list-item": "#39bae6",
+      "markdown-list-enumeration": "#73d0ff",
+      "markdown-image": "#39bae6",
+      "markdown-image-text": "#73d0ff",
+      "markdown-code-block": "#ced0d6"
+    }
+  }
+}
diff --git a/packages/ui/src/theme/themes/catppuccin.json b/packages/ui/src/theme/themes/catppuccin.json
new file mode 100644
index 00000000000..2a32df09846
--- /dev/null
+++ b/packages/ui/src/theme/themes/catppuccin.json
@@ -0,0 +1,131 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Catppuccin",
+  "id": "catppuccin",
+  "light": {
+    "seeds": {
+      "neutral": "#f5e0dc",
+      "primary": "#7287fd",
+      "success": "#40a02b",
+      "warning": "#df8e1d",
+      "error": "#d20f39",
+      "info": "#04a5e5",
+      "interactive": "#7287fd",
+      "diffAdd": "#a6d189",
+      "diffDelete": "#e78284"
+    },
+    "overrides": {
+      "background-base": "#f5e0dc",
+      "background-weak": "#f2d8d4",
+      "background-strong": "#f9e8e4",
+      "background-stronger": "#fdeeee",
+      "border-weak-base": "#e0cfd3",
+      "border-weak-hover": "#d6c4c8",
+      "border-weak-active": "#cdb9be",
+      "border-weak-selected": "#c2aeb4",
+      "border-weak-disabled": "#fbeff2",
+      "border-weak-focus": "#c7b4ba",
+      "border-base": "#bca6b2",
+      "border-hover": "#b19ca8",
+      "border-active": "#a6929e",
+      "border-selected": "#9a8894",
+      "border-disabled": "#f3e4e7",
+      "border-focus": "#ab97a1",
+      "border-strong-base": "#83677f",
+      "border-strong-hover": "#775b73",
+      "border-strong-active": "#6b5068",
+      "border-strong-selected": "#5f465d",
+      "border-strong-disabled": "#d9c5cf",
+      "border-strong-focus": "#714f66",
+      "surface-diff-add-base": "#edf5e6",
+      "surface-diff-delete-base": "#fde1e3",
+      "surface-diff-hidden-base": "#e4e2f6",
+      "text-base": "#4c4f69",
+      "text-weak": "#6c6f85",
+      "text-strong": "#1f1f2a",
+      "syntax-string": "#40a02b",
+      "syntax-primitive": "#d20f39",
+      "syntax-property": "#7287fd",
+      "syntax-type": "#df8e1d",
+      "syntax-constant": "#04a5e5",
+      "syntax-info": "#04a5e5",
+      "markdown-heading": "#7287fd",
+      "markdown-text": "#4c4f69",
+      "markdown-link": "#7287fd",
+      "markdown-link-text": "#04a5e5",
+      "markdown-code": "#40a02b",
+      "markdown-block-quote": "#df8e1d",
+      "markdown-emph": "#df8e1d",
+      "markdown-strong": "#d20f39",
+      "markdown-horizontal-rule": "#d4c5cf",
+      "markdown-list-item": "#7287fd",
+      "markdown-list-enumeration": "#04a5e5",
+      "markdown-image": "#7287fd",
+      "markdown-image-text": "#04a5e5",
+      "markdown-code-block": "#7287fd"
+    }
+  },
+  "dark": {
+    "seeds": {
+      "neutral": "#1e1e2e",
+      "primary": "#b4befe",
+      "success": "#a6d189",
+      "warning": "#f4b8e4",
+      "error": "#f38ba8",
+      "info": "#89dceb",
+      "interactive": "#b4befe",
+      "diffAdd": "#94e2d5",
+      "diffDelete": "#f38ba8"
+    },
+    "overrides": {
+      "background-base": "#1e1e2e",
+      "background-weak": "#211f31",
+      "background-strong": "#1c1c29",
+      "background-stronger": "#191926",
+      "border-weak-base": "#35324a",
+      "border-weak-hover": "#393655",
+      "border-weak-active": "#403c61",
+      "border-weak-selected": "#47436d",
+      "border-weak-disabled": "#141426",
+      "border-weak-focus": "#3d3a63",
+      "border-base": "#4a4763",
+      "border-hover": "#524f70",
+      "border-active": "#5a577d",
+      "border-selected": "#625f8a",
+      "border-disabled": "#1b1a2c",
+      "border-focus": "#575379",
+      "border-strong-base": "#6e6a8c",
+      "border-strong-hover": "#787497",
+      "border-strong-active": "#8380a2",
+      "border-strong-selected": "#8d8bad",
+      "border-strong-disabled": "#232237",
+      "border-strong-focus": "#7b779b",
+      "surface-diff-add-base": "#1d2c30",
+      "surface-diff-delete-base": "#2c1f2a",
+      "surface-diff-hidden-base": "#232538",
+      "text-base": "#cdd6f4",
+      "text-weak": "#a6adc8",
+      "text-strong": "#f4f2ff",
+      "syntax-string": "#a6e3a1",
+      "syntax-primitive": "#f38ba8",
+      "syntax-property": "#b4befe",
+      "syntax-type": "#f9e2af",
+      "syntax-constant": "#89dceb",
+      "syntax-info": "#89dceb",
+      "markdown-heading": "#b4befe",
+      "markdown-text": "#cdd6f4",
+      "markdown-link": "#b4befe",
+      "markdown-link-text": "#89dceb",
+      "markdown-code": "#a6e3a1",
+      "markdown-block-quote": "#f9e2af",
+      "markdown-emph": "#f9e2af",
+      "markdown-strong": "#f38ba8",
+      "markdown-horizontal-rule": "#2e2d45",
+      "markdown-list-item": "#b4befe",
+      "markdown-list-enumeration": "#89dceb",
+      "markdown-image": "#b4befe",
+      "markdown-image-text": "#89dceb",
+      "markdown-code-block": "#cdd6f4"
+    }
+  }
+}
diff --git a/packages/ui/src/theme/themes/dracula.json b/packages/ui/src/theme/themes/dracula.json
new file mode 100644
index 00000000000..696f1060c70
--- /dev/null
+++ b/packages/ui/src/theme/themes/dracula.json
@@ -0,0 +1,131 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Dracula",
+  "id": "dracula",
+  "light": {
+    "seeds": {
+      "neutral": "#f8f8f2",
+      "primary": "#7c6bf5",
+      "success": "#2fbf71",
+      "warning": "#f7a14d",
+      "error": "#d9536f",
+      "info": "#1d7fc5",
+      "interactive": "#7c6bf5",
+      "diffAdd": "#9fe3b3",
+      "diffDelete": "#f8a1b8"
+    },
+    "overrides": {
+      "background-base": "#f8f8f2",
+      "background-weak": "#f1f2ed",
+      "background-strong": "#f6f6f1",
+      "background-stronger": "#f2f2ec",
+      "border-weak-base": "#e2e3da",
+      "border-weak-hover": "#d8d9d0",
+      "border-weak-active": "#cfd0c7",
+      "border-weak-selected": "#c4c6bc",
+      "border-weak-disabled": "#eceee3",
+      "border-weak-focus": "#c9cabf",
+      "border-base": "#c4c6ba",
+      "border-hover": "#b8baae",
+      "border-active": "#abada3",
+      "border-selected": "#979a90",
+      "border-disabled": "#e5e7dd",
+      "border-focus": "#b0b2a7",
+      "border-strong-base": "#9fa293",
+      "border-strong-hover": "#8e9185",
+      "border-strong-active": "#7e8176",
+      "border-strong-selected": "#6f7268",
+      "border-strong-disabled": "#c7c9be",
+      "border-strong-focus": "#878b7f",
+      "surface-diff-add-base": "#e4f5e6",
+      "surface-diff-delete-base": "#fae4eb",
+      "surface-diff-hidden-base": "#dedfe9",
+      "text-base": "#1f1f2f",
+      "text-weak": "#52526b",
+      "text-strong": "#05040c",
+      "syntax-string": "#2fbf71",
+      "syntax-primitive": "#d16090",
+      "syntax-property": "#7c6bf5",
+      "syntax-type": "#f7a14d",
+      "syntax-constant": "#1d7fc5",
+      "syntax-info": "#1d7fc5",
+      "markdown-heading": "#7c6bf5",
+      "markdown-text": "#1f1f2f",
+      "markdown-link": "#7c6bf5",
+      "markdown-link-text": "#1d7fc5",
+      "markdown-code": "#2fbf71",
+      "markdown-block-quote": "#f7a14d",
+      "markdown-emph": "#f7a14d",
+      "markdown-strong": "#d16090",
+      "markdown-horizontal-rule": "#c3c5d4",
+      "markdown-list-item": "#7c6bf5",
+      "markdown-list-enumeration": "#1d7fc5",
+      "markdown-image": "#7c6bf5",
+      "markdown-image-text": "#1d7fc5",
+      "markdown-code-block": "#1d7fc5"
+    }
+  },
+  "dark": {
+    "seeds": {
+      "neutral": "#1d1e28",
+      "primary": "#bd93f9",
+      "success": "#50fa7b",
+      "warning": "#ffb86c",
+      "error": "#ff5555",
+      "info": "#8be9fd",
+      "interactive": "#bd93f9",
+      "diffAdd": "#2fb27d",
+      "diffDelete": "#ff6b81"
+    },
+    "overrides": {
+      "background-base": "#14151f",
+      "background-weak": "#181926",
+      "background-strong": "#161722",
+      "background-stronger": "#191a26",
+      "border-weak-base": "#2d2f3c",
+      "border-weak-hover": "#303244",
+      "border-weak-active": "#35364c",
+      "border-weak-selected": "#3b3d55",
+      "border-weak-disabled": "#1e1f2b",
+      "border-weak-focus": "#383a50",
+      "border-base": "#3f415a",
+      "border-hover": "#464967",
+      "border-active": "#4d5073",
+      "border-selected": "#55587f",
+      "border-disabled": "#272834",
+      "border-focus": "#4a4d6d",
+      "border-strong-base": "#606488",
+      "border-strong-hover": "#6a6e96",
+      "border-strong-active": "#7378a3",
+      "border-strong-selected": "#7d82b1",
+      "border-strong-disabled": "#343649",
+      "border-strong-focus": "#6f739c",
+      "surface-diff-add-base": "#1f2a2f",
+      "surface-diff-delete-base": "#2d1f27",
+      "surface-diff-hidden-base": "#24253a",
+      "text-base": "#f8f8f2",
+      "text-weak": "#b6b9e4",
+      "text-strong": "#ffffff",
+      "syntax-string": "#50fa7b",
+      "syntax-primitive": "#ff79c6",
+      "syntax-property": "#bd93f9",
+      "syntax-type": "#ffb86c",
+      "syntax-constant": "#8be9fd",
+      "syntax-info": "#8be9fd",
+      "markdown-heading": "#bd93f9",
+      "markdown-text": "#f8f8f2",
+      "markdown-link": "#bd93f9",
+      "markdown-link-text": "#8be9fd",
+      "markdown-code": "#50fa7b",
+      "markdown-block-quote": "#ffb86c",
+      "markdown-emph": "#ffb86c",
+      "markdown-strong": "#ff79c6",
+      "markdown-horizontal-rule": "#44475a",
+      "markdown-list-item": "#bd93f9",
+      "markdown-list-enumeration": "#8be9fd",
+      "markdown-image": "#bd93f9",
+      "markdown-image-text": "#8be9fd",
+      "markdown-code-block": "#f8f8f2"
+    }
+  }
+}
diff --git a/packages/ui/src/theme/themes/monokai.json b/packages/ui/src/theme/themes/monokai.json
new file mode 100644
index 00000000000..d49846ddb3e
--- /dev/null
+++ b/packages/ui/src/theme/themes/monokai.json
@@ -0,0 +1,131 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Monokai",
+  "id": "monokai",
+  "light": {
+    "seeds": {
+      "neutral": "#fdf8ec",
+      "primary": "#bf7bff",
+      "success": "#4fb54b",
+      "warning": "#f1a948",
+      "error": "#e54b4b",
+      "info": "#2d9ad7",
+      "interactive": "#bf7bff",
+      "diffAdd": "#bfe7a3",
+      "diffDelete": "#f6a3ae"
+    },
+    "overrides": {
+      "background-base": "#fdf8ec",
+      "background-weak": "#f8f2e6",
+      "background-strong": "#fbf5e8",
+      "background-stronger": "#f7efdd",
+      "border-weak-base": "#e9e0cf",
+      "border-weak-hover": "#dfd5c3",
+      "border-weak-active": "#d5cab7",
+      "border-weak-selected": "#cabfad",
+      "border-weak-disabled": "#f3ebdd",
+      "border-weak-focus": "#d0c2b1",
+      "border-base": "#c7b9a5",
+      "border-hover": "#bcae98",
+      "border-active": "#b0a28c",
+      "border-selected": "#a49781",
+      "border-disabled": "#efe5d6",
+      "border-focus": "#b6a893",
+      "border-strong-base": "#998b76",
+      "border-strong-hover": "#8a7c67",
+      "border-strong-active": "#7a6d58",
+      "border-strong-selected": "#6c604c",
+      "border-strong-disabled": "#d7cabc",
+      "border-strong-focus": "#82745f",
+      "surface-diff-add-base": "#e8f7e1",
+      "surface-diff-delete-base": "#fde5e4",
+      "surface-diff-hidden-base": "#e9e0d0",
+      "text-base": "#292318",
+      "text-weak": "#6d5c40",
+      "text-strong": "#1c150c",
+      "syntax-string": "#4fb54b",
+      "syntax-primitive": "#d9487c",
+      "syntax-property": "#bf7bff",
+      "syntax-type": "#f1a948",
+      "syntax-constant": "#2d9ad7",
+      "syntax-info": "#2d9ad7",
+      "markdown-heading": "#bf7bff",
+      "markdown-text": "#292318",
+      "markdown-link": "#bf7bff",
+      "markdown-link-text": "#2d9ad7",
+      "markdown-code": "#4fb54b",
+      "markdown-block-quote": "#f1a948",
+      "markdown-emph": "#f1a948",
+      "markdown-strong": "#d9487c",
+      "markdown-horizontal-rule": "#cdbdab",
+      "markdown-list-item": "#bf7bff",
+      "markdown-list-enumeration": "#2d9ad7",
+      "markdown-image": "#bf7bff",
+      "markdown-image-text": "#2d9ad7",
+      "markdown-code-block": "#2d9ad7"
+    }
+  },
+  "dark": {
+    "seeds": {
+      "neutral": "#272822",
+      "primary": "#ae81ff",
+      "success": "#a6e22e",
+      "warning": "#fd971f",
+      "error": "#f92672",
+      "info": "#66d9ef",
+      "interactive": "#ae81ff",
+      "diffAdd": "#4d7f2a",
+      "diffDelete": "#f4477c"
+    },
+    "overrides": {
+      "background-base": "#23241e",
+      "background-weak": "#27281f",
+      "background-strong": "#25261f",
+      "background-stronger": "#292a23",
+      "border-weak-base": "#343528",
+      "border-weak-hover": "#393a2d",
+      "border-weak-active": "#3f4033",
+      "border-weak-selected": "#454639",
+      "border-weak-disabled": "#1d1e16",
+      "border-weak-focus": "#414235",
+      "border-base": "#494a3a",
+      "border-hover": "#50523f",
+      "border-active": "#585a45",
+      "border-selected": "#60624b",
+      "border-disabled": "#23241b",
+      "border-focus": "#555741",
+      "border-strong-base": "#6a6c55",
+      "border-strong-hover": "#73755d",
+      "border-strong-active": "#7d7f66",
+      "border-strong-selected": "#878970",
+      "border-strong-disabled": "#2c2d23",
+      "border-strong-focus": "#7a7c63",
+      "surface-diff-add-base": "#1e2a1d",
+      "surface-diff-delete-base": "#301c24",
+      "surface-diff-hidden-base": "#2f2f24",
+      "text-base": "#f8f8f2",
+      "text-weak": "#c5c5c0",
+      "text-strong": "#ffffff",
+      "syntax-string": "#a6e22e",
+      "syntax-primitive": "#f92672",
+      "syntax-property": "#ae81ff",
+      "syntax-type": "#fd971f",
+      "syntax-constant": "#66d9ef",
+      "syntax-info": "#66d9ef",
+      "markdown-heading": "#ae81ff",
+      "markdown-text": "#f8f8f2",
+      "markdown-link": "#ae81ff",
+      "markdown-link-text": "#66d9ef",
+      "markdown-code": "#a6e22e",
+      "markdown-block-quote": "#fd971f",
+      "markdown-emph": "#fd971f",
+      "markdown-strong": "#f92672",
+      "markdown-horizontal-rule": "#3b3c34",
+      "markdown-list-item": "#ae81ff",
+      "markdown-list-enumeration": "#66d9ef",
+      "markdown-image": "#ae81ff",
+      "markdown-image-text": "#66d9ef",
+      "markdown-code-block": "#f8f8f2"
+    }
+  }
+}
diff --git a/packages/ui/src/theme/themes/nord.json b/packages/ui/src/theme/themes/nord.json
new file mode 100644
index 00000000000..44378de06ab
--- /dev/null
+++ b/packages/ui/src/theme/themes/nord.json
@@ -0,0 +1,131 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Nord",
+  "id": "nord",
+  "light": {
+    "seeds": {
+      "neutral": "#eceff4",
+      "primary": "#5e81ac",
+      "success": "#8fbcbb",
+      "warning": "#d08770",
+      "error": "#bf616a",
+      "info": "#81a1c1",
+      "interactive": "#5e81ac",
+      "diffAdd": "#a3be8c",
+      "diffDelete": "#bf616a"
+    },
+    "overrides": {
+      "background-base": "#eceff4",
+      "background-weak": "#e4e8f0",
+      "background-strong": "#f1f3f8",
+      "background-stronger": "#f6f8fc",
+      "border-weak-base": "#d5dbe7",
+      "border-weak-hover": "#c9d0de",
+      "border-weak-active": "#bec5d4",
+      "border-weak-selected": "#b2bacc",
+      "border-weak-disabled": "#f0f3fa",
+      "border-weak-focus": "#b9bfd0",
+      "border-base": "#afb7cb",
+      "border-hover": "#a3abc1",
+      "border-active": "#979fb7",
+      "border-selected": "#8b94ad",
+      "border-disabled": "#e5e9f2",
+      "border-focus": "#9ca4ba",
+      "border-strong-base": "#757f97",
+      "border-strong-hover": "#69718a",
+      "border-strong-active": "#5d647d",
+      "border-strong-selected": "#525970",
+      "border-strong-disabled": "#c9cedc",
+      "border-strong-focus": "#636c84",
+      "surface-diff-add-base": "#e4f0e4",
+      "surface-diff-delete-base": "#f4e1e4",
+      "surface-diff-hidden-base": "#dfe6f2",
+      "text-base": "#2e3440",
+      "text-weak": "#4c566a",
+      "text-strong": "#1f2530",
+      "syntax-string": "#a3be8c",
+      "syntax-primitive": "#bf616a",
+      "syntax-property": "#5e81ac",
+      "syntax-type": "#d08770",
+      "syntax-constant": "#81a1c1",
+      "syntax-info": "#81a1c1",
+      "markdown-heading": "#5e81ac",
+      "markdown-text": "#2e3440",
+      "markdown-link": "#5e81ac",
+      "markdown-link-text": "#81a1c1",
+      "markdown-code": "#a3be8c",
+      "markdown-block-quote": "#d08770",
+      "markdown-emph": "#d08770",
+      "markdown-strong": "#bf616a",
+      "markdown-horizontal-rule": "#cbd3e1",
+      "markdown-list-item": "#5e81ac",
+      "markdown-list-enumeration": "#81a1c1",
+      "markdown-image": "#5e81ac",
+      "markdown-image-text": "#81a1c1",
+      "markdown-code-block": "#5e81ac"
+    }
+  },
+  "dark": {
+    "seeds": {
+      "neutral": "#2e3440",
+      "primary": "#88c0d0",
+      "success": "#a3be8c",
+      "warning": "#d08770",
+      "error": "#bf616a",
+      "info": "#81a1c1",
+      "interactive": "#88c0d0",
+      "diffAdd": "#81a1c1",
+      "diffDelete": "#bf616a"
+    },
+    "overrides": {
+      "background-base": "#1f2430",
+      "background-weak": "#222938",
+      "background-strong": "#1c202a",
+      "background-stronger": "#181c24",
+      "border-weak-base": "#343a47",
+      "border-weak-hover": "#383f50",
+      "border-weak-active": "#3d4458",
+      "border-weak-selected": "#434a62",
+      "border-weak-disabled": "#151923",
+      "border-weak-focus": "#3f4359",
+      "border-base": "#4a5163",
+      "border-hover": "#515870",
+      "border-active": "#585f7c",
+      "border-selected": "#606889",
+      "border-disabled": "#1b202a",
+      "border-focus": "#545b78",
+      "border-strong-base": "#6a7492",
+      "border-strong-hover": "#747e9f",
+      "border-strong-active": "#7e88ac",
+      "border-strong-selected": "#8993b9",
+      "border-strong-disabled": "#232836",
+      "border-strong-focus": "#76819f",
+      "surface-diff-add-base": "#1f2e33",
+      "surface-diff-delete-base": "#2e212a",
+      "surface-diff-hidden-base": "#222b3a",
+      "text-base": "#e5e9f0",
+      "text-weak": "#a4adbf",
+      "text-strong": "#f8fafc",
+      "syntax-string": "#a3be8c",
+      "syntax-primitive": "#d57780",
+      "syntax-property": "#88c0d0",
+      "syntax-type": "#eac196",
+      "syntax-constant": "#81a1c1",
+      "syntax-info": "#81a1c1",
+      "markdown-heading": "#88c0d0",
+      "markdown-text": "#e5e9f0",
+      "markdown-link": "#88c0d0",
+      "markdown-link-text": "#81a1c1",
+      "markdown-code": "#a3be8c",
+      "markdown-block-quote": "#d08770",
+      "markdown-emph": "#d08770",
+      "markdown-strong": "#bf616a",
+      "markdown-horizontal-rule": "#2f384a",
+      "markdown-list-item": "#88c0d0",
+      "markdown-list-enumeration": "#81a1c1",
+      "markdown-image": "#88c0d0",
+      "markdown-image-text": "#81a1c1",
+      "markdown-code-block": "#cbd3e1"
+    }
+  }
+}
diff --git a/packages/ui/src/theme/themes/oc-1.json b/packages/ui/src/theme/themes/oc-1.json
new file mode 100644
index 00000000000..9f54bd6b44f
--- /dev/null
+++ b/packages/ui/src/theme/themes/oc-1.json
@@ -0,0 +1,535 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "OC-1",
+  "id": "oc-1",
+  "light": {
+    "seeds": {
+      "neutral": "#8e8b8b",
+      "primary": "#dcde8d",
+      "success": "#12c905",
+      "warning": "#ffdc17",
+      "error": "#fc533a",
+      "info": "#a753ae",
+      "interactive": "#034cff",
+      "diffAdd": "#9ff29a",
+      "diffDelete": "#fc533a"
+    },
+    "overrides": {
+      "background-base": "#f8f7f7",
+      "background-weak": "var(--smoke-light-3)",
+      "background-strong": "var(--smoke-light-1)",
+      "background-stronger": "#fcfcfc",
+      "surface-base": "var(--smoke-light-alpha-2)",
+      "base": "var(--smoke-light-alpha-2)",
+      "surface-base-hover": "#0500000f",
+      "surface-base-active": "var(--smoke-light-alpha-3)",
+      "surface-base-interactive-active": "var(--cobalt-light-alpha-3)",
+      "base2": "var(--smoke-light-alpha-2)",
+      "base3": "var(--smoke-light-alpha-2)",
+      "surface-inset-base": "var(--smoke-light-alpha-2)",
+      "surface-inset-base-hover": "var(--smoke-light-alpha-3)",
+      "surface-inset-strong": "#1f000017",
+      "surface-inset-strong-hover": "#1f000017",
+      "surface-raised-base": "var(--smoke-light-alpha-1)",
+      "surface-float-base": "var(--smoke-dark-1)",
+      "surface-float-base-hover": "var(--smoke-dark-2)",
+      "surface-raised-base-hover": "var(--smoke-light-alpha-2)",
+      "surface-raised-base-active": "var(--smoke-light-alpha-3)",
+      "surface-raised-strong": "var(--smoke-light-1)",
+      "surface-raised-strong-hover": "var(--white)",
+      "surface-raised-stronger": "var(--white)",
+      "surface-raised-stronger-hover": "var(--white)",
+      "surface-weak": "var(--smoke-light-alpha-3)",
+      "surface-weaker": "var(--smoke-light-alpha-4)",
+      "surface-strong": "#ffffff",
+      "surface-raised-stronger-non-alpha": "var(--white)",
+      "surface-brand-base": "var(--yuzu-light-9)",
+      "surface-brand-hover": "var(--yuzu-light-10)",
+      "surface-interactive-base": "var(--cobalt-light-3)",
+      "surface-interactive-hover": "var(--cobalt-light-4)",
+      "surface-interactive-weak": "var(--cobalt-light-2)",
+      "surface-interactive-weak-hover": "var(--cobalt-light-3)",
+      "surface-success-base": "var(--apple-light-3)",
+      "surface-success-weak": "var(--apple-light-2)",
+      "surface-success-strong": "var(--apple-light-9)",
+      "surface-warning-base": "var(--solaris-light-3)",
+      "surface-warning-weak": "var(--solaris-light-2)",
+      "surface-warning-strong": "var(--solaris-light-9)",
+      "surface-critical-base": "var(--ember-light-3)",
+      "surface-critical-weak": "var(--ember-light-2)",
+      "surface-critical-strong": "var(--ember-light-9)",
+      "surface-info-base": "var(--lilac-light-3)",
+      "surface-info-weak": "var(--lilac-light-2)",
+      "surface-info-strong": "var(--lilac-light-9)",
+      "surface-diff-unchanged-base": "#ffffff00",
+      "surface-diff-skip-base": "var(--smoke-light-2)",
+      "surface-diff-hidden-base": "var(--blue-light-3)",
+      "surface-diff-hidden-weak": "var(--blue-light-2)",
+      "surface-diff-hidden-weaker": "var(--blue-light-1)",
+      "surface-diff-hidden-strong": "var(--blue-light-5)",
+      "surface-diff-hidden-stronger": "var(--blue-light-9)",
+      "surface-diff-add-base": "#dafbe0",
+      "surface-diff-add-weak": "var(--mint-light-2)",
+      "surface-diff-add-weaker": "var(--mint-light-1)",
+      "surface-diff-add-strong": "var(--mint-light-5)",
+      "surface-diff-add-stronger": "var(--mint-light-9)",
+      "surface-diff-delete-base": "var(--ember-light-3)",
+      "surface-diff-delete-weak": "var(--ember-light-2)",
+      "surface-diff-delete-weaker": "var(--ember-light-1)",
+      "surface-diff-delete-strong": "var(--ember-light-6)",
+      "surface-diff-delete-stronger": "var(--ember-light-9)",
+      "input-base": "var(--smoke-light-1)",
+      "input-hover": "var(--smoke-light-2)",
+      "input-active": "var(--cobalt-light-1)",
+      "input-selected": "var(--cobalt-light-4)",
+      "input-focus": "var(--cobalt-light-1)",
+      "input-disabled": "var(--smoke-light-4)",
+      "text-base": "var(--smoke-light-11)",
+      "text-weak": "var(--smoke-light-9)",
+      "text-weaker": "var(--smoke-light-8)",
+      "text-strong": "var(--smoke-light-12)",
+      "text-invert-base": "var(--smoke-dark-alpha-11)",
+      "text-invert-weak": "var(--smoke-dark-alpha-9)",
+      "text-invert-weaker": "var(--smoke-dark-alpha-8)",
+      "text-invert-strong": "var(--smoke-dark-alpha-12)",
+      "text-interactive-base": "var(--cobalt-light-9)",
+      "text-on-brand-base": "var(--smoke-light-alpha-11)",
+      "text-on-interactive-base": "var(--smoke-light-1)",
+      "text-on-interactive-weak": "var(--smoke-dark-alpha-11)",
+      "text-on-success-base": "var(--apple-light-10)",
+      "text-on-critical-base": "var(--ember-light-10)",
+      "text-on-critical-weak": "var(--ember-light-8)",
+      "text-on-critical-strong": "var(--ember-light-12)",
+      "text-on-warning-base": "var(--smoke-dark-alpha-11)",
+      "text-on-info-base": "var(--smoke-dark-alpha-11)",
+      "text-diff-add-base": "var(--mint-light-11)",
+      "text-diff-delete-base": "var(--ember-light-10)",
+      "text-diff-delete-strong": "var(--ember-light-12)",
+      "text-diff-add-strong": "var(--mint-light-12)",
+      "text-on-info-weak": "var(--smoke-dark-alpha-9)",
+      "text-on-info-strong": "var(--smoke-dark-alpha-12)",
+      "text-on-warning-weak": "var(--smoke-dark-alpha-9)",
+      "text-on-warning-strong": "var(--smoke-dark-alpha-12)",
+      "text-on-success-weak": "var(--apple-light-6)",
+      "text-on-success-strong": "var(--apple-light-12)",
+      "text-on-brand-weak": "var(--smoke-light-alpha-9)",
+      "text-on-brand-weaker": "var(--smoke-light-alpha-8)",
+      "text-on-brand-strong": "var(--smoke-light-alpha-12)",
+      "button-secondary-base": "#fdfcfc",
+      "button-secondary-hover": "#faf9f9",
+      "border-base": "var(--smoke-light-alpha-7)",
+      "border-hover": "var(--smoke-light-alpha-8)",
+      "border-active": "var(--smoke-light-alpha-9)",
+      "border-selected": "var(--cobalt-light-alpha-9)",
+      "border-disabled": "var(--smoke-light-alpha-8)",
+      "border-focus": "var(--smoke-light-alpha-9)",
+      "border-weak-base": "var(--smoke-light-alpha-5)",
+      "border-strong-base": "var(--smoke-light-alpha-7)",
+      "border-strong-hover": "var(--smoke-light-alpha-8)",
+      "border-strong-active": "var(--smoke-light-alpha-7)",
+      "border-strong-selected": "var(--cobalt-light-alpha-6)",
+      "border-strong-disabled": "var(--smoke-light-alpha-6)",
+      "border-strong-focus": "var(--smoke-light-alpha-7)",
+      "border-weak-hover": "var(--smoke-light-alpha-6)",
+      "border-weak-active": "var(--smoke-light-alpha-7)",
+      "border-weak-selected": "var(--cobalt-light-alpha-5)",
+      "border-weak-disabled": "var(--smoke-light-alpha-6)",
+      "border-weak-focus": "var(--smoke-light-alpha-7)",
+      "border-interactive-base": "var(--cobalt-light-7)",
+      "border-interactive-hover": "var(--cobalt-light-8)",
+      "border-interactive-active": "var(--cobalt-light-9)",
+      "border-interactive-selected": "var(--cobalt-light-9)",
+      "border-interactive-disabled": "var(--smoke-light-8)",
+      "border-interactive-focus": "var(--cobalt-light-9)",
+      "border-success-base": "var(--apple-light-6)",
+      "border-success-hover": "var(--apple-light-7)",
+      "border-success-selected": "var(--apple-light-9)",
+      "border-warning-base": "var(--solaris-light-6)",
+      "border-warning-hover": "var(--solaris-light-7)",
+      "border-warning-selected": "var(--solaris-light-9)",
+      "border-critical-base": "var(--ember-light-6)",
+      "border-critical-hover": "var(--ember-light-7)",
+      "border-critical-selected": "var(--ember-light-9)",
+      "border-info-base": "var(--lilac-light-6)",
+      "border-info-hover": "var(--lilac-light-7)",
+      "border-info-selected": "var(--lilac-light-9)",
+      "icon-base": "var(--smoke-light-9)",
+      "icon-hover": "var(--smoke-light-11)",
+      "icon-active": "var(--smoke-light-12)",
+      "icon-selected": "var(--smoke-light-12)",
+      "icon-disabled": "var(--smoke-light-8)",
+      "icon-focus": "var(--smoke-light-12)",
+      "icon-invert-base": "#ffffff",
+      "icon-weak-base": "var(--smoke-light-7)",
+      "icon-weak-hover": "var(--smoke-light-8)",
+      "icon-weak-active": "var(--smoke-light-9)",
+      "icon-weak-selected": "var(--smoke-light-10)",
+      "icon-weak-disabled": "var(--smoke-light-6)",
+      "icon-weak-focus": "var(--smoke-light-9)",
+      "icon-strong-base": "var(--smoke-light-12)",
+      "icon-strong-hover": "#151313",
+      "icon-strong-active": "#020202",
+      "icon-strong-selected": "#020202",
+      "icon-strong-disabled": "var(--smoke-light-8)",
+      "icon-strong-focus": "#020202",
+      "icon-brand-base": "var(--smoke-light-12)",
+      "icon-interactive-base": "var(--cobalt-light-9)",
+      "icon-success-base": "var(--apple-light-7)",
+      "icon-success-hover": "var(--apple-light-8)",
+      "icon-success-active": "var(--apple-light-11)",
+      "icon-warning-base": "var(--amber-light-7)",
+      "icon-warning-hover": "var(--amber-light-8)",
+      "icon-warning-active": "var(--amber-light-11)",
+      "icon-critical-base": "var(--ember-light-10)",
+      "icon-critical-hover": "var(--ember-light-11)",
+      "icon-critical-active": "var(--ember-light-12)",
+      "icon-info-base": "var(--lilac-light-7)",
+      "icon-info-hover": "var(--lilac-light-8)",
+      "icon-info-active": "var(--lilac-light-11)",
+      "icon-on-brand-base": "var(--smoke-light-alpha-11)",
+      "icon-on-brand-hover": "var(--smoke-light-alpha-12)",
+      "icon-on-brand-selected": "var(--smoke-light-alpha-12)",
+      "icon-on-interactive-base": "var(--smoke-light-1)",
+      "icon-agent-plan-base": "var(--purple-light-9)",
+      "icon-agent-docs-base": "var(--amber-light-9)",
+      "icon-agent-ask-base": "var(--cyan-light-9)",
+      "icon-agent-build-base": "var(--cobalt-light-9)",
+      "icon-on-success-base": "var(--apple-light-alpha-9)",
+      "icon-on-success-hover": "var(--apple-light-alpha-10)",
+      "icon-on-success-selected": "var(--apple-light-alpha-11)",
+      "icon-on-warning-base": "var(--amber-lightalpha-9)",
+      "icon-on-warning-hover": "var(--amber-lightalpha-10)",
+      "icon-on-warning-selected": "var(--amber-lightalpha-11)",
+      "icon-on-critical-base": "var(--ember-light-alpha-9)",
+      "icon-on-critical-hover": "var(--ember-light-alpha-10)",
+      "icon-on-critical-selected": "var(--ember-light-alpha-11)",
+      "icon-on-info-base": "var(--lilac-light-9)",
+      "icon-on-info-hover": "var(--lilac-light-alpha-10)",
+      "icon-on-info-selected": "var(--lilac-light-alpha-11)",
+      "icon-diff-add-base": "var(--mint-light-11)",
+      "icon-diff-add-hover": "var(--mint-light-12)",
+      "icon-diff-add-active": "var(--mint-light-12)",
+      "icon-diff-delete-base": "var(--ember-light-10)",
+      "icon-diff-delete-hover": "var(--ember-light-11)",
+      "syntax-comment": "var(--text-weak)",
+      "syntax-regexp": "var(--text-base)",
+      "syntax-string": "#006656",
+      "syntax-keyword": "var(--text-weak)",
+      "syntax-primitive": "#fb4804",
+      "syntax-operator": "var(--text-base)",
+      "syntax-variable": "var(--text-strong)",
+      "syntax-property": "#ed6dc8",
+      "syntax-type": "#596600",
+      "syntax-constant": "#007b80",
+      "syntax-punctuation": "var(--text-base)",
+      "syntax-object": "var(--text-strong)",
+      "syntax-success": "var(--apple-light-10)",
+      "syntax-warning": "var(--amber-light-10)",
+      "syntax-critical": "var(--ember-light-10)",
+      "syntax-info": "#0092a8",
+      "syntax-diff-add": "var(--mint-light-11)",
+      "syntax-diff-delete": "var(--ember-light-11)",
+      "syntax-diff-unknown": "#ff0000",
+      "markdown-heading": "#d68c27",
+      "markdown-text": "#1a1a1a",
+      "markdown-link": "#3b7dd8",
+      "markdown-link-text": "#318795",
+      "markdown-code": "#3d9a57",
+      "markdown-block-quote": "#b0851f",
+      "markdown-emph": "#b0851f",
+      "markdown-strong": "#d68c27",
+      "markdown-horizontal-rule": "#8a8a8a",
+      "markdown-list-item": "#3b7dd8",
+      "markdown-list-enumeration": "#318795",
+      "markdown-image": "#3b7dd8",
+      "markdown-image-text": "#318795",
+      "markdown-code-block": "#1a1a1a",
+      "border-color": "#ffffff",
+      "border-weaker-base": "var(--smoke-light-alpha-3)",
+      "border-weaker-hover": "var(--smoke-light-alpha-4)",
+      "border-weaker-active": "var(--smoke-light-alpha-6)",
+      "border-weaker-selected": "var(--cobalt-light-alpha-4)",
+      "border-weaker-disabled": "var(--smoke-light-alpha-2)",
+      "border-weaker-focus": "var(--smoke-light-alpha-6)",
+      "button-ghost-hover": "var(--smoke-light-alpha-2)",
+      "button-ghost-hover2": "var(--smoke-light-alpha-3)",
+      "avatar-background-pink": "#feeef8",
+      "avatar-background-mint": "#e1fbf4",
+      "avatar-background-orange": "#fff1e7",
+      "avatar-background-purple": "#f9f1fe",
+      "avatar-background-cyan": "#e7f9fb",
+      "avatar-background-lime": "#eefadc",
+      "avatar-text-pink": "#cd1d8d",
+      "avatar-text-mint": "#147d6f",
+      "avatar-text-orange": "#ed5f00",
+      "avatar-text-purple": "#8445bc",
+      "avatar-text-cyan": "#0894b3",
+      "avatar-text-lime": "#5d770d"
+    }
+  },
+  "dark": {
+    "seeds": {
+      "neutral": "#716c6b",
+      "primary": "#fab283",
+      "success": "#12c905",
+      "warning": "#fcd53a",
+      "error": "#fc533a",
+      "info": "#edb2f1",
+      "interactive": "#034cff",
+      "diffAdd": "#c8ffc4",
+      "diffDelete": "#fc533a"
+    },
+    "overrides": {
+      "background-base": "var(--smoke-dark-1)",
+      "background-weak": "#1c1717",
+      "background-strong": "#151313",
+      "background-stronger": "#191515",
+      "surface-base": "var(--smoke-dark-alpha-2)",
+      "base": "var(--smoke-dark-alpha-2)",
+      "surface-base-hover": "#e0b7b716",
+      "surface-base-active": "var(--smoke-dark-alpha-3)",
+      "surface-base-interactive-active": "var(--cobalt-dark-alpha-2)",
+      "base2": "var(--smoke-dark-alpha-2)",
+      "base3": "var(--smoke-dark-alpha-2)",
+      "surface-inset-base": "#0e0b0b7f",
+      "surface-inset-base-hover": "#0e0b0b7f",
+      "surface-inset-strong": "#060505cc",
+      "surface-inset-strong-hover": "#060505cc",
+      "surface-raised-base": "var(--smoke-dark-alpha-3)",
+      "surface-float-base": "var(--smoke-dark-1)",
+      "surface-float-base-hover": "var(--smoke-dark-2)",
+      "surface-raised-base-hover": "var(--smoke-dark-alpha-4)",
+      "surface-raised-base-active": "var(--smoke-dark-alpha-5)",
+      "surface-raised-strong": "var(--smoke-dark-alpha-4)",
+      "surface-raised-strong-hover": "var(--smoke-dark-alpha-6)",
+      "surface-raised-stronger": "var(--smoke-dark-alpha-6)",
+      "surface-raised-stronger-hover": "var(--smoke-dark-alpha-7)",
+      "surface-weak": "var(--smoke-dark-alpha-4)",
+      "surface-weaker": "var(--smoke-dark-alpha-5)",
+      "surface-strong": "var(--smoke-dark-alpha-7)",
+      "surface-raised-stronger-non-alpha": "var(--smoke-dark-3)",
+      "surface-brand-base": "var(--yuzu-light-9)",
+      "surface-brand-hover": "var(--yuzu-light-10)",
+      "surface-interactive-base": "var(--cobalt-light-3)",
+      "surface-interactive-hover": "var(--cobalt-light-4)",
+      "surface-interactive-weak": "var(--cobalt-light-2)",
+      "surface-interactive-weak-hover": "var(--cobalt-light-3)",
+      "surface-success-base": "var(--apple-light-3)",
+      "surface-success-weak": "var(--apple-light-2)",
+      "surface-success-strong": "var(--apple-light-9)",
+      "surface-warning-base": "var(--solaris-light-3)",
+      "surface-warning-weak": "var(--solaris-light-2)",
+      "surface-warning-strong": "var(--solaris-light-9)",
+      "surface-critical-base": "var(--ember-dark-3)",
+      "surface-critical-weak": "var(--ember-dark-2)",
+      "surface-critical-strong": "var(--ember-dark-9)",
+      "surface-info-base": "var(--lilac-light-3)",
+      "surface-info-weak": "var(--lilac-light-2)",
+      "surface-info-strong": "var(--lilac-light-9)",
+      "surface-diff-unchanged-base": "var(--smoke-dark-1)",
+      "surface-diff-skip-base": "var(--smoke-dark-alpha-1)",
+      "surface-diff-hidden-base": "var(--blue-dark-2)",
+      "surface-diff-hidden-weak": "var(--blue-dark-1)",
+      "surface-diff-hidden-weaker": "var(--blue-dark-3)",
+      "surface-diff-hidden-strong": "var(--blue-dark-5)",
+      "surface-diff-hidden-stronger": "var(--blue-dark-11)",
+      "surface-diff-add-base": "var(--mint-dark-3)",
+      "surface-diff-add-weak": "var(--mint-dark-4)",
+      "surface-diff-add-weaker": "var(--mint-dark-3)",
+      "surface-diff-add-strong": "var(--mint-dark-5)",
+      "surface-diff-add-stronger": "var(--mint-dark-11)",
+      "surface-diff-delete-base": "var(--ember-dark-3)",
+      "surface-diff-delete-weak": "var(--ember-dark-4)",
+      "surface-diff-delete-weaker": "var(--ember-dark-3)",
+      "surface-diff-delete-strong": "var(--ember-dark-5)",
+      "surface-diff-delete-stronger": "var(--ember-dark-11)",
+      "input-base": "var(--smoke-dark-2)",
+      "input-hover": "var(--smoke-dark-2)",
+      "input-active": "var(--cobalt-dark-1)",
+      "input-selected": "var(--cobalt-dark-2)",
+      "input-focus": "var(--cobalt-dark-1)",
+      "input-disabled": "var(--smoke-dark-4)",
+      "text-base": "var(--smoke-dark-alpha-11)",
+      "text-weak": "var(--smoke-dark-alpha-9)",
+      "text-weaker": "var(--smoke-dark-alpha-8)",
+      "text-strong": "var(--smoke-dark-alpha-12)",
+      "text-invert-base": "var(--smoke-dark-alpha-11)",
+      "text-invert-weak": "var(--smoke-dark-alpha-9)",
+      "text-invert-weaker": "var(--smoke-dark-alpha-8)",
+      "text-invert-strong": "var(--smoke-dark-alpha-12)",
+      "text-interactive-base": "var(--cobalt-dark-11)",
+      "text-on-brand-base": "var(--smoke-dark-alpha-11)",
+      "text-on-interactive-base": "var(--smoke-dark-12)",
+      "text-on-interactive-weak": "var(--smoke-dark-alpha-11)",
+      "text-on-success-base": "var(--apple-dark-9)",
+      "text-on-critical-base": "var(--ember-dark-9)",
+      "text-on-critical-weak": "var(--ember-dark-8)",
+      "text-on-critical-strong": "var(--ember-dark-12)",
+      "text-on-warning-base": "var(--smoke-dark-alpha-11)",
+      "text-on-info-base": "var(--smoke-dark-alpha-11)",
+      "text-diff-add-base": "var(--mint-dark-11)",
+      "text-diff-delete-base": "var(--ember-dark-9)",
+      "text-diff-delete-strong": "var(--ember-dark-12)",
+      "text-diff-add-strong": "var(--mint-dark-8)",
+      "text-on-info-weak": "var(--smoke-dark-alpha-9)",
+      "text-on-info-strong": "var(--smoke-dark-alpha-12)",
+      "text-on-warning-weak": "var(--smoke-dark-alpha-9)",
+      "text-on-warning-strong": "var(--smoke-dark-alpha-12)",
+      "text-on-success-weak": "var(--apple-dark-8)",
+      "text-on-success-strong": "var(--apple-dark-12)",
+      "text-on-brand-weak": "var(--smoke-dark-alpha-9)",
+      "text-on-brand-weaker": "var(--smoke-dark-alpha-8)",
+      "text-on-brand-strong": "var(--smoke-dark-alpha-12)",
+      "button-secondary-base": "#231f1f",
+      "button-secondary-hover": "#2a2727",
+      "border-base": "var(--smoke-dark-alpha-7)",
+      "border-hover": "var(--smoke-dark-alpha-8)",
+      "border-active": "var(--smoke-dark-alpha-9)",
+      "border-selected": "var(--cobalt-dark-alpha-11)",
+      "border-disabled": "var(--smoke-dark-alpha-8)",
+      "border-focus": "var(--smoke-dark-alpha-9)",
+      "border-weak-base": "var(--smoke-dark-alpha-6)",
+      "border-strong-base": "var(--smoke-dark-alpha-8)",
+      "border-strong-hover": "var(--smoke-dark-alpha-7)",
+      "border-strong-active": "var(--smoke-dark-alpha-8)",
+      "border-strong-selected": "var(--cobalt-dark-alpha-6)",
+      "border-strong-disabled": "var(--smoke-dark-alpha-6)",
+      "border-strong-focus": "var(--smoke-dark-alpha-8)",
+      "border-weak-hover": "var(--smoke-dark-alpha-7)",
+      "border-weak-active": "var(--smoke-dark-alpha-8)",
+      "border-weak-selected": "var(--cobalt-dark-alpha-6)",
+      "border-weak-disabled": "var(--smoke-dark-alpha-6)",
+      "border-weak-focus": "var(--smoke-dark-alpha-8)",
+      "border-interactive-base": "var(--cobalt-light-7)",
+      "border-interactive-hover": "var(--cobalt-light-8)",
+      "border-interactive-active": "var(--cobalt-light-9)",
+      "border-interactive-selected": "var(--cobalt-light-9)",
+      "border-interactive-disabled": "var(--smoke-light-8)",
+      "border-interactive-focus": "var(--cobalt-light-9)",
+      "border-success-base": "var(--apple-light-6)",
+      "border-success-hover": "var(--apple-light-7)",
+      "border-success-selected": "var(--apple-light-9)",
+      "border-warning-base": "var(--solaris-light-6)",
+      "border-warning-hover": "var(--solaris-light-7)",
+      "border-warning-selected": "var(--solaris-light-9)",
+      "border-critical-base": "var(--ember-dark-5)",
+      "border-critical-hover": "var(--ember-dark-7)",
+      "border-critical-selected": "var(--ember-dark-9)",
+      "border-info-base": "var(--lilac-light-6)",
+      "border-info-hover": "var(--lilac-light-7)",
+      "border-info-selected": "var(--lilac-light-9)",
+      "icon-base": "var(--smoke-dark-9)",
+      "icon-hover": "var(--smoke-dark-10)",
+      "icon-active": "var(--smoke-dark-11)",
+      "icon-selected": "var(--smoke-dark-12)",
+      "icon-disabled": "var(--smoke-dark-7)",
+      "icon-focus": "var(--smoke-dark-12)",
+      "icon-invert-base": "var(--smoke-dark-1)",
+      "icon-weak-base": "var(--smoke-dark-6)",
+      "icon-weak-hover": "var(--smoke-light-7)",
+      "icon-weak-active": "var(--smoke-light-8)",
+      "icon-weak-selected": "var(--smoke-light-9)",
+      "icon-weak-disabled": "var(--smoke-light-4)",
+      "icon-weak-focus": "var(--smoke-light-9)",
+      "icon-strong-base": "var(--smoke-dark-12)",
+      "icon-strong-hover": "#f6f3f3",
+      "icon-strong-active": "#fcfcfc",
+      "icon-strong-selected": "#fdfcfc",
+      "icon-strong-disabled": "var(--smoke-dark-8)",
+      "icon-strong-focus": "#fdfcfc",
+      "icon-brand-base": "var(--white)",
+      "icon-interactive-base": "var(--cobalt-dark-9)",
+      "icon-success-base": "var(--apple-dark-7)",
+      "icon-success-hover": "var(--apple-dark-8)",
+      "icon-success-active": "var(--apple-dark-11)",
+      "icon-warning-base": "var(--amber-dark-7)",
+      "icon-warning-hover": "var(--amber-dark-8)",
+      "icon-warning-active": "var(--amber-dark-11)",
+      "icon-critical-base": "var(--ember-dark-9)",
+      "icon-critical-hover": "var(--ember-dark-11)",
+      "icon-critical-active": "var(--ember-dark-12)",
+      "icon-info-base": "var(--lilac-dark-7)",
+      "icon-info-hover": "var(--lilac-dark-8)",
+      "icon-info-active": "var(--lilac-dark-11)",
+      "icon-on-brand-base": "var(--smoke-light-alpha-11)",
+      "icon-on-brand-hover": "var(--smoke-light-alpha-12)",
+      "icon-on-brand-selected": "var(--smoke-light-alpha-12)",
+      "icon-on-interactive-base": "var(--smoke-dark-12)",
+      "icon-agent-plan-base": "var(--purple-dark-9)",
+      "icon-agent-docs-base": "var(--amber-dark-9)",
+      "icon-agent-ask-base": "var(--cyan-dark-9)",
+      "icon-agent-build-base": "var(--cobalt-dark-11)",
+      "icon-on-success-base": "var(--apple-dark-alpha-9)",
+      "icon-on-success-hover": "var(--apple-dark-alpha-10)",
+      "icon-on-success-selected": "var(--apple-dark-alpha-11)",
+      "icon-on-warning-base": "var(--amber-darkalpha-9)",
+      "icon-on-warning-hover": "var(--amber-darkalpha-10)",
+      "icon-on-warning-selected": "var(--amber-darkalpha-11)",
+      "icon-on-critical-base": "var(--ember-dark-alpha-9)",
+      "icon-on-critical-hover": "var(--ember-dark-alpha-10)",
+      "icon-on-critical-selected": "var(--ember-dark-alpha-11)",
+      "icon-on-info-base": "var(--lilac-dark-9)",
+      "icon-on-info-hover": "var(--lilac-dark-alpha-10)",
+      "icon-on-info-selected": "var(--lilac-dark-alpha-11)",
+      "icon-diff-add-base": "var(--mint-dark-11)",
+      "icon-diff-add-hover": "var(--mint-dark-10)",
+      "icon-diff-add-active": "var(--mint-dark-11)",
+      "icon-diff-delete-base": "var(--ember-dark-9)",
+      "icon-diff-delete-hover": "var(--ember-dark-10)",
+      "syntax-comment": "var(--text-weak)",
+      "syntax-regexp": "var(--text-base)",
+      "syntax-string": "#00ceb9",
+      "syntax-keyword": "var(--text-weak)",
+      "syntax-primitive": "#ffba92",
+      "syntax-operator": "var(--text-weak)",
+      "syntax-variable": "var(--text-strong)",
+      "syntax-property": "#ff9ae2",
+      "syntax-type": "#ecf58c",
+      "syntax-constant": "#93e9f6",
+      "syntax-punctuation": "var(--text-weak)",
+      "syntax-object": "var(--text-strong)",
+      "syntax-success": "var(--apple-dark-10)",
+      "syntax-warning": "var(--amber-dark-10)",
+      "syntax-critical": "var(--ember-dark-10)",
+      "syntax-info": "#93e9f6",
+      "syntax-diff-add": "var(--mint-dark-11)",
+      "syntax-diff-delete": "var(--ember-dark-11)",
+      "syntax-diff-unknown": "#ff0000",
+      "markdown-heading": "#9d7cd8",
+      "markdown-text": "#eeeeee",
+      "markdown-link": "#fab283",
+      "markdown-link-text": "#56b6c2",
+      "markdown-code": "#7fd88f",
+      "markdown-block-quote": "#e5c07b",
+      "markdown-emph": "#e5c07b",
+      "markdown-strong": "#f5a742",
+      "markdown-horizontal-rule": "#808080",
+      "markdown-list-item": "#fab283",
+      "markdown-list-enumeration": "#56b6c2",
+      "markdown-image": "#fab283",
+      "markdown-image-text": "#56b6c2",
+      "markdown-code-block": "#eeeeee",
+      "border-color": "#ffffff",
+      "border-weaker-base": "var(--smoke-dark-alpha-3)",
+      "border-weaker-hover": "var(--smoke-dark-alpha-4)",
+      "border-weaker-active": "var(--smoke-dark-alpha-6)",
+      "border-weaker-selected": "var(--cobalt-dark-alpha-3)",
+      "border-weaker-disabled": "var(--smoke-dark-alpha-2)",
+      "border-weaker-focus": "var(--smoke-dark-alpha-6)",
+      "button-ghost-hover": "var(--smoke-dark-alpha-2)",
+      "button-ghost-hover2": "var(--smoke-dark-alpha-3)",
+      "avatar-background-pink": "#501b3f",
+      "avatar-background-mint": "#033a34",
+      "avatar-background-orange": "#5f2a06",
+      "avatar-background-purple": "#432155",
+      "avatar-background-cyan": "#0f3058",
+      "avatar-background-lime": "#2b3711",
+      "avatar-text-pink": "#e34ba9",
+      "avatar-text-mint": "#95f3d9",
+      "avatar-text-orange": "#ff802b",
+      "avatar-text-purple": "#9d5bd2",
+      "avatar-text-cyan": "#369eff",
+      "avatar-text-lime": "#c4f042"
+    }
+  }
+}
diff --git a/packages/ui/src/theme/themes/onedarkpro.json b/packages/ui/src/theme/themes/onedarkpro.json
new file mode 100644
index 00000000000..ce01511e85c
--- /dev/null
+++ b/packages/ui/src/theme/themes/onedarkpro.json
@@ -0,0 +1,131 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "One Dark Pro",
+  "id": "onedarkpro",
+  "light": {
+    "seeds": {
+      "neutral": "#f5f6f8",
+      "primary": "#528bff",
+      "success": "#4fa66d",
+      "warning": "#d19a66",
+      "error": "#e06c75",
+      "info": "#61afef",
+      "interactive": "#528bff",
+      "diffAdd": "#c2ebcf",
+      "diffDelete": "#f7c1c5"
+    },
+    "overrides": {
+      "background-base": "#f5f6f8",
+      "background-weak": "#eef0f4",
+      "background-strong": "#fafbfc",
+      "background-stronger": "#ffffff",
+      "border-weak-base": "#dee2eb",
+      "border-weak-hover": "#d4d9e3",
+      "border-weak-active": "#caced6",
+      "border-weak-selected": "#bec4d0",
+      "border-weak-disabled": "#f4f6fb",
+      "border-weak-focus": "#c4cada",
+      "border-base": "#b5bccd",
+      "border-hover": "#aab1c2",
+      "border-active": "#a0a7b8",
+      "border-selected": "#959cae",
+      "border-disabled": "#eceef4",
+      "border-focus": "#a6adbf",
+      "border-strong-base": "#747c92",
+      "border-strong-hover": "#6a7287",
+      "border-strong-active": "#60687c",
+      "border-strong-selected": "#565e71",
+      "border-strong-disabled": "#cbd0dd",
+      "border-strong-focus": "#666d82",
+      "surface-diff-add-base": "#e5f4ea",
+      "surface-diff-delete-base": "#fde7ea",
+      "surface-diff-hidden-base": "#e4e8f4",
+      "text-base": "#2b303b",
+      "text-weak": "#6b717f",
+      "text-strong": "#0e1118",
+      "syntax-string": "#4fa66d",
+      "syntax-primitive": "#d85462",
+      "syntax-property": "#528bff",
+      "syntax-type": "#d19a66",
+      "syntax-constant": "#61afef",
+      "syntax-info": "#61afef",
+      "markdown-heading": "#528bff",
+      "markdown-text": "#2b303b",
+      "markdown-link": "#528bff",
+      "markdown-link-text": "#61afef",
+      "markdown-code": "#4fa66d",
+      "markdown-block-quote": "#d19a66",
+      "markdown-emph": "#d19a66",
+      "markdown-strong": "#d85462",
+      "markdown-horizontal-rule": "#d3d7e4",
+      "markdown-list-item": "#528bff",
+      "markdown-list-enumeration": "#61afef",
+      "markdown-image": "#528bff",
+      "markdown-image-text": "#61afef",
+      "markdown-code-block": "#528bff"
+    }
+  },
+  "dark": {
+    "seeds": {
+      "neutral": "#1e222a",
+      "primary": "#61afef",
+      "success": "#98c379",
+      "warning": "#e5c07b",
+      "error": "#e06c75",
+      "info": "#56b6c2",
+      "interactive": "#61afef",
+      "diffAdd": "#4b815a",
+      "diffDelete": "#b2555f"
+    },
+    "overrides": {
+      "background-base": "#1e222a",
+      "background-weak": "#212631",
+      "background-strong": "#1b1f27",
+      "background-stronger": "#171b23",
+      "border-weak-base": "#323848",
+      "border-weak-hover": "#363d52",
+      "border-weak-active": "#3c435c",
+      "border-weak-selected": "#424967",
+      "border-weak-disabled": "#141720",
+      "border-weak-focus": "#3f4560",
+      "border-base": "#4a5164",
+      "border-hover": "#515871",
+      "border-active": "#585f7e",
+      "border-selected": "#60688a",
+      "border-disabled": "#1a1e27",
+      "border-focus": "#555c79",
+      "border-strong-base": "#6a7390",
+      "border-strong-hover": "#737c9d",
+      "border-strong-active": "#7d87ab",
+      "border-strong-selected": "#8791b8",
+      "border-strong-disabled": "#212533",
+      "border-strong-focus": "#7680a2",
+      "surface-diff-add-base": "#1c2a26",
+      "surface-diff-delete-base": "#2a1c22",
+      "surface-diff-hidden-base": "#232836",
+      "text-base": "#abb2bf",
+      "text-weak": "#818899",
+      "text-strong": "#f6f7fb",
+      "syntax-string": "#98c379",
+      "syntax-primitive": "#e06c75",
+      "syntax-property": "#61afef",
+      "syntax-type": "#e5c07b",
+      "syntax-constant": "#56b6c2",
+      "syntax-info": "#56b6c2",
+      "markdown-heading": "#61afef",
+      "markdown-text": "#abb2bf",
+      "markdown-link": "#61afef",
+      "markdown-link-text": "#56b6c2",
+      "markdown-code": "#98c379",
+      "markdown-block-quote": "#e5c07b",
+      "markdown-emph": "#e5c07b",
+      "markdown-strong": "#e06c75",
+      "markdown-horizontal-rule": "#2d3444",
+      "markdown-list-item": "#61afef",
+      "markdown-list-enumeration": "#56b6c2",
+      "markdown-image": "#61afef",
+      "markdown-image-text": "#56b6c2",
+      "markdown-code-block": "#abb2bf"
+    }
+  }
+}
diff --git a/packages/ui/src/theme/themes/shadesofpurple.json b/packages/ui/src/theme/themes/shadesofpurple.json
new file mode 100644
index 00000000000..bc625770f9d
--- /dev/null
+++ b/packages/ui/src/theme/themes/shadesofpurple.json
@@ -0,0 +1,131 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Shades of Purple",
+  "id": "shadesofpurple",
+  "light": {
+    "seeds": {
+      "neutral": "#f7ebff",
+      "primary": "#7a5af8",
+      "success": "#3dd598",
+      "warning": "#f7c948",
+      "error": "#ff6bd5",
+      "info": "#62d4ff",
+      "interactive": "#7a5af8",
+      "diffAdd": "#c8f8da",
+      "diffDelete": "#ffc3ef"
+    },
+    "overrides": {
+      "background-base": "#f7ebff",
+      "background-weak": "#f2e2ff",
+      "background-strong": "#fbf2ff",
+      "background-stronger": "#fff7ff",
+      "border-weak-base": "#e5d3ff",
+      "border-weak-hover": "#dac8f5",
+      "border-weak-active": "#d1bdeb",
+      "border-weak-selected": "#c6b3e1",
+      "border-weak-disabled": "#fcf6ff",
+      "border-weak-focus": "#ccb9e7",
+      "border-base": "#baa4d5",
+      "border-hover": "#b098cb",
+      "border-active": "#a68dc2",
+      "border-selected": "#9b82b8",
+      "border-disabled": "#f1e7ff",
+      "border-focus": "#a692c6",
+      "border-strong-base": "#8769a9",
+      "border-strong-hover": "#7b5c9d",
+      "border-strong-active": "#704f91",
+      "border-strong-selected": "#664587",
+      "border-strong-disabled": "#d8c4f0",
+      "border-strong-focus": "#755495",
+      "surface-diff-add-base": "#edf8f1",
+      "surface-diff-delete-base": "#ffe4f4",
+      "surface-diff-hidden-base": "#e9e4ff",
+      "text-base": "#3b2c59",
+      "text-weak": "#6c568f",
+      "text-strong": "#1c1033",
+      "syntax-string": "#3dd598",
+      "syntax-primitive": "#ff6bd5",
+      "syntax-property": "#7a5af8",
+      "syntax-type": "#f7c948",
+      "syntax-constant": "#62d4ff",
+      "syntax-info": "#62d4ff",
+      "markdown-heading": "#7a5af8",
+      "markdown-text": "#3b2c59",
+      "markdown-link": "#7a5af8",
+      "markdown-link-text": "#62d4ff",
+      "markdown-code": "#3dd598",
+      "markdown-block-quote": "#f7c948",
+      "markdown-emph": "#f7c948",
+      "markdown-strong": "#ff6bd5",
+      "markdown-horizontal-rule": "#decbed",
+      "markdown-list-item": "#7a5af8",
+      "markdown-list-enumeration": "#62d4ff",
+      "markdown-image": "#7a5af8",
+      "markdown-image-text": "#62d4ff",
+      "markdown-code-block": "#7a5af8"
+    }
+  },
+  "dark": {
+    "seeds": {
+      "neutral": "#1a102b",
+      "primary": "#c792ff",
+      "success": "#7be0b0",
+      "warning": "#ffd580",
+      "error": "#ff7ac6",
+      "info": "#7dd4ff",
+      "interactive": "#c792ff",
+      "diffAdd": "#53c39f",
+      "diffDelete": "#d85aa0"
+    },
+    "overrides": {
+      "background-base": "#1a102b",
+      "background-weak": "#1f1434",
+      "background-strong": "#1c122f",
+      "background-stronger": "#170e26",
+      "border-weak-base": "#352552",
+      "border-weak-hover": "#3a2a5d",
+      "border-weak-active": "#402f68",
+      "border-weak-selected": "#463674",
+      "border-weak-disabled": "#10091b",
+      "border-weak-focus": "#3d2d65",
+      "border-base": "#4d3a73",
+      "border-hover": "#553f7f",
+      "border-active": "#5d468c",
+      "border-selected": "#654c99",
+      "border-disabled": "#150d21",
+      "border-focus": "#594283",
+      "border-strong-base": "#7659b0",
+      "border-strong-hover": "#8262be",
+      "border-strong-active": "#8e6ccc",
+      "border-strong-selected": "#9a77da",
+      "border-strong-disabled": "#1c122c",
+      "border-strong-focus": "#8666c4",
+      "surface-diff-add-base": "#142c27",
+      "surface-diff-delete-base": "#2d1424",
+      "surface-diff-hidden-base": "#231737",
+      "text-base": "#f5f0ff",
+      "text-weak": "#c9b6ff",
+      "text-strong": "#ffffff",
+      "syntax-string": "#7be0b0",
+      "syntax-primitive": "#ff7ac6",
+      "syntax-property": "#c792ff",
+      "syntax-type": "#ffd580",
+      "syntax-constant": "#7dd4ff",
+      "syntax-info": "#7dd4ff",
+      "markdown-heading": "#c792ff",
+      "markdown-text": "#f5f0ff",
+      "markdown-link": "#c792ff",
+      "markdown-link-text": "#7dd4ff",
+      "markdown-code": "#7be0b0",
+      "markdown-block-quote": "#ffd580",
+      "markdown-emph": "#ffd580",
+      "markdown-strong": "#ff7ac6",
+      "markdown-horizontal-rule": "#2d1d41",
+      "markdown-list-item": "#c792ff",
+      "markdown-list-enumeration": "#7dd4ff",
+      "markdown-image": "#c792ff",
+      "markdown-image-text": "#7dd4ff",
+      "markdown-code-block": "#f5f0ff"
+    }
+  }
+}
diff --git a/packages/ui/src/theme/themes/solarized.json b/packages/ui/src/theme/themes/solarized.json
new file mode 100644
index 00000000000..7cb44775af6
--- /dev/null
+++ b/packages/ui/src/theme/themes/solarized.json
@@ -0,0 +1,131 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Solarized",
+  "id": "solarized",
+  "light": {
+    "seeds": {
+      "neutral": "#fdf6e3",
+      "primary": "#268bd2",
+      "success": "#859900",
+      "warning": "#b58900",
+      "error": "#dc322f",
+      "info": "#2aa198",
+      "interactive": "#268bd2",
+      "diffAdd": "#c6dc7a",
+      "diffDelete": "#f2a1a1"
+    },
+    "overrides": {
+      "background-base": "#fdf6e3",
+      "background-weak": "#f6efda",
+      "background-strong": "#faf3dc",
+      "background-stronger": "#f6edd4",
+      "border-weak-base": "#e3e0cd",
+      "border-weak-hover": "#d9d4c2",
+      "border-weak-active": "#cfcab7",
+      "border-weak-selected": "#c5c0ad",
+      "border-weak-disabled": "#f2edda",
+      "border-weak-focus": "#cbc6b2",
+      "border-base": "#bcb5a0",
+      "border-hover": "#b1aa96",
+      "border-active": "#a59f8c",
+      "border-selected": "#999382",
+      "border-disabled": "#ede7d4",
+      "border-focus": "#aca58f",
+      "border-strong-base": "#8c8572",
+      "border-strong-hover": "#7f7866",
+      "border-strong-active": "#716b5b",
+      "border-strong-selected": "#645f50",
+      "border-strong-disabled": "#d5cdb8",
+      "border-strong-focus": "#78715f",
+      "surface-diff-add-base": "#eef5d6",
+      "surface-diff-delete-base": "#fde4dd",
+      "surface-diff-hidden-base": "#e3ecf3",
+      "text-base": "#586e75",
+      "text-weak": "#7a8c8e",
+      "text-strong": "#073642",
+      "syntax-string": "#859900",
+      "syntax-primitive": "#d33682",
+      "syntax-property": "#268bd2",
+      "syntax-type": "#b58900",
+      "syntax-constant": "#2aa198",
+      "syntax-info": "#2aa198",
+      "markdown-heading": "#268bd2",
+      "markdown-text": "#586e75",
+      "markdown-link": "#268bd2",
+      "markdown-link-text": "#2aa198",
+      "markdown-code": "#859900",
+      "markdown-block-quote": "#b58900",
+      "markdown-emph": "#b58900",
+      "markdown-strong": "#d33682",
+      "markdown-horizontal-rule": "#cfd1bf",
+      "markdown-list-item": "#268bd2",
+      "markdown-list-enumeration": "#2aa198",
+      "markdown-image": "#268bd2",
+      "markdown-image-text": "#2aa198",
+      "markdown-code-block": "#2aa198"
+    }
+  },
+  "dark": {
+    "seeds": {
+      "neutral": "#002b36",
+      "primary": "#6c71c4",
+      "success": "#859900",
+      "warning": "#b58900",
+      "error": "#dc322f",
+      "info": "#2aa198",
+      "interactive": "#6c71c4",
+      "diffAdd": "#4c7654",
+      "diffDelete": "#c34b4b"
+    },
+    "overrides": {
+      "background-base": "#001f27",
+      "background-weak": "#022733",
+      "background-strong": "#01222b",
+      "background-stronger": "#032830",
+      "border-weak-base": "#20373f",
+      "border-weak-hover": "#243e47",
+      "border-weak-active": "#28434f",
+      "border-weak-selected": "#2d4958",
+      "border-weak-disabled": "#0f2026",
+      "border-weak-focus": "#2a4552",
+      "border-base": "#31505b",
+      "border-hover": "#365765",
+      "border-active": "#3c5e70",
+      "border-selected": "#42657a",
+      "border-disabled": "#13272e",
+      "border-focus": "#3a5a6b",
+      "border-strong-base": "#4a7887",
+      "border-strong-hover": "#528294",
+      "border-strong-active": "#5a8ca1",
+      "border-strong-selected": "#6396ae",
+      "border-strong-disabled": "#1b323b",
+      "border-strong-focus": "#56879a",
+      "surface-diff-add-base": "#0f2f29",
+      "surface-diff-delete-base": "#321c1c",
+      "surface-diff-hidden-base": "#0f3844",
+      "text-base": "#93a1a1",
+      "text-weak": "#6c7f80",
+      "text-strong": "#fdf6e3",
+      "syntax-string": "#859900",
+      "syntax-primitive": "#d33682",
+      "syntax-property": "#6c71c4",
+      "syntax-type": "#b58900",
+      "syntax-constant": "#2aa198",
+      "syntax-info": "#2aa198",
+      "markdown-heading": "#6c71c4",
+      "markdown-text": "#93a1a1",
+      "markdown-link": "#6c71c4",
+      "markdown-link-text": "#2aa198",
+      "markdown-code": "#859900",
+      "markdown-block-quote": "#b58900",
+      "markdown-emph": "#b58900",
+      "markdown-strong": "#d33682",
+      "markdown-horizontal-rule": "#0e3b46",
+      "markdown-list-item": "#6c71c4",
+      "markdown-list-enumeration": "#2aa198",
+      "markdown-image": "#6c71c4",
+      "markdown-image-text": "#2aa198",
+      "markdown-code-block": "#93a1a1"
+    }
+  }
+}
diff --git a/packages/ui/src/theme/themes/tokyonight.json b/packages/ui/src/theme/themes/tokyonight.json
new file mode 100644
index 00000000000..31d0e8a4743
--- /dev/null
+++ b/packages/ui/src/theme/themes/tokyonight.json
@@ -0,0 +1,155 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Tokyonight",
+  "id": "tokyonight",
+  "light": {
+    "seeds": {
+      "neutral": "#e1e2e7",
+      "primary": "#2e7de9",
+      "success": "#587539",
+      "warning": "#8c6c3e",
+      "error": "#c94060",
+      "info": "#007197",
+      "interactive": "#2e7de9",
+      "diffAdd": "#4f8f7b",
+      "diffDelete": "#d05f7c"
+    },
+    "overrides": {
+      "background-base": "#e1e2e7",
+      "background-weak": "#dee0ea",
+      "background-strong": "#e5e6ee",
+      "background-stronger": "#e9eaf1",
+      "border-weak-base": "#cdd0dc",
+      "border-weak-hover": "#c3c6d2",
+      "border-weak-active": "#b9bcc8",
+      "border-weak-selected": "#aeb2bf",
+      "border-weak-disabled": "#e6e7ef",
+      "border-weak-focus": "#b3b6c3",
+      "border-base": "#a7abbb",
+      "border-hover": "#9ba0b1",
+      "border-active": "#9095a8",
+      "border-selected": "#83889e",
+      "border-disabled": "#dedfe6",
+      "border-focus": "#9599a8",
+      "border-strong-base": "#757b90",
+      "border-strong-hover": "#6a7084",
+      "border-strong-active": "#5f6578",
+      "border-strong-selected": "#545a6d",
+      "border-strong-disabled": "#c4c6d0",
+      "border-strong-focus": "#666b7f",
+      "surface-diff-add-base": "#dfe7da",
+      "surface-diff-delete-base": "#f4dadd",
+      "surface-diff-hidden-base": "#cfd1dd",
+      "text-base": "#273153",
+      "text-weak": "#5c6390",
+      "text-strong": "#1c2544",
+      "syntax-string": "#587539",
+      "syntax-primitive": "#b15c00",
+      "syntax-property": "#9854f1",
+      "syntax-type": "#3760bf",
+      "syntax-constant": "#007197",
+      "syntax-info": "#007197",
+      "markdown-heading": "#9854f1",
+      "markdown-text": "#273153",
+      "markdown-link": "#2e7de9",
+      "markdown-link-text": "#007197",
+      "markdown-code": "#587539",
+      "markdown-block-quote": "#8c6c3e",
+      "markdown-emph": "#8c6c3e",
+      "markdown-strong": "#b15c00",
+      "markdown-horizontal-rule": "#a1a6c5",
+      "markdown-list-item": "#2e7de9",
+      "markdown-list-enumeration": "#007197",
+      "markdown-image": "#2e7de9",
+      "markdown-image-text": "#007197",
+      "markdown-code-block": "#3760bf"
+    }
+  },
+  "dark": {
+    "seeds": {
+      "neutral": "#1a1b26",
+      "primary": "#7aa2f7",
+      "success": "#9ece6a",
+      "warning": "#e0af68",
+      "error": "#f7768e",
+      "info": "#7dcfff",
+      "interactive": "#7aa2f7",
+      "diffAdd": "#41a6b5",
+      "diffDelete": "#c34043"
+    },
+    "overrides": {
+      "background-base": "#0f111a",
+      "background-weak": "#111428",
+      "background-strong": "#101324",
+      "background-stronger": "#13172a",
+      "border-weak-base": "#25283b",
+      "border-weak-hover": "#292c43",
+      "border-weak-active": "#2e314b",
+      "border-weak-selected": "#343755",
+      "border-weak-disabled": "#151727",
+      "border-weak-focus": "#30324f",
+      "border-base": "#3a3e57",
+      "border-hover": "#414264",
+      "border-active": "#474972",
+      "border-selected": "#4f507f",
+      "border-disabled": "#1c1d2d",
+      "border-focus": "#45496f",
+      "border-strong-base": "#5a5f82",
+      "border-strong-hover": "#646994",
+      "border-strong-active": "#6f74a6",
+      "border-strong-selected": "#7a7fb8",
+      "border-strong-disabled": "#23243a",
+      "border-strong-focus": "#6a6f9f",
+      "surface-base": "#1f2335",
+      "base": "#1f2335",
+      "surface-base-hover": "#232840",
+      "surface-base-active": "#262c46",
+      "surface-base-interactive-active": "#2b3357",
+      "base2": "#1f2335",
+      "base3": "#1f2335",
+      "surface-inset-base": "#161a2ab3",
+      "surface-inset-base-hover": "#161a2acc",
+      "surface-inset-strong": "#0d111fcc",
+      "surface-inset-strong-hover": "#0d111fcc",
+      "surface-raised-base": "#242a42",
+      "surface-float-base": "#242b45",
+      "surface-float-base-hover": "#2a3154",
+      "surface-raised-base-hover": "#272e49",
+      "surface-raised-base-active": "#2c3353",
+      "surface-raised-strong": "#31385a",
+      "surface-raised-strong-hover": "#373f6b",
+      "surface-raised-stronger": "#3b4261",
+      "surface-raised-stronger-hover": "#444c82",
+      "surface-weak": "#1b2033",
+      "surface-weaker": "#181d2d",
+      "surface-strong": "#323858",
+      "surface-raised-stronger-non-alpha": "#2b3150",
+      "surface-diff-add-base": "#1c2a38",
+      "surface-diff-delete-base": "#2a1f32",
+      "surface-diff-hidden-base": "#24283b",
+      "text-base": "#c0caf5",
+      "text-weak": "#7a88cf",
+      "text-strong": "#eaeaff",
+      "syntax-string": "#9ece6a",
+      "syntax-primitive": "#ff9e64",
+      "syntax-property": "#bb9af7",
+      "syntax-type": "#e0af68",
+      "syntax-constant": "#7dcfff",
+      "syntax-info": "#7dcfff",
+      "markdown-heading": "#bb9af7",
+      "markdown-text": "#c0caf5",
+      "markdown-link": "#7aa2f7",
+      "markdown-link-text": "#7dcfff",
+      "markdown-code": "#9ece6a",
+      "markdown-block-quote": "#e0af68",
+      "markdown-emph": "#e0af68",
+      "markdown-strong": "#ff9e64",
+      "markdown-horizontal-rule": "#3b4261",
+      "markdown-list-item": "#7aa2f7",
+      "markdown-list-enumeration": "#7dcfff",
+      "markdown-image": "#7aa2f7",
+      "markdown-image-text": "#7dcfff",
+      "markdown-code-block": "#c0caf5"
+    }
+  }
+}
diff --git a/packages/ui/src/theme/types.ts b/packages/ui/src/theme/types.ts
new file mode 100644
index 00000000000..7a584ef0e5b
--- /dev/null
+++ b/packages/ui/src/theme/types.ts
@@ -0,0 +1,94 @@
+/**
+ * Desktop Theme System
+ *
+ * Unlike the TUI themes, desktop themes require more design tokens and use
+ * OKLCH color space for generating color scales from seed colors.
+ */
+
+/** A hex color string like "#ffffff" or "#fff" */
+export type HexColor = `#${string}`
+
+/** OKLCH color representation for calculations */
+export interface OklchColor {
+  l: number // Lightness 0-1
+  c: number // Chroma 0-0.4+
+  h: number // Hue 0-360
+}
+
+/** The minimum colors needed to define a theme variant */
+export interface ThemeSeedColors {
+  /** Base neutral color - used to generate gray scale (smoke/ink) */
+  neutral: HexColor
+  /** Primary brand/accent color */
+  primary: HexColor
+  /** Success color (green) */
+  success: HexColor
+  /** Warning color (yellow/orange) */
+  warning: HexColor
+  /** Error/critical color (red) */
+  error: HexColor
+  /** Info color (purple/blue) */
+  info: HexColor
+  /** Interactive/link color (blue) */
+  interactive: HexColor
+  /** Diff add color */
+  diffAdd: HexColor
+  /** Diff delete color */
+  diffDelete: HexColor
+}
+
+/** A theme variant (light or dark) with seed colors and optional overrides */
+export interface ThemeVariant {
+  /** Seed colors used to generate the full palette */
+  seeds: ThemeSeedColors
+  /** Optional direct overrides for any CSS variable (without -- prefix) */
+  overrides?: Record<string, ColorValue>
+}
+
+/** A complete desktop theme definition */
+export interface DesktopTheme {
+  /** Schema version for future compatibility */
+  $schema?: string
+  /** Theme display name */
+  name: string
+  /** Theme identifier (slug) */
+  id: string
+  /** Light mode variant */
+  light: ThemeVariant
+  /** Dark mode variant */
+  dark: ThemeVariant
+}
+
+/**
+ * Categories of CSS variables that get generated from seed colors.
+ * Each category maps to specific CSS custom properties.
+ */
+export type TokenCategory =
+  | "background"
+  | "surface"
+  | "text"
+  | "border"
+  | "icon"
+  | "input"
+  | "button"
+  | "syntax"
+  | "markdown"
+  | "diff"
+  | "avatar"
+
+/**
+ * All CSS variable names (without -- prefix) that the theme system generates.
+ * These match the variables defined in theme.css
+ */
+export type ThemeToken = string
+
+/** A CSS variable reference like "var(--text-weak)" */
+export type CssVarRef = `var(--${string})`
+
+/** A color value - either a hex color or a CSS variable reference */
+export type ColorValue = HexColor | CssVarRef
+
+/**
+ * Resolved theme - all tokens mapped to their final colors
+ */
+export type ResolvedTheme = Record<ThemeToken, ColorValue>

From d8563160f72b1d341c432cecb804a96cc3c0b061 Mon Sep 17 00:00:00 2001
From: Github Action <action@github.com>
Date: Sun, 28 Dec 2025 11:13:54 +0000
Subject: [PATCH 24/60] Update Nix flake.lock and hashes

---
 flake.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/flake.lock b/flake.lock
index 8bba6eeb3df..dcc8c594a70 100644
--- a/flake.lock
+++ b/flake.lock
@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1766747458,
-        "narHash": "sha256-m63jjuo/ygo8ztkCziYh5OOIbTSXUDkKbqw3Vuqu4a4=",
+        "lastModified": 1766840161,
+        "narHash": "sha256-Ss/LHpJJsng8vz1Pe33RSGIWUOcqM1fjrehjUkdrWio=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "c633f572eded8c4f3c75b8010129854ed404a6ce",
+        "rev": "3edc4a30ed3903fdf6f90c837f961fa6b49582d1",
         "type": "github"
       },
       "original": {

From ba3a1cfa0bf3c08423a3b1974b5ad17f50797bb1 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 28 Dec 2025 05:28:06 -0600
Subject: [PATCH 25/60] chore: cleanup

---
 packages/ui/src/theme/preload.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/ui/src/theme/preload.ts b/packages/ui/src/theme/preload.ts
index a5eadb323f4..eb54082faf9 100644
--- a/packages/ui/src/theme/preload.ts
+++ b/packages/ui/src/theme/preload.ts
@@ -42,12 +42,6 @@ function generateEmbeddedDefaults(): { light: string; dark: string } {
   }
 }
 
-/**
- * Static tokens that don't change between themes.
- * These are embedded in the preload CSS.
- */
-const STATIC_TOKENS = `--font-family-sans:"Inter","Inter Fallback";--font-family-sans--font-feature-settings:"ss03" 1;--font-family-mono:"IBM Plex Mono","IBM Plex Mono Fallback";--font-family-mono--font-feature-settings:"ss01" 1;--font-size-small:13px;--font-size-base:14px;--font-size-large:16px;--font-size-x-large:20px;--font-weight-regular:400;--font-weight-medium:500;--line-height-large:150%;--line-height-x-large:180%;--line-height-2x-large:200%;--letter-spacing-normal:0;--letter-spacing-tight:-0.16;--letter-spacing-tightest:-0.32;--paragraph-spacing-base:0;--spacing:0.25rem;--breakpoint-sm:40rem;--breakpoint-md:48rem;--breakpoint-lg:64rem;--breakpoint-xl:80rem;--breakpoint-2xl:96rem;--container-3xs:16rem;--container-2xs:18rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.625rem;--shadow-xs:0 1px 2px -1px rgba(19,16,16,0.04),0 1px 2px 0 rgba(19,16,16,0.06),0 1px 3px 0 rgba(19,16,16,0.08);--shadow-md:0 6px 8px -4px rgba(19,16,16,0.12),0 4px 3px -2px rgba(19,16,16,0.12),0 1px 2px -1px rgba(19,16,16,0.12)`
-
 /**
  * Generate the inline preload script.
  *
@@ -60,7 +54,7 @@ export function generatePreloadScript(): string {
 
   // Minified version of the preload logic
   // Variables: T=themeId, S=scheme, D=isDark, M=mode, C=css, K=cacheKey
-  return `(function(){var T=localStorage.getItem("${STORAGE_KEYS.THEME_ID}")||"oc-1";var S=localStorage.getItem("${STORAGE_KEYS.COLOR_SCHEME}")||"system";var D=S==="dark"||(S==="system"&&matchMedia("(prefers-color-scheme:dark)").matches);var M=D?"dark":"light";var K="${STORAGE_KEYS.THEME_CSS_PREFIX}-"+T+"-"+M;var C=localStorage.getItem(K);if(!C&&T==="oc-1"){C=D?${JSON.stringify(defaults.dark)}:${JSON.stringify(defaults.light)}}if(C){var s=document.createElement("style");s.id="oc-theme-preload";s.textContent=":root{${STATIC_TOKENS};color-scheme:"+M+";--text-mix-blend-mode:"+(D?"plus-lighter":"multiply")+";"+C+"}";document.head.appendChild(s)}document.documentElement.dataset.theme=T;document.documentElement.dataset.colorScheme=M})();`
+  return `(function(){var T=localStorage.getItem("${STORAGE_KEYS.THEME_ID}")||"oc-1";var S=localStorage.getItem("${STORAGE_KEYS.COLOR_SCHEME}")||"system";var D=S==="dark"||(S==="system"&&matchMedia("(prefers-color-scheme:dark)").matches);var M=D?"dark":"light";var K="${STORAGE_KEYS.THEME_CSS_PREFIX}-"+T+"-"+M;var C=localStorage.getItem(K);if(!C&&T==="oc-1"){C=D?${JSON.stringify(defaults.dark)}:${JSON.stringify(defaults.light)}}if(C){var s=document.createElement("style");s.id="oc-theme-preload";s.textContent=":root{color-scheme:"+M+";--text-mix-blend-mode:"+(D?"plus-lighter":"multiply")+";"+C+"}";document.head.appendChild(s)}document.documentElement.dataset.theme=T;document.documentElement.dataset.colorScheme=M})();`
 }
 
 /**
@@ -100,7 +94,6 @@ export function generatePreloadScriptFormatted(): string {
     var style = document.createElement("style");
     style.id = "oc-theme-preload";
     style.textContent = ":root{" +
-      "${STATIC_TOKENS};" +
       "color-scheme:" + mode + ";" +
       "--text-mix-blend-mode:" + (isDark ? "plus-lighter" : "multiply") + ";" +
       css +

From 18c8e5f4519dc395819e9d884c18e30c84d81a21 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 28 Dec 2025 05:36:07 -0600
Subject: [PATCH 26/60] chore: cleanup

---
 packages/ui/src/styles/theme.css | 504 +++++++++++++++++++++++++++++++
 1 file changed, 504 insertions(+)

diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index e8de4a06cb5..1b919c0ac4e 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -68,8 +68,512 @@
   color-scheme: light;
   --text-mix-blend-mode: multiply;
 
+  /* OC-1 fallback variables (light) */
+  --background-base: #f8f7f7;
+  --background-weak: var(--smoke-light-3);
+  --background-strong: var(--smoke-light-1);
+  --background-stronger: #fcfcfc;
+  --surface-base: var(--smoke-light-alpha-2);
+  --base: var(--smoke-light-alpha-2);
+  --surface-base-hover: #0500000f;
+  --surface-base-active: var(--smoke-light-alpha-3);
+  --surface-base-interactive-active: var(--cobalt-light-alpha-3);
+  --base2: var(--smoke-light-alpha-2);
+  --base3: var(--smoke-light-alpha-2);
+  --surface-inset-base: var(--smoke-light-alpha-2);
+  --surface-inset-base-hover: var(--smoke-light-alpha-3);
+  --surface-inset-strong: #1f000017;
+  --surface-inset-strong-hover: #1f000017;
+  --surface-raised-base: var(--smoke-light-alpha-1);
+  --surface-float-base: var(--smoke-dark-1);
+  --surface-float-base-hover: var(--smoke-dark-2);
+  --surface-raised-base-hover: var(--smoke-light-alpha-2);
+  --surface-raised-base-active: var(--smoke-light-alpha-3);
+  --surface-raised-strong: var(--smoke-light-1);
+  --surface-raised-strong-hover: var(--white);
+  --surface-raised-stronger: var(--white);
+  --surface-raised-stronger-hover: var(--white);
+  --surface-weak: var(--smoke-light-alpha-3);
+  --surface-weaker: var(--smoke-light-alpha-4);
+  --surface-strong: #ffffff;
+  --surface-raised-stronger-non-alpha: var(--white);
+  --surface-brand-base: var(--yuzu-light-9);
+  --surface-brand-hover: var(--yuzu-light-10);
+  --surface-interactive-base: var(--cobalt-light-3);
+  --surface-interactive-hover: var(--cobalt-light-4);
+  --surface-interactive-weak: var(--cobalt-light-2);
+  --surface-interactive-weak-hover: var(--cobalt-light-3);
+  --surface-success-base: var(--apple-light-3);
+  --surface-success-weak: var(--apple-light-2);
+  --surface-success-strong: var(--apple-light-9);
+  --surface-warning-base: var(--solaris-light-3);
+  --surface-warning-weak: var(--solaris-light-2);
+  --surface-warning-strong: var(--solaris-light-9);
+  --surface-critical-base: var(--ember-light-3);
+  --surface-critical-weak: var(--ember-light-2);
+  --surface-critical-strong: var(--ember-light-9);
+  --surface-info-base: var(--lilac-light-3);
+  --surface-info-weak: var(--lilac-light-2);
+  --surface-info-strong: var(--lilac-light-9);
+  --surface-diff-unchanged-base: #ffffff00;
+  --surface-diff-skip-base: var(--smoke-light-2);
+  --surface-diff-hidden-base: var(--blue-light-3);
+  --surface-diff-hidden-weak: var(--blue-light-2);
+  --surface-diff-hidden-weaker: var(--blue-light-1);
+  --surface-diff-hidden-strong: var(--blue-light-5);
+  --surface-diff-hidden-stronger: var(--blue-light-9);
+  --surface-diff-add-base: #dafbe0;
+  --surface-diff-add-weak: var(--mint-light-2);
+  --surface-diff-add-weaker: var(--mint-light-1);
+  --surface-diff-add-strong: var(--mint-light-5);
+  --surface-diff-add-stronger: var(--mint-light-9);
+  --surface-diff-delete-base: var(--ember-light-3);
+  --surface-diff-delete-weak: var(--ember-light-2);
+  --surface-diff-delete-weaker: var(--ember-light-1);
+  --surface-diff-delete-strong: var(--ember-light-6);
+  --surface-diff-delete-stronger: var(--ember-light-9);
+  --input-base: var(--smoke-light-1);
+  --input-hover: var(--smoke-light-2);
+  --input-active: var(--cobalt-light-1);
+  --input-selected: var(--cobalt-light-4);
+  --input-focus: var(--cobalt-light-1);
+  --input-disabled: var(--smoke-light-4);
+  --text-base: var(--smoke-light-11);
+  --text-weak: var(--smoke-light-9);
+  --text-weaker: var(--smoke-light-8);
+  --text-strong: var(--smoke-light-12);
+  --text-invert-base: var(--smoke-dark-alpha-11);
+  --text-invert-weak: var(--smoke-dark-alpha-9);
+  --text-invert-weaker: var(--smoke-dark-alpha-8);
+  --text-invert-strong: var(--smoke-dark-alpha-12);
+  --text-interactive-base: var(--cobalt-light-9);
+  --text-on-brand-base: var(--smoke-light-alpha-11);
+  --text-on-interactive-base: var(--smoke-light-1);
+  --text-on-interactive-weak: var(--smoke-dark-alpha-11);
+  --text-on-success-base: var(--apple-light-10);
+  --text-on-critical-base: var(--ember-light-10);
+  --text-on-critical-weak: var(--ember-light-8);
+  --text-on-critical-strong: var(--ember-light-12);
+  --text-on-warning-base: var(--smoke-dark-alpha-11);
+  --text-on-info-base: var(--smoke-dark-alpha-11);
+  --text-diff-add-base: var(--mint-light-11);
+  --text-diff-delete-base: var(--ember-light-10);
+  --text-diff-delete-strong: var(--ember-light-12);
+  --text-diff-add-strong: var(--mint-light-12);
+  --text-on-info-weak: var(--smoke-dark-alpha-9);
+  --text-on-info-strong: var(--smoke-dark-alpha-12);
+  --text-on-warning-weak: var(--smoke-dark-alpha-9);
+  --text-on-warning-strong: var(--smoke-dark-alpha-12);
+  --text-on-success-weak: var(--apple-light-6);
+  --text-on-success-strong: var(--apple-light-12);
+  --text-on-brand-weak: var(--smoke-light-alpha-9);
+  --text-on-brand-weaker: var(--smoke-light-alpha-8);
+  --text-on-brand-strong: var(--smoke-light-alpha-12);
+  --button-secondary-base: #fdfcfc;
+  --button-secondary-hover: #faf9f9;
+  --border-base: var(--smoke-light-alpha-7);
+  --border-hover: var(--smoke-light-alpha-8);
+  --border-active: var(--smoke-light-alpha-9);
+  --border-selected: var(--cobalt-light-alpha-9);
+  --border-disabled: var(--smoke-light-alpha-8);
+  --border-focus: var(--smoke-light-alpha-9);
+  --border-weak-base: var(--smoke-light-alpha-5);
+  --border-strong-base: var(--smoke-light-alpha-7);
+  --border-strong-hover: var(--smoke-light-alpha-8);
+  --border-strong-active: var(--smoke-light-alpha-7);
+  --border-strong-selected: var(--cobalt-light-alpha-6);
+  --border-strong-disabled: var(--smoke-light-alpha-6);
+  --border-strong-focus: var(--smoke-light-alpha-7);
+  --border-weak-hover: var(--smoke-light-alpha-6);
+  --border-weak-active: var(--smoke-light-alpha-7);
+  --border-weak-selected: var(--cobalt-light-alpha-5);
+  --border-weak-disabled: var(--smoke-light-alpha-6);
+  --border-weak-focus: var(--smoke-light-alpha-7);
+  --border-interactive-base: var(--cobalt-light-7);
+  --border-interactive-hover: var(--cobalt-light-8);
+  --border-interactive-active: var(--cobalt-light-9);
+  --border-interactive-selected: var(--cobalt-light-9);
+  --border-interactive-disabled: var(--smoke-light-8);
+  --border-interactive-focus: var(--cobalt-light-9);
+  --border-success-base: var(--apple-light-6);
+  --border-success-hover: var(--apple-light-7);
+  --border-success-selected: var(--apple-light-9);
+  --border-warning-base: var(--solaris-light-6);
+  --border-warning-hover: var(--solaris-light-7);
+  --border-warning-selected: var(--solaris-light-9);
+  --border-critical-base: var(--ember-light-6);
+  --border-critical-hover: var(--ember-light-7);
+  --border-critical-selected: var(--ember-light-9);
+  --border-info-base: var(--lilac-light-6);
+  --border-info-hover: var(--lilac-light-7);
+  --border-info-selected: var(--lilac-light-9);
+  --icon-base: var(--smoke-light-9);
+  --icon-hover: var(--smoke-light-11);
+  --icon-active: var(--smoke-light-12);
+  --icon-selected: var(--smoke-light-12);
+  --icon-disabled: var(--smoke-light-8);
+  --icon-focus: var(--smoke-light-12);
+  --icon-invert-base: #ffffff;
+  --icon-weak-base: var(--smoke-light-7);
+  --icon-weak-hover: var(--smoke-light-8);
+  --icon-weak-active: var(--smoke-light-9);
+  --icon-weak-selected: var(--smoke-light-10);
+  --icon-weak-disabled: var(--smoke-light-6);
+  --icon-weak-focus: var(--smoke-light-9);
+  --icon-strong-base: var(--smoke-light-12);
+  --icon-strong-hover: #151313;
+  --icon-strong-active: #020202;
+  --icon-strong-selected: #020202;
+  --icon-strong-disabled: var(--smoke-light-8);
+  --icon-strong-focus: #020202;
+  --icon-brand-base: var(--smoke-light-12);
+  --icon-interactive-base: var(--cobalt-light-9);
+  --icon-success-base: var(--apple-light-7);
+  --icon-success-hover: var(--apple-light-8);
+  --icon-success-active: var(--apple-light-11);
+  --icon-warning-base: var(--amber-light-7);
+  --icon-warning-hover: var(--amber-light-8);
+  --icon-warning-active: var(--amber-light-11);
+  --icon-critical-base: var(--ember-light-10);
+  --icon-critical-hover: var(--ember-light-11);
+  --icon-critical-active: var(--ember-light-12);
+  --icon-info-base: var(--lilac-light-7);
+  --icon-info-hover: var(--lilac-light-8);
+  --icon-info-active: var(--lilac-light-11);
+  --icon-on-brand-base: var(--smoke-light-alpha-11);
+  --icon-on-brand-hover: var(--smoke-light-alpha-12);
+  --icon-on-brand-selected: var(--smoke-light-alpha-12);
+  --icon-on-interactive-base: var(--smoke-light-1);
+  --icon-agent-plan-base: var(--purple-light-9);
+  --icon-agent-docs-base: var(--amber-light-9);
+  --icon-agent-ask-base: var(--cyan-light-9);
+  --icon-agent-build-base: var(--cobalt-light-9);
+  --icon-on-success-base: var(--apple-light-alpha-9);
+  --icon-on-success-hover: var(--apple-light-alpha-10);
+  --icon-on-success-selected: var(--apple-light-alpha-11);
+  --icon-on-warning-base: var(--amber-lightalpha-9);
+  --icon-on-warning-hover: var(--amber-lightalpha-10);
+  --icon-on-warning-selected: var(--amber-lightalpha-11);
+  --icon-on-critical-base: var(--ember-light-alpha-9);
+  --icon-on-critical-hover: var(--ember-light-alpha-10);
+  --icon-on-critical-selected: var(--ember-light-alpha-11);
+  --icon-on-info-base: var(--lilac-light-9);
+  --icon-on-info-hover: var(--lilac-light-alpha-10);
+  --icon-on-info-selected: var(--lilac-light-alpha-11);
+  --icon-diff-add-base: var(--mint-light-11);
+  --icon-diff-add-hover: var(--mint-light-12);
+  --icon-diff-add-active: var(--mint-light-12);
+  --icon-diff-delete-base: var(--ember-light-10);
+  --icon-diff-delete-hover: var(--ember-light-11);
+  --syntax-comment: var(--text-weak);
+  --syntax-regexp: var(--text-base);
+  --syntax-string: #006656;
+  --syntax-keyword: var(--text-weak);
+  --syntax-primitive: #fb4804;
+  --syntax-operator: var(--text-base);
+  --syntax-variable: var(--text-strong);
+  --syntax-property: #ed6dc8;
+  --syntax-type: #596600;
+  --syntax-constant: #007b80;
+  --syntax-punctuation: var(--text-base);
+  --syntax-object: var(--text-strong);
+  --syntax-success: var(--apple-light-10);
+  --syntax-warning: var(--amber-light-10);
+  --syntax-critical: var(--ember-light-10);
+  --syntax-info: #0092a8;
+  --syntax-diff-add: var(--mint-light-11);
+  --syntax-diff-delete: var(--ember-light-11);
+  --syntax-diff-unknown: #ff0000;
+  --markdown-heading: #d68c27;
+  --markdown-text: #1a1a1a;
+  --markdown-link: #3b7dd8;
+  --markdown-link-text: #318795;
+  --markdown-code: #3d9a57;
+  --markdown-block-quote: #b0851f;
+  --markdown-emph: #b0851f;
+  --markdown-strong: #d68c27;
+  --markdown-horizontal-rule: #8a8a8a;
+  --markdown-list-item: #3b7dd8;
+  --markdown-list-enumeration: #318795;
+  --markdown-image: #3b7dd8;
+  --markdown-image-text: #318795;
+  --markdown-code-block: #1a1a1a;
+  --border-color: #ffffff;
+  --border-weaker-base: var(--smoke-light-alpha-3);
+  --border-weaker-hover: var(--smoke-light-alpha-4);
+  --border-weaker-active: var(--smoke-light-alpha-6);
+  --border-weaker-selected: var(--cobalt-light-alpha-4);
+  --border-weaker-disabled: var(--smoke-light-alpha-2);
+  --border-weaker-focus: var(--smoke-light-alpha-6);
+  --button-ghost-hover: var(--smoke-light-alpha-2);
+  --button-ghost-hover2: var(--smoke-light-alpha-3);
+  --avatar-background-pink: #feeef8;
+  --avatar-background-mint: #e1fbf4;
+  --avatar-background-orange: #fff1e7;
+  --avatar-background-purple: #f9f1fe;
+  --avatar-background-cyan: #e7f9fb;
+  --avatar-background-lime: #eefadc;
+  --avatar-text-pink: #cd1d8d;
+  --avatar-text-mint: #147d6f;
+  --avatar-text-orange: #ed5f00;
+  --avatar-text-purple: #8445bc;
+  --avatar-text-cyan: #0894b3;
+  --avatar-text-lime: #5d770d;
+
   @media (prefers-color-scheme: dark) {
     color-scheme: dark;
     --text-mix-blend-mode: plus-lighter;
+
+    /* OC-1 fallback variables (dark) */
+    --background-base: var(--smoke-dark-1);
+    --background-weak: #1c1717;
+    --background-strong: #151313;
+    --background-stronger: #191515;
+    --surface-base: var(--smoke-dark-alpha-2);
+    --base: var(--smoke-dark-alpha-2);
+    --surface-base-hover: #e0b7b716;
+    --surface-base-active: var(--smoke-dark-alpha-3);
+    --surface-base-interactive-active: var(--cobalt-dark-alpha-2);
+    --base2: var(--smoke-dark-alpha-2);
+    --base3: var(--smoke-dark-alpha-2);
+    --surface-inset-base: #0e0b0b7f;
+    --surface-inset-base-hover: #0e0b0b7f;
+    --surface-inset-strong: #060505cc;
+    --surface-inset-strong-hover: #060505cc;
+    --surface-raised-base: var(--smoke-dark-alpha-3);
+    --surface-float-base: var(--smoke-dark-1);
+    --surface-float-base-hover: var(--smoke-dark-2);
+    --surface-raised-base-hover: var(--smoke-dark-alpha-4);
+    --surface-raised-base-active: var(--smoke-dark-alpha-5);
+    --surface-raised-strong: var(--smoke-dark-alpha-4);
+    --surface-raised-strong-hover: var(--smoke-dark-alpha-6);
+    --surface-raised-stronger: var(--smoke-dark-alpha-6);
+    --surface-raised-stronger-hover: var(--smoke-dark-alpha-7);
+    --surface-weak: var(--smoke-dark-alpha-4);
+    --surface-weaker: var(--smoke-dark-alpha-5);
+    --surface-strong: var(--smoke-dark-alpha-7);
+    --surface-raised-stronger-non-alpha: var(--smoke-dark-3);
+    --surface-brand-base: var(--yuzu-light-9);
+    --surface-brand-hover: var(--yuzu-light-10);
+    --surface-interactive-base: var(--cobalt-light-3);
+    --surface-interactive-hover: var(--cobalt-light-4);
+    --surface-interactive-weak: var(--cobalt-light-2);
+    --surface-interactive-weak-hover: var(--cobalt-light-3);
+    --surface-success-base: var(--apple-light-3);
+    --surface-success-weak: var(--apple-light-2);
+    --surface-success-strong: var(--apple-light-9);
+    --surface-warning-base: var(--solaris-light-3);
+    --surface-warning-weak: var(--solaris-light-2);
+    --surface-warning-strong: var(--solaris-light-9);
+    --surface-critical-base: var(--ember-dark-3);
+    --surface-critical-weak: var(--ember-dark-2);
+    --surface-critical-strong: var(--ember-dark-9);
+    --surface-info-base: var(--lilac-light-3);
+    --surface-info-weak: var(--lilac-light-2);
+    --surface-info-strong: var(--lilac-light-9);
+    --surface-diff-unchanged-base: var(--smoke-dark-1);
+    --surface-diff-skip-base: var(--smoke-dark-alpha-1);
+    --surface-diff-hidden-base: var(--blue-dark-2);
+    --surface-diff-hidden-weak: var(--blue-dark-1);
+    --surface-diff-hidden-weaker: var(--blue-dark-3);
+    --surface-diff-hidden-strong: var(--blue-dark-5);
+    --surface-diff-hidden-stronger: var(--blue-dark-11);
+    --surface-diff-add-base: var(--mint-dark-3);
+    --surface-diff-add-weak: var(--mint-dark-4);
+    --surface-diff-add-weaker: var(--mint-dark-3);
+    --surface-diff-add-strong: var(--mint-dark-5);
+    --surface-diff-add-stronger: var(--mint-dark-11);
+    --surface-diff-delete-base: var(--ember-dark-3);
+    --surface-diff-delete-weak: var(--ember-dark-4);
+    --surface-diff-delete-weaker: var(--ember-dark-3);
+    --surface-diff-delete-strong: var(--ember-dark-5);
+    --surface-diff-delete-stronger: var(--ember-dark-11);
+    --input-base: var(--smoke-dark-2);
+    --input-hover: var(--smoke-dark-2);
+    --input-active: var(--cobalt-dark-1);
+    --input-selected: var(--cobalt-dark-2);
+    --input-focus: var(--cobalt-dark-1);
+    --input-disabled: var(--smoke-dark-4);
+    --text-base: var(--smoke-dark-alpha-11);
+    --text-weak: var(--smoke-dark-alpha-9);
+    --text-weaker: var(--smoke-dark-alpha-8);
+    --text-strong: var(--smoke-dark-alpha-12);
+    --text-invert-base: var(--smoke-dark-alpha-11);
+    --text-invert-weak: var(--smoke-dark-alpha-9);
+    --text-invert-weaker: var(--smoke-dark-alpha-8);
+    --text-invert-strong: var(--smoke-dark-alpha-12);
+    --text-interactive-base: var(--cobalt-dark-11);
+    --text-on-brand-base: var(--smoke-dark-alpha-11);
+    --text-on-interactive-base: var(--smoke-dark-12);
+    --text-on-interactive-weak: var(--smoke-dark-alpha-11);
+    --text-on-success-base: var(--apple-dark-9);
+    --text-on-critical-base: var(--ember-dark-9);
+    --text-on-critical-weak: var(--ember-dark-8);
+    --text-on-critical-strong: var(--ember-dark-12);
+    --text-on-warning-base: var(--smoke-dark-alpha-11);
+    --text-on-info-base: var(--smoke-dark-alpha-11);
+    --text-diff-add-base: var(--mint-dark-11);
+    --text-diff-delete-base: var(--ember-dark-9);
+    --text-diff-delete-strong: var(--ember-dark-12);
+    --text-diff-add-strong: var(--mint-dark-8);
+    --text-on-info-weak: var(--smoke-dark-alpha-9);
+    --text-on-info-strong: var(--smoke-dark-alpha-12);
+    --text-on-warning-weak: var(--smoke-dark-alpha-9);
+    --text-on-warning-strong: var(--smoke-dark-alpha-12);
+    --text-on-success-weak: var(--apple-dark-8);
+    --text-on-success-strong: var(--apple-dark-12);
+    --text-on-brand-weak: var(--smoke-dark-alpha-9);
+    --text-on-brand-weaker: var(--smoke-dark-alpha-8);
+    --text-on-brand-strong: var(--smoke-dark-alpha-12);
+    --button-secondary-base: #231f1f;
+    --button-secondary-hover: #2a2727;
+    --border-base: var(--smoke-dark-alpha-7);
+    --border-hover: var(--smoke-dark-alpha-8);
+    --border-active: var(--smoke-dark-alpha-9);
+    --border-selected: var(--cobalt-dark-alpha-11);
+    --border-disabled: var(--smoke-dark-alpha-8);
+    --border-focus: var(--smoke-dark-alpha-9);
+    --border-weak-base: var(--smoke-dark-alpha-6);
+    --border-strong-base: var(--smoke-dark-alpha-8);
+    --border-strong-hover: var(--smoke-dark-alpha-7);
+    --border-strong-active: var(--smoke-dark-alpha-8);
+    --border-strong-selected: var(--cobalt-dark-alpha-6);
+    --border-strong-disabled: var(--smoke-dark-alpha-6);
+    --border-strong-focus: var(--smoke-dark-alpha-8);
+    --border-weak-hover: var(--smoke-dark-alpha-7);
+    --border-weak-active: var(--smoke-dark-alpha-8);
+    --border-weak-selected: var(--cobalt-dark-alpha-6);
+    --border-weak-disabled: var(--smoke-dark-alpha-6);
+    --border-weak-focus: var(--smoke-dark-alpha-8);
+    --border-interactive-base: var(--cobalt-light-7);
+    --border-interactive-hover: var(--cobalt-light-8);
+    --border-interactive-active: var(--cobalt-light-9);
+    --border-interactive-selected: var(--cobalt-light-9);
+    --border-interactive-disabled: var(--smoke-light-8);
+    --border-interactive-focus: var(--cobalt-light-9);
+    --border-success-base: var(--apple-light-6);
+    --border-success-hover: var(--apple-light-7);
+    --border-success-selected: var(--apple-light-9);
+    --border-warning-base: var(--solaris-light-6);
+    --border-warning-hover: var(--solaris-light-7);
+    --border-warning-selected: var(--solaris-light-9);
+    --border-critical-base: var(--ember-dark-5);
+    --border-critical-hover: var(--ember-dark-7);
+    --border-critical-selected: var(--ember-dark-9);
+    --border-info-base: var(--lilac-light-6);
+    --border-info-hover: var(--lilac-light-7);
+    --border-info-selected: var(--lilac-light-9);
+    --icon-base: var(--smoke-dark-9);
+    --icon-hover: var(--smoke-dark-10);
+    --icon-active: var(--smoke-dark-11);
+    --icon-selected: var(--smoke-dark-12);
+    --icon-disabled: var(--smoke-dark-7);
+    --icon-focus: var(--smoke-dark-12);
+    --icon-invert-base: var(--smoke-dark-1);
+    --icon-weak-base: var(--smoke-dark-6);
+    --icon-weak-hover: var(--smoke-light-7);
+    --icon-weak-active: var(--smoke-light-8);
+    --icon-weak-selected: var(--smoke-light-9);
+    --icon-weak-disabled: var(--smoke-light-4);
+    --icon-weak-focus: var(--smoke-light-9);
+    --icon-strong-base: var(--smoke-dark-12);
+    --icon-strong-hover: #f6f3f3;
+    --icon-strong-active: #fcfcfc;
+    --icon-strong-selected: #fdfcfc;
+    --icon-strong-disabled: var(--smoke-dark-8);
+    --icon-strong-focus: #fdfcfc;
+    --icon-brand-base: var(--white);
+    --icon-interactive-base: var(--cobalt-dark-9);
+    --icon-success-base: var(--apple-dark-7);
+    --icon-success-hover: var(--apple-dark-8);
+    --icon-success-active: var(--apple-dark-11);
+    --icon-warning-base: var(--amber-dark-7);
+    --icon-warning-hover: var(--amber-dark-8);
+    --icon-warning-active: var(--amber-dark-11);
+    --icon-critical-base: var(--ember-dark-9);
+    --icon-critical-hover: var(--ember-dark-11);
+    --icon-critical-active: var(--ember-dark-12);
+    --icon-info-base: var(--lilac-dark-7);
+    --icon-info-hover: var(--lilac-dark-8);
+    --icon-info-active: var(--lilac-dark-11);
+    --icon-on-brand-base: var(--smoke-light-alpha-11);
+    --icon-on-brand-hover: var(--smoke-light-alpha-12);
+    --icon-on-brand-selected: var(--smoke-light-alpha-12);
+    --icon-on-interactive-base: var(--smoke-dark-12);
+    --icon-agent-plan-base: var(--purple-dark-9);
+    --icon-agent-docs-base: var(--amber-dark-9);
+    --icon-agent-ask-base: var(--cyan-dark-9);
+    --icon-agent-build-base: var(--cobalt-dark-11);
+    --icon-on-success-base: var(--apple-dark-alpha-9);
+    --icon-on-success-hover: var(--apple-dark-alpha-10);
+    --icon-on-success-selected: var(--apple-dark-alpha-11);
+    --icon-on-warning-base: var(--amber-darkalpha-9);
+    --icon-on-warning-hover: var(--amber-darkalpha-10);
+    --icon-on-warning-selected: var(--amber-darkalpha-11);
+    --icon-on-critical-base: var(--ember-dark-alpha-9);
+    --icon-on-critical-hover: var(--ember-dark-alpha-10);
+    --icon-on-critical-selected: var(--ember-dark-alpha-11);
+    --icon-on-info-base: var(--lilac-dark-9);
+    --icon-on-info-hover: var(--lilac-dark-alpha-10);
+    --icon-on-info-selected: var(--lilac-dark-alpha-11);
+    --icon-diff-add-base: var(--mint-dark-11);
+    --icon-diff-add-hover: var(--mint-dark-10);
+    --icon-diff-add-active: var(--mint-dark-11);
+    --icon-diff-delete-base: var(--ember-dark-9);
+    --icon-diff-delete-hover: var(--ember-dark-10);
+    --syntax-comment: var(--text-weak);
+    --syntax-regexp: var(--text-base);
+    --syntax-string: #00ceb9;
+    --syntax-keyword: var(--text-weak);
+    --syntax-primitive: #ffba92;
+    --syntax-operator: var(--text-weak);
+    --syntax-variable: var(--text-strong);
+    --syntax-property: #ff9ae2;
+    --syntax-type: #ecf58c;
+    --syntax-constant: #93e9f6;
+    --syntax-punctuation: var(--text-weak);
+    --syntax-object: var(--text-strong);
+    --syntax-success: var(--apple-dark-10);
+    --syntax-warning: var(--amber-dark-10);
+    --syntax-critical: var(--ember-dark-10);
+    --syntax-info: #93e9f6;
+    --syntax-diff-add: var(--mint-dark-11);
+    --syntax-diff-delete: var(--ember-dark-11);
+    --syntax-diff-unknown: #ff0000;
+    --markdown-heading: #9d7cd8;
+    --markdown-text: #eeeeee;
+    --markdown-link: #fab283;
+    --markdown-link-text: #56b6c2;
+    --markdown-code: #7fd88f;
+    --markdown-block-quote: #e5c07b;
+    --markdown-emph: #e5c07b;
+    --markdown-strong: #f5a742;
+    --markdown-horizontal-rule: #808080;
+    --markdown-list-item: #fab283;
+    --markdown-list-enumeration: #56b6c2;
+    --markdown-image: #fab283;
+    --markdown-image-text: #56b6c2;
+    --markdown-code-block: #eeeeee;
+    --border-color: #ffffff;
+    --border-weaker-base: var(--smoke-dark-alpha-3);
+    --border-weaker-hover: var(--smoke-dark-alpha-4);
+    --border-weaker-active: var(--smoke-dark-alpha-6);
+    --border-weaker-selected: var(--cobalt-dark-alpha-3);
+    --border-weaker-disabled: var(--smoke-dark-alpha-2);
+    --border-weaker-focus: var(--smoke-dark-alpha-6);
+    --button-ghost-hover: var(--smoke-dark-alpha-2);
+    --button-ghost-hover2: var(--smoke-dark-alpha-3);
+    --avatar-background-pink: #501b3f;
+    --avatar-background-mint: #033a34;
+    --avatar-background-orange: #5f2a06;
+    --avatar-background-purple: #432155;
+    --avatar-background-cyan: #0f3058;
+    --avatar-background-lime: #2b3711;
+    --avatar-text-pink: #e34ba9;
+    --avatar-text-mint: #95f3d9;
+    --avatar-text-orange: #ff802b;
+    --avatar-text-purple: #9d5bd2;
+    --avatar-text-cyan: #369eff;
+    --avatar-text-lime: #c4f042;
   }
 }

From 69a15ae9c1e6737728649cebf3a4009d9ae8edd3 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Sun, 28 Dec 2025 12:04:31 +0000
Subject: [PATCH 27/60] ignore: update download stats 2025-12-28

---
 STATS.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/STATS.md b/STATS.md
index 41c93525478..6c155da05ad 100644
--- a/STATS.md
+++ b/STATS.md
@@ -183,3 +183,4 @@
 | 2025-12-25 | 1,333,032 (+23,709) | 1,217,283 (+13,516) | 2,550,315 (+37,225) |
 | 2025-12-26 | 1,352,411 (+19,379) | 1,227,615 (+10,332) | 2,580,026 (+29,711) |
 | 2025-12-27 | 1,371,771 (+19,360) | 1,238,236 (+10,621) | 2,610,007 (+29,981) |
+| 2025-12-28 | 1,390,388 (+18,617) | 1,245,690 (+7,454)  | 2,636,078 (+26,071) |

From 82a876da4de0074ca3d4d6af9a31dc6e8cf20c3a Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 28 Dec 2025 06:41:54 -0600
Subject: [PATCH 28/60] chore: cleanup

---
 packages/app/index.html                     | 31 ++++++++++-
 packages/app/script/inject-theme-preload.ts | 18 -------
 packages/app/vite.js                        | 18 -------
 packages/desktop/index.html                 | 31 ++++++++++-
 packages/ui/src/theme/context.tsx           | 14 +++--
 packages/ui/src/theme/preload.ts            | 58 +++++++--------------
 6 files changed, 85 insertions(+), 85 deletions(-)
 delete mode 100644 packages/app/script/inject-theme-preload.ts

diff --git a/packages/app/index.html b/packages/app/index.html
index 4f003c05bc7..ea423780448 100644
--- a/packages/app/index.html
+++ b/packages/app/index.html
@@ -13,9 +13,36 @@
     <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
     <meta property="og:image" content="/social-share.png" />
     <meta property="twitter:image" content="/social-share.png" />
-    <!-- Theme preload script - injected by Vite plugin to avoid FOUC -->
+    <!-- Theme preload script - applies cached theme to avoid FOUC -->
     <script id="oc-theme-preload-script">
-      /* THEME_PRELOAD_SCRIPT */
+      ;(function () {
+        var themeId = localStorage.getItem("opencode-theme-id")
+        if (!themeId) return
+
+        var scheme = localStorage.getItem("opencode-color-scheme") || "system"
+        var isDark = scheme === "dark" || (scheme === "system" && matchMedia("(prefers-color-scheme: dark)").matches)
+        var mode = isDark ? "dark" : "light"
+
+        document.documentElement.dataset.theme = themeId
+        document.documentElement.dataset.colorScheme = mode
+
+        if (themeId === "oc-1") return
+
+        var css = localStorage.getItem("opencode-theme-css-" + themeId + "-" + mode)
+        if (css) {
+          var style = document.createElement("style")
+          style.id = "oc-theme-preload"
+          style.textContent =
+            ":root{color-scheme:" +
+            mode +
+            ";--text-mix-blend-mode:" +
+            (isDark ? "plus-lighter" : "multiply") +
+            ";" +
+            css +
+            "}"
+          document.head.appendChild(style)
+        }
+      })()
     </script>
   </head>
   <body class="antialiased overscroll-none text-12-regular overflow-hidden">
diff --git a/packages/app/script/inject-theme-preload.ts b/packages/app/script/inject-theme-preload.ts
deleted file mode 100644
index 511ab7a3b5b..00000000000
--- a/packages/app/script/inject-theme-preload.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Injects the theme preload script into index.html.
- * Run this as part of the build process.
- */
-
-import { generatePreloadScript } from "@opencode-ai/ui/theme"
-
-const htmlPath = new URL("../index.html", import.meta.url).pathname
-const html = await Bun.file(htmlPath).text()
-
-const script = generatePreloadScript()
-const injectedHtml = html.replace(
-  /<script id="oc-theme-preload-script">\s*\/\* THEME_PRELOAD_SCRIPT \*\/\s*<\/script>/,
-  `<script id="oc-theme-preload-script">${script}</script>`,
-)
-
-await Bun.write(htmlPath, injectedHtml)
-console.log("Injected theme preload script into index.html")
diff --git a/packages/app/vite.js b/packages/app/vite.js
index 5ab36883653..6b8fd61376c 100644
--- a/packages/app/vite.js
+++ b/packages/app/vite.js
@@ -1,23 +1,6 @@
 import solidPlugin from "vite-plugin-solid"
 import tailwindcss from "@tailwindcss/vite"
 import { fileURLToPath } from "url"
-import { generatePreloadScript } from "@opencode-ai/ui/theme"
-
-/**
- * Vite plugin that injects the theme preload script into index.html.
- * This ensures the theme is applied before the page renders, avoiding FOUC.
- * @type {import("vite").Plugin}
- */
-const themePreloadPlugin = {
-  name: "opencode-desktop:theme-preload",
-  transformIndexHtml(html) {
-    const script = generatePreloadScript()
-    return html.replace(
-      /<script id="oc-theme-preload-script">\s*\/\* THEME_PRELOAD_SCRIPT \*\/\s*<\/script>/,
-      `<script id="oc-theme-preload-script">${script}</script>`,
-    )
-  },
-}
 
 /**
  * @type {import("vite").PluginOption}
@@ -38,7 +21,6 @@ export default [
       }
     },
   },
-  themePreloadPlugin,
   tailwindcss(),
   solidPlugin(),
 ]
diff --git a/packages/desktop/index.html b/packages/desktop/index.html
index ea656068ca9..83826b602ca 100644
--- a/packages/desktop/index.html
+++ b/packages/desktop/index.html
@@ -13,9 +13,36 @@
     <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
     <meta property="og:image" content="/social-share.png" />
     <meta property="twitter:image" content="/social-share.png" />
-    <!-- Theme preload script - injected by Vite plugin to avoid FOUC -->
+    <!-- Theme preload script - applies cached theme to avoid FOUC -->
     <script id="oc-theme-preload-script">
-      /* THEME_PRELOAD_SCRIPT */
+      ;(function () {
+        var themeId = localStorage.getItem("opencode-theme-id")
+        if (!themeId) return
+
+        var scheme = localStorage.getItem("opencode-color-scheme") || "system"
+        var isDark = scheme === "dark" || (scheme === "system" && matchMedia("(prefers-color-scheme: dark)").matches)
+        var mode = isDark ? "dark" : "light"
+
+        document.documentElement.dataset.theme = themeId
+        document.documentElement.dataset.colorScheme = mode
+
+        if (themeId === "oc-1") return
+
+        var css = localStorage.getItem("opencode-theme-css-" + themeId + "-" + mode)
+        if (css) {
+          var style = document.createElement("style")
+          style.id = "oc-theme-preload"
+          style.textContent =
+            ":root{color-scheme:" +
+            mode +
+            ";--text-mix-blend-mode:" +
+            (isDark ? "plus-lighter" : "multiply") +
+            ";" +
+            css +
+            "}"
+          document.head.appendChild(style)
+        }
+      })()
     </script>
   </head>
   <body class="antialiased overscroll-none text-12-regular overflow-hidden">
diff --git a/packages/ui/src/theme/context.tsx b/packages/ui/src/theme/context.tsx
index d8ca6d50777..9a2013ee98f 100644
--- a/packages/ui/src/theme/context.tsx
+++ b/packages/ui/src/theme/context.tsx
@@ -126,11 +126,13 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da
   const css = themeToCss(tokens)
 
   // Cache to localStorage for preload script
-  const cacheKey = getThemeCacheKey(themeId, mode)
-  try {
-    localStorage.setItem(cacheKey, css)
-  } catch {
-    // localStorage might be full or disabled
+  if (themeId !== "oc-1") {
+    const cacheKey = getThemeCacheKey(themeId, mode)
+    try {
+      localStorage.setItem(cacheKey, css)
+    } catch {
+      // localStorage might be full or disabled
+    }
   }
 
   // Build full CSS
@@ -159,6 +161,8 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da
  * Cache both light and dark variants of a theme
  */
 function cacheThemeVariants(theme: DesktopTheme, themeId: string): void {
+  if (themeId === "oc-1") return
+
   for (const mode of ["light", "dark"] as const) {
     const isDark = mode === "dark"
     const variant = isDark ? theme.dark : theme.light
diff --git a/packages/ui/src/theme/preload.ts b/packages/ui/src/theme/preload.ts
index eb54082faf9..7e1143202eb 100644
--- a/packages/ui/src/theme/preload.ts
+++ b/packages/ui/src/theme/preload.ts
@@ -4,15 +4,13 @@
  * Generates a minimal inline script that:
  * 1. Reads theme preferences from localStorage
  * 2. Applies cached theme CSS immediately (avoiding FOUC)
- * 3. Falls back to embedded default theme CSS on first visit
+ *
+ * The default (oc-1) theme is provided by `@opencode-ai/ui/styles` via `theme.css`,
+ * so the preload script only runs when a non-default theme is selected.
  *
  * The script should be placed in the document <head> before any stylesheets.
  */
 
-import { resolveThemeVariant, themeToCss } from "./resolve"
-import type { DesktopTheme } from "./types"
-import oc1Theme from "./themes/oc-1.json"
-
 // Storage keys used by both the preload script and the ThemeProvider
 export const STORAGE_KEYS = {
   THEME_ID: "opencode-theme-id",
@@ -27,34 +25,17 @@ export function getThemeCacheKey(themeId: string, mode: "light" | "dark"): strin
   return `${STORAGE_KEYS.THEME_CSS_PREFIX}-${themeId}-${mode}`
 }
 
-/**
- * Generate the embedded default theme CSS for the preload script.
- * This is used as a fallback when no cached theme exists.
- */
-function generateEmbeddedDefaults(): { light: string; dark: string } {
-  const theme = oc1Theme as DesktopTheme
-  const lightTokens = resolveThemeVariant(theme.light, false)
-  const darkTokens = resolveThemeVariant(theme.dark, true)
-
-  return {
-    light: themeToCss(lightTokens),
-    dark: themeToCss(darkTokens),
-  }
-}
-
 /**
  * Generate the inline preload script.
  *
  * This script should be placed in the document <head> to avoid FOUC.
- * It reads theme preferences from localStorage and applies the theme CSS
- * immediately, falling back to an embedded default theme.
+ * It reads theme preferences from localStorage and applies cached theme CSS
+ * immediately.
  */
 export function generatePreloadScript(): string {
-  const defaults = generateEmbeddedDefaults()
-
   // Minified version of the preload logic
   // Variables: T=themeId, S=scheme, D=isDark, M=mode, C=css, K=cacheKey
-  return `(function(){var T=localStorage.getItem("${STORAGE_KEYS.THEME_ID}")||"oc-1";var S=localStorage.getItem("${STORAGE_KEYS.COLOR_SCHEME}")||"system";var D=S==="dark"||(S==="system"&&matchMedia("(prefers-color-scheme:dark)").matches);var M=D?"dark":"light";var K="${STORAGE_KEYS.THEME_CSS_PREFIX}-"+T+"-"+M;var C=localStorage.getItem(K);if(!C&&T==="oc-1"){C=D?${JSON.stringify(defaults.dark)}:${JSON.stringify(defaults.light)}}if(C){var s=document.createElement("style");s.id="oc-theme-preload";s.textContent=":root{color-scheme:"+M+";--text-mix-blend-mode:"+(D?"plus-lighter":"multiply")+";"+C+"}";document.head.appendChild(s)}document.documentElement.dataset.theme=T;document.documentElement.dataset.colorScheme=M})();`
+  return `(function(){var T=localStorage.getItem("${STORAGE_KEYS.THEME_ID}");if(!T)return;var S=localStorage.getItem("${STORAGE_KEYS.COLOR_SCHEME}")||"system";var D=S==="dark"||(S==="system"&&matchMedia("(prefers-color-scheme:dark)").matches);var M=D?"dark":"light";document.documentElement.dataset.theme=T;document.documentElement.dataset.colorScheme=M;if(T==="oc-1")return;var K="${STORAGE_KEYS.THEME_CSS_PREFIX}-"+T+"-"+M;var C=localStorage.getItem(K);if(C){var s=document.createElement("style");s.id="oc-theme-preload";s.textContent=":root{color-scheme:"+M+";--text-mix-blend-mode:"+(D?"plus-lighter":"multiply")+";"+C+"}";document.head.appendChild(s)}})();`
 }
 
 /**
@@ -62,15 +43,16 @@ export function generatePreloadScript(): string {
  * Useful for debugging.
  */
 export function generatePreloadScriptFormatted(): string {
-  const defaults = generateEmbeddedDefaults()
-
   return `(function() {
   var THEME_KEY = "${STORAGE_KEYS.THEME_ID}";
   var SCHEME_KEY = "${STORAGE_KEYS.COLOR_SCHEME}";
   var CSS_PREFIX = "${STORAGE_KEYS.THEME_CSS_PREFIX}";
 
-  // Read preferences from localStorage
-  var themeId = localStorage.getItem(THEME_KEY) || "oc-1";
+  // Only preload when a theme is selected
+  var themeId = localStorage.getItem(THEME_KEY);
+  if (!themeId) return;
+
+  // Read color scheme preference
   var scheme = localStorage.getItem(SCHEME_KEY) || "system";
 
   // Determine if dark mode
@@ -78,17 +60,17 @@ export function generatePreloadScriptFormatted(): string {
     (scheme === "system" && matchMedia("(prefers-color-scheme: dark)").matches);
   var mode = isDark ? "dark" : "light";
 
+  // Set data attributes for CSS/JS reference
+  document.documentElement.dataset.theme = themeId;
+  document.documentElement.dataset.colorScheme = mode;
+
+  // Default theme is handled by theme.css
+  if (themeId === "oc-1") return;
+
   // Try to get cached CSS for this theme + mode
   var cacheKey = CSS_PREFIX + "-" + themeId + "-" + mode;
   var css = localStorage.getItem(cacheKey);
 
-  // Fallback to embedded default for oc-1 theme
-  if (!css && themeId === "oc-1") {
-    css = isDark
-      ? ${JSON.stringify(defaults.dark)}
-      : ${JSON.stringify(defaults.light)};
-  }
-
   // Apply CSS if we have it
   if (css) {
     var style = document.createElement("style");
@@ -100,9 +82,5 @@ export function generatePreloadScriptFormatted(): string {
     "}";
     document.head.appendChild(style);
   }
-
-  // Set data attributes for CSS/JS reference
-  document.documentElement.dataset.theme = themeId;
-  document.documentElement.dataset.colorScheme = mode;
 })();`
 }

From f89b83a6d797568b1240c0c141db526e170c0299 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 28 Dec 2025 10:14:30 -0600
Subject: [PATCH 29/60] chore: cleanup theme stuff

---
 packages/ui/script/generate-preload.ts | 16 -----
 packages/ui/src/theme/context.tsx      | 11 +++-
 packages/ui/src/theme/index.ts         |  3 -
 packages/ui/src/theme/preload.ts       | 86 --------------------------
 4 files changed, 10 insertions(+), 106 deletions(-)
 delete mode 100644 packages/ui/script/generate-preload.ts
 delete mode 100644 packages/ui/src/theme/preload.ts

diff --git a/packages/ui/script/generate-preload.ts b/packages/ui/script/generate-preload.ts
deleted file mode 100644
index 180b30564ef..00000000000
--- a/packages/ui/script/generate-preload.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Generates the theme preload script content.
- * Run this to get the script that should be embedded in index.html.
- */
-
-import { generatePreloadScript, generatePreloadScriptFormatted } from "../src/theme/preload"
-
-const formatted = process.argv.includes("--formatted")
-
-if (formatted) {
-  console.log("<script>")
-  console.log(generatePreloadScriptFormatted())
-  console.log("</script>")
-} else {
-  console.log("<script>" + generatePreloadScript() + "</script>")
-}
diff --git a/packages/ui/src/theme/context.tsx b/packages/ui/src/theme/context.tsx
index 9a2013ee98f..e2c31477ce4 100644
--- a/packages/ui/src/theme/context.tsx
+++ b/packages/ui/src/theme/context.tsx
@@ -19,7 +19,6 @@ import {
 } from "solid-js"
 import type { DesktopTheme } from "./types"
 import { resolveThemeVariant, themeToCss } from "./resolve"
-import { STORAGE_KEYS, getThemeCacheKey } from "./preload"
 import { DEFAULT_THEMES } from "./default-themes"
 
 export type ColorScheme = "light" | "dark" | "system"
@@ -43,6 +42,16 @@ interface ThemeContextValue {
 
 const ThemeContext = createContext<ThemeContextValue>()
 
+const STORAGE_KEYS = {
+  THEME_ID: "opencode-theme-id",
+  COLOR_SCHEME: "opencode-color-scheme",
+  THEME_CSS_PREFIX: "opencode-theme-css",
+} as const
+
+function getThemeCacheKey(themeId: string, mode: "light" | "dark"): string {
+  return `${STORAGE_KEYS.THEME_CSS_PREFIX}-${themeId}-${mode}`
+}
+
 /**
  * Static tokens that don't change between themes
  */
diff --git a/packages/ui/src/theme/index.ts b/packages/ui/src/theme/index.ts
index 8f3da4ca130..49ab76b57cb 100644
--- a/packages/ui/src/theme/index.ts
+++ b/packages/ui/src/theme/index.ts
@@ -52,9 +52,6 @@ export { applyTheme, loadThemeFromUrl, getActiveTheme, removeTheme, setColorSche
 // Theme context (SolidJS)
 export { ThemeProvider, useTheme, type ColorScheme } from "./context"
 
-// Preload script utilities
-export { generatePreloadScript, generatePreloadScriptFormatted, STORAGE_KEYS, getThemeCacheKey } from "./preload"
-
 // Default themes
 export {
   DEFAULT_THEMES,
diff --git a/packages/ui/src/theme/preload.ts b/packages/ui/src/theme/preload.ts
deleted file mode 100644
index 7e1143202eb..00000000000
--- a/packages/ui/src/theme/preload.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * Theme preload script generator.
- *
- * Generates a minimal inline script that:
- * 1. Reads theme preferences from localStorage
- * 2. Applies cached theme CSS immediately (avoiding FOUC)
- *
- * The default (oc-1) theme is provided by `@opencode-ai/ui/styles` via `theme.css`,
- * so the preload script only runs when a non-default theme is selected.
- *
- * The script should be placed in the document <head> before any stylesheets.
- */
-
-// Storage keys used by both the preload script and the ThemeProvider
-export const STORAGE_KEYS = {
-  THEME_ID: "opencode-theme-id",
-  COLOR_SCHEME: "opencode-color-scheme",
-  THEME_CSS_PREFIX: "opencode-theme-css",
-} as const
-
-/**
- * Get the localStorage key for cached theme CSS
- */
-export function getThemeCacheKey(themeId: string, mode: "light" | "dark"): string {
-  return `${STORAGE_KEYS.THEME_CSS_PREFIX}-${themeId}-${mode}`
-}
-
-/**
- * Generate the inline preload script.
- *
- * This script should be placed in the document <head> to avoid FOUC.
- * It reads theme preferences from localStorage and applies cached theme CSS
- * immediately.
- */
-export function generatePreloadScript(): string {
-  // Minified version of the preload logic
-  // Variables: T=themeId, S=scheme, D=isDark, M=mode, C=css, K=cacheKey
-  return `(function(){var T=localStorage.getItem("${STORAGE_KEYS.THEME_ID}");if(!T)return;var S=localStorage.getItem("${STORAGE_KEYS.COLOR_SCHEME}")||"system";var D=S==="dark"||(S==="system"&&matchMedia("(prefers-color-scheme:dark)").matches);var M=D?"dark":"light";document.documentElement.dataset.theme=T;document.documentElement.dataset.colorScheme=M;if(T==="oc-1")return;var K="${STORAGE_KEYS.THEME_CSS_PREFIX}-"+T+"-"+M;var C=localStorage.getItem(K);if(C){var s=document.createElement("style");s.id="oc-theme-preload";s.textContent=":root{color-scheme:"+M+";--text-mix-blend-mode:"+(D?"plus-lighter":"multiply")+";"+C+"}";document.head.appendChild(s)}})();`
-}
-
-/**
- * Generate a formatted (readable) version of the preload script.
- * Useful for debugging.
- */
-export function generatePreloadScriptFormatted(): string {
-  return `(function() {
-  var THEME_KEY = "${STORAGE_KEYS.THEME_ID}";
-  var SCHEME_KEY = "${STORAGE_KEYS.COLOR_SCHEME}";
-  var CSS_PREFIX = "${STORAGE_KEYS.THEME_CSS_PREFIX}";
-
-  // Only preload when a theme is selected
-  var themeId = localStorage.getItem(THEME_KEY);
-  if (!themeId) return;
-
-  // Read color scheme preference
-  var scheme = localStorage.getItem(SCHEME_KEY) || "system";
-
-  // Determine if dark mode
-  var isDark = scheme === "dark" ||
-    (scheme === "system" && matchMedia("(prefers-color-scheme: dark)").matches);
-  var mode = isDark ? "dark" : "light";
-
-  // Set data attributes for CSS/JS reference
-  document.documentElement.dataset.theme = themeId;
-  document.documentElement.dataset.colorScheme = mode;
-
-  // Default theme is handled by theme.css
-  if (themeId === "oc-1") return;
-
-  // Try to get cached CSS for this theme + mode
-  var cacheKey = CSS_PREFIX + "-" + themeId + "-" + mode;
-  var css = localStorage.getItem(cacheKey);
-
-  // Apply CSS if we have it
-  if (css) {
-    var style = document.createElement("style");
-    style.id = "oc-theme-preload";
-    style.textContent = ":root{" +
-      "color-scheme:" + mode + ";" +
-      "--text-mix-blend-mode:" + (isDark ? "plus-lighter" : "multiply") + ";" +
-      css +
-    "}";
-    document.head.appendChild(style);
-  }
-})();`
-}

From 040939fb720f8666eaee3d3b1866fe84e40151ca Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 28 Dec 2025 10:21:32 -0600
Subject: [PATCH 30/60] chore: cleanup theme stuff

---
 packages/ui/src/theme/color.ts    |  73 --------------------
 packages/ui/src/theme/context.tsx | 102 +--------------------------
 packages/ui/src/theme/index.ts    |  24 -------
 packages/ui/src/theme/loader.ts   | 110 ------------------------------
 packages/ui/src/theme/resolve.ts  |  40 -----------
 packages/ui/src/theme/types.ts    |  41 -----------
 6 files changed, 2 insertions(+), 388 deletions(-)

diff --git a/packages/ui/src/theme/color.ts b/packages/ui/src/theme/color.ts
index 3a0526ca6c3..f0e15211e95 100644
--- a/packages/ui/src/theme/color.ts
+++ b/packages/ui/src/theme/color.ts
@@ -1,13 +1,5 @@
-/**
- * Color utilities for theme generation using OKLCH color space.
- * OKLCH provides perceptually uniform color manipulation.
- */
-
 import type { HexColor, OklchColor } from "./types"
 
-/**
- * Convert hex color to RGB values (0-1 range)
- */
 export function hexToRgb(hex: HexColor): { r: number; g: number; b: number } {
   const h = hex.replace("#", "")
   const full =
@@ -26,9 +18,6 @@ export function hexToRgb(hex: HexColor): { r: number; g: number; b: number } {
   }
 }
 
-/**
- * Convert RGB (0-1 range) to hex color
- */
 export function rgbToHex(r: number, g: number, b: number): HexColor {
   const toHex = (v: number) => {
     const clamped = Math.max(0, Math.min(1, v))
@@ -38,32 +27,21 @@ export function rgbToHex(r: number, g: number, b: number): HexColor {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`
 }
 
-/**
- * Convert linear RGB to sRGB
- */
 function linearToSrgb(c: number): number {
   if (c <= 0.0031308) return c * 12.92
   return 1.055 * Math.pow(c, 1 / 2.4) - 0.055
 }
 
-/**
- * Convert sRGB to linear RGB
- */
 function srgbToLinear(c: number): number {
   if (c <= 0.04045) return c / 12.92
   return Math.pow((c + 0.055) / 1.055, 2.4)
 }
 
-/**
- * Convert RGB to OKLCH
- */
 export function rgbToOklch(r: number, g: number, b: number): OklchColor {
-  // Convert to linear RGB
   const lr = srgbToLinear(r)
   const lg = srgbToLinear(g)
   const lb = srgbToLinear(b)
 
-  // RGB to OKLab matrix multiplication
   const l_ = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb
   const m_ = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb
   const s_ = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb
@@ -83,9 +61,6 @@ export function rgbToOklch(r: number, g: number, b: number): OklchColor {
   return { l: L, c: C, h: H }
 }
 
-/**
- * Convert OKLCH to RGB
- */
 export function oklchToRgb(oklch: OklchColor): { r: number; g: number; b: number } {
   const { l: L, c: C, h: H } = oklch
 
@@ -111,43 +86,24 @@ export function oklchToRgb(oklch: OklchColor): { r: number; g: number; b: number
   }
 }
 
-/**
- * Convert hex to OKLCH
- */
 export function hexToOklch(hex: HexColor): OklchColor {
   const { r, g, b } = hexToRgb(hex)
   return rgbToOklch(r, g, b)
 }
 
-/**
- * Convert OKLCH to hex
- */
 export function oklchToHex(oklch: OklchColor): HexColor {
   const { r, g, b } = oklchToRgb(oklch)
   return rgbToHex(r, g, b)
 }
 
-/**
- * Generate a 12-step color scale from a seed color.
- * Steps 1-4: Very light (backgrounds)
- * Steps 5-7: Mid tones (borders, subtle UI)
- * Steps 8-9: Saturated (primary buttons, text)
- * Steps 10-12: Dark (text, strong accents)
- *
- * @param seed - The seed color (typically step 9 - the main accent)
- * @param isDark - Whether generating for dark mode
- */
 export function generateScale(seed: HexColor, isDark: boolean): HexColor[] {
   const base = hexToOklch(seed)
   const scale: HexColor[] = []
 
-  // Lightness values for each step (0-1)
-  // These are tuned to match Radix-style color scales
   const lightSteps = isDark
     ? [0.15, 0.18, 0.22, 0.26, 0.32, 0.38, 0.46, 0.56, base.l, base.l - 0.05, 0.75, 0.93]
     : [0.99, 0.97, 0.94, 0.9, 0.85, 0.79, 0.72, 0.64, base.l, base.l + 0.05, 0.45, 0.25]
 
-  // Chroma multipliers - less saturation at extremes
   const chromaMultipliers = isDark
     ? [0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.85, 1, 1, 0.9, 0.6]
     : [0.1, 0.15, 0.25, 0.35, 0.45, 0.55, 0.7, 0.85, 1, 1, 0.95, 0.85]
@@ -165,18 +121,9 @@ export function generateScale(seed: HexColor, isDark: boolean): HexColor[] {
   return scale
 }
 
-/**
- * Generate a neutral gray scale from a seed color.
- * The seed color's hue is used to tint the grays slightly.
- *
- * @param seed - A neutral-ish color to derive the gray scale from
- * @param isDark - Whether generating for dark mode
- */
 export function generateNeutralScale(seed: HexColor, isDark: boolean): HexColor[] {
   const base = hexToOklch(seed)
   const scale: HexColor[] = []
-
-  // Very low chroma for neutrals - just a hint of the hue
   const neutralChroma = Math.min(base.c, 0.02)
 
   const lightSteps = isDark
@@ -196,12 +143,7 @@ export function generateNeutralScale(seed: HexColor, isDark: boolean): HexColor[
   return scale
 }
 
-/**
- * Generate alpha variants of a color scale.
- * Returns hex colors with alpha pre-multiplied against white (light) or black (dark).
- */
 export function generateAlphaScale(scale: HexColor[], isDark: boolean): HexColor[] {
-  // Alpha values for each step
   const alphas = isDark
     ? [0.02, 0.04, 0.08, 0.12, 0.16, 0.2, 0.26, 0.36, 0.44, 0.52, 0.76, 0.96]
     : [0.01, 0.03, 0.06, 0.09, 0.12, 0.15, 0.2, 0.28, 0.48, 0.56, 0.64, 0.88]
@@ -210,21 +152,15 @@ export function generateAlphaScale(scale: HexColor[], isDark: boolean): HexColor
     const { r, g, b } = hexToRgb(hex)
     const a = alphas[i]
 
-    // Pre-multiply against white (light) or black (dark)
     const bg = isDark ? 0 : 1
     const blendedR = r * a + bg * (1 - a)
     const blendedG = g * a + bg * (1 - a)
     const blendedB = b * a + bg * (1 - a)
 
-    // Return as hex with alpha encoded in the color itself
-    // For true alpha, we'd need rgba(), but this approximates it
     return rgbToHex(blendedR, blendedG, blendedB)
   })
 }
 
-/**
- * Mix two colors together
- */
 export function mixColors(color1: HexColor, color2: HexColor, amount: number): HexColor {
   const c1 = hexToOklch(color1)
   const c2 = hexToOklch(color2)
@@ -236,9 +172,6 @@ export function mixColors(color1: HexColor, color2: HexColor, amount: number): H
   })
 }
 
-/**
- * Lighten a color by a given amount (0-1)
- */
 export function lighten(color: HexColor, amount: number): HexColor {
   const oklch = hexToOklch(color)
   return oklchToHex({
@@ -247,9 +180,6 @@ export function lighten(color: HexColor, amount: number): HexColor {
   })
 }
 
-/**
- * Darken a color by a given amount (0-1)
- */
 export function darken(color: HexColor, amount: number): HexColor {
   const oklch = hexToOklch(color)
   return oklchToHex({
@@ -258,9 +188,6 @@ export function darken(color: HexColor, amount: number): HexColor {
   })
 }
 
-/**
- * Adjust the alpha/opacity of a hex color (returns rgba string)
- */
 export function withAlpha(color: HexColor, alpha: number): string {
   const { r, g, b } = hexToRgb(color)
   return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha})`
diff --git a/packages/ui/src/theme/context.tsx b/packages/ui/src/theme/context.tsx
index e2c31477ce4..d2fbed3a1b0 100644
--- a/packages/ui/src/theme/context.tsx
+++ b/packages/ui/src/theme/context.tsx
@@ -1,12 +1,3 @@
-/**
- * Theme context for SolidJS applications.
- * Provides reactive theme management with localStorage persistence and caching.
- *
- * Works in conjunction with the preload script to provide zero-FOUC theming:
- * 1. Preload script applies cached CSS immediately from localStorage
- * 2. ThemeProvider takes over, resolves theme, and updates cache
- */
-
 import {
   createContext,
   useContext,
@@ -24,19 +15,12 @@ import { DEFAULT_THEMES } from "./default-themes"
 export type ColorScheme = "light" | "dark" | "system"
 
 interface ThemeContextValue {
-  /** Currently active theme ID */
   themeId: Accessor<string>
-  /** Current color scheme preference */
   colorScheme: Accessor<ColorScheme>
-  /** Resolved current mode (light or dark) */
   mode: Accessor<"light" | "dark">
-  /** All available themes */
   themes: Accessor<Record<string, DesktopTheme>>
-  /** Set the active theme by ID */
   setTheme: (id: string) => void
-  /** Set color scheme preference */
   setColorScheme: (scheme: ColorScheme) => void
-  /** Register a custom theme */
   registerTheme: (theme: DesktopTheme) => void
 }
 
@@ -52,59 +36,6 @@ function getThemeCacheKey(themeId: string, mode: "light" | "dark"): string {
   return `${STORAGE_KEYS.THEME_CSS_PREFIX}-${themeId}-${mode}`
 }
 
-/**
- * Static tokens that don't change between themes
- */
-const STATIC_TOKENS = `
-  --font-family-sans: "Inter", "Inter Fallback";
-  --font-family-sans--font-feature-settings: "ss03" 1;
-  --font-family-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
-  --font-family-mono--font-feature-settings: "ss01" 1;
-  --font-size-small: 13px;
-  --font-size-base: 14px;
-  --font-size-large: 16px;
-  --font-size-x-large: 20px;
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --line-height-large: 150%;
-  --line-height-x-large: 180%;
-  --line-height-2x-large: 200%;
-  --letter-spacing-normal: 0;
-  --letter-spacing-tight: -0.16;
-  --letter-spacing-tightest: -0.32;
-  --paragraph-spacing-base: 0;
-  --spacing: 0.25rem;
-  --breakpoint-sm: 40rem;
-  --breakpoint-md: 48rem;
-  --breakpoint-lg: 64rem;
-  --breakpoint-xl: 80rem;
-  --breakpoint-2xl: 96rem;
-  --container-3xs: 16rem;
-  --container-2xs: 18rem;
-  --container-xs: 20rem;
-  --container-sm: 24rem;
-  --container-md: 28rem;
-  --container-lg: 32rem;
-  --container-xl: 36rem;
-  --container-2xl: 42rem;
-  --container-3xl: 48rem;
-  --container-4xl: 56rem;
-  --container-5xl: 64rem;
-  --container-6xl: 72rem;
-  --container-7xl: 80rem;
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.625rem;
-  --shadow-xs: 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
-  --shadow-md: 0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
-  --shadow-xs-border: 0 0 0 1px var(--border-base), 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
-  --shadow-xs-border-base: 0 0 0 1px var(--border-weak-base), 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
-  --shadow-xs-border-select: 0 0 0 3px var(--border-weak-selected), 0 0 0 1px var(--border-selected), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
-  --shadow-xs-border-focus: 0 0 0 1px var(--border-base), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak), 0 0 0 3px var(--border-selected);
-`
-
 const THEME_STYLE_ID = "oc-theme"
 
 function ensureThemeStyleElement(): HTMLStyleElement {
@@ -118,41 +49,29 @@ function ensureThemeStyleElement(): HTMLStyleElement {
   return element
 }
 
-/**
- * Resolve a mode from system preference
- */
 function getSystemMode(): "light" | "dark" {
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
 }
 
-/**
- * Apply theme CSS to the document
- */
 function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "dark"): void {
   const isDark = mode === "dark"
   const variant = isDark ? theme.dark : theme.light
   const tokens = resolveThemeVariant(variant, isDark)
   const css = themeToCss(tokens)
 
-  // Cache to localStorage for preload script
   if (themeId !== "oc-1") {
     const cacheKey = getThemeCacheKey(themeId, mode)
     try {
       localStorage.setItem(cacheKey, css)
-    } catch {
-      // localStorage might be full or disabled
-    }
+    } catch {}
   }
 
-  // Build full CSS
   const fullCss = `:root {
-  ${STATIC_TOKENS}
   color-scheme: ${mode};
   --text-mix-blend-mode: ${isDark ? "plus-lighter" : "multiply"};
   ${css}
 }`
 
-  // Remove preload style if it exists
   const preloadStyle = document.getElementById("oc-theme-preload")
   if (preloadStyle) {
     preloadStyle.remove()
@@ -161,14 +80,10 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da
   const themeStyleElement = ensureThemeStyleElement()
   themeStyleElement.textContent = fullCss
 
-  // Update data attributes
   document.documentElement.dataset.theme = themeId
   document.documentElement.dataset.colorScheme = mode
 }
 
-/**
- * Cache both light and dark variants of a theme
- */
 function cacheThemeVariants(theme: DesktopTheme, themeId: string): void {
   if (themeId === "oc-1") return
 
@@ -180,9 +95,7 @@ function cacheThemeVariants(theme: DesktopTheme, themeId: string): void {
     const cacheKey = getThemeCacheKey(themeId, mode)
     try {
       localStorage.setItem(cacheKey, css)
-    } catch {
-      // localStorage might be full or disabled
-    }
+    } catch {}
   }
 }
 
@@ -192,7 +105,6 @@ export function ThemeProvider(props: { children: JSX.Element; defaultTheme?: str
   const [colorScheme, setColorSchemeSignal] = createSignal<ColorScheme>("system")
   const [mode, setMode] = createSignal<"light" | "dark">(getSystemMode())
 
-  // Listen for system color scheme changes
   onMount(() => {
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
     const handler = () => {
@@ -203,29 +115,23 @@ export function ThemeProvider(props: { children: JSX.Element; defaultTheme?: str
     mediaQuery.addEventListener("change", handler)
     onCleanup(() => mediaQuery.removeEventListener("change", handler))
 
-    // Load saved preferences
     const savedTheme = localStorage.getItem(STORAGE_KEYS.THEME_ID)
     const savedScheme = localStorage.getItem(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null
-
     if (savedTheme && themes()[savedTheme]) {
       setThemeIdSignal(savedTheme)
     }
-
     if (savedScheme) {
       setColorSchemeSignal(savedScheme)
       if (savedScheme !== "system") {
         setMode(savedScheme)
       }
     }
-
-    // Cache current theme variants for future preloads
     const currentTheme = themes()[themeId()]
     if (currentTheme) {
       cacheThemeVariants(currentTheme, themeId())
     }
   })
 
-  // Apply theme when themeId or mode changes
   createEffect(() => {
     const id = themeId()
     const m = mode()
@@ -241,18 +147,14 @@ export function ThemeProvider(props: { children: JSX.Element; defaultTheme?: str
       console.warn(`Theme "${id}" not found`)
       return
     }
-
     setThemeIdSignal(id)
     localStorage.setItem(STORAGE_KEYS.THEME_ID, id)
-
-    // Cache both variants for future preloads
     cacheThemeVariants(theme, id)
   }
 
   const setColorSchemePref = (scheme: ColorScheme) => {
     setColorSchemeSignal(scheme)
     localStorage.setItem(STORAGE_KEYS.COLOR_SCHEME, scheme)
-
     if (scheme === "system") {
       setMode(getSystemMode())
     } else {
diff --git a/packages/ui/src/theme/index.ts b/packages/ui/src/theme/index.ts
index 49ab76b57cb..d8e0461be36 100644
--- a/packages/ui/src/theme/index.ts
+++ b/packages/ui/src/theme/index.ts
@@ -1,20 +1,3 @@
-/**
- * Desktop Theme System
- *
- * Provides JSON-based theming for the desktop app. Unlike TUI themes,
- * desktop themes use more design tokens and generate full color scales
- * from seed colors.
- *
- * Usage:
- * ```ts
- * import { applyTheme } from "@opencode/ui/theme"
- * import myTheme from "./themes/my-theme.json"
- *
- * applyTheme(myTheme)
- * ```
- */
-
-// Types
 export type {
   DesktopTheme,
   ThemeSeedColors,
@@ -26,7 +9,6 @@ export type {
   CssVarRef,
 } from "./types"
 
-// Color utilities
 export {
   hexToRgb,
   rgbToHex,
@@ -43,16 +25,10 @@ export {
   withAlpha,
 } from "./color"
 
-// Theme resolution
 export { resolveThemeVariant, resolveTheme, themeToCss } from "./resolve"
-
-// Theme loader
 export { applyTheme, loadThemeFromUrl, getActiveTheme, removeTheme, setColorScheme } from "./loader"
-
-// Theme context (SolidJS)
 export { ThemeProvider, useTheme, type ColorScheme } from "./context"
 
-// Default themes
 export {
   DEFAULT_THEMES,
   oc1Theme,
diff --git a/packages/ui/src/theme/loader.ts b/packages/ui/src/theme/loader.ts
index b25c833dd3d..0f61076a001 100644
--- a/packages/ui/src/theme/loader.ts
+++ b/packages/ui/src/theme/loader.ts
@@ -1,13 +1,7 @@
-/**
- * Theme loader - loads theme JSON files and applies them to the DOM.
- */
-
 import type { DesktopTheme, ResolvedTheme } from "./types"
 import { resolveThemeVariant, themeToCss } from "./resolve"
 
-/** Currently active theme */
 let activeTheme: DesktopTheme | null = null
-
 const THEME_STYLE_ID = "opencode-theme"
 
 function ensureLoaderStyleElement(): HTMLStyleElement {
@@ -21,115 +15,25 @@ function ensureLoaderStyleElement(): HTMLStyleElement {
   return element
 }
 
-/**
- * Load and apply a theme to the document.
- * Creates or updates a <style> element with the theme's CSS custom properties.
- *
- * @param theme - The desktop theme to apply
- * @param themeId - Optional theme ID for the data-theme attribute
- */
 export function applyTheme(theme: DesktopTheme, themeId?: string): void {
   activeTheme = theme
-
-  // Resolve both variants
   const lightTokens = resolveThemeVariant(theme.light, false)
   const darkTokens = resolveThemeVariant(theme.dark, true)
-
   const targetThemeId = themeId ?? theme.id
-
-  // Build the CSS
   const css = buildThemeCss(lightTokens, darkTokens, targetThemeId)
-
   const themeStyleElement = ensureLoaderStyleElement()
   themeStyleElement.textContent = css
-
   document.documentElement.setAttribute("data-theme", targetThemeId)
 }
 
-/**
- * Build CSS string from resolved theme tokens
- */
 function buildThemeCss(light: ResolvedTheme, dark: ResolvedTheme, themeId: string): string {
   const isDefaultTheme = themeId === "oc-1"
-
-  // Static tokens that don't change between themes
-  const staticTokens = `
-  --font-family-sans: "Inter", "Inter Fallback";
-  --font-family-sans--font-feature-settings: "ss03" 1;
-  --font-family-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
-  --font-family-mono--font-feature-settings: "ss01" 1;
-
-  --font-size-small: 13px;
-  --font-size-base: 14px;
-  --font-size-large: 16px;
-  --font-size-x-large: 20px;
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --line-height-large: 150%;
-  --line-height-x-large: 180%;
-  --line-height-2x-large: 200%;
-  --letter-spacing-normal: 0;
-  --letter-spacing-tight: -0.1599999964237213;
-  --letter-spacing-tightest: -0.3199999928474426;
-  --paragraph-spacing-base: 0;
-
-  --spacing: 0.25rem;
-
-  --breakpoint-sm: 40rem;
-  --breakpoint-md: 48rem;
-  --breakpoint-lg: 64rem;
-  --breakpoint-xl: 80rem;
-  --breakpoint-2xl: 96rem;
-
-  --container-3xs: 16rem;
-  --container-2xs: 18rem;
-  --container-xs: 20rem;
-  --container-sm: 24rem;
-  --container-md: 28rem;
-  --container-lg: 32rem;
-  --container-xl: 36rem;
-  --container-2xl: 42rem;
-  --container-3xl: 48rem;
-  --container-4xl: 56rem;
-  --container-5xl: 64rem;
-  --container-6xl: 72rem;
-  --container-7xl: 80rem;
-
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.625rem;
-
-  --shadow-xs:
-    0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
-  --shadow-md:
-    0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
-  --shadow-xs-border:
-    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
-    0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
-  --shadow-xs-border-base:
-    0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
-    0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
-  --shadow-xs-border-select:
-    0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
-    0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
-    0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
-  --shadow-xs-border-focus:
-    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
-    0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0),
-    0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));`
-
   const lightCss = themeToCss(light)
   const darkCss = themeToCss(dark)
 
-  // For the default theme, we use :root directly
-  // For named themes, we use the [data-theme] selector
   if (isDefaultTheme) {
     return `
 :root {
-  ${staticTokens}
-
   color-scheme: light;
   --text-mix-blend-mode: multiply;
 
@@ -147,8 +51,6 @@ function buildThemeCss(light: ResolvedTheme, dark: ResolvedTheme, themeId: strin
 
   return `
 html[data-theme="${themeId}"] {
-  ${staticTokens}
-
   color-scheme: light;
   --text-mix-blend-mode: multiply;
 
@@ -164,9 +66,6 @@ html[data-theme="${themeId}"] {
 `
 }
 
-/**
- * Load a theme from a JSON file URL
- */
 export async function loadThemeFromUrl(url: string): Promise<DesktopTheme> {
   const response = await fetch(url)
   if (!response.ok) {
@@ -175,9 +74,6 @@ export async function loadThemeFromUrl(url: string): Promise<DesktopTheme> {
   return response.json()
 }
 
-/**
- * Get the currently active theme
- */
 export function getActiveTheme(): DesktopTheme | null {
   const activeId = document.documentElement.getAttribute("data-theme")
   if (!activeId) {
@@ -189,9 +85,6 @@ export function getActiveTheme(): DesktopTheme | null {
   return null
 }
 
-/**
- * Remove the current theme and clean up
- */
 export function removeTheme(): void {
   activeTheme = null
   const existingElement = document.getElementById(THEME_STYLE_ID)
@@ -201,9 +94,6 @@ export function removeTheme(): void {
   document.documentElement.removeAttribute("data-theme")
 }
 
-/**
- * Force a specific color scheme (light/dark) regardless of system preference
- */
 export function setColorScheme(scheme: "light" | "dark" | "auto"): void {
   if (scheme === "auto") {
     document.documentElement.style.removeProperty("color-scheme")
diff --git a/packages/ui/src/theme/resolve.ts b/packages/ui/src/theme/resolve.ts
index e8b6d9c3ee4..7339088c48f 100644
--- a/packages/ui/src/theme/resolve.ts
+++ b/packages/ui/src/theme/resolve.ts
@@ -1,17 +1,9 @@
-/**
- * Theme resolver - generates all CSS custom properties from theme seed colors.
- */
-
 import type { ColorValue, DesktopTheme, HexColor, ResolvedTheme, ThemeVariant } from "./types"
 import { generateNeutralScale, generateScale, hexToOklch, oklchToHex, withAlpha } from "./color"
 
-/**
- * Resolve a theme variant to all CSS custom properties
- */
 export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): ResolvedTheme {
   const { seeds, overrides = {} } = variant
 
-  // Generate color scales
   const neutral = generateNeutralScale(seeds.neutral, isDark)
   const primary = generateScale(seeds.primary, isDark)
   const success = generateScale(seeds.success, isDark)
@@ -22,19 +14,15 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   const diffAdd = generateScale(seeds.diffAdd, isDark)
   const diffDelete = generateScale(seeds.diffDelete, isDark)
 
-  // Generate alpha variants for neutral
   const neutralAlpha = generateNeutralAlphaScale(neutral, isDark)
 
-  // Build the full token map
   const tokens: ResolvedTheme = {}
 
-  // === Background tokens ===
   tokens["background-base"] = neutral[0]
   tokens["background-weak"] = neutral[2]
   tokens["background-strong"] = neutral[0]
   tokens["background-stronger"] = isDark ? neutral[1] : "#fcfcfc"
 
-  // === Surface tokens ===
   tokens["surface-base"] = neutralAlpha[1]
   tokens["base"] = neutralAlpha[1]
   tokens["surface-base-hover"] = neutralAlpha[2]
@@ -62,17 +50,14 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["surface-strong"] = isDark ? neutralAlpha[6] : "#ffffff"
   tokens["surface-raised-stronger-non-alpha"] = isDark ? neutral[2] : "#ffffff"
 
-  // Brand surface
   tokens["surface-brand-base"] = primary[8]
   tokens["surface-brand-hover"] = primary[9]
 
-  // Interactive surfaces
   tokens["surface-interactive-base"] = interactive[2]
   tokens["surface-interactive-hover"] = interactive[3]
   tokens["surface-interactive-weak"] = interactive[1]
   tokens["surface-interactive-weak-hover"] = interactive[2]
 
-  // Status surfaces
   tokens["surface-success-base"] = success[2]
   tokens["surface-success-weak"] = success[1]
   tokens["surface-success-strong"] = success[8]
@@ -86,7 +71,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["surface-info-weak"] = info[1]
   tokens["surface-info-strong"] = info[8]
 
-  // Diff surfaces
   tokens["surface-diff-unchanged-base"] = isDark ? neutral[0] : "#ffffff00"
   tokens["surface-diff-skip-base"] = isDark ? neutralAlpha[0] : neutral[1]
   tokens["surface-diff-hidden-base"] = interactive[isDark ? 1 : 2]
@@ -105,7 +89,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["surface-diff-delete-strong"] = diffDelete[isDark ? 4 : 5]
   tokens["surface-diff-delete-stronger"] = diffDelete[isDark ? 10 : 8]
 
-  // === Input tokens ===
   tokens["input-base"] = isDark ? neutral[1] : neutral[0]
   tokens["input-hover"] = neutral[1]
   tokens["input-active"] = interactive[0]
@@ -113,7 +96,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["input-focus"] = interactive[0]
   tokens["input-disabled"] = neutral[3]
 
-  // === Text tokens ===
   tokens["text-base"] = neutral[10]
   tokens["text-weak"] = neutral[8]
   tokens["text-weaker"] = neutral[7]
@@ -146,13 +128,11 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["text-on-brand-weaker"] = neutralAlpha[7]
   tokens["text-on-brand-strong"] = neutralAlpha[11]
 
-  // === Button tokens ===
   tokens["button-secondary-base"] = isDark ? neutral[2] : neutral[0]
   tokens["button-secondary-hover"] = isDark ? neutral[3] : neutral[1]
   tokens["button-ghost-hover"] = neutralAlpha[1]
   tokens["button-ghost-hover2"] = neutralAlpha[2]
 
-  // === Border tokens ===
   tokens["border-base"] = neutralAlpha[6]
   tokens["border-hover"] = neutralAlpha[7]
   tokens["border-active"] = neutralAlpha[8]
@@ -178,7 +158,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["border-weaker-disabled"] = neutralAlpha[1]
   tokens["border-weaker-focus"] = neutralAlpha[5]
 
-  // Interactive borders
   tokens["border-interactive-base"] = interactive[6]
   tokens["border-interactive-hover"] = interactive[7]
   tokens["border-interactive-active"] = interactive[8]
@@ -186,7 +165,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["border-interactive-disabled"] = neutral[7]
   tokens["border-interactive-focus"] = interactive[8]
 
-  // Status borders
   tokens["border-success-base"] = success[5]
   tokens["border-success-hover"] = success[6]
   tokens["border-success-selected"] = success[8]
@@ -201,7 +179,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["border-info-selected"] = info[8]
   tokens["border-color"] = "#ffffff"
 
-  // === Icon tokens ===
   tokens["icon-base"] = neutral[8]
   tokens["icon-hover"] = neutral[isDark ? 9 : 10]
   tokens["icon-active"] = neutral[isDark ? 10 : 11]
@@ -240,13 +217,11 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["icon-on-brand-selected"] = neutralAlpha[11]
   tokens["icon-on-interactive-base"] = isDark ? neutral[11] : neutral[0]
 
-  // Agent icons (using semantic colors)
   tokens["icon-agent-plan-base"] = info[8]
   tokens["icon-agent-docs-base"] = warning[8]
   tokens["icon-agent-ask-base"] = interactive[8]
   tokens["icon-agent-build-base"] = interactive[isDark ? 10 : 8]
 
-  // Status icons
   tokens["icon-on-success-base"] = withAlpha(success[8], 0.9) as ColorValue
   tokens["icon-on-success-hover"] = withAlpha(success[9], 0.9) as ColorValue
   tokens["icon-on-success-selected"] = withAlpha(success[10], 0.9) as ColorValue
@@ -260,14 +235,12 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["icon-on-info-hover"] = withAlpha(info[9], 0.9) as ColorValue
   tokens["icon-on-info-selected"] = withAlpha(info[10], 0.9) as ColorValue
 
-  // Diff icons
   tokens["icon-diff-add-base"] = diffAdd[10]
   tokens["icon-diff-add-hover"] = diffAdd[isDark ? 9 : 11]
   tokens["icon-diff-add-active"] = diffAdd[isDark ? 10 : 11]
   tokens["icon-diff-delete-base"] = diffDelete[isDark ? 8 : 9]
   tokens["icon-diff-delete-hover"] = diffDelete[isDark ? 9 : 10]
 
-  // === Syntax tokens ===
   tokens["syntax-comment"] = "var(--text-weak)"
   tokens["syntax-regexp"] = "var(--text-base)"
   tokens["syntax-string"] = isDark ? "#00ceb9" : "#006656"
@@ -288,7 +261,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["syntax-diff-delete"] = diffDelete[10]
   tokens["syntax-diff-unknown"] = "#ff0000"
 
-  // === Markdown tokens ===
   tokens["markdown-heading"] = isDark ? "#9d7cd8" : "#d68c27"
   tokens["markdown-text"] = isDark ? "#eeeeee" : "#1a1a1a"
   tokens["markdown-link"] = isDark ? "#fab283" : "#3b7dd8"
@@ -304,7 +276,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["markdown-image-text"] = isDark ? "#56b6c2" : "#318795"
   tokens["markdown-code-block"] = isDark ? "#eeeeee" : "#1a1a1a"
 
-  // === Avatar tokens ===
   tokens["avatar-background-pink"] = isDark ? "#501b3f" : "#feeef8"
   tokens["avatar-background-mint"] = isDark ? "#033a34" : "#e1fbf4"
   tokens["avatar-background-orange"] = isDark ? "#5f2a06" : "#fff1e7"
@@ -318,7 +289,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["avatar-text-cyan"] = isDark ? "#369eff" : "#0894b3"
   tokens["avatar-text-lime"] = isDark ? "#c4f042" : "#5d770d"
 
-  // Apply any overrides
   for (const [key, value] of Object.entries(overrides)) {
     tokens[key] = value
   }
@@ -326,9 +296,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   return tokens
 }
 
-/**
- * Generate neutral alpha scale (approximated as solid colors)
- */
 function generateNeutralAlphaScale(neutralScale: HexColor[], isDark: boolean): HexColor[] {
   const alphas = isDark
     ? [0.02, 0.04, 0.08, 0.12, 0.16, 0.2, 0.26, 0.36, 0.44, 0.52, 0.72, 0.94]
@@ -336,7 +303,6 @@ function generateNeutralAlphaScale(neutralScale: HexColor[], isDark: boolean): H
 
   return neutralScale.map((hex, i) => {
     const baseOklch = hexToOklch(hex)
-    // Adjust lightness based on alpha - closer to background color
     const targetL = isDark ? 0.1 + alphas[i] * 0.8 : 1 - alphas[i] * 0.8
     return oklchToHex({
       ...baseOklch,
@@ -345,9 +311,6 @@ function generateNeutralAlphaScale(neutralScale: HexColor[], isDark: boolean): H
   })
 }
 
-/**
- * Resolve a complete theme to CSS for both light and dark modes
- */
 export function resolveTheme(theme: DesktopTheme): { light: ResolvedTheme; dark: ResolvedTheme } {
   return {
     light: resolveThemeVariant(theme.light, false),
@@ -355,9 +318,6 @@ export function resolveTheme(theme: DesktopTheme): { light: ResolvedTheme; dark:
   }
 }
 
-/**
- * Convert resolved theme tokens to CSS custom properties string
- */
 export function themeToCss(tokens: ResolvedTheme): string {
   return Object.entries(tokens)
     .map(([key, value]) => `--${key}: ${value};`)
diff --git a/packages/ui/src/theme/types.ts b/packages/ui/src/theme/types.ts
index 7a584ef0e5b..73bd372b45b 100644
--- a/packages/ui/src/theme/types.ts
+++ b/packages/ui/src/theme/types.ts
@@ -1,68 +1,36 @@
-/**
- * Desktop Theme System
- *
- * Unlike the TUI themes, desktop themes require more design tokens and use
- * OKLCH color space for generating color scales from seed colors.
- */
-
-/** A hex color string like "#ffffff" or "#fff" */
 export type HexColor = `#${string}`
 
-/** OKLCH color representation for calculations */
 export interface OklchColor {
   l: number // Lightness 0-1
   c: number // Chroma 0-0.4+
   h: number // Hue 0-360
 }
 
-/** The minimum colors needed to define a theme variant */
 export interface ThemeSeedColors {
-  /** Base neutral color - used to generate gray scale (smoke/ink) */
   neutral: HexColor
-  /** Primary brand/accent color */
   primary: HexColor
-  /** Success color (green) */
   success: HexColor
-  /** Warning color (yellow/orange) */
   warning: HexColor
-  /** Error/critical color (red) */
   error: HexColor
-  /** Info color (purple/blue) */
   info: HexColor
-  /** Interactive/link color (blue) */
   interactive: HexColor
-  /** Diff add color */
   diffAdd: HexColor
-  /** Diff delete color */
   diffDelete: HexColor
 }
 
-/** A theme variant (light or dark) with seed colors and optional overrides */
 export interface ThemeVariant {
-  /** Seed colors used to generate the full palette */
   seeds: ThemeSeedColors
-  /** Optional direct overrides for any CSS variable (without -- prefix) */
   overrides?: Record<string, ColorValue>
 }
 
-/** A complete desktop theme definition */
 export interface DesktopTheme {
-  /** Schema version for future compatibility */
   $schema?: string
-  /** Theme display name */
   name: string
-  /** Theme identifier (slug) */
   id: string
-  /** Light mode variant */
   light: ThemeVariant
-  /** Dark mode variant */
   dark: ThemeVariant
 }
 
-/**
- * Categories of CSS variables that get generated from seed colors.
- * Each category maps to specific CSS custom properties.
- */
 export type TokenCategory =
   | "background"
   | "surface"
@@ -76,19 +44,10 @@ export type TokenCategory =
   | "diff"
   | "avatar"
 
-/**
- * All CSS variable names (without -- prefix) that the theme system generates.
- * These match the variables defined in theme.css
- */
 export type ThemeToken = string
 
-/** A CSS variable reference like "var(--text-weak)" */
 export type CssVarRef = `var(--${string})`
 
-/** A color value - either a hex color or a CSS variable reference */
 export type ColorValue = HexColor | CssVarRef
 
-/**
- * Resolved theme - all tokens mapped to their final colors
- */
 export type ResolvedTheme = Record<ThemeToken, ColorValue>

From ddf4897eaa7580bbc473923f4d3026a628e58a65 Mon Sep 17 00:00:00 2001
From: opencode <opencode@sst.dev>
Date: Sun, 28 Dec 2025 18:37:58 +0000
Subject: [PATCH 31/60] release: v1.0.205

---
 bun.lock                               | 30 +++++++++++++-------------
 packages/app/package.json              |  2 +-
 packages/console/app/package.json      |  2 +-
 packages/console/core/package.json     |  2 +-
 packages/console/function/package.json |  2 +-
 packages/console/mail/package.json     |  2 +-
 packages/desktop/package.json          |  2 +-
 packages/enterprise/package.json       |  2 +-
 packages/extensions/zed/extension.toml | 12 +++++------
 packages/function/package.json         |  2 +-
 packages/opencode/package.json         |  2 +-
 packages/plugin/package.json           |  4 ++--
 packages/sdk/js/package.json           |  4 ++--
 packages/slack/package.json            |  2 +-
 packages/ui/package.json               |  2 +-
 packages/util/package.json             |  2 +-
 packages/web/package.json              |  2 +-
 sdks/vscode/package.json               |  2 +-
 18 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/bun.lock b/bun.lock
index c2827775623..3fce72b7250 100644
--- a/bun.lock
+++ b/bun.lock
@@ -22,7 +22,7 @@
     },
     "packages/app": {
       "name": "@opencode-ai/app",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -70,7 +70,7 @@
     },
     "packages/console/app": {
       "name": "@opencode-ai/console-app",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@cloudflare/vite-plugin": "1.15.2",
         "@ibm/plex": "6.4.1",
@@ -98,7 +98,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -125,7 +125,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@ai-sdk/anthropic": "2.0.0",
         "@ai-sdk/openai": "2.0.2",
@@ -149,7 +149,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -173,7 +173,7 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@opencode-ai/app": "workspace:*",
         "@solid-primitives/storage": "catalog:",
@@ -200,7 +200,7 @@
     },
     "packages/enterprise": {
       "name": "@opencode-ai/enterprise",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@opencode-ai/ui": "workspace:*",
         "@opencode-ai/util": "workspace:*",
@@ -229,7 +229,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "catalog:",
@@ -245,7 +245,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -347,7 +347,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -367,7 +367,7 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "devDependencies": {
         "@hey-api/openapi-ts": "0.88.1",
         "@tsconfig/node22": "catalog:",
@@ -378,7 +378,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -391,7 +391,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -426,7 +426,7 @@
     },
     "packages/util": {
       "name": "@opencode-ai/util",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "zod": "catalog:",
       },
@@ -437,7 +437,7 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "1.0.204",
+      "version": "1.0.205",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",
diff --git a/packages/app/package.json b/packages/app/package.json
index 7937753aea1..c5dd21b4d84 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "description": "",
   "type": "module",
   "exports": {
diff --git a/packages/console/app/package.json b/packages/console/app/package.json
index 4474366b880..96442b6e482 100644
--- a/packages/console/app/package.json
+++ b/packages/console/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-app",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",
diff --git a/packages/console/core/package.json b/packages/console/core/package.json
index f74d28b2e32..f7aec94198c 100644
--- a/packages/console/core/package.json
+++ b/packages/console/core/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/console-core",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "private": true,
   "type": "module",
   "dependencies": {
diff --git a/packages/console/function/package.json b/packages/console/function/package.json
index 57b004fb709..da9dd21132e 100644
--- a/packages/console/function/package.json
+++ b/packages/console/function/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-function",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",
diff --git a/packages/console/mail/package.json b/packages/console/mail/package.json
index f2c7c7302f9..660cc3d5a67 100644
--- a/packages/console/mail/package.json
+++ b/packages/console/mail/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-mail",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "dependencies": {
     "@jsx-email/all": "2.2.3",
     "@jsx-email/cli": "1.4.3",
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index 23aa11091fb..7a6963487a5 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opencode-ai/desktop",
   "private": true,
-  "version": "1.0.204",
+  "version": "1.0.205",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo -b",
diff --git a/packages/enterprise/package.json b/packages/enterprise/package.json
index e4a7f45beae..397ec9858bf 100644
--- a/packages/enterprise/package.json
+++ b/packages/enterprise/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/enterprise",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/packages/extensions/zed/extension.toml b/packages/extensions/zed/extension.toml
index 3e01e835339..cacd8f683e2 100644
--- a/packages/extensions/zed/extension.toml
+++ b/packages/extensions/zed/extension.toml
@@ -1,7 +1,7 @@
 id = "opencode"
 name = "OpenCode"
 description = "The open source coding agent."
-version = "1.0.204"
+version = "1.0.205"
 schema_version = 1
 authors = ["Anomaly"]
 repository = "https://github.com/sst/opencode"
@@ -11,26 +11,26 @@ name = "OpenCode"
 icon = "./icons/opencode.svg"
 
 [agent_servers.opencode.targets.darwin-aarch64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.204/opencode-darwin-arm64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.205/opencode-darwin-arm64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.darwin-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.204/opencode-darwin-x64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.205/opencode-darwin-x64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-aarch64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.204/opencode-linux-arm64.tar.gz"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.205/opencode-linux-arm64.tar.gz"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.204/opencode-linux-x64.tar.gz"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.205/opencode-linux-x64.tar.gz"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.windows-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.204/opencode-windows-x64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.205/opencode-windows-x64.zip"
 cmd = "./opencode.exe"
 args = ["acp"]
diff --git a/packages/function/package.json b/packages/function/package.json
index 44c6ef110ef..48a9e4b7cae 100644
--- a/packages/function/package.json
+++ b/packages/function/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/function",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",
diff --git a/packages/opencode/package.json b/packages/opencode/package.json
index 67c8443cbb7..92fd6d84762 100644
--- a/packages/opencode/package.json
+++ b/packages/opencode/package.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "name": "opencode",
   "type": "module",
   "private": true,
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index 63174acec23..f152b3ea7b5 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/plugin",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",
@@ -24,4 +24,4 @@
     "typescript": "catalog:",
     "@typescript/native-preview": "catalog:"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/sdk/js/package.json b/packages/sdk/js/package.json
index 7933647718b..ebf54bc86c7 100644
--- a/packages/sdk/js/package.json
+++ b/packages/sdk/js/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/sdk",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",
@@ -29,4 +29,4 @@
   "publishConfig": {
     "directory": "dist"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/slack/package.json b/packages/slack/package.json
index 98cb0d7e7d6..3501c47cbdf 100644
--- a/packages/slack/package.json
+++ b/packages/slack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/slack",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "type": "module",
   "scripts": {
     "dev": "bun run src/index.ts",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 0aa059cd974..4db84127890 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "type": "module",
   "exports": {
     "./*": "./src/components/*.tsx",
diff --git a/packages/util/package.json b/packages/util/package.json
index f558fdc01c0..6886bf1ba3d 100644
--- a/packages/util/package.json
+++ b/packages/util/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/util",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "private": true,
   "type": "module",
   "exports": {
diff --git a/packages/web/package.json b/packages/web/package.json
index 866eaab394a..73672590ff1 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opencode-ai/web",
   "type": "module",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "scripts": {
     "dev": "astro dev",
     "dev:remote": "VITE_API_URL=https://api.opencode.ai astro dev",
diff --git a/sdks/vscode/package.json b/sdks/vscode/package.json
index 5d15e76c2eb..f09426d76d3 100644
--- a/sdks/vscode/package.json
+++ b/sdks/vscode/package.json
@@ -2,7 +2,7 @@
   "name": "opencode",
   "displayName": "opencode",
   "description": "opencode for VS Code",
-  "version": "1.0.204",
+  "version": "1.0.205",
   "publisher": "sst-dev",
   "repository": {
     "type": "git",

From 81c5e7b9ed218e342aba154cdd5ed436c7775966 Mon Sep 17 00:00:00 2001
From: Frank <frank@sst.dev>
Date: Sun, 28 Dec 2025 13:54:09 -0500
Subject: [PATCH 32/60] wip: benchmark

---
 .../console/app/src/routes/bench/index.tsx    |   52 +
 .../app/src/routes/bench/submission.ts        |   29 +
 .../core/migrations/0039_striped_forge.sql    |   12 +
 .../core/migrations/meta/0039_snapshot.json   | 1113 +++++++++++++++++
 .../core/migrations/meta/_journal.json        |    9 +-
 packages/console/core/src/identifier.ts       |    1 +
 .../console/core/src/schema/benchmark.sql.ts  |   14 +
 7 files changed, 1229 insertions(+), 1 deletion(-)
 create mode 100644 packages/console/app/src/routes/bench/index.tsx
 create mode 100644 packages/console/app/src/routes/bench/submission.ts
 create mode 100644 packages/console/core/migrations/0039_striped_forge.sql
 create mode 100644 packages/console/core/migrations/meta/0039_snapshot.json
 create mode 100644 packages/console/core/src/schema/benchmark.sql.ts

diff --git a/packages/console/app/src/routes/bench/index.tsx b/packages/console/app/src/routes/bench/index.tsx
new file mode 100644
index 00000000000..adf31fbc679
--- /dev/null
+++ b/packages/console/app/src/routes/bench/index.tsx
@@ -0,0 +1,52 @@
+import { Title } from "@solidjs/meta"
+import { createAsync, query } from "@solidjs/router"
+import { For } from "solid-js"
+import { Database, desc } from "@opencode-ai/console-core/drizzle/index.js"
+import { BenchmarkTable } from "@opencode-ai/console-core/schema/benchmark.sql.js"
+
+async function getBenchmarks() {
+  "use server"
+  const rows = await Database.use((tx) =>
+    tx.select().from(BenchmarkTable).orderBy(desc(BenchmarkTable.timeCreated)).limit(100),
+  )
+  return rows.map((row) => {
+    const parsed = JSON.parse(row.result) as { averageScore: number }
+    return {
+      agent: row.agent,
+      model: row.model,
+      averageScore: parsed.averageScore,
+    }
+  })
+}
+
+const queryBenchmarks = query(getBenchmarks, "benchmarks.list")
+
+export default function Bench() {
+  const benchmarks = createAsync(() => queryBenchmarks())
+
+  return (
+    <main data-page="bench">
+      <Title>Benchmark</Title>
+      <table>
+        <thead>
+          <tr>
+            <th>Agent</th>
+            <th>Model</th>
+            <th>Average Score</th>
+          </tr>
+        </thead>
+        <tbody>
+          <For each={benchmarks()}>
+            {(row) => (
+              <tr>
+                <td>{row.agent}</td>
+                <td>{row.model}</td>
+                <td>{row.averageScore}</td>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+    </main>
+  )
+}
diff --git a/packages/console/app/src/routes/bench/submission.ts b/packages/console/app/src/routes/bench/submission.ts
new file mode 100644
index 00000000000..94639439b11
--- /dev/null
+++ b/packages/console/app/src/routes/bench/submission.ts
@@ -0,0 +1,29 @@
+import type { APIEvent } from "@solidjs/start/server"
+import { Database } from "@opencode-ai/console-core/drizzle/index.js"
+import { BenchmarkTable } from "@opencode-ai/console-core/schema/benchmark.sql.js"
+import { Identifier } from "@opencode-ai/console-core/identifier.js"
+
+interface SubmissionBody {
+  model: string
+  agent: string
+  result: string
+}
+
+export async function POST(event: APIEvent) {
+  const body = (await event.request.json()) as SubmissionBody
+
+  if (!body.model || !body.agent || !body.result) {
+    return Response.json({ error: "All fields are required" }, { status: 400 })
+  }
+
+  await Database.use((tx) =>
+    tx.insert(BenchmarkTable).values({
+      id: Identifier.create("benchmark"),
+      model: body.model,
+      agent: body.agent,
+      result: body.result,
+    }),
+  )
+
+  return Response.json({ success: true }, { status: 200 })
+}
diff --git a/packages/console/core/migrations/0039_striped_forge.sql b/packages/console/core/migrations/0039_striped_forge.sql
new file mode 100644
index 00000000000..ad823197fb1
--- /dev/null
+++ b/packages/console/core/migrations/0039_striped_forge.sql
@@ -0,0 +1,12 @@
+CREATE TABLE `benchmark` (
+	`id` varchar(30) NOT NULL,
+	`time_created` timestamp(3) NOT NULL DEFAULT (now()),
+	`time_updated` timestamp(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3),
+	`time_deleted` timestamp(3),
+	`model` varchar(64) NOT NULL,
+	`agent` varchar(64) NOT NULL,
+	`result` mediumtext NOT NULL,
+	CONSTRAINT `benchmark_id_pk` PRIMARY KEY(`id`)
+);
+--> statement-breakpoint
+CREATE INDEX `time_created` ON `benchmark` (`time_created`);
\ No newline at end of file
diff --git a/packages/console/core/migrations/meta/0039_snapshot.json b/packages/console/core/migrations/meta/0039_snapshot.json
new file mode 100644
index 00000000000..9ca8759b546
--- /dev/null
+++ b/packages/console/core/migrations/meta/0039_snapshot.json
@@ -0,0 +1,1113 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "49a1ac05-78ab-4aae-908e-d4aeeb8196fc",
+  "prevId": "9d5d9885-7ec5-45f6-ac53-45a8e25dede7",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "account_id_pk": {
+          "name": "account_id_pk",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "auth": {
+      "name": "auth",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "enum('email','github','google')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "subject": {
+          "name": "subject",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "provider": {
+          "name": "provider",
+          "columns": [
+            "provider",
+            "subject"
+          ],
+          "isUnique": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "columns": [
+            "account_id"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "auth_id_pk": {
+          "name": "auth_id_pk",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "benchmark": {
+      "name": "benchmark",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "agent": {
+          "name": "agent",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "result": {
+          "name": "result",
+          "type": "mediumtext",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "time_created": {
+          "name": "time_created",
+          "columns": [
+            "time_created"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "benchmark_id_pk": {
+          "name": "benchmark_id_pk",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "billing": {
+      "name": "billing",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_id": {
+          "name": "payment_method_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_type": {
+          "name": "payment_method_type",
+          "type": "varchar(32)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_method_last4": {
+          "name": "payment_method_last4",
+          "type": "varchar(4)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "balance": {
+          "name": "balance",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload": {
+          "name": "reload",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_trigger": {
+          "name": "reload_trigger",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_amount": {
+          "name": "reload_amount",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "reload_error": {
+          "name": "reload_error",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_error": {
+          "name": "time_reload_error",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_reload_locked_till": {
+          "name": "time_reload_locked_till",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_customer_id": {
+          "name": "global_customer_id",
+          "columns": [
+            "customer_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "billing_workspace_id_id_pk": {
+          "name": "billing_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "payment": {
+      "name": "payment",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "invoice_id": {
+          "name": "invoice_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "payment_id": {
+          "name": "payment_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "amount": {
+          "name": "amount",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_refunded": {
+          "name": "time_refunded",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "payment_workspace_id_id_pk": {
+          "name": "payment_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "usage": {
+      "name": "usage",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "input_tokens": {
+          "name": "input_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "output_tokens": {
+          "name": "output_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reasoning_tokens": {
+          "name": "reasoning_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_read_tokens": {
+          "name": "cache_read_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_5m_tokens": {
+          "name": "cache_write_5m_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cache_write_1h_tokens": {
+          "name": "cache_write_1h_tokens",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "cost": {
+          "name": "cost",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key_id": {
+          "name": "key_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "usage_workspace_id_id_pk": {
+          "name": "usage_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "ip": {
+      "name": "ip",
+      "columns": {
+        "ip": {
+          "name": "ip",
+          "type": "varchar(45)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "usage": {
+          "name": "usage",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "ip_ip_pk": {
+          "name": "ip_ip_pk",
+          "columns": [
+            "ip"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "key": {
+      "name": "key",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_used": {
+          "name": "time_used",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "global_key": {
+          "name": "global_key",
+          "columns": [
+            "key"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "key_workspace_id_id_pk": {
+          "name": "key_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "model": {
+      "name": "model",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "model_workspace_model": {
+          "name": "model_workspace_model",
+          "columns": [
+            "workspace_id",
+            "model"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "model_workspace_id_id_pk": {
+          "name": "model_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "provider": {
+      "name": "provider",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "credentials": {
+          "name": "credentials",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "workspace_provider": {
+          "name": "workspace_provider",
+          "columns": [
+            "workspace_id",
+            "provider"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "provider_workspace_id_id_pk": {
+          "name": "provider_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "workspace_id": {
+          "name": "workspace_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_seen": {
+          "name": "time_seen",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "enum('admin','member')",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "monthly_limit": {
+          "name": "monthly_limit",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "monthly_usage": {
+          "name": "monthly_usage",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time_monthly_usage_updated": {
+          "name": "time_monthly_usage_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_account_id": {
+          "name": "user_account_id",
+          "columns": [
+            "workspace_id",
+            "account_id"
+          ],
+          "isUnique": true
+        },
+        "user_email": {
+          "name": "user_email",
+          "columns": [
+            "workspace_id",
+            "email"
+          ],
+          "isUnique": true
+        },
+        "global_account_id": {
+          "name": "global_account_id",
+          "columns": [
+            "account_id"
+          ],
+          "isUnique": false
+        },
+        "global_email": {
+          "name": "global_email",
+          "columns": [
+            "email"
+          ],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "user_workspace_id_id_pk": {
+          "name": "user_workspace_id_id_pk",
+          "columns": [
+            "workspace_id",
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "workspace": {
+      "name": "workspace",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(30)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "time_created": {
+          "name": "time_created",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "time_updated": {
+          "name": "time_updated",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3)"
+        },
+        "time_deleted": {
+          "name": "time_deleted",
+          "type": "timestamp(3)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "slug": {
+          "name": "slug",
+          "columns": [
+            "slug"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "workspace_id": {
+          "name": "workspace_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}
\ No newline at end of file
diff --git a/packages/console/core/migrations/meta/_journal.json b/packages/console/core/migrations/meta/_journal.json
index 8a1a38551fb..922002ed37b 100644
--- a/packages/console/core/migrations/meta/_journal.json
+++ b/packages/console/core/migrations/meta/_journal.json
@@ -274,6 +274,13 @@
       "when": 1764110043942,
       "tag": "0038_famous_magik",
       "breakpoints": true
+    },
+    {
+      "idx": 39,
+      "version": "5",
+      "when": 1766946179892,
+      "tag": "0039_striped_forge",
+      "breakpoints": true
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/packages/console/core/src/identifier.ts b/packages/console/core/src/identifier.ts
index 8fdf79cde28..f94765ec702 100644
--- a/packages/console/core/src/identifier.ts
+++ b/packages/console/core/src/identifier.ts
@@ -5,6 +5,7 @@ export namespace Identifier {
   const prefixes = {
     account: "acc",
     auth: "aut",
+    benchmark: "ben",
     billing: "bil",
     key: "key",
     model: "mod",
diff --git a/packages/console/core/src/schema/benchmark.sql.ts b/packages/console/core/src/schema/benchmark.sql.ts
new file mode 100644
index 00000000000..8d435eddfd8
--- /dev/null
+++ b/packages/console/core/src/schema/benchmark.sql.ts
@@ -0,0 +1,14 @@
+import { index, mediumtext, mysqlTable, primaryKey, varchar } from "drizzle-orm/mysql-core"
+import { id, timestamps } from "../drizzle/types"
+
+export const BenchmarkTable = mysqlTable(
+  "benchmark",
+  {
+    id: id(),
+    ...timestamps,
+    model: varchar("model", { length: 64 }).notNull(),
+    agent: varchar("agent", { length: 64 }).notNull(),
+    result: mediumtext("result").notNull(),
+  },
+  (table) => [primaryKey({ columns: [table.id] }), index("time_created").on(table.timeCreated)],
+)

From 0cbbb20d22fb34ed773951a0cf1eaa9cd556aa98 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Sun, 28 Dec 2025 18:54:55 +0000
Subject: [PATCH 33/60] chore: generate

---
 .../core/migrations/meta/0039_snapshot.json   | 110 ++++--------------
 .../core/migrations/meta/_journal.json        |   2 +-
 packages/plugin/package.json                  |   2 +-
 packages/sdk/js/package.json                  |   2 +-
 4 files changed, 28 insertions(+), 88 deletions(-)

diff --git a/packages/console/core/migrations/meta/0039_snapshot.json b/packages/console/core/migrations/meta/0039_snapshot.json
index 9ca8759b546..ba34f1ac490 100644
--- a/packages/console/core/migrations/meta/0039_snapshot.json
+++ b/packages/console/core/migrations/meta/0039_snapshot.json
@@ -43,9 +43,7 @@
       "compositePrimaryKeys": {
         "account_id_pk": {
           "name": "account_id_pk",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -109,17 +107,12 @@
       "indexes": {
         "provider": {
           "name": "provider",
-          "columns": [
-            "provider",
-            "subject"
-          ],
+          "columns": ["provider", "subject"],
           "isUnique": true
         },
         "account_id": {
           "name": "account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         }
       },
@@ -127,9 +120,7 @@
       "compositePrimaryKeys": {
         "auth_id_pk": {
           "name": "auth_id_pk",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -193,9 +184,7 @@
       "indexes": {
         "time_created": {
           "name": "time_created",
-          "columns": [
-            "time_created"
-          ],
+          "columns": ["time_created"],
           "isUnique": false
         }
       },
@@ -203,9 +192,7 @@
       "compositePrimaryKeys": {
         "benchmark_id_pk": {
           "name": "benchmark_id_pk",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -353,9 +340,7 @@
       "indexes": {
         "global_customer_id": {
           "name": "global_customer_id",
-          "columns": [
-            "customer_id"
-          ],
+          "columns": ["customer_id"],
           "isUnique": true
         }
       },
@@ -363,10 +348,7 @@
       "compositePrimaryKeys": {
         "billing_workspace_id_id_pk": {
           "name": "billing_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -453,10 +435,7 @@
       "compositePrimaryKeys": {
         "payment_workspace_id_id_pk": {
           "name": "payment_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -578,10 +557,7 @@
       "compositePrimaryKeys": {
         "usage_workspace_id_id_pk": {
           "name": "usage_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -633,9 +609,7 @@
       "compositePrimaryKeys": {
         "ip_ip_pk": {
           "name": "ip_ip_pk",
-          "columns": [
-            "ip"
-          ]
+          "columns": ["ip"]
         }
       },
       "uniqueConstraints": {},
@@ -713,9 +687,7 @@
       "indexes": {
         "global_key": {
           "name": "global_key",
-          "columns": [
-            "key"
-          ],
+          "columns": ["key"],
           "isUnique": true
         }
       },
@@ -723,10 +695,7 @@
       "compositePrimaryKeys": {
         "key_workspace_id_id_pk": {
           "name": "key_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -783,10 +752,7 @@
       "indexes": {
         "model_workspace_model": {
           "name": "model_workspace_model",
-          "columns": [
-            "workspace_id",
-            "model"
-          ],
+          "columns": ["workspace_id", "model"],
           "isUnique": true
         }
       },
@@ -794,10 +760,7 @@
       "compositePrimaryKeys": {
         "model_workspace_id_id_pk": {
           "name": "model_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -861,10 +824,7 @@
       "indexes": {
         "workspace_provider": {
           "name": "workspace_provider",
-          "columns": [
-            "workspace_id",
-            "provider"
-          ],
+          "columns": ["workspace_id", "provider"],
           "isUnique": true
         }
       },
@@ -872,10 +832,7 @@
       "compositePrimaryKeys": {
         "provider_workspace_id_id_pk": {
           "name": "provider_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -988,32 +945,22 @@
       "indexes": {
         "user_account_id": {
           "name": "user_account_id",
-          "columns": [
-            "workspace_id",
-            "account_id"
-          ],
+          "columns": ["workspace_id", "account_id"],
           "isUnique": true
         },
         "user_email": {
           "name": "user_email",
-          "columns": [
-            "workspace_id",
-            "email"
-          ],
+          "columns": ["workspace_id", "email"],
           "isUnique": true
         },
         "global_account_id": {
           "name": "global_account_id",
-          "columns": [
-            "account_id"
-          ],
+          "columns": ["account_id"],
           "isUnique": false
         },
         "global_email": {
           "name": "global_email",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
           "isUnique": false
         }
       },
@@ -1021,10 +968,7 @@
       "compositePrimaryKeys": {
         "user_workspace_id_id_pk": {
           "name": "user_workspace_id_id_pk",
-          "columns": [
-            "workspace_id",
-            "id"
-          ]
+          "columns": ["workspace_id", "id"]
         }
       },
       "uniqueConstraints": {},
@@ -1081,9 +1025,7 @@
       "indexes": {
         "slug": {
           "name": "slug",
-          "columns": [
-            "slug"
-          ],
+          "columns": ["slug"],
           "isUnique": true
         }
       },
@@ -1091,9 +1033,7 @@
       "compositePrimaryKeys": {
         "workspace_id": {
           "name": "workspace_id",
-          "columns": [
-            "id"
-          ]
+          "columns": ["id"]
         }
       },
       "uniqueConstraints": {},
@@ -1110,4 +1050,4 @@
     "tables": {},
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/packages/console/core/migrations/meta/_journal.json b/packages/console/core/migrations/meta/_journal.json
index 922002ed37b..e96bf52ed09 100644
--- a/packages/console/core/migrations/meta/_journal.json
+++ b/packages/console/core/migrations/meta/_journal.json
@@ -283,4 +283,4 @@
       "breakpoints": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index f152b3ea7b5..c38c88a5f79 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -24,4 +24,4 @@
     "typescript": "catalog:",
     "@typescript/native-preview": "catalog:"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/sdk/js/package.json b/packages/sdk/js/package.json
index ebf54bc86c7..72292e59187 100644
--- a/packages/sdk/js/package.json
+++ b/packages/sdk/js/package.json
@@ -29,4 +29,4 @@
   "publishConfig": {
     "directory": "dist"
   }
-}
\ No newline at end of file
+}

From 2abaa46e23352b133f327dba5bca6a1415712028 Mon Sep 17 00:00:00 2001
From: opencode <opencode@sst.dev>
Date: Sun, 28 Dec 2025 19:05:54 +0000
Subject: [PATCH 34/60] release: v1.0.206

---
 bun.lock                               | 30 +++++++++++++-------------
 packages/app/package.json              |  2 +-
 packages/console/app/package.json      |  2 +-
 packages/console/core/package.json     |  2 +-
 packages/console/function/package.json |  2 +-
 packages/console/mail/package.json     |  2 +-
 packages/desktop/package.json          |  2 +-
 packages/enterprise/package.json       |  2 +-
 packages/extensions/zed/extension.toml | 12 +++++------
 packages/function/package.json         |  2 +-
 packages/opencode/package.json         |  2 +-
 packages/plugin/package.json           |  4 ++--
 packages/sdk/js/package.json           |  4 ++--
 packages/slack/package.json            |  2 +-
 packages/ui/package.json               |  2 +-
 packages/util/package.json             |  2 +-
 packages/web/package.json              |  2 +-
 sdks/vscode/package.json               |  2 +-
 18 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/bun.lock b/bun.lock
index 3fce72b7250..fa5d84e4ea3 100644
--- a/bun.lock
+++ b/bun.lock
@@ -22,7 +22,7 @@
     },
     "packages/app": {
       "name": "@opencode-ai/app",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -70,7 +70,7 @@
     },
     "packages/console/app": {
       "name": "@opencode-ai/console-app",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@cloudflare/vite-plugin": "1.15.2",
         "@ibm/plex": "6.4.1",
@@ -98,7 +98,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -125,7 +125,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@ai-sdk/anthropic": "2.0.0",
         "@ai-sdk/openai": "2.0.2",
@@ -149,7 +149,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -173,7 +173,7 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@opencode-ai/app": "workspace:*",
         "@solid-primitives/storage": "catalog:",
@@ -200,7 +200,7 @@
     },
     "packages/enterprise": {
       "name": "@opencode-ai/enterprise",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@opencode-ai/ui": "workspace:*",
         "@opencode-ai/util": "workspace:*",
@@ -229,7 +229,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "catalog:",
@@ -245,7 +245,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -347,7 +347,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -367,7 +367,7 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "devDependencies": {
         "@hey-api/openapi-ts": "0.88.1",
         "@tsconfig/node22": "catalog:",
@@ -378,7 +378,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -391,7 +391,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -426,7 +426,7 @@
     },
     "packages/util": {
       "name": "@opencode-ai/util",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "zod": "catalog:",
       },
@@ -437,7 +437,7 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "1.0.205",
+      "version": "1.0.206",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",
diff --git a/packages/app/package.json b/packages/app/package.json
index c5dd21b4d84..84e70e63aa6 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "description": "",
   "type": "module",
   "exports": {
diff --git a/packages/console/app/package.json b/packages/console/app/package.json
index 96442b6e482..50d1edc6cde 100644
--- a/packages/console/app/package.json
+++ b/packages/console/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-app",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",
diff --git a/packages/console/core/package.json b/packages/console/core/package.json
index f7aec94198c..b57f1b10093 100644
--- a/packages/console/core/package.json
+++ b/packages/console/core/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/console-core",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "private": true,
   "type": "module",
   "dependencies": {
diff --git a/packages/console/function/package.json b/packages/console/function/package.json
index da9dd21132e..319cf487e1c 100644
--- a/packages/console/function/package.json
+++ b/packages/console/function/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-function",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",
diff --git a/packages/console/mail/package.json b/packages/console/mail/package.json
index 660cc3d5a67..f1550f782d8 100644
--- a/packages/console/mail/package.json
+++ b/packages/console/mail/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-mail",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "dependencies": {
     "@jsx-email/all": "2.2.3",
     "@jsx-email/cli": "1.4.3",
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index 7a6963487a5..3e0fc7410df 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opencode-ai/desktop",
   "private": true,
-  "version": "1.0.205",
+  "version": "1.0.206",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo -b",
diff --git a/packages/enterprise/package.json b/packages/enterprise/package.json
index 397ec9858bf..c4cd2d64919 100644
--- a/packages/enterprise/package.json
+++ b/packages/enterprise/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/enterprise",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/packages/extensions/zed/extension.toml b/packages/extensions/zed/extension.toml
index cacd8f683e2..a9b30fa5b19 100644
--- a/packages/extensions/zed/extension.toml
+++ b/packages/extensions/zed/extension.toml
@@ -1,7 +1,7 @@
 id = "opencode"
 name = "OpenCode"
 description = "The open source coding agent."
-version = "1.0.205"
+version = "1.0.206"
 schema_version = 1
 authors = ["Anomaly"]
 repository = "https://github.com/sst/opencode"
@@ -11,26 +11,26 @@ name = "OpenCode"
 icon = "./icons/opencode.svg"
 
 [agent_servers.opencode.targets.darwin-aarch64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.205/opencode-darwin-arm64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.206/opencode-darwin-arm64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.darwin-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.205/opencode-darwin-x64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.206/opencode-darwin-x64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-aarch64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.205/opencode-linux-arm64.tar.gz"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.206/opencode-linux-arm64.tar.gz"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.205/opencode-linux-x64.tar.gz"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.206/opencode-linux-x64.tar.gz"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.windows-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.205/opencode-windows-x64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.206/opencode-windows-x64.zip"
 cmd = "./opencode.exe"
 args = ["acp"]
diff --git a/packages/function/package.json b/packages/function/package.json
index 48a9e4b7cae..c5d63e60a3b 100644
--- a/packages/function/package.json
+++ b/packages/function/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/function",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",
diff --git a/packages/opencode/package.json b/packages/opencode/package.json
index 92fd6d84762..68dfb3c0a11 100644
--- a/packages/opencode/package.json
+++ b/packages/opencode/package.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "name": "opencode",
   "type": "module",
   "private": true,
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index c38c88a5f79..fa361dd745e 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/plugin",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",
@@ -24,4 +24,4 @@
     "typescript": "catalog:",
     "@typescript/native-preview": "catalog:"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/sdk/js/package.json b/packages/sdk/js/package.json
index 72292e59187..71f930a409f 100644
--- a/packages/sdk/js/package.json
+++ b/packages/sdk/js/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/sdk",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",
@@ -29,4 +29,4 @@
   "publishConfig": {
     "directory": "dist"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/slack/package.json b/packages/slack/package.json
index 3501c47cbdf..c8bebcf8bfc 100644
--- a/packages/slack/package.json
+++ b/packages/slack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/slack",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "type": "module",
   "scripts": {
     "dev": "bun run src/index.ts",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4db84127890..2dd9b7817dc 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "type": "module",
   "exports": {
     "./*": "./src/components/*.tsx",
diff --git a/packages/util/package.json b/packages/util/package.json
index 6886bf1ba3d..13883dbc6ad 100644
--- a/packages/util/package.json
+++ b/packages/util/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/util",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "private": true,
   "type": "module",
   "exports": {
diff --git a/packages/web/package.json b/packages/web/package.json
index 73672590ff1..ff4d6ac72ce 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opencode-ai/web",
   "type": "module",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "scripts": {
     "dev": "astro dev",
     "dev:remote": "VITE_API_URL=https://api.opencode.ai astro dev",
diff --git a/sdks/vscode/package.json b/sdks/vscode/package.json
index f09426d76d3..0060a2ee212 100644
--- a/sdks/vscode/package.json
+++ b/sdks/vscode/package.json
@@ -2,7 +2,7 @@
   "name": "opencode",
   "displayName": "opencode",
   "description": "opencode for VS Code",
-  "version": "1.0.205",
+  "version": "1.0.206",
   "publisher": "sst-dev",
   "repository": {
     "type": "git",

From ffd20b4477a3d753739017a982a5a4f2eb777188 Mon Sep 17 00:00:00 2001
From: Didier Durand <2927957+didier-durand@users.noreply.github.com>
Date: Sun, 28 Dec 2025 20:05:35 +0100
Subject: [PATCH 35/60] chore: activate code coverage in bun test config
 (#6297)

---
 packages/opencode/bunfig.toml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/opencode/bunfig.toml b/packages/opencode/bunfig.toml
index d7b987cbb94..9afe227b326 100644
--- a/packages/opencode/bunfig.toml
+++ b/packages/opencode/bunfig.toml
@@ -2,3 +2,5 @@ preload = ["@opentui/solid/preload"]
 
 [test]
 preload = ["./test/preload.ts"]
+# Enable code coverage
+coverage = true

From 29d8557d411e2fae3365a38dec536b7d68c1a916 Mon Sep 17 00:00:00 2001
From: Didier Durand <2927957+didier-durand@users.noreply.github.com>
Date: Sun, 28 Dec 2025 20:06:25 +0100
Subject: [PATCH 36/60] doc: fix typos in various files (#6294)

---
 packages/opencode/src/config/config.ts         | 2 +-
 packages/opencode/src/session/prompt/beast.txt | 2 +-
 packages/opencode/src/session/prompt/codex.txt | 4 ++--
 packages/opencode/src/tool/glob.txt            | 2 +-
 packages/opencode/test/config/markdown.test.ts | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/opencode/src/config/config.ts b/packages/opencode/src/config/config.ts
index 807cd46fd26..66f42e5a851 100644
--- a/packages/opencode/src/config/config.ts
+++ b/packages/opencode/src/config/config.ts
@@ -98,7 +98,7 @@ export namespace Config {
         for (const file of ["opencode.jsonc", "opencode.json"]) {
           log.debug(`loading config from ${path.join(dir, file)}`)
           result = mergeConfigWithPlugins(result, await loadFile(path.join(dir, file)))
-          // to satisy the type checker
+          // to satisfy the type checker
           result.agent ??= {}
           result.mode ??= {}
           result.plugin ??= []
diff --git a/packages/opencode/src/session/prompt/beast.txt b/packages/opencode/src/session/prompt/beast.txt
index 21db5dcb59c..974d9a265e7 100644
--- a/packages/opencode/src/session/prompt/beast.txt
+++ b/packages/opencode/src/session/prompt/beast.txt
@@ -68,7 +68,7 @@ Carefully read the issue and think hard about a plan to solve it before coding.
 - Use the `webfetch` tool to search google by fetching the URL `https://www.google.com/search?q=your+search+query`.
 - After fetching, review the content returned by the fetch tool.
 - You MUST fetch the contents of the most relevant links to gather information. Do not rely on the summary that you find in the search results.
-- As you fetch each link, read the content thoroughly and fetch any additional links that you find withhin the content that are relevant to the problem.
+- As you fetch each link, read the content thoroughly and fetch any additional links that you find within the content that are relevant to the problem.
 - Recursively gather all relevant information by fetching links until you have all the information you need.
 
 ## 5. Develop a Detailed Plan 
diff --git a/packages/opencode/src/session/prompt/codex.txt b/packages/opencode/src/session/prompt/codex.txt
index ec67413040f..23952ecdd13 100644
--- a/packages/opencode/src/session/prompt/codex.txt
+++ b/packages/opencode/src/session/prompt/codex.txt
@@ -222,7 +222,7 @@ The messages you send before tool calls should describe what is immediately abou
 
 Your final message should read naturally, like an update from a concise teammate. For casual conversation, brainstorming tasks, or quick questions from the user, respond in a friendly, conversational tone. You should ask questions, suggest ideas, and adapt to the user’s style. If you've finished a large amount of work, when describing what you've done to the user, you should follow the final answer formatting guidelines to communicate substantive changes. You don't need to add structured formatting for one-word answers, greetings, or purely conversational exchanges.
 
-You can skip heavy formatting for single, simple actions or confirmations. In these cases, respond in plain sentences with any relevant next step or quick option. Reserve multi-section structured responses for results that need grouping or explanation.
+You can skip heavy formatting for single, simple actions or confirmations. In these cases, respond in plain sentences with any relevant next step or quick option. Reserve multisection structured responses for results that need grouping or explanation.
 
 The user is working on the same computer as you, and has access to your work. As such there's no need to show the full contents of large files you have already written unless the user explicitly asks for them. Similarly, if you've created or modified files using `edit`, there's no need to tell users to "save the file" or "copy the code into a file"—just reference the file path.
 
@@ -259,7 +259,7 @@ You are producing plain text that will later be styled by the CLI. Follow these
 **File References**
 When referencing files in your response, make sure to include the relevant start line and always follow the below rules:
   * Use inline code to make file paths clickable.
-  * Each reference should have a stand alone path. Even if it's the same file.
+  * Each reference should have a standalone path. Even if it's the same file.
   * Accepted: absolute, workspace‑relative, a/ or b/ diff prefixes, or bare filename/suffix.
   * Line/column (1‑based, optional): :line[:column] or #Lline[Ccolumn] (column defaults to 1).
   * Do not use URIs like file://, vscode://, or https://.
diff --git a/packages/opencode/src/tool/glob.txt b/packages/opencode/src/tool/glob.txt
index 2cf16a05fa5..627da6cae9d 100644
--- a/packages/opencode/src/tool/glob.txt
+++ b/packages/opencode/src/tool/glob.txt
@@ -2,5 +2,5 @@
 - Supports glob patterns like "**/*.js" or "src/**/*.ts"
 - Returns matching file paths sorted by modification time
 - Use this tool when you need to find files by name patterns
-- When you are doing an open ended search that may require multiple rounds of globbing and grepping, use the Task tool instead
+- When you are doing an open-ended search that may require multiple rounds of globbing and grepping, use the Task tool instead
 - You have the capability to call multiple tools in a single response. It is always better to speculatively perform multiple searches as a batch that are potentially useful.
diff --git a/packages/opencode/test/config/markdown.test.ts b/packages/opencode/test/config/markdown.test.ts
index 392ca3911be..90a997d1f91 100644
--- a/packages/opencode/test/config/markdown.test.ts
+++ b/packages/opencode/test/config/markdown.test.ts
@@ -14,7 +14,7 @@ but this is not:
 
 We also need to deal with files followed by @commas, ones
 with @file-extensions.md, even @multiple.extensions.bak,
-hidden directorys like @.config/ or files like @.bashrc
+hidden directories like @.config/ or files like @.bashrc
 and ones at the end of a sentence like @foo.md.
 
 Also shouldn't forget @/absolute/paths.txt with and @/without/extensions,

From 5bfffbe083cf8cbd3168ca5b1168673d9252b1b9 Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Sun, 28 Dec 2025 19:06:59 +0000
Subject: [PATCH 37/60] chore: generate

---
 packages/plugin/package.json | 2 +-
 packages/sdk/js/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index fa361dd745e..d1da551f18c 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -24,4 +24,4 @@
     "typescript": "catalog:",
     "@typescript/native-preview": "catalog:"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/sdk/js/package.json b/packages/sdk/js/package.json
index 71f930a409f..a1d9071fdbf 100644
--- a/packages/sdk/js/package.json
+++ b/packages/sdk/js/package.json
@@ -29,4 +29,4 @@
   "publishConfig": {
     "directory": "dist"
   }
-}
\ No newline at end of file
+}

From 6e8cd3174c6e02d9c4b42086d33a4a232c812b49 Mon Sep 17 00:00:00 2001
From: Daniel Polito <danielbpolito@gmail.com>
Date: Sun, 28 Dec 2025 16:09:24 -0300
Subject: [PATCH 38/60] Include current working directory in local MCP
 transport (#6303)

---
 packages/opencode/src/mcp/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/opencode/src/mcp/index.ts b/packages/opencode/src/mcp/index.ts
index 88886c4ff4a..8ee54a4bf82 100644
--- a/packages/opencode/src/mcp/index.ts
+++ b/packages/opencode/src/mcp/index.ts
@@ -308,10 +308,12 @@ export namespace MCP {
 
     if (mcp.type === "local") {
       const [cmd, ...args] = mcp.command
+      const cwd = Instance.directory
       const transport = new StdioClientTransport({
         stderr: "ignore",
         command: cmd,
         args,
+        cwd,
         env: {
           ...process.env,
           ...(cmd === "opencode" ? { BUN_BE_BUN: "1" } : {}),
@@ -334,6 +336,7 @@ export namespace MCP {
         log.error("local mcp startup failed", {
           key,
           command: mcp.command,
+          cwd,
           error: error instanceof Error ? error.message : String(error),
         })
         status = {

From 70fa66397e01ab3915058421d2060c62f5a2e01c Mon Sep 17 00:00:00 2001
From: Mohak S <mohaks0408@gmail.com>
Date: Mon, 29 Dec 2025 00:39:38 +0530
Subject: [PATCH 39/60] docs: add opencode-notifier plugin to ecosystem (#6283)

---
 packages/web/src/content/docs/ecosystem.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web/src/content/docs/ecosystem.mdx b/packages/web/src/content/docs/ecosystem.mdx
index de0d5fd3769..222a77e151a 100644
--- a/packages/web/src/content/docs/ecosystem.mdx
+++ b/packages/web/src/content/docs/ecosystem.mdx
@@ -33,6 +33,7 @@ You can also check out [awesome-opencode](https://github.com/awesome-opencode/aw
 | [opencode-morph-fast-apply](https://github.com/JRedeker/opencode-morph-fast-apply)                | 10x faster code editing with Morph Fast Apply API and lazy edit markers                        |
 | [oh-my-opencode](https://github.com/code-yeongyu/oh-my-opencode)                                  | Background agents, pre-built LSP/AST/MCP tools, curated agents, Claude Code compatible         |
 | [opencode-notificator](https://github.com/panta/opencode-notificator)                             | Desktop notifications and sound alerts for OpenCode sessions                                   |
+| [opencode-notifier](https://github.com/mohak34/opencode-notifier)                                 | Desktop notifications and sound alerts for permission, completion, and error events            |
 | [opencode-zellij-namer](https://github.com/24601/opencode-zellij-namer)                           | AI-powered automatic Zellij session naming based on OpenCode context                           |
 
 ---

From 0c19b71f428be388ad9591097b8b234e82192ad9 Mon Sep 17 00:00:00 2001
From: Matt Silverlock <matt@eatsleeprepeat.net>
Date: Sun, 28 Dec 2025 14:13:11 -0500
Subject: [PATCH 40/60] docs: add plugin configuration documentation (#6301)

Co-authored-by: OpenCode <opencode@example.com>
---
 packages/web/src/content/docs/config.mdx  | 20 +++++++
 packages/web/src/content/docs/plugins.mdx | 64 ++++++++++++++++++++---
 2 files changed, 77 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/content/docs/config.mdx b/packages/web/src/content/docs/config.mdx
index d7f8031782c..c7f1513383d 100644
--- a/packages/web/src/content/docs/config.mdx
+++ b/packages/web/src/content/docs/config.mdx
@@ -378,6 +378,26 @@ You can configure MCP servers you want to use through the `mcp` option.
 
 ---
 
+### Plugins
+
+[Plugins](/docs/plugins) extend OpenCode with custom tools, hooks, and integrations.
+
+Place plugin files in `.opencode/plugin/` or `~/.config/opencode/plugin/`. You can also load plugins from npm through the `plugin` option.
+
+```json title="opencode.json"
+{
+  "$schema": "https://opencode.ai/config.json",
+  "plugin": [
+    "opencode-helicone-session",
+    "@my-org/custom-plugin"
+  ]
+}
+```
+
+[Learn more here](/docs/plugins).
+
+---
+
 ### Instructions
 
 You can configure the instructions for the model you're using through the `instructions` option.
diff --git a/packages/web/src/content/docs/plugins.mdx b/packages/web/src/content/docs/plugins.mdx
index 6be545482c1..eb941565d5f 100644
--- a/packages/web/src/content/docs/plugins.mdx
+++ b/packages/web/src/content/docs/plugins.mdx
@@ -9,19 +9,69 @@ For examples, check out the [plugins](/docs/ecosystem#plugins) created by the co
 
 ---
 
-## Create a plugin
+## Use a plugin
 
-A plugin is a **JavaScript/TypeScript module** that exports one or more plugin
-functions. Each function receives a context object and returns a hooks object.
+There are two ways to load plugins.
+
+---
+
+### From local files
+
+Place JavaScript or TypeScript files in the plugin directory.
+
+- `.opencode/plugin/` - Project-level plugins
+- `~/.config/opencode/plugin/` - Global plugins
+
+Files in these directories are automatically loaded at startup.
 
 ---
 
-### Location
+### From npm
+
+Specify npm packages in your config file.
+
+```json title="opencode.json"
+{
+  "$schema": "https://opencode.ai/config.json",
+  "plugin": [
+    "opencode-helicone-session",
+    "opencode-wakatime",
+    "@my-org/custom-plugin"
+  ]
+}
+```
+
+Both regular and scoped npm packages are supported.
 
-Plugins are loaded from:
+Browse available plugins in the [ecosystem](/docs/ecosystem#plugins).
+
+---
 
-1. `.opencode/plugin` directory either in your project
-2. Or, globally in `~/.config/opencode/plugin`
+### How plugins are installed
+
+**npm plugins** are installed automatically using Bun at startup. Packages and their dependencies are cached in `~/.cache/opencode/node_modules/`.
+
+**Local plugins** are loaded directly from the plugin directory. Dependencies are not installed automatically. If your local plugin requires external packages, publish it to npm instead and add it to your config.
+
+---
+
+### Load order
+
+Plugins are loaded from all sources and all hooks run in sequence. The load order is:
+
+1. Global config (`~/.config/opencode/opencode.json`)
+2. Project config (`opencode.json`)
+3. Global plugin directory (`~/.config/opencode/plugin/`)
+4. Project plugin directory (`.opencode/plugin/`)
+
+Duplicate npm packages with the same name and version are loaded once. However, a local plugin and an npm plugin with similar names are both loaded separately.
+
+---
+
+## Create a plugin
+
+A plugin is a **JavaScript/TypeScript module** that exports one or more plugin
+functions. Each function receives a context object and returns a hooks object.
 
 ---
 

From f12d55bf1e69785f779e545a67b6fc045d163cdb Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Sun, 28 Dec 2025 19:13:43 +0000
Subject: [PATCH 41/60] chore: generate

---
 packages/web/src/content/docs/config.mdx  | 5 +----
 packages/web/src/content/docs/plugins.mdx | 6 +-----
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/content/docs/config.mdx b/packages/web/src/content/docs/config.mdx
index c7f1513383d..751bb2b2146 100644
--- a/packages/web/src/content/docs/config.mdx
+++ b/packages/web/src/content/docs/config.mdx
@@ -387,10 +387,7 @@ Place plugin files in `.opencode/plugin/` or `~/.config/opencode/plugin/`. You c
 ```json title="opencode.json"
 {
   "$schema": "https://opencode.ai/config.json",
-  "plugin": [
-    "opencode-helicone-session",
-    "@my-org/custom-plugin"
-  ]
+  "plugin": ["opencode-helicone-session", "@my-org/custom-plugin"]
 }
 ```
 
diff --git a/packages/web/src/content/docs/plugins.mdx b/packages/web/src/content/docs/plugins.mdx
index eb941565d5f..e806046c1e0 100644
--- a/packages/web/src/content/docs/plugins.mdx
+++ b/packages/web/src/content/docs/plugins.mdx
@@ -33,11 +33,7 @@ Specify npm packages in your config file.
 ```json title="opencode.json"
 {
   "$schema": "https://opencode.ai/config.json",
-  "plugin": [
-    "opencode-helicone-session",
-    "opencode-wakatime",
-    "@my-org/custom-plugin"
-  ]
+  "plugin": ["opencode-helicone-session", "opencode-wakatime", "@my-org/custom-plugin"]
 }
 ```
 

From f3febd6e395458698fceca2f175f59e0cf68c1d6 Mon Sep 17 00:00:00 2001
From: Frank <frank@sst.dev>
Date: Sun, 28 Dec 2025 14:55:03 -0500
Subject: [PATCH 42/60] wip: benchmark

---
 .../console/app/src/routes/bench/index.tsx    | 125 +++++++++++++++++-
 1 file changed, 122 insertions(+), 3 deletions(-)

diff --git a/packages/console/app/src/routes/bench/index.tsx b/packages/console/app/src/routes/bench/index.tsx
index adf31fbc679..9d99393cf1f 100644
--- a/packages/console/app/src/routes/bench/index.tsx
+++ b/packages/console/app/src/routes/bench/index.tsx
@@ -1,20 +1,47 @@
 import { Title } from "@solidjs/meta"
 import { createAsync, query } from "@solidjs/router"
-import { For } from "solid-js"
+import { createMemo, createSignal, For, Show } from "solid-js"
 import { Database, desc } from "@opencode-ai/console-core/drizzle/index.js"
 import { BenchmarkTable } from "@opencode-ai/console-core/schema/benchmark.sql.js"
 
+interface TaskSource {
+  repo: string
+  from: string
+  to: string
+}
+
+interface Task {
+  averageScore: number
+  task: {
+    id: string
+    source: TaskSource
+  }
+}
+
+interface BenchmarkResult {
+  averageScore: number
+  tasks: Task[]
+}
+
 async function getBenchmarks() {
   "use server"
   const rows = await Database.use((tx) =>
     tx.select().from(BenchmarkTable).orderBy(desc(BenchmarkTable.timeCreated)).limit(100),
   )
   return rows.map((row) => {
-    const parsed = JSON.parse(row.result) as { averageScore: number }
+    const parsed = JSON.parse(row.result) as BenchmarkResult
+    const taskScores: Record<string, number> = {}
+    const taskData: Record<string, Task> = {}
+    for (const t of parsed.tasks) {
+      taskScores[t.task.id] = t.averageScore
+      taskData[t.task.id] = t
+    }
     return {
       agent: row.agent,
       model: row.model,
       averageScore: parsed.averageScore,
+      taskScores,
+      taskData,
     }
   })
 }
@@ -23,6 +50,17 @@ const queryBenchmarks = query(getBenchmarks, "benchmarks.list")
 
 export default function Bench() {
   const benchmarks = createAsync(() => queryBenchmarks())
+  const [modalTask, setModalTask] = createSignal<Task | null>(null)
+
+  const taskIds = createMemo(() => {
+    const ids = new Set<string>()
+    for (const row of benchmarks() ?? []) {
+      for (const id of Object.keys(row.taskScores)) {
+        ids.add(id)
+      }
+    }
+    return [...ids].sort()
+  })
 
   return (
     <main data-page="bench">
@@ -33,6 +71,7 @@ export default function Bench() {
             <th>Agent</th>
             <th>Model</th>
             <th>Average Score</th>
+            <For each={taskIds()}>{(id) => <th>{id}</th>}</For>
           </tr>
         </thead>
         <tbody>
@@ -41,12 +80,92 @@ export default function Bench() {
               <tr>
                 <td>{row.agent}</td>
                 <td>{row.model}</td>
-                <td>{row.averageScore}</td>
+                <td>{row.averageScore.toFixed(3)}</td>
+                <For each={taskIds()}>
+                  {(id) => (
+                    <td>
+                      <Show when={row.taskData[id]} fallback={row.taskScores[id]?.toFixed(3) ?? ""}>
+                        <span
+                          style={{ cursor: "pointer", "text-decoration": "underline" }}
+                          onClick={() => setModalTask(row.taskData[id])}
+                        >
+                          {row.taskScores[id]?.toFixed(3)}
+                        </span>
+                      </Show>
+                    </td>
+                  )}
+                </For>
               </tr>
             )}
           </For>
         </tbody>
       </table>
+
+      <Show when={modalTask()}>
+        <div
+          data-component="modal-overlay"
+          style={{
+            position: "fixed",
+            inset: "0",
+            background: "rgba(0, 0, 0, 0.5)",
+            display: "flex",
+            "align-items": "center",
+            "justify-content": "center",
+            "z-index": "1000",
+          }}
+          onClick={() => setModalTask(null)}
+        >
+          <div
+            data-component="modal"
+            style={{
+              background: "var(--color-background, #fff)",
+              padding: "1rem",
+              "border-radius": "8px",
+              "max-width": "80vw",
+              "max-height": "80vh",
+              overflow: "auto",
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div style={{ "margin-bottom": "1rem" }}>
+              <div>
+                <strong>Repo: </strong>
+                <a
+                  href={`https://github.com/${modalTask()!.task.source.repo}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ color: "#0066cc" }}
+                >
+                  {modalTask()!.task.source.repo}
+                </a>
+              </div>
+              <div>
+                <strong>From: </strong>
+                <a
+                  href={`https://github.com/${modalTask()!.task.source.repo}/commit/${modalTask()!.task.source.from}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ color: "#0066cc" }}
+                >
+                  {modalTask()!.task.source.from.slice(0, 7)}
+                </a>
+              </div>
+              <div>
+                <strong>To: </strong>
+                <a
+                  href={`https://github.com/${modalTask()!.task.source.repo}/commit/${modalTask()!.task.source.to}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ color: "#0066cc" }}
+                >
+                  {modalTask()!.task.source.to.slice(0, 7)}
+                </a>
+              </div>
+            </div>
+            <pre style={{ color: "#000" }}>{JSON.stringify(modalTask(), null, 2)}</pre>
+          </div>
+        </div>
+      </Show>
     </main>
   )
 }

From 9d61370ac458627c394195ef761669ba70c93237 Mon Sep 17 00:00:00 2001
From: Frank <frank@sst.dev>
Date: Sun, 28 Dec 2025 15:33:18 -0500
Subject: [PATCH 43/60] sync

---
 .../console/app/src/routes/bench/index.tsx    | 92 ++++++++++++++++++-
 1 file changed, 90 insertions(+), 2 deletions(-)

diff --git a/packages/console/app/src/routes/bench/index.tsx b/packages/console/app/src/routes/bench/index.tsx
index 9d99393cf1f..6339c801798 100644
--- a/packages/console/app/src/routes/bench/index.tsx
+++ b/packages/console/app/src/routes/bench/index.tsx
@@ -10,11 +10,37 @@ interface TaskSource {
   to: string
 }
 
+interface ScoreDetail {
+  criterion: string
+  weight: number
+  average: number
+}
+
+interface Run {
+  task: string
+  model: string
+  agent: string
+  score: {
+    final: number
+    base: number
+    penalty: number
+  }
+  scoreDetails: ScoreDetail[]
+}
+
+interface Prompt {
+  commit: string
+  prompt: string
+}
+
 interface Task {
   averageScore: number
+  summary?: string
+  runs?: Run[]
   task: {
     id: string
     source: TaskSource
+    prompts?: Prompt[]
   }
 }
 
@@ -70,7 +96,7 @@ export default function Bench() {
           <tr>
             <th>Agent</th>
             <th>Model</th>
-            <th>Average Score</th>
+            <th>Final Score</th>
             <For each={taskIds()}>{(id) => <th>{id}</th>}</For>
           </tr>
         </thead>
@@ -127,7 +153,7 @@ export default function Bench() {
             }}
             onClick={(e) => e.stopPropagation()}
           >
-            <div style={{ "margin-bottom": "1rem" }}>
+            <div style={{ "margin-bottom": "1rem", color: "#000" }}>
               <div>
                 <strong>Repo: </strong>
                 <a
@@ -162,6 +188,68 @@ export default function Bench() {
                 </a>
               </div>
             </div>
+            <Show when={modalTask()?.task.prompts && modalTask()!.task.prompts!.length > 0}>
+              <div style={{ "margin-bottom": "1rem", color: "#000" }}>
+                <strong>Prompt:</strong>
+                <For each={modalTask()!.task.prompts}>
+                  {(p) => (
+                    <div style={{ "margin-top": "0.5rem" }}>
+                      <div style={{ "font-size": "0.875rem", color: "#666" }}>Commit: {p.commit.slice(0, 7)}</div>
+                      <p style={{ "margin-top": "0.25rem", "white-space": "pre-wrap" }}>{p.prompt}</p>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </Show>
+            <Show when={modalTask()?.runs && modalTask()!.runs!.length > 0}>
+              <div style={{ "margin-bottom": "1rem", color: "#000" }}>
+                <strong>Runs:</strong>
+                <table style={{ "margin-top": "0.5rem", "border-collapse": "collapse", width: "100%" }}>
+                  <thead>
+                    <tr>
+                      <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>Run</th>
+                      <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>Final</th>
+                      <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>Base</th>
+                      <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>Penalty</th>
+                      <For each={modalTask()!.runs![0]?.scoreDetails}>
+                        {(detail) => (
+                          <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>
+                            {detail.criterion} ({detail.weight})
+                          </th>
+                        )}
+                      </For>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <For each={modalTask()!.runs}>
+                      {(run, index) => (
+                        <tr>
+                          <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>{index() + 1}</td>
+                          <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>{run.score.final.toFixed(3)}</td>
+                          <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>{run.score.base.toFixed(3)}</td>
+                          <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>
+                            {run.score.penalty.toFixed(3)}
+                          </td>
+                          <For each={run.scoreDetails}>
+                            {(detail) => (
+                              <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>
+                                {detail.average.toFixed(3)}
+                              </td>
+                            )}
+                          </For>
+                        </tr>
+                      )}
+                    </For>
+                  </tbody>
+                </table>
+              </div>
+            </Show>
+            <Show when={modalTask()?.summary}>
+              <div style={{ "margin-bottom": "1rem", color: "#000" }}>
+                <strong>Summary:</strong>
+                <p style={{ "margin-top": "0.5rem", "white-space": "pre-wrap" }}>{modalTask()!.summary}</p>
+              </div>
+            </Show>
             <pre style={{ color: "#000" }}>{JSON.stringify(modalTask(), null, 2)}</pre>
           </div>
         </div>

From a4411c21b6687e7392447da08dbaec2dc530075f Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 28 Dec 2025 15:47:05 -0600
Subject: [PATCH 44/60] feat(desktop): theme preview

---
 packages/app/src/context/command.tsx | 37 ++++++++++++++++----
 packages/ui/src/components/list.tsx  |  8 +++++
 packages/ui/src/theme/context.tsx    | 50 ++++++++++++++++++++++++++++
 3 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/context/command.tsx b/packages/app/src/context/command.tsx
index f91a1cf052f..626bfdbe4e9 100644
--- a/packages/app/src/context/command.tsx
+++ b/packages/app/src/context/command.tsx
@@ -3,6 +3,7 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
+import { useTheme } from "@opencode-ai/ui/theme"
 
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 
@@ -115,6 +116,34 @@ export function formatKeybind(config: string): string {
 
 function DialogCommand(props: { options: CommandOption[] }) {
   const dialog = useDialog()
+  const theme = useTheme()
+  let committed = false
+
+  const handleMove = (option: CommandOption | undefined) => {
+    if (!option) return
+    if (option.id.startsWith("theme.set.")) {
+      const id = option.id.replace("theme.set.", "")
+      theme.previewTheme(id)
+    } else if (option.id.startsWith("theme.scheme.") && !option.id.includes("cycle")) {
+      const scheme = option.id.replace("theme.scheme.", "") as "light" | "dark" | "system"
+      theme.previewColorScheme(scheme)
+    }
+  }
+
+  const handleSelect = (option: CommandOption | undefined) => {
+    if (option) {
+      theme.commitPreview()
+      committed = true
+      dialog.close()
+      option.onSelect?.("palette")
+    }
+  }
+
+  onCleanup(() => {
+    if (!committed) {
+      theme.cancelPreview()
+    }
+  })
 
   return (
     <Dialog title="Commands">
@@ -125,12 +154,8 @@ function DialogCommand(props: { options: CommandOption[] }) {
         key={(x) => x?.id}
         filterKeys={["title", "description", "category"]}
         groupBy={(x) => x.category ?? ""}
-        onSelect={(option) => {
-          if (option) {
-            dialog.close()
-            option.onSelect?.("palette")
-          }
-        }}
+        onMove={handleMove}
+        onSelect={handleSelect}
       >
         {(option) => (
           <div class="w-full flex items-center justify-between gap-4">
diff --git a/packages/ui/src/components/list.tsx b/packages/ui/src/components/list.tsx
index 4f6df0faf40..808c9b032c8 100644
--- a/packages/ui/src/components/list.tsx
+++ b/packages/ui/src/components/list.tsx
@@ -15,6 +15,7 @@ export interface ListProps<T> extends FilteredListProps<T> {
   children: (item: T) => JSX.Element
   emptyMessage?: string
   onKeyEvent?: (event: KeyboardEvent, item: T | undefined) => void
+  onMove?: (item: T | undefined) => void
   activeIcon?: IconProps["name"]
   filter?: string
   search?: ListSearchProps | boolean
@@ -82,6 +83,13 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
     element?.scrollIntoView({ block: "center", behavior: "smooth" })
   })
 
+  createEffect(() => {
+    const all = flat()
+    const current = active()
+    const item = all.find((x) => props.key(x) === current)
+    props.onMove?.(item)
+  })
+
   const handleSelect = (item: T | undefined, index: number) => {
     props.onSelect?.(item, index)
   }
diff --git a/packages/ui/src/theme/context.tsx b/packages/ui/src/theme/context.tsx
index d2fbed3a1b0..210773f0c82 100644
--- a/packages/ui/src/theme/context.tsx
+++ b/packages/ui/src/theme/context.tsx
@@ -22,6 +22,10 @@ interface ThemeContextValue {
   setTheme: (id: string) => void
   setColorScheme: (scheme: ColorScheme) => void
   registerTheme: (theme: DesktopTheme) => void
+  previewTheme: (id: string) => void
+  previewColorScheme: (scheme: ColorScheme) => void
+  commitPreview: () => void
+  cancelPreview: () => void
 }
 
 const ThemeContext = createContext<ThemeContextValue>()
@@ -104,6 +108,8 @@ export function ThemeProvider(props: { children: JSX.Element; defaultTheme?: str
   const [themeId, setThemeIdSignal] = createSignal(props.defaultTheme ?? "oc-1")
   const [colorScheme, setColorSchemeSignal] = createSignal<ColorScheme>("system")
   const [mode, setMode] = createSignal<"light" | "dark">(getSystemMode())
+  const [previewThemeId, setPreviewThemeId] = createSignal<string | null>(null)
+  const [previewScheme, setPreviewScheme] = createSignal<ColorScheme | null>(null)
 
   onMount(() => {
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
@@ -169,6 +175,46 @@ export function ThemeProvider(props: { children: JSX.Element; defaultTheme?: str
     }))
   }
 
+  const previewTheme = (id: string) => {
+    const theme = themes()[id]
+    if (!theme) return
+    setPreviewThemeId(id)
+    const previewMode = previewScheme() ? (previewScheme() === "system" ? getSystemMode() : previewScheme()!) : mode()
+    applyThemeCss(theme, id, previewMode as "light" | "dark")
+  }
+
+  const previewColorScheme = (scheme: ColorScheme) => {
+    setPreviewScheme(scheme)
+    const previewMode = scheme === "system" ? getSystemMode() : scheme
+    const id = previewThemeId() ?? themeId()
+    const theme = themes()[id]
+    if (theme) {
+      applyThemeCss(theme, id, previewMode)
+    }
+  }
+
+  const commitPreview = () => {
+    const id = previewThemeId()
+    const scheme = previewScheme()
+    if (id) {
+      setTheme(id)
+    }
+    if (scheme) {
+      setColorSchemePref(scheme)
+    }
+    setPreviewThemeId(null)
+    setPreviewScheme(null)
+  }
+
+  const cancelPreview = () => {
+    setPreviewThemeId(null)
+    setPreviewScheme(null)
+    const theme = themes()[themeId()]
+    if (theme) {
+      applyThemeCss(theme, themeId(), mode())
+    }
+  }
+
   return (
     <ThemeContext.Provider
       value={{
@@ -179,6 +225,10 @@ export function ThemeProvider(props: { children: JSX.Element; defaultTheme?: str
         setTheme,
         setColorScheme: setColorSchemePref,
         registerTheme,
+        previewTheme,
+        previewColorScheme,
+        commitPreview,
+        cancelPreview,
       }}
     >
       {props.children}

From 82e5d6d458297af9fe60768eee49bc48f975f09e Mon Sep 17 00:00:00 2001
From: Daniel Polito <danielbpolito@gmail.com>
Date: Sun, 28 Dec 2025 19:07:36 -0300
Subject: [PATCH 45/60] Desktop: Sync LSP updates (#6305)

---
 packages/app/src/context/global-sync.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/app/src/context/global-sync.tsx b/packages/app/src/context/global-sync.tsx
index 22fdd0276eb..a496d59cb60 100644
--- a/packages/app/src/context/global-sync.tsx
+++ b/packages/app/src/context/global-sync.tsx
@@ -361,6 +361,15 @@ function createGlobalSync() {
         )
         break
       }
+      case "lsp.updated": {
+        const sdk = createOpencodeClient({
+          baseUrl: globalSDK.url,
+          directory,
+          throwOnError: true,
+        })
+        sdk.lsp.status().then((x) => setStore("lsp", x.data ?? []))
+        break
+      }
     }
   })
 

From e0bb96a9f9edf925c445607bc3e19742ba14af8c Mon Sep 17 00:00:00 2001
From: Frank <frank@sst.dev>
Date: Sun, 28 Dec 2025 20:00:47 -0500
Subject: [PATCH 46/60] wip: bench

---
 .../console/app/src/routes/bench/[id].tsx     | 365 ++++++++++++++++++
 .../console/app/src/routes/bench/index.tsx    | 209 +---------
 2 files changed, 383 insertions(+), 191 deletions(-)
 create mode 100644 packages/console/app/src/routes/bench/[id].tsx

diff --git a/packages/console/app/src/routes/bench/[id].tsx b/packages/console/app/src/routes/bench/[id].tsx
new file mode 100644
index 00000000000..4586eef9bf9
--- /dev/null
+++ b/packages/console/app/src/routes/bench/[id].tsx
@@ -0,0 +1,365 @@
+import { Title } from "@solidjs/meta"
+import { createAsync, query, useParams } from "@solidjs/router"
+import { createSignal, For, Show } from "solid-js"
+import { Database, desc, eq } from "@opencode-ai/console-core/drizzle/index.js"
+import { BenchmarkTable } from "@opencode-ai/console-core/schema/benchmark.sql.js"
+
+interface TaskSource {
+  repo: string
+  from: string
+  to: string
+}
+
+interface Judge {
+  score: number
+  rationale: string
+  judge: string
+}
+
+interface ScoreDetail {
+  criterion: string
+  weight: number
+  average: number
+  variance?: number
+  judges?: Judge[]
+}
+
+interface RunUsage {
+  input: number
+  output: number
+  cost: number
+}
+
+interface Run {
+  task: string
+  model: string
+  agent: string
+  score: {
+    final: number
+    base: number
+    penalty: number
+  }
+  scoreDetails: ScoreDetail[]
+  usage?: RunUsage
+  duration?: number
+}
+
+interface Prompt {
+  commit: string
+  prompt: string
+}
+
+interface AverageUsage {
+  input: number
+  output: number
+  cost: number
+}
+
+interface Task {
+  averageScore: number
+  averageDuration?: number
+  averageUsage?: AverageUsage
+  model?: string
+  agent?: string
+  summary?: string
+  runs?: Run[]
+  task: {
+    id: string
+    source: TaskSource
+    prompts?: Prompt[]
+  }
+}
+
+interface BenchmarkResult {
+  averageScore: number
+  tasks: Task[]
+}
+
+async function getTaskDetail(benchmarkId: string, taskId: string) {
+  "use server"
+  const rows = await Database.use((tx) =>
+    tx.select().from(BenchmarkTable).where(eq(BenchmarkTable.id, benchmarkId)).limit(1),
+  )
+  if (!rows[0]) return null
+  const parsed = JSON.parse(rows[0].result) as BenchmarkResult
+  const task = parsed.tasks.find((t) => t.task.id === taskId)
+  return task ?? null
+}
+
+const queryTaskDetail = query(getTaskDetail, "benchmark.task.detail")
+
+function formatDuration(ms: number): string {
+  const seconds = Math.floor(ms / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = seconds % 60
+  if (minutes > 0) {
+    return `${minutes}m ${remainingSeconds}s`
+  }
+  return `${remainingSeconds}s`
+}
+
+export default function BenchDetail() {
+  const params = useParams()
+  const [benchmarkId, taskId] = (params.id ?? "").split(":")
+  const task = createAsync(() => queryTaskDetail(benchmarkId, taskId))
+
+  return (
+    <main data-page="bench-detail">
+      <Title>Benchmark - {taskId}</Title>
+      <div style={{ padding: "1rem" }}>
+        <Show when={task()} fallback={<p>Task not found</p>}>
+          <div style={{ "margin-bottom": "1rem" }}>
+            <div>
+              <strong>Agent: </strong>
+              {task()?.agent ?? "N/A"}
+            </div>
+            <div>
+              <strong>Model: </strong>
+              {task()?.model ?? "N/A"}
+            </div>
+            <div>
+              <strong>Task: </strong>
+              {task()!.task.id}
+            </div>
+          </div>
+
+          <div style={{ "margin-bottom": "1rem" }}>
+            <div>
+              <strong>Repo: </strong>
+              <a
+                href={`https://github.com/${task()!.task.source.repo}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ color: "#0066cc" }}
+              >
+                {task()!.task.source.repo}
+              </a>
+            </div>
+            <div>
+              <strong>From: </strong>
+              <a
+                href={`https://github.com/${task()!.task.source.repo}/commit/${task()!.task.source.from}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ color: "#0066cc" }}
+              >
+                {task()!.task.source.from.slice(0, 7)}
+              </a>
+            </div>
+            <div>
+              <strong>To: </strong>
+              <a
+                href={`https://github.com/${task()!.task.source.repo}/commit/${task()!.task.source.to}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ color: "#0066cc" }}
+              >
+                {task()!.task.source.to.slice(0, 7)}
+              </a>
+            </div>
+          </div>
+
+          <Show when={task()?.task.prompts && task()!.task.prompts!.length > 0}>
+            <div style={{ "margin-bottom": "1rem" }}>
+              <strong>Prompt:</strong>
+              <For each={task()!.task.prompts}>
+                {(p) => (
+                  <div style={{ "margin-top": "0.5rem" }}>
+                    <div style={{ "font-size": "0.875rem", color: "#666" }}>Commit: {p.commit.slice(0, 7)}</div>
+                    <p style={{ "margin-top": "0.25rem", "white-space": "pre-wrap" }}>{p.prompt}</p>
+                  </div>
+                )}
+              </For>
+            </div>
+          </Show>
+
+          <hr style={{ margin: "1rem 0", border: "none", "border-top": "1px solid #ccc" }} />
+
+          <div style={{ "margin-bottom": "1rem" }}>
+            <div>
+              <strong>Average Duration: </strong>
+              {task()?.averageDuration ? formatDuration(task()!.averageDuration!) : "N/A"}
+            </div>
+            <div>
+              <strong>Average Score: </strong>
+              {task()?.averageScore?.toFixed(3) ?? "N/A"}
+            </div>
+            <div>
+              <strong>Average Cost: </strong>
+              {task()?.averageUsage?.cost ? `$${task()!.averageUsage!.cost.toFixed(4)}` : "N/A"}
+            </div>
+          </div>
+
+          <Show when={task()?.summary}>
+            <div style={{ "margin-bottom": "1rem" }}>
+              <strong>Summary:</strong>
+              <p style={{ "margin-top": "0.5rem", "white-space": "pre-wrap" }}>{task()!.summary}</p>
+            </div>
+          </Show>
+
+          <Show when={task()?.runs && task()!.runs!.length > 0}>
+            <div style={{ "margin-bottom": "1rem" }}>
+              <strong>Runs:</strong>
+              <table style={{ "margin-top": "0.5rem", "border-collapse": "collapse", width: "100%" }}>
+                <thead>
+                  <tr>
+                    <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>Run</th>
+                    <th
+                      style={{
+                        border: "1px solid #ccc",
+                        padding: "0.5rem",
+                        "text-align": "left",
+                        "white-space": "nowrap",
+                      }}
+                    >
+                      Score (Base - Penalty)
+                    </th>
+                    <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>Cost</th>
+                    <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>Duration</th>
+                    <For each={task()!.runs![0]?.scoreDetails}>
+                      {(detail) => (
+                        <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>
+                          {detail.criterion} ({detail.weight})
+                        </th>
+                      )}
+                    </For>
+                  </tr>
+                </thead>
+                <tbody>
+                  <For each={task()!.runs}>
+                    {(run, index) => (
+                      <tr>
+                        <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>{index() + 1}</td>
+                        <td style={{ border: "1px solid #ccc", padding: "0.5rem", "white-space": "nowrap" }}>
+                          {run.score.final.toFixed(3)} ({run.score.base.toFixed(3)} - {run.score.penalty.toFixed(3)})
+                        </td>
+                        <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>
+                          {run.usage?.cost ? `$${run.usage.cost.toFixed(4)}` : "N/A"}
+                        </td>
+                        <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>
+                          {run.duration ? formatDuration(run.duration) : "N/A"}
+                        </td>
+                        <For each={run.scoreDetails}>
+                          {(detail) => (
+                            <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>
+                              <For each={detail.judges}>
+                                {(judge) => (
+                                  <span
+                                    style={{
+                                      color: judge.score === 1 ? "green" : judge.score === 0 ? "red" : "inherit",
+                                      "margin-right": "0.25rem",
+                                    }}
+                                  >
+                                    {judge.score === 1 ? "✓" : judge.score === 0 ? "✗" : judge.score}
+                                  </span>
+                                )}
+                              </For>
+                            </td>
+                          )}
+                        </For>
+                      </tr>
+                    )}
+                  </For>
+                </tbody>
+              </table>
+              <For each={task()!.runs}>
+                {(run, index) => (
+                  <div style={{ "margin-top": "1rem" }}>
+                    <h3 style={{ margin: "0 0 0.5rem 0" }}>Run {index() + 1}</h3>
+                    <div>
+                      <strong>Score: </strong>
+                      {run.score.final.toFixed(3)} (Base: {run.score.base.toFixed(3)} - Penalty:{" "}
+                      {run.score.penalty.toFixed(3)})
+                    </div>
+                    <For each={run.scoreDetails}>
+                      {(detail) => (
+                        <div style={{ "margin-top": "1rem", "padding-left": "1rem", "border-left": "2px solid #ccc" }}>
+                          <div>
+                            {detail.criterion} (weight: {detail.weight}){" "}
+                            <For each={detail.judges}>
+                              {(judge) => (
+                                <span
+                                  style={{
+                                    color: judge.score === 1 ? "green" : judge.score === 0 ? "red" : "inherit",
+                                    "margin-right": "0.25rem",
+                                  }}
+                                >
+                                  {judge.score === 1 ? "✓" : judge.score === 0 ? "✗" : judge.score}
+                                </span>
+                              )}
+                            </For>
+                          </div>
+                          <Show when={detail.judges && detail.judges.length > 0}>
+                            <For each={detail.judges}>
+                              {(judge) => {
+                                const [expanded, setExpanded] = createSignal(false)
+                                return (
+                                  <div style={{ "margin-top": "0.5rem", "padding-left": "1rem" }}>
+                                    <div
+                                      style={{ "font-size": "0.875rem", cursor: "pointer" }}
+                                      onClick={() => setExpanded(!expanded())}
+                                    >
+                                      <span style={{ "margin-right": "0.5rem" }}>{expanded() ? "▼" : "▶"}</span>
+                                      <span
+                                        style={{
+                                          color: judge.score === 1 ? "green" : judge.score === 0 ? "red" : "inherit",
+                                        }}
+                                      >
+                                        {judge.score === 1 ? "✓" : judge.score === 0 ? "✗" : judge.score}
+                                      </span>{" "}
+                                      {judge.judge}
+                                    </div>
+                                    <Show when={expanded()}>
+                                      <p
+                                        style={{
+                                          margin: "0.25rem 0 0 0",
+                                          "white-space": "pre-wrap",
+                                          "font-size": "0.875rem",
+                                        }}
+                                      >
+                                        {judge.rationale}
+                                      </p>
+                                    </Show>
+                                  </div>
+                                )
+                              }}
+                            </For>
+                          </Show>
+                        </div>
+                      )}
+                    </For>
+                  </div>
+                )}
+              </For>
+            </div>
+          </Show>
+
+          {(() => {
+            const [jsonExpanded, setJsonExpanded] = createSignal(false)
+            return (
+              <div style={{ "margin-top": "1rem" }}>
+                <button
+                  style={{
+                    cursor: "pointer",
+                    padding: "0.75rem 1.5rem",
+                    "font-size": "1rem",
+                    background: "#f0f0f0",
+                    border: "1px solid #ccc",
+                    "border-radius": "4px",
+                  }}
+                  onClick={() => setJsonExpanded(!jsonExpanded())}
+                >
+                  <span style={{ "margin-right": "0.5rem" }}>{jsonExpanded() ? "▼" : "▶"}</span>
+                  Raw JSON
+                </button>
+                <Show when={jsonExpanded()}>
+                  <pre>{JSON.stringify(task(), null, 2)}</pre>
+                </Show>
+              </div>
+            )
+          })()}
+        </Show>
+      </div>
+    </main>
+  )
+}
diff --git a/packages/console/app/src/routes/bench/index.tsx b/packages/console/app/src/routes/bench/index.tsx
index 6339c801798..9b8d0b8f24f 100644
--- a/packages/console/app/src/routes/bench/index.tsx
+++ b/packages/console/app/src/routes/bench/index.tsx
@@ -1,52 +1,12 @@
 import { Title } from "@solidjs/meta"
-import { createAsync, query } from "@solidjs/router"
-import { createMemo, createSignal, For, Show } from "solid-js"
+import { A, createAsync, query } from "@solidjs/router"
+import { createMemo, For, Show } from "solid-js"
 import { Database, desc } from "@opencode-ai/console-core/drizzle/index.js"
 import { BenchmarkTable } from "@opencode-ai/console-core/schema/benchmark.sql.js"
 
-interface TaskSource {
-  repo: string
-  from: string
-  to: string
-}
-
-interface ScoreDetail {
-  criterion: string
-  weight: number
-  average: number
-}
-
-interface Run {
-  task: string
-  model: string
-  agent: string
-  score: {
-    final: number
-    base: number
-    penalty: number
-  }
-  scoreDetails: ScoreDetail[]
-}
-
-interface Prompt {
-  commit: string
-  prompt: string
-}
-
-interface Task {
-  averageScore: number
-  summary?: string
-  runs?: Run[]
-  task: {
-    id: string
-    source: TaskSource
-    prompts?: Prompt[]
-  }
-}
-
 interface BenchmarkResult {
   averageScore: number
-  tasks: Task[]
+  tasks: { averageScore: number; task: { id: string } }[]
 }
 
 async function getBenchmarks() {
@@ -57,17 +17,15 @@ async function getBenchmarks() {
   return rows.map((row) => {
     const parsed = JSON.parse(row.result) as BenchmarkResult
     const taskScores: Record<string, number> = {}
-    const taskData: Record<string, Task> = {}
     for (const t of parsed.tasks) {
       taskScores[t.task.id] = t.averageScore
-      taskData[t.task.id] = t
     }
     return {
+      id: row.id,
       agent: row.agent,
       model: row.model,
       averageScore: parsed.averageScore,
       taskScores,
-      taskData,
     }
   })
 }
@@ -76,7 +34,6 @@ const queryBenchmarks = query(getBenchmarks, "benchmarks.list")
 
 export default function Bench() {
   const benchmarks = createAsync(() => queryBenchmarks())
-  const [modalTask, setModalTask] = createSignal<Task | null>(null)
 
   const taskIds = createMemo(() => {
     const ids = new Set<string>()
@@ -89,34 +46,32 @@ export default function Bench() {
   })
 
   return (
-    <main data-page="bench">
+    <main data-page="bench" style={{ padding: "2rem" }}>
       <Title>Benchmark</Title>
-      <table>
+      <h1 style={{ "margin-bottom": "1.5rem" }}>Benchmarks</h1>
+      <table style={{ "border-collapse": "collapse", width: "100%" }}>
         <thead>
           <tr>
-            <th>Agent</th>
-            <th>Model</th>
-            <th>Final Score</th>
-            <For each={taskIds()}>{(id) => <th>{id}</th>}</For>
+            <th style={{ "text-align": "left", padding: "0.75rem" }}>Agent</th>
+            <th style={{ "text-align": "left", padding: "0.75rem" }}>Model</th>
+            <th style={{ "text-align": "left", padding: "0.75rem" }}>Score</th>
+            <For each={taskIds()}>{(id) => <th style={{ "text-align": "left", padding: "0.75rem" }}>{id}</th>}</For>
           </tr>
         </thead>
         <tbody>
           <For each={benchmarks()}>
             {(row) => (
               <tr>
-                <td>{row.agent}</td>
-                <td>{row.model}</td>
-                <td>{row.averageScore.toFixed(3)}</td>
+                <td style={{ padding: "0.75rem" }}>{row.agent}</td>
+                <td style={{ padding: "0.75rem" }}>{row.model}</td>
+                <td style={{ padding: "0.75rem" }}>{row.averageScore.toFixed(3)}</td>
                 <For each={taskIds()}>
                   {(id) => (
-                    <td>
-                      <Show when={row.taskData[id]} fallback={row.taskScores[id]?.toFixed(3) ?? ""}>
-                        <span
-                          style={{ cursor: "pointer", "text-decoration": "underline" }}
-                          onClick={() => setModalTask(row.taskData[id])}
-                        >
+                    <td style={{ padding: "0.75rem" }}>
+                      <Show when={row.taskScores[id] !== undefined} fallback="">
+                        <A href={`/bench/${row.id}:${id}`} style={{ color: "#0066cc" }}>
                           {row.taskScores[id]?.toFixed(3)}
-                        </span>
+                        </A>
                       </Show>
                     </td>
                   )}
@@ -126,134 +81,6 @@ export default function Bench() {
           </For>
         </tbody>
       </table>
-
-      <Show when={modalTask()}>
-        <div
-          data-component="modal-overlay"
-          style={{
-            position: "fixed",
-            inset: "0",
-            background: "rgba(0, 0, 0, 0.5)",
-            display: "flex",
-            "align-items": "center",
-            "justify-content": "center",
-            "z-index": "1000",
-          }}
-          onClick={() => setModalTask(null)}
-        >
-          <div
-            data-component="modal"
-            style={{
-              background: "var(--color-background, #fff)",
-              padding: "1rem",
-              "border-radius": "8px",
-              "max-width": "80vw",
-              "max-height": "80vh",
-              overflow: "auto",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div style={{ "margin-bottom": "1rem", color: "#000" }}>
-              <div>
-                <strong>Repo: </strong>
-                <a
-                  href={`https://github.com/${modalTask()!.task.source.repo}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style={{ color: "#0066cc" }}
-                >
-                  {modalTask()!.task.source.repo}
-                </a>
-              </div>
-              <div>
-                <strong>From: </strong>
-                <a
-                  href={`https://github.com/${modalTask()!.task.source.repo}/commit/${modalTask()!.task.source.from}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style={{ color: "#0066cc" }}
-                >
-                  {modalTask()!.task.source.from.slice(0, 7)}
-                </a>
-              </div>
-              <div>
-                <strong>To: </strong>
-                <a
-                  href={`https://github.com/${modalTask()!.task.source.repo}/commit/${modalTask()!.task.source.to}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style={{ color: "#0066cc" }}
-                >
-                  {modalTask()!.task.source.to.slice(0, 7)}
-                </a>
-              </div>
-            </div>
-            <Show when={modalTask()?.task.prompts && modalTask()!.task.prompts!.length > 0}>
-              <div style={{ "margin-bottom": "1rem", color: "#000" }}>
-                <strong>Prompt:</strong>
-                <For each={modalTask()!.task.prompts}>
-                  {(p) => (
-                    <div style={{ "margin-top": "0.5rem" }}>
-                      <div style={{ "font-size": "0.875rem", color: "#666" }}>Commit: {p.commit.slice(0, 7)}</div>
-                      <p style={{ "margin-top": "0.25rem", "white-space": "pre-wrap" }}>{p.prompt}</p>
-                    </div>
-                  )}
-                </For>
-              </div>
-            </Show>
-            <Show when={modalTask()?.runs && modalTask()!.runs!.length > 0}>
-              <div style={{ "margin-bottom": "1rem", color: "#000" }}>
-                <strong>Runs:</strong>
-                <table style={{ "margin-top": "0.5rem", "border-collapse": "collapse", width: "100%" }}>
-                  <thead>
-                    <tr>
-                      <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>Run</th>
-                      <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>Final</th>
-                      <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>Base</th>
-                      <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>Penalty</th>
-                      <For each={modalTask()!.runs![0]?.scoreDetails}>
-                        {(detail) => (
-                          <th style={{ border: "1px solid #ccc", padding: "0.5rem", "text-align": "left" }}>
-                            {detail.criterion} ({detail.weight})
-                          </th>
-                        )}
-                      </For>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <For each={modalTask()!.runs}>
-                      {(run, index) => (
-                        <tr>
-                          <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>{index() + 1}</td>
-                          <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>{run.score.final.toFixed(3)}</td>
-                          <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>{run.score.base.toFixed(3)}</td>
-                          <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>
-                            {run.score.penalty.toFixed(3)}
-                          </td>
-                          <For each={run.scoreDetails}>
-                            {(detail) => (
-                              <td style={{ border: "1px solid #ccc", padding: "0.5rem" }}>
-                                {detail.average.toFixed(3)}
-                              </td>
-                            )}
-                          </For>
-                        </tr>
-                      )}
-                    </For>
-                  </tbody>
-                </table>
-              </div>
-            </Show>
-            <Show when={modalTask()?.summary}>
-              <div style={{ "margin-bottom": "1rem", color: "#000" }}>
-                <strong>Summary:</strong>
-                <p style={{ "margin-top": "0.5rem", "white-space": "pre-wrap" }}>{modalTask()!.summary}</p>
-              </div>
-            </Show>
-            <pre style={{ color: "#000" }}>{JSON.stringify(modalTask(), null, 2)}</pre>
-          </div>
-        </div>
-      </Show>
     </main>
   )
 }

From 0156f03e0ef4e256236256aac05f4fc10577280f Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 28 Dec 2025 19:26:46 -0600
Subject: [PATCH 47/60] chore: cleanup theme stuff

---
 packages/app/src/context/command.tsx |  18 +-
 packages/app/src/pages/layout.tsx    |  16 +-
 packages/ui/src/theme/context.tsx    | 293 +++++++++++----------------
 3 files changed, 132 insertions(+), 195 deletions(-)

diff --git a/packages/app/src/context/command.tsx b/packages/app/src/context/command.tsx
index 626bfdbe4e9..efd83bec861 100644
--- a/packages/app/src/context/command.tsx
+++ b/packages/app/src/context/command.tsx
@@ -3,7 +3,6 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
-import { useTheme } from "@opencode-ai/ui/theme"
 
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 
@@ -27,6 +26,7 @@ export interface CommandOption {
   suggested?: boolean
   disabled?: boolean
   onSelect?: (source?: "palette" | "keybind" | "slash") => void
+  onHighlight?: () => (() => void) | void
 }
 
 export function parseKeybind(config: string): Keybind[] {
@@ -116,24 +116,18 @@ export function formatKeybind(config: string): string {
 
 function DialogCommand(props: { options: CommandOption[] }) {
   const dialog = useDialog()
-  const theme = useTheme()
+  let cleanup: (() => void) | void
   let committed = false
 
   const handleMove = (option: CommandOption | undefined) => {
-    if (!option) return
-    if (option.id.startsWith("theme.set.")) {
-      const id = option.id.replace("theme.set.", "")
-      theme.previewTheme(id)
-    } else if (option.id.startsWith("theme.scheme.") && !option.id.includes("cycle")) {
-      const scheme = option.id.replace("theme.scheme.", "") as "light" | "dark" | "system"
-      theme.previewColorScheme(scheme)
-    }
+    cleanup?.()
+    cleanup = option?.onHighlight?.()
   }
 
   const handleSelect = (option: CommandOption | undefined) => {
     if (option) {
-      theme.commitPreview()
       committed = true
+      cleanup = undefined
       dialog.close()
       option.onSelect?.("palette")
     }
@@ -141,7 +135,7 @@ function DialogCommand(props: { options: CommandOption[] }) {
 
   onCleanup(() => {
     if (!committed) {
-      theme.cancelPreview()
+      cleanup?.()
     }
   })
 
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 08b3401871f..2bc0c313149 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -49,7 +49,7 @@ import { Header } from "@/components/header"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
 import { DialogSelectProvider } from "@/components/dialog-select-provider"
-import { useCommand } from "@/context/command"
+import { useCommand, type CommandOption } from "@/context/command"
 import { ConstrainDragXAxis } from "@/utils/solid-dnd"
 
 export default function Layout(props: ParentProps) {
@@ -323,7 +323,7 @@ export default function Layout(props: ParentProps) {
   }
 
   command.register(() => {
-    const commands = [
+    const commands: CommandOption[] = [
       {
         id: "sidebar.toggle",
         title: "Toggle sidebar",
@@ -387,7 +387,11 @@ export default function Layout(props: ParentProps) {
         id: `theme.set.${id}`,
         title: `Use theme: ${definition.name ?? id}`,
         category: "Theme",
-        onSelect: () => theme.setTheme(id),
+        onSelect: () => theme.commitPreview(),
+        onHighlight: () => {
+          theme.previewTheme(id)
+          return () => theme.cancelPreview()
+        },
       })
     }
 
@@ -404,7 +408,11 @@ export default function Layout(props: ParentProps) {
         id: `theme.scheme.${scheme}`,
         title: `Use color scheme: ${colorSchemeLabel[scheme]}`,
         category: "Theme",
-        onSelect: () => theme.setColorScheme(scheme),
+        onSelect: () => theme.commitPreview(),
+        onHighlight: () => {
+          theme.previewColorScheme(scheme)
+          return () => theme.cancelPreview()
+        },
       })
     }
 
diff --git a/packages/ui/src/theme/context.tsx b/packages/ui/src/theme/context.tsx
index 210773f0c82..c1c1637d674 100644
--- a/packages/ui/src/theme/context.tsx
+++ b/packages/ui/src/theme/context.tsx
@@ -1,52 +1,24 @@
-import {
-  createContext,
-  useContext,
-  createSignal,
-  onMount,
-  onCleanup,
-  createEffect,
-  type JSX,
-  type Accessor,
-} from "solid-js"
+import { onMount, onCleanup, createEffect } from "solid-js"
+import { createStore } from "solid-js/store"
 import type { DesktopTheme } from "./types"
 import { resolveThemeVariant, themeToCss } from "./resolve"
 import { DEFAULT_THEMES } from "./default-themes"
+import { createSimpleContext } from "../context/helper"
 
 export type ColorScheme = "light" | "dark" | "system"
 
-interface ThemeContextValue {
-  themeId: Accessor<string>
-  colorScheme: Accessor<ColorScheme>
-  mode: Accessor<"light" | "dark">
-  themes: Accessor<Record<string, DesktopTheme>>
-  setTheme: (id: string) => void
-  setColorScheme: (scheme: ColorScheme) => void
-  registerTheme: (theme: DesktopTheme) => void
-  previewTheme: (id: string) => void
-  previewColorScheme: (scheme: ColorScheme) => void
-  commitPreview: () => void
-  cancelPreview: () => void
-}
-
-const ThemeContext = createContext<ThemeContextValue>()
-
 const STORAGE_KEYS = {
   THEME_ID: "opencode-theme-id",
   COLOR_SCHEME: "opencode-color-scheme",
-  THEME_CSS_PREFIX: "opencode-theme-css",
+  THEME_CSS_LIGHT: "opencode-theme-css-light",
+  THEME_CSS_DARK: "opencode-theme-css-dark",
 } as const
 
-function getThemeCacheKey(themeId: string, mode: "light" | "dark"): string {
-  return `${STORAGE_KEYS.THEME_CSS_PREFIX}-${themeId}-${mode}`
-}
-
 const THEME_STYLE_ID = "oc-theme"
 
 function ensureThemeStyleElement(): HTMLStyleElement {
   const existing = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null
-  if (existing) {
-    return existing
-  }
+  if (existing) return existing
   const element = document.createElement("style")
   element.id = THEME_STYLE_ID
   document.head.appendChild(element)
@@ -57,16 +29,15 @@ function getSystemMode(): "light" | "dark" {
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
 }
 
-function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "dark"): void {
+function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "dark") {
   const isDark = mode === "dark"
   const variant = isDark ? theme.dark : theme.light
   const tokens = resolveThemeVariant(variant, isDark)
   const css = themeToCss(tokens)
 
   if (themeId !== "oc-1") {
-    const cacheKey = getThemeCacheKey(themeId, mode)
     try {
-      localStorage.setItem(cacheKey, css)
+      localStorage.setItem(isDark ? STORAGE_KEYS.THEME_CSS_DARK : STORAGE_KEYS.THEME_CSS_LIGHT, css)
     } catch {}
   }
 
@@ -76,170 +47,134 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da
   ${css}
 }`
 
-  const preloadStyle = document.getElementById("oc-theme-preload")
-  if (preloadStyle) {
-    preloadStyle.remove()
-  }
-
-  const themeStyleElement = ensureThemeStyleElement()
-  themeStyleElement.textContent = fullCss
-
+  document.getElementById("oc-theme-preload")?.remove()
+  ensureThemeStyleElement().textContent = fullCss
   document.documentElement.dataset.theme = themeId
   document.documentElement.dataset.colorScheme = mode
 }
 
-function cacheThemeVariants(theme: DesktopTheme, themeId: string): void {
+function cacheThemeVariants(theme: DesktopTheme, themeId: string) {
   if (themeId === "oc-1") return
-
   for (const mode of ["light", "dark"] as const) {
     const isDark = mode === "dark"
     const variant = isDark ? theme.dark : theme.light
     const tokens = resolveThemeVariant(variant, isDark)
     const css = themeToCss(tokens)
-    const cacheKey = getThemeCacheKey(themeId, mode)
     try {
-      localStorage.setItem(cacheKey, css)
+      localStorage.setItem(isDark ? STORAGE_KEYS.THEME_CSS_DARK : STORAGE_KEYS.THEME_CSS_LIGHT, css)
     } catch {}
   }
 }
 
-export function ThemeProvider(props: { children: JSX.Element; defaultTheme?: string }) {
-  const [themes, setThemes] = createSignal<Record<string, DesktopTheme>>(DEFAULT_THEMES)
-  const [themeId, setThemeIdSignal] = createSignal(props.defaultTheme ?? "oc-1")
-  const [colorScheme, setColorSchemeSignal] = createSignal<ColorScheme>("system")
-  const [mode, setMode] = createSignal<"light" | "dark">(getSystemMode())
-  const [previewThemeId, setPreviewThemeId] = createSignal<string | null>(null)
-  const [previewScheme, setPreviewScheme] = createSignal<ColorScheme | null>(null)
-
-  onMount(() => {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
-    const handler = () => {
-      if (colorScheme() === "system") {
-        setMode(getSystemMode())
+export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
+  name: "Theme",
+  init: (props: { defaultTheme?: string }) => {
+    const [store, setStore] = createStore({
+      themes: DEFAULT_THEMES as Record<string, DesktopTheme>,
+      themeId: props.defaultTheme ?? "oc-1",
+      colorScheme: "system" as ColorScheme,
+      mode: getSystemMode(),
+      previewThemeId: null as string | null,
+      previewScheme: null as ColorScheme | null,
+    })
+
+    onMount(() => {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+      const handler = () => {
+        if (store.colorScheme === "system") {
+          setStore("mode", getSystemMode())
+        }
       }
-    }
-    mediaQuery.addEventListener("change", handler)
-    onCleanup(() => mediaQuery.removeEventListener("change", handler))
+      mediaQuery.addEventListener("change", handler)
+      onCleanup(() => mediaQuery.removeEventListener("change", handler))
 
-    const savedTheme = localStorage.getItem(STORAGE_KEYS.THEME_ID)
-    const savedScheme = localStorage.getItem(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null
-    if (savedTheme && themes()[savedTheme]) {
-      setThemeIdSignal(savedTheme)
-    }
-    if (savedScheme) {
-      setColorSchemeSignal(savedScheme)
-      if (savedScheme !== "system") {
-        setMode(savedScheme)
+      const savedTheme = localStorage.getItem(STORAGE_KEYS.THEME_ID)
+      const savedScheme = localStorage.getItem(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null
+      if (savedTheme && store.themes[savedTheme]) {
+        setStore("themeId", savedTheme)
       }
-    }
-    const currentTheme = themes()[themeId()]
-    if (currentTheme) {
-      cacheThemeVariants(currentTheme, themeId())
-    }
-  })
-
-  createEffect(() => {
-    const id = themeId()
-    const m = mode()
-    const theme = themes()[id]
-    if (theme) {
-      applyThemeCss(theme, id, m)
-    }
-  })
-
-  const setTheme = (id: string) => {
-    const theme = themes()[id]
-    if (!theme) {
-      console.warn(`Theme "${id}" not found`)
-      return
-    }
-    setThemeIdSignal(id)
-    localStorage.setItem(STORAGE_KEYS.THEME_ID, id)
-    cacheThemeVariants(theme, id)
-  }
-
-  const setColorSchemePref = (scheme: ColorScheme) => {
-    setColorSchemeSignal(scheme)
-    localStorage.setItem(STORAGE_KEYS.COLOR_SCHEME, scheme)
-    if (scheme === "system") {
-      setMode(getSystemMode())
-    } else {
-      setMode(scheme)
-    }
-  }
-
-  const registerTheme = (theme: DesktopTheme) => {
-    setThemes((prev) => ({
-      ...prev,
-      [theme.id]: theme,
-    }))
-  }
+      if (savedScheme) {
+        setStore("colorScheme", savedScheme)
+        if (savedScheme !== "system") {
+          setStore("mode", savedScheme)
+        }
+      }
+      const currentTheme = store.themes[store.themeId]
+      if (currentTheme) {
+        cacheThemeVariants(currentTheme, store.themeId)
+      }
+    })
 
-  const previewTheme = (id: string) => {
-    const theme = themes()[id]
-    if (!theme) return
-    setPreviewThemeId(id)
-    const previewMode = previewScheme() ? (previewScheme() === "system" ? getSystemMode() : previewScheme()!) : mode()
-    applyThemeCss(theme, id, previewMode as "light" | "dark")
-  }
+    createEffect(() => {
+      const theme = store.themes[store.themeId]
+      if (theme) {
+        applyThemeCss(theme, store.themeId, store.mode)
+      }
+    })
 
-  const previewColorScheme = (scheme: ColorScheme) => {
-    setPreviewScheme(scheme)
-    const previewMode = scheme === "system" ? getSystemMode() : scheme
-    const id = previewThemeId() ?? themeId()
-    const theme = themes()[id]
-    if (theme) {
-      applyThemeCss(theme, id, previewMode)
+    const setTheme = (id: string) => {
+      const theme = store.themes[id]
+      if (!theme) {
+        console.warn(`Theme "${id}" not found`)
+        return
+      }
+      setStore("themeId", id)
+      localStorage.setItem(STORAGE_KEYS.THEME_ID, id)
+      cacheThemeVariants(theme, id)
     }
-  }
 
-  const commitPreview = () => {
-    const id = previewThemeId()
-    const scheme = previewScheme()
-    if (id) {
-      setTheme(id)
-    }
-    if (scheme) {
-      setColorSchemePref(scheme)
+    const setColorScheme = (scheme: ColorScheme) => {
+      setStore("colorScheme", scheme)
+      localStorage.setItem(STORAGE_KEYS.COLOR_SCHEME, scheme)
+      setStore("mode", scheme === "system" ? getSystemMode() : scheme)
     }
-    setPreviewThemeId(null)
-    setPreviewScheme(null)
-  }
 
-  const cancelPreview = () => {
-    setPreviewThemeId(null)
-    setPreviewScheme(null)
-    const theme = themes()[themeId()]
-    if (theme) {
-      applyThemeCss(theme, themeId(), mode())
+    return {
+      themeId: () => store.themeId,
+      colorScheme: () => store.colorScheme,
+      mode: () => store.mode,
+      themes: () => store.themes,
+      setTheme,
+      setColorScheme,
+      registerTheme: (theme: DesktopTheme) => setStore("themes", theme.id, theme),
+      previewTheme: (id: string) => {
+        const theme = store.themes[id]
+        if (!theme) return
+        setStore("previewThemeId", id)
+        const previewMode = store.previewScheme
+          ? store.previewScheme === "system"
+            ? getSystemMode()
+            : store.previewScheme
+          : store.mode
+        applyThemeCss(theme, id, previewMode)
+      },
+      previewColorScheme: (scheme: ColorScheme) => {
+        setStore("previewScheme", scheme)
+        const previewMode = scheme === "system" ? getSystemMode() : scheme
+        const id = store.previewThemeId ?? store.themeId
+        const theme = store.themes[id]
+        if (theme) {
+          applyThemeCss(theme, id, previewMode)
+        }
+      },
+      commitPreview: () => {
+        if (store.previewThemeId) {
+          setTheme(store.previewThemeId)
+        }
+        if (store.previewScheme) {
+          setColorScheme(store.previewScheme)
+        }
+        setStore("previewThemeId", null)
+        setStore("previewScheme", null)
+      },
+      cancelPreview: () => {
+        setStore("previewThemeId", null)
+        setStore("previewScheme", null)
+        const theme = store.themes[store.themeId]
+        if (theme) {
+          applyThemeCss(theme, store.themeId, store.mode)
+        }
+      },
     }
-  }
-
-  return (
-    <ThemeContext.Provider
-      value={{
-        themeId,
-        colorScheme,
-        mode,
-        themes,
-        setTheme,
-        setColorScheme: setColorSchemePref,
-        registerTheme,
-        previewTheme,
-        previewColorScheme,
-        commitPreview,
-        cancelPreview,
-      }}
-    >
-      {props.children}
-    </ThemeContext.Provider>
-  )
-}
-
-export function useTheme(): ThemeContextValue {
-  const ctx = useContext(ThemeContext)
-  if (!ctx) {
-    throw new Error("useTheme must be used within a ThemeProvider")
-  }
-  return ctx
-}
+  },
+})

From a71c9e3f2e5093fa3658c8e75e09dafcefa43c70 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 28 Dec 2025 19:49:39 -0600
Subject: [PATCH 48/60] fix(desktop): edit diffs

---
 packages/ui/src/components/message-part.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 0a1518b796e..2d39207ec96 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -807,19 +807,19 @@ ToolRegistry.register({
           </div>
         }
       >
-        <Show when={props.metadata.filediff}>
+        <Show when={props.metadata.filediff?.path || props.input.filePath}>
           <div data-component="edit-content">
             <Dynamic
               component={diffComponent}
               before={{
-                name: props.metadata.filediff.path,
-                contents: props.metadata.filediff.before,
-                cacheKey: checksum(props.metadata.filediff.before),
+                name: props.metadata?.filediff?.file || props.input.filePath,
+                contents: props.metadata?.filediff?.before || props.input.oldString,
+                cacheKey: checksum(props.metadata?.filediff?.before || props.input.oldString),
               }}
               after={{
-                name: props.metadata.filediff.path,
-                contents: props.metadata.filediff.after,
-                cacheKey: checksum(props.metadata.filediff.after),
+                name: props.metadata?.filediff?.file || props.input.filePath,
+                contents: props.metadata?.filediff?.after || props.input.newString,
+                cacheKey: checksum(props.metadata?.filediff?.after || props.input.newString),
               }}
             />
           </div>

From aafffb5b4b651b890cbfc7dcb96ba3463c8d8fa8 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 28 Dec 2025 19:54:22 -0600
Subject: [PATCH 49/60] chore: cleanup

---
 packages/ui/src/components/message-part.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index 92323876ca2..cf784fd52ec 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -390,12 +390,12 @@
         conic-gradient(
             from var(--border-angle),
             transparent 0deg,
-            transparent 270deg,
+            transparent 0deg,
             var(--border-warning-strong, var(--border-warning-selected)) 300deg,
             var(--border-warning-base) 360deg
           )
           border-box;
-      animation: chase-border 1.5s linear infinite;
+      animation: chase-border 2.5s linear infinite;
       pointer-events: none;
       z-index: -1;
     }

From 76880dce0d67998c03f9dbb162f4f91f1a762a47 Mon Sep 17 00:00:00 2001
From: opencode <opencode@sst.dev>
Date: Mon, 29 Dec 2025 01:57:53 +0000
Subject: [PATCH 50/60] release: v1.0.207

---
 bun.lock                               | 30 +++++++++++++-------------
 packages/app/package.json              |  2 +-
 packages/console/app/package.json      |  2 +-
 packages/console/core/package.json     |  2 +-
 packages/console/function/package.json |  2 +-
 packages/console/mail/package.json     |  2 +-
 packages/desktop/package.json          |  2 +-
 packages/enterprise/package.json       |  2 +-
 packages/extensions/zed/extension.toml | 12 +++++------
 packages/function/package.json         |  2 +-
 packages/opencode/package.json         |  2 +-
 packages/plugin/package.json           |  4 ++--
 packages/sdk/js/package.json           |  4 ++--
 packages/slack/package.json            |  2 +-
 packages/ui/package.json               |  2 +-
 packages/util/package.json             |  2 +-
 packages/web/package.json              |  2 +-
 sdks/vscode/package.json               |  2 +-
 18 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/bun.lock b/bun.lock
index fa5d84e4ea3..b8e6b86e9f6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -22,7 +22,7 @@
     },
     "packages/app": {
       "name": "@opencode-ai/app",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -70,7 +70,7 @@
     },
     "packages/console/app": {
       "name": "@opencode-ai/console-app",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@cloudflare/vite-plugin": "1.15.2",
         "@ibm/plex": "6.4.1",
@@ -98,7 +98,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -125,7 +125,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@ai-sdk/anthropic": "2.0.0",
         "@ai-sdk/openai": "2.0.2",
@@ -149,7 +149,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -173,7 +173,7 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@opencode-ai/app": "workspace:*",
         "@solid-primitives/storage": "catalog:",
@@ -200,7 +200,7 @@
     },
     "packages/enterprise": {
       "name": "@opencode-ai/enterprise",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@opencode-ai/ui": "workspace:*",
         "@opencode-ai/util": "workspace:*",
@@ -229,7 +229,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "catalog:",
@@ -245,7 +245,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -347,7 +347,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -367,7 +367,7 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "devDependencies": {
         "@hey-api/openapi-ts": "0.88.1",
         "@tsconfig/node22": "catalog:",
@@ -378,7 +378,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -391,7 +391,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -426,7 +426,7 @@
     },
     "packages/util": {
       "name": "@opencode-ai/util",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "zod": "catalog:",
       },
@@ -437,7 +437,7 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "1.0.206",
+      "version": "1.0.207",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",
diff --git a/packages/app/package.json b/packages/app/package.json
index 84e70e63aa6..01721f6e498 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "description": "",
   "type": "module",
   "exports": {
diff --git a/packages/console/app/package.json b/packages/console/app/package.json
index 50d1edc6cde..9e88c92e82b 100644
--- a/packages/console/app/package.json
+++ b/packages/console/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-app",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",
diff --git a/packages/console/core/package.json b/packages/console/core/package.json
index b57f1b10093..1f205090fe1 100644
--- a/packages/console/core/package.json
+++ b/packages/console/core/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/console-core",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "private": true,
   "type": "module",
   "dependencies": {
diff --git a/packages/console/function/package.json b/packages/console/function/package.json
index 319cf487e1c..e769f1a0e9f 100644
--- a/packages/console/function/package.json
+++ b/packages/console/function/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-function",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",
diff --git a/packages/console/mail/package.json b/packages/console/mail/package.json
index f1550f782d8..74cf1440e2b 100644
--- a/packages/console/mail/package.json
+++ b/packages/console/mail/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-mail",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "dependencies": {
     "@jsx-email/all": "2.2.3",
     "@jsx-email/cli": "1.4.3",
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index 3e0fc7410df..dc619cf198e 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opencode-ai/desktop",
   "private": true,
-  "version": "1.0.206",
+  "version": "1.0.207",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo -b",
diff --git a/packages/enterprise/package.json b/packages/enterprise/package.json
index c4cd2d64919..8c8336e3868 100644
--- a/packages/enterprise/package.json
+++ b/packages/enterprise/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/enterprise",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/packages/extensions/zed/extension.toml b/packages/extensions/zed/extension.toml
index a9b30fa5b19..70da5b4bd8a 100644
--- a/packages/extensions/zed/extension.toml
+++ b/packages/extensions/zed/extension.toml
@@ -1,7 +1,7 @@
 id = "opencode"
 name = "OpenCode"
 description = "The open source coding agent."
-version = "1.0.206"
+version = "1.0.207"
 schema_version = 1
 authors = ["Anomaly"]
 repository = "https://github.com/sst/opencode"
@@ -11,26 +11,26 @@ name = "OpenCode"
 icon = "./icons/opencode.svg"
 
 [agent_servers.opencode.targets.darwin-aarch64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.206/opencode-darwin-arm64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.207/opencode-darwin-arm64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.darwin-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.206/opencode-darwin-x64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.207/opencode-darwin-x64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-aarch64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.206/opencode-linux-arm64.tar.gz"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.207/opencode-linux-arm64.tar.gz"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.206/opencode-linux-x64.tar.gz"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.207/opencode-linux-x64.tar.gz"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.windows-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.206/opencode-windows-x64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.207/opencode-windows-x64.zip"
 cmd = "./opencode.exe"
 args = ["acp"]
diff --git a/packages/function/package.json b/packages/function/package.json
index c5d63e60a3b..1fa670dea65 100644
--- a/packages/function/package.json
+++ b/packages/function/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/function",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",
diff --git a/packages/opencode/package.json b/packages/opencode/package.json
index 68dfb3c0a11..d6ab63172e8 100644
--- a/packages/opencode/package.json
+++ b/packages/opencode/package.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "name": "opencode",
   "type": "module",
   "private": true,
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index d1da551f18c..cee002366a8 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/plugin",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",
@@ -24,4 +24,4 @@
     "typescript": "catalog:",
     "@typescript/native-preview": "catalog:"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/sdk/js/package.json b/packages/sdk/js/package.json
index a1d9071fdbf..6982f316be8 100644
--- a/packages/sdk/js/package.json
+++ b/packages/sdk/js/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/sdk",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",
@@ -29,4 +29,4 @@
   "publishConfig": {
     "directory": "dist"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/slack/package.json b/packages/slack/package.json
index c8bebcf8bfc..c564858257d 100644
--- a/packages/slack/package.json
+++ b/packages/slack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/slack",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "type": "module",
   "scripts": {
     "dev": "bun run src/index.ts",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2dd9b7817dc..3e8422bcd4d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "type": "module",
   "exports": {
     "./*": "./src/components/*.tsx",
diff --git a/packages/util/package.json b/packages/util/package.json
index 13883dbc6ad..a91b5e288ac 100644
--- a/packages/util/package.json
+++ b/packages/util/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/util",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "private": true,
   "type": "module",
   "exports": {
diff --git a/packages/web/package.json b/packages/web/package.json
index ff4d6ac72ce..bd287b7fe60 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opencode-ai/web",
   "type": "module",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "scripts": {
     "dev": "astro dev",
     "dev:remote": "VITE_API_URL=https://api.opencode.ai astro dev",
diff --git a/sdks/vscode/package.json b/sdks/vscode/package.json
index 0060a2ee212..13eaad66aa4 100644
--- a/sdks/vscode/package.json
+++ b/sdks/vscode/package.json
@@ -2,7 +2,7 @@
   "name": "opencode",
   "displayName": "opencode",
   "description": "opencode for VS Code",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "publisher": "sst-dev",
   "repository": {
     "type": "git",

From 244a9fe97ea2716dea972baa4c537986f36ce166 Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 18:15:14 -0800
Subject: [PATCH 51/60] chore: remove debug console.log from dialog context

---
 packages/ui/src/context/dialog.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/ui/src/context/dialog.tsx b/packages/ui/src/context/dialog.tsx
index 8e1a6aad8e5..f85eb48df80 100644
--- a/packages/ui/src/context/dialog.tsx
+++ b/packages/ui/src/context/dialog.tsx
@@ -1,6 +1,5 @@
 import {
   createContext,
-  createEffect,
   createSignal,
   getOwner,
   Owner,
@@ -70,9 +69,6 @@ function init() {
 
 export function DialogProvider(props: ParentProps) {
   const ctx = init()
-  createEffect(() => {
-    console.log("active", ctx.active)
-  })
   return (
     <Context.Provider value={ctx}>
       {props.children}

From c82208514fc089ac3fdf9d6b24fdc4f40da1121d Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 18:15:19 -0800
Subject: [PATCH 52/60] feat(app): add server URL management utilities

Add shared utilities for custom server URL configuration:
- URL validation with HTTP/HTTPS protocol check
- Mixed content risk detection for HTTPS pages
- URL history management (max 5 entries)
- localStorage-based URL storage
---
 packages/app/src/lib/server-url.ts | 149 +++++++++++++++++++++++++++++
 1 file changed, 149 insertions(+)
 create mode 100644 packages/app/src/lib/server-url.ts

diff --git a/packages/app/src/lib/server-url.ts b/packages/app/src/lib/server-url.ts
new file mode 100644
index 00000000000..c3e609cffa9
--- /dev/null
+++ b/packages/app/src/lib/server-url.ts
@@ -0,0 +1,149 @@
+/**
+ * Server URL management utilities for custom server URL configuration.
+ *
+ * This module provides shared logic for:
+ * - URL validation
+ * - Mixed content risk detection
+ * - URL history management
+ * - Stored URL get/set/clear
+ */
+
+// Constants
+export const SERVER_URL_KEY = "opencode:server-url"
+export const SERVER_URL_HISTORY_KEY = "opencode:server-url-history"
+export const MAX_HISTORY = 5
+
+/**
+ * Validate that a URL is a valid server URL.
+ * Only HTTP and HTTPS protocols are allowed.
+ */
+export function isValidServerUrl(url: string): boolean {
+  if (!url || !url.trim()) return false
+  try {
+    const parsed = new URL(url)
+    return ["http:", "https:"].includes(parsed.protocol)
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Check if setting this URL would cause mixed content issues.
+ *
+ * Returns true if:
+ * - Current page is HTTPS, AND
+ * - Target URL is HTTP, AND
+ * - Target is NOT localhost/127.0.0.1 (browsers allow this exception)
+ */
+export function hasMixedContentRisk(targetUrl: string): boolean {
+  if (typeof location === "undefined") return false
+  if (location.protocol !== "https:") return false
+
+  try {
+    const parsed = new URL(targetUrl)
+    if (parsed.protocol !== "http:") return false
+
+    // Localhost is allowed even from HTTPS (secure context exception)
+    const isLocalhost = ["localhost", "127.0.0.1", "[::1]"].includes(parsed.hostname)
+    return !isLocalhost
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Normalize a URL for comparison and deduplication.
+ * Lowercases and strips trailing slashes.
+ */
+export function normalizeUrl(url: string): string {
+  return url.toLowerCase().replace(/\/+$/, "")
+}
+
+/**
+ * Get the list of recent server URLs from localStorage.
+ */
+export function getServerUrlHistory(): string[] {
+  try {
+    const stored = localStorage.getItem(SERVER_URL_HISTORY_KEY)
+    if (!stored) return []
+    const parsed = JSON.parse(stored)
+    if (!Array.isArray(parsed)) return []
+    // Filter to only valid URLs
+    return parsed.filter((url): url is string => typeof url === "string" && isValidServerUrl(url))
+  } catch {
+    return []
+  }
+}
+
+/**
+ * Add a URL to the history list.
+ * Deduplicates by normalized URL and keeps only the most recent MAX_HISTORY entries.
+ */
+export function addToServerUrlHistory(url: string): void {
+  if (!isValidServerUrl(url)) return
+
+  const history = getServerUrlHistory()
+  const normalized = normalizeUrl(url)
+
+  // Remove any existing entry with the same normalized URL
+  const filtered = history.filter((u) => normalizeUrl(u) !== normalized)
+
+  // Add the new URL at the beginning
+  const updated = [url, ...filtered].slice(0, MAX_HISTORY)
+
+  try {
+    localStorage.setItem(SERVER_URL_HISTORY_KEY, JSON.stringify(updated))
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+/**
+ * Clear all URL history.
+ */
+export function clearServerUrlHistory(): void {
+  try {
+    localStorage.removeItem(SERVER_URL_HISTORY_KEY)
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+/**
+ * Get the currently stored server URL override.
+ */
+export function getStoredServerUrl(): string | null {
+  try {
+    const stored = localStorage.getItem(SERVER_URL_KEY)
+    if (!stored) return null
+    // Validate before returning
+    if (!isValidServerUrl(stored)) return null
+    return stored
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Set a custom server URL override.
+ * The URL must be valid or it will not be stored.
+ */
+export function setStoredServerUrl(url: string): void {
+  if (!isValidServerUrl(url)) return
+  try {
+    localStorage.setItem(SERVER_URL_KEY, url)
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+/**
+ * Clear the stored server URL override.
+ */
+export function clearStoredServerUrl(): void {
+  try {
+    localStorage.removeItem(SERVER_URL_KEY)
+  } catch {
+    // Ignore storage errors
+  }
+}

From d0a23f40b58c0e14b8340064a6ecbfea9db413f5 Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 18:15:26 -0800
Subject: [PATCH 53/60] feat(app): add custom server URL settings dialog

Allow users to override the server URL via settings dialog or query param:
- Add DialogServerSettings component with URL input and history
- Integrate localStorage-based URL resolution in app.tsx
- Add sidebar button and command palette entry in layout.tsx
- Add reset button on error page for connection errors
---
 packages/app/src/app.tsx                      |  93 +++++----
 .../src/components/dialog-server-settings.tsx | 187 ++++++++++++++++++
 packages/app/src/pages/error.tsx              |  39 +++-
 packages/app/src/pages/layout.tsx             |  29 +--
 4 files changed, 298 insertions(+), 50 deletions(-)
 create mode 100644 packages/app/src/components/dialog-server-settings.tsx

diff --git a/packages/app/src/app.tsx b/packages/app/src/app.tsx
index 612f0921f6f..c2262ed5448 100644
--- a/packages/app/src/app.tsx
+++ b/packages/app/src/app.tsx
@@ -21,6 +21,8 @@ import Home from "@/pages/home"
 import DirectoryLayout from "@/pages/directory-layout"
 import Session from "@/pages/session"
 import { ErrorPage } from "./pages/error"
+import { iife } from "@opencode-ai/util/iife"
+import { getStoredServerUrl, setStoredServerUrl, isValidServerUrl, addToServerUrlHistory } from "@/lib/server-url"
 
 declare global {
   interface Window {
@@ -28,44 +30,65 @@ declare global {
   }
 }
 
-const host = import.meta.env.VITE_OPENCODE_SERVER_HOST || location.hostname || "127.0.0.1"
-const port = window.__OPENCODE__?.port ?? import.meta.env.VITE_OPENCODE_SERVER_PORT ?? location.port ?? "4096"
+// URL priority:
+// 1. ?url= query parameter (explicit override) - persist if valid
+// 2. Stored URL override from localStorage
+// 3. Tauri injected port (desktop app with local server)
+// 4. Same-origin mode uses relative "/" to hit the proxy
+// 5. Other cases fall back to explicit host:port (dev mode)
+const url = iife(() => {
+  // 1. Query parameter (highest priority) - persist if valid
+  const queryUrl = new URLSearchParams(document.location.search).get("url")
+  if (queryUrl && isValidServerUrl(queryUrl)) {
+    setStoredServerUrl(queryUrl)
+    addToServerUrlHistory(queryUrl)
+    return queryUrl
+  }
 
-// Check if we should use same-origin requests (relative "/" URL)
-// This is needed when:
-// - Running behind a reverse proxy (HTTPS) that proxies API requests
-// - Running on known production hosts
-// - Running the web command (API and frontend served from same server)
-// In local dev mode with HTTP, we can hit the API server directly
-const isSecure = location.protocol === "https:"
-const isKnownHost =
-  location.hostname.includes("opencode.ai") ||
-  location.hostname.includes("shuv.ai") ||
-  location.hostname.endsWith(".local")
-const isLoopback = ["localhost", "127.0.0.1", "0.0.0.0"].includes(location.hostname)
-// When accessed via non-loopback IP (e.g., LAN IP), we're still on the same server
-// so we should use same-origin mode. Dev mode with Vite needs explicit host:port.
-const isWebCommand = !import.meta.env.DEV
+  // 2. Stored URL override
+  const storedUrl = getStoredServerUrl()
+  if (storedUrl) return storedUrl
 
-// Use same-origin when:
-// - On HTTPS (must use same-origin to avoid mixed content)
-// - On known production hosts
-// - On loopback in non-dev mode (production build)
-// - On any host in non-dev mode (web command serves API and frontend together)
-const useSameOrigin = isSecure || isKnownHost || (isLoopback && !import.meta.env.DEV) || isWebCommand
+  // 3-5. Existing logic (preserved exactly)
+  const host = import.meta.env.VITE_OPENCODE_SERVER_HOST || location.hostname || "127.0.0.1"
+  const port = window.__OPENCODE__?.port ?? import.meta.env.VITE_OPENCODE_SERVER_PORT ?? location.port ?? "4096"
 
-// URL priority:
-// 1. ?url= query parameter (explicit override)
-// 2. Tauri injected port (desktop app with local server)
-// 3. Same-origin mode uses relative "/" to hit the proxy
-// 4. Other cases fall back to explicit host:port (dev mode)
-const url =
-  new URLSearchParams(document.location.search).get("url") ||
-  (window.__OPENCODE__?.port
-    ? `http://${host}:${window.__OPENCODE__.port}`
-    : useSameOrigin
-      ? "/"
-      : `http://${host}:${port}`)
+  // Check if we should use same-origin requests (relative "/" URL)
+  // This is needed when:
+  // - Running behind a reverse proxy (HTTPS) that proxies API requests
+  // - Running on known production hosts
+  // - Running the web command (API and frontend served from same server)
+  // In local dev mode with HTTP, we can hit the API server directly
+  const isSecure = location.protocol === "https:"
+  const isKnownHost =
+    location.hostname.includes("opencode.ai") ||
+    location.hostname.includes("shuv.ai") ||
+    location.hostname.endsWith(".local")
+  const isLoopback = ["localhost", "127.0.0.1", "0.0.0.0"].includes(location.hostname)
+  // When accessed via non-loopback IP (e.g., LAN IP), we're still on the same server
+  // so we should use same-origin mode. Dev mode with Vite needs explicit host:port.
+  const isWebCommand = !import.meta.env.DEV
+
+  // Use same-origin when:
+  // - On HTTPS (must use same-origin to avoid mixed content)
+  // - On known production hosts
+  // - On loopback in non-dev mode (production build)
+  // - On any host in non-dev mode (web command serves API and frontend together)
+  const useSameOrigin = isSecure || isKnownHost || (isLoopback && !import.meta.env.DEV) || isWebCommand
+
+  // 3. Tauri desktop
+  if (window.__OPENCODE__?.port) {
+    return `http://${host}:${window.__OPENCODE__.port}`
+  }
+
+  // 4. Same-origin mode
+  if (useSameOrigin) {
+    return "/"
+  }
+
+  // 5. Explicit host:port (dev mode)
+  return `http://${host}:${port}`
+})
 
 export function App() {
   return (
diff --git a/packages/app/src/components/dialog-server-settings.tsx b/packages/app/src/components/dialog-server-settings.tsx
new file mode 100644
index 00000000000..a8e0d569513
--- /dev/null
+++ b/packages/app/src/components/dialog-server-settings.tsx
@@ -0,0 +1,187 @@
+import { Component, createMemo, createSignal, For, Show } from "solid-js"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { showToast } from "@opencode-ai/ui/toast"
+import { usePlatform } from "@/context/platform"
+import {
+  getStoredServerUrl,
+  setStoredServerUrl,
+  clearStoredServerUrl,
+  getServerUrlHistory,
+  addToServerUrlHistory,
+  isValidServerUrl,
+  hasMixedContentRisk,
+} from "@/lib/server-url"
+
+export const DialogServerSettings: Component = () => {
+  const platform = usePlatform()
+
+  // Get current stored URL (if any)
+  const storedUrl = getStoredServerUrl()
+  const history = getServerUrlHistory()
+
+  // Track the input value
+  const [inputUrl, setInputUrl] = createSignal("")
+  const [isSubmitting, setIsSubmitting] = createSignal(false)
+
+  // Current effective URL display
+  const currentUrl = createMemo(() => {
+    if (storedUrl) return storedUrl
+    // Show what the default URL would be
+    return window.location.origin === "file://" ? "http://localhost:4096" : window.location.origin
+  })
+
+  const hasOverride = createMemo(() => !!storedUrl)
+
+  // Validation
+  const inputValid = createMemo(() => {
+    const url = inputUrl().trim()
+    if (!url) return false
+    return isValidServerUrl(url)
+  })
+
+  const showMixedContentWarning = createMemo(() => {
+    const url = inputUrl().trim()
+    if (!url) return false
+    return hasMixedContentRisk(url)
+  })
+
+  // Set a new server URL
+  async function handleSetUrl() {
+    const url = inputUrl().trim()
+    if (!isValidServerUrl(url)) {
+      showToast({
+        variant: "error",
+        icon: "circle-x",
+        title: "Invalid URL",
+        description: "Please enter a valid HTTP or HTTPS URL.",
+      })
+      return
+    }
+
+    setIsSubmitting(true)
+    setStoredServerUrl(url)
+    addToServerUrlHistory(url)
+
+    showToast({
+      variant: "success",
+      icon: "circle-check",
+      title: "Server URL updated",
+      description: "Reloading to apply changes...",
+    })
+
+    // Short delay to show the toast, then reload
+    setTimeout(() => {
+      platform.restart?.() ?? window.location.reload()
+    }, 500)
+  }
+
+  // Select a URL from history
+  function handleSelectHistory(url: string) {
+    setInputUrl(url)
+  }
+
+  // Clear the override and reload
+  function handleClearOverride() {
+    clearStoredServerUrl()
+    showToast({
+      variant: "success",
+      icon: "circle-check",
+      title: "Server URL reset",
+      description: "Reloading to apply changes...",
+    })
+
+    setTimeout(() => {
+      platform.restart?.() ?? window.location.reload()
+    }, 500)
+  }
+
+  return (
+    <Dialog title="Server settings">
+      <div class="flex flex-col gap-6 px-4 pb-4">
+        {/* Current URL display */}
+        <div class="flex flex-col gap-2">
+          <div class="text-12-medium text-text-weak uppercase tracking-wide">Current server URL</div>
+          <div class="flex items-center gap-2 px-3 py-2 rounded-md bg-surface-raised-base">
+            <span class="flex-1 truncate text-14-regular text-text-strong font-mono">{currentUrl()}</span>
+            <Show when={hasOverride()}>
+              <Icon name="check" size="small" class="text-icon-success-base shrink-0" />
+            </Show>
+            <Show when={!hasOverride()}>
+              <span class="text-12-regular text-text-weak shrink-0">(default)</span>
+            </Show>
+          </div>
+        </div>
+
+        {/* Set custom URL */}
+        <div class="flex flex-col gap-2">
+          <div class="text-12-medium text-text-weak uppercase tracking-wide">Set custom URL</div>
+          <div class="flex gap-2">
+            <TextField
+              value={inputUrl()}
+              onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) => setInputUrl(e.currentTarget.value)}
+              placeholder="http://localhost:4096"
+              class="flex-1 font-mono"
+              onKeyDown={(e: KeyboardEvent) => {
+                if (e.key === "Enter" && inputValid()) {
+                  handleSetUrl()
+                }
+              }}
+            />
+            <Button onClick={handleSetUrl} disabled={!inputValid() || isSubmitting()}>
+              Set
+            </Button>
+          </div>
+
+          {/* Mixed content warning */}
+          <Show when={showMixedContentWarning()}>
+            <div class="flex items-start gap-2 p-2 rounded-md bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 text-12-regular">
+              <Icon name="circle-ban-sign" size="small" class="shrink-0 mt-0.5" />
+              <span>
+                This HTTP URL will be blocked by your browser (mixed content). Use{" "}
+                <code class="font-mono bg-surface-base px-1 rounded">localhost</code> or an HTTPS URL instead.
+              </span>
+            </div>
+          </Show>
+        </div>
+
+        {/* History */}
+        <Show when={history.length > 0}>
+          <div class="flex flex-col gap-2">
+            <div class="text-12-medium text-text-weak uppercase tracking-wide">Recent URLs</div>
+            <div class="flex flex-col gap-1 rounded-md bg-surface-raised-base overflow-hidden">
+              <For each={history}>
+                {(url) => {
+                  const isSafe = !hasMixedContentRisk(url)
+                  return (
+                    <button
+                      type="button"
+                      class="flex items-center gap-2 px-3 py-2 text-left hover:bg-surface-raised-base-hover transition-colors"
+                      onClick={() => handleSelectHistory(url)}
+                    >
+                      <span class="flex-1 truncate text-14-regular text-text-strong font-mono">{url}</span>
+                      <Show when={isSafe}>
+                        <Icon name="check" size="small" class="text-icon-success-base shrink-0" />
+                      </Show>
+                    </button>
+                  )
+                }}
+              </For>
+            </div>
+          </div>
+        </Show>
+
+        {/* Clear override button */}
+        <Show when={hasOverride()}>
+          <div class="pt-2 border-t border-border-weak-base">
+            <Button variant="ghost" onClick={handleClearOverride} class="w-full justify-center">
+              Clear override and use default
+            </Button>
+          </div>
+        </Show>
+      </div>
+    </Dialog>
+  )
+}
diff --git a/packages/app/src/pages/error.tsx b/packages/app/src/pages/error.tsx
index 37bd5ccd3cb..c538dd62fc3 100644
--- a/packages/app/src/pages/error.tsx
+++ b/packages/app/src/pages/error.tsx
@@ -1,9 +1,10 @@
 import { TextField } from "@opencode-ai/ui/text-field"
 import { Logo } from "@opencode-ai/ui/logo"
 import { Button } from "@opencode-ai/ui/button"
-import { Component, Show } from "solid-js"
+import { Component, createMemo, Show } from "solid-js"
 import { usePlatform } from "@/context/platform"
 import { Icon } from "@opencode-ai/ui/icon"
+import { getStoredServerUrl, clearStoredServerUrl } from "@/lib/server-url"
 
 export type InitError = {
   name: string
@@ -112,12 +113,32 @@ function formatError(error: unknown): string {
   return formatErrorChain(error, 0)
 }
 
+function isConnectionError(error: unknown): boolean {
+  const message = formatError(error).toLowerCase()
+  return (
+    message.includes("could not connect") ||
+    message.includes("econnrefused") ||
+    message.includes("fetch failed") ||
+    message.includes("network error") ||
+    message.includes("failed to fetch")
+  )
+}
+
 interface ErrorPageProps {
   error: unknown
 }
 
 export const ErrorPage: Component<ErrorPageProps> = (props) => {
   const platform = usePlatform()
+
+  const hasServerOverride = createMemo(() => !!getStoredServerUrl())
+  const showResetButton = createMemo(() => isConnectionError(props.error) && hasServerOverride())
+
+  function resetServerUrl() {
+    clearStoredServerUrl()
+    platform.restart?.() ?? window.location.reload()
+  }
+
   return (
     <div class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center bg-background-base font-sans">
       <div class="w-2/3 max-w-3xl flex flex-col items-center justify-center gap-8">
@@ -135,9 +156,19 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
           label="Error Details"
           hideLabel
         />
-        <Button size="large" onClick={platform.restart}>
-          Restart
-        </Button>
+        <div class="flex flex-col items-center gap-3">
+          <Button size="large" onClick={platform.restart}>
+            Restart
+          </Button>
+          <Show when={showResetButton()}>
+            <Button size="large" variant="ghost" onClick={resetServerUrl}>
+              Reset server URL
+            </Button>
+            <p class="text-xs text-text-weak">
+              Using custom server URL. Reset to use default.
+            </p>
+          </Show>
+        </div>
         <div class="flex flex-col items-center gap-2">
           <div class="flex items-center justify-center gap-1">
             Please report this error to the OpenCode team
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 069c3fbe5c9..1964f112ac3 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -41,6 +41,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { DialogSelectProvider } from "@/components/dialog-select-provider"
 import { DialogCreateProject } from "@/components/dialog-create-project"
 import { DialogSessionRenameGlobal } from "@/components/dialog-session-rename-global"
+import { DialogServerSettings } from "@/components/dialog-server-settings"
 import { useCommand } from "@/context/command"
 import { ConstrainDragXAxis } from "@/utils/solid-dnd"
 
@@ -313,6 +314,12 @@ export default function Layout(props: ParentProps) {
         if (session) archiveSession(session)
       },
     },
+    {
+      id: "settings.server",
+      title: "Server settings",
+      category: "Settings",
+      onSelect: () => dialog.show(() => <DialogServerSettings />),
+    },
   ])
 
   function connectProvider() {
@@ -1156,17 +1163,17 @@ export default function Layout(props: ParentProps) {
                 <Show when={layout.sidebar.opened()}>Create project</Show>
               </Button>
             </Tooltip>
-            {/* <Tooltip placement="right" value="Settings" inactive={layout.sidebar.opened()}> */}
-            {/*   <Button */}
-            {/*     disabled */}
-            {/*     class="flex w-full text-left justify-start text-12-medium text-text-base stroke-[1.5px] rounded-lg px-2" */}
-            {/*     variant="ghost" */}
-            {/*     size="large" */}
-            {/*     icon="settings-gear" */}
-            {/*   > */}
-            {/*     <Show when={layout.sidebar.opened()}>Settings</Show> */}
-            {/*   </Button> */}
-            {/* </Tooltip> */}
+            <Tooltip placement="right" value="Server settings" inactive={layout.sidebar.opened()}>
+              <Button
+                class="flex w-full text-left justify-start text-text-base stroke-[1.5px] rounded-lg px-2"
+                variant="ghost"
+                size="large"
+                icon="settings-gear"
+                onClick={() => dialog.show(() => <DialogServerSettings />)}
+              >
+                <Show when={layout.sidebar.opened()}>Server settings</Show>
+              </Button>
+            </Tooltip>
             <Tooltip placement="right" value="Share feedback" inactive={layout.sidebar.opened()}>
               <Button
                 as={"a"}

From 6fbcb503dc81c8808859205da6855e530f20b229 Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 18:15:30 -0800
Subject: [PATCH 54/60] refactor(app): improve create project dialog directory
 picker

Replace text input with searchable directory list for parent directory
selection in create and clone tabs. Improve visual consistency and
reduce vertical space usage.
---
 .../src/components/dialog-create-project.tsx  | 137 ++++++++++++------
 1 file changed, 90 insertions(+), 47 deletions(-)

diff --git a/packages/app/src/components/dialog-create-project.tsx b/packages/app/src/components/dialog-create-project.tsx
index ee8b0ef9a71..d406b617fb8 100644
--- a/packages/app/src/components/dialog-create-project.tsx
+++ b/packages/app/src/components/dialog-create-project.tsx
@@ -396,7 +396,7 @@ export const DialogCreateProject: Component = () => {
 
             {/* Directory list with search */}
             <List<DirectoryInfo>
-              class="flex-1 min-h-0 [&_[data-slot=list-item]]:h-auto [&_[data-slot=list-item]]:py-2"
+              class="flex-1 min-h-0 [&_[data-slot=list-item]]:h-auto [&_[data-slot=list-item]]:py-1"
               items={fetchDirectories}
               key={(dir) => dir.path}
               filterKeys={["name", "path"]}
@@ -406,21 +406,14 @@ export const DialogCreateProject: Component = () => {
               emptyMessage="No folders found"
             >
               {(dir) => (
-                <div class="flex items-center gap-3 w-full">
-                  <span class="text-text-weak shrink-0">
-                    <Icon name={dir.isGitRepo ? "github" : "folder"} />
-                  </span>
-                  <div class="flex-1 min-w-0 flex flex-col">
-                    <div class="text-14-medium text-text-strong truncate">{dir.name}</div>
-                    <div class="text-12-regular text-text-weak truncate">{dir.path.replace(homedir(), "~")}</div>
-                  </div>
+                <div class="flex items-center gap-2 w-full">
+                  <Icon name={dir.isGitRepo ? "github" : "folder"} class="text-text-weak shrink-0" size="small" />
+                  <span class="text-12-regular text-text-base truncate flex-1">{dir.path.replace(homedir(), "~")}</span>
                   <Show when={dir.isGitRepo && !dir.isExistingProject}>
-                    <span class="shrink-0 text-12-regular text-text-weak bg-surface-base px-2 py-0.5 rounded">git</span>
+                    <span class="shrink-0 text-12-regular text-text-weak bg-surface-base px-1.5 rounded">git</span>
                   </Show>
                   <Show when={dir.isExistingProject}>
-                    <span class="shrink-0 text-12-regular text-text-weak bg-surface-base px-2 py-0.5 rounded">
-                      open
-                    </span>
+                    <span class="shrink-0 text-12-regular text-text-weak bg-surface-base px-1.5 rounded">open</span>
                   </Show>
                 </div>
               )}
@@ -428,8 +421,8 @@ export const DialogCreateProject: Component = () => {
 
             {/* Browse button */}
             <Show when={platform.openDirectoryPickerDialog}>
-              <Button variant="ghost" onClick={handleBrowseExisting} class="justify-start">
-                <Icon name="folder" />
+              <Button variant="ghost" size="small" onClick={handleBrowseExisting} class="justify-start">
+                <Icon name="folder" size="small" />
                 Browse filesystem...
               </Button>
             </Show>
@@ -448,31 +441,56 @@ export const DialogCreateProject: Component = () => {
 
         {/* Create New tab content */}
         <Show when={activeTab() === "create"}>
-          <form onSubmit={handleCreateSubmit} class="flex flex-col gap-4">
+          <form onSubmit={handleCreateSubmit} class="flex flex-col gap-4 flex-1 min-h-0">
             <div class="text-14-regular text-text-base">
               Select a parent directory and enter a name for your new project. A new folder will be created and
               initialized as a git repository.
             </div>
 
-            {/* Parent directory picker */}
-            <div class="flex flex-col gap-2">
+            {/* Parent directory browser */}
+            <div class="flex flex-col gap-2 flex-1 min-h-0">
               <label class="text-14-medium text-text-strong">Parent directory</label>
-              <div class="flex gap-2">
-                <TextField
-                  class="flex-1"
-                  type="text"
-                  placeholder="~/projects"
-                  name="createParentDir"
-                  value={store.createParentDir}
-                  onChange={(value) => setStore("createParentDir", value)}
-                />
+              <Show when={store.createParentDir}>
+                <div class="flex items-center gap-2 bg-surface-base px-3 py-2 rounded">
+                  <Icon name="folder" class="text-text-weak shrink-0" />
+                  <span class="text-14-regular text-text-base truncate flex-1">
+                    {store.createParentDir.replace(homedir(), "~")}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="small"
+                    onClick={() => setStore("createParentDir", "")}
+                    class="shrink-0"
+                  >
+                    <Icon name="close" />
+                  </Button>
+                </div>
+              </Show>
+              <Show when={!store.createParentDir}>
+                <List<DirectoryInfo>
+                  class="flex-1 min-h-0 max-h-40 [&_[data-slot=list-item]]:h-auto [&_[data-slot=list-item]]:py-1"
+                  items={fetchDirectories}
+                  key={(dir) => dir.path}
+                  filterKeys={["name", "path"]}
+                  onSelect={(dir) => dir && setStore("createParentDir", dir.path)}
+                  search={{ placeholder: "Search folders...", autofocus: activeTab() === "create" }}
+                  emptyMessage="No folders found"
+                >
+                  {(dir) => (
+                    <div class="flex items-center gap-2 w-full">
+                      <Icon name="folder" class="text-text-weak shrink-0" size="small" />
+                      <span class="text-12-regular text-text-base truncate">{dir.path.replace(homedir(), "~")}</span>
+                    </div>
+                  )}
+                </List>
                 <Show when={platform.openDirectoryPickerDialog}>
-                  <Button type="button" variant="secondary" onClick={handleBrowseCreateParent}>
-                    <Icon name="folder" />
-                    Browse
+                  <Button type="button" variant="ghost" size="small" onClick={handleBrowseCreateParent} class="justify-start">
+                    <Icon name="folder" size="small" />
+                    Browse filesystem...
                   </Button>
                 </Show>
-              </div>
+              </Show>
             </div>
 
             {/* Project name */}
@@ -525,7 +543,7 @@ export const DialogCreateProject: Component = () => {
 
         {/* Git Clone tab content */}
         <Show when={activeTab() === "clone"}>
-          <form onSubmit={handleCloneSubmit} class="flex flex-col gap-4">
+          <form onSubmit={handleCloneSubmit} class="flex flex-col gap-4 flex-1 min-h-0">
             <div class="text-14-regular text-text-base">
               Clone a git repository into a new project folder.
             </div>
@@ -541,25 +559,50 @@ export const DialogCreateProject: Component = () => {
               onChange={(value) => setStore("cloneRepoUrl", value)}
             />
 
-            {/* Parent directory picker */}
-            <div class="flex flex-col gap-2">
+            {/* Parent directory browser */}
+            <div class="flex flex-col gap-2 flex-1 min-h-0">
               <label class="text-14-medium text-text-strong">Parent directory</label>
-              <div class="flex gap-2">
-                <TextField
-                  class="flex-1"
-                  type="text"
-                  placeholder="~/projects"
-                  name="cloneParentDir"
-                  value={store.cloneParentDir}
-                  onChange={(value) => setStore("cloneParentDir", value)}
-                />
+              <Show when={store.cloneParentDir}>
+                <div class="flex items-center gap-2 bg-surface-base px-3 py-2 rounded">
+                  <Icon name="folder" class="text-text-weak shrink-0" />
+                  <span class="text-14-regular text-text-base truncate flex-1">
+                    {store.cloneParentDir.replace(homedir(), "~")}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="small"
+                    onClick={() => setStore("cloneParentDir", "")}
+                    class="shrink-0"
+                  >
+                    <Icon name="close" />
+                  </Button>
+                </div>
+              </Show>
+              <Show when={!store.cloneParentDir}>
+                <List<DirectoryInfo>
+                  class="flex-1 min-h-0 max-h-40 [&_[data-slot=list-item]]:h-auto [&_[data-slot=list-item]]:py-1"
+                  items={fetchDirectories}
+                  key={(dir) => dir.path}
+                  filterKeys={["name", "path"]}
+                  onSelect={(dir) => dir && setStore("cloneParentDir", dir.path)}
+                  search={{ placeholder: "Search folders..." }}
+                  emptyMessage="No folders found"
+                >
+                  {(dir) => (
+                    <div class="flex items-center gap-2 w-full">
+                      <Icon name="folder" class="text-text-weak shrink-0" size="small" />
+                      <span class="text-12-regular text-text-base truncate">{dir.path.replace(homedir(), "~")}</span>
+                    </div>
+                  )}
+                </List>
                 <Show when={platform.openDirectoryPickerDialog}>
-                  <Button type="button" variant="secondary" onClick={handleBrowseCloneParent}>
-                    <Icon name="folder" />
-                    Browse
+                  <Button type="button" variant="ghost" size="small" onClick={handleBrowseCloneParent} class="justify-start">
+                    <Icon name="folder" size="small" />
+                    Browse filesystem...
                   </Button>
                 </Show>
-              </div>
+              </Show>
             </div>
 
             {/* Project name (optional, derived from repo) */}

From 7e1fc02edabe7dd5692a49d7927be95a43dd082d Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 18:15:35 -0800
Subject: [PATCH 55/60] docs: add plan for custom server URL settings feature

---
 ...3-custom-server-url-settings-2025-12-28.md | 487 ++++++++++++++++++
 1 file changed, 487 insertions(+)
 create mode 100644 CONTEXT/PLAN-213-custom-server-url-settings-2025-12-28.md

diff --git a/CONTEXT/PLAN-213-custom-server-url-settings-2025-12-28.md b/CONTEXT/PLAN-213-custom-server-url-settings-2025-12-28.md
new file mode 100644
index 00000000000..6213d5127df
--- /dev/null
+++ b/CONTEXT/PLAN-213-custom-server-url-settings-2025-12-28.md
@@ -0,0 +1,487 @@
+# Plan: Custom Server URL Settings
+
+## Plan Overview
+
+Add custom server URL configuration to the web/desktop app while preserving our existing sophisticated URL resolution logic. This feature allows users to manually override the server URL via query parameter or a settings dialog, with localStorage persistence.
+
+**Approach**: Instead of merging upstream PR #6312 directly, we implement the feature natively using our existing patterns and architecture.
+
+## Issue Context
+
+- **Upstream Reference**: https://github.com/sst/opencode/pull/6312 (for feature inspiration only)
+- **Goal**: Allow custom server URLs when OpenCode is served on non-standard paths (e.g., `https://domain.com/workspace/1`)
+- **Key Use Case**: Connect `desktop.shuv.ai` (Cloudflare Pages hosted) to a local OpenCode server via `?url=http://localhost:4096`
+- **Constraint**: Must preserve our fork's richer URL resolution (HTTPS detection, shuv.ai host, same-origin rules, web command logic)
+
+## Decisions & Rationale
+
+| Decision | Rationale |
+|----------|-----------|
+| **Use dialog instead of separate route** | Fits our existing dialog patterns (DialogSelectProvider, DialogCreateProject). Avoids routing complexity with `/:dir` pattern. |
+| **Module-level localStorage read** | URL must be resolved before React/Solid renders. Cannot use `persisted()` hook at module level. |
+| **Shared localStorage keys** | Module-level and component-level code share keys for consistency. |
+| **Page reload on URL change** | SDK is initialized once with URL. Changing URL requires full reload to reinitialize. |
+| **URL validation before storage** | Prevent storing malformed URLs that would break the app. |
+| **Keep existing fallback chain** | Our HTTPS/same-origin/known-host logic handles reverse proxies correctly. |
+
+## URL Resolution Priority (New)
+
+```
+1. ?url= query parameter     → Use and persist to localStorage
+2. localStorage stored URL   → Use if present (NEW)
+3. Tauri injected port       → Desktop app with local server
+4. Same-origin mode          → HTTPS, known hosts, web command
+5. Host:port fallback        → Dev mode explicit server
+```
+
+**Same-origin triggers** (preserved from current logic):
+- `location.protocol === "https:"` (avoid mixed content)
+- Hostname includes `opencode.ai` or `shuv.ai`
+- Hostname ends with `.local`
+- Loopback in non-dev mode
+- Web command mode (`!import.meta.env.DEV`)
+
+## Technical Specifications
+
+### LocalStorage Configuration
+
+| Key | Type | Default | Purpose |
+|-----|------|---------|---------|
+| `opencode:server-url` | `string \| null` | `null` | Current active server URL override |
+| `opencode:server-url-history` | `string[]` (JSON) | `[]` | Last 5 unique URLs for quick selection |
+
+**Note**: Using `opencode:` prefix to namespace our keys, following pattern similar to `layout.v3`.
+
+### URL Validation
+
+```typescript
+function isValidServerUrl(url: string): boolean {
+  if (!url || !url.trim()) return false
+  try {
+    const parsed = new URL(url)
+    return ['http:', 'https:'].includes(parsed.protocol)
+  } catch {
+    return false
+  }
+}
+```
+
+### Mixed Content Detection
+
+When the app is served over HTTPS (e.g., `desktop.shuv.ai`), browsers block HTTP API requests to non-localhost origins. We detect this and warn users in the dialog.
+
+```typescript
+/**
+ * Check if setting this URL would cause mixed content issues.
+ * Returns true if:
+ * - Current page is HTTPS, AND
+ * - Target URL is HTTP, AND
+ * - Target is NOT localhost/127.0.0.1 (browsers allow this exception)
+ */
+function hasMixedContentRisk(targetUrl: string): boolean {
+  if (location.protocol !== 'https:') return false
+  
+  try {
+    const parsed = new URL(targetUrl)
+    if (parsed.protocol !== 'http:') return false
+    
+    // Localhost is allowed even from HTTPS (secure context exception)
+    const isLocalhost = ['localhost', '127.0.0.1', '[::1]'].includes(parsed.hostname)
+    return !isLocalhost
+  } catch {
+    return false
+  }
+}
+```
+
+**Allowed from HTTPS pages**:
+| Target URL | Allowed | Reason |
+|------------|---------|--------|
+| `http://localhost:4096` | Yes | Localhost exception |
+| `http://127.0.0.1:4096` | Yes | Loopback exception |
+| `https://my-server.com` | Yes | HTTPS to HTTPS |
+| `http://192.168.1.100:4096` | No | Mixed content blocked |
+| `http://my-server.com` | No | Mixed content blocked |
+
+### History Management
+
+- Max 5 entries, most recent first
+- Deduplicate by normalized URL (lowercase, trailing slash stripped)
+- Add to history on successful URL set (query param or dialog)
+
+```typescript
+function normalizeUrl(url: string): string {
+  return url.toLowerCase().replace(/\/+$/, '')
+}
+```
+
+## Affected Files
+
+| File | Change Type | Description |
+|------|-------------|-------------|
+| `packages/app/src/app.tsx` | Modify | Add localStorage read/write in URL resolution |
+| `packages/app/src/lib/server-url.ts` | **New** | Shared URL utilities (validation, history, constants) |
+| `packages/app/src/components/dialog-server-settings.tsx` | **New** | Server settings dialog component |
+| `packages/app/src/pages/layout.tsx` | Modify | Add sidebar button to open dialog |
+| `packages/app/src/pages/error.tsx` | Modify | Add reset button for connection errors |
+| `packages/app/src/context/command.tsx` | Modify | Add command palette entry (optional) |
+
+## Implementation Plan
+
+### Milestone 1: Server URL Utilities
+
+Create `packages/app/src/lib/server-url.ts` with shared logic:
+
+```typescript
+// Constants
+export const SERVER_URL_KEY = "opencode:server-url"
+export const SERVER_URL_HISTORY_KEY = "opencode:server-url-history"
+export const MAX_HISTORY = 5
+
+// Validation
+export function isValidServerUrl(url: string): boolean
+
+// Mixed content detection
+export function hasMixedContentRisk(targetUrl: string): boolean
+
+// Normalization  
+export function normalizeUrl(url: string): string
+
+// History management
+export function getServerUrlHistory(): string[]
+export function addToServerUrlHistory(url: string): void
+export function clearServerUrlHistory(): void
+
+// Current URL management
+export function getStoredServerUrl(): string | null
+export function setStoredServerUrl(url: string): void
+export function clearStoredServerUrl(): void
+```
+
+**Tasks**:
+- [x] Create `packages/app/src/lib/server-url.ts`
+- [x] Implement URL validation with protocol check
+- [x] Implement mixed content risk detection
+- [x] Implement history load/save with max limit
+- [x] Implement URL normalization for deduplication
+- [x] Export all utilities
+
+### Milestone 2: App URL Resolution Integration
+
+Modify `packages/app/src/app.tsx` to integrate localStorage:
+
+**Current code (lines 31-68)**:
+```typescript
+const host = import.meta.env.VITE_OPENCODE_SERVER_HOST || ...
+const port = window.__OPENCODE__?.port ?? ...
+// ... same-origin logic ...
+const url = new URLSearchParams(document.location.search).get("url") || ...
+```
+
+**New code**:
+```typescript
+import { iife } from "@opencode-ai/util/iife"
+import { 
+  getStoredServerUrl, 
+  setStoredServerUrl, 
+  isValidServerUrl,
+  addToServerUrlHistory,
+  SERVER_URL_KEY 
+} from "@/lib/server-url"
+
+const url = iife(() => {
+  // 1. Query parameter (highest priority) - persist if valid
+  const queryUrl = new URLSearchParams(document.location.search).get("url")
+  if (queryUrl && isValidServerUrl(queryUrl)) {
+    setStoredServerUrl(queryUrl)
+    addToServerUrlHistory(queryUrl)
+    return queryUrl
+  }
+
+  // 2. Stored URL override
+  const storedUrl = getStoredServerUrl()
+  if (storedUrl) return storedUrl
+
+  // 3-5. Existing logic (preserved exactly)
+  const host = import.meta.env.VITE_OPENCODE_SERVER_HOST || location.hostname || "127.0.0.1"
+  const port = window.__OPENCODE__?.port ?? import.meta.env.VITE_OPENCODE_SERVER_PORT ?? location.port ?? "4096"
+
+  const isSecure = location.protocol === "https:"
+  const isKnownHost = location.hostname.includes("opencode.ai") ||
+                      location.hostname.includes("shuv.ai") ||
+                      location.hostname.endsWith(".local")
+  const isLoopback = ["localhost", "127.0.0.1", "0.0.0.0"].includes(location.hostname)
+  const isWebCommand = !import.meta.env.DEV
+  const useSameOrigin = isSecure || isKnownHost || (isLoopback && !import.meta.env.DEV) || isWebCommand
+
+  // 3. Tauri desktop
+  if (window.__OPENCODE__?.port) {
+    return `http://${host}:${window.__OPENCODE__.port}`
+  }
+
+  // 4. Same-origin mode
+  if (useSameOrigin) {
+    return "/"
+  }
+
+  // 5. Explicit host:port (dev mode)
+  return `http://${host}:${port}`
+})
+```
+
+**Tasks**:
+- [x] Add `iife` import from `@opencode-ai/util/iife`
+- [x] Add imports from `@/lib/server-url`
+- [x] Wrap URL resolution in `iife()` for cleaner structure
+- [x] Add query param persistence with validation
+- [x] Add localStorage read after query param check
+- [x] Preserve all existing same-origin/Tauri/fallback logic
+
+### Milestone 3: Server Settings Dialog
+
+Create `packages/app/src/components/dialog-server-settings.tsx`:
+
+**Features**:
+- Display current effective URL (computed or stored)
+- Input field for custom URL with validation
+- **Mixed content warning** when setting HTTP URL from HTTPS page (except localhost)
+- "Apply" button that saves and reloads
+- History list for quick selection (last 5)
+- "Clear" button to remove override and reload
+- Visual indicator if using stored vs computed URL
+
+**UI Structure**:
+```
+┌─────────────────────────────────────────┐
+│ Server Settings                      [X]│
+├─────────────────────────────────────────┤
+│ Current server URL                      │
+│ ┌─────────────────────────────────────┐ │
+│ │ https://custom-server.com        ✓  │ │  (green check = stored override)
+│ └─────────────────────────────────────┘ │  (gray = computed default)
+│                                         │
+│ Set custom URL                          │
+│ ┌───────────────────────────────┐ ┌───┐ │
+│ │ http://192.168.1.5:4096       │ │Set│ │
+│ └───────────────────────────────┘ └───┘ │
+│ ⚠ This HTTP URL will be blocked by     │  <- Warning shown conditionally
+│   your browser (mixed content). Use     │
+│   localhost or HTTPS instead.           │
+│                                         │
+│ Recent URLs                             │
+│ ┌─────────────────────────────────────┐ │
+│ │ https://server-1.com                │ │
+│ │ http://localhost:4096           ✓   │ │  (checkmark = safe)
+│ └─────────────────────────────────────┘ │
+│                                         │
+│ [Clear override]                        │
+└─────────────────────────────────────────┘
+```
+
+**Mixed Content Warning Logic**:
+```typescript
+import { hasMixedContentRisk } from "@/lib/server-url"
+
+// In component:
+const showMixedContentWarning = () => hasMixedContentRisk(inputUrl())
+
+// In JSX:
+<Show when={showMixedContentWarning()}>
+  <div class="flex items-start gap-2 p-2 rounded bg-surface-warning-subtle text-text-warning-base text-12-regular">
+    <Icon name="warning" size="small" class="shrink-0 mt-0.5" />
+    <span>
+      This HTTP URL will be blocked by your browser (mixed content). 
+      Use <code class="font-mono">localhost</code> or an HTTPS URL instead.
+    </span>
+  </div>
+</Show>
+```
+
+**Tasks**:
+- [x] Create `packages/app/src/components/dialog-server-settings.tsx`
+- [x] Add current URL display with override indicator
+- [x] Add input field with real-time validation
+- [x] Add mixed content warning (shown when `hasMixedContentRisk()` returns true)
+- [x] Add "Set" button with `showToast` feedback and reload
+- [x] Add history list from localStorage
+- [x] Add "Clear override" button
+- [x] Style consistent with existing dialogs (DialogSelectProvider pattern)
+
+### Milestone 4: Sidebar Integration
+
+Modify `packages/app/src/pages/layout.tsx` to add dialog trigger:
+
+**Location**: After "Create project" button (around line 1158), before "Share feedback"
+
+```typescript
+import { DialogServerSettings } from "@/components/dialog-server-settings"
+
+// In sidebar actions section:
+<Tooltip placement="right" value="Server settings" inactive={layout.sidebar.opened()}>
+  <Button
+    class="flex w-full text-left justify-start text-text-base stroke-[1.5px] rounded-lg px-2"
+    variant="ghost"
+    size="large"
+    icon="settings-gear"
+    onClick={() => dialog.show(() => <DialogServerSettings />)}
+  >
+    <Show when={layout.sidebar.opened()}>Server settings</Show>
+  </Button>
+</Tooltip>
+```
+
+**Tasks**:
+- [x] Import `DialogServerSettings` component
+- [x] Add sidebar button after "Create project" (line ~1158)
+- [x] Use `dialog.show()` pattern consistent with other dialogs
+- [x] Use `settings-gear` icon (or `server` if available)
+
+### Milestone 5: Error Page Recovery
+
+Modify `packages/app/src/pages/error.tsx` to add reset option:
+
+**Connection error detection**:
+```typescript
+function isConnectionError(error: unknown): boolean {
+  const message = formatError(error).toLowerCase()
+  return message.includes("could not connect") ||
+         message.includes("econnrefused") ||
+         message.includes("fetch failed") ||
+         message.includes("network error")
+}
+```
+
+**Add reset button** (only shown for connection errors when override is set):
+```typescript
+import { getStoredServerUrl, clearStoredServerUrl } from "@/lib/server-url"
+
+// In ErrorPage component:
+const hasServerOverride = () => !!getStoredServerUrl()
+
+function resetServerUrl() {
+  clearStoredServerUrl()
+  platform.restart()
+}
+
+// In JSX, after Restart button:
+<Show when={isConnectionError(props.error) && hasServerOverride()}>
+  <Button size="large" variant="ghost" onClick={resetServerUrl}>
+    Reset server URL
+  </Button>
+  <p class="text-xs text-text-weak">
+    Using custom server URL. Reset to use default.
+  </p>
+</Show>
+```
+
+**Tasks**:
+- [x] Import server URL utilities
+- [x] Add `isConnectionError` helper function
+- [x] Add `hasServerOverride` check
+- [x] Add conditional reset button
+- [x] Add explanatory text for users
+
+### Milestone 6: Command Palette Entry (Optional)
+
+Add command to open server settings:
+
+```typescript
+// In layout.tsx command.register():
+{
+  id: "settings.server",
+  title: "Server settings",
+  category: "Settings",
+  onSelect: () => dialog.show(() => <DialogServerSettings />),
+}
+```
+
+**Tasks**:
+- [x] Add command registration in layout.tsx
+- [ ] Test command palette search
+
+## Step-by-Step Implementation Order
+
+1. [x] Create `packages/app/src/lib/server-url.ts` with all utilities
+2. [x] Modify `packages/app/src/app.tsx` to use new URL resolution
+3. [x] Create `packages/app/src/components/dialog-server-settings.tsx`
+4. [x] Add sidebar button in `packages/app/src/pages/layout.tsx`
+5. [x] Add error recovery in `packages/app/src/pages/error.tsx`
+6. [x] (Optional) Add command palette entry
+7. [ ] Manual testing of all scenarios
+8. [x] Run `bun typecheck` in packages/app
+
+## Validation Criteria
+
+### Functional Tests (Manual)
+
+- [ ] **Default behavior preserved**: Without stored URL, app uses existing resolution logic
+- [ ] **Query param override**: `/?url=http://localhost:5000` sets and persists URL
+- [ ] **Query param validation**: Invalid URLs (e.g., `/?url=not-a-url`) are ignored
+- [ ] **Stored URL used**: After setting via query/dialog, reload uses stored URL
+- [ ] **Dialog set URL**: Setting URL via dialog shows toast and reloads
+- [ ] **Dialog clear URL**: Clearing override reloads with default resolution
+- [ ] **History tracking**: Last 5 URLs appear in dialog
+- [ ] **History deduplication**: Same URL doesn't appear twice
+- [ ] **Error recovery**: Connection error shows reset button when override set
+- [ ] **HTTPS preserved**: On HTTPS host, same-origin still works without override
+- [ ] **Tauri preserved**: Desktop app with `__OPENCODE__.port` still works
+- [ ] **shuv.ai preserved**: Known host detection still triggers same-origin
+
+### Mixed Content Warning Tests (on desktop.shuv.ai or any HTTPS host)
+
+- [ ] **No warning for localhost**: Entering `http://localhost:4096` shows NO warning
+- [ ] **No warning for 127.0.0.1**: Entering `http://127.0.0.1:4096` shows NO warning
+- [ ] **No warning for HTTPS**: Entering `https://my-server.com` shows NO warning
+- [ ] **Warning for HTTP LAN IP**: Entering `http://192.168.1.100:4096` shows warning
+- [ ] **Warning for HTTP domain**: Entering `http://my-server.com` shows warning
+- [ ] **No warning on HTTP page**: When app is served over HTTP, no warnings shown
+
+### Build Verification
+
+- [x] `bun typecheck` passes in packages/app
+- [ ] `bun build` succeeds
+- [ ] No console errors on load
+
+## Risks & Mitigations
+
+| Risk | Impact | Mitigation |
+|------|--------|------------|
+| Regression in URL resolution | High | Preserve existing logic exactly; only add localStorage read before it |
+| Invalid URL breaks app | High | Validate URLs before storage; provide reset mechanism |
+| Mixed content on HTTPS | Medium | Validate protocol; warn if setting HTTP URL on HTTPS page |
+| Reload loop if bad URL | Medium | Error page reset button; clear localStorage in devtools docs |
+| History grows unbounded | Low | Cap at 5 entries; oldest removed automatically |
+
+## Security Considerations
+
+1. **XSS via URL parameter**: URLs are used as SDK base URL, not rendered as HTML. Low risk.
+2. **Open redirect**: Not applicable - URL is for API calls, not navigation.
+3. **Mixed content**: 
+   - Browser blocks HTTP API calls from HTTPS pages (except localhost)
+   - Dialog shows warning when user enters a risky URL
+   - URL is still saved (user may know what they're doing), but warning educates
+   - `localhost` and `127.0.0.1` are exempt (browser secure context exception)
+4. **localStorage access**: Standard browser storage, no sensitive data stored.
+
+## Future Enhancements (Out of Scope)
+
+- URL connection test before saving (ping endpoint)
+- Multiple server profiles with names
+- Import/export settings
+- Sync settings across devices
+
+## File Structure After Implementation
+
+```
+packages/app/src/
+├── lib/
+│   └── server-url.ts          # NEW - URL utilities
+├── components/
+│   ├── dialog-server-settings.tsx  # NEW - Settings dialog
+│   └── ...existing...
+├── pages/
+│   ├── layout.tsx             # MODIFIED - sidebar button
+│   ├── error.tsx              # MODIFIED - reset button
+│   └── ...existing...
+└── app.tsx                    # MODIFIED - URL resolution
+```

From 9c62baaec0b099ae8f28e51b87826b81e2507aec Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 18:15:48 -0800
Subject: [PATCH 56/60] docs: add plan for issues 210, 211, 212

---
 ...PLAN-210-211-212-open-issues-2025-12-28.md | 172 ++++++++++++++++++
 1 file changed, 172 insertions(+)
 create mode 100644 CONTEXT/PLAN-210-211-212-open-issues-2025-12-28.md

diff --git a/CONTEXT/PLAN-210-211-212-open-issues-2025-12-28.md b/CONTEXT/PLAN-210-211-212-open-issues-2025-12-28.md
new file mode 100644
index 00000000000..cefc97247b6
--- /dev/null
+++ b/CONTEXT/PLAN-210-211-212-open-issues-2025-12-28.md
@@ -0,0 +1,172 @@
+# Project Plan: Resolve Open Issues 210, 211, 212 (2025-12-28)
+
+## Scope Overview
+This plan addresses three open issues in Latitudes-Dev/shuvcode:
+- #210: Local dev mode skips installing .opencode tool dependencies
+- #211: Add directory picker + name field to Create New project flow
+- #212: Archived sessions reappear due to client-side filtering gaps and unused pipe() result
+
+## Context & Decisions Captured
+### Issue 210: .opencode tool dependencies not installed in local dev
+- Root cause: `installDependencies()` in `packages/opencode/src/config/config.ts` returns early when `Installation.isLocal()` is true, so `@opencode-ai/plugin` is not installed for `.opencode/tool` in `bun dev`.
+- Production builds do install dependencies; local dev skips them, causing import errors in tool registry loading.
+- Acceptance criteria from issue:
+  - Custom tools in `.opencode/tool/` load without errors when running `bun dev`.
+  - Fix must not break production builds.
+  - Dependencies should install for local dev without conflicting with global config.
+  - Backward compatible with existing `.opencode` configs.
+- Options explicitly discussed in issue:
+  - A) Remove local early return (simple; may cause repeated installs).
+  - B) Add docs/setup script (manual, not automatic).
+  - C) Bundle dependencies during local dev (extend plugin bundling pattern).
+  - D) Install on first tool load failure and retry.
+- Decision: Align with upstream by implementing Option A (remove local early return) with a per-directory, concurrency-safe guard to avoid repeated installs while keeping behavior consistent.
+- Guard definition (required):
+  - Use a deterministic marker file in each config dir (e.g., `.opencode/.deps-installed.json`) storing the installed version and timestamp.
+  - Skip install when marker matches the expected version (`Installation.BASE_VERSION` for non-local, `latest` for local).
+  - Serialize installs per directory to avoid concurrent `bun add` calls.
+
+### Issue 211: Add directory picker + name field to Create New flow
+- Current UI in `packages/app/src/components/dialog-create-project.tsx` has two tabs: Add Existing and Create New. Create New uses a single absolute path field and optional repo URL.
+- Desired behavior:
+  - Three distinct flows: Add Existing, Create New, Git Clone.
+  - Create New: pick parent directory + enter project name; show resolved path with validation; creates new folder.
+  - Git Clone: repo URL + target folder picker; derive folder name from repo if blank; optional degit.
+  - Add Existing stays unchanged.
+- API integration: `project.create` endpoint in `packages/opencode/src/server/project.ts` and `packages/opencode/src/project/project.ts` accepts `path`, optional `repo`, optional `degit`, optional `name`.
+- Critical semantic clarification:
+  - The server does NOT build the directory path from `name`; it only uses `path` to create folders.
+  - The client must construct the absolute `path` (parent + folder name) before calling `project.create`.
+  - The `name` field is metadata only (display name) and must not be relied on for path composition.
+- Platform constraints:
+  - `openDirectoryPickerDialog` is Tauri-only; web must use manual path input.
+  - The UI must gate picker usage on availability and keep a text input fallback.
+
+### Issue 212: Archived sessions reappear
+- Root causes:
+  - Client-side: `packages/app/src/context/sync.tsx` lacks archived filtering during initial session load and pagination fetch.
+  - Server-side: `packages/opencode/src/server/server.ts` calls `pipe(...)` but discards its result, returning unfiltered sessions.
+- Upstream works due to `global-sync.tsx` filtering; fork uses `sync.tsx` without filtering.
+- Acceptance criteria:
+  - Filter archived sessions in `sync.tsx` initial load and fetch.
+  - Fix server endpoint to return filtered sessions.
+  - Avoid duplicated listing and preserve intended sort order.
+
+## Code References (Internal)
+- Issue 210:
+  - `packages/opencode/src/config/config.ts`
+  - `packages/opencode/src/tool/registry.ts`
+  - `packages/opencode/src/plugin/index.ts`
+  - `packages/opencode/src/installation/index.ts`
+- Issue 211:
+  - `packages/app/src/components/dialog-create-project.tsx`
+  - `packages/opencode/src/server/project.ts`
+  - `packages/opencode/src/project/project.ts`
+  - `packages/app/src/context/platform.tsx` (for `openDirectoryPickerDialog` usage)
+- Issue 212:
+  - `packages/app/src/context/sync.tsx`
+  - `packages/opencode/src/server/server.ts`
+  - `packages/app/src/context/global-sync.tsx` (existing filtering behavior)
+
+## External References (Git URLs)
+- Directory picker usage example (React/Web File System Access API):
+  - https://github.com/dinoosauro/easy-backup/blob/a20006f442103b52521419255fe20331760b6d2e/src/App.tsx
+- Cross-runtime directory picker abstraction:
+  - https://github.com/ayonli/jsext/blob/ccf374f99a190ad497b5cec974ea20badbe1c8de/dialog/file.ts
+
+## Technical Specifications
+### API Endpoints
+- `GET /project/browse` (browse directories)
+- `POST /project` (`project.create`)
+- `GET /session` (`session.list`)
+
+### Data Models
+- `Project.Create` request fields (from `Project.create.schema`):
+  - `path: string` (absolute, required, client-composed from parent + folder name)
+  - `name?: string` (display name only)
+  - `repo?: string`
+  - `degit?: boolean`
+- `Project.CreateResult`:
+  - `project: Project.Info`
+  - `created: boolean`
+- `Session.Info` includes `time.archived?: number` (used for filtering)
+
+### Configuration & Flags
+| Item | Location | Purpose | Notes |
+| --- | --- | --- | --- |
+| `Installation.isLocal()` | `packages/opencode/src/installation/index.ts` | Detect local dev channel | `OPENCODE_CHANNEL === "local"` |
+| `installDependencies()` | `packages/opencode/src/config/config.ts` | Adds `@opencode-ai/plugin` | Needs per-dir guard and concurrency control |
+
+## Milestones & Implementation Order
+### Milestone 1: Fix archived session filtering (Issue 212)
+- Rationale: Small, isolated change with clear acceptance criteria; reduces user-facing bug quickly.
+
+### Milestone 2: Update Add Project modal flows (Issue 211)
+- Rationale: Larger UI change with dependencies on picker behavior and validation; benefits from stable session list behavior.
+
+### Milestone 3: Fix local tool dependency install (Issue 210)
+- Rationale: Dev workflow improvement; can be implemented after UI work without impacting feature logic.
+
+## Detailed Task Breakdown
+### Issue 212: Archived sessions filtering
+- [x] Add `.filter((s) => !s.time.archived)` to initial session load in `packages/app/src/context/sync.tsx`.
+- [x] Add `.filter((s) => !s.time.archived)` to `fetch` in `packages/app/src/context/sync.tsx`.
+- [x] Fix server-side filtering to return filtered sessions by assigning `pipe(...)` result to `sessions` in `packages/opencode/src/server/server.ts`.
+- [x] Remove duplicate `Session.list()` call and preserve intended sort order (use the filtered list).
+- [x] Add/adjust tests in `packages/opencode/test/` to ensure archived sessions are excluded from list responses.
+- [x] Validate UI list no longer shows archived sessions when reloading or paginating.
+
+### Issue 211: Add Project modal flows
+- [x] Expand tab model to three states: `existing`, `create`, `clone` in `packages/app/src/components/dialog-create-project.tsx`.
+- [x] Extract shared path preview/validation helper for Create New + Git Clone where feasible.
+- [x] Create New flow:
+  - [x] Add parent directory picker using `platform.openDirectoryPickerDialog` when available; otherwise use text input.
+  - [x] Add required project name input.
+  - [x] Compute and display resolved path (`parentDir + projectName`) on the client.
+  - [x] Validate name/path (non-empty; no path separators; no traversal; resolved path absolute) and show inline errors.
+- [x] Git Clone flow:
+  - [x] Add repo URL input.
+  - [x] Add parent directory picker with fallback text input.
+  - [x] Add optional project name; derive from repo URL when empty (no path separators).
+  - [x] Add optional degit toggle.
+  - [x] Show resolved target path before submission.
+- [x] Wire Create New and Git Clone to `globalSDK.client.project.create({ path, repo?, degit?, name? })`.
+  - `path` must be fully composed on the client; `name` is display-only metadata.
+- [x] Ensure Add Existing flow behavior remains unchanged.
+- [x] Add/adjust tests in `packages/opencode/test/` covering `project.create` path composition and validation for create/clone scenarios.
+- [x] Smoke test all three flows: Add Existing, Create New, Git Clone.
+
+### Issue 210: Local dev tool dependency install
+- [x] Modify `installDependencies()` in `packages/opencode/src/config/config.ts` to allow local install with a per-directory guard (align with upstream behavior).
+- [x] Implement a deterministic marker file (e.g., `.opencode/.deps-installed.json`) storing installed version and timestamp; skip when valid.
+- [x] Serialize installs per directory to avoid concurrent `bun add` when multiple config directories load in parallel.
+- [x] Ensure `.opencode/tool` installs do not affect global config.
+- [x] Add/adjust tests in `packages/opencode/test/` to verify tool loading works in local dev mode without manual install.
+  - Avoid network-dependent installs; mock or stub install paths where needed.
+- [x] Update any dev docs if required (only if solution adds a manual step).
+
+## Validation Criteria
+### Functional Validation
+- Issue 212:
+  - Archived sessions never appear in session list after load or fetch.
+  - Server `/session` returns filtered (and sorted) list without duplicate listing.
+- Issue 211:
+  - Create New builds correct path from parent + name and creates directory.
+  - Git Clone derives folder name from repo URL when blank.
+  - Name input rejects path separators and traversal sequences.
+  - Add Existing is unchanged and still works.
+- Issue 210:
+  - Running `bun dev` in repo loads `.opencode/tool` without import errors.
+  - Install guard prevents repeated installs on subsequent config loads.
+  - Production build behavior unaffected.
+
+### Test Execution (Required)
+- [x] Add tests for new/changed behaviors in `packages/opencode/test/`.
+- [x] Run tests before committing:
+  - `bun test` in `packages/opencode` (preferred for targeted tests)
+  - or `bun turbo test` at repo root
+
+## Open Questions / Decisions Needed
+- None. Decisions locked: Issue 210 uses Option A with guard; Issue 211 composes `path` in the client and uses `name` as metadata; Issue 212 includes server-side filtering and removes duplicate listing.
+
+(End of file)

From ab8b0862b798b032b3e52946bbfea19e63ad7090 Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 19:38:42 -0800
Subject: [PATCH 57/60] sync: record last synced tag v1.0.207

---
 .github/last-synced-tag | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/last-synced-tag b/.github/last-synced-tag
index ed64856bbe5..d4c36391866 100644
--- a/.github/last-synced-tag
+++ b/.github/last-synced-tag
@@ -1 +1 @@
-v1.0.204
+v1.0.207

From b1c49516f51151cc3a838d18ef2d922e7aaac8ac Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 21:03:41 -0800
Subject: [PATCH 58/60] feat: clear legacy opencode theme data when applying
 themes

---
 packages/app/src/theme/apply-theme.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/app/src/theme/apply-theme.ts b/packages/app/src/theme/apply-theme.ts
index 1b68d420ec6..27d8fdaf723 100644
--- a/packages/app/src/theme/apply-theme.ts
+++ b/packages/app/src/theme/apply-theme.ts
@@ -37,8 +37,26 @@ export function getThemeById(id: string): Theme {
   return THEMES.find((t) => t.id === normalized) ?? BASE_THEMES[0]
 }
 
+const OPENCODE_THEME_STORAGE_KEYS = [
+  "opencode-theme-id",
+  "opencode-color-scheme",
+  "opencode-theme-css-light",
+  "opencode-theme-css-dark",
+]
+
+function clearOpencodeTheme() {
+  if (typeof document === "undefined") return
+  for (const key of OPENCODE_THEME_STORAGE_KEYS) {
+    localStorage.removeItem(key)
+  }
+  document.getElementById("oc-theme")?.remove()
+  document.getElementById("oc-theme-preload")?.remove()
+  document.documentElement.removeAttribute("data-color-scheme")
+}
+
 export function applyTheme(themeId: string) {
   const theme = getThemeById(themeId)
+  clearOpencodeTheme()
 
   // "opencode" theme uses the default :root styles (no data-theme attribute)
   if (theme.id === "opencode") {

From d2c5e1e3b6d7c9b92a4fc680efe87e3feceb4fd3 Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 21:03:53 -0800
Subject: [PATCH 59/60] feat: clear legacy theme on startup and set nightowl as
 default

---
 packages/app/src/app.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/app.tsx b/packages/app/src/app.tsx
index 2a727142f10..12a28b39587 100644
--- a/packages/app/src/app.tsx
+++ b/packages/app/src/app.tsx
@@ -37,6 +37,22 @@ declare global {
 // 3. Tauri injected port (desktop app with local server)
 // 4. Same-origin mode uses relative "/" to hit the proxy
 // 5. Other cases fall back to explicit host:port (dev mode)
+const OPENCODE_THEME_STORAGE_KEYS = [
+  "opencode-theme-id",
+  "opencode-color-scheme",
+  "opencode-theme-css-light",
+  "opencode-theme-css-dark",
+]
+
+if (typeof window !== "undefined") {
+  for (const key of OPENCODE_THEME_STORAGE_KEYS) {
+    localStorage.removeItem(key)
+  }
+  document.getElementById("oc-theme")?.remove()
+  document.getElementById("oc-theme-preload")?.remove()
+  document.documentElement.removeAttribute("data-color-scheme")
+}
+
 const url = iife(() => {
   // 1. Query parameter (highest priority) - persist if valid
   const queryUrl = new URLSearchParams(document.location.search).get("url")
@@ -95,7 +111,7 @@ export function App() {
   return (
     <MetaProvider>
       <Font />
-      <ThemeProvider>
+      <ThemeProvider defaultTheme="nightowl">
         <ErrorBoundary fallback={(error) => <ErrorPage error={error} />}>
           <DialogProvider>
             <MarkedProvider>

From f5ecb5bf609511da4d2e63a3dfd01b7021a85438 Mon Sep 17 00:00:00 2001
From: shuv <shuv@shuv.dev>
Date: Sun, 28 Dec 2025 21:04:03 -0800
Subject: [PATCH 60/60] feat: add server URL config to error page with
 validation and branding updates

---
 packages/app/src/pages/error.tsx | 77 +++++++++++++++++++++++++++++---
 1 file changed, 70 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/pages/error.tsx b/packages/app/src/pages/error.tsx
index c538dd62fc3..1700df849b3 100644
--- a/packages/app/src/pages/error.tsx
+++ b/packages/app/src/pages/error.tsx
@@ -1,10 +1,17 @@
-import { TextField } from "@opencode-ai/ui/text-field"
-import { Logo } from "@opencode-ai/ui/logo"
+import { AsciiLogo } from "@opencode-ai/ui/logo"
 import { Button } from "@opencode-ai/ui/button"
-import { Component, createMemo, Show } from "solid-js"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Component, createMemo, createSignal, Show } from "solid-js"
 import { usePlatform } from "@/context/platform"
 import { Icon } from "@opencode-ai/ui/icon"
-import { getStoredServerUrl, clearStoredServerUrl } from "@/lib/server-url"
+import {
+  addToServerUrlHistory,
+  clearStoredServerUrl,
+  getStoredServerUrl,
+  hasMixedContentRisk,
+  isValidServerUrl,
+  setStoredServerUrl,
+} from "@/lib/server-url"
 
 export type InitError = {
   name: string
@@ -133,16 +140,39 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
 
   const hasServerOverride = createMemo(() => !!getStoredServerUrl())
   const showResetButton = createMemo(() => isConnectionError(props.error) && hasServerOverride())
+  const showServerConfig = createMemo(() => isConnectionError(props.error))
+  const [serverUrl, setServerUrl] = createSignal(getStoredServerUrl() ?? "")
+  const inputValid = createMemo(() => {
+    const url = serverUrl().trim()
+    return url.length > 0 && isValidServerUrl(url)
+  })
+  const showInvalidUrl = createMemo(() => {
+    const url = serverUrl().trim()
+    return url.length > 0 && !isValidServerUrl(url)
+  })
+  const showMixedContentWarning = createMemo(() => {
+    const url = serverUrl().trim()
+    if (!url) return false
+    return hasMixedContentRisk(url)
+  })
 
   function resetServerUrl() {
     clearStoredServerUrl()
     platform.restart?.() ?? window.location.reload()
   }
 
+  function applyServerUrl() {
+    const url = serverUrl().trim()
+    if (!isValidServerUrl(url)) return
+    setStoredServerUrl(url)
+    addToServerUrlHistory(url)
+    platform.restart?.() ?? window.location.reload()
+  }
+
   return (
     <div class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center bg-background-base font-sans">
       <div class="w-2/3 max-w-3xl flex flex-col items-center justify-center gap-8">
-        <Logo class="w-58.5 opacity-12 shrink-0" />
+        <AsciiLogo scale={1.1} class="opacity-25 shrink-0" />
         <div class="flex flex-col items-center gap-2 text-center">
           <h1 class="text-lg font-medium text-text-strong">Something went wrong</h1>
           <p class="text-sm text-text-weak">An error occurred while loading the application.</p>
@@ -156,6 +186,39 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
           label="Error Details"
           hideLabel
         />
+        <Show when={showServerConfig()}>
+          <div class="flex flex-col gap-3 w-full">
+            <div class="text-xs text-text-weak uppercase tracking-wide text-left">Server</div>
+            <div class="flex w-full gap-2">
+              <TextField
+                value={serverUrl()}
+                onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) => setServerUrl(e.currentTarget.value)}
+                placeholder="http://localhost:4096"
+                class="flex-1 font-mono"
+                onKeyDown={(e: KeyboardEvent) => {
+                  if (e.key === "Enter" && inputValid()) {
+                    applyServerUrl()
+                  }
+                }}
+              />
+              <Button size="large" onClick={applyServerUrl} disabled={!inputValid()}>
+                Set & Restart
+              </Button>
+            </div>
+            <Show when={showInvalidUrl()}>
+              <p class="text-xs text-text-weak text-left">Enter a valid HTTP or HTTPS URL.</p>
+            </Show>
+            <Show when={showMixedContentWarning()}>
+              <div class="flex items-start gap-2 p-2 rounded-md bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 text-xs">
+                <Icon name="circle-ban-sign" size="small" class="shrink-0 mt-0.5" />
+                <span>
+                  This HTTP URL will be blocked by your browser (mixed content). Use{" "}
+                  <code class="font-mono bg-surface-base px-1 rounded">localhost</code> or an HTTPS URL instead.
+                </span>
+              </div>
+            </Show>
+          </div>
+        </Show>
         <div class="flex flex-col items-center gap-3">
           <Button size="large" onClick={platform.restart}>
             Restart
@@ -171,11 +234,11 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
         </div>
         <div class="flex flex-col items-center gap-2">
           <div class="flex items-center justify-center gap-1">
-            Please report this error to the OpenCode team
+            Please report this error to the shuvcode team
             <button
               type="button"
               class="flex items-center text-text-interactive-base gap-1"
-              onClick={() => platform.openLink("https://opencode.ai/desktop-feedback")}
+              onClick={() => platform.openLink("https://shuv.ai")}
             >
               <div>on Discord</div>
               <Icon name="discord" class="text-text-interactive-base" />