From 4eed24759375ee3086beee63d022625641d6e799 Mon Sep 17 00:00:00 2001
From: Codex <codex@opencoven.local>
Date: Wed, 8 Jul 2026 13:59:30 -0400
Subject: [PATCH] fix(comux): make terminal pane numbers direct jumps

---
 src/app/globals.css                           | 13 +++++++++++++
 src/components/comux-broadcast-wiring.test.ts |  3 +++
 src/components/comux-view.tsx                 | 14 +++++++++++++-
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 1d1141194..c6cd86d37 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3041,6 +3041,7 @@ textarea.required-inputs-control {
 /* Pane number badge — backs ⌘1…9 quick-jump and reads like a tmux pane index.
    Tints to the brand accent on the focused pane. */
 .comux-terminal-pane-num {
+  border: 0;
   display: inline-grid;
   place-items: center;
   min-width: 15px;
@@ -3049,12 +3050,24 @@ textarea.required-inputs-control {
   border-radius: 4px;
   background: color-mix(in oklch, var(--text-muted) 22%, transparent);
   color: var(--text-secondary);
+  cursor: pointer;
   font-size: 9px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   line-height: 1;
 }
 
+.comux-terminal-pane-num:hover,
+.comux-terminal-pane-num:focus-visible {
+  background: color-mix(in oklch, var(--accent-presence) 22%, transparent);
+  color: var(--text-primary);
+  outline: none;
+}
+
+.comux-terminal-pane-num:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent-presence) 40%, transparent);
+}
+
 .comux-terminal-pane[data-active="true"] .comux-terminal-pane-num {
   background: color-mix(in oklch, var(--accent-presence) 30%, transparent);
   color: var(--accent-presence);
diff --git a/src/components/comux-broadcast-wiring.test.ts b/src/components/comux-broadcast-wiring.test.ts
index b038475d9..3d4471848 100644
--- a/src/components/comux-broadcast-wiring.test.ts
+++ b/src/components/comux-broadcast-wiring.test.ts
@@ -28,6 +28,8 @@ assert.match(comux, /active=\{active && isActive\}[\s\S]{0,160}paneId=\{s\.id\}[
 assert.match(comux, /data-broadcast-active=\{broadcast \? "true" : undefined\}/, "toolbar toggle reflects state");
 assert.match(comux, /data-broadcast=\{broadcast \? "true" : undefined\}/, "pane carries the broadcast flag for the ring");
 assert.match(comux, /⌘⇧B broadcast/, "footer advertises ⌘⇧B");
+assert.match(comux, /className="comux-terminal-pane-num"[\s\S]{0,180}focusSessionById\(s\.id\)/, "pane numbers focus panes directly");
+assert.match(comux, /title=\{`Go directly to pane \$\{paneNumbers\.get\(s\.id\)\}`\}/, "pane number exposes direct-jump affordance");
 
 // BottomTerminal: props + writer + input emit on BOTH transports.
 assert.match(term, /registerWriter\?: \(paneId: string, write: \(\(data: string\) => void\) \| null\) => void/, "registerWriter prop");
@@ -41,6 +43,7 @@ assert.equal((term.match(/writerRef\.current = \(d\) =>/g) || []).length, 2, "ex
 // CSS for the broadcast ring/toggle exists.
 assert.match(css, /\.comux-terminal-pane\[data-broadcast="true"\]/, "broadcast pane ring styled");
 assert.match(css, /\.comux-terminal-toolbar-button\[data-broadcast-active="true"\]/, "broadcast toggle styled");
+assert.match(css, /\.comux-terminal-pane-num:focus-visible/, "pane number direct-jump control has a focus state");
 
 // ── Keepalive a11y invariant (cave-hnn5) ────────────────────────────────────
 // The keepalive wrapper hides inactive sessions' panes with visibility:hidden.
diff --git a/src/components/comux-view.tsx b/src/components/comux-view.tsx
index 0814ba33f..77ce3e2fb 100644
--- a/src/components/comux-view.tsx
+++ b/src/components/comux-view.tsx
@@ -1352,7 +1352,19 @@ export function ComuxView({ view, sessions: daemonSessions, onOpenSession, onNew
               }}
             >
               {visiblePaneCount > 1 ? (
-                <span className="comux-terminal-pane-num" aria-hidden>{paneNumbers.get(s.id)}</span>
+                <button
+                  type="button"
+                  draggable={false}
+                  className="comux-terminal-pane-num"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    focusSessionById(s.id);
+                  }}
+                  aria-label={`Focus pane ${paneNumbers.get(s.id)}: ${s.label}`}
+                  title={`Go directly to pane ${paneNumbers.get(s.id)}`}
+                >
+                  {paneNumbers.get(s.id)}
+                </button>
               ) : (
                 <Icon name="ph:terminal-window" width={12} aria-hidden />
               )}