From c216e287a42715b8999a3bd07550ecd3e2ccbc11 Mon Sep 17 00:00:00 2001
From: Minglong Pan <56749246+minglong51@users.noreply.github.com>
Date: Tue, 25 Aug 2026 01:38:14 -0700
Subject: [PATCH] fix(ui): loud clipboard denial, mid-width kill verb, phone
 legibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

From the 2026-08-24 dogfood walk (founder-agent-os/prototypes/
dogfood-reports-2026-08-24/agent-usage-manager.md):

- bug #1: copyHint had no .catch on navigator.clipboard.writeText — a
  denied write (permission, unfocused document) failed silently and the
  operator walked away believing they held a bootout command they
  didn't. Now flashes "copy failed — press ⌘C" on the chip, then
  selects the command for a manual copy (an active selection also
  pauses auto-refresh, so it can't be yanked). Guards the mid-flash
  re-render race (el.isConnected) so the console stays clean.
- bug #2: the 701–~1494px dead zone — the ~1.5kpx nowrap table scrolled
  the last column (the only kill verb) off-screen while the phone stack
  only engages ≤700px. The actions column (.c-act) is now
  position:sticky on the right above the phone breakpoint, right-aligned
  so the verbs hug the pinned edge (the nowrap launchctl hint inflates
  the column). Measured at 800px, unscrolled: 0/40 kill buttons visible
  before, 40/40 + 5/5 launchctl chips after.
- F1: phone rows rendered unitless cpu/mem ("1.0  155") — .unit spans,
  hidden on desk (headers carry the units), shown in the phone stack.
- F2: phone child rows lost the cmdline, their only identity — child
  .c-cmd stays visible in the phone stack, wrapped.
- F3: the phone launchd hint ellipsed the job label (the one part that
  differs) — now truncates from the left (direction: rtl) at 240px, so
  "…501/ai.hermes.gateway-frontdoor" instead of "launchctl boot…".

Out of scope (follow-up): F4, the chronic idle daemon pinned top-row —
needs cmdline-granular idle_ok matching in app.py, a config-semantics
change.

Verified: 75 pytest pass (incl. new test_index_frontend_regressions);
browse-verified against an isolated :8766 instance (live :8765 never
touched, zero kill clicks): clipboard denial simulated by overriding
writeText to reject (flash at t=1ms, restore+select at t=1503ms;
success path still flashes "copied ✓"); sticky verbs reachable at
800px and 1440px; phone rows carry units + child cmdlines; hint chips
show the job-label tail; console clean. LLD §6 line cites refreshed
per the design-doc contract.
---
 agent_usage_manager/static/index.html | 74 ++++++++++++++++++++++-----
 docs/design/LLD.md                    | 37 +++++++++-----
 tests/test_smoke.py                   | 24 +++++++++
 3 files changed, 108 insertions(+), 27 deletions(-)

diff --git a/agent_usage_manager/static/index.html b/agent_usage_manager/static/index.html
index 43ff8da..3b87728 100644
--- a/agent_usage_manager/static/index.html
+++ b/agent_usage_manager/static/index.html
@@ -27,6 +27,18 @@
   td.cmd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            max-width: 380px; color: #8b949e; }
   td.num { text-align: right; font-variant-numeric: tabular-nums; }
+  /* The all-nowrap table measures ~1.5kpx wide, so between the phone stack
+     (≤700px) and a full-width window .wrap scrolls horizontally and the last
+     column — the only kill verb — sits off-screen. Pin the actions column to
+     the right edge so it's reachable at every width. The nowrap launchctl hint
+     inflates the column's width, so right-align too: the verbs hug the pinned
+     edge instead of the cell's left. Phone rows are stacked blocks with no
+     horizontal overflow, so this is desk/mid-width only. */
+  @media (min-width: 701px) {
+    .c-act { position: sticky; right: 0; background: #0d1117;
+             border-left: 1px solid #21262d; text-align: right; }
+    tr.child td.c-act { background: #0b0f14; }
+  }
   .label { background: #1f6feb33; color: #79c0ff; padding: 1px 7px;
            border-radius: 10px; font-size: 12px; }
   .svc { background: #bb800933; color: #d29922; padding: 1px 7px; margin-left: 5px;
@@ -44,6 +56,9 @@
   .kids { color: #79c0ff; font-size: 11px; margin-left: 5px; cursor: pointer;
           border-bottom: 1px dotted #30363d; }
   .kids:hover { color: #a5d6ff; }
+  /* Units are hidden on desk — the column headers already say "cpu %"/"mem MB".
+     The phone stack drops the headers, so there the numbers carry their own. */
+  .unit { display: none; }
   .spark { display: block; margin-top: 3px; }
   .spark polyline { fill: none; stroke: #d29922; stroke-width: 1.2; }
   .spark line { stroke: #21262d; stroke-width: 1; }
@@ -72,11 +87,19 @@
   @media (max-width: 700px) {
     th, td { padding: 6px 8px; }
     .c-status, .c-up, .c-cmd, .c-pid { display: none; }  /* keep agent/cpu/mem/actions */
+    /* …but a child row's cmdline IS its identity (on desk it's what tells the
+       zsh wrapper from the helper from the MCP server) — keep it, wrapped. */
+    tr.child td.c-cmd { display: block; max-width: none; white-space: normal;
+                        overflow-wrap: anywhere; }
+    .unit { display: inline; }  /* headers are gone below — numbers self-label */
     header { padding: 10px 12px; gap: 10px; }
     #stale { padding: 6px 12px; }
-    /* visually truncate the launchctl hint; click-to-copy still copies the full text */
-    code.hint { display: inline-block; max-width: 110px; overflow: hidden;
-                text-overflow: ellipsis; vertical-align: middle; }
+    /* Truncate the launchctl hint from the LEFT: every supervised row starts
+       with the identical 'launchctl bootout gui/501/', so clipping the right
+       end renders every row's chip the same and ellipses the job label — the
+       one part that differs. Click-to-copy still copies the full text. */
+    code.hint { display: inline-block; max-width: 240px; overflow: hidden;
+                text-overflow: ellipsis; vertical-align: middle; direction: rtl; }
     /* The flat table measures ~554px, so at 375px the kill verb sits off-screen.
        Stack each row instead — agent+badges / cpu·mem / actions — with column
        headers gone (they no longer map to anything) and the sparkline hidden
@@ -109,7 +132,7 @@ <h1>agent usage manager</h1>
       <th>agent</th><th class="c-pid">pid</th><th class="c-status">status</th>
       <th class="num">cpu %</th><th class="num">mem MB</th>
       <th class="num gpu">gpu MB</th><th class="num c-up">uptime</th>
-      <th class="c-cmd">command</th><th></th>
+      <th class="c-cmd">command</th><th class="c-act"></th>
     </tr>
   </thead>
 </table>
@@ -234,21 +257,44 @@ <h1>agent usage manager</h1>
 }
 
 function copyHint(el) {
-  navigator.clipboard?.writeText(el.textContent).then(() => {
+  // A denied clipboard write (permission prompt dismissed, unfocused document,
+  // no clipboard API) must not fail silently — the operator would walk away
+  // believing they hold a bootout command they don't have. Say so, then select
+  // the chip text so a manual ⌘C still works (an active selection also pauses
+  // auto-refresh — see refresh() — so the re-render can't yank it mid-copy).
+  const fail = () => {
     const prev = el.textContent;
-    el.textContent = "copied ✓";
-    setTimeout(() => { el.textContent = prev; }, 1000);
-  });
+    el.textContent = "copy failed — press ⌘C";
+    setTimeout(() => {
+      // a refresh() re-render may have replaced the row mid-flash
+      if (!el.isConnected) return;
+      el.textContent = prev;
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }, 1500);
+  };
+  try {
+    const w = navigator.clipboard && navigator.clipboard.writeText(el.textContent);
+    if (!w) { fail(); return; }
+    w.then(() => {
+      const prev = el.textContent;
+      el.textContent = "copied ✓";
+      setTimeout(() => { el.textContent = prev; }, 1000);
+    }).catch(fail);
+  } catch (e) { fail(); }
 }
 
 function childRows(tree) {
   return tree.filter(c => c.depth > 0).map(c => `<tr class="child">
     <td style="padding-left:${12 + c.depth * 14}px">↳ ${esc(c.name)}</td>
     <td class="c-pid">${c.pid}</td><td class="c-status"></td>
-    <td class="num">${c.cpu_percent.toFixed(1)}</td>
-    <td class="num">${c.mem_mb.toFixed(0)}</td>
+    <td class="num">${c.cpu_percent.toFixed(1)}<span class="unit">%</span></td>
+    <td class="num">${c.mem_mb.toFixed(0)}<span class="unit"> MB</span></td>
     <td class="num gpu"></td><td class="num c-up"></td>
-    <td class="cmd c-cmd" title="${esc(c.cmdline)}">${esc(c.cmdline)}</td><td></td>
+    <td class="cmd c-cmd" title="${esc(c.cmdline)}">${esc(c.cmdline)}</td><td class="c-act"></td>
   </tr>`).join("");
 }
 
@@ -312,12 +358,12 @@ <h1>agent usage manager</h1>
     <td><span class="label">${esc(x.label)}</span>${svc}${flag}${kids}</td>
     <td class="c-pid">${x.pid}</td>
     <td class="c-status"><span class="dot ${x.alive?'live':'dead'}"></span>${esc(x.status)}</td>
-    <td class="num" title="${x.cpu_percent.toFixed(0)}% of one core · ${(x.cpu_percent/cpus).toFixed(0)}% of all ${cpus} cores">${x.cpu_percent.toFixed(1)}${spark(x.trend)}</td>
-    <td class="num">${x.mem_mb.toFixed(0)}</td>
+    <td class="num" title="${x.cpu_percent.toFixed(0)}% of one core · ${(x.cpu_percent/cpus).toFixed(0)}% of all ${cpus} cores">${x.cpu_percent.toFixed(1)}<span class="unit">%</span>${spark(x.trend)}</td>
+    <td class="num">${x.mem_mb.toFixed(0)}<span class="unit"> MB</span></td>
     <td class="num gpu">${x.gpu_mem_mb==null?'—':x.gpu_mem_mb.toFixed(0)}</td>
     <td class="num c-up">${dur(x.uptime_s)}</td>
     <td class="cmd c-cmd" title="${esc(x.cmdline)}">${esc(x.cmdline)}</td>
-    <td>${actions}</td>
+    <td class="c-act">${actions}</td>
   </tr>`;
 }
 
diff --git a/docs/design/LLD.md b/docs/design/LLD.md
index c5de65e..0c33f14 100644
--- a/docs/design/LLD.md
+++ b/docs/design/LLD.md
@@ -1,6 +1,8 @@
 # agent-usage-manager — Low-Level Design
 
-**Refreshed:** 2026-08-19 (0.2.5 — `launchd_labels:`, `test-alert`, missing-config
+**Refreshed:** 2026-08-25 (frontend dogfood fixes — clipboard-denial path,
+sticky actions column, phone units/child-cmdline/left-truncated hint);
+previously 2026-08-19 (0.2.5 — `launchd_labels:`, `test-alert`, missing-config
 surfacing, kill-confirm/token-prompt wording, `list` flags caveat).
 
 Code layout: one FastAPI module (`agent_usage_manager/app.py`), one CLI module
@@ -314,18 +316,18 @@ Applies to every request:
 
 ## 6. Frontend (static/index.html)
 
-Single inline `<script>` (index.html:119-418), no framework.
+Single inline `<script>` (index.html:140-460), no framework.
 
-- **Poll loop:** `refresh()` every 3s (index.html:417-418). On fetch failure
+- **Poll loop:** `refresh()` every 3s (index.html:459-460). On fetch failure
   the table is kept but dimmed with a stale banner (`body.stale`,
-  index.html:343-351) — never blank data someone might kill from. Skips
+  index.html:378-387) — never blank data someone might kill from. Skips
   re-render while text is selected (copying a launchctl hint).
 - **Keyed rendering:** one `<tbody>` per agent, keyed by `pid:create_time`
   (`rowKey`; the `bodies`/`expanded` maps) so a recycled pid can't inherit
   another agent's row; rows are rewritten in place, tbodys sorted
   flagged-first (hot/churn/leak/idle, then the server's CPU-desc order within
   a group) but **only reordered when the pointer is off the table**
-  (`overTable`, index.html:137-140, 406-410) so the kill button can't shift
+  (`overTable`, index.html:159-161, 450-454) so the kill button can't shift
   under the cursor. The header carries the flag counts (`1 hot · 4 idle`).
 - **Kill flow:** `kill(rowKey, force)` — the row's payload is looked up in
   `lastRows` (keyed by `pid:create_time`, rebuilt each refresh) so the
@@ -342,19 +344,28 @@ Single inline `<script>` (index.html:119-418), no framework.
   ✓ and ✗ result lines auto-clear on a `setTimeout` (longer for the ✗
   partial-failure, which needs reading time) so no outcome sticks forever.
 - **Tree expansion:** `toggleTree`/`loadTree`/`renderTree`
-  (index.html:255-276) fetch `/api/tree/{pid}` and insert indented child rows;
-  expanded subtrees are re-fetched on every refresh (index.html:414).
+  (index.html:297-318) fetch `/api/tree/{pid}` and insert indented child rows;
+  expanded subtrees are re-fetched on every refresh (index.html:456).
 - **Rendering details:** `esc()` HTML-escapes all host data (injection into a
-  page with a kill endpoint is a real risk, index.html:143-148); `spark()`
+  page with a kill endpoint is a real risk, index.html:165-170); `spark()`
   draws the SVG sparkline; badges hot/idle/churn/leak with explanatory
-  tooltips (index.html:291-299; the launchd badge's tooltip follows the
+  tooltips (index.html:333-341; the launchd badge's tooltip follows the
   payload's `keepalive` — "won't stick" only for KeepAlive jobs); supervised
   rows swap kill buttons for a
-  click-to-copy `launchctl bootout` hint; GPU column hidden when nothing
-  reports GPU (`body.hide-gpu`); protected rows get disabled buttons (the
-  server refuses regardless). At ≤700px rows stack (agent+badges / cpu·mem /
+  click-to-copy `launchctl bootout` hint whose denial path is loud — a
+  rejected clipboard write flashes "copy failed" on the chip and selects the
+  command for a manual ⌘C, never a silent no-op; GPU column hidden when
+  nothing reports GPU (`body.hide-gpu`); protected rows get disabled buttons
+  (the server refuses regardless). The actions column is `position: sticky`
+  on the right above the phone breakpoint (`.c-act`, index.html:35-39), so
+  the kill verb stays on-screen while the ~1.5kpx-wide nowrap table scrolls
+  horizontally at mid-width. At ≤700px rows stack (agent+badges / cpu·mem /
   actions), the sparkline hides, and the column headers drop, so the
-  kill verb is on-screen at phone width.
+  kill verb is on-screen at phone width; with the headers gone the cpu/mem
+  numbers carry their own units (`.unit`), child rows keep their cmdline
+  (their only identity, `tr.child td.c-cmd`), and the launchd hint truncates
+  from the left (`direction: rtl`) so the job label — not the identical
+  `launchctl bootout gui/501/` prefix — stays visible.
 
 ## 7. Error handling conventions
 
diff --git a/tests/test_smoke.py b/tests/test_smoke.py
index 4407645..57a8588 100644
--- a/tests/test_smoke.py
+++ b/tests/test_smoke.py
@@ -1,4 +1,5 @@
 import os
+import re
 
 import pytest
 from fastapi.testclient import TestClient
@@ -124,6 +125,29 @@ def test_index_serves(client):
     assert client.get("/").status_code == 200
 
 
+def test_index_frontend_regressions(client):
+    # Static contracts behind the 2026-08-24 dogfood frontend fixes (there is
+    # no JS test runner here; these pin the served page's behavior-bearing
+    # markup so the fixed paths can't silently regress).
+    html = client.get("/").text
+    # A denied clipboard write must say so, not fail silently (bug #1).
+    copy_fn = re.search(r"function copyHint\(.*?\n\}", html, re.S)
+    assert copy_fn, "copyHint not found in served page"
+    assert ".catch(" in copy_fn.group(0)
+    assert "copy failed" in copy_fn.group(0)
+    # Mid-width dead zone (bug #2): the actions column is sticky-pinned to the
+    # right edge so the kill verb is reachable while .wrap scrolls.
+    assert "position: sticky" in html
+    assert 'class="c-act"' in html
+    # Phone stack (F1/F2/F3): numbers carry their units, child rows keep the
+    # cmdline that is their only identity, and the launchd hint clips its
+    # identical 'launchctl …' prefix (rtl) instead of the job label.
+    assert '<span class="unit">%</span>' in html
+    assert '<span class="unit"> MB</span>' in html
+    assert "tr.child td.c-cmd" in html
+    assert "direction: rtl" in html
+
+
 def test_kill_pid1_refused(client):
     # PID 1 is always protected (token supplied, so it's the target check firing)
     assert client.post("/api/kill/1", headers=TOKEN).status_code == 403