@songsid/agend 2.3.5-alpha.4 → 2.3.5-alpha.5

package/dist/ui/fleet-tasks.js

@@ -5,7 +5,8 @@
 // (an agent's tool, another tab) arrives as a "tasks" stream event with the board's revision; the board reads again
 // when its revision moved. Over the temporary public link the board is read-only (the server refuses its writes there).
 // A card moves by drag, by Alt+arrow keys on its title, or by its dialog ("Move to…", up and down) — touch and keyboard
-// need no drag.
+// need no drag. A project shows as the board or as a list, and filters stack (fleet-task-view.js). A right click on a
+// card (or the menu key) opens its menu; its dialog steps to the previous / next card (fleet-task-menu.js).
 import { html, useEffect, useMemo, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
 import { recordEdit } from "/assets/text-undo.js";
@@ -15,18 +16,21 @@ import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 import { Menu } from "/assets/ui-menu.js";
 import { toast } from "/assets/ui-toast.js";
-import { AskHost, COLUMNS, NO_PROJECT, ProgressBar, StatusPill, UNASSIGNED, Who, answerBlocked, boardApi, currentWork, dropNeighbours, errorText, followsSubs, moveCard, onPublicLink, projectKey, projectStats, readStored, recentlyDone, relTime, reviewLabel, waitsForYou, workersOf, wrapUpText, writeStored } from "./fleet-task-common.js";
+import { AskHost, AssigneeOption, COLUMNS, NO_PROJECT, ProgressBar, StatusPill, Who, answerBlocked, askText, boardApi, currentWork, dropNeighbours, errorText, followsSubs, moveCard, notesForPeople, onPublicLink, projectKey, projectStats, readStored, relTime, reviewLabel, waitsForYou, workersOf, wrapUpText, writeStored } from "./fleet-task-common.js";
 import { CardDialog } from "./fleet-task-card.js";
+import { CardMenu, cardAt, cardMenuItems, pageOrder, stepsOf } from "./fleet-task-menu.js";
+import { DisplayMenu, FilterBar, FilterMenu, ListView, SubList, doneShown, formatFilters, keepFilters, listRows, mainMatches, readDisplay, startFilters, writeDisplay } from "./fleet-task-view.js";
 import { InstancesDrawer } from "./fleet-task-work.js";
+import { InsightsDialog } from "./fleet-task-stats.js";
 
 const PROJECT_KEY = "agend_tasks_project";
-const FILTER_KEY = "agend_tasks_assignee";
 
 // ── The tab ───────────────────────────────────────────────
 
 /**
  * Fleet › Tasks. `?card=M-3` in the address opens that card (a link from a notice). The project last looked at is
- * remembered on this device.
+ * remembered on this device; on a project's board the address says which (`?tp=`) and its filters (`?tf=`), so the
+ * filtered board can be sent as a link — and such a link opens it.
  */
 export function TaskBoardTab({ lease }) {
   const [state, setState] = useState(null);
@@ -34,8 +38,9 @@ export function TaskBoardTab({ lease }) {
   const [version, setVersion] = useState({ n: 0, ifMoved: false });
   const writable = !onPublicLink();
   const [at, setAtRaw] = useState(() => {
-    const v = readStored(PROJECT_KEY, "");
-    return v === "" ? null : v === NO_PROJECT ? NO_PROJECT : Number(v);
+    let v = readStored(PROJECT_KEY, "");
+    try { v = new URLSearchParams(globalThis.location?.search || "").get("tp") ?? v; } catch { /* no address bar */ }
+    return v === "" ? null : v === NO_PROJECT ? NO_PROJECT : Number.isInteger(Number(v)) ? Number(v) : null;
   });
   const [openId, setOpenId] = useState(() => {
     try { return new URLSearchParams(globalThis.location?.search || "").get("card"); } catch { return null; }
@@ -43,8 +48,16 @@ export function TaskBoardTab({ lease }) {
   const [tick, setTick] = useState(0);
   const [flashed, setFlashed] = useState(() => new Map());
   const [dialog, setDialog] = useState(null);
-  // The Done column's "All": every done main task is read only when asked for (the server keeps recent ones otherwise).
-  const [allDone, setAllDone] = useState(false);
+  // A card's menu ({ card, x, y, el }), and the cards the page showed when a card's dialog opened (its Previous / Next).
+  const [menu, setMenu] = useState(null);
+  const [trail, setTrail] = useState([]);
+  // How a project shows (board or list, …) and its filters: remembered on this device, the filters also in the address.
+  const [display, setDisplayRaw] = useState(readDisplay);
+  const [filters, setFiltersRaw] = useState(() => startFilters(globalThis.location?.search));
+  const setDisplay = (d) => { setDisplayRaw(d); writeDisplay(d); };
+  const setFilters = (f) => { setFiltersRaw(f); keepFilters(f); };
+  // Finished cards "All": every done main task is read only when asked for (the server keeps recent ones otherwise).
+  const allDone = display.done === "all";
   const seq = useRef(0);
   const setAt = (v) => { setAtRaw(v); writeStored(PROJECT_KEY, v === null ? null : String(v)); };
   const reload = (ifMoved = false) => setVersion((v) => ({ n: v.n + 1, ifMoved }));
@@ -89,15 +102,31 @@ export function TaskBoardTab({ lease }) {
     return () => { off(); offConn(); if (timer) clearTimeout(timer); };
   }, [lease]);
 
+  // The project and its filters in the address (Home has neither), for a link to this very board.
+  useEffect(() => {
+    try {
+      const u = new URL(globalThis.location.href);
+      const before = u.search;
+      const f = formatFilters(filters);
+      if (at === null) { u.searchParams.delete("tp"); u.searchParams.delete("tf"); }
+      else { u.searchParams.set("tp", String(at)); if (f) u.searchParams.set("tf", f); else u.searchParams.delete("tf"); }
+      if (u.search !== before) globalThis.history.replaceState(globalThis.history.state, "", u);
+    } catch { /* no address bar */ }
+  }, [at, filters]);
+
   const openCard = (id) => {
     setOpenId(id);
     try { const u = new URL(globalThis.location.href); u.searchParams.set("card", id); globalThis.history.replaceState(globalThis.history.state, "", u); } catch { /* no address bar */ }
   };
   const closeCard = () => {
     setOpenId(null);
+    setTrail([]);
     try { const u = new URL(globalThis.location.href); u.searchParams.delete("card"); globalThis.history.replaceState(globalThis.history.state, "", u); } catch { /* no address bar */ }
   };
 
+  // A card's dialog walks the page's cards in the order shown when it opened (read once the page is drawn).
+  useEffect(() => { if (openId && !trail.length) setTrail(pageOrder()); }, [openId, state]);
+
   // #2246 step 3: who works on what — the drawer gives way to a card opened from it (one drawer at a time).
   const showInstances = () => setDialog({ kind: "instances" });
 
@@ -107,19 +136,69 @@ export function TaskBoardTab({ lease }) {
   const projects = Array.isArray(state.data.projects) ? state.data.projects : [];
   // #2355 review: the names a project's lead may be, as the server accepts them (the fleet's instances).
   const leads = Array.isArray(state.data.leads) ? state.data.leads : [];
+  // The instances with the task board switched off: the board hands them no cards, so the pickers do not offer them.
+  const boardOff = Array.isArray(state.data.boardOff) ? state.data.boardOff : [];
   // The server's numbers cover every card (finished ones are not all on the board); computed here only without them.
   const stats = (key) => (state.data.stats && state.data.stats[String(key)]) || projectStats(key, cards);
   const project = at === null ? null : at === NO_PROJECT ? NO_PROJECT : projects.find((p) => p.id === at) || null;
   const body = project === null
     ? html`<${Home} cards=${cards} projects=${projects} stats=${stats} writable=${writable} onOpenProject=${setAt} onOpen=${openCard} onDialog=${setDialog} onInstances=${showInstances} reload=${reload} />`
-    : html`<${ProjectBoard} project=${project} cards=${cards} stats=${stats} flashed=${flashed} allDone=${allDone} writable=${writable} onAllDone=${setAllDone} onBack=${() => setAt(null)}
+    : html`<${ProjectBoard} project=${project} cards=${cards} stats=${stats} flashed=${flashed} display=${display} filters=${filters} writable=${writable}
+        onDisplay=${setDisplay} onFilters=${setFilters} onBack=${() => setAt(null)}
         onOpen=${openCard} onCreate=${() => setDialog({ kind: "main", project: project === NO_PROJECT ? null : project.id })} onInstances=${showInstances} reload=${reload} />`;
-  return html`<div class="tb">
+
+  /** A right click on a card, or the keyboard's menu key on it (no pointer: the menu goes under the card). */
+  function onMenu(e) {
+    const hit = cardAt(e);
+    const card = hit && cards.find((c) => c.id === hit.id);
+    if (!card) return;
+    e.preventDefault();
+    let x = e.clientX || 0, y = e.clientY || 0;
+    if (!x && !y && typeof hit.el.getBoundingClientRect === "function") { const r = hit.el.getBoundingClientRect(); x = r.left + 8; y = r.bottom; }
+    setMenu({ id: card.id, x, y, el: hit.el });
+  }
+  function closeMenu(refocus) {
+    const el = menu && menu.el;
+    setMenu(null);
+    if (refocus && el && document.contains?.(el)) (el.querySelector("button") || el).focus?.();
+  }
+  /** A menu choice, through the calls and questions the card's dialog uses. */
+  async function menuAct(card, a) {
+    const after = (r, said) => { if (r) { if (said) toast(t(said, card.id)); reload(); } };
+    try {
+      if (a.kind === "open") openCard(card.id);
+      else if (a.kind === "confirm") after(await moveCard(card, "done"), "tasks.confirmed");
+      else if (a.kind === "sendBack") after(await moveCard(card, "claimed"), "tasks.sentBack");
+      else if (a.kind === "answer") after(await answerBlocked(card), "tasks.answered");
+      else if (a.kind === "move") after(await moveCard(card, a.to));
+      else if (a.kind === "cancel") after(await moveCard(card, "cancelled"));
+      else if (a.kind === "assign" || a.kind === "assignOther" || a.kind === "priority") {
+        const value = a.kind === "assignOther" ? await askText({ title: t("taskcard.otherTitle"), label: t("taskcard.otherLabel"), required: true }) : a.value;
+        if (a.kind === "assignOther" && !value) return;
+        const r = await boardApi.update(card.id, { [a.kind === "priority" ? "priority" : "assignee"]: value, version: card.version });
+        for (const n of notesForPeople(r.notes)) toast(n);
+        reload();
+      } else if (a.kind === "copyLink" || a.kind === "copyId") {
+        const u = new URL(globalThis.location.href);
+        u.searchParams.set("card", card.id);
+        const text = a.kind === "copyLink" ? u.toString() : card.id;
+        // Without a clipboard (a plain-http address) the text is shown to copy by hand.
+        if (navigator.clipboard) { await navigator.clipboard.writeText(text); toast(t("taskmenu.copied", text)); } else toast(text);
+      }
+    } catch (err) { toast(errorText(err), false); }
+  }
+  const menuCard = menu ? cards.find((c) => c.id === menu.id) : null;
+  // The assignees a card's menu offers: who has cards in its project (Other… names anyone else).
+  const names = menuCard ? cards.filter((c) => projectKey(c) === projectKey(menuCard) && c.assignee).map((c) => c.assignee) : [];
+
+  return html`<div class="tb" onContextMenu=${onMenu}>
     ${writable ? null : html`<p class="tb-readonly" role="note"><${Icon} name="eye" size=${16} />${t("tasks.readOnly")}</p>`}
     ${body}
-    ${openId ? html`<${CardDialog} key=${openId} id=${openId} tick=${tick} projects=${projects} writable=${writable} place=${writable ? placeOf(cards, openId, reload) : null}
-      onClose=${closeCard} onOpen=${openCard} reloadBoard=${reload} />` : null}
-    ${dialog && dialog.kind === "main" ? html`<${CreateMainDialog} projects=${projects} project=${dialog.project} onClose=${() => setDialog(null)}
+    ${menuCard ? html`<${CardMenu} at=${{ x: menu.x, y: menu.y }} label=${t("taskmenu.label", menuCard.id)} onClose=${closeMenu}
+      items=${cardMenuItems(menuCard, { writable, names, act: (a) => menuAct(menuCard, a) })} />` : null}
+    ${openId ? html`<${CardDialog} key=${openId} id=${openId} tick=${tick} projects=${projects} boardOff=${boardOff} writable=${writable} place=${writable ? placeOf(cards, openId, reload) : null}
+      steps=${stepsOf(trail, openId, cards)} onClose=${closeCard} onOpen=${openCard} reloadBoard=${reload} />` : null}
+    ${dialog && dialog.kind === "main" ? html`<${CreateMainDialog} projects=${projects} project=${dialog.project} boardOff=${boardOff} onClose=${() => setDialog(null)}
       onCreated=${(id) => { if (!lease.current()) return; setDialog(null); reload(); openCard(id); }} />` : null}
     ${dialog && dialog.kind === "instances" ? html`<${InstancesDrawer} tick=${tick} onClose=${() => setDialog(null)} onOpen=${(id) => { setDialog(null); openCard(id); }} />` : null}
     ${dialog && dialog.kind === "project" ? html`<${ProjectDialog} project=${dialog.project} leads=${leads} onClose=${() => setDialog(null)}
@@ -208,7 +287,7 @@ function Waiting({ cards, writable, onOpen, reload }) {
   };
   return html`<section class="tb-waiting" aria-label=${t("tasks.waitingTitle")}>
     <h3 class="tb-section-title"><${Icon} name="inbox" size=${16} />${t("tasks.waitingTitle")}</h3>
-    <ul class="rows">${[...review, ...blocked].map((c) => html`<li key=${c.id} class="row-item tb-wait-row">
+    <ul class="rows">${[...review, ...blocked].map((c) => html`<li key=${c.id} class="row-item tb-wait-row" data-wait=${c.id}>
       <div class="tb-wait-main">
         <${StatusPill} status=${c.status} />
         <button type="button" class="tb-wait-title" onClick=${() => onOpen(c.id)}><span class="tb-code">${c.id}</span> ${c.title}
@@ -264,15 +343,13 @@ function SearchBox({ onOpen }) {
 
 // ── A project's board ─────────────────────────────────────
 
-function ProjectBoard({ project, cards, stats: statsOf, flashed, allDone, writable, onAllDone, onBack, onOpen, onCreate, onInstances, reload }) {
-  const { instances } = useStore(appStore);
-  const [assignee, setAssigneeRaw] = useState(() => readStored(FILTER_KEY, ""));
+function ProjectBoard({ project, cards, stats: statsOf, flashed, display, filters, writable, onDisplay, onFilters, onBack, onOpen, onCreate, onInstances, reload }) {
   const [expanded, setExpanded] = useState({});
   const [drag, setDrag] = useState(null);
   const [spot, setSpot] = useState(null);
-  const setAssignee = (v) => { setAssigneeRaw(v); writeStored(FILTER_KEY, v || null); };
   const key = project === NO_PROJECT ? NO_PROJECT : project.id;
   const archived = project !== NO_PROJECT && project.archived;
+  const [insights, setInsights] = useState(false);
   const stats = statsOf(key);
   const now = Date.now();
 
@@ -281,11 +358,25 @@ function ProjectBoard({ project, cards, stats: statsOf, flashed, allDone, writab
     for (const c of cards) if (c.kind === "sub" && c.parentId && c.status !== "cancelled") m.set(c.parentId, [...(m.get(c.parentId) || []), c]);
     return m;
   }, [cards]);
-  const matches = (c) => !assignee || (assignee === UNASSIGNED ? c.assignee === null : c.assignee === assignee);
-  const mains = cards.filter((c) => c.kind === "main" && projectKey(c) === key && c.status !== "cancelled"
-    && (c.status !== "done" || allDone || recentlyDone(c, now))
-    && (matches(c) || (subsOf.get(c.id) || []).some(matches)));
-  const names = [...new Set([...instances.map((i) => i.name), ...cards.map((c) => c.assignee).filter(Boolean)])].sort();
+  const byId = useMemo(() => new Map(cards.map((c) => [c.id, c])), [cards]);
+  const live = cards.filter((c) => c.kind === "main" && projectKey(c) === key && c.status !== "cancelled");
+  // What the filters offer: this project's main tasks and their sub tasks.
+  const own = live.flatMap((c) => [c, ...(subsOf.get(c.id) || [])]);
+  const mains = live.filter((c) => doneShown(c, display.done, now) && mainMatches(c, subsOf.get(c.id), filters));
+  // Finished cards hidden: no Done column (a card is still confirmed or finished from its dialog).
+  const columns = display.done === "hide" ? COLUMNS.filter((s) => s !== "done") : COLUMNS;
+  const toggleSubs = (id) => setExpanded({ ...expanded, [id]: !expanded[id] });
+  const empty = () => html`<${Empty} icon="tasks" title=${filters.length ? t("tasks.emptyFiltered") : t("tasks.emptyBoard")} hint=${filters.length || archived ? undefined : t("tasks.emptyBoardHint")} />`;
+  // Insights counts what the page shows. A list with sub-task rows shows exactly its rows (each matched by the filter, a
+  // finished one as Done shows it); the board, or a list without them, shows a main task with all its sub tasks.
+  const insightCards = () => (display.view === "list" && display.subs
+    ? listRows(mains, subsOf, display, filters, now)
+    : mains.flatMap((c) => [c, ...(subsOf.get(c.id) || [])]));
+  const listBody = () => {
+    const rows = listRows(mains, subsOf, display, filters, now);
+    return rows.length === 0 ? empty() : html`<${ListView} rows=${rows} display=${display} subsOf=${subsOf} byId=${byId} flashed=${flashed} now=${now}
+      expanded=${expanded} onToggleSubs=${toggleSubs} onOpen=${onOpen} />`;
+  };
 
   const dropping = useRef(false);
   // A card moved from the keyboard is drawn again in its new place, and the focus it had goes with the old tile: give it
@@ -326,7 +417,7 @@ function ProjectBoard({ project, cards, stats: statsOf, flashed, allDone, writab
     if (e.key === "ArrowUp" && i > 0) void drop(card, card.status, column[i - 2]?.id ?? null, column[i - 1].id);
     else if (e.key === "ArrowDown" && i < column.length - 1) void drop(card, card.status, column[i + 1].id, column[i + 2]?.id ?? null);
     else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-      const to = COLUMNS[COLUMNS.indexOf(card.status) + (e.key === "ArrowLeft" ? -1 : 1)];
+      const to = columns[columns.indexOf(card.status) + (e.key === "ArrowLeft" ? -1 : 1)];
       if (to) void drop(card, to, null, null);
     }
   }
@@ -362,36 +453,39 @@ function ProjectBoard({ project, cards, stats: statsOf, flashed, allDone, writab
         <span class="muted">${stats.mains === 1 ? t("tasks.mainOne") : t("tasks.mainCount", stats.mains)}</span>
         ${stats.waiting ? html`<span class="tb-flag st-review">${t("tasks.waiting", stats.waiting)}</span>` : null}
         ${stats.blocked ? html`<span class="tb-flag st-blocked">${t("tasks.blockedN", stats.blocked)}</span>` : null}
+        <button type="button" class="btn btn-ghost btn-sm tb-insights" title=${t("taskstats.buttonTip")} onClick=${() => setInsights(true)}><${Icon} name="chart" size=${16} />${t("taskstats.button")}</button>
       </div>
       <span class="tb-grow"></span>
-      <select class="tb-select" value=${assignee} aria-label=${t("tasks.filterLabel")} onChange=${(e) => setAssignee(e.target.value)}>
-        <option value="">${t("tasks.everyone")}</option>
-        <option value=${UNASSIGNED}>${t("tasks.nobody")}</option>
-        ${names.map((n) => html`<option key=${n} value=${n}>${n}</option>`)}
-      </select>
       <${InstancesButton} onClick=${onInstances} />
       ${archived || !writable ? null : html`<button type="button" class="btn btn-primary" onClick=${onCreate}><${Icon} name="plus" size=${16} />${t("tasks.newMain")}</button>`}
     </div>
-    ${mains.length === 0 && !drag ? html`<${Empty} icon="tasks" title=${assignee ? t("tasks.emptyFiltered") : t("tasks.emptyBoard")} hint=${assignee || archived ? undefined : t("tasks.emptyBoardHint")} />`
-    : html`<div class="tb-scroll"><div class="tb-columns">
-      ${COLUMNS.map((status) => {
+    <div class="tb-view-bar">
+      <${FilterMenu} cards=${own} filters=${filters} onChange=${onFilters} />
+      <${DisplayMenu} display=${display} onChange=${onDisplay} />
+      <${FilterBar} cards=${own} filters=${filters} onChange=${onFilters} />
+    </div>
+    ${display.view === "list" ? listBody() : mains.length === 0 && !drag ? empty()
+    : html`<div class="tb-scroll"><div class=${`tb-columns${columns.length < COLUMNS.length ? " no-done" : ""}`}>
+      ${columns.map((status) => {
         const list = mains.filter((c) => c.status === status);
         const line = spot && spot.status === status ? spot.index : -1;
         return html`<section key=${status} class=${`tb-col st-${status}${drag ? " can-drop" : ""}${line >= 0 ? " over" : ""}`} aria-label=${t(`tasks.${status}`)}
           onDragOver=${(e) => over(e, status)} onDrop=${(e) => dropOn(e, status, list)}>
           <h3 class="tb-col-head"><span class="tb-dot"></span>${t(`tasks.${status}`)}
-            ${status === "done" ? html`<button type="button" class="tb-link" title=${t("tasks.toggleDone")} onClick=${() => onAllDone(!allDone)}>${allDone ? t("tasks.all") : t("tasks.recent")}</button>` : null}
+            ${status === "done" ? html`<button type="button" class="tb-link" title=${t("tasks.toggleDone")} onClick=${() => onDisplay({ ...display, done: display.done === "all" ? "recent" : "all" })}>${display.done === "all" ? t("tasks.all") : t("tasks.recent")}</button>` : null}
             <span class="tb-count">${list.length}</span></h3>
           ${cellItems(list, drag ? drag.id : null, line, (card, dragging) => {
             const lit = Math.max(flashed.get(card.id) || 0, ...(subsOf.get(card.id) || []).map((s) => flashed.get(s.id) || 0));
             return html`<${Tile} key=${card.id} card=${card} dragging=${dragging} flash=${now - lit < 4000} subs=${subsOf.get(card.id)} writable=${writable}
-              expanded=${!!expanded[card.id]} onToggleSubs=${() => setExpanded({ ...expanded, [card.id]: !expanded[card.id] })}
+              expanded=${!!expanded[card.id]} onToggleSubs=${() => toggleSubs(card.id)}
               onOpen=${onOpen} onKeyMove=${(e) => keyMove(card, e)}
               onDragStart=${(e) => { e.dataTransfer.setData("text/plain", card.id); e.dataTransfer.effectAllowed = "move"; setDrag(card); }} onDragEnd=${end} />`;
           })}
         </section>`;
       })}
     </div></div>`}
+    ${insights ? html`<${InsightsDialog} name=${project === NO_PROJECT ? t("tasks.noProject") : project.name} onClose=${() => setInsights(false)}
+      cards=${insightCards()} />` : null}
   </div>`;
 }
 
@@ -445,13 +539,7 @@ function Tile({ card, dragging, flash, subs = [], expanded, writable, onToggleSu
       ${progress.blocked ? html`<span class="tb-flag st-blocked"><${Icon} name="alert" size=${12} />${progress.blocked}</span>` : null}
       <${Icon} name="chevron" size=${14} cls=${expanded ? "tb-chev open" : "tb-chev"} />
     </button>` : null}
-    ${hasSubs && expanded ? html`<ul class="tb-subs" onClick=${(e) => e.stopPropagation()}>
-      ${subs.map((s) => html`<li key=${s.id}><button type="button" onClick=${() => onOpen(s.id)} title=${`${s.id} ${s.title} (${t(`tasks.${s.status}`)})`}>
-        <span class=${`tb-dot st-${s.status}`} aria-label=${t(`tasks.${s.status}`)}></span><span class="tb-code">${s.id}</span><span class="tb-sub-title">${s.title}</span>
-        ${s.assignee ? html`<span class="tb-who">${s.assignee}</span>` : null}</button>
-        ${s.status === "blocked" && s.blockedReason ? html`<div class="tb-sub-blocked">${s.blockedReason}</div>` : null}</li>`)}
-      ${older > 0 ? html`<li class="muted tb-sub-more">${t("tasks.olderSubs", older)}</li>` : null}
-    </ul>` : null}
+    ${hasSubs && expanded ? html`<${SubList} subs=${subs} older=${older} onOpen=${onOpen} />` : null}
     ${now ? html`<div class="tb-tile-now" title=${now.cards.map((c) => `${c.id} ${c.title}`).join("\n")}>
       <span class=${`tb-now-label st-${now.tone}`}>${t(now.label)}</span><span class="tb-code">${now.cards[0].id}</span>
       <span class="tb-now-title">${now.cards[0].title}</span>${now.cards.length > 1 ? html`<span class="muted">${t("tasks.moreCards", now.cards.length - 1)}</span>` : null}</div>` : null}
@@ -471,7 +559,7 @@ function Tile({ card, dragging, flash, subs = [], expanded, writable, onToggleSu
 
 // ── Dialogs: a new main task, a project ───────────────────
 
-function CreateMainDialog({ projects, project, onClose, onCreated }) {
+function CreateMainDialog({ projects, project, boardOff = [], onClose, onCreated }) {
   const { instances } = useStore(appStore);
   const active = projects.filter((p) => !p.archived);
   const [f, setF] = useState({ project: project === null || project === undefined ? "" : String(project), title: "", goal: "", scope: "", acceptance: "", context: "", size: "", priority: "normal", assignee: "", needsReview: true });
@@ -502,7 +590,7 @@ function CreateMainDialog({ projects, project, onClose, onCreated }) {
       ${field(t("tasks.definition"), html`<textarea rows="3" placeholder=${t("tasks.definitionHint")} value=${f.acceptance} onInput=${set("acceptance")}></textarea>`)}
       ${field(t("tasks.context"), html`<textarea rows="2" maxlength="1000" placeholder=${t("tasks.contextHint")} value=${f.context} onInput=${set("context")}></textarea>`)}
       <div class="tb-form-row">
-        ${field(t("tasks.assignee"), html`<select value=${f.assignee} onChange=${set("assignee")}><option value="">${t("tasks.nobody")}</option>${instances.map((i) => html`<option key=${i.name} value=${i.name}>${i.name}</option>`)}</select>`)}
+        ${field(t("tasks.assignee"), html`<select value=${f.assignee} onChange=${set("assignee")}><option value="">${t("tasks.nobody")}</option>${instances.map((i) => html`<${AssigneeOption} key=${i.name} name=${i.name} boardOff=${boardOff} />`)}</select>`)}
         ${field(t("tasks.size"), html`<select value=${f.size} onChange=${set("size")}><option value="">${t("tasks.sizeNone")}</option><option value="S">${t("tasks.sizeS")}</option><option value="M">${t("tasks.sizeM")}</option><option value="L">${t("tasks.sizeL")}</option></select>`)}
         ${field(t("tasks.priority"), html`<select value=${f.priority} onChange=${set("priority")}>${["urgent", "high", "normal", "low"].map((p) => html`<option key=${p} value=${p}>${t(`tasks.${p}`)}</option>`)}</select>`)}
       </div>

package/dist/ui/fleet-usage.js

@@ -14,11 +14,20 @@ register("fusage", {
   en: {
     range: "Range", today: "Today", r7d: "7 days", month: "This month", all: "All", custom: "Custom", from: "From", to: "To", apply: "Apply",
     group: "Group by", g_instance: "Agent", g_backend: "Backend", g_model: "Model", g_profile: "Credential profile", g_team: "Team (as configured now)",
-    csv: "Download CSV", basis: "API-equivalent at list price (checked {0}) — not money spent. Subscriptions are not billed per token.",
+    csv: "Download CSV", basis: "API-equivalent at list price ({0}) — not money spent.", basisMore: "Subscriptions are not billed per token.",
     amount: "API-equivalent", input: "Input", output: "Output", reasoning: "Reasoning", read: "Cache read", write: "Cache write", total: "Total tokens", requests: "Requests", messages: "Messages",
     notPriced: "not priced", partial: "partial", noTeam: "(no team)", unknown: "unknown",
-    f_cache_write_not_reported: "cache writes not reported (Codex, Muse) — an estimate", f_not_priced: "not priced: {0}", f_source_unknown: "read before backend and profile were recorded",
-    f_estimated: "estimated from text size — Kiro records no token counts", f_includes_estimates: "includes estimates (Kiro)", f_cost_reported: "amount as the CLI reported it (no list price for this model)", estimatedPart: "of which estimated: {0}",
+    // #3066 §3: what a row's numbers are, said once each as a small mark with its tooltip (never a pill per row).
+    t_not_priced: "Not priced: {0}", t_partial: "Part of this row's models have no price", t_write_unreported: "Codex/Muse don't report cache writes",
+    t_cost_reported: "Amount as the CLI reported it", t_estimated: "Estimated from text size (Kiro records no token counts)", t_reasoning_none: "Not reported by this CLI",
+    sourceNote: "Some hours were read before AgEnD recorded their backend and profile.", profileUnrecorded: "profile not recorded",
+    l_partial: "◐ partly priced", l_cost_reported: "† amount from the CLI", l_estimated: "≈ estimated",
+    // #3066 §2: output speed (Claude after the first token, Codex over the response window).
+    speed: "Speed", speedUnit: "{0} tok/s", speedCoverage: "{0} of {1} requests timed", speedSpread: "p10–p90: {0}–{1} tok/s",
+    speedNone: "no timing in its transcripts", speedByModel: "Speed by model",
+    speedBasis: "Output tokens ÷ the model's own response time (tool time excluded); method after tokdash.",
+   
+    f_includes_estimates: "includes estimates (Kiro)", estimatedPart: "of which estimated: {0}",
     scanning: "Scanning — totals may still grow.", updated: "Updated {0} · read every 10 min", since: "Collected since {0}", notYet: "Not collected yet",
     refresh: "Refresh",
     notMeasured: "Not measured", nm_credit_billed: "Kiro is credit-billed and records no tokens", nm_unsupported: "AgEnD can't read this CLI's usage yet", nm_no_data: "nothing read yet",
@@ -42,11 +51,18 @@ register("fusage", {
   "zh-TW": {
     range: "期間", today: "今天", r7d: "7 天", month: "本月", all: "全部", custom: "自訂", from: "從", to: "到", apply: "套用",
     group: "分組", g_instance: "Agent", g_backend: "Backend", g_model: "模型", g_profile: "憑證 profile", g_team: "Team（依目前設定）",
-    csv: "下載 CSV", basis: "依牌價換算的 API 等值（查證日期 {0}）——不是實際花費。訂閱方案不按 token 計費。",
+    csv: "下載 CSV", basis: "依牌價換算的 API 等值（{0}）——不是實際花費。", basisMore: "訂閱方案不按 token 計費。",
     amount: "API 等值", input: "輸入", output: "輸出", reasoning: "推理", read: "快取讀取", write: "快取寫入", total: "token 總計", requests: "請求數", messages: "訊息數",
     notPriced: "未定價", partial: "部分", noTeam: "（不屬於任何 team）", unknown: "未知",
-    f_cache_write_not_reported: "未回報快取寫入（Codex、Muse）——是估算", f_not_priced: "未定價：{0}", f_source_unknown: "讀取時尚未記錄 backend 與 profile",
-    f_estimated: "依文字長度估算——Kiro 不記錄 token 數", f_includes_estimates: "含估算值（Kiro）", f_cost_reported: "金額為 CLI 自行回報（價目表沒有此模型）", estimatedPart: "其中估算：{0}",
+    t_not_priced: "未定價：{0}", t_partial: "這一列有部分模型沒有價格", t_write_unreported: "Codex／Muse 不回報快取寫入",
+    t_cost_reported: "金額為 CLI 自行回報", t_estimated: "依文字長度估算（Kiro 不記錄 token 數）", t_reasoning_none: "這個 CLI 不回報",
+    sourceNote: "部分時段在 AgEnD 記錄 backend 與 profile 之前就已讀取。", profileUnrecorded: "未記錄 profile",
+    l_partial: "◐ 部分定價", l_cost_reported: "† 金額由 CLI 回報", l_estimated: "≈ 估算值",
+    speed: "速度", speedUnit: "{0} token/秒", speedCoverage: "{1} 個請求中有 {0} 個可計時", speedSpread: "p10–p90：{0}–{1} token/秒",
+    speedNone: "transcript 沒有計時資訊", speedByModel: "各模型速度",
+    speedBasis: "輸出 token ÷ 模型本身的回應時間（不含工具執行時間）；方法參考 tokdash。",
+   
+    f_includes_estimates: "含估算值（Kiro）", estimatedPart: "其中估算：{0}",
     scanning: "掃描中——總數可能還會增加。", updated: "更新於 {0} · 每 10 分鐘讀取一次", since: "自 {0} 起收集", notYet: "尚未收集",
     refresh: "重新整理",
     notMeasured: "未量測", nm_credit_billed: "Kiro 以 credit 計費，不記錄 token", nm_unsupported: "AgEnD 目前還讀不到這個 CLI 的用量", nm_no_data: "尚未讀到任何資料",
@@ -95,10 +111,6 @@ export function keyText(group, key) {
   return key;
 }
 const writes = (r) => (r.cacheWrite5m || 0) + (r.cacheWrite1h || 0) + (r.cacheWrite || 0);
-function flagText(f, r) {
-  if (f === "not_priced") return tu("f_not_priced", (r.unpriced || []).join(", "));
-  return ["cache_write_not_reported", "source_unknown", "estimated", "includes_estimates", "cost_reported"].includes(f) ? tu(`f_${f}`) : f;
-}
 
 // ── CSV (design §4): the daily rows of this same answer; messages on their own rows (they are per agent, not per model).
 const CSV_COLUMNS = ["date", "zone", "instance", "backend", "model", "tier", "profile", "input", "output", "reasoning", "cache_read", "cache_write_5m", "cache_write_1h", "cache_write", "requests", "messages", "amount", "basis", "flags", "estimated"];
@@ -318,25 +330,73 @@ function Heatmap({ report, dates }) {
   </section>`;
 }
 
-function Row({ r, group, max, measure }) {
+/**
+ * A mark with what it means: shown as its sign, said (title, and aria-label for readers) as words. role="img" makes it
+ * nameable (#3067 review, Prism P3: aria-label is not allowed on a generic span).
+ */
+const mark = (sign, words, cls = "us-mark") => html`<span class=${cls} role="img" title=${words} aria-label=${words}>${sign}</span>`;
+/** "—" that says why there is no number (nameable the same way). */
+const dash = (words) => html`<span class="us-none" role="img" title=${words} aria-label=${words}>—</span>`;
+/** The marks a row's numbers carry (#3066 §3): ◐ partly priced, † the CLI's own amount, ≈ estimated. */
+export function rowMarks(r) {
+  const flags = r.flags || [];
+  return { partial: r.priced === "partial", cost: flags.includes("cost_reported"), est: flags.includes("estimated") || r.estimated === true,
+    writeUnreported: flags.includes("cache_write_not_reported") && writes(r) === 0, unpriced: r.amount === null || r.amount === undefined };
+}
+/** A profile as shown: Codex's older hours were never tagged with one. */
+const profileText = (p) => (p === "unrecorded" ? tu("profileUnrecorded") : p);
+
+function Row({ r, group, max, measure, cols }) {
   const share = max > 0 ? Math.max(0.01, measure(r) / max) : 0;
-  const meta = [r.backends.join(", "), r.models.join(", "), r.profiles.join(", ")].filter(Boolean).join(" · ");
+  const meta = [r.backends.join(", "), r.models.join(", "), r.profiles.map(profileText).join(", ")].filter(Boolean).join(" · ");
+  const m = rowMarks(r);
+  // Estimated rows (Kiro): every number is an estimate — "≈" before each, the reason in its tooltip.
+  const num = (text) => (m.est ? html`${mark("≈", tu("t_estimated"), "us-mark us-approx")}${text}` : text);
+  const key = group === "profile" ? profileText(keyText(group, r.key)) : keyText(group, r.key);
   return html`<tr class="us-row">
-    <th scope="row" class="us-name"><span class="mono">${keyText(group, r.key)}</span>
+    <th scope="row" class="us-name"><span class="mono">${key}</span>
       <svg class="us-bar" aria-hidden="true"><rect class="us-bar-bg" width="100%" height="6" rx="3" /><rect class="us-bar-fg" width=${`${Math.round(share * 100)}%`} height="6" rx="3" /></svg>
-      ${group !== "instance" || meta ? html`<span class="us-meta">${meta}</span>` : null}
-      ${r.flags.length ? html`<span class="us-flags">${r.flags.map((f) => html`<span key=${f} class="ch-tag">${flagText(f, r)}</span>`)}</span>` : null}</th>
-    <td data-label=${tu("amount")} class=${`num${r.amount === null ? " muted" : ""}`}>${amountText(r)}</td>
-    <td data-label=${tu("input")} class="num">${tokens(r.input)}</td>
-    <td data-label=${tu("output")} class="num">${tokens(r.output)}</td>
-    <td data-label=${tu("reasoning")} class="num">${r.reasoningReported === false ? "—" : tokens(r.reasoning || 0)}</td>
-    <td data-label=${tu("read")} class="num">${tokens(r.cacheRead)}</td>
-    <td data-label=${tu("write")} class="num">${r.flags.includes("cache_write_not_reported") && writes(r) === 0 ? "—" : tokens(writes(r))}</td>
-    <td data-label=${tu("total")} class="num">${tokens(r.total)}</td>
+      ${group !== "instance" || meta ? html`<span class="us-meta">${meta}</span>` : null}</th>
+    <td data-label=${tu("amount")} class=${`num${m.unpriced ? " muted" : ""}`}>${m.unpriced ? dash(tu("t_not_priced", (r.unpriced || []).join(", "))) : html`${num(money(r.amount))}${m.partial ? mark("◐", tu("t_partial")) : null}${m.cost ? mark("†", tu("t_cost_reported")) : null}`}</td>
+    <td data-label=${tu("input")} class="num">${num(tokens(r.input))}</td>
+    <td data-label=${tu("output")} class="num">${num(tokens(r.output))}</td>
+    ${cols.reasoning ? html`<td data-label=${tu("reasoning")} class="num">${r.reasoningReported === false ? dash(tu("t_reasoning_none")) : num(tokens(r.reasoning || 0))}</td>` : null}
+    <td data-label=${tu("read")} class="num">${num(tokens(r.cacheRead))}</td>
+    <td data-label=${tu("write")} class="num">${m.writeUnreported ? dash(tu("t_write_unreported")) : num(tokens(writes(r)))}</td>
+    <td data-label=${tu("total")} class="num">${num(tokens(r.total))}</td>
     <td data-label=${tu("requests")} class="num">${n(r.requests)}</td>
-    <td data-label=${tu("messages")} class="num">${r.messages === null ? "—" : n(r.messages)}</td>
+    ${cols.messages ? html`<td data-label=${tu("messages")} class="num">${r.messages === null ? "—" : n(r.messages)}</td>` : null}
+    ${cols.speed ? html`<td data-label=${tu("speed")} class="num">${r.speed ? speedText(r.speed) : dash(tu("speedNone"))}</td>` : null}
   </tr>`;
 }
+/** #3066 §2: a rate as shown — whole tok/s, one decimal below 10. */
+export const speedText = (s) => tu("speedUnit", s.tokPerSec >= 10 ? Math.round(s.tokPerSec).toLocaleString("en-US") : s.tokPerSec.toFixed(1));
+/** Columns worth a place (#3066 §3): Reasoning only when some row reports it; Messages only when some row has them; Speed (§2) only when some response was timed. */
+export function usageColumns(rows) {
+  return { reasoning: rows.some((r) => r.reasoningReported !== false), messages: rows.some((r) => r.messages !== null && r.messages !== undefined),
+    speed: rows.some((r) => !!r.speed) };
+}
+/** #3066 §2: each model's speed — rate · requests timed (coverage) · p10–p90 from 30 timed. */
+function SpeedCard({ report }) {
+  const list = report.speedByModel || [];
+  if (!list.length) return null;
+  return html`<section class="us-speed card" aria-labelledby="us-speed-h">
+    <h3 id="us-speed-h">${tu("speedByModel")}</h3>
+    <ul class="rows">${list.map((m) => html`<li key=${m.model} class="row-item"><span class="grow strong mono">${m.model}</span>
+      <span class="num">${speedText(m.speed)}</span>
+      <span class="muted">${[m.requests > 0 ? tu("speedCoverage", n(m.speed.timedRequests), n(m.requests)) : null,
+        m.speed.p10 !== null && m.speed.p90 !== null ? tu("speedSpread", Math.round(m.speed.p10), Math.round(m.speed.p90)) : null].filter(Boolean).join(" · ")}</span></li>`)}</ul>
+    <p class="note">${tu("speedBasis")}</p>
+  </section>`;
+}
+/** The legend under the table: only the marks that appear, and the one footnote when an hour's source was not recorded. */
+function Legend({ rows }) {
+  const marks = rows.map(rowMarks);
+  const parts = [marks.some((m) => m.partial) && tu("l_partial"), marks.some((m) => m.cost) && tu("l_cost_reported"), marks.some((m) => m.est) && tu("l_estimated")].filter(Boolean);
+  const source = rows.some((r) => (r.flags || []).includes("source_unknown"));
+  if (!parts.length && !source) return null;
+  return html`<p class="note us-key">${parts.join(" · ")}${parts.length && source ? html`<br />` : null}${source ? tu("sourceNote") : null}</p>`;
+}
 
 /** The tab's body for one answer of GET /ui/usage-report. */
 export function UsageReport({ report, choice, setChoice, refresh, fetchedAt }) {
@@ -355,6 +415,7 @@ export function UsageReport({ report, choice, setChoice, refresh, fetchedAt }) {
   const zones = zonesChanged(report);
   const csvFrom = report.dailyTruncated ? report.dailyFrom : report.range.kind === "all" ? "all" : report.range.from;
   const rows = report.rows.filter((r) => r.total > 0 || (r.messages || 0) > 0);
+  const cols = usageColumns(rows);
   const anyAmount = rows.some((r) => r.amount !== null && r.amount > 0);
   const measure = (r) => (anyAmount ? r.amount || 0 : r.total);
   const max = Math.max(0, ...rows.map(measure));
@@ -375,7 +436,7 @@ export function UsageReport({ report, choice, setChoice, refresh, fetchedAt }) {
       <label>${tu("from")} <input type="date" value=${draft.from} max=${draft.to} onInput=${(e) => setDraft({ ...draft, from: e.target.value })} /></label>
       <label>${tu("to")} <input type="date" value=${draft.to} min=${draft.from} onInput=${(e) => setDraft({ ...draft, to: e.target.value })} /></label>
       <button type="submit" class="btn btn-sm">${tu("apply")}</button></form>` : null}
-    <p class="us-basis" role="note">${tu("basis", report.pricesChecked)}</p>
+    <p class="us-basis" role="note" title=${tu("basisMore")}>${tu("basis", report.pricesChecked)}</p>
     ${noDaily ? html`<p class="us-partial" role="status">${tu("noDaily")}</p>` : report.dailyTruncated ? html`<p class="us-partial" role="status">${tu("partialDays", report.dailyFrom)}</p>` : null}
     ${zones ? html`<p class="us-partial" role="status">${tu("zoneChanged", zones.join(", "), report.zone)}</p>` : null}
     <p class="note us-fresh">${tu("updated", new Date(fetchedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }))} · ${Number.isFinite(since) ? tu("since", new Date(since).toLocaleDateString()) : tu("notYet")} · ${tu("zoneNote", report.zone)}${group === "team" ? ` ${tu("teamsNote")}` : ""}
@@ -389,10 +450,12 @@ export function UsageReport({ report, choice, setChoice, refresh, fetchedAt }) {
         <div class="ch-metric"><dt>${tu("messages")}</dt><dd>${report.totals.messages === null ? "—" : n(report.totals.messages)}</dd></div>
       </dl>
       ${rows.length ? html`<table class="us-table"><thead><tr><th scope="col">${tu(`g_${group}`)}</th><th scope="col" class="num">${tu("amount")}</th>
-        <th scope="col" class="num">${tu("input")}</th><th scope="col" class="num">${tu("output")}</th><th scope="col" class="num">${tu("reasoning")}</th><th scope="col" class="num">${tu("read")}</th><th scope="col" class="num">${tu("write")}</th>
-        <th scope="col" class="num">${tu("total")}</th><th scope="col" class="num">${tu("requests")}</th><th scope="col" class="num">${tu("messages")}</th></tr></thead>
-        <tbody>${rows.map((r) => html`<${Row} key=${r.key} r=${r} group=${group} max=${max} measure=${measure} />`)}</tbody></table>`
+        <th scope="col" class="num">${tu("input")}</th><th scope="col" class="num">${tu("output")}</th>${cols.reasoning ? html`<th scope="col" class="num">${tu("reasoning")}</th>` : null}<th scope="col" class="num">${tu("read")}</th><th scope="col" class="num">${tu("write")}</th>
+        <th scope="col" class="num">${tu("total")}</th><th scope="col" class="num">${tu("requests")}</th>${cols.messages ? html`<th scope="col" class="num">${tu("messages")}</th>` : null}${cols.speed ? html`<th scope="col" class="num">${tu("speed")}</th>` : null}</tr></thead>
+        <tbody>${rows.map((r) => html`<${Row} key=${r.key} r=${r} group=${group} max=${max} measure=${measure} cols=${cols} />`)}</tbody></table>
+        <${Legend} rows=${rows} />`
         : html`<p class="note">${tu("noRows")}</p>`}
+      <${SpeedCard} report=${report} />
       <${Trend} report=${report} dates=${dates} />
       <${Heatmap} report=${report} dates=${dates} />`}
     ${report.notMeasured.length || report.shared.length ? html`<section class="us-rest" aria-labelledby="us-rest-h"><h3 id="us-rest-h">${tu("notMeasured")}</h3>

package/dist/ui/html-attachment.js

@@ -1,40 +1,3 @@
-// #1306 §6.1 (Q4): an agent's .html / .htm attachment gets the same preview card as a ```html block. Its HTML is read
-// from /ui/file/<id> — same origin, this session's cookie — only on a click (Preview, Open in panel), never to show a
-// card. What runs is then handed to the preview frame exactly like a block's (AgendPreview.start): the file URL itself
-// is never opened or framed on the dashboard's origin.
-
-/**
- * #2863: the sizes a preview takes (UTF-8 bytes of the HTML), the same as a block's (preview.js LIMITS): up to ASK it
- * runs at once; above it the person is asked first ("Preview anyway?"); above MAX there is no preview, only the
- * download. MAX is the frame's own ceiling (web-preview.ts PREVIEW_HTML_MAX_BYTES).
- */
-export const HTML_PREVIEW_ASK = 8 * 1024 * 1024;
-export const HTML_PREVIEW_MAX = 50 * 1024 * 1024;
-
-/**
- * Read an attachment's HTML: { ok: true, code } or { ok: false, reason } with reason "large" (above `ask` and not
- * `anyway`: nothing is fetched when its listed size says so; `size` is what it is), "over" (above `max`: its listed size
- * is checked before anything is fetched, the bytes again after), "gone" (the fleet no longer serves that id — the file
- * changed, or the fleet restarted), or "failed". The text card reads with its own, single cap (ask = max).
- */
-export async function loadHtmlAttachment(att, fetchImpl = globalThis.fetch, { ask = HTML_PREVIEW_ASK, max = HTML_PREVIEW_MAX, anyway = false } = {}) {
-  if (!att || typeof att.id !== "string" || !/^[0-9a-f]{32}$/.test(att.id)) return { ok: false, reason: "failed" };
-  if (typeof att.size === "number" && att.size > max) return { ok: false, reason: "over" };
-  if (typeof att.size === "number" && att.size > ask && !anyway) return { ok: false, reason: "large", size: att.size };
-  let res;
-  try { res = await fetchImpl(`/ui/file/${att.id}`, { credentials: "same-origin", cache: "no-store" }); }
-  catch { return { ok: false, reason: "failed" }; }
-  if (!res || !res.ok) return { ok: false, reason: res && res.status === 404 ? "gone" : "failed" };
-  let bytes;
-  try { bytes = await res.arrayBuffer(); } catch { return { ok: false, reason: "failed" }; }
-  if (bytes.byteLength > max) return { ok: false, reason: "over" };
-  if (bytes.byteLength > ask && !anyway) return { ok: false, reason: "large", size: bytes.byteLength };
-  // UTF-8, as a block's text is; a BOM is dropped.
-  return { ok: true, code: new TextDecoder("utf-8").decode(bytes) };
-}
-
-/** #2863: a size as the person reads it: "12.3 MB" (1 MB = 1024 × 1024 bytes, as the caps are). */
-export function sizeLabel(bytes) {
-  const mb = bytes / (1024 * 1024);
-  return `${mb >= 10 ? Math.round(mb) : Math.round(mb * 10) / 10} MB`;
-}
+// Hub PR A (#3226): this module moved to /assets/html-attachment.js (src/ui/shared/), shared by the fleet and the Hub. A tab opened
+// before the move still imports it from here: the same module (one instance), re-exported.
+export * from "/assets/html-attachment.js";

package/dist/ui/hub-agent-copy.js

@@ -0,0 +1,23 @@
+// Lazy, fixed local-owner copy for the representative-agent share (docs/design/hub-representative-agent.md).
+// A member switcher may retain the old hub-strings module before Settings loads. Own these new words here.
+import { register } from "/assets/app-i18n.js";
+register("hub", {
+  en: {
+    agentLead: "Every agent is private unless you share it. A shared agent answers Hub questions in its own conversation, with its own folder and the tools its Settings allow. Actions that need approval still come to you.",
+    agentShared: "Shared: Hub questions go to this agent's own conversation.",
+    republishRequired: "Shared under the older restricted mode. Hub questions are refused until you share this agent again.",
+    shareAgain: "Share again",
+    agentNotShareable: "This agent can't be shared right now. Reload the page and try again.",
+    agentDeliveryUnavailable: "Sharing isn't available on this fleet yet: Hub questions can't reach an agent here.",
+  },
+  "zh-TW": {
+    agentLead: "每個 Agent 預設都不公開。公開後，Agent 會在自己的對話中回答 Hub 的提問，使用它自己的資料夾和設定允許的工具。需要核准的動作仍會交給你。",
+    agentShared: "已公開：Hub 的提問會送到這個 Agent 自己的對話。",
+    republishRequired: "這是舊的受限模式公開。重新公開這個 Agent 之前，Hub 的提問都會被拒絕。",
+    shareAgain: "重新公開",
+    agentNotShareable: "目前無法公開這個 Agent。請重新整理頁面後再試一次。",
+    agentDeliveryUnavailable: "這個 Fleet 還不能公開：Hub 的提問目前無法送到這裡的 Agent。",
+  },
+});
+/** What a Share sends: the agent itself, no Hub tools (agent-mode.ts on the member). */
+export const AGENT_CHOICE = Object.freeze({ dataViewId: "agent", tools: Object.freeze([]) });