samagotchi 0.2.0 → 0.3.0

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

@@ -6,6 +6,8 @@ import {
   cancelTurn,
   stopSession,
   deleteSession,
+  archiveSession,
+  unarchiveSession,
   sendAnswer,
   dismissQuestion,
   sendCommand,
@@ -17,13 +19,14 @@ import {
 } from "./data.js";
 import { MODEL_KEY, modelNames, pickModel } from "./model_pick.js";
 import { chipName, chipsHtml, imageFiles, restoredChips, thumbsHtml, turnRefs, turnText } from "./images.js";
-import { escapeHtml, messageBodyHtml, noteHtml, normalize, userBodyHtml, ownerBadge, previewForCard, relativeTime, firstMessageOf, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy } from "./format.js";
+import { escapeHtml, messageBodyHtml, noteHtml, normalize, steerRowHtml, userBodyHtml, ownerBadge, previewForCard, relativeTime, firstMessageOf, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy } from "./format.js";
 import { chatHistoryHtml, createChatView } from "./chat_view.js";
 import { createTurnView, turnHistoryHtml } from "./turn_view.js";
-import { annotationSource, appendQuote, quoteBlock } from "./annotations.js";
-import { COPY_SOURCE_ATTR, copySourceAttr, copyText, installCopy } from "./copy.js";
+import { annotateBarLeft, annotationSource, appendQuote, quoteBlock } from "./annotations.js";
+import { parsePresets, presetNote } from "./annotate_presets.js";
+import { COPY_SOURCE_ATTR, copySource, copySourceAttr, copyText, installCopy, showsAnswer } from "./copy.js";
 import { routeChunk } from "./chunk_router.js";
-import { extractCtxPct } from "./ctx.js";
+import { extractCtxPct, savedCtxPct, cardCtxText } from "./ctx.js";
 import { approvalAllowed, approvalView, isApproval, nextCardAction, resultText, summaryText } from "./question_card.js";
 import { cardClass, cardInnerHtml, cardPlace, splitSnapshotCards, turnNoticePlace } from "./card.js";
 import { gripFloor, promptHeight } from "./composer_size.js";
@@ -32,12 +35,13 @@ import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
 import { allScopeHref, cardFolder, projectScopeHref, scopeDir } from "./scope.js";
 import { shouldFollowScroll, keepFollowing } from "./scroll.js";
 import { stripColumns, stripShowParts } from "./strip.js";
-import { applySessionEvent, sortedByUpdated, withChildrenAfterParents } from "./sessions_list.js";
+import { applySessionEvent, listedSessions, sortedByUpdated, withChildrenAfterParents } from "./sessions_list.js";
+import { NOTIFY_CHANNEL, attentionText, createNotifyGate, initialAttentionState, trackAttention } from "./notify.js";
 import {
   appendAboveLiveTiming, cancelLineText, elapsedSince, formatDuration, normalizeTiming, turnTimingText,
 } from "./timing.js";
 import { DONE_MS, applyInitEvent, dropDone, initRowHtml, newInitTasks, seedInitTasks } from "./init_row.js";
-import { clientLabel, commandView, continueLine, hookNoticeLabel, isCommandLine, isOwn, newClientId, promptOps, reminderText, restoreAction, snapshotEvents, turnOutput, workerGoneText } from "./turn_events.js";
+import { clientLabel, commandView, continueLine, emptyRetryLine, hookNoticeLabel, isCommandLine, isOwn, keepEarlyRestore, newClientId, promptOps, reminderText, restoreAction, restoreOnAck, snapshotEvents, turnOutput, webLocalReply, workerGoneText } from "./turn_events.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -121,6 +125,9 @@ let unmatchedMerge = false;
 // The enqueued_ids this page sent (from the /turn acks): only these come back
 // into the composer when their turn fails.
 const sentIds = new Set();
+// Own prompt_restored events that came before their /turn ack, by
+// enqueued_id: the ack puts that prompt back instead of clearing it.
+const earlyRestores = new Map();
 // The last turn_failed's line, shown again after prompt_restored's resync.
 let lastFailedText = null;
 
@@ -158,17 +165,20 @@ async function refresh() {
 function openSessionEvents() {
   eventsControl = openEvents({
     snapshot: (data) => {
+      noticeSessions("snapshot", data);
       allSessions = applySessionEvent(allSessions, "snapshot", data);
       render();
       const sess = allSessions.find((s) => s.id === selected);
       if (sess) followSelectedSession(sess);
     },
     session: (data) => {
+      noticeSessions("session", data);
       allSessions = applySessionEvent(allSessions, "session", data);
       render();
       if (data.session && data.session.id === selected) followSelectedSession(data.session);
     },
     session_gone: (data) => {
+      noticeSessions("session_gone", data);
       const next = applySessionEvent(allSessions, "session_gone", data);
       if (next !== allSessions) {
         allSessions = next;
@@ -217,7 +227,8 @@ function renderScope() {
     el.innerHTML = `<span class="scope-name" title="Sessions of every project">all projects</span>${backLink}${where ? `<span class="scope-where" title="New chats start in ${escapeHtml(where)}">new chat in<span class="path"><bdi>${escapeHtml(where)}</bdi></span></span>` : ""}`;
   }
   el.hidden = false;
-  document.title = scope.projectName ? `Chi · ${scope.projectName}` : "Chi";
+  baseTitle = scope.projectName ? `Chi · ${scope.projectName}` : "Chi";
+  setTitle();
   // The links follow the hash (an open session, the all-sessions view).
   el.querySelector(".scope-all:not(.scope-back)")?.addEventListener("click", (e) => {
     e.currentTarget.href = allScopeHref(location.hash, scope.dir);
@@ -227,10 +238,21 @@ function renderScope() {
   });
 }
 
-function filteredSessions() {
+// The strip, its count and the hidden strip's pill leave archived sessions
+// out; the all view shows them with "include archived". allSessions keeps
+// them all (parent chips, the open session).
+function shownSessions() {
+  return listedSessions(allSessions, false);
+}
+
+function allViewSessions() {
+  return listedSessions(allSessions, $("#includeArchived").checked);
+}
+
+function filteredSessions(list) {
   const q = $("#filter").value.trim().toLowerCase();
-  if (!q) return allSessions;
-  return allSessions.filter(
+  if (!q) return list;
+  return list.filter(
     (s) =>
       previewForCard(s).toLowerCase().includes(q) ||
       (s.first_preview || "").toLowerCase().includes(q) ||
@@ -252,7 +274,10 @@ function cardHtml(s, { deletable = false } = {}) {
   const timeHtml = ago ? `<span class="time" title="${escapeHtml(new Date(ts).toLocaleString())}">${escapeHtml(ago)}</span>` : "";
   const folder = cardFolder(s.working_directory, scope.projectName);
   const folderHtml = folder ? `<span class="folder" title="${escapeHtml(s.working_directory)}">${escapeHtml(folder)}</span>` : "";
-  return `<div class="card" data-id="${s.id}" title="${escapeHtml(tip)}${memTitle ? ` · ${escapeHtml(memTitle)}` : ""}"><div class="preview">${preview}</div>${s.recap ? `<div class="recap" title="${escapeHtml(s.recap)}">${escapeHtml(s.recap)}</div>` : ""}<div class="meta"><span class="status dot ${escapeHtml(s.status)}" title="${escapeHtml(s.status)}" aria-label="${escapeHtml(s.status)}"></span>${timeHtml}${folderHtml}${parentChipHtml(s)}${ownerBadgeHtml(s)}${s.used_memory_names && s.used_memory_names.length ? `<span title="${escapeHtml(s.used_memory_names.join(", "))}">mem ${s.used_memory_names.length}</span>` : ""}</div>${deletable ? `<button type="button" class="card-del" data-del="${escapeHtml(s.id)}" title="Delete session" aria-label="Delete session ${escapeHtml(s.short_id)}">\u2715</button>` : ""}</div>`;
+  const archivedHtml = s.archived ? `<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>` : "";
+  const ctx = cardCtxText(s.ctx_pct);
+  const ctxHtml = ctx ? `<span class="ctx" title="Context used after the last turn">${escapeHtml(ctx)}</span>` : "";
+  return `<div class="card${s.archived ? " archived" : ""}" data-id="${s.id}" title="${escapeHtml(tip)}${memTitle ? ` · ${escapeHtml(memTitle)}` : ""}"><div class="preview">${preview}</div>${s.recap ? `<div class="recap" title="${escapeHtml(s.recap)}">${escapeHtml(s.recap)}</div>` : ""}<div class="meta"><span class="status dot ${escapeHtml(s.status)}" title="${escapeHtml(s.status)}" aria-label="${escapeHtml(s.status)}"></span>${timeHtml}${ctxHtml}${folderHtml}${parentChipHtml(s)}${ownerBadgeHtml(s)}${archivedHtml}${s.used_memory_names && s.used_memory_names.length ? `<span title="${escapeHtml(s.used_memory_names.join(", "))}">mem ${s.used_memory_names.length}</span>` : ""}</div>${deletable ? `<button type="button" class="card-del" data-del="${escapeHtml(s.id)}" title="Delete session" aria-label="Delete session ${escapeHtml(s.short_id)}">\u2715</button>` : ""}</div>`;
 }
 
 // A delegated session's `↳ <parent>` chip; the parent's preview is the tooltip.
@@ -277,7 +302,7 @@ function fitStripColumns() {
 
 function render() {
   fitStripColumns();
-  renderTop(allSessions.slice(0, stripCols));
+  renderTop(shownSessions().slice(0, stripCols));
   if (allViewOpen()) renderAll();
 }
 
@@ -287,7 +312,7 @@ window.addEventListener("resize", () => {
   stripResizeTimer = setTimeout(() => {
     const before = stripCols;
     fitStripColumns();
-    if (stripCols !== before && allSessions.length) renderTop(allSessions.slice(0, stripCols));
+    if (stripCols !== before && allSessions.length) renderTop(shownSessions().slice(0, stripCols));
   }, 150);
 });
 
@@ -314,11 +339,15 @@ function renderTop(sessions) {
     topStripEl.innerHTML = `<div class="hint scope-error">${escapeHtml(scopeError)} · <a href="${escapeHtml(allScopeHref(""))}">show every session</a></div>`;
     return;
   }
-  if (!sessions.length) {
+  // Only archived sessions: no cards, but the tile stays, the way to them.
+  if (!allSessions.length) {
     topStripEl.innerHTML = "";
     return;
   }
-  const count = `${allSessions.length} ${allSessions.length === 1 ? "session" : "sessions"}`;
+  const n = shownSessions().length;
+  const count = n || allSessions.length === n
+    ? `${n} ${n === 1 ? "session" : "sessions"}`
+    : `${allSessions.length - n} archived`;
   const tile = `<div class="strip-side"><button type="button" class="card" id="allTile" title="All sessions, with search">All sessions →<span class="count">${count}</span></button><button type="button" class="strip-toggle" id="stripHide" title="Hide the latest sessions">hide ▴</button></div>`;
   topStripEl.innerHTML = sessions.map((s) => cardHtml(s)).join("") + tile;
   bindCards(topStripEl, select);
@@ -328,7 +357,7 @@ function renderTop(sessions) {
 
 // The hidden strip's pill: "▾ 5 sessions · ● 1 live", following the list.
 function renderStripShow() {
-  const { count, live } = stripShowParts(allSessions);
+  const { count, live } = stripShowParts(shownSessions());
   const liveHtml = live ? ` · <span class="live"><span class="live-dot" aria-hidden="true"></span>${escapeHtml(live)}</span>` : "";
   $("#stripShow").innerHTML = `<span class="pill-arrow" aria-hidden="true">\u25BE</span> ${escapeHtml(count)}${liveHtml}`;
 }
@@ -336,12 +365,13 @@ function renderStripShow() {
 // A delegated session sits right after its parent: applied on every
 // render, since a hub snapshot hands the list back in the server's order.
 function renderAll() {
-  const sessions = withChildrenAfterParents(filteredSessions());
-  $("#count").textContent = sessions.length === allSessions.length
-    ? `${allSessions.length}`
-    : `${sessions.length} / ${allSessions.length}`;
+  const listed = allViewSessions();
+  const sessions = withChildrenAfterParents(filteredSessions(listed));
+  $("#count").textContent = sessions.length === listed.length
+    ? `${listed.length}`
+    : `${sessions.length} / ${listed.length}`;
   if (!sessions.length) {
-    allListEl.innerHTML = `<div class="hint">${allSessions.length ? "No session matches." : "No sessions yet."}</div>`;
+    allListEl.innerHTML = `<div class="hint">${listed.length ? "No session matches." : "No sessions yet."}</div>`;
     return;
   }
   allListEl.innerHTML = sessions.map((s) => cardHtml(s, { deletable: true })).join("");
@@ -667,6 +697,11 @@ function renderSessionView(data) {
   currentDir = s.working_directory;
   currentOwner = s.owner || null;
   currentTiming = normalizeTiming(data.timing);
+  // The saved fill, so a reloaded or stopped session shows it before its
+  // next turn (a running turn's replay below streams over it).
+  const savedPct = savedCtxPct(data.timing?.context);
+  if (savedPct !== null) currentCtxPct = savedPct;
+  if (data.timing?.context?.window_tokens) currentCtxWindow = data.timing.context.window_tokens;
   currentFirstPreview = s.first_preview || previewForCard(s);
   currentUsedMemories = s.used_memory_names || [];
   currentPreloadedMemories = s.preloaded_memory_names || [];
@@ -684,6 +719,12 @@ function renderSessionView(data) {
       if(txt) currentFirstPreview = txt;
     }
   }
+  // A failed turn's prompt went back to the user: shown after the
+  // conversation, marked failed, as it was live (prompt_restored).
+  if (data.failed_turn) {
+    makeUserBubble(data.failed_turn.prompt, { state: "failed" }).dataset.failedTurn = "1";
+    addEndBubble(failedTurnText(data.failed_turn));
+  }
   seedSeenFromDom();
   seedInitTasks(initTasks, data.init_tasks);
   renderInitRow();
@@ -747,6 +788,36 @@ function setMarkdownWarning(warning) {
   markdownWarningEl.hidden = false;
 }
 
+// The turn-end re-read (turn_completed): the final answer's rendered
+// markdown, the status and the timing. Kept as turnEndRead, so an
+// answer_display re-read waits for it.
+let turnEndRead = Promise.resolve();
+// Resolves the wait of a turn_completed with display_pending (its
+// answer_display landed).
+let displayLanded = null;
+async function readTurnEnd() {
+  if (!selected) return;
+  try {
+    const d = await getSession(selected, { tail: true });
+    if (d.session) {
+      if (Array.isArray(d.session.used_memory_names)) currentUsedMemories = d.session.used_memory_names;
+      if (d.session.status) currentStatus = d.session.status;
+      applyTiming(d.timing);
+      finishLiveTurnTiming(currentTiming.turnRecords[currentTiming.turnRecords.length - 1]);
+      setMarkdownWarning(d.markdown_warning);
+      if (Array.isArray(d.messages)) applyFinalMarkdown(d.messages);
+      updateInfoBar();
+      const sess = allSessions.find(s=>s.id===selected);
+      if (sess) {
+        sess.used_memory_names = currentUsedMemories.slice();
+        sess.status = currentStatus;
+      }
+      render();
+      document.querySelectorAll(".card").forEach(el=>el.classList.toggle("active", el.dataset.id===selected));
+    }
+  } catch(_){}
+}
+
 function applyFinalMarkdown(messages) {
   const message = [...messages].reverse().find(
     (item) => item?.role === "assistant" && typeof item.html === "string",
@@ -755,11 +826,11 @@ function applyFinalMarkdown(messages) {
 
   const bubble = [...historyEl.querySelectorAll(".bubble.output")]
     .reverse()
-    .find((item) => normalize(item.textContent) === normalize(message.content));
+    .find((item) => showsAnswer(item, message, normalize));
   if (!bubble) return;
 
   bubble.classList.add("markdown");
-  bubble.setAttribute(COPY_SOURCE_ATTR, message.content);
+  bubble.setAttribute(COPY_SOURCE_ATTR, copySource(message));
   bubble.innerHTML = message.html;
 }
 
@@ -958,6 +1029,20 @@ function showGuardrailWarning(text, label = "guardrails") {
 // A hook's line to the user (event[:notify]): "<bundle>: text", in the
 // warning colour for level warn.
 // +before+: the element it goes above (a snapshot's notice), else the end.
+// A plugin's steers (pending_input_merged's steers): in the turn view a row
+// of the running turn's step, else a bubble.
+function showSteers(steers) {
+  for (const steer of steers || []) {
+    if (turnDom.steer(steer)) continue;
+    removeHintIfEmpty();
+    const holder = document.createElement("div");
+    holder.innerHTML = steerRowHtml(steer, { bubble: true });
+    const follow = isNearBottom();
+    appendToHistory(holder.firstChild);
+    if (follow) historyEl.scrollTop = historyEl.scrollHeight;
+  }
+}
+
 function showHookNotice(data, { before = null } = {}) {
   removeHintIfEmpty();
   const el = document.createElement("div");
@@ -995,7 +1080,9 @@ function drawCard(el, card) {
 
 // Show +card+: update the one with its id where it is, else add it (a
 // running turn's card as a row of its step; else before +before+ or at the
-// end of the history).
+// end of the history). A running turn's card with actions asks the user
+// something (check-in's Nudge / Keep going / Stop): it goes under the turn's
+// block, not into a step that collapses when the next one starts.
 function upsertCard(card, { before = null } = {}) {
   if (!card || !card.id) return;
   const existing = cardElement(card.id);
@@ -1008,7 +1095,8 @@ function upsertCard(card, { before = null } = {}) {
   removeHintIfEmpty();
   const el = document.createElement("div");
   drawCard(el, card);
-  if (card.in_turn && !before && turnDom.card(el)) return;
+  const asks = (card.actions || []).some((a) => a && a.command);
+  if (card.in_turn && !before && !asks && turnDom.card(el)) return;
   const follow = isNearBottom();
   if (before) historyEl.insertBefore(el, before);
   else appendToHistory(el);
@@ -1089,7 +1177,7 @@ historyEl.addEventListener("click", (e) => {
   const err = card.querySelector(".card-error");
   err.classList.add("hidden");
   button.disabled = true;
-  sendCommand(selected, button.dataset.command, { clientId })
+  sendCommand(selected, button.dataset.command, { clientId, card: true })
     .then(() => {
       // The command woke the worker: follow its stream if none is open.
       if (!streamControl?.live) startStream(selected, selectSeq ?? 0);
@@ -1119,7 +1207,14 @@ infoTextEl.addEventListener("click", async (e) => {
 function updateInfoBar() {
   const stopBtn = document.getElementById("infoStopBtn");
   const deleteBtn = document.getElementById("infoDeleteBtn");
+  const archiveBtn = document.getElementById("infoArchiveBtn");
   if (deleteBtn) deleteBtn.style.display = selected ? "" : "none";
+  if (archiveBtn) {
+    archiveBtn.style.display = selected ? "" : "none";
+    const archived = selectedArchived();
+    archiveBtn.textContent = archived ? "unarchive" : "archive";
+    archiveBtn.title = archived ? "Unarchive: back to the lists" : "Archive: hide from the lists, keep for good";
+  }
   if (!selected) {
     // The start page hides the info bar (the storage path is on #/sessions).
     infoTextEl.innerHTML = "";
@@ -1323,7 +1418,10 @@ const streamHandlers = {
   // pending_input_merged carries the merged text, shown only for prompts
   // this tab has no bubble for.
   input_merged: (data) => applyPromptOps(data),
-  pending_input_merged: (data) => applyPromptOps(data),
+  pending_input_merged: (data) => {
+    applyPromptOps(data);
+    showSteers(data.steers);
+  },
   turn_enqueued: (data) => applyPromptOps(data),
   turn_started: (data) => keepFollowing(historyEl, () => {
     markRecapStale();
@@ -1339,32 +1437,33 @@ const streamHandlers = {
     endTurnView("completed");
     const out = turnOutput(data);
     if (out) appendChunk(out);
-    if (selected) {
-      try {
-        const d = await getSession(selected, { tail: true });
-        if (d.session) {
-          if (Array.isArray(d.session.used_memory_names)) currentUsedMemories = d.session.used_memory_names;
-          if (d.session.status) currentStatus = d.session.status;
-          applyTiming(d.timing);
-          finishLiveTurnTiming(currentTiming.turnRecords[currentTiming.turnRecords.length - 1]);
-          setMarkdownWarning(d.markdown_warning);
-          if (Array.isArray(d.messages)) applyFinalMarkdown(d.messages);
-          updateInfoBar();
-          const sess = allSessions.find(s=>s.id===selected);
-          if (sess) {
-            sess.used_memory_names = currentUsedMemories.slice();
-            sess.status = currentStatus;
-          }
-          render();
-          document.querySelectorAll(".card").forEach(el=>el.classList.toggle("active", el.dataset.id===selected));
-        }
-      } catch(_){}
-    }
+    // after_turn hooks are running and may present the answer: its
+    // answer_display (display: null when they didn't) comes next.
+    const display = data.display_pending ? new Promise((resolve) => { displayLanded = resolve; }) : null;
+    turnEndRead = readTurnEnd();
+    await turnEndRead;
     // The answer bubble the turn view held at its box's height pops now
     // that the rendered markdown is in it (or the re-read failed: then the
-    // plain text pops). The chat view has no hold.
+    // plain text pops), and the display if one was coming, so the links
+    // never swap in after the pop. The hold reveals by itself after
+    // HOLD_MS whatever comes. The chat view has no hold.
+    if (display) await display;
     turnDom.answerReady?.();
   },
+  // An after_turn hook presented the answer (AnswerDisplay): it comes after
+  // turn_completed, so re-read the answer once that read is done.
+  answer_display: async (data) => {
+    try {
+      await turnEndRead;
+      if (!selected || !data.display) return;
+      const d = await getSession(selected, { tail: true });
+      if (Array.isArray(d.messages)) applyFinalMarkdown(d.messages);
+    } catch (_) {
+    } finally {
+      displayLanded?.();
+      displayLanded = null;
+    }
+  },
   turn_canceled: (data) => {
     endTurnView("canceled", cancelLineText(data.cancellation_reason || ""));
     setLiveStatus("idle");
@@ -1382,6 +1481,7 @@ const streamHandlers = {
   // then show the prompt once more, marked failed (with why). This tab's own
   // prompt goes back into an empty composer.
   prompt_restored: async (data) => {
+    keepEarlyRestore(data, earlyRestores, { myId: clientId, sentIds });
     const { refill, label, images: restoredImages } = restoreAction(data, { myId: clientId, sentIds, composerEmpty: !promptEl.value.trim() && !chips.length });
     if (refill) {
       promptEl.value = refill;
@@ -1391,6 +1491,13 @@ const streamHandlers = {
     const failedText = lastFailedText;
     lastFailedText = null;
     await resync();
+    // The re-render drew it from the session (failed_turn): drawn again
+    // below with this event's label and images.
+    const drawn = historyEl.querySelector(".bubble.user[data-failed-turn]");
+    if (drawn) {
+      if (drawn.nextElementSibling?.classList.contains("cancel")) drawn.nextElementSibling.remove();
+      drawn.remove();
+    }
     // Not an echo waiting for its turn_enqueued: it keeps its enqueued_id, so
     // a resend's echo isn't matched to it.
     makeUserBubble(data.prompt || "", { state: "failed", label, enqueuedId: data.origin?.enqueued_id || `failed:${Date.now()}`, images: data.images });
@@ -1407,13 +1514,15 @@ const streamHandlers = {
     }
     if (view.resync) await resync();
     const queued = view.anytime && commandBubble(view.commandId);
-    if (queued) drawCommandBubble(queued, view);
+    if (view.hidden) queued?.remove();
+    else if (queued) drawCommandBubble(queued, view);
     else addCommandBubble(view);
   },
   // An anytime command (/help, a plugin's /btw) runs at once, beside a
   // turn: its bubble goes here, so the cards it shows come after it.
   command_queued: (data) => {
-    if (data.anytime && !commandBubble(data.command_id)) addCommandBubble({ ...commandView(data, clientId), text: "" });
+    // A card's action waits for its command_ran: shown only if it answers.
+    if (data.anytime && !data.card && !commandBubble(data.command_id)) addCommandBubble({ ...commandView(data, clientId), text: "" });
   },
   // Due reminders went into the turn (a reminder turn has no prompt bubble).
   reminder_injected: (data) => addCommandBubble({ label: null, line: reminderText(data), text: "" }),
@@ -1463,6 +1572,9 @@ const streamHandlers = {
   guardrail_warning: (data) => showGuardrailWarning(data.message, data.label || "guardrails"),
   // In the turn view, a notice during a turn is a row of its current step.
   hook_notice: (data) => { if (!turnDom.notice(data)) showHookNotice(data); },
+  // The loop asks again after an empty answer: a row of the empty step (the
+  // chat view shows nothing; after a reload neither does the turn view).
+  empty_answer_retry: (data) => { turnDom.notice({ line: emptyRetryLine(data) }); },
   plugin_init_started: (data) => onInitEvent("plugin_init_started", data),
   plugin_init_finished: (data) => onInitEvent("plugin_init_finished", data),
   // A plugin's card, or a new version of one (the same id).
@@ -1623,7 +1735,8 @@ function renderQuestionCard(pq) {
   if (isNearBottom()) historyEl.scrollTop = historyEl.scrollHeight;
 }
 
-// The tool, the command (or paths) as code, where and why.
+// The tool, the command (or paths, or args) as code, where and why; no
+// code box when there is nothing to show.
 function renderApprovalDetails(view) {
   const box = document.createElement("div");
   box.className = "approval-details";
@@ -1631,12 +1744,14 @@ function renderApprovalDetails(view) {
   tool.className = "approval-tool";
   tool.textContent = view.tool;
   box.appendChild(tool);
-  const what = document.createElement("pre");
-  what.className = view.isCommand ? "approval-what command" : "approval-what paths";
-  const code = document.createElement("code");
-  code.textContent = view.what;
-  what.appendChild(code);
-  box.appendChild(what);
+  if (view.what) {
+    const what = document.createElement("pre");
+    what.className = view.isCommand ? "approval-what command" : "approval-what paths";
+    const code = document.createElement("code");
+    code.textContent = view.what;
+    what.appendChild(code);
+    box.appendChild(what);
+  }
   for (const [cls, label, text] of [["approval-where", "in", view.where], ["approval-why", "why", view.why]]) {
     if (!text) continue;
     const row = document.createElement("div");
@@ -1728,10 +1843,13 @@ function addCreatedSession(created) {
   render();
 }
 
+// A first message: an idle session, then the turn into it as for any
+// later one (handleSendTurn), so a failed first turn's prompt comes back
+// into the composer too (sentIds). A first command line starts the session
+// with it.
 async function handleCreate() {
-  // A first message with images: an idle session, then the turn into it.
-  if (chips.length) return handleSendTurn();
   const prompt = promptEl.value.trim();
+  if (chips.length || (prompt && !isCommandLine(prompt))) return handleSendTurn();
   if (!prompt) return;
   actionBtn.disabled = true;
   try {
@@ -1748,7 +1866,7 @@ async function handleCreate() {
 }
 
 async function handleSendTurn() {
-  if (!selected && !chips.length) return handleCreate();
+  if (!selected && !chips.length && isCommandLine(promptEl.value.trim())) return handleCreate();
   if (currentOwner === "tui") return;
   const prompt = turnText(promptEl.value, chips);
   if (!prompt) return;
@@ -1756,7 +1874,7 @@ async function handleSendTurn() {
   if (!selected) {
     actionBtn.disabled = true;
     try {
-      const s = await createIdleSession({ dir: scope.dir, model: chosenModel() });
+      const s = await createIdleSession({ dir: scope.dir, model: chosenModel(), preview: prompt });
       addCreatedSession(s);
       await select(s.id);
     } catch (e) {
@@ -1782,12 +1900,16 @@ async function handleSendTurn() {
       if (!chip.ref) chip.ref = await uploadImage(selected, chip.file, chip.name);
     }
     const ack = await sendTurn(selected, prompt, { clientId, images: turnRefs(sending) });
-    promptEl.value = "";
+    if (ack?.enqueued_id) sentIds.add(ack.enqueued_id);
+    // A turn that failed fast was restored before this ack: its prompt
+    // (and images) go back into the composer.
+    const restored = restoreOnAck(ack?.enqueued_id, earlyRestores, { myId: clientId, sentIds });
+    promptEl.value = restored?.refill || "";
     fitPrompt();
     clearChips();
+    if (restored?.images?.length) setChips(restoredChips(selected, restored.images));
     // Its turn_enqueued usually tagged the echo already; the ack covers a
     // worker that wasn't live (no turn_enqueued then).
-    if (ack?.enqueued_id) sentIds.add(ack.enqueued_id);
     if (ack?.enqueued_id && !echo.dataset.enqueuedId && !bubbleById(ack.enqueued_id)) {
       echo.dataset.enqueuedId = ack.enqueued_id;
     }
@@ -1818,6 +1940,13 @@ async function handleSendTurn() {
 // /model, !ls, /continue no … run in the session's worker; every client
 // shows the command_ran, this one too.
 async function handleSendCommand(line) {
+  const local = webLocalReply(line);
+  if (local) {
+    addCommandBubble({ label: null, line, text: local });
+    promptEl.value = "";
+    fitPrompt();
+    return;
+  }
   actionBtn.disabled = true;
   try {
     await sendCommand(selected, line, { clientId });
@@ -2262,25 +2391,108 @@ $("#infoStopBtn").addEventListener("click", async () => {
 $("#infoDeleteBtn").addEventListener("click", () => {
   if (selected) confirmDelete(selected);
 });
+$("#infoArchiveBtn").addEventListener("click", () => {
+  if (!selected) return;
+  if (selectedArchived()) setArchived(selected, false);
+  else setArchived(selected, true);
+});
+
+// ── Archive ────────────────────────────────────────────────────────────────
+// Archive hides a session (and its delegates) from the strip and the list,
+// kept for good; "include archived" in all sessions finds it. No confirm:
+// the toast's Undo takes it back. Archiving the open session stays on it
+// (the button flips to unarchive); its worker was stopped by the server.
+
+function selectedArchived() {
+  return !!allSessions.find((s) => s.id === selected)?.archived;
+}
+
+// The ids in the server's answer flip here at once; the hub's events
+// follow with the same.
+function markArchived(ids, archived) {
+  const set = new Set(ids);
+  allSessions = allSessions.map((s) => (set.has(s.id) ? { ...s, archived } : s));
+}
+
+async function setArchived(id, archive, { undo = true } = {}) {
+  const short = id.slice(0, 8);
+  let result;
+  // A live worker is stopped by the archive: its stream ending is a stop.
+  if (archive) stoppingId = id;
+  try {
+    result = archive ? await archiveSession(id) : await unarchiveSession(id);
+    markArchived(archive ? result.archived : result.unarchived, archive);
+    if (archive && id === selected && (result.stopped || []).includes(id)) {
+      // Its worker is gone: don't wait for its stream to notice.
+      streamControl?.close();
+      currentStatus = "stopped";
+      workerGone(id);
+    }
+  } catch (e) {
+    alert(`Could not ${archive ? "archive" : "unarchive"} session ${short}: ${e.message}`);
+    return;
+  } finally {
+    if (archive) stoppingId = null;
+  }
+  render();
+  updateInfoBar();
+  if (!eventsControl) refresh();
+  const what = archive ? "Archived" : "Unarchived";
+  showToast(`${what} ${short}`, undo ? { label: "Undo", run: () => setArchived(id, !archive, { undo: false }) } : null);
+}
+
+let toastTimer = null;
+function showToast(text, action = null) {
+  const el = $("#toast");
+  el.innerHTML = `<span>${escapeHtml(text)}</span>${action ? `<button type="button" class="toast-action">${escapeHtml(action.label)}</button>` : ""}`;
+  el.hidden = false;
+  el.querySelector(".toast-action")?.addEventListener("click", () => {
+    el.hidden = true;
+    action.run();
+  });
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => { el.hidden = true; }, 6000);
+}
+
+$("#includeArchived").addEventListener("change", () => {
+  if (allViewOpen()) renderAll();
+});
 
 // ── Annotate ───────────────────────────────────────────────────────────────
 // Selecting text in an answer, thinking, a tool row or an own message shows
-// "Annotate"; it appends the quote (with where it came from) to the
-// composer. The button lives outside #history, which is re-rendered whole.
-// The selection is read when it changes: a live bubble rewrites its text
-// every frame, which would collapse it by the time the button is clicked.
-
-const annotateBtn = document.createElement("button");
-annotateBtn.id = "annotateBtn";
-annotateBtn.type = "button";
-annotateBtn.textContent = "Annotate";
-annotateBtn.hidden = true;
-document.body.appendChild(annotateBtn);
+// "Annotate" and the presets (web.annotate_presets); Annotate appends the
+// quote (with where it came from) to the composer, a preset the quote with
+// its text as the note. Nothing is sent. The bar lives outside #history,
+// which is re-rendered whole. The selection is read when it changes: a live
+// bubble rewrites its text every frame, which would collapse it by the time
+// a button is clicked.
+
+const annotatePresets = parsePresets(document.body.dataset.annotatePresets);
+const annotateBar = document.createElement("div");
+annotateBar.id = "annotateBar";
+annotateBar.hidden = true;
+annotateBar.setAttribute("role", "toolbar");
+annotateBar.setAttribute("aria-label", "Annotate");
+function annotateButton(text, cls) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = cls;
+  btn.textContent = text;
+  return btn;
+}
+annotateBar.appendChild(annotateButton("Annotate", "annotate-main"));
+annotatePresets.forEach((text, i) => {
+  const btn = annotateButton(text, "annotate-preset");
+  btn.dataset.index = String(i);
+  btn.title = text;
+  annotateBar.appendChild(btn);
+});
+document.body.appendChild(annotateBar);
 let pendingQuote = null;
 
 function hideAnnotate() {
   pendingQuote = null;
-  annotateBtn.hidden = true;
+  annotateBar.hidden = true;
 }
 
 function updateAnnotate() {
@@ -2301,20 +2513,26 @@ function updateAnnotate() {
   pendingQuote = block;
   const rects = clipped.getClientRects();
   const rect = rects.length ? rects[rects.length - 1] : clipped.getBoundingClientRect();
-  annotateBtn.hidden = false;
-  const top = Math.min(rect.bottom + 6, window.innerHeight - annotateBtn.offsetHeight - 8);
-  const left = Math.min(Math.max(rect.right - annotateBtn.offsetWidth, 8), window.innerWidth - annotateBtn.offsetWidth - 8);
-  annotateBtn.style.top = `${Math.max(top, 8)}px`;
-  annotateBtn.style.left = `${left}px`;
+  annotateBar.hidden = false;
+  // Measured at the left edge: a fixed element's shrink-to-fit width is
+  // capped by what's right of it, so at the last (right) spot it would
+  // measure wrapped.
+  annotateBar.style.left = "8px";
+  const w = annotateBar.offsetWidth;
+  const h = annotateBar.offsetHeight;
+  const maxTop = window.innerHeight - h - 8;
+  const top = Math.min(rect.bottom + 6, maxTop);
+  annotateBar.style.top = `${Math.max(top, 8)}px`;
+  annotateBar.style.left = `${annotateBarLeft(rect, w, window.innerWidth)}px`;
   // Not over a copy button (this bubble's, one inside it, the next
   // bubble's).
-  const box = annotateBtn.getBoundingClientRect();
+  const box = annotateBar.getBoundingClientRect();
   const bubble = source.root.closest(".bubble");
   const near = [bubble, bubble?.nextElementSibling].filter(Boolean);
   for (const btn of near.flatMap((el) => [...el.querySelectorAll(".copy-btn")])) {
     const r = btn.getBoundingClientRect();
     if (r.bottom < box.top || r.top > box.bottom || r.right < box.left || r.left > box.right) continue;
-    annotateBtn.style.top = `${r.bottom + 4}px`;
+    annotateBar.style.top = `${Math.max(Math.min(r.bottom + 4, maxTop), 8)}px`;
     break;
   }
 }
@@ -2329,11 +2547,13 @@ document.addEventListener("selectionchange", scheduleAnnotate);
 historyEl.addEventListener("scroll", scheduleAnnotate);
 window.addEventListener("resize", scheduleAnnotate);
 installCopy(historyEl);
-// Keep the selection when the button is pressed.
-annotateBtn.addEventListener("mousedown", (e) => e.preventDefault());
-annotateBtn.addEventListener("click", () => {
-  if (!pendingQuote) return;
-  promptEl.value = appendQuote(promptEl.value, pendingQuote);
+// Keep the selection when a button is pressed.
+annotateBar.addEventListener("mousedown", (e) => e.preventDefault());
+annotateBar.addEventListener("click", (e) => {
+  const btn = e.target.closest("button");
+  if (!btn || !pendingQuote) return;
+  const preset = btn.dataset.index === undefined ? null : annotatePresets[Number(btn.dataset.index)];
+  promptEl.value = appendQuote(promptEl.value, preset ? presetNote(pendingQuote, preset) : pendingQuote);
   fitPrompt();
   window.getSelection()?.removeAllRanges();
   hideAnnotate();
@@ -2342,6 +2562,135 @@ annotateBtn.addEventListener("click", () => {
   promptEl.scrollTop = promptEl.scrollHeight;
 });
 
+// ── Notifications (notify.js): when a session needs the user (a question,
+// an approval, a failed turn, a long turn done) and this tab is not in
+// front, an OS notification (the bell turns them on) and a count in the
+// title (always). One tag per event, so several tabs show one, and none
+// while another chi tab is in front with it (notify.js, Several tabs).
+const NOTIFY_KEY = "chi_notify";
+const notifyBtn = $("#notifyBtn");
+let attention = initialAttentionState();
+const badgeKeys = new Set();
+let baseTitle = "Chi";
+
+function setTitle() {
+  document.title = badgeKeys.size ? `(${badgeKeys.size}) ${baseTitle}` : baseTitle;
+}
+
+// The user is looking at this tab: visible and focused (a window behind
+// the terminal is visible but not focused).
+function tabInFront() {
+  return document.visibilityState === "visible" && document.hasFocus();
+}
+
+function notifySupported() {
+  return typeof globalThis.Notification === "function";
+}
+
+function notifyWanted() {
+  try { return localStorage.getItem(NOTIFY_KEY) === "1"; } catch (_) { return false; }
+}
+
+// "on" | "off" | "denied" | "unsupported"
+function notifyState() {
+  if (!notifySupported()) return "unsupported";
+  if (Notification.permission === "denied") return "denied";
+  return notifyWanted() && Notification.permission === "granted" ? "on" : "off";
+}
+
+const NOTIFY_TITLES = {
+  on: "Notifications on: a session that needs you while this tab is in the background. Click to turn off",
+  off: "Notify me when a session needs me while this tab is in the background",
+  denied: "Notifications are blocked for this site in the browser's settings",
+};
+
+function renderNotifyBtn() {
+  const state = notifyState();
+  notifyBtn.hidden = state === "unsupported";
+  notifyBtn.dataset.state = state;
+  notifyBtn.title = NOTIFY_TITLES[state] || "";
+  notifyBtn.setAttribute("aria-pressed", state === "on" ? "true" : "false");
+}
+
+async function toggleNotify() {
+  const state = notifyState();
+  if (state === "unsupported" || state === "denied") return;
+  let wanted = state !== "on";
+  if (wanted && Notification.permission !== "granted") {
+    wanted = (await Notification.requestPermission()) === "granted";
+  }
+  try { localStorage.setItem(NOTIFY_KEY, wanted ? "1" : "0"); } catch (_) {}
+  renderNotifyBtn();
+}
+
+function showNotification(session, a) {
+  if (notifyState() !== "on") return;
+  const { title, body } = attentionText(session, a);
+  try {
+    const n = new Notification(title, { body, tag: a.key });
+    n.onclick = () => {
+      window.focus();
+      location.hash = sessionHash(a.sessionId);
+      n.close();
+    };
+  } catch (_) {}
+}
+
+// Another chi tab in front has these (notify.js, Several tabs).
+function seenElsewhere(keys) {
+  const size = badgeKeys.size;
+  for (const key of keys) badgeKeys.delete(key);
+  if (badgeKeys.size !== size) setTitle();
+}
+let notifyChannel = null;
+try {
+  if (typeof globalThis.BroadcastChannel === "function") notifyChannel = new BroadcastChannel(NOTIFY_CHANNEL);
+} catch (_) {}
+const notifyGate = createNotifyGate({ channel: notifyChannel, onSeen: seenElsewhere });
+
+// Every hub frame goes through here before the list takes it.
+function noticeSessions(type, data) {
+  const next = trackAttention(attention, type, data);
+  attention = next.state;
+  const size = badgeKeys.size;
+  for (const key of next.closed) badgeKeys.delete(key);
+  notifyGate.drop(next.closed);
+  if (next.attentions.length > 0 && tabInFront()) {
+    notifyGate.seenInFront(next.attentions.map((a) => a.key));
+  } else {
+    for (const a of next.attentions) {
+      notifyGate.offer(a, () => {
+        if (tabInFront()) return;
+        badgeKeys.add(a.key);
+        setTitle();
+        showNotification(attention.byId[a.sessionId], a);
+      });
+    }
+  }
+  if (badgeKeys.size !== size) setTitle();
+}
+
+// The user is here: the badge goes, and the other tabs drop what it had.
+function clearBadge() {
+  if (badgeKeys.size === 0) return;
+  notifyGate.seenInFront([...badgeKeys]);
+  badgeKeys.clear();
+  setTitle();
+}
+
+// The user is back: the page turned visible (Safari makes it visible
+// before it has focus, and a tab switch inside a focused window sends no
+// focus event), the window got focus, or they touched the page.
+function backInFront() {
+  if (document.visibilityState === "visible") clearBadge();
+}
+document.addEventListener("visibilitychange", backInFront);
+window.addEventListener("focus", backInFront);
+document.addEventListener("pointerdown", clearBadge, true);
+document.addEventListener("keydown", clearBadge, true);
+notifyBtn.addEventListener("click", toggleNotify);
+renderNotifyBtn();
+
 // The latest-sessions strip can be hidden for more chat room; the choice
 // stays per browser (it replaced zen mode, so a zen user starts hidden).
 function stripHiddenSaved() {