lda.chat/lda-wf
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bb361b7f89fc19ecabc2d1bee820adc2fd8a377a
lda-wf/docs/historical/superpowers/plans/2026-07-12-scenes-7-9-editorial-focal-proof.md
T

22 KiB
Raw Blame History

Scenes 7-9 Editorial Focal Proof Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Recompose Scenes 7-9 so each beat has one dominant factual artifact on the warm Editorial Canvas, with light assistant-style chat and no dark-blue presentation panels outside actual run evidence.

Architecture: Keep the existing prepared authoring recording, projection functions, AssistantOperatorThread, and storyboard beats. This is a presentation-surface and composition pass, not a new chat runtime or a new source of facts. Each scene remains responsible for its own primary artifact while shared CSS tokens provide the editorial surface and consistent focus treatment.

Tech Stack: React 19, TypeScript, Vite, Vitest + Testing Library, existing assistant-ui-derived primitives, CSS custom properties, Playwright CLI screenshots.

Global Constraints

  • Do not add a second recording, chat store, transport, RPC call, or agent runtime.
  • Keep authoring-recording.ts as the factual source for all Scene 7-9 labels, commands, results, IDs, and phase content.
  • Keep Scene 7's operation/diagnostic evidence, Scene 8's prepared conversation, and Scene 9's lifecycle projections; improve hierarchy instead of replacing them with invented copy.
  • Use the warm Editorial Canvas for Scenes 7-9. Dark-blue surfaces are reserved for actual run evidence in Scenes 10-12.
  • Each beat must have one dominant artifact. Rails, operation labels, evidence pointers, and discussion links remain supporting surfaces.
  • Keep the existing assistant-ui-derived AssistantOperatorThread; do not install another chat library or introduce AssistantRuntimeProvider.
  • Do not combine blur with pan/zoom for core slide movement. Use opacity, position, border, or scale transitions only, respecting motionDisabled and prefers-reduced-motion.
  • Preserve 1280x720 readability and verify 1024x768 without horizontal page overflow.

Task 1: Establish The Editorial Surface Contract

Files:

  • Modify: web/apps/console/src/presentation/authoring/AgentHandoffScene.tsx
  • Modify: web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.tsx
  • Modify: web/apps/console/src/presentation/authoring/AuthoringPhaseVisual.tsx
  • Modify: web/apps/console/src/presentation/authoring/AgentHandoffScene.test.tsx
  • Modify: web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.test.tsx
  • Modify: web/apps/console/src/presentation/authoring/AuthoringPhaseVisual.test.tsx
  • Modify: web/apps/console/src/presentation/presentation.css

Interfaces:

  • Consumes: existing SceneDefinition, SceneBeatDefinition, AuthoringPhaseProjection, and AssistantOperatorThread props.

  • Produces: explicit data-presentation-surface="editorial" markers and shared light-surface CSS that later scene-specific tasks can rely on.

  • Step 1: Write failing surface-contract tests

Add assertions to the scene tests:

expect(screen.getByRole("region", { name: "prepared agent handoff" }))
  .toHaveAttribute("data-presentation-surface", "editorial");
expect(screen.getByRole("region", { name: "prepared workflow authoring lifecycle" }))
  .toHaveAttribute("data-presentation-surface", "editorial");

For AuthoringPhaseVisual.test.tsx, assert every phase visual exposes the same surface marker on its root element:

expect(screen.getByRole("region", { name: /evidence/i }))
  .toHaveAttribute("data-presentation-surface", "editorial");
  • Step 2: Run the focused tests and verify the new assertions fail

Run:

pnpm --dir web --filter @lda/console test -- src/presentation/authoring/AgentHandoffScene.test.tsx src/presentation/authoring/PreparedAuthoringLifecycleScene.test.tsx src/presentation/authoring/AuthoringPhaseVisual.test.tsx

Expected: the existing regions render, but the new data-presentation-surface assertions fail because the markers do not yet exist.

  • Step 3: Add semantic surface markers and shared tokens

Add data-presentation-surface="editorial" to the Scene 8 and Scene 9 root sections. Add the same attribute to each AuthoringPhaseVisual variant root. Do not change projection data or operation names.

In presentation.css, define the shared local tokens on the marked roots and make the root transparent to the global section card rule:

.agent-handoff-scene[data-presentation-surface="editorial"],
.prepared-lifecycle-scene[data-presentation-surface="editorial"],
.authoring-visual[data-presentation-surface="editorial"] {
  --authoring-paper: var(--color-editorial-paper, oklch(0.975 0.012 82));
  --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);
  background: var(--authoring-paper);
  color: var(--authoring-ink);
}

.presentation-stage__primary > .agent-handoff-scene,
.presentation-stage__primary > .prepared-lifecycle-scene {
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
}

Keep the root reset separate from the inner artifact borders. The purpose is to prevent the global section rule from creating another outer card.

  • Step 4: Run the focused tests and typecheck

Run:

pnpm --dir web --filter @lda/console test -- src/presentation/authoring/AgentHandoffScene.test.tsx src/presentation/authoring/PreparedAuthoringLifecycleScene.test.tsx src/presentation/authoring/AuthoringPhaseVisual.test.tsx
pnpm --dir web --filter @lda/console typecheck

Expected: all focused tests pass and the console typecheck is clean.

  • Step 5: Commit the surface contract
git add web/apps/console/src/presentation/authoring web/apps/console/src/presentation/presentation.css
git commit -m "style: establish editorial surfaces for authoring scenes"

Task 2: Recompose Scene 7 Authoring And Repair

Files:

  • Modify: web/apps/console/src/presentation/authoring/AuthoringPhaseVisual.tsx
  • Modify: web/apps/console/src/presentation/SceneBody.tsx
  • Modify: web/apps/console/src/presentation/authoring/AuthoringPhaseVisual.test.tsx
  • Modify: web/apps/console/src/presentation/SceneBody.test.tsx
  • Modify: web/apps/console/src/presentation/presentation.css

Interfaces:

  • Consumes: projectPreparedAuthoringPhase() and the existing AuthoringPhaseVisual discriminated visual variants.

  • Produces: a single large, light factual artifact per Scene 7 beat while preserving the authoring phase rail as orientation.

  • Step 1: Write failing Scene 7 hierarchy tests

Add tests that render authoring/discover, authoring/diagnose, and authoring/repair and assert the primary artifact is present and editorial:

expect(screen.getByRole("region", { name: "discovery evidence" }))
  .toHaveAttribute("data-presentation-surface", "editorial");
expect(screen.getByRole("region", { name: "validation repair evidence" }))
  .toHaveAttribute("data-presentation-surface", "editorial");
expect(screen.getByRole("region", { name: "authoring phase loop" })).toBeInTheDocument();

The test must also assert that the focused phase remains visible and that the literal operation title from the prepared recording is rendered. Do not assert implementation-only class names for the visual hierarchy.

  • Step 2: Run the Scene 7 tests and verify the new hierarchy checks fail

Run:

pnpm --dir web --filter @lda/console test -- src/presentation/authoring/AuthoringPhaseVisual.test.tsx src/presentation/SceneBody.test.tsx

Expected: the factual regions pass, while the new editorial surface or hierarchy assertions fail until the implementation is changed.

  • Step 3: Make the primary authoring artifact light and beat-led

Keep the existing visual variant markup and factual fields, but make each root carry the editorial surface marker. In presentation.css:

  • Give .scene-body__authoring-composition a light canvas and no inherited card border.
  • Make .scene-body__authoring-evidence the large primary artifact with a neutral rule, generous padding, and a compact public-operation header.
  • Make .authoring-visual fill the available composition height with a paper background and ink text.
  • Use a thin cyan or amber rule only for active/diagnostic emphasis; do not use the old dark-blue --stage-* backgrounds.
  • Keep the authoring phase loop as a shallow supporting rail. Its active item should use weight and a rule, while inactive items use opacity rather than dark cards.
  • Keep the existing Lucide icons in the visual variants and do not replace them with text-only labels.
  • Use minmax(0, 1fr) and min-height: 0 so the artifact does not overflow at 1024x768.

The intended shape is a large editorial evidence board, not a terminal card with a row of dark status cards beneath it.

  • Step 4: Add beat-state transitions without blur

Use transitions on the existing data attributes only:

.scene-body__authoring-evidence,
.scene-body__authoring-node,
.authoring-visual {
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .scene-body__authoring-evidence,
  .scene-body__authoring-node,
  .authoring-visual {
    transition: none;
  }
}

Do not add a blur filter or simultaneous pan/zoom to the same artifact.

  • Step 5: Run focused tests, typecheck, and capture Scene 7 smoke

Run:

pnpm --dir web --filter @lda/console test -- src/presentation/authoring/AuthoringPhaseVisual.test.tsx src/presentation/SceneBody.test.tsx
pnpm --dir web --filter @lda/console typecheck
playwright-cli resize 1280 720
playwright-cli goto 'http://127.0.0.1:5173/present#scene/authoring/discover'
playwright-cli screenshot --filename=web/apps/console/.visual-smoke/scene7-discover-editorial.png
playwright-cli goto 'http://127.0.0.1:5173/present#scene/authoring/diagnose'
playwright-cli screenshot --filename=web/apps/console/.visual-smoke/scene7-diagnose-editorial.png

The screenshots must show a light primary artifact, a readable phase rail, and no dark-blue authoring panel.

  • Step 6: Commit the Scene 7 pass
git add web/apps/console/src/presentation/authoring/AuthoringPhaseVisual.tsx web/apps/console/src/presentation/SceneBody.tsx web/apps/console/src/presentation/authoring/AuthoringPhaseVisual.test.tsx web/apps/console/src/presentation/SceneBody.test.tsx web/apps/console/src/presentation/presentation.css
git commit -m "style: make authoring proof editorial and focal"

Task 3: Make Scene 8 A Light, Authentic Chat Surface

Files:

  • Modify: web/apps/console/src/presentation/authoring/AgentHandoffScene.tsx
  • Modify: web/apps/console/src/presentation/authoring/AgentHandoffScene.test.tsx
  • Modify: web/apps/console/src/presentation/authoring/AuthoringConversation.test.tsx
  • Modify: web/apps/console/src/presentation/presentation.css

Interfaces:

  • Consumes: the existing prepared authoring thread and shared AssistantOperatorThread projection.

  • Produces: a full-screen chat that reads like an AI application while remaining a deterministic prepared recording.

  • Step 1: Write failing Scene 8 surface and turn tests

Add tests for the request beat:

const scene = screen.getByRole("region", { name: "prepared agent handoff" });
expect(scene).toHaveAttribute("data-presentation-surface", "editorial");
expect(screen.getByRole("log", { name: "prepared authoring conversation" }))
  .toHaveAttribute("data-surface", "stage");
expect(screen.getByText(/We need to author a report workflow/i)).toBeInTheDocument();
expect(screen.getByText(/Let me inspect the available sources/i)).toBeInTheDocument();

Keep the existing tool-group aria-expanded and prepared command assertions; the test should prove the conversation structure, not a particular color.

  • Step 2: Run the Scene 8 tests and verify the new surface assertion fails

Run:

pnpm --dir web --filter @lda/console test -- src/presentation/authoring/AgentHandoffScene.test.tsx src/presentation/authoring/AuthoringConversation.test.tsx

Expected: the conversation content passes, but the editorial surface marker or new layout contract fails before implementation.

  • Step 3: Recompose the full-screen chat on the Editorial Canvas

Keep AssistantOperatorThread as the renderer. Change only the Scene 8 shell and its styles:

  • Use a warm paper root with ink text and no outer inherited card.
  • Keep the phase rail as a quiet top orientation strip, not a dark navigation bar.
  • Constrain the thread to a readable centered column while allowing its viewport to scroll internally.
  • Render user turns as a restrained right-aligned paper/ink bubble and assistant turns as left-aligned editorial text.
  • Render tool groups as collapsed-by-default neutral disclosure rows with a subtle cyan state marker. When expanded, show the literal operation name, arguments, and result in a bordered inset; do not turn every tool into a large card.
  • Keep the Run prepared workflow action as the one clear bottom composer-like action. Do not add a fake text composer or slash command in this slice.
  • Keep the prepared/replay copy factual; do not imply hidden reasoning or a live LLM response.

Use data-surface="stage" and the existing assistant thread classes as the styling seam. Do not add a new chat primitive or runtime.

  • Step 4: Run focused tests and capture Scene 8 smoke

Run:

pnpm --dir web --filter @lda/console test -- src/presentation/authoring/AgentHandoffScene.test.tsx src/presentation/authoring/AuthoringConversation.test.tsx
pnpm --dir web --filter @lda/console typecheck
playwright-cli goto 'http://127.0.0.1:5173/present#scene/agent-handoff/request'
playwright-cli screenshot --filename=web/apps/console/.visual-smoke/scene8-request-editorial.png
playwright-cli goto 'http://127.0.0.1:5173/present#scene/agent-handoff/handoff'
playwright-cli screenshot --filename=web/apps/console/.visual-smoke/scene8-handoff-editorial.png

The screenshots must read as a normal chat screen on a warm canvas, with visible turn separation and tool groups, not as two screenshots or a dark dashboard.

  • Step 5: Commit the Scene 8 pass
git add web/apps/console/src/presentation/authoring/AgentHandoffScene.tsx web/apps/console/src/presentation/authoring/AgentHandoffScene.test.tsx web/apps/console/src/presentation/authoring/AuthoringConversation.test.tsx web/apps/console/src/presentation/presentation.css
git commit -m "style: make agent handoff read as editorial chat"

Task 4: Make Scene 9 Lifecycle Primary And Chat Secondary

Files:

  • Modify: web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.tsx
  • Modify: web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.test.tsx
  • Modify: web/apps/console/src/presentation/authoring/AuthoringConversation.test.tsx
  • Modify: web/apps/console/src/presentation/presentation.css

Interfaces:

  • Consumes: the same AuthoringPhaseVisual projections and AuthoringConversation phase filtering as Scene 8.

  • Produces: a light lifecycle canvas with one large phase artifact and a synchronized, secondary chat dock.

  • Step 1: Write failing Scene 9 hierarchy tests

For validate and artifact, assert:

const scene = screen.getByRole("region", { name: "prepared workflow authoring lifecycle" });
expect(scene).toHaveAttribute("data-presentation-surface", "editorial");
expect(screen.getByRole("region", { name: /validation repair evidence|artifact evidence/i }))
  .toHaveAttribute("data-presentation-surface", "editorial");
expect(screen.getByRole("log", { name: "prepared authoring conversation" }))
  .toHaveAttribute("data-surface", "dock");

Also assert that the active phase is represented by one active rail item and that completed tool groups remain collapsed receipts rather than duplicate full transcripts.

  • Step 2: Run the Scene 9 tests and verify the new hierarchy checks fail

Run:

pnpm --dir web --filter @lda/console test -- src/presentation/authoring/PreparedAuthoringLifecycleScene.test.tsx src/presentation/authoring/AuthoringConversation.test.tsx

Expected: the existing lifecycle and dock content renders, but the editorial surface assertions fail before implementation.

  • Step 3: Rebalance the lifecycle canvas and dock

Keep the five phase rail items and existing projections. In presentation.css:

  • Give .prepared-lifecycle-scene a warm paper background and neutral rule.
  • Make .prepared-lifecycle-scene__projection the dominant region with minmax(0, 1fr) sizing and enough height for the current visual variant.
  • Keep .prepared-lifecycle-scene__dock secondary at roughly 25-30% of the scene height. It may scroll internally, but must not create page overflow.
  • Use a thin separator between canvas and dock rather than nested dark cards.
  • Give the active phase a black/ink label with a cyan rule; give inactive phases muted text and no filled blue card.
  • Ensure the dock uses the same editorial chat styling as Scene 8, but retain its compact data-surface="dock" mode and active tool group.

Do not add another trace panel, lifecycle store, or modal.

  • Step 4: Run focused tests and capture Scene 9 smoke

Run:

pnpm --dir web --filter @lda/console test -- src/presentation/authoring/PreparedAuthoringLifecycleScene.test.tsx src/presentation/authoring/AuthoringConversation.test.tsx
pnpm --dir web --filter @lda/console typecheck
playwright-cli goto 'http://127.0.0.1:5173/present#scene/prepared-lifecycle/validate'
playwright-cli screenshot --filename=web/apps/console/.visual-smoke/scene9-validate-editorial.png
playwright-cli goto 'http://127.0.0.1:5173/present#scene/prepared-lifecycle/deployment'
playwright-cli screenshot --filename=web/apps/console/.visual-smoke/scene9-deployment-editorial.png
playwright-cli resize 1024 768
playwright-cli goto 'http://127.0.0.1:5173/present#scene/prepared-lifecycle/validate'
playwright-cli screenshot --filename=web/apps/console/.visual-smoke/scene9-validate-4x3.png

The screenshots must keep the phase artifact dominant, keep the dock readable, and show no horizontal overflow or dark-blue authoring panel.

  • Step 5: Commit the Scene 9 pass
git add web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.tsx web/apps/console/src/presentation/authoring/PreparedAuthoringLifecycleScene.test.tsx web/apps/console/src/presentation/authoring/AuthoringConversation.test.tsx web/apps/console/src/presentation/presentation.css
git commit -m "style: make lifecycle proof primary"

Task 5: Full Smoke, Documentation, And Review

Files:

  • Modify: docs/current_roadmap.md
  • Move: docs/superpowers/plans/2026-07-12-scenes-7-9-editorial-focal-proof.md to docs/historical/superpowers/plans/2026-07-12-scenes-7-9-editorial-focal-proof.md

Interfaces:

  • Consumes: the three scene-specific visual contracts and their focused tests.

  • Produces: a verified, archived visual pass with the next roadmap target left explicit.

  • Step 1: Run the complete web verification gate

Run:

pnpm --dir web test
pnpm --dir web typecheck
pnpm --dir web build
git diff --check

Expected: all workspaces pass. The known Vite chunk-size warning may remain.

  • Step 2: Run an Impeccable detector pass on the three scene routes

Run:

npx -y impeccable detect --json --gpt --gemini http://127.0.0.1:5173/present#scene/authoring/diagnose
npx -y impeccable detect --json --gpt --gemini http://127.0.0.1:5173/present#scene/agent-handoff/request
npx -y impeccable detect --json --gpt --gemini http://127.0.0.1:5173/present#scene/prepared-lifecycle/validate

The pass must not introduce new gpt-thin-border-wide-shadow, side-stripe, or all-caps body-text findings. Existing warnings outside the Scenes 7-9 selectors are not part of this slice.

  • Step 3: Update the roadmap and archive the plan

Replace roadmap item 9 with:

9. Completed: Scenes 7-9 now use one dominant factual artifact per beat on the
   Editorial Canvas: authoring/repair evidence, an authentic light agent chat,
   and a light prepared lifecycle canvas with synchronized secondary chat.
   Implementation:
   [`Scenes 7-9 editorial focal proof`](historical/superpowers/plans/2026-07-12-scenes-7-9-editorial-focal-proof.md).
10. Next: revise the remaining visual outliers only when a screenshot identifies
    a concrete hierarchy, overflow, or factual-readability problem.

Move this plan to docs/historical/superpowers/plans/ and tick every completed checkbox before committing.

  • Step 4: Request review and commit completion

Run the repository review workflow, then commit the roadmap and archive move:

git add docs/current_roadmap.md docs/historical/superpowers/plans/2026-07-12-scenes-7-9-editorial-focal-proof.md
git add -u docs/superpowers/plans
git commit -m "docs: complete Scenes 7-9 editorial focal proof"
git status --short

Expected: the working tree is clean and the final review has no Critical or Important findings.

Self-Review

  • Spec coverage: Task 1 prevents the global section card rule from producing duplicate frames; Tasks 2-4 make each scene's primary artifact editorial and beat-led; Task 5 verifies routes, sizes, detector output, and documentation.
  • Placeholder scan: no unresolved instructions, fake data source, or undefined visual behavior remains in the plan.
  • Type consistency: all tasks preserve AuthoringPhaseProjection, AuthoringConversation, AssistantOperatorThread, and existing storyboard beat IDs; no new runtime interface is introduced.
  • Scope: this plan changes presentation composition and CSS only. It does not add live LLM calls, a new chat framework, a new transport, or a second recording.
Reference in New Issue View Git Blame Copy Permalink