feat(maestro): offer structured spawn view

web/src/spawnForm.test.ts

@@ -6,6 +6,7 @@ const base: SpawnFormValues = {
   command: "claude",
   cwd: "/home/user/project",
   name: "amber-fox",
+  structuredView: false,
   worktreeEnabled: false,
   worktreeBranch: "",
   worktreeBranchMode: "new",
@@ -25,6 +26,22 @@ describe("buildSpawnRequest", () => {
     expect(res).toEqual({ req: { cwd: base.cwd, command: base.command, metadata: {} } });
   });
 
+  it("requests structured view only for Claude Code", () => {
+    expect(buildSpawnRequest({ ...base, structuredView: true }, null)).toEqual({
+      req: {
+        cwd: base.cwd,
+        command: "claude",
+        metadata: { name: "amber-fox" },
+        view: "Structured",
+      },
+    });
+    expect(
+      buildSpawnRequest({ ...base, command: "opencode", structuredView: true }, null),
+    ).toEqual({
+      req: { cwd: base.cwd, command: "opencode", metadata: { name: "amber-fox" } },
+    });
+  });
+
   it("attaches a trimmed branch when worktree is enabled, and always cleans up", () => {
     const res = buildSpawnRequest(
       { ...base, worktreeEnabled: true, worktreeBranch: "  feat/foo  " },

web/src/spawnForm.ts

@@ -11,6 +11,7 @@ import { attachDirAutocomplete } from "./dirAutocomplete.js";
 import { parentDir } from "./paths.js";
 import { filterProjects, groupProjects, isStale, sortProjects } from "./projectList.js";
 import type { ProjectGroup } from "./projectList.js";
+import { splitCommand } from "./toolIcon.js";
 import { abbreviateCwd } from "./types.js";
 import type { BranchInfo, CreateSessionRequest, Project, Session, SpawnPreset } from "./types.js";
 
@@ -40,6 +41,7 @@ export interface SpawnFormValues {
   command: string;
   cwd: string;
   name: string;
+  structuredView: boolean;
   worktreeEnabled: boolean;
   worktreeBranch: string;
   worktreeBranchEdited: boolean;
@@ -66,6 +68,10 @@ export function buildSpawnRequest(
     metadata,
   };
 
+  if (values.structuredView && splitCommand(values.command).tool === "claude") {
+    req.view = "Structured";
+  }
+
   if (values.worktreeEnabled) {
     const mode = values.worktreeBranchMode ?? "new";
     const branch = values.worktreeBranch.trim();
@@ -153,6 +159,10 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
         <span class="wt-summary"></span>
       </button>
       <div class="wt-collapsible" hidden>
+        <label class="row-inline structured-view" hidden>
+          <input type="checkbox" name="structured_view" />
+          Structured view
+        </label>
         <div class="field wt-step" hidden>
           <span class="field-label">Worktree</span>
           <div class="picker wt-choices"></div>
@@ -203,6 +213,8 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
   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 structuredWrap = form.querySelector(".structured-view") as HTMLElement;
+  const structuredView = form.querySelector("input[name=structured_view]") 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;
@@ -248,6 +260,7 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
       command,
       cwd,
       name: nameInput.value,
+      structuredView: structuredView.checked,
       worktreeEnabled: wtEnabled.checked,
       worktreeBranch: branchValue(),
       worktreeBranchEdited: branchEdited,
@@ -317,6 +330,7 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
     } else {
       command = preset!.command;
     }
+    updateStructuredAvailability();
     for (const tile of cmdTiles.querySelectorAll(".tile")) {
       tile.classList.toggle("is-active", (tile as HTMLElement).dataset.id === id);
     }
@@ -354,10 +368,19 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
   // operator has already touched (#76).
   let commandTouched = false;
 
+  function updateStructuredAvailability(): void {
+    const supported = splitCommand(command).tool === "claude";
+    structuredWrap.hidden = !supported;
+    if (!supported) structuredView.checked = false;
+  }
+
+  structuredView.addEventListener("change", emit);
+
   cmdRaw.addEventListener("input", () => {
     if (selectedPresetId === "custom" || presets.find((p) => p.id === selectedPresetId)?.command === "") {
       commandTouched = true;
       command = cmdRaw.value.trim();
+      updateStructuredAvailability();
       emit();
     }
   });
@@ -844,10 +867,11 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
     if (e.key !== "Enter" || e.defaultPrevented) return;
     const target = e.target as HTMLElement;
 
-    if (target === wtEnabled) {
+    if (target === wtEnabled || target === structuredView) {
       e.preventDefault();
-      wtEnabled.checked = !wtEnabled.checked;
-      wtEnabled.dispatchEvent(new Event("change"));
+      const checkbox = target as HTMLInputElement;
+      checkbox.checked = !checkbox.checked;
+      checkbox.dispatchEvent(new Event("change"));
       return;
     }
 
@@ -885,6 +909,7 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
         command,
         cwd,
         name: nameInput.value,
+        structuredView: structuredView.checked,
         worktreeEnabled: wtEnabled.checked,
         worktreeBranch: branchValue(),
         worktreeBranchEdited: branchEdited,

web/src/spawnFormStructured.test.ts

@@ -0,0 +1,108 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { createSpawnForm, type SpawnFormHandle } from "./spawnForm.js";
+
+function stubApi(): RequestInit[] {
+  const sessionRequests: RequestInit[] = [];
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = String(input);
+      if (url.includes("/api/sessions") && init?.method === "POST") {
+        sessionRequests.push(init);
+        return new Response(JSON.stringify({ id: "s1", command: "claude", cwd: "/srv/work" }), {
+          status: 200,
+        });
+      }
+      if (url.includes("/api/info")) {
+        return new Response(
+          JSON.stringify({ hostname: "h", version: "0", home_dir: "/home/user" }),
+          { 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 sessionRequests;
+}
+
+describe("spawn form structured view", () => {
+  let handle: SpawnFormHandle | null = null;
+
+  async function drain(): Promise<void> {
+    for (let i = 0; i < 20; i++) await Promise.resolve();
+  }
+
+  afterEach(async () => {
+    handle?.destroy();
+    handle = null;
+    await drain();
+    vi.unstubAllGlobals();
+  });
+
+  it("is default-off and shown only for the resolved Claude Code command", async () => {
+    stubApi();
+    handle = createSpawnForm({ onSuccess() {} });
+    document.body.appendChild(handle.el);
+    await drain();
+
+    const wrap = handle.el.querySelector<HTMLElement>(".structured-view")!;
+    const checkbox = wrap.querySelector<HTMLInputElement>("input")!;
+    const disclosure = handle.el.querySelector<HTMLElement>(".wt-collapsible")!;
+    expect(disclosure.hidden).toBe(true);
+    handle.el.querySelector<HTMLButtonElement>(".wt-toggle")!.click();
+    expect(disclosure.hidden).toBe(false);
+    expect(wrap.hidden).toBe(false);
+    expect(checkbox.checked).toBe(false);
+
+    handle.el.querySelector<HTMLButtonElement>('[data-id="opencode"]')!.click();
+    expect(wrap.hidden).toBe(true);
+
+    handle.el.querySelector<HTMLButtonElement>('[data-id="claude"]')!.click();
+    expect(wrap.hidden).toBe(false);
+  });
+
+  it("clears a checked value when the command changes away from Claude Code", async () => {
+    stubApi();
+    handle = createSpawnForm({ onSuccess() {} });
+    document.body.appendChild(handle.el);
+    await drain();
+
+    const checkbox = handle.el.querySelector<HTMLInputElement>("input[name=structured_view]")!;
+    checkbox.click();
+    expect(checkbox.checked).toBe(true);
+
+    const custom = handle.el.querySelector<HTMLButtonElement>('[data-id="custom"]')!;
+    custom.click();
+    const command = handle.el.querySelector<HTMLInputElement>(".cmd-raw")!;
+    command.value = "opencode";
+    command.dispatchEvent(new Event("input"));
+
+    expect(checkbox.closest<HTMLElement>(".structured-view")!.hidden).toBe(true);
+    expect(checkbox.checked).toBe(false);
+  });
+
+  it("emits Structured in the submitted request when selected", async () => {
+    const requests = stubApi();
+    handle = createSpawnForm({
+      seed: { cwd: "/srv/work", cwdRawVisible: true, worktreeEnabled: false },
+      onSuccess() {},
+    });
+    document.body.appendChild(handle.el);
+    await drain();
+
+    handle.el.querySelector<HTMLInputElement>("input[name=structured_view]")!.click();
+    handle.el.requestSubmit();
+    await drain();
+
+    expect(requests).toHaveLength(1);
+    expect(JSON.parse(String(requests[0].body))).toMatchObject({
+      command: "claude",
+      view: "Structured",
+    });
+  });
+});

web/src/types.ts

@@ -276,6 +276,7 @@ export interface CreateSessionRequest {
   env?: Record<string, string>;
   metadata?: Record<string, unknown>;
   worktree?: WorktreeSpec;
+  view?: SessionView;
 }
 
 export type CatalogEvent =