samagotchi 0.66.0 → 0.68.0

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

@@ -99,7 +99,7 @@ function makeButton(doc, kind) {
 
 // Buttons on every bubble and code block in +root+ (and on +root+ itself)
 // that has none yet.
-export function decorate(root) {
+function decorate(root) {
   const doc = root.ownerDocument;
   const bubbles = [...root.querySelectorAll(BUBBLES)];
   if (root.matches(BUBBLES)) bubbles.push(root);

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

@@ -13,7 +13,7 @@ function num(v) {
 
 // What a fill counts against: the window, or the budget when one is set
 // and smaller; null without a window.
-export function countedTokens(windowTokens, budgetTokens = null) {
+function countedTokens(windowTokens, budgetTokens = null) {
   const window = num(windowTokens);
   if (!window || window <= 0) return null;
   const budget = num(budgetTokens);

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

@@ -21,8 +21,8 @@ import { html, nothing, render } from "./vendor/lit-html.js";
 export const QUEUE_LABEL = "queue for after the turn";
 export const CUT_LABEL = "cut in now";
 // A phone's row (≤ 600 px) is short: its text and chips.
-export const QUEUE_SHORT = "queue";
-export const CUT_SHORT = "cut in";
+const QUEUE_SHORT = "queue";
+const CUT_SHORT = "cut in";
 // Alt+Enter to a worker without the delivery feature: not sent (a queue
 // would steer it), the text kept, this said.
 export const QUEUE_NEEDS_WORKER = "Not sent: queueing needs a newer worker (it would steer the running turn). "
@@ -144,7 +144,7 @@ export function deliveryLineTemplate(line, { onCut, onQueue } = {}) {
 }
 
 // The idle row: the key hint (none on a phone: no keyboard keys there).
-export function idleTemplate() {
+function idleTemplate() {
   return html`<span class="delivery-where idle"><span class="long">${IDLE_HINT}</span><span class="short"></span></span>`;
 }
 
@@ -155,7 +155,7 @@ export function idleTemplate() {
 //                    phase, gen, tool, cutAfter, serverGen, canQueue, model)
 //   composerEmpty()  nothing typed and no image chips: a link arms
 //   send(delivery)   send the composer's line with +delivery+ ("cut", "queue")
-export const TICK_MS = 500;
+const TICK_MS = 500;
 
 export function createDeliveryControl({ el, read, composerEmpty, send, now = () => Date.now(),
   setTimer = (fn, ms) => setInterval(fn, ms), clearTimer = (t) => clearInterval(t) }) {

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

@@ -71,7 +71,7 @@ export function familyRowsTemplate(f, { activeId = null, matchIds = null, archiv
 }
 
 // The widest window index.html lays out as a phone (@media (max-width:600px)).
-export const PHONE_MAX_PX = 600;
+const PHONE_MAX_PX = 600;
 
 // The strip's family popover: one #familyPop in body (position: fixed, so
 // the strip's sideways scroll on a phone doesn't clip it), under the chip

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

@@ -1,7 +1,7 @@
 import { waitingOn } from "./notify.js";
 
 export const PREVIEW_CHARS = 40;
-export const FIRST_PREVIEW_CHARS = 80;
+const FIRST_PREVIEW_CHARS = 80;
 
 export function escapeHtml(value) {
   return String(value).replace(
@@ -37,20 +37,24 @@ export function normalize(s) {
   return String(s || "").replace(/\s+/g, " ").trim();
 }
 
+// +text+ in at most +n+ characters: whole when it fits, else cut with "…"
+// as its last (the kept part's trailing spaces dropped).
+export function clip(text, n) {
+  const s = String(text ?? "");
+  return s.length > n ? `${s.slice(0, n - 1).trimEnd()}\u2026` : s;
+}
+
 export function previewOf(lastPrompt) {
   const normalized = normalize(lastPrompt);
   if (!normalized) return "\u2014";
-  if (normalized.length > PREVIEW_CHARS) {
-    return `${normalized.slice(0, PREVIEW_CHARS)}\u2026`;
-  }
-  return normalized;
+  return clip(normalized, PREVIEW_CHARS + 1);
 }
 
 // A session's first message as the info bar's title: whitespace collapsed,
 // cut at FIRST_PREVIEW_CHARS with an ellipsis ("" for none).
 export function firstPreview(text) {
   const n = normalize(text);
-  return n.length > FIRST_PREVIEW_CHARS ? `${n.slice(0, FIRST_PREVIEW_CHARS)}\u2026` : n;
+  return clip(n, FIRST_PREVIEW_CHARS + 1);
 }
 
 export function previewForCard(session) {
@@ -66,7 +70,7 @@ const DELETE_PREVIEW_CHARS = 40;
 // "stopped if it's still running", never promised.
 export function deleteConfirmText(session) {
   const n = normalize(session.first_preview || session.last_prompt || "");
-  const preview = n.length > DELETE_PREVIEW_CHARS ? `${n.slice(0, DELETE_PREVIEW_CHARS)}\u2026` : n;
+  const preview = clip(n, DELETE_PREVIEW_CHARS + 1);
   const shortId = session.short_id || String(session.id).slice(0, 8);
   const lines = [
     `Delete session ${shortId}${preview ? ` \u2014 "${preview}"` : ""}?`,

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

@@ -67,7 +67,30 @@ export function turnRefs(chips) {
 }
 
 // Chips again for a prompt the worker handed back (its images are stored
-// already, so they need no upload).
+// already, so they need no upload: to that session).
 export function restoredChips(sessionId, images) {
-  return (images || []).filter((i) => i && i.file).map((ref) => ({ name: ref.name || "image", ref, src: imageUrl(sessionId, ref) }));
+  return (images || []).filter((i) => i && i.file)
+    .map((ref) => ({ name: ref.name || "image", ref, session: sessionId, src: imageUrl(sessionId, ref) }));
+}
+
+// A restored chip has no file of its own: its image, read back from where
+// its session stores it.
+async function fetchChipFile(src, name) {
+  const res = await fetch(src);
+  if (!res.ok) throw new Error(`Can't read ${name} again (${res.status})`);
+  const blob = await res.blob();
+  return new File([blob], name, { type: blob.type });
+}
+
+// Uploads the chips a turn to +sessionId+ needs: a ref is into one session's
+// image store (chip.session), so a chip uploaded to another one (a failed
+// send there, then a switch) goes up again, to this one. Sets each chip's
+// ref and session in place: a failed send keeps them for another try.
+export async function uploadChips(chips, sessionId, { upload, fetchFile = fetchChipFile }) {
+  for (const chip of chips || []) {
+    if (chip.ref && chip.session === sessionId) continue;
+    const file = chip.file || await fetchFile(chip.src, chip.name);
+    chip.ref = await upload(sessionId, file, chip.name);
+    chip.session = sessionId;
+  }
 }

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

@@ -42,7 +42,7 @@ button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline
 button.ghost{background:var(--bg-raised);color:var(--text-2)}
 button:disabled{opacity:.5;cursor:not-allowed}
 main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:auto;background:transparent;min-height:0}
-#topStrip{display:grid;grid-template-columns:repeat(var(--strip-cols,3),minmax(0,440px)) 150px;gap:12px;min-height:88px;align-content:start;transition:opacity 280ms ease, transform 280ms ease}
+#topStrip{display:grid;grid-template-columns:repeat(var(--strip-cols,3),minmax(0,440px)) 150px;gap:12px;min-height:88px;align-content:start}
 #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}
@@ -578,8 +578,7 @@ body.has-session #composer{flex-direction:row;align-items:flex-end;padding:10px}
 body.has-session #composer textarea{min-height:0}
 body.has-session #composeHint{display:none}
 body.has-session #composer .actions-col{flex-wrap:nowrap;flex-shrink:0}
-/* The model picker (start page only): reads as a label, "host:model ▾", left of Start; a native select under a drawn caret. */
-/* A select is as wide as its widest option: a hidden copy of the chosen name (data-value) sizes the box to that name instead, and the select fills it. */
+/* The model picker (start page only): reads as a label, "host:model ▾", left of Start; a button under a drawn caret that opens a searchable list (model_picker.js). Its name ellipsizes within max-width. */
 #composer .actions-col .model-pick{order:0;position:relative;display:inline-block;max-width:min(50%,380px);height:28px;min-height:28px;padding:0 22px 0 8px;border-radius:8px;overflow:hidden;background:transparent;color:var(--text-muted);font-size:12px;line-height:28px;text-align:left;text-overflow:ellipsis;transition:background .12s ease,color .12s ease}
 #composer .actions-col .model-pick:hover,#composer .actions-col .model-pick[aria-expanded="true"]{filter:none;background:color-mix(in srgb,var(--bg-hover) 75%,transparent);color:var(--text-2)}
 #composer .actions-col .model-pick[hidden],body.has-session #composer .actions-col .model-pick{display:none}
@@ -827,6 +826,12 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
 .llmctx-field>span{flex:0 0 58px;font-size:12px;color:var(--text-muted)}
 .llmctx-field select,.llmctx-field input{flex:1;min-width:0;box-sizing:border-box;padding:5px 8px;border-radius:7px;border:1px solid var(--border-strong);background:var(--bg-inset);color:var(--text);font:13px/1.4 inherit}
 .llmctx-field select:focus,.llmctx-field input:focus{outline:none;border-color:var(--accent-border)}
+/* The settings selects draw their own closed box (each browser's native one differs) with the model picker's drawn caret on the label; the open list stays the OS menu. */
+.llmctx-field select{appearance:none;-webkit-appearance:none;padding-right:26px;cursor:pointer}
+.llmctx-field select option{background:var(--bg-raised);color:var(--text)}
+.llmctx-field input::placeholder{color:var(--text-faint);opacity:1}
+.llmctx-field:has(select){position:relative}
+.llmctx-field:has(select)::after{content:"";position:absolute;right:11px;top:50%;width:5px;height:5px;border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
 .llmctx-form .llmctx-set{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
 .llmctx-form .llmctx-set:disabled{opacity:.6;cursor:default}
 /* Attached context (context_chips.js): a row of its own under the meta; not the composer's #chips/.chip. */
@@ -1091,7 +1096,10 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card.skeleton .line.tiny{width:30%;height:8px}
 @keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.55}}
 @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
-#topStrip:not(.loading) .card, #allList .card{animation:fadeIn .28s ease}
+/* Only a card new to its list fades in (lists_view.js enteringCards: every draw makes new nodes);
+   --enter-delay carries a fade on across a redraw, --pulse-delay keeps a dot's pulse in phase. */
+#topStrip:not(.loading) .card.entering, #allList .card.entering{animation:fadeIn .28s ease var(--enter-delay,0s)}
+@media (prefers-reduced-motion:reduce){.card.entering{animation:none}}
 .card{padding:12px;border-radius:10px;background:var(--bg-panel);border:1px solid var(--border);cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:72px}
 .card:hover{border-color:var(--border-strong);background:var(--bg-hover)}
 #allList .card{position:relative}
@@ -1116,13 +1124,13 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card .meta{font-size:11px;color:var(--text-muted);display:flex;gap:6px;align-items:center}
 /* A card's status is a dot (its word is the tooltip); the .status.* pills below are the info bar's. */
 .card .dot,.family-row .dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-muted)}
-.card .dot.running,.family-row .dot.running{background:var(--ok);animation:dot-pulse 1.6s ease-in-out infinite}
+.card .dot.running,.family-row .dot.running{background:var(--ok);animation:dot-pulse 1.6s ease-in-out var(--pulse-delay,0s) infinite}
 .card .dot.idle,.family-row .dot.idle{background:var(--text-muted)}
 .card .dot.stopped,.family-row .dot.stopped{background:transparent;border:1px solid var(--text-faint)}
 .card .dot.completed,.family-row .dot.completed{background:var(--accent)}
 .card .dot.error,.family-row .dot.error{background:var(--danger)}
 @keyframes dot-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 0%,transparent)}}
-.card .dot.waiting,.family-row .dot.waiting{background:var(--warn);animation:attn-pulse 1.6s ease-in-out infinite}
+.card .dot.waiting,.family-row .dot.waiting{background:var(--warn);animation:attn-pulse 1.6s ease-in-out var(--pulse-delay,0s) infinite}
 @keyframes attn-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 60%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 0%,transparent)}}
 @media (prefers-reduced-motion:reduce){.card .dot.running,.card .dot.waiting,.family-row .dot.running,.family-row .dot.waiting{animation:none}}
 .card .attn,.family-row .attn{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0;background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border)}
@@ -1176,8 +1184,8 @@ a{color:var(--accent)}
         </div>
         <div class="actions-col">
           <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>
           <button type="button" id="thinkingNew" class="llmctx-new think-new" aria-haspopup="dialog" hidden></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">Stop turn</button>
           <div class="split">

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

@@ -1,8 +1,8 @@
 // The session bar's info line (#infoText): the open session's id, its copy
 // chi --attach button, status, model, chain links, parent and delegates,
-// llm ctx, thinking, reasoning history and tools chips, model notes, memories, folder, ctx, speed,
+// thinking, reasoning history, llm ctx and tools chips, model notes, memories, folder, ctx, speed,
 // session clock and the worker's version badge. A lit-html template over a
-// plain model app.js builds (updateInfoBar), so the markup lives here and
+// plain model (info_bar_model.js, applied by app.js's updateInfoBar), so the markup lives here and
 // runs under node --test (spec/web/public/info_bar.test.js).
 //
 // It is redrawn every second while a turn runs (the session clock): lit
@@ -72,7 +72,7 @@ export function infoBarHtml(bar) {
   if (!bar) return nothing;
   const attach = `chi --attach ${bar.id}`;
   const memories = bar.memories || [];
-  return html`<div class="meta"><span class="id" title=${bar.id}>${String(bar.id).slice(0, 8)}</span><button type="button" class="copy-attach" title=${`Copy "${attach}" to attach a terminal`}>${bar.copied ? "copied ✓" : "copy chi --attach"}</button><span class=${bar.status ? `status ${bar.status}` : "status"}>${bar.status || ""}</span><span class=${`model${bar.model.mismatch ? " served-mismatch" : ""}`} title=${bar.model.title}>${bar.model.text}</span>${bar.chain?.prev ? chainLinkTemplate(bar.chain.prev, PREV, "The previous link of this chain") : nothing}${bar.chain?.next ? chainLinkTemplate(bar.chain.next, NEXT, "The next link of this chain") : nothing}${bar.parent ? html`<a class="model parent" href=${sessionHash(bar.parent.id)} title=${bar.parent.title}>delegated by ${String(bar.parent.id).slice(0, 8)}</a>` : nothing}${kidsTemplate(bar.kids)}${llmContextChip(bar.llmContext)}${thinkingChip(bar.thinking)}${reasoningHistoryChip(bar.reasoningHistory)}${toolkitChip(bar.toolkit)}${bar.notes ? html`<span class="model notes-chip" title=${bar.notes.title}>${bar.notes.text}</span>` : nothing}${memories.length ? html`<span class="model mem-chip" title=${memChipTitle(memories)}>${memChipText(memories)}</span>` : nothing}<span class="dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span><span class="model ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span>${bar.speed ? html`<span class="model speed" title=${bar.speed.tip}>${bar.speed.text}</span>` : nothing}${bar.clock ? html`<span class="model session-time">${bar.clock}</span>` : nothing}${workerBadgeTemplate(bar.worker)}</div>`;
+  return html`<div class="meta"><span class="id" title=${bar.id}>${String(bar.id).slice(0, 8)}</span><button type="button" class="copy-attach" title=${`Copy "${attach}" to attach a terminal`}>${bar.copied ? "copied ✓" : "copy chi --attach"}</button><span class=${bar.status ? `status ${bar.status}` : "status"}>${bar.status || ""}</span><span class=${`model${bar.model.mismatch ? " served-mismatch" : ""}`} title=${bar.model.title}>${bar.model.text}</span>${bar.chain?.prev ? chainLinkTemplate(bar.chain.prev, PREV, "The previous link of this chain") : nothing}${bar.chain?.next ? chainLinkTemplate(bar.chain.next, NEXT, "The next link of this chain") : nothing}${bar.parent ? html`<a class="model parent" href=${sessionHash(bar.parent.id)} title=${bar.parent.title}>delegated by ${String(bar.parent.id).slice(0, 8)}</a>` : nothing}${kidsTemplate(bar.kids)}${thinkingChip(bar.thinking)}${reasoningHistoryChip(bar.reasoningHistory)}${llmContextChip(bar.llmContext)}${toolkitChip(bar.toolkit)}${bar.notes ? html`<span class="model notes-chip" title=${bar.notes.title}>${bar.notes.text}</span>` : nothing}${memories.length ? html`<span class="model mem-chip" title=${memChipTitle(memories)}>${memChipText(memories)}</span>` : nothing}<span class="dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span><span class="model ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span>${bar.speed ? html`<span class="model speed" title=${bar.speed.tip}>${bar.speed.text}</span>` : nothing}${bar.clock ? html`<span class="model session-time">${bar.clock}</span>` : nothing}${workerBadgeTemplate(bar.worker)}</div>`;
 }
 
 // Draws +bar+ into +el+ (#infoText), with the memories in its tooltip.

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

@@ -0,0 +1,110 @@
+// What the session bar shows for the open session, as plain data: the info
+// line's model (info_bar.js renders it) and its buttons' states (continue,
+// delete, archive, stop), from the page's session state (session_state.js),
+// its list and its in-flight actions. Pure: app.js's updateInfoBar applies
+// it, every second while a turn runs (the session clock).
+import { canStopSession, childrenSummary, delegatedBy, modelLabel, promptNotesChip } from "./format.js";
+import { chainDate, chainNeighbours } from "./chains.js";
+import { ctxBarText, ctxBarTip, lastSpeedText, speedText } from "./ctx.js";
+import { formatDuration, sessionDurationNow } from "./timing.js";
+import { workerBadge } from "./update_notice.js";
+
+// The open session's worker runs an older chi than the newest installed:
+// a badge, with Restart when the worker can (else the stop command).
+// @param id the open session's id (null: none)
+// @param state the open session's fields (session_state.js)
+// @param versions {served, installed}: the chi serving the page, the newest
+export function workerBadgeFor(id, state, versions) {
+  if (!id || state.owner !== "worker") return null;
+  return workerBadge({ workerVersion: state.workerVersion, features: state.workerFeatures,
+                       installed: versions.installed, served: versions.served, sessionId: id });
+}
+
+// A chain's link (chains.js chainNeighbours) as the info bar's ← / →
+// shows it (info_bar.js chainLinkTemplate), or null. +cardTitle+: the
+// lists' title for a session (a chain's opener reads its first link's).
+export function chainLinkView(link, cardTitle) {
+  if (!link) return null;
+  return { id: link.id, date: chainDate(link.session?.created_at), preview: link.session ? cardTitle(link.session) : "",
+           archived: !!link.session?.archived };
+}
+
+// The bar's buttons: continue (not on a link continued already, which has
+// its → link, nor a terminal's session; "continuing…" while one runs),
+// delete, archive (or unarchive), stop (while a worker runs the session).
+export function infoButtons({ id, state, chain, archived, continuing, streaming }) {
+  const busy = !!id && continuing;
+  return {
+    continue: { shown: !!id && !chain.next && state.owner !== "tui", disabled: busy, text: busy ? "continuing…" : "continue →" },
+    delete: { shown: !!id },
+    archive: {
+      shown: !!id,
+      archived,
+      text: archived ? "unarchive" : "archive",
+      title: archived ? "Unarchive: back to the lists" : "Archive: hide from the lists, keep for good",
+    },
+    stop: { shown: !!id && canStopSession({ owner: state.owner, streaming }) },
+  };
+}
+
+// The info line's model (info_bar.js renderInfoBar's +bar+).
+// @param id the open session's id
+// @param state the open session's fields (session_state.js)
+// @param sessions the page's list (allSessions: archived ones too)
+// @param chain chainNeighbours' {prev, next} for +id+
+// @param cardTitle (session) => the lists' title for it
+// @param badge workerBadgeFor's, or null
+// @param restarting whether this session's Restart is under way
+// @param running whether its turn runs (the session clock ticks)
+// @param now the clock (ms)
+export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting, running, now }) {
+  const tokens = state.timing.tokens;
+  const ctxTip = ctxBarTip(tokens, state.timing.memoryIndex,
+                           { tokens: state.ctxWindow, source: state.ctxWindowSource, pct: state.ctxPct,
+                             budget: state.llmContext?.budget_tokens });
+  const speedTextNow = lastSpeedText(tokens);
+  const avgSpeed = speedText(tokens?.avg_decode_tps, tokens?.tps_source);
+  const sessionDuration = sessionDurationNow(state.timing, running);
+  // A delegated session names its parent, as a link to it.
+  const parentChip = delegatedBy(state.parentId, sessions.find((x) => x.id === state.parentId) || null);
+  return {
+    id,
+    copied: now - state.attachCopiedAt < 2000,
+    status: state.status,
+    model: modelLabel(state.model, ...(state.served || [])),
+    // A link of a session chain: ← the previous link, → the next one (each
+    // only while the list holds it).
+    chain: { prev: chainLinkView(chain.prev, cardTitle), next: chainLinkView(chain.next, cardTitle) },
+    parent: parentChip ? { id: state.parentId, title: parentChip.title } : null,
+    // A parent names its delegates; the link opens all sessions.
+    kids: childrenSummary({ id }, sessions),
+    llmContext: state.llmContext,
+    thinking: state.thinking,
+    reasoningHistory: state.reasoningHistory,
+    // The tools chip (toolkit_chip.js): null on full.
+    toolkit: state.toolkit,
+    // The model notes the session's prompt carried.
+    notes: promptNotesChip(state.promptNotes),
+    memories: state.usedMemories,
+    preloaded: state.preloadedMemories,
+    muted: state.mutedMemories,
+    dir: state.dir,
+    ctx: { text: ctxBarText(state.ctxPct, state.ctxWindowSource), tip: ctxTip },
+    speed: speedTextNow ? { text: speedTextNow, tip: `Decode speed of the last generation${avgSpeed ? `; session average ${avgSpeed}` : ""}` } : null,
+    clock: sessionDuration === null ? "" : `session ${formatDuration(sessionDuration)}`,
+    worker: badge ? { badge, busy: restarting } : null,
+  };
+}
+
+// The whole bar for the open session +id+ (null: the start page, no line).
+// @param sessions the page's list; +continuing+, +restarting+: Sets of ids
+// @return {buttons, bar}
+export function sessionBar({ id, state, sessions, versions, cardTitle, continuing, restarting, streaming, running, now }) {
+  const chain = id ? chainNeighbours(sessions, id, { continues: state.continues }) : { prev: null, next: null };
+  const archived = !!sessions.find((s) => s.id === id)?.archived;
+  const buttons = infoButtons({ id, state, chain, archived, continuing: continuing.has(id), streaming });
+  if (!id) return { buttons, bar: null };
+  const badge = workerBadgeFor(id, state, versions);
+  const bar = infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting: restarting.has(id), running, now });
+  return { buttons, bar };
+}

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

@@ -2,9 +2,10 @@
 // download) as a small row above the composer: a spinner line per running
 // task ("mcp · Starting MCP server chrome (first run, saving its tools)…"),
 // a "✓ chrome ready, 3 tools" line when one is done, which fades. A failed
-// one leaves the row: its warn card says why. No DOM here, so node --test
-// covers it; app.js draws the row.
-import { escapeHtml as esc } from "./format.js";
+// one leaves the row: its warn card says why. The row is a lit-html
+// template (initRowTemplate); app.js renders it into #initRow.
+import { repeat } from "./vendor/directives/repeat.js";
+import { html } from "./vendor/lit-html.js";
 
 // How long a done line stays before it fades out.
 export const DONE_MS = 2500;
@@ -42,19 +43,29 @@ export function applyInitEvent(tasks, type, data) {
   return data.id;
 }
 
+// A done line's fade starts (DONE_MS after it was done): the line draws
+// faded until dropDone takes it.
+export function fadeDone(tasks, id) {
+  const task = tasks.get(id);
+  if (task?.status === "done") task.fading = true;
+  return tasks;
+}
+
 // Drop a done line (its fade ended); a task started again under the id stays.
 export function dropDone(tasks, id) {
   if (tasks.get(id)?.status === "done") tasks.delete(id);
   return tasks;
 }
 
-// @returns the row's inner HTML ("" with nothing to show)
-export function initRowHtml(tasks) {
-  return [...tasks.entries()].map(([id, t]) => {
-    const bundle = `<span class="init-bundle">${esc(t.bundle)}</span>`;
+// @returns the row's lines (a lit-html template; none with nothing to show),
+// keyed by the task's id: a line keeps its node while the lines around it
+// come and go (a faded line's node is never reused for the next one).
+export function initRowTemplate(tasks) {
+  return repeat(tasks.entries(), ([id]) => id, ([id, t]) => {
+    const bundle = html`<span class="init-bundle">${t.bundle}</span>`;
     if (t.status === "done") {
-      return `<div class="init-task done" data-id="${esc(id)}"><span class="init-mark" aria-hidden="true">✓</span>${bundle}<span class="init-text">${esc(t.summary || `${t.label}: done`)}</span></div>`;
+      return html`<div class=${`init-task done${t.fading ? " fading" : ""}`} data-id=${id}><span class="init-mark" aria-hidden="true">✓</span>${bundle}<span class="init-text">${t.summary || `${t.label}: done`}</span></div>`;
     }
-    return `<div class="init-task running" data-id="${esc(id)}"><span class="init-spin" aria-hidden="true"></span>${bundle}<span class="init-text">${esc(t.label)}…</span></div>`;
-  }).join("");
+    return html`<div class="init-task running" data-id=${id}><span class="init-spin" aria-hidden="true"></span>${bundle}<span class="init-text">${t.label}…</span></div>`;
+  });
 }

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

@@ -23,8 +23,9 @@
 // (thinking_chip.js keeps its choice): the form shows the model's level and
 // takes a choice for the next create.
 
-import { NEW_CHAT, SESSION, popoverPlace } from "./llm_context_chip.js";
-import { html, nothing, render } from "./vendor/lit-html.js";
+import { createChipPopover } from "./chip_popover.js";
+import { NEW_CHAT, SESSION } from "./llm_context_chip.js";
+import { html, render } from "./vendor/lit-html.js";
 
 export const DEFAULT = "default";
 
@@ -74,101 +75,49 @@ export function formTemplate(cfg, summary, { running = false, kind = SESSION, ch
     ><div class="ctx-pop-actions"><button type="submit" class="llmctx-set">Set</button></div></form>`;
 }
 
-// The chip's popover, as createLlmContextControl's: el is where the chip
-// is drawn (clicks are delegated: #infoText, info_bar.js);
-// summary(): the open session's summary; session(): its id; running(): a
-// turn runs; run(line): sends the command. The start page's (kind
-// NEW_CHAT): summary() is the picked model's, choice() the pending level
-// and choose(next) takes a Set's (null for "follow the model"). id and
-// anchor (the chip's selector, by default its data attribute) keep it
+// The chip's popover (chip_popover.js' shell), as createLlmContextControl's:
+// el is where the chip is drawn (clicks are delegated: #infoText,
+// info_bar.js); summary(): the open session's summary; session(): its id;
+// running(): a turn runs; run(line): sends the command. The start page's
+// (kind NEW_CHAT): summary() is the picked model's, choice() the pending
+// level and choose(next) takes a Set's (null for "follow the model"). id
+// and anchor (the chip's selector, by default its data attribute) keep it
 // apart from the other controls on the same element (the anchor defaults
 // to the config's).
 export function createLevelControl({ cfg, el, summary, session = () => null, running = () => false, run,
                                      kind = SESSION, choice = () => null, choose = null,
-                                     id, anchor: anchorSel = cfg.anchor,
+                                     id, anchor = cfg.anchor,
                                      doc = document, win = window }) {
   const fresh = kind === NEW_CHAT;
-  const pop = doc.createElement("div");
-  pop.id = id;
-  pop.className = `ctx-popover ${cfg.popoverClass}`;
-  pop.setAttribute("role", "dialog");
-  pop.hidden = true;
-  doc.body.appendChild(pop);
   let initial = null;
-  let openFor = null;
   // What the open form was drawn from: the model's or session's summary
-  // and the form's options. A closed popover is empty, so each open draws
-  // a fresh form (an unsent pick is gone).
+  // and the form's options.
   let shown = null;
-  const draw = (now) => render(formTemplate(cfg, shown.data, { ...shown.opts, now }), pop);
+  const draw = (now) => render(formTemplate(cfg, shown.data, { ...shown.opts, now }), shell.pop);
 
-  function place(anchor) {
-    const width = Math.min(320, win.innerWidth - 32);
-    pop.style.width = `${width}px`;
-    pop.style.maxHeight = "";
-    const at = popoverPlace(anchor.getBoundingClientRect(), { width, height: pop.offsetHeight,
-                                                              innerWidth: win.innerWidth, innerHeight: win.innerHeight });
-    pop.style.left = `${at.left}px`;
-    pop.style.top = at.top === undefined ? "" : `${at.top}px`;
-    pop.style.bottom = at.bottom === undefined ? "" : `${at.bottom}px`;
-    if (at.maxHeight !== undefined) pop.style.maxHeight = `${at.maxHeight}px`;
-  }
-
-  function open(anchor) {
-    const data = summary();
-    if (!data) return;
-    initial = (fresh ? choice() : data.own) || DEFAULT;
-    openFor = session();
-    shown = { data, opts: { running: running(), kind, choice: choice() } };
-    draw(data);
-    pop.hidden = false;
-    place(anchor);
-  }
-
-  function close() {
-    pop.hidden = true;
-    initial = null;
-    openFor = null;
-    shown = null;
-    render(nothing, pop);
-  }
-
-  function isOpen() { return !pop.hidden; }
-
-  // A new summary: an open form keeps the user's pick; only "Now:" follows
-  // (the same template again: lit writes that line alone).
-  function refresh() {
-    if (!isOpen()) return;
-    const data = summary();
-    if (!data || session() !== openFor) return close();
+  // A refresh (a newer summary): an open form keeps the user's pick; only
+  // "Now:" follows (the same template again: lit writes that line alone).
+  function show(data, opening) {
+    if (opening) {
+      initial = (fresh ? choice() : data.own) || DEFAULT;
+      shown = { data, opts: { running: running(), kind, choice: choice() } };
+    }
     draw(data);
   }
 
-  el.addEventListener("click", (e) => {
-    const anchor = e.target.closest(anchorSel);
-    if (!anchor) return;
-    e.stopPropagation();
-    if (isOpen()) close();
-    else open(anchor);
-  });
-  pop.addEventListener("submit", (e) => {
-    e.preventDefault();
-    const level = e.target.elements.level.value;
+  function submit(form) {
+    const level = form.elements.level.value;
     const was = initial;
-    close();
+    shell.close();
     if (fresh) return choose(level === DEFAULT ? null : level);
     const line = commandLine(cfg, level, was);
     if (line) run(line);
-  });
-  pop.addEventListener("click", (e) => {
-    if (e.target.closest("[data-act]")?.dataset.act === "close") close();
-  });
-  doc.addEventListener("click", (e) => {
-    if (isOpen() && !pop.contains(e.target) && !e.target.closest?.(anchorSel)) close();
-  });
-  doc.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && isOpen()) close();
+  }
+
+  const shell = createChipPopover({
+    id, className: `ctx-popover ${cfg.popoverClass}`, width: 320, el, anchor, summary, session, show,
+    onClose: () => { initial = null; shown = null; }, onSubmit: submit, doc, win,
   });
 
-  return { close, refresh, get open() { return isOpen(); } };
+  return { close: shell.close, refresh: shell.refresh, get open() { return shell.isOpen(); } };
 }