samagotchi 0.31.0 → 0.33.0

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

@@ -15,7 +15,14 @@ import {
   uploadImage,
   listModels,
   fetchHistory,
+  listContext,
+  getContext,
+  detachContext,
+  addContext,
 } from "./data.js";
+import { createContextChips } from "./context_chips.js";
+import { renderStable } from "./stable_html.js";
+import { createShownTexts } from "./shown_texts.js";
 import { MODEL_KEY } from "./model_pick.js";
 import { emptySessionState } from "./session_state.js";
 import { createModelPicker } from "./model_picker.js";
@@ -32,7 +39,7 @@ import { routeChunk } from "./chunk_router.js";
 import { extractCtxPct, savedCtxPct, cardCtxText, generationTokens, lastSpeedText, speedText, tokensTipText } from "./ctx.js";
 import { createQuestionCards } from "./question_cards.js";
 import { cardClass, cardInnerHtml, cardPlace, isCard, isNoticeCard, noticeInnerHtml, splitSnapshotCards, turnNoticePlace } from "./card.js";
-import { gripFloor, promptHeight } from "./composer_size.js";
+import { PROMPT_LINE_PX, PROMPT_MIN_PX, gripFloor, promptHeight } from "./composer_size.js";
 import { createCommandList } from "./command_list.js";
 import { createPromptHistory } from "./prompt_history.js";
 import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
@@ -57,6 +64,14 @@ const composerEl = $("#composer");
 const infoBarEl = $("#infoBar");
 const firstPeekEl = $("#firstPeek");
 const infoTextEl = $("#infoText");
+// The open session's attached context, in its own row of the session bar
+// (updateInfoBar redraws #infoText every tick; the chips keep their popover).
+const contextChips = createContextChips({
+  el: $("#contextChips"),
+  api: { list: listContext, show: getContext, detach: detachContext, add: addContext },
+  escapeHtml,
+  toast: (text) => showToast(text),
+});
 const markdownWarningEl = $("#markdownWarning");
 const promptEl = $("#prompt");
 const actionBtn = $("#actionBtn");
@@ -74,7 +89,8 @@ let eventsControl = null;
 let resyncsInFlight = 0;
 let resyncAgain = false;
 let allSessions = [];
-let seenContent = new Set();
+// The running turn's texts on the page (the turn output dedupe).
+const shownTexts = createShownTexts();
 // The page's view of a turn (web.view, or ?view=stage|turn): the running
 // turn pinned above the composer (the stage, stage_view.js), or one block
 // per turn with its steps in the history (turn_view.js).
@@ -85,7 +101,7 @@ const viewArgs = {
   historyEl,
   appendToHistory: (el) => appendToHistory(el),
   isNearBottom: () => isNearBottom(),
-  sawText: (k) => seenContent.add(k),
+  sawText: (k) => shownTexts.saw(k),
   sessionId: () => selected,
   // The stop-task button on a running task_wait, for a worker that has
   // the route (its sidecar features).
@@ -552,18 +568,24 @@ function setPlaceholder(long, short) {
   promptEl.placeholder = narrowScreen.matches ? short : long;
 }
 
-// The key hint under the composer (shown while it has focus).
+// The key hint under the composer (shown while it has focus; on the start
+// page only: in a session the placeholder carries it, the hint row is gone).
 const SEND_HINT = "Enter to send · Shift+Enter for a newline · ↑ history";
 
+let hadSession = false;
 // While a turn runs, Send still sends: the prompt merges into the turn at
 // its next step (steering). Cancel is its own button then.
 function updateComposerMode() {
-  document.body.classList.toggle("has-session", !!selected);
+  // In a session the box is one line: its minimum follows the class.
+  if (document.body.classList.toggle("has-session", !!selected) !== hadSession) {
+    hadSession = !hadSession;
+    fitPrompt();
+  }
   if (selected) modelPicker.close();
   const running = turnRunning && !!selected;
   cancelBtn.style.display = running ? "" : "none";
   if (running) {
-    setPlaceholder("Running… a message now steers this turn (Enter to send)", "Running… a message steers it");
+    setPlaceholder("Running… a message now steers this turn · Enter to send · Shift+Enter newline", "Steer the turn…");
     composeHintEl.textContent = SEND_HINT;
     actionBtn.textContent = "Send";
     emptyEl.classList.add("hidden");
@@ -578,13 +600,13 @@ function updateComposerMode() {
     historyEl.innerHTML = "";
     updateInfoBar();
   } else if (current.owner === "tui") {
-    setPlaceholder("A terminal chi owns this session and doesn't share it — run it with chi --shared to send from here", "A terminal chi owns this session");
+    setPlaceholder("A terminal chi owns this session · run it with chi --shared to send from here", "A terminal chi owns this session");
     composeHintEl.textContent = "";
     actionBtn.textContent = "Send";
     actionBtn.disabled = true;
     emptyEl.classList.add("hidden");
   } else {
-    setPlaceholder("Message chi…", "Message chi…");
+    setPlaceholder("Message chi… · Enter to send · Shift+Enter newline · ↑ history", "Message chi…");
     composeHintEl.textContent = SEND_HINT;
     actionBtn.textContent = "Send";
     actionBtn.disabled = false;
@@ -653,6 +675,7 @@ function clearSelection() {
   setSessionHash(null);
   document.querySelectorAll(".card").forEach((el) => el.classList.remove("active"));
   resetSessionState();
+  contextChips.clear();
   clearTimingInterval();
   liveTurnTimingEl = null;
   liveTurnId = null;
@@ -699,6 +722,7 @@ async function select(id) {
   resetTurnView();
   updateFirstPeek();
   updateInfoBar();
+  contextChips.load(id);
   updateComposerMode();
   await resync();
   promptEl.focus();
@@ -929,11 +953,7 @@ function applyFinalMarkdown(messages) {
 }
 
 function seedSeenFromDom() {
-  seenContent = new Set();
-  findInTurnRoots(".bubble").forEach((b) => {
-    const k = normalize(b.textContent);
-    if (k) seenContent.add(k);
-  });
+  shownTexts.seed(findInTurnRoots(".bubble").map((b) => normalize(b.textContent)));
 }
 
 // Sticky-follow scroll: only auto-scroll to the bottom while the user is
@@ -953,7 +973,7 @@ function atHistoryEnd() {
 function appendChunk(text) {
   if (!text) return;
   const k = normalize(text);
-  if (!k || seenContent.has(k)) return;
+  if (!k || shownTexts.shows(k)) return;
   const follow = isNearBottom();
   const hint = historyEl.querySelector(".hint");
   if (hint) hint.remove();
@@ -1443,7 +1463,7 @@ function updateInfoBar() {
   }
   if (!selected) {
     // The start page hides the info bar (the storage path is on #/sessions).
-    infoTextEl.innerHTML = "";
+    renderStable(infoTextEl, "");
     infoTextEl.title = "";
     if (stopBtn) stopBtn.style.display = "none";
     return;
@@ -1467,9 +1487,11 @@ function updateInfoBar() {
   const attachCmd = `chi --attach ${selected}`;
   const copied = Date.now() - attachCopiedAt < 2000;
   const copyHtml = `<button type="button" class="copy-attach" title="Copy &quot;${escapeHtml(attachCmd)}&quot; to attach a terminal">${copied ? "copied ✓" : "copy chi --attach"}</button>`;
-  const metaHtml = `<div class="meta"><span class="id" title="${escapeHtml(selected)}">${escapeHtml(idShort)}</span>${copyHtml}<span class="${statusClass}">${escapeHtml(current.status||"")}</span><span class="model${label.mismatch ? " served-mismatch" : ""}" title="${escapeHtml(label.title)}">${escapeHtml(label.text)}</span>${parentHtml}${current.usedMemories.length ? `<span class="model mem-chip" title="${escapeHtml(memChipTitle(current.usedMemories))}">${escapeHtml(memChipText(current.usedMemories))}</span>` : ""}<span class="dir" title="${escapeHtml(current.dir||"")}">${escapeHtml((current.dir||"").slice(0,48))}</span>${ctxText ? `<span class="model ctx" title="${escapeHtml(ctxTip)}">${escapeHtml(ctxText)}</span>` : ""}${speedTextNow ? `<span class="model speed" title="${escapeHtml(speedTip)}">${escapeHtml(speedTextNow)}</span>` : ""}${timingText ? `<span class="model">${escapeHtml(timingText)}</span>` : ""}${workerBadgeHtml()}</div>`;
+  const metaHtml = `<div class="meta"><span class="id" title="${escapeHtml(selected)}">${escapeHtml(idShort)}</span>${copyHtml}<span class="${statusClass}">${escapeHtml(current.status||"")}</span><span class="model${label.mismatch ? " served-mismatch" : ""}" title="${escapeHtml(label.title)}">${escapeHtml(label.text)}</span>${parentHtml}${current.usedMemories.length ? `<span class="model mem-chip" title="${escapeHtml(memChipTitle(current.usedMemories))}">${escapeHtml(memChipText(current.usedMemories))}</span>` : ""}<span class="dir" title="${escapeHtml(current.dir||"")}"><bdi>${escapeHtml(current.dir||"")}</bdi></span>${ctxText ? `<span class="model ctx" title="${escapeHtml(ctxTip)}">${escapeHtml(ctxText)}</span>` : ""}${speedTextNow ? `<span class="model speed" title="${escapeHtml(speedTip)}">${escapeHtml(speedTextNow)}</span>` : ""}${timingText ? `<span class="model session-time"></span>` : ""}${workerBadgeHtml()}</div>`;
   const previewHtml = `<div class="preview-line"><span class="preview">${escapeHtml(current.firstPreview || "—")}</span> · <span class="mem" title="${escapeHtml(current.usedMemories.join(", "))}">mem: ${escapeHtml(memText)}</span></div>`;
-  infoTextEl.innerHTML = metaHtml + previewHtml;
+  // The session clock ticks every second while a turn runs: only its text
+  // changes, the bar's other nodes (a tooltip, a button mid-press) stay.
+  renderStable(infoTextEl, metaHtml + previewHtml, { ".session-time": timingText });
   infoTextEl.title = memoriesTooltip(current.usedMemories, current.preloadedMemories, current.mutedMemories);
 }
 
@@ -1738,6 +1760,7 @@ const streamHandlers = {
     // for a queued prompt among its rows.
     turnDom.handOff?.({ immediate: true });
     markRecapStale();
+    shownTexts.turnStarted();
     const promptBubble = applyPromptOps(data);
     setTurnRunning(true);
     setLiveStatus("running");
@@ -1844,7 +1867,11 @@ const streamHandlers = {
   // Due reminders went into the turn (a reminder turn has no prompt bubble).
   reminder_injected: (data) => addCommandBubble({ label: null, line: reminderText(data), text: "" }),
   // A context note joined the conversation (between turns; no turn runs).
-  context_added: (data) => addNoteBubble({ label: data.label, content: data.text || "" }),
+  context_added: (data) => {
+    addNoteBubble({ label: data.label, content: data.text || "" });
+    // An attached context source's note: its chip changed.
+    if (data.context_source) contextChips.refresh();
+  },
   continue_offered: (data) => questionCards.renderContinue(data),
   continue_resolved: (data) => questionCards.resolveContinue(data),
   tool_call_started: (data) => turnDom.toolStarted(data),
@@ -2046,12 +2073,9 @@ async function handleSendTurn() {
     // for its ack is never taken back (4.13), so drop it here. The prompt
     // is still in the composer, as the echo was removed.
     dropEarlyRestores(earlyRestores);
-    // The chips stay (uploaded ones keep their ref) for another try.
-    if (/bad_image|too_large/.test(e.message)) {
-      alert(e.message);
-      return;
-    }
-    if (/owned_by_tui|409/.test(e.message)) {
+    // The chips stay (uploaded ones keep their ref) for another try: an
+    // image refused (bad_image, too_large, bad_images) says why below.
+    if (e.code === "owned_by_tui") {
       current.owner = "tui";
       updateComposerMode();
       return;
@@ -2082,7 +2106,7 @@ async function handleSendCommand(line) {
     // The command woke the worker: follow its stream if none is open.
     followWokenWorker();
   } catch (e) {
-    if (/owned_by_tui|409/.test(e.message)) {
+    if (e.code === "owned_by_tui") {
       current.owner = "tui";
       updateComposerMode();
       return;
@@ -2143,7 +2167,7 @@ async function handleCancel() {
     await cancelTurn(selected);
   } catch (e) {
     // The turn ended meanwhile: nothing left to cancel.
-    if (!/not_running|409/.test(e.message)) alert(e.message);
+    if (e.code !== "not_running") alert(e.message);
   } finally {
     cancelBtn.disabled = false;
   }
@@ -2238,10 +2262,15 @@ const GRIP_KEY = "chi_composer_floor";
 let promptFloor = null;
 try { promptFloor = Number(localStorage.getItem(GRIP_KEY)) || null; } catch (_) {}
 
+// The empty box: one line in a session, three on the start page.
+function promptMinPx() {
+  return document.body.classList.contains("has-session") ? PROMPT_LINE_PX : PROMPT_MIN_PX;
+}
+
 function fitPrompt() {
   const borders = promptEl.offsetHeight - promptEl.clientHeight;
   promptEl.style.height = "0px";
-  const { height, scrolls } = promptHeight({ contentPx: promptEl.scrollHeight + borders, floorPx: promptFloor, viewportPx: window.innerHeight });
+  const { height, scrolls } = promptHeight({ contentPx: promptEl.scrollHeight + borders, floorPx: promptFloor, viewportPx: window.innerHeight, minPx: promptMinPx() });
   promptEl.style.height = `${height}px`;
   promptEl.style.overflowY = scrolls ? "auto" : "hidden";
 }
@@ -2254,7 +2283,7 @@ composeGrip.addEventListener("pointerdown", (e) => {
   const startY = e.clientY;
   const startH = promptEl.offsetHeight;
   const move = (ev) => {
-    promptFloor = gripFloor(startH + (startY - ev.clientY), window.innerHeight);
+    promptFloor = gripFloor(startH + (startY - ev.clientY), window.innerHeight, promptMinPx());
     fitPrompt();
   };
   const up = () => {

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

@@ -1,19 +1,20 @@
 // The composer's height. It grows with its text up to a cap; the grip on
 // its top edge sets a taller floor (the cap then is at least that floor).
-export const PROMPT_MIN_PX = 72; // about three lines of the 15 px field
+export const PROMPT_MIN_PX = 72; // about three lines of the 15 px field: the start page
+export const PROMPT_LINE_PX = 26; // one line (15 px × 1.45 + 4 padding): in a session
 export const PROMPT_CAP_SHARE = 0.35; // of the window's height, for growing with text
 export const PROMPT_GRIP_SHARE = 0.5; // of the window's height, for the grip
 
 // contentPx: the text's height (scrollHeight plus borders); floorPx: the
-// grip's height, or null.
-export function promptHeight({ contentPx, floorPx = null, viewportPx }) {
-  const floor = Math.max(PROMPT_MIN_PX, floorPx || 0);
+// grip's height, or null; minPx: the empty box's height.
+export function promptHeight({ contentPx, floorPx = null, viewportPx, minPx = PROMPT_MIN_PX }) {
+  const floor = Math.max(minPx, floorPx || 0);
   const cap = Math.max(floor, Math.round(viewportPx * PROMPT_CAP_SHARE));
   return { height: Math.min(Math.max(contentPx, floor), cap), scrolls: contentPx > cap };
 }
 
 // A grip drag: the floor it asks for, kept between the minimum and the
 // grip's share of the window.
-export function gripFloor(px, viewportPx) {
-  return Math.round(Math.min(Math.max(px, PROMPT_MIN_PX), viewportPx * PROMPT_GRIP_SHARE));
+export function gripFloor(px, viewportPx, minPx = PROMPT_MIN_PX) {
+  return Math.round(Math.min(Math.max(px, minPx), viewportPx * PROMPT_GRIP_SHARE));
 }

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

@@ -8,6 +8,9 @@ export function api(path, opts = {}) {
     if (!r.ok) {
       const error = new Error(`${j.detail || j.error || r.statusText} (${r.status})`);
       error.status = r.status;
+      // The server's error code ({error: "owned_by_tui", detail}): what
+      // the page matches on, never the message's words.
+      error.code = j.error || null;
       throw error;
     }
     return j;
@@ -251,3 +254,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 });
+}