Apply PR #41977: refactor(app): align UI packages with solid best practices

packages/app/src/app.tsx

@@ -108,16 +108,14 @@ function DraftRoute() {
 function ResolvedDraftRoute(props: { draft: DraftTab }) {
   const global = useGlobal()
   const conn = createMemo(() => global.servers.list().find((item) => ServerConnection.key(item) === props.draft.server))
-  const directory = () => props.draft.directory
-  const serverKey = () => props.draft.server
 
   return (
     <Show when={`${props.draft.server}\0${props.draft.directory}`} keyed>
-      <ServerSDKProvider server={conn}>
-        <ServerSyncProvider server={conn}>
-          <ModelsProvider directory={directory}>
-            <SDKProvider directory={directory}>
-              <DirectoryDataProvider directory={directory} server={serverKey}>
+      <ServerSDKProvider server={conn()}>
+        <ServerSyncProvider server={conn()}>
+          <ModelsProvider directory={props.draft.directory}>
+            <SDKProvider directory={props.draft.directory}>
+              <DirectoryDataProvider directory={props.draft.directory} server={props.draft.server}>
                 <DraftProviders>
                   <NewSession />
                 </DraftProviders>
@@ -221,7 +219,7 @@ function DesktopCommands() {
 }
 
 type ServerScopedShellProps = ParentProps<{
-  directory?: () => string | undefined
+  directory?: string
   serverScoped?: JSX.Element
 }>
 

packages/app/src/components/debug-bar.tsx

@@ -1,5 +1,5 @@
 import { useIsRouting, useLocation } from "@solidjs/router"
-import { batch, createEffect, onCleanup, onMount } from "solid-js"
+import { batch, createEffect, onCleanup, onMount, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
@@ -571,7 +571,7 @@ export function DebugBar(props: { inline?: boolean } = {}) {
           value={language.t(`debugBar.direction.${language.direction()}`)}
           onClick={() => language.setDirection(language.direction() === "rtl" ? "ltr" : "rtl")}
         />
-        {platform.setForceFocus && (
+        <Show when={platform.setForceFocus}>
           <ToggleCell
             active={state.focus}
             inline={props.inline}
@@ -580,7 +580,7 @@ export function DebugBar(props: { inline?: boolean } = {}) {
             value={language.t(state.focus ? "debugBar.focus.on" : "debugBar.focus.off")}
             onClick={() => void toggleFocus()}
           />
-        )}
+        </Show>
       </div>
     </aside>
   )

packages/app/src/components/dialog-connect-provider.tsx

@@ -12,7 +12,7 @@ import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { showToast } from "@/utils/toast"
-import { type Accessor, type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
+import { type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useParams } from "@solidjs/router"
 import { ExternalLink } from "@/components/external-link"
@@ -41,7 +41,7 @@ export function useProviderConnectController(options: { onBack?: () => void } =
 }
 
 export const DialogConnectProvider: Component<{
-  directory?: Accessor<string | undefined>
+  directory?: string
   controller?: ReturnType<typeof useProviderConnectController>
 }> = (props) => {
   const fallback = useProviderConnectController()
@@ -137,13 +137,9 @@ export const DialogConnectProvider: Component<{
   )
 }
 
-function ProviderPicker(props: {
-  directory?: Accessor<string | undefined>
-  onSelect: (provider: string) => void
-  onPrepare?: () => void
-}) {
+function ProviderPicker(props: { directory?: string; onSelect: (provider: string) => void; onPrepare?: () => void }) {
   const settings = useSettings()
-  const integrations = useIntegrations(() => props.directory?.())
+  const integrations = useIntegrations(() => props.directory)
   if (settings.general.newLayoutDesigns())
     return <ProviderPickerV2 integrations={integrations.list} onSelect={props.onSelect} onPrepare={props.onPrepare} />
   const language = useLanguage()
@@ -364,7 +360,7 @@ function ProviderPickerV2(props: {
 
 function ProviderConnection(props: {
   provider: string
-  directory?: Accessor<string | undefined>
+  directory?: string
   onBack: () => void
   setBack: (handler: () => void) => void
 }) {
@@ -374,8 +370,8 @@ function ProviderConnection(props: {
   const language = useLanguage()
   const settings = useSettings()
   const newLayout = settings.general.newLayoutDesigns
-  const providers = useProviders(() => props.directory?.())
-  const directory = () => props.directory?.() ?? decode64(params.dir)
+  const providers = useProviders(() => props.directory)
+  const directory = () => props.directory ?? decode64(params.dir)
 
   const controller = createProviderConnectionController({
     provider: () => props.provider,

packages/app/src/components/dialog-manage-models.tsx

@@ -31,7 +31,7 @@ export const DialogManageModels: Component = () => {
   const directory = () => decode64(local.slug())
 
   const handleConnectProvider = () => {
-    void dialog.show(() => <DialogConnectProvider directory={directory} />)
+    void dialog.show(() => <DialogConnectProvider directory={directory()} />)
   }
   const providerRank = (id: string) => popularProviders.indexOf(id)
   const providerList = (providerID: string) => local.model.list().filter((x) => x.provider.id === providerID)
@@ -123,7 +123,7 @@ export const DialogManageModelsV2: Component = () => {
   const directory = () => decode64(local.slug())
 
   const handleConnectProvider = () => {
-    void dialog.show(() => <DialogConnectProvider directory={directory} />)
+    void dialog.show(() => <DialogConnectProvider directory={directory()} />)
   }
   const providerList = (providerID: string) => local.model.list().filter((x) => x.provider.id === providerID)
   const providerVisible = (providerID: string) =>

packages/app/src/components/dialog-release-notes.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js"
+import { createSignal, Index, Show } from "solid-js"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -83,61 +83,71 @@ export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
           {/* Bottom section - buttons and indicators (fixed position) */}
           <div class="flex flex-col gap-12">
             <div class="flex flex-col items-start gap-3">
-              {isLast() ? (
+              <Show
+                when={isLast()}
+                fallback={
+                  <Button variant="secondary" size="large" onClick={handleNext}>
+                    {language.t("dialog.releaseNotes.action.next")}
+                  </Button>
+                }
+              >
                 <Button variant="primary" size="large" onClick={handleClose}>
                   {language.t("dialog.releaseNotes.action.getStarted")}
                 </Button>
-              ) : (
-                <Button variant="secondary" size="large" onClick={handleNext}>
-                  {language.t("dialog.releaseNotes.action.next")}
-                </Button>
-              )}
+              </Show>
 
               <Button variant="ghost" size="small" onClick={handleDisable}>
                 {language.t("dialog.releaseNotes.action.hideFuture")}
               </Button>
             </div>
 
-            {paged() && (
+            <Show when={paged()}>
               <div class="flex items-center gap-1.5 -my-2.5">
-                {props.highlights.map((_, i) => (
-                  <button
-                    type="button"
-                    class="h-6 flex items-center cursor-pointer bg-transparent border-none p-0 transition-all duration-200"
-                    classList={{
-                      "w-8": i === index(),
-                      "w-3": i !== index(),
-                    }}
-                    onClick={() => setIndex(i)}
-                  >
-                    <div
-                      class="w-full h-0.5 rounded-[1px] transition-colors duration-200"
+                <Index each={props.highlights}>
+                  {(_, i) => (
+                    <button
+                      type="button"
+                      class="h-6 flex items-center cursor-pointer bg-transparent border-none p-0 transition-all duration-200"
                       classList={{
-                        "bg-icon-strong-base": i === index(),
-                        "bg-icon-weak-base": i !== index(),
+                        "w-8": i === index(),
+                        "w-3": i !== index(),
                       }}
-                    />
-                  </button>
-                ))}
+                      onClick={() => setIndex(i)}
+                    >
+                      <div
+                        class="w-full h-0.5 rounded-[1px] transition-colors duration-200"
+                        classList={{
+                          "bg-icon-strong-base": i === index(),
+                          "bg-icon-weak-base": i !== index(),
+                        }}
+                      />
+                    </button>
+                  )}
+                </Index>
               </div>
-            )}
+            </Show>
           </div>
         </div>
 
         {/* Right side - Media content (edge to edge) */}
-        {feature()?.media && (
-          <div class="flex-1 min-w-0 bg-surface-base overflow-hidden rounded-r-xl">
-            {feature()!.media!.type === "image" ? (
-              <img
-                src={feature()!.media!.src}
-                alt={feature()!.media!.alt ?? feature()?.title ?? language.t("dialog.releaseNotes.media.alt")}
-                class="w-full h-full object-cover"
-              />
-            ) : (
-              <video src={feature()!.media!.src} autoplay loop muted playsinline class="w-full h-full object-cover" />
-            )}
-          </div>
-        )}
+        <Show when={feature()?.media}>
+          {(media) => (
+            <div class="flex-1 min-w-0 bg-surface-base overflow-hidden rounded-r-xl">
+              <Show
+                when={media().type === "image"}
+                fallback={
+                  <video src={media().src} autoplay loop muted playsinline class="w-full h-full object-cover" />
+                }
+              >
+                <img
+                  src={media().src}
+                  alt={media().alt ?? feature()?.title ?? language.t("dialog.releaseNotes.media.alt")}
+                  class="w-full h-full object-cover"
+                />
+              </Show>
+            </div>
+          )}
+        </Show>
       </div>
     </Dialog>
   )

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

@@ -37,7 +37,7 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
     void import("./dialog-connect-provider").then((x) => {
       const controller = x.useProviderConnectController()
       controller.select(provider)
-      void dialog.show(() => <x.DialogConnectProvider controller={controller} directory={directory} />)
+      void dialog.show(() => <x.DialogConnectProvider controller={controller} directory={directory()} />)
     })
   }
 

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

@@ -26,7 +26,7 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
     void import("./dialog-connect-provider").then((x) => {
       const controller = x.useProviderConnectController()
       controller.select(provider)
-      void dialog.show(() => <x.DialogConnectProvider controller={controller} directory={directory} />)
+      void dialog.show(() => <x.DialogConnectProvider controller={controller} directory={directory()} />)
     })
   }
 

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

@@ -148,7 +148,7 @@ export function ModelSelectorPopover(props: {
   const handleConnectProvider = () => {
     close("provider")
     void import("./dialog-connect-provider").then((x) => {
-      void dialog.show(() => <x.DialogConnectProvider directory={directory} />)
+      void dialog.show(() => <x.DialogConnectProvider directory={directory()} />)
     })
   }
   const language = useLanguage()
@@ -240,7 +240,7 @@ export function ModelSelectorPopoverV2(props: {
       trigger={props.trigger}
       models={controller.models}
       groups={controller.groups}
-      current={controller.current}
+      current={controller.current()}
       select={controller.select}
       onManage={() => {
         void import("./dialog-manage-models").then((module) => {
@@ -295,7 +295,7 @@ function ModelSelectorPopoverV2View(props: {
   trigger: ModelSelectorTrigger
   models: (search: string) => ModelItem[]
   groups: (models: ModelItem[]) => { category: string; items: ModelItem[] }[]
-  current: () => string | undefined
+  current: string | undefined
   select: (item: ModelItem) => void
   onManage: () => void
   onClose: () => void
@@ -310,7 +310,7 @@ function ModelSelectorPopoverV2View(props: {
   const groups = createMemo(() => props.groups(models()))
   const keys = () => [...models().map(modelKey), manageKey]
   const initialActive = () => {
-    const selected = props.current()
+    const selected = props.current
     const options = keys()
     if (selected && options.includes(selected)) return selected
     return options[0] ?? ""
@@ -453,7 +453,7 @@ function ModelSelectorPopoverV2View(props: {
                       <MenuV2.GroupLabel class="gap-2 px-3">
                         <span class="min-w-0 truncate">{group.items[0].provider.name}</span>
                       </MenuV2.GroupLabel>
-                      <MenuV2.RadioGroup value={props.current()}>
+                      <MenuV2.RadioGroup value={props.current}>
                         <For each={group.items}>
                           {(item) => (
                             <TooltipV2
@@ -473,7 +473,7 @@ function ModelSelectorPopoverV2View(props: {
                               <MenuV2.RadioItem
                                 value={modelKey(item)}
                                 data-option-key={modelKey(item)}
-                                data-selected-model={props.current() === modelKey(item) ? true : undefined}
+                                data-selected-model={props.current === modelKey(item) ? true : undefined}
                                 class="scroll-my-6 w-full"
                                 classList={{ "!bg-v2-overlay-simple-overlay-hover": store.active === modelKey(item) }}
                                 onMouseEnter={() => {
@@ -529,7 +529,7 @@ export const DialogSelectModel: Component<{ provider?: string; model?: ModelStat
 
   const provider = () => {
     void import("./dialog-connect-provider").then((x) => {
-      void dialog.show(() => <x.DialogConnectProvider directory={directory} />)
+      void dialog.show(() => <x.DialogConnectProvider directory={directory()} />)
     })
   }
 

packages/app/src/components/server/server-row.tsx

@@ -96,13 +96,16 @@ export function ServerRow(props: ServerRowProps) {
             {(conn) => (
               <div class="flex flex-row gap-3">
                 <span>
-                  {conn().http.username ? (
+                  <Show
+                    when={conn().http.username}
+                    fallback={<span class="text-text-weaker">{language.t("server.row.noUsername")}</span>}
+                  >
                     <span class="text-text-weak">{conn().http.username}</span>
-                  ) : (
-                    <span class="text-text-weaker">{language.t("server.row.noUsername")}</span>
-                  )}
+                  </Show>
                 </span>
-                {conn().http.password && <span class="text-text-weak">••••••••</span>}
+                <Show when={conn().http.password}>
+                  <span class="text-text-weak">••••••••</span>
+                </Show>
               </div>
             )}
           </Show>

packages/app/src/components/session/session-sortable-tab-v2.tsx

@@ -12,7 +12,7 @@ import { FileVisual } from "./session-sortable-tab"
 
 export function SortableTabV2(props: {
   tab: string
-  index: () => number
+  index: number
   temporary?: boolean
   onTabClose: (tab: string) => void
   onTabDoubleClick?: (tab: string) => void
@@ -26,7 +26,7 @@ export function SortableTabV2(props: {
       return props.tab
     },
     get index() {
-      return props.index()
+      return props.index
     },
   })
   const path = createMemo(() => file.pathFromTab(props.tab))

packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx

@@ -14,7 +14,7 @@ import { focusTerminalById } from "@/pages/session/helpers"
 
 export function SortableTerminalTabV2(props: {
   terminal: LocalPTY
-  index: () => number
+  index: number
   newLayout: boolean
   onClose?: () => void
 }): JSX.Element {
@@ -25,7 +25,7 @@ export function SortableTerminalTabV2(props: {
       return props.terminal.id
     },
     get index() {
-      return props.index()
+      return props.index
     },
   })
   const [store, setStore] = createStore({

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

@@ -1,5 +1,6 @@
 import { Component, For, Show, createMemo, lazy, onCleanup, onMount } from "solid-js"
 import { createStore } from "solid-js/store"
+import { Dynamic } from "solid-js/web"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -424,9 +425,9 @@ function SettingsKeybindsV2() {
       filtered={controller.catalog.filtered}
       title={controller.catalog.title}
       keybind={controller.catalog.keybind}
-      active={controller.capture.active}
+      active={controller.capture.active()}
       onCapture={controller.capture.toggle}
-      hasOverrides={controller.settings.hasOverrides}
+      hasOverrides={controller.settings.hasOverrides()}
       onReset={controller.settings.reset}
     />
   )
@@ -437,9 +438,9 @@ function SettingsKeybindsV2View(props: {
   filtered: (query: string) => Map<KeybindGroup, string[]>
   title: (id: string) => string
   keybind: (id: string) => string
-  active: () => string | null
+  active: string | null
   onCapture: (id: string) => void
-  hasOverrides: () => boolean
+  hasOverrides: boolean
   onReset: () => void
 }) {
   const language = useLanguage()
@@ -455,7 +456,7 @@ function SettingsKeybindsV2View(props: {
             <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.shortcuts.description")}</span>
           </div>
-          <ButtonV2 variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides()}>
+          <ButtonV2 variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides}>
             {language.t("settings.shortcuts.reset.button")}
           </ButtonV2>
         </div>
@@ -501,12 +502,12 @@ function SettingsKeybindsV2View(props: {
                             data-keybind-id={id}
                             classList={{
                               "settings-v2-keybind-button": true,
-                              "settings-v2-keybind-button--active": props.active() === id,
+                              "settings-v2-keybind-button--active": props.active === id,
                             }}
                             onClick={() => props.onCapture(id)}
                           >
                             <Show
-                              when={props.active() === id}
+                              when={props.active === id}
                               fallback={props.keybind(id) || language.t("settings.shortcuts.unassigned")}
                             >
                               {language.t("settings.shortcuts.pressKeys")}
@@ -677,8 +678,6 @@ export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
     </Show>
   )
 
-  const List = props.v2 ? SettingsListV2 : SettingsList
-
   const groups = (
     <div
       classList={{
@@ -703,7 +702,7 @@ export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
               >
                 {language.t(groupKey[group])}
               </h3>
-              <List>
+              <Dynamic component={props.v2 ? SettingsListV2 : SettingsList}>
                 <For each={filtered().get(group) ?? []}>
                   {(id) => (
                     <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
@@ -738,7 +737,7 @@ export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
                     </div>
                   )}
                 </For>
-              </List>
+              </Dynamic>
             </div>
           </Show>
         )}

packages/app/src/components/settings-server-picker.tsx

@@ -20,8 +20,8 @@ export function SettingsServerDataScope(props: ParentProps<{ server: ServerConne
   const serverCtx = () => global.ensureServerCtx(props.server)
   return (
     <QueryClientProvider client={serverCtx().queryClient}>
-      <ServerSDKProvider server={() => props.server}>
-        <ServerSyncProvider server={() => props.server}>
+      <ServerSDKProvider server={props.server}>
+        <ServerSyncProvider server={props.server}>
           <ModelsProvider>{props.children}</ModelsProvider>
         </ServerSyncProvider>
       </ServerSDKProvider>

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

@@ -149,7 +149,7 @@ export const DialogSettings: Component<{
         </TabsV2.Content>
         <SettingsServerScope>
           <TabsV2.Content value="providers" class="settings-v2-panel">
-            <SettingsProvidersV2 directory={directory} onBack={showProviders} />
+            <SettingsProvidersV2 directory={directory()} onBack={showProviders} />
           </TabsV2.Content>
           <TabsV2.Content value="models" class="settings-v2-panel">
             <SettingsModelsV2 />

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

@@ -4,7 +4,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { showToast } from "@/utils/toast"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
-import { createMemo, type Accessor, type Component, For, Show } from "solid-js"
+import { createMemo, type Component, For, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { useServerSDK } from "@/context/server-sdk"
 import { useServerSync } from "@/context/server-sync"
@@ -32,14 +32,14 @@ const PROVIDER_NOTES = [
 const PROVIDER_ICON_SIZE = 16
 
 export const SettingsProvidersV2: Component<{
-  directory: Accessor<string | undefined>
+  directory: string | undefined
   onBack?: () => void
 }> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
   const serverSdk = useServerSDK()
   const serverSync = useServerSync()
-  const providers = useProviders(props.directory)
+  const providers = useProviders(() => props.directory)
   const providerConnect = useProviderConnectController({ onBack: props.onBack })
 
   const connect = (provider?: string) => {
@@ -105,7 +105,7 @@ export const SettingsProvidersV2: Component<{
   }
 
   const disconnect = async (providerID: string, name: string) => {
-    const location = props.directory() ? { directory: props.directory() } : undefined
+    const location = props.directory ? { directory: props.directory } : undefined
     await serverSdk()
       .api.integration.get({ integrationID: providerID, location })
       .then(async (integration) => {

packages/app/src/components/status-popover-body.tsx

@@ -1,16 +1,7 @@
 import { Switch } from "@opencode-ai/ui/switch"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { showToast } from "@/utils/toast"
-import {
-  type Accessor,
-  createEffect,
-  createMemo,
-  createResource,
-  For,
-  type JSXElement,
-  onCleanup,
-  Show,
-} from "solid-js"
+import { createEffect, createMemo, createResource, For, type JSXElement, onCleanup, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
@@ -109,7 +100,7 @@ type ServerStatusItem = {
   onSelect: () => void
 }
 
-export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
+export function StatusPopoverBody(props: { shown: boolean }) {
   const sync = useSync()
   const sdk = useSDK()
   const global = useGlobal()
@@ -125,10 +116,6 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
     })
   }
 
-  createEffect(() => {
-    if (!props.shown()) return
-  })
-
   let dialogRun = 0
   let dialogDead = false
   onCleanup(() => {
@@ -147,7 +134,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
   const lspItems = createMemo(() => sync().data.lsp ?? [])
   const lspCount = createMemo(() => lspItems().length)
   const [pluginList] = createResource(
-    () => (props.shown() ? sdk().directory : undefined),
+    () => (props.shown ? sdk().directory : undefined),
     (directory) =>
       sdk()
         .api.plugin.list({ location: { directory } })

packages/app/src/components/status-popover.tsx

@@ -74,7 +74,7 @@ export function StatusPopover() {
             <div class="w-[360px] h-14 rounded-xl bg-background-strong shadow-[var(--shadow-lg-border-base)]" />
           }
         >
-          <Body shown={shown} />
+          <Body shown={shown()} />
         </Suspense>
       </Show>
     </Popover>
@@ -114,7 +114,7 @@ function DirectoryStatusPopover() {
     onOpenChange: setShown,
     body: () => (
       <StatusPopoverBody shown={shown()}>
-        <Body shown={shown} />
+        <Body shown={shown()} />
       </StatusPopoverBody>
     ),
   }))

packages/app/src/components/terminal.tsx

@@ -175,6 +175,7 @@ export const Terminal = (props: TerminalProps) => {
   const settings = useSettings()
   const theme = useTheme()
   const language = useLanguage()
+  // Intentional mount-time capture: the imperative xterm/WebSocket lifecycle needs stable values, and Terminal remounts when the SDK scope changes.
   const directory = sdk().directory
   const url = sdk().url
   let container!: HTMLDivElement

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

@@ -22,14 +22,14 @@ export function TabNavItem(props: {
   ref?: Ref<HTMLDivElement>
   href: string
   server: ServerConnection.Key
-  session: () => SessionInfo | undefined
+  session: SessionInfo | undefined
   fallbackTitle?: string
   onRename: (title: string) => Promise<void>
   onClose: () => void
   onNavigate: () => void
   active?: boolean
   forceTruncate?: boolean
-  suppressNavigation?: () => boolean
+  suppressNavigation?: boolean
   dragging?: boolean
   pressed?: boolean
   hidden?: boolean
@@ -52,22 +52,22 @@ export function TabNavItem(props: {
     if (conn) return global.ensureServerCtx(conn)
   })
   const project = createMemo(() => {
-    const session = props.session()
+    const session = props.session
     if (!session) return
     return projectForSession(session, serverCtx()?.projects.list() ?? [])
   })
   const title = createMemo(() => {
-    const session = props.session()
+    const session = props.session
     return session ? sessionLabel(session) : props.fallbackTitle
   })
 
   const projectName = createMemo(() => {
-    const session = props.session()
+    const session = props.session
     if (!session) return
     return displayName(project() ?? { worktree: session.location.directory })
   })
   const previewPath = createMemo(() => {
-    const session = props.session()
+    const session = props.session
     if (!session) return
     const home = serverCtx()?.sync.data.path.home
     return home ? session.location.directory.replace(home, "~") : session.location.directory
@@ -80,7 +80,7 @@ export function TabNavItem(props: {
   })
 
   const [popoverOpen, setPopoverOpen] = createSignal(false)
-  const previewBlocked = () => !!props.dragging || editing() || !!props.pressed || !props.session()
+  const previewBlocked = () => !!props.dragging || editing() || !!props.pressed || !props.session
 
   const measureTitleOverflow = () => {
     if (!titleEl || editing()) {
@@ -121,7 +121,7 @@ export function TabNavItem(props: {
   const closeRename = async (save: boolean) => {
     if (rename.isPending || !editing()) return
 
-    const original = props.session()?.title ?? ""
+    const original = props.session?.title ?? ""
     const next = (titleEl.textContent ?? "").trim()
 
     titleEl.scrollLeft = 0
@@ -146,7 +146,7 @@ export function TabNavItem(props: {
     event.preventDefault()
     event.stopPropagation()
     if (!canOpenTabRename(props.dragging, editing(), rename.isPending)) return
-    const session = props.session()
+    const session = props.session
     if (!session) return
     titleEl.textContent = session.title ?? ""
     setEditing(true)
@@ -213,7 +213,7 @@ export function TabNavItem(props: {
           // Navigate on mousedown to shave the press-release delay off tab switches.
           if (event.button !== 0) return
           if (editing()) return
-          if (props.suppressNavigation?.()) return
+          if (props.suppressNavigation) return
           props.onNavigate()
         }}
         onClick={(event) => {
@@ -221,14 +221,14 @@ export function TabNavItem(props: {
           // Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
           if (event.detail > 0) return
           if (editing()) return
-          if (props.suppressNavigation?.()) return
+          if (props.suppressNavigation) return
           props.onNavigate()
         }}
         class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base group-data-[editing='true']:text-v2-text-text-base [-webkit-user-drag:none]"
       >
         <span data-slot="project-avatar-slot" class="flex size-4 shrink-0 items-center justify-center">
           <Show
-            when={props.session()}
+            when={props.session}
             keyed
             fallback={
               <span class="block size-4 rounded-[3px] border border-v2-border-border-muted" aria-hidden="true" />
@@ -267,7 +267,7 @@ export function TabNavItem(props: {
             }
             if (event.key !== "Escape") return
             event.preventDefault()
-            titleEl.textContent = props.session()?.title ?? ""
+            titleEl.textContent = props.session?.title ?? ""
             void closeRename(false)
           }}
           onBlur={() => void closeRename(true)}
@@ -308,7 +308,7 @@ export function TabNavItem(props: {
       }}
       data={{
         projectName: projectName(),
-        title: props.session()?.title,
+        title: props.session?.title,
         path: previewPath(),
         serverName: serverLabel(),
       }}
@@ -323,7 +323,7 @@ export function DraftTabItem(props: {
   active?: boolean
   onNavigate: () => void
   onClose: () => void
-  suppressNavigation?: () => boolean
+  suppressNavigation?: boolean
   dragging?: boolean
   pressed?: boolean
   hidden?: boolean
@@ -366,14 +366,14 @@ export function DraftTabItem(props: {
         onMouseDown={(event) => {
           // Navigate on mousedown to shave the press-release delay off tab switches.
           if (event.button !== 0) return
-          if (props.suppressNavigation?.()) return
+          if (props.suppressNavigation) return
           props.onNavigate()
         }}
         onClick={(event) => {
           event.preventDefault()
           // Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
           if (event.detail > 0) return
-          if (props.suppressNavigation?.()) return
+          if (props.suppressNavigation) return
           props.onNavigate()
         }}
         class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base [-webkit-user-drag:none]"

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

@@ -24,10 +24,10 @@ import type { SessionInfo } from "@opencode-ai/client/promise"
 function SessionTabSlot(props: {
   tab: SessionTab
   id: string
-  index: () => number
-  active: () => boolean
+  index: number
+  active: boolean
   forceTruncate: boolean
-  session: () => SessionInfo | undefined
+  session: SessionInfo | undefined
   fallbackTitle?: string
   onRename: (title: string) => Promise<void>
   onNavigate: (element: HTMLDivElement) => void
@@ -38,7 +38,7 @@ function SessionTabSlot(props: {
       return props.id
     },
     get index() {
-      return props.index()
+      return props.index
     },
   })
   let ref!: HTMLDivElement
@@ -48,7 +48,7 @@ function SessionTabSlot(props: {
       ref={sortable.ref}
       data-titlebar-tab-slot
       data-tab-key={props.id}
-      data-active={props.active()}
+      data-active={props.active}
       class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
     >
       <TabNavItem
@@ -62,7 +62,7 @@ function SessionTabSlot(props: {
         onRename={props.onRename}
         onNavigate={() => props.onNavigate(ref)}
         onClose={props.onClose}
-        active={props.active()}
+        active={props.active}
         forceTruncate={props.forceTruncate}
         dragging={sortable.isDragSource()}
       />
@@ -73,34 +73,34 @@ function SessionTabSlot(props: {
 function SessionTabEntry(props: {
   tab: SessionTab
   id: string
-  index: () => number
-  active: () => boolean
+  index: number
+  active: boolean
   forceTruncate: boolean
-  serverCtx: () => ServerCtx | undefined
+  serverCtx: ServerCtx | undefined
   onVisibleChange: (visible: boolean) => void
   onNavigate: (element: HTMLDivElement) => void
   onClose: () => void
 }) {
   const tabs = useTabs()
   const language = useLanguage()
-  const sdk = createMemo(() => props.serverCtx()?.sdk ?? null)
-  const cachedSession = createMemo(() => props.serverCtx()?.sync.session.peek(props.tab.sessionId))
+  const sdk = createMemo(() => props.serverCtx?.sdk ?? null)
+  const cachedSession = createMemo(() => props.serverCtx?.sync.session.peek(props.tab.sessionId))
   const persisted = createMemo(() => tabs.info[props.id])
   const [loadedSession] = createResource(
     () => {
-      const ctx = props.serverCtx()
+      const ctx = props.serverCtx
       return ctx ? { id: props.tab.sessionId, ctx } : null
     },
     ({ id, ctx }) => ctx.sync.session.resolve(id).catch(() => undefined),
   )
   const session = createMemo(() => cachedSession() ?? loadedSession())
-  const missingSession = createMemo(() => !!props.serverCtx() && !loadedSession.loading && !session())
+  const missingSession = createMemo(() => !!props.serverCtx && !loadedSession.loading && !session())
   const visible = createMemo(() => !!session() || missingSession() || !!persisted()?.title)
   let prefetched = false
 
   const rename = async (title: string) => {
     const value = session()
-    const ctx = props.serverCtx()
+    const ctx = props.serverCtx
     if (!value || !ctx) return
 
     ctx.sync.session.remember({ ...value, title })
@@ -108,7 +108,7 @@ function SessionTabEntry(props: {
       await ctx.sdk.api.session.rename({ sessionID: value.id, title })
     } catch (err) {
       const current = session()
-      const currentCtx = props.serverCtx()
+      const currentCtx = props.serverCtx
       if (current && currentCtx) currentCtx.sync.session.remember({ ...current, title: value.title })
       showToast({
         title: language.t("common.requestFailed"),
@@ -120,7 +120,7 @@ function SessionTabEntry(props: {
   createEffect(() => props.onVisibleChange(visible()))
 
   createEffect(() => {
-    const ctx = props.serverCtx()
+    const ctx = props.serverCtx
     const value = session()
     if (!ctx || !value || prefetched) return
     prefetched = true
@@ -157,7 +157,7 @@ function SessionTabEntry(props: {
         index={props.index}
         active={props.active}
         forceTruncate={props.forceTruncate}
-        session={session}
+        session={session()}
         fallbackTitle={persisted()?.title ?? (missingSession() ? language.t("session.tab.unknown") : undefined)}
         onRename={rename}
         onNavigate={props.onNavigate}
@@ -170,8 +170,8 @@ function SessionTabEntry(props: {
 function DraftTabSlot(props: {
   tab: Extract<Tab, { type: "draft" }>
   id: string
-  index: () => number
-  active: () => boolean
+  index: number
+  active: boolean
   title: string
   onNavigate: (element: HTMLDivElement) => void
   onClose: () => void
@@ -181,7 +181,7 @@ function DraftTabSlot(props: {
       return props.id
     },
     get index() {
-      return props.index()
+      return props.index
     },
   })
   let ref!: HTMLDivElement
@@ -191,7 +191,7 @@ function DraftTabSlot(props: {
       ref={sortable.ref}
       data-titlebar-tab-slot
       data-tab-key={props.id}
-      data-active={props.active()}
+      data-active={props.active}
       class="relative flex w-56 min-w-7 max-w-56 flex-shrink"
     >
       <DraftTabItem
@@ -202,7 +202,7 @@ function DraftTabSlot(props: {
         title={props.title}
         onNavigate={() => props.onNavigate(ref)}
         onClose={props.onClose}
-        active={props.active()}
+        active={props.active}
         dragging={sortable.isDragSource()}
       />
     </div>
@@ -211,7 +211,7 @@ function DraftTabSlot(props: {
 
 export function TitlebarTabStrip(props: {
   tabs: Tab[]
-  currentTab: () => Tab | undefined
+  currentTab: Tab | undefined
   forceTruncate: boolean
   onNavigate: (tab: Tab, el?: HTMLDivElement) => void
   onClose: (tab: Tab) => void
@@ -248,7 +248,7 @@ export function TitlebarTabStrip(props: {
   ])
 
   function selectAdjacentTab(offset: -1 | 1) {
-    const current = props.currentTab()
+    const current = props.currentTab
     const key = adjacentTabKey(visibleTabIds(), current ? tabKey(current) : undefined, offset)
     const next = props.tabs.find((tab) => tabKey(tab) === key)
     if (next) props.onNavigate(next)
@@ -350,10 +350,10 @@ export function TitlebarTabStrip(props: {
                     <SessionTabEntry
                       tab={tab}
                       id={id}
-                      index={visibleIndex}
-                      active={() => props.currentTab() === tab}
+                      index={visibleIndex()}
+                      active={props.currentTab === tab}
                       forceTruncate={props.forceTruncate}
-                      serverCtx={serverCtx}
+                      serverCtx={serverCtx()}
                       onVisibleChange={(visible) => setVisibility(id, visible)}
                       onNavigate={(element) => {
                         ref = element
@@ -368,8 +368,8 @@ export function TitlebarTabStrip(props: {
                   <DraftTabSlot
                     tab={tab}
                     id={id}
-                    index={visibleIndex}
-                    active={() => props.currentTab() === tab}
+                    index={visibleIndex()}
+                    active={props.currentTab === tab}
                     title={language.t("command.session.new")}
                     onNavigate={(element) => {
                       ref = element

packages/app/src/components/titlebar.tsx

@@ -46,8 +46,8 @@ const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px
 const macTrafficLightsBaseWidth = 84
 
 export type TitlebarUpdate = {
-  version: () => string | undefined
-  installing: () => boolean
+  version: string | undefined
+  installing: boolean
   install: () => void
 }
 
@@ -121,8 +121,8 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
   const hasProjects = createMemo(() => layout.projects.list().length > 0)
   const nav = createMemo(() => (useV2Titlebar() ? settings.general.showNavigation() : true))
   const updateState = createMemo<TitlebarUpdatePillState>(() => {
-    const installing = props.update?.installing() ?? false
-    const version = props.update?.version()
+    const installing = props.update?.installing ?? false
+    const version = props.update?.version
     return {
       visible: version !== undefined || installing,
       installing,
@@ -392,7 +392,7 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
 
                 <TitlebarTabStrip
                   tabs={tabsStore}
-                  currentTab={currentTab}
+                  currentTab={currentTab()}
                   forceTruncate={tabsAreOverflowing()}
                   onOverflowChange={setTabsAreOverflowing}
                   onNavigate={(tab, el) => {
@@ -657,12 +657,10 @@ function ChannelIndicator(props: { debugTools?: { visible: boolean; toggle: () =
   }
 
   return (
-    <>
-      {["local", "beta", "dev"].includes(channel) && (
-        <div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
-          {channel.toUpperCase()}
-        </div>
-      )}
-    </>
+    <Show when={["local", "beta", "dev"].includes(channel)}>
+      <div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
+        {channel.toUpperCase()}
+      </div>
+    </Show>
   )
 }

packages/app/src/components/windows-app-menu.tsx

@@ -1,4 +1,4 @@
-import { Show, type JSX } from "solid-js"
+import { For, Show, type JSX } from "solid-js"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
@@ -50,7 +50,20 @@ export function WindowsAppMenu(props: {
 
   return (
     <DropdownMenu gutter={4} modal={false} placement="bottom-start">
-      {props.variant === "v2" ? (
+      <Show
+        when={props.variant === "v2"}
+        fallback={
+          <DropdownMenu.Trigger
+            as={IconButton}
+            icon="menu"
+            variant="ghost"
+            class="titlebar-icon rounded-md shrink-0"
+            aria-label={language.t("desktop.menu.ariaLabel")}
+            onPointerDown={rememberFocus}
+            onKeyDown={rememberFocus}
+          />
+        }
+      >
         <div
           data-component="desktop-icon-button"
           class="flex h-7 w-9 shrink-0 items-center justify-center rounded-[6px] px-1"
@@ -65,39 +78,31 @@ export function WindowsAppMenu(props: {
             onKeyDown={rememberFocus}
           />
         </div>
-      ) : (
-        <DropdownMenu.Trigger
-          as={IconButton}
-          icon="menu"
-          variant="ghost"
-          class="titlebar-icon rounded-md shrink-0"
-          aria-label={language.t("desktop.menu.ariaLabel")}
-          onPointerDown={rememberFocus}
-          onKeyDown={rememberFocus}
-        />
-      )}
+      </Show>
       <DropdownMenu.Portal>
         <DropdownMenu.Content class="desktop-app-menu">
           <DropdownMenu.Group>
             <DropdownMenu.GroupLabel class="desktop-app-menu-heading">OpenCode</DropdownMenu.GroupLabel>
-            {DESKTOP_MENU.filter((menu) => desktopMenuVisible(menu, "windows")).map((menu) => (
-              <DesktopMenuSubmenu label={language.t(menu.labelKey)}>
-                {menu.items
-                  ?.filter((entry) => desktopMenuVisible(entry, "windows"))
-                  .map((entry) =>
-                    entry.type === "separator" ? (
-                      <DropdownMenu.Separator />
-                    ) : (
-                      <DesktopMenuItem
-                        label={entry.labelKey ? language.t(entry.labelKey) : ""}
-                        keybind={entry.command ? props.command.keybind(entry.command) : entry.accelerator?.windows}
-                        disabled={entry.command ? commandDisabled(entry.command) : false}
-                        onSelect={() => runEntry(entry)}
-                      />
-                    ),
-                  )}
-              </DesktopMenuSubmenu>
-            ))}
+            <For each={DESKTOP_MENU.filter((menu) => desktopMenuVisible(menu, "windows"))}>
+              {(menu) => (
+                <DesktopMenuSubmenu label={language.t(menu.labelKey)}>
+                  <For each={menu.items?.filter((entry) => desktopMenuVisible(entry, "windows"))}>
+                    {(entry) => {
+                      // Static menu data: an early return keeps the union narrowing a Show fallback would lose.
+                      if (entry.type === "separator") return <DropdownMenu.Separator />
+                      return (
+                        <DesktopMenuItem
+                          label={entry.labelKey ? language.t(entry.labelKey) : ""}
+                          keybind={entry.command ? props.command.keybind(entry.command) : entry.accelerator?.windows}
+                          disabled={entry.command ? commandDisabled(entry.command) : false}
+                          onSelect={() => runEntry(entry)}
+                        />
+                      )
+                    }}
+                  </For>
+                </DesktopMenuSubmenu>
+              )}
+            </For>
           </DropdownMenu.Group>
         </DropdownMenu.Content>
       </DropdownMenu.Portal>

packages/app/src/context/models.tsx

@@ -1,4 +1,4 @@
-import { type Accessor, createMemo, createResource } from "solid-js"
+import { createMemo, createResource } from "solid-js"
 import { createStore } from "solid-js/store"
 import { DateTime } from "luxon"
 import { filter, firstBy, flat, groupBy, mapValues, pipe, uniqueBy, values } from "remeda"
@@ -25,8 +25,8 @@ function modelKey(model: ModelKey) {
 export const { use: useModels, provider: ModelsProvider } = createSimpleContext({
   name: "Models",
   gate: false,
-  init: (props: { directory?: Accessor<string | undefined> } = {}) => {
-    const providers = useProviders(() => props.directory?.())
+  init: (props: { directory?: string } = {}) => {
+    const providers = useProviders(() => props.directory)
 
     const [store, setStore, _, ready] = persisted(
       Persist.global("model", ["model.v1"]),

packages/app/src/context/sdk.tsx

@@ -6,12 +6,9 @@ export type { DirectorySDK } from "./server-sdk"
 const context = createSimpleContext({
   name: "SDK",
   // Resolves the directory-scoped SDK reactively from the (possibly changing) server.
-  init: (props: { directory: string | Accessor<string> }) => {
+  init: (props: { directory: string }) => {
     const serverSDK = useServerSDK()
-    return createMemo(() => {
-      const directory = typeof props.directory === "function" ? props.directory() : props.directory
-      return serverSDK().ensureDirSdkContext(directory)
-    })
+    return createMemo(() => serverSDK().ensureDirSdkContext(props.directory))
   },
 })
 

packages/app/src/context/server-sdk.tsx

@@ -343,13 +343,13 @@ export const { use: useServerSDK, provider: ServerSDKProvider } = createSimpleCo
   name: "ServerSDK",
   // Returns an accessor so the resolved server can change reactively (e.g. a
   // /new-session draft retargeting its server) without re-instantiating the subtree.
-  init: (props: { server?: Accessor<ServerConnection.Any | undefined> }) => {
+  init: (props: { server?: ServerConnection.Any }) => {
     const global = useGlobal()
     const language = useLanguage()
     const server = useServer()
 
     return createMemo<ServerSDK>(() => {
-      const conn = props.server?.() ?? server.current
+      const conn = props.server ?? server.current
       if (!conn) throw new Error(language.t("error.serverSDK.noServerAvailable"))
       return global.ensureServerCtx(conn).sdk
     })

packages/app/src/context/server-sync.tsx

@@ -804,13 +804,13 @@ export const { use: useServerSync, provider: ServerSyncProvider } = createSimple
   name: "ServerSync",
   // Returns an accessor so the resolved server can change reactively without
   // re-instantiating the subtree (mirrors useServerSDK).
-  init: (props: { server?: Accessor<ServerConnection.Any | undefined> }) => {
+  init: (props: { server?: ServerConnection.Any }) => {
     const global = useGlobal()
     const language = useLanguage()
     const server = useServer()
 
     return createMemo<ServerSync>(() => {
-      const conn = props.server?.() ?? server.current
+      const conn = props.server ?? server.current
       if (!conn) throw new Error(language.t("error.serverSDK.noServerAvailable"))
       return global.ensureServerCtx(conn).sync
     })

packages/app/src/pages/directory-layout.tsx

@@ -2,7 +2,7 @@ import { DataProvider } from "@opencode-ai/session-ui/context"
 import { showToast } from "@/utils/toast"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { useLocation, useNavigate, useParams } from "@solidjs/router"
-import { type Accessor, createEffect, createMemo, createResource, onCleanup, type ParentProps, Show } from "solid-js"
+import { createEffect, createMemo, createResource, onCleanup, type ParentProps, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { LocalProvider } from "@/context/local"
 import { SDKProvider } from "@/context/sdk"
@@ -15,9 +15,9 @@ import { useServerSync } from "@/context/server-sync"
 
 export function DirectoryDataProvider(
   props: ParentProps<{
-    directory: string | Accessor<string>
+    directory: string
     draftID?: string
-    server?: Accessor<ServerConnection.Key | undefined>
+    server?: ServerConnection.Key
   }>,
 ) {
   const location = useLocation()
@@ -25,17 +25,16 @@ export function DirectoryDataProvider(
   const params = useParams()
   const sync = useSync()
   const serverSync = useServerSync()
-  const directory = () => (typeof props.directory === "function" ? props.directory() : props.directory)
+  const directory = () => props.directory
   const slug = createMemo(() => base64Encode(directory()))
   const href = (sessionID: string) => {
-    const server = props.server?.()
-    if (server) return sessionHref(server, sessionID)
+    if (props.server) return sessionHref(props.server, sessionID)
     return `/${slug()}/session/${sessionID}`
   }
 
   createEffect(() => {
     // A draft lives at /new-session?draftId=… and has no directory segment to normalize.
-    if (props.draftID || props.server?.()) return
+    if (props.draftID || props.server) return
     const next = sync().data.path.directory
     if (!next || next === directory()) return
     const path = location.pathname.slice(slug().length + 1)

packages/app/src/pages/home.tsx

@@ -39,8 +39,8 @@ export function Home() {
     >
       <ScrollView
         class="h-full [container-type:size]"
-        thumbContainer={scroll.viewport.thumbTrack}
-        thumbHoverTarget={scroll.viewport.hoverTarget}
+        thumbContainer={scroll.viewport.thumbTrack()}
+        thumbHoverTarget={scroll.viewport.hoverTarget()}
         viewportRef={scroll.viewport.setViewport}
         onScroll={(event) => scroll.viewport.update(event.currentTarget.scrollTop)}
         onWheel={scroll.viewport.containOuterWheel}

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

@@ -1,4 +1,4 @@
-import { type Accessor, createMemo, For, type JSX, onCleanup, Show, splitProps } from "solid-js"
+import { createMemo, For, type JSX, onCleanup, Show, splitProps } from "solid-js"
 import { createStore } from "solid-js/store"
 import { DragDropProvider, PointerSensor } from "@dnd-kit/solid"
 import { isSortable, useSortable } from "@dnd-kit/solid/sortable"
@@ -29,16 +29,16 @@ const projectContextMenuID = (server: ServerConnection.Any, directory: string) =
 
 export type HomeProjectsViewProps = {
   language: ReturnType<typeof useLanguage>
-  servers: Accessor<ServerConnection.Any[]>
-  projects: Accessor<LocalProject[]>
-  recentlyClosed: Accessor<LocalProject[]>
-  selection: Accessor<HomeProjectSelection>
-  homedir: Accessor<string>
+  servers: ServerConnection.Any[]
+  projects: LocalProject[]
+  recentlyClosed: LocalProject[]
+  selection: HomeProjectSelection
+  homedir: string
   serverHealth: (server: ServerConnection.Any) => ServerHealth | undefined
   projectsForServer: (server: ServerConnection.Any) => LocalProject[]
   collapsed: (server: ServerConnection.Any) => boolean
-  canDefaultServer: Accessor<boolean>
-  defaultServerKey: Accessor<ServerConnection.Key | null | undefined>
+  canDefaultServer: boolean
+  defaultServerKey: ServerConnection.Key | null | undefined
   canRevealProject: (server: ServerConnection.Any) => boolean
   unseenCount: (server: ServerConnection.Any, project: LocalProject) => number
   onWheel: (event: WheelEvent) => void
@@ -81,9 +81,7 @@ export function HomeProjectsView(props: HomeProjectsViewProps) {
     >
       <div class="flex h-7 min-w-0 shrink-0 items-center justify-between pl-1.5 pr-3">
         <div class="text-v2-text-text-muted [font-weight:530]">{props.language.t("home.projects")}</div>
-        <Show
-          when={props.servers().length === 1 && !(props.projects().length === 0 && props.recentlyClosed().length > 0)}
-        >
+        <Show when={props.servers.length === 1 && !(props.projects.length === 0 && props.recentlyClosed.length > 0)}>
           <TooltipV2 placement="bottom" value={props.language.t("home.project.add")}>
             <IconButtonV2
               data-action="home-add-project"
@@ -91,8 +89,8 @@ export function HomeProjectsView(props: HomeProjectsViewProps) {
               size="large"
               class="titlebar-icon [&_[data-slot=icon-svg]]:text-v2-icon-icon-muted"
               icon={<IconV2 name="folder-add-left" />}
-              disabled={props.serverHealth(props.servers()[0])?.healthy === false}
-              onClick={() => props.onChooseProject(props.servers()[0])}
+              disabled={props.serverHealth(props.servers[0])?.healthy === false}
+              onClick={() => props.onChooseProject(props.servers[0])}
               aria-label={props.language.t("home.project.add")}
             />
           </TooltipV2>
@@ -100,25 +98,20 @@ export function HomeProjectsView(props: HomeProjectsViewProps) {
       </div>
       <ScrollView data-slot="home-projects-scroll" class="min-h-0 min-w-0 shrink">
         <Show
-          when={props.servers().length > 1}
+          when={props.servers.length > 1}
           fallback={
             <div class="pr-3">
               <Show
-                when={props.projects().length > 0}
-                fallback={<HomeProjectEmpty {...props} server={props.servers()[0]} items={props.recentlyClosed()} />}
+                when={props.projects.length > 0}
+                fallback={<HomeProjectEmpty {...props} server={props.servers[0]} items={props.recentlyClosed} />}
               >
-                <HomeProjectList
-                  {...props}
-                  {...contextMenuProps}
-                  server={props.servers()[0]}
-                  items={props.projects()}
-                />
+                <HomeProjectList {...props} {...contextMenuProps} server={props.servers[0]} items={props.projects} />
               </Show>
             </div>
           }
         >
           <div class="flex min-w-0 flex-col gap-4 pr-3">
-            <For each={props.servers()}>
+            <For each={props.servers}>
               {(item) => {
                 const projects = () => props.projectsForServer(item)
                 const healthy = () => !!props.serverHealth(item)?.healthy
@@ -130,7 +123,7 @@ export function HomeProjectsView(props: HomeProjectsViewProps) {
                       server={item}
                       {...props}
                       {...contextMenuProps}
-                      selected={props.selection().server === ServerConnection.key(item) && !props.selection().directory}
+                      selected={props.selection.server === ServerConnection.key(item) && !props.selection.directory}
                       collapsed={collapsed()}
                       health={props.serverHealth(item)}
                     />
@@ -277,8 +270,8 @@ function HomeServerRow(props: {
         <ServerRowMenuView
           server={props.server}
           labels={serverMenuLabels(props.language)}
-          canDefault={props.canDefaultServer()}
-          isDefault={props.defaultServerKey() === ServerConnection.key(props.server)}
+          canDefault={props.canDefaultServer}
+          isDefault={props.defaultServerKey === ServerConnection.key(props.server)}
           canRemove={props.canRemoveServer(props.server)}
           onEdit={props.onEditServer}
           onSetDefault={() => props.onSetDefaultServer(props.server)}
@@ -339,7 +332,7 @@ function HomeProjectList(props: HomeProjectListProps) {
         const source = event.operation.source
         if (event.canceled || !isSortable(source)) return
         if (source.initialIndex !== source.index) props.onMoveProject(props.server, source.id.toString(), source.index)
-        if (props.selection().server !== ServerConnection.key(props.server))
+        if (props.selection.server !== ServerConnection.key(props.server))
           props.onSelectProject(props.server, source.id.toString())
       }}
     >
@@ -350,7 +343,7 @@ function HomeProjectList(props: HomeProjectListProps) {
             row's sortable unregisters on unmount) and discarding animations.
             String keys keep row elements alive and move them on reorder. */}
         <For each={props.items.map((project) => project.worktree)}>
-          {(worktree, index) => <HomeProjectSlot {...props} worktree={worktree} index={index} />}
+          {(worktree, index) => <HomeProjectSlot {...props} worktree={worktree} index={index()} />}
         </For>
       </div>
     </DragDropProvider>
@@ -360,7 +353,7 @@ function HomeProjectList(props: HomeProjectListProps) {
 function HomeProjectSlot(
   props: HomeProjectListProps & {
     worktree: string
-    index: () => number
+    index: number
   },
 ) {
   const initial = props.items.find((item) => item.worktree === props.worktree)
@@ -376,10 +369,9 @@ function HomeProjectSlot(
       project={project()}
       server={props.server}
       index={props.index}
-      serverSelected={props.selection().server === ServerConnection.key(props.server)}
+      serverSelected={props.selection.server === ServerConnection.key(props.server)}
       selected={
-        props.selection().server === ServerConnection.key(props.server) &&
-        props.selection().directory === props.worktree
+        props.selection.server === ServerConnection.key(props.server) && props.selection.directory === props.worktree
       }
       unseen={props.unseenCount(props.server, project())}
     />
@@ -425,7 +417,7 @@ function HomeRecentlyClosedRow(
 ) {
   const unreachable = () => props.serverHealth(props.server)?.healthy === false
   const path = () => {
-    const home = props.homedir()
+    const home = props.homedir
     const worktree = props.project.worktree
     if (home && (worktree === home || worktree.startsWith(`${home}/`))) return `~${worktree.slice(home.length)}`
     return worktree
@@ -451,7 +443,7 @@ function HomeProjectRow(
     HomeProjectsContextMenuProps & {
       project: LocalProject
       server: ServerConnection.Any
-      index: () => number
+      index: number
       serverSelected: boolean
       selected: boolean
       unseen: number
@@ -464,7 +456,7 @@ function HomeProjectRow(
       return props.project.worktree
     },
     get index() {
-      return props.index()
+      return props.index
     },
   })
   let pointerDownSelected: boolean | undefined

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

@@ -6,16 +6,16 @@ export function HomeProjects(props: { projects: HomeProjectsController; scroll:
   return (
     <HomeProjectsView
       language={props.projects.copy.language}
-      servers={props.projects.server.list}
-      projects={props.projects.project.list}
-      recentlyClosed={props.projects.project.recentlyClosed}
-      selection={props.projects.selection.value}
-      homedir={props.projects.project.homedir}
+      servers={props.projects.server.list()}
+      projects={props.projects.project.list()}
+      recentlyClosed={props.projects.project.recentlyClosed()}
+      selection={props.projects.selection.value()}
+      homedir={props.projects.project.homedir()}
       serverHealth={props.projects.server.health}
       projectsForServer={props.projects.server.projects}
       collapsed={props.projects.server.collapsed}
-      canDefaultServer={props.projects.server.canDefault}
-      defaultServerKey={props.projects.server.defaultKey}
+      canDefaultServer={props.projects.server.canDefault()}
+      defaultServerKey={props.projects.server.defaultKey()}
       canRevealProject={props.projects.project.canReveal}
       unseenCount={props.projects.project.unseenCount}
       onWheel={props.scroll.viewport.containWheel}

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

@@ -297,13 +297,13 @@ function groupSessions(records: HomeSessionRecord[], language: ReturnType<typeof
 export type HomeSessionsController = ReturnType<typeof createHomeSessionsController>
 
 export function HomeSessionStatusController(props: {
-  server: Accessor<ServerConnection.Key>
+  server: ServerConnection.Key
   record: HomeSessionRecord
   isOpenTab: (record: HomeSessionRecord) => boolean
   render: (state: { unread: Accessor<boolean>; loading: Accessor<boolean>; open: Accessor<boolean> }) => JSX.Element
 }) {
   const avatar = useSessionTabAvatarState(
-    props.server,
+    () => props.server,
     () => props.record.session.location.directory,
     () => props.record.session.id,
   )

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

@@ -1,5 +1,5 @@
 import type { SessionInfo } from "@opencode-ai/client/promise"
-import { type Accessor, createMemo, For, Show, Suspense } from "solid-js"
+import { 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"
@@ -38,17 +38,17 @@ function isBackgroundOpen(event: MouseEvent) {
 
 export type HomeSessionsViewProps = {
   language: ReturnType<typeof useLanguage>
-  groups: Accessor<HomeSessionGroup[]>
-  showProjectName: Accessor<boolean>
-  server: Accessor<ServerConnection.Key>
-  canCreateSession: Accessor<boolean>
-  searchValue: Accessor<string>
-  searchPlaceholder: Accessor<string>
-  searchOpen: Accessor<boolean>
-  searchLoading: Accessor<boolean>
-  searchResults: Accessor<HomeSessionRecord[]>
-  searchActive: Accessor<string>
-  searchNoResultsLabel: Accessor<string>
+  groups: HomeSessionGroup[]
+  showProjectName: boolean
+  server: ServerConnection.Key
+  canCreateSession: boolean
+  searchValue: string
+  searchPlaceholder: string
+  searchOpen: boolean
+  searchLoading: boolean
+  searchResults: HomeSessionRecord[]
+  searchActive: string
+  searchNoResultsLabel: string
   titleOpacity: (id: HomeSessionGroup["id"]) => number
   isOpenTab: (record: HomeSessionRecord) => boolean
   onCreateSession: () => void
@@ -81,7 +81,7 @@ 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} />
         <Suspense>
-          <Show when={props.groups().length > 0 && props.canCreateSession()}>
+          <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"
@@ -113,16 +113,16 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
           }
         >
           <Show
-            when={props.groups().length > 0}
+            when={props.groups.length > 0}
             fallback={
               <HomeSessionsEmpty
-                onNewSession={props.canCreateSession() ? props.onCreateSession : undefined}
+                onNewSession={props.canCreateSession ? props.onCreateSession : undefined}
                 language={props.language}
               />
             }
           >
             <div ref={props.onSetContent} class="flex flex-col pt-3 pr-3 pb-16">
-              <For each={props.groups()}>
+              <For each={props.groups}>
                 {(group, index) => (
                   <>
                     <HomeSessionGroupHeader
@@ -132,7 +132,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
                       elevated={index() === 0}
                     />
                     <div
-                      class={`flex min-w-0 flex-col gap-px pt-4 ${index() === props.groups().length - 1 ? "" : "mb-6"}`}
+                      class={`flex min-w-0 flex-col gap-px pt-4 ${index() === props.groups.length - 1 ? "" : "mb-6"}`}
                     >
                       <For each={group.sessions}>{(record) => <HomeSessionRow {...props} record={record} />}</For>
                     </div>
@@ -205,7 +205,7 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
   return (
     <div class="w-full">
       <div ref={props.onSetSearchRoot} data-component="home-session-search" class="relative z-30 w-full">
-        <Show when={props.searchOpen()}>
+        <Show when={props.searchOpen}>
           <div
             data-component="home-session-search-panel"
             class={`
@@ -217,7 +217,7 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
             <div class="flex flex-col pt-9">
               <div id={HOME_SESSION_SEARCH_RESULTS_ID} role="listbox" class="flex flex-col gap-4 pt-4">
                 <Show
-                  when={!props.searchLoading()}
+                  when={!props.searchLoading}
                   fallback={
                     <div class="flex items-center justify-center px-4 py-3 text-v2-text-text-muted [font-weight:440]">
                       <Spinner class="size-4" />
@@ -225,7 +225,7 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
                   }
                 >
                   <Show
-                    when={props.searchResults().length > 0}
+                    when={props.searchResults.length > 0}
                     fallback={
                       <p
                         class={`
@@ -233,7 +233,7 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
                           text-v2-text-text-muted [font-weight:440]
                         `}
                       >
-                        {props.searchNoResultsLabel()}
+                        {props.searchNoResultsLabel}
                       </p>
                     }
                   >
@@ -248,12 +248,12 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
                       </p>
                       <ScrollView class="max-h-80" viewportRef={props.onSetSearchList}>
                         <div class="flex flex-col gap-px pb-2">
-                          <For each={props.searchResults()}>
+                          <For each={props.searchResults}>
                             {(record) => (
                               <HomeSessionSearchResultRow
                                 {...props}
                                 record={record}
-                                selected={props.searchActive() === homeSessionSearchKey(record)}
+                                selected={props.searchActive === homeSessionSearchKey(record)}
                               />
                             )}
                           </For>
@@ -280,16 +280,14 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
               relative z-20 min-w-0 flex-1 border-0 bg-transparent outline-0
               text-v2-text-text-base [font-weight:440] placeholder:text-v2-text-text-faint
             `}
-            value={props.searchValue()}
-            placeholder={props.searchPlaceholder()}
-            aria-label={props.searchPlaceholder()}
-            aria-expanded={props.searchOpen()}
+            value={props.searchValue}
+            placeholder={props.searchPlaceholder}
+            aria-label={props.searchPlaceholder}
+            aria-expanded={props.searchOpen}
             aria-controls={HOME_SESSION_SEARCH_RESULTS_ID}
             aria-autocomplete="list"
             aria-activedescendant={
-              props.searchActive() && props.searchOpen()
-                ? `home-session-search-option-${props.searchActive()}`
-                : undefined
+              props.searchActive && props.searchOpen ? `home-session-search-option-${props.searchActive}` : undefined
             }
             onFocus={props.onSearchFocus}
             onInput={(event) => props.onSearchInput(event.currentTarget.value)}
@@ -300,7 +298,7 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
                 event.currentTarget.blur()
                 return
               }
-              if (!props.searchOpen() || props.searchResults().length === 0) return
+              if (!props.searchOpen || props.searchResults.length === 0) return
               if (event.altKey || event.metaKey) return
               if (event.key === "ArrowDown") {
                 event.preventDefault()
@@ -318,14 +316,14 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
               }
             }}
           />
-          <Show when={props.searchValue()}>
+          <Show when={props.searchValue}>
             <IconButtonV2
               type="button"
               variant="ghost-muted"
               size="small"
               class="relative z-20 shrink-0"
               icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
-              aria-label={props.searchPlaceholder()}
+              aria-label={props.searchPlaceholder}
               onClick={() => {
                 props.onSearchClose()
                 props.onSearchFocus()
@@ -345,7 +343,7 @@ function HomeSessionSearchResultRow(
   },
 ) {
   const title = createMemo(() => sessionLabel(props.record.session))
-  const showProjectName = () => props.showProjectName() && props.record.projectName
+  const showProjectName = () => props.showProjectName && props.record.projectName
   const key = () => homeSessionSearchKey(props.record)
 
   return (
@@ -416,7 +414,7 @@ function HomeSessionGroupHeader(props: {
 
 function HomeSessionRow(props: HomeSessionsViewProps & { record: HomeSessionRecord }) {
   const title = createMemo(() => sessionLabel(props.record.session))
-  const showProjectName = () => props.showProjectName() && props.record.projectName
+  const showProjectName = () => props.showProjectName && props.record.projectName
 
   return (
     <div

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

@@ -11,17 +11,17 @@ export function HomeSessions(props: {
   return (
     <HomeSessionsView
       language={props.sessions.copy.language}
-      groups={props.sessions.data.groups}
-      showProjectName={props.sessions.session.showProjectName}
-      server={props.sessions.session.server}
-      canCreateSession={props.sessions.session.canCreate}
-      searchValue={props.search.query.value}
-      searchPlaceholder={props.search.query.placeholder}
-      searchOpen={props.search.query.open}
-      searchLoading={props.search.result.loading}
-      searchResults={props.search.result.list}
-      searchActive={props.search.result.active}
-      searchNoResultsLabel={props.search.result.noResultsLabel}
+      groups={props.sessions.data.groups()}
+      showProjectName={props.sessions.session.showProjectName()}
+      server={props.sessions.session.server()}
+      canCreateSession={props.sessions.session.canCreate()}
+      searchValue={props.search.query.value()}
+      searchPlaceholder={props.search.query.placeholder()}
+      searchOpen={props.search.query.open()}
+      searchLoading={props.search.result.loading()}
+      searchResults={props.search.result.list()}
+      searchActive={props.search.result.active()}
+      searchNoResultsLabel={props.search.result.noResultsLabel()}
       titleOpacity={props.scroll.header.titleOpacity}
       isOpenTab={props.sessions.tab.isOpen}
       onCreateSession={props.sessions.session.create}

packages/app/src/pages/layout.tsx

@@ -1,4 +1,4 @@
-import { createEffect, Suspense, type ParentProps } from "solid-js"
+import { onMount, Show, Suspense, type ParentProps } from "solid-js"
 import { createStore } from "solid-js/store"
 import { DebugBar } from "@/components/debug-bar"
 import { Titlebar, type TitlebarUpdate } from "@/components/titlebar"
@@ -9,15 +9,17 @@ export default function Layout(props: ParentProps) {
   const platform = usePlatform()
   const [state, setState] = createStore({ debugTools: true })
 
-  createEffect(() => setV2Toast(true))
+  onMount(() => setV2Toast(true))
 
   const update: TitlebarUpdate = {
-    version: () => {
+    get version() {
       const state = platform.updater?.state()
-      if (state?.status !== "ready") return
+      if (state?.status !== "ready") return undefined
       return state.version
     },
-    installing: () => platform.updater?.state().status === "installing",
+    get installing() {
+      return platform.updater?.state().status === "installing"
+    },
     install: () => void platform.updater?.install(),
   }
 
@@ -40,7 +42,9 @@ export default function Layout(props: ParentProps) {
       <main class="flex-1 min-h-0 min-w-0 overflow-x-hidden flex flex-col items-start contain-strict">
         <Suspense>{props.children}</Suspense>
       </main>
-      {import.meta.env.DEV && state.debugTools && <DebugBar inline />}
+      <Show when={import.meta.env.DEV && state.debugTools}>
+        <DebugBar inline />
+      </Show>
       <ToastRegion v2 />
     </div>
   )

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

@@ -56,7 +56,7 @@ export default function NewSessionPage() {
   return (
     <div class="relative size-full overflow-hidden flex flex-col">
       {suspendUntilPromptReady()}
-      <NewSessionStatus mount={rightMount} visible={settings.visibility.status} />
+      <NewSessionStatus mount={rightMount()} visible={settings.visibility.status()} />
       <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
         <NewSessionView input={draft.input} project={project} workspace={workspace} />
       </div>

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

@@ -3,7 +3,7 @@ import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { Icon } from "@opencode-ai/ui/v2/icon"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
-import { Show, createMemo, createSignal, type Accessor } from "solid-js"
+import { Show, createMemo, createSignal } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Portal } from "solid-js/web"
 import createPresence from "solid-presence"
@@ -85,14 +85,14 @@ export function NewSessionView(props: {
   )
 }
 
-export function NewSessionStatus(props: { mount: Accessor<HTMLElement | null>; visible: Accessor<boolean> }) {
+export function NewSessionStatus(props: { mount: HTMLElement | null; visible: boolean }) {
   const language = useLanguage()
 
   return (
-    <Show when={props.mount()} keyed>
+    <Show when={props.mount} keyed>
       {(mount) => (
         <Portal mount={mount}>
-          <Show when={props.visible()}>
+          <Show when={props.visible}>
             <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
               <StatusPopoverV2 />
             </Tooltip>
@@ -127,7 +127,7 @@ function ProviderTip() {
   })
   const openProviders = () => {
     void import("@/components/dialog-connect-provider").then(({ DialogConnectProvider }) => {
-      void dialog.show(() => <DialogConnectProvider directory={() => sdk().directory} />)
+      void dialog.show(() => <DialogConnectProvider directory={sdk().directory} />)
     })
   }
 

packages/app/src/pages/session.tsx

@@ -165,7 +165,7 @@ export function TargetSessionRouteContent() {
   return (
     // Settings must keep the target-server SDK, sync, and models context and remain registered
     // when session content falls back to the route error boundary.
-    <TargetServerScopedProviders directory={directory} sessionID={() => params.id}>
+    <TargetServerScopedProviders directory={directory()} sessionID={params.id}>
       <TargetSessionSettingsCommand />
       <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)} padded>
         <ResolvedTargetSessionRoute />
@@ -185,17 +185,15 @@ export function SessionRouteErrorBoundary(
   const settings = useSettings()
   return (
     <ErrorBoundary
-      fallback={(error) =>
-        settings.general.newLayoutDesigns() ? (
+      fallback={(error) => (
+        <Show when={settings.general.newLayoutDesigns()} fallback={<ErrorPage error={error} />}>
           <SessionRouteFrame padded={props.padded}>
             <SessionPanelFrame newLayout raised={!!props.sessionID}>
               <SessionErrorFallback error={error} sessionID={props.sessionID} serverKey={props.serverKey} />
             </SessionPanelFrame>
           </SessionRouteFrame>
-        ) : (
-          <ErrorPage error={error} />
-        )
-      }
+        </Show>
+      )}
     >
       {props.children}
     </ErrorBoundary>
@@ -255,7 +253,6 @@ function ResolvedTargetSessionRoute() {
     () => sync().session.lineage,
   )
   const directory = createMemo(() => current()?.session.location.directory)
-  const targetDirectory = () => directory()!
 
   createEffect(() => {
     const session = current()
@@ -272,11 +269,13 @@ function ResolvedTargetSessionRoute() {
     // the terminal. Same-workspace tab switches keep it open because warm
     // targets resolve synchronously from the sync cache.
     <Show when={directory()}>
-      <SDKProvider directory={targetDirectory}>
-        <DirectoryDataProvider directory={targetDirectory} server={serverKey}>
-          <TargetSessionPage />
-        </DirectoryDataProvider>
-      </SDKProvider>
+      {(dir) => (
+        <SDKProvider directory={dir()}>
+          <DirectoryDataProvider directory={dir()} server={serverKey()}>
+            <TargetSessionPage />
+          </DirectoryDataProvider>
+        </SDKProvider>
+      )}
     </Show>
   )
 }
@@ -294,9 +293,7 @@ function TargetSessionPage() {
   )
 }
 
-function TargetServerScopedProviders(
-  props: ParentProps<{ directory?: () => string | undefined; sessionID?: () => string | undefined }>,
-) {
+function TargetServerScopedProviders(props: ParentProps<{ directory?: string; sessionID?: string }>) {
   return (
     <>
       <MarkSessionNotificationsViewed sessionID={props.sessionID} />
@@ -305,10 +302,10 @@ function TargetServerScopedProviders(
   )
 }
 
-function MarkSessionNotificationsViewed(props: { sessionID?: () => string | undefined }) {
+function MarkSessionNotificationsViewed(props: { sessionID?: string }) {
   const notification = useNotification()
   createEffect(() => {
-    const sessionID = props.sessionID?.()
+    const sessionID = props.sessionID
     if (!notification.ready() || !sessionID) return
     if (notification.session.unseenCount(sessionID) === 0) return
     notification.session.markViewed(sessionID)
@@ -1257,8 +1254,8 @@ export default function Page() {
       <SessionReviewTab
         title={changesTitle()}
         empty={reviewEmpty(input)}
-        diffs={reviewDiffs}
-        view={controller.layout.view}
+        diffs={reviewDiffs()}
+        view={controller.layout.view()}
         diffStyle={input.diffStyle}
         onDiffStyleChange={input.onDiffStyleChange}
         onScrollRef={(el) => setTree("reviewScroll", el)}
@@ -1291,8 +1288,12 @@ export default function Page() {
     get empty() {
       return reviewEmptyV2()
     },
-    diffs: reviewDiffs,
-    diffsReady: reviewReady,
+    get diffs() {
+      return reviewDiffs()
+    },
+    get diffsReady() {
+      return reviewReady()
+    },
     get diffVersion() {
       return vcsQuery.dataUpdatedAt
     },
@@ -2113,11 +2114,11 @@ export default function Page() {
                   onScheduleScrollState={scheduleScrollState}
                   onAutoScrollHandleScroll={autoScroll.handleScroll}
                   onMarkScrollGesture={markScrollGesture}
-                  hasScrollGesture={hasScrollGesture}
+                  hasScrollGesture={hasScrollGesture()}
                   onUserScroll={markUserScroll}
                   onHistoryScroll={onHistoryScroll}
                   onAutoScrollInteraction={autoScroll.handleInteraction}
-                  shouldAnchorBottom={() =>
+                  shouldAnchorBottom={
                     !location.hash && !store.messageId && !ui.pendingMessage && !autoScroll.userScrolled()
                   }
                   centered={centered()}
@@ -2301,7 +2302,14 @@ export default function Page() {
             width: sessionPanelWidth(),
           }}
         >
-          {settings.general.newLayoutDesigns() ? (
+          <Show
+            when={settings.general.newLayoutDesigns()}
+            fallback={
+              <SessionPanelFrame newLayout={false} raised={!!controller.identity.params.id}>
+                {sessionPanelContent()}
+              </SessionPanelFrame>
+            }
+          >
             <Show when={sessionPanelKey()} keyed>
               {(_) => (
                 <SessionPanelFrame newLayout raised={!!controller.identity.params.id}>
@@ -2309,11 +2317,7 @@ export default function Page() {
                 </SessionPanelFrame>
               )}
             </Show>
-          ) : (
-            <SessionPanelFrame newLayout={false} raised={!!controller.identity.params.id}>
-              {sessionPanelContent()}
-            </SessionPanelFrame>
-          )}
+          </Show>
 
           <Show when={desktopSessionResizeOpen()}>
             <div onPointerDown={() => size.start()}>
@@ -2337,13 +2341,13 @@ export default function Page() {
         <Show when={!newSessionDesign() && desktopSidePanelOpen()}>
           <Suspense>
             <SessionSidePanel
-              canReview={canReview}
-              diffs={reviewDiffs}
-              diffsReady={reviewReady}
-              empty={reviewEmptyText}
-              hasReview={hasReview}
-              reviewHasFocusableContent={hasReview}
-              reviewCount={reviewCount}
+              canReview={canReview()}
+              diffs={reviewDiffs()}
+              diffsReady={reviewReady()}
+              empty={reviewEmptyText()}
+              hasReview={hasReview()}
+              reviewHasFocusableContent={hasReview()}
+              reviewCount={reviewCount()}
               reviewPanel={reviewPanel}
               activeDiff={activeReviewFile()}
               focusReviewDiff={focusReviewDiff}
@@ -2359,13 +2363,13 @@ export default function Page() {
                 <div class="min-h-0 flex-1">
                   <Suspense>
                     <SessionSidePanel
-                      canReview={canReview}
-                      diffs={reviewDiffs}
-                      diffsReady={reviewReady}
-                      empty={reviewEmptyText}
-                      hasReview={hasReview}
-                      reviewHasFocusableContent={() => hasReview() || reviewV2State.sidebarOpened()}
-                      reviewCount={reviewCount}
+                      canReview={canReview()}
+                      diffs={reviewDiffs()}
+                      diffsReady={reviewReady()}
+                      empty={reviewEmptyText()}
+                      hasReview={hasReview()}
+                      reviewHasFocusableContent={hasReview() || reviewV2State.sidebarOpened()}
+                      reviewCount={reviewCount()}
                       reviewPanel={reviewPanelV2}
                       reviewSidebarToggle={(disabled) => (
                         <SessionReviewV2SidebarToggle

packages/app/src/pages/session/composer/session-todo-dock.tsx

@@ -7,7 +7,7 @@ import { useSpring } from "@opencode-ai/ui/motion-spring"
 import { TextReveal } from "@opencode-ai/ui/text-reveal"
 import { TextStrikethrough } from "@opencode-ai/ui/text-strikethrough"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
-import { Index, createEffect, createMemo } from "solid-js"
+import { Index, Match, Switch, createEffect, createMemo } from "solid-js"
 import { Dynamic } from "solid-js/web"
 import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
@@ -142,15 +142,16 @@ export function SessionTodoDock(props: {
             }}
           >
             <Index each={progress()}>
-              {(item) =>
-                item() === doneToken ? (
-                  <AnimatedNumber value={done()} />
-                ) : item() === totalToken ? (
-                  <AnimatedNumber value={total()} />
-                ) : (
-                  <span>{item()}</span>
-                )
-              }
+              {(item) => (
+                <Switch fallback={<span>{item()}</span>}>
+                  <Match when={item() === doneToken}>
+                    <AnimatedNumber value={done()} />
+                  </Match>
+                  <Match when={item() === totalToken}>
+                    <AnimatedNumber value={total()} />
+                  </Match>
+                </Switch>
+              )}
             </Index>
           </span>
           <div

packages/app/src/pages/session/composer/todo-panel-motion.stories.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { createEffect, createMemo, onCleanup } from "solid-js"
+import { createEffect, createMemo, For, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import type { Todo } from "@/types"
 import { useServerSync } from "@/context/global-sync"
@@ -326,11 +326,13 @@ export const Playground = {
           <button onClick={cycle} style={btn(step() > 0)}>
             Cycle progress ({step()}/3 done)
           </button>
-          {[0, 1, 2, 3].map((value) => (
-            <button onClick={() => setCfg("step", value)} style={btn(step() === value)}>
-              {value} done
-            </button>
-          ))}
+          <For each={[0, 1, 2, 3]}>
+            {(value) => (
+              <button onClick={() => setCfg("step", value)} style={btn(step() === value)}>
+                {value} done
+              </button>
+            )}
+          </For>
         </div>
 
         <div style={{ display: "grid", gap: "10px", "max-width": "560px" }}>

packages/app/src/pages/session/review-tab.tsx

@@ -19,8 +19,8 @@ type ReviewDiff = FileDiffInfo
 export interface SessionReviewTabProps {
   title?: JSX.Element
   empty?: JSX.Element
-  diffs: () => ReviewDiff[]
-  view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
+  diffs: ReviewDiff[]
+  view: ReturnType<ReturnType<typeof useLayout>["view"]>
   diffStyle: DiffStyle
   onDiffStyleChange?: (style: DiffStyle) => void
   onViewFile?: (file: string) => void
@@ -77,7 +77,7 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
     if (!el || !layout.ready() || userInteracted) return
     if (el.clientHeight === 0 || el.clientWidth === 0) return
 
-    const s = props.view().scroll("review")
+    const s = props.view.scroll("review")
     if (!s || (s.x === 0 && s.y === 0)) return
 
     const maxY = Math.max(0, el.scrollHeight - el.clientHeight)
@@ -111,14 +111,14 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
     if (!layout.ready()) return
     if (el.clientHeight === 0 || el.clientWidth === 0) return
 
-    props.view().setScroll("review", {
+    props.view.setScroll("review", {
       x: el.scrollLeft,
       y: el.scrollTop,
     })
   }
 
   createEffect(() => {
-    props.diffs().length
+    props.diffs.length
     props.diffStyle
     if (!layout.ready()) return
     queueRestore()
@@ -145,14 +145,14 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
       }}
       onScroll={handleScroll}
       onDiffRendered={queueRestore}
-      open={props.view().review.open()}
-      onOpenChange={props.view().review.setOpen}
+      open={props.view.review.open()}
+      onOpenChange={props.view.review.setOpen}
       classes={{
         root: props.classes?.root ?? "pr-3",
         header: props.classes?.header ?? "px-3",
         container: props.classes?.container ?? "pl-3",
       }}
-      diffs={props.diffs()}
+      diffs={props.diffs}
       diffStyle={props.diffStyle}
       onDiffStyleChange={props.onDiffStyleChange}
       onViewFile={props.onViewFile}

packages/app/src/pages/session/session-side-panel.tsx

@@ -65,13 +65,13 @@ function renderDiff(value: ReviewDiff): value is RenderDiff {
 }
 
 export function SessionSidePanel(props: {
-  canReview: () => boolean
-  diffs: () => ReviewDiff[]
-  diffsReady: () => boolean
-  empty: () => string
-  hasReview: () => boolean
-  reviewHasFocusableContent: () => boolean
-  reviewCount: () => number
+  canReview: boolean
+  diffs: ReviewDiff[]
+  diffsReady: boolean
+  empty: string
+  hasReview: boolean
+  reviewHasFocusableContent: boolean
+  reviewCount: number
   reviewPanel: () => JSX.Element
   reviewSidebarToggle?: (disabled: boolean) => JSX.Element
   fileBrowserState?: SessionFileBrowserState
@@ -113,7 +113,7 @@ export function SessionSidePanel(props: {
   })
   const treeWidth = createMemo(() => (fileOpen() ? `${fileTreeWidth()}px` : "0px"))
 
-  const diffs = createMemo(() => props.diffs().filter(renderDiff))
+  const diffs = createMemo(() => props.diffs.filter(renderDiff))
   const diffFiles = createMemo(() => diffs().map((d) => d.file))
   const kinds = createMemo(() => {
     const merge = (a: "add" | "del" | "mix" | undefined, b: "add" | "del" | "mix") => {
@@ -177,7 +177,7 @@ export function SessionSidePanel(props: {
     pathFromTab: file.pathFromTab,
     normalizeTab,
     review: reviewTab,
-    hasReview: props.canReview,
+    hasReview: () => props.canReview,
     fileBrowser: () => !!props.fileBrowserState,
   })
   const contextOpen = tabState.contextOpen
@@ -348,7 +348,7 @@ export function SessionSidePanel(props: {
                                 onCleanup(stop)
                               }}
                             >
-                              <Show when={reviewTab() && props.canReview()}>
+                              <Show when={reviewTab() && props.canReview}>
                                 <Tabs.Trigger
                                   value="review"
                                   id={reviewTabID}
@@ -356,8 +356,8 @@ export function SessionSidePanel(props: {
                                 >
                                   <div class="flex items-center gap-1.5">
                                     <div>{language.t("session.tab.review")}</div>
-                                    <Show when={props.hasReview()}>
-                                      <div>{props.reviewCount()}</div>
+                                    <Show when={props.hasReview}>
+                                      <div>{props.reviewCount}</div>
                                     </Show>
                                   </div>
                                 </Tabs.Trigger>
@@ -463,12 +463,12 @@ export function SessionSidePanel(props: {
                             </Tabs.List>
                           </div>
 
-                          <Show when={reviewTab() && props.canReview() && activeTab() === "review"}>
+                          <Show when={reviewTab() && props.canReview && activeTab() === "review"}>
                             <div
                               id={reviewTabPanelID}
                               role="tabpanel"
                               aria-labelledby={reviewTabID}
-                              tabIndex={props.reviewHasFocusableContent() ? undefined : 0}
+                              tabIndex={props.reviewHasFocusableContent ? undefined : 0}
                               data-slot="tabs-content"
                               class="flex flex-col h-full overflow-hidden contain-strict"
                             >
@@ -559,14 +559,14 @@ export function SessionSidePanel(props: {
                                 </div>
                               )}
                             </Show>
-                            <Show when={reviewTab() && props.canReview()}>
+                            <Show when={reviewTab() && props.canReview}>
                               <Tabs.Trigger
                                 value="review"
                                 id={reviewTabID}
                                 aria-controls={activeTab() === "review" ? reviewTabPanelID : undefined}
                               >
-                                {props.hasReview()
-                                  ? language.t("session.review.filesChanged", { count: props.reviewCount() })
+                                {props.hasReview
+                                  ? language.t("session.review.filesChanged", { count: props.reviewCount })
                                   : language.t("session.tab.review")}
                               </Tabs.Trigger>
                             </Show>
@@ -611,7 +611,7 @@ export function SessionSidePanel(props: {
                                   fallback={
                                     <SortableTabV2
                                       tab={tab}
-                                      index={() => tabs().all().indexOf(tab)}
+                                      index={tabs().all().indexOf(tab)}
                                       temporary={temporaryTab() === tab}
                                       onTabClose={tabs().close}
                                       onTabDoubleClick={temporaryTab() === tab ? openTab : undefined}
@@ -691,12 +691,12 @@ export function SessionSidePanel(props: {
                           </div>
                         </div>
 
-                        <Show when={reviewTab() && props.canReview() && activeTab() === "review"}>
+                        <Show when={reviewTab() && props.canReview && activeTab() === "review"}>
                           <div
                             id={reviewTabPanelID}
                             role="tabpanel"
                             aria-labelledby={reviewTabID}
-                            tabIndex={props.reviewHasFocusableContent() ? undefined : 0}
+                            tabIndex={props.reviewHasFocusableContent ? undefined : 0}
                             data-slot="tabs-content"
                             class="flex flex-col h-full overflow-hidden contain-strict"
                           >
@@ -782,11 +782,11 @@ export function SessionSidePanel(props: {
                           when={settings.general.newLayoutDesigns()}
                           fallback={
                             <>
-                              {props.reviewCount()} {language.plural("session.review.change", props.reviewCount())}
+                              {props.reviewCount} {language.plural("session.review.change", props.reviewCount)}
                             </>
                           }
                         >
-                          {language.t("session.review.filesChanged", { count: props.reviewCount() })}
+                          {language.t("session.review.filesChanged", { count: props.reviewCount })}
                         </Show>
                       </Tabs.Trigger>
                       <Tabs.Trigger value="all" class="flex-1" classes={{ button: "w-full" }}>
@@ -796,9 +796,9 @@ export function SessionSidePanel(props: {
                     <Show when={fileTreeTab() === "changes"}>
                       <Tabs.Content value="changes" class="bg-background-stronger px-3 py-0">
                         <Switch>
-                          <Match when={props.hasReview() || !props.diffsReady()}>
+                          <Match when={props.hasReview || !props.diffsReady}>
                             <Show
-                              when={props.diffsReady()}
+                              when={props.diffsReady}
                               fallback={
                                 <div class="px-2 py-2 text-12-regular text-text-weak">
                                   {language.t("common.loading")}

packages/app/src/pages/session/terminal-panel-v2.tsx

@@ -273,7 +273,7 @@ export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
                 >
                   <For each={all()}>
                     {(pty, index) => (
-                      <SortableTerminalTabV2 terminal={pty} index={index} newLayout={newLayout()} onClose={close} />
+                      <SortableTerminalTabV2 terminal={pty} index={index()} newLayout={newLayout()} onClose={close} />
                     )}
                   </For>
                   <div class="h-full flex items-center justify-center">

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

@@ -396,11 +396,11 @@ type MessageTimelineProps = {
   onScheduleScrollState: (el: HTMLDivElement) => void
   onAutoScrollHandleScroll: () => void
   onMarkScrollGesture: (target?: EventTarget | null) => void
-  hasScrollGesture: () => boolean
+  hasScrollGesture: boolean
   onUserScroll: () => void
   onHistoryScroll: () => void
   onAutoScrollInteraction: (event: MouseEvent) => void
-  shouldAnchorBottom: () => boolean
+  shouldAnchorBottom: boolean
   centered: boolean
   setContentRef: (el: HTMLDivElement) => void
   userMessages: UserMessage[]
@@ -437,7 +437,7 @@ function MessageTimelineView(
   const ownerSessionKey = props.data.sessionKey()
   const cached = timelineCache.get(ownerSessionKey)
   const initialMeasurements = cached?.measurements
-  const coldBottomMount = !initialMeasurements?.length && props.shouldAnchorBottom()
+  const coldBottomMount = !initialMeasurements?.length && props.shouldAnchorBottom
 
   const [listRoot, setListRoot] = createSignal<HTMLDivElement>()
   const sessionID = props.data.sessionID
@@ -601,7 +601,7 @@ function MessageTimelineView(
     },
     getScrollElement: () => listRoot() ?? null,
     observeElementOffset: observeElementOffsetReconnectAware,
-    initialOffset: () => (props.shouldAnchorBottom() ? Number.MAX_SAFE_INTEGER : 0),
+    initialOffset: () => (props.shouldAnchorBottom ? Number.MAX_SAFE_INTEGER : 0),
     initialMeasurementsCache: initialMeasurements,
     estimateSize: () => timelineFallbackItemSize,
     scrollToFn: (offset, options, instance) => {
@@ -639,11 +639,11 @@ function MessageTimelineView(
   const resizeItem = virtualizer.resizeItem
   let resizeAnchorScheduled = false
   const anchorResizedBottom = () => {
-    if (resizeAnchorScheduled || props.hasScrollGesture()) return
+    if (resizeAnchorScheduled || props.hasScrollGesture) return
     resizeAnchorScheduled = true
     queueMicrotask(() => {
       resizeAnchorScheduled = false
-      if (!props.shouldAnchorBottom() || props.hasScrollGesture()) return
+      if (!props.shouldAnchorBottom || props.hasScrollGesture) return
       virtualizer.scrollToEnd()
     })
   }
@@ -668,10 +668,10 @@ function MessageTimelineView(
       })
     }
     resizeItem(index, size)
-    if (root && props.shouldAnchorBottom()) anchorResizedBottom()
+    if (root && props.shouldAnchorBottom) anchorResizedBottom()
   }
   virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item) => {
-    if (props.shouldAnchorBottom()) return false
+    if (props.shouldAnchorBottom) return false
     const first = virtualizer.range?.startIndex
     return first !== undefined && item.index < first
   }
@@ -692,18 +692,18 @@ function MessageTimelineView(
   let overscanFrame: number | undefined
   onMount(() => {
     overscanFrame = requestAnimationFrame(() => {
-      if (props.shouldAnchorBottom()) virtualizer.scrollToEnd()
+      if (props.shouldAnchorBottom) virtualizer.scrollToEnd()
       overscanFrame = requestAnimationFrame(() => {
         overscanFrame = undefined
         if (renderOverscan() < 20) setRenderOverscan(20)
-        if (props.shouldAnchorBottom()) virtualizer.scrollToEnd()
+        if (props.shouldAnchorBottom) virtualizer.scrollToEnd()
       })
     })
   })
 
   const maybeAnchorBottom = () => {
     if (timelineRows().length === 0) return
-    if (!props.shouldAnchorBottom() || props.hasScrollGesture()) return
+    if (!props.shouldAnchorBottom || props.hasScrollGesture) return
     if (resizePinFrame !== undefined) cancelAnimationFrame(resizePinFrame)
     clearPrependAnchor()
     if (prependAnchorFrame !== undefined) cancelAnimationFrame(prependAnchorFrame)
@@ -815,7 +815,7 @@ function MessageTimelineView(
     if (prependLoading) updatePrependAnchor()
     props.onScheduleScrollState(event.currentTarget)
     props.onHistoryScroll()
-    if (!props.hasScrollGesture()) return
+    if (!props.hasScrollGesture) return
     props.onUserScroll()
     props.onAutoScrollHandleScroll()
     props.onMarkScrollGesture(event.currentTarget)
@@ -972,21 +972,21 @@ function MessageTimelineView(
     )
   }
 
-  function TimelineRowFrame(input: { row: Accessor<FramedTimelineRow>; children: JSX.Element }) {
+  function TimelineRowFrame(input: { row: FramedTimelineRow; children: JSX.Element }) {
     const anchor = () => {
-      const row = input.row()
+      const row = input.row
       return row._tag === "CommentStrip" || (row._tag === "UserMessage" && row.anchor)
     }
     const previousAssistantPart = () => {
-      const row = input.row()
+      const row = input.row
       return row._tag === "AssistantPart" && row.previousAssistantPart
     }
 
     return (
       <div
-        id={anchor() ? props.anchor(input.row().userMessageID) : undefined}
-        data-message-id={input.row().userMessageID}
-        data-timeline-row={input.row()._tag}
+        id={anchor() ? props.anchor(input.row.userMessageID) : undefined}
+        data-message-id={input.row.userMessageID}
+        data-timeline-row={input.row._tag}
         classList={{
           "min-w-0 w-full max-w-full": true,
           "md:max-w-200 2xl:max-w-[1000px]": props.centered,
@@ -1011,7 +1011,7 @@ function MessageTimelineView(
           getMsgParts(commentStripRow().userMessageID).flatMap((part) => MessageComment.fromPart(part) ?? []),
         )
         return (
-          <TimelineRowFrame row={commentStripRow}>
+          <TimelineRowFrame row={commentStripRow()}>
             <div class={`w-full pb-2 ${turnPadding()}`}>
               <div class="ms-auto max-w-[82%] overflow-x-auto no-scrollbar">
                 <div class="flex w-max min-w-full justify-end gap-2">
@@ -1060,7 +1060,7 @@ function MessageTimelineView(
           return getMsgParts(userMessageRow().userMessageID).flatMap((part) => MessageComment.fromPart(part) ?? [])
         })
         return (
-          <TimelineRowFrame row={userMessageRow}>
+          <TimelineRowFrame row={userMessageRow()}>
             <Show when={message()}>
               {(message) => (
                 <div data-slot="session-turn-message-container" class={`w-full ${turnPadding()}`}>
@@ -1091,7 +1091,7 @@ function MessageTimelineView(
         }
         const directory = () => getFilename(operation().directory)
         return (
-          <TimelineRowFrame row={workspaceRow}>
+          <TimelineRowFrame row={workspaceRow()}>
             <div class={`w-full ${turnPadding()}`} aria-live="polite">
               <div class="flex h-7 items-center py-1 text-[13px] font-[440] leading-none tracking-[-0.04px]">
                 <Show
@@ -1126,7 +1126,7 @@ function MessageTimelineView(
       case "TurnDivider": {
         const turnDividerRow = row as Accessor<TimelineRowByTag<"TurnDivider">>
         return (
-          <TimelineRowFrame row={turnDividerRow}>
+          <TimelineRowFrame row={turnDividerRow()}>
             <div data-slot="session-turn-message-container" class={`w-full ${turnPadding()}`}>
               <div data-slot="session-turn-compaction">
                 <MessageDivider
@@ -1142,7 +1142,7 @@ function MessageTimelineView(
       case "AssistantPart": {
         const assistantPartRow = row as Accessor<TimelineRowByTag<"AssistantPart">>
         return (
-          <TimelineRowFrame row={assistantPartRow}>
+          <TimelineRowFrame row={assistantPartRow()}>
             <div data-slot="session-turn-message-container" class={`w-full ${turnPadding()}`}>
               <div
                 data-slot="session-turn-assistant-content"
@@ -1157,7 +1157,7 @@ function MessageTimelineView(
       case "Thinking": {
         const thinkingRow = row as Accessor<TimelineRowByTag<"Thinking">>
         return (
-          <TimelineRowFrame row={thinkingRow}>
+          <TimelineRowFrame row={thinkingRow()}>
             <div data-slot="session-turn-message-container" class={`w-full ${turnPadding()}`}>
               <TimelineThinkingRow
                 reasoningHeading={thinkingRow().reasoningHeading}
@@ -1170,7 +1170,7 @@ function MessageTimelineView(
       case "Retry": {
         const retryRow = row as Accessor<TimelineRowByTag<"Retry">>
         return (
-          <TimelineRowFrame row={retryRow}>
+          <TimelineRowFrame row={retryRow()}>
             <div data-slot="session-turn-message-container" class={`w-full ${turnPadding()}`}>
               <SessionRetry status={sessionStatus()} show={activeMessageID() === retryRow().userMessageID} />
             </div>
@@ -1187,7 +1187,7 @@ function MessageTimelineView(
           sync().project?.vcs === "git" &&
           sessionStatus().type === "idle"
         return (
-          <TimelineRowFrame row={diffSummaryRow}>
+          <TimelineRowFrame row={diffSummaryRow()}>
             <div data-slot="session-turn-message-container" class={`w-full ${turnPadding()}`}>
               <TimelineDiffSummaryRow
                 diffs={diffSummaryRow().diffs}
@@ -1215,7 +1215,7 @@ function MessageTimelineView(
       case "Error": {
         const errorRow = row as Accessor<TimelineRowByTag<"Error">>
         return (
-          <TimelineRowFrame row={errorRow}>
+          <TimelineRowFrame row={errorRow()}>
             <div data-slot="session-turn-message-container" class={`w-full ${turnPadding()}`}>
               <Card variant="error" class="error-card">
                 {errorRow().text}

packages/app/src/pages/session/v2/review-panel-v2.tsx

@@ -35,8 +35,8 @@ type ReviewDiff = FileDiffInfo
 export type ReviewPanelV2Props = {
   title?: JSX.Element
   empty?: JSX.Element
-  diffs: () => ReviewDiff[]
-  diffsReady: () => boolean
+  diffs: ReviewDiff[]
+  diffsReady: boolean
   diffVersion?: number
   loadDiff?: (path: string, version?: number) => Promise<RenderDiff | undefined>
   activeFile?: string
@@ -56,7 +56,7 @@ export type ReviewPanelV2Props = {
 export function ReviewPanelV2(props: ReviewPanelV2Props) {
   const sdk = useSDK()
 
-  const diffs = createMemo(() => props.diffs().filter(filterRenderableDiff))
+  const diffs = createMemo(() => props.diffs.filter(filterRenderableDiff))
   const filteredFiles = createMemo(() =>
     filterReviewFiles(
       diffs().map((diff) => diff.file),
@@ -122,11 +122,11 @@ export function ReviewPanelV2(props: ReviewPanelV2Props) {
           state={props.state}
           diffsReady={props.diffsReady}
           onSelectFile={props.onSelectFile}
-          diffs={diffs}
-          filteredFiles={filteredFiles}
-          searching={searching}
-          kinds={treeKinds}
-          activeDiff={activeDiff}
+          diffs={diffs()}
+          filteredFiles={filteredFiles()}
+          searching={searching()}
+          kinds={treeKinds()}
+          activeDiff={activeDiff()}
         />
       }
       activeFile={activeDiff()}
@@ -170,19 +170,19 @@ export function ReviewPanelV2(props: ReviewPanelV2Props) {
 function ReviewPanelV2Sidebar(props: {
   title?: JSX.Element
   state: ReviewPanelV2State
-  diffsReady: () => boolean
+  diffsReady: boolean
   onSelectFile: (path: string) => void
-  diffs: () => RenderDiff[]
-  filteredFiles: () => string[]
-  searching: () => boolean
-  kinds: () => ReturnType<typeof reviewDiffKinds>
-  activeDiff: () => string | undefined
+  diffs: RenderDiff[]
+  filteredFiles: string[]
+  searching: boolean
+  kinds: ReturnType<typeof reviewDiffKinds>
+  activeDiff: string | undefined
 }) {
   const language = useLanguage()
   const [explicitHighlight, setExplicitHighlight] = createSignal<string | undefined>()
   const highlightedPath = createMemo(() => {
-    if (!props.searching()) return undefined
-    const files = props.filteredFiles()
+    if (!props.searching) return undefined
+    const files = props.filteredFiles
     if (files.length === 0) return undefined
     const explicit = explicitHighlight()
     if (explicit && files.includes(explicit)) return explicit
@@ -190,8 +190,8 @@ function ReviewPanelV2Sidebar(props: {
   })
 
   const onFilterKeyDown = (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
-    if (!props.searching()) return
-    applyFileListKeyDown(event, props.filteredFiles(), highlightedPath(), {
+    if (!props.searching) return
+    applyFileListKeyDown(event, props.filteredFiles, highlightedPath(), {
       onHighlight: setExplicitHighlight,
       onSelect: props.onSelectFile,
     })
@@ -202,7 +202,7 @@ function ReviewPanelV2Sidebar(props: {
       open={props.state.sidebarOpened()}
       transition={props.state.sidebarTransition()}
       title={props.title}
-      stats={<DiffChanges changes={props.diffs()} />}
+      stats={<DiffChanges changes={props.diffs} />}
       filter={props.state.filter()}
       onFilterChange={props.state.setFilter}
       onFilterKeyDown={onFilterKeyDown}
@@ -212,7 +212,7 @@ function ReviewPanelV2Sidebar(props: {
       maxWidth={SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX}
     >
       <Show
-        when={props.diffsReady()}
+        when={props.diffsReady}
         fallback={
           <div class="px-2 py-2 text-12-regular text-text-weak">
             {language.t("common.loading")}
@@ -221,25 +221,25 @@ function ReviewPanelV2Sidebar(props: {
         }
       >
         <Show
-          when={props.searching()}
+          when={props.searching}
           fallback={
             <FileTreeV2
-              allowed={props.filteredFiles()}
-              kinds={props.kinds()}
+              allowed={props.filteredFiles}
+              kinds={props.kinds}
               draggable={false}
-              active={props.activeDiff()}
+              active={props.activeDiff}
               onFileClick={(node) => props.onSelectFile(node.path)}
             />
           }
         >
           <Show
-            when={props.filteredFiles().length > 0}
+            when={props.filteredFiles.length > 0}
             fallback={<div class="px-2 py-2 text-12-regular text-text-weak">{language.t("palette.empty")}</div>}
           >
             <SessionFileListV2
-              files={props.filteredFiles()}
-              kinds={props.kinds()}
-              active={props.activeDiff()}
+              files={props.filteredFiles}
+              kinds={props.kinds}
+              active={props.activeDiff}
               highlighted={highlightedPath()}
               onFileClick={(path) => {
                 setExplicitHighlight(path)

packages/app/src/pages/target-session-route.tsx

@@ -17,8 +17,8 @@ export default function TargetSessionRoute() {
 
   return (
     <Show when={requireServerKey(params.serverKey)} keyed>
-      <ServerSDKProvider server={connection}>
-        <ServerSyncProvider server={connection}>
+      <ServerSDKProvider server={connection()}>
+        <ServerSyncProvider server={connection()}>
           <TargetSessionRouteContent />
         </ServerSyncProvider>
       </ServerSDKProvider>

packages/session-ui/src/components/file-search.tsx

@@ -3,10 +3,10 @@ import { useI18n } from "@opencode-ai/ui/context/i18n"
 import { Icon } from "@opencode-ai/ui/icon"
 
 export function FileSearchBar(props: {
-  pos: () => { top: number; right: number }
-  query: () => string
-  index: () => number
-  count: () => number
+  pos: { top: number; right: number }
+  query: string
+  index: number
+  count: number
   setInput: (el: HTMLInputElement) => void
   onInput: (value: string) => void
   onKeyDown: (event: KeyboardEvent) => void
@@ -21,8 +21,8 @@ export function FileSearchBar(props: {
       <div
         class="fixed z-50 flex h-8 items-center gap-2 rounded-md border border-border-base bg-background-base px-3 shadow-md"
         style={{
-          top: `${props.pos().top}px`,
-          right: `${props.pos().right}px`,
+          top: `${props.pos.top}px`,
+          right: `${props.pos.right}px`,
         }}
         onPointerDown={(e) => e.stopPropagation()}
       >
@@ -30,19 +30,19 @@ export function FileSearchBar(props: {
         <input
           ref={props.setInput}
           placeholder={i18n.t("ui.fileSearch.placeholder")}
-          value={props.query()}
+          value={props.query}
           class="w-40 bg-transparent outline-none text-14-regular text-text-strong placeholder:text-text-weak"
           onInput={(e) => props.onInput(e.currentTarget.value)}
           onKeyDown={(e) => props.onKeyDown(e as KeyboardEvent)}
         />
         <div class="shrink-0 text-12-regular text-text-weak tabular-nums text-right" style={{ width: "10ch" }}>
-          {props.count() ? `${props.index() + 1}/${props.count()}` : "0/0"}
+          {props.count ? `${props.index + 1}/${props.count}` : "0/0"}
         </div>
         <div class="flex items-center">
           <button
             type="button"
             class="size-6 grid place-items-center rounded text-text-weak hover:bg-surface-base-hover hover:text-text-strong disabled:opacity-40 disabled:pointer-events-none"
-            disabled={props.count() === 0}
+            disabled={props.count === 0}
             aria-label={i18n.t("ui.fileSearch.previousMatch")}
             onClick={props.onPrev}
           >
@@ -51,7 +51,7 @@ export function FileSearchBar(props: {
           <button
             type="button"
             class="size-6 grid place-items-center rounded text-text-weak hover:bg-surface-base-hover hover:text-text-strong disabled:opacity-40 disabled:pointer-events-none"
-            disabled={props.count() === 0}
+            disabled={props.count === 0}
             aria-label={i18n.t("ui.fileSearch.nextMatch")}
             onClick={props.onNext}
           >

packages/session-ui/src/components/file.tsx

@@ -714,10 +714,10 @@ function ViewerShell(props: {
     >
       <Show when={props.viewer.find.open()}>
         <FileSearchBar
-          pos={props.viewer.find.pos}
-          query={props.viewer.find.query}
-          count={props.viewer.find.count}
-          index={props.viewer.find.index}
+          pos={props.viewer.find.pos()}
+          query={props.viewer.find.query()}
+          count={props.viewer.find.count()}
+          index={props.viewer.find.index()}
           setInput={props.viewer.find.setInput}
           onInput={props.viewer.find.setQuery}
           onKeyDown={props.viewer.find.onInputKeyDown}

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

@@ -2,7 +2,6 @@ import { useI18n } from "@opencode-ai/ui/context/i18n"
 import morphdom from "morphdom"
 import { checksum } from "@opencode-ai/core/util/encode"
 import {
-  type Accessor,
   type ComponentProps,
   createEffect,
   createResource,
@@ -123,15 +122,15 @@ function createCopyButton(labels: CopyLabels) {
     const [copied, setCopied] = createSignal(false)
     state.setLabels = setLabels
     state.setCopied = setCopied
-    return <MarkdownCopyButton labels={labelState} copied={copied} />
+    return <MarkdownCopyButton labels={labelState()} copied={copied()} />
   }, host)
   state.dispose = dispose
   copyButtonState.set(host, state as CopyButtonState)
   return host
 }
 
-function MarkdownCopyButton(props: { labels: Accessor<CopyLabels>; copied: Accessor<boolean> }) {
-  const label = () => (props.copied() ? props.labels().copied : props.labels().copy)
+function MarkdownCopyButton(props: { labels: CopyLabels; copied: boolean }) {
+  const label = () => (props.copied ? props.labels.copied : props.labels.copy)
   return (
     <TooltipV2 placement="top" value={label()}>
       <IconButtonV2

packages/session-ui/src/components/timeline-playground.stories.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { createSignal, createMemo, createEffect, on, For, Show, batch } from "solid-js"
-import { createStore, produce } from "solid-js/store"
+import { createStore, produce, reconcile } from "solid-js/store"
 import type {
   Message,
   UserMessage,
@@ -1166,7 +1166,7 @@ function Playground() {
     messages: [],
     parts: {},
   })
-  const [session, setSession] = createSignal({ ...DEFAULT_SESSION })
+  const [session, setSession] = createStore({ ...DEFAULT_SESSION })
   const [loaded, setLoaded] = createSignal("")
   const [issue, setIssue] = createSignal("")
 
@@ -1243,11 +1243,11 @@ function Playground() {
   const userMessages = createMemo(() => state.messages.filter((m): m is UserMessage => m.role === "user"))
 
   const data = createMemo(() => ({
-    session: [session()],
+    session: [session],
     agent: [{ name: "build" }, { name: "plan" }, { name: "explore" }, { name: "review" }],
     session_status: {},
     session_diff: {},
-    message: { [session().id]: state.messages },
+    message: { [session.id]: state.messages },
     part: state.parts,
     provider: {
       all: new Map([
@@ -1283,8 +1283,8 @@ function Playground() {
     const id = lastAssistantID()
     if (id) return id
     // Create a minimal placeholder turn
-    const user = mkUser("...", [], session().id)
-    const asst = mkAssistant(user.message.id, session().id)
+    const user = mkUser("...", [], session.id)
+    const asst = mkAssistant(user.message.id, session.id)
     setState(
       produce((draft) => {
         draft.messages.push(user.message)
@@ -1310,8 +1310,8 @@ function Playground() {
   // ---- User message helpers ----
   const addUser = (variant: keyof typeof USER_VARIANTS) => {
     const v = USER_VARIANTS[variant]
-    const user = mkUser(v.text, v.parts, session().id)
-    const asst = mkAssistant(user.message.id, session().id)
+    const user = mkUser(v.text, v.parts, session.id)
+    const asst = mkAssistant(user.message.id, session.id)
     setState(
       produce((draft) => {
         draft.messages.push(user.message)
@@ -1338,8 +1338,8 @@ function Playground() {
 
   // ---- Composite helpers (create full turns with user + assistant) ----
   const addFullTurn = (userText: string, parts: Part[]) => {
-    const user = mkUser(userText, [], session().id)
-    const asst = mkAssistant(user.message.id, session().id)
+    const user = mkUser(userText, [], session.id)
+    const asst = mkAssistant(user.message.id, session.id)
     setState(
       produce((draft) => {
         draft.messages.push(user.message)
@@ -1427,7 +1427,7 @@ function Playground() {
           return
         }
 
-        const asst = mkAssistant(user.id, session().id)
+        const asst = mkAssistant(user.id, session.id)
         asst.time = { created: now, completed: now }
         asst.error = { name: "MessageAbortedError", message: "Interrupted" }
         draft.messages.push(asst)
@@ -1458,12 +1458,14 @@ function Playground() {
     )
 
     batch(() => {
-      setSession({
-        ...DEFAULT_SESSION,
-        ...next.info,
-        id,
-        title: typeof next.info.title === "string" && next.info.title ? next.info.title : name,
-      })
+      setSession(
+        reconcile({
+          ...DEFAULT_SESSION,
+          ...next.info,
+          id,
+          title: typeof next.info.title === "string" && next.info.title ? next.info.title : name,
+        }),
+      )
       setState({ messages, parts })
       setLoaded(name)
       setIssue("")
@@ -1489,7 +1491,7 @@ function Playground() {
   const clearAll = () => {
     batch(() => {
       setState({ messages: [], parts: {} })
-      setSession({ ...DEFAULT_SESSION })
+      setSession(reconcile({ ...DEFAULT_SESSION }))
       setLoaded("")
       setIssue("")
       seq = 0
@@ -1686,7 +1688,7 @@ function Playground() {
               </div>
               <Show when={loaded()}>
                 <div style={{ "font-size": "10px", color: "var(--text-weaker)", "line-height": "1.4" }}>
-                  {loaded()} • {session().title || session().id} • {state.messages.length} message
+                  {loaded()} • {session.title || session.id} • {state.messages.length} message
                   {state.messages.length === 1 ? "" : "s"}
                 </div>
               </Show>
@@ -2048,7 +2050,7 @@ function Playground() {
                     {(msg) => (
                       <div style={{ width: "100%" }}>
                         <SessionTurn
-                          sessionID={session().id}
+                          sessionID={session.id}
                           messageID={msg.id}
                           messages={state.messages}
                           active={false}

packages/session-ui/src/components/tool-count-summary.stories.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { onCleanup } from "solid-js"
+import { onCleanup, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { AnimatedCountList, type CountItem } from "./tool-count-summary"
 import { ToolStatusTitle } from "./tool-status-title"
@@ -122,7 +122,7 @@ export const Playground = {
 
     return (
       <div style={{ display: "grid", gap: "24px", padding: "20px", "max-width": "520px" }}>
-        {reducedMotion() && (
+        <Show when={reducedMotion()}>
           <style>
             {`[data-reduced-motion="true"] *,
               [data-reduced-motion="true"] *::before,
@@ -130,7 +130,7 @@ export const Playground = {
                 transition-duration: 0ms !important;
               }`}
           </style>
-        )}
+        </Show>
 
         {/* Matches context-tool-group-trigger layout from message-part.tsx */}
         <span

packages/session-ui/src/components/tool-error-card.stories.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { For } from "solid-js"
 import { ToolErrorCard } from "./tool-error-card"
 
 const docs = `### Overview
@@ -83,9 +84,7 @@ export const All = {
   render: () => {
     return (
       <div style="display: flex; flex-direction: column; gap: 12px; max-width: 720px;">
-        {samples.map((item) => (
-          <ToolErrorCard tool={item.tool} error={item.error} />
-        ))}
+        <For each={samples}>{(item) => <ToolErrorCard tool={item.tool} error={item.error} />}</For>
       </div>
     )
   },

packages/ui/src/components/app-icon.stories.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { For } from "solid-js"
 import { iconNames } from "./app-icons/types"
 import * as mod from "./app-icon"
 import { create } from "../storybook/scaffold"
@@ -58,12 +59,14 @@ export const AllIcons = {
         "grid-template-columns": "repeat(auto-fill, minmax(72px, 1fr))",
       }}
     >
-      {iconNames.map((id) => (
-        <div style={{ display: "grid", gap: "6px", "justify-items": "center" }}>
-          <mod.AppIcon id={id} alt={id} />
-          <div style={{ "font-size": "10px", color: "var(--text-weak)", "text-align": "center" }}>{id}</div>
-        </div>
-      ))}
+      <For each={iconNames}>
+        {(id) => (
+          <div style={{ display: "grid", gap: "6px", "justify-items": "center" }}>
+            <mod.AppIcon id={id} alt={id} />
+            <div style={{ "font-size": "10px", color: "var(--text-weak)", "text-align": "center" }}>{id}</div>
+          </div>
+        )}
+      </For>
     </div>
   ),
 }

packages/ui/src/components/card.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, splitProps } from "solid-js"
+import { type ComponentProps, Show, splitProps } from "solid-js"
 import { Icon, type IconProps } from "./icon"
 
 type Variant = "normal" | "error" | "warning" | "success" | "info"
@@ -80,11 +80,11 @@ export function CardTitle(props: CardTitleProps) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      {show() ? (
+      <Show when={show()}>
         <span data-slot="card-title-icon" data-placeholder={placeholder() || undefined}>
           <Icon name={name() ?? "dash"} size="small" />
         </span>
-      ) : null}
+      </Show>
       {split.children}
     </div>
   )

packages/ui/src/components/file-icon.stories.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { For } from "solid-js"
 import * as mod from "./file-icon"
 import { create } from "../storybook/scaffold"
 
@@ -82,12 +83,14 @@ export const Samples = {
           "grid-template-columns": "repeat(auto-fill, minmax(120px, 1fr))",
         }}
       >
-        {items.map((node) => (
-          <div style={{ display: "flex", gap: "8px", "align-items": "center" }}>
-            <mod.FileIcon node={{ path: node.path, type: node.type }} mono={false} />
-            <div style={{ "font-size": "12px", color: "var(--text-weak)" }}>{node.path}</div>
-          </div>
-        ))}
+        <For each={items}>
+          {(node) => (
+            <div style={{ display: "flex", gap: "8px", "align-items": "center" }}>
+              <mod.FileIcon node={{ path: node.path, type: node.type }} mono={false} />
+              <div style={{ "font-size": "12px", color: "var(--text-weak)" }}>{node.path}</div>
+            </div>
+          )}
+        </For>
       </div>
     )
   },

packages/ui/src/components/icon.stories.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { For } from "solid-js"
 import * as mod from "./icon"
 import { create } from "../storybook/scaffold"
 
@@ -160,12 +161,14 @@ export const Gallery = {
         "grid-template-columns": "repeat(auto-fill, minmax(88px, 1fr))",
       }}
     >
-      {names.map((name) => (
-        <div style={{ display: "grid", gap: "6px", "justify-items": "center" }}>
-          <mod.Icon name={name} />
-          <div style={{ "font-size": "10px", color: "var(--text-weak)", "text-align": "center" }}>{name}</div>
-        </div>
-      ))}
+      <For each={names}>
+        {(name) => (
+          <div style={{ display: "grid", gap: "6px", "justify-items": "center" }}>
+            <mod.Icon name={name} />
+            <div style={{ "font-size": "10px", color: "var(--text-weak)", "text-align": "center" }}>{name}</div>
+          </div>
+        )}
+      </For>
     </div>
   ),
 }

packages/ui/src/components/list.tsx

@@ -367,9 +367,11 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
                                 </span>
                               )}
                             </Show>
-                            {props.divider && (i() !== group.items.length - 1 || (showAdd() && isLastGroup())) && (
+                            <Show
+                              when={props.divider && (i() !== group.items.length - 1 || (showAdd() && isLastGroup()))}
+                            >
                               <span data-slot="list-item-divider" />
-                            )}
+                            </Show>
                           </button>
                         )
                         if (props.itemWrapper) return props.itemWrapper(item, node)

packages/ui/src/components/provider-icon.stories.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { For } from "solid-js"
 import { iconNames } from "./provider-icons/types"
 import * as mod from "./provider-icon"
 import { create } from "../storybook/scaffold"
@@ -58,12 +59,14 @@ export const AllIcons = {
         "grid-template-columns": "repeat(auto-fill, minmax(80px, 1fr))",
       }}
     >
-      {iconNames.map((id) => (
-        <div style={{ display: "grid", gap: "6px", "justify-items": "center" }}>
-          <mod.ProviderIcon id={id} width="28" height="28" aria-label={id} />
-          <div style={{ "font-size": "10px", color: "var(--text-weak)", "text-align": "center" }}>{id}</div>
-        </div>
-      ))}
+      <For each={iconNames}>
+        {(id) => (
+          <div style={{ display: "grid", gap: "6px", "justify-items": "center" }}>
+            <mod.ProviderIcon id={id} width="28" height="28" aria-label={id} />
+            <div style={{ "font-size": "10px", color: "var(--text-weak)", "text-align": "center" }}>{id}</div>
+          </div>
+        )}
+      </For>
     </div>
   ),
 }

packages/ui/src/components/scroll-view.tsx

@@ -1,14 +1,4 @@
-import {
-  createEffect,
-  createMemo,
-  mergeProps,
-  onCleanup,
-  onMount,
-  Show,
-  splitProps,
-  type Accessor,
-  type ComponentProps,
-} from "solid-js"
+import { createEffect, mergeProps, onCleanup, onMount, Show, splitProps, type ComponentProps } from "solid-js"
 import { Portal } from "solid-js/web"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createStore } from "solid-js/store"
@@ -27,9 +17,9 @@ export interface ScrollViewProps extends ComponentProps<"div"> {
    * */
   thumbVisibility?: ScrollViewThumbVisibility
   /** Mount the thumb into an external track. Scroll metrics still come from this ScrollView. */
-  thumbContainer?: HTMLElement | Accessor<HTMLElement | undefined>
+  thumbContainer?: HTMLElement
   /** Element whose hover reveals the thumb. Defaults to the ScrollView root when unset. */
-  thumbHoverTarget?: HTMLElement | Accessor<HTMLElement | undefined>
+  thumbHoverTarget?: HTMLElement
 }
 
 export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
@@ -128,13 +118,8 @@ export function ScrollView(props: ScrollViewProps) {
   let viewportRef!: HTMLDivElement
   let thumbRef!: HTMLDivElement
 
-  const resolveEl = (value: HTMLElement | Accessor<HTMLElement | undefined> | undefined) => {
-    if (typeof value === "function") return value()
-    return value
-  }
-
-  const thumbMount = createMemo(() => resolveEl(local.thumbContainer))
-  const thumbHover = createMemo(() => resolveEl(local.thumbHoverTarget))
+  const thumbMount = () => local.thumbContainer
+  const thumbHover = () => local.thumbHoverTarget
   const hoverRoot = () => !local.thumbHoverTarget && !local.thumbContainer
 
   const [state, setState] = createStore({

packages/ui/src/components/text-reveal.stories.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { onCleanup } from "solid-js"
+import { For, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { TextReveal } from "./text-reveal"
 
@@ -181,11 +181,13 @@ export const Playground = {
         </div>
 
         <div style={{ display: "flex", gap: "6px", "flex-wrap": "wrap" }}>
-          {TEXTS.map((t, i) => (
-            <button onClick={() => setState("index", i)} style={btn(index() === i)}>
-              {t ?? "(none)"}
-            </button>
-          ))}
+          <For each={TEXTS}>
+            {(t, i) => (
+              <button onClick={() => setState("index", i())} style={btn(index() === i())}>
+                {t ?? "(none)"}
+              </button>
+            )}
+          </For>
         </div>
 
         <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>

packages/ui/src/components/thinking-heading.stories.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { createEffect, on, onMount, onCleanup } from "solid-js"
+import { createEffect, For, on, onMount, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { TextShimmer } from "./text-shimmer"
 import { TextReveal } from "./text-reveal"
@@ -667,22 +667,24 @@ export const Playground = {
               </span>
             </span>
           </div>
-          {VARIANTS.map((v) => (
-            <div style={cardStyle}>
-              <span style={cardLabel}>{v.label}</span>
-              <span style={thinkingRow}>
-                <TextShimmer text="Thinking" active={active()} />
-                <span style={headingSlot}>
-                  <AnimatedHeading
-                    text={heading()}
-                    variant={v.key}
-                    debug={v.key === "odometer" && debug()}
-                    odoBlur={v.key === "odometer" && odoBlur()}
-                  />
+          <For each={VARIANTS}>
+            {(v) => (
+              <div style={cardStyle}>
+                <span style={cardLabel}>{v.label}</span>
+                <span style={thinkingRow}>
+                  <TextShimmer text="Thinking" active={active()} />
+                  <span style={headingSlot}>
+                    <AnimatedHeading
+                      text={heading()}
+                      variant={v.key}
+                      debug={v.key === "odometer" && debug()}
+                      odoBlur={v.key === "odometer" && odoBlur()}
+                    />
+                  </span>
                 </span>
-              </span>
-            </div>
-          ))}
+              </div>
+            )}
+          </For>
         </div>
 
         {/* ── Sliders ──────────────────────────────────────── */}
@@ -824,17 +826,19 @@ export const Playground = {
           </div>
 
           <div style={{ display: "flex", gap: "6px", "flex-wrap": "wrap" }}>
-            {HEADINGS.map((h, i) => (
-              <button
-                onClick={() => {
-                  setState("headingIndex", i)
-                  setState("heading", h)
-                }}
-                style={smallBtn(headingIndex() === i)}
-              >
-                {h ?? "(no submessage)"}
-              </button>
-            ))}
+            <For each={HEADINGS}>
+              {(h, i) => (
+                <button
+                  onClick={() => {
+                    setState("headingIndex", i())
+                    setState("heading", h)
+                  }}
+                  style={smallBtn(headingIndex() === i())}
+                >
+                  {h ?? "(no submessage)"}
+                </button>
+              )}
+            </For>
           </div>
 
           <div

packages/ui/src/components/toast.tsx

@@ -1,7 +1,7 @@
 import { Toast as Kobalte, toaster } from "@kobalte/core/toast"
 import type { ToastRootProps, ToastCloseButtonProps, ToastTitleProps, ToastDescriptionProps } from "@kobalte/core/toast"
 import type { ComponentProps, JSX } from "solid-js"
-import { Show } from "solid-js"
+import { For, Show } from "solid-js"
 import { Portal } from "solid-js/web"
 import { useI18n } from "../context/i18n"
 import { Icon, type IconProps } from "./icon"
@@ -136,19 +136,21 @@ export function showToast(options: ToastOptions | string) {
         </Show>
         <Show when={opts.actions?.length}>
           <Toast.Actions>
-            {opts.actions!.map((action) => (
-              <button
-                data-slot="toast-action"
-                onClick={() => {
-                  if (typeof action.onClick === "function") {
-                    action.onClick()
-                  }
-                  toaster.dismiss(props.toastId)
-                }}
-              >
-                {action.label}
-              </button>
-            ))}
+            <For each={opts.actions}>
+              {(action) => (
+                <button
+                  data-slot="toast-action"
+                  onClick={() => {
+                    if (typeof action.onClick === "function") {
+                      action.onClick()
+                    }
+                    toaster.dismiss(props.toastId)
+                  }}
+                >
+                  {action.label}
+                </button>
+              )}
+            </For>
           </Toast.Actions>
         </Show>
       </Toast.Content>

packages/ui/src/v2/components/button-v2.stories.tsx

@@ -1,3 +1,4 @@
+import { For } from "solid-js"
 import { ButtonV2 } from "./button-v2"
 
 const docs = `### Overview
@@ -123,30 +124,34 @@ export const AllStates = {
     const toTitleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)
     return (
       <div style={{ display: "grid", gap: "12px" }}>
-        {variants.map((variant) => (
-          <div style={{ display: "grid", gap: "8px" }}>
-            <div
-              style={{
-                "font-size": "12px",
-                color: "var(--text-weak)",
-                "text-transform": "capitalize",
-              }}
-            >
-              {variant}
+        <For each={variants}>
+          {(variant) => (
+            <div style={{ display: "grid", gap: "8px" }}>
+              <div
+                style={{
+                  "font-size": "12px",
+                  color: "var(--text-weak)",
+                  "text-transform": "capitalize",
+                }}
+              >
+                {variant}
+              </div>
+              <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
+                <For each={states}>
+                  {(state) => (
+                    <ButtonV2
+                      variant={variant}
+                      data-state={state === "default" ? undefined : state}
+                      disabled={state === "disabled"}
+                    >
+                      {toTitleCase(state)}
+                    </ButtonV2>
+                  )}
+                </For>
+              </div>
             </div>
-            <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
-              {states.map((state) => (
-                <ButtonV2
-                  variant={variant}
-                  data-state={state === "default" ? undefined : state}
-                  disabled={state === "disabled"}
-                >
-                  {toTitleCase(state)}
-                </ButtonV2>
-              ))}
-            </div>
-          </div>
-        ))}
+          )}
+        </For>
       </div>
     )
   },

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

@@ -59,7 +59,7 @@ export function DialogHeader(props: DialogHeaderProps) {
   return (
     <div data-slot="dialog-header" data-hide-close={hideClose() ? "" : undefined}>
       {local.children}
-      {!hideClose() && (
+      <Show when={!hideClose()}>
         <Kobalte.CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
           <svg
             width="16"
@@ -76,7 +76,7 @@ export function DialogHeader(props: DialogHeaderProps) {
             />
           </svg>
         </Kobalte.CloseButton>
-      )}
+      </Show>
     </div>
   )
 }

packages/ui/src/v2/components/icon-button-v2.stories.tsx

@@ -1,3 +1,4 @@
+import { For } from "solid-js"
 import { IconButtonV2 } from "./icon-button-v2"
 
 const docs = `### Overview
@@ -82,23 +83,27 @@ export const AllStates = {
 
     return (
       <div style={{ display: "grid", gap: "12px" }}>
-        {variants.map((variant) => (
-          <div style={{ display: "grid", gap: "8px" }}>
-            <div style={{ "font-size": "12px", color: "var(--text-weak)", "text-transform": "capitalize" }}>
-              {variant}
+        <For each={variants}>
+          {(variant) => (
+            <div style={{ display: "grid", gap: "8px" }}>
+              <div style={{ "font-size": "12px", color: "var(--text-weak)", "text-transform": "capitalize" }}>
+                {variant}
+              </div>
+              <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
+                <For each={states}>
+                  {(state) => (
+                    <IconButtonV2
+                      icon="plus"
+                      variant={variant}
+                      data-state={state === "default" ? undefined : state}
+                      disabled={state === "disabled"}
+                    />
+                  )}
+                </For>
+              </div>
             </div>
-            <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
-              {states.map((state) => (
-                <IconButtonV2
-                  icon="plus"
-                  variant={variant}
-                  data-state={state === "default" ? undefined : state}
-                  disabled={state === "disabled"}
-                />
-              ))}
-            </div>
-          </div>
-        ))}
+          )}
+        </For>
       </div>
     )
   },

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

@@ -239,6 +239,8 @@ function createToastV2Actions(entry: ActiveToastV2) {
   if (!entry.options.actions?.length) return undefined
   return (
     <ToastV2.Actions>
+      {/* Static map, not <For>: this JSX is created imperatively outside any Solid
+          root, where a <For> computation would never be disposed. */}
       {entry.options.actions.map((action, index) => (
         <button
           type="button"