feat: render interrupt decision form

web/apps/console/src/presentation/InterruptDecisionForm.test.tsx

@@ -0,0 +1,145 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { RunFactsInterrupt } from "./demo-run-facts.js";
+import { InterruptDecisionForm } from "./InterruptDecisionForm.js";
+
+const interrupt: RunFactsInterrupt = {
+  kind: "issue_review",
+  typed: true,
+  outcomes: ["submitted", "cancelled"],
+  proposedIssues: [
+    {
+      id: "risk-1",
+      title: "Prepare the defense walkthrough",
+      body: "Review the live and replay paths before the defense.",
+      severity: "medium",
+    },
+    {
+      id: "risk-2",
+      title: "Update the architecture diagram",
+      body: "Ensure the diagram reflects the latest changes.",
+      severity: "low",
+    },
+  ],
+  reportMarkdownPreview: "# Report\n\nThe workflow substrate is ready.",
+};
+
+describe("InterruptDecisionForm", () => {
+  afterEach(() => cleanup());
+
+  it("renders proposed issues as checkbox rows with default selection", () => {
+    render(
+      <InterruptDecisionForm
+        interrupt={interrupt}
+        runId="run_recorded_lda_report"
+        onSubmit={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    );
+
+    const checkboxes = screen.getAllByRole("checkbox");
+    expect(checkboxes).toHaveLength(2);
+    expect(checkboxes[0]).toBeChecked();
+    expect(checkboxes[1]).toBeChecked();
+    expect(screen.getByText("Prepare the defense walkthrough")).toBeDefined();
+    expect(screen.getByText("Update the architecture diagram")).toBeDefined();
+  });
+
+  it("defaults comment field to Create the selected issue.", () => {
+    render(
+      <InterruptDecisionForm
+        interrupt={interrupt}
+        runId="run_recorded_lda_report"
+        onSubmit={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    );
+
+    const textarea = screen.getByRole("textbox", { name: /resume comment/i });
+    expect((textarea as HTMLTextAreaElement).value).toBe("Create the selected issue.");
+  });
+
+  it("submits selected issue IDs and edited comment", async () => {
+    const onSubmit = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <InterruptDecisionForm
+        interrupt={interrupt}
+        runId="run_recorded_lda_report"
+        onSubmit={onSubmit}
+        onCancel={vi.fn()}
+      />,
+    );
+
+    const checkboxes = screen.getAllByRole("checkbox");
+    expect(checkboxes.length).toBeGreaterThanOrEqual(2);
+    await user.click(checkboxes[1]!);
+    expect(checkboxes[0]).toBeChecked();
+    expect(checkboxes[1]).not.toBeChecked();
+
+    const textarea = screen.getByRole("textbox", { name: /resume comment/i });
+    await user.clear(textarea);
+    await user.type(textarea, "Custom comment");
+
+    await user.click(screen.getByRole("button", { name: /submit/i }));
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      ["risk-1"],
+      "Custom comment",
+    );
+  });
+
+  it("calls cancel callback without submit", async () => {
+    const onCancel = vi.fn();
+    const onSubmit = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <InterruptDecisionForm
+        interrupt={interrupt}
+        runId="run_recorded_lda_report"
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: /cancel/i }));
+
+    expect(onCancel).toHaveBeenCalledOnce();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("shows terminal outcome label when state is submitted", () => {
+    render(
+      <InterruptDecisionForm
+        interrupt={interrupt}
+        runId="run_recorded_lda_report"
+        onSubmit={vi.fn()}
+        onCancel={vi.fn()}
+        terminalOutcome="submitted"
+      />,
+    );
+
+    expect(screen.getByText(/submitted/i)).toBeDefined();
+    expect(screen.queryByRole("button", { name: /submit/i })).toBeFalsy();
+    expect(screen.queryByRole("button", { name: /cancel/i })).toBeFalsy();
+  });
+
+  it("shows terminal outcome label when state is cancelled", () => {
+    render(
+      <InterruptDecisionForm
+        interrupt={interrupt}
+        runId="run_recorded_lda_report"
+        onSubmit={vi.fn()}
+        onCancel={vi.fn()}
+        terminalOutcome="cancelled"
+      />,
+    );
+
+    expect(screen.getByText(/cancelled/i)).toBeDefined();
+    expect(screen.queryByRole("button", { name: /submit/i })).toBeFalsy();
+    expect(screen.queryByRole("button", { name: /cancel/i })).toBeFalsy();
+  });
+});

web/apps/console/src/presentation/InterruptDecisionForm.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useState } from "react";
+import type { RunFactsInterrupt } from "./demo-run-facts.js";
+
+type InterruptDecisionFormProps = {
+  readonly interrupt: RunFactsInterrupt;
+  readonly runId: string;
+  readonly onSubmit: (selectedIssueIds: ReadonlyArray<string>, comment: string) => void;
+  readonly onCancel: () => void;
+  readonly terminalOutcome?: "submitted" | "cancelled" | undefined;
+};
+
+export const InterruptDecisionForm = ({
+  interrupt,
+  runId,
+  onSubmit,
+  onCancel,
+  terminalOutcome,
+}: InterruptDecisionFormProps) => {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() =>
+    new Set(interrupt.proposedIssues.map((issue) => issue.id)),
+  );
+  const [comment, setComment] = useState("Create the selected issue.");
+
+  const toggleIssue = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      onSubmit([...selectedIds], comment);
+    },
+    [selectedIds, comment, onSubmit],
+  );
+
+  if (terminalOutcome) {
+    return (
+      <div className="interrupt-decision-form" role="group" aria-label="operator resume decision">
+        <header className="interrupt-decision-form__header">
+          <span className="interrupt-decision-form__kind">{interrupt.kind}</span>
+          <span className="interrupt-decision-form__run-id">{runId}</span>
+        </header>
+        <p className="interrupt-decision-form__terminal">
+          Outcome: <strong>{terminalOutcome}</strong>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <form
+      className="interrupt-decision-form"
+      role="group"
+      aria-label="operator resume decision"
+      onSubmit={handleSubmit}
+    >
+      <header className="interrupt-decision-form__header">
+        <span className="interrupt-decision-form__kind">{interrupt.kind}</span>
+        <span className="interrupt-decision-form__run-id">{runId}</span>
+      </header>
+
+      <dl className="interrupt-decision-form__meta">
+        <dt>Typed</dt>
+        <dd>{interrupt.typed ? "yes" : "no"}</dd>
+        <dt>Outcomes</dt>
+        <dd>{interrupt.outcomes.join(", ")}</dd>
+      </dl>
+
+      {interrupt.reportMarkdownPreview && (
+        <pre className="interrupt-decision-form__report-preview">
+          {interrupt.reportMarkdownPreview}
+        </pre>
+      )}
+
+      <fieldset className="interrupt-decision-form__issues">
+        <legend>Proposed issues</legend>
+        {interrupt.proposedIssues.map((issue) => (
+          <label key={issue.id} className="interrupt-decision-form__issue-row">
+            <input
+              type="checkbox"
+              checked={selectedIds.has(issue.id)}
+              onChange={() => toggleIssue(issue.id)}
+            />
+            <span className="interrupt-decision-form__issue-title">{issue.title}</span>
+            <span className="interrupt-decision-form__issue-severity">{issue.severity}</span>
+          </label>
+        ))}
+      </fieldset>
+
+      <label className="interrupt-decision-form__comment-label">
+        Resume comment
+        <textarea
+          className="interrupt-decision-form__comment"
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+          rows={3}
+        />
+      </label>
+
+      <div className="interrupt-decision-form__actions">
+        <button type="submit" className="interrupt-decision-form__submit">
+          Submit
+        </button>
+        <button
+          type="button"
+          className="interrupt-decision-form__cancel"
+          onClick={onCancel}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+};

web/apps/console/src/presentation/presentation.css

@@ -1500,3 +1500,171 @@
   background: color-mix(in srgb, var(--accent-amber), transparent 85%);
   color: var(--accent-amber);
 }
+
+/* Interrupt decision form */
+.interrupt-decision-form {
+  padding: 1.4rem 1.6rem;
+  border: 2px solid var(--accent-cyan);
+  border-radius: 10px;
+  background: var(--stage-surface);
+}
+
+.interrupt-decision-form__header {
+  display: flex;
+  gap: 0.8rem;
+  align-items: baseline;
+  margin-bottom: 0.8rem;
+}
+
+.interrupt-decision-form__kind {
+  font-size: 1.1rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--accent-cyan);
+}
+
+.interrupt-decision-form__run-id {
+  font: 0.82rem/1.4 var(--font-mono);
+  color: color-mix(in srgb, var(--text-primary), white 20%);
+}
+
+.interrupt-decision-form__meta {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.25rem 0.6rem;
+  margin: 0 0 0.8rem;
+  font-size: 0.85rem;
+}
+
+.interrupt-decision-form__meta dt {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.interrupt-decision-form__meta dd {
+  margin: 0;
+  color: color-mix(in srgb, var(--text-primary), white 12%);
+}
+
+.interrupt-decision-form__report-preview {
+  margin: 0 0 1rem;
+  padding: 0.6rem 0.8rem;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--stage-surface), black 20%);
+  font: 0.82rem/1.5 var(--font-mono);
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: color-mix(in srgb, var(--text-primary), white 8%);
+  max-height: 10rem;
+  overflow-y: auto;
+}
+
+.interrupt-decision-form__issues {
+  border: 1px solid var(--stage-line);
+  border-radius: 6px;
+  padding: 0.8rem;
+  margin: 0 0 1rem;
+}
+
+.interrupt-decision-form__issues legend {
+  font-weight: 700;
+  font-size: 0.88rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--accent-amber);
+  padding: 0 0.3rem;
+}
+
+.interrupt-decision-form__issue-row {
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--stage-line), transparent 50%);
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.interrupt-decision-form__issue-row:last-child {
+  border-bottom: none;
+}
+
+.interrupt-decision-form__issue-row input[type="checkbox"] {
+  width: 1.1rem;
+  height: 1.1rem;
+  accent-color: var(--accent-cyan);
+}
+
+.interrupt-decision-form__issue-title {
+  flex: 1;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.interrupt-decision-form__issue-severity {
+  font: 0.75rem/1.4 var(--font-mono);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--accent-amber), transparent 85%);
+  color: var(--accent-amber);
+}
+
+.interrupt-decision-form__comment-label {
+  display: block;
+  margin: 0 0 1rem;
+  font-weight: 600;
+  font-size: 0.88rem;
+  color: var(--text-primary);
+}
+
+.interrupt-decision-form__comment {
+  display: block;
+  width: 100%;
+  margin-top: 0.3rem;
+  padding: 0.5rem 0.6rem;
+  border: 1px solid var(--stage-line);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--stage-surface), black 15%);
+  color: var(--text-primary);
+  font: 0.88rem/1.5 var(--font-mono);
+  resize: vertical;
+}
+
+.interrupt-decision-form__actions {
+  display: flex;
+  gap: 0.8rem;
+}
+
+.interrupt-decision-form__submit,
+.interrupt-decision-form__cancel {
+  padding: 0.6rem 1.4rem;
+  border: 1px solid;
+  border-radius: 6px;
+  font-weight: 700;
+  font-size: 0.92rem;
+  cursor: pointer;
+}
+
+.interrupt-decision-form__submit {
+  border-color: var(--accent-cyan);
+  background: color-mix(in srgb, var(--accent-cyan), transparent 80%);
+  color: var(--text-primary);
+}
+
+.interrupt-decision-form__cancel {
+  border-color: color-mix(in srgb, var(--accent-amber), transparent 40%);
+  background: color-mix(in srgb, var(--accent-amber), transparent 90%);
+  color: var(--text-primary);
+}
+
+.interrupt-decision-form__terminal {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--text-primary);
+}
+
+.interrupt-decision-form__terminal strong {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}