@songsid/agend 2.3.5-alpha.5 → 2.3.5-beta.1

package/dist/ui/fleet-task-card.js

@@ -9,7 +9,6 @@ import { Dialog } from "/assets/ui-dialog.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
 import { AssigneeOption, StatusPill, Who, answerBlocked, askText, boardApi, currentWork, errorText, followsSubs, moveCard, notesForPeople, relTime, wrapUpText } from "./fleet-task-common.js";
-import { StepButtons } from "./fleet-task-menu.js";
 
 register("taskcard", {
   en: {
@@ -84,10 +83,9 @@ const fieldName = (k) => { const key = `taskcard.f${k[0].toUpperCase()}${k.slice
 
 /**
  * `writable`: false over the public link (the card is shown, nothing on it changes). `place`: up and down in its column,
- * for touch and keyboard (null when it cannot move). `steps`: the previous and next card the page showed, and where
- * this one is among them (null: nowhere to step).
+ * for touch and keyboard (null when it cannot move).
  */
-export function CardDialog({ id, tick, projects, boardOff = [], writable = true, place = null, steps = null, onClose, onOpen, reloadBoard }) {
+export function CardDialog({ id, tick, projects, boardOff = [], writable = true, place = null, onClose, onOpen, reloadBoard }) {
   const { instances } = useStore(appStore);
   const [detail, setDetail] = useState(null);
   const [missing, setMissing] = useState(false);
@@ -133,10 +131,8 @@ export function CardDialog({ id, tick, projects, boardOff = [], writable = true,
     finally { moving.current = false; setBusy(false); }
   }
 
-  // Previous / Next: the page's cards (fleet-task-menu.js), in the header from the first frame (no jump once it loads).
-  const tools = steps ? html`<${StepButtons} steps=${steps} onOpen=${onOpen} />` : null;
   if (missing || !detail) {
-    return html`<${Dialog} title=${id} onClose=${onClose} wide drawer tools=${tools}><p class="muted">${missing ? t("taskcard.missing", id) : t("taskcard.loading")}</p></${Dialog}>`;
+    return html`<${Dialog} title=${id} onClose=${onClose} wide drawer><p class="muted">${missing ? t("taskcard.missing", id) : t("taskcard.loading")}</p></${Dialog}>`;
   }
 
   const { card, parent, children } = detail;
@@ -170,7 +166,7 @@ export function CardDialog({ id, tick, projects, boardOff = [], writable = true,
     } catch { /* no clipboard */ }
   }
 
-  return html`<${Dialog} title=${`${card.id} · ${t(`tasks.${card.kind}`)}`} onClose=${onClose} wide drawer label=${`${card.id} ${card.title}`} tools=${tools}>
+  return html`<${Dialog} title=${`${card.id} · ${t(`tasks.${card.kind}`)}`} onClose=${onClose} wide drawer label=${`${card.id} ${card.title}`}>
     <div class="tc">
       <div class="tc-head">
         ${writable ? html`<${InlineTitle} value=${card.title} version=${card.version} onSave=${(title, base) => save({ title }, base)} />` : html`<h3 class="tc-title">${card.title}</h3>`}

package/dist/ui/fleet-task-common.js

@@ -23,7 +23,7 @@ register("tasks", {
     mainCount: "{0} main tasks", mainOne: "1 main task", waiting: "{0} waiting for you", blockedN: "{0} blocked", lastActivity: "Last change {0}",
     percentTitle: "Done: finished sub tasks out of all of them; a main task without sub tasks counts once you confirm it",
     allProjects: "All projects", back: "Projects",
-    nobody: "Unassigned",
+    everyone: "Everyone", nobody: "Unassigned", filterLabel: "Filter by assignee",
     recent: "Last 7 days", all: "All", toggleDone: "Show the last 7 days / everything",
     emptyBoard: "No main tasks here yet", emptyFiltered: "No main tasks match the filter",
     emptyBoardHint: "A main task is an outcome you want. Assign it to an instance: it does a small one directly and splits a big one into sub tasks.",
@@ -98,7 +98,7 @@ register("tasks", {
     mainCount: "{0} 個主任務", mainOne: "1 個主任務", waiting: "等你確認 {0}", blockedN: "卡住 {0}", lastActivity: "最後動態 {0}",
     percentTitle: "完成度：已完成的子任務佔全部的比例；沒有子任務的主任務算一份，你確認後才算完成",
     allProjects: "所有專案", back: "專案",
-    nobody: "沒人負責",
+    everyone: "全部負責人", nobody: "沒人負責", filterLabel: "依負責人篩選",
     recent: "近 7 天", all: "全部", toggleDone: "切換：只看近 7 天／全部",
     emptyBoard: "這個專案還沒有主任務", emptyFiltered: "沒有符合篩選的主任務",
     emptyBoardHint: "主任務是你要的成果，可大可小。指派給 instance，它會自己決定直接做，或先拆成子任務。",

package/dist/ui/fleet-tasks.js

@@ -5,8 +5,7 @@
 // (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. 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).
+// need no drag.
 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";
@@ -16,21 +15,18 @@ 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, 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 { AskHost, AssigneeOption, 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 { 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; 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.
+ * remembered on this device.
  */
 export function TaskBoardTab({ lease }) {
   const [state, setState] = useState(null);
@@ -38,9 +34,8 @@ export function TaskBoardTab({ lease }) {
   const [version, setVersion] = useState({ n: 0, ifMoved: false });
   const writable = !onPublicLink();
   const [at, setAtRaw] = useState(() => {
-    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 v = readStored(PROJECT_KEY, "");
+    return v === "" ? null : v === NO_PROJECT ? NO_PROJECT : Number(v);
   });
   const [openId, setOpenId] = useState(() => {
     try { return new URLSearchParams(globalThis.location?.search || "").get("card"); } catch { return null; }
@@ -48,16 +43,8 @@ export function TaskBoardTab({ lease }) {
   const [tick, setTick] = useState(0);
   const [flashed, setFlashed] = useState(() => new Map());
   const [dialog, setDialog] = useState(null);
-  // 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";
+  // 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);
   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 }));
@@ -102,31 +89,15 @@ 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" });
 
@@ -143,61 +114,13 @@ export function TaskBoardTab({ lease }) {
   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} display=${display} filters=${filters} writable=${writable}
-        onDisplay=${setDisplay} onFilters=${setFilters} onBack=${() => setAt(null)}
+    : html`<${ProjectBoard} project=${project} cards=${cards} stats=${stats} flashed=${flashed} allDone=${allDone} writable=${writable} onAllDone=${setAllDone} onBack=${() => setAt(null)}
         onOpen=${openCard} onCreate=${() => setDialog({ kind: "main", project: project === NO_PROJECT ? null : project.id })} onInstances=${showInstances} reload=${reload} />`;
-
-  /** 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}>
+  return html`<div class="tb">
     ${writable ? null : html`<p class="tb-readonly" role="note"><${Icon} name="eye" size=${16} />${t("tasks.readOnly")}</p>`}
     ${body}
-    ${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}
+      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}
@@ -287,7 +210,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" data-wait=${c.id}>
+    <ul class="rows">${[...review, ...blocked].map((c) => html`<li key=${c.id} class="row-item tb-wait-row">
       <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}
@@ -343,13 +266,15 @@ function SearchBox({ onOpen }) {
 
 // ── A project's board ─────────────────────────────────────
 
-function ProjectBoard({ project, cards, stats: statsOf, flashed, display, filters, writable, onDisplay, onFilters, onBack, onOpen, onCreate, onInstances, reload }) {
+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, ""));
   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();
 
@@ -358,25 +283,11 @@ function ProjectBoard({ project, cards, stats: statsOf, flashed, display, filter
     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 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 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 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
@@ -417,7 +328,7 @@ function ProjectBoard({ project, cards, stats: statsOf, flashed, display, filter
     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);
     }
   }
@@ -453,39 +364,36 @@ function ProjectBoard({ project, cards, stats: statsOf, flashed, display, filter
         <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>
-    <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) => {
+    ${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) => {
         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=${() => onDisplay({ ...display, done: display.done === "all" ? "recent" : "all" })}>${display.done === "all" ? t("tasks.all") : t("tasks.recent")}</button>` : null}
+            ${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}
             <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=${() => toggleSubs(card.id)}
+              expanded=${!!expanded[card.id]} onToggleSubs=${() => setExpanded({ ...expanded, [card.id]: !expanded[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>`;
 }
 
@@ -539,7 +447,13 @@ 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`<${SubList} subs=${subs} older=${older} onOpen=${onOpen} />` : 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}
     ${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}

package/dist/ui/html-attachment.js

@@ -1,3 +1,40 @@
-// 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";
+// #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`;
+}

package/dist/ui/office-share-page.js

@@ -127,9 +127,7 @@ export function SharePage({ base, timers = globalThis, pollMs = POLL_MS }) {
         if (stopped || !lease.current()) return;
         appStore.set((s) => ({ ...s, ...appFromState(d) }));
         if (d.traffic && traffic.load(d.traffic)) setItems(traffic.items());
-        // #2861: the dialogue box's news (when someone talked to a person here — never what was said), as read.
-        setState({ phase: "live", org: d.org, office: typeof d.office === "string" ? d.office : null, ends: typeof d.ends === "number" ? d.ends : null,
-          talk: d.talk && typeof d.talk === "object" ? d.talk : null });
+        setState({ phase: "live", org: d.org, office: typeof d.office === "string" ? d.office : null, ends: typeof d.ends === "number" ? d.ends : null });
       } catch { if (!stopped) setState((s) => (s.phase === "live" ? s : { phase: "offline" })); }
     };
     void read();
@@ -151,7 +149,7 @@ export function SharePage({ base, timers = globalThis, pollMs = POLL_MS }) {
     </header>
     ${state.phase === "offline" ? html`<p class="note share-note" role="status">${to("offline")}</p>` : null}
     ${view ? html`<div class="share-stage"><${Office} view=${view} traffic=${items} lease=${lease} assetUrl=${(p) => shareUrl(base, p) || p}
-      assetImage=${(url) => shareImage(url, { fetch: (...a) => timers.fetch(...a), timers })} opening=${state.office === "all" ? ALL_ID : state.office || undefined} talk=${state.talk || null} /></div>`
+      assetImage=${(url) => shareImage(url, { fetch: (...a) => timers.fetch(...a), timers })} opening=${state.office === "all" ? ALL_ID : state.office || undefined} /></div>`
       : html`<p class="muted share-loading" role="status">${to("loading")}</p>`}
   </main>`;
 }