@conduction/docusaurus-preset 3.34.0 → 3.36.0

package/src/components/BuildMock/BuildMock.jsx

@@ -1,7 +1,7 @@
 /**
  * <BuildMock />
  *
- * Token-built abstract of the OpenBuild "make it yours" moment: the
+ * Token-built abstract of the Buildiq "make it yours" moment: the
  * orange edit button gets pressed, a small component palette opens, a
  * widget is picked and dragged onto the page, and it snaps into the
  * empty layout slot. Loops every ~8 seconds. Used on every app's
@@ -9,7 +9,7 @@
  *
  * Same abstraction level as <AppMock>: greeked content, tokens only.
  * The orange FAB is this component's single orange accent (it *is*
- * the OpenBuild edit button).
+ * the Buildiq edit button).
  *
  * `prefers-reduced-motion: reduce` (and `running={false}`) renders
  * the static end state: palette closed, cursor gone, the dragged
@@ -75,7 +75,7 @@ export default function BuildMock({size = 'md', caption, running = true, classNa
             <span className={styles.paletteTile} />
           </div>
 
-          {/* The OpenBuild edit button — the one orange accent. */}
+          {/* The Buildiq edit button — the one orange accent. */}
           <div className={styles.fab}>
             <svg viewBox="0 0 24 24" aria-hidden="true">
               <path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />

package/src/components/FeaturesPage/FeaturesPage.jsx

@@ -32,9 +32,9 @@ import FeatureGrid from '../FeatureGrid/FeatureGrid.jsx';
 const PROVIDER_NAMES = {
   openregister: 'OpenRegister',
   opencatalogi: 'OpenCatalogi',
-  openconnector: 'OpenConnector',
-  docudesk: 'DocuDesk',
-  nldesign: 'NLDesign',
+  openconnector: 'Integriq',
+  docudesk: 'Filinq',
+  nldesign: 'Thematiq',
 };
 
 function providerCredit(providedBy, locale) {

package/src/components/IntegrationIcon/registry.js

@@ -17,7 +17,7 @@
  *     Conduction integrates with (xWiki, n8n, Windmill, OpenProject,
  *     Keycloak).
  *   llm               — large-language-model providers we consume via
- *     OpenConnector / DocuDesk (Claude, Mistral, Ollama, OpenAI,
+ *     Integriq / Filinq (Claude, Mistral, Ollama, OpenAI,
  *     Gemini).
  *   conduction-ext    — external apps in the Conduction Nextcloud
  *     ecosystem (OpenTalk, Matrix, Mattermost, OpenExchange).
@@ -146,7 +146,7 @@ export const INTEGRATIONS = {
 
 export const INTEGRATION_CATEGORIES = {
   'nextcloud-bundled': { label: 'Nextcloud bundled', desc: 'Surfaces every Nextcloud workspace already ships.' },
-  'workflow':          { label: 'Workflow & auth',   desc: 'Third-party tools we wire into Conduction apps via OpenConnector.' },
-  'llm':               { label: 'LLM providers',     desc: 'Models we call from OpenConnector and DocuDesk.' },
+  'workflow':          { label: 'Workflow & auth',   desc: 'Third-party tools we wire into Conduction apps via Integriq.' },
+  'llm':               { label: 'LLM providers',     desc: 'Models we call from Integriq and Filinq.' },
   'conduction-ext':    { label: 'Conduction extensions', desc: 'Adjacent apps in the Conduction Nextcloud ecosystem.' },
 };

package/src/components/LeafCard/LeafCard.jsx

@@ -16,7 +16,7 @@
  *     orange for the one accent-leaf when grouped). Falls back to the
  *     `id` initial when no icon is given.
  *   - Status pill colours: green = backend-ready, amber = stub,
- *     cobalt = external (OpenConnector-routed), grey = built-in.
+ *     cobalt = external (Integriq-routed), grey = built-in.
  *
  * Usage in MDX:
  *
@@ -46,7 +46,7 @@ import styles from './LeafCard.module.css';
 const STATUS_LABELS = {
   'backend-ready': 'Backend ready',
   'stub': 'Provider stub',
-  'external': 'External (OpenConnector)',
+  'external': 'External (Integriq)',
   'built-in': 'Built-in',
 };
 

package/src/components/NextSteps/NextSteps.jsx

@@ -23,7 +23,7 @@
  *     <NextStep
  *       href="/apps/docudesk"
  *       title="Documenten lakken"
- *       cta="Bekijk DocuDesk"
+ *       cta="Bekijk Filinq"
  *     >
  *       Anonimiseer privacygevoelige passages voor publicatie.
  *     </NextStep>

package/src/components/PartnerDirectory/PartnerDirectory.jsx

@@ -23,7 +23,7 @@
  *       {href: '/partners/acato', tier: 'certified', name: 'Acato',
  *        logo: '/img/partners/acato.png',
  *        summary: <>Digital agency uit Almere…</>,
- *        apps: ['OpenCatalogi', 'OpenRegister', 'OpenConnector'],
+ *        apps: ['OpenCatalogi', 'OpenRegister', 'Integriq'],
  *        solutions: ['woo']},
  *       …
  *     ]}

package/src/components/Pipeline/Pipeline.jsx

@@ -10,7 +10,7 @@
  * threading through every hex equator.
  *
  * Family palette follows the locked PRISM-FAMILY POLICY in tokens.css:
- *   mint        integrate / connect    (OpenConnector)
+ *   mint        integrate / connect    (Integriq)
  *   forest      data / registers       (OpenRegister)
  *   terracotta  documents / search     (OpenCatalogi)
  *   lavender    process / views        (LaunchPad)
@@ -36,7 +36,7 @@
  *       {label: 'Legacy', icon: 'legacy'},
  *     ]}}
  *     steps={[
- *       {number: '01', kicker: 'Ingest', name: 'OpenConnector',
+ *       {number: '01', kicker: 'Ingest', name: 'Integriq',
  *         caption: 'Pulls schemas, REST, SOAP, files.'},
  *       {number: 'PLATFORM', name: 'Nextcloud', family: 'workspace',
  *         pill: 'files · users · auth'},

package/src/components/PlatformOverview/PlatformOverview.module.css

@@ -6,7 +6,7 @@
 .section {
   background: white;
   /* Bottom padding deliberately lighter than top: the diagram's
-     orange-dashed flow lines around OpenBuild extend visually below
+     orange-dashed flow lines around Buildiq extend visually below
      the last text label, so the section already has ~80px of optical
      trailing space from the diagram itself before any padding kicks
      in. Top stays at 96px to keep the rhythm coming in from the

package/src/components/SidebarMock/SidebarMock.jsx

@@ -3,8 +3,8 @@
  *
  * Token-painted abstract of the Nextcloud right-side detail panel.
  * Each Conduction app registers tabs into specific Nextcloud
- * sidebars (Procest adds xWiki + Timeline tabs to the case sidebar,
- * DocuDesk adds Signatures + PII Map to the document sidebar, and
+ * sidebars (Dossiq adds xWiki + Timeline tabs to the case sidebar,
+ * Filinq adds Signatures + PII Map to the document sidebar, and
  * so on). A SidebarMock variant represents one such sidebar with
  * one tab active.
  *
@@ -53,7 +53,20 @@
  *                                           .smFrame chrome so the
  *                                           panel slots into
  *                                           AppMock's .body layout
+ *   - running:  boolean (default true)    — false freezes the panel
+ *                                           animation on its settled
+ *                                           end state (same rendering
+ *                                           prefers-reduced-motion
+ *                                           gives)
  *   - className: string
+ *
+ * Animation (wave 5, `.sbLive` in AppMock.module.css): the panel
+ * slides in from the right, the head title/description wipe in, the
+ * active-tab underline travels from the neighbouring tab to the
+ * active one — positioned by the `--sb-ix` / `--sb-n` custom
+ * properties the component sets from the variant's active index —
+ * and the body rows land in a stagger. Base styles are the opened,
+ * settled panel.
  */
 
 import React from 'react';
@@ -85,13 +98,13 @@ import NextcloudActivity             from './variants/NextcloudActivity.jsx';
  * SidebarMock renders that icon in the tab's .ico slot, tinted via
  * currentColor so active tabs read full-cobalt and inactive tabs
  * read muted-cobalt. The icon makes the tab self-documenting:
- * Procest's xWiki tab carries the xWiki icon, DocuDesk's Signatures
+ * Dossiq's xWiki tab carries the xWiki icon, Filinq's Signatures
  * tab carries an activity-style icon for "stuff happens here", etc.
  */
 const VARIANTS = {
   'procest-xwiki': {
     Component: ProcestXWiki,
-    label: 'Procest · Case sidebar, xWiki tab',
+    label: 'Dossiq · Case sidebar, xWiki tab',
     tabs: [
       { id: 'activity',  active: false, icon: 'activity' },
       { id: 'xwiki',     active: true,  icon: 'xwiki' },
@@ -101,7 +114,7 @@ const VARIANTS = {
   },
   'procest-timeline': {
     Component: ProcestTimeline,
-    label: 'Procest · Case sidebar, Timeline tab',
+    label: 'Dossiq · Case sidebar, Timeline tab',
     tabs: [
       { id: 'activity',  active: false, icon: 'activity' },
       { id: 'xwiki',     active: false, icon: 'xwiki' },
@@ -111,7 +124,7 @@ const VARIANTS = {
   },
   'docudesk-signatures': {
     Component: DocuDeskSignatures,
-    label: 'DocuDesk · Document sidebar, Signatures tab',
+    label: 'Filinq · Document sidebar, Signatures tab',
     tabs: [
       { id: 'activity',   active: false, icon: 'activity' },
       { id: 'signatures', active: true,  icon: 'mail' },
@@ -121,7 +134,7 @@ const VARIANTS = {
   },
   'docudesk-pii-map': {
     Component: DocuDeskPiiMap,
-    label: 'DocuDesk · Document sidebar, PII map tab',
+    label: 'Filinq · Document sidebar, PII map tab',
     tabs: [
       { id: 'activity',   active: false, icon: 'activity' },
       { id: 'signatures', active: false, icon: 'mail' },
@@ -149,7 +162,7 @@ const VARIANTS = {
   },
   'openconnector-run-detail': {
     Component: OpenConnectorRunDetail,
-    label: 'OpenConnector · Run sidebar, Logs tab',
+    label: 'Integriq · Run sidebar, Logs tab',
     tabs: [
       { id: 'activity', active: false, icon: 'activity' },
       { id: 'logs',     active: true,  icon: 'n8n' },
@@ -158,7 +171,7 @@ const VARIANTS = {
   },
   'decidesk-decision': {
     Component: DeciDeskDecision,
-    label: 'DeciDesk · Decision sidebar, Detail tab',
+    label: 'Decidiq · Decision sidebar, Detail tab',
     tabs: [
       { id: 'activity', active: false, icon: 'activity' },
       { id: 'detail',   active: true,  icon: 'files' },
@@ -175,7 +188,7 @@ const VARIANTS = {
   },
 };
 
-export default function SidebarMock({ kind, size = 'md', embedded = false, className }) {
+export default function SidebarMock({ kind, size = 'md', embedded = false, running = true, className }) {
   const variant = VARIANTS[kind];
   if (!variant) {
     return (
@@ -187,8 +200,19 @@ export default function SidebarMock({ kind, size = 'md', embedded = false, class
     );
   }
   const { Component, tabs } = variant;
+  /* The travelling underline needs the active tab's index and the tab
+     count; both ride custom properties so the CSS can compute the
+     resting offset. It slides in from the neighbouring tab — from the
+     left normally, from the right when the first tab is the active
+     one (there is no left neighbour to come from). */
+  const activeIx = Math.max(0, tabs.findIndex((t) => t.active));
+  const underlineVars = {
+    '--sb-ix': activeIx,
+    '--sb-n': tabs.length,
+    '--sb-from': activeIx > 0 ? '-100%' : '100%',
+  };
   const panel = (
-    <div className={[amStyles.detail, amStyles.rich].join(' ')}>
+    <div className={[amStyles.detail, amStyles.rich, amStyles.sbLive, !running && amStyles.static].filter(Boolean).join(' ')}>
       <div className={amStyles['sb-head']}>
         <div className={amStyles.ico}></div>
         <div className={amStyles.meta}>
@@ -209,6 +233,9 @@ export default function SidebarMock({ kind, size = 'md', embedded = false, class
               <div className={amStyles.l}></div>
             </div>
           ))}
+          {/* Travelling active-tab underline — rests under the active
+              tab; the loop replays the travel from its neighbour. */}
+          <div className={amStyles['sb-underline']} style={underlineVars}></div>
         </div>
       )}
       <div className={amStyles['sb-body']}>

package/src/components/SidebarMock/SidebarMock.module.css

@@ -185,7 +185,7 @@
 .am .sb-body .smLog.warn .ts { background: var(--c-orange-knvb); }
 .am .sb-body .smLog.error .ts { background: var(--c-red-vermillion); }
 
-/* PII redaction map (DocuDesk PII tab). Inline pills marking spans
+/* PII redaction map (Filinq PII tab). Inline pills marking spans
    in a paragraph; .redacted = applied (red), .suggested = proposed
    (orange), default = neutral text. */
 .am .sb-body .smPiiBlock {

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

@@ -0,0 +1,115 @@
+/**
+ * SidebarMock.render.test.js — renders the real <SidebarMock> JSX to
+ * static markup and asserts on the wave-5 animation plumbing: the
+ * panel carries the `.sbLive` scope, `running={false}` puts `.static`
+ * on the panel itself (both standalone and embedded), and the
+ * travelling active-tab underline is present with the `--sb-ix` /
+ * `--sb-n` / `--sb-from` custom properties derived from the
+ * variant's active tab index.
+ *
+ * Same esbuild-bundle-then-renderToStaticMarkup technique as
+ * AppMock.render.test.js; CSS modules stubbed with an identity proxy.
+ */
+
+'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, '..', 'SidebarMock.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-sidebar-mock-test');
+
+/* Must stay in sync with the VARIANTS map in SidebarMock.jsx.
+   activeIx mirrors each variant's active-tab index. */
+const KINDS = {
+  'procest-xwiki': 1,
+  'procest-timeline': 2,
+  'docudesk-signatures': 1,
+  'docudesk-pii-map': 2,
+  'openregister-metadata': 1,
+  'opencatalogi-publication-history': 1,
+  'openconnector-run-detail': 1,
+  'decidesk-decision': 1,
+  'nextcloud-activity': 0,
+};
+
+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 SidebarMock;
+
+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)];
+  SidebarMock = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(SidebarMock, props));
+}
+
+test('SSR smoke: every kind renders the live panel, none falls through to Unknown sidebar', () => {
+  for (const kind of Object.keys(KINDS)) {
+    const html = render({kind});
+    assert.match(html, /detail rich sbLive/, `${kind}: missing sbLive panel scope`);
+    assert.doesNotMatch(html, /Unknown sidebar/, `${kind}: fell through to the unknown branch`);
+  }
+});
+
+test('running={false} puts static on the panel — standalone and embedded', () => {
+  assert.match(render({kind: 'procest-xwiki', running: false}), /detail rich sbLive static/);
+  assert.match(render({kind: 'procest-xwiki', running: false, embedded: true}), /detail rich sbLive static/);
+  assert.doesNotMatch(render({kind: 'procest-xwiki'}), /\bstatic\b/);
+});
+
+test('the travelling underline carries --sb-ix / --sb-n / --sb-from per variant', () => {
+  for (const [kind, ix] of Object.entries(KINDS)) {
+    const html = render({kind});
+    assert.match(html, /class="sb-underline"/, `${kind}: underline missing`);
+    assert.match(html, new RegExp(`--sb-ix:${ix}[;"]`), `${kind}: wrong active index`);
+    assert.match(html, /--sb-n:[0-9]/, `${kind}: tab count missing`);
+    const from = ix > 0 ? '-100%' : '100%';
+    assert.match(html, new RegExp(`--sb-from:${from}`), `${kind}: wrong travel origin`);
+  }
+});
+
+test('embedded mode drops the standalone frame but keeps the live panel', () => {
+  const html = render({kind: 'openregister-metadata', embedded: true});
+  assert.doesNotMatch(html, /smFrame/);
+  assert.match(html, /detail rich sbLive/);
+  assert.match(html, /class="sb-underline"/);
+});

package/src/components/SidebarMock/variants/DeciDeskDecision.jsx

@@ -1,5 +1,5 @@
 /**
- * DeciDesk · decision sidebar, Detail tab.
+ * Decidiq · decision sidebar, Detail tab.
  *
  * Body of a single decision: title, decision summary paragraph, then
  * structured fields (date, source meeting, decision-maker) and an

package/src/components/SidebarMock/variants/DocuDeskPiiMap.jsx

@@ -1,5 +1,5 @@
 /**
- * DocuDesk · document sidebar, PII map tab.
+ * Filinq · document sidebar, PII map tab.
  *
  * Inline pills marking redacted spans (red) and suggested redactions
  * (orange) within paragraphs. Reads as "here is what got covered up".

package/src/components/SidebarMock/variants/DocuDeskSignatures.jsx

@@ -1,5 +1,5 @@
 /**
- * DocuDesk · document sidebar, Signatures tab.
+ * Filinq · document sidebar, Signatures tab.
  *
  * List of recipients with status pip: signed (mint), pending (orange),
  * blocked / declined (red). Avatar colour mix matches AppMock palette.

package/src/components/SidebarMock/variants/OpenConnectorRunDetail.jsx

@@ -1,5 +1,5 @@
 /**
- * OpenConnector · run sidebar, Logs tab.
+ * Integriq · run sidebar, Logs tab.
  *
  * Single integration run inspected: header with run id and timing,
  * then a vertical log stream with severity-coded timestamps. Last

package/src/components/SidebarMock/variants/ProcestTimeline.jsx

@@ -1,5 +1,5 @@
 /**
- * Procest · case sidebar, Timeline tab.
+ * Dossiq · case sidebar, Timeline tab.
  *
  * The case stage history vertical, with one done, one active in
  * orange, three to-do. Same .now / .late / .todo modifiers as the

package/src/components/SidebarMock/variants/ProcestXWiki.jsx

@@ -1,7 +1,7 @@
 /**
- * Procest · case sidebar, xWiki tab.
+ * Dossiq · case sidebar, xWiki tab.
  *
- * The xWiki integration: Procest pulls the case-handling protocol
+ * The xWiki integration: Dossiq pulls the case-handling protocol
  * page out of xWiki and shows it next to the live case. Body reads
  * as wiki text: a heading, two paragraphs, a subheading, a list of
  * checked steps. Worth saying out loud since it is the integration

package/src/components/SolutionCard/SolutionCard.jsx

@@ -27,7 +27,7 @@
  *       icon={<svg>...</svg>}
  *       title="WOO compliance, by Friday."
  *       outcome={<>A live WOO portal at your <span className="next-blue">Nextcloud</span>-hosted domain.</>}
- *       builtOn={['OpenCatalogi', 'OpenRegister', 'OpenConnector']}
+ *       builtOn={['OpenCatalogi', 'OpenRegister', 'Integriq']}
  *     />
  *   </SolutionGrid>
  */

package/src/components/WidgetMock/WidgetMock.jsx

@@ -2,7 +2,7 @@
  * <WidgetMock />
  *
  * Standalone abstract of a Nextcloud dashboard widget that a
- * Conduction app registers (DocuDesk anonymise, Procest werkvoorraad,
+ * Conduction app registers (Filinq anonymise, Dossiq werkvoorraad,
  * OpenRegister activity, etc.) plus a few of the stock Nextcloud
  * widgets we frame around (Mail, Calendar, Files, Decks, RSS).
  *
@@ -29,7 +29,19 @@
  *   - caption: boolean                                — adds a small
  *                                                       label below
  *                                                       the frame
+ *   - running: boolean (default true) — false freezes the widget's
+ *              animation on its meaningful static end state (same
+ *              rendering `prefers-reduced-motion: reduce` gives).
+ *              The CSS `.static` class on the frame stops keyframes.
  *   - className: string
+ *
+ * Every list-shaped variant (VARIANTS entries with `list: true`)
+ * shares one refresh primitive, styled in AppMock.module.css under
+ * `.wmLive`: a new row slides in at the top, the bottom row clips
+ * out, and the unread badge on the frame bumps as the row lands.
+ * Non-list variants (calendar grid, decks columns, activity graph,
+ * anonymise dropzone) opt out; the dropzone has its own `.zoneLive`
+ * marching-ants + file-drop treatment inside the variant itself.
  */
 
 import React from 'react';
@@ -52,23 +64,23 @@ import NextcloudDecks          from './variants/NextcloudDecks.jsx';
 import NextcloudRss            from './variants/NextcloudRss.jsx';
 
 const VARIANTS = {
-  'docudesk-anonymise':       { Component: DocuDeskAnonymise,       label: 'DocuDesk · Anonymise drop' },
-  'docudesk-pending-sign':    { Component: DocuDeskPendingSign,     label: 'DocuDesk · Pending signatures' },
-  'procest-werkvoorraad':     { Component: ProcestWerkvoorraad,     label: 'Procest · Werkvoorraad' },
-  'procest-due-today':        { Component: ProcestDueToday,         label: 'Procest · Due today' },
+  'docudesk-anonymise':       { Component: DocuDeskAnonymise,       label: 'Filinq · Anonymise drop' },
+  'docudesk-pending-sign':    { Component: DocuDeskPendingSign,     label: 'Filinq · Pending signatures', list: true },
+  'procest-werkvoorraad':     { Component: ProcestWerkvoorraad,     label: 'Dossiq · Werkvoorraad', list: true },
+  'procest-due-today':        { Component: ProcestDueToday,         label: 'Dossiq · Due today', list: true },
   'openregister-activity':    { Component: OpenRegisterActivity,    label: 'OpenRegister · Activity' },
-  'opencatalogi-publications':{ Component: OpenCatalogiPublications,label: 'OpenCatalogi · Recent publications' },
-  'openconnector-runs':       { Component: OpenConnectorRuns,       label: 'OpenConnector · Recent runs' },
-  'decidesk-actions':         { Component: DeciDeskActions,         label: 'DeciDesk · Action items' },
-  'pipelinq-deals':           { Component: PipelinQDeals,           label: 'PipelinQ · Deals closing' },
-  'nextcloud-mail':           { Component: NextcloudMail,           label: 'Nextcloud · Important mail' },
+  'opencatalogi-publications':{ Component: OpenCatalogiPublications,label: 'OpenCatalogi · Recent publications', list: true },
+  'openconnector-runs':       { Component: OpenConnectorRuns,       label: 'Integriq · Recent runs', list: true },
+  'decidesk-actions':         { Component: DeciDeskActions,         label: 'Decidiq · Action items', list: true },
+  'pipelinq-deals':           { Component: PipelinQDeals,           label: 'PipelinQ · Deals closing', list: true },
+  'nextcloud-mail':           { Component: NextcloudMail,           label: 'Nextcloud · Important mail', list: true },
   'nextcloud-calendar':       { Component: NextcloudCalendar,       label: 'Nextcloud · Calendar' },
-  'nextcloud-files':          { Component: NextcloudFiles,          label: 'Nextcloud · Recent files' },
+  'nextcloud-files':          { Component: NextcloudFiles,          label: 'Nextcloud · Recent files', list: true },
   'nextcloud-decks':          { Component: NextcloudDecks,          label: 'Nextcloud · Decks' },
-  'nextcloud-rss':            { Component: NextcloudRss,            label: 'Nextcloud · RSS feed' },
+  'nextcloud-rss':            { Component: NextcloudRss,            label: 'Nextcloud · RSS feed', list: true },
 };
 
-export default function WidgetMock({ kind, size = 'md', caption = false, className }) {
+export default function WidgetMock({ kind, size = 'md', caption = false, running = true, className }) {
   const variant = VARIANTS[kind];
   const wrap = [amStyles.am, styles.wm].filter(Boolean).join(' ');
   if (!variant) {
@@ -80,12 +92,21 @@ export default function WidgetMock({ kind, size = 'md', caption = false, classNa
       </div>
     );
   }
-  const { Component, label } = variant;
+  const { Component, label, list } = variant;
+  const frameCls = [
+    styles.wmFrame,
+    styles[`wm-size-${size}`],
+    list && amStyles.wmLive,
+    !running && amStyles.static,
+  ].filter(Boolean).join(' ');
   return (
     <div className={wrap}>
       <figure className={[styles.wmFigure, className].filter(Boolean).join(' ')}>
-        <div className={[styles.wmFrame, styles[`wm-size-${size}`]].filter(Boolean).join(' ')}>
-          <Component />
+        <div className={frameCls}>
+          {/* Unread badge — list variants only; bumps when the fresh
+              row lands. Styled in AppMock.module.css (.wmBadge). */}
+          {list && <div className={amStyles.wmBadge}></div>}
+          <Component running={running} />
         </div>
         {caption && <figcaption className={styles.wmCaption}>{label}</figcaption>}
       </figure>