feat: add structured session picker

web/src/structured.test.ts

@@ -8,10 +8,16 @@ vi.mock("./api.js", async () => {
     sendStructuredPrompt: vi.fn().mockResolvedValue(undefined),
     cancelStructuredTurn: vi.fn().mockResolvedValue(undefined),
     resolveStructuredApproval: vi.fn().mockResolvedValue(undefined),
+    setStructuredConfig: vi.fn().mockResolvedValue(undefined),
   };
 });
 
-import { cancelStructuredTurn, resolveStructuredApproval, sendStructuredPrompt } from "./api.js";
+import {
+  cancelStructuredTurn,
+  resolveStructuredApproval,
+  sendStructuredPrompt,
+  setStructuredConfig,
+} from "./api.js";
 import { TOGGLE_DRAWER_EVENT } from "./drawer.js";
 import type { CatalogStore } from "./events.js";
 import { createStructuredConnection, type StructuredSocketFactory } from "./structured.js";
@@ -142,6 +148,53 @@ describe("structured connection: data flow", () => {
     conn.dispose();
   });
 
+  it("renders advertised session settings and sends changed values", () => {
+    const ws = new FakeSocket();
+    const conn = mount({ sockets: [ws] });
+    ws.open();
+    ws.emit({
+      type: "reduced_state",
+      state: {
+        ...idleState,
+        config_options: {
+          configOptions: [
+            {
+              id: "model",
+              name: "Model",
+              category: "model",
+              type: "select",
+              currentValue: "opus",
+              options: [
+                { value: "opus", name: "Opus" },
+                { value: "sonnet", name: "Sonnet" },
+              ],
+            },
+            {
+              id: "effort",
+              name: "Effort",
+              category: "thought_level",
+              type: "select",
+              currentValue: "high",
+              options: [{ value: "high", name: "High" }],
+            },
+          ],
+        },
+      },
+    });
+
+    expect(conn.el.querySelector(".structured-config-summary")?.textContent).toBe("Opus · High");
+    (conn.el.querySelector(".structured-config-trigger") as HTMLButtonElement).click();
+    const selects = conn.el.querySelectorAll<HTMLSelectElement>(".structured-config-select");
+    expect(selects).toHaveLength(2);
+    selects[0].value = "sonnet";
+    selects[0].dispatchEvent(new Event("change"));
+    expect(setStructuredConfig).toHaveBeenCalledWith("s1", {
+      config_id: "model",
+      value: "sonnet",
+    });
+    conn.dispose();
+  });
+
   it("applies plan append, patch, and remove without disturbing surrounding rows", () => {
     const ws = new FakeSocket();
     const conn = mount({ sockets: [ws] });