@yemi33/minions 0.1.2144 → 0.1.2145

package/dashboard/slim/js/history.js

@@ -1,31 +1,18 @@
   // Completions Card helpers (W-betterHistory) — see the CSS block of the
   // same name in dashboard/slim.html for the component layout reference.
   // ─────────────────────────────────────────────────
-  // The type chip is a single emoji glyph. Map covers every value the
-  // engine can emit (14 WORK_TYPE constants + the synthetic 'qa-validate'
-  // routed via routing.md). Unknown types fall back to a generic marker
-  // and still get the raw type name in the hover tooltip.
-  var COMPLETION_TYPE_EMOJI = {
-    'implement':       '🔧',
-    'implement:large': '🛠️',
-    'fix':             '🐛',
-    'review':          '👀',
-    'verify':          '✅',
-    'test':            '🧪',
-    'plan':            '📋',
-    'plan-to-prd':     '📐',
-    'decompose':       '🪓',
-    'meeting':         '💬',
-    'explore':         '🔍',
-    'ask':             '❓',
-    'docs':            '📝',
-    'setup':           '⚙️',
-    'qa-validate':     '🎯',
+  // The type chip renders a monochrome Fluent System Icon via CSS mask (see the
+  // .completions-card-type-chip[data-type="…"] rules in styles.css), keyed on
+  // the WORK_TYPE constant. This set lists every type that HAS an icon (14
+  // WORK_TYPE values + the synthetic 'qa-validate' routed via routing.md);
+  // 'review' is intentionally absent — it renders a "REVIEW" word chip instead.
+  // Unknown/absent types fall back to a generic "•" text glyph and still get the
+  // raw type name in the hover tooltip.
+  var TYPE_ICON_SET = {
+    'implement': 1, 'implement:large': 1, 'fix': 1, 'verify': 1, 'test': 1,
+    'plan': 1, 'plan-to-prd': 1, 'decompose': 1, 'meeting': 1, 'explore': 1,
+    'ask': 1, 'docs': 1, 'setup': 1, 'qa-validate': 1,
   };
-  function typeEmoji(t) {
-    if (!t) return '•';
-    return COMPLETION_TYPE_EMOJI[t] || '•';
-  }
 
   // Pick the title for a completion card. Uses the dispatch description
   // (c.task) — that's what the agent was actually told to do — falling back
@@ -59,17 +46,23 @@
     return chip;
   }
 
-  // Render a single completion card (DOM node). Returns the .history-item
-  // element with attached click handlers. Used by renderHistoryFeed.
-  function renderCompletionCard(c) {
-    var status = completionStatus(c);
-    var ts = c.completed_at || c.completedAt || c.endedAt || c.started_at || c.startedAt || c._ts;
+  // Render a single history card (DOM node). Returns the .history-item
+  // element with attached click handlers. Used by renderHistoryFeed for both
+  // finished completions AND in-flight dispatches — a running dispatch is just
+  // a dispatch without a result yet, so `isActive` swaps the terminal ✓/✕ for a
+  // live ● and anchors the time on `started_at` instead of `completed_at`.
+  function renderCompletionCard(c, isActive) {
+    var status = isActive ? 'active' : completionStatus(c);
+    var ts = isActive
+      ? (c.started_at || c.created_at || c._ts)
+      : (c.completed_at || c.completedAt || c.endedAt || c.started_at || c.startedAt || c._ts);
     var title = completionTitle(c);
     var item = (c.meta && c.meta.item) || {};
     var pr = (c.meta && c.meta.pr) || null;
+    var kindClass = isActive ? 'dispatch' : (status === 'fail' ? 'failure' : 'completion');
 
     var card = document.createElement('div');
-    card.className = 'history-item completions-card kind-' + (status === 'fail' ? 'failure' : 'completion');
+    card.className = 'history-item completions-card kind-' + kindClass;
     card.setAttribute('role', 'button');
     card.setAttribute('tabindex', '0');
     card.title = title;
@@ -80,25 +73,38 @@
     rail.className = 'completions-card-rail';
     var railTop = document.createElement('div');
     railTop.className = 'completions-card-rail-top';
+    // Review cards render the word "REVIEW" as a chip (same box treatment as
+    // the WI/Plan/PR lineage chips, larger font) instead of the type emoji.
+    // Every other type keeps its single-glyph emoji.
     var chip = document.createElement('div');
-    chip.className = 'completions-card-type-chip';
-    chip.textContent = typeEmoji(c.type);
-    if (c.type) chip.title = c.type;
+    if (c.type === 'review') {
+      chip.className = 'completions-card-type-word';
+      chip.textContent = 'REVIEW';
+      chip.title = 'review';
+    } else {
+      chip.className = 'completions-card-type-chip';
+      chip.textContent = typeEmoji(c.type);
+      if (c.type) chip.title = c.type;
+    }
     railTop.appendChild(chip);
 
     var railBottom = document.createElement('div');
     railBottom.className = 'completions-card-rail-bottom';
     var icon = document.createElement('span');
     icon.className = 'completions-card-status-icon ' + status;
-    icon.textContent = status === 'ok' ? '✓' : (status === 'warn' ? '⚠' : '✕');
-    icon.title = status === 'ok' ? 'Success' : (status === 'warn' ? 'Partial' : 'Failure');
+    icon.textContent = status === 'active' ? '●' : (status === 'ok' ? '✓' : (status === 'warn' ? '⚠' : '✕'));
+    icon.title = status === 'active' ? 'Running' : (status === 'ok' ? 'Success' : (status === 'warn' ? 'Partial' : 'Failure'));
     var sep = document.createElement('span');
     sep.className = 'completions-card-rail-sep';
     sep.textContent = '·';
     sep.setAttribute('aria-hidden', 'true');
     var when = document.createElement('span');
     when.className = 'completions-card-time';
-    when.textContent = ts ? relTime(ts) : '';
+    // Active dispatches read as "running 5m" (elapsed since start); finished
+    // rows read as "5m ago" (relative to completion). Both reuse relTime.
+    when.textContent = ts
+      ? (status === 'active' ? 'running ' + relTime(ts).replace(' ago', '') : relTime(ts))
+      : '';
     if (ts) when.title = new Date(ts).toLocaleString();
     railBottom.appendChild(icon);
     railBottom.appendChild(sep);
@@ -115,6 +121,16 @@
     titleEl.textContent = title;
     bodyTop.appendChild(titleEl);
 
+    // Byline — which team member ran it (name · role). Present on every row so
+    // the feed answers "who did this" at a glance, not just "what / result".
+    var who = c.agentName || c.agent;
+    if (who) {
+      var byline = document.createElement('div');
+      byline.className = 'completions-card-byline';
+      byline.textContent = c.agentRole ? who + ' · ' + c.agentRole : who;
+      bodyTop.appendChild(byline);
+    }
+
     if (status === 'fail' && (c.failureClass || c.reason)) {
       var failLine = document.createElement('div');
       failLine.className = 'completions-card-fail-line';
@@ -310,20 +326,97 @@
   // Bind completions-modal close handlers once (shared helper above).
   bindModalClose('slim-completions-modal', 'slim-completions-close');
 
+  // Render a PR as a meta-rail card matching the dispatch/completion shape:
+  // a "PR" word chip in the rail (left), the title in the body, the activity
+  // time in the rail-bottom, and the PR status as a tile-chip — the SAME
+  // component the /pull-requests tile list uses — in the bottom row. The whole
+  // card is the click target (opens the PR URL); there's no separate "open"
+  // link anymore.
+  function renderPrCard(p) {
+    var num = p.prNumber || p.number || p.id;
+    var title = '#' + (num || '?') + ' — ' + (p.title || '(untitled PR)');
+    var ts = p.updatedAt || p.lastReviewedAt || p.lastBuildCheck || p._attachedAt || p.created || p.createdAt;
+    var build = p.buildStatus || '';
+    // Mirror renderPrTileBody's color logic so the chip matches the PR list:
+    // merged → green, failing build → red, active/linked → blue, else neutral.
+    var cls = p.status === 'merged' ? 'green'
+            : (build === 'failing' ? 'red'
+            : ((p.status === 'active' || p.status === 'linked') ? 'blue' : ''));
+
+    var card = document.createElement('div');
+    card.className = 'history-item completions-card kind-pr';
+    card.setAttribute('role', 'button');
+    card.setAttribute('tabindex', '0');
+    card.title = title;
+
+    var rail = document.createElement('div');
+    rail.className = 'completions-card-rail';
+    var railTop = document.createElement('div');
+    railTop.className = 'completions-card-rail-top';
+    var word = document.createElement('div');
+    word.className = 'completions-card-type-word';
+    word.textContent = 'PR';
+    word.title = 'pull request';
+    railTop.appendChild(word);
+    var railBottom = document.createElement('div');
+    railBottom.className = 'completions-card-rail-bottom';
+    var when = document.createElement('span');
+    when.className = 'completions-card-time';
+    when.textContent = ts ? relTime(ts) : '';
+    if (ts) when.title = new Date(ts).toLocaleString();
+    railBottom.appendChild(when);
+    rail.appendChild(railTop);
+    rail.appendChild(railBottom);
+
+    var bodyTop = document.createElement('div');
+    bodyTop.className = 'completions-card-body-top';
+    var titleEl = document.createElement('div');
+    titleEl.className = 'completions-card-title';
+    titleEl.textContent = title;
+    bodyTop.appendChild(titleEl);
+
+    // Status row — grid col 2, row 2 (aligns with rail-bottom). A single
+    // tile-chip, the same pill component (and color classes) as the PR list.
+    var statusRow = document.createElement('div');
+    statusRow.className = 'completions-card-pr-status';
+    var chip = document.createElement('span');
+    chip.className = 'tile-chip ' + cls;
+    chip.textContent = p.status || '—';
+    statusRow.appendChild(chip);
+
+    card.appendChild(rail);
+    card.appendChild(bodyTop);
+    card.appendChild(statusRow);
+
+    // Whole-card click (and keyboard activation) opens the PR — replaces the
+    // old inline "open" hyperlink.
+    if (p.url) {
+      var openPr = function() { window.open(p.url, '_blank', 'noopener'); };
+      card.addEventListener('click', openPr);
+      card.addEventListener('keydown', function(ev) {
+        if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); openPr(); }
+      });
+    }
+    return card;
+  }
+
   function renderHistoryFeed(input) {
     var listEl = document.getElementById('history-list');
     if (!listEl) return;
     var events = [];
 
-    // Active dispatches (blue) — at the top so users know what's running.
+    // Active dispatches (blue) — rendered with the same meta-rail card as
+    // completions (a running dispatch is just a dispatch without a result yet).
+    // Carry the raw record so the card renderer reads task/agent/lineage from
+    // the canonical field paths. NOTE: the engine stamps `started_at`
+    // (snake_case) — reading `startedAt` here is the old bug that made every
+    // dispatch show "0s ago". Sorted purely chronologically by start time.
     (input.active || []).forEach(function(d) {
-      var ts = d.startedAt || d.dispatchedAt || d.createdAt || d._ts;
+      var ts = d.started_at || d.created_at || d._ts;
       events.push({
         kind: 'dispatch',
-        kindLabel: 'Dispatch',
-        title: describeDispatch(d),
-        meta: 'started ' + relTime(ts) + (d.workItemId ? ' · ' + d.workItemId : ''),
-        ts: ts ? Date.parse(ts) || Date.now() : Date.now(),
+        raw: d,
+        ts: ts ? Date.parse(ts) || 0 : 0,
       });
     });
 
@@ -340,17 +433,18 @@
       });
     });
 
-    // PR events (amber) — shows PRs we're tracking, anchored on updatedAt.
-    // `metaUrl` carries the optional "open PR" link so the renderer can build
-    // it as a real <a> node instead of splicing raw HTML into innerHTML.
+    // PR events (amber) — shows PRs we're tracking, anchored on the most
+    // recent activity. The slim PR shape does NOT carry updatedAt/createdAt —
+    // reading those (the old code) yielded ts=0 and pinned every PR to the
+    // bottom of the feed regardless of recency. Fall through the timestamps the
+    // payload actually provides, newest-meaning first.
+    // Carry the raw PR record so renderPrCard reads its own fields (the card
+    // opens the PR on click — no inline link).
     (input.prs || []).slice(0, 6).forEach(function(p) {
-      var ts = p.updatedAt || p.createdAt;
+      var ts = p.updatedAt || p.lastReviewedAt || p.lastBuildCheck || p._attachedAt || p.created || p.createdAt;
       events.push({
         kind: 'pr',
-        kindLabel: 'PR',
-        title: '#' + (p.prNumber || p.id || '?') + ' — ' + (p.title || '(untitled PR)'),
-        meta: (p.buildStatus || 'no-build') + ' · ' + (p.reviewStatus || 'no-review'),
-        metaUrl: p.url || null,
+        raw: p,
         ts: ts ? Date.parse(ts) || 0 : 0,
       });
     });
@@ -366,48 +460,19 @@
       return;
     }
     // Build the feed as DOM nodes so SEC-03's .innerHTML ratchet stays happy
-    // (test/unit.test.js DYNAMIC_INNERHTML_BASELINE). Completion / failure
-    // events use renderCompletionCard (meta-rail layout); dispatch / PR
-    // events keep the legacy .history-head + .history-title + .history-meta
-    // shape since the user-facing redesign is scoped to completions for now.
+    // (test/unit.test.js DYNAMIC_INNERHTML_BASELINE). Every event type now
+    // renders as a meta-rail card: dispatch / completion / failure via
+    // renderCompletionCard, PRs via renderPrCard.
     var frag = document.createDocumentFragment();
     for (var i = 0; i < events.length; i++) {
       var e = events[i];
-      if ((e.kind === 'completion' || e.kind === 'failure') && e.raw) {
-        frag.appendChild(renderCompletionCard(e.raw));
-        continue;
-      }
-      var item = document.createElement('div');
-      item.className = 'history-item kind-' + e.kind;
-      var head = document.createElement('div');
-      head.className = 'history-head';
-      var kind = document.createElement('span');
-      kind.className = 'history-kind';
-      kind.textContent = e.kindLabel;
-      var when = document.createElement('span');
-      when.className = 'history-time';
-      when.textContent = e.ts ? relTime(e.ts) : '';
-      head.appendChild(kind);
-      head.appendChild(when);
-      var titleEl = document.createElement('div');
-      titleEl.className = 'history-title';
-      titleEl.textContent = e.title;
-      var metaEl = document.createElement('div');
-      metaEl.className = 'history-meta';
-      metaEl.appendChild(document.createTextNode(e.meta || ''));
-      if (e.metaUrl) {
-        metaEl.appendChild(document.createTextNode(' · '));
-        var a = document.createElement('a');
-        a.href = e.metaUrl;
-        a.target = '_blank';
-        a.rel = 'noopener';
-        a.textContent = 'open';
-        metaEl.appendChild(a);
+      if (e.kind === 'dispatch' && e.raw) {
+        frag.appendChild(renderCompletionCard(e.raw, true));
+      } else if ((e.kind === 'completion' || e.kind === 'failure') && e.raw) {
+        frag.appendChild(renderCompletionCard(e.raw, false));
+      } else if (e.kind === 'pr' && e.raw) {
+        frag.appendChild(renderPrCard(e.raw));
       }
-      item.appendChild(head);
-      item.appendChild(titleEl);
-      item.appendChild(metaEl);
-      frag.appendChild(item);
     }
     listEl.replaceChildren(frag);
   }

package/dashboard/slim/js/history.js.rej

@@ -0,0 +1,26 @@
+diff a/dashboard/slim/js/history.js b/dashboard/slim/js/history.js	(rejected hunks)
+@@ -96,7 +83,12 @@
+       chip.title = 'review';
+     } else {
+       chip.className = 'completions-card-type-chip';
+-      chip.textContent = typeEmoji(c.type);
++      // Known types → Fluent icon via CSS mask (data-type); unknown → "•" glyph.
++      if (c.type && TYPE_ICON_SET[c.type]) {
++        chip.setAttribute('data-type', c.type);
++      } else {
++        chip.textContent = '•';
++      }
+       if (c.type) chip.title = c.type;
+     }
+     railTop.appendChild(chip);
+@@ -105,7 +97,9 @@
+     railBottom.className = 'completions-card-rail-bottom';
+     var icon = document.createElement('span');
+     icon.className = 'completions-card-status-icon ' + status;
+-    icon.textContent = status === 'active' ? '●' : (status === 'ok' ? '✓' : (status === 'warn' ? '⚠' : '✕'));
++    // ok/warn/fail render as Fluent icons via the status class (CSS mask in
++    // styles.css); the live 'active' state keeps its pulsing dot.
++    if (status === 'active') icon.textContent = '●';
+     icon.title = status === 'active' ? 'Running' : (status === 'ok' ? 'Success' : (status === 'warn' ? 'Partial' : 'Failure'));
+     var sep = document.createElement('span');
+     sep.className = 'completions-card-rail-sep';

package/dashboard/slim/js/modals-tiles.js

@@ -1,7 +1,10 @@
-  function bindModalClose(modalId, closeBtnId) {
+  // onClose (optional) runs on every dismiss path — close button, backdrop
+  // click, and Esc — so callers can attach a side effect (e.g. persisting a
+  // "seen" flag for a first-visit popup) without re-wiring the listeners.
+  function bindModalClose(modalId, closeBtnId, onClose) {
     var modal = document.getElementById(modalId);
     if (!modal) return;
-    function close() { modal.classList.remove('open'); }
+    function close() { modal.classList.remove('open'); if (onClose) onClose(); }
     var closeBtn = document.getElementById(closeBtnId);
     if (closeBtn) closeBtn.addEventListener('click', close);
     modal.addEventListener('click', function(ev) { if (ev.target === modal) close(); });
@@ -123,6 +126,9 @@
   // Populate + open the cockpit-tile detail modal from the latest status
   // snapshot. Mirrors the corresponding old-dashboard tab for each tile.
   function openTileModal(key) {
+    // The Pinned-context tile has its own list/editor modal (view + edit + unpin)
+    // rather than the read-only tile detail view.
+    if (key === 'pinned') { openSlimPinnedList(); return; }
     var view = TILE_VIEWS[key];
     if (!view) return;
     var modal = document.getElementById('slim-tile-modal');

package/dashboard/slim/js/pinned.js

@@ -0,0 +1,182 @@
+  // ── Pinned context (create / view / edit / unpin) ──────────────
+  // Slim front-end over the same endpoints the classic dashboard uses:
+  //   GET (via /api/status `pinned`), POST /api/pinned (create),
+  //   POST /api/pinned/update (edit), POST /api/pinned/remove (unpin).
+  // The "Pin Content" action button and the "Pinned context" status tile
+  // both surface this. Editing reuses the atomic update endpoint.
+
+  // When non-null, the editor is editing the entry with this (original) title;
+  // null means it is creating a new pin.
+  var _pinEditOriginal = null;
+
+  function slimPinnedEntries() {
+    return (lastStatusData && Array.isArray(lastStatusData.pinned)) ? lastStatusData.pinned : [];
+  }
+
+  function pinLevelChipClass(level) {
+    return level === 'critical' ? 'red' : level === 'warning' ? 'amber' : 'blue';
+  }
+
+  // ── Editor (create + edit) ───────────────────────────────────────
+  function openSlimPinEditor(entry) {
+    _pinEditOriginal = entry ? entry.title : null;
+    var modal = document.getElementById('slim-pin-edit-modal');
+    if (!modal) return;
+    document.getElementById('slim-pin-edit-heading').textContent = entry ? 'Edit pinned content' : 'Pin content';
+    document.getElementById('slim-pin-title').value = entry ? (entry.title || '') : '';
+    document.getElementById('slim-pin-content').value = entry ? (entry.content || '') : '';
+    document.getElementById('slim-pin-level').value = (entry && entry.level) ? entry.level : 'info';
+    var msg = document.getElementById('slim-pin-msg');
+    if (msg) { msg.textContent = ''; msg.style.color = 'var(--muted)'; }
+    var submit = document.getElementById('slim-pin-submit');
+    if (submit) { submit.disabled = false; submit.textContent = entry ? 'Save' : 'Pin'; }
+    modal.classList.add('open');
+    setTimeout(function() { var t = document.getElementById('slim-pin-title'); if (t) t.focus(); }, 40);
+  }
+  function closeSlimPinEditor() {
+    var modal = document.getElementById('slim-pin-edit-modal');
+    if (modal) modal.classList.remove('open');
+  }
+
+  async function submitSlimPin() {
+    var title = (document.getElementById('slim-pin-title').value || '').trim();
+    var content = document.getElementById('slim-pin-content').value;
+    var level = document.getElementById('slim-pin-level').value;
+    var msg = document.getElementById('slim-pin-msg');
+    var submit = document.getElementById('slim-pin-submit');
+    if (!title || !content.trim()) {
+      if (msg) { msg.style.color = 'var(--red)'; msg.textContent = 'Title and content are required.'; }
+      return;
+    }
+    var editing = _pinEditOriginal != null;
+    if (submit) { submit.disabled = true; submit.textContent = editing ? 'Saving…' : 'Pinning…'; }
+    try {
+      var res;
+      if (editing) {
+        res = await fetch('/api/pinned/update', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ originalTitle: _pinEditOriginal, title: title, content: content, level: level }),
+        });
+      } else {
+        res = await fetch('/api/pinned', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ title: title, content: content, level: level }),
+        });
+      }
+      var d = await res.json().catch(function() { return {}; });
+      if (!res.ok) throw new Error(d.error || ('HTTP ' + res.status));
+      closeSlimPinEditor();
+      scheduleStatusRefresh(400);           // refresh the Pinned-context tile
+      // If the list modal is open, re-render it once the snapshot catches up.
+      setTimeout(function() {
+        var listModal = document.getElementById('slim-pinned-modal');
+        if (listModal && listModal.classList.contains('open')) renderSlimPinnedList();
+      }, 700);
+    } catch (e) {
+      if (msg) { msg.style.color = 'var(--red)'; msg.textContent = 'Error: ' + (e && e.message ? e.message : 'failed'); }
+      if (submit) { submit.disabled = false; submit.textContent = editing ? 'Save' : 'Pin'; }
+    }
+  }
+
+  // ── List / view / unpin ──────────────────────────────────────────
+  function openSlimPinnedList() {
+    var modal = document.getElementById('slim-pinned-modal');
+    if (!modal) return;
+    renderSlimPinnedList();
+    modal.classList.add('open');
+  }
+  function closeSlimPinnedList() {
+    var modal = document.getElementById('slim-pinned-modal');
+    if (modal) modal.classList.remove('open');
+  }
+
+  function renderSlimPinnedList() {
+    var body = document.getElementById('slim-pinned-body');
+    if (!body) return;
+    var entries = slimPinnedEntries();
+    body.textContent = '';
+    if (!entries.length) {
+      var empty = document.createElement('div');
+      empty.className = 'tile-empty';
+      empty.textContent = 'Nothing pinned. Pin context all agents should read first.';
+      body.appendChild(empty);
+      return;
+    }
+    entries.forEach(function(entry) {
+      var card = document.createElement('div');
+      card.className = 'pinned-row';
+
+      var top = document.createElement('div');
+      top.className = 'pinned-row-top';
+      var titleEl = document.createElement('span');
+      titleEl.className = 'pinned-row-title';
+      titleEl.textContent = entry.title || '(untitled)';
+      titleEl.title = entry.title || '';
+      top.appendChild(titleEl);
+      var chip = document.createElement('span');
+      chip.className = 'tile-chip ' + pinLevelChipClass(entry.level);
+      chip.textContent = entry.level || 'info';
+      top.appendChild(chip);
+      card.appendChild(top);
+
+      var preview = document.createElement('div');
+      preview.className = 'pinned-row-preview';
+      var text = String(entry.content || '');
+      preview.textContent = text.length > 220 ? text.slice(0, 220) + '…' : text;
+      card.appendChild(preview);
+
+      var actions = document.createElement('div');
+      actions.className = 'pinned-row-actions';
+      var editBtn = document.createElement('button');
+      editBtn.className = 'btn-secondary';
+      editBtn.type = 'button';
+      editBtn.textContent = 'Edit';
+      editBtn.addEventListener('click', function() { openSlimPinEditor(entry); });
+      var unpinBtn = document.createElement('button');
+      unpinBtn.className = 'btn-secondary pinned-row-unpin';
+      unpinBtn.type = 'button';
+      unpinBtn.textContent = 'Unpin';
+      unpinBtn.addEventListener('click', function() { removeSlimPin(entry.title); });
+      actions.appendChild(editBtn);
+      actions.appendChild(unpinBtn);
+      card.appendChild(actions);
+
+      body.appendChild(card);
+    });
+  }
+
+  async function removeSlimPin(title) {
+    if (!title) return;
+    if (!confirm('Unpin "' + title + '"?')) return;
+    try {
+      var res = await fetch('/api/pinned/remove', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title: title }),
+      });
+      if (!res.ok) { var d = await res.json().catch(function() { return {}; }); throw new Error(d.error || ('HTTP ' + res.status)); }
+      // Optimistically drop it from the cached snapshot so the list + tile update
+      // before the next poll, then reconcile.
+      if (lastStatusData && Array.isArray(lastStatusData.pinned)) {
+        lastStatusData.pinned = lastStatusData.pinned.filter(function(e) { return e.title !== title; });
+      }
+      renderSlimPinnedList();
+      scheduleStatusRefresh(400);
+    } catch (e) {
+      alert('Unpin failed: ' + (e && e.message ? e.message : e));
+    }
+  }
+
+  bindModalClose('slim-pinned-modal', 'slim-pinned-close');
+  bindModalClose('slim-pin-edit-modal', 'slim-pin-edit-close');
+  (function bindPinnedUi() {
+    var pinBtn = document.getElementById('slim-pin-btn');
+    if (pinBtn) pinBtn.addEventListener('click', function() { openSlimPinEditor(null); });
+    var addBtn = document.getElementById('slim-pinned-add');
+    if (addBtn) addBtn.addEventListener('click', function() { openSlimPinEditor(null); });
+    var tileChip = document.getElementById('slim-tile-pin-chip');
+    if (tileChip) tileChip.addEventListener('click', function(ev) { ev.stopPropagation(); openSlimPinEditor(null); });
+    var cancel = document.getElementById('slim-pin-cancel');
+    if (cancel) cancel.addEventListener('click', closeSlimPinEditor);
+    var submit = document.getElementById('slim-pin-submit');
+    if (submit) submit.addEventListener('click', submitSlimPin);
+  })();