feat(maestro): pick a project, then its worktree

The working-directory picker was a flat list mixing repositories with
their worktrees, each row repeating the project name as an abbreviated
path. It is now two steps: a grid of project boxes carrying the full
unabbreviated path, then — only once a project is picked — that
repository's worktrees with "+ new" as the default.

"+ new" creates a worktree; picking an existing one runs in it and
leaves the create-worktree toggle off, since the daemon never adopts
(docs/WORKTREES.md). That is #91's rule, now an explicit choice rather
than an inference from which row was clicked.

Also fixes `.raw-wrap[hidden]`: `display: flex` outranked the UA sheet's
`[hidden]`, so the free-text cwd input showed even when hidden.

The interaction rules are listed in spawnForm.ts for the TUI mirror (#96)
to follow.

Refs #95

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);
 }
 
@@ -1381,8 +1379,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 +1396,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 {