chore: update nix node_modules hashes

# Conflicts:
#	packages/tui/test/keymap.test.tsx

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-RFek0QoEEjsgbqmTE/SxQAmPtYyzs0IPR2ugFn5Okrs=",
-    "aarch64-linux": "sha256-BmAxapY1YrAFn7mVq3/6A9+6Au5UIvSqBboHMkyJH3I=",
-    "aarch64-darwin": "sha256-Sx3bGWQqLlgoa/RudJxanjSzhFRNklckT2ffnO2I5F4=",
-    "x86_64-darwin": "sha256-CMOhiisHNowg06qadvgg4K+60zrynglwiT0qKYQ4NiA="
+    "x86_64-linux": "sha256-TJg4wSxeEUqsmSjVt5kGmygCzKISN0uhk+HXDNMqWZw=",
+    "aarch64-linux": "sha256-W1hM9pmrIFJafrbNlV4anP+j1xEBBGSYpvMyW7Kdx5k=",
+    "aarch64-darwin": "sha256-EVhn24RmSNth2J0UzkvbuHfd9fliHzb6al7p3RJWYF8=",
+    "x86_64-darwin": "sha256-r9kxGH3Sl/BDWZao6yuJhsltlMIZ0q25NdLSyLQi9HI="
   }
 }

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

@@ -88,7 +88,7 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
                   class="w-full"
                   placement="right-start"
                   gutter={6}
-                  openDelay={0}
+                  delay="intent"
                   contentStyle={{ "font-family": "var(--v2-font-family-sans)" }}
                   value={
                     <ModelTooltip

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

@@ -460,7 +460,7 @@ function ModelSelectorPopoverV2View(props: {
                               class="w-full"
                               placement="right-start"
                               gutter={6}
-                              openDelay={0}
+                              delay="intent"
                               value={
                                 <ModelTooltip
                                   model={item}

packages/app/src/components/prompt-input/context-items.tsx

@@ -47,7 +47,7 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
                   </span>
                 }
                 placement="top"
-                openDelay={800}
+                {...(!props.newLayoutDesigns ? { openDelay: 800 } : {})}
               >
                 <div
                   classList={{

packages/app/src/components/prompt-input/image-attachments.tsx

@@ -52,12 +52,7 @@ export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (p
             <For each={props.comments ?? []}>
               {(item) => (
                 <div class="relative group shrink-0">
-                  <TooltipV2
-                    value={item.comment}
-                    placement="top"
-                    openDelay={800}
-                    contentClass="max-w-[300px] break-words"
-                  >
+                  <TooltipV2 value={item.comment} placement="top" contentClass="max-w-[300px] break-words">
                     <CommentCardV2
                       comment={item.comment ?? ""}
                       path={item.path}

packages/app/src/components/settings-v2/general-controller-behavior.ts

@@ -0,0 +1,70 @@
+import { onCleanup } from "solid-js"
+
+export type ShellOption = {
+  path: string
+  name: string
+  acceptable: boolean
+}
+
+export type ShellSelectOption = {
+  id: string
+  value: string
+  name: string
+  terminalOnly: boolean
+}
+
+export function createShellOptions(input: { shells: ShellOption[]; current: string | undefined }) {
+  const counts = input.shells.reduce((result, shell) => {
+    result.set(shell.name, (result.get(shell.name) ?? 0) + 1)
+    return result
+  }, new Map<string, number>())
+  const options: ShellSelectOption[] = [
+    { id: "auto", value: "", name: "", terminalOnly: false },
+    ...input.shells.map((shell) => {
+      const ambiguous = (counts.get(shell.name) ?? 0) > 1
+      const name = ambiguous ? shell.path : shell.name
+      return {
+        id: shell.path,
+        value: ambiguous ? shell.path : shell.name,
+        name,
+        terminalOnly: !shell.acceptable,
+      }
+    }),
+  ]
+  if (input.current && !options.some((option) => option.value === input.current)) {
+    options.push({ id: input.current, value: input.current, name: input.current, terminalOnly: false })
+  }
+  return options
+}
+
+export function createSoundPreviewController(player: (id: string | undefined) => Promise<(() => void) | undefined>) {
+  let cleanup: (() => void) | undefined
+  let timeout: ReturnType<typeof setTimeout> | undefined
+  let run = 0
+
+  const stop = () => {
+    run += 1
+    cleanup?.()
+    clearTimeout(timeout)
+    cleanup = undefined
+    timeout = undefined
+  }
+  const play = (id: string | undefined) => {
+    stop()
+    if (!id) return
+    const current = ++run
+    timeout = setTimeout(() => {
+      timeout = undefined
+      void player(id).then((next) => {
+        if (run === current) {
+          cleanup = next
+          return
+        }
+        next?.()
+      })
+    }, 100)
+  }
+
+  onCleanup(stop)
+  return { play, stop }
+}

packages/app/src/components/settings-v2/general-controllers.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, test, vi } from "bun:test"
+import { createRoot } from "solid-js"
+import { createShellOptions, createSoundPreviewController } from "./general-controller-behavior"
+
+describe("settings v2 controllers", () => {
+  test("normalizes shell names and preserves an unavailable configured shell", () => {
+    expect(
+      createShellOptions({
+        shells: [
+          { path: "/bin/bash", name: "bash", acceptable: true },
+          { path: "/opt/bash", name: "bash", acceptable: false },
+          { path: "/bin/zsh", name: "zsh", acceptable: true },
+        ],
+        current: "fish",
+      }),
+    ).toEqual([
+      { id: "auto", value: "", name: "", terminalOnly: false },
+      { id: "/bin/bash", value: "/bin/bash", name: "/bin/bash", terminalOnly: false },
+      { id: "/opt/bash", value: "/opt/bash", name: "/opt/bash", terminalOnly: true },
+      { id: "/bin/zsh", value: "zsh", name: "zsh", terminalOnly: false },
+      { id: "fish", value: "fish", name: "fish", terminalOnly: false },
+    ])
+  })
+
+  test("debounces previews and stops owned audio on disposal", async () => {
+    vi.useFakeTimers()
+    try {
+      const played: string[] = []
+      const stopped: string[] = []
+      const owned = createRoot((dispose) => ({
+        dispose,
+        preview: createSoundPreviewController(async (id) => {
+          played.push(id ?? "")
+          return () => stopped.push(id ?? "")
+        }),
+      }))
+
+      owned.preview.play("first")
+      vi.advanceTimersByTime(99)
+      expect(played).toEqual([])
+
+      owned.preview.play("second")
+      vi.advanceTimersByTime(100)
+      await Promise.resolve()
+      expect(played).toEqual(["second"])
+
+      owned.dispose()
+      expect(stopped).toEqual(["second"])
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})

packages/app/src/components/settings-v2/general-controllers.ts

@@ -0,0 +1,173 @@
+import { createMemo, createResource, onMount, type Accessor } from "solid-js"
+import type { ColorScheme } from "@opencode-ai/ui/theme/context"
+import { useTheme } from "@opencode-ai/ui/theme/context"
+import { usePermission } from "@/context/permission"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import {
+  monoDefault,
+  monoFontFamily,
+  monoInput,
+  sansDefault,
+  sansFontFamily,
+  sansInput,
+  terminalDefault,
+  terminalFontFamily,
+  terminalInput,
+  useSettings,
+} from "@/context/settings"
+import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
+import { createSoundPreviewController, type ShellOption } from "./general-controller-behavior"
+
+export { createShellOptions, createSoundPreviewController } from "./general-controller-behavior"
+export type { ShellOption, ShellSelectOption } from "./general-controller-behavior"
+
+export function createPermissionScopeController(sessionID: Accessor<string | undefined>) {
+  const permission = usePermission()
+  const serverSync = useServerSync()
+  const directory = createMemo(() => {
+    const id = sessionID()
+    if (!id) return undefined
+    return serverSync().session.lineage.peek(id)?.session.directory
+  })
+
+  return {
+    accepting: createMemo(() => {
+      const id = sessionID()
+      const dir = directory()
+      if (!id || !dir) return false
+      return permission.isAutoAccepting(id, dir)
+    }),
+    enabled: createMemo(() => !!directory()),
+    set: (checked: boolean) => {
+      const id = sessionID()
+      const dir = directory()
+      if (!id || !dir) return
+      if (checked) return permission.enableAutoAccept(id, dir)
+      permission.disableAutoAccept(id, dir)
+    },
+  }
+}
+
+export function createShellSettingsController() {
+  const serverSdk = useServerSDK()
+  const serverSync = useServerSync()
+  const [shells] = createResource(
+    async () => {
+      const sdk = serverSdk()
+      if ((await sdk.protocol) === "v1") return (await sdk.client.pty.shells()).data ?? []
+      return [] as ShellOption[]
+    },
+    { initialValue: [] as ShellOption[] },
+  )
+  const current = createMemo(() => serverSync().data.config.shell ?? "")
+
+  return {
+    shells: () => shells.latest,
+    current,
+    select: (value: string) => {
+      if (value === current()) return
+      void serverSync().updateConfig({ shell: value })
+    },
+  }
+}
+
+export function createAppearanceSettingsController() {
+  const settings = useSettings()
+  const theme = useTheme()
+  const themes = createMemo(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
+
+  onMount(() => void theme.loadThemes())
+
+  return {
+    scheme: {
+      current: theme.colorScheme,
+      select: (value: ColorScheme) => theme.setColorScheme(value),
+    },
+    theme: {
+      options: themes,
+      current: createMemo(() => themes().find((option) => option.id === theme.themeId())),
+      select: (option: { id: string } | null) => option && theme.setTheme(option.id),
+    },
+    fonts: {
+      ui: createMemo(() => ({
+        value: sansInput(settings.appearance.uiFont()),
+        family: sansFontFamily(settings.appearance.uiFont()),
+        placeholder: sansDefault,
+      })),
+      code: createMemo(() => ({
+        value: monoInput(settings.appearance.font()),
+        family: monoFontFamily(settings.appearance.font()),
+        placeholder: monoDefault,
+      })),
+      terminal: createMemo(() => ({
+        value: terminalInput(settings.appearance.terminalFont()),
+        family: terminalFontFamily(settings.appearance.terminalFont()),
+        placeholder: terminalDefault,
+      })),
+      setUI: (value: string) => settings.appearance.setUIFont(value),
+      setCode: (value: string) => settings.appearance.setFont(value),
+      setTerminal: (value: string) => settings.appearance.setTerminalFont(value),
+    },
+  }
+}
+
+const noneSound = { id: "none", label: "sound.option.none" } as const
+export const soundOptions = [noneSound, ...SOUND_OPTIONS]
+export type SoundSelectOption = (typeof soundOptions)[number]
+
+export function createSoundSettingsController() {
+  const settings = useSettings()
+  const preview = createSoundPreviewController(playSoundById)
+  const channel = (
+    enabled: Accessor<boolean>,
+    current: Accessor<string>,
+    setEnabled: (value: boolean) => void,
+    set: (id: string) => void,
+  ) => ({
+    current: createMemo(() =>
+      enabled() ? (soundOptions.find((option) => option.id === current()) ?? noneSound) : noneSound,
+    ),
+    highlight: (option: SoundSelectOption | undefined) => {
+      if (!option) return
+      preview.play(option.id === "none" ? undefined : option.id)
+    },
+    select: (option: SoundSelectOption | null) => {
+      if (!option) return
+      if (option.id === "none") {
+        setEnabled(false)
+        preview.stop()
+        return
+      }
+      setEnabled(true)
+      set(option.id)
+      preview.play(option.id)
+    },
+  })
+
+  return {
+    agent: channel(
+      settings.sounds.agentEnabled,
+      settings.sounds.agent,
+      (value) => settings.sounds.setAgentEnabled(value),
+      (id) => settings.sounds.setAgent(id),
+    ),
+    permissions: channel(
+      settings.sounds.permissionsEnabled,
+      settings.sounds.permissions,
+      (value) => settings.sounds.setPermissionsEnabled(value),
+      (id) => settings.sounds.setPermissions(id),
+    ),
+    errors: channel(
+      settings.sounds.errorsEnabled,
+      settings.sounds.errors,
+      (value) => settings.sounds.setErrorsEnabled(value),
+      (id) => settings.sounds.setErrors(id),
+    ),
+  }
+}
+
+export type PermissionScopeController = ReturnType<typeof createPermissionScopeController>
+export type ShellSettingsController = ReturnType<typeof createShellSettingsController>
+export type AppearanceSettingsController = ReturnType<typeof createAppearanceSettingsController>
+export type SoundSettingsController = ReturnType<typeof createSoundSettingsController>

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

@@ -1,182 +1,297 @@
-import { Component, Show, createMemo, createResource, onMount } from "solid-js"
+import { Component, Show, createMemo, createResource } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { Switch } from "@opencode-ai/ui/v2/switch-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
-import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
-import { usePermission } from "@/context/permission"
 import { usePlatform } from "@/context/platform"
-import { useServerSync } from "@/context/server-sync"
-import { useServerSDK } from "@/context/server-sdk"
 import { useUpdaterAction } from "../updater-action"
-import {
-  monoDefault,
-  monoFontFamily,
-  monoInput,
-  sansDefault,
-  sansFontFamily,
-  sansInput,
-  terminalDefault,
-  terminalFontFamily,
-  terminalInput,
-  useSettings,
-} from "@/context/settings"
-import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
+import { useSettings } from "@/context/settings"
 import { Link } from "../link"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
 import { LayoutRetirementNotice, LayoutTransitionToggle } from "./interface-transition"
+import {
+  createAppearanceSettingsController,
+  createPermissionScopeController,
+  createShellOptions,
+  createShellSettingsController,
+  createSoundSettingsController,
+  soundOptions,
+  type AppearanceSettingsController,
+  type PermissionScopeController,
+  type ShellSettingsController,
+  type SoundSettingsController,
+} from "./general-controllers"
 import "./settings-v2.css"
 
-let demoSoundState = {
-  cleanup: undefined as (() => void) | undefined,
-  timeout: undefined as NodeJS.Timeout | undefined,
-  run: 0,
+const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
+const fontSettings = {
+  ui: {
+    action: "settings-ui-font",
+    title: "settings.general.row.uiFont.title",
+    description: "settings.general.row.uiFont.description",
+    font: "ui",
+    input: "setUI",
+  },
+  code: {
+    action: "settings-code-font",
+    title: "settings.general.row.font.title",
+    description: "settings.general.row.font.description",
+    font: "code",
+    input: "setCode",
+  },
+  terminal: {
+    action: "settings-terminal-font",
+    title: "settings.general.row.terminalFont.title",
+    description: "settings.general.row.terminalFont.description",
+    font: "terminal",
+    input: "setTerminal",
+  },
+} as const
+const soundSettings = {
+  agent: {
+    action: "settings-sounds-agent",
+    title: "settings.general.sounds.agent.title",
+    description: "settings.general.sounds.agent.description",
+  },
+  permissions: {
+    action: "settings-sounds-permissions",
+    title: "settings.general.sounds.permissions.title",
+    description: "settings.general.sounds.permissions.description",
+  },
+  errors: {
+    action: "settings-sounds-errors",
+    title: "settings.general.sounds.errors.title",
+    description: "settings.general.sounds.errors.description",
+  },
+} as const
+
+const PermissionScopeSetting: Component<{ controller: PermissionScopeController }> = (props) => {
+  const language = useLanguage()
+  return (
+    <SettingsRowV2
+      title={language.t("command.permissions.autoaccept.enable")}
+      description={language.t("toast.permissions.autoaccept.on.description")}
+    >
+      <div data-action="settings-auto-accept-permissions">
+        <Switch
+          checked={props.controller.accepting()}
+          disabled={!props.controller.enabled()}
+          onChange={props.controller.set}
+        />
+      </div>
+    </SettingsRowV2>
+  )
 }
 
-type ThemeOption = {
-  id: string
-  name: string
+const ShellSetting: Component<{ controller: ShellSettingsController }> = (props) => {
+  const language = useLanguage()
+  const options = createMemo(() =>
+    createShellOptions({
+      shells: props.controller.shells(),
+      current: props.controller.current(),
+    }),
+  )
+  return (
+    <SettingsRowV2
+      title={language.t("settings.general.row.shell.title")}
+      description={language.t("settings.general.row.shell.description")}
+    >
+      <SelectV2
+        appearance="inline"
+        data-action="settings-shell"
+        options={options()}
+        current={options().find((option) => option.value === props.controller.current()) ?? options()[0]}
+        placement="bottom-end"
+        gutter={6}
+        value={(option) => option.id}
+        label={(option) => {
+          if (option.id === "auto") return language.t("settings.general.row.shell.autoDefault")
+          if (!option.terminalOnly) return option.name
+          return `${option.name} (${language.t("settings.general.row.shell.terminalOnly")})`
+        }}
+        onSelect={(option) => option && props.controller.select(option.value)}
+      />
+    </SettingsRowV2>
+  )
 }
 
-type ShellOption = {
-  path: string
-  name: string
-  acceptable: boolean
+const AppearanceSection: Component<{ controller: AppearanceSettingsController }> = (props) => {
+  const language = useLanguage()
+  return (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.appearance")}</h3>
+      <SettingsListV2>
+        <SettingsRowV2
+          title={language.t("settings.general.row.colorScheme.title")}
+          description={language.t("settings.general.row.colorScheme.description")}
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-color-scheme"
+            options={schemeOptions}
+            current={schemeOptions.find((option) => option === props.controller.scheme.current())}
+            placement="bottom-end"
+            gutter={6}
+            label={(option) => {
+              if (option === "system") return language.t("theme.scheme.system")
+              if (option === "light") return language.t("theme.scheme.light")
+              return language.t("theme.scheme.dark")
+            }}
+            onSelect={(option) => option && props.controller.scheme.select(option)}
+          />
+        </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.theme.title")}
+          description={
+            <>
+              {language.t("settings.general.row.theme.description")}{" "}
+              <Link class="settings-v2-link" href="https://opencode.ai/docs/themes/">
+                {language.t("common.learnMore")}
+              </Link>
+            </>
+          }
+        >
+          <SelectV2
+            appearance="inline"
+            data-action="settings-theme"
+            options={props.controller.theme.options()}
+            current={props.controller.theme.current()}
+            placement="bottom-end"
+            gutter={6}
+            value={(option) => option.id}
+            label={(option) => option.name}
+            onSelect={props.controller.theme.select}
+          />
+        </SettingsRowV2>
+
+        <FontSetting kind="ui" fonts={props.controller.fonts} />
+        <FontSetting kind="code" fonts={props.controller.fonts} />
+        <FontSetting kind="terminal" fonts={props.controller.fonts} />
+      </SettingsListV2>
+    </div>
+  )
 }
 
-type ShellSelectOption = {
-  id: string
-  value: string
-  label: string
+const FontSetting: Component<{
+  kind: "ui" | "code" | "terminal"
+  fonts: AppearanceSettingsController["fonts"]
+}> = (props) => {
+  const language = useLanguage()
+  const config = () => fontSettings[props.kind]
+  return (
+    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
+      <div class="w-full sm:w-[220px]">
+        <TextInputV2
+          data-action={config().action}
+          type="text"
+          appearance="base"
+          value={props.fonts[config().font]().value}
+          onInput={(event) => props.fonts[config().input](event.currentTarget.value)}
+          placeholder={props.fonts[config().font]().placeholder}
+          spellcheck={false}
+          autocorrect="off"
+          autocomplete="off"
+          autocapitalize="off"
+          aria-label={language.t(config().title)}
+          style={{ "font-family": props.fonts[config().font]().family }}
+        />
+      </div>
+    </SettingsRowV2>
+  )
 }
 
-// To prevent audio from overlapping/playing very quickly when navigating the settings menus,
-// delay the playback by 100ms during quick selection changes and pause existing sounds.
-const stopDemoSound = () => {
-  demoSoundState.run += 1
-  if (demoSoundState.cleanup) {
-    demoSoundState.cleanup()
-  }
-  clearTimeout(demoSoundState.timeout)
-  demoSoundState.cleanup = undefined
+const SoundsSection: Component<{ controller: SoundSettingsController }> = (props) => {
+  const language = useLanguage()
+  return (
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
+      <SettingsListV2>
+        <SoundSetting kind="agent" channel={props.controller.agent} />
+        <SoundSetting kind="permissions" channel={props.controller.permissions} />
+        <SoundSetting kind="errors" channel={props.controller.errors} />
+      </SettingsListV2>
+    </div>
+  )
 }
 
-const playDemoSound = (id: string | undefined) => {
-  stopDemoSound()
-  if (!id) return
+const SoundSetting: Component<{
+  kind: "agent" | "permissions" | "errors"
+  channel: SoundSettingsController["agent"]
+}> = (props) => {
+  const language = useLanguage()
+  const config = () => soundSettings[props.kind]
+  return (
+    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
+      <SelectV2
+        appearance="inline"
+        data-action={config().action}
+        options={soundOptions}
+        current={props.channel.current()}
+        value={(option) => option.id}
+        label={(option) => language.t(option.label)}
+        onHighlight={props.channel.highlight}
+        onSelect={props.channel.select}
+        placement="bottom-end"
+        gutter={6}
+      />
+    </SettingsRowV2>
+  )
+}
 
-  const run = ++demoSoundState.run
-  demoSoundState.timeout = setTimeout(() => {
-    void playSoundById(id).then((cleanup) => {
-      if (demoSoundState.run !== run) {
-        cleanup?.()
-        return
-      }
-      demoSoundState.cleanup = cleanup
-    })
-  }, 100)
+const LanguageSetting = () => {
+  const language = useLanguage()
+  const options = createMemo(() =>
+    language.locales.map((locale) => ({
+      value: locale,
+      label: language.label(locale),
+    })),
+  )
+  return (
+    <SettingsRowV2
+      title={language.t("settings.general.row.language.title")}
+      description={language.t("settings.general.row.language.description")}
+    >
+      <SelectV2
+        appearance="inline"
+        data-action="settings-language"
+        options={options()}
+        placement="bottom-end"
+        gutter={6}
+        current={options().find((option) => option.value === language.locale())}
+        value={(option) => option.value}
+        label={(option) => option.label}
+        onSelect={(option) => option && language.setLocale(option.value)}
+      />
+    </SettingsRowV2>
+  )
 }
 
 export const SettingsGeneralV2: Component<{
   sessionID?: string
 }> = (props) => {
-  const theme = useTheme()
   const language = useLanguage()
-  const permission = usePermission()
   const platform = usePlatform()
   const dialog = useDialog()
   const settings = useSettings()
-  const serverSync = useServerSync()
-  const serverSdk = useServerSDK()
   const mobile = createMediaQuery("(max-width: 767px)")
-
   const updater = useUpdaterAction()
-
-  const dir = createMemo(() => {
-    if (!props.sessionID) return undefined
-    return serverSync().session.lineage.peek(props.sessionID)?.session.directory
-  })
-  const accepting = createMemo(() => {
-    const value = dir()
-    if (!value || !props.sessionID) return false
-    return permission.isAutoAccepting(props.sessionID, value)
-  })
-
-  const toggleAccept = (checked: boolean) => {
-    const value = dir()
-    if (!value || !props.sessionID) return
-
-    if (checked) {
-      permission.enableAutoAccept(props.sessionID, value)
-      return
-    }
-
-    permission.disableAutoAccept(props.sessionID, value)
-  }
+  const permissionScope = createPermissionScopeController(() => props.sessionID)
+  const shell = createShellSettingsController()
+  const appearance = createAppearanceSettingsController()
+  const sounds = createSoundSettingsController()
   const desktop = createMemo(() => platform.platform === "desktop")
 
-  const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
-
-  const [shells] = createResource(
-    async () => {
-      const sdk = serverSdk()
-      if ((await sdk.protocol) === "v1") {
-        return (await sdk.client.pty.shells()).data ?? []
-      }
-      // return (await sdk.api.pty.shells()).data
-      return [] as ShellOption[]
-    },
-    { initialValue: [] as ShellOption[] },
-  )
-
   const [pinchZoom, { mutate: setPinchZoom }] = createResource(
-    () => (desktop() && platform.getPinchZoomEnabled ? true : false),
+    () => desktop() && "getPinchZoomEnabled" in platform,
     () => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
     { initialValue: false },
   )
 
-  onMount(() => {
-    void theme.loadThemes()
-  })
-
-  const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") }
-  const currentShell = createMemo(() => serverSync().data.config.shell ?? "")
-
-  const shellOptions = createMemo<ShellSelectOption[]>(() => {
-    const list = shells.latest
-    const current = serverSync().data.config.shell
-
-    const nameCounts = new Map<string, number>()
-    for (const s of list) {
-      nameCounts.set(s.name, (nameCounts.get(s.name) || 0) + 1)
-    }
-
-    const options = [
-      autoOption,
-      ...list.map((s) => {
-        const ambiguousName = (nameCounts.get(s.name) || 0) > 1
-        const text = ambiguousName ? s.path : s.name
-        const label = s.acceptable ? text : `${text} (${language.t("settings.general.row.shell.terminalOnly")})`
-        return {
-          id: s.path,
-          // Prefer name over path - "bash" is much cleaner than the explicit full route even when it may change due to PATH.
-          value: ambiguousName ? s.path : s.name,
-          label,
-        }
-      }),
-    ]
-
-    if (current && !options.some((o) => o.value === current)) {
-      options.push({ id: current, value: current, label: current })
-    }
-
-    return options
-  })
-
   const onPinchZoomChange = (checked: boolean) => {
     setPinchZoom(checked)
     const update = platform.setPinchZoomEnabled?.(checked)
@@ -184,52 +299,6 @@ export const SettingsGeneralV2: Component<{
     void update.catch(() => setPinchZoom(!checked))
   }
 
-  const colorSchemeOptions = createMemo((): { value: ColorScheme; label: string }[] => [
-    { value: "system", label: language.t("theme.scheme.system") },
-    { value: "light", label: language.t("theme.scheme.light") },
-    { value: "dark", label: language.t("theme.scheme.dark") },
-  ])
-
-  const languageOptions = createMemo(() =>
-    language.locales.map((locale) => ({
-      value: locale,
-      label: language.label(locale),
-    })),
-  )
-
-  const noneSound = { id: "none", label: "sound.option.none" } as const
-  const soundOptions = [noneSound, ...SOUND_OPTIONS]
-  const mono = () => monoInput(settings.appearance.font())
-  const sans = () => sansInput(settings.appearance.uiFont())
-  const terminal = () => terminalInput(settings.appearance.terminalFont())
-
-  const soundSelectProps = (
-    enabled: () => boolean,
-    current: () => string,
-    setEnabled: (value: boolean) => void,
-    set: (id: string) => void,
-  ) => ({
-    options: soundOptions,
-    current: enabled() ? (soundOptions.find((o) => o.id === current()) ?? noneSound) : noneSound,
-    value: (o: (typeof soundOptions)[number]) => o.id,
-    label: (o: (typeof soundOptions)[number]) => language.t(o.label),
-    onHighlight: (option: (typeof soundOptions)[number] | undefined) => {
-      if (!option) return
-      playDemoSound(option.id === "none" ? undefined : option.id)
-    },
-    onSelect: (option: (typeof soundOptions)[number] | null) => {
-      if (!option) return
-      if (option.id === "none") {
-        setEnabled(false)
-        stopDemoSound()
-        return
-      }
-      setEnabled(true)
-      set(option.id)
-      playDemoSound(option.id)
-    },
-  })
-
   const InterfaceSection = () => (
     <LayoutTransitionToggle
       title={language.t("settings.general.row.newInterface.title")}
@@ -251,59 +320,18 @@ export const SettingsGeneralV2: Component<{
       title={language.t("settings.general.row.newInterfaceNotice.title")}
       description={language.t("settings.general.row.newInterfaceNotice.description")}
       dismiss={language.t("settings.general.row.newInterfaceNotice.dismiss")}
-      onDismiss={settings.general.dismissNewInterfaceNotice}
+      onDismiss={() => settings.general.dismissNewInterfaceNotice()}
     />
   )
 
   const GeneralSection = () => (
     <div class="settings-v2-section">
       <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.row.language.title")}
-          description={language.t("settings.general.row.language.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-language"
-            options={languageOptions()}
-            placement="bottom-end"
-            gutter={6}
-            current={languageOptions().find((o) => o.value === language.locale())}
-            value={(o) => o.value}
-            label={(o) => o.label}
-            onSelect={(option) => option && language.setLocale(option.value)}
-          />
-        </SettingsRowV2>
+        <LanguageSetting />
 
-        <SettingsRowV2
-          title={language.t("command.permissions.autoaccept.enable")}
-          description={language.t("toast.permissions.autoaccept.on.description")}
-        >
-          <div data-action="settings-auto-accept-permissions">
-            <Switch checked={accepting()} disabled={!dir()} onChange={toggleAccept} />
-          </div>
-        </SettingsRowV2>
+        <PermissionScopeSetting controller={permissionScope} />
 
-        <SettingsRowV2
-          title={language.t("settings.general.row.shell.title")}
-          description={language.t("settings.general.row.shell.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-shell"
-            options={shellOptions()}
-            current={shellOptions().find((o) => o.value === currentShell()) ?? autoOption}
-            placement="bottom-end"
-            gutter={6}
-            value={(o) => o.id}
-            label={(o) => o.label}
-            onSelect={(option) => {
-              if (!option) return
-              if (option.value === currentShell()) return
-              serverSync().updateConfig({ shell: option.value })
-            }}
-          />
-        </SettingsRowV2>
+        <ShellSetting controller={shell} />
 
         <SettingsRowV2
           title={language.t("settings.general.row.reasoningSummaries.title")}
@@ -414,124 +442,6 @@ export const SettingsGeneralV2: Component<{
     </div>
   )
 
-  const AppearanceSection = () => (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.appearance")}</h3>
-
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.row.colorScheme.title")}
-          description={language.t("settings.general.row.colorScheme.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-color-scheme"
-            options={colorSchemeOptions()}
-            current={colorSchemeOptions().find((o) => o.value === theme.colorScheme())}
-            placement="bottom-end"
-            gutter={6}
-            value={(o) => o.value}
-            label={(o) => o.label}
-            onSelect={(option) => option && theme.setColorScheme(option.value)}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.theme.title")}
-          description={
-            <>
-              {language.t("settings.general.row.theme.description")}{" "}
-              <Link class="settings-v2-link" href="https://opencode.ai/docs/themes/">
-                {language.t("common.learnMore")}
-              </Link>
-            </>
-          }
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-theme"
-            options={themeOptions()}
-            current={themeOptions().find((o) => o.id === theme.themeId())}
-            placement="bottom-end"
-            gutter={6}
-            value={(o) => o.id}
-            label={(o) => o.name}
-            onSelect={(option) => {
-              if (!option) return
-              theme.setTheme(option.id)
-            }}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.uiFont.title")}
-          description={language.t("settings.general.row.uiFont.description")}
-        >
-          <div class="w-full sm:w-[220px]">
-            <TextInputV2
-              data-action="settings-ui-font"
-              type="text"
-              appearance="base"
-              value={sans()}
-              onInput={(event) => settings.appearance.setUIFont(event.currentTarget.value)}
-              placeholder={sansDefault}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              aria-label={language.t("settings.general.row.uiFont.title")}
-              style={{ "font-family": sansFontFamily(settings.appearance.uiFont()) }}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.font.title")}
-          description={language.t("settings.general.row.font.description")}
-        >
-          <div class="w-full sm:w-[220px]">
-            <TextInputV2
-              data-action="settings-code-font"
-              type="text"
-              appearance="base"
-              value={mono()}
-              onInput={(event) => settings.appearance.setFont(event.currentTarget.value)}
-              placeholder={monoDefault}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              aria-label={language.t("settings.general.row.font.title")}
-              style={{ "font-family": monoFontFamily(settings.appearance.font()) }}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.terminalFont.title")}
-          description={language.t("settings.general.row.terminalFont.description")}
-        >
-          <div class="w-full sm:w-[220px]">
-            <TextInputV2
-              data-action="settings-terminal-font"
-              type="text"
-              appearance="base"
-              value={terminal()}
-              onInput={(event) => settings.appearance.setTerminalFont(event.currentTarget.value)}
-              placeholder={terminalDefault}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              aria-label={language.t("settings.general.row.terminalFont.title")}
-              style={{ "font-family": terminalFontFamily(settings.appearance.terminalFont()) }}
-            />
-          </div>
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
   const NotificationsSection = () => (
     <div class="settings-v2-section">
       <h3 class="settings-v2-section-title">{language.t("settings.general.section.notifications")}</h3>
@@ -576,68 +486,6 @@ export const SettingsGeneralV2: Component<{
     </div>
   )
 
-  const SoundsSection = () => (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
-
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.sounds.agent.title")}
-          description={language.t("settings.general.sounds.agent.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-sounds-agent"
-            {...soundSelectProps(
-              () => settings.sounds.agentEnabled(),
-              () => settings.sounds.agent(),
-              (value) => settings.sounds.setAgentEnabled(value),
-              (id) => settings.sounds.setAgent(id),
-            )}
-            placement="bottom-end"
-            gutter={6}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.sounds.permissions.title")}
-          description={language.t("settings.general.sounds.permissions.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-sounds-permissions"
-            {...soundSelectProps(
-              () => settings.sounds.permissionsEnabled(),
-              () => settings.sounds.permissions(),
-              (value) => settings.sounds.setPermissionsEnabled(value),
-              (id) => settings.sounds.setPermissions(id),
-            )}
-            placement="bottom-end"
-            gutter={6}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.sounds.errors.title")}
-          description={language.t("settings.general.sounds.errors.description")}
-        >
-          <SelectV2
-            appearance="inline"
-            data-action="settings-sounds-errors"
-            {...soundSelectProps(
-              () => settings.sounds.errorsEnabled(),
-              () => settings.sounds.errors(),
-              (value) => settings.sounds.setErrorsEnabled(value),
-              (id) => settings.sounds.setErrors(id),
-            )}
-            placement="bottom-end"
-            gutter={6}
-          />
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
   const UpdatesSection = () => (
     <div class="settings-v2-section">
       <h3 class="settings-v2-section-title">{language.t("settings.general.section.updates")}</h3>
@@ -659,7 +507,7 @@ export const SettingsGeneralV2: Component<{
           title={language.t("settings.updates.row.check.title")}
           description={language.t("settings.updates.row.check.description")}
         >
-          <ButtonV2 size="normal" variant="neutral" disabled={!updater.action().run} onClick={updater.run}>
+          <ButtonV2 size="normal" variant="neutral" disabled={!updater.action().run} onClick={() => updater.run()}>
             {language.t(updater.action().label)}
           </ButtonV2>
         </SettingsRowV2>
@@ -704,11 +552,11 @@ export const SettingsGeneralV2: Component<{
 
         <GeneralSection />
 
-        <AppearanceSection />
+        <AppearanceSection controller={appearance} />
 
         <NotificationsSection />
 
-        <SoundsSection />
+        <SoundsSection controller={sounds} />
 
         <Show when={desktop()}>
           <UpdatesSection />

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

@@ -5,9 +5,12 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { type Component, For, Show } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import { useModels } from "@/context/models"
+import { useServerSDK } from "@/context/server-sdk"
 import { popularProviders } from "@/hooks/use-providers"
+import { Persist, persisted } from "@/utils/persist"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
 import "./settings-v2.css"
@@ -19,6 +22,11 @@ const PROVIDER_ICON_SIZE = 16
 export const SettingsModelsV2: Component = () => {
   const language = useLanguage()
   const models = useModels()
+  const serverSdk = useServerSDK()
+  const [store, setStore] = persisted(
+    Persist.serverGlobal(serverSdk().scope, "settings-v2.models.providers"),
+    createStore({ collapsed: {} as Record<string, boolean> }),
+  )
 
   const list = useFilteredList<ModelItem>({
     items: (_filter) => models.list(),
@@ -94,41 +102,82 @@ export const SettingsModelsV2: Component = () => {
             }
           >
             <For each={list.grouped.latest}>
-              {(group) => (
-                <div class="settings-v2-section" data-component="settings-models-provider">
-                  <div class="settings-v2-models-group-header">
-                    <ProviderIcon
-                      id={group.category}
-                      width={PROVIDER_ICON_SIZE}
-                      height={PROVIDER_ICON_SIZE}
-                      class="settings-v2-models-provider-icon shrink-0"
-                    />
-                    <h3 class="settings-v2-section-title">{group.items[0].provider.name}</h3>
+              {(group) => {
+                const searching = () => list.filter().length > 0
+                const expanded = () => searching() || !store.collapsed[group.category]
+
+                return (
+                  <div
+                    class="settings-v2-section"
+                    data-component="settings-models-provider"
+                    data-expanded={expanded() ? "" : undefined}
+                  >
+                    <h3 class="settings-v2-models-group-header">
+                      <button
+                        type="button"
+                        class="settings-v2-models-group-trigger"
+                        aria-expanded={expanded()}
+                        disabled={searching()}
+                        onClick={() => setStore("collapsed", group.category, expanded())}
+                      >
+                        <span class="settings-v2-models-group-chevron">
+                          <Show
+                            when={expanded()}
+                            fallback={
+                              <svg width="5" height="6" viewBox="0 0 5 6" fill="none" aria-hidden="true">
+                                <path
+                                  d="M0.75194 5.31663C0.41861 5.51103 0 5.27063 0 4.88473V0.500754C0 0.114854 0.41861 -0.125577 0.75194 0.0688635L4.5096 2.26084C4.8404 2.45378 4.8404 2.93168 4.5096 3.12462L0.75194 5.31663Z"
+                                  fill="currentColor"
+                                />
+                              </svg>
+                            }
+                          >
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                              <path
+                                d="M5.37624 6.75194C5.18184 6.41861 5.42224 6 5.80814 6H10.1921C10.578 6 10.8184 6.41861 10.624 6.75194L8.43203 10.5096C8.23909 10.8404 7.76119 10.8404 7.56825 10.5096L5.37624 6.75194Z"
+                                fill="currentColor"
+                              />
+                            </svg>
+                          </Show>
+                        </span>
+                        <span class="settings-v2-models-group-label">
+                          <ProviderIcon
+                            id={group.category}
+                            width={PROVIDER_ICON_SIZE}
+                            height={PROVIDER_ICON_SIZE}
+                            class="settings-v2-models-provider-icon shrink-0"
+                          />
+                          <span class="settings-v2-section-title">{group.items[0].provider.name}</span>
+                        </span>
+                      </button>
+                    </h3>
+                    <Show when={expanded()}>
+                      <SettingsListV2>
+                        <For each={group.items}>
+                          {(item) => {
+                            const key = { providerID: item.provider.id, modelID: item.id }
+                            return (
+                              <SettingsRowV2 title={item.name} description="">
+                                <div>
+                                  <Switch
+                                    checked={models.visible(key)}
+                                    onChange={(checked) => {
+                                      models.setVisibility(key, checked)
+                                    }}
+                                    hideLabel
+                                  >
+                                    {item.name}
+                                  </Switch>
+                                </div>
+                              </SettingsRowV2>
+                            )
+                          }}
+                        </For>
+                      </SettingsListV2>
+                    </Show>
                   </div>
-                  <SettingsListV2>
-                    <For each={group.items}>
-                      {(item) => {
-                        const key = { providerID: item.provider.id, modelID: item.id }
-                        return (
-                          <SettingsRowV2 title={item.name} description="">
-                            <div>
-                              <Switch
-                                checked={models.visible(key)}
-                                onChange={(checked) => {
-                                  models.setVisibility(key, checked)
-                                }}
-                                hideLabel
-                              >
-                                {item.name}
-                              </Switch>
-                            </div>
-                          </SettingsRowV2>
-                        )
-                      }}
-                    </For>
-                  </SettingsListV2>
-                </div>
-              )}
+                )
+              }}
             </For>
           </Show>
         </Show>

packages/app/src/components/settings-v2/settings-v2.css

@@ -373,14 +373,64 @@
 }
 
 .settings-v2-models {
-  gap: 24px;
+  gap: 12px;
+}
+
+.settings-v2-models .settings-v2-section {
+  gap: 12px;
+}
+
+.settings-v2-models .settings-v2-section[data-expanded] {
+  padding-bottom: 12px;
 }
 
 .settings-v2-models-group-header {
+  display: flex;
+  align-items: center;
+  height: 28px;
+}
+
+.settings-v2-models-group-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 4px 8px 4px 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--v2-text-text-base);
+}
+
+.settings-v2-models-group-trigger:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2px;
+}
+
+@media (hover: hover) {
+  .settings-v2-models-group-trigger:not(:disabled):hover {
+    background-color: var(--v2-background-bg-layer-02);
+  }
+}
+
+.settings-v2-models-group-trigger:disabled {
+  cursor: default;
+}
+
+.settings-v2-models-group-chevron {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--v2-icon-icon-muted);
+}
+
+.settings-v2-models-group-label {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding-bottom: 8px;
 }
 
 .settings-v2-models .settings-v2-section-title {
@@ -394,6 +444,10 @@
   color: var(--v2-icon-icon-base);
 }
 
+.settings-v2-models [data-component="settings-v2-list"] {
+  padding-inline: 16px;
+}
+
 .settings-v2-models .settings-v2-section-title + [data-component="settings-v2-list"] {
   margin-top: 0;
 }

packages/app/src/components/titlebar.tsx

@@ -338,6 +338,22 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                   keybind: "mod+shift+t",
                   onSelect: () => tabsStoreActions.reopenClosedTab(),
                 },
+                {
+                  id: `tab.prev`,
+                  category: "tab",
+                  title: "",
+                  keybind: `mod+option+ArrowLeft,ctrl+shift+tab`,
+                  hidden: true,
+                  onSelect: tabs.previous,
+                },
+                {
+                  id: `tab.next`,
+                  category: "tab",
+                  title: "",
+                  keybind: `mod+option+ArrowRight,ctrl+tab`,
+                  hidden: true,
+                  onSelect: tabs.next,
+                },
               ].filter((v) => v !== undefined)
             })
 

packages/app/src/context/tab-history.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, test } from "bun:test"
+import { nextTab, previousTab, rememberTab, type TabHistory } from "./tab-history"
+
+function history(): TabHistory {
+  return { stack: [], index: -1 }
+}
+
+describe("tab history", () => {
+  test("moves backward and forward through selected tabs", () => {
+    const selected = ["a", "b", "c"].reduce(rememberTab, history())
+    const available = new Set(selected.stack)
+
+    const previous = previousTab(selected, available)
+    expect(previous?.key).toBe("b")
+
+    const first = previousTab(previous!.state, available)
+    expect(first?.key).toBe("a")
+
+    const next = nextTab(first!.state, available)
+    expect(next?.key).toBe("b")
+  })
+
+  test("replaces forward history after a new selection", () => {
+    const selected = ["a", "b", "c"].reduce(rememberTab, history())
+    const previous = previousTab(selected, new Set(selected.stack))
+    const next = rememberTab(previous!.state, "d")
+
+    expect(next).toEqual({ stack: ["a", "b", "d"], index: 2 })
+    expect(nextTab(next, new Set(next.stack))).toBeUndefined()
+  })
+
+  test("skips tabs that are no longer open", () => {
+    const selected = ["a", "b", "c"].reduce(rememberTab, history())
+
+    expect(previousTab(selected, new Set(["a", "c"]))?.key).toBe("a")
+  })
+
+  test("skips a repeated current tab after closing the previous selection", () => {
+    const selected = ["a", "b", "c", "b"].reduce(rememberTab, history())
+
+    expect(previousTab(selected, new Set(["a", "b"]))?.key).toBe("a")
+  })
+})

packages/app/src/context/tab-history.ts

@@ -0,0 +1,28 @@
+const MAX_TAB_HISTORY = 100
+
+export type TabHistory = {
+  stack: string[]
+  index: number
+}
+
+export function rememberTab(state: TabHistory, key: string): TabHistory {
+  if (state.stack[state.index] === key) return state
+  const stack = state.stack.slice(0, state.index + 1).concat(key).slice(-MAX_TAB_HISTORY)
+  return { stack, index: stack.length - 1 }
+}
+
+export function previousTab(state: TabHistory, available: Set<string>) {
+  return move(state, -1, available)
+}
+
+export function nextTab(state: TabHistory, available: Set<string>) {
+  return move(state, 1, available)
+}
+
+function move(state: TabHistory, offset: -1 | 1, available: Set<string>) {
+  const current = state.stack[state.index]
+  for (let index = state.index + offset; index >= 0 && index < state.stack.length; index += offset) {
+    const key = state.stack[index]
+    if (key && key !== current && available.has(key)) return { state: { ...state, index }, key }
+  }
+}

packages/app/src/context/tabs.tsx

@@ -12,6 +12,7 @@ import { sessionHref } from "@/utils/session-route"
 import { createTabMemory } from "./tab-memory"
 import { nextTabAfterClose, pushClosedTab, removeClosedTabs, takeClosedTab, type ClosedTab } from "./closed-tabs"
 import { createDraftPromptSession, type PromptModel } from "./prompt-state"
+import { nextTab, previousTab, rememberTab, type TabHistory } from "./tab-history"
 
 export type SessionTab = {
   type: "session"
@@ -79,6 +80,7 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
     const memory = createTabMemory(getOwner())
 
     const closing = new Set<string>()
+    let history: TabHistory = { stack: [], index: -1 }
     let recentWrite = 0
     let recentValue: string | undefined
 
@@ -150,10 +152,21 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
 
     const navigateTab = (tab: Tab) => {
       const href = tabHref(tab)
+      history = rememberTab(history, tabKey(tab))
       setRecentKey(tabKey(tab))
       navigate(href)
     }
 
+    const moveHistory = (direction: "previous" | "next") => {
+      const available = new Set(store.map(tabKey))
+      const result = direction === "previous" ? previousTab(history, available) : nextTab(history, available)
+      if (!result) return
+      const tab = store.find((item) => tabKey(item) === result.key)
+      if (!tab) return
+      history = result.state
+      navigateTab(tab)
+    }
+
     const removeTab = (index: number) => {
       const tab = store[index]
       if (!tab) return
@@ -359,8 +372,11 @@ export const { use: useTabs, provider: TabsProvider } = createSimpleContext({
       select: navigateTab,
       remember(tab: Tab) {
         const key = tabKey(tab)
+        history = rememberTab(history, key)
         if (recentKey() !== key) setRecentKey(key)
       },
+      previous: () => moveHistory("previous"),
+      next: () => moveHistory("next"),
       toggleHome(input: { home: boolean; current?: Tab }) {
         if (input.home) {
           const tab = store.find((tab) => tabKey(tab) === recentKey())

packages/app/src/desktop-menu.test.ts

@@ -2,6 +2,17 @@ import { describe, expect, test } from "bun:test"
 import { DESKTOP_MENU } from "./desktop-menu"
 
 describe("desktop menu", () => {
+  test("navigates between tabs", () => {
+    const items = DESKTOP_MENU.flatMap((menu) => menu.items ?? []).filter(
+      (item) => item.type === "item" && (item.label === "Previous Tab" || item.label === "Next Tab"),
+    )
+
+    expect(items).toEqual([
+      { type: "item", label: "Previous Tab", command: "tab.prev", accelerator: { macos: "Option+Up" } },
+      { type: "item", label: "Next Tab", command: "tab.next", accelerator: { macos: "Option+Down" } },
+    ])
+  })
+
   test("exports logs through the desktop command registry", () => {
     const items = DESKTOP_MENU.flatMap((menu) => menu.items ?? []).filter(
       (item) => item.type === "item" && item.label === "Export Logs...",

packages/app/src/desktop-menu.ts

@@ -168,8 +168,8 @@ export const DESKTOP_MENU: DesktopMenu[] = [
       { type: "item", label: "Back", command: "common.goBack", accelerator: { macos: "Cmd+[" } },
       { type: "item", label: "Forward", command: "common.goForward", accelerator: { macos: "Cmd+]" } },
       { type: "separator" },
-      { type: "item", label: "Previous Session", command: "session.previous", accelerator: { macos: "Option+Up" } },
-      { type: "item", label: "Next Session", command: "session.next", accelerator: { macos: "Option+Down" } },
+      { type: "item", label: "Previous Tab", command: "tab.prev", accelerator: { macos: "Option+Up" } },
+      { type: "item", label: "Next Tab", command: "tab.next", accelerator: { macos: "Option+Down" } },
       { type: "separator" },
       {
         type: "item",

packages/app/src/pages/home/home-sessions-view.tsx

@@ -1,5 +1,5 @@
 import type { Session } from "@opencode-ai/sdk/v2/client"
-import { type Accessor, createMemo, For, Show } from "solid-js"
+import { type Accessor, createMemo, For, Show, Suspense } from "solid-js"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
@@ -39,7 +39,6 @@ function isBackgroundOpen(event: MouseEvent) {
 export type HomeSessionsViewProps = {
   language: ReturnType<typeof useLanguage>
   groups: Accessor<HomeSessionGroup[]>
-  loading: Accessor<boolean>
   showProjectName: Accessor<boolean>
   server: Accessor<ServerConnection.Key>
   canCreateSession: Accessor<boolean>
@@ -81,20 +80,22 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
     >
       <div class="sticky top-0 z-30 shrink-0 bg-v2-background-bg-base pb-3 pt-6 lg:pt-12" onWheel={props.onWheel}>
         <HomeSessionSearch {...props} />
-        <Show when={props.groups().length > 0 && props.canCreateSession()}>
-          <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
-            <ButtonV2
-              data-action="home-new-session"
-              variant="ghost-muted"
-              size="normal"
-              icon="edit"
-              class="pointer-events-auto h-7 px-2 [font-weight:530]"
-              onClick={props.onCreateSession}
-            >
-              {props.language.t("command.session.new")}
-            </ButtonV2>
-          </div>
-        </Show>
+        <Suspense>
+          <Show when={props.groups().length > 0 && props.canCreateSession()}>
+            <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
+              <ButtonV2
+                data-action="home-new-session"
+                variant="ghost-muted"
+                size="normal"
+                icon="edit"
+                class="pointer-events-auto h-7 px-2 [font-weight:530]"
+                onClick={props.onCreateSession}
+              >
+                {props.language.t("command.session.new")}
+              </ButtonV2>
+            </div>
+          </Show>
+        </Suspense>
       </div>
       <div class="pointer-events-none sticky top-[84px] z-40 h-0 -mr-3 lg:top-[108px]">
         <div
@@ -104,8 +105,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
         />
       </div>
       <div class="-mr-3 min-h-[calc(100cqh-72px)] lg:min-h-[calc(100cqh-96px)]">
-        <Show
-          when={!props.loading()}
+        <Suspense
           fallback={
             <div class="pt-3">
               <HomeSessionSkeleton label={props.language.t("common.loading")} />
@@ -141,7 +141,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
               </For>
             </div>
           </Show>
-        </Show>
+        </Suspense>
       </div>
     </section>
   )

packages/app/src/pages/home/home-sessions.tsx

@@ -12,7 +12,6 @@ export function HomeSessions(props: {
     <HomeSessionsView
       language={props.sessions.copy.language}
       groups={props.sessions.data.groups}
-      loading={props.sessions.data.loading}
       showProjectName={props.sessions.session.showProjectName}
       server={props.sessions.session.server}
       canCreateSession={props.sessions.session.canCreate}

packages/app/src/pages/new-session/new-session-view.tsx

@@ -51,10 +51,7 @@ export function NewSessionView(props: {
                   <Show
                     when={props.workspace.bar.visible()}
                     fallback={
-                      <PromptGitStatus
-                        branch={props.workspace.bar.branch()}
-                        noGit={!props.workspace.project.git()}
-                      />
+                      <PromptGitStatus branch={props.workspace.bar.branch()} noGit={!props.workspace.project.git()} />
                     }
                   >
                     <PromptWorkspaceSelector
@@ -146,7 +143,7 @@ function ProviderTip() {
           <TooltipV2
             class="hover-reveal absolute left-full top-0 flex h-6 w-7 items-center justify-end delay-0 duration-0 group-hover/provider-tip:delay-[250ms] group-hover/provider-tip:duration-150 group-hover/provider-tip:opacity-100 focus-within:delay-0 focus-within:duration-0 focus-within:opacity-100"
             placement="top"
-            openDelay={1000}
+            delay="intent"
             value={language.t("common.dismiss")}
           >
             <button

packages/app/src/pages/session/timeline/controller-projection.ts

@@ -1,26 +0,0 @@
-export function timelineChildTitle(input: {
-  parentID?: string
-  taskDescription?: string
-  title?: string
-  fallback: string
-}) {
-  if (!input.parentID) return input.title ?? ""
-  if (input.taskDescription) return input.taskDescription
-  return input.title?.replace(/\s+\(@[^)]+ subagent\)$/, "") || input.fallback
-}
-
-export function timelineRemovedSessionIDs(sessions: readonly { id: string; parentID?: string }[], sessionID: string) {
-  const removed = new Set([sessionID])
-  const byParent = Map.groupBy(
-    sessions.filter((session) => session.parentID),
-    (session) => session.parentID!,
-  )
-  const visit = (id: string) =>
-    byParent.get(id)?.forEach((child) => {
-      if (removed.has(child.id)) return
-      removed.add(child.id)
-      visit(child.id)
-    })
-  visit(sessionID)
-  return removed
-}

packages/app/src/pages/session/timeline/controller.test.ts

@@ -1,30 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { timelineChildTitle, timelineRemovedSessionIDs } from "./controller-projection"
-
-describe("timeline controller", () => {
-  test("projects child titles from task descriptions and session fallbacks", () => {
-    expect(timelineChildTitle({ title: "Root", fallback: "New session" })).toBe("Root")
-    expect(
-      timelineChildTitle({ parentID: "parent", taskDescription: "Investigate timeline", fallback: "New session" }),
-    ).toBe("Investigate timeline")
-    expect(
-      timelineChildTitle({ parentID: "parent", title: "Fallback (@build subagent)", fallback: "New session" }),
-    ).toBe("Fallback")
-    expect(timelineChildTitle({ parentID: "parent", fallback: "New session" })).toBe("New session")
-  })
-
-  test("collects the removed session and all descendants", () => {
-    const removed = timelineRemovedSessionIDs(
-      [
-        { id: "root" },
-        { id: "child", parentID: "root" },
-        { id: "grandchild", parentID: "child" },
-        { id: "sibling", parentID: "root" },
-        { id: "unrelated" },
-      ],
-      "root",
-    )
-
-    expect([...removed]).toEqual(["root", "child", "grandchild", "sibling"])
-  })
-})

packages/app/src/pages/session/timeline/controller.tsx

@@ -1,330 +0,0 @@
-import type { Message, Part, UserMessage } from "@opencode-ai/sdk/v2"
-import { Button } from "@opencode-ai/ui/button"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { DialogFooter, DialogHeader, DialogTitleGroup, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { useNavigate } from "@solidjs/router"
-import { createEffect, createMemo, on, type Accessor } from "solid-js"
-import { createStore, produce } from "solid-js/store"
-import { notifySessionTabsRemoved } from "@/components/titlebar-session-events"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useLanguage } from "@/context/language"
-import { usePlatform } from "@/context/platform"
-import { useServerSDK } from "@/context/server-sdk"
-import { useSettings } from "@/context/settings"
-import { useSDK } from "@/context/sdk"
-import { useSync } from "@/context/sync"
-import { useTabs } from "@/context/tabs"
-import { useSessionKey } from "@/pages/session/session-layout"
-import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/session-route"
-import { sessionTitle } from "@/utils/session-title"
-import { showToast } from "@/utils/toast"
-import { timelineChildTitle, timelineRemovedSessionIDs } from "./controller-projection"
-import { createTimelineProjection } from "./projection"
-
-const emptyMessages: Message[] = []
-const emptyParts: Part[] = []
-const idle = { type: "idle" as const }
-
-const taskDescription = (part: Part, sessionID: string): string | undefined => {
-  if (part.type !== "tool" || part.tool !== "task") return undefined
-  const metadata = "metadata" in part.state ? part.state.metadata : undefined
-  if (metadata?.sessionId !== sessionID) return undefined
-  const value = part.state.input?.description
-  if (typeof value === "string" && value) return value
-  return undefined
-}
-
-export function createTimelineController(input: { userMessages: Accessor<UserMessage[]> }) {
-  const navigate = useNavigate()
-  const serverSDK = useServerSDK()
-  const sdk = useSDK()
-  const sync = useSync()
-  const settings = useSettings()
-  const tabs = useTabs()
-  const dialog = useDialog()
-  const language = useLanguage()
-  const platform = usePlatform()
-  const { params, sessionKey } = useSessionKey()
-  const sessionID = createMemo(() => params.id)
-  const status = createMemo(() => {
-    const id = sessionID()
-    if (!id) return idle
-    return sync().data.session_status[id] ?? idle
-  })
-  const messages = createMemo(() => (sessionID() ? (sync().data.message[sessionID()!] ?? []) : []))
-  const projectedMessages = createMemo(() => {
-    const id = sessionID()
-    if (!id) return []
-    const visible = new Set(input.userMessages().map((message) => message.id))
-    const boundary = messages().find((message) => message.role === "user" && !visible.has(message.id))?.id
-    const projected = sync().data.session_message[id] ?? []
-    return boundary ? projected.filter((message) => message.id < boundary) : projected
-  })
-  const info = createMemo(() => {
-    const id = sessionID()
-    return id ? sync().session.get(id) : undefined
-  })
-  const titleValue = createMemo(() => info()?.title)
-  const titleLabel = createMemo(() => sessionTitle(titleValue()))
-  const shareUrl = createMemo(() => info()?.share?.url)
-  const shareEnabled = createMemo(() => sync().data.config.share !== "disabled")
-  const parentID = createMemo(() => info()?.parentID)
-  const parent = createMemo(() => {
-    const id = parentID()
-    return id ? sync().session.get(id) : undefined
-  })
-  const parentMessages = createMemo(() => {
-    const id = parentID()
-    return id ? (sync().data.message[id] ?? emptyMessages) : emptyMessages
-  })
-  const parentTitle = createMemo(() => sessionTitle(parent()?.title) ?? language.t("command.session.new"))
-  const parts = (messageID: string) => sync().data.part[messageID] ?? emptyParts
-  const part = (messageID: string, partID: string) => parts(messageID).find((item) => item.id === partID)
-  const childTaskDescription = createMemo(() => {
-    const id = sessionID()
-    if (!id) return undefined
-    return parentMessages()
-      .flatMap((message) => parts(message.id))
-      .map((item) => taskDescription(item, id))
-      .findLast((value): value is string => !!value)
-  })
-  const childTitle = createMemo(() => {
-    return timelineChildTitle({
-      parentID: parentID(),
-      taskDescription: childTaskDescription(),
-      title: titleLabel(),
-      fallback: language.t("command.session.new"),
-    })
-  })
-  const showHeader = createMemo(() => !!(titleValue() || parentID()))
-  const projection = createTimelineProjection({
-    messages,
-    userMessages: input.userMessages,
-    sessionMessages: projectedMessages,
-    parts,
-    status,
-    showReasoningSummaries: settings.general.showReasoningSummaries,
-    inlineComments: settings.general.newLayoutDesigns,
-  })
-  const [pending, setPending] = createStore({ rename: false, share: false, unshare: false })
-
-  const errorMessage = (error: unknown) => {
-    if (error && typeof error === "object" && "data" in error) {
-      const data = error.data
-      if (data && typeof data === "object" && "message" in data && typeof data.message === "string") return data.message
-    }
-    if (error instanceof Error) return error.message
-    return language.t("common.requestFailed")
-  }
-  const rename = async (title: string) => {
-    const id = sessionID()
-    if (!id || pending.rename) return false
-    const next = title.trim()
-    if (!next || next === (titleLabel() ?? "")) return true
-    setPending("rename", true)
-    const success = await sdk()
-      .api.session.rename({ sessionID: id, title: next })
-      .then(() => true)
-      .catch((error) => {
-        showToast({ title: language.t("common.requestFailed"), description: errorMessage(error) })
-        return false
-      })
-    setPending("rename", false)
-    if (!success) return false
-    sync().set(
-      produce((draft) => {
-        const index = draft.session.findIndex((session) => session.id === id)
-        if (index !== -1) draft.session[index].title = next
-      }),
-    )
-    return true
-  }
-  const share = async () => {
-    const id = sessionID()
-    if (!id || pending.share || !shareEnabled()) return
-    setPending("share", true)
-    await serverSDK()
-      .client.session.share({ sessionID: id })
-      .catch((error) => console.error("Failed to share session", error))
-    setPending("share", false)
-  }
-  const unshare = async () => {
-    const id = sessionID()
-    if (!id || pending.unshare || !shareEnabled()) return
-    setPending("unshare", true)
-    await serverSDK()
-      .client.session.unshare({ sessionID: id })
-      .catch((error) => console.error("Failed to unshare session", error))
-    setPending("unshare", false)
-  }
-  const href = (id: string) =>
-    params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id)
-  const navigateAfterRemoval = (id: string, parent?: string, next?: string) => {
-    if (params.id !== id) return
-    if (parent) return navigate(href(parent))
-    if (next) return navigate(href(next))
-    if (params.serverKey)
-      return tabs.newDraft({ server: requireServerKey(params.serverKey), directory: sdk().directory })
-    navigate(`/${params.dir}/session`)
-  }
-  const archive = async (id: string) => {
-    const session = sync().session.get(id)
-    if (!session || (await sdk().protocol) !== "v1") return
-    const index = sync().data.session.findIndex((item) => item.id === id)
-    const next = index === -1 ? undefined : (sync().data.session[index + 1] ?? sync().data.session[index - 1])
-    await sdk()
-      .client.session.update({ sessionID: id, directory: sdk().directory, time: { archived: Date.now() } })
-      .then(() => {
-        sync().set(
-          produce((draft) => {
-            const index = draft.session.findIndex((item) => item.id === id)
-            if (index !== -1) draft.session.splice(index, 1)
-          }),
-        )
-        sync().session.evict(id)
-        void navigateAfterRemoval(id, session.parentID, next?.id)
-        notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [id] })
-      })
-      .catch((error) => showToast({ title: language.t("common.requestFailed"), description: errorMessage(error) }))
-  }
-  const remove = async (id: string) => {
-    const session = sync().session.get(id)
-    if (!session) return false
-    const sessions = sync().data.session.filter((item) => !item.parentID && !item.time?.archived)
-    const index = sessions.findIndex((item) => item.id === id)
-    const next = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
-    const success = await sdk()
-      .api.session.remove({ sessionID: id })
-      .then(() => true)
-      .catch((error) => {
-        showToast({ title: language.t("session.delete.failed.title"), description: errorMessage(error) })
-        return false
-      })
-    if (!success) return false
-    const removed = timelineRemovedSessionIDs(sync().data.session, id)
-    void navigateAfterRemoval(id, session.parentID, next?.id)
-    sync().set(produce((draft) => void (draft.session = draft.session.filter((item) => !removed.has(item.id)))))
-    removed.forEach((sessionID) => sync().session.evict(sessionID))
-    notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [...removed] })
-    return true
-  }
-
-  function DeleteDialog(props: { sessionID: string }) {
-    const name = createMemo(
-      () => sessionTitle(sync().session.get(props.sessionID)?.title) ?? language.t("command.session.new"),
-    )
-    const confirm = async () => {
-      await remove(props.sessionID)
-      dialog.close()
-    }
-    if (settings.general.newLayoutDesigns())
-      return (
-        <DialogV2 fit>
-          <DialogHeader hideClose>
-            <DialogTitleGroup
-              title={language.t("session.delete.title")}
-              description={language.t("session.delete.confirm", { name: name() })}
-            />
-          </DialogHeader>
-          <DialogFooter>
-            <ButtonV2 variant="ghost" onClick={() => dialog.close()}>
-              {language.t("common.cancel")}
-            </ButtonV2>
-            <ButtonV2 variant="danger" onClick={confirm}>
-              {language.t("session.delete.button")}
-            </ButtonV2>
-          </DialogFooter>
-        </DialogV2>
-      )
-    return (
-      <Dialog title={language.t("session.delete.title")} fit>
-        <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
-          <div class="flex flex-col gap-1">
-            <span class="text-14-regular text-text-strong">
-              {language.t("session.delete.confirm", { name: name() })}
-            </span>
-          </div>
-          <div class="flex justify-end gap-2">
-            <Button variant="ghost" size="large" onClick={() => dialog.close()}>
-              {language.t("common.cancel")}
-            </Button>
-            <Button variant="primary" size="large" onClick={confirm}>
-              {language.t("session.delete.button")}
-            </Button>
-          </div>
-        </div>
-      </Dialog>
-    )
-  }
-
-  createEffect(
-    on(
-      () => [parentID(), childTaskDescription()] as const,
-      ([id, description]) => {
-        if (!id || description || sync().data.message[id] !== undefined) return
-        void sync().session.sync(id)
-      },
-      { defer: true },
-    ),
-  )
-
-  return {
-    data: {
-      sessionKey,
-      sessionID,
-      status,
-      titleValue,
-      titleLabel,
-      shareUrl,
-      shareEnabled,
-      parentID,
-      parentTitle,
-      childTitle,
-      showHeader,
-      parts,
-      part,
-      projection,
-      newLayoutDesigns: settings.general.newLayoutDesigns,
-      showReasoningSummaries: settings.general.showReasoningSummaries,
-      shellToolPartsExpanded: settings.general.shellToolPartsExpanded,
-      editToolPartsExpanded: settings.general.editToolPartsExpanded,
-    },
-    pending: {
-      rename: () => pending.rename,
-      share: () => pending.share,
-      unshare: () => pending.unshare,
-    },
-    action: {
-      rename,
-      share,
-      unshare,
-      archive,
-      showDelete: (id: string) => dialog.show(() => <DeleteDialog sessionID={id} />),
-      navigateParent: () => {
-        const id = parentID()
-        if (id) navigate(href(id))
-      },
-      viewShare: () => {
-        const url = shareUrl()
-        if (url) platform.openLink(url)
-      },
-      copyShareUrl: async () => {
-        const url = shareUrl()
-        if (!url) return
-        await navigator.clipboard.writeText(url).then(
-          () =>
-            showToast({
-              variant: "success",
-              icon: "circle-check",
-              title: language.t("session.share.copy.copied"),
-              description: url,
-            }),
-          (error) => showToast({ title: language.t("common.requestFailed"), description: errorMessage(error) }),
-        )
-      },
-    },
-  }
-}
-
-export type TimelineController = ReturnType<typeof createTimelineController>

packages/app/src/pages/session/timeline/message-timeline.tsx

@@ -11,8 +11,10 @@ import {
   type Accessor,
   type JSX,
 } from "solid-js"
-import { createStore } from "solid-js/store"
+import { createStore, produce } from "solid-js/store"
 import { Dynamic } from "solid-js/web"
+import { useNavigate } from "@solidjs/router"
+import { useMutation } from "@tanstack/solid-query"
 import { createVirtualizer, defaultRangeExtractor, elementScroll, type VirtualItem } from "@tanstack/solid-virtual"
 import { Accordion } from "@opencode-ai/ui/accordion"
 import { Button } from "@opencode-ai/ui/button"
@@ -33,6 +35,8 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { DialogFooter, DialogHeader, DialogTitleGroup, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { SessionRetry } from "@opencode-ai/session-ui/session-retry"
@@ -41,22 +45,43 @@ import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { TextReveal } from "@opencode-ai/ui/text-reveal"
 import { TextShimmer } from "@opencode-ai/ui/text-shimmer"
-import type { AssistantMessage, ToolPart, UserMessage } from "@opencode-ai/sdk/v2"
+import type {
+  AssistantMessage,
+  Message as MessageType,
+  Part as PartType,
+  ToolPart,
+  UserMessage,
+} from "@opencode-ai/sdk/v2"
+import { showToast } from "@/utils/toast"
 import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
 import { Popover as KobaltePopover } from "@kobalte/core/popover"
 import { normalize } from "@opencode-ai/session-ui/session-diff"
 import { useFileComponent } from "@opencode-ai/ui/context/file"
 import { shouldMarkBoundaryGesture, normalizeWheelDelta } from "@/pages/session/message-gesture"
 import { SessionContextUsage } from "@/components/session-context-usage"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
+import { useSessionKey } from "@/pages/session/session-layout"
+import { useServerSDK } from "@/context/server-sdk"
+import { usePlatform } from "@/context/platform"
+import { useSettings } from "@/context/settings"
+import { useTabs } from "@/context/tabs"
+import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/session-route"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { notifySessionTabsRemoved } from "@/components/titlebar-session-events"
+import { sessionTitle } from "@/utils/session-title"
 import { scheduleConnectedMeasure } from "./measure"
 import { observeElementOffsetReconnectAware } from "./observe-element-offset"
+import { createTimelineProjection } from "./projection"
 import { MessageComment, SummaryDiff, TimelineRow, TimelineRowMap } from "./rows"
 import { filterVirtualIndexes } from "./virtual-items"
-import { createTimelineController, type TimelineController } from "./controller"
 
+const emptyMessages: MessageType[] = []
+const emptyParts: PartType[] = []
 const emptyTools: ToolPart[] = []
 const emptyAssistantMessages: AssistantMessage[] = []
+const idle = { type: "idle" as const }
 
 type FramedTimelineRow = Exclude<TimelineRow.TimelineRow, { _tag: "TurnGap" }>
 type TimelineRowByTag<T extends TimelineRow.TimelineRow["_tag"]> = Extract<TimelineRow.TimelineRow, { _tag: T }>
@@ -64,6 +89,14 @@ type TimelineRowByTag<T extends TimelineRow.TimelineRow["_tag"]> = Extract<Timel
 const timelineFallbackItemSize = 60
 const timelineCache = new Map<string, { measurements: VirtualItem[]; toolOpen: Record<string, boolean | undefined> }>()
 
+const taskDescription = (part: PartType, sessionID: string) => {
+  if (part.type !== "tool" || part.tool !== "task") return
+  const metadata = "metadata" in part.state ? part.state.metadata : undefined
+  if (metadata?.sessionId !== sessionID) return
+  const value = part.state.input?.description
+  if (typeof value === "string" && value) return value
+}
+
 const boundaryTarget = (root: HTMLElement, target: EventTarget | null) => {
   const current = target instanceof Element ? target : undefined
   const nested = current?.closest("[data-scrollable]")
@@ -204,7 +237,7 @@ function TimelineDiffView(props: { diff: SummaryDiff }) {
   )
 }
 
-type MessageTimelineProps = {
+export function MessageTimeline(props: {
   actions?: UserActions
   scroll: { overflow: boolean; bottom: boolean; jump: boolean }
   onResumeScroll: () => void
@@ -224,42 +257,88 @@ type MessageTimelineProps = {
   setRevealMessage?: (fn: (id: string) => void) => void
   setScrollToEnd?: (fn: () => void) => void
   setHistoryAnchor?: (handlers: { capture: () => void; restore: (done: boolean) => void }) => void
-}
-
-export function MessageTimeline(props: MessageTimelineProps) {
-  const controller = createTimelineController({ userMessages: () => props.userMessages })
-  return (
-    <MessageTimelineView {...props} data={controller.data} action={controller.action} pending={controller.pending} />
-  )
-}
-
-function MessageTimelineView(
-  props: MessageTimelineProps & {
-    data: TimelineController["data"]
-    action: TimelineController["action"]
-    pending: TimelineController["pending"]
-  },
-) {
+}) {
   let touchGesture: number | undefined
+
+  const navigate = useNavigate()
+  const serverSDK = useServerSDK()
+  const sdk = useSDK()
+  const sync = useSync()
+  const settings = useSettings()
+  const tabs = useTabs()
+  const dialog = useDialog()
   const language = useLanguage()
-  const ownerSessionKey = props.data.sessionKey()
+  const { params, sessionKey } = useSessionKey()
+  const ownerSessionKey = sessionKey()
   const cached = timelineCache.get(ownerSessionKey)
   const initialMeasurements = cached?.measurements
   const coldBottomMount = !initialMeasurements?.length && props.shouldAnchorBottom()
+  const platform = usePlatform()
 
   const [listRoot, setListRoot] = createSignal<HTMLDivElement>()
-  const sessionID = props.data.sessionID
-  const sessionStatus = props.data.status
-  const titleLabel = props.data.titleLabel
-  const shareUrl = props.data.shareUrl
-  const shareEnabled = props.data.shareEnabled
-  const parentID = props.data.parentID
-  const parentTitle = props.data.parentTitle
-  const childTitle = props.data.childTitle
-  const showHeader = props.data.showHeader
-  const getMsgParts = props.data.parts
-  const getMsgPart = props.data.part
-  const projection = props.data.projection
+  const sessionID = createMemo(() => params.id)
+  const sessionStatus = createMemo(() => {
+    const id = sessionID()
+    if (!id) return idle
+    return sync().data.session_status[id] ?? idle
+  })
+  const sessionMessages = createMemo(() => (sessionID() ? (sync().data.message[sessionID()!] ?? []) : []))
+  const projectedMessages = createMemo(() => {
+    const id = sessionID()
+    if (!id) return []
+    const visible = new Set(props.userMessages.map((message) => message.id))
+    const boundary = sessionMessages().find((message) => message.role === "user" && !visible.has(message.id))?.id
+    const messages = sync().data.session_message[id] ?? []
+    return boundary ? messages.filter((message) => message.id < boundary) : messages
+  })
+  const info = createMemo(() => {
+    const id = sessionID()
+    if (!id) return
+    return sync().session.get(id)
+  })
+  const titleValue = createMemo(() => info()?.title)
+  const titleLabel = createMemo(() => sessionTitle(titleValue()))
+  const shareUrl = createMemo(() => info()?.share?.url)
+  const shareEnabled = createMemo(() => sync().data.config.share !== "disabled")
+  const parentID = createMemo(() => info()?.parentID)
+  const parent = createMemo(() => {
+    const id = parentID()
+    if (!id) return
+    return sync().session.get(id)
+  })
+  const parentMessages = createMemo(() => {
+    const id = parentID()
+    if (!id) return emptyMessages
+    return sync().data.message[id] ?? emptyMessages
+  })
+  const parentTitle = createMemo(() => sessionTitle(parent()?.title) ?? language.t("command.session.new"))
+  const getMsgParts = (msgId: string) => sync().data.part[msgId] ?? emptyParts
+  const getMsgPart = (messageID: string, partID: string) => getMsgParts(messageID).find((part) => part.id === partID)
+  const childTaskDescription = createMemo(() => {
+    const id = sessionID()
+    if (!id) return
+    return parentMessages()
+      .flatMap((message) => getMsgParts(message.id))
+      .map((part) => taskDescription(part, id))
+      .findLast((value): value is string => !!value)
+  })
+  const childTitle = createMemo(() => {
+    if (!parentID()) return titleLabel() ?? ""
+    if (childTaskDescription()) return childTaskDescription()
+    const value = titleLabel()?.replace(/\s+\(@[^)]+ subagent\)$/, "")
+    if (value) return value
+    return language.t("command.session.new")
+  })
+  const showHeader = createMemo(() => !!(titleValue() || parentID()))
+  const projection = createTimelineProjection({
+    messages: sessionMessages,
+    userMessages: () => props.userMessages,
+    sessionMessages: projectedMessages,
+    parts: getMsgParts,
+    status: sessionStatus,
+    showReasoningSummaries: settings.general.showReasoningSummaries,
+    inlineComments: settings.general.newLayoutDesigns,
+  })
   const activeMessageID = projection.activeMessageID
   const assistantMessagesByParent = projection.assistantMessagesByParent
   const lastAssistantGroupKey = projection.lastAssistantGroupKey
@@ -449,9 +528,9 @@ function MessageTimelineView(
     virtualizer.scrollToEnd()
   }
 
-  let measuredSessionKey = props.data.sessionKey()
+  let measuredSessionKey = sessionKey()
   createEffect(() => {
-    const key = props.data.sessionKey()
+    const key = sessionKey()
     timelineRows().length
     if (measuredSessionKey !== key) {
       measuredSessionKey = key
@@ -564,6 +643,88 @@ function MessageTimelineView(
     props.setScrollRef(undefined)
   })
 
+  const viewShare = () => {
+    const url = shareUrl()
+    if (!url) return
+    platform.openLink(url)
+  }
+
+  const errorMessage = (err: unknown) => {
+    if (err && typeof err === "object" && "data" in err) {
+      const data = (err as { data?: { message?: string } }).data
+      if (data?.message) return data.message
+    }
+    if (err instanceof Error) return err.message
+    return language.t("common.requestFailed")
+  }
+
+  const shareMutation = useMutation(() => ({
+    mutationFn: (id: string) => serverSDK().client.session.share({ sessionID: id }),
+    onError: (err) => {
+      console.error("Failed to share session", err)
+    },
+  }))
+
+  const unshareMutation = useMutation(() => ({
+    mutationFn: (id: string) => serverSDK().client.session.unshare({ sessionID: id }),
+    onError: (err) => {
+      console.error("Failed to unshare session", err)
+    },
+  }))
+
+  const titleMutation = useMutation(() => ({
+    mutationFn: (input: { id: string; title: string }) =>
+      sdk().api.session.rename({ sessionID: input.id, title: input.title }),
+    onSuccess: (_, input) => {
+      sync().set(
+        produce((draft) => {
+          const index = draft.session.findIndex((s) => s.id === input.id)
+          if (index !== -1) draft.session[index].title = input.title
+        }),
+      )
+      setTitle("editing", false)
+    },
+    onError: (err) => {
+      showToast({
+        title: language.t("common.requestFailed"),
+        description: errorMessage(err),
+      })
+    },
+  }))
+
+  const shareSession = () => {
+    const id = sessionID()
+    if (!id || shareMutation.isPending) return
+    if (!shareEnabled()) return
+    shareMutation.mutate(id)
+  }
+
+  const unshareSession = () => {
+    const id = sessionID()
+    if (!id || unshareMutation.isPending) return
+    if (!shareEnabled()) return
+    unshareMutation.mutate(id)
+  }
+  const copyShareUrl = () => {
+    const url = shareUrl()
+    if (!url) return
+    void navigator.clipboard
+      .writeText(url)
+      .then(() =>
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("session.share.copy.copied"),
+          description: url,
+        }),
+      )
+      .catch((err: unknown) =>
+        showToast({
+          title: language.t("common.requestFailed"),
+          description: errorMessage(err),
+        }),
+      )
+  }
   const selectShareUrlText: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {
     const selection = window.getSelection()
     if (!selection) return
@@ -575,7 +736,7 @@ function MessageTimelineView(
 
   createEffect(
     on(
-      props.data.sessionKey,
+      sessionKey,
       () =>
         setTitle({
           draft: "",
@@ -588,6 +749,18 @@ function MessageTimelineView(
     ),
   )
 
+  createEffect(
+    on(
+      () => [parentID(), childTaskDescription()] as const,
+      ([id, description]) => {
+        if (!id || description) return
+        if (sync().data.message[id] !== undefined) return
+        void sync().session.sync(id)
+      },
+      { defer: true },
+    ),
+  )
+
   const openTitleEditor = () => {
     if (!sessionID() || parentID()) return
     setTitle({ editing: true, draft: titleLabel() ?? "" })
@@ -599,12 +772,193 @@ function MessageTimelineView(
   }
 
   const closeTitleEditor = () => {
-    if (props.pending.rename()) return
+    if (titleMutation.isPending) return
     setTitle("editing", false)
   }
 
-  const saveTitleEditor = async () => {
-    if (await props.action.rename(title.draft)) setTitle("editing", false)
+  const saveTitleEditor = () => {
+    const id = sessionID()
+    if (!id) return
+    if (titleMutation.isPending) return
+
+    const next = title.draft.trim()
+    if (!next || next === (titleLabel() ?? "")) {
+      setTitle("editing", false)
+      return
+    }
+
+    titleMutation.mutate({ id, title: next })
+  }
+
+  const navigateAfterSessionRemoval = (sessionID: string, parentID?: string, nextSessionID?: string) => {
+    if (params.id !== sessionID) return
+    const href = (id: string) =>
+      params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id)
+    if (parentID) {
+      navigate(href(parentID))
+      return
+    }
+    if (nextSessionID) {
+      navigate(href(nextSessionID))
+      return
+    }
+    if (params.serverKey) {
+      tabs.newDraft({ server: requireServerKey(params.serverKey), directory: sdk().directory })
+      return
+    }
+    navigate(`/${params.dir}/session`)
+  }
+
+  const archiveSession = async (sessionID: string) => {
+    const session = sync().session.get(sessionID)
+    if (!session) return
+    if ((await sdk().protocol) !== "v1") return
+
+    const sessions = sync().data.session ?? []
+    const index = sessions.findIndex((s) => s.id === sessionID)
+    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
+
+    await sdk()
+      .client.session.update({ sessionID, directory: sdk().directory, time: { archived: Date.now() } })
+      .then(() => {
+        sync().set(
+          produce((draft) => {
+            const index = draft.session.findIndex((s) => s.id === sessionID)
+            if (index !== -1) draft.session.splice(index, 1)
+          }),
+        )
+        sync().session.evict(sessionID)
+        navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
+        notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [sessionID] })
+      })
+      .catch((err) => {
+        showToast({
+          title: language.t("common.requestFailed"),
+          description: errorMessage(err),
+        })
+      })
+  }
+
+  const deleteSession = async (sessionID: string) => {
+    const session = sync().session.get(sessionID)
+    if (!session) return false
+
+    const sessions = (sync().data.session ?? []).filter((s) => !s.parentID && !s.time?.archived)
+    const index = sessions.findIndex((s) => s.id === sessionID)
+    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
+
+    const result = await sdk()
+      .api.session.remove({ sessionID })
+      .then(() => true)
+      .catch((err) => {
+        showToast({
+          title: language.t("session.delete.failed.title"),
+          description: errorMessage(err),
+        })
+        return false
+      })
+
+    if (!result) return false
+
+    const removed = new Set<string>([sessionID])
+    const byParent = new Map<string, string[]>()
+    for (const item of sync().data.session) {
+      const parentID = item.parentID
+      if (!parentID) continue
+      const existing = byParent.get(parentID)
+      if (existing) {
+        existing.push(item.id)
+        continue
+      }
+      byParent.set(parentID, [item.id])
+    }
+
+    const stack = [sessionID]
+    while (stack.length) {
+      const parentID = stack.pop()
+      if (!parentID) continue
+
+      const children = byParent.get(parentID)
+      if (!children) continue
+
+      for (const child of children) {
+        if (removed.has(child)) continue
+        removed.add(child)
+        stack.push(child)
+      }
+    }
+
+    navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
+
+    sync().set(
+      produce((draft) => {
+        draft.session = draft.session.filter((s) => !removed.has(s.id))
+      }),
+    )
+
+    for (const id of removed) {
+      sync().session.evict(id)
+    }
+    notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [...removed] })
+    return true
+  }
+
+  const navigateParent = () => {
+    const id = parentID()
+    if (!id) return
+    navigate(
+      params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id),
+    )
+  }
+
+  function DialogDeleteSession(props: { sessionID: string }) {
+    const name = createMemo(
+      () => sessionTitle(sync().session.get(props.sessionID)?.title) ?? language.t("command.session.new"),
+    )
+    const handleDelete = async () => {
+      await deleteSession(props.sessionID)
+      dialog.close()
+    }
+
+    if (settings.general.newLayoutDesigns())
+      return (
+        <DialogV2 fit>
+          <DialogHeader hideClose>
+            <DialogTitleGroup
+              title={language.t("session.delete.title")}
+              description={language.t("session.delete.confirm", { name: name() })}
+            />
+          </DialogHeader>
+          <DialogFooter>
+            <ButtonV2 variant="ghost" onClick={() => dialog.close()}>
+              {language.t("common.cancel")}
+            </ButtonV2>
+            <ButtonV2 variant="danger" onClick={handleDelete}>
+              {language.t("session.delete.button")}
+            </ButtonV2>
+          </DialogFooter>
+        </DialogV2>
+      )
+
+    return (
+      <Dialog title={language.t("session.delete.title")} fit>
+        <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
+          <div class="flex flex-col gap-1">
+            <span class="text-14-regular text-text-strong">
+              {language.t("session.delete.confirm", { name: name() })}
+            </span>
+          </div>
+          <div class="flex justify-end gap-2">
+            <Button variant="ghost" size="large" onClick={() => dialog.close()}>
+              {language.t("common.cancel")}
+            </Button>
+            <Button variant="primary" size="large" onClick={handleDelete}>
+              {language.t("session.delete.button")}
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    )
   }
 
   const workingTurn = (userMessageID: string) => sessionStatus().type !== "idle" && activeMessageID() === userMessageID
@@ -683,7 +1037,7 @@ function MessageTimelineView(
     const defaultOpen = createMemo(() => {
       const item = part()
       if (!item) return
-      return partDefaultOpen(item, props.data.shellToolPartsExpanded(), props.data.editToolPartsExpanded())
+      return partDefaultOpen(item, settings.general.shellToolPartsExpanded(), settings.general.editToolPartsExpanded())
     })
 
     return (
@@ -696,7 +1050,7 @@ function MessageTimelineView(
                 message={message()}
                 showAssistantCopyPartID={assistantCopyPartID(row().userMessageID)}
                 turnDurationMs={turnDurationMs(row().userMessageID)}
-                useV2Actions={props.data.newLayoutDesigns()}
+                useV2Actions={settings.general.newLayoutDesigns()}
                 defaultOpen={defaultOpen()}
                 toolOpen={toolOpen[part().id] ?? defaultOpen()}
                 onToolOpenChange={(open) => setToolOpen(part().id, open)}
@@ -759,8 +1113,8 @@ function MessageTimelineView(
                       <div
                         classList={{
                           "shrink-0 max-w-[260px] rounded-[6px] border-border-weak-base bg-background-stronger px-2.5 py-2": true,
-                          "border-[0.5px]": props.data.newLayoutDesigns(),
-                          border: !props.data.newLayoutDesigns(),
+                          "border-[0.5px]": settings.general.newLayoutDesigns(),
+                          border: !settings.general.newLayoutDesigns(),
                         }}
                       >
                         <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
@@ -795,7 +1149,7 @@ function MessageTimelineView(
           if (m?.role === "user") return m
         })
         const messageComments = createMemo(() => {
-          if (!props.data.newLayoutDesigns()) return []
+          if (!settings.general.newLayoutDesigns()) return []
           return getMsgParts(userMessageRow().userMessageID).flatMap((part) => MessageComment.fromPart(part) ?? [])
         })
         return (
@@ -808,7 +1162,7 @@ function MessageTimelineView(
                       message={message()}
                       parts={getMsgParts(userMessageRow().userMessageID)}
                       actions={props.actions}
-                      useV2Actions={props.data.newLayoutDesigns()}
+                      useV2Actions={settings.general.newLayoutDesigns()}
                       comments={messageComments()}
                     />
                   </div>
@@ -856,7 +1210,7 @@ function MessageTimelineView(
             <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
               <TimelineThinkingRow
                 reasoningHeading={thinkingRow().reasoningHeading}
-                showReasoningSummaries={props.data.showReasoningSummaries()}
+                showReasoningSummaries={settings.general.showReasoningSummaries()}
               />
             </div>
           </TimelineRowFrame>
@@ -972,16 +1326,16 @@ function MessageTimelineView(
       <div
         class="absolute left-1/2 -translate-x-1/2 z-[60] pointer-events-none transition-all duration-200 ease-out"
         classList={{
-          "bottom-8": props.data.newLayoutDesigns(),
-          "bottom-6": !props.data.newLayoutDesigns(),
+          "bottom-8": settings.general.newLayoutDesigns(),
+          "bottom-6": !settings.general.newLayoutDesigns(),
           "opacity-100 translate-y-0 scale-100": props.scroll.overflow && props.scroll.jump,
           "opacity-0 translate-y-2 pointer-events-none": !props.scroll.overflow || !props.scroll.jump,
-          "scale-[0.8]": (!props.scroll.overflow || !props.scroll.jump) && props.data.newLayoutDesigns(),
-          "scale-95": (!props.scroll.overflow || !props.scroll.jump) && !props.data.newLayoutDesigns(),
+          "scale-[0.8]": (!props.scroll.overflow || !props.scroll.jump) && settings.general.newLayoutDesigns(),
+          "scale-95": (!props.scroll.overflow || !props.scroll.jump) && !settings.general.newLayoutDesigns(),
         }}
       >
         <Show
-          when={props.data.newLayoutDesigns()}
+          when={settings.general.newLayoutDesigns()}
           fallback={
             <button
               type="button"
@@ -1044,22 +1398,22 @@ function MessageTimelineView(
             classList={{
               "sticky top-0 z-30": true,
               "bg-[linear-gradient(to_bottom,var(--v2-background-bg-base)_48px,transparent)]":
-                props.data.newLayoutDesigns(),
+                settings.general.newLayoutDesigns(),
               "bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]":
-                !props.data.newLayoutDesigns(),
+                !settings.general.newLayoutDesigns(),
               "w-full": true,
               "pb-4": true,
               "pr-3": true,
-              "pl-2.5": props.data.newLayoutDesigns(),
-              "pl-2 md:pl-4": !props.data.newLayoutDesigns(),
-              "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered && !props.data.newLayoutDesigns(),
+              "pl-2.5": settings.general.newLayoutDesigns(),
+              "pl-2 md:pl-4": !settings.general.newLayoutDesigns(),
+              "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered && !settings.general.newLayoutDesigns(),
             }}
           >
             <div class="h-12 w-full flex items-center justify-between gap-2">
               <div
                 classList={{
                   "flex items-center gap-1 min-w-0 flex-1": true,
-                  "pr-3": !props.data.newLayoutDesigns(),
+                  "pr-3": !settings.general.newLayoutDesigns(),
                 }}
               >
                 <div class="flex items-center min-w-0 flex-1 w-full">
@@ -1068,7 +1422,7 @@ function MessageTimelineView(
                       type="button"
                       data-slot="session-title-parent"
                       class="min-w-0 max-w-[40%] truncate pl-2 text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:text-v2-text-text-muted"
-                      onClick={props.action.navigateParent}
+                      onClick={navigateParent}
                     >
                       {parentTitle()}
                     </button>
@@ -1089,8 +1443,8 @@ function MessageTimelineView(
                           classList={{
                             "truncate text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base": true,
                             "w-fit rounded-[6px] px-2 py-1 hover:bg-v2-overlay-simple-overlay-hover":
-                              props.data.newLayoutDesigns(),
-                            "grow-1 min-w-0": !props.data.newLayoutDesigns(),
+                              settings.general.newLayoutDesigns(),
+                            "grow-1 min-w-0": !settings.general.newLayoutDesigns(),
                           }}
                           onClick={openTitleEditor}
                         >
@@ -1104,14 +1458,15 @@ function MessageTimelineView(
                         }}
                         data-slot="session-title-child"
                         value={title.draft}
-                        disabled={props.pending.rename()}
+                        disabled={titleMutation.isPending}
                         classList={{
                           "block text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base": true,
-                          "w-full flex-1 grow-1 min-w-0 pl-1 -ml-1 rounded-[6px]": !props.data.newLayoutDesigns(),
-                          "field-sizing-content self-start rounded-[6px] px-2 py-1 ": props.data.newLayoutDesigns(),
+                          "w-full flex-1 grow-1 min-w-0 pl-1 -ml-1 rounded-[6px]": !settings.general.newLayoutDesigns(),
+                          "field-sizing-content self-start rounded-[6px] px-2 py-1 ":
+                            settings.general.newLayoutDesigns(),
                         }}
                         style={{
-                          "--inline-input-shadow": props.data.newLayoutDesigns()
+                          "--inline-input-shadow": settings.general.newLayoutDesigns()
                             ? "none"
                             : "var(--shadow-xs-border-select)",
                         }}
@@ -1139,17 +1494,17 @@ function MessageTimelineView(
                   <div
                     classList={{
                       "shrink-0 flex items-center": true,
-                      "gap-2": props.data.newLayoutDesigns(),
-                      "gap-3": !props.data.newLayoutDesigns(),
+                      "gap-2": settings.general.newLayoutDesigns(),
+                      "gap-3": !settings.general.newLayoutDesigns(),
                     }}
                   >
                     <SessionContextUsage
                       placement="bottom"
-                      buttonAppearance={props.data.newLayoutDesigns() ? "v2" : "default"}
+                      buttonAppearance={settings.general.newLayoutDesigns() ? "v2" : "default"}
                     />
                     <Show when={!parentID()}>
                       <Show
-                        when={props.data.newLayoutDesigns()}
+                        when={settings.general.newLayoutDesigns()}
                         fallback={
                           <DropdownMenu
                             gutter={4}
@@ -1212,11 +1567,13 @@ function MessageTimelineView(
                                     </DropdownMenu.ItemLabel>
                                   </DropdownMenu.Item>
                                 </Show>
-                                <DropdownMenu.Item onSelect={() => void props.action.archive(id)}>
+                                <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
                                   <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
                                 </DropdownMenu.Item>
                                 <DropdownMenu.Separator />
-                                <DropdownMenu.Item onSelect={() => props.action.showDelete(id)}>
+                                <DropdownMenu.Item
+                                  onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}
+                                >
                                   <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
                                 </DropdownMenu.Item>
                               </DropdownMenu.Content>
@@ -1281,11 +1638,11 @@ function MessageTimelineView(
                                   {language.t("session.share.action.share")}...
                                 </MenuV2.Item>
                               </Show>
-                              <MenuV2.Item onSelect={() => void props.action.archive(id)}>
+                              <MenuV2.Item onSelect={() => void archiveSession(id)}>
                                 {language.t("common.archive")}
                               </MenuV2.Item>
                               <MenuV2.Separator />
-                              <MenuV2.Item onSelect={() => props.action.showDelete(id)}>
+                              <MenuV2.Item onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}>
                                 {language.t("common.delete")}...
                               </MenuV2.Item>
                             </MenuV2.Content>
@@ -1297,7 +1654,7 @@ function MessageTimelineView(
                         open={share.open}
                         anchorRef={() => more}
                         placement="bottom-end"
-                        gutter={props.data.newLayoutDesigns() ? 6 : 4}
+                        gutter={settings.general.newLayoutDesigns() ? 6 : 4}
                         modal={false}
                         onOpenChange={(open) => {
                           if (open) setShare("dismiss", null)
@@ -1309,7 +1666,7 @@ function MessageTimelineView(
                             data-component="popover-content"
                             classList={{
                               "flex w-80 max-w-none flex-col items-start gap-3 rounded-[10px] border-0 bg-v2-background-bg-layer-01 p-3 shadow-[var(--v2-elevation-floating)]":
-                                props.data.newLayoutDesigns(),
+                                settings.general.newLayoutDesigns(),
                             }}
                             style={{ "min-width": "320px" }}
                             onEscapeKeyDown={(event) => {
@@ -1329,7 +1686,7 @@ function MessageTimelineView(
                             }}
                           >
                             <Show
-                              when={props.data.newLayoutDesigns()}
+                              when={settings.general.newLayoutDesigns()}
                               fallback={
                                 <div class="flex flex-col p-3">
                                   <div class="flex flex-col gap-1">
@@ -1350,10 +1707,10 @@ function MessageTimelineView(
                                           size="large"
                                           variant="primary"
                                           class="w-full"
-                                          onClick={() => void props.action.share()}
-                                          disabled={props.pending.share()}
+                                          onClick={shareSession}
+                                          disabled={shareMutation.isPending}
                                         >
-                                          {props.pending.share()
+                                          {shareMutation.isPending
                                             ? language.t("session.share.action.publishing")
                                             : language.t("session.share.action.publish")}
                                         </Button>
@@ -1373,10 +1730,10 @@ function MessageTimelineView(
                                             size="large"
                                             variant="secondary"
                                             class="w-full shadow-none border border-border-weak-base"
-                                            onClick={() => void props.action.unshare()}
-                                            disabled={props.pending.unshare()}
+                                            onClick={unshareSession}
+                                            disabled={unshareMutation.isPending}
                                           >
-                                            {props.pending.unshare()
+                                            {unshareMutation.isPending
                                               ? language.t("session.share.action.unpublishing")
                                               : language.t("session.share.action.unpublish")}
                                           </Button>
@@ -1384,8 +1741,8 @@ function MessageTimelineView(
                                             size="large"
                                             variant="primary"
                                             class="w-full"
-                                            onClick={props.action.viewShare}
-                                            disabled={props.pending.unshare()}
+                                            onClick={viewShare}
+                                            disabled={unshareMutation.isPending}
                                           >
                                             {language.t("session.share.action.view")}
                                           </Button>
@@ -1413,10 +1770,10 @@ function MessageTimelineView(
                                     <ButtonV2
                                       variant="contrast"
                                       class="w-full"
-                                      onClick={() => void props.action.share()}
-                                      disabled={props.pending.share()}
+                                      onClick={shareSession}
+                                      disabled={shareMutation.isPending}
                                     >
-                                      {props.pending.share()
+                                      {shareMutation.isPending
                                         ? language.t("session.share.action.publishing")
                                         : language.t("session.share.action.publish")}
                                     </ButtonV2>
@@ -1442,7 +1799,7 @@ function MessageTimelineView(
                                         variant="ghost-muted"
                                         icon={<IconV2 name="outline-copy" />}
                                         aria-label={language.t("session.share.copy.copyLink")}
-                                        onClick={() => void props.action.copyShareUrl()}
+                                        onClick={copyShareUrl}
                                       />
                                       <IconButtonV2
                                         type="button"
@@ -1450,18 +1807,18 @@ function MessageTimelineView(
                                         variant="ghost-muted"
                                         icon={<IconV2 name="outline-square-arrow" />}
                                         aria-label={language.t("session.share.action.view")}
-                                        onClick={props.action.viewShare}
-                                        disabled={props.pending.unshare()}
+                                        onClick={viewShare}
+                                        disabled={unshareMutation.isPending}
                                       />
                                     </div>
                                     <div class="flex w-full">
                                       <ButtonV2
                                         variant="outline"
                                         class="w-full"
-                                        onClick={() => void props.action.unshare()}
-                                        disabled={props.pending.unshare()}
+                                        onClick={unshareSession}
+                                        disabled={unshareMutation.isPending}
                                       >
-                                        {props.pending.unshare()
+                                        {unshareMutation.isPending
                                           ? language.t("session.share.action.unpublishing")
                                           : language.t("session.share.action.unpublish")}
                                       </ButtonV2>

packages/app/test-browser/solid-router-cleanup.test.ts

@@ -0,0 +1,64 @@
+import { expect, test } from "bun:test"
+import { MetaProvider, Title } from "@solidjs/meta"
+import { MemoryRouter, Route, createMemoryHistory, useParams } from "@solidjs/router"
+import { createMemo } from "solid-js"
+import { createComponent, render } from "solid-js/web"
+
+test("route cleanup cannot invalidate an owner list being disposed", async () => {
+  const host = document.createElement("div")
+  document.body.append(host)
+  const history = createMemoryHistory()
+
+  const RepoPage = () => {
+    const params = useParams<{ id?: string }>()
+    const title = createMemo(() => params.id ?? "")
+    const button = document.createElement("button")
+    button.textContent = "Back"
+    button.addEventListener("click", () => history.set({ value: "/", scroll: false, replace: false }))
+    return [
+      createComponent(Title, {
+        get children() {
+          return title()
+        },
+      }),
+      button,
+    ]
+  }
+
+  const HomePage = () => {
+    const button = document.createElement("button")
+    button.textContent = "Go"
+    button.addEventListener("click", () => history.set({ value: "/project", scroll: false, replace: false }))
+    return button
+  }
+
+  const App = () =>
+    createComponent(MetaProvider, {
+      get children() {
+        return createComponent(MemoryRouter, {
+          history,
+          get children() {
+            return [
+              createComponent(Route, { path: "/", component: HomePage }),
+              createComponent(Route, { path: "/:id", component: RepoPage }),
+            ]
+          },
+        })
+      },
+    })
+
+  const dispose = render(() => createComponent(App, {}), host)
+  const go = host.querySelector("button")
+  expect(go?.textContent).toBe("Go")
+  go?.click()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+
+  const back = host.querySelector("button")
+  expect(back?.textContent).toBe("Back")
+  back?.click()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+
+  expect(host.querySelector("button")?.textContent).toBe("Go")
+  dispose()
+  host.remove()
+})

packages/session-ui/src/v2/components/comment-card-v2.tsx

@@ -32,7 +32,6 @@ export function CommentCardV2(props: {
   return (
     <TooltipV2
       placement="top"
-      openDelay={1000}
       value={props.title ?? props.comment}
       disabled={!props.tooltip || !truncated()}
       class={props.wide ? "w-full" : undefined}

packages/session-ui/src/v2/components/prompt-input/index.tsx

@@ -385,12 +385,7 @@ export function PromptInputV2Attachments(props: {
           <For each={props.comments ?? []}>
             {(comment) => (
               <div class="relative group shrink-0">
-                <TooltipV2
-                  value={comment.comment}
-                  placement="top"
-                  openDelay={800}
-                  contentClass="max-w-[300px] break-words"
-                >
+                <TooltipV2 value={comment.comment} placement="top" contentClass="max-w-[300px] break-words">
                   <CommentCardV2
                     comment={comment.comment ?? ""}
                     path={comment.path}

packages/session-ui/src/v2/components/session-review-v2.tsx

@@ -214,7 +214,6 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
       </Show>
       <div class="flex items-center">
         <TooltipV2
-          openDelay={2000}
           inactive={!prev()}
           value={
             <>
@@ -234,7 +233,6 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
           />
         </TooltipV2>
         <TooltipV2
-          openDelay={2000}
           inactive={!next()}
           value={
             <>
@@ -268,12 +266,12 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
         class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
         aria-label={i18n.t("ui.sessionReviewV2.expandMode")}
       >
-        <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.showAllLines")}>
+        <TooltipV2 value={i18n.t("ui.sessionReviewV2.showAllLines")}>
           <SegmentedControlItemV2 value="expand" aria-label={i18n.t("ui.sessionReviewV2.showAllLines")}>
             <Icon name="expand" />
           </SegmentedControlItemV2>
         </TooltipV2>
-        <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+        <TooltipV2 value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
           <SegmentedControlItemV2 value="collapse" aria-label={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
             <Icon name="collapse" />
           </SegmentedControlItemV2>
@@ -289,12 +287,12 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
           class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
           aria-label={i18n.t("ui.sessionReviewV2.diffView")}
         >
-          <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
+          <TooltipV2 value={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
             <SegmentedControlItemV2 value="unified" aria-label={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
               <Icon name="unified" />
             </SegmentedControlItemV2>
           </TooltipV2>
-          <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.splitDiff")}>
+          <TooltipV2 value={i18n.t("ui.sessionReviewV2.splitDiff")}>
             <SegmentedControlItemV2 value="split" aria-label={i18n.t("ui.sessionReviewV2.splitDiff")}>
               <Icon name="split" />
             </SegmentedControlItemV2>

packages/tui/src/app.tsx

@@ -104,7 +104,6 @@ const appGlobalBindingCommands = [
 ] as const
 
 const appBindingCommands = [
-  "command.palette.show",
   "model.list",
   "model.cycle_recent",
   "model.cycle_recent_reverse",
@@ -963,6 +962,11 @@ function App(props: { onSnapshot?: () => Promise<string[]>; pluginHost: TuiPlugi
     commands: appCommands(),
   }))
 
+  useBindings(() => ({
+    enabled: () => dialog.stack.length === 0,
+    bindings: tuiConfig.keybinds.get(COMMAND_PALETTE_COMMAND),
+  }))
+
   useBindings(() => ({
     mode: OPENCODE_BASE_MODE,
     bindings: tuiConfig.keybinds.gather("app", appBindingCommands),

packages/tui/test/keymap.test.tsx

@@ -5,7 +5,13 @@ import { testRender, useRenderer } from "@opentui/solid"
 import { expect, test } from "bun:test"
 import { onCleanup } from "solid-js"
 import { TuiKeybind } from "../src/config/keybind"
-import { getOpencodeModeStack, OPENCODE_BASE_MODE, OpencodeKeymapProvider, registerOpencodeKeymap } from "../src/keymap"
+import {
+  COMMAND_PALETTE_COMMAND,
+  getOpencodeModeStack,
+  OPENCODE_BASE_MODE,
+  OpencodeKeymapProvider,
+  registerOpencodeKeymap,
+} from "../src/keymap"
 
 function createResolvedKeymapConfig(input: TuiKeybind.KeybindOverrides = {}) {
   const keybinds = TuiKeybind.parse(input)
@@ -73,12 +79,14 @@ test("mode-less bindings stay active when opencode mode changes", async () => {
     const offKeymap = registerOpencodeKeymap(keymap, renderer, config)
     const offGlobal = keymap.registerLayer({
       commands: [
+        { name: COMMAND_PALETTE_COMMAND, run() {} },
         { name: "session.list", run() {} },
         { name: "session.new", run() {} },
         { name: "session.page.up", run() {} },
         { name: "session.first", run() {} },
       ],
       bindings: config.keybinds.gather("test.global", [
+        COMMAND_PALETTE_COMMAND,
         "session.list",
         "session.new",
         "session.page.up",
@@ -95,7 +103,14 @@ test("mode-less bindings stay active when opencode mode changes", async () => {
         Array.from(
           keymap.getCommandBindings({
             visibility: "active",
-            commands: ["session.list", "session.new", "session.page.up", "session.first", "model.list"],
+            commands: [
+              COMMAND_PALETTE_COMMAND,
+              "session.list",
+              "session.new",
+              "session.page.up",
+              "session.first",
+              "model.list",
+            ],
           }),
           ([command, bindings]) => [command, bindings.length],
         ),
@@ -125,9 +140,24 @@ test("mode-less bindings stay active when opencode mode changes", async () => {
   const app = await testRender(() => <Harness />)
   try {
     expect(counts).toEqual({
-      base: { "session.list": 1, "session.new": 1, "session.page.up": 2, "session.first": 2, "model.list": 1 },
-      question: { "session.list": 1, "session.new": 1, "session.page.up": 2, "session.first": 2, "model.list": 0 },
+      base: {
+        [COMMAND_PALETTE_COMMAND]: 1,
+        "session.list": 1,
+        "session.new": 1,
+        "session.page.up": 2,
+        "session.first": 2,
+        "model.list": 1,
+      },
+      question: {
+        [COMMAND_PALETTE_COMMAND]: 1,
+        "session.list": 1,
+        "session.new": 1,
+        "session.page.up": 2,
+        "session.first": 2,
+        "model.list": 0,
+      },
       autocomplete: {
+        [COMMAND_PALETTE_COMMAND]: 1,
         "session.list": 1,
         "session.new": 1,
         "session.page.up": 2,

packages/ui/src/v2/components/tooltip-intent.ts

@@ -0,0 +1,35 @@
+const OPEN_DELAY = 1_000
+
+// Kobalte warms every tooltip globally. Keep intent previews isolated so opening
+// a model picker never inherits warm state from an unrelated tooltip.
+let warm = false
+let reset: ReturnType<typeof setTimeout> | undefined
+
+export function openTooltipIntent(open: () => void) {
+  clearTimeout(reset)
+  reset = undefined
+  if (warm) {
+    open()
+    return
+  }
+  const timer = setTimeout(() => {
+    warm = true
+    open()
+  }, OPEN_DELAY)
+  return () => clearTimeout(timer)
+}
+
+export function closeTooltipIntent() {
+  clearTimeout(reset)
+  // Adjacent triggers enter before the next task; leaving the group does not.
+  reset = setTimeout(() => {
+    warm = false
+    reset = undefined
+  })
+}
+
+export function resetTooltipIntent() {
+  clearTimeout(reset)
+  reset = undefined
+  warm = false
+}

packages/ui/src/v2/components/tooltip-v2.tsx

@@ -2,19 +2,22 @@ import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
 import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
+import { closeTooltipIntent, openTooltipIntent, resetTooltipIntent } from "./tooltip-intent"
 import "./tooltip-v2.css"
 
-export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
+export interface TooltipV2Props extends Omit<ComponentProps<typeof KobalteTooltip>, "openDelay"> {
   value: JSX.Element
   class?: string
   contentClass?: string
   contentStyle?: JSX.CSSProperties
   inactive?: boolean
+  delay?: "standard" | "intent"
   forceOpen?: boolean
 }
 
 export function TooltipV2(props: TooltipV2Props) {
   let ref: HTMLDivElement | undefined
+  let cancelIntent: (() => void) | undefined
   const [state, setState] = createStore({
     open: false,
     block: false,
@@ -26,19 +29,37 @@ export function TooltipV2(props: TooltipV2Props) {
     "contentClass",
     "contentStyle",
     "inactive",
+    "delay",
     "forceOpen",
     "ignoreSafeArea",
     "value",
   ])
 
-  const close = () => setState("open", false)
-
   const inside = () => {
     const active = document.activeElement
     if (!ref || !active) return false
     return ref.contains(active)
   }
 
+  const close = () => {
+    cancelIntent?.()
+    cancelIntent = undefined
+    if (local.delay === "intent") closeTooltipIntent()
+    setState("open", false)
+  }
+
+  const show = () => {
+    if (local.delay !== "intent" || inside()) {
+      setState("open", true)
+      return
+    }
+    if (cancelIntent) return
+    cancelIntent = openTooltipIntent(() => {
+      cancelIntent = undefined
+      setState("open", true)
+    })
+  }
+
   const drop = (expand = state.expand) => {
     if (expand) return
     if (ref?.matches(":hover")) return
@@ -80,6 +101,11 @@ export function TooltipV2(props: TooltipV2Props) {
     onCleanup(() => obs.disconnect())
   })
 
+  onCleanup(() => {
+    cancelIntent?.()
+    if (local.delay === "intent") resetTooltipIntent()
+  })
+
   let justClickedTrigger = false
 
   return (
@@ -88,8 +114,8 @@ export function TooltipV2(props: TooltipV2Props) {
       <Match when={true}>
         <KobalteTooltip
           gutter={4}
-          openDelay={400}
-          skipDelayDuration={300}
+          openDelay={local.delay === "intent" ? 0 : 400}
+          skipDelayDuration={local.delay === "intent" ? 0 : 300}
           {...others}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}
@@ -101,7 +127,11 @@ export function TooltipV2(props: TooltipV2Props) {
               justClickedTrigger = false
               return
             }
-            setState("open", open)
+            if (open) {
+              show()
+              return
+            }
+            close()
           }}
         >
           <KobalteTooltip.Trigger

patches/solid-js@1.9.10.patch

@@ -1,11 +1,5 @@
-diff --git a/Users/brendonovich/github.com/anomalyco/opencode/node_modules/solid-js/.bun-tag-6fcb6b48d6947d2c b/.bun-tag-6fcb6b48d6947d2c
-new file mode 100644
-index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
-diff --git a/Users/brendonovich/github.com/anomalyco/opencode/node_modules/solid-js/.bun-tag-b272f631c12927b0 b/.bun-tag-b272f631c12927b0
-new file mode 100644
-index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
 diff --git a/dist/dev.cjs b/dist/dev.cjs
-index 7104749486e4361e8c4ee7836a8046582cec7aa1..0501eb1ec5d13b81ecb13a5ac1a82db42502b976 100644
+index 7104749..dc3eac9 100644
 --- a/dist/dev.cjs
 +++ b/dist/dev.cjs
 @@ -764,6 +764,8 @@ function runComputation(node, value, time) {
@@ -17,8 +11,33 @@ index 7104749486e4361e8c4ee7836a8046582cec7aa1..0501eb1ec5d13b81ecb13a5ac1a82db4
        Transition.sources.add(node);
        node.tValue = nextValue;
      } else node.value = nextValue;
+@@ -987,18 +989,21 @@ function cleanNode(node) {
+     }
+   }
+   if (node.tOwned) {
+-    for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
++    const tOwned = node.tOwned;
+     delete node.tOwned;
++    for (i = tOwned.length - 1; i >= 0; i--) cleanNode(tOwned[i]);
+   }
+   if (Transition && Transition.running && node.pure) {
+     reset(node, true);
+   } else if (node.owned) {
+-    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
++    const owned = node.owned;
+     node.owned = null;
++    for (i = owned.length - 1; i >= 0; i--) cleanNode(owned[i]);
+   }
+   if (node.cleanups) {
+-    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
++    const cleanups = node.cleanups;
+     node.cleanups = null;
++    for (i = cleanups.length - 1; i >= 0; i--) cleanups[i]();
+   }
+   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
+   delete node.sourceMap;
 diff --git a/dist/dev.js b/dist/dev.js
-index ea5e4bc2fd4f0b3922a73d9134439529dc81339f..4b3ec07e624d20fdd23d6941a4fdde6d3a78cca3 100644
+index ea5e4bc..a2e2d59 100644
 --- a/dist/dev.js
 +++ b/dist/dev.js
 @@ -762,6 +762,8 @@ function runComputation(node, value, time) {
@@ -30,8 +49,75 @@ index ea5e4bc2fd4f0b3922a73d9134439529dc81339f..4b3ec07e624d20fdd23d6941a4fdde6d
        Transition.sources.add(node);
        node.tValue = nextValue;
      } else node.value = nextValue;
+@@ -985,18 +987,21 @@ function cleanNode(node) {
+     }
+   }
+   if (node.tOwned) {
+-    for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
++    const tOwned = node.tOwned;
+     delete node.tOwned;
++    for (i = tOwned.length - 1; i >= 0; i--) cleanNode(tOwned[i]);
+   }
+   if (Transition && Transition.running && node.pure) {
+     reset(node, true);
+   } else if (node.owned) {
+-    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
++    const owned = node.owned;
+     node.owned = null;
++    for (i = owned.length - 1; i >= 0; i--) cleanNode(owned[i]);
+   }
+   if (node.cleanups) {
+-    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
++    const cleanups = node.cleanups;
+     node.cleanups = null;
++    for (i = cleanups.length - 1; i >= 0; i--) cleanups[i]();
+   }
+   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
+   delete node.sourceMap;
+diff --git a/dist/server.cjs b/dist/server.cjs
+index e715309..188ba81 100644
+--- a/dist/server.cjs
++++ b/dist/server.cjs
+@@ -127,12 +127,14 @@ function onCleanup(fn) {
+ }
+ function cleanNode(node) {
+   if (node.owned) {
+-    for (let i = 0; i < node.owned.length; i++) cleanNode(node.owned[i]);
++    const owned = node.owned;
+     node.owned = null;
++    for (let i = 0; i < owned.length; i++) cleanNode(owned[i]);
+   }
+   if (node.cleanups) {
+-    for (let i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
++    const cleanups = node.cleanups;
+     node.cleanups = null;
++    for (let i = 0; i < cleanups.length; i++) cleanups[i]();
+   }
+ }
+ function catchError(fn, handler) {
+diff --git a/dist/server.js b/dist/server.js
+index d5f8803..320d9af 100644
+--- a/dist/server.js
++++ b/dist/server.js
+@@ -125,12 +125,14 @@ function onCleanup(fn) {
+ }
+ function cleanNode(node) {
+   if (node.owned) {
+-    for (let i = 0; i < node.owned.length; i++) cleanNode(node.owned[i]);
++    const owned = node.owned;
+     node.owned = null;
++    for (let i = 0; i < owned.length; i++) cleanNode(owned[i]);
+   }
+   if (node.cleanups) {
+-    for (let i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
++    const cleanups = node.cleanups;
+     node.cleanups = null;
++    for (let i = 0; i < cleanups.length; i++) cleanups[i]();
+   }
+ }
+ function catchError(fn, handler) {
 diff --git a/dist/solid.cjs b/dist/solid.cjs
-index 7c133a2b254678a84fd61d719fbeffad766e1331..2f68c99f2698210cc0bac62f074cc8cd3beb2881 100644
+index 7c133a2..5ef1501 100644
 --- a/dist/solid.cjs
 +++ b/dist/solid.cjs
 @@ -717,6 +717,8 @@ function runComputation(node, value, time) {
@@ -43,8 +129,33 @@ index 7c133a2b254678a84fd61d719fbeffad766e1331..2f68c99f2698210cc0bac62f074cc8cd
        Transition.sources.add(node);
        node.tValue = nextValue;
      } else node.value = nextValue;
+@@ -938,18 +940,21 @@ function cleanNode(node) {
+     }
+   }
+   if (node.tOwned) {
+-    for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
++    const tOwned = node.tOwned;
+     delete node.tOwned;
++    for (i = tOwned.length - 1; i >= 0; i--) cleanNode(tOwned[i]);
+   }
+   if (Transition && Transition.running && node.pure) {
+     reset(node, true);
+   } else if (node.owned) {
+-    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
++    const owned = node.owned;
+     node.owned = null;
++    for (i = owned.length - 1; i >= 0; i--) cleanNode(owned[i]);
+   }
+   if (node.cleanups) {
+-    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
++    const cleanups = node.cleanups;
+     node.cleanups = null;
++    for (i = cleanups.length - 1; i >= 0; i--) cleanups[i]();
+   }
+   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
+ }
 diff --git a/dist/solid.js b/dist/solid.js
-index 656fd26e7e5c794aa22df19c2377ff5c0591fc29..f08e9f5a7157c3506e5b6922fe2ef991335a80be 100644
+index 656fd26..6e0038c 100644
 --- a/dist/solid.js
 +++ b/dist/solid.js
 @@ -715,6 +715,8 @@ function runComputation(node, value, time) {
@@ -56,3 +167,28 @@ index 656fd26e7e5c794aa22df19c2377ff5c0591fc29..f08e9f5a7157c3506e5b6922fe2ef991
        Transition.sources.add(node);
        node.tValue = nextValue;
      } else node.value = nextValue;
+@@ -936,18 +938,21 @@ function cleanNode(node) {
+     }
+   }
+   if (node.tOwned) {
+-    for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
++    const tOwned = node.tOwned;
+     delete node.tOwned;
++    for (i = tOwned.length - 1; i >= 0; i--) cleanNode(tOwned[i]);
+   }
+   if (Transition && Transition.running && node.pure) {
+     reset(node, true);
+   } else if (node.owned) {
+-    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
++    const owned = node.owned;
+     node.owned = null;
++    for (i = owned.length - 1; i >= 0; i--) cleanNode(owned[i]);
+   }
+   if (node.cleanups) {
+-    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
++    const cleanups = node.cleanups;
+     node.cleanups = null;
++    for (i = cleanups.length - 1; i >= 0; i--) cleanups[i]();
+   }
+   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
+ }