Files
lda-wf/docs/historical/superpowers/specs/2026-07-04-defense-presentation-storyboard-design.md
T

710 lines
33 KiB
Markdown

# Defense Presentation Storyboard Design
## Status
Current narrative and composition contract for the lda.chat thesis defense.
This document defines what the presentation must communicate and how the stage
changes while it does so. It complements the
[React presentation mode design](2026-07-03-react-presentation-mode-design.md),
which defines the existing route and component architecture, and the
[constrained demo agent design](2026-07-03-constrained-demo-agent-design.md),
which defines the prepared replay driver.
## Purpose
The defense must explain a systems contribution, demonstrate a real product
surface, and survive unreliable network or model access. The current `/present`
route proves that the components can be composed, but it does not yet provide a
coherent defense story or fit the content into a `1280x720` viewport.
The presentation is not a conventional slide deck wrapped around a separate
demo. It is a staged React compositor. Thesis claims, architecture diagrams,
chat, workflow graphs, operations, interrupt approval, outputs, and evidence
occupy the same stable stage and move between semantic scenes.
The listed scene budgets total 8 minutes 36 seconds. Rehearsal should target a
10-to-11-minute main path after transitions, approval interaction, and natural
pauses. This leaves margin in a 15-minute slot without forcing the presenter to
rush.
## Speaking Voice
The spoken script primarily uses personal defense voice:
- "I designed and implemented ..."
- "I evaluated ..."
- "I deliberately excluded ..."
Technical invariants remain neutral where precision matters:
- "The runtime validates the payload before execution."
- "A deployment binds logical requirements to concrete sources."
This keeps ownership clear without making the system sound subjective.
## Claim Discipline
Every scene carries one claim class. The visual treatment must make the class
clear without requiring the presenter to recite a disclaimer.
- **Motivation:** problem framing or design rationale; not an empirical result.
- **Implemented:** supported by current code, tests, or a product operation.
- **Evaluated:** supported by the thesis case studies or the audited 36-trial
challenge cohort.
- **External context:** a cited result from another organization; not evidence
about lda.chat.
- **Future work:** a plausible extension that is not part of the submitted
implementation.
Each scene definition must retain an evidence pointer. An evidence pointer may
be a thesis section, repository path, deterministic replay event, test group, or
external source. A scene without an evidence pointer may present motivation or
transition language, but it may not introduce a new factual claim.
## Stable Stage Geography
The presentation uses three canonical layers:
- **Editorial Canvas:** the persistent warm, light visual identity used for the
spoken argument, figures, and transitions.
- **Product Surface:** a real application or evidence surface that expands from
an inline trigger when the story requires product proof.
- **Presentation Frame:** the thin remainder of the Editorial Canvas that stays
visible around an expanded Product Surface.
The presentation is therefore an editorial thesis deck that temporarily
transforms into the product. It is not a dashboard or chat application used as
a decorative container for every scene.
The stage has two stable content regions and one transient inspection layer:
```text
+----------------+--------------------------------+
| agent / chat | primary graph, model, output |
| optional | always owns visual focus |
+----------------+--------------------------------+
| progress and compact evidence receipt |
+-------------------------------------------------+
```
The regions may expand, collapse, or overlap, but they do not swap meanings.
The audience should learn the geography once. A Product Surface may occupy
roughly 80 percent of the stage, but it does not erase the Presentation Frame;
the audience must still read it as evidence inside the argument rather than an
accidental application switch.
- **Left:** agent conversation and operation intent.
- **Center:** the primary explanation, workflow graph, output, or evaluation
result.
- **Overlay:** raw and interpreted evidence, trace, schemas, or source details.
Narrative scenes hide chat. Demo scenes may show chat as `full`, `rail`, or
`dock`. Evidence appears as a compact progress-row receipt unless the presenter
explicitly opens the centered inspector.
The dock remains visible in a corner when chat is otherwise hidden. Pointer
hover may preview it, but opening chat requires a click, keyboard action, or
presenter control so the interaction remains usable without a precise mouse.
Vertical stacking is forbidden on the main path. Across supported logical
canvases from `960x720` through `1280x720`, the presenter must not scroll to
discover the graph, approval control, output, or next action.
The audience route keeps a deterministic `720px` logical height and adapts its
logical width continuously from `960px` to `1280px`, covering `4:3` through
`16:9`. Container queries adapt placement without omitting information.
Unsupported extreme ratios letterbox. Presenter and audience views preserve
the same semantic content and Focus Path. See the
[adaptive presentation canvas design](2026-07-05-adaptive-presentation-canvas-design.md).
## Unified Presentation Identity
The Editorial Canvas keeps one warm, light identity from introduction through
conclusion. Product surfaces may use their native light or dark appearance,
but entering a product surface does not switch the theme of the entire deck.
Chat remains independently positioned because it is a product element, not the
presentation's visual identity:
See [ADR 0005](../../adr/0005-editorial-canvas-around-shared-product-surfaces.md).
Major claims use an editorial display serif, provisionally Newsreader. Source
Sans 3 remains the explanatory and interface face, while IBM Plex Mono is
reserved for commands, identifiers, schemas, and evidence. Condensed all-caps
type is an accent rather than the default title treatment.
```ts
type PresentationAppearance = {
readonly chatMode: "hidden" | "full" | "rail" | "dock";
readonly productExpansion: "inline" | "expanded";
};
```
A rehearsal toolbar may override chat position, product expansion, motion,
playback mode, and scene selection. It is hidden during the defense.
Remote or phone control is not required for the redesign. Presentation actions
remain input-agnostic so a later remote can dispatch them, but keyboard and
pointer operation are the supported defense controls.
## Defense Chrome
The audience-facing route persistently shows only a quiet scene number or
progress marker. The full scene rail, replay status, discussion index,
presenter controls, and prepared-agent trigger are hidden until explicitly
summoned.
On first visit, a dismissible presenter onboarding overlay explains navigation
and rehearsal controls. Afterwards, `?` opens a presenter-only command and
shortcut palette. Presenter controls are therefore discoverable without
becoming persistent audience chrome; the existing secret `P` shortcut is not a
sufficient interface.
A separate `/presenter` companion route shows the current and next beat,
speaker notes, timer, Discussion Library, and presentation controls without
exposing them on the projected `/present` route. A temporary notes overlay on
`/present` remains the single-screen fallback.
Audience and presenter routes communicate through a typed **Presentation
Transport** that carries reducer actions. The first adapter uses
`BroadcastChannel` for same-browser windows. A future authenticated WebSocket
relay may connect different machines or networks using the same event contract;
that relay does not execute workflows or own presentation semantics.
The presenter palette includes a searchable **Discussion Library** instead of
an audience-facing discussion button. Opening a prepared question stores the
exact scene, beat, and Focus Path. Closing the discussion restores that return
location.
The prepared workflow starts from the chat surface, provisionally through a
button or slash command, rather than through a detached corner action. This
entry point is part of the product story and may later be replaced by a fuller
chat framework without changing the presentation contract.
A **Guided Run** is the prepared agent sequence used during the defense. The
presentation timeline owns its pacing. After emitting the content permitted by
the current beat, the driver waits at a **Beat Gate** until the presenter
advances. Advancing releases at most the next audience-relevant operation;
internal or repetitive actions remain hidden.
The chat starts a Guided Run through a visible **Prompt Macro**, provisionally
`/demo report`. Invoking it expands into the full natural-language request, and
the transcript displays that expanded request rather than a raw slash command.
Expandable provenance may identify the originating macro.
The audience sees a quiet execution provenance label, `Prepared replay` or
`Live server`, but no mode controls. Live and replay drivers must produce the
same Guided Run and Beat Gate structure. If live setup fails, replay replaces
it without changing the presentation narrative or interaction sequence.
Only one audience-relevant operation may cross a Beat Gate at a time. If a live
operation is still running, further advance input does not launch another
operation or skip the gate. The beat shows a restrained working state, and a
presenter-only action may replace that operation with its prepared replay.
If a live operation fails, its failed Chat Tool Receipt remains visible. The
presenter may explicitly choose `Continue with prepared replay`; the
continuation changes the provenance label and never rewrites the failed live
evidence.
An audience-relevant operation has two independent projections from the same
canonical event:
- **Chat Tool Receipt:** a subtle collapsed chat row, expandable on demand into
a bounded, scrollable terminal-style detail. A future chat framework should
own its interaction and accessibility.
- **Stage Projection:** a curated operation view rendered only when the current
argument needs that operation as evidence.
The Chat Tool Receipt does not physically morph into the Stage Projection.
Their continuity is semantic and timeline-driven, which avoids coupling chat
layout to presentation choreography.
A pending typed interrupt creates one **Approval Session** with synchronized
chat and Product Surface projections. Chat presents a compact approval card and
selection summary; the Product Surface presents the full schema-backed list or
form. Edits from either projection update the same draft response. Submission
from either resolves the interrupt exactly once, then both projections become
read-only with the same result.
Both projections consume a reusable **Schema Form Surface** rather than
hand-built interrupt fields. It accepts JSON Schema, a draft value, validation
state, read-only state, and custom widget registrations. Typed interrupts are
the first consumer; deployment inputs, run inputs, and future configuration
surfaces may reuse the same boundary. Domain-specific interactions such as
issue selection are custom widgets over the generic form contract.
The Schema Form Surface lives in a small shared web package. Console and
presentation surfaces import that package, while app-specific widgets and
Approval Session orchestration remain in their owning applications.
Chat rendering uses source-owned, established AI-chat primitives rather than
project-specific message and tool-call components. The adopted surface must
cover conversation, message, collapsed tool receipt, bounded terminal detail,
and prompt input. It owns rendering and accessibility only;
`AgentMessagePart`, `AgentDriver`, Guided Run, and Beat Gate semantics remain
project contracts.
Tailwind and shadcn-compatible styling may be introduced additively for these
source-owned primitives and new presentation components. Existing console CSS
is not subject to a wholesale rewrite; it migrates only when a component is
replaced. See [ADR 0004](../../adr/0004-adopt-tailwind-additively-for-source-owned-ui.md).
## Motion Contract
Motion uses only three primitives:
- **Reveal:** a fast opacity transition introduces genuinely new explanatory
content.
- **Expand:** an existing object grows into a Product Surface while preserving
its identity.
- **Reframe:** existing content moves aside to retain context while another
surface takes focus.
Unchanged objects do not remount or replay entrance animation between beats.
Blur, bounce, generic stagger, and decorative typewriter effects are forbidden.
Reduced-motion mode replaces Expand and Reframe with immediate layout changes
and keeps Reveal brief.
## Interactive Figures
Architecture, authoring, workflow, and evidence diagrams use a shared
**Interactive Figure** model rather than scene-specific card layouts. An
Interactive Figure contains addressable **Figure Nodes** and relationships.
Graph-shaped figures may use the existing React Flow and Dagre dependencies;
linear figures may use lighter SVG or HTML renderers over the same interaction
contract.
A Figure Node may reference a child figure. Activating it pushes the node onto
a single **Focus Path** and reframes the canvas around that child figure.
Ancestors remain available through a compact breadcrumb, and `Escape` pops one
focus level. A child figure may contain further expandable nodes, but only one
Focus Path is active; the interface never stacks nested modals or sidebars.
Normal figures are authored as declarative TypeScript definitions containing
nodes, relationships, semantic types, child-figure references, and canonical
Focus Paths. The shared renderer owns layout, focus, keyboard behavior, and
motion. A custom React renderer is an explicit escape hatch for exceptional
figures rather than the default scene-authoring mechanism.
Factual architecture and evaluation nodes carry evidence pointers in their
definitions. Those pointers remain hidden during the normal path and become
available through focused inspection, Q&A, or the evidence surface.
Motivational nodes may omit evidence pointers.
Main-path Figure Node labels use system concepts such as “Runtime” or “Source
providers.” Focused detail may reveal concrete packages, public operations,
tests, or symbols such as `wf_core` and `wf_api`.
Initial figure layout supports only layered, flow, and explicit-position modes.
Dagre may calculate spacing inside the first two. A new reusable layout mode is
added only after at least two concrete figures require it; the presentation is
not a general diagram-layout engine.
Interactive Figures expose keyboard navigation: `Tab` reaches Figure Nodes,
arrow keys move spatially between related nodes, `Enter` expands the focused
node, and `Escape` pops one Focus Path level. Breadcrumbs remain pointer and
keyboard accessible. The presenter `?` palette lists these controls when figure
focus is active.
While a Figure Node owns focus, arrow keys belong to the figure. `Escape`
returns focus to the presentation stage, after which arrows navigate beats.
`Space` remains a global advance shortcut except while focus is inside chat,
forms, terminal detail, or another text-entry control.
Each beat may declare a canonical Focus Path for deterministic playback.
Presenter interaction may temporarily replace it for explanation or Q&A.
Advancing to another beat applies that beat's canonical Focus Path, preventing
manual exploration from making later scenes nondeterministic.
Canonical deep links encode scene, beat, and optional Focus Path so an
interactive figure state can be reproduced directly. Ephemeral UI state such
as chat scroll, expanded Chat Tool Receipts, and presenter-palette visibility
does not enter the URL.
Editorial figures use restrained semantic color:
- blue identifies planner or client intent;
- green identifies deterministic runtime execution;
- orange identifies human boundaries or intervention.
The warm canvas and black typography remain dominant. Labels, connector styles,
and node shapes must carry the same distinction when color is unavailable.
The renderer exposes a small **Figure Vocabulary** rather than one universal
rounded node: actors, operations, artifacts, runtime systems, human boundaries,
and evidence. Scenes compose those primitives differently so they share
interaction behavior without looking mechanically generated from one template.
Visual personality primarily comes from expressive scale, asymmetry, direct
figure manipulation, memorable scene transformations, and occasional
purpose-built illustration or iconography. Decorative gradients, badges, and
background effects are permitted only when they support a specific scene; they
are not the default source of visual interest.
The workflow graph in the product demonstration is not reconstructed through
the Figure Vocabulary. It embeds the real console graph component, driven by
the canonical workflow and run state, inside an expanded Product Surface.
Editorial annotations may explain it without replacing the product evidence.
Product Surfaces use the console's shared components and design tokens rather
than a presentation-only skin. Improving graph, form, receipt, or evidence
styling therefore improves both `/console` and `/present`; presentation code
controls only framing, scale, and when a surface is shown.
The main defense path uses the console's light product theme to remain coherent
with the warm Editorial Canvas. Dark mode remains available in the console but
is not part of the main defense sequence. Terminal and code insets may remain
dark when that treatment communicates their actual content type.
## Scene Semantics
A scene is larger than a slide. It is a semantic chapter composed from several
visual states. Text, diagrams, operations, graphs, and evidence may enter,
leave, expand, or collapse while the scene id remains stable.
Advancing within a scene changes a **beat**. Advancing after the final beat
changes the **scene**. Discussion branches can return to the exact scene and
beat from which they were opened.
Each beat definition carries its short visible claim, speaker notes, timing
budget, evidence pointer, visual or figure id, canonical Focus Path, and
optional Beat Gate. Components render that definition; they do not own the
spoken script or duplicate scene-specific content.
At `1280x720`, each beat presents one primary visual, one short claim, and at
most three supporting labels. A command, schema, or evidence view may replace
the primary visual but does not compete beside another primary visual. Speaker
notes carry details that do not fit this composition budget.
## Main Storyboard
The sequence below preserves the current argument and evidence order, but its
exact scene boundaries and beat counts are not frozen. Visual redesign may
merge, split, or re-time scenes when the claim order, evidence coverage,
discussion returns, and overall defense budget remain intact.
Visual review uses a Playwright-generated gallery of selected beats at
`1280x720` plus manual traversal in the browser. Automated checks cover state,
keyboard behavior, accessibility, overflow, and interaction contracts. The
gallery supports human approval and is not initially enforced through brittle
pixel-diff thresholds.
The redesign preserves public navigation, canonical replay evidence, and
useful reducer actions. It removes obsolete internal contracts cleanly,
including whole-stage theme switching, one-off diagram components, persistent
audience chrome, and presentation-only product skins. Unused UI APIs do not
receive compatibility wrappers.
### Scene 1: Thesis
- **Time:** 0:20
- **Claim class:** Implemented
- **Spoken intent:** "I began with the goal of building an AI agent for creating
and automating workspace workflows. That exposed a more fundamental need: a
typed system for creating, validating, running, and inspecting the workflows
that an agent proposes. This thesis implements that substrate."
- **Primary visual:** title and one-sentence thesis.
- **Composition:** warm Editorial Canvas; chat hidden; no evidence panel.
- **Evidence pointer:** thesis Abstract and Introduction.
- **Transition:** the title contracts into a small persistent lda.chat mark.
### Scene 2: The Problem
- **Time:** 0:40
- **Claim class:** Motivation
- **Spoken intent:** direct agent tool calls can perform actions, but reusable
automation also needs typed contracts, lifecycle state, source bindings,
deterministic execution, persistence, traceability, and recovery boundaries.
- **Primary visual:** an unstable sequence of direct tool calls contrasted with
a durable workflow record; the missing responsibilities appear around it.
- **Composition:** warm Editorial Canvas; chat hidden.
- **Evidence pointer:** thesis problem statement, requirements, and research
question.
- **Transition:** the requirements arrange into a landscape of related systems.
### Scene 3: Positioning and Related Systems
- **Time:** 0:50
- **Claim class:** Motivation
- **Spoken intent:** direct tool loops maximize flexibility, generated scripts
maximize simplicity, hosted automation platforms provide mature triggers and
integrations, agent graph frameworks provide durable agent execution, and
MCP standardizes capability access. lda.chat explores a different center of
gravity: typed lifecycle contracts and provider-neutral sources intended for
external-agent operation.
- **Primary visual:** related approaches progressively occupy distinct positions
around lda.chat; do not reproduce the thesis comparison table.
- **Composition:** warm Editorial Canvas; each approach enters while the positioning axis
remains stable.
- **Evidence pointer:** thesis Positioning and Related Systems chapter.
- **Transition:** lda.chat's position resolves into the planner/runtime boundary.
### Scene 4: Planner and Runtime
- **Time:** 0:40
- **Claim class:** Implemented
- **Spoken intent:** the external planner proposes or revises workflow
structure; the deterministic runtime validates, executes, records, and
resumes it.
- **Primary visual:** a two-sided planner/runtime boundary with explicit
operations crossing it.
- **Composition:** warm Editorial Canvas; chat hidden; the planner/runtime
boundary carries its own semantic color and shape treatment.
- **Evidence pointer:** thesis architecture overview and workflow API boundary.
- **Transition:** the runtime side expands into the lifecycle.
### Scene 5: Lifecycle
- **Time:** 1:00
- **Claim class:** Implemented
- **Spoken intent:** explain Draft, Artifact, Deployment, and Run as distinct
records with different mutability and responsibility.
- **Primary visual:** lifecycle records, including both draft-save and direct
plan-import paths into an immutable artifact.
- **Composition:** warm Editorial Canvas; center focus; the progress row may
show one compact evidence receipt.
- **Evidence pointer:** thesis lifecycle chapter and lifecycle explorer.
- **Transition:** selecting a deployment zooms into the runtime architecture.
### Scene 6: Architecture Zoom
- **Time:** 1:25
- **Claim class:** Implemented
- **Spoken intent:** walk from client operations through JSON-RPC, WorkflowApi,
providers and stores, then into the graph runner and one `NodeUse` execution.
- **Primary visual:** semantic zoom through four levels rather than four
unrelated diagrams.
- **Composition:** warm Editorial Canvas; chat hidden; the evidence receipt
exposes concrete package or operation names without resizing the figure.
- **Evidence pointer:** thesis architecture diagrams, `docs/project_map.md`, and
`docs/source_architecture.md`.
- **Transition:** the semantic zoom backs out into the public authoring surface.
### Scene 7: Author, Validate, Repair
- **Time:** 0:45
- **Claim class:** Implemented
- **Spoken intent:** show discovery, focused draft operations, validation
diagnostics, repair hints, compilation, and save as one machine-operable
loop.
- **Primary visual:** an operation sequence with one structured diagnostic and
its repair action.
- **Composition:** warm Editorial Canvas; chat hidden; a locally dark operation
or terminal block may occupy center while the evidence receipt updates below.
- **Evidence pointer:** CLI documentation, draft authoring API, and challenge
UX findings.
- **Transition:** the operation block becomes the first card in the agent UI.
### Scene 8: Agent Handoff
- **Time:** 0:20
- **Claim class:** Implemented
- **Spoken intent:** "The submitted contribution is the substrate. This prepared
agent interaction shows how a thin external interface can operate it."
- **Primary visual:** a standard AI application surface enters full-screen.
- **Composition:** source-owned light chat surface expands within the warm
Editorial Canvas; evidence hidden.
- **Evidence pointer:** constrained demo agent design and prepared replay recipe.
- **Transition:** the operator request and first operation appear immediately.
### Scene 9: Workflow Takes the Stage
- **Time:** 0:45
- **Claim class:** Implemented
- **Spoken intent:** the prepared agent invokes the report workflow; the visible
tool call expands into raw and interpreted operation output; the workflow
graph becomes primary.
- **Primary visual:** operation card transforming into the report workflow
graph.
- **Composition:** chat moves from full to rail; graph owns center; evidence
remains collapsed.
- **Evidence pointer:** prepared recording events and
`examples/lda_report_workflow/`.
- **Transition:** execution stops at the typed `issue_review` interrupt.
### Scene 10: Interrupt, Resume, Evidence
- **Time:** 1:30
- **Claim class:** Implemented
- **Spoken intent:** explain the typed approval contract, approve selected
issues, resume the same run, then show the generated report, issue-board
writes, trace frames, and raw/interpreted evidence.
- **Primary visual:** interrupt approval followed by output and trace projection.
- **Composition:** chat rail during approval, then dock; center alternates
between interrupt, output, and trace; the centered evidence inspector opens
once through an explicit action.
- **Evidence pointer:** deterministic replay recording, typed interrupt schemas,
run inspect result, and trace events.
- **Failure fallback:** if the live server or operation fails, switch to the
reviewed replay at the current semantic event without resetting the layout or
explaining a new UI.
- **Transition:** trace frames collapse into evaluation evidence.
### Scene 11: Evaluation
- **Time:** 1:25
- **Claim class:** Evaluated
- **Spoken intent:** present the 36-trial cohort as bounded agent-operability and
longitudinal product evidence, not a model leaderboard or broad success-rate
estimate.
- **Primary visual:** cohort structure, audited validity, failure classes, and
selected product improvements discovered through trials.
- **Composition:** warm Editorial Canvas; chat hidden; one chart at a time; the
evidence receipt links to the audit/run records.
- **Evidence pointer:** thesis evaluation chapter, Appendix C, generated cohort
figures, and challenge reports.
- **Transition:** limitations remain while the charts simplify into the final
planner/runtime boundary.
### Scene 12: Limits and Conclusion
- **Time:** 1:00
- **Claim class:** Future work
- **Spoken intent:** distinguish implemented substrate from a future live LLM
interface, production security, scheduling, broader model evaluation, and
comparative studies; end on the planner/runtime separation.
- **Primary visual:** implemented core in focus, future layers around it, then
the one-sentence thesis.
- **Composition:** warm Editorial Canvas; chat dock may remain as a
subtle reminder that the agent is a client of the substrate.
- **Evidence pointer:** thesis limitations and future-work chapters.
- **Transition:** none; hold a stable conclusion frame for questions.
## Presenter Controls
The presenter needs a hidden or unobtrusive rehearsal surface with:
- next and previous scene;
- direct scene jump by number or hash;
- current and next speaker note;
- elapsed and planned time;
- audience progress and current Focus Path;
- motion reduction toggle;
- replay/live indicator and forced replay fallback;
- reset to the start of the current scene;
- open Q&A index.
The audience view must not expose these controls unless explicitly opened.
The same semantic control actions may later be exposed to a phone or second
device. This storyboard does not choose the remote-control transport, host, or
deployment topology.
## Discussion Branches
Discussion branches are prepared scenes outside the main timer. They attach to
the main story at semantically relevant points and return to the originating
scene and beat.
Scene 3 owns the first branch group:
- **3A Direct orchestration:** dynamic adaptation versus durable reusable
procedure.
- **3B Generated scripts:** simplicity and debuggability versus managed
lifecycle records.
- **3C Hosted automation:** integrations, triggers, scheduling, and operational
maturity. A concrete future-work example may ask an agent to prepare a
recurring workflow that starts a headless coding agent with a prompt. The
exact command must be verified before presentation; scheduling remains
outside the implemented lda.chat scope.
- **3D Durable agent graphs:** overlap with LangGraph-style persistence and
human-in-the-loop execution, and the distinct artifact/deployment/source
binding emphasis in this work.
- **3E MCP and agent-facing scale:** MCP as a capability protocol rather than a
workflow lifecycle, plus progressive discovery, CLI surfaces, and Code Mode.
External measurements remain explicitly attributed: Cloudflare reports
roughly 1,000 tokens for two Code Mode tools versus 1.17 million for an
equivalent flat MCP surface, while Anthropic reports a worked example
reducing tool context from 150,000 to 2,000 tokens. These are external
examples, not lda.chat measurements:
[Cloudflare Code Mode](https://blog.cloudflare.com/code-mode-mcp/) and
[Anthropic code execution with MCP](https://www.anthropic.com/engineering/code-execution-with-mcp).
Additional branch groups may attach to architecture, evaluation, and future
work, but they must follow the same claim-class and evidence-pointer rules as
the main path.
## Q&A Index
Q&A material is not the next numbered main scene. It is a separate deep-link
index that can open focused views without replaying the main story.
Required entries:
- where the AI agent is and what is actually submitted;
- Draft versus Artifact versus Deployment versus Run;
- raw-plan import versus draft authoring;
- source-provider boundary and MCP status;
- schema validation and repair hints;
- deterministic execution and reducer-aware state;
- typed interrupt and resume contract;
- persistence and recovery boundaries;
- challenge methodology and validity limits;
- security and sandboxing non-goals;
- why not direct tool calling, generated scripts, LangGraph, Temporal, or n8n;
- live demo failure and replay provenance.
Each entry should deep-link to an existing component or evidence record. Avoid a
second, disconnected slide deck.
## Chat Component Direction
The next visual slice should copy source-owned primitives from Vercel AI
Elements rather than invent another chat UI or adopt a second agent runtime.
Useful primitives include conversation scrolling, messages, Markdown response,
prompt input, and tool-call presentation.
The copied components adapt to the existing `AgentMessagePart` and
`AgentDriver` contracts. Do not adopt `useChat`, model selection, attachments,
accounts, or a complete ChatGPT shell until a live AI SDK driver exists.
The chat remains a supporting presentation surface. It must never push the
graph, approval, or evidence below the fold.
## Content and Visual Freeze
Content freezes before visual polish:
1. approve scene order, claims, evidence pointers, and spoken intent;
2. implement the compositor states and navigation;
3. replace chat primitives and establish visual tokens;
4. tune motion and final scene styling;
5. rehearse timing and revise wording without restructuring components.
This ordering prevents the presentation from becoming visually polished while
still telling the wrong story.
## Acceptance Criteria
The storyboard implementation is acceptable when:
1. all 12 main scenes are directly addressable and navigable without page
scroll;
2. the main path fits within 12 minutes in rehearsal;
3. every factual scene has a claim class and evidence pointer;
4. external measurements are visibly attributed and never presented as
lda.chat evaluation;
5. chat, graph, approval, output, and evidence retain stable stage geography;
6. stage and chat themes can be controlled independently;
7. live failure can fall back to the matching replay event without layout
reset;
8. the full main path is readable from `960x720` through `1280x720` logical
canvases with browser zoom at 100%;
9. reduced-motion mode preserves all information and controls;
10. discussion branches and the Q&A index open focused evidence and return to
the originating scene without replaying the presentation;
11. the spoken script primarily uses personal defense voice while technical
invariants remain precise;
12. the existing `/console` product route remains independent from cinematic
presentation styling.
## Out of Scope
- a live general-purpose LLM planner;
- a second slide framework or Astro shell;
- a generic drag-and-drop presentation editor;
- redesigning the normal console in the presentation's cinematic style;
- reproducing every thesis diagram or code listing;
- presenting historical challenge waves as a controlled benchmark;
- adding claims merely because a visual component can display them.