@stravica-ai/digital-operator-pa 0.1.0

package/dist/engineering-pa-workspace/app/assets/md.js

@@ -0,0 +1,187 @@
+/**
+ * Shared Markdown → HTML renderer.
+ * Browser: exposes window.renderMd(md) → html
+ * Node:    exports { renderMd } via module.exports
+ *
+ * Features: H1-H6, bold/italic/bold-italic, inline code, fenced code blocks,
+ * links, pipe tables (with alignment), horizontal rules, blockquotes, ul/ol lists.
+ *
+ * Self-test: node core/tools/workspace/app/assets/md.js  →  prints "OK"
+ */
+(function (root) {
+  'use strict';
+
+  var BLOCK_RE = /^<(ul|ol|table|pre|h[1-6]|hr|blockquote)/;
+
+  function renderMd(md) {
+    if (!md) return '';
+
+    // 1. HTML-escape (before any markdown substitution)
+    var s = md.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+    // 2. Protect fenced code blocks with placeholders
+    var codeBlocks = [];
+    s = s.replace(/```([^\n]*)\n([\s\S]*?)```/g, function (_, lang, code) {
+      codeBlocks.push('<pre><code>' + code + '</code></pre>');
+      return '\x00CB' + (codeBlocks.length - 1) + '\x00';
+    });
+
+    // 3. Inline code
+    s = s.replace(/`([^`\n]+)`/g, '<code>$1</code>');
+
+    // 4. Headings H1-H6 (longest match first)
+    s = s.replace(/^###### (.+)$/gm, '<h6>$1</h6>');
+    s = s.replace(/^##### (.+)$/gm,  '<h5>$1</h5>');
+    s = s.replace(/^#### (.+)$/gm,   '<h4>$1</h4>');
+    s = s.replace(/^### (.+)$/gm,    '<h3>$1</h3>');
+    s = s.replace(/^## (.+)$/gm,     '<h2>$1</h2>');
+    s = s.replace(/^# (.+)$/gm,      '<h1>$1</h1>');
+
+    // 5. Horizontal rules (own line, 3+ dashes/underscores/asterisks)
+    s = s.replace(/^(-{3,}|_{3,}|\*{3,})$/gm, '<hr>');
+
+    // 6. Bold-italic, bold, italic, links
+    s = s.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+    s = s.replace(/\*\*(.+?)\*\*/g,     '<strong>$1</strong>');
+    s = s.replace(/\*(.+?)\*/g,          '<em>$1</em>');
+    s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" rel="noopener">$1</a>');
+
+    // 7. Block pass — walk lines to handle tables, blockquotes, lists
+    var lines = s.split('\n');
+    var out   = [];
+    var i     = 0;
+
+    while (i < lines.length) {
+      var line = lines[i];
+
+      // ── Pipe table ──
+      // Detected when current line starts with '|' AND next line is a separator row
+      if (/^\|/.test(line) && i + 1 < lines.length && /^\|[\s\-:|]+\|/.test(lines[i + 1])) {
+        var rows = [];
+        while (i < lines.length && /^\|/.test(lines[i])) { rows.push(lines[i]); i++; }
+
+        var hdrCells = rows[0].replace(/^\||\|$/g, '').split('|').map(function (c) { return c.trim(); });
+        var aligns   = rows[1].replace(/^\||\|$/g, '').split('|').map(function (c) {
+          c = c.trim();
+          if (/^:-+:$/.test(c)) return 'center';
+          if (/^-+:$/.test(c))  return 'right';
+          return 'left';
+        });
+
+        var thead = '<thead><tr>' + hdrCells.map(function (c, j) {
+          return '<th style="text-align:' + (aligns[j] || 'left') + '">' + c + '</th>';
+        }).join('') + '</tr></thead>';
+
+        var tbody = '';
+        if (rows.length > 2) {
+          tbody = '<tbody>' + rows.slice(2).map(function (row) {
+            var cells = row.replace(/^\||\|$/g, '').split('|').map(function (c) { return c.trim(); });
+            return '<tr>' + cells.map(function (c, j) {
+              return '<td style="text-align:' + (aligns[j] || 'left') + '">' + c + '</td>';
+            }).join('') + '</tr>';
+          }).join('') + '</tbody>';
+        }
+        out.push('<table>' + thead + tbody + '</table>');
+        continue;
+      }
+
+      // ── Blockquote ── (HTML-escaped '>' becomes '&gt;')
+      if (/^&gt; /.test(line)) {
+        var bqLines = [];
+        while (i < lines.length && /^&gt; /.test(lines[i])) {
+          bqLines.push(lines[i].replace(/^&gt; /, ''));
+          i++;
+        }
+        out.push('<blockquote>' + bqLines.join('\n') + '</blockquote>');
+        continue;
+      }
+
+      // ── Unordered list ──
+      if (/^[*\-] /.test(line)) {
+        out.push('<ul>');
+        while (i < lines.length && /^[*\-] /.test(lines[i])) {
+          out.push('<li>' + lines[i].replace(/^[*\-] /, '') + '</li>');
+          i++;
+        }
+        out.push('</ul>');
+        continue;
+      }
+
+      // ── Ordered list ──
+      if (/^\d+\. /.test(line)) {
+        out.push('<ol>');
+        while (i < lines.length && /^\d+\. /.test(lines[i])) {
+          out.push('<li>' + lines[i].replace(/^\d+\. /, '') + '</li>');
+          i++;
+        }
+        out.push('</ol>');
+        continue;
+      }
+
+      out.push(line);
+      i++;
+    }
+    s = out.join('\n');
+
+    // 8. Paragraph wrapping — split on blank lines; skip block-level HTML
+    s = s.split(/\n\n+/).map(function (block) {
+      block = block.trim();
+      if (!block) return '';
+      var first = block.split('\n')[0];
+      if (BLOCK_RE.test(first) || first.charAt(0) === '\x00') return block;
+      return '<p>' + block.replace(/\n/g, '<br>') + '</p>';
+    }).join('\n');
+
+    // 9. Restore code blocks
+    codeBlocks.forEach(function (blk, idx) {
+      s = s.replace('\x00CB' + idx + '\x00', blk);
+    });
+
+    return s;
+  }
+
+  // ── Export ──
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { renderMd: renderMd };
+  } else {
+    root.renderMd = renderMd;
+  }
+
+  // ── Self-test (runs when invoked directly: node md.js → prints "OK") ──
+  // Works in both CJS and ESM contexts (no require needed).
+  if (typeof process !== 'undefined' && process.argv && process.argv[1] &&
+      process.argv[1].indexOf('md.js') !== -1) {
+    var _f = 0;
+    function _chk(cond, name) { if (!cond) { console.error('FAIL: ' + name); _f++; } }
+
+    var _t = renderMd('| A | B |\n|---|---|\n| 1 | 2 |');
+    _chk(_t.includes('<table>'),  'table: <table>');
+    _chk(_t.includes('<thead>'),  'table: <thead>');
+    _chk(_t.includes('<th'),      'table: <th>');
+    _chk(_t.includes('<tbody>'),  'table: <tbody>');
+    _chk(_t.includes('<td'),      'table: <td>');
+
+    _chk(renderMd('---').includes('<hr>'), 'hr: ---');
+    _chk(renderMd('___').includes('<hr>'), 'hr: ___');
+    _chk(renderMd('***').includes('<hr>'), 'hr: ***');
+
+    _chk(renderMd('#### h4').includes('<h4>'),    'h4');
+    _chk(renderMd('##### h5').includes('<h5>'),   'h5');
+    _chk(renderMd('###### h6').includes('<h6>'),  'h6');
+
+    var _l = renderMd('- alpha\n- beta\n- gamma');
+    _chk(_l.includes('<ul>'),   'list: <ul>');
+    _chk(_l.includes('<li>'),   'list: <li>');
+    _chk(!_l.includes('<br>'),  'list: no <br> inside list');
+
+    _chk(renderMd('**bold**').includes('<strong>bold</strong>'), 'bold');
+    _chk(renderMd('*em*').includes('<em>em</em>'),               'italic');
+    _chk(renderMd('> quote').includes('<blockquote>'),           'blockquote');
+    _chk(renderMd('`code`').includes('<code>code</code>'),       'inline code');
+    _chk(renderMd('```js\nconsole.log(1);\n```').includes('<pre><code>'), 'fenced code');
+
+    if (_f) process.exit(1);
+    console.log('OK');
+  }
+
+}(typeof window !== 'undefined' ? window : {}));

package/dist/engineering-pa-workspace/app/assets/modal.js

@@ -0,0 +1,120 @@
+/**
+ * Shared modal helper for workspace pages.
+ *
+ * Provides a tiny imperative API without pulling in a framework:
+ *   - openModal({ title, html })  — show modal, set heading + body HTML
+ *   - closeModal()                — hide modal
+ *   - initModal()                 — idempotently injects the DOM + CSS into
+ *                                   the current document and wires backdrop
+ *                                   + ESC handlers. Call once on page boot
+ *                                   (safe to call multiple times).
+ *
+ * Styling follows the Tokyo Night palette already used across the four
+ * audit pages. The modal uses max-height + internal scroll so long records
+ * remain readable without blowing out the viewport. No external CSS needed.
+ *
+ * Browser: exposes window.openModal / window.closeModal / window.initModal
+ * Self-test: none — this is DOM-only glue, covered indirectly by e2e.
+ */
+(function (root) {
+  'use strict';
+
+  var CSS =
+    '.ws-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:200;align-items:center;justify-content:center;padding:1rem}' +
+    '.ws-modal-overlay.open{display:flex}' +
+    '.ws-modal{background:var(--bg-surface,#1f2335);border:1px solid var(--border,#3b4261);border-radius:10px;max-width:780px;width:100%;max-height:85vh;display:flex;flex-direction:column;position:relative;font-family:inherit}' +
+    '.ws-modal-header{padding:1rem 1.25rem 0.5rem;border-bottom:1px solid var(--border,#3b4261);display:flex;align-items:center;gap:0.75rem}' +
+    '.ws-modal-title{color:var(--text-bright,#e0e6ff);font-size:1rem;font-weight:600;flex:1;min-width:0;word-break:break-word}' +
+    '.ws-modal-close{background:var(--bg-highlight,#292e42);border:1px solid var(--border,#3b4261);border-radius:4px;color:var(--text-dim,#565f89);font-size:0.72rem;padding:0.25rem 0.6rem;cursor:pointer;font-family:inherit;flex-shrink:0}' +
+    '.ws-modal-close:hover{color:var(--text-bright,#e0e6ff);border-color:var(--accent,#7aa2f7)}' +
+    '.ws-modal-body{padding:1rem 1.25rem 1.25rem;overflow-y:auto;color:var(--text,#c0caf5);font-size:0.8rem;line-height:1.6}' +
+    '.ws-modal-body pre{background:var(--bg-highlight,#292e42);border:1px solid var(--border,#3b4261);border-radius:5px;padding:0.6rem;overflow-x:auto;font-size:0.72rem;white-space:pre-wrap;word-break:break-word}' +
+    '.ws-modal-body code{background:var(--bg-highlight,#292e42);border:1px solid var(--border,#3b4261);border-radius:3px;padding:0.05rem 0.3rem;font-size:0.78em;color:var(--cyan,#7dcfff)}' +
+    '.ws-modal-body pre code{background:transparent;border:none;padding:0;color:inherit}' +
+    '.ws-modal-body h1,.ws-modal-body h2,.ws-modal-body h3,.ws-modal-body h4{color:var(--text-bright,#e0e6ff);margin:0.75rem 0 0.35rem}' +
+    '.ws-modal-body h1{font-size:1rem}.ws-modal-body h2{font-size:0.9rem;border-bottom:1px solid var(--border,#3b4261);padding-bottom:0.15rem}' +
+    '.ws-modal-body h3{font-size:0.82rem;color:var(--purple,#bb9af7)}' +
+    '.ws-modal-body p{margin-bottom:0.5rem}' +
+    '.ws-modal-body ul,.ws-modal-body ol{padding-left:1.3rem;margin-bottom:0.5rem}' +
+    '.ws-modal-body li{margin-bottom:0.1rem}' +
+    '.ws-modal-body a{color:var(--accent,#7aa2f7);text-decoration:none}' +
+    '.ws-modal-body a:hover{text-decoration:underline}' +
+    '.ws-modal-body .kv{display:grid;grid-template-columns:7rem 1fr;gap:0.35rem 0.75rem;font-size:0.76rem;margin-bottom:0.75rem}' +
+    '.ws-modal-body .kv .k{color:var(--text-dim,#565f89);text-transform:uppercase;letter-spacing:0.05em;font-size:0.64rem;padding-top:0.1rem}' +
+    '.ws-modal-body .kv .v{color:var(--text,#c0caf5);word-break:break-word}' +
+    '.ws-modal-body .kv .v.mono{font-family:"SF Mono","JetBrains Mono",monospace;font-size:0.72rem;color:var(--cyan,#7dcfff)}' +
+    '.ws-modal-body .section-label{color:var(--text-dim,#565f89);text-transform:uppercase;letter-spacing:0.05em;font-size:0.64rem;margin-top:0.75rem;margin-bottom:0.3rem}';
+
+  var initialised = false;
+  var keyHandlerAttached = false;
+
+  function ensureStyles() {
+    if (document.getElementById('ws-modal-styles')) return;
+    var style = document.createElement('style');
+    style.id = 'ws-modal-styles';
+    style.textContent = CSS;
+    document.head.appendChild(style);
+  }
+
+  function ensureDom() {
+    if (document.getElementById('ws-modal-overlay')) return;
+    var overlay = document.createElement('div');
+    overlay.className = 'ws-modal-overlay';
+    overlay.id = 'ws-modal-overlay';
+    overlay.setAttribute('role', 'dialog');
+    overlay.setAttribute('aria-modal', 'true');
+    overlay.innerHTML =
+      '<div class="ws-modal" id="ws-modal">' +
+        '<div class="ws-modal-header">' +
+          '<div class="ws-modal-title" id="ws-modal-title"></div>' +
+          '<button class="ws-modal-close" id="ws-modal-close" type="button">Close ✕</button>' +
+        '</div>' +
+        '<div class="ws-modal-body" id="ws-modal-body"></div>' +
+      '</div>';
+    document.body.appendChild(overlay);
+    // Backdrop click closes modal; clicks inside panel do not propagate.
+    overlay.addEventListener('click', function (e) {
+      if (e.target === overlay) closeModal();
+    });
+    document.getElementById('ws-modal').addEventListener('click', function (e) {
+      e.stopPropagation();
+    });
+    document.getElementById('ws-modal-close').addEventListener('click', closeModal);
+  }
+
+  function attachKeyHandler() {
+    if (keyHandlerAttached) return;
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') closeModal();
+    });
+    keyHandlerAttached = true;
+  }
+
+  function initModal() {
+    if (initialised) return;
+    ensureStyles();
+    ensureDom();
+    attachKeyHandler();
+    initialised = true;
+  }
+
+  function openModal(opts) {
+    initModal();
+    var title = (opts && opts.title) || '';
+    var html = (opts && opts.html) || '';
+    var t = document.getElementById('ws-modal-title');
+    var b = document.getElementById('ws-modal-body');
+    if (t) t.textContent = title;
+    if (b) b.innerHTML = html;
+    document.getElementById('ws-modal-overlay').classList.add('open');
+  }
+
+  function closeModal() {
+    var o = document.getElementById('ws-modal-overlay');
+    if (o) o.classList.remove('open');
+  }
+
+  root.openModal = openModal;
+  root.closeModal = closeModal;
+  root.initModal = initModal;
+}(typeof window !== 'undefined' ? window : {}));

package/dist/engineering-pa-workspace/app/assets/theme.css

@@ -0,0 +1,132 @@
+/*
+ * Workspace theme tokens — single source of truth for every page's palette.
+ *
+ * Two themes live here: dark (default) and light, toggled by the operator
+ * via the banner button. Selection is persisted in localStorage under
+ * `dave.theme` and applied to `documentElement.dataset.theme` before first
+ * paint by the inline init script in each page's <head>.
+ *
+ * Token set is the union of every page's prior `:root` block. Both themes
+ * MUST define the same set of names — any unilateral token becomes invisible
+ * text in the opposite theme. The unit test at `test/theme.test.mjs` pins
+ * this parity.
+ *
+ * Palette choice: Slate-Indigo (was: 7 pages). Picked over Tokyo-Night
+ * because Slate's `--text-dim` already passes WCAG AAA (~7.2:1 against
+ * `--bg`) where Tokyo's `--text-dim: #565f89` failed AA (~2.8:1) and could
+ * not be lifted without breaking the cool family. Tokyo pages adopt this
+ * palette transparently — their var(--accent), var(--bg), etc. references
+ * resolve to the Slate values.
+ *
+ * `--amber` and `--blue` from the old Slate set were aliases of `--yellow`
+ * and `--accent` respectively; their two usages (project-detail.html,
+ * secrets.html) were rewritten to reference the canonical token names.
+ */
+
+:root,
+[data-theme="dark"] {
+  /* Surfaces */
+  --bg: #121218;
+  --bg-surface: #1a1a24;
+  --bg-highlight: #22222e;
+  --bg-inset: #0e0e14;
+  --border: #333346;
+
+  /* Text */
+  --text: #d4d4d8;
+  --text-dim: #a1a1aa;
+  --text-bright: #fafafa;
+
+  /* Accent + interactive */
+  --accent: #6366f1;
+  --accent-hover: #818cf8;
+
+  /* Prose emphasis — used by viewer.html's `.content strong` to make bold
+   * function as a visible scan-anchor. Lighter than --accent on dark so
+   * it clears WCAG AA (~6.3:1 vs --accent's ~4.2:1) without losing the
+   * indigo family signal. */
+  --emphasis: #818cf8;
+
+  /* Semantic */
+  --green: #22c55e;
+  --yellow: #f59e0b;
+  --red: #ef4444;
+  --purple: #a78bfa;
+  --cyan: #22d3ee;
+  --orange: #fb923c;
+}
+
+[data-theme="light"] {
+  /* Surfaces — soft off-white background, true-white surface so cards lift. */
+  --bg: #f6f6fa;
+  --bg-surface: #ffffff;
+  --bg-highlight: #ececf3;
+  --bg-inset: #e4e4ec;
+  --border: #d4d4dc;
+
+  /* Text — near-black for AAA on the soft background. */
+  --text: #18181b;
+  --text-dim: #52525b;
+  --text-bright: #09090b;
+
+  /* Accent + interactive — same indigo family, slightly darker for AA on white. */
+  --accent: #4f46e5;
+  --accent-hover: #6366f1;
+
+  /* Prose emphasis — sits at the accent's darkness so bold reads as a
+   * deliberate marker against the soft background without leaving the
+   * indigo family. ~5.8:1 against --bg (passes AA for body text). */
+  --emphasis: #4f46e5;
+
+  /* Semantic — darkened to clear AA against the light surfaces. */
+  --green: #15803d;
+  --yellow: #b45309;
+  --red: #b91c1c;
+  --purple: #6d28d9;
+  --cyan: #0e7490;
+  --orange: #c2410c;
+}
+
+/*
+ * Theme-toggle button: lives in the banner chrome (#global-banner). The
+ * button persists across banner.js's incident-row re-renders because
+ * banner.js clears only `[data-banner-row]` children (not `[data-theme-chrome]`).
+ */
+#global-banner [data-theme-chrome] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 4px 12px;
+  box-sizing: border-box;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+#global-banner [data-theme-toggle] {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  width: 26px;
+  height: 22px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: border-color 0.12s, color 0.12s, background 0.12s;
+}
+
+#global-banner [data-theme-toggle]:hover {
+  border-color: var(--accent);
+  color: var(--text-bright);
+  background: var(--bg-highlight);
+}
+
+#global-banner [data-theme-toggle]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}

package/dist/engineering-pa-workspace/app/assets/theme.js

@@ -0,0 +1,159 @@
+/**
+ * Workspace theme toggle.
+ *
+ * Two responsibilities split across two surfaces:
+ *
+ * 1. Pre-paint init. Each page also embeds a tiny inline <script> in <head>
+ *    that reads `localStorage.dave.theme` and sets
+ *    `documentElement.dataset.theme` BEFORE first paint. That avoids a
+ *    light-flash on a dark-preference user (FOUC). The inline script is the
+ *    duplicate of `applyStoredTheme()` below; keeping it inline is the
+ *    explicit trade — a separate script file would race the first paint.
+ *
+ * 2. Toggle button + cross-frame coordination. The shell (index.html)
+ *    iframes every page. When the user clicks the toggle in the shell's
+ *    banner, the shell flips its own `data-theme`, persists, and broadcasts
+ *    to the iframe via postMessage so the embedded page applies the same
+ *    theme without reloading. The toggle is only rendered in the top-level
+ *    context (matching banner.js's behaviour) so a page opened directly
+ *    still owns its own toggle.
+ *
+ * Storage: localStorage key `dave.theme`, values 'dark' | 'light'.
+ * Default when unset: 'dark' (operator preference — see CLAUDE.md). We do
+ * NOT consult prefers-color-scheme; dark is the chosen default and we don't
+ * want auto-detection overriding it on first load.
+ */
+(function () {
+  'use strict';
+
+  var STORAGE_KEY = 'dave.theme';
+  var DEFAULT_THEME = 'dark';
+  var VALID = { dark: 1, light: 1 };
+  var MESSAGE_TYPE = 'dave.theme.set';
+
+  function readStored() {
+    try {
+      var raw = localStorage.getItem(STORAGE_KEY);
+      if (raw && VALID[raw]) return raw;
+    } catch (_e) { /* storage unavailable — fall through to default */ }
+    return DEFAULT_THEME;
+  }
+
+  function writeStored(theme) {
+    try { localStorage.setItem(STORAGE_KEY, theme); }
+    catch (_e) { /* storage unavailable — silently no-op */ }
+  }
+
+  function applyTheme(theme) {
+    if (!VALID[theme]) theme = DEFAULT_THEME;
+    document.documentElement.dataset.theme = theme;
+    var btn = document.querySelector('#global-banner [data-theme-toggle]');
+    if (btn) {
+      // Glyph shows the theme you'd switch TO, which is the universal
+      // convention (a moon means "switch to dark", a sun means "switch to
+      // light"). The label encodes the action, not the current state.
+      var next = theme === 'dark' ? 'light' : 'dark';
+      btn.textContent = next === 'dark' ? '☾' : '☀';
+      btn.setAttribute('aria-label', 'Switch to ' + next + ' theme');
+      btn.setAttribute('title', 'Switch to ' + next + ' theme');
+      btn.setAttribute('data-current-theme', theme);
+    }
+  }
+
+  function isTopLevel() {
+    try { return window.top === window.self; } catch (_e) { return false; }
+  }
+
+  function broadcastToFrames(theme) {
+    // Notify every same-origin iframe so embedded pages flip without
+    // reloading. Cross-origin frames silently throw; we catch and skip.
+    var frames = document.querySelectorAll('iframe');
+    for (var i = 0; i < frames.length; i++) {
+      try {
+        var win = frames[i].contentWindow;
+        if (!win) continue;
+        win.postMessage({ type: MESSAGE_TYPE, theme: theme }, window.location.origin);
+      } catch (_e) { /* ignore — cross-origin or detached */ }
+    }
+  }
+
+  function ensureChrome() {
+    var slot = document.getElementById('global-banner');
+    if (!slot) {
+      // Belt + braces: every page ships #global-banner in body, but if a
+      // future page forgets it, mount one so the toggle still appears.
+      slot = document.createElement('div');
+      slot.id = 'global-banner';
+      if (document.body.firstChild) document.body.insertBefore(slot, document.body.firstChild);
+      else document.body.appendChild(slot);
+    }
+    var chrome = slot.querySelector('[data-theme-chrome]');
+    if (chrome) return chrome;
+    chrome = document.createElement('div');
+    chrome.setAttribute('data-theme-chrome', '');
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.setAttribute('data-theme-toggle', '');
+    btn.addEventListener('click', function () {
+      var current = document.documentElement.dataset.theme || DEFAULT_THEME;
+      var next = current === 'dark' ? 'light' : 'dark';
+      writeStored(next);
+      applyTheme(next);
+      broadcastToFrames(next);
+    });
+    chrome.appendChild(btn);
+    // Append rather than insert-first so existing incident rows (added by
+    // banner.js) stay at the top; the toggle row sits below them. That
+    // keeps the loudest signal (an incident) in the primary position.
+    slot.appendChild(chrome);
+    return chrome;
+  }
+
+  function applyStoredTheme() { applyTheme(readStored()); }
+
+  // Pre-paint init: the inline <head> script already ran. We re-apply here
+  // in case the inline script was disabled (CSP) or theme.js loads in
+  // isolation (tests, embeds).
+  applyStoredTheme();
+
+  // Listen for theme messages from the parent (shell). Applies the theme
+  // and updates storage so a subsequent direct page-load matches the shell.
+  window.addEventListener('message', function (evt) {
+    if (evt.origin !== window.location.origin) return;
+    var data = evt.data || {};
+    if (data.type !== MESSAGE_TYPE) return;
+    if (!VALID[data.theme]) return;
+    writeStored(data.theme);
+    applyTheme(data.theme);
+  });
+
+  // Storage events fire in OTHER tabs when this tab writes — keeps multiple
+  // workspace windows in sync.
+  window.addEventListener('storage', function (evt) {
+    if (evt.key !== STORAGE_KEY) return;
+    if (!VALID[evt.newValue]) return;
+    applyTheme(evt.newValue);
+  });
+
+  function boot() {
+    // Toggle button: only at the top level. The shell already renders the
+    // banner and toggle; iframed pages stay quiet to avoid a second button.
+    if (isTopLevel()) ensureChrome();
+    applyStoredTheme();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+
+  // Expose for tests + the inline init helper.
+  window.__daveTheme = {
+    read: readStored,
+    write: writeStored,
+    apply: applyTheme,
+    storageKey: STORAGE_KEY,
+    defaultTheme: DEFAULT_THEME,
+  };
+})();