From 1a7aefcbae9614287d42e0f00d4837c7daa1b51d Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Fri, 9 Jan 2026 16:34:44 +0000
Subject: [PATCH] feat(ui): session nav follows visible list

Cmd+Shift+[ and Cmd+Shift+] now cycle through visible sessions only (parents + expanded children) and no longer include Instance Info. Sidebar session list auto-scrolls to keep the active session row in view.
---
 .../components/instance/instance-shell2.tsx   |   6 -
 packages/ui/src/components/session-list.tsx   | 140 +++++++++---------
 packages/ui/src/lib/hooks/use-commands.ts     |  43 +++---
 packages/ui/src/lib/shortcuts/navigation.ts   |  53 +++----
 packages/ui/src/stores/session-state.ts       |  95 +++++++++++-
 packages/ui/src/stores/sessions.ts            |  14 +-
 6 files changed, 217 insertions(+), 134 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 421376cd..1a1a83f3 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -869,12 +869,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           threads={sessionThreads()}
           activeSessionId={activeSessionIdForInstance()}
           onSelect={handleSessionSelect}
-          onClose={(id) => {
-            const result = props.onCloseSession(id)
-            if (result instanceof Promise) {
-              void result.catch((error) => log.error("Failed to close session:", error))
-            }
-          }}
           onNew={() => {
             const result = props.onNewSession()
             if (result instanceof Promise) {
diff --git a/packages/ui/src/components/session-list.tsx b/packages/ui/src/components/session-list.tsx
index ba1ba8fb..5a165640 100644
--- a/packages/ui/src/components/session-list.tsx
+++ b/packages/ui/src/components/session-list.tsx
@@ -1,15 +1,22 @@
-import { Component, For, Show, createSignal, createMemo, createEffect, JSX } from "solid-js"
+import { Component, For, Show, createSignal, createMemo, createEffect, JSX, onCleanup } from "solid-js"
 import type { Session, SessionStatus } from "../types/session"
 import type { SessionThread } from "../stores/session-state"
 import { getSessionStatus } from "../stores/session-status"
-import { Bot, User, Info, X, Copy, Trash2, Pencil, ShieldAlert, ChevronDown } from "lucide-solid"
+import { Bot, User, Info, Copy, Trash2, Pencil, ShieldAlert, ChevronDown } from "lucide-solid"
 import KeyboardHint from "./keyboard-hint"
 import Kbd from "./kbd"
 import SessionRenameDialog from "./session-rename-dialog"
 import { keyboardRegistry } from "../lib/keyboard-registry"
 import { formatShortcut } from "../lib/keyboard-utils"
 import { showToastNotification } from "../lib/notifications"
-import { deleteSession, loading, renameSession } from "../stores/sessions"
+import {
+  deleteSession,
+  ensureSessionParentExpanded,
+  isSessionParentExpanded,
+  loading,
+  renameSession,
+  toggleSessionParentExpanded,
+} from "../stores/sessions"
 import { getLogger } from "../lib/logger"
 import { copyToClipboard } from "../lib/clipboard"
 const log = getLogger("session")
@@ -22,7 +29,6 @@ interface SessionListProps {
   threads: SessionThread[]
   activeSessionId: string | null
   onSelect: (sessionId: string) => void
-  onClose: (sessionId: string) => void
   onNew: () => void
   showHeader?: boolean
   showFooter?: boolean
@@ -41,24 +47,6 @@ function formatSessionStatus(status: SessionStatus): string {
   }
 }
 
-function arraysEqual(prev: readonly string[] | undefined, next: readonly string[]): boolean {
-  if (!prev) {
-    return false
-  }
-
-  if (prev.length !== next.length) {
-    return false
-  }
-
-  for (let i = 0; i < prev.length; i++) {
-    if (prev[i] !== next[i]) {
-      return false
-    }
-  }
-
-  return true
-}
-
 const SessionList: Component<SessionListProps> = (props) => {
   const [renameTarget, setRenameTarget] = createSignal<{ id: string; title: string; label: string } | null>(null)
   const [isRenaming, setIsRenaming] = createSignal(false)
@@ -69,35 +57,13 @@ const SessionList: Component<SessionListProps> = (props) => {
     return deleting ? deleting.has(sessionId) : false
   }
  
-  const [expandedParents, setExpandedParents] = createSignal<Set<string>>(new Set())
-
-  const toggleParentExpanded = (parentId: string) => {
-    setExpandedParents((prev) => {
-      const next = new Set(prev)
-      if (next.has(parentId)) {
-        next.delete(parentId)
-      } else {
-        next.add(parentId)
-      }
-      return next
-    })
-  }
-
-  const ensureParentExpanded = (parentId: string) => {
-    setExpandedParents((prev) => {
-      if (prev.has(parentId)) return prev
-      const next = new Set(prev)
-      next.add(parentId)
-      return next
-    })
-  }
 
   const selectSession = (sessionId: string) => {
     if (sessionId !== "info") {
       const session = props.sessions.get(sessionId)
       const parentId = session?.parentId ?? session?.id
       if (parentId) {
-        ensureParentExpanded(parentId)
+        ensureSessionParentExpanded(props.instanceId, parentId)
       }
     }
 
@@ -162,7 +128,6 @@ const SessionList: Component<SessionListProps> = (props) => {
 
   const SessionRow: Component<{
     sessionId: string
-    canClose?: boolean
     isChild?: boolean
     isLastChild?: boolean
     hasChildren?: boolean
@@ -186,6 +151,7 @@ const SessionList: Component<SessionListProps> = (props) => {
 
         <button
           class={`session-item-base ${rowProps.isChild ? `session-item-child${rowProps.isLastChild ? " session-item-child-last" : ""} session-item-border-assistant session-item-kind-assistant` : "session-item-border-user session-item-kind-user"} ${isActive() ? "session-item-active" : "session-item-inactive"}`}
+          data-session-id={rowProps.sessionId}
           onClick={() => selectSession(rowProps.sessionId)}
           title={title()}
           role="button"
@@ -201,20 +167,6 @@ const SessionList: Component<SessionListProps> = (props) => {
               )}
               <span class="session-item-title session-item-title--clamp">{title()}</span>
             </div>
-            <Show when={rowProps.canClose}>
-              <span
-                class="session-item-close opacity-80 hover:opacity-100 hover:bg-status-error hover:text-white rounded p-0.5 transition-all"
-                onClick={(event) => {
-                  event.stopPropagation()
-                  props.onClose(rowProps.sessionId)
-                }}
-                role="button"
-                tabIndex={0}
-                aria-label="Close session"
-              >
-                <X class="w-3 h-3" />
-              </span>
-            </Show>
           </div>
           <div class="session-item-row session-item-meta">
             <div class="flex items-center gap-2 min-w-0">
@@ -315,9 +267,56 @@ const SessionList: Component<SessionListProps> = (props) => {
   createEffect(() => {
     const parentId = activeParentId()
     if (!parentId) return
-    ensureParentExpanded(parentId)
+    ensureSessionParentExpanded(props.instanceId, parentId)
   })
  
+  const listEl = createSignal<HTMLElement | null>(null)
+
+  const escapeCss = (value: string) => {
+    if (typeof CSS !== "undefined" && typeof (CSS as any).escape === "function") {
+      return (CSS as any).escape(value)
+    }
+    return value.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"")
+  }
+
+  const scrollActiveIntoView = (sessionId: string) => {
+    const root = listEl[0]()
+    if (!root) return
+
+    const selector = `[data-session-id="${escapeCss(sessionId)}"]`
+
+    const scrollNow = () => {
+      const target = root.querySelector(selector) as HTMLElement | null
+      if (!target) return
+      target.scrollIntoView({ block: "nearest", inline: "nearest" })
+    }
+
+    if (typeof requestAnimationFrame === "undefined") {
+      scrollNow()
+      return
+    }
+
+    // Wait a couple frames so expand/collapse DOM settles.
+    let raf1 = 0
+    let raf2 = 0
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        scrollNow()
+      })
+    })
+
+    onCleanup(() => {
+      if (raf1) cancelAnimationFrame(raf1)
+      if (raf2) cancelAnimationFrame(raf2)
+    })
+  }
+
+  createEffect(() => {
+    const activeId = props.activeSessionId
+    if (!activeId) return
+    scrollActiveIntoView(activeId)
+  })
+
   return (
     <div
       class="session-list-container bg-surface-secondary border-r border-base flex flex-col w-full"
@@ -335,7 +334,7 @@ const SessionList: Component<SessionListProps> = (props) => {
         </div>
       </Show>
 
-      <div class="session-list flex-1 overflow-y-auto">
+      <div class="session-list flex-1 overflow-y-auto" ref={(el) => listEl[1](el)}>
           <div class="session-section">
             <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
               Instance
@@ -343,6 +342,7 @@ const SessionList: Component<SessionListProps> = (props) => {
             <div class="session-list-item group">
               <button
                 class={`session-item-base ${props.activeSessionId === "info" ? "session-item-active" : "session-item-inactive"}`}
+                data-session-id="info"
                 onClick={() => selectSession("info")}
                 title="Instance Info"
                 role="button"
@@ -367,16 +367,16 @@ const SessionList: Component<SessionListProps> = (props) => {
             </div>
             <For each={props.threads}>
               {(thread) => {
-                const expanded = () => expandedParents().has(thread.parent.id)
+                const expanded = () => isSessionParentExpanded(props.instanceId, thread.parent.id)
                 return (
                   <>
-                    <SessionRow
-                      sessionId={thread.parent.id}
-                      canClose
-                      hasChildren={thread.children.length > 0}
-                      expanded={expanded()}
-                      onToggleExpand={() => toggleParentExpanded(thread.parent.id)}
-                    />
+                      <SessionRow
+                        sessionId={thread.parent.id}
+                        hasChildren={thread.children.length > 0}
+                        expanded={expanded()}
+                        onToggleExpand={() => toggleSessionParentExpanded(props.instanceId, thread.parent.id)}
+                      />
+
                     <Show when={expanded() && thread.children.length > 0}>
                       <For each={thread.children}>
                         {(child, index) => (
diff --git a/packages/ui/src/lib/hooks/use-commands.ts b/packages/ui/src/lib/hooks/use-commands.ts
index 8a09c481..ee450bad 100644
--- a/packages/ui/src/lib/hooks/use-commands.ts
+++ b/packages/ui/src/lib/hooks/use-commands.ts
@@ -4,13 +4,7 @@ import type { Preferences, ExpansionPreference } from "../../stores/preferences"
 import { createCommandRegistry, type Command } from "../commands"
 import { instances, activeInstanceId, setActiveInstanceId } from "../../stores/instances"
 import type { ClientPart, MessageInfo } from "../../types/message"
-import {
-  activeParentSessionId,
-  activeSessionId as activeSessionMap,
-  getSessionFamily,
-  getSessions,
-  setActiveSession,
-} from "../../stores/sessions"
+import { getSessions, getVisibleSessionIds, setActiveSession, setActiveSessionFromList } from "../../stores/sessions"
 import { showAlertDialog } from "../../stores/alerts"
 import type { Instance } from "../../types/instance"
 import type { MessageRecord } from "../../stores/message-v2/types"
@@ -186,15 +180,16 @@ export function useCommands(options: UseCommandsOptions) {
       action: () => {
         const instanceId = activeInstanceId()
         if (!instanceId) return
-        const parentId = activeParentSessionId().get(instanceId)
-        if (!parentId) return
-        const familySessions = getSessionFamily(instanceId, parentId)
-        const ids = familySessions.map((s) => s.id).concat(["info"])
+        const ids = getVisibleSessionIds(instanceId)
         if (ids.length <= 1) return
-        const current = ids.indexOf(activeSessionMap().get(instanceId) || "")
-        const next = (current + 1) % ids.length
-        if (ids[next]) {
-          setActiveSession(instanceId, ids[next])
+
+        const currentActiveId = activeSessionIdForInstance() ?? ""
+        const currentIndex = ids.indexOf(currentActiveId)
+        const targetIndex = (currentIndex + 1 + ids.length) % ids.length
+
+        const targetSessionId = ids[targetIndex]
+        if (targetSessionId) {
+          setActiveSessionFromList(instanceId, targetSessionId)
           emitSessionSidebarRequest({ instanceId, action: "show-session-list" })
         }
       },
@@ -210,15 +205,17 @@ export function useCommands(options: UseCommandsOptions) {
       action: () => {
         const instanceId = activeInstanceId()
         if (!instanceId) return
-        const parentId = activeParentSessionId().get(instanceId)
-        if (!parentId) return
-        const familySessions = getSessionFamily(instanceId, parentId)
-        const ids = familySessions.map((s) => s.id).concat(["info"])
+        const ids = getVisibleSessionIds(instanceId)
         if (ids.length <= 1) return
-        const current = ids.indexOf(activeSessionMap().get(instanceId) || "")
-        const prev = current <= 0 ? ids.length - 1 : current - 1
-        if (ids[prev]) {
-          setActiveSession(instanceId, ids[prev])
+
+        const currentActiveId = activeSessionIdForInstance() ?? ""
+        const currentIndex = ids.indexOf(currentActiveId)
+        const targetIndex =
+          currentIndex === -1 ? ids.length - 1 : currentIndex <= 0 ? ids.length - 1 : currentIndex - 1
+
+        const targetSessionId = ids[targetIndex]
+        if (targetSessionId) {
+          setActiveSessionFromList(instanceId, targetSessionId)
           emitSessionSidebarRequest({ instanceId, action: "show-session-list" })
         }
       },
diff --git a/packages/ui/src/lib/shortcuts/navigation.ts b/packages/ui/src/lib/shortcuts/navigation.ts
index 987b2418..8dcea0f7 100644
--- a/packages/ui/src/lib/shortcuts/navigation.ts
+++ b/packages/ui/src/lib/shortcuts/navigation.ts
@@ -1,24 +1,11 @@
 import { keyboardRegistry } from "../keyboard-registry"
 import { instances, activeInstanceId, setActiveInstanceId } from "../../stores/instances"
-import { getSessionFamily, activeSessionId, setActiveSession, activeParentSessionId } from "../../stores/sessions"
+import { activeSessionId, getVisibleSessionIds, setActiveSession, setActiveSessionFromList } from "../../stores/sessions"
 
 export function registerNavigationShortcuts() {
   const isMac = () => navigator.platform.toLowerCase().includes("mac")
 
-  const buildNavigationOrder = (instanceId: string): string[] => {
-    const parentId = activeParentSessionId().get(instanceId)
-    if (!parentId) return []
 
-    const familySessions = getSessionFamily(instanceId, parentId)
-    if (familySessions.length === 0) return []
-
-    const [parentSession, ...childSessions] = familySessions
-    if (!parentSession) return []
-
-    const sortedChildren = childSessions.slice().sort((a, b) => b.time.updated - a.time.updated)
-
-    return [parentSession.id, "info", ...sortedChildren.map((session) => session.id)]
-  }
 
   keyboardRegistry.register({
     id: "instance-prev",
@@ -58,20 +45,23 @@ export function registerNavigationShortcuts() {
       const instanceId = activeInstanceId()
       if (!instanceId) return
 
-      const navigationIds = buildNavigationOrder(instanceId)
+      const navigationIds = getVisibleSessionIds(instanceId)
       if (navigationIds.length === 0) return
 
-      const currentActiveId = activeSessionId().get(instanceId)
-      let currentIndex = navigationIds.indexOf(currentActiveId || "")
+      const currentActiveId = activeSessionId().get(instanceId) ?? ""
+      const currentIndex = navigationIds.indexOf(currentActiveId)
 
-      if (currentIndex === -1) {
-        currentIndex = navigationIds.length - 1
-      }
+      const targetIndex =
+        currentIndex === -1
+          ? navigationIds.length - 1
+          : currentIndex <= 0
+            ? navigationIds.length - 1
+            : currentIndex - 1
 
-      const targetIndex = currentIndex <= 0 ? navigationIds.length - 1 : currentIndex - 1
       const targetSessionId = navigationIds[targetIndex]
-
-      setActiveSession(instanceId, targetSessionId)
+      if (targetSessionId) {
+        setActiveSessionFromList(instanceId, targetSessionId)
+      }
     },
     description: "previous session",
     context: "global",
@@ -85,20 +75,17 @@ export function registerNavigationShortcuts() {
       const instanceId = activeInstanceId()
       if (!instanceId) return
 
-      const navigationIds = buildNavigationOrder(instanceId)
+      const navigationIds = getVisibleSessionIds(instanceId)
       if (navigationIds.length === 0) return
 
-      const currentActiveId = activeSessionId().get(instanceId)
-      let currentIndex = navigationIds.indexOf(currentActiveId || "")
+      const currentActiveId = activeSessionId().get(instanceId) ?? ""
+      const currentIndex = navigationIds.indexOf(currentActiveId)
+      const targetIndex = (currentIndex + 1 + navigationIds.length) % navigationIds.length
 
-      if (currentIndex === -1) {
-        currentIndex = 0
-      }
-
-      const targetIndex = (currentIndex + 1) % navigationIds.length
       const targetSessionId = navigationIds[targetIndex]
-
-      setActiveSession(instanceId, targetSessionId)
+      if (targetSessionId) {
+        setActiveSessionFromList(instanceId, targetSessionId)
+      }
     },
     description: "next session",
     context: "global",
diff --git a/packages/ui/src/stores/session-state.ts b/packages/ui/src/stores/session-state.ts
index da1fe527..ce36090d 100644
--- a/packages/ui/src/stores/session-state.ts
+++ b/packages/ui/src/stores/session-state.ts
@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js"
+import { batch, createSignal } from "solid-js"
 
 import type { Session, SessionStatus, Agent, Provider } from "../types/session"
 import { deleteSession, loadMessages } from "./session-api"
@@ -46,6 +46,8 @@ const [loading, setLoading] = createSignal({
 const [messagesLoaded, setMessagesLoaded] = createSignal<Map<string, Set<string>>>(new Map())
 const [sessionInfoByInstance, setSessionInfoByInstance] = createSignal<Map<string, Map<string, SessionInfo>>>(new Map())
 
+const [expandedSessionParents, setExpandedSessionParents] = createSignal<Map<string, Set<string>>>(new Map())
+
 export type InstanceSessionIndicatorStatus = "permission" | SessionStatus
 
 type InstanceIndicatorCounts = {
@@ -430,6 +432,91 @@ function getSessionThreads(instanceId: string): SessionThread[] {
   return threads
 }
 
+function isSessionParentExpanded(instanceId: string, parentSessionId: string): boolean {
+  return Boolean(expandedSessionParents().get(instanceId)?.has(parentSessionId))
+}
+
+function setSessionParentExpanded(instanceId: string, parentSessionId: string, expanded: boolean): void {
+  setExpandedSessionParents((prev) => {
+    const next = new Map(prev)
+    const currentSet = next.get(instanceId) ?? new Set<string>()
+    const updated = new Set(currentSet)
+
+    if (expanded) {
+      updated.add(parentSessionId)
+    } else {
+      updated.delete(parentSessionId)
+    }
+
+    if (updated.size === 0) {
+      next.delete(instanceId)
+    } else {
+      next.set(instanceId, updated)
+    }
+
+    return next
+  })
+}
+
+function toggleSessionParentExpanded(instanceId: string, parentSessionId: string): void {
+  setExpandedSessionParents((prev) => {
+    const next = new Map(prev)
+    const currentSet = next.get(instanceId) ?? new Set<string>()
+    const updated = new Set(currentSet)
+
+    if (updated.has(parentSessionId)) {
+      updated.delete(parentSessionId)
+    } else {
+      updated.add(parentSessionId)
+    }
+
+    next.set(instanceId, updated)
+    return next
+  })
+}
+
+function ensureSessionParentExpanded(instanceId: string, parentSessionId: string): void {
+  if (isSessionParentExpanded(instanceId, parentSessionId)) return
+  setSessionParentExpanded(instanceId, parentSessionId, true)
+}
+
+function getVisibleSessionIds(instanceId: string): string[] {
+  const threads = getSessionThreads(instanceId)
+  if (threads.length === 0) return []
+
+  const expanded = expandedSessionParents().get(instanceId)
+  const ids: string[] = []
+
+  for (const thread of threads) {
+    ids.push(thread.parent.id)
+    if (expanded?.has(thread.parent.id)) {
+      for (const child of thread.children) {
+        ids.push(child.id)
+      }
+    }
+  }
+
+  return ids
+}
+
+function setActiveSessionFromList(instanceId: string, sessionId: string): void {
+  const session = sessions().get(instanceId)?.get(sessionId)
+  if (!session) return
+
+  if (session.parentId === null) {
+    setActiveParentSession(instanceId, sessionId)
+    return
+  }
+
+  const parentId = session.parentId
+  if (!parentId) return
+
+  batch(() => {
+    setActiveParentSession(instanceId, parentId)
+    setActiveSession(instanceId, sessionId)
+  })
+}
+
 function isSessionBusy(instanceId: string, sessionId: string): boolean {
   const instanceSessions = sessions().get(instanceId)
   if (!instanceSessions) return false
@@ -586,6 +673,12 @@ export {
   getChildSessions,
   getSessionFamily,
   getSessionThreads,
+  getVisibleSessionIds,
+  isSessionParentExpanded,
+  setSessionParentExpanded,
+  toggleSessionParentExpanded,
+  ensureSessionParentExpanded,
+  setActiveSessionFromList,
   isSessionBusy,
   isSessionMessagesLoading,
   getSessionInfo,
diff --git a/packages/ui/src/stores/sessions.ts b/packages/ui/src/stores/sessions.ts
index cbd66535..286f23dc 100644
--- a/packages/ui/src/stores/sessions.ts
+++ b/packages/ui/src/stores/sessions.ts
@@ -9,6 +9,7 @@ import {
   clearActiveParentSession,
   clearInstanceDraftPrompts,
   clearSessionDraftPrompt,
+  ensureSessionParentExpanded,
   getActiveParentSession,
   getActiveSession,
   getChildSessions,
@@ -18,17 +19,22 @@ import {
   getSessionInfo,
   getSessionThreads,
   getSessions,
+  getVisibleSessionIds,
   isSessionBusy,
   isSessionMessagesLoading,
+  isSessionParentExpanded,
   loading,
   providers,
   sessionInfoByInstance,
   sessions,
   setActiveParentSession,
   setActiveSession,
+  setActiveSessionFromList,
   setSessionDraftPrompt,
+  setSessionParentExpanded,
   setSessionStatus,
- } from "./session-state"
+  toggleSessionParentExpanded,
+} from "./session-state"
 
 import { getDefaultModel } from "./session-models"
 import {
@@ -86,6 +92,7 @@ export {
   clearSessionDraftPrompt,
   createSession,
   deleteSession,
+  ensureSessionParentExpanded,
   executeCustomCommand,
   renameSession,
   runShellCommand,
@@ -103,8 +110,10 @@ export {
   getSessionInfo,
   getSessionThreads,
   getSessions,
+  getVisibleSessionIds,
   isSessionBusy,
   isSessionMessagesLoading,
+  isSessionParentExpanded,
   loadMessages,
   loading,
   providers,
@@ -113,8 +122,11 @@ export {
   sessions,
   setActiveParentSession,
   setActiveSession,
+  setActiveSessionFromList,
   setSessionDraftPrompt,
+  setSessionParentExpanded,
   setSessionStatus,
+  toggleSessionParentExpanded,
   updateSessionAgent,
   updateSessionModel,
 }