release: v0.11.7

Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com>

.github/workflows/snapshot.yml

@@ -0,0 +1,50 @@
+name: snapshot
+
+on:
+  push:
+    branches:
+      - dev
+      - opentui
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - run: git fetch --force --tags
+
+      - uses: actions/setup-go@v5
+        with:
+          go-version: ">=1.24.0"
+          cache: true
+          cache-dependency-path: go.sum
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.2.21
+
+      - name: Cache ~/.bun
+        id: cache-bun
+        uses: actions/cache@v3
+        with:
+          path: ~/.bun
+          key: ${{ runner.os }}-bun-1-2-21-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-1-2-21-
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Publish
+        run: |
+          ./packages/opencode/script/publish.ts
+        env:
+          OPENCODE_SNAPSHOT: true
+          OPENCODE_TAG: ${{ github.ref_name }}
+          GITHUB_TOKEN: ${{ secrets.SST_GITHUB_TOKEN }}
+          NPM_CONFIG_TOKEN: ${{ secrets.NPM_TOKEN }}

.husky/pre-push

@@ -0,0 +1,3 @@
+#!/bin/sh
+bun prettier --write --ignore-unknown $(git diff --name-only HEAD~1 HEAD)
+bun run typecheck

.opencode/tool/foo.ts

@@ -1,11 +0,0 @@
-import { tool } from "@opencode-ai/plugin"
-
-export default tool({
-  description: "call this tool when you want to give up",
-  args: {
-    message: tool.schema.string().describe("give up message"),
-  },
-  async execute(args) {
-    return "Hey fuck you!"
-  },
-})

STATS.md

@@ -85,3 +85,8 @@
 | 2025-09-18 | 358,717 (+7,600) | 266,922 (+5,952) | 625,639 (+13,552) |
 | 2025-09-19 | 365,401 (+6,684) | 271,859 (+4,937) | 637,260 (+11,621) |
 | 2025-09-20 | 372,092 (+6,691) | 276,917 (+5,058) | 649,009 (+11,749) |
+| 2025-09-21 | 377,079 (+4,987) | 280,261 (+3,344) | 657,340 (+8,331)  |
+| 2025-09-22 | 382,492 (+5,413) | 284,009 (+3,748) | 666,501 (+9,161)  |
+| 2025-09-23 | 387,008 (+4,516) | 289,129 (+5,120) | 676,137 (+9,636)  |
+| 2025-09-24 | 393,325 (+6,317) | 294,927 (+5,798) | 688,252 (+12,115) |
+| 2025-09-25 | 398,879 (+5,554) | 301,663 (+6,736) | 700,542 (+12,290) |

infra/console.ts

@@ -75,6 +75,7 @@ export const stripeWebhook = new WebhookEndpoint("StripeWebhookEndpoint", {
     "checkout.session.async_payment_succeeded",
     "checkout.session.completed",
     "checkout.session.expired",
+    "charge.refunded",
     "customer.created",
     "customer.deleted",
     "customer.updated",
@@ -93,9 +94,6 @@ export const stripeWebhook = new WebhookEndpoint("StripeWebhookEndpoint", {
     "customer.subscription.resumed",
     "customer.subscription.trial_will_end",
     "customer.subscription.updated",
-    "customer.tax_id.created",
-    "customer.tax_id.deleted",
-    "customer.tax_id.updated",
   ],
 })
 

install

@@ -46,7 +46,7 @@ mkdir -p "$INSTALL_DIR"
 
 if [ -z "$requested_version" ]; then
     url="https://github.com/sst/opencode/releases/latest/download/$filename"
-    specific_version=$(curl -s https://api.github.com/repos/sst/opencode/releases/latest | awk -F'"' '/"tag_name": "/ {gsub(/^v/, "", $4); print $4}')
+    specific_version=$(curl -s https://api.github.com/repos/sst/opencode/releases/latest | sed -n 's/.*"tag_name": *"v\([^"]*\)".*/\1/p')
 
     if [[ $? -ne 0 || -z "$specific_version" ]]; then
         echo -e "${RED}Failed to fetch version information${NC}"

package.json

@@ -7,8 +7,7 @@
   "scripts": {
     "dev": "bun run --conditions=development packages/opencode/src/index.ts",
     "typecheck": "bun turbo typecheck",
-    "generate": "(cd packages/sdk && ./js/script/generate.ts) && (cd packages/sdk/stainless && ./generate.ts)",
-    "postinstall": "./script/hooks"
+    "prepare": "husky"
   },
   "workspaces": {
     "packages": [
@@ -31,10 +30,8 @@
       "solid-js": "1.9.9"
     }
   },
-  "dependencies": {
-    "pulumi-stripe": "0.0.24"
-  },
   "devDependencies": {
+    "husky": "9.1.7",
     "prettier": "3.6.2",
     "sst": "3.17.13",
     "turbo": "2.5.6"

packages/app/.gitignore

@@ -0,0 +1 @@
+src/assets/theme.css

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/app",
-  "version": "0.10.4",
+  "version": "0.11.7",
   "description": "",
   "type": "module",
   "scripts": {
@@ -24,6 +24,7 @@
     "@kobalte/core": "0.13.11",
     "@opencode-ai/sdk": "workspace:*",
     "@shikijs/transformers": "3.9.2",
+    "@solid-primitives/event-bus": "1.1.2",
     "@solid-primitives/resize-observer": "2.1.3",
     "@solid-primitives/scroll": "2.1.3",
     "@solidjs/router": "0.15.3",

packages/app/scripts/vite-theme-plugin.ts

@@ -37,7 +37,7 @@ class ColorResolver {
       if (typeof value === "string") {
         if (value === "none") return { dark: value, light: value }
         if (value.startsWith("#")) {
-          return { dark: value.toUpperCase(), light: value.toUpperCase() }
+          return { dark: value.toLowerCase(), light: value.toLowerCase() }
         }
         const resolved = this.resolveReference(value)
         return { dark: resolved, light: resolved }
@@ -57,7 +57,7 @@ class ColorResolver {
     if (typeof value === "string") {
       if (value === "none") return value
       if (value.startsWith("#")) {
-        return value.toUpperCase()
+        return value.toLowerCase()
       }
       return this.resolveReference(value)
     }
@@ -72,7 +72,7 @@ class ColorResolver {
     if (typeof colorValue === "string") {
       if (colorValue === "none") return colorValue
       if (colorValue.startsWith("#")) {
-        return colorValue.toUpperCase()
+        return colorValue.toLowerCase()
       }
       return this.resolveReference(colorValue)
     }

packages/app/src/components/file-tree.tsx

@@ -18,7 +18,7 @@ export default function FileTree(props: {
     <Dynamic
       component={p.as ?? "div"}
       classList={{
-        "p-0.5 w-full flex items-center gap-x-2 hover:bg-background-panel cursor-pointer": true,
+        "p-0.5 w-full flex items-center gap-x-2 hover:bg-background-element cursor-pointer": true,
         "bg-background-element": local.file.active()?.path === p.node.path,
         [props.nodeClass ?? ""]: !!props.nodeClass,
       }}

packages/app/src/components/markdown.tsx

@@ -1,595 +1,17 @@
-import { transformerNotationDiff } from "@shikijs/transformers"
-import { marked } from "marked"
-import markedShiki from "marked-shiki"
-import { codeToHtml } from "shiki"
+import { useMarked } from "@/context"
 import { createResource } from "solid-js"
 
-const markedWithShiki = marked.use(
-  markedShiki({
-    highlight(code, lang) {
-      return codeToHtml(code, {
-        // structure: "inline",
-        lang: lang || "text",
-        tabindex: false,
-        theme: {
-          colors: {
-            "actionBar.toggledBackground": "var(--theme-background-element)",
-            "activityBarBadge.background": "var(--theme-accent)",
-            "checkbox.border": "var(--theme-border)",
-            "editor.background": "transparent",
-            "editor.foreground": "var(--theme-text)",
-            "editor.inactiveSelectionBackground": "var(--theme-background-element)",
-            "editor.selectionHighlightBackground": "var(--theme-border-active)",
-            "editorIndentGuide.activeBackground1": "var(--theme-border-subtle)",
-            "editorIndentGuide.background1": "var(--theme-border-subtle)",
-            "input.placeholderForeground": "var(--theme-text-muted)",
-            "list.activeSelectionIconForeground": "var(--theme-text)",
-            "list.dropBackground": "var(--theme-background-element)",
-            "menu.background": "var(--theme-background-panel)",
-            "menu.border": "var(--theme-border)",
-            "menu.foreground": "var(--theme-text)",
-            "menu.selectionBackground": "var(--theme-primary)",
-            "menu.separatorBackground": "var(--theme-border)",
-            "ports.iconRunningProcessForeground": "var(--theme-success)",
-            "sideBarSectionHeader.background": "transparent",
-            "sideBarSectionHeader.border": "var(--theme-border-subtle)",
-            "sideBarTitle.foreground": "var(--theme-text-muted)",
-            "statusBarItem.remoteBackground": "var(--theme-success)",
-            "statusBarItem.remoteForeground": "var(--theme-text)",
-            "tab.lastPinnedBorder": "var(--theme-border-subtle)",
-            "tab.selectedBackground": "var(--theme-background-element)",
-            "tab.selectedForeground": "var(--theme-text-muted)",
-            "terminal.inactiveSelectionBackground": "var(--theme-background-element)",
-            "widget.border": "var(--theme-border)",
-          },
-          displayName: "opencode",
-          name: "opencode",
-          semanticHighlighting: true,
-          semanticTokenColors: {
-            customLiteral: "var(--theme-syntax-function)",
-            newOperator: "var(--theme-syntax-operator)",
-            numberLiteral: "var(--theme-syntax-number)",
-            stringLiteral: "var(--theme-syntax-string)",
-          },
-          tokenColors: [
-            {
-              scope: [
-                "meta.embedded",
-                "source.groovy.embedded",
-                "string meta.image.inline.markdown",
-                "variable.legacy.builtin.python",
-              ],
-              settings: {
-                foreground: "var(--theme-text)",
-              },
-            },
-            {
-              scope: "emphasis",
-              settings: {
-                fontStyle: "italic",
-              },
-            },
-            {
-              scope: "strong",
-              settings: {
-                fontStyle: "bold",
-              },
-            },
-            {
-              scope: "header",
-              settings: {
-                foreground: "var(--theme-markdown-heading)",
-              },
-            },
-            {
-              scope: "comment",
-              settings: {
-                foreground: "var(--theme-syntax-comment)",
-              },
-            },
-            {
-              scope: "constant.language",
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: [
-                "constant.numeric",
-                "variable.other.enummember",
-                "keyword.operator.plus.exponent",
-                "keyword.operator.minus.exponent",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-number)",
-              },
-            },
-            {
-              scope: "constant.regexp",
-              settings: {
-                foreground: "var(--theme-syntax-operator)",
-              },
-            },
-            {
-              scope: "entity.name.tag",
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: ["entity.name.tag.css", "entity.name.tag.less"],
-              settings: {
-                foreground: "var(--theme-syntax-operator)",
-              },
-            },
-            {
-              scope: "entity.other.attribute-name",
-              settings: {
-                foreground: "var(--theme-syntax-variable)",
-              },
-            },
-            {
-              scope: [
-                "entity.other.attribute-name.class.css",
-                "source.css entity.other.attribute-name.class",
-                "entity.other.attribute-name.id.css",
-                "entity.other.attribute-name.parent-selector.css",
-                "entity.other.attribute-name.parent.less",
-                "source.css entity.other.attribute-name.pseudo-class",
-                "entity.other.attribute-name.pseudo-element.css",
-                "source.css.less entity.other.attribute-name.id",
-                "entity.other.attribute-name.scss",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-operator)",
-              },
-            },
-            {
-              scope: "invalid",
-              settings: {
-                foreground: "var(--theme-error)",
-              },
-            },
-            {
-              scope: "markup.underline",
-              settings: {
-                fontStyle: "underline",
-              },
-            },
-            {
-              scope: "markup.bold",
-              settings: {
-                fontStyle: "bold",
-                foreground: "var(--theme-markdown-strong)",
-              },
-            },
-            {
-              scope: "markup.heading",
-              settings: {
-                fontStyle: "bold",
-                foreground: "var(--theme-markdown-heading)",
-              },
-            },
-            {
-              scope: "markup.italic",
-              settings: {
-                fontStyle: "italic",
-              },
-            },
-            {
-              scope: "markup.strikethrough",
-              settings: {
-                fontStyle: "strikethrough",
-              },
-            },
-            {
-              scope: "markup.inserted",
-              settings: {
-                foreground: "var(--theme-diff-added)",
-              },
-            },
-            {
-              scope: "markup.deleted",
-              settings: {
-                foreground: "var(--theme-diff-removed)",
-              },
-            },
-            {
-              scope: "markup.changed",
-              settings: {
-                foreground: "var(--theme-diff-context)",
-              },
-            },
-            {
-              scope: "punctuation.definition.quote.begin.markdown",
-              settings: {
-                foreground: "var(--theme-markdown-block-quote)",
-              },
-            },
-            {
-              scope: "punctuation.definition.list.begin.markdown",
-              settings: {
-                foreground: "var(--theme-markdown-list-enumeration)",
-              },
-            },
-            {
-              scope: "markup.inline.raw",
-              settings: {
-                foreground: "var(--theme-markdown-code)",
-              },
-            },
-            {
-              scope: "punctuation.definition.tag",
-              settings: {
-                foreground: "var(--theme-syntax-punctuation)",
-              },
-            },
-            {
-              scope: ["meta.preprocessor", "entity.name.function.preprocessor"],
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: "meta.preprocessor.string",
-              settings: {
-                foreground: "var(--theme-syntax-string)",
-              },
-            },
-            {
-              scope: "meta.preprocessor.numeric",
-              settings: {
-                foreground: "var(--theme-syntax-number)",
-              },
-            },
-            {
-              scope: "meta.structure.dictionary.key.python",
-              settings: {
-                foreground: "var(--theme-syntax-variable)",
-              },
-            },
-            {
-              scope: "meta.diff.header",
-              settings: {
-                foreground: "var(--theme-diff-hunk-header)",
-              },
-            },
-            {
-              scope: "storage",
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: "storage.type",
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: ["storage.modifier", "keyword.operator.noexcept"],
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: ["string", "meta.embedded.assembly"],
-              settings: {
-                foreground: "var(--theme-syntax-string)",
-              },
-            },
-            {
-              scope: "string.tag",
-              settings: {
-                foreground: "var(--theme-syntax-string)",
-              },
-            },
-            {
-              scope: "string.value",
-              settings: {
-                foreground: "var(--theme-syntax-string)",
-              },
-            },
-            {
-              scope: "string.regexp",
-              settings: {
-                foreground: "var(--theme-syntax-operator)",
-              },
-            },
-            {
-              scope: [
-                "punctuation.definition.template-expression.begin",
-                "punctuation.definition.template-expression.end",
-                "punctuation.section.embedded",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: ["meta.template.expression"],
-              settings: {
-                foreground: "var(--theme-text)",
-              },
-            },
-            {
-              scope: [
-                "support.type.vendored.property-name",
-                "support.type.property-name",
-                "source.css variable",
-                "source.coffee.embedded",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-variable)",
-              },
-            },
-            {
-              scope: "keyword",
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: "keyword.control",
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: "keyword.operator",
-              settings: {
-                foreground: "var(--theme-syntax-operator)",
-              },
-            },
-            {
-              scope: [
-                "keyword.operator.new",
-                "keyword.operator.expression",
-                "keyword.operator.cast",
-                "keyword.operator.sizeof",
-                "keyword.operator.alignof",
-                "keyword.operator.typeid",
-                "keyword.operator.alignas",
-                "keyword.operator.instanceof",
-                "keyword.operator.logical.python",
-                "keyword.operator.wordlike",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: "keyword.other.unit",
-              settings: {
-                foreground: "var(--theme-syntax-number)",
-              },
-            },
-            {
-              scope: ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: "support.function.git-rebase",
-              settings: {
-                foreground: "var(--theme-syntax-variable)",
-              },
-            },
-            {
-              scope: "constant.sha.git-rebase",
-              settings: {
-                foreground: "var(--theme-syntax-number)",
-              },
-            },
-            {
-              scope: [
-                "storage.modifier.import.java",
-                "variable.language.wildcard.java",
-                "storage.modifier.package.java",
-              ],
-              settings: {
-                foreground: "var(--theme-text)",
-              },
-            },
-            {
-              scope: "variable.language",
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: [
-                "entity.name.function",
-                "support.function",
-                "support.constant.handlebars",
-                "source.powershell variable.other.member",
-                "entity.name.operator.custom-literal",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-function)",
-              },
-            },
-            {
-              scope: [
-                "support.class",
-                "support.type",
-                "entity.name.type",
-                "entity.name.namespace",
-                "entity.other.attribute",
-                "entity.name.scope-resolution",
-                "entity.name.class",
-                "storage.type.numeric.go",
-                "storage.type.byte.go",
-                "storage.type.boolean.go",
-                "storage.type.string.go",
-                "storage.type.uintptr.go",
-                "storage.type.error.go",
-                "storage.type.rune.go",
-                "storage.type.cs",
-                "storage.type.generic.cs",
-                "storage.type.modifier.cs",
-                "storage.type.variable.cs",
-                "storage.type.annotation.java",
-                "storage.type.generic.java",
-                "storage.type.java",
-                "storage.type.object.array.java",
-                "storage.type.primitive.array.java",
-                "storage.type.primitive.java",
-                "storage.type.token.java",
-                "storage.type.groovy",
-                "storage.type.annotation.groovy",
-                "storage.type.parameters.groovy",
-                "storage.type.generic.groovy",
-                "storage.type.object.array.groovy",
-                "storage.type.primitive.array.groovy",
-                "storage.type.primitive.groovy",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-type)",
-              },
-            },
-            {
-              scope: [
-                "meta.type.cast.expr",
-                "meta.type.new.expr",
-                "support.constant.math",
-                "support.constant.dom",
-                "support.constant.json",
-                "entity.other.inherited-class",
-                "punctuation.separator.namespace.ruby",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-type)",
-              },
-            },
-            {
-              scope: [
-                "keyword.control",
-                "source.cpp keyword.operator.new",
-                "keyword.operator.delete",
-                "keyword.other.using",
-                "keyword.other.directive.using",
-                "keyword.other.operator",
-                "entity.name.operator",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-operator)",
-              },
-            },
-            {
-              scope: [
-                "variable",
-                "meta.definition.variable.name",
-                "support.variable",
-                "entity.name.variable",
-                "constant.other.placeholder",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-variable)",
-              },
-            },
-            {
-              scope: ["variable.other.constant", "variable.other.enummember"],
-              settings: {
-                foreground: "var(--theme-syntax-variable)",
-              },
-            },
-            {
-              scope: ["meta.object-literal.key"],
-              settings: {
-                foreground: "var(--theme-syntax-variable)",
-              },
-            },
-            {
-              scope: [
-                "support.constant.property-value",
-                "support.constant.font-name",
-                "support.constant.media-type",
-                "support.constant.media",
-                "constant.other.color.rgb-value",
-                "constant.other.rgb-value",
-                "support.constant.color",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-string)",
-              },
-            },
-            {
-              scope: [
-                "punctuation.definition.group.regexp",
-                "punctuation.definition.group.assertion.regexp",
-                "punctuation.definition.character-class.regexp",
-                "punctuation.character.set.begin.regexp",
-                "punctuation.character.set.end.regexp",
-                "keyword.operator.negation.regexp",
-                "support.other.parenthesis.regexp",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-string)",
-              },
-            },
-            {
-              scope: [
-                "constant.character.character-class.regexp",
-                "constant.other.character-class.set.regexp",
-                "constant.other.character-class.regexp",
-                "constant.character.set.regexp",
-              ],
-              settings: {
-                foreground: "var(--theme-syntax-operator)",
-              },
-            },
-            {
-              scope: ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
-              settings: {
-                foreground: "var(--theme-syntax-operator)",
-              },
-            },
-            {
-              scope: "keyword.operator.quantifier.regexp",
-              settings: {
-                foreground: "var(--theme-syntax-operator)",
-              },
-            },
-            {
-              scope: ["constant.character", "constant.other.option"],
-              settings: {
-                foreground: "var(--theme-syntax-keyword)",
-              },
-            },
-            {
-              scope: "constant.character.escape",
-              settings: {
-                foreground: "var(--theme-syntax-operator)",
-              },
-            },
-            {
-              scope: "entity.name.label",
-              settings: {
-                foreground: "var(--theme-text-muted)",
-              },
-            },
-          ],
-          type: "dark",
-        },
-        transformers: [transformerNotationDiff()],
-      })
-    },
-  }),
-)
-
 function strip(text: string): string {
   const wrappedRe = /^\s*<([A-Za-z]\w*)>\s*([\s\S]*?)\s*<\/\1>\s*$/
   const match = text.match(wrappedRe)
   return match ? match[2] : text
 }
-
-export default function Markdown(props: { text: string; class?: string }) {
+export function Markdown(props: { text: string; class?: string }) {
+  const marked = useMarked()
   const [html] = createResource(
     () => strip(props.text),
     async (markdown) => {
-      return markedWithShiki.parse(markdown)
+      return marked.parse(markdown)
     },
   )
   return (

packages/app/src/components/select-dialog.tsx

@@ -0,0 +1,225 @@
+import { createEffect, Show, For, createMemo, type JSX, createResource } from "solid-js"
+import { Dialog } from "@kobalte/core/dialog"
+import { Icon, IconButton } from "@/ui"
+import { createStore } from "solid-js/store"
+import { entries, flatMap, groupBy, map, pipe } from "remeda"
+import { createList } from "solid-list"
+import fuzzysort from "fuzzysort"
+
+interface SelectDialogProps<T> {
+  items: T[] | ((filter: string) => Promise<T[]>)
+  key: (item: T) => string
+  render: (item: T) => JSX.Element
+  filter?: string[]
+  current?: T
+  placeholder?: string
+  groupBy?: (x: T) => string
+  onSelect?: (value: T | undefined) => void
+  onClose?: () => void
+}
+
+export function SelectDialog<T>(props: SelectDialogProps<T>) {
+  let scrollRef: HTMLDivElement | undefined
+  const [store, setStore] = createStore({
+    filter: "",
+    mouseActive: false,
+  })
+
+  const [grouped] = createResource(
+    () => store.filter,
+    async (filter) => {
+      const needle = filter.toLowerCase()
+      const all = (typeof props.items === "function" ? await props.items(needle) : props.items) || []
+      const result = pipe(
+        all,
+        (x) => {
+          if (!needle) return x
+          if (!props.filter && Array.isArray(x) && x.every((e) => typeof e === "string")) {
+            return fuzzysort.go(needle, x).map((x) => x.target) as T[]
+          }
+          return fuzzysort.go(needle, x, { keys: props.filter! }).map((x) => x.obj)
+        },
+        groupBy((x) => (props.groupBy ? props.groupBy(x) : "")),
+        // mapValues((x) => x.sort((a, b) => props.key(a).localeCompare(props.key(b)))),
+        entries(),
+        map(([k, v]) => ({ category: k, items: v })),
+      )
+      return result
+    },
+  )
+  const flat = createMemo(() => {
+    return pipe(
+      grouped() || [],
+      flatMap((x) => x.items),
+    )
+  })
+  const list = createList({
+    items: () => flat().map(props.key),
+    initialActive: props.current ? props.key(props.current) : undefined,
+    loop: true,
+  })
+  const resetSelection = () => {
+    const all = flat()
+    if (all.length === 0) return
+    list.setActive(props.key(all[0]))
+  }
+
+  createEffect(() => {
+    store.filter
+    scrollRef?.scrollTo(0, 0)
+    resetSelection()
+  })
+
+  createEffect(() => {
+    const all = flat()
+    if (store.mouseActive || all.length === 0) return
+    if (list.active() === props.key(all[0])) {
+      scrollRef?.scrollTo(0, 0)
+      return
+    }
+    const element = scrollRef?.querySelector(`[data-key="${list.active()}"]`)
+    element?.scrollIntoView({ block: "nearest", behavior: "smooth" })
+  })
+
+  const handleInput = (value: string) => {
+    setStore("filter", value)
+    resetSelection()
+  }
+
+  const handleSelect = (item: T) => {
+    props.onSelect?.(item)
+    props.onClose?.()
+  }
+
+  const handleKey = (e: KeyboardEvent) => {
+    setStore("mouseActive", false)
+
+    if (e.key === "Enter") {
+      e.preventDefault()
+      const selected = flat().find((x) => props.key(x) === list.active())
+      if (selected) handleSelect(selected)
+    } else if (e.key === "Escape") {
+      e.preventDefault()
+      props.onClose?.()
+    } else {
+      list.onKeyDown(e)
+    }
+  }
+
+  return (
+    <Dialog defaultOpen modal onOpenChange={(open) => open || props.onClose?.()}>
+      <Dialog.Portal>
+        <Dialog.Overlay class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[100]" />
+        <Dialog.Content
+          class="fixed top-[20%] left-1/2 -translate-x-1/2 w-[90vw] max-w-2xl 
+                 shadow-[0_0_33px_rgba(0,0,0,0.8)]
+                 bg-background border border-border-subtle/30 rounded-lg  z-[101]
+                 max-h-[60vh] flex flex-col"
+        >
+          <div class="border-b border-border-subtle/30">
+            <div class="relative">
+              <Icon name="command" size={16} class="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted/80" />
+              <input
+                type="text"
+                value={store.filter}
+                onInput={(e) => handleInput(e.currentTarget.value)}
+                onKeyDown={handleKey}
+                placeholder={props.placeholder}
+                class="w-full pl-10 pr-4 py-2 rounded-t-md
+                       text-sm text-text placeholder-text-muted/70
+                       focus:outline-none"
+                autofocus
+                spellcheck={false}
+                autocorrect="off"
+                autocomplete="off"
+                autocapitalize="off"
+              />
+              <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2">
+                {/* <Show when={fileResults.loading && mode() === "files"}>
+                  <div class="text-text-muted">
+                    <Icon name="refresh" size={14} class="animate-spin" />
+                  </div>
+                </Show> */}
+                <Show when={store.filter}>
+                  <IconButton
+                    size="xs"
+                    variant="ghost"
+                    class="text-text-muted hover:text-text"
+                    onClick={() => {
+                      setStore("filter", "")
+                      resetSelection()
+                    }}
+                  >
+                    <Icon name="close" size={14} />
+                  </IconButton>
+                </Show>
+              </div>
+            </div>
+          </div>
+          <div ref={(el) => (scrollRef = el)} class="relative flex-1 overflow-y-auto">
+            <Show
+              when={flat().length > 0}
+              fallback={<div class="text-center py-8 text-text-muted text-sm">No results</div>}
+            >
+              <For each={grouped()}>
+                {(group) => (
+                  <>
+                    <Show when={group.category}>
+                      <div class="top-0 sticky z-10 bg-background-panel p-2 text-xs text-text-muted/60 tracking-wider uppercase">
+                        {group.category}
+                      </div>
+                    </Show>
+                    <div class="p-2">
+                      <For each={group.items}>
+                        {(item) => (
+                          <button
+                            data-key={props.key(item)}
+                            onClick={() => handleSelect(item)}
+                            onMouseMove={() => {
+                              setStore("mouseActive", true)
+                              list.setActive(props.key(item))
+                            }}
+                            classList={{
+                              "w-full px-3 py-2 flex items-center gap-3": true,
+                              "rounded-md text-left transition-colors group": true,
+                              "bg-background-element": props.key(item) === list.active(),
+                            }}
+                          >
+                            {props.render(item)}
+                          </button>
+                        )}
+                      </For>
+                    </div>
+                  </>
+                )}
+              </For>
+            </Show>
+          </div>
+          <div class="p-3 border-t border-border-subtle/30 flex items-center justify-between text-xs text-text-muted">
+            <div class="flex items-center gap-5">
+              <span class="flex items-center gap-1.5">
+                <kbd class="px-1.5 py-0.5 bg-background-element border border-border-subtle/30 rounded text-[10px]">
+                  ↑↓
+                </kbd>
+                Navigate
+              </span>
+              <span class="flex items-center gap-1.5">
+                <kbd class="px-1.5 py-0.5 bg-background-element border border-border-subtle/30 rounded text-[10px]">
+                  ↵
+                </kbd>
+                Select
+              </span>
+              <span class="flex items-center gap-1.5">
+                <kbd class="px-1.5 py-0.5 bg-background-element border border-border-subtle/30 rounded text-[10px]">
+                  ESC
+                </kbd>
+                Close
+              </span>
+            </div>
+            <span>{`${flat().length} results`}</span>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

packages/app/src/components/select.tsx

@@ -1,46 +1,26 @@
 import { Select as KobalteSelect } from "@kobalte/core/select"
-import { createEffect, createMemo, Show } from "solid-js"
+import { createMemo } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { Icon } from "@/ui/icon"
-import fuzzysort from "fuzzysort"
 import { pipe, groupBy, entries, map } from "remeda"
-import { createStore } from "solid-js/store"
+import { Button, type ButtonProps } from "@/ui"
 
 export interface SelectProps<T> {
-  variant?: "default" | "outline"
-  size?: "sm" | "md" | "lg"
   placeholder?: string
-  filter?:
-    | false
-    | {
-        placeholder?: string
-        keys: string[]
-      }
   options: T[]
   current?: T
   value?: (x: T) => string
   label?: (x: T) => string
   groupBy?: (x: T) => string
-  onFilter?: (query: string) => void
   onSelect?: (value: T | undefined) => void
   class?: ComponentProps<"div">["class"]
   classList?: ComponentProps<"div">["classList"]
 }
 
-export function Select<T>(props: SelectProps<T>) {
-  let inputRef: HTMLInputElement | undefined = undefined
-  let listboxRef: HTMLUListElement | undefined = undefined
-  const [store, setStore] = createStore({
-    filter: "",
-  })
+export function Select<T>(props: SelectProps<T> & ButtonProps) {
   const grouped = createMemo(() => {
-    const needle = store.filter.toLowerCase()
     const result = pipe(
       props.options,
-      (x) =>
-        !needle || !props.filter
-          ? x
-          : fuzzysort.go(needle, x, { keys: props.filter && props.filter.keys }).map((x) => x.obj),
       groupBy((x) => (props.groupBy ? props.groupBy(x) : "")),
       // mapValues((x) => x.sort((a, b) => a.title.localeCompare(b.title))),
       entries(),
@@ -48,19 +28,6 @@ export function Select<T>(props: SelectProps<T>) {
     )
     return result
   })
-  // const flat = createMemo(() => {
-  //   return pipe(
-  //     grouped(),
-  //     flatMap(({ options }) => options),
-  //   )
-  // })
-
-  createEffect(() => {
-    store.filter
-    listboxRef?.scrollTo(0, 0)
-    // setStore("selected", 0)
-    // scroll.scrollTo(0)
-  })
 
   return (
     <KobalteSelect<T, { category: string; options: T[] }>
@@ -89,36 +56,21 @@ export function Select<T>(props: SelectProps<T>) {
           <KobalteSelect.ItemLabel>
             {props.label ? props.label(itemProps.item.rawValue) : (itemProps.item.rawValue as string)}
           </KobalteSelect.ItemLabel>
-          <KobalteSelect.ItemIndicator
-            classList={{
-              "ml-auto": true,
-            }}
-          >
+          <KobalteSelect.ItemIndicator class="ml-auto">
             <Icon name="checkmark" size={16} />
           </KobalteSelect.ItemIndicator>
         </KobalteSelect.Item>
       )}
       onChange={(v) => {
-        if (props.onSelect) props.onSelect(v ?? undefined)
-        if (v !== null) {
-          // close the select
-        }
+        props.onSelect?.(v ?? undefined)
       }}
-      onOpenChange={(v) => v || setStore("filter", "")}
     >
       <KobalteSelect.Trigger
+        as={Button}
+        size={props.size || "sm"}
+        variant={props.variant || "secondary"}
         classList={{
           ...(props.classList ?? {}),
-          "flex w-full items-center justify-between rounded-md transition-colors": true,
-          "focus-visible:outline-none focus-visible:ring focus-visible:ring-border-active/30": true,
-          "disabled:cursor-not-allowed disabled:opacity-50": true,
-          "data-[placeholder-shown]:text-text-muted cursor-pointer": true,
-          "hover:bg-background-element focus-visible:ring-border-active": true,
-          "bg-background-element text-text": props.variant === "default" || !props.variant,
-          "border-2 border-border bg-transparent text-text": props.variant === "outline",
-          "h-6 pl-2 text-xs": props.size === "sm",
-          "h-8 pl-3 text-sm": props.size === "md" || !props.size,
-          "h-10 pl-4 text-base": props.size === "lg",
           [props.class ?? ""]: !!props.class,
         }}
       >
@@ -140,13 +92,6 @@ export function Select<T>(props: SelectProps<T>) {
       </KobalteSelect.Trigger>
       <KobalteSelect.Portal>
         <KobalteSelect.Content
-          onKeyDown={(e) => {
-            if (!props.filter) return
-            if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Escape") {
-              return
-            }
-            inputRef?.focus()
-          }}
           classList={{
             "min-w-32 overflow-hidden rounded-md border border-border-subtle/40": true,
             "bg-background-panel p-1 shadow-md z-50": true,
@@ -154,33 +99,7 @@ export function Select<T>(props: SelectProps<T>) {
             "data-[expanded]:animate-in data-[expanded]:fade-in-0 data-[expanded]:zoom-in-95": true,
           }}
         >
-          <Show when={props.filter}>
-            <input
-              ref={(el) => (inputRef = el)}
-              id="select-filter"
-              type="text"
-              placeholder={props.filter ? props.filter.placeholder : "Filter items"}
-              value={store.filter}
-              onInput={(e) => setStore("filter", e.currentTarget.value)}
-              onKeyDown={(e) => {
-                if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Escape") {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  listboxRef?.focus()
-                }
-              }}
-              classList={{
-                "w-full": true,
-                "px-2 pb-2 text-text font-light placeholder-text-muted/70 text-xs focus:outline-none": true,
-              }}
-            />
-          </Show>
-          <KobalteSelect.Listbox
-            ref={(el) => (listboxRef = el)}
-            classList={{
-              "overflow-y-auto max-h-48 no-scrollbar": true,
-            }}
-          />
+          <KobalteSelect.Listbox class="overflow-y-auto max-h-48" />
         </KobalteSelect.Content>
       </KobalteSelect.Portal>
     </KobalteSelect>

packages/app/src/components/session-list.tsx

@@ -7,7 +7,7 @@ export default function SessionList() {
   const local = useLocal()
 
   return (
-    <VList data={sync.data.session} class="p-2 no-scrollbar">
+    <VList data={sync.data.session} class="p-2">
       {(session) => (
         <Tooltip placement="right" value={session.title} class="w-full min-w-0">
           <Button

packages/app/src/components/session-timeline.tsx

@@ -1,5 +1,5 @@
 import { useLocal, useSync } from "@/context"
-import { Collapsible, Icon, type IconProps } from "@/ui"
+import { Collapsible, Icon } from "@/ui"
 import type { Part, ToolPart } from "@opencode-ai/sdk"
 import { DateTime } from "luxon"
 import {
@@ -13,58 +13,14 @@ import {
   type ParentProps,
   createEffect,
   createMemo,
+  Show,
 } from "solid-js"
 import { getFilename } from "@/utils"
-import Markdown from "./markdown"
+import { Markdown } from "./markdown"
 import { Code } from "./code"
 import { createElementSize } from "@solid-primitives/resize-observer"
 import { createScrollPosition } from "@solid-primitives/scroll"
 
-function TimelineIcon(props: { name: IconProps["name"]; class?: string }) {
-  return (
-    <div
-      classList={{
-        "relative flex flex-none self-start items-center justify-center bg-background h-6 w-6": true,
-        [props.class ?? ""]: !!props.class,
-      }}
-    >
-      <Icon name={props.name} class="text-text/40" size={18} />
-    </div>
-  )
-}
-
-function CollapsibleTimelineIcon(props: { name: IconProps["name"]; class?: string }) {
-  return (
-    <>
-      <TimelineIcon
-        name={props.name}
-        class={`group-hover/li:hidden group-has-[[data-expanded]]/li:hidden ${props.class ?? ""}`}
-      />
-      <TimelineIcon
-        name="chevron-right"
-        class={`hidden group-hover/li:flex group-has-[[data-expanded]]/li:hidden ${props.class ?? ""}`}
-      />
-      <TimelineIcon name="chevron-down" class={`hidden group-has-[[data-expanded]]/li:flex ${props.class ?? ""}`} />
-    </>
-  )
-}
-
-function ToolIcon(props: { part: ToolPart }) {
-  return (
-    <Switch fallback={<TimelineIcon name="hammer" />}>
-      <Match when={props.part.tool === "read"}>
-        <TimelineIcon name="file" />
-      </Match>
-      <Match when={props.part.tool === "edit"}>
-        <CollapsibleTimelineIcon name="pencil" />
-      </Match>
-      <Match when={props.part.tool === "write"}>
-        <CollapsibleTimelineIcon name="file-plus" />
-      </Match>
-    </Switch>
-  )
-}
-
 function Part(props: ParentProps & ComponentProps<"div">) {
   const [local, others] = splitProps(props, ["class", "classList", "children"])
   return (
@@ -97,9 +53,13 @@ function CollapsiblePart(props: { title: ParentProps["children"] } & ParentProps
 }
 
 function ReadToolPart(props: { part: ToolPart }) {
+  const sync = useSync()
   const local = useLocal()
   return (
     <Switch>
+      <Match when={props.part.state.status === "pending"}>
+        <Part>Reading file...</Part>
+      </Match>
       <Match when={props.part.state.status === "completed" && props.part.state}>
         {(state) => {
           const path = state().input["filePath"] as string
@@ -110,13 +70,27 @@ function ReadToolPart(props: { part: ToolPart }) {
           )
         }}
       </Match>
+      <Match when={props.part.state.status === "error" && props.part.state}>
+        {(state) => (
+          <div>
+            <Part>
+              <span class="text-text-muted">Read</span> {getFilename(state().input["filePath"] as string)}
+            </Part>
+            <div class="text-error">{sync.sanitize(state().error)}</div>
+          </div>
+        )}
+      </Match>
     </Switch>
   )
 }
 
 function EditToolPart(props: { part: ToolPart }) {
+  const sync = useSync()
   return (
     <Switch>
+      <Match when={props.part.state.status === "pending"}>
+        <Part>Preparing edit...</Part>
+      </Match>
       <Match when={props.part.state.status === "completed" && props.part.state}>
         {(state) => (
           <CollapsiblePart
@@ -135,13 +109,30 @@ function EditToolPart(props: { part: ToolPart }) {
           </CollapsiblePart>
         )}
       </Match>
+      <Match when={props.part.state.status === "error" && props.part.state}>
+        {(state) => (
+          <CollapsiblePart
+            title={
+              <>
+                <span class="text-text-muted">Edit</span> {getFilename(state().input["filePath"] as string)}
+              </>
+            }
+          >
+            <div class="text-error">{sync.sanitize(state().error)}</div>
+          </CollapsiblePart>
+        )}
+      </Match>
     </Switch>
   )
 }
 
 function WriteToolPart(props: { part: ToolPart }) {
+  const sync = useSync()
   return (
     <Switch>
+      <Match when={props.part.state.status === "pending"}>
+        <Part>Preparing write...</Part>
+      </Match>
       <Match when={props.part.state.status === "completed" && props.part.state}>
         {(state) => (
           <CollapsiblePart
@@ -155,35 +146,95 @@ function WriteToolPart(props: { part: ToolPart }) {
           </CollapsiblePart>
         )}
       </Match>
+      <Match when={props.part.state.status === "error" && props.part.state}>
+        {(state) => (
+          <div>
+            <Part>
+              <span class="text-text-muted">Write</span> {getFilename(state().input["filePath"] as string)}
+            </Part>
+            <div class="text-error">{sync.sanitize(state().error)}</div>
+          </div>
+        )}
+      </Match>
+    </Switch>
+  )
+}
+
+function BashToolPart(props: { part: ToolPart }) {
+  const sync = useSync()
+  return (
+    <Switch>
+      <Match when={props.part.state.status === "pending"}>
+        <Part>Writing shell command...</Part>
+      </Match>
+      <Match when={props.part.state.status === "completed" && props.part.state}>
+        {(state) => (
+          <CollapsiblePart
+            defaultOpen
+            title={
+              <>
+                <span class="text-text-muted">Run command:</span> {state().input["command"]}
+              </>
+            }
+          >
+            <Markdown text={`\`\`\`command\n${state().input["command"]}\n${state().output}\`\`\``} />
+          </CollapsiblePart>
+        )}
+      </Match>
+      <Match when={props.part.state.status === "error" && props.part.state}>
+        {(state) => (
+          <CollapsiblePart
+            title={
+              <>
+                <span class="text-text-muted">Shell</span> {state().input["command"]}
+              </>
+            }
+          >
+            <div class="text-error">{sync.sanitize(state().error)}</div>
+          </CollapsiblePart>
+        )}
+      </Match>
     </Switch>
   )
 }
 
 function ToolPart(props: { part: ToolPart }) {
+  // read
+  // edit
+  // write
+  // bash
+  // ls
+  // glob
+  // grep
+  // todowrite
+  // todoread
+  // webfetch
+  // websearch
+  // patch
+  // task
   return (
-    <Switch
-      fallback={
-        <div class="flex-auto min-w-0 text-xs">
-          {props.part.type}:{props.part.tool}
-        </div>
-      }
-    >
-      <Match when={props.part.tool === "read"}>
-        <div class="min-w-0 flex-auto">
+    <div class="min-w-0 flex-auto text-xs">
+      <Switch
+        fallback={
+          <span>
+            {props.part.type}:{props.part.tool}
+          </span>
+        }
+      >
+        <Match when={props.part.tool === "read"}>
           <ReadToolPart part={props.part} />
-        </div>
-      </Match>
-      <Match when={props.part.tool === "edit"}>
-        <div class="min-w-0 flex-auto">
+        </Match>
+        <Match when={props.part.tool === "edit"}>
           <EditToolPart part={props.part} />
-        </div>
-      </Match>
-      <Match when={props.part.tool === "write"}>
-        <div class="min-w-0 flex-auto">
+        </Match>
+        <Match when={props.part.tool === "write"}>
           <WriteToolPart part={props.part} />
-        </div>
-      </Match>
-    </Switch>
+        </Match>
+        <Match when={props.part.tool === "bash"}>
+          <BashToolPart part={props.part} />
+        </Match>
+      </Switch>
+    </div>
   )
 }
 
@@ -196,6 +247,7 @@ export default function SessionTimeline(props: { session: string; class?: string
   const scroll = createScrollPosition(scrollElement)
 
   onMount(() => sync.session.sync(props.session))
+  const session = createMemo(() => sync.session.get(props.session))
   const messages = createMemo(() => sync.data.message[props.session] ?? [])
   const working = createMemo(() => {
     const last = messages()[messages().length - 1]
@@ -285,60 +337,33 @@ export default function SessionTimeline(props: { session: string; class?: string
     <div
       ref={setRoot}
       classList={{
-        "p-4 select-text flex flex-col gap-y-8": true,
+        "p-4 select-text flex flex-col gap-y-1": true,
         [props.class ?? ""]: !!props.class,
       }}
     >
-      <For each={messages()}>
-        {(message) => (
-          <ul role="list" class="space-y-2">
+      <ul role="list" class="flex flex-col gap-1">
+        <For each={messages()}>
+          {(message) => (
             <For each={sync.data.part[message.id]?.filter(valid)}>
               {(part) => (
-                <li classList={{ "relative group/li flex gap-x-4 min-w-0 w-full": true }}>
-                  <div
-                    classList={{
-                      "absolute top-0 left-0 flex w-6 justify-center": true,
-                      "last:h-10 not-last:-bottom-10": true,
-                    }}
-                  >
-                    <div class="w-px bg-border-subtle" />
-                  </div>
-                  <Switch
-                    fallback={
-                      <div class="m-0.5 relative flex size-5 flex-none items-center justify-center bg-background">
-                        <div class="size-1 rounded-full bg-text/10 ring ring-text/20" />
-                      </div>
-                    }
-                  >
-                    <Match when={part.type === "text"}>
-                      <Switch>
-                        <Match when={message.role === "user"}>
-                          <TimelineIcon name="avatar-square" />
-                        </Match>
-                        <Match when={message.role === "assistant"}>
-                          <TimelineIcon name="sparkles" />
-                        </Match>
-                      </Switch>
-                    </Match>
-                    <Match when={part.type === "reasoning"}>
-                      <CollapsibleTimelineIcon name="brain" />
-                    </Match>
-                    <Match when={part.type === "tool" && part}>{(part) => <ToolIcon part={part()} />}</Match>
-                  </Switch>
+                <li class="group/li">
                   <Switch fallback={<div class="flex-auto min-w-0 text-xs mt-1 text-left">{part.type}</div>}>
                     <Match when={part.type === "text" && part}>
                       {(part) => (
                         <Switch>
                           <Match when={message.role === "user"}>
-                            <div class="w-full flex flex-col items-end justify-stretch gap-y-1.5 min-w-0">
+                            <div class="w-full flex flex-col items-end justify-stretch gap-y-1.5 min-w-0 mt-5 group-first/li:mt-0">
                               <p class="w-full rounded-md p-3 ring-1 ring-text/15 ring-inset text-xs bg-background-panel">
                                 <span class="font-medium text-text whitespace-pre-wrap break-words">{part().text}</span>
                               </p>
-                              <p class="text-xs text-text-muted">12:07pm · adam</p>
+                              <p class="text-xs text-text-muted">
+                                {DateTime.fromMillis(message.time.created).toRelative()} ·{" "}
+                                {sync.data.config.username ?? "user"}
+                              </p>
                             </div>
                           </Match>
                           <Match when={message.role === "assistant"}>
-                            <Markdown text={part().text} class="text-text" />
+                            <Markdown text={sync.sanitize(part().text)} class="text-text mt-1" />
                           </Match>
                         </Switch>
                       )}
@@ -347,9 +372,11 @@ export default function SessionTimeline(props: { session: string; class?: string
                       {(part) => (
                         <CollapsiblePart
                           title={
-                            <>
-                              <span class="text-text-muted">Thought</span> for {duration(part())}s
-                            </>
+                            <Switch fallback={<span class="text-text-muted">Thinking</span>}>
+                              <Match when={part().time.end}>
+                                <span class="text-text-muted">Thought</span> for {duration(part())}s
+                              </Match>
+                            </Switch>
                           }
                         >
                           <Markdown text={part().text} />
@@ -361,9 +388,84 @@ export default function SessionTimeline(props: { session: string; class?: string
                 </li>
               )}
             </For>
-          </ul>
-        )}
-      </For>
+          )}
+        </For>
+      </ul>
+      <Show when={false}>
+        <Collapsible defaultOpen={false}>
+          <Collapsible.Trigger>
+            <div class="mt-12 ml-1 flex items-center gap-x-2 text-xs text-text-muted">
+              <Icon name="file-code" size={16} />
+              <span>Raw Session Data</span>
+              <Collapsible.Arrow size={18} class="text-text-muted" />
+            </div>
+          </Collapsible.Trigger>
+          <Collapsible.Content class="mt-5">
+            <ul role="list" class="space-y-2">
+              <li>
+                <Collapsible>
+                  <Collapsible.Trigger>
+                    <div class="flex items-center gap-x-2 text-xs text-text-muted ml-1">
+                      <Icon name="file-code" size={16} />
+                      <span>session</span>
+                      <Collapsible.Arrow size={18} class="text-text-muted" />
+                    </div>
+                  </Collapsible.Trigger>
+                  <Collapsible.Content>
+                    <Code path="session.json" code={JSON.stringify(session(), null, 2)} class="[&_code]:pb-0!" />
+                  </Collapsible.Content>
+                </Collapsible>
+              </li>
+              <For each={messages()}>
+                {(message) => (
+                  <>
+                    <li>
+                      <Collapsible>
+                        <Collapsible.Trigger>
+                          <div class="flex items-center gap-x-2 text-xs text-text-muted ml-1">
+                            <Icon name="file-code" size={16} />
+                            <span>{message.role === "user" ? "user" : "assistant"}</span>
+                            <Collapsible.Arrow size={18} class="text-text-muted" />
+                          </div>
+                        </Collapsible.Trigger>
+                        <Collapsible.Content>
+                          <Code
+                            path={message.id + ".json"}
+                            code={JSON.stringify(message, null, 2)}
+                            class="[&_code]:pb-0!"
+                          />
+                        </Collapsible.Content>
+                      </Collapsible>
+                    </li>
+                    <For each={sync.data.part[message.id]?.filter(valid)}>
+                      {(part) => (
+                        <li>
+                          <Collapsible>
+                            <Collapsible.Trigger>
+                              <div class="flex items-center gap-x-2 text-xs text-text-muted ml-1">
+                                <Icon name="file-code" size={16} />
+                                <span>{part.type}</span>
+                                <Collapsible.Arrow size={18} class="text-text-muted" />
+                              </div>
+                            </Collapsible.Trigger>
+                            <Collapsible.Content>
+                              <Code
+                                path={message.id + "." + part.id + ".json"}
+                                code={JSON.stringify(part, null, 2)}
+                                class="[&_code]:pb-0!"
+                              />
+                            </Collapsible.Content>
+                          </Collapsible>
+                        </li>
+                      )}
+                    </For>
+                  </>
+                )}
+              </For>
+            </ul>
+          </Collapsible.Content>
+        </Collapsible>
+      </Show>
     </div>
   )
 }

packages/app/src/context/event.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext, type ParentProps } from "solid-js"
+import { createEventBus } from "@solid-primitives/event-bus"
+import type { Event as SDKEvent } from "@opencode-ai/sdk"
+import { useSDK } from "@/context"
+
+export type Event = SDKEvent // can extend with custom events later
+
+function init() {
+  const sdk = useSDK()
+  const bus = createEventBus<Event>()
+  sdk.event.subscribe().then(async (events) => {
+    for await (const event of events.stream) {
+      bus.emit(event)
+    }
+  })
+  return bus
+}
+
+type EventContext = ReturnType<typeof init>
+
+const ctx = createContext<EventContext>()
+
+export function EventProvider(props: ParentProps) {
+  const value = init()
+  return <ctx.Provider value={value}>{props.children}</ctx.Provider>
+}
+
+export function useEvent() {
+  const value = useContext(ctx)
+  if (!value) {
+    throw new Error("useEvent must be used within a EventProvider")
+  }
+  return value
+}

packages/app/src/context/index.ts

@@ -1,4 +1,7 @@
+export { EventProvider, useEvent } from "./event"
 export { LocalProvider, useLocal } from "./local"
+export { MarkedProvider, useMarked } from "./marked"
 export { SDKProvider, useSDK } from "./sdk"
+export { ShikiProvider, useShiki } from "./shiki"
 export { SyncProvider, useSync } from "./sync"
 export { ThemeProvider, useTheme } from "./theme"

packages/app/src/context/local.tsx

@@ -1,9 +1,8 @@
 import { createStore, produce, reconcile } from "solid-js/store"
 import { batch, createContext, createEffect, createMemo, useContext, type ParentProps } from "solid-js"
-import { useSync } from "./sync"
 import { uniqueBy } from "remeda"
-import type { FileContent, FileNode } from "@opencode-ai/sdk"
-import { useSDK } from "./sdk"
+import type { FileContent, FileNode, Model, Provider, File as FileStatus } from "@opencode-ai/sdk"
+import { useSDK, useEvent, useSync } from "@/context"
 
 export type LocalFile = FileNode &
   Partial<{
@@ -16,16 +15,22 @@ export type LocalFile = FileNode &
     view: "raw" | "diff-unified" | "diff-split"
     folded: string[]
     selectedChange: number
+    status: FileStatus
   }>
 export type TextSelection = LocalFile["selection"]
 export type View = LocalFile["view"]
 
+export type LocalModel = Omit<Model, "provider"> & {
+  provider: Provider
+}
+export type ModelKey = { providerID: string; modelID: string }
+
 function init() {
   const sdk = useSDK()
   const sync = useSync()
 
-  const list = createMemo(() => sync.data.agent.filter((x) => x.mode !== "subagent"))
   const agent = (() => {
+    const list = createMemo(() => sync.data.agent.filter((x) => x.mode !== "subagent"))
     const [store, setStore] = createStore<{
       current: string
     }>({
@@ -55,18 +60,14 @@ function init() {
   })()
 
   const model = (() => {
+    const list = createMemo(() =>
+      sync.data.provider.flatMap((p) => Object.values(p.models).map((m) => ({ ...m, provider: p }) as LocalModel)),
+    )
+    const find = (key: ModelKey) => list().find((m) => m.id === key?.modelID && m.provider.id === key.providerID)
+
     const [store, setStore] = createStore<{
-      model: Record<
-        string,
-        {
-          providerID: string
-          modelID: string
-        }
-      >
-      recent: {
-        providerID: string
-        modelID: string
-      }[]
+      model: Record<string, ModelKey>
+      recent: ModelKey[]
     }>({
       model: {},
       recent: [],
@@ -82,37 +83,21 @@ function init() {
       if (store.recent.length) return store.recent[0]
       const provider = sync.data.provider[0]
       const model = Object.values(provider.models)[0]
-      return {
-        providerID: provider.id,
-        modelID: model.id,
-      }
+      return { modelID: model.id, providerID: provider.id }
     })
 
     const current = createMemo(() => {
       const a = agent.current()
-      return store.model[agent.current().name] ?? (a.model ? a.model : fallback())
+      return find(store.model[agent.current().name]) ?? find(a.model ?? fallback())
     })
 
-    const list = createMemo(() =>
-      sync.data.provider.flatMap((x) => Object.values(x.models).map((m) => ({ providerID: x.id, modelID: m.id }))),
-    )
+    const recent = createMemo(() => store.recent.map(find).filter(Boolean))
 
     return {
       list,
       current,
-      recent() {
-        return store.recent
-      },
-      parsed: createMemo(() => {
-        const value = current()
-        const provider = sync.data.provider.find((x) => x.id === value.providerID)!
-        const model = provider.models[value.modelID]
-        return {
-          provider: provider.name ?? value.providerID,
-          model: model.name ?? value.modelID,
-        }
-      }),
-      set(model: { providerID: string; modelID: string } | undefined, options?: { recent?: boolean }) {
+      recent,
+      set(model: ModelKey | undefined, options?: { recent?: boolean }) {
         batch(() => {
           setStore("model", agent.current().name, model ?? fallback())
           if (options?.recent && model) {
@@ -140,11 +125,36 @@ function init() {
       return store.node[store.active]
     })
     const opened = createMemo(() => store.opened.map((x) => store.node[x]))
-    const changes = createMemo(() => new Set(sync.data.changes.map((f) => f.path)))
-    const status = (path: string) => sync.data.changes.find((f) => f.path === path)
+    const changeset = createMemo(() => new Set(sync.data.changes.map((f) => f.path)))
+    const changes = createMemo(() => Array.from(changeset()).sort((a, b) => a.localeCompare(b)))
+
+    createEffect((prev: FileStatus[]) => {
+      const removed = prev.filter((p) => !sync.data.changes.find((c) => c.path === p.path))
+      for (const p of removed) {
+        setStore(
+          "node",
+          p.path,
+          produce((draft) => {
+            draft.status = undefined
+            draft.view = "raw"
+          }),
+        )
+        load(p.path)
+      }
+      for (const p of sync.data.changes) {
+        if (store.node[p.path] === undefined) {
+          fetch(p.path).then(() => setStore("node", p.path, "status", p))
+        } else {
+          setStore("node", p.path, "status", p)
+        }
+      }
+      return sync.data.changes
+    }, sync.data.changes)
 
     const changed = (path: string) => {
-      const set = changes()
+      const node = store.node[path]
+      if (node?.status) return true
+      const set = changeset()
       if (set.has(path)) return true
       for (const p of set) {
         if (p.startsWith(path ? path + "/" : "")) return true
@@ -153,50 +163,50 @@ function init() {
     }
 
     const resetNode = (path: string) => {
-      setStore("node", path, {
-        loaded: undefined,
-        pinned: undefined,
-        content: undefined,
-        selection: undefined,
-        scrollTop: undefined,
-        folded: undefined,
-        view: undefined,
-        selectedChange: undefined,
-      })
+      setStore("node", path, undefined!)
     }
 
-    const load = async (path: string) =>
-      sdk.file.read({ query: { path } }).then((x) => {
+    const relative = (path: string) => path.replace(sync.data.path.directory + "/", "")
+
+    const load = async (path: string) => {
+      const relativePath = relative(path)
+      sdk.file.read({ query: { path: relativePath } }).then((x) => {
         setStore(
           "node",
-          path,
+          relativePath,
           produce((draft) => {
             draft.loaded = true
             draft.content = x.data
           }),
         )
       })
+    }
 
-    const open = async (path: string) => {
-      const relative = path.replace(sync.data.path.directory + "/", "")
-      if (!store.node[relative]) {
-        const parent = relative.split("/").slice(0, -1).join("/")
-        if (parent) {
-          await list(parent)
-        }
+    const fetch = async (path: string) => {
+      const relativePath = relative(path)
+      const parent = relativePath.split("/").slice(0, -1).join("/")
+      if (parent) {
+        await list(parent)
       }
+    }
+
+    const open = async (path: string, options?: { pinned?: boolean; view?: LocalFile["view"] }) => {
+      const relativePath = relative(path)
+      if (!store.node[relativePath]) await fetch(path)
       setStore("opened", (x) => {
-        if (x.includes(relative)) return x
+        if (x.includes(relativePath)) return x
         return [
           ...opened()
             .filter((x) => x.pinned)
             .map((x) => x.path),
-          relative,
+          relativePath,
         ]
       })
-      setStore("active", relative)
-      if (store.node[relative].loaded) return
-      return load(relative)
+      setStore("active", relativePath)
+      if (options?.pinned) setStore("node", path, "pinned", true)
+      if (options?.view && store.node[relativePath].view === undefined) setStore("node", path, "view", options.view)
+      if (store.node[relativePath].loaded) return
+      return load(relativePath)
     }
 
     const list = async (path: string) => {
@@ -213,27 +223,31 @@ function init() {
       })
     }
 
-    sdk.event.subscribe().then(async (events) => {
-      for await (const event of events.stream) {
-        switch (event.type) {
-          case "message.part.updated":
-            const part = event.properties.part
-            if (part.type === "tool" && part.state.status === "completed") {
-              switch (part.tool) {
-                case "read":
-                  console.log("read", part.state.input)
-                  break
-                case "edit":
-                  const absolute = part.state.input["filePath"] as string
-                  const path = absolute.replace(sync.data.path.directory + "/", "")
-                  load(path)
-                  break
-                default:
-                  break
-              }
+    const search = (query: string) => sdk.find.files({ query: { query } }).then((x) => x.data!)
+
+    const bus = useEvent()
+    bus.listen((event) => {
+      switch (event.type) {
+        case "message.part.updated":
+          const part = event.properties.part
+          if (part.type === "tool" && part.state.status === "completed") {
+            switch (part.tool) {
+              case "read":
+                break
+              case "edit":
+                // load(part.state.input["filePath"] as string)
+                break
+              default:
+                break
             }
-            break
-        }
+          }
+          break
+        case "file.watcher.updated":
+          setTimeout(sync.load.changes, 1000)
+          const relativePath = relative(event.properties.file)
+          if (relativePath.startsWith(".git/")) return
+          load(relativePath)
+          break
       }
     })
 
@@ -306,8 +320,8 @@ function init() {
       setChangeIndex(path: string, index: number | undefined) {
         setStore("node", path, "selectedChange", index)
       },
+      changes,
       changed,
-      status,
       children(path: string) {
         return Object.values(store.node).filter(
           (x) =>
@@ -316,6 +330,8 @@ function init() {
             !x.path.replace(new RegExp(`^${path + "/"}`), "").includes("/"),
         )
       },
+      search,
+      relative,
     }
   })()
 

packages/app/src/context/marked.tsx

@@ -0,0 +1,43 @@
+import { createContext, useContext, type ParentProps } from "solid-js"
+import { useShiki } from "@/context"
+import { marked } from "marked"
+import markedShiki from "marked-shiki"
+import { bundledLanguages, type BundledLanguage } from "shiki"
+
+function init(highlighter: ReturnType<typeof useShiki>) {
+  return marked.use(
+    markedShiki({
+      async highlight(code, lang) {
+        if (!(lang in bundledLanguages)) {
+          lang = "text"
+        }
+        if (!highlighter.getLoadedLanguages().includes(lang)) {
+          await highlighter.loadLanguage(lang as BundledLanguage)
+        }
+        return highlighter.codeToHtml(code, {
+          lang: lang || "text",
+          theme: "opencode",
+          tabindex: false,
+        })
+      },
+    }),
+  )
+}
+
+type MarkedContext = ReturnType<typeof init>
+
+const ctx = createContext<MarkedContext>()
+
+export function MarkedProvider(props: ParentProps) {
+  const highlighter = useShiki()
+  const value = init(highlighter)
+  return <ctx.Provider value={value}>{props.children}</ctx.Provider>
+}
+
+export function useMarked() {
+  const value = useContext(ctx)
+  if (!value) {
+    throw new Error("useMarked must be used within a MarkedProvider")
+  }
+  return value
+}

packages/app/src/context/shiki.tsx

@@ -0,0 +1,582 @@
+import { createHighlighter, type ThemeInput } from "shiki"
+import { createContext, useContext, type ParentProps } from "solid-js"
+
+const theme: ThemeInput = {
+  colors: {
+    "actionBar.toggledBackground": "var(--theme-background-element)",
+    "activityBarBadge.background": "var(--theme-accent)",
+    "checkbox.border": "var(--theme-border)",
+    "editor.background": "transparent",
+    "editor.foreground": "var(--theme-text)",
+    "editor.inactiveSelectionBackground": "var(--theme-background-element)",
+    "editor.selectionHighlightBackground": "var(--theme-border-active)",
+    "editorIndentGuide.activeBackground1": "var(--theme-border-subtle)",
+    "editorIndentGuide.background1": "var(--theme-border-subtle)",
+    "input.placeholderForeground": "var(--theme-text-muted)",
+    "list.activeSelectionIconForeground": "var(--theme-text)",
+    "list.dropBackground": "var(--theme-background-element)",
+    "menu.background": "var(--theme-background-panel)",
+    "menu.border": "var(--theme-border)",
+    "menu.foreground": "var(--theme-text)",
+    "menu.selectionBackground": "var(--theme-primary)",
+    "menu.separatorBackground": "var(--theme-border)",
+    "ports.iconRunningProcessForeground": "var(--theme-success)",
+    "sideBarSectionHeader.background": "transparent",
+    "sideBarSectionHeader.border": "var(--theme-border-subtle)",
+    "sideBarTitle.foreground": "var(--theme-text-muted)",
+    "statusBarItem.remoteBackground": "var(--theme-success)",
+    "statusBarItem.remoteForeground": "var(--theme-text)",
+    "tab.lastPinnedBorder": "var(--theme-border-subtle)",
+    "tab.selectedBackground": "var(--theme-background-element)",
+    "tab.selectedForeground": "var(--theme-text-muted)",
+    "terminal.inactiveSelectionBackground": "var(--theme-background-element)",
+    "widget.border": "var(--theme-border)",
+  },
+  displayName: "opencode",
+  name: "opencode",
+  semanticHighlighting: true,
+  semanticTokenColors: {
+    customLiteral: "var(--theme-syntax-function)",
+    newOperator: "var(--theme-syntax-operator)",
+    numberLiteral: "var(--theme-syntax-number)",
+    stringLiteral: "var(--theme-syntax-string)",
+  },
+  tokenColors: [
+    {
+      scope: [
+        "meta.embedded",
+        "source.groovy.embedded",
+        "string meta.image.inline.markdown",
+        "variable.legacy.builtin.python",
+      ],
+      settings: {
+        foreground: "var(--theme-text)",
+      },
+    },
+    {
+      scope: "emphasis",
+      settings: {
+        fontStyle: "italic",
+      },
+    },
+    {
+      scope: "strong",
+      settings: {
+        fontStyle: "bold",
+      },
+    },
+    {
+      scope: "header",
+      settings: {
+        foreground: "var(--theme-markdown-heading)",
+      },
+    },
+    {
+      scope: "comment",
+      settings: {
+        foreground: "var(--theme-syntax-comment)",
+      },
+    },
+    {
+      scope: "constant.language",
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: [
+        "constant.numeric",
+        "variable.other.enummember",
+        "keyword.operator.plus.exponent",
+        "keyword.operator.minus.exponent",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-number)",
+      },
+    },
+    {
+      scope: "constant.regexp",
+      settings: {
+        foreground: "var(--theme-syntax-operator)",
+      },
+    },
+    {
+      scope: "entity.name.tag",
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: ["entity.name.tag.css", "entity.name.tag.less"],
+      settings: {
+        foreground: "var(--theme-syntax-operator)",
+      },
+    },
+    {
+      scope: "entity.other.attribute-name",
+      settings: {
+        foreground: "var(--theme-syntax-variable)",
+      },
+    },
+    {
+      scope: [
+        "entity.other.attribute-name.class.css",
+        "source.css entity.other.attribute-name.class",
+        "entity.other.attribute-name.id.css",
+        "entity.other.attribute-name.parent-selector.css",
+        "entity.other.attribute-name.parent.less",
+        "source.css entity.other.attribute-name.pseudo-class",
+        "entity.other.attribute-name.pseudo-element.css",
+        "source.css.less entity.other.attribute-name.id",
+        "entity.other.attribute-name.scss",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-operator)",
+      },
+    },
+    {
+      scope: "invalid",
+      settings: {
+        foreground: "var(--theme-error)",
+      },
+    },
+    {
+      scope: "markup.underline",
+      settings: {
+        fontStyle: "underline",
+      },
+    },
+    {
+      scope: "markup.bold",
+      settings: {
+        fontStyle: "bold",
+        foreground: "var(--theme-markdown-strong)",
+      },
+    },
+    {
+      scope: "markup.heading",
+      settings: {
+        fontStyle: "bold",
+        foreground: "var(--theme-markdown-heading)",
+      },
+    },
+    {
+      scope: "markup.italic",
+      settings: {
+        fontStyle: "italic",
+      },
+    },
+    {
+      scope: "markup.strikethrough",
+      settings: {
+        fontStyle: "strikethrough",
+      },
+    },
+    {
+      scope: "markup.inserted",
+      settings: {
+        foreground: "var(--theme-diff-added)",
+      },
+    },
+    {
+      scope: "markup.deleted",
+      settings: {
+        foreground: "var(--theme-diff-removed)",
+      },
+    },
+    {
+      scope: "markup.changed",
+      settings: {
+        foreground: "var(--theme-diff-context)",
+      },
+    },
+    {
+      scope: "punctuation.definition.quote.begin.markdown",
+      settings: {
+        foreground: "var(--theme-markdown-block-quote)",
+      },
+    },
+    {
+      scope: "punctuation.definition.list.begin.markdown",
+      settings: {
+        foreground: "var(--theme-markdown-list-enumeration)",
+      },
+    },
+    {
+      scope: "markup.inline.raw",
+      settings: {
+        foreground: "var(--theme-markdown-code)",
+      },
+    },
+    {
+      scope: "punctuation.definition.tag",
+      settings: {
+        foreground: "var(--theme-syntax-punctuation)",
+      },
+    },
+    {
+      scope: ["meta.preprocessor", "entity.name.function.preprocessor"],
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: "meta.preprocessor.string",
+      settings: {
+        foreground: "var(--theme-syntax-string)",
+      },
+    },
+    {
+      scope: "meta.preprocessor.numeric",
+      settings: {
+        foreground: "var(--theme-syntax-number)",
+      },
+    },
+    {
+      scope: "meta.structure.dictionary.key.python",
+      settings: {
+        foreground: "var(--theme-syntax-variable)",
+      },
+    },
+    {
+      scope: "meta.diff.header",
+      settings: {
+        foreground: "var(--theme-diff-hunk-header)",
+      },
+    },
+    {
+      scope: "storage",
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: "storage.type",
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: ["storage.modifier", "keyword.operator.noexcept"],
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: ["string", "meta.embedded.assembly"],
+      settings: {
+        foreground: "var(--theme-syntax-string)",
+      },
+    },
+    {
+      scope: "string.tag",
+      settings: {
+        foreground: "var(--theme-syntax-string)",
+      },
+    },
+    {
+      scope: "string.value",
+      settings: {
+        foreground: "var(--theme-syntax-string)",
+      },
+    },
+    {
+      scope: "string.regexp",
+      settings: {
+        foreground: "var(--theme-syntax-operator)",
+      },
+    },
+    {
+      scope: [
+        "punctuation.definition.template-expression.begin",
+        "punctuation.definition.template-expression.end",
+        "punctuation.section.embedded",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: ["meta.template.expression"],
+      settings: {
+        foreground: "var(--theme-text)",
+      },
+    },
+    {
+      scope: [
+        "support.type.vendored.property-name",
+        "support.type.property-name",
+        "source.css variable",
+        "source.coffee.embedded",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-variable)",
+      },
+    },
+    {
+      scope: "keyword",
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: "keyword.control",
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: "keyword.operator",
+      settings: {
+        foreground: "var(--theme-syntax-operator)",
+      },
+    },
+    {
+      scope: [
+        "keyword.operator.new",
+        "keyword.operator.expression",
+        "keyword.operator.cast",
+        "keyword.operator.sizeof",
+        "keyword.operator.alignof",
+        "keyword.operator.typeid",
+        "keyword.operator.alignas",
+        "keyword.operator.instanceof",
+        "keyword.operator.logical.python",
+        "keyword.operator.wordlike",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: "keyword.other.unit",
+      settings: {
+        foreground: "var(--theme-syntax-number)",
+      },
+    },
+    {
+      scope: ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: "support.function.git-rebase",
+      settings: {
+        foreground: "var(--theme-syntax-variable)",
+      },
+    },
+    {
+      scope: "constant.sha.git-rebase",
+      settings: {
+        foreground: "var(--theme-syntax-number)",
+      },
+    },
+    {
+      scope: ["storage.modifier.import.java", "variable.language.wildcard.java", "storage.modifier.package.java"],
+      settings: {
+        foreground: "var(--theme-text)",
+      },
+    },
+    {
+      scope: "variable.language",
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: [
+        "entity.name.function",
+        "support.function",
+        "support.constant.handlebars",
+        "source.powershell variable.other.member",
+        "entity.name.operator.custom-literal",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-function)",
+      },
+    },
+    {
+      scope: [
+        "support.class",
+        "support.type",
+        "entity.name.type",
+        "entity.name.namespace",
+        "entity.other.attribute",
+        "entity.name.scope-resolution",
+        "entity.name.class",
+        "storage.type.numeric.go",
+        "storage.type.byte.go",
+        "storage.type.boolean.go",
+        "storage.type.string.go",
+        "storage.type.uintptr.go",
+        "storage.type.error.go",
+        "storage.type.rune.go",
+        "storage.type.cs",
+        "storage.type.generic.cs",
+        "storage.type.modifier.cs",
+        "storage.type.variable.cs",
+        "storage.type.annotation.java",
+        "storage.type.generic.java",
+        "storage.type.java",
+        "storage.type.object.array.java",
+        "storage.type.primitive.array.java",
+        "storage.type.primitive.java",
+        "storage.type.token.java",
+        "storage.type.groovy",
+        "storage.type.annotation.groovy",
+        "storage.type.parameters.groovy",
+        "storage.type.generic.groovy",
+        "storage.type.object.array.groovy",
+        "storage.type.primitive.array.groovy",
+        "storage.type.primitive.groovy",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-type)",
+      },
+    },
+    {
+      scope: [
+        "meta.type.cast.expr",
+        "meta.type.new.expr",
+        "support.constant.math",
+        "support.constant.dom",
+        "support.constant.json",
+        "entity.other.inherited-class",
+        "punctuation.separator.namespace.ruby",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-type)",
+      },
+    },
+    {
+      scope: [
+        "keyword.control",
+        "source.cpp keyword.operator.new",
+        "keyword.operator.delete",
+        "keyword.other.using",
+        "keyword.other.directive.using",
+        "keyword.other.operator",
+        "entity.name.operator",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-operator)",
+      },
+    },
+    {
+      scope: [
+        "variable",
+        "meta.definition.variable.name",
+        "support.variable",
+        "entity.name.variable",
+        "constant.other.placeholder",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-variable)",
+      },
+    },
+    {
+      scope: ["variable.other.constant", "variable.other.enummember"],
+      settings: {
+        foreground: "var(--theme-syntax-variable)",
+      },
+    },
+    {
+      scope: ["meta.object-literal.key"],
+      settings: {
+        foreground: "var(--theme-syntax-variable)",
+      },
+    },
+    {
+      scope: [
+        "support.constant.property-value",
+        "support.constant.font-name",
+        "support.constant.media-type",
+        "support.constant.media",
+        "constant.other.color.rgb-value",
+        "constant.other.rgb-value",
+        "support.constant.color",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-string)",
+      },
+    },
+    {
+      scope: [
+        "punctuation.definition.group.regexp",
+        "punctuation.definition.group.assertion.regexp",
+        "punctuation.definition.character-class.regexp",
+        "punctuation.character.set.begin.regexp",
+        "punctuation.character.set.end.regexp",
+        "keyword.operator.negation.regexp",
+        "support.other.parenthesis.regexp",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-string)",
+      },
+    },
+    {
+      scope: [
+        "constant.character.character-class.regexp",
+        "constant.other.character-class.set.regexp",
+        "constant.other.character-class.regexp",
+        "constant.character.set.regexp",
+      ],
+      settings: {
+        foreground: "var(--theme-syntax-operator)",
+      },
+    },
+    {
+      scope: ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
+      settings: {
+        foreground: "var(--theme-syntax-operator)",
+      },
+    },
+    {
+      scope: "keyword.operator.quantifier.regexp",
+      settings: {
+        foreground: "var(--theme-syntax-operator)",
+      },
+    },
+    {
+      scope: ["constant.character", "constant.other.option"],
+      settings: {
+        foreground: "var(--theme-syntax-keyword)",
+      },
+    },
+    {
+      scope: "constant.character.escape",
+      settings: {
+        foreground: "var(--theme-syntax-operator)",
+      },
+    },
+    {
+      scope: "entity.name.label",
+      settings: {
+        foreground: "var(--theme-text-muted)",
+      },
+    },
+  ],
+  type: "dark",
+}
+
+const highlighter = await createHighlighter({
+  themes: [theme],
+  langs: [],
+})
+
+type ShikiContext = typeof highlighter
+
+const ctx = createContext<ShikiContext>()
+
+export function ShikiProvider(props: ParentProps) {
+  return <ctx.Provider value={highlighter}>{props.children}</ctx.Provider>
+}
+
+export function useShiki() {
+  const value = useContext(ctx)
+  if (!value) {
+    throw new Error("useShiki must be used within a ShikiProvider")
+  }
+  return value
+}

packages/app/src/context/sync.tsx

@@ -1,7 +1,7 @@
 import type { Message, Agent, Provider, Session, Part, Config, Path, File, FileNode } from "@opencode-ai/sdk"
 import { createStore, produce, reconcile } from "solid-js/store"
-import { useSDK } from "./sdk"
-import { createContext, Show, useContext, type ParentProps } from "solid-js"
+import { createContext, createMemo, Show, useContext, type ParentProps } from "solid-js"
+import { useSDK, useEvent } from "@/context"
 import { Binary } from "@/utils/binary"
 
 function init() {
@@ -33,83 +33,88 @@ function init() {
     changes: [],
   })
 
-  const sdk = useSDK()
-
-  sdk.event.subscribe().then(async (events) => {
-    for await (const event of events.stream) {
-      switch (event.type) {
-        case "session.updated": {
-          const result = Binary.search(store.session, event.properties.info.id, (s) => s.id)
-          if (result.found) {
-            setStore("session", result.index, reconcile(event.properties.info))
-            break
-          }
-          setStore(
-            "session",
-            produce((draft) => {
-              draft.splice(result.index, 0, event.properties.info)
-            }),
-          )
+  const bus = useEvent()
+  bus.listen((event) => {
+    switch (event.type) {
+      case "session.updated": {
+        const result = Binary.search(store.session, event.properties.info.id, (s) => s.id)
+        if (result.found) {
+          setStore("session", result.index, reconcile(event.properties.info))
           break
         }
-        case "message.updated": {
-          const messages = store.message[event.properties.info.sessionID]
-          if (!messages) {
-            setStore("message", event.properties.info.sessionID, [event.properties.info])
-            break
-          }
-          const result = Binary.search(messages, event.properties.info.id, (m) => m.id)
-          if (result.found) {
-            setStore("message", event.properties.info.sessionID, result.index, reconcile(event.properties.info))
-            break
-          }
-          setStore(
-            "message",
-            event.properties.info.sessionID,
-            produce((draft) => {
-              draft.splice(result.index, 0, event.properties.info)
-            }),
-          )
+        setStore(
+          "session",
+          produce((draft) => {
+            draft.splice(result.index, 0, event.properties.info)
+          }),
+        )
+        break
+      }
+      case "message.updated": {
+        const messages = store.message[event.properties.info.sessionID]
+        if (!messages) {
+          setStore("message", event.properties.info.sessionID, [event.properties.info])
           break
         }
-        case "message.part.updated": {
-          const parts = store.part[event.properties.part.messageID]
-          if (!parts) {
-            setStore("part", event.properties.part.messageID, [event.properties.part])
-            break
-          }
-          const result = Binary.search(parts, event.properties.part.id, (p) => p.id)
-          if (result.found) {
-            setStore("part", event.properties.part.messageID, result.index, reconcile(event.properties.part))
-            break
-          }
-          setStore(
-            "part",
-            event.properties.part.messageID,
-            produce((draft) => {
-              draft.splice(result.index, 0, event.properties.part)
-            }),
-          )
+        const result = Binary.search(messages, event.properties.info.id, (m) => m.id)
+        if (result.found) {
+          setStore("message", event.properties.info.sessionID, result.index, reconcile(event.properties.info))
           break
         }
+        setStore(
+          "message",
+          event.properties.info.sessionID,
+          produce((draft) => {
+            draft.splice(result.index, 0, event.properties.info)
+          }),
+        )
+        break
+      }
+      case "message.part.updated": {
+        const parts = store.part[event.properties.part.messageID]
+        if (!parts) {
+          setStore("part", event.properties.part.messageID, [event.properties.part])
+          break
+        }
+        const result = Binary.search(parts, event.properties.part.id, (p) => p.id)
+        if (result.found) {
+          setStore("part", event.properties.part.messageID, result.index, reconcile(event.properties.part))
+          break
+        }
+        setStore(
+          "part",
+          event.properties.part.messageID,
+          produce((draft) => {
+            draft.splice(result.index, 0, event.properties.part)
+          }),
+        )
+        break
       }
     }
   })
 
-  Promise.all([
-    sdk.config.providers().then((x) => setStore("provider", x.data!.providers)),
-    sdk.path.get().then((x) => setStore("path", x.data!)),
-    sdk.app.agents().then((x) => setStore("agent", x.data ?? [])),
-    sdk.session.list().then((x) =>
-      setStore(
-        "session",
-        (x.data ?? []).slice().sort((a, b) => a.id.localeCompare(b.id)),
+  const sdk = useSDK()
+
+  const load = {
+    provider: () => sdk.config.providers().then((x) => setStore("provider", x.data!.providers)),
+    path: () => sdk.path.get().then((x) => setStore("path", x.data!)),
+    agent: () => sdk.app.agents().then((x) => setStore("agent", x.data ?? [])),
+    session: () =>
+      sdk.session.list().then((x) =>
+        setStore(
+          "session",
+          (x.data ?? []).slice().sort((a, b) => a.id.localeCompare(b.id)),
+        ),
       ),
-    ),
-    sdk.config.get().then((x) => setStore("config", x.data!)),
-    sdk.file.status().then((x) => setStore("changes", x.data!)),
-    sdk.file.list({ query: { path: "/" } }).then((x) => setStore("node", x.data!)),
-  ]).then(() => setStore("ready", true))
+    config: () => sdk.config.get().then((x) => setStore("config", x.data!)),
+    changes: () => sdk.file.status().then((x) => setStore("changes", x.data!)),
+    node: () => sdk.file.list({ query: { path: "/" } }).then((x) => setStore("node", x.data!)),
+  }
+
+  Promise.all(Object.values(load).map((p) => p())).then(() => setStore("ready", true))
+
+  const sanitizer = createMemo(() => new RegExp(`${store.path.directory}/`, "g"))
+  const sanitize = (text: string) => text.replace(sanitizer(), "")
 
   return {
     data: store,
@@ -140,6 +145,8 @@ function init() {
         )
       },
     },
+    load,
+    sanitize,
   }
 }
 

packages/app/src/index.css

@@ -19,6 +19,19 @@
     /* color: var(--color-background); */
   }
 
+  ::-webkit-scrollbar-track {
+    background: var(--theme-background-panel);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--theme-border-subtle);
+    border-radius: 6px;
+  }
+
+  * {
+    scrollbar-color: var(--theme-border-subtle) var(--theme-background-panel);
+  }
+
   .prose h1 {
     color: var(--color-text);
     font-size: var(--text-sm);

packages/app/src/index.tsx

@@ -4,7 +4,15 @@ import { Router, Route } from "@solidjs/router"
 import "@/index.css"
 import Layout from "@/pages/layout"
 import Home from "@/pages"
-import { SDKProvider, SyncProvider, LocalProvider, ThemeProvider } from "@/context"
+import {
+  EventProvider,
+  SDKProvider,
+  SyncProvider,
+  LocalProvider,
+  ThemeProvider,
+  ShikiProvider,
+  MarkedProvider,
+} from "@/context"
 
 const root = document.getElementById("root")
 
@@ -18,15 +26,21 @@ render(
   () => (
     <div class="h-full bg-background text-text-muted">
       <ThemeProvider defaultTheme="opencode" defaultDarkMode={true}>
-        <SDKProvider>
-          <SyncProvider>
-            <LocalProvider>
-              <Router root={Layout}>
-                <Route path="/" component={Home} />
-              </Router>
-            </LocalProvider>
-          </SyncProvider>
-        </SDKProvider>
+        <ShikiProvider>
+          <MarkedProvider>
+            <SDKProvider>
+              <EventProvider>
+                <SyncProvider>
+                  <LocalProvider>
+                    <Router root={Layout}>
+                      <Route path="/" component={Home} />
+                    </Router>
+                  </LocalProvider>
+                </SyncProvider>
+              </EventProvider>
+            </SDKProvider>
+          </MarkedProvider>
+        </ShikiProvider>
       </ThemeProvider>
     </div>
   ),

packages/app/src/pages/index.tsx

@@ -1,8 +1,9 @@
-import { FileIcon, Icon, IconButton, Logo, Tooltip } from "@/ui"
+import { Button, FileIcon, Icon, IconButton, Logo, Tooltip } from "@/ui"
 import { Tabs } from "@/ui/tabs"
 import { Select } from "@/components/select"
 import FileTree from "@/components/file-tree"
 import { For, Match, onCleanup, onMount, Show, Switch } from "solid-js"
+import { SelectDialog } from "@/components/select-dialog"
 import { useLocal, useSDK } from "@/context"
 import { Code } from "@/components/code"
 import {
@@ -19,6 +20,7 @@ import type { LocalFile } from "@/context/local"
 import SessionList from "@/components/session-list"
 import SessionTimeline from "@/components/session-timeline"
 import { createStore } from "solid-js/store"
+import { getDirectory, getFilename } from "@/utils"
 
 export default function Page() {
   const sdk = useSDK()
@@ -28,6 +30,8 @@ export default function Page() {
     activeItem: undefined as string | undefined,
     prompt: "",
     dragging: undefined as "left" | "right" | undefined,
+    modelSelectOpen: false,
+    fileSelectOpen: false,
   })
 
   let inputRef: HTMLInputElement | undefined = undefined
@@ -43,6 +47,17 @@ export default function Page() {
   })
 
   const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.getModifierState(MOD) && e.shiftKey && e.key.toLowerCase() === "p") {
+      e.preventDefault()
+      // TODO: command palette
+      return
+    }
+    if (e.getModifierState(MOD) && e.key.toLowerCase() === "p") {
+      e.preventDefault()
+      setStore("fileSelectOpen", true)
+      return
+    }
+
     const inputFocused = document.activeElement === inputRef
     if (inputFocused) {
       if (e.key === "Escape") {
@@ -190,7 +205,7 @@ export default function Page() {
       path: { id: session!.id },
       body: {
         agent: local.agent.current()!.name,
-        model: local.model.current(),
+        model: { modelID: local.model.current()!.id, providerID: local.model.current()!.provider.id },
         parts: [
           {
             type: "text",
@@ -226,7 +241,7 @@ export default function Page() {
   return (
     <div class="relative">
       <div
-        class="fixed top-0 left-0 h-full border-r border-border-subtle/30 flex flex-col overflow-hidden"
+        class="fixed top-0 left-0 h-full border-r border-border-subtle/30 flex flex-col overflow-hidden bg-background z-10"
         style={`width: ${local.layout.leftWidth()}px`}
       >
         <Tabs class="relative flex flex-col h-full" defaultValue="files">
@@ -244,7 +259,29 @@ export default function Page() {
             <FileTree path="" onFileClick={handleFileClick} />
           </Tabs.Content>
           <Tabs.Content value="changes" class="grow min-h-0 py-2 bg-background">
-            <div class="px-2 text-xs text-text-muted">No changes yet</div>
+            <Show
+              when={local.file.changes().length}
+              fallback={<div class="px-2 text-xs text-text-muted">No changes</div>}
+            >
+              <ul class="">
+                <For each={local.file.changes()}>
+                  {(path) => (
+                    <li>
+                      <button
+                        onClick={() => local.file.open(path, { view: "diff-unified", pinned: true })}
+                        class="w-full flex items-center px-2 py-0.5 gap-x-2 text-text-muted grow min-w-0 cursor-pointer hover:bg-background-element"
+                      >
+                        <FileIcon node={{ path, type: "file" }} class="shrink-0 size-3" />
+                        <span class="text-xs text-text whitespace-nowrap">{getFilename(path)}</span>
+                        <span class="text-xs text-text-muted/60 whitespace-nowrap truncate min-w-0">
+                          {getDirectory(path)}
+                        </span>
+                      </button>
+                    </li>
+                  )}
+                </For>
+              </ul>
+            </Show>
           </Tabs.Content>
         </Tabs>
       </div>
@@ -262,10 +299,10 @@ export default function Page() {
       </div>
       <Show when={local.layout.rightPane()}>
         <div
-          class="fixed top-0 right-0 h-full border-l border-border-subtle/30 flex flex-col overflow-hidden"
+          class="fixed top-0 right-0 h-full border-l border-border-subtle/30 flex flex-col overflow-hidden bg-background z-10"
           style={`width: ${local.layout.rightWidth()}px`}
         >
-          <div class="relative flex-1 min-h-0 overflow-y-auto no-scrollbar">
+          <div class="relative flex-1 min-h-0 overflow-y-auto overflow-x-hidden">
             <Show when={local.session.active()} fallback={<SessionList />}>
               {(activeSession) => (
                 <div class="relative">
@@ -470,7 +507,7 @@ export default function Page() {
               type="text"
               value={store.prompt}
               onInput={(e) => setStore("prompt", e.currentTarget.value)}
-              placeholder="It all starts with a prompt..."
+              placeholder="Placeholder text..."
               class="w-full p-1 pb-4 text-text font-light placeholder-text-muted/70 text-sm focus:outline-none"
             />
             <div class="flex justify-between items-center text-xs text-text-muted">
@@ -479,24 +516,13 @@ export default function Page() {
                   options={local.agent.list().map((a) => a.name)}
                   current={local.agent.current().name}
                   onSelect={local.agent.set}
-                  size="sm"
                   class="uppercase"
                 />
-                <Select
-                  options={local.model.list()}
-                  current={local.model.current()}
-                  onSelect={local.model.set}
-                  label={(x) => x.modelID}
-                  value={(x) => `${x.providerID}.${x.modelID}`}
-                  filter={{
-                    keys: ["providerID", "modelID"],
-                    placeholder: "Filter models",
-                  }}
-                  groupBy={(x) => x.providerID}
-                  size="sm"
-                  class="uppercase"
-                />
-                <span class="text-text-muted/70">{local.model.parsed().provider}</span>
+                <Button onClick={() => setStore("modelSelectOpen", true)}>
+                  {local.model.current()?.name ?? "Select model"}
+                  <Icon name="chevron-down" size={24} class="text-text-muted" />
+                </Button>
+                <span class="text-text-muted/70 whitespace-nowrap">{local.model.current()?.provider.name}</span>
               </div>
               <div class="flex gap-1 items-center">
                 <IconButton class="text-text-muted" size="xs" variant="ghost">
@@ -510,29 +536,94 @@ export default function Page() {
           </div>
         </form>
       </div>
+      <Show when={store.modelSelectOpen}>
+        <SelectDialog
+          key={(x) => `${x.provider.id}:${x.id}`}
+          items={local.model.list()}
+          current={local.model.current()}
+          render={(i) => (
+            <div class="w-full flex items-center justify-between">
+              <div class="flex items-center gap-x-2 text-text-muted grow min-w-0">
+                <img src={`https://models.dev/logos/${i.provider.id}.svg`} class="size-4 invert opacity-40" />
+                <span class="text-xs text-text whitespace-nowrap">{i.name}</span>
+                <span class="text-xs text-text-muted/80 whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
+                  {i.id}
+                </span>
+              </div>
+              <div class="flex items-center gap-x-1 text-text-muted/40 shrink-0">
+                <Tooltip forceMount={false} value="Reasoning">
+                  <Icon name="brain" size={16} classList={{ "text-accent": i.reasoning }} />
+                </Tooltip>
+                <Tooltip forceMount={false} value="Tools">
+                  <Icon name="hammer" size={16} classList={{ "text-secondary": i.tool_call }} />
+                </Tooltip>
+                <Tooltip forceMount={false} value="Attachments">
+                  <Icon name="photo" size={16} classList={{ "text-success": i.attachment }} />
+                </Tooltip>
+                <div class="rounded-full bg-text-muted/20 text-text-muted/80 w-9 h-4 flex items-center justify-center text-[10px]">
+                  {new Intl.NumberFormat("en-US", {
+                    notation: "compact",
+                    compactDisplay: "short",
+                  }).format(i.limit.context)}
+                </div>
+                <Tooltip forceMount={false} value={`$${i.cost?.input}/1M input, $${i.cost?.output}/1M output`}>
+                  <div class="rounded-full bg-success/20 text-success/80 w-9 h-4 flex items-center justify-center text-[10px]">
+                    <Switch fallback="FREE">
+                      <Match when={i.cost?.input > 10}>$$$</Match>
+                      <Match when={i.cost?.input > 1}>$$</Match>
+                      <Match when={i.cost?.input > 0.1}>$</Match>
+                    </Switch>
+                  </div>
+                </Tooltip>
+              </div>
+            </div>
+          )}
+          filter={["provider.name", "name", "id"]}
+          groupBy={(x) => x.provider.name}
+          onClose={() => setStore("modelSelectOpen", false)}
+          onSelect={(x) => local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined)}
+        />
+      </Show>
+      <Show when={store.fileSelectOpen}>
+        <SelectDialog
+          items={local.file.search}
+          key={(x) => x}
+          render={(i) => (
+            <div class="w-full flex items-center justify-between">
+              <div class="flex items-center gap-x-2 text-text-muted grow min-w-0">
+                <FileIcon node={{ path: i, type: "file" }} class="shrink-0 size-4" />
+                <span class="text-xs text-text whitespace-nowrap">{getFilename(i)}</span>
+                <span class="text-xs text-text-muted/80 whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
+                  {getDirectory(i)}
+                </span>
+              </div>
+              <div class="flex items-center gap-x-1 text-text-muted/40 shrink-0"></div>
+            </div>
+          )}
+          onClose={() => setStore("fileSelectOpen", false)}
+          onSelect={(x) => (x ? local.file.open(x, { pinned: true }) : undefined)}
+        />
+      </Show>
     </div>
   )
 }
 
 const TabVisual = (props: { file: LocalFile }) => {
-  const local = useLocal()
   return (
     <div class="flex items-center gap-x-1.5">
       <FileIcon node={props.file} class="" />
-      <span
-        classList={{ "text-xs": true, "text-primary": local.file.changed(props.file.path), italic: !props.file.pinned }}
-      >
+      <span classList={{ "text-xs": true, "text-primary": !!props.file.status?.status, italic: !props.file.pinned }}>
         {props.file.name}
       </span>
       <span class="text-xs opacity-70">
         <Switch>
-          <Match when={local.file.status(props.file.path)?.status === "modified"}>
+          <Match when={props.file.status?.status === "modified"}>
             <span class="text-primary">M</span>
           </Match>
-          <Match when={local.file.status(props.file.path)?.status === "added"}>
+          <Match when={props.file.status?.status === "added"}>
             <span class="text-success">A</span>
           </Match>
-          <Match when={local.file.status(props.file.path)?.status === "deleted"}>
+          <Match when={props.file.status?.status === "deleted"}>
             <span class="text-error">D</span>
           </Match>
         </Switch>

packages/app/src/ui/button.tsx

@@ -1,49 +1,36 @@
-import { Button as KobalteButton } from "@kobalte/core/button"
-import { splitProps } from "solid-js"
-import type { ComponentProps } from "solid-js"
+import { Button as Kobalte } from "@kobalte/core/button"
+import { type ComponentProps, splitProps } from "solid-js"
 
-export interface ButtonProps extends ComponentProps<typeof KobalteButton> {
-  variant?: "primary" | "secondary" | "outline" | "ghost"
+export interface ButtonProps {
+  variant?: "primary" | "secondary" | "ghost"
   size?: "sm" | "md" | "lg"
 }
 
-export const buttonStyles = {
-  base: "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
-  variants: {
-    primary: "bg-primary text-background hover:bg-secondary focus-visible:ring-primary data-[disabled]:opacity-50",
-    secondary:
-      "bg-background-panel text-text hover:bg-background-element focus-visible:ring-secondary data-[disabled]:opacity-50",
-    outline:
-      "border border-border bg-transparent text-text hover:bg-background-panel focus-visible:ring-border-active data-[disabled]:border-border-subtle data-[disabled]:text-text-muted",
-    ghost: "text-text hover:bg-background-panel focus-visible:ring-border-active data-[disabled]:text-text-muted",
-  },
-  sizes: {
-    sm: "h-8 px-3 text-sm",
-    md: "h-10 px-4 text-sm",
-    lg: "h-12 px-6 text-base",
-  },
-}
-
-export function getButtonClasses(
-  variant: keyof typeof buttonStyles.variants = "primary",
-  size: keyof typeof buttonStyles.sizes = "md",
-  className?: string,
-) {
-  return `${buttonStyles.base} ${buttonStyles.variants[variant]} ${buttonStyles.sizes[size]}${className ? ` ${className}` : ""}`
-}
-
-export function Button(props: ButtonProps) {
-  const [local, others] = splitProps(props, ["variant", "size", "class", "classList"])
+export function Button(props: ComponentProps<"button"> & ButtonProps) {
+  const [split, rest] = splitProps(props, ["variant", "size", "class", "classList"])
   return (
-    <KobalteButton
+    <Kobalte
+      {...rest}
+      data-size={split.size || "sm"}
+      data-variant={split.variant || "secondary"}
+      class="inline-flex items-center justify-center rounded-md cursor-pointer font-medium transition-colors
+             min-w-0 whitespace-nowrap truncate
+             data-[size=sm]:h-6 data-[size=sm]:pl-2 data-[size=sm]:text-xs
+             data-[size=md]:h-8 data-[size=md]:pl-3 data-[size=md]:text-sm
+             data-[size=lg]:h-10 data-[size=lg]:pl-4 data-[size=lg]:text-base
+             data-[variant=primary]:bg-primary data-[variant=primary]:text-background 
+             data-[variant=primary]:hover:bg-secondary data-[variant=primary]:focus-visible:ring-primary
+             data-[variant=secondary]:bg-background-element data-[variant=secondary]:text-text
+             data-[variant=secondary]:hover:bg-background-element data-[variant=secondary]:focus-visible:ring-secondary
+             data-[variant=ghost]:text-text data-[variant=ghost]:hover:bg-background-panel data-[variant=ghost]:focus-visible:ring-border-active
+             focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-transparent 
+             disabled:pointer-events-none disabled:opacity-50"
       classList={{
-        ...(local.classList ?? {}),
-        [buttonStyles.base]: true,
-        [buttonStyles.variants[local.variant || "primary"]]: true,
-        [buttonStyles.sizes[local.size || "md"]]: true,
-        [local.class ?? ""]: !!local.class,
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
       }}
-      {...others}
-    />
+    >
+      {props.children}
+    </Kobalte>
   )
 }

packages/app/src/ui/icon.tsx

@@ -125,6 +125,11 @@ const icons = {
   columns: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 5V19"></path>',
     "open-pane": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 4.75v14.5m-3-8.5L9.75 12l1.5 1.25m-4.5 6h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2Z"></path>',
     "close-pane": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 4.75v14.5m3-8.5L14.25 12l-1.5 1.25M6.75 19.25h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2Z"></path>',
+   "file-search": '<path fill="currentColor" d="M17.25 9.25V10a.75.75 0 0 0 .53-1.28l-.53.53Zm-4.5-4.5.53-.53a.75.75 0 0 0-.53-.22v.75ZM10.25 20a.75.75 0 0 0 0-1.5V20Zm7.427-3.383a.75.75 0 0 0-1.06 1.06l1.06-1.06Zm1.043 3.163a.75.75 0 1 0 1.06-1.06l-1.06 1.06Zm-.94-11.06-4.5-4.5-1.06 1.06 4.5 4.5 1.06-1.06ZM12.75 4h-6v1.5h6V4ZM4 6.75v10.5h1.5V6.75H4ZM6.75 20h3.5v-1.5h-3.5V20ZM12 4.75v3.5h1.5v-3.5H12ZM13.75 10h3.5V8.5h-3.5V10ZM12 8.25c0 .966.784 1.75 1.75 1.75V8.5a.25.25 0 0 1-.25-.25H12Zm-8 9A2.75 2.75 0 0 0 6.75 20v-1.5c-.69 0-1.25-.56-1.25-1.25H4ZM6.75 4A2.75 2.75 0 0 0 4 6.75h1.5c0-.69.56-1.25 1.25-1.25V4Zm8.485 14.47a3.235 3.235 0 0 0 3.236-3.235h-1.5c0 .959-.777 1.736-1.736 1.736v1.5Zm0-4.97c.959 0 1.736.777 1.736 1.735h1.5A3.235 3.235 0 0 0 15.235 12v1.5Zm0-1.5A3.235 3.235 0 0 0 12 15.235h1.5c0-.958.777-1.735 1.735-1.735V12Zm0 4.97a1.735 1.735 0 0 1-1.735-1.735H12a3.235 3.235 0 0 0 3.235 3.236v-1.5Zm1.382.707 2.103 2.103 1.06-1.06-2.103-2.103-1.06 1.06Z"></path>',
+   "folder-search": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.25 19.25h-3.5a2 2 0 0 1-2-2v-9.5h12.5a2 2 0 0 1 2 2v.5m-5.75-2.5-.931-1.958a2 2 0 0 0-1.756-1.042H6.75a2 2 0 0 0-2 2V11m12.695 6.445 1.805 1.805m-3.75-1a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5Z"></path>',
+   search: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z"></path>',
+   "web-search": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 8.25v-.5a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v.5m14.5 0H4.75m14.5 0v2m-14.5-2v8a2 2 0 0 0 2 2h2.5m7.743-1.257 2.257 2.257m-4.015-1.53a2.485 2.485 0 1 0 0-4.97 2.485 2.485 0 0 0 0 4.97Z"></path>',
+   loading: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.75v1.5m5.126.624L16 8m3.25 4h-1.5m-.624 5.126-1.768-1.768M12 16.75v2.5m-3.36-3.891-1.768 1.768M7.25 12h-2.5m3.891-3.358L6.874 6.874"></path>',
  } as const
 
 export function Icon(props: IconProps) {

packages/app/src/ui/link.tsx

@@ -1,15 +1,13 @@
 import { A } from "@solidjs/router"
 import { splitProps } from "solid-js"
 import type { ComponentProps } from "solid-js"
-import { getButtonClasses } from "./button"
 
 export interface LinkProps extends ComponentProps<typeof A> {
-  variant?: "primary" | "secondary" | "outline" | "ghost"
+  variant?: "primary" | "secondary" | "ghost"
   size?: "sm" | "md" | "lg"
 }
 
 export function Link(props: LinkProps) {
-  const [local, others] = splitProps(props, ["variant", "size", "class"])
-  const classes = local.variant ? getButtonClasses(local.variant, local.size, local.class) : local.class
-  return <A class={classes} {...others} />
+  const [, others] = splitProps(props, ["variant", "size", "class"])
+  return <A {...others} />
 }

packages/app/src/ui/tooltip.tsx

@@ -34,7 +34,7 @@ export function Tooltip(props: TooltipProps) {
       <KobalteTooltip.Portal>
         <KobalteTooltip.Content
           classList={{
-            "z-50 max-w-[320px] rounded-md bg-background-element px-2 py-1": true,
+            "z-[1000] max-w-[320px] rounded-md bg-background-element px-2 py-1": true,
             "text-xs font-medium text-text shadow-md pointer-events-none!": true,
             "transition-all duration-150 ease-out": true,
             "transform-gpu transform-origin-[var(--kb-tooltip-content-transform-origin)]": true,

packages/app/src/utils/path.ts

@@ -3,6 +3,11 @@ export function getFilename(path: string) {
   return parts[parts.length - 1]
 }
 
+export function getDirectory(path: string) {
+  const parts = path.split("/")
+  return parts.slice(0, parts.length - 1).join("/")
+}
+
 export function getFileExtension(path: string) {
   const parts = path.split(".")
   return parts[parts.length - 1]

packages/console/app/package.json

@@ -7,7 +7,7 @@
     "dev:remote": "VITE_AUTH_URL=https://auth.dev.opencode.ai bun sst shell --stage=dev bun dev",
     "build": "vinxi build && ../../opencode/script/schema.ts ./.output/public/config.json",
     "start": "vinxi start",
-    "version": "0.10.4"
+    "version": "0.11.7"
   },
   "dependencies": {
     "@ibm/plex": "6.4.1",

packages/console/app/src/component/workspace/billing-section.tsx

@@ -4,6 +4,8 @@ import { Billing } from "@opencode/console-core/billing.js"
 import { withActor } from "~/context/auth.withActor"
 import { IconCreditCard } from "~/component/icon"
 import styles from "./billing-section.module.css"
+import { Database, eq } from "@opencode/console-core/drizzle/index.js"
+import { BillingTable } from "@opencode/console-core/schema/billing.sql.js"
 
 const createCheckoutUrl = action(async (workspaceID: string, successUrl: string, cancelUrl: string) => {
   "use server"
@@ -17,12 +19,23 @@ const reload = action(async (form: FormData) => {
   return json(await withActor(() => Billing.reload(), workspaceID), { revalidate: getBillingInfo.key })
 }, "billing.reload")
 
-const disableReload = action(async (form: FormData) => {
+const setReload = action(async (form: FormData) => {
   "use server"
   const workspaceID = form.get("workspaceID")?.toString()
   if (!workspaceID) return { error: "Workspace ID is required" }
-  return json(await withActor(() => Billing.disableReload(), workspaceID), { revalidate: getBillingInfo.key })
-}, "billing.disableReload")
+  const reload = form.get("reload")?.toString() === "true"
+  return json(
+    await Database.use((tx) =>
+      tx
+        .update(BillingTable)
+        .set({
+          reload,
+        })
+        .where(eq(BillingTable.workspaceID, workspaceID)),
+    ),
+    { revalidate: getBillingInfo.key },
+  )
+}, "billing.setReload")
 
 const createSessionUrl = action(async (workspaceID: string, returnUrl: string) => {
   "use server"
@@ -44,7 +57,7 @@ export function BillingSection() {
   const createCheckoutUrlSubmission = useSubmission(createCheckoutUrl)
   const createSessionUrlAction = useAction(createSessionUrl)
   const createSessionUrlSubmission = useSubmission(createSessionUrl)
-  const disableReloadSubmission = useSubmission(disableReload)
+  const setReloadSubmission = useSubmission(setReload)
   const reloadSubmission = useSubmission(reload)
 
   // DUMMY DATA FOR TESTING - UNCOMMENT ONE OF THE SCENARIOS BELOW
@@ -89,6 +102,10 @@ export function BillingSection() {
     return ((balanceInfo()?.balance ?? 0) / 100000000).toFixed(2)
   })
 
+  const hasBalance = createMemo(() => {
+    return (balanceInfo()?.balance ?? 0) > 0 && balanceAmount() !== "0.00"
+  })
+
   return (
     <section class={styles.root}>
       <div data-slot="section-title">
@@ -136,19 +153,32 @@ export function BillingSection() {
             <Show
               when={balanceInfo()?.reload}
               fallback={
-                <button
-                  data-color="primary"
-                  disabled={createCheckoutUrlSubmission.pending}
-                  onClick={async () => {
-                    const baseUrl = window.location.href
-                    const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
-                    if (checkoutUrl) {
-                      window.location.href = checkoutUrl
-                    }
-                  }}
+                <Show
+                  when={hasBalance()}
+                  fallback={
+                    <button
+                      data-color="primary"
+                      disabled={createCheckoutUrlSubmission.pending}
+                      onClick={async () => {
+                        const baseUrl = window.location.href
+                        const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
+                        if (checkoutUrl) {
+                          window.location.href = checkoutUrl
+                        }
+                      }}
+                    >
+                      {createCheckoutUrlSubmission.pending ? "Loading..." : "Enable Billing"}
+                    </button>
+                  }
                 >
-                  {createCheckoutUrlSubmission.pending ? "Loading..." : "Enable Billing"}
-                </button>
+                  <form action={setReload} method="post" data-slot="create-form">
+                    <input type="hidden" name="workspaceID" value={params.id} />
+                    <input type="hidden" name="reload" value="true" />
+                    <button data-color="primary" type="submit" disabled={setReloadSubmission.pending}>
+                      {setReloadSubmission.pending ? "Enabling..." : "Enable Billing"}
+                    </button>
+                  </form>
+                </Show>
               }
             >
               <button
@@ -164,10 +194,11 @@ export function BillingSection() {
               >
                 {createSessionUrlSubmission.pending ? "Loading..." : "Manage Payment Methods"}
               </button>
-              <form action={disableReload} method="post" data-slot="create-form">
+              <form action={setReload} method="post" data-slot="create-form">
                 <input type="hidden" name="workspaceID" value={params.id} />
-                <button data-color="ghost" type="submit" disabled={disableReloadSubmission.pending}>
-                  {disableReloadSubmission.pending ? "Disabling..." : "Disable"}
+                <input type="hidden" name="reload" value="false" />
+                <button data-color="ghost" type="submit" disabled={setReloadSubmission.pending}>
+                  {setReloadSubmission.pending ? "Disabling..." : "Disable"}
                 </button>
               </form>
             </Show>
@@ -176,7 +207,7 @@ export function BillingSection() {
         <div data-slot="usage">
           <Show when={!balanceInfo()?.reload}>
             <Show
-              when={!(balanceAmount() === "0.00" || balanceAmount() === "-0.00")}
+              when={hasBalance()}
               fallback={
                 <p>
                   We'll load <b>$20</b> (+$1.23 processing fee) and reload it when it reaches <b>$5</b>.

packages/console/app/src/component/workspace/payment-section.module.css

@@ -40,6 +40,10 @@
 
       &[data-slot="payment-amount"] {
         color: var(--color-text);
+
+        &[data-refunded="true"] {
+          text-decoration: line-through;
+        }
       }
     }
 

packages/console/app/src/component/workspace/payment-section.tsx

@@ -85,7 +85,9 @@ export function PaymentSection() {
                         {formatDateForTable(date)}
                       </td>
                       <td data-slot="payment-id">{payment.id}</td>
-                      <td data-slot="payment-amount">${((payment.amount ?? 0) / 100000000).toFixed(2)}</td>
+                      <td data-slot="payment-amount" data-refunded={!!payment.timeRefunded}>
+                        ${((payment.amount ?? 0) / 100000000).toFixed(2)}
+                      </td>
                       <td data-slot="payment-receipt">
                         <button
                           onClick={async () => {

packages/console/app/src/routes/index.tsx

@@ -175,7 +175,7 @@ export default function Home() {
 
       <div data-component="legal">
         <span>
-          ©2025 <a href="https://anoma.ly">Anomaly Innovations</a>
+          ©2025 <a href="https://anoma.ly">Anomaly</a>
         </span>
       </div>
     </main>

packages/console/app/src/routes/stripe/webhook.ts

@@ -1,6 +1,6 @@
 import { Billing } from "@opencode/console-core/billing.js"
 import type { APIEvent } from "@solidjs/start/server"
-import { Database, eq, sql } from "@opencode/console-core/drizzle/index.js"
+import { and, Database, eq, sql } from "@opencode/console-core/drizzle/index.js"
 import { BillingTable, PaymentTable } from "@opencode/console-core/schema/billing.sql.js"
 import { Identifier } from "@opencode/console-core/identifier.js"
 import { centsToMicroCents } from "@opencode/console-core/util/price.js"
@@ -41,12 +41,14 @@ export async function POST(input: APIEvent) {
     const workspaceID = body.data.object.metadata?.workspaceID
     const customerID = body.data.object.customer as string
     const paymentID = body.data.object.payment_intent as string
+    const invoiceID = body.data.object.invoice as string
     const amount = body.data.object.amount_total
 
     if (!workspaceID) throw new Error("Workspace ID not found")
     if (!customerID) throw new Error("Customer ID not found")
     if (!amount) throw new Error("Amount not found")
     if (!paymentID) throw new Error("Payment ID not found")
+    if (!invoiceID) throw new Error("Invoice ID not found")
 
     await Actor.provide("system", { workspaceID }, async () => {
       const customer = await Billing.get()
@@ -86,11 +88,45 @@ export async function POST(input: APIEvent) {
           id: Identifier.create("payment"),
           amount: centsToMicroCents(Billing.CHARGE_AMOUNT),
           paymentID,
+          invoiceID,
           customerID,
         })
       })
     })
   }
+  if (body.type === "charge.refunded") {
+    const customerID = body.data.object.customer as string
+    const paymentIntentID = body.data.object.payment_intent as string
+    if (!customerID) throw new Error("Customer ID not found")
+    if (!paymentIntentID) throw new Error("Payment ID not found")
+
+    const workspaceID = await Database.use((tx) =>
+      tx
+        .select({
+          workspaceID: BillingTable.workspaceID,
+        })
+        .from(BillingTable)
+        .where(eq(BillingTable.customerID, customerID))
+        .then((rows) => rows[0]?.workspaceID),
+    )
+    if (!workspaceID) throw new Error("Workspace ID not found")
+
+    await Database.transaction(async (tx) => {
+      await tx
+        .update(PaymentTable)
+        .set({
+          timeRefunded: new Date(body.created * 1000),
+        })
+        .where(and(eq(PaymentTable.paymentID, paymentIntentID), eq(PaymentTable.workspaceID, workspaceID)))
+
+      await tx
+        .update(BillingTable)
+        .set({
+          balance: sql`${BillingTable.balance} - ${centsToMicroCents(Billing.CHARGE_AMOUNT)}`,
+        })
+        .where(eq(BillingTable.workspaceID, workspaceID))
+    })
+  }
 
   console.log("finished handling")
 

packages/console/app/src/routes/zen/handler.ts

@@ -147,7 +147,10 @@ export async function handler(
           return (
             reader?.read().then(async ({ done, value }) => {
               if (done) {
-                logger.metric({ response_length: responseLength })
+                logger.metric({
+                  response_length: responseLength,
+                  "timestamp.last_byte": Date.now(),
+                })
                 const usage = opts.getStreamUsage()
                 if (usage) {
                   await trackUsage(authInfo, modelInfo, providerInfo.id, usage)
@@ -158,10 +161,13 @@ export async function handler(
               }
 
               if (responseLength === 0) {
-                logger.metric({ time_to_first_byte: Date.now() - startTimestamp })
+                const now = Date.now()
+                logger.metric({
+                  time_to_first_byte: now - startTimestamp,
+                  "timestamp.first_byte": now,
+                })
               }
               responseLength += value.length
-              console.log(decoder.decode(value, { stream: true }))
               buffer += decoder.decode(value, { stream: true })
 
               const parts = buffer.split("\n\n")

packages/console/app/src/routes/zen/v1/messages.ts

@@ -30,22 +30,25 @@ export function POST(input: APIEvent) {
 
       let json
       try {
-        json = JSON.parse(data.slice(6)) as { usage?: Usage }
+        json = JSON.parse(data.slice(6))
       } catch (e) {
         return
       }
 
-      if (!json.usage) return
+      // ie. { type: "message_start"; message: { usage: Usage } }
+      // ie. { type: "message_delta"; usage: Usage }
+      const usageUpdate = json.usage ?? json.message?.usage
+      if (!usageUpdate) return
       usage = {
         ...usage,
-        ...json.usage,
+        ...usageUpdate,
         cache_creation: {
           ...usage?.cache_creation,
-          ...json.usage.cache_creation,
+          ...usageUpdate.cache_creation,
         },
         server_tool_use: {
           ...usage?.server_tool_use,
-          ...json.usage.server_tool_use,
+          ...usageUpdate.server_tool_use,
         },
       }
     },

packages/console/core/migrations/0016_cold_la_nuit.sql

@@ -0,0 +1 @@
+ALTER TABLE `payment` ADD `time_refunded` timestamp(3);

packages/console/core/migrations/0017_woozy_thaddeus_ross.sql

@@ -0,0 +1 @@
+ALTER TABLE `payment` ADD `invoice_id` varchar(255);

packages/console/core/migrations/meta/0016_snapshot.json

@@ -0,0 +1,650 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "45b67fb4-77ce-4aa2-b883-1971429c69f5",
+  "prevId": "7f3989cb-3e8b-430e-a0f5-f87051d1d824",
+  "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
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "email": {
+          "name": "email",
+          "columns": ["email"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "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_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_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
+        },
+        "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
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "usage_workspace_id_id_pk": {
+          "name": "usage_workspace_id_id_pk",
+          "columns": ["workspace_id", "id"]
+        }
+      },
+      "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
+        },
+        "actor": {
+          "name": "actor",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "old_name": {
+          "name": "old_name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "varchar(255)",
+          "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
+        },
+        "name": {
+          "name": "name",
+          "columns": ["workspace_id", "name"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "key_workspace_id_id_pk": {
+          "name": "key_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
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "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
+        }
+      },
+      "indexes": {
+        "user_email": {
+          "name": "user_email",
+          "columns": ["workspace_id", "email"],
+          "isUnique": true
+        }
+      },
+      "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": false,
+          "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": {}
+  }
+}

packages/console/core/migrations/meta/0017_snapshot.json

@@ -0,0 +1,657 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "100a21cf-ff9c-476f-bf7d-100c1824b2b2",
+  "prevId": "45b67fb4-77ce-4aa2-b883-1971429c69f5",
+  "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
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "email": {
+          "name": "email",
+          "columns": ["email"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "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_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_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
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "usage_workspace_id_id_pk": {
+          "name": "usage_workspace_id_id_pk",
+          "columns": ["workspace_id", "id"]
+        }
+      },
+      "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
+        },
+        "actor": {
+          "name": "actor",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "old_name": {
+          "name": "old_name",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "key": {
+          "name": "key",
+          "type": "varchar(255)",
+          "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
+        },
+        "name": {
+          "name": "name",
+          "columns": ["workspace_id", "name"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "key_workspace_id_id_pk": {
+          "name": "key_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
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "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
+        }
+      },
+      "indexes": {
+        "user_email": {
+          "name": "user_email",
+          "columns": ["workspace_id", "email"],
+          "isUnique": true
+        }
+      },
+      "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": false,
+          "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": {}
+  }
+}

packages/console/core/migrations/meta/_journal.json

@@ -113,6 +113,20 @@
       "when": 1758428484500,
       "tag": "0015_cloudy_revanche",
       "breakpoints": true
+    },
+    {
+      "idx": 16,
+      "version": "5",
+      "when": 1758663086739,
+      "tag": "0016_cold_la_nuit",
+      "breakpoints": true
+    },
+    {
+      "idx": 17,
+      "version": "5",
+      "when": 1758755183232,
+      "tag": "0017_woozy_thaddeus_ross",
+      "breakpoints": true
     }
   ]
 }

packages/console/core/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode/console-core",
-  "version": "0.10.4",
+  "version": "0.11.7",
   "private": true,
   "type": "module",
   "dependencies": {

packages/console/core/src/billing.ts

@@ -10,6 +10,8 @@ import { Identifier } from "./identifier"
 import { centsToMicroCents } from "./util/price"
 
 export namespace Billing {
+  export const CHARGE_NAME = "opencode credits"
+  export const CHARGE_FEE_NAME = "processing fee"
   export const CHARGE_AMOUNT = 2000 // $20
   export const CHARGE_FEE = 123 // Stripe fee 4.4% + $0.30
   export const CHARGE_THRESHOLD = 500 // $5
@@ -73,22 +75,39 @@ export namespace Billing {
         .then((rows) => rows[0]),
     )
     const paymentID = Identifier.create("payment")
-    let charge
+    let invoice
     try {
-      charge = await Billing.stripe().paymentIntents.create(
-        {
-          amount: Billing.CHARGE_AMOUNT + Billing.CHARGE_FEE,
-          currency: "usd",
-          customer: customerID!,
-          payment_method: paymentMethodID!,
-          off_session: true,
-          confirm: true,
-        },
-        { idempotencyKey: paymentID },
-      )
-
-      if (charge.status !== "succeeded") throw new Error(charge.last_payment_error?.message)
+      const draft = await Billing.stripe().invoices.create({
+        customer: customerID!,
+        auto_advance: false,
+        default_payment_method: paymentMethodID!,
+        collection_method: "charge_automatically",
+        currency: "usd",
+      })
+      await Billing.stripe().invoiceItems.create({
+        amount: Billing.CHARGE_AMOUNT,
+        currency: "usd",
+        customer: customerID!,
+        description: CHARGE_NAME,
+        invoice: draft.id!,
+      })
+      await Billing.stripe().invoiceItems.create({
+        amount: Billing.CHARGE_FEE,
+        currency: "usd",
+        customer: customerID!,
+        description: CHARGE_FEE_NAME,
+        invoice: draft.id!,
+      })
+      await Billing.stripe().invoices.finalizeInvoice(draft.id!)
+      invoice = await Billing.stripe().invoices.pay(draft.id!, {
+        off_session: true,
+        payment_method: paymentMethodID!,
+        expand: ["payments"],
+      })
+      if (invoice.status !== "paid" || invoice.payments?.data.length !== 1)
+        throw new Error(invoice.last_finalization_error?.message)
     } catch (e: any) {
+      console.error(e)
       await Database.use((tx) =>
         tx
           .update(BillingTable)
@@ -114,7 +133,8 @@ export namespace Billing {
         workspaceID: Actor.workspace(),
         id: paymentID,
         amount: centsToMicroCents(CHARGE_AMOUNT),
-        paymentID: charge.id,
+        invoiceID: invoice.id!,
+        paymentID: invoice.payments?.data[0].payment.payment_intent as string,
         customerID,
       })
     })
@@ -155,12 +175,13 @@ export namespace Billing {
       const customer = await Billing.get()
       const session = await Billing.stripe().checkout.sessions.create({
         mode: "payment",
+        billing_address_collection: "required",
         line_items: [
           {
             price_data: {
               currency: "usd",
               product_data: {
-                name: "opencode credits",
+                name: CHARGE_NAME,
               },
               unit_amount: CHARGE_AMOUNT,
             },
@@ -170,16 +191,13 @@ export namespace Billing {
             price_data: {
               currency: "usd",
               product_data: {
-                name: "processing fee",
+                name: CHARGE_FEE_NAME,
               },
               unit_amount: CHARGE_FEE,
             },
             quantity: 1,
           },
         ],
-        payment_intent_data: {
-          setup_future_usage: "on_session",
-        },
         ...(customer.customerID
           ? {
               customer: customer.customerID,
@@ -192,6 +210,12 @@ export namespace Billing {
           workspaceID: Actor.workspace(),
         },
         currency: "usd",
+        invoice_creation: {
+          enabled: true,
+        },
+        payment_intent_data: {
+          setup_future_usage: "on_session",
+        },
         payment_method_types: ["card"],
         payment_method_data: {
           allow_redisplay: "always",

packages/console/core/src/schema/billing.sql.ts

@@ -28,8 +28,10 @@ export const PaymentTable = mysqlTable(
     ...workspaceColumns,
     ...timestamps,
     customerID: varchar("customer_id", { length: 255 }),
+    invoiceID: varchar("invoice_id", { length: 255 }),
     paymentID: varchar("payment_id", { length: 255 }),
     amount: bigint("amount", { mode: "number" }).notNull(),
+    timeRefunded: utc("time_refunded"),
   },
   (table) => [...workspaceIndexes(table)],
 )

packages/console/function/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/console-function",
-  "version": "0.10.4",
+  "version": "0.11.7",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",

packages/console/function/src/log-processor.ts

@@ -9,7 +9,12 @@ export default {
       if (event.event.request.method !== "POST") continue
 
       const url = new URL(event.event.request.url)
-      if (url.pathname !== "/zen/v1/chat/completions") return
+      if (
+        url.pathname !== "/zen/v1/chat/completions" &&
+        url.pathname !== "/zen/v1/messages" &&
+        url.pathname !== "/zen/v1/responses"
+      )
+        return
 
       let metrics = {
         event_type: "completions",

packages/console/scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/console-scripts",
-  "version": "0.10.4",
+  "version": "0.11.7",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",

packages/function/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/function",
-  "version": "0.10.4",
+  "version": "0.11.7",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",

packages/opencode/package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "0.10.4",
+  "version": "0.11.7",
   "name": "opencode",
   "type": "module",
   "private": true,

packages/opencode/script/build.ts

@@ -29,9 +29,9 @@ for (const [os, arch] of targets) {
   console.log(`building ${os}-${arch}`)
   const name = `${pkg.name}-${os}-${arch}`
   await $`mkdir -p dist/${name}/bin`
-  await $`CGO_ENABLED=0 GOOS=${os} GOARCH=${GOARCH[arch]} go build -ldflags="-s -w -X main.Version=${version}" -o ../opencode/dist/${name}/bin/tui ../tui/cmd/opencode/main.go`.cwd(
-    "../tui",
-  )
+  await $`CGO_ENABLED=0 GOOS=${os} GOARCH=${GOARCH[arch]} go build -ldflags="-s -w -X main.Version=${version}" -o ../opencode/dist/${name}/bin/tui ../tui/cmd/opencode/main.go`
+    .cwd("../tui")
+    .quiet()
   await Bun.build({
     compile: {
       target: `bun-${os}-${arch}` as any,

packages/opencode/script/publish.ts

@@ -5,10 +5,14 @@ import { $ } from "bun"
 
 import pkg from "../package.json"
 
-const dry = process.env["OPENCODE_DRY"] === "true"
-const version = process.env["OPENCODE_VERSION"]!
 const snapshot = process.env["OPENCODE_SNAPSHOT"] === "true"
-const npmTag = snapshot ? "snapshot" : "latest"
+let version = process.env["OPENCODE_VERSION"]
+const tag = process.env["OPENCODE_TAG"] ?? (snapshot ? "snapshot" : "latest")
+if (!version && snapshot) {
+  version = `0.0.0-${tag}-${new Date().toISOString().slice(0, 16).replace(/[-:T]/g, "")}`
+  process.env["OPENCODE_VERSION"] = version
+}
+if (!version) throw new Error("OPENCODE_VERSION is required")
 
 console.log(`publishing ${version}`)
 
@@ -41,12 +45,10 @@ await Bun.file(`./dist/${pkg.name}/package.json`).write(
     2,
   ),
 )
-if (!dry) {
-  for (const [name] of Object.entries(binaries)) {
-    await $`cd dist/${name} && chmod 777 -R . && bun publish --access public --tag ${npmTag}`
-  }
-  await $`cd ./dist/${pkg.name} && bun publish --access public --tag ${npmTag}`
+for (const [name] of Object.entries(binaries)) {
+  await $`cd dist/${name} && chmod 777 -R . && bun publish --access public --tag ${tag}`
 }
+await $`cd ./dist/${pkg.name} && bun publish --access public --tag ${tag}`
 
 if (!snapshot) {
   for (const key of Object.keys(binaries)) {
@@ -142,7 +144,7 @@ if (!snapshot) {
     await $`cd ./dist/aur-${pkg} && makepkg --printsrcinfo > .SRCINFO`
     await $`cd ./dist/aur-${pkg} && git add PKGBUILD .SRCINFO`
     await $`cd ./dist/aur-${pkg} && git commit -m "Update to v${version}"`
-    if (!dry) await $`cd ./dist/aur-${pkg} && git push`
+    await $`cd ./dist/aur-${pkg} && git push`
   }
 
   // Homebrew formula
@@ -201,5 +203,5 @@ if (!snapshot) {
   await Bun.file("./dist/homebrew-tap/opencode.rb").write(homebrewFormula)
   await $`cd ./dist/homebrew-tap && git add opencode.rb`
   await $`cd ./dist/homebrew-tap && git commit -m "Update to v${version}"`
-  if (!dry) await $`cd ./dist/homebrew-tap && git push`
+  await $`cd ./dist/homebrew-tap && git push`
 }

packages/opencode/src/cli/cmd/run.ts

@@ -64,6 +64,12 @@ export const RunCommand = cmd({
         type: "string",
         describe: "agent to use",
       })
+      .option("format", {
+        type: "string",
+        choices: ["default", "json"],
+        default: "default",
+        describe: "format: default (formatted) or json (raw JSON events)",
+      })
   },
   handler: async (args) => {
     let message = args.message.join(" ")
@@ -144,6 +150,20 @@ export const RunCommand = cmd({
         )
       }
 
+      function outputJsonEvent(type: string, data: any) {
+        if (args.format === "json") {
+          const jsonEvent = {
+            type,
+            timestamp: Date.now(),
+            sessionID: session?.id,
+            ...data,
+          }
+          process.stdout.write(JSON.stringify(jsonEvent) + "\n")
+          return true
+        }
+        return false
+      }
+
       let text = ""
 
       Bus.subscribe(MessageV2.Event.PartUpdated, async (evt) => {
@@ -152,6 +172,7 @@ export const RunCommand = cmd({
         const part = evt.properties.part
 
         if (part.type === "tool" && part.state.status === "completed") {
+          if (outputJsonEvent("tool_use", { part })) return
           const [tool, color] = TOOL[part.tool] ?? [part.tool, UI.Style.TEXT_INFO_BOLD]
           const title =
             part.state.title ||
@@ -169,6 +190,7 @@ export const RunCommand = cmd({
           text = part.text
 
           if (part.time?.end) {
+            if (outputJsonEvent("text", { part })) return
             UI.empty()
             UI.println(UI.markdown(text))
             UI.empty()
@@ -189,6 +211,7 @@ export const RunCommand = cmd({
         }
         errorMsg = errorMsg ? errorMsg + "\n" + err : err
 
+        if (outputJsonEvent("error", { error })) return
         UI.error(err)
       })
 
@@ -225,6 +248,7 @@ export const RunCommand = cmd({
       const isPiped = !process.stdout.isTTY
       if (isPiped) {
         const match = result.parts.findLast((x: any) => x.type === "text") as any
+        if (outputJsonEvent("text", { text: match })) return
         if (match) process.stdout.write(UI.markdown(match.text))
         if (errorMsg) process.stdout.write(errorMsg)
       }

packages/opencode/src/cli/cmd/tui.ts

@@ -9,7 +9,6 @@ import { Installation } from "../../installation"
 import { Config } from "../../config/config"
 import { Bus } from "../../bus"
 import { Log } from "../../util/log"
-import { FileWatcher } from "../../file/watcher"
 import { Ide } from "../../ide"
 
 import { Flag } from "../../flag/flag"
@@ -178,7 +177,6 @@ export const TuiCommand = cmd({
             .then(() => Bus.publish(Ide.Event.Installed, { ide }))
             .catch(() => {})
         })()
-        FileWatcher.init()
 
         await proc.exited
         server.stop()

packages/opencode/src/config/config.ts

@@ -14,6 +14,7 @@ import { Flag } from "../flag/flag"
 import { Auth } from "../auth"
 import { type ParseError as JsoncParseError, parse as parseJsonc, printParseErrorCode } from "jsonc-parser"
 import { Instance } from "../project/instance"
+import { LSPServer } from "../lsp/server"
 
 export namespace Config {
   const log = Log.create({ service: "config" })
@@ -48,6 +49,8 @@ export namespace Config {
     }
 
     result.agent = result.agent || {}
+    result.mode = result.mode || {}
+    result.plugin = result.plugin || []
 
     const directories = [
       Global.Path.config,
@@ -56,109 +59,14 @@ export namespace Config {
       )),
     ]
 
-    const markdownAgents = [
-      ...(await Filesystem.globUp("agent/**/*.md", Global.Path.config, Global.Path.config)),
-      ...(await Filesystem.globUp(".opencode/agent/**/*.md", Instance.directory, Instance.worktree)),
-    ]
-    for (const item of markdownAgents) {
-      const content = await Bun.file(item).text()
-      const md = matter(content)
-      if (!md.data) continue
-
-      // Extract relative path from agent folder for nested agents
-      let agentName = path.basename(item, ".md")
-      const agentFolderPath = item.includes("/.opencode/agent/")
-        ? item.split("/.opencode/agent/")[1]
-        : item.includes("/agent/")
-          ? item.split("/agent/")[1]
-          : agentName + ".md"
-
-      // If agent is in a subfolder, include folder path in name
-      if (agentFolderPath.includes("/")) {
-        const relativePath = agentFolderPath.replace(".md", "")
-        const pathParts = relativePath.split("/")
-        agentName = pathParts.slice(0, -1).join("/") + "/" + pathParts[pathParts.length - 1]
-      }
-
-      const config = {
-        name: agentName,
-        ...md.data,
-        prompt: md.content.trim(),
-      }
-      const parsed = Agent.safeParse(config)
-      if (parsed.success) {
-        result.agent = mergeDeep(result.agent, {
-          [config.name]: parsed.data,
-        })
-        continue
-      }
-      throw new InvalidError({ path: item }, { cause: parsed.error })
+    for (const dir of directories) {
+      await assertValid(dir)
+      result.command = mergeDeep(result.command ?? {}, await loadCommand(dir))
+      result.agent = mergeDeep(result.agent, await loadAgent(dir))
+      result.agent = mergeDeep(result.agent, await loadMode(dir))
+      result.plugin.push(...(await loadPlugin(dir)))
     }
 
-    // Load mode markdown files
-    result.mode = result.mode || {}
-    const markdownModes = [
-      ...(await Filesystem.globUp("mode/*.md", Global.Path.config, Global.Path.config)),
-      ...(await Filesystem.globUp(".opencode/mode/*.md", Instance.directory, Instance.worktree)),
-    ]
-    for (const item of markdownModes) {
-      const content = await Bun.file(item).text()
-      const md = matter(content)
-      if (!md.data) continue
-
-      const config = {
-        name: path.basename(item, ".md"),
-        ...md.data,
-        prompt: md.content.trim(),
-      }
-      const parsed = Agent.safeParse(config)
-      if (parsed.success) {
-        result.agent = mergeDeep(result.mode, {
-          [config.name]: {
-            ...parsed.data,
-            mode: "primary" as const,
-          },
-        })
-        continue
-      }
-    }
-
-    // Load command markdown files
-    result.command = result.command || {}
-    const markdownCommands = [
-      ...(await Filesystem.globUp("command/**/*.md", Global.Path.config, Global.Path.config)),
-      ...(await Filesystem.globUp(".opencode/command/**/*.md", Instance.directory, Instance.worktree)),
-    ]
-    for (const item of markdownCommands) {
-      const content = await Bun.file(item).text()
-      const md = matter(content)
-      if (!md.data) continue
-
-      const name = (() => {
-        const patterns = ["/.opencode/command/", "/command/"]
-        const pattern = patterns.find((p) => item.includes(p))
-
-        if (pattern) {
-          const index = item.indexOf(pattern)
-          return item.slice(index + pattern.length, -3)
-        }
-        return path.basename(item, ".md")
-      })()
-
-      const config = {
-        name,
-        ...md.data,
-        template: md.content.trim(),
-      }
-      const parsed = Command.safeParse(config)
-      if (parsed.success) {
-        result.command = mergeDeep(result.command, {
-          [config.name]: parsed.data,
-        })
-        continue
-      }
-      throw new InvalidError({ path: item }, { cause: parsed.error })
-    }
     // Migrate deprecated mode field to agent field
     for (const [name, mode] of Object.entries(result.mode)) {
       result.agent = mergeDeep(result.agent ?? {}, {
@@ -169,14 +77,6 @@ export namespace Config {
       })
     }
 
-    result.plugin = result.plugin || []
-    result.plugin.push(
-      ...[
-        ...(await Filesystem.globUp("plugin/*.{ts,js}", Global.Path.config, Global.Path.config)),
-        ...(await Filesystem.globUp(".opencode/plugin/*.{ts,js}", Instance.directory, Instance.worktree)),
-      ].map((x) => "file://" + x),
-    )
-
     if (Flag.OPENCODE_PERMISSION) {
       result.permission = mergeDeep(result.permission ?? {}, JSON.parse(Flag.OPENCODE_PERMISSION))
     }
@@ -217,6 +117,128 @@ export namespace Config {
     }
   })
 
+  async function assertValid(dir: string) {
+    const ALLOWED_DIRS = new Set(["agent", "command", "mode", "plugin", "tool", "themes"])
+    const UNEXPECTED_DIR_GLOB = new Bun.Glob("*/")
+    for await (const item of UNEXPECTED_DIR_GLOB.scan({ absolute: true, cwd: dir, onlyFiles: false })) {
+      const dirname = path.basename(item)
+      if (!ALLOWED_DIRS.has(dirname)) {
+        throw new InvalidError({
+          path: dir,
+          message: `Unexpected directory "${dirname}" found in "${dir}". Only ${ALLOWED_DIRS.values().toArray().join(", ")} directories are allowed.`,
+        })
+      }
+    }
+  }
+
+  const COMMAND_GLOB = new Bun.Glob("command/**/*.md")
+  async function loadCommand(dir: string) {
+    const result: Record<string, Command> = {}
+    for await (const item of COMMAND_GLOB.scan({ absolute: true, cwd: dir })) {
+      const content = await Bun.file(item).text()
+      const md = matter(content)
+      if (!md.data) continue
+
+      const name = (() => {
+        const patterns = ["/.opencode/command/", "/command/"]
+        const pattern = patterns.find((p) => item.includes(p))
+
+        if (pattern) {
+          const index = item.indexOf(pattern)
+          return item.slice(index + pattern.length, -3)
+        }
+        return path.basename(item, ".md")
+      })()
+
+      const config = {
+        name,
+        ...md.data,
+        template: md.content.trim(),
+      }
+      const parsed = Command.safeParse(config)
+      if (parsed.success) {
+        result[config.name] = parsed.data
+        continue
+      }
+      throw new InvalidError({ path: item }, { cause: parsed.error })
+    }
+    return result
+  }
+
+  const AGENT_GLOB = new Bun.Glob("agent/**/*.md")
+  async function loadAgent(dir: string) {
+    const result: Record<string, Agent> = {}
+
+    for await (const item of AGENT_GLOB.scan({ absolute: true, cwd: dir })) {
+      const content = await Bun.file(item).text()
+      const md = matter(content)
+      if (!md.data) continue
+
+      // Extract relative path from agent folder for nested agents
+      let agentName = path.basename(item, ".md")
+      const agentFolderPath = item.includes("/.opencode/agent/")
+        ? item.split("/.opencode/agent/")[1]
+        : item.includes("/agent/")
+          ? item.split("/agent/")[1]
+          : agentName + ".md"
+
+      // If agent is in a subfolder, include folder path in name
+      if (agentFolderPath.includes("/")) {
+        const relativePath = agentFolderPath.replace(".md", "")
+        const pathParts = relativePath.split("/")
+        agentName = pathParts.slice(0, -1).join("/") + "/" + pathParts[pathParts.length - 1]
+      }
+
+      const config = {
+        name: agentName,
+        ...md.data,
+        prompt: md.content.trim(),
+      }
+      const parsed = Agent.safeParse(config)
+      if (parsed.success) {
+        result[config.name] = parsed.data
+        continue
+      }
+      throw new InvalidError({ path: item }, { cause: parsed.error })
+    }
+    return result
+  }
+
+  const MODE_GLOB = new Bun.Glob("mode/*.md")
+  async function loadMode(dir: string) {
+    const result: Record<string, Agent> = {}
+    for await (const item of MODE_GLOB.scan({ absolute: true, cwd: dir })) {
+      const content = await Bun.file(item).text()
+      const md = matter(content)
+      if (!md.data) continue
+
+      const config = {
+        name: path.basename(item, ".md"),
+        ...md.data,
+        prompt: md.content.trim(),
+      }
+      const parsed = Agent.safeParse(config)
+      if (parsed.success) {
+        result[config.name] = {
+          ...parsed.data,
+          mode: "primary" as const,
+        }
+        continue
+      }
+    }
+    return result
+  }
+
+  const PLUGIN_GLOB = new Bun.Glob("plugin/*.{ts,js}")
+  async function loadPlugin(dir: string) {
+    const plugins: string[] = []
+
+    for await (const item of PLUGIN_GLOB.scan({ absolute: true, cwd: dir })) {
+      plugins.push("file://" + item)
+    }
+    return plugins
+  }
+
   export const McpLocal = z
     .object({
       type: z.literal("local").describe("Type of MCP server connection"),
@@ -482,7 +504,22 @@ export namespace Config {
             }),
           ]),
         )
-        .optional(),
+        .optional()
+        .refine(
+          (data) => {
+            if (!data) return true
+            const serverIds = new Set(Object.values(LSPServer).map((s) => s.id))
+
+            return Object.entries(data).every(([id, config]) => {
+              if (config.disabled) return true
+              if (serverIds.has(id)) return true
+              return Boolean(config.extensions)
+            })
+          },
+          {
+            error: "For custom LSP servers, 'extensions' array is required.",
+          },
+        ),
       instructions: z.array(z.string()).optional().describe("Additional instruction files or patterns to include"),
       layout: Layout.optional().describe("@deprecated Always uses stretch layout."),
       permission: z
@@ -670,6 +707,13 @@ export namespace Config {
     return state().then((x) => x.config)
   }
 
+  export async function update(config: Info) {
+    const filepath = path.join(Instance.directory, "config.json")
+    const existing = await loadFile(filepath)
+    await Bun.write(filepath, JSON.stringify(mergeDeep(existing, config), null, 2))
+    await Instance.dispose()
+  }
+
   export async function directories() {
     return state().then((x) => x.directories)
   }

packages/opencode/src/file/ignore.ts

@@ -6,9 +6,6 @@ export namespace FileIgnore {
     "**/.pnpm-store/**",
     "**/vendor/**",
 
-    // vcs
-    "**/.git/**",
-
     // Build outputs
     "**/dist/**",
     "**/build/**",
@@ -50,8 +47,12 @@ export namespace FileIgnore {
     filepath: string,
     opts: {
       extra?: Bun.Glob[]
+      whitelist?: Bun.Glob[]
     },
   ) {
+    for (const glob of opts.whitelist || []) {
+      if (glob.match(filepath)) return false
+    }
     const extra = opts.extra || []
     for (const glob of [...GLOBS, ...extra]) {
       if (glob.match(filepath)) return true

packages/opencode/src/file/watcher.ts

@@ -28,9 +28,9 @@ export namespace FileWatcher {
       const ignore = (cfg.watcher?.ignore ?? []).map((v) => new Bun.Glob(v))
       const watcher = chokidar.watch(Instance.directory, {
         ignoreInitial: true,
-        awaitWriteFinish: true,
         ignored: (filepath) => {
           return FileIgnore.match(filepath, {
+            whitelist: [new Bun.Glob("**/.git/{index,logs/HEAD}")],
             extra: ignore,
           })
         },

packages/opencode/src/lsp/index.ts

@@ -72,7 +72,7 @@ export namespace LSP {
           ...existing,
           id: name,
           root: existing?.root ?? (async () => Instance.directory),
-          extensions: item.extensions ?? existing.extensions,
+          extensions: item.extensions ?? existing?.extensions ?? [],
           spawn: async (root) => {
             return {
               process: spawn(item.command[0], item.command.slice(1), {
@@ -126,13 +126,22 @@ export namespace LSP {
         result.push(match)
         continue
       }
-      log.info("spawning lsp server", { serverID: server.id })
-      const handle = await server.spawn(root).catch((err) => {
-        s.broken.add(root + server.id)
-        log.error(`Failed to spawn LSP server ${server.id}`, { error: err })
-        return undefined
-      })
+      const handle = await server
+        .spawn(root)
+        .then((h) => {
+          if (h === undefined) {
+            s.broken.add(root + server.id)
+          }
+          return h
+        })
+        .catch((err) => {
+          s.broken.add(root + server.id)
+          log.error(`Failed to spawn LSP server ${server.id}`, { error: err })
+          return undefined
+        })
       if (!handle) continue
+      log.info("spawned lsp server", { serverID: server.id })
+
       const client = await LSPClient.create({
         serverID: server.id,
         server: handle,

packages/opencode/src/lsp/server.ts

@@ -1,5 +1,6 @@
 import { spawn, type ChildProcessWithoutNullStreams } from "child_process"
 import path from "path"
+import os from "os"
 import { Global } from "../global"
 import { Log } from "../util/log"
 import { BunProc } from "../bun"
@@ -706,4 +707,91 @@ export namespace LSPServer {
       }
     },
   }
+
+  export const JDTLS: Info = {
+    id: "jdtls",
+    root: NearestRoot(["pom.xml", "build.gradle", "build.gradle.kts", ".project", ".classpath"]),
+    extensions: [".java"],
+    async spawn(root) {
+      const java = Bun.which("java")
+      if (!java) {
+        log.error("Java 21 or newer is required to run the JDTLS. Please install it first.")
+        return
+      }
+      const javaMajorVersion = await $`java -version`
+        .quiet()
+        .nothrow()
+        .then(({ stderr }) => {
+          const m = /"(\d+)\.\d+\.\d+"/.exec(stderr.toString())
+          return !m ? undefined : parseInt(m[1])
+        })
+      if (javaMajorVersion == null || javaMajorVersion < 21) {
+        log.error("JDTLS requires at least Java 21.")
+        return
+      }
+      const distPath = path.join(Global.Path.bin, "jdtls")
+      const launcherDir = path.join(distPath, "plugins")
+      const installed = await fs.exists(launcherDir)
+      if (!installed) {
+        if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
+        log.info("Downloading JDTLS LSP server.")
+        await fs.mkdir(distPath, { recursive: true })
+        const releaseURL =
+          "https://www.eclipse.org/downloads/download.php?file=/jdtls/snapshots/jdt-language-server-latest.tar.gz"
+        const archivePath = path.join(distPath, "release.tar.gz")
+        await $`curl -L -o '${archivePath}' '${releaseURL}'`.quiet().nothrow()
+        await $`tar -xzf ${archivePath}`.cwd(distPath).quiet().nothrow()
+        await fs.rm(archivePath, { force: true })
+      }
+      const jarFileName = await $`ls org.eclipse.equinox.launcher_*.jar`
+        .cwd(launcherDir)
+        .quiet()
+        .nothrow()
+        .then(({ stdout }) => stdout.toString().trim())
+      const launcherJar = path.join(launcherDir, jarFileName)
+      if (!(await fs.exists(launcherJar))) {
+        log.error(`Failed to locate the JDTLS launcher module in the installed directory: ${distPath}.`)
+        return
+      }
+      const configFile = path.join(
+        distPath,
+        (() => {
+          switch (process.platform) {
+            case "darwin":
+              return "config_mac"
+            case "linux":
+              return "config_linux"
+            case "win32":
+              return "config_windows"
+            default:
+              return "config_linux"
+          }
+        })(),
+      )
+      const dataDir = await fs.mkdtemp(path.join(os.tmpdir(), "opencode-jdtls-data"))
+      return {
+        process: spawn(
+          java,
+          [
+            "-jar",
+            launcherJar,
+            "-configuration",
+            configFile,
+            "-data",
+            dataDir,
+            "-Declipse.application=org.eclipse.jdt.ls.core.id1",
+            "-Dosgi.bundles.defaultStartLevel=4",
+            "-Declipse.product=org.eclipse.jdt.ls.core.product",
+            "-Dlog.level=ALL",
+            "--add-modules=ALL-SYSTEM",
+            "--add-opens java.base/java.util=ALL-UNNAMED",
+            "--add-opens java.base/java.lang=ALL-UNNAMED",
+          ],
+          {
+            cwd: root,
+          },
+        ),
+      }
+    },
+  }
 }

packages/opencode/src/plugin/index.ts

@@ -27,7 +27,7 @@ export namespace Plugin {
     }
     const plugins = [...(config.plugin ?? [])]
     if (!Flag.OPENCODE_DISABLE_DEFAULT_PLUGINS) {
-      plugins.push("opencode-copilot-auth@0.0.2")
+      plugins.push("opencode-copilot-auth@0.0.3")
       plugins.push("opencode-anthropic-auth@0.0.2")
     }
     for (let plugin of plugins) {

packages/opencode/src/provider/provider.ts

@@ -16,10 +16,7 @@ import { Flag } from "../flag/flag"
 export namespace Provider {
   const log = Log.create({ service: "provider" })
 
-  type CustomLoader = (
-    provider: ModelsDev.Provider,
-    api?: string,
-  ) => Promise<{
+  type CustomLoader = (provider: ModelsDev.Provider) => Promise<{
     autoload: boolean
     getModel?: (sdk: any, modelID: string) => Promise<any>
     options?: Record<string, any>
@@ -40,6 +37,19 @@ export namespace Provider {
       }
     },
     async opencode(input) {
+      const hasKey = await (async () => {
+        if (input.env.some((item) => process.env[item])) return true
+        if (await Auth.get(input.id)) return true
+        return false
+      })()
+
+      if (!hasKey) {
+        for (const [key, value] of Object.entries(input.models)) {
+          if (value.cost.input === 0) continue
+          delete input.models[key]
+        }
+      }
+
       return {
         autoload: Object.keys(input.models).length > 0,
         options: {},
@@ -328,6 +338,9 @@ export namespace Provider {
       const s = await state()
       const pkg = model.provider?.npm ?? provider.npm ?? provider.id
       const options = { ...s.providers[provider.id]?.options }
+      if (pkg.includes("@ai-sdk/openai-compatible") && options["includeUsage"] === undefined) {
+        options["includeUsage"] = true
+      }
       const key = Bun.hash.xxHash32(JSON.stringify({ pkg, options }))
       const existing = s.sdk.get(key)
       if (existing) return existing

packages/opencode/src/provider/transform.ts

@@ -92,14 +92,14 @@ export namespace ProviderTransform {
     }
 
     if (modelID.includes("gpt-5") && !modelID.includes("gpt-5-chat")) {
-      result["reasoningEffort"] = "high"
+      result["reasoningEffort"] = "medium"
       if (providerID !== "azure") {
-        result["textVerbosity"] = "low"
+        result["textVerbosity"] = modelID.includes("codex") ? "medium" : "low"
       }
       if (providerID === "opencode") {
         result["promptCacheKey"] = sessionID
-        // result["include"] = ["reasoning.encrypted_content"]
-        // result["reasoningSummary"] = "detailed"
+        result["include"] = ["reasoning.encrypted_content"]
+        result["reasoningSummary"] = "detailed"
       }
     }
     return result

packages/opencode/src/server/server.ts

@@ -135,6 +135,30 @@ export namespace Server {
           return c.json(await Config.get())
         },
       )
+      .patch(
+        "/config",
+        describeRoute({
+          description: "Update config",
+          operationId: "config.update",
+          responses: {
+            200: {
+              description: "Successfully updated config",
+              content: {
+                "application/json": {
+                  schema: resolver(Config.Info),
+                },
+              },
+            },
+            ...ERRORS,
+          },
+        }),
+        validator("json", Config.Info),
+        async (c) => {
+          const config = c.req.valid("json")
+          await Config.update(config)
+          return c.json(config)
+        },
+      )
       .get(
         "/experimental/tool/ids",
         describeRoute({

packages/opencode/src/session/message-v2.ts

@@ -115,6 +115,7 @@ export namespace MessageV2 {
         end: z.number().optional(),
       })
       .optional(),
+    metadata: z.record(z.string(), z.any()).optional(),
   }).meta({
     ref: "TextPart",
   })
@@ -138,6 +139,7 @@ export namespace MessageV2 {
     callID: z.string(),
     tool: z.string(),
     state: ToolState,
+    metadata: z.record(z.string(), z.any()).optional(),
   }).meta({
     ref: "ToolPart",
   })
@@ -519,6 +521,7 @@ export namespace MessageV2 {
                 {
                   type: "text",
                   text: part.text,
+                  providerMetadata: part.metadata,
                 },
               ]
             if (part.type === "step-start")
@@ -536,6 +539,7 @@ export namespace MessageV2 {
                     toolCallId: part.callID,
                     input: part.state.input,
                     output: part.state.time.compacted ? "[Old tool result content cleared]" : part.state.output,
+                    callProviderMetadata: part.metadata,
                   },
                 ]
               if (part.state.status === "error")
@@ -546,6 +550,7 @@ export namespace MessageV2 {
                     toolCallId: part.callID,
                     input: part.state.input,
                     errorText: part.state.error,
+                    callProviderMetadata: part.metadata,
                   },
                 ]
             }

packages/opencode/src/session/prompt.ts

@@ -892,6 +892,7 @@ export namespace SessionPrompt {
                   time: {
                     start: Date.now(),
                   },
+                  metadata: value.providerMetadata,
                 }
                 break
 
@@ -913,6 +914,7 @@ export namespace SessionPrompt {
                     ...part.time,
                     end: Date.now(),
                   }
+                  if (value.providerMetadata) part.metadata = value.providerMetadata
                   await Session.updatePart(part)
                   delete reasoningMap[value.id]
                 }
@@ -952,6 +954,7 @@ export namespace SessionPrompt {
                         start: Date.now(),
                       },
                     },
+                    metadata: value.providerMetadata,
                   })
                   toolcalls[value.toolCallId] = part as MessageV2.ToolPart
                 }
@@ -1054,12 +1057,14 @@ export namespace SessionPrompt {
                   time: {
                     start: Date.now(),
                   },
+                  metadata: value.providerMetadata,
                 }
                 break
 
               case "text-delta":
                 if (currentText) {
                   currentText.text += value.text
+                  if (value.providerMetadata) currentText.metadata = value.providerMetadata
                   if (currentText.text) await Session.updatePart(currentText)
                 }
                 break
@@ -1071,6 +1076,7 @@ export namespace SessionPrompt {
                     start: Date.now(),
                     end: Date.now(),
                   }
+                  if (value.providerMetadata) currentText.metadata = value.providerMetadata
                   await Session.updatePart(currentText)
                 }
                 currentText = undefined

packages/opencode/src/storage/storage.ts

@@ -14,7 +14,10 @@ export namespace Storage {
   const MIGRATIONS: Migration[] = [
     async (dir) => {
       const project = path.resolve(dir, "../project")
-      for await (const projectDir of new Bun.Glob("*").scan({ cwd: project, onlyFiles: false })) {
+      for await (const projectDir of new Bun.Glob("*").scan({
+        cwd: project,
+        onlyFiles: false,
+      })) {
         log.info(`migrating project ${projectDir}`)
         let projectID = projectDir
         const fullProjectDir = path.join(project, projectDir)

packages/plugin/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/plugin",
-  "version": "0.10.4",
+  "version": "0.11.7",
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit",

packages/sdk/js/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/sdk",
-  "version": "0.10.4",
+  "version": "0.11.7",
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit",

packages/sdk/js/src/gen/sdk.gen.ts

@@ -8,6 +8,9 @@ import type {
   ProjectCurrentResponses,
   ConfigGetData,
   ConfigGetResponses,
+  ConfigUpdateData,
+  ConfigUpdateResponses,
+  ConfigUpdateErrors,
   ToolIdsData,
   ToolIdsResponses,
   ToolIdsErrors,
@@ -161,6 +164,20 @@ class Config extends _HeyApiClient {
     })
   }
 
+  /**
+   * Update config
+   */
+  public update<ThrowOnError extends boolean = false>(options?: Options<ConfigUpdateData, ThrowOnError>) {
+    return (options?.client ?? this._client).patch<ConfigUpdateResponses, ConfigUpdateErrors, ThrowOnError>({
+      url: "/config",
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        ...options?.headers,
+      },
+    })
+  }
+
   /**
    * List all providers
    */

packages/sdk/js/src/gen/types.gen.ts

@@ -504,14 +504,14 @@ export type Config = {
   }
 }
 
-export type ToolIds = Array<string>
-
 export type _Error = {
   data: {
     [key: string]: unknown
   }
 }
 
+export type ToolIds = Array<string>
+
 export type ToolListItem = {
   id: string
   description: string
@@ -631,6 +631,9 @@ export type TextPart = {
     start: number
     end?: number
   }
+  metadata?: {
+    [key: string]: unknown
+  }
 }
 
 export type ReasoningPart = {
@@ -751,6 +754,9 @@ export type ToolPart = {
   callID: string
   tool: string
   state: ToolState
+  metadata?: {
+    [key: string]: unknown
+  }
 }
 
 export type StepStartPart = {
@@ -827,6 +833,9 @@ export type TextPartInput = {
     start: number
     end?: number
   }
+  metadata?: {
+    [key: string]: unknown
+  }
 }
 
 export type FilePartInput = {
@@ -1200,6 +1209,33 @@ export type ConfigGetResponses = {
 
 export type ConfigGetResponse = ConfigGetResponses[keyof ConfigGetResponses]
 
+export type ConfigUpdateData = {
+  body?: Config
+  path?: never
+  query?: {
+    directory?: string
+  }
+  url: "/config"
+}
+
+export type ConfigUpdateErrors = {
+  /**
+   * Bad request
+   */
+  400: _Error
+}
+
+export type ConfigUpdateError = ConfigUpdateErrors[keyof ConfigUpdateErrors]
+
+export type ConfigUpdateResponses = {
+  /**
+   * Successfully updated config
+   */
+  200: Config
+}
+
+export type ConfigUpdateResponse = ConfigUpdateResponses[keyof ConfigUpdateResponses]
+
 export type ToolIdsData = {
   body?: never
   path?: never

packages/tui/internal/tui/tui.go

@@ -956,13 +956,16 @@ func (a Model) home() (string, int, int) {
 	muted := styles.NewStyle().Foreground(t.TextMuted()).Background(t.Background()).Render
 
 	open := `
-█▀▀█ █▀▀█ █▀▀ █▀▀▄ 
-█░░█ █░░█ █▀▀ █░░█ 
-▀▀▀▀ █▀▀▀ ▀▀▀ ▀  ▀ `
+                    
+█▀▀█ █▀▀█ █▀▀█ █▀▀▄ 
+█░░█ █░░█ █▀▀▀ █░░█ 
+▀▀▀▀ █▀▀▀ ▀▀▀▀ ▀  ▀ `
+
 	code := `
-█▀▀ █▀▀█ █▀▀▄ █▀▀
-█░░ █░░█ █░░█ █▀▀
-▀▀▀ ▀▀▀▀ ▀▀▀  ▀▀▀`
+             ▄
+█▀▀▀ █▀▀█ █▀▀█ █▀▀█
+█░░░ █░░█ █░░█ █▀▀▀
+▀▀▀▀ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀`
 
 	logo := lipgloss.JoinHorizontal(
 		lipgloss.Top,
@@ -988,9 +991,9 @@ func (a Model) home() (string, int, int) {
 	)
 
 	// Use limit of 4 for vscode, 6 for others
-	limit := 6
+	limit := 5
 	if util.IsVSCode() {
-		limit = 4
+		limit = 3
 	}
 
 	showVscode := util.IsVSCode()
@@ -1039,9 +1042,11 @@ func (a Model) home() (string, int, int) {
 	)
 
 	editorX := max(0, (effectiveWidth-editorWidth)/2)
-	editorY := (a.height / 2) + (mainHeight / 2) - 2
+	editorY := (a.height / 2) + (mainHeight / 2) - 3
+	editorYDelta := 3
 
 	if editorLines > 1 {
+		editorYDelta = 2
 		content := a.editor.Content()
 		editorHeight := lipgloss.Height(content)
 
@@ -1070,7 +1075,7 @@ func (a Model) home() (string, int, int) {
 		)
 	}
 
-	return mainLayout, editorX + 5, editorY + 2
+	return mainLayout, editorX + 5, editorY + editorYDelta
 }
 
 func (a Model) chat() (string, int, int) {

packages/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opencode/web",
   "type": "module",
-  "version": "0.10.4",
+  "version": "0.11.7",
   "scripts": {
     "dev": "astro dev",
     "dev:remote": "VITE_API_URL=https://api.opencode.ai astro dev",

packages/web/src/content/docs/agents.mdx

@@ -495,9 +495,7 @@ For quick reference, here are common setups.
 }
 ```
 
-See the full permissions guide for more patterns.
-
-- /docs/permissions
+See the full [permissions guide](/docs/permissions) for more patterns.
 
 ---
 

packages/web/src/content/docs/cli.mdx

@@ -144,6 +144,8 @@ opencode models
 
 This command displays all models available across your configured providers in the format `provider/model`.
 
+This is useful for figuring out the exact model name to use in [your config](/docs/config/).
+
 ---
 
 ### run

packages/web/src/content/docs/custom-tools.mdx

@@ -1,20 +1,32 @@
 ---
-title: Custom tools
-description: Create custom tools to extend opencode capabilities.
+title: Custom Tools
+description: Create tools the LLM can call in opencode.
 ---
 
 Custom tools are functions you create that the LLM can call during conversations. They work alongside opencode's built-in tools like `read`, `write`, and `bash`.
 
 ---
 
-## Tool structure
+## Creating a tool
 
-Tools are defined as `.ts/.js` files in the `.opencode/tool/` directory. They
-can also be defined globally in `~/.config/opencode/tool/`.
+Tools are defined as **TypeScript** or **JavaScript** files.
 
-The easiest way to create tools is using the `tool()` helper which provides type safety and validation. Use `tool.schema` (which is just [Zod](https://zod.dev)) to define argument types:
+---
 
-```ts title=".opencode/tool/database.ts"
+### Location
+
+They can defined:
+
+- Locally by placing them in the `.opencode/tool/` directory of your project.
+- Or globally, by placing them in `~/.config/opencode/tool/`.
+
+---
+
+### Structure
+
+The easiest way to create tools is using the `tool()` helper which provides type-safety and validation.
+
+```ts title=".opencode/tool/database.ts" {1}
 import { tool } from "@opencode-ai/plugin"
 
 export default tool({
@@ -29,9 +41,23 @@ export default tool({
 })
 ```
 
+The **filename** becomes the **tool name**. The above creates a `database` tool.
+
+---
+
+### Arguments
+
+You can use `tool.schema`, which is just [Zod](https://zod.dev), to define argument types.
+
+```ts "tool.schema"
+args: {
+  query: tool.schema.string().describe("SQL query to execute")
+}
+```
+
 You can also import [Zod](https://zod.dev) directly and return a plain object:
 
-```ts
+```ts {6}
 import { z } from "zod"
 
 export default {
@@ -46,13 +72,31 @@ export default {
 }
 ```
 
-The filename becomes the tool name. This creates a `database` tool.
+---
+
+## Context
+
+Tools receive context about the current session:
+
+```ts title=".opencode/tool/project.ts" {8}
+import { tool } from "@opencode-ai/plugin"
+
+export default tool({
+  description: "Get project information",
+  args: {},
+  async execute(args, context) {
+    // Access context information
+    const { agent, sessionID, messageID } = context
+    return `Agent: ${agent}, Session: ${sessionID}, Message: ${messageID}`
+  },
+})
+```
 
 ---
 
 ## Multiple tools per file
 
-You can export multiple tools from a single file. Each export becomes a separate tool with the name `<filename>_<exportname>`:
+You can also export multiple tools from a single file. Each export becomes **a separate tool** with the name **`<filename>_<exportname>`**:
 
 ```ts title=".opencode/tool/math.ts"
 import { tool } from "@opencode-ai/plugin"
@@ -81,45 +125,3 @@ export const multiply = tool({
 ```
 
 This creates two tools: `math_add` and `math_multiply`.
-
----
-
-## Arguments
-
-Use `tool.schema` (which is just [Zod](https://zod.dev)) to define tool arguments with validation and descriptions:
-
-```ts title=".opencode/tool/calculator.ts"
-import { tool } from "@opencode-ai/plugin"
-
-export default tool({
-  description: "Perform mathematical calculations",
-  args: {
-    expression: tool.schema.string().describe("Mathematical expression to evaluate"),
-    precision: tool.schema.number().optional().describe("Decimal precision"),
-  },
-  async execute(args) {
-    // Your calculation logic here
-    return `Result: ${eval(args.expression).toFixed(args.precision || 2)}`
-  },
-})
-```
-
----
-
-## Context
-
-Tools receive context about the current session:
-
-```ts title=".opencode/tool/project.ts"
-import { tool } from "@opencode-ai/plugin"
-
-export default tool({
-  description: "Get project information",
-  args: {},
-  async execute(args, context) {
-    // Access context information
-    const { agent, sessionID, messageID } = context
-    return `Agent: ${agent}, Session: ${sessionID}, Message: ${messageID}`
-  },
-})
-```

packages/web/src/content/docs/ide.mdx

@@ -24,6 +24,8 @@ To install opencode on VS Code and popular forks like Cursor, Windsurf, VSCodium
 2. Open the integrated terminal
 3. Run `opencode` - the extension installs automatically
 
+If on the other hand you want to use your own IDE when you run `/editor` or `/export` from the TUI, you'll need to set `export EDITOR="code --wait"`. [Learn more](/docs/tui/#editor-setup).
+
 ---
 
 ### Manual Install

packages/web/src/content/docs/index.mdx

@@ -37,7 +37,7 @@ The easiest way to install opencode is through the install script.
 curl -fsSL https://opencode.ai/install | bash
 ```
 
-You can also install it with the following:
+You can also install it with the following commands:
 
 - **Using Node.js**
 

packages/web/src/content/docs/lsp.mdx

@@ -3,7 +3,7 @@ title: LSP Servers
 description: opencode integrates with your LSP servers.
 ---
 
-opencode integrates with your Language Server Protocol (LSP) to help the LLM interacts with your codebase. It uses diagnostics to provide feedback to the LLM.
+opencode integrates with your Language Server Protocol (LSP) to help the LLM interact with your codebase. It uses diagnostics to provide feedback to the LLM.
 
 ---
 

packages/web/src/content/docs/providers.mdx

@@ -356,6 +356,8 @@ To use your GitHub Copilot subscription with opencode:
 :::note
 Some models might need a [Pro+
 subscription](https://github.com/features/copilot/plans) to use.
+
+Some models need to be manually enabled in your [GitHub Copilot settings](https://docs.github.com/en/copilot/how-tos/use-ai-models/configure-access-to-ai-models#setup-for-individual-use).
 :::
 
 1. Run `opencode auth login` and select GitHub Copilot.

packages/web/src/content/docs/tui.mdx

@@ -185,6 +185,9 @@ Redo a previously undone message. Only available after using `/undo`.
 Any file changes will also be restored.
 :::
 
+Internally, this uses Git to manage the file changes. So your project **needs to
+be a Git repository**.
+
 ```bash frame="none"
 /redo
 ```
@@ -237,6 +240,9 @@ Undo last message in the conversation. Removes the most recent user message, all
 Any file changes made will also be reverted.
 :::
 
+Internally, this uses Git to manage the file changes. So your project **needs to
+be a Git repository**.
+
 ```bash frame="none"
 /undo
 ```
@@ -266,7 +272,8 @@ Both the `/editor` and `/export` commands use the editor specified in your `EDIT
     export EDITOR=nano
     export EDITOR=vim
 
-    # For GUI editors (VS Code, Cursor, VSCodium, Windsurf, Zed, etc.) include --wait
+    # For GUI editors, VS Code, Cursor, VSCodium, Windsurf, Zed, etc.
+    # include --wait
     export EDITOR="code --wait"
     ```
 
@@ -279,7 +286,8 @@ Both the `/editor` and `/export` commands use the editor specified in your `EDIT
     ```bash
     set EDITOR=notepad
 
-    # For GUI editors (VS Code, Cursor, VSCodium, Windsurf, Zed, etc.) include --wait
+    # For GUI editors, VS Code, Cursor, VSCodium, Windsurf, Zed, etc.
+    # include --wait
     set EDITOR=code --wait
     ```
 
@@ -292,7 +300,8 @@ Both the `/editor` and `/export` commands use the editor specified in your `EDIT
     ```powershell
     $env:EDITOR = "notepad"
 
-    # For GUI editors (VS Code, Cursor, VSCodium, Windsurf, Zed, etc.) include --wait
+    # For GUI editors, VS Code, Cursor, VSCodium, Windsurf, Zed, etc.
+    # include --wait
     $env:EDITOR = "code --wait"
     ```
 

packages/web/src/content/docs/zen.mdx

@@ -64,7 +64,8 @@ You can also access our models through the following API endpoints.
 
 | Model            | Mode ID          | Endpoint                                      | AI SDK Package              |
 | ---------------- | ---------------- | --------------------------------------------- | --------------------------- |
-| GPT-5            | gpt-5            | `https://opencode.ai/zen/v1/responses`        | `@ai-sdk/openai`            |
+| GPT 5            | gpt-5            | `https://opencode.ai/zen/v1/responses`        | `@ai-sdk/openai`            |
+| GPT 5 Codex      | gpt-5-codex      | `https://opencode.ai/zen/v1/responses`        | `@ai-sdk/openai`            |
 | Claude Sonnet 4  | claude-sonnet-4  | `https://opencode.ai/zen/v1/messages`         | `@ai-sdk/anthropic`         |
 | Claude Haiku 3.5 | claude-3-5-haiku | `https://opencode.ai/zen/v1/messages`         | `@ai-sdk/anthropic`         |
 | Claude Opus 4.1  | claude-opus-4-1  | `https://opencode.ai/zen/v1/messages`         | `@ai-sdk/anthropic`         |
@@ -88,6 +89,7 @@ We support a pay-as-you-go model. Below are the prices **per 1M tokens**.
 | Claude Haiku 3.5                | $0.80  | $4.00  | $0.08       | $1.00        |
 | Claude Opus 4.1                 | $15.00 | $75.00 | $1.50       | $18.75       |
 | GPT 5                           | $1.25  | $10.00 | $0.125      | -            |
+| GPT 5 Codex                     | $1.25  | $10.00 | $0.125      | -            |
 | Kimi K2                         | $0.60  | $2.50  | -           | -            |
 
 :::note

sdks/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "opencode",
   "displayName": "opencode",
   "description": "opencode for VS Code",
-  "version": "0.10.4",
+  "version": "0.11.7",
   "publisher": "sst-dev",
   "repository": {
     "type": "git",