@songsid/agend 2.3.0-beta.22 → 2.3.0-beta.24

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

@@ -0,0 +1,107 @@
+// #2246 step 3: who works on what on the task board — each instance's cards as its `task mine` reads them (GET
+// /ui/tasks/work, the server's myWork): the board's Instance list, a drawer by team as taskhall's, and the block on an
+// instance's Details page. A card opens on the board. No style attribute anywhere (the CSP).
+import { html, useEffect, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { appStore, useStore } from "/assets/app-store.js";
+import { Dialog } from "/assets/ui-dialog.js";
+import { Icon } from "/assets/ui-icons.js";
+import { Skeleton } from "/assets/ui-states.js";
+import { GroupMark, InstanceAvatar, dotLabel, dotState, groupKind, groupLabel, groupOf, namesOf, namesStore } from "/assets/instance-nav.js";
+import { Who, boardApi, errorText } from "./fleet-task-common.js";
+
+const LABEL = { back: "tasks.workSentBack", doing: "tasks.workDoing", blocked: "tasks.workBlocked", review: "tasks.workReview", main: "tasks.workMain", ready: "tasks.workReady", waiting: "tasks.workWaiting" };
+
+/**
+ * An instance's work as lines, in taskhall's order: what it works on, is blocked on, waits on the person for, the main
+ * tasks it coordinates, what it can start, what waits for other cards. A card sent back to it says so instead.
+ */
+export function workLines(w) {
+  const back = new Set(w.sentBack || []), unread = new Set(w.newComments || []);
+  const line = (kind, card, note = "") => ({ kind: kind !== "main" && back.has(card.id) ? "back" : kind, card, note, unread: unread.has(card.id) });
+  return [
+    ...(w.doing || []).map((c) => line("doing", c)),
+    ...(w.blocked || []).map((c) => line("blocked", c)),
+    ...(w.review || []).map((c) => line("review", c)),
+    ...(w.mains || []).map((c) => line("main", c, c.progress && c.progress.total ? t("tasks.workSubs", c.progress.done, c.progress.total) : "")),
+    ...(w.ready || []).map((c) => line("ready", c, c.assignee ? "" : t("tasks.workClaimable"))),
+    ...(w.waiting || []).map((c) => line("waiting", c, t("tasks.workWaitsFor", (c.unmetDeps || []).join(t("tasks.workJoin"))))),
+  ];
+}
+
+export function WorkLines({ lines, onOpen }) {
+  if (!lines.length) return html`<p class="muted tw-none">${t("tasks.workNone")}</p>`;
+  return html`<ul class="tw-lines">${lines.map((l) => html`<li key=${`${l.kind}:${l.card.id}`}>
+    <button type="button" class="tw-line" title=${`${l.card.id} ${l.card.title}`} onClick=${() => onOpen(l.card.id)}>
+      <span class=${`tw-kind k-${l.kind}`}>${t(LABEL[l.kind])}</span><span class="tb-code">${l.card.id}</span><span class="tw-title">${l.card.title}</span>
+      ${l.note ? html`<span class="muted tw-note">${l.note}</span>` : null}
+      ${l.unread ? html`<span class="tw-unread" title=${t("tasks.workNewComments")} aria-label=${t("tasks.workNewComments")}><${Icon} name="chat" size=${13} /></span>` : null}
+    </button></li>`)}</ul>`;
+}
+
+const OUTSIDE = "\u0000outside";
+/** Groups as the sidebar orders them: teams, then tags, then the rest; names nobody in the fleet has last. */
+const groupRank = (g) => (g === OUTSIDE ? 3 : groupKind(g) === "team" ? 0 : groupKind(g) === "tag" ? 1 : 2);
+
+/** The board's Instance list: every instance by team, working ones first, each with its cards. Read again on each board change. */
+export function InstancesDrawer({ tick, onClose, onOpen }) {
+  const { instances, exec, awaiting } = useStore(appStore);
+  useStore(namesStore);                                   // the sidebar's Names choice: display name or instance name first
+  const [work, setWork] = useState(null);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    let live = true;
+    boardApi.work().then((d) => { if (live) { setWork(d.instances || []); setError(""); } }, (e) => { if (live) setError(errorText(e)); });
+    return () => { live = false; };
+  }, [tick]);
+  const byName = new Map((instances || []).map((i) => [i.name, i]));
+  const rows = (work || []).map((w) => {
+    const it = byName.get(w.name);
+    return { w, it, state: it ? dotState(it, exec[w.name], awaiting[w.name]) : null, lines: workLines(w) };
+  });
+  // Working first, then those with cards, then the running ones; by name.
+  const rank = (r) => (r.state === "working" ? 0 : r.lines.length ? 1 : r.it && r.it.status === "running" ? 2 : 3);
+  rows.sort((a, b) => rank(a) - rank(b) || a.w.name.localeCompare(b.w.name));
+  const groups = new Map();
+  for (const r of rows) {
+    const g = r.it ? groupOf(r.it) : OUTSIDE;
+    if (!groups.has(g)) groups.set(g, []);
+    groups.get(g).push(r);
+  }
+  const ordered = [...groups].sort(([a], [b]) => groupRank(a) - groupRank(b));
+  const working = rows.filter((r) => r.state === "working").length;
+  return html`<${Dialog} title=${t("tasks.instances")} onClose=${onClose} wide drawer>
+    <div class="tw">
+      ${work ? html`<p class="muted tw-head">${t("tasks.instancesHead", rows.length, working)}</p>` : null}
+      ${error ? html`<p class="tw-error" role="alert">${t("tasks.workFailed", error)}</p>` : null}
+      ${!work && !error ? html`<${Skeleton} lines=${4} />` : null}
+      ${ordered.map(([g, list]) => html`<section key=${g} class="tw-group">
+        <h3 class="tw-group-head">${g === OUTSIDE ? t("tasks.workOutside") : html`<${GroupMark} group=${g} />${groupLabel(g)}`}<span class="tb-count">${list.length}</span></h3>
+        ${list.map((r) => html`<div key=${r.w.name} class="tw-inst">
+          <div class="tw-inst-head">
+            ${r.it ? html`<${InstanceAvatar} it=${r.it} state=${r.state} />` : html`<${Who} name=${r.w.name} />`}
+            ${r.it ? (() => { const n = namesOf(r.it); return html`<span class="tw-name" title=${r.w.name}>${n.primary}</span>${n.secondary ? html`<span class="muted tw-alt">${n.secondary}</span>` : null}`; })() : null}
+            ${r.state ? html`<span class="muted tw-state">${dotLabel(r.state)}</span>` : null}
+          </div>
+          ${r.it && r.it.description ? html`<p class="muted tw-desc">${r.it.description}</p>` : null}
+          <${WorkLines} lines=${r.lines} onOpen=${onOpen} />
+        </div>`)}
+      </section>`)}
+    </div>
+  </${Dialog}>`;
+}
+
+/** An instance's Details page: its cards, read once when the page opens (the page reads nothing recurring, #1374). */
+export function InstanceBoardWork({ name, onOpen }) {
+  const [work, setWork] = useState(null);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    let live = true;
+    setWork(null); setError("");
+    boardApi.work(name).then((d) => { if (live) setWork((d.instances || [])[0] || { name }); }, (e) => { if (live) setError(errorText(e)); });
+    return () => { live = false; };
+  }, [name]);
+  return html`<section class="card d-board"><h3>${t("tasks.detailsBoard")}</h3>
+    ${error ? html`<p class="note">${t("tasks.workFailed", error)}</p>` : !work ? html`<${Skeleton} lines=${2} />` : html`<${WorkLines} lines=${workLines(work)} onOpen=${onOpen} />`}
+  </section>`;
+}

package/dist/ui/fleet-tasks.js

@@ -8,14 +8,16 @@
 // 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";
 import { appStore, useStore } from "/assets/app-store.js";
 import { Dialog } from "/assets/ui-dialog.js";
 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, answerBlocked, boardApi, currentWork, dropNeighbours, errorText, followsSubs, moveCard, onPublicLink, projectKey, projectStats, readStored, recentlyDone, relTime, workersOf, wrapUpText, writeStored } from "./fleet-task-common.js";
+import { AskHost, COLUMNS, NO_PROJECT, ProgressBar, StatusPill, UNASSIGNED, Who, answerBlocked, boardApi, currentWork, dropNeighbours, errorText, followsSubs, moveCard, onPublicLink, projectKey, projectStats, readStored, recentlyDone, relTime, workersOf, wrapUpText, writeStored } from "./fleet-task-common.js";
 import { CardDialog } from "./fleet-task-card.js";
+import { InstancesDrawer } from "./fleet-task-work.js";
 
 const PROJECT_KEY = "agend_tasks_project";
 const FILTER_KEY = "agend_tasks_assignee";
@@ -96,17 +98,22 @@ export function TaskBoardTab({ lease }) {
     try { const u = new URL(globalThis.location.href); u.searchParams.delete("card"); globalThis.history.replaceState(globalThis.history.state, "", u); } catch { /* no address bar */ }
   };
 
+  // #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" });
+
   if (!state) return html`<${Skeleton} lines=${5} />`;
   if (state.error) return html`<${ErrorState} message=${t("tasks.loadFailed")} onRetry=${reload} />`;
   const cards = Array.isArray(state.data.cards) ? state.data.cards : [];
   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 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} reload=${reload} />`
+    ? 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)}
-        onOpen=${openCard} onCreate=${() => setDialog({ kind: "main", project: project === NO_PROJECT ? null : project.id })} reload=${reload} />`;
+        onOpen=${openCard} onCreate=${() => setDialog({ kind: "main", project: project === NO_PROJECT ? null : project.id })} onInstances=${showInstances} reload=${reload} />`;
   return html`<div class="tb">
     ${writable ? null : html`<p class="tb-readonly" role="note"><${Icon} name="eye" size=${16} />${t("tasks.readOnly")}</p>`}
     ${body}
@@ -114,7 +121,8 @@ export function TaskBoardTab({ lease }) {
       onClose=${closeCard} onOpen=${openCard} reloadBoard=${reload} />` : null}
     ${dialog && dialog.kind === "main" ? html`<${CreateMainDialog} projects=${projects} project=${dialog.project} onClose=${() => setDialog(null)}
       onCreated=${(id) => { if (!lease.current()) return; setDialog(null); reload(); openCard(id); }} />` : null}
-    ${dialog && dialog.kind === "project" ? html`<${ProjectDialog} project=${dialog.project} onClose=${() => setDialog(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)}
       onSaved=${(p) => { if (!lease.current()) return; setDialog(null); reload(); if (!dialog.project) setAt(p.id); }} />` : null}
     <${AskHost} />
   </div>`;
@@ -122,7 +130,12 @@ export function TaskBoardTab({ lease }) {
 
 // ── Home: the projects, and what waits for the person ─────────
 
-function Home({ cards, projects, stats, writable, onOpenProject, onOpen, onDialog, reload }) {
+/** The board's Instance button (taskhall's): the fleet's instances and what each works on. */
+function InstancesButton({ onClick }) {
+  return html`<button type="button" class="btn" title=${t("tasks.instancesTip")} onClick=${onClick}><${Icon} name="team" size=${16} />${t("tasks.instances")}</button>`;
+}
+
+function Home({ cards, projects, stats, writable, onOpenProject, onOpen, onDialog, onInstances, reload }) {
   const [showArchived, setShowArchived] = useState(false);
   const active = projects.filter((p) => !p.archived);
   const archived = projects.filter((p) => p.archived);
@@ -131,6 +144,7 @@ function Home({ cards, projects, stats, writable, onOpenProject, onOpen, onDialo
     <div class="list-head tb-head"><span>${t("tasks.projects")}</span>
       <span class="tb-grow"></span>
       <${SearchBox} onOpen=${onOpen} />
+      <${InstancesButton} onClick=${onInstances} />
       ${writable ? html`<button type="button" class="btn btn-primary" onClick=${() => onDialog({ kind: "project", project: null })}><${Icon} name="plus" size=${16} />${t("tasks.newProject")}</button>` : null}</div>
     <${Waiting} cards=${cards} writable=${writable} onOpen=${onOpen} reload=${reload} />
     ${active.length || loose ? html`<div class="tb-projects">
@@ -161,6 +175,7 @@ function ProjectTile({ project, stats, onOpen, onDialog, reload }) {
         ${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}
         ${stats.lastActivity ? html`<span class="muted">${t("tasks.lastActivity", relTime(stats.lastActivity))}</span>` : null}
+        ${project && project.leadInstance ? html`<span class="muted tb-project-lead-chip">${t("tasks.projectLeadChip", project.leadInstance)}</span>` : null}
       </span>
     </button>
     ${project && onDialog ? html`<${Menu} cls="tb-project-menu" items=${[
@@ -233,7 +248,7 @@ function SearchBox({ onOpen }) {
     if (e.key === "ArrowDown") { e.preventDefault(); setActive((i) => (i + 1) % results.length); }
     else if (e.key === "ArrowUp") { e.preventDefault(); setActive((i) => (i - 1 + results.length) % results.length); }
     else if (e.key === "Enter") { e.preventDefault(); pick(results[active].card.id); }
-    else if (e.key === "Escape") { e.stopPropagation(); setQ(""); }
+    else if (e.key === "Escape") { e.stopPropagation(); recordEdit(e.target); setQ(""); }       // #2342: Ctrl+Z brings it back
   }
   return html`<div class="tb-search">
     <${Icon} name="search" size=${16} cls="tb-search-icon" />
@@ -251,7 +266,7 @@ function SearchBox({ onOpen }) {
 
 // ── A project's board ─────────────────────────────────────
 
-function ProjectBoard({ project, cards, stats: statsOf, flashed, allDone, writable, onAllDone, onBack, onOpen, onCreate, 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({});
@@ -356,6 +371,7 @@ function ProjectBoard({ project, cards, stats: statsOf, flashed, allDone, writab
         <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")} />`
@@ -442,9 +458,9 @@ function Tile({ card, dragging, flash, subs = [], expanded, writable, onToggleSu
       <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}
     <div class="tb-tile-foot">
-      ${now ? html`<span class="tb-who" title=${t("tasks.ownerTip", card.assignee || t("tasks.nobody"))}>${workers.map((w) => w || t("tasks.nobody")).join(", ")}</span>`
+      ${now ? html`<span class="tb-people">${workers.map((w) => html`<${Who} key=${w} name=${w} empty=${t("tasks.nobody")} title=${t("tasks.ownerTip", card.assignee || t("tasks.nobody"))} />`)}</span>`
         : hasSubs && card.status === "review" ? html`<span class="tb-who tb-now-label st-review" title=${t("tasks.ownerTip", card.assignee || t("tasks.nobody"))}>${t("tasks.review")}</span>`
-        : html`<span class="tb-who">${card.assignee || "—"}</span>`}
+        : html`<${Who} name=${card.assignee} empty=${t("tasks.nobody")} />`}
       <span class="tb-tile-stats">
         ${card.acceptance.length ? html`<span class=${accepted === card.acceptance.length ? "all" : ""} title=${t(card.kind === "main" ? "tasks.definition" : "tasks.acceptance")}><${Icon} name="check" size=${13} />${accepted}/${card.acceptance.length}</span>` : null}
         ${card.unmetDeps.length ? html`<span title=${t("tasks.waitsFor", card.unmetDeps.join(", "))}><${Icon} name="clock" size=${13} /></span>` : null}
@@ -495,14 +511,27 @@ function CreateMainDialog({ projects, project, onClose, onCreated }) {
     </fieldset></form></${Dialog}>`;
 }
 
-function ProjectDialog({ project, onClose, onSaved }) {
-  const [f, setF] = useState({ name: project ? project.name : "", description: project ? project.description : "" });
+/**
+ * #2355 review: what an edit of a project sends — its fields, and its lead only when it changed (an unchanged retired
+ * lead would be refused on an unrelated rename); "" is no lead.
+ */
+export function projectPatch(was, f) {
+  const { leadInstance, ...rest } = f;
+  return leadInstance !== (was || "") ? { ...rest, leadInstance: leadInstance || null } : rest;
+}
+
+function ProjectDialog({ project, leads = [], onClose, onSaved }) {
+  const was = (project && project.leadInstance) || "";
+  const [f, setF] = useState({ name: project ? project.name : "", description: project ? project.description : "", leadInstance: was });
+  // #2352: a lead no longer in the fleet stays listed (marked) until it is changed; #2355 review: only the server's names.
+  const leadGone = !!f.leadInstance && !leads.includes(f.leadInstance);
   const [busy, setBusy] = useState(false);
   async function submit() {
     if (!f.name.trim()) return;
     setBusy(true);
     try {
-      const r = project ? await boardApi.updateProject(project.id, f) : await boardApi.createProject(f.name, f.description);
+      const body = projectPatch(was, f);
+      const r = project ? await boardApi.updateProject(project.id, body) : await boardApi.createProject(f.name, f.description, f.leadInstance || null);
       toast(t(project ? "tasks.projectSaved" : "tasks.projectCreated"));
       onSaved(r.project);
     } catch (err) { toast(errorText(err), false); setBusy(false); }
@@ -513,6 +542,11 @@ function ProjectDialog({ project, onClose, onSaved }) {
     <form class="form" onSubmit=${(e) => { e.preventDefault(); submit(); }}><fieldset class="form" disabled=${busy}>
       <label class="field"><span>${t("tasks.projectName")} *</span><input value=${f.name} maxlength="60" onInput=${(e) => { const v = e.target.value; setF((c) => ({ ...c, name: v })); }} required /></label>
       <label class="field"><span>${t("tasks.projectDesc")}</span><input value=${f.description} maxlength="300" onInput=${(e) => { const v = e.target.value; setF((c) => ({ ...c, description: v })); }} /></label>
+      <label class="field"><span>${t("tasks.projectLead")}</span><select class="tb-project-lead" value=${f.leadInstance} onChange=${(e) => { const v = e.target.value; setF((c) => ({ ...c, leadInstance: v })); }}>
+        <option value="">${t("tasks.projectLeadNone")}</option>
+        ${leadGone ? html`<option value=${f.leadInstance}>${t("tasks.projectLeadGone", f.leadInstance)}</option>` : null}
+        ${leads.map((n) => html`<option key=${n} value=${n}>${n}</option>`)}</select>
+        <small class="note">${t("tasks.projectLeadHint")}</small></label>
     </fieldset></form></${Dialog}>`;
 }
 

package/dist/ui/image-lightbox.js

@@ -5,10 +5,14 @@
 //
 // The native <dialog> opened with showModal(): the browser traps focus and makes the rest inert. No style attribute
 // (#1300): classes only. Only a file URL the chat itself rendered (/ui/file/<32 hex>) is ever shown.
+//
+// #2333: zoom and pan (image-zoom.js). The toolbar has −, the level (it toggles fit ↔ 100%), + and Fit width; the keys
+// + / − / 0 (fit) / 1 (100%) / W (fit width). Each image opens fitted; stepping to another fits it again.
 import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
 import { createStore, useStore } from "/assets/app-store.js";
 import { Icon } from "/assets/ui-icons.js";
+import { createZoom, STEP } from "./image-zoom.js";
 
 const FILE_URL = /^\/ui\/file\/[0-9a-f]{32}$/;
 /** What is shown: { items: [{ src, name }], index, opener } or null. One per page; the chat that shows it owns it. */
@@ -54,6 +58,10 @@ function ImageLightbox({ items, index, opener, onClose }) {
   const [at, setAt] = useState(index);
   const ref = useRef(null);
   const close = useRef(null);
+  const stage = useRef(null);
+  const img = useRef(null);
+  const zoom = useRef(null);
+  const [level, setLevel] = useState(null);   // { scale, fit, mode } once the picture has loaded
   const item = items[at] || items[0];
   const many = items.length > 1;
   const step = (d) => setAt((n) => (n + d + items.length) % items.length);
@@ -69,6 +77,19 @@ function ImageLightbox({ items, index, opener, onClose }) {
       if (opener && typeof opener.focus === "function" && document.contains?.(opener)) opener.focus();
     };
   }, []);
+  useEffect(() => {
+    if (!stage.current || !img.current) return undefined;
+    const z = createZoom({ stage: stage.current, img: img.current, onChange: setLevel });
+    zoom.current = z;
+    return () => { z.destroy(); zoom.current = null; };
+  }, []);
+  // Another image: hidden until it has loaded and been fitted (its load resets the zoom).
+  const first = useRef(true);
+  useEffect(() => {
+    if (first.current) { first.current = false; return; }
+    if (img.current) img.current.classList.remove("lb-ready");
+    setLevel(null);
+  }, [at]);
   useEffect(() => {
     const d = ref.current;
     if (!d) return undefined;
@@ -80,6 +101,12 @@ function ImageLightbox({ items, index, opener, onClose }) {
     // The dark area (the dialog itself, or the stage around the image) closes it; the image and the controls do not.
     const onClick = (e) => { if (e.target === d || (e.target && e.target.classList && e.target.classList.contains("lb-stage"))) onClose(); };
     const onKey = (e) => {
+      const z = zoom.current;
+      if (z && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const act = { "+": () => z.zoomBy(STEP), "=": () => z.zoomBy(STEP), "-": () => z.zoomBy(1 / STEP), "_": () => z.zoomBy(1 / STEP),
+          "0": () => z.fit(), "1": () => z.actual(), w: () => z.fitWidth(), W: () => z.fitWidth() }[e.key];
+        if (act) { e.preventDefault(); act(); return; }
+      }
       if (!many) return;
       if (e.key === "ArrowRight") { e.preventDefault(); step(1); } else if (e.key === "ArrowLeft") { e.preventDefault(); step(-1); }
     };
@@ -90,14 +117,25 @@ function ImageLightbox({ items, index, opener, onClose }) {
     return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("close", onNativeClose); d.removeEventListener("click", onClick); d.removeEventListener("keydown", onKey); };
   }, [onClose, many, items.length]);
   const label = item.name ? t("chat.lbLabel", item.name) : t("chat.lbLabelNoName");
+  const pct = level ? Math.round(level.scale * 100) : null;
   return html`<dialog data-trust="lightbox" ref=${ref} class="lb" role="dialog" aria-modal="true" aria-label=${label}>
     <div class="lb-bar">
       <span class="lb-name" title=${item.name}>${item.name}</span>
       ${many ? html`<span class="lb-count">${t("chat.lbCount", at + 1, items.length)}</span>` : null}
+      <span class="lb-zoom" role="group">
+        <button type="button" class="icon-btn lb-zoom-out" disabled=${!level} aria-label=${t("chat.lbZoomOut")} title=${t("chat.lbZoomOut")}
+          onClick=${() => zoom.current && zoom.current.zoomBy(1 / STEP)}><${Icon} name="minus" /></button>
+        <button type="button" class="btn btn-sm lb-level" disabled=${!level} aria-label=${t("chat.lbZoomLevel", pct ?? "")} title=${t("chat.lbZoomLevel", pct ?? "")}
+          onClick=${() => zoom.current && zoom.current.toggle()}>${pct === null ? "…" : `${pct}%`}</button>
+        <button type="button" class="icon-btn lb-zoom-in" disabled=${!level} aria-label=${t("chat.lbZoomIn")} title=${t("chat.lbZoomIn")}
+          onClick=${() => zoom.current && zoom.current.zoomBy(STEP)}><${Icon} name="plus" /></button>
+        <button type="button" class=${`icon-btn lb-fit-width${level && level.mode === "width" ? " on" : ""}`} disabled=${!level} aria-pressed=${level && level.mode === "width" ? "true" : "false"}
+          aria-label=${t("chat.lbFitWidth")} title=${t("chat.lbFitWidth")} onClick=${() => zoom.current && zoom.current.fitWidth()}><${Icon} name="fitwidth" /></button>
+      </span>
       <a class="btn btn-sm lb-orig" href=${item.src} target="_blank" rel="noopener noreferrer"><${Icon} name="external" size=${14} /><span class="lbl">${t("chat.lbOpenOriginal")}</span></a>
       <button type="button" class="icon-btn lb-close" ref=${close} aria-label=${t("chat.lbClose")} title=${t("chat.lbClose")} onClick=${onClose}><${Icon} name="close" /></button>
     </div>
-    <div class="lb-stage"><img class="lb-img" src=${item.src} alt=${item.name} /></div>
+    <div class="lb-stage" ref=${stage}><img class="lb-img" ref=${img} src=${item.src} alt=${item.name} draggable=${false} /></div>
     ${many ? html`<button type="button" class="icon-btn lb-nav lb-prev" aria-label=${t("chat.lbPrev")} title=${t("chat.lbPrev")} onClick=${() => step(-1)}><${Icon} name="back" /></button>
       <button type="button" class="icon-btn lb-nav lb-next" aria-label=${t("chat.lbNext")} title=${t("chat.lbNext")} onClick=${() => step(1)}><${Icon} name="forward" /></button>` : null}
   </dialog>`;

package/dist/ui/image-zoom.js

@@ -0,0 +1,242 @@
+// #2333: zoom and pan for the chat image lightbox. The math is pure (a view box, the image's natural size, a scale and
+// an offset) and unit-tested; `createZoom` applies it to one <img> in one stage as a CSSOM transform — translate then
+// scale from the top-left corner, so the browser never re-decodes the picture, and no style attribute is written
+// (#1300: the CSSOM is not governed by the page's style-src).
+//
+// Gestures: wheel and ctrl/⌘+wheel (a trackpad pinch arrives as ctrl+wheel) zoom around the cursor; once the image is
+// larger than the view a plain wheel scrolls it instead, so a tall sheet reads like a page. A mouse click on the image
+// toggles fit ↔ 100% at that point; a drag pans. Touch: two fingers pinch (and pan), one finger pans, a double tap
+// toggles fit ↔ 100%. A gesture that moved is never also a click (the lightbox closes on a click on the dark area).
+
+/** The largest zoom: 8× the picture's own pixels. */
+export const MAX_SCALE = 8;
+/** One step of +/−, the keys or the toolbar. */
+export const STEP = 1.25;
+/** A pointer that moved less than this (CSS px) clicked or tapped; more, it dragged. */
+export const SLOP = 4;
+/** Two taps within this long and this close are a double tap. */
+export const DOUBLE_TAP_MS = 300;
+export const DOUBLE_TAP_PX = 24;
+
+/** The whole picture in the view, never enlarged. view = { x, y, w, h } (stage coordinates); img = { w, h } natural. */
+export function fitScale(view, img) {
+  return Math.min(1, view.w / img.w, view.h / img.h);
+}
+/** The picture's width across the view, never enlarged: a tall sheet then scrolls. */
+export function fitWidthScale(view, img) {
+  return Math.min(1, view.w / img.w);
+}
+/** The scales a gesture may reach: down to fit (or 100%, for a picture smaller than the view), up to MAX_SCALE. */
+export function scaleLimits(view, img) {
+  return { min: fitScale(view, img), max: Math.max(MAX_SCALE, fitScale(view, img)) };
+}
+
+/**
+ * Keep the picture in view: an axis it does not fill is centred; an axis it overflows has no gap at either edge.
+ * z = { s, tx, ty } (tx, ty: where the picture's top-left corner is, in stage coordinates). Returns a new z.
+ */
+export function clampPan(z, view, img) {
+  const axis = (t, size, start, len) => size <= len ? start + (len - size) / 2 : Math.min(start, Math.max(start + len - size, t));
+  return { s: z.s, tx: axis(z.tx, img.w * z.s, view.x, view.w), ty: axis(z.ty, img.h * z.s, view.y, view.h) };
+}
+
+/** Scale to `s` (within the limits) keeping the picture point under (px, py) where it is. */
+export function zoomAt(z, s, px, py, view, img) {
+  const { min, max } = scaleLimits(view, img);
+  const to = Math.min(max, Math.max(min, s));
+  const k = to / z.s;
+  return clampPan({ s: to, tx: px - (px - z.tx) * k, ty: py - (py - z.ty) * k }, view, img);
+}
+
+/** Fit: the whole picture, centred. */
+export function fitView(view, img) {
+  return clampPan({ s: fitScale(view, img), tx: 0, ty: 0 }, view, img);
+}
+/** Fit width: the picture across the view, from its top. */
+export function fitWidthView(view, img) {
+  return clampPan({ s: fitWidthScale(view, img), tx: 0, ty: view.y }, view, img);
+}
+/** Whether the picture is larger than the view on either axis (then a plain wheel scrolls it, and a drag pans it). */
+export function overflows(z, view, img) {
+  return img.w * z.s > view.w + 0.5 || img.h * z.s > view.h + 0.5;
+}
+
+/** Wheel distance in CSS px (a line is 16, a page the view's height). */
+function wheelPx(e, view) {
+  const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? view.h : 1;
+  return { dx: (e.deltaX || 0) * unit, dy: (e.deltaY || 0) * unit };
+}
+
+/**
+ * Drive one picture in one stage. `onChange({ scale, fit, mode })` after every change (mode: "fit" | "width" | "free").
+ * Returns { reset, fit, fitWidth, actual, zoomBy, toggle, destroy }. Nothing happens until the picture has loaded.
+ */
+export function createZoom({ stage, img, onChange }) {
+  let nat = null;            // { w, h } once loaded
+  let z = { s: 1, tx: 0, ty: 0 };
+  let mode = "fit";
+  const pointers = new Map(); // pointerId → { x, y }
+  let gesture = null;        // { kind: "drag" | "pinch", ... }
+  let moved = false;         // the gesture now ending moved: its click is not a click
+  let lastTap = null;        // { t, x, y } of the last touch tap
+  let lastType = "mouse";    // the pointer type of the last press: a touch tap's click never toggles (double tap does);
+                             // a mouse or a pen click does, and neither runs the double-tap logic
+
+  const view = () => {
+    const r = stage.getBoundingClientRect();
+    const cs = typeof getComputedStyle === "function" ? getComputedStyle(stage) : null;
+    const px = (k) => (cs ? parseFloat(cs[k]) || 0 : 0);
+    const x = px("paddingLeft"), y = px("paddingTop");
+    return { x, y, w: Math.max(1, r.width - x - px("paddingRight")), h: Math.max(1, r.height - y - px("paddingBottom")) };
+  };
+  const at = (e) => { const r = stage.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; };
+  const apply = () => {
+    img.style.transform = `translate(${z.tx}px, ${z.ty}px) scale(${z.s})`;
+    stage.classList.toggle("lb-zoomed", !!nat && overflows(z, view(), nat));
+    if (onChange) onChange({ scale: z.s, fit: nat ? fitScale(view(), nat) : 1, mode });
+  };
+  const set = (next, m = "free") => { if (!nat) return; z = next; mode = m; apply(); };
+
+  const api = {
+    /** A new picture (or the first): read its size and fit it. */
+    reset() {
+      nat = img.naturalWidth > 0 && img.naturalHeight > 0 ? { w: img.naturalWidth, h: img.naturalHeight } : null;
+      img.classList.toggle("lb-ready", !!nat);
+      img.classList.remove("lb-err");
+      if (nat) set(fitView(view(), nat), "fit");
+    },
+    fit() { if (nat) set(fitView(view(), nat), "fit"); },
+    fitWidth() { if (nat) set(fitWidthView(view(), nat), "width"); },
+    /** 100% at a point (default: the middle of the view). */
+    actual(px, py) {
+      if (!nat) return;
+      const v = view();
+      set(zoomAt(z, 1, px ?? v.x + v.w / 2, py ?? v.y + v.h / 2, v, nat));
+    },
+    zoomBy(factor, px, py) {
+      if (!nat) return;
+      const v = view();
+      set(zoomAt(z, z.s * factor, px ?? v.x + v.w / 2, py ?? v.y + v.h / 2, v, nat));
+    },
+    /** Fit ↔ 100%: anything but fit goes back to fit. */
+    toggle(px, py) {
+      if (!nat) return;
+      if (mode === "fit" && Math.abs(z.s - 1) > 1e-6) api.actual(px, py); else api.fit();
+    },
+    destroy() {
+      stage.removeEventListener("wheel", onWheel);
+      stage.removeEventListener("pointerdown", onDown);
+      stage.removeEventListener("pointermove", onMove);
+      stage.removeEventListener("pointerup", onUp);
+      stage.removeEventListener("pointercancel", onUp);
+      stage.removeEventListener("click", onClick, true);
+      img.removeEventListener("load", api.reset);
+      img.removeEventListener("error", onError);
+      if (typeof window !== "undefined") window.removeEventListener("resize", onResize);
+    },
+  };
+
+  function onWheel(e) {
+    if (!nat) return;
+    e.preventDefault();
+    const v = view();
+    const { dx, dy } = wheelPx(e, v);
+    if (e.ctrlKey || e.metaKey || !overflows(z, v, nat)) {
+      const p = at(e);
+      // A pinch on a trackpad sends small ctrl+wheel steps; a wheel notch is ~100 px.
+      set(zoomAt(z, z.s * Math.exp(-dy * (e.ctrlKey ? 0.01 : 0.002)), p.x, p.y, v, nat));
+    } else {
+      // Shift+wheel on a mouse scrolls sideways.
+      const sx = e.shiftKey && !dx ? dy : dx, sy = e.shiftKey && !dx ? 0 : dy;
+      set(clampPan({ s: z.s, tx: z.tx - sx, ty: z.ty - sy }, v, nat), mode === "width" ? "width" : "free");
+    }
+  }
+  function onDown(e) {
+    if (!nat || (e.pointerType === "mouse" && e.button !== 0)) return;
+    lastType = e.pointerType || "mouse";
+    pointers.set(e.pointerId, at(e));
+    // No pointer capture yet: it would retarget the click to the stage, and a click on the picture is not one on the
+    // dark area. Captured only once the pointer moves (capture()).
+    if (pointers.size === 1) { moved = false; gesture = { kind: "drag", from: at(e), z0: z }; }
+    else if (pointers.size === 2) {
+      const [a, b] = [...pointers.values()];
+      gesture = { kind: "pinch", d0: Math.hypot(b.x - a.x, b.y - a.y) || 1, m0: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }, z0: z };
+      moved = true;           // two fingers: never a tap
+      for (const id of pointers.keys()) capture(id);
+    }
+  }
+  function onMove(e) {
+    if (!gesture || !pointers.has(e.pointerId)) return;
+    pointers.set(e.pointerId, at(e));
+    const v = view();
+    if (gesture.kind === "pinch" && pointers.size >= 2) {
+      const [a, b] = [...pointers.values()];
+      const m = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+      const { z0, m0, d0 } = gesture;
+      const s = z0.s * (Math.hypot(b.x - a.x, b.y - a.y) / d0);
+      // The picture point under the fingers' first midpoint follows the midpoint (zoom and pan in one).
+      const zoomed = zoomAt(z0, s, m0.x, m0.y, v, nat);
+      set(clampPan({ s: zoomed.s, tx: zoomed.tx + (m.x - m0.x), ty: zoomed.ty + (m.y - m0.y) }, v, nat));
+    } else if (gesture.kind === "drag") {
+      const p = pointers.get(e.pointerId);
+      const dx = p.x - gesture.from.x, dy = p.y - gesture.from.y;
+      if (!moved && Math.hypot(dx, dy) < SLOP) return;
+      if (!moved) capture(e.pointerId);
+      moved = true;
+      if (overflows(gesture.z0, v, nat)) set(clampPan({ s: gesture.z0.s, tx: gesture.z0.tx + dx, ty: gesture.z0.ty + dy }, v, nat), mode === "width" ? "width" : "free");
+    }
+  }
+  function onUp(e) {
+    if (!pointers.has(e.pointerId)) return;
+    const p = pointers.get(e.pointerId);
+    pointers.delete(e.pointerId);
+    if (pointers.size === 1 && gesture && gesture.kind === "pinch") {
+      // One finger left after a pinch: it pans on from here.
+      const [rest] = [...pointers.values()];
+      gesture = { kind: "drag", from: rest, z0: z };
+      return;
+    }
+    if (pointers.size > 0) return;
+    const tapped = !moved && gesture && gesture.kind === "drag";
+    gesture = null;
+    // Only a finger double-taps: a mouse or a pen clicks (onClick toggles), so a pen tap must not also count here.
+    if (!tapped || e.pointerType !== "touch") return;
+    // A touch tap: a second one soon and near is a double tap — fit ↔ 100% there.
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+    if (lastTap && now - lastTap.t < DOUBLE_TAP_MS && Math.hypot(p.x - lastTap.x, p.y - lastTap.y) < DOUBLE_TAP_PX) {
+      lastTap = null;
+      moved = true;           // its click neither closes nor toggles again
+      api.toggle(p.x, p.y);
+    } else lastTap = { t: now, x: p.x, y: p.y };
+  }
+  /** A drag or pinch keeps its pointers even off the stage. */
+  function capture(id) {
+    if (stage.setPointerCapture) { try { stage.setPointerCapture(id); } catch { /* already gone */ } }
+  }
+  // Capture phase: before the lightbox's own click (which closes on the dark area) can see it. A click that ended a
+  // drag or a double tap is swallowed; a mouse click on the picture toggles fit ↔ 100% there. A touch tap's click on
+  // the picture does nothing (a single tap waits for a double tap); on the dark area it still closes.
+  function onClick(e) {
+    if (moved) { moved = false; e.stopPropagation(); e.preventDefault(); return; }
+    if (e.target === img && nat && lastType !== "touch") {
+      const p = at(e);
+      e.stopPropagation();
+      api.toggle(p.x, p.y);
+    }
+  }
+  // A picture that does not load is shown as the browser shows a broken one, where the old lightbox put it.
+  const onError = () => { nat = null; img.classList.add("lb-err"); img.classList.remove("lb-ready"); if (onChange) onChange(null); };
+  const onResize = () => { if (!nat) return; if (mode === "fit") api.fit(); else if (mode === "width") api.fitWidth(); else set(clampPan(z, view(), nat)); };
+
+  stage.addEventListener("wheel", onWheel, { passive: false });
+  stage.addEventListener("pointerdown", onDown);
+  stage.addEventListener("pointermove", onMove);
+  stage.addEventListener("pointerup", onUp);
+  stage.addEventListener("pointercancel", onUp);
+  stage.addEventListener("click", onClick, true);
+  img.addEventListener("load", api.reset);
+  img.addEventListener("error", onError);
+  if (typeof window !== "undefined") window.addEventListener("resize", onResize);
+  if (img.complete) api.reset();
+  return api;
+}