Merge remote-tracking branch 'origin/blitz/spawn-v2' into spawn-v2/93-collapse-worktree

# Conflicts:
#	web/src/spawnForm.ts

.gitea/workflows/ci.yml

@@ -97,3 +97,24 @@ jobs:
 
       - name: build
         run: pnpm -C web build
+
+  # The flake pins pnpmDeps.hash against web/pnpm-lock.yaml (#98). A lockfile
+  # change invalidates the pin silently elsewhere, so the packaged build has to
+  # fail here too.
+  flake:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install nix
+        run: |
+          curl -fsSL https://nixos.org/nix/install | sh -s -- --daemon --yes
+          echo "/nix/var/nix/profiles/default/bin" >> "$GITHUB_PATH"
+
+      - name: build flake packages
+        run: |
+          nix build \
+            .#webFrontend \
+            .#maestro \
+            .#maestro-web \
+            --no-link

crates/maestro-tui/src/app.rs

@@ -1349,9 +1349,7 @@ mod tests {
         for c in "crimson-otter".chars() {
             app.handle_draft_input(&InputKey::char(c));
         }
-        app.handle_draft_input(&InputKey::Tab); // → worktree toggle
-        app.handle_draft_input(&InputKey::Tab); // → branch mode
-        app.handle_draft_input(&InputKey::Tab); // → new-branch name
+        app.handle_draft_input(&InputKey::Tab); // → advanced disclosure (collapsed, #93)
         app.handle_draft_input(&InputKey::Tab); // → submit
 
         match app.handle_draft_input(&InputKey::Enter).as_slice() {

crates/maestro-tui/src/draft.rs

@@ -57,6 +57,9 @@ pub enum DraftField {
     /// Free-text path, revealed by picking `Other directory…`.
     CwdRaw,
     Name,
+    /// Disclosure collapsing the worktree/branch controls below (#93).
+    /// Closed by default; Enter / Space toggles.
+    Advanced,
     /// Worktree on/off for this session (#65). Enter / Space toggles.
     WorktreeToggle,
     /// New-vs-existing branch source; Left / Right switches.
@@ -148,6 +151,10 @@ pub struct DraftPane {
     /// Worktree on for this spawn (#65). Defaults on; a failed gitroot probe
     /// unticks it, like the web form.
     pub worktree_enabled: bool,
+    /// Whether the worktree/branch controls are collapsed behind the
+    /// "Advanced options" disclosure (#93). Closed by default — most spawns
+    /// take the default target.
+    pub advanced_collapsed: bool,
     /// Enclosing repository of the chosen target — from the project scan for
     /// picked rows, `/api/gitroot` for raw paths. `None` until known.
     pub base_repo: Option<PathBuf>,
@@ -204,6 +211,7 @@ impl Default for DraftPane {
             name_touched: false,
             needs_name_refill: false,
             worktree_enabled: true,
+            advanced_collapsed: true,
             base_repo: None,
             probed_cwd: None,
             probe_seq: 0,
@@ -442,6 +450,21 @@ impl DraftPane {
         self.set_branch_mode(next);
     }
 
+    /// Enter / Space on the "Advanced options" header (#93).
+    pub fn toggle_advanced(&mut self) {
+        self.advanced_collapsed = !self.advanced_collapsed;
+    }
+
+    /// What the collapsed header says about this spawn's default, so it stays
+    /// visible without expanding (#93).
+    fn advanced_summary(&self) -> &'static str {
+        if self.worktree_enabled {
+            "creates a worktree"
+        } else {
+            "no worktree"
+        }
+    }
+
     /// Enter / Space on the toggle. Re-enabling reuses a still-valid repo
     /// answer instead of re-probing.
     pub fn toggle_worktree(&mut self) {
@@ -602,13 +625,16 @@ impl DraftPane {
             order.push(DraftField::CwdRaw);
         }
         order.push(DraftField::Name);
-        order.push(DraftField::WorktreeToggle);
-        if self.worktree_body_visible() {
-            order.push(DraftField::BranchMode);
-            order.push(match self.branch_mode {
-                WorktreeBranchMode::New => DraftField::BranchNew,
-                WorktreeBranchMode::Existing => DraftField::BranchExisting,
-            });
+        order.push(DraftField::Advanced);
+        if !self.advanced_collapsed {
+            order.push(DraftField::WorktreeToggle);
+            if self.worktree_body_visible() {
+                order.push(DraftField::BranchMode);
+                order.push(match self.branch_mode {
+                    WorktreeBranchMode::New => DraftField::BranchNew,
+                    WorktreeBranchMode::Existing => DraftField::BranchExisting,
+                });
+            }
         }
         order.extend([DraftField::Submit]);
         order
@@ -733,6 +759,10 @@ impl DraftPane {
                     self.select_entry();
                     DraftInputResult::Consumed
                 }
+                DraftField::Advanced => {
+                    self.toggle_advanced();
+                    DraftInputResult::Consumed
+                }
                 DraftField::WorktreeToggle => {
                     self.toggle_worktree();
                     DraftInputResult::Consumed
@@ -744,6 +774,14 @@ impl DraftPane {
                     DraftInputResult::Consumed
                 }
             },
+            InputKey::Char {
+                c: ' ',
+                ctrl: false,
+                ..
+            } if self.focused_field == DraftField::Advanced => {
+                self.toggle_advanced();
+                DraftInputResult::Consumed
+            }
             InputKey::Char {
                 c: ' ',
                 ctrl: false,
@@ -832,13 +870,18 @@ impl DraftPane {
 
         let show_custom = self.is_custom();
         let show_raw = self.cwd_raw_visible;
-        let show_wt_body = self.worktree_body_visible();
+        // The worktree toggle and its body stay behind the "Advanced options"
+        // disclosure (#93): collapsed hides both, regardless of what they'd
+        // otherwise show.
+        let show_wt_toggle = !self.advanced_collapsed;
+        let show_wt_body = show_wt_toggle && self.worktree_body_visible();
         // Up to three branch rows stay visible around the selection; held
         // branches need their reason on screen, so they aren't collapsed.
         let branch_rows = self.branches.len().clamp(1, 3) as u16;
-        let fixed: u16 = 3 /* tiles + dir + name */ + 1 /* worktree */ + 1 /* spawn */
+        let fixed: u16 = 3 /* tiles + dir + name */ + 1 /* advanced header */ + 1 /* spawn */
             + u16::from(show_custom)
             + u16::from(show_raw)
+            + u16::from(show_wt_toggle)
             + u16::from(show_wt_body) * (1 + if self.branch_mode == WorktreeBranchMode::New { 1 } else { branch_rows })
             + u16::from(self.error.is_some());
         let list_capacity = (inner.height.saturating_sub(fixed)).max(1) as usize;
@@ -853,7 +896,10 @@ impl DraftPane {
             constraints.push(Constraint::Length(1));
         }
         constraints.push(Constraint::Length(1)); // name
-        constraints.push(Constraint::Length(1)); // worktree toggle
+        constraints.push(Constraint::Length(1)); // advanced header
+        if show_wt_toggle {
+            constraints.push(Constraint::Length(1)); // worktree toggle
+        }
         if show_wt_body {
             constraints.push(Constraint::Length(1)); // branch mode
             match self.branch_mode {
@@ -1030,33 +1076,55 @@ impl DraftPane {
             },
         );
 
+        // -- advanced disclosure (#93) ------------------------------------------
+        let advanced_row = next_row();
+        f.render_widget(
+            Paragraph::new(Line::from(vec![
+                Span::raw(format!("{:<GUTTER$}", "adv:")),
+                Span::styled(
+                    format!(
+                        "[{}] Advanced options",
+                        if self.advanced_collapsed { "+" } else { "-" }
+                    ),
+                    field_style(DraftField::Advanced),
+                ),
+                Span::styled(
+                    format!(" — {}", self.advanced_summary()),
+                    Style::default().add_modifier(Modifier::DIM),
+                ),
+            ])),
+            advanced_row,
+        );
+
         // -- worktree (#65) -----------------------------------------------------
-        let wt_row = next_row();
-        let hint = if self.cwd().is_none() {
-            Some("choose a directory first")
-        } else if self.repo_missing {
-            Some("not inside a git repository")
-        } else if !self.worktree_enabled {
-            Some("off — spawns in the checkout itself")
-        } else {
-            None
-        };
-        let mut tiles = vec![Span::raw(format!("{:<GUTTER$}", "wt:"))];
-        tiles.push(Span::styled(
-            if self.worktree_enabled {
-                "[x] worktree"
+        if show_wt_toggle {
+            let wt_row = next_row();
+            let hint = if self.cwd().is_none() {
+                Some("choose a directory first")
+            } else if self.repo_missing {
+                Some("not inside a git repository")
+            } else if !self.worktree_enabled {
+                Some("off — spawns in the checkout itself")
             } else {
-                "[ ] worktree"
-            },
-            field_style(DraftField::WorktreeToggle),
-        ));
-        if let Some(hint) = hint {
+                None
+            };
+            let mut tiles = vec![Span::raw(format!("{:<GUTTER$}", "wt:"))];
             tiles.push(Span::styled(
-                format!(" {hint}"),
-                Style::default().add_modifier(Modifier::DIM),
+                if self.worktree_enabled {
+                    "[x] worktree"
+                } else {
+                    "[ ] worktree"
+                },
+                field_style(DraftField::WorktreeToggle),
             ));
+            if let Some(hint) = hint {
+                tiles.push(Span::styled(
+                    format!(" {hint}"),
+                    Style::default().add_modifier(Modifier::DIM),
+                ));
+            }
+            f.render_widget(Paragraph::new(Line::from(tiles)), wt_row);
         }
-        f.render_widget(Paragraph::new(Line::from(tiles)), wt_row);
 
         if show_wt_body {
             // branch source: new (created) vs existing (checked out as-is)
@@ -1894,7 +1962,10 @@ mod tests {
 
     #[test]
     fn held_branches_render_unavailable_with_their_holder_as_the_reason() {
-        let mut draft = DraftPane::default();
+        let mut draft = DraftPane {
+            advanced_collapsed: false,
+            ..DraftPane::default()
+        };
         draft.set_projects(
             vec![repo_project(
                 "maestro",
@@ -2069,6 +2140,7 @@ mod tests {
     fn render_shows_the_worktree_section() {
         let mut draft = DraftPane {
             home_dir: "/home/u".into(),
+            advanced_collapsed: false,
             ..DraftPane::default()
         };
         draft.set_projects(
@@ -2107,6 +2179,85 @@ mod tests {
         );
     }
 
+    #[test]
+    fn advanced_section_is_collapsed_by_default_and_states_the_worktree_default() {
+        let mut draft = DraftPane {
+            home_dir: "/home/u".into(),
+            ..DraftPane::default()
+        };
+        draft.set_projects(
+            vec![project("maestro", "/home/u/tea/maestro", 1, Some("claude"))],
+            Utc::now(),
+        );
+        assert!(draft.advanced_collapsed, "closed by default");
+        assert_eq!(
+            draft
+                .field_order()
+                .iter()
+                .filter(|f| matches!(f, DraftField::WorktreeToggle | DraftField::BranchMode))
+                .count(),
+            0,
+            "collapsed fields drop out of tab order"
+        );
+
+        let rendered = render_to_string(100, 24, |f| draft.render(f, f.area(), true));
+        assert!(
+            rendered.contains("Advanced options") && rendered.contains("creates a worktree"),
+            "header states the on-by-default worktree:\n{rendered}"
+        );
+        assert!(
+            !rendered.contains("[x] worktree"),
+            "checkbox stays hidden while collapsed:\n{rendered}"
+        );
+    }
+
+    #[test]
+    fn advanced_header_states_no_worktree_for_a_worktree_row_91() {
+        let mut draft = DraftPane::default();
+        let mut wt = repo_project("wt-91", "/repos/wt91", "/repos/main", 1, None);
+        wt.is_worktree = true;
+        draft.set_projects(vec![wt], Utc::now());
+        draft.focused_field = DraftField::DirPicker;
+        draft.on_input(&InputKey::Enter);
+
+        assert!(!draft.worktree_enabled);
+        assert!(
+            draft.advanced_collapsed,
+            "picking a row must not force it open"
+        );
+        let rendered = render_to_string(100, 24, |f| draft.render(f, f.area(), true));
+        assert!(
+            rendered.contains("no worktree"),
+            "header reflects #91's off default:\n{rendered}"
+        );
+    }
+
+    #[test]
+    fn enter_on_the_advanced_header_expands_it_without_moving_fields_above() {
+        let mut draft = DraftPane {
+            home_dir: "/home/u".into(),
+            focused_field: DraftField::Advanced,
+            ..DraftPane::default()
+        };
+        draft.set_projects(
+            vec![project("maestro", "/home/u/tea/maestro", 1, Some("claude"))],
+            Utc::now(),
+        );
+        let before = render_to_string(100, 24, |f| draft.render(f, f.area(), true));
+        let before_head: Vec<&str> = before.lines().take(6).collect();
+
+        draft.on_input(&InputKey::Enter);
+        assert!(!draft.advanced_collapsed);
+
+        let after = render_to_string(100, 24, |f| draft.render(f, f.area(), true));
+        let after_head: Vec<&str> = after.lines().take(6).collect();
+        assert_eq!(
+            before_head, after_head,
+            "expanding must not move the fields above the disclosure"
+        );
+        assert!(after.contains("[x] worktree"), "body now visible:\n{after}");
+    }
+
     #[test]
     fn abbreviate_path_matches_the_web_helpers() {
         assert_eq!(

web/src/projectPicker.test.ts

@@ -34,13 +34,13 @@ function stubFetch(info: unknown, projects: Project[]): void {
   );
 }
 
-function rowPaths(form: HTMLFormElement): string[] {
-  return [...form.querySelectorAll<HTMLButtonElement>(".project-row:not(.project-other)")].map(
-    (r) => r.dataset.cwd ?? "",
+function boxPaths(form: HTMLFormElement): string[] {
+  return [...form.querySelectorAll<HTMLButtonElement>(".project-box")].map(
+    (b) => b.dataset.cwd ?? "",
   );
 }
 
-describe("spawnForm project picker", () => {
+describe("spawnForm project picker (#95: boxes, full paths, mains only)", () => {
   let handle: SpawnFormHandle | null = null;
 
   beforeEach(() => {
@@ -65,7 +65,7 @@ describe("spawnForm project picker", () => {
     return handle;
   }
 
-  it("renders one row per project, fresh before stale", async () => {
+  it("renders one box per project, fresh before stale", async () => {
     const fresh = project({ name: "fresh", path: "/home/user/fresh", last_activity: NOW });
     const stale = project({
       name: "stale",
@@ -73,40 +73,56 @@ describe("spawnForm project picker", () => {
       last_activity: "2026-01-01T00:00:00Z",
     });
     const form = (await mount([stale, fresh])).el;
-    expect(rowPaths(form)).toEqual(["/home/user/fresh", "/home/user/stale"]);
-    const rows = [...form.querySelectorAll<HTMLButtonElement>(".project-row")];
-    expect(rows[1].classList.contains("is-stale")).toBe(true);
-    expect(rows[0].classList.contains("is-stale")).toBe(false);
+    expect(boxPaths(form)).toEqual(["/home/user/fresh", "/home/user/stale"]);
+    const boxes = [...form.querySelectorAll<HTMLButtonElement>(".project-box")];
+    expect(boxes[1].classList.contains("is-stale")).toBe(true);
+    expect(boxes[0].classList.contains("is-stale")).toBe(false);
   });
 
-  it("nests worktrees under their base repository", async () => {
+  it("shows the name as the primary line and the full path unabbreviated", async () => {
+    const p = project({ name: "nixos-config", path: "/home/user/tea/nixos-config" });
+    const form = (await mount([p])).el;
+    const box = form.querySelector<HTMLButtonElement>(".project-box")!;
+    expect(box.querySelector(".project-name")!.textContent).toBe("nixos-config");
+    // Not `~/t/nixos-config`: the abbreviation hid what distinguishes two
+    // projects sharing a basename (#95).
+    expect(box.querySelector(".project-path")!.textContent).toBe("/home/user/tea/nixos-config");
+  });
+
+  it("lists only main checkouts as boxes — worktrees belong to step two", async () => {
     const main = project({ name: "maestro", path: "/home/user/maestro" });
     const wt = project({
       name: "wt",
-      path: "/elsewhere/wt",
+      path: "/home/user/maestro/worktrees/wt",
       is_worktree: true,
       base_repo: main.path,
     });
     const form = (await mount([wt, main])).el;
-    expect(rowPaths(form)).toEqual(["/home/user/maestro", "/elsewhere/wt"]);
-    const [mainRow, wtRow] = [
-      ...form.querySelectorAll(".project-row:not(.project-other)"),
-    ];
-    expect(wtRow.classList.contains("is-worktree")).toBe(true);
-    expect(mainRow.classList.contains("is-worktree")).toBe(false);
+    expect(boxPaths(form)).toEqual(["/home/user/maestro"]);
+    expect(form.querySelector(".project-box.is-worktree")).toBeNull();
   });
 
-  it("filters rows as the operator types", async () => {
+  it("filters boxes as the operator types, keeping a repo its worktree matched", async () => {
     const a = project({ name: "maestro", path: "/home/user/maestro" });
     const b = project({ name: "tea", path: "/home/user/work/tea" });
-    const form = (await mount([a, b])).el;
+    const wt = project({
+      name: "bulgarians",
+      path: "/home/user/maestro/worktrees/bulgarians",
+      is_worktree: true,
+      base_repo: a.path,
+    });
+    const form = (await mount([a, b, wt])).el;
     const filter = form.querySelector<HTMLInputElement>(".project-filter")!;
     filter.value = "tea";
     filter.dispatchEvent(new Event("input"));
-    expect(rowPaths(form)).toEqual(["/home/user/work/tea"]);
+    expect(boxPaths(form)).toEqual(["/home/user/work/tea"]);
+    // A query that only matches a worktree still surfaces its repository box.
+    filter.value = "bulgarians";
+    filter.dispatchEvent(new Event("input"));
+    expect(boxPaths(form)).toEqual(["/home/user/maestro"]);
     filter.value = "zzz";
     filter.dispatchEvent(new Event("input"));
-    expect(rowPaths(form)).toEqual([]);
+    expect(boxPaths(form)).toEqual([]);
     expect(form.querySelector(".picker-empty")).toBeTruthy();
   });
 
@@ -135,17 +151,17 @@ describe("spawnForm project picker", () => {
     for (let i = 0; i < 20; i++) await Promise.resolve();
     onChange.mockClear();
 
-    const row = form.querySelector<HTMLButtonElement>(".project-row")!;
-    row.click();
+    const box = form.querySelector<HTMLButtonElement>(".project-box")!;
+    box.click();
 
     const values = form.querySelector<HTMLInputElement>("input[name=name]")!.value;
     const last = onChange.mock.lastCall![0];
     expect(last.cwd).toBe("/home/user/maestro");
     expect(last.command).toBe("claude");
     expect(values).toBeTruthy();
-    // The raw input stays hidden — the picked row is the source of truth.
+    // The raw input stays hidden — the picked box is the source of truth.
     expect((form.querySelector(".cwd-raw-wrap") as HTMLElement).hidden).toBe(true);
-    expect(row.classList.contains("is-active")).toBe(true);
+    expect(box.classList.contains("is-active")).toBe(true);
   });
 
   it("keeps an 'Other directory…' escape hatch that reveals the raw input", async () => {

web/src/spawnForm.ts

@@ -9,8 +9,8 @@ import {
 } from "./api.js";
 import { attachDirAutocomplete } from "./dirAutocomplete.js";
 import { filterProjects, groupProjects, isStale, sortProjects } from "./projectList.js";
+import type { ProjectGroup } from "./projectList.js";
 import type { BranchInfo, CreateSessionRequest, Project, Session, SpawnPreset } from "./types.js";
-import { abbreviateCwd, abbreviateFolderName } from "./types.js";
 
 /** Where a worktree's branch comes from: freshly created (default) or picked
  * from the repository's existing branches (#61). */
@@ -130,15 +130,20 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
              placeholder="bash -l" autocomplete="off" />
     </div>
     <div class="field">
-      <span class="field-label">Working directory</span>
+      <span class="field-label">Project</span>
       <input class="raw-input project-filter" type="text" placeholder="Filter projects…"
              autocomplete="off" />
       <div class="picker projects"></div>
+      <button type="button" class="project-other">Other directory…</button>
       <div class="raw-wrap cwd-raw-wrap" hidden>
         <input class="raw-input cwd-raw" name="cwd_raw" type="text"
                placeholder="/home/user/project" inputmode="text" autocomplete="off" />
       </div>
     </div>
+    <div class="field wt-step" hidden>
+      <span class="field-label">Worktree</span>
+      <div class="picker wt-choices"></div>
+    </div>
     <div class="field">
       <span class="field-label">Name</span>
       <div class="name-row">
@@ -147,33 +152,38 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
       </div>
     </div>
     <fieldset class="worktree">
-      <legend>
+      <button type="button" class="tree-folder-header wt-toggle" aria-expanded="false">
+        <span class="chevron">▾</span>
+        <span class="folder-name">Advanced options</span>
+        <span class="wt-summary"></span>
+      </button>
+      <div class="wt-collapsible" hidden>
         <label class="row-inline">
           <input type="checkbox" name="worktree_enabled" />
           Create git worktree
         </label>
-      </legend>
-      <p class="wt-hint" hidden></p>
-      <div class="wt-body" hidden>
-        <p class="wt-repo"></p>
-        <div class="wt-mode" role="radiogroup" aria-label="Branch source">
-          <label class="row-inline">
-            <input type="radio" name="worktree_branch_mode" value="new" />
-            New branch
+        <p class="wt-hint" hidden></p>
+        <div class="wt-body" hidden>
+          <p class="wt-repo"></p>
+          <div class="wt-mode" role="radiogroup" aria-label="Branch source">
+            <label class="row-inline">
+              <input type="radio" name="worktree_branch_mode" value="new" />
+              New branch
+            </label>
+            <label class="row-inline">
+              <input type="radio" name="worktree_branch_mode" value="existing" />
+              Existing branch
+            </label>
+          </div>
+          <label class="wt-new-wrap">
+            Branch
+            <input name="worktree_branch" type="text" placeholder="feat/foo" autocomplete="off" />
           </label>
-          <label class="row-inline">
-            <input type="radio" name="worktree_branch_mode" value="existing" />
-            Existing branch
+          <label class="wt-exist-wrap" hidden>
+            Branch
+            <select class="branch-select"></select>
           </label>
         </div>
-        <label class="wt-new-wrap">
-          Branch
-          <input name="worktree_branch" type="text" placeholder="feat/foo" autocomplete="off" />
-        </label>
-        <label class="wt-exist-wrap" hidden>
-          Branch
-          <select class="branch-select"></select>
-        </label>
       </div>
     </fieldset>
     <p class="form-error" role="alert" aria-live="polite"></p>
@@ -187,11 +197,17 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
   const errEl = form.querySelector(".form-error") as HTMLElement;
   const cmdTiles = form.querySelector(".cmd-tiles") as HTMLElement;
   const cmdRaw = form.querySelector(".cmd-raw") as HTMLInputElement;
-  const recentsEl = form.querySelector(".projects") as HTMLElement;
+  const projectsEl = form.querySelector(".projects") as HTMLElement;
   const filterInput = form.querySelector(".project-filter") as HTMLInputElement;
+  const otherBtn = form.querySelector(".project-other") as HTMLButtonElement;
+  const wtStep = form.querySelector(".wt-step") as HTMLElement;
+  const wtChoices = form.querySelector(".wt-choices") as HTMLElement;
   const cwdRawWrap = form.querySelector(".cwd-raw-wrap") as HTMLElement;
   const cwdRaw = form.querySelector(".cwd-raw") as HTMLInputElement;
   const wtEnabled = form.querySelector("input[name=worktree_enabled]") as HTMLInputElement;
+  const wtToggle = form.querySelector(".wt-toggle") as HTMLButtonElement;
+  const wtCollapsible = form.querySelector(".wt-collapsible") as HTMLElement;
+  const wtSummary = form.querySelector(".wt-summary") as HTMLElement;
   const wtHint = form.querySelector(".wt-hint") as HTMLElement;
   const wtBody = form.querySelector(".wt-body") as HTMLElement;
   const wtRepo = form.querySelector(".wt-repo") as HTMLElement;
@@ -342,6 +358,15 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
     emit();
   }
 
+  /** Re-highlight the operator's already-picked tile after `renderCommandTiles`
+   * rebuilds the row from scratch (new tiles carry no `is-active` class) —
+   * without touching `command`, since that was already settled. */
+  function reapplyActiveTile(): void {
+    for (const tile of cmdTiles.querySelectorAll(".tile")) {
+      tile.classList.toggle("is-active", (tile as HTMLElement).dataset.id === selectedPresetId);
+    }
+  }
+
   function renderCommandTiles(): void {
     cmdTiles.replaceChildren();
     for (const p of presets) {
@@ -350,13 +375,23 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
       tile.className = "tile";
       tile.dataset.id = p.id;
       tile.innerHTML = `<span class="tile-label">${escapeHtml(p.label)}</span>`;
-      tile.addEventListener("click", () => selectPreset(p.id));
+      tile.addEventListener("click", () => {
+        commandTouched = true;
+        selectPreset(p.id);
+      });
       cmdTiles.appendChild(tile);
     }
   }
 
+  // Set once the operator picks a tile or types a custom command — guards
+  // `applyInitialCommand()` the same way `nameTouched` guards a late name
+  // batch: a late `/api/info` resolution must never overwrite a field the
+  // operator has already touched (#76).
+  let commandTouched = false;
+
   cmdRaw.addEventListener("input", () => {
     if (selectedPresetId === "custom" || presets.find((p) => p.id === selectedPresetId)?.command === "") {
+      commandTouched = true;
       command = cmdRaw.value.trim();
       emit();
     }
@@ -372,7 +407,11 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
       if (info.presets?.length) {
         presets = info.presets;
         renderCommandTiles();
-        applyInitialCommand();
+        if (commandTouched) {
+          reapplyActiveTile();
+        } else {
+          applyInitialCommand();
+        }
       }
     })
     .catch(() => {
@@ -399,12 +438,36 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
     if (first) selectPreset(first.id, false);
   }
 
-  // ---- working-directory picker ---------------------------------------
+  // ---- working-directory picker (#95) ----------------------------------
+  // Two steps, and the TUI mirror (#96) must match these rules verbatim:
+  //  1. Step one is one box per repository (name, then full path). A worktree
+  //     is a box only when its main checkout is missing from the scan.
+  //  2. The filter keeps a repository when the query matches it or any of its
+  //     worktrees, so a worktree name still finds its box.
+  //  3. Picking a box reveals step two: "+ new", then that repository's
+  //     worktrees newest-first. "Other directory…" clears both steps.
+  //  4. "+ new" is the default selection — except on a box that is itself a
+  //     linked worktree, which defaults to that worktree.
+  //  5. "+ new" means create: cwd is the repository, create-worktree on.
+  //     An existing worktree means run in it: cwd is that worktree,
+  //     create-worktree OFF. The daemon never adopts (docs/WORKTREES.md), so
+  //     these are separate acts — #91's rule, now an explicit choice.
+  //  6. Neither step probes /api/gitroot; the scan already reports repository
+  //     membership. Only the free-text hatch pays for a probe.
+
+  /** "new" (create a worktree) or the path of an existing worktree to run in. */
+  type WorktreeChoice = "new" | string;
+
+  let discovered: Project[] = []; // daemon snapshot, daemon-sorted
+  let groups: ProjectGroup[] = []; // rebuilt on every render
+  let selectedGroup: ProjectGroup | null = null;
+  let worktreeChoice: WorktreeChoice = "new";
+
   function showRawCwd(prefillValue?: string, focus = true): void {
     cwdRawWrap.hidden = false;
     if (prefillValue != null) cwd = prefillValue;
     cwdRaw.value = cwd;
-    markActiveProject(null);
+    clearProjectSelection();
     if (focus) {
       cwdRaw.focus();
       cwdRaw.select();
@@ -421,62 +484,91 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
     if (wtEnabled.checked) scheduleGitRootProbe();
   });
 
-  function markActiveProject(activeCwd: string | null): void {
-    for (const row of recentsEl.querySelectorAll(".project-row")) {
-      row.classList.toggle(
-        "is-active",
-        (row as HTMLElement).dataset.cwd === activeCwd,
-      );
+  /** Every worktree of a group, including the group's own box when the scan
+   * found no main checkout to nest it under. */
+  function worktreesOf(group: ProjectGroup): Project[] {
+    return [group.main, ...group.worktrees].filter((p) => p.is_worktree);
+  }
+
+  function markActiveBox(): void {
+    const active = selectedGroup?.main.path ?? null;
+    for (const box of projectsEl.querySelectorAll(".project-box")) {
+      box.classList.toggle("is-active", (box as HTMLElement).dataset.cwd === active);
     }
   }
 
-  function selectProject(project: Project): void {
-    cwd = project.path;
+  function markActiveChoice(): void {
+    for (const btn of wtChoices.querySelectorAll(".wt-choice")) {
+      const el = btn as HTMLElement;
+      const value = el.dataset.kind === "new" ? "new" : (el.dataset.cwd ?? "");
+      el.classList.toggle("is-active", value === worktreeChoice);
+    }
+  }
+
+  function clearProjectSelection(): void {
+    selectedGroup = null;
+    worktreeChoice = "new";
+    wtChoices.replaceChildren();
+    wtStep.hidden = true;
+    markActiveBox();
+  }
+
+  function selectProject(group: ProjectGroup): void {
+    selectedGroup = group;
     cwdRawWrap.hidden = true;
-    markActiveProject(project.path);
-    // The scan already knows this directory is inside a repo (#61): the
-    // toggle defaults back on and no /api/gitroot round trip is needed —
-    // unless the directory *is* a linked worktree itself (#91): spawning
-    // in place is the only thing that works there, so default the toggle
-    // off. Turning it back on by hand still tries (and fails with git's
-    // own message), which is deliberate (#91 non-goal).
-    wtEnabled.checked = !project.is_worktree;
-    if (project.is_worktree) {
+    renderWorktreeChoices(group);
+    markActiveBox();
+    // Rule 4: a box that is itself a linked worktree defaults to running there.
+    applyWorktreeChoice(group.main.is_worktree ? group.main.path : "new");
+  }
+
+  function applyWorktreeChoice(choice: WorktreeChoice): void {
+    const group = selectedGroup;
+    if (!group) return;
+    const target =
+      choice === "new" ? group.main : worktreesOf(group).find((p) => p.path === choice);
+    if (!target) return;
+    worktreeChoice = choice;
+    cwd = target.path;
+    branchCache = null;
+    markActiveChoice();
+    if (choice === "new") {
+      wtEnabled.checked = true;
+      updateWtSummary();
+      applyProjectRepo(group.main.base_repo ?? group.main.path);
+    } else {
+      wtEnabled.checked = false;
+      updateWtSummary();
       inferredBaseRepo = null;
       wtBody.hidden = true;
       wtHint.hidden = true;
-    } else {
-      applyProjectRepo(project.base_repo ?? project.path);
     }
     emit();
-    // Picking a project pre-selects the command it was last used with.
-    const match = presets.find((p) => p.command === project.last_command && p.command !== "");
+    // The chosen directory pre-selects the command it was last used with.
+    const match = presets.find((p) => p.command === target.last_command && p.command !== "");
     if (match) selectPreset(match.id);
   }
 
-  let discovered: Project[] = []; // daemon snapshot, daemon-sorted
-
   function renderProjects(): void {
-    recentsEl.replaceChildren();
-    const sorted = sortProjects(filterProjects(discovered, filterInput.value), new Date());
-    for (const group of groupProjects(sorted)) {
-      recentsEl.appendChild(projectRow(group.main));
-      for (const wt of group.worktrees) recentsEl.appendChild(projectRow(wt));
-    }
-    if (discovered.length > 0 && sorted.length === 0) {
+    projectsEl.replaceChildren();
+    groups = groupProjects(sortProjects(discovered, new Date()));
+    const query = filterInput.value;
+    const visible = groups.filter((g) => filterProjects([g.main, ...g.worktrees], query).length > 0);
+    for (const group of visible) projectsEl.appendChild(projectBox(group));
+    if (discovered.length > 0 && visible.length === 0) {
       const empty = document.createElement("p");
       empty.className = "picker-empty";
       empty.textContent = "No projects match.";
-      recentsEl.appendChild(empty);
+      projectsEl.appendChild(empty);
     }
-    recentsEl.appendChild(otherDirRow());
-    markActiveProject(cwdRawWrap.hidden ? cwd : null);
+    markActiveBox();
   }
 
   filterInput.addEventListener("input", renderProjects);
+  otherBtn.addEventListener("click", () => showRawCwd(cwd || homeDir));
 
   async function loadProjects(): Promise<void> {
-    recentsEl.replaceChildren(loadingRow());
+    projectsEl.replaceChildren(loadingRow());
     try {
       discovered = await fetchProjects();
     } catch {
@@ -487,12 +579,13 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
     if (seedCwd) {
       // A seed sets the directory verbatim, regardless of what the scan found.
       // `cwdRawVisible === false` marks a draft restore whose cwd came from a
-      // picked row: keep the picker and don't steal focus. Otherwise land
+      // picked box: keep the picker and don't steal focus. Otherwise land
       // focused in the raw input (clone / no-match flows).
       if (prefill.cwdRawVisible === false) {
         cwd = seedCwd;
         cwdRaw.value = seedCwd;
-        markActiveProject(cwd);
+        // Restoring must not touch the worktree toggle — the seed carries it.
+        if (!restoreSelection(seedCwd)) clearProjectSelection();
       } else {
         showRawCwd(seedCwd, false);
       }
@@ -509,34 +602,66 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
     emit();
   }
 
-  function projectRow(project: Project): HTMLElement {
-    const row = document.createElement("button");
-    row.type = "button";
-    row.className = `project-row${project.is_worktree ? " is-worktree" : ""}${
-      isStale(project, new Date()) ? " is-stale" : ""
-    }`;
-    row.dataset.cwd = project.path;
-    // Abbreviate exactly like the sidebar: home → `~`, then collapse leading
-    // segments to initials (`~/g/n/maestro`). The full path stays in the tooltip
-    // and `dataset.cwd` (what's actually submitted).
-    const display = abbreviateFolderName(abbreviateCwd(project.path, homeDir));
-    row.innerHTML = `
-      <span class="project-info">
-        <span class="project-name">${escapeHtml(project.name)}</span>
-        <span class="recent-dir" title="${escapeHtml(project.path)}">${display}</span>
-      </span>
-      <span class="recent-cmd">${escapeHtml(project.last_command ?? "")}</span>`;
-    row.addEventListener("click", () => selectProject(project));
-    return row;
+  /** Put the two steps back on a restored draft's cwd, without re-running the
+   * side effects of a fresh pick. */
+  function restoreSelection(path: string): boolean {
+    for (const group of groups) {
+      const wt = worktreesOf(group).find((p) => p.path === path);
+      const choice: WorktreeChoice | null =
+        wt ? wt.path : group.main.path === path ? "new" : null;
+      if (choice === null) continue;
+      selectedGroup = group;
+      worktreeChoice = choice;
+      renderWorktreeChoices(group);
+      markActiveChoice();
+      markActiveBox();
+      return true;
+    }
+    return false;
   }
 
-  function otherDirRow(): HTMLElement {
-    const row = document.createElement("button");
-    row.type = "button";
-    row.className = "project-row project-other";
-    row.innerHTML = `<span class="project-info"><span class="recent-dir">Other directory…</span></span>`;
-    row.addEventListener("click", () => showRawCwd(cwd || homeDir));
-    return row;
+  function projectBox(group: ProjectGroup): HTMLElement {
+    const project = group.main;
+    const box = document.createElement("button");
+    box.type = "button";
+    box.className = `project-box${isStale(project, new Date()) ? " is-stale" : ""}`;
+    box.dataset.cwd = project.path;
+    const trees = worktreesOf(group).length;
+    // The full path, not the sidebar's `~/t/n/maestro` abbreviation: it is what
+    // tells two projects sharing a basename apart (#95).
+    const meta = [trees > 0 ? `${trees} worktree${trees === 1 ? "" : "s"}` : "", project.last_command ?? ""]
+      .filter(Boolean)
+      .join(" · ");
+    box.innerHTML = `
+      <span class="project-name">${escapeHtml(project.name)}</span>
+      <span class="project-path">${escapeHtml(project.path)}</span>
+      <span class="project-meta">${escapeHtml(meta)}</span>`;
+    box.addEventListener("click", () => selectProject(group));
+    return box;
+  }
+
+  function renderWorktreeChoices(group: ProjectGroup): void {
+    wtChoices.replaceChildren();
+    wtChoices.appendChild(
+      choiceButton("new", "+ new", `new worktree of ${group.main.name}`),
+    );
+    for (const wt of worktreesOf(group)) {
+      wtChoices.appendChild(choiceButton(wt.path, wt.name, wt.path));
+    }
+    wtStep.hidden = false;
+  }
+
+  function choiceButton(choice: WorktreeChoice, label: string, sub: string): HTMLElement {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = `wt-choice${choice === "new" ? " wt-choice-new" : ""}`;
+    btn.dataset.kind = choice === "new" ? "new" : "existing";
+    if (choice !== "new") btn.dataset.cwd = choice;
+    btn.innerHTML = `
+      <span class="wt-choice-name">${escapeHtml(label)}</span>
+      <span class="wt-choice-sub">${escapeHtml(sub)}</span>`;
+    btn.addEventListener("click", () => applyWorktreeChoice(choice));
+    return btn;
   }
 
   function loadingRow(): HTMLElement {
@@ -546,6 +671,18 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
     return p;
   }
 
+  // ---- worktree: disclosure (#93), reuses the sidebar's folder-header ---
+  let advancedCollapsed = true;
+  function setAdvancedCollapsed(collapsed: boolean): void {
+    advancedCollapsed = collapsed;
+    wtToggle.setAttribute("aria-expanded", String(!collapsed));
+    wtCollapsible.hidden = collapsed;
+  }
+  function updateWtSummary(): void {
+    wtSummary.textContent = wtEnabled.checked ? "creates a worktree" : "no worktree";
+  }
+  wtToggle.addEventListener("click", () => setAdvancedCollapsed(!advancedCollapsed));
+
   // ---- worktree (branch-only; base_repo inferred via scan or /gitroot) --
   // The project scan already reports repo membership, so a picked project
   // resolves its base repo locally (#61); only the free-text escape hatch
@@ -626,6 +763,7 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
       // Publish the untick too, or the next render seeds the box checked with
       // no inferred repo and submitting fails.
       wtEnabled.checked = false;
+      updateWtSummary();
       emit();
       wtBody.hidden = true;
       wtHint.hidden = false;
@@ -699,6 +837,7 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
   branchSelect.addEventListener("change", () => emit());
 
   wtEnabled.addEventListener("change", () => {
+    updateWtSummary();
     emit();
     if (wtEnabled.checked) {
       resolveBaseRepo();
@@ -712,6 +851,7 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
   // The toggle defaults ON (#61): the operator almost always wants a
   // worktree, and every non-repo target unticks it via the gitroot probe.
   wtEnabled.checked = prefill.worktreeEnabled ?? true;
+  updateWtSummary();
   if (prefill.worktreeBranch) branchInput.value = prefill.worktreeBranch;
   setBranchMode(branchMode);
 

web/src/spawnFormPreset.test.ts

@@ -0,0 +1,124 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { createSpawnForm, type SpawnFormHandle, type SpawnFormValues } from "./spawnForm.js";
+
+/** Stubs fetch so `/api/info` only resolves once `resolveInfo()` is called —
+ * everything else (names, projects, gitroot) answers immediately with an
+ * empty/default body. Lets a test pick a preset (or type a custom command)
+ * mid-flight, then observe what the late `/api/info` resolution does to it. */
+function stubDeferredInfo(): { resolveInfo: () => void } {
+  let releaseInfo: () => void = () => {};
+  const infoGate = new Promise<void>((resolve) => {
+    releaseInfo = resolve;
+  });
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.includes("/api/info")) {
+        await infoGate;
+        return new Response(
+          JSON.stringify({
+            hostname: "h",
+            version: "0",
+            home_dir: "/home/user",
+            presets: [
+              { id: "claude", label: "Claude", command: "claude" },
+              { id: "fish", label: "Fish", command: "fish" },
+              { id: "custom", label: "Custom…", command: "" },
+            ],
+          }),
+          { status: 200 },
+        );
+      }
+      if (url.includes("/api/names")) {
+        return new Response(JSON.stringify({ names: ["amber-fox"] }), { status: 200 });
+      }
+      return new Response(JSON.stringify([]), { status: 200 });
+    }),
+  );
+  return { resolveInfo: releaseInfo };
+}
+
+describe("spawnForm preset selection vs. late /api/info (#76)", () => {
+  let handle: SpawnFormHandle | null = null;
+
+  afterEach(() => {
+    handle?.destroy();
+    handle = null;
+    vi.unstubAllGlobals();
+  });
+
+  async function drain(): Promise<void> {
+    for (let i = 0; i < 40; i++) await Promise.resolve();
+  }
+
+  it("keeps an operator-picked tile after /api/info resolves late", async () => {
+    const { resolveInfo } = stubDeferredInfo();
+    let values: SpawnFormValues | undefined;
+    handle = createSpawnForm({ onChange: (v) => (values = v), onSuccess() {} });
+    const form = handle.el;
+    document.body.appendChild(form);
+    await drain();
+
+    // Fallback presets are up; the operator picks "zsh" before /api/info lands.
+    const zshTile = [...form.querySelectorAll<HTMLButtonElement>(".tile")].find(
+      (t) => t.dataset.id === "zsh",
+    )!;
+    zshTile.click();
+    expect(zshTile.classList.contains("is-active")).toBe(true);
+
+    // /api/info lands late with a preset list that doesn't even include "zsh".
+    resolveInfo();
+    await drain();
+
+    // The operator's pick must not be discarded back to the new list's first
+    // entry — `onChange` only starts firing once the initial load settles
+    // (`ready`), which happens right here, so this is the first place the
+    // published command is observable.
+    expect(values?.command).toBe("zsh");
+  });
+
+  it("keeps an operator-typed custom command after /api/info resolves late", async () => {
+    const { resolveInfo } = stubDeferredInfo();
+    let values: SpawnFormValues | undefined;
+    handle = createSpawnForm({ onChange: (v) => (values = v), onSuccess() {} });
+    const form = handle.el;
+    document.body.appendChild(form);
+    await drain();
+
+    const customTile = [...form.querySelectorAll<HTMLButtonElement>(".tile")].find(
+      (t) => t.dataset.id === "custom",
+    )!;
+    customTile.click();
+    const cmdRaw = form.querySelector<HTMLInputElement>(".cmd-raw")!;
+    cmdRaw.value = "htop";
+    cmdRaw.dispatchEvent(new Event("input"));
+
+    resolveInfo();
+    await drain();
+
+    expect(values?.command).toBe("htop");
+    expect(cmdRaw.value).toBe("htop");
+  });
+
+  it("still applies the real presets' first entry when the operator never touched the command", async () => {
+    const { resolveInfo } = stubDeferredInfo();
+    let values: SpawnFormValues | undefined;
+    handle = createSpawnForm({ onChange: (v) => (values = v), onSuccess() {} });
+    const form = handle.el;
+    document.body.appendChild(form);
+    await drain();
+
+    resolveInfo();
+    await drain();
+
+    // Untouched: the refined preset list is still free to settle the command.
+    expect(values?.command).toBe("claude");
+    const fishTile = [...form.querySelectorAll<HTMLButtonElement>(".tile")].find(
+      (t) => t.dataset.id === "fish",
+    );
+    expect(fishTile).toBeDefined();
+  });
+});

web/src/spawnFormProbe.test.ts

@@ -101,7 +101,7 @@ describe("spawnForm gitroot probe debounce (#74)", () => {
   it("a keystroke burst fires exactly one probe after the quiet period", async () => {
     const { form, stub } = await mount();
 
-    form.querySelector<HTMLElement>(".project-row.project-other")!.click();
+    form.querySelector<HTMLElement>(".project-other")!.click();
     // Burst: every keystroke reschedules; nothing may hit /api/gitroot yet.
     for (let i = 1; i <= "/opt/somewhere".length; i++) {
       typeRaw(form, "/opt/somewhere".slice(0, i));
@@ -119,7 +119,7 @@ describe("spawnForm gitroot probe debounce (#74)", () => {
   it("a stale probe answer cannot overwrite a newer input", async () => {
     const { form, stub } = await mount({ holdGitRootFor: ["/repo/old"] });
 
-    form.querySelector<HTMLElement>(".project-row.project-other")!.click();
+    form.querySelector<HTMLElement>(".project-other")!.click();
 
     // Probe for the old target, held in flight.
     typeRaw(form, "/repo/old");

web/src/spawnFormWorktree.test.ts

@@ -80,10 +80,10 @@ describe("spawnForm worktree defaults and branch picker (#61)", () => {
   };
 
   function pickProject(form: HTMLFormElement): void {
-    form.querySelector<HTMLButtonElement>(".project-row.project-other")!.click();
+    form.querySelector<HTMLButtonElement>(".project-other")!.click();
     form
-      .querySelectorAll<HTMLButtonElement>(".project-row")
-      .forEach((row) => row.dataset.cwd === "/home/user/maestro" && row.click());
+      .querySelectorAll<HTMLButtonElement>(".project-box")
+      .forEach((box) => box.dataset.cwd === "/home/user/maestro" && box.click());
   }
 
   it("defaults the worktree toggle on for a picked project with no gitroot probe", async () => {
@@ -118,8 +118,8 @@ describe("spawnForm worktree defaults and branch picker (#61)", () => {
     for (let i = 0; i < 40; i++) await Promise.resolve();
 
     handle.el
-      .querySelectorAll<HTMLButtonElement>(".project-row")
-      .forEach((row) => row.dataset.cwd === "/home/user/wt-91" && row.click());
+      .querySelectorAll<HTMLButtonElement>(".project-box")
+      .forEach((box) => box.dataset.cwd === "/home/user/wt-91" && box.click());
     await drain();
 
     expect(handle.el.querySelector<HTMLInputElement>("input[name=worktree_enabled]")!.checked).toBe(
@@ -134,7 +134,7 @@ describe("spawnForm worktree defaults and branch picker (#61)", () => {
 
     // Escape hatch: switch to a free-text dir; only now does /api/gitroot
     // fire — debounced, so the quiet period must elapse first (#74).
-    form.querySelector<HTMLElement>(".project-row.project-other")!.click();
+    form.querySelector<HTMLElement>(".project-other")!.click();
     const raw = form.querySelector<HTMLInputElement>("input[name=cwd_raw]")!;
     raw.value = "/opt/somewhere";
     raw.dispatchEvent(new Event("input"));
@@ -180,6 +180,59 @@ describe("spawnForm worktree defaults and branch picker (#61)", () => {
     expect(modes.at(-1)).toBe("existing");
   });
 
+  it("collapses the advanced (worktree) section by default (#93)", async () => {
+    const form = await mount();
+    const toggle = form.querySelector<HTMLButtonElement>(".wt-toggle")!;
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    expect(form.querySelector<HTMLElement>(".wt-collapsible")!.hidden).toBe(true);
+  });
+
+  it("states in the collapsed header that a worktree will be created by default (#93)", async () => {
+    const form = await mount();
+    expect(form.querySelector<HTMLElement>(".wt-summary")!.textContent).toMatch(/creates? a worktree/i);
+  });
+
+  it("states in the collapsed header that no worktree will be created for a worktree row (#91, #93)", async () => {
+    urls = stubFetch({
+      projects: [
+        {
+          path: "/home/user/wt-91",
+          name: "wt-91",
+          is_worktree: true,
+          base_repo: "/home/user/maestro",
+          last_activity: "2026-08-20T10:00:00Z",
+        },
+      ],
+    });
+    handle = createSpawnForm({ onSuccess() {} });
+    document.body.appendChild(handle.el);
+    for (let i = 0; i < 40; i++) await Promise.resolve();
+
+    handle.el
+      .querySelectorAll<HTMLButtonElement>(".project-box")
+      .forEach((box) => box.dataset.cwd === "/home/user/wt-91" && box.click());
+    await drain();
+
+    expect(handle.el.querySelector<HTMLElement>(".wt-summary")!.textContent).toMatch(/no worktree/i);
+    // Still collapsed — picking a project must not force it open.
+    expect(handle.el.querySelector<HTMLButtonElement>(".wt-toggle")!.getAttribute("aria-expanded")).toBe(
+      "false",
+    );
+  });
+
+  it("expanding the advanced section does not reorder the fields above it (#93)", async () => {
+    const form = await mount();
+    const before = [...form.querySelectorAll(".field")];
+
+    form.querySelector<HTMLButtonElement>(".wt-toggle")!.click();
+
+    expect(form.querySelector<HTMLButtonElement>(".wt-toggle")!.getAttribute("aria-expanded")).toBe(
+      "true",
+    );
+    expect(form.querySelector<HTMLElement>(".wt-collapsible")!.hidden).toBe(false);
+    expect([...form.querySelectorAll(".field")]).toStrictEqual(before);
+  });
+
   it("does not repopulate a destroyed form when the branch list lands late", async () => {
     const gate: { release?: () => void } = {};
     urls = stubFetch({ gateBranches: (r) => (gate.release = r) });

web/src/styles.css

@@ -727,10 +727,8 @@ textarea {
 }
 
 /* Earlier path segments collapse to their initial; the trailing segment (the
-   one that actually names the dir) stays full. Dim the collapsed prefix. Shared
-   by the sidebar tree and the spawn dialog's recent-directory picker. */
-.folder-name .folder-stem,
-.recent-dir .folder-stem {
+   one that actually names the dir) stays full. Dim the collapsed prefix. */
+.folder-name .folder-stem {
   color: var(--faint);
 }
 
@@ -1286,18 +1284,33 @@ textarea {
 .worktree {
   border: 1px solid var(--border);
   border-radius: var(--r-2);
-  padding: var(--sp-3);
+  padding: 0 var(--sp-3);
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--sp-3);
   background: color-mix(in oklab, var(--surface-2) 50%, transparent);
 }
 
-.worktree legend {
-  padding: 0 6px;
-  color: var(--ink);
-  font-size: var(--fs-13);
+.worktree .wt-toggle {
+  margin: 0 calc(var(--sp-3) * -1);
+  padding-left: var(--sp-3);
+  width: calc(100% + var(--sp-3) * 2);
+}
+
+.wt-summary {
+  color: var(--muted);
+  font-size: var(--fs-12);
+}
+
+.wt-collapsible {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+  padding-bottom: var(--sp-3);
+}
+
+.wt-collapsible[hidden] {
+  display: none;
 }
 
 .form-error {
@@ -1381,8 +1394,9 @@ textarea {
   color: var(--muted);
 }
 
-/* Project picker rows (#59). Worktree rows are indented under their base
-   repository; rows stale beyond 7 days are dimmed but still selectable. */
+/* Working-directory picker (#95). Two steps: a grid of project boxes, then the
+   picked project's worktree choices. Stale beyond 7 days dims but stays
+   selectable. */
 .picker {
   display: flex;
   flex-direction: column;
@@ -1397,73 +1411,155 @@ textarea {
   width: 100%;
 }
 
-.project-row {
+/* `display` from `.field`/`.raw-wrap` outranks the UA sheet's `[hidden]`, so
+   step two and the raw-cwd hatch stayed visible while hidden. */
+.wt-step[hidden],
+.raw-wrap[hidden] {
+  display: none;
+}
+
+.picker.projects {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  align-content: start;
+  gap: var(--sp-2);
+  max-height: 300px;
+  padding: 1px;
+}
+
+.project-box {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  padding: var(--sp-2) var(--sp-3);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-2);
+  color: var(--ink);
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color var(--dur-fast) var(--ease-out),
+    background var(--dur-fast) var(--ease-out);
+}
+
+.project-box:hover {
+  border-color: var(--border-strong);
+}
+
+.project-box.is-active {
+  border-color: var(--accent);
+  background: var(--accent-tint);
+}
+
+.project-box.is-stale {
+  opacity: 0.55;
+}
+
+.project-name {
+  font-size: var(--fs-13);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The whole path, never abbreviated — it is what tells two projects sharing a
+   basename apart. Wraps rather than truncating so none of it is hidden. */
+.project-path {
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+  line-height: 1.35;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+
+.project-meta {
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+  color: var(--faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-meta:empty {
+  display: none;
+}
+
+.project-other {
+  align-self: flex-start;
+  padding: 4px 0;
+  min-height: 30px;
+  background: none;
+  border: 0;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: var(--fs-13);
+  font-style: italic;
+  text-align: left;
+  cursor: pointer;
+}
+
+.project-other:hover {
+  color: var(--ink);
+}
+
+/* Step two: "+ new" (create one) or an existing worktree (run in it). */
+.picker.wt-choices {
+  max-height: 200px;
+}
+
+.wt-choice {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: var(--sp-3);
+  min-height: 32px;
   padding: 6px var(--sp-3);
   background: var(--surface-2);
   border: 1px solid var(--border);
   border-radius: var(--r-2);
   color: var(--ink);
   font-family: inherit;
-  cursor: pointer;
   text-align: left;
+  cursor: pointer;
   transition:
     border-color var(--dur-fast) var(--ease-out),
     background var(--dur-fast) var(--ease-out);
 }
 
-.project-row:hover {
+.wt-choice:hover {
   border-color: var(--border-strong);
 }
 
-.project-row.is-active {
+.wt-choice.is-active {
   border-color: var(--accent);
   background: var(--accent-tint);
 }
 
-.project-row.is-worktree {
-  margin-left: var(--sp-4);
-}
-
-.project-row.is-stale {
-  opacity: 0.55;
-}
-
-.project-info {
-  display: flex;
-  align-items: baseline;
-  gap: var(--sp-2);
-  min-width: 0;
-}
-
-.project-name {
+.wt-choice-name {
+  flex: 0 0 auto;
   font-size: var(--fs-13);
   font-weight: 600;
   white-space: nowrap;
 }
 
-.recent-dir {
+.wt-choice-new .wt-choice-name {
   font-family: var(--font-mono);
-  font-size: var(--fs-12);
-  color: var(--muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: var(--accent);
 }
 
-.recent-cmd {
-  flex: 0 0 auto;
+.wt-choice-sub {
+  min-width: 0;
   font-family: var(--font-mono);
   font-size: var(--fs-12);
+  line-height: 1.35;
   color: var(--muted);
-}
-
-.project-other .recent-dir {
-  font-family: inherit;
-  font-style: italic;
+  text-align: right;
+  overflow-wrap: anywhere;
 }
 
 .picker-empty {

web/src/worktreeStep.test.ts

@@ -0,0 +1,233 @@
+// @vitest-environment happy-dom
+// Second step of the working-directory picker (#95). See the interaction rules
+// block in spawnForm.ts for what each choice means.
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createSpawnForm, type SpawnFormHandle, type SpawnFormValues } from "./spawnForm.js";
+import type { Project } from "./types.js";
+
+const MAESTRO: Project = {
+  path: "/home/user/tea/maestro",
+  name: "maestro",
+  is_worktree: false,
+  last_activity: "2026-08-20T10:00:00Z",
+  last_command: "claude",
+};
+
+const WT_A: Project = {
+  path: "/home/user/tea/maestro/worktrees/bulgarians",
+  name: "bulgarians",
+  is_worktree: true,
+  base_repo: MAESTRO.path,
+  last_activity: "2026-08-22T10:00:00Z",
+};
+
+const WT_B: Project = {
+  path: "/home/user/tea/maestro/worktrees/spawn-v2",
+  name: "spawn-v2",
+  is_worktree: true,
+  base_repo: MAESTRO.path,
+  last_activity: "2026-08-21T10:00:00Z",
+};
+
+const OTHER: Project = {
+  path: "/home/user/tea/rev",
+  name: "rev",
+  is_worktree: false,
+  last_activity: "2026-08-19T10:00:00Z",
+};
+
+function stubFetch(projects: Project[]): string[] {
+  const urls: string[] = [];
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      urls.push(url);
+      const body = url.includes("/api/projects")
+        ? projects
+        : url.includes("/api/names")
+          ? { names: ["amber-fox"] }
+          : url.includes("/api/branches")
+            ? []
+            : { hostname: "h", version: "0", home_dir: "/home/user", presets: [] };
+      return new Response(JSON.stringify(body), { status: 200 });
+    }),
+  );
+  return urls;
+}
+
+describe("spawnForm worktree step (#95)", () => {
+  let handle: SpawnFormHandle | null = null;
+  let urls: string[] = [];
+  let changes: SpawnFormValues[] = [];
+
+  beforeEach(() => {
+    vi.useFakeTimers({ now: Date.parse("2026-08-23T12:00:00Z") });
+    changes = [];
+  });
+
+  afterEach(() => {
+    handle?.destroy();
+    handle = null;
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  });
+
+  const drain = async () => {
+    for (let i = 0; i < 40; i++) await Promise.resolve();
+  };
+
+  async function mount(projects: Project[]): Promise<HTMLFormElement> {
+    urls = stubFetch(projects);
+    handle = createSpawnForm({ onSuccess() {}, onChange: (v) => changes.push(v) });
+    document.body.appendChild(handle.el);
+    await drain();
+    return handle.el;
+  }
+
+  const step = (form: HTMLFormElement) => form.querySelector<HTMLElement>(".wt-step")!;
+  const choices = (form: HTMLFormElement) => [
+    ...form.querySelectorAll<HTMLButtonElement>(".wt-choice"),
+  ];
+  const activeChoice = (form: HTMLFormElement) =>
+    form.querySelector<HTMLButtonElement>(".wt-choice.is-active");
+  const box = (form: HTMLFormElement, path: string) =>
+    form.querySelector<HTMLButtonElement>(`.project-box[data-cwd="${path}"]`)!;
+  const toggle = (form: HTMLFormElement) =>
+    form.querySelector<HTMLInputElement>("input[name=worktree_enabled]")!;
+
+  it("hides the worktree step until a project is picked", async () => {
+    const form = await mount([MAESTRO, WT_A]);
+    expect(step(form).hidden).toBe(true);
+    expect(choices(form)).toEqual([]);
+
+    box(form, MAESTRO.path).click();
+    await drain();
+
+    expect(step(form).hidden).toBe(false);
+  });
+
+  it("lists '+ new' first and selected by default, then the project's worktrees", async () => {
+    const form = await mount([MAESTRO, WT_A, WT_B]);
+    box(form, MAESTRO.path).click();
+    await drain();
+
+    const labels = choices(form).map((c) => c.querySelector(".wt-choice-name")!.textContent);
+    expect(labels).toEqual(["+ new", "bulgarians", "spawn-v2"]);
+    expect(activeChoice(form)!.dataset.kind).toBe("new");
+  });
+
+  it("taking the '+ new' default runs in the repo with the create toggle on", async () => {
+    const form = await mount([MAESTRO, WT_A]);
+    box(form, MAESTRO.path).click();
+    await drain();
+
+    expect(changes.at(-1)!.cwd).toBe(MAESTRO.path);
+    expect(changes.at(-1)!.worktreeEnabled).toBe(true);
+    expect(toggle(form).checked).toBe(true);
+    expect(form.querySelector<HTMLElement>(".wt-repo")!.textContent).toContain(MAESTRO.path);
+    // The scan already knows the repo — no probe.
+    expect(urls.some((u) => u.includes("/api/gitroot"))).toBe(false);
+  });
+
+  it("picking an existing worktree runs in it with the create toggle off (#91)", async () => {
+    const form = await mount([MAESTRO, WT_A, WT_B]);
+    box(form, MAESTRO.path).click();
+    await drain();
+
+    const existing = choices(form).find((c) => c.dataset.cwd === WT_A.path)!;
+    existing.click();
+    await drain();
+
+    expect(changes.at(-1)!.cwd).toBe(WT_A.path);
+    expect(changes.at(-1)!.worktreeEnabled).toBe(false);
+    expect(toggle(form).checked).toBe(false);
+    expect(form.querySelector<HTMLElement>(".wt-body")!.hidden).toBe(true);
+    expect(existing.classList.contains("is-active")).toBe(true);
+    // Still no probe: the scan reported this worktree's repo membership.
+    expect(urls.some((u) => u.includes("/api/gitroot"))).toBe(false);
+    // The project box stays marked — it is what the worktree list belongs to.
+    expect(box(form, MAESTRO.path).classList.contains("is-active")).toBe(true);
+  });
+
+  it("switching back to '+ new' re-enables the create toggle", async () => {
+    const form = await mount([MAESTRO, WT_A]);
+    box(form, MAESTRO.path).click();
+    await drain();
+    choices(form)
+      .find((c) => c.dataset.cwd === WT_A.path)!
+      .click();
+    await drain();
+
+    choices(form)
+      .find((c) => c.dataset.kind === "new")!
+      .click();
+    await drain();
+
+    expect(changes.at(-1)!.cwd).toBe(MAESTRO.path);
+    expect(changes.at(-1)!.worktreeEnabled).toBe(true);
+    expect(toggle(form).checked).toBe(true);
+  });
+
+  it("repopulates and resets to '+ new' when another project is picked", async () => {
+    const form = await mount([MAESTRO, WT_A, OTHER]);
+    box(form, MAESTRO.path).click();
+    await drain();
+    choices(form)
+      .find((c) => c.dataset.cwd === WT_A.path)!
+      .click();
+    await drain();
+
+    box(form, OTHER.path).click();
+    await drain();
+
+    expect(choices(form).map((c) => c.dataset.kind)).toEqual(["new"]);
+    expect(activeChoice(form)!.dataset.kind).toBe("new");
+    expect(changes.at(-1)!.cwd).toBe(OTHER.path);
+    expect(changes.at(-1)!.worktreeEnabled).toBe(true);
+  });
+
+  it("defaults to the worktree itself when the box is a linked worktree (#91)", async () => {
+    // No main checkout in the scan, so the orphan worktree is its own box.
+    const form = await mount([WT_A]);
+    box(form, WT_A.path).click();
+    await drain();
+
+    expect(activeChoice(form)!.dataset.cwd).toBe(WT_A.path);
+    expect(changes.at(-1)!.cwd).toBe(WT_A.path);
+    expect(changes.at(-1)!.worktreeEnabled).toBe(false);
+    expect(toggle(form).checked).toBe(false);
+    expect(form.querySelector<HTMLElement>(".wt-body")!.hidden).toBe(true);
+  });
+
+  it("hides the worktree step again when the operator takes the raw-input hatch", async () => {
+    const form = await mount([MAESTRO, WT_A]);
+    box(form, MAESTRO.path).click();
+    await drain();
+    expect(step(form).hidden).toBe(false);
+
+    form.querySelector<HTMLButtonElement>(".project-other")!.click();
+    await drain();
+
+    expect(step(form).hidden).toBe(true);
+    expect(choices(form)).toEqual([]);
+    expect(form.querySelector(".project-box.is-active")).toBeNull();
+  });
+
+  it("restores the picked worktree from a draft seed", async () => {
+    urls = stubFetch([MAESTRO, WT_A, WT_B]);
+    handle = createSpawnForm({
+      onSuccess() {},
+      seed: { cwd: WT_A.path, cwdRawVisible: false, worktreeEnabled: false },
+    });
+    document.body.appendChild(handle.el);
+    await drain();
+    const form = handle.el;
+
+    expect(step(form).hidden).toBe(false);
+    expect(activeChoice(form)!.dataset.cwd).toBe(WT_A.path);
+    expect(box(form, MAESTRO.path).classList.contains("is-active")).toBe(true);
+    expect(toggle(form).checked).toBe(false);
+  });
+});