fix: finish evaluation closing visuals

This commit is contained in:
lda
2026-07-10 23:06:12 +07:00 Verified
parent 5f79ee455b
commit 6afd38f59a
6 changed files with 36 additions and 11 deletions
@@ -4,7 +4,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
import { loadCanonicalDemoRecording } from "../demo/timeline/replay.js";
import type { DemoTimelineController } from "../demo/useDemoTimeline.js";
import { SceneBody } from "./SceneBody.js";
import type { PresentationLocation } from "./storyboard.js";
import type { MainLocation, PresentationLocation } from "./storyboard.js";
import { findBeat, findScene } from "./storyboard.js";
const noop = () => {};
@@ -39,7 +39,7 @@ const demo: DemoTimelineController = {
afterEach(() => cleanup());
const renderSceneBodyAtMainLocation = (sceneId: PresentationLocation["sceneId"], beatId: string, openDiscussion = noop) => render(
const renderSceneBodyAtMainLocation = (sceneId: MainLocation["sceneId"], beatId: string, openDiscussion = noop) => render(
<SceneBody
location={{ kind: "main", sceneId, beatId, focusPath: [] }}
demo={demo}
@@ -19,9 +19,18 @@ describe("presentation.css", () => {
it("stacks evaluation audit rows at the 1080px container breakpoint", () => {
const breakpointBlock = css.match(/@media \(max-width: 1080px\) \{(?<body>[\s\S]*?)\n\}/)?.groups?.body;
expect(breakpointBlock).toMatch(
/\.evaluation-board\s*\{\s*grid-template-columns: minmax\(12rem, 0\.7fr\) minmax\(20rem, 1\.3fr\);/,
);
expect(breakpointBlock).toMatch(/\.evaluation-board__audit-row\s*\{\s*grid-template-columns: 1fr;/);
});
it("keeps the full evaluation board available to the scrollable stage", () => {
const boardBlock = css.match(/\.evaluation-board\s*\{(?<body>[\s\S]*?)\n\}/)?.groups?.body;
expect(boardBlock).toContain("flex-shrink: 0");
});
it("places the conclusion evidence beneath substrate at the 1080px breakpoint", () => {
expect(css).toMatch(/\.conclusion-map__node--planner\s*\{\s*grid-column: 1;\s*grid-row: 1;/);
expect(css).toMatch(/\.conclusion-map__node--substrate\s*\{\s*grid-column: 2;\s*grid-row: 1;/);
@@ -30,6 +39,12 @@ describe("presentation.css", () => {
expect(css).not.toMatch(/\.conclusion-map__node--runtime::after/);
});
it("uses a light foreground against the dark conclusion map", () => {
const mapBlock = css.match(/\.conclusion-map\s*\{(?<body>[\s\S]*?)\n\}/)?.groups?.body;
expect(mapBlock).toContain("color: oklch(0.93 0.015 250)");
});
it("keeps future-work icons neutral by default", () => {
expect(css).toMatch(/\.conclusion-map__future svg\s*\{[^}]*color: var\(--text-secondary\);/s);
expect(css).not.toMatch(/\.conclusion-map__future svg\s*\{[^}]*color: var\(--accent-cyan\);/s);
@@ -88,6 +88,8 @@
grid-template-columns: minmax(14rem, 0.8fr) minmax(20rem, 1.2fr);
gap: 0;
margin: 0.25rem 0 0.5rem;
/* Let the primary stage scroll at 4:3 instead of clipping board rows. */
flex-shrink: 0;
overflow: hidden;
border: 1px solid var(--evaluation-rule);
border-radius: 0.35rem;
@@ -217,10 +219,10 @@
}
@media (max-width: 1080px) {
.evaluation-board { grid-template-columns: 1fr; }
.evaluation-board__cohort { border-right: 0; }
.evaluation-board { grid-template-columns: minmax(12rem, 0.7fr) minmax(20rem, 1.3fr); }
.evaluation-board__cohort { border-right: 1px solid var(--evaluation-rule); }
.evaluation-board__outcomes,
.evaluation-board__findings { grid-column: auto; }
.evaluation-board__findings { grid-column: 2; }
.evaluation-board__audit-row { grid-template-columns: 1fr; }
}
@@ -268,6 +270,7 @@
border: 1px solid var(--stage-line);
border-radius: 0.45rem;
background: linear-gradient(135deg, oklch(0.17 0.03 250), oklch(0.13 0.025 250));
color: oklch(0.93 0.015 250);
}
.conclusion-map__flow {