fix: tighten guided proof scene layout

This commit is contained in:
lda
2026-07-10 17:42:09 +07:00 Verified
parent 630baf585f
commit eaaae0e02c
3 changed files with 105 additions and 11 deletions
@@ -72,6 +72,12 @@ describe("RunInputFacts", () => {
render(<RunInputFacts facts={baseFacts} density="compact" />);
expect(screen.getByRole("region", { name: /workflow input summary/i })).toHaveAttribute("data-density", "compact");
});
it("labels the selected document list for compact approval rails", () => {
render(<RunInputFacts facts={baseFacts} density="compact" />);
expect(screen.getByRole("list", { name: /selected documents/i })).toHaveTextContent("architecture-notes.md");
});
});
describe("InterruptPayloadFacts", () => {
@@ -156,7 +162,7 @@ describe("RunOutputFacts", () => {
},
};
render(<RunOutputFacts facts={createdFacts} />);
render(<RunOutputFacts facts={createdFacts} priority="report" />);
expect(screen.getByText("ISSUE-001")).toBeDefined();
expect(screen.getByText("local://issue-board/ISSUE-001")).toBeDefined();
@@ -172,6 +178,16 @@ describe("RunOutputFacts", () => {
expect(screen.getByRole("region", { name: /workflow markdown output/i })).toHaveClass("run-facts-scroll-region");
expect(screen.getByText("ISSUE-001")).toBeInTheDocument();
});
it("keeps summary output compact by omitting report markdown", () => {
const createdFacts = makeCreatedFacts("# Report\n\nLong body");
render(<RunOutputFacts facts={createdFacts} priority="summary" />);
expect(screen.queryByRole("region", { name: /workflow markdown output/i })).not.toBeInTheDocument();
expect(screen.getByText("ISSUE-001")).toBeInTheDocument();
expect(screen.queryByText(/Prepare defense/)).not.toBeInTheDocument();
});
});
describe("RunTraceFacts", () => {
@@ -16,7 +16,7 @@ export const RunInputFacts = ({ facts, density = "normal" }: RunInputFactsProps)
<dl className="run-facts-dl">
<dt>Selected documents</dt>
<dd>
<ul className="run-facts-list">
<ul className="run-facts-list" aria-label="selected documents">
{facts.input.selectedDocuments.map((doc) => (
<li key={doc}>{doc}</li>
))}
@@ -107,9 +107,14 @@ export const RunOutputFacts = ({ facts, priority = "summary" }: RunOutputFactsPr
<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>
<strong>{issue.id}</strong>
{priority === "report" ? <> {issue.title}</> : null}
{priority === "report" ? (
<>
<br />
<span className="run-facts-url">{issue.url}</span>
</>
) : null}
</li>
))}
</ul>
@@ -119,9 +124,11 @@ export const RunOutputFacts = ({ facts, priority = "summary" }: RunOutputFactsPr
<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>
{priority === "report" ? (
<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>
) : null}
</>
)}
</div>
@@ -855,6 +855,13 @@
grid-template-columns: minmax(0, 1fr) minmax(16rem, 24%);
}
/* Guided proof moments own their support panels internally. The older evidence
layout reserved a second parent column for DemoOutcomePanel, which leaves an
empty gutter after the guided-moment refactor. */
.demo-workflow-stage[data-demo-layout="evidence"]:has(.guided-product-moment) {
grid-template-columns: minmax(0, 1fr);
}
.demo-workflow-stage[data-support-surface="run-receipt"] .operation-receipt[data-operation-variant="receipt"],
.demo-workflow-stage[data-support-surface="output-summary"] .run-facts-card[data-output-priority="summary"] {
opacity: 0.86;
@@ -1192,8 +1199,12 @@
.guided-product-moment {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
justify-self: stretch;
align-self: stretch;
width: 100%;
gap: 0.75rem;
min-height: 0;
box-sizing: border-box;
}
.guided-product-moment__header {
@@ -1232,6 +1243,19 @@
overflow: hidden;
}
.guided-product-moment[data-moment="approval"],
.guided-product-moment[data-moment="resume"],
.guided-product-moment[data-moment="output"],
.guided-product-moment[data-moment="trace"] {
border: 1px solid oklch(0.4 0.04 250 / 0.72);
border-radius: 0.95rem;
padding: 0.9rem;
overflow: hidden;
background:
radial-gradient(circle at 72% 12%, oklch(0.72 0.17 195 / 0.08), transparent 28rem),
oklch(0.105 0.02 250 / 0.96);
}
.guided-product-moment[data-moment="approval"] {
gap: 0.55rem;
}
@@ -1262,7 +1286,7 @@
.guided-product-moment__approval-grid {
display: grid;
grid-template-columns: minmax(11rem, 0.36fr) minmax(0, 1.35fr) minmax(20rem, 0.62fr);
grid-template-columns: minmax(12.5rem, 0.42fr) minmax(0, 1.25fr) minmax(20rem, 0.62fr);
gap: 0.85rem;
min-height: 0;
}
@@ -1277,10 +1301,31 @@
font-size: 0.82rem;
}
.run-facts-card[data-density="compact"] .run-facts-dl {
display: block;
}
.run-facts-card[data-density="compact"] .run-facts-dl dt {
margin: 0.65rem 0 0.25rem;
}
.run-facts-card[data-density="compact"] .run-facts-dl dt:first-child {
margin-top: 0;
}
.run-facts-card[data-density="compact"] .run-facts-dl dd {
margin: 0;
overflow-wrap: anywhere;
}
.run-facts-card[data-density="compact"] .run-facts-list {
gap: 0.28rem;
}
.run-facts-card[data-density="compact"] .run-facts-list li {
overflow-wrap: anywhere;
}
.run-facts-list--issues {
display: grid;
gap: 0.4rem;
@@ -1335,10 +1380,25 @@
.guided-product-moment__resume-support .operation-block--expanded {
padding: 1rem;
min-width: 0;
box-sizing: border-box;
}
.guided-product-moment__resume-support .operation-command {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
margin: 0.65rem 0;
min-width: 0;
}
.guided-product-moment__resume-support .operation-block__status-group {
display: none;
}
.guided-product-moment__resume-support .operation-command code {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.guided-product-moment__output-grid {
@@ -1349,7 +1409,7 @@
.guided-product-moment__trace-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.32fr);
grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.28fr);
gap: 0.85rem;
min-height: 0;
}
@@ -1367,7 +1427,7 @@
.run-trace-frame {
display: grid;
grid-template-columns: minmax(8rem, 0.35fr) auto auto minmax(0, 1fr);
grid-template-columns: minmax(8rem, 0.26fr) auto auto minmax(0, 1fr);
gap: 0.5rem 0.75rem;
align-items: start;
}
@@ -1376,6 +1436,17 @@
grid-column: 4;
}
.guided-product-moment[data-moment="trace"] .run-facts-card[data-output-priority="summary"] {
min-width: 0;
overflow: hidden;
}
.guided-product-moment[data-moment="trace"] .run-facts-card[data-output-priority="summary"] dd,
.guided-product-moment[data-moment="trace"] .run-facts-card[data-output-priority="summary"] li,
.guided-product-moment[data-moment="trace"] .run-facts-card[data-output-priority="summary"] pre {
overflow-wrap: anywhere;
}
@container presentation-canvas (max-width: 1050px) {
.guided-product-moment__approval-grid,
.guided-product-moment__resume-grid,