great-cto 3.15.0 → 3.16.0

package/board/.claude-plugin/plugin.json

@@ -2,7 +2,7 @@
   "name": "great_cto",
   "id": "great_cto",
   "description": "Engineering process for solo founders and teams up to 50 engineers. Agents do architecture, code review, QA, and security. You make two decisions per feature.",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "author": {
     "name": "Great CTO",
     "url": "https://github.com/avelikiy/great_cto"

package/board/packages/board/lib/data-readers.mjs

@@ -114,8 +114,21 @@ function getPipeline(cwd = process.cwd()) {
   // signature. Surface that checkpoint AS A STAGE in the pipeline, sitting just
   // before the irreversible steps (devops/ship). It lights up when a gate is
   // awaiting a human — so the operator always sees where the rails are.
+  // Awaiting a signature and blocked are not the same thing, and this said they
+  // were. `getInbox`'s pendingGates excludes blocked gates — deliberately, and
+  // under test: in a tasks.md project a gate marked `blocked` carried raw_status
+  // 'open' and never left the inbox. This filter excluded only done/closed, so
+  // the same gate the tile reported as 0 PENDING DECISIONS was announced here as
+  // 1 GATE AWAITING SIGNATURE. Two counts of one concept, on one screen,
+  // disagreeing over a single word.
+  //
+  // Dropping it from the rail would have been the other wrong answer: a gate
+  // stuck for 29 days is exactly what the rail exists to show. It is still
+  // shown, and now it is named for what it is.
   const openGates = tasks.filter(t => t.is_gate && t.status !== 'done' && t.status !== 'closed' && t.raw_status !== 'closed');
-  const pending = openGates.length;
+  const blockedGates = openGates.filter(t => t.raw_status === 'blocked' || t.status === 'blocked');
+  const awaitingGates = openGates.filter(t => !blockedGates.includes(t));
+  const pending = awaitingGates.length;
   const newestGate = openGates.reduce((acc, t) => {
     const ts = t.updated_at || t.created_at; return (!acc || (ts && ts > acc)) ? ts : acc;
   }, null);
@@ -123,11 +136,15 @@ function getPipeline(cwd = process.cwd()) {
   const gateNode = {
     stage: 'human-gate',
     is_human_gate: true,
-    status: pending > 0 ? 'active' : 'idle',
+    // Blocked is not active: an active stage is one somebody can act on now.
+    status: pending > 0 ? 'active' : (blockedGates.length ? 'blocked' : 'idle'),
     pending,
+    blocked: blockedGates.length,
     last_message: pending > 0
       ? `${pending} gate${pending > 1 ? 's' : ''} awaiting signature`
-      : 'no gate pending',
+      : (blockedGates.length
+          ? `${blockedGates.length} gate${blockedGates.length > 1 ? 's' : ''} blocked`
+          : 'no gate pending'),
     verdict: null,
     ts: newestGate,
     age_min: gateAgeMs != null ? Math.round(gateAgeMs / 60000) : null,

package/board/packages/board/lib/docs.mjs

@@ -182,7 +182,7 @@ function walk(dir, root, out, depth = 0) {
  *   8. a bare README              a name that describes nothing else
  *
  * The leading filename token outranks the directory, and that ordering was
- * bought: 14 `docs/architecture/ADR-0NN-*.md` files were being filed as
+ * bought: 14 `docs/adr/ADR-0NN-*.md` files were being filed as
  * Architecture, and `docs/design/PLAN-*.md` as Design. A directory is where a
  * project dumps a category; the front of a filename is what the author called
  * THIS document. Mid-name tokens rank below the directory instead, because

package/board/packages/board/public/index.html

@@ -31,6 +31,28 @@
 <script src="/assets/vendor/purify.min.js"></script>
 <style>
 :root {
+  /* Colours that used to be written straight into rules.
+     Twenty-nine declarations bypassed the token system, so the contrast audit —
+     which reads `:root` — could not see any of them. Values are carried across
+     unchanged: this is a rename, not a redesign, and the rendered-layout check
+     proves it by comparing the colours the page actually paints. */
+  --on-solid: #fff;           /* text on a solid coloured chip or button */
+  --on-warm: #000;            /* text on amber, where white fails contrast */
+  --on-accent: #04140d;       /* text on the green accent */
+  --bg-solid: #0f1115;        /* opaque button and tooltip surface */
+  --bg-solid-hover: #2a2d33;
+  --accent-hover: #00ee8a;
+  --verdict-ok: #4ade80;
+  --verdict-fail: #f87171;
+  --toast-bg: #1f2937;
+  --toast-ok: #14532d;
+  --toast-err: #7f1d1d;
+  --toast-info: #1e3a5f;
+  --dot-orange: #f97316;
+  --dot-unread: #3b82f6;
+  --metric-purple: #7c3aed;
+  --chip-agent: #2540d4;
+
   /* Dark emerald — matches landing greatcto.systems */
   --bg-page: #0a0e0c;
   --bg-panel: rgba(17, 22, 26, 0.85);
@@ -545,7 +567,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .btn-bell:hover { border-color: var(--border-strong); color: var(--text); }
 .btn-bell-badge {
   position: absolute; top: -5px; right: -5px;
-  background: var(--accent); color: #04140d;
+  background: var(--accent); color: var(--on-accent);
   font-size: var(--fs-eyebrow); font-weight: 700; line-height: 1;
   min-width: 16px; height: 16px; border-radius: 8px;
   display: none; align-items: center; justify-content: center;
@@ -574,13 +596,13 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .icon-btn:hover { background: var(--bg-muted); color: var(--text); }
 
 .btn-new {
-  background: #0f1115; color: #fff; border: none;
+  background: var(--bg-solid); color: var(--on-solid); border: none;
   height: 30px; padding: 0 14px;
   border-radius: 999px;
   font-size: var(--fs-body); font-weight: 500;
   display: inline-flex; align-items: center; gap: 6px;
 }
-.btn-new:hover { background: #2a2d33; }
+.btn-new:hover { background: var(--bg-solid-hover); }
 
 .task-count {
   font-family: var(--mono); font-size: var(--fs-caption);
@@ -902,7 +924,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   pointer-events: none;
 }
 .toast {
-  background: #1f2937; color: #fff;
+  background: var(--toast-bg); color: var(--on-solid);
   padding: 8px 14px; border-radius: 6px;
   font-size: var(--fs-body); min-width: 200px; max-width: 360px;
   box-shadow: 0 4px 16px rgba(0,0,0,0.35);
@@ -911,9 +933,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   pointer-events: auto;
 }
 .toast.show { opacity: 1; transform: translateY(0); }
-.toast-success { background: #14532d; border-left: 3px solid #22c55e; }
-.toast-error { background: #7f1d1d; border-left: 3px solid #ef4444; }
-.toast-info { background: #1e3a5f; border-left: 3px solid #3b82f6; }
+.toast-success { background: var(--toast-ok); border-left: 3px solid #22c55e; }
+.toast-error { background: var(--toast-err); border-left: 3px solid #ef4444; }
+.toast-info { background: var(--toast-info); border-left: 3px solid #3b82f6; }
 .toast code { background: rgba(255,255,255,0.1); padding: 1px 4px; border-radius: 3px; }
 .pl-stage { cursor: pointer; transition: background 0.12s; }
 .pl-stage:hover { background: var(--bg-muted); border-radius: 4px; }
@@ -991,8 +1013,8 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 .rdm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
 .rdm-head .rdm-agent { font-weight: 600; }
-.rdm-head .rdm-verdict.ok { color: #4ade80; }
-.rdm-head .rdm-verdict.fail { color: #f87171; }
+.rdm-head .rdm-verdict.ok { color: var(--verdict-ok); }
+.rdm-head .rdm-verdict.fail { color: var(--verdict-fail); }
 .rdm-head .rdm-ts { color: var(--text2); font-size: var(--fs-caption); margin-left: auto; }
 .rdm-raw {
   background: var(--bg-muted); padding: 8px 10px; border-radius: 4px;
@@ -1106,9 +1128,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .ni-btn-ghost:hover { background: var(--bg-muted, rgba(255,255,255,0.05)); color: var(--text); }
 .ni-btn-primary {
   background: var(--accent, #00d97e);
-  color: #0a0e0c; font-weight: 500;
+  color: var(--bg-page); font-weight: 500;
 }
-.ni-btn-primary:hover { background: #00ee8a; }
+.ni-btn-primary:hover { background: var(--accent-hover); }
 .ni-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
 @media (max-width: 600px) {
   .ni-row { flex-direction: column; gap: 14px; }
@@ -1303,9 +1325,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .tier-badge { font-size: var(--fs-caption); padding: 1px 8px; border-radius: 999px; margin-left: 6px;
   font-family: var(--mono); white-space: nowrap; }
 .tier-badge:empty { display: none; }
-.tier-badge.tier-T0 { background: var(--status-review); color: #fff; }
-.tier-badge.tier-T1 { background: var(--status-progress); color: #fff; }
-.tier-badge.tier-T2 { background: var(--status-blocked); color: #fff; }
+.tier-badge.tier-T0 { background: var(--status-review); color: var(--on-solid); }
+.tier-badge.tier-T1 { background: var(--status-progress); color: var(--on-solid); }
+.tier-badge.tier-T2 { background: var(--status-blocked); color: var(--on-solid); }
 
 /* ── Pipeline track ───────────────────────────────────────────────────────── */
 .pipeline-track {
@@ -1318,7 +1340,16 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   overflow-x: auto;
 }
 .pl-stage {
-  flex: 1; min-width: 100px;
+    /* `flex: 1` let a cell shrink below its own label, and `.pl-name` below
+       refuses to wrap — so the text simply ran over its neighbour. Measured at
+       1440px: three of ten labels overflowed, "12-angle review" needing 127px
+       inside an 80px cell. Box geometry hid it (getBoundingClientRect reports the
+       BOX, and the boxes were 20px apart while the ink was not), which is why it
+       read as a rendering quirk for so long.
+       `min-width: max-content` is the missing half of the decision recorded on
+       `.pl-name`: refusing to wrap is only honest if the row may overflow and
+       scroll, which `overflow-x: auto` on the track already allows. */
+    flex: 1 0 auto; min-width: max-content;
   position: relative;
   padding: 8px 10px 6px;
   display: flex; flex-direction: column; gap: 4px;
@@ -1412,7 +1443,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   color: var(--text); cursor: pointer; transition: background 0.12s, border-color 0.12s;
 }
 .inbox-allclear .ac-btn:hover { background: var(--bg-muted); border-color: var(--accent, #00d97e); }
-.inbox-allclear .ac-btn.ac-primary { background: var(--accent, #00d97e); border-color: var(--accent, #00d97e); color: #04150d; font-weight: 500; }
+.inbox-allclear .ac-btn.ac-primary { background: var(--accent, #00d97e); border-color: var(--accent, #00d97e); color: var(--on-accent); font-weight: 500; }
 .inbox-allclear .ac-btn.ac-primary:hover { filter: brightness(1.06); }
 
 /* Human gate — the signing checkpoint. Visually set apart from agent stages:
@@ -1434,7 +1465,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .pl-gate.active .pl-msg, .pl-gate.active .pl-meta { opacity: 1; color: var(--text); }
 .pl-gate .gate-badge {
   margin-left: auto;
-  background: var(--status-blocked); color: #fff;
+  background: var(--status-blocked); color: var(--on-solid);
   font-size: var(--fs-eyebrow); font-weight: 700;
   min-width: 16px; height: 16px; padding: 0 4px;
   border-radius: 8px;
@@ -1506,7 +1537,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   position: absolute;
   bottom: calc(100% + 4px); left: 50%;
   transform: translateX(-50%);
-  background: #0f1115; color: #fff;
+  background: var(--bg-solid); color: var(--on-solid);
   padding: 4px 8px; border-radius: 4px;
   font-family: var(--mono); font-size: var(--fs-eyebrow);
   white-space: nowrap;
@@ -1717,7 +1748,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 
 .dot-purple { background: var(--status-gate); }
 .dot-red    { background: var(--status-blocked); }
-.dot-orange { background: #f97316; }
+.dot-orange { background: var(--dot-orange); }
 .dot-amber  { background: var(--status-progress); }
 
 .inbox-row {
@@ -1977,7 +2008,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .metric-card.green::before { background: var(--status-review); }
 .metric-card.amber::before { background: var(--status-progress); }
 .metric-card.red::before   { background: var(--status-blocked); }
-.metric-card.purple::before { background: #7c3aed; }
+.metric-card.purple::before { background: var(--metric-purple); }
 .metric-num {
   font-family: var(--serif); font-weight: 500;
   /* The board is live (SSE). In a proportional face a 1 is narrower than an 8,
@@ -2461,7 +2492,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   text-overflow: ellipsis;
 }
 .btn-black {
-  background: #0f1115; color: #fff; border: none;
+  background: var(--bg-solid); color: var(--on-solid); border: none;
   padding: 8px 14px; border-radius: 999px;
   font-size: var(--fs-small); font-weight: 500;
 }
@@ -2531,9 +2562,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   transition: background 0.12s, color 0.12s, border-color 0.12s;
 }
 .fchip:hover { background: var(--bg-elevated); color: var(--text); border-color: var(--border-strong); }
-.fchip.active { background: var(--accent); color: #fff; border-color: transparent; }
-.fchip-agent.active { background: #2540d4; }
-.fchip-priority.active { background: #f59e0b; color: #000; }
+.fchip.active { background: var(--accent); color: var(--on-solid); border-color: transparent; }
+.fchip-agent.active { background: var(--chip-agent); }
+.fchip-priority.active { background: var(--status-progress); color: var(--on-warm); }
 .fchip-label.active { background: var(--accent); }
 .fchip-clear { background: transparent; color: var(--text3); border-color: transparent; }
 .fchip-clear:hover { background: var(--bg-strong); color: var(--status-blocked); }
@@ -3420,6 +3451,9 @@ function greetByHour() {
 }
 
 function renderInbox(d) {
+  // Kept so renderResume can ask what this section is already showing, rather
+  // than the two of them rendering the same task independently.
+  window.__inboxData = d;
   inboxData = d || {};
   const s = d?.summary || { gates: 0, blocked: 0, p0: 0, stale: 0 };
   // `needs_you` counts distinct objects. Summing the three categories double-counted
@@ -3434,12 +3468,24 @@ function renderInbox(d) {
     ? "Some data could not be read — treat the counts below as incomplete."
     : (s.gates + s.p0 ? "Here's what needs your decision." : 'Nothing urgent — back to deep work.');
   document.getElementById('inbox-greet').textContent = `${greetByHour()} ${greetTail}`;
-  document.getElementById('inbox-summary').innerHTML = `
-    <div class="pill-stat"><span class="dot dot-purple"></span><div><div class="num">${s.gates}</div><div class="lbl">Pending decisions</div></div></div>
-    <div class="pill-stat"><span class="dot dot-red"></span><div><div class="num">${s.p0}</div><div class="lbl">P0 open</div></div></div>
-    <div class="pill-stat"><span class="dot dot-orange"></span><div><div class="num">${s.blocked}</div><div class="lbl">Blocked</div></div></div>
-    <div class="pill-stat"><span class="dot dot-amber"></span><div><div class="num">${s.stale}</div><div class="lbl">Stale &gt; 48h</div></div></div>
-  `;
+  // Only the tiles that have something in them.
+  //
+  // Four rendered unconditionally, and on an ordinary morning two of them read 0
+  // — half the header spending a quarter of the width each to say "nothing here".
+  // A zero is worth stating when it is the WHOLE answer, so the all-clear is one
+  // line instead of four boxes of noughts.
+  const TILES = [
+    { n: s.gates,   dot: 'purple', lbl: 'Pending decisions' },
+    { n: s.p0,      dot: 'red',    lbl: 'P0 open' },
+    { n: s.blocked, dot: 'orange', lbl: 'Blocked' },
+    { n: s.stale,   dot: 'amber',  lbl: 'Stale &gt; 48h' },
+  ];
+  const liveTiles = TILES.filter((t) => Number(t.n) > 0);
+  document.getElementById('inbox-summary').innerHTML = liveTiles.length
+    ? liveTiles.map((t) => `<div class="pill-stat"><span class="dot dot-${t.dot}"></span>`
+        + `<div><div class="num">${t.n}</div><div class="lbl">${t.lbl}</div></div></div>`).join('')
+    : `<div class="pill-stat" style="grid-column:1/-1"><span class="dot dot-green"></span>`
+      + `<div><div class="lbl">No gates, no P0s, nothing blocked or stale.</div></div></div>`;
   renderInboxList('inbox-gates', d?.pending_gates || [], 'inbox-gates-count', { showApprove: true });
   // `implies` names the fact the section heading already states, so the rows
   // below it stop repeating that fact on every card. "P0 open" states the
@@ -3492,10 +3538,18 @@ async function refreshReceipt() {
   if (!d || d.state === 'matches' || d.state === 'no-receipt') return;
 
   const stamp = d.agent ? `${esc(d.agent)}${d.ts ? ' · ' + relTime(d.ts) : ''}` : '';
+  // The FACT is one line; the file list is evidence for it.
+  //
+  // Four full paths printed inline wrapped the notice onto three lines and buried
+  // the sentence that matters — that the approval no longer describes the tree —
+  // under `docs/plans/PLAN-2026-08-17-gate-fail-closed.md`. The paths are still
+  // here, one click away: a reader who wants to act needs them, a reader deciding
+  // whether to care does not.
+  const changedFiles = [...(d.changed || []), ...(d.removed || [])];
   const body = d.state === 'differs'
-    ? `<b>${(d.changed || []).length + (d.removed || []).length} reviewed file(s) changed since ${stamp} approved</b>
+    ? `<b>${changedFiles.length} reviewed file(s) changed since ${stamp} approved</b>
        — the approval no longer describes what is in the tree.
-       <span class="muted">${esc((d.changed || []).slice(0, 4).join(', '))}${(d.changed || []).length > 4 ? ' …' : ''}</span>`
+       ${changedFiles.length ? `<details style="display:inline"><summary class="muted" style="display:inline;cursor:pointer">which files</summary><div class="muted" style="margin-top:4px">${esc(changedFiles.join(', '))}</div></details>` : ''}`
     : d.state === 'unreadable'
       ? `<b>Could not check the review receipt</b> — <span class="muted">${esc(d.why || '')}</span>. This is not the same as a clean tree.`
       : `${(d.added || []).length} file(s) added since ${stamp} approved; nothing reviewed was altered.`;
@@ -4341,7 +4395,25 @@ function summariseVerdict(v, raw) {
 function renderResume(d) {
   const card = document.getElementById('resume-card');
   if (!card) return;
-  const wip = d.wip_tasks || [];
+
+  // Whatever the Stale section is already showing does not need showing again.
+  //
+  // Measured on a real morning: three of the five stale rows also filled the
+  // "in progress" column here, so 60% of "pick up where you left off" was the
+  // list immediately below it. Both blocks were honest; together they made one
+  // fact look like two, which is the same arithmetic error as counting a task
+  // twice in the nav badge — just spent in vertical space instead of a number.
+  //
+  // Stale wins the duplicate because it says more: it carries the age, which is
+  // the reason the row deserves attention at all.
+  const shownElsewhere = new Set(
+    (window.__inboxData?.stale_in_progress || []).map((t) => t?.id).filter(Boolean));
+  const allWip = d.wip_tasks || [];
+  const wip = allWip.filter((t) => !shownElsewhere.has(t?.id));
+  // How many were dropped, so the empty column can say WHY it is empty. Rendering
+  // "Nothing in progress" over three tasks that are in progress — and listed a
+  // screen below — would be a worse lie than the duplication this removed.
+  const wipHiddenAsStale = allWip.length - wip.length;
   const verdicts = d.recent_verdicts || [];
   const decisions = d.decisions || [];
   const totalItems = wip.length + verdicts.length + decisions.length;
@@ -4373,7 +4445,11 @@ function renderResume(d) {
 
   // WIP column
   const wipEl = document.getElementById('resume-wip');
-  wipEl.innerHTML = wip.length ? wip.map(t => {
+  if (!wip.length && wipHiddenAsStale > 0) {
+    wipEl.innerHTML = `<div class="empty">${wipHiddenAsStale} in progress — all of them `
+      + `<a href="#" onclick="document.getElementById('inbox-stale')`
+      + `?.scrollIntoView({behavior:'smooth'});return false">stale, listed below</a></div>`;
+  } else wipEl.innerHTML = wip.length ? wip.map(t => {
     const tag = (t.agent || 'wip').slice(0, 12);
     return `<div class="resume-item" onclick="openSideById('${esc(t.id)}')">
       <span class="ri-tag">${esc(tag)}</span>
@@ -7856,7 +7932,7 @@ function renderNotifDrawer() {
             ${new Date(n.ts).toLocaleString()}
           </div>
         </div>
-        ${n.read ? '' : '<span style="width:7px;height:7px;background:#3b82f6;border-radius:50%;flex-shrink:0;margin-top:5px"></span>'}
+        ${n.read ? '' : '<span style="width:7px;height:7px;background:var(--dot-unread);border-radius:50%;flex-shrink:0;margin-top:5px"></span>'}
       </div>
     </div>`).join('');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "great-cto",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "description": "One command install for the great_cto Claude Code plugin. Auto-detects your stack, picks the right archetype, bootstraps PROJECT.md.",
   "keywords": [
     "claude-code",