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

feat: add presentation evidence stage

Browse Source
This commit is contained in:
lda
2026-07-03 05:33:59 +07:00 Verified
parent 045f25ae72
commit a148338199
8 changed files with 148 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/current_roadmap.md
+5 -3
View File
@@ -66,12 +66,14 @@ Implementation order:
[`demo autoplay and replay`](superpowers/specs/2026-07-03-demo-autoplay-replay.md).
Implementation:
[`demo autoplay and replay plan`](historical/superpowers/plans/2026-07-03-demo-autoplay-replay.md).
7. Add React presentation mode for the prepared workflow demo. Make the report
workflow story primary, demote lifecycle evidence to supporting panels, and
keep the layout usable on a 720p display. Decision:
7. Completed: React presentation mode foundation for the prepared workflow demo.
Make the report workflow story primary, demote lifecycle evidence to
supporting panels, and keep the layout usable on a 720p display. Decision:
[`React presentation mode before Astro`](adr/0003-react-presentation-mode-before-astro.md).
Design:
[`React presentation mode`](superpowers/specs/2026-07-03-react-presentation-mode-design.md).
Implementation:
[`React presentation mode plan`](superpowers/plans/2026-07-03-react-presentation-mode.md).
8. Add a constrained demo agent that invokes one prepared recipe macro.
9. Add a static slide/appendix shell only after presentation mode is clear.
Astro remains an option, not the default next surface.
web/README.md
+12
View File
@@ -148,3 +148,15 @@ product CLI setup commands.
operation, and `Next` applies exactly one operation or recorded event.
Playback always stops at `issue_review`; approval remains a human action in
both modes. Replay is visibly labeled and does not create real issues.
### Presentation Mode
The console also exposes `/present`, a replay-first defense route for the
prepared `lda_report_workflow` story. It uses the same demo timeline data as
the console demo, but renders a 720p-friendly staged view with keyboard beat
navigation, operation blocks, graph node spotlight, and evidence drawer.
```powershell
pnpm --dir web dev
# open http://127.0.0.1:5173/present
```
web/apps/console/src/presentation/EvidenceDrawer.test.tsx
+27
View File
@@ -0,0 +1,27 @@
import { cleanup, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import type { EvidenceRecord } from "../app/state.js";
import { EvidenceDrawer } from "./EvidenceDrawer.js";
afterEach(() => cleanup());
const record: EvidenceRecord = {
id: "demo-run-start",
operation: "workflow.runs.start",
label: "Start run",
equivalentCli: "uv run wf run start lda_report_case_study.default",
request: { deployment_id: "lda_report_case_study.default" },
response: { result: { status: "interrupted" } },
durationMs: 88,
};
describe("EvidenceDrawer", () => {
it("renders current evidence records and can close", () => {
const close = vi.fn();
render(<EvidenceDrawer records={[record]} mode="open" close={close} />);
expect(screen.getByRole("complementary", { name: /presentation evidence/i })).toBeInTheDocument();
expect(screen.getByText(/workflow.runs.start/i)).toBeInTheDocument();
expect(screen.getByText(/interrupted/i)).toBeInTheDocument();
});
});
web/apps/console/src/presentation/EvidenceDrawer.tsx
+35
View File
@@ -0,0 +1,35 @@
import type { EvidenceRecord } from "../app/state.js";
import type { PresentationState } from "./presentation-state.js";
const formatJson = (value: unknown): string => JSON.stringify(value, null, 2);
type EvidenceDrawerProps = {
readonly records: readonly EvidenceRecord[];
readonly mode: PresentationState["evidenceMode"];
readonly close: () => void;
};
export const EvidenceDrawer = ({ records, mode, close }: EvidenceDrawerProps) => {
if (mode === "hidden") return null;
return (
<aside className="evidence-drawer" data-mode={mode} aria-label="presentation evidence">
<header>
<h2>Evidence</h2>
<button type="button" onClick={close}>Close</button>
</header>
{records.length === 0 ? (
<p>No live evidence captured in this view yet. Replay operation blocks still show recorded evidence.</p>
) : (
records.map((record) => (
<article key={record.id}>
<h3>{record.operation}</h3>
<p>{record.label}</p>
<pre><code>{record.equivalentCli}</code></pre>
<pre><code>{formatJson(record.response)}</code></pre>
</article>
))
)}
</aside>
);
};
web/apps/console/src/presentation/PresentationRoute.test.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ describe("PresentationRoute", () => {
expect(screen.getByText("Prepare the thesis readiness report.")).toBeInTheDocument();
expect(screen.getByLabelText(/presentation beat rail/i)).toBeInTheDocument();
expect(screen.getByText(/Replay/)).toBeInTheDocument();
expect(screen.getByText("Replay · running")).toBeInTheDocument();
});
it("shows node spotlight when a graph node is selected", async () => {
web/apps/console/src/presentation/PresentationRoute.tsx
+12 -4
View File
@@ -1,7 +1,7 @@
import { useCallback, useEffect, useReducer, useState } from "react";
import type { EvidenceRecord } from "../app/state.js";
import { useDemoTimeline } from "../demo/useDemoTimeline.js";
import { hashForBeat, presentationBeats } from "./beats.js";
import { hashForBeat } from "./beats.js";
import { PresentationStage } from "./PresentationStage.js";
import {
initialPresentationState,
@@ -16,7 +16,7 @@ export const PresentationRoute = () => {
(initial) => presentationReducer(initial, { type: "jump_hash", hash: window.location.hash }),
);
const [_evidence, setEvidence] = useState<readonly EvidenceRecord[]>([]);
const [evidence, setEvidence] = useState<readonly EvidenceRecord[]>([]);
const recordEvidence = useCallback((record: EvidenceRecord) => {
setEvidence((records) => [...records, record]);
}, []);
@@ -46,20 +46,28 @@ export const PresentationRoute = () => {
}, []);
useEffect(() => {
if (demo.state.phase === "ready") {
if (demo.state.phase === "ready" && demo.state.mode !== "replay") {
demo.setMode("replay");
}
}, [demo.state.phase, demo.state.mode, demo.setMode]);
useEffect(() => {
if (demo.state.phase === "ready" && demo.state.mode === "replay") {
demo.start();
}
}, [demo]);
}, [demo.state.phase, demo.state.mode, demo.start]);
return (
<main className="presentation-route" aria-label="lda.chat presentation">
<PresentationStage
state={state}
demo={demo}
evidence={evidence}
jump={(beatId) => dispatch({ type: "jump", beat: beatId })}
selectNode={(nodeId) => dispatch({ type: "select_node", nodeId })}
clearNode={() => dispatch({ type: "clear_node" })}
openEvidence={() => dispatch({ type: "set_evidence_mode", mode: "open" })}
closeOverlay={() => dispatch({ type: "close_overlay" })}
/>
</main>
);
web/apps/console/src/presentation/PresentationStage.tsx
+15 -3
View File
@@ -1,5 +1,7 @@
import type { EvidenceRecord } from "../app/state.js";
import { presentationBeats, type BeatId } from "./beats.js";
import { BeatRail } from "./BeatRail.js";
import { EvidenceDrawer } from "./EvidenceDrawer.js";
import { NodeSpotlight } from "./NodeSpotlight.js";
import { OperationBlock } from "./OperationBlock.js";
import { OperatorChat } from "./OperatorChat.js";
@@ -11,17 +13,23 @@ import type { DemoTimelineController } from "../demo/useDemoTimeline.js";
type PresentationStageProps = {
readonly state: PresentationState;
readonly demo: DemoTimelineController;
readonly evidence: readonly EvidenceRecord[];
readonly jump: (beat: BeatId) => void;
readonly selectNode: (nodeId: string) => void;
readonly clearNode: () => void;
readonly openEvidence: () => void;
readonly closeOverlay: () => void;
};
export const PresentationStage = ({
state,
demo,
evidence,
jump,
selectNode,
clearNode,
openEvidence,
closeOverlay,
}: PresentationStageProps) => {
const beat = presentationBeats.find((candidate) => candidate.id === state.beat) ?? presentationBeats[0]!;
@@ -34,9 +42,12 @@ export const PresentationStage = ({
<div className="presentation-stage" data-beat={state.beat}>
<OperatorChat state={state} />
<section className="presentation-stage__main">
<StageCaption eyebrow="lda.chat defense" title={beat.title}>
<p>{beat.caption}</p>
</StageCaption>
<header className="presentation-stage__header">
<StageCaption eyebrow="lda.chat defense" title={beat.title}>
<p>{beat.caption}</p>
</StageCaption>
<button type="button" onClick={openEvidence}>Evidence</button>
</header>
{operationEvent && <OperationBlock event={operationEvent} />}
<WorkflowGraphStage selectedNodeId={state.selectedNodeId} selectNode={selectNode} />
{state.selectedNodeId && (
@@ -47,6 +58,7 @@ export const PresentationStage = ({
</p>
</section>
<BeatRail activeBeat={state.beat} jump={jump} />
<EvidenceDrawer records={evidence} mode={state.evidenceMode} close={closeOverlay} />
</div>
);
};
web/apps/console/src/presentation/presentation.css
+41
View File
@@ -126,3 +126,44 @@
padding: 1rem;
z-index: 20;
}
.evidence-drawer {
position: fixed;
inset: 0 0 0 auto;
width: min(36rem, 90vw);
padding: 1rem;
overflow: auto;
background: oklch(0.13 0.025 250);
border-left: 1px solid oklch(0.34 0.04 250);
z-index: 30;
}
.evidence-drawer pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
@media (max-height: 760px) {
.presentation-stage {
padding: 0.75rem;
gap: 0.65rem;
}
.stage-caption h1 {
font-size: clamp(1.8rem, 4vw, 3rem);
}
.workflow-graph-stage {
min-height: 12rem;
}
}
@media (prefers-reduced-motion: reduce) {
.presentation-route *,
.presentation-route *::before,
.presentation-route *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}