samagotchi 0.49.0 → 0.51.0

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

@@ -53,6 +53,7 @@ export function addStarted(model, event = {}, now = null) {
     row.label = event.label || row.label;
     row.params = event.params || row.params;
     row.title = event.title || row.title;
+    row.called_as = event.called_as || row.called_as;
     row.view = event.view || row.view;
     markStart(row, event, now);
     return { row, created: false };
@@ -68,6 +69,9 @@ export function addStarted(model, event = {}, now = null) {
     // project-relative path, a command without its "cd … &&"); rows show it
     // in place of the params when there is one.
     title: event.title || null,
+    // The name the model called the tool by when it was an alias's ("bash"
+    // run as execute); the row says so.
+    called_as: event.called_as || null,
     // The call's full arguments for the expanded row and the hovers (the
     // server's ToolView: an execute/task_create's command, its cwd).
     view: event.view || null,
@@ -104,6 +108,7 @@ export function addCompleted(model, event = {}, now = null) {
       label: event.label,
       params: event.activity?.params || "",
       title: event.activity?.title,
+      called_as: event.activity?.called_as,
       view: event.view,
     });
     row = synthesized.row;
@@ -113,6 +118,7 @@ export function addCompleted(model, event = {}, now = null) {
   row.output_truncated = !!event.output_truncated;
   if (event.activity?.params) row.params = event.activity.params;
   if (event.activity?.title) row.title = event.activity.title;
+  if (event.activity?.called_as) row.called_as = event.activity.called_as;
   // The images the tool returned (a reload in the turn view draws them from
   // the saved parts, turn_html.js toolRowHtml).
   if (event.images?.length) row.images = event.images;

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

@@ -56,13 +56,14 @@ import { shouldFollowScroll, keepFollowing } from "./scroll.js";
 import { SHORT_WINDOW_QUERY, stripAutoHidden, stripColumns, stripShowParts } from "./strip.js";
 import { applySessionEvent, batchCounts, batchTargets, batchToastText, families, familyId, familyOpen, familyWaits, filterFamilies, flattenFamilies, heldOrder, inTree, rangeIds, runBatch, listedSessions, sortedByUpdated, stoppedBadge, waitingBadge, waitingFirst, waitingSearchText } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
+import { tabTitle, topBarTitle } from "./session_title.js";
 import { restartConfirmText, versionNotice, workerBadge } from "./update_notice.js";
 import {
   appendAboveLiveTiming, cancelLineText, elapsedSince, formatDuration, mergeTiming, normalizeTiming, STOPPED_LINE_CLASS,
 } from "./timing.js";
 import { createLiveTurn } from "./live_turn.js";
 import { DONE_MS, applyInitEvent, dropDone, initRowHtml, newInitTasks, seedInitTasks } from "./init_row.js";
-import { clientLabel, commandView, isReportClient, displayWait, dropEarlyRestores, emptyRetryLine, hookNoticeLabel, initWaitLine, isOwn, llmContextHover, llmContextLine, sessionCommandLine, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, composerAfterAck, restoreOnAck, replaysDrawnTurn, retryStatusLine, snapshotEvents, steerCutLine, startPageReplyOrHint, turnOutput, unknownCommandHint, webLocalReply, workerGoneText } from "./turn_events.js";
+import { clientLabel, commandView, isReportClient, displayWait, dropEarlyRestores, emptyRetryLine, historyHasCommandBubble, hookNoticeLabel, initWaitLine, isOwn, llmContextHover, llmContextLine, sessionCommandLine, keepEarlyRestore, newClientId, noticeLine, promptOps, reminderText, restoreAction, composerAfterAck, restoreOnAck, replaysDrawnTurn, retryStatusLine, snapshotEvents, steerCutLine, startPageReplyOrHint, turnOutput, unknownCommandHint, webLocalReply, workerGoneText } from "./turn_events.js";
 
 const $ = (s) => document.querySelector(s);
 const topStripEl = $("#topStrip");
@@ -71,7 +72,11 @@ const historyEl = $("#history");
 const emptyEl = $("#empty");
 const composerEl = $("#composer");
 const infoBarEl = $("#infoBar");
-const firstPeekEl = $("#firstPeek");
+// The open session's title in the top bar, when no strip card in sight
+// shows it; the tab's base ("Chi · <project>"), set by renderScope.
+const sessionTitleEl = $("#sessionTitle");
+let tabBase = null;
+let tabShown = null;
 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).
@@ -342,7 +347,9 @@ 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;
-  notifications.setBaseTitle(scope.projectName ? `Chi · ${scope.projectName}` : "Chi");
+  // The tab: "<session title> · Chi · <project>" (updateSessionTitle).
+  tabBase = scope.projectName ? `Chi · ${scope.projectName}` : "Chi";
+  updateSessionTitle();
   // 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, location.search);
@@ -642,6 +649,8 @@ function paintActive() {
   document.querySelectorAll(".family-row[data-id]").forEach((el) => {
     el.classList.toggle("active", !!selected && el.dataset.id === selected);
   });
+  // The open session's card may have come into the strip or left it.
+  updateSessionTitle();
 }
 
 // The latest sessions (as many as fit, a family one card), then the way
@@ -693,11 +702,11 @@ function noteChainFamilies(fams) {
 }
 
 // The hidden strip's pill: "▾ 5 sessions · ● 1 live · ● 1 waiting",
-// following the list: its cards (a family is one), the live and waiting
-// sessions (a waiting delegate too).
+// following the list: its sessions, the number the All sessions tile
+// shows, and the live and waiting ones (a waiting delegate too).
 function renderStripShow() {
   const shown = shownSessions();
-  const { count, live, waiting } = stripShowParts(shown, { cards: foldChains(families(shown), allSessions).length });
+  const { count, live, waiting } = stripShowParts(shown);
   const liveHtml = live ? ` · <span class="live"><span class="live-dot" aria-hidden="true"></span>${escapeHtml(live)}</span>` : "";
   const waitingHtml = waiting ? ` · <span class="waiting"><span class="waiting-dot" aria-hidden="true"></span>${escapeHtml(waiting)}</span>` : "";
   $("#stripShow").innerHTML = `<span class="pill-arrow" aria-hidden="true">\u25BE</span> ${escapeHtml(count)}${liveHtml}${waitingHtml}`;
@@ -999,6 +1008,7 @@ function applyView() {
     topStripEl.scrollLeft = 0; // a phone's strip scrolls sideways to the tile
   }
   document.body.classList.toggle("all-view", open);
+  updateSessionTitle();
   // Its chip was in the list just hidden (the strip, or all sessions).
   chainPop.close();
   if (open) {
@@ -1037,6 +1047,7 @@ function updateComposerMode() {
   if (document.body.classList.toggle("has-session", !!selected) !== hadSession) {
     hadSession = !hadSession;
     fitPrompt();
+    placeToast();
   }
   if (selected) {
     modelPicker.close();
@@ -1148,7 +1159,6 @@ function clearSelection() {
   setCapabilities(null);
   updateComposerMode();
   updateInfoBar();
-  updateFirstPeek();
   promptEl.focus();
 }
 
@@ -1182,7 +1192,6 @@ async function select(id) {
   closeStream();
   resetSessionState();
   resetTurnView();
-  updateFirstPeek();
   updateInfoBar();
   contextChips.load(id);
   updateComposerMode();
@@ -1334,7 +1343,6 @@ function renderSessionView(data) {
   // A turn ran out of iterations and waits for a yes or no.
   if (data.continue_offer) questionCards.renderContinue(data.continue_offer);
   updateInfoBar();
-  updateFirstPeek();
   updateComposerMode();
 }
 
@@ -1922,11 +1930,11 @@ function updateInfoBar() {
     renderStable(infoTextEl, "");
     infoTextEl.title = "";
     if (stopBtn) stopBtn.style.display = "none";
+    updateSessionTitle();
     return;
   }
   if (stopBtn) stopBtn.style.display = canStopSession({ owner: current.owner, streaming: !!streamControl }) ? "" : "none";
   const idShort = selected.slice(0,8);
-  const memText = current.usedMemories.length ? current.usedMemories.join(", ") : "—";
   const ctxText = ctxBarText(current.ctxPct, current.ctxWindowSource);
   const tokens = current.timing.tokens;
   const ctxTip = tokensTipText(tokens, undefined, current.timing.memoryIndex,
@@ -1958,15 +1966,37 @@ function updateInfoBar() {
   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>${chainHtml}${parentHtml}${kidsHtml}${llmContextChipHtml(current.llmContext, escapeHtml)}${notesHtml}${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>`;
-  // The title line follows the card's: a chain link opened with the opener
-  // reads its chain's first link's title (cardTitle).
-  const shown = sessionsById().get(selected);
-  const titleText = shown && isOpener(current.firstPreview) ? cardTitle(shown) : current.firstPreview;
-  const previewHtml = `<div class="preview-line"><span class="preview">${escapeHtml(titleText || "—")}</span> · <span class="mem" title="${escapeHtml(current.usedMemories.join(", "))}">mem: ${escapeHtml(memText)}</span></div>`;
   // 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 });
+  renderStable(infoTextEl, metaHtml, { ".session-time": timingText });
   infoTextEl.title = memoriesTooltip(current.usedMemories, current.preloadedMemories, current.mutedMemories);
+  updateSessionTitle();
+}
+
+// The open session's title, once on screen (session_title.js): its strip
+// card says it when the strip is shown and has one; else the top bar. The
+// browser tab names it too. It follows the card's: a chain link opened with
+// the opener reads its chain's first link's title (cardTitle).
+function updateSessionTitle() {
+  const shown = selected ? sessionsById().get(selected) : null;
+  const first = current.firstPreview || "";
+  const raw = !selected ? "" : (shown && isOpener(first) ? cardTitle(shown) : first);
+  const title = raw === "\u2014" ? "" : raw; // "—": no first message yet
+  const text = topBarTitle({
+    title,
+    cardShown: !!topStripEl.querySelector(".card.active"),
+    stripHidden: document.body.classList.contains("strip-hidden"),
+    allView: allViewOpen(),
+  });
+  if (sessionTitleEl.textContent !== text) sessionTitleEl.textContent = text;
+  if (sessionTitleEl.hidden !== !text) sessionTitleEl.hidden = !text;
+  const tip = text ? title : "";
+  if (sessionTitleEl.title !== tip) sessionTitleEl.title = tip;
+  const tab = tabBase === null ? null : tabTitle({ title, base: tabBase });
+  if (tab !== null && tab !== tabShown) {
+    tabShown = tab;
+    notifications.setBaseTitle(tab);
+  }
 }
 
 // The info bar's ← / → link to a chain's link (chains.js chainNeighbours):
@@ -2024,16 +2054,6 @@ async function mergeTurnTiming(id, data) {
   return true;
 }
 
-function updateFirstPeek() {
-  if (current.ctxPct !== null && current.ctxPct > 20 && current.firstPreview) {
-    firstPeekEl.textContent = current.firstPreview;
-    firstPeekEl.classList.add("visible");
-  } else {
-    firstPeekEl.textContent = "";
-    firstPeekEl.classList.remove("visible");
-  }
-}
-
 function setUsedMemories(names) {
   current.usedMemories = names.slice();
   updateInfoBar();
@@ -2119,7 +2139,6 @@ const streamHandlers = {
     if (pct !== null && !Number.isNaN(pct)) {
       current.ctxPct = pct;
       updateInfoBar();
-      updateFirstPeek();
     }
   },
   generation_started: (data) => {
@@ -2274,6 +2293,10 @@ const streamHandlers = {
       queued.remove();
       addCommandBubble(view);
     } else if (queued) drawCommandBubble(queued, view);
+    // A command that changed the conversation (!cmd): the redrawn history
+    // ends with its command bubble already (the saved "!(…)\n<output>"
+    // message renders as one) — no second bubble, or the output shows twice.
+    else if (view.resync && historyHasCommandBubble(findInTurnRoots(".bubble.command"), view.line)) { /* drawn by the resync */ }
     else addCommandBubble(view);
   },
   // An anytime command (/help, a plugin's /btw) runs at once, beside a
@@ -2304,7 +2327,6 @@ const streamHandlers = {
     if (pct !== null) {
       current.ctxPct = pct;
       updateInfoBar();
-      updateFirstPeek();
     }
   },
   question_requested: (data) => {
@@ -2465,7 +2487,6 @@ async function handleSendTurn() {
   if (!current.firstPreview || current.firstPreview==="—") {
     current.firstPreview = normalize(prompt).slice(0,80) + (normalize(prompt).length>80?"…":"");
     updateInfoBar();
-    updateFirstPeek();
   }
   actionBtn.disabled = true;
   try {
@@ -2767,7 +2788,9 @@ new ResizeObserver(() => {
   const follow = atHistoryEnd();
   centerEl.style.setProperty("--dock-h", `${dockEl.offsetHeight}px`);
   if (follow) historyEl.scrollTop = historyEl.scrollHeight;
+  placeToast();
 }).observe(dockEl);
+window.addEventListener("resize", () => placeToast());
 
 promptEl.addEventListener("paste", (e) => {
   const files = imageFiles(e.clipboardData);
@@ -2977,6 +3000,23 @@ async function setArchived(id, archive, { undo = true } = {}) {
   showToast(`${what} ${short}`, undo ? { label: "Undo", run: () => setArchived(id, !archive, { undo: false }) } : null);
 }
 
+// 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.
+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 root = document.documentElement.style;
+  if (root.getPropertyValue("--toast-bottom") !== bottom) {
+    if (bottom) root.setProperty("--toast-bottom", bottom);
+    else root.removeProperty("--toast-bottom");
+  }
+}
+
 // sticky: stays until its action or its ✕ (else gone after 6 s).
 let toastTimer = null;
 // html: +text+ is markup this page built (its parts escaped), not words.
@@ -2984,6 +3024,7 @@ function showToast(text, action = null, { sticky = false, html = false } = {}) {
   const el = $("#toast");
   el.innerHTML = `<span>${html ? text : escapeHtml(text)}</span>${action ? `<button type="button" class="toast-action">${escapeHtml(action.label)}</button>` : ""}` +
     (sticky ? `<button type="button" class="toast-close" title="Dismiss" aria-label="Dismiss">✕</button>` : "");
+  placeToast();
   el.hidden = false;
   el.querySelector(".toast-action")?.addEventListener("click", () => {
     el.hidden = true;
@@ -3043,6 +3084,7 @@ function applyStripHidden() {
   document.body.classList.toggle("strip-hidden", stripAutoHidden({
     saved: stripHiddenSaved(), short: shortWindow.matches, shownWhileShort: stripShownWhileShort,
   }));
+  updateSessionTitle();
 }
 function setStripHidden(hidden) {
   if (hidden) familyPop.close();

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

@@ -45,8 +45,6 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 #topStrip:empty{display:grid}
 #center{flex:1;display:flex;flex-direction:column;min-height:45vh;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
 #stage{flex:1;display:flex;flex-direction:column;position:relative;min-height:160px;background:var(--bg);overflow:hidden}
-#firstPeek{display:none;padding:8px 12px;background:var(--accent-bg);color:var(--text);border-bottom:1px solid var(--border);font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-#firstPeek.visible{display:block}
 #composer #cancelBtn{order:2;background:var(--danger-bg)}
 #history{flex:1;overflow:auto;padding:16px max(16px,calc((100% - 960px)/2));display:flex;flex-direction:column;gap:12px;background:var(--bg);min-height:160px}
 /* No child shrinks to fit: a held (overflow:hidden) answer bubble would, clipped under the dock with nothing to scroll. */
@@ -158,6 +156,7 @@ button.task-stop{flex:none;margin-left:auto;padding:1px 8px;border:1px solid col
 button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:none}
 .ts-now button.task-stop{align-self:center}
 .activity-params{color:var(--text-muted);overflow-wrap:anywhere}
+.activity-alias{color:var(--text-faint);white-space:nowrap}
 .activity-duration{color:var(--text-faint);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
 .activity-output{margin:4px 0 2px var(--row-gutter);font-size:12px;color:var(--text-muted);white-space:pre-wrap;word-break:break-word;background:var(--bg);border-radius:6px;padding:6px 8px;max-height:160px;overflow:auto}
 /* A row's status and tool name never wrap (a phone broke them letter by
@@ -681,8 +680,6 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 #infoBar .meta .dir{font-family:ui-monospace,monospace;font-size:11px;color:var(--text-muted);max-width:48ch;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}
 /* The footer sits on the card's glass: its chips are tinted, not solid, so the glass reads through them. */
 #infoBar .meta .model{font-size:11px;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--bg-hover) 55%,transparent);color:var(--text-3)}
-/* The memory chip ("mem 2", when the session used some): phones only, where the "mem: …" line is hidden. */
-#infoBar .meta .mem-chip{display:none}
 #infoBar .meta .model.served-mismatch{background:var(--warn-bg);color:var(--warn-bright);border:1px solid var(--warn-border)}
 /* The open session's worker runs an older chi: its version, and Restart when it can. */
 #infoBar .meta .worker-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:2px 2px 2px 6px;border-radius:6px;background:var(--warn-bg);color:var(--warn-bright);border:1px solid var(--warn-border);white-space:nowrap}
@@ -690,9 +687,6 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 #infoBar .meta .worker-restart{padding:1px 8px;border-radius:5px;font-size:11px;font-weight:600;background:var(--bg-raised);color:var(--warn-bright);border:1px solid var(--warn-border)}
 #infoBar .meta .worker-restart:hover:not(:disabled){background:var(--warn-border);color:var(--on-warn)}
 #infoBar .meta .worker-restart:disabled{opacity:.7;cursor:default}
-#infoBar .preview-line{font-size:13px;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;line-height:1.4;max-height:1.4em}
-#infoBar .preview-line .preview, #infoBar .preview-line .mem{word-break:break-word}
-#infoBar .mem{font-size:12px;color:var(--text-muted)}
 #infoBar button{padding:4px 12px;border-radius:8px;font-size:12px;font-weight:600}
 #infoBar #infoStopBtn{background:var(--bg-raised);color:var(--warn-text);border:1px solid var(--border-strong)}
 #infoBar #infoStopBtn:hover{background:var(--warn-bg);border-color:var(--warn-border)}
@@ -744,12 +738,11 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
 .ctx-pop-actions button:hover{color:var(--text-hover)}
 .ctx-pop-actions .ctx-pop-detach{color:var(--text-muted);background:transparent}
 .ctx-pop-actions .ctx-pop-detach:hover{color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
-/* Phones: the footer is one line; its meta scrolls sideways (all of it stays reachable) and the first-message line, the strip card's title, goes. */
+/* Phones: the footer is one line; its meta scrolls sideways (all of it stays reachable). */
 @media(max-width:600px){
   /* The key hint: cut off at this width, and phones have no Shift+Enter. */
   #composeHint{display:none}
   #infoBar{flex-wrap:nowrap;align-items:center;gap:6px;padding:6px 10px 8px}
-  #infoBar .preview-line{display:none}
   /* No terminal on a phone to attach from. */
   #infoBar .meta .copy-attach{display:none}
   #infoBar .meta{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
@@ -757,8 +750,8 @@ body.stage-view #dock,body.stage-view #dock:focus-within{background:transparent;
   #infoBar .meta>*{flex-shrink:0}
   #infoBar .meta .id{order:-2}
   #infoBar .meta .status{order:-1}
-  /* After the status (same order, later in the DOM): the meta scrolls, and only its start is in sight. */
-  #infoBar .meta .mem-chip{display:inline;order:-1}
+  /* The memory chip right after the status (same order, later in the DOM): the meta scrolls, and only its start is in sight. */
+  #infoBar .meta .mem-chip{order:-1}
   /* A parent's children chip too: its waiting part is what to see. */
   #infoBar .meta .children-chip{order:-1}
   /* A chain's ← → links too: the way to the other days. */
@@ -825,6 +818,14 @@ body.has-session #scope .scope-where{display:none}
 /* The ▾ glyph draws tiny at the pill's 11 px: at 20 px it is about as tall
    as the pill text's capitals (phone and desktop alike). */
 /* The bell (notifications): quiet at the top bar's right end; filled in the accent when on, struck through when the browser blocks it. */
+/* The open session's title, when no strip card in sight shows it (session_title.js): the bar's middle, cut with an ellipsis; the whole first message in its tooltip. */
+#sessionTitle{flex:1;min-width:0;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+#sessionTitle[hidden]{display:none}
+/* A phone: the title is its own row under the bar, so "chi + · pill · bell" stay one line. */
+@media(max-width:600px){
+  #topBar{flex-wrap:wrap;row-gap:2px}
+  #sessionTitle{flex-basis:100%;order:10;font-size:12px}
+}
 #notifyBtn{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;min-height:0;background:transparent;border:1px solid transparent;border-radius:999px;color:var(--text-muted)}
 #notifyBtn[hidden]{display:none}
 #notifyBtn:hover{color:var(--text-2);border-color:var(--border)}
@@ -947,7 +948,8 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card.archived{opacity:.6}
 .card.archived:hover{opacity:.85}
 .card .archived-badge,.family-row .archived-badge{font-size:10px;padding:1px 6px;border-radius:6px;border:1px solid var(--border-strong);color:var(--text-muted)}
-#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;z-index:50;display:flex;gap:12px;align-items:center;padding:8px 14px;border-radius:10px;background:var(--bg-raised);color:var(--text);border:1px solid var(--border-strong);box-shadow:var(--toast-shadow);font-size:13px}
+/* bottom: above the session's composer card when one shows (--toast-bottom, app.js placeToast). */
+#toast{position:fixed;left:50%;bottom:var(--toast-bottom,24px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;z-index:50;display:flex;gap:12px;align-items:center;padding:8px 14px;border-radius:10px;background:var(--bg-raised);color:var(--text);border:1px solid var(--border-strong);box-shadow:var(--toast-shadow);font-size:13px}
 #toast[hidden]{display:none}
 #toast .toast-action{background:transparent;border:0;color:var(--accent);font-weight:600;cursor:pointer;padding:2px 4px}
 #toast .toast-close{background:transparent;border:0;color:var(--text-muted);cursor:pointer;padding:2px 4px;margin-left:-6px}
@@ -1016,11 +1018,11 @@ a{color:var(--accent)}
     <div id="scope" hidden></div>
     <button type="button" class="strip-toggle" id="stripShow" title="Show the latest sessions"><span class="pill-arrow" aria-hidden="true">▾</span> sessions</button>
     <button type="button" class="strip-toggle" id="stripHideTop" title="Hide the latest sessions"><span class="pill-arrow" aria-hidden="true">▴</span> hide</button>
+    <span id="sessionTitle" hidden></span>
     <button type="button" id="notifyBtn" aria-label="Notifications" aria-pressed="false" hidden><svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path class="bell" d="M8 1.75a4 4 0 0 0-4 4v2.6L2.75 10.6v.9h10.5v-.9L12 8.35v-2.6a4 4 0 0 0-4-4Z"/><path class="clapper" d="M6.5 13a1.5 1.5 0 0 0 3 0"/><path class="slash" d="M2.5 2.5l11 11"/></svg></button>
   </div>
   <section id="topStrip" aria-label="Latest sessions" class="loading"><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div></section>
   <section id="center">
-    <div id="firstPeek"></div>
     <div id="stage">
       <div id="markdownWarning" class="markdown-warning" hidden></div>
       <div id="history"></div>
@@ -1045,7 +1047,7 @@ a{color:var(--accent)}
           <button type="button" id="modelPick" class="model-pick" title="The model the new chat starts on" aria-label="Model for the new chat" aria-haspopup="listbox" aria-expanded="false" hidden><span class="model-pick-name"></span></button>
           <button type="button" id="llmContextNew" class="llmctx-new" aria-haspopup="dialog" hidden></button>
           <div id="composeHint">Enter to start · Shift+Enter for a newline</div>
-          <button id="cancelBtn" title="Cancel the running turn, whoever sent it" style="display:none">Cancel</button>
+          <button id="cancelBtn" title="Cancel the running turn, whoever sent it" style="display:none">Stop turn</button>
           <div class="split">
             <button id="actionBtn">Start</button>
           </div>
@@ -1056,7 +1058,7 @@ a{color:var(--accent)}
         <div id="contextChips" aria-label="Attached context" hidden></div>
         <button class="ghost" id="infoContinueBtn" title="Continue: start the next link of this session's chain from its recap (this one is archived)" style="display:none">continue →</button>
         <button class="ghost" id="infoArchiveBtn" title="Archive: hide from the lists, keep for good" style="display:none">archive</button>
-        <button class="ghost" id="infoStopBtn" title="Stop session (terminate worker)" style="display:none">stop</button>
+        <button class="ghost" id="infoStopBtn" title="Stop session (terminate worker)" style="display:none">stop session</button>
         <button class="ghost" id="infoDeleteBtn" title="Delete session (for good)" style="display:none">delete</button>
       </div>
     </div>

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

@@ -4,15 +4,24 @@
 // on (a provider retry, plugins' setup) and how many turns this page saw
 // end. The DOM, the clock and the interval come in, so `node --test` drives
 // it with a fake element.
-import { elapsedSince, turnTimingText } from "./timing.js";
+import { elapsedSince, liveDurationText, turnTimingText } from "./timing.js";
 
 // The live line's text, or null when the turn's start is unknown. +inStage+:
 // the stage's status row already says the turn runs, so the line drops its
-// own "running" there.
+// own "running" there. The duration is the live one (never "0ms": under a
+// second it shows tenths).
 export function liveLineText({ number, startedAt, note = "", inStage = false }, now = Date.now()) {
   const duration = elapsedSince(startedAt, now);
   if (duration === null) return null;
-  return turnTimingText(number, duration, { running: !inStage }) + (note ? ` · ${note}` : "");
+  const turn = Number.isInteger(number) && number > 0 ? `turn ${number}` : "turn";
+  return `${turn}${!inStage ? " running" : ""} · ${liveDurationText(duration)}${note ? ` · ${note}` : ""}`;
+}
+
+// The live ticker's interval at +elapsedMs+ into the turn: 200 ms during the
+// first ten seconds (the live text counts up from the first second), then
+// the one-second tick.
+export function liveTickMs(elapsedMs) {
+  return Number(elapsedMs) < 10000 ? 200 : 1000;
 }
 
 // The record a turn-end read finishes its line with: the one with the
@@ -52,18 +61,36 @@ export function createLiveTiming({
   // the next one, so a turn queued behind another reads its own number while
   // the other's re-read is still out.
   let ended = 0;
+  // The ticker's current interval, so a tick that crossed the 10 s boundary
+  // re-arms it at the slower one.
+  let tickerMs = null;
 
   function stopTicker() {
     if (ticker !== null) {
       cancel(ticker);
       ticker = null;
+      tickerMs = null;
     }
   }
 
+  function armTicker(ms) {
+    stopTicker();
+    ticker = every(tick, ms);
+    tickerMs = ms;
+  }
+
   function tick() {
-    const text = liveLineText({ number, startedAt: timing().activeTurn?.started_at, note, inStage }, now());
+    const startedAt = timing().activeTurn?.started_at;
+    const text = liveLineText({ number, startedAt, note, inStage }, now());
     if (el && text !== null) el.textContent = text;
     onTick();
+    // The interval follows the elapsed time: 200 ms while the line counts
+    // up from the first second, one a second once it is on whole seconds.
+    if (ticker !== null) {
+      const elapsed = elapsedSince(startedAt, now());
+      const ms = elapsed === null ? tickerMs : liveTickMs(elapsed);
+      if (ms !== tickerMs) armTicker(ms);
+    }
   }
 
   return {
@@ -87,7 +114,7 @@ export function createLiveTiming({
       el.className = "turn-timing live";
       inStage = !!place(el);
       tick();
-      ticker = every(tick, 1000);
+      armTicker(liveTickMs(0));
     },
 
     tick,

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

@@ -0,0 +1,26 @@
+import { normalize } from "./format.js";
+
+// Where the open session's title shows: once on screen. Its strip card says
+// it when the strip is shown and has an `.active` card for it; otherwise
+// (strip hidden, an older session without a card, a delegate folded into its
+// parent's card) the top bar does. The All sessions view shows none.
+// Plain rules, no DOM; app.js wires them (updateSessionTitle).
+
+const TAB_TITLE_CHARS = 40;
+
+// The top bar's text, or "" when it shows no title.
+export function topBarTitle({ title, cardShown, stripHidden, allView }) {
+  const text = normalize(title);
+  if (!text || allView) return "";
+  if (cardShown && !stripHidden) return "";
+  return text;
+}
+
+// The browser tab: "<title, cut at 40> · <base>", the base alone without a
+// session title (base = "Chi · <project>" or "Chi").
+export function tabTitle({ title, base }) {
+  const text = normalize(title);
+  if (!text) return base;
+  const cut = text.length > TAB_TITLE_CHARS ? `${text.slice(0, TAB_TITLE_CHARS)}…` : text;
+  return `${cut} · ${base}`;
+}

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

@@ -108,6 +108,21 @@ function withTask(slot, row) {
   return row.tool === "task_wait" && row.view?.task_id ? { ...slot, taskId: row.view.task_id, key: row.key } : slot;
 }
 
+// A trail item's text and its hover: the text the (CSS-truncated) item shows,
+// and the full text it hovers. A call hovers its full command when it has
+// one, else its whole "<mark> <name> <title>" text; a flash (a hook notice)
+// hovers its whole "<mark> <text>" line.
+export function trailItemText(item) {
+  const text = `${trailMark(item.status)} ${item.name}${item.title ? ` ${item.title}` : ""}`;
+  return { text, hover: item.command || text };
+}
+
+// A trail flash's text and hover: the whole "<mark> <text>" line.
+export function trailFlashText(flash, mark) {
+  const text = `${mark} ${flash.text}`;
+  return { text, hover: text };
+}
+
 // While the first step has no thinking and no tool rows the turn is plain:
 // its text streams in the stage's answer slot, as the turn view's
 // chrome-less block streams like a bubble.

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

@@ -11,7 +11,7 @@
 // reload. Slots are patched in place, never rebuilt from HTML: a selection
 // and annotate survive. The rules are pure in stage_model.js.
 import { createTurnView } from "./turn_view.js";
-import { flashOf, handOffDue, handOffOrder, headlineOf, inUseFrom, isPlain, liveSlots, placeFor, trailMark, trailTone } from "./stage_model.js";
+import { flashOf, handOffDue, handOffOrder, headlineOf, inUseFrom, isPlain, liveSlots, placeFor, trailFlashText, trailItemText, trailTone } from "./stage_model.js";
 import { formatDuration } from "./timing.js";
 import { taskCommand, taskStopButton } from "./task_stop.js";
 
@@ -265,12 +265,18 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     if (shown.trail === key) return;
     shown.trail = key;
     trail.replaceChildren();
-    if (flashing) node("span", `ts-trail-item ${flashing.kind}`, trail).textContent = `${FLASH_MARKS[flashing.kind]} ${flashing.text}`;
+    if (flashing) {
+      const flash = trailFlashText(flashing, FLASH_MARKS[flashing.kind]);
+      const el = node("span", `ts-trail-item ${flashing.kind}`, trail);
+      el.textContent = flash.text;
+      el.title = flash.hover;
+    }
     for (const item of items) {
       const tone = trailTone(item.status);
       const el = node("span", `ts-trail-item${tone ? ` ${tone}` : ""}`, trail);
-      el.textContent = `${trailMark(item.status)} ${item.name} ${item.title}`.trim();
-      if (item.command) el.title = item.command;
+      const { text, hover } = trailItemText(item);
+      el.textContent = text;
+      el.title = hover;
     }
     if (!flashing && !items.length) node("span", "ts-trail-item none", trail).textContent = "no tool calls yet";
   }

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

@@ -18,13 +18,11 @@ export function stripColumns(width) {
 // And how many wait on the user (notify.js waitingOn: a question, an
 // approval, a card), so a hidden strip still says one needs an answer.
 // Plain text parts; live and waiting are "" when none. Zero sessions keep
-// the bare label.
-// @param cards how many cards the list makes (a parent's delegates fold
-//   into its card: one), the count's number; live and waiting count every
-//   session, a waiting delegate is still one thing waiting on the user
-export function stripShowParts(sessions, { cards = null } = {}) {
+// the bare label. The count is sessions (a folded delegate counts), the
+// number the "All sessions" tile shows.
+export function stripShowParts(sessions) {
   const list = sessions || [];
-  const n = cards ?? list.length;
+  const n = list.length;
   const liveN = list.filter((s) => s && s.owner === "worker").length;
   const waitingN = list.filter((s) => waitingOn(s)).length;
   return {

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

@@ -20,6 +20,17 @@ export function turnTimingText(number, durationMs, { running = false, canceled =
   return `${turn}${running ? " running" : ""} · ${formatDuration(durationMs)}${canceled ? " · canceled" : ""}`;
 }
 
+// The LIVE line's duration: never milliseconds — under a second it shows
+// tenths ("0.0s", "0.2s"), then what formatDuration prints from 1 s on
+// (its 0.1 s precision holds to 10 s). A finished turn's line keeps
+// formatDuration exactly as it is.
+export function liveDurationText(durationMs) {
+  const ms = Number(durationMs);
+  if (!Number.isFinite(ms) || ms < 0) return "";
+  if (ms < 1000) return `${(ms / 1000).toFixed(1)}s`;
+  return formatDuration(ms);
+}
+
 // A cancel's reason as the terminal UIs name it too (Formatting::
 // CANCEL_REASONS); anything else as it is. Both sides: spec/shared/labels_matrix.json.
 const CANCEL_REASONS = { ctrl_c: "Ctrl-C", user: "stopped", hook: "by a hook" };