fix: harden prepared lifecycle review fixes

This commit is contained in:
lda
2026-07-13 13:05:11 +07:00 Verified
parent ed446cc515
commit 5f03fa3101
4 changed files with 245 additions and 107 deletions
@@ -43,6 +43,7 @@ describe("PreparedAuthoringLifecycleScene", () => {
expect(frame).toHaveTextContent("wf draft validate lda_report_workflow");
expect(frame).toHaveTextContent(/structured missing-output diagnostic/i);
expect(frame).toHaveAttribute("data-authoring-step", "diagnose");
expect(frame.querySelector('[data-authoring-focus="diagnose"]')).toBeInTheDocument();
expect(screen.getByRole("region", { name: "validation repair evidence" })).toHaveAttribute(
"data-authoring-focus",
"diagnose",
@@ -60,6 +61,7 @@ describe("PreparedAuthoringLifecycleScene", () => {
expect(frame).toHaveTextContent("workflow.draft_workspaces.set_step_output_map");
expect(frame).toHaveTextContent(/wf draft set-output lda_report_workflow/i);
expect(frame).toHaveAttribute("data-authoring-step", "repair");
expect(frame.querySelector('[data-authoring-focus="repair"]')).toBeInTheDocument();
expect(screen.getByRole("region", { name: "validation repair evidence" })).toHaveAttribute(
"data-authoring-focus",
"repair",
@@ -12,7 +12,6 @@ import {
preparedLifecycleMessageReducer,
} from "./prepared-lifecycle-message-state.js";
import type { SceneBeatDefinition, SceneDefinition } from "../storyboard.js";
import { StageCaption } from "../StageCaption.js";
type PreparedAuthoringLifecycleSceneProps = {
readonly scene: SceneDefinition;
@@ -34,12 +33,12 @@ const steps = [
}[];
/**
* Scene 9 — Prepared workflow authoring lifecycle.
* Prepared workflow authoring lifecycle.
*
* Each beat shows a persistent prepared assistant beside one dominant phase
* projection sourced from the prepared authoring recording.
*/
export const PreparedAuthoringLifecycleScene = ({ scene, beat, onAdvance }: PreparedAuthoringLifecycleSceneProps) => {
export const PreparedAuthoringLifecycleScene = ({ beat, onAdvance }: PreparedAuthoringLifecycleSceneProps) => {
const [messageState, dispatch] = useReducer(
preparedLifecycleMessageReducer,
initialPreparedLifecycleMessageState,
@@ -51,89 +50,83 @@ export const PreparedAuthoringLifecycleScene = ({ scene, beat, onAdvance }: Prep
const projection = projectPreparedLifecycleStep(step);
const activeStepIndex = steps.findIndex((candidate) => candidate.id === step);
return (
<>
{/* Keep external chrome to scene orientation; beat-specific copy belongs in the frame. */}
<StageCaption eyebrow="Prepared workflow" title={scene.title}>
{null}
</StageCaption>
<section
className="prepared-lifecycle-scene"
aria-label="prepared workflow authoring lifecycle"
data-active-phase={step}
data-recording-phase={projection.recordingPhase}
data-primary-surface="authoring-phase"
data-support-surface="prepared-chat"
data-presentation-surface="editorial"
>
<PresentationAssistantPane
phase={step}
visualRole="support"
message={projectPreparedLifecycleMessage(messageState, step)}
submittedOverrides={projectPreparedLifecycleSubmittedOverrides(messageState)}
runRequested={messageState.runRequested}
onDraftChange={(draft) => dispatch({ type: "draft_edited", draft })}
onSubmit={(submittedText) => {
dispatch({ type: "draft_edited", draft: submittedText });
if (step === "discover") {
dispatch({ type: "discover_submitted" });
}
if (step === "draft") {
dispatch({ type: "draft_submitted" });
onAdvance?.();
}
if (step === "artifact") {
dispatch({ type: "artifact_submitted" });
onAdvance?.();
}
if (step === "deployment") dispatch({ type: "run_requested" });
}}
/>
<div className="prepared-lifecycle-scene__presentation">
<ol className="prepared-lifecycle-scene__rail" aria-label="prepared authoring lifecycle">
{steps.map((candidate, index) => (
<li
key={candidate.id}
data-active={candidate.id === step ? "true" : "false"}
data-complete={index < activeStepIndex ? "true" : "false"}
>
<span className="prepared-lifecycle-scene__ordinal" aria-hidden="true">
{String(index + 1).padStart(2, "0")}
</span>
<strong>{candidate.label}</strong>
<span className="prepared-lifecycle-scene__detail">{candidate.detail}</span>
</li>
))}
</ol>
<section
className="prepared-lifecycle-scene"
aria-label="prepared workflow authoring lifecycle"
data-active-phase={step}
data-recording-phase={projection.recordingPhase}
data-primary-surface="authoring-phase"
data-support-surface="prepared-chat"
data-presentation-surface="editorial"
>
<PresentationAssistantPane
phase={step}
visualRole="support"
message={projectPreparedLifecycleMessage(messageState, step)}
submittedOverrides={projectPreparedLifecycleSubmittedOverrides(messageState)}
runRequested={messageState.runRequested}
onDraftChange={(draft) => dispatch({ type: "draft_edited", draft })}
onSubmit={(submittedText) => {
dispatch({ type: "draft_edited", draft: submittedText });
if (step === "discover") {
dispatch({ type: "discover_submitted" });
}
if (step === "draft") {
dispatch({ type: "draft_submitted" });
onAdvance?.();
}
if (step === "artifact") {
dispatch({ type: "artifact_submitted" });
onAdvance?.();
}
if (step === "deployment") dispatch({ type: "run_requested" });
}}
/>
<div className="prepared-lifecycle-scene__presentation">
<ol className="prepared-lifecycle-scene__rail" aria-label="prepared authoring lifecycle">
{steps.map((candidate, index) => (
<li
key={candidate.id}
data-active={candidate.id === step ? "true" : "false"}
data-complete={index < activeStepIndex ? "true" : "false"}
>
<span className="prepared-lifecycle-scene__ordinal" aria-hidden="true">
{String(index + 1).padStart(2, "0")}
</span>
<strong>{candidate.label}</strong>
<span className="prepared-lifecycle-scene__detail">{candidate.detail}</span>
</li>
))}
</ol>
<article
className="prepared-lifecycle-scene__frame"
role="region"
aria-label="active authoring operation"
data-authoring-step={step}
data-recording-phase={projection.recordingPhase}
data-visual-role="lifecycle-primary"
>
<header className="prepared-lifecycle-scene__frame-header">
<article
className="prepared-lifecycle-scene__frame"
role="region"
aria-label="active authoring operation"
data-authoring-step={step}
data-recording-phase={projection.recordingPhase}
data-visual-role="lifecycle-primary"
>
<header className="prepared-lifecycle-scene__frame-header">
<div>
<span className="prepared-lifecycle-scene__frame-step">{activeStep.label}</span>
<h2>{beat.title}</h2>
<p>{beat.caption}</p>
</div>
<dl className="prepared-lifecycle-scene__evidence">
<div>
<span className="prepared-lifecycle-scene__frame-step">{activeStep.label}</span>
<h2>{beat.title}</h2>
<p>{beat.caption}</p>
<dt>Method</dt>
<dd><code>{projection.primaryCommand.title}</code></dd>
</div>
<dl className="prepared-lifecycle-scene__evidence">
<div>
<dt>Method</dt>
<dd><code>{projection.primaryCommand.title}</code></dd>
</div>
<div>
<dt>Equivalent CLI</dt>
<dd><code>{projection.primaryCommand.command}</code></dd>
</div>
</dl>
</header>
<AuthoringPhaseVisual projection={projection} focus={projection.focus} />
</article>
</div>
</section>
</>
<div>
<dt>Equivalent CLI</dt>
<dd><code>{projection.primaryCommand.command}</code></dd>
</div>
</dl>
</header>
<AuthoringPhaseVisual projection={projection} focus={projection.focus} />
</article>
</div>
</section>
);
};
@@ -84,7 +84,7 @@ describe("presentation.css", () => {
expect(boardBlock).toContain("flex-shrink: 0");
});
it("keeps Scene 9 as a bounded 26/74 split without a lower dock row", () => {
it("keeps the prepared lifecycle as a bounded 26/74 split without a lower dock row", () => {
const sceneBlock = css.match(
/^\.prepared-lifecycle-scene\s*\{(?<body>[\s\S]*?)\n\}/m,
)?.groups?.body;
@@ -98,12 +98,39 @@ describe("presentation.css", () => {
expect(css).not.toMatch(/prepared-lifecycle-scene__dock[\s\S]*position:\s*(absolute|fixed)/);
});
it("keeps every Scene 9 surface override on the editorial 26/74 split", () => {
const scene9Rules = css.match(/\.prepared-lifecycle-scene[^{}]*\{[^}]*\}/g) ?? [];
it("asserts the winning editorial 26/74 split", () => {
const editorialScene = cssBlocks(
css,
'.prepared-lifecycle-scene[data-presentation-surface="editorial"]',
).find((body) => body.includes("--authoring-paper") && body.includes("grid-template-columns:"));
expect(scene9Rules.filter((rule) => rule.includes("grid-template-columns:")).length).toBeGreaterThan(0);
expect(scene9Rules.join("\n")).not.toContain("1.65fr");
expect(scene9Rules.join("\n")).toMatch(/minmax\(12rem, 0\.26fr\)\s+minmax\(0, 0\.74fr\)/);
expect(editorialScene).toBeDefined();
expect(editorialScene).toMatch(/grid-template-columns: minmax\(12rem, 0\.26fr\) minmax\(0, 0\.74fr\)/);
expect(editorialScene).not.toContain("0.24fr");
expect(editorialScene).not.toContain("0.76fr");
});
it("scopes Diagnose and Repair focus styling to the prepared lifecycle frame", () => {
const preparedFrame = '.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame';
const diagnose = cssBlocks(css, `${preparedFrame} .authoring-visual--repair[data-authoring-focus="diagnose"]`)
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);"));
const repair = cssBlocks(css, `${preparedFrame} .authoring-visual--repair[data-authoring-focus="repair"]`)
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);"));
const diagnoseEvidence = cssBlocks(
css,
`${preparedFrame} .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__diagnostic`,
).find((body) => body.includes("border-inline-start: 3px solid"));
const repairEvidence = cssBlocks(
css,
`${preparedFrame} .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__correction`,
).find((body) => body.includes("border-inline-start: 3px solid"));
expect(diagnose).toContain("grid-template-columns: minmax(0, 1fr);");
expect(diagnoseEvidence).toContain("border-inline-start: 3px solid");
expect(repair).toContain("grid-template-columns: minmax(0, 1fr);");
expect(repairEvidence).toContain("border-inline-start: 3px solid");
expect(css).toContain(`${preparedFrame} .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__correction`);
expect(css).toContain(`${preparedFrame} .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__status`);
});
it("gives the prepared lifecycle rail and operation frame the primary hierarchy", () => {
@@ -135,7 +162,33 @@ describe("presentation.css", () => {
expect(compactRail).toContain("scrollbar-width: none;");
});
it("bounds Scene 9 conversation scrolling and recenters Scene 8 at compact stage widths", () => {
it("keeps the operation frame readable at 720px and stacks presentation at 480px", () => {
const compactContainer = cssBlock(css, "@container presentation-canvas (max-width: 1050px)") ?? "";
const compactScene = cssBlocks(compactContainer, '.prepared-lifecycle-scene[data-presentation-surface="editorial"]')
.find((body) => body.includes("grid-template-columns: minmax(10.5rem, 0.28fr)"));
const compactFrame = cssBlocks(
compactContainer,
'.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame',
).find((body) => body.includes("grid-template-rows: auto auto;"));
const compactRepair = cssBlocks(
compactContainer,
'.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair',
).find((body) => body.includes("grid-template-columns: minmax(0, 1fr);"));
const narrowContainer = cssBlock(css, "@container presentation-canvas (max-width: 600px)") ?? "";
const narrowScene = cssBlocks(narrowContainer, ".prepared-lifecycle-scene")
.find((body) => body.includes("grid-template-columns: minmax(0, 1fr);") && body.includes("grid-template-areas:"));
expect(compactScene).toContain("overflow: visible;");
expect(compactFrame).toContain("grid-template-rows: auto auto;");
expect(compactFrame).toContain("min-height: 18rem;");
expect(compactFrame).toContain("overflow: visible;");
expect(compactRepair).toContain("grid-template-columns: minmax(0, 1fr);");
expect(compactRepair).toContain("min-width: 0;");
expect(narrowScene).toContain("grid-template-columns: minmax(0, 1fr);");
expect(narrowScene).toContain('grid-template-areas: "presentation" "assistant";');
});
it("bounds prepared conversation scrolling and recenters the agent handoff at compact stage widths", () => {
expect(css.match(/\.presentation-stage\[data-scene-view="agent"\] \.presentation-stage__primary\s*\{/g)).toHaveLength(2);
expect(cssBlocks(css, ".presentation-stage__primary > .agent-handoff-scene")
.some((body) => body.includes("margin-inline: auto;"))).toBe(true);
@@ -3674,7 +3674,7 @@
}
}
/* Scene 9 — persistent assistant beside the dominant phase projection. */
/* Prepared lifecycle — persistent assistant beside the dominant phase frame. */
.prepared-lifecycle-scene {
display: grid;
grid-template-columns: minmax(12rem, 0.26fr) minmax(0, 0.74fr);
@@ -3831,20 +3831,6 @@
font: 600 0.72rem/1.3 var(--font-mono);
}
.stage-caption:has(+ .prepared-lifecycle-scene) {
margin-bottom: 0.55rem;
padding: 0.75rem 1rem;
}
.stage-caption:has(+ .prepared-lifecycle-scene) h1 {
margin-block: 0.15rem 0.25rem;
font-size: 1.85rem;
}
.stage-caption:has(+ .prepared-lifecycle-scene) p {
margin: 0;
}
.presentation-assistant-pane {
display: flex;
min-width: 0;
@@ -3945,7 +3931,7 @@
--authoring-ink: var(--color-editorial-ink, oklch(0.19 0.015 65));
--authoring-muted: var(--color-editorial-muted, oklch(0.48 0.025 65));
--authoring-rule: color-mix(in oklch, var(--authoring-muted) 32%, transparent);
grid-template-columns: minmax(12rem, 0.24fr) minmax(0, 0.76fr);
grid-template-columns: minmax(12rem, 0.26fr) minmax(0, 0.74fr);
gap: 0.8rem;
background: var(--authoring-paper);
color: var(--authoring-ink);
@@ -4016,6 +4002,52 @@
color: var(--authoring-muted);
}
/* Diagnose and Repair are distinct editorial cuts of the recorded validate phase. */
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
align-content: start;
gap: 0.75rem;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__diagnostic {
grid-column: 1;
min-height: 0;
border-inline-start: 3px solid var(--accent-amber);
background: color-mix(in oklch, var(--authoring-paper) 90%, var(--accent-amber));
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__connector,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__correction,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__status {
display: none;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
align-content: start;
gap: 0.75rem;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__diagnostic,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__connector {
display: none;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__correction {
grid-column: 1;
min-height: 0;
border-inline-start: 3px solid var(--success);
background: color-mix(in oklch, var(--authoring-paper) 90%, var(--success));
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__status {
grid-column: 1;
justify-content: flex-start;
color: var(--success);
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .presentation-assistant-pane {
background: color-mix(in oklch, var(--authoring-paper) 92%, var(--authoring-muted));
border-color: var(--authoring-rule);
@@ -4107,6 +4139,7 @@
.prepared-lifecycle-scene[data-presentation-surface="editorial"] {
grid-template-columns: minmax(10.5rem, 0.28fr) minmax(0, 0.72fr);
gap: 0.6rem;
overflow: visible;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__rail {
@@ -4118,7 +4151,16 @@
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame {
grid-template-rows: auto auto;
min-height: 18rem;
height: auto;
padding: 0.9rem;
overflow: visible;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__presentation {
min-height: max-content;
overflow: visible;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame-header {
@@ -4126,6 +4168,37 @@
gap: 0.7rem;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-visual--repair {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
width: 100%;
min-width: 0;
height: auto;
gap: 0.7rem;
align-content: start;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__diagnostic,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__correction {
min-width: 0;
min-height: 0;
padding: 0.85rem;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__connector {
display: none;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__status {
grid-column: 1;
justify-content: flex-start;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__diagnostic strong,
.prepared-lifecycle-scene[data-presentation-surface="editorial"] .prepared-lifecycle-scene__frame .authoring-repair__correction code {
overflow-wrap: anywhere;
}
.problem-loop-scene[data-presentation-surface="editorial"] {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
@@ -4143,6 +4216,23 @@
to { opacity: 1; }
}
@container presentation-canvas (max-width: 600px) {
.prepared-lifecycle-scene[data-presentation-surface="editorial"] {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "presentation" "assistant";
overflow: visible;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] > .prepared-lifecycle-scene__presentation {
grid-area: presentation;
}
.prepared-lifecycle-scene[data-presentation-surface="editorial"] > .presentation-assistant-pane {
grid-area: assistant;
min-height: 14rem;
}
}
@media (prefers-reduced-motion: reduce) {
.prepared-lifecycle-scene__frame > * {
animation: none;