lda.chat/lda-wf
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: rebalance interrupt approval layout

Browse Source
This commit is contained in:
lda
2026-07-09 03:57:56 +07:00 Verified
parent a0b5105b7c
commit bfcfa145b0
2 changed files with 53 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/console/src/presentation/DemoWorkflowScene.test.tsx
+8
View File
@@ -182,6 +182,14 @@ describe("DemoWorkflowScene", () => {
expect(screen.getByLabelText("workflow graph")).toHaveAttribute("data-graph-variant", "full");
});
it("keeps approval beat contract, compact graph, and outcome proof present", () => {
renderBeat("approval", "interrupt-evidence");
expect(screen.getByLabelText("typed interrupt contract")).toHaveAttribute("data-hero", "true");
expect(screen.getByLabelText("workflow graph")).toHaveAttribute("data-graph-variant", "compact");
expect(screen.getByLabelText("demo outcome proof")).toHaveTextContent("schema-backed");
});
it("adds outcome proof to approval, resume, output, and trace beats", () => {
const approval = renderBeat("approval", "interrupt-evidence");
expect(screen.getByLabelText("demo outcome proof")).toHaveTextContent("schema-backed");
web/apps/console/src/presentation/styles/demo-workflow.css
+45 -9
View File
@@ -400,6 +400,34 @@
transform: translate(-50%, -50%);
}
.workflow-graph-stage[data-graph-variant="compact"] {
min-height: 0;
}
.workflow-graph-stage[data-graph-variant="compact"] .workflow-graph-stage__legend {
right: 0.6rem;
gap: 0.55rem;
font-size: 0.5rem;
}
.workflow-graph-stage[data-graph-variant="compact"] .workflow-graph-stage__node {
width: clamp(6rem, 8.5vw, 7.4rem);
min-height: 3.55rem;
padding: 0.48rem 0.55rem;
}
.workflow-graph-stage[data-graph-variant="compact"] .workflow-graph-stage__node strong {
font-size: 0.72rem;
}
.workflow-graph-stage[data-graph-variant="compact"] .workflow-graph-stage__node small {
font-size: 0.58rem;
}
.workflow-graph-stage[data-graph-variant="compact"] .workflow-graph-stage__node-state {
font-size: 0.48rem;
}
.workflow-graph-stage__proof {
position: absolute;
z-index: 4;
@@ -524,13 +552,18 @@
oklch(0.135 0.025 250);
}
.demo-workflow-stage[data-demo-layout="approval"] .demo-workflow-stage__graph,
.demo-workflow-stage[data-demo-layout="interrupt"] .demo-workflow-stage__graph {
grid-template-columns: minmax(18rem, 0.78fr) minmax(26rem, 1.22fr);
grid-template-columns: minmax(20rem, 0.95fr) minmax(24rem, 1.05fr);
align-items: stretch;
gap: 1rem;
}
.demo-workflow-stage[data-demo-layout="approval"] .demo-workflow-stage__graph {
grid-template-columns: minmax(20rem, 1fr);
align-items: stretch;
gap: 0;
}
.demo-workflow-stage[data-demo-layout="approval"] .interrupt-contract-preview,
.demo-workflow-stage[data-demo-layout="interrupt"] .interrupt-contract-preview {
grid-column: 1;
@@ -539,13 +572,21 @@
color: var(--text-primary);
}
.demo-workflow-stage[data-demo-layout="approval"] .workflow-graph-stage,
.demo-workflow-stage[data-demo-layout="interrupt"] .workflow-graph-stage {
grid-column: 2;
grid-row: 1;
min-height: 18rem;
}
/* Approval is contract-first. The graph becomes a context strip below the
contract instead of a narrow competing column. */
.demo-workflow-stage[data-demo-layout="approval"] .workflow-graph-stage {
grid-column: 1;
grid-row: 2;
min-height: 7.8rem;
margin-top: 0.75rem;
}
.interrupt-contract-preview[data-hero="true"] {
border-color: color-mix(in oklch, var(--accent-amber) 72%, white);
background:
@@ -558,7 +599,6 @@
}
@media (max-width: 1050px) {
.demo-workflow-stage[data-demo-layout="approval"] .demo-workflow-stage__graph,
.demo-workflow-stage[data-demo-layout="interrupt"] .demo-workflow-stage__graph {
grid-template-columns: minmax(17rem, 40%) minmax(0, 1fr);
}
@@ -690,11 +730,7 @@
}
.demo-workflow-stage[data-demo-layout="approval"] {
grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.55fr);
}
.demo-workflow-stage[data-demo-layout="approval"] .demo-workflow-stage__graph {
grid-template-columns: minmax(0, 1fr) minmax(17rem, 32%);
grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
}
.demo-workflow-stage[data-demo-layout="evidence"] {