samagotchi 0.108.0 → 0.110.0

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

@@ -4,7 +4,7 @@
 // notices, plugins' steers, command and note bubbles. The markup is lit
 // (turn_html.js elementOf); createBubbles puts them in the history.
 import { html, nothing } from "./vendor/lit-html.js";
-import { normalize, recapLabel, recapPlace } from "./format.js";
+import { fullTime, normalize, recapLabel, recapPlace } from "./format.js";
 import { BADGES, elementOf, noteBubbleTemplate, stateBadgeTemplate, steerRowTemplate, userBubbleTemplate } from "./turn_html.js";
 import { thumbsTemplate } from "./images.js";
 import { appendAboveLiveTiming, STOPPED_LINE_CLASS } from "./timing.js";
@@ -12,6 +12,7 @@ import { keepFollowing } from "./scroll.js";
 import { linkedLine } from "./notice_links.js";
 import { hookNoticeLabel, isReportClient, promptOps } from "./turn_events.js";
 import { drawCommandBubble } from "./commands.js";
+import { TIME_GAP_CLASS, timeGapEl } from "./time_gaps.js";
 
 export function removeQueuedBubble(bubble) {
   if (!bubble) return;
@@ -49,8 +50,11 @@ export function endBubbleTemplate(text, { stopped = false } = {}) {
 }
 
 // The idle recap, open; a stale one (+turnsSince+ > 0) says it is earlier.
-export function recapTemplate(text, turnsSince = 0) {
-  return html`<details class=${turnsSince > 0 ? "bubble recap stale" : "bubble recap"} open><summary>${recapLabel(turnsSince)}</summary><div class="recap-body">${text}</div></details>`;
+// +createdAt+: when it was written (its label's time, kept for the stale
+// label as data-created-at).
+export function recapTemplate(text, turnsSince = 0, createdAt = null, now = Date.now()) {
+  const created = typeof createdAt === "string" && createdAt ? createdAt : nothing;
+  return html`<details class=${turnsSince > 0 ? "bubble recap stale" : "bubble recap"} data-created-at=${created} open><summary>${recapLabel(turnsSince, false, createdAt, now)}</summary><div class="recap-body">${text}</div></details>`;
 }
 
 // A guardrail hook or rule file that failed to load (once per worker), or
@@ -228,14 +232,16 @@ export function createBubbles({
   // the end of the history. A turn starting leaves it in place, marked
   // earlier; only a new recap replaces it.
 
-  function showRecap(text, turnsSince = 0) {
+  function showRecap(text, turnsSince = 0, createdAt = null) {
     if (!text) return;
     removeRecap();
-    const details = elementOf(recapTemplate(text, turnsSince));
+    const details = elementOf(recapTemplate(text, turnsSince, createdAt));
     // 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(historyEl), turnsSince);
+    const prompt = recapPlace(turnPromptBubbles(historyEl), turnsSince);
+    // Above that turn's gap divider too: the recap was written before the quiet stretch ended.
+    const before = prompt?.previousElementSibling?.matches(`.${TIME_GAP_CLASS}`) ? prompt.previousElementSibling : prompt;
     keepFollowing(historyEl, () => (before ? historyEl.insertBefore(details, before) : appendAboveLiveTiming(historyEl, details, liveTurn.timing.el)));
   }
 
@@ -244,7 +250,7 @@ export function createBubbles({
     historyEl.querySelectorAll(".bubble.recap:not(.stale)").forEach((el) => {
       el.classList.add("stale");
       const summary = el.querySelector("summary");
-      if (summary) summary.textContent = recapLabel(0, true);
+      if (summary) summary.textContent = recapLabel(0, true, el.dataset.createdAt || null);
     });
   }
 
@@ -282,6 +288,9 @@ export function createBubbles({
     const id = selected();
     if (id) div.dataset.keptFor = id;
     drawCommandBubble(div, view);
+    // When it happened (a reminder's at): the hover, as a reload's bubbles.
+    const when = fullTime(view.at);
+    if (when) div.title = when;
     placeFollowing(div);
   }
 
@@ -295,8 +304,21 @@ export function createBubbles({
     placeFollowing(elementOf(noteBubbleTemplate(note)));
   }
 
+  // A quiet stretch passed (time_gaps.js): its divider above +before+ (a
+  // turn's prompt bubble, wherever it sits), else at the end.
+  function addTimeGap(text, { before = null } = {}) {
+    if (!text) return null;
+    const el = timeGapEl(text);
+    if (before?.parentNode) {
+      keepFollowing(historyEl, () => before.parentNode.insertBefore(el, before));
+      return el;
+    }
+    return placeFollowing(el);
+  }
+
   return {
     removeHintIfEmpty, placeFollowing, appendChunk, addEndBubble, makeUserBubble, bubbleById, applyPromptOps, showRecap,
     markRecapStale, showGuardrailWarning, showSteers, showHookNotice, addCommandBubble, commandBubble, addNoteBubble,
+    addTimeGap,
   };
 }

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

@@ -1,9 +1,27 @@
+import { authProbe, lostAnswer } from "./auth_lost.js";
+
+// What the page does when an answer says the sign-in is gone (auth_lost.js;
+// app.js sets it). A no-op until then.
+let authLostHandler = () => {};
+export function onAuthLost(handler) {
+  authLostHandler = typeof handler === "function" ? handler : () => {};
+}
+
+// Accept: application/json: an auth proxy whose session ended answers 401
+// {} (oauth2-proxy) rather than a redirect to its sign-in. A fetch that
+// fails outright asks authProbe whether that was a sign-in redirect.
 export function api(path, opts = {}) {
   const { fetchImpl = globalThis.fetch } = opts;
   return fetchImpl(path, {
-    headers: { "Content-Type": "application/json", ...(opts.headers || {}) },
     ...opts,
+    headers: { "Content-Type": "application/json", Accept: "application/json", ...(opts.headers || {}) },
+  }).catch((error) => {
+    if (error instanceof TypeError) {
+      authProbe(fetchImpl).then((state) => { if (state === "lost") authLostHandler(`fetch ${path}`); }, () => {});
+    }
+    throw error;
   }).then(async (r) => {
+    if (lostAnswer(r)) authLostHandler(`${r.status} ${path}`);
     const j = await r.json().catch(() => ({}));
     if (!r.ok) {
       // The server's words as they are: what the page shows the user. The
@@ -279,10 +297,12 @@ export function openStream(id, fromSeq, handlers = {}, opts = {}) {
 // only when the browser gave up before the first frame (a chi web without
 // a hub answers 503, a bad ?dir 400): the caller falls back to fetching.
 // Later errors are left to EventSource's own reconnect, and a reconnect
-// always starts with a fresh snapshot.
+// always starts with a fresh snapshot, unless the browser gave up for good
+// (readyState CLOSED: an auth proxy answered the reconnect with its sign-in
+// page): onClosed then, and the caller probes and opens it again.
 // @return {{close(): void}}
 export function openEvents(handlers = {}, opts = {}) {
-  const { EventSourceImpl = globalThis.EventSource, dir, onError } = opts;
+  const { EventSourceImpl = globalThis.EventSource, dir, onError, onClosed } = opts;
   const url = dir ? `/api/events?dir=${encodeURIComponent(dir)}` : "/api/events";
   const es = new EventSourceImpl(url);
   let frameReceived = false;
@@ -290,10 +310,14 @@ export function openEvents(handlers = {}, opts = {}) {
   let live = true;
   es.onerror = () => {
     // readyState 2 (CLOSED): the browser won't retry on its own.
-    if (frameReceived || !live || es.readyState !== 2) return;
+    if (!live || es.readyState !== 2) return;
     live = false;
     try { es.close(); } catch (_) {}
-    if (typeof onError === "function") onError();
+    if (!frameReceived) {
+      if (typeof onError === "function") onError();
+    } else if (typeof onClosed === "function") {
+      onClosed();
+    }
   };
   return {
     close() {

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

@@ -253,13 +253,79 @@ export function relativeTime(iso, now = Date.now()) {
   return d.getFullYear() === new Date(now).getFullYear() ? date : `${date} ${d.getFullYear()}`;
 }
 
-// The recap bubble's label: how many turns came after it (stale: a turn
-// started while the page showed it, count unknown).
-export function recapLabel(turnsSince, stale = false) {
+// ── Wall times (MessageTime's twin, lib/samagotchi/message_time.rb) ──
+// A history entry's `at` (local ISO), a turn record's started_at, an
+// event's at / created_at: the bubbles' hover and the gap dividers. Every
+// helper takes its times (ISO text or epoch ms) and +now+ explicitly.
+
+// The quiet time after which the page marks a gap (MessageTime::GAP_SECONDS).
+export const GAP_SECONDS = 600;
+
+const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+// +time+ (ISO text, epoch ms or a Date) as a Date, or null.
+export function timeOf(time) {
+  const t = time instanceof Date ? time.getTime() : typeof time === "number" ? time : typeof time === "string" ? Date.parse(time) : NaN;
+  return Number.isFinite(t) ? new Date(t) : null;
+}
+
+const pad2 = (n) => String(n).padStart(2, "0");
+const hhmm = (d) => `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+// "Sat 24 Oct 09:10" (MessageTime.day_clock).
+const dayClock = (d) => `${DAYS[d.getDay()]} ${d.getDate()} ${MONTHS[d.getMonth()]} ${hhmm(d)}`;
+
+// "14:32", local time; on another local day than +now+ (when given) the
+// day form "Sat 24 Oct 09:10". "" for no or bad input.
+export function wallClock(time, now = null) {
+  const d = timeOf(time);
+  if (!d) return "";
+  const today = now === null ? null : timeOf(now);
+  return today && !sameDay(d, today) ? dayClock(d) : hhmm(d);
+}
+
+// A bubble's hover: "Sat 24 Oct 2026 14:32:05", local time; "" for none.
+export function fullTime(time) {
+  const d = timeOf(time);
+  if (!d) return "";
+  return `${DAYS[d.getDay()]} ${d.getDate()} ${MONTHS[d.getMonth()]} ${d.getFullYear()} ${hhmm(d)}:${pad2(d.getSeconds())}`;
+}
+
+// "47 min", "3 h", "2 d": whole units, rounded down (MessageTime.ago; the
+// scale of relativeTime).
+export function agoText(seconds) {
+  const s = Number(seconds) || 0;
+  if (s < 3600) return `${Math.max(Math.floor(s / 60), 0)} min`;
+  if (s < 86400) return `${Math.floor(s / 3600)} h`;
+  return `${Math.floor(s / 86400)} d`;
+}
+
+// The divider between activity that ended at +prevEnd+ and activity that
+// starts at +nextStart+: null below GAP_SECONDS (or when either is
+// unknown), else "── 14:32 · 47 min later ──" (MessageTime.gap_line). The
+// date is added when the local day changed, and (the page reads old
+// history too) when the next start is on another day than +now+.
+export function gapText(prevEnd, nextStart, now = Date.now()) {
+  const prev = timeOf(prevEnd);
+  const next = timeOf(nextStart);
+  if (!prev || !next) return null;
+  const seconds = (next - prev) / 1000;
+  if (seconds < GAP_SECONDS) return null;
+  const today = timeOf(now);
+  const time = sameDay(prev, next) && (!today || sameDay(next, today)) ? hhmm(next) : dayClock(next);
+  return `\u2500\u2500 ${time} \u00b7 ${agoText(seconds)} later \u2500\u2500`;
+}
+
+// The recap bubble's label: when it was written (+createdAt+, wallClock
+// against +now+), how many turns came after it (stale: a turn started while
+// the page showed it, count unknown).
+export function recapLabel(turnsSince, stale = false, createdAt = null, now = Date.now()) {
   const n = Number(turnsSince) || 0;
-  if (n === 1) return "recap · before the last turn";
-  if (n > 1) return `recap · before the last ${n} turns`;
-  return stale ? "recap · earlier" : "recap";
+  const time = wallClock(createdAt, now);
+  const head = time ? `recap · ${time}` : "recap";
+  if (n === 1) return `${head} · before the last turn`;
+  if (n > 1) return `${head} · before the last ${n} turns`;
+  return stale ? `${head} · earlier` : head;
 }
 
 // The info bar's memory chip on a phone (where the "mem: …" line goes),

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

@@ -51,6 +51,8 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .bubble.output.boxed{overflow:hidden;transition:max-height 360ms ease}
 .bubble.output.revealing>:not(.copy-btn){animation:fadeIn 240ms ease}
 @media (prefers-reduced-motion:reduce){.bubble.output.boxed{transition:none}.bubble.output.revealing>:not(.copy-btn){animation:none}}
+/* A gap divider (time_gaps.js): one centred dim line where a quiet stretch passed, never wrapped (a phone at 360 px keeps it on one line). Not a .bubble. */
+.time-gap{align-self:stretch;text-align:center;color:var(--time-gap);font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0;user-select:none}
 .turn-timing{margin-top:8px;color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums}
 .turn-timing.live{color:var(--accent)}
 .bubble.output.markdown{white-space:normal}

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

@@ -67,6 +67,8 @@ body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica
 main{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 8px}
 .p-thread{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
 .p-empty{color:var(--text-muted);text-align:center;padding:40px 0}
+/* A gap divider (time_gaps.js): one centred dim line where a quiet stretch passed, never wrapped (a phone at 360 px keeps it on one line). Not a .bubble. */
+.time-gap{align-self:stretch;text-align:center;color:var(--time-gap);font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0;user-select:none}
 .p-msg{display:flex;flex-direction:column;gap:4px;min-width:0}
 .p-who{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
 .p-who b{font-weight:600;color:var(--author-color,var(--author-owner))}

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

@@ -7,8 +7,19 @@
 // POST …/turn (text only); their queued ones come back with Dequeue.
 import {
   authorColor, participantAuthor, authorLabel, toolLine, toolsSummary, refusalText, dequeueText, endedText, streamURL, reloads, endsLiveTurn, liveFrom, applyLive,
-  liveText, withToolSteps, pickSubject, subjectBody, subjectsKey, narrowView, retryDelay, retries,
+  liveText, withToolSteps, pickSubject, subjectBody, subjectsKey, narrowView, retryDelay, retries, threadGaps,
 } from "./participant_model.js";
+import { fullTime } from "./format.js";
+import { createAuthLost, lostAnswer } from "./auth_lost.js";
+import { REPLACE_SESSION_TEXT, fragmentCode, tradeFragmentCode } from "./token_fragment.js";
+
+// A link's #code= opened in a browser that already has a cookie: traded
+// first, the page reloads without it.
+// This page has a session already: the trade would replace it (a link
+// someone sent to swap this browser's session for theirs), so ask first.
+if (fragmentCode(globalThis.location?.hash)
+    && await tradeFragmentCode({ ask: () => globalThis.confirm(REPLACE_SESSION_TEXT) })) await new Promise(() => {});
+const authLost = createAuthLost();
 
 const $ = (id) => document.getElementById(id);
 const body = document.body.dataset;
@@ -47,17 +58,21 @@ function el(tag, cls, text) {
 }
 
 // A request's answer; a network failure is status 0 (the page says it
-// can't reach the session), never a throw.
+// can't reach the session), never a throw. A 401 with chi's words is the
+// link ending (revoked, expired); one without (an auth proxy's own 401 {}),
+// a redirect or an HTML answer is the sign-in ending (auth_lost.js).
 async function api(path, options = {}) {
   let res;
   try {
-    res = await fetch(path, { credentials: "same-origin", ...options });
+    res = await fetch(path, { credentials: "same-origin", ...options,
+                              headers: { Accept: "application/json", ...(options.headers || {}) } });
   } catch {
     return { status: 0, ok: false, body: null };
   }
   let json = null;
   try { json = await res.json(); } catch { json = null; }
-  if (res.status === 401) showEnded(json);
+  if (lostAnswer(res) && !(res.status === 401 && json?.error)) authLost(`${res.status} ${path}`);
+  else if (res.status === 401) showEnded(json);
   return { status: res.status, ok: res.ok, body: json };
 }
 
@@ -227,6 +242,9 @@ function setView(view) {
 function messageNode(message) {
   const user = message.role === "user";
   const node = el("div", `p-msg ${user ? "user" : "reply"}${message.mine ? " mine" : ""}`);
+  // When it happened, on hover (the owner's page's bubbles do the same).
+  const when = fullTime(message.at);
+  if (when) node.title = when;
   if (user) {
     node.style.setProperty("--author-color", authorColor(message.author));
     const who = el("div", "p-who");
@@ -269,16 +287,35 @@ function toolsNode(rows, open = null) {
   return details;
 }
 
+// A gap divider (the owner's page's .time-gap line), kept while its text is.
+function gapNode(text, old) {
+  if (!text) return null;
+  if (old?.textContent === text) return old;
+  const node = el("div", "time-gap", text);
+  node.setAttribute("role", "separator");
+  return node;
+}
+
 function renderThread() {
   const thread = $("thread");
-  drawnMessages = withToolSteps(data.messages || []).map((message, at) => {
+  const messages = withToolSteps(data.messages || []);
+  const gaps = threadGaps(messages, { currentAt: data.current_turn?.at || null });
+  drawnMessages = messages.map((message, at) => {
     const sig = JSON.stringify(message);
     const old = drawnMessages[at];
-    if (old?.sig === sig) return old;
-    return { sig, node: keepToolsOpen(messageNode(message), old?.node) };
+    const gap = gapNode(gaps.before[at], old?.gap);
+    if (old?.sig === sig) return { ...old, gap };
+    return { sig, gap, node: keepToolsOpen(messageNode(message), old?.node) };
   });
-  const nodes = drawnMessages.map((entry) => entry.node);
-  if (data.current_turn) nodes.push(...currentTurnNodes());
+  const nodes = drawnMessages.flatMap((entry) => (entry.gap ? [entry.gap, entry.node] : [entry.node]));
+  if (data.current_turn) {
+    const gap = gapNode(gaps.current, thread.querySelector(":scope > .time-gap.current"));
+    if (gap) {
+      gap.classList.add("current");
+      nodes.push(gap);
+    }
+    nodes.push(...currentTurnNodes());
+  }
   else if (data.waiting_for_owner) nodes.push(el("div", "p-waiting", "Waiting for the session's owner"));
   if (nodes.length === 0) nodes.push(el("div", "p-empty", "Nothing here yet. Comments and replies show here."));
   const main = $("main");
@@ -312,7 +349,7 @@ function currentTurnNodes() {
   const nodes = [];
   if (turn.prompt !== undefined || turn.automatic) {
     nodes.push(messageNode({ role: "user", content: turn.automatic ? "An automatic turn" : turn.prompt, author: turn.author,
-      author_name: turn.author_name, mine: turn.mine, automatic: turn.automatic }));
+      author_name: turn.author_name, mine: turn.mine, automatic: turn.automatic, at: turn.at }));
   }
   const reply = el("div", "p-msg reply live");
   fillLive(reply, $("liveReply"));

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

@@ -3,6 +3,8 @@
 // refusal in words, the stream's URL, and the live turn as filtered events
 // build it (ParticipantView on the server decides what arrives at all).
 
+import { gapText } from "./format.js";
+
 // A participant's author: "p:" and its grant id, as the server writes it
 // (Steer.author_for / PARTICIPANT_PREFIX): the one place the web spells it.
 export const PARTICIPANT_PREFIX = "p:";
@@ -47,30 +49,51 @@ export function toolsSummary(rows) {
 // The conversation with each run of text-less tool steps (a reply that
 // only called tools) folded into the next reply's rows, or one row group
 // when no reply follows: one "3 tools: …" line instead of three.
+// A folded run with no reply after it keeps its last step's time (at).
 export function withToolSteps(messages) {
   const out = [];
   let pending = [];
+  let pendingAt = null;
+  const flush = () => out.push({ role: "assistant", content: "", tools: pending, ...(pendingAt ? { at: pendingAt } : {}) });
   for (const message of messages) {
     const toolOnly = message.role === "assistant" && !String(message.content || "").trim() && message.tools?.length;
     if (toolOnly) {
       pending = pending.concat(message.tools);
+      pendingAt = message.at || pendingAt;
       continue;
     }
     if (pending.length) {
       if (message.role === "assistant") {
         out.push({ ...message, tools: pending.concat(message.tools || []) });
         pending = [];
+        pendingAt = null;
         continue;
       }
-      out.push({ role: "assistant", content: "", tools: pending });
+      flush();
       pending = [];
+      pendingAt = null;
     }
     out.push(message);
   }
-  if (pending.length) out.push({ role: "assistant", content: "", tools: pending });
+  if (pending.length) flush();
   return out;
 }
 
+// The thread's gap dividers (format.js gapText, the owner's page's words):
+// before each message, and before the turn in progress (+currentAt+, its
+// turn_started's at), the divider's text or null. A gap is marked only
+// where a person's message or a turn starts, measured from the last
+// message's time before it: never inside a turn's work.
+export function threadGaps(messages, { currentAt = null, now = Date.now() } = {}) {
+  let last = null;
+  const before = (messages || []).map((message) => {
+    const text = message?.role === "user" && last && message.at ? gapText(last, message.at, now) : null;
+    if (message?.at) last = message.at;
+    return text;
+  });
+  return { before, current: last && currentAt ? gapText(last, currentAt, now) : null };
+}
+
 // The server's words (ParticipantMessages, a relay's detail) as the page
 // shows them: a sentence, never reworded; null with none.
 export function sentence(detail) {

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

@@ -36,10 +36,13 @@
 //   setUsedMemories(names), showRecap(text), showGuardrailWarning(text, label),
 //   showHookNotice(data), onInitEvent(type, data), upsertCard(card),
 //   refreshCardBodies(), syncModelPick()   the page's hooks
+//   gapClock              the page's last activity (time_gaps.js
+//                         createGapClock; renderHistory seeds it)
+//   addTimeGap(text, {before})              a gap's divider (bubbles.js)
 
 import { routeChunk } from "./chunk_router.js";
 import { extractCtxPct, generationTokens } from "./ctx.js";
-import { failedTurnText } from "./format.js";
+import { failedTurnText, fullTime } from "./format.js";
 import { cancelLineText } from "./timing.js";
 import { keepFollowing } from "./scroll.js";
 import { shownElsewhere } from "./card.js";
@@ -60,7 +63,17 @@ export function createStreamHandlers(deps) {
     appendChunk, readTurnEnd, applyFinalMarkdown, refreshTimingFromSession, makeUserBubble, addEndBubble,
     commandBubble, addCommandBubble, addNoteBubble, findInTurnRoots, setUsedMemories, showRecap,
     showGuardrailWarning, showHookNotice, onInitEvent, upsertCard, refreshCardBodies, syncModelPick,
+    gapClock = null, addTimeGap = () => null,
   } = deps;
+  // Activity starts (a turn, a reminder, a note) at +time+ (the event's;
+  // none: now): a gap's divider above +before+ (else at the end) when a
+  // quiet stretch passed since the last activity.
+  function gapBefore(time, before = null) {
+    const text = gapClock?.start(time);
+    if (text) addTimeGap(text, { before });
+  }
+  // Activity ended (a turn's end): the next gap counts from now.
+  const activityEnded = () => gapClock?.end(null);
 
   return {
     generation_chunk: (data) => {
@@ -137,6 +150,12 @@ export function createStreamHandlers(deps) {
       markRecapStale();
       shownTexts.turnStarted();
       const promptBubble = applyPromptOps(data);
+      // The turn's wall time (a replay's: its start): the divider above its
+      // prompt, or where the turn goes when it has none; its bubble's hover.
+      const startedAt = data.at || data.started_at || null;
+      gapBefore(startedAt, promptBubble);
+      const when = fullTime(startedAt);
+      if (when && promptBubble?.setAttribute && !promptBubble.title) promptBubble.title = when;
       liveTurn.cutAfter = data.cut_after ?? null;
       liveTurn.serverGen = null;
       // A participant's review turn: its id and author, for Apply at its end
@@ -152,6 +171,7 @@ export function createStreamHandlers(deps) {
       liveTurn.timing.start(data.started_at, data.turn_id || null);
     }),
     turn_completed: async (data) => {
+      activityEnded();
       // A participant's turn: their spend and turns in the panel moved.
       if (data.origin?.author) participantsControl?.reload();
       endTurnView("completed", null, { emptyAnswer: data.turn_summary?.empty_answer || null });
@@ -196,6 +216,7 @@ export function createStreamHandlers(deps) {
       }
     },
     turn_canceled: (data) => {
+      activityEnded();
       endTurnView("canceled", cancelLineText(data.cancellation_reason || "", data.cancelled_by), { stopped: true });
       setLiveStatus("idle");
       refreshTimingFromSession();
@@ -205,6 +226,7 @@ export function createStreamHandlers(deps) {
     // (prompt_restored), and the prompts queued behind it run as usual. A turn
     // that got to tool steps stays as it is (kept_steps; no prompt_restored).
     turn_failed: (data) => {
+      activityEnded();
       const text = failedTurnText(data);
       // Only a rolled-back turn's line waits for its prompt_restored.
       liveTurn.failedText = Number.isInteger(data.kept_steps) ? null : text;
@@ -314,10 +336,16 @@ export function createStreamHandlers(deps) {
       if ((data.anytime || data.waits) && !data.card && !commandBubble(data.command_id)) addCommandBubble(commandView(data, clientId));
     },
     // Due reminders went into the turn (a reminder turn has no prompt bubble).
-    reminder_injected: (data) => addCommandBubble({ label: null, line: reminderText(data), text: "" }),
+    reminder_injected: (data) => {
+      gapBefore(data.at);
+      addCommandBubble({ label: null, line: reminderText(data), text: "", at: data.at });
+    },
     // A context note joined the conversation (between turns; no turn runs).
+    // A note is activity of its own: it starts nothing, so it ends there too.
     context_added: (data) => {
-      addNoteBubble({ label: data.label, content: data.text || "" });
+      const at = data.at || data.created_at || null;
+      gapBefore(at);
+      addNoteBubble({ label: data.label, content: data.text || "", at });
       // An attached context source's note: its chip changed.
       if (data.context_source) contextChips.refresh();
     },
@@ -385,7 +413,7 @@ export function createStreamHandlers(deps) {
     recap_ready: (data) => {
       // After the turn it covers, never above it.
       turnDom.handOff?.({ immediate: true });
-      if (!liveTurn.running) showRecap(data.recap);
+      if (!liveTurn.running) showRecap(data.recap, 0, data.created_at || null);
     },
     guardrail_warning: (data) => showGuardrailWarning(data.message, data.label || "guardrails"),
     // A notice during a turn is a row of its current step. One the page

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

@@ -0,0 +1,98 @@
+// The history's gap dividers: one dim line ("── 14:32 · 47 min later ──",
+// format.js gapText) where a quiet stretch of GAP_SECONDS or more passed
+// between the end of one activity and the start of the next (a turn, a
+// note, a reminder). Nothing during active work: a long turn followed at
+// once by another has none (measured end to start).
+//
+// The times: a history entry's `at` (MessageTime, the server forwards it),
+// else for a turn its record's started_at and started_at + duration_ms
+// (sessions saved before stamps). Live: the events' at / created_at, else
+// the page's clock (createGapClock).
+//
+// The divider is its own element (.time-gap), never a .bubble or a
+// .turn-work: code that walks those (turn prompts, recap placement, the
+// stage's hand-off) never sees it.
+import { html } from "./vendor/lit-html.js";
+import { elementOf } from "./turn_html.js";
+import { gapText, timeOf } from "./format.js";
+
+export const TIME_GAP_CLASS = "time-gap";
+
+export function timeGapTemplate(text) {
+  return html`<div class=${TIME_GAP_CLASS} role="separator">${text}</div>`;
+}
+
+export function timeGapEl(text) {
+  return elementOf(timeGapTemplate(text));
+}
+
+// The history items a group (timing.js turnGroups) holds, by index.
+function groupIndexes(group) {
+  if (group.kind === "note" || group.kind === "steer") return [group.i];
+  if (group.kind === "answer") return [group.answer];
+  const steps = group.steps || [];
+  return [
+    group.user, ...steps.map((step) => step.i), ...steps.flatMap((step) => step.steers || []),
+    ...(group.steers || []), ...(group.merged || []), group.answer, group.emptyAnswer,
+  ].filter((i) => Number.isInteger(i));
+}
+
+// A group's start and end (epoch ms, null when unknown): its first stamped
+// entry's time, else its turn record's start; its last activity: the later
+// of its last stamped entry and its record's end (a turn's tool calls and
+// hooks run after its last message).
+export function groupTimes(group, items) {
+  const stamps = groupIndexes(group).map((i) => timeOf(items[i]?.at)?.getTime()).filter(Number.isFinite);
+  const record = group.record || null;
+  const recordStart = timeOf(record?.started_at)?.getTime();
+  const duration = Number(record?.duration_ms);
+  const recordEnd = Number.isFinite(recordStart) && Number.isFinite(duration) ? recordStart + duration : NaN;
+  const start = stamps.length ? Math.min(...stamps) : Number.isFinite(recordStart) ? recordStart : null;
+  const ends = [...stamps, recordEnd].filter(Number.isFinite);
+  return { start, end: ends.length ? Math.max(...ends) : start };
+}
+
+// For each group, the divider text before it, or null. A group with no
+// known time draws none and hides the gap across it (no divider measured
+// over a stretch whose times are unknown).
+export function groupGaps(groups, items, now = Date.now()) {
+  let prevEnd = null;
+  return groups.map((group) => {
+    const { start, end } = groupTimes(group, items);
+    const text = prevEnd !== null && start !== null ? gapText(prevEnd, start, now) : null;
+    prevEnd = end;
+    return text;
+  });
+}
+
+// The last activity the history shows (epoch ms), or null: the live
+// dividers' starting point.
+export function lastActivity(groups, items) {
+  for (let k = groups.length - 1; k >= 0; k -= 1) {
+    const { end } = groupTimes(groups[k], items);
+    if (end !== null) return end;
+  }
+  return null;
+}
+
+// The live page's last activity: seeded from the drawn history, moved at
+// every start and end of activity. +now+: the page's clock (epoch ms).
+export function createGapClock(now = () => Date.now()) {
+  let last = null;
+  const at = (time) => timeOf(time)?.getTime() ?? now();
+  return {
+    // The history was drawn (a render, a resync): its last activity.
+    seed(time) { last = timeOf(time)?.getTime() ?? null; },
+    // Activity starts at +time+ (an event's at; none: now): the divider's
+    // text when a gap passed since the last, else null.
+    start(time) {
+      const t = at(time);
+      const text = last === null ? null : gapText(last, t, now());
+      last = Math.max(last ?? t, t);
+      return text;
+    },
+    // Activity ended (a turn's end): the next gap counts from here.
+    end(time) { last = at(time); },
+    get last() { return last; },
+  };
+}