Improve session sidebar UX and tool rendering

src/components/session-list.tsx

@@ -1,8 +1,10 @@
 import { Component, For, Show, createSignal, createEffect, onCleanup, onMount, createMemo, JSX } from "solid-js"
 import type { Session } from "../types/session"
-import { MessageSquare, Info, Plus, X } from "lucide-solid"
+import { MessageSquare, Info, X } from "lucide-solid"
 import KeyboardHint from "./keyboard-hint"
+import Kbd from "./kbd"
 import { keyboardRegistry } from "../lib/keyboard-registry"
+import { formatShortcut } from "../lib/keyboard-utils"
 
 interface SessionListProps {
   instanceId: string
@@ -46,6 +48,7 @@ const SessionList: Component<SessionListProps> = (props) => {
   const [isResizing, setIsResizing] = createSignal(false)
   const [startX, setStartX] = createSignal(0)
   const [startWidth, setStartWidth] = createSignal(DEFAULT_WIDTH)
+  const infoShortcut = keyboardRegistry.get("switch-to-info")
 
   let mouseMoveHandler: ((event: MouseEvent) => void) | null = null
   let mouseUpHandler: (() => void) | null = null
@@ -159,7 +162,7 @@ const SessionList: Component<SessionListProps> = (props) => {
     removeTouchListeners()
   })
 
-  const parentSessionIds = createMemo(
+  const userSessionIds = createMemo(
     () => {
       const ids: string[] = []
       for (const session of props.sessions.values()) {
@@ -167,7 +170,6 @@ const SessionList: Component<SessionListProps> = (props) => {
           ids.push(session.id)
         }
       }
-      ids.push("info")
       return ids
     },
     undefined,
@@ -219,67 +221,73 @@ const SessionList: Component<SessionListProps> = (props) => {
       </Show>
 
       <div class="session-list flex-1 overflow-y-auto">
-        <div class="session-section">
-          <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
-            User Session & Info
+          <div class="session-section">
+            <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
+              Instance
+            </div>
+            <div class="session-list-item group">
+              <button
+                class={`session-item-base ${props.activeSessionId === "info" ? "session-item-active" : "session-item-inactive"}`}
+                onClick={() => props.onSelect("info")}
+                title="Instance Info"
+                role="button"
+                aria-selected={props.activeSessionId === "info"}
+              >
+                <div class="flex items-center gap-2 flex-1">
+                  <Info class="w-4 h-4 flex-shrink-0" />
+                  <span class="session-item-title truncate">Instance Info</span>
+                </div>
+                {infoShortcut && <Kbd shortcut={formatShortcut(infoShortcut)} class="ml-2 not-italic" />}
+              </button>
+            </div>
           </div>
-          <For each={parentSessionIds()}>
-            {(id) => {
-              if (id === "info") {
-                const isActive = () => props.activeSessionId === "info"
+
+
+        <Show when={userSessionIds().length > 0}>
+          <div class="session-section">
+            <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
+              User Sessions
+            </div>
+            <For each={userSessionIds()}>
+              {(id) => {
+                const session = () => props.sessions.get(id)
+                if (!session()) {
+                  return null
+                }
+
+                const isActive = () => props.activeSessionId === id
+                const title = () => session()?.title || "Untitled"
+
                 return (
                   <div class="session-list-item group">
                     <button
-                      class={`session-item-base ${isActive() ? "session-item-active" : "session-item-inactive"} session-item-special`}
-                      onClick={() => props.onSelect("info")}
-                      title="Info"
+                      class={`session-item-base ${isActive() ? "session-item-active" : "session-item-inactive"}`}
+                      onClick={() => props.onSelect(id)}
+                      title={title()}
                       role="button"
                       aria-selected={isActive()}
                     >
-                      <Info class="w-4 h-4 flex-shrink-0" />
-                      <span class="session-item-title truncate">Info</span>
+                      <MessageSquare class="w-4 h-4 flex-shrink-0" />
+                      <span class="session-item-title truncate">{title()}</span>
+                      <span
+                        class="session-item-close opacity-0 group-hover:opacity-100 hover:bg-status-error hover:text-white rounded p-0.5 transition-all"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          props.onClose(id)
+                        }}
+                        role="button"
+                        tabIndex={0}
+                        aria-label="Close session"
+                      >
+                        <X class="w-3 h-3" />
+                      </span>
                     </button>
                   </div>
                 )
-              }
-
-              const session = () => props.sessions.get(id)
-              if (!session()) {
-                return null
-              }
-
-              const isActive = () => props.activeSessionId === id
-              const title = () => session()?.title || "Untitled"
-
-              return (
-                <div class="session-list-item group">
-                  <button
-                    class={`session-item-base ${isActive() ? "session-item-active" : "session-item-inactive"}`}
-                    onClick={() => props.onSelect(id)}
-                    title={title()}
-                    role="button"
-                    aria-selected={isActive()}
-                  >
-                    <MessageSquare class="w-4 h-4 flex-shrink-0" />
-                    <span class="session-item-title truncate">{title()}</span>
-                    <span
-                      class="session-item-close opacity-0 group-hover:opacity-100 hover:bg-status-error hover:text-white rounded p-0.5 transition-all"
-                      onClick={(event) => {
-                        event.stopPropagation()
-                        props.onClose(id)
-                      }}
-                      role="button"
-                      tabIndex={0}
-                      aria-label="Close session"
-                    >
-                      <X class="w-3 h-3" />
-                    </span>
-                  </button>
-                </div>
-              )
-            }}
-          </For>
-        </div>
+              }}
+            </For>
+          </div>
+        </Show>
 
         <Show when={childSessionIds().length > 0}>
           <div class="session-section">
@@ -318,17 +326,7 @@ const SessionList: Component<SessionListProps> = (props) => {
 
       <Show when={props.showFooter !== false}>
         <div class="session-list-footer p-3 border-t border-base">
-          {props.footerContent ?? (
-            <button
-              class="session-new-button w-full flex items-center gap-2 px-3 py-2 rounded-md transition-colors text-sm font-medium"
-              onClick={props.onNew}
-              title="New session (Cmd/Ctrl+T)"
-              aria-label="New session"
-            >
-              <Plus class="w-4 h-4" />
-              <span>New Session</span>
-            </button>
-          )}
+          {props.footerContent ?? null}
         </div>
       </Show>
     </div>