@hanzlaa/rcode 4.1.1 → 4.3.0

package/server/lib/html/client/components/RejectDialog.js

@@ -0,0 +1,78 @@
+/**
+ * RejectDialog — structured rejection dialog for waiting checkpoint sessions.
+ *
+ * Props:
+ *   session  — OrchCard session object ({ storyId, phase?, ... })
+ *   onClose  — callback invoked on cancel, backdrop click, Escape, or after
+ *              a successful submission.
+ *
+ * Rules:
+ *   - Submit button is disabled until a non-empty reason is typed (GATE-1).
+ *   - Uses showToast() for post-submit feedback; browser dialogs are forbidden.
+ *   - All visuals are driven by CSS classes (no style attribute).
+ */
+
+import { html, useState, useEffect } from '../preact.js';
+import { submitRejection } from '../orchestrator.js';
+import { showToast } from './shared.js';
+
+export function RejectDialog({ session, onClose }) {
+  const [reason, setReason] = useState('');
+  const [busy, setBusy]     = useState(false);
+
+  const trimmed = reason.trim();
+  const disabled = !trimmed || busy;
+
+  // Escape-to-close
+  useEffect(() => {
+    function handleKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [onClose]);
+
+  function handleSubmit() {
+    if (disabled) return;
+    setBusy(true);
+    submitRejection(session.storyId, trimmed, session.phase || null)
+      .then(d => {
+        if (d && d.ok) {
+          showToast('Rejection recorded');
+          onClose();
+        } else {
+          showToast('Reject failed: ' + ((d && d.error) || 'unknown'));
+          setBusy(false);
+        }
+      })
+      .catch(() => {
+        showToast('Could not reach orchestrator');
+        setBusy(false);
+      });
+  }
+
+  return html`
+    <div class="reject-overlay" onClick=${onClose}>
+      <div class="reject-dialog" onClick=${e => e.stopPropagation()}>
+        <div class="reject-dialog-title">
+          Reject checkpoint — ${session.storyId}
+        </div>
+        <textarea
+          class="reject-dialog-input"
+          placeholder="Why is this checkpoint being rejected? (required)"
+          value=${reason}
+          onInput=${e => setReason(e.target.value)}
+          autofocus
+        ></textarea>
+        <div class="reject-dialog-actions">
+          <button class="reject-cancel" onClick=${onClose}>Cancel</button>
+          <button
+            class="reject-submit"
+            disabled=${disabled}
+            onClick=${handleSubmit}
+          >${busy ? 'Recording…' : 'Submit rejection'}</button>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/server/lib/html/client/components/RunnerPicker.js

@@ -0,0 +1,190 @@
+/**
+ * RunnerPicker — anchored popover for choosing which agent CLI + model a
+ * Run button launches.
+ *
+ * One instance is mounted in App.js; every Run button opens it via
+ * openRunnerPicker(anchorEl, run). State lives in store.runnerPicker:
+ *   { open, x, y, run: { kind: 'session'|'command', storyId?, cmd, title? } }
+ *
+ * kind 'session' → runAndOpenTerm(storyId, cmd, title, { runner, model })
+ * kind 'command' → runCommandFromUI(cmd, { runner, model })
+ *
+ * Runner list comes from GET /api/runners (fetchRunners, cached). Runners are
+ * rendered as an option list (not a <select>) so each row can carry a "Beta"
+ * pill (every CLI except claude) and unavailable ones can show their server-
+ * reported reason ('not installed' / 'untested flags') as a disabled tooltip.
+ * A runner with an empty models[] gets no model dropdown at all. The last
+ * confirmed runner + model are remembered in localStorage and preselected.
+ * Esc and click-outside close the popover. The server re-validates runner
+ * and model on POST /api/run — this UI is convenience, not the boundary.
+ *
+ * Positioning uses CSS custom properties (--rp-x/--rp-y) set via the element
+ * ref, never an inline style attribute; the popover clamps to the viewport.
+ */
+
+import { html, useState, useEffect, useRef } from '../preact.js';
+import { useStore, setState } from '../store.js';
+import { fetchRunners, runAndOpenTerm, runCommandFromUI } from '../orchestrator.js';
+
+const PREF_KEY = 'majlis-runner-pref';
+
+function loadPref() {
+  try { return JSON.parse(localStorage.getItem(PREF_KEY)) || {}; } catch { return {}; }
+}
+
+function savePref(runner, model) {
+  try { localStorage.setItem(PREF_KEY, JSON.stringify({ runner, model })); } catch { /* private mode */ }
+}
+
+/**
+ * Open the picker anchored under anchorEl.
+ * @param {Element} anchorEl — the clicked Run button
+ * @param {{ kind: 'session'|'command', storyId?: string, cmd: string, title?: string }} run
+ */
+export function openRunnerPicker(anchorEl, run) {
+  const r = anchorEl && anchorEl.getBoundingClientRect
+    ? anchorEl.getBoundingClientRect()
+    : { left: 24, bottom: 24 };
+  setState({
+    runnerPicker: { open: true, x: Math.round(r.left), y: Math.round(r.bottom + 6), run },
+  });
+}
+
+export function closeRunnerPicker() {
+  setState({ runnerPicker: null });
+}
+
+/** Preselect the remembered runner/model when valid, else claude, else the first installed CLI. */
+function initialSelection(runners) {
+  const pref  = loadPref();
+  const valid = id => runners.some(r => r.id === id && r.available);
+  const runnerId = valid(pref.runner) ? pref.runner
+    : valid('claude') ? 'claude'
+    : (runners.find(r => r.available) || {}).id || '';
+  const entry = runners.find(r => r.id === runnerId);
+  const model = (entry && pref.runner === runnerId && entry.models.includes(pref.model))
+    ? pref.model : '';
+  return { runnerId, model };
+}
+
+export function RunnerPicker() {
+  const picker = useStore(s => s.runnerPicker);
+  const open   = !!(picker && picker.open);
+
+  const [runners,  setRunners ] = useState(null); // null = loading, [] = unreachable
+  const [runnerId, setRunnerId] = useState('');
+  const [model,    setModel   ] = useState('');
+  const ref = useRef(null);
+
+  // Load the runner list and (re)apply the remembered selection on each open.
+  useEffect(() => {
+    if (!open) return;
+    let alive = true;
+    fetchRunners().then(list => {
+      if (!alive) return;
+      setRunners(list);
+      const sel = initialSelection(list);
+      setRunnerId(sel.runnerId);
+      setModel(sel.model);
+    });
+    return () => { alive = false; };
+  }, [open]);
+
+  // Esc / click-outside close. mousedown fires after the opening click's
+  // event cycle, so the click that opened the picker never closes it.
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e)  { if (e.key === 'Escape') closeRunnerPicker(); }
+    function onDown(e) {
+      if (ref.current && !ref.current.contains(e.target)) closeRunnerPicker();
+    }
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('mousedown', onDown);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('mousedown', onDown);
+    };
+  }, [open]);
+
+  // Anchor below the Run button, clamped to the viewport. CSS vars (not an
+  // inline style attribute) carry the coordinates into the stylesheet.
+  useEffect(() => {
+    if (!open || !ref.current) return;
+    const el = ref.current;
+    const x = Math.max(8, Math.min(picker.x, window.innerWidth  - el.offsetWidth  - 8));
+    const y = Math.max(8, Math.min(picker.y, window.innerHeight - el.offsetHeight - 8));
+    el.style.setProperty('--rp-x', x + 'px');
+    el.style.setProperty('--rp-y', y + 'px');
+  }, [open, picker, runners]);
+
+  if (!open) return null;
+
+  const entry  = (runners || []).find(r => r.id === runnerId) || null;
+  const models = (entry && entry.models) || [];
+
+  function handleRunnerSelect(id) {
+    setRunnerId(id);
+    setModel(''); // model lists differ per runner — reset to CLI default
+  }
+
+  function handleRun() {
+    const run = picker.run || {};
+    savePref(runnerId, model);
+    closeRunnerPicker();
+    const opts = { runner: runnerId, model };
+    if (run.kind === 'command') {
+      runCommandFromUI(run.cmd, opts);
+    } else {
+      runAndOpenTerm(run.storyId, run.cmd, run.title || run.storyId, opts);
+    }
+  }
+
+  return html`
+    <div class="runner-picker" ref=${ref} role="dialog" aria-label="Choose runner and model"
+      onClick=${e => e.stopPropagation()}>
+      <div class="runner-picker-title">
+        Run ${(picker.run && picker.run.title) || ''}
+      </div>
+      ${runners === null ? html`
+        <div class="runner-picker-hint">Detecting installed CLIs…</div>
+      ` : runners.length === 0 ? html`
+        <div class="runner-picker-hint">Orchestrator unreachable — cannot list runners.</div>
+      ` : html`
+        <div class="runner-picker-field">
+          <span class="runner-picker-label" id="runner-picker-cli-label">Agent CLI</span>
+          <div class="runner-picker-list" role="listbox" aria-labelledby="runner-picker-cli-label">
+            ${runners.map(r => html`
+              <button key=${r.id} type="button" role="option"
+                aria-selected=${r.id === runnerId}
+                class=${'runner-picker-option' + (r.id === runnerId ? ' selected' : '')}
+                disabled=${!r.available}
+                title=${r.available ? r.label : (r.reason || 'not installed')}
+                onClick=${() => handleRunnerSelect(r.id)}>
+                <span class="runner-picker-option-label">${r.label}</span>
+                ${r.beta ? html`<span class="runner-beta-pill">Beta</span>` : null}
+                ${!r.available ? html`
+                  <span class="runner-picker-option-hint">${r.reason || 'not installed'}</span>
+                ` : null}
+              </button>
+            `)}
+          </div>
+        </div>
+        ${models.length ? html`
+          <label class="runner-picker-field">
+            <span class="runner-picker-label">Model</span>
+            <select class="runner-picker-select" value=${model}
+              onChange=${e => setModel(e.target.value)}>
+              <option value="">default</option>
+              ${models.map(m => html`<option key=${m} value=${m}>${m}</option>`)}
+            </select>
+          </label>
+        ` : null}
+      `}
+      <div class="runner-picker-actions">
+        <button class="runner-picker-btn" onClick=${closeRunnerPicker}>Cancel</button>
+        <button class="runner-picker-btn runner-picker-btn--run"
+          disabled=${!runnerId} onClick=${handleRun}>▶ Run</button>
+      </div>
+    </div>
+  `;
+}

package/server/lib/html/client/components/Sidebar.js

@@ -1,86 +1,131 @@
 /**
- * Sidebar component — project label, nav sections, 12 nav-link buttons.
+ * Sidebar component — redesigned chrome to match the mockup.
  *
- * Reuses existing CSS classes from css.js: sidebar, nav-section, nav-link,
- * data-view, active. Emoji replaced with SVG icons from icons-client.js.
+ * Public API is UNCHANGED — App.js still calls:
+ *   <${Sidebar} activeView=${view} projectName=${storeState.projectName} />
+ *
+ * Layout (top → bottom):
+ *   1. rcode logo badge
+ *   2. project switcher (shows project.name)
+ *   3. vertical nav with per-item icons (Overview active by default)
+ *   4. Project Health mini-card (ProjectHealth.js)
+ *   5. user profile footer (avatar initials + name + email)
+ *
+ * Reads `project { name, user { name, email } }` from the store; falls back to
+ * the projectName prop. No sample data — when no user is configured the
+ * profile footer is hidden, and a missing project name shows "No project".
+ * No inline style= attributes — all styling via .sb-* classes in css.js.
  */
 
 import { html } from '../preact.js';
 import { Icon } from '../icons-client.js';
 import { useStore } from '../store.js';
-import { allSprints, allTasks } from '../util.js';
-import { AGENTS } from '../agents-data.js';
+import { ProjectHealth } from './dashboard/ProjectHealth.js';
 
-// Nav structure: [ { section, links: [ { view, icon, label } ] } ]
-const NAV_SECTIONS = [
-  {
-    section: 'Overview',
-    links: [
-      { view: 'overview',      icon: 'home',        label: 'Overview'      },
-      { view: 'orchestration', icon: 'activity',    label: 'Orchestration' },
-      { view: 'roadmap',       icon: 'map',         label: 'Roadmap'       },
-    ],
-  },
-  {
-    section: 'Planning',
-    links: [
-      { view: 'milestones', icon: 'target',      label: 'Milestones' },
-      { view: 'phases',     icon: 'layers',      label: 'Phases'     },
-      { view: 'sprints',    icon: 'zap',         label: 'Sprints'    },
-      { view: 'tasks',      icon: 'checkSquare', label: 'Tasks'      },
-      { view: 'kanban',     icon: 'kanban',      label: 'Kanban'     },
-    ],
-  },
-  {
-    section: 'Workspace',
-    links: [
-      { view: 'files',     icon: 'file',     label: 'Files'     },
-      { view: 'agents',    icon: 'users',    label: 'Agents'    },
-      { view: 'decisions', icon: 'scale',    label: 'Decisions' },
-      { view: 'memory',    icon: 'database', label: 'Memory'    },
-    ],
-  },
+// Single flat nav — one entry per real Preact view (PREACT_VIEWS in App.js).
+// Keep this list in sync with App.js: a view key absent there silently
+// falls back to Overview, so never add a link without a matching view.
+const NAV_LINKS = [
+  { view: 'overview',      icon: 'home',        label: 'Overview'      },
+  { view: 'roadmap',       icon: 'map',         label: 'Roadmap'       },
+  { view: 'milestones',    icon: 'flag',        label: 'Milestones'    },
+  { view: 'phases',        icon: 'layers',      label: 'Phases'        },
+  { view: 'sprints',       icon: 'zap',         label: 'Sprints'       },
+  { view: 'tasks',         icon: 'checkSquare', label: 'Tasks'         },
+  { view: 'kanban',        icon: 'kanban',      label: 'Kanban'        },
+  { view: 'decisions',     icon: 'scale',       label: 'Decisions'     },
+  { view: 'files',         icon: 'file-text',   label: 'Files'         },
+  { view: 'agents',        icon: 'users',       label: 'Agents'        },
+  { view: 'memory',        icon: 'brain',       label: 'Memory'        },
+  { view: 'orchestration', icon: 'terminal',    label: 'Orchestration' },
 ];
 
+/** Two-letter initials from a display name. */
+function initials(name) {
+  const parts = String(name || '').trim().split(/\s+/).filter(Boolean);
+  if (!parts.length) return '?';
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
 /**
  * Sidebar component.
  *
  * Props:
- *   activeView  {string}  — currently active view key
- *   projectName {string}  — displayed under the "rcode" label
+ *   activeView  {string}  — currently active view key (drives nav highlight)
+ *   projectName {string}  — fallback project name when store has no project slice
  */
 export function Sidebar({ activeView, projectName }) {
-  const S = useStore();
-  const counts = {
-    phases:    (S.phases || []).length,
-    sprints:   allSprints(S.phases).length,
-    tasks:     allTasks(S.phases).length,
-    decisions: (S.decisions || []).length,
-    agents:    AGENTS.length,
-  };
+  // Slice subscription — Sidebar only re-renders when the project slice
+  // changes, not on every refreshing/sessions tick.
+  const project = useStore(s => s.project) || {};
+  const name = project.name || projectName || 'No project';
+  const user = (project.user && project.user.name) ? project.user : null;
+
+  // Full store subscription for live health badge counts.
+  // Re-renders on every setState (sessions poll every 4 s, state refresh every 30 s).
+  const { activeSessions, blockers } = useStore();
+  const sessionCount = (activeSessions || []).filter(s => s.status === 'running').length;
+  const blockerCount = (blockers || []).length;
 
   return html`
     <aside class="sidebar" id="sidebar">
-      <div class="sidebar-project">
-        <div class="project-label">rcode</div>
-        <span>${projectName || ''}</span>
+      <div class="sb-logo">
+        <span class="sb-logo-badge">r</span>
+        <span class="sb-logo-word">rcode</span>
+      </div>
+
+      <!-- Visually inert: the server scans exactly one project, so there is
+           no switcher menu. Rendered as a plain label, no chevron/affordance. -->
+      <div class="sb-switcher sb-switcher--static" title=${name}>
+        <span class="sb-switcher-dot"></span>
+        <span class="sb-switcher-name">${name}</span>
       </div>
-      <nav>
-        ${NAV_SECTIONS.map(({ section, links }) => html`
-          <div class="nav-section">${section}</div>
-          ${links.map(({ view, icon, label }) => html`
-            <button
-              class=${'nav-link' + (activeView === view ? ' active' : '')}
-              data-view=${view}
-              onClick=${() => { location.hash = view; }}
-            >
-              <${Icon} name=${icon} size=${14} />
-              ${' ' + label}
-              ${counts[view] ? html`<span class="nav-count">${counts[view]}</span>` : null}
-            </button>
-          `)}
+
+      <div class="sidebar-health">
+        <span
+          class=${'health-badge' + (sessionCount === 0 ? ' health-badge--zero' : '')}
+          title=${sessionCount + ' active orchestration session' + (sessionCount === 1 ? '' : 's')}
+        >
+          <${Icon} name="activity" size=${12} />
+          ${sessionCount} active
+        </span>
+        <span
+          class=${'health-badge' + (blockerCount > 0 ? ' health-badge--alert' : ' health-badge--zero')}
+          title=${blockerCount + ' blocker' + (blockerCount === 1 ? '' : 's')}
+        >
+          <${Icon} name="alert-triangle" size=${12} />
+          ${blockerCount} blocked
+        </span>
+      </div>
+
+      <nav class="sb-nav">
+        ${NAV_LINKS.map(({ view, icon, label }) => html`
+          <button
+            class=${'sb-nav-link' + (activeView === view ? ' active' : '')}
+            data-view=${view}
+            aria-current=${activeView === view ? 'page' : undefined}
+            onClick=${() => { location.hash = view; }}
+          >
+            <span class="sb-nav-ic"><${Icon} name=${icon} size=${16} /></span>
+            <span class="sb-nav-label">${label}</span>
+          </button>
         `)}
       </nav>
+
+      <div class="sb-health">
+        <${ProjectHealth} />
+      </div>
+
+      ${user ? html`
+        <div class="sb-profile">
+          <span class="sb-avatar">${initials(user.name)}</span>
+          <span class="sb-profile-meta">
+            <span class="sb-profile-name">${user.name}</span>
+            <span class="sb-profile-email">${user.email || ''}</span>
+          </span>
+        </div>
+      ` : null}
     </aside>
   `;
 }

package/server/lib/html/client/components/StatusSummaryBar.js

@@ -0,0 +1,76 @@
+/**
+ * StatusSummaryBar — aggregate count chips for phases, sprints, and sessions
+ * grouped by status. Reads from the shared store; renders a flex row of
+ * labelled count chips.
+ *
+ * No props required — all data comes from useStore().
+ * Rendered above views in 34.2 once wired into App.js.
+ */
+
+import { html } from '../preact.js';
+import { useStore } from '../store.js';
+import { allSprints, chip } from '../util.js';
+
+/**
+ * Build a `{ [cls]: count }` map from an array of items by normalising each
+ * item's status through `chip()` and incrementing the corresponding cls bucket.
+ *
+ * @param {Array<{ status: string }>} items
+ * @returns {Object.<string, number>}
+ */
+function countByStatus(items) {
+  const map = {};
+  for (const item of items) {
+    const { cls } = chip(item.status || '');
+    map[cls] = (map[cls] || 0) + 1;
+  }
+  return map;
+}
+
+/**
+ * Render a single group of count chips.
+ *
+ * @param {{ label: string, counts: Object.<string, number> }} props
+ */
+function SummaryGroup({ label, counts }) {
+  const entries = Object.entries(counts).filter(([, n]) => n > 0);
+  if (entries.length === 0) return null;
+  return html`
+    <div class="summary-group">
+      <span class="summary-group-label">${label}</span>
+      ${entries.map(([cls, count]) => html`
+        <span class=${'summary-count-chip ' + cls}>${count} ${cls}</span>
+      `)}
+    </div>
+  `;
+}
+
+/**
+ * StatusSummaryBar — row of count chips for phases, sprints, and sessions.
+ * Suppresses a group entirely when its source array is empty.
+ */
+export function StatusSummaryBar() {
+  const S = useStore();
+
+  const phases   = S.phases || [];
+  const sprints  = allSprints(phases);
+  const sessions = S.activeSessions || [];
+
+  const phaseCounts   = countByStatus(phases);
+  const sprintCounts  = countByStatus(sprints);
+  const sessionCounts = countByStatus(sessions);
+
+  const hasPhases   = phases.length > 0;
+  const hasSprints  = sprints.length > 0;
+  const hasSessions = sessions.length > 0;
+
+  if (!hasPhases && !hasSprints && !hasSessions) return null;
+
+  return html`
+    <div class="summary-bar">
+      ${hasPhases   ? html`<${SummaryGroup} label="Phases"   counts=${phaseCounts}   />` : null}
+      ${hasSprints  ? html`<${SummaryGroup} label="Sprints"  counts=${sprintCounts}  />` : null}
+      ${hasSessions ? html`<${SummaryGroup} label="Sessions" counts=${sessionCounts} />` : null}
+    </div>
+  `;
+}

package/server/lib/html/client/components/TaskPipeline.js

@@ -0,0 +1,83 @@
+/**
+ * TaskPipeline — compact horizontal stage stepper for a single task.
+ *
+ * Stages derive from the rcode story lifecycle as seen by the scanner
+ * (todo/planned → in_progress/active → review/verify → done/completed):
+ *   Planned → In Progress → Review → Done.
+ * "blocked" is not a stage — it pins the stepper at In Progress and adds
+ * a red "Blocked" badge (and a red ring on the current node).
+ *
+ * Tolerant of sparse data: a bare status string is enough; overview
+ * `tasks.inProgress` rows have only { title, pct }, so pct is used as a
+ * fallback. Unknown/missing status renders as Planned — never crashes.
+ *
+ * Props:
+ *   task    — { status?, pct?, title? } (anything else ignored)
+ *   mini    — smaller variant for overview card rows
+ *   running — a live orchestrator session exists for this task; pins the
+ *             stepper at In Progress (unless further along) and pulses the
+ *             current node so live work is visible at a glance
+ */
+
+import { html } from '../preact.js';
+
+const STAGES = ['Planned', 'In Progress', 'Review', 'Done'];
+
+/** Current stage index (0–3) for a task; 3 means fully done. */
+export function taskStageIndex(task) {
+  const s = String((task && task.status) || '').toLowerCase();
+  if (/done|complete|shipped/.test(s)) return 3;
+  if (/review|verif|uat/.test(s)) return 2;
+  if (/active|progress|running|blocked/.test(s)) return 1;
+  if (!s && task && Number.isFinite(task.pct)) {
+    return task.pct >= 100 ? 3 : task.pct > 0 ? 1 : 0;
+  }
+  return 0;
+}
+
+export function TaskPipeline({ task, mini, running }) {
+  const t = task || {};
+  // A live session means work is happening NOW — never show it as Planned,
+  // but don't demote a task already at Review/Done.
+  const cur = running ? Math.max(taskStageIndex(t), 1) : taskStageIndex(t);
+  const blocked = /blocked/i.test(String(t.status || ''));
+  // Number of fully-completed stages. When the task is done the Done node
+  // itself is filled, so all four count as complete.
+  const doneCount = cur === 3 ? 4 : cur;
+
+  const parts = [];
+  STAGES.forEach((label, i) => {
+    if (i > 0) {
+      const lineDone = i <= doneCount;
+      parts.push(html`
+        <span key=${'l' + i} class=${'tpipe-line' + (lineDone ? ' tpipe-line--done' : '')}></span>
+      `);
+    }
+    const isDone = i < doneCount;
+    const isCurrent = !isDone && i === cur;
+    let cls = 'tpipe-node';
+    let state = 'upcoming';
+    if (isDone) { cls += ' tpipe-node--done'; state = 'complete'; }
+    else if (isCurrent) {
+      cls += blocked ? ' tpipe-node--current tpipe-node--blocked' : ' tpipe-node--current';
+      if (running && !blocked && cur < 3) cls += ' tpipe-node--live';
+      state = blocked ? 'blocked' : 'current';
+    }
+    parts.push(html`
+      <span key=${'n' + i} class=${cls} title=${label + ' · ' + state}>
+        ${isDone ? '✓' : ''}
+      </span>
+    `);
+  });
+
+  const summary = blocked
+    ? 'Pipeline: blocked at ' + STAGES[cur]
+    : 'Pipeline: ' + (cur === 3 ? 'Done' : STAGES[cur]) + ' (stage ' + (Math.min(cur, 3) + 1) + ' of 4)';
+
+  return html`
+    <span class=${'tpipe' + (mini ? ' tpipe--mini' : '')} role="img" aria-label=${summary}>
+      ${parts}
+      ${blocked ? html`<span class="tpipe-blocked">Blocked</span>` : null}
+    </span>
+  `;
+}