@conduction/docusaurus-preset 3.33.0 → 3.35.0

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

@@ -0,0 +1,329 @@
+/**
+ * AppMock.render.test.js — renders the real <AppMock> JSX to static
+ * markup (the SSR path Docusaurus takes at build time) and asserts on
+ * the output: every variant slug renders, the P0 `running` prop
+ * plumbing puts `.static` on the frame, the animated variants expose
+ * their animation hooks, the `openwoo` slug aliases to the
+ * OpenCatalogi mock, and no rendered inline style reaches for the
+ * reserved coral/gold families.
+ *
+ * Uses the same esbuild-bundle-then-renderToStaticMarkup technique as
+ * KanbanMock.render.test.js. CSS modules are stubbed with an identity
+ * proxy (styles.foo → 'foo'), so class assertions read as the source
+ * class names.
+ */
+
+'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, '..', 'AppMock.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-app-mock-test');
+
+/* Must stay in sync with the VARIANTS map in AppMock.jsx. */
+const SLUGS = [
+  'launchpad', 'launchpad-tiles', 'launchpad-bi', 'launchpad-widgets',
+  'openbuild', 'opencatalogi', 'openconnector', 'openregister',
+  'procest', 'decidesk', 'docudesk', 'larpingapp', 'nldesign',
+  'openwoo', 'pipelinq', 'softwarecatalog', 'zaakafhandelapp',
+  'hermiq', 'portaliq', 'scholiq', 'shillinq', 'doriath', 'planix',
+  'hrmq', 'app-versions',
+];
+
+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 AppMock;
+
+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)];
+  AppMock = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(AppMock, props));
+}
+
+test('SSR smoke: every variant slug renders a frame, none falls through to Unknown app', () => {
+  for (const app of SLUGS) {
+    const html = render({app});
+    assert.match(html, /class="frame size-md"/, `${app}: frame missing`);
+    assert.doesNotMatch(html, /Unknown app/, `${app}: fell through to the unknown-variant branch`);
+  }
+});
+
+test('P0 plumbing: running={false} adds the static class to the frame; default omits it', () => {
+  assert.match(render({app: 'portaliq', running: false}), /class="frame size-md static"/);
+  assert.doesNotMatch(render({app: 'portaliq'}), /\bstatic\b/);
+});
+
+test('P0 plumbing: static frame works on every variant slug', () => {
+  for (const app of SLUGS) {
+    assert.match(render({app, running: false}), /class="frame size-md static"/, `${app}: no static frame`);
+  }
+});
+
+test('openwoo slug is an alias for the OpenCatalogi mock', () => {
+  const openwoo = render({app: 'openwoo'});
+  const opencatalogi = render({app: 'opencatalogi'});
+  assert.equal(openwoo, opencatalogi);
+  assert.equal(
+    render({app: 'openwoo', caption: true}).match(/<figcaption[^>]*>([^<]*)</)[1],
+    'OpenCatalogi'
+  );
+});
+
+test('portaliq: form fields, fills, submit, confirm sweep, and the arriving inbox row are all present', () => {
+  const html = render({app: 'portaliq'});
+  assert.match(html, /class="body decidesk portaliq"/);
+  assert.match(html, /field field-1/);
+  assert.match(html, /field field-2/);
+  assert.match(html, /field field-3 tall/);
+  assert.equal((html.match(/class="fieldFill"/g) || []).length, 3);
+  assert.match(html, /btn submit/);
+  assert.match(html, /class="confirmSweep"/);
+  assert.match(html, /item newItem/);
+});
+
+test('scholiq: staggered progress fills (inline delays) and the credential chip', () => {
+  const html = render({app: 'scholiq'});
+  assert.equal((html.match(/class="progressFill"/g) || []).length, 6);
+  for (const d of [0, 250, 500, 750, 1000, 1250]) {
+    assert.match(html, new RegExp(`animation-delay:${d}ms`), `missing ${d}ms bar delay`);
+  }
+  assert.match(html, /class="credChip"/);
+});
+
+test('launchpad-widgets: seven widgets arrive on a 900ms stagger', () => {
+  const html = render({app: 'launchpad-widgets'});
+  assert.match(html, /class="body launchpad lpWidgets"/);
+  for (const d of [0, 900, 1800, 2700, 3600, 4500, 5400]) {
+    assert.match(html, new RegExp(`animation-delay:${d}ms`), `missing ${d}ms widget delay`);
+  }
+});
+
+test('launchpad-bi: the line chart stroke carries pathLength="1" for the draw animation', () => {
+  const html = render({app: 'launchpad-bi'});
+  assert.match(html, /class="body launchpad lpBi"/);
+  assert.match(html, /class="stroke" pathLength="1"/);
+  assert.equal((html.match(/class="biDelta"/g) || []).length, 3);
+});
+
+test('pipelinq: the closing deal (dealGone) and the won card (dealWon) are both in the board', () => {
+  const html = render({app: 'pipelinq'});
+  assert.match(html, /class="body decidesk plq"/);
+  assert.match(html, /card dealGone/);
+  assert.match(html, /card dealWon/);
+});
+
+test('nldesign: selected swatch, type row, and the actions wrapper around the preview buttons', () => {
+  const html = render({app: 'nldesign'});
+  assert.match(html, /class="body openregister nldesign"/);
+  assert.equal((html.match(/class="swatch(?: |")/g) || []).length, 8);
+  assert.match(html, /swatch swatchSel/);
+  assert.match(html, /class="typeRow"/);
+  // The preview buttons need the .actions parent to be styled at all.
+  assert.match(html, /class="actions"[^>]*><div class="btn"><\/div><div class="btn ghost">/);
+});
+
+test('larpingapp: the scene timeline renders five steps (was an empty shell)', () => {
+  const html = render({app: 'larpingapp'});
+  assert.match(html, /class="procest"/);
+  assert.match(html, /class="timeline"/);
+  assert.equal((html.match(/class="step[ "]/g) || []).length, 5);
+  assert.equal((html.match(/step now/g) || []).length, 1, 'exactly one active (orange) step');
+});
+
+/* ---- Wave 2 — storytelling animation hooks ---- */
+
+test('docudesk: word-level rows with five ordered PII marks, and the live drop-zone', () => {
+  const html = render({app: 'docudesk'});
+  assert.match(html, /class="body opencatalogi docudesk"/);
+  assert.equal((html.match(/class="words"/g) || []).length, 5, 'five word-bar rows');
+  for (const n of [1, 2, 3, 4, 5]) {
+    assert.match(html, new RegExp(`word mark mark-${n}`), `mark-${n} missing`);
+  }
+  assert.match(html, /w w-upload zoneLive/);
+  assert.match(html, /class="zoneFile"/);
+});
+
+test('shillinq: bank line, reconciling row 3, ledger totals, and the KPI grow hook', () => {
+  const html = render({app: 'shillinq'});
+  assert.match(html, /class="body decidesk shillinq"/);
+  assert.match(html, /class="bankLine"/);
+  assert.equal((html.match(/item inv/g) || []).length, 5, 'five invoice rows');
+  assert.equal((html.match(/item inv reconciling/g) || []).length, 1, 'exactly one reconciling row');
+  // The reconciling row is row 3: two plain rows precede it.
+  assert.match(html, /item inv"[\s\S]*?item inv"[\s\S]*?item inv reconciling/);
+  assert.equal((html.match(/tick open/g) || []).length, 1, 'one still-open tick (row 5)');
+  assert.match(html, /class="totNet"/);
+  assert.match(html, /kpi kpiGrow/);
+});
+
+test('doriath: key hex, both mask layers, value, and the countdown hairline', () => {
+  const html = render({app: 'doriath'});
+  assert.match(html, /class="body decidesk doriath"/);
+  assert.match(html, /class="keyHex"/);
+  assert.match(html, /class="vMask"/);
+  assert.match(html, /class="vValue"/);
+  assert.match(html, /class="vCountdown"/);
+  assert.equal((html.match(/class="maskDots"/g) || []).length, 5, 'five locked list entries keep their dot masks');
+});
+
+test('opencatalogi: search bar with query fill; three matches and three dimmed cards', () => {
+  const html = render({app: 'opencatalogi'});
+  assert.match(html, /class="search"/);
+  assert.match(html, /class="q"/);
+  assert.equal((html.match(/class="card[^"]*match"/g) || []).length, 3, 'three matching cards');
+  assert.equal((html.match(/class="card[^"]*dim"/g) || []).length, 3, 'three dimmed cards');
+});
+
+test('openconnector: two travel dots on the arrows and the inserted run row with mint tick', () => {
+  const html = render({app: 'openconnector'});
+  assert.match(html, /class="travelDotA"/);
+  assert.match(html, /class="travelDotB"/);
+  assert.match(html, /item newRun/);
+  assert.match(html, /class="runTick"/);
+});
+
+test('procest: advanced base state (2 done, 1 now), two ghost overlays, and the re-sort pair', () => {
+  const html = render({app: 'procest'});
+  assert.match(html, /class="step"/, 'first step done');
+  assert.match(html, /step advanceFrom/, 'second step advanced out of active');
+  assert.match(html, /step now advanceTo/, 'third step is the newly active one');
+  assert.equal((html.match(/step now/g) || []).length, 1, 'one active step');
+  assert.equal((html.match(/step todo/g) || []).length, 2, 'two to-do steps');
+  assert.match(html, /ghost ghostNow/);
+  assert.match(html, /ghost ghostTodo/);
+  assert.match(html, /item sortUp/);
+  assert.match(html, /item sortDown/);
+});
+
+test('openregister: the landing object row and the KPI grow hook', () => {
+  const html = render({app: 'openregister'});
+  assert.match(html, /item newObj/);
+  assert.match(html, /kpi kpiGrow/);
+});
+
+/* ---- Wave 4 — content reworks ---- */
+
+test('decidesk: vote tally (for/against/abstain + quorum) and the adopt-flip decision row', () => {
+  const html = render({app: 'decidesk'});
+  assert.equal((html.match(/class="tallyRow /g) || []).length, 3, 'three tally rows');
+  assert.match(html, /tallyRow for/);
+  assert.match(html, /tallyRow against/);
+  assert.match(html, /tallyRow abstain/);
+  assert.equal((html.match(/class="quorum"/g) || []).length, 1, 'quorum line on the for-track only');
+  assert.match(html, /item decisionRow/);
+  assert.match(html, /statusPill adoptFlip/);
+});
+
+test('hrmq: reworked to a timesheet + approval surface (no people-list panels left)', () => {
+  const html = render({app: 'hrmq'});
+  assert.match(html, /class="body decidesk hrmq"/);
+  assert.equal((html.match(/class="dayCol"/g) || []).length, 5, 'five day columns');
+  assert.equal((html.match(/class="dayBar"/g) || []).length, 5, 'five hour bars');
+  assert.match(html, /btn submitBtn/);
+  assert.match(html, /item approveRow/);
+  assert.match(html, /class="approvePip"/);
+  assert.match(html, /class="payroll"/);
+  assert.match(html, /class="pNum"/);
+});
+
+test('larpingapp: XP ripple — lifted source card, travelling token, timeline intact', () => {
+  const html = render({app: 'larpingapp'});
+  assert.match(html, /class="body opencatalogi larping"/);
+  assert.match(html, /card b xpSource/);
+  assert.match(html, /class="xpToken"/);
+  assert.equal((html.match(/step now/g) || []).length, 1);
+});
+
+test('softwarecatalog: scan band, CVE-hit row 4, and the vermillion CVE bar (orange accent bar intact)', () => {
+  const html = render({app: 'softwarecatalog'});
+  assert.match(html, /class="body openregister swc"/);
+  assert.match(html, /class="scanBand"/);
+  assert.match(html, /item blocked cveHit/);
+  assert.match(html, /bar cve/);
+  assert.equal((html.match(/bar accent/g) || []).length, 1, 'exactly one orange accent bar');
+});
+
+test('zaakafhandelapp: travelling submission ghost and the dressed new case row', () => {
+  const html = render({app: 'zaakafhandelapp'});
+  assert.match(html, /class="body procest zaak"/);
+  assert.match(html, /class="zkGhost"/);
+  assert.match(html, /item zkNew/);
+  assert.match(html, /item zkSent/);
+  assert.equal((html.match(/item late/g) || []).length, 1, 'the SLA-late row survives the rework');
+});
+
+test('hermiq: inline styles moved to the module — bubbles, typing indicator, chips, approval', () => {
+  const html = render({app: 'hermiq'});
+  assert.match(html, /class="body decidesk hermiq"/);
+  assert.equal((html.match(/bubble user/g) || []).length, 2, 'two user bubbles');
+  assert.equal((html.match(/bubble agent/g) || []).length, 2, 'two agent bubbles');
+  assert.match(html, /class="typing"/);
+  assert.equal((html.match(/class="tDot"/g) || []).length, 3, 'three typing dots');
+  assert.match(html, /statusPill chip1/);
+  assert.match(html, /chip chip2/);
+  assert.match(html, /chip chip3/);
+  assert.match(html, /statusPill approveChip/);
+  assert.match(html, /class="promptField"/);
+  assert.match(html, /btn sendBtn/);
+  // The wave-4 requirement: presentation no longer rides inline styles.
+  assert.doesNotMatch(html, /style="[^"]*(background|border-radius|align-self)/, 'presentation styles must live in the module');
+});
+
+test('openbuild: template highlight, travelling ghost chip, landing app row, publish pulse', () => {
+  const html = render({app: 'openbuild'});
+  assert.match(html, /item tplSource/);
+  assert.match(html, /class="buildGhost"/);
+  assert.match(html, /item newApp/);
+  assert.match(html, /kpi kpiGrow/);
+  assert.match(html, /kpi forest publishedKpi/);
+});
+
+test('reserved accent families: no variant inline-styles coral or gold', () => {
+  // SKILL.md reserves the coral and gold families; the one-orange rule
+  // is enforced per component by review, but coral/gold must never
+  // appear at all. Class-based colours live in the stylesheet; this
+  // guards the inline styles the variants set directly.
+  for (const app of SLUGS) {
+    assert.doesNotMatch(render({app}), /--c-coral|--c-gold/, `${app}: reserved family in inline style`);
+  }
+});

package/src/components/AppMock/variants/DeciDeskMock.jsx

@@ -1,14 +1,32 @@
 /**
  * DeciDesk abstract — left nav + centre with action row, KPI strip,
- * and two tables. Reference: localhost:8080/apps/decidesk.
+ * vote tally, and decision row. Reference: localhost:8080/apps/decidesk.
  *
  * Hero of the centre is the trio of primary buttons (New Decision /
- * Action Item / Minutes); we render them as accent-pill rows top right.
+ * Action Item / Minutes) rendered as accent-pill rows top right.
+ *
+ * Content rework (wave 4): the two former placeholder panels (a bare
+ * accent row / a bare short row) are now the app's actual story — a
+ * vote tally (for / against / abstain bars with a quorum line) and a
+ * decision row whose status flips pending → adopted. The tally fills,
+ * the "for" bar crosses the quorum line (which ticks mint), and the
+ * decision pill flips to adopted. Base styles are the adopted end
+ * state. The KPI strip keeps its single amber cell as the variant's
+ * one orange; the pending pill replays via the shared beta-pill
+ * coral/orange styling only transiently.
  */
 
 import React from 'react';
 import styles from '../AppMock.module.css';
 
+/* for / against / abstain — fill widths of the tally tracks. The
+   "for" bar carries the quorum line and crosses it as it fills. */
+const TALLY = [
+  {cls: 'for', fill: '72%'},
+  {cls: 'against', fill: '30%'},
+  {cls: 'abstain', fill: '16%'},
+];
+
 export default function DeciDeskMock() {
   return (
     <>
@@ -55,12 +73,35 @@ export default function DeciDeskMock() {
             </div>
           </div>
           <div className={styles.panelRow}>
-            <div className={styles.panel}>
+            {/* Vote tally — for / against / abstain with quorum line */}
+            <div className={[styles.panel, styles.tally].join(' ')}>
               <div className={styles.head}><div className={styles.title}></div></div>
-              <div className={styles.row + ' ' + styles.accent}></div>
+              {TALLY.map(({cls, fill}, i) => (
+                <div key={i} className={[styles.tallyRow, styles[cls]].join(' ')}>
+                  <div className={styles.tLabel}></div>
+                  <div className={styles.track}>
+                    <div className={styles.fill} style={{width: fill}}></div>
+                    {cls === 'for' && <div className={styles.quorum}></div>}
+                  </div>
+                </div>
+              ))}
             </div>
-            <div className={styles.panel}>
+            {/* Decision row — pending → adopted flip */}
+            <div className={[styles.panel, styles.decision].join(' ')}>
               <div className={styles.head}><div className={styles.title}></div></div>
+              <div className={[styles.item, styles.decisionRow].join(' ')}>
+                <div className={styles.dIco}></div>
+                <div className={styles.lines}>
+                  <div className={styles.l1}></div>
+                  <div className={styles.l2}></div>
+                </div>
+                {/* Base pill = adopted (mint). The keyframes replay the
+                    pending (beta-coloured) phase before the flip. */}
+                <div className={[styles.statusPill, styles.adoptFlip].join(' ')}>
+                  <div className={styles.h}></div><div className={styles.t}></div>
+                </div>
+              </div>
+              <div className={styles.row}></div>
               <div className={styles.row + ' ' + styles.short}></div>
             </div>
           </div>

package/src/components/AppMock/variants/DocuDeskMock.jsx

@@ -6,11 +6,30 @@
  * recent documents with status pips (green = signed, amber = awaiting
  * sign, terra = anonymised, red = blocked) plus an anonymise drop-zone
  * widget. Left nav for templates / drafts / signed / archive.
+ *
+ * Animation (wave 2): the document rows are word-level bars; the
+ * marked (PII) words black out one by one — the anonymiser working
+ * through the open document set. Base styles are the redacted end
+ * state; the keyframes replay the before-state and the black-out.
+ * The drop-zone shares the `.zoneLive` marching-ants + file-drop
+ * treatment with the docudesk-anonymise dashboard widget.
  */
 
 import React from 'react';
 import styles from '../AppMock.module.css';
 
+/* Word-bar layout per document row: widths in px, `mark` = a PII word
+   the anonymiser blacks out. Five rows, five marked words total, so
+   the black-out cascade reads one word at a time across the list.
+   markIndex orders the cascade (drives the amDdMark<N> keyframes). */
+const DOC_ROWS = [
+  {pip: '', words: [{w: 16}, {w: 10, mark: 1}, {w: 20}, {w: 12}]},
+  {pip: 'review', words: [{w: 12}, {w: 18}, {w: 9, mark: 2}, {w: 14}]},
+  {pip: '', words: [{w: 20}, {w: 12}, {w: 16}, {w: 8, mark: 3}]},
+  {pip: 'todo', words: [{w: 10, mark: 4}, {w: 16}, {w: 12}, {w: 18}]},
+  {pip: '', words: [{w: 14}, {w: 12, mark: 5}, {w: 18}, {w: 10}]},
+];
+
 export default function DocuDeskMock() {
   return (
     <>
@@ -21,7 +40,7 @@ export default function DocuDeskMock() {
         <div className={styles.bell}></div>
         <div className={styles.avatar}></div>
       </div>
-      <div className={[styles.body, styles.opencatalogi].filter(Boolean).join(' ')}>
+      <div className={[styles.body, styles.opencatalogi, styles.docudesk].filter(Boolean).join(' ')}>
         <div className={styles.nav}>
           <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
           {[true, false, false, false, false].map((active, i) => (
@@ -39,25 +58,36 @@ export default function DocuDeskMock() {
               <div className={styles.btn}></div>
             </div>
           </div>
-          {/* Document list with anonymisation/sign status pips */}
+          {/* Document list — word bars with PII marks blacking out */}
           <div className={[styles.w, styles['w-jira']].join(' ')}>
             <div className={styles.wHead}>
               <div className={styles.h}></div><div className={styles.t}></div>
             </div>
             <div className={styles.list}>
-              <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
-              <div className={[styles.item, styles.review].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
-              <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
-              <div className={[styles.item, styles.todo].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
-              <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              {DOC_ROWS.map(({pip, words}, i) => (
+                <div key={i} className={[styles.item, pip && styles[pip]].filter(Boolean).join(' ')}>
+                  <div className={styles.id}></div>
+                  <div className={styles.words}>
+                    {words.map(({w, mark}, j) => (
+                      <div
+                        key={j}
+                        className={[styles.word, mark && styles.mark, mark && styles[`mark-${mark}`]].filter(Boolean).join(' ')}
+                        style={{width: w}}
+                      ></div>
+                    ))}
+                  </div>
+                  <div className={styles.pip}></div>
+                </div>
+              ))}
             </div>
           </div>
-          {/* Anonymise drop-zone */}
-          <div className={[styles.w, styles['w-upload']].join(' ')}>
+          {/* Anonymise drop-zone — live marching ants + file drop */}
+          <div className={[styles.w, styles['w-upload'], styles.zoneLive].join(' ')}>
             <div className={styles.wHead}>
               <div className={styles.h}></div><div className={styles.t}></div>
             </div>
             <div className={styles.zone}>
+              <div className={styles.zoneFile}></div>
               <div className={styles.ico}></div>
               <div className={styles.label}></div>
             </div>

package/src/components/AppMock/variants/DoriathMock.jsx

@@ -6,6 +6,12 @@
  * pattern — next to one unlocked detail card on a cobalt-900 surface
  * with the revealed value in light. Tones: cobalt-900 for the vault
  * interior, lavender for the keys.
+ *
+ * Animation (wave 2): the key hex turns, the mask dots unmask, the
+ * value wipes in, a mint countdown hairline runs out, and the entry
+ * auto-relocks. Base styles are the revealed state (what static
+ * frames show); the keyframes replay lock → unlock → countdown →
+ * relock as one seamless loop.
  */
 
 import React from 'react';
@@ -13,9 +19,9 @@ import styles from '../AppMock.module.css';
 
 export default function DoriathMock() {
   const mask = (n) => (
-    <div style={{display: 'flex', gap: 2, flexShrink: 0}}>
+    <div className={styles.maskDots}>
       {Array.from({length: n}).map((_, i) => (
-        <div key={i} style={{width: 3, height: 3, borderRadius: '50%', background: 'var(--c-cobalt-400)'}}></div>
+        <div key={i} className={styles.dot}></div>
       ))}
     </div>
   );
@@ -28,7 +34,7 @@ export default function DoriathMock() {
         <div className={styles.bell}></div>
         <div className={styles.avatar}></div>
       </div>
-      <div className={[styles.body, styles.decidesk].filter(Boolean).join(' ')}>
+      <div className={[styles.body, styles.decidesk, styles.doriath].filter(Boolean).join(' ')}>
         <div className={styles.nav}>
           <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
           {[true, false, false, false].map((active, i) => (
@@ -53,23 +59,32 @@ export default function DoriathMock() {
               <div className={styles.stack}>
                 {[6, 5, 7, 5, 6].map((dots, i) => (
                   <div key={i} className={styles.item}>
-                    <div style={{width: 10, height: 11, clipPath: 'var(--hex-pointy-top)', background: 'var(--c-lavender-500)', flexShrink: 0}}></div>
+                    <div className={styles.keyChip}></div>
                     <div className={styles.lines}><div className={styles.l1}></div></div>
                     {mask(dots)}
                   </div>
                 ))}
               </div>
             </div>
-            {/* Unlocked entry — vault-dark card, value revealed */}
-            <div className={styles.panel} style={{background: 'var(--c-cobalt-900)', borderColor: 'var(--c-cobalt-900)'}}>
-              <div style={{display: 'flex', alignItems: 'center', gap: 5}}>
-                <div style={{width: 12, height: 14, clipPath: 'var(--hex-pointy-top)', background: 'var(--c-lavender-300)', flexShrink: 0}}></div>
-                <div style={{height: 6, width: '45%', background: 'var(--c-lavender-300)', borderRadius: 1}}></div>
+            {/* Unlocked entry — vault-dark card. The key turns, the
+                masked dots unmask, the value wipes in, the countdown
+                hairline runs out, and the card relocks. */}
+            <div className={[styles.panel, styles.vaultCard].join(' ')}>
+              <div className={styles.vHead}>
+                <div className={styles.keyHex}></div>
+                <div className={styles.vTitle}></div>
+              </div>
+              <div className={styles.vMeta}></div>
+              <div className={styles.vSecret}>
+                <div className={styles.vMask}>
+                  {Array.from({length: 7}).map((_, i) => (
+                    <div key={i} className={styles.dot}></div>
+                  ))}
+                </div>
+                <div className={styles.vValue}></div>
               </div>
-              <div style={{height: 3, width: '60%', background: 'rgba(255,255,255,0.25)', borderRadius: 1}}></div>
-              <div style={{height: 10, width: '85%', background: 'rgba(255,255,255,0.9)', borderRadius: 2}}></div>
-              <div style={{height: 3, width: '50%', background: 'rgba(255,255,255,0.25)', borderRadius: 1}}></div>
-              <div style={{height: 3, width: '70%', background: 'rgba(255,255,255,0.25)', borderRadius: 1}}></div>
+              <div className={styles.vCountdown}></div>
+              <div className={styles.vMetaShort}></div>
             </div>
           </div>
         </div>

package/src/components/AppMock/variants/HermiqMock.jsx

@@ -6,6 +6,14 @@
  * user bubbles right, agent bubbles left — with a tool-call chip row
  * between agent turns and a prompt input at the bottom. Tones:
  * workspace-blue for the human side, mint for confirmed tool runs.
+ *
+ * Wave 4: the inline styles moved into AppMock.module.css (.hermiq
+ * scope) so the surface can animate. The loop: the user's bubble
+ * pops in, a typing indicator blinks, the agent's answer grows, the
+ * tool chips light left-to-right, the approval chip — the variant's
+ * single orange — ticks mint once approved, the tool-result bubble
+ * grows, and the user follows up. Base styles are the approved end
+ * state (all chips lit, approval mint).
  */
 
 import React from 'react';
@@ -21,13 +29,13 @@ export default function HermiqMock() {
         <div className={styles.bell}></div>
         <div className={styles.avatar}></div>
       </div>
-      <div className={[styles.body, styles.decidesk].filter(Boolean).join(' ')}>
+      <div className={[styles.body, styles.decidesk, styles.hermiq].filter(Boolean).join(' ')}>
         {/* Agent list rail */}
         <div className={styles.nav}>
           <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
           {[true, false, false, false].map((active, i) => (
             <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
-              <div className={styles.ico} style={{borderRadius: '50%'}}></div>
+              <div className={[styles.ico, styles.round].join(' ')}></div>
               <div className={styles.l}></div>
             </div>
           ))}
@@ -40,29 +48,41 @@ export default function HermiqMock() {
               <div className={styles.btn + ' ' + styles.ghost}></div>
             </div>
           </div>
-          <div className={styles.panel} style={{flex: 1, gap: 8, justifyContent: 'flex-end'}}>
+          <div className={[styles.panel, styles.convo].join(' ')}>
             {/* User asks */}
-            <div style={{alignSelf: 'flex-end', width: '42%', height: 12, borderRadius: '8px 2px 8px 8px', background: 'var(--c-workspaceblue-300)'}}></div>
+            <div className={[styles.bubble, styles.user, styles.turn1].join(' ')}></div>
+            {/* Typing indicator — blinks while the agent thinks.
+                Hidden at rest and in static frames. */}
+            <div className={styles.typing}>
+              <div className={styles.tDot}></div>
+              <div className={styles.tDot}></div>
+              <div className={styles.tDot}></div>
+            </div>
             {/* Agent answers */}
-            <div style={{alignSelf: 'flex-start', width: '58%', height: 18, borderRadius: '2px 8px 8px 8px', background: 'var(--c-cobalt-50)', border: '1px solid var(--c-cobalt-100)'}}></div>
-            {/* Tool-call chip row — mint = tool run confirmed */}
-            <div style={{display: 'flex', alignItems: 'center', gap: 4}}>
-              <div className={styles.statusPill}>
+            <div className={[styles.bubble, styles.agent, styles.turn2].join(' ')}></div>
+            {/* Tool-call chip row — chips light L→R; the approval chip
+                (the variant's one orange while pending) ticks mint. */}
+            <div className={styles.chips}>
+              <div className={[styles.statusPill, styles.chip1].join(' ')}>
+                <div className={styles.h}></div>
+                <div className={styles.t}></div>
+              </div>
+              <div className={[styles.chip, styles.chip2].join(' ')}></div>
+              <div className={[styles.chip, styles.chip3].join(' ')}></div>
+              <div className={[styles.statusPill, styles.approveChip].join(' ')}>
                 <div className={styles.h}></div>
                 <div className={styles.t}></div>
               </div>
-              <div style={{width: 34, height: 9, borderRadius: 999, background: 'var(--c-cobalt-100)'}}></div>
-              <div style={{width: 26, height: 9, borderRadius: 999, background: 'var(--c-cobalt-100)'}}></div>
             </div>
             {/* Agent continues with the tool result */}
-            <div style={{alignSelf: 'flex-start', width: '64%', height: 24, borderRadius: '2px 8px 8px 8px', background: 'var(--c-cobalt-50)', border: '1px solid var(--c-cobalt-100)'}}></div>
+            <div className={[styles.bubble, styles.agent, styles.tall, styles.turn3].join(' ')}></div>
             {/* User follows up */}
-            <div style={{alignSelf: 'flex-end', width: '34%', height: 12, borderRadius: '8px 2px 8px 8px', background: 'var(--c-workspaceblue-300)'}}></div>
+            <div className={[styles.bubble, styles.user, styles.narrow, styles.turn4].join(' ')}></div>
           </div>
           {/* Prompt input */}
-          <div className={styles.actions} style={{alignItems: 'center'}}>
-            <div style={{flex: 1, height: 16, background: 'white', border: '1px solid var(--c-cobalt-200)', borderRadius: 8}}></div>
-            <div className={styles.btn} style={{width: 28}}></div>
+          <div className={[styles.actions, styles.promptRow].join(' ')}>
+            <div className={styles.promptField}></div>
+            <div className={[styles.btn, styles.sendBtn].join(' ')}></div>
           </div>
         </div>
       </div>