samagotchi 0.61.0 → 0.62.0

data/lib/samagotchi/web/app.rb

@@ -1696,7 +1696,8 @@ module Samagotchi
         source = if live
                    persisted.merge(live_metrics).merge(
                      "started_at" => persisted["started_at"] || live_metrics["started_at"],
-                     "turn_records" => merge_timing_records(persisted["turn_records"], live_metrics["turn_records"]),
+                     "turn_records" => merge_timing_records(without_running_turn(persisted["turn_records"], live_metrics),
+                                                            live_metrics["turn_records"]),
                      "tool_records" => merge_timing_records(persisted["tool_records"], live_metrics["tool_records"])
                    )
                  else
@@ -1777,6 +1778,18 @@ module Samagotchi
         AnalyticsFile.read(@session_class.session_dir(session_id, state_dir: default_state_dir)) || {}
       end
 
+      # The saved turn records without the one the live worker is running:
+      # its turn checkpoint saves that turn's record so far as a killed
+      # turn's (canceled, worker_stopped, SessionMetrics#persist's
+      # running_turn), which is only true once the worker is gone.
+      def without_running_turn(records, live_metrics)
+        active = live_metrics["active_turn"]
+        id = active.is_a?(Hash) ? active["id"] || active[:id] : nil
+        return records if id.nil?
+
+        Array(records).reject { |record| record.is_a?(Hash) && (record["id"] || record[:id]) == id }
+      end
+
       def merge_timing_records(persisted, live)
         (Array(persisted) + Array(live)).each_with_object({}) do |record, records|
           next unless record.is_a?(Hash)

data/lib/samagotchi/web/message_parts.rb

@@ -9,6 +9,7 @@ require_relative "../tools/builtins"
 require_relative "../image_store"
 require_relative "../llm_context_edit"
 require_relative "../token_usage"
+require_relative "../row_refs"
 
 module Samagotchi
   module Web
@@ -37,7 +38,8 @@ module Samagotchi
     # A plugin tool's params are what its live row showed (its preview),
     # saved with the result as tool_params (native: one per call, chat: one
     # per result); its label ("chrome: screenshot") likewise as tool_labels,
-    # the part's label:. The web server has no Engine and runs no plugins, so a
+    # the part's label:, and its row refs as tool_refs (RowRefs, checked
+    # again here), the part's refs:. The web server has no Engine and runs no plugins, so a
     # result without them (older sessions) falls back to the given
     # registry: the built-ins', and a plugin tool's arguments as key="value"
     # from the parsers' args:, as the live row shows them for a tool
@@ -106,11 +108,12 @@ module Samagotchi
         shown = saved_list(responses, :tool_params, calls.length)
         labels = saved_list(responses, :tool_labels, calls.length)
         diffs = saved_list(responses, :tool_diffs, calls.length)
+        refs = saved_list(responses, :tool_refs, calls.length)
         ids = saved_list(responses, :tool_ids, calls.length)
         images = split_images(responses, calls.length)
         calls.each_with_index.map do |call, i|
-          tool_part(call, outputs[i], registry, shown[i], images[i], label: labels[i], diff: diffs[i], cwd: cwd,
-                                                                     tool_id: ids[i], marks: marks)
+          tool_part(call, outputs[i], registry, shown[i], images[i], label: labels[i], diff: diffs[i], refs: refs[i],
+                                                                     cwd: cwd, tool_id: ids[i], marks: marks)
         end
       end
 
@@ -144,7 +147,8 @@ module Samagotchi
           response = by_id[field(raw, :id).to_s] || (responses[i] && !unique.call(ids[i]) ? responses[i] : nil)
           tool_part(call, response && field(response, :content).to_s, registry, field(response, :tool_params),
                     response && field(response, :images), label: field(response, :tool_labels),
-                                                          diff: field(response, :tool_diffs), cwd: cwd,
+                                                          diff: field(response, :tool_diffs),
+                                                          refs: field(response, :tool_refs), cwd: cwd,
                                                           tool_id: Array(field(response, :tool_ids)).first, marks: marks)
         end
       end
@@ -224,10 +228,12 @@ module Samagotchi
 
       # +shown+ is the saved params line, when it is a String.
       # +diff+ is what an edit/write changed (EditPreview.change), saved as
-      # tool_diffs. +cwd+: the session's working directory, for the title.
+      # tool_diffs. +refs+: a plugin tool's row refs, saved as tool_refs
+      # (RowRefs.for_display checks them again against +cwd+). +cwd+: the
+      # session's working directory, for the title.
       # +tool_id+: its output's ToolIds id, with its ✂ mark in +marks+.
-      def tool_part(call, output, registry, shown = nil, images = nil, label: nil, diff: nil, cwd: nil, tool_id: nil,
-                    marks: {})
+      def tool_part(call, output, registry, shown = nil, images = nil, label: nil, diff: nil, refs: nil, cwd: nil,
+                    tool_id: nil, marks: {})
         name = call[:name].to_s
         params = shown.is_a?(String) ? shown : ToolActivity.tool_activity_params(name, call, registry: registry)
         part = { tool: name, params: params.to_s }
@@ -240,9 +246,11 @@ module Samagotchi
           part[:output] = output.length > OUTPUT_MAX ? output[0, OUTPUT_MAX] : output
           part[:output_truncated] = true if output.length > OUTPUT_MAX
         end
-        refs = Array(images).select { |ref| ref.is_a?(Hash) }
-        part[:images] = refs.map { |ref| ImageStore.symbolize(ref).slice(:file, :name, :width, :height) } unless refs.empty?
+        shots = Array(images).select { |image| image.is_a?(Hash) }
+        part[:images] = shots.map { |image| ImageStore.symbolize(image).slice(:file, :name, :width, :height) } unless shots.empty?
         part[:diff] = diff if diff.is_a?(Hash)
+        row_refs = RowRefs.for_display(refs, cwd: cwd)
+        part[:refs] = row_refs unless row_refs.empty?
         if tool_id
           part[:tool_id] = tool_id.to_s
           mark = mark_of(tool_id.to_s, marks, output)

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

@@ -45,8 +45,11 @@ export function newActivity() {
 //   ref: what the row traces to (the server's FileRef: {kind: "file",
 //     path, line?, end_line?}, the file a file tool touched), which
 //     refs.js makes the row's title and diff lines open.
+//   refs: a plugin tool's refs (the server's RowRefs: [{kind, target,
+//     label?, actions}]): the first on the row's title, the others in its
+//     menu (refs.js bindRowRefs).
 export const ACTIVITY_FIELDS = Object.freeze(["title", "called_as"]);
-export const EVENT_FIELDS = Object.freeze(["view", "ref"]);
+export const EVENT_FIELDS = Object.freeze(["view", "ref", "refs"]);
 const ROW_FIELDS = Object.freeze([...ACTIVITY_FIELDS, ...EVENT_FIELDS]);
 
 // The +fields+ of +source+ that are set, as an object (for a spread).

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

@@ -38,9 +38,9 @@ import { emptySessionState, sessionStateFrom } from "./session_state.js";
 import { createModelPicker } from "./model_picker.js";
 import { chipName, chipsHtml, imageFiles, restoredChips, thumbsHtml, turnRefs, turnText } from "./images.js";
 import { escapeHtml, noteHtml, normalize, steerRowHtml, firstPreview, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy, childrenSummary, promptNotesChip } from "./format.js";
-import { createTurnView, turnHistoryNodes } from "./turn_view.js";
+import { createTurnView, stepText, turnHistoryNodes } from "./turn_view.js";
 import { BADGES, emptyAnswerHtml, htmlElement, stateBadgeHtml, userBubbleHtml } from "./turn_html.js";
-import { createStageView } from "./stage_view.js";
+import { createStageView, FOLD_MS } from "./stage_view.js";
 import { CONTINUE_OPENER, isOpener, chainDate, chainNeighbours, continueRefusal, continuedText, openChildrenHtml } from "./chains.js";
 import { createTaskStopper } from "./task_stop.js";
 import { appendQuote } from "./annotations.js";
@@ -55,7 +55,7 @@ import { createCommandList } from "./command_list.js";
 import { createPromptHistory } from "./prompt_history.js";
 import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
 import { allScopeHref, projectScopeHref, scopeDir } from "./scope.js";
-import { shouldFollowScroll, keepFollowing } from "./scroll.js";
+import { easeScrollTo, FOLLOW_MS, shouldFollowScroll, keepFollowing } from "./scroll.js";
 import { SHORT_WINDOW_QUERY, stripAutoHidden } from "./strip.js";
 import { applySessionEvent, flattenFamilies, inTree, sortedByUpdated } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
@@ -264,6 +264,7 @@ const questionCards = createQuestionCards({
   isNearBottom: () => isNearBottom(),
   scrollToEnd: () => { historyEl.scrollTop = historyEl.scrollHeight; },
   removeHintIfEmpty: () => removeHintIfEmpty(),
+  askingText: () => turnDom.askingText(),
 });
 // The event id (or, from an older worker, the event_seq) the selected session
 // was rendered at (null: no live worker then), where a stream opened later
@@ -1101,6 +1102,7 @@ function showRecap(text, turnsSince = 0) {
   details.appendChild(body);
   // A stale one sits where it was written, above the turns it doesn't cover.
   // Never in the stage: a recap is between turns.
+  turnDom.settleFold?.();
   const before = recapPlace(turnPromptBubbles(), turnsSince);
   keepFollowing(historyEl, () => (before ? historyEl.insertBefore(details, before) : appendAboveLiveTiming(historyEl, details, liveTurn.timing.el)));
 }
@@ -1299,12 +1301,15 @@ function turnAnswerEl(turnEls) {
 function placeResolvedQuestion(entry, before) {
   const pq = entry.pending_question;
   if (!pq?.id || !(entry.answer || entry.cancelled)) return;
-  questionCards.renderQuestion(pq);
+  const turnEls = reloadedTurnEls(before);
+  const asked = Number(entry.iteration) || 1;
+  // The reply that asked: its step's text in the reloaded block (the card
+  // keeps it, as live), never the running turn's.
+  const said = stepText(turnEls.find((el) => el.matches(".turn-work")), asked);
+  questionCards.renderQuestion(pq, { said });
   const card = questionCards.questionCard();
   if (!card || card.dataset.qid !== String(pq.id)) return;
   questionCards.resolveQuestion(pq.id, { answer: entry.answer || null, cancelled: !!entry.cancelled, reason: entry.reason || "" });
-  const turnEls = reloadedTurnEls(before);
-  const asked = Number(entry.iteration) || 1;
   const later = turnEls.find((el) => el.matches(".bubble.user.steered") && Number(el.dataset.step) > asked);
   historyEl.insertBefore(card, later || turnAnswerEl(turnEls) || before);
 }
@@ -1509,6 +1514,7 @@ function currentSessionDuration() {
 
 // The stage takes a running turn's rows (its extras); else the history.
 function appendToHistory(el) {
+  // (The stage's place first moves a turn still sliding away into the history.)
   if (turnDom.place?.(el)) return;
   appendAboveLiveTiming(historyEl, el, liveTurn.timing.el);
 }
@@ -2039,15 +2045,51 @@ fitPrompt();
 // The card floats over the history: keep the history's bottom padding at the
 // card's height, and stay pinned to the end if the reader was there, since the
 // card grows (text, chips, Cancel, a wrapping footer) under a reader at the end.
+// In the stage view the stage floats above the card, out of the dock's flow
+// (stage_view.js): the reserve counts it too, with its 10 px gap, while it
+// shows.
 const dockEl = $("#dock");
 const centerEl = $("#center");
-new ResizeObserver(() => {
-  // The stage's height too: a reader at the end stays there.
-  const follow = atHistoryEnd();
-  centerEl.style.setProperty("--dock-h", `${dockEl.offsetHeight}px`);
-  if (follow) historyEl.scrollTop = historyEl.scrollHeight;
+// A leaving stage (the hand-off's slide) no longer counts: the reserve eases
+// down over the slide (index.html, #center.reserve-easing).
+const stageEl = view === "stage" ? turnDom.root : null;
+const STAGE_GAP = 10;
+function dockReserve() {
+  const shown = stageEl && !stageEl.hidden && !stageEl.classList.contains("leaving");
+  return dockEl.offsetHeight + (shown ? stageEl.offsetHeight + STAGE_GAP : 0);
+}
+const historyEnd = () => historyEl.scrollHeight - historyEl.clientHeight;
+// A reader at the end stays there when the reserve changes: at once for the
+// composer card, eased for the stage (+fromStage+: it appeared, grew or
+// leaves), so the history glides rather than jumps. An eased follow running
+// counts as at the end.
+function updateReserve({ fromStage = false } = {}) {
+  const follow = atHistoryEnd() || historyEl.dataset.following !== undefined;
+  const leaving = !!stageEl?.classList.contains("leaving");
+  centerEl.classList.toggle("reserve-easing", leaving);
+  const reserve = `${dockReserve()}px`;
+  const changed = centerEl.style.getPropertyValue("--dock-h") !== reserve;
+  if (changed) centerEl.style.setProperty("--dock-h", reserve);
+  if (changed && follow) {
+    if (fromStage) easeScrollTo(historyEl, historyEnd, { ms: leaving ? FOLD_MS : FOLLOW_MS, reduce: matchMedia("(prefers-reduced-motion: reduce)").matches });
+    else if (historyEl.dataset.following === undefined) historyEl.scrollTop = historyEl.scrollHeight;
+  }
   placeToast();
-}).observe(dockEl);
+}
+const dockObserver = new ResizeObserver((entries) => updateReserve({ fromStage: entries.some((e) => e.target === stageEl) }));
+dockObserver.observe(dockEl);
+if (stageEl) {
+  dockObserver.observe(stageEl);
+  // Only showing, hiding and leaving change the reserve (not the stage's
+  // other classes: waiting, in-use…).
+  let stageShown = "";
+  new MutationObserver(() => {
+    const shown = `${stageEl.hidden}|${stageEl.classList.contains("leaving")}`;
+    if (shown === stageShown) return;
+    stageShown = shown;
+    updateReserve({ fromStage: true });
+  }).observe(stageEl, { attributes: true, attributeFilter: ["class", "hidden"] });
+}
 window.addEventListener("resize", () => placeToast());
 
 promptEl.addEventListener("paste", (e) => {
@@ -2260,14 +2302,16 @@ async function setArchived(id, archive, { undo = true } = {}) {
 
 // The toast sits above the session's composer card (measured: it grows with
 // a wrapping footer or a taller box), so it never covers the card's
-// controls; with no card in sight (the start page, all sessions) the CSS's
-// 24 px from the bottom.
+// controls, and above the stage while it shows; with no card in sight (the
+// start page, all sessions) the CSS's 24 px from the bottom.
 function placeToast() {
   const gap = 12;
   const dock = document.getElementById("dock");
   const r = dock.getBoundingClientRect();
   const over = document.body.classList.contains("has-session") && r.height > 0;
-  const bottom = over ? `${Math.round(window.innerHeight - r.top + gap)}px` : "";
+  const stage = document.getElementById("turnStage");
+  const top = stage && !stage.hidden ? Math.min(r.top, stage.getBoundingClientRect().top) : r.top;
+  const bottom = over ? `${Math.round(window.innerHeight - top + gap)}px` : "";
   const root = document.documentElement.style;
   if (root.getPropertyValue("--toast-bottom") !== bottom) {
     if (bottom) root.setProperty("--toast-bottom", bottom);

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

@@ -4,10 +4,13 @@
 // through `continues`, forward through the session whose `continues` names
 // this one. The lists fold a chain into its latest listed link's card (a
 // `day N` chip, its earlier links in a popover); the session page links the
-// previous and the next link. Pure: app.js places the markup and binds it.
+// previous and the next link. Pure: lists_view.js places the chip and rows
+// (lit-html templates) and app.js the toast's markup, and they bind them.
 import { escapeHtml, normalize, previewForCard, relativeTime } from "./format.js";
 import { stoppedBadge, waitingBadge } from "./sessions_list.js";
 import { waitingOn } from "./notify.js";
+import { archivedBadge, rowBadgesTemplate, rowDotTemplate } from "./families_view.js";
+import { html, nothing } from "./vendor/lit-html.js";
 
 // The opener a new link's composer is filled with (never sent: the user
 // edits or sends it). The same for every chain.
@@ -148,10 +151,11 @@ export function chainOthers(f) {
 // The chip in a chain's card: "day 3" (the head's place; "day 2 of 3" when
 // later links aren't listed), with a live dot / "waiting" when one of the
 // other links has a worker / waits on the user (typing in an archived link
-// brings it back, but it stays folded here). "" for a family in no chain.
+// brings it back, but it stays folded here). nothing for a family in no
+// chain. A lit-html template, as families_view.js's chip.
 // @param open whether the list is open (aria-expanded)
-export function chainChipHtml(f, { open = false } = {}) {
-  if (!f?.chain) return "";
+export function chainChipTemplate(f, { open = false } = {}) {
+  if (!f?.chain) return nothing;
   const { links, at } = f.chain;
   const others = chainOthers(f);
   const live = others.filter(({ session: s }) => s.owner === "worker").length;
@@ -162,9 +166,10 @@ export function chainChipHtml(f, { open = false } = {}) {
   const later = links.length - 1 - at;
   const parts = [earlier ? `${earlier} earlier ${earlier === 1 ? "link" : "links"}` : "", later ? `${later} later` : ""].filter(Boolean);
   const title = `Session chain: day ${day} of ${links.length} (${parts.join(", ")}); open the list`;
-  const liveHtml = live ? `<span class="cc-live"> · <span class="live-dot" aria-hidden="true"></span>${live} live</span>` : "";
-  const waitingHtml = waiting ? ` · <span class="cc-waiting">${waiting} waiting</span>` : "";
-  return `<button type="button" class="chain-chip${waiting ? " waiting" : ""}" aria-expanded="${open ? "true" : "false"}" title="${escapeHtml(title)}"><span class="cc-arrow" aria-hidden="true">↩</span>${escapeHtml(text)}${liveHtml}${waitingHtml}</button>`;
+  const liveT = live ? html`<span class="cc-live"> · <span class="live-dot" aria-hidden="true"></span>${live} live</span>` : nothing;
+  const waitingT = waiting ? html` · <span class="cc-waiting">${waiting} waiting</span>` : nothing;
+  return html`<button type="button" class=${`chain-chip${waiting ? " waiting" : ""}`} aria-expanded=${open ? "true" : "false"}
+    title=${title}><span class="cc-arrow" aria-hidden="true">↩</span>${text}${liveT}${waitingT}</button>`;
 }
 
 // The chain's list (the chip's popover): one row per other link, newest
@@ -172,7 +177,7 @@ export function chainChipHtml(f, { open = false } = {}) {
 // its preview), the waiting / stopped badge, archived. A row's click opens
 // that link (families_view.js's popover binds .family-row[data-id]).
 // @param activeId the open session's id (its row is .active)
-export function chainRowsHtml(f, { activeId = null, now = Date.now() } = {}) {
+export function chainRowsTemplate(f, { activeId = null, now = Date.now() } = {}) {
   const byId = new Map((f?.chain?.links || []).map((s) => [s.id, s]));
   const rows = chainOthers(f).map(({ session: s, day }) => {
     const cls = ["family-row", "chain-row"];
@@ -180,22 +185,15 @@ export function chainRowsHtml(f, { activeId = null, now = Date.now() } = {}) {
     if (s.archived) cls.push("archived");
     const waiting = waitingBadge(s, { inFamily: true });
     const stopped = waiting ? null : stoppedBadge(s);
-    const dotWord = waiting ? waiting.title : s.status;
     const date = chainDate(s.created_at);
     const ago = relativeTime(s.updated_at || s.created_at || "", now);
-    const parts = [
-      `<span class="status dot ${escapeHtml(s.status || "")}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord || "")}" aria-label="${escapeHtml(dotWord || "")}"></span>`,
-      `<span class="cr-day">day ${day}</span>`,
-      date ? `<span class="cr-date">${escapeHtml(date)}</span>` : "",
-      `<span class="fr-preview">${escapeHtml(s.recap || chainTitle(s, byId))}</span>`,
-      waiting ? `<span class="attn attn-${waiting.kind}" title="${escapeHtml(waiting.title)}">${escapeHtml(waiting.text)}</span>` : "",
-      stopped ? `<span class="stopped-badge" title="${escapeHtml(stopped.title)}">${escapeHtml(stopped.text)}</span>` : "",
-      s.archived ? `<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>` : "",
-    ].join("");
     const tip = `${s.id} · ${s.status || ""}${ago ? ` · updated ${ago}` : ""}`;
-    return `<div class="${cls.join(" ")}" data-id="${escapeHtml(s.id)}" style="--depth:1" role="listitem"><button type="button" class="fr-open" title="${escapeHtml(tip)}">${parts}</button></div>`;
+    return html`<div class=${cls.join(" ")} data-id=${s.id} style=${"--depth:1"} role=${"listitem"}><button type="button" class="fr-open"
+      title=${tip}>${rowDotTemplate(s, waiting)}<span class="cr-day">day ${day}</span>${
+      date ? html`<span class="cr-date">${date}</span>` : nothing}<span class="fr-preview">${s.recap || chainTitle(s, byId)}</span>${
+      rowBadgesTemplate(waiting, stopped)}${s.archived ? archivedBadge : nothing}</button></div>`;
   });
-  return `<div class="family-rows chain-rows" role="list">${rows.join("")}</div>`;
+  return html`<div class="family-rows chain-rows" role="list">${rows}</div>`;
 }
 
 // What the page does with a refused continue (POST /api/sessions

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

@@ -7,6 +7,9 @@
 // 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.
 
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { keepFocus } from "./keep_focus.js";
+
 // "now", "3m", "2h", "4d" since an ISO time; "" for none.
 export function ageText(iso, now = Date.now()) {
   const at = Date.parse(iso || "");
@@ -38,33 +41,40 @@ export function chipModel(rows, now = Date.now()) {
   });
 }
 
-// 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>' : "");
+const ADD_TITLE = "Attach a URL (a GitHub PR) the agent can read and hears about when it changes";
+
+// The chips (a lit-html template; attributes after a bound one are bound
+// too, so they keep their order). addUrl: end with the "+ URL" chip;
+// open: the chip whose popover is open (a source's name), addOpen: the
+// "+ URL" form is.
+export function chipsTemplate(chips, { addUrl = false, open = null, addOpen = false } = {}) {
+  return html`${chips.map((chip) => html`<button type="button" class=${`ctx-chip ${chip.state}${chip.name === open ? " open" : ""}`}
+    data-name=${chip.name} title=${chip.title} aria-haspopup=${"dialog"}>${
+      chip.state === "unread" ? html`<span class="ctx-dot" aria-hidden="true"></span>` : nothing}${chip.label}</button>`)}${
+    addUrl ? html`<button type="button" class=${`ctx-chip ctx-add${addOpen ? " open" : ""}`} data-act=${"add"} title=${ADD_TITLE}
+      aria-haspopup=${"dialog"}>+ URL</button>` : nothing}`;
 }
 
-// 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 "+ URL" popover: the URL, an optional why, Attach; +error+ after a
+// try that failed, +busy+ while one runs.
+export function addFormTemplate({ error = null, busy = false } = {}) {
+  return html`<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" required autocomplete="off"
+    ><input class="ctx-add-input" name="why" type="text" placeholder="why (optional)" maxlength="300" autocomplete="off"
+    >${error ? html`<div class="ctx-pop-error" role="alert">${error}</div>` : nothing
+    }<div class="ctx-pop-actions"><button type="submit" class="ctx-add-submit" ?disabled=${busy}>Attach</button></div></form>`;
 }
 
-// The popover's inside for one row (GET …/context's).
-export function popoverHtml(row, escapeHtml, now = Date.now()) {
+// The popover's inside for one row (GET …/context's); +text+ the row's
+// text once "view text" read it (null before).
+export function popoverTemplate(row, { text = null, 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>` : "");
+    ? html`<a class="ctx-pop-hint" href=${url} target=${"_blank"} rel=${"noopener noreferrer"}>${url}</a>`
+    : (row.hint ? html`<div class="ctx-pop-hint">${row.hint}</div>` : nothing);
   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" : "")]
@@ -73,29 +83,32 @@ export function popoverHtml(row, escapeHtml, now = Date.now()) {
   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>`;
+  return html`<div class="ctx-pop-head"><strong>${row.name}</strong
+    ><span class="ctx-pop-kind">${row.scope} · ${kind}</span
+    ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
+    >${row.why ? html`<div class="ctx-pop-why">${row.why}</div>` : nothing}${hint}${
+      row.summary ? html`<div class="ctx-pop-summary">${row.summary}</div>` : nothing
+    }<div class="ctx-pop-meta">${meta}</div
+    >${row.error ? html`<div class="ctx-pop-error">last refresh failed: ${row.error}</div>` : nothing
+    }<pre class="ctx-pop-text" ?hidden=${text === null}>${text ?? ""}</pre
+    ><div class="ctx-pop-actions">${row.has_text && text === null ? html`<button type="button" data-act="view">view text</button>` : nothing
+    }<button type="button" class="ctx-pop-detach" data-act="detach" title=${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 }) {
+// show(id, name), detach(id, name), add(id, {url, why})}; toast(text).
+// Chips, popover and form are lit templates: a redraw (a refresh, the
+// minute's tick) keeps their nodes, so focus and typed text stay.
+export function createContextChips({ el, api, toast = () => {}, doc = document, win = window }) {
   let sessionId = null;
   let rows = [];
   let canAdd = false;
   let openName = null;
   let loadSeq = 0;
+  // The open row's text once read (view text), and the "+ URL" form's
+  // state ({error, busy}).
+  let text = null;
+  let addState = {};
   const pop = doc.createElement("div");
   pop.id = "contextPopover";
   pop.className = "ctx-popover";
@@ -106,17 +119,20 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
   // openName ADD: the "+ URL" form is open.
   const ADD = "\u0000add";
 
-  function render() {
+  function drawChips() {
     const chips = chipModel(rows);
-    el.innerHTML = chipsHtml(chips, escapeHtml, { addUrl: canAdd });
+    // A source inserted before the focused chip: the focus stays on its source.
+    keepFocus(el, "data-name", () => render(chipsTemplate(chips, { addUrl: canAdd, open: openName === ADD ? null : openName,
+                                                                   addOpen: openName === ADD }), el));
     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");
+  }
+
+  // The chips, and the open popover closed when what it is for has gone.
+  function draw() {
+    if (openName === ADD ? !canAdd : openName && !chipModel(rows).some((chip) => chip.name === openName)) close();
+    else drawChips();
   }
 
   async function refresh() {
@@ -134,10 +150,11 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
       rows = [];
       canAdd = false;
     }
-    render();
-    if (openName && openName !== ADD) {
+    draw();
+    // An open popover follows its row, but not while it shows the text.
+    if (openName && openName !== ADD && text === null) {
       const row = rows.find((r) => r.name === openName);
-      if (row && pop.querySelector(".ctx-pop-text")?.hidden !== false) fill(row);
+      if (row) fill(row);
     }
   }
 
@@ -146,7 +163,6 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
     rows = [];
     canAdd = false;
     close();
-    render();
     return refresh();
   }
 
@@ -155,11 +171,10 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
     rows = [];
     canAdd = false;
     close();
-    render();
   }
 
   function fill(row) {
-    pop.innerHTML = popoverHtml(row, escapeHtml);
+    render(popoverTemplate(row, { text }), pop);
   }
 
   // Above the chip, inside the window with a 16px gutter.
@@ -174,19 +189,30 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
   function open(name, chip) {
     const row = rows.find((r) => r.name === name);
     if (!row) return;
+    // Another popover's nodes go, so this one starts fresh.
+    render(nothing, pop);
     openName = name;
+    text = null;
     fill(row);
     pop.hidden = false;
     place(chip);
-    el.querySelectorAll(".ctx-chip").forEach((c) => c.classList.toggle("open", c.dataset.name === name));
+    drawChips();
   }
 
-  function openAdd(chip, state = {}) {
+  const drawAdd = (changes = {}) => {
+    addState = { ...addState, ...changes };
+    render(addFormTemplate(addState), pop);
+  };
+
+  function openAdd(chip) {
+    render(nothing, pop);
     openName = ADD;
-    pop.innerHTML = addFormHtml(escapeHtml, state);
+    text = null;
+    addState = {};
+    drawAdd();
     pop.hidden = false;
     place(chip);
-    el.querySelectorAll(".ctx-chip").forEach((c) => c.classList.toggle("open", c === chip));
+    drawChips();
     pop.querySelector('input[name="url"]')?.focus();
   }
 
@@ -195,8 +221,7 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
     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;
+    drawAdd({ busy: true });
     try {
       const data = await api.add(id, { url, why: why || undefined });
       if (id !== sessionId) return;
@@ -205,32 +230,35 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
       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+\)$/, "") });
+      // The same form again: what the user typed stays; the URL gets focus.
+      drawAdd({ busy: false, error: String(e.message).replace(/ \(\d+\)$/, "") });
+      pop.querySelector('input[name="url"]')?.focus();
     }
   }
 
   function close() {
     openName = null;
+    text = null;
+    addState = {};
     pop.hidden = true;
-    el.querySelectorAll(".ctx-chip.open").forEach((c) => c.classList.remove("open"));
+    render(nothing, pop);
+    drawChips();
   }
 
   async function viewText() {
     const name = openName;
-    const pre = pop.querySelector(".ctx-pop-text");
-    if (!name || !pre) return;
+    if (!name || name === ADD) 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();
+      const row = rows.find((r) => r.name === name);
+      if (!row) return;
+      text = data.text || "";
+      fill(row);
     } 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;
@@ -279,7 +307,7 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
   });
   win.addEventListener("focus", () => refresh());
   // The ages move on by themselves.
-  win.setInterval(() => { if (rows.length) render(); }, 60_000);
+  win.setInterval(() => { if (rows.length) drawChips(); }, 60_000);
 
   return { load, clear, refresh, close, get rows() { return rows; } };
 }