feat(agent-manager): reveal jump shortcut badges while modifier is held (#12631)

.changeset/agent-manager-modifier-shortcut-peek.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": minor
+---
+
+Show the ⌘1-9 (Ctrl+1-9 on Windows/Linux) shortcut badges on every Agent Manager sidebar card while the modifier key is held, making it easy to see which number jumps to which worktree before pressing it.

packages/kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx

@@ -243,6 +243,8 @@ const AgentManagerContent: Component = () => {
   const [repoBranch, setRepoBranch] = createSignal<string | undefined>()
   const [busyWorktrees, setBusyWorktrees] = createSignal<Map<string, WorktreeBusyState>>(new Map())
   const [staleWorktreeIds, setStaleWorktreeIds] = createSignal<Set<string>>(new Set())
+  /** True while the ⌘/Ctrl jump modifier is held — reveals the ⌘1-9 badges on all sidebar items. */
+  const [held, setHeld] = createSignal(false)
   const [worktreesLoaded, setWorktreesLoaded] = createSignal(false)
   const [sessionsLoaded, setSessionsLoaded] = createSignal(false)
   const [isGitRepo, setIsGitRepo] = createSignal(true)
@@ -1209,6 +1211,18 @@ const AgentManagerContent: Component = () => {
     }
     window.addEventListener("keydown", deleteKeyHandler)
 
+    // Reveal the ⌘/Ctrl+1-9 jump badges on all sidebar items while the modifier is held.
+    // Capture phase so the terminal's key handlers can't swallow them; blur resets state
+    // when the keyup is lost (e.g. Cmd+Tab away).
+    const modifier = isMac ? "Meta" : "Control"
+    const modTrack = (e: KeyboardEvent) => {
+      if (e.key === modifier) setHeld(e.type === "keydown")
+    }
+    const modReset = () => setHeld(false)
+    window.addEventListener("keydown", modTrack, true)
+    window.addEventListener("keyup", modTrack, true)
+    window.addEventListener("blur", modReset)
+
     // When the panel regains focus (e.g. returning from terminal), focus the prompt
     // and clear any stale body styles left by Kobalte modal overlays (dropdowns/dialogs
     // set pointer-events:none and overflow:hidden on body, but cleanup never runs if
@@ -1580,6 +1594,9 @@ const AgentManagerContent: Component = () => {
       window.removeEventListener("message", handler)
       window.removeEventListener("keydown", preventDefaults, true)
       window.removeEventListener("keydown", deleteKeyHandler)
+      window.removeEventListener("keydown", modTrack, true)
+      window.removeEventListener("keyup", modTrack, true)
+      window.removeEventListener("blur", modReset)
       window.removeEventListener("focus", onWindowFocus)
       window.removeEventListener("newTaskRequest", newTaskHandler, true)
       drafts.cleanup()
@@ -2277,7 +2294,7 @@ const AgentManagerContent: Component = () => {
     >
       <div
         class="am-sidebar"
-        classList={{ "am-sidebar-collapsed": sidebarCollapsed() }}
+        classList={{ "am-sidebar-collapsed": sidebarCollapsed(), "am-show-shortcuts": held() }}
         style={{ width: sidebarCollapsed() ? "0px" : `${sidebarWidth()}px` }}
         inert={sidebarCollapsed() || undefined}
       >

packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css

@@ -426,6 +426,25 @@ button.am-section-toggle:hover .am-section-label {
   color: var(--text-weak);
 }
 
+/* Jump modifier held (⌘/Ctrl): reveal shortcut badges on every item, not just the
+   hovered one. Scoped via :has so items without a badge (beyond ⌘9) keep their stats.
+   The close button stays hidden so holding the modifier never exposes the delete action. */
+.am-show-shortcuts .am-wt-hover-actions:has(.am-shortcut-badge) {
+  opacity: 1;
+  visibility: visible;
+}
+.am-show-shortcuts .am-wt-hover-actions .am-worktree-close {
+  display: none;
+}
+.am-show-shortcuts .am-wt-actions-cell:has(.am-shortcut-badge) > .am-worktree-stats,
+.am-show-shortcuts .am-wt-actions-cell:has(.am-shortcut-badge) > .am-worktree-stats-skeleton {
+  opacity: 0;
+  visibility: hidden;
+}
+.am-show-shortcuts .am-local-item .am-shortcut-badge {
+  opacity: 1;
+}
+
 .am-worktree-item:has(.am-worktree-rename-input) .am-wt-row2 {
   display: none;
 }