fix(ui): preserve hidden session state

Author: pascalandr

packages/ui/src/components/instance/instance-shell2.tsx

@@ -69,6 +69,17 @@ function RightPanelFallback() {
   return <div class="flex-1 min-h-0" />
 }
 
+function CommandPaletteFallback(props: { title: string; loadingLabel: string }) {
+  return (
+    <div class="fixed inset-0 z-[70] flex items-start justify-center bg-black/40 px-4 pt-[12vh]">
+      <div class="w-full max-w-xl rounded-xl border bg-[var(--surface-base)] px-5 py-4 shadow-xl">
+        <div class="text-sm font-semibold text-[var(--text-primary)]">{props.title}</div>
+        <div class="mt-2 text-sm text-[var(--text-secondary)]">{props.loadingLabel}</div>
+      </div>
+    </div>
+  )
+}
+
 interface InstanceShellProps {
   instance: Instance
   // Provided by App-level instance tabs; lets us pause heavy rendering
@@ -884,7 +895,14 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       </div>
 
       <Show when={paletteOpen()}>
-        <Suspense fallback={null}>
+        <Suspense
+          fallback={
+            <CommandPaletteFallback
+              title={t("commandPalette.title")}
+              loadingLabel={t("unifiedPicker.loading.loadingWorkspace")}
+            />
+          }
+        >
           <LazyCommandPalette
             open={paletteOpen()}
             onClose={() => hideCommandPalette(props.instance.id)}

packages/ui/src/components/instance/shell/right-panel/tabs/ChangesTab.tsx

@@ -1,11 +1,13 @@
-import { For, Show, createMemo, type Accessor, type Component, type JSX } from "solid-js"
-
-import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"
+import { For, Show, Suspense, createMemo, lazy, type Accessor, type Component, type JSX } from "solid-js"
 
 import DiffToolbar from "../components/DiffToolbar"
 import SplitFilePanel from "../components/SplitFilePanel"
 import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"
 
+const LazyMonacoDiffViewer = lazy(() =>
+  import("../../../../file-viewer/monaco-diff-viewer").then((module) => ({ default: module.MonacoDiffViewer })),
+)
+
 interface ChangesTabProps {
   t: (key: string, vars?: Record<string, any>) => string
 
@@ -113,15 +115,17 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
             }
           >
             {(file) => (
-              <MonacoDiffViewer
-                scopeKey={scopeKey()}
-                path={String(file().file || "")}
-                before={String((file() as any).before || "")}
-                after={String((file() as any).after || "")}
-                viewMode={props.diffViewMode()}
-                contextMode={props.diffContextMode()}
-                wordWrap={props.diffWordWrapMode()}
-              />
+              <Suspense fallback={<div class="file-viewer-empty"><span class="file-viewer-empty-text">{props.t("instanceShell.sessionChanges.loading")}</span></div>}>
+                <LazyMonacoDiffViewer
+                  scopeKey={scopeKey()}
+                  path={String(file().file || "")}
+                  before={String((file() as any).before || "")}
+                  after={String((file() as any).after || "")}
+                  viewMode={props.diffViewMode()}
+                  contextMode={props.diffContextMode()}
+                  wordWrap={props.diffWordWrapMode()}
+                />
+              </Suspense>
             )}
           </Show>
         </div>

packages/ui/src/components/instance/shell/right-panel/tabs/FilesTab.tsx

@@ -1,12 +1,14 @@
-import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, Suspense, lazy, type Accessor, type Component, type JSX } from "solid-js"
 import type { FileNode } from "@opencode-ai/sdk/v2/client"
 
 import { RefreshCw } from "lucide-solid"
 
-import { MonacoFileViewer } from "../../../../file-viewer/monaco-file-viewer"
-
 import SplitFilePanel from "../components/SplitFilePanel"
 
+const LazyMonacoFileViewer = lazy(() =>
+  import("../../../../file-viewer/monaco-file-viewer").then((module) => ({ default: module.MonacoFileViewer })),
+)
+
 interface FilesTabProps {
   t: (key: string, vars?: Record<string, any>) => string
 
@@ -51,7 +53,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
     const headerDisplayedPath = () => props.browserSelectedPath() || props.browserPath()
 
     const emptyViewerMessage = () => {
-      if (props.browserLoading() && entriesValue === null) return "Loading files..."
+      if (props.browserLoading() && entriesValue === null) return props.t("instanceInfo.loading")
       return "Select a file to preview"
     }
 
@@ -77,7 +79,9 @@ const FilesTab: Component<FilesTabProps> = (props) => {
                     }
                   >
                     {(payload) => (
-                      <MonacoFileViewer scopeKey={props.scopeKey()} path={payload().path} content={payload().content} />
+                      <Suspense fallback={<div class="file-viewer-empty"><span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span></div>}>
+                        <LazyMonacoFileViewer scopeKey={props.scopeKey()} path={payload().path} content={payload().content} />
+                      </Suspense>
                     )}
                   </Show>
                 }
@@ -113,7 +117,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
         </Show>
 
         <Show when={props.browserLoading() && entriesValue === null}>
-          <div class="p-3 text-xs text-secondary">Loading files...</div>
+          <div class="p-3 text-xs text-secondary">{props.t("instanceInfo.loading")}</div>
         </Show>
 
         <For each={sorted}>

packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx

@@ -1,14 +1,16 @@
-import { For, Show, createMemo, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, Suspense, createMemo, lazy, type Accessor, type Component, type JSX } from "solid-js"
 import type { File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
 
 import { RefreshCw } from "lucide-solid"
 
-import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"
-
 import DiffToolbar from "../components/DiffToolbar"
 import SplitFilePanel from "../components/SplitFilePanel"
 import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"
 
+const LazyMonacoDiffViewer = lazy(() =>
+  import("../../../../file-viewer/monaco-diff-viewer").then((module) => ({ default: module.MonacoDiffViewer })),
+)
+
 interface GitChangesTabProps {
   t: (key: string, vars?: Record<string, any>) => string
 
@@ -122,7 +124,8 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                     }
                   >
                     {(file) => (
-                        <MonacoDiffViewer
+                      <Suspense fallback={<div class="file-viewer-empty"><span class="file-viewer-empty-text">{props.t("instanceShell.sessionChanges.loading")}</span></div>}>
+                        <LazyMonacoDiffViewer
                           scopeKey={props.scopeKey()}
                           path={String(file().path || "")}
                           before={String((file() as any).before || "")}
@@ -131,7 +134,8 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                           contextMode={props.diffContextMode()}
                           wordWrap={props.diffWordWrapMode()}
                         />
-                      )}
+                      </Suspense>
+                    )}
                   </Show>
                 }
               >

packages/ui/src/components/prompt-input.tsx

@@ -1,6 +1,5 @@
-import { createSignal, Show, onMount, onCleanup, createEffect, on } from "solid-js"
+import { Suspense, createEffect, createSignal, lazy, on, onCleanup, onMount, Show } from "solid-js"
 import { ArrowBigUp, ArrowBigDown } from "lucide-solid"
-import UnifiedPicker from "./unified-picker"
 import ExpandButton from "./expand-button"
 import { clearAttachments, removeAttachment } from "../stores/attachments"
 import { resolvePastedPlaceholders } from "../lib/prompt-placeholders"
@@ -18,6 +17,7 @@ import { usePromptAttachments } from "./prompt-input/usePromptAttachments"
 import { usePromptPicker } from "./prompt-input/usePromptPicker"
 import { usePromptKeyDown } from "./prompt-input/usePromptKeyDown"
 const log = getLogger("actions")
+const LazyUnifiedPicker = lazy(() => import("./unified-picker"))
 
 export default function PromptInput(props: PromptInputProps) {
   const { t } = useI18n()
@@ -428,18 +428,26 @@ export default function PromptInput(props: PromptInputProps) {
         onDrop={handleDrop}
       >
         <Show when={showPicker() && instance()}>
-          <UnifiedPicker
-            open={showPicker()}
-            mode={pickerMode()}
-            onClose={handlePickerClose}
-            onSelect={handlePickerSelect}
-            agents={instanceAgents()}
-            commands={getCommands(props.instanceId)}
-            instanceClient={instance()!.client}
-            searchQuery={searchQuery()}
-            textareaRef={textareaRef}
-            workspaceId={props.instanceId}
-          />
+          <Suspense
+            fallback={
+              <div class="unified-picker unified-picker-loading" role="status" aria-live="polite">
+                {t("unifiedPicker.loading.loadingWorkspace")}
+              </div>
+            }
+          >
+            <LazyUnifiedPicker
+              open={showPicker()}
+              mode={pickerMode()}
+              onClose={handlePickerClose}
+              onSelect={handlePickerSelect}
+              agents={instanceAgents()}
+              commands={getCommands(props.instanceId)}
+              instanceClient={instance()!.client}
+              searchQuery={searchQuery()}
+              textareaRef={textareaRef}
+              workspaceId={props.instanceId}
+            />
+          </Suspense>
         </Show>
 
         <div class="flex flex-1 flex-col">

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

@@ -328,7 +328,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
         if (!activeSession) return null
         return (
           <div ref={rootRef} class="session-view">
-            <Show when={isActiveSession()} fallback={<div class="flex-1 min-h-0" />}>
+            <div class="flex-1 min-h-0" style={{ display: isActiveSession() ? "flex" : "none" }}>
               <MessageSection
                 instanceId={props.instanceId}
                 sessionId={activeSession.id}
@@ -350,44 +350,41 @@ export const SessionView: Component<SessionViewProps> = (props) => {
                 forceCompactStatusLayout={props.forceCompactStatusLayout}
                 onQuoteSelection={handleQuoteSelection}
               />
-            </Show>
-
-
-              <Show when={isActiveSession()}>
-                <>
-                  <Show when={attachments().length > 0}>
-                    <PromptAttachmentsBar
-                      attachments={attachments()}
-                      onRemoveAttachment={(attachmentId) => {
-                        if (promptInputApi) {
-                          promptInputApi.removeAttachment(attachmentId)
-                          return
-                        }
-                        removeAttachment(props.instanceId, props.sessionId, attachmentId)
-                      }}
-                      onExpandTextAttachment={(attachmentId) => promptInputApi?.expandTextAttachment(attachmentId)}
-                    />
-                  </Show>
-
-                  <PromptInput
-                    instanceId={props.instanceId}
-                    instanceFolder={props.instanceFolder}
-                    sessionId={activeSession.id}
-                    isActive={props.isActive}
-                    compactLayout={props.compactPromptLayout}
-                    onSend={handleSendMessage}
-                    onRunShell={handleRunShell}
-                    escapeInDebounce={props.escapeInDebounce}
-                    isSessionBusy={sessionBusy()}
-                    disabled={sessionNeedsInput()}
-                    onAbortSession={handleAbortSession}
-                    registerPromptInputApi={registerPromptInputApi}
-                  />
-                </>
+            </div>
+
+            <div style={{ display: isActiveSession() ? "block" : "none" }}>
+              <Show when={attachments().length > 0}>
+                <PromptAttachmentsBar
+                  attachments={attachments()}
+                  onRemoveAttachment={(attachmentId) => {
+                    if (promptInputApi) {
+                      promptInputApi.removeAttachment(attachmentId)
+                      return
+                    }
+                    removeAttachment(props.instanceId, props.sessionId, attachmentId)
+                  }}
+                  onExpandTextAttachment={(attachmentId) => promptInputApi?.expandTextAttachment(attachmentId)}
+                />
               </Show>
+
+              <PromptInput
+                instanceId={props.instanceId}
+                instanceFolder={props.instanceFolder}
+                sessionId={activeSession.id}
+                isActive={props.isActive}
+                compactLayout={props.compactPromptLayout}
+                onSend={handleSendMessage}
+                onRunShell={handleRunShell}
+                escapeInDebounce={props.escapeInDebounce}
+                isSessionBusy={sessionBusy()}
+                disabled={sessionNeedsInput()}
+                onAbortSession={handleAbortSession}
+                registerPromptInputApi={registerPromptInputApi}
+              />
             </div>
-          )
-        }}
+          </div>
+        )
+      }}
     </Show>
   )
 }

packages/ui/src/lib/ui-bootstrap-cache.ts

@@ -1,8 +1,8 @@
 export type UiBootstrapTheme = "light" | "dark" | "system"
 
 export interface UiBootstrapCacheSnapshot {
-  theme?: UiBootstrapTheme | null
-  locale?: string | null
+  theme?: UiBootstrapTheme
+  locale?: string
 }
 
 const UI_BOOTSTRAP_CACHE_KEY = "codenomad:ui-bootstrap"
@@ -43,12 +43,11 @@ export function writeUiBootstrapCache(snapshot: UiBootstrapCacheSnapshot) {
   try {
     const previous = readUiBootstrapCache()
     const next: UiBootstrapCacheSnapshot = {
-      theme: snapshot.theme === undefined ? previous.theme : snapshot.theme ?? undefined,
-      locale: snapshot.locale === undefined ? previous.locale : snapshot.locale ?? undefined,
+      theme: snapshot.theme ?? previous.theme,
+      locale: snapshot.locale ?? previous.locale,
     }
 
     if (!next.theme && !next.locale) {
-      window.localStorage.removeItem(UI_BOOTSTRAP_CACHE_KEY)
       return
     }
 

packages/ui/src/stores/preferences.tsx

@@ -600,17 +600,17 @@ const configContextValue: ConfigContextValue = {
 
 export const ConfigProvider: ParentComponent = (props) => {
   createEffect(() => {
-    if (!isLoaded()) {
-      return
-    }
-
     const bucket = uiConfigBucket()
     const theme = bucket.theme
     const locale = bucket.settings?.locale
 
+    if (!theme && !locale) {
+      return
+    }
+
     writeUiBootstrapCache({
-      theme: theme ?? null,
-      locale: locale ?? null,
+      theme,
+      locale,
     })
   })
 

packages/ui/src/styles/messaging/tool-call.css

@@ -76,6 +76,16 @@
   --tool-call-max-height-large: calc(var(--tool-call-lines-large) * var(--tool-call-line-unit));
 }
 
+.tool-call-loading {
+  min-height: 3rem;
+  border-left: 3px solid var(--border-muted, var(--border-base));
+  background:
+    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-hover) 72%, transparent), transparent)
+    var(--surface-secondary);
+  background-size: 200% 100%;
+  animation: shimmer 1.6s ease-in-out infinite;
+}
+
 .tool-call-message .tool-call {
   border: none;
   border-radius: 0;