ai-agentmanager 1.0.0 → 1.0.2

package/public/app.js

@@ -464,7 +464,7 @@ function resultsCard(a) {
   const [icon, label] = OUTCOME[r.outcome] ?? ['🔄', r.outcome];
   const item = (x, cls) => `<li class="${cls}">${x.url ? `<a href="${esc(x.url)}" target="_blank" rel="noopener">${md(x.text).replace(/^<p>|<\/p>\s*$/g, '')}</a>` : md(x.text).replace(/^<p>|<\/p>\s*$/g, '')}</li>`;
   return `<div class="results ${r.outcome.replace(' ', '-')}">
-    <h4>Results <span class="outcome">${icon} ${label}</span>${r.fromAgent ? '' : ' <span class="hint">(from what Agent Manager can see; the agent adds its own when it next updates its brief)</span>'}</h4>
+    <h4>Results <span class="outcome">${icon} ${label}</span>${r.fromAgent ? '' : ' <span class="hint">(from what AI Agent Manager can see; the agent adds its own when it next updates its brief)</span>'}</h4>
     ${r.blockers.length ? `<ul class="blockers">${r.blockers.map((x) => item(x, 'blocker')).join('')}</ul>` : ''}
     ${r.delivered.length ? `<ul class="delivered">${r.delivered.map((x) => item(x, 'delivered')).join('')}</ul>` : '<p class="hint">Nothing delivered yet.</p>'}
     ${r.notes ? `<div class="md">${md(r.notes)}</div>` : ''}
@@ -556,6 +556,11 @@ const copyBtn = (value) => `<button class="link" data-copy="${esc(value)}" title
 /** Agents waiting on you first, then running ones, then the rest. */
 const rank = (a) => (a.runtime.attention ? 0 : a.runtime.running ? 1 : 2);
 
+// Agents with no work and no input from you for a day sink below the active ones.
+const ACTIVE_MS = 24 * 3600 * 1000;
+const isActive = (a) =>
+  Boolean(a.runtime.attention || a.runtime.busy || a.status === 'preparing' || (a.activeAt && Date.now() - Date.parse(a.activeAt) < ACTIVE_MS));
+
 // Projects the user collapsed in the tree (kept per browser).
 const collapsed = new Set(
   (() => {
@@ -578,12 +583,14 @@ const prioChip = (p, { always = false } = {}) =>
 
 function agentItem(a) {
   const st = statusOf(a);
-  return `<li data-id="${a.id}" class="agent pr${a.priority ?? 2} ${a.id === selectedId ? 'selected' : ''}">
+  const idle = !isActive(a);
+  return `<li data-id="${a.id}" class="agent pr${a.priority ?? 2} ${a.id === selectedId ? 'selected' : ''} ${idle ? 'idle' : ''}">
     <div class="line1">${prioChip(a.priority ?? 2)}${a.results?.outcome === 'blocked' ? '<span class="outcome-mark" title="Blocked">⛔</span>' : a.results?.outcome === 'done' ? '<span class="outcome-mark" title="Done">✅</span>' : ''}<span class="name">${esc(a.name)}</span>${flags(a)}<span class="pill ${st}">${pillText(st)}</span></div>
     <div class="intent">${a.kind === 'general' ? '<span class="tag">general</span> ' : ''}${a.engine && a.engine !== 'claude' ? `<span class="tag engine">${esc(ENGINE_LABEL[a.engine] ?? a.engine)}</span> ` : ''}${esc(a.intent || 'General session')}</div>
     ${a.status === 'preparing' && a.progress ? `<div class="progress-line">${esc(progressText(a.progress))}</div>` : ''}
     <div class="meta">
       <span class="mono">${a.id}</span>
+      ${idle && a.activeAt ? `<span title="Idle: no work and no input from you for over a day">💤 ${ago(a.activeAt)}</span>` : ''}
       ${a.git?.branch ? `<span class="branch" title="${esc(a.git.branch)}">⎇ ${esc(a.git.branch)}</span>` : ''}
       ${a.prs.length ? `<span>${a.prs.length} PR</span>` : ''}
       ${a.bugs.length ? `<span>${a.bugs.length} bug</span>` : ''}
@@ -608,8 +615,15 @@ function projectGroups(list) {
   }
   const out = [...groups.values()];
   for (const g of out) {
-    // Highest priority first, then agents needing you, then running ones, then newest.
-    g.agents.sort((a, b) => (a.priority ?? 2) - (b.priority ?? 2) || rank(a) - rank(b) || b.createdAt.localeCompare(a.createdAt));
+    // Active in the last day first; then highest priority, agents needing you, running ones, most recent.
+    g.agents.sort(
+      (a, b) =>
+        isActive(b) - isActive(a) ||
+        (a.priority ?? 2) - (b.priority ?? 2) ||
+        rank(a) - rank(b) ||
+        (b.activeAt ?? b.createdAt).localeCompare(a.activeAt ?? a.createdAt),
+    );
+    g.active = g.agents.filter(isActive).length;
     g.top = Math.min(...g.agents.map((a) => a.priority ?? 2));
     g.running = g.agents.filter((a) => a.runtime.running).length;
     g.waiting = g.agents.filter((a) => a.runtime.attention).length;
@@ -623,13 +637,19 @@ function projectGroups(list) {
   }
   const special = (g) => (g.key === 'general' ? 1 : g.key === 'other' ? 2 : 0);
   return out.sort(
-    (a, b) => special(a) - special(b) || a.top - b.top || b.waiting - a.waiting || b.running - a.running || a.label.localeCompare(b.label),
+    (a, b) =>
+      special(a) - special(b) ||
+      (b.active > 0) - (a.active > 0) ||
+      a.top - b.top ||
+      b.waiting - a.waiting ||
+      b.running - a.running ||
+      a.label.localeCompare(b.label),
   );
 }
 
 function renderList() {
   const waiting = [...agents.values()].filter((a) => a.runtime.attention).length;
-  document.title = waiting ? `(${waiting}) Agent Manager` : 'Agent Manager';
+  document.title = waiting ? `(${waiting}) AI Agent Manager` : 'AI Agent Manager';
   // "@cc" shows one project; any other text also matches shortcuts.
   const at = filterText.startsWith('@') ? filterText.slice(1) : null;
   const list = [...agents.values()].filter((a) =>
@@ -1725,11 +1745,107 @@ const term = {
     this.agentId = null;
     $('#term-wrap').hidden = true;
     $('#detail').classList.remove('with-term');
+    if (document.body.classList.contains('term-max')) setExpanded(false);
+    if (document.fullscreenElement) document.exitFullscreen();
   },
 };
 
 $('#term-close').onclick = () => term.close();
 $('#term-fit').onclick = () => term.refit();
+
+// ------------------------------------------------------------------ resizing, expanding, full screen
+
+const layoutPref = {
+  get(key) {
+    try {
+      return localStorage.getItem(`agentmgr.${key}`);
+    } catch {
+      return null;
+    }
+  },
+  set(key, value) {
+    try {
+      value == null ? localStorage.removeItem(`agentmgr.${key}`) : localStorage.setItem(`agentmgr.${key}`, value);
+    } catch {}
+  },
+};
+
+function applyLayout() {
+  const side = layoutPref.get('sideWidth');
+  const brief = layoutPref.get('briefHeight');
+  document.documentElement.style.setProperty('--side-w', side ? `${side}px` : '340px');
+  if (brief) document.documentElement.style.setProperty('--brief-h', `${brief}px`);
+  else document.documentElement.style.removeProperty('--brief-h');
+  $('#detail').classList.toggle('brief-sized', Boolean(brief));
+}
+applyLayout();
+
+/** Drag a handle; `move` gets the pointer position and returns the value to keep. */
+function dragHandle(el, axis, move, key) {
+  el.addEventListener('pointerdown', (e) => {
+    e.preventDefault();
+    el.setPointerCapture(e.pointerId);
+    el.classList.add('dragging');
+    document.body.classList.add('resizing', axis);
+    let value = null;
+    const onMove = (ev) => {
+      value = move(ev);
+      applyLayout();
+    };
+    const onUp = () => {
+      el.classList.remove('dragging');
+      document.body.classList.remove('resizing', axis);
+      el.removeEventListener('pointermove', onMove);
+      el.removeEventListener('pointerup', onUp);
+      if (value != null) layoutPref.set(key, Math.round(value));
+      term.refit();
+    };
+    el.addEventListener('pointermove', onMove);
+    el.addEventListener('pointerup', onUp);
+  });
+  el.addEventListener('dblclick', () => {
+    layoutPref.set(key, null);
+    applyLayout();
+    requestAnimationFrame(() => term.refit());
+  });
+}
+
+dragHandle($('#split-side'), 'cols', (ev) => {
+  const w = Math.min(Math.max(ev.clientX, 220), window.innerWidth * 0.6);
+  layoutPref.set('sideWidth', Math.round(w));
+  return w;
+}, 'sideWidth');
+
+dragHandle($('#split-term'), 'rows', (ev) => {
+  const top = $('#detail').getBoundingClientRect().top;
+  const h = Math.min(Math.max(ev.clientY - top, 60), $('#detail').clientHeight - 160);
+  layoutPref.set('briefHeight', Math.round(h));
+  return h;
+}, 'briefHeight');
+
+function setExpanded(on) {
+  document.body.classList.toggle('term-max', on);
+  $('#term-max').classList.toggle('on', on);
+  $('#term-max').textContent = on ? '⤡ Restore' : '⤢ Expand';
+  requestAnimationFrame(() => term.refit());
+}
+$('#term-max').onclick = () => setExpanded(!document.body.classList.contains('term-max'));
+$('#term-full').onclick = () => {
+  if (document.fullscreenElement) document.exitFullscreen();
+  else $('#term-wrap').requestFullscreen?.().catch(() => setExpanded(true));
+};
+document.addEventListener('fullscreenchange', () => {
+  const on = document.fullscreenElement === $('#term-wrap');
+  $('#term-full').classList.toggle('on', on);
+  $('#term-full').textContent = on ? '⛶ Exit full screen' : '⛶ Full screen';
+  requestAnimationFrame(() => term.refit());
+});
+document.addEventListener('keydown', (e) => {
+  if (e.ctrlKey && e.shiftKey && e.code === 'KeyE' && !$('#term-wrap').hidden) {
+    e.preventDefault();
+    setExpanded(!document.body.classList.contains('term-max'));
+  }
+}, true);
 $('#term-resume').onclick = () => {
   const id = term.agentId;
   if (isShell(term.kind)) {
@@ -1995,7 +2111,7 @@ function renderImport() {
             .join('')}</div>`,
         )
         .join('')
-    : `<p class="hint">${importSessions.length ? 'Nothing matches.' : 'No Claude sessions started in a terminal in this period (Agent Manager\'s own agents are left out).'}</p>`;
+    : `<p class="hint">${importSessions.length ? 'Nothing matches.' : 'No Claude sessions started in a terminal in this period (AI Agent Manager\'s own agents are left out).'}</p>`;
   const picked = importSessions.filter((s) => importPicked.has(s.sessionId));
   const open = picked.filter((s) => s.inUse).length;
   Object.assign($('#import-go'), {
@@ -2562,8 +2678,8 @@ $('#detail-body').addEventListener('click', async (e) => {
       break;
     case 'delete': {
       const cancelNote = a.status === 'preparing' ? '\n\nThis also cancels the workspace setup (clone / checkout) in progress.' : '';
-      if (!confirm(`Delete agent "${a.name}"? Its session IDs will be forgotten by Agent Manager.${cancelNote}`)) return;
-      const del = a.worktree && confirm('Also remove the git worktree Agent Manager created for it?\n(Uncommitted changes there will be lost.)');
+      if (!confirm(`Delete agent "${a.name}"? Its session IDs will be forgotten by AI Agent Manager.${cancelNote}`)) return;
+      const del = a.worktree && confirm('Also remove the git worktree AI Agent Manager created for it?\n(Uncommitted changes there will be lost.)');
       act(async () => {
         const res = await api('DELETE', `/agents/${a.id}${del ? '?deleteWorkspace=1' : ''}`);
         if (res.warnings?.length) toast(res.warnings.join('; '), 6000);
@@ -2730,6 +2846,61 @@ $('#new-form').addEventListener('submit', async (e) => {
 
 // ------------------------------------------------------------------ ask (general session)
 
+// ---------------------------------------------------------------- about
+const aboutDialog = $('#about-dialog');
+let aboutInfo = null;
+async function loadAbout() {
+  aboutInfo = await api('GET', '/about');
+  $('#about-btn').textContent = `v${aboutInfo.version}`;
+  return aboutInfo;
+}
+loadAbout().catch(() => {});
+function renderAbout(a) {
+  const link = (url, text = url.replace(/^https:\/\//, '')) => `<a href="${esc(url)}" target="_blank" rel="noopener">${esc(text)}</a>`;
+  const when = (iso) => new Date(iso).toLocaleString();
+  const rows = [
+    ['Version', `${esc(a.version)}${a.releaseDate ? ` <span class="hint">released ${esc(a.releaseDate)}</span>` : ''}`],
+    ['Author', esc(a.author ?? '—')],
+    ['License', esc(a.license ?? '—')],
+    ['Install', `<code>npm install -g ${esc(a.package)}</code>, then <code>${esc(a.command ?? 'agentmgr')}</code>`],
+    ['Code', a.links.repository ? link(a.links.repository) : '—'],
+    ['Releases', a.links.releases ? link(a.links.releases, 'Release notes') : '—'],
+    ['Report a problem', a.links.issues ? link(a.links.issues, 'GitHub issues') : '—'],
+    null,
+    ['Daemon', `pid ${esc(a.daemon.pid)} · port ${esc(a.daemon.port ?? '—')} · running since ${esc(when(a.daemon.startedAt))}`],
+    ['Data folder', `<code>${esc(a.daemon.home ?? '—')}</code>`],
+    ['Node.js', esc(a.daemon.node)],
+    ['System', esc(a.daemon.platform)],
+    ['Claude Code', `<code>${esc(a.daemon.claudeBin ?? 'claude')}</code>`],
+  ];
+  $('#about-list').innerHTML = rows.map((r) => (r ? `<dt>${r[0]}</dt><dd>${r[1]}</dd>` : '<div class="sep"></div>')).join('');
+}
+$('#about-btn').onclick = async () => {
+  $('#about-update').hidden = true;
+  if (aboutInfo) renderAbout(aboutInfo);
+  else $('#about-list').innerHTML = '<dt>Loading…</dt><dd></dd>';
+  aboutDialog.showModal();
+  try {
+    renderAbout(await loadAbout()); // fresh daemon details (uptime, pid) each time it opens
+  } catch (err) {
+    $('#about-list').innerHTML = `<dt>Error</dt><dd>${esc(err.message)}</dd>`;
+  }
+};
+$('#about-close').onclick = () => aboutDialog.close();
+$('#about-check').onclick = async () => {
+  const out = $('#about-update');
+  out.hidden = false;
+  out.textContent = 'Checking…';
+  try {
+    const r = await api('GET', '/about/latest');
+    out.innerHTML = r.newer
+      ? `Version ${esc(r.latest)} is available. Update with <code>npm install -g ${esc(aboutInfo?.package ?? 'ai-agentmanager')}@latest</code>, then <code>agentmgr restart</code>.`
+      : `You have the latest version (${esc(r.current)}).`;
+  } catch (err) {
+    out.textContent = `Couldn't check: ${err.message}`;
+  }
+};
+
 const askDialog = $('#ask-dialog');
 $('#ask-btn').onclick = () => {
   $('#ask-error').hidden = true;

package/public/hub/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="referrer" content="no-referrer" />
-    <title>Agent Manager Hub</title>
+    <title>AI Agent Manager Hub</title>
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M8 1l7 7-7 7-7-7z%22 fill=%22%233b5bdb%22/%3E%3C/svg%3E" />
     <link rel="stylesheet" href="/vendor/xterm/css/xterm.css" />
     <link rel="stylesheet" href="/hub.css" />
@@ -13,7 +13,7 @@
     <header class="topbar">
       <div class="brand">
         <span class="logo" aria-hidden="true">◆</span>
-        <h1>Agent Manager <span class="muted">Hub</span></h1>
+        <h1>AI Agent Manager <span class="muted">Hub</span></h1>
         <span id="hub-name" class="muted"></span>
       </div>
       <div class="top-actions" id="top-actions" hidden>
@@ -62,7 +62,7 @@
     <dialog id="invite-dialog">
       <form method="dialog" class="dialog">
         <h2>Add a machine</h2>
-        <p class="muted">On the Mac to add (with Agent Manager installed), run:</p>
+        <p class="muted">On the Mac to add (with AI Agent Manager installed), run:</p>
         <div class="cmd"><code id="invite-cmd">…</code><button type="button" id="copy-btn" class="ghost">Copy</button></div>
         <p class="muted small" id="invite-expiry"></p>
         <p class="error small" id="invite-warning" hidden></p>

package/public/icons/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect width="512" height="512" rx="112" fill="#151821"/><path d="M256 76l180 180-180 180L76 256z" fill="#6d8bff"/><path d="M256 166l90 90-90 90-90-90z" fill="#151821"/></svg>

package/public/index.html

@@ -4,8 +4,11 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <title>Agent Manager</title>
+    <title>AI Agent Manager</title>
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M8 1l7 7-7 7-7-7z%22 fill=%22%233b5bdb%22/%3E%3C/svg%3E" />
+    <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials" />
+    <meta name="theme-color" content="#151821" />
+    <link rel="apple-touch-icon" href="/icons/icon-192.png" />
     <link rel="stylesheet" href="/vendor/xterm/css/xterm.css" />
     <link rel="stylesheet" href="/style.css" />
   </head>
@@ -13,13 +16,14 @@
     <header class="topbar">
       <div class="brand">
         <span class="logo" aria-hidden="true">◆</span>
-        <h1>Agent Manager</h1>
+        <h1>AI Agent Manager</h1>
+        <button id="about-btn" class="about-btn" type="button" title="About AI Agent Manager: version, release, links">About</button>
         <span id="conn" class="conn" title="Daemon connection">connecting…</span>
       </div>
       <div class="top-actions">
         <input id="filter" type="search" placeholder="Filter agents" aria-label="Filter agents" />
         <button id="alerts-btn" class="local-only" title="Slack alerts when an agent needs you">Alerts</button>
-        <button id="remote-btn" class="local-only" title="Open Agent Manager from your phone">Remote access</button>
+        <button id="remote-btn" class="local-only" title="Open AI Agent Manager from your phone">Remote access</button>
         <button id="ask-btn" title="A general Claude session with no repo or folder">Ask Claude</button>
         <button id="new-btn" class="primary">+ New agents</button>
       </div>
@@ -43,10 +47,12 @@
           <p>Add one or more intents and a repo or folder to get started.</p>
         </div>
       </aside>
+      <div class="splitter split-side" id="split-side" role="separator" aria-orientation="vertical" title="Drag to resize the list; double-click to reset"></div>
 
       <section class="detail" id="detail">
         <div class="placeholder" id="placeholder">Select an agent to see its session, folder, repo, PRs and bugs.</div>
         <div id="detail-body" hidden></div>
+        <div class="splitter split-term" id="split-term" role="separator" aria-orientation="horizontal" title="Drag to resize the terminal; double-click to reset"></div>
         <div class="term-wrap" id="term-wrap" hidden>
           <div class="term-bar">
             <div class="term-tabs" role="tablist">
@@ -61,6 +67,8 @@
             <button id="term-attach" class="ghost small" title="Attach files or images (you can also drop or paste them into the terminal)">📎 Attach</button>
             <input type="file" id="term-file" multiple hidden>
             <button id="term-fit" class="ghost small" title="Refit the terminal to the panel">Fit</button>
+            <button id="term-max" class="ghost small desk-only" title="Expand to fill the window (Ctrl+Shift+E)">⤢ Expand</button>
+            <button id="term-full" class="ghost small desk-only" title="Full screen (Esc to leave)">⛶ Full screen</button>
             <button id="term-close" class="ghost small" title="Hide the terminal (the agent keeps running)">Hide terminal</button>
           </div>
           <div id="signin-bar" class="signin-bar" hidden></div>
@@ -79,12 +87,12 @@
             </form>
             <div id="browser-hint" class="browser-hint" hidden>Blank? Many sites refuse to show inside another page. Open it with ↗ instead.</div>
             <div id="browser-cert" class="browser-start" hidden>
-              <p><b>One more step on this device.</b> Each browser tab goes through its own port, and this device hasn't accepted Agent Manager's certificate for this one yet.</p>
-              <p>Open it, accept the warning the same way you did for Agent Manager (Safari: Show Details → visit this website), then come back here. You only do this once per site; it keeps its port.</p>
+              <p><b>One more step on this device.</b> Each browser tab goes through its own port, and this device hasn't accepted AI Agent Manager's certificate for this one yet.</p>
+              <p>Open it, accept the warning the same way you did for AI Agent Manager (Safari: Show Details → visit this website), then come back here. You only do this once per site; it keeps its port.</p>
               <div><a id="browser-cert-open" class="button primary small" target="_blank" rel="noopener">Open and accept</a> <button type="button" id="browser-cert-retry" class="small">Done, load it</button></div>
             </div>
             <div id="browser-start" class="browser-start" hidden>
-              <p>Open a page as this machine sees it: the agent's dev server, a site on its network or VPN, or any address. It works from your phone or laptop too: Agent Manager relays it over its own secure connection, for signed-in devices only.</p>
+              <p>Open a page as this machine sees it: the agent's dev server, a site on its network or VPN, or any address. It works from your phone or laptop too: AI Agent Manager relays it over its own secure connection, for signed-in devices only.</p>
               <div id="browser-suggest"></div>
             </div>
             <div id="browser-frames" class="browser-frames"></div>
@@ -337,6 +345,17 @@
       </div>
     </dialog>
 
+    <dialog id="about-dialog" class="about-dialog">
+      <h2>AI Agent Manager</h2>
+      <p class="hint">Run and track background coding agents, one per intent.</p>
+      <dl id="about-list" class="about-list"></dl>
+      <p id="about-update" class="hint" hidden></p>
+      <div class="dialog-actions">
+        <button type="button" id="about-check" class="ghost" title="Asks the npm registry for the newest version">Check for updates</button>
+        <button type="button" id="about-close" class="primary">Close</button>
+      </div>
+    </dialog>
+
     <script type="module" src="/app.js"></script>
   </body>
 </html>

package/public/manifest.webmanifest

@@ -0,0 +1,16 @@
+{
+  "name": "AI Agent Manager",
+  "short_name": "Agent Manager",
+  "description": "Run many coding agents in parallel without babysitting terminals.",
+  "id": "/",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#0d0f14",
+  "theme_color": "#151821",
+  "icons": [
+    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/icons/icon.svg", "sizes": "any", "type": "image/svg+xml" }
+  ]
+}

package/public/share.js

@@ -9,7 +9,7 @@ $('#print').onclick = () => window.print();
 
 async function main() {
   const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}`, { credentials: 'same-origin' });
-  if (!res.ok) throw new Error(res.status === 401 ? 'Sign in to Agent Manager first, then reopen this page.' : `HTTP ${res.status}`);
+  if (!res.ok) throw new Error(res.status === 401 ? 'Sign in to AI Agent Manager first, then reopen this page.' : `HTTP ${res.status}`);
   const a = await res.json();
   const d = a.docs?.[kind];
   if (!d?.markdown) throw new Error('This document has not been written yet.');

package/public/style.css

@@ -56,6 +56,15 @@ a:hover { text-decoration: underline; }
 .brand h1 { font-size: 16px; margin: 0; font-weight: 600; }
 .logo { color: var(--accent); }
 .conn { font-size: 12px; color: var(--muted); }
+.about-btn { font-size: 12px; padding: 2px 8px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 999px; font-variant-numeric: tabular-nums; }
+.about-btn:hover, .about-btn:focus-visible { color: var(--text); border-color: var(--accent); }
+.about-dialog { width: min(560px, calc(100vw - 32px)); padding: 20px; }
+.about-dialog h2 { margin: 0 0 2px; font-size: 17px; }
+.about-dialog .hint { margin: 0; }
+.about-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 14px 0; font-size: 13px; }
+.about-list dt { color: var(--muted); }
+.about-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.about-list .sep { grid-column: 1 / -1; border-top: 1px solid var(--border); margin: 4px 0; }
 .conn.ok::before { content: '● '; color: var(--green); }
 .conn.bad::before { content: '● '; color: var(--red); }
 .top-actions { display: flex; gap: 8px; }
@@ -79,7 +88,27 @@ input, select, textarea {
 textarea { resize: vertical; font-family: var(--mono); font-size: 13px; }
 
 /* ---------- layout */
-.layout { flex: 1; display: grid; grid-template-columns: 340px 1fr; min-height: 0; }
+.layout { flex: 1; display: grid; grid-template-columns: var(--side-w, 340px) 0 1fr; min-height: 0; }
+
+/* Drag handles: the list's width, and the brief above the terminal. */
+.splitter { position: relative; z-index: 3; }
+.splitter::after { content: ''; position: absolute; }
+.split-side::after { top: 0; bottom: 0; left: -4px; width: 8px; cursor: col-resize; }
+.split-term { display: none; flex: none; height: 0; }
+.detail.with-term > #detail-body:not([hidden]) + .split-term { display: block; }
+.split-term::after { left: 0; right: 0; top: -4px; height: 8px; cursor: row-resize; }
+.splitter:hover::after, .splitter.dragging::after { background: var(--accent); opacity: .5; }
+body.resizing { user-select: none; }
+body.resizing iframe, body.resizing .terminal { pointer-events: none; }
+body.resizing.cols { cursor: col-resize; }
+body.resizing.rows { cursor: row-resize; }
+
+/* Expanded: the terminal, shell or browser fills the window. */
+body.term-max .topbar, body.term-max .sidebar, body.term-max .split-side,
+body.term-max #detail-body, body.term-max .split-term, body.term-max #placeholder { display: none !important; }
+body.term-max .layout { grid-template-columns: 1fr; }
+.term-wrap:fullscreen { width: 100vw; height: 100vh; }
+.term-bar button.on { background: #262c38; border-color: #58a6ff; }
 .sidebar { border-right: 1px solid var(--border); overflow-y: auto; background: var(--panel); }
 .side-tabs { display: flex; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); z-index: 2; }
 .side-tab { flex: 1; border: 0; border-radius: 0; background: transparent; padding: 9px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
@@ -163,7 +192,8 @@ textarea { resize: vertical; font-family: var(--mono); font-size: 13px; }
 .detail { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
 .placeholder { margin: auto; color: var(--muted); padding: 24px; text-align: center; }
 #detail-body { padding: 16px 20px; overflow-y: auto; flex: 0 1 auto; max-height: 100%; }
-.detail.with-term #detail-body { max-height: 42%; border-bottom: 1px solid var(--border); }
+.detail.with-term #detail-body { max-height: var(--brief-h, 42%); border-bottom: 1px solid var(--border); }
+.detail.with-term.brief-sized #detail-body { height: var(--brief-h); flex: none; }
 .d-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
 .d-title { flex: 1 1 420px; min-width: 0; }
 .d-title h2 { margin: 0 0 4px; font-size: 18px; display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; }
@@ -390,6 +420,7 @@ dialog::backdrop { background: rgba(0, 0, 0, .45); }
   .term-bar { flex-wrap: wrap; row-gap: 6px; }
   .term-bar > .term-tabs { flex: 1 0 100%; }
   .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
+  .splitter, .desk-only { display: none !important; }
   .sidebar { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--border); }
   .top-actions input { width: 130px; }
   .row { grid-template-columns: 1fr; }
@@ -539,3 +570,6 @@ pre.diff .meta { color: var(--muted); font-weight: 600; }
 #import-dialog .import-foot label { display: flex; flex-direction: row; align-items: center; gap: 6px; }
 #import-dialog .import-foot input { width: auto; }
 .judge-line { margin: 14px 12px; line-height: 1.5; }
+
+.agent-list li.agent.idle { opacity: .62; }
+.agent-list li.agent.idle:hover, .agent-list li.agent.idle.selected { opacity: 1; }

package/src/about.js

@@ -0,0 +1,70 @@
+// What the About box and "agentmgr about" show: the release, who makes it, where to get help,
+// and how this daemon runs. Nothing here leaves the machine; the update check is a separate,
+// user-triggered request to the npm registry.
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = path.join(path.dirname(fileURLToPath(import.meta.url)), '..');
+const read = (f) => {
+  try {
+    return fs.readFileSync(path.join(root, f), 'utf8');
+  } catch {
+    return '';
+  }
+};
+const pkg = JSON.parse(read('package.json'));
+const startedAt = new Date().toISOString();
+
+/** The date in a changelog heading like "## 1.0.0 (2026-10-25)", or null. */
+export function releaseDate(changelog, version) {
+  const esc = version.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return changelog.match(new RegExp(`^##\\s+v?${esc}\\s+\\((\\d{4}-\\d{2}-\\d{2})\\)`, 'm'))?.[1] ?? null;
+}
+
+const authorName = (a) => (typeof a === 'string' ? a.replace(/\s*[<(].*$/, '') : a?.name) || null;
+const repoUrl = (r) => String((typeof r === 'string' ? r : r?.url) ?? '').replace(/^git\+/, '').replace(/\.git$/, '') || null;
+
+export function about({ port, config = {} } = {}) {
+  return {
+    product: 'AI Agent Manager',
+    package: pkg.name,
+    command: Object.keys(pkg.bin ?? {})[0] ?? null,
+    version: pkg.version,
+    releaseDate: releaseDate(read('CHANGELOG.md'), pkg.version),
+    author: authorName(pkg.author),
+    license: pkg.license,
+    links: {
+      repository: repoUrl(pkg.repository),
+      issues: pkg.bugs?.url ?? null,
+      releases: repoUrl(pkg.repository) ? `${repoUrl(pkg.repository)}/releases` : null,
+      npm: `https://www.npmjs.com/package/${pkg.name}`,
+    },
+    daemon: {
+      pid: process.pid,
+      port: port ?? null,
+      home: config.home ?? null,
+      startedAt,
+      node: process.version,
+      platform: `${os.type()} ${os.release()} (${process.arch})`,
+      claudeBin: config.claudeBin ?? null,
+    },
+  };
+}
+
+/** The newest version on npm. Only called when someone clicks "Check for updates". */
+export async function latestRelease({ fetchImpl = fetch, timeoutMs = 5000 } = {}) {
+  const res = await fetchImpl(`https://registry.npmjs.org/${encodeURIComponent(pkg.name)}/latest`, { signal: AbortSignal.timeout(timeoutMs) });
+  if (!res.ok) throw Object.assign(new Error(`npm answered ${res.status}`), { status: 502 });
+  const { version } = await res.json();
+  return { current: pkg.version, latest: version, newer: newerThan(version, pkg.version) };
+}
+
+/** True when semver `a` is newer than `b` (pre-releases count as older than the release). */
+export function newerThan(a, b) {
+  const parse = (v) => String(v).split('-')[0].split('.').map(Number);
+  const [x, y] = [parse(a), parse(b)];
+  for (let i = 0; i < 3; i++) if ((x[i] ?? 0) !== (y[i] ?? 0)) return (x[i] ?? 0) > (y[i] ?? 0);
+  return String(b).includes('-') && !String(a).includes('-');
+}

package/src/brief.js

@@ -15,7 +15,7 @@ export function briefPath(agentId) {
 }
 
 export const briefPrompt = (file) =>
-  `Keep a short, living brief of this task in ${file} (Markdown). Agent Manager shows it to the user ` +
+  `Keep a short, living brief of this task in ${file} (Markdown). AI Agent Manager shows it to the user ` +
   'next to your terminal. Start it with one status line, then use exactly these four sections:\n' +
   'Status: planning | working | blocked | done\n' +
   'Set "done" only when the task is complete and its checks pass; set "blocked" when you need the user.\n' +

package/src/cli.js

@@ -4,6 +4,7 @@ import { Command, Option } from 'commander';
 import WebSocket from 'ws';
 import { HOST, PORT } from './config.js';
 import { api, BASE, ensureDaemon, isRunning } from './client.js';
+import { about, latestRelease } from './about.js';
 
 const tty = process.stdout.isTTY;
 const c = (code) => (s) => (tty ? `\x1b[${code}m${s}\x1b[0m` : String(s));
@@ -855,7 +856,47 @@ export async function main(argv) {
       console.log(j.enabled ? `AI judge ${green('on')}  ${j.calls} of ${j.cap} calls today (on your own engine plan)` : `AI judge ${dim('off')}  (fixed rules only; turn on: agentmgr judge on)`);
     });
 
-  const remoteCmd = program.command('remote').description('Open Agent Manager from a phone or another computer on the same network');
+  program
+    .command('about')
+    .description('Version, release date, author, license and links; the running daemon, if any')
+    .option('--check', 'also ask the npm registry for the newest version')
+    .action(async (opts) => {
+      // An older daemon has no /about; this install's own details still apply.
+      const a = (await isRunning()) ? await api('GET', '/about').catch(() => about()) : about();
+      const row = (k, v) => console.log(`${dim(k.padEnd(13))} ${v}`);
+      console.log(`${a.product} ${green(a.version)}${a.releaseDate ? dim(`  released ${a.releaseDate}`) : ''}`);
+      row('Author', a.author ?? '—');
+      row('License', a.license ?? '—');
+      row('Package', `${a.package} (npm install -g ${a.package})`);
+      row('Code', a.links.repository ?? '—');
+      row('Issues', a.links.issues ?? '—');
+      if (a.daemon.port) row('Daemon', `pid ${a.daemon.pid}, port ${a.daemon.port}, since ${new Date(a.daemon.startedAt).toLocaleString()}, data in ${a.daemon.home}`);
+      else row('Daemon', dim('not running (start: agentmgr ui)'));
+      row('Node.js', `${a.daemon.node} on ${a.daemon.platform}`);
+      if (opts.check) {
+        const r = await latestRelease();
+        row('Latest', r.newer ? yellow(`${r.latest} is available: npm install -g ${a.package}@latest`) : `${r.latest} (up to date)`);
+      }
+    });
+
+  program
+    .command('doctor')
+    .description('Check what AI Agent Manager needs on this machine (Node.js, Claude Code, git, gh, the daemon) and how to fix it')
+    .action(async () => {
+      const { doctor } = await import('./doctor.js');
+      const checks = await doctor();
+      const mark = { ok: green('✓'), warn: yellow('!'), fail: red('✗'), info: dim('·') };
+      const width = Math.max(...checks.map((c) => c.name.length));
+      for (const c of checks) {
+        console.log(`${mark[c.status]} ${c.name.padEnd(width)}  ${c.status === 'fail' ? red(c.detail) : c.detail}`);
+        if (c.fix) console.log(`  ${' '.repeat(width)}  ${dim('→')} ${c.fix}`);
+      }
+      const failed = checks.filter((c) => c.status === 'fail').length;
+      console.log(failed ? red(`\n${failed} problem${failed === 1 ? '' : 's'} to fix`) : green('\nReady: start with `agentmgr ui`'));
+      if (failed) process.exitCode = 1;
+    });
+
+  const remoteCmd = program.command('remote').description('Open AI Agent Manager from a phone or another computer on the same network');
   const printRemote = async (st, { qr = true } = {}) => {
     if (!st.enabled || !st.running) return console.log(`remote access ${dim('off')}  (turn on: agentmgr remote on)`);
     console.log(`remote access ${green('on')}  HTTPS port ${st.port}`);

package/src/conflicts.js

@@ -95,11 +95,11 @@ export function conflictMessage(self, group) {
   const what = files ? `is changing the same files as you in this repository: ${files}.` : `is working on related code in this repository.`;
   const order =
     group.mergeFirst === self.id
-      ? `Agent Manager suggests your change lands first; ${group.agent.name} will rebase onto it.`
-      : `Agent Manager suggests ${group.agent.name}'s change lands first: when it does, rebase onto it and resolve the overlap.`;
+      ? `AI Agent Manager suggests your change lands first; ${group.agent.name} will rebase onto it.`
+      : `AI Agent Manager suggests ${group.agent.name}'s change lands first: when it does, rebase onto it and resolve the overlap.`;
   const ai = group.ai?.reason ? ` Why this matters: ${group.ai.reason}${group.ai.advice ? ` ${group.ai.advice}` : ''}` : '';
   return (
-    `Heads-up from Agent Manager: another agent, ${group.agent.name}, ${what} ${order}${ai} ` +
+    `Heads-up from AI Agent Manager: another agent, ${group.agent.name}, ${what} ${order}${ai} ` +
     `Keep your edits in those files focused, avoid unrelated reformatting there, and mention the overlap in your PR description.`
   );
 }