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

fix: tune demo graph contract readability

Browse Source
This commit is contained in:
lda
2026-07-08 16:40:10 +07:00 Verified
parent 33f34c4f96
commit c07c3cf599
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/console/src/presentation/DemoWorkflowScene.test.tsx
+2
View File
@@ -111,6 +111,8 @@ describe("DemoWorkflowScene", () => {
const stage = screen.getByLabelText("demo workflow stage"); const stage = screen.getByLabelText("demo workflow stage");
expect(stage).toHaveAttribute("data-demo-layout", "approval"); expect(stage).toHaveAttribute("data-demo-layout", "approval");
expect(screen.getByLabelText("typed interrupt contract")).toHaveAttribute("data-hero", "true"); expect(screen.getByLabelText("typed interrupt contract")).toHaveAttribute("data-hero", "true");
expect(screen.getByLabelText("typed interrupt contract")).toHaveTextContent("Operator decision");
expect(screen.getByLabelText("typed interrupt contract")).toHaveTextContent("Resume outcomes");
expect(screen.getByLabelText("workflow graph")).toBeInTheDocument(); expect(screen.getByLabelText("workflow graph")).toBeInTheDocument();
}); });
web/apps/console/src/presentation/styles/demo-workflow.css
+14 -6
View File
@@ -419,15 +419,19 @@
.workflow-graph-stage__node strong { .workflow-graph-stage__node strong {
font-size: 0.82rem; font-size: 0.82rem;
line-height: 1.05; line-height: 1.05;
color: var(--text-primary);
}
.workflow-graph-stage__node small,
.workflow-graph-stage__node-state {
color: color-mix(in oklch, var(--text-primary) 76%, var(--text-muted));
} }
.workflow-graph-stage__node small { .workflow-graph-stage__node small {
color: var(--text-muted);
font-size: 0.67rem; font-size: 0.67rem;
} }
.workflow-graph-stage__node-state { .workflow-graph-stage__node-state {
color: var(--text-muted);
font: 650 0.55rem/1 var(--font-mono, monospace); font: 650 0.55rem/1 var(--font-mono, monospace);
letter-spacing: 0.09em; letter-spacing: 0.09em;
text-transform: uppercase; text-transform: uppercase;
@@ -459,7 +463,7 @@
} }
.workflow-graph-stage__node[data-execution-state="future"] { .workflow-graph-stage__node[data-execution-state="future"] {
opacity: 0.48; opacity: 0.72;
box-shadow: none; box-shadow: none;
} }
@@ -484,7 +488,8 @@
.demo-workflow-stage[data-demo-layout="approval"] .demo-workflow-stage__graph, .demo-workflow-stage[data-demo-layout="approval"] .demo-workflow-stage__graph,
.demo-workflow-stage[data-demo-layout="interrupt"] .demo-workflow-stage__graph { .demo-workflow-stage[data-demo-layout="interrupt"] .demo-workflow-stage__graph {
grid-template-columns: minmax(19rem, 34%) minmax(0, 1fr); grid-template-columns: minmax(18rem, 0.78fr) minmax(26rem, 1.22fr);
align-items: stretch;
gap: 1rem; gap: 1rem;
} }
@@ -492,12 +497,15 @@
.demo-workflow-stage[data-demo-layout="interrupt"] .interrupt-contract-preview { .demo-workflow-stage[data-demo-layout="interrupt"] .interrupt-contract-preview {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
min-width: 0;
color: var(--text-primary);
} }
.demo-workflow-stage[data-demo-layout="approval"] .workflow-graph-stage, .demo-workflow-stage[data-demo-layout="approval"] .workflow-graph-stage,
.demo-workflow-stage[data-demo-layout="interrupt"] .workflow-graph-stage { .demo-workflow-stage[data-demo-layout="interrupt"] .workflow-graph-stage {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
min-height: 18rem;
} }
.interrupt-contract-preview[data-hero="true"] { .interrupt-contract-preview[data-hero="true"] {
@@ -602,10 +610,10 @@
} }
.interrupt-contract-preview__schema pre { .interrupt-contract-preview__schema pre {
max-height: 11rem; max-height: 7.5rem;
margin: 0.45rem 0 0; margin: 0.45rem 0 0;
overflow: auto; overflow: auto;
color: oklch(0.85 0.04 195); color: color-mix(in oklch, var(--text-primary) 82%, var(--text-muted));
font: 0.63rem/1.45 var(--font-mono, monospace); font: 0.63rem/1.45 var(--font-mono, monospace);
white-space: pre-wrap; white-space: pre-wrap;
} }