samagotchi 0.67.0 → 0.68.0

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(); } };
 }

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

@@ -83,6 +83,40 @@ export function stripCountText(shown, total) {
     : `${total - shown} archived`;
 }
 
+// How long a new card fades in and a status dot's pulse period: index.html's
+// `.card.entering` fadeIn (.28s) and `.card .dot` dot-pulse / attn-pulse (1.6s).
+export const CARD_FADE_MS = 280;
+export const DOT_PULSE_MS = 1600;
+
+// Which of a list's cards fade in. Every draw makes new nodes (draw), and a
+// new node starts its CSS animation again: so only a card the list did not
+// draw last time (+prev+: id → when it was first drawn, from performance.now();
+// none for a list not drawn yet, or emptied: every card is new) gets
+// `entering`, and one drawn again during its own fade keeps it, carried on
+// from where it was (+entering+: id → ms since its first draw, the negative
+// animation-delay) instead of starting over or snapping to full.
+// +ids+: the cards drawn now. +drawn+ is the next draw's +prev+ (only +ids+).
+export function enteringCards(prev, ids, now, fadeMs = CARD_FADE_MS) {
+  const drawn = new Map();
+  const entering = new Map();
+  for (const id of ids) {
+    const at = prev?.get(id) ?? now;
+    drawn.set(id, at);
+    if (now - at < fadeMs) entering.set(id, Math.max(0, now - at));
+  }
+  return { drawn, entering };
+}
+
+// A card's inline animation phases: its fade's delay (+enterMs+ into it) and
+// the status dots' pulse, phase-locked to the clock (+now+, performance.now())
+// so a redrawn dot carries on pulsing where the last one was. "" for neither.
+export function cardAnimStyle({ enterMs = null, now = null } = {}, period = DOT_PULSE_MS) {
+  const parts = [];
+  if (enterMs) parts.push(`--enter-delay:-${Math.round(enterMs)}ms`);
+  if (now !== null) parts.push(`--pulse-delay:-${Math.round(now % period)}ms`);
+  return parts.join(";");
+}
+
 // A card: the first message as its title, then status, how long ago, owner
 // and memories. The id is in the tooltip (and the search) only. A session
 // that waits on the user (a question, an approval, a card with actions)
@@ -95,11 +129,13 @@ export function stripCountText(shown, total) {
 // member does; with rows (all sessions) an open family lists its members
 // inline, the strip's opens in a popover; matchIds: a search's matching
 // members. A family in a session chain (chains.js foldChains) carries its
-// `day N` chip, which opens the other links in a popover.
+// `day N` chip, which opens the other links in a popover. entering: a card
+// new to its list (enteringCards: it fades in); anim: its inline animation
+// phases (cardAnimStyle).
 // +ctx+: title (cardTitle), projectName (the page's scope), activeId (the
 // open session), chainOpen (its chain's popover is open), parent (the
 // delegating session, or null).
-export function cardTemplate(s, { deletable = false, archivable = false, selectable = false, picked = false, skipReason = null, family = null, open = false, rows = false, matchIds = null } = {}, { title = "", projectName = null, activeId = null, chainOpen = false, parent = null } = {}) {
+export function cardTemplate(s, { deletable = false, archivable = false, selectable = false, picked = false, skipReason = null, family = null, open = false, rows = false, matchIds = null, entering = false, anim = "" } = {}, { title = "", projectName = null, activeId = null, chainOpen = false, parent = null } = {}) {
   const fam = family && family.members.length ? family : null;
   const ts = s.updated_at || s.created_at || "";
   const tip = `${s.id} · updated ${ts} · ${s.status}`;
@@ -128,9 +164,9 @@ export function cardTemplate(s, { deletable = false, archivable = false, selecta
   // Its delegates and its chain's other links: the card is .contains-active while one is open.
   const memberIds = [...(fam ? fam.members.map((m) => m.session.id) : []),
     ...(family?.chain ? family.chain.links.map((x) => x.id).filter((id) => id !== s.id) : [])];
-  const cls = `card${s.archived ? " archived" : ""}${waiting || familyWaiting ? " waiting" : ""}${selectable && picked ? " picked" : ""}${fam && rows && open ? " family-open" : ""}`;
+  const cls = `card${s.archived ? " archived" : ""}${waiting || familyWaiting ? " waiting" : ""}${selectable && picked ? " picked" : ""}${fam && rows && open ? " family-open" : ""}${entering ? " entering" : ""}`;
   const recap = s.recap ? html`<div class="recap" title=${s.recap}>${s.recap}</div>` : nothing;
-  return html`<div class=${cls} data-id=${s.id} data-members=${memberIds.length ? memberIds.join(" ") : nothing} title=${`${tip}${memTitle ? ` · ${memTitle}` : ""}`}><div class="preview">${title}</div>${recap}<div class="meta"><span class=${`status dot ${s.status}${waiting ? " waiting" : ""}`} title=${dotWord} aria-label=${dotWord}></span>${waitingT}${stoppedT}${time}${ctxT}${folderT}${parentChipTemplate(s, parent)}${chain}${kids}${ownerBadgeTemplate(s)}${archived}</div>${famRows}${skip}${pick}${selectable ? nothing : cardToolsTemplate(s, { deletable, archivable })}</div>`;
+  return html`<div class=${cls} data-id=${s.id} data-members=${memberIds.length ? memberIds.join(" ") : nothing} style=${anim || nothing} title=${`${tip}${memTitle ? ` · ${memTitle}` : ""}`}><div class="preview">${title}</div>${recap}<div class="meta"><span class=${`status dot ${s.status}${waiting ? " waiting" : ""}`} title=${dotWord} aria-label=${dotWord}></span>${waitingT}${stoppedT}${time}${ctxT}${folderT}${parentChipTemplate(s, parent)}${chain}${kids}${ownerBadgeTemplate(s)}${archived}</div>${famRows}${skip}${pick}${selectable ? nothing : cardToolsTemplate(s, { deletable, archivable })}</div>`;
 }
 
 function cardToolsTemplate(s, { deletable, archivable }) {
@@ -157,8 +193,10 @@ function ownerBadgeTemplate(s) {
 }
 
 // The strip's end: the All sessions tile (with its count) and hide ▴.
-export function stripTileTemplate(count) {
-  return html`<div class="strip-side"><button type="button" class="card" id="allTile" title="All sessions, with search">All sessions →<span class="count">${count}</span></button><button type="button" class="strip-toggle" id="stripHide" title="Hide the latest sessions">hide ▴</button></div>`;
+// entering / anim: as a card's (cardTemplate). id and title are bound, as
+// class is, so the attributes keep their order.
+export function stripTileTemplate(count, { entering = false, anim = "" } = {}) {
+  return html`<div class="strip-side"><button type="button" class=${entering ? "card entering" : "card"} id=${"allTile"} style=${anim || nothing} title=${"All sessions, with search"}>All sessions →<span class="count">${count}</span></button><button type="button" class="strip-toggle" id="stripHide" title="Hide the latest sessions">hide ▴</button></div>`;
 }
 
 // The hidden strip's pill: "▾ 5 sessions · ● 1 live · ● 1 waiting"
@@ -261,6 +299,18 @@ export function createListsView(deps) {
     return ordered;
   }
 
+  // The cards each list actually drew (the strip's after its cut to what
+  // fits; not drawnOrder, which select mode reads), id → when first drawn:
+  // a card not in it fades in (enteringCards). A list drawn empty forgets.
+  const lastDrawn = new Map(); // list element → Map(id → performance.now() at its first draw)
+  const STRIP_TILE = "#allTile"; // the All sessions tile's id there (no session id starts with #)
+  function enteringFor(el, ids) {
+    const now = win.performance?.now() ?? Date.now();
+    const { drawn, entering } = enteringCards(lastDrawn.get(el), ids, now);
+    lastDrawn.set(el, drawn);
+    return (id) => ({ entering: entering.has(id), anim: cardAnimStyle({ enterMs: entering.get(id), now }) });
+  }
+
   // The strip's cards: stripOrder, held under the pointer, as many as fit.
   function stripCards() {
     return listOrder(topStripEl, stripOrder(shownSessions(), sessions()), familyId).slice(0, stripCols);
@@ -425,6 +475,7 @@ export function createListsView(deps) {
     const refused = scopeError();
     if (refused) {
       draw(topStripEl, html`<div class="hint scope-error">${refused} · <a href=${allScopeHref("", null, win.location.search)}>show every session</a></div>`);
+      lastDrawn.delete(topStripEl);
       familyPop.close();
       chainPop.close();
       return;
@@ -433,12 +484,14 @@ export function createListsView(deps) {
     // Only archived sessions: no cards, but the tile stays, the way to them.
     if (!all.length) {
       topStripEl.replaceChildren();
+      lastDrawn.delete(topStripEl);
       familyPop.close();
       chainPop.close();
       return;
     }
-    const tile = stripTileTemplate(stripCountText(shownSessions().length, all.length));
-    draw(topStripEl, html`${cards.map((f) => cardFor(f.head, { family: f, open: familyPop.openHead() === f.head.id }))}${tile}`);
+    const anim = enteringFor(topStripEl, [...cards.map(familyId), STRIP_TILE]);
+    const tile = stripTileTemplate(stripCountText(shownSessions().length, all.length), anim(STRIP_TILE));
+    draw(topStripEl, html`${cards.map((f) => cardFor(f.head, { family: f, open: familyPop.openHead() === f.head.id, ...anim(familyId(f)) }))}${tile}`);
     bindCards(topStripEl, select, {
       onFamily: (id, _chip, e) => {
         familyPop.toggle(id);
@@ -490,6 +543,7 @@ export function createListsView(deps) {
     updateSelectBar();
     if (!fams.length) {
       drawnOpen.clear();
+      lastDrawn.delete(allListEl);
       draw(allListEl, html`<div class="hint">${listed.length ? "No session matches." : "No sessions yet."}</div>`);
       if (chainFrom === allListEl) chainPop.refresh();
       return;
@@ -501,11 +555,12 @@ export function createListsView(deps) {
       ? { selectable: true, picked: selecting.picked.has(s.id), skipReason: selecting.skipReasons.get(s.id) }
       : { deletable: true, archivable: true });
     drawnOpen.clear();
+    const anim = enteringFor(allListEl, fams.map(familyId));
     draw(allListEl, html`${fams.map((f) => {
       const matched = !!f.matchIds?.size;
       const open = familyOpen(f, matched ? searchToggles : familyToggles, { matched });
       drawnOpen.set(f.head.id, open);
-      return cardFor(f.head, { ...opts(f.head), family: f, open, rows: true, matchIds: q ? f.matchIds : null });
+      return cardFor(f.head, { ...opts(f.head), family: f, open, rows: true, matchIds: q ? f.matchIds : null, ...anim(familyId(f)) });
     })}`);
     bindCards(allListEl, (id, e) => {
       if (selecting.on) {