bedrock-flows 0.7.1

package/template/.storybook/manager-head.html

@@ -0,0 +1,963 @@
+<!--
+  Storybook MANAGER chrome — a per-component commenting bar.
+
+  This is Storybook chrome (injected into the manager window via Storybook's
+  `manager-head.html`), NOT a design-system component, so a self-contained
+  widget here is correct — do not move it into design-system/.
+
+  What it does:
+    - Pins a collapsible comment panel to the RIGHT side of the Storybook UI.
+    - Derives the current component from the manager URL
+      (?path=/docs/components-drawer--docs or /story/...--default) and the
+      DS version from the pathname (/ds/<version>/storybook/), forming one
+      thread id per component: `DS-<version>-<component>` (sanitized to
+      [A-Za-z0-9_-]). One thread per component's Docs page.
+    - Loads/renders/posts/resolves comments against
+      `/__wf-comments/<ds-id>.json` SAME-ORIGIN (relative, credentials:include),
+      matching the comment object shape + behaviours of the screen panel
+      (mentions, link detection, 4-letter codes, status lifecycle).
+    - Current user via /api/auth/get-session; signed-out shows a read-only state.
+
+  All CSS is prefixed `.dsc-` and the panel lives in its own host element so it
+  can't clash with Storybook's own UI.
+-->
+<style>
+  #dsc-root, #dsc-root * { box-sizing: border-box; }
+  #dsc-root {
+    position: fixed; top: 0; right: 0; height: 100vh; z-index: 2147483000;
+    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    pointer-events: none;
+  }
+  .dsc-toggle {
+    position: fixed; top: 50%; right: 0; transform: translateY(-50%);
+    pointer-events: auto;
+    display: inline-flex; align-items: center; gap: 6px;
+    writing-mode: vertical-rl; text-orientation: mixed;
+    background: #1f2937; color: #fff; border: 0; cursor: pointer;
+    font-size: 12px; font-weight: 600; letter-spacing: .4px;
+    padding: 12px 6px; border-radius: 8px 0 0 8px;
+    box-shadow: -2px 0 8px rgba(0,0,0,.18);
+  }
+  .dsc-toggle:hover { background: #111827; }
+  .dsc-toggle__count {
+    writing-mode: horizontal-tb; min-width: 18px; height: 18px;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: #ef4444; color: #fff; border-radius: 999px;
+    font-size: 11px; font-weight: 700; padding: 0 5px;
+  }
+  .dsc-panel {
+    position: fixed; top: 0; right: 0; height: 100vh; width: 360px; max-width: 92vw;
+    background: #fff; border-left: 1px solid #e5e7eb;
+    box-shadow: -8px 0 28px rgba(0,0,0,.16);
+    transform: translateX(100%); transition: transform .22s ease;
+    display: flex; flex-direction: column; pointer-events: auto;
+    color: #111827;
+  }
+  .dsc-panel.is-open { transform: translateX(0); }
+  .dsc-header {
+    display: flex; align-items: center; gap: 8px;
+    padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
+  }
+  .dsc-title { font-size: 14px; font-weight: 700; margin: 0; flex: 1; line-height: 1.3; }
+  .dsc-title small { display: block; font-weight: 500; color: #6b7280; font-size: 11px; margin-top: 2px; }
+  .dsc-close {
+    background: transparent; border: 0; cursor: pointer; color: #6b7280;
+    font-size: 18px; line-height: 1; padding: 4px;
+  }
+  .dsc-close:hover { color: #111827; }
+  .dsc-list { flex: 1; overflow-y: auto; padding: 12px 16px; }
+  .dsc-empty, .dsc-readonly { color: #6b7280; font-size: 13px; line-height: 1.5; padding: 8px 0; }
+  .dsc-readonly { border-top: 1px solid #e5e7eb; }
+  .dsc-card {
+    border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
+  }
+  .dsc-card.is-resolved { opacity: .6; }
+  .dsc-card__resolved { display: block; font-size: 11px; color: #16a34a; font-weight: 600; margin-bottom: 4px; }
+  .dsc-card__text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
+  .dsc-card__meta {
+    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+    margin-top: 8px; font-size: 11px; color: #6b7280;
+  }
+  .dsc-card__code {
+    font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: .5px;
+    background: #f3f4f6; border-radius: 4px; padding: 1px 5px;
+  }
+  .dsc-card__actions { margin-left: auto; display: inline-flex; gap: 4px; }
+  .dsc-icon-btn {
+    background: transparent; border: 0; cursor: pointer; color: #9ca3af;
+    padding: 3px; border-radius: 6px; display: inline-flex;
+  }
+  .dsc-icon-btn:hover { color: #111827; background: #f3f4f6; }
+  .dsc-icon-btn.is-resolved { color: #16a34a; }
+  .dsc-mention {
+    background: #ede9fe; color: #6d28d9; border-radius: 4px; padding: 0 3px; font-weight: 600;
+  }
+  .dsc-card__replies {
+    margin-top: 8px; padding-left: 10px; border-left: 2px solid #e5e7eb;
+    display: flex; flex-direction: column; gap: 8px;
+  }
+  .dsc-reply__text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
+  .dsc-reply__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: #6b7280; }
+  .dsc-reply__meta .dsc-reply__del { margin-left: auto; }
+  .dsc-reply-btn {
+    align-self: flex-start; margin-top: 6px; padding: 2px 8px; border: 1px solid transparent;
+    background: none; color: #6b7280; border-radius: 4px; font: inherit; font-size: 11px; cursor: pointer;
+  }
+  .dsc-reply-btn:hover { background: #f3f4f6; color: #111827; }
+  .dsc-reply__del { background: none; border: 0; color: #9ca3af; font: inherit; font-size: 11px; cursor: pointer; padding: 0 4px; }
+  .dsc-reply__del:hover { color: #b91c1c; }
+  .dsc-reply-compose { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
+  .dsc-reply-compose textarea {
+    width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #d1d5db;
+    border-radius: 6px; font: inherit; font-size: 13px; resize: vertical; min-height: 48px;
+  }
+  .dsc-reply-compose textarea:focus { outline: 2px solid #7c3aed; outline-offset: -1px; border-color: #7c3aed; }
+  .dsc-reply-compose__row { display: flex; gap: 6px; justify-content: flex-end; }
+  .dsc-card__story {
+    display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600;
+    color: #6d28d9; background: #ede9fe; border-radius: 5px; padding: 2px 7px;
+  }
+  /* Manager comment still waiting on a designer's approval. */
+  .dsc-card__pending {
+    display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600;
+    color: #b45309; background: #fef3c7; border-radius: 5px; padding: 2px 7px;
+  }
+  /* Designer-added context on an approved manager comment. */
+  .dsc-card__designer-note {
+    margin-top: 6px; padding: 6px 8px; border-left: 3px solid #e5e7eb;
+    background: #f9fafb; border-radius: 0 6px 6px 0; font-size: 12px;
+    color: #111827; white-space: pre-wrap;
+  }
+  .dsc-card__designer-note b { font-weight: 600; }
+  /* Manager compose hint — their comments always wait on designer approval. */
+  .dsc-manager-hint { font-size: 11.5px; color: #6b7280; margin: 0 0 8px; }
+  .dsc-story-label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 8px; }
+  .dsc-story-select {
+    font: inherit; font-size: 13px; color: #111827; margin-left: 4px;
+    border: 1px solid #d1d5db; border-radius: 6px; padding: 3px 6px; max-width: 200px;
+  }
+  .dsc-story-select:focus { outline: 2px solid #7c3aed; outline-offset: -1px; border-color: #7c3aed; }
+  .dsc-compose { border-top: 1px solid #e5e7eb; padding: 12px 16px; }
+  .dsc-compose textarea {
+    width: 100%; resize: vertical; min-height: 64px; font: inherit; font-size: 13px;
+    border: 1px solid #d1d5db; border-radius: 8px; padding: 8px 10px; color: #111827;
+  }
+  .dsc-compose textarea:focus { outline: 2px solid #7c3aed; outline-offset: -1px; border-color: #7c3aed; }
+  .dsc-post {
+    margin-top: 8px; width: 100%; font: inherit; font-size: 13px; font-weight: 600;
+    padding: 9px 12px; border-radius: 8px; border: 0; background: #7c3aed; color: #fff; cursor: pointer;
+  }
+  .dsc-post:disabled { background: #c4b5fd; cursor: default; }
+  .dsc-mention-wrap { position: relative; }
+  .dsc-mention-menu {
+    position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; z-index: 10;
+    min-width: 200px; max-height: 200px; overflow-y: auto;
+    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0,0,0,.14);
+  }
+  .dsc-mention-menu.is-below { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 4px; }
+  .dsc-mention-menu__item {
+    display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; cursor: pointer; font-size: 13px;
+  }
+  .dsc-mention-menu__item.is-active, .dsc-mention-menu__item:hover { background: #f3f4f6; }
+  .dsc-mention-menu__handle { color: #6b7280; font-size: 12px; }
+</style>
+<script>
+  (function () {
+    // Run only in the top manager window (Storybook iframes the preview).
+    if (window.self !== window.top) return;
+
+    // Real DS buckets PLUS any storyTitle group prefix we re-home components
+    // under (e.g. `OS/Alert Dialog` → story id `os-alert-dialog`). Without the
+    // group prefix here, currentComponent() can't resolve those stories and the
+    // comment bar shows "Open a component to comment". The component slug after
+    // the prefix is the real folder name, so the thread id stays correct.
+    var BUCKETS = ['foundations', 'components', 'utilities', 'os', 'screen-patterns', 'design-patterns'];
+
+    function sanitize(s) { return String(s || '').replace(/[^A-Za-z0-9_-]/g, '-'); }
+
+    // DS version is the path segment after /ds/ → /ds/<version>/storybook/.
+    function dsVersion() {
+      var m = /\/ds\/([^/]+)\/storybook\//.exec(window.location.pathname);
+      return m ? m[1] : null;
+    }
+
+    // The manager keeps the active story in the URL query/hash as
+    //   ?path=/docs/components-drawer--docs  (Docs page)
+    //   ?path=/story/components-drawer--default
+    // The story id is `<bucket>-<component>--<story>`. Strip the known
+    // bucket prefix, then drop the `--<story>` suffix → the component slug.
+    function currentComponent() {
+      var hay = window.location.href;
+      var m = /[?#&]path=\/(?:docs|story)\/([^&#]+)/.exec(hay);
+      if (!m) return null;
+      var id = decodeURIComponent(m[1]);          // components-drawer--docs
+      id = id.split('--')[0];                       // components-bottom-sheet
+      for (var i = 0; i < BUCKETS.length; i++) {
+        var p = BUCKETS[i] + '-';
+        if (id.indexOf(p) === 0) {
+          return { bucket: BUCKETS[i], component: id.slice(p.length) };
+        }
+      }
+      return null;
+    }
+
+    function threadId(version, component) {
+      return 'DS-' + sanitize(version) + '-' + sanitize(component);
+    }
+
+    // The full story id when viewing a single story (`?path=/story/<id>`); ''
+    // on a Docs page (no single story). Lets a comment target one story.
+    function currentStoryId() {
+      var m = /[?#&]path=\/(docs|story)\/([^&#]+)/.exec(window.location.href);
+      if (!m || m[1] !== 'story') return '';
+      return decodeURIComponent(m[2]); // e.g. components-top-bar--two-line-title
+    }
+    // Pull the component's stories from the Storybook index so the composer's
+    // "About <story>" picker can offer them (and a comment can pin to one).
+    function loadStories() {
+      state.stories = [];
+      if (!state.version || !state.comp) { buildStorySelect(); return; }
+      fetch('/ds/' + state.version + '/storybook/index.json', { cache: 'no-store' })
+        .then(function (r) { return r.ok ? r.json() : null; })
+        .then(function (d) {
+          if (!d) { buildStorySelect(); return; }
+          var entries = d.entries || d.stories || {};
+          var prefix = state.comp.bucket + '-' + state.comp.component + '--';
+          var list = [];
+          Object.keys(entries).forEach(function (k) {
+            var e = entries[k];
+            if (e && e.type === 'story' && k.indexOf(prefix) === 0) list.push({ id: k, name: e.name || k });
+          });
+          state.stories = list;
+          buildStorySelect();
+        })
+        .catch(function () { buildStorySelect(); });
+    }
+    function buildStorySelect() {
+      if (!storySelect) return;
+      var cur = currentStoryId();
+      storySelect.innerHTML = '';
+      var optAll = document.createElement('option');
+      optAll.value = ''; optAll.textContent = 'the whole component';
+      storySelect.appendChild(optAll);
+      (state.stories || []).forEach(function (s) {
+        var o = document.createElement('option');
+        o.value = s.id; o.textContent = s.name;
+        if (s.id === cur) o.selected = true;
+        storySelect.appendChild(o);
+      });
+    }
+
+    // --- comment helpers (mirrors prototypes/_shared/screen.njk) ----------
+    function fmtDate(iso) {
+      try {
+        var d = new Date(iso), now = new Date();
+        var sameYear = d.getFullYear() === now.getFullYear();
+        return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', year: sameYear ? undefined : 'numeric' });
+      } catch (e) { return iso; }
+    }
+    // Deterministic 4-letter code from a comment id — byte-for-byte the
+    // same FNV-1a algorithm as screen.njk / worker / scripts/comment.mjs.
+    function commentCode(id) {
+      var h = 2166136261 >>> 0, s = String(id || '');
+      for (var i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619) >>> 0; }
+      var out = '';
+      for (var j = 0; j < 4; j++) { out += String.fromCharCode(65 + (h % 26)); h = Math.floor(h / 26) + 131; }
+      return out;
+    }
+    function shortLinkLabel(url) {
+      try {
+        var u = new URL(url);
+        var host = u.hostname.replace(/^www\./, '');
+        if (host.indexOf('figma.com') >= 0) {
+          var node = u.searchParams.get('node-id');
+          return node ? ('figma.com · ' + node) : 'figma.com';
+        }
+        var tail = (u.pathname || '').replace(/\/+$/, '');
+        if (tail.length > 22) tail = tail.slice(0, 22) + '…';
+        return host + tail;
+      } catch (e) { return url.length > 42 ? url.slice(0, 42) + '…' : url; }
+    }
+    // Append text, turning http(s) URLs into links (DOM nodes → XSS-safe).
+    function appendLinkified(el, text) {
+      var re = /(https?:\/\/[^\s]+)/g, last = 0, m;
+      while ((m = re.exec(text)) !== null) {
+        if (m.index > last) el.appendChild(document.createTextNode(text.slice(last, m.index)));
+        var url = m[0], tail = '';
+        var trail = url.match(/[).,;:!?\]]+$/);
+        if (trail) { tail = trail[0]; url = url.slice(0, -tail.length); }
+        var a = document.createElement('a');
+        a.href = url; a.target = '_blank'; a.rel = 'noreferrer noopener';
+        a.textContent = shortLinkLabel(url); a.title = url; a.style.cssText = 'color:#2563eb;text-decoration:underline;word-break:break-word;';
+        el.appendChild(a);
+        if (tail) el.appendChild(document.createTextNode(tail));
+        last = m.index + m[0].length;
+      }
+      if (last < text.length) el.appendChild(document.createTextNode(text.slice(last)));
+    }
+
+    var state = {
+      version: null, comp: null, id: null,
+      comments: [], directory: [], currentUser: null, stories: [],
+    };
+
+    function mentionablePeople() {
+      var seen = {};
+      (state.directory || []).forEach(function (u) {
+        var email = (u.email || '').trim().toLowerCase();
+        var local = email.split('@')[0] || '';
+        var handle = local.toLowerCase().replace(/[^a-z0-9]/g, '');
+        if (!handle || seen[handle]) return;
+        seen[handle] = { handle: handle, name: (u.name || '').trim() || local, userId: u.id || null };
+      });
+      (state.comments || []).forEach(function (c) {
+        var name = (c.author || '').trim(); if (!name) return;
+        var handle = name.split(/\s+/)[0].toLowerCase().replace(/[^a-z0-9]/g, '');
+        if (!handle || seen[handle]) return;
+        seen[handle] = { handle: handle, name: name, userId: c.userId || null };
+      });
+      return Object.keys(seen).map(function (k) { return seen[k]; });
+    }
+    function renderTextWithMentions(el, str) {
+      el.textContent = '';
+      var byHandle = {};
+      mentionablePeople().forEach(function (p) { byHandle[p.handle] = p; });
+      var re = /@([a-z0-9]+)/gi, last = 0, m;
+      while ((m = re.exec(str)) !== null) {
+        var person = byHandle[m[1].toLowerCase()];
+        if (!person) continue;
+        if (m.index > last) appendLinkified(el, str.slice(last, m.index));
+        var pill = document.createElement('span');
+        pill.className = 'dsc-mention'; pill.textContent = '@' + person.name;
+        el.appendChild(pill);
+        last = m.index + m[0].length;
+      }
+      if (last < str.length) appendLinkified(el, str.slice(last));
+    }
+
+    // --- DOM ---------------------------------------------------------------
+    var root, toggleBtn, countBadge, panel, titleEl, listEl, composeEl, inputEl, postBtn, storySelect;
+    var mMenu, mMatches = [], mActive = -1, mStart = -1;
+    // Role helpers. Designers (and admins) run the agentic loop; managers
+    // only give comments — never directly actionable (worker-enforced too).
+    function isDesignerUser(u) { return !!u && (u.role === 'designer' || u.role === 'admin'); }
+    function isManagerUser(u) { return !!u && u.role === 'manager'; }
+
+    function buildDom() {
+      root = document.createElement('div');
+      root.id = 'dsc-root';
+      root.innerHTML =
+        '<button type="button" class="dsc-toggle" id="dscToggle" title="Component comments">' +
+          'Comments <span class="dsc-toggle__count" id="dscCount" hidden>0</span>' +
+        '</button>' +
+        '<aside class="dsc-panel" id="dscPanel" aria-label="Component comments">' +
+          '<div class="dsc-header">' +
+            '<h2 class="dsc-title" id="dscTitle">Comments</h2>' +
+            '<button type="button" class="dsc-close" id="dscClose" aria-label="Close">&times;</button>' +
+          '</div>' +
+          '<div class="dsc-list" id="dscList"></div>' +
+          '<div class="dsc-compose" id="dscCompose" hidden>' +
+            '<label class="dsc-story-label">About <select class="dsc-story-select" id="dscStory"><option value="">the whole component</option></select></label>' +
+            '<div class="dsc-mention-wrap">' +
+              '<textarea id="dscInput" placeholder="Comment on this component… use @ to mention"></textarea>' +
+              '<div class="dsc-mention-menu" id="dscMentionMenu" hidden></div>' +
+            '</div>' +
+            '<button type="button" class="dsc-post" id="dscPost" disabled>Post</button>' +
+          '</div>' +
+        '</aside>';
+      document.body.appendChild(root);
+      toggleBtn = root.querySelector('#dscToggle');
+      countBadge = root.querySelector('#dscCount');
+      panel = root.querySelector('#dscPanel');
+      titleEl = root.querySelector('#dscTitle');
+      listEl = root.querySelector('#dscList');
+      composeEl = root.querySelector('#dscCompose');
+      inputEl = root.querySelector('#dscInput');
+      postBtn = root.querySelector('#dscPost');
+      storySelect = root.querySelector('#dscStory');
+      mMenu = root.querySelector('#dscMentionMenu');
+
+      toggleBtn.addEventListener('click', function () {
+        panel.classList.toggle('is-open');
+      });
+      root.querySelector('#dscClose').addEventListener('click', function () {
+        panel.classList.remove('is-open');
+      });
+      inputEl.addEventListener('input', function () {
+        postBtn.disabled = inputEl.value.trim().length === 0;
+        mOpen();
+      });
+      inputEl.addEventListener('blur', function () { setTimeout(mClose, 120); });
+      inputEl.addEventListener('keydown', function (e) {
+        if (mentionKeydown(e)) return;
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); postComment(); }
+      });
+      postBtn.addEventListener('click', postComment);
+    }
+
+    // --- mention menu (composer only) -------------------------------------
+    function mClose() { mMenu.hidden = true; mMatches = []; mActive = -1; mStart = -1; }
+    function mOpen() {
+      var val = inputEl.value, caret = inputEl.selectionStart;
+      var mm = /(^|\s)@([a-z0-9]*)$/i.exec(val.slice(0, caret));
+      if (!mm) { mClose(); return; }
+      mStart = caret - mm[2].length - 1;
+      var q = mm[2].toLowerCase();
+      mMatches = mentionablePeople()
+        .filter(function (p) { return !state.currentUser || p.userId !== state.currentUser.id; })
+        .filter(function (p) { return p.handle.indexOf(q) === 0 || p.name.toLowerCase().indexOf(q) === 0; });
+      if (!mMatches.length) { mClose(); return; }
+      mActive = 0; mMenu.innerHTML = '';
+      mMatches.forEach(function (p, i) {
+        var it = document.createElement('div');
+        it.className = 'dsc-mention-menu__item' + (i === 0 ? ' is-active' : '');
+        var nm = document.createElement('span'); nm.textContent = p.name;
+        var hd = document.createElement('span'); hd.className = 'dsc-mention-menu__handle'; hd.textContent = '@' + p.handle;
+        it.appendChild(nm); it.appendChild(hd);
+        it.addEventListener('mousedown', function (ev) { ev.preventDefault(); mPick(i); });
+        mMenu.appendChild(it);
+      });
+      mMenu.hidden = false;
+      // Auto-flip below the input when there isn't room above it.
+      mMenu.classList.remove('is-below');
+      var ir = inputEl.getBoundingClientRect();
+      if (ir.top - (mMenu.offsetHeight || 200) < 8) mMenu.classList.add('is-below');
+    }
+    function mPick(i) {
+      var p = mMatches[i]; if (!p || mStart < 0) return;
+      var val = inputEl.value, caret = inputEl.selectionStart;
+      inputEl.value = val.slice(0, mStart) + '@' + p.handle + ' ' + val.slice(caret);
+      var pos = mStart + p.handle.length + 2;
+      inputEl.setSelectionRange(pos, pos);
+      postBtn.disabled = inputEl.value.trim().length === 0;
+      mClose(); inputEl.focus();
+    }
+    function mentionKeydown(e) {
+      if (mMenu.hidden || !mMatches.length) return false;
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        mActive = (mActive + (e.key === 'ArrowDown' ? 1 : -1) + mMatches.length) % mMatches.length;
+        Array.prototype.forEach.call(mMenu.children, function (el, idx) { el.classList.toggle('is-active', idx === mActive); });
+        return true;
+      }
+      if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); mPick(mActive); return true; }
+      if (e.key === 'Escape') { e.preventDefault(); mClose(); return true; }
+      return false;
+    }
+
+    // --- networking (SAME-ORIGIN relative, credentials:include) -----------
+    function api() { return '/__wf-comments/' + state.id + '.json'; }
+    function scoped() { return state.comments.filter(function (c) { return c.screenId === state.id; }); }
+
+    function loadComments() {
+      fetch(api(), { cache: 'no-store', credentials: 'include' })
+        .then(function (r) { return r.ok ? r.json() : []; })
+        .then(function (arr) { state.comments = Array.isArray(arr) ? arr : []; render(); })
+        .catch(function () { render(); });
+    }
+    function saveComments() {
+      return fetch(api(), {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(state.comments),
+        credentials: 'include',
+      }).catch(function (e) { console.error('[dsc] save failed', e); });
+    }
+    function loadPeople() {
+      return fetch('/__wf-people.json', { cache: 'no-store', credentials: 'include' })
+        .then(function (r) { return r.ok ? r.json() : null; })
+        .then(function (data) { state.directory = (data && Array.isArray(data.people)) ? data.people : []; })
+        .catch(function () {});
+    }
+    function refreshSession() {
+      return fetch('/api/auth/get-session', { headers: { Accept: 'application/json' }, credentials: 'include' })
+        .then(function (r) { return r.ok ? r.json() : null; })
+        .then(function (data) { state.currentUser = (data && data.user) || null; })
+        .catch(function () { state.currentUser = null; });
+    }
+
+    function postComment() {
+      var text = inputEl.value.trim();
+      if (!text || !state.currentUser) return;
+      var u = state.currentUser;
+      var id = (crypto.randomUUID && crypto.randomUUID()) || (String(Date.now()) + '-' + Math.random().toString(16).slice(2));
+      // MATCH the screen-panel comment object shape so DS comments flow
+      // through the exact same pipeline (queue, worker normalize, resolve).
+      // DS comments can't be reached via /p/<id>/ (no prototype owns a DS- id),
+      // so carry the exact storybook docs URL for back-links (e.g. @mention
+      // notification emails). Mirrors the dashboard queue's derivation:
+      // /ds/<version>/storybook/?path=/docs/<bucket>-<component>--docs
+      // Optional story target — pins the comment to one story so the queue can
+      // preview ONLY that story (not the whole component docs).
+      var storyId = storySelect ? storySelect.value : '';
+      var storyName = '';
+      if (storyId) {
+        var s = (state.stories || []).find(function (x) { return x.id === storyId; });
+        storyName = s ? s.name : '';
+      }
+      var dsHref = (state.version && state.comp)
+        ? (storyId
+            ? '/ds/' + state.version + '/storybook/?path=/story/' + storyId
+            : '/ds/' + state.version + '/storybook/?path=/docs/' +
+              state.comp.bucket + '-' + state.comp.component + '--docs')
+        : undefined;
+      state.comments.push({
+        id: id, text: text, author: (u.name || u.email || 'Signed in user'),
+        authorEmail: (u.email || ''), userId: u.id,
+        createdAt: new Date().toISOString(), screenId: state.id,
+        // Managers only give comments: theirs start in 'pending-review' and a
+        // designer must approve (and contextualize) them before agents act.
+        // The worker enforces the same rule server-side.
+        status: isManagerUser(u) ? 'pending-review' : 'open',
+        dsHref: dsHref,
+        storyId: storyId || undefined, storyName: storyName || undefined,
+      });
+      inputEl.value = ''; postBtn.disabled = true;
+      if (storySelect) buildStorySelect();
+      render(); saveComments();
+    }
+    // Designer approval of a manager comment: inline context textarea +
+    // Approve/Cancel (reuses the reply-composer styling). Approving promotes
+    // the comment to 'open' and stores the context as designerNote.
+    function beginApprove(c, card) {
+      if (card.querySelector('.dsc-approve-row')) return;
+      var row = document.createElement('div');
+      row.className = 'dsc-reply-compose dsc-approve-row';
+      var ta = document.createElement('textarea');
+      ta.placeholder = 'Add context for the agent (optional) — what should be done with this?';
+      var btnRow = document.createElement('div');
+      btnRow.className = 'dsc-reply-compose__row';
+      var cancel = document.createElement('button');
+      cancel.type = 'button'; cancel.className = 'dsc-reply-btn'; cancel.textContent = 'Cancel';
+      var ok = document.createElement('button');
+      ok.type = 'button'; ok.className = 'dsc-post'; ok.textContent = 'Approve for agent';
+      ok.addEventListener('click', function () {
+        var idx = state.comments.findIndex(function (x) { return x.id === c.id; });
+        if (idx < 0 || !state.currentUser) return;
+        var now = new Date().toISOString();
+        var by = state.currentUser.name || state.currentUser.email || 'Designer';
+        var note = ta.value.trim();
+        var patch = { status: 'open', resolved: false, statusAt: now, statusBy: by };
+        if (note) { patch.designerNote = note; patch.designerNoteBy = by; patch.designerNoteAt = now; }
+        state.comments[idx] = Object.assign({}, state.comments[idx], patch);
+        render(); saveComments();
+      });
+      cancel.addEventListener('click', function () { row.remove(); });
+      btnRow.appendChild(cancel); btnRow.appendChild(ok);
+      row.appendChild(ta); row.appendChild(btnRow);
+      card.appendChild(row);
+      ta.focus();
+    }
+    function toggleResolved(cid) {
+      var idx = state.comments.findIndex(function (c) { return c.id === cid; });
+      if (idx < 0 || !state.currentUser) return;
+      var next = !state.comments[idx].resolved;
+      var u = state.currentUser;
+      state.comments[idx] = Object.assign({}, state.comments[idx], {
+        status: next ? 'approved' : 'open',
+        resolved: next,
+        resolvedAt: next ? new Date().toISOString() : undefined,
+        resolvedBy: next ? (u.name || u.email || 'Signed in user') : undefined,
+        resolvedById: next ? u.id : undefined,
+      });
+      render(); saveComments();
+    }
+
+    // One reply row: text (with @mentions) + author/date, plus Delete for the
+    // reply's own author. Replies aren't resolvable. (No live @ autocomplete
+    // on the reply box here — manual @mentions still render as pills.)
+    function buildReplyEl(r) {
+      var el = document.createElement('div');
+      el.className = 'dsc-reply';
+      var text = document.createElement('div');
+      text.className = 'dsc-reply__text';
+      renderTextWithMentions(text, r.text || '');
+      el.appendChild(text);
+      var meta = document.createElement('div');
+      meta.className = 'dsc-reply__meta';
+      var rcode = document.createElement('span');
+      rcode.className = 'dsc-card__code';
+      rcode.textContent = commentCode(r.id);
+      rcode.title = 'Reply code — refer to this reply by "' + rcode.textContent + '"';
+      meta.appendChild(rcode);
+      var who = document.createElement('span');
+      who.textContent = (r.author ? r.author + ' · ' : '') + (r.createdAt ? fmtDate(r.createdAt) : '');
+      meta.appendChild(who);
+      var u = state.currentUser;
+      if (u && r.userId && r.userId === u.id) {
+        var del = document.createElement('button');
+        del.type = 'button'; del.className = 'dsc-reply__del'; del.textContent = 'Delete';
+        del.addEventListener('click', function () { deleteReply(r.id); });
+        meta.appendChild(del);
+      }
+      el.appendChild(meta);
+      return el;
+    }
+    // Inline edit of a top-level comment (author or admin). Swaps the text
+    // node for a textarea + Save/Cancel, then PUTs the updated thread.
+    function editComment(c, textEl) {
+      if (!state.currentUser) return;
+      var wrap = document.createElement('div');
+      wrap.className = 'dsc-reply-compose';
+      var ta = document.createElement('textarea');
+      ta.value = c.text || '';
+      var row = document.createElement('div'); row.className = 'dsc-reply-compose__row';
+      var cancel = document.createElement('button');
+      cancel.type = 'button'; cancel.className = 'dsc-reply-btn'; cancel.textContent = 'Cancel';
+      cancel.addEventListener('click', render);
+      var save = document.createElement('button');
+      save.type = 'button'; save.className = 'dsc-post'; save.textContent = 'Save';
+      save.addEventListener('click', function () {
+        var t = ta.value.trim();
+        if (!t) return;
+        saveCommentEdit(c.id, t);
+      });
+      row.appendChild(cancel); row.appendChild(save);
+      wrap.appendChild(ta); wrap.appendChild(row);
+      textEl.replaceWith(wrap);
+      ta.focus();
+    }
+    function saveCommentEdit(cid, newText) {
+      var idx = state.comments.findIndex(function (x) { return x.id === cid; });
+      if (idx < 0 || !state.currentUser) return;
+      state.comments[idx].text = newText;
+      state.comments[idx].editedAt = new Date().toISOString();
+      saveComments().then(render);
+    }
+
+    function openReplyComposer(c, card, replyBtn) {
+      if (card.querySelector('.dsc-reply-compose')) return;
+      replyBtn.hidden = true;
+      var box = document.createElement('div');
+      box.className = 'dsc-reply-compose';
+      var ta = document.createElement('textarea');
+      ta.rows = 2; ta.placeholder = 'Reply… use @ to mention';
+      var row = document.createElement('div');
+      row.className = 'dsc-reply-compose__row';
+      var post = document.createElement('button');
+      post.type = 'button'; post.className = 'dsc-post'; post.textContent = 'Reply';
+      var cancel = document.createElement('button');
+      cancel.type = 'button'; cancel.className = 'dsc-reply__del'; cancel.textContent = 'Cancel';
+      function close() { box.remove(); replyBtn.hidden = false; }
+      post.addEventListener('click', function () {
+        var text = ta.value.trim();
+        if (!text) { close(); return; }
+        postReply(c.id, text);
+      });
+      cancel.addEventListener('click', close);
+      ta.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); post.click(); }
+        if (e.key === 'Escape') { e.preventDefault(); close(); }
+      });
+      row.appendChild(post); row.appendChild(cancel);
+      box.appendChild(ta); box.appendChild(row);
+      card.appendChild(box);
+      ta.focus();
+    }
+    function postReply(parentId, text) {
+      if (!text || !state.currentUser) return;
+      var u = state.currentUser;
+      var id = (crypto.randomUUID && crypto.randomUUID()) || (String(Date.now()) + '-' + Math.random().toString(16).slice(2));
+      state.comments.push({
+        id: id, text: text, author: (u.name || u.email || 'Signed in user'),
+        authorEmail: (u.email || ''), userId: u.id,
+        createdAt: new Date().toISOString(), parentId: parentId,
+      });
+      render(); saveComments();
+    }
+    function deleteReply(id) {
+      state.comments = state.comments.filter(function (c) { return c.id !== id; });
+      render(); saveComments();
+    }
+
+    function render() {
+      if (!listEl) return;
+      listEl.innerHTML = '';
+      var list = scoped();
+      if (!list.length) {
+        var empty = document.createElement('div');
+        empty.className = 'dsc-empty';
+        empty.textContent = 'No comments on this component yet.';
+        listEl.appendChild(empty);
+      } else {
+        list.slice().sort(function (a, b) {
+          return (a.resolved ? 1 : 0) - (b.resolved ? 1 : 0)
+            || String(b.createdAt || '').localeCompare(String(a.createdAt || ''));
+        }).forEach(function (c) {
+          var card = document.createElement('div');
+          card.className = 'dsc-card' + (c.resolved ? ' is-resolved' : '');
+          if (c.resolved) {
+            var rb = document.createElement('span');
+            rb.className = 'dsc-card__resolved';
+            rb.textContent = '✓ Resolved' + (c.resolvedBy ? ' · ' + c.resolvedBy : '') + (c.resolvedAt ? ' · ' + fmtDate(c.resolvedAt) : '');
+            card.appendChild(rb);
+          }
+          var text = document.createElement('div');
+          text.className = 'dsc-card__text';
+          renderTextWithMentions(text, c.text || '');
+          card.appendChild(text);
+          if (c.storyId) {
+            var sc = document.createElement('div');
+            sc.className = 'dsc-card__story';
+            sc.textContent = '▸ ' + (c.storyName || c.storyId.split('--').pop().replace(/-/g, ' '));
+            card.appendChild(sc);
+          }
+          if (c.status === 'pending-review') {
+            var pr = document.createElement('div');
+            pr.className = 'dsc-card__pending';
+            pr.textContent = 'awaiting review';
+            pr.title = 'Manager comment — a designer must approve it before agents act on it';
+            card.appendChild(pr);
+          }
+          // Designer context added when a manager comment was approved —
+          // this is what the agent is actually asked to do with it.
+          if (c.designerNote) {
+            var dn = document.createElement('div');
+            dn.className = 'dsc-card__designer-note';
+            var dnWho = document.createElement('b');
+            dnWho.textContent = (c.designerNoteBy || 'Designer') + ': ';
+            dn.appendChild(dnWho);
+            dn.appendChild(document.createTextNode(c.designerNote));
+            card.appendChild(dn);
+          }
+          var meta = document.createElement('div');
+          meta.className = 'dsc-card__meta';
+          var code = document.createElement('span');
+          code.className = 'dsc-card__code'; code.textContent = commentCode(c.id);
+          code.title = 'Comment code — refer to this comment by "' + code.textContent + '"';
+          var stamp = document.createElement('span');
+          stamp.textContent = (c.author ? c.author + ' · ' : '') + (c.createdAt ? fmtDate(c.createdAt) : '') + (c.editedAt ? ' · edited' : '');
+          meta.appendChild(code); meta.appendChild(stamp);
+          if (state.currentUser) {
+            var actions = document.createElement('span');
+            actions.className = 'dsc-card__actions';
+            // A pending manager comment needs a designer verdict: Approve
+            // opens an inline row to add context, then promotes the comment
+            // to 'open' (the actionable status for the agentic loop).
+            if (c.status === 'pending-review' && isDesignerUser(state.currentUser)) {
+              var approve = document.createElement('button');
+              approve.type = 'button';
+              approve.className = 'dsc-icon-btn';
+              approve.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.5"/><path d="M8.5 12.5L11 15L15.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+              approve.title = 'Approve for the agent queue — optionally add context first';
+              approve.setAttribute('aria-label', 'Approve for the agent queue');
+              approve.addEventListener('click', function () { beginApprove(c, card); });
+              actions.appendChild(approve);
+            }
+            // Managers only close their OWN comments (retract feedback) and
+            // never reopen — reopening re-enters the actionable flow.
+            var canResolve = !isManagerUser(state.currentUser)
+              || ((c.userId && c.userId === state.currentUser.id) && !c.resolved);
+            if (canResolve) {
+            var resolve = document.createElement('button');
+            resolve.type = 'button';
+            resolve.className = 'dsc-icon-btn' + (c.resolved ? ' is-resolved' : '');
+            resolve.innerHTML = c.resolved
+              ? '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 8L12 18L11.0773 16.9733" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 11L8 16L16 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+              : '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M4 12L9.33333 18L20 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+            var lbl = c.resolved ? 'Reopen comment' : 'Resolve comment';
+            resolve.title = lbl; resolve.setAttribute('aria-label', lbl);
+            resolve.addEventListener('click', function () { toggleResolved(c.id); });
+            actions.appendChild(resolve);
+            }
+            // Edit — author (or admin) can edit their own comment, matching the
+            // screen/wireflow panels. Was missing here (storybook only had reply).
+            var u0 = state.currentUser;
+            var canEdit = u0 && ((c.userId && c.userId === u0.id) || u0.role === 'admin');
+            if (canEdit) {
+              var edit = document.createElement('button');
+              edit.type = 'button'; edit.className = 'dsc-icon-btn';
+              edit.title = 'Edit comment'; edit.setAttribute('aria-label', 'Edit comment');
+              edit.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 20h9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+              edit.addEventListener('click', function () { editComment(c, text); });
+              actions.appendChild(edit);
+            }
+            meta.appendChild(actions);
+          }
+          card.appendChild(meta);
+          // Replies (one level) under the parent + a Reply affordance.
+          var replies = state.comments
+            .filter(function (r) { return r.parentId === c.id; })
+            .sort(function (a, b) { return String(a.createdAt || '').localeCompare(String(b.createdAt || '')); });
+          if (replies.length) {
+            var rwrap = document.createElement('div');
+            rwrap.className = 'dsc-card__replies';
+            replies.forEach(function (r) { rwrap.appendChild(buildReplyEl(r)); });
+            card.appendChild(rwrap);
+          }
+          if (state.currentUser) {
+            var replyBtn = document.createElement('button');
+            replyBtn.type = 'button';
+            replyBtn.className = 'dsc-reply-btn';
+            replyBtn.textContent = 'Reply';
+            replyBtn.addEventListener('click', function () { openReplyComposer(c, card, replyBtn); });
+            card.appendChild(replyBtn);
+          }
+          listEl.appendChild(card);
+        });
+      }
+      var openN = list.filter(function (c) { return !c.resolved; }).length;
+      countBadge.hidden = openN === 0;
+      countBadge.textContent = String(openN);
+    }
+
+    function applySession() {
+      // Signed out → read-only (no composer, plus a hint). Signed in →
+      // composer + the mentionable-people directory.
+      if (state.currentUser) {
+        composeEl.hidden = false;
+        // Managers' comments always wait on a designer — say so up front.
+        var hint = composeEl.querySelector('.dsc-manager-hint');
+        if (isManagerUser(state.currentUser)) {
+          if (!hint) {
+            hint = document.createElement('p');
+            hint.className = 'dsc-manager-hint';
+            hint.textContent = 'A designer reviews your comments before anything is changed.';
+            composeEl.insertBefore(hint, composeEl.firstChild);
+          }
+        } else if (hint) {
+          hint.remove();
+        }
+        loadPeople().then(render);
+      } else {
+        composeEl.hidden = true;
+      }
+      render();
+      if (!state.currentUser && state.id && listEl) {
+        var note = document.createElement('div');
+        note.className = 'dsc-readonly';
+        note.textContent = 'Sign in to the dashboard to post or resolve comments.';
+        listEl.appendChild(note);
+      }
+    }
+
+    // Switch the active thread when the story/component changes.
+    function syncContext() {
+      var version = dsVersion();
+      var comp = currentComponent();
+      if (!version || !comp) {
+        // No identifiable component (e.g. the welcome page) — show a hint.
+        if (titleEl) { titleEl.innerHTML = 'Comments<small>Open a component to comment</small>'; }
+        state.id = null; state.comments = [];
+        if (listEl) { listEl.innerHTML = '<div class="dsc-empty">Select a component in the sidebar to view its comment thread.</div>'; }
+        if (composeEl) composeEl.hidden = true;
+        if (countBadge) countBadge.hidden = true;
+        return;
+      }
+      var nextId = threadId(version, comp.component);
+      if (nextId === state.id) {
+        // Same component, possibly a different story — refresh the picker so it
+        // defaults to whatever story you're now viewing.
+        buildStorySelect();
+        return;
+      }
+      state.version = version; state.comp = comp; state.id = nextId;
+      titleEl.innerHTML = 'Comments<small>' + comp.component + ' · ' + version + '</small>';
+      state.comments = [];
+      mClose();
+      loadComments();
+      loadStories();
+      applySession();
+    }
+
+    function start() {
+      buildDom();
+      refreshSession().then(function () {
+        applySession();
+        syncContext();
+      });
+      // The manager keeps state in the URL — react to navigation between
+      // stories/components. Storybook uses pushState (no hashchange in SB10),
+      // so poll the URL alongside the standard events.
+      var lastHref = window.location.href;
+      window.addEventListener('hashchange', syncContext);
+      window.addEventListener('popstate', syncContext);
+      setInterval(function () {
+        if (window.location.href !== lastHref) { lastHref = window.location.href; syncContext(); }
+      }, 400);
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', start);
+    } else {
+      start();
+    }
+  })();
+</script>
+
+<!-- Sidebar comment-count badges: annotate each component node in the
+     Storybook sidebar with its number of open comments, so you can see at a
+     glance which components have unresolved feedback. Counts come from the
+     same per-thread KV the comment bar uses, via /__wf-comment-counts.json. -->
+<script>
+  (function () {
+    if (window.self !== window.top) return;
+    var BUCKETS = ['foundations', 'components', 'utilities', 'os', 'screen-patterns', 'design-patterns'];
+    function sanitize(s) { return String(s || '').replace(/[^A-Za-z0-9_-]/g, '-'); }
+    function dsVersion() {
+      var m = /\/ds\/([^/]+)\/storybook\//.exec(window.location.pathname);
+      return m ? m[1] : null;
+    }
+    function threadId(v, c) { return 'DS-' + sanitize(v) + '-' + sanitize(c); }
+    // A sidebar component node's data-item-id is `<bucket>-<component>` (no
+    // `--`, which marks stories/docs). Strip the bucket → the component slug.
+    function componentOf(id) {
+      if (!id || id.indexOf('--') >= 0) return null;
+      for (var i = 0; i < BUCKETS.length; i++) {
+        var p = BUCKETS[i] + '-';
+        if (id.indexOf(p) === 0) return id.slice(p.length);
+      }
+      return null;
+    }
+    var counts = {};
+    function styleOnce() {
+      if (document.getElementById('dsc-side-style')) return;
+      var s = document.createElement('style');
+      s.id = 'dsc-side-style';
+      s.textContent =
+        '.dsc-side-badge{margin-left:auto;flex:none;min-width:18px;height:18px;' +
+        'padding:0 5px;box-sizing:border-box;border-radius:9px;background:#f97316;' +
+        'color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center;' +
+        'transform:translate(-3px,2px);}';
+      document.head.appendChild(s);
+    }
+    function apply() {
+      var v = dsVersion();
+      if (!v) return;
+      var nodes = document.querySelectorAll('[data-nodetype="component"]');
+      for (var i = 0; i < nodes.length; i++) {
+        var node = nodes[i];
+        var comp = componentOf(node.getAttribute('data-item-id'));
+        var n = comp ? (counts[threadId(v, comp)] || 0) : 0;
+        var b = node.querySelector(':scope > .dsc-side-badge');
+        if (n > 0) {
+          if (!b) { b = document.createElement('span'); b.className = 'dsc-side-badge'; node.appendChild(b); }
+          var t = String(n);
+          if (b.textContent !== t) b.textContent = t;       // only mutate on change → no observer loop
+        } else if (b) {
+          b.parentNode.removeChild(b);
+        }
+      }
+    }
+    function load() {
+      fetch('/__wf-comment-counts.json', { cache: 'no-store', credentials: 'include' })
+        .then(function (r) { return r.ok ? r.json() : null; })
+        .then(function (d) { if (d && d.counts) { counts = d.counts; apply(); } })
+        .catch(function () {});
+    }
+    function start() {
+      styleOnce();
+      load();
+      var pend = null;
+      new MutationObserver(function () {
+        if (pend) return;
+        pend = setTimeout(function () { pend = null; apply(); }, 150);
+      }).observe(document.body, { childList: true, subtree: true });
+      setInterval(load, 30000);          // pick up new/resolved comments
+      window.addEventListener('focus', load);
+    }
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
+    else start();
+  })();
+</script>