samagotchi 0.30.0 → 0.32.0

data/lib/samagotchi/web/public/context_chips.js

@@ -0,0 +1,285 @@
+// The session bar's attached context (chi context): a chip per source the
+// open session sees (name · age; a dot for a change the agent hasn't read,
+// red for a failing refresh), and a popover with its summary, hint link,
+// text and detach. The chips refresh when a context note arrives in the
+// stream and when the page gets focus (no event of their own), and their
+// ages tick every minute. A "+ URL" chip (when an installed bundle's
+// provider can attach one: GET …/context's can_add_url) opens a form that
+// attaches a URL (a GitHub PR); the web never adds a command.
+
+// "now", "3m", "2h", "4d" since an ISO time; "" for none.
+export function ageText(iso, now = Date.now()) {
+  const at = Date.parse(iso || "");
+  if (Number.isNaN(at)) return "";
+  const s = Math.max(0, Math.round((now - at) / 1000));
+  if (s < 60) return "now";
+  if (s < 3600) return `${Math.floor(s / 60)}m`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h`;
+  return `${Math.floor(s / 86400)}d`;
+}
+
+// A hint the popover may link to: http(s) only.
+export function hintUrl(hint) {
+  const text = String(hint || "").trim();
+  return /^https?:\/\/\S+$/i.test(text) ? text : null;
+}
+
+// GET …/context's rows as chips: the muted ones left out. state: "error"
+// (the last refresh failed), "unread" (a text the agent hasn't read),
+// "empty" (no text yet) or "ok".
+export function chipModel(rows, now = Date.now()) {
+  return (rows || []).filter((row) => row && !row.muted).map((row) => {
+    const state = row.error ? "error" : !row.has_text ? "empty" : row.unread ? "unread" : "ok";
+    const age = ageText(row.fetched_at, now);
+    const why = { error: `last refresh failed: ${row.error}`, unread: "changed; the agent hasn't read it yet",
+                  empty: "no text yet", ok: "the agent has read the latest" }[state];
+    const title = [row.summary, why].filter(Boolean).join(" · ");
+    return { name: row.name, label: age ? `${row.name} · ${age}` : row.name, state, title };
+  });
+}
+
+// addUrl: end with the "+ URL" chip.
+export function chipsHtml(chips, escapeHtml, { addUrl = false } = {}) {
+  return chips.map((chip) => `<button type="button" class="ctx-chip ${chip.state}" data-name="${escapeHtml(chip.name)}" ` +
+    `title="${escapeHtml(chip.title)}" aria-haspopup="dialog">` +
+    `${chip.state === "unread" ? '<span class="ctx-dot" aria-hidden="true"></span>' : ""}${escapeHtml(chip.label)}</button>`).join("") +
+    (addUrl ? '<button type="button" class="ctx-chip ctx-add" data-act="add" title="Attach a URL (a GitHub PR) the agent can read and hears about when it changes" aria-haspopup="dialog">+ URL</button>' : "");
+}
+
+// The "+ URL" popover: the URL, an optional why, Attach; +url+ and +error+
+// after a try that failed.
+export function addFormHtml(escapeHtml, { url = "", error = null } = {}) {
+  return `<form class="ctx-add-form"><div class="ctx-pop-head"><strong>Attach a URL</strong>` +
+    `<button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div>` +
+    `<div class="ctx-pop-meta">A link an installed bundle knows (github-pr: a pull request). The agent gets a note when it changes.</div>` +
+    `<input class="ctx-add-input" name="url" type="url" inputmode="url" placeholder="https://github.com/owner/repo/pull/123" value="${escapeHtml(url)}" required autocomplete="off">` +
+    `<input class="ctx-add-input" name="why" type="text" placeholder="why (optional)" maxlength="300" autocomplete="off">` +
+    (error ? `<div class="ctx-pop-error" role="alert">${escapeHtml(error)}</div>` : "") +
+    `<div class="ctx-pop-actions"><button type="submit" class="ctx-add-submit">Attach</button></div></form>`;
+}
+
+// The popover's inside for one row (GET …/context's).
+export function popoverHtml(row, escapeHtml, now = Date.now()) {
+  const kind = row.kind === "cmd" ? `runs every ${row.every_seconds ? `${row.every_seconds}s` : "few minutes"}` : "pushed";
+  const url = hintUrl(row.hint);
+  const hint = url
+    ? `<a class="ctx-pop-hint" href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>`
+    : (row.hint ? `<div class="ctx-pop-hint">${escapeHtml(row.hint)}</div>` : "");
+  const age = ageText(row.fetched_at, now);
+  const meta = [age ? (age === "now" ? "fetched just now" : `fetched ${age} ago`) : "no text yet",
+                row.unread ? "the agent hasn't read this change" : (row.has_text ? "the agent has read it" : "")]
+    .filter(Boolean).join(" · ");
+  const detach = row.scope === "project" ? "mute here" : "detach";
+  const detachTitle = row.scope === "project"
+    ? "The project's source: this session stops seeing it (chi context unmute brings it back)"
+    : "Remove it from this session";
+  return `<div class="ctx-pop-head"><strong>${escapeHtml(row.name)}</strong>` +
+    `<span class="ctx-pop-kind">${escapeHtml(row.scope)} · ${escapeHtml(kind)}</span>` +
+    `<button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div>` +
+    (row.why ? `<div class="ctx-pop-why">${escapeHtml(row.why)}</div>` : "") +
+    hint +
+    (row.summary ? `<div class="ctx-pop-summary">${escapeHtml(row.summary)}</div>` : "") +
+    `<div class="ctx-pop-meta">${escapeHtml(meta)}</div>` +
+    (row.error ? `<div class="ctx-pop-error">last refresh failed: ${escapeHtml(row.error)}</div>` : "") +
+    `<pre class="ctx-pop-text" hidden></pre>` +
+    `<div class="ctx-pop-actions">` +
+    (row.has_text ? `<button type="button" data-act="view">view text</button>` : "") +
+    `<button type="button" class="ctx-pop-detach" data-act="detach" title="${escapeHtml(detachTitle)}">${detach}</button></div>`;
+}
+
+// The chips for the session bar. el: #contextChips; api: {list(id),
+// show(id, name), detach(id, name), add(id, {url, why})}; escapeHtml;
+// toast(text).
+export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc = document, win = window }) {
+  let sessionId = null;
+  let rows = [];
+  let canAdd = false;
+  let openName = null;
+  let loadSeq = 0;
+  const pop = doc.createElement("div");
+  pop.id = "contextPopover";
+  pop.className = "ctx-popover";
+  pop.setAttribute("role", "dialog");
+  pop.hidden = true;
+  doc.body.appendChild(pop);
+
+  // openName ADD: the "+ URL" form is open.
+  const ADD = "\u0000add";
+
+  function render() {
+    const chips = chipModel(rows);
+    el.innerHTML = chipsHtml(chips, escapeHtml, { addUrl: canAdd });
+    el.hidden = chips.length === 0 && !canAdd;
+    // The "+ URL" chip alone sits inline, not on a row of its own.
+    el.classList.toggle("only-add", chips.length === 0 && canAdd);
+    if (openName === ADD) {
+      if (canAdd) el.querySelector(".ctx-add")?.classList.add("open");
+      else close();
+    } else if (openName && !chips.some((chip) => chip.name === openName)) close();
+    else if (openName) el.querySelector(`.ctx-chip[data-name="${openName}"]`)?.classList.add("open");
+  }
+
+  async function refresh() {
+    const id = sessionId;
+    if (!id) return;
+    const seq = ++loadSeq;
+    try {
+      const data = await api.list(id);
+      if (seq !== loadSeq || id !== sessionId) return;
+      rows = data.sources || [];
+      canAdd = data.can_add_url === true;
+    } catch {
+      // A session the server doesn't know (gone, or an older chi web): no chips.
+      if (seq !== loadSeq || id !== sessionId) return;
+      rows = [];
+      canAdd = false;
+    }
+    render();
+    if (openName && openName !== ADD) {
+      const row = rows.find((r) => r.name === openName);
+      if (row && pop.querySelector(".ctx-pop-text")?.hidden !== false) fill(row);
+    }
+  }
+
+  function load(id) {
+    sessionId = id;
+    rows = [];
+    canAdd = false;
+    close();
+    render();
+    return refresh();
+  }
+
+  function clear() {
+    sessionId = null;
+    rows = [];
+    canAdd = false;
+    close();
+    render();
+  }
+
+  function fill(row) {
+    pop.innerHTML = popoverHtml(row, escapeHtml);
+  }
+
+  // Above the chip, inside the window with a 16px gutter.
+  function place(chip) {
+    const rect = chip.getBoundingClientRect();
+    const width = Math.min(380, win.innerWidth - 32);
+    pop.style.width = `${width}px`;
+    pop.style.left = `${Math.max(16, Math.min(rect.left, win.innerWidth - width - 16))}px`;
+    pop.style.bottom = `${Math.max(16, win.innerHeight - rect.top + 8)}px`;
+  }
+
+  function open(name, chip) {
+    const row = rows.find((r) => r.name === name);
+    if (!row) return;
+    openName = name;
+    fill(row);
+    pop.hidden = false;
+    place(chip);
+    el.querySelectorAll(".ctx-chip").forEach((c) => c.classList.toggle("open", c.dataset.name === name));
+  }
+
+  function openAdd(chip, state = {}) {
+    openName = ADD;
+    pop.innerHTML = addFormHtml(escapeHtml, state);
+    pop.hidden = false;
+    place(chip);
+    el.querySelectorAll(".ctx-chip").forEach((c) => c.classList.toggle("open", c === chip));
+    pop.querySelector('input[name="url"]')?.focus();
+  }
+
+  async function submitAdd(form) {
+    const id = sessionId;
+    const url = form.elements.url.value.trim();
+    const why = form.elements.why.value.trim();
+    if (!id || !url) return;
+    const button = form.querySelector(".ctx-add-submit");
+    if (button) button.disabled = true;
+    try {
+      const data = await api.add(id, { url, why: why || undefined });
+      if (id !== sessionId) return;
+      close();
+      await refresh();
+      toast(`Attached ${data.name}: the agent gets a note before your next message`);
+    } catch (e) {
+      if (id !== sessionId || openName !== ADD) return;
+      const chip = el.querySelector(".ctx-add");
+      if (chip) openAdd(chip, { url, error: String(e.message).replace(/ \(\d+\)$/, "") });
+    }
+  }
+
+  function close() {
+    openName = null;
+    pop.hidden = true;
+    el.querySelectorAll(".ctx-chip.open").forEach((c) => c.classList.remove("open"));
+  }
+
+  async function viewText() {
+    const name = openName;
+    const pre = pop.querySelector(".ctx-pop-text");
+    if (!name || !pre) return;
+    try {
+      const data = await api.show(sessionId, name);
+      if (name !== openName) return;
+      pre.textContent = data.text || "";
+      pre.hidden = false;
+      pop.querySelector('[data-act="view"]')?.remove();
+    } catch (e) {
+      toast(`Can't read ${name}: ${String(e.message).replace(/ \(\d+\)$/, "")}`);
+    }
+  }
+
+  async function detach() {
+    const row = rows.find((r) => r.name === openName);
+    if (!row) return;
+    const ask = row.scope === "project"
+      ? `Mute ${row.name} for this session? It is the project's: other sessions keep it.`
+      : `Detach ${row.name} from this session?`;
+    if (!win.confirm(ask)) return;
+    try {
+      await api.detach(sessionId, row.name);
+      close();
+      await refresh();
+    } catch (e) {
+      toast(`Can't detach ${row.name}: ${String(e.message).replace(/ \(\d+\)$/, "")}`);
+    }
+  }
+
+  el.addEventListener("click", (e) => {
+    const chip = e.target.closest(".ctx-chip");
+    if (!chip) return;
+    e.stopPropagation();
+    if (chip.dataset.act === "add") {
+      if (openName === ADD) close();
+      else openAdd(chip);
+    } else if (openName === chip.dataset.name) close();
+    else open(chip.dataset.name, chip);
+  });
+  pop.addEventListener("submit", (e) => {
+    e.preventDefault();
+    submitAdd(e.target);
+  });
+  pop.addEventListener("click", (e) => {
+    const act = e.target.closest("[data-act]")?.dataset.act;
+    if (act === "close") close();
+    else if (act === "view") viewText();
+    else if (act === "detach") detach();
+  });
+  doc.addEventListener("click", (e) => {
+    if (openName && !pop.contains(e.target) && !el.contains(e.target)) close();
+  });
+  doc.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && openName) close();
+  });
+  win.addEventListener("resize", () => {
+    const chip = openName && el.querySelector(".ctx-chip.open");
+    if (chip) place(chip);
+  });
+  win.addEventListener("focus", () => refresh());
+  // The ages move on by themselves.
+  win.setInterval(() => { if (rows.length) render(); }, 60_000);
+
+  return { load, clear, refresh, close, get rows() { return rows; } };
+}

data/lib/samagotchi/web/public/data.js

@@ -251,3 +251,24 @@ export function openEvents(handlers = {}, opts = {}) {
     },
   };
 }
+
+// A session's attached context (chi context): the sources it sees, one
+// with its text, and detach (a session's) or mute here (a project's).
+export function listContext(id, opts = {}) {
+  return api(`/api/sessions/${encodeURIComponent(id)}/context`, opts);
+}
+
+export function getContext(id, name, opts = {}) {
+  return api(`/api/sessions/${encodeURIComponent(id)}/context/${encodeURIComponent(name)}`, opts);
+}
+
+// A URL an installed bundle's provider attaches: {url, why} → {name}.
+export function addContext(id, body, opts = {}) {
+  return api(`/api/sessions/${encodeURIComponent(id)}/context`, {
+    method: "POST", body: JSON.stringify(body), ...opts,
+  });
+}
+
+export function detachContext(id, name, opts = {}) {
+  return api(`/api/sessions/${encodeURIComponent(id)}/context/${encodeURIComponent(name)}`, { method: "DELETE", ...opts });
+}

data/lib/samagotchi/web/public/format.js

@@ -26,12 +26,19 @@ export function noteHtml(note) {
 // Who a steer names as its sender: a plugin's own label, chi's sender ids
 // in words (the TUI's Formatting#steer_sender agrees;
 // spec/shared/labels_matrix.json). "": no one named.
-const STEER_SENDERS = { parent_agent: "parent agent", chi_send: "chi send", plugin_send: "plugin" };
+const STEER_SENDERS = { parent_agent: "parent agent", chi_send: "chi send", plugin_send: "plugin", delegate_report: "delegate report" };
 export function steerSender(source) {
   const id = String(source ?? "");
   return STEER_SENDERS[id] || id;
 }
 
+// The label a user-role line gets on reload for who sent it, by its saved
+// source: a delegate report (the live bubble's clientLabel of child:<id>);
+// null for the user's own (and anything else, as before).
+export function sourceLabel(source) {
+  return source === "delegate_report" ? steerSender(source) : null;
+}
+
 // A plugin's steer (a nudge put into the running turn): one line that
 // names who nudged the model, its text collapsed under it. +bubble+: on its
 // own between bubbles (no step holds it), not a row of a step.

data/lib/samagotchi/web/public/index.html

@@ -472,6 +472,12 @@ body.has-session #history{padding-bottom:calc(var(--dock-h,160px) + 32px)}
 #composer .actions-col button{white-space:nowrap;font-size:12px;padding:0 12px;height:28px;min-height:28px;line-height:28px}
 #composer .actions-col .split{order:3;display:flex;gap:4px;margin-left:auto}
 #composer #actionBtn{min-width:64px;font-weight:600}
+/* In a session the composer is one row: the text field (one line, growing with its text; fitPrompt sets its height)
+   and Cancel · Send at its bottom right. The key hint is in the placeholder there, so its row goes. */
+body.has-session #composer{flex-direction:row;align-items:flex-end;padding:10px}
+body.has-session #composer textarea{min-height:0}
+body.has-session #composeHint{display:none}
+body.has-session #composer .actions-col{flex-wrap:nowrap;flex-shrink:0}
 /* The model picker (start page only): reads as a label, "host:model ▾", left of Start; a native select under a drawn caret. */
 /* A select is as wide as its widest option: a hidden copy of the chosen name (data-value) sizes the box to that name instead, and the select fills it. */
 #composer .actions-col .model-pick{order:0;position:relative;display:inline-block;max-width:min(50%,380px);height:28px;min-height:28px;padding:0 22px 0 8px;border-radius:8px;overflow:hidden;background:transparent;color:var(--text-muted);font-size:12px;line-height:28px;text-align:left;text-overflow:ellipsis;transition:background .12s ease,color .12s ease}
@@ -651,7 +657,8 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 #infoBar .meta .copy-attach{padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;background:var(--bg-raised);color:var(--text-2);border:1px solid var(--border-strong)}
 #infoBar .meta .copy-attach:hover{color:var(--text-hover);border-color:var(--border-strong)}
 #infoBar .meta .status{font-size:11px;padding:2px 6px;border-radius:999px}
-#infoBar .meta .dir{font-family:ui-monospace,monospace;font-size:11px;color:var(--text-muted);word-break:break-all}
+/* The whole path on one line: a long one loses its start ("…/project/dir", the end is what tells dirs apart); the title holds all of it. */
+#infoBar .meta .dir{font-family:ui-monospace,monospace;font-size:11px;color:var(--text-muted);max-width:48ch;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}
 /* The footer sits on the card's glass: its chips are tinted, not solid, so the glass reads through them. */
 #infoBar .meta .model{font-size:11px;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--bg-hover) 55%,transparent);color:var(--text-3)}
 /* The memory chip ("mem 2", when the session used some): phones only, where the "mem: …" line is hidden. */
@@ -663,7 +670,7 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 #infoBar .meta .worker-restart{padding:1px 8px;border-radius:5px;font-size:11px;font-weight:600;background:var(--bg-raised);color:var(--warn-bright);border:1px solid var(--warn-border)}
 #infoBar .meta .worker-restart:hover:not(:disabled){background:var(--warn-border);color:var(--on-warn)}
 #infoBar .meta .worker-restart:disabled{opacity:.7;cursor:default}
-#infoBar .preview-line{font-size:13px;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.4;max-height:2.8em}
+#infoBar .preview-line{font-size:13px;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;line-height:1.4;max-height:1.4em}
 #infoBar .preview-line .preview, #infoBar .preview-line .mem{word-break:break-word}
 #infoBar .mem{font-size:12px;color:var(--text-muted)}
 #infoBar button{padding:4px 12px;border-radius:8px;font-size:12px;font-weight:600}
@@ -673,6 +680,38 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 #infoBar #infoArchiveBtn:hover{color:var(--text);background:var(--bg-hover)}
 #infoBar #infoDeleteBtn{background:transparent;color:var(--text-muted);border:1px solid transparent}
 #infoBar #infoDeleteBtn:hover{color:var(--on-solid);background:var(--danger-bg);border-color:var(--danger-bg)}
+/* Attached context (context_chips.js): a row of its own under the meta; not the composer's #chips/.chip. */
+#contextChips{order:5;flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
+#contextChips[hidden]{display:none}
+#contextChips.only-add{flex-basis:auto}
+#infoBar .ctx-chip.ctx-add{border-style:dashed;color:var(--text-muted);background:transparent}
+.ctx-add-form{display:flex;flex-direction:column;gap:6px;margin:0}
+.ctx-add-form .ctx-pop-head strong{font-family:inherit}
+.ctx-add-input{width:100%;box-sizing:border-box;padding:6px 8px;border-radius:7px;border:1px solid var(--border-strong);background:var(--bg-inset);color:var(--text);font:13px/1.4 inherit}
+.ctx-add-input:focus{outline:none;border-color:var(--accent-border)}
+#infoBar .ctx-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font:600 11px/1.5 ui-monospace,monospace;background:color-mix(in srgb,var(--bg-hover) 55%,transparent);color:var(--text-3);border:1px solid var(--border-strong);white-space:nowrap}
+#infoBar .ctx-chip:hover,#infoBar .ctx-chip.open{color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+#infoBar .ctx-chip.empty{color:var(--text-faint);border-style:dashed}
+#infoBar .ctx-chip.error{color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 55%,transparent);background:var(--danger-bg-dim)}
+.ctx-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--accent-ring)}
+.ctx-popover{position:fixed;z-index:60;max-height:min(60vh,520px);overflow:auto;padding:12px 14px;border-radius:12px;background:var(--bg-panel);color:var(--text-2);border:1px solid var(--border-strong);box-shadow:var(--toast-shadow);font-size:13px;line-height:1.45;display:flex;flex-direction:column;gap:6px}
+.ctx-popover[hidden]{display:none}
+.ctx-pop-head{display:flex;align-items:baseline;gap:8px}
+.ctx-pop-head strong{font-family:ui-monospace,monospace;color:var(--text-bright)}
+.ctx-pop-kind{font-size:11px;color:var(--text-muted)}
+.ctx-pop-close{margin-left:auto;padding:0 6px;border:none;background:transparent;color:var(--text-muted);font-size:16px;line-height:1}
+.ctx-pop-close:hover{color:var(--text)}
+.ctx-pop-why{color:var(--text)}
+.ctx-pop-hint{font-size:12px;color:var(--accent);word-break:break-all}
+.ctx-pop-summary{padding:6px 8px;border-radius:8px;background:var(--bg-inset);border-left:3px solid var(--accent-border)}
+.ctx-pop-meta{font-size:11px;color:var(--text-muted)}
+.ctx-pop-error{font-size:12px;color:var(--danger-text)}
+.ctx-pop-text{margin:0;max-height:240px;overflow:auto;padding:8px;border-radius:8px;background:var(--bg-inset);font:12px/1.45 ui-monospace,monospace;white-space:pre-wrap;word-break:break-word;color:var(--text-2)}
+.ctx-pop-actions{display:flex;gap:8px;justify-content:flex-end}
+.ctx-pop-actions button{padding:3px 10px;border-radius:7px;font-size:12px;font-weight:600;background:var(--bg-raised);color:var(--text-2);border:1px solid var(--border-strong)}
+.ctx-pop-actions button:hover{color:var(--text-hover)}
+.ctx-pop-actions .ctx-pop-detach{color:var(--text-muted);background:transparent}
+.ctx-pop-actions .ctx-pop-detach:hover{color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
 /* Phones: the footer is one line; its meta scrolls sideways (all of it stays reachable) and the first-message line, the strip card's title, goes. */
 @media(max-width:600px){
   /* The key hint: cut off at this width, and phones have no Shift+Enter. */
@@ -688,7 +727,13 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
   #infoBar .meta .status{order:-1}
   /* After the status (same order, later in the DOM): the meta scrolls, and only its start is in sight. */
   #infoBar .meta .mem-chip{display:inline;order:-1}
-  #infoBar .meta .dir{word-break:normal}
+  /* The chips get a second line of their own (only when there are some), scrolling sideways. */
+  #infoBar:has(#contextChips:not([hidden])){flex-wrap:wrap;row-gap:4px}
+  #contextChips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
+  /* The meta scrolls here: a lone "+ URL" would take its width, so it gets the row too. */
+  #contextChips.only-add{flex-basis:100%}
+  #contextChips::-webkit-scrollbar{display:none}
+  #contextChips>*{flex-shrink:0}
   #infoBar button{padding:4px 8px}
   /* Icon-only buttons (the words stay as the accessible name, the title says more): the meta gets the width. */
   #infoBar>button{font-size:0;line-height:0;padding:5px 7px}
@@ -892,6 +937,7 @@ a{color:var(--accent)}
       </div>
       <div id="infoBar">
         <div class="info" id="infoText"></div>
+        <div id="contextChips" aria-label="Attached context" hidden></div>
         <button class="ghost" id="infoArchiveBtn" title="Archive: hide from the lists, keep for good" style="display:none">archive</button>
         <button class="ghost" id="infoStopBtn" title="Stop session (terminate worker)" style="display:none">stop</button>
         <button class="ghost" id="infoDeleteBtn" title="Delete session (for good)" style="display:none">delete</button>

data/lib/samagotchi/web/public/notify.js

@@ -12,8 +12,12 @@ export function notifyState({ hasNotification, secureContext, permission, wanted
   return wanted && permission === "granted" ? "on" : "off";
 }
 
-// A finished turn shorter than this was watched: no "done".
+// A finished turn shorter than this was watched: no "done". Not a turn
+// chi ran for a delegate child's report (last_turn origin delegate_report)
+// or an attached context change (context): nobody started it, so nobody
+// watched it.
 export const DONE_MIN_SECONDS = 10;
+const UNWATCHED_ORIGINS = ["delegate_report", "context"];
 
 // The step-limit question (kind "continue": a turn ran out of iterations
 // and asks whether to go on) has its own reason: "out of steps".
@@ -66,7 +70,7 @@ export function attentionFor(prev, next) {
   if (next.parent_id) return null;
   const key = `${next.id}:${turn.ended_at}`;
   if (turn.outcome === "failed") return { reason: "failed", sessionId: next.id, key };
-  if (turn.outcome === "completed" && Number(turn.seconds) >= DONE_MIN_SECONDS) {
+  if (turn.outcome === "completed" && (Number(turn.seconds) >= DONE_MIN_SECONDS || UNWATCHED_ORIGINS.includes(turn.origin))) {
     return { reason: "done", sessionId: next.id, key };
   }
   return null;

data/lib/samagotchi/web/public/timing.js

@@ -112,6 +112,10 @@ export function turnRecordAt(timing, index) {
   return Array.isArray(records) ? records[index] || null : null;
 }
 
+// A history item that starts a turn: a prompt, or the note a context wake
+// turn starts with (turn_start).
+const startsTurn = (item) => item?.role === "user" || (item?.role === "note" && item.turn_start === true);
+
 // For each history item, the turn index its timing shows under, or null. A
 // turn with tool calls holds several assistant messages; only the last one
 // before the next user message carries the turn's timing. A turn with none
@@ -122,7 +126,7 @@ export function timedTurnIndexes(items) {
   let turnIndex = -1;
   let carrier = null;
   items.forEach((item, i) => {
-    if (item?.role === "user") {
+    if (startsTurn(item)) {
       if (carrier !== null) result[carrier] = turnIndex;
       turnIndex += 1;
       carrier = i;
@@ -150,14 +154,14 @@ export function turnGroups(items, timing) {
   let turnIndex = -1;
   let turn = null;
   items.forEach((item, i) => {
-    if (item?.role === "note") {
+    if (item?.role === "note" && !startsTurn(item)) {
       groups.push({ kind: "note", i });
     } else if (item?.role === "steer") {
       if (turn) turn.steers.push(i);
       else groups.push({ kind: "steer", i });
     } else if (item?.role === "user" && item.merged && turn) {
       turn.merged.push(i);
-    } else if (item?.role === "user") {
+    } else if (startsTurn(item)) {
       turnIndex += 1;
       turn = { kind: "turn", turnIndex, turnId: item.turn_id, user: i, texts: [], steers: [], merged: [] };
       groups.push(turn);

data/lib/samagotchi/web/public/turn_events.js

@@ -93,12 +93,24 @@ export function isOwn(clientId, myId) {
 
 // As the TUI labels them (Formatting::CLIENT_LABELS); this file's label
 // helpers and the TUI's agree per spec/shared/labels_matrix.json.
-const CLIENT_LABELS = Object.freeze({ tui: "tui", web: "web", system: "reminder", delegate: "delegate" });
+const CLIENT_LABELS = Object.freeze({ tui: "tui", web: "web", system: "reminder", delegate: "delegate", child: "delegate report" });
 
-// The label on another client's prompt, by its client_id prefix.
+// A delegate child's report comes in as client child:<id8> (ChildReports).
+const REPORT_CLIENT = "child:";
+export function isReportClient(clientId) {
+  return String(clientId || "").startsWith(REPORT_CLIENT);
+}
+
+// A turn chi ran because an attached context source changed: context:<name>.
+const CONTEXT_CLIENT = "context:";
+
+// The label on another client's prompt, by its client_id prefix; a context
+// change's turn as "context <name> changed".
 export function clientLabel(clientId) {
   if (!clientId) return null;
-  return CLIENT_LABELS[String(clientId).split(":", 1)[0]] || "user";
+  const id = String(clientId);
+  if (id.startsWith(CONTEXT_CLIENT) && id.length > CONTEXT_CLIENT.length) return `context ${id.slice(CONTEXT_CLIENT.length)} changed`;
+  return CLIENT_LABELS[id.split(":", 1)[0]] || "user";
 }
 
 // The note for reminders a turn got (a reminder turn has no prompt).
@@ -119,9 +131,10 @@ export function hookNoticeLabel(hook) {
 }
 
 // The row a step gets when the loop asks again after an empty answer, or
-// after a plugin cut the generation (stopped_by: the bundle).
-export function emptyRetryLine({ attempt, of, stopped_by: stoppedBy } = {}) {
-  const what = stoppedBy ? `cut by ${stoppedBy}` : "empty answer";
+// after a plugin cut the generation (stopped_by: the bundle), or after a
+// corrupt native generation (malformed).
+export function emptyRetryLine({ attempt, of, stopped_by: stoppedBy, malformed } = {}) {
+  const what = stoppedBy ? `cut by ${stoppedBy}` : malformed ? "malformed answer" : "empty answer";
   return `↻ ${what}, asking again (${attempt}/${of})`;
 }
 
@@ -381,9 +394,14 @@ export function composerAfterAck({ sent = "", current = "", refill = "" } = {})
 //   tag   — this tab's own local echo gets its enqueued_id
 //   start — the bubble's turn started (drops the "queued" badge)
 //   steer — the bubble was merged into the running turn
+//   report — the merge brought a delegate child's report (origin
+//           child:<id8>, no bubble anywhere): its text gets a labelled one
 // `known(enqueuedId)` says whether a bubble carries that id already;
-// `unmatchedMerge` whether the last input_merged had an origin with no bubble.
-export function promptOps(event, { myId, known, unmatchedMerge = false }) {
+// `unmatchedMerge` whether the last input_merged had an origin with no
+// bubble ("report": a delegate report's); `wakeStart` whether this is the
+// first merge of a turn chi ran for reports (its bubble starts the turn,
+// no "steered" badge, as a reload shows it).
+export function promptOps(event, { myId, known, unmatchedMerge = false, wakeStart = false }) {
   if (!event) return [];
   switch (event.type) {
     case "turn_enqueued": {
@@ -403,12 +421,18 @@ export function promptOps(event, { myId, known, unmatchedMerge = false }) {
       }
       return [withImages({ op: "add", enqueuedId: id, prompt: event.prompt, state: "started", label: clientLabel(origin.client_id) }, event.images)];
     }
-    case "input_merged":
-      return (event.origins || []).filter((o) => o && o.enqueued_id).map((o) =>
+    case "input_merged": {
+      const ops = (event.origins || []).filter((o) => o && o.enqueued_id).map((o) =>
         known(o.enqueued_id) ? { op: "steer", enqueuedId: o.enqueued_id } : { op: "steer", enqueuedId: o.enqueued_id, unmatched: true },
       );
+      if ((event.origins || []).some((o) => o && !o.enqueued_id && isReportClient(o.client_id))) ops.push({ op: "report" });
+      return ops;
+    }
     case "pending_input_merged":
       if (!unmatchedMerge || !event.content) return [];
+      if (unmatchedMerge === "report") {
+        return [{ op: "add", enqueuedId: null, prompt: event.content, state: wakeStart ? null : "steered", label: clientLabel(REPORT_CLIENT) }];
+      }
       return [{ op: "add", enqueuedId: null, prompt: event.content, state: "steered", label: null }];
     default:
       return [];

data/lib/samagotchi/web/public/turn_view.js

@@ -14,7 +14,7 @@ import { leavesBlock } from "./card.js";
 import { copySourceAttr } from "./copy.js";
 import { commandBlockHtml, rowHover } from "./command_view.js";
 import { activityDiffHtml } from "./diff_view.js";
-import { escapeHtml, messageBodyHtml, noteHtml, normalize, steerRowHtml } from "./format.js";
+import { escapeHtml, messageBodyHtml, noteHtml, normalize, sourceLabel, steerRowHtml } from "./format.js";
 import { thumbsHtml } from "./images.js";
 import { shouldFollowScroll } from "./scroll.js";
 import { emptyAnswerLine, hookNoticeLabel } from "./turn_events.js";
@@ -805,13 +805,31 @@ export function turnHistoryHtml(items, timing, { thumbs }) {
     const { body, renderedMarkdown } = messageBodyHtml(m);
     return `<div class="bubble output${renderedMarkdown ? " markdown" : ""}"${copySourceAttr(m, renderedMarkdown)}>${body}</div>${timing}`;
   };
+  // The live bubble's origin label (app.js makeUserBubble), for a line
+  // chi brought in: a delegate report.
+  const originLabelHtml = (m) => {
+    const label = sourceLabel(m?.source);
+    return label ? `<span class="origin-label">${escapeHtml(label)}</span>` : "";
+  };
+  // The first text after a delegate report merged mid-turn, unless it is
+  // the turn's answer (shown anyway).
+  const reportReplyHtml = (i, group) => {
+    if (items[i]?.source !== "delegate_report") return "";
+    const j = items.findIndex((m, k) => k > i && m?.role === "assistant" && String(m.content ?? "").trim());
+    if (j < 0 || j === group.answer || items.slice(i + 1, j).some((m) => m?.role === "user" && !m.merged)) return "";
+    const { body, renderedMarkdown } = messageBodyHtml(items[j]);
+    return `<div class="bubble output report-reply${renderedMarkdown ? " markdown" : ""}"${copySourceAttr(items[j], renderedMarkdown)}>${body}</div>`;
+  };
   const steerHtml = (i, bubble) => steerRowHtml({ source: items[i].source, text: items[i].content }, { bubble });
   return turnGroups(items, timing).map((group) => {
     if (group.kind === "note") return `<div class="bubble note">${noteHtml(items[group.i])}</div>`;
     if (group.kind === "steer") return steerHtml(group.i, true);
     if (group.kind === "answer") return answerHtml(items[group.answer], "");
     const prompt = items[group.user];
-    const parts = [`<div class="bubble user"${copySourceAttr(prompt, false)}><div class="user-message">${messageBodyHtml(prompt).body}${thumbs(prompt.images)}</div></div>`];
+    // A context wake turn starts with its note.
+    const parts = [prompt.role === "note"
+      ? `<div class="bubble note">${noteHtml(prompt)}</div>`
+      : `<div class="bubble user"${copySourceAttr(prompt, false)}>${originLabelHtml(prompt)}<div class="user-message">${messageBodyHtml(prompt).body}${thumbs(prompt.images)}</div></div>`];
     const [only] = group.steps;
     const ended = group.answer !== null || group.emptyAnswer != null;
     const textless = only && (only.i === null || !String(items[only.i].content ?? ""));
@@ -843,9 +861,13 @@ export function turnHistoryHtml(items, timing, { thumbs }) {
     const loose = noBlock ? [...group.steps.flatMap((step) => step.steers || []), ...(group.steers || [])] : group.steers || [];
     parts.push(loose.map((i) => steerHtml(i, true)).join(""));
     // The user's lines merged into the turn: the live "steered" bubbles,
-    // after its steps and before its answer.
+    // after its steps and before its answer. A delegate report's is
+    // followed by the text that answered it when that isn't the answer: a
+    // small model tells its user about a report before its next tool call,
+    // and that step's text would stay folded in the block.
     parts.push((group.merged || []).map((i) =>
-      `<div class="bubble user steered" data-user-state="steered"${items[i].step ? ` data-step="${Number(items[i].step)}"` : ""}${copySourceAttr(items[i], false)}><div class="user-message">${messageBodyHtml(items[i]).body}${thumbs(items[i].images)}</div><span class="state-badge">steered</span></div>`).join(""));
+      `<div class="bubble user steered" data-user-state="steered"${items[i].step ? ` data-step="${Number(items[i].step)}"` : ""}${copySourceAttr(items[i], false)}>${originLabelHtml(items[i])}<div class="user-message">${messageBodyHtml(items[i]).body}${thumbs(items[i].images)}</div><span class="state-badge">steered</span></div>` +
+      reportReplyHtml(i, group)).join(""));
     // A turn that ended with no answer: chi's muted notice where the answer
     // would be, before the timing, as live.
     if (group.emptyAnswer != null) parts.push(`${emptyAnswerHtml(items[group.emptyAnswer])}${timingHtml(group)}`);