itk-dev · yepzdk · Apr 29, 2026 · Apr 29, 2026 · Apr 29, 2026 · Apr 29, 2026
diff --git a/.github/workflows/verify_build.yml b/.github/workflows/verify_build.yml
@@ -4,6 +4,7 @@ on:
   pull_request:
     paths:
       - "docs/**"
+      - "scripts/**"
       - "package.json"
       - "package-lock.json"
 
@@ -21,5 +22,8 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Check mock banner inclusion
+        run: npm run lint:mocks
+
       - name: Build site
         run: npx vitepress build docs
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+### Added — Shared mock banner
+- New shared mock banner under `docs/public/design-system/v1/mock-banner.{css,js}` — auto-injects a "this is a mock" strip across the top of every prototype, with optional `data-banner-text` override
+- CI check `npm run lint:mocks` (wired into `.github/workflows/verify_build.yml`) fails the build if a prototype HTML file under `docs/public/projects/` doesn't reference the shared banner; allowlist supported for deliberate exceptions (currently `deltag-aarhus`)
+- Migrated all eight prototypes (opkraevningsoverblik, salary-negotiation, climate-nudging × 3, agentic-orchestration, book-aarhus, deltag-aarhus-timeline, wcag-contrast-checker) onto the shared component, removing six per-prototype banner copies
+
 ### Added — Opkrævningsoverblik BBR-beregner
 - New "Beregner" tab in the Opkrævningsoverblik prototype that calculates four BBR-driven municipal fees: rottebekæmpelse (with the >250 m² rate split), renovation, skorstensfejer, and ejendomsskat (grundskyld)
 - Editable mock-BBR data (grundareal, grundværdi, bygninger med type/m²/ildsteder) per test user with per-field reset and live recalculation

diff --git a/CLAUDE.md b/CLAUDE.md
@@ -108,6 +108,7 @@ Pages sharing the same `passwordGroup` only prompt once per browser session. The
    - Place mock HTML files in `docs/public/projects/<project-name>/mocks/`
    - Link to mocks with the base path prefix: `/research-projects/projects/<name>/mocks/file.html`
    - Use `target="_blank"` on all mock links to bypass VitePress's client-side router
+   - Include the shared mock banner in each HTML file (CI enforces this — see `docs/projects/design-system/components.md` → "Mock banner")
 6. Update `CHANGELOG.md`
 
 ## Building locally

diff --git a/docs/projects/design-system/components.md b/docs/projects/design-system/components.md
@@ -237,3 +237,30 @@ a stat. Tint by setting `color` on the parent (or via
   <path d="M0,18 L10,14 L20,16 L30,8 L40,10 L50,4 L60,6 L70,2 L80,3"/>
 </svg>
 ```
+
+## Mock banner
+
+A shared "this is a mock" banner that every research prototype is
+expected to load. Lives outside `.ds` so prototypes that opt out of the
+design system can still use it. The companion script auto-injects the
+markup and reserves 32 px of `padding-top` on `<body>`.
+
+```html
+<link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
+<script src="/research-projects/design-system/v1/mock-banner.js" defer></script>
+```
+
+Override the text with `data-banner-text`:
+
+```html
+<script src="/research-projects/design-system/v1/mock-banner.js" defer
+        data-banner-text="MOCK — Custom prototype label"></script>
+```
+
+The default text is `"Dette er en mock-up, ikke det rigtige eller endelige produkt."`
+
+A CI check (`npm run lint:mocks`) verifies that every HTML file under
+`docs/public/projects/` references the script. If a prototype
+deliberately uses a different banner — for example one that mimics an
+external product's staging warning — add its path to the `ALLOWLIST` in
+`scripts/check-mock-banners.mjs`.
diff --git a/docs/public/design-system/v1/README.md b/docs/public/design-system/v1/README.md
@@ -25,6 +25,10 @@ prototypes that mix this with Tailwind or another framework.
   (`ds-container`, `ds-stack`, `ds-cluster`, `ds-grid`).
 - **components.css** — buttons, badges, cards, form inputs, tables, modals,
   sidebar nav, stat cards, alerts.
+- **mock-banner.css** + **mock-banner.js** — shared "this is a mock"
+  banner. Loaded standalone (not part of `index.css`) so any prototype
+  can use it, whether or not it opts into `.ds`. CI fails if a prototype
+  HTML under `docs/public/projects/` doesn't reference the script.
 - **playground.html** — live gallery of every component.
 
 ## Playground

diff --git a/docs/public/design-system/v1/mock-banner.css b/docs/public/design-system/v1/mock-banner.css
@@ -0,0 +1,36 @@
+/*
+ * Shared mock banner for ITKdev Research prototypes.
+ *
+ * Loaded standalone — not part of .ds — so any prototype can use it,
+ * including those that opt out of the design system. Uses :where()
+ * for low specificity so prototypes can override locally if needed.
+ *
+ * Pair with mock-banner.js, which auto-injects the markup and adds
+ * the matching body padding-top.
+ */
+
+:where(.mock-banner) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+  background: #fef9e7;
+  color: #666;
+  text-align: center;
+  font-size: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  letter-spacing: 0.3px;
+  border-bottom: 1px solid #f0e6c0;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+:where(.mock-banner strong) {
+  font-weight: 600;
+  margin-right: 4px;
+}
diff --git a/docs/public/design-system/v1/mock-banner.js b/docs/public/design-system/v1/mock-banner.js
@@ -0,0 +1,47 @@
+/*
+ * Auto-injects a "this is a mock" banner at the top of the page.
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
+ *   <script src="/research-projects/design-system/v1/mock-banner.js" defer
+ *           data-banner-text="Optional override"></script>
+ *
+ * Idempotent: a second invocation is a no-op.
+ * Text priority: data-banner-text on the script tag > existing
+ * .mock-banner markup in the page > built-in default.
+ */
+(function () {
+  const DEFAULT_TEXT = 'Dette er en mock-up, ikke det rigtige eller endelige produkt.';
+  const BANNER_HEIGHT = '32px';
+
+  function init() {
+    if (!document.body) return;
+
+    const existing = document.querySelector('.mock-banner');
+    const script = document.currentScript
+      || document.querySelector('script[src*="mock-banner.js"]');
+    const override = script && script.getAttribute('data-banner-text');
+
+    let banner = existing;
+    if (!banner) {
+      banner = document.createElement('div');
+      banner.className = 'mock-banner';
+      banner.setAttribute('role', 'note');
+      document.body.insertBefore(banner, document.body.firstChild);
+    }
+
+    if (override) {
+      banner.textContent = override;
+    } else if (!banner.textContent.trim()) {
+      banner.textContent = DEFAULT_TEXT;
+    }
+
+    document.body.style.paddingTop = BANNER_HEIGHT;
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true });
+  } else {
+    init();
+  }
+})();
diff --git a/docs/public/projects/agentic-orchestration/mocks/unified-platform.css b/docs/public/projects/agentic-orchestration/mocks/unified-platform.css
@@ -23,29 +23,13 @@ body {
   flex-shrink: 0;
 }
 
-/* ── Mock banner ── */
-.mock-banner {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: #fef9e7;
-  color: #666;
-  text-align: center;
-  padding: 4px 16px;
-  border-bottom: 1px solid #f0e6c0;
-  font-size: 12px;
-  z-index: 200;
-}
-
 /* ── Sidebar ── */
 .sidebar {
   width: 230px;
   background: #fff;
   border-right: 1px solid #e5e7eb;
   display: flex;
   flex-direction: column;
-  padding-top: 28px;
   flex-shrink: 0;
 }
 

diff --git a/docs/public/projects/agentic-orchestration/mocks/unified-platform.html b/docs/public/projects/agentic-orchestration/mocks/unified-platform.html
@@ -5,13 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Agentic Orchestration Studio — Unified Platform Mock</title>
 <link rel="stylesheet" href="unified-platform.css">
+<link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
+<script src="/research-projects/design-system/v1/mock-banner.js" defer
+        data-banner-text="MOCK — Agentic Orchestration Studio: Unified Platform (Flowable + n8n + Grafana)"></script>
 </head>
 <body>
 
-<div class="mock-banner">
-  <strong>MOCK</strong> — Agentic Orchestration Studio: Unified Platform (Flowable + n8n + Grafana)
-</div>
-
 <!-- Sidebar -->
 <div class="sidebar">
   <div class="sidebar-brand">

diff --git a/docs/public/projects/book-aarhus/mocks/index.html b/docs/public/projects/book-aarhus/mocks/index.html
@@ -4,6 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Book Aarhus - Ressource Booking</title>
+  <link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
+  <script src="/research-projects/design-system/v1/mock-banner.js" defer></script>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

diff --git a/docs/public/projects/climate-nudging/mocks/leaf-indicator.html b/docs/public/projects/climate-nudging/mocks/leaf-indicator.html
@@ -4,6 +4,9 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Climate Awareness — Leaf Indicator Mock</title>
+<link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
+<script src="/research-projects/design-system/v1/mock-banner.js" defer
+        data-banner-text="MOCK — Climate Awareness Leaf Indicator for Open WebUI"></script>
 <style>
   /* ── Reset & Base ── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -20,22 +23,6 @@
     padding: 0;
   }
 
-  /* ── Mock explanation banner ── */
-  .mock-banner {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: #2563eb;
-    color: #fff;
-    text-align: center;
-    padding: 10px 16px;
-    font-size: 13px;
-    z-index: 100;
-    letter-spacing: 0.02em;
-  }
-  .mock-banner strong { font-weight: 600; }
-
   /* ── Chat area (fake messages) ── */
   .chat-area {
     flex: 1;
@@ -303,10 +290,6 @@
 </head>
 <body>
 
-<div class="mock-banner">
-  <strong>MOCK</strong> — Climate Awareness Leaf Indicator for Open WebUI
-</div>
-
 <!-- Fake chat messages for context -->
 <div class="chat-area">
   <div class="message assistant">

diff --git a/docs/public/projects/climate-nudging/mocks/session-cost-ticker.html b/docs/public/projects/climate-nudging/mocks/session-cost-ticker.html
@@ -4,6 +4,9 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Climate Awareness — Session Cost Ticker Mock</title>
+<link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
+<script src="/research-projects/design-system/v1/mock-banner.js" defer
+        data-banner-text="MOCK — Session Cost Ticker for Open WebUI"></script>
 <style>
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -16,22 +19,6 @@
     min-height: 100vh;
   }
 
-  /* ── Mock banner ── */
-  .mock-banner {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: #2563eb;
-    color: #fff;
-    text-align: center;
-    padding: 10px 16px;
-    font-size: 13px;
-    z-index: 100;
-    letter-spacing: 0.02em;
-  }
-  .mock-banner strong { font-weight: 600; }
-
   /* ── Top bar ── */
   .top-bar {
     display: flex;
@@ -302,10 +289,6 @@
 </head>
 <body>
 
-<div class="mock-banner">
-  <strong>MOCK</strong> — Session Cost Ticker for Open WebUI
-</div>
-
 <!-- Top bar with cost ticker -->
 <div class="top-bar">
   <div class="top-bar-left">

diff --git a/docs/public/projects/climate-nudging/mocks/usage-dashboard.html b/docs/public/projects/climate-nudging/mocks/usage-dashboard.html
@@ -4,6 +4,9 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Climate Awareness — Personal Usage Dashboard Mock</title>
+<link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
+<script src="/research-projects/design-system/v1/mock-banner.js" defer
+        data-banner-text="MOCK — Personal Usage Dashboard for Open WebUI"></script>
 <style>
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -14,21 +17,6 @@
     min-height: 100vh;
   }
 
-  /* ── Mock banner ── */
-  .mock-banner {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: #2563eb;
-    color: #fff;
-    text-align: center;
-    padding: 10px 16px;
-    font-size: 13px;
-    z-index: 100;
-  }
-  .mock-banner strong { font-weight: 600; }
-
   /* ── Layout ── */
   .sidebar {
     position: fixed;
@@ -421,10 +409,6 @@
 </head>
 <body>
 
-<div class="mock-banner">
-  <strong>MOCK</strong> — Personal Usage Dashboard for Open WebUI
-</div>
-
 <!-- Sidebar -->
 <div class="sidebar">
   <div class="sidebar-section">Conversations</div>

diff --git a/docs/public/projects/deltag-aarhus-timeline/mocks/index.html b/docs/public/projects/deltag-aarhus-timeline/mocks/index.html
@@ -8,6 +8,8 @@
   <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   <link rel="stylesheet" href="./styles.css">
+  <link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
+  <script src="/research-projects/design-system/v1/mock-banner.js" defer></script>
 </head>
 <body>
   <div id="root"></div>

diff --git a/docs/public/projects/opkraevningsoverblik/mocks/index.html b/docs/public/projects/opkraevningsoverblik/mocks/index.html
@@ -6,10 +6,11 @@
     <title>Mine opkraevninger — Aarhus Kommune (mockup)</title>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>🏛</text></svg>">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="/research-projects/design-system/v1/mock-banner.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+    <script src="/research-projects/design-system/v1/mock-banner.js" defer></script>
 </head>
 <body>
-    <div class="mock-banner" role="note">Dette er en mock-up, ikke det rigtige eller endelige produkt.</div>
     <div id="app"></div>
     <script src="app.js"></script>
 </body>

diff --git a/docs/public/projects/opkraevningsoverblik/mocks/style.css b/docs/public/projects/opkraevningsoverblik/mocks/style.css
@@ -47,22 +47,6 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-    padding-top: 32px;
-}
-
-.mock-banner {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: #fef9e7;
-    color: #666;
-    text-align: center;
-    padding: 8px 16px;
-    font-size: 12px;
-    z-index: 1000;
-    letter-spacing: 0.3px;
-    border-bottom: 1px solid #f0e6c0;
 }
 
 /* ==========================================================================