docs: add tabs launch screenshots

Co-authored-by: Luke Parker <10430890+Hona@users.noreply.github.com>
Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>
Co-authored-by: Brendan Allan <git@brendonovich.dev>

packages/app/src/app.tsx

@@ -186,7 +186,7 @@ declare global {
       deepLinks?: string[]
     }
     api?: {
-      setTitlebar?: (theme: { mode: "light" | "dark" }) => Promise<void>
+      setTitlebar?: (theme: { mode: "light" | "dark"; scheme?: "system" | "light" | "dark" }) => Promise<void>
       exportDebugLogs?: () => Promise<string>
     }
   }
@@ -320,8 +320,8 @@ export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) {
     <MetaProvider>
       <Font />
       <ThemeProvider
-        onThemeApplied={(_, mode) => {
-          void window.api?.setTitlebar?.({ mode })
+        onThemeApplied={(_, mode, scheme) => {
+          void window.api?.setTitlebar?.({ mode, scheme })
         }}
       >
         <LanguageProvider locale={props.locale}>

packages/app/src/components/command-palette.ts

@@ -0,0 +1,325 @@
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useNavigate } from "@solidjs/router"
+import { createMemo, onCleanup } from "solid-js"
+import { useCommand, type CommandOption } from "@/context/command"
+import { useFile } from "@/context/file"
+import { useLanguage } from "@/context/language"
+import { useLayout } from "@/context/layout"
+import { useServerSDK, type ServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { createSessionTabs } from "@/pages/session/helpers"
+import { useSessionLayout } from "@/pages/session/session-layout"
+import { decode64 } from "@/utils/base64"
+
+export type CommandPaletteEntry = {
+  id: string
+  type: "command" | "file" | "session"
+  title: string
+  description?: string
+  keybind?: string
+  category: string
+  option?: CommandOption
+  path?: string
+  directory?: string
+  sessionID?: string
+  archived?: number
+  updated?: number
+}
+
+const ENTRY_LIMIT = 5
+const COMMON_COMMAND_IDS = [
+  "session.new",
+  "workspace.new",
+  "session.previous",
+  "session.next",
+  "terminal.toggle",
+  "review.toggle",
+] as const
+
+export function uniqueCommandPaletteEntries(items: CommandPaletteEntry[]) {
+  const seen = new Set<string>()
+  return items.filter((item) => {
+    if (seen.has(item.id)) return false
+    seen.add(item.id)
+    return true
+  })
+}
+
+export function createCommandPaletteFileEntry(path: string, category: string): CommandPaletteEntry {
+  return {
+    id: "file:" + path,
+    type: "file",
+    title: path,
+    category,
+    path,
+  }
+}
+
+export function createCommandPaletteFileOpener(onOpenFile?: (path: string) => void) {
+  const file = useFile()
+  const layout = useLayout()
+  const { tabs, view } = useSessionLayout()
+
+  return (path: string) => {
+    const value = file.tab(path)
+    void tabs().open(value)
+    void file.load(path)
+    if (!view().reviewPanel.opened()) view().reviewPanel.open()
+    layout.fileTree.setTab("all")
+    onOpenFile?.(path)
+    tabs().setActive(value)
+  }
+}
+
+export function createCommandPaletteModel(props: { filesOnly?: () => boolean; onOpenFile?: (path: string) => void }) {
+  const command = useCommand()
+  const language = useLanguage()
+  const layout = useLayout()
+  const file = useFile()
+  const dialog = useDialog()
+  const navigate = useNavigate()
+  const serverSDK = useServerSDK()()
+  const serverSync = useServerSync()
+  const { params, tabs } = useSessionLayout()
+  const openFile = createCommandPaletteFileOpener(props.onOpenFile)
+  const state = { cleanup: undefined as (() => void) | void, committed: false }
+  const filesOnly = () => props.filesOnly?.() ?? false
+
+  const allowedCommands = createMemo(() => {
+    if (filesOnly()) return []
+    return command.options.filter(
+      (option) =>
+        !option.disabled && !option.hidden && !option.id.startsWith("suggested.") && option.id !== "file.open",
+    )
+  })
+  const commandEntries = createMemo(() => {
+    const category = language.t("palette.group.commands")
+    return allowedCommands().map((option) => createCommandEntry(option, category))
+  })
+  const preferredCommandEntries = createMemo(() => {
+    const all = allowedCommands()
+    const order = new Map<string, number>(COMMON_COMMAND_IDS.map((id, index) => [id, index]))
+    const picked = all.filter((option) => order.has(option.id))
+    const base = picked.length ? picked : all.slice(0, ENTRY_LIMIT)
+    const sorted = picked.length ? [...base].sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0)) : base
+    const category = language.t("palette.group.commands")
+    return sorted.map((option) => createCommandEntry(option, category))
+  })
+
+  const tabState = createSessionTabs({
+    tabs,
+    pathFromTab: file.pathFromTab,
+    normalizeTab: (tab) => (tab.startsWith("file://") ? file.tab(tab) : tab),
+  })
+  const recentFileEntries = createMemo(() => {
+    const all = tabState.openedTabs()
+    const active = tabState.activeFileTab()
+    const order = active ? [active, ...all.filter((item) => item !== active)] : all
+    const seen = new Set<string>()
+    const category = language.t("palette.group.files")
+    return order
+      .map((item) => file.pathFromTab(item))
+      .filter((path): path is string => {
+        if (!path || seen.has(path)) return false
+        seen.add(path)
+        return true
+      })
+      .slice(0, ENTRY_LIMIT)
+      .map((path) => createCommandPaletteFileEntry(path, category))
+  })
+  const rootFileEntries = createMemo(() => {
+    const category = language.t("palette.group.files")
+    return file.tree
+      .children("")
+      .filter((node) => node.type === "file")
+      .map((node) => node.path)
+      .sort((a, b) => a.localeCompare(b))
+      .slice(0, ENTRY_LIMIT)
+      .map((path) => createCommandPaletteFileEntry(path, category))
+  })
+
+  const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
+  const project = createMemo(() => {
+    const directory = projectDirectory()
+    if (!directory) return undefined
+    return layout.projects.list().find((item) => item.worktree === directory || item.sandboxes?.includes(directory))
+  })
+  const workspaces = createMemo(() => {
+    const directory = projectDirectory()
+    const current = project()
+    if (!current) return directory ? [directory] : []
+    const dirs = [current.worktree, ...(current.sandboxes ?? [])]
+    if (directory && !dirs.includes(directory)) return [...dirs, directory]
+    return dirs
+  })
+  const homedir = createMemo(() => serverSync().data.path.home)
+  const sessions = createSessionEntries({
+    workspaces,
+    label: (directory) => {
+      const current = project()
+      const kind =
+        current && directory === current.worktree
+          ? language.t("workspace.type.local")
+          : language.t("workspace.type.sandbox")
+      const [store] = serverSync().child(directory, { bootstrap: false })
+      const home = homedir()
+      const path = home ? directory.replace(home, "~") : directory
+      const name = store.vcs?.branch ?? getFilename(directory)
+      return `${kind} : ${name || path}`
+    },
+    load: (directory) => serverSDK.client.session.list({ directory, roots: true }),
+    untitled: () => language.t("command.session.new"),
+    category: () => language.t("command.category.session"),
+  })
+
+  const highlight = (item: CommandPaletteEntry | undefined) => {
+    state.cleanup?.()
+    state.cleanup = undefined
+    if (item?.type !== "command") return
+    state.cleanup = item.option?.onHighlight?.()
+  }
+
+  const select = (item: CommandPaletteEntry | undefined) => {
+    if (!item) return
+    state.committed = true
+    state.cleanup = undefined
+    dialog.close()
+    if (item.type === "command") {
+      item.option?.onSelect?.("palette")
+      return
+    }
+    if (item.type === "session") {
+      if (!item.directory || !item.sessionID) return
+      navigate(`/${base64Encode(item.directory)}/session/${item.sessionID}`)
+      return
+    }
+    if (!item.path) return
+    openFile(item.path)
+  }
+
+  onCleanup(() => {
+    if (state.committed) return
+    state.cleanup?.()
+  })
+
+  return {
+    language,
+    file,
+    commandEntries,
+    preferredCommandEntries,
+    recentFileEntries,
+    rootFileEntries,
+    sessions,
+    highlight,
+    select,
+    close: () => dialog.close(),
+  }
+}
+
+function createCommandEntry(option: CommandOption, category: string): CommandPaletteEntry {
+  return {
+    id: "command:" + option.id,
+    type: "command",
+    title: option.title,
+    description: option.description,
+    keybind: option.keybind,
+    category,
+    option,
+  }
+}
+
+function createSessionEntries(props: {
+  workspaces: () => string[]
+  label: (directory: string) => string
+  load: (directory: string) => ReturnType<ServerSDK["client"]["session"]["list"]>
+  untitled: () => string
+  category: () => string
+}) {
+  const state: {
+    token: number
+    inflight: Promise<CommandPaletteEntry[]> | undefined
+    cached: CommandPaletteEntry[] | undefined
+  } = { token: 0, inflight: undefined, cached: undefined }
+
+  return (text: string) => {
+    if (!text.trim()) {
+      state.token += 1
+      state.inflight = undefined
+      state.cached = undefined
+      return [] as CommandPaletteEntry[]
+    }
+    if (state.cached) return state.cached
+    if (state.inflight) return state.inflight
+
+    const current = state.token
+    const dirs = props.workspaces()
+    if (dirs.length === 0) return [] as CommandPaletteEntry[]
+
+    state.inflight = Promise.all(
+      dirs.map((directory) => {
+        const description = props.label(directory)
+        return props
+          .load(directory)
+          .then((result) =>
+            (result.data ?? [])
+              .filter((session) => !!session?.id)
+              .map((session) => ({
+                id: session.id,
+                title: session.title ?? props.untitled(),
+                description,
+                directory,
+                archived: session.time?.archived,
+                updated: session.time?.updated,
+              })),
+          )
+          .catch(() => [] as SessionEntryInput[])
+      }),
+    )
+      .then((results) => {
+        if (state.token !== current) return [] as CommandPaletteEntry[]
+        const seen = new Set<string>()
+        const next = results
+          .flat()
+          .filter((item) => {
+            const key = `${item.directory}:${item.id}`
+            if (seen.has(key)) return false
+            seen.add(key)
+            return true
+          })
+          .map((item) => createSessionEntry(item, props.category()))
+        state.cached = next
+        return next
+      })
+      .catch(() => [] as CommandPaletteEntry[])
+      .finally(() => {
+        state.inflight = undefined
+      })
+
+    return state.inflight
+  }
+}
+
+type SessionEntryInput = {
+  directory: string
+  id: string
+  title: string
+  description: string
+  archived?: number
+  updated?: number
+}
+
+function createSessionEntry(input: SessionEntryInput, category: string): CommandPaletteEntry {
+  return {
+    id: `session:${input.directory}:${input.id}`,
+    type: "session",
+    title: input.title,
+    description: input.description,
+    category,
+    directory: input.directory,
+    sessionID: input.id,
+    archived: input.archived,
+    updated: input.updated,
+  }
+}

packages/app/src/components/dialog-command-palette-v2.css

@@ -0,0 +1,220 @@
+.command-palette-v2 {
+  overflow: hidden;
+}
+
+/* Anchor to the top edge of where a centered 480px-tall dialog would sit, so the
+   top stays put while the content-driven height grows and shrinks. */
+[data-component="dialog-v2"]:has(.command-palette-v2) {
+  align-items: flex-start;
+}
+
+[data-component="dialog-v2"]:has(.command-palette-v2) [data-slot="dialog-container"] {
+  width: min(calc(100vw - 24px), 640px);
+  height: auto;
+  min-height: 280px;
+  max-height: min(calc(100vh - 96px), 480px);
+  margin-top: max(48px, calc((100vh - 480px) / 2));
+  border-radius: 12px;
+  background: var(--v2-background-bg-base);
+  box-shadow: var(--v2-elevation-floating);
+}
+
+.command-palette-v2-body {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 0;
+  padding: 0;
+}
+
+.command-palette-v2-search {
+  flex-shrink: 0;
+  padding: 6px;
+}
+
+.command-palette-v2-search [data-component="text-input-v2"] {
+  width: 100%;
+  height: 36px;
+  border-radius: 6px;
+  outline: 0;
+  background: color-mix(in srgb, var(--v2-background-bg-layer-02) 60%, transparent);
+  box-shadow: none;
+  transition:
+    background-color 120ms ease-in-out,
+    box-shadow 120ms ease-in-out;
+}
+
+.command-palette-v2-search [data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]),
+.command-palette-v2-search [data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
+  background: var(--v2-background-bg-layer-02);
+  box-shadow: none;
+}
+
+.command-palette-v2-search [data-component="text-input-v2"] [data-slot="text-input-v2-value"] {
+  border-radius: 6px;
+  background: transparent;
+  gap: 8px;
+}
+
+.command-palette-v2-search [data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
+  padding-left: 12px;
+}
+
+.command-palette-v2-search [data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
+  border-radius: 6px;
+  background: transparent;
+}
+
+.command-palette-v2-scroll {
+  min-height: 0;
+  flex: 1;
+}
+
+.command-palette-v2-results {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 6px 6px 8px;
+}
+
+.command-palette-v2-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.command-palette-v2-group-title {
+  margin: 6px 0;
+  padding: 0 12px;
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 16px;
+  letter-spacing: -0.04px;
+  user-select: none;
+}
+
+.command-palette-v2-row {
+  display: flex;
+  width: 100%;
+  height: 36px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--v2-text-text-base);
+  text-align: left;
+  cursor: default;
+  scroll-margin: 6px 0;
+}
+
+.command-palette-v2-row[data-active] {
+  background: var(--v2-overlay-simple-overlay-hover);
+}
+
+.command-palette-v2-row:focus-visible {
+  background: var(--v2-overlay-simple-overlay-hover);
+  outline: none;
+}
+
+.command-palette-v2-row-main {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+}
+
+.command-palette-v2-row-icon {
+  flex-shrink: 0;
+  color: var(--v2-icon-icon-muted);
+}
+
+.command-palette-v2-row-text {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 6px;
+}
+
+.command-palette-v2-title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--v2-text-text-base);
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 16px;
+  letter-spacing: -0.04px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.command-palette-v2-description,
+.command-palette-v2-meta {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 16px;
+  letter-spacing: -0.04px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.command-palette-v2-meta {
+  flex-shrink: 0;
+}
+
+.command-palette-v2-file-path {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: -0.04px;
+}
+
+.command-palette-v2-file-dir {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--v2-text-text-muted);
+  font-weight: 440;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.command-palette-v2-file-name {
+  flex-shrink: 0;
+  color: var(--v2-text-text-base);
+  font-weight: 530;
+  white-space: nowrap;
+}
+
+.command-palette-v2-state {
+  display: grid;
+  min-height: 120px;
+  place-items: center;
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 16px;
+  letter-spacing: -0.04px;
+}
+
+@media (max-width: 640px) {
+  .command-palette-v2-row-text {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1px;
+  }
+
+  .command-palette-v2-description {
+    max-width: 100%;
+  }
+}

packages/app/src/components/dialog-command-palette-v2.tsx

@@ -0,0 +1,221 @@
+import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
+import { Dialog, DialogBody } from "@opencode-ai/ui/v2/dialog-v2"
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { createEffect, createMemo, createResource, createSignal, For, Match, Show, Switch } from "solid-js"
+import { formatKeybindParts } from "@/context/command"
+import { useLanguage } from "@/context/language"
+import { getRelativeTime } from "@/utils/time"
+import {
+  createCommandPaletteFileEntry,
+  createCommandPaletteModel,
+  uniqueCommandPaletteEntries,
+  type CommandPaletteEntry,
+} from "./command-palette"
+import "./dialog-command-palette-v2.css"
+
+function groups(entries: CommandPaletteEntry[]) {
+  const map = new Map<string, CommandPaletteEntry[]>()
+  for (const entry of entries) map.set(entry.category, [...(map.get(entry.category) ?? []), entry])
+  return Array.from(map.entries()).map(([category, entries]) => ({ category, entries }))
+}
+
+function matchesEntry(entry: CommandPaletteEntry, query: string) {
+  const value = query.toLowerCase()
+  return [entry.title, entry.description, entry.category].some((text) => text?.toLowerCase().includes(value))
+}
+
+export function DialogCommandPaletteV2(props: { onOpenFile?: (path: string) => void }) {
+  const palette = createCommandPaletteModel(props)
+  const [query, setQuery] = createSignal("")
+  const [active, setActive] = createSignal(0)
+
+  const loadItems = async (text: string) => {
+    const q = text.trim()
+    if (!q) return [...palette.preferredCommandEntries(), ...palette.recentFileEntries()]
+
+    const [files, nextSessions] = await Promise.all([palette.file.searchFiles(q), Promise.resolve(palette.sessions(q))])
+    const category = palette.language.t("palette.group.files")
+    return [
+      ...palette.commandEntries().filter((entry) => matchesEntry(entry, q)),
+      ...nextSessions.filter((entry) => matchesEntry(entry, q)),
+      ...files.map((path) => createCommandPaletteFileEntry(path, category)),
+    ]
+  }
+
+  const [entries] = createResource(query, loadItems, { initialValue: [] as CommandPaletteEntry[] })
+  // Render stale results while a new query loads to avoid flashing "Loading" per keystroke.
+  const visibleEntries = createMemo(() => uniqueCommandPaletteEntries(entries.latest ?? []))
+  const groupedEntries = createMemo(() => groups(visibleEntries()))
+  const activeEntry = createMemo(() => visibleEntries()[active()])
+
+  createEffect(() => {
+    query()
+    visibleEntries()
+    setActive(0)
+  })
+
+  createEffect(() => {
+    palette.highlight(activeEntry())
+  })
+
+  let resultsRef: HTMLDivElement | undefined
+
+  const move = (delta: -1 | 1) => {
+    const count = visibleEntries().length
+    if (count === 0) return
+    setActive((index) => (index + delta + count) % count)
+    requestAnimationFrame(() => {
+      resultsRef?.querySelector("[data-active]")?.scrollIntoView({ block: "nearest" })
+    })
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      move(1)
+      return
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault()
+      move(-1)
+      return
+    }
+    if (event.key === "Enter") {
+      event.preventDefault()
+      palette.select(activeEntry())
+      return
+    }
+    if (event.key === "Escape") {
+      event.preventDefault()
+      palette.close()
+    }
+  }
+
+  return (
+    <Dialog class="command-palette-v2" size="large">
+      <DialogBody class="command-palette-v2-body">
+        <div class="command-palette-v2-search">
+          <TextInputV2
+            value={query()}
+            autofocus
+            autocomplete="off"
+            spellcheck={false}
+            appearance="large"
+            placeholder={palette.language.t("palette.search.placeholder")}
+            leadingIcon={<Icon name="magnifying-glass" />}
+            onInput={(event) => setQuery(event.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+        <ScrollView class="command-palette-v2-scroll" viewportRef={(el) => (resultsRef = el)}>
+          <div class="command-palette-v2-results" role="listbox">
+            <Show
+              when={visibleEntries().length > 0}
+              fallback={
+                <div class="command-palette-v2-state">
+                  {entries.loading ? palette.language.t("common.loading") : palette.language.t("palette.empty")}
+                </div>
+              }
+            >
+              <For each={groupedEntries()}>
+                {(group) => (
+                  <div class="command-palette-v2-group">
+                    <Show when={group.category}>
+                      <div class="command-palette-v2-group-title">{group.category}</div>
+                    </Show>
+                    <For each={group.entries}>
+                      {(item) => (
+                        <PaletteRow
+                          item={item}
+                          active={activeEntry()?.id === item.id}
+                          language={palette.language}
+                          onActive={() => setActive(visibleEntries().findIndex((entry) => entry.id === item.id))}
+                          onSelect={() => palette.select(item)}
+                        />
+                      )}
+                    </For>
+                  </div>
+                )}
+              </For>
+            </Show>
+          </div>
+        </ScrollView>
+      </DialogBody>
+    </Dialog>
+  )
+}
+
+function PaletteRow(props: {
+  item: CommandPaletteEntry
+  active: boolean
+  language: ReturnType<typeof useLanguage>
+  onActive: () => void
+  onSelect: () => void
+}) {
+  return (
+    <button
+      type="button"
+      class="command-palette-v2-row"
+      role="option"
+      aria-selected={props.active}
+      data-active={props.active ? "" : undefined}
+      onMouseMove={(event) => {
+        // Ignore hover from a static cursor when keyboard scrolling moves rows underneath it.
+        if (event.movementX === 0 && event.movementY === 0) return
+        props.onActive()
+      }}
+      onMouseDown={(event) => event.preventDefault()}
+      onClick={props.onSelect}
+    >
+      <Switch
+        fallback={
+          <div class="command-palette-v2-row-main">
+            <FileIcon node={{ path: props.item.path ?? "", type: "file" }} class="command-palette-v2-row-icon size-4" />
+            <div class="command-palette-v2-file-path">
+              <span class="command-palette-v2-file-dir">{getDirectory(props.item.path ?? "")}</span>
+              <span class="command-palette-v2-file-name">{getFilename(props.item.path ?? "")}</span>
+            </div>
+          </div>
+        }
+      >
+        <Match when={props.item.type === "command"}>
+          <div class="command-palette-v2-row-main">
+            <div class="command-palette-v2-row-text">
+              <span class="command-palette-v2-title">{props.item.title}</span>
+              <Show when={props.item.description}>
+                <span class="command-palette-v2-description">{props.item.description}</span>
+              </Show>
+            </div>
+          </div>
+          <Show when={props.item.keybind}>
+            <KeybindV2 keys={formatKeybindParts(props.item.keybind ?? "", props.language.t)} variant="neutral" />
+          </Show>
+        </Match>
+        <Match when={props.item.type === "session"}>
+          <div class="command-palette-v2-row-main">
+            <Icon name="status" class="command-palette-v2-row-icon" />
+            <div class="command-palette-v2-row-text">
+              <span class="command-palette-v2-title" classList={{ "opacity-70": !!props.item.archived }}>
+                {props.item.title}
+              </span>
+              <Show when={props.item.description}>
+                <span class="command-palette-v2-description" classList={{ "opacity-70": !!props.item.archived }}>
+                  {props.item.description}
+                </span>
+              </Show>
+            </div>
+          </div>
+          <Show when={props.item.updated}>
+            <span class="command-palette-v2-meta">
+              {getRelativeTime(new Date(props.item.updated!).toISOString(), props.language.t)}
+            </span>
+          </Show>
+        </Match>
+      </Switch>
+    </button>
+  )
+}

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

@@ -1,329 +1,84 @@
-import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Keybind } from "@opencode-ai/ui/keybind"
 import { List } from "@opencode-ai/ui/list"
-import { base64Encode } from "@opencode-ai/core/util/encode"
 import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
-import { useNavigate } from "@solidjs/router"
-import { createMemo, createSignal, lazy, Match, onCleanup, Show, Switch } from "solid-js"
-import { formatKeybind, useCommand, type CommandOption } from "@/context/command"
-import { useServerSDK, type ServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "@/context/server-sync"
-import { useLayout } from "@/context/layout"
-import { useFile } from "@/context/file"
+import { createMemo, createSignal, lazy, Match, Show, Switch } from "solid-js"
+import { formatKeybind } from "@/context/command"
+import { useServerSDK } from "@/context/server-sdk"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useSettings } from "@/context/settings"
 import { useSessionLayout } from "@/pages/session/session-layout"
-import { createSessionTabs } from "@/pages/session/helpers"
 import { decode64 } from "@/utils/base64"
 import { getRelativeTime } from "@/utils/time"
+import {
+  createCommandPaletteFileEntry,
+  createCommandPaletteFileOpener,
+  createCommandPaletteModel,
+  uniqueCommandPaletteEntries,
+  type CommandPaletteEntry,
+} from "./command-palette"
 
 const DialogSelectFileV2 = lazy(() =>
   import("./dialog-select-directory-v2").then((module) => ({ default: module.DialogSelectDirectoryV2 })),
 )
-
-type EntryType = "command" | "file" | "session"
-
-type Entry = {
-  id: string
-  type: EntryType
-  title: string
-  description?: string
-  keybind?: string
-  category: string
-  option?: CommandOption
-  path?: string
-  directory?: string
-  sessionID?: string
-  archived?: number
-  updated?: number
-}
+const DialogCommandPaletteV2 = lazy(() =>
+  import("./dialog-command-palette-v2").then((module) => ({ default: module.DialogCommandPaletteV2 })),
+)
 
 type DialogSelectFileMode = "all" | "files"
 
-const ENTRY_LIMIT = 5
-const COMMON_COMMAND_IDS = [
-  "session.new",
-  "workspace.new",
-  "session.previous",
-  "session.next",
-  "terminal.toggle",
-  "review.toggle",
-] as const
-
-const uniqueEntries = (items: Entry[]) => {
-  const seen = new Set<string>()
-  const out: Entry[] = []
-  for (const item of items) {
-    if (seen.has(item.id)) continue
-    seen.add(item.id)
-    out.push(item)
-  }
-  return out
-}
-
-const createCommandEntry = (option: CommandOption, category: string): Entry => ({
-  id: "command:" + option.id,
-  type: "command",
-  title: option.title,
-  description: option.description,
-  keybind: option.keybind,
-  category,
-  option,
-})
-
-const createFileEntry = (path: string, category: string): Entry => ({
-  id: "file:" + path,
-  type: "file",
-  title: path,
-  category,
-  path,
-})
-
-const createSessionEntry = (
-  input: {
-    directory: string
-    id: string
-    title: string
-    description: string
-    archived?: number
-    updated?: number
-  },
-  category: string,
-): Entry => ({
-  id: `session:${input.directory}:${input.id}`,
-  type: "session",
-  title: input.title,
-  description: input.description,
-  category,
-  directory: input.directory,
-  sessionID: input.id,
-  archived: input.archived,
-  updated: input.updated,
-})
-
-function createCommandEntries(props: {
-  filesOnly: () => boolean
-  command: ReturnType<typeof useCommand>
-  language: ReturnType<typeof useLanguage>
-}) {
-  const allowed = createMemo(() => {
-    if (props.filesOnly()) return []
-    return props.command.options.filter(
-      (option) =>
-        !option.disabled && !option.hidden && !option.id.startsWith("suggested.") && option.id !== "file.open",
-    )
-  })
-
-  const list = createMemo(() => {
-    const category = props.language.t("palette.group.commands")
-    return allowed().map((option) => createCommandEntry(option, category))
-  })
-
-  const picks = createMemo(() => {
-    const all = allowed()
-    const order = new Map<string, number>(COMMON_COMMAND_IDS.map((id, index) => [id, index]))
-    const picked = all.filter((option) => order.has(option.id))
-    const base = picked.length ? picked : all.slice(0, ENTRY_LIMIT)
-    const sorted = picked.length ? [...base].sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0)) : base
-    const category = props.language.t("palette.group.commands")
-    return sorted.map((option) => createCommandEntry(option, category))
-  })
-
-  return { allowed, list, picks }
-}
-
-function createFileEntries(props: {
-  file: ReturnType<typeof useFile>
-  tabs: () => ReturnType<ReturnType<typeof useLayout>["tabs"]>
-  language: ReturnType<typeof useLanguage>
-}) {
-  const tabState = createSessionTabs({
-    tabs: props.tabs,
-    pathFromTab: props.file.pathFromTab,
-    normalizeTab: (tab) => (tab.startsWith("file://") ? props.file.tab(tab) : tab),
-  })
-  const recent = createMemo(() => {
-    const all = tabState.openedTabs()
-    const active = tabState.activeFileTab()
-    const order = active ? [active, ...all.filter((item) => item !== active)] : all
-    const seen = new Set<string>()
-    const category = props.language.t("palette.group.files")
-    const items: Entry[] = []
-
-    for (const item of order) {
-      const path = props.file.pathFromTab(item)
-      if (!path) continue
-      if (seen.has(path)) continue
-      seen.add(path)
-      items.push(createFileEntry(path, category))
-    }
-
-    return items.slice(0, ENTRY_LIMIT)
-  })
-
-  const root = createMemo(() => {
-    const category = props.language.t("palette.group.files")
-    const nodes = props.file.tree.children("")
-    const paths = nodes
-      .filter((node) => node.type === "file")
-      .map((node) => node.path)
-      .sort((a, b) => a.localeCompare(b))
-    return paths.slice(0, ENTRY_LIMIT).map((path) => createFileEntry(path, category))
-  })
-
-  return { recent, root }
-}
-
-function createSessionEntries(props: {
-  workspaces: () => string[]
-  label: (directory: string) => string
-  serverSDK: ServerSDK
-  language: ReturnType<typeof useLanguage>
-}) {
-  const state: {
-    token: number
-    inflight: Promise<Entry[]> | undefined
-    cached: Entry[] | undefined
-  } = {
-    token: 0,
-    inflight: undefined,
-    cached: undefined,
-  }
-
-  const sessions = (text: string) => {
-    const query = text.trim()
-    if (!query) {
-      state.token += 1
-      state.inflight = undefined
-      state.cached = undefined
-      return [] as Entry[]
-    }
-
-    if (state.cached) return state.cached
-    if (state.inflight) return state.inflight
-
-    const current = state.token
-    const dirs = props.workspaces()
-    if (dirs.length === 0) return [] as Entry[]
-
-    state.inflight = Promise.all(
-      dirs.map((directory) => {
-        const description = props.label(directory)
-        return props.serverSDK.client.session
-          .list({ directory, roots: true })
-          .then((x) =>
-            (x.data ?? [])
-              .filter((s) => !!s?.id)
-              .map((s) => ({
-                id: s.id,
-                title: s.title ?? props.language.t("command.session.new"),
-                description,
-                directory,
-                archived: s.time?.archived,
-                updated: s.time?.updated,
-              })),
-          )
-          .catch(
-            () =>
-              [] as {
-                id: string
-                title: string
-                description: string
-                directory: string
-                archived?: number
-                updated?: number
-              }[],
-          )
-      }),
-    )
-      .then((results) => {
-        if (state.token !== current) return [] as Entry[]
-        const seen = new Set<string>()
-        const category = props.language.t("command.category.session")
-        const next = results
-          .flat()
-          .filter((item) => {
-            const key = `${item.directory}:${item.id}`
-            if (seen.has(key)) return false
-            seen.add(key)
-            return true
-          })
-          .map((item) => createSessionEntry(item, category))
-        state.cached = next
-        return next
-      })
-      .catch(() => [] as Entry[])
-      .finally(() => {
-        state.inflight = undefined
-      })
-
-    return state.inflight
-  }
-
-  return { sessions }
-}
-
 export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFile?: (path: string) => void }) {
-  const command = useCommand()
-  const language = useLanguage()
   const platform = usePlatform()
   const settings = useSettings()
-  const layout = useLayout()
-  const file = useFile()
-  const dialog = useDialog()
-  const navigate = useNavigate()
-  const serverSDK = useServerSDK()
-  const serverSync = useServerSync()
-  const { params, tabs, view } = useSessionLayout()
   const filesOnly = () => props.mode === "files"
-  const state = { cleanup: undefined as (() => void) | void, committed: false }
-  const [grouped, setGrouped] = createSignal(false)
-  const commandEntries = createCommandEntries({ filesOnly, command, language })
-  const fileEntries = createFileEntries({ file, tabs, language })
 
-  const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
-  const project = createMemo(() => {
-    const directory = projectDirectory()
-    if (!directory) return
-    return layout.projects.list().find((p) => p.worktree === directory || p.sandboxes?.includes(directory))
-  })
-  const workspaces = createMemo(() => {
-    const directory = projectDirectory()
-    const current = project()
-    if (!current) return directory ? [directory] : []
-
-    const dirs = [current.worktree, ...(current.sandboxes ?? [])]
-    if (directory && !dirs.includes(directory)) return [...dirs, directory]
-    return dirs
-  })
-  const homedir = createMemo(() => serverSync().data.path.home)
-  const label = (directory: string) => {
-    const current = project()
-    const kind =
-      current && directory === current.worktree
-        ? language.t("workspace.type.local")
-        : language.t("workspace.type.sandbox")
-    const [store] = serverSync().child(directory, { bootstrap: false })
-    const home = homedir()
-    const path = home ? directory.replace(home, "~") : directory
-    const name = store.vcs?.branch ?? getFilename(directory)
-    return `${kind} : ${name || path}`
+  if (!filesOnly() && settings.general.newLayoutDesigns()) {
+    return <DialogCommandPaletteV2 onOpenFile={props.onOpenFile} />
   }
 
-  const { sessions } = createSessionEntries({ workspaces, label, serverSDK: serverSDK(), language })
+  if (filesOnly() && platform.platform === "desktop" && settings.general.newLayoutDesigns()) {
+    return <DialogSelectFileDesktopV2 onOpenFile={props.onOpenFile} />
+  }
+
+  return <DialogSelectFileLegacy filesOnly={filesOnly} onOpenFile={props.onOpenFile} />
+}
+
+function DialogSelectFileDesktopV2(props: { onOpenFile?: (path: string) => void }) {
+  const language = useLanguage()
+  const serverSDK = useServerSDK()
+  const { params } = useSessionLayout()
+  const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
+  const openFile = createCommandPaletteFileOpener(props.onOpenFile)
+
+  return (
+    <DialogSelectFileV2
+      server={serverSDK().server}
+      mode="file"
+      start={projectDirectory()}
+      title={language.t("session.header.searchFiles")}
+      onSelect={(result) => {
+        if (typeof result !== "string") return
+        openFile(result)
+      }}
+    />
+  )
+}
+
+function DialogSelectFileLegacy(props: { filesOnly: () => boolean; onOpenFile?: (path: string) => void }) {
+  const palette = createCommandPaletteModel(props)
+  const [grouped, setGrouped] = createSignal(false)
 
   const items = async (text: string) => {
     const query = text.trim()
     setGrouped(query.length > 0)
 
-    if (!query && filesOnly()) {
-      const loaded = file.tree.state("")?.loaded
-      const pending = loaded ? Promise.resolve() : file.tree.list("")
-      const next = uniqueEntries([...fileEntries.recent(), ...fileEntries.root()])
+    if (!query && props.filesOnly()) {
+      const loaded = palette.file.tree.state("")?.loaded
+      const pending = loaded ? Promise.resolve() : palette.file.tree.list("")
+      const next = uniqueCommandPaletteEntries([...palette.recentFileEntries(), ...palette.rootFileEntries()])
 
       if (loaded || next.length > 0) {
         void pending
@@ -331,79 +86,24 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
       }
 
       await pending
-      return uniqueEntries([...fileEntries.recent(), ...fileEntries.root()])
+      return uniqueCommandPaletteEntries([...palette.recentFileEntries(), ...palette.rootFileEntries()])
     }
 
-    if (!query) return [...commandEntries.picks(), ...fileEntries.recent()]
+    if (!query) return [...palette.preferredCommandEntries(), ...palette.recentFileEntries()]
 
-    if (filesOnly()) {
-      const files = await file.searchFiles(query)
-      const category = language.t("palette.group.files")
-      return files.map((path) => createFileEntry(path, category))
+    if (props.filesOnly()) {
+      const files = await palette.file.searchFiles(query)
+      const category = palette.language.t("palette.group.files")
+      return files.map((path) => createCommandPaletteFileEntry(path, category))
     }
 
-    const [files, nextSessions] = await Promise.all([file.searchFiles(query), Promise.resolve(sessions(query))])
-    const category = language.t("palette.group.files")
-    const entries = files.map((path) => createFileEntry(path, category))
-    return [...commandEntries.list(), ...nextSessions, ...entries]
-  }
-
-  const handleMove = (item: Entry | undefined) => {
-    state.cleanup?.()
-    if (!item) return
-    if (item.type !== "command") return
-    state.cleanup = item.option?.onHighlight?.()
-  }
-
-  const open = (path: string) => {
-    const value = file.tab(path)
-    void tabs().open(value)
-    void file.load(path)
-    if (!view().reviewPanel.opened()) view().reviewPanel.open()
-    layout.fileTree.setTab("all")
-    props.onOpenFile?.(path)
-    tabs().setActive(value)
-  }
-
-  const handleSelect = (item: Entry | undefined) => {
-    if (!item) return
-    state.committed = true
-    state.cleanup = undefined
-    dialog.close()
-
-    if (item.type === "command") {
-      item.option?.onSelect?.("palette")
-      return
-    }
-
-    if (item.type === "session") {
-      if (!item.directory || !item.sessionID) return
-      navigate(`/${base64Encode(item.directory)}/session/${item.sessionID}`)
-      return
-    }
-
-    if (!item.path) return
-    open(item.path)
-  }
-
-  onCleanup(() => {
-    if (state.committed) return
-    state.cleanup?.()
-  })
-
-  if (filesOnly() && platform.platform === "desktop" && settings.general.newLayoutDesigns()) {
-    return (
-      <DialogSelectFileV2
-        server={serverSDK().server}
-        mode="file"
-        start={projectDirectory()}
-        title={language.t("session.header.searchFiles")}
-        onSelect={(result) => {
-          if (typeof result !== "string") return
-          open(result)
-        }}
-      />
-    )
+    const [files, nextSessions] = await Promise.all([
+      palette.file.searchFiles(query),
+      Promise.resolve(palette.sessions(query)),
+    ])
+    const category = palette.language.t("palette.group.files")
+    const entries = files.map((path) => createCommandPaletteFileEntry(path, category))
+    return [...palette.commandEntries(), ...nextSessions, ...entries]
   }
 
   return (
@@ -411,21 +111,21 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
       <List
         class="px-3"
         search={{
-          placeholder: filesOnly()
-            ? language.t("session.header.searchFiles")
-            : language.t("palette.search.placeholder"),
+          placeholder: props.filesOnly()
+            ? palette.language.t("session.header.searchFiles")
+            : palette.language.t("palette.search.placeholder"),
           autofocus: true,
           hideIcon: true,
         }}
-        emptyMessage={language.t("palette.empty")}
-        loadingMessage={language.t("common.loading")}
+        emptyMessage={palette.language.t("palette.empty")}
+        loadingMessage={palette.language.t("common.loading")}
         items={items}
         key={(item) => item.id}
         filterKeys={["title", "description", "category"]}
         skipFilter={(item) => item.type === "file"}
         groupBy={grouped() ? (item) => item.category : () => ""}
-        onMove={handleMove}
-        onSelect={handleSelect}
+        onMove={(item: CommandPaletteEntry | undefined) => palette.highlight(item)}
+        onSelect={(item: CommandPaletteEntry | undefined) => palette.select(item)}
       >
         {(item) => (
           <Switch
@@ -452,7 +152,7 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
                   </Show>
                 </div>
                 <Show when={item.keybind}>
-                  <Keybind class="rounded-[4px]">{formatKeybind(item.keybind ?? "", language.t)}</Keybind>
+                  <Keybind class="rounded-[4px]">{formatKeybind(item.keybind ?? "", palette.language.t)}</Keybind>
                 </Show>
               </div>
             </Match>
@@ -479,7 +179,7 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
                 </div>
                 <Show when={item.updated}>
                   <span class="text-12-regular text-text-weak whitespace-nowrap ml-2">
-                    {getRelativeTime(new Date(item.updated!).toISOString(), language.t)}
+                    {getRelativeTime(new Date(item.updated!).toISOString(), palette.language.t)}
                   </span>
                 </Show>
               </div>

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

@@ -24,6 +24,7 @@ import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { Icon } from "@opencode-ai/ui/v2/icon"
 import { Tag as TagV2 } from "@opencode-ai/ui/v2/badge-v2"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { ModelTooltip } from "./model-tooltip"
 import { useLanguage } from "@/context/language"
 import { decode64 } from "@/utils/base64"
@@ -92,6 +93,7 @@ const ModelList: Component<{
           class="w-full"
           placement="right-start"
           gutter={12}
+          openDelay={0}
           value={<ModelTooltip model={item} latest={item.latest} free={isFree(item.provider.id, item.cost)} />}
         >
           {node}
@@ -446,26 +448,41 @@ export function ModelSelectorPopoverV2(props: {
                       <MenuV2.RadioGroup value={current()}>
                         <For each={group.items}>
                           {(item) => (
-                            <MenuV2.RadioItem
-                              value={modelKey(item)}
-                              data-option-key={modelKey(item)}
-                              data-selected-model={current() === modelKey(item) ? true : undefined}
-                              class="scroll-my-6"
-                              classList={{ "!bg-v2-overlay-simple-overlay-hover": store.active === modelKey(item) }}
-                              onMouseEnter={() => {
-                                setStore("active", modelKey(item))
-                                setTimeout(() => searchRef?.focus())
-                              }}
-                              onSelect={() => selectModel(item)}
+                            <TooltipV2
+                              class="w-full"
+                              placement="right-start"
+                              gutter={6}
+                              openDelay={0}
+                              value={
+                                <ModelTooltip
+                                  model={item}
+                                  latest={item.latest}
+                                  free={isFree(item.provider.id, item.cost)}
+                                  v2
+                                />
+                              }
                             >
-                              <span class="min-w-0 truncate">{item.name}</span>
-                              <Show when={isFree(item.provider.id, item.cost)}>
-                                <TagV2 class="shrink-0">{language.t("model.tag.free")}</TagV2>
-                              </Show>
-                              <Show when={item.latest}>
-                                <TagV2 class="shrink-0">{language.t("model.tag.latest")}</TagV2>
-                              </Show>
-                            </MenuV2.RadioItem>
+                              <MenuV2.RadioItem
+                                value={modelKey(item)}
+                                data-option-key={modelKey(item)}
+                                data-selected-model={current() === modelKey(item) ? true : undefined}
+                                class="scroll-my-6 w-full"
+                                classList={{ "!bg-v2-overlay-simple-overlay-hover": store.active === modelKey(item) }}
+                                onMouseEnter={() => {
+                                  setStore("active", modelKey(item))
+                                  setTimeout(() => searchRef?.focus())
+                                }}
+                                onSelect={() => selectModel(item)}
+                              >
+                                <span class="min-w-0 truncate">{item.name}</span>
+                                <Show when={isFree(item.provider.id, item.cost)}>
+                                  <TagV2 class="shrink-0">{language.t("model.tag.free")}</TagV2>
+                                </Show>
+                                <Show when={item.latest}>
+                                  <TagV2 class="shrink-0">{language.t("model.tag.latest")}</TagV2>
+                                </Show>
+                              </MenuV2.RadioItem>
+                            </TooltipV2>
                           )}
                         </For>
                       </MenuV2.RadioGroup>

packages/app/src/components/model-tooltip.tsx

@@ -1,4 +1,4 @@
-import { Show, type Component } from "solid-js"
+import { Show, type Component, type JSX } from "solid-js"
 import { useLanguage } from "@/context/language"
 
 type InputKey = "text" | "image" | "audio" | "video" | "pdf"
@@ -23,7 +23,18 @@ type ModelInfo = {
   }
 }
 
-export const ModelTooltip: Component<{ model: ModelInfo; latest?: boolean; free?: boolean }> = (props) => {
+function ModelTooltipRow(props: { name: JSX.Element; value: JSX.Element }) {
+  return (
+    <div class="flex min-w-0 items-center gap-4">
+      <span class="shrink-0 text-v2-text-text-muted">{props.name}</span>
+      <span class="ml-auto min-w-0 truncate text-right text-v2-text-text-base">{props.value}</span>
+    </div>
+  )
+}
+
+export const ModelTooltip: Component<{ model: ModelInfo; latest?: boolean; free?: boolean; v2?: boolean }> = (
+  props,
+) => {
   const language = useLanguage()
   const sourceName = (model: ModelInfo) => {
     const value = `${model.id} ${model.name}`.toLowerCase()
@@ -51,6 +62,13 @@ export const ModelTooltip: Component<{ model: ModelInfo; latest?: boolean; free?
     const suffix = tags.length ? ` (${tags.join(", ")})` : ""
     return `${sourceName(props.model)} ${props.model.name}${suffix}`
   }
+  const name = () => {
+    const tags: Array<string> = []
+    if (props.latest) tags.push(language.t("model.tag.latest"))
+    if (props.free) tags.push(language.t("model.tag.free"))
+    const suffix = tags.length ? ` (${tags.join(", ")})` : ""
+    return `${props.model.name}${suffix}`
+  }
   const inputs = () => {
     if (props.model.capabilities) {
       const input = props.model.capabilities.input
@@ -73,6 +91,21 @@ export const ModelTooltip: Component<{ model: ModelInfo; latest?: boolean; free?
       : language.t("model.tooltip.reasoning.none")
   }
   const context = () => language.t("model.tooltip.context", { limit: props.model.limit.context.toLocaleString() })
+  const contextLimit = () => props.model.limit.context.toLocaleString(language.intl())
+
+  if (props.v2) {
+    return (
+      <div class="flex w-[180px] flex-col gap-2">
+        <ModelTooltipRow name={language.t("model.tooltip.model")} value={name()} />
+        <ModelTooltipRow name={language.t("model.tooltip.provider")} value={props.model.provider.name} />
+        <Show when={inputs()}>
+          {(value) => <ModelTooltipRow name={language.t("model.tooltip.inputs")} value={value()} />}
+        </Show>
+        <ModelTooltipRow name={language.t("model.tooltip.reasoning")} value={reasoning()} />
+        <ModelTooltipRow name={language.t("model.tooltip.context.label")} value={contextLimit()} />
+      </div>
+    )
+  }
 
   return (
     <div class="flex flex-col gap-1 py-1">

packages/app/src/components/settings-general.tsx

@@ -440,11 +440,6 @@ export const SettingsGeneral: Component = () => {
             value={(o) => o.value}
             label={(o) => o.label}
             onSelect={(option) => option && theme.setColorScheme(option.value)}
-            onHighlight={(option) => {
-              if (!option) return
-              theme.previewColorScheme(option.value)
-              return () => theme.cancelPreview()
-            }}
             variant="secondary"
             size="small"
             triggerVariant="settings"
@@ -471,11 +466,6 @@ export const SettingsGeneral: Component = () => {
               if (!option) return
               theme.setTheme(option.id)
             }}
-            onHighlight={(option) => {
-              if (!option) return
-              theme.previewTheme(option.id)
-              return () => theme.cancelPreview()
-            }}
             variant="secondary"
             size="small"
             triggerVariant="settings"

packages/app/src/components/settings-v2/general.tsx

@@ -422,11 +422,6 @@ export const SettingsGeneralV2: Component<{
             value={(o) => o.value}
             label={(o) => o.label}
             onSelect={(option) => option && theme.setColorScheme(option.value)}
-            onHighlight={(option) => {
-              if (!option) return
-              theme.previewColorScheme(option.value)
-              return () => theme.cancelPreview()
-            }}
           />
         </SettingsRowV2>
 
@@ -454,11 +449,6 @@ export const SettingsGeneralV2: Component<{
               if (!option) return
               theme.setTheme(option.id)
             }}
-            onHighlight={(option) => {
-              if (!option) return
-              theme.previewTheme(option.id)
-              return () => theme.cancelPreview()
-            }}
           />
         </SettingsRowV2>
 

packages/app/src/components/titlebar-tab-nav.tsx

@@ -246,18 +246,23 @@ export function TabNavItem(props: {
           }}
           class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base group-data-[editing='true']:text-v2-text-text-base [-webkit-user-drag:none]"
         >
-          <Show when={props.session()}>
-            {(session) => (
-              <span data-slot="project-avatar-slot">
+          <span data-slot="project-avatar-slot" class="flex size-4 shrink-0 items-center justify-center">
+            <Show
+              when={props.session()}
+              fallback={
+                <span class="block size-4 rounded-[3px] border border-v2-border-border-muted" aria-hidden="true" />
+              }
+            >
+              {(session) => (
                 <SessionTabAvatar
                   project={project()}
                   directory={session().directory}
                   sessionId={session().id}
                   server={props.server}
                 />
-              </span>
-            )}
-          </Show>
+              )}
+            </Show>
+          </span>
           <span
             ref={(el) => {
               titleEl = el

packages/app/src/components/titlebar-tab-strip.tsx

@@ -40,6 +40,7 @@ function SessionTabSlot(props: {
   let ref!: HTMLDivElement
   const sdk = createMemo(() => props.serverCtx()?.sdk ?? null)
   const cachedSession = createMemo(() => props.serverCtx()?.sync.session.peek(props.tab.sessionId))
+  const persisted = createMemo(() => tabs.info[props.id])
   const [loadedSession] = createResource(
     () => {
       const ctx = props.serverCtx()
@@ -71,8 +72,10 @@ function SessionTabSlot(props: {
 
   createEffect(() => {
     const value = session()
+    if (!value) return
+    tabs.rememberSessionInfo(props.tab, value)
     const current = sdk()
-    if (!value || !current) return
+    if (!current) return
     createTabPromptState(tabs, props.tab, current.scope, {
       dir: base64Encode(value.directory),
       id: value.id,
@@ -86,7 +89,7 @@ function SessionTabSlot(props: {
       data-tab-key={props.id}
       data-active={props.active()}
       class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
-      classList={{ hidden: !session() && !missingSession() }}
+      classList={{ hidden: !session() && !missingSession() && !persisted()?.title }}
     >
       <TabNavItem
         ref={(el) => {
@@ -95,7 +98,7 @@ function SessionTabSlot(props: {
         href={tabHref(props.tab)}
         server={props.tab.server}
         session={session}
-        fallbackTitle={missingSession() ? language.t("session.tab.unknown") : undefined}
+        fallbackTitle={persisted()?.title ?? (missingSession() ? language.t("session.tab.unknown") : undefined)}
         onTitleChange={(title) => {
           const value = session()
           const ctx = props.serverCtx()

packages/app/src/context/command.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { upsertCommandRegistration } from "./command"
+import { resolveKeybindOption, upsertCommandRegistration } from "./command"
 
 describe("upsertCommandRegistration", () => {
   test("replaces keyed registrations", () => {
@@ -23,3 +23,19 @@ describe("upsertCommandRegistration", () => {
     expect(next[1]?.options).toBe(one)
   })
 })
+
+describe("resolveKeybindOption", () => {
+  test("prefers a matching contextual command over the global fallback", () => {
+    const fallback = { id: "tab.close", title: "Close tab" }
+    const contextual = { id: "terminal.close", title: "Close terminal", when: () => true }
+
+    expect(resolveKeybindOption([fallback, contextual], new KeyboardEvent("keydown"))).toBe(contextual)
+  })
+
+  test("uses the global fallback outside the command context", () => {
+    const fallback = { id: "tab.close", title: "Close tab" }
+    const contextual = { id: "terminal.close", title: "Close terminal", when: () => false }
+
+    expect(resolveKeybindOption([fallback, contextual], new KeyboardEvent("keydown"))).toBe(fallback)
+  })
+})

packages/app/src/context/command.tsx

@@ -82,10 +82,15 @@ export interface CommandOption {
   suggested?: boolean
   disabled?: boolean
   hidden?: boolean
+  when?: (event: KeyboardEvent) => boolean
   onSelect?: (source?: "palette" | "keybind" | "slash") => void
   onHighlight?: () => (() => void) | void
 }
 
+export function resolveKeybindOption(candidates: CommandOption[] | undefined, event: KeyboardEvent) {
+  return candidates?.find((option) => option.when?.(event)) ?? candidates?.find((option) => !option.when)
+}
+
 type CommandSource = "palette" | "keybind" | "slash"
 
 export type CommandCatalogItem = {
@@ -334,7 +339,7 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
     })
 
     const keymap = createMemo(() => {
-      const map = new Map<string, CommandOption>()
+      const map = new Map<string, CommandOption[]>()
       for (const option of options()) {
         if (option.id.startsWith(SUGGESTED_PREFIX)) continue
         if (option.disabled) continue
@@ -344,8 +349,12 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
         for (const kb of keybinds) {
           if (!kb.key) continue
           const sig = signature(kb.key, kb.ctrl, kb.meta, kb.shift, kb.alt)
-          if (map.has(sig)) continue
-          map.set(sig, option)
+          const existing = map.get(sig)
+          if (existing) {
+            existing.push(option)
+            continue
+          }
+          map.set(sig, [option])
         }
       }
       return map
@@ -374,7 +383,7 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
 
       const sig = signatureFromEvent(event)
       const isPalette = palette().has(sig)
-      const option = keymap().get(sig)
+      const option = resolveKeybindOption(keymap().get(sig), event)
       const modified = event.ctrlKey || event.metaKey || event.altKey
       const isTab = event.key === "Tab"
 
@@ -383,17 +392,19 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
 
       if (isPalette) {
         event.preventDefault()
+        event.stopPropagation()
         showPalette()
         return
       }
 
       if (!option) return
       event.preventDefault()
+      event.stopPropagation()
       option.onSelect?.("keybind")
     }
 
     onMount(() => {
-      makeEventListener(document, "keydown", handleKeyDown)
+      makeEventListener(document, "keydown", handleKeyDown, { capture: true })
     })
 
     function register(cb: () => CommandOption[]): void

packages/app/src/context/tabs.tsx

@@ -28,6 +28,11 @@ export type DraftTab = {
 
 export type Tab = SessionTab | DraftTab
 
+export type TabInfo = {
+  title?: string
+  directory?: string
+}
+
 type RecentTab = {
   key?: string
 }
@@ -64,6 +69,7 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       createStore<Tab[]>([]),
     )
     const [recent, setRecent, , recentReady] = persisted(Persist.window("tabs.recent"), createStore<RecentTab>({}))
+    const [info, setInfo] = persisted(Persist.window("tabs.info"), createStore<Record<string, TabInfo>>({}))
     const [closed, setClosed, , closedReady] = persisted(Persist.window("tabs.closed"), createStore<ClosedTab[]>([]))
 
     const params = useParams()
@@ -102,6 +108,15 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       for (const key of draftPersistedKeys()) removePersisted(Persist.draft(draftID, key), platform)
     }
 
+    const removeInfo = (key: string) => {
+      if (!info[key]) return
+      setInfo(
+        produce((draft) => {
+          delete draft[key]
+        }),
+      )
+    }
+
     onCleanup(memory.dispose)
 
     createEffect(() => {
@@ -110,11 +125,19 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       const next = store.filter((tab) => servers.has(tab.server))
       if (next.length !== store.length) {
         for (const tab of store) {
-          if (!servers.has(tab.server)) memory.remove(tabKey(tab))
+          if (!servers.has(tab.server)) {
+            const key = tabKey(tab)
+            memory.remove(key)
+            removeInfo(key)
+          }
         }
         setStore(() => next)
       }
       if (recent.key && !next.some((tab) => tabKey(tab) === recent.key)) setRecentKey(undefined)
+      const keys = new Set(next.map(tabKey))
+      for (const key of Object.keys(info)) {
+        if (!keys.has(key)) removeInfo(key)
+      }
     })
 
     createEffect(() => {
@@ -150,6 +173,7 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
         if (nextTab) navigateTab(nextTab)
       }).finally(() => closing.delete(key))
       memory.remove(key)
+      removeInfo(key)
       if (draftID) removeDraftPersisted(draftID)
     }
 
@@ -264,6 +288,7 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
         const removed = store.filter((tab) => tab.server === key).map(tabKey)
         setStore((tabs) => tabs.filter((tab) => tab.server !== key))
         for (const key of removed) memory.remove(key)
+        for (const key of removed) removeInfo(key)
         if (recent.key && removed.includes(recent.key)) setRecentKey(undefined)
         for (const draftID of drafts) removeDraftPersisted(draftID)
         if (server.key === key) navigate("/")
@@ -318,6 +343,14 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
           if (recent.key && removed.includes(recent.key)) setRecentKey(undefined)
         })
         for (const key of removed) memory.remove(key)
+        for (const key of removed) removeInfo(key)
+      },
+      rememberSessionInfo(tab: SessionTab, session: Session) {
+        const key = tabKey(tab)
+        const next = { title: session.title, directory: session.directory }
+        const current = info[key]
+        if (current?.title === next.title && current.directory === next.directory) return
+        setInfo(key, next)
       },
       select: navigateTab,
       remember(tab: Tab) {
@@ -342,6 +375,6 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       },
     }
 
-    return { ...actions, store, ready, recentReady }
+    return { ...actions, store, info, ready, recentReady }
   },
 })

packages/app/src/i18n/en.ts

@@ -212,6 +212,11 @@ export const dict = {
   "model.input.video": "video",
   "model.input.pdf": "pdf",
   "model.tooltip.allows": "Allows: {{inputs}}",
+  "model.tooltip.context.label": "Context",
+  "model.tooltip.inputs": "Inputs",
+  "model.tooltip.model": "Model",
+  "model.tooltip.provider": "Provider",
+  "model.tooltip.reasoning": "Reasoning",
   "model.tooltip.reasoning.allowed": "Allows reasoning",
   "model.tooltip.reasoning.none": "No reasoning",
   "model.tooltip.context": "Context limit {{limit}}",

packages/app/src/index.css

@@ -224,7 +224,26 @@
 
   [data-slot="model-selector-scroll"]::before {
     top: 0;
-    background: linear-gradient(to bottom, var(--v2-background-bg-layer-01), transparent);
+    height: 12px;
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 80%, transparent) 0%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 78.3336%, transparent) 4.7%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 76.4824%, transparent) 8.9%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 74.368%, transparent) 12.8%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 71.9123%, transparent) 16.56%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 69.037%, transparent) 20.37%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 65.664%, transparent) 24.4%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 61.715%, transparent) 28.83%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 57.1117%, transparent) 33.84%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 51.776%, transparent) 39.6%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 45.6296%, transparent) 46.3%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 38.5944%, transparent) 54.1%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 30.592%, transparent) 63.2%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 21.5443%, transparent) 73.76%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 11.373%, transparent) 85.97%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 0%, transparent) 100%
+    );
   }
 
   [data-slot="manage-models-scroll"]::before {
@@ -239,7 +258,26 @@
 
   [data-slot="model-selector-scroll"]::after {
     bottom: 0;
-    background: linear-gradient(to top, var(--v2-background-bg-layer-01), transparent);
+    height: 12px;
+    background: linear-gradient(
+      0deg,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 80%, transparent) 0%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 78.3336%, transparent) 4.7%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 76.4824%, transparent) 8.9%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 74.368%, transparent) 12.8%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 71.9123%, transparent) 16.56%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 69.037%, transparent) 20.37%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 65.664%, transparent) 24.4%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 61.715%, transparent) 28.83%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 57.1117%, transparent) 33.84%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 51.776%, transparent) 39.6%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 45.6296%, transparent) 46.3%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 38.5944%, transparent) 54.1%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 30.592%, transparent) 63.2%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 21.5443%, transparent) 73.76%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 11.373%, transparent) 85.97%,
+      color-mix(in srgb, var(--v2-background-bg-layer-01) 0%, transparent) 100%
+    );
   }
 
   @supports (animation-timeline: --home-projects-scroll) and (timeline-scope: --home-projects-scroll) {

packages/app/src/pages/home.tsx

@@ -1278,7 +1278,7 @@ function HomeSessionSearch(props: {
             </div>
           </div>
         </Show>
-        <label class="relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] bg-v2-background-bg-layer-02/60 py-1 pl-3 pr-2 text-v2-icon-icon-muted transition-[background-color,box-shadow] duration-[120ms] ease-in-out hover:bg-v2-background-bg-layer-02">
+        <label class="relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] bg-v2-background-bg-layer-02/60 py-1 pl-3 pr-2 text-v2-icon-icon-muted transition-[background-color,box-shadow] duration-[120ms] ease-in-out hover:bg-v2-background-bg-layer-02 focus-within:bg-v2-background-bg-layer-02">
           <IconV2 name="magnifying-glass" />
           <input
             ref={input}

packages/app/src/pages/layout/project-avatar-state.ts

@@ -2,8 +2,8 @@ import { createMemo, type Accessor } from "solid-js"
 import { useGlobal } from "@/context/global"
 import { useNotification } from "@/context/notification"
 import { usePermission } from "@/context/permission"
+import { sessionPermissionRequest, sessionQuestionRequest } from "@/pages/session/composer/session-request-tree"
 import { ServerConnection } from "@/context/server"
-import { sessionPermissionRequest } from "@/pages/session/composer/session-request-tree"
 
 export function useSessionTabAvatarState(
   server: Accessor<ServerConnection.Key>,
@@ -26,15 +26,20 @@ export function useSessionTabAvatarState(
       return !permission.autoResponds(item, directory())
     })
   })
-  const unread = createMemo(() => {
-    if (hasPermissions()) return true
-    if (!connection()) return false
-    return notification.ensureServerState(server()).session.unseenCount(sessionId()) > 0
+  const hasQuestions = createMemo(() => {
+    const serverSync = sync()
+    if (!serverSync) return false
+    const [store] = serverSync.child(directory(), { bootstrap: false })
+    return !!sessionQuestionRequest(store.session, serverSync.session.data.question, sessionId())
   })
+  const needsAttention = createMemo(() => hasPermissions() || hasQuestions())
+  const unread = createMemo(
+    () => needsAttention() || notification.ensureServerState(server()).session.unseenCount(sessionId()) > 0,
+  )
   const loading = createMemo(() => {
     const serverSync = sync()
     if (!serverSync) return false
-    if (hasPermissions()) return false
+    if (needsAttention()) return false
     return serverSync.session.data.session_working(sessionId())
   })
   return { unread, loading }

packages/app/src/pages/session/use-session-commands.tsx

@@ -269,6 +269,14 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     view().terminal.open()
   }
 
+  const closeTerminal = () => {
+    const id = terminal.active()
+    if (!id) return
+    const last = terminal.all().length === 1
+    void terminal.close(id)
+    if (last) view().terminal.close()
+  }
+
   const chooseMcp = () => {
     void openDialog(
       () => import("@/components/dialog-select-mcp"),
@@ -518,6 +526,14 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
   ]
 
   const terminalCmds = () => [
+    terminalCommand({
+      id: "terminal.close",
+      title: language.t("terminal.close"),
+      keybind: "mod+w",
+      hidden: true,
+      when: (event) => event.target instanceof Element && !!event.target.closest('[data-component="terminal"]'),
+      onSelect: closeTerminal,
+    }),
     terminalCommand({
       id: "terminal.new",
       title: language.t("command.terminal.new"),

packages/console/app/src/app.tsx

@@ -9,6 +9,7 @@ import "./app.css"
 import { LanguageProvider } from "~/context/language"
 import { I18nProvider, useI18n } from "~/context/i18n"
 import { strip } from "~/lib/language"
+import { DesktopPromo } from "~/component/desktop-promo"
 
 function AppMeta() {
   const i18n = useI18n()
@@ -33,6 +34,7 @@ export default function App() {
             <MetaProvider>
               <AppMeta />
               <Suspense>{props.children}</Suspense>
+              <DesktopPromo />
             </MetaProvider>
           </I18nProvider>
         </LanguageProvider>

packages/console/app/src/component/desktop-promo.css

@@ -0,0 +1,101 @@
+[data-component="desktop-promo"] {
+  --promo-background: hsl(0, 20%, 99%);
+  --promo-background-weak: hsl(0, 8%, 97%);
+  --promo-text: hsl(0, 1%, 39%);
+  --promo-text-strong: hsl(0, 5%, 12%);
+  --promo-border: hsla(0, 100%, 3%, 0.12);
+
+  position: fixed;
+  z-index: 20;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  width: min(28rem, calc(100vw - 2rem));
+  padding: 4px;
+  overflow: hidden;
+  color: var(--promo-text);
+  border: 1px solid var(--promo-border);
+  border-radius: 8px;
+  background: var(--promo-background);
+  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 15%);
+  font-family: var(--font-mono);
+
+  @media (prefers-color-scheme: dark) {
+    --promo-background: hsl(0, 9%, 7%);
+    --promo-background-weak: hsl(0, 6%, 10%);
+    --promo-text: hsl(0, 4%, 71%);
+    --promo-text-strong: hsl(0, 15%, 94%);
+    --promo-border: hsl(0, 4%, 23%);
+  }
+
+  @media (max-width: 40rem) {
+    right: 1rem;
+    bottom: 1rem;
+  }
+
+  [data-slot="desktop-promo-link"] {
+    display: block;
+    color: var(--promo-text);
+    text-decoration: none;
+  }
+
+  [data-slot="desktop-promo-link"]:focus-visible {
+    outline: 2px solid var(--promo-text-strong);
+    outline-offset: -3px;
+  }
+
+  video {
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    border-radius: 4px;
+    background: var(--promo-background-weak);
+  }
+
+  [data-slot="desktop-promo-copy"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    padding: 1rem;
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+
+  [data-slot="desktop-promo-copy"] strong {
+    color: var(--promo-text-strong);
+    font-weight: 500;
+  }
+
+  [data-slot="desktop-promo-close"] {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    display: grid;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    place-items: center;
+    cursor: pointer;
+    color: white;
+    border: none;
+    border-radius: 0.25rem;
+    background: rgb(0 0 0 / 70%);
+    opacity: 0;
+    transition: opacity 150ms ease, background 150ms ease;
+  }
+
+  &:hover [data-slot="desktop-promo-close"],
+  [data-slot="desktop-promo-close"]:focus-visible {
+    opacity: 1;
+  }
+
+  [data-slot="desktop-promo-close"]:hover {
+    background: rgb(0 0 0 / 90%);
+  }
+
+  @media (hover: none) {
+    [data-slot="desktop-promo-close"] {
+      opacity: 1;
+    }
+  }
+}

packages/console/app/src/component/desktop-promo.tsx

@@ -0,0 +1,47 @@
+import "./desktop-promo.css"
+import { A, useLocation } from "@solidjs/router"
+import { createSignal, Show } from "solid-js"
+import { getRequestEvent } from "solid-js/web"
+import desktopPromoVideo from "~/asset/lander/desktop-tabs-landscape.mp4"
+import { useI18n } from "~/context/i18n"
+import { useLanguage } from "~/context/language"
+import { strip } from "~/lib/language"
+
+export function DesktopPromo() {
+  const i18n = useI18n()
+  const language = useLanguage()
+  const location = useLocation()
+  const [visible, setVisible] = createSignal(true)
+  const request = getRequestEvent()?.request
+  const hostname = request ? new URL(request.url).hostname : typeof window === "object" ? window.location.hostname : ""
+  const primaryHost =
+    hostname === "opencode.ai" || hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1"
+
+  return (
+    <Show
+      when={
+        visible() &&
+        primaryHost &&
+        strip(location.pathname) !== "/download" &&
+        !strip(location.pathname).startsWith("/download/")
+      }
+    >
+      <aside data-component="desktop-promo">
+        <A href={language.route("/download")} data-slot="desktop-promo-link">
+          <video src={desktopPromoVideo} autoplay playsinline loop muted preload="metadata" aria-hidden="true" />
+          <span data-slot="desktop-promo-copy">
+            <strong>{i18n.t("home.promo.title")}</strong>
+            <span>{i18n.t("home.promo.body")}</span>
+            <span>{i18n.t("home.promo.cta")}</span>
+          </span>
+        </A>
+        <button type="button" data-slot="desktop-promo-close" onClick={() => setVisible(false)}>
+          <span class="sr-only">{i18n.t("home.promo.close")}</span>
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" stroke-width="1.5" />
+          </svg>
+        </button>
+      </aside>
+    </Show>
+  )
+}

packages/console/app/src/i18n/ar.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "على macOS، Windows، وLinux",
   "home.banner.downloadNow": "حمّل الآن",
   "home.banner.downloadBetaNow": "حمّل النسخة التجريبية لتطبيق سطح المكتب الآن",
+  "home.promo.title": "نقدّم علامات التبويب لتطبيق سطح المكتب",
+  "home.promo.body": "تنقّل بين جلسات متعددة واعمل عليها بسهولة.",
+  "home.promo.cta": "حدّث تطبيق سطح المكتب إلى أحدث إصدار للبدء.",
+  "home.promo.close": "إغلاق إعلان تطبيق سطح المكتب",
 
   "home.hero.title": "وكيل برمجة بالذكاء الاصطناعي مفتوح المصدر",
   "home.hero.subtitle.a": "نماذج مجانية مضمّنة أو اربط أي نموذج من أي مزوّد،",
@@ -700,7 +704,7 @@ export const dict = {
 
   "download.title": "OpenCode | تنزيل",
   "download.meta.description": "نزّل OpenCode لـ macOS، Windows، وLinux",
-  "download.hero.title": "تنزيل OpenCode",
+  "download.hero.title": "تنزيل OpenCode لسطح المكتب",
   "download.hero.subtitle": "متاح في نسخة تجريبية لـ macOS، Windows، وLinux",
   "download.hero.button": "تنزيل لـ {{os}}",
   "download.section.terminal": "OpenCode للطرفية",

packages/console/app/src/i18n/br.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "no macOS, Windows e Linux",
   "home.banner.downloadNow": "Baixar agora",
   "home.banner.downloadBetaNow": "Baixe agora o beta do desktop",
+  "home.promo.title": "Conheça as abas no app desktop",
+  "home.promo.body": "Trabalhe com facilidade em várias sessões.",
+  "home.promo.cta": "Atualize o app desktop para a versão mais recente para começar.",
+  "home.promo.close": "Fechar anúncio do app desktop",
 
   "home.hero.title": "O agente de codificação de código aberto com IA",
   "home.hero.subtitle.a": "Modelos grátis incluídos ou conecte qualquer modelo de qualquer provedor,",
@@ -711,7 +715,7 @@ export const dict = {
 
   "download.title": "OpenCode | Baixar",
   "download.meta.description": "Baixe o OpenCode para macOS, Windows e Linux",
-  "download.hero.title": "Baixar OpenCode",
+  "download.hero.title": "Baixar OpenCode Desktop",
   "download.hero.subtitle": "Disponível em Beta para macOS, Windows e Linux",
   "download.hero.button": "Baixar para {{os}}",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/da.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "på macOS, Windows og Linux",
   "home.banner.downloadNow": "Download nu",
   "home.banner.downloadBetaNow": "Download desktop-betaen nu",
+  "home.promo.title": "Introduktion af Tabs til Desktop",
+  "home.promo.body": "Arbejd nemt på tværs af flere sessioner.",
+  "home.promo.cta": "Opdater til den nyeste Desktop-app for at komme i gang.",
+  "home.promo.close": "Luk meddelelsen om Desktop-appen",
 
   "home.hero.title": "Den open source AI-kodningsagent",
   "home.hero.subtitle.a": "Gratis modeller inkluderet, eller forbind enhver model fra enhver udbyder,",
@@ -706,7 +710,7 @@ export const dict = {
 
   "download.title": "OpenCode | Download",
   "download.meta.description": "Download OpenCode til macOS, Windows og Linux",
-  "download.hero.title": "Download OpenCode",
+  "download.hero.title": "Download OpenCode Desktop",
   "download.hero.subtitle": "Tilgængelig i beta til macOS, Windows og Linux",
   "download.hero.button": "Download til {{os}}",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/de.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "auf macOS, Windows und Linux",
   "home.banner.downloadNow": "Jetzt herunterladen",
   "home.banner.downloadBetaNow": "Desktop-Beta jetzt herunterladen",
+  "home.promo.title": "Neu: Tabs für Desktop",
+  "home.promo.body": "Arbeite mühelos in mehreren Sitzungen.",
+  "home.promo.cta": "Aktualisiere auf die neueste Desktop-App, um loszulegen.",
+  "home.promo.close": "Ankündigung zur Desktop-App schließen",
 
   "home.hero.title": "Der Open-Source AI-Coding-Agent",
   "home.hero.subtitle.a": "Kostenlose Modelle inklusive oder verbinde jedes Modell eines beliebigen Anbieters,",
@@ -711,7 +715,7 @@ export const dict = {
 
   "download.title": "OpenCode | Download",
   "download.meta.description": "Lade OpenCode für macOS, Windows und Linux herunter",
-  "download.hero.title": "OpenCode herunterladen",
+  "download.hero.title": "OpenCode Desktop herunterladen",
   "download.hero.subtitle": "In Beta verfügbar für macOS, Windows und Linux",
   "download.hero.button": "Download für {{os}}",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/en.ts

@@ -107,6 +107,11 @@ export const dict = {
   "home.banner.downloadNow": "Download now",
   "home.banner.downloadBetaNow": "Download the desktop beta now",
 
+  "home.promo.title": "Introducing Tabs for Desktop",
+  "home.promo.body": "Work across multiple sessions with ease.",
+  "home.promo.cta": "Update to the latest desktop app to get started.",
+  "home.promo.close": "Dismiss desktop app announcement",
+
   "home.hero.title": "The open source AI coding agent",
   "home.hero.subtitle.a": "Free models included or connect any model from any provider,",
   "home.hero.subtitle.b": "including Claude, GPT, Gemini and more.",
@@ -703,7 +708,7 @@ export const dict = {
 
   "download.title": "OpenCode | Download",
   "download.meta.description": "Download OpenCode for macOS, Windows, and Linux",
-  "download.hero.title": "Download OpenCode",
+  "download.hero.title": "Download OpenCode Desktop",
   "download.hero.subtitle": "Available in Beta for macOS, Windows, and Linux",
   "download.hero.button": "Download for {{os}}",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/es.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "en macOS, Windows y Linux",
   "home.banner.downloadNow": "Descargar ahora",
   "home.banner.downloadBetaNow": "Descargar la beta de escritorio ahora",
+  "home.promo.title": "Presentamos Tabs para Desktop",
+  "home.promo.body": "Trabaja fácilmente en varias sesiones.",
+  "home.promo.cta": "Actualiza a la última versión de la aplicación Desktop para empezar.",
+  "home.promo.close": "Cerrar el anuncio de la aplicación Desktop",
 
   "home.hero.title": "El agente de codificación IA de código abierto",
   "home.hero.subtitle.a": "Modelos gratuitos incluidos o conecta cualquier modelo de cualquier proveedor,",
@@ -711,7 +715,7 @@ export const dict = {
 
   "download.title": "OpenCode | Descargar",
   "download.meta.description": "Descarga OpenCode para macOS, Windows y Linux",
-  "download.hero.title": "Descargar OpenCode",
+  "download.hero.title": "Descargar OpenCode Desktop",
   "download.hero.subtitle": "Disponible en Beta para macOS, Windows y Linux",
   "download.hero.button": "Descargar para {{os}}",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/fr.ts

@@ -104,6 +104,10 @@ export const dict = {
   "home.banner.platforms": "sur macOS, Windows et Linux",
   "home.banner.downloadNow": "Télécharger maintenant",
   "home.banner.downloadBetaNow": "Télécharger la bêta desktop maintenant",
+  "home.promo.title": "Découvrez Tabs pour Desktop",
+  "home.promo.body": "Travaillez facilement dans plusieurs sessions.",
+  "home.promo.cta": "Mettez à jour l’application Desktop pour commencer.",
+  "home.promo.close": "Fermer l’annonce de l’application Desktop",
 
   "home.hero.title": "L'agent de code IA open source",
   "home.hero.subtitle.a":
@@ -718,7 +722,7 @@ export const dict = {
 
   "download.title": "OpenCode | Téléchargement",
   "download.meta.description": "Téléchargez OpenCode pour macOS, Windows et Linux",
-  "download.hero.title": "Télécharger OpenCode",
+  "download.hero.title": "Télécharger OpenCode Desktop",
   "download.hero.subtitle": "Disponible en bêta pour macOS, Windows et Linux",
   "download.hero.button": "Télécharger pour {{os}}",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/it.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "su macOS, Windows e Linux",
   "home.banner.downloadNow": "Scarica ora",
   "home.banner.downloadBetaNow": "Scarica ora la beta desktop",
+  "home.promo.title": "Scopri Tabs per Desktop",
+  "home.promo.body": "Lavora facilmente su più sessioni.",
+  "home.promo.cta": "Aggiorna l’app Desktop all’ultima versione per iniziare.",
+  "home.promo.close": "Chiudi l’annuncio dell’app Desktop",
 
   "home.hero.title": "L'agente di coding IA open source",
   "home.hero.subtitle.a": "Modelli gratuiti inclusi o collega qualsiasi modello da qualsiasi provider,",
@@ -709,7 +713,7 @@ export const dict = {
 
   "download.title": "OpenCode | Download",
   "download.meta.description": "Scarica OpenCode per macOS, Windows e Linux",
-  "download.hero.title": "Scarica OpenCode",
+  "download.hero.title": "Scarica OpenCode Desktop",
   "download.hero.subtitle": "Disponibile in Beta per macOS, Windows e Linux",
   "download.hero.button": "Scarica per {{os}}",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/ja.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "macOS、Windows、Linux で",
   "home.banner.downloadNow": "今すぐダウンロード",
   "home.banner.downloadBetaNow": "デスクトップベータ版を今すぐダウンロード",
+  "home.promo.title": "デスクトップ版にタブが登場",
+  "home.promo.body": "複数のセッションを簡単に切り替えて作業できます。",
+  "home.promo.cta": "利用するには、デスクトップアプリを最新版にアップデートしてください。",
+  "home.promo.close": "デスクトップアプリのお知らせを閉じる",
 
   "home.hero.title": "オープンソースのAIコーディングエージェント",
   "home.hero.subtitle.a": "無料モデルが含まれています。また、任意のプロバイダーの任意のモデルに接続でき、",
@@ -708,7 +712,7 @@ export const dict = {
 
   "download.title": "OpenCode | ダウンロード",
   "download.meta.description": "OpenCode を macOS、Windows、Linux 向けにダウンロード",
-  "download.hero.title": "OpenCode をダウンロード",
+  "download.hero.title": "OpenCode デスクトップ版をダウンロード",
   "download.hero.subtitle": "macOS、Windows、Linux 向けベータ版を利用可能",
   "download.hero.button": "{{os}} 向けダウンロード",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/ko.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "macOS, Windows, Linux 지원",
   "home.banner.downloadNow": "지금 다운로드",
   "home.banner.downloadBetaNow": "데스크톱 베타 다운로드",
+  "home.promo.title": "데스크톱 탭을 소개합니다",
+  "home.promo.body": "여러 세션을 간편하게 오가며 작업하세요.",
+  "home.promo.cta": "최신 데스크톱 앱으로 업데이트하고 시작하세요.",
+  "home.promo.close": "데스크톱 앱 안내 닫기",
 
   "home.hero.title": "오픈 소스 AI 코딩 에이전트",
   "home.hero.subtitle.a": "무료 모델이 포함되어 있으며, 어떤 제공자의 모델이든 연결 가능합니다.",
@@ -700,7 +704,7 @@ export const dict = {
 
   "download.title": "OpenCode | 다운로드",
   "download.meta.description": "macOS, Windows, Linux용 OpenCode 다운로드",
-  "download.hero.title": "OpenCode 다운로드",
+  "download.hero.title": "OpenCode 데스크톱 다운로드",
   "download.hero.subtitle": "macOS, Windows, Linux용 베타 버전 사용 가능",
   "download.hero.button": "{{os}}용 다운로드",
   "download.section.terminal": "OpenCode 터미널",

packages/console/app/src/i18n/no.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "på macOS, Windows og Linux",
   "home.banner.downloadNow": "Last ned nå",
   "home.banner.downloadBetaNow": "Last ned desktop-betaen nå",
+  "home.promo.title": "Vi introduserer Tabs for Desktop",
+  "home.promo.body": "Jobb enkelt på tvers av flere økter.",
+  "home.promo.cta": "Oppdater til den nyeste Desktop-appen for å komme i gang.",
+  "home.promo.close": "Lukk kunngjøringen om Desktop-appen",
 
   "home.hero.title": "Den åpne kildekode AI-kodingsagenten",
   "home.hero.subtitle.a":
@@ -707,7 +711,7 @@ export const dict = {
 
   "download.title": "OpenCode | Last ned",
   "download.meta.description": "Last ned OpenCode for macOS, Windows og Linux",
-  "download.hero.title": "Last ned OpenCode",
+  "download.hero.title": "Last ned OpenCode Desktop",
   "download.hero.subtitle": "Tilgjengelig i beta for macOS, Windows og Linux",
   "download.hero.button": "Last ned for {{os}}",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/pl.ts

@@ -105,6 +105,10 @@ export const dict = {
   "home.banner.platforms": "na macOS, Windows i Linux",
   "home.banner.downloadNow": "Pobierz teraz",
   "home.banner.downloadBetaNow": "Pobierz betę wersji desktopowej",
+  "home.promo.title": "Przedstawiamy karty w aplikacji desktopowej",
+  "home.promo.body": "Pracuj wygodnie w wielu sesjach.",
+  "home.promo.cta": "Zaktualizuj aplikację desktopową do najnowszej wersji, aby zacząć.",
+  "home.promo.close": "Zamknij ogłoszenie o aplikacji desktopowej",
 
   "home.hero.title": "Open source'owy agent AI do kodowania",
   "home.hero.subtitle.a": "Darmowe modele w zestawie lub podłącz dowolny model od dowolnego dostawcy,",
@@ -708,7 +712,7 @@ export const dict = {
 
   "download.title": "OpenCode | Pobierz",
   "download.meta.description": "Pobierz OpenCode na macOS, Windows i Linux",
-  "download.hero.title": "Pobierz OpenCode",
+  "download.hero.title": "Pobierz OpenCode Desktop",
   "download.hero.subtitle": "Dostępne w wersji Beta na macOS, Windows i Linux",
   "download.hero.button": "Pobierz na {{os}}",
   "download.section.terminal": "Terminal OpenCode",

packages/console/app/src/i18n/ru.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "на macOS, Windows и Linux",
   "home.banner.downloadNow": "Скачать",
   "home.banner.downloadBetaNow": "Скачать бету для десктопа",
+  "home.promo.title": "Представляем вкладки в десктопном приложении",
+  "home.promo.body": "Легко работайте с несколькими сессиями.",
+  "home.promo.cta": "Обновите десктопное приложение до последней версии, чтобы начать.",
+  "home.promo.close": "Закрыть объявление о десктопном приложении",
 
   "home.hero.title": "AI-агент с открытым кодом для программирования",
   "home.hero.subtitle.a": "Бесплатные модели включены, или подключите любую модель от любого провайдера,",
@@ -716,7 +720,7 @@ export const dict = {
 
   "download.title": "OpenCode | Скачать",
   "download.meta.description": "Скачать OpenCode для macOS, Windows и Linux",
-  "download.hero.title": "Скачать OpenCode",
+  "download.hero.title": "Скачать OpenCode Desktop",
   "download.hero.subtitle": "Доступна бета для macOS, Windows и Linux",
   "download.hero.button": "Скачать для {{os}}",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/th.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "บน macOS, Windows และ Linux",
   "home.banner.downloadNow": "ดาวน์โหลดตอนนี้",
   "home.banner.downloadBetaNow": "ดาวน์โหลดเบต้าเดสก์ท็อปตอนนี้",
+  "home.promo.title": "ขอแนะนำแท็บสำหรับเดสก์ท็อป",
+  "home.promo.body": "ทำงานข้ามหลายเซสชันได้อย่างง่ายดาย",
+  "home.promo.cta": "อัปเดตแอปเดสก์ท็อปเป็นเวอร์ชันล่าสุดเพื่อเริ่มใช้งาน",
+  "home.promo.close": "ปิดประกาศเกี่ยวกับแอปเดสก์ท็อป",
 
   "home.hero.title": "เอเจนต์เขียนโค้ดด้วย AI แบบโอเพนซอร์ส",
   "home.hero.subtitle.a": "มีโมเดลฟรีรวมอยู่ หรือเชื่อมต่อโมเดลใดก็ได้จากผู้ให้บริการรายใดก็ได้,",
@@ -703,7 +707,7 @@ export const dict = {
 
   "download.title": "OpenCode | ดาวน์โหลด",
   "download.meta.description": "ดาวน์โหลด OpenCode สำหรับ macOS, Windows และ Linux",
-  "download.hero.title": "ดาวน์โหลด OpenCode",
+  "download.hero.title": "ดาวน์โหลด OpenCode สำหรับเดสก์ท็อป",
   "download.hero.subtitle": "พร้อมใช้งานในเวอร์ชันเบต้าสำหรับ macOS, Windows และ Linux",
   "download.hero.button": "ดาวน์โหลดสำหรับ {{os}}",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/tr.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "macOS, Windows ve Linux'ta",
   "home.banner.downloadNow": "Şimdi indir",
   "home.banner.downloadBetaNow": "Masaüstü betayı şimdi indir",
+  "home.promo.title": "Masaüstü uygulamasında sekmelerle tanışın",
+  "home.promo.body": "Birden fazla oturumda kolayca çalışın.",
+  "home.promo.cta": "Başlamak için masaüstü uygulamasını en son sürüme güncelleyin.",
+  "home.promo.close": "Masaüstü uygulaması duyurusunu kapat",
 
   "home.hero.title": "Açık kaynaklı yapay zeka kodlama ajanı",
   "home.hero.subtitle.a": "Ücretsiz modeller dahil veya herhangi bir sağlayıcıdan herhangi bir modeli bağlayın,",
@@ -711,7 +715,7 @@ export const dict = {
 
   "download.title": "OpenCode | İndir",
   "download.meta.description": "OpenCode'u macOS, Windows ve Linux için indirin",
-  "download.hero.title": "OpenCode'u İndir",
+  "download.hero.title": "OpenCode Desktop'u İndir",
   "download.hero.subtitle": "macOS, Windows ve Linux için Beta olarak sunuluyor",
   "download.hero.button": "{{os}} için indir",
   "download.section.terminal": "OpenCode Terminal",

packages/console/app/src/i18n/uk.ts

@@ -106,6 +106,10 @@ export const dict = {
   "home.banner.platforms": "на macOS, Windows та Linux",
   "home.banner.downloadNow": "Завантажити зараз",
   "home.banner.downloadBetaNow": "Завантажити бета-версію десктопного застосунку",
+  "home.promo.title": "Представляємо вкладки в десктопному застосунку",
+  "home.promo.body": "Легко працюйте з кількома сесіями.",
+  "home.promo.cta": "Оновіть десктопний застосунок до останньої версії, щоб почати.",
+  "home.promo.close": "Закрити оголошення про десктопний застосунок",
 
   "home.hero.title": "Відкритий AI-агент для кодування",
   "home.hero.subtitle.a": "Безкоштовні моделі включено або підключіть будь-яку модель від будь-якого провайдера,",
@@ -670,7 +674,7 @@ export const dict = {
 
   "download.title": "OpenCode | Завантажити",
   "download.meta.description": "Завантажте OpenCode для macOS, Windows та Linux",
-  "download.hero.title": "Завантажити OpenCode",
+  "download.hero.title": "Завантажити OpenCode Desktop",
   "download.hero.subtitle": "Доступно в бета-версії для macOS, Windows та Linux",
   "download.hero.button": "Завантажити для {{os}}",
   "download.section.terminal": "Термінал OpenCode",

packages/console/app/src/i18n/zh.ts

@@ -107,6 +107,10 @@ export const dict = {
   "home.banner.platforms": "支持 macOS, Windows, 和 Linux",
   "home.banner.downloadNow": "立即下载",
   "home.banner.downloadBetaNow": "立即下载桌面 Beta 版",
+  "home.promo.title": "桌面版标签页现已推出",
+  "home.promo.body": "轻松处理多个会话。",
+  "home.promo.cta": "更新至最新版桌面应用即可开始使用。",
+  "home.promo.close": "关闭桌面应用公告",
 
   "home.hero.title": "开源 AI 编程代理",
   "home.hero.subtitle.a": "内置免费模型，或连接任意提供商的任意模型，",
@@ -682,7 +686,7 @@ export const dict = {
 
   "download.title": "OpenCode | 下载",
   "download.meta.description": "下载适用于 macOS, Windows, 和 Linux 的 OpenCode",
-  "download.hero.title": "下载 OpenCode",
+  "download.hero.title": "下载 OpenCode 桌面版",
   "download.hero.subtitle": "适用于 macOS, Windows, 和 Linux 的 Beta 版",
   "download.hero.button": "下载 {{os}} 版",
   "download.section.terminal": "OpenCode 终端",

packages/console/app/src/i18n/zht.ts

@@ -107,6 +107,10 @@ export const dict = {
   "home.banner.platforms": "支援 macOS、Windows 與 Linux",
   "home.banner.downloadNow": "立即下載",
   "home.banner.downloadBetaNow": "立即下載桌面 Beta 版",
+  "home.promo.title": "桌面版分頁功能全新推出",
+  "home.promo.body": "輕鬆處理多個工作階段。",
+  "home.promo.cta": "更新至最新版桌面應用程式即可開始使用。",
+  "home.promo.close": "關閉桌面應用程式公告",
 
   "home.hero.title": "開源 AI 編碼代理",
   "home.hero.subtitle.a": "內建免費模型，或連接任意供應商的任意模型，",
@@ -682,7 +686,7 @@ export const dict = {
 
   "download.title": "OpenCode | 下載",
   "download.meta.description": "下載適用於 macOS、Windows 與 Linux 的 OpenCode",
-  "download.hero.title": "下載 OpenCode",
+  "download.hero.title": "下載 OpenCode 桌面版",
   "download.hero.subtitle": "適用於 macOS、Windows 與 Linux 的 Beta 版現已提供",
   "download.hero.button": "下載 {{os}} 版",
   "download.section.terminal": "OpenCode 終端",

packages/console/app/src/routes/download/index.css

@@ -284,7 +284,7 @@
   }
 
   [data-component="content"] {
-    padding: 6rem 5rem;
+    padding: 3rem 5rem 6rem;
 
     @media (max-width: 60rem) {
       padding: 4rem 1.5rem;
@@ -316,67 +316,43 @@
 
   /* Download Hero Section */
   [data-component="download-hero"] {
-    /* display: grid; */
-    display: none;
-    grid-template-columns: 260px 1fr;
+    display: grid;
+    grid-template-columns: 255px 1fr;
     gap: 4rem;
-    padding-bottom: 2rem;
+    padding: 4px;
+    border: 1px solid var(--color-border-weak);
+    border-radius: 8px;
     margin-bottom: 4rem;
 
     @media (max-width: 50rem) {
       grid-template-columns: 1fr;
-      gap: 1.5rem;
-      padding-bottom: 2rem;
+      gap: 0;
       margin-bottom: 2rem;
     }
 
-    [data-component="hero-icon"] {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-
-      @media (max-width: 40rem) {
-        display: none;
-      }
-
-      [data-slot="icon-placeholder"] {
-        width: 120px;
-        height: 120px;
-        background: var(--color-background-weak);
-        border: 1px solid var(--color-border-weak);
-        border-radius: 24px;
+    [data-component="hero-video"] {
+      video {
+        display: block;
+        width: 100%;
+        aspect-ratio: 1;
+        object-fit: cover;
+        border-radius: 4px;
 
         @media (max-width: 50rem) {
-          width: 80px;
-          height: 80px;
+          aspect-ratio: 16 / 9;
         }
       }
-
-      img {
-        width: 120px;
-        height: 120px;
-        border-radius: 24px;
-        box-shadow:
-          0 1.467px 2.847px 0 rgba(0, 0, 0, 0.42),
-          0 0.779px 1.512px 0 rgba(0, 0, 0, 0.34),
-          0 0.324px 0.629px 0 rgba(0, 0, 0, 0.24);
-
-        @media (max-width: 50rem) {
-          width: 80px;
-          height: 80px;
-          border-radius: 16px;
-        }
-      }
-
-      @media (max-width: 50rem) {
-        justify-content: flex-start;
-      }
     }
 
     [data-component="hero-text"] {
       display: flex;
       flex-direction: column;
       justify-content: center;
+      padding-right: 3rem;
+
+      @media (max-width: 50rem) {
+        padding: 1.5rem;
+      }
 
       h1 {
         font-size: 1.5rem;

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

@@ -11,7 +11,7 @@ import { LocaleLinks } from "~/component/locale-links"
 import { config } from "~/config"
 import { useI18n } from "~/context/i18n"
 import { useLanguage } from "~/context/language"
-import desktopAppIcon from "../../asset/lander/opencode-desktop-icon.png"
+import desktopTabsVideo from "../../asset/lander/desktop-tabs-landscape.mp4"
 import type { DownloadPlatform } from "./types"
 
 type OS = "macOS" | "Windows" | "Linux" | null
@@ -93,12 +93,14 @@ export default function Download() {
 
         <div data-component="content">
           <section data-component="download-hero">
-            <div data-component="hero-icon">
-              <img src={desktopAppIcon} alt="" />
+            <div data-component="hero-video">
+              <video src={desktopTabsVideo} autoplay playsinline loop muted preload="metadata" aria-hidden="true" />
             </div>
             <div data-component="hero-text">
               <h1>{i18n.t("download.hero.title")}</h1>
-              <p>{i18n.t("download.hero.subtitle")}</p>
+              <p>
+                {i18n.t("home.promo.body")} {i18n.t("home.promo.cta")}
+              </p>
               <Show when={detectedOS()}>
                 <a
                   href={language.route(getDownloadHref(getDownloadPlatform(detectedOS())))}

packages/core/src/fs-util.ts

@@ -60,9 +60,10 @@ export namespace FSUtil {
       })
 
       const readFileStringSafe = Effect.fn("FileSystem.readFileStringSafe")(function* (path: string) {
-        return yield* fs
-          .readFileString(path)
-          .pipe(Effect.catchReason("PlatformError", "NotFound", () => Effect.succeed(undefined)))
+        return yield* fs.readFileString(path).pipe(
+          Effect.catchReason("PlatformError", "NotFound", () => Effect.succeed(undefined)),
+          Effect.catchReason("PlatformError", "PermissionDenied", () => Effect.succeed(undefined)),
+        )
       })
 
       const isDir = Effect.fn("FileSystem.isDir")(function* (path: string) {

packages/desktop/src/main/windows.ts

@@ -71,7 +71,10 @@ export function setAppQuitting(quitting = true) {
 
 export function setBackgroundColor(color: string) {
   backgroundColor = color
-  BrowserWindow.getAllWindows().forEach((win) => win.setBackgroundColor(color))
+  BrowserWindow.getAllWindows().forEach((win) => {
+    win.setBackgroundColor(color)
+    if (process.platform === "darwin") win.invalidateShadow()
+  })
 }
 
 export function getBackgroundColor(): string | undefined {
@@ -106,6 +109,13 @@ function overlay(theme: Partial<TitlebarTheme> = {}, zoom = 1) {
 
 export function setTitlebar(win: BrowserWindow, theme: Partial<TitlebarTheme> = {}) {
   titlebarThemes.set(win, theme)
+  // macOS draws the window frame hairline and shadow using the NSWindow
+  // appearance, which follows nativeTheme rather than the rendered content.
+  // Align it with the app theme so a light app on a dark system does not get
+  // the dark-appearance border and shadow. A "system" scheme must map to
+  // "system" (not the resolved mode) or prefers-color-scheme stops tracking
+  // OS appearance changes in the renderer.
+  if (process.platform === "darwin") nativeTheme.themeSource = theme.scheme ?? theme.mode ?? "system"
   updateTitlebar(win)
 }
 
@@ -172,7 +182,7 @@ export function createMainWindow(id: string = randomUUID()) {
     ...(process.platform === "darwin"
       ? {
           titleBarStyle: "hidden" as const,
-          trafficLightPosition: { x: 12, y: 14 },
+          trafficLightPosition: { x: 14, y: 14 },
         }
       : {}),
     ...(process.platform === "win32"

packages/desktop/src/preload/types.ts

@@ -31,6 +31,7 @@ export type UpdaterAPI = {
 export type LinuxDisplayBackend = "wayland" | "auto"
 export type TitlebarTheme = {
   mode: "light" | "dark"
+  scheme?: "system" | "light" | "dark"
 }
 export type FatalRendererError = {
   error: string

packages/opencode/src/config/config.ts

@@ -293,6 +293,7 @@ const layer = Layer.effect(
     })
 
     const ensureGitignore = Effect.fn("Config.ensureGitignore")(function* (dir: string) {
+      yield* fs.ensureDir(dir)
       const gitignore = path.join(dir, ".gitignore")
       const hasIgnore = yield* fs.existsSafe(gitignore)
       if (!hasIgnore) {

packages/opencode/test/config/config.test.ts

@@ -923,6 +923,31 @@ it.effect("does not try to install dependencies in read-only OPENCODE_CONFIG_DIR
   }).pipe(Effect.provide(testInstanceStoreLayer), Effect.provide(LayerNode.compile(CrossSpawnSpawner.node))),
 )
 
+it.effect("ignores an inaccessible OPENCODE_CONFIG_DIR", () =>
+  Effect.gen(function* () {
+    if (process.platform === "win32") return
+
+    const dir = yield* tmpdirScoped()
+    const configDir = path.join(dir, "inaccessible")
+    yield* FSUtil.use.ensureDir(configDir)
+    yield* FSUtil.use.chmod(configDir, 0o000)
+    yield* Effect.addFinalizer(() => FSUtil.use.chmod(configDir, 0o755).pipe(Effect.ignore))
+
+    yield* withProcessEnv("OPENCODE_CONFIG_DIR", configDir, Config.use.get().pipe(provideInstanceEffect(dir)))
+  }).pipe(Effect.provide(testInstanceStoreLayer), Effect.provide(LayerNode.compile(CrossSpawnSpawner.node))),
+)
+
+it.effect("creates a missing OPENCODE_CONFIG_DIR", () =>
+  Effect.gen(function* () {
+    const dir = yield* tmpdirScoped()
+    const configDir = path.join(dir, "configdir")
+
+    yield* withProcessEnv("OPENCODE_CONFIG_DIR", configDir, Config.use.get().pipe(provideInstanceEffect(dir)))
+
+    expect(yield* FSUtil.use.readFileString(path.join(configDir, ".gitignore"))).toContain("node_modules")
+  }).pipe(Effect.provide(testInstanceStoreLayer), Effect.provide(LayerNode.compile(CrossSpawnSpawner.node))),
+)
+
 it.effect("installs dependencies in writable OPENCODE_CONFIG_DIR", () =>
   Effect.gen(function* () {
     const dir = yield* tmpdirScoped()

packages/session-ui/src/components/markdown.css

@@ -121,6 +121,20 @@
     margin: 0;
   }
 
+  li:has(> input[type="checkbox"]),
+  li:has(> p > input[type="checkbox"]) {
+    position: relative;
+    list-style-type: none;
+  }
+
+  li > input[type="checkbox"],
+  li > p > input[type="checkbox"] {
+    position: absolute;
+    top: 4px;
+    left: -20px;
+    margin: 0;
+  }
+
   li > p + p {
     display: block;
     margin-top: 0.5rem;

packages/stats/app/src/i18n.ts

@@ -210,25 +210,30 @@ const en = {
   "model.totalModels": "{{count}} models",
   "model.momentum": "Momentum",
   "model.vsPreviousWindow": "vs previous window",
-  "model.usageDescription": "Daily OpenCode Go token volume over the recent two-month window.",
+  "model.usageDescription": "Daily token volume.",
   "model.noUsageTitle": "No usage",
   "model.noUsageDescription": "No usage landed in the current window.",
   "model.dailyTokenChart": "Daily token usage chart",
-  "model.usersDescription": "Daily unique OpenCode Go users over the recent two-month window.",
+  "model.usersDescription": "Daily unique users.",
   "model.noUsersTitle": "No user data",
   "model.noUsersDescription": "No user-bearing rows landed in the current window.",
   "model.dailyUserChart": "Daily unique user chart",
-  "model.efficiencyDescription": "Cost, cache behavior, and average OpenCode Go session shape.",
+  "model.efficiencyDescription": "Cost, cache behavior, and average session shape.",
   "model.noEfficiencyTitle": "No efficiency data",
   "model.noEfficiencyDescription": "Efficiency data appears after usage lands.",
+  "model.totalSpendLabel": "Total spend",
   "model.cost": "Cost",
   "model.totalSpend": "total spend",
   "model.costPerMillion": "Cost / 1M",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
   "model.inputOutput": "input / output",
   "model.observedTokens": "observed all tokens",
   "model.costSession": "Cost / Session",
+  "model.averageCostSession": "Average cost / Session",
   "model.average": "average",
   "model.tokensSession": "Tokens / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cacheRatio": "Cache Ratio",
   "model.inputTokens": "input tokens",
   "model.geoDescription": "OpenCode Go model tokens used by country.",

packages/stats/app/src/i18n/ar.ts

@@ -202,6 +202,11 @@ export const dict = {
   "model.efficiencyDescription": "التكلفة، وسلوك التخزين المؤقت، ومتوسط شكل جلسة OpenCode Go.",
   "model.noEfficiencyTitle": "لا توجد بيانات كفاءة",
   "model.noEfficiencyDescription": "تظهر بيانات الكفاءة بعد وصول الاستخدام.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "التكلفة",
   "model.totalSpend": "إجمالي الإنفاق",
   "model.costPerMillion": "التكلفة / 1M",

packages/stats/app/src/i18n/br.ts

@@ -204,6 +204,11 @@ export const dict = {
   "model.efficiencyDescription": "Custo, comportamento de cache e formato médio da sessão do OpenCode Go.",
   "model.noEfficiencyTitle": "Sem dados de eficiência",
   "model.noEfficiencyDescription": "Os dados de eficiência aparecem depois que o uso chega.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "Custo",
   "model.totalSpend": "gasto total",
   "model.costPerMillion": "Custo / 1M",

packages/stats/app/src/i18n/da.ts

@@ -203,6 +203,11 @@ export const dict = {
   "model.efficiencyDescription": "Omkostning, cacheadfærd og gennemsnitlig OpenCode Go-sessionsform.",
   "model.noEfficiencyTitle": "Ingen effektivitetsdata",
   "model.noEfficiencyDescription": "Effektivitetsdata vises, når brug lander.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "Omkostning",
   "model.totalSpend": "samlet forbrug",
   "model.costPerMillion": "Omkostning / 1 mio.",

packages/stats/app/src/i18n/de.ts

@@ -204,6 +204,11 @@ export const dict = {
   "model.efficiencyDescription": "Kosten, Cache-Verhalten und durchschnittliche OpenCode Go-Sitzungsform.",
   "model.noEfficiencyTitle": "Keine Effizienzdaten",
   "model.noEfficiencyDescription": "Effizienzdaten erscheinen, nachdem Nutzung eingegangen ist.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "Kosten",
   "model.totalSpend": "Gesamtausgaben",
   "model.costPerMillion": "Kosten / 1 Mio.",

packages/stats/app/src/i18n/es.ts

@@ -203,6 +203,11 @@ export const dict = {
   "model.efficiencyDescription": "Coste, comportamiento de caché y forma media de sesión de OpenCode Go.",
   "model.noEfficiencyTitle": "Sin datos de eficiencia",
   "model.noEfficiencyDescription": "Los datos de eficiencia aparecen después de que llegue uso.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "Coste",
   "model.totalSpend": "gasto total",
   "model.costPerMillion": "Coste / 1 M",

packages/stats/app/src/i18n/fr.ts

@@ -205,6 +205,11 @@ export const dict = {
   "model.efficiencyDescription": "Coût, comportement du cache et forme moyenne des sessions OpenCode Go.",
   "model.noEfficiencyTitle": "Aucune donnée d'efficacité",
   "model.noEfficiencyDescription": "Les données d'efficacité apparaissent après l'arrivée de l'utilisation.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "Coût",
   "model.totalSpend": "dépense totale",
   "model.costPerMillion": "Coût / 1 M",

packages/stats/app/src/i18n/it.ts

@@ -204,6 +204,11 @@ export const dict = {
   "model.efficiencyDescription": "Costi, comportamento della cache e forma media della sessione OpenCode Go.",
   "model.noEfficiencyTitle": "Nessun dato di efficienza",
   "model.noEfficiencyDescription": "I dati di efficienza appaiono dopo l'arrivo dell'utilizzo.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "Costo",
   "model.totalSpend": "spesa totale",
   "model.costPerMillion": "Costo / 1 M",

packages/stats/app/src/i18n/ja.ts

@@ -205,6 +205,11 @@ export const dict = {
   "model.efficiencyDescription": "コスト、キャッシュ動作、平均的なOpenCode Goセッションの形。",
   "model.noEfficiencyTitle": "効率データがありません",
   "model.noEfficiencyDescription": "使用量が届くと効率データが表示されます。",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "コスト",
   "model.totalSpend": "総支出",
   "model.costPerMillion": "100万あたりのコスト",

packages/stats/app/src/i18n/ko.ts

@@ -205,6 +205,11 @@ export const dict = {
   "model.efficiencyDescription": "비용, 캐시 동작, 평균 OpenCode Go 세션 형태입니다.",
   "model.noEfficiencyTitle": "효율 데이터 없음",
   "model.noEfficiencyDescription": "사용량이 들어오면 효율 데이터가 표시됩니다.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "비용",
   "model.totalSpend": "총 지출",
   "model.costPerMillion": "100만당 비용",

packages/stats/app/src/i18n/no.ts

@@ -203,6 +203,11 @@ export const dict = {
   "model.efficiencyDescription": "Kostnad, cacheatferd og gjennomsnittlig OpenCode Go-øktform.",
   "model.noEfficiencyTitle": "Ingen effektivitetsdata",
   "model.noEfficiencyDescription": "Effektivitetsdata vises etter at bruk lander.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "Kostnad",
   "model.totalSpend": "totalt forbruk",
   "model.costPerMillion": "Kostnad / 1 mill.",

packages/stats/app/src/i18n/pl.ts

@@ -202,6 +202,11 @@ export const dict = {
   "model.efficiencyDescription": "Koszt, zachowanie cache i średni kształt sesji OpenCode Go.",
   "model.noEfficiencyTitle": "Brak danych wydajności",
   "model.noEfficiencyDescription": "Dane wydajności pojawią się po nadejściu użycia.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "Koszt",
   "model.totalSpend": "łączne wydatki",
   "model.costPerMillion": "Koszt / 1 mln",

packages/stats/app/src/i18n/ru.ts

@@ -204,6 +204,11 @@ export const dict = {
   "model.efficiencyDescription": "Стоимость, поведение кэша и средняя форма сеанса OpenCode Go.",
   "model.noEfficiencyTitle": "Нет данных эффективности",
   "model.noEfficiencyDescription": "Данные эффективности появятся после использования.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "Стоимость",
   "model.totalSpend": "общие расходы",
   "model.costPerMillion": "Стоимость / 1 млн",

packages/stats/app/src/i18n/th.ts

@@ -204,6 +204,11 @@ export const dict = {
   "model.efficiencyDescription": "ต้นทุน พฤติกรรมแคช และรูปแบบเซสชัน OpenCode Go โดยเฉลี่ย",
   "model.noEfficiencyTitle": "ไม่มีข้อมูลประสิทธิภาพ",
   "model.noEfficiencyDescription": "ข้อมูลประสิทธิภาพจะแสดงหลังจากมีการใช้งานเข้ามา",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "ต้นทุน",
   "model.totalSpend": "ยอดใช้จ่ายรวม",
   "model.costPerMillion": "ต้นทุน / 1 ล้าน",

packages/stats/app/src/i18n/tr.ts

@@ -204,6 +204,11 @@ export const dict = {
   "model.efficiencyDescription": "Maliyet, önbellek davranışı ve ortalama OpenCode Go oturum yapısı.",
   "model.noEfficiencyTitle": "Verimlilik verisi yok",
   "model.noEfficiencyDescription": "Verimlilik verileri kullanım geldikten sonra görünür.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "Maliyet",
   "model.totalSpend": "toplam harcama",
   "model.costPerMillion": "Maliyet / 1M",

packages/stats/app/src/i18n/uk.ts

@@ -204,6 +204,11 @@ export const dict = {
   "model.efficiencyDescription": "Вартість, поведінка кешу та середня форма сеансу OpenCode Go.",
   "model.noEfficiencyTitle": "Немає даних ефективності",
   "model.noEfficiencyDescription": "Дані ефективності з'являться після використання.",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "Вартість",
   "model.totalSpend": "загальні витрати",
   "model.costPerMillion": "Вартість / 1 млн",

packages/stats/app/src/i18n/zh.ts

@@ -203,6 +203,11 @@ export const dict = {
   "model.efficiencyDescription": "成本、缓存行为和平均 OpenCode Go 会话形态。",
   "model.noEfficiencyTitle": "无效率数据",
   "model.noEfficiencyDescription": "使用量到达后会显示效率数据。",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "成本",
   "model.totalSpend": "总支出",
   "model.costPerMillion": "每 100 万成本",

packages/stats/app/src/i18n/zht.ts

@@ -203,6 +203,11 @@ export const dict = {
   "model.efficiencyDescription": "成本、快取行為和平均 OpenCode Go 工作階段形態。",
   "model.noEfficiencyTitle": "無效率數據",
   "model.noEfficiencyDescription": "使用量到達後會顯示效率數據。",
+  "model.totalSpendLabel": "Total spend",
+  "model.costInput": "Cost input",
+  "model.costOutput": "Cost output",
+  "model.averageCostSession": "Average cost / Session",
+  "model.averageTokensSession": "Average tokens / session",
   "model.cost": "成本",
   "model.totalSpend": "總支出",
   "model.costPerMillion": "每 100 萬成本",

packages/stats/app/src/routes/[lab]/[model].tsx

@@ -15,7 +15,7 @@ import {
   type UsageRange,
 } from "@opencode-ai/stats-core/domain/home"
 import { createAsync, query, useParams } from "@solidjs/router"
-import { createMemo, createSignal, For, onMount, Show, type JSX } from "solid-js"
+import { createMemo, createSignal, createUniqueId, For, onMount, Show, type JSX } from "solid-js"
 import { getRequestEvent } from "solid-js/web"
 import type { FeatureCollection, GeometryObject, GeoJsonProperties } from "geojson"
 import type { GeometryCollection, Topology } from "topojson-specification"
@@ -28,7 +28,6 @@ import {
   formatCatalogLabName,
   getModelCatalog,
   type ModelCatalog,
-  type ModelCatalogCost,
   type ModelCatalogEntry,
 } from "../model-catalog"
 import { SectionHeading } from "../section-heading"
@@ -121,6 +120,8 @@ export default function StatsModel() {
   const modelHeaderLinks = createMemo<readonly HeaderLink[]>(() => [
     { href: "#overview", label: i18n.t("nav.overview") },
     { href: "#momentum", label: i18n.t("model.momentum") },
+    { href: "#usage", label: i18n.t("nav.usage") },
+    { href: "#unique-users", label: i18n.t("model.uniqueUsers") },
     { href: "#efficiency", label: i18n.t("nav.efficiency") },
     { href: "#geo-breakdown", label: i18n.t("nav.geoBreakdown") },
     { href: "#peers", label: i18n.t("nav.peers") },
@@ -183,6 +184,8 @@ export default function StatsModel() {
                 />
                 <ModelOverview catalog={catalogEntry() ?? null} />
                 <ModelMomentumSection data={stats() ?? null} />
+                <ModelUsageSection data={stats() ?? null} />
+                <ModelUniqueUsersSection data={stats() ?? null} />
                 <ModelEfficiencySection data={stats() ?? null} catalog={catalogEntry() ?? null} />
                 <ModelGeoBreakdownSection data={stats()?.country ?? emptyCountryRecord()} />
                 <ModelPeersSection data={stats() ?? null} />
@@ -561,6 +564,303 @@ function MomentumMetric(props: { label: string; value: string; watermark?: strin
   )
 }
 
+function ModelUsageSection(props: { data: StatsModelData | null }) {
+  const i18n = useI18n()
+  return (
+    <ModelTrendSection
+      data={props.data}
+      id="usage"
+      title={i18n.t("nav.usage")}
+      description={i18n.t("model.usageDescription")}
+      ariaLabel={i18n.t("model.dailyTokenChart")}
+      emptyTitle={i18n.t("model.noUsageTitle")}
+      emptyDescription={i18n.t("model.noUsageDescription")}
+      value={(point) => point.tokens}
+      formatValue={formatTokens}
+      valueUnit={i18n.t("lab.tokens")}
+      rowLabel={i18n.t("lab.dailyTokens")}
+      lineTone="muted"
+    />
+  )
+}
+
+function ModelUniqueUsersSection(props: { data: StatsModelData | null }) {
+  const i18n = useI18n()
+  return (
+    <ModelTrendSection
+      data={props.data}
+      id="unique-users"
+      title={i18n.t("model.uniqueUsers")}
+      description={i18n.t("model.usersDescription")}
+      ariaLabel={i18n.t("model.dailyUserChart")}
+      emptyTitle={i18n.t("model.noUsersTitle")}
+      emptyDescription={i18n.t("model.noUsersDescription")}
+      value={(point) => point.users}
+      formatValue={formatUsers}
+      valueUnit={i18n.t("format.users")}
+      rowLabel={i18n.t("model.uniqueUsers")}
+      lineTone="active"
+      activeLineBaseTone="muted"
+      highlightBars={false}
+      area
+    />
+  )
+}
+
+function ModelTrendSection(props: {
+  data: StatsModelData | null
+  id: string
+  title: string
+  description: string
+  ariaLabel: string
+  emptyTitle: string
+  emptyDescription: string
+  value: (point: ModelUsagePoint) => number
+  formatValue: (value: number) => string
+  valueUnit: string
+  rowLabel: string
+  lineTone: "muted" | "active"
+  activeLineBaseTone?: "muted" | "active"
+  highlightBars?: boolean
+  area?: boolean
+}) {
+  const activeLineClipId = createUniqueId()
+  const activeLineMaskId = createUniqueId()
+  const areaGradientId = createUniqueId()
+  const [activeIndex, setActiveIndex] = createSignal<number>()
+  const highlightBars = createMemo(() => props.highlightBars ?? true)
+  const lineScale = 326 / 450
+  const areaBottom = 100 / lineScale
+  const usage = createMemo(() => props.data?.usage ?? [])
+  const valueMax = createMemo(() => Math.max(0, ...usage().map((item) => props.value(item))) || 1)
+  const linePoints = createMemo(() =>
+    usage().map((point, index) => ({
+      point,
+      x: modelUsagePointX(index, usage().length),
+      y: modelUsageLineY(props.value(point), valueMax()),
+    })),
+  )
+  const linePath = createMemo(() => modelUsageLinePath(linePoints()))
+  const areaPath = createMemo(() => modelUsageAreaPath(linePoints(), areaBottom))
+  const activeLineBreak = createMemo(() => {
+    const index = activeIndex()
+    if (index === undefined || linePoints().length < 2) return undefined
+    return modelUsageColumnBounds(index, linePoints().length)
+  })
+  const activeLineClip = createMemo(() => {
+    const index = activeIndex()
+    if (index === undefined || linePoints().length < 2) return undefined
+    return modelUsageColumnInnerBounds(index, linePoints().length)
+  })
+  const activeTooltip = createMemo(() => {
+    const index = activeIndex()
+    const point = index === undefined ? undefined : usage()[index]
+    if (index === undefined || !point) return undefined
+    const bounds = modelUsageColumnBounds(index, usage().length)
+    return {
+      bounds,
+      index,
+      point,
+      tooltipY: (linePoints()[index]?.y ?? 100) * lineScale,
+    }
+  })
+  const monthTicks = createMemo(() => modelUsageMonthTicks(usage(), props.data?.updatedAt ?? null))
+
+  return (
+    <section id={props.id} data-section="model-panel">
+      <SectionTitle href={`#${props.id}`} title={props.title} description={props.description} />
+      <Show
+        when={usage().some((item) => props.value(item) > 0)}
+        fallback={<ModelEmptyState title={props.emptyTitle} description={props.emptyDescription} />}
+      >
+        <div
+          data-component="model-usage-chart"
+          data-variant="model-trend"
+          data-highlight-bars={highlightBars() ? "true" : undefined}
+          role="img"
+          aria-label={props.ariaLabel}
+          style={{ "--model-usage-count": usage().length } as JSX.CSSProperties}
+          onPointerLeave={(event) => {
+            if (event.pointerType === "touch") return
+            setActiveIndex(undefined)
+          }}
+        >
+          <div data-slot="model-trend-plot">
+            <Show when={linePath()}>
+              {(path) => (
+                <>
+                  <Show when={props.area && areaPath()}>
+                    {(area) => (
+                      <svg
+                        data-slot="model-trend-area-layer"
+                        viewBox={`0 0 100 ${formatUsagePathNumber(areaBottom)}`}
+                        preserveAspectRatio="none"
+                        aria-hidden="true"
+                      >
+                        <defs>
+                          <linearGradient id={areaGradientId} x1="0%" y1="0%" x2="0%" y2="100%">
+                            <stop offset="0%" stop-color="var(--model-trend-active)" stop-opacity="0.1" />
+                            <stop offset="66%" stop-color="var(--model-trend-active)" stop-opacity="0.045" />
+                            <stop offset="100%" stop-color="var(--model-trend-active)" stop-opacity="0" />
+                          </linearGradient>
+                        </defs>
+                        <path data-slot="model-trend-area" d={area()} fill={`url(#${areaGradientId})`} />
+                      </svg>
+                    )}
+                  </Show>
+                  <svg
+                    data-slot="model-trend-line"
+                    data-layer="base"
+                    viewBox="0 0 100 100"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                  >
+                    <Show
+                      when={activeLineBreak()}
+                      fallback={<path data-slot="model-trend-line-base" data-tone={props.lineTone} d={path()} />}
+                    >
+                      {(lineBreak) => (
+                        <>
+                          <defs>
+                            <mask id={activeLineMaskId} maskUnits="userSpaceOnUse">
+                              <rect x="0" y="-2" width="100" height="104" fill="white" />
+                              <rect x={lineBreak().x} y="-2" width={lineBreak().width} height="104" fill="black" />
+                            </mask>
+                          </defs>
+                          <path
+                            data-slot="model-trend-line-base"
+                            data-tone={props.activeLineBaseTone ?? props.lineTone}
+                            d={path()}
+                            mask={`url(#${activeLineMaskId})`}
+                          />
+                        </>
+                      )}
+                    </Show>
+                  </svg>
+                  <Show when={activeLineClip()}>
+                    {(clip) => (
+                      <svg
+                        data-slot="model-trend-line"
+                        data-layer="active"
+                        viewBox="0 0 100 100"
+                        preserveAspectRatio="none"
+                        aria-hidden="true"
+                      >
+                        <defs>
+                          <clipPath id={activeLineClipId} clipPathUnits="userSpaceOnUse">
+                            <rect x={clip().x} y="-2" width={clip().width} height="104" />
+                          </clipPath>
+                        </defs>
+                        <path data-slot="model-trend-line-active" d={path()} clip-path={`url(#${activeLineClipId})`} />
+                      </svg>
+                    )}
+                  </Show>
+                </>
+              )}
+            </Show>
+            <Show when={linePoints().at(-1)}>
+              {(point) => (
+                <span
+                  data-slot="model-trend-end-marker"
+                  data-tone={props.lineTone}
+                  aria-hidden="true"
+                  style={
+                    {
+                      "--model-trend-end-x": `${point().x}%`,
+                      "--model-trend-end-top": `${point().y * lineScale}%`,
+                    } as JSX.CSSProperties
+                  }
+                />
+              )}
+            </Show>
+            <div data-slot="model-trend-bars">
+              <For each={usage()}>
+                {(point, index) => (
+                  <div
+                    data-slot="model-trend-column"
+                    role="button"
+                    tabIndex={0}
+                    aria-label={`${point.date} ${props.formatValue(props.value(point))} ${props.valueUnit}`}
+                    data-active={activeIndex() === index() ? "true" : undefined}
+                    data-muted={
+                      highlightBars() && activeIndex() !== undefined && activeIndex() !== index() ? "true" : undefined
+                    }
+                    style={
+                      {
+                        "--model-trend-token-height": modelUsageStripHeight(props.value(point), valueMax()),
+                      } as JSX.CSSProperties
+                    }
+                    onPointerDown={(event) => {
+                      if (event.pointerType !== "touch") return
+                      setActiveIndex(index())
+                    }}
+                    onPointerEnter={() => setActiveIndex(index())}
+                    onPointerMove={(event) => {
+                      if (event.pointerType === "touch") return
+                      setActiveIndex(index())
+                    }}
+                    onClick={() => setActiveIndex(index())}
+                    onFocus={() => setActiveIndex(index())}
+                    onBlur={() => setActiveIndex(undefined)}
+                    onKeyDown={(event) => {
+                      if (event.key !== "Enter" && event.key !== " ") return
+                      event.preventDefault()
+                      setActiveIndex(index())
+                    }}
+                  >
+                    <div data-slot="model-trend-token-band">
+                      <div data-slot="model-trend-token-bar" />
+                    </div>
+                  </div>
+                )}
+              </For>
+            </div>
+            <Show when={activeTooltip()} keyed>
+              {(active) => (
+                <div
+                  data-component="chart-tooltip"
+                  data-placement={active.index > usage().length * 0.62 ? "left" : "right"}
+                  style={
+                    {
+                      "--model-trend-tooltip-left": `${active.bounds.x}%`,
+                      "--model-trend-tooltip-right": `${active.bounds.x + active.bounds.width}%`,
+                      "--model-trend-tooltip-y": `${active.tooltipY}`,
+                    } as JSX.CSSProperties
+                  }
+                >
+                  <strong>{formatModelUsageTooltipDate(active.point.date, props.data?.updatedAt ?? null)}</strong>
+                  <span>
+                    {props.formatValue(props.value(active.point))} {props.valueUnit}
+                  </span>
+                  <div data-slot="tooltip-divider" />
+                  <p>
+                    <span data-slot="tooltip-label">
+                      <i data-kind={props.lineTone === "active" ? "users" : "tokens"} /> {props.rowLabel}
+                    </span>
+                    <b>{props.formatValue(props.value(active.point))}</b>
+                  </p>
+                </div>
+              )}
+            </Show>
+          </div>
+          <div data-slot="model-trend-months" aria-hidden="true">
+            <For each={monthTicks()}>
+              {(tick) => (
+                <span
+                  data-align={tick.align}
+                  style={{ "--model-trend-month-left": `${tick.left}%` } as JSX.CSSProperties}
+                >
+                  {tick.label}
+                </span>
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+    </section>
+  )
+}
+
 function ModelEfficiencySection(props: { data: StatsModelData | null; catalog: ModelCatalogEntry | null }) {
   const i18n = useI18n()
   return (
@@ -580,35 +880,32 @@ function ModelEfficiencySection(props: { data: StatsModelData | null; catalog: M
         }
       >
         {(data) => (
-          <div data-component="model-metric-grid" data-variant="dense">
-            <MetricCard
-              label={i18n.t("model.cost")}
-              value={formatMoney(data().totals.cost)}
-              detail={i18n.t("model.totalSpend")}
-            />
-            <MetricCard
-              label={i18n.t("model.costPerMillion")}
-              value={
-                props.catalog?.cost ? formatCatalogPrice(props.catalog.cost) : formatMoney(data().totals.costPerMillion)
-              }
-              detail={props.catalog?.cost ? i18n.t("model.inputOutput") : i18n.t("model.observedTokens")}
-            />
-            <MetricCard
-              label={i18n.t("model.costSession")}
-              value={formatSessionCost(data().totals.costPerSession)}
-              detail={i18n.t("model.average")}
-            />
-            <MetricCard
-              label={i18n.t("model.tokensSession")}
-              value={formatTokens(data().totals.tokensPerSession)}
-              detail={i18n.t("model.average")}
-            />
-            <MetricCard
-              label={i18n.t("model.cacheRatio")}
-              value={formatPercent(data().totals.cacheRatio)}
-              detail={i18n.t("model.inputTokens")}
-            />
-          </div>
+          <>
+            <div data-slot="model-efficiency-pattern" aria-hidden="true" />
+            <div data-component="model-efficiency-grid">
+              <MetricCard label={i18n.t("model.totalSpendLabel")} value={formatMoney(data().totals.cost)} />
+              <MetricCard
+                label={i18n.t("model.costInput")}
+                value={formatCatalogUnitPrice(props.catalog?.cost?.input)}
+              />
+              <MetricCard
+                label={i18n.t("model.costOutput")}
+                value={formatCatalogUnitPrice(props.catalog?.cost?.output)}
+              />
+              <MetricCard
+                label={i18n.t("model.averageCostSession")}
+                value={formatSessionCost(data().totals.costPerSession)}
+              />
+              <MetricCard
+                label={i18n.t("model.averageTokensSession")}
+                value={formatTokens(data().totals.tokensPerSession)}
+              />
+              <MetricCard
+                label={i18n.t("model.cacheRatio")}
+                value={`${formatPercent(data().totals.cacheRatio)} ${i18n.t("model.inputTokens")}`}
+              />
+            </div>
+          </>
         )}
       </Show>
     </section>
@@ -828,12 +1125,12 @@ function ModelPeersSection(props: { data: StatsModelData | null }) {
   )
 }
 
-function MetricCard(props: { label: string; value: string; detail: string; state?: "positive" | "negative" }) {
+function MetricCard(props: { label: string; value: string; detail?: string; state?: "positive" | "negative" }) {
   return (
     <article data-component="model-metric" data-state={props.state}>
       <span>{props.label}</span>
       <strong>{props.value}</strong>
-      <p>{props.detail}</p>
+      <Show when={props.detail}>{(detail) => <p>{detail()}</p>}</Show>
     </article>
   )
 }
@@ -1014,6 +1311,101 @@ function formatMomentumDateLabel(date: string) {
   return `${shortMonths[parsed.getUTCMonth()]} ${parsed.getUTCDate()}`
 }
 
+function modelUsageStripHeight(value: number, max: number) {
+  if (value <= 0 || max <= 0) return "0px"
+  return `max(2px, ${(value / max) * 100}%)`
+}
+
+function modelUsageLineY(value: number, max: number) {
+  if (value <= 0 || max <= 0) return 100
+  return Math.max(0, 100 - (value / max) * 100)
+}
+
+function modelUsagePointX(index: number, count: number) {
+  if (count <= 1) return 50
+  return ((index + 0.5) / count) * 100
+}
+
+function modelUsageColumnBounds(index: number, count: number) {
+  if (count <= 0) return { x: 0, width: 100 }
+  return { x: (index / count) * 100, width: 100 / count }
+}
+
+function modelUsageColumnInnerBounds(index: number, count: number) {
+  const bounds = modelUsageColumnBounds(index, count)
+  const inset = Math.min(bounds.width * 0.1, 0.24)
+  return { x: bounds.x + inset, width: Math.max(0.001, bounds.width - inset * 2) }
+}
+
+type ModelUsageLinePoint = { x: number; y: number }
+
+function modelUsageLinePath(points: ModelUsageLinePoint[]) {
+  if (points.length === 0) return ""
+  if (points.length === 1) return `M ${formatUsagePathNumber(points[0].x)} ${formatUsagePathNumber(points[0].y)}`
+
+  return points.slice(0, -1).reduce(
+    (path, point, index) => {
+      const next = points[index + 1]
+      const previous = points[index - 1] ?? point
+      const afterNext = points[index + 2] ?? next
+      const controlA = {
+        x: point.x + (next.x - previous.x) / 6,
+        y: clampUsagePercent(point.y + (next.y - previous.y) / 6),
+      }
+      const controlB = {
+        x: next.x - (afterNext.x - point.x) / 6,
+        y: clampUsagePercent(next.y - (afterNext.y - point.y) / 6),
+      }
+      return `${path} C ${formatUsagePathNumber(controlA.x)} ${formatUsagePathNumber(controlA.y)}, ${formatUsagePathNumber(controlB.x)} ${formatUsagePathNumber(controlB.y)}, ${formatUsagePathNumber(next.x)} ${formatUsagePathNumber(next.y)}`
+    },
+    `M ${formatUsagePathNumber(points[0].x)} ${formatUsagePathNumber(points[0].y)}`,
+  )
+}
+
+function modelUsageAreaPath(points: ModelUsageLinePoint[], bottom: number) {
+  const path = modelUsageLinePath(points)
+  if (!path || points.length === 0) return ""
+  const first = points[0]
+  const last = points[points.length - 1]
+  return `${path} L ${formatUsagePathNumber(last.x)} ${formatUsagePathNumber(bottom)} L ${formatUsagePathNumber(first.x)} ${formatUsagePathNumber(bottom)} Z`
+}
+
+function formatUsagePathNumber(value: number) {
+  return Number(value.toFixed(3))
+}
+
+function clampUsagePercent(value: number) {
+  return Math.max(0, Math.min(100, value))
+}
+
+function modelUsageMonthTicks(points: ModelUsagePoint[], updatedAt: string | null) {
+  const seen = new Set<string>()
+  return points.flatMap((point, index) => {
+    const parsed = parseMomentumDate(point.date, updatedAt)
+    const label = shortMonths[parsed.getUTCMonth()]
+    if (!label || seen.has(label)) return []
+    seen.add(label)
+    return [
+      {
+        label,
+        left: modelUsagePointX(index, points.length),
+        align: index === 0 ? "start" : index >= points.length - 2 ? "end" : "center",
+      },
+    ]
+  })
+}
+
+function formatModelUsageTooltipDate(value: string, updatedAt: string | null) {
+  const date = parseMomentumDate(value, updatedAt)
+  if (date.getUTCFullYear() === 1970) return value
+  return new Intl.DateTimeFormat("en", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    timeZone: "UTC",
+  }).format(date)
+}
+
 function formatRankLabel(rank: number | null) {
   if (rank === null) return "--"
   return `#${String(rank).padStart(2, "0")}`
@@ -1121,8 +1513,9 @@ function formatMoney(value: number) {
   return `$${value.toFixed(value >= 10 ? 0 : 2)}`
 }
 
-function formatCatalogPrice(value: ModelCatalogCost) {
-  return `${formatModelPrice(value.input)} / ${formatModelPrice(value.output)}`
+function formatCatalogUnitPrice(value: number | undefined) {
+  if (value === undefined) return "-"
+  return `${formatModelPrice(value)} / 1M`
 }
 
 function formatModelPrice(value: number) {

packages/stats/app/src/routes/index.css

@@ -3913,6 +3913,50 @@
   color: #b82d35;
 }
 
+[data-page="stats"] [data-slot="model-efficiency-pattern"] {
+  width: 100%;
+  height: 16px;
+  margin-bottom: 40px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--stats-text) 10%, transparent);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
+  mask-position: center top;
+  mask-repeat: repeat;
+  mask-size: 6px 6px;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
+  -webkit-mask-position: center top;
+  -webkit-mask-repeat: repeat;
+  -webkit-mask-size: 6px 6px;
+}
+
+[data-page="stats"] [data-component="model-efficiency-grid"] {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  box-sizing: border-box;
+  gap: 0;
+  height: 120px;
+  min-height: 120px;
+  padding: 16px;
+  background: var(--stats-layer);
+}
+
+[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] span {
+  line-height: 14px;
+}
+
+[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] strong {
+  margin-top: 32px;
+  font-size: 28px;
+  line-height: 42px;
+}
+
 [data-page="stats"] [data-section="model-panel"][data-variant="lab-models"] {
   overflow: hidden;
 }
@@ -4871,6 +4915,248 @@
   background: var(--lab-usage-line);
 }
 
+[data-page="stats"] [data-component="model-usage-chart"][data-variant="model-trend"] {
+  --model-trend-gap: 4px;
+  --model-trend-column-gutter: calc(var(--model-trend-gap) / 2);
+  --model-trend-bar-height: 76px;
+  --model-trend-line-bottom: 124px;
+  --model-trend-bar: #dbdbdb;
+  --model-trend-line: #808080;
+  --model-trend-active: #3b5cf6;
+  --model-trend-band: #f2f2f2;
+  grid-template-rows: minmax(0, 450px) 14px;
+  gap: 40px;
+  height: 504px;
+}
+
+[data-page="stats"] [data-slot="model-trend-plot"] {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+}
+
+[data-page="stats"] [data-slot="model-trend-plot"]::after {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: linear-gradient(to bottom, transparent 42%, color-mix(in srgb, var(--stats-text) 3%, transparent));
+  content: "";
+  pointer-events: none;
+}
+
+[data-page="stats"] [data-slot="model-trend-line"] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: calc(100% - var(--model-trend-line-bottom));
+  overflow: visible;
+  pointer-events: none;
+}
+
+[data-page="stats"] [data-slot="model-trend-line"][data-layer="base"] {
+  z-index: 2;
+}
+
+[data-page="stats"] [data-slot="model-trend-line"][data-layer="active"] {
+  z-index: 4;
+}
+
+[data-page="stats"] [data-slot="model-trend-area-layer"] {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+[data-page="stats"] [data-slot="model-trend-area-layer"] [data-slot="model-trend-area"] {
+  stroke: none;
+}
+
+[data-page="stats"] [data-slot="model-trend-line"] path {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+}
+
+[data-page="stats"] [data-slot="model-trend-line-base"] {
+  stroke: var(--model-trend-line);
+}
+
+[data-page="stats"] [data-slot="model-trend-line-base"][data-tone="active"] {
+  stroke: var(--model-trend-active);
+}
+
+[data-page="stats"] [data-slot="model-trend-line-active"] {
+  stroke: var(--model-trend-active);
+}
+
+[data-page="stats"] [data-slot="model-trend-end-marker"] {
+  position: absolute;
+  top: var(--model-trend-end-top);
+  left: var(--model-trend-end-x);
+  z-index: 3;
+  width: 6px;
+  height: 6px;
+  background: var(--model-trend-bar);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+[data-page="stats"] [data-slot="model-trend-end-marker"][data-tone="active"] {
+  background: var(--model-trend-active);
+}
+
+[data-page="stats"] [data-slot="model-trend-bars"] {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  gap: 0;
+  min-width: 0;
+}
+
+[data-page="stats"] [data-slot="model-trend-column"] {
+  position: relative;
+  box-sizing: border-box;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 100%;
+  outline: none;
+  cursor: pointer;
+}
+
+[data-page="stats"] [data-slot="model-trend-column"]::before {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: transparent;
+  content: "";
+  pointer-events: none;
+  transition: background 120ms ease;
+}
+
+[data-page="stats"] [data-slot="model-trend-column"][data-active="true"]::before,
+[data-page="stats"] [data-slot="model-trend-column"]:focus-visible::before {
+  background: var(--model-trend-band);
+  box-shadow:
+    inset var(--model-trend-column-gutter) 0 0 var(--stats-bg),
+    inset calc(var(--model-trend-column-gutter) * -1) 0 0 var(--stats-bg);
+}
+
+[data-page="stats"] [data-slot="model-trend-token-band"] {
+  position: absolute;
+  right: var(--model-trend-column-gutter);
+  bottom: 0;
+  left: var(--model-trend-column-gutter);
+  z-index: 2;
+  height: var(--model-trend-bar-height);
+}
+
+[data-page="stats"] [data-slot="model-trend-token-bar"] {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--model-trend-token-height);
+  background: var(--model-trend-bar);
+  transition:
+    background 120ms ease,
+    opacity 120ms ease;
+}
+
+[data-page="stats"]
+  [data-component="model-usage-chart"][data-highlight-bars="true"]
+  [data-slot="model-trend-column"][data-active="true"]
+  [data-slot="model-trend-token-bar"] {
+  background: var(--model-trend-active);
+}
+
+[data-page="stats"]
+  [data-component="model-usage-chart"][data-highlight-bars="true"]
+  [data-slot="model-trend-column"][data-muted="true"]
+  [data-slot="model-trend-token-bar"] {
+  opacity: 0.64;
+}
+
+[data-page="stats"] [data-slot="model-trend-months"] {
+  position: relative;
+  height: 14px;
+  color: var(--stats-muted);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 14px;
+}
+
+[data-page="stats"] [data-slot="model-trend-months"] span {
+  position: absolute;
+  top: 0;
+  left: var(--model-trend-month-left);
+  transform: translateX(-50%);
+}
+
+[data-page="stats"] [data-slot="model-trend-months"] span[data-align="start"] {
+  transform: none;
+}
+
+[data-page="stats"] [data-slot="model-trend-months"] span[data-align="end"] {
+  transform: translateX(-100%);
+}
+
+[data-page="stats"] [data-component="model-usage-chart"][data-variant="model-trend"] [data-component="chart-tooltip"] {
+  z-index: 6;
+  top: clamp(12px, calc(var(--model-trend-tooltip-y) * 1% - 46px), calc(100% - 108px));
+  width: 192px;
+  min-width: 192px;
+  background: var(--stats-bg);
+}
+
+[data-page="stats"]
+  [data-component="model-usage-chart"][data-variant="model-trend"]
+  [data-component="chart-tooltip"][data-placement="right"] {
+  right: auto;
+  left: calc(var(--model-trend-tooltip-right) + 8px);
+}
+
+[data-page="stats"]
+  [data-component="model-usage-chart"][data-variant="model-trend"]
+  [data-component="chart-tooltip"][data-placement="left"] {
+  right: calc(100% - var(--model-trend-tooltip-left) + 8px);
+  left: auto;
+}
+
+[data-page="stats"]
+  [data-component="model-usage-chart"][data-variant="model-trend"]
+  [data-component="chart-tooltip"]
+  p {
+  height: 16px;
+  margin: 8px 0;
+}
+
+[data-page="stats"]
+  [data-component="model-usage-chart"][data-variant="model-trend"]
+  [data-component="chart-tooltip"]
+  i[data-kind="tokens"] {
+  background: var(--model-trend-active);
+}
+
+[data-page="stats"]
+  [data-component="model-usage-chart"][data-variant="model-trend"]
+  [data-component="chart-tooltip"]
+  i[data-kind="users"] {
+  background: var(--model-trend-active);
+}
+
 [data-page="stats"] [data-component="model-peer-list"] {
   display: grid;
   gap: 8px;
@@ -4966,6 +5252,15 @@
   --lab-usage-band: #242424;
 }
 
+[data-page="stats"][data-theme="dark"] [data-component="model-usage-chart"][data-variant="model-trend"],
+:root[data-stats-theme="dark"]
+  [data-page="stats"]:not([data-theme="light"])
+  [data-component="model-usage-chart"][data-variant="model-trend"] {
+  --model-trend-bar: #3a3a3a;
+  --model-trend-line: #a3a3a3;
+  --model-trend-band: #242424;
+}
+
 [data-page="stats"][data-theme="dark"] [data-component="chart-tooltip"],
 :root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) [data-component="chart-tooltip"] {
   background: #242424f2;
@@ -5131,6 +5426,14 @@
     --lab-usage-band: #242424;
   }
 
+  :root:not([data-stats-theme="light"])
+    [data-page="stats"]:not([data-theme="light"])
+    [data-component="model-usage-chart"][data-variant="model-trend"] {
+    --model-trend-bar: #3a3a3a;
+    --model-trend-line: #a3a3a3;
+    --model-trend-band: #242424;
+  }
+
   :root:not([data-stats-theme="light"]) [data-page="stats"]:not([data-theme="light"]) [data-component="chart-tooltip"] {
     background: #242424f2;
   }
@@ -5229,15 +5532,27 @@
 [data-page="stats"][data-theme="dark"]
   [data-component="model-usage-chart"][data-variant="lab-usage"]
   [data-component="chart-tooltip"],
+[data-page="stats"][data-theme="dark"]
+  [data-component="model-usage-chart"][data-variant="model-trend"]
+  [data-component="chart-tooltip"],
 :root[data-stats-theme="dark"]
   [data-page="stats"]:not([data-theme="light"])
   [data-component="model-usage-chart"][data-variant="lab-usage"]
   [data-component="chart-tooltip"],
+:root[data-stats-theme="dark"]
+  [data-page="stats"]:not([data-theme="light"])
+  [data-component="model-usage-chart"][data-variant="model-trend"]
+  [data-component="chart-tooltip"],
 :root:not([data-stats-theme="light"])
   [data-page="stats"]:not([data-theme="light"])
   [data-component="model-usage-chart"][data-variant="lab-usage"]
   [data-component="chart-tooltip"],
-[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-component="chart-tooltip"] {
+:root:not([data-stats-theme="light"])
+  [data-page="stats"]:not([data-theme="light"])
+  [data-component="model-usage-chart"][data-variant="model-trend"]
+  [data-component="chart-tooltip"],
+[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-component="chart-tooltip"],
+[data-page="stats"] [data-component="model-usage-chart"][data-variant="model-trend"] [data-component="chart-tooltip"] {
   background: var(--stats-bg);
 }
 
@@ -5428,6 +5743,7 @@
 
   [data-page="stats"] [data-component="model-metric-grid"],
   [data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"],
+  [data-page="stats"] [data-component="model-efficiency-grid"],
   [data-page="stats"] [data-component="lab-model-grid"] {
     grid-template-columns: 1fr 1fr;
   }
@@ -5514,6 +5830,13 @@
     margin-top: 16px;
   }
 
+  [data-page="stats"]
+    [data-component="model-usage-chart"][data-variant="model-trend"]
+    [data-component="chart-tooltip"] {
+    position: absolute;
+    margin-top: 0;
+  }
+
   [data-page="stats"] [data-component="footer"] {
     padding: 88px 24px 24px;
   }
@@ -5847,6 +6170,7 @@
 
   [data-page="stats"] [data-component="model-metric-grid"],
   [data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"],
+  [data-page="stats"] [data-component="model-efficiency-grid"],
   [data-page="stats"] [data-component="lab-model-grid"] {
     grid-template-columns: 1fr;
   }
@@ -5855,6 +6179,15 @@
     min-height: 112px;
   }
 
+  [data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] {
+    height: 112px;
+    min-height: 112px;
+  }
+
+  [data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] strong {
+    margin-top: 24px;
+  }
+
   [data-page="stats"] [data-component="model-usage-chart"] {
     --model-usage-mobile-bar-width: 16px;
     --model-usage-mobile-edge-space: 48px;
@@ -5935,6 +6268,42 @@
     min-width: 0;
   }
 
+  [data-page="stats"] [data-component="model-usage-chart"][data-variant="model-trend"] {
+    --model-usage-mobile-bar-width: 20px;
+    --model-usage-mobile-edge-space: 48px;
+    --model-usage-mobile-track-width: calc(
+      var(--model-usage-count) * var(--model-usage-mobile-bar-width) + var(--model-usage-mobile-edge-space)
+    );
+    --model-trend-bar-height: 64px;
+    --model-trend-line-bottom: 104px;
+    grid-template-rows: minmax(0, 360px) 14px;
+    gap: 24px;
+    height: 398px;
+  }
+
+  [data-page="stats"] [data-component="model-usage-chart"][data-variant="model-trend"] [data-slot="model-trend-plot"],
+  [data-page="stats"]
+    [data-component="model-usage-chart"][data-variant="model-trend"]
+    [data-slot="model-trend-months"] {
+    direction: ltr;
+    width: var(--model-usage-mobile-track-width);
+    min-width: var(--model-usage-mobile-track-width);
+  }
+
+  [data-page="stats"]
+    [data-component="model-usage-chart"][data-variant="model-trend"]
+    [data-slot="model-trend-column"] {
+    flex: 0 0 var(--model-usage-mobile-bar-width);
+  }
+
+  [data-page="stats"]
+    [data-component="model-usage-chart"][data-variant="model-trend"]
+    [data-component="chart-tooltip"] {
+    top: auto;
+    width: auto;
+    min-width: 0;
+  }
+
   [data-page="stats"] [data-component="model-peer-list"] a {
     grid-template-columns: 30px minmax(0, 1fr) minmax(64px, auto);
   }

packages/ui/src/theme/context.tsx

@@ -173,7 +173,10 @@ function cacheThemeVariants(theme: DesktopTheme, themeId: string) {
 
 export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
   name: "Theme",
-  init: (props: { defaultTheme?: string; onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark") => void }) => {
+  init: (props: {
+    defaultTheme?: string
+    onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark", scheme: ColorScheme) => void
+  }) => {
     const themeId = normalize(read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme) ?? "oc-2"
     const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
     const mode = colorScheme === "system" ? getSystemMode() : colorScheme
@@ -212,9 +215,9 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       return task
     }
 
-    const applyTheme = (theme: DesktopTheme, themeId: string, mode: "light" | "dark") => {
+    const applyTheme = (theme: DesktopTheme, themeId: string, mode: "light" | "dark", scheme: ColorScheme) => {
       applyThemeCss(theme, themeId, mode)
-      props.onThemeApplied?.(theme, mode)
+      props.onThemeApplied?.(theme, mode, scheme)
     }
 
     const ids = () => {
@@ -278,7 +281,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     createEffect(() => {
       const theme = store.themes[store.themeId]
       if (!theme) return
-      applyTheme(theme, store.themeId, store.mode)
+      applyTheme(theme, store.themeId, store.mode, store.colorScheme)
     })
 
     const setTheme = (id: string) => {
@@ -333,7 +336,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
               ? getSystemMode()
               : store.previewScheme
             : store.mode
-          applyTheme(theme, next, mode)
+          applyTheme(theme, next, mode, store.previewScheme ?? store.colorScheme)
         })
       },
       previewColorScheme: (scheme: ColorScheme) => {
@@ -344,7 +347,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
           if (!theme) return
           if ((store.previewThemeId ?? store.themeId) !== id) return
           if (store.previewScheme !== scheme) return
-          applyTheme(theme, id, mode)
+          applyTheme(theme, id, mode, scheme)
         })
       },
       commitPreview: () => {
@@ -362,7 +365,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
         setStore("previewScheme", null)
         void load(store.themeId).then((theme) => {
           if (!theme) return
-          applyTheme(theme, store.themeId, store.mode)
+          applyTheme(theme, store.themeId, store.mode, store.colorScheme)
         })
       },
     }