// @vitest-environment happy-dom
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

vi.mock("./api.js", async () => {
  const actual = await vi.importActual<typeof import("./api.js")>("./api.js");
  return {
    ...actual,
    sendStructuredPrompt: vi.fn().mockResolvedValue(undefined),
    uploadStructuredFile: vi.fn().mockResolvedValue({ path: "/uploads/pasted.txt" }),
    cancelStructuredTurn: vi.fn().mockResolvedValue(undefined),
    resolveStructuredApproval: vi.fn().mockResolvedValue(undefined),
    setStructuredConfig: vi.fn().mockResolvedValue(undefined),
  };
});

import {
  cancelStructuredTurn,
  resolveStructuredApproval,
  sendStructuredPrompt,
  uploadStructuredFile,
  setStructuredConfig,
} from "./api.js";
import { TOGGLE_DRAWER_EVENT } from "./drawer.js";
import type { CatalogStore } from "./events.js";
import { createStructuredConnection, type StructuredSocketFactory } from "./structured.js";
import type { ReducedState, StructuredEvent, TranscriptRow } from "./types.js";

/** Just enough of a WebSocket for the connection to drive (mirrors
 *  events.test.ts's FakeSocket, adapted for JSON structured events). */
class FakeSocket {
  onopen: (() => void) | null = null;
  onmessage: ((ev: { data: string }) => void) | null = null;
  onerror: (() => void) | null = null;
  onclose: ((ev: { code: number; reason: string }) => void) | null = null;
  closed = false;

  open(): void {
    this.onopen?.();
  }
  emit(event: StructuredEvent): void {
    this.onmessage?.({ data: JSON.stringify(event) });
  }
  drop(code = 1006, reason = ""): void {
    this.onclose?.({ code, reason });
  }
  close(): void {
    this.closed = true;
  }
}

function row(id: string, kind: TranscriptRow["kind"], data: unknown): TranscriptRow {
  return { id, kind, data };
}

function toolRow(id: string, text: string): TranscriptRow {
  return row(id, "tool_call", {
    title: `Read(${id})`,
    status: "completed",
    content: [{ type: "content", content: { type: "text", text } }],
  });
}

function diffRow(id: string, newText: string): TranscriptRow {
  return row(id, "tool_diff", {
    title: `Edit(${id})`,
    status: "completed",
    content: [{ type: "diff", path: "file.ts", oldText: "before", newText }],
  });
}

const idleState: ReducedState = { turn: { responding: false, thinking: false, active_tool_calls: [] } };

const allApprovalOptions = [
  { optionId: "a1", name: "Allow once", kind: "allow_once" as const },
  { optionId: "a2", name: "Allow always", kind: "allow_always" as const },
  { optionId: "r1", name: "Reject once", kind: "reject_once" as const },
];

function mount(opts: {
  sockets: FakeSocket[];
  shouldReconnect?: (id: string, code: number) => boolean;
  store?: CatalogStore;
}) {
  let i = 0;
  const factory: StructuredSocketFactory = () => opts.sockets[i++] as unknown as WebSocket;
  const conn = createStructuredConnection(
    "s1",
    { shouldReconnect: opts.shouldReconnect },
    { name: "s1", command: "claude", view: "Structured" },
    opts.store,
    factory,
  );
  document.body.appendChild(conn.el);
  return conn;
}

describe("structured connection: data flow", () => {
  beforeEach(() => vi.clearAllMocks());

  it("converts long pasted text into a removable file and sends it without reply text", async () => {
    const conn = mount({ sockets: [new FakeSocket()] });
    const input = conn.el.querySelector("textarea")!;
    const paste = new Event("paste", { bubbles: true, cancelable: true });
    Object.defineProperty(paste, "clipboardData", { value: {
      files: [], getData: () => "a".repeat(4000),
    } });
    input.dispatchEvent(paste);
    expect(paste.defaultPrevented).toBe(true);
    expect(input.value).toBe("");
    expect(conn.el.querySelector(".structured-attachments")!.textContent).toContain("pasted-1.txt");
    conn.el.querySelector("form")!.dispatchEvent(new Event("submit", { cancelable: true }));
    await vi.waitFor(() => expect(sendStructuredPrompt).toHaveBeenCalledWith("s1", expect.stringContaining("/uploads/pasted.txt")));
    expect(uploadStructuredFile).toHaveBeenCalledWith("s1", expect.objectContaining({ name: "pasted-1.txt", size: 4000 }));
    conn.dispose();
  });

  it("leaves short pastes alone", () => {
    const conn = mount({ sockets: [new FakeSocket()] });
    const paste = new Event("paste", { bubbles: true, cancelable: true });
    Object.defineProperty(paste, "clipboardData", { value: { files: [], getData: () => "hello" } });
    conn.el.querySelector("textarea")!.dispatchEvent(paste);
    expect(paste.defaultPrevented).toBe(false);
    conn.dispose();
  });

  it("retains failed uploads for retry and lets the operator remove them", async () => {
    vi.mocked(uploadStructuredFile).mockRejectedValueOnce(new Error("Upload failed"));
    const conn = mount({ sockets: [new FakeSocket()] });
    const input = conn.el.querySelector("textarea")!;
    input.value = "Read this";
    const paste = new Event("paste", { bubbles: true, cancelable: true });
    Object.defineProperty(paste, "clipboardData", { value: {
      files: [new File(["content"], "notes.txt")], getData: () => "",
    } });
    input.dispatchEvent(paste);
    conn.el.querySelector("form")!.dispatchEvent(new Event("submit", { cancelable: true }));
    await vi.waitFor(() => expect(conn.el.textContent).toContain("Upload failed"));
    expect(input.value).toBe("Read this");
    expect(sendStructuredPrompt).not.toHaveBeenCalled();
    const remove = conn.el.querySelector<HTMLButtonElement>('[aria-label="Remove notes.txt"]')!;
    expect(remove).not.toBeNull();
    remove.click();
    expect(conn.el.querySelector<HTMLElement>(".structured-attachments")!.hidden).toBe(true);
    conn.dispose();
  });

  it("renders every row from the initial snapshot", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 2,
        rows: [
          row("user:1", "user", { content: { type: "text", text: "hello" } }),
          row("agent:1", "agent_text", { content: { type: "text", text: "hi there" } }),
        ],
      },
    });
    ws.emit({ type: "reduced_state", state: idleState });
    expect(conn.el.textContent).toContain("hello");
    expect(conn.el.textContent).toContain("hi there");
    conn.dispose();
  });

  it("shows turn details only while that footer is the conversation's final item", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    const turnMeta = (id: string, elapsedMs: number) =>
      row(id, "notice", {
        maestroTurnMeta: { elapsedMs, contextTokens: 12_000, outcome: "completed", model: "codex" },
      });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 4,
        rows: [
          row("user:1", "user", { content: { type: "text", text: "first" } }),
          turnMeta("turn:1", 1_000),
          row("user:2", "user", { content: { type: "text", text: "second" } }),
          turnMeta("turn:2", 2_000),
        ],
      },
    });

    expect(conn.el.querySelectorAll(".st-turn-meta")).toHaveLength(1);
    expect(conn.el.querySelector(".st-turn-meta")?.textContent).toContain("2s");

    ws.emit({
      type: "projection_update",
      transcript: {
        type: "append",
        row: row("user:3", "user", { content: { type: "text", text: "third" } }),
      },
      state: idleState,
    });
    expect(conn.el.querySelector(".st-turn-meta")).toBeNull();
    conn.dispose();
  });

  it("keeps state-only plan rows out of the transcript", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 3,
        rows: [
          row("user:1", "user", { content: { type: "text", text: "before plan" } }),
          row("plan", "plan", { entries: [{ content: "ship it", status: "pending" }] }),
          row("agent:1", "agent_text", { content: { type: "text", text: "after plan" } }),
        ],
      },
    });
    ws.emit({
      type: "reduced_state",
      state: {
        ...idleState,
        plan: { entries: [{ content: "ship it", priority: "high", status: "pending" }] },
      },
    });

    const transcript = conn.el.querySelector(".structured-rows")!;
    expect(transcript.querySelectorAll(".st-row")).toHaveLength(2);
    expect(transcript.querySelector('[data-row-id="plan"]')).toBeNull();
    expect(transcript.textContent).toContain("before plan");
    expect(transcript.textContent).toContain("after plan");
    expect(transcript.textContent).not.toContain("[plan]");
    expect(conn.el.querySelector(".structured-rail")).toBeNull();
    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-trigger")?.getAttribute("aria-label")).toBe(
      "Session settings. Model: Opus. Effort: 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] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 1,
        rows: [row("user:1", "user", { content: { type: "text", text: "keep me" } })],
      },
    });
    ws.emit({ type: "reduced_state", state: idleState });

    ws.emit({
      type: "projection_update",
      transcript: {
        type: "append",
        row: row("plan", "plan", { entries: [{ content: "first", status: "pending" }] }),
      },
      state: {
        ...idleState,
        plan: { entries: [{ content: "first", priority: "high", status: "pending" }] },
      },
    });
    ws.emit({
      type: "projection_update",
      transcript: {
        type: "append",
        row: row("agent:1", "agent_text", { content: { type: "text", text: "still here" } }),
      },
      state: {
        ...idleState,
        plan: { entries: [{ content: "first", priority: "high", status: "pending" }] },
      },
    });
    ws.emit({
      type: "projection_update",
      transcript: {
        type: "patch",
        row: row("plan", "plan", { entries: [{ content: "updated", status: "completed" }] }),
      },
      state: {
        ...idleState,
        plan: { entries: [{ content: "updated", priority: "high", status: "completed" }] },
      },
    });

    const transcript = conn.el.querySelector(".structured-rows")!;
    expect([...transcript.querySelectorAll<HTMLElement>(".st-row")].map((el) => el.dataset.rowId)).toEqual([
      "user:1",
      "agent:1",
    ]);
    expect(transcript.textContent).not.toContain("updated");

    ws.emit({
      type: "projection_update",
      transcript: { type: "remove", id: "plan" },
      state: idleState,
    });
    ws.emit({
      type: "projection_update",
      transcript: {
        type: "patch",
        row: row("agent:1", "agent_text", { content: { type: "text", text: "patched neighbor" } }),
      },
      state: idleState,
    });
    ws.emit({
      type: "projection_update",
      transcript: { type: "remove", id: "user:1" },
      state: idleState,
    });

    expect(conn.el.querySelector(".structured-rail")).toBeNull();
    expect([...transcript.querySelectorAll<HTMLElement>(".st-row")].map((el) => el.dataset.rowId)).toEqual([
      "agent:1",
    ]);
    expect(transcript.textContent).toContain("patched neighbor");
    conn.dispose();
  });

  it("appends and patches rows via projection_update without duplicating them", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    ws.emit({ type: "reduced_state", state: idleState });
    ws.emit({
      type: "projection_update",
      transcript: { type: "append", row: row("agent:1", "agent_text", { content: { type: "text", text: "partial" } }) },
      state: idleState,
    });
    expect(conn.el.querySelector('[data-row-id="agent:1"]')?.classList).toContain("st-row-enter");
    ws.emit({
      type: "projection_update",
      transcript: { type: "patch", row: row("agent:1", "agent_text", { content: { type: "text", text: "partial done" } }) },
      state: idleState,
    });
    const rows = conn.el.querySelectorAll(".st-row-agent");
    expect(rows).toHaveLength(1);
    expect(rows[0].classList).not.toContain("st-row-enter");
    expect(conn.el.textContent).toContain("partial done");
    expect(conn.el.textContent).not.toContain("partial\n"); // the un-patched text is gone, not appended beside it
    conn.dispose();
  });

  it("groups multiple tools in one user turn but keeps separate turns separate", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 6,
        rows: [
          row("user:1", "user", { content: { type: "text", text: "first" } }),
          toolRow("tool:1", "one"),
          toolRow("tool:2", "two"),
          row("user:2", "user", { content: { type: "text", text: "second" } }),
          toolRow("tool:3", "three"),
        ],
      },
    });
    const groups = conn.el.querySelectorAll<HTMLElement>(".st-tool-group");
    expect(groups).toHaveLength(1);
    expect(groups[0].querySelector(".st-tool-group-head")!.textContent).toContain("2 tool calls");
    expect(groups[0].querySelector<HTMLElement>(".st-tool-group-body")!.getAttribute("aria-hidden")).toBe("true");
    expect(conn.el.querySelector('[data-row-id="tool:3"]')?.closest(".st-tool-group")).toBeNull();
    conn.dispose();
  });

  it("absorbs intermediate agent text into tool group, keeps final text outside", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 8,
        rows: [
          row("user:1", "user", { content: { type: "text", text: "do it" } }),
          row("agent:1", "agent_text", { content: { type: "text", text: "Let me check" } }),
          toolRow("tool:1", "one"),
          toolRow("tool:2", "two"),
          row("agent:2", "agent_text", { content: { type: "text", text: "Found issues, fixing" } }),
          toolRow("tool:3", "three"),
          toolRow("tool:4", "four"),
          row("agent:3", "agent_text", { content: { type: "text", text: "All done" } }),
        ],
      },
    });
    const groups = conn.el.querySelectorAll<HTMLElement>(".st-tool-group");
    expect(groups).toHaveLength(1);
    // Header counts only tool rows, not intermediate text.
    expect(groups[0].querySelector(".st-tool-group-head")!.textContent).toContain("4 tool calls");
    // Intermediate text (agent:2) is inside the group.
    expect(conn.el.querySelector('[data-row-id="agent:2"]')?.closest(".st-tool-group")).not.toBeNull();
    // First text (agent:1) is outside — it precedes all tools.
    expect(conn.el.querySelector('[data-row-id="agent:1"]')?.closest(".st-tool-group")).toBeNull();
    // Final text (agent:3) is outside — no tool follows it.
    expect(conn.el.querySelector('[data-row-id="agent:3"]')?.closest(".st-tool-group")).toBeNull();
    conn.dispose();
  });

  it("keeps last intermediate text outside group while turn is active", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    const respondingState: ReducedState = {
      turn: { responding: true, thinking: false, active_tool_calls: [] },
    };
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 6,
        rows: [
          row("user:1", "user", { content: { type: "text", text: "do it" } }),
          toolRow("tool:1", "one"),
          row("agent:1", "agent_text", { content: { type: "text", text: "Now fixing" } }),
          toolRow("tool:2", "two"),
          row("agent:2", "agent_text", { content: { type: "text", text: "Found more" } }),
          toolRow("tool:3", "three"),
        ],
      },
    });
    ws.emit({ type: "reduced_state", state: respondingState });
    // Intermediate updates stay inside the collapsed activity disclosure,
    // rather than becoming a second visible transcript alongside its summary.
    expect(conn.el.querySelector('[data-row-id="agent:2"]')?.closest(".st-tool-group")).not.toBeNull();
    expect(conn.el.querySelector('[data-row-id="agent:1"]')?.closest(".st-tool-group")).not.toBeNull();
    // It remains collapsed when the turn ends.
    ws.emit({ type: "reduced_state", state: idleState });
    expect(conn.el.querySelector('[data-row-id="agent:2"]')?.closest(".st-tool-group")).not.toBeNull();
    expect(conn.el.querySelector('[data-row-id="agent:1"]')?.closest(".st-tool-group")).not.toBeNull();
    conn.dispose();
  });

  it("collapses trailing thought commentary with a turn's tool activity", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 5,
        rows: [
          row("user:1", "user", { content: { type: "text", text: "do it" } }),
          toolRow("tool:1", "one"),
          toolRow("tool:2", "two"),
          row("thought:1", "agent_thought", { content: { type: "text", text: "Checking the next step" } }),
          row("thought:2", "agent_thought", { content: { type: "text", text: "Preparing the change" } }),
        ],
      },
    });
    for (const id of ["thought:1", "thought:2"]) {
      expect(conn.el.querySelector(`[data-row-id="${id}"]`)?.closest(".st-tool-group")).not.toBeNull();
    }
    conn.dispose();
  });

  it("keeps an expanded running tool open without emitting a click when patched", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 1,
        rows: [
          row("tool:1", "tool_call", {
            title: "Bash(pnpm test)",
            status: "in_progress",
            content: [{ type: "content", content: { type: "text", text: "starting" } }],
          }),
        ],
      },
    });
    ws.emit({ type: "reduced_state", state: idleState });

    const originalHead = conn.el.querySelector<HTMLButtonElement>(".st-tool-head")!;
    originalHead.click();
    expect(originalHead.getAttribute("aria-expanded")).toBe("true");
    const clickListener = vi.fn();
    window.addEventListener("click", clickListener, { capture: true, once: true });

    ws.emit({
      type: "projection_update",
      transcript: {
        type: "patch",
        row: row("tool:1", "tool_call", {
          title: "Bash(pnpm test)",
          status: "in_progress",
          content: [{ type: "content", content: { type: "text", text: "still running" } }],
        }),
      },
      state: idleState,
    });

    expect(clickListener).not.toHaveBeenCalled();
    window.removeEventListener("click", clickListener, true);
    const patchedHead = conn.el.querySelector<HTMLButtonElement>(".st-tool-head")!;
    expect(patchedHead).not.toBe(originalHead);
    expect(patchedHead.getAttribute("aria-expanded")).toBe("true");
    expect(conn.el.querySelector<HTMLElement>(".st-tool-out")!.hidden).toBe(false);
    expect(conn.el.textContent).toContain("still running");
    conn.dispose();
  });

  it("restores focus to a patched tool header with the same stable row id", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 1,
        rows: [row("tool:1", "tool_call", { title: "Read(file.ts)", status: "in_progress" })],
      },
    });
    ws.emit({ type: "reduced_state", state: idleState });
    const originalHead = conn.el.querySelector<HTMLButtonElement>(".st-tool-head")!;
    originalHead.focus();
    expect(document.activeElement).toBe(originalHead);

    ws.emit({
      type: "projection_update",
      transcript: {
        type: "patch",
        row: row("tool:1", "tool_call", { title: "Read(file.ts)", status: "completed" }),
      },
      state: idleState,
    });

    const patchedHead = conn.el.querySelector<HTMLButtonElement>(".st-tool-head")!;
    expect(patchedHead).not.toBe(originalHead);
    expect(document.activeElement).toBe(patchedHead);
    conn.dispose();
  });

  it("does not move unrelated focus when a tool row is patched", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 1,
        rows: [row("tool:1", "tool_call", { title: "Read(file.ts)", status: "in_progress" })],
      },
    });
    ws.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector<HTMLTextAreaElement>(".structured-input")!;
    input.focus();

    ws.emit({
      type: "projection_update",
      transcript: {
        type: "patch",
        row: row("tool:1", "tool_call", { title: "Read(file.ts)", status: "completed" }),
      },
      state: idleState,
    });

    expect(document.activeElement).toBe(input);
    conn.dispose();
  });
});

describe("structured connection: turn/composer gating", () => {
  beforeEach(() => vi.clearAllMocks());

  const commandNotice = (commands: Array<{ name: string; description: string; hint?: string }>) =>
    row("commands", "notice", {
      sessionUpdate: "available_commands_update",
      availableCommands: commands.map(({ name, description, hint }) => ({
        name,
        description,
        ...(hint ? { input: { hint } } : {}),
      })),
    });

  it("autocompletes the live ACP command catalog with keyboard navigation", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 1,
        rows: [
          commandNotice([
            { name: "yolo", description: "Implement directly" },
            { name: "blitz", description: "Complete a milestone", hint: "<milestone>" },
          ]),
        ],
      },
    });
    ws.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector<HTMLTextAreaElement>(".structured-input")!;
    const menu = conn.el.querySelector<HTMLElement>(".structured-command-menu")!;
    input.value = "/";
    input.dispatchEvent(new Event("input"));

    expect(menu.hidden).toBe(false);
    expect([...menu.querySelectorAll(".structured-command-name")].map((node) => node.textContent)).toEqual([
      "/blitz",
      "/yolo",
    ]);
    expect(menu.querySelector(".structured-command-hint")!.textContent).toBe("<milestone>");

    input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
    expect(input.value).toBe("/yolo ");
    expect(menu.hidden).toBe(true);
    expect(sendStructuredPrompt).not.toHaveBeenCalled();

    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
    expect(sendStructuredPrompt).toHaveBeenCalledWith("s1", "/yolo ");
    conn.dispose();
  });

  it("filters commands as the operator types and accepts a touch selection", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 1,
        rows: [
          commandNotice([
            { name: "hourlog", description: "Reconcile hours" },
            { name: "humanizer", description: "Rewrite prose" },
            { name: "blitz", description: "Complete a milestone" },
          ]),
        ],
      },
    });
    ws.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector<HTMLTextAreaElement>(".structured-input")!;
    input.value = "/hum";
    input.dispatchEvent(new Event("input"));
    const options = conn.el.querySelectorAll<HTMLElement>(".structured-command-option");
    expect(options).toHaveLength(1);
    expect(options[0].textContent).toContain("/humanizer");
    options[0].click();
    expect(input.value).toBe("/humanizer ");
    expect(document.activeElement).toBe(input);
    conn.dispose();
  });

  it("completes the slash token under the caret without replacing surrounding text", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 1,
        rows: [
          commandNotice([
            { name: "security-review", description: "Review pending changes" },
            { name: "status", description: "Show status" },
            { name: "blitz", description: "Complete a milestone" },
          ]),
        ],
      },
    });
    ws.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector<HTMLTextAreaElement>(".structured-input")!;
    input.value = "asd /s dsa";
    input.setSelectionRange(6, 6);
    input.dispatchEvent(new Event("input"));

    const options = conn.el.querySelectorAll<HTMLElement>(".structured-command-option");
    expect([...options].map((option) => option.querySelector(".structured-command-name")!.textContent)).toEqual([
      "/security-review",
      "/status",
    ]);
    options[0].click();
    expect(input.value).toBe("asd /security-review dsa");
    expect(input.selectionStart).toBe(input.value.indexOf("dsa"));
    expect(input.selectionEnd).toBe(input.selectionStart);
    conn.dispose();
  });

  it("replaces the rest of a partially edited slash token after the caret", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 1,
        rows: [commandNotice([{ name: "status", description: "Show status" }])],
      },
    });
    ws.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector<HTMLTextAreaElement>(".structured-input")!;
    input.value = "before /stale after";
    input.setSelectionRange(9, 9);
    input.dispatchEvent(new Event("input"));
    conn.el.querySelector<HTMLElement>(".structured-command-option")!.click();
    expect(input.value).toBe("before /status after");
    conn.dispose();
  });

  it("keeps the composer available while a turn is active", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    const cancel = conn.el.querySelector(".structured-cancel") as HTMLButtonElement;
    ws.emit({ type: "reduced_state", state: { turn: { responding: true, thinking: false, active_tool_calls: [] } } });
    expect(input.disabled).toBe(false);
    expect(cancel.hidden).toBe(false);
    expect((conn.el.querySelector(".structured-send span") as HTMLElement).textContent).toBe("Send");
    ws.emit({ type: "reduced_state", state: idleState });
    expect(input.disabled).toBe(false);
    expect(cancel.hidden).toBe(true);
    expect((conn.el.querySelector(".structured-send span") as HTMLElement).textContent).toBe("Send");
    conn.dispose();
  });

  it("shows live thinking time, tool activity, and context usage", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    const activity = conn.el.querySelector<HTMLElement>(".structured-activity")!;
    ws.emit({
      type: "reduced_state",
      state: {
        turn: {
          responding: true,
          thinking: true,
          active_tool_calls: [],
          started_at: new Date().toISOString(),
          started_context_tokens: 10_000,
        },
        usage: { used: 12_400, size: 200_000 },
      },
    });
    expect(activity.hidden).toBe(false);
    expect(activity.textContent).toContain("Thinking · 0s · 12.4k context / 200k context");

    ws.emit({
      type: "reduced_state",
      state: {
        turn: { responding: true, thinking: false, active_tool_calls: ["bash-1", "read-1"] },
        usage: { used: 12_800, size: 200_000 },
      },
    });
    expect(activity.textContent).toContain("Running 2 tools");
    ws.emit({ type: "reduced_state", state: idleState });
    expect(activity.hidden).toBe(true);
    conn.dispose();
  });

  it("sends a prompt on Enter, clears the draft, and restores it on failure", async () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    ws.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    input.value = "do the thing";
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));
    expect(sendStructuredPrompt).toHaveBeenCalledWith("s1", "do the thing");
    expect(input.value).toBe("");
    ws.emit({ type: "reduced_state", state: { turn: { responding: true, thinking: false, active_tool_calls: [] } } });
    ws.emit({ type: "reduced_state", state: idleState });

    vi.mocked(sendStructuredPrompt).mockRejectedValueOnce(new Error("boom"));
    input.value = "retry me";
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));
    await Promise.resolve();
    await Promise.resolve();
    expect(input.value).toBe("retry me");
    expect(conn.el.textContent).toContain("boom");
    conn.dispose();
  });

  it("queues a second message before begin-turn is projected", () => {
    vi.mocked(sendStructuredPrompt).mockImplementationOnce(() => new Promise(() => {}));
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    ws.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    const send = conn.el.querySelector(".structured-send") as HTMLButtonElement;
    const form = conn.el.querySelector(".structured-composer") as HTMLFormElement;
    input.value = "only once";

    form.dispatchEvent(new SubmitEvent("submit", { bubbles: true, cancelable: true }));
    input.value = "queued next";
    form.dispatchEvent(new SubmitEvent("submit", { bubbles: true, cancelable: true }));

    expect(input.disabled).toBe(false);
    expect(send.disabled).toBe(false);
    expect(sendStructuredPrompt).toHaveBeenCalledTimes(1);
    expect(sendStructuredPrompt).toHaveBeenCalledWith("s1", "only once");
    const queued = conn.el.querySelectorAll(".st-row-queued");
    expect(queued).toHaveLength(1);
    expect(queued[0].textContent).toBe("queued next");
    conn.dispose();
  });

  it("dispatches queued messages in order as turns become idle", async () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    const submit = (text: string) => {
      input.value = text;
      input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));
    };

    submit("first");
    ws.emit({ type: "reduced_state", state: { turn: { responding: true, thinking: false, active_tool_calls: [] } } });
    submit("second");
    submit("third");
    expect(sendStructuredPrompt).toHaveBeenCalledTimes(1);
    expect(conn.el.querySelectorAll(".st-row-queued")).toHaveLength(2);

    await Promise.resolve().then(() => Promise.resolve());
    ws.emit({ type: "reduced_state", state: idleState });
    expect(sendStructuredPrompt).toHaveBeenNthCalledWith(2, "s1", "second");
    ws.emit({ type: "reduced_state", state: { turn: { responding: true, thinking: false, active_tool_calls: [] } } });
    await Promise.resolve().then(() => Promise.resolve());
    ws.emit({ type: "reduced_state", state: idleState });
    expect(sendStructuredPrompt).toHaveBeenNthCalledWith(3, "s1", "third");
    expect(conn.el.querySelectorAll(".st-row-queued")).toHaveLength(0);
    conn.dispose();
  });

  it("does not overwrite a newer operator draft when the matching request fails", async () => {
    let reject!: (error: unknown) => void;
    vi.mocked(sendStructuredPrompt).mockImplementationOnce(
      () => new Promise((_, rejectPromise) => { reject = rejectPromise; }),
    );
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    ws.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    input.value = "first prompt";
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));
    ws.emit({ type: "reduced_state", state: { turn: { responding: true, thinking: false, active_tool_calls: [] } } });
    ws.emit({ type: "reduced_state", state: idleState });
    input.value = "newer draft";

    reject(new Error("late failure"));
    await Promise.resolve().then(() => Promise.resolve());

    expect(input.value).toBe("newer draft");
    expect(conn.el.textContent).toContain("late failure");
    conn.dispose();
  });

  it("ignores an older failure after a newer submission generation starts", async () => {
    let rejectFirst!: (error: unknown) => void;
    vi.mocked(sendStructuredPrompt).mockImplementationOnce(
      () => new Promise((_, rejectPromise) => { rejectFirst = rejectPromise; }),
    );
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    ws.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    input.value = "first prompt";
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));
    ws.emit({ type: "reduced_state", state: { turn: { responding: true, thinking: false, active_tool_calls: [] } } });
    ws.emit({ type: "reduced_state", state: idleState });
    input.value = "second prompt";
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));

    rejectFirst(new Error("stale failure"));
    await Promise.resolve().then(() => Promise.resolve());

    expect(sendStructuredPrompt).toHaveBeenCalledTimes(2);
    expect(input.value).toBe("");
    expect(input.disabled).toBe(false);
    expect(conn.el.textContent).not.toContain("stale failure");
    conn.dispose();
  });

  it("ignores a submission failure after disposal", async () => {
    let reject!: (error: unknown) => void;
    vi.mocked(sendStructuredPrompt).mockImplementationOnce(
      () => new Promise((_, rejectPromise) => { reject = rejectPromise; }),
    );
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    input.value = "do not restore";
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));

    conn.dispose();
    input.value = "detached draft";
    reject(new Error("late failure"));
    await Promise.resolve().then(() => Promise.resolve());

    expect(input.value).toBe("detached draft");
    expect(conn.el.querySelector(".structured-error")).toBeNull();
  });

  it("cancels the active turn via the cancel button", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    ws.emit({ type: "reduced_state", state: { turn: { responding: true, thinking: true, active_tool_calls: [] } } });
    (conn.el.querySelector(".structured-cancel") as HTMLButtonElement).click();
    expect(cancelStructuredTurn).toHaveBeenCalledWith("s1");
    conn.dispose();
  });
});

describe("structured connection: approvals", () => {
  beforeEach(() => vi.clearAllMocks());

  it("shows decision buttons only for the currently pending approval, and answers with its nonce", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    ws.emit({
      type: "projection_update",
      transcript: {
        type: "append",
        row: row("approval:1", "approval", { toolCall: { title: "Write x" }, options: allApprovalOptions }),
      },
      state: { ...idleState, pending_approval: { nonce: "n1", request: { sessionId: "s1", toolCall: {}, options: allApprovalOptions } } },
    });
    const buttons = conn.el.querySelectorAll<HTMLButtonElement>(".st-approval-acts button");
    expect(buttons).toHaveLength(3);
    buttons[1].click(); // "Allow for session"
    expect(resolveStructuredApproval).toHaveBeenCalledWith("s1", "n1", "allow_for_session");
    conn.dispose();
  });

  it("hides a standalone resolved approval entirely when no tool group absorbs it", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: { cursor: 0, rows: [row("approval:1", "approval", { toolCall: { title: "Write x" }, options: allApprovalOptions })] },
    });
    ws.emit({
      type: "reduced_state",
      state: { ...idleState, pending_approval: { nonce: "n1", request: { sessionId: "s1", toolCall: {}, options: allApprovalOptions } } },
    });
    expect(conn.el.querySelectorAll(".st-approval-acts button")).toHaveLength(3);
    // Resolved on another client: state clears with no transcript delta at all.
    ws.emit({ type: "reduced_state", state: idleState });
    expect(conn.el.querySelector(".st-approval-acts")).toBeNull();
    // Standalone resolved approval is hidden — no card, no compact line.
    expect(conn.el.querySelector(".st-row-approval")).toBeNull();
    conn.dispose();
  });

  it("absorbs a resolved approval into the tool group as a compact line", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 0,
        rows: [
          row("user:1", "user", { content: { text: "go" } }),
          toolRow("tool:1", "first"),
          row("approval:1", "approval", { toolCall: { title: "Write file.ts" }, options: allApprovalOptions }),
          toolRow("tool:2", "second"),
        ],
      },
    });
    ws.emit({ type: "reduced_state", state: idleState });
    // 2+ tools in the turn → tool group exists; resolved approval is inside it.
    const group = conn.el.querySelector(".st-tool-group");
    expect(group).not.toBeNull();
    const compact = group!.querySelector(".st-approval-compact");
    expect(compact).not.toBeNull();
    expect(compact!.textContent).toContain("Write file.ts");
    expect(compact!.textContent).toContain("approved");
    // No full-card approval anywhere on the transcript.
    expect(conn.el.querySelector(".st-approval")).toBeNull();
    conn.dispose();
  });

  it("keeps a pending approval standalone even when a tool group exists in the same turn", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 0,
        rows: [
          row("user:1", "user", { content: { text: "go" } }),
          toolRow("tool:1", "first"),
          row("approval:1", "approval", { toolCall: { title: "Write file.ts" }, options: allApprovalOptions }),
          toolRow("tool:2", "second"),
        ],
      },
    });
    ws.emit({
      type: "reduced_state",
      state: { ...idleState, pending_approval: { nonce: "n1", request: { sessionId: "s1", toolCall: {}, options: allApprovalOptions } } },
    });
    // Pending approval stays outside the tool group as a full card.
    const approvalCard = conn.el.querySelector(".st-approval");
    expect(approvalCard).not.toBeNull();
    expect(conn.el.querySelectorAll(".st-approval-acts button").length).toBeGreaterThan(0);
    // It should not be inside the tool group.
    const group = conn.el.querySelector(".st-tool-group");
    expect(group).not.toBeNull();
    expect(group!.querySelector(".st-approval")).toBeNull();
    conn.dispose();
  });

  it("does not act on a stale click after the approval already moved on", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: { cursor: 0, rows: [row("approval:1", "approval", { toolCall: {}, options: allApprovalOptions })] },
    });
    ws.emit({
      type: "reduced_state",
      state: { ...idleState, pending_approval: { nonce: "n1", request: { sessionId: "s1", toolCall: {}, options: allApprovalOptions } } },
    });
    const buttons = conn.el.querySelectorAll<HTMLButtonElement>(".st-approval-acts button");
    // Approval is superseded before the click is handled (buttons already
    // disabled by the click handler is not the path under test here — this
    // simulates the row having already flipped to "answered" underneath it).
    ws.emit({ type: "reduced_state", state: idleState });
    buttons[0].dispatchEvent(new MouseEvent("click", { bubbles: true }));
    expect(resolveStructuredApproval).not.toHaveBeenCalled();
    conn.dispose();
  });

  it("restores the buttons and surfaces an error when the POST rejects while still pending", async () => {
    vi.mocked(resolveStructuredApproval).mockRejectedValueOnce(new Error("network down"));
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: { cursor: 0, rows: [row("approval:1", "approval", { toolCall: {}, options: allApprovalOptions })] },
    });
    ws.emit({
      type: "reduced_state",
      state: { ...idleState, pending_approval: { nonce: "n1", request: { sessionId: "s1", toolCall: {}, options: allApprovalOptions } } },
    });
    const buttons = conn.el.querySelectorAll<HTMLButtonElement>(".st-approval-acts button");
    buttons[0].click();
    expect(buttons[0].disabled).toBe(true);
    await Promise.resolve().then(() => Promise.resolve()).then(() => Promise.resolve());
    expect(buttons[0].disabled).toBe(false);
    expect(buttons[1].disabled).toBe(false);
    expect(conn.el.textContent).toContain("network down");
    conn.dispose();
  });

  it("does not resurrect buttons or show an error for a decision the approval already moved past", async () => {
    let reject!: (e: unknown) => void;
    vi.mocked(resolveStructuredApproval).mockImplementationOnce(
      () => new Promise((_, r) => { reject = r; }),
    );
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: { cursor: 0, rows: [row("approval:1", "approval", { toolCall: {}, options: allApprovalOptions })] },
    });
    ws.emit({
      type: "reduced_state",
      state: { ...idleState, pending_approval: { nonce: "n1", request: { sessionId: "s1", toolCall: {}, options: allApprovalOptions } } },
    });
    const buttons = conn.el.querySelectorAll<HTMLButtonElement>(".st-approval-acts button");
    buttons[0].click();
    expect(resolveStructuredApproval).toHaveBeenCalledWith("s1", "n1", "allow_once");

    // Superseded by a new approval before the in-flight POST settles.
    ws.emit({
      type: "projection_update",
      transcript: { type: "append", row: row("approval:2", "approval", { toolCall: {}, options: allApprovalOptions }) },
      state: { ...idleState, pending_approval: { nonce: "n2", request: { sessionId: "s1", toolCall: {}, options: allApprovalOptions } } },
    });
    reject(new Error("too late"));
    await Promise.resolve().then(() => Promise.resolve()).then(() => Promise.resolve());

    expect(conn.el.textContent).not.toContain("too late");
    const newButtons = conn.el.querySelectorAll<HTMLButtonElement>(".st-approval-acts button");
    expect(newButtons).toHaveLength(3);
    expect(newButtons[0].disabled).toBe(false);
    conn.dispose();
  });
});

describe("structured connection: reconnection/error/loading", () => {
  beforeEach(() => {
    vi.clearAllMocks();
    vi.useFakeTimers();
  });

  afterEach(() => vi.useRealTimers());

  it("shows connecting, then connected, then reconnecting with backoff, and rebuilds from the fresh snapshot", () => {
    const first = new FakeSocket();
    const second = new FakeSocket();
    const conn = mount({ sockets: [first, second], shouldReconnect: () => true });
    const state = () => (conn.el.querySelector(".attach-state") as HTMLElement).dataset.state;
    expect(state()).toBe("connecting");

    first.open();
    expect(state()).toBe("open");
    first.emit({
      type: "transcript_snapshot",
      snapshot: { cursor: 0, rows: [row("user:1", "user", { content: { type: "text", text: "before" } })] },
    });
    expect(conn.el.textContent).toContain("before");

    first.drop(1006, "");
    expect(state()).toBe("connecting"); // "reconnecting…"
    vi.advanceTimersByTime(1000);

    second.open();
    expect(state()).toBe("open");
    second.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    expect(conn.el.textContent).not.toContain("before"); // rebuilt wholesale, not merged
    conn.dispose();
  });

  it("does not mount plan rows from a reconnect snapshot", () => {
    const first = new FakeSocket();
    const second = new FakeSocket();
    const conn = mount({ sockets: [first, second], shouldReconnect: () => true });
    first.open();
    first.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 1,
        rows: [row("agent:old", "agent_text", { content: { type: "text", text: "old" } })],
      },
    });

    first.drop();
    vi.advanceTimersByTime(1000);
    second.open();
    second.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 4,
        rows: [
          row("user:new", "user", { content: { type: "text", text: "new" } }),
          row("plan", "plan", { entries: [{ content: "reconnected", status: "in_progress" }] }),
        ],
      },
    });
    second.emit({
      type: "reduced_state",
      state: {
        ...idleState,
        plan: { entries: [{ content: "reconnected", priority: "high", status: "in_progress" }] },
      },
    });

    const transcript = conn.el.querySelector(".structured-rows")!;
    expect(transcript.textContent).toBe("new");
    expect(transcript.querySelector('[data-row-id="plan"]')).toBeNull();
    expect(conn.el.querySelector(".structured-rail")).toBeNull();
    conn.dispose();
  });

  it("keeps surviving expanded rows open across a reconnect snapshot and leaves fresh rows collapsed", () => {
    const first = new FakeSocket();
    const second = new FakeSocket();
    const conn = mount({ sockets: [first, second], shouldReconnect: () => true });
    first.open();
    first.emit({
      type: "transcript_snapshot",
      snapshot: { cursor: 2, rows: [toolRow("tool:1", "before"), diffRow("diff:1", "first")] },
    });
    for (const head of conn.el.querySelectorAll<HTMLButtonElement>(".st-tool-head")) head.click();

    first.drop();
    vi.advanceTimersByTime(1000);
    second.open();
    second.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 3,
        rows: [toolRow("tool:1", "after"), diffRow("diff:1", "second"), toolRow("tool:2", "new")],
      },
    });

    expect(
      conn.el.querySelector('[data-row-id="tool:1"] .st-tool-head')?.getAttribute("aria-expanded"),
    ).toBe("true");
    expect(
      conn.el.querySelector('[data-row-id="diff:1"] .st-tool-head')?.getAttribute("aria-expanded"),
    ).toBe("true");
    expect(
      conn.el.querySelector('[data-row-id="tool:2"] .st-tool-head')?.getAttribute("aria-expanded"),
    ).toBe("false");
    expect(conn.el.querySelector('[data-row-id="tool:1"] .st-tool-out')?.textContent).toContain("after");
    conn.dispose();
  });

  it("prunes expanded IDs removed or made non-expandable by a snapshot", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: { cursor: 2, rows: [toolRow("tool:gone", "gone"), toolRow("tool:plain", "plain")] },
    });
    for (const head of conn.el.querySelectorAll<HTMLButtonElement>(".st-tool-head")) head.click();

    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 3,
        rows: [row("tool:plain", "agent_text", { content: { type: "text", text: "not a tool" } })],
      },
    });
    ws.emit({
      type: "transcript_snapshot",
      snapshot: { cursor: 5, rows: [toolRow("tool:gone", "returned"), toolRow("tool:plain", "returned")] },
    });

    for (const head of conn.el.querySelectorAll<HTMLButtonElement>(".st-tool-head")) {
      expect(head.getAttribute("aria-expanded")).toBe("false");
    }
    conn.dispose();
  });

  it("keeps a local submission gated across a reconnect until begin-turn arrives", () => {
    vi.mocked(sendStructuredPrompt).mockImplementationOnce(() => new Promise(() => {}));
    const first = new FakeSocket();
    const second = new FakeSocket();
    const conn = mount({ sockets: [first, second], shouldReconnect: () => true });
    first.open();
    first.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    first.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    input.value = "survive reconnect";
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));

    first.drop();
    vi.advanceTimersByTime(1000);
    second.open();
    second.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    second.emit({ type: "reduced_state", state: idleState });
    expect(input.disabled).toBe(false);

    second.emit({ type: "reduced_state", state: { turn: { responding: true, thinking: false, active_tool_calls: [] } } });
    second.emit({ type: "reduced_state", state: idleState });
    expect(input.disabled).toBe(false);
    conn.dispose();
  });

  it("releases an accepted submission from a post-acceptance idle snapshot", async () => {
    vi.mocked(sendStructuredPrompt).mockResolvedValueOnce(undefined);
    const first = new FakeSocket();
    const second = new FakeSocket();
    const conn = mount({ sockets: [first, second], shouldReconnect: () => true });
    first.open();
    first.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    first.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    input.value = "finishes while disconnected";
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));
    await Promise.resolve().then(() => Promise.resolve());

    first.drop();
    vi.advanceTimersByTime(1000);
    second.open();
    second.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    second.emit({ type: "reduced_state", state: idleState });

    expect(input.disabled).toBe(false);
    conn.dispose();
  });

  it("does not release from reconnect idle cached before submission acceptance", async () => {
    let accept!: () => void;
    vi.mocked(sendStructuredPrompt).mockImplementationOnce(
      () => new Promise((resolve) => { accept = resolve; }),
    );
    const first = new FakeSocket();
    const second = new FakeSocket();
    const third = new FakeSocket();
    const conn = mount({ sockets: [first, second, third], shouldReconnect: () => true });
    first.open();
    first.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    first.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    input.value = "accepted after reconnect";
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));

    first.drop();
    vi.advanceTimersByTime(1000);
    second.open();
    second.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    second.emit({ type: "reduced_state", state: idleState });
    expect(input.disabled).toBe(false);

    accept();
    await Promise.resolve().then(() => Promise.resolve());

    expect(input.disabled).toBe(false);
    expect(second.closed).toBe(true);

    third.open();
    third.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    third.emit({ type: "reduced_state", state: idleState });
    expect(input.disabled).toBe(false);
    conn.dispose();
  });

  it("cancels pending backoff when acceptance forces reconciliation", async () => {
    let accept!: () => void;
    vi.mocked(sendStructuredPrompt).mockImplementationOnce(
      () => new Promise((resolve) => { accept = resolve; }),
    );
    const first = new FakeSocket();
    const second = new FakeSocket();
    const reconciliation = new FakeSocket();
    const duplicate = new FakeSocket();
    const conn = mount({
      sockets: [first, second, reconciliation, duplicate],
      shouldReconnect: () => true,
    });
    first.open();
    first.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    input.value = "accepted during backoff";
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));

    first.drop();
    vi.advanceTimersByTime(1000);
    second.drop();
    accept();
    await Promise.resolve().then(() => Promise.resolve());

    expect(reconciliation.onopen).not.toBeNull();
    vi.advanceTimersByTime(60_000);
    expect(duplicate.onopen).toBeNull();

    reconciliation.open();
    reconciliation.emit({ type: "reduced_state", state: idleState });
    expect(input.disabled).toBe(false);
    conn.dispose();
    expect(reconciliation.closed).toBe(true);
  });

  it("does not reconcile when submission acceptance arrives after disposal", async () => {
    let accept!: () => void;
    vi.mocked(sendStructuredPrompt).mockImplementationOnce(
      () => new Promise((resolve) => { accept = resolve; }),
    );
    const first = new FakeSocket();
    const second = new FakeSocket();
    const late = new FakeSocket();
    const conn = mount({ sockets: [first, second, late], shouldReconnect: () => true });
    first.open();
    first.emit({ type: "reduced_state", state: idleState });
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    input.value = "accepted after disposal";
    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));

    first.drop();
    vi.advanceTimersByTime(1000);
    second.open();
    second.emit({ type: "reduced_state", state: idleState });
    conn.dispose();
    accept();
    await Promise.resolve().then(() => Promise.resolve());
    vi.advanceTimersByTime(60_000);

    expect(second.closed).toBe(true);
    expect(late.onopen).toBeNull();
  });

  it("reports a daemon rejection reason and does not schedule a retry", () => {
    const only = new FakeSocket();
    const conn = mount({ sockets: [only], shouldReconnect: () => true });
    only.open();
    only.drop(4004, "session is not a live structured session");
    const stateEl = conn.el.querySelector(".attach-state") as HTMLElement;
    expect(stateEl.dataset.state).toBe("error");
    expect(stateEl.textContent).toBe("session is not a live structured session");
    vi.advanceTimersByTime(60_000);
    // No second socket was ever asked for — only one factory call happened.
    conn.dispose();
  });
});

describe("structured connection: transcript scrolling", () => {
  let frames: Map<number, FrameRequestCallback>;
  let nextFrame: number;

  beforeEach(() => {
    vi.clearAllMocks();
    vi.useFakeTimers();
    frames = new Map();
    nextFrame = 1;
    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
      const id = nextFrame++;
      frames.set(id, cb);
      return id;
    });
    vi.stubGlobal("cancelAnimationFrame", (id: number) => {
      frames.delete(id);
    });
  });

  afterEach(() => {
    vi.useRealTimers();
    vi.unstubAllGlobals();
  });

  function metrics(conn: ReturnType<typeof mount>, height: number, clientHeight: number, top = 0) {
    const scroll = conn.el.querySelector<HTMLElement>(".structured-scroll")!;
    const values = { height, clientHeight, top };
    Object.defineProperties(scroll, {
      scrollHeight: { configurable: true, get: () => values.height },
      clientHeight: { configurable: true, get: () => values.clientHeight },
      scrollTop: {
        configurable: true,
        get: () => values.top,
        set: (value: number) => { values.top = value; },
      },
    });
    return { scroll, values };
  }

  function runFrames(): void {
    const pending = [...frames.entries()];
    frames.clear();
    for (const [, cb] of pending) cb(0);
  }

  it("shows the bottom after the initial transcript snapshot is laid out", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    const { values } = metrics(conn, 900, 300, 40);
    ws.open();
    ws.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 1,
        rows: [
          row("agent:1", "agent_text", { content: { type: "text", text: "latest" } }),
        ],
      },
    });

    expect(values.top).toBe(40);
    runFrames();
    expect(values.top).toBe(600);
    conn.dispose();
  });

  it("keeps pinned appends and patches at the bottom after layout", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    const { scroll, values } = metrics(conn, 600, 200);
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    runFrames();

    values.height = 720;
    ws.emit({
      type: "projection_update",
      transcript: {
        type: "append",
        row: row("agent:1", "agent_text", { content: { type: "text", text: "partial" } }),
      },
      state: idleState,
    });
    runFrames();
    expect(values.top).toBe(520);
    expect(scroll.style.scrollBehavior).toBe("smooth");

    values.height = 780;
    ws.emit({
      type: "projection_update",
      transcript: {
        type: "patch",
        row: row("agent:1", "agent_text", {
          content: { type: "text", text: "a longer completion" },
        }),
      },
      state: idleState,
    });
    runFrames();
    expect(values.top).toBe(580);
    expect(scroll.style.scrollBehavior).toBe("smooth");
    conn.dispose();
  });

  it("keeps follow-to-bottom immediate when reduced motion is requested", () => {
    vi.stubGlobal("matchMedia", () => ({ matches: true }));
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    const { scroll, values } = metrics(conn, 600, 200);
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    runFrames();

    values.height = 720;
    ws.emit({
      type: "projection_update",
      transcript: {
        type: "append",
        row: row("agent:1", "agent_text", { content: { type: "text", text: "quietly" } }),
      },
      state: idleState,
    });
    runFrames();

    expect(values.top).toBe(520);
    expect(scroll.style.scrollBehavior).toBe("");
    conn.dispose();
  });

  it.each([
    { position: "pinned", top: 800, expected: 880, manuallyScrolled: false },
    { position: "manually scrolled", top: 180, expected: 180, manuallyScrolled: true },
  ])("preserves the $position position when the composer grows", ({ top, expected, manuallyScrolled }) => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    const { scroll, values } = metrics(conn, 1000, 200);
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    runFrames();

    values.top = top;
    if (manuallyScrolled) scroll.dispatchEvent(new Event("scroll"));
    const input = conn.el.querySelector<HTMLTextAreaElement>(".structured-input")!;
    Object.defineProperty(input, "scrollHeight", { configurable: true, value: 120 });
    input.value = "one\ntwo\nthree";
    input.dispatchEvent(new Event("input"));
    values.height = 1080;
    runFrames();

    expect(input.style.height).toBe("120px");
    expect(values.top).toBe(expected);
    conn.dispose();
  });

  it("preserves a user-scrolled position across updates, approvals, and tool expansion", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    const { scroll, values } = metrics(conn, 1000, 200);
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 1, rows: [toolRow("tool:1", "output")] } });
    runFrames();

    values.top = 180;
    scroll.dispatchEvent(new Event("scroll"));
    values.height = 1120;
    ws.emit({
      type: "projection_update",
      transcript: { type: "append", row: row("agent:2", "agent_text", { content: { type: "text", text: "new" } }) },
      state: idleState,
    });
    runFrames();
    expect(values.top).toBe(180);

    values.height = 1180;
    ws.emit({
      type: "projection_update",
      transcript: {
        type: "append",
        row: row("approval:1", "approval", { toolCall: {}, options: allApprovalOptions }),
      },
      state: {
        ...idleState,
        pending_approval: {
          nonce: "n1",
          request: { sessionId: "s1", toolCall: {}, options: allApprovalOptions },
        },
      },
    });
    runFrames();
    expect(values.top).toBe(180);

    conn.el.querySelector<HTMLButtonElement>(".st-tool-head")!.click();
    values.height = 1260;
    runFrames();
    expect(values.top).toBe(180);
    conn.dispose();
  });

  it("resumes following when the user scrolls back near the bottom", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    const { scroll, values } = metrics(conn, 1000, 200);
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    runFrames();

    values.top = 750;
    scroll.dispatchEvent(new Event("scroll"));
    values.height = 1100;
    ws.emit({
      type: "projection_update",
      transcript: {
        type: "append",
        row: row("agent:1", "agent_text", { content: { type: "text", text: "follow" } }),
      },
      state: idleState,
    });
    runFrames();
    expect(values.top).toBe(900);
    conn.dispose();
  });

  it("preserves a user-scrolled position across a reconnect snapshot", () => {
    const first = new FakeSocket();
    const second = new FakeSocket();
    const conn = mount({ sockets: [first, second], shouldReconnect: () => true });
    const { scroll, values } = metrics(conn, 1000, 200);
    first.open();
    first.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    runFrames();

    values.top = 160;
    scroll.dispatchEvent(new Event("scroll"));
    first.drop();
    vi.advanceTimersByTime(1000);
    second.open();
    values.height = 1200;
    second.emit({
      type: "transcript_snapshot",
      snapshot: {
        cursor: 1,
        rows: [
          row("agent:1", "agent_text", {
            content: { type: "text", text: "reconnected" },
          }),
        ],
      },
    });
    runFrames();
    expect(values.top).toBe(160);
    conn.dispose();
  });

  it("cancels a pending transcript frame when disposed or parked", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    const { values } = metrics(conn, 900, 300, 25);
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    expect(frames.size).toBe(1);

    conn.onUnmount();
    expect(frames.size).toBe(0);
    const input = conn.el.querySelector<HTMLTextAreaElement>(".structured-input")!;
    Object.defineProperty(input, "scrollHeight", { configurable: true, value: 120 });
    input.dispatchEvent(new Event("input"));
    expect(frames.size).toBe(0);
    conn.onMount({ focus: false });
    expect(frames.size).toBe(2);
    conn.dispose();
    expect(frames.size).toBe(0);
    runFrames();
    expect(values.top).toBe(25);
  });
});

describe("structured connection: pane lifecycle", () => {
  beforeEach(() => vi.clearAllMocks());

  it("keeps the composer outside the transcript scroll region", () => {
    const conn = mount({ sockets: [new FakeSocket()] });
    const main = conn.el.querySelector(".structured-main")!;
    const scroll = conn.el.querySelector(".structured-scroll")!;
    const composer = conn.el.querySelector(".structured-composer")!;

    expect(main.contains(scroll)).toBe(true);
    expect(main.contains(composer)).toBe(true);
    expect(scroll.contains(composer)).toBe(false);
    conn.dispose();
  });

  it("sendInput is a no-op — there is no PTY behind a structured session", () => {
    const conn = mount({ sockets: [new FakeSocket()] });
    expect(() => conn.sendInput("\x0b")).not.toThrow();
    conn.dispose();
  });

  it("carries the same off-canvas sessions button as the terminal attach header", () => {
    const conn = mount({ sockets: [new FakeSocket()] });
    const btn = conn.el.querySelector(".sessions-btn") as HTMLButtonElement;
    expect(btn).not.toBeNull();
    expect(btn.getAttribute("aria-label")).toBe("Show sessions");
    expect(btn.type).toBe("button");

    let toggled = 0;
    const onToggle = () => toggled++;
    document.addEventListener(TOGGLE_DRAWER_EVENT, onToggle);
    btn.click();
    document.removeEventListener(TOGGLE_DRAWER_EVENT, onToggle);
    expect(toggled).toBe(1);
    conn.dispose();
  });

  it("focusTerminal keeps the composer reachable during an active turn", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    ws.emit({ type: "reduced_state", state: { turn: { responding: true, thinking: false, active_tool_calls: [] } } });
    conn.focusTerminal();
    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    expect(document.activeElement).toBe(input);
    ws.emit({ type: "reduced_state", state: idleState });
    conn.focusTerminal();
    expect(document.activeElement).toBe(input);
    conn.dispose();
  });

  it("dispose closes the socket", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    conn.dispose();
    expect(ws.closed).toBe(true);
  });
});

describe("structured connection: deferred mount focus", () => {
  let frames: FrameRequestCallback[];

  beforeEach(() => {
    vi.clearAllMocks();
    frames = [];
    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
      frames.push(cb);
      return frames.length;
    });
  });

  afterEach(() => vi.unstubAllGlobals());

  function runFrames(): void {
    const pending = frames;
    frames = [];
    for (const cb of pending) cb(0);
  }

  it("does not focus the composer if the pane was parked before its deferred frame ran", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    ws.emit({ type: "reduced_state", state: idleState });

    conn.onMount({ focus: true });
    conn.onUnmount(); // parked again before the frame below runs
    runFrames();

    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    expect(document.activeElement).not.toBe(input);
    conn.dispose();
  });

  it("does not focus the composer if it was re-mounted into a different pane before the stale frame ran", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    ws.emit({ type: "reduced_state", state: idleState });

    conn.onMount({ focus: true }); // stale frame #1
    conn.onUnmount();
    conn.onMount({ focus: false }); // the pane that actually won focus, without it
    runFrames(); // both frames fire; only the latest should have any say

    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    expect(document.activeElement).not.toBe(input);
    conn.dispose();
  });

  it("still focuses normally when nothing raced the frame", () => {
    const ws = new FakeSocket();
    const conn = mount({ sockets: [ws] });
    ws.open();
    ws.emit({ type: "transcript_snapshot", snapshot: { cursor: 0, rows: [] } });
    ws.emit({ type: "reduced_state", state: idleState });

    conn.onMount({ focus: true });
    runFrames();

    const input = conn.el.querySelector(".structured-input") as HTMLTextAreaElement;
    expect(document.activeElement).toBe(input);
    conn.dispose();
  });
});