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 @@