From b45d2f4db3bdb7fccab79c7abf4ab36987ef9734 Mon Sep 17 00:00:00 2001
From: ahmad-ajmal <ahmadajmal1514@gmail.com>
Date: Fri, 2 Oct 2026 14:11:38 +0100
Subject: [PATCH] =?UTF-8?q?Enforce=20agent-state=20UX=20for=20app=E2=86=92?=
 =?UTF-8?q?agent=20features?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Work an app queues for an agent now has to be visible in the View until it
is done, and the default path makes that the easy thing to do (#13).

- validate: new "agent work shown in the View" step. A stack-agnostic static
  scan finds trigger(...) calls that name a capability in app-owned code (JS,
  Go, Ruby, Python, Rust spellings; comments, strings, definitions, system
  files, deps and tests ignored) and fails when no View code renders the
  agent-task component or reads /api/_a2app/tasks/. The component's own file
  does not count.
- UI kit: an agent-task panel, badge and useAgentTask hook in every blueprint
  with a queue and a View (AgentTask.jsx for react-node/go/rust; Vue
  components + agentTask.js for rails-vue). One shared poller per task, every
  state rendered (waiting with elapsed time and a no-listener hint, working
  with step, done with a readable full-width result, failed with the reason
  in words and Ask again), record-written progress for multi-user apps, and
  the run's printed output when the bridge closed the task without a summary.
- Starters: "Ask an agent" button, agentTask field set by request-triage, and
  the previous task id in the payload so asking again is a new request.
- Skills: creator states the result-rendering rule and the gate; walk-verify
  gets check 6c for queued work; modify points at both.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 framework/cli/package.json                    |   2 +-
 framework/cli/src/lib/agentState.ts           | 341 ++++++++++++++
 framework/cli/src/lib/gate.ts                 |  18 +-
 framework/cli/test/agent-state.test.mjs       | 188 ++++++++
 skills/creator/SKILL.md                       |  39 +-
 skills/modify/SKILL.md                        |   6 +-
 skills/walk-verify/SKILL.md                   |  34 ++
 .../blueprint-go-react/template/AGENT_APP.md  |   3 +-
 .../blueprint-go-react/template/public/ui.css |  60 ++-
 .../template/reference/blueprint.md           |  46 +-
 .../blueprint-go-react/template/schema.go     |  21 +-
 .../template/src/AgentTask.jsx                | 439 ++++++++++++++++++
 .../blueprint-go-react/template/src/App.jsx   |  64 ++-
 .../blueprint-go-react/template/src/Icon.jsx  |   1 +
 .../template/reference/blueprint.md           |  18 +-
 .../template/schema.py                        |  15 +-
 .../blueprint-rails-vue/template/AGENT_APP.md |   4 +-
 .../template/lib/a2app_schema.rb              |  20 +-
 .../template/reference/blueprint.md           |  49 +-
 .../template/ui/src/App.vue                   |  72 ++-
 .../template/ui/src/agentTask.css             |  65 +++
 .../template/ui/src/agentTask.js              | 263 +++++++++++
 .../ui/src/components/AgentTaskBadge.vue      |  30 ++
 .../ui/src/components/AgentTaskPanel.vue      | 148 ++++++
 .../template/ui/src/components/Icon.vue       |   1 +
 .../template/AGENT_APP.md                     |   3 +-
 .../template/a2app.schema.mjs                 |  18 +-
 .../template/public/ui.css                    |  60 ++-
 .../template/reference/blueprint.md           |  51 +-
 .../template/src/AgentTask.jsx                | 439 ++++++++++++++++++
 .../blueprint-react-node/template/src/App.jsx |  64 ++-
 .../template/src/Icon.jsx                     |   1 +
 .../template/AGENT_APP.md                     |   3 +-
 .../template/public/ui.css                    |  60 ++-
 .../template/reference/blueprint.md           |  46 +-
 .../template/src/schema.rs                    |  26 +-
 .../template/view/AgentTask.jsx               | 439 ++++++++++++++++++
 .../template/view/App.jsx                     |  64 ++-
 .../template/view/Icon.jsx                    |   1 +
 39 files changed, 3140 insertions(+), 82 deletions(-)
 create mode 100644 framework/cli/src/lib/agentState.ts
 create mode 100644 framework/cli/test/agent-state.test.mjs
 create mode 100644 toolkits/blueprint-go-react/template/src/AgentTask.jsx
 create mode 100644 toolkits/blueprint-rails-vue/template/ui/src/agentTask.css
 create mode 100644 toolkits/blueprint-rails-vue/template/ui/src/agentTask.js
 create mode 100644 toolkits/blueprint-rails-vue/template/ui/src/components/AgentTaskBadge.vue
 create mode 100644 toolkits/blueprint-rails-vue/template/ui/src/components/AgentTaskPanel.vue
 create mode 100644 toolkits/blueprint-react-node/template/src/AgentTask.jsx
 create mode 100644 toolkits/blueprint-rust-react/template/view/AgentTask.jsx

diff --git a/framework/cli/package.json b/framework/cli/package.json
index 497f6e9..f676470 100644
--- a/framework/cli/package.json
+++ b/framework/cli/package.json
@@ -35,7 +35,7 @@
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "tsc -p tsconfig.json && node test/copy-tree.test.mjs && node test/manifest-merge.test.mjs && node test/containment.test.mjs && node test/connect.test.mjs && node test/bridge.test.mjs",
+    "test": "tsc -p tsconfig.json && node test/copy-tree.test.mjs && node test/manifest-merge.test.mjs && node test/containment.test.mjs && node test/connect.test.mjs && node test/bridge.test.mjs && node test/agent-state.test.mjs",
     "bundle-blueprints": "node scripts/bundle-blueprints.mjs",
     "bundle-skills": "node scripts/bundle-skills.mjs",
     "bundle": "node scripts/bundle-blueprints.mjs && node scripts/bundle-skills.mjs",
diff --git a/framework/cli/src/lib/agentState.ts b/framework/cli/src/lib/agentState.ts
new file mode 100644
index 0000000..740629b
--- /dev/null
+++ b/framework/cli/src/lib/agentState.ts
@@ -0,0 +1,341 @@
+/**
+ * The agent-state gate: work an app queues for an agent has to be visible in
+ * the View until it is done.
+ *
+ * An agent run takes seconds to minutes. A button that queues one and then goes
+ * quiet leaves the person looking at a screen with no sign anything is
+ * happening, and that is the failure this step exists to catch. The creator
+ * skill has always said so, but advice is followed unreliably and nothing used
+ * to notice when it was not.
+ *
+ * The check is static and stack-agnostic, so it runs on every app whatever its
+ * blueprint:
+ *
+ *   1. Find each `trigger(...)` call in app-owned code that names a capability,
+ *      which is what puts a task on the queue. A trigger without one only
+ *      announces an event, and no agent is ever handed it.
+ *   2. If any exists and the app has a human View, some View code must follow
+ *      the task: it reads `/api/_a2app/tasks/...`, or it renders the
+ *      blueprint's agent-task component. The component file itself does not
+ *      count (it carries an `@a2app-kit agent-task` marker), because shipping a
+ *      component nobody renders shows nothing.
+ *
+ * Comments are stripped before either search, so a note saying "TODO: poll
+ * /api/_a2app/tasks" proves nothing. System-owned files are skipped: they are
+ * the framework's code, not the app's, and the adapter's own `trigger`
+ * implementation is not a feature that queues work.
+ */
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { extname, join, relative, sep } from "node:path";
+import { canonPaths } from "./canon.js";
+
+/** One place app code puts work on the agent queue. */
+export interface QueuingTrigger {
+  /** project-relative, forward slashes */
+  file: string;
+  line: number;
+  /** the capability argument as written, e.g. `"triage"` */
+  capability: string;
+}
+
+export interface AgentStateReport {
+  triggers: QueuingTrigger[];
+  /** project-relative View files (markup or component sources) */
+  viewFiles: string[];
+  /** project-relative files whose code follows a queued task */
+  followers: string[];
+}
+
+/** The marker a kit component carries, so its own task polling is not counted as use. */
+export const KIT_MARKER = "@a2app-kit agent-task";
+
+/** Where the skill states the rule. Named in every failure so the fix is one read away. */
+export const RULE_POINTER =
+  'creator skill, "The UI that queues work must show that work until it is done"';
+
+const SKIP_DIRS = new Set([
+  "node_modules", ".git", ".a2app", ".lui", "dist", "build", "out", "target", "public",
+  "data", "pb_data", "vendor", "tmp", "log", "logs", "coverage", "__pycache__", ".venv",
+  "venv", ".next", ".nuxt", ".svelte-kit", ".turbo", ".cache",
+  "test", "tests", "__tests__", "spec",
+]);
+
+const MAX_FILE_BYTES = 512 * 1024;
+
+type Lang = "c" | "hash" | "markup";
+
+const LANG_BY_EXT: Record<string, Lang> = {
+  ".js": "c", ".mjs": "c", ".cjs": "c", ".jsx": "c", ".ts": "c", ".mts": "c", ".cts": "c", ".tsx": "c",
+  ".go": "c", ".rs": "c", ".java": "c", ".kt": "c", ".cs": "c", ".swift": "c", ".dart": "c", ".php": "c",
+  ".py": "hash", ".rb": "hash", ".ex": "hash", ".exs": "hash",
+  ".vue": "markup", ".svelte": "markup", ".html": "markup", ".htm": "markup", ".erb": "markup",
+};
+
+/** Files that ARE a View — markup, or a component a bundler compiles into one. */
+const VIEW_EXTS = new Set([".jsx", ".tsx", ".vue", ".svelte", ".html", ".htm", ".erb"]);
+
+const FOLLOW_RE = /_a2app\/tasks|\buseAgentTask\b|\bAgentTask\w*|<agent-task\b/;
+
+/** Is a test file by name, whatever directory it sits in. */
+const TEST_FILE_RE = /(\.|_)(test|spec)\.[a-z]+$|_test\.go$/i;
+
+/**
+ * Scan a project for queued agent work and for View code that follows it.
+ *
+ * `extraSkip` names project-relative files to leave out on top of the
+ * ownership canon (the gate passes none; tests use it).
+ */
+export function scanAgentState(projectDir: string, extraSkip: string[] = []): AgentStateReport {
+  const skip = new Set([...canonPaths(projectDir), ...extraSkip].map((p) => p.replace(/\\/g, "/")));
+  const report: AgentStateReport = { triggers: [], viewFiles: [], followers: [] };
+
+  for (const abs of walk(projectDir)) {
+    const rel = relative(projectDir, abs).split(sep).join("/");
+    if (skip.has(rel) || TEST_FILE_RE.test(rel)) continue;
+    const ext = extname(rel).toLowerCase();
+    const lang = LANG_BY_EXT[ext];
+    if (!lang) continue;
+
+    let raw: string;
+    try {
+      if (statSync(abs).size > MAX_FILE_BYTES) continue;
+      raw = readFileSync(abs, "utf8");
+    } catch {
+      continue;
+    }
+
+    if (VIEW_EXTS.has(ext)) report.viewFiles.push(rel);
+
+    const { noComments, codeOnly } = lang === "markup" ? stripMarkup(raw) : strip(raw, lang);
+    for (const t of findQueuingTriggers(noComments, codeOnly)) {
+      report.triggers.push({ file: rel, ...t });
+    }
+    if (!raw.includes(KIT_MARKER) && FOLLOW_RE.test(noComments)) report.followers.push(rel);
+  }
+  return report;
+}
+
+/** The gate's verdict: null when the View shows the work (or there is none to show). */
+export function agentStateProblem(report: AgentStateReport): string | null {
+  if (report.triggers.length === 0 || report.viewFiles.length === 0) return null;
+  if (report.followers.length > 0) return null;
+
+  const sites = report.triggers.map((t) => `  ${t.file}:${t.line} queues work for capability ${t.capability}`);
+  return [
+    "This app queues work for an agent, but no View code shows that work:",
+    ...sites,
+    "",
+    "An agent run takes seconds to minutes. A control that queues one and then goes quiet looks",
+    "broken. Keep the task id the trigger returns on the record, and render it in the View with the",
+    "blueprint's AgentTask component (see reference/blueprint.md), or follow",
+    "GET /api/_a2app/tasks/{id} yourself and show submitted (with elapsed time, and a \"no agent is",
+    "listening\" hint after ~20 s), working (progress.step), completed (result.summary in its own",
+    "full-width block) and failed (reason, and a way to ask again). On a multi-user app that read",
+    "answers 401: have the agent write its progress onto the record and render that through the",
+    "same component.",
+    `See the ${RULE_POINTER}.`,
+  ].join("\n");
+}
+
+/* ------------------------------------------------------------------ walking */
+
+function* walk(dir: string): Generator<string> {
+  let entries;
+  try {
+    entries = readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return;
+  }
+  for (const e of entries) {
+    if (e.isDirectory()) {
+      if (SKIP_DIRS.has(e.name) || e.name.startsWith(".")) continue;
+      yield* walk(join(dir, e.name));
+    } else if (e.isFile()) {
+      yield join(dir, e.name);
+    }
+  }
+}
+
+/* ---------------------------------------------------------------- stripping */
+
+interface Stripped {
+  /** source with comments blanked to spaces (newlines kept, so offsets and lines hold) */
+  noComments: string;
+  /** source with comments AND string contents blanked: only code structure is left */
+  codeOnly: string;
+}
+
+/**
+ * Blank comments (and, for `codeOnly`, string contents) without moving a
+ * single character, so an offset found in one view indexes the others.
+ *
+ * Deliberately a lexer, not a parser: it knows quotes and comment markers and
+ * nothing else. Single- and double-quoted strings end at a newline whatever
+ * the language says, so a stray apostrophe (JSX text, a Rust lifetime) can
+ * mislead it for one line at most.
+ */
+export function strip(src: string, lang: "c" | "hash"): Stripped {
+  const nc = src.split("");
+  const co = src.split("");
+  const blank = (arr: string[], i: number) => {
+    if (arr[i] !== "\n" && arr[i] !== "\r") arr[i] = " ";
+  };
+  const n = src.length;
+  let i = 0;
+  while (i < n) {
+    const c = src[i]!;
+    const next = src[i + 1];
+
+    // comments
+    if (lang === "c" && c === "/" && next === "/") {
+      while (i < n && src[i] !== "\n") (blank(nc, i), blank(co, i), i++);
+      continue;
+    }
+    if (lang === "c" && c === "/" && next === "*") {
+      const end = src.indexOf("*/", i + 2);
+      const stop = end === -1 ? n : end + 2;
+      for (; i < stop; i++) (blank(nc, i), blank(co, i));
+      continue;
+    }
+    if (lang === "hash" && c === "#") {
+      while (i < n && src[i] !== "\n") (blank(nc, i), blank(co, i), i++);
+      continue;
+    }
+
+    // strings
+    if (lang === "hash" && (src.startsWith('"""', i) || src.startsWith("'''", i))) {
+      const q = src.slice(i, i + 3);
+      const end = src.indexOf(q, i + 3);
+      const stop = end === -1 ? n : end + 3;
+      for (let j = i + 3; j < stop - 3; j++) blank(co, j);
+      i = stop;
+      continue;
+    }
+    if (c === '"' || c === "'" || (c === "`" && lang === "c")) {
+      const multiline = c === "`";
+      let j = i + 1;
+      while (j < n && src[j] !== c && (multiline || src[j] !== "\n")) {
+        if (src[j] === "\\") j++;
+        j++;
+      }
+      for (let k = i + 1; k < j && k < n; k++) blank(co, k);
+      i = src[j] === c ? j + 1 : j;
+      continue;
+    }
+    i++;
+  }
+  return { noComments: nc.join(""), codeOnly: co.join("") };
+}
+
+/**
+ * Markup (HTML, Vue, Svelte, ERB): blank `<!-- -->` comments, then lex each
+ * `<script>` body as code. Text outside scripts is left alone — an apostrophe
+ * in a sentence is not a string delimiter there.
+ */
+function stripMarkup(src: string): Stripped {
+  let noComments = src.replace(/<!--[\s\S]*?-->/g, (m) => m.replace(/[^\r\n]/g, " "));
+  let codeOnly = noComments;
+  const script = /(<script\b[^>]*>)([\s\S]*?)(<\/script>)/gi;
+  let m: RegExpExecArray | null;
+  while ((m = script.exec(noComments)) !== null) {
+    const start = m.index + m[1]!.length;
+    const body = m[2]!;
+    const s = strip(body, "c");
+    noComments = noComments.slice(0, start) + s.noComments + noComments.slice(start + body.length);
+    codeOnly = codeOnly.slice(0, start) + s.codeOnly + codeOnly.slice(start + body.length);
+  }
+  return { noComments, codeOnly };
+}
+
+/* ---------------------------------------------------------------- triggers */
+
+const TRIGGER_RE = /\btrigger\s*\(/g;
+/** What precedes a DEFINITION of trigger rather than a call to it. */
+const DEFINITION_BEFORE = /(?:\b(?:def|fn|func|function)\s+|\bfunc\s*\([^)]*\)\s*)$/;
+/** What follows a parameter list rather than an argument list (a body, or a TS return type). */
+const DEFINITION_AFTER = /^[ \t]*\{|^[ \t]*:[ \t]*[\w<[{(]/;
+/** A capability argument that names no capability. */
+const EMPTY_CAPABILITY = /^(?:""|''|``|null|undefined|None|nil|Option::None|false)$/;
+
+/**
+ * Find calls that put a task on the queue: `trigger(type, payload, capability)`
+ * with a capability that is not empty, in any of the blueprint spellings —
+ * positional (JS, Go, Ruby), keyword (`capability=` in Python), `Some(...)` in
+ * Rust, or the adapter's own object form `trigger({ type, capability })`.
+ */
+export function findQueuingTriggers(noComments: string, codeOnly: string): Array<{ line: number; capability: string }> {
+  const found: Array<{ line: number; capability: string }> = [];
+  TRIGGER_RE.lastIndex = 0;
+  let m: RegExpExecArray | null;
+  while ((m = TRIGGER_RE.exec(codeOnly)) !== null) {
+    const lineStart = codeOnly.lastIndexOf("\n", m.index) + 1;
+    if (DEFINITION_BEFORE.test(codeOnly.slice(lineStart, m.index))) continue;
+
+    const open = m.index + m[0].length - 1;
+    const args = splitArgs(noComments, codeOnly, open);
+    if (args === null) continue;
+    // A method body follows its parameter list: `trigger(input) {` or `trigger(x: T): R {`.
+    if (DEFINITION_AFTER.test(codeOnly.slice(args.close + 1, args.close + 80))) continue;
+
+    const capability = capabilityOf(args.list);
+    if (capability === null) continue;
+    const line = noComments.slice(0, m.index).split("\n").length;
+    found.push({ line, capability });
+  }
+  return found;
+}
+
+function capabilityOf(list: string[]): string | null {
+  const args = list.map((a) => a.trim()).filter((a) => a.length > 0);
+
+  // Python: capability passed by keyword.
+  const kw = args.find((a) => /^capability\s*=/.test(a));
+  if (kw) return normalizeCapability(kw.replace(/^capability\s*=\s*/, ""));
+
+  // The adapter's object form: trigger({ type, payload, capability }).
+  if (args.length === 1 && args[0]!.startsWith("{")) {
+    const obj = args[0]!;
+    const named = obj.match(/\bcapability\s*:\s*([^,}\n]+)/);
+    if (named) return normalizeCapability(named[1]!);
+    // Shorthand `{ type, capability }` passes a variable of that name.
+    if (/[{,]\s*capability\s*[,}]/.test(obj)) return "capability";
+    return null;
+  }
+
+  if (args.length < 3) return null;
+  return normalizeCapability(args[2]!);
+}
+
+function normalizeCapability(text: string): string | null {
+  let cap = text.trim();
+  const some = cap.match(/^Some\s*\(([\s\S]*)\)$/);
+  if (some) cap = some[1]!.trim();
+  if (EMPTY_CAPABILITY.test(cap)) return null;
+  return cap.replace(/\s+/g, " ").slice(0, 80);
+}
+
+/**
+ * Split the argument list of the call whose `(` is at `open`. Structure is read
+ * from `codeOnly` (string contents blanked, so a comma or paren inside a string
+ * is not one); the text of each argument comes from `noComments`.
+ */
+function splitArgs(noComments: string, codeOnly: string, open: number): { list: string[]; close: number } | null {
+  const list: string[] = [];
+  let depth = 0;
+  let start = open + 1;
+  for (let i = open; i < codeOnly.length; i++) {
+    const c = codeOnly[i]!;
+    if (c === "(" || c === "[" || c === "{") depth++;
+    else if (c === ")" || c === "]" || c === "}") {
+      depth--;
+      if (depth === 0) {
+        list.push(noComments.slice(start, i));
+        return { list, close: i };
+      }
+    } else if (c === "," && depth === 1) {
+      list.push(noComments.slice(start, i));
+      start = i + 1;
+    }
+  }
+  return null;
+}
diff --git a/framework/cli/src/lib/gate.ts b/framework/cli/src/lib/gate.ts
index 824a32e..4d99f2f 100644
--- a/framework/cli/src/lib/gate.ts
+++ b/framework/cli/src/lib/gate.ts
@@ -2,14 +2,16 @@
  * The validation gate and the security gate.
  *
  * Stack-agnostic core: framework files valid → build (manifest pipeline) →
- * toolkit-defined steps (migrations, footguns, ops resolution) → ownership canon
- * (validation-gate item AND the one v1-required security-gate check).
+ * toolkit-defined steps (migrations, footguns, ops resolution) → agent work shown
+ * in the View → ownership canon (validation-gate item AND the one v1-required
+ * security-gate check).
  *
  * Every failure is machine-readable — `{ step, message }` — so an agent fixes it
  * without human interpretation.
  */
 import { existsSync } from "node:fs";
 import { join } from "node:path";
+import { agentStateProblem, scanAgentState } from "./agentState.js";
 import { verifySystemHashes } from "./canon.js";
 import { validateFrameworkFiles } from "./frameworkFiles.js";
 import { DESCRIBE_BUDGET_CHARS } from "@a2app/rules";
@@ -112,6 +114,18 @@ export function runGate(projectDir: string, manifest: Manifest, opts: GateOption
     });
   }
 
+  // Work queued for an agent has to be visible where it was asked for. Static
+  // and stack-agnostic, so it holds for a hand-built app as much as a
+  // blueprint's; see agentState.ts for what counts.
+  runStep(errors, "agent work shown in the View (app→agent triggers)", () => {
+    const report = scanAgentState(projectDir);
+    const problem = agentStateProblem(report);
+    if (problem) throw new Error(problem);
+    if (report.triggers.length > 0 && report.viewFiles.length === 0) {
+      log.info("app→agent triggers queue work, but this app has no human View to show it in");
+    }
+  });
+
   // Operation resolution — every declared operation reaching a real
   // implementation — is stack-specific and can only run as a toolkit step. It
   // must be reported as UNCHECKED when no step covers it, never passed over in
diff --git a/framework/cli/test/agent-state.test.mjs b/framework/cli/test/agent-state.test.mjs
new file mode 100644
index 0000000..3fd9cda
--- /dev/null
+++ b/framework/cli/test/agent-state.test.mjs
@@ -0,0 +1,188 @@
+/**
+ * The agent-state gate: work an app queues for an agent has to be visible in
+ * the View until it is done.
+ *
+ * Standard library only, run directly, so `pnpm -r test` needs no test runner.
+ *
+ * Three things are pinned down here, and each one is a failure that would
+ * otherwise look like success:
+ *
+ *   EVERY STACK'S SPELLING IS SEEN. A trigger that queues work is written five
+ *   ways across the blueprints (positional, Python's keyword, Rust's Some(...),
+ *   the adapter's object form). One the scanner misses is a feature the gate
+ *   waves through.
+ *
+ *   ONLY QUEUED WORK COUNTS. A trigger with no capability announces an event
+ *   and hands no agent anything, and a comment, a string or the definition of
+ *   `trigger` is not a call. Failing those would make the gate noise.
+ *
+ *   SHIPPING THE COMPONENT IS NOT USING IT. Every blueprint ships the agent-task
+ *   component, and it reads the task endpoint itself. If its own file counted,
+ *   every app would pass.
+ */
+import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const lib = await import(pathToFileURL(resolve(here, "..", "dist", "lib", "agentState.js")).href);
+const { agentStateProblem, findQueuingTriggers, scanAgentState, strip } = lib;
+const repoRoot = resolve(here, "..", "..", "..");
+
+const failures = [];
+const check = (label, got, want) => {
+  const g = JSON.stringify(got);
+  const w = JSON.stringify(want);
+  if (g !== w) failures.push(`${label}\n    expected: ${w}\n    actual:   ${g}`);
+  else console.log(`  ok   ${label}`);
+};
+
+/** Capabilities found in one source string. */
+const caps = (src, lang = "c") => {
+  const s = strip(src, lang);
+  return findQueuingTriggers(s.noComments, s.codeOnly).map((t) => t.capability);
+};
+
+/* ----------------------------------------------- every stack's spelling */
+
+check("JS: positional capability", caps(`const { taskId } = trigger("task.needs_triage", { task: task.id }, "triage");`), ['"triage"']);
+check("Go: store.trigger with M{}", caps(`fired, err := store.trigger("x.y", M{"task": task["id"]}, "review")`), ['"review"']);
+check("Ruby: hash payload, next line opens a hash", caps(`fired = store.trigger("x.y", { "task" => task["id"] }, "triage")\n      { "ok" => true }`, "hash"), ['"triage"']);
+check("Python: capability by keyword", caps(`fired = store.trigger("x.y", {"task": rec["id"]}, capability="review")`, "hash"), ['"review"']);
+check("Rust: Some(capability)", caps(`let fired = store.trigger("x.y", &json!({ "task": id }), Some("review"))?;`), ['"review"']);
+check("adapter object form", caps(`a2app.trigger({ type: "x.y", payload: { id }, capability: "review" })`), ['"review"']);
+check("a variable capability still queues", caps(`trigger("x.y", payload, cap)`), ["cap"]);
+check("a call spanning lines", caps(`trigger(\n  "x.y",\n  { task: id }, // which one\n  "triage",\n)`), ['"triage"']);
+{
+  const s = strip(`// header\n\nconst a = 1;\nconst r = trigger("x", {}, "c");`, "c");
+  check("the line number is the call's", findQueuingTriggers(s.noComments, s.codeOnly).map((t) => t.line), [4]);
+}
+
+/* ------------------------------------------------ only queued work counts */
+
+check("no capability: an announcement", caps(`trigger("x.y", { task: id })`), []);
+check("empty capability (Go)", caps(`store.trigger("x.y", M{}, "")`), []);
+check("None capability (Python)", caps(`store.trigger("x.y", {}, capability=None)`, "hash"), []);
+check("nil capability (Ruby)", caps(`store.trigger("x.y", {}, nil)`, "hash"), []);
+check("None capability (Rust)", caps(`store.trigger("x.y", &json!({}), None)?`), []);
+check("in a line comment", caps(`// trigger("x.y", { task: id }, "triage")`), []);
+check("in a block comment", caps(`/* trigger("x.y", {}, "triage") */`), []);
+check("in a hash comment", caps(`# store.trigger("x.y", {}, "triage")`, "hash"), []);
+check("in a string", caps(`const doc = 'call trigger("x", {}, "c") to queue';`), []);
+check("in a Python docstring", caps(`"""\nstore.trigger("x", {}, capability="c")\n"""`, "hash"), []);
+check("def trigger (Python)", caps(`def trigger(self, etype, payload, capability=None):`, "hash"), []);
+check("fn trigger (Rust)", caps(`pub fn trigger(&mut self, etype: &str, payload: &Value, capability: Option<&str>) -> R {`), []);
+check("Go method definition", caps(`func (s *Store) trigger(etype string, payload M, capability string) (M, error) {`), []);
+check("JS method shorthand", caps(`trigger(type, payload, capability) {\n  return 1;\n}`), []);
+check("a longer name is not trigger", caps(`retrigger("x", {}, "c"); my_trigger("x", {}, "c")`), []);
+
+/* ------------------------------------------- the verdict on a whole app */
+
+const base = mkdtempSync(join(tmpdir(), "a2app-agent-state-"));
+const app = (name, files) => {
+  const dir = join(base, name);
+  for (const [rel, text] of Object.entries(files)) {
+    mkdirSync(dirname(join(dir, rel)), { recursive: true });
+    writeFileSync(join(dir, rel), text);
+  }
+  return scanAgentState(dir);
+};
+const RUNNER = `export const runners = { ask: (a, c, { trigger }) => trigger("x.y", { id: a.id }, "triage") };\n`;
+const KIT = `/** shared piece — @a2app-kit agent-task */\nexport const f = (id) => fetch("/api/_a2app/tasks/" + id);\nexport function AgentTaskPanel() {}\n`;
+
+try {
+  {
+    const r = app("silent", { "schema.mjs": RUNNER, "index.html": "<div id=app></div>", "src/App.jsx": "export default () => <button>Ask</button>;" });
+    check("queued work + a View that ignores it: fails", agentStateProblem(r) !== null, true);
+    const msg = agentStateProblem(r) ?? "";
+    check("…naming the call site", msg.includes("schema.mjs:1"), true);
+    check("…and pointing at the skill rule", msg.includes("The UI that queues work must show that work until it is done"), true);
+  }
+  {
+    const r = app("shipped-not-used", { "schema.mjs": RUNNER, "src/AgentTask.jsx": KIT, "src/App.jsx": "export default () => <button>Ask</button>;" });
+    check("the kit component alone does not count", agentStateProblem(r) !== null, true);
+  }
+  {
+    const r = app("uses-component", {
+      "schema.mjs": RUNNER,
+      "src/AgentTask.jsx": KIT,
+      "src/App.jsx": `import { AgentTaskPanel } from "./AgentTask.jsx";\nexport default ({ r }) => <AgentTaskPanel taskId={r.agentTask} />;`,
+    });
+    check("rendering the component passes", agentStateProblem(r), null);
+  }
+  {
+    const r = app("polls-itself", { "schema.mjs": RUNNER, "src/App.jsx": "const t = await api(`/api/_a2app/tasks/${id}`);\nexport default () => <p>{t.status}</p>;" });
+    check("following the task endpoint by hand passes", agentStateProblem(r), null);
+  }
+  {
+    const r = app("comment-only", { "schema.mjs": RUNNER, "src/App.jsx": "// TODO: poll /api/_a2app/tasks and render AgentTaskPanel\nexport default () => <p />;" });
+    check("a comment promising to follow it does not count", agentStateProblem(r) !== null, true);
+  }
+  {
+    const r = app("vue", {
+      "lib/schema.rb": `fired = store.trigger("x.y", { "task" => id }, "triage")\n`,
+      "ui/src/components/AgentTaskPanel.vue": `<!-- @a2app-kit agent-task -->\n<script setup>\nimport { useAgentTask } from "../agentTask.js";\n</script>`,
+      "ui/src/App.vue": `<!-- <AgentTaskPanel/> in a comment -->\n<template><p /></template>`,
+    });
+    check("Vue: a commented-out component does not count", agentStateProblem(r) !== null, true);
+  }
+  {
+    const r = app("vue-ok", {
+      "lib/schema.rb": `fired = store.trigger("x.y", { "task" => id }, "triage")\n`,
+      "ui/src/App.vue": `<script setup>\nimport AgentTaskPanel from "./components/AgentTaskPanel.vue";\n</script>\n<template><AgentTaskPanel :task-id="t.agentTask" /></template>`,
+    });
+    check("Vue: rendering the component passes", agentStateProblem(r), null);
+  }
+  {
+    const r = app("no-view", { "schema.py": `fired = store.trigger("x.y", {"task": 1}, capability="triage")\n`, "main.py": "app = 1\n" });
+    check("no human View: nothing to show it in, so no verdict", [r.triggers.length, r.viewFiles.length, agentStateProblem(r)], [1, 0, null]);
+  }
+  {
+    const r = app("announce-only", { "schema.mjs": `trigger("x.y", { id })\n`, "src/App.jsx": "export default () => <p />;" });
+    check("triggers without a capability need no display", agentStateProblem(r), null);
+  }
+  {
+    const r = app("system-owned", {
+      ".a2app/system-hashes.json": JSON.stringify({ "server.mjs": "sha256:x" }),
+      "server.mjs": `const t = a2app.trigger({ type, payload, capability: "c" });\n`,
+      "src/App.jsx": "export default () => <p />;",
+    });
+    check("system-owned files are the framework's, not the app's", r.triggers.length, 0);
+  }
+  {
+    const r = app("deps-and-tests", {
+      "node_modules/pkg/index.js": RUNNER,
+      "dist/assets/app.js": RUNNER,
+      "test/ask.test.mjs": RUNNER,
+      "src/App.jsx": "export default () => <p />;",
+    });
+    check("dependencies, build output and tests are not scanned", r.triggers.length, 0);
+  }
+
+  /* ------------------------------- the shipped starters pass their own gate */
+
+  for (const [id, wantFollowers] of [
+    ["blueprint-react-node", true],
+    ["blueprint-go-react", true],
+    ["blueprint-rust-react", true],
+    ["blueprint-rails-vue", true],
+    ["blueprint-python-fastapi", false],
+  ]) {
+    // A raw template has no ownership canon yet; the toolkit's systemPaths are
+    // what scaffolding records in it.
+    const tk = JSON.parse(readFileSync(join(repoRoot, "toolkits", id, "a2app.toolkit.json"), "utf8"));
+    const r = scanAgentState(join(repoRoot, "toolkits", id, "template"), tk.systemPaths ?? []);
+    check(`${id}: the starter queues work`, r.triggers.length > 0, true);
+    check(`${id}: …and ${wantFollowers ? "its View shows it" : "has no View to show it in"}`, [r.followers.length > 0, agentStateProblem(r)], [wantFollowers, null]);
+  }
+} finally {
+  rmSync(base, { recursive: true, force: true });
+}
+
+if (failures.length > 0) {
+  console.error(`\nagent-state gate: ${failures.length} check(s) failed\n`);
+  for (const f of failures) console.error(`  FAIL ${f}`);
+  process.exit(1);
+}
+console.log("\nagent-state gate: all checks passed");
diff --git a/skills/creator/SKILL.md b/skills/creator/SKILL.md
index cc2fac8..3aea000 100644
--- a/skills/creator/SKILL.md
+++ b/skills/creator/SKILL.md
@@ -253,8 +253,17 @@ Store the queue task id the trigger returns on the record, and have the View
 follow it (`GET /api/_a2app/tasks/{id}`, same origin, polled at its
 `pollAfterMs` only while unfinished). That read needs no credential on a
 single-user app only. On a multi-user app it answers 401, so there, have the
-agent write its progress onto the record and render that instead. Render
-every state, where the person asked:
+agent write its progress onto the record and render that instead.
+
+Blueprints that have a queue and a View ship this display as a shared piece:
+an agent-task **panel** and **badge** that follow the task and render every
+state below. `reference/blueprint.md` names the files, and the starter's
+"Ask an agent" button is the worked example. Use them rather than writing
+your own. **`validate` enforces this:** an app whose code queues work
+(`trigger(…)` with a capability) and whose View neither renders that component
+nor reads `/api/_a2app/tasks/` fails the gate.
+
+Render every state, where the person asked:
 
 - `submitted` — waiting to be picked up, with elapsed time. After ~20 s with no
   claim, say that no agent is listening and name `agent-app <dir> bridge start`.
@@ -264,10 +273,23 @@ every state, where the person asked:
 - `completed` — done, with `result.summary` if there is one. Re-read the data
   here, because the agent's writes are the answer.
 - `failed` / `canceled` — the `reason` in words, and a way to ask again.
+  Identical triggers dedupe to one task even after it has finished, so a
+  retry that sends the same payload gets the old failure back. Put the
+  previous task id in the payload (`{ task, previous }`) so asking again is a
+  new request, and disable the control while a run is open.
 
 A badge wherever the record appears in a list ("Agent working") is what lets
 someone leave the screen and come back.
 
+**Give the result room to be read.** An agent's answer is prose of any length:
+several sentences, line breaks, links. It gets its own full-width block, under
+the row or on the record's screen. Keep its line breaks, make its links links,
+and clamp long text behind "Show more" rather than letting it take over the
+page. Never append it to a title cell or put it in an existing narrow column.
+There it wraps a word or two per line and stretches the row down the screen.
+If the result matters after the run, have the agent write it to a field of its
+own and render that field the same way.
+
 ## Finish: boot the candidate, gate, then verify
 
 1. **`agent-app <dir> dev`** boots your build on a hidden port with a fresh
@@ -276,12 +298,13 @@ someone leave the screen and come back.
    prints. While this instance is up, every `a2app` operate command and
    `validate` target it automatically. Then **`agent-app <dir> validate`** runs
    the gate (app-part consistency → build → migrations-on-a-fresh-db →
-   operations resolve → ownership canon → describe budget, measured on the dev
-   instance). On errors: read ALL of them, fix ALL of them, re-run `dev` (a
-   fresh boot picks up backend edits) and `validate` again. A step the gate
-   reports **UNCHECKED** did not pass — it could not run; with the dev instance
-   up, nothing should be unchecked. `validate` records the gate pass `promote`
-   will demand. Never start servers by hand.
+   operations resolve → agent work shown in the View → ownership canon →
+   describe budget, measured on the dev instance). On errors: read ALL of
+   them, fix ALL of them, re-run `dev` (a fresh boot picks up backend edits)
+   and `validate` again. A step the gate reports **UNCHECKED** did not pass —
+   it could not run; with the dev instance up, nothing should be unchecked.
+   `validate` records the gate pass `promote` will demand. Never start servers
+   by hand.
 2. **REALITY CHECK — look at what actually exists, not at what you wrote.** Success
    messages lie by omission; stored state does not. While the app runs:
    - `a2app <dir>` → does the root show the modules you declared, with the entity
diff --git a/skills/modify/SKILL.md b/skills/modify/SKILL.md
index a7cc718..06f5d46 100644
--- a/skills/modify/SKILL.md
+++ b/skills/modify/SKILL.md
@@ -74,8 +74,10 @@ modification: use the **operator** skill directly, no rebuild. A **code change**
   operation implementations, non-system `operations.json`, your app's declared
   event types, and `AGENT_APP.md`. Adding an app→agent trigger: declare the event
   type first, where your blueprint declares them — an undeclared type is refused
-  at the moment of firing, inside the operation, in front of a user. Removing one
-  is a breaking change for anything polling that capability.
+  at the moment of firing, inside the operation, in front of a user. A trigger
+  that queues work also needs the View to show that work until it is done (the
+  creator skill's rule, and a `validate` step). Removing one is a breaking
+  change for anything polling that capability.
 - **Schema changes are additive migrations.** The user's data is live — never
   delete it, never drop-and-recreate collections that hold data. To alter a
   collection, write a new migration that loads and updates it. (Migration API and
diff --git a/skills/walk-verify/SKILL.md b/skills/walk-verify/SKILL.md
index 807ff32..0fab69d 100644
--- a/skills/walk-verify/SKILL.md
+++ b/skills/walk-verify/SKILL.md
@@ -85,6 +85,40 @@ verified by nobody. For each one, walk to it and confirm it is really there:
 A declared operation that cannot be walked to, or whose blocked reason
 contradicts the record, is a defect — report it like any other.
 
+**6c. Agent work (app→agent features)** — any control that queues work for an
+agent (an operation whose runner calls `trigger(…, capability)`; `validate`
+names each one) gets this walk, in the browser, without reloading the page
+between steps. You play the agent from a terminal, so nothing depends on a
+harness being installed:
+
+1. **Nobody listening.** With no bridge running, use the control. Within ~1 s
+   the screen shows the work as waiting, with an elapsed time that ticks.
+   Wait ~25 s: it now says that no agent is listening and how to start one
+   (`agent-app <dir> bridge start`). "Waiting…" with no end is a defect.
+2. **In progress.** `a2app <dir> tasks claim <id>`, then
+   `a2app <dir> tasks progress <id> --step "Reading the record"`. The screen
+   shows the agent working, the step text, and how long it has been running,
+   with no reload.
+3. **Done, with a readable result.** Complete it with a long, realistic
+   summary: several sentences, a line break and a URL
+   (`a2app <dir> tasks complete <id> --result '{"summary":"…"}'`). The result
+   appears in its own full-width block that reads like prose. Line breaks are
+   kept, the link is a link, and long text is clamped behind a "Show more"
+   (or similar). A result squeezed into an existing narrow column or appended
+   to a title cell, so it wraps a word or two per line or stretches the row, is
+   a defect. Any data the agent wrote is shown without a reload.
+4. **Failed.** Queue it again and fail it
+   (`a2app <dir> tasks complete <id> --reason "…"`). The reason shows in
+   words, and there is a way to ask again. Asking again must queue NEW work:
+   if the screen jumps straight back to the old failure, the retry is a no-op
+   (identical triggers dedupe to one task).
+5. **Come back later.** Leave the screen (or reload) mid-run. Wherever the
+   record appears in a list, a badge still says an agent is on it.
+
+Every state must be visible as it happens. One that is missing, frozen, or
+only appears after a refresh is a defect against Q5.7. Cite the step above
+and what the screen showed instead.
+
 **7. No fabricated data** — an unreachable external source shows an honest
 empty/offline state, never generated or random values standing in for real data.
 
diff --git a/toolkits/blueprint-go-react/template/AGENT_APP.md b/toolkits/blueprint-go-react/template/AGENT_APP.md
index 2b3a17e..5969376 100644
--- a/toolkits/blueprint-go-react/template/AGENT_APP.md
+++ b/toolkits/blueprint-go-react/template/AGENT_APP.md
@@ -34,7 +34,8 @@ exactly one, and describe's root screen lists them. They are declared in
   duration where a token exists.
 - **Shared pieces live in `src/`** — `Icon.jsx` (the icon set), `toast.jsx`
   (`useToast`), `ConfirmDialog.jsx` (`useConfirm` — never `window.confirm`),
-  `format.js`, `api.js` (the one fetch wrapper). Screens compose them — one
+  `format.js`, `api.js` (the one fetch wrapper), `AgentTask.jsx` (work queued
+  for an agent, shown until it is done). Screens compose them — one
   implementation per widget, no per-screen copies, no native browser dialogs.
   Component styles live in `public/ui.css`.
 - **Every screen renders all of its states**: loading skeletons (sized so
diff --git a/toolkits/blueprint-go-react/template/public/ui.css b/toolkits/blueprint-go-react/template/public/ui.css
index d795803..ffc9490 100644
--- a/toolkits/blueprint-go-react/template/public/ui.css
+++ b/toolkits/blueprint-go-react/template/public/ui.css
@@ -114,7 +114,7 @@ body {
 /* ---------------------------------------------------------------- task list */
 .task-list { list-style: none; margin: 0; padding: var(--sp-1) 0; }
 .task {
-  display: flex; align-items: center; gap: var(--sp-3);
+  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
   min-height: var(--row-h); padding: var(--sp-2) var(--sp-4);
   border-bottom: 1px solid var(--border-subtle);
   transition: background var(--dur-fast) var(--ease-std), opacity var(--dur-mid) var(--ease-std);
@@ -126,6 +126,8 @@ body {
 .task.done .title { color: var(--text-tertiary); text-decoration: line-through; }
 .task .due { font-size: var(--fs-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
 .task .due.overdue { color: var(--danger-text); font-weight: var(--fw-medium); }
+/* agent work gets its own full-width line under the row, never a squeeze into the title */
+.task > .agent-task { flex-basis: 100%; margin-bottom: var(--sp-1); }
 
 /* status: a labelled 3-state control; colour is never the only channel (text names the state) */
 .status-btn {
@@ -196,12 +198,68 @@ body {
 @keyframes fade-in { from { opacity: 0; } }
 @keyframes dialog-in { from { opacity: 0; transform: translateY(var(--sp-2)) scale(.98); } }
 
+/* ---------------------------------------------------------------- agent work (AgentTask.jsx)
+   Work queued for an agent stays visible until it is done. The panel takes the
+   full width of its container; an agent's result is prose of any length and
+   never goes in a title cell. */
+.agent-badge {
+  display: inline-flex; align-items: center; gap: var(--sp-1);
+  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
+  padding: 2px var(--sp-2); border-radius: var(--r-full); border: 1px solid;
+}
+.agent-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: currentColor; flex: none; }
+.live .agent-dot { animation: pulse 1.2s var(--ease-std) infinite; }
+
+.tone-neutral { --tone-bg: var(--neutral-bg); --tone-text: var(--neutral-text); --tone-border: var(--neutral-border); }
+.tone-info    { --tone-bg: var(--info-bg);    --tone-text: var(--info-text);    --tone-border: var(--info-border); }
+.tone-warning { --tone-bg: var(--warning-bg); --tone-text: var(--warning-text); --tone-border: var(--warning-border); }
+.tone-success { --tone-bg: var(--success-bg); --tone-text: var(--success-text); --tone-border: var(--success-border); }
+.tone-danger  { --tone-bg: var(--danger-bg);  --tone-text: var(--danger-text);  --tone-border: var(--danger-border); }
+.agent-badge { background: var(--tone-bg); color: var(--tone-text); border-color: var(--tone-border); }
+
+.agent-task {
+  display: flex; flex-direction: column; gap: var(--sp-2);
+  width: 100%; min-width: 0; padding: var(--sp-3) var(--sp-4);
+  border: 1px solid var(--tone-border); border-left-width: 3px; border-radius: var(--r-lg);
+  background: var(--bg-surface);
+}
+.agent-task-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--tone-text); }
+.agent-task-state { font-size: var(--fs-sm); font-weight: var(--fw-medium); min-width: 0; overflow-wrap: anywhere; }
+.agent-task-step { font-weight: var(--fw-regular); color: var(--text-secondary); }
+.agent-task-elapsed { margin-left: auto; font-size: var(--fs-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.agent-task-note { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
+.agent-task-note code { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--bg-sunken); padding: 1px var(--sp-1); border-radius: var(--r-sm); }
+.agent-task-failure { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
+.agent-task-failure .agent-task-note { flex: 1; min-width: 12ch; color: var(--danger-text); }
+.agent-task-code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-tertiary); }
+.agent-task-bar { height: 4px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; }
+.agent-task-bar span { display: block; height: 100%; background: var(--info-solid); transition: width var(--dur-mid) var(--ease-std); }
+
+.agent-result { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
+.agent-result-text {
+  margin: 0; max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere;
+  font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-primary);
+}
+.agent-result-text.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+.agent-result-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
+.agent-result-toggle {
+  font: inherit; font-size: var(--fs-sm); color: var(--accent-text); background: none; border: 0;
+  padding: var(--sp-1) 0; cursor: pointer; min-height: 24px;
+}
+.agent-result-toggle:hover { text-decoration: underline; }
+@media (prefers-reduced-motion: reduce) {
+  .live .agent-dot { animation: none; }
+  .agent-task-bar span { transition: none; }
+}
+
 /* ---------------------------------------------------------------- narrow screens */
 @media (max-width: 480px) {
   .app { padding: var(--sp-5) var(--sp-3) var(--sp-10); }
   .add-form { flex-wrap: wrap; }
   .add-form .field { flex-basis: 100%; }
   .task .due { display: none; }
+  /* the panel under the row says the same thing; the title keeps the room */
+  .task .agent-badge { display: none; }
   /* touch-first: primary controls grow toward the platform norm */
   .btn, .input, .select { min-height: 44px; }
   .btn-icon { width: 40px; height: 40px; }
diff --git a/toolkits/blueprint-go-react/template/reference/blueprint.md b/toolkits/blueprint-go-react/template/reference/blueprint.md
index 6b8e277..1169ae5 100644
--- a/toolkits/blueprint-go-react/template/reference/blueprint.md
+++ b/toolkits/blueprint-go-react/template/reference/blueprint.md
@@ -184,7 +184,9 @@ unbounded collection — page with `perPage`.
 **Shared pieces — `src/`** (one implementation each; import, don't rebuild):
 `<Icon name size>` · `useToast()` → `toast(kind, message)` ·
 `useConfirm()` → `[confirm, confirmElement]` (in-app dialog — never
-`window.confirm`) · `api(path, init)` · `fmtDay(dayKey)` · `isPastDay(dayKey)`.
+`window.confirm`) · `api(path, init)` · `fmtDay(dayKey)` · `isPastDay(dayKey)` ·
+`<AgentTaskPanel>` / `<AgentTaskBadge>` / `useAgentTask(id)` (`AgentTask.jsx` —
+work queued for an agent, shown until it is done; see **App→agent**).
 Component styles are plain CSS classes in `public/ui.css`.
 
 **Tokens — `public/tokens.css`:** the kit sheet — `--agent-app-*` foundation →
@@ -261,13 +263,39 @@ The starter's `request-triage` operation is the worked example.
 The queue only moves when something is listening: `agent-app <dir> bridge start`,
 or a harness polling `a2app <dir> tasks next --wait`.
 
-**Show the queued work in the View.** Keep the returned `taskId` on the record
-and follow it from the UI with a same-origin `GET /api/_a2app/tasks/{id}`, polled
-only while it is unfinished. That read needs no credential only on a
-single-user app. On a multi-user app it answers 401, so show what the agent
-writes to the record instead. Render queued → working (`progress.step`) → done or
-failed (`reason`, plus a way to ask again). The creator skill lists the states.
-A button that goes quiet after it queues work looks broken.
+**Show the queued work in the View — with `src/AgentTask.jsx`.** An agent run
+takes seconds to minutes, so the control that queued it has to show where it is
+until it is done. Keep the returned `taskId` on the record (a `readOnly` string
+field the runner sets, like the starter's `agentTask`), then render it:
+
+```jsx
+import { AgentTaskBadge, AgentTaskPanel } from "./AgentTask.jsx";
+
+<AgentTaskBadge taskId={rec.agentTask} />          // in the list row, beside the title
+<AgentTaskPanel taskId={rec.agentTask}             // full width: under the row, or on the record's screen
+  onSettled={reloadRecord} onRetry={askAgain} retrying={asking} />
+```
+
+The panel follows `GET /api/_a2app/tasks/{id}` while the run is unfinished and
+renders every state the creator skill lists: waiting with elapsed time (and "no
+agent is listening" after ~20 s), the agent's step and running time, the
+`result.summary` in its own readable block, and the failure `reason` with "Ask
+again". `useAgentTask(id)` gives you the same state to disable a control while a
+run is open. The starter's "Ask an agent" button is the worked example.
+
+Never put the result in a title cell or a narrow column. It is prose of any
+length, and the panel is where it goes.
+
+On a single-user app (`authMode: "none"`) the View needs no credential for the
+task read. **On a multi-user app it answers 401**, and the View has no other
+path to the queue yet. There, have the agent write its progress onto the record
+and pass it as `progress={{ status, step, summary, reason }}`; the panel and
+badge render it the same way. A 404 means the task has been pruned, so the
+indicator disappears.
+
+**`validate` checks this.** Its "agent work shown in the View" step fails an
+app whose code queues work (`trigger(…)` with a capability) when no View code
+renders the component or reads `/api/_a2app/tasks/`.
 
 ## Build, run, gate
 
@@ -278,7 +306,7 @@ hand.
 
 ```bash
 agent-app <dir> dev        # boot the candidate on a hidden port: fresh seeded store, prints the dev URL
-agent-app <dir> validate   # framework files → build → go vet + self-test → operations resolve → ownership canon → describe budget (on dev)
+agent-app <dir> validate   # framework files → build → go vet + self-test → operations resolve → agent work shown in View → ownership canon → describe budget (on dev)
 agent-app <dir> serve      # launch LIVE as a managed, health-polled background process; prints the URL
 agent-app <dir> promote    # requires the gate pass; backup, go run . --promote-check, destroys the dev instance
 ```
diff --git a/toolkits/blueprint-go-react/template/schema.go b/toolkits/blueprint-go-react/template/schema.go
index f175082..763bb9a 100644
--- a/toolkits/blueprint-go-react/template/schema.go
+++ b/toolkits/blueprint-go-react/template/schema.go
@@ -30,6 +30,10 @@ var ENTITIES = map[string]M{
 			{"name": "due", "type": "string", "max": 10, "dayKey": true},
 			{"name": "notes", "type": "string", "max": 2000},
 			{"name": "created", "type": "datetime", "readOnly": true},
+			// The queue task an agent is (or was last) working on for this
+			// record. The runner sets it; the View follows it, so the person can
+			// see the work they asked for until it is done.
+			{"name": "agentTask", "type": "string", "max": 64, "readOnly": true},
 		},
 	},
 }
@@ -144,15 +148,30 @@ var OPERATION_RUNNERS = map[string]OperationRunner{
 	// never a copy of the data, which would be stale by the time it is read.
 	// Nothing here can widen what the agent may do: the payload is data on the
 	// other side, and the capability names the kind of work, not a command.
+	//
+	// Identical triggers dedupe to ONE task, even after it has finished, so
+	// asking again with the same payload would hand back the old failure.
+	// Naming the previous task makes each request a new occurrence. The View
+	// disables the control while a run is open, so a double click cannot
+	// queue two.
+	//
+	// The task id goes on the record so the View can show the work until it is
+	// done (src/AgentTask.jsx). The validate gate checks that it does.
 	"request-triage": func(args M, _ M, store *Store) (any, error) {
 		task := store.getRecord("tasks", getStr(args, "task"))
 		if task == nil {
 			return M{"ok": false, "reason": "no such task"}, nil
 		}
-		fired, err := store.trigger("task.needs_triage", M{"task": task["id"]}, "triage")
+		payload := M{"task": task["id"]}
+		if prev := getStr(task, "agentTask"); prev != "" {
+			payload["previous"] = prev
+		}
+		fired, err := store.trigger("task.needs_triage", payload, "triage")
 		if err != nil {
 			return nil, err
 		}
+		task["agentTask"] = fired["taskId"]
+		store.putRecord("tasks", task)
 		return M{"ok": true, "task": task["id"], "queued": fired["taskId"]}, nil
 	},
 }
diff --git a/toolkits/blueprint-go-react/template/src/AgentTask.jsx b/toolkits/blueprint-go-react/template/src/AgentTask.jsx
new file mode 100644
index 0000000..d23ca67
--- /dev/null
+++ b/toolkits/blueprint-go-react/template/src/AgentTask.jsx
@@ -0,0 +1,439 @@
+/**
+ * Agent work, shown until it is done (AGENT-OWNED shared piece — @a2app-kit agent-task).
+ *
+ * An agent run takes seconds to minutes. Whatever control queued it has to
+ * keep showing where it is, or the person is left with no sign anything is
+ * happening. This is that display, so a feature that queues work does not
+ * rebuild it:
+ *
+ *   <AgentTaskBadge taskId={rec.agentTask} />            in a list row, beside the title
+ *   <AgentTaskPanel taskId={rec.agentTask}               under the row or on the record's screen
+ *     onSettled={reload} onRetry={askAgain} />
+ *
+ * Both follow `GET /api/_a2app/tasks/{id}` at the task's own `pollAfterMs`,
+ * only while it is unfinished, and share one poller per id, so a badge and a
+ * panel for the same task cost one request. Every state renders:
+ *
+ *   submitted        waiting, with elapsed time; after ~20 s unclaimed, says no
+ *                    agent is listening and how to start one
+ *   working          `progress.step` (and `percent` as a bar) and running time
+ *   input-required   the agent is waiting on someone
+ *   completed        `result.summary` in its own full-width block: line breaks
+ *                    kept, links clickable, long text clamped behind "Show more".
+ *                    No summary (the agent never closed the task itself, so the
+ *                    bridge did)? The run's printed output, labelled as such.
+ *   failed/canceled  the `reason` in words (the queue's and bridge's own codes
+ *                    are translated), and "Ask again" when `onRetry` is given
+ *
+ * A 404 means the task was pruned, so the indicator disappears. On a
+ * multi-user app the read answers 401 — the View has no credential for the
+ * queue. There, have the agent write its progress onto the record and pass it
+ * as `progress={{ status, step, summary, reason }}`; it renders the same way,
+ * with or without a `taskId`.
+ *
+ * Never put `result.summary` in a title cell or a table column. It is prose of
+ * any length and belongs in the panel.
+ */
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { api } from "./api.js";
+import Icon from "./Icon.jsx";
+
+const FINISHED = new Set(["completed", "failed", "canceled"]);
+/** How long a task may sit unclaimed before we say nobody is listening. */
+export const NO_LISTENER_MS = 20_000;
+const DEFAULT_POLL_MS = 2000;
+const RETRY_MS = 5000;
+/** Slower polling when nothing is likely to change soon: an unclaimed task, or a hidden tab. */
+const SLOW_POLL_MS = 10_000;
+const CLAMP_CHARS = 280;
+const CLAMP_LINES = 4;
+
+const LABEL = {
+  submitted: "Waiting for an agent",
+  unheard: "No agent is listening",
+  working: "Agent working",
+  "input-required": "Agent needs input",
+  completed: "Agent done",
+  failed: "Agent failed",
+  canceled: "Agent run canceled",
+};
+const TONE = {
+  submitted: "neutral",
+  unheard: "warning",
+  working: "info",
+  "input-required": "warning",
+  completed: "success",
+  failed: "danger",
+  canceled: "neutral",
+};
+
+/**
+ * Reasons the queue and the bridge write themselves, in words. An agent's own
+ * reason is prose already; these are codes, and a code is not an explanation.
+ */
+const REASON_WORDS = {
+  redelivery_exhausted:
+    "It was handed to an agent several times and never finished. Check that the bridge can start your agent, then ask again.",
+  harness_unavailable: "The bridge could not find an agent to run on this machine.",
+  harness_spawn_failed: "The bridge could not start the agent.",
+  harness_exited_nonzero: "The agent stopped with an error before reporting back.",
+  harness_timeout: "The agent took too long and was stopped.",
+  unspecified: "The agent did not say why.",
+};
+
+/** A failure reason a person can read, plus the raw code when it was one. */
+export function reasonInWords(reason, canceled = false) {
+  if (!reason) return { text: canceled ? "The run was canceled." : "The agent did not say why.", code: null };
+  if (REASON_WORDS[reason]) return { text: REASON_WORDS[reason], code: reason };
+  // An unknown code (snake_case, no spaces) still gets a sentence around it.
+  if (/^[a-z0-9]+(?:_[a-z0-9]+)+$/.test(reason)) return { text: "The run stopped before it finished.", code: reason };
+  return { text: reason, code: null };
+}
+
+/* ------------------------------------------------------------- the poller */
+
+// id -> { snap, listeners, timer, stopped }. `snap` is replaced, never
+// mutated, so useSyncExternalStore sees each change.
+const watchers = new Map();
+const IDLE = { phase: "idle", task: null };
+const LOADING = { phase: "loading", task: null };
+
+function watcherFor(id) {
+  let w = watchers.get(id);
+  if (!w) {
+    w = { snap: LOADING, listeners: new Set(), timer: null, stopped: false };
+    watchers.set(id, w);
+    poll(id, w);
+  }
+  return w;
+}
+
+function publish(w, snap) {
+  w.snap = snap;
+  for (const l of w.listeners) l();
+}
+
+async function poll(id, w) {
+  if (w.stopped) return;
+  let next = DEFAULT_POLL_MS;
+  try {
+    const task = await api(`/api/_a2app/tasks/${encodeURIComponent(id)}`);
+    if (w.stopped) return;
+    publish(w, { phase: "ok", task });
+    if (FINISHED.has(task.status)) return; // settled: nothing more will change
+    next = task.pollAfterMs ?? DEFAULT_POLL_MS;
+    const waited = Date.now() - (ms(task.createdAt) ?? Date.now());
+    if (task.status === "submitted" && waited > NO_LISTENER_MS) next = Math.max(next, SLOW_POLL_MS);
+  } catch (err) {
+    if (w.stopped) return;
+    if (err?.status === 404) return publish(w, { phase: "gone", task: null });
+    if (err?.status === 401 || err?.status === 403) return publish(w, { phase: "unauthorized", task: w.snap.task });
+    // Network trouble or rate limiting: keep what we last knew and try again later.
+    publish(w, { phase: "stale", task: w.snap.task, error: err?.message });
+    next = err?.status === 429 ? SLOW_POLL_MS : RETRY_MS;
+  }
+  if (typeof document !== "undefined" && document.hidden) next = Math.max(next, SLOW_POLL_MS);
+  w.timer = setTimeout(() => poll(id, w), next);
+}
+
+function subscribe(id, listener) {
+  if (!id) return () => {};
+  const w = watcherFor(id);
+  w.listeners.add(listener);
+  return () => {
+    w.listeners.delete(listener);
+    // Stop only once nobody has re-subscribed by the next tick: a re-render
+    // (or a row moving between lists) unsubscribes and subscribes again at
+    // once, and tearing down in between would restart polling from scratch.
+    setTimeout(() => {
+      if (w.listeners.size > 0 || watchers.get(id) !== w) return;
+      w.stopped = true;
+      clearTimeout(w.timer);
+      watchers.delete(id);
+    }, 0);
+  };
+}
+
+/**
+ * Follow one queued task. Returns `{ phase, task }`: phase is loading · ok ·
+ * stale (last known, the read is failing) · gone (404) · unauthorized (401) ·
+ * idle (no id).
+ */
+export function useAgentTask(taskId) {
+  const sub = useCallback((l) => subscribe(taskId, l), [taskId]);
+  const snap = useCallback(() => (taskId ? (watchers.get(taskId)?.snap ?? LOADING) : IDLE), [taskId]);
+  return useSyncExternalStore(sub, snap);
+}
+
+/* ---------------------------------------------------------- shared logic */
+
+/** Seconds ticking while something is unfinished; frozen once it settles. */
+function useNow(running) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!running) return undefined;
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, [running]);
+  return now;
+}
+
+/** "8s" · "1m 05s" · "1h 02m". */
+export function fmtElapsed(ms) {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${String(s % 60).padStart(2, "0")}s`;
+  return `${Math.floor(m / 60)}h ${String(m % 60).padStart(2, "0")}m`;
+}
+
+const ms = (iso) => {
+  const t = iso ? Date.parse(iso) : NaN;
+  return Number.isNaN(t) ? null : t;
+};
+
+/**
+ * What a harness printed, when the agent closed no task itself: the bridge then
+ * completes it with the run's output instead of a summary. Terminal colour
+ * codes are noise in a page.
+ */
+function printedOutput(result) {
+  if (typeof result?.output !== "string") return null;
+  // eslint-disable-next-line no-control-regex
+  const text = result.output.replace(/\x1b\[[0-9;?]*[A-Za-z]/g, "").trim();
+  return text || null;
+}
+
+/**
+ * One view of a task, whichever way it arrived: the queue's own record, or the
+ * progress an agent wrote onto the app's record.
+ */
+function viewOf(state, progress, now) {
+  const task = state.task;
+  if (task) {
+    const created = ms(task.createdAt);
+    const claimed = ms(task.claim?.claimedAt);
+    const updated = ms(task.updatedAt);
+    let key = task.status;
+    let elapsed = null;
+    if (key === "submitted") {
+      elapsed = created !== null ? now - created : null;
+      if (elapsed !== null && elapsed >= NO_LISTENER_MS) key = "unheard";
+    } else if (key === "working" || key === "input-required") {
+      const since = claimed ?? created;
+      elapsed = since !== null ? now - since : null;
+    } else if (created !== null && updated !== null) {
+      elapsed = updated - created;
+    }
+    return {
+      key,
+      elapsed,
+      step: task.progress?.step ?? null,
+      // The queue reports 0 until the agent says otherwise; only real progress draws a bar.
+      percent: task.progress?.percent > 0 ? task.progress.percent : null,
+      summary: task.result?.summary ?? null,
+      output: printedOutput(task.result),
+      reason: task.reason ?? null,
+    };
+  }
+  if (progress?.status) {
+    return {
+      key: progress.status,
+      elapsed: null,
+      step: progress.step ?? null,
+      percent: progress.percent > 0 ? progress.percent : null,
+      summary: progress.summary ?? null,
+      output: null,
+      reason: progress.reason ?? null,
+    };
+  }
+  return null;
+}
+
+/** Calls `fn(task)` once when a task we watched while unfinished settles. */
+function useSettled(task, fn) {
+  const prev = useRef(task?.status);
+  const fnRef = useRef(fn);
+  fnRef.current = fn;
+  useEffect(() => {
+    const was = prev.current;
+    prev.current = task?.status;
+    if (task && FINISHED.has(task.status) && was !== undefined && !FINISHED.has(was)) fnRef.current?.(task);
+  }, [task?.status, task]);
+}
+
+/* ------------------------------------------------------------- the badge */
+
+/** A compact state pill for a list row, so someone can leave the screen and come back. */
+export function AgentTaskBadge({ taskId, progress }) {
+  const state = useAgentTask(taskId);
+  const live = state.task && !FINISHED.has(state.task.status);
+  const now = useNow(Boolean(live));
+  if (state.phase === "gone") return null;
+  const v = viewOf(state, progress, now);
+  if (!v) return null;
+  const label = LABEL[v.key] ?? v.key;
+  return (
+    <span className={`agent-badge tone-${TONE[v.key] ?? "neutral"}${live ? " live" : ""}`} title={label}>
+      <span className="agent-dot" aria-hidden="true" />
+      {label}
+    </span>
+  );
+}
+
+/* ------------------------------------------------------------- the panel */
+
+/**
+ * The full display: state, elapsed time, progress, and the result in a
+ * readable block. Give it the whole width of its container — under a list
+ * row, not inside one of its cells.
+ */
+export function AgentTaskPanel({
+  taskId,
+  progress,
+  title = "Agent",
+  onSettled,
+  onRetry,
+  retrying = false,
+  bridgeHint = "agent-app <app-dir> bridge start",
+}) {
+  const state = useAgentTask(taskId);
+  const live = state.task && !FINISHED.has(state.task.status);
+  const now = useNow(Boolean(live));
+  useSettled(state.task, onSettled);
+
+  if (state.phase === "gone") return null;
+  if (state.phase === "loading" && !progress?.status) {
+    return (
+      <div className="agent-task tone-neutral" aria-busy="true">
+        <div className="agent-task-head">
+          <span className="agent-dot" aria-hidden="true" />
+          <span className="agent-task-state">Checking on the agent…</span>
+        </div>
+      </div>
+    );
+  }
+
+  const v = viewOf(state, progress, now);
+  if (!v) {
+    if (state.phase === "unauthorized") {
+      return (
+        <div className="agent-task tone-neutral" role="status">
+          <p className="agent-task-note">
+            This app needs sign-in to read the agent queue, so progress shows here only once the agent records it.
+          </p>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  const tone = TONE[v.key] ?? "neutral";
+  const label = LABEL[v.key] ?? v.key;
+  const finished = FINISHED.has(v.key);
+  const elapsedText =
+    v.elapsed === null ? null : finished ? `took ${fmtElapsed(v.elapsed)}` : fmtElapsed(v.elapsed);
+
+  return (
+    <section className={`agent-task tone-${tone}${live ? " live" : ""}`} aria-label={`${title}: ${label}`}>
+      <div className="agent-task-head">
+        <span className="agent-dot" aria-hidden="true" />
+        {/* The live region carries the state only; the ticking clock stays out of it. */}
+        <span className="agent-task-state" role="status">
+          {label}
+          {v.step && !finished ? <span className="agent-task-step"> — {v.step}</span> : null}
+        </span>
+        {elapsedText && (
+          <span className="agent-task-elapsed" aria-hidden={!finished}>
+            {elapsedText}
+          </span>
+        )}
+        {state.phase === "stale" && <span className="agent-task-elapsed">reconnecting…</span>}
+      </div>
+
+      {v.percent !== null && !finished && (
+        <div className="agent-task-bar" role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(v.percent)}>
+          <span style={{ width: `${Math.min(100, Math.max(0, v.percent))}%` }} />
+        </div>
+      )}
+
+      {v.key === "unheard" && (
+        <p className="agent-task-note">
+          Nothing has picked this up. Work is only delivered while an agent is listening — start one with{" "}
+          <code>{bridgeHint}</code>.
+        </p>
+      )}
+      {v.key === "input-required" && (
+        <p className="agent-task-note">The agent is waiting for someone to answer it before it can continue.</p>
+      )}
+
+      {v.key === "completed" && v.summary && <AgentResult text={v.summary} />}
+      {v.key === "completed" && !v.summary && v.output && (
+        <AgentResult text={v.output} note="The agent sent no summary. This is what it printed:" />
+      )}
+
+      {(v.key === "failed" || v.key === "canceled") && (
+        <div className="agent-task-failure">
+          <FailureReason reason={v.reason} canceled={v.key === "canceled"} />
+          {onRetry && (
+            <button className={`btn btn-ghost${retrying ? " pending" : ""}`} type="button" disabled={retrying} onClick={onRetry}>
+              <Icon name="refresh" />
+              Ask again
+            </button>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function FailureReason({ reason, canceled }) {
+  const { text, code } = reasonInWords(reason, canceled);
+  return (
+    <p className="agent-task-note">
+      {text}
+      {code && <span className="agent-task-code"> ({code})</span>}
+    </p>
+  );
+}
+
+/* ------------------------------------------------------------ the result */
+
+const URL_RE = /(https?:\/\/[^\s<>"']+)/g;
+
+/** Plain text with its line breaks kept and its links clickable. */
+function Linkified({ text }) {
+  return text.split(URL_RE).map((part, i) => {
+    if (i % 2 === 0) return part;
+    // Sentence punctuation after a link is not part of it.
+    const m = part.match(/^(.*?)([.,;:!?)\]]*)$/);
+    const href = m ? m[1] : part;
+    return (
+      <span key={i}>
+        <a href={href} target="_blank" rel="noopener noreferrer">
+          {href}
+        </a>
+        {m ? m[2] : ""}
+      </span>
+    );
+  });
+}
+
+/** An agent's answer: its own block, readable at any length. */
+export function AgentResult({ text, note }) {
+  const long = text.length > CLAMP_CHARS || text.split("\n").length > CLAMP_LINES;
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="agent-result">
+      {note && <p className="agent-task-note">{note}</p>}
+      <p className={`agent-result-text${long && !open ? " clamped" : ""}`}>
+        <Linkified text={text} />
+      </p>
+      {long && (
+        <button className="agent-result-toggle" type="button" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
+          {open ? "Show less" : "Show more"}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/toolkits/blueprint-go-react/template/src/App.jsx b/toolkits/blueprint-go-react/template/src/App.jsx
index b6b6417..5ddf4be 100644
--- a/toolkits/blueprint-go-react/template/src/App.jsx
+++ b/toolkits/blueprint-go-react/template/src/App.jsx
@@ -11,6 +11,11 @@
  * staleness. A CODE change it handles itself (reload when nothing is unsaved).
  * A DATA change it only announces (`a2app:datachange`) — because only this
  * file knows how to re-read without discarding a form someone is filling in.
+ *
+ * Agent work: "Ask an agent" queues a triage task (the `request-triage`
+ * operation). The row then shows it until it is done — a badge beside the
+ * title, and the full-width AgentTaskPanel under the row with the state, the
+ * elapsed time and, at the end, the agent's answer.
  */
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api } from "./api.js";
@@ -18,6 +23,7 @@ import { hasUnsavedInput } from "./updater.js";
 import Icon from "./Icon.jsx";
 import { useToast } from "./toast.jsx";
 import { useConfirm } from "./ConfirmDialog.jsx";
+import { AgentTaskBadge, AgentTaskPanel, useAgentTask } from "./AgentTask.jsx";
 import { STATUS_LABEL, NEXT_STATUS, fmtDay, isPastDay } from "./format.js";
 
 const API = "/api/collections/tasks/records";
@@ -42,6 +48,7 @@ export default function App() {
   const [phase, setPhase] = useState("loading"); // loading | ready | error
   const [errorMessage, setErrorMessage] = useState("");
   const [busy, setBusy] = useState(() => new Set()); // record ids with a write in flight
+  const [asking, setAsking] = useState(() => new Set()); // record ids with an agent request in flight
   const [adding, setAdding] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
   const [title, setTitle] = useState("");
@@ -192,6 +199,33 @@ export default function App() {
     }
   };
 
+  /** Re-read one record and put the stored version in place. */
+  const reloadOne = async (id) => {
+    try {
+      const stored = await api(`${API}/${encodeURIComponent(id)}`);
+      setItems((prev) => prev.map((t) => (t.id === id ? stored : t)));
+    } catch {
+      /* the list's next refresh picks it up */
+    }
+  };
+
+  const askAgent = async (task) => {
+    setAsking((prev) => new Set(prev).add(task.id));
+    try {
+      const res = await api("/api/ops/request-triage", { method: "POST", body: JSON.stringify({ task: task.id }) });
+      if (res?.ok === false) throw new Error(res.reason ?? "The app refused the request.");
+      await reloadOne(task.id); // the stored record carries the task id the panel follows
+    } catch (err) {
+      toast("error", `Could not ask an agent about "${task.title}". ${err.message}`);
+    } finally {
+      setAsking((prev) => {
+        const next = new Set(prev);
+        next.delete(task.id);
+        return next;
+      });
+    }
+  };
+
   const deleteTask = async (task) => {
     const confirmed = await confirm({
       title: "Delete this task?",
@@ -317,7 +351,10 @@ export default function App() {
                     key={task.id}
                     task={task}
                     busy={busy.has(task.id)}
+                    asking={asking.has(task.id)}
                     onAdvance={() => advanceStatus(task)}
+                    onAsk={() => askAgent(task)}
+                    onAgentSettled={() => reloadOne(task.id)}
                     onDelete={() => deleteTask(task)}
                   />
                 ))}
@@ -351,9 +388,12 @@ export default function App() {
 
 /* ------------------------------------------------------------ components */
 
-function TaskRow({ task, busy, onAdvance, onDelete }) {
+function TaskRow({ task, busy, asking, onAdvance, onAsk, onAgentSettled, onDelete }) {
   const st = task.status ?? "todo";
   const overdue = task.due && isPastDay(task.due) && st !== "done";
+  // Shares the panel's poller: knowing whether a run is in flight costs no extra request.
+  const agent = useAgentTask(task.agentTask);
+  const agentBusy = asking || (agent.task && !["completed", "failed", "canceled"].includes(agent.task.status));
   return (
     <li className={`task${st === "done" ? " done" : ""}${busy ? " busy" : ""}`}>
       {/* status: a labelled 3-state control; colour is never the only channel */}
@@ -369,14 +409,36 @@ function TaskRow({ task, busy, onAdvance, onDelete }) {
       <span className="title" title={task.title}>
         {task.title}
       </span>
+      {task.agentTask && <AgentTaskBadge taskId={task.agentTask} />}
       {task.due && (
         <span className={`due${overdue ? " overdue" : ""}`}>
           {overdue ? `Overdue · ${fmtDay(task.due)}` : `Due ${fmtDay(task.due)}`}
         </span>
       )}
+      {st !== "done" && (
+        <button
+          className="btn-icon"
+          type="button"
+          title="Ask an agent to triage this"
+          aria-label={`Ask an agent to triage "${task.title}"`}
+          disabled={agentBusy}
+          onClick={onAsk}
+        >
+          <Icon name="spark" />
+        </button>
+      )}
       <button className="btn-icon danger" type="button" aria-label={`Delete task "${task.title}"`} onClick={onDelete}>
         <Icon name="trash" />
       </button>
+      {task.agentTask && (
+        <AgentTaskPanel
+          taskId={task.agentTask}
+          title={`Agent triage of "${task.title}"`}
+          onSettled={onAgentSettled}
+          onRetry={st !== "done" ? onAsk : undefined}
+          retrying={asking}
+        />
+      )}
     </li>
   );
 }
diff --git a/toolkits/blueprint-go-react/template/src/Icon.jsx b/toolkits/blueprint-go-react/template/src/Icon.jsx
index 6525eea..f97e6cc 100644
--- a/toolkits/blueprint-go-react/template/src/Icon.jsx
+++ b/toolkits/blueprint-go-react/template/src/Icon.jsx
@@ -11,6 +11,7 @@ const ICON_PATHS = {
   info: "M8 7.5V11m0-5.5v-.01M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z",
   inbox: "M1.5 9.5h3l1 2h5l1-2h3M2.5 3.5h11l1 6v3a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-3l1-6Z",
   refresh: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2.5v2.6h-2.6",
+  spark: "M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3M3.4 3.4l2.1 2.1M10.5 10.5l2.1 2.1M3.4 12.6l2.1-2.1M10.5 5.5l2.1-2.1",
 };
 
 export default function Icon({ name, size = 16 }) {
diff --git a/toolkits/blueprint-python-fastapi/template/reference/blueprint.md b/toolkits/blueprint-python-fastapi/template/reference/blueprint.md
index ab52fe8..345523a 100644
--- a/toolkits/blueprint-python-fastapi/template/reference/blueprint.md
+++ b/toolkits/blueprint-python-fastapi/template/reference/blueprint.md
@@ -200,13 +200,17 @@ something — nothing is queued and no agent is handed it. The starter's
 The queue only moves when something is listening: `agent-app <dir> bridge start`,
 or a harness polling `a2app <dir> tasks next --wait`.
 
-**Show the queued work in the View.** Keep the returned `taskId` on the record
-and follow it from the UI with a same-origin `GET /api/_a2app/tasks/{id}`, polled
-only while it is unfinished. That read needs no credential only on a
-single-user app. On a multi-user app it answers 401, so show what the agent
-writes to the record instead. Render queued → working (`progress.step`) → done or
-failed (`reason`, plus a way to ask again). The creator skill lists the states.
-A button that goes quiet after it queues work looks broken.
+**Show the queued work in the View, if you add one.** This stack ships no human
+View, so the starter only keeps the returned `taskId` on the record (its
+`agentTask` field) for an agent or a later View to follow. If you add a View,
+it has to show that work until it is done: follow
+`GET /api/_a2app/tasks/{id}` while it is unfinished and render queued (with
+elapsed time, and "no agent is listening" after ~20 s) → working
+(`progress.step`) → done (`result.summary` in its own full-width block, never a
+title cell) or failed (`reason`, plus a way to ask again). The creator skill
+lists the states. On a multi-user app that read answers 401, so show what the
+agent writes to the record instead. `validate`'s "agent work shown in the View"
+step fails an app whose View does neither.
 
 ## Build, run, gate
 
diff --git a/toolkits/blueprint-python-fastapi/template/schema.py b/toolkits/blueprint-python-fastapi/template/schema.py
index 53c72e5..2924a08 100644
--- a/toolkits/blueprint-python-fastapi/template/schema.py
+++ b/toolkits/blueprint-python-fastapi/template/schema.py
@@ -20,6 +20,10 @@
             {"name": "due", "type": "string", "max": 10, "dayKey": True},
             {"name": "notes", "type": "string", "max": 2000},
             {"name": "created", "type": "datetime", "readOnly": True},
+            # The queue task an agent is (or was last) working on for this
+            # record. The runner sets it, so a View added later can follow it
+            # and show the work until it is done.
+            {"name": "agentTask", "type": "string", "max": 64, "readOnly": True},
         ],
     },
 }
@@ -104,11 +108,20 @@ def _complete_task(args, ctx, store):
 # copy of the data, which would be stale by the time it is read. Nothing here
 # can widen what the agent may do: the payload is data on the other side, and
 # the capability names the kind of work, not a command to run.
+#
+# Identical triggers dedupe to ONE task, even after it has finished, so asking
+# again with the same payload would hand back the old failure. Naming the
+# previous task makes each request a new occurrence.
 def _request_triage(args, ctx, store):
     task = store.get_record("tasks", args.get("task"))
     if task is None:
         return {"ok": False, "reason": "no such task"}
-    fired = store.trigger("task.needs_triage", {"task": task["id"]}, capability="triage")
+    payload = {"task": task["id"]}
+    if task.get("agentTask"):
+        payload["previous"] = task["agentTask"]
+    fired = store.trigger("task.needs_triage", payload, capability="triage")
+    task["agentTask"] = fired["taskId"]
+    store.put_record("tasks", task)
     return {"ok": True, "task": task["id"], "queued": fired["taskId"]}
 
 
diff --git a/toolkits/blueprint-rails-vue/template/AGENT_APP.md b/toolkits/blueprint-rails-vue/template/AGENT_APP.md
index 615c2dd..8c2de60 100644
--- a/toolkits/blueprint-rails-vue/template/AGENT_APP.md
+++ b/toolkits/blueprint-rails-vue/template/AGENT_APP.md
@@ -34,7 +34,9 @@ exactly one, and describe's root screen lists them. They are declared in
 - **Shared pieces live in `ui/src/`** — `components/Icon.vue` (the icon set),
   `toast.js` + `components/ToastRegion.vue` (`useToast`), `confirm.js` +
   `components/ConfirmDialog.vue` (`useConfirm` — never `window.confirm`),
-  `format.js`, `api.js` (the one fetch wrapper). Screens compose them — one
+  `format.js`, `api.js` (the one fetch wrapper), `agentTask.js` +
+  `components/AgentTask{Panel,Badge}.vue` (work queued for an agent, shown
+  until it is done). Screens compose them — one
   implementation per widget, no per-screen copies, no native browser dialogs.
   Component styles live in `ui/public/ui.css`.
 - **Every screen renders all of its states**: loading skeletons (sized so
diff --git a/toolkits/blueprint-rails-vue/template/lib/a2app_schema.rb b/toolkits/blueprint-rails-vue/template/lib/a2app_schema.rb
index 38d49b8..c53e934 100644
--- a/toolkits/blueprint-rails-vue/template/lib/a2app_schema.rb
+++ b/toolkits/blueprint-rails-vue/template/lib/a2app_schema.rb
@@ -21,6 +21,10 @@ module A2appSchema
         { "name" => "due", "type" => "string", "max" => 10, "dayKey" => true },
         { "name" => "notes", "type" => "string", "max" => 2000 },
         { "name" => "created", "type" => "datetime", "readOnly" => true },
+        # The queue task an agent is (or was last) working on for this record.
+        # The runner sets it; the View follows it, so the person can see the
+        # work they asked for until it is done.
+        { "name" => "agentTask", "type" => "string", "max" => 64, "readOnly" => true },
       ],
     },
   }.freeze
@@ -123,10 +127,24 @@ module A2appSchema
     # read. Nothing here can widen what the agent may do: the payload is data
     # on the other side, and the capability names the kind of work, not a
     # command to run.
+    #
+    # Identical triggers dedupe to ONE task, even after it has finished, so
+    # asking again with the same payload would hand back the old failure.
+    # Naming the previous task makes each request a new occurrence. The View
+    # disables the control while a run is open, so a double click cannot
+    # queue two.
+    #
+    # The task id goes on the record so the View can show the work until it
+    # is done (ui/src/components/AgentTaskPanel.vue). The validate gate checks
+    # that it does.
     "request-triage" => lambda do |args, _ctx, store|
       task = store.get_record("tasks", args["task"])
       next { "ok" => false, "reason" => "no such task" } if task.nil?
-      fired = store.trigger("task.needs_triage", { "task" => task["id"] }, "triage")
+      payload = { "task" => task["id"] }
+      payload["previous"] = task["agentTask"] if task["agentTask"].is_a?(String) && !task["agentTask"].empty?
+      fired = store.trigger("task.needs_triage", payload, "triage")
+      task["agentTask"] = fired["taskId"]
+      store.put_record("tasks", task)
       { "ok" => true, "task" => task["id"], "queued" => fired["taskId"] }
     end,
   }.freeze
diff --git a/toolkits/blueprint-rails-vue/template/reference/blueprint.md b/toolkits/blueprint-rails-vue/template/reference/blueprint.md
index 5cd1738..e83e8a6 100644
--- a/toolkits/blueprint-rails-vue/template/reference/blueprint.md
+++ b/toolkits/blueprint-rails-vue/template/reference/blueprint.md
@@ -191,7 +191,10 @@ unbounded collection — page with `perPage`.
 **Shared pieces — `ui/src/`** (one implementation each; import, don't rebuild):
 `<Icon :name :size>` · `useToast()` → `toast(kind, message)` ·
 `useConfirm()` → `{ request, confirm, done }` (in-app dialog — never
-`window.confirm`) · `api(path, init)` · `fmtDay(dayKey)` · `isPastDay(dayKey)`.
+`window.confirm`) · `api(path, init)` · `fmtDay(dayKey)` · `isPastDay(dayKey)` ·
+`<AgentTaskPanel>` / `<AgentTaskBadge>` / `useAgentTask(() => id)`
+(`components/AgentTask*.vue` + `agentTask.js` — work queued for an agent, shown
+until it is done; see **App→agent**).
 Component styles are plain CSS classes in `ui/public/ui.css`.
 
 **Tokens — `ui/public/tokens.css`:** the kit sheet — `--agent-app-*` foundation
@@ -265,13 +268,41 @@ starter's `request-triage` operation is the worked example.
 The queue only moves when something is listening: `agent-app <dir> bridge start`,
 or a harness polling `a2app <dir> tasks next --wait`.
 
-**Show the queued work in the View.** Keep the returned `taskId` on the record
-and follow it from the UI with a same-origin `GET /api/_a2app/tasks/{id}`, polled
-only while it is unfinished. That read needs no credential only on a
-single-user app. On a multi-user app it answers 401, so show what the agent
-writes to the record instead. Render queued → working (`progress.step`) → done or
-failed (`reason`, plus a way to ask again). The creator skill lists the states.
-A button that goes quiet after it queues work looks broken.
+**Show the queued work in the View — with the agent-task components.** An
+agent run takes seconds to minutes, so the control that queued it has to show
+where it is until it is done. Keep the returned `taskId` on the record (a
+`readOnly` string field the runner sets, like the starter's `agentTask`), then
+render it:
+
+```vue
+<AgentTaskBadge :task-id="rec.agentTask" />          <!-- in the list row, beside the title -->
+<AgentTaskPanel :task-id="rec.agentTask"             <!-- full width: under the row, or on the record's screen -->
+  :can-retry="true" :retrying="asking"
+  @settled="reloadRecord" @retry="askAgain" @status="trackOpenRun" />
+```
+
+`ui/src/components/AgentTaskPanel.vue` and `AgentTaskBadge.vue` are built on
+`ui/src/agentTask.js` (the shared poller and `useAgentTask(() => id)`) and style
+themselves from `ui/src/agentTask.css`. The panel follows
+`GET /api/_a2app/tasks/{id}` while the run is unfinished and renders every state
+the creator skill lists: waiting with elapsed time (and "no agent is listening"
+after ~20 s), the agent's step and running time, the `result.summary` in its own
+readable block, and the failure `reason` with "Ask again". It emits `status` so
+the parent can disable a control while a run is open. The starter's "Ask an
+agent" button is the worked example.
+
+Never put the result in a title cell or a narrow column. It is prose of any
+length, and the panel is where it goes.
+
+That read needs no credential only on a single-user app. **On a multi-user app
+it answers 401**: have the agent write its progress onto the record and pass it
+as `:progress="{ status, step, summary, reason }"`; the panel and badge render
+it the same way. A 404 means the task has been pruned, so the indicator
+disappears.
+
+**`validate` checks this.** Its "agent work shown in the View" step fails an
+app whose code queues work (`trigger(…)` with a capability) when no View code
+renders the components or reads `/api/_a2app/tasks/`.
 
 ## Build, run, gate
 
@@ -280,7 +311,7 @@ health at `/api/_a2app`). Never start a server by hand.
 
 ```bash
 agent-app <dir> dev        # boot the candidate on a hidden port: fresh seeded store, prints the dev URL
-agent-app <dir> validate   # framework files → build (vite + ruby -c) → adapter self-test → operations resolve → ownership canon → describe budget (on dev)
+agent-app <dir> validate   # framework files → build (vite + ruby -c) → adapter self-test → operations resolve → agent work shown in View → ownership canon → describe budget (on dev)
 agent-app <dir> serve      # launch LIVE as a managed, health-polled background process; prints the URL
 agent-app <dir> promote    # requires the gate pass; backup, scripts/promote_check.rb, destroys the dev instance
 ```
diff --git a/toolkits/blueprint-rails-vue/template/ui/src/App.vue b/toolkits/blueprint-rails-vue/template/ui/src/App.vue
index 0681e60..b18f495 100644
--- a/toolkits/blueprint-rails-vue/template/ui/src/App.vue
+++ b/toolkits/blueprint-rails-vue/template/ui/src/App.vue
@@ -11,7 +11,12 @@
      staleness. A CODE change it handles itself (reload when nothing is
      unsaved). A DATA change it only announces (`a2app:datachange`) — because
      only this file knows how to re-read without discarding a form someone is
-     filling in. -->
+     filling in.
+
+     Agent work: "Ask an agent" queues a triage task (the `request-triage`
+     operation). The row then shows it until it is done — a badge beside the
+     title, and the full-width AgentTaskPanel under the row with the state,
+     the elapsed time and, at the end, the agent's answer. -->
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { api } from "./api.js";
@@ -22,6 +27,9 @@ import { STATUS_LABEL, NEXT_STATUS, fmtDay, isPastDay } from "./format.js";
 import Icon from "./components/Icon.vue";
 import ToastRegion from "./components/ToastRegion.vue";
 import ConfirmDialog from "./components/ConfirmDialog.vue";
+import AgentTaskBadge from "./components/AgentTaskBadge.vue";
+import AgentTaskPanel from "./components/AgentTaskPanel.vue";
+import { FINISHED } from "./agentTask.js";
 
 const API = "/api/collections/tasks/records";
 const PER_PAGE = 100; // the client never renders an unbounded collection
@@ -46,6 +54,8 @@ const filter = ref("all");
 const phase = ref("loading"); // loading | ready | error
 const errorMessage = ref("");
 const busy = ref(new Set()); // record ids with a write in flight
+const asking = ref(new Set()); // record ids with an agent request in flight
+const agentOpen = ref(new Set()); // record ids whose agent run is still unfinished
 const adding = ref(false);
 const loadingMore = ref(false);
 const title = ref("");
@@ -185,6 +195,41 @@ async function advanceStatus(task) {
   }
 }
 
+/** Re-read one record and put the stored version in place. */
+async function reloadOne(id) {
+  try {
+    const stored = await api(`${API}/${encodeURIComponent(id)}`);
+    items.value = items.value.map((t) => (t.id === id ? stored : t));
+  } catch {
+    /* the list's next refresh picks it up */
+  }
+}
+
+function setIn(setRef, id, on) {
+  const next = new Set(setRef.value);
+  if (on) next.add(id);
+  else next.delete(id);
+  setRef.value = next;
+}
+
+async function askAgent(task) {
+  setIn(asking, task.id, true);
+  try {
+    const res = await api("/api/ops/request-triage", { method: "POST", body: JSON.stringify({ task: task.id }) });
+    if (res?.ok === false) throw new Error(res.reason ?? "The app refused the request.");
+    setIn(agentOpen, task.id, true);
+    await reloadOne(task.id); // the stored record carries the task id the panel follows
+  } catch (err) {
+    toast("error", `Could not ask an agent about "${task.title}". ${err.message}`);
+  } finally {
+    setIn(asking, task.id, false);
+  }
+}
+
+function onAgentStatus(task, status) {
+  setIn(agentOpen, task.id, Boolean(status) && !FINISHED.has(status));
+}
+
 async function deleteTask(task) {
   const confirmed = await confirm({
     title: "Delete this task?",
@@ -227,6 +272,9 @@ const st = (task) => task.status ?? "todo";
 const nextLabel = (task) => STATUS_LABEL[NEXT_STATUS[st(task)]].toLowerCase();
 const statusAria = (task) => `Status: ${STATUS_LABEL[st(task)]}. Mark as ${nextLabel(task)}.`;
 const deleteAria = (task) => `Delete task "${task.title}"`;
+const askAria = (task) => `Ask an agent to triage "${task.title}"`;
+// The control stays disabled while a run is open, so a double click cannot queue two.
+const agentBusy = (task) => asking.value.has(task.id) || agentOpen.value.has(task.id);
 const isOverdue = (task) => Boolean(task.due) && isPastDay(task.due) && st(task) !== "done";
 
 const count = computed(() => {
@@ -341,12 +389,34 @@ const count = computed(() => {
                 {{ STATUS_LABEL[st(task)] }}
               </button>
               <span class="title" :title="task.title">{{ task.title }}</span>
+              <AgentTaskBadge v-if="task.agentTask" :task-id="task.agentTask" />
               <span v-if="task.due" class="due" :class="{ overdue: isOverdue(task) }">
                 {{ isOverdue(task) ? `Overdue · ${fmtDay(task.due)}` : `Due ${fmtDay(task.due)}` }}
               </span>
+              <button
+                v-if="st(task) !== 'done'"
+                class="btn-icon"
+                type="button"
+                title="Ask an agent to triage this"
+                :aria-label="askAria(task)"
+                :disabled="agentBusy(task)"
+                @click="askAgent(task)"
+              >
+                <Icon name="spark" />
+              </button>
               <button class="btn-icon danger" type="button" :aria-label="deleteAria(task)" @click="deleteTask(task)">
                 <Icon name="trash" />
               </button>
+              <AgentTaskPanel
+                v-if="task.agentTask"
+                :task-id="task.agentTask"
+                :title="`Agent triage of &quot;${task.title}&quot;`"
+                :can-retry="st(task) !== 'done'"
+                :retrying="asking.has(task.id)"
+                @status="(s) => onAgentStatus(task, s)"
+                @settled="reloadOne(task.id)"
+                @retry="askAgent(task)"
+              />
             </li>
           </ul>
           <div v-if="items.length < totalItems" class="load-more">
diff --git a/toolkits/blueprint-rails-vue/template/ui/src/agentTask.css b/toolkits/blueprint-rails-vue/template/ui/src/agentTask.css
new file mode 100644
index 0000000..400339a
--- /dev/null
+++ b/toolkits/blueprint-rails-vue/template/ui/src/agentTask.css
@@ -0,0 +1,65 @@
+/* ============================================================================
+   Agent work (AGENT-OWNED shared piece — @a2app-kit agent-task), imported by
+   agentTask.js so the badge and panel are styled wherever they are used.
+   Work queued for an agent stays visible until it is done. The panel takes
+   the full width of its container; an agent's result is prose of any length
+   and never goes in a title cell. Consumes semantic tokens only.
+   ============================================================================ */
+.agent-badge {
+  display: inline-flex; align-items: center; gap: var(--sp-1);
+  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
+  padding: 2px var(--sp-2); border-radius: var(--r-full); border: 1px solid;
+}
+.agent-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: currentColor; flex: none; }
+.live .agent-dot { animation: agent-pulse 1.2s var(--ease-std) infinite; }
+@keyframes agent-pulse { 50% { opacity: .5; } }
+
+.tone-neutral { --tone-bg: var(--neutral-bg); --tone-text: var(--neutral-text); --tone-border: var(--neutral-border); }
+.tone-info    { --tone-bg: var(--info-bg);    --tone-text: var(--info-text);    --tone-border: var(--info-border); }
+.tone-warning { --tone-bg: var(--warning-bg); --tone-text: var(--warning-text); --tone-border: var(--warning-border); }
+.tone-success { --tone-bg: var(--success-bg); --tone-text: var(--success-text); --tone-border: var(--success-border); }
+.tone-danger  { --tone-bg: var(--danger-bg);  --tone-text: var(--danger-text);  --tone-border: var(--danger-border); }
+.agent-badge { background: var(--tone-bg); color: var(--tone-text); border-color: var(--tone-border); }
+
+.agent-task {
+  display: flex; flex-direction: column; gap: var(--sp-2);
+  width: 100%; min-width: 0; padding: var(--sp-3) var(--sp-4);
+  border: 1px solid var(--tone-border); border-left-width: 3px; border-radius: var(--r-lg);
+  background: var(--bg-surface);
+}
+.agent-task-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--tone-text); }
+.agent-task-state { font-size: var(--fs-sm); font-weight: var(--fw-medium); min-width: 0; overflow-wrap: anywhere; }
+.agent-task-step { font-weight: var(--fw-regular); color: var(--text-secondary); }
+.agent-task-elapsed { margin-left: auto; font-size: var(--fs-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.agent-task-note { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
+.agent-task-note code { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--bg-sunken); padding: 1px var(--sp-1); border-radius: var(--r-sm); }
+.agent-task-failure { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
+.agent-task-failure .agent-task-note { flex: 1; min-width: 12ch; color: var(--danger-text); }
+.agent-task-code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-tertiary); }
+.agent-task-bar { height: 4px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; }
+.agent-task-bar span { display: block; height: 100%; background: var(--info-solid); transition: width var(--dur-mid) var(--ease-std); }
+
+.agent-result { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
+.agent-result-text {
+  margin: 0; max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere;
+  font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-primary);
+}
+.agent-result-text.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+.agent-result-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
+.agent-result-toggle {
+  font: inherit; font-size: var(--fs-sm); color: var(--accent-text); background: none; border: 0;
+  padding: var(--sp-1) 0; cursor: pointer; min-height: 24px;
+}
+.agent-result-toggle:hover { text-decoration: underline; }
+@media (prefers-reduced-motion: reduce) {
+  .live .agent-dot { animation: none; }
+  .agent-task-bar span { transition: none; }
+}
+
+/* placement in a list row: the panel gets its own full-width line */
+.task { flex-wrap: wrap; }
+.task > .agent-task { flex-basis: 100%; margin-bottom: var(--sp-1); }
+@media (max-width: 480px) {
+  /* the panel under the row says the same thing; the title keeps the room */
+  .task .agent-badge { display: none; }
+}
diff --git a/toolkits/blueprint-rails-vue/template/ui/src/agentTask.js b/toolkits/blueprint-rails-vue/template/ui/src/agentTask.js
new file mode 100644
index 0000000..f61546b
--- /dev/null
+++ b/toolkits/blueprint-rails-vue/template/ui/src/agentTask.js
@@ -0,0 +1,263 @@
+/**
+ * Agent work, shown until it is done (AGENT-OWNED shared piece — @a2app-kit agent-task).
+ *
+ * An agent run takes seconds to minutes. Whatever control queued it has to
+ * keep showing where it is, or the person is left with no sign anything is
+ * happening. This module and the two components built on it are that display,
+ * so a feature that queues work does not rebuild it:
+ *
+ *   <AgentTaskBadge :task-id="rec.agentTask" />             in a list row, beside the title
+ *   <AgentTaskPanel :task-id="rec.agentTask"                under the row or on the record's screen
+ *     @settled="reload" @retry="askAgain" />
+ *
+ * Both follow `GET /api/_a2app/tasks/{id}` at the task's own `pollAfterMs`,
+ * only while it is unfinished, and share one poller per id, so a badge and a
+ * panel for the same task cost one request. See AgentTaskPanel.vue for the
+ * states it renders.
+ *
+ * A 404 means the task was pruned, so the indicator disappears. On a
+ * multi-user app the read answers 401 — the View has no credential for the
+ * queue. There, have the agent write its progress onto the record and pass it
+ * as `:progress="{ status, step, summary, reason }"`; it renders the same way,
+ * with or without a `task-id`.
+ *
+ * Never put `result.summary` in a title cell or a table column. It is prose of
+ * any length and belongs in the panel.
+ */
+import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
+import { api } from "./api.js";
+import "./agentTask.css";
+
+export const FINISHED = new Set(["completed", "failed", "canceled"]);
+/** How long a task may sit unclaimed before we say nobody is listening. */
+export const NO_LISTENER_MS = 20_000;
+const DEFAULT_POLL_MS = 2000;
+const RETRY_MS = 5000;
+/** Slower polling when nothing is likely to change soon: an unclaimed task, or a hidden tab. */
+const SLOW_POLL_MS = 10_000;
+
+export const LABEL = {
+  submitted: "Waiting for an agent",
+  unheard: "No agent is listening",
+  working: "Agent working",
+  "input-required": "Agent needs input",
+  completed: "Agent done",
+  failed: "Agent failed",
+  canceled: "Agent run canceled",
+};
+export const TONE = {
+  submitted: "neutral",
+  unheard: "warning",
+  working: "info",
+  "input-required": "warning",
+  completed: "success",
+  failed: "danger",
+  canceled: "neutral",
+};
+
+/**
+ * Reasons the queue and the bridge write themselves, in words. An agent's own
+ * reason is prose already; these are codes, and a code is not an explanation.
+ */
+const REASON_WORDS = {
+  redelivery_exhausted:
+    "It was handed to an agent several times and never finished. Check that the bridge can start your agent, then ask again.",
+  harness_unavailable: "The bridge could not find an agent to run on this machine.",
+  harness_spawn_failed: "The bridge could not start the agent.",
+  harness_exited_nonzero: "The agent stopped with an error before reporting back.",
+  harness_timeout: "The agent took too long and was stopped.",
+  unspecified: "The agent did not say why.",
+};
+
+/** A failure reason a person can read, plus the raw code when it was one. */
+export function reasonInWords(reason, canceled = false) {
+  if (!reason) return { text: canceled ? "The run was canceled." : "The agent did not say why.", code: null };
+  if (REASON_WORDS[reason]) return { text: REASON_WORDS[reason], code: reason };
+  // An unknown code (snake_case, no spaces) still gets a sentence around it.
+  if (/^[a-z0-9]+(?:_[a-z0-9]+)+$/.test(reason)) return { text: "The run stopped before it finished.", code: reason };
+  return { text: reason, code: null };
+}
+
+/* ------------------------------------------------------------- the poller */
+
+// id -> { snap, listeners, timer, stopped }. `snap` is replaced, never mutated.
+const watchers = new Map();
+const IDLE = { phase: "idle", task: null };
+const LOADING = { phase: "loading", task: null };
+
+const ms = (iso) => {
+  const t = iso ? Date.parse(iso) : NaN;
+  return Number.isNaN(t) ? null : t;
+};
+
+function publish(w, snap) {
+  w.snap = snap;
+  for (const l of w.listeners) l(snap);
+}
+
+async function poll(id, w) {
+  if (w.stopped) return;
+  let next = DEFAULT_POLL_MS;
+  try {
+    const task = await api(`/api/_a2app/tasks/${encodeURIComponent(id)}`);
+    if (w.stopped) return;
+    publish(w, { phase: "ok", task });
+    if (FINISHED.has(task.status)) return; // settled: nothing more will change
+    next = task.pollAfterMs ?? DEFAULT_POLL_MS;
+    const waited = Date.now() - (ms(task.createdAt) ?? Date.now());
+    if (task.status === "submitted" && waited > NO_LISTENER_MS) next = Math.max(next, SLOW_POLL_MS);
+  } catch (err) {
+    if (w.stopped) return;
+    if (err?.status === 404) return publish(w, { phase: "gone", task: null });
+    if (err?.status === 401 || err?.status === 403) return publish(w, { phase: "unauthorized", task: w.snap.task });
+    // Network trouble or rate limiting: keep what we last knew and try again later.
+    publish(w, { phase: "stale", task: w.snap.task, error: err?.message });
+    next = err?.status === 429 ? SLOW_POLL_MS : RETRY_MS;
+  }
+  if (typeof document !== "undefined" && document.hidden) next = Math.max(next, SLOW_POLL_MS);
+  w.timer = setTimeout(() => poll(id, w), next);
+}
+
+function subscribe(id, listener) {
+  let w = watchers.get(id);
+  if (!w) {
+    w = { snap: LOADING, listeners: new Set(), timer: null, stopped: false };
+    watchers.set(id, w);
+    poll(id, w);
+  }
+  w.listeners.add(listener);
+  listener(w.snap);
+  return () => {
+    w.listeners.delete(listener);
+    // Stop only once nobody has re-subscribed by the next tick, so a row that
+    // re-renders does not restart polling from scratch.
+    setTimeout(() => {
+      if (w.listeners.size > 0 || watchers.get(id) !== w) return;
+      w.stopped = true;
+      clearTimeout(w.timer);
+      watchers.delete(id);
+    }, 0);
+  };
+}
+
+/**
+ * Follow one queued task. `getId` is a getter (`() => props.taskId`). Returns
+ * a ref of `{ phase, task }`: phase is loading · ok · stale (last known, the
+ * read is failing) · gone (404) · unauthorized (401) · idle (no id).
+ */
+export function useAgentTask(getId) {
+  const state = shallowRef(IDLE);
+  let stop = () => {};
+  const follow = (id) => {
+    stop();
+    if (!id) {
+      state.value = IDLE;
+      stop = () => {};
+      return;
+    }
+    stop = subscribe(id, (snap) => (state.value = snap));
+  };
+  onMounted(() => follow(getId()));
+  watch(getId, follow);
+  onBeforeUnmount(() => stop());
+  return state;
+}
+
+/** A clock that ticks each second while `isRunning()` is true. */
+export function useNow(isRunning) {
+  const now = ref(Date.now());
+  let timer = null;
+  const sync = (running) => {
+    clearInterval(timer);
+    timer = running ? setInterval(() => (now.value = Date.now()), 1000) : null;
+  };
+  watch(isRunning, sync, { immediate: true });
+  onBeforeUnmount(() => clearInterval(timer));
+  return now;
+}
+
+/* ---------------------------------------------------------- shared logic */
+
+/** "8s" · "1m 05s" · "1h 02m". */
+export function fmtElapsed(span) {
+  const s = Math.max(0, Math.floor(span / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${String(s % 60).padStart(2, "0")}s`;
+  return `${Math.floor(m / 60)}h ${String(m % 60).padStart(2, "0")}m`;
+}
+
+/**
+ * What a harness printed, when the agent closed no task itself: the bridge then
+ * completes it with the run's output instead of a summary. Terminal colour
+ * codes are noise in a page.
+ */
+function printedOutput(result) {
+  if (typeof result?.output !== "string") return null;
+  // eslint-disable-next-line no-control-regex
+  const text = result.output.replace(/\x1b\[[0-9;?]*[A-Za-z]/g, "").trim();
+  return text || null;
+}
+
+/**
+ * One view of a task, whichever way it arrived: the queue's own record, or the
+ * progress an agent wrote onto the app's record.
+ */
+export function viewOf(state, progress, now) {
+  const task = state.task;
+  if (task) {
+    const created = ms(task.createdAt);
+    const claimed = ms(task.claim?.claimedAt);
+    const updated = ms(task.updatedAt);
+    let key = task.status;
+    let elapsed = null;
+    if (key === "submitted") {
+      elapsed = created !== null ? now - created : null;
+      if (elapsed !== null && elapsed >= NO_LISTENER_MS) key = "unheard";
+    } else if (key === "working" || key === "input-required") {
+      const since = claimed ?? created;
+      elapsed = since !== null ? now - since : null;
+    } else if (created !== null && updated !== null) {
+      elapsed = updated - created;
+    }
+    return {
+      key,
+      elapsed,
+      step: task.progress?.step ?? null,
+      // The queue reports 0 until the agent says otherwise; only real progress draws a bar.
+      percent: task.progress?.percent > 0 ? task.progress.percent : null,
+      summary: task.result?.summary ?? null,
+      output: printedOutput(task.result),
+      reason: task.reason ?? null,
+    };
+  }
+  if (progress?.status) {
+    return {
+      key: progress.status,
+      elapsed: null,
+      step: progress.step ?? null,
+      percent: progress.percent > 0 ? progress.percent : null,
+      summary: progress.summary ?? null,
+      output: null,
+      reason: progress.reason ?? null,
+    };
+  }
+  return null;
+}
+
+const URL_RE = /(https?:\/\/[^\s<>"']+)/g;
+
+/**
+ * Plain text split into text and link parts, for rendering with its line
+ * breaks kept and its links clickable. Sentence punctuation after a link is
+ * not part of it.
+ */
+export function splitLinks(text) {
+  return text.split(URL_RE).flatMap((part, i) => {
+    if (i % 2 === 0) return part ? [{ text: part }] : [];
+    const m = part.match(/^(.*?)([.,;:!?)\]]*)$/);
+    const href = m ? m[1] : part;
+    const tail = m ? m[2] : "";
+    return tail ? [{ href }, { text: tail }] : [{ href }];
+  });
+}
diff --git a/toolkits/blueprint-rails-vue/template/ui/src/components/AgentTaskBadge.vue b/toolkits/blueprint-rails-vue/template/ui/src/components/AgentTaskBadge.vue
new file mode 100644
index 0000000..fa2f84e
--- /dev/null
+++ b/toolkits/blueprint-rails-vue/template/ui/src/components/AgentTaskBadge.vue
@@ -0,0 +1,30 @@
+<!-- A compact state pill for a list row, so someone can leave the screen and
+     come back (AGENT-OWNED shared piece — @a2app-kit agent-task; see
+     ../agentTask.js). -->
+<script setup>
+import { computed } from "vue";
+import { FINISHED, LABEL, TONE, useAgentTask, useNow, viewOf } from "../agentTask.js";
+
+const props = defineProps({
+  taskId: { type: String, default: null },
+  progress: { type: Object, default: null },
+});
+
+const state = useAgentTask(() => props.taskId);
+const live = computed(() => Boolean(state.value.task && !FINISHED.has(state.value.task.status)));
+const now = useNow(() => live.value);
+const view = computed(() => (state.value.phase === "gone" ? null : viewOf(state.value, props.progress, now.value)));
+const label = computed(() => (view.value ? (LABEL[view.value.key] ?? view.value.key) : ""));
+</script>
+
+<template>
+  <span
+    v-if="view"
+    class="agent-badge"
+    :class="[`tone-${TONE[view.key] ?? 'neutral'}`, { live }]"
+    :title="label"
+  >
+    <span class="agent-dot" aria-hidden="true"></span>
+    {{ label }}
+  </span>
+</template>
diff --git a/toolkits/blueprint-rails-vue/template/ui/src/components/AgentTaskPanel.vue b/toolkits/blueprint-rails-vue/template/ui/src/components/AgentTaskPanel.vue
new file mode 100644
index 0000000..94b4785
--- /dev/null
+++ b/toolkits/blueprint-rails-vue/template/ui/src/components/AgentTaskPanel.vue
@@ -0,0 +1,148 @@
+<!-- The full display of one agent run (AGENT-OWNED shared piece —
+     @a2app-kit agent-task; see ../agentTask.js). Give it the whole width of
+     its container — under a list row, not inside one of its cells. Every state
+     renders:
+
+       submitted        waiting, with elapsed time; after ~20 s unclaimed, says
+                        no agent is listening and how to start one
+       working          `progress.step` (and `percent` as a bar) and running time
+       input-required   the agent is waiting on someone
+       completed        `result.summary` in its own block: line breaks kept,
+                        links clickable, long text clamped behind "Show more".
+                        No summary (the bridge closed the task, not the
+                        agent)? The run's printed output, labelled as such.
+       failed/canceled  the `reason` in words (the queue's and bridge's own
+                        codes are translated), and "Ask again" when the parent
+                        listens for `retry`
+
+     Emits `settled` (with the task) once, when a run it watched finishes, so
+     the parent can re-read the data the agent wrote, and `status` whenever the
+     task's status changes, so the parent can disable whatever queues more
+     work while a run is open. -->
+<script setup>
+import { computed, ref, watch } from "vue";
+import Icon from "./Icon.vue";
+import { FINISHED, LABEL, TONE, fmtElapsed, reasonInWords, splitLinks, useAgentTask, useNow, viewOf } from "../agentTask.js";
+
+const CLAMP_CHARS = 280;
+const CLAMP_LINES = 4;
+
+const props = defineProps({
+  taskId: { type: String, default: null },
+  progress: { type: Object, default: null },
+  title: { type: String, default: "Agent" },
+  canRetry: { type: Boolean, default: false },
+  retrying: { type: Boolean, default: false },
+  bridgeHint: { type: String, default: "agent-app <app-dir> bridge start" },
+});
+const emit = defineEmits(["settled", "retry", "status"]);
+
+const state = useAgentTask(() => props.taskId);
+const live = computed(() => Boolean(state.value.task && !FINISHED.has(state.value.task.status)));
+const now = useNow(() => live.value);
+
+watch(
+  () => state.value.task?.status,
+  (status, was) => {
+    emit("status", status ?? null);
+    if (status && FINISHED.has(status) && was && !FINISHED.has(was)) emit("settled", state.value.task);
+  },
+);
+
+const view = computed(() => viewOf(state.value, props.progress, now.value));
+const finished = computed(() => Boolean(view.value && FINISHED.has(view.value.key)));
+const label = computed(() => (view.value ? (LABEL[view.value.key] ?? view.value.key) : ""));
+const tone = computed(() => (view.value ? (TONE[view.value.key] ?? "neutral") : "neutral"));
+const elapsedText = computed(() => {
+  const e = view.value?.elapsed;
+  if (e === null || e === undefined) return null;
+  return finished.value ? `took ${fmtElapsed(e)}` : fmtElapsed(e);
+});
+
+const open = ref(false);
+// No summary means the bridge closed the task from the run's exit; its printed
+// output is then the only answer there is.
+const fromOutput = computed(() => !view.value?.summary && Boolean(view.value?.output));
+const summary = computed(() => view.value?.summary ?? view.value?.output ?? "");
+const long = computed(() => summary.value.length > CLAMP_CHARS || summary.value.split("\n").length > CLAMP_LINES);
+const parts = computed(() => splitLinks(summary.value));
+const failure = computed(() => reasonInWords(view.value?.reason, view.value?.key === "canceled"));
+</script>
+
+<template>
+  <template v-if="state.phase !== 'gone'">
+    <div v-if="state.phase === 'loading' && !progress?.status" class="agent-task tone-neutral" aria-busy="true">
+      <div class="agent-task-head">
+        <span class="agent-dot" aria-hidden="true"></span>
+        <span class="agent-task-state">Checking on the agent…</span>
+      </div>
+    </div>
+
+    <div v-else-if="!view && state.phase === 'unauthorized'" class="agent-task tone-neutral" role="status">
+      <p class="agent-task-note">
+        This app needs sign-in to read the agent queue, so progress shows here only once the agent records it.
+      </p>
+    </div>
+
+    <section v-else-if="view" class="agent-task" :class="[`tone-${tone}`, { live }]" :aria-label="`${title}: ${label}`">
+      <div class="agent-task-head">
+        <span class="agent-dot" aria-hidden="true"></span>
+        <!-- The live region carries the state only; the ticking clock stays out of it. -->
+        <span class="agent-task-state" role="status">
+          {{ label }}<span v-if="view.step && !finished" class="agent-task-step"> — {{ view.step }}</span>
+        </span>
+        <span v-if="elapsedText" class="agent-task-elapsed" :aria-hidden="!finished">{{ elapsedText }}</span>
+        <span v-if="state.phase === 'stale'" class="agent-task-elapsed">reconnecting…</span>
+      </div>
+
+      <div
+        v-if="view.percent !== null && !finished"
+        class="agent-task-bar"
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-valuenow="Math.round(view.percent)"
+      >
+        <span :style="{ width: `${Math.min(100, Math.max(0, view.percent))}%` }"></span>
+      </div>
+
+      <p v-if="view.key === 'unheard'" class="agent-task-note">
+        Nothing has picked this up. Work is only delivered while an agent is listening — start one with
+        <code>{{ bridgeHint }}</code>.
+      </p>
+      <p v-if="view.key === 'input-required'" class="agent-task-note">
+        The agent is waiting for someone to answer it before it can continue.
+      </p>
+
+      <div v-if="view.key === 'completed' && summary" class="agent-result">
+        <p v-if="fromOutput" class="agent-task-note">The agent sent no summary. This is what it printed:</p>
+        <p class="agent-result-text" :class="{ clamped: long && !open }">
+          <template v-for="(part, i) in parts" :key="i">
+            <a v-if="part.href" :href="part.href" target="_blank" rel="noopener noreferrer">{{ part.href }}</a>
+            <template v-else>{{ part.text }}</template>
+          </template>
+        </p>
+        <button v-if="long" class="agent-result-toggle" type="button" :aria-expanded="open" @click="open = !open">
+          {{ open ? "Show less" : "Show more" }}
+        </button>
+      </div>
+
+      <div v-if="view.key === 'failed' || view.key === 'canceled'" class="agent-task-failure">
+        <p class="agent-task-note">
+          {{ failure.text }}<span v-if="failure.code" class="agent-task-code"> ({{ failure.code }})</span>
+        </p>
+        <button
+          v-if="canRetry"
+          class="btn btn-ghost"
+          :class="{ pending: retrying }"
+          type="button"
+          :disabled="retrying"
+          @click="emit('retry')"
+        >
+          <Icon name="refresh" />
+          Ask again
+        </button>
+      </div>
+    </section>
+  </template>
+</template>
diff --git a/toolkits/blueprint-rails-vue/template/ui/src/components/Icon.vue b/toolkits/blueprint-rails-vue/template/ui/src/components/Icon.vue
index 1f989c6..8ae8cc9 100644
--- a/toolkits/blueprint-rails-vue/template/ui/src/components/Icon.vue
+++ b/toolkits/blueprint-rails-vue/template/ui/src/components/Icon.vue
@@ -10,6 +10,7 @@ const ICON_PATHS = {
   info: "M8 7.5V11m0-5.5v-.01M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z",
   inbox: "M1.5 9.5h3l1 2h5l1-2h3M2.5 3.5h11l1 6v3a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-3l1-6Z",
   refresh: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2.5v2.6h-2.6",
+  spark: "M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3M3.4 3.4l2.1 2.1M10.5 10.5l2.1 2.1M3.4 12.6l2.1-2.1M10.5 5.5l2.1-2.1",
 };
 
 const props = defineProps({
diff --git a/toolkits/blueprint-react-node/template/AGENT_APP.md b/toolkits/blueprint-react-node/template/AGENT_APP.md
index 78009ea..0841eaa 100644
--- a/toolkits/blueprint-react-node/template/AGENT_APP.md
+++ b/toolkits/blueprint-react-node/template/AGENT_APP.md
@@ -33,7 +33,8 @@ exactly one, and describe's root screen lists them. They are declared in
   duration where a token exists.
 - **Shared pieces live in `src/`** — `Icon.jsx` (the icon set), `toast.jsx`
   (`useToast`), `ConfirmDialog.jsx` (`useConfirm` — never `window.confirm`),
-  `format.js`, `api.js` (the one fetch wrapper). Screens compose them — one
+  `format.js`, `api.js` (the one fetch wrapper), `AgentTask.jsx` (work queued
+  for an agent, shown until it is done). Screens compose them — one
   implementation per widget, no per-screen copies, no native browser dialogs.
   Component styles live in `public/ui.css`.
 - **Every screen renders all of its states**: loading skeletons (sized so
diff --git a/toolkits/blueprint-react-node/template/a2app.schema.mjs b/toolkits/blueprint-react-node/template/a2app.schema.mjs
index 80b3a27..6a1fdf3 100644
--- a/toolkits/blueprint-react-node/template/a2app.schema.mjs
+++ b/toolkits/blueprint-react-node/template/a2app.schema.mjs
@@ -42,6 +42,10 @@ export const schema = {
         { name: "due", type: "string", max: 10, dayKey: true },
         { name: "notes", type: "string", max: 2000 },
         { name: "created", type: "datetime", readOnly: true },
+        // The queue task an agent is (or was last) working on for this record.
+        // The runner sets it; the View follows it, so the person can see the
+        // work they asked for until it is done.
+        { name: "agentTask", type: "string", max: 64, readOnly: true },
       ],
       seed: [
         { id: "task_welcome", title: "Welcome — edit or delete me", status: "todo", created: "2026-01-01T00:00:00.000Z" },
@@ -125,10 +129,22 @@ export const schema = {
     // read. Nothing here can widen what the agent may do: the payload is data
     // on the other side, and the capability names the kind of work, not a
     // command to run.
+    //
+    // Identical triggers dedupe to ONE task, even after it has finished, so
+    // asking again with the same payload would hand back the old failure.
+    // Naming the previous task makes each request a new occurrence. The View
+    // disables the control while a run is open, so a double click cannot
+    // queue two.
+    //
+    // The task id goes on the record so the View can show the work until it is
+    // done (src/AgentTask.jsx). The validate gate checks that it does.
     "request-triage": (args, _ctx, { store, trigger }) => {
       const task = store.get("tasks", args?.task);
       if (!task) return { ok: false, reason: "no such task" };
-      const { taskId } = trigger("task.needs_triage", { task: task.id }, "triage");
+      const payload = task.agentTask ? { task: task.id, previous: task.agentTask } : { task: task.id };
+      const { taskId } = trigger("task.needs_triage", payload, "triage");
+      task.agentTask = taskId;
+      store.put("tasks", task);
       return { ok: true, task: task.id, queued: taskId };
     },
   },
diff --git a/toolkits/blueprint-react-node/template/public/ui.css b/toolkits/blueprint-react-node/template/public/ui.css
index d795803..ffc9490 100644
--- a/toolkits/blueprint-react-node/template/public/ui.css
+++ b/toolkits/blueprint-react-node/template/public/ui.css
@@ -114,7 +114,7 @@ body {
 /* ---------------------------------------------------------------- task list */
 .task-list { list-style: none; margin: 0; padding: var(--sp-1) 0; }
 .task {
-  display: flex; align-items: center; gap: var(--sp-3);
+  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
   min-height: var(--row-h); padding: var(--sp-2) var(--sp-4);
   border-bottom: 1px solid var(--border-subtle);
   transition: background var(--dur-fast) var(--ease-std), opacity var(--dur-mid) var(--ease-std);
@@ -126,6 +126,8 @@ body {
 .task.done .title { color: var(--text-tertiary); text-decoration: line-through; }
 .task .due { font-size: var(--fs-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
 .task .due.overdue { color: var(--danger-text); font-weight: var(--fw-medium); }
+/* agent work gets its own full-width line under the row, never a squeeze into the title */
+.task > .agent-task { flex-basis: 100%; margin-bottom: var(--sp-1); }
 
 /* status: a labelled 3-state control; colour is never the only channel (text names the state) */
 .status-btn {
@@ -196,12 +198,68 @@ body {
 @keyframes fade-in { from { opacity: 0; } }
 @keyframes dialog-in { from { opacity: 0; transform: translateY(var(--sp-2)) scale(.98); } }
 
+/* ---------------------------------------------------------------- agent work (AgentTask.jsx)
+   Work queued for an agent stays visible until it is done. The panel takes the
+   full width of its container; an agent's result is prose of any length and
+   never goes in a title cell. */
+.agent-badge {
+  display: inline-flex; align-items: center; gap: var(--sp-1);
+  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
+  padding: 2px var(--sp-2); border-radius: var(--r-full); border: 1px solid;
+}
+.agent-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: currentColor; flex: none; }
+.live .agent-dot { animation: pulse 1.2s var(--ease-std) infinite; }
+
+.tone-neutral { --tone-bg: var(--neutral-bg); --tone-text: var(--neutral-text); --tone-border: var(--neutral-border); }
+.tone-info    { --tone-bg: var(--info-bg);    --tone-text: var(--info-text);    --tone-border: var(--info-border); }
+.tone-warning { --tone-bg: var(--warning-bg); --tone-text: var(--warning-text); --tone-border: var(--warning-border); }
+.tone-success { --tone-bg: var(--success-bg); --tone-text: var(--success-text); --tone-border: var(--success-border); }
+.tone-danger  { --tone-bg: var(--danger-bg);  --tone-text: var(--danger-text);  --tone-border: var(--danger-border); }
+.agent-badge { background: var(--tone-bg); color: var(--tone-text); border-color: var(--tone-border); }
+
+.agent-task {
+  display: flex; flex-direction: column; gap: var(--sp-2);
+  width: 100%; min-width: 0; padding: var(--sp-3) var(--sp-4);
+  border: 1px solid var(--tone-border); border-left-width: 3px; border-radius: var(--r-lg);
+  background: var(--bg-surface);
+}
+.agent-task-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--tone-text); }
+.agent-task-state { font-size: var(--fs-sm); font-weight: var(--fw-medium); min-width: 0; overflow-wrap: anywhere; }
+.agent-task-step { font-weight: var(--fw-regular); color: var(--text-secondary); }
+.agent-task-elapsed { margin-left: auto; font-size: var(--fs-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.agent-task-note { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
+.agent-task-note code { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--bg-sunken); padding: 1px var(--sp-1); border-radius: var(--r-sm); }
+.agent-task-failure { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
+.agent-task-failure .agent-task-note { flex: 1; min-width: 12ch; color: var(--danger-text); }
+.agent-task-code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-tertiary); }
+.agent-task-bar { height: 4px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; }
+.agent-task-bar span { display: block; height: 100%; background: var(--info-solid); transition: width var(--dur-mid) var(--ease-std); }
+
+.agent-result { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
+.agent-result-text {
+  margin: 0; max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere;
+  font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-primary);
+}
+.agent-result-text.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+.agent-result-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
+.agent-result-toggle {
+  font: inherit; font-size: var(--fs-sm); color: var(--accent-text); background: none; border: 0;
+  padding: var(--sp-1) 0; cursor: pointer; min-height: 24px;
+}
+.agent-result-toggle:hover { text-decoration: underline; }
+@media (prefers-reduced-motion: reduce) {
+  .live .agent-dot { animation: none; }
+  .agent-task-bar span { transition: none; }
+}
+
 /* ---------------------------------------------------------------- narrow screens */
 @media (max-width: 480px) {
   .app { padding: var(--sp-5) var(--sp-3) var(--sp-10); }
   .add-form { flex-wrap: wrap; }
   .add-form .field { flex-basis: 100%; }
   .task .due { display: none; }
+  /* the panel under the row says the same thing; the title keeps the room */
+  .task .agent-badge { display: none; }
   /* touch-first: primary controls grow toward the platform norm */
   .btn, .input, .select { min-height: 44px; }
   .btn-icon { width: 40px; height: 40px; }
diff --git a/toolkits/blueprint-react-node/template/reference/blueprint.md b/toolkits/blueprint-react-node/template/reference/blueprint.md
index 57f0cdd..6dc6593 100644
--- a/toolkits/blueprint-react-node/template/reference/blueprint.md
+++ b/toolkits/blueprint-react-node/template/reference/blueprint.md
@@ -178,7 +178,9 @@ unbounded collection — page with `perPage`.
 **Shared pieces — `src/`** (one implementation each; import, don't rebuild):
 `<Icon name size>` · `useToast()` → `toast(kind, message)` ·
 `useConfirm()` → `[confirm, confirmElement]` (in-app dialog — never
-`window.confirm`) · `api(path, init)` · `fmtDay(dayKey)` · `isPastDay(dayKey)`.
+`window.confirm`) · `api(path, init)` · `fmtDay(dayKey)` · `isPastDay(dayKey)` ·
+`<AgentTaskPanel>` / `<AgentTaskBadge>` / `useAgentTask(id)` (`AgentTask.jsx` —
+work queued for an agent, shown until it is done; see **App→agent triggers**).
 Component styles are plain CSS classes in `public/ui.css`.
 
 **Tokens — `public/tokens.css`:** the kit sheet — `--agent-app-*` foundation →
@@ -250,24 +252,39 @@ something — nothing is queued and no agent is ever handed it.
 The queue only moves when something is listening: `agent-app <dir> bridge start`,
 or a harness polling `a2app <dir> tasks next --wait`.
 
-**Show the queued work in the View.** An agent run takes seconds to minutes, so
-the control that queued it needs to show where it is (see the creator skill for
-the states to render). Keep `taskId` on the record (a `readOnly` string field
-the runner sets), then follow it from `src/`:
+**Show the queued work in the View — with `src/AgentTask.jsx`.** An agent run
+takes seconds to minutes, so the control that queued it has to show where it is
+until it is done. Keep the returned `taskId` on the record (a `readOnly` string
+field the runner sets, like the starter's `agentTask`), then render it:
 
-```js
-// poll only while unfinished; stop at completed / failed / canceled
-const t = await api(`/api/_a2app/tasks/${encodeURIComponent(record.agentTask)}`);
-// t.status · t.progress?.step · t.claim?.claimedAt · t.result?.summary · t.reason · t.pollAfterMs
+```jsx
+import { AgentTaskBadge, AgentTaskPanel } from "./AgentTask.jsx";
+
+<AgentTaskBadge taskId={rec.agentTask} />          // in the list row, beside the title
+<AgentTaskPanel taskId={rec.agentTask}             // full width: under the row, or on the record's screen
+  onSettled={reloadRecord} onRetry={askAgain} retrying={asking} />
 ```
 
-On a single-user app (`authMode: "none"`) the View needs no credential for this
-read. **On a multi-user app it answers 401.** A browser sends no `Origin` on a
-same-origin GET, so the adapter treats the read as an uncredentialled program,
-and the View has no other path to the queue yet. There, show what the agent
-writes to the record instead (a status or assignee it sets on claim and on
-finish). A 404 means the task has been pruned, so drop the indicator. Don't
-retry it.
+The panel follows `GET /api/_a2app/tasks/{id}` while the run is unfinished and
+renders every state the creator skill lists: waiting with elapsed time (and "no
+agent is listening" after ~20 s), the agent's step and running time, the
+`result.summary` in its own readable block, and the failure `reason` with "Ask
+again". `useAgentTask(id)` gives you the same state to disable a control while a
+run is open. The starter's "Ask an agent" button is the worked example.
+
+Never put the result in a title cell or a narrow column. It is prose of any
+length, and the panel is where it goes.
+
+On a single-user app (`authMode: "none"`) the View needs no credential for the
+task read. **On a multi-user app it answers 401**, and the View has no other
+path to the queue yet. There, have the agent write its progress onto the record
+and pass it as `progress={{ status, step, summary, reason }}`; the panel and
+badge render it the same way. A 404 means the task has been pruned, so the
+indicator disappears.
+
+**`validate` checks this.** Its "agent work shown in the View" step fails an
+app whose code queues work (`trigger(…)` with a capability) when no View code
+renders the component or reads `/api/_a2app/tasks/`.
 
 ## Build, run, gate
 
@@ -276,7 +293,7 @@ health at `/api/_a2app`). Never start a server by hand.
 
 ```bash
 agent-app <dir> dev        # boot the candidate on a hidden port: fresh seeded store, prints the dev URL
-agent-app <dir> validate   # framework files → build (vite) → schema loads → operations resolve → ownership canon → describe budget (on dev)
+agent-app <dir> validate   # framework files → build (vite) → schema loads → operations resolve → agent work shown in View → ownership canon → describe budget (on dev)
 agent-app <dir> serve      # launch LIVE as a managed, health-polled background process; prints the URL
 agent-app <dir> promote    # requires the gate pass; backup, scripts/promote-apply.mjs, destroys the dev instance
 ```
diff --git a/toolkits/blueprint-react-node/template/src/AgentTask.jsx b/toolkits/blueprint-react-node/template/src/AgentTask.jsx
new file mode 100644
index 0000000..d23ca67
--- /dev/null
+++ b/toolkits/blueprint-react-node/template/src/AgentTask.jsx
@@ -0,0 +1,439 @@
+/**
+ * Agent work, shown until it is done (AGENT-OWNED shared piece — @a2app-kit agent-task).
+ *
+ * An agent run takes seconds to minutes. Whatever control queued it has to
+ * keep showing where it is, or the person is left with no sign anything is
+ * happening. This is that display, so a feature that queues work does not
+ * rebuild it:
+ *
+ *   <AgentTaskBadge taskId={rec.agentTask} />            in a list row, beside the title
+ *   <AgentTaskPanel taskId={rec.agentTask}               under the row or on the record's screen
+ *     onSettled={reload} onRetry={askAgain} />
+ *
+ * Both follow `GET /api/_a2app/tasks/{id}` at the task's own `pollAfterMs`,
+ * only while it is unfinished, and share one poller per id, so a badge and a
+ * panel for the same task cost one request. Every state renders:
+ *
+ *   submitted        waiting, with elapsed time; after ~20 s unclaimed, says no
+ *                    agent is listening and how to start one
+ *   working          `progress.step` (and `percent` as a bar) and running time
+ *   input-required   the agent is waiting on someone
+ *   completed        `result.summary` in its own full-width block: line breaks
+ *                    kept, links clickable, long text clamped behind "Show more".
+ *                    No summary (the agent never closed the task itself, so the
+ *                    bridge did)? The run's printed output, labelled as such.
+ *   failed/canceled  the `reason` in words (the queue's and bridge's own codes
+ *                    are translated), and "Ask again" when `onRetry` is given
+ *
+ * A 404 means the task was pruned, so the indicator disappears. On a
+ * multi-user app the read answers 401 — the View has no credential for the
+ * queue. There, have the agent write its progress onto the record and pass it
+ * as `progress={{ status, step, summary, reason }}`; it renders the same way,
+ * with or without a `taskId`.
+ *
+ * Never put `result.summary` in a title cell or a table column. It is prose of
+ * any length and belongs in the panel.
+ */
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { api } from "./api.js";
+import Icon from "./Icon.jsx";
+
+const FINISHED = new Set(["completed", "failed", "canceled"]);
+/** How long a task may sit unclaimed before we say nobody is listening. */
+export const NO_LISTENER_MS = 20_000;
+const DEFAULT_POLL_MS = 2000;
+const RETRY_MS = 5000;
+/** Slower polling when nothing is likely to change soon: an unclaimed task, or a hidden tab. */
+const SLOW_POLL_MS = 10_000;
+const CLAMP_CHARS = 280;
+const CLAMP_LINES = 4;
+
+const LABEL = {
+  submitted: "Waiting for an agent",
+  unheard: "No agent is listening",
+  working: "Agent working",
+  "input-required": "Agent needs input",
+  completed: "Agent done",
+  failed: "Agent failed",
+  canceled: "Agent run canceled",
+};
+const TONE = {
+  submitted: "neutral",
+  unheard: "warning",
+  working: "info",
+  "input-required": "warning",
+  completed: "success",
+  failed: "danger",
+  canceled: "neutral",
+};
+
+/**
+ * Reasons the queue and the bridge write themselves, in words. An agent's own
+ * reason is prose already; these are codes, and a code is not an explanation.
+ */
+const REASON_WORDS = {
+  redelivery_exhausted:
+    "It was handed to an agent several times and never finished. Check that the bridge can start your agent, then ask again.",
+  harness_unavailable: "The bridge could not find an agent to run on this machine.",
+  harness_spawn_failed: "The bridge could not start the agent.",
+  harness_exited_nonzero: "The agent stopped with an error before reporting back.",
+  harness_timeout: "The agent took too long and was stopped.",
+  unspecified: "The agent did not say why.",
+};
+
+/** A failure reason a person can read, plus the raw code when it was one. */
+export function reasonInWords(reason, canceled = false) {
+  if (!reason) return { text: canceled ? "The run was canceled." : "The agent did not say why.", code: null };
+  if (REASON_WORDS[reason]) return { text: REASON_WORDS[reason], code: reason };
+  // An unknown code (snake_case, no spaces) still gets a sentence around it.
+  if (/^[a-z0-9]+(?:_[a-z0-9]+)+$/.test(reason)) return { text: "The run stopped before it finished.", code: reason };
+  return { text: reason, code: null };
+}
+
+/* ------------------------------------------------------------- the poller */
+
+// id -> { snap, listeners, timer, stopped }. `snap` is replaced, never
+// mutated, so useSyncExternalStore sees each change.
+const watchers = new Map();
+const IDLE = { phase: "idle", task: null };
+const LOADING = { phase: "loading", task: null };
+
+function watcherFor(id) {
+  let w = watchers.get(id);
+  if (!w) {
+    w = { snap: LOADING, listeners: new Set(), timer: null, stopped: false };
+    watchers.set(id, w);
+    poll(id, w);
+  }
+  return w;
+}
+
+function publish(w, snap) {
+  w.snap = snap;
+  for (const l of w.listeners) l();
+}
+
+async function poll(id, w) {
+  if (w.stopped) return;
+  let next = DEFAULT_POLL_MS;
+  try {
+    const task = await api(`/api/_a2app/tasks/${encodeURIComponent(id)}`);
+    if (w.stopped) return;
+    publish(w, { phase: "ok", task });
+    if (FINISHED.has(task.status)) return; // settled: nothing more will change
+    next = task.pollAfterMs ?? DEFAULT_POLL_MS;
+    const waited = Date.now() - (ms(task.createdAt) ?? Date.now());
+    if (task.status === "submitted" && waited > NO_LISTENER_MS) next = Math.max(next, SLOW_POLL_MS);
+  } catch (err) {
+    if (w.stopped) return;
+    if (err?.status === 404) return publish(w, { phase: "gone", task: null });
+    if (err?.status === 401 || err?.status === 403) return publish(w, { phase: "unauthorized", task: w.snap.task });
+    // Network trouble or rate limiting: keep what we last knew and try again later.
+    publish(w, { phase: "stale", task: w.snap.task, error: err?.message });
+    next = err?.status === 429 ? SLOW_POLL_MS : RETRY_MS;
+  }
+  if (typeof document !== "undefined" && document.hidden) next = Math.max(next, SLOW_POLL_MS);
+  w.timer = setTimeout(() => poll(id, w), next);
+}
+
+function subscribe(id, listener) {
+  if (!id) return () => {};
+  const w = watcherFor(id);
+  w.listeners.add(listener);
+  return () => {
+    w.listeners.delete(listener);
+    // Stop only once nobody has re-subscribed by the next tick: a re-render
+    // (or a row moving between lists) unsubscribes and subscribes again at
+    // once, and tearing down in between would restart polling from scratch.
+    setTimeout(() => {
+      if (w.listeners.size > 0 || watchers.get(id) !== w) return;
+      w.stopped = true;
+      clearTimeout(w.timer);
+      watchers.delete(id);
+    }, 0);
+  };
+}
+
+/**
+ * Follow one queued task. Returns `{ phase, task }`: phase is loading · ok ·
+ * stale (last known, the read is failing) · gone (404) · unauthorized (401) ·
+ * idle (no id).
+ */
+export function useAgentTask(taskId) {
+  const sub = useCallback((l) => subscribe(taskId, l), [taskId]);
+  const snap = useCallback(() => (taskId ? (watchers.get(taskId)?.snap ?? LOADING) : IDLE), [taskId]);
+  return useSyncExternalStore(sub, snap);
+}
+
+/* ---------------------------------------------------------- shared logic */
+
+/** Seconds ticking while something is unfinished; frozen once it settles. */
+function useNow(running) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!running) return undefined;
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, [running]);
+  return now;
+}
+
+/** "8s" · "1m 05s" · "1h 02m". */
+export function fmtElapsed(ms) {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${String(s % 60).padStart(2, "0")}s`;
+  return `${Math.floor(m / 60)}h ${String(m % 60).padStart(2, "0")}m`;
+}
+
+const ms = (iso) => {
+  const t = iso ? Date.parse(iso) : NaN;
+  return Number.isNaN(t) ? null : t;
+};
+
+/**
+ * What a harness printed, when the agent closed no task itself: the bridge then
+ * completes it with the run's output instead of a summary. Terminal colour
+ * codes are noise in a page.
+ */
+function printedOutput(result) {
+  if (typeof result?.output !== "string") return null;
+  // eslint-disable-next-line no-control-regex
+  const text = result.output.replace(/\x1b\[[0-9;?]*[A-Za-z]/g, "").trim();
+  return text || null;
+}
+
+/**
+ * One view of a task, whichever way it arrived: the queue's own record, or the
+ * progress an agent wrote onto the app's record.
+ */
+function viewOf(state, progress, now) {
+  const task = state.task;
+  if (task) {
+    const created = ms(task.createdAt);
+    const claimed = ms(task.claim?.claimedAt);
+    const updated = ms(task.updatedAt);
+    let key = task.status;
+    let elapsed = null;
+    if (key === "submitted") {
+      elapsed = created !== null ? now - created : null;
+      if (elapsed !== null && elapsed >= NO_LISTENER_MS) key = "unheard";
+    } else if (key === "working" || key === "input-required") {
+      const since = claimed ?? created;
+      elapsed = since !== null ? now - since : null;
+    } else if (created !== null && updated !== null) {
+      elapsed = updated - created;
+    }
+    return {
+      key,
+      elapsed,
+      step: task.progress?.step ?? null,
+      // The queue reports 0 until the agent says otherwise; only real progress draws a bar.
+      percent: task.progress?.percent > 0 ? task.progress.percent : null,
+      summary: task.result?.summary ?? null,
+      output: printedOutput(task.result),
+      reason: task.reason ?? null,
+    };
+  }
+  if (progress?.status) {
+    return {
+      key: progress.status,
+      elapsed: null,
+      step: progress.step ?? null,
+      percent: progress.percent > 0 ? progress.percent : null,
+      summary: progress.summary ?? null,
+      output: null,
+      reason: progress.reason ?? null,
+    };
+  }
+  return null;
+}
+
+/** Calls `fn(task)` once when a task we watched while unfinished settles. */
+function useSettled(task, fn) {
+  const prev = useRef(task?.status);
+  const fnRef = useRef(fn);
+  fnRef.current = fn;
+  useEffect(() => {
+    const was = prev.current;
+    prev.current = task?.status;
+    if (task && FINISHED.has(task.status) && was !== undefined && !FINISHED.has(was)) fnRef.current?.(task);
+  }, [task?.status, task]);
+}
+
+/* ------------------------------------------------------------- the badge */
+
+/** A compact state pill for a list row, so someone can leave the screen and come back. */
+export function AgentTaskBadge({ taskId, progress }) {
+  const state = useAgentTask(taskId);
+  const live = state.task && !FINISHED.has(state.task.status);
+  const now = useNow(Boolean(live));
+  if (state.phase === "gone") return null;
+  const v = viewOf(state, progress, now);
+  if (!v) return null;
+  const label = LABEL[v.key] ?? v.key;
+  return (
+    <span className={`agent-badge tone-${TONE[v.key] ?? "neutral"}${live ? " live" : ""}`} title={label}>
+      <span className="agent-dot" aria-hidden="true" />
+      {label}
+    </span>
+  );
+}
+
+/* ------------------------------------------------------------- the panel */
+
+/**
+ * The full display: state, elapsed time, progress, and the result in a
+ * readable block. Give it the whole width of its container — under a list
+ * row, not inside one of its cells.
+ */
+export function AgentTaskPanel({
+  taskId,
+  progress,
+  title = "Agent",
+  onSettled,
+  onRetry,
+  retrying = false,
+  bridgeHint = "agent-app <app-dir> bridge start",
+}) {
+  const state = useAgentTask(taskId);
+  const live = state.task && !FINISHED.has(state.task.status);
+  const now = useNow(Boolean(live));
+  useSettled(state.task, onSettled);
+
+  if (state.phase === "gone") return null;
+  if (state.phase === "loading" && !progress?.status) {
+    return (
+      <div className="agent-task tone-neutral" aria-busy="true">
+        <div className="agent-task-head">
+          <span className="agent-dot" aria-hidden="true" />
+          <span className="agent-task-state">Checking on the agent…</span>
+        </div>
+      </div>
+    );
+  }
+
+  const v = viewOf(state, progress, now);
+  if (!v) {
+    if (state.phase === "unauthorized") {
+      return (
+        <div className="agent-task tone-neutral" role="status">
+          <p className="agent-task-note">
+            This app needs sign-in to read the agent queue, so progress shows here only once the agent records it.
+          </p>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  const tone = TONE[v.key] ?? "neutral";
+  const label = LABEL[v.key] ?? v.key;
+  const finished = FINISHED.has(v.key);
+  const elapsedText =
+    v.elapsed === null ? null : finished ? `took ${fmtElapsed(v.elapsed)}` : fmtElapsed(v.elapsed);
+
+  return (
+    <section className={`agent-task tone-${tone}${live ? " live" : ""}`} aria-label={`${title}: ${label}`}>
+      <div className="agent-task-head">
+        <span className="agent-dot" aria-hidden="true" />
+        {/* The live region carries the state only; the ticking clock stays out of it. */}
+        <span className="agent-task-state" role="status">
+          {label}
+          {v.step && !finished ? <span className="agent-task-step"> — {v.step}</span> : null}
+        </span>
+        {elapsedText && (
+          <span className="agent-task-elapsed" aria-hidden={!finished}>
+            {elapsedText}
+          </span>
+        )}
+        {state.phase === "stale" && <span className="agent-task-elapsed">reconnecting…</span>}
+      </div>
+
+      {v.percent !== null && !finished && (
+        <div className="agent-task-bar" role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(v.percent)}>
+          <span style={{ width: `${Math.min(100, Math.max(0, v.percent))}%` }} />
+        </div>
+      )}
+
+      {v.key === "unheard" && (
+        <p className="agent-task-note">
+          Nothing has picked this up. Work is only delivered while an agent is listening — start one with{" "}
+          <code>{bridgeHint}</code>.
+        </p>
+      )}
+      {v.key === "input-required" && (
+        <p className="agent-task-note">The agent is waiting for someone to answer it before it can continue.</p>
+      )}
+
+      {v.key === "completed" && v.summary && <AgentResult text={v.summary} />}
+      {v.key === "completed" && !v.summary && v.output && (
+        <AgentResult text={v.output} note="The agent sent no summary. This is what it printed:" />
+      )}
+
+      {(v.key === "failed" || v.key === "canceled") && (
+        <div className="agent-task-failure">
+          <FailureReason reason={v.reason} canceled={v.key === "canceled"} />
+          {onRetry && (
+            <button className={`btn btn-ghost${retrying ? " pending" : ""}`} type="button" disabled={retrying} onClick={onRetry}>
+              <Icon name="refresh" />
+              Ask again
+            </button>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function FailureReason({ reason, canceled }) {
+  const { text, code } = reasonInWords(reason, canceled);
+  return (
+    <p className="agent-task-note">
+      {text}
+      {code && <span className="agent-task-code"> ({code})</span>}
+    </p>
+  );
+}
+
+/* ------------------------------------------------------------ the result */
+
+const URL_RE = /(https?:\/\/[^\s<>"']+)/g;
+
+/** Plain text with its line breaks kept and its links clickable. */
+function Linkified({ text }) {
+  return text.split(URL_RE).map((part, i) => {
+    if (i % 2 === 0) return part;
+    // Sentence punctuation after a link is not part of it.
+    const m = part.match(/^(.*?)([.,;:!?)\]]*)$/);
+    const href = m ? m[1] : part;
+    return (
+      <span key={i}>
+        <a href={href} target="_blank" rel="noopener noreferrer">
+          {href}
+        </a>
+        {m ? m[2] : ""}
+      </span>
+    );
+  });
+}
+
+/** An agent's answer: its own block, readable at any length. */
+export function AgentResult({ text, note }) {
+  const long = text.length > CLAMP_CHARS || text.split("\n").length > CLAMP_LINES;
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="agent-result">
+      {note && <p className="agent-task-note">{note}</p>}
+      <p className={`agent-result-text${long && !open ? " clamped" : ""}`}>
+        <Linkified text={text} />
+      </p>
+      {long && (
+        <button className="agent-result-toggle" type="button" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
+          {open ? "Show less" : "Show more"}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/toolkits/blueprint-react-node/template/src/App.jsx b/toolkits/blueprint-react-node/template/src/App.jsx
index b6b6417..5ddf4be 100644
--- a/toolkits/blueprint-react-node/template/src/App.jsx
+++ b/toolkits/blueprint-react-node/template/src/App.jsx
@@ -11,6 +11,11 @@
  * staleness. A CODE change it handles itself (reload when nothing is unsaved).
  * A DATA change it only announces (`a2app:datachange`) — because only this
  * file knows how to re-read without discarding a form someone is filling in.
+ *
+ * Agent work: "Ask an agent" queues a triage task (the `request-triage`
+ * operation). The row then shows it until it is done — a badge beside the
+ * title, and the full-width AgentTaskPanel under the row with the state, the
+ * elapsed time and, at the end, the agent's answer.
  */
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api } from "./api.js";
@@ -18,6 +23,7 @@ import { hasUnsavedInput } from "./updater.js";
 import Icon from "./Icon.jsx";
 import { useToast } from "./toast.jsx";
 import { useConfirm } from "./ConfirmDialog.jsx";
+import { AgentTaskBadge, AgentTaskPanel, useAgentTask } from "./AgentTask.jsx";
 import { STATUS_LABEL, NEXT_STATUS, fmtDay, isPastDay } from "./format.js";
 
 const API = "/api/collections/tasks/records";
@@ -42,6 +48,7 @@ export default function App() {
   const [phase, setPhase] = useState("loading"); // loading | ready | error
   const [errorMessage, setErrorMessage] = useState("");
   const [busy, setBusy] = useState(() => new Set()); // record ids with a write in flight
+  const [asking, setAsking] = useState(() => new Set()); // record ids with an agent request in flight
   const [adding, setAdding] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
   const [title, setTitle] = useState("");
@@ -192,6 +199,33 @@ export default function App() {
     }
   };
 
+  /** Re-read one record and put the stored version in place. */
+  const reloadOne = async (id) => {
+    try {
+      const stored = await api(`${API}/${encodeURIComponent(id)}`);
+      setItems((prev) => prev.map((t) => (t.id === id ? stored : t)));
+    } catch {
+      /* the list's next refresh picks it up */
+    }
+  };
+
+  const askAgent = async (task) => {
+    setAsking((prev) => new Set(prev).add(task.id));
+    try {
+      const res = await api("/api/ops/request-triage", { method: "POST", body: JSON.stringify({ task: task.id }) });
+      if (res?.ok === false) throw new Error(res.reason ?? "The app refused the request.");
+      await reloadOne(task.id); // the stored record carries the task id the panel follows
+    } catch (err) {
+      toast("error", `Could not ask an agent about "${task.title}". ${err.message}`);
+    } finally {
+      setAsking((prev) => {
+        const next = new Set(prev);
+        next.delete(task.id);
+        return next;
+      });
+    }
+  };
+
   const deleteTask = async (task) => {
     const confirmed = await confirm({
       title: "Delete this task?",
@@ -317,7 +351,10 @@ export default function App() {
                     key={task.id}
                     task={task}
                     busy={busy.has(task.id)}
+                    asking={asking.has(task.id)}
                     onAdvance={() => advanceStatus(task)}
+                    onAsk={() => askAgent(task)}
+                    onAgentSettled={() => reloadOne(task.id)}
                     onDelete={() => deleteTask(task)}
                   />
                 ))}
@@ -351,9 +388,12 @@ export default function App() {
 
 /* ------------------------------------------------------------ components */
 
-function TaskRow({ task, busy, onAdvance, onDelete }) {
+function TaskRow({ task, busy, asking, onAdvance, onAsk, onAgentSettled, onDelete }) {
   const st = task.status ?? "todo";
   const overdue = task.due && isPastDay(task.due) && st !== "done";
+  // Shares the panel's poller: knowing whether a run is in flight costs no extra request.
+  const agent = useAgentTask(task.agentTask);
+  const agentBusy = asking || (agent.task && !["completed", "failed", "canceled"].includes(agent.task.status));
   return (
     <li className={`task${st === "done" ? " done" : ""}${busy ? " busy" : ""}`}>
       {/* status: a labelled 3-state control; colour is never the only channel */}
@@ -369,14 +409,36 @@ function TaskRow({ task, busy, onAdvance, onDelete }) {
       <span className="title" title={task.title}>
         {task.title}
       </span>
+      {task.agentTask && <AgentTaskBadge taskId={task.agentTask} />}
       {task.due && (
         <span className={`due${overdue ? " overdue" : ""}`}>
           {overdue ? `Overdue · ${fmtDay(task.due)}` : `Due ${fmtDay(task.due)}`}
         </span>
       )}
+      {st !== "done" && (
+        <button
+          className="btn-icon"
+          type="button"
+          title="Ask an agent to triage this"
+          aria-label={`Ask an agent to triage "${task.title}"`}
+          disabled={agentBusy}
+          onClick={onAsk}
+        >
+          <Icon name="spark" />
+        </button>
+      )}
       <button className="btn-icon danger" type="button" aria-label={`Delete task "${task.title}"`} onClick={onDelete}>
         <Icon name="trash" />
       </button>
+      {task.agentTask && (
+        <AgentTaskPanel
+          taskId={task.agentTask}
+          title={`Agent triage of "${task.title}"`}
+          onSettled={onAgentSettled}
+          onRetry={st !== "done" ? onAsk : undefined}
+          retrying={asking}
+        />
+      )}
     </li>
   );
 }
diff --git a/toolkits/blueprint-react-node/template/src/Icon.jsx b/toolkits/blueprint-react-node/template/src/Icon.jsx
index 6525eea..f97e6cc 100644
--- a/toolkits/blueprint-react-node/template/src/Icon.jsx
+++ b/toolkits/blueprint-react-node/template/src/Icon.jsx
@@ -11,6 +11,7 @@ const ICON_PATHS = {
   info: "M8 7.5V11m0-5.5v-.01M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z",
   inbox: "M1.5 9.5h3l1 2h5l1-2h3M2.5 3.5h11l1 6v3a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-3l1-6Z",
   refresh: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2.5v2.6h-2.6",
+  spark: "M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3M3.4 3.4l2.1 2.1M10.5 10.5l2.1 2.1M3.4 12.6l2.1-2.1M10.5 5.5l2.1-2.1",
 };
 
 export default function Icon({ name, size = 16 }) {
diff --git a/toolkits/blueprint-rust-react/template/AGENT_APP.md b/toolkits/blueprint-rust-react/template/AGENT_APP.md
index f53e885..91b8f84 100644
--- a/toolkits/blueprint-rust-react/template/AGENT_APP.md
+++ b/toolkits/blueprint-rust-react/template/AGENT_APP.md
@@ -34,7 +34,8 @@ exactly one, and describe's root screen lists them. They are declared in
   duration where a token exists.
 - **Shared pieces live in `view/`** — `Icon.jsx` (the icon set), `toast.jsx`
   (`useToast`), `ConfirmDialog.jsx` (`useConfirm` — never `window.confirm`),
-  `format.js`, `api.js` (the one fetch wrapper). Screens compose them — one
+  `format.js`, `api.js` (the one fetch wrapper), `AgentTask.jsx` (work queued
+  for an agent, shown until it is done). Screens compose them — one
   implementation per widget, no per-screen copies, no native browser dialogs.
   Component styles live in `public/ui.css`. The React sources live in `view/`
   because `src/` belongs to cargo.
diff --git a/toolkits/blueprint-rust-react/template/public/ui.css b/toolkits/blueprint-rust-react/template/public/ui.css
index d795803..ffc9490 100644
--- a/toolkits/blueprint-rust-react/template/public/ui.css
+++ b/toolkits/blueprint-rust-react/template/public/ui.css
@@ -114,7 +114,7 @@ body {
 /* ---------------------------------------------------------------- task list */
 .task-list { list-style: none; margin: 0; padding: var(--sp-1) 0; }
 .task {
-  display: flex; align-items: center; gap: var(--sp-3);
+  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
   min-height: var(--row-h); padding: var(--sp-2) var(--sp-4);
   border-bottom: 1px solid var(--border-subtle);
   transition: background var(--dur-fast) var(--ease-std), opacity var(--dur-mid) var(--ease-std);
@@ -126,6 +126,8 @@ body {
 .task.done .title { color: var(--text-tertiary); text-decoration: line-through; }
 .task .due { font-size: var(--fs-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
 .task .due.overdue { color: var(--danger-text); font-weight: var(--fw-medium); }
+/* agent work gets its own full-width line under the row, never a squeeze into the title */
+.task > .agent-task { flex-basis: 100%; margin-bottom: var(--sp-1); }
 
 /* status: a labelled 3-state control; colour is never the only channel (text names the state) */
 .status-btn {
@@ -196,12 +198,68 @@ body {
 @keyframes fade-in { from { opacity: 0; } }
 @keyframes dialog-in { from { opacity: 0; transform: translateY(var(--sp-2)) scale(.98); } }
 
+/* ---------------------------------------------------------------- agent work (AgentTask.jsx)
+   Work queued for an agent stays visible until it is done. The panel takes the
+   full width of its container; an agent's result is prose of any length and
+   never goes in a title cell. */
+.agent-badge {
+  display: inline-flex; align-items: center; gap: var(--sp-1);
+  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
+  padding: 2px var(--sp-2); border-radius: var(--r-full); border: 1px solid;
+}
+.agent-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: currentColor; flex: none; }
+.live .agent-dot { animation: pulse 1.2s var(--ease-std) infinite; }
+
+.tone-neutral { --tone-bg: var(--neutral-bg); --tone-text: var(--neutral-text); --tone-border: var(--neutral-border); }
+.tone-info    { --tone-bg: var(--info-bg);    --tone-text: var(--info-text);    --tone-border: var(--info-border); }
+.tone-warning { --tone-bg: var(--warning-bg); --tone-text: var(--warning-text); --tone-border: var(--warning-border); }
+.tone-success { --tone-bg: var(--success-bg); --tone-text: var(--success-text); --tone-border: var(--success-border); }
+.tone-danger  { --tone-bg: var(--danger-bg);  --tone-text: var(--danger-text);  --tone-border: var(--danger-border); }
+.agent-badge { background: var(--tone-bg); color: var(--tone-text); border-color: var(--tone-border); }
+
+.agent-task {
+  display: flex; flex-direction: column; gap: var(--sp-2);
+  width: 100%; min-width: 0; padding: var(--sp-3) var(--sp-4);
+  border: 1px solid var(--tone-border); border-left-width: 3px; border-radius: var(--r-lg);
+  background: var(--bg-surface);
+}
+.agent-task-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--tone-text); }
+.agent-task-state { font-size: var(--fs-sm); font-weight: var(--fw-medium); min-width: 0; overflow-wrap: anywhere; }
+.agent-task-step { font-weight: var(--fw-regular); color: var(--text-secondary); }
+.agent-task-elapsed { margin-left: auto; font-size: var(--fs-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.agent-task-note { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
+.agent-task-note code { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--bg-sunken); padding: 1px var(--sp-1); border-radius: var(--r-sm); }
+.agent-task-failure { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
+.agent-task-failure .agent-task-note { flex: 1; min-width: 12ch; color: var(--danger-text); }
+.agent-task-code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-tertiary); }
+.agent-task-bar { height: 4px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; }
+.agent-task-bar span { display: block; height: 100%; background: var(--info-solid); transition: width var(--dur-mid) var(--ease-std); }
+
+.agent-result { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
+.agent-result-text {
+  margin: 0; max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere;
+  font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-primary);
+}
+.agent-result-text.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+.agent-result-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
+.agent-result-toggle {
+  font: inherit; font-size: var(--fs-sm); color: var(--accent-text); background: none; border: 0;
+  padding: var(--sp-1) 0; cursor: pointer; min-height: 24px;
+}
+.agent-result-toggle:hover { text-decoration: underline; }
+@media (prefers-reduced-motion: reduce) {
+  .live .agent-dot { animation: none; }
+  .agent-task-bar span { transition: none; }
+}
+
 /* ---------------------------------------------------------------- narrow screens */
 @media (max-width: 480px) {
   .app { padding: var(--sp-5) var(--sp-3) var(--sp-10); }
   .add-form { flex-wrap: wrap; }
   .add-form .field { flex-basis: 100%; }
   .task .due { display: none; }
+  /* the panel under the row says the same thing; the title keeps the room */
+  .task .agent-badge { display: none; }
   /* touch-first: primary controls grow toward the platform norm */
   .btn, .input, .select { min-height: 44px; }
   .btn-icon { width: 40px; height: 40px; }
diff --git a/toolkits/blueprint-rust-react/template/reference/blueprint.md b/toolkits/blueprint-rust-react/template/reference/blueprint.md
index 563ac57..0ecf976 100644
--- a/toolkits/blueprint-rust-react/template/reference/blueprint.md
+++ b/toolkits/blueprint-rust-react/template/reference/blueprint.md
@@ -181,7 +181,9 @@ unbounded collection — page with `perPage`.
 **Shared pieces — `view/`** (one implementation each; import, don't rebuild):
 `<Icon name size>` · `useToast()` → `toast(kind, message)` ·
 `useConfirm()` → `[confirm, confirmElement]` (in-app dialog — never
-`window.confirm`) · `api(path, init)` · `fmtDay(dayKey)` · `isPastDay(dayKey)`.
+`window.confirm`) · `api(path, init)` · `fmtDay(dayKey)` · `isPastDay(dayKey)` ·
+`<AgentTaskPanel>` / `<AgentTaskBadge>` / `useAgentTask(id)` (`AgentTask.jsx` —
+work queued for an agent, shown until it is done; see **App→agent**).
 Component styles are plain CSS classes in `public/ui.css`.
 
 **Tokens — `public/tokens.css`:** the kit sheet — `--agent-app-*` foundation →
@@ -257,13 +259,39 @@ queued and no agent is handed it. An undeclared type is an `Err`. The starter's
 The queue only moves when something is listening: `agent-app <dir> bridge start`,
 or a harness polling `a2app <dir> tasks next --wait`.
 
-**Show the queued work in the View.** Keep the returned `taskId` on the record
-and follow it from the UI with a same-origin `GET /api/_a2app/tasks/{id}`, polled
-only while it is unfinished. That read needs no credential only on a
-single-user app. On a multi-user app it answers 401, so show what the agent
-writes to the record instead. Render queued → working (`progress.step`) → done or
-failed (`reason`, plus a way to ask again). The creator skill lists the states.
-A button that goes quiet after it queues work looks broken.
+**Show the queued work in the View — with `view/AgentTask.jsx`.** An agent run
+takes seconds to minutes, so the control that queued it has to show where it is
+until it is done. Keep the returned `taskId` on the record (a `readOnly` string
+field the runner sets, like the starter's `agentTask`), then render it:
+
+```jsx
+import { AgentTaskBadge, AgentTaskPanel } from "./AgentTask.jsx";
+
+<AgentTaskBadge taskId={rec.agentTask} />          // in the list row, beside the title
+<AgentTaskPanel taskId={rec.agentTask}             // full width: under the row, or on the record's screen
+  onSettled={reloadRecord} onRetry={askAgain} retrying={asking} />
+```
+
+The panel follows `GET /api/_a2app/tasks/{id}` while the run is unfinished and
+renders every state the creator skill lists: waiting with elapsed time (and "no
+agent is listening" after ~20 s), the agent's step and running time, the
+`result.summary` in its own readable block, and the failure `reason` with "Ask
+again". `useAgentTask(id)` gives you the same state to disable a control while a
+run is open. The starter's "Ask an agent" button is the worked example.
+
+Never put the result in a title cell or a narrow column. It is prose of any
+length, and the panel is where it goes.
+
+On a single-user app (`authMode: "none"`) the View needs no credential for the
+task read. **On a multi-user app it answers 401**, and the View has no other
+path to the queue yet. There, have the agent write its progress onto the record
+and pass it as `progress={{ status, step, summary, reason }}`; the panel and
+badge render it the same way. A 404 means the task has been pruned, so the
+indicator disappears.
+
+**`validate` checks this.** Its "agent work shown in the View" step fails an
+app whose code queues work (`trigger(…)` with a capability) when no View code
+renders the component or reads `/api/_a2app/tasks/`.
 
 ## Build, run, gate
 
@@ -272,7 +300,7 @@ health at `/api/_a2app`). Never start a server by hand.
 
 ```bash
 agent-app <dir> dev        # boot the candidate on a hidden port: fresh seeded store, prints the dev URL
-agent-app <dir> validate   # framework files → build → adapter self-test → operations resolve → ownership canon → describe budget (on dev)
+agent-app <dir> validate   # framework files → build → adapter self-test → operations resolve → agent work shown in View → ownership canon → describe budget (on dev)
 agent-app <dir> serve      # launch LIVE as a managed, health-polled background process; prints the URL
 agent-app <dir> promote    # requires the gate pass; backup, cargo run -- --promote-check, destroys the dev instance
 ```
diff --git a/toolkits/blueprint-rust-react/template/src/schema.rs b/toolkits/blueprint-rust-react/template/src/schema.rs
index 6d0c993..eefb1c8 100644
--- a/toolkits/blueprint-rust-react/template/src/schema.rs
+++ b/toolkits/blueprint-rust-react/template/src/schema.rs
@@ -32,6 +32,10 @@ pub fn entities() -> Value {
                 { "name": "due", "type": "string", "max": 10, "dayKey": true },
                 { "name": "notes", "type": "string", "max": 2000 },
                 { "name": "created", "type": "datetime", "readOnly": true },
+                // The queue task an agent is (or was last) working on for this
+                // record. The runner sets it; the View follows it, so the person
+                // can see the work they asked for until it is done.
+                { "name": "agentTask", "type": "string", "max": 64, "readOnly": true },
             ],
         },
     })
@@ -173,11 +177,27 @@ fn run_complete_task(args: &Value, _ctx: &Value, store: &mut Store) -> Result<Va
 // a copy of the data, which would be stale by the time it is read. Nothing here
 // can widen what the agent may do: the payload is data on the other side, and
 // the capability names the kind of work, not a command to run.
+//
+// Identical triggers dedupe to ONE task, even after it has finished, so
+// asking again with the same payload would hand back the old failure.
+// Naming the previous task makes each request a new occurrence. The View
+// disables the control while a run is open, so a double click cannot
+// queue two.
+//
+// The task id goes on the record so the View can show the work until it is done
+// (view/AgentTask.jsx). The validate gate checks that it does.
 fn run_request_triage(args: &Value, _ctx: &Value, store: &mut Store) -> Result<Value, String> {
     let task_id = args.get("task").and_then(Value::as_str).unwrap_or("");
-    if store.get_record("tasks", task_id).is_none() {
-        return Ok(json!({ "ok": false, "reason": "no such task" }));
+    let mut task = match store.get_record("tasks", task_id) {
+        Some(t) => t,
+        None => return Ok(json!({ "ok": false, "reason": "no such task" })),
+    };
+    let mut payload = json!({ "task": task_id });
+    if let Some(prev) = task.get("agentTask").and_then(Value::as_str).filter(|p| !p.is_empty()) {
+        payload["previous"] = json!(prev);
     }
-    let fired = store.trigger("task.needs_triage", &json!({ "task": task_id }), Some("triage"))?;
+    let fired = store.trigger("task.needs_triage", &payload, Some("triage"))?;
+    task["agentTask"] = fired["taskId"].clone();
+    store.put_record("tasks", task);
     Ok(json!({ "ok": true, "task": task_id, "queued": fired["taskId"] }))
 }
diff --git a/toolkits/blueprint-rust-react/template/view/AgentTask.jsx b/toolkits/blueprint-rust-react/template/view/AgentTask.jsx
new file mode 100644
index 0000000..d23ca67
--- /dev/null
+++ b/toolkits/blueprint-rust-react/template/view/AgentTask.jsx
@@ -0,0 +1,439 @@
+/**
+ * Agent work, shown until it is done (AGENT-OWNED shared piece — @a2app-kit agent-task).
+ *
+ * An agent run takes seconds to minutes. Whatever control queued it has to
+ * keep showing where it is, or the person is left with no sign anything is
+ * happening. This is that display, so a feature that queues work does not
+ * rebuild it:
+ *
+ *   <AgentTaskBadge taskId={rec.agentTask} />            in a list row, beside the title
+ *   <AgentTaskPanel taskId={rec.agentTask}               under the row or on the record's screen
+ *     onSettled={reload} onRetry={askAgain} />
+ *
+ * Both follow `GET /api/_a2app/tasks/{id}` at the task's own `pollAfterMs`,
+ * only while it is unfinished, and share one poller per id, so a badge and a
+ * panel for the same task cost one request. Every state renders:
+ *
+ *   submitted        waiting, with elapsed time; after ~20 s unclaimed, says no
+ *                    agent is listening and how to start one
+ *   working          `progress.step` (and `percent` as a bar) and running time
+ *   input-required   the agent is waiting on someone
+ *   completed        `result.summary` in its own full-width block: line breaks
+ *                    kept, links clickable, long text clamped behind "Show more".
+ *                    No summary (the agent never closed the task itself, so the
+ *                    bridge did)? The run's printed output, labelled as such.
+ *   failed/canceled  the `reason` in words (the queue's and bridge's own codes
+ *                    are translated), and "Ask again" when `onRetry` is given
+ *
+ * A 404 means the task was pruned, so the indicator disappears. On a
+ * multi-user app the read answers 401 — the View has no credential for the
+ * queue. There, have the agent write its progress onto the record and pass it
+ * as `progress={{ status, step, summary, reason }}`; it renders the same way,
+ * with or without a `taskId`.
+ *
+ * Never put `result.summary` in a title cell or a table column. It is prose of
+ * any length and belongs in the panel.
+ */
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { api } from "./api.js";
+import Icon from "./Icon.jsx";
+
+const FINISHED = new Set(["completed", "failed", "canceled"]);
+/** How long a task may sit unclaimed before we say nobody is listening. */
+export const NO_LISTENER_MS = 20_000;
+const DEFAULT_POLL_MS = 2000;
+const RETRY_MS = 5000;
+/** Slower polling when nothing is likely to change soon: an unclaimed task, or a hidden tab. */
+const SLOW_POLL_MS = 10_000;
+const CLAMP_CHARS = 280;
+const CLAMP_LINES = 4;
+
+const LABEL = {
+  submitted: "Waiting for an agent",
+  unheard: "No agent is listening",
+  working: "Agent working",
+  "input-required": "Agent needs input",
+  completed: "Agent done",
+  failed: "Agent failed",
+  canceled: "Agent run canceled",
+};
+const TONE = {
+  submitted: "neutral",
+  unheard: "warning",
+  working: "info",
+  "input-required": "warning",
+  completed: "success",
+  failed: "danger",
+  canceled: "neutral",
+};
+
+/**
+ * Reasons the queue and the bridge write themselves, in words. An agent's own
+ * reason is prose already; these are codes, and a code is not an explanation.
+ */
+const REASON_WORDS = {
+  redelivery_exhausted:
+    "It was handed to an agent several times and never finished. Check that the bridge can start your agent, then ask again.",
+  harness_unavailable: "The bridge could not find an agent to run on this machine.",
+  harness_spawn_failed: "The bridge could not start the agent.",
+  harness_exited_nonzero: "The agent stopped with an error before reporting back.",
+  harness_timeout: "The agent took too long and was stopped.",
+  unspecified: "The agent did not say why.",
+};
+
+/** A failure reason a person can read, plus the raw code when it was one. */
+export function reasonInWords(reason, canceled = false) {
+  if (!reason) return { text: canceled ? "The run was canceled." : "The agent did not say why.", code: null };
+  if (REASON_WORDS[reason]) return { text: REASON_WORDS[reason], code: reason };
+  // An unknown code (snake_case, no spaces) still gets a sentence around it.
+  if (/^[a-z0-9]+(?:_[a-z0-9]+)+$/.test(reason)) return { text: "The run stopped before it finished.", code: reason };
+  return { text: reason, code: null };
+}
+
+/* ------------------------------------------------------------- the poller */
+
+// id -> { snap, listeners, timer, stopped }. `snap` is replaced, never
+// mutated, so useSyncExternalStore sees each change.
+const watchers = new Map();
+const IDLE = { phase: "idle", task: null };
+const LOADING = { phase: "loading", task: null };
+
+function watcherFor(id) {
+  let w = watchers.get(id);
+  if (!w) {
+    w = { snap: LOADING, listeners: new Set(), timer: null, stopped: false };
+    watchers.set(id, w);
+    poll(id, w);
+  }
+  return w;
+}
+
+function publish(w, snap) {
+  w.snap = snap;
+  for (const l of w.listeners) l();
+}
+
+async function poll(id, w) {
+  if (w.stopped) return;
+  let next = DEFAULT_POLL_MS;
+  try {
+    const task = await api(`/api/_a2app/tasks/${encodeURIComponent(id)}`);
+    if (w.stopped) return;
+    publish(w, { phase: "ok", task });
+    if (FINISHED.has(task.status)) return; // settled: nothing more will change
+    next = task.pollAfterMs ?? DEFAULT_POLL_MS;
+    const waited = Date.now() - (ms(task.createdAt) ?? Date.now());
+    if (task.status === "submitted" && waited > NO_LISTENER_MS) next = Math.max(next, SLOW_POLL_MS);
+  } catch (err) {
+    if (w.stopped) return;
+    if (err?.status === 404) return publish(w, { phase: "gone", task: null });
+    if (err?.status === 401 || err?.status === 403) return publish(w, { phase: "unauthorized", task: w.snap.task });
+    // Network trouble or rate limiting: keep what we last knew and try again later.
+    publish(w, { phase: "stale", task: w.snap.task, error: err?.message });
+    next = err?.status === 429 ? SLOW_POLL_MS : RETRY_MS;
+  }
+  if (typeof document !== "undefined" && document.hidden) next = Math.max(next, SLOW_POLL_MS);
+  w.timer = setTimeout(() => poll(id, w), next);
+}
+
+function subscribe(id, listener) {
+  if (!id) return () => {};
+  const w = watcherFor(id);
+  w.listeners.add(listener);
+  return () => {
+    w.listeners.delete(listener);
+    // Stop only once nobody has re-subscribed by the next tick: a re-render
+    // (or a row moving between lists) unsubscribes and subscribes again at
+    // once, and tearing down in between would restart polling from scratch.
+    setTimeout(() => {
+      if (w.listeners.size > 0 || watchers.get(id) !== w) return;
+      w.stopped = true;
+      clearTimeout(w.timer);
+      watchers.delete(id);
+    }, 0);
+  };
+}
+
+/**
+ * Follow one queued task. Returns `{ phase, task }`: phase is loading · ok ·
+ * stale (last known, the read is failing) · gone (404) · unauthorized (401) ·
+ * idle (no id).
+ */
+export function useAgentTask(taskId) {
+  const sub = useCallback((l) => subscribe(taskId, l), [taskId]);
+  const snap = useCallback(() => (taskId ? (watchers.get(taskId)?.snap ?? LOADING) : IDLE), [taskId]);
+  return useSyncExternalStore(sub, snap);
+}
+
+/* ---------------------------------------------------------- shared logic */
+
+/** Seconds ticking while something is unfinished; frozen once it settles. */
+function useNow(running) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!running) return undefined;
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, [running]);
+  return now;
+}
+
+/** "8s" · "1m 05s" · "1h 02m". */
+export function fmtElapsed(ms) {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${String(s % 60).padStart(2, "0")}s`;
+  return `${Math.floor(m / 60)}h ${String(m % 60).padStart(2, "0")}m`;
+}
+
+const ms = (iso) => {
+  const t = iso ? Date.parse(iso) : NaN;
+  return Number.isNaN(t) ? null : t;
+};
+
+/**
+ * What a harness printed, when the agent closed no task itself: the bridge then
+ * completes it with the run's output instead of a summary. Terminal colour
+ * codes are noise in a page.
+ */
+function printedOutput(result) {
+  if (typeof result?.output !== "string") return null;
+  // eslint-disable-next-line no-control-regex
+  const text = result.output.replace(/\x1b\[[0-9;?]*[A-Za-z]/g, "").trim();
+  return text || null;
+}
+
+/**
+ * One view of a task, whichever way it arrived: the queue's own record, or the
+ * progress an agent wrote onto the app's record.
+ */
+function viewOf(state, progress, now) {
+  const task = state.task;
+  if (task) {
+    const created = ms(task.createdAt);
+    const claimed = ms(task.claim?.claimedAt);
+    const updated = ms(task.updatedAt);
+    let key = task.status;
+    let elapsed = null;
+    if (key === "submitted") {
+      elapsed = created !== null ? now - created : null;
+      if (elapsed !== null && elapsed >= NO_LISTENER_MS) key = "unheard";
+    } else if (key === "working" || key === "input-required") {
+      const since = claimed ?? created;
+      elapsed = since !== null ? now - since : null;
+    } else if (created !== null && updated !== null) {
+      elapsed = updated - created;
+    }
+    return {
+      key,
+      elapsed,
+      step: task.progress?.step ?? null,
+      // The queue reports 0 until the agent says otherwise; only real progress draws a bar.
+      percent: task.progress?.percent > 0 ? task.progress.percent : null,
+      summary: task.result?.summary ?? null,
+      output: printedOutput(task.result),
+      reason: task.reason ?? null,
+    };
+  }
+  if (progress?.status) {
+    return {
+      key: progress.status,
+      elapsed: null,
+      step: progress.step ?? null,
+      percent: progress.percent > 0 ? progress.percent : null,
+      summary: progress.summary ?? null,
+      output: null,
+      reason: progress.reason ?? null,
+    };
+  }
+  return null;
+}
+
+/** Calls `fn(task)` once when a task we watched while unfinished settles. */
+function useSettled(task, fn) {
+  const prev = useRef(task?.status);
+  const fnRef = useRef(fn);
+  fnRef.current = fn;
+  useEffect(() => {
+    const was = prev.current;
+    prev.current = task?.status;
+    if (task && FINISHED.has(task.status) && was !== undefined && !FINISHED.has(was)) fnRef.current?.(task);
+  }, [task?.status, task]);
+}
+
+/* ------------------------------------------------------------- the badge */
+
+/** A compact state pill for a list row, so someone can leave the screen and come back. */
+export function AgentTaskBadge({ taskId, progress }) {
+  const state = useAgentTask(taskId);
+  const live = state.task && !FINISHED.has(state.task.status);
+  const now = useNow(Boolean(live));
+  if (state.phase === "gone") return null;
+  const v = viewOf(state, progress, now);
+  if (!v) return null;
+  const label = LABEL[v.key] ?? v.key;
+  return (
+    <span className={`agent-badge tone-${TONE[v.key] ?? "neutral"}${live ? " live" : ""}`} title={label}>
+      <span className="agent-dot" aria-hidden="true" />
+      {label}
+    </span>
+  );
+}
+
+/* ------------------------------------------------------------- the panel */
+
+/**
+ * The full display: state, elapsed time, progress, and the result in a
+ * readable block. Give it the whole width of its container — under a list
+ * row, not inside one of its cells.
+ */
+export function AgentTaskPanel({
+  taskId,
+  progress,
+  title = "Agent",
+  onSettled,
+  onRetry,
+  retrying = false,
+  bridgeHint = "agent-app <app-dir> bridge start",
+}) {
+  const state = useAgentTask(taskId);
+  const live = state.task && !FINISHED.has(state.task.status);
+  const now = useNow(Boolean(live));
+  useSettled(state.task, onSettled);
+
+  if (state.phase === "gone") return null;
+  if (state.phase === "loading" && !progress?.status) {
+    return (
+      <div className="agent-task tone-neutral" aria-busy="true">
+        <div className="agent-task-head">
+          <span className="agent-dot" aria-hidden="true" />
+          <span className="agent-task-state">Checking on the agent…</span>
+        </div>
+      </div>
+    );
+  }
+
+  const v = viewOf(state, progress, now);
+  if (!v) {
+    if (state.phase === "unauthorized") {
+      return (
+        <div className="agent-task tone-neutral" role="status">
+          <p className="agent-task-note">
+            This app needs sign-in to read the agent queue, so progress shows here only once the agent records it.
+          </p>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  const tone = TONE[v.key] ?? "neutral";
+  const label = LABEL[v.key] ?? v.key;
+  const finished = FINISHED.has(v.key);
+  const elapsedText =
+    v.elapsed === null ? null : finished ? `took ${fmtElapsed(v.elapsed)}` : fmtElapsed(v.elapsed);
+
+  return (
+    <section className={`agent-task tone-${tone}${live ? " live" : ""}`} aria-label={`${title}: ${label}`}>
+      <div className="agent-task-head">
+        <span className="agent-dot" aria-hidden="true" />
+        {/* The live region carries the state only; the ticking clock stays out of it. */}
+        <span className="agent-task-state" role="status">
+          {label}
+          {v.step && !finished ? <span className="agent-task-step"> — {v.step}</span> : null}
+        </span>
+        {elapsedText && (
+          <span className="agent-task-elapsed" aria-hidden={!finished}>
+            {elapsedText}
+          </span>
+        )}
+        {state.phase === "stale" && <span className="agent-task-elapsed">reconnecting…</span>}
+      </div>
+
+      {v.percent !== null && !finished && (
+        <div className="agent-task-bar" role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(v.percent)}>
+          <span style={{ width: `${Math.min(100, Math.max(0, v.percent))}%` }} />
+        </div>
+      )}
+
+      {v.key === "unheard" && (
+        <p className="agent-task-note">
+          Nothing has picked this up. Work is only delivered while an agent is listening — start one with{" "}
+          <code>{bridgeHint}</code>.
+        </p>
+      )}
+      {v.key === "input-required" && (
+        <p className="agent-task-note">The agent is waiting for someone to answer it before it can continue.</p>
+      )}
+
+      {v.key === "completed" && v.summary && <AgentResult text={v.summary} />}
+      {v.key === "completed" && !v.summary && v.output && (
+        <AgentResult text={v.output} note="The agent sent no summary. This is what it printed:" />
+      )}
+
+      {(v.key === "failed" || v.key === "canceled") && (
+        <div className="agent-task-failure">
+          <FailureReason reason={v.reason} canceled={v.key === "canceled"} />
+          {onRetry && (
+            <button className={`btn btn-ghost${retrying ? " pending" : ""}`} type="button" disabled={retrying} onClick={onRetry}>
+              <Icon name="refresh" />
+              Ask again
+            </button>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function FailureReason({ reason, canceled }) {
+  const { text, code } = reasonInWords(reason, canceled);
+  return (
+    <p className="agent-task-note">
+      {text}
+      {code && <span className="agent-task-code"> ({code})</span>}
+    </p>
+  );
+}
+
+/* ------------------------------------------------------------ the result */
+
+const URL_RE = /(https?:\/\/[^\s<>"']+)/g;
+
+/** Plain text with its line breaks kept and its links clickable. */
+function Linkified({ text }) {
+  return text.split(URL_RE).map((part, i) => {
+    if (i % 2 === 0) return part;
+    // Sentence punctuation after a link is not part of it.
+    const m = part.match(/^(.*?)([.,;:!?)\]]*)$/);
+    const href = m ? m[1] : part;
+    return (
+      <span key={i}>
+        <a href={href} target="_blank" rel="noopener noreferrer">
+          {href}
+        </a>
+        {m ? m[2] : ""}
+      </span>
+    );
+  });
+}
+
+/** An agent's answer: its own block, readable at any length. */
+export function AgentResult({ text, note }) {
+  const long = text.length > CLAMP_CHARS || text.split("\n").length > CLAMP_LINES;
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="agent-result">
+      {note && <p className="agent-task-note">{note}</p>}
+      <p className={`agent-result-text${long && !open ? " clamped" : ""}`}>
+        <Linkified text={text} />
+      </p>
+      {long && (
+        <button className="agent-result-toggle" type="button" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
+          {open ? "Show less" : "Show more"}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/toolkits/blueprint-rust-react/template/view/App.jsx b/toolkits/blueprint-rust-react/template/view/App.jsx
index b6b6417..5ddf4be 100644
--- a/toolkits/blueprint-rust-react/template/view/App.jsx
+++ b/toolkits/blueprint-rust-react/template/view/App.jsx
@@ -11,6 +11,11 @@
  * staleness. A CODE change it handles itself (reload when nothing is unsaved).
  * A DATA change it only announces (`a2app:datachange`) — because only this
  * file knows how to re-read without discarding a form someone is filling in.
+ *
+ * Agent work: "Ask an agent" queues a triage task (the `request-triage`
+ * operation). The row then shows it until it is done — a badge beside the
+ * title, and the full-width AgentTaskPanel under the row with the state, the
+ * elapsed time and, at the end, the agent's answer.
  */
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api } from "./api.js";
@@ -18,6 +23,7 @@ import { hasUnsavedInput } from "./updater.js";
 import Icon from "./Icon.jsx";
 import { useToast } from "./toast.jsx";
 import { useConfirm } from "./ConfirmDialog.jsx";
+import { AgentTaskBadge, AgentTaskPanel, useAgentTask } from "./AgentTask.jsx";
 import { STATUS_LABEL, NEXT_STATUS, fmtDay, isPastDay } from "./format.js";
 
 const API = "/api/collections/tasks/records";
@@ -42,6 +48,7 @@ export default function App() {
   const [phase, setPhase] = useState("loading"); // loading | ready | error
   const [errorMessage, setErrorMessage] = useState("");
   const [busy, setBusy] = useState(() => new Set()); // record ids with a write in flight
+  const [asking, setAsking] = useState(() => new Set()); // record ids with an agent request in flight
   const [adding, setAdding] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
   const [title, setTitle] = useState("");
@@ -192,6 +199,33 @@ export default function App() {
     }
   };
 
+  /** Re-read one record and put the stored version in place. */
+  const reloadOne = async (id) => {
+    try {
+      const stored = await api(`${API}/${encodeURIComponent(id)}`);
+      setItems((prev) => prev.map((t) => (t.id === id ? stored : t)));
+    } catch {
+      /* the list's next refresh picks it up */
+    }
+  };
+
+  const askAgent = async (task) => {
+    setAsking((prev) => new Set(prev).add(task.id));
+    try {
+      const res = await api("/api/ops/request-triage", { method: "POST", body: JSON.stringify({ task: task.id }) });
+      if (res?.ok === false) throw new Error(res.reason ?? "The app refused the request.");
+      await reloadOne(task.id); // the stored record carries the task id the panel follows
+    } catch (err) {
+      toast("error", `Could not ask an agent about "${task.title}". ${err.message}`);
+    } finally {
+      setAsking((prev) => {
+        const next = new Set(prev);
+        next.delete(task.id);
+        return next;
+      });
+    }
+  };
+
   const deleteTask = async (task) => {
     const confirmed = await confirm({
       title: "Delete this task?",
@@ -317,7 +351,10 @@ export default function App() {
                     key={task.id}
                     task={task}
                     busy={busy.has(task.id)}
+                    asking={asking.has(task.id)}
                     onAdvance={() => advanceStatus(task)}
+                    onAsk={() => askAgent(task)}
+                    onAgentSettled={() => reloadOne(task.id)}
                     onDelete={() => deleteTask(task)}
                   />
                 ))}
@@ -351,9 +388,12 @@ export default function App() {
 
 /* ------------------------------------------------------------ components */
 
-function TaskRow({ task, busy, onAdvance, onDelete }) {
+function TaskRow({ task, busy, asking, onAdvance, onAsk, onAgentSettled, onDelete }) {
   const st = task.status ?? "todo";
   const overdue = task.due && isPastDay(task.due) && st !== "done";
+  // Shares the panel's poller: knowing whether a run is in flight costs no extra request.
+  const agent = useAgentTask(task.agentTask);
+  const agentBusy = asking || (agent.task && !["completed", "failed", "canceled"].includes(agent.task.status));
   return (
     <li className={`task${st === "done" ? " done" : ""}${busy ? " busy" : ""}`}>
       {/* status: a labelled 3-state control; colour is never the only channel */}
@@ -369,14 +409,36 @@ function TaskRow({ task, busy, onAdvance, onDelete }) {
       <span className="title" title={task.title}>
         {task.title}
       </span>
+      {task.agentTask && <AgentTaskBadge taskId={task.agentTask} />}
       {task.due && (
         <span className={`due${overdue ? " overdue" : ""}`}>
           {overdue ? `Overdue · ${fmtDay(task.due)}` : `Due ${fmtDay(task.due)}`}
         </span>
       )}
+      {st !== "done" && (
+        <button
+          className="btn-icon"
+          type="button"
+          title="Ask an agent to triage this"
+          aria-label={`Ask an agent to triage "${task.title}"`}
+          disabled={agentBusy}
+          onClick={onAsk}
+        >
+          <Icon name="spark" />
+        </button>
+      )}
       <button className="btn-icon danger" type="button" aria-label={`Delete task "${task.title}"`} onClick={onDelete}>
         <Icon name="trash" />
       </button>
+      {task.agentTask && (
+        <AgentTaskPanel
+          taskId={task.agentTask}
+          title={`Agent triage of "${task.title}"`}
+          onSettled={onAgentSettled}
+          onRetry={st !== "done" ? onAsk : undefined}
+          retrying={asking}
+        />
+      )}
     </li>
   );
 }
diff --git a/toolkits/blueprint-rust-react/template/view/Icon.jsx b/toolkits/blueprint-rust-react/template/view/Icon.jsx
index 6525eea..f97e6cc 100644
--- a/toolkits/blueprint-rust-react/template/view/Icon.jsx
+++ b/toolkits/blueprint-rust-react/template/view/Icon.jsx
@@ -11,6 +11,7 @@ const ICON_PATHS = {
   info: "M8 7.5V11m0-5.5v-.01M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z",
   inbox: "M1.5 9.5h3l1 2h5l1-2h3M2.5 3.5h11l1 6v3a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-3l1-6Z",
   refresh: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2.5v2.6h-2.6",
+  spark: "M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3M3.4 3.4l2.1 2.1M10.5 10.5l2.1 2.1M3.4 12.6l2.1-2.1M10.5 5.5l2.1-2.1",
 };
 
 export default function Icon({ name, size = 16 }) {