From 8c0a82d3a83fd7c64dcaf9d8447a45bd451dafe4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Thu, 19 Mar 2026 21:21:00 +0100
Subject: [PATCH] refactor(ui): keep locale bootstrap branch focused

---
 packages/ui/src/App.tsx                       |  67 +++----
 .../components/instance/instance-shell2.tsx   | 174 +++++++-----------
 .../instance/shell/useSessionCache.ts         |  22 +--
 .../src/components/session/session-view.tsx   |  10 +-
 4 files changed, 98 insertions(+), 175 deletions(-)

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 04e3394b..4420af92 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -1,12 +1,15 @@
-import { Component, For, Show, Suspense, createMemo, createEffect, createSignal, lazy, onMount, onCleanup } from "solid-js"
+import { Component, For, Show, createMemo, createEffect, createSignal, onMount, onCleanup } from "solid-js"
 import { Dialog } from "@kobalte/core/dialog"
 import { Toaster } from "solid-toast"
 import useMediaQuery from "@suid/material/useMediaQuery"
 import { Minimize2 } from "lucide-solid"
 import AlertDialog from "./components/alert-dialog"
+import FolderSelectionView from "./components/folder-selection-view"
 import { showConfirmDialog } from "./stores/alerts"
 import InstanceTabs from "./components/instance-tabs"
+import InstanceDisconnectedModal from "./components/instance-disconnected-modal"
 import InstanceShell from "./components/instance/instance-shell2"
+import { SettingsScreen } from "./components/settings-screen"
 import { InstanceMetadataProvider } from "./lib/contexts/instance-metadata-context"
 import { initMarkdown } from "./lib/markdown"
 import { initGithubStars } from "./stores/github-stars"
@@ -51,16 +54,10 @@ import {
 } from "./stores/sessions"
 
 import { getInstanceSessionIndicatorStatus } from "./stores/session-status"
-import { openSettings, settingsOpen } from "./stores/settings-screen"
+import { openSettings } from "./stores/settings-screen"
 
 const log = getLogger("actions")
 
-const LazyFolderSelectionView = lazy(() => import("./components/folder-selection-view"))
-const LazyInstanceDisconnectedModal = lazy(() => import("./components/instance-disconnected-modal"))
-const LazySettingsScreen = lazy(() =>
-  import("./components/settings-screen").then((module) => ({ default: module.SettingsScreen })),
-)
-
 const App: Component = () => {
   const { isDark } = useTheme()
   const { t } = useI18n()
@@ -412,16 +409,12 @@ const App: Component = () => {
 
   return (
     <>
-      <Show when={Boolean(disconnectedInstance())}>
-        <Suspense fallback={null}>
-          <LazyInstanceDisconnectedModal
-            open={Boolean(disconnectedInstance())}
-            folder={disconnectedInstance()?.folder}
-            reason={disconnectedInstance()?.reason}
-            onClose={handleDisconnectedInstanceClose}
-          />
-        </Suspense>
-      </Show>
+      <InstanceDisconnectedModal
+        open={Boolean(disconnectedInstance())}
+        folder={disconnectedInstance()?.folder}
+        reason={disconnectedInstance()?.reason}
+        onClose={handleDisconnectedInstanceClose}
+      />
 
       <Dialog open={Boolean(launchError())} modal>
         <Dialog.Portal>
@@ -534,37 +527,29 @@ const App: Component = () => {
             </>
           }
         >
-          <Suspense fallback={<div class="flex-1 min-h-0" />}>
-            <LazyFolderSelectionView
-              onSelectFolder={handleSelectFolder}
-              isLoading={isSelectingFolder()}
-            />
-          </Suspense>
+          <FolderSelectionView
+            onSelectFolder={handleSelectFolder}
+            isLoading={isSelectingFolder()}
+          />
         </Show>
 
         <Show when={showFolderSelection()}>
           <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
             <div class="w-full h-full relative">
-              <Suspense fallback={<div class="w-full h-full" />}>
-                <LazyFolderSelectionView
-                  onSelectFolder={handleSelectFolder}
-                  isLoading={isSelectingFolder()}
-                  onClose={() => {
-                    setShowFolderSelection(false)
-                    clearLaunchError()
-                  }}
-                />
-              </Suspense>
+              <FolderSelectionView
+                onSelectFolder={handleSelectFolder}
+                isLoading={isSelectingFolder()}
+                onClose={() => {
+                  setShowFolderSelection(false)
+                  clearLaunchError()
+                }}
+              />
             </div>
           </div>
         </Show>
-
-        <Show when={settingsOpen()}>
-          <Suspense fallback={null}>
-            <LazySettingsScreen />
-          </Suspense>
-        </Show>
-
+ 
+        <SettingsScreen />
+ 
         <AlertDialog />
 
         <Toaster
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 8ac7858d..84e55578 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -1,11 +1,9 @@
 import {
   For,
   Show,
-  Suspense,
   createEffect,
   createMemo,
   createSignal,
-  lazy,
   onCleanup,
   onMount,
   type Accessor,
@@ -24,7 +22,11 @@ import { keyboardRegistry, type KeyboardShortcut } from "../../lib/keyboard-regi
 
 import { isOpen as isCommandPaletteOpen, hideCommandPalette, showCommandPalette } from "../../stores/command-palette"
 import Kbd from "../kbd"
+import InstanceWelcomeView from "../instance-welcome-view"
+import InfoView from "../info-view"
+import CommandPalette from "../command-palette"
 import PermissionNotificationBanner from "../permission-notification-banner"
+import PermissionApprovalModal from "../permission-approval-modal"
 import SessionView from "../session/session-view"
 import { formatTokenTotal } from "../../lib/formatters"
 import ContextMeter from "../context-meter"
@@ -32,10 +34,12 @@ import { sseManager } from "../../lib/sse-manager"
 import { getLogger } from "../../lib/logger"
 import { serverApi } from "../../lib/api-client"
 import { loadBackgroundProcesses } from "../../stores/background-processes"
+import { BackgroundProcessOutputDialog } from "../background-process-output-dialog"
 import { useI18n } from "../../lib/i18n"
 import { getPermissionQueueLength, getQuestionQueueLength } from "../../stores/instances"
 import SessionSidebar from "./shell/SessionSidebar"
 import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
+import RightPanel from "./shell/right-panel/RightPanel"
 import { useDrawerChrome } from "./shell/useDrawerChrome"
 import { getSessionStatus } from "../../stores/session-status"
 import { Maximize2, ShieldAlert } from "lucide-solid"
@@ -56,19 +60,6 @@ import { useInstanceSessionContext } from "./shell/useInstanceSessionContext"
 
 const log = getLogger("session")
 
-const LazyInstanceWelcomeView = lazy(() => import("../instance-welcome-view"))
-const LazyInfoView = lazy(() => import("../info-view"))
-const LazyCommandPalette = lazy(() => import("../command-palette"))
-const LazyBackgroundProcessOutputDialog = lazy(() =>
-  import("../background-process-output-dialog").then((module) => ({ default: module.BackgroundProcessOutputDialog })),
-)
-const LazyPermissionApprovalModal = lazy(() => import("../permission-approval-modal"))
-const LazyRightPanel = lazy(() => import("./shell/right-panel/RightPanel"))
-
-function RightPanelFallback() {
-  return <div class="flex-1 min-h-0" />
-}
-
 interface InstanceShellProps {
   instance: Instance
   // Provided by App-level instance tabs; lets us pause heavy rendering
@@ -503,30 +494,28 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             role="presentation"
             aria-hidden="true"
           />
-          <Suspense fallback={<RightPanelFallback />}>
-            <LazyRightPanel
-              t={t}
-              instanceId={props.instance.id}
-              instance={props.instance}
-              activeSessionId={activeSessionIdForInstance}
-              activeSession={activeSessionForInstance}
-              activeSessionDiffs={activeSessionDiffs}
-              latestTodoState={latestTodoState}
-              backgroundProcessList={backgroundProcessList}
-              onOpenBackgroundOutput={openBackgroundOutput}
-              onStopBackgroundProcess={stopBackgroundProcess}
-              onTerminateBackgroundProcess={terminateBackgroundProcess}
-              isPhoneLayout={isPhoneLayout}
-              rightDrawerWidth={rightDrawerWidth}
-              rightDrawerWidthInitialized={rightDrawerWidthInitialized}
-              rightDrawerState={rightDrawerState}
-              rightPinned={rightPinned}
-              onCloseRightDrawer={closeRightDrawer}
-              onPinRightDrawer={pinRightDrawer}
-              onUnpinRightDrawer={unpinRightDrawer}
-              setContentEl={setRightDrawerContentEl}
-            />
-          </Suspense>
+          <RightPanel
+            t={t}
+            instanceId={props.instance.id}
+            instance={props.instance}
+            activeSessionId={activeSessionIdForInstance}
+            activeSession={activeSessionForInstance}
+            activeSessionDiffs={activeSessionDiffs}
+            latestTodoState={latestTodoState}
+            backgroundProcessList={backgroundProcessList}
+            onOpenBackgroundOutput={openBackgroundOutput}
+            onStopBackgroundProcess={stopBackgroundProcess}
+            onTerminateBackgroundProcess={terminateBackgroundProcess}
+            isPhoneLayout={isPhoneLayout}
+            rightDrawerWidth={rightDrawerWidth}
+            rightDrawerWidthInitialized={rightDrawerWidthInitialized}
+            rightDrawerState={rightDrawerState}
+            rightPinned={rightPinned}
+            onCloseRightDrawer={closeRightDrawer}
+            onPinRightDrawer={pinRightDrawer}
+            onUnpinRightDrawer={unpinRightDrawer}
+            setContentEl={setRightDrawerContentEl}
+          />
         </Box>
       )
     }
@@ -566,32 +555,28 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             aria-hidden="true"
           />
         </Show>
-        <Show when={rightOpen() || rightPinned()} fallback={<RightPanelFallback />}>
-          <Suspense fallback={<RightPanelFallback />}>
-            <LazyRightPanel
-              t={t}
-              instanceId={props.instance.id}
-              instance={props.instance}
-              activeSessionId={activeSessionIdForInstance}
-              activeSession={activeSessionForInstance}
-              activeSessionDiffs={activeSessionDiffs}
-              latestTodoState={latestTodoState}
-              backgroundProcessList={backgroundProcessList}
-              onOpenBackgroundOutput={openBackgroundOutput}
-              onStopBackgroundProcess={stopBackgroundProcess}
-              onTerminateBackgroundProcess={terminateBackgroundProcess}
-              isPhoneLayout={isPhoneLayout}
-              rightDrawerWidth={rightDrawerWidth}
-              rightDrawerWidthInitialized={rightDrawerWidthInitialized}
-              rightDrawerState={rightDrawerState}
-              rightPinned={rightPinned}
-              onCloseRightDrawer={closeRightDrawer}
-              onPinRightDrawer={pinRightDrawer}
-              onUnpinRightDrawer={unpinRightDrawer}
-              setContentEl={setRightDrawerContentEl}
-            />
-          </Suspense>
-        </Show>
+        <RightPanel
+          t={t}
+          instanceId={props.instance.id}
+          instance={props.instance}
+          activeSessionId={activeSessionIdForInstance}
+          activeSession={activeSessionForInstance}
+          activeSessionDiffs={activeSessionDiffs}
+          latestTodoState={latestTodoState}
+          backgroundProcessList={backgroundProcessList}
+          onOpenBackgroundOutput={openBackgroundOutput}
+          onStopBackgroundProcess={stopBackgroundProcess}
+          onTerminateBackgroundProcess={terminateBackgroundProcess}
+          isPhoneLayout={isPhoneLayout}
+          rightDrawerWidth={rightDrawerWidth}
+          rightDrawerWidthInitialized={rightDrawerWidthInitialized}
+          rightDrawerState={rightDrawerState}
+          rightPinned={rightPinned}
+          onCloseRightDrawer={closeRightDrawer}
+          onPinRightDrawer={pinRightDrawer}
+          onUnpinRightDrawer={unpinRightDrawer}
+          setContentEl={setRightDrawerContentEl}
+        />
       </Drawer>
 
     )
@@ -849,9 +834,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             }
           >
             <div class="info-view-pane flex flex-col flex-1 min-h-0 overflow-y-auto">
-              <Suspense fallback={<div class="flex-1 min-h-0" />}>
-                <LazyInfoView instanceId={props.instance.id} />
-              </Suspense>
+              <InfoView instanceId={props.instance.id} />
             </div>
           </Show>
         </Box>
@@ -867,49 +850,30 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
         class="instance-shell2 flex flex-col flex-1 min-h-0"
         data-instance-id={props.instance.id}
       >
-        <Show
-          when={hasSessions()}
-          fallback={
-            <Suspense fallback={<div class="flex-1 min-h-0" />}>
-              <LazyInstanceWelcomeView instance={props.instance} />
-            </Suspense>
-          }
-        >
+        <Show when={hasSessions()} fallback={<InstanceWelcomeView instance={props.instance} />}>
           {sessionLayout}
         </Show>
       </div>
 
-      <Show when={paletteOpen()}>
-        <Suspense fallback={null}>
-          <LazyCommandPalette
-            open={paletteOpen()}
-            onClose={() => hideCommandPalette(props.instance.id)}
-            commands={instancePaletteCommands()}
-            onExecute={props.onExecuteCommand}
-          />
-        </Suspense>
-      </Show>
+      <CommandPalette
+        open={paletteOpen()}
+        onClose={() => hideCommandPalette(props.instance.id)}
+        commands={instancePaletteCommands()}
+        onExecute={props.onExecuteCommand}
+      />
 
-      <Show when={showBackgroundOutput()}>
-        <Suspense fallback={null}>
-          <LazyBackgroundProcessOutputDialog
-            open={showBackgroundOutput()}
-            instanceId={props.instance.id}
-            process={selectedBackgroundProcess()}
-            onClose={closeBackgroundOutput}
-          />
-        </Suspense>
-      </Show>
+      <BackgroundProcessOutputDialog
+        open={showBackgroundOutput()}
+        instanceId={props.instance.id}
+        process={selectedBackgroundProcess()}
+        onClose={closeBackgroundOutput}
+      />
 
-      <Show when={permissionModalOpen()}>
-        <Suspense fallback={null}>
-          <LazyPermissionApprovalModal
-            instanceId={props.instance.id}
-            isOpen={permissionModalOpen()}
-            onClose={() => setPermissionModalOpen(false)}
-          />
-        </Suspense>
-      </Show>
+      <PermissionApprovalModal
+        instanceId={props.instance.id}
+        isOpen={permissionModalOpen()}
+        onClose={() => setPermissionModalOpen(false)}
+      />
     </>
   )
 }
diff --git a/packages/ui/src/components/instance/shell/useSessionCache.ts b/packages/ui/src/components/instance/shell/useSessionCache.ts
index 8839d569..0e3a3476 100644
--- a/packages/ui/src/components/instance/shell/useSessionCache.ts
+++ b/packages/ui/src/components/instance/shell/useSessionCache.ts
@@ -2,30 +2,10 @@ import { createEffect, createSignal, type Accessor } from "solid-js"
 import { messageStoreBus } from "../../../stores/message-v2/bus"
 import { clearSessionRenderCache } from "../../message-block"
 import { getLogger } from "../../../lib/logger"
-import { runtimeEnv } from "../../../lib/runtime-env"
 
 const log = getLogger("session")
 
-function getSessionCacheLimit() {
-  if (runtimeEnv.platform === "mobile") {
-    return 2
-  }
-
-  if (runtimeEnv.host === "tauri") {
-    return 3
-  }
-
-  if (typeof navigator !== "undefined") {
-    const deviceMemory = (navigator as Navigator & { deviceMemory?: number }).deviceMemory
-    if (typeof deviceMemory === "number" && deviceMemory <= 4) {
-      return 3
-    }
-  }
-
-  return 5
-}
-
-const SESSION_CACHE_LIMIT = getSessionCacheLimit()
+const SESSION_CACHE_LIMIT = 5
 
 type SessionCacheOptions = {
   instanceId: Accessor<string>
diff --git a/packages/ui/src/components/session/session-view.tsx b/packages/ui/src/components/session/session-view.tsx
index b234b09b..ba78382c 100644
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -131,15 +131,9 @@ export const SessionView: Component<SessionViewProps> = (props) => {
 
   createEffect(() => {
     const currentSession = session()
-    if (!currentSession) {
-      return
+    if (currentSession) {
+      loadMessages(props.instanceId, currentSession.id).catch((error) => log.error("Failed to load messages", error))
     }
-
-    if (props.isActive === false) {
-      return
-    }
-
-    loadMessages(props.instanceId, currentSession.id).catch((error) => log.error("Failed to load messages", error))
   })
 
   function registerPromptInputApi(api: PromptInputApi) {