Merge remote-tracking branch 'origin/main' into colors

# Conflicts:
#	web/src/catalog.ts
#	web/src/styles.css

crates/maestro-config/src/lib.rs

@@ -174,10 +174,20 @@ pub struct TuiSection {
 /// Palette presets supported by the TUI's `[tui].theme` setting.
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum TuiTheme {
-    /// The terminal-native dark palette and the default.
+    /// The graphite dark palette and the default.
     Dark,
     /// A high-contrast light palette.
     Light,
+    /// Ice Cyan — cyan accent on the graphite base.
+    IceCyan,
+    /// Periwinkle — indigo base, blue-violet accent.
+    Periwinkle,
+    /// Amber Phosphor — CRT amber on warm graphite.
+    AmberPhosphor,
+    /// Ember — warm orange-red accent.
+    Ember,
+    /// Orchid — muted violet accent.
+    Orchid,
     /// Named ANSI colours, allowing the terminal to provide the colour set.
     Ansi,
     /// Solarized Dark.
@@ -204,6 +214,11 @@ pub enum TuiTheme {
 pub const TUI_THEMES: &[(&str, TuiTheme)] = &[
     ("dark", TuiTheme::Dark),
     ("light", TuiTheme::Light),
+    ("ice-cyan", TuiTheme::IceCyan),
+    ("periwinkle", TuiTheme::Periwinkle),
+    ("amber-phosphor", TuiTheme::AmberPhosphor),
+    ("ember", TuiTheme::Ember),
+    ("orchid", TuiTheme::Orchid),
     ("ansi", TuiTheme::Ansi),
     ("solarized-dark", TuiTheme::SolarizedDark),
     ("solarized-light", TuiTheme::SolarizedLight),

crates/maestro-tui/src/app.rs

@@ -601,9 +601,27 @@ impl App {
         Some(None)
     }
 
-    /// Put the spawn form up with a fresh draft behind it.
+    /// Put the spawn form up with a fresh draft behind it, preselecting the
+    /// project of the session the operator was last on — so `n` then Enter
+    /// spawns another session there, the way "spawn similar" would. A
+    /// worktree session seeds its *base repository*, not its checkout: the
+    /// daemon never adopts an existing worktree (docs/WORKTREES.md), same
+    /// rule as web/src/spawnSimilar.ts.
     fn open_spawn_modal(&mut self) {
-        self.draft = Some(DraftPane::default());
+        let seed_cwd = self.state.active_session().and_then(|sid| {
+            self.catalog
+                .snapshot()
+                .sessions
+                .iter()
+                .find(|s| s.id == sid)
+                .map(|s| match &s.worktree {
+                    Some(wt) => wt.base_repo.clone(),
+                    None => s.cwd.clone(),
+                })
+        });
+        let mut draft = DraftPane::default();
+        draft.seed_cwd = seed_cwd;
+        self.draft = Some(draft);
         self.state.open_spawn_modal();
     }
 
@@ -860,6 +878,9 @@ impl App {
             return;
         };
         draft.home_dir = home_dir;
+        // The fast path resolved its own project; its pick wins over the
+        // focused session's, so the seed never lands on top of it.
+        draft.seed_cwd = None;
         if !presets.is_empty() {
             draft.set_presets(presets);
         }
@@ -1676,6 +1697,41 @@ mod tests {
         assert_eq!(draft.command(), "claude");
     }
 
+    /// Opening the form preselects the project of the session in the pane, so
+    /// `n` then Enter spawns another session there.
+    #[test]
+    fn opening_the_spawn_modal_seeds_the_focused_sessions_project() {
+        use maestro_protocol::{CatalogEvent, SessionWorktree};
+
+        let sid = Uuid::from_u128(21);
+        let mut app = make_app();
+        app.catalog.apply_event(CatalogEvent::Snapshot {
+            sessions: vec![test_session(sid, "/repos/maestro")],
+        });
+        app.state.attach_to_focused(sid);
+        app.dispatch(Action::OpenSpawnModal);
+        assert_eq!(
+            app.draft.as_ref().unwrap().seed_cwd.as_deref(),
+            Some(std::path::Path::new("/repos/maestro"))
+        );
+
+        // A worktree session seeds its base repository: the daemon never
+        // adopts an existing worktree (docs/WORKTREES.md).
+        let mut wt_session = test_session(sid, "/repos/maestro/worktrees/flugelhorn");
+        wt_session.worktree = Some(SessionWorktree {
+            base_repo: "/repos/maestro".into(),
+            path: "/repos/maestro/worktrees/flugelhorn".into(),
+        });
+        app.catalog.apply_event(CatalogEvent::Snapshot {
+            sessions: vec![wt_session],
+        });
+        app.dispatch(Action::OpenSpawnModal);
+        assert_eq!(
+            app.draft.as_ref().unwrap().seed_cwd.as_deref(),
+            Some(std::path::Path::new("/repos/maestro"))
+        );
+    }
+
     /// A valid form flows through: pick a project (set directly — the picker
     /// itself is covered in `draft.rs`), select the custom tile, type a
     /// command, then submit from the Spawn row.
@@ -1689,11 +1745,11 @@ mod tests {
         draft.base_repo = Some(std::path::PathBuf::from("/srv/work"));
         draft.probed_cwd = Some(std::path::PathBuf::from("/srv/work"));
         draft.selected_preset = draft.presets.len() - 1; // custom
-        app.handle_draft_input(&InputKey::Tab); // preset → custom command
+        app.handle_draft_input(&InputKey::Tab); // dir picker → preset
+        app.handle_draft_input(&InputKey::Tab); // → custom command
         for c in "claude".chars() {
             app.handle_draft_input(&InputKey::char(c));
         }
-        app.handle_draft_input(&InputKey::Tab); // → dir picker
         app.handle_draft_input(&InputKey::Tab); // → name
         for c in "crimson-otter".chars() {
             app.handle_draft_input(&InputKey::char(c));

crates/maestro-tui/src/config.rs

@@ -80,6 +80,11 @@ impl TuiConfig {
         let palette = match section.theme.unwrap_or(TuiTheme::Dark) {
             TuiTheme::Dark => Palette::DARK,
             TuiTheme::Light => Palette::LIGHT,
+            TuiTheme::IceCyan => Palette::ICE_CYAN,
+            TuiTheme::Periwinkle => Palette::PERIWINKLE,
+            TuiTheme::AmberPhosphor => Palette::AMBER_PHOSPHOR,
+            TuiTheme::Ember => Palette::EMBER,
+            TuiTheme::Orchid => Palette::ORCHID,
             TuiTheme::Ansi => Palette::ANSI,
             TuiTheme::SolarizedDark => Palette::SOLARIZED_DARK,
             TuiTheme::SolarizedLight => Palette::SOLARIZED_LIGHT,
@@ -172,6 +177,11 @@ mod tests {
         for (theme, expected) in [
             (TuiTheme::Dark, Palette::DARK),
             (TuiTheme::Light, Palette::LIGHT),
+            (TuiTheme::IceCyan, Palette::ICE_CYAN),
+            (TuiTheme::Periwinkle, Palette::PERIWINKLE),
+            (TuiTheme::AmberPhosphor, Palette::AMBER_PHOSPHOR),
+            (TuiTheme::Ember, Palette::EMBER),
+            (TuiTheme::Orchid, Palette::ORCHID),
             (TuiTheme::Ansi, Palette::ANSI),
             (TuiTheme::SolarizedDark, Palette::SOLARIZED_DARK),
             (TuiTheme::SolarizedLight, Palette::SOLARIZED_LIGHT),

crates/maestro-tui/src/draft.rs

@@ -221,6 +221,11 @@ pub struct DraftPane {
     pub cwd_raw_visible: bool,
     pub cwd_raw: crate::text_input::TextInput,
     pub picked_cwd: Option<PathBuf>,
+    /// Directory to preselect once the project scan lands — the project of
+    /// the session the operator was last looking at, so `n` then Enter
+    /// respawns there without touching the picker. Consumed by the first
+    /// [`Self::set_projects`]; `None` once applied or when nothing seeded it.
+    pub seed_cwd: Option<PathBuf>,
     /// The repository picked in step one ([`group_key`] of its main box),
     /// `None` until a box is picked. Looked up fresh in `groups` rather than
     /// cached, so a project-list refresh can't leave it stale.
@@ -293,6 +298,7 @@ impl Default for DraftPane {
             cwd_raw_visible: false,
             cwd_raw: crate::text_input::TextInput::default(),
             picked_cwd: None,
+            seed_cwd: None,
             selected_group_key: None,
             worktree_choice: WorktreeChoice::New,
             name: crate::text_input::TextInput::default(),
@@ -315,7 +321,9 @@ impl Default for DraftPane {
             branches_for: None,
             needs_branches: false,
             error: None,
-            focused_field: DraftField::Preset,
+            // The picker owns the keyboard on open: typing filters projects
+            // straight away, and Tab from here reaches the command tiles.
+            focused_field: DraftField::DirPicker,
             home_dir: String::new(),
         }
     }
@@ -358,6 +366,26 @@ impl DraftPane {
             })
             .collect();
         self.highlighted = self.highlighted.min(self.entry_count().saturating_sub(1));
+        self.apply_seed_cwd();
+    }
+
+    /// Preselect the seeded directory now that the scan has landed: highlight
+    /// its repository box and pick it, so Enter from the untouched picker
+    /// spawns there. A seed no box matches is dropped — the operator picks by
+    /// hand, exactly as before.
+    fn apply_seed_cwd(&mut self) {
+        let Some(seed) = self.seed_cwd.take() else {
+            return;
+        };
+        let hit = self.visible_groups().iter().enumerate().find_map(|(i, g)| {
+            let matches = g.main.path == seed || g.worktrees.iter().any(|w| w.project.path == seed);
+            matches.then(|| (i, (*g).clone()))
+        });
+        let Some((index, group)) = hit else {
+            return;
+        };
+        self.highlighted = index;
+        self.select_group(&group);
     }
 
     /// Fill the local name batch from `GET /api/names`, seeding the field
@@ -705,14 +733,14 @@ impl DraftPane {
     }
 
     fn field_order(&self) -> Vec<DraftField> {
-        let mut order = vec![DraftField::Preset];
-        if self.is_custom() {
-            order.push(DraftField::CustomCommand);
-        }
-        order.push(DraftField::DirPicker);
+        let mut order = vec![DraftField::DirPicker];
         if self.cwd_raw_visible {
             order.push(DraftField::CwdRaw);
         }
+        order.push(DraftField::Preset);
+        if self.is_custom() {
+            order.push(DraftField::CustomCommand);
+        }
         order.push(DraftField::Name);
         order.push(DraftField::Advanced);
         if !self.advanced_collapsed {
@@ -1116,15 +1144,17 @@ impl DraftPane {
             + u16::from(self.error.is_some());
         let list_capacity = (inner.height.saturating_sub(fixed)).max(1) as usize;
 
-        let mut constraints = vec![Constraint::Length(1)];
-        if show_custom {
-            constraints.push(Constraint::Length(1));
-        }
-        constraints.push(Constraint::Length(1));
+        // The picker leads the form: it is where focus lands on open, and Tab
+        // walks down from it into the command tiles.
+        let mut constraints = vec![Constraint::Length(1)]; // dir filter
         constraints.push(Constraint::Length(list_capacity as u16));
         if show_raw {
             constraints.push(Constraint::Length(1));
         }
+        constraints.push(Constraint::Length(1)); // command tiles
+        if show_custom {
+            constraints.push(Constraint::Length(1));
+        }
         constraints.push(Constraint::Length(1)); // name
         constraints.push(Constraint::Length(1)); // advanced header
         if show_wt_choice {
@@ -1163,36 +1193,6 @@ impl DraftPane {
         // Tracks where the terminal cursor belongs for the focused text field.
         let mut cursor: Option<(u16, u16)> = None;
 
-        // -- command presets ---------------------------------------------------
-        let tiles_row = next_row();
-        let mut tiles = vec![Span::raw(format!("{:<GUTTER$}", "cmd:"))];
-        for (i, preset) in self.presets.iter().enumerate() {
-            if i > 0 {
-                tiles.push(Span::raw(" "));
-            }
-            let mut style = Style::default();
-            if i == self.selected_preset {
-                style = style.add_modifier(Modifier::REVERSED);
-            }
-            tiles.push(Span::styled(format!("[{}]", preset.label), style));
-        }
-        f.render_widget(Paragraph::new(Line::from(tiles)), tiles_row);
-
-        // -- custom command (only while a custom tile is selected) -------------
-        if show_custom {
-            let row = next_row();
-            draw_gutter(f, row, "");
-            let col = draw_text_field(
-                f,
-                &self.custom_command,
-                row,
-                field_style(DraftField::CustomCommand),
-            );
-            if self.focused_field == DraftField::CustomCommand {
-                cursor = Some((col, row.y));
-            }
-        }
-
         // -- directory picker ----------------------------------------------------
         let filter_row = next_row();
         draw_gutter(f, filter_row, "dir:");
@@ -1280,6 +1280,36 @@ impl DraftPane {
             }
         }
 
+        // -- command presets ---------------------------------------------------
+        let tiles_row = next_row();
+        let mut tiles = vec![Span::raw(format!("{:<GUTTER$}", "cmd:"))];
+        for (i, preset) in self.presets.iter().enumerate() {
+            if i > 0 {
+                tiles.push(Span::raw(" "));
+            }
+            let mut style = Style::default();
+            if i == self.selected_preset {
+                style = style.add_modifier(Modifier::REVERSED);
+            }
+            tiles.push(Span::styled(format!("[{}]", preset.label), style));
+        }
+        f.render_widget(Paragraph::new(Line::from(tiles)), tiles_row);
+
+        // -- custom command (only while a custom tile is selected) -------------
+        if show_custom {
+            let row = next_row();
+            draw_gutter(f, row, "");
+            let col = draw_text_field(
+                f,
+                &self.custom_command,
+                row,
+                field_style(DraftField::CustomCommand),
+            );
+            if self.focused_field == DraftField::CustomCommand {
+                cursor = Some((col, row.y));
+            }
+        }
+
         // -- name + reroll ---------------------------------------------------------
         let name_row = next_row();
         draw_gutter(f, name_row, "name:");
@@ -1681,7 +1711,10 @@ mod tests {
 
     #[test]
     fn left_right_cycles_presets_wrapping_into_custom() {
-        let mut draft = DraftPane::default();
+        let mut draft = DraftPane {
+            focused_field: DraftField::Preset,
+            ..DraftPane::default()
+        };
         draft.on_input(&InputKey::Right);
         assert_eq!(draft.command(), "opencode");
         draft.on_input(&InputKey::Left);
@@ -1704,17 +1737,22 @@ mod tests {
         draft.selected_preset = draft.presets.len() - 1;
         assert!(draft.is_custom());
         assert_eq!(
-            draft.field_order()[..2],
-            [DraftField::Preset, DraftField::CustomCommand],
-            "custom command sits between presets and the dir picker"
+            draft.field_order()[..3],
+            [
+                DraftField::DirPicker,
+                DraftField::Preset,
+                DraftField::CustomCommand
+            ],
+            "the picker leads; custom command sits right after the tiles"
         );
+        draft.next_field(); // DirPicker → Preset
         draft.next_field();
         assert_eq!(draft.focused_field, DraftField::CustomCommand);
         typed(&mut draft, "bash -l");
         assert_eq!(draft.command(), "bash -l");
         // Tab walks past the hidden fields in order.
         draft.next_field();
-        assert_eq!(draft.focused_field, DraftField::DirPicker);
+        assert_eq!(draft.focused_field, DraftField::Name);
     }
 
     #[test]
@@ -1777,8 +1815,11 @@ mod tests {
             ],
             Utc::now(),
         );
-        draft.next_field(); // Preset → DirPicker
-        assert_eq!(draft.focused_field, DraftField::DirPicker);
+        assert_eq!(
+            draft.focused_field,
+            DraftField::DirPicker,
+            "the form opens with the project filter focused"
+        );
         typed(&mut draft, "maes");
         assert_eq!(
             draft.visible_groups().len(),
@@ -1890,6 +1931,47 @@ mod tests {
         assert_eq!(draft.on_input(&InputKey::Enter), DraftInputResult::Submit);
     }
 
+    #[test]
+    fn a_seeded_directory_is_preselected_so_one_enter_spawns_there() {
+        let mut draft = DraftPane {
+            seed_cwd: Some(PathBuf::from("/repos/other")),
+            ..DraftPane::default()
+        };
+        draft.set_projects(
+            vec![
+                project("maestro", "/repos/maestro", 1, Some("claude")),
+                project("other", "/repos/other", 2, Some("zsh")),
+            ],
+            Utc::now(),
+        );
+        assert_eq!(
+            draft.picked_cwd.as_deref(),
+            Some(Path::new("/repos/other")),
+            "the seeded project is picked before a key is pressed"
+        );
+        assert_eq!(draft.selection(), 1, "and its row is the highlighted one");
+        assert_eq!(
+            draft.on_input(&InputKey::Enter),
+            DraftInputResult::Submit,
+            "one Enter spawns in the seeded project"
+        );
+        assert_eq!(draft.picked_cwd.as_deref(), Some(Path::new("/repos/other")));
+    }
+
+    #[test]
+    fn a_seed_no_project_matches_leaves_the_picker_untouched() {
+        let mut draft = DraftPane {
+            seed_cwd: Some(PathBuf::from("/gone")),
+            ..DraftPane::default()
+        };
+        draft.set_projects(
+            vec![project("maestro", "/repos/maestro", 1, None)],
+            Utc::now(),
+        );
+        assert_eq!(draft.picked_cwd, None);
+        assert_eq!(draft.selection(), 0);
+    }
+
     #[test]
     fn dir_picker_enter_on_other_directory_never_submits_directly_97() {
         let mut draft = DraftPane::default();
@@ -2140,7 +2222,7 @@ mod tests {
         let mut terminal = Terminal::new(backend).unwrap();
         terminal.draw(|f| draft.render(f, f.area(), true)).unwrap();
         let pos = terminal.get_cursor_position().unwrap();
-        assert_eq!(pos, ratatui::layout::Position::new(GUTTER as u16 + 2, 1));
+        assert_eq!(pos, ratatui::layout::Position::new(GUTTER as u16 + 2, 0));
     }
 
     #[test]

crates/maestro-tui/src/palette.rs

@@ -16,12 +16,14 @@
 //! the selected card uses the selection surface's own state colours; the dot
 //! keeps carrying the state either way (docs/SIDEBAR.md).
 //!
-//! [`Palette::DARK`] is the default. [`Palette::LIGHT`] is its light peer and
-//! [`Palette::ANSI`] uses terminal-provided ANSI colours. The remaining
-//! presets ([`Palette::presets`]) adapt well-known editor themes — Solarized,
-//! Catppuccin, GitHub, Tokyo Night, Gruvbox, Nord, Dracula — with individual
-//! colours lifted or darkened where the originals fall short of the contrast
-//! floors asserted below.
+//! [`Palette::DARK`] — graphite, no accent hue — is the default.
+//! [`Palette::LIGHT`] is its light peer and [`Palette::ANSI`] uses
+//! terminal-provided ANSI colours. Five house presets recolour the graphite
+//! base with an accent (Ice Cyan, Periwinkle, Amber Phosphor, Ember, Orchid);
+//! the remaining presets ([`Palette::presets`]) adapt well-known editor
+//! themes — Solarized, Catppuccin, GitHub, Tokyo Night, Gruvbox, Nord,
+//! Dracula — with individual colours lifted or darkened where the originals
+//! fall short of the contrast floors asserted below.
 //!
 //! Out of scope: PTY cell colours. Those belong to the program running in the
 //! pane and pass through `pane::translate_color` verbatim.
@@ -135,73 +137,75 @@ pub struct Palette {
 }
 
 impl Palette {
-    /// The dark terminal-native palette and the default preset.
+    /// The graphite dark palette and the default preset: pure near-neutral
+    /// chrome with an ink-coloured accent, so activity colours are the only
+    /// hue on screen.
     pub const DARK: Palette = Palette {
         card: Surface {
-            bg: Color::Rgb(0x1f, 0x23, 0x2b),
-            fg: Color::Rgb(0xe5, 0xe7, 0xeb),
-            muted: Color::Rgb(0xae, 0xb7, 0xc4),
-            dim: Color::Rgb(0x85, 0x8f, 0x9e),
+            bg: Color::Rgb(0x1d, 0x1f, 0x22),
+            fg: Color::Rgb(0xe6, 0xe8, 0xeb),
+            muted: Color::Rgb(0xb1, 0xb4, 0xb9),
+            dim: Color::Rgb(0x86, 0x89, 0x8e),
             active: Color::Rgb(0x72, 0xd6, 0x87),
-            idle: Color::Rgb(0xae, 0xb7, 0xc4),
+            idle: Color::Rgb(0xb1, 0xb4, 0xb9),
             awaiting: Color::Rgb(0xf2, 0xc9, 0x5c),
             error: Color::Rgb(0xff, 0x82, 0x7a),
         },
         selection: Surface {
-            bg: Color::Rgb(0x3d, 0x51, 0x44),
-            fg: Color::Rgb(0xf3, 0xf7, 0xf4),
-            muted: Color::Rgb(0xd0, 0xd9, 0xd3),
-            dim: Color::Rgb(0xa1, 0xb0, 0xa6),
+            bg: Color::Rgb(0x3f, 0x43, 0x48),
+            fg: Color::Rgb(0xf0, 0xf2, 0xf5),
+            muted: Color::Rgb(0xce, 0xd1, 0xd5),
+            dim: Color::Rgb(0xa5, 0xa8, 0xab),
             active: Color::Rgb(0x9a, 0xf0, 0xa6),
-            idle: Color::Rgb(0xc4, 0xcf, 0xc7),
+            idle: Color::Rgb(0xd5, 0xd8, 0xdb),
             awaiting: Color::Rgb(0xf6, 0xd9, 0x78),
             error: Color::Rgb(0xff, 0xa8, 0xa3),
         },
-        chrome_bg: Color::Rgb(0x1f, 0x23, 0x2b),
-        sidebar_focus_bg: Color::Rgb(0x28, 0x30, 0x2a),
-        border_focused: Color::Rgb(0x72, 0xd6, 0x87),
-        border_unfocused: Color::Rgb(0x68, 0x73, 0x84),
-        focus_accent: Color::Rgb(0x72, 0xd6, 0x87),
-        group_row: Color::Rgb(0xb6, 0xc1, 0xd3),
-        mode_normal_bg: Color::Rgb(0x72, 0xd6, 0x87),
-        mode_normal_fg: Color::Rgb(0x1f, 0x23, 0x2b),
+        chrome_bg: Color::Rgb(0x1d, 0x1f, 0x22),
+        sidebar_focus_bg: Color::Rgb(0x28, 0x2a, 0x2d),
+        border_focused: Color::Rgb(0xe2, 0xe5, 0xe8),
+        border_unfocused: Color::Rgb(0x72, 0x75, 0x79),
+        focus_accent: Color::Rgb(0xe2, 0xe5, 0xe8),
+        group_row: Color::Rgb(0xba, 0xbe, 0xc3),
+        mode_normal_bg: Color::Rgb(0xe2, 0xe5, 0xe8),
+        mode_normal_fg: Color::Rgb(0x17, 0x1b, 0x20),
         mode_insert_bg: Color::Rgb(0xf2, 0xc9, 0x5c),
-        mode_insert_fg: Color::Rgb(0x1f, 0x23, 0x2b),
+        mode_insert_fg: Color::Rgb(0x1d, 0x1f, 0x22),
         error_text: Color::Rgb(0xff, 0x82, 0x7a),
     };
 
-    /// A high-contrast light peer to [`Self::DARK`].
+    /// A high-contrast light peer to [`Self::DARK`]: ink-on-paper graphite.
     pub const LIGHT: Palette = Palette {
         card: Surface {
             bg: Color::Rgb(0xff, 0xff, 0xff),
-            fg: Color::Rgb(0x27, 0x31, 0x3d),
-            muted: Color::Rgb(0x4c, 0x5b, 0x6b),
-            dim: Color::Rgb(0x68, 0x78, 0x8a),
+            fg: Color::Rgb(0x20, 0x24, 0x2a),
+            muted: Color::Rgb(0x56, 0x5b, 0x63),
+            dim: Color::Rgb(0x7b, 0x81, 0x89),
             active: Color::Rgb(0x21, 0x7a, 0x3c),
-            idle: Color::Rgb(0x4c, 0x5b, 0x6b),
+            idle: Color::Rgb(0x56, 0x5b, 0x63),
             awaiting: Color::Rgb(0x8f, 0x63, 0x00),
             error: Color::Rgb(0xb4, 0x23, 0x18),
         },
         selection: Surface {
-            bg: Color::Rgb(0xb5, 0xcf, 0xba),
-            fg: Color::Rgb(0x1d, 0x2a, 0x24),
-            muted: Color::Rgb(0x3f, 0x55, 0x45),
-            dim: Color::Rgb(0x52, 0x68, 0x5a),
+            bg: Color::Rgb(0xc5, 0xc7, 0xca),
+            fg: Color::Rgb(0x15, 0x19, 0x1e),
+            muted: Color::Rgb(0x43, 0x48, 0x4f),
+            dim: Color::Rgb(0x5e, 0x64, 0x6b),
             active: Color::Rgb(0x15, 0x5b, 0x2e),
-            idle: Color::Rgb(0x3f, 0x55, 0x45),
+            idle: Color::Rgb(0x38, 0x3e, 0x45),
             awaiting: Color::Rgb(0x69, 0x46, 0x00),
-            error: Color::Rgb(0xa5, 0x1d, 0x14),
+            error: Color::Rgb(0x99, 0x1a, 0x12),
         },
         chrome_bg: Color::Rgb(0xff, 0xff, 0xff),
-        sidebar_focus_bg: Color::Rgb(0xee, 0xf5, 0xef),
-        border_focused: Color::Rgb(0x21, 0x7a, 0x3c),
-        border_unfocused: Color::Rgb(0x65, 0x73, 0x6b),
-        focus_accent: Color::Rgb(0x21, 0x7a, 0x3c),
-        group_row: Color::Rgb(0x3f, 0x55, 0x45),
-        mode_normal_bg: Color::Rgb(0x21, 0x7a, 0x3c),
-        mode_normal_fg: Color::Rgb(0xff, 0xff, 0xff),
-        mode_insert_bg: Color::Rgb(0xb6, 0x81, 0x08),
-        mode_insert_fg: Color::Rgb(0x0b, 0x12, 0x0e),
+        sidebar_focus_bg: Color::Rgb(0xef, 0xf0, 0xf2),
+        border_focused: Color::Rgb(0x36, 0x3b, 0x41),
+        border_unfocused: Color::Rgb(0x76, 0x7b, 0x82),
+        focus_accent: Color::Rgb(0x36, 0x3b, 0x41),
+        group_row: Color::Rgb(0x4e, 0x53, 0x5a),
+        mode_normal_bg: Color::Rgb(0x23, 0x27, 0x2c),
+        mode_normal_fg: Color::Rgb(0xf9, 0xfa, 0xfb),
+        mode_insert_bg: Color::Rgb(0x8f, 0x63, 0x00),
+        mode_insert_fg: Color::Rgb(0xff, 0xff, 0xff),
         error_text: Color::Rgb(0xb4, 0x23, 0x18),
     };
 
@@ -556,14 +560,195 @@ impl Palette {
         error_text: Color::Rgb(0xff, 0x59, 0x59),
     };
 
+    /// Ice Cyan — signal-cyan accent on the graphite slate base.
+    pub const ICE_CYAN: Palette = Palette {
+        card: Surface {
+            bg: Color::Rgb(0x1c, 0x20, 0x25),
+            fg: Color::Rgb(0xe4, 0xe8, 0xed),
+            muted: Color::Rgb(0xaf, 0xb5, 0xbc),
+            dim: Color::Rgb(0x84, 0x8a, 0x91),
+            active: Color::Rgb(0x72, 0xd6, 0x87),
+            idle: Color::Rgb(0xaf, 0xb5, 0xbc),
+            awaiting: Color::Rgb(0xf2, 0xc9, 0x5c),
+            error: Color::Rgb(0xff, 0x82, 0x7a),
+        },
+        selection: Surface {
+            bg: Color::Rgb(0x24, 0x4d, 0x59),
+            fg: Color::Rgb(0xee, 0xf2, 0xf7),
+            muted: Color::Rgb(0xcd, 0xd1, 0xd7),
+            dim: Color::Rgb(0xa4, 0xa8, 0xae),
+            active: Color::Rgb(0x9a, 0xf0, 0xa6),
+            idle: Color::Rgb(0xd3, 0xd8, 0xde),
+            awaiting: Color::Rgb(0xf6, 0xd9, 0x78),
+            error: Color::Rgb(0xff, 0xa8, 0xa3),
+        },
+        chrome_bg: Color::Rgb(0x1c, 0x20, 0x25),
+        sidebar_focus_bg: Color::Rgb(0x26, 0x2a, 0x30),
+        border_focused: Color::Rgb(0x61, 0xe3, 0xf1),
+        border_unfocused: Color::Rgb(0x70, 0x75, 0x7b),
+        focus_accent: Color::Rgb(0x61, 0xe3, 0xf1),
+        group_row: Color::Rgb(0xb8, 0xbe, 0xc6),
+        mode_normal_bg: Color::Rgb(0x61, 0xe3, 0xf1),
+        mode_normal_fg: Color::Rgb(0x0f, 0x22, 0x2b),
+        mode_insert_bg: Color::Rgb(0xf2, 0xc9, 0x5c),
+        mode_insert_fg: Color::Rgb(0x1c, 0x20, 0x25),
+        error_text: Color::Rgb(0xff, 0x82, 0x7a),
+    };
+
+    /// Periwinkle — indigo-tinted base with a soft blue-violet accent.
+    pub const PERIWINKLE: Palette = Palette {
+        card: Surface {
+            bg: Color::Rgb(0x1d, 0x1e, 0x29),
+            fg: Color::Rgb(0xe5, 0xe7, 0xf1),
+            muted: Color::Rgb(0xb1, 0xb3, 0xc2),
+            dim: Color::Rgb(0x86, 0x88, 0x96),
+            active: Color::Rgb(0x72, 0xd6, 0x87),
+            idle: Color::Rgb(0xb1, 0xb3, 0xc2),
+            awaiting: Color::Rgb(0xf2, 0xc9, 0x5c),
+            error: Color::Rgb(0xff, 0x82, 0x7a),
+        },
+        selection: Surface {
+            bg: Color::Rgb(0x3b, 0x43, 0x6c),
+            fg: Color::Rgb(0xef, 0xf1, 0xfb),
+            muted: Color::Rgb(0xce, 0xd0, 0xdc),
+            dim: Color::Rgb(0xa5, 0xa7, 0xb2),
+            active: Color::Rgb(0x9a, 0xf0, 0xa6),
+            idle: Color::Rgb(0xd4, 0xd7, 0xe3),
+            awaiting: Color::Rgb(0xf6, 0xd9, 0x78),
+            error: Color::Rgb(0xff, 0xa8, 0xa3),
+        },
+        chrome_bg: Color::Rgb(0x1d, 0x1e, 0x29),
+        sidebar_focus_bg: Color::Rgb(0x27, 0x29, 0x35),
+        border_focused: Color::Rgb(0x97, 0xa7, 0xfd),
+        border_unfocused: Color::Rgb(0x71, 0x74, 0x80),
+        focus_accent: Color::Rgb(0x97, 0xa7, 0xfd),
+        group_row: Color::Rgb(0xba, 0xbd, 0xcc),
+        mode_normal_bg: Color::Rgb(0x97, 0xa7, 0xfd),
+        mode_normal_fg: Color::Rgb(0x12, 0x14, 0x28),
+        mode_insert_bg: Color::Rgb(0xf2, 0xc9, 0x5c),
+        mode_insert_fg: Color::Rgb(0x1d, 0x1e, 0x29),
+        error_text: Color::Rgb(0xff, 0x82, 0x7a),
+    };
+
+    /// Amber Phosphor — CRT amber on warm graphite. The awaiting colour
+    /// shifts orange so it stays distinct from the amber accent.
+    pub const AMBER_PHOSPHOR: Palette = Palette {
+        card: Surface {
+            bg: Color::Rgb(0x22, 0x1f, 0x1a),
+            fg: Color::Rgb(0xec, 0xe7, 0xe1),
+            muted: Color::Rgb(0xba, 0xb3, 0xaa),
+            dim: Color::Rgb(0x8f, 0x88, 0x7f),
+            active: Color::Rgb(0x72, 0xd6, 0x87),
+            idle: Color::Rgb(0xba, 0xb3, 0xaa),
+            awaiting: Color::Rgb(0xff, 0x9b, 0x50),
+            error: Color::Rgb(0xff, 0x82, 0x7a),
+        },
+        selection: Surface {
+            bg: Color::Rgb(0x55, 0x43, 0x26),
+            fg: Color::Rgb(0xf6, 0xf1, 0xeb),
+            muted: Color::Rgb(0xd6, 0xd0, 0xc9),
+            dim: Color::Rgb(0xad, 0xa7, 0xa0),
+            active: Color::Rgb(0x9a, 0xf0, 0xa6),
+            idle: Color::Rgb(0xdd, 0xd6, 0xcf),
+            awaiting: Color::Rgb(0xff, 0xb9, 0x72),
+            error: Color::Rgb(0xff, 0xa8, 0xa3),
+        },
+        chrome_bg: Color::Rgb(0x22, 0x1f, 0x1a),
+        sidebar_focus_bg: Color::Rgb(0x2d, 0x29, 0x25),
+        border_focused: Color::Rgb(0xf9, 0xbb, 0x51),
+        border_unfocused: Color::Rgb(0x7a, 0x73, 0x6c),
+        focus_accent: Color::Rgb(0xf9, 0xbb, 0x51),
+        group_row: Color::Rgb(0xc4, 0xbc, 0xb3),
+        mode_normal_bg: Color::Rgb(0xf9, 0xbb, 0x51),
+        mode_normal_fg: Color::Rgb(0x2f, 0x1e, 0x01),
+        mode_insert_bg: Color::Rgb(0xff, 0x9b, 0x50),
+        mode_insert_fg: Color::Rgb(0x22, 0x1f, 0x1a),
+        error_text: Color::Rgb(0xff, 0x82, 0x7a),
+    };
+
+    /// Ember — warm orange-red accent on a cleaner warm neutral.
+    pub const EMBER: Palette = Palette {
+        card: Surface {
+            bg: Color::Rgb(0x23, 0x1e, 0x1b),
+            fg: Color::Rgb(0xed, 0xe6, 0xe3),
+            muted: Color::Rgb(0xbc, 0xb2, 0xad),
+            dim: Color::Rgb(0x90, 0x87, 0x82),
+            active: Color::Rgb(0x72, 0xd6, 0x87),
+            idle: Color::Rgb(0xbc, 0xb2, 0xad),
+            awaiting: Color::Rgb(0xf2, 0xc9, 0x5c),
+            error: Color::Rgb(0xff, 0x82, 0x7a),
+        },
+        selection: Surface {
+            bg: Color::Rgb(0x5d, 0x3e, 0x30),
+            fg: Color::Rgb(0xf7, 0xf0, 0xed),
+            muted: Color::Rgb(0xd7, 0xcf, 0xcb),
+            dim: Color::Rgb(0xae, 0xa6, 0xa2),
+            active: Color::Rgb(0x9a, 0xf0, 0xa6),
+            idle: Color::Rgb(0xde, 0xd5, 0xd1),
+            awaiting: Color::Rgb(0xf6, 0xd9, 0x78),
+            error: Color::Rgb(0xff, 0xa8, 0xa3),
+        },
+        chrome_bg: Color::Rgb(0x23, 0x1e, 0x1b),
+        sidebar_focus_bg: Color::Rgb(0x2e, 0x29, 0x26),
+        border_focused: Color::Rgb(0xf7, 0x89, 0x55),
+        border_unfocused: Color::Rgb(0x7b, 0x72, 0x6e),
+        focus_accent: Color::Rgb(0xf7, 0x89, 0x55),
+        group_row: Color::Rgb(0xc6, 0xbb, 0xb6),
+        mode_normal_bg: Color::Rgb(0xf7, 0x89, 0x55),
+        mode_normal_fg: Color::Rgb(0x2a, 0x14, 0x0a),
+        mode_insert_bg: Color::Rgb(0xf2, 0xc9, 0x5c),
+        mode_insert_fg: Color::Rgb(0x23, 0x1e, 0x1b),
+        error_text: Color::Rgb(0xff, 0x82, 0x7a),
+    };
+
+    /// Orchid — muted violet accent on a faintly violet base.
+    pub const ORCHID: Palette = Palette {
+        card: Surface {
+            bg: Color::Rgb(0x21, 0x1e, 0x25),
+            fg: Color::Rgb(0xe9, 0xe6, 0xee),
+            muted: Color::Rgb(0xb6, 0xb2, 0xbd),
+            dim: Color::Rgb(0x8b, 0x87, 0x91),
+            active: Color::Rgb(0x72, 0xd6, 0x87),
+            idle: Color::Rgb(0xb6, 0xb2, 0xbd),
+            awaiting: Color::Rgb(0xf2, 0xc9, 0x5c),
+            error: Color::Rgb(0xff, 0x82, 0x7a),
+        },
+        selection: Surface {
+            bg: Color::Rgb(0x51, 0x3c, 0x63),
+            fg: Color::Rgb(0xf3, 0xf0, 0xf8),
+            muted: Color::Rgb(0xd3, 0xcf, 0xd8),
+            dim: Color::Rgb(0xa9, 0xa6, 0xaf),
+            active: Color::Rgb(0x9a, 0xf0, 0xa6),
+            idle: Color::Rgb(0xd9, 0xd5, 0xdf),
+            awaiting: Color::Rgb(0xf6, 0xd9, 0x78),
+            error: Color::Rgb(0xff, 0xa8, 0xa3),
+        },
+        chrome_bg: Color::Rgb(0x21, 0x1e, 0x25),
+        sidebar_focus_bg: Color::Rgb(0x2c, 0x28, 0x30),
+        border_focused: Color::Rgb(0xd1, 0x9f, 0xf5),
+        border_unfocused: Color::Rgb(0x76, 0x72, 0x7c),
+        focus_accent: Color::Rgb(0xd1, 0x9f, 0xf5),
+        group_row: Color::Rgb(0xc0, 0xbb, 0xc7),
+        mode_normal_bg: Color::Rgb(0xd1, 0x9f, 0xf5),
+        mode_normal_fg: Color::Rgb(0x22, 0x13, 0x2c),
+        mode_insert_bg: Color::Rgb(0xf2, 0xc9, 0x5c),
+        mode_insert_fg: Color::Rgb(0x21, 0x1e, 0x25),
+        error_text: Color::Rgb(0xff, 0x82, 0x7a),
+    };
+
     /// The default preset, retained as a named compatibility constant.
     pub const DEFAULT: Palette = Self::DARK;
 
     /// All preset names and their complete palettes.
-    pub fn presets() -> [(&'static str, Palette); 12] {
+    pub fn presets() -> [(&'static str, Palette); 17] {
         [
             ("dark", Self::DARK),
             ("light", Self::LIGHT),
+            ("ice-cyan", Self::ICE_CYAN),
+            ("periwinkle", Self::PERIWINKLE),
+            ("amber-phosphor", Self::AMBER_PHOSPHOR),
+            ("ember", Self::EMBER),
+            ("orchid", Self::ORCHID),
             ("ansi", Self::ANSI),
             ("solarized-dark", Self::SOLARIZED_DARK),
             ("solarized-light", Self::SOLARIZED_LIGHT),

docs/INSTALL.md

@@ -154,15 +154,22 @@ chord_timeout_ms = 1000      # how long to hold a partial chord like `ctrl-w`
 # want extra Insert-mode bindings)
 ```
 
-`theme` selects the complete TUI palette. `dark` is the default and follows
-Maestro's terminal-native dark product palette; `light` is its light peer;
-`ansi` uses the terminal's named ANSI colours for terminals without truecolour.
-The remaining presets adapt well-known editor themes, with individual colours
-lifted or darkened where the originals fall short of the WCAG AA contrast
-floors the palette tests assert:
+`theme` selects the complete TUI palette. `dark` is the default: Maestro's
+graphite palette, near-neutral chrome where the activity colours are the only
+hue on screen; `light` is its light peer; `ansi` uses the terminal's named
+ANSI colours for terminals without truecolour. Five house presets recolour
+the graphite base with an accent, and the remaining presets adapt well-known
+editor themes — in both groups individual colours are lifted or darkened
+where they would fall short of the WCAG AA contrast floors the palette tests
+assert:
 
 | name              | based on         |
 |-------------------|------------------|
+| `ice-cyan`        | graphite base, signal-cyan accent |
+| `periwinkle`      | indigo base, blue-violet accent   |
+| `amber-phosphor`  | warm graphite, CRT-amber accent   |
+| `ember`           | warm graphite, orange-red accent  |
+| `orchid`          | violet base, muted violet accent  |
 | `solarized-dark`  | Solarized Dark   |
 | `solarized-light` | Solarized Light  |
 | `catppuccin`      | Catppuccin Mocha |

web/src/attach.ts

@@ -5,7 +5,7 @@ import "@xterm/xterm/css/xterm.css";
 import { attachWsUrl } from "./routes.js";
 import { escapeHtml } from "./html.js";
 import { INITIAL_RECONNECT_MS, MAX_RECONNECT_MS } from "./reconnect.js";
-import { applyModsToChar, cursorSeq } from "./keys.js";
+import { applyModsToChar, cursorSeq, tildeSeq } from "./keys.js";
 import { requestToggleDrawer } from "./drawer.js";
 import { splitCommand, toolIconSvg } from "./toolIcon.js";
 import type { ClientControl, Uuid } from "./types.js";
@@ -433,11 +433,17 @@ export function createAttachConnection(
  * - `mod` is a sticky one-shot modifier toggle (Ctrl / Alt).
  * - `cursor` is a cursor/navigation key, identified by its CSI final byte, so a
  *   pending modifier can promote it to the `\x1b[1;<n><final>` form.
+ * - `tilde` is a `~`-terminated navigation key (PgUp/PgDn), identified by its
+ *   CSI parameter, whose modified form is `\x1b[<code>;<n>~`.
+ * - `char` is a literal character (the symbols the soft keyboard buries behind
+ *   a page switch), folded through a pending modifier like typed input.
  * - `seq` is a plain key (Esc, Tab) sent verbatim.
  */
 type KeyDef =
   | { label: string; mod: Modifier }
   | { label: string; cursor: CursorFinal }
+  | { label: string; tilde: number }
+  | { label: string; char: string }
   | { label: string; seq: string };
 
 type Modifier = "ctrl" | "alt";
@@ -445,14 +451,17 @@ type Modifier = "ctrl" | "alt";
 type CursorFinal = "A" | "B" | "C" | "D" | "H" | "F";
 
 /**
- * The keys the mobile soft keyboard hides, ordered to flow row-major into a
- * 5-column / 2-row grid (NAP-342 review):
+ * The keys the mobile soft keyboard hides, ordered to flow row-major into an
+ * 8-column / 2-row grid (#7):
  *
- *     Esc  Tab  Home  ↑   End
- *     Ctrl Alt   ←    ↓    →
+ *     Esc  Tab  Home  ↑   End  PgUp  -  /
+ *     Ctrl Alt   ←    ↓    →   PgDn  |  ~
  *
- * — Esc/Tab + the Ctrl/Alt sticky modifiers on the left, and the cursor keys as
- * a real-keyboard inverted-T on the right, with Home/End filling its top corners.
+ * — Esc/Tab + the Ctrl/Alt sticky modifiers on the left, the cursor keys as a
+ * real-keyboard inverted-T in the middle with Home/End filling its top corners,
+ * then the paging pair and the shell symbols that cost a soft-keyboard page
+ * switch to reach. Narrower screens scroll the bar sideways rather than
+ * shrinking the caps below a thumb's width.
  */
 const KEY_DEFS: KeyDef[] = [
   { label: "Esc", seq: "\x1b" },
@@ -460,11 +469,17 @@ const KEY_DEFS: KeyDef[] = [
   { label: "Home", cursor: "H" },
   { label: "↑", cursor: "A" },
   { label: "End", cursor: "F" },
+  { label: "PgUp", tilde: 5 },
+  { label: "-", char: "-" },
+  { label: "/", char: "/" },
   { label: "Ctrl", mod: "ctrl" },
   { label: "Alt", mod: "alt" },
   { label: "←", cursor: "D" },
   { label: "↓", cursor: "B" },
   { label: "→", cursor: "C" },
+  { label: "PgDn", tilde: 6 },
+  { label: "|", char: "|" },
+  { label: "~", char: "~" },
 ];
 
 /**
@@ -521,6 +536,16 @@ function buildKeyBar(send: (data: string) => void): KeyBar {
         send(cursorSeq(def.cursor, armed.ctrl, armed.alt));
         clearMods();
       });
+    } else if ("tilde" in def) {
+      btn.addEventListener("click", () => {
+        send(tildeSeq(def.tilde, armed.ctrl, armed.alt));
+        clearMods();
+      });
+    } else if ("char" in def) {
+      btn.addEventListener("click", () => {
+        send(applyModsToChar(def.char, armed.ctrl, armed.alt));
+        clearMods();
+      });
     } else {
       btn.addEventListener("click", () => {
         send(def.seq);

web/src/catalog.ts

@@ -24,7 +24,7 @@ import {
 } from "./activity.js";
 import type { TreeNode } from "./tree.js";
 import { buildTree } from "./tree.js";
-import { createThemeToggle } from "./theme.js";
+import { createPaletteSelect, createThemeToggle } from "./theme.js";
 import type { DaemonLink } from "./daemonLink.js";
 import { createStatusIndicator } from "./statusIndicator.js";
 
@@ -385,6 +385,7 @@ export function renderSidebar(store: CatalogStore, opts: SidebarOptions = {}): S
   helpBtn.addEventListener("click", () => toggleHelp());
   footer.appendChild(helpBtn);
   footer.appendChild(createThemeToggle());
+  footer.appendChild(createPaletteSelect());
   // DEV-only shortcut to the standalone design kit (?kit). Lets you reach it by
   // clicking inside a proxied preview (e.g. crit live) that has no address bar.
   if (import.meta.env.DEV) {

web/src/keys.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { applyModsToChar, cursorSeq, toCtrl } from "./keys.js";
+import { applyModsToChar, cursorSeq, tildeSeq, toCtrl } from "./keys.js";
 
 describe("toCtrl", () => {
   it("maps letters to their control code, case-insensitively", () => {
@@ -43,3 +43,16 @@ describe("cursorSeq", () => {
     expect(cursorSeq("A", true, true)).toBe("\x1b[1;7A");
   });
 });
+
+describe("tildeSeq", () => {
+  it("uses the bare CSI form when unmodified", () => {
+    expect(tildeSeq(5, false, false)).toBe("\x1b[5~");
+    expect(tildeSeq(6, false, false)).toBe("\x1b[6~");
+  });
+
+  it("keeps the parameter in place when modified, unlike the cursor keys", () => {
+    expect(tildeSeq(5, true, false)).toBe("\x1b[5;5~");
+    expect(tildeSeq(6, false, true)).toBe("\x1b[6;3~");
+    expect(tildeSeq(6, true, true)).toBe("\x1b[6;7~");
+  });
+});

web/src/keys.ts

@@ -23,6 +23,18 @@ export function applyModsToChar(ch: string, ctrl: boolean, alt: boolean): string
  *  pending — `\x1b[1;<n><final>`, n = 1 + alt(2) + ctrl(4) (xterm convention). */
 export function cursorSeq(final: string, ctrl: boolean, alt: boolean): string {
   if (!ctrl && !alt) return `\x1b[${final}`;
-  const n = 1 + (alt ? 2 : 0) + (ctrl ? 4 : 0);
-  return `\x1b[1;${n}${final}`;
+  return `\x1b[1;${modParam(ctrl, alt)}${final}`;
+}
+
+/** Modifier parameter of the xterm CSI forms: n = 1 + alt(2) + ctrl(4). */
+function modParam(ctrl: boolean, alt: boolean): number {
+  return 1 + (alt ? 2 : 0) + (ctrl ? 4 : 0);
+}
+
+/** Sequence for the `~`-terminated navigation keys (PgUp `5`, PgDn `6`), which
+ *  carry modifiers as `\x1b[<code>;<n>~` rather than the cursor keys' `1;<n>`
+ *  form. */
+export function tildeSeq(code: number, ctrl: boolean, alt: boolean): string {
+  if (!ctrl && !alt) return `\x1b[${code}~`;
+  return `\x1b[${code};${modParam(ctrl, alt)}~`;
 }

web/src/kit.ts

@@ -4,7 +4,7 @@
 // critiqued as a whole — buttons (including terminal-native variants for
 // review), inputs, chips, badges, session rows, and empty states.
 import "./kit.css";
-import { createThemeToggle } from "./theme.js";
+import { createPaletteSelect, createThemeToggle } from "./theme.js";
 
 function h(tag: string, className?: string, html?: string): HTMLElement {
   const el = document.createElement(tag);
@@ -102,7 +102,7 @@ export function renderKit(): HTMLElement {
   back.className = "btn btn-ghost";
   back.href = "?mock";
   back.textContent = "← back to app";
-  headerActions.append(back, createThemeToggle());
+  headerActions.append(back, createThemeToggle(), createPaletteSelect());
   header.appendChild(headerActions);
   page.appendChild(header);
 
@@ -113,7 +113,7 @@ export function renderKit(): HTMLElement {
   {
     const { el, body } = section(
       "Color tokens",
-      "Slate neutrals (hue ~256) + signal-green = alive. Swap by theme toggle.",
+      "Graphite neutrals; activity colours are the only hue. Swap by theme toggle + palette picker.",
     );
     body.classList.add("kit-swatches");
     const tokens = [

web/src/main.ts

@@ -24,7 +24,7 @@ import {
 } from "./fastForward.js";
 import { FALLBACK_PRESETS } from "./spawnForm.js";
 import { openSpawnModal } from "./spawnModal.js";
-import { spawnSimilarSeed } from "./spawnSimilar.js";
+import { spawnSimilarProjectSeed, spawnSimilarSeed } from "./spawnSimilar.js";
 import { mountHud, type Hud } from "./hud.js";
 import { emptyLayout, type Layout, openSessions } from "./layout.js";
 import { createMultiView, type MultiView } from "./multiview.js";
@@ -255,7 +255,14 @@ function requestOpenSpawn(): void {
   // (#100). "Spawn similar" and the fast-forward key below deliberately keep
   // the old behaviour: both act on the session in front of you, so a split
   // beside it is the point.
-  openSpawnModal({ onSuccess: (session) => mountSpawned(session, { newTab: true }) });
+  // The session you were last on preselects its project: `n` then Enter spawns
+  // another session there without touching the picker.
+  const focused = mv?.focusedSessionId() ?? null;
+  const current = focused ? store.snapshot().sessions.get(focused) : undefined;
+  openSpawnModal({
+    seed: current ? spawnSimilarProjectSeed(current) : undefined,
+    onSuccess: (session) => mountSpawned(session, { newTab: true }),
+  });
 }
 document.addEventListener(OPEN_SPAWN_EVENT, () => requestOpenSpawn());
 document.addEventListener(SPAWN_SIMILAR_EVENT, (ev) => {

web/src/spawnForm.ts

@@ -122,12 +122,6 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
   const form = document.createElement("form");
   form.className = "spawn-form";
   form.innerHTML = `
-    <div class="field">
-      <span class="field-label">Command</span>
-      <div class="tile-row cmd-tiles"></div>
-      <input class="raw-input cmd-raw" name="command_raw" type="text" hidden
-             placeholder="bash -l" autocomplete="off" />
-    </div>
     <div class="field">
       <span class="field-label">Project</span>
       <input class="raw-input project-filter" type="text" placeholder="Filter projects…"
@@ -139,6 +133,12 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
                placeholder="/home/user/project" inputmode="text" autocomplete="off" />
       </div>
     </div>
+    <div class="field">
+      <span class="field-label">Command</span>
+      <div class="tile-row cmd-tiles"></div>
+      <input class="raw-input cmd-raw" name="command_raw" type="text" hidden
+             placeholder="bash -l" autocomplete="off" />
+    </div>
     <div class="field">
       <span class="field-label">Name</span>
       <div class="name-row">
@@ -896,8 +896,14 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
 
     e.preventDefault();
     if (target === filterInput) {
-      const top = visibleGroups(filterInput.value)[0];
-      if (top && top.main.path !== selectedGroup?.main.path) selectProject(top);
+      // Resolve the filter to a project only when the current pick isn't one
+      // of the matches: a filter typed past it means the operator moved on,
+      // while a pick that still matches (including the seeded one the form
+      // opens with) keeps its worktree choice.
+      const visible = visibleGroups(filterInput.value);
+      const stillMatches =
+        selectedGroup != null && visible.some((g) => g.main.path === selectedGroup?.main.path);
+      if (!stillMatches && visible[0]) selectProject(visible[0]);
     }
     form.requestSubmit();
   });

web/src/spawnFormEnter.test.ts

@@ -68,9 +68,12 @@ describe("spawnForm Enter-to-submit (#97)", () => {
     for (let i = 0; i < 40; i++) await Promise.resolve();
   };
 
-  async function mount(projects: Project[]): Promise<HTMLFormElement> {
+  async function mount(
+    projects: Project[],
+    seed?: Parameters<typeof createSpawnForm>[0]["seed"],
+  ): Promise<HTMLFormElement> {
     stubFetch(projects);
-    handle = createSpawnForm({ onSuccess() {} });
+    handle = createSpawnForm({ seed, onSuccess() {} });
     document.body.appendChild(handle.el);
     await drain();
     return handle.el;
@@ -232,6 +235,24 @@ describe("spawnForm Enter-to-submit (#97)", () => {
       expect(box(form, OTHER.path).classList.contains("is-active")).toBe(true);
     });
 
+    it("submits in the seeded project rather than the freshest one", async () => {
+      // What `n` then Enter must do: the modal opens parked on the project of
+      // the session you were last on (OTHER here), even though MAESTRO's
+      // worktree is the freshest row in the list.
+      const form = await mount([MAESTRO, WT_A, OTHER], {
+        cwd: OTHER.path,
+        cwdRawVisible: false,
+      });
+      expect(box(form, OTHER.path).classList.contains("is-active")).toBe(true);
+      const spy = submitSpy();
+      form.addEventListener("submit", spy);
+
+      pressEnter(form.querySelector<HTMLInputElement>(".project-filter")!);
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(box(form, OTHER.path).classList.contains("is-active")).toBe(true);
+    });
+
     it("does not clobber an already-chosen worktree when the filter still matches it", async () => {
       const form = await mount([MAESTRO, WT_A]);
       box(form, MAESTRO.path).click();

web/src/spawnModal.test.ts

@@ -52,6 +52,16 @@ describe("spawn modal", () => {
     expect(host.querySelector(".form-actions .cancel")).toBeTruthy();
   });
 
+  it("opens with the project filter focused, ahead of the command tiles", async () => {
+    openSpawnModal({ onSuccess: () => {} });
+    await flush();
+
+    const form = modal()!.querySelector("form.spawn-form")!;
+    expect(document.activeElement).toBe(form.querySelector(".project-filter"));
+    const fields = [...form.querySelectorAll(".field .field-label")].map((el) => el.textContent);
+    expect(fields.slice(0, 2)).toEqual(["Project", "Command"]);
+  });
+
   it("titles a seeded open as a clone", async () => {
     openSpawnModal({ seed: { command: "claude" }, onSuccess: () => {} });
     await flush();

web/src/spawnModal.ts

@@ -59,6 +59,9 @@ export function openSpawnModal(opts: SpawnModalOptions): void {
     },
   });
   dialog.appendChild(form.el);
+  // The project filter owns the keyboard on open: typing narrows the list and
+  // Tab from here reaches the command tiles, matching the TUI's draft pane.
+  form.el.querySelector<HTMLInputElement>(".project-filter")?.focus();
 
   function close(): void {
     if (closeCurrent === close) closeCurrent = null;

web/src/spawnSimilar.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { spawnSimilarSeed } from "./spawnSimilar.js";
+import { spawnSimilarProjectSeed, spawnSimilarSeed } from "./spawnSimilar.js";
 import type { Session } from "./types.js";
 
 function session(overrides: Partial<Session> = {}): Session {
@@ -43,3 +43,23 @@ describe("spawnSimilarSeed (#28)", () => {
     expect(seed.name).toBeUndefined();
   });
 });
+
+describe("spawnSimilarProjectSeed", () => {
+  it("seeds the project alone, leaving command and worktree at their defaults", () => {
+    const seed = spawnSimilarProjectSeed(session());
+    expect(seed.cwd).toBe("/repos/app");
+    expect(seed.cwdRawVisible).toBe(false);
+    expect(seed.command).toBeUndefined();
+    expect(seed.worktreeEnabled).toBeUndefined();
+  });
+
+  it("seeds a worktree session's base repository", () => {
+    const seed = spawnSimilarProjectSeed(
+      session({
+        cwd: "/repos/app-worktrees/feature",
+        worktree: { path: "/repos/app-worktrees/feature", base_repo: "/repos/app" },
+      }),
+    );
+    expect(seed.cwd).toBe("/repos/app");
+  });
+});

web/src/spawnSimilar.ts

@@ -28,3 +28,17 @@ export function spawnSimilarSeed(s: Session): SpawnFormSeed {
     cwdRawVisible: false,
   };
 }
+
+/** The project half of a clone: the session's repository, nothing else.
+ *
+ *  The plain spawn modal opens on this so the picker is already parked on the
+ *  project you were last looking at — one Enter spawns there — while the
+ *  command, worktree decision and name stay at the form's own defaults. Same
+ *  base-repository rule as `spawnSimilarSeed`. */
+export function spawnSimilarProjectSeed(s: Session): SpawnFormSeed {
+  const wt = s.worktree ?? null;
+  return {
+    cwd: wt ? wt.base_repo : s.cwd,
+    cwdRawVisible: false,
+  };
+}

web/src/styles.css

@@ -1,8 +1,12 @@
 /* =========================================================================
    maestro web — design system
    Register: product (a tool; design serves the task).
-   Identity: precise, calm, alive. Monospace-as-UI; signal-green = "alive".
+   Identity: precise, calm, alive. Monospace-as-UI; graphite chrome where the
+   activity colours (green = alive) are the only hue on screen.
    Theme: dark (default) + light, all via OKLCH custom-property tokens.
+   Palette: `data-palette` on <html> swaps the accent + base tint (see the
+   "palettes" section at the end of the token area); graphite is the bare
+   document.
    ========================================================================= */
 
 :root {
@@ -63,24 +67,25 @@
   /* ---- color: dark (default) ---- */
   color-scheme: dark;
 
-  --bg: oklch(0.178 0.012 256);
-  --bg-grid: oklch(0.215 0.014 256);
-  --surface: oklch(0.214 0.014 256);
-  --surface-2: oklch(0.252 0.016 256);
-  --surface-3: oklch(0.292 0.018 256);
-  --border: oklch(0.318 0.018 256);
-  --border-strong: oklch(0.4 0.022 256);
+  --bg: oklch(0.172 0.006 256);
+  --bg-grid: oklch(0.21 0.007 256);
+  --surface: oklch(0.208 0.007 256);
+  --surface-2: oklch(0.246 0.008 256);
+  --surface-3: oklch(0.286 0.009 256);
+  --border: oklch(0.312 0.01 256);
+  --border-strong: oklch(0.395 0.012 256);
 
-  --ink: oklch(0.945 0.006 256);
-  --muted: oklch(0.722 0.014 256);
-  --faint: oklch(0.58 0.014 256);
+  --ink: oklch(0.945 0.004 256);
+  --muted: oklch(0.72 0.008 256);
+  --faint: oklch(0.58 0.008 256);
 
-  /* signal green = "alive", primary action, focus, selection */
-  --accent: oklch(0.83 0.16 152);
-  --accent-strong: oklch(0.88 0.17 152);
-  --accent-ink: oklch(0.2 0.03 256);
-  --accent-tint: oklch(0.83 0.16 152 / 0.12);
-  --accent-ring: oklch(0.83 0.16 152 / 0.55);
+  /* graphite: the accent is ink itself — primary action, focus, selection.
+     The activity colours below stay the only hue on screen. */
+  --accent: oklch(0.92 0.005 256);
+  --accent-strong: oklch(0.97 0.003 256);
+  --accent-ink: oklch(0.2 0.012 256);
+  --accent-tint: oklch(0.92 0.005 256 / 0.1);
+  --accent-ring: oklch(0.92 0.005 256 / 0.5);
 
   --live: oklch(0.84 0.17 152);
   --live-glow: oklch(0.84 0.17 152 / 0.55);
@@ -92,30 +97,30 @@
   --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
   --shadow-2:
     0 12px 28px -8px oklch(0 0 0 / 0.6), 0 2px 8px oklch(0 0 0 / 0.4);
-  --term-bg: oklch(0.158 0.012 256);
+  --term-bg: oklch(0.155 0.006 256);
 }
 
 :root[data-theme="light"],
 :root[data-theme="light"] body {
   color-scheme: light;
 
-  --bg: oklch(0.985 0.003 256);
-  --bg-grid: oklch(0.93 0.006 256);
+  --bg: oklch(0.985 0.002 256);
+  --bg-grid: oklch(0.93 0.004 256);
   --surface: oklch(1 0 0);
-  --surface-2: oklch(0.965 0.004 256);
-  --surface-3: oklch(0.93 0.006 256);
-  --border: oklch(0.892 0.008 256);
-  --border-strong: oklch(0.82 0.012 256);
+  --surface-2: oklch(0.965 0.003 256);
+  --surface-3: oklch(0.93 0.004 256);
+  --border: oklch(0.892 0.005 256);
+  --border-strong: oklch(0.82 0.008 256);
 
-  --ink: oklch(0.26 0.014 256);
-  --muted: oklch(0.47 0.016 256);
-  --faint: oklch(0.62 0.016 256);
+  --ink: oklch(0.26 0.012 256);
+  --muted: oklch(0.47 0.012 256);
+  --faint: oklch(0.62 0.012 256);
 
-  --accent: oklch(0.6 0.15 151);
-  --accent-strong: oklch(0.55 0.16 151);
-  --accent-ink: oklch(0.99 0.01 152);
-  --accent-tint: oklch(0.6 0.15 151 / 0.12);
-  --accent-ring: oklch(0.6 0.15 151 / 0.5);
+  --accent: oklch(0.27 0.01 256);
+  --accent-strong: oklch(0.2 0.01 256);
+  --accent-ink: oklch(0.985 0.002 256);
+  --accent-tint: oklch(0.27 0.01 256 / 0.1);
+  --accent-ring: oklch(0.27 0.01 256 / 0.45);
 
   --live: oklch(0.6 0.16 151);
   --live-glow: oklch(0.6 0.16 151 / 0.45);
@@ -136,23 +141,23 @@
   :root:not([data-theme]) {
     color-scheme: light;
 
-    --bg: oklch(0.985 0.003 256);
-    --bg-grid: oklch(0.93 0.006 256);
+    --bg: oklch(0.985 0.002 256);
+    --bg-grid: oklch(0.93 0.004 256);
     --surface: oklch(1 0 0);
-    --surface-2: oklch(0.965 0.004 256);
-    --surface-3: oklch(0.93 0.006 256);
-    --border: oklch(0.892 0.008 256);
-    --border-strong: oklch(0.82 0.012 256);
+    --surface-2: oklch(0.965 0.003 256);
+    --surface-3: oklch(0.93 0.004 256);
+    --border: oklch(0.892 0.005 256);
+    --border-strong: oklch(0.82 0.008 256);
 
-    --ink: oklch(0.26 0.014 256);
-    --muted: oklch(0.47 0.016 256);
-    --faint: oklch(0.62 0.016 256);
+    --ink: oklch(0.26 0.012 256);
+    --muted: oklch(0.47 0.012 256);
+    --faint: oklch(0.62 0.012 256);
 
-    --accent: oklch(0.6 0.15 151);
-    --accent-strong: oklch(0.55 0.16 151);
-    --accent-ink: oklch(0.99 0.01 152);
-    --accent-tint: oklch(0.6 0.15 151 / 0.12);
-    --accent-ring: oklch(0.6 0.15 151 / 0.5);
+    --accent: oklch(0.27 0.01 256);
+    --accent-strong: oklch(0.2 0.01 256);
+    --accent-ink: oklch(0.985 0.002 256);
+    --accent-tint: oklch(0.27 0.01 256 / 0.1);
+    --accent-ring: oklch(0.27 0.01 256 / 0.45);
 
     --live: oklch(0.6 0.16 151);
     --live-glow: oklch(0.6 0.16 151 / 0.45);
@@ -169,6 +174,311 @@
   }
 }
 
+/* ---- palettes ----
+   `data-palette` on <html> recolours the accent + base tint on top of the
+   light/dark machinery above. Graphite (the default) is the bare document.
+   Each palette ships a dark block, a pinned-light block, and a system-light
+   block; `--live`/`--danger`/`--warn` stay semantic and are not redefined
+   (except amber-phosphor, whose accent would collide with the stock warn). */
+
+/* ice-cyan: signal-cyan accent on the slate base. */
+:root[data-palette="ice-cyan"] {
+  --bg: oklch(0.178 0.012 256);
+  --bg-grid: oklch(0.215 0.014 256);
+  --surface: oklch(0.214 0.014 256);
+  --surface-2: oklch(0.252 0.016 256);
+  --surface-3: oklch(0.292 0.018 256);
+  --border: oklch(0.318 0.018 256);
+  --border-strong: oklch(0.4 0.022 256);
+  --ink: oklch(0.945 0.006 256);
+  --muted: oklch(0.722 0.014 256);
+  --faint: oklch(0.58 0.014 256);
+  --accent: oklch(0.85 0.115 205);
+  --accent-strong: oklch(0.89 0.12 205);
+  --accent-ink: oklch(0.24 0.03 230);
+  --accent-tint: oklch(0.85 0.115 205 / 0.12);
+  --accent-ring: oklch(0.85 0.115 205 / 0.55);
+  --term-bg: oklch(0.158 0.012 256);
+}
+:root[data-palette="ice-cyan"][data-theme="light"],
+:root[data-palette="ice-cyan"][data-theme="light"] body {
+  --bg: oklch(0.985 0.003 256);
+  --bg-grid: oklch(0.93 0.006 256);
+  --surface: oklch(1 0 0);
+  --surface-2: oklch(0.965 0.004 256);
+  --surface-3: oklch(0.93 0.006 256);
+  --border: oklch(0.892 0.008 256);
+  --border-strong: oklch(0.82 0.012 256);
+  --ink: oklch(0.26 0.014 256);
+  --muted: oklch(0.47 0.016 256);
+  --faint: oklch(0.62 0.016 256);
+  --accent: oklch(0.52 0.1 220);
+  --accent-strong: oklch(0.47 0.11 220);
+  --accent-ink: oklch(0.99 0.005 220);
+  --accent-tint: oklch(0.52 0.1 220 / 0.12);
+  --accent-ring: oklch(0.52 0.1 220 / 0.5);
+  --term-bg: oklch(0.165 0.012 256);
+}
+@media (prefers-color-scheme: light) {
+  :root[data-palette="ice-cyan"]:not([data-theme]) {
+    --bg: oklch(0.985 0.003 256);
+    --bg-grid: oklch(0.93 0.006 256);
+    --surface: oklch(1 0 0);
+    --surface-2: oklch(0.965 0.004 256);
+    --surface-3: oklch(0.93 0.006 256);
+    --border: oklch(0.892 0.008 256);
+    --border-strong: oklch(0.82 0.012 256);
+    --ink: oklch(0.26 0.014 256);
+    --muted: oklch(0.47 0.016 256);
+    --faint: oklch(0.62 0.016 256);
+    --accent: oklch(0.52 0.1 220);
+    --accent-strong: oklch(0.47 0.11 220);
+    --accent-ink: oklch(0.99 0.005 220);
+    --accent-tint: oklch(0.52 0.1 220 / 0.12);
+    --accent-ring: oklch(0.52 0.1 220 / 0.5);
+    --term-bg: oklch(0.165 0.012 256);
+  }
+}
+/* periwinkle: indigo base, blue-violet accent. */
+:root[data-palette="periwinkle"] {
+  --bg: oklch(0.175 0.018 278);
+  --bg-grid: oklch(0.212 0.021 278);
+  --surface: oklch(0.212 0.021 278);
+  --surface-2: oklch(0.25 0.024 278);
+  --surface-3: oklch(0.29 0.026 278);
+  --border: oklch(0.318 0.026 278);
+  --border-strong: oklch(0.4 0.028 278);
+  --ink: oklch(0.93 0.012 278);
+  --muted: oklch(0.71 0.02 278);
+  --faint: oklch(0.57 0.022 278);
+  --accent: oklch(0.75 0.125 275);
+  --accent-strong: oklch(0.79 0.13 275);
+  --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);
+  --term-bg: oklch(0.155 0.018 278);
+}
+:root[data-palette="periwinkle"][data-theme="light"],
+:root[data-palette="periwinkle"][data-theme="light"] body {
+  --bg: oklch(0.982 0.004 278);
+  --bg-grid: oklch(0.93 0.008 278);
+  --surface: oklch(1 0 0);
+  --surface-2: oklch(0.96 0.006 278);
+  --surface-3: oklch(0.93 0.008 278);
+  --border: oklch(0.885 0.01 278);
+  --border-strong: oklch(0.82 0.014 278);
+  --ink: oklch(0.27 0.02 278);
+  --muted: oklch(0.47 0.02 278);
+  --faint: oklch(0.62 0.02 278);
+  --accent: oklch(0.5 0.17 272);
+  --accent-strong: oklch(0.45 0.17 272);
+  --accent-ink: oklch(0.99 0.005 272);
+  --accent-tint: oklch(0.5 0.17 272 / 0.12);
+  --accent-ring: oklch(0.5 0.17 272 / 0.5);
+  --term-bg: oklch(0.165 0.018 278);
+}
+@media (prefers-color-scheme: light) {
+  :root[data-palette="periwinkle"]:not([data-theme]) {
+    --bg: oklch(0.982 0.004 278);
+    --bg-grid: oklch(0.93 0.008 278);
+    --surface: oklch(1 0 0);
+    --surface-2: oklch(0.96 0.006 278);
+    --surface-3: oklch(0.93 0.008 278);
+    --border: oklch(0.885 0.01 278);
+    --border-strong: oklch(0.82 0.014 278);
+    --ink: oklch(0.27 0.02 278);
+    --muted: oklch(0.47 0.02 278);
+    --faint: oklch(0.62 0.02 278);
+    --accent: oklch(0.5 0.17 272);
+    --accent-strong: oklch(0.45 0.17 272);
+    --accent-ink: oklch(0.99 0.005 272);
+    --accent-tint: oklch(0.5 0.17 272 / 0.12);
+    --accent-ring: oklch(0.5 0.17 272 / 0.5);
+    --term-bg: oklch(0.165 0.018 278);
+  }
+}
+
+/* amber-phosphor: CRT amber on warm graphite. `--warn` shifts orange so the
+   awaiting colour stays distinct from the accent. */
+:root[data-palette="amber-phosphor"] {
+  --bg: oklch(0.178 0.008 70);
+  --bg-grid: oklch(0.214 0.01 70);
+  --surface: oklch(0.214 0.01 70);
+  --surface-2: oklch(0.252 0.012 70);
+  --surface-3: oklch(0.292 0.013 70);
+  --border: oklch(0.318 0.014 70);
+  --border-strong: oklch(0.4 0.016 70);
+  --ink: oklch(0.94 0.008 78);
+  --muted: oklch(0.72 0.014 75);
+  --faint: oklch(0.58 0.014 75);
+  --accent: oklch(0.83 0.14 78);
+  --accent-strong: oklch(0.87 0.145 78);
+  --accent-ink: oklch(0.25 0.05 78);
+  --accent-tint: oklch(0.83 0.14 78 / 0.13);
+  --accent-ring: oklch(0.83 0.14 78 / 0.55);
+  --warn: oklch(0.76 0.15 55);
+  --term-bg: oklch(0.158 0.008 70);
+}
+:root[data-palette="amber-phosphor"][data-theme="light"],
+:root[data-palette="amber-phosphor"][data-theme="light"] body {
+  --bg: oklch(0.983 0.004 78);
+  --bg-grid: oklch(0.93 0.007 78);
+  --surface: oklch(1 0 0);
+  --surface-2: oklch(0.962 0.005 78);
+  --surface-3: oklch(0.93 0.007 78);
+  --border: oklch(0.888 0.01 78);
+  --border-strong: oklch(0.82 0.012 78);
+  --ink: oklch(0.27 0.015 70);
+  --muted: oklch(0.47 0.016 70);
+  --faint: oklch(0.62 0.016 70);
+  --accent: oklch(0.6 0.13 70);
+  --accent-strong: oklch(0.55 0.13 70);
+  --accent-ink: oklch(0.99 0.01 78);
+  --accent-tint: oklch(0.6 0.13 70 / 0.12);
+  --accent-ring: oklch(0.6 0.13 70 / 0.5);
+  --warn: oklch(0.58 0.14 50);
+  --term-bg: oklch(0.165 0.008 70);
+}
+@media (prefers-color-scheme: light) {
+  :root[data-palette="amber-phosphor"]:not([data-theme]) {
+    --bg: oklch(0.983 0.004 78);
+    --bg-grid: oklch(0.93 0.007 78);
+    --surface: oklch(1 0 0);
+    --surface-2: oklch(0.962 0.005 78);
+    --surface-3: oklch(0.93 0.007 78);
+    --border: oklch(0.888 0.01 78);
+    --border-strong: oklch(0.82 0.012 78);
+    --ink: oklch(0.27 0.015 70);
+    --muted: oklch(0.47 0.016 70);
+    --faint: oklch(0.62 0.016 70);
+    --accent: oklch(0.6 0.13 70);
+    --accent-strong: oklch(0.55 0.13 70);
+    --accent-ink: oklch(0.99 0.01 78);
+    --accent-tint: oklch(0.6 0.13 70 / 0.12);
+    --accent-ring: oklch(0.6 0.13 70 / 0.5);
+    --warn: oklch(0.58 0.14 50);
+    --term-bg: oklch(0.165 0.008 70);
+  }
+}
+
+/* ember: warm orange-red accent. */
+:root[data-palette="ember"] {
+  --bg: oklch(0.18 0.009 50);
+  --bg-grid: oklch(0.216 0.011 50);
+  --surface: oklch(0.216 0.011 50);
+  --surface-2: oklch(0.254 0.013 50);
+  --surface-3: oklch(0.294 0.014 50);
+  --border: oklch(0.32 0.015 50);
+  --border-strong: oklch(0.4 0.017 50);
+  --ink: oklch(0.94 0.007 50);
+  --muted: oklch(0.72 0.013 50);
+  --faint: oklch(0.58 0.013 50);
+  --accent: oklch(0.74 0.15 45);
+  --accent-strong: oklch(0.78 0.155 45);
+  --accent-ink: oklch(0.2 0.04 45);
+  --accent-tint: oklch(0.74 0.15 45 / 0.14);
+  --accent-ring: oklch(0.74 0.15 45 / 0.55);
+  --term-bg: oklch(0.158 0.009 50);
+}
+:root[data-palette="ember"][data-theme="light"],
+:root[data-palette="ember"][data-theme="light"] body {
+  --bg: oklch(0.983 0.004 50);
+  --bg-grid: oklch(0.93 0.006 50);
+  --surface: oklch(1 0 0);
+  --surface-2: oklch(0.962 0.005 50);
+  --surface-3: oklch(0.93 0.006 50);
+  --border: oklch(0.888 0.009 50);
+  --border-strong: oklch(0.82 0.012 50);
+  --ink: oklch(0.27 0.014 50);
+  --muted: oklch(0.47 0.015 50);
+  --faint: oklch(0.62 0.015 50);
+  --accent: oklch(0.58 0.17 40);
+  --accent-strong: oklch(0.53 0.17 40);
+  --accent-ink: oklch(0.99 0.008 40);
+  --accent-tint: oklch(0.58 0.17 40 / 0.11);
+  --accent-ring: oklch(0.58 0.17 40 / 0.5);
+  --term-bg: oklch(0.165 0.009 50);
+}
+@media (prefers-color-scheme: light) {
+  :root[data-palette="ember"]:not([data-theme]) {
+    --bg: oklch(0.983 0.004 50);
+    --bg-grid: oklch(0.93 0.006 50);
+    --surface: oklch(1 0 0);
+    --surface-2: oklch(0.962 0.005 50);
+    --surface-3: oklch(0.93 0.006 50);
+    --border: oklch(0.888 0.009 50);
+    --border-strong: oklch(0.82 0.012 50);
+    --ink: oklch(0.27 0.014 50);
+    --muted: oklch(0.47 0.015 50);
+    --faint: oklch(0.62 0.015 50);
+    --accent: oklch(0.58 0.17 40);
+    --accent-strong: oklch(0.53 0.17 40);
+    --accent-ink: oklch(0.99 0.008 40);
+    --accent-tint: oklch(0.58 0.17 40 / 0.11);
+    --accent-ring: oklch(0.58 0.17 40 / 0.5);
+    --term-bg: oklch(0.165 0.009 50);
+  }
+}
+
+/* orchid: muted violet accent on a faintly violet base. */
+:root[data-palette="orchid"] {
+  --bg: oklch(0.177 0.014 305);
+  --bg-grid: oklch(0.213 0.017 305);
+  --surface: oklch(0.213 0.017 305);
+  --surface-2: oklch(0.251 0.02 305);
+  --surface-3: oklch(0.291 0.021 305);
+  --border: oklch(0.318 0.022 305);
+  --border-strong: oklch(0.4 0.024 305);
+  --ink: oklch(0.935 0.01 305);
+  --muted: oklch(0.715 0.018 305);
+  --faint: oklch(0.575 0.018 305);
+  --accent: oklch(0.78 0.13 310);
+  --accent-strong: oklch(0.82 0.135 310);
+  --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);
+  --term-bg: oklch(0.155 0.014 305);
+}
+:root[data-palette="orchid"][data-theme="light"],
+:root[data-palette="orchid"][data-theme="light"] body {
+  --bg: oklch(0.983 0.004 305);
+  --bg-grid: oklch(0.93 0.007 305);
+  --surface: oklch(1 0 0);
+  --surface-2: oklch(0.961 0.005 305);
+  --surface-3: oklch(0.93 0.007 305);
+  --border: oklch(0.886 0.01 305);
+  --border-strong: oklch(0.82 0.013 305);
+  --ink: oklch(0.27 0.018 305);
+  --muted: oklch(0.47 0.018 305);
+  --faint: oklch(0.62 0.018 305);
+  --accent: oklch(0.5 0.17 308);
+  --accent-strong: oklch(0.45 0.17 308);
+  --accent-ink: oklch(0.99 0.005 308);
+  --accent-tint: oklch(0.5 0.17 308 / 0.11);
+  --accent-ring: oklch(0.5 0.17 308 / 0.5);
+  --term-bg: oklch(0.165 0.014 305);
+}
+@media (prefers-color-scheme: light) {
+  :root[data-palette="orchid"]:not([data-theme]) {
+    --bg: oklch(0.983 0.004 305);
+    --bg-grid: oklch(0.93 0.007 305);
+    --surface: oklch(1 0 0);
+    --surface-2: oklch(0.961 0.005 305);
+    --surface-3: oklch(0.93 0.007 305);
+    --border: oklch(0.886 0.01 305);
+    --border-strong: oklch(0.82 0.013 305);
+    --ink: oklch(0.27 0.018 305);
+    --muted: oklch(0.47 0.018 305);
+    --faint: oklch(0.62 0.018 305);
+    --accent: oklch(0.5 0.17 308);
+    --accent-strong: oklch(0.45 0.17 308);
+    --accent-ink: oklch(0.99 0.005 308);
+    --accent-tint: oklch(0.5 0.17 308 / 0.11);
+    --accent-ring: oklch(0.5 0.17 308 / 0.5);
+    --term-bg: oklch(0.165 0.014 305);
+  }
+}
+
 /* ---------- reset / base ---------- */
 
 * {
@@ -435,6 +745,35 @@ textarea {
   flex: 1 1 auto;
 }
 
+/* Palette picker: a ghost-button-shaped <select>. */
+.palette-select {
+  appearance: none;
+  height: var(--control-h);
+  padding: 0 var(--sp-2);
+  border: 1px solid transparent;
+  border-radius: var(--r-2);
+  background: transparent;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+  cursor: pointer;
+  max-width: 9ch;
+  text-overflow: ellipsis;
+  transition:
+    color var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out);
+}
+
+.palette-select:hover {
+  color: var(--ink);
+  border-color: var(--border-strong);
+}
+
+.palette-select:focus-visible {
+  border-color: var(--accent);
+  color: var(--ink);
+}
+
 /* ---------- daemon status dot ---------- */
 
 /* Colour is the link state; the tooltip names the release the daemon is
@@ -1499,20 +1838,29 @@ input.leaf-rename:focus {
 
 /* ---------- mobile special-key bar (Termux-style) ---------- */
 
-/* Two compact rows (Termux layout) in a 5-column grid the 10 keys flow into:
-   Esc/Tab + Ctrl/Alt on the left, cursor keys as a real-keyboard inverted-T on
-   the right (Home/End fill the top corners). Layout is always defined; only
-   *visibility* is gated: hidden on precise-pointer devices (a physical keyboard
-   already has these keys), shown on touch where the soft keyboard omits them.
-   The shell tracks the visual viewport (see `#app`), so it lands above it. */
+/* Two compact rows (Termux layout) in an 8-column grid the 16 keys flow into:
+   Esc/Tab + Ctrl/Alt on the left, cursor keys as a real-keyboard inverted-T in
+   the middle (Home/End fill the top corners), then PgUp/PgDn and the shell
+   symbols. Columns never shrink below a thumb's width — on a narrow phone the
+   bar scrolls sideways instead. Layout is always defined; only *visibility* is
+   gated: hidden on precise-pointer devices (a physical keyboard already has
+   these keys), shown on touch where the soft keyboard omits them. The shell
+   tracks the visual viewport (see `#app`), so it lands above it. */
 .attach-keybar {
   display: none;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(8, minmax(2.5rem, 1fr));
   gap: var(--sp-1);
   padding: var(--sp-1) var(--sp-2);
   padding-bottom: calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
   border-top: 1px solid var(--border);
   background: var(--surface);
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.attach-keybar::-webkit-scrollbar {
+  display: none;
 }
 
 /* Shown on touch only while *this* terminal is focused (`keybar-active`, toggled

web/src/theme.test.ts

@@ -0,0 +1,74 @@
+// @vitest-environment happy-dom
+import { beforeAll, beforeEach, describe, expect, it } from "vitest";
+
+import {
+  createPaletteSelect,
+  initTheme,
+  PALETTES,
+  resolvedPalette,
+  setPalette,
+} from "./theme.js";
+
+// happy-dom's vitest environment ships no localStorage global; back it with a
+// plain in-memory map so persistence is observable.
+let store = new Map<string, string>();
+beforeAll(() => {
+  Object.defineProperty(window, "localStorage", {
+    value: {
+      getItem: (k: string) => store.get(k) ?? null,
+      setItem: (k: string, v: string) => store.set(k, v),
+      removeItem: (k: string) => store.delete(k),
+    },
+  });
+});
+
+describe("palette selection", () => {
+  beforeEach(() => {
+    store = new Map();
+    delete document.documentElement.dataset.palette;
+    delete document.documentElement.dataset.theme;
+  });
+
+  it("defaults to graphite with no data-palette attribute", () => {
+    initTheme();
+    expect(resolvedPalette()).toBe("graphite");
+    expect(document.documentElement.dataset.palette).toBeUndefined();
+  });
+
+  it("setPalette stamps data-palette and persists", () => {
+    setPalette("ember");
+    expect(document.documentElement.dataset.palette).toBe("ember");
+    expect(resolvedPalette()).toBe("ember");
+
+    // A fresh boot re-applies the stored palette.
+    delete document.documentElement.dataset.palette;
+    initTheme();
+    expect(document.documentElement.dataset.palette).toBe("ember");
+  });
+
+  it("selecting graphite removes the attribute again", () => {
+    setPalette("orchid");
+    setPalette("graphite");
+    expect(document.documentElement.dataset.palette).toBeUndefined();
+    initTheme();
+    expect(document.documentElement.dataset.palette).toBeUndefined();
+  });
+
+  it("ignores an unknown stored palette", () => {
+    localStorage.setItem("maestro-palette", "glorb");
+    initTheme();
+    expect(resolvedPalette()).toBe("graphite");
+    expect(document.documentElement.dataset.palette).toBeUndefined();
+  });
+
+  it("the picker lists every palette and applies the chosen one", () => {
+    const select = createPaletteSelect();
+    expect([...select.options].map((o) => o.value)).toEqual([...PALETTES]);
+    expect(select.value).toBe("graphite");
+
+    select.value = "periwinkle";
+    select.dispatchEvent(new Event("change"));
+    expect(document.documentElement.dataset.palette).toBe("periwinkle");
+    expect(localStorage.getItem("maestro-palette")).toBe("periwinkle");
+  });
+});

web/src/theme.ts

@@ -1,10 +1,26 @@
 // Theme: dark (default) + light, persisted. When the user hasn't pinned a
 // theme we follow the OS via CSS `prefers-color-scheme`; pinning sets an
 // explicit `data-theme` on <html> that overrides the media query.
+//
+// Palette: orthogonal to light/dark. Each palette ships both a dark and a
+// light token set in styles.css; `data-palette` on <html> selects it, and
+// graphite — the default — is the bare document with no attribute.
 
 type Theme = "light" | "dark";
 const KEY = "maestro-theme";
 
+/** Every `data-palette` value, in picker order. Graphite is the default. */
+export const PALETTES = [
+  "graphite",
+  "ice-cyan",
+  "periwinkle",
+  "amber-phosphor",
+  "ember",
+  "orchid",
+] as const;
+export type Palette = (typeof PALETTES)[number];
+const PALETTE_KEY = "maestro-palette";
+
 function stored(): Theme | null {
   const v = localStorage.getItem(KEY);
   return v === "light" || v === "dark" ? v : null;
@@ -21,18 +37,46 @@ export function resolvedTheme(): Theme {
   return stored() ?? systemTheme();
 }
 
-/** Apply a pinned theme at boot (no-op when following the system). */
+function storedPalette(): Palette | null {
+  const v = localStorage.getItem(PALETTE_KEY);
+  return (PALETTES as readonly string[]).includes(v ?? "")
+    ? (v as Palette)
+    : null;
+}
+
+/** The palette in force (stored or the graphite default). */
+export function resolvedPalette(): Palette {
+  return document.documentElement.dataset.palette as Palette | undefined
+    ?? storedPalette()
+    ?? "graphite";
+}
+
+/** Pin a palette. Graphite is the bare document, so it clears the attribute. */
+export function setPalette(p: Palette): void {
+  localStorage.setItem(PALETTE_KEY, p);
+  if (p === "graphite") delete document.documentElement.dataset.palette;
+  else document.documentElement.dataset.palette = p;
+}
+
+/** Apply the pinned theme + palette at boot (no-ops when unpinned). */
 export function initTheme(): void {
   // Dev-only `?theme=light|dark` override for visual review; stripped in prod.
   if (import.meta.env.DEV) {
     const q = new URLSearchParams(location.search).get("theme");
     if (q === "light" || q === "dark") {
       document.documentElement.dataset.theme = q;
+      applyStoredPalette();
       return;
     }
   }
   const pinned = stored();
   if (pinned) document.documentElement.dataset.theme = pinned;
+  applyStoredPalette();
+}
+
+function applyStoredPalette(): void {
+  const p = storedPalette();
+  if (p && p !== "graphite") document.documentElement.dataset.palette = p;
 }
 
 function setTheme(t: Theme): void {
@@ -58,3 +102,22 @@ export function createThemeToggle(): HTMLButtonElement {
   });
   return btn;
 }
+
+/** A footer dropdown that picks the colour palette. */
+export function createPaletteSelect(): HTMLSelectElement {
+  const select = document.createElement("select");
+  select.className = "palette-select";
+  select.setAttribute("aria-label", "Colour palette");
+  select.title = "Colour palette";
+  for (const p of PALETTES) {
+    const opt = document.createElement("option");
+    opt.value = p;
+    opt.textContent = p;
+    select.appendChild(opt);
+  }
+  select.value = resolvedPalette();
+  select.addEventListener("change", () => {
+    setPalette(select.value as Palette);
+  });
+  return select;
+}