samagotchi 0.109.0 → 0.110.0

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,9 @@
 // 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";
 
@@ -241,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");
@@ -283,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");
@@ -326,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; },
+  };
+}

data/lib/samagotchi/web/public/tokens.css

@@ -3,10 +3,10 @@
   --glass-bg:color-mix(in srgb,var(--bg-panel) 70%,transparent);--glass-border:rgba(255,255,255,.08);--glass-highlight:rgba(255,255,255,.05);--glass-shadow:0 8px 30px rgba(0,0,0,.35);
   --diff-add-bg:rgba(63,185,80,.14);--diff-add-text:#aff5b4;--diff-del-bg:rgba(248,81,73,.14);--diff-del-text:#ffc1bc;
   --code-text:#c9d1d9;--code-keyword:#ff7b72;--code-string:#a5d6ff;--code-comment:#8b949e;--code-constant:#79c0ff;--code-func:#d2a8ff;--code-type:#ffa657;
-  --card-hover-border:rgba(255,255,255,.14);--on-solid:#fff;--on-warn:#fff;--text-hover:#fff;--badge-bg:rgba(255,255,255,.08);--badge-ring:rgba(255,255,255,.18);--shadow-strong:rgba(0,0,0,.5);--backdrop:rgba(0,0,0,.85);--toast-shadow:0 6px 24px rgba(0,0,0,.25);--ws-stale-opacity:.4;--ws-rule:var(--border-strong);--ws-muted:var(--text-3);--ws-faint:var(--text-muted);--ws-act-border:#444c56;--author-1:#79c0ff;--author-2:#d2a8ff;--author-3:#7ee787;--author-4:#ffa657;--author-5:#ff7b72;--author-6:#f2cc60;--author-owner:var(--text-3)}
+  --card-hover-border:rgba(255,255,255,.14);--on-solid:#fff;--on-warn:#fff;--text-hover:#fff;--badge-bg:rgba(255,255,255,.08);--badge-ring:rgba(255,255,255,.18);--shadow-strong:rgba(0,0,0,.5);--backdrop:rgba(0,0,0,.85);--toast-shadow:0 6px 24px rgba(0,0,0,.25);--ws-stale-opacity:.4;--ws-rule:var(--border-strong);--ws-muted:var(--text-3);--ws-faint:var(--text-muted);--ws-act-border:#444c56;--author-1:#79c0ff;--author-2:#d2a8ff;--author-3:#7ee787;--author-4:#ffa657;--author-5:#ff7b72;--author-6:#f2cc60;--author-owner:var(--text-3);--time-gap:var(--text-faint)}
 /* Light palette: follows the system setting. :not([data-theme="dark"]) leaves room for a later in-page toggle (data-theme on <html>); there is none yet. Each palette sets color-scheme, so native radios, inputs and scrollbars follow it. */
 @media (prefers-color-scheme:light){:root:not([data-theme="dark"]){color-scheme:light;--bg:#f5f6f8;--bg-panel:#ffffff;--bg-inset:#f1f3f6;--bg-raised:#e8ebf0;--bg-hover:#eceff4;--border:#dde1e7;--border-strong:#c3c9d2;--text:#1f2328;--text-bright:#0d1117;--text-2:#2f363d;--text-3:#475160;--text-muted:#57606a;--text-faint:#636c76;--accent:#0b5cd5;--accent-strong:#0550ae;--accent-bg:#e2ecfd;--accent-ring:rgba(11,92,213,.2);--primary:#1f6feb;--ok:#1a7f37;--ok-text:#116329;--ok-bg:#dafbe1;--warn:#9a6700;--warn-text:#7d4e00;--warn-bright:#875c00;--warn-bg:#fff6cc;--warn-border:#d4a72c;--danger:#cf222e;--danger-bg:#cf222e;--danger-text:#a40e26;--danger-bg-dim:#ffebe9;--think:#8250df;--think-text:#6639ba;--accent-border:#b8cef5;--pick-border:#0969da;
   --glass-border:rgba(31,35,40,.10);--glass-highlight:rgba(255,255,255,.7);--glass-shadow:0 8px 30px rgba(31,35,40,.10);
   --diff-add-bg:rgba(26,127,55,.12);--diff-add-text:#116329;--diff-del-bg:rgba(207,34,46,.10);--diff-del-text:#82071e;
   --code-text:#1f2328;--code-keyword:#cf222e;--code-string:#0a3069;--code-comment:#57606a;--code-constant:#0550ae;--code-func:#8250df;--code-type:#953800;
-  --card-hover-border:rgba(31,35,40,.18);--on-solid:#fff;--on-warn:#1f2328;--text-hover:#0d1117;--badge-bg:rgba(31,35,40,.06);--badge-ring:rgba(31,35,40,.15);--shadow-strong:rgba(31,35,40,.18);--backdrop:rgba(13,17,23,.85);--toast-shadow:0 6px 24px rgba(31,35,40,.14);--ws-stale-opacity:.55;--ws-rule:var(--border);--ws-muted:var(--text-muted);--ws-faint:var(--text-faint);--ws-act-border:var(--border-strong);--author-1:#0550ae;--author-2:#8250df;--author-3:#116329;--author-4:#953800;--author-5:#a40e26;--author-6:#7d4e00;--author-owner:var(--text-3)}}
+  --card-hover-border:rgba(31,35,40,.18);--on-solid:#fff;--on-warn:#1f2328;--text-hover:#0d1117;--badge-bg:rgba(31,35,40,.06);--badge-ring:rgba(31,35,40,.15);--shadow-strong:rgba(31,35,40,.18);--backdrop:rgba(13,17,23,.85);--toast-shadow:0 6px 24px rgba(31,35,40,.14);--ws-stale-opacity:.55;--ws-rule:var(--border);--ws-muted:var(--text-muted);--ws-faint:var(--text-faint);--ws-act-border:var(--border-strong);--author-1:#0550ae;--author-2:#8250df;--author-3:#116329;--author-4:#953800;--author-5:#a40e26;--author-6:#7d4e00;--author-owner:var(--text-3);--time-gap:var(--text-faint)}}

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

@@ -340,7 +340,9 @@ export function snapshotEvents({ current_turn: turn = null, queued = [], queued_
     const cutAfter = turn.cut_after != null ? { cut_after: turn.cut_after } : {};
     // A participant's turn names them (TurnAccumulator keeps author, author_name).
     const author = turn.author ? { author: turn.author, ...(turn.author_name ? { author_name: turn.author_name } : {}) } : {};
-    events.push(withImages({ type: "turn_started", prompt: turn.prompt, origin: turn.origin, continue: !!turn.continue, started_at, ...cutAfter, ...author }, turn.images));
+    // Its wall time (TurnAccumulator keeps turn_started's at): the gap divider before it.
+    const at = typeof turn.at === "string" ? { at: turn.at } : {};
+    events.push(withImages({ type: "turn_started", prompt: turn.prompt, origin: turn.origin, continue: !!turn.continue, started_at, ...at, ...cutAfter, ...author }, turn.images));
     let textIteration = null; // a text bubble is open for this iteration
     const closeText = () => {
       if (textIteration !== null) events.push({ type: "generation_completed" });

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

@@ -8,7 +8,7 @@ import { html, nothing, render } from "./vendor/lit-html.js";
 import { commandBlockTemplate, rowHover } from "./command_view.js";
 import { copySource } from "./copy.js";
 import { activityDiffTemplate } from "./diff_view.js";
-import { clip, steerSender } from "./format.js";
+import { clip, fullTime, steerSender } from "./format.js";
 import { rowTitleRef } from "./refs.js";
 import { readLinesTemplate } from "./read_view.js";
 import { handedOverId } from "./task_stop.js";
@@ -219,9 +219,15 @@ export function shellCommandMessage(content) {
 // A `!cmd`'s history bubble: the same markup the live page draws for a
 // command (app.js's drawCommandBubble): the line, the output in a
 // pre.command-output.
-export function commandBubbleTemplate({ line, text }) {
+export function commandBubbleTemplate({ line, text, at = null }) {
   const body = text ? html`<pre class="command-output">${text}</pre>` : nothing;
-  return html`<div class="bubble command"><div class="command-line">${line}</div>${body}</div>`;
+  return html`<div class="bubble command" title=${timeTitle(at)}><div class="command-line">${line}</div>${body}</div>`;
+}
+
+// A bubble's hover: when it happened (its message's `at`, MessageTime), in
+// full local time; no title when unknown.
+export function timeTitle(at) {
+  return fullTime(at) || nothing;
 }
 
 // A user message's body: runs of `>` lines become <blockquote>s, the rest
@@ -257,9 +263,10 @@ export function answerBubbleTemplate(message, { cls = "", at = null } = {}) {
   const klass = `bubble output${cls}${rendered ? " markdown" : ""}`;
   const answerAt = at ?? nothing;
   const source = rendered || user ? copySource(message) : nothing;
-  if (rendered) return html`<div class=${klass} data-answer-at=${answerAt} data-copy-source=${source} .innerHTML=${message.html}></div>`;
-  if (user) return html`<div class=${klass} data-answer-at=${answerAt} data-copy-source=${source}>${userBodyTemplate(message.content)}</div>`;
-  return html`<div class=${klass} data-answer-at=${answerAt} data-copy-source=${source} .textContent=${String(message?.content ?? "")}></div>`;
+  const title = timeTitle(message?.at);
+  if (rendered) return html`<div class=${klass} title=${title} data-answer-at=${answerAt} data-copy-source=${source} .innerHTML=${message.html}></div>`;
+  if (user) return html`<div class=${klass} title=${title} data-answer-at=${answerAt} data-copy-source=${source}>${userBodyTemplate(message.content)}</div>`;
+  return html`<div class=${klass} title=${title} data-answer-at=${answerAt} data-copy-source=${source} .textContent=${String(message?.content ?? "")}></div>`;
 }
 
 // A context note's bubble (background the user or another session pushed
@@ -267,7 +274,7 @@ export function answerBubbleTemplate(message, { cls = "", at = null } = {}) {
 // text.
 export function noteBubbleTemplate(note) {
   const from = note?.label ? `note from ${note.label}` : "note";
-  return html`<div class="bubble note"><div class="note-line">${from}</div><div class="note-text">${note?.content ?? ""}</div></div>`;
+  return html`<div class="bubble note" title=${timeTitle(note?.at)}><div class="note-line">${from}</div><div class="note-text">${note?.content ?? ""}</div></div>`;
 }
 
 // A plugin's steer (a nudge put into the running turn): one line that
@@ -295,7 +302,7 @@ export function userBubbleTemplate(message, { label = null, state = null, step =
   const from = author
     ? html`<span class="origin-label author-badge" title=${authorBadgeTitle(author.name)} data-unnamed=${author.unnamed ? "1" : nothing}>${authorBadgeText(author.name)}</span>`
     : label ? html`<span class="origin-label">${label}</span>` : nothing;
-  return html`<div class=${`bubble user${named ? ` ${named}` : ""}${author ? " by-participant" : ""}`} style=${author ? `--author-color:${author.color}` : nothing} data-author=${author?.author || nothing} data-user-state=${named || nothing} data-step=${step ? Number(step) : nothing} data-copy-source=${copySource({ ...message, role: "user" })} data-user-content=${key !== null ? key : nothing} data-own=${own ? "1" : nothing} data-enqueued-id=${enqueuedId || nothing} data-delivery=${delivery || nothing}>${from}<div class="user-message">${userBodyTemplate(message?.content)}${thumbs}</div>${stateBadgeTemplate(named, delivery)}</div>`;
+  return html`<div class=${`bubble user${named ? ` ${named}` : ""}${author ? " by-participant" : ""}`} title=${timeTitle(message?.at)} style=${author ? `--author-color:${author.color}` : nothing} data-author=${author?.author || nothing} data-user-state=${named || nothing} data-step=${step ? Number(step) : nothing} data-copy-source=${copySource({ ...message, role: "user" })} data-user-content=${key !== null ? key : nothing} data-own=${own ? "1" : nothing} data-enqueued-id=${enqueuedId || nothing} data-delivery=${delivery || nothing}>${from}<div class="user-message">${userBodyTemplate(message?.content)}${thumbs}</div>${stateBadgeTemplate(named, delivery)}</div>`;
 }
 
 // The notice of a turn that ended with no answer (the server's

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

@@ -42,6 +42,7 @@ import { createHold } from "./hold.js";
 import { linkedLine } from "./notice_links.js";
 import { taskCommand, taskStopButton } from "./task_stop.js";
 import { footprintTemplate, groupItems, stampHistory } from "./working_set_view.js";
+import { groupGaps, timeGapTemplate } from "./time_gaps.js";
 
 // ---- The templates: one step, its thinking, its label ----
 
@@ -847,7 +848,7 @@ function failedLineTemplate(record) {
 // web.working_set, never the turn view's): each block stamped with its
 // turn's ordinal and its rows with theirs (working_set_view.js), and the
 // turn's footprint line after it.
-export function turnHistoryNodes(items, timing, { thumbs, workingSet = false }) {
+export function turnHistoryNodes(items, timing, { thumbs, workingSet = false, now = Date.now() }) {
   const timingTemplate = (group) => {
     const record = group.record;
     // Numbered by its place in the turn records, as live (a failed turn
@@ -868,7 +869,7 @@ export function turnHistoryNodes(items, timing, { thumbs, workingSet = false })
   // as its command bubble, as live does — not as a user bubble.
   const userTemplate = (m, opts = {}) => {
     const shell = shellCommandMessage(m?.content);
-    if (shell) return commandBubbleTemplate(shell);
+    if (shell) return commandBubbleTemplate({ ...shell, at: m?.at });
     return userBubbleTemplate(m, { label: sourceLabel(m?.source), thumbs: thumbs(m.images), author: authorBadge(m?.author, m?.author_name), ...opts });
   };
   // The first text after a delegate report merged mid-turn, unless it is
@@ -886,7 +887,11 @@ export function turnHistoryNodes(items, timing, { thumbs, workingSet = false })
   const outlines = [];
   const blockTurns = [];
   let turnOrdinal = -1;
-  for (const group of turnGroups(items, timing)) {
+  const groups = turnGroups(items, timing);
+  // A quiet stretch before a group: its divider first (time_gaps.js).
+  const gaps = groupGaps(groups, items, now);
+  for (const [k, group] of groups.entries()) {
+    if (gaps[k]) parts.push(timeGapTemplate(gaps[k]));
     if (group.kind === "note") { parts.push(noteBubbleTemplate(items[group.i])); continue; }
     if (group.kind === "steer") { parts.push(steerTemplate(group.i, true)); continue; }
     if (group.kind === "answer") { parts.push(answerTemplate(group.answer, nothing)); continue; }

data/lib/samagotchi/web/running.rb

@@ -4,18 +4,23 @@ require "json"
 require "fileutils"
 require_relative "../atomic_file"
 require_relative "../session"
+require_relative "info_probe"
+require_relative "public_url"
 
 module Samagotchi
   module Web
     # Where this machine's chi web listens: $XDG_STATE_HOME/samagotchi/web.json
-    # ({pid, port}), written once its port is bound and removed when it
+    # ({pid, port}, and public_url when it runs with one: config's or
+    # --tunnel's), written once its port is bound and removed when it
     # stops (by that process only). A command that names chi web in what it
     # prints (chi share's link) reads the port here before config's
     # web.port, which a chi web started with --port or another config
     # doesn't follow. The file is a hint: a chi web killed hard leaves it,
-    # so a reader probes the port (InfoProbe) before trusting it.
+    # so a reader probes the port (InfoProbe) before trusting it. One slot:
+    # a second chi web on another port takes it over.
     module Running
       FILE = "web.json"
+      PROBE_TIMEOUT = 1.0
 
       module_function
 
@@ -24,9 +29,10 @@ module Samagotchi
       end
 
       # @return [String] +path+
-      def record(port:, path: self.path, pid: Process.pid)
+      # @param public_url [String, nil] the https origin it runs behind
+      def record(port:, path: self.path, pid: Process.pid, public_url: nil)
         FileUtils.mkdir_p(File.dirname(path))
-        AtomicFile.write(path, JSON.generate({ pid: pid, port: port }))
+        AtomicFile.write(path, JSON.generate({ pid: pid, port: port, public_url: public_url }.compact))
       end
 
       # Removes the file when this process wrote it (a second chi web's
@@ -41,6 +47,35 @@ module Samagotchi
         value.is_a?(Integer) && value.positive? ? value : nil
       end
 
+      # The public_url the running chi web recorded (a --tunnel's, which no
+      # config has), for a link that names it: only while the chi web that
+      # answers /api/info on the recorded port is the process that wrote the
+      # file (its pid), and only an https origin. A record left by a chi web
+      # killed hard, with a reused pid or another chi web (another state dir)
+      # on that port, is nil. The origin is this file's, never the probe's.
+      # @param probe [#call] (port) → InfoProbe's answer
+      # @return [PublicUrl, nil]
+      def live_public_url(path: self.path, probe: ->(port) { InfoProbe.call("127.0.0.1", port, timeout: PROBE_TIMEOUT) })
+        data = read(path) or return nil
+        pid, port, url = data.values_at("pid", "port", "public_url")
+        return nil unless pid.is_a?(Integer) && pid.positive? && port.is_a?(Integer) && port.positive? && url.is_a?(String)
+        return nil unless alive?(pid)
+
+        info = probe.call(port)
+        return nil unless info.is_a?(Hash) && info["pid"] == pid
+
+        PublicUrl.from_config(url: url)
+      rescue PublicUrl::Invalid
+        nil
+      end
+
+      def alive?(pid)
+        Process.kill(0, pid)
+        true
+      rescue Errno::ESRCH, Errno::EPERM
+        false
+      end
+
       def read(path)
         data = JSON.parse(File.read(path))
         data.is_a?(Hash) ? data : nil