Hide app bar during folder selection and tighten toolbar

packages/ui/src/App.tsx

@@ -6,9 +6,10 @@ 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-shell"
+import InstanceShell from "./components/instance/instance-shell2"
 import { RemoteAccessOverlay } from "./components/remote-access-overlay"
 import { initMarkdown } from "./lib/markdown"
+
 import { useTheme } from "./lib/theme"
 import { useCommands } from "./lib/hooks/use-commands"
 import { useAppLifecycle } from "./lib/hooks/use-app-lifecycle"
@@ -23,6 +24,7 @@ import {
   showFolderSelection,
   setShowFolderSelection,
 } from "./stores/ui"
+import { instances as instanceStore } from "./stores/instances"
 import { useConfig } from "./stores/preferences"
 import {
   createInstance,
@@ -65,6 +67,13 @@ const App: Component = () => {
   const [launchErrorBinary, setLaunchErrorBinary] = createSignal<string | null>(null)
   const [isAdvancedSettingsOpen, setIsAdvancedSettingsOpen] = createSignal(false)
   const [remoteAccessOpen, setRemoteAccessOpen] = createSignal(false)
+  const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
+
+  const updateInstanceTabBarHeight = () => {
+    if (typeof document === "undefined") return
+    const element = document.querySelector<HTMLElement>(".tab-bar-instance")
+    setInstanceTabBarHeight(element?.offsetHeight ?? 0)
+  }
 
   createEffect(() => {
     void initMarkdown(isDark()).catch((error) => log.error("Failed to initialize markdown", error))
@@ -74,6 +83,19 @@ const App: Component = () => {
     initReleaseNotifications()
   })
 
+  createEffect(() => {
+    instances()
+    hasInstances()
+    requestAnimationFrame(() => updateInstanceTabBarHeight())
+  })
+
+  onMount(() => {
+    updateInstanceTabBarHeight()
+    const handleResize = () => updateInstanceTabBarHeight()
+    window.addEventListener("resize", handleResize)
+    onCleanup(() => window.removeEventListener("resize", handleResize))
+  })
+
   const activeInstance = createMemo(() => getActiveInstance())
   const activeSessionIdForInstance = createMemo(() => {
     const instance = activeInstance()
@@ -328,8 +350,9 @@ const App: Component = () => {
               <For each={Array.from(instances().values())}>
                 {(instance) => {
                   const isActiveInstance = () => activeInstanceId() === instance.id
+                  const isVisible = () => isActiveInstance() && !showFolderSelection()
                   return (
-                    <div class="flex-1 min-h-0" style={{ display: isActiveInstance() ? "flex" : "none" }}>
+                    <div class="flex-1 min-h-0" style={{ display: isVisible() ? "flex" : "none" }}>
                       <InstanceShell
                         instance={instance}
                         escapeInDebounce={escapeInDebounce()}
@@ -339,7 +362,9 @@ const App: Component = () => {
                         handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
                         handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
                         onExecuteCommand={executeCommand}
+                        tabBarOffset={instanceTabBarHeight()}
                       />
+
                     </div>
                   )
                 }}

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

@@ -697,7 +697,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       }}
     >
       <AppBar position="sticky" color="default" elevation={0} class="border-b border-base">
-        <Toolbar variant="dense" class="session-toolbar flex flex-wrap items-center gap-2 py-0">
+        <Toolbar variant="dense" class="session-toolbar flex flex-wrap items-center gap-2 py-0 min-h-[40px]">
           <Show
             when={!isPhoneLayout()}
             fallback={