ai-agentmanager 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.7.0 (2026-10-31)
+
+- **Split view:** **◫ Split** in the terminal bar: the terminal (or a shell, or a browser tab) on the left, and Code, Docs (Diagrams by default, or any other document) or Changes on the right. Resizable and remembered.
+- **Review: changes explained one by one:** **Explain changes** in Review changes puts an explanation above each hunk (what, why, risk, what to check) and **◀ / ▶** or **[ / ]** step through them in reading order, skipping hunks that moved since. A notice and **Explain again** when the code changed after.
+
+## 1.6.0 (2026-10-31)
+
+- **Changes explained one by one:** `agentmgr doc <agent> walkthrough` explains each hunk of an agent's changes (what, why, risk, what to check) in the order a reviewer should read them, from the same diff the review screen shows. The review screen and a split view for it come next.
+- **Start at login:** a switch in ☰ → Settings installs (or removes) the login service, so the daemon and running agents come back by themselves after a restart, without a terminal command. Getting started lists it until it's on, and `agentmgr ui` mentions it when it's off. Same service as `agentmgr service install` (launchd on macOS, systemd on Linux).
+- **Attachments:** **📎 Attach files** in New agents and Ask Agent: pick, drop or paste screenshots, logs and documents. Each agent gets its own copy, listed in its request, in a folder Claude Code and Codex can read without a prompt (a team or race shares one copy). Backlog items keep theirs until they start. CLI: `--file-attach <path>` on `agentmgr add` and `agentmgr ask`.
+- **Ask Agent:** **Ask Claude** is now **Ask Agent**, with an Engine choice (Claude Code, Codex, Antigravity, Muse Code) and the engine's notice, if any. `agentmgr ask --engine <engine>`.
+
 ## 1.5.0 (2026-10-31)
 
 - **Muse Code engine:** Meta's Muse Code CLI (`muse`) as a fourth engine: `--engine muse` or **Muse Code** in the Engine picker. Session adoption, resume (messages typed once idle), conversation and usage, trust and approval questions in the inbox, a clean stop, and Explain. The picker warns when Muse is in contributor mode. Stuck detection from commands and edits isn't there yet for Muse.

package/README.md

@@ -42,7 +42,7 @@ Run one background [Claude Code](https://claude.com/claude-code) agent per inten
 - **Follows your conventions.** Before changing anything, agents review `CLAUDE.md` / `AGENTS.md`, skills, hooks and settings (repo and `~/.claude`), and follow them.
 - **Tokens and cost.** Input, output and cache tokens are tracked per session, subagents included, alongside the cost Claude Code reports.
 - **No trust prompt.** Folders agents run in are pre-trusted, so Claude's "trust this folder" prompt doesn't block them.
-- **Survives restarts and reboots.** Agents that were running when the daemon stopped (restart, crash or reboot) are resumed with the same session IDs when it starts again. `agentmgr service install` starts the daemon at login.
+- **Survives restarts and reboots.** Agents that were running when the daemon stopped (restart, crash or reboot) are resumed with the same session IDs when it starts again. For that after a reboot, turn on **Start at login** in ☰ → Settings (or run `agentmgr service install`); without it, the daemon starts only when you run `agentmgr`.
 - **Shells next to each agent.** **Open shell** gives a terminal in the agent's folder for running commands by hand. **+ Shell** opens as many more as you need, each in its own tab.
 - **Browser tabs.** **+ Browser** opens a page as this machine sees it, in a tab next to the agent's terminals. That can be the agent's dev server on `localhost:5173`, a site on its network or VPN, or any address. Local addresses the agent prints are offered as suggestions. It works from your phone or laptop too (see below).
 - **Live browser.** Browser tabs run a real Chrome on this machine and stream it into the tab: you see its screen and your clicks, scrolling, typing and paste go back to it, from the laptop or the phone. Because the page runs here, `localhost` is this machine, sites that refuse to be framed load normally, and popups (a sign-in window) open as tabs of their own and come back when they close. Chrome (or Chromium, Brave, Edge; `browserBin` in config.json picks one) runs headless with its own profile in `~/.agentmanager/browser-profile`, so sign-ins are remembered; it starts on the first view and stops after 15 minutes with nobody watching. Downloads go to `~/Downloads/agentmanager`. A site that still refuses it as a bot may accept `"browserHeadless": false`, which runs Chrome with a real window on this machine's screen. On Linux where Chrome's sandbox can't start (containers, Ubuntu 23.10+ user-namespace restrictions) the tab says so; `"browserNoSandbox": true` runs it without the sandbox, at your own risk. **Lite** on the bar switches a tab to the frame mode (the page loads in your own browser; quicker for a dev server).
@@ -51,7 +51,8 @@ Run one background [Claude Code](https://claude.com/claude-code) agent per inten
 - **Your layout.** Drag the edge of the agent list, or the line between the brief and the terminal, to resize them; double-click a line to reset it. **Expand** (Ctrl+Shift+E) fills the window with the terminal, shell or browser tab; **Full screen** fills the screen. Agents active in the last day sort to the top; idle ones are dimmed.
 - **As an app.** In Chrome or Edge, click the install icon in the address bar (or ⋮ → Cast, save and share → Install page as app). AI Agent Manager then opens in its own window with its own Dock or taskbar icon, and the daemon keeps running as before.
 - **About.** The version next to the title opens the About box: release date, author, license, links, and how this daemon runs (data folder, port, Node.js, which `claude`). **Check for updates** asks npm for the newest version. In a terminal: `agentmgr about` (`--check` for updates).
-- **General sessions.** **Ask Claude** starts a session with no repo, folder or intent, for questions. It is tracked and resumable like any other agent.
+- **General sessions.** **Ask Agent** starts a session with no repo, folder or intent, for questions, on Claude Code or any other engine you have (Codex, Antigravity, Muse Code). It is tracked and resumable like any other agent.
+- **Attachments.** **📎 Attach files** in New agents and Ask Agent (or drop files on the dialog, or paste a screenshot into the text box) adds a screenshot, a log or a document to the request. Each agent gets its own copy in `~/.agentmanager/uploads/<agent>/`, listed in its request, and Claude Code and Codex can read that folder without asking. From the CLI: `agentmgr add … --file-attach error.log` and `agentmgr ask … --file-attach shot.png`.
 
 New in 0.2, for running many agents at once:
 
@@ -83,13 +84,13 @@ Runs on macOS and Linux; on Windows, use WSL2. Requires Node 20+, `git`, and the
 
 ```sh
 npm install -g ai-agentmanager          # the latest release
-npm install -g ai-agentmanager@1.5.0    # or a specific one
+npm install -g ai-agentmanager@1.7.0    # or a specific one
 ```
 
 Or from the repository, at a release tag:
 
 ```sh
-git clone --branch v1.5.0 --depth 1 https://github.com/jdmunta/ai-agentmanager-core.git
+git clone --branch v1.7.0 --depth 1 https://github.com/jdmunta/ai-agentmanager-core.git
 cd ai-agentmanager-core
 npm install
 npm link            # optional: puts `agentmgr` on your PATH
@@ -109,7 +110,7 @@ npm link
 | Installed with | Update |
 | --- | --- |
 | npm | `npm install -g ai-agentmanager@latest` |
-| A clone at a release tag | `git fetch --tags && git checkout v1.5.0 && npm install` (the tag you want) |
+| A clone at a release tag | `git fetch --tags && git checkout v1.7.0 && npm install` (the tag you want) |
 | A clone of `main` | `git pull && npm install` |
 
 **Check your setup.** `agentmgr doctor` checks Node.js, Claude Code and its sign-in, git, `gh`, the data folder, the daemon's port and Chrome, and says how to fix anything missing.
@@ -383,6 +384,7 @@ Each card has at most **three points of about 12 words each**, so they're easy t
 
 - **Files and diff.** The changed files on the left with lines added and removed, and the diff file by file on the right. Click a file header to fold it; very large files start folded.
 - **Line comments.** Click **+** next to a line (or its line number) to comment on it, and add an overall comment if you like. **Send to agent** types them into the agent as one message, each with its file, line and the code it is about, and asks it to address them. Comments not sent yet are kept in this browser.
+- **Explain changes** explains each change one by one: a title, what it changes, why (from the request and the conversation), the risk and what to check, in the order a reviewer should read them. Each explanation sits above its hunk, and **◀ / ▶** (or **[** and **]**) step through them, opening folded files on the way. When the agent changes the code afterwards, the page says so and **Explain again** brings it up to date. From the CLI: `agentmgr doc <agent> walkthrough`.
 - **Commit all** commits everything in the worktree, new files included, with your git name and email.
 - **Push & open PR** pushes the branch and opens a pull request with `gh`, against the branch the agent started from (title from your text, or from the commits; **Draft** if you like). With a pull request already open, it pushes to it. The pull request is linked to the agent.
 
@@ -908,6 +910,7 @@ Usage comes from the session transcripts and is refreshed every few seconds whil
 ## Studio: code and terminals
 
 - **Code** (a tab next to **Claude** in the terminal pane) opens the agent's folder: a file tree, tabs, and Monaco, the editor inside VS Code, with syntax highlighting and search within a file. **Save** (Ctrl/Cmd+S) writes into the agent's folder. If the agent changed the file since you opened it, you're asked before anything is overwritten. Files you haven't edited pick up the agent's changes as it makes them. **Search** finds text across the folder (git grep, so ignored files are skipped). **Diff** compares the file with where the agent started, side by side, and you can edit on the right. **＋ / ▣ / ✎ / 🗑** create, rename and delete. Every path stays inside the agent's folder: `..`, and links that point outside, are refused.
+- **◫ Split** (in the terminal bar) keeps the terminal, a shell or a browser tab on the left and opens a pane on the right with **Code**, **Docs** (Diagrams by default; Design, Flow, Analysis, Proposal or Explain from the menu, written there if missing) or **Changes** (the change-by-change explanations, each with its diff). Drag the divider to resize; the pane, its tab and its width are remembered in this browser. Desktop only.
 - **VS Code / Cursor** opens the agent's folder (and the open file) in the editor installed on this computer. The buttons show when its `code` or `cursor` command is found.
 - Monaco loads from the jsDelivr CDN the first time you open **Code**. Offline, a plain text editor takes its place.
 - **Terminal** in the top bar opens a shell on this computer in your home folder, not tied to any agent. It works from any device you're signed in on, so you can run any command from your phone. **+ Terminal** opens more. They keep running when hidden; **×** ends one. Plugins can refuse it with the `terminal.open` policy (`kind: "machine"`).
@@ -920,7 +923,7 @@ Usage comes from the session transcripts and is refreshed every few seconds whil
   - **From another device** (remote access), AI Agent Manager gives each site its own HTTPS port. That port relays to the site as the machine sees it, so you can check from your phone what the agent built or what the machine can reach. Absolute links, redirects and hot-reload WebSockets on the same site keep working, and the site's "don't show me in a frame" headers are dropped. A link or redirect to a different site leaves the relay.
   - **Safety:** the relay serves only signed-in devices. It never relays to AI Agent Manager's own ports on any of the machine's addresses, and it removes AI Agent Manager's sign-in cookie before forwarding. Sites other than localhost must present a valid certificate. The relays close when remote access is turned off.
   - If a tab stays blank on a device, open it once with **↗** and accept the certificate there.
-- **Ask Claude** (or `agentmgr ask`) creates a `general` agent. All general sessions share `~/.agentmanager/general`, so Claude's folder-trust prompt only appears the first time.
+- **Ask Agent** (or `agentmgr ask`, with `--engine` for another engine) creates a `general` agent. All general sessions share `~/.agentmanager/general`, so Claude's folder-trust prompt only appears the first time.
 
 ## Configuration
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-agentmanager",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Run background coding agents (Claude Code, Codex) per intent, and keep track of them from a web UI, your phone or the CLI",
   "keywords": [
     "claude",

package/public/app.js

@@ -4,6 +4,8 @@ import { marked } from '/vendor/marked/marked.esm.js';
 import DOMPurify from '/vendor/dompurify/purify.es.mjs';
 import { touchScroll } from '/touchscroll.js';
 import { openStream, post, REMOTE } from '/transport.js';
+import { attachBox } from '/attach.js';
+import { initSide } from '/side.js';
 import { initReview } from '/review.js';
 import { initLand, prChips } from '/land.js';
 import { initTriggers } from '/triggers.js';
@@ -110,7 +112,8 @@ initSetup({ api, esc, $ });
 const updateUi = initUpdate({ api, esc, toast, $ });
 initMenu({ api, esc, toast, $ });
 initMachine({ api, esc, toast, $, Terminal, FitAddon });
-const codeUi = initCode({ api, esc, toast, $, agents, isOpen: () => term.kind === 'code' });
+let sidePane = null; // the split view's right pane (set up once the terminal is)
+const codeUi = initCode({ api, esc, toast, $, agents, isOpen: () => term.kind === 'code' || Boolean(sidePane?.showing('code')) });
 const playbooksUi = initPlaybooks({ api, esc, toast, $, select: (id) => (showTab('agents'), select(id)) });
 $('#new-playbook').onclick = () => {
   const f = $('#new-form');
@@ -1898,6 +1901,7 @@ const term = {
     const a = this.agentId && agents.get(this.agentId);
     // The agent's own session tab is named after its engine (Codex, Muse Code, …).
     $('.term-tab[data-kind="claude"]').textContent = ENGINE_LABEL[a?.engine] ?? 'Claude';
+    sidePane?.follow(this.agentId);
     const nums = new Set(a?.runtime.shells ?? []);
     if (isShell(this.kind)) nums.add(shellNum(this.kind));
     $('#shell-tabs').innerHTML = [...nums]
@@ -1929,6 +1933,7 @@ const term = {
     $('#term-wrap').hidden = false;
     $('#detail').classList.add('with-term');
     $('#term-wrap').classList.remove('browsing');
+    sidePane?.mainShowsCode();
     $('#term-wrap').classList.add('coding');
     this.ensure();
     this.disconnect();
@@ -2094,6 +2099,20 @@ $('#term-fit').onclick = () => term.refit();
 
 // ------------------------------------------------------------------ resizing, expanding, full screen
 
+sidePane = initSide({
+  api,
+  esc,
+  toast,
+  $,
+  agents,
+  codeUi,
+  docHtml,
+  renderDiagrams,
+  mainKind: () => term.kind,
+  setMain: (kind) => term.agentId && term.open(term.agentId, kind),
+  refit: () => requestAnimationFrame(() => term.refit()),
+});
+
 const layoutPref = {
   get(key) {
     try {
@@ -2113,6 +2132,8 @@ function applyLayout() {
   const side = layoutPref.get('sideWidth');
   const brief = layoutPref.get('briefHeight');
   document.documentElement.style.setProperty('--side-w', side ? `${side}px` : '340px');
+  const pane = layoutPref.get('paneWidth');
+  document.documentElement.style.setProperty('--pane-w', pane ? `${pane}%` : '45%');
   if (brief) document.documentElement.style.setProperty('--brief-h', `${brief}px`);
   else document.documentElement.style.removeProperty('--brief-h');
   $('#detail').classList.toggle('brief-sized', Boolean(brief));
@@ -2155,6 +2176,14 @@ dragHandle($('#split-side'), 'cols', (ev) => {
   return w;
 }, 'sideWidth');
 
+// The split view's divider: the right pane's share of the panel, in percent.
+dragHandle($('#split-pane'), 'cols', (ev) => {
+  const r = $('#term-split').getBoundingClientRect();
+  const pct = Math.min(Math.max(((r.right - ev.clientX) / r.width) * 100, 20), 75);
+  layoutPref.set('paneWidth', Math.round(pct));
+  return pct;
+}, 'paneWidth');
+
 dragHandle($('#split-term'), 'rows', (ev) => {
   const top = $('#detail').getBoundingClientRect().top;
   const h = Math.min(Math.max(ev.clientY - top, 60), $('#detail').clientHeight - 160);
@@ -2862,7 +2891,14 @@ $('#term-file').onchange = (e) => {
 function upsert(a) {
   agents.set(a.id, a);
   render();
+  agentChanged(a);
+}
+
+/** Views that show one agent's details outside the main render: keep them current. */
+function agentChanged(a) {
   if (a.id === term.agentId) term.renderTabs();
+  reviewUi.agentChanged(a);
+  sidePane?.agentChanged(a);
 }
 
 $('#counts').addEventListener('click', (e) => {
@@ -3147,6 +3183,7 @@ $('#recent-bar').addEventListener('click', (e) => {
 // ------------------------------------------------------------------ new agents dialog
 
 const dialog = $('#new-dialog');
+const newFiles = attachBox({ slot: $('#new-attach'), form: $('#new-form'), paste: $('#new-form').intents, esc, toast });
 function renderProjectOptions() {
   $('#project-options').innerHTML = projectsState
     .map((p) => `<option value="${esc(p.shortcut)}">${esc(p.name)}${p.repo ? ` · ${esc(p.repo)}` : p.dir ? ` · ${esc(p.dir)}` : ''}</option>`)
@@ -3224,6 +3261,12 @@ $('#new-form').addEventListener('submit', async (e) => {
   e.preventDefault();
   const f = new FormData(e.target);
   const intents = formIntents(e.target);
+  if (newFiles.pending()) {
+    $('#new-error').textContent = 'Still uploading the attached files; try again in a moment';
+    $('#new-error').hidden = false;
+    return;
+  }
+  const attachments = newFiles.paths().length ? newFiles.paths() : undefined;
   if (f.get('when') === 'team') {
     // "analyst=opus reviewer=opus"
     const models = Object.fromEntries(
@@ -3234,6 +3277,7 @@ $('#new-form').addEventListener('submit', async (e) => {
     );
     try {
       const team = await api('POST', '/teams', {
+        attachments,
         intent: intents.join('\n'),
         critics: Number(f.get('critics')),
         mode: f.get('teamMode') || undefined,
@@ -3253,6 +3297,7 @@ $('#new-form').addEventListener('submit', async (e) => {
       teams.set(team.id, team);
       dialog.close();
       e.target.reset();
+      newFiles.clear();
       syncWhen();
       openTeam(team.id);
       toast(team.mode === 'lead' ? 'Team started: one lead session with sub-agents' : `Team started: ${team.members.length} agents`);
@@ -3274,6 +3319,7 @@ $('#new-form').addEventListener('submit', async (e) => {
       });
     try {
       const race = await api('POST', '/races', {
+        attachments,
         intent: intents.join('\n'),
         variants,
         testCommand: f.get('testCommand') || undefined,
@@ -3288,6 +3334,7 @@ $('#new-form').addEventListener('submit', async (e) => {
       races.set(race.id, race);
       dialog.close();
       e.target.reset();
+      newFiles.clear();
       syncWhen();
       openRace(race.id);
       toast(`Race started: ${race.rows.length} attempts`);
@@ -3300,6 +3347,7 @@ $('#new-form').addEventListener('submit', async (e) => {
   if (f.get('when') === 'backlog') {
     try {
       const added = await api('POST', '/backlog', {
+        attachments,
         items: intents,
         repo: f.get('repo') || undefined,
         dir: f.get('dir') || undefined,
@@ -3315,6 +3363,7 @@ $('#new-form').addEventListener('submit', async (e) => {
       });
       dialog.close();
       e.target.reset();
+      newFiles.clear();
       showTab('backlog');
       toast(`Queued ${added.length} item${added.length > 1 ? 's' : ''}`);
     } catch (err) {
@@ -3325,6 +3374,7 @@ $('#new-form').addEventListener('submit', async (e) => {
   }
   try {
     const created = await api('POST', '/agents', {
+        attachments,
       priority: Number(f.get('priority')),
       intents,
       repo: f.get('repo') || undefined,
@@ -3342,6 +3392,7 @@ $('#new-form').addEventListener('submit', async (e) => {
     created.forEach((a) => agents.set(a.id, a));
     dialog.close();
     e.target.reset();
+      newFiles.clear();
     select(created[0].id);
     toast(`Created ${created.length} agent${created.length > 1 ? 's' : ''}`);
     if (created.length === 1 && created[0].runtime.planning) term.open(created[0].id);
@@ -3418,17 +3469,29 @@ $('#ask-btn').onclick = () => {
   askDialog.querySelector('textarea').focus();
 };
 $('#ask-cancel').onclick = () => askDialog.close();
+const askFiles = attachBox({ slot: $('#ask-attach'), form: $('#ask-form'), paste: $('#ask-form textarea'), esc, toast });
 $('#ask-form').addEventListener('submit', async (e) => {
   e.preventDefault();
   const f = new FormData(e.target);
+  if (askFiles.pending()) {
+    $('#ask-error').textContent = 'Still uploading the attached files; try again in a moment';
+    $('#ask-error').hidden = false;
+    return;
+  }
   try {
     const a = await api('POST', '/general', {
       question: String(f.get('question') || '').trim() || undefined,
       name: String(f.get('name') || '').trim() || undefined,
+      engine: f.get('engine') || undefined,
+      attachments: askFiles.paths().length ? askFiles.paths() : undefined,
     });
     agents.set(a.id, a);
     askDialog.close();
+    // Keep the engine for the next question; clear the rest.
+    const engine = e.target.engine.value;
     e.target.reset();
+    e.target.engine.value = engine;
+    askFiles.clear();
     select(a.id);
     // The shared general folder is ready almost immediately; open the terminal once it runs.
     const t0 = Date.now();
@@ -3470,7 +3533,7 @@ function handleEvent(msg) {
   } else if (msg.t === 'agent') {
     agents.set(msg.agent.id, msg.agent);
     watchDocs(msg.agent);
-    if (msg.agent.id === term.agentId) term.renderTabs();
+    agentChanged(msg.agent);
   } else if (msg.t === 'removed') {
     agents.delete(msg.id);
     if (selectedId === msg.id) select(null);
@@ -4011,18 +4074,19 @@ const ENGINE_LABEL = { claude: 'Claude', codex: 'Codex', antigravity: 'Antigravi
 async function loadEngines() {
   try {
     const list = (await api('GET', '/engines')).filter((e) => e.installed && e.id !== 'claude');
-    const sel = document.querySelector('#engine-field select');
-    for (const e of list) sel.append(Object.assign(document.createElement('option'), { value: e.id, textContent: e.label }));
-    $('#engine-field').hidden = !list.length;
     // Something to know before choosing an engine (Muse Code in contributor mode, say).
     const notices = Object.fromEntries(list.filter((e) => e.notice).map((e) => [e.id, e.notice]));
-    const show = () => {
-      const n = $('#engine-notice');
-      n.textContent = notices[sel.value] ?? '';
-      n.hidden = !notices[sel.value];
-    };
-    sel.addEventListener('change', show);
-    show();
+    for (const [field, notice] of [['#engine-field', '#engine-notice'], ['#ask-engine-field', '#ask-engine-notice']]) {
+      const sel = document.querySelector(`${field} select`);
+      for (const e of list) sel.append(Object.assign(document.createElement('option'), { value: e.id, textContent: e.label }));
+      $(field).hidden = !list.length;
+      const show = () => {
+        $(notice).textContent = notices[sel.value] ?? '';
+        $(notice).hidden = !notices[sel.value];
+      };
+      sel.addEventListener('change', show);
+      show();
+    }
   } catch {}
 }
 

package/public/attach.js

@@ -0,0 +1,100 @@
+// Attachments for a request that has no agent yet (New agents, Ask): pick, drop or paste files
+// (a screenshot, a log). Each uploads to the daemon right away and shows as a chip; the form sends
+// the uploaded paths, and the daemon copies them to each agent it creates.
+
+const fmtSize = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(0)} KB` : `${(n / 1048576).toFixed(1)} MB`);
+
+/**
+ * `slot` is an element to fill with the button and chips; `form` takes drops; `paste` (a textarea)
+ * takes pasted files. Returns { paths(), pending(), clear() }.
+ */
+export function attachBox({ slot, form, paste, esc, toast }) {
+  const items = []; // { id, name, size, path?, error?, uploading }
+  let seq = 0;
+  slot.classList.add('attach-box');
+  slot.innerHTML = `<button type="button" class="small ghost attach-pick" title="Attach files: a screenshot, a log, a document. You can also drop them here or paste into the text box">📎 Attach files</button>
+    <input type="file" multiple hidden />
+    <span class="attach-chips"></span>`;
+  const input = slot.querySelector('input[type=file]');
+  const chips = slot.querySelector('.attach-chips');
+
+  function render() {
+    chips.innerHTML = items
+      .map(
+        (it) => `<span class="attach-chip ${it.error ? 'fail' : ''}" title="${esc(it.error ?? it.path ?? 'Uploading…')}">${esc(it.name)} <span class="hint">${it.uploading ? 'uploading…' : it.error ? 'failed' : fmtSize(it.size)}</span><button type="button" class="link" data-drop="${it.id}" title="Remove">×</button></span>`,
+      )
+      .join('');
+  }
+
+  async function add(files) {
+    for (const file of files) {
+      const name = file.name || `pasted-${Date.now()}.${(file.type.split('/')[1] || 'bin').replace(/\W/g, '')}`;
+      const it = { id: ++seq, name, size: file.size, uploading: true };
+      items.push(it);
+      render();
+      try {
+        const res = await fetch(`/api/uploads?name=${encodeURIComponent(name)}`, {
+          method: 'POST',
+          credentials: 'same-origin',
+          headers: { 'content-type': 'application/octet-stream', 'x-agentmgr': '1' },
+          body: file,
+        });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+        Object.assign(it, { path: data.path, size: data.size });
+      } catch (err) {
+        it.error = err.message;
+        toast(`Could not attach ${name}: ${err.message}`, 5000);
+      }
+      it.uploading = false;
+      render();
+    }
+  }
+
+  slot.querySelector('.attach-pick').onclick = () => input.click();
+  input.onchange = () => {
+    add([...input.files]);
+    input.value = '';
+  };
+  chips.addEventListener('click', (e) => {
+    const id = Number(e.target.closest('[data-drop]')?.dataset.drop);
+    if (!id) return;
+    items.splice(
+      items.findIndex((it) => it.id === id),
+      1,
+    );
+    render();
+  });
+  form.addEventListener('dragover', (e) => {
+    if ([...(e.dataTransfer?.types ?? [])].includes('Files')) {
+      e.preventDefault();
+      form.classList.add('dropping');
+    }
+  });
+  form.addEventListener('dragleave', (e) => {
+    if (!form.contains(e.relatedTarget)) form.classList.remove('dropping');
+  });
+  form.addEventListener('drop', (e) => {
+    form.classList.remove('dropping');
+    const files = [...(e.dataTransfer?.files ?? [])];
+    if (!files.length) return;
+    e.preventDefault();
+    add(files);
+  });
+  // A pasted screenshot (or copied files) attaches; pasted text stays text.
+  paste?.addEventListener('paste', (e) => {
+    const files = [...(e.clipboardData?.files ?? [])];
+    if (!files.length) return;
+    e.preventDefault();
+    add(files);
+  });
+
+  return {
+    paths: () => items.filter((it) => it.path).map((it) => it.path),
+    pending: () => items.some((it) => it.uploading),
+    clear() {
+      items.length = 0;
+      render();
+    },
+  };
+}

package/public/index.html

@@ -25,7 +25,7 @@
         <button id="assistant-btn" title="An always-on session that finds new work and starts agents for it">Assistant <span id="assistant-dot" class="assistant-dot" hidden></span></button>
         <button id="spend-btn" title="Results across agents (merge rate, time to PR, cost per merged PR), what they cost, and spending limits">Results <span id="spend-today" class="spend-today"></span></button>
         <button id="machine-btn" title="A terminal on this computer (your home folder), from any device you're signed in on">Terminal</button>
-        <button id="ask-btn" title="A general Claude session with no repo or folder">Ask Claude</button>
+        <button id="ask-btn" title="A general session with no repo or folder, on Claude Code or another engine you have (Codex, Muse Code, …)">Ask Agent</button>
         <button id="new-btn" class="primary">+ New agents</button>
         <div class="menu-wrap">
           <button id="menu-btn" class="menu-btn" type="button" aria-haspopup="menu" aria-expanded="false" title="Settings and preferences">
@@ -96,41 +96,59 @@
             <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-split-btn" class="ghost small desk-only" title="Split: the terminal on the left, and Code, Docs (diagrams) or Changes on the right">◫ Split</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>
-          <div id="terminal" class="terminal"></div>
-          <div id="code" class="code"></div>
-          <div id="browser" class="browser">
-            <form id="browser-bar" class="browser-bar" autocomplete="off">
-              <button type="button" id="browser-back" class="ghost small live-only" title="Back">◀</button>
-              <button type="button" id="browser-fwd" class="ghost small live-only" title="Forward">▶</button>
-              <button type="button" id="browser-reload" class="ghost small" title="Reload the page">⟳</button>
-              <input id="browser-url" placeholder="localhost:5173, a port, or any address" spellcheck="false" autocapitalize="off" autocorrect="off" enterkeyhint="go">
-              <button class="small">Go</button>
-              <button type="button" id="browser-sound" class="ghost small live-only" title="Hear the page: sound from videos and audio playing on that machine">🔇</button>
-              <button type="button" id="browser-keys" class="ghost small live-only touch-only" title="Show the keyboard to type into the page">⌨</button>
-              <button type="button" id="browser-mode" class="ghost small" hidden></button>
-              <a id="browser-pop" class="ghost small button" target="_blank" rel="noopener" title="Open in a new browser tab on this device" hidden>↗</a>
-            </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 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 class="term-split" id="term-split">
+            <div class="term-main" id="term-main">
+            <div id="terminal" class="terminal"></div>
+            <div id="code" class="code"></div>
+            <div id="browser" class="browser">
+              <form id="browser-bar" class="browser-bar" autocomplete="off">
+                <button type="button" id="browser-back" class="ghost small live-only" title="Back">◀</button>
+                <button type="button" id="browser-fwd" class="ghost small live-only" title="Forward">▶</button>
+                <button type="button" id="browser-reload" class="ghost small" title="Reload the page">⟳</button>
+                <input id="browser-url" placeholder="localhost:5173, a port, or any address" spellcheck="false" autocapitalize="off" autocorrect="off" enterkeyhint="go">
+                <button class="small">Go</button>
+                <button type="button" id="browser-sound" class="ghost small live-only" title="Hear the page: sound from videos and audio playing on that machine">🔇</button>
+                <button type="button" id="browser-keys" class="ghost small live-only touch-only" title="Show the keyboard to type into the page">⌨</button>
+                <button type="button" id="browser-mode" class="ghost small" hidden></button>
+                <a id="browser-pop" class="ghost small button" target="_blank" rel="noopener" title="Open in a new browser tab on this device" hidden>↗</a>
+              </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 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: 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>
+              <div id="browser-live" class="browser-live" hidden>
+                <img id="browser-live-img" alt="" draggable="false">
+                <textarea id="browser-live-keys" class="browser-live-keys" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" aria-label="Type into the page"></textarea>
+                <div id="browser-live-msg" class="browser-live-msg" hidden></div>
+              </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: 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>
-            <div id="browser-live" class="browser-live" hidden>
-              <img id="browser-live-img" alt="" draggable="false">
-              <textarea id="browser-live-keys" class="browser-live-keys" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" aria-label="Type into the page"></textarea>
-              <div id="browser-live-msg" class="browser-live-msg" hidden></div>
             </div>
+            <div class="splitter split-pane" id="split-pane" role="separator" aria-orientation="vertical" title="Drag to resize; double-click to reset" hidden></div>
+            <aside class="side-pane" id="side-pane" hidden>
+              <div class="side-bar">
+                <div class="term-tabs" role="tablist">
+                  <button class="term-tab" data-side="code" role="tab" title="The agent's files">Code</button>
+                  <button class="term-tab" data-side="docs" role="tab" title="Diagrams and the other documents">Docs</button>
+                  <button class="term-tab" data-side="changes" role="tab" title="Its changes, explained one by one">Changes</button>
+                </div>
+                <span class="spacer"></span>
+                <button type="button" class="ghost small" id="side-close" title="Close the split">✕</button>
+              </div>
+              <div class="side-body" id="side-body"></div>
+            </aside>
           </div>
           <div id="term-drop" class="term-drop" hidden>Drop files to attach</div>
           <div class="keybar" id="keybar" aria-label="Terminal keys">
@@ -173,6 +191,7 @@
           <span class="sr-only">Intents</span>
           <textarea name="intents" rows="6" required placeholder="Add a dark mode toggle that remembers the user's choice&#10;Make search results show up as you type&#10;Find out why the dashboard takes 5 seconds to load and speed it up&#10;Add a one-click CSV export to the reports page"></textarea>
         </label>
+        <div id="new-attach"></div>
         <div class="row">
           <label>
             Git repository URL
@@ -307,16 +326,24 @@
 
     <dialog id="ask-dialog">
       <form id="ask-form" method="dialog">
-        <h2>Ask Claude</h2>
+        <h2>Ask an agent</h2>
         <p class="hint">A general session with no repo or folder. It is tracked and resumable like any other agent.</p>
         <label>
           Question <span class="hint">optional; you can also just type in the terminal</span>
           <textarea name="question" rows="4" placeholder="How do I tune GC for a JVM with a 32 GB heap?"></textarea>
         </label>
-        <label>
-          Name <span class="hint">optional</span>
-          <input name="name" placeholder="jvm-gc-questions" />
-        </label>
+        <div id="ask-attach"></div>
+        <div class="row">
+          <label>
+            Name <span class="hint">optional</span>
+            <input name="name" placeholder="jvm-gc-questions" />
+          </label>
+          <label id="ask-engine-field">
+            Engine
+            <select name="engine"><option value="">Claude Code</option></select>
+            <span class="hint warn" id="ask-engine-notice" hidden></span>
+          </label>
+        </div>
         <p id="ask-error" class="error" hidden></p>
         <div class="dialog-actions">
           <button type="button" id="ask-cancel" class="ghost">Cancel</button>
@@ -679,6 +706,11 @@
           <label class="check">Keep at most <input type="number" name="maxRunning" min="1" max="500" placeholder="no limit" class="num" /> agents open at once</label>
           <p class="hint">Above it, the agents idle longest are closed (they resume when you open them), so the machine stays responsive. Never closed: agents working, waiting for your answer, active in the last 5 minutes, marked Keep, or in a team that is still going. <span id="settings-running"></span></p>
         </fieldset>
+        <fieldset class="local-only" id="settings-service">
+          <legend>Start at login</legend>
+          <label class="check"><input type="checkbox" name="startAtLogin" /> Start AI Agent Manager when I log in</label>
+          <p class="hint">After a restart or a crash, the daemon comes back by itself and running agents resume; without it, it starts only when you run <code>agentmgr</code>. <span id="settings-service-state"></span></p>
+        </fieldset>
         <fieldset class="local-only">
           <legend>Updates</legend>
           <label class="check"><input type="checkbox" name="updateCheck" /> Check for a new release twice a day</label>