refactor(ui): keep locale bootstrap branch focused

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())}>
+      <InstanceDisconnectedModal
-        <Suspense fallback={null}>
-          <LazyInstanceDisconnectedModal
         open={Boolean(disconnectedInstance())}
         folder={disconnectedInstance()?.folder}
         reason={disconnectedInstance()?.reason}
         onClose={handleDisconnectedInstanceClose}
       />
-        </Suspense>
-      </Show>
 
       <Dialog open={Boolean(launchError())} modal>
         <Dialog.Portal>
@@ -534,19 +527,16 @@ const App: Component = () => {
             </>
           }
         >
-          <Suspense fallback={<div class="flex-1 min-h-0" />}>
+          <FolderSelectionView
-            <LazyFolderSelectionView
             onSelectFolder={handleSelectFolder}
             isLoading={isSelectingFolder()}
           />
-          </Suspense>
         </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" />}>
+              <FolderSelectionView
-                <LazyFolderSelectionView
                 onSelectFolder={handleSelectFolder}
                 isLoading={isSelectingFolder()}
                 onClose={() => {
@@ -554,16 +544,11 @@ const App: Component = () => {
                   clearLaunchError()
                 }}
               />
-              </Suspense>
             </div>
           </div>
         </Show>
  
-        <Show when={settingsOpen()}>
+        <SettingsScreen />
-          <Suspense fallback={null}>
-            <LazySettingsScreen />
-          </Suspense>
-        </Show>
  
         <AlertDialog />
 

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,8 +494,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             role="presentation"
             aria-hidden="true"
           />
-          <Suspense fallback={<RightPanelFallback />}>
+          <RightPanel
-            <LazyRightPanel
             t={t}
             instanceId={props.instance.id}
             instance={props.instance}
@@ -526,7 +516,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             onUnpinRightDrawer={unpinRightDrawer}
             setContentEl={setRightDrawerContentEl}
           />
-          </Suspense>
         </Box>
       )
     }
@@ -566,9 +555,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             aria-hidden="true"
           />
         </Show>
-        <Show when={rightOpen() || rightPinned()} fallback={<RightPanelFallback />}>
+        <RightPanel
-          <Suspense fallback={<RightPanelFallback />}>
-            <LazyRightPanel
           t={t}
           instanceId={props.instance.id}
           instance={props.instance}
@@ -590,8 +577,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           onUnpinRightDrawer={unpinRightDrawer}
           setContentEl={setRightDrawerContentEl}
         />
-          </Suspense>
-        </Show>
       </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" />}>
+              <InfoView instanceId={props.instance.id} />
-                <LazyInfoView instanceId={props.instance.id} />
-              </Suspense>
             </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
+        <Show when={hasSessions()} fallback={<InstanceWelcomeView instance={props.instance} />}>
-          when={hasSessions()}
-          fallback={
-            <Suspense fallback={<div class="flex-1 min-h-0" />}>
-              <LazyInstanceWelcomeView instance={props.instance} />
-            </Suspense>
-          }
-        >
           {sessionLayout}
         </Show>
       </div>
 
-      <Show when={paletteOpen()}>
+      <CommandPalette
-        <Suspense fallback={null}>
-          <LazyCommandPalette
         open={paletteOpen()}
         onClose={() => hideCommandPalette(props.instance.id)}
         commands={instancePaletteCommands()}
         onExecute={props.onExecuteCommand}
       />
-        </Suspense>
-      </Show>
 
-      <Show when={showBackgroundOutput()}>
+      <BackgroundProcessOutputDialog
-        <Suspense fallback={null}>
-          <LazyBackgroundProcessOutputDialog
         open={showBackgroundOutput()}
         instanceId={props.instance.id}
         process={selectedBackgroundProcess()}
         onClose={closeBackgroundOutput}
       />
-        </Suspense>
-      </Show>
 
-      <Show when={permissionModalOpen()}>
+      <PermissionApprovalModal
-        <Suspense fallback={null}>
-          <LazyPermissionApprovalModal
         instanceId={props.instance.id}
         isOpen={permissionModalOpen()}
         onClose={() => setPermissionModalOpen(false)}
       />
-        </Suspense>
-      </Show>
     </>
   )
 }

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() {
+const SESSION_CACHE_LIMIT = 5
-  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()
 
 type SessionCacheOptions = {
   instanceId: Accessor<string>

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

@@ -131,15 +131,9 @@ export const SessionView: Component<SessionViewProps> = (props) => {
 
   createEffect(() => {
     const currentSession = session()
-    if (!currentSession) {
+    if (currentSession) {
-      return
-    }
-
-    if (props.isActive === false) {
-      return
-    }
-
       loadMessages(props.instanceId, currentSession.id).catch((error) => log.error("Failed to load messages", error))
+    }
   })
 
   function registerPromptInputApi(api: PromptInputApi) {