great-cto 2.97.0 → 2.98.1

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": "2.97.0",
+  "version": "2.98.1",
   "author": {
     "name": "Great CTO",
     "url": "https://github.com/avelikiy/great_cto"

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

@@ -163,6 +163,34 @@ button { font-family: inherit; cursor: pointer; }
   border-right: 1px solid var(--border);
   display: flex; flex-direction: column;
 }
+/* Below this width the fixed 240px sidebar left 135px of workspace on a 375px
+   screen — narrower than a single kanban column (264px) — so every visit from a
+   phone was broken. It becomes a drawer: off-canvas by default, over the content
+   when opened.
+
+   `visibility` matters as much as the transform. A panel merely moved off-screen
+   is still in the tab order, so a keyboard user would tab through an invisible
+   menu — the same defect as the one this file just fixed on the Inbox tab, in
+   the opposite direction. */
+.sidebar-scrim {
+  display: none;
+  position: fixed; inset: 0; z-index: 39;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0; pointer-events: none;
+  transition: opacity 200ms ease-out;
+}
+.menu-btn {
+  display: none;
+  align-items: center; justify-content: center;
+  width: 40px; height: 40px; flex-shrink: 0;
+  border: 1px solid var(--border); border-radius: 8px;
+  background: var(--bg-card); color: var(--text2);
+}
+.menu-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar, .sidebar-scrim { transition: none; }
+}
 .sidebar-brand {
   display: flex; align-items: center; gap: 8px;
   padding: 14px 16px;
@@ -328,7 +356,7 @@ button { font-family: inherit; cursor: pointer; }
   margin: 0 16px;
   transition: border-color .12s, background .12s;
 }
-.search-box:focus-within { border-color: var(--accent); background: var(--bg-card); }
+.search-box:focus-within { border-color: var(--focus-ring); background: var(--bg-card); }
 .search-box svg { color: var(--text3); flex-shrink: 0; }
 .search-box input {
   flex: 1; border: none; outline: none; background: transparent;
@@ -530,6 +558,13 @@ button { font-family: inherit; cursor: pointer; }
   background: var(--bg-card);
   transition: background 0.12s, border-color 0.12s;
 }
+/* A thumb needs a bigger target than a cursor does.
+   24px is comfortable with a mouse and a coin-flip with a thumb, and Approve sits
+   4px from Reject — the one pair on this board where a miss advances work that
+   cannot be un-advanced. Scoped to `pointer: coarse` so the desktop density that
+   makes a long gate list scannable is left exactly as it is. 44px is the iOS
+   minimum; Android asks for 48dp, and the gap does the rest. */
+
 .gate-approve { color: var(--status-review); border-color: rgba(22, 163, 74, 0.35); }
 .gate-approve:hover { background: rgba(22, 163, 74, 0.08); border-color: var(--status-review); }
 /* Agent runner (launch control) */
@@ -718,7 +753,7 @@ button { font-family: inherit; cursor: pointer; }
 .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; }
-.card-selected { outline: 2px solid var(--accent, #3b82f6); outline-offset: -1px; }
+.card-selected { outline: 2px solid var(--focus-ring); outline-offset: -1px; }
 #hotkey-modal {
   position: fixed; inset: 0; z-index: 10000;
   display: flex; align-items: center; justify-content: center;
@@ -1202,6 +1237,7 @@ button { font-family: inherit; cursor: pointer; }
 }
 .cost-cell .v {
   font-family: var(--serif); font-weight: 500;
+  font-variant-numeric: tabular-nums;
   font-size: 26px; letter-spacing: -0.02em;
   color: var(--text); line-height: 1.1;
 }
@@ -1544,9 +1580,21 @@ button { font-family: inherit; cursor: pointer; }
 .metric-card.purple::before { background: #7c3aed; }
 .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,
+     so a figure that ticks over re-flows its own width and the number appears to
+     breathe. Tabular figures cost nothing here and stop it. */
+  font-variant-numeric: tabular-nums;
   font-size: 52px; line-height: 1;
   letter-spacing: -0.02em;
 }
+/* An absence is rendered quietly and never silently — the glyph stays out of the
+   way, the reason is available on hover and to a screen reader. Sized down from
+   whatever it sits in, so a missing hero figure does not shout at 52px. */
+.absent {
+  font-family: var(--mono); font-size: 0.55em;
+  color: var(--text3); letter-spacing: 0.04em;
+  cursor: help; border-bottom: 1px dotted var(--border-strong);
+}
 .metric-num small {
   font-size: 22px; color: var(--text2);
   margin-left: 4px; font-weight: 400;
@@ -2165,6 +2213,107 @@ button { font-family: inherit; cursor: pointer; }
 @media (max-width:480px) {
 .chip-filter-bar { flex-direction: column; align-items: stretch; }
 }
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed; top: 0; left: 0; bottom: 0;
+    z-index: 40;
+    transform: translateX(-100%);
+    visibility: hidden;
+    /* Visibility is switched, never eased. Transitioning it over the same 200ms
+       as the transform flips it at the halfway mark, so the drawer is invisible
+       for the first half of its own slide-in — and, worse, still unfocusable at
+       the instant openMenu() tries to move focus into it, which silently left
+       focus on the button and the menu unreachable by keyboard. On the way out
+       it waits for the slide to finish (`0s linear 200ms`), so the panel does
+       not vanish mid-animation. */
+    transition: transform 200ms ease-out, visibility 0s linear 200ms;
+    box-shadow: var(--drawer-shadow);
+  }
+  .sidebar.open {
+    transform: none; visibility: visible;
+    transition: transform 200ms ease-out, visibility 0s;
+  }
+  .sidebar-scrim { display: block; }
+  .sidebar-scrim.open { opacity: 1; pointer-events: auto; }
+  .menu-btn { display: inline-flex; }
+  .topbar { padding: 0 10px; gap: 8px; }
+  /* Raising every control to 44px gave the actions 223px of a 375px bar and
+     crushed the breadcrumb to "g… / B." — present, unreadable, worse than absent.
+     The project name is already at the top of the drawer and the tab name is the
+     row you tapped to get here, so the phone keeps only where you are. */
+  .topbar .crumbs { min-width: 0; overflow: hidden; white-space: nowrap; }
+  .topbar .crumbs > span { overflow: hidden; text-overflow: ellipsis; }
+  .topbar .crumbs .proj-icon,
+  .topbar .crumbs .sep,
+  .topbar .crumbs #crumb-project { display: none; }
+  .topbar .crumbs .here { color: var(--text); font-weight: 600; }
+  .topbar-actions { flex-shrink: 0; }
+  /* The search box is the one topbar item that can give up its width; ⌘K still
+     reaches it, and on a phone there is no ⌘K but there is the Search tab. */
+  .topbar .search-box { display: none; }
+  .topbar .task-count { display: none; }
+  .topbar-actions { gap: 6px; }
+  /* Icon-only, with the name moved to aria-label/title rather than deleted. */
+  .btn-label { display: none; }
+
+  /* The row's own arithmetic, measured rather than eyeballed: the page gives
+     64px to its side padding and the row another 30px to border and padding,
+     leaving 281px for the tracks. The fixed ones — id 110, two 14px gaps, and a
+     44px Approve/Reject pair at about 156 — come to 294. The 1fr title column
+     resolves to ZERO and the row overflows its own border box.
+     Raising the buttons to a real touch target is what finished it off: at 24px
+     they fit, at 44px they do not. Fixing one defect deepened its neighbour.
+     So on a phone the row stops being three columns and becomes three rows:
+     title first at full width, the id demoted to a meta line, the actions
+     spanning the bottom. CSS only — the markup this renders from is shared with
+     the desktop layout, and the desktop layout is fine. */
+  .inbox-page { padding: 16px 16px 48px; }
+  .inbox-row {
+    display: flex; flex-wrap: wrap;
+    gap: 8px 10px; align-items: baseline;
+  }
+  .inbox-row .ttl { order: 1; flex: 1 1 100%; font-size: 14px; }
+  /* Two lines, wrapped — a phone has the vertical room it lacks sideways. */
+  .inbox-row .ttl > :first-child { -webkit-line-clamp: 2; white-space: normal; }
+  /* The id and the status share a line: stacked, each took a full row of its
+     own and a four-line card said three things. */
+  .inbox-row .id { order: 2; flex: 0 1 auto; padding-top: 0; }
+  .inbox-row .actions { order: 3; margin-left: auto; }
+  /* Except on a gate, where the line is a pair of 44px buttons and wants the
+     whole width — the one row on this screen where the target size is the point. */
+  .inbox-row .actions:has(.gate-btn) { flex: 1 0 100%; margin-left: 0; }
+  .inbox-row .actions .gate-btn { flex: 1; }
+
+  /* Four columns of numbers do not fit in 375px; they were being clipped, which
+     silently dropped the fourth stat rather than wrapping it. */
+  .inbox-summary { grid-template-columns: repeat(2, 1fr); }
+  .mp-secondary { grid-template-columns: repeat(2, 1fr); }
+  .mp-hero { grid-template-columns: 1fr; }
+  .mp-row { grid-template-columns: 1fr; }
+}
+@media (pointer: coarse) {
+  /* A floor, not a list.
+     Placed here, at the END of the stylesheet, for the same reason the
+     phone-width block is: at equal specificity the later rule wins. Written
+     higher up, its `.inbox-row .actions { gap: 12px }` lost to the base rule's
+     4px declared 900 lines below it — so Approve and Reject sat 4px apart on a
+     touch screen while a block that read as correct sat above saying 12.
+     A declaration that loses is not a declaration.
+     The first version of this block named .gate-btn and stopped there, because
+     those were the buttons a review had pointed at. Two controls this same file
+     had just added — the drawer's own hamburger at 40px and the topbar's icon
+     buttons at ~32px — sat under the minimum from the day they were written,
+     and nothing objected, because the rule was a list of what somebody had
+     remembered rather than a property of the page.
+     So: every control gets the floor, and the ones with something to say about
+     their own size say it after. A button added tomorrow is covered by default;
+     one that must stay small has to opt out in writing. */
+  button, [role="button"], .nav-item, .toggle, summary { min-height: 44px; }
+  .gate-btn, .inbox-row .actions .gate-btn { height: 44px; font-size: 13px; }
+  .menu-btn { width: 44px; height: 44px; }
+  .btn-bell { min-width: 44px; justify-content: center; }
+  .gate-actions, .side-gate-actions, .inbox-row .actions { gap: 12px; }
+}
 @keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(76,175,80,.6);} 100% { box-shadow: 0 0 0 6px rgba(76,175,80,0);} }
 /* ── Scrollbar ────────────────────────────────────────────────────────────── */
 ::-webkit-scrollbar { width: 10px; height: 10px; }
@@ -2178,7 +2327,7 @@ button { font-family: inherit; cursor: pointer; }
   <div class="board-bg" aria-hidden="true"></div>
 
   <!-- Sidebar -->
-  <aside class="sidebar">
+  <aside class="sidebar" id="sidebar">
     <div class="sidebar-brand">
       <span class="brand-mark">
         <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
@@ -2208,7 +2357,7 @@ button { font-family: inherit; cursor: pointer; }
       </div>
     </div>
     <nav class="nav">
-      <div class="nav-item active" data-tab="inbox" onclick="switchTab('inbox', this)">
+      <div class="nav-item active" data-tab="inbox" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('inbox', this)">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 12h-6l-2 3h-4l-2-3H2 M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
         <span>Inbox</span>
         <span class="count" id="nav-inbox-count">0</span>
@@ -2246,9 +2395,15 @@ button { font-family: inherit; cursor: pointer; }
     </div>
   </aside>
 
+  <div class="sidebar-scrim" id="sidebar-scrim" onclick="closeMenu()" aria-hidden="true"></div>
+
   <!-- Workspace -->
   <div class="workspace">
     <div class="topbar">
+      <button class="menu-btn" id="menu-btn" type="button" aria-label="Menu"
+              aria-controls="sidebar" aria-expanded="false" onclick="toggleMenu()">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18 M3 12h18 M3 18h18"/></svg>
+      </button>
       <div class="crumbs">
         <span class="proj-icon" id="crumb-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></span>
         <span id="crumb-project">—</span>
@@ -2264,7 +2419,7 @@ button { font-family: inherit; cursor: pointer; }
         <span class="task-count" id="topbar-task-count">0 ISSUES</span>
         <button class="btn-bell" data-tab="share" onclick="switchTab('share', this)" title="Share a public project report" aria-label="Share" style="gap:6px;padding:6px 10px;">
           <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
-          <span style="font-size:12px;font-weight:500">Share</span>
+          <span class="btn-label" style="font-size:12px;font-weight:500">Share</span>
           <span id="share-nav-badge" class="share-badge off"><span class="share-badge-dot"></span>off</span>
         </button>
         <button class="btn-bell" id="board-theme-btn" onclick="toggleBoardTheme()" title="Toggle light / dark theme" aria-label="Toggle theme">🌙</button>
@@ -2272,9 +2427,9 @@ button { font-family: inherit; cursor: pointer; }
           <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
           <span class="btn-bell-badge" id="topbar-bell-badge"></span>
         </button>
-        <button class="btn-new" onclick="openNewIssueModal()">
+        <button class="btn-new" onclick="openNewIssueModal()" aria-label="New issue" title="New issue">
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14 M5 12h14"/></svg>
-          New issue
+          <span class="btn-label">New issue</span>
         </button>
       </div>
     </div>
@@ -4636,6 +4791,28 @@ function cardHTML(t) {
     </div>`;
 }
 
+// What clicking Approve actually sets in motion, in the words of what it does.
+//
+// A confirm that only asks "are you sure?" teaches people to dismiss confirms,
+// so this one states consequences instead: the approval is appended to the
+// verdict log, the pipeline is woken so the next session dispatches the
+// following stage, and — when the share report is on — a public URL is
+// republished. That last line is the one worth reading: it leaves the machine,
+// and revoking the link later does not un-see what was already served.
+function approveConsequence(id) {
+  const lines = [
+    `Approve ${id}?`,
+    '',
+    'Records your approval in the verdict log and wakes the pipeline —',
+    'the next session dispatches the following stage.',
+  ];
+  if (shareState && shareState.enabled) {
+    lines.push('', `Also republishes the public report at ${shareState.url || 'the share URL'} —`,
+                   'anyone holding that link sees the update.');
+  }
+  return lines.join('\n');
+}
+
 async function gateAction(id, action, runAgent) {
   let body;
   if (action === 'reject') {
@@ -4643,6 +4820,16 @@ async function gateAction(id, action, runAgent) {
     if (reason === null) return;
     body = { action, reason, project: currentProject };
   } else {
+    // The gate is the human signature the pipeline waits on. Rejecting has
+    // always asked for a reason and approving asked for nothing, so the cheaper
+    // click was the one that advanced work nobody can un-advance — friction
+    // pointing exactly the wrong way.
+    //
+    // Medium cost-of-undo (ADR-009): one confirm that NAMES the consequence, not
+    // a typed-name ritual on a button pressed several times a day. The runAgent
+    // path already shows an editable prompt that says what it will approve and
+    // run, and is cancellable — a second dialog there would be pure friction.
+    if (!runAgent && !confirm(approveConsequence(id))) return;
     body = { action, project: currentProject };
     if (runAgent) {
       const generic = `Gate ${id} was just approved. Continue the great_cto pipeline: claim the next ready task and implement it with TDD.`;
@@ -4733,6 +4920,32 @@ async function updateTaskPriority(id, priority) {
   }
 }
 
+/* ── One glyph cannot mean five things ─────────────────────────────────────
+ *
+ * A single em dash was doing duty for at least five different facts on this
+ * board: not loaded yet, measured and there is none, cannot be computed from
+ * what we have, no verdict, no date. On a screen where the figures are money and
+ * throughput, "we looked and it is zero" and "we could not look" are not the
+ * same answer, and the reader was being asked to guess which one they had.
+ *
+ * Three kinds, because three is what actually occurs here. Vocabulary follows
+ * the distinction statistical agencies draw between a value that is missing and
+ * one that is not applicable; the wording is ours, the discipline is theirs.
+ *
+ * The caller always passes the specific reason. A generic tooltip that repeats
+ * the glyph's category would add a hover and no information.
+ */
+const ABSENCE = {
+  none:         '—',      // measured; the answer is that there is none
+  uncomputable: 'n/a',    // the inputs for this figure do not exist
+  unloaded:     '·',      // no answer yet — the read has not landed
+};
+
+function absent(kind, why) {
+  const glyph = ABSENCE[kind] || ABSENCE.none;
+  return `<span class="absent" title="${esc(why)}" aria-label="${esc(why)}">${glyph}</span>`;
+}
+
 /* ── Dashboard ──────────────────────────────────────────────────────────── */
 function renderDashboard(m) {
   const llmUsd = m.cost?.llm_usd ?? 0;
@@ -4743,6 +4956,18 @@ function renderDashboard(m) {
   // tasks.md fallback with no dates) show a meaningless "—" despite real work.
   // (`??` kept 0 because done_in_window is 0, not null; `||` fixes that.)
   const done = (m.tasks?.done_in_window || m.tasks?.done) ?? 0;
+  // Three states, not two. `?? 0` folds "the payload has no tasks section" into
+  // the same 0 as "zero tasks done", and the tile then rendered that 0 as an
+  // absence — so a day-one project read "—" beside "+0 this week", the board
+  // reporting a failure to measure something it had measured fine. The backend
+  // always sends `tasks` (lib/metrics.mjs), so this is "—" only for a payload
+  // that really is missing it.
+  const doneKnown = m.tasks != null;
+  const costKnown = m.cost != null;
+  // NOT the same shape: avg_completion_min is a median over completions that
+  // carry timestamps, and the backend emits 0 when there are none — so 0 here
+  // means "could not be computed", not "took no time". "—" is the correct
+  // reading; do not "fix" this into a literal 0 m.
   const avgMin = m.avg_completion_min ?? 0;
   const cycleStat = m.cycle_time_stat === 'median_30d' ? 'Median cycle (30d)' : 'Avg cycle time';
 
@@ -4765,9 +4990,11 @@ function renderDashboard(m) {
     : (llmUsd > 0 ? `time-based estimate (no verdict data yet)` : 'no plans or tasks yet');
 
   const hero = [
-    { v: done || '—', sub: 'shipped', label: 'Tasks done', trend: `+${m.velocity?.this_week ?? 0} this week` },
+    { v: doneKnown ? done : absent('unloaded', 'the metrics payload carried no tasks section'), sub: 'shipped', label: 'Tasks done', trend: `+${m.velocity?.this_week ?? 0} this week` },
     {
-      v: aiSpend > 0 ? `$${aiSpend < 10 ? aiSpend.toFixed(2) : fmtMoney(aiSpend)}` : '—',
+      // $0.00 with nothing spent yet is a measurement; "—" would claim we never
+      // looked. The trend line underneath already says which of the two it is.
+      v: costKnown ? `$${aiSpend < 10 ? aiSpend.toFixed(2) : fmtMoney(aiSpend)}` : absent('unloaded', 'the metrics payload carried no cost section'),
       sub: '',
       label: 'AI spend',
       trend: llmTrend,
@@ -4784,7 +5011,7 @@ function renderDashboard(m) {
       : {
           // No MEASURED savings yet (no verdict cost data). Don't fabricate a
           // multiplier from the time-based estimate — show it's not measured.
-          v: '—',
+          v: absent('uncomputable', 'a measured multiplier needs verdict cost data, and there is none yet'),
           sub: '',
           label: 'Cost savings vs FTE',
           trend: aiSpend > 0
@@ -4802,12 +5029,12 @@ function renderDashboard(m) {
 
   const acc = m.acceptance || {};
   const secondary = [
-    { v: avgMin ? `${avgMin}` : '—', sub: avgMin ? 'm' : '', label: cycleStat },
-    { v: m.qa?.pass_rate != null ? m.qa.pass_rate : '—', sub: m.qa?.pass_rate != null ? '%' : '', label: m.qa?.pass_rate != null ? 'QA pass rate' : 'QA — run /qa', cls: 'green' },
+    { v: avgMin ? `${avgMin}` : absent('uncomputable', 'no completion in this window carried a timestamp to measure'), sub: avgMin ? 'm' : '', label: cycleStat },
+    { v: m.qa?.pass_rate != null ? m.qa.pass_rate : absent('none', 'no QA run recorded in this window'), sub: m.qa?.pass_rate != null ? '%' : '', label: m.qa?.pass_rate != null ? 'QA pass rate' : 'QA — run /qa', cls: 'green' },
     // Verified-acceptance metrics: cost of a change a gate actually APPROVED, and
     // how often work bounced. '—' when nothing was accepted in the window — an
     // honest gap, not a zero.
-    { v: acc.cost_per_accepted != null ? `$${acc.cost_per_accepted.toFixed(2)}` : '—', sub: '', label: acc.accepted ? `Cost / accepted (${acc.accepted})` : 'Cost / accepted' },
+    { v: acc.cost_per_accepted != null ? `$${acc.cost_per_accepted.toFixed(2)}` : absent('none', 'nothing was accepted in this window'), sub: '', label: acc.accepted ? `Cost / accepted (${acc.accepted})` : 'Cost / accepted' },
     { v: acc.rework_rounds ?? 0, sub: '', label: 'Rework rounds', cls: acc.rework_rounds ? 'amber' : 'green' },
     { v: m.security?.blocked ?? 0, sub: '', label: 'Open security blocks', cls: m.security?.blocked ? 'red' : 'green' },
     { v: m.tasks?.in_progress ?? 0, sub: '', label: 'In progress', cls: 'amber' },
@@ -5073,6 +5300,19 @@ function setNotifStatus(text, tone) {
 
 async function toggleShare() {
   const enabled = !document.getElementById('share-toggle').checked;
+  // Only on the way ON. Switching sharing OFF is the safe direction and asking
+  // there would train people to click through the dialog that matters. The card
+  // already explains what publishing means, but a toggle can be flipped without
+  // reading the card next to it, and revoking the link afterwards does not
+  // un-see what was already served.
+  if (enabled && !confirm(
+    'Publish a public report for this project?\n\n' +
+    'Anyone holding the link can read what shipped, the metrics and the activity,\n' +
+    'with no sign-in. Approving a gate republishes it automatically.\n\n' +
+    'Turning sharing off later revokes the link — it does not unpublish what has\n' +
+    'already been read.')) {
+    return;
+  }
   document.getElementById('share-loading').style.display = enabled ? 'flex' : 'none';
   document.getElementById('share-url-section').style.display = 'none';
   // BUG FIX: scope publish to the currently-selected project, not server's cwd
@@ -5207,6 +5447,51 @@ function closeSide() {
 document.addEventListener('keydown', e => { if (e.key === 'Escape') closeSide(); });
 
 /* ── Tabs ───────────────────────────────────────────────────────────────── */
+/* ── The sidebar as a drawer on narrow screens ──────────────────────────── */
+//
+// Three things a drawer owes a keyboard, all of them things a transform alone
+// does not give you: it leaves the tab order when closed, Escape closes it, and
+// focus moves in on open and back to the button that opened it on close.
+function menuIsOpen() {
+  return !!document.getElementById('sidebar')?.classList.contains('open');
+}
+
+function openMenu() {
+  const sb = document.getElementById('sidebar');
+  if (!sb) return;
+  sb.classList.add('open');
+  document.getElementById('sidebar-scrim')?.classList.add('open');
+  document.getElementById('menu-btn')?.setAttribute('aria-expanded', 'true');
+  document.body.style.overflow = 'hidden';
+  (sb.querySelector('.nav-item.active') || sb.querySelector('.nav-item'))?.focus();
+}
+
+// `restoreFocus` is false when the drawer closes because a tab was CHOSEN — the
+// user is looking at the panel they just picked, and yanking focus back to the
+// hamburger would undo the thing they came for. It is true when the drawer is
+// dismissed (Escape, scrim, the button), where the button is where focus was.
+function closeMenu(restoreFocus = true) {
+  const sb = document.getElementById('sidebar');
+  if (!sb || !sb.classList.contains('open')) return;
+  sb.classList.remove('open');
+  document.getElementById('sidebar-scrim')?.classList.remove('open');
+  const btn = document.getElementById('menu-btn');
+  btn?.setAttribute('aria-expanded', 'false');
+  document.body.style.overflow = '';
+  if (restoreFocus) btn?.focus();
+}
+
+function toggleMenu() { menuIsOpen() ? closeMenu() : openMenu(); }
+
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && menuIsOpen()) closeMenu(); });
+
+// Rotating a phone, or dragging a desktop window wider, un-applies the media
+// query — the drawer stops being a drawer while `overflow: hidden` is still on
+// the body, which is a page that will not scroll and no visible reason why.
+try {
+  matchMedia('(min-width: 769px)').addEventListener('change', (e) => { if (e.matches) closeMenu(false); });
+} catch (_) { /* older Safari: no addEventListener on MediaQueryList — drawer still works */ }
+
 function switchTab(id, el) {
   // `agents` has no sidebar entry by design: it is a drill-in from Dashboard.
   // Without this the call fell through to code that expects a nav element and
@@ -5214,6 +5499,7 @@ function switchTab(id, el) {
   if (!el) el = document.querySelector(`.nav-item[data-tab="${id}"]`)
     || document.querySelector('.nav-item[data-tab="dashboard"]');
   currentTab = id;
+  closeMenu(false);   // choosing a destination is the end of using the menu
   // sidebar nav
   document.querySelectorAll('.nav-item[data-tab]').forEach(t => {
     t.classList.toggle('active', t.dataset.tab === id);
@@ -5653,7 +5939,6 @@ function renderAgentProfile(p) {
         ${p.retired
           ? `<button type="button" onclick="restoreAgentAction('${esc(p.slug)}')">Restore agent</button>`
           : `<button type="button" class="danger" onclick="retireAgentAction('${esc(p.slug)}')">Retire agent</button>`}
-        <button type="button" disabled title="Opening external files is not yet wired up">Open prompt file</button>
       </div>
       <div style="font-size:11px;color:var(--text3);margin-top:8px">
         File: <code>${esc(p.file_path)}</code>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "great-cto",
-  "version": "2.97.0",
+  "version": "2.98.1",
   "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",