@conduction/docusaurus-preset 3.33.0 → 3.35.0

package/ANIMATION_ROADMAP.md

@@ -0,0 +1,129 @@
+# Animation roadmap — wave 6 (planned, not yet implemented)
+
+Waves 1–5 of the animated-atomics programme are shipped (see
+`MISSING_COMPONENTS.md` for the per-component coverage). This file
+holds the designs for the two remaining L-size items from the
+animation audit, plus the small registry debts the audit surfaced.
+Nothing in this file is implemented; it is the working spec for the
+next animation PR.
+
+Rules carried over from the shipped waves, binding for wave 6 too:
+
+- Tokens only; no images, no hardcoded colours.
+- One KNVB-orange accent per component, maximum.
+- Every loop is seamless (opacity-swap resets, no visible rewind).
+- `running={false}` and `prefers-reduced-motion` render the
+  meaningful end state, not a blank.
+- Timelines ride the `--am-dur`-style custom-property convention so
+  a consumer can retune duration without touching keyframes.
+
+## 1 · Pipeline — the document travels the flow (L)
+
+**Component:** `src/components/Pipeline/Pipeline.jsx` +
+`Pipeline.module.css` (React, in the preset).
+
+**Audit finding on the claimed dotted-line animation — VERIFIED, it
+exists.** `Pipeline.module.css` draws the full-width dotted flow line
+as `.steps::before` (a `repeating-linear-gradient` dash pattern) and
+animates it with `flow-shift` (0.9s linear infinite,
+`background-position 0 → 10px`, lines 39–67). The stacked mobile
+layout (`max-width: 1100px`) switches to a vertical line with its own
+`flow-shift-vert` twin, and `prefers-reduced-motion: reduce` disables
+both. So the base "the line flows" motion is real and shipping; what
+wave 6 adds is the *payload* making the journey, not the line itself.
+
+**Design — a document hex rides the line:**
+
+- A small terracotta document hex (pointy-top, ~10×11, the same
+  vocabulary as the AppMock `.doc` atoms) spawns at the left end-box
+  (the `IconList` "Sources" column), travels the dotted line
+  left-to-right, and pauses ~400ms at each step hex's equator.
+- At each pause the step hex answers: a 1.06 scale pulse plus a brief
+  ring in the step's own family colour (mint for the OpenConnector
+  step, workspace-blue for the platform hex, terracotta for
+  OpenCatalogi — never a new orange). The pill inside the hex, when
+  present, bumps with it.
+- Past the last step the document fades into the right end-box
+  ("Consumers"), whose list items tick top-to-bottom with a 120ms
+  stagger (each item's icon tile flashes its border cobalt→mint→rest)
+  — the "everyone downstream can see it now" beat.
+- Loop length: `--pl-dur`, default 9s. The traveller is hidden at
+  0%/100% (opacity swap), so the loop is seamless; the dotted line's
+  independent 0.9s `flow-shift` keeps running underneath and needs no
+  synchronisation.
+- The vertical (stacked) layout re-routes the traveller top-to-bottom
+  along the vertical line; same beats.
+- Static / reduced-motion: the traveller is hidden, every step hex at
+  rest, the consumer list fully ticked — the delivered end state.
+  (`flow-shift` is already disabled by the existing media query.)
+- Implementation note: the traveller must be a sibling of `.steps`
+  positioned against the same `top: 85px` midline calc the line uses;
+  the hexes' `z-index: 1` will occlude it while it passes "through"
+  a hex, which is exactly the right reading.
+
+## 2 · PlatformDiagram — the platform assembles (L, cross-repo)
+
+**Component:** the preset's `PlatformDiagram/PlatformDiagram.jsx` is
+a typed wrapper around the bespoke `<platform-diagram>` web component
+that lives **in the design-system repo, not the preset**:
+`preview/components/_lib/platform-diagram.js` +
+`platform-diagram.css`. The animation therefore lands cross-repo: the
+keyframes and progress logic go into `_lib/platform-diagram.{js,css}`
+(runtime CSS is injected by the web component), while the preset
+wrapper only grows a `running` prop it forwards as an attribute.
+
+**Today:** the component already reveals on scroll via the
+`--pd-list-progress` / `--pd-hex-progress` custom properties — a
+one-shot entrance, not a loop.
+
+**Design — assembly loop:**
+
+- Beat 1, the workspace: the centre workspace slab draws in (scaleY
+  from the baseline) and its topbar dots pop left-to-right.
+- Beat 2, the corner hexes: the four app hexes fly in from their
+  compass corners (translate + fade, 90ms stagger), each with a
+  1.05 settle-bounce as it docks.
+- Beat 3, the flows: the connecting flow lines draw (stroke-dash
+  reveal) from workspace to each hex in the same order the hexes
+  landed.
+- Beat 4, the lists: each side list's rows land with the shipped
+  `.sbLive`-style stagger; the workspace pill flashes mint once when
+  the last row is in — "the platform is complete".
+- Hold ~2.5s assembled, then a soft opacity-cascade reset (the shipped
+  waves' convention; no rewind).
+- Loop length: `--pd-dur`, default 12s. When a `running="false"`
+  attribute (or `prefers-reduced-motion`) is set, the diagram renders
+  fully assembled — identical to today's post-scroll-reveal state, so
+  the existing scroll-progress path can stay as the reduced-motion
+  fallback.
+- Cross-repo sequencing: land the web-component change in
+  `preview/components/_lib/` first (the kit page
+  `preview/components/platform-overview.html` is the specimen), then
+  bump the copy the preset consumes, then add the wrapper prop +
+  render test in the preset. Two PRs, one per repo.
+
+## 3 · Pointer — flow-canvas run animation (spec lives elsewhere)
+
+The FlowMock atomic (shipped, wave 3) is the marketing abstraction of
+the flow editor. The *product* counterpart — the run-line animation on
+the real flow canvas — is specified in the **nextcloud-vue** repo
+(spec merged; `CnFlowCanvas` run-animation spec). Do not re-specify it
+here: when that lands, FlowMock should stay visually consistent with
+it (mint run-line, ~600ms approval hold, single orange halo at the
+approval node), but the preset carries no implementation work for it.
+
+## 4 · SidebarMock icon-registry stand-ins (S, debt)
+
+The audit flagged two tab icons that ship as stand-ins because the
+`IntegrationIcon` registry has no dedicated glyph:
+
+- `docudesk-signatures` — the Signatures tab renders the **mail**
+  icon. Needs a signature glyph (pen-stroke over a baseline, in the
+  registry's stroke style).
+- `docudesk-pii-map` — the PII-map tab renders the **keycloak** icon.
+  Needs a PII/redaction glyph (masked-text bar or eye-off).
+
+Add both to `IntegrationIcon/registry.js`, switch the two tab
+definitions in `SidebarMock.jsx`, and extend the SidebarMock render
+test to pin the new names. Until then the stand-ins are acceptable at
+mock abstraction level but must not leak into product UI.

package/MISSING_COMPONENTS.md

@@ -56,12 +56,15 @@ Most consume one or more primitives.
 - **GameModal** — `GameModal/GameModal.jsx`. End-of-game dialog with cross-game progress tracking. Subscribes to `connext:gameend` events.
 - **CookieCli** — `CookieCli/CookieCli.jsx`. Terminal-styled cookie consent banner with localStorage persistence.
 - **ComposeBlock** — `ComposeBlock/ComposeBlock.jsx`. Branded code block (cobalt-900 + Plex Mono + filename pill + copy button). For docker-compose, bash recipes, and any verbatim copy-paste content. Used on `/demo`.
-- **AgentTrace** — `AgentTrace/AgentTrace.jsx`. Terminal-styled agent execution trace with cursor + mode chrome. Specimen: `preview/components/agent-trace.html`.
-- **AppMock** — `AppMock/AppMock.jsx`. Selector that renders one of 16 app-specific UI mockups (DeciDesk, DocuDesk, LarpingApp, LaunchPad + variants, NLDesign, OpenCatalogi, OpenConnector, OpenRegister, OpenWoo, PipelinQ, Procest, SoftwareCatalog, ZaakAfhandelApp). Each variant lives under `AppMock/variants/`. Specimen: `preview/components/app-mock.html`.
-- **FlowMock** — `FlowMock/FlowMock.jsx`. Token-painted abstract of the flow editor: node cards on a dotted canvas with coloured left bars (mint trigger, lavender steps, vermillion end), curved grey edges with pill labels, and a mint run-line looping trigger → step → approval → end. Freezes to the full static route under `prefers-reduced-motion` or `running={false}`. Specimen: `preview/components/flow-mock.html`.
-- **LeafMock** — `LeafMock/LeafMock.jsx`. Small integration-leaf panels for Showcase items: `leaf="contacts"` (hex-avatar rows + mint sync arrow to a phone), `"calendar"` (mini month grid + linked-event chip), `"mail"` (message list + mint create-from-email chip), `"files"` (folder/file rows + forest link-to-record chip).
+- **AgentTrace** — `AgentTrace/AgentTrace.jsx`. Terminal-styled agent execution trace with cursor + mode chrome. Types itself out on a loop: lines reveal left-to-right on a 550ms stagger, status dots start after their line, ~2s hold, soft cascade restart; `running={false}` / `prefers-reduced-motion` show the full trace at rest. Specimen: `preview/components/agent-trace.html`.
+- **AppMock** — `AppMock/AppMock.jsx`. Selector that renders one of 24 app-specific UI mockups (DeciDesk, DocuDesk, LarpingApp, LaunchPad + variants, NLDesign, PipelinQ, Portaliq, Procest, Scholiq, SoftwareCatalog, ZaakAfhandelApp, …; `openwoo` aliases to the OpenCatalogi mock). Each variant lives under `AppMock/variants/`. As of the wave-2/4 animation pass every product variant loops a one-scene story on the shared `--am-dur` timeline: portaliq form-submit, nldesign retheme, scholiq progress+credential, launchpad widgets/tiles/BI, pipelinq deal-close (wave 1+3); docudesk PII words blacking out + live dropzone, shillinq bank-line reconciliation, doriath unlock → countdown → relock, opencatalogi federated-search filter, openconnector record-travel + run insert, procest stage advance + row re-sort, openregister object landing + rail repaint (wave 2); decidesk vote tally + pending→adopted flip, hrmq timesheet submit→approve→payroll (content reworked from the earlier people-list, which misrepresented the app), larpingapp XP ripple, softwarecatalog CVE scan sweep, zaakafhandelapp submission travel, hermiq conversation + tool chips + approval tick (inline styles moved to the module), openbuild template→app ghost travel (wave 4). `running={false}` / `prefers-reduced-motion` freeze every loop to its meaningful end state. Specimen: `preview/components/app-mock.html`.
+- **WidgetMock** — `WidgetMock/WidgetMock.jsx`. Standalone abstract of one Nextcloud dashboard widget (14 kinds: nine Conduction + five stock-Nextcloud framing widgets). The ten list-shaped kinds share a single wave-5 refresh primitive (`.wmLive` in AppMock.module.css): a fresh row slides in at the top, the bottom row clips out, and the frame's unread badge bumps — transform/opacity only, so tile height never jumps. `docudesk-anonymise` instead runs the `.zoneLive` dropzone loop (marching-ants dashes, a file hex drops, mint confirm flash). `running={false}` / `prefers-reduced-motion` freeze to the resting tile. Specimen: `preview/components/widget-mock.html`.
+- **SidebarMock** — `SidebarMock/SidebarMock.jsx`. Token-painted Nextcloud right-side detail panel, one registered tab active (9 kinds across Procest, DocuDesk, OpenRegister, OpenCatalogi, OpenConnector, DeciDesk, stock activity). Standalone card or `embedded` into an AppMock's `.detail` slot. Wave-5 loop (`.sbLive`): the panel slides in from the right, the head wipes, the active-tab underline travels in from the neighbouring tab (positioned by `--sb-ix`/`--sb-n` custom properties set from the variant's active index), and the body rows land on a stagger. `running={false}` / `prefers-reduced-motion` freeze to the opened panel. Known stand-ins in the tab icon registry: Signatures tabs borrow the `mail` icon, PII-map tabs borrow `keycloak` (see `ANIMATION_ROADMAP.md`). Specimen: `preview/components/sidebar-mock.html`.
+- **FlowMock** — `FlowMock/FlowMock.jsx`. Token-painted abstract of the flow editor: node cards on a dotted canvas with coloured left bars (mint trigger, lavender steps, vermillion end), curved grey edges with pill labels, and a mint run-line looping trigger → step → approval → end. The run holds ~600ms at the approval node while an orange halo flashes there (the component's one orange). Freezes to the full static route under `prefers-reduced-motion` or `running={false}`. Specimen: `preview/components/flow-mock.html`.
+- **LeafMock** — `LeafMock/LeafMock.jsx`. Small integration-leaf panels for Showcase items: `leaf="contacts"` (hex-avatar rows + mint sync arrow to a phone), `"calendar"` (mini month grid + linked-event chip), `"mail"` (message list + mint create-from-email chip), `"files"` (folder/file rows + forest link-to-record chip). Each leaf animates on the shared 6s `--lm-dur` loop (sync pulse + phone rows; day pop + chip slide; row highlight + chip pop; row + link-icon draw); `running={false}` / `prefers-reduced-motion` freeze to the end state.
 - **BuildMock** — `BuildMock/BuildMock.jsx`. Looping "make it yours" animation: the orange OpenBuild edit FAB is pressed, a component palette opens, and a widget is dragged into the page layout where it snaps in (~8s loop). `prefers-reduced-motion` / `running={false}` renders the static end state (component placed).
 - **KanbanMock** — `KanbanMock/KanbanMock.jsx`. Looping kanban drag for the pipelinq hero: a cursor lifts the top lead card, drags it to the next column, drops it flush into the column's card slot, and at the drop the column counts nudge (3→2, 2→3) and the per-lane € KPI tiles above the board shift the moved deal's value (~7s loop, clean reset). `prefers-reduced-motion` / `running={false}` renders the static board with the initial counts and totals.
+- **MockScene** — `MockScene/MockScene.jsx`. Free-form positioning stage for overlap shots of WidgetMocks + SidebarMocks (caller supplies canvas size and per-item x/y/z). The scene assembles on a loop: items land on a 220ms stagger, transform-only so the inline left/top positioning is never fought; `running={false}` / `prefers-reduced-motion` show the assembled scene.
 - **ExternalAppShelf** — `ExternalAppShelf/ExternalAppShelf.jsx`. Third-party-app shelf (Outlook-style, Mattermost, Keycloak, etc.) used on `/connext`. Specimen: `preview/components/external-app-shelf.html`.
 - **WidgetShelf** — `WidgetShelf/WidgetShelf.jsx`. Widget showcase with eyebrow + title + lede. Default is a slow single-row carousel (seamless duplicated track, pause on hover/focus, static wrapping grid under `prefers-reduced-motion`); loop duration derives from the widget count (6s per card, min 30s; `speed` overrides), with pause/play + prev/next controls (cobalt ghost, hidden under reduced motion). Widgets without an explicit `panel` get a deterministic auto-generated mini panel (KPI tile / bar chart / list rows / donut, hashed from the title). `carousel={false}` renders the N-column grid. Specimen: `preview/components/widget-shelf.html`.
 - **Showcase** — `Showcase/Showcase.jsx`. Multi-item collapsible showcase with screenshot + body. Used on `/commonground` for the "5-lagen model". Specimen: `preview/components/showcase.html`.
@@ -158,4 +161,11 @@ plus the new `IntegrationsBlock`); the locale-switcher integration on
 the `PartnerDirectory solutions` field (consumed in the offering facet);
 the `PartnerCard logoAlt` prop (accepted, with `name + ' logo'` fallback).
 
-No open gaps as of 2026-05-19.
+No open component gaps as of 2026-05-19.
+
+Animation coverage (2026-08-19): waves 1–5 of the animated-atomics
+programme shipped — every AppMock product variant, the WidgetMock
+list-refresh + dropzone primitives, and the SidebarMock open loop.
+The two remaining L-size items (Pipeline document-travels-the-flow,
+PlatformDiagram assembly) and the SidebarMock icon-registry stand-ins
+are specified in [`ANIMATION_ROADMAP.md`](ANIMATION_ROADMAP.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.33.0",
+  "version": "3.35.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js",
     "test": "node --test"
@@ -34,7 +34,8 @@
     "static/",
     "bin/",
     "README.md",
-    "MISSING_COMPONENTS.md"
+    "MISSING_COMPONENTS.md",
+    "ANIMATION_ROADMAP.md"
   ],
   "keywords": [
     "conduction",

package/src/components/AgentTrace/AgentTrace.jsx

@@ -47,6 +47,14 @@
  *     - kind 'status'       → KNVB-orange "ing…" status line
  *   - cursor:    boolean — render a blinking cursor at the bottom
  *   - mode:      string — bottom strip caption ("accept edits on…")
+ *   - running:   boolean (default true) — the trace types itself out:
+ *     each line reveals left-to-right on a 550ms stagger (a per-line
+ *     --at-d delay; the loop period --at-total derives from the line
+ *     count plus a ~2s hold), status-line dots start ticking only
+ *     after their line has appeared, and the loop restarts softly by
+ *     fading lines out in the same order they arrived. `running={false}`
+ *     and prefers-reduced-motion show the full trace at rest (every
+ *     line visible — the meaningful end state).
  */
 
 import React from 'react';
@@ -62,12 +70,25 @@ function bulletClass(b) {
   }
 }
 
-export default function AgentTrace({lines = [], cursor = false, mode, className}) {
+export default function AgentTrace({lines = [], cursor = false, mode, running = true, className}) {
+  /* Typed-reveal timing: line i appears at i × 550ms; after the last
+     line a ~2s hold, then a 600ms fade window before the loop. The
+     CSS animation reads both custom properties. */
+  const STEP = 550;
+  const total = lines.length * STEP + 2600;
+  const delayOf = (i) => ({'--at-d': `${i * STEP}ms`});
   return (
-    <div className={[styles.trace, className].filter(Boolean).join(' ')} role="img" aria-label="Agent trace">
-      <div className={styles.body}>
+    <div
+      className={[styles.trace, !running && styles.static, className].filter(Boolean).join(' ')}
+      role="img"
+      aria-label="Agent trace"
+    >
+      <div className={styles.body} style={{'--at-total': `${total}ms`}}>
         {lines.map((ln, i) => {
-          const indent = ln.indent ? {paddingLeft: `${ln.indent * 18}px`} : undefined;
+          const indent = {
+            ...(ln.indent ? {paddingLeft: `${ln.indent * 18}px`} : null),
+            ...delayOf(i),
+          };
           if (ln.kind === 'expand') {
             return (
               <div key={i} className={[styles.line, styles.expand].join(' ')} style={indent}>
@@ -111,7 +132,7 @@ export default function AgentTrace({lines = [], cursor = false, mode, className}
           );
         })}
         {cursor && (
-          <div className={[styles.line, styles.cursorLine].join(' ')}>
+          <div className={[styles.line, styles.cursorLine].join(' ')} style={delayOf(lines.length)}>
             <span className={styles.prompt}>&gt;</span>
             <span className={styles.cursor} aria-hidden="true"></span>
           </div>

package/src/components/AgentTrace/AgentTrace.module.css

@@ -1,6 +1,17 @@
 /**
  * <AgentTrace /> styles. Cobalt-900 terminal panel with monospace
  * lines and Claude-CLI-style coloured bullets.
+ *
+ * Typed reveal: every .line runs one shared looping animation whose
+ * period is --at-total (set inline by the component from the line
+ * count) and whose start is staggered by the per-line --at-d delay
+ * (i × 550ms, also inline). A line clips open left-to-right over the
+ * first ~4% of the period, holds, and fades near the end — with the
+ * stagger, lines type in and later fade out in arrival order, so the
+ * restart is a soft cascade rather than a hard cut. Status dots and
+ * the prompt cursor inherit the same delay so they only start after
+ * their line exists. `.static` (running={false}) and
+ * prefers-reduced-motion show every line at rest.
  */
 
 .trace {
@@ -29,6 +40,14 @@
   align-items: flex-start;
   gap: var(--space-2);
   font-feature-settings: "calt" 0;
+  animation: atType var(--at-total, 6s) linear var(--at-d, 0ms) infinite both;
+}
+
+@keyframes atType {
+  0%        { opacity: 0; clip-path: inset(0 100% 0 0); }
+  4%        { opacity: 1; clip-path: inset(0 0 0 0); }
+  90%       { opacity: 1; clip-path: inset(0 0 0 0); }
+  96%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
 }
 
 /* Bullets — set inline-block so the gap works the same across kinds. */
@@ -56,7 +75,9 @@
 .dots {
   display: inline-block;
   margin-left: 2px;
-  animation: dots 1400ms steps(4, end) infinite;
+  /* Inherits the line's --at-d so the dots only start ticking after
+     their line has typed in; backwards-fill hides them until then. */
+  animation: dots 1400ms steps(4, end) var(--at-d, 0ms) infinite backwards;
   white-space: pre;
   overflow: hidden;
   vertical-align: bottom;
@@ -94,7 +115,8 @@
   height: 14px;
   background: white;
   vertical-align: -2px;
-  animation: blink 1100ms steps(2, end) infinite;
+  /* Same delay-inheritance as .dots: blinking starts with its line. */
+  animation: blink 1100ms steps(2, end) var(--at-d, 0ms) infinite backwards;
 }
 @keyframes blink {
   0%, 50%   { opacity: 1; }
@@ -113,3 +135,20 @@
 }
 .modeArrow { color: var(--c-cobalt-300); }
 .modeText  { color: var(--c-cobalt-200); }
+
+/* ---- Static trace (running={false} and reduced motion) ----
+   Every line visible at rest, dots at full width, cursor solid. */
+
+.static .line,
+.static .dots,
+.static .cursor {
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .line,
+  .dots,
+  .cursor {
+    animation: none;
+  }
+}

package/src/components/AgentTrace/__tests__/AgentTrace.render.test.js

@@ -0,0 +1,108 @@
+/**
+ * AgentTrace.render.test.js — SSR-renders the real <AgentTrace> and
+ * asserts the typed-reveal wiring: per-line --at-d delays on the
+ * 550ms stagger, the loop period --at-total derived from the line
+ * count, the cursor delayed until after the last line, and the
+ * `running` prop's static class. Same esbuild harness as
+ * KanbanMock.render.test.js; CSS modules stubbed to identity.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'AgentTrace.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-agent-trace-test');
+
+const LINES = [
+  {kind: 'note', bullet: 'done', text: 'Found the root cause.'},
+  {kind: 'tool', text: 'openconnector - run_pipeline (MCP)'},
+  {kind: 'expand', text: '+38 lines (ctrl+o to expand)'},
+  {kind: 'continuation', text: 'register_slug: "zaak", limit: 50'},
+  {kind: 'status', text: 'Synthesising…'},
+];
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let AgentTrace;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  AgentTrace = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(AgentTrace, props));
+}
+
+test('SSR smoke: renders every line kind', () => {
+  const html = render({lines: LINES, cursor: true, mode: 'accept edits on'});
+  for (const cls of ['note', 'tool', 'expand', 'continuation', 'status', 'cursorLine', 'modeBar']) {
+    assert.match(html, new RegExp(`class="[^"]*\\b${cls}\\b`), `missing ${cls}`);
+  }
+});
+
+test('typed reveal: each line carries its --at-d delay on the 550ms stagger', () => {
+  const html = render({lines: LINES});
+  for (let i = 0; i < LINES.length; i++) {
+    assert.match(html, new RegExp(`--at-d:${i * 550}ms`), `line ${i}: missing delay`);
+  }
+});
+
+test('typed reveal: the loop period --at-total derives from the line count (+ hold)', () => {
+  const html = render({lines: LINES});
+  assert.match(html, new RegExp(`--at-total:${LINES.length * 550 + 2600}ms`));
+});
+
+test('cursor: delayed until after the last line', () => {
+  const html = render({lines: LINES, cursor: true});
+  assert.match(html, new RegExp(`--at-d:${LINES.length * 550}ms`));
+});
+
+test('indented lines keep their padding alongside the delay', () => {
+  const html = render({lines: [{kind: 'note', text: 'x', indent: 2}]});
+  assert.match(html, /padding-left:36px/);
+  assert.match(html, /--at-d:0ms/);
+});
+
+test('P0 plumbing: running={false} adds the static class to the trace root; default omits it', () => {
+  assert.match(render({lines: LINES, running: false}), /class="trace static"/);
+  assert.doesNotMatch(render({lines: LINES}), /\bstatic\b/);
+});

package/src/components/AppMock/AppMock.jsx

@@ -22,6 +22,12 @@
  * Props:
  *   - app:     keyof VARIANTS                           (required)
  *   - size:    'sm' | 'md' (default)                    — frame width
+ *   - running: boolean (default true) — false freezes every variant
+ *              animation to its meaningful static end state (the same
+ *              rendering `prefers-reduced-motion: reduce` gives).
+ *              Forwarded to the variant component as well, for variants
+ *              that need JS-side awareness; the CSS `.static` class on
+ *              the frame is what actually stops the keyframes.
  *   - sidebar: ReactNode                                — renders inside
  *              the right-edge overlay of the frame. Pass a SidebarMock
  *              JSX to model a Nextcloud sidebar opened over this app
@@ -47,7 +53,6 @@ import DeciDeskMock from './variants/DeciDeskMock.jsx';
 import DocuDeskMock from './variants/DocuDeskMock.jsx';
 import LarpingAppMock from './variants/LarpingAppMock.jsx';
 import NLDesignMock from './variants/NLDesignMock.jsx';
-import OpenWooMock from './variants/OpenWooMock.jsx';
 import PipelinQMock from './variants/PipelinQMock.jsx';
 import SoftwareCatalogMock from './variants/SoftwareCatalogMock.jsx';
 import ZaakAfhandelAppMock from './variants/ZaakAfhandelAppMock.jsx';
@@ -74,7 +79,11 @@ const VARIANTS = {
   docudesk:         {Component: DocuDeskMock,         label: 'DocuDesk'},
   larpingapp:       {Component: LarpingAppMock,       label: 'LarpingApp'},
   nldesign:         {Component: NLDesignMock,         label: 'NLDesign'},
-  openwoo:          {Component: OpenWooMock,          label: 'OpenWoo'},
+  /* `openwoo` is an alias: the OpenWoo app is retired in favour of
+     OpenCatalogi, so the slug renders the OpenCatalogi mock. The
+     OpenWooMock.jsx variant file is kept for now (no importer left);
+     delete it in a later cleanup wave. */
+  openwoo:          {Component: OpenCatalogiMock,     label: 'OpenCatalogi'},
   pipelinq:         {Component: PipelinQMock,         label: 'PipelinQ'},
   softwarecatalog:  {Component: SoftwareCatalogMock,  label: 'SoftwareCatalog'},
   zaakafhandelapp:  {Component: ZaakAfhandelAppMock,  label: 'ZaakAfhandelApp'},
@@ -88,7 +97,7 @@ const VARIANTS = {
   'app-versions':   {Component: AppVersionsMock,      label: 'App Versions'},
 };
 
-export default function AppMock({app, size = 'md', sidebar = null, caption = false, className}) {
+export default function AppMock({app, size = 'md', sidebar = null, caption = false, running = true, className}) {
   const variant = VARIANTS[app];
   if (!variant) {
     return (
@@ -113,8 +122,8 @@ export default function AppMock({app, size = 'md', sidebar = null, caption = fal
   return (
     <div className={styles.am}>
       <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
-        <div className={[styles.frame, styles[`size-${size}`]].filter(Boolean).join(' ')}>
-          <Component sidebar={renderedSidebar} />
+        <div className={[styles.frame, styles[`size-${size}`], !running && styles.static].filter(Boolean).join(' ')}>
+          <Component sidebar={renderedSidebar} running={running} />
         </div>
         {caption && <figcaption className={styles.caption}>{label}</figcaption>}
       </figure>