ai-agentmanager 1.7.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.9.0 (2026-10-31)
+
+- **Intent, spec and plan:** each task agent now has INTENT.md (the request as given, its Jira summary, attachments and who started it; written by AI Agent Manager), SPEC.md (requirements, acceptance criteria, out of scope; the agent writes it before changing code) and PLAN.md (steps it ticks off), next to its brief. **Intent · Spec · Plan** buttons and the split view's Docs menu show them; Explain, the documents and AI review read the spec and plan; **Push & open PR** puts them in the pull request's description (intent in full, spec and plan folded). `"specs": false` in config.json turns the spec and plan instructions off.
+- **Export diagrams:** every drawn diagram has **Copy image** (paste into Slack, a PR comment or a doc), **PNG** and **SVG**; a document with diagrams also downloads as one self-contained **.html**. Diagrams now use SVG text labels so they export as images.
+- **Listen:** **🔊 Listen** reads Explain, the documents and the change walkthrough aloud with the browser's own voices (nothing leaves the device; works on phones). The walkthrough is read change by change, showing each as it's read. Pause, stop and speed (0.85× to 1.75×).
+
+## 1.8.0 (2026-10-31)
+
+- **Update from your phone:** **Update to …** and **About → Update and restart** now show over remote access too; the install and restart run on the computer and the page reloads when it's back. It installs only the official release, from where this copy came from.
+- **Jira summaries:** an agent created from a Jira link shows the issue's summary as its description (in the list and its header, and as the issue's title under Bugs), fetched in the background from Jira Cloud. Until then, or when it can't be fetched, the words after the link. **Settings → Jira** takes your site, email and API token for private issues (also `JIRA_SITE` / `JIRA_EMAIL` / `JIRA_API_TOKEN`); only `*.atlassian.net` and that site are contacted, and the token goes only to that site. Saving fills in agents already created.
+- **Theme:** Auto / Light / Dark in the ☰ menu, remembered in the browser; diagrams redraw in the theme's colors.
+
 ## 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.

package/README.md

@@ -7,6 +7,7 @@ Run one background [Claude Code](https://claude.com/claude-code) agent per inten
 ![The conflict radar: two agents changed the same lines of README.md; the AI judge rates it a collision and suggests which lands first](docs/images/conflict-radar.jpg)
 
 - **Intents in, agents out.** Give a list, one per line (say, a ticket each), and each becomes its own `claude` process. Or pick **One agent for all of it** and a long description goes to a single agent as written.
+- **Issue links.** A request that starts with a Jira link is named after the issue (`ABC-123`) and described by its summary, fetched from Jira Cloud (public issues as they are; your company's site after **Settings → Jira**: site, email and API token, kept on this computer and sent only to that site). Without access, the words after the link describe it.
 - **Repo or folder.** Give a git URL (cloned once, then each agent gets its own worktree and branch) or a local folder.
   - **Fast clones.** URLs are cloned as partial clones (`--filter=blob:none`): history now, file contents only for what's checked out.
   - **Progress.** Clone and checkout progress shows in the UI and `agentmgr ls`.
@@ -84,13 +85,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.7.0    # or a specific one
+npm install -g ai-agentmanager@1.9.0    # or a specific one
 ```
 
 Or from the repository, at a release tag:
 
 ```sh
-git clone --branch v1.7.0 --depth 1 https://github.com/jdmunta/ai-agentmanager-core.git
+git clone --branch v1.9.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
@@ -105,12 +106,12 @@ npm install
 npm link
 ```
 
-**Updating.** `agentmgr update` installs the newest release and restarts onto it; running agents pause briefly and resume. In the app, **Update to …** appears in the top bar when a release is out (checked twice a day; turn it off in **☰ → Settings** or with `agentmgr update --auto-check off`), and **About → Update and restart** does the same. A clone at a release tag (or one you `npm link`ed) moves to the newest tag; a clone on a branch or with uncommitted changes is left alone. By hand, use the command for how you installed, then `agentmgr restart`:
+**Updating.** `agentmgr update` installs the newest release and restarts onto it; running agents pause briefly and resume. In the app, **Update to …** appears in the top bar when a release is out (checked twice a day; turn it off in **☰ → Settings** or with `agentmgr update --auto-check off`), and **About → Update and restart** does the same. Both work from a signed-in phone too: the install and restart run on the computer, and the page reloads when it's back. A clone at a release tag (or one you `npm link`ed) moves to the newest tag; a clone on a branch or with uncommitted changes is left alone. By hand, use the command for how you installed, then `agentmgr restart`:
 
 | Installed with | Update |
 | --- | --- |
 | npm | `npm install -g ai-agentmanager@latest` |
-| A clone at a release tag | `git fetch --tags && git checkout v1.7.0 && npm install` (the tag you want) |
+| A clone at a release tag | `git fetch --tags && git checkout v1.9.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.
@@ -330,6 +331,8 @@ The Brief panel's **Share for review** buttons, or `agentmgr doc <agent> <kind>`
 | **Human vs AI** | Your top 5 decisions, each with why it needs you, the stakes, options and what the work suggests, plus a box for your answer. Up to 5 questions the AI answers, each with its confidence, evidence and how to check it. A second model's verdict on each. |
 | **Diagrams** | Diagrams only, for a quick grasp: the problem, the architecture (with what changes highlighted), the design, the data flow (animated) and the key interaction, plus the plan. Drawn from the documents already written and the agent's work. Optional: **Write all** leaves it out. |
 
+Each drawn diagram has **Copy image** (paste it into Slack, a PR comment or a doc), **PNG** and **SVG**, and a document with diagrams also downloads as one **.html** file. **🔊 Listen** reads Explain, documents and the change walkthrough aloud with the browser's own voices; the walkthrough is read change by change, showing each as it goes.
+
 **Human vs AI.** This review takes two separate read-only calls.
 1. **The split.** The agent's engine splits the open questions. *For you to decide* covers judgment calls such as intent, priorities, risk appetite and trade-offs. *Answered by AI* covers reasoning and evaluation: correctness, edge cases, test coverage and what's left.
 2. **The second opinion.** Another model reviews that split against the same context. It marks each AI answer *agrees*, *partly* or *disagrees*, with a correction where needed. It marks each of your questions *keep*, *AI could answer* or *reword*, and lists questions both lists missed.
@@ -386,7 +389,8 @@ Each card has at most **three points of about 12 words each**, so they're easy t
 - **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.
+- **Intent, spec and plan.** Each agent keeps INTENT.md (what was asked, written by AI Agent Manager), SPEC.md (requirements and acceptance criteria, written by the agent before it changes code) and PLAN.md (steps, ticked off as it goes) next to its brief. Open them with **Intent · Spec · Plan** or in the split view's Docs; Explain, the documents and AI review read them too. `"specs": false` in config.json stops asking agents for the spec and plan.
+- **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). Its description carries the intent, and the spec and plan in folded sections. With a pull request already open, it pushes to it. The pull request is linked to the agent.
 
 The same from the API: `GET /api/agents/:id/changes`, `POST …/changes/comments`, `…/changes/commit`, `…/changes/pr`. Plugins can refuse a commit or a pull request (`agent.commit`, `agent.pr`).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-agentmanager",
-  "version": "1.7.0",
+  "version": "1.9.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

@@ -6,6 +6,8 @@ import { touchScroll } from '/touchscroll.js';
 import { openStream, post, REMOTE } from '/transport.js';
 import { attachBox } from '/attach.js';
 import { initSide } from '/side.js';
+import { addTools, download, htmlFile, initExport } from '/export.js';
+import { bindListen, listenHtml, play, speakable, now as speaking, stop as stopSpeaking } from '/speak.js';
 import { initReview } from '/review.js';
 import { initLand, prChips } from '/land.js';
 import { initTriggers } from '/triggers.js';
@@ -164,6 +166,21 @@ function checksSummary(b) {
 }
 
 const diagrams = new Map(); // mermaid source -> rendered SVG (or an error)
+/** Whether the page is dark: the menu's choice, else this device's setting. */
+const isDark = () => {
+  const t = document.documentElement.dataset.theme;
+  return t ? t === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches;
+};
+// SVG text labels rather than HTML ones: a diagram then exports to PNG (the browser won't turn
+// HTML-in-SVG into an image).
+const mermaidConfig = () => ({ startOnLoad: false, securityLevel: 'strict', theme: isDark() ? 'dark' : 'default', htmlLabels: false, flowchart: { htmlLabels: false } });
+// Diagrams are drawn in the theme's colors: redraw them when it changes.
+window.addEventListener('agentmgr-theme', () => {
+  diagrams.clear();
+  mermaidLib?.initialize(mermaidConfig());
+  for (const el of document.querySelectorAll('[data-mermaid][data-filled]')) delete el.dataset.filled;
+  renderDiagrams(document);
+});
 const expanded = new Set(); // "<agent id>:<section>" the user opened with Show more
 
 /** Long sections are clamped; Show more toggles them. */
@@ -189,8 +206,7 @@ async function renderDiagrams(root) {
       try {
         if (!mermaidLib) {
           mermaidLib = (await import('/vendor/mermaid/mermaid.esm.min.mjs')).default;
-          const dark = matchMedia('(prefers-color-scheme: dark)').matches;
-          mermaidLib.initialize({ startOnLoad: false, securityLevel: 'strict', theme: dark ? 'dark' : 'default' });
+          mermaidLib.initialize(mermaidConfig());
         }
         const { svg } = await mermaidLib.render(`mmd-${diagrams.size}-${Date.now()}`, src);
         diagrams.set(src, { svg });
@@ -203,7 +219,10 @@ async function renderDiagrams(root) {
     for (const el of document.querySelectorAll('[data-mermaid]')) {
       if (el.dataset.mermaid !== src || el.dataset.filled) continue;
       el.dataset.filled = '1';
-      if (out.svg) el.innerHTML = out.svg;
+      if (out.svg) {
+        el.innerHTML = out.svg;
+        addTools(el);
+      }
       else el.innerHTML = `<div class="hint">Diagram could not be drawn (${esc(out.error)}). Source:</div><pre>${esc(src)}</pre>`;
     }
   }
@@ -221,7 +240,7 @@ function explainBox(a) {
       ${ex.markdown
         ? `${stale ? '<p class="hint">The brief has changed since this explanation; use <b>Explain again</b> to refresh it.</p>' : ''}
            ${clamp(a, 'explain', md(ex.markdown))}
-           <p class="hint">Explained ${ago(ex.at)}.</p>`
+           <p class="hint explain-foot">Explained ${ago(ex.at)}. ${listenHtml(`explain:${a.id}`, { title: 'Read the explanation aloud' })}</p>`
         : ''}
     </div>`;
   return { button, box };
@@ -251,9 +270,18 @@ const INSIGHT_ICONS = { why: '🎯', what: '📦', how: '🛠', now: '📍' };
 const DOCS = { analysis: 'Analysis', design: 'Design', flow: 'Flow', proposal: 'Proposal', humanai: 'Human vs AI', diagrams: 'Diagrams' };
 // Optional extras that "Write all" leaves out.
 const DOC_EXTRAS = new Set(['diagrams']);
-const DOC_TITLES = { ...DOCS, plan: 'Implementation plan' };
+const DOC_TITLES = { ...DOCS, plan: 'Plan', intent: 'Intent', spec: 'Spec' };
+// The agent's intent, spec and plan files (read from the daemon when opened; kept here by agent and kind).
+const SPEC_KINDS = { intent: 'Intent', spec: 'Spec', plan: 'Plan' };
+const specCache = new Map(); // "<agent>:<kind>" -> { markdown, at }
+const isSpecKind = (a, kind) => Boolean(SPEC_KINDS[kind]) && !(kind === 'plan' && a?.planReview);
+async function loadSpec(agentId, kind) {
+  const r = await api('GET', `/agents/${agentId}/specs/${kind}`).catch(() => null);
+  specCache.set(`${agentId}:${kind}`, { markdown: r?.markdown ?? null, at: r?.updatedAt ?? null, loaded: true });
+}
 /** What the document dialog shows: a stakeholder document, or the agent's plan under review. */
-const docOf = (a, kind) => (kind === 'plan' ? a?.planReview && { markdown: a.planReview.markdown, at: a.planReview.updatedAt } : a?.docs?.[kind]);
+const docOf = (a, kind) =>
+  isSpecKind(a, kind) ? specCache.get(`${a?.id}:${kind}`) : kind === 'plan' ? a?.planReview && { markdown: a.planReview.markdown, at: a.planReview.updatedAt } : a?.docs?.[kind];
 
 const VERDICT = { agree: '✓ Agrees', partly: '≈ Partly agrees', disagree: '✗ Disagrees', keep: '✓ Keep', ai: '🤖 AI could answer', reword: '✎ Reword' };
 const CONFIDENCE = { high: 'High confidence', medium: 'Medium confidence', low: 'Low confidence' };
@@ -324,6 +352,17 @@ function docButtons(a) {
       return `<button class="small doc-btn ${d?.markdown ? 'has' : ''}" data-doc="${k}" ${d?.pending ? 'disabled' : ''}
         title="${k === 'diagrams' ? (d?.markdown ? `Open the diagrams${stale ? ' (the brief changed since)' : ''}` : 'Draw the problem and its solution for a quick grasp: architecture, design, data flow (animated) and the key interaction, diagrams only. Built from the documents already written and the agent\'s work') : d?.markdown ? `Open the ${label.toLowerCase()} document${stale ? ' (the brief changed since)' : ''}` : `Write a ${label.toLowerCase()} document for stakeholders`}">${d?.pending ? `${label}…` : label}${d?.markdown ? (stale ? ' •' : ' ✓') : ''}</button>`;
     })
+    .join('')}</span>${specButtons(a)}`;
+}
+
+/** Intent · Spec · Plan: the files kept for reviewers (and put in the pull request's description). */
+function specButtons(a) {
+  if (!a.specDocs) return '';
+  return `<span class="doc-buttons spec-buttons" title="For reviewers, people and agents: what was asked, what done means, and the plan. Push & open PR puts them in the description">${Object.entries(SPEC_KINDS)
+    .map(([k, label]) => {
+      const at = a.specDocs[k] ?? (k === 'plan' ? a.planReview?.updatedAt : null);
+      return `<button class="small doc-btn ${at ? 'has' : ''}" data-doc="${k}" title="${at ? `Open ${label} (updated ${ago(at)})` : k === 'intent' ? 'Written when the agent is created' : `The agent writes it ${k === 'spec' ? 'before changing code' : 'and keeps it current'}`}">${label}${at ? ' ✓' : ''}</button>`;
+    })
     .join('')}</span>`;
 }
 
@@ -334,7 +373,9 @@ function renderDocDialog() {
   const a = agents.get(docView.agentId);
   const d = docOf(a, docView.kind);
   const label = DOC_TITLES[docView.kind];
-  const plan = docView.kind === 'plan';
+  // The plan under review (approve / send back); otherwise a plain file to read.
+  const plan = docView.kind === 'plan' && Boolean(a?.planReview);
+  const specKind = isSpecKind(a, docView.kind);
   $('#doc-title').textContent = `${label} · ${a?.name ?? ''}`;
   const body = $('#doc-body');
   body.classList.toggle('diagrams-view', docView.kind === 'diagrams');
@@ -343,6 +384,8 @@ function renderDocDialog() {
     body.dataset.rendered = '';
   } else if (d?.error) body.innerHTML = `<p class="error">Couldn't write it: ${esc(d.error)}</p>`;
   else if (plan && !d?.markdown) body.innerHTML = '<p class="hint">The agent is investigating and hasn\'t written its plan yet. You\'ll see it here (and in the inbox) when it has.</p>';
+  else if (specKind && !d?.loaded) body.innerHTML = '<p class="hint">Loading…</p>';
+  else if (specKind && !d?.markdown) body.innerHTML = `<p class="hint">${docView.kind === 'intent' ? 'No intent file for this agent (agents created before 1.9 have none).' : `The agent hasn't written its ${label.toLowerCase()} yet. It writes ${docView.kind === 'spec' ? 'the spec before changing code' : 'the plan and keeps it current'}.`}</p>`;
   else if (d?.markdown) {
     if (body.dataset.rendered !== d.at) {
       body.innerHTML = d.data ? humanAiHtml(d) : docHtml(d.markdown);
@@ -352,10 +395,13 @@ function renderDocDialog() {
   }
   const stale = !plan && d?.markdown && a.brief?.updatedAt && d.briefUpdatedAt !== a.brief.updatedAt;
   const by = d?.writer ? ` by ${d.writer}${d.critique ? `, checked by ${d.critique.label}` : ''}${d.from ? ` from ${d.from.length ? d.from.join(', ') : "the agent's work"}` : ''}` : '';
-  $('#doc-meta').textContent = d?.markdown ? `${plan ? `Plan · ${PLAN_LABEL[a.planReview.status]} · updated` : docView.kind === 'diagrams' ? 'Drawn' : 'Written'} ${ago(d.at)}${by}${stale ? ' · the brief has changed since; Regenerate for the latest' : ''}` : '';
+  $('#doc-meta').textContent = d?.markdown ? `${plan ? `Plan · ${PLAN_LABEL[a.planReview.status]} · updated` : specKind ? 'Updated' : docView.kind === 'diagrams' ? 'Drawn' : 'Written'} ${ago(d.at)}${by}${stale && !specKind ? ' · the brief has changed since; Regenerate for the latest' : ''}${specKind ? ' · goes into the pull request description' : ''}` : '';
   for (const id of ['doc-copy', 'doc-download', 'doc-print']) $(`#${id}`).disabled = !d?.markdown;
-  $('#doc-print').hidden = plan;
-  $('#doc-regen').hidden = plan;
+  // Diagrams: the whole document as one HTML file with every diagram (each also has Copy / PNG / SVG).
+  $('#doc-html').hidden = !/```mermaid/.test(d?.markdown ?? '');
+  $('#doc-listen').innerHTML = d?.markdown && docView.kind !== 'diagrams' ? listenHtml(`doc:${docView.agentId}:${docView.kind}`, { title: 'Read the document aloud' }) : '';
+  $('#doc-print').hidden = plan || specKind;
+  $('#doc-regen').hidden = plan || specKind;
   $('#doc-regen').disabled = Boolean(d?.pending);
   $('#doc-bg').hidden = !d?.pending;
   // Footer: send your answers (Human vs AI), or approve / send back the plan.
@@ -376,7 +422,10 @@ function openDoc(agentId, kind) {
   $('#doc-body').dataset.rendered = '';
   $('#doc-dialog').showModal();
   const a = agents.get(agentId);
-  if (kind !== 'plan' && !a.docs?.[kind]?.markdown && !a.docs?.[kind]?.pending) generateDoc();
+  if (isSpecKind(a, kind)) {
+    specCache.delete(`${agentId}:${kind}`);
+    loadSpec(agentId, kind).then(() => docView?.agentId === agentId && docView.kind === kind && renderDocDialog());
+  } else if (kind !== 'plan' && !a.docs?.[kind]?.markdown && !a.docs?.[kind]?.pending) generateDoc();
   renderDocDialog();
 }
 
@@ -386,6 +435,7 @@ function generateDoc() {
 }
 
 $('#doc-close').onclick = () => {
+  if (speaking()?.id.startsWith('doc:')) stopSpeaking();
   docView = null;
   $('#doc-dialog').close();
 };
@@ -472,6 +522,25 @@ function planRow(a) {
     ${p.status !== 'approved' ? '<button class="small ghost" data-act="plan-skip" title="Stop waiting for review; the agent goes ahead">Skip review</button>' : ''}</div>`;
 }
 $('#doc-print').onclick = () => window.open(`/share.html#${docView.agentId}/${docView.kind}`, '_blank', 'noopener');
+$('#doc-html').onclick = () => {
+  const a = agents.get(docView.agentId);
+  download(htmlFile($('#doc-body'), `${DOC_TITLES[docView.kind]}: ${a?.name ?? ''}`), `${a?.slug ?? 'agent'}-${docView.kind}.html`);
+};
+
+// Diagram export: files named after the agent they belong to.
+initExport({ toast, base: (slot) => (slot.closest('#doc-body') && docView ? agents.get(docView.agentId)?.slug : agents.get(term.agentId)?.slug ?? agents.get(selectedId)?.slug) ?? '' });
+
+// Listening: what each Listen control reads.
+bindListen((id) => {
+  const [what, agentId, kind] = id.split(':');
+  const a = agents.get(agentId);
+  let parts = null;
+  if (what === 'explain') parts = [speakable(a?.explanation?.markdown)];
+  else if (what === 'doc') parts = [speakable(kind === 'explain' ? a?.explanation?.markdown : docOf(a, kind)?.markdown)];
+  else if (what === 'walk') parts = reviewUi.listenParts();
+  else if (what === 'sidewalk') parts = sidePane?.listenParts();
+  if (!parts?.length || !play(id, parts)) toast('Nothing to read aloud here (or this browser has no speech)');
+});
 
 /** Why / What / How / Now as four cards. */
 function insightsBox(a) {
@@ -638,7 +707,7 @@ function agentItem(a) {
   const idle = !isActive(a);
   return `<li data-id="${a.id}" ${a.kind === 'general' || a.kind === 'assistant' ? '' : 'draggable="true" '}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.kind === 'assistant' ? '<span class="tag assistant">assistant</span> ' : a.startedBy ? '<span class="tag assistant" title="Started by the assistant">🤖 by assistant</span> ' : a.trigger ? `<span class="tag assistant" title="Started from ${a.trigger.source === 'github' ? 'a labeled GitHub issue' : 'the webhook'}${a.trigger.url ? `: ${esc(a.trigger.url)}` : ''}">⚡ ${a.trigger.source === 'github' ? 'GitHub' : 'webhook'}</span> ` : a.playbook ? `<span class="tag assistant" title="Started by the playbook ${esc(a.playbook.name)}">▶ ${esc(a.playbook.name)}</span> ` : ''}${a.engine && a.engine !== 'claude' ? `<span class="tag engine">${esc(ENGINE_LABEL[a.engine] ?? a.engine)}</span> ` : ''}${esc(a.intent || (a.kind === 'assistant' ? 'Finds new work and starts agents for it' : 'General session'))}</div>
+    <div class="intent" title="${esc(describeTitle(a) ?? '')}">${a.kind === 'general' ? '<span class="tag">general</span> ' : a.kind === 'assistant' ? '<span class="tag assistant">assistant</span> ' : a.startedBy ? '<span class="tag assistant" title="Started by the assistant">🤖 by assistant</span> ' : a.trigger ? `<span class="tag assistant" title="Started from ${a.trigger.source === 'github' ? 'a labeled GitHub issue' : 'the webhook'}${a.trigger.url ? `: ${esc(a.trigger.url)}` : ''}">⚡ ${a.trigger.source === 'github' ? 'GitHub' : 'webhook'}</span> ` : a.playbook ? `<span class="tag assistant" title="Started by the playbook ${esc(a.playbook.name)}">▶ ${esc(a.playbook.name)}</span> ` : ''}${a.engine && a.engine !== 'claude' ? `<span class="tag engine">${esc(ENGINE_LABEL[a.engine] ?? a.engine)}</span> ` : ''}${esc(describe(a) || (a.kind === 'assistant' ? 'Finds new work and starts agents for it' : '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>
@@ -1594,7 +1663,7 @@ function renderDetail() {
             ${[0, 1, 2, 3].map((p) => `<option value="${p}" ${p === (a.priority ?? 2) ? 'selected' : ''}>P${p}</option>`).join('')}
           </select>
           <span class="d-name">${esc(a.name)}</span> <span class="pill ${st}">${pillText(st)}</span>${a.kind === 'general' ? ' <span class="tag">general</span>' : ''}</h2>
-        <p class="intent">${esc(a.intent || (a.kind === 'general' ? 'General session: ask Claude anything in the terminal.' : a.kind === 'assistant' ? 'Your assistant: it checks for new work every few minutes and starts agents for it. Settings and activity: Assistant in the top bar.' : ''))}</p>
+        <p class="intent">${a.synopsis?.text ? `<b>${esc(a.synopsis.text)}</b>${a.synopsis.source === 'jira' ? ` <span class="hint">· ${esc(a.synopsis.key)}</span>` : ''}<br><span class="hint">${esc(a.intent)}</span>` : esc(a.intent || (a.kind === 'general' ? 'General session: ask Claude anything in the terminal.' : a.kind === 'assistant' ? 'Your assistant: it checks for new work every few minutes and starts agents for it. Settings and activity: Assistant in the top bar.' : ''))}</p>
       </div>
       <div class="d-actions">
         ${a.status === 'error' && !a.workdir
@@ -2108,6 +2177,7 @@ sidePane = initSide({
   codeUi,
   docHtml,
   renderDiagrams,
+  listenHtml,
   mainKind: () => term.kind,
   setMain: (kind) => term.agentId && term.open(term.agentId, kind),
   refit: () => requestAnimationFrame(() => term.refit()),
@@ -2897,6 +2967,10 @@ function upsert(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();
+  // An open intent / spec / plan that the agent just updated: read it again.
+  if (docView?.agentId === a.id && isSpecKind(a, docView.kind) && specCache.get(`${a.id}:${docView.kind}`)?.at !== (a.specDocs?.[docView.kind] ?? null)) {
+    loadSpec(a.id, docView.kind).then(renderDocDialog);
+  }
   reviewUi.agentChanged(a);
   sidePane?.agentChanged(a);
 }
@@ -3450,7 +3524,8 @@ $('#about-check').onclick = async () => {
   out.hidden = false;
   out.textContent = 'Checking…';
   try {
-    // On this computer the daemon can install it; from a phone, just say what is out.
+    // The daemon checks and can install it (from this computer or a signed-in phone); an older
+    // daemon without /update gets the manual steps.
     const local = await updateUi.check().catch(() => null);
     if (local) return void (out.innerHTML = local);
     const r = await api('GET', '/about/latest');
@@ -4070,6 +4145,10 @@ $('#login-form').addEventListener('submit', async (e) => {
 });
 
 // Engines this machine can run; the New agent form offers a choice once there's more than Claude.
+/** What an agent is about: the issue's summary when its request starts with an issue link, else the request. */
+const describe = (a) => a.synopsis?.text || a.intent;
+const describeTitle = (a) => (a.synopsis?.text ? `${a.synopsis.source === 'jira' ? `${a.synopsis.key} in Jira` : `${a.synopsis.key} (summary not fetched; your words after the link)`}. Request: ${a.intent}` : a.intent);
+
 const ENGINE_LABEL = { claude: 'Claude', codex: 'Codex', antigravity: 'Antigravity', muse: 'Muse Code' };
 async function loadEngines() {
   try {

package/public/export.js

@@ -0,0 +1,110 @@
+// Taking diagrams out of the page, for a pull request or Slack: each drawn diagram gets Copy image,
+// PNG and SVG; a whole document of diagrams downloads as one self-contained HTML file. Diagrams are
+// drawn with SVG text labels (not HTML in foreignObject), so they turn into PNGs without the
+// browser refusing a "tainted" canvas.
+
+const TOOLS = `<span class="dg-tools"><button type="button" class="small ghost" data-dg="copy" title="Copy as an image: paste into Slack, a GitHub comment or a doc">Copy image</button><button type="button" class="small ghost" data-dg="png" title="Download as a PNG">PNG</button><button type="button" class="small ghost" data-dg="svg" title="Download as an SVG (sharp at any size)">SVG</button></span>`;
+
+/** Add the export buttons to a drawn diagram slot. */
+export function addTools(slot) {
+  if (slot.querySelector('.dg-tools') || !slot.querySelector('svg')) return;
+  slot.insertAdjacentHTML('afterbegin', TOOLS);
+}
+
+const pageBg = () => getComputedStyle(document.body).backgroundColor || '#ffffff';
+
+/** A standalone copy of a diagram's SVG: sized, namespaced, on the page's background. */
+export function svgText(svg, { background = pageBg() } = {}) {
+  const copy = svg.cloneNode(true);
+  copy.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  copy.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+  const vb = svg.viewBox?.baseVal;
+  const box = svg.getBoundingClientRect();
+  const w = Math.ceil(vb?.width || box.width || 800);
+  const h = Math.ceil(vb?.height || box.height || 600);
+  copy.setAttribute('width', w);
+  copy.setAttribute('height', h);
+  copy.removeAttribute('style'); // mermaid's max-width would shrink it outside the page
+  if (background) {
+    const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    Object.entries({ x: vb?.x ?? 0, y: vb?.y ?? 0, width: '100%', height: '100%', fill: background }).forEach(([k, v]) => bg.setAttribute(k, v));
+    if (vb) {
+      bg.setAttribute('width', vb.width);
+      bg.setAttribute('height', vb.height);
+    }
+    copy.insertBefore(bg, copy.firstChild);
+  }
+  return { text: new XMLSerializer().serializeToString(copy), w, h };
+}
+
+/** The diagram as a PNG blob, at twice its size so it stays sharp on retina screens and in PRs. */
+export function pngBlob(svg, scale = 2) {
+  const { text, w, h } = svgText(svg);
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const canvas = Object.assign(document.createElement('canvas'), { width: w * scale, height: h * scale });
+      const ctx = canvas.getContext('2d');
+      ctx.scale(scale, scale);
+      ctx.drawImage(img, 0, 0, w, h);
+      canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('Could not make the image'))), 'image/png');
+    };
+    img.onerror = () => reject(new Error('Could not draw the diagram as an image'));
+    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(text)}`;
+  });
+}
+
+export function download(blob, name) {
+  const link = Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: name });
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(link.href), 2000);
+}
+
+const slugOf = (s) => String(s || 'diagram').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 60) || 'diagram';
+
+/** The diagram's name for files: its heading in the document, or "diagram". */
+function nameOf(slot, base) {
+  let el = slot.previousElementSibling;
+  while (el && !/^H[1-4]$/.test(el.tagName)) el = el.previousElementSibling;
+  return `${base ? `${slugOf(base)}-` : ''}${slugOf(el?.textContent)}`;
+}
+
+/** One page with every diagram (and heading) of a rendered document, to keep or attach. */
+export function htmlFile(article, title) {
+  const copy = article.cloneNode(true);
+  copy.querySelectorAll('.dg-tools').forEach((t) => t.remove());
+  copy.querySelectorAll('svg').forEach((svg, i) => {
+    const live = article.querySelectorAll('svg')[i];
+    if (live) svg.outerHTML = svgText(live, { background: null }).text;
+  });
+  const css = `body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;max-width:1000px;margin:32px auto;padding:0 16px;color:#1c2330;background:#fff}
+h1{font-size:24px}h2{font-size:18px;margin-top:28px;border-top:1px solid #dde1e7;padding-top:14px}
+.diagram{display:flex;justify-content:center;margin:12px 0;overflow-x:auto}svg{max-width:100%;height:auto}`;
+  const html = `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${title.replace(/</g, '&lt;')}</title><style>${css}</style></head><body>${copy.innerHTML}</body></html>`;
+  return new Blob([html], { type: 'text/html' });
+}
+
+/** Clicks on any diagram's buttons, wherever it is drawn. `base` names the files (the agent). */
+export function initExport({ toast, base = () => '' }) {
+  document.addEventListener('click', async (e) => {
+    const b = e.target.closest('[data-dg]');
+    if (!b) return;
+    const slot = b.closest('.diagram');
+    const svg = slot?.querySelector('svg');
+    if (!svg) return;
+    const name = nameOf(slot, base(slot));
+    try {
+      if (b.dataset.dg === 'svg') download(new Blob([svgText(svg).text], { type: 'image/svg+xml' }), `${name}.svg`);
+      else if (b.dataset.dg === 'png') download(await pngBlob(svg), `${name}.png`);
+      else {
+        // Safari wants the promise handed over within the click.
+        await navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob(svg) })]);
+        toast('Diagram copied as an image: paste it into Slack, a PR comment or a doc');
+      }
+    } catch (err) {
+      toast(b.dataset.dg === 'copy' ? `Couldn't copy (${err.message}); use PNG instead` : `Couldn't export: ${err.message}`, 5000);
+    }
+  });
+}

package/public/index.html

@@ -5,6 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <title>AI Agent Manager</title>
+    <script>
+      // The theme chosen in the menu (Auto / Light / Dark), applied before anything draws.
+      try {
+        const t = localStorage.getItem('agentmgr.theme');
+        if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t;
+      } catch {}
+    </script>
     <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" />
@@ -17,7 +24,7 @@
       <div class="brand">
         <a href="#" id="home-link" class="home-link" title="Home: all agents"><span class="logo" aria-hidden="true">◆</span><h1>AI Agent Manager</h1></a>
         <button id="about-btn" class="about-btn" type="button" title="About AI Agent Manager: version, release, links">About</button>
-        <button id="update-btn" class="update-btn local-only" type="button" hidden></button>
+        <button id="update-btn" class="update-btn" type="button" hidden></button>
         <span id="conn" class="conn" title="Daemon connection">connecting…</span>
       </div>
       <div class="top-actions">
@@ -42,6 +49,8 @@
             <button role="menuitem" id="alerts-btn" class="local-only" title="Slack alerts when an agent needs you">Alerts…</button>
             <button role="menuitem" id="remote-btn" class="local-only" title="Open AI Agent Manager from your phone">Remote access…</button>
             <div class="menu-sep"></div>
+            <div class="menu-theme"><span>Theme</span><span class="seg" role="radiogroup" aria-label="Theme"><button type="button" data-theme-set="auto" title="Follow this device's setting">Auto</button><button type="button" data-theme-set="light">Light</button><button type="button" data-theme-set="dark">Dark</button></span></div>
+            <div class="menu-sep"></div>
             <button role="menuitem" id="menu-about">About and updates…</button>
           </div>
         </div>
@@ -369,7 +378,9 @@
         <button type="button" id="doc-bg" class="small" hidden title="Close this and keep writing; you'll be told when it's ready">Continue in background</button>
         <button type="button" id="doc-regen" class="small" title="Write it again from the agent's latest work">Regenerate</button>
         <button type="button" id="doc-copy" class="small" title="Copy as Markdown">Copy Markdown</button>
+        <span id="doc-listen"></span>
         <button type="button" id="doc-download" class="small">Download .md</button>
+        <button type="button" id="doc-html" class="small" hidden title="One HTML file with every diagram: open it anywhere, attach it, or print it">Download .html</button>
         <button type="button" id="doc-print" class="small primary" title="Open a print-ready page (Save as PDF)">Print / PDF</button>
         <button type="button" id="doc-close" class="small ghost">Close</button>
       </div>
@@ -691,9 +702,9 @@
       <dl id="about-list" class="about-list"></dl>
       <p id="about-update" class="hint" hidden></p>
       <div class="dialog-actions">
-        <label class="about-auto local-only" title="Twice a day, ask for the newest release (GitHub for a git checkout, npm otherwise)"><input type="checkbox" id="about-auto" /> Check automatically</label>
+        <label class="about-auto" title="Twice a day, ask for the newest release (GitHub for a git checkout, npm otherwise)"><input type="checkbox" id="about-auto" /> Check automatically</label>
         <button type="button" id="about-check" class="ghost" title="Asks for the newest release">Check for updates</button>
-        <button type="button" id="about-install" class="primary local-only" hidden>Update and restart</button>
+        <button type="button" id="about-install" class="primary" hidden>Update and restart</button>
         <button type="button" id="about-close" class="primary">Close</button>
       </div>
     </dialog>
@@ -712,6 +723,15 @@
           <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>Jira</legend>
+          <p class="hint">For an agent created from a Jira link, its description shows the issue's summary. Public issues on Atlassian Cloud need nothing here; for your company's site, add it with your email and an <a href="https://id.atlassian.com/manage-profile/security/api-tokens" target="_blank" rel="noopener">API token</a>. The token is kept on this computer and sent only to that site.</p>
+          <div class="row three">
+            <label>Site <input name="jiraSite" placeholder="https://yourcompany.atlassian.net" autocomplete="off" /></label>
+            <label>Email <input name="jiraEmail" type="email" autocomplete="off" /></label>
+            <label>API token <input name="jiraToken" type="password" autocomplete="new-password" /></label>
+          </div>
+        </fieldset>
+        <fieldset>
           <legend>Updates</legend>
           <label class="check"><input type="checkbox" name="updateCheck" /> Check for a new release twice a day</label>
           <p class="hint">Shows <b>Update to …</b> in the top bar; one click installs it and restarts, and running agents resume.</p>

package/public/menu.js

@@ -22,7 +22,8 @@ export function initMenu({ api, esc, toast, $ }) {
   });
   // Any item closes the menu; its own handler does the rest.
   menu.addEventListener('click', (e) => {
-    if (e.target.closest('button')) open(false);
+    // The theme buttons keep it open, to compare.
+    if (e.target.closest('button') && !e.target.closest('[data-theme-set]')) open(false);
   });
   $('#menu-about').onclick = () => $('#about-btn').click();
 
@@ -53,6 +54,7 @@ export function initMenu({ api, esc, toast, $ }) {
   const dialog = $('#settings-dialog');
   const form = $('#settings-form');
   let service = null; // the login service as the dialog opened
+  let jira = null; // the Jira settings as the dialog opened
   $('#settings-btn').onclick = async () => {
     $('#settings-error').hidden = true;
     try {
@@ -60,9 +62,14 @@ export function initMenu({ api, esc, toast, $ }) {
       form.maxRunning.value = c.maxRunning ?? '';
       $('#settings-running').textContent = `Open now: ${c.running}.`;
       service = null;
+      const u = await api('GET', '/update').catch(() => null);
+      form.updateCheck.checked = u?.check !== false;
       if (!remote()) {
-        const u = await api('GET', '/update').catch(() => null);
-        form.updateCheck.checked = u?.check !== false;
+        jira = await api('GET', '/jira').catch(() => null);
+        form.jiraSite.value = jira?.site ?? '';
+        form.jiraEmail.value = jira?.email ?? '';
+        form.jiraToken.value = '';
+        form.jiraToken.placeholder = jira?.hasToken ? 'saved (type to replace)' : '';
         service = await api('GET', '/service').catch(() => null);
         $('#settings-service').hidden = !service?.supported;
         form.startAtLogin.checked = Boolean(service?.installed);
@@ -84,7 +91,11 @@ export function initMenu({ api, esc, toast, $ }) {
     e.preventDefault();
     try {
       const c = await api('PUT', '/cleanup', { maxRunning: form.maxRunning.value.trim() || null });
-      if (!remote()) await api('PUT', '/update', { check: form.updateCheck.checked }).catch(() => {});
+      await api('PUT', '/update', { check: form.updateCheck.checked }).catch(() => {});
+      if (!remote() && jira && (form.jiraSite.value.trim() !== (jira.site ?? '') || form.jiraEmail.value.trim() !== (jira.email ?? '') || form.jiraToken.value.trim())) {
+        await api('PUT', '/jira', { site: form.jiraSite.value.trim(), email: form.jiraEmail.value.trim(), token: form.jiraToken.value.trim() || undefined });
+        toast('Jira saved; summaries for agents from Jira links are being fetched', 4000);
+      }
       // Only when it changed: installing touches launchd / systemd.
       if (!remote() && service?.supported && form.startAtLogin.checked !== Boolean(service.installed)) {
         const s = await api('PUT', '/service', { enabled: form.startAtLogin.checked });
@@ -98,6 +109,31 @@ export function initMenu({ api, esc, toast, $ }) {
     }
   });
 
+  // ------------------------------------------------------------ Theme
+  const THEME_KEY = 'agentmgr.theme';
+  const theme = () => {
+    try {
+      return localStorage.getItem(THEME_KEY) || 'auto';
+    } catch {
+      return 'auto';
+    }
+  };
+  function applyTheme(t) {
+    if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t;
+    else delete document.documentElement.dataset.theme;
+    for (const b of menu.querySelectorAll('[data-theme-set]')) b.classList.toggle('on', b.dataset.themeSet === t);
+    window.dispatchEvent(new CustomEvent('agentmgr-theme'));
+  }
+  menu.addEventListener('click', (e) => {
+    const b = e.target.closest('[data-theme-set]');
+    if (!b) return;
+    try {
+      localStorage.setItem(THEME_KEY, b.dataset.themeSet);
+    } catch {}
+    applyTheme(b.dataset.themeSet);
+  });
+  applyTheme(theme());
+
   loadMe();
   return { loadMe };
 }