PAP-75: add All Projects page chip mapping to status-colours mockup (rev 17)

Map the approved brand chip system onto all 5 PROJECT_STATUSES (backlog/gray,
planned/amber, in_progress/blue=liveness, completed/green, cancelled/gray) plus
paused/archived overlays, with current-vs-suggested tables and a sample All
Projects list in light + dark. Planning only.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
scotttongandPaperclip committed 2026-06-05 17:09:41 -07:00
1 parent f11b6a5075
commit 3449965d4f
2 files changed
+417

No files matched your search

+1
View File
@@ -0,0 +1 @@
.herenow/
+416
View File
@@ -0,0 +1,416 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PAP-75 — Agents + Project status colours (rev 17)</title>
<style>
/* Brand pill tokens (paperclip.ing brand.css .task-chip + dark overrides).
Chips carry a 1px border and differ light vs dark. Classes are colour-named. */
.light{
--bg:#FFFFFF; --surface:#F0ECE7; --text:#0A0A0A; --text-2:#52585D; --muted:#A8AEB2; --rule:#E0DCD6;
--d-gray:#A8AEB2; --d-blue:#2563EB; --d-amber:#F59E0B; --d-red:#DC2626; --d-green:#22C55E; --d-violet:#7C3AED;
--c-blue-bg:#DBEAFE; --c-blue-fg:#1D4ED8; --c-blue-bd:#2563EB;
--c-amber-bg:#FEF3C7; --c-amber-fg:#B45309; --c-amber-bd:#F59E0B;
--c-green-bg:#DCFCE7; --c-green-fg:#188A3C; --c-green-bd:#22C55E;
--c-violet-bg:#EDE9FE;--c-violet-fg:#5B21B6;--c-violet-bd:#7C3AED;
--c-red-bg:#FEE2E2; --c-red-fg:#991B1B; --c-red-bd:#DC2626;
--c-gray-bg:#F5F3F0; --c-gray-fg:#52585D; --c-gray-bd:#A8AEB2;
--ring-cyan:#0891B2; --ring-amber:#D97706; --ring-red:#DC2626;
}
.dark{
--bg:#141413; --surface:#1F1D1A; --text:#F3E6C4; --text-2:#9A958A; --muted:#6E6960; --rule:#2F2C28;
--d-gray:#6E6960; --d-blue:#2563EB; --d-amber:#F59E0B; --d-red:#DC2626; --d-green:#22C55E; --d-violet:#7C3AED;
--c-blue-bg:#2563eb2e; --c-blue-fg:#2563EB; --c-blue-bd:#2563eb73;
--c-amber-bg:#f59e0b24; --c-amber-fg:#F59E0B; --c-amber-bd:#f59e0b73;
--c-green-bg:#22c55e1f; --c-green-fg:#22C55E; --c-green-bd:#22c55e73;
--c-violet-bg:#7c3aed33;--c-violet-fg:#C4B5FD;--c-violet-bd:#a78bfa80;
--c-red-bg:#dc26262e; --c-red-fg:#DC2626; --c-red-bd:#dc262673;
--c-gray-bg:#6e696024; --c-gray-fg:#9A958A; --c-gray-bd:#9e958a73;
--ring-cyan:#22D3EE; --ring-amber:#FBBF24; --ring-red:#F87171;
}
*{ box-sizing:border-box; }
body{ margin:0; padding:32px 24px 80px; font-family:-apple-system,system-ui,"Segoe UI",sans-serif; background:#4a4641; color:#111; }
.wrap{ max-width:1180px; margin:0 auto; }
.page-head{ color:#f3e6c4; margin-bottom:18px; }
.page-head h1{ font-size:22px; margin:0 0 6px; }
.page-head p{ margin:3px 0; font-size:13px; opacity:.9; line-height:1.55; }
.page-head code{ background:rgba(243,230,196,.14); padding:1px 5px; border-radius:4px; }
.principle{ display:inline-block; margin-top:8px; font-size:12px; background:rgba(37,99,235,.18); border:1px solid #2563eb73; color:#bcd2ff; padding:4px 10px; border-radius:9999px; }
.legend{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 24px; }
.lg-item{ display:flex; align-items:center; gap:8px; background:#26231f; border:1px solid #3a352f; border-radius:8px; padding:7px 11px; }
.panels{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:920px){ .panels{ grid-template-columns:1fr; } }
.panel{ background:var(--bg); color:var(--text); border-radius:10px; padding:20px; box-shadow:0 8px 30px rgba(0,0,0,.35); }
.panel-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
.agents-title{ font-size:20px; font-weight:600; margin:0 0 14px; color:var(--text); }
.list{ border:1px solid var(--rule); }
.row{ display:flex; align-items:center; gap:12px; padding:9px 16px; border-bottom:1px solid var(--rule); font-size:14px; color:var(--text); }
.row:last-child{ border-bottom:none; }
.lead{ flex:0 0 auto; display:flex; align-items:center; }
/* brand heartbeat capsule: vertical 8x16, radius 4 */
.cap{ width:8px; height:16px; border-radius:4px; display:inline-block; flex:0 0 auto; }
.cap.gray{ background:var(--d-gray);} .cap.blue{ background:var(--d-blue);} .cap.amber{ background:var(--d-amber);}
.cap.red{ background:var(--d-red);} .cap.green{ background:var(--d-green);} .cap.violet{ background:var(--d-violet);}
.cap.live{ animation:hb-pulse 1.6s ease-in-out infinite; } /* running */
.cap.blink{ animation:hb-blink 1.2s step-end infinite; } /* error */
@keyframes hb-pulse{ 0%,100%{opacity:.4;transform:scale(.85);} 50%{opacity:1;transform:scale(1);} }
@keyframes hb-blink{ 0%,49.9%{background-color:var(--d-red);} 50%,100%{background-color:var(--bg);} }
.main{ flex:1 1 auto; min-width:0; }
.name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.role{ font-size:12px; color:var(--text-2); margin-top:2px; }
.trailing{ flex:0 0 auto; display:flex; align-items:center; gap:12px; }
.meta{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--muted); }
.meta.hb{ width:40px; text-align:right; }
@media (max-width:1320px){ .meta.adapter{ display:none; } }
/* brand .task-chip — colour-named */
.chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid; border-radius:9999px; padding:4px 12px; font-size:12px; font-weight:500; white-space:nowrap; line-height:1; }
.chip svg{ width:12px; height:12px; flex-shrink:0; } .ck{ stroke:var(--bg); }
.chip.blue{ background:var(--c-blue-bg); color:var(--c-blue-fg); border-color:var(--c-blue-bd);}
.chip.amber{ background:var(--c-amber-bg); color:var(--c-amber-fg); border-color:var(--c-amber-bd);}
.chip.green{ background:var(--c-green-bg); color:var(--c-green-fg); border-color:var(--c-green-bd);}
.chip.violet{ background:var(--c-violet-bg); color:var(--c-violet-fg); border-color:var(--c-violet-bd);}
.chip.red{ background:var(--c-red-bg); color:var(--c-red-fg); border-color:var(--c-red-bd);}
.chip.gray{ background:var(--c-gray-bg); color:var(--c-gray-fg); border-color:var(--c-gray-bd);}
.btns{ display:flex; gap:4px; }
.btn{ width:24px; height:24px; border:1px solid var(--rule); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:11px; }
/* sections */
.sec{ border-radius:10px; padding:24px 28px; margin-top:30px; }
.questions{ background:#f5f3f0; } .states{ background:#fff; }
.sec h2{ font-size:18px; margin:0 0 4px; color:#0a0a0a; }
.sec h3{ font-size:14px; margin:22px 0 10px; }
.sec .sub{ margin:0 0 8px; color:#52585d; font-size:13px; line-height:1.5; max-width:900px; }
.q{ border-top:1px solid #e0dcd6; padding:18px 0; } .q:first-of-type{ border-top:none; }
.q h3{ font-size:15px; margin:0 0 4px; } .q .desc{ margin:0 0 12px; font-size:13px; color:#52585d; line-height:1.5; max-width:820px; }
.opts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:880px; }
@media (max-width:760px){ .opts{ grid-template-columns:1fr; } }
.opt{ border:1px solid #e0dcd6; border-radius:10px; overflow:hidden; background:#fff; }
.opt.recommended{ border-color:#188a3c; box-shadow:0 0 0 1px #188a3c inset; }
.opt-head{ font-size:12px; font-weight:700; padding:9px 12px; background:#ece8e2; color:#0a0a0a; display:flex; justify-content:space-between; gap:8px; }
.opt-head .rec{ color:#188a3c; font-size:11px; white-space:nowrap; }
.sample{ background:var(--bg); padding:10px 12px; } .sample + .sample{ border-top:1px solid var(--rule); }
.sample .tag{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px; }
.sample .srow{ display:flex; align-items:center; gap:10px; color:var(--text); font-size:13px; }
.sample .sname{ flex:1 1 auto; }
.st-table{ width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; color:#0a0a0a; }
.st-table th{ text-align:left; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#8a8780; font-weight:600; padding:6px 10px; border-bottom:1px solid #e0dcd6; }
.st-table td{ padding:9px 10px; border-bottom:1px solid #efece7; vertical-align:middle; }
.st-state{ font-family:ui-monospace,Menlo,monospace; font-size:12px; font-weight:600; }
.st-mean{ color:#52585d; max-width:300px; }
.cellrow{ display:flex; align-items:center; gap:8px; }
.cap-old{ width:10px; height:10px; border-radius:9999px; display:inline-block; flex:0 0 auto; }
.chip-old{ display:inline-flex; align-items:center; border-radius:9999px; padding:2px 10px; font-size:12px; font-weight:500; white-space:nowrap; line-height:1.3; border:0; }
.darkcell{ background:#141413; border-radius:8px; padding:8px 10px; display:inline-flex; }
.note{ font-size:11px; }
/* issue status icon (ring + optional dot), replicating StatusIcon.tsx */
.ring{ position:relative; display:inline-block; width:16px; height:16px; border-radius:9999px; border:2px solid; box-sizing:border-box; flex:0 0 auto; }
.ring.cyan{ border-color:var(--ring-cyan); color:var(--ring-cyan); }
.ring.amber{ border-color:var(--ring-amber); color:var(--ring-amber); }
.ring.red{ border-color:var(--ring-red); color:var(--ring-red); }
.ring .corner{ position:absolute; bottom:-2px; right:-2px; width:8px; height:8px; border-radius:9999px; background:currentColor; border:1px solid var(--bg); }
.ring .center{ position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:9999px; background:currentColor; }
/* refined status icons: ring + horizontal bar (blocked glyph) / ring + dot */
.si{ width:16px; height:16px; display:inline-block; vertical-align:middle; flex:0 0 auto; }
.si.blue{ color:#2563EB; } .si.amber{ color:#F59E0B; } .si.red{ color:#DC2626; } .si.violet{ color:#7C3AED; } .si.teal{ color:var(--ring-cyan); }
/* task-row standalone status icon (left of identifier) */
.ticon{ width:14px; height:14px; display:inline-flex; flex:0 0 auto; } .ticon svg{ width:14px; height:14px; }
.ticon.gray{ color:var(--d-gray); } .ticon.blue{ color:#2563EB; } .ticon.amber{ color:#F59E0B; } .ticon.violet{ color:#7C3AED; } .ticon.green{ color:#22C55E; } .ticon.red{ color:#DC2626; }
.idf{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--muted); margin-right:8px; }
.callout{ margin-top:22px; border:1px solid #2563EB; background:#f1f5ff; border-radius:10px; padding:16px 18px; }
.callout.teal{ border-color:#0891B2; background:#effbfd; } .callout.teal h3{ color:#0e7490; }
.callout h3{ margin:0 0 6px; color:#1D4ED8; } .callout p{ margin:0 0 8px; font-size:13px; color:#444; line-height:1.55; max-width:880px; }
</style>
</head>
<body>
<div class="wrap">
<div class="page-head">
<h1>PAP-75 · Agents + Project status colours <span style="opacity:.6;font-size:14px">(rev 17)</span></h1>
<p>Static mockup (not an app build). Indicator = brand <strong>heartbeat capsule</strong> (vertical <code>8×16</code>); chips = brand <strong><code>.task-chip</code></strong> (1px border, light vs dark). All values from <code>brand.css</code>.</p>
<p style="color:#bcd2ff"><strong>rev 17 — new:</strong> the <strong>All Projects page</strong> chip mapping (see “All Projects page — project chips” + the sample projects list below). The same approved brand chips are mapped onto all 5 <code>PROJECT_STATUSES</code> in light + dark.</p>
<span class="principle">Emerging principle: <strong>blue = liveness</strong> — actively running work is blue; queued/idle work is not.</span>
</div>
<div class="panels">
<!-- LIGHT -->
<div class="panel light">
<p class="panel-label">Light mode — #FFFFFF</p>
<div class="agents-title">Agents</div>
<div class="list">
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Hermes</div><div class="role">CEO</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Vega</div><div class="role">Engineer</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">30s</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Atlas</div><div class="role">Writer</div></span><span class="trailing"><span class="meta adapter">codex</span><span class="meta hb">4m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Nova</div><div class="role">Researcher</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1m</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Lyra</div><div class="role">Designer</div></span><span class="trailing"><span class="meta adapter">cursor</span><span class="meta hb">6m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Orion</div><div class="role">QA</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">45s</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Sol</div><div class="role">DevOps</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">8m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Juno</div><div class="role">PM</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">2m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap amber"></span></span><span class="main"><div class="name">Iris</div><div class="role">Security</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1h</span><span class="chip amber">paused</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap red blink"></span></span><span class="main"><div class="name">Kilo</div><div class="role">Analyst</div></span><span class="trailing"><span class="meta adapter">codex</span><span class="meta hb">3h</span><span class="chip red">error</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
</div>
</div>
<!-- DARK -->
<div class="panel dark">
<p class="panel-label">Dark mode — #141413</p>
<div class="agents-title">Agents</div>
<div class="list">
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Hermes</div><div class="role">CEO</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Vega</div><div class="role">Engineer</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">30s</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Atlas</div><div class="role">Writer</div></span><span class="trailing"><span class="meta adapter">codex</span><span class="meta hb">4m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Nova</div><div class="role">Researcher</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1m</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Lyra</div><div class="role">Designer</div></span><span class="trailing"><span class="meta adapter">cursor</span><span class="meta hb">6m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap blue live"></span></span><span class="main"><div class="name">Orion</div><div class="role">QA</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">45s</span><span class="chip blue">running</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Sol</div><div class="role">DevOps</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">8m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap gray"></span></span><span class="main"><div class="name">Juno</div><div class="role">PM</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">2m</span><span class="chip gray">idle</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap amber"></span></span><span class="main"><div class="name">Iris</div><div class="role">Security</div></span><span class="trailing"><span class="meta adapter">claude_local</span><span class="meta hb">1h</span><span class="chip amber">paused</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
<div class="row"><span class="lead"><span class="cap red blink"></span></span><span class="main"><div class="name">Kilo</div><div class="role">Analyst</div></span><span class="trailing"><span class="meta adapter">codex</span><span class="meta hb">3h</span><span class="chip red">error</span><span class="btns"><span class="btn">▷</span><span class="btn">⏸</span></span></span></div>
</div>
</div>
</div>
<!-- COMPREHENSIVE STATE INVENTORY -->
<div class="sec states light">
<h2>All states — today vs. suggested</h2>
<p class="sub">Every agent + task state Paperclip allows (<code>packages/shared/src/constants.ts</code>), with today’s production styling and the proposed change. Today = circular dot + borderless pill; Suggested = heartbeat capsule + bordered task-chip.</p>
<h3>Agent states — <code>AGENT_STATUSES</code> (7)</h3>
<table class="st-table">
<thead><tr><th style="width:130px">State</th><th>What it means (verified in code)</th><th style="width:210px">Today</th><th style="width:230px">Suggested</th></tr></thead>
<tbody>
<tr>
<td class="st-state">idle</td><td class="st-mean">Online, no active run — the resting/available state (DB default)</td>
<td><span class="cellrow"><span class="cap-old" style="background:#facc15"></span><span class="chip-old" style="background:#fef9c3;color:#a16207">idle</span></span></td>
<td><span class="cellrow"><span class="cap gray"></span><span class="chip gray">idle</span></span> <span class="note" style="color:#52585d">← gray “idle” (D1 updated)</span></td>
</tr>
<tr>
<td class="st-state">active</td><td class="st-mean"><strong>Dead code</strong> — never assigned to an agent; only a dashboard display alias for idle</td>
<td><span class="cellrow"><span class="cap-old" style="background:#4ade80"></span><span class="chip-old" style="background:#dcfce7;color:#15803d">active</span></span></td>
<td><span class="note" style="color:#b45309">collapse → <strong>idle</strong> (drop as a separate status)</span></td>
</tr>
<tr>
<td class="st-state">running</td><td class="st-mean">A heartbeat is executing right now (live)</td>
<td><span class="cellrow"><span class="cap-old" style="background:#22d3ee"></span><span class="chip-old" style="background:#cffafe;color:#0e7490">running</span></span></td>
<td><span class="cellrow"><span class="cap blue live"></span><span class="chip blue">running</span></span></td>
</tr>
<tr>
<td class="st-state">paused</td><td class="st-mean">Halted — <code>manual</code> / <code>budget</code> / <code>system</code> (<code>PAUSE_REASONS</code>)</td>
<td><span class="cellrow"><span class="cap-old" style="background:#facc15"></span><span class="chip-old" style="background:#ffedd5;color:#c2410c">paused</span></span></td>
<td><span class="cellrow"><span class="cap amber"></span><span class="chip amber">paused</span></span><div class="note" style="color:#188a3c;margin-top:3px">amber ✓ (D7 — gray would collide with the gray idle state)</div></td>
</tr>
<tr>
<td class="st-state">error</td><td class="st-mean"><strong>The agent itself is broken</strong> — e.g. not connected to a model and failing every task. Distinct from a task failing (you’d know it’s the agent, not the work).</td>
<td><span class="cellrow"><span class="cap-old" style="background:#f87171"></span><span class="chip-old" style="background:#fee2e2;color:#b91c1c">error</span></span></td>
<td><span class="cellrow"><span class="cap red blink"></span><span class="chip red">error</span></span><div class="note" style="color:#b91c1c;margin-top:3px">red, <strong>blinking</strong> — re-added (D5 reversed)</div></td>
</tr>
<tr>
<td class="st-state">pending_approval</td><td class="st-mean">Newly hired — awaiting hire approval</td>
<td><span class="cellrow"><span class="cap-old" style="background:#fbbf24"></span><span class="chip-old" style="background:#fef3c7;color:#b45309">pending approval</span></span></td>
<td><span class="note" style="color:#52585d">— <strong>removed from the agents list.</strong> Hiring approval happens in the <em>task thread</em>: the hiring-plan task pauses as a purple <code>in&nbsp;review</code> task → approve there. No separate agent state.</span></td>
</tr>
<tr>
<td class="st-state">terminated</td><td class="st-mean">Retired / decommissioned (terminal)</td>
<td><span class="cellrow"><span class="cap-old" style="background:#a3a3a3"></span><span class="chip-old" style="background:#fee2e2;color:#b91c1c">terminated</span></span></td>
<td><span class="note" style="color:#52585d">— <strong>not shown in the agents list</strong> (hidden like archived companies; lives elsewhere / DB).</span></td>
</tr>
</tbody>
</table>
<p class="sub" style="margin-top:6px"><strong>The agents list shows 4 states:</strong> <span class="chip gray" style="margin:0 2px"></span>idle · <span class="chip blue" style="margin:0 2px"></span>running · <span class="chip amber" style="margin:0 2px"></span>paused · <span class="chip red" style="margin:0 2px"></span>error. <code>active</code> folds into idle; <code>pending_approval</code> and <code>terminated</code> are not listed (see above).</p>
<h3>Task states — <code>ISSUE_STATUSES</code> (7) + derived blocked sub-states</h3>
<p class="sub"><strong>blue = liveness</strong>: <code>in_progress</code> → <strong>blue</strong>, <code>todo</code> → <strong>amber</strong>. Suggested chips now carry the brand task-state <strong>icon</strong> (the 12px glyph from paperclip.ing/brand “Task states”). Derived <code>blocked</code> sub-states (from <code>StatusIcon.tsx</code> via <code>blockerAttention.state</code>) are shown as the status-icon ring — they are not separate <code>ISSUE_STATUSES</code> values and need no colour change.</p>
<table class="st-table">
<thead><tr><th style="width:170px">State</th><th style="width:230px">Today</th><th style="width:210px">Suggested</th><th>Suggested — dark</th></tr></thead>
<tbody>
<tr><td class="st-state">backlog</td><td><span class="chip-old" style="background:#f3f4f6;color:#6b7280">backlog</span></td><td><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></td><td><span class="darkcell dark"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></td></tr>
<tr><td class="st-state">todo <span class="note" style="color:#8a8780">→ amber</span></td><td><span class="chip-old" style="background:#dbeafe;color:#1d4ed8">todo</span></td><td><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>todo</span></td><td><span class="darkcell dark"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>todo</span></span></td></tr>
<tr><td class="st-state">in_progress <span class="note" style="color:#8a8780">→ blue · live</span></td><td><span class="chip-old" style="background:#fef9c3;color:#a16207">in progress</span></td><td><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></td><td><span class="darkcell dark"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></td></tr>
<tr><td class="st-state">in_review</td><td><span class="chip-old" style="background:#ede9fe;color:#6d28d9">in review</span></td><td><span class="chip violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>in review</span></td><td><span class="darkcell dark"><span class="chip violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>in review</span></span></td></tr>
<tr><td class="st-state">done</td><td><span class="chip-old" style="background:#dcfce7;color:#15803d">done</span></td><td><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>done</span></td><td><span class="darkcell dark"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>done</span></span></td></tr>
<tr><td class="st-state">blocked</td><td><span class="chip-old" style="background:#fee2e2;color:#b91c1c">blocked</span></td><td><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></td><td><span class="darkcell dark"><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></span></td></tr>
<tr><td class="st-state">cancelled</td><td><span class="chip-old" style="background:#f3f4f6;color:#6b7280;text-decoration:line-through">cancelled</span></td><td><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></td><td><span class="darkcell dark"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></td></tr>
<tr><td colspan="4" style="padding-top:14px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8a8780;border-bottom:1px solid #e0dcd6">blocked — collapsed to 2 (In queue + blocked) per D6</td></tr>
<tr><td class="st-state">In queue <div class="note" style="color:#1d4ed8;font-weight:400;text-transform:none">blocked behind a live child</div></td><td><span class="cellrow"><span class="ring cyan"><span class="corner"></span></span><span class="note">teal ring + dot</span></span></td><td><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>In queue</span></td><td><span class="darkcell dark"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>In queue</span></span></td></tr>
<tr><td class="st-state">blocked <div class="note" style="color:#b91c1c;font-weight:400;text-transform:none">plain blocked = task blocked</div></td><td><span class="cellrow"><span class="ring red"></span><span class="note">red ring</span></span></td><td><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></td><td><span class="darkcell dark"><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></span></td></tr>
</tbody>
</table>
<h3>Blocked → 2 states (your call: collapse to In queue + blocked)</h3>
<p class="sub">All the “stalled / needs-attention / plain” nuances (verified in <code>StatusIcon.tsx</code> + <code>server/.../issues.ts</code>) fold into one red <strong>blocked</strong>. The only distinction kept is whether the block is <em>self-healing</em>.</p>
<table class="st-table">
<thead><tr><th style="width:150px">Chip</th><th>You see it when…</th><th style="width:170px">Self-heals?</th></tr></thead>
<tbody>
<tr><td><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>In queue</span></td><td class="st-mean">A blocking sub-task/dependency is <strong>currently running</strong> (or human-assigned / awaiting approval) — the parent is only waiting on its own live child.</td><td><strong>Yes</strong> — unblocks when the child finishes. No action needed.</td></tr>
<tr><td><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></td><td class="st-mean">Everything else that’s genuinely stuck — a blocker in review with no one on it, unassigned/parked/cancelled, an agent down, or a manual block.</td><td>No — needs a <strong>human</strong> (decision / triage / unblock).</td></tr>
</tbody>
</table>
<p class="sub" style="margin-top:6px"><strong>In queue</strong> is the one worth keeping distinct — it means <em>not actually stuck</em> (a child is moving it forward). Everything else is just <strong>blocked</strong> (red). The richer covered/stalled/needs-attention signal still exists under the hood (<code>blockerAttention</code>) and could power tooltips/filters later, but the chip is binary.</p>
<div class="callout">
<h3>Your question: active vs idle (verified in code)</h3>
<p><strong><code>active</code> and <code>idle</code> are not meaningfully different — they should be collapsed.</strong> The agents table defaults to <code>idle</code> and is never set to <code>active</code>; <code>active</code> exists only as a dashboard <em>display alias</em> (it counts idle agents as “active”). So the resting state is one thing — labelled <strong>“idle” (gray)</strong> — and <strong>“running” (blue)</strong> when a heartbeat is executing. That idle + running mix is what a healthy org shows above.</p>
</div>
</div>
<!-- SAMPLE TASK PAGE -->
<h2 style="color:#f3e6c4;font-size:18px;margin:34px 0 4px;">Sample task list — all task states</h2>
<p style="color:#f3e6c4;opacity:.85;font-size:13px;margin:0 0 14px;max-width:900px;line-height:1.5;">A realistic task list covering every <code style="background:rgba(243,230,196,.14);padding:1px 5px;border-radius:4px">ISSUE_STATUS</code> plus the two blocked states (<strong>In queue</strong>, <strong>blocked</strong>). Brand status icon on the left, brand chip on the right — consistent icon sizes + chip heights. (Spec for the D4 follow-up.)</p>
<div class="panels">
<!-- LIGHT task list -->
<div class="panel light">
<p class="panel-label">Light mode</p>
<div class="agents-title">Tasks</div>
<div class="list">
<div class="row"><span class="lead"><span class="ticon blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-41</span>Refactor auth module</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></div>
<div class="row"><span class="lead"><span class="ticon amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-42</span>Write API docs</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>todo</span></span></div>
<div class="row"><span class="lead"><span class="ticon blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-44</span>Ship onboarding flow</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>In queue</span></span></div>
<div class="row"><span class="lead"><span class="ticon red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-47</span>Fix payment crash</div></span><span class="trailing"><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></span></div>
<div class="row"><span class="lead"><span class="ticon violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-48</span>Draft Q3 roadmap</div></span><span class="trailing"><span class="chip violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>in review</span></span></div>
<div class="row"><span class="lead"><span class="ticon green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-40</span>Set up CI pipeline</div></span><span class="trailing"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>done</span></span></div>
<div class="row"><span class="lead"><span class="ticon gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-43</span>Design system audit</div></span><span class="trailing"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></div>
<div class="row"><span class="lead"><span class="ticon gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-49</span>Deprecate old API</div></span><span class="trailing"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></div>
</div>
</div>
<!-- DARK task list -->
<div class="panel dark">
<p class="panel-label">Dark mode</p>
<div class="agents-title">Tasks</div>
<div class="list">
<div class="row"><span class="lead"><span class="ticon blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-41</span>Refactor auth module</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></div>
<div class="row"><span class="lead"><span class="ticon amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-42</span>Write API docs</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>todo</span></span></div>
<div class="row"><span class="lead"><span class="ticon blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-44</span>Ship onboarding flow</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>In queue</span></span></div>
<div class="row"><span class="lead"><span class="ticon red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-47</span>Fix payment crash</div></span><span class="trailing"><span class="chip red"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3.5" y="5.2" width="5" height="1.6" rx="0.4" fill="currentColor"/></svg>blocked</span></span></div>
<div class="row"><span class="lead"><span class="ticon violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-48</span>Draft Q3 roadmap</div></span><span class="trailing"><span class="chip violet"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="6" cy="6" r="2" fill="currentColor"/></svg>in review</span></span></div>
<div class="row"><span class="lead"><span class="ticon green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-40</span>Set up CI pipeline</div></span><span class="trailing"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>done</span></span></div>
<div class="row"><span class="lead"><span class="ticon gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-43</span>Design system audit</div></span><span class="trailing"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></div>
<div class="row"><span class="lead"><span class="ticon gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></span></span><span class="main"><div class="name"><span class="idf">PAP-49</span>Deprecate old API</div></span><span class="trailing"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></div>
</div>
</div>
</div>
<!-- PROJECT STATES — today vs suggested (PAP-75 follow-up) -->
<div class="sec states light">
<h2>All Projects page — project chips, today vs. suggested</h2>
<p class="sub">Mapping the approved brand chip system (bordered <code>.task-chip</code> + 12px status glyph, light/dark) onto every project state Paperclip allows (<code>PROJECT_STATUSES</code> in <code>packages/shared/src/constants.ts</code>). Today the all-projects list renders the borderless <code>StatusBadge</code> pill (<code>ui/src/components/StatusBadge.tsx</code> → <code>statusBadge</code> map); suggested swaps it for the same bordered chip used by tasks and agents. <strong>blue = liveness</strong> carries over: <code>in_progress</code> → blue.</p>
<h3>Project states — <code>PROJECT_STATUSES</code> (5)</h3>
<table class="st-table">
<thead><tr><th style="width:140px">State</th><th>What it means (verified in code)</th><th style="width:170px">Today</th><th style="width:170px">Suggested — light</th><th>Suggested — dark</th></tr></thead>
<tbody>
<tr>
<td class="st-state">backlog</td><td class="st-mean">Parked / unscheduled — not yet picked up</td>
<td><span class="chip-old" style="background:#f3f4f6;color:#6b7280">backlog</span></td>
<td><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></td>
<td><span class="darkcell dark"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></td>
</tr>
<tr>
<td class="st-state">planned <span class="note" style="color:#8a8780">→ amber</span></td><td class="st-mean">Scheduled / committed but not started. <strong>Today it's an identical gray to backlog</strong> — indistinguishable. Amber gives it the “queued, ready” identity (mirrors task <code>todo</code>).</td>
<td><span class="chip-old" style="background:#f3f4f6;color:#6b7280">planned</span></td>
<td><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>planned</span></td>
<td><span class="darkcell dark"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>planned</span></span></td>
</tr>
<tr>
<td class="st-state">in_progress <span class="note" style="color:#8a8780">→ blue · live</span></td><td class="st-mean">Actively being worked — the project has live work. <strong>blue = liveness</strong> (today it's yellow).</td>
<td><span class="chip-old" style="background:#fef9c3;color:#a16207">in progress</span></td>
<td><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></td>
<td><span class="darkcell dark"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></td>
</tr>
<tr>
<td class="st-state">completed</td><td class="st-mean">Project delivered / closed out (matches task <code>done</code> + goal <code>achieved</code>)</td>
<td><span class="chip-old" style="background:#dcfce7;color:#15803d">completed</span></td>
<td><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>completed</span></td>
<td><span class="darkcell dark"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>completed</span></span></td>
</tr>
<tr>
<td class="st-state">cancelled</td><td class="st-mean">Abandoned, not to be resumed (gray + strikethrough, matches task <code>cancelled</code>)</td>
<td><span class="chip-old" style="background:#f3f4f6;color:#6b7280">cancelled</span></td>
<td><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></td>
<td><span class="darkcell dark"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></td>
</tr>
</tbody>
</table>
<h3>Derived overlays — not in <code>PROJECT_STATUSES</code> (handled separately)</h3>
<p class="sub">A project also carries <code>pauseReason</code>/<code>pausedAt</code> and <code>archivedAt</code> (verified in <code>packages/shared/src/types/project.ts</code>). These are overlays on top of the base status, not values in the 5-state enum.</p>
<table class="st-table">
<thead><tr><th style="width:140px">Overlay</th><th>What it means</th><th style="width:170px">Suggested — light</th><th>Suggested — dark</th></tr></thead>
<tbody>
<tr>
<td class="st-state">paused</td><td class="st-mean">Project halted (<code>manual</code> / <code>budget</code> / <code>system</code>). Amber, consistent with a <strong>paused agent</strong> (D7). Shown as an overlay chip beside the base status, not a replacement enum value.</td>
<td><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><rect x="3.4" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/><rect x="6.8" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/></svg>paused</span></td>
<td><span class="darkcell dark"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><rect x="3.4" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/><rect x="6.8" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/></svg>paused</span></span></td>
</tr>
<tr>
<td class="st-state">archived</td><td class="st-mean"><strong>Not shown in the all-projects list</strong> — the page already filters <code>!p.archivedAt</code> (<code>ui/src/pages/Projects.tsx</code>). Same treatment as terminated agents / archived companies. No chip needed.</td>
<td colspan="2"><span class="note" style="color:#52585d">— hidden from the list (no chip change required) —</span></td>
</tr>
</tbody>
</table>
<p class="sub" style="margin-top:6px"><strong>The all-projects list shows 5 chips:</strong>
<span class="chip gray" style="margin:0 2px">backlog</span>
<span class="chip amber" style="margin:0 2px">planned</span>
<span class="chip blue" style="margin:0 2px">in progress</span>
<span class="chip green" style="margin:0 2px">completed</span>
<span class="chip gray" style="margin:0 2px;text-decoration:line-through">cancelled</span>
· the only colour <em>changes</em> from today are <strong>planned</strong> (gray → amber, to split it from backlog) and <strong>in_progress</strong> (yellow → blue, the liveness rule).</p>
</div>
<!-- SAMPLE ALL PROJECTS PAGE -->
<h2 style="color:#f3e6c4;font-size:18px;margin:34px 0 4px;">Sample All Projects list — all project states</h2>
<p style="color:#f3e6c4;opacity:.85;font-size:13px;margin:0 0 14px;max-width:900px;line-height:1.5;">The all-projects page (<code style="background:rgba(243,230,196,.14);padding:1px 5px;border-radius:4px">ui/src/pages/Projects.tsx</code>) with the proposed brand chips on the far right, every <code style="background:rgba(243,230,196,.14);padding:1px 5px;border-radius:4px">PROJECT_STATUS</code> covered. Project tile icon on the left (unchanged), brand status chip on the right.</p>
<div class="panels">
<!-- LIGHT projects list -->
<div class="panel light">
<p class="panel-label">Light mode</p>
<div class="agents-title">Projects</div>
<div class="list">
<div class="row"><span class="lead"><span class="cap" style="background:#2563EB;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Paperclip App</div><div class="role">12 tasks</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></div>
<div class="row"><span class="lead"><span class="cap" style="background:#7C3AED;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Paperclip Website</div><div class="role">8 tasks</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>planned</span></span></div>
<div class="row"><span class="lead"><span class="cap" style="background:#A8AEB2;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">companies.io</div><div class="role">3 tasks</div></span><span class="trailing"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></div>
<div class="row"><span class="lead"><span class="cap" style="background:#22C55E;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Onboarding revamp</div><div class="role">20 tasks</div></span><span class="trailing"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>completed</span></span></div>
<div class="row"><span class="lead"><span class="cap" style="background:#F59E0B;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Discord bot</div><div class="role">5 tasks · paused</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><rect x="3.4" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/><rect x="6.8" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/></svg>paused</span></span></div>
<div class="row"><span class="lead"><span class="cap" style="background:#A8AEB2;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Legacy migration</div><div class="role">2 tasks</div></span><span class="trailing"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></div>
</div>
</div>
<!-- DARK projects list -->
<div class="panel dark">
<p class="panel-label">Dark mode</p>
<div class="agents-title">Projects</div>
<div class="list">
<div class="row"><span class="lead"><span class="cap" style="background:#2563EB;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Paperclip App</div><div class="role">12 tasks</div></span><span class="trailing"><span class="chip blue"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6 1.5 A4.5 4.5 0 0 1 6 10.5 Z" fill="currentColor"/></svg>in progress</span></span></div>
<div class="row"><span class="lead"><span class="cap" style="background:#7C3AED;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Paperclip Website</div><div class="role">8 tasks</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>planned</span></span></div>
<div class="row"><span class="lead"><span class="cap" style="background:#A8AEB2;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">companies.io</div><div class="role">3 tasks</div></span><span class="trailing"><span class="chip gray"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/></svg>backlog</span></span></div>
<div class="row"><span class="lead"><span class="cap" style="background:#22C55E;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Onboarding revamp</div><div class="role">20 tasks</div></span><span class="trailing"><span class="chip green"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5" fill="currentColor"/><path class="ck" d="M3.5 6 5.5 8 8.5 4.5" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>completed</span></span></div>
<div class="row"><span class="lead"><span class="cap" style="background:#F59E0B;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Discord bot</div><div class="role">5 tasks · paused</div></span><span class="trailing"><span class="chip amber"><svg viewBox="0 0 12 12" aria-hidden="true"><rect x="3.4" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/><rect x="6.8" y="3" width="1.8" height="6" rx="0.6" fill="currentColor"/></svg>paused</span></span></div>
<div class="row"><span class="lead"><span class="cap" style="background:#6E6960;border-radius:5px;width:18px;height:18px"></span></span><span class="main"><div class="name">Legacy migration</div><div class="role">2 tasks</div></span><span class="trailing"><span class="chip gray" style="text-decoration:line-through"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M3 9 9 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>cancelled</span></span></div>
</div>
</div>
</div>
<!-- DECISIONS — RESOLVED -->
<div class="sec questions">
<h2>Decisions — resolved ✓</h2>
<p class="sub">Locked into the plan (✦ = updated this round):</p>
<div class="q"><h3>✦ D1 — <code>active</code> collapses into one resting state, shown <strong>gray “idle”</strong> (reverted from green “online”).</h3></div>
<div class="q"><h3>✦ D2 — <code>pending_approval</code> is <strong>removed as an agent state.</strong> Hiring approval happens in the task thread (the hiring-plan task pauses as a purple <code>in review</code> task → approve there).</h3></div>
<div class="q"><h3>✦ D3 — <code>terminated</code> is <strong>removed from the agents list</strong> (hidden like archived companies; lives elsewhere / DB), rather than shown gray.</h3></div>
<div class="q"><h3>✓ D4 — issue/task chip + status-icon restyle → <strong>follow-up</strong> issue (paperclip-website project, its own workspace). PAP-75 ships <em>agents</em> only.</h3></div>
<div class="q"><h3>✦ D5 — agent <code>error</code> capsule <strong>re-added</strong> (red, blinking). Scenario: the agent is broken (e.g. not connected to a model) and failing every task — distinct from a task failing.</h3></div>
<div class="q"><h3>✦ D6 — blocked task states <strong>collapse to 2</strong>: <strong>In queue</strong> (blue, self-heals) + <strong>blocked</strong> (red).</h3></div>
<div class="q"><h3>✓ D7 — <strong>paused</strong> agent = <strong>amber</strong> (gray would collide with the gray idle state).</h3></div>
<div class="q"><h3>✦ D8 — <strong>All Projects page chips</strong> adopt the same brand chip system. 5 <code>PROJECT_STATUSES</code> map to: backlog (gray) · planned (amber) · in_progress (blue, liveness) · completed (green) · cancelled (gray, strikethrough). Only two colour <em>changes</em> from today: <strong>planned</strong> gray→amber (split from backlog) and <strong>in_progress</strong> yellow→blue. <code>paused</code> overlay = amber; <code>archived</code> stays hidden from the list. <span style="color:#b45309">Awaiting board approval.</span></h3></div>
<p class="sub" style="margin-top:14px"><strong>All decisions confirmed by the board.</strong> Final agents list = 4 states: <strong>idle (gray) · running (blue, pulse 1.6s) · paused (amber) · error (red, blinking)</strong>. <code>active</code>→idle; <code>pending_approval</code> &amp; <code>terminated</code> not listed.</p>
<p class="sub"><strong>Follow-ups created</strong> for the task/issue status restyle: one on the <strong>Paperclip App</strong> (core app, everywhere statuses appear) and one on the <strong>Paperclip Website</strong> project. PAP-75 itself ships the agent changes.</p>
</div>
</div>
</body>
</html>