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

style: emphasize authoring phase visuals

Browse Source
This commit is contained in:
lda
2026-07-12 21:00:22 +07:00 Verified
parent 40abce8f9e
commit e0d2ab763e
5 changed files with 100 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/console/src/presentation/SceneBody.test.tsx
+25
View File
@@ -346,6 +346,10 @@ describe("SceneBody", () => {
expect(composition).toHaveAttribute("data-active-stage", "diagnose");
expect(composition).toHaveAttribute("data-presentation-surface", "editorial");
expect(screen.getByRole("article", { name: /validate product evidence/i })).toBeInTheDocument();
expect(screen.getByRole("region", { name: /validation repair evidence/i })).toHaveAttribute(
"data-authoring-focus",
"diagnose",
);
expect(screen.getByText("workflow.draft_workspaces.validate")).toBeInTheDocument();
const loop = screen.getByLabelText("authoring phase loop");
expect(loop).not.toHaveAttribute("data-readable-surface", "dark");
@@ -380,6 +384,27 @@ describe("SceneBody", () => {
expect(within(rail).getByRole("button", { name: /Hosted automation future-work/i })).toBeInTheDocument();
});
it("gives the repair beat its own correction visual", () => {
const location: PresentationLocation = { kind: "main", sceneId: "authoring", beatId: "repair", focusPath: [] };
render(
<SceneBody
location={location}
demo={demo}
selectedNodeId={null}
selectNode={noop}
openEvidence={noop}
openDiscussion={noop}
onFocusPathChange={noop}
motionDisabled={false}
/>,
);
expect(screen.getByRole("region", { name: /validation repair evidence/i })).toHaveAttribute(
"data-authoring-focus",
"repair",
);
});
it("keeps discussion rails out of workflow proof scenes", () => {
const location: PresentationLocation = { kind: "main", sceneId: "run-from-deployment", beatId: "graph", focusPath: [] };
render(
web/apps/console/src/presentation/SceneBody.tsx
+4 -1
View File
@@ -278,7 +278,10 @@ const AuthoringScene = ({ scene, beat }: { scene: SceneDefinition; beat: SceneBe
<strong>{primaryCommand.title}</strong>
<p>{projection.summary}</p>
</header>
<AuthoringPhaseVisual projection={projection} />
<AuthoringPhaseVisual
projection={projection}
focus={beat.id === "diagnose" || beat.id === "repair" ? beat.id : "full"}
/>
</article>
<div
className="scene-body__authoring-loop"
web/apps/console/src/presentation/authoring/AuthoringPhaseVisual.test.tsx
+8
View File
@@ -43,6 +43,14 @@ describe("AuthoringPhaseVisual", () => {
expect(screen.getByText(/valid draft/i)).toBeInTheDocument();
});
it.each(["diagnose", "repair"] as const)("marks the %s authoring focus", (focus) => {
render(<AuthoringPhaseVisual projection={projectPreparedAuthoringPhase("validate")} focus={focus} />);
expect(screen.getByRole("region", { name: /validation repair evidence/i })).toHaveAttribute(
"data-authoring-focus",
focus,
);
});
it("shows immutable artifact identity and version", () => {
render(<AuthoringPhaseVisual projection={projectPreparedAuthoringPhase("artifact")} />);
expect(screen.getByText("lda_report_case_study")).toBeInTheDocument();
web/apps/console/src/presentation/authoring/AuthoringPhaseVisual.tsx
+18 -5
View File
@@ -12,6 +12,7 @@ import type { AuthoringPhaseProjection } from "./authoring-projection.js";
type AuthoringPhaseVisualProps = {
readonly projection: AuthoringPhaseProjection;
readonly focus?: "full" | "diagnose" | "repair";
};
const InventoryVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "inventory" }> }) => (
@@ -40,10 +41,22 @@ const GraphVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["vis
</section>
);
const RepairVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "repair" }> }) => (
<section className="authoring-visual authoring-visual--repair" aria-label="validation repair evidence" data-presentation-surface="editorial" data-visual-role="authoring-phase">
const RepairVisual = ({
visual,
focus,
}: {
readonly visual: Extract<AuthoringPhaseProjection["visual"], { kind: "repair" }>;
readonly focus: "full" | "diagnose" | "repair";
}) => (
<section
className="authoring-visual authoring-visual--repair"
aria-label="validation repair evidence"
data-presentation-surface="editorial"
data-visual-role="authoring-phase"
data-authoring-focus={focus}
>
<div className="authoring-repair__diagnostic"><AlertTriangle aria-hidden="true" /><span>Diagnostic</span><strong>{visual.diagnostic}</strong></div>
<ArrowRight aria-hidden="true" />
<ArrowRight className="authoring-repair__connector" aria-hidden="true" />
<div className="authoring-repair__correction"><Link2 aria-hidden="true" /><span>Repair</span><code>{visual.correction}</code></div>
<div className="authoring-repair__status"><CheckCircle2 aria-hidden="true" /><strong>{visual.status}</strong></div>
</section>
@@ -69,11 +82,11 @@ const BindingsVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["
);
/** Renders the factual product artifact appropriate to one authoring phase. */
export const AuthoringPhaseVisual = ({ projection }: AuthoringPhaseVisualProps) => {
export const AuthoringPhaseVisual = ({ projection, focus = "full" }: AuthoringPhaseVisualProps) => {
switch (projection.visual.kind) {
case "inventory": return <InventoryVisual visual={projection.visual} />;
case "graph": return <GraphVisual visual={projection.visual} />;
case "repair": return <RepairVisual visual={projection.visual} />;
case "repair": return <RepairVisual visual={projection.visual} focus={focus} />;
case "artifact": return <ArtifactVisual visual={projection.visual} />;
case "bindings": return <BindingsVisual visual={projection.visual} />;
}
web/apps/console/src/presentation/presentation.css
+45 -4
View File
@@ -1621,7 +1621,8 @@
}
.scene-body__authoring-node[data-authoring-active="true"] {
transform: translateY(-0.35rem);
z-index: 2;
transform: translateY(-0.35rem) scale(1.04);
border-color: var(--accent-cyan);
background: color-mix(in oklch, var(--accent-cyan) 8%, var(--authoring-paper, white));
}
@@ -1662,7 +1663,7 @@
overflow: hidden;
border: 1px solid var(--authoring-rule, color-mix(in oklch, var(--authoring-muted) 32%, transparent));
border-radius: 0.2rem;
padding: 0.8rem 1rem;
padding: 1rem 1.15rem;
background: var(--authoring-paper, var(--color-editorial-paper, oklch(0.975 0.012 82)));
}
@@ -1708,8 +1709,48 @@
.scene-body__authoring-evidence .authoring-repair__diagnostic,
.scene-body__authoring-evidence .authoring-repair__correction {
min-height: 6.5rem;
padding: 0.75rem;
min-height: 8rem;
padding: 1rem;
}
.scene-body__authoring-evidence .authoring-visual--inventory,
.scene-body__authoring-evidence .authoring-visual--graph,
.scene-body__authoring-evidence .authoring-visual--repair {
min-height: 15rem;
}
.scene-body__authoring-evidence .authoring-visual--graph .authoring-graph__node {
min-width: 12rem;
min-height: 8rem;
}
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="diagnose"] {
grid-template-columns: 1fr;
}
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__connector,
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__correction,
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__status {
display: none;
}
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__diagnostic {
grid-column: 1;
min-height: 12rem;
}
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="repair"] {
grid-template-columns: 1fr;
}
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__diagnostic,
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__connector {
display: none;
}
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__correction {
grid-column: 1;
min-height: 12rem;
}
.scene-body__authoring-composition .scene-body__authoring-loop {