feat(ui): add back button to session view and auto-clear active session on instance stop

packages/ui/src/App.tsx

@@ -217,6 +217,7 @@ const App: Component = () => {
 
     if (!confirmed) return
 
+    clearActiveParentSession(instanceId)
     await stopInstance(instanceId)
   }
 
@@ -396,24 +397,24 @@ const App: Component = () => {
                 {(instance) => {
                   const isActiveInstance = () => activeInstanceId() === instance.id
                   const isVisible = () => isActiveInstance() && !showFolderSelection()
-                    return (
+                  return (
-                      <div class="flex-1 min-h-0 overflow-hidden" style={{ display: isVisible() ? "flex" : "none" }}>
+                    <div class="flex-1 min-h-0 overflow-hidden" style={{ display: isVisible() ? "flex" : "none" }}>
-                        <InstanceMetadataProvider instance={instance}>
+                      <InstanceMetadataProvider instance={instance}>
-                          <InstanceShell
+                        <InstanceShell
-                            instance={instance}
+                          instance={instance}
-                            escapeInDebounce={escapeInDebounce()}
+                          escapeInDebounce={escapeInDebounce()}
-                            paletteCommands={paletteCommands}
+                          paletteCommands={paletteCommands}
-                            onCloseSession={(sessionId) => handleCloseSession(instance.id, sessionId)}
+                          onCloseSession={(sessionId) => handleCloseSession(instance.id, sessionId)}
-                            onNewSession={() => handleNewSession(instance.id)}
+                          onNewSession={() => handleNewSession(instance.id)}
-                            handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
+                          handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(instance.id, sessionId, agent)}
-                            handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
+                          handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(instance.id, sessionId, model)}
-                            onExecuteCommand={executeCommand}
+                          onExecuteCommand={executeCommand}
-                            tabBarOffset={instanceTabBarHeight()}
+                          tabBarOffset={instanceTabBarHeight()}
-                          />
+                        />
-                        </InstanceMetadataProvider>
+                      </InstanceMetadataProvider>
 
-                      </div>
+                    </div>
-                    )
+                  )
 
                 }}
               </For>

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

@@ -66,7 +66,7 @@ import SessionView from "../session/session-view"
 import { Sidebar, type FileNode } from "./sidebar"
 import { Editor } from "./editor"
 import { serverApi } from "../../lib/api-client"
-import { Sparkles, Layout as LayoutIcon, Terminal as TerminalIcon, Search, Loader2, Zap, Shield, Settings, FileArchive } from "lucide-solid"
+import { Sparkles, Layout as LayoutIcon, Terminal as TerminalIcon, Search, Loader2, Zap, Shield, Settings, FileArchive, ArrowLeft } from "lucide-solid"
 import { formatTokenTotal } from "../../lib/formatters"
 import { sseManager } from "../../lib/sse-manager"
 import { getLogger } from "../../lib/logger"
@@ -1342,6 +1342,14 @@ Now analyze the project and report your findings.`
           <div class="flex items-center space-x-4">
             <Show when={activeSessionIdForInstance() && activeSessionIdForInstance() !== "info"}>
               <div class="flex items-center space-x-2">
+                <button
+                  onClick={() => props.onCloseSession(activeSessionIdForInstance()!)}
+                  class="flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-semibold text-zinc-400 hover:text-white hover:bg-white/10 border border-transparent hover:border-white/10 transition-all rounded-full"
+                  title="Back to Sessions"
+                >
+                  <ArrowLeft size={14} strokeWidth={2} />
+                  <span>Back</span>
+                </button>
                 {/* Compact Button */}
                 <button
                   onClick={handleCompact}