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
+9 -6
View File
@@ -42,6 +42,7 @@ Design contracts:
- [`presentation live/replay truth`](superpowers/specs/2026-07-09-presentation-live-replay-truth-design.md) - [`presentation live/replay truth`](superpowers/specs/2026-07-09-presentation-live-replay-truth-design.md)
- [`presentation lifecycle story expansion`](superpowers/specs/2026-07-09-presentation-lifecycle-story-expansion-design.md) - [`presentation lifecycle story expansion`](superpowers/specs/2026-07-09-presentation-lifecycle-story-expansion-design.md)
- [`presentation opening visuals`](superpowers/specs/2026-07-10-presentation-opening-visuals-design.md) - [`presentation opening visuals`](superpowers/specs/2026-07-10-presentation-opening-visuals-design.md)
- [`presentation evaluation and closing`](superpowers/specs/2026-07-10-presentation-evaluation-closing-design.md)
Implementation order: Implementation order:
@@ -186,10 +187,8 @@ Presentation visual audit, July 10:
- Needs product-flow cohesion: Scenes 8-12 now have the right factual spine, - Needs product-flow cohesion: Scenes 8-12 now have the right factual spine,
but the demo surfaces still need stronger hierarchy between chat, operation, but the demo surfaces still need stronger hierarchy between chat, operation,
lifecycle, graph, interrupt, output, and evidence. lifecycle, graph, interrupt, output, and evidence.
- Needs non-text evaluation visuals: Scene 13 should become a compact evidence - Completed: Scenes 13 and 14 now close with a bounded evaluation board,
board or chart-like summary instead of prose-heavy results. contribution boundary/future-work map, and canonical defense-question index.
- Needs closing visual: Scene 14 should land the boundary/future-work message
with one memorable diagram, not just limits text.
Recommended next visual slices: Recommended next visual slices:
@@ -213,8 +212,12 @@ Recommended next visual slices:
output, and trace beats read as product evidence without chat competing for output, and trace beats read as product evidence without chat competing for
space. Implementation: space. Implementation:
[`guided proof scene composition cleanup`](historical/superpowers/plans/2026-07-10-guided-proof-scene-composition-cleanup.md). [`guided proof scene composition cleanup`](historical/superpowers/plans/2026-07-10-guided-proof-scene-composition-cleanup.md).
5. Evidence and closing visuals: make Scenes 13 and 14 readable as a defense 5. Completed: Evidence and closing visuals make Scenes 13 and 14 readable as a
artifact: evaluation board, claim boundaries, and future-work map. defense artifact: bounded evaluation board, claim boundaries, future-work
map, and canonical examiner-question index. Design:
[`presentation evaluation and closing`](superpowers/specs/2026-07-10-presentation-evaluation-closing-design.md).
Implementation:
[`presentation evaluation and closing plan`](historical/superpowers/plans/2026-07-10-presentation-evaluation-closing.md).
Presentation wishlist / defense readiness: Presentation wishlist / defense readiness:
+4
View File
@@ -173,6 +173,10 @@ prepared `lda_report_workflow` story. It renders a 12-scene, multi-beat
storyboard with an adaptive aspect-ratio canvas, stable stage regions, discussion storyboard with an adaptive aspect-ratio canvas, stable stage regions, discussion
branches, act themes, a chat dock, and keyboard navigation. branches, act themes, a chat dock, and keyboard navigation.
The final presentation beats frame the evaluation as bounded evidence, make
claim boundaries and future work explicit, and end on the canonical defense
discussion index rather than a benchmark or generic conclusion.
Scenes 8 through 10 use the canonical replay as their only execution evidence. Scenes 8 through 10 use the canonical replay as their only execution evidence.
The handoff expands an interpreted run operation into the center stage, then The handoff expands an interpreted run operation into the center stage, then
keeps one workflow graph mounted while execution reaches the typed interrupt keeps one workflow graph mounted while execution reaches the typed interrupt
@@ -4,7 +4,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
import { loadCanonicalDemoRecording } from "../demo/timeline/replay.js"; import { loadCanonicalDemoRecording } from "../demo/timeline/replay.js";
import type { DemoTimelineController } from "../demo/useDemoTimeline.js"; import type { DemoTimelineController } from "../demo/useDemoTimeline.js";
import { SceneBody } from "./SceneBody.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"; import { findBeat, findScene } from "./storyboard.js";
const noop = () => {}; const noop = () => {};
@@ -39,7 +39,7 @@ const demo: DemoTimelineController = {
afterEach(() => cleanup()); afterEach(() => cleanup());
const renderSceneBodyAtMainLocation = (sceneId: PresentationLocation["sceneId"], beatId: string, openDiscussion = noop) => render( const renderSceneBodyAtMainLocation = (sceneId: MainLocation["sceneId"], beatId: string, openDiscussion = noop) => render(
<SceneBody <SceneBody
location={{ kind: "main", sceneId, beatId, focusPath: [] }} location={{ kind: "main", sceneId, beatId, focusPath: [] }}
demo={demo} demo={demo}
@@ -19,9 +19,18 @@ describe("presentation.css", () => {
it("stacks evaluation audit rows at the 1080px container breakpoint", () => { it("stacks evaluation audit rows at the 1080px container breakpoint", () => {
const breakpointBlock = css.match(/@media \(max-width: 1080px\) \{(?<body>[\s\S]*?)\n\}/)?.groups?.body; 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;/); 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", () => { 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--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;/); 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/); 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", () => { it("keeps future-work icons neutral by default", () => {
expect(css).toMatch(/\.conclusion-map__future svg\s*\{[^}]*color: var\(--text-secondary\);/s); 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); 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); grid-template-columns: minmax(14rem, 0.8fr) minmax(20rem, 1.2fr);
gap: 0; gap: 0;
margin: 0.25rem 0 0.5rem; margin: 0.25rem 0 0.5rem;
/* Let the primary stage scroll at 4:3 instead of clipping board rows. */
flex-shrink: 0;
overflow: hidden; overflow: hidden;
border: 1px solid var(--evaluation-rule); border: 1px solid var(--evaluation-rule);
border-radius: 0.35rem; border-radius: 0.35rem;
@@ -217,10 +219,10 @@
} }
@media (max-width: 1080px) { @media (max-width: 1080px) {
.evaluation-board { grid-template-columns: 1fr; } .evaluation-board { grid-template-columns: minmax(12rem, 0.7fr) minmax(20rem, 1.3fr); }
.evaluation-board__cohort { border-right: 0; } .evaluation-board__cohort { border-right: 1px solid var(--evaluation-rule); }
.evaluation-board__outcomes, .evaluation-board__outcomes,
.evaluation-board__findings { grid-column: auto; } .evaluation-board__findings { grid-column: 2; }
.evaluation-board__audit-row { grid-template-columns: 1fr; } .evaluation-board__audit-row { grid-template-columns: 1fr; }
} }
@@ -268,6 +270,7 @@
border: 1px solid var(--stage-line); border: 1px solid var(--stage-line);
border-radius: 0.45rem; border-radius: 0.45rem;
background: linear-gradient(135deg, oklch(0.17 0.03 250), oklch(0.13 0.025 250)); 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 { .conclusion-map__flow {