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

docs: complete Scenes 7-9 editorial focal proof

Browse Source
This commit is contained in:
lda
2026-07-12 02:25:33 +07:00 Verified
parent 1e9e8af228
commit ab9afa6457
4 changed files with 514 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/historical/superpowers/plans/2026-07-12-scenes-7-9-editorial-focal-proof.md
+490
View File
@@ -0,0 +1,490 @@
# 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.
- [x] **Step 1: Write failing surface-contract tests**
Add assertions to the scene tests:
```tsx
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:
```tsx
expect(screen.getByRole("region", { name: /evidence/i }))
.toHaveAttribute("data-presentation-surface", "editorial");
```
- [x] **Step 2: Run the focused tests and verify the new assertions fail**
Run:
```powershell
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.
- [x] **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:
```css
.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.
- [x] **Step 4: Run the focused tests and typecheck**
Run:
```powershell
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.
- [x] **Step 5: Commit the surface contract**
```powershell
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.
- [x] **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:
```tsx
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.
- [x] **Step 2: Run the Scene 7 tests and verify the new hierarchy checks fail**
Run:
```powershell
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.
- [x] **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.
- [x] **Step 4: Add beat-state transitions without blur**
Use transitions on the existing data attributes only:
```css
.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.
- [x] **Step 5: Run focused tests, typecheck, and capture Scene 7 smoke**
Run:
```powershell
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.
- [x] **Step 6: Commit the Scene 7 pass**
```powershell
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.
- [x] **Step 1: Write failing Scene 8 surface and turn tests**
Add tests for the request beat:
```tsx
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.
- [x] **Step 2: Run the Scene 8 tests and verify the new surface assertion fails**
Run:
```powershell
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.
- [x] **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.
- [x] **Step 4: Run focused tests and capture Scene 8 smoke**
Run:
```powershell
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.
- [x] **Step 5: Commit the Scene 8 pass**
```powershell
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.
- [x] **Step 1: Write failing Scene 9 hierarchy tests**
For `validate` and `artifact`, assert:
```tsx
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.
- [x] **Step 2: Run the Scene 9 tests and verify the new hierarchy checks fail**
Run:
```powershell
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.
- [x] **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.
- [x] **Step 4: Run focused tests and capture Scene 9 smoke**
Run:
```powershell
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.
- [x] **Step 5: Commit the Scene 9 pass**
```powershell
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.
- [x] **Step 1: Run the complete web verification gate**
Run:
```powershell
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.
- [x] **Step 2: Run an Impeccable detector pass on the three scene routes**
Run:
```powershell
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.
- [x] **Step 3: Update the roadmap and archive the plan**
Replace roadmap item 9 with:
```markdown
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.
- [x] **Step 4: Request review and commit completion**
Run the repository review workflow, then commit the roadmap and archive move:
```powershell
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.