@songsid/agend 2.1.1-beta.2 → 2.1.1-beta.21

package/dist/types.d.ts

@@ -47,6 +47,17 @@ export interface HangDetectorConfig {
     enabled: boolean;
     timeout_minutes: number;
 }
+/**
+ * Stable logical terminal geometry for an instance's tmux window.
+ *
+ * `enabled: false` is the compatibility escape hatch: the window is pinned to
+ * tmux's historical 80x24 geometry rather than inheriting the larger defaults.
+ */
+export interface TerminalConfig {
+    enabled?: boolean;
+    columns?: number;
+    rows?: number;
+}
 export interface DailySummaryConfig {
     enabled: boolean;
     hour: number;
@@ -130,6 +141,8 @@ export interface InstanceConfig {
     agent_mode?: "mcp" | "cli";
     /** Hang detector override for this instance. */
     hang_detector?: HangDetectorConfig;
+    /** Logical terminal size. Defaults to 120x36; set enabled=false for 80x24 compatibility. */
+    terminal?: TerminalConfig;
     /** Command to paste raw before each user message (e.g. "/chat load base.json") */
     pre_task_command?: string;
 }
@@ -219,6 +232,11 @@ export interface FleetTemplate {
     team?: boolean;
     instances: Record<string, TemplateInstanceDef>;
 }
+/** Web UI feature toggles (fleet.yaml `web:` section). */
+export interface WebConfig {
+    /** Show the AI subscription usage panel on /view and serve /api/ai-usage (default true). */
+    usage_panel?: boolean;
+}
 export interface FleetConfig {
     channel?: ChannelConfig;
     channels?: ChannelConfig[];
@@ -229,6 +247,7 @@ export interface FleetConfig {
     templates?: Record<string, FleetTemplate>;
     profiles?: Record<string, ProfileConfig>;
     health_port?: number;
+    web?: WebConfig;
 }
 /**
  * User-authored fleet.yaml before defaults are merged into instances.

package/dist/ui/view.html

@@ -7,8 +7,8 @@
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   :root { --bg:#0d1117; --panel:#161b22; --border:#21262d; --fg:#c9d1d9; --dim:#8b949e; --accent:#58a6ff; }
-  html, body { height: 100%; }
-  body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: flex; height: 100vh; overflow: hidden; }
+  html, body { width: 100%; height: 100%; }
+  body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: flex; width: 100vw; min-width: 0; height: 100vh; overflow: hidden; }
 
   /* Sidebar */
   #sidebar { width: 240px; flex: 0 0 240px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
@@ -31,21 +31,35 @@
 
   /* Main */
   #main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-  #term { flex: 1; background: #000; overflow: auto; padding: 10px 12px; }
-  #term pre { font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; line-height: 1.2; white-space: pre; color: #d0d0d0; }
-
-  /* Card */
-  #card { background: var(--panel); border-top: 1px solid var(--border); padding: 14px 18px; display: flex; gap: 16px; align-items: flex-start; }
-  #avatarBox { width: 56px; height: 56px; flex: 0 0 56px; }
-  .avatar-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
-  .avatar-ph { width: 56px; height: 56px; border-radius: 50%; background: #30363d; color: var(--dim); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; text-transform: uppercase; user-select: none; }
-  #cardBody { flex: 1; min-width: 0; }
-  #cardBody .row1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
-  #cardBody .dname { font-size: 16px; font-weight: 600; }
-  #cardBody .role { color: var(--accent); font-size: 13px; }
-  #cardBody .meta { color: var(--dim); font-size: 12px; margin-top: 3px; }
-  #cardBody .desc { font-size: 13px; margin-top: 6px; color: #adbac7; white-space: pre-wrap; }
-  #editBtn { background: #21262d; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 13px; }
+  /* Padding kept at 5/6px: enough that glyphs don't touch the edge, small
+     enough that the terminal keeps essentially the whole main area. */
+  #term { flex: 1; background: #000; overflow: auto; scrollbar-gutter: stable; padding: 5px 6px; }
+  #term pre { min-width: 100%; min-height: 100%; font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; line-height: 1.2; white-space: pre; color: #d0d0d0; }
+
+  /* Card — a single compact bar by default so the terminal keeps the height.
+     `.expanded` restores the tall layout with avatar + description. */
+  #card { background: var(--panel); border-top: 1px solid var(--border); padding: 5px 10px; display: flex; gap: 10px; align-items: center; }
+  #avatarBox { width: 24px; height: 24px; flex: 0 0 24px; }
+  .avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
+  .avatar-ph { width: 100%; height: 100%; border-radius: 50%; background: #30363d; color: var(--dim); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; text-transform: uppercase; user-select: none; }
+  #cardBody { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; overflow: hidden; }
+  #cardBody .row1 { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; }
+  #cardBody .dname { font-size: 13px; font-weight: 600; white-space: nowrap; }
+  #cardBody .role { color: var(--accent); font-size: 12px; white-space: nowrap; }
+  #cardBody .meta { color: var(--dim); font-size: 11px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #cardBody .desc { display: none; }
+  #cardToggle { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 12px; padding: 2px 4px; flex: 0 0 auto; }
+  #cardToggle:hover { color: var(--fg); }
+
+  #card.expanded { align-items: flex-start; padding: 12px 14px; }
+  #card.expanded #avatarBox { width: 48px; height: 48px; flex: 0 0 48px; }
+  #card.expanded .avatar-ph { font-size: 20px; }
+  #card.expanded #cardBody { display: block; }
+  #card.expanded #cardBody .dname { font-size: 16px; }
+  #card.expanded #cardBody .role { font-size: 13px; }
+  #card.expanded #cardBody .meta { font-size: 12px; margin-top: 3px; white-space: normal; overflow: visible; }
+  #card.expanded #cardBody .desc { display: block; font-size: 13px; margin-top: 6px; color: #adbac7; white-space: pre-wrap; }
+  #editBtn { background: #21262d; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 12px; flex: 0 0 auto; }
   #editBtn:hover { border-color: var(--accent); }
 
   /* Edit form */
@@ -68,9 +82,43 @@
   .help-panel ul { margin: 8px 0 0 18px; }
   .help-panel li { font-size: 13px; margin: 6px 0; color: var(--fg); }
   .help-panel .close { position: absolute; top: 14px; right: 16px; cursor: pointer; color: var(--dim); font-size: 22px; line-height: 1; background: none; border: none; }
+
+  /* AI usage panel (shares .help-panel chrome) */
+  .u-provider { margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--border); }
+  .u-provider:first-of-type { border-top: none; padding-top: 0; }
+  .u-head { display: flex; align-items: baseline; gap: 8px; }
+  .u-head .u-name { font-size: 14px; font-weight: 600; }
+  .u-head .u-plan { color: var(--dim); font-size: 11px; }
+  .u-metric { margin: 8px 0; }
+  .u-row { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
+  .u-row .u-label { color: var(--dim); flex: 1; min-width: 0; }
+  .u-row .u-val { font-variant-numeric: tabular-nums; }
+  .u-row .u-status { font-size: 11px; font-weight: 600; }
+  .u-status.warn { color: #d29922; } .u-status.crit { color: #f85149; }
+  .u-meter { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 4px; }
+  .u-fill { height: 100%; border-radius: 3px; background: var(--accent); min-width: 2px; }
+  .u-fill.warn { background: #d29922; } .u-fill.crit { background: #f85149; }
+  .u-sub { color: var(--dim); font-size: 11px; margin-top: 2px; font-variant-numeric: tabular-nums; }
+  .u-err { color: #d29922; font-size: 12px; margin: 6px 0; }
+  /* Neutral note (subscription plan, or "sign-in needed") — deliberately not the
+     amber error colour, since neither state is a failure. */
+  .u-note { color: var(--dim); font-size: 12px; margin: 6px 0; }
+  .u-foot { color: var(--dim); font-size: 11px; margin-top: 14px; display: flex; gap: 8px; align-items: baseline; }
+  .u-foot button { background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--dim); cursor: pointer; font-size: 11px; padding: 2px 8px; }
+  .u-foot button:hover { color: var(--fg); border-color: var(--accent); }
+
+  #densityBtn { font-size: 14px; font-weight: 600; letter-spacing: -.5px; }
+  @media (max-width: 700px) {
+    #sidebar { width: 180px; flex-basis: 180px; }
+    /* The compact bar must stay one line; only the expanded form wraps. */
+    #card.expanded { flex-wrap: wrap; padding: 10px 12px; }
+    #edit { flex-basis: 100%; }
+  }
 </style>
 </head>
 <body>
+  <button class="help-btn" id="usageBtn" title="AI usage" style="right:140px; display:none">📊</button>
+  <button class="help-btn" id="densityBtn" title="Font density" style="right:98px">⤢</button>
   <button class="help-btn" id="langBtn" title="Language" style="right:56px">🌐</button>
   <button class="help-btn" id="helpBtn" title="Help">ℹ️</button>
   <div class="help-backdrop" id="helpBackdrop"></div>
@@ -78,6 +126,10 @@
     <button class="close" id="helpClose" title="Close">×</button>
     <div id="helpContent"></div>
   </aside>
+  <aside class="help-panel" id="usagePanel">
+    <button class="close" id="usageClose" title="Close">×</button>
+    <div id="usageContent"></div>
+  </aside>
   <div id="sidebar"><h1 data-i18n="viewTitle">AgEnD · View</h1><div id="list"></div></div>
   <div id="main">
     <div id="term"><pre id="pre"></pre></div>
@@ -88,6 +140,7 @@
         <div class="meta" id="meta"></div>
         <div class="desc" id="desc"></div>
       </div>
+      <button id="cardToggle" title="Expand profile" aria-expanded="false">▲</button>
       <button id="editBtn" data-i18n="editProfile">✏️ Edit</button>
       <div id="edit">
         <input id="fDisplay" data-i18n-ph="displayName" placeholder="Display name">
@@ -121,13 +174,23 @@
       saveHint: "Viewing is open (read-only). Saving requires the web.token (~/.agend/web.token).", helpTitle: "📖 Help",
       help1: "Pick an instance on the left → its live terminal shows on the right",
       help2: "Click a group header ▼/▶ to collapse/expand", help3: "✏️ Edit changes display name, role, description",
-      help4: "Drag to reorder (needs web.token permission)" },
+      help4: "Drag to reorder (needs web.token permission)",
+      help5: "Click ⤢ to cycle font density: Fit → Comfortable → Compact",
+      densityFit: "Fit", densityComfortable: "Comfortable", densityCompact: "Compact", densityLabel: "Font density",
+      usageTitle: "📊 AI Usage", usageEmpty: "No AI CLI logins found on this machine.",
+      usageUpdated: "updated", usageRefresh: "Refresh", usageHigh: "high", usageNear: "near limit",
+      usageResets: "resets in {t}", usageSoon: "resets soon", usageFail: "Could not load usage data." },
     "zh-TW": { viewTitle: "AgEnD · 檢視", editProfile: "✏️ 編輯", save: "儲存", cancel: "取消",
       displayName: "顯示名稱", role: "角色", description: "描述", tokenPh: "web.token（儲存時需要）",
       saveHint: "檢視為公開（唯讀）。儲存需要 web.token（~/.agend/web.token）。", helpTitle: "📖 使用說明",
       help1: "左側選 instance → 右側顯示即時 terminal 畫面",
       help2: "點 group header ▼/▶ 收合/展開", help3: "✏️ Edit 可修改顯示名稱、角色、描述",
-      help4: "拖曳可調整順序（需 web.token 權限）" },
+      help4: "拖曳可調整順序（需 web.token 權限）",
+      help5: "點 ⤢ 循環切換字級密度：剛好填滿 → 舒適 → 精簡",
+      densityFit: "剛好填滿", densityComfortable: "舒適", densityCompact: "精簡", densityLabel: "字級密度",
+      usageTitle: "📊 AI 訂閱用量", usageEmpty: "本機沒有偵測到已登入的 AI CLI。",
+      usageUpdated: "更新於", usageRefresh: "重新整理", usageHigh: "偏高", usageNear: "接近上限",
+      usageResets: "{t} 後重置", usageSoon: "即將重置", usageFail: "無法載入用量資料。" },
   };
   let lang = localStorage.getItem("agend_lang") || (navigator.language && navigator.language.toLowerCase().startsWith("zh") ? "zh-TW" : "en");
   if (!I18N[lang]) lang = "en";
@@ -137,14 +200,28 @@
     document.querySelectorAll("[data-i18n-ph]").forEach(e => { e.setAttribute("placeholder", T(e.getAttribute("data-i18n-ph"))); });
     const hc = q("helpContent");
     if (hc) { hc.innerHTML = ""; const h3 = document.createElement("h3"); h3.textContent = T("helpTitle"); hc.append(h3);
-      const ul = document.createElement("ul"); for (const k of ["help1","help2","help3","help4"]) { const li = document.createElement("li"); li.textContent = T(k); ul.append(li); } hc.append(ul); }
+      const ul = document.createElement("ul"); for (const k of ["help1","help2","help3","help4","help5"]) { const li = document.createElement("li"); li.textContent = T(k); ul.append(li); } hc.append(ul); }
+    renderDensityBtn();
   }
 
   let roster = [];
   let rosterByName = new Map();
   let current = null;
   let poll = null;
-  let fitted = false;
+  // Pane grid in cells, reported by /api/pane's X-Pane-Cols / X-Pane-Rows.
+  // This — not the captured text — is the font-size input.
+  let paneCols = 0, paneRows = 0;
+  let lastFitKey = "";          // skip redundant recalcs
+  let appliedSize = 0;          // last font-size actually written to #pre
+  let resizeTimer = null;
+  // Font density — the manual escape hatch. Once the tmux grid is large
+  // (120x32), the auto-fit size is necessarily small, so the user needs a way
+  // to trade "everything visible" against "readable glyphs".
+  const DENSITY = { fit: 1, comfortable: 1.25, compact: 0.8 };
+  const DENSITY_GLYPH = { fit: "⤢", comfortable: "A+", compact: "A−" };
+  const DENSITY_ORDER = ["fit", "comfortable", "compact"];
+  let density = localStorage.getItem("agend_view_density");
+  if (!DENSITY[density]) density = "fit";
   const collapsed = new Set();  // group names the user has collapsed
   // Drag-sort state
   let sortGroups = new Map();   // groupName    -> sort_index (persisted override)
@@ -456,32 +533,114 @@
       }
       const text = await r.text();
       if (target !== current) return;
+      // Pane grid comes from tmux, so a sparse frame can't distort the fit.
+      const c = Number(r.headers.get("X-Pane-Cols")), rw = Number(r.headers.get("X-Pane-Rows"));
+      if (c >= 1 && rw >= 1 && (c !== paneCols || rw !== paneRows)) { paneCols = c; paneRows = rw; lastFitKey = ""; }
       q("pre").innerHTML = ansiToHtml(text);
-      if (!fitted) { fitFont(text); fitted = true; }
+      fitFont();
     } catch { /* transient network error — keep last frame */ }
   }
 
-  // Fit font size so the widest line fits the terminal width. Recomputed only
-  // on instance switch (fitted flag), not every poll.
-  function fitFont(text) {
-    const cols = text.split("\n").reduce((m, l) => Math.max(m, l.replace(/\x1b\[[0-9;]*m/g, "").length), 0);
-    if (cols < 1) return;
-    const termW = q("term").clientWidth - 24;
-    // monospace char width ≈ 0.6 × font-size
-    let size = Math.floor(termW / (cols * 0.6));
-    size = Math.max(8, Math.min(size, 16));
-    q("pre").style.fontSize = size + "px";
+  // ── Font sizing ───────────────────────────────────────
+  // Measured advance width of one monospace cell as a fraction of font-size.
+  // The old hardcoded .6em was only an estimate and drifts per resolved font.
+  // The ratio is font-size independent, so measuring once is enough.
+  let cellRatio = 0;
+  function glyphRatio() {
+    if (cellRatio) return cellRatio;
+    const probe = document.createElement("span");
+    probe.style.cssText = "position:absolute;visibility:hidden;white-space:pre;left:-9999px;top:0;font-size:100px";
+    probe.style.fontFamily = getComputedStyle(q("pre")).fontFamily;
+    probe.textContent = "0".repeat(100);
+    document.body.appendChild(probe);
+    const w = probe.getBoundingClientRect().width;
+    probe.remove();
+    if (w > 0) cellRatio = w / 100 / 100;   // ÷100 chars, ÷100px font-size
+    return cellRatio || 0.6;                // headless / odd env → old estimate
+  }
+
+  // The removed 48px ceiling was what made an 80x24 pane render at ~33px on a
+  // 1080p screen — the "font is huge" complaint. A single desktop range is
+  // enough; /view is not targeting phones.
+  const MIN_PX = 12, MAX_PX = 22;
+
+  // Order: fit → clamp → user density → absolute readability bounds. When the
+  // clamped size can't show all `cols`, #term scrolls rather than shrinking
+  // below the floor.
+  function fitFont() {
+    if (paneCols < 1 || paneRows < 1) return;   // no trustworthy size yet
+    const term = q("term"), pre = q("pre");
+    const cs = getComputedStyle(term);
+    const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+    const padY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+    const innerW = Math.max(1, term.clientWidth - (padX || 0));
+    const innerH = Math.max(1, term.clientHeight - (padY || 0));
+    const key = `${paneCols}x${paneRows}@${Math.round(innerW)}x${Math.round(innerH)}/${density}`;
+    if (key === lastFitKey) return;
+    const pcs = getComputedStyle(pre);
+    const lhRatio = parseFloat(pcs.lineHeight) / parseFloat(pcs.fontSize);
+    const lineH = Number.isFinite(lhRatio) && lhRatio > 0 ? lhRatio : 1.2;
+    const widthFit = innerW / (paneCols * glyphRatio());
+    const heightFit = innerH / (paneRows * lineH);
+    // 0.5% slack keeps an exact fit from rounding into a scrollbar (paired with
+    // scrollbar-gutter:stable, that's what stops resize→scrollbar→resize loops).
+    let size = Math.min(widthFit, heightFit) * 0.995;
+    size = Math.max(MIN_PX, Math.min(size, MAX_PX));
+    size *= DENSITY[density] || 1;
+    size = Math.max(8, Math.min(size, 32));
+    lastFitKey = key;
+    // Sub-pixel churn (a scrollbar appearing shrinks the box, which would shrink
+    // the font, which would hide the scrollbar again) resolves to a no-op here.
+    if (Math.abs(size - appliedSize) < 0.75) return;
+    appliedSize = size;
+    pre.style.fontSize = size.toFixed(2) + "px";
+  }
+
+  function scheduleFit() {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => { lastFitKey = ""; fitFont(); }, 80);
+  }
+
+  function renderDensityBtn() {
+    const b = q("densityBtn");
+    if (!b) return;
+    b.textContent = DENSITY_GLYPH[density];
+    b.title = `${T("densityLabel")}: ${T("density" + density.charAt(0).toUpperCase() + density.slice(1))}`;
+  }
+
+  function cycleDensity() {
+    density = DENSITY_ORDER[(DENSITY_ORDER.indexOf(density) + 1) % DENSITY_ORDER.length];
+    localStorage.setItem("agend_view_density", density);
+    renderDensityBtn();
+    lastFitKey = "";
+    fitFont();
   }
 
   function select(name) {
     if (name === current) return;
-    current = name; fitted = false;
+    current = name;
+    lastFitKey = "";            // force a refit once the new pane's size lands
     exitEdit();
     q("pre").textContent = "";  // blank the old instance's output immediately
     renderList(); renderCard(); refreshPane();
   }
 
   // ── Edit ──────────────────────────────────────────────
+  // The card is a one-line bar by default; expanding it (or editing) is what
+  // borrows height back from the terminal.
+  let cardExpanded = localStorage.getItem("agend_view_card_expanded") === "1";
+  function applyCardExpanded(on) {
+    q("card").classList.toggle("expanded", on);
+    const t = q("cardToggle");
+    t.textContent = on ? "▼" : "▲";
+    t.setAttribute("aria-expanded", on ? "true" : "false");
+    scheduleFit();   // the terminal just gained or lost height
+  }
+  function setCardExpanded(on, persist) {
+    if (persist) { cardExpanded = on; localStorage.setItem("agend_view_card_expanded", on ? "1" : "0"); }
+    applyCardExpanded(on);
+  }
+
   function enterEdit() {
     const it = roster.find(r => r.instance_name === current);
     if (!it) return;
@@ -490,14 +649,18 @@
     q("fDesc").value = it.description || "";
     q("fToken").value = localStorage.getItem("agend_web_token") || "";
     q("msg").textContent = "";
+    applyCardExpanded(true);          // form needs the room; don't persist it
     q("cardBody").style.display = "none";
+    q("cardToggle").style.display = "none";
     q("editBtn").style.display = "none";
     q("edit").style.display = "flex";
   }
   function exitEdit() {
     q("edit").style.display = "none";
     q("cardBody").style.display = "";
+    q("cardToggle").style.display = "";
     q("editBtn").style.display = "";
+    applyCardExpanded(cardExpanded);  // back to the user's own preference
   }
 
   async function save() {
@@ -529,13 +692,108 @@
   q("editBtn").onclick = enterEdit;
   q("cancelBtn").onclick = exitEdit;
   q("saveBtn").onclick = save;
+  q("cardToggle").onclick = () => setCardExpanded(!q("card").classList.contains("expanded"), true);
 
   const setHelp = (open) => { q("helpPanel").classList.toggle("open", open); q("helpBackdrop").classList.toggle("open", open); };
   q("helpBtn").onclick = () => setHelp(!q("helpPanel").classList.contains("open"));
   q("helpClose").onclick = () => setHelp(false);
   q("helpBackdrop").onclick = () => setHelp(false);
   q("langBtn").onclick = () => { lang = lang === "en" ? "zh-TW" : "en"; localStorage.setItem("agend_lang", lang); applyI18n(); };
+  q("densityBtn").onclick = cycleDensity;
+  window.addEventListener("keydown", (e) => { if (e.key === "Escape") setHelp(false); });
+
+  // ── AI usage panel ────────────────────────────────────
+  let usageData = null;
+  let usageTimer = null;
+
+  function usageResetText(iso) {
+    if (!iso) return "";
+    const ms = new Date(iso).getTime() - Date.now();
+    if (isNaN(ms)) return "";
+    if (ms <= 0) return T("usageSoon");
+    const h = Math.floor(ms / 3600000), m = Math.floor((ms % 3600000) / 60000);
+    const t = h >= 48 ? `${Math.floor(h / 24)}d ${h % 24}h` : h > 0 ? `${h}h ${m}m` : `${m}m`;
+    return T("usageResets").replace("{t}", t);
+  }
+
+  function usageMetricHtml(m) {
+    if (m.type === "percent") {
+      const pct = Math.min(100, Math.max(0, m.used ?? 0));
+      const cls = pct >= 90 ? "crit" : pct >= 70 ? "warn" : "";
+      const word = pct >= 90 ? T("usageNear") : pct >= 70 ? T("usageHigh") : "";
+      const sub = [m.note, usageResetText(m.resetsAt)].filter(Boolean).join(" · ");
+      return `<div class="u-metric"><div class="u-row"><span class="u-label">${esc(m.label)}</span>` +
+        (word ? `<span class="u-status ${cls}">${esc(word)}</span>` : "") +
+        `<span class="u-val">${pct.toFixed(0)}%</span></div>` +
+        `<div class="u-meter"><div class="u-fill ${cls}" style="width:${pct}%"></div></div>` +
+        (sub ? `<div class="u-sub">${esc(sub)}</div>` : "") + `</div>`;
+    }
+    if (m.type === "dollars") {
+      const val = m.limit ? `$${(m.used ?? 0).toFixed(2)} / $${m.limit.toFixed(2)}` : `$${(m.used ?? 0).toFixed(2)}`;
+      return `<div class="u-metric"><div class="u-row"><span class="u-label">${esc(m.label)}</span><span class="u-val">${esc(val)}</span></div></div>`;
+    }
+    const val = `${m.value ?? ""} ${m.unit ?? ""}`.trim();
+    return `<div class="u-metric"><div class="u-row"><span class="u-label">${esc(m.label)}</span><span class="u-val">${esc(val)}</span></div>` +
+      (m.note ? `<div class="u-sub">${esc(m.note)}</div>` : "") + `</div>`;
+  }
+
+  function renderUsage() {
+    const box = q("usageContent");
+    if (!usageData || !Array.isArray(usageData.providers)) { box.innerHTML = `<h3>${T("usageTitle")}</h3><div class="u-err">${T("usageFail")}</div>`; return; }
+    let html = `<h3>${T("usageTitle")}</h3>`;
+    if (!usageData.providers.length) html += `<div class="u-err">${T("usageEmpty")}</div>`;
+    for (const p of usageData.providers) {
+      html += `<div class="u-provider"><div class="u-head"><span class="u-name">${esc(p.name)}</span>` +
+        (p.plan ? `<span class="u-plan">${esc(p.plan)}</span>` : "") + `</div>`;
+      if (p.status === "error") html += `<div class="u-err">${esc(p.error || "error")}</div>`;
+      else {
+        html += (p.metrics || []).map(usageMetricHtml).join("");
+        // A provider with nothing to meter (subscription plan) or one awaiting
+        // sign-in carries a hint instead of metrics. Without this the panel
+        // rendered an empty box, so those states looked broken.
+        if (p.hint) html += `<div class="u-note">${esc(p.hint)}</div>`;
+      }
+      html += `</div>`;
+    }
+    const at = new Date(usageData.fetchedAt).toLocaleTimeString();
+    html += `<div class="u-foot"><span>${T("usageUpdated")} ${esc(at)}</span><button id="usageRefresh">${T("usageRefresh")}</button></div>`;
+    box.innerHTML = html;
+    const rb = q("usageRefresh");
+    if (rb) rb.onclick = () => loadUsage(true);
+  }
+
+  async function loadUsage(force) {
+    try {
+      const r = await fetch(`/api/ai-usage${force ? "?force=1" : ""}`);
+      if (r.status === 404) { q("usageBtn").style.display = "none"; return false; }
+      usageData = await r.json();
+    } catch { usageData = null; }
+    renderUsage();
+    return true;
+  }
+
+  const setUsage = (open) => {
+    q("usagePanel").classList.toggle("open", open);
+    q("helpBackdrop").classList.toggle("open", open);
+    if (open) { setHelp(false); loadUsage(false); if (!usageTimer) usageTimer = setInterval(() => loadUsage(false), 60_000); }
+    else if (usageTimer) { clearInterval(usageTimer); usageTimer = null; }
+  };
+  q("usageBtn").onclick = () => setUsage(!q("usagePanel").classList.contains("open"));
+  q("usageClose").onclick = () => setUsage(false);
+  q("helpBackdrop").addEventListener("click", () => setUsage(false));
+  q("helpBtn").addEventListener("click", () => setUsage(false));
+  window.addEventListener("keydown", (e) => { if (e.key === "Escape") setUsage(false); });
+  q("langBtn").addEventListener("click", () => { if (usageData) renderUsage(); });
+  // Probe once at boot: shows the 📊 button only when the endpoint is enabled,
+  // and warms the server-side 5-minute cache so the first open is instant.
+  loadUsage(false).then(ok => { if (ok !== false) q("usageBtn").style.display = ""; });
+
+  window.addEventListener("resize", scheduleFit);
+  // Catches container changes the window resize event doesn't see — chiefly the
+  // profile card expanding or collapsing.
+  if (window.ResizeObserver) new ResizeObserver(scheduleFit).observe(q("term"));
   applyI18n();
+  applyCardExpanded(cardExpanded);
 
   // ── Boot ──────────────────────────────────────────────
   loadRoster().then(() => { refreshPane(); });

package/dist/update-check.d.ts

@@ -0,0 +1,22 @@
+import { execFileSync } from "node:child_process";
+export interface UpdateVersionOptions {
+    version?: string;
+    beta?: boolean;
+    force?: boolean;
+}
+/** Resolve the npm selector used by `agend update`. */
+export declare function getUpdateSelector(opts: UpdateVersionOptions): string;
+/**
+ * Query the registry without making update availability a hard dependency.
+ * A failed lookup deliberately returns null so the existing install flow can
+ * continue during registry/network outages.
+ */
+export declare function lookupTargetVersion(selector: string, run?: typeof execFileSync): string | null;
+export declare function shouldSkipUpdate(currentVersion: string, targetVersion: string | null, force?: boolean): boolean;
+interface UpdateOutput {
+    log(message: string): void;
+    error(message: string): void;
+}
+/** Report restart status and let the CLI translate failure into exit code 1. */
+export declare function reportUpdateRestart(status: number | null, output?: UpdateOutput): boolean;
+export {};

package/dist/update-check.js

@@ -0,0 +1,44 @@
+import { execFileSync } from "node:child_process";
+/** Resolve the npm selector used by `agend update`. */
+export function getUpdateSelector(opts) {
+    return opts.version ?? (opts.beta ? "beta" : "latest");
+}
+/**
+ * Query the registry without making update availability a hard dependency.
+ * A failed lookup deliberately returns null so the existing install flow can
+ * continue during registry/network outages.
+ */
+export function lookupTargetVersion(selector, run = execFileSync) {
+    try {
+        const output = run("npm", ["view", `@songsid/agend@${selector}`, "version"], {
+            encoding: "utf-8",
+            stdio: ["ignore", "pipe", "ignore"],
+            timeout: 15_000,
+        });
+        const version = String(output).trim();
+        return version || null;
+    }
+    catch {
+        return null;
+    }
+}
+function normalizeVersion(version) {
+    return version.trim().replace(/^v/i, "");
+}
+export function shouldSkipUpdate(currentVersion, targetVersion, force = false) {
+    return !force
+        && targetVersion !== null
+        && normalizeVersion(currentVersion) === normalizeVersion(targetVersion);
+}
+/** Report restart status and let the CLI translate failure into exit code 1. */
+export function reportUpdateRestart(status, output = console) {
+    if (status === 0) {
+        output.log("  ✓ Service restarted");
+        return true;
+    }
+    output.error("\n  ✗ Auto-restart FAILED. Fleet may be stopped.");
+    output.error("  Run: agend start");
+    output.error("  Service status: agend status\n");
+    return false;
+}
+//# sourceMappingURL=update-check.js.map

package/dist/update-check.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-check.js","sourceRoot":"","sources":["../src/update-check.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAQlD,uDAAuD;AACvD,MAAM,UAAU,iBAAiB,CAAC,IAA0B;IAC1D,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;AACzD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CACjC,QAAgB,EAChB,MAA2B,YAAY;IAEvC,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,GAAG,CAChB,KAAK,EACL,CAAC,MAAM,EAAE,kBAAkB,QAAQ,EAAE,EAAE,SAAS,CAAC,EACjD;YACE,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;YACnC,OAAO,EAAE,MAAM;SAChB,CACF,CAAC;QACF,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC;QACtC,OAAO,OAAO,IAAI,IAAI,CAAC;IACzB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED,SAAS,gBAAgB,CAAC,OAAe;IACvC,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AAC3C,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC9B,cAAsB,EACtB,aAA4B,EAC5B,KAAK,GAAG,KAAK;IAEb,OAAO,CAAC,KAAK;WACR,aAAa,KAAK,IAAI;WACtB,gBAAgB,CAAC,cAAc,CAAC,KAAK,gBAAgB,CAAC,aAAa,CAAC,CAAC;AAC5E,CAAC;AAOD,gFAAgF;AAChF,MAAM,UAAU,mBAAmB,CACjC,MAAqB,EACrB,SAAuB,OAAO;IAE9B,IAAI,MAAM,KAAK,CAAC,EAAE,CAAC;QACjB,MAAM,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;QACpC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACjE,MAAM,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;IACnC,MAAM,CAAC,KAAK,CAAC,kCAAkC,CAAC,CAAC;IACjD,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/usage/providers.d.ts

@@ -0,0 +1,50 @@
+export interface UsageMetric {
+    label: string;
+    type: "percent" | "dollars" | "count" | "text";
+    used?: number;
+    limit?: number;
+    value?: number | string;
+    unit?: string;
+    note?: string;
+    resetsAt?: string | null;
+    windowMs?: number | null;
+}
+export interface ProviderUsage {
+    id: string;
+    name: string;
+    status: "ok" | "error" | "no-credentials";
+    plan?: string | null;
+    error?: string;
+    hint?: string;
+    metrics: UsageMetric[];
+}
+interface KiroToken {
+    access_token?: string;
+    expires_at?: string;
+    region?: string;
+    profile_arn?: string;
+    /** IAM Identity Center portal URL — present only for Q Developer Pro logins. */
+    start_url?: string;
+    /** Social login provider (google/github/…) — present only for free-tier logins. */
+    provider?: string;
+}
+/**
+ * Which Kiro login is in use. Verified against a real kiro-cli auth store:
+ * - IAM Identity Center (Amazon Q Developer Pro) tokens carry `start_url`
+ *   (e.g. `https://d-xxxx.awsapps.com/start/`) and no social `provider`.
+ * - Free-tier social logins (Builder ID / Google / GitHub) carry `provider`
+ *   and a `profile_arn`.
+ * Q Developer Pro is a seat-licensed subscription, so the credit/usage endpoint
+ * that Builder ID reports against does not describe it.
+ */
+export type KiroAuthKind = "q-developer-pro" | "builder-id";
+export declare function kiroAuthKind(token: KiroToken): KiroAuthKind;
+/** Exported for tests: the Q-Pro and expired paths return without any network call. */
+export declare function fetchKiroUsage(): Promise<Omit<ProviderUsage, "id" | "name">>;
+/** Fetch every provider in parallel. Providers without local credentials are
+ * skipped (per the panel's contract: absent CLIs simply don't show). */
+export declare function fetchAllUsage(): Promise<{
+    fetchedAt: string;
+    providers: ProviderUsage[];
+}>;
+export {};