refactor(maestro): route web keys through a command registry

One entry per command — stable id, plain-language label, key chord, run()
— replacing the ad-hoc keydown listeners in main.ts, catalog.ts, debug.ts
and attach.ts and the parallel SHORTCUTS constant in help.ts. The `?`
overlay now renders the registry, so a binding and its documentation
cannot disagree.

Keys are canonicalised the way the TUI's `InputKey::canonical` spells
them, and chords resolve like its `ChordState`: hold while the sequence
is a strict prefix, otherwise dispatch. That gives the web a leader,
`ctrl-a` by default like `[tui].leader`, held as a partial chord and
`preventDefault`ed so it stops being select-all — the escape hatch in
docs/COMMAND-BAR.md needs somewhere to land (#149). The leader stays out
of real form fields, where select-all is still what the operator wants.

Same keys, same effects: plain single-key bindings remain deaf inside
form fields and the terminal's hidden textarea, chorded ones do not.

Refs #148

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

crates/maestro-tui/src/app.rs

@@ -1179,10 +1179,6 @@ impl App {
             sessions: snap.sessions.clone(),
             highlight: self.state.sidebar_highlight.clone(),
             attached,
-            // The active tab's session, not the displayed one: a preview is
-            // shown in the pane but never becomes what the operator picked,
-            // so it must not move this fill (`docs/PREVIEW.md`).
-            pane_session: self.state.active_session(),
         };
         let shown_sid = self.state.displayed_session();
         let previewing = self.state.preview.is_some();
@@ -1273,7 +1269,6 @@ fn visible_sidebar_order(
         sessions: snap.sessions.clone(),
         highlight: None,
         attached: HashSet::new(),
-        pane_session: None,
     }
     .rendered_items_with_collapsed(collapsed)
 }

crates/maestro-tui/src/palette.rs

@@ -813,21 +813,6 @@ impl Palette {
         }
     }
 
-    /// Background for the card whose session the pane is showing
-    /// (`docs/SIDEBAR.md`). It sits partway from the card surface to the
-    /// selection surface, so the sidebar reads as one ladder: unfilled, half
-    /// filled for the session in the pane, fully filled under the cursor.
-    ///
-    /// Blended rather than added as a third `Surface` — a new surface means
-    /// eight more colours hand-picked seventeen times — which is also why it
-    /// borrows the *selection* surface's foregrounds: those are the ones
-    /// already picked for a filled row. A preset whose colours the terminal
-    /// owns (`ansi`) has nothing to blend, so it keeps the card background and
-    /// says "in the pane" with the filled glyph alone.
-    pub fn pane_row_bg(&self) -> Color {
-        mix(self.card.bg, self.selection.bg, 0.55)
-    }
-
     /// Border style for a panel, by whether it holds focus.
     pub fn border_style(&self, focused: bool) -> Style {
         if focused {
@@ -888,16 +873,6 @@ pub fn active() -> Palette {
     *active_slot().read().expect("active palette lock poisoned")
 }
 
-/// Blend `amount` of `to` into `from`, in plain sRGB. Both must be RGB, or
-/// there is nothing to blend and `from` comes back unchanged.
-fn mix(from: Color, to: Color, amount: f64) -> Color {
-    let (Color::Rgb(fr, fg, fb), Color::Rgb(tr, tg, tb)) = (from, to) else {
-        return from;
-    };
-    let lerp = |a: u8, b: u8| (a as f64 + (b as f64 - a as f64) * amount).round() as u8;
-    Color::Rgb(lerp(fr, tr), lerp(fg, tg), lerp(fb, tb))
-}
-
 /// WCAG relative luminance of an RGB role. Non-RGB colours have no fixed
 /// luminance — they are whatever the terminal theme says — so they return
 /// `None` and cannot be contrast-checked.
@@ -962,43 +937,6 @@ mod tests {
         }
     }
 
-    /// The pane row is the middle rung: a visible fill against the card, still
-    /// a different surface from the cursor's, and carrying the selection
-    /// surface's foregrounds, which it borrows rather than shipping its own.
-    #[test]
-    fn the_pane_row_is_a_rung_between_the_card_and_the_selection() {
-        for (preset, p) in rgb_presets() {
-            let bg = p.pane_row_bg();
-            let from_card = contrast_ratio(p.card.bg, bg)
-                .unwrap_or_else(|| panic!("{preset}.pane_row_bg must be RGB"));
-            assert!(
-                from_card >= 1.15,
-                "{preset}: pane row {from_card:.2} from the card background is not a visible fill"
-            );
-            let from_selection =
-                contrast_ratio(p.selection.bg, bg).expect("selection.bg must be RGB");
-            assert!(
-                from_selection >= 1.15,
-                "{preset}: pane row {from_selection:.2} from the cursor's fill —                  the highlight would vanish on the session already in the pane"
-            );
-            for (role, color) in p.selection.roles() {
-                let ratio = contrast_ratio(bg, color).expect("selection role must be RGB");
-                let floor = if role == "dim" { 3.0 } else { 4.5 };
-                assert!(
-                    ratio >= floor,
-                    "{preset}.selection.{role} on the pane row is {ratio:.2}, below {floor}"
-                );
-            }
-        }
-    }
-
-    /// A preset the terminal themes has nothing to blend from.
-    #[test]
-    fn ansi_keeps_the_card_background_for_the_pane_row() {
-        let p = Palette::ANSI;
-        assert_eq!(p.pane_row_bg(), p.card.bg);
-    }
-
     #[test]
     fn every_preset_supplies_every_role() {
         for (name, p) in Palette::presets() {

crates/maestro-tui/src/render.rs

@@ -415,7 +415,6 @@ mod tests {
             sessions: Vec::new(),
             highlight: None,
             attached: HashSet::new(),
-            pane_session: None,
         };
         let help = HelpOverlay { lines: Vec::new() };
         let state = AppState::new();
@@ -512,7 +511,6 @@ mod tests {
             sessions: Vec::new(),
             highlight: None,
             attached: HashSet::new(),
-            pane_session: None,
         };
         let help = HelpOverlay { lines: Vec::new() };
         let inputs = RenderInputs {
@@ -563,7 +561,6 @@ mod tests {
             sessions: Vec::new(),
             highlight: None,
             attached: HashSet::new(),
-            pane_session: None,
         };
         let help = HelpOverlay { lines: Vec::new() };
         let draw_map = |focus| {
@@ -604,7 +601,6 @@ mod tests {
             sessions: Vec::new(),
             highlight: None,
             attached: HashSet::new(),
-            pane_session: None,
         };
         let help = HelpOverlay { lines: Vec::new() };
         let render = |focus| {

crates/maestro-tui/src/sidebar.rs

@@ -37,39 +37,14 @@ const META_INDENT: &str = "    ";
 /// both card rows, replacing the old inline dot glyph on the meta line.
 const RAIL: &str = "▌";
 
-/// Which fill a session card wears (docs/SIDEBAR.md). The cursor's fill wins
-/// on its own row: a highlight that lands on the session already in the pane
-/// still has to be visible.
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-enum CardFill {
-    /// An ordinary card, on the card surface.
-    None,
-    /// The session the pane is showing.
-    Pane,
-    /// Under the cursor, with the sidebar holding the keyboard.
-    Cursor,
-}
-
-impl CardFill {
-    /// Both filled tiers carry the selection surface's foregrounds — those are
-    /// the colours picked for a filled row, and a colour chosen for the card
-    /// background is not legible on one.
-    fn filled(self) -> bool {
-        self != CardFill::None
-    }
-}
-
-/// Cards take the cursor's fill only while the sidebar owns focus. An
+/// Cards use the selection surface only while the sidebar owns focus. An
 /// unfocused highlight remains an edge-marked cursor without claiming the
 /// keyboard via a filled selection background.
-fn card_base(fill: CardFill, focused: bool) -> Style {
+fn card_base(highlighted: bool, focused: bool) -> Style {
     let palette = palette::active();
-    let mut style = palette.surface(fill.filled()).text_style();
-    match fill {
-        CardFill::Cursor => {}
-        CardFill::Pane => style = style.bg(palette.pane_row_bg()),
-        CardFill::None if focused => style = style.bg(palette.sidebar_focus_bg),
-        CardFill::None => {}
+    let mut style = palette.surface(highlighted && focused).text_style();
+    if focused && !highlighted {
+        style = style.bg(palette.sidebar_focus_bg);
     }
     style
 }
@@ -80,9 +55,6 @@ pub struct Sidebar {
     pub sessions: Vec<Session>,
     pub highlight: Option<SidebarItem>,
     pub attached: HashSet<Uuid>,
-    /// The session the active tab's pane is showing. It wears a fill of its
-    /// own, so "in the pane" is not carried by the ● glyph alone.
-    pub pane_session: Option<Uuid>,
 }
 
 #[derive(Debug, Clone, PartialEq, Eq)]
@@ -141,7 +113,8 @@ impl Sidebar {
             lines.push(Line::from(self.group_row(&group, width, focused, home)));
             if !group.collapsed {
                 for s in &group.sessions {
-                    let base = card_base(self.card_fill(s, focused), focused);
+                    let highlighted = self.highlight == Some(SidebarItem::Session(s.id));
+                    let base = card_base(highlighted, focused);
                     lines.push(Line::from(self.name_row(s, width, focused)));
                     let meta = self.meta_row(s, width, focused);
                     lines.push(Line::from(pad_to_width(meta, width, base)));
@@ -253,18 +226,6 @@ impl Sidebar {
         pad_to_width(spans, width, base)
     }
 
-    /// Which fill this session's card wears. The cursor wins on its own row,
-    /// so a highlight parked on the session already in the pane stays visible.
-    fn card_fill(&self, s: &Session, focused: bool) -> CardFill {
-        if focused && self.highlight == Some(SidebarItem::Session(s.id)) {
-            CardFill::Cursor
-        } else if self.pane_session == Some(s.id) {
-            CardFill::Pane
-        } else {
-            CardFill::None
-        }
-    }
-
     fn name_row(&self, s: &Session, width: usize, focused: bool) -> Vec<Span<'static>> {
         let glyph = match (s.status, self.attached.contains(&s.id)) {
             (SessionStatus::Dead, _) => "✗",
@@ -272,13 +233,12 @@ impl Sidebar {
             (SessionStatus::Running, false) => "○",
         };
         let highlighted = self.highlight == Some(SidebarItem::Session(s.id));
-        let fill = self.card_fill(s, focused);
-        let base = card_base(fill, focused);
+        let base = card_base(highlighted, focused);
         let prefix = 1 + INDENT.chars().count() + 2;
         let name_budget = width.saturating_sub(prefix);
 
         let edge = highlighted && !focused;
-        let rail_style = base.fg(activity_color(s.activity, fill));
+        let rail_style = base.fg(activity_color(s.activity, highlighted, focused));
         let mut spans: Vec<Span<'static>> = vec![
             Span::styled(RAIL, rail_style),
             Span::styled(
@@ -297,7 +257,7 @@ impl Sidebar {
         let name_style = if maestro_protocol::display::is_provisional_name(s) {
             base.patch(
                 palette::active()
-                    .surface(fill.filled())
+                    .surface(highlighted && focused)
                     .muted_style()
                     .bg(base.bg.unwrap_or(palette::active().chrome_bg)),
             )
@@ -323,11 +283,11 @@ impl Sidebar {
         let blocked = s.blocked_work.filter(|b| !b.is_clear());
         let dead = s.status == SessionStatus::Dead;
         let highlighted = self.highlight == Some(SidebarItem::Session(s.id));
-        let fill = self.card_fill(s, focused);
-        let base = card_base(fill, focused);
-        let rail_style = base.patch(Style::default().fg(activity_color(s.activity, fill)));
+        let base = card_base(highlighted, focused);
+        let rail_style =
+            base.patch(Style::default().fg(activity_color(s.activity, highlighted, focused)));
         let muted = palette::active()
-            .surface(fill.filled())
+            .surface(highlighted && focused)
             .muted_style()
             .bg(base.bg.unwrap_or(palette::active().chrome_bg));
         let edge = highlighted && !focused;
@@ -348,7 +308,7 @@ impl Sidebar {
         let mut tail: Vec<Span<'static>> = Vec::new();
         if let Some(b) = blocked {
             let palette = palette::active();
-            let surface = palette.surface(fill.filled());
+            let surface = palette.surface(highlighted && focused);
             for (kind, text) in b.stats() {
                 let style = match kind {
                     StatKind::Added => muted.fg(surface.active),
@@ -392,8 +352,10 @@ impl Sidebar {
 /// state word is never spelled out — this colour carries it. The highlighted
 /// card takes its state colours from the selection surface: a colour picked
 /// for the dark card background is not legible on the selection background.
-fn activity_color(state: ActivityState, fill: CardFill) -> Color {
-    palette::active().surface(fill.filled()).activity(state)
+fn activity_color(state: ActivityState, highlighted: bool, focused: bool) -> Color {
+    palette::active()
+        .surface(highlighted && focused)
+        .activity(state)
 }
 
 /// docs/SIDEBAR.md duration format — floored whole seconds / minutes / hours,
@@ -558,7 +520,6 @@ mod tests {
             sessions: vec![session_named(1, "claude"), session_named(2, "bash")],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let rendered = render_to_string(&draw(&sb, 28, 12));
         assert!(
@@ -583,7 +544,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         })
         .groups(&HashSet::new());
         assert_eq!(groups[0].key, PathBuf::from("/home/u/repos/maestro"));
@@ -595,7 +555,6 @@ mod tests {
             sessions: Vec::new(),
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         assert!(sidebar.groups(&HashSet::new()).is_empty());
         assert!(sidebar.rendered_items().is_empty());
@@ -607,7 +566,6 @@ mod tests {
             sessions: vec![session_named(1, "claude"), session_named(2, "bash")],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let key = PathBuf::from("/tmp");
         let mut collapsed = HashSet::new();
@@ -632,7 +590,6 @@ mod tests {
             sessions: vec![session],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let key = PathBuf::from("/very/long/project/path/extraordinarily-long-project-name");
         let collapsed = HashSet::from([key]);
@@ -663,7 +620,6 @@ mod tests {
             sessions: vec![session_named(1, "claude")],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sidebar, 40, 8));
         assert!(all[1].contains("/tmp"));
@@ -679,7 +635,6 @@ mod tests {
             sessions: vec![session_named(1, "claude")],
             highlight: None,
             attached: [sid].into_iter().collect(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 28, 6));
         let line = row_containing(&all, "claude");
@@ -690,87 +645,6 @@ mod tests {
         );
     }
 
-    /// Whether any cell in the buffer is painted on `bg`.
-    fn any_cell_on(buf: &Buffer, bg: Color) -> bool {
-        (0..buf.area.height)
-            .any(|y| (0..buf.area.width).any(|x| buf[(x, y)].style().bg == Some(bg)))
-    }
-
-    /// docs/SIDEBAR.md: the session the pane is showing wears a fill, so it is
-    /// not the ● glyph alone carrying "this is the one on screen".
-    #[test]
-    fn the_session_in_the_pane_wears_the_pane_fill() {
-        let sid = Uuid::from_u128(1);
-        let p = palette::active();
-        let sb = Sidebar {
-            sessions: vec![session_named(1, "claude")],
-            highlight: None,
-            attached: [sid].into_iter().collect(),
-            pane_session: Some(sid),
-        };
-        assert!(any_cell_on(&draw(&sb, 28, 6), p.pane_row_bg()));
-
-        let none = Sidebar {
-            pane_session: None,
-            ..sb
-        };
-        assert!(!any_cell_on(&draw(&none, 28, 6), p.pane_row_bg()));
-    }
-
-    /// The cursor's fill wins on its own row: a highlight that lands on the
-    /// session already in the pane has to stay visible.
-    #[test]
-    fn the_cursor_outranks_the_pane_fill_on_its_own_row() {
-        let sid = Uuid::from_u128(1);
-        let p = palette::active();
-        let sb = Sidebar {
-            sessions: vec![session_named(1, "claude")],
-            highlight: Some(SidebarItem::Session(sid)),
-            attached: [sid].into_iter().collect(),
-            pane_session: Some(sid),
-        };
-        let buf = draw_with_focus(&sb, 28, 6, true);
-        assert!(any_cell_on(&buf, p.selection.bg), "cursor fill is missing");
-        assert!(
-            !any_cell_on(&buf, p.pane_row_bg()),
-            "the pane fill is showing through the cursor's own row"
-        );
-    }
-
-    /// A card the pane is showing is a filled row, so it takes the selection
-    /// surface's foregrounds — a colour picked for the card background is not
-    /// legible on a fill.
-    #[test]
-    fn the_pane_row_carries_selection_foregrounds() {
-        let sid = Uuid::from_u128(1);
-        let p = palette::active();
-        let mut sess = session_named(1, "claude");
-        sess.activity = ActivityState::AwaitingInput;
-        let sb = Sidebar {
-            sessions: vec![sess],
-            highlight: None,
-            attached: [sid].into_iter().collect(),
-            pane_session: Some(sid),
-        };
-        let buf = draw(&sb, 28, 6);
-        let on_pane_row = |fg: Color| {
-            (0..buf.area.height).any(|y| {
-                (0..buf.area.width).any(|x| {
-                    let st = buf[(x, y)].style();
-                    st.bg == Some(p.pane_row_bg()) && st.fg == Some(fg)
-                })
-            })
-        };
-        assert!(
-            on_pane_row(p.selection.activity(ActivityState::AwaitingInput)),
-            "the rail must carry the state in the filled surface's colours"
-        );
-        assert!(
-            !on_pane_row(p.card.activity(ActivityState::AwaitingInput)),
-            "a card surface colour is painted onto the pane fill"
-        );
-    }
-
     #[test]
     fn dead_session_uses_cross_glyph() {
         let mut sess = session_named(1, "claude");
@@ -779,7 +653,6 @@ mod tests {
             sessions: vec![sess],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let buf = draw(&sb, 28, 6);
         let all = rows(&buf);
@@ -808,7 +681,6 @@ mod tests {
             sessions: vec![blocked, clear, unprobed],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 44, 10));
 
@@ -855,7 +727,6 @@ mod tests {
             sessions: vec![generated, settled],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let buf = draw(&sb, 44, 8);
         let palette = palette::active();
@@ -888,7 +759,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let buf = draw(&sb, 44, 8);
         let palette = palette::active();
@@ -915,7 +785,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 28, 8));
         assert_eq!(content(&all[0]), "sessions");
@@ -947,7 +816,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 28, 8));
         let idx = all.iter().position(|l| l.contains("claude")).unwrap();
@@ -987,7 +855,6 @@ mod tests {
                 sessions: vec![s],
                 highlight: None,
                 attached: Default::default(),
-                pane_session: None,
             };
             let buf = draw(&sb, 28, 8);
             let found = (0..buf.area.height)
@@ -1016,7 +883,6 @@ mod tests {
                 sessions: vec![s],
                 highlight: Some(SidebarItem::Session(Uuid::from_u128(1))),
                 attached: Default::default(),
-                pane_session: None,
             };
             let buf = draw(&sb, 28, 8);
             let on_selection = |fg: Color| {
@@ -1056,7 +922,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 28, 8));
         let idx = all.iter().position(|l| l.contains("claude")).unwrap();
@@ -1076,7 +941,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 60, 6));
         let meta = content(&all[3]);
@@ -1105,7 +969,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 28, 8));
         let idx = all.iter().position(|l| l.contains("claude")).unwrap();
@@ -1135,7 +998,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 40, 8));
         let idx = all.iter().position(|l| l.contains("claude")).unwrap();
@@ -1163,7 +1025,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 40, 8));
         let idx = all.iter().position(|l| l.contains("claude")).unwrap();
@@ -1192,7 +1053,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 42, 8));
         let idx = all.iter().position(|l| l.contains("claude")).unwrap();
@@ -1226,7 +1086,6 @@ mod tests {
             sessions: vec![legacy],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let rendered = render_to_string(&draw(&sb, 40, 8));
         assert!(
@@ -1269,7 +1128,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let rendered = render_to_string(&draw(&sb, 28, 6));
         assert!(
@@ -1285,7 +1143,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 40, 6));
         assert!(
@@ -1307,7 +1164,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 9, 6));
         assert!(
@@ -1334,7 +1190,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 29, 6));
         assert!(all[3].contains("~1"), "{:?}", all[3]);
@@ -1359,7 +1214,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 40, 6));
         assert!(all[3].contains("~1"), "{:?}", all[3]);
@@ -1381,7 +1235,6 @@ mod tests {
             sessions: vec![highlighted],
             highlight: Some(SidebarItem::Session(Uuid::from_u128(1))),
             attached: Default::default(),
-            pane_session: None,
         };
         let buf = draw(&sb, 28, 8);
         for y in 0..buf.area.height {
@@ -1407,7 +1260,6 @@ mod tests {
             sessions: vec![one, two],
             highlight: Some(SidebarItem::Session(Uuid::from_u128(1))),
             attached: Default::default(),
-            pane_session: None,
         };
         let buf = draw(&sb, 28, 8);
         let all = rows(&buf);
@@ -1443,7 +1295,6 @@ mod tests {
             sessions: vec![session_named(1, "claude")],
             highlight: Some(SidebarItem::Session(Uuid::from_u128(1))),
             attached: Default::default(),
-            pane_session: None,
         };
         let buf = draw_with_focus(&sb, 28, 8, false);
         let y = (0..buf.area.height)
@@ -1463,7 +1314,6 @@ mod tests {
                 sessions: vec![session_named(1, "claude")],
                 highlight: None,
                 attached: Default::default(),
-                pane_session: None,
             },
             28,
             8,
@@ -1484,7 +1334,6 @@ mod tests {
             sessions: vec![s],
             highlight: None,
             attached: Default::default(),
-            pane_session: None,
         };
         let buf = draw(&sb, 28, 8);
         let y = buf.content.iter().position(|c| c.symbol() == "c").unwrap() as u16 / buf.area.width;
@@ -1503,7 +1352,6 @@ mod tests {
             sessions: vec![session_named(1, "claude")],
             highlight: Some(SidebarItem::Session(Uuid::from_u128(1))),
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 28, 8));
         let line = content(row_containing(&all, "claude"));
@@ -1521,7 +1369,6 @@ mod tests {
             sessions: vec![one, two],
             highlight: Some(SidebarItem::Session(Uuid::from_u128(1))),
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 28, 8));
         let line = row_containing(&all, "bash");
@@ -1541,7 +1388,6 @@ mod tests {
             sessions: vec![s],
             highlight: Some(SidebarItem::Session(Uuid::from_u128(1))),
             attached: Default::default(),
-            pane_session: None,
         };
         let all = rows(&draw(&sb, 28, 8));
         let line = row_containing(&all, "an-unreasonably");

docs/PREVIEW.md

@@ -32,33 +32,6 @@ The throwaway tab never counts as an open session: the tab bar does not appear
 because of it, the mobile shell does not switch away from the session list for
 it, and the sidebar does not mark the session as open.
 
-## How a preview reads
-
-A preview is provisional, so it never wears the accent — the accent is what
-says "this is the one you picked". It has a hue of its own, and every surface
-involved in the preview carries that same hue, so the pane and the row it came
-from read as one thing rather than two unrelated highlights.
-
-Web client (`--preview` and friends in `web/src/styles.css`):
-
-| Surface | While previewing |
-|---|---|
-| The previewed pane's titlebar | Tinted in the preview hue, at full strength, in place of the focused pane's accent tint. |
-| The canvas | A `preview` chip, top right, and a dashed inset ring. |
-| A throwaway tab | Dashed border, italic label. |
-| The sidebar row being previewed | Filled with the preview hue, over whatever open/focused state the row already had. |
-| A hovered sidebar row, and the keyboard cursor on a session | A lighter wash of the same hue, because both are what previews a row. |
-
-Rows say it with fill, not with an edge — see the tier ladder in
-`docs/SIDEBAR.md`, which previewing sits at the bottom of. The dashed edges
-belong to the pane: the canvas ring and the throwaway tab.
-
-The hue is a palette token, not a fixed colour: a palette whose accent already
-sits on it moves it (`--preview-h`), so "previewing" and "picked" never collide.
-
-The TUI marks a preview in text only — the title bar reads `<name>  ·  preview`
-— and has no preview colour role yet.
-
 ## What ends a preview
 
 - The highlight moves to another session — that session is previewed instead.

docs/SIDEBAR.md

@@ -177,38 +177,6 @@ surface; a colour chosen for the card background is never painted onto the
 selection background. Contrast is a property of the palette (values are RGB)
 and is asserted in the palette's tests, not left to the terminal theme.
 
-## Which row is filled
-
-Both clients say every one of these with a **background fill**, never an edge.
-A row is usually several of them at once, so they form a ladder: the tier
-furthest down wins the paint.
-
-| Tier | Web | TUI |
-|---|---|---|
-| Alive | 6% accent wash | — (the rail carries it) |
-| Under the pointer or the keyboard walk | preview hue, light | selection surface, while the sidebar holds the keyboard |
-| Open in some pane, not the focused one | 6% accent wash (`.is-open`) | — (the `●` glyph carries it) |
-| Showing in the pane | `--accent-fill` | `pane_row_bg()` — partway from the card surface to the selection surface |
-| Previewing (`docs/PREVIEW.md`) | `--preview-tint` | — (no preview colour role yet) |
-
-The web ladder is written as one ordered run of equal-specificity rules in
-`styles.css`, every qualifier inside `:where()`, so the order they appear in
-*is* the precedence. Add a tier where it belongs in that run, never by piling
-on another class to out-weigh the rule above it.
-
-The TUI's two filled tiers both carry the **selection** surface's foregrounds,
-since those are the colours picked for a filled row. `pane_row_bg()` is
-blended from the two surfaces rather than shipped as a third one — a third
-surface would mean eight more colours hand-picked seventeen times — and the
-palette tests assert it stays a visible step from both. The cursor's fill wins
-on its own row, so a highlight parked on the session already in the pane is
-still visible.
-
-The one edge left in either list is the TUI's `▏` marker, which stands in for
-the cursor's fill while the pane holds the keyboard, and the web's ring on a
-highlighted **folder** row — a folder previews nothing, so it has no fill to
-step up to.
-
 The duration text inherits its state's colour; the exited and command
 fragments use the surface's `muted` role, as do the diff stat's `~`, `?` and
 `↑` fragments. Only `+` and `-` step outside the surface's muted role, and they

web/src/attach.ts

@@ -5,6 +5,7 @@ import "@xterm/xterm/css/xterm.css";
 
 import { attachWsUrl } from "./routes.js";
 import { FOCUS_SIDEBAR_EVENT } from "./catalog.js";
+import { CommandSet, defineCommands } from "./commands.js";
 import { escapeHtml } from "./html.js";
 import { INITIAL_RECONNECT_MS, MAX_RECONNECT_MS } from "./reconnect.js";
 import { applyModsToChar, cursorSeq, tildeSeq } from "./keys.js";
@@ -13,6 +14,15 @@ import { splitCommand, toolIconSvg } from "./toolIcon.js";
 import type { ClientControl, Uuid } from "./types.js";
 import { WebglPolicy } from "./webglRenderer.js";
 
+// The pane's half of the command registry (#148): plain Escape hands the
+// keyboard back to the session list, the pair to the list's Tab.
+const paneKeys = new CommandSet(
+  defineCommands({
+    "pane.focusList": () => document.dispatchEvent(new CustomEvent(FOCUS_SIDEBAR_EVENT)),
+  }),
+  { preventDefault: false },
+);
+
 /** One budget for the whole page — see webglRenderer.ts for why contexts are
  *  rationed rather than handed to every connection. */
 const webglPolicy = new WebglPolicy();
@@ -56,8 +66,6 @@ export interface AttachOptions {
   shouldReconnect?: (sessionId: Uuid, code: number) => boolean;
 }
 
-
-
 /** What the header shows about the session (name / command). Optional — falls
  * back to a short session id when the session isn't known yet. */
 export interface AttachInfo {
@@ -210,12 +218,12 @@ export function createAttachConnection(
   }
 
   // Plain Escape hands the keyboard back to the session list instead of the
-  // shell/app. `false` tells xterm to skip its own handling of this event.
+  // shell/app. `false` tells xterm to skip its own handling of this event —
+  // which is also why the set doesn't `preventDefault`: swallowing here is
+  // xterm's return value, not the browser's.
   term.attachCustomKeyEventHandler((e) => {
-    if (e.type !== "keydown" || e.key !== "Escape") return true;
-    if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return true;
-    document.dispatchEvent(new CustomEvent(FOCUS_SIDEBAR_EVENT));
-    return false;
+    if (e.type !== "keydown") return true;
+    return !paneKeys.handle(e);
   });
 
   // Touch scrolling: xterm's built-in touch handling is jittery (drags crawl a

web/src/catalog.ts

@@ -2,7 +2,8 @@ import { escapeHtml } from "./html.js";
 import { ApiRequestError, getDaemonInfo, killSession, renameSession } from "./api.js";
 import { openForceKillDialog } from "./killDialog.js";
 import { openContextMenu } from "./contextMenu.js";
-import { isTypingTarget, toggleHelp } from "./help.js";
+import { toggleHelp } from "./help.js";
+import { CommandSet, defineCommands } from "./commands.js";
 import { CatalogStore } from "./events.js";
 import type { InTheWay, Session } from "./types.js";
 import {
@@ -387,9 +388,6 @@ export interface SidebarHandle {
   setActive(id: string | null): void;
   /** Apply the full open/focused highlight state. */
   setHighlights(h: SidebarHighlights): void;
-  /** Mark the row the content pane is previewing (docs/PREVIEW.md), or clear it
-   *  with `null`. A preview is a view, not state, so this only paints. */
-  setPreview(sessionId: string | null): void;
   /** Hand the keyboard to the session list, highlighting a row to walk from. */
   focusList(): void;
   /** Whether the session list currently holds DOM focus. */
@@ -549,10 +547,6 @@ export function renderSidebar(store: CatalogStore, opts: SidebarOptions = {}): S
   });
 
   let highlights: SidebarHighlights = { open: new Set(), focused: null };
-  // The previewed row is painted alongside the open/focused tiers so a
-  // re-render can't drop it, but it is never part of `highlights`: a preview
-  // is a view, and nothing about it is durable (docs/PREVIEW.md).
-  let previewing: string | null = null;
   const applyHighlights = () => {
     for (const n of treeHost.querySelectorAll<HTMLElement>(".tree-leaf")) {
       const id = n.dataset.sessionId;
@@ -561,7 +555,6 @@ export function renderSidebar(store: CatalogStore, opts: SidebarOptions = {}): S
       const open = highlights.open.has(id);
       n.classList.toggle("is-active", focused);
       n.classList.toggle("is-open", open && !focused);
-      n.classList.toggle("is-previewing", previewing === id);
     }
   };
 
@@ -669,24 +662,30 @@ export function renderSidebar(store: CatalogStore, opts: SidebarOptions = {}): S
     applyNav();
   };
 
-  treeHost.addEventListener("keydown", (e) => {
-    if (e.ctrlKey || e.altKey || e.metaKey) return;
-    // The inline rename field lives inside a row and owns its own keys.
-    if (isTypingTarget(e.target)) return;
-    if (e.key === "j" || e.key === "ArrowDown") moveNav(1);
-    else if (e.key === "k" || e.key === "ArrowUp") moveNav(-1);
-    else if (e.key === "Enter") activateNav();
-    else if (e.key === "Tab") document.dispatchEvent(new CustomEvent(FOCUS_PANE_EVENT));
-    else if (e.key === "c") toggleHighlightedFolder();
-    else if (e.key === "x") {
-      const hit = highlightedSession();
-      if (hit) void requestKill(hit.session, sessionName(hit.session));
-    } else if (e.key === "r") {
-      const hit = highlightedSession();
-      if (hit) beginRename(hit.row, hit.session);
-    } else return;
-    e.preventDefault();
-  });
+  // The session list's half of the command registry (#148). One set per
+  // sidebar, so a second sidebar (tests, hot reload) drives its own rows; the
+  // labels and chords still come from the one registry.
+  const listKeys = new CommandSet(
+    defineCommands({
+      "list.next": () => moveNav(1),
+      "list.prev": () => moveNav(-1),
+      "list.activate": () => activateNav(),
+      "list.toggleFolder": () => toggleHighlightedFolder(),
+      "list.rename": () => {
+        const hit = highlightedSession();
+        if (hit) beginRename(hit.row, hit.session);
+      },
+      "list.kill": () => {
+        const hit = highlightedSession();
+        if (hit) void requestKill(hit.session, sessionName(hit.session));
+      },
+      "list.focusPane": () => document.dispatchEvent(new CustomEvent(FOCUS_PANE_EVENT)),
+    }),
+  );
+
+  // The inline rename field lives inside a row and owns its own keys; the set's
+  // plain-key rule keeps this walk out of it.
+  treeHost.addEventListener("keydown", (e) => listKeys.handle(e));
 
   /** Signature of what is currently on screen — see `treeSignature`. */
   let renderedSignature: string | null = null;
@@ -763,10 +762,6 @@ export function renderSidebar(store: CatalogStore, opts: SidebarOptions = {}): S
       highlights = h;
       applyHighlights();
     },
-    setPreview(sessionId: string | null) {
-      previewing = sessionId;
-      applyHighlights();
-    },
     focusList() {
       // Start from the session on screen — that is where the user's attention
       // already is — falling back to the standing highlight, then the top row.

web/src/commands.test.ts

@@ -0,0 +1,236 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  COMMAND_SPECS,
+  CommandSet,
+  DEFAULT_LEADER,
+  canonicalizeKey,
+  defineCommands,
+  isTypingTarget,
+  keyCaps,
+  publishedCommands,
+} from "./commands.js";
+
+function key(k: string, init: KeyboardEventInit = {}): KeyboardEvent {
+  return new KeyboardEvent("keydown", { key: k, cancelable: true, ...init });
+}
+
+function el(html: string): HTMLElement {
+  const d = document.createElement("div");
+  d.innerHTML = html;
+  return d.firstElementChild as HTMLElement;
+}
+
+/** Dispatch on a target, so `isTypingTarget` sees something other than null. */
+function pressOn(set: CommandSet, target: HTMLElement, k: string, init?: KeyboardEventInit): boolean {
+  const e = key(k, init);
+  Object.defineProperty(e, "target", { value: target });
+  return set.handle(e);
+}
+
+describe("command specs", () => {
+  it("has a unique id and at least one chord per command", () => {
+    const ids = COMMAND_SPECS.map((s) => s.id);
+    expect(new Set(ids).size).toBe(ids.length);
+    for (const spec of COMMAND_SPECS) {
+      expect(spec.keys.length).toBeGreaterThan(0);
+      expect(spec.label.length).toBeGreaterThan(0);
+    }
+  });
+
+  it("binds each chord once within a scope", () => {
+    const seen = new Set<string>();
+    for (const spec of COMMAND_SPECS) {
+      for (const k of spec.keys) {
+        const slot = `${spec.scope}:${k}`;
+        expect(seen.has(slot)).toBe(false);
+        seen.add(slot);
+      }
+    }
+  });
+
+  it("rejects a handler for an id that isn't in the registry", () => {
+    expect(() => defineCommands({ "nope.missing": () => {} })).toThrow(/unknown command id/);
+  });
+
+  it("carries every spec field onto the defined command", () => {
+    const [cmd] = defineCommands({ "spawn.open": () => {} });
+    expect(cmd).toMatchObject({ id: "spawn.open", keys: ["n"], scope: "global" });
+  });
+});
+
+describe("canonicalizeKey", () => {
+  it("spells keys the way the TUI's InputKey::canonical does", () => {
+    expect(canonicalizeKey(key("n"))).toBe("n");
+    expect(canonicalizeKey(key("N", { shiftKey: true }))).toBe("N");
+    expect(canonicalizeKey(key("?", { shiftKey: true }))).toBe("?");
+    expect(canonicalizeKey(key("a", { ctrlKey: true }))).toBe("ctrl-a");
+    expect(canonicalizeKey(key("Escape"))).toBe("esc");
+    expect(canonicalizeKey(key("Enter"))).toBe("enter");
+    expect(canonicalizeKey(key("Tab"))).toBe("tab");
+    expect(canonicalizeKey(key("Tab", { shiftKey: true }))).toBe("backtab");
+    expect(canonicalizeKey(key("ArrowDown"))).toBe("down");
+  });
+
+  it("folds a modified letter to lower case with an explicit shift-", () => {
+    expect(canonicalizeKey(key("H", { ctrlKey: true, shiftKey: true }))).toBe("ctrl-shift-h");
+    expect(canonicalizeKey(key("h", { ctrlKey: true, shiftKey: true }))).toBe("ctrl-shift-h");
+  });
+
+  it("has no canonical form for a modifier pressed alone", () => {
+    expect(canonicalizeKey(key("Control", { ctrlKey: true }))).toBeNull();
+    expect(canonicalizeKey(key("Shift", { shiftKey: true }))).toBeNull();
+  });
+});
+
+describe("keyCaps", () => {
+  it("renders one cap per modifier and key", () => {
+    expect(keyCaps("ctrl-shift-h")).toEqual(["Ctrl", "Shift", "H"]);
+    expect(keyCaps("enter")).toEqual(["Enter"]);
+    expect(keyCaps("j")).toEqual(["j"]);
+    expect(keyCaps("N")).toEqual(["N"]);
+    expect(keyCaps("?")).toEqual(["?"]);
+    expect(keyCaps("ctrl-a ctrl-k")).toEqual(["Ctrl", "A", "then", "Ctrl", "K"]);
+  });
+});
+
+describe("CommandSet", () => {
+  it("runs the command bound to a chord, and swallows the browser default", () => {
+    const run = vi.fn();
+    const set = new CommandSet(defineCommands({ "spawn.open": run }));
+    const e = key("n");
+    expect(set.handle(e)).toBe(true);
+    expect(run).toHaveBeenCalledTimes(1);
+    expect(e.defaultPrevented).toBe(true);
+  });
+
+  it("leaves an unbound key alone", () => {
+    const set = new CommandSet(defineCommands({ "spawn.open": vi.fn() }));
+    const e = key("q");
+    expect(set.handle(e)).toBe(false);
+    expect(e.defaultPrevented).toBe(false);
+  });
+
+  it("treats a modified key as a different binding", () => {
+    const run = vi.fn();
+    const set = new CommandSet(defineCommands({ "spawn.open": run }));
+    expect(set.handle(key("n", { ctrlKey: true }))).toBe(false);
+    expect(set.handle(key("n", { metaKey: true }))).toBe(false);
+    expect(run).not.toHaveBeenCalled();
+  });
+
+  it("runs every alias of a command", () => {
+    const run = vi.fn();
+    const set = new CommandSet(defineCommands({ "list.next": run }));
+    set.handle(key("j"));
+    set.handle(key("ArrowDown"));
+    expect(run).toHaveBeenCalledTimes(2);
+  });
+
+  it("keeps plain keys deaf inside a form field, and chorded ones live", () => {
+    const plain = vi.fn();
+    const chorded = vi.fn();
+    const set = new CommandSet(
+      defineCommands({ "spawn.open": plain, "focus.toggle": chorded }),
+    );
+    const input = el("<input>");
+    expect(pressOn(set, input, "n")).toBe(false);
+    expect(plain).not.toHaveBeenCalled();
+    expect(pressOn(set, input, "H", { ctrlKey: true, shiftKey: true })).toBe(true);
+    expect(chorded).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps pane commands live inside the terminal's textarea", () => {
+    const run = vi.fn();
+    const set = new CommandSet(defineCommands({ "pane.focusList": run }), {
+      preventDefault: false,
+    });
+    const textarea = el('<textarea class="xterm-helper-textarea"></textarea>');
+    const e = key("Escape");
+    Object.defineProperty(e, "target", { value: textarea });
+    expect(set.handle(e)).toBe(true);
+    expect(run).toHaveBeenCalledTimes(1);
+    // xterm is told to swallow by the return value, not by the browser default.
+    expect(e.defaultPrevented).toBe(false);
+  });
+});
+
+describe("the leader", () => {
+  it("defaults to the TUI's ctrl-a", () => {
+    expect(DEFAULT_LEADER).toBe("ctrl-a");
+  });
+
+  it("holds the leader as a partial chord instead of selecting the page", () => {
+    const set = new CommandSet(defineCommands({ "spawn.open": vi.fn() }), {
+      leader: DEFAULT_LEADER,
+    });
+    const e = key("a", { ctrlKey: true });
+    expect(set.handle(e)).toBe(true);
+    expect(e.defaultPrevented).toBe(true);
+  });
+
+  it("swallows the key after the leader rather than running its plain binding", () => {
+    const run = vi.fn();
+    const set = new CommandSet(defineCommands({ "spawn.open": run }), {
+      leader: DEFAULT_LEADER,
+    });
+    set.handle(key("a", { ctrlKey: true }));
+    expect(set.handle(key("n"))).toBe(true);
+    expect(run).not.toHaveBeenCalled();
+    // The next key is an ordinary one again.
+    set.handle(key("n"));
+    expect(run).toHaveBeenCalledTimes(1);
+  });
+
+  it("forgets a held leader once the chord timeout passes", () => {
+    const run = vi.fn();
+    let now = 0;
+    const set = new CommandSet(defineCommands({ "spawn.open": run }), {
+      leader: DEFAULT_LEADER,
+      chordTimeoutMs: 1000,
+      now: () => now,
+    });
+    set.handle(key("a", { ctrlKey: true }));
+    now = 1500;
+    set.handle(key("n"));
+    expect(run).toHaveBeenCalledTimes(1);
+  });
+
+  it("leaves select-all alone in a real form field", () => {
+    const set = new CommandSet(defineCommands({ "spawn.open": vi.fn() }), {
+      leader: DEFAULT_LEADER,
+    });
+    const input = el("<input>");
+    const e = key("a", { ctrlKey: true });
+    Object.defineProperty(e, "target", { value: input });
+    expect(set.handle(e)).toBe(false);
+    expect(e.defaultPrevented).toBe(false);
+  });
+});
+
+describe("publishing", () => {
+  it("lists a constructed set's commands, replacing an id rather than doubling it", () => {
+    new CommandSet(defineCommands({ "list.kill": () => {} }));
+    new CommandSet(defineCommands({ "list.kill": () => {} }));
+    const ids = publishedCommands().map((c) => c.id);
+    expect(ids.filter((id) => id === "list.kill")).toEqual(["list.kill"]);
+  });
+
+  it("keeps published commands in registry order", () => {
+    const order = COMMAND_SPECS.map((s) => s.id);
+    const ids = publishedCommands().map((c) => c.id);
+    expect(ids).toEqual(order.filter((id) => ids.includes(id)));
+  });
+});
+
+describe("isTypingTarget", () => {
+  it("is true for form fields and editable nodes, false otherwise", () => {
+    expect(isTypingTarget(el("<input>"))).toBe(true);
+    expect(isTypingTarget(el("<textarea></textarea>"))).toBe(true);
+    expect(isTypingTarget(el("<select></select>"))).toBe(true);
+    expect(isTypingTarget(el('<div contenteditable="true"></div>'))).toBe(true);
+    expect(isTypingTarget(el("<button></button>"))).toBe(false);
+    expect(isTypingTarget(null)).toBe(false);
+  });
+});

web/src/commands.ts

@@ -0,0 +1,386 @@
+// The web client's command registry (#148). One entry per command — a stable
+// id, a plain-language label, the key chord it answers to, and a `run()` — so
+// there is exactly one list of what the client can do. The `?` overlay renders
+// from it (`help.ts`), and every keybinding is dispatched through it; a command
+// added here is bound and documented in the same edit.
+//
+// Keys are canonical strings, the same spelling the TUI's `InputKey::canonical`
+// produces (`ctrl-shift-h`, `enter`, `esc`, `n`, `N`) and chords are those
+// joined by a space (`ctrl-a ctrl-k`). Matching the TUI's spelling is what lets
+// docs/COMMAND-BAR.md describe one key model for both clients.
+
+/** Where a command's keys are listened for. `global` is the window, `list` the
+ *  sidebar's session tree, `pane` the attached terminal, `overlay` the help
+ *  dialog while it is up. */
+export type CommandScope = "global" | "list" | "pane" | "overlay";
+
+export interface CommandSpec {
+  /** Stable identifier. Never rendered; safe to bind config and tests to. */
+  id: string;
+  /** Plain-language label — what the `?` overlay and (later) the command bar
+   *  show. */
+  label: string;
+  /** Help-overlay section. Groups render in the order they first appear here. */
+  group: string;
+  /** Canonical chords that run it. The first is the one shown to the operator;
+   *  the rest are aliases (`j` and `down`). */
+  keys: string[];
+  scope: CommandScope;
+}
+
+export interface Command extends CommandSpec {
+  run: () => void;
+}
+
+/** Every command the web client has. The single list this issue exists to
+ *  create: labels, chords and grouping live here and nowhere else. */
+export const COMMAND_SPECS: readonly CommandSpec[] = [
+  {
+    id: "spawn.open",
+    label: "Open the spawn form",
+    group: "Sessions",
+    keys: ["n"],
+    scope: "global",
+  },
+  {
+    id: "spawn.fastForward",
+    label: "Spawn a session with every default resolved",
+    group: "Sessions",
+    keys: ["N"],
+    scope: "global",
+  },
+  {
+    id: "focus.toggle",
+    label: "Move the keyboard between the session list and the pane",
+    group: "Session list",
+    keys: ["ctrl-shift-h"],
+    scope: "global",
+  },
+  {
+    id: "list.next",
+    label: "Highlight the next session",
+    group: "Session list",
+    keys: ["j", "down"],
+    scope: "list",
+  },
+  {
+    id: "list.prev",
+    label: "Highlight the previous session",
+    group: "Session list",
+    keys: ["k", "up"],
+    scope: "list",
+  },
+  {
+    id: "list.activate",
+    label: "Open the highlighted session, or expand a folder",
+    group: "Session list",
+    keys: ["enter"],
+    scope: "list",
+  },
+  {
+    id: "list.toggleFolder",
+    label: "Collapse or expand the highlighted folder",
+    group: "Session list",
+    keys: ["c"],
+    scope: "list",
+  },
+  {
+    id: "list.rename",
+    label: "Rename the highlighted session",
+    group: "Session list",
+    keys: ["r"],
+    scope: "list",
+  },
+  {
+    id: "list.kill",
+    label: "Kill the highlighted session",
+    group: "Session list",
+    keys: ["x"],
+    scope: "list",
+  },
+  {
+    id: "list.focusPane",
+    label: "Send the keyboard to the pane",
+    group: "Session list",
+    keys: ["tab"],
+    scope: "list",
+  },
+  {
+    id: "pane.focusList",
+    label: "Hand the keyboard back to the session list, from the pane",
+    group: "Session list",
+    keys: ["esc"],
+    scope: "pane",
+  },
+  {
+    id: "help.toggle",
+    label: "Show or hide this help",
+    group: "Help",
+    keys: ["?"],
+    scope: "global",
+  },
+  {
+    id: "help.close",
+    label: "Close the help overlay or an open menu",
+    group: "Help",
+    keys: ["esc"],
+    scope: "overlay",
+  },
+  {
+    id: "debug.toggleHud",
+    label: "Toggle the debug HUD",
+    group: "Debug",
+    keys: ["ctrl-shift-d"],
+    scope: "global",
+  },
+];
+
+const SPEC_BY_ID = new Map(COMMAND_SPECS.map((s) => [s.id, s]));
+
+/** Attach handlers to specs, by id. Throws on an unknown id, so a typo is a
+ *  test failure rather than a key that silently does nothing. */
+export function defineCommands(handlers: Record<string, () => void>): Command[] {
+  return Object.entries(handlers).map(([id, run]) => {
+    const spec = SPEC_BY_ID.get(id);
+    if (!spec) throw new Error(`unknown command id: ${id}`);
+    return { ...spec, run };
+  });
+}
+
+// ---- what the help overlay renders ----
+
+const published = new Map<string, Command>();
+
+/** Record commands as bound. Re-registering an id replaces it, so a second
+ *  sidebar (tests, hot reload) doesn't duplicate rows in the overlay. */
+export function publishCommands(cmds: Command[]): void {
+  for (const c of cmds) published.set(c.id, c);
+}
+
+/** Every bound command, in `COMMAND_SPECS` order. */
+export function publishedCommands(): Command[] {
+  return COMMAND_SPECS.map((s) => published.get(s.id)).filter((c): c is Command => c !== undefined);
+}
+
+// ---- key canonicalisation ----
+
+const NAMED: Record<string, string> = {
+  Escape: "esc",
+  Enter: "enter",
+  Tab: "tab",
+  Backspace: "backspace",
+  ArrowUp: "up",
+  ArrowDown: "down",
+  ArrowLeft: "left",
+  ArrowRight: "right",
+  Home: "home",
+  End: "end",
+  PageUp: "pageup",
+  PageDown: "pagedown",
+  Delete: "delete",
+  " ": "space",
+};
+
+/** The canonical string for one keydown. Mirrors the TUI's
+ *  `InputKey::canonical`: modifier prefixes in ctrl/alt/shift order, then the
+ *  key. A shifted character already spells itself (`N`, `?`), so `shift-` is
+ *  only written when another modifier is present and the char was folded to
+ *  lower case. */
+export function canonicalizeKey(e: KeyboardEvent): string | null {
+  if (!e.key) return null;
+  // Modifier keys pressed alone are never a binding.
+  if (e.key === "Control" || e.key === "Alt" || e.key === "Shift" || e.key === "Meta") return null;
+  const named = NAMED[e.key];
+  if (named === "tab" && e.shiftKey) return "backtab";
+  let out = "";
+  if (e.ctrlKey) out += "ctrl-";
+  if (e.altKey) out += "alt-";
+  if (e.metaKey) out += "meta-";
+  if (named) {
+    if (e.shiftKey) out += "shift-";
+    return out + named;
+  }
+  if (e.key.length === 1) {
+    if (out === "") return e.key;
+    if (e.shiftKey) out += "shift-";
+    return out + e.key.toLowerCase();
+  }
+  if (e.shiftKey) out += "shift-";
+  return out + e.key.toLowerCase();
+}
+
+const MOD_PREFIX = /^(ctrl|alt|meta|shift)-/;
+
+/** True when a chord carries a modifier or more than one key. Plain single-key
+ *  chords are the ones that stay deaf inside form fields. */
+function isChorded(chord: string): boolean {
+  return chord.includes(" ") || MOD_PREFIX.test(chord);
+}
+
+/** True when the event target swallows plain keystrokes — a form field, or the
+ *  hidden textarea xterm types into. Every plain single-key binding is deaf in
+ *  the same places. */
+export function isTypingTarget(target: EventTarget | null): boolean {
+  const el = target as HTMLElement | null;
+  if (!el || typeof el.tagName !== "string") return false;
+  return (
+    el.tagName === "INPUT" ||
+    el.tagName === "TEXTAREA" ||
+    el.tagName === "SELECT" ||
+    el.isContentEditable
+  );
+}
+
+/** xterm's offscreen textarea. It is a typing target like any other, but it is
+ *  also where the leader has to work — a pane is exactly where the operator
+ *  needs the escape hatch (docs/COMMAND-BAR.md). */
+function isTerminalTextarea(target: EventTarget | null): boolean {
+  const el = target as HTMLElement | null;
+  return !!el && typeof el.className === "string" && el.classList?.contains("xterm-helper-textarea");
+}
+
+// ---- display ----
+
+const CAPS: Record<string, string> = {
+  ctrl: "Ctrl",
+  alt: "Alt",
+  meta: "Meta",
+  shift: "Shift",
+  esc: "Esc",
+  enter: "Enter",
+  tab: "Tab",
+  backtab: "Shift Tab",
+  backspace: "Backspace",
+  up: "Up",
+  down: "Down",
+  left: "Left",
+  right: "Right",
+  home: "Home",
+  end: "End",
+  pageup: "PgUp",
+  pagedown: "PgDn",
+  delete: "Del",
+  space: "Space",
+};
+
+/** Keycaps for a chord, left to right: `ctrl-shift-h` → Ctrl, Shift, H. A
+ *  multi-key chord separates its keys with a `then` cap. */
+export function keyCaps(chord: string): string[] {
+  const caps: string[] = [];
+  for (const [i, key] of chord.split(" ").entries()) {
+    if (i > 0) caps.push("then");
+    const parts = key.split("-");
+    // A bare `-` key splits into two empties; treat it as the key itself.
+    if (parts.every((p) => p === "")) {
+      caps.push("-");
+      continue;
+    }
+    const last = parts.pop() as string;
+    const mods = parts.filter((p) => p !== "");
+    for (const m of mods) caps.push(CAPS[m] ?? m);
+    caps.push(CAPS[last] ?? (mods.length > 0 && last.length === 1 ? last.toUpperCase() : last));
+  }
+  return caps;
+}
+
+// ---- dispatch ----
+
+/** Default leader, mirroring the TUI's `[tui].leader`. `ctrl-a` is select-all
+ *  in a browser, so a set that owns the leader `preventDefault`s it. */
+export const DEFAULT_LEADER = "ctrl-a";
+
+/** How long a partial chord waits for its next key — the TUI's
+ *  `chord_timeout_ms` default. */
+export const DEFAULT_CHORD_TIMEOUT_MS = 1000;
+
+export interface CommandSetOptions {
+  /** Canonical leader key. A set given one holds every leader press as a
+   *  pending chord, whether or not anything is bound behind it yet. */
+  leader?: string | null;
+  chordTimeoutMs?: number;
+  /** Call `preventDefault()` on a handled key. Off for the terminal's own key
+   *  handler, which swallows by returning `false` to xterm instead. */
+  preventDefault?: boolean;
+  /** Clock, for tests. */
+  now?: () => number;
+}
+
+/** A group of commands listening on one surface. Resolves a keydown to a
+ *  command the way the TUI's `ChordState` does: hold while the sequence is a
+ *  strict prefix of some binding, otherwise resolve and dispatch. */
+export class CommandSet {
+  private readonly byChord = new Map<string, Command>();
+  private readonly leader: string | null;
+  private readonly timeout: number;
+  private readonly preventDefault: boolean;
+  private readonly now: () => number;
+  private held: string[] = [];
+  private lastPress = 0;
+
+  constructor(
+    readonly commands: Command[],
+    opts: CommandSetOptions = {},
+  ) {
+    for (const c of commands) for (const k of c.keys) this.byChord.set(k, c);
+    this.leader = opts.leader ?? null;
+    this.timeout = opts.chordTimeoutMs ?? DEFAULT_CHORD_TIMEOUT_MS;
+    this.preventDefault = opts.preventDefault ?? true;
+    this.now = opts.now ?? (() => Date.now());
+    publishCommands(commands);
+  }
+
+  /** Whether any binding starts with `candidate` and continues. */
+  private isPrefix(candidate: string): boolean {
+    const marker = `${candidate} `;
+    for (const chord of this.byChord.keys()) if (chord.startsWith(marker)) return true;
+    return false;
+  }
+
+  /** Feed one keydown. Returns true when the key was consumed — dispatched, or
+   *  held as a partial chord. */
+  handle(e: KeyboardEvent): boolean {
+    const key = canonicalizeKey(e);
+    if (key === null) return false;
+    if (this.held.length > 0 && this.now() - this.lastPress > this.timeout) this.held = [];
+    const candidate = this.held.length > 0 ? `${this.held.join(" ")} ${key}` : key;
+    this.lastPress = this.now();
+
+    // The leader is a prefix by construction, so it stops being select-all
+    // before anything is bound behind it (#149 binds the first chord).
+    if (this.leader !== null && this.held.length === 0 && key === this.leader) {
+      if (isTypingTarget(e.target) && !isTerminalTextarea(e.target)) return false;
+      this.held = [key];
+      if (this.preventDefault) e.preventDefault();
+      return true;
+    }
+
+    if (this.isPrefix(candidate)) {
+      this.held.push(key);
+      if (this.preventDefault) e.preventDefault();
+      return true;
+    }
+
+    const wasChord = this.held.length > 0;
+    this.held = [];
+    const cmd = this.byChord.get(candidate);
+    if (!cmd) {
+      // A chord that resolved to nothing is still consumed: the leader took
+      // the key, so it must not also fall through to a plain binding.
+      return wasChord;
+    }
+    // Plain single-key bindings are deaf where typing happens; chorded ones are
+    // not, and neither are the pane's and the overlay's, which are only fed
+    // from the surface that owns them.
+    if (
+      !isChorded(candidate) &&
+      cmd.scope !== "pane" &&
+      cmd.scope !== "overlay" &&
+      isTypingTarget(e.target)
+    ) {
+      return false;
+    }
+    if (this.preventDefault) e.preventDefault();
+    cmd.run();
+    return true;
+  }
+}

web/src/debug.ts

@@ -2,6 +2,8 @@
 // survives reloads, flipped by a keybind (Ctrl+Shift+D), and force-enabled by
 // `?hud` in dev. A `maestro-hud-toggle` event lets the HUD re-render on change.
 
+import { CommandSet, defineCommands } from "./commands.js";
+
 const STORAGE_KEY = "maestro:hud";
 export const HUD_TOGGLE_EVENT = "maestro-hud-toggle";
 
@@ -31,12 +33,9 @@ export function toggleHud(): void {
   setHudEnabled(!isHudEnabled());
 }
 
+const hudKeys = new CommandSet(defineCommands({ "debug.toggleHud": () => toggleHud() }));
+
 /** Global keybind: Ctrl+Shift+D toggles the debug HUD. */
 export function installHudKeybind(): void {
-  window.addEventListener("keydown", (e) => {
-    if (e.ctrlKey && e.shiftKey && (e.key === "D" || e.key === "d")) {
-      e.preventDefault();
-      toggleHud();
-    }
-  });
+  window.addEventListener("keydown", (e) => hudKeys.handle(e));
 }

web/src/help.test.ts

@@ -1,14 +1,8 @@
 // @vitest-environment happy-dom
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
-import {
-  SHORTCUTS,
-  closeHelp,
-  installHelpKeybind,
-  isHelpOpen,
-  isTypingTarget,
-  openHelp,
-} from "./help.js";
+import { keyCaps, publishedCommands } from "./commands.js";
+import { closeHelp, groupedCommands, installHelpKeybind, isHelpOpen, openHelp } from "./help.js";
 
 beforeEach(() => {
   installHelpKeybind();
@@ -30,14 +24,24 @@ function rows(): string[] {
 }
 
 describe("help overlay", () => {
-  it("renders every registered shortcut, grouped", () => {
+  it("renders exactly the commands the registry has bound, grouped", () => {
     openHelp();
-    const groups = [...document.querySelectorAll(".help-group-title")].map((h) => h.textContent);
-    expect(groups).toEqual(SHORTCUTS.map((g) => g.title));
-    expect(rows()).toEqual(SHORTCUTS.flatMap((g) => g.items.map((s) => s.keys.join(" "))));
-    expect(document.querySelectorAll(".help-desc")).toHaveLength(
-      SHORTCUTS.reduce((n, g) => n + g.items.length, 0),
+    const groups = groupedCommands();
+    expect([...document.querySelectorAll(".help-group-title")].map((h) => h.textContent)).toEqual(
+      groups.map((g) => g.title),
     );
+    expect(rows()).toEqual(
+      groups.flatMap((g) => g.items.map((c) => keyCaps(c.keys[0]).join(" "))),
+    );
+    expect([...document.querySelectorAll(".help-desc")].map((d) => d.textContent)).toEqual(
+      groups.flatMap((g) => g.items.map((c) => c.label)),
+    );
+  });
+
+  it("names each row by its command id, so a row can't drift from its command", () => {
+    openHelp();
+    expect([...document.querySelectorAll<HTMLElement>(".help-row")].map((r) => r.dataset.commandId))
+      .toEqual(publishedCommands().map((c) => c.id));
   });
 
   it("opens on ? and closes on a second ?", () => {
@@ -94,19 +98,3 @@ describe("help overlay", () => {
     expect(document.querySelectorAll(".help-overlay")).toHaveLength(1);
   });
 });
-
-describe("isTypingTarget", () => {
-  it("is true for form fields and editable nodes, false otherwise", () => {
-    const el = (html: string) => {
-      const d = document.createElement("div");
-      d.innerHTML = html;
-      return d.firstElementChild as HTMLElement;
-    };
-    expect(isTypingTarget(el("<input>"))).toBe(true);
-    expect(isTypingTarget(el("<textarea></textarea>"))).toBe(true);
-    expect(isTypingTarget(el("<select></select>"))).toBe(true);
-    expect(isTypingTarget(el('<div contenteditable="true"></div>'))).toBe(true);
-    expect(isTypingTarget(el("<button></button>"))).toBe(false);
-    expect(isTypingTarget(null)).toBe(false);
-  });
-});

web/src/help.ts

@@ -1,69 +1,15 @@
 /** Keyboard-shortcut overlay (`?`), the web counterpart of the TUI's help
- *  overlay. One registry drives both the rendering and what we claim is bound,
- *  so a binding added to `main.ts` without an entry here reads as missing. */
+ *  overlay. It renders the command registry (`commands.ts`) — the same list
+ *  that dispatches the keys — so a binding can never be documented as one
+ *  thing and do another. */
 
-export interface Shortcut {
-  /** Keycaps, rendered left to right as separate <kbd>. */
-  keys: string[];
-  description: string;
-}
-
-export interface ShortcutGroup {
-  title: string;
-  items: Shortcut[];
-}
-
-export const SHORTCUTS: ShortcutGroup[] = [
-  {
-    title: "Sessions",
-    items: [
-      { keys: ["n"], description: "Open the spawn form" },
-      { keys: ["N"], description: "Spawn a session with every default resolved" },
-    ],
-  },
-  {
-    title: "Session list",
-    items: [
-      {
-        keys: ["Ctrl", "Shift", "H"],
-        description: "Move the keyboard between the session list and the pane",
-      },
-      { keys: ["j"], description: "Highlight the next session" },
-      { keys: ["k"], description: "Highlight the previous session" },
-      { keys: ["Enter"], description: "Open the highlighted session, or expand a folder" },
-      { keys: ["c"], description: "Collapse or expand the highlighted folder" },
-      { keys: ["r"], description: "Rename the highlighted session" },
-      { keys: ["x"], description: "Kill the highlighted session" },
-      { keys: ["Tab"], description: "Send the keyboard to the pane" },
-      { keys: ["Esc"], description: "Hand the keyboard back to the session list, from the pane" },
-    ],
-  },
-  {
-    title: "Help",
-    items: [
-      { keys: ["?"], description: "Show or hide this help" },
-      { keys: ["Esc"], description: "Close the help overlay or an open menu" },
-    ],
-  },
-  {
-    title: "Debug",
-    items: [{ keys: ["Ctrl", "Shift", "D"], description: "Toggle the debug HUD" }],
-  },
-];
-
-/** True when the event target swallows plain keystrokes — a form field, or the
- *  hidden textarea xterm types into. Shared with `main.ts` so every global
- *  single-key binding is deaf in the same places. */
-export function isTypingTarget(target: EventTarget | null): boolean {
-  const el = target as HTMLElement | null;
-  if (!el || typeof el.tagName !== "string") return false;
-  return (
-    el.tagName === "INPUT" ||
-    el.tagName === "TEXTAREA" ||
-    el.tagName === "SELECT" ||
-    el.isContentEditable
-  );
-}
+import {
+  CommandSet,
+  defineCommands,
+  keyCaps,
+  publishedCommands,
+  type Command,
+} from "./commands.js";
 
 let open: { el: HTMLElement; dispose: () => void } | null = null;
 
@@ -108,7 +54,7 @@ export function openHelp(): HTMLElement {
   head.append(title, close);
   panel.appendChild(head);
 
-  for (const group of SHORTCUTS) {
+  for (const group of groupedCommands()) {
     const section = document.createElement("section");
     section.className = "help-group";
     const heading = document.createElement("h3");
@@ -116,19 +62,20 @@ export function openHelp(): HTMLElement {
     heading.textContent = group.title;
     const list = document.createElement("dl");
     list.className = "help-list";
-    for (const item of group.items) {
+    for (const cmd of group.items) {
       const row = document.createElement("div");
       row.className = "help-row";
+      row.dataset.commandId = cmd.id;
       const keys = document.createElement("dt");
       keys.className = "help-keys";
-      for (const key of item.keys) {
+      for (const key of keyCaps(cmd.keys[0])) {
         const cap = document.createElement("kbd");
         cap.textContent = key;
         keys.appendChild(cap);
       }
       const desc = document.createElement("dd");
       desc.className = "help-desc";
-      desc.textContent = item.description;
+      desc.textContent = cmd.label;
       row.append(keys, desc);
       list.appendChild(row);
     }
@@ -153,6 +100,26 @@ export function openHelp(): HTMLElement {
   return el;
 }
 
+/** The registry's commands, in registry order, bucketed into the help
+ *  overlay's sections. Groups appear in the order their first command does. */
+export function groupedCommands(): { title: string; items: Command[] }[] {
+  const groups: { title: string; items: Command[] }[] = [];
+  for (const cmd of publishedCommands()) {
+    let group = groups.find((g) => g.title === cmd.group);
+    if (!group) {
+      group = { title: cmd.group, items: [] };
+      groups.push(group);
+    }
+    group.items.push(cmd);
+  }
+  return groups;
+}
+
+// The overlay's own two commands. `help.close` is `overlay`-scoped: it is only
+// fed keys while the dialog is up.
+const helpKeys = new CommandSet(defineCommands({ "help.toggle": () => toggleHelp() }));
+const overlayKeys = new CommandSet(defineCommands({ "help.close": () => closeHelp() }));
+
 let installed = false;
 
 /** Global keybind: `?` toggles the overlay, Escape closes it. Idempotent, so a
@@ -161,16 +128,7 @@ export function installHelpKeybind(): void {
   if (installed) return;
   installed = true;
   window.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && open) {
-      e.preventDefault();
-      closeHelp();
-      return;
-    }
-    // Shift is how `?` is typed on most layouts; the others would be a
-    // different binding entirely.
-    if (e.key !== "?" || e.ctrlKey || e.altKey || e.metaKey) return;
-    if (isTypingTarget(e.target)) return;
-    e.preventDefault();
-    toggleHelp();
+    if (open && overlayKeys.handle(e)) return;
+    helpKeys.handle(e);
   });
 }

web/src/kit.ts

@@ -129,7 +129,6 @@ export function renderKit(): HTMLElement {
       "--muted",
       "--faint",
       "--accent",
-      "--preview",
       "--danger",
       "--warn",
     ];

web/src/main.ts

@@ -6,7 +6,8 @@ import { renderSidebar } from "./catalog.js";
 import { ConnectionPool } from "./connections.js";
 import { installDrawer, installDrawerSwipe, requestToggleDrawer } from "./drawer.js";
 import { installHudKeybind } from "./debug.js";
-import { installHelpKeybind, isHelpOpen, isTypingTarget } from "./help.js";
+import { installHelpKeybind, isHelpOpen } from "./help.js";
+import { CommandSet, DEFAULT_LEADER, defineCommands } from "./commands.js";
 import { DaemonLink } from "./daemonLink.js";
 import { CatalogStore } from "./events.js";
 import { installRestartOverlay } from "./restartOverlay.js";
@@ -361,37 +362,48 @@ async function requestFastForward(): Promise<void> {
   });
 }
 
-// Keyboard pair (#67): `n` opens the spawn modal, `N` fast-forwards a spawn.
-// Ignored while typing anywhere (form fields, the terminal's hidden
-// textarea, search) so an attached session's keys are never hijacked.
-document.addEventListener("keydown", (e) => {
-  if (e.ctrlKey || e.altKey || e.metaKey) return;
-  if (isTypingTarget(e.target)) return;
-  // The help overlay owns the keyboard while it is up.
-  if (isHelpOpen()) return;
-  if (e.key === "n") {
-    e.preventDefault();
-    requestOpenSpawn();
-  } else if (e.key === "N") {
-    e.preventDefault();
-    void requestFastForward();
-  }
-});
+// The global half of the command registry (#148). Two sets, because they
+// differ in one thing: the help overlay owns the keyboard while it is up, so
+// the plain keys go deaf behind it while the focus chord does not — an
+// attached terminal must never be able to trap the focus keys.
+//
+// `n` opens the spawn modal, `N` fast-forwards a spawn (#67). Both are plain
+// keys, so `isTypingTarget` keeps them out of form fields and the terminal's
+// hidden textarea.
+const spawnKeys = new CommandSet(
+  defineCommands({
+    "spawn.open": () => requestOpenSpawn(),
+    "spawn.fastForward": () => void requestFastForward(),
+  }),
+);
 
 // Ctrl+Shift+H moves the keyboard between the session list and the pane, the
 // web counterpart of the TUI's `ctrl-w h`. It has to be a chord: an attached
 // terminal owns every plain keystroke, so nothing unmodified could ever get
 // the focus back out of it.
+//
+// This set also owns the leader (`ctrl-a`, the TUI's default): it holds the
+// key as a partial chord and takes select-all off it, so the escape hatch
+// docs/COMMAND-BAR.md describes has somewhere to land (#149).
+const focusKeys = new CommandSet(
+  defineCommands({
+    "focus.toggle": () => {
+      if (sidebar.hasListFocus()) {
+        pool.focusTerminal();
+      } else {
+        drawer.open(); // no-op on desktop; on mobile the list is off-canvas
+        sidebar.focusList();
+      }
+    },
+  }),
+  { leader: DEFAULT_LEADER },
+);
+
 window.addEventListener("keydown", (e) => {
-  if (!e.ctrlKey || !e.shiftKey || e.altKey || e.metaKey) return;
-  if (e.key !== "H" && e.key !== "h") return;
-  e.preventDefault();
-  if (sidebar.hasListFocus()) {
-    pool.focusTerminal();
-  } else {
-    drawer.open(); // no-op on desktop; on mobile the list is off-canvas
-    sidebar.focusList();
-  }
+  if (focusKeys.handle(e)) return;
+  // The help overlay owns the keyboard while it is up.
+  if (isHelpOpen()) return;
+  spawnKeys.handle(e);
 });
 
 // Tab in the session list hands the keyboard to the pane; Escape in the pane

web/src/multiview.test.ts

@@ -36,7 +36,6 @@ function fakeSidebar(): SidebarHandle {
     el: document.createElement("aside"),
     setActive() {},
     setHighlights() {},
-    setPreview() {},
     focusList() {},
     hasListFocus() {
       return false;

web/src/multiview.ts

@@ -221,12 +221,6 @@ export function createMultiView(opts: MultiViewOptions): MultiView {
     const tab = activeTab(layout);
     for (const pane of canvas.querySelectorAll<HTMLElement>(".mv-pane")) {
       pane.classList.toggle("is-focused", pane.dataset.leafId === tab.focusedLeafId);
-      // The previewed pane's titlebar wears the preview colour instead of the
-      // accent tint a focused pane gets (docs/PREVIEW.md).
-      pane.classList.toggle(
-        "is-preview",
-        preview !== null && pane.dataset.sessionId === preview.sessionId,
-      );
     }
     // A preview is not a focused pane: reporting it would clear the session's
     // `AwaitingInput` glow just because the operator scrolled past it.
@@ -235,9 +229,6 @@ export function createMultiView(opts: MultiViewOptions): MultiView {
       open: realOpenSessions(),
       focused: focusedLeafSession(),
     });
-    // The row the preview came from wears the same colour, so the sidebar and
-    // the pane read as one thing rather than two unrelated highlights.
-    sidebar.setPreview(preview?.sessionId ?? null);
   }
 
   function focusLeaf(leafId: string): void {
@@ -558,7 +549,6 @@ export function createMultiView(opts: MultiViewOptions): MultiView {
       if (!preview) pool.setFocus(null);
       canvas.appendChild(renderWelcome());
       sidebar.setHighlights({ open: realOpenSessions(), focused: null });
-      sidebar.setPreview(preview?.sessionId ?? null);
       persist();
       return;
     }
@@ -598,7 +588,6 @@ export function createMultiView(opts: MultiViewOptions): MultiView {
 
     const pane = buildPane(focused);
     pane.el.classList.add("is-focused"); // the only pane — never dimmed
-    if (preview && focused.sessionId === preview.sessionId) pane.el.classList.add("is-preview");
     wrap.appendChild(pane.el);
     canvas.appendChild(wrap);
 
@@ -609,7 +598,6 @@ export function createMultiView(opts: MultiViewOptions): MultiView {
     );
     if (!preview) pool.setFocus(focused.sessionId ?? null);
     sidebar.setHighlights({ open: realOpenSessions(), focused: focused.sessionId ?? null });
-    sidebar.setPreview(preview?.sessionId ?? null);
   }
 
   function closeSession(sessionId: string): void {

web/src/preview.test.ts

@@ -45,17 +45,11 @@ function fakePool(): Spy {
   return { pool, visible: () => visible, focusCalls, mountedWithFocus };
 }
 
-/** Last value the controller pushed to `SidebarHandle.setPreview`. */
-const previewRow: { id: string | null } = { id: null };
-
 function fakeSidebar(): SidebarHandle {
   return {
     el: document.createElement("aside"),
     setActive() {},
     setHighlights() {},
-    setPreview(id: string | null) {
-      previewRow.id = id;
-    },
     focusList() {},
     hasListFocus() {
       return false;
@@ -94,7 +88,6 @@ describe("sidebar preview", () => {
   beforeEach(() => {
     stubFetch();
     document.body.replaceChildren();
-    previewRow.id = null;
   });
 
   afterEach(() => {
@@ -117,23 +110,6 @@ describe("sidebar preview", () => {
     expect(serializeLayout(layout)).toEqual(before);
   });
 
-  it("marks the previewed pane and its sidebar row, and unmarks them after", () => {
-    const layout = twoTabs();
-    const spy = fakePool();
-    const mv = makeMv(layout, spy.pool);
-
-    mv.previewSession("s1");
-    expect(previewRow.id).toBe("s1");
-    expect(mv.el.querySelectorAll(".mv-pane.is-preview")).toHaveLength(1);
-    expect(
-      (mv.el.querySelector(".mv-pane.is-preview") as HTMLElement).dataset.sessionId,
-    ).toBe("s1");
-
-    mv.previewSession(null);
-    expect(previewRow.id).toBeNull();
-    expect(mv.el.querySelectorAll(".mv-pane.is-preview")).toHaveLength(0);
-  });
-
   it("shows a session no pane holds in a throwaway tab that leaves no trace", () => {
     const layout = twoTabs();
     const before = serializeLayout(layout);

web/src/styles.css

@@ -87,30 +87,6 @@
   --accent-tint: oklch(0.92 0.005 256 / 0.1);
   --accent-ring: oklch(0.92 0.005 256 / 0.5);
 
-  /* preview (docs/PREVIEW.md): a provisional view needs a colour that is not
-     the accent, because the accent is what says "this is the one you picked".
-     Defined once, off a single hue variable, so a palette whose accent already
-     sits on that hue can move it (see periwinkle/orchid below); `light-dark()`
-     keeps the light pair here instead of in all eighteen theme blocks. */
-  --preview-h: 305;
-  --preview: light-dark(
-    oklch(0.55 0.16 var(--preview-h)),
-    oklch(0.78 0.14 var(--preview-h))
-  );
-  --preview-ink: light-dark(
-    oklch(0.99 0.005 var(--preview-h)),
-    oklch(0.19 0.045 var(--preview-h))
-  );
-  /* Opaque, not a wash: session rows read as fills, and a fill has to land on
-     the same colour whatever tier the row was already painted. `--accent-fill`
-     is the same recipe on the accent, so the two tiers differ by hue alone. */
-  --preview-tint: color-mix(in oklab, var(--preview) 30%, var(--surface-2));
-  --accent-fill: color-mix(in oklab, var(--accent) 30%, var(--surface-2));
-  --preview-ring: light-dark(
-    oklch(0.55 0.16 var(--preview-h) / 0.5),
-    oklch(0.78 0.14 var(--preview-h) / 0.6)
-  );
-
   --live: oklch(0.84 0.17 152);
   --live-glow: oklch(0.84 0.17 152 / 0.55);
 
@@ -280,9 +256,6 @@
   --accent-ink: oklch(0.18 0.04 278);
   --accent-tint: oklch(0.75 0.125 275 / 0.14);
   --accent-ring: oklch(0.75 0.125 275 / 0.55);
-  /* This accent is already violet, so preview moves to cyan to stay legible
-     as "not the accent". Set once here: the light blocks below don't touch it. */
-  --preview-h: 195;
   --term-bg: oklch(0.155 0.018 278);
 }
 :root[data-palette="periwinkle"][data-theme="light"],
@@ -464,8 +437,6 @@
   --accent-ink: oklch(0.22 0.05 310);
   --accent-tint: oklch(0.78 0.13 310 / 0.14);
   --accent-ring: oklch(0.78 0.13 310 / 0.55);
-  /* Same collision as periwinkle: an orchid accent needs a non-purple preview. */
-  --preview-h: 195;
   --term-bg: oklch(0.155 0.014 305);
 }
 :root[data-palette="orchid"][data-theme="light"],
@@ -1143,42 +1114,35 @@ textarea {
   border-radius: var(--r-1);
   color: var(--ink);
   position: relative;
-  /* No transition on `background`: it is what hover, the keyboard cursor and
-     the preview all paint, and easing it puts a visible delay between the input
-     landing on a row and the row admitting it. `.is-active`'s ring still eases
-     — being open in a pane is a state, not a response to the pointer. */
+  /* No transition on `background`: it is what hover paints, and easing it puts
+     a visible delay between the pointer landing on a row and the row admitting
+     it. The ring (`.is-highlighted`, `.is-active`) still eases — that one
+     follows a keyboard walk, not the pointer. */
   transition: box-shadow var(--dur-fast) var(--ease-out);
 }
 
-/* Session-row tiers (docs/SIDEBAR.md). A row is usually several of these at
-   once, so every qualifier below sits in `:where()`: each rule is worth the
-   same specificity and the ladder is decided purely by the order they appear
-   in, latest wins. Add a tier where it belongs in that order, not by piling on
-   another class to out-weigh the rule above it. Each tier paints a background
-   and nothing else — the list says all of this with fill, never an edge. */
-
-/* 1. Alive. A faint wash on the row itself — no per-row status icon. */
-.tree-leaf:where([data-status="running"]) {
+/* "Alive" reads as a faint wash on the row itself — no per-row status icon. */
+.tree-leaf[data-status="running"] {
   background: color-mix(in oklab, var(--accent) 6%, transparent);
 }
 
-/* 2. Under the pointer, or under the keyboard walk. Both are what previews a
-   row (docs/PREVIEW.md), so both read in the preview hue — never the accent,
-   which belongs to the row actually open. */
-.tree-leaf:where(:hover, .is-highlighted) {
-  background: color-mix(in oklab, var(--preview) 12%, var(--surface-2));
+.tree-leaf:hover {
+  background: var(--surface-2);
 }
 
-.tree-leaf:where([data-status="running"]):where(:hover, .is-highlighted) {
-  background: color-mix(in oklab, var(--preview) 18%, var(--surface-2));
+.tree-leaf[data-status="running"]:hover {
+  background: color-mix(in oklab, var(--accent) 13%, var(--surface-2));
 }
 
-.tree-leaf:where(:focus-visible) {
+.tree-leaf:focus-visible {
   outline: none;
   background: color-mix(in oklab, var(--accent) 16%, var(--surface-2));
 }
 
-/* A folder row previews nothing, so its cursor stays a ring. */
+/* Where the keyboard walk (j/k) is standing. Distinct from `.is-active`: this
+   is a cursor, not a statement about what is mounted, so it reads as a ring
+   rather than a fill and the two can sit on the same row. */
+.tree-leaf.is-highlighted,
 .tree-folder-header.is-highlighted {
   box-shadow: inset 0 0 0 2px var(--accent-ring);
 }
@@ -1187,26 +1151,17 @@ textarea {
   outline: none;
 }
 
-/* 3. Open in some pane, but not the focused one (issue #33). */
-.tree-leaf:where(.is-open) {
-  background: color-mix(in oklab, var(--accent) 6%, transparent);
-}
-
-/* 4. The session currently mounted in the content pane. */
-.tree-leaf:where(.is-active) {
-  background: var(--accent-fill);
+/* The session currently mounted in the content pane. */
+.tree-leaf.is-active,
+.tree-leaf.is-active[data-status="running"] {
+  background: var(--accent-tint);
+  box-shadow: inset 0 0 0 1px var(--accent-ring);
 }
 
 .tree-leaf.is-active .leaf-name {
   color: var(--ink);
 }
 
-/* 5. The row the content pane is previewing right now. Last, so previewing a
-   session that is already open still reads as provisional. */
-.tree-leaf:where(.is-previewing) {
-  background: var(--preview-tint);
-}
-
 /* Exited sessions recede: dimmed name + an "exited" badge carry status, so it's
    never the running tint's absence alone doing the work. */
 .tree-leaf[data-status="dead"] {
@@ -2930,14 +2885,10 @@ input.leaf-rename:focus {
 }
 
 /* Preview (docs/PREVIEW.md): the content pane is showing a session the
-   operator only highlighted, so it reads as provisional — the preview hue on
-   the pane's titlebar, a dashed tab, a dashed inset ring on the canvas — and
-   reverts when the highlight moves. The hue is deliberately not the accent:
-   the accent means "this is what you picked", which a preview is not. */
+   operator only highlighted, so it reads as provisional — a dashed tab and a
+   dashed inset ring on the canvas — and reverts when the highlight moves. */
 .mv-tab.is-preview {
   border-style: dashed;
-  border-color: var(--preview-ring);
-  color: var(--preview);
   font-style: italic;
 }
 .mv.mv-previewing .mv-canvas::before {
@@ -2950,8 +2901,8 @@ input.leaf-rename:focus {
   border-radius: var(--r-1);
   font: 500 var(--fs-11) / 1.5 var(--font-mono);
   letter-spacing: 0.04em;
-  color: var(--preview-ink);
-  background: var(--preview);
+  color: var(--accent-ink);
+  background: var(--accent);
   opacity: 0.85;
   pointer-events: none;
 }
@@ -2960,7 +2911,7 @@ input.leaf-rename:focus {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  border: 1px dashed var(--preview-ring);
+  border: 1px dashed var(--accent-ring);
   border-radius: var(--r-1);
   z-index: var(--z-sticky);
 }
@@ -3078,15 +3029,6 @@ input.leaf-rename:focus {
 .mv-pane:not(.is-focused) .attach-header {
   opacity: 0.7;
 }
-/* The previewed pane's titlebar carries the preview hue, so the chip is not the
-   only thing saying the pane is provisional — and so it is never mistaken for
-   the accent tint of the pane the operator actually focused. It keeps full
-   strength even though a preview never takes focus. */
-.mv-pane.is-preview .attach-header,
-.mv-pane.is-preview.is-focused .attach-header {
-  background: color-mix(in oklab, var(--preview) 34%, var(--surface));
-  opacity: 1;
-}
 /* A pane with no session yet: a quiet hint rather than blank terminal black. */
 .mv-pane-empty {
   flex: 1;
@@ -3176,6 +3118,13 @@ input.leaf-rename:focus {
   border-radius: var(--r-1);
 }
 
+/* sidebar two-tier highlight (issue #33).
+   .is-active = focused pane (loud, from existing rule); .is-open = open
+   elsewhere (quiet). */
+.tree-leaf.is-open {
+  background: color-mix(in oklab, var(--accent) 6%, transparent);
+}
+
 /* =========================================================================
    multi-view mobile (#35): below 860px only the focused pane is shown — no tab
    bar, no pane switcher; the sidebar drawer (☰) is the navigation.