feat(release): add highlights template to draft releases

fix(enterprise): add message navigation to share page desktop view (#10071 )
Co-authored-by: Claude <noreply@anthropic.com>
2026-01-26 17:42:28 -05:00 · 2026-01-26 12:32:16 -05:00 · 2026-01-26 11:26:17 -06:00 · 2026-01-26 11:07:52 -06:00 · 2026-01-26 11:07:52 -06:00 · 2026-01-26 11:07:52 -06:00
31 changed files with 1672 additions and 958 deletions
@@ -296,8 +296,8 @@
        "@opencode-ai/sdk": "workspace:*",
        "@opencode-ai/util": "workspace:*",
        "@openrouter/ai-sdk-provider": "1.5.2",
-        "@opentui/core": "0.1.74",
-        "@opentui/solid": "0.1.74",
+        "@opentui/core": "0.1.75",
+        "@opentui/solid": "0.1.75",
        "@parcel/watcher": "2.5.1",
        "@pierre/diffs": "catalog:",
        "@solid-primitives/event-bus": "1.1.2",
@@ -1227,21 +1227,21 @@

    "@opentelemetry/api": ["@opentelemetry/api@1.9.0", "", {}, "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="],

-    "@opentui/core": ["@opentui/core@0.1.74", "", { "dependencies": { "bun-ffi-structs": "0.1.2", "diff": "8.0.2", "jimp": "1.6.0", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "0.1.74", "@opentui/core-darwin-x64": "0.1.74", "@opentui/core-linux-arm64": "0.1.74", "@opentui/core-linux-x64": "0.1.74", "@opentui/core-win32-arm64": "0.1.74", "@opentui/core-win32-x64": "0.1.74", "bun-webgpu": "0.1.4", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-g4W16ymv12JdgZ+9B4t7mpIICvzWy2+eHERfmDf80ALduOQCUedKQdULcBFhVCYUXIkDRtIy6CID5thMAah3FA=="],
+    "@opentui/core": ["@opentui/core@0.1.75", "", { "dependencies": { "bun-ffi-structs": "0.1.2", "diff": "8.0.2", "jimp": "1.6.0", "marked": "17.0.1", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "0.1.75", "@opentui/core-darwin-x64": "0.1.75", "@opentui/core-linux-arm64": "0.1.75", "@opentui/core-linux-x64": "0.1.75", "@opentui/core-win32-arm64": "0.1.75", "@opentui/core-win32-x64": "0.1.75", "bun-webgpu": "0.1.4", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-8ARRZxSG+BXkJmEVtM2DQ4se7DAF1ZCKD07d+AklgTr2mxCzmdxxPbOwRzboSQ6FM7qGuTVPVbV4O2W9DpUmoA=="],

-    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.1.74", "", { "os": "darwin", "cpu": "arm64" }, "sha512-rfmlDLtm/u17CnuhJgCxPeYMvOST+A2MOdVOk46IurtHO849bdYqK6iudKNlFRs1FOrymgSKF9GlWBHAOKeRjg=="],
+    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.1.75", "", { "os": "darwin", "cpu": "arm64" }, "sha512-gGaGZjkFpqcXJk6321JzhRl66pM2VxBlI470L8W4DQUW4S6iDT1R9L7awSzGB4Cn9toUl7DTV8BemaXZYXV4SA=="],

-    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.1.74", "", { "os": "darwin", "cpu": "x64" }, "sha512-WAD8orsDV0ZdW/5GwjOOB4FY96772xbkz+rcV7WRzEFUVaqoBaC04IuqYzS9d5s+cjkbT5Cpj47hrVYkkVQKng=="],
+    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.1.75", "", { "os": "darwin", "cpu": "x64" }, "sha512-tPlvqQI0whZ76amHydpJs5kN+QeWAIcFbI8RAtlAo9baj2EbxTDC+JGwgb9Fnt0/YQx831humbtaNDhV2Jt1bw=="],

-    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.1.74", "", { "os": "linux", "cpu": "arm64" }, "sha512-lgmHzrzLy4e+rgBS+lhtsMLLgIMLbtLNMm6EzVPyYVDlLDGjM7+ulXMem7AtpaRrWrUUl4REiG9BoQUsCFDwYA=="],
+    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.1.75", "", { "os": "linux", "cpu": "arm64" }, "sha512-nVxIQ4Hqf84uBergDpWiVzU6pzpjy6tqBHRQpySxZ2flkJ/U6/aMEizVrQ1jcgIdxZtvqWDETZhzxhG0yDx+cw=="],

-    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.1.74", "", { "os": "linux", "cpu": "x64" }, "sha512-8Mn2WbdBQ29xCThuPZezjDhd1N3+fXwKkGvCBOdTI0le6h2A/vCNbfUVjwfr/EGZSRXxCG+Yapol34BAULGpOA=="],
+    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.1.75", "", { "os": "linux", "cpu": "x64" }, "sha512-1CnApef4kxA+ORyLfbuCLgZfEjp4wr3HjFnt7FAfOb73kIZH82cb7JYixeqRyy9eOcKfKqxLmBYy3o8IDkc4Rg=="],

-    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.1.74", "", { "os": "win32", "cpu": "arm64" }, "sha512-dvYUXz03avnI6ZluyLp00HPmR0UT/IE/6QS97XBsgJlUTtpnbKkBtB5jD1NHwWkElaRj1Qv2QP36ngFoJqbl9g=="],
+    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.1.75", "", { "os": "win32", "cpu": "arm64" }, "sha512-j0UB95nmkYGNzmOrs6GqaddO1S90R0YC6IhbKnbKBdjchFPNVLz9JpexAs6MBDXPZwdKAywMxtwG2h3aTJtxng=="],

-    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.1.74", "", { "os": "win32", "cpu": "x64" }, "sha512-3wfWXaAKOIlDQz6ZZIESf2M+YGZ7uFHijjTEM8w/STRlLw8Y6+QyGYi1myHSM4d6RSO+/s2EMDxvjDf899W9vQ=="],
+    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.1.75", "", { "os": "win32", "cpu": "x64" }, "sha512-ESpVZVGewe3JkB2TwrG3VRbkxT909iPdtvgNT7xTCIYH2VB4jqZomJfvERPTE0tvqAZJm19mHECzJFI8asSJgQ=="],

-    "@opentui/solid": ["@opentui/solid@0.1.74", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.74", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.9", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.9" } }, "sha512-Vz82cI8T9YeJjGsVg4ULp6ral4N+xyt1j9A6Tbu3aaQgEKiB74LW03EXREehfjPr1irOFxtKfWPbx5NKH0Upag=="],
+    "@opentui/solid": ["@opentui/solid@0.1.75", "", { "dependencies": { "@babel/core": "7.28.0", "@babel/preset-typescript": "7.27.1", "@opentui/core": "0.1.75", "babel-plugin-module-resolver": "5.0.2", "babel-preset-solid": "1.9.9", "s-js": "^0.4.9" }, "peerDependencies": { "solid-js": "1.9.9" } }, "sha512-WjKsZIfrm29znfRlcD9w3uUn/+uvoy2MmeoDwTvg1YOa0OjCTCmjZ43L9imp0m9S4HmVU8ma6o2bR4COzcyDdg=="],

    "@oslojs/asn1": ["@oslojs/asn1@1.0.0", "", { "dependencies": { "@oslojs/binary": "1.0.0" } }, "sha512-zw/wn0sj0j0QKbIXfIlnEcTviaCzYOY3V5rAyjR6YtOByFtJiT574+8p9Wlach0lZH9fddD4yb9laEAIl4vXQA=="],

@@ -1,8 +1,8 @@
 {
  "nodeModules": {
-    "x86_64-linux": "sha256-olTZ+tKugAY3LxizsJMlbK3TW78HZUoM03PigvQLP4A=",
-    "aarch64-linux": "sha256-xdKDeqMEnYM2+vGySfb8pbcYyo/xMmgxG/ZhPCKaZEg=",
-    "aarch64-darwin": "sha256-fihCTrHIiUG+py4vuqdr+YshqSKm2/B5onY50b97sPM=",
-    "x86_64-darwin": "sha256-inlQQPNAOdkmKK6HQAMI2bG/ZFlfwmUQu9a6vm6Q0jQ="
+    "x86_64-linux": "sha256-AkI3guNjnE+bLZQVfzm0z14UENOECv2QBqMo5Lzkvt8=",
+    "aarch64-linux": "sha256-dBfdyVTqW+fBZKCxC9Ld+1m3cP+nIbS6UDo0tUfPOSk=",
+    "aarch64-darwin": "sha256-tOw31AMnHkW2cEDi+iqT3P93lU3SiMve26TEIqPz97k=",
+    "x86_64-darwin": "sha256-wL/DmdZmxCmh+r4dsS1XGXuj8VPwR4pUqy5VIA76jl0="
  }
 }
@@ -3,7 +3,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { Icon } from "@opencode-ai/ui/icon"
-import { createMemo, createSignal, For, Show } from "solid-js"
+import { createMemo, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useGlobalSync } from "@/context/global-sync"
@@ -29,35 +29,34 @@ export function DialogEditProject(props: { project: LocalProject }) {
    iconUrl: props.project.icon?.override || "",
    startup: props.project.commands?.start ?? "",
    saving: false,
+    dragOver: false,
+    iconHover: false,
  })

-  const [dragOver, setDragOver] = createSignal(false)
-  const [iconHover, setIconHover] = createSignal(false)
-
  function handleFileSelect(file: File) {
    if (!file.type.startsWith("image/")) return
    const reader = new FileReader()
    reader.onload = (e) => {
      setStore("iconUrl", e.target?.result as string)
-      setIconHover(false)
+      setStore("iconHover", false)
    }
    reader.readAsDataURL(file)
  }

  function handleDrop(e: DragEvent) {
    e.preventDefault()
-    setDragOver(false)
+    setStore("dragOver", false)
    const file = e.dataTransfer?.files[0]
    if (file) handleFileSelect(file)
  }

  function handleDragOver(e: DragEvent) {
    e.preventDefault()
-    setDragOver(true)
+    setStore("dragOver", true)
  }

  function handleDragLeave() {
-    setDragOver(false)
+    setStore("dragOver", false)
  }

  function handleInputChange(e: Event) {
@@ -116,19 +115,23 @@ export function DialogEditProject(props: { project: LocalProject }) {
          <div class="flex flex-col gap-2">
            <label class="text-12-medium text-text-weak">{language.t("dialog.project.edit.icon")}</label>
            <div class="flex gap-3 items-start">
-              <div class="relative" onMouseEnter={() => setIconHover(true)} onMouseLeave={() => setIconHover(false)}>
+              <div
+                class="relative"
+                onMouseEnter={() => setStore("iconHover", true)}
+                onMouseLeave={() => setStore("iconHover", false)}
+              >
                <div
                  class="relative size-16 rounded-md transition-colors cursor-pointer"
                  classList={{
-                    "border-text-interactive-base bg-surface-info-base/20": dragOver(),
-                    "border-border-base hover:border-border-strong": !dragOver(),
+                    "border-text-interactive-base bg-surface-info-base/20": store.dragOver,
+                    "border-border-base hover:border-border-strong": !store.dragOver,
                    "overflow-hidden": !!store.iconUrl,
                  }}
                  onDrop={handleDrop}
                  onDragOver={handleDragOver}
                  onDragLeave={handleDragLeave}
                  onClick={() => {
-                    if (store.iconUrl && iconHover()) {
+                    if (store.iconUrl && store.iconHover) {
                      clearIcon()
                    } else {
                      document.getElementById("icon-upload")?.click()
@@ -166,7 +169,7 @@ export function DialogEditProject(props: { project: LocalProject }) {
                    "border-radius": "6px",
                    "z-index": 10,
                    "pointer-events": "none",
-                    opacity: iconHover() && !store.iconUrl ? 1 : 0,
+                    opacity: store.iconHover && !store.iconUrl ? 1 : 0,
                    display: "flex",
                    "align-items": "center",
                    "justify-content": "center",
@@ -185,7 +188,7 @@ export function DialogEditProject(props: { project: LocalProject }) {
                    "border-radius": "6px",
                    "z-index": 10,
                    "pointer-events": "none",
-                    opacity: iconHover() && store.iconUrl ? 1 : 0,
+                    opacity: store.iconHover && store.iconUrl ? 1 : 0,
                    display: "flex",
                    "align-items": "center",
                    "justify-content": "center",
@@ -1,111 +1,207 @@
-import { useLocal, type LocalFile } from "@/context/local"
+import { useFile } from "@/context/file"
 import { Collapsible } from "@opencode-ai/ui/collapsible"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { For, Match, Switch, type ComponentProps, type ParentProps } from "solid-js"
+import {
+  createEffect,
+  createMemo,
+  For,
+  Match,
+  splitProps,
+  Switch,
+  untrack,
+  type ComponentProps,
+  type ParentProps,
+} from "solid-js"
 import { Dynamic } from "solid-js/web"
+import type { FileNode } from "@opencode-ai/sdk/v2"

 export default function FileTree(props: {
  path: string
  class?: string
  nodeClass?: string
  level?: number
-  onFileClick?: (file: LocalFile) => void
+  allowed?: readonly string[]
+  modified?: readonly string[]
+  draggable?: boolean
+  tooltip?: boolean
+  onFileClick?: (file: FileNode) => void
 }) {
-  const local = useLocal()
+  const file = useFile()
  const level = props.level ?? 0
+  const draggable = () => props.draggable ?? true
+  const tooltip = () => props.tooltip ?? true

-  const Node = (p: ParentProps & ComponentProps<"div"> & { node: LocalFile; as?: "div" | "button" }) => (
-    <Dynamic
-      component={p.as ?? "div"}
-      classList={{
-        "p-0.5 w-full flex items-center gap-x-2 hover:bg-background-element": true,
-        // "bg-background-element": local.file.active()?.path === p.node.path,
-        [props.nodeClass ?? ""]: !!props.nodeClass,
-      }}
-      style={`padding-left: ${level * 10}px`}
-      draggable={true}
-      onDragStart={(e: any) => {
-        const evt = e as globalThis.DragEvent
-        evt.dataTransfer!.effectAllowed = "copy"
-        evt.dataTransfer!.setData("text/plain", `file:${p.node.path}`)
+  const filter = createMemo(() => {
+    const allowed = props.allowed
+    if (!allowed) return

-        // Create custom drag image without margins
-        const dragImage = document.createElement("div")
-        dragImage.className =
-          "flex items-center gap-x-2 px-2 py-1 bg-background-element rounded-md border border-border-1"
-        dragImage.style.position = "absolute"
-        dragImage.style.top = "-1000px"
+    const files = new Set(allowed)
+    const dirs = new Set<string>()

-        // Copy only the icon and text content without padding
-        const icon = e.currentTarget.querySelector("svg")
-        const text = e.currentTarget.querySelector("span")
-        if (icon && text) {
-          dragImage.innerHTML = icon.outerHTML + text.outerHTML
-        }
+    for (const item of allowed) {
+      const parts = item.split("/")
+      const parents = parts.slice(0, -1)
+      for (const [idx] of parents.entries()) {
+        const dir = parents.slice(0, idx + 1).join("/")
+        if (dir) dirs.add(dir)
+      }
+    }

-        document.body.appendChild(dragImage)
-        evt.dataTransfer!.setDragImage(dragImage, 0, 12)
-        setTimeout(() => document.body.removeChild(dragImage), 0)
-      }}
-      {...p}
-    >
-      {p.children}
-      <span
+    return { files, dirs }
+  })
+
+  const marks = createMemo(() => {
+    const modified = props.modified
+    if (!modified || modified.length === 0) return
+    return new Set(modified)
+  })
+
+  createEffect(() => {
+    const current = filter()
+    if (!current) return
+    if (level !== 0) return
+
+    for (const dir of current.dirs) {
+      const expanded = untrack(() => file.tree.state(dir)?.expanded) ?? false
+      if (expanded) continue
+      file.tree.expand(dir)
+    }
+  })
+
+  createEffect(() => {
+    void file.tree.list(props.path)
+  })
+
+  const nodes = createMemo(() => {
+    const nodes = file.tree.children(props.path)
+    const current = filter()
+    if (!current) return nodes
+    return nodes.filter((node) => {
+      if (node.type === "file") return current.files.has(node.path)
+      return current.dirs.has(node.path)
+    })
+  })
+
+  const Node = (
+    p: ParentProps &
+      ComponentProps<"div"> &
+      ComponentProps<"button"> & {
+        node: FileNode
+        as?: "div" | "button"
+      },
+  ) => {
+    const [local, rest] = splitProps(p, ["node", "as", "children", "class", "classList"])
+    return (
+      <Dynamic
+        component={local.as ?? "div"}
        classList={{
-          "text-xs whitespace-nowrap truncate": true,
-          "text-text-muted/40": p.node.ignored,
-          "text-text-muted/80": !p.node.ignored,
-          // "!text-text": local.file.active()?.path === p.node.path,
-          // "!text-primary": local.file.changed(p.node.path),
+          "w-full min-w-0 flex items-center justify-start gap-x-2 rounded-md px-2 py-1 text-left hover:bg-surface-raised-base-hover active:bg-surface-base-active transition-colors cursor-pointer": true,
+          ...(local.classList ?? {}),
+          [local.class ?? ""]: !!local.class,
+          [props.nodeClass ?? ""]: !!props.nodeClass,
        }}
+        style={`padding-left: ${8 + level * 12}px`}
+        draggable={draggable()}
+        onDragStart={(e: DragEvent) => {
+          if (!draggable()) return
+          e.dataTransfer?.setData("text/plain", `file:${local.node.path}`)
+          e.dataTransfer?.setData("text/uri-list", `file://${local.node.path}`)
+          if (e.dataTransfer) e.dataTransfer.effectAllowed = "copy"
+
+          const dragImage = document.createElement("div")
+          dragImage.className =
+            "flex items-center gap-x-2 px-2 py-1 bg-surface-raised-base rounded-md border border-border-base text-12-regular text-text-strong"
+          dragImage.style.position = "absolute"
+          dragImage.style.top = "-1000px"
+
+          const icon =
+            (e.currentTarget as HTMLElement).querySelector('[data-component="file-icon"]') ??
+            (e.currentTarget as HTMLElement).querySelector("svg")
+          const text = (e.currentTarget as HTMLElement).querySelector("span")
+          if (icon && text) {
+            dragImage.innerHTML = (icon as SVGElement).outerHTML + (text as HTMLSpanElement).outerHTML
+          }
+
+          document.body.appendChild(dragImage)
+          e.dataTransfer?.setDragImage(dragImage, 0, 12)
+          setTimeout(() => document.body.removeChild(dragImage), 0)
+        }}
+        {...rest}
      >
-        {p.node.name}
-      </span>
-      {/* <Show when={local.file.changed(p.node.path)}> */}
-      {/*   <span class="ml-auto mr-1 w-1.5 h-1.5 rounded-full bg-primary/50 shrink-0" /> */}
-      {/* </Show> */}
-    </Dynamic>
-  )
+        {local.children}
+        <span
+          classList={{
+            "flex-1 min-w-0 text-12-regular whitespace-nowrap truncate": true,
+            "text-text-weaker": local.node.ignored,
+            "text-text-weak": !local.node.ignored,
+          }}
+        >
+          {local.node.name}
+        </span>
+        {local.node.type === "file" && marks()?.has(local.node.path) ? (
+          <div class="shrink-0 size-1.5 rounded-full bg-surface-warning-strong" />
+        ) : null}
+      </Dynamic>
+    )
+  }

  return (
-    <div class={`flex flex-col ${props.class}`}>
-      <For each={local.file.children(props.path)}>
-        {(node) => (
-          <Tooltip forceMount={false} openDelay={2000} value={node.path} placement="right">
+    <div class={`flex flex-col ${props.class ?? ""}`}>
+      <For each={nodes()}>
+        {(node) => {
+          const expanded = () => file.tree.state(node.path)?.expanded ?? false
+          const Wrapper = (p: ParentProps) => {
+            if (!tooltip()) return p.children
+            return (
+              <Tooltip forceMount={false} openDelay={2000} value={node.path} placement="right" class="w-full">
+                {p.children}
+              </Tooltip>
+            )
+          }
+
+          return (
            <Switch>
              <Match when={node.type === "directory"}>
                <Collapsible
                  variant="ghost"
                  class="w-full"
                  forceMount={false}
-                  // open={local.file.node(node.path)?.expanded}
-                  onOpenChange={(open) => (open ? local.file.expand(node.path) : local.file.collapse(node.path))}
+                  open={expanded()}
+                  onOpenChange={(open) => (open ? file.tree.expand(node.path) : file.tree.collapse(node.path))}
                >
                  <Collapsible.Trigger>
-                    <Node node={node}>
-                      <Collapsible.Arrow class="text-text-muted/60 ml-1" />
-                      <FileIcon
-                        node={node}
-                        // expanded={local.file.node(node.path).expanded}
-                        class="text-text-muted/60 -ml-1"
-                      />
-                    </Node>
+                    <Wrapper>
+                      <Node node={node}>
+                        <Collapsible.Arrow class="text-icon-weak ml-1" />
+                        <FileIcon node={node} expanded={expanded()} class="text-icon-weak -ml-1 size-4" />
+                      </Node>
+                    </Wrapper>
                  </Collapsible.Trigger>
                  <Collapsible.Content>
-                    <FileTree path={node.path} level={level + 1} onFileClick={props.onFileClick} />
+                    <FileTree
+                      path={node.path}
+                      level={level + 1}
+                      allowed={props.allowed}
+                      modified={props.modified}
+                      draggable={props.draggable}
+                      tooltip={props.tooltip}
+                      onFileClick={props.onFileClick}
+                    />
                  </Collapsible.Content>
                </Collapsible>
              </Match>
              <Match when={node.type === "file"}>
-                <Node node={node} as="button" onClick={() => props.onFileClick?.(node)}>
-                  <div class="w-4 shrink-0" />
-                  <FileIcon node={node} class="text-primary" />
-                </Node>
+                <Wrapper>
+                  <Node node={node} as="button" type="button" onClick={() => props.onFileClick?.(node)}>
+                    <div class="w-4 shrink-0" />
+                    <FileIcon node={node} class="text-icon-weak size-4" />
+                  </Node>
+                </Wrapper>
              </Match>
            </Switch>
-          </Tooltip>
-        )}
+          )
+        }}
      </For>
    </div>
  )
@@ -131,7 +131,7 @@ export function SessionHeader() {
          <Portal mount={mount()}>
            <button
              type="button"
-              class="hidden md:flex w-[320px] p-1 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-raised-base transition-colors cursor-default hover:bg-surface-raised-base-hover focus:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
+              class="hidden md:flex w-[320px] p-1 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-raised-base transition-colors cursor-default hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
              onClick={() => command.trigger("file.open")}
              aria-label={language.t("session.header.searchFiles")}
            >
@@ -280,6 +280,32 @@ export function SessionHeader() {
                  </Button>
                </TooltipKeybind>
              </div>
+              <div class="hidden md:block shrink-0">
+                <Tooltip value="Toggle file tree" placement="bottom">
+                  <Button
+                    variant="ghost"
+                    class="group/file-tree-toggle size-5 p-0"
+                    onClick={() => {
+                      const opening = !layout.fileTree.opened()
+                      if (opening && !view().reviewPanel.opened()) view().reviewPanel.open()
+                      layout.fileTree.toggle()
+                    }}
+                    aria-label="Toggle file tree"
+                    aria-expanded={layout.fileTree.opened()}
+                  >
+                    <div class="relative flex items-center justify-center size-4">
+                      <Icon
+                        size="small"
+                        name="bullet-list"
+                        classList={{
+                          "text-icon-strong": layout.fileTree.opened(),
+                          "text-icon-weak": !layout.fileTree.opened(),
+                        }}
+                      />
+                    </div>
+                  </Button>
+                </Tooltip>
+              </div>
              <div class="hidden md:block shrink-0">
                <TooltipKeybind title={language.t("command.review.toggle")} keybind={command.keybind("review.toggle")}>
                  <Button
@@ -1,5 +1,6 @@
 import type { JSX } from "solid-js"
-import { createSignal, Show } from "solid-js"
+import { Show } from "solid-js"
+import { createStore } from "solid-js/store"
 import { createSortable } from "@thisbeyond/solid-dnd"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tabs } from "@opencode-ai/ui/tabs"
@@ -12,11 +13,13 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
  const terminal = useTerminal()
  const language = useLanguage()
  const sortable = createSortable(props.terminal.id)
-  const [editing, setEditing] = createSignal(false)
-  const [title, setTitle] = createSignal(props.terminal.title)
-  const [menuOpen, setMenuOpen] = createSignal(false)
-  const [menuPosition, setMenuPosition] = createSignal({ x: 0, y: 0 })
-  const [blurEnabled, setBlurEnabled] = createSignal(false)
+  const [store, setStore] = createStore({
+    editing: false,
+    title: props.terminal.title,
+    menuOpen: false,
+    menuPosition: { x: 0, y: 0 },
+    blurEnabled: false,
+  })

  const isDefaultTitle = () => {
    const number = props.terminal.titleNumber
@@ -47,7 +50,7 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
  }

  const focus = () => {
-    if (editing()) return
+    if (store.editing) return

    if (document.activeElement instanceof HTMLElement) {
      document.activeElement.blur()
@@ -71,26 +74,26 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
      e.preventDefault()
    }

-    setBlurEnabled(false)
-    setTitle(props.terminal.title)
-    setEditing(true)
+    setStore("blurEnabled", false)
+    setStore("title", props.terminal.title)
+    setStore("editing", true)
    setTimeout(() => {
      const input = document.getElementById(`terminal-title-input-${props.terminal.id}`) as HTMLInputElement
      if (!input) return
      input.focus()
      input.select()
-      setTimeout(() => setBlurEnabled(true), 100)
+      setTimeout(() => setStore("blurEnabled", true), 100)
    }, 10)
  }

  const save = () => {
-    if (!blurEnabled()) return
+    if (!store.blurEnabled) return

-    const value = title().trim()
+    const value = store.title.trim()
    if (value && value !== props.terminal.title) {
      terminal.update({ id: props.terminal.id, title: value })
    }
-    setEditing(false)
+    setStore("editing", false)
  }

  const keydown = (e: KeyboardEvent) => {
@@ -101,14 +104,14 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
    }
    if (e.key === "Escape") {
      e.preventDefault()
-      setEditing(false)
+      setStore("editing", false)
    }
  }

  const menu = (e: MouseEvent) => {
    e.preventDefault()
-    setMenuPosition({ x: e.clientX, y: e.clientY })
-    setMenuOpen(true)
+    setStore("menuPosition", { x: e.clientX, y: e.clientY })
+    setStore("menuOpen", true)
  }

  return (
@@ -143,17 +146,17 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
            />
          }
        >
-          <span onDblClick={edit} style={{ visibility: editing() ? "hidden" : "visible" }}>
+          <span onDblClick={edit} style={{ visibility: store.editing ? "hidden" : "visible" }}>
            {label()}
          </span>
        </Tabs.Trigger>
-        <Show when={editing()}>
+        <Show when={store.editing}>
          <div class="absolute inset-0 flex items-center px-3 bg-muted z-10 pointer-events-auto">
            <input
              id={`terminal-title-input-${props.terminal.id}`}
              type="text"
-              value={title()}
-              onInput={(e) => setTitle(e.currentTarget.value)}
+              value={store.title}
+              onInput={(e) => setStore("title", e.currentTarget.value)}
              onBlur={save}
              onKeyDown={keydown}
              onMouseDown={(e) => e.stopPropagation()}
@@ -161,13 +164,13 @@ export function SortableTerminalTab(props: { terminal: LocalPTY; onClose?: () =>
            />
          </div>
        </Show>
-        <DropdownMenu open={menuOpen()} onOpenChange={setMenuOpen}>
+        <DropdownMenu open={store.menuOpen} onOpenChange={(open) => setStore("menuOpen", open)}>
          <DropdownMenu.Portal>
            <DropdownMenu.Content
              style={{
                position: "fixed",
-                left: `${menuPosition().x}px`,
-                top: `${menuPosition().y}px`,
+                left: `${store.menuPosition.x}px`,
+                top: `${store.menuPosition.y}px`,
              }}
            >
              <DropdownMenu.Item onSelect={edit}>
@@ -1,4 +1,5 @@
-import { Component, For, Show, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { Component, For, Show, createMemo, onCleanup, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
@@ -111,24 +112,26 @@ export const SettingsKeybinds: Component = () => {
  const language = useLanguage()
  const settings = useSettings()

-  const [active, setActive] = createSignal<string | null>(null)
-  const [filter, setFilter] = createSignal("")
+  const [store, setStore] = createStore({
+    active: null as string | null,
+    filter: "",
+  })

  const stop = () => {
-    if (!active()) return
-    setActive(null)
+    if (!store.active) return
+    setStore("active", null)
    command.keybinds(true)
  }

  const start = (id: string) => {
-    if (active() === id) {
+    if (store.active === id) {
      stop()
      return
    }

-    if (active()) stop()
+    if (store.active) stop()

-    setActive(id)
+    setStore("active", id)
    command.keybinds(false)
  }

@@ -203,7 +206,7 @@ export const SettingsKeybinds: Component = () => {
  })

  const filtered = createMemo(() => {
-    const query = filter().toLowerCase().trim()
+    const query = store.filter.toLowerCase().trim()
    if (!query) return grouped()

    const map = list()
@@ -285,7 +288,7 @@ export const SettingsKeybinds: Component = () => {

  onMount(() => {
    const handle = (event: KeyboardEvent) => {
-      const id = active()
+      const id = store.active
      if (!id) return

      event.preventDefault()
@@ -345,7 +348,7 @@ export const SettingsKeybinds: Component = () => {
  })

  onCleanup(() => {
-    if (active()) command.keybinds(true)
+    if (store.active) command.keybinds(true)
  })

  return (
@@ -370,8 +373,8 @@ export const SettingsKeybinds: Component = () => {
            <TextField
              variant="ghost"
              type="text"
-              value={filter()}
-              onChange={setFilter}
+              value={store.filter}
+              onChange={(v) => setStore("filter", v)}
              placeholder={language.t("settings.shortcuts.search.placeholder")}
              spellcheck={false}
              autocorrect="off"
@@ -379,8 +382,8 @@ export const SettingsKeybinds: Component = () => {
              autocapitalize="off"
              class="flex-1"
            />
-            <Show when={filter()}>
-              <IconButton icon="circle-x" variant="ghost" onClick={() => setFilter("")} />
+            <Show when={store.filter}>
+              <IconButton icon="circle-x" variant="ghost" onClick={() => setStore("filter", "")} />
            </Show>
          </div>
        </div>
@@ -402,13 +405,13 @@ export const SettingsKeybinds: Component = () => {
                          classList={{
                            "h-8 px-3 rounded-md text-12-regular": true,
                            "bg-surface-base text-text-subtle hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active":
-                              active() !== id,
-                            "border border-border-weak-base bg-surface-inset-base text-text-weak": active() === id,
+                              store.active !== id,
+                            "border border-border-weak-base bg-surface-inset-base text-text-weak": store.active === id,
                          }}
                          onClick={() => start(id)}
                        >
                          <Show
-                            when={active() === id}
+                            when={store.active === id}
                            fallback={command.keybind(id) || language.t("settings.shortcuts.unassigned")}
                          >
                            {language.t("settings.shortcuts.pressKeys")}
@@ -423,11 +426,11 @@ export const SettingsKeybinds: Component = () => {
          )}
        </For>

-        <Show when={filter() && !hasResults()}>
+        <Show when={store.filter && !hasResults()}>
          <div class="flex flex-col items-center justify-center py-12 text-center">
            <span class="text-14-regular text-text-weak">{language.t("settings.shortcuts.search.empty")}</span>
-            <Show when={filter()}>
-              <span class="text-14-regular text-text-strong mt-1">"{filter()}"</span>
+            <Show when={store.filter}>
+              <span class="text-14-regular text-text-strong mt-1">"{store.filter}"</span>
            </Show>
          </div>
        </Show>
@@ -39,9 +39,10 @@ export function StatusPopover() {
  const language = useLanguage()
  const navigate = useNavigate()

-  const [loading, setLoading] = createSignal<string | null>(null)
  const [store, setStore] = createStore({
    status: {} as Record<string, ServerStatus | undefined>,
+    loading: null as string | null,
+    defaultServerUrl: undefined as string | undefined,
  })

  const servers = createMemo(() => {
@@ -97,8 +98,8 @@ export function StatusPopover() {
  const mcpConnected = createMemo(() => mcpItems().filter((i) => i.status === "connected").length)

  const toggleMcp = async (name: string) => {
-    if (loading()) return
-    setLoading(name)
+    if (store.loading) return
+    setStore("loading", name)
    const status = sync.data.mcp[name]
    if (status?.status === "connected") {
      await sdk.client.mcp.disconnect({ name })
@@ -107,7 +108,7 @@ export function StatusPopover() {
    }
    const result = await sdk.client.mcp.status()
    if (result.data) sync.set("mcp", result.data)
-    setLoading(null)
+    setStore("loading", null)
  }

  const lspItems = createMemo(() => sync.data.lsp ?? [])
@@ -123,19 +124,17 @@ export function StatusPopover() {

  const serverCount = createMemo(() => sortedServers().length)

-  const [defaultServerUrl, setDefaultServerUrl] = createSignal<string | undefined>()
-
  const refreshDefaultServerUrl = () => {
    const result = platform.getDefaultServerUrl?.()
    if (!result) {
-      setDefaultServerUrl(undefined)
+      setStore("defaultServerUrl", undefined)
      return
    }
    if (result instanceof Promise) {
-      result.then((url) => setDefaultServerUrl(url ? normalizeServerUrl(url) : undefined))
+      result.then((url) => setStore("defaultServerUrl", url ? normalizeServerUrl(url) : undefined))
      return
    }
-    setDefaultServerUrl(normalizeServerUrl(result))
+    setStore("defaultServerUrl", normalizeServerUrl(result))
  }

  createEffect(() => {
@@ -220,7 +219,7 @@ export function StatusPopover() {
                <For each={sortedServers()}>
                  {(url) => {
                    const isActive = () => url === server.url
-                    const isDefault = () => url === defaultServerUrl()
+                    const isDefault = () => url === store.defaultServerUrl
                    const status = () => store.status[url]
                    const isBlocked = () => status()?.healthy === false
                    const [truncated, setTruncated] = createSignal(false)
@@ -329,7 +328,7 @@ export function StatusPopover() {
                          type="button"
                          class="flex items-center gap-2 w-full h-8 pl-3 pr-2 py-1 rounded-md hover:bg-surface-raised-base-hover transition-colors text-left"
                          onClick={() => toggleMcp(item.name)}
-                          disabled={loading() === item.name}
+                          disabled={store.loading === item.name}
                        >
                          <div
                            classList={{
@@ -345,7 +344,7 @@ export function StatusPopover() {
                          <div onClick={(event) => event.stopPropagation()}>
                            <Switch
                              checked={enabled()}
-                              disabled={loading() === item.name}
+                              disabled={store.loading === item.name}
                              onChange={() => toggleMcp(item.name)}
                            />
                          </div>
@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, onCleanup, onMount, type Accessor } from "solid-js"
+import { createEffect, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -165,8 +165,10 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
    const dialog = useDialog()
    const settings = useSettings()
    const language = useLanguage()
-    const [registrations, setRegistrations] = createSignal<Accessor<CommandOption[]>[]>([])
-    const [suspendCount, setSuspendCount] = createSignal(0)
+    const [store, setStore] = createStore({
+      registrations: [] as Accessor<CommandOption[]>[],
+      suspendCount: 0,
+    })

    const [catalog, setCatalog, _, catalogReady] = persisted(
      Persist.global("command.catalog.v1"),
@@ -184,7 +186,7 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
      const seen = new Set<string>()
      const all: CommandOption[] = []

-      for (const reg of registrations()) {
+      for (const reg of store.registrations) {
        for (const opt of reg()) {
          if (seen.has(opt.id)) continue
          seen.add(opt.id)
@@ -230,7 +232,7 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
      ]
    })

-    const suspended = () => suspendCount() > 0
+    const suspended = () => store.suspendCount > 0

    const palette = createMemo(() => {
      const config = settings.keybinds.get(PALETTE_ID) ?? DEFAULT_PALETTE_KEYBIND
@@ -297,9 +299,9 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
    return {
      register(cb: () => CommandOption[]) {
        const results = createMemo(cb)
-        setRegistrations((arr) => [results, ...arr])
+        setStore("registrations", (arr) => [results, ...arr])
        onCleanup(() => {
-          setRegistrations((arr) => arr.filter((x) => x !== results))
+          setStore("registrations", (arr) => arr.filter((x) => x !== results))
        })
      },
      trigger(id: string, source?: "palette" | "keybind" | "slash") {
@@ -321,7 +323,7 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
      },
      show: showPalette,
      keybinds(enabled: boolean) {
-        setSuspendCount((count) => count + (enabled ? -1 : 1))
+        setStore("suspendCount", (count) => count + (enabled ? -1 : 1))
      },
      suspended,
      get catalog() {
@@ -1,4 +1,4 @@
-import { batch, createMemo, createRoot, createSignal, onCleanup } from "solid-js"
+import { batch, createMemo, createRoot, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useParams } from "@solidjs/router"
@@ -37,8 +37,16 @@ function createCommentSession(dir: string, id: string | undefined) {
    }),
  )

-  const [focus, setFocus] = createSignal<CommentFocus | null>(null)
-  const [active, setActive] = createSignal<CommentFocus | null>(null)
+  const [state, setState] = createStore({
+    focus: null as CommentFocus | null,
+    active: null as CommentFocus | null,
+  })
+
+  const setFocus = (value: CommentFocus | null | ((value: CommentFocus | null) => CommentFocus | null)) =>
+    setState("focus", value)
+
+  const setActive = (value: CommentFocus | null | ((value: CommentFocus | null) => CommentFocus | null)) =>
+    setState("active", value)

  const list = (file: string) => store.comments[file] ?? []

@@ -74,10 +82,10 @@ function createCommentSession(dir: string, id: string | undefined) {
    all,
    add,
    remove,
-    focus: createMemo(() => focus()),
+    focus: createMemo(() => state.focus),
    setFocus,
    clearFocus: () => setFocus(null),
-    active: createMemo(() => active()),
+    active: createMemo(() => state.active),
    setActive,
    clearActive: () => setActive(null),
  }
@@ -1,7 +1,7 @@
 import { createEffect, createMemo, createRoot, onCleanup } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import type { FileContent } from "@opencode-ai/sdk/v2"
+import type { FileContent, FileNode } from "@opencode-ai/sdk/v2"
 import { showToast } from "@opencode-ai/ui/toast"
 import { useParams } from "@solidjs/router"
 import { getFilename } from "@opencode-ai/util/path"
@@ -39,6 +39,14 @@ export type FileState = {
  content?: FileContent
 }

+type DirectoryState = {
+  expanded: boolean
+  loaded?: boolean
+  loading?: boolean
+  error?: string
+  children?: string[]
+}
+
 function stripFileProtocol(input: string) {
  if (!input.startsWith("file://")) return input
  return input.slice("file://".length)
@@ -285,6 +293,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
    }

    const inflight = new Map<string, Promise<void>>()
+    const treeInflight = new Map<string, Promise<void>>()

    const [store, setStore] = createStore<{
      file: Record<string, FileState>
@@ -292,10 +301,21 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
      file: {},
    })

+    const [tree, setTree] = createStore<{
+      node: Record<string, FileNode>
+      dir: Record<string, DirectoryState>
+    }>({
+      node: {},
+      dir: { "": { expanded: true } },
+    })
+
    createEffect(() => {
      scope()
      inflight.clear()
+      treeInflight.clear()
      setStore("file", {})
+      setTree("node", {})
+      setTree("dir", { "": { expanded: true } })
    })

    const viewCache = new Map<string, ViewCacheEntry>()
@@ -407,14 +427,156 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
      return promise
    }

+    function normalizeDir(input: string) {
+      return normalize(input).replace(/\/+$/, "")
+    }
+
+    function ensureDir(path: string) {
+      if (tree.dir[path]) return
+      setTree("dir", path, { expanded: false })
+    }
+
+    function listDir(input: string, options?: { force?: boolean }) {
+      const dir = normalizeDir(input)
+      ensureDir(dir)
+
+      const current = tree.dir[dir]
+      if (!options?.force && current?.loaded) return Promise.resolve()
+
+      const pending = treeInflight.get(dir)
+      if (pending) return pending
+
+      setTree(
+        "dir",
+        dir,
+        produce((draft) => {
+          draft.loading = true
+          draft.error = undefined
+        }),
+      )
+
+      const directory = scope()
+
+      const promise = sdk.client.file
+        .list({ path: dir })
+        .then((x) => {
+          if (scope() !== directory) return
+          const nodes = x.data ?? []
+          const prevChildren = tree.dir[dir]?.children ?? []
+          const nextChildren = nodes.map((node) => node.path)
+          const nextSet = new Set(nextChildren)
+
+          setTree(
+            "node",
+            produce((draft) => {
+              const removedDirs: string[] = []
+
+              for (const child of prevChildren) {
+                if (nextSet.has(child)) continue
+                const existing = draft[child]
+                if (existing?.type === "directory") removedDirs.push(child)
+                delete draft[child]
+              }
+
+              if (removedDirs.length > 0) {
+                const keys = Object.keys(draft)
+                for (const key of keys) {
+                  for (const removed of removedDirs) {
+                    if (!key.startsWith(removed + "/")) continue
+                    delete draft[key]
+                    break
+                  }
+                }
+              }
+
+              for (const node of nodes) {
+                draft[node.path] = node
+              }
+            }),
+          )
+
+          setTree(
+            "dir",
+            dir,
+            produce((draft) => {
+              draft.loaded = true
+              draft.loading = false
+              draft.children = nextChildren
+            }),
+          )
+        })
+        .catch((e) => {
+          if (scope() !== directory) return
+          setTree(
+            "dir",
+            dir,
+            produce((draft) => {
+              draft.loading = false
+              draft.error = e.message
+            }),
+          )
+          showToast({
+            variant: "error",
+            title: "Failed to list files",
+            description: e.message,
+          })
+        })
+        .finally(() => {
+          treeInflight.delete(dir)
+        })
+
+      treeInflight.set(dir, promise)
+      return promise
+    }
+
+    function expandDir(input: string) {
+      const dir = normalizeDir(input)
+      ensureDir(dir)
+      setTree("dir", dir, "expanded", true)
+      void listDir(dir)
+    }
+
+    function collapseDir(input: string) {
+      const dir = normalizeDir(input)
+      ensureDir(dir)
+      setTree("dir", dir, "expanded", false)
+    }
+
+    function dirState(input: string) {
+      const dir = normalizeDir(input)
+      return tree.dir[dir]
+    }
+
+    function children(input: string) {
+      const dir = normalizeDir(input)
+      const ids = tree.dir[dir]?.children
+      if (!ids) return []
+      const out: FileNode[] = []
+      for (const id of ids) {
+        const node = tree.node[id]
+        if (node) out.push(node)
+      }
+      return out
+    }
+
    const stop = sdk.event.listen((e) => {
      const event = e.details
      if (event.type !== "file.watcher.updated") return
      const path = normalize(event.properties.file)
      if (!path) return
      if (path.startsWith(".git/")) return
-      if (!store.file[path]) return
-      load(path, { force: true })
+
+      if (store.file[path]) {
+        load(path, { force: true })
+      }
+
+      const kind = event.properties.event
+      if (kind !== "add" && kind !== "unlink") return
+
+      const parent = path.split("/").slice(0, -1).join("/")
+      if (!tree.dir[parent]?.loaded) return
+
+      listDir(parent, { force: true })
    })

    const get = (input: string) => store.file[normalize(input)]
@@ -448,6 +610,21 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
      normalize,
      tab,
      pathFromTab,
+      tree: {
+        list: listDir,
+        refresh: (input: string) => listDir(input, { force: true }),
+        state: dirState,
+        children,
+        expand: expandDir,
+        collapse: collapseDir,
+        toggle(input: string) {
+          if (dirState(input)?.expanded) {
+            collapseDir(input)
+            return
+          }
+          expandDir(input)
+        },
+      },
      get,
      load,
      scrollTop,
@@ -82,6 +82,10 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
          diffStyle: "split" as ReviewDiffStyle,
          panelOpened: true,
        },
+        fileTree: {
+          opened: false,
+          width: 260,
+        },
        session: {
          width: 600,
        },
@@ -449,6 +453,38 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
          setStore("review", "diffStyle", diffStyle)
        },
      },
+      fileTree: {
+        opened: createMemo(() => store.fileTree?.opened ?? false),
+        width: createMemo(() => store.fileTree?.width ?? 260),
+        open() {
+          if (!store.fileTree) {
+            setStore("fileTree", { opened: true, width: 260 })
+            return
+          }
+          setStore("fileTree", "opened", true)
+        },
+        close() {
+          if (!store.fileTree) {
+            setStore("fileTree", { opened: false, width: 260 })
+            return
+          }
+          setStore("fileTree", "opened", false)
+        },
+        toggle() {
+          if (!store.fileTree) {
+            setStore("fileTree", { opened: true, width: 260 })
+            return
+          }
+          setStore("fileTree", "opened", (x) => !x)
+        },
+        resize(width: number) {
+          if (!store.fileTree) {
+            setStore("fileTree", { opened: true, width })
+            return
+          }
+          setStore("fileTree", "width", width)
+        },
+      },
      session: {
        width: createMemo(() => store.session?.width ?? 600),
        resize(width: number) {
@@ -1,6 +1,6 @@
 import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { batch, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { usePlatform } from "@/context/platform"
 import { Persist, persisted } from "@/utils/persist"
@@ -40,12 +40,17 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
      }),
    )

-    const [active, setActiveRaw] = createSignal("")
+    const [state, setState] = createStore({
+      active: "",
+      healthy: undefined as boolean | undefined,
+    })
+
+    const healthy = () => state.healthy

    function setActive(input: string) {
      const url = normalizeServerUrl(input)
      if (!url) return
-      setActiveRaw(url)
+      setState("active", url)
    }

    function add(input: string) {
@@ -54,7 +59,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(

      const fallback = normalizeServerUrl(props.defaultUrl)
      if (fallback && url === fallback) {
-        setActiveRaw(url)
+        setState("active", url)
        return
      }

@@ -62,7 +67,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
        if (!store.list.includes(url)) {
          setStore("list", store.list.length, url)
        }
-        setActiveRaw(url)
+        setState("active", url)
      })
    }

@@ -71,25 +76,23 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
      if (!url) return

      const list = store.list.filter((x) => x !== url)
-      const next = active() === url ? (list[0] ?? normalizeServerUrl(props.defaultUrl) ?? "") : active()
+      const next = state.active === url ? (list[0] ?? normalizeServerUrl(props.defaultUrl) ?? "") : state.active

      batch(() => {
        setStore("list", list)
-        setActiveRaw(next)
+        setState("active", next)
      })
    }

    createEffect(() => {
      if (!ready()) return
-      if (active()) return
+      if (state.active) return
      const url = normalizeServerUrl(props.defaultUrl)
      if (!url) return
-      setActiveRaw(url)
+      setState("active", url)
    })

-    const isReady = createMemo(() => ready() && !!active())
-
-    const [healthy, setHealthy] = createSignal<boolean | undefined>(undefined)
+    const isReady = createMemo(() => ready() && !!state.active)

    const check = (url: string) => {
      const sdk = createOpencodeClient({
@@ -104,10 +107,10 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
    }

    createEffect(() => {
-      const url = active()
+      const url = state.active
      if (!url) return

-      setHealthy(undefined)
+      setState("healthy", undefined)

      let alive = true
      let busy = false
@@ -118,7 +121,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
        void check(url)
          .then((next) => {
            if (!alive) return
-            setHealthy(next)
+            setState("healthy", next)
          })
          .finally(() => {
            busy = false
@@ -134,7 +137,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
      })
    })

-    const origin = createMemo(() => projectsKey(active()))
+    const origin = createMemo(() => projectsKey(state.active))
    const projectsList = createMemo(() => store.projects[origin()] ?? [])
    const isLocal = createMemo(() => origin() === "local")

@@ -143,10 +146,10 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
      healthy,
      isLocal,
      get url() {
-        return active()
+        return state.active
      },
      get name() {
-        return serverDisplayName(active())
+        return serverDisplayName(state.active)
      },
      get list() {
        return store.list
@@ -91,7 +91,6 @@ export default function Layout(props: ParentProps) {
  let scrollContainerRef: HTMLDivElement | undefined

  const params = useParams()
-  const [autoselect, setAutoselect] = createSignal(!params.dir)
  const globalSDK = useGlobalSDK()
  const globalSync = useGlobalSync()
  const layout = useLayout()
@@ -117,27 +116,31 @@ export default function Layout(props: ParentProps) {
  }
  const colorSchemeLabel = (scheme: ColorScheme) => language.t(colorSchemeKey[scheme])

+  const [state, setState] = createStore({
+    autoselect: !params.dir,
+    busyWorkspaces: new Set<string>(),
+    hoverSession: undefined as string | undefined,
+    hoverProject: undefined as string | undefined,
+    scrollSessionKey: undefined as string | undefined,
+    nav: undefined as HTMLElement | undefined,
+  })
+
  const [editor, setEditor] = createStore({
    active: "" as string,
    value: "",
  })
-  const [busyWorkspaces, setBusyWorkspaces] = createSignal<Set<string>>(new Set())
  const setBusy = (directory: string, value: boolean) => {
    const key = workspaceKey(directory)
-    setBusyWorkspaces((prev) => {
+    setState("busyWorkspaces", (prev) => {
      const next = new Set(prev)
      if (value) next.add(key)
      else next.delete(key)
      return next
    })
  }
-  const isBusy = (directory: string) => busyWorkspaces().has(workspaceKey(directory))
+  const isBusy = (directory: string) => state.busyWorkspaces.has(workspaceKey(directory))
  const editorRef = { current: undefined as HTMLInputElement | undefined }

-  const [hoverSession, setHoverSession] = createSignal<string | undefined>()
-  const [hoverProject, setHoverProject] = createSignal<string | undefined>()
-
-  const [nav, setNav] = createSignal<HTMLElement | undefined>(undefined)
  const navLeave = { current: undefined as number | undefined }

  onCleanup(() => {
@@ -145,18 +148,18 @@ export default function Layout(props: ParentProps) {
    clearTimeout(navLeave.current)
  })

-  const sidebarHovering = createMemo(() => !layout.sidebar.opened() && hoverProject() !== undefined)
+  const sidebarHovering = createMemo(() => !layout.sidebar.opened() && state.hoverProject !== undefined)
  const sidebarExpanded = createMemo(() => layout.sidebar.opened() || sidebarHovering())

  const hoverProjectData = createMemo(() => {
-    const id = hoverProject()
+    const id = state.hoverProject
    if (!id) return
    return layout.projects.list().find((project) => project.worktree === id)
  })

  createEffect(() => {
    if (!layout.sidebar.opened()) return
-    setHoverProject(undefined)
+    setState("hoverProject", undefined)
  })

  createEffect(
@@ -164,9 +167,9 @@ export default function Layout(props: ParentProps) {
      () => ({ dir: params.dir, id: params.id }),
      () => {
        if (layout.sidebar.opened()) return
-        if (!hoverProject()) return
-        setHoverSession(undefined)
-        setHoverProject(undefined)
+        if (!state.hoverProject) return
+        setState("hoverSession", undefined)
+        setState("hoverProject", undefined)
      },
      { defer: true },
    ),
@@ -175,7 +178,7 @@ export default function Layout(props: ParentProps) {
  const autoselecting = createMemo(() => {
    if (params.dir) return false
    if (initialDir) return false
-    if (!autoselect()) return false
+    if (!state.autoselect) return false
    if (!pageReady()) return true
    if (!layoutReady()) return true
    const list = layout.projects.list()
@@ -483,20 +486,18 @@ export default function Layout(props: ParentProps) {
    }
  }

-  const [scrollSessionKey, setScrollSessionKey] = createSignal<string | undefined>(undefined)
-
  function scrollToSession(sessionId: string, sessionKey: string) {
    if (!scrollContainerRef) return
-    if (scrollSessionKey() === sessionKey) return
+    if (state.scrollSessionKey === sessionKey) return
    const element = scrollContainerRef.querySelector(`[data-session-id="${sessionId}"]`)
    if (!element) return
    const containerRect = scrollContainerRef.getBoundingClientRect()
    const elementRect = element.getBoundingClientRect()
    if (elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom) {
-      setScrollSessionKey(sessionKey)
+      setState("scrollSessionKey", sessionKey)
      return
    }
-    setScrollSessionKey(sessionKey)
+    setState("scrollSessionKey", sessionKey)
    element.scrollIntoView({ block: "nearest", behavior: "smooth" })
  }

@@ -544,7 +545,7 @@ export default function Layout(props: ParentProps) {
      (value) => {
        if (!value.ready) return
        if (!value.layoutReady) return
-        if (!autoselect()) return
+        if (!state.autoselect) return
        if (initialDir) return
        if (value.dir) return
        if (value.list.length === 0) return
@@ -552,7 +553,7 @@ export default function Layout(props: ParentProps) {
        const last = server.projects.last()
        const next = value.list.find((project) => project.worktree === last) ?? value.list[0]
        if (!next) return
-        setAutoselect(false)
+        setState("autoselect", false)
        openProject(next.worktree, false)
        navigateToProject(next.worktree)
      },
@@ -1066,8 +1067,8 @@ export default function Layout(props: ParentProps) {
  function navigateToProject(directory: string | undefined) {
    if (!directory) return
    if (!layout.sidebar.opened()) {
-      setHoverSession(undefined)
-      setHoverProject(undefined)
+      setState("hoverSession", undefined)
+      setState("hoverProject", undefined)
    }
    server.projects.touch(directory)
    const lastSession = store.lastSession[directory]
@@ -1078,8 +1079,8 @@ export default function Layout(props: ParentProps) {
  function navigateToSession(session: Session | undefined) {
    if (!session) return
    if (!layout.sidebar.opened()) {
-      setHoverSession(undefined)
-      setHoverProject(undefined)
+      setState("hoverSession", undefined)
+      setState("hoverProject", undefined)
    }
    navigate(`/${base64Encode(session.directory)}/session/${session.id}`)
    layout.mobileSidebar.hide()
@@ -1472,7 +1473,7 @@ export default function Layout(props: ParentProps) {
  function handleDragStart(event: unknown) {
    const id = getDraggableId(event)
    if (!id) return
-    setHoverProject(undefined)
+    setState("hoverProject", undefined)
    setStore("activeProject", id)
  }

@@ -1632,8 +1633,10 @@ export default function Layout(props: ParentProps) {
    const hoverAllowed = createMemo(() => !props.mobile && sidebarExpanded())
    const hoverEnabled = createMemo(() => (props.popover ?? true) && hoverAllowed())
    const isActive = createMemo(() => props.session.id === params.id)
-    const [menuOpen, setMenuOpen] = createSignal(false)
-    const [pendingRename, setPendingRename] = createSignal(false)
+    const [menu, setMenu] = createStore({
+      open: false,
+      pendingRename: false,
+    })

    const messageLabel = (message: Message) => {
      const parts = sessionStore.part[message.id] ?? []
@@ -1644,13 +1647,13 @@ export default function Layout(props: ParentProps) {
    const item = (
      <A
        href={`${props.slug}/session/${props.session.id}`}
-        class={`flex items-center justify-between gap-3 min-w-0 text-left w-full focus:outline-none transition-[padding] ${menuOpen() ? "pr-7" : ""} group-hover/session:pr-7 group-focus-within/session:pr-7 group-active/session:pr-7 ${props.dense ? "py-0.5" : "py-1"}`}
+        class={`flex items-center justify-between gap-3 min-w-0 text-left w-full focus:outline-none transition-[padding] ${menu.open ? "pr-7" : ""} group-hover/session:pr-7 group-focus-within/session:pr-7 group-active/session:pr-7 ${props.dense ? "py-0.5" : "py-1"}`}
        onMouseEnter={() => prefetchSession(props.session, "high")}
        onFocus={() => prefetchSession(props.session, "high")}
        onClick={() => {
-          setHoverSession(undefined)
+          setState("hoverSession", undefined)
          if (layout.sidebar.opened()) return
-          queueMicrotask(() => setHoverProject(undefined))
+          queueMicrotask(() => setState("hoverProject", undefined))
        }}
      >
        <div class="flex items-center gap-1 w-full">
@@ -1696,7 +1699,7 @@ export default function Layout(props: ParentProps) {
      <div
        data-session-id={props.session.id}
        class="group/session relative w-full rounded-md cursor-default transition-colors pl-2 pr-3
-               hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
+               hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
      >
        <Show
          when={hoverEnabled()}
@@ -1713,9 +1716,9 @@ export default function Layout(props: ParentProps) {
            gutter={16}
            shift={-2}
            trigger={item}
-            mount={!props.mobile ? nav() : undefined}
-            open={hoverSession() === props.session.id}
-            onOpenChange={(open) => setHoverSession(open ? props.session.id : undefined)}
+            mount={!props.mobile ? state.nav : undefined}
+            open={state.hoverSession === props.session.id}
+            onOpenChange={(open) => setState("hoverSession", open ? props.session.id : undefined)}
          >
            <Show
              when={hoverReady()}
@@ -1745,13 +1748,13 @@ export default function Layout(props: ParentProps) {
        <div
          class={`absolute ${props.dense ? "top-0.5 right-0.5" : "top-1 right-1"} flex items-center gap-0.5 transition-opacity`}
          classList={{
-            "opacity-100 pointer-events-auto": menuOpen(),
-            "opacity-0 pointer-events-none": !menuOpen(),
+            "opacity-100 pointer-events-auto": menu.open,
+            "opacity-0 pointer-events-none": !menu.open,
            "group-hover/session:opacity-100 group-hover/session:pointer-events-auto": true,
            "group-focus-within/session:opacity-100 group-focus-within/session:pointer-events-auto": true,
          }}
        >
-          <DropdownMenu modal={!sidebarHovering()} open={menuOpen()} onOpenChange={setMenuOpen}>
+          <DropdownMenu modal={!sidebarHovering()} open={menu.open} onOpenChange={(open) => setMenu("open", open)}>
            <Tooltip value={language.t("common.moreOptions")} placement="top">
              <DropdownMenu.Trigger
                as={IconButton}
@@ -1761,19 +1764,19 @@ export default function Layout(props: ParentProps) {
                aria-label={language.t("common.moreOptions")}
              />
            </Tooltip>
-            <DropdownMenu.Portal mount={!props.mobile ? nav() : undefined}>
+            <DropdownMenu.Portal mount={!props.mobile ? state.nav : undefined}>
              <DropdownMenu.Content
                onCloseAutoFocus={(event) => {
-                  if (!pendingRename()) return
+                  if (!menu.pendingRename) return
                  event.preventDefault()
-                  setPendingRename(false)
+                  setMenu("pendingRename", false)
                  openEditor(`session:${props.session.id}`, props.session.title)
                }}
              >
                <DropdownMenu.Item
                  onSelect={() => {
-                    setPendingRename(true)
-                    setMenuOpen(false)
+                    setMenu("pendingRename", true)
+                    setMenu("open", false)
                  }}
                >
                  <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
@@ -1802,9 +1805,9 @@ export default function Layout(props: ParentProps) {
        end
        class={`flex items-center justify-between gap-3 min-w-0 text-left w-full focus:outline-none ${props.dense ? "py-0.5" : "py-1"}`}
        onClick={() => {
-          setHoverSession(undefined)
+          setState("hoverSession", undefined)
          if (layout.sidebar.opened()) return
-          queueMicrotask(() => setHoverProject(undefined))
+          queueMicrotask(() => setState("hoverProject", undefined))
        }}
      >
        <div class="flex items-center gap-1 w-full">
@@ -1819,7 +1822,7 @@ export default function Layout(props: ParentProps) {
    )

    return (
-      <div class="group/session relative w-full rounded-md cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active">
+      <div class="group/session relative w-full rounded-md cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active">
        <Show
          when={!tooltip()}
          fallback={
@@ -1884,8 +1887,10 @@ export default function Layout(props: ParentProps) {
  const SortableWorkspace = (props: { directory: string; project: LocalProject; mobile?: boolean }): JSX.Element => {
    const sortable = createSortable(props.directory)
    const [workspaceStore, setWorkspaceStore] = globalSync.child(props.directory, { bootstrap: false })
-    const [menuOpen, setMenuOpen] = createSignal(false)
-    const [pendingRename, setPendingRename] = createSignal(false)
+    const [menu, setMenu] = createStore({
+      open: false,
+      pendingRename: false,
+    })
    const slug = createMemo(() => base64Encode(props.directory))
    const sessions = createMemo(() =>
      workspaceStore.session
@@ -1995,13 +2000,17 @@ export default function Layout(props: ParentProps) {
                <div
                  class="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-0.5 transition-opacity"
                  classList={{
-                    "opacity-100 pointer-events-auto": menuOpen(),
-                    "opacity-0 pointer-events-none": !menuOpen(),
+                    "opacity-100 pointer-events-auto": menu.open,
+                    "opacity-0 pointer-events-none": !menu.open,
                    "group-hover/workspace:opacity-100 group-hover/workspace:pointer-events-auto": true,
                    "group-focus-within/workspace:opacity-100 group-focus-within/workspace:pointer-events-auto": true,
                  }}
                >
-                  <DropdownMenu modal={!sidebarHovering()} open={menuOpen()} onOpenChange={setMenuOpen}>
+                  <DropdownMenu
+                    modal={!sidebarHovering()}
+                    open={menu.open}
+                    onOpenChange={(open) => setMenu("open", open)}
+                  >
                    <Tooltip value={language.t("common.moreOptions")} placement="top">
                      <DropdownMenu.Trigger
                        as={IconButton}
@@ -2011,20 +2020,20 @@ export default function Layout(props: ParentProps) {
                        aria-label={language.t("common.moreOptions")}
                      />
                    </Tooltip>
-                    <DropdownMenu.Portal mount={!props.mobile ? nav() : undefined}>
+                    <DropdownMenu.Portal mount={!props.mobile ? state.nav : undefined}>
                      <DropdownMenu.Content
                        onCloseAutoFocus={(event) => {
-                          if (!pendingRename()) return
+                          if (!menu.pendingRename) return
                          event.preventDefault()
-                          setPendingRename(false)
+                          setMenu("pendingRename", false)
                          openEditor(`workspace:${props.directory}`, workspaceValue())
                        }}
                      >
                        <DropdownMenu.Item
                          disabled={local()}
                          onSelect={() => {
-                            setPendingRename(true)
-                            setMenuOpen(false)
+                            setMenu("pendingRename", true)
+                            setMenu("open", false)
                          }}
                        >
                          <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
@@ -2103,7 +2112,7 @@ export default function Layout(props: ParentProps) {

    const preview = createMemo(() => !props.mobile && layout.sidebar.opened())
    const overlay = createMemo(() => !props.mobile && !layout.sidebar.opened())
-    const active = createMemo(() => (preview() ? open() : overlay() && hoverProject() === props.project.worktree))
+    const active = createMemo(() => (preview() ? open() : overlay() && state.hoverProject === props.project.worktree))

    createEffect(() => {
      if (preview()) return
@@ -2155,14 +2164,14 @@ export default function Layout(props: ParentProps) {
        onMouseEnter={() => {
          if (!overlay()) return
          globalSync.child(props.project.worktree)
-          setHoverProject(props.project.worktree)
-          setHoverSession(undefined)
+          setState("hoverProject", props.project.worktree)
+          setState("hoverSession", undefined)
        }}
        onFocus={() => {
          if (!overlay()) return
          globalSync.child(props.project.worktree)
-          setHoverProject(props.project.worktree)
-          setHoverSession(undefined)
+          setState("hoverProject", props.project.worktree)
+          setState("hoverSession", undefined)
        }}
        onClick={() => navigateToProject(props.project.worktree)}
        onBlur={() => setOpen(false)}
@@ -2184,7 +2193,7 @@ export default function Layout(props: ParentProps) {
            trigger={trigger}
            onOpenChange={(value) => {
              setOpen(value)
-              if (value) setHoverSession(undefined)
+              if (value) setState("hoverSession", undefined)
            }}
          >
            <div class="-m-3 p-2 flex flex-col w-72">
@@ -2323,8 +2332,8 @@ export default function Layout(props: ParentProps) {

  const createWorkspace = async (project: LocalProject) => {
    if (!layout.sidebar.opened()) {
-      setHoverSession(undefined)
-      setHoverProject(undefined)
+      setState("hoverSession", undefined)
+      setState("hoverProject", undefined)
    }
    const created = await globalSDK.client.worktree
      .create({ directory: project.worktree })
@@ -2427,7 +2436,7 @@ export default function Layout(props: ParentProps) {
                      class="shrink-0 size-6 rounded-md opacity-0 group-hover/project:opacity-100 data-[expanded]:opacity-100 data-[expanded]:bg-surface-base-active"
                      aria-label={language.t("common.moreOptions")}
                    />
-                    <DropdownMenu.Portal mount={!panelProps.mobile ? nav() : undefined}>
+                    <DropdownMenu.Portal mount={!panelProps.mobile ? state.nav : undefined}>
                      <DropdownMenu.Content class="mt-1">
                        <DropdownMenu.Item onSelect={() => dialog.show(() => <DialogEditProject project={p} />)}>
                          <DropdownMenu.ItemLabel>{language.t("common.edit")}</DropdownMenu.ItemLabel>
@@ -2476,8 +2485,8 @@ export default function Layout(props: ParentProps) {
                          class="w-full"
                          onClick={() => {
                            if (!layout.sidebar.opened()) {
-                              setHoverSession(undefined)
-                              setHoverProject(undefined)
+                              setState("hoverSession", undefined)
+                              setState("hoverProject", undefined)
                            }
                            navigate(`/${base64Encode(p.worktree)}/session`)
                            layout.mobileSidebar.hide()
@@ -2668,7 +2677,7 @@ export default function Layout(props: ParentProps) {
          }}
          style={{ width: layout.sidebar.opened() ? `${Math.max(layout.sidebar.width(), 244)}px` : "64px" }}
          ref={(el) => {
-            setNav(el)
+            setState("nav", el)
          }}
          onMouseEnter={() => {
            if (navLeave.current === undefined) return
@@ -2681,8 +2690,8 @@ export default function Layout(props: ParentProps) {
            if (navLeave.current !== undefined) clearTimeout(navLeave.current)
            navLeave.current = window.setTimeout(() => {
              navLeave.current = undefined
-              setHoverProject(undefined)
-              setHoverSession(undefined)
+              setState("hoverProject", undefined)
+              setState("hoverSession", undefined)
            }, 300)
          }}
        >
@@ -1,4 +1,5 @@
-import { createSignal, onCleanup } from "solid-js"
+import { onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"

 // Minimal types to avoid relying on non-standard DOM typings
 type RecognitionResult = {
@@ -59,9 +60,15 @@ export function createSpeechRecognition(opts?: {
    typeof window !== "undefined" &&
    Boolean((window as any).webkitSpeechRecognition || (window as any).SpeechRecognition)

-  const [isRecording, setIsRecording] = createSignal(false)
-  const [committed, setCommitted] = createSignal("")
-  const [interim, setInterim] = createSignal("")
+  const [store, setStore] = createStore({
+    isRecording: false,
+    committed: "",
+    interim: "",
+  })
+
+  const isRecording = () => store.isRecording
+  const committed = () => store.committed
+  const interim = () => store.interim

  let recognition: Recognition | undefined
  let shouldContinue = false
@@ -82,7 +89,7 @@ export function createSpeechRecognition(opts?: {
    const nextCommitted = appendSegment(committedText, segment)
    if (nextCommitted === committedText) return
    committedText = nextCommitted
-    setCommitted(committedText)
+    setStore("committed", committedText)
    if (opts?.onFinal) opts.onFinal(segment.trim())
  }

@@ -98,7 +105,7 @@ export function createSpeechRecognition(opts?: {
    pendingHypothesis = ""
    lastInterimSuffix = ""
    shrinkCandidate = undefined
-    setInterim("")
+    setStore("interim", "")
    if (opts?.onInterim) opts.onInterim("")
  }

@@ -107,7 +114,7 @@ export function createSpeechRecognition(opts?: {
    pendingHypothesis = hypothesis
    lastInterimSuffix = suffix
    shrinkCandidate = undefined
-    setInterim(suffix)
+    setStore("interim", suffix)
    if (opts?.onInterim) {
      opts.onInterim(suffix ? appendSegment(committedText, suffix) : "")
    }
@@ -122,7 +129,7 @@ export function createSpeechRecognition(opts?: {
      pendingHypothesis = ""
      lastInterimSuffix = ""
      shrinkCandidate = undefined
-      setInterim("")
+      setStore("interim", "")
      if (opts?.onInterim) opts.onInterim("")
    }, COMMIT_DELAY)
  }
@@ -162,7 +169,7 @@ export function createSpeechRecognition(opts?: {
        pendingHypothesis = ""
        lastInterimSuffix = ""
        shrinkCandidate = undefined
-        setInterim("")
+        setStore("interim", "")
        if (opts?.onInterim) opts.onInterim("")
        return
      }
@@ -211,7 +218,7 @@ export function createSpeechRecognition(opts?: {
      lastInterimSuffix = ""
      shrinkCandidate = undefined
      if (e.error === "no-speech" && shouldContinue) {
-        setInterim("")
+        setStore("interim", "")
        if (opts?.onInterim) opts.onInterim("")
        setTimeout(() => {
          try {
@@ -221,7 +228,7 @@ export function createSpeechRecognition(opts?: {
        return
      }
      shouldContinue = false
-      setIsRecording(false)
+      setStore("isRecording", false)
    }

    recognition.onstart = () => {
@@ -230,16 +237,16 @@ export function createSpeechRecognition(opts?: {
      cancelPendingCommit()
      lastInterimSuffix = ""
      shrinkCandidate = undefined
-      setInterim("")
+      setStore("interim", "")
      if (opts?.onInterim) opts.onInterim("")
-      setIsRecording(true)
+      setStore("isRecording", true)
    }

    recognition.onend = () => {
      cancelPendingCommit()
      lastInterimSuffix = ""
      shrinkCandidate = undefined
-      setIsRecording(false)
+      setStore("isRecording", false)
      if (shouldContinue) {
        setTimeout(() => {
          try {
@@ -258,7 +265,7 @@ export function createSpeechRecognition(opts?: {
    cancelPendingCommit()
    lastInterimSuffix = ""
    shrinkCandidate = undefined
-    setInterim("")
+    setStore("interim", "")
    try {
      recognition.start()
    } catch {}
@@ -271,7 +278,7 @@ export function createSpeechRecognition(opts?: {
    cancelPendingCommit()
    lastInterimSuffix = ""
    shrinkCandidate = undefined
-    setInterim("")
+    setStore("interim", "")
    if (opts?.onInterim) opts.onInterim("")
    try {
      recognition.stop()
@@ -284,7 +291,7 @@ export function createSpeechRecognition(opts?: {
    cancelPendingCommit()
    lastInterimSuffix = ""
    shrinkCandidate = undefined
-    setInterim("")
+    setStore("interim", "")
    if (opts?.onInterim) opts.onInterim("")
    try {
      recognition?.stop()
@@ -371,7 +371,7 @@
      top: 80px;
      align-self: start;
      background: var(--color-background);
-      padding: 8px 0;
+      padding: 44px 0 8px;

      @media (max-width: 50rem) {
        position: static;
@@ -328,18 +328,23 @@ render(() => {
  const [serverPassword, setServerPassword] = createSignal<string | null>(null)
  const platform = createPlatform(() => serverPassword())

-  function handleClick(e: MouseEvent) {
-    const link = (e.target as HTMLElement).closest("a.external-link") as HTMLAnchorElement | null
-    if (link?.href) {
-      e.preventDefault()
-      platform.openLink(link.href)
-    }
-  }
-
  onMount(() => {
-    document.addEventListener("click", handleClick)
+    // Handle external links - open in system browser instead of webview
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      const link = target.closest("a") as HTMLAnchorElement | null
+
+      if (link?.href && !link.href.startsWith("javascript:") && !link.href.startsWith("#")) {
+        e.preventDefault()
+        e.stopPropagation()
+        e.stopImmediatePropagation()
+        void shellOpen(link.href).catch(() => undefined)
+      }
+    }
+
+    document.addEventListener("click", handleClick, true)
    onCleanup(() => {
-      document.removeEventListener("click", handleClick)
+      document.removeEventListener("click", handleClick, true)
    })
  })

@@ -20,6 +20,7 @@ import { createStore } from "solid-js/store"
 import z from "zod"
 import NotFound from "../[...404]"
 import { Tabs } from "@opencode-ai/ui/tabs"
+import { MessageNav } from "@opencode-ai/ui/message-nav"
 import { preloadMultiFileDiff, PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
 import { Diff as SSRDiff } from "@opencode-ai/ui/diff-ssr"
 import { clientOnly } from "@solidjs/start"
@@ -362,6 +363,15 @@ export default function () {
                                    {title()}
                                  </div>
                                  <div class="flex items-start justify-start h-full min-h-0">
+                                    <Show when={messages().length > 1}>
+                                      <MessageNav
+                                        class="sticky top-0 shrink-0 py-2 pl-4"
+                                        messages={messages()}
+                                        current={activeMessage()}
+                                        size="compact"
+                                        onMessageSelect={setActiveMessage}
+                                      />
+                                    </Show>
                                    <SessionTurn
                                      sessionID={data().sessionID}
                                      messageID={store.messageId ?? firstUserMessage()!.id!}
@@ -82,8 +82,8 @@
    "@opencode-ai/sdk": "workspace:*",
    "@opencode-ai/util": "workspace:*",
    "@openrouter/ai-sdk-provider": "1.5.2",
-    "@opentui/core": "0.1.74",
-    "@opentui/solid": "0.1.74",
+    "@opentui/core": "0.1.75",
+    "@opentui/solid": "0.1.75",
    "@parcel/watcher": "2.5.1",
    "@pierre/diffs": "catalog:",
    "@solid-primitives/event-bus": "1.1.2",
@@ -46,7 +46,7 @@
    &:hover:not(:disabled) {
      background-color: var(--surface-raised-base-hover);
    }
-    &:focus:not(:disabled) {
+    &:focus-visible:not(:disabled) {
      background-color: var(--surface-raised-base-hover);
    }
    &:active:not(:disabled) {
@@ -90,8 +90,8 @@
      /*   color: var(--icon-hover); */
      /* } */
    }
-    &:focus:not(:disabled) {
-      background-color: var(--surface-focus);
+    &:focus-visible:not(:disabled) {
+      background-color: var(--surface-raised-base-hover);
    }
    &:active:not(:disabled) {
      background-color: var(--surface-raised-base-active);
@@ -40,7 +40,7 @@
      transition: opacity 0.15s ease;

      &:hover:not(:disabled),
-      &:focus:not(:disabled),
+      &:focus-visible:not(:disabled),
      &:active:not(:disabled) {
        background-color: transparent;
        opacity: 0.7;
@@ -91,7 +91,7 @@
      transition: opacity 0.15s ease;

      &:hover:not(:disabled),
-      &:focus:not(:disabled),
+      &:focus-visible:not(:disabled),
      &:active:not(:disabled) {
        background-color: transparent;
        opacity: 0.7;
@@ -21,6 +21,12 @@
    transform: translateX(50%);
    cursor: col-resize;

+    &[data-edge="start"] {
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+      transform: translateX(-50%);
+    }
+
    &::after {
      width: 3px;
      inset-block: 0;
@@ -36,6 +42,12 @@
    transform: translateY(-50%);
    cursor: row-resize;

+    &[data-edge="end"] {
+      inset-block-start: auto;
+      inset-block-end: 0;
+      transform: translateY(50%);
+    }
+
    &::after {
      height: 3px;
      inset-inline: 0;
@@ -2,6 +2,7 @@ import { splitProps, type JSX } from "solid-js"

 export interface ResizeHandleProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize"> {
  direction: "horizontal" | "vertical"
+  edge?: "start" | "end"
  size: number
  min: number
  max: number
@@ -13,6 +14,7 @@ export interface ResizeHandleProps extends Omit<JSX.HTMLAttributes<HTMLDivElemen
 export function ResizeHandle(props: ResizeHandleProps) {
  const [local, rest] = splitProps(props, [
    "direction",
+    "edge",
    "size",
    "min",
    "max",
@@ -25,6 +27,7 @@ export function ResizeHandle(props: ResizeHandleProps) {

  const handleMouseDown = (e: MouseEvent) => {
    e.preventDefault()
+    const edge = local.edge ?? (local.direction === "vertical" ? "start" : "end")
    const start = local.direction === "horizontal" ? e.clientX : e.clientY
    const startSize = local.size
    let current = startSize
@@ -34,7 +37,14 @@ export function ResizeHandle(props: ResizeHandleProps) {

    const onMouseMove = (moveEvent: MouseEvent) => {
      const pos = local.direction === "horizontal" ? moveEvent.clientX : moveEvent.clientY
-      const delta = local.direction === "vertical" ? start - pos : pos - start
+      const delta =
+        local.direction === "vertical"
+          ? edge === "end"
+            ? pos - start
+            : start - pos
+          : edge === "start"
+            ? start - pos
+            : pos - start
      current = startSize + delta
      const clamped = Math.min(local.max, Math.max(local.min, current))
      local.onResize(clamped)
@@ -61,6 +71,7 @@ export function ResizeHandle(props: ResizeHandleProps) {
      {...rest}
      data-component="resize-handle"
      data-direction={local.direction}
+      data-edge={local.edge ?? (local.direction === "vertical" ? "start" : "end")}
      classList={{
        ...(local.classList ?? {}),
        [local.class ?? ""]: !!local.class,
@@ -31,7 +31,7 @@
      }
    }

-    &:not([data-expanded]):focus {
+    &:not([data-expanded]):focus-visible {
      &[data-variant="secondary"] {
        background-color: var(--button-secondary-base);
      }
@@ -9,6 +9,7 @@ import { StickyAccordionHeader } from "./sticky-accordion-header"
 import { useDiffComponent } from "../context/diff"
 import { useI18n } from "../context/i18n"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
+import { checksum } from "@opencode-ai/util/encode"
 import { createEffect, createMemo, createSignal, For, Match, Show, Switch, type JSX } from "solid-js"
 import { createStore } from "solid-js/store"
 import { type FileContent, type FileDiff } from "@opencode-ai/sdk/v2"
@@ -118,6 +119,12 @@ function dataUrlFromValue(value: unknown): string | undefined {
  return `data:${mime};base64,${content}`
 }

+function diffId(file: string): string | undefined {
+  const sum = checksum(file)
+  if (!sum) return
+  return `session-review-diff-${sum}`
+}
+
 type SessionReviewSelection = {
  file: string
  range: SelectedLineRange
@@ -489,7 +496,12 @@ export const SessionReview = (props: SessionReviewProps) => {
              }

              return (
-                <Accordion.Item value={diff.file} data-slot="session-review-accordion-item">
+                <Accordion.Item
+                  value={diff.file}
+                  id={diffId(diff.file)}
+                  data-file={diff.file}
+                  data-slot="session-review-accordion-item"
+                >
                  <StickyAccordionHeader>
                    <Accordion.Trigger>
                      <div data-slot="session-review-trigger-content">
@@ -212,6 +212,58 @@
    /* } */
  }

+  &[data-variant="pill"][data-orientation="horizontal"] {
+    background-color: transparent;
+
+    [data-slot="tabs-list"] {
+      height: auto;
+      padding: 6px 0;
+      gap: 4px;
+      background-color: var(--background-base);
+
+      &::after {
+        display: none;
+      }
+    }
+
+    [data-slot="tabs-trigger-wrapper"] {
+      height: 32px;
+      border: none;
+      border-radius: var(--radius-sm);
+      background-color: transparent;
+      gap: 0;
+
+      /* text-13-medium */
+      font-family: var(--font-family-sans);
+      font-size: var(--font-size-small);
+      font-style: normal;
+      font-weight: var(--font-weight-medium);
+      line-height: var(--line-height-large);
+      letter-spacing: var(--letter-spacing-normal);
+
+      [data-slot="tabs-trigger"] {
+        height: 100%;
+        width: 100%;
+        padding: 0 12px;
+        background-color: transparent;
+      }
+
+      &:hover:not(:disabled) {
+        background-color: var(--surface-raised-base-hover);
+        color: var(--text-strong);
+      }
+
+      &:has([data-selected]) {
+        background-color: var(--surface-raised-base-active);
+        color: var(--text-strong);
+
+        &:hover:not(:disabled) {
+          background-color: var(--surface-raised-base-active);
+        }
+      }
+    }
+  }
+
  &[data-orientation="vertical"] {
    flex-direction: row;

@@ -3,7 +3,7 @@ import { Show, splitProps, type JSX } from "solid-js"
 import type { ComponentProps, ParentProps, Component } from "solid-js"

 export interface TabsProps extends ComponentProps<typeof Kobalte> {
-  variant?: "normal" | "alt" | "settings"
+  variant?: "normal" | "alt" | "pill" | "settings"
  orientation?: "horizontal" | "vertical"
 }
 export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {}
@@ -33,18 +33,18 @@ export const auraTheme = auraThemeJson as DesktopTheme

 export const DEFAULT_THEMES: Record<string, DesktopTheme> = {
  "oc-1": oc1Theme,
-  tokyonight: tokyonightTheme,
-  dracula: draculaTheme,
-  monokai: monokaiTheme,
-  solarized: solarizedTheme,
-  nord: nordTheme,
-  catppuccin: catppuccinTheme,
+  aura: auraTheme,
  ayu: ayuTheme,
+  carbonfox: carbonfoxTheme,
+  catppuccin: catppuccinTheme,
+  dracula: draculaTheme,
+  gruvbox: gruvboxTheme,
+  monokai: monokaiTheme,
+  nightowl: nightowlTheme,
+  nord: nordTheme,
  onedarkpro: oneDarkProTheme,
  shadesofpurple: shadesOfPurpleTheme,
-  nightowl: nightowlTheme,
+  solarized: solarizedTheme,
+  tokyonight: tokyonightTheme,
  vesper: vesperTheme,
-  carbonfox: carbonfoxTheme,
-  gruvbox: gruvboxTheme,
-  aura: auraTheme,
 }
@@ -4,6 +4,35 @@ import { $ } from "bun"
 import { Script } from "@opencode-ai/script"
 import { buildNotes, getLatestRelease } from "./changelog"

+const highlightsTemplate = `## Highlights
+
+<!-- 
+Add highlights before publishing. Delete this section if no highlights.
+
+- For multiple highlights, use multiple <highlight> tags
+- Highlights with the same source attribute get grouped together
+-->
+
+<!--
+<highlight source="SourceName (TUI/Desktop/Web/Core)">
+  <h2>Feature title goes here</h2>
+  <p short="Short description used for Desktop Recap">
+    Full description of the feature or change
+  </p>
+
+  https://github.com/user-attachments/assets/uuid-for-video (you will want to drag & drop the video or picture)
+
+  <img
+    width="1912"
+    height="1164"
+    alt="image"
+    src="https://github.com/user-attachments/assets/uuid-for-image"
+  />
+</highlight>
+-->
+
+`
+
 let notes: string[] = []

 console.log("=== publishing ===\n")
@@ -11,6 +40,7 @@ console.log("=== publishing ===\n")
 if (!Script.preview) {
  const previous = await getLatestRelease()
  notes = await buildNotes(previous, "HEAD")
+  notes.unshift(highlightsTemplate)
 }

 const pkgjsons = await Array.fromAsync(
Author	SHA1	Message	Date
Ryan Vogel	c380d389aa	feat(release): add highlights template to draft releases	2026-01-26 17:42:28 -05:00
zerone0x GitHub Claude	ec2ab639bb	fix(enterprise): add message navigation to share page desktop view (#10071 ) Co-authored-by: Claude <noreply@anthropic.com>	2026-01-26 12:32:16 -05:00
adamelmore	d05ed5ca83	chore(app): createStore over signals	2026-01-26 11:26:17 -06:00
adamelmore	37f1a1a4ef	chore: cleanup	2026-01-26 11:07:52 -06:00
adamelmore	b8e8d82323	chore: cleanup	2026-01-26 11:07:52 -06:00
adamelmore	801eb5d2cb	wip(app): file tree mode	2026-01-26 11:07:52 -06:00
adamelmore	ebeed03115	wip(app): file tree mode	2026-01-26 11:07:51 -06:00
Adamandadamelmore	d9eed4c6ca	feat(app): file tree	2026-01-26 11:07:51 -06:00
Ryan VogelandGitHub	7e34d27b77	fix: add 44px top padding to sticky version header on changelog (#10715 )	2026-01-26 12:02:20 -05:00
Rahul A MistryandGitHub	783121c06e	fix(ui): use focus-visible instead of focus to prevent sticky hover effect on click (#10651 )	2026-01-26 10:58:29 -06:00
Alex YaroshukandGitHub	984518b1c0	fix(app): restore external link opening in system browser (#10697 )	2026-01-26 10:57:49 -06:00
Sam HuckabyandGitHub	7fcdbd155b	fix(app): Order themes alphabetically (#10698 )	2026-01-26 10:55:43 -06:00
Ryan VogelandGitHub	5856ea4e75	fix: move changelog footer outside content div to fix padding (#10712 )	2026-01-26 11:46:56 -05:00
Github Action	32a0dcedcb	chore: update nix node_modules hashes	2026-01-26 16:21:24 +00:00
Sebastian Herrlinger	f48784d152	upgrade opentui to v0.1.75	2026-01-26 11:17:26 -05:00