feat: split presentation run proof panels

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

@@ -1,9 +1,13 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
 import type { DemoRunFacts } from "./demo-run-facts.js";
+
+afterEach(() => cleanup());
 import {
+  InterruptPayloadFacts,
   RunInputFacts,
   RunOutputFacts,
+  RunResumeFacts,
   RunTraceFacts,
 } from "./RunFactsPanel.js";
 
@@ -24,6 +28,36 @@ const baseFacts: DemoRunFacts = {
   trace: { frames: [] },
 };
 
+const makeCreatedFacts = (markdown: string): DemoRunFacts => ({
+  ...baseFacts,
+  output: {
+    state: "created",
+    output: {
+      approved: true,
+      markdown,
+      created_issues: [{ id: "ISSUE-001", title: "Prepare defense", url: "local://issue-board/ISSUE-001" }],
+      selected_issue_ids: ["risk-1"],
+      comment: "Create the selected issue.",
+    },
+    createdIssues: [{ id: "ISSUE-001", title: "Prepare defense", url: "local://issue-board/ISSUE-001" }],
+    markdownPreview: markdown,
+  },
+});
+
+const makeTraceFacts = (count: number): DemoRunFacts => ({
+  ...baseFacts,
+  trace: {
+    frames: Array.from({ length: count }, (_, index) => ({
+      nodeId: `node-${index}`,
+      stepType: index === 3 ? "interrupt" : "node",
+      outcome: index === 3 ? "submitted" : "ok",
+      resolvedInputLabel: "captured as empty object",
+      outputLabel: "captured as empty object",
+      stateChangesLabel: "captured as empty object",
+    })),
+  },
+});
+
 describe("RunInputFacts", () => {
   it("renders workflow input facts with selected documents and board path", () => {
     render(<RunInputFacts facts={baseFacts} />);
@@ -35,6 +69,50 @@ describe("RunInputFacts", () => {
   });
 });
 
+describe("InterruptPayloadFacts", () => {
+  it("renders interrupt payload as a scrollable report and proposed issue list", () => {
+    const facts: DemoRunFacts = {
+      ...baseFacts,
+      interrupt: {
+        ...baseFacts.interrupt,
+        reportMarkdownPreview: "# Long report\n\nThe workflow substrate is ready.\n\n## Evidence\n\n- Draft\n- Artifact\n- Deployment\n- Run",
+        proposedIssues: [
+          { id: "risk-1", title: "Prepare defense", body: "Rehearse.", severity: "medium" },
+        ],
+      },
+    };
+
+    render(<InterruptPayloadFacts facts={facts} />);
+
+    expect(screen.getByRole("region", { name: /interrupt report markdown/i })).toHaveTextContent("Long report");
+    expect(screen.getByText("risk-1")).toBeInTheDocument();
+    expect(screen.getByText(/submitted/)).toBeInTheDocument();
+    expect(screen.getByText(/cancelled/)).toBeInTheDocument();
+  });
+});
+
+describe("RunResumeFacts", () => {
+  it("renders resume payload separately from output", () => {
+    const facts: DemoRunFacts = {
+      ...baseFacts,
+      resume: {
+        outcome: "submitted",
+        payload: {
+          approved: true,
+          selected_issue_ids: ["risk-1"],
+          comment: "Create the selected issue.",
+        },
+      },
+    };
+
+    render(<RunResumeFacts facts={facts} />);
+
+    expect(screen.getByText("submitted")).toBeInTheDocument();
+    expect(screen.getByText("risk-1")).toBeInTheDocument();
+    expect(screen.getByText("Create the selected issue.")).toBeInTheDocument();
+  });
+});
+
 describe("RunOutputFacts", () => {
   it("renders output not created yet before resume", () => {
     render(<RunOutputFacts facts={baseFacts} />);
@@ -70,6 +148,15 @@ describe("RunOutputFacts", () => {
     expect(screen.getByText("Create the selected issue.")).toBeDefined();
     expect(screen.getByRole("region", { name: /workflow markdown output/i })).toBeInTheDocument();
   });
+
+  it("renders output report as the primary scroll region", () => {
+    const createdFacts = makeCreatedFacts("# Report\n\n" + "body\n".repeat(40));
+
+    render(<RunOutputFacts facts={createdFacts} priority="report" />);
+
+    expect(screen.getByRole("region", { name: /workflow markdown output/i })).toHaveClass("run-facts-scroll-region");
+    expect(screen.getByText("ISSUE-001")).toBeInTheDocument();
+  });
 });
 
 describe("RunTraceFacts", () => {
@@ -116,4 +203,13 @@ describe("RunTraceFacts", () => {
     expect(screen.getByText("review_issues")).toBeDefined();
     expect(screen.getAllByText("captured as empty object").length).toBeGreaterThanOrEqual(2);
   });
+
+  it("renders trace frames inside a scrollable list", () => {
+    const traceFacts = makeTraceFacts(8);
+
+    render(<RunTraceFacts facts={traceFacts} />);
+
+    expect(screen.getByRole("region", { name: /workflow trace frames/i })).toHaveClass("run-facts-scroll-region");
+    expect(screen.getByText("node-7")).toBeInTheDocument();
+  });
 });

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

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import type { DemoRunFacts } from "./demo-run-facts.js";
 
 type RunInputFactsProps = {
@@ -22,40 +23,91 @@ export const RunInputFacts = ({ facts }: RunInputFactsProps) => (
   </div>
 );
 
-type RunOutputFactsProps = {
-  readonly facts: DemoRunFacts;
+type RunFactsPriority = "summary" | "report";
+
+const displayPayloadValue = (value: unknown): string => {
+  if (Array.isArray(value)) return value.join(", ");
+  if (typeof value === "boolean") return value ? "true" : "false";
+  if (value === null || value === undefined) return "none";
+  return String(value);
 };
 
-export const RunOutputFacts = ({ facts }: RunOutputFactsProps) => (
-  <div className="run-facts-card">
+export const InterruptPayloadFacts = ({ facts }: RunInputFactsProps) => (
+  <div className="run-facts-card run-facts-card--interrupt">
+    <h3>Interrupt payload</h3>
+    <dl className="run-facts-dl run-facts-dl--inline">
+      <dt>Kind</dt><dd>{facts.interrupt.kind}</dd>
+      <dt>Typed</dt><dd>{facts.interrupt.typed ? "yes" : "no"}</dd>
+      <dt>Outcomes</dt><dd>{facts.interrupt.outcomes.join(", ")}</dd>
+    </dl>
+    <div className="run-facts-scroll-region run-facts-scroll-region--report" role="region" aria-label="interrupt report markdown">
+      <pre className="run-facts-markdown-preview">{facts.interrupt.reportMarkdownPreview}</pre>
+    </div>
+    <ul className="run-facts-list run-facts-list--issues">
+      {facts.interrupt.proposedIssues.map((issue) => (
+        <li key={issue.id}>
+          <strong>{issue.id}</strong>
+          <span>{issue.title}</span>
+          <small>{issue.severity}</small>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+export const RunResumeFacts = ({ facts }: RunInputFactsProps) => (
+  <div className="run-facts-card run-facts-card--resume">
+    <h3>Resume decision</h3>
+    {facts.resume.outcome === null ? (
+      <p>No resume submitted yet.</p>
+    ) : (
+      <dl className="run-facts-dl">
+        <dt>Outcome</dt><dd>{facts.resume.outcome}</dd>
+        {Object.entries(facts.resume.payload).map(([key, value]) => (
+          <Fragment key={key}>
+            <dt>{key}</dt>
+            <dd>{displayPayloadValue(value)}</dd>
+          </Fragment>
+        ))}
+      </dl>
+    )}
+  </div>
+);
+
+type RunOutputFactsProps = {
+  readonly facts: DemoRunFacts;
+  readonly priority?: RunFactsPriority;
+};
+
+export const RunOutputFacts = ({ facts, priority = "summary" }: RunOutputFactsProps) => (
+  <div className="run-facts-card" data-output-priority={priority}>
     <h3>Output</h3>
     {facts.output.state === "not-created" ? (
       <p>{facts.output.message}</p>
     ) : (
-      <dl className="run-facts-dl">
-        <dt>Created issues</dt>
-        <dd>
-          <ul className="run-facts-list">
-            {facts.output.createdIssues.map((issue) => (
-              <li key={issue.id}>
-                <strong>{issue.id}</strong> — {issue.title}
-                <br />
-                <span className="run-facts-url">{issue.url}</span>
-              </li>
-            ))}
-          </ul>
-        </dd>
-        <dt>Selected issue IDs</dt>
-        <dd>{facts.output.output.selected_issue_ids.join(", ")}</dd>
-        <dt>Comment</dt>
-        <dd>{facts.output.output.comment ?? "none"}</dd>
-        <dt>Markdown preview</dt>
-        <dd>
-          <div className="run-facts-markdown-region" role="region" aria-label="workflow markdown output">
-            <pre className="run-facts-markdown-preview">{facts.output.markdownPreview}</pre>
-          </div>
-        </dd>
-      </dl>
+      <>
+        <dl className="run-facts-dl">
+          <dt>Created issues</dt>
+          <dd>
+            <ul className="run-facts-list">
+              {facts.output.createdIssues.map((issue) => (
+                <li key={issue.id}>
+                  <strong>{issue.id}</strong> — {issue.title}
+                  <br />
+                  <span className="run-facts-url">{issue.url}</span>
+                </li>
+              ))}
+            </ul>
+          </dd>
+          <dt>Selected issue IDs</dt>
+          <dd>{facts.output.output.selected_issue_ids.join(", ")}</dd>
+          <dt>Comment</dt>
+          <dd>{facts.output.output.comment ?? "none"}</dd>
+        </dl>
+        <div className="run-facts-scroll-region run-facts-scroll-region--markdown" role="region" aria-label="workflow markdown output">
+          <pre className="run-facts-markdown-preview">{facts.output.markdownPreview}</pre>
+        </div>
+      </>
     )}
   </div>
 );
@@ -70,23 +122,25 @@ export const RunTraceFacts = ({ facts }: RunTraceFactsProps) => (
     {facts.trace.frames.length === 0 ? (
       <p>No trace frames captured.</p>
     ) : (
-      <ul className="run-facts-list">
-        {facts.trace.frames.map((frame) => (
-          <li key={frame.nodeId} className="run-trace-frame">
-            <strong>{frame.nodeId}</strong>
-            <span className="run-trace-step-type">{frame.stepType}</span>
-            <span className="run-trace-outcome">{frame.outcome}</span>
-            <dl className="run-facts-dl">
-              <dt>Resolved input</dt>
-              <dd>{frame.resolvedInputLabel}</dd>
-              <dt>Output</dt>
-              <dd>{frame.outputLabel}</dd>
-              <dt>State changes</dt>
-              <dd>{frame.stateChangesLabel}</dd>
-            </dl>
-          </li>
-        ))}
-      </ul>
+      <div className="run-facts-scroll-region run-facts-scroll-region--trace" role="region" aria-label="workflow trace frames">
+        <ul className="run-facts-list">
+          {facts.trace.frames.map((frame) => (
+            <li key={frame.nodeId} className="run-trace-frame">
+              <strong>{frame.nodeId}</strong>
+              <span className="run-trace-step-type">{frame.stepType}</span>
+              <span className="run-trace-outcome">{frame.outcome}</span>
+              <dl className="run-facts-dl">
+                <dt>Resolved input</dt>
+                <dd>{frame.resolvedInputLabel}</dd>
+                <dt>Output</dt>
+                <dd>{frame.outputLabel}</dd>
+                <dt>State changes</dt>
+                <dd>{frame.stateChangesLabel}</dd>
+              </dl>
+            </li>
+          ))}
+        </ul>
+      </div>
     )}
   </div>
 );

web/apps/console/src/presentation/styles/demo-workflow.css

@@ -844,6 +844,41 @@
   }
 }
 
+.run-facts-card {
+  min-height: 0;
+}
+
+.run-facts-scroll-region {
+  min-height: 0;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.run-facts-scroll-region::-webkit-scrollbar {
+  display: none;
+}
+
+.run-facts-scroll-region--report,
+.run-facts-scroll-region--markdown {
+  max-height: 100%;
+}
+
+.run-facts-card[data-output-priority="report"] {
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
+.run-facts-card[data-output-priority="report"] .run-facts-scroll-region--markdown {
+  min-height: 14rem;
+}
+
+.run-facts-card--interrupt {
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
+
+.run-facts-card--resume {
+  align-content: start;
+}
+
 .demo-continuity-rail {
   display: flex;
   align-items: center;