samagotchi 0.8.1 → 0.10.0

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

@@ -1,11 +1,12 @@
 // Pure routing for one :generation_chunk event into the two render lanes.
 //
-// Phase 2 (web-stream-rendering): the server enriches each :generation_chunk with
-// additive `text` (visible prose, thinking + tool_call blocks removed) and
-// `thinking` (thinking-only) fields, leaving raw `content` untouched. When those
-// fields are present we use them and ignore raw `content`; when absent (a
-// pre-Phase-2 server, or a non-splitting profile the server did not enrich) we
-// fall back to raw `content` so behavior matches the pre-Phase-2 UI.
+// Every :generation_chunk the server sends carries additive `text` (visible
+// prose, thinking + tool_call blocks removed) and `thinking` (thinking-only)
+// fields beside the raw `content`: the native loop splits its stream per
+// generation for every profile (Gemma's thought channel included), the chat
+// loop gets reasoning apart from the answer. We use those fields and ignore raw
+// `content`; a chunk without them (an older server) falls back to raw
+// `content` as text.
 //
 // Presence is checked with `typeof === "string"` (not truthiness) so an empty
 // `text` (e.g. a chunk that is entirely a tool_call body) still selects the new

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

@@ -0,0 +1,99 @@
+// ── / autocomplete ─────────────────────────────────────────────────────────
+// While the composer holds one "/word", a small glass list above it offers
+// the session's commands (its worker's, plugins' too): arrows move, ⏎/Tab
+// pick, Esc closes, a tap picks. A closed list takes no keys.
+//
+// The matching is command_complete.js'; this is the list's DOM.
+
+import { escapeHtml } from "./format.js";
+import { commandMatches, commandRow, moveSelection, pickCommand } from "./command_complete.js";
+
+// @param list the list element (#commandList)
+// @param prompt the composer's textarea
+// @param commands () => the open session's commands ([] when it takes none)
+// @param afterPick () runs after a pick changed the composer's text (fit it)
+// @return {update(), close(), handleKey(e)}; handleKey returns whether the
+//   open list took the key
+export function createCommandList({ list, prompt, commands, afterPick = () => {} }) {
+  let shown = [];
+  let index = 0;
+
+  const isOpen = () => !list.hidden && shown.length > 0;
+
+  function update() {
+    const next = commandMatches(commands(), prompt.value);
+    if (!next.length) return close();
+    const keep = shown[index]?.name;
+    shown = next;
+    index = Math.max(0, next.findIndex((c) => c.name === keep));
+    render();
+  }
+
+  function render() {
+    list.innerHTML = shown.map((c, i) => {
+      const row = commandRow(c);
+      const note = row.note ? `<span class="command-note">${escapeHtml(row.note)}</span>` : "";
+      return `<div class="command-option${i === index ? " active" : ""}" role="option" id="command-option-${i}" ` +
+        `aria-selected="${i === index}" data-index="${i}"><span class="command-name">${escapeHtml(row.name)}</span>` +
+        `<span class="command-desc">${escapeHtml(row.description)}</span>${note}</div>`;
+    }).join("");
+    list.hidden = false;
+    prompt.setAttribute("aria-expanded", "true");
+    prompt.setAttribute("aria-activedescendant", `command-option-${index}`);
+    list.querySelector(".command-option.active")?.scrollIntoView({ block: "nearest" });
+  }
+
+  function close() {
+    shown = [];
+    index = 0;
+    list.hidden = true;
+    list.innerHTML = "";
+    prompt.setAttribute("aria-expanded", "false");
+    prompt.removeAttribute("aria-activedescendant");
+  }
+
+  // @return whether the pick took the key (false: ⏎ on a full name sends it)
+  function accept(at, { enter = false } = {}) {
+    const command = shown[at];
+    if (!command) return false;
+    const pick = pickCommand(command.name, prompt.value, { enter });
+    close();
+    if (pick.send) return false;
+    prompt.value = pick.text;
+    prompt.setSelectionRange(pick.text.length, pick.text.length);
+    afterPick();
+    prompt.focus();
+    return true;
+  }
+
+  // @return whether the open list took the key
+  function handleKey(e) {
+    if (!isOpen() || e.isComposing) return false;
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      index = moveSelection(index, shown.length, e.key === "ArrowDown" ? 1 : -1);
+      render();
+    } else if (e.key === "Tab" && !e.shiftKey) {
+      accept(index);
+    } else if (e.key === "Enter" && !e.shiftKey) {
+      if (!accept(index, { enter: true })) return false;
+    } else if (e.key === "Escape") {
+      close();
+      e.stopPropagation();
+    } else {
+      return false;
+    }
+    e.preventDefault();
+    return true;
+  }
+
+  prompt.addEventListener("input", update);
+  prompt.addEventListener("blur", close);
+  // Keep the focus in the composer: the pick happens on click.
+  list.addEventListener("pointerdown", (e) => e.preventDefault());
+  list.addEventListener("click", (e) => {
+    const option = e.target.closest(".command-option");
+    if (option) accept(Number(option.dataset.index));
+  });
+
+  return { update, close, handleKey };
+}

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

@@ -1,41 +1,3 @@
-const DEFAULT_EVENT_TYPES = Object.freeze([
-  "generation_chunk",
-  "generation_started",
-  "generation_completed",
-  "turn_started",
-  "turn_completed",
-  "answer_display",
-  "turn_canceled",
-  "turn_failed",
-  "turn_enqueued",
-  "input_merged",
-  "tool_call_completed",
-  "tool_call_started",
-  "context_status",
-  "used_memories_updated",
-  "pending_input_merged",
-  "reset",
-  "question_requested",
-  "question_answered",
-  "question_cancelled",
-  "recap_ready",
-  "prompt_restored",
-  "command_queued",
-  "command_ran",
-  "continue_offered",
-  "continue_resolved",
-  "reminder_injected",
-  "context_added",
-  "guardrail_warning",
-  "hook_notice",
-  "empty_answer_retry",
-  "generation_retrying",
-  "plugin_init_wait",
-  "card",
-  "plugin_init_started",
-  "plugin_init_finished",
-]);
-
 export function api(path, opts = {}) {
   const { fetchImpl = globalThis.fetch } = opts;
   return fetchImpl(path, {
@@ -170,29 +132,36 @@ export function deleteSession(id, opts = {}) {
   return api(`/api/sessions/${encodeURIComponent(id)}`, { method: "DELETE", ...opts });
 }
 
-// fromSeq: the snapshot's event id (`<seq>-<epoch>`: another worker answers it
-// with a reset) or a plain event_seq.
-export function openStream(id, fromSeq, handlers = {}, opts = {}) {
-  const { EventSourceImpl = globalThis.EventSource, onStreamError, onStreamClosed } = opts;
-  let cursor = "0";
-  if (Number.isInteger(fromSeq)) cursor = String(fromSeq);
-  else if (typeof fromSeq === "string" && fromSeq !== "") cursor = encodeURIComponent(fromSeq);
-  const es = new EventSourceImpl(`/api/sessions/${id}/stream?from_seq=${cursor}`);
-  let eventReceived = false;
-  for (const type of DEFAULT_EVENT_TYPES) {
-    const handler = handlers[type];
-    if (!handler) continue;
+// One EventSource listener per handler, named by the handler's key (the
+// event type), so a new event type needs only its handler. Each event's
+// JSON data goes to its handler (badJson(raw) when it doesn't parse);
+// onEvent runs first, for every event.
+function listenJson(es, handlers, onEvent, badJson) {
+  for (const [type, handler] of Object.entries(handlers)) {
+    if (typeof handler !== "function") continue;
     es.addEventListener(type, (raw) => {
-      eventReceived = true;
+      onEvent();
       let data = {};
       try {
         data = raw.data ? JSON.parse(raw.data) : {};
       } catch (_) {
-        data = { text: String(raw.data) };
+        data = badJson(raw.data);
       }
       handler(data, raw);
     });
   }
+}
+
+// fromSeq: the snapshot's event id (`<seq>-<epoch>`: another worker answers it
+// with a reset) or a plain event_seq.
+export function openStream(id, fromSeq, handlers = {}, opts = {}) {
+  const { EventSourceImpl = globalThis.EventSource, onStreamError, onStreamClosed } = opts;
+  let cursor = "0";
+  if (Number.isInteger(fromSeq)) cursor = String(fromSeq);
+  else if (typeof fromSeq === "string" && fromSeq !== "") cursor = encodeURIComponent(fromSeq);
+  const es = new EventSourceImpl(`/api/sessions/${id}/stream?from_seq=${cursor}`);
+  let eventReceived = false;
+  listenJson(es, handlers, () => { eventReceived = true; }, (raw) => ({ text: String(raw) }));
   let live = true;
   es.onerror = () => {
     if (!eventReceived && live && typeof onStreamError === "function") {
@@ -238,20 +207,7 @@ export function openEvents(handlers = {}, opts = {}) {
   const url = dir ? `/api/events?dir=${encodeURIComponent(dir)}` : "/api/events";
   const es = new EventSourceImpl(url);
   let frameReceived = false;
-  for (const type of ["snapshot", "session", "session_gone"]) {
-    const handler = handlers[type];
-    if (!handler) continue;
-    es.addEventListener(type, (raw) => {
-      frameReceived = true;
-      let data = {};
-      try {
-        data = raw.data ? JSON.parse(raw.data) : {};
-      } catch (_) {
-        data = {};
-      }
-      handler(data, raw);
-    });
-  }
+  listenJson(es, handlers, () => { frameReceived = true; }, () => ({}));
   let live = true;
   es.onerror = () => {
     // readyState 2 (CLOSED): the browser won't retry on its own.

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

@@ -75,29 +75,6 @@ export function previewOf(lastPrompt) {
   return normalized;
 }
 
-export function firstMessageOf(session, messages) {
-  // Prefer first user message content, else last_prompt / first_preview from server
-  if (Array.isArray(messages) && messages.length) {
-    const firstUser = messages.find((m) => m && (m.role === "user" || m.role === "assistant") && m.role === "user");
-    if (firstUser && firstUser.content) {
-      const n = normalize(firstUser.content);
-      if (n) return n.length > FIRST_PREVIEW_CHARS ? `${n.slice(0, FIRST_PREVIEW_CHARS)}\u2026` : n;
-    }
-  }
-  if (session) {
-    if (session.first_preview) {
-      const n = normalize(session.first_preview);
-      if (n) return n;
-    }
-    if (session.last_prompt) return previewOf(session.last_prompt);
-    // fallback to previewOf with first_preview logic length 80
-    const raw = session.preview || session.id || "";
-    const n = normalize(raw);
-    if (n) return n.length > FIRST_PREVIEW_CHARS ? `${n.slice(0, FIRST_PREVIEW_CHARS)}\u2026` : n;
-  }
-  return "\u2014";
-}
-
 export function previewForCard(session) {
   // Unified card preview: first message (80) else previewOf(last_prompt)
   const raw = session.first_preview || session.last_prompt || "";

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

@@ -24,7 +24,6 @@ button{background:var(--primary);border:0;color:#fff;padding:8px 12px;border-rad
 button:hover:not(:disabled){filter:brightness(1.12)}
 button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 button.ghost{background:var(--bg-raised);color:var(--text-2)}
-button.danger{background:var(--danger-bg)}
 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}
@@ -661,7 +660,6 @@ body.all-view #center, body.all-view #topStrip{display:none}
 .card.skeleton{pointer-events:none;border-style:dashed;opacity:.9;animation:skeleton-pulse 1.2s ease-in-out infinite}
 .card.skeleton .line{height:10px;background:var(--bg-raised);border-radius:6px}
 .card.skeleton .line.long{width:78%}
-.card.skeleton .line.long2{width:62%}
 .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)}}

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

@@ -2,13 +2,6 @@
 
 export const MODEL_KEY = "chi_model";
 
-// The names to offer, in the server's order: the default host's models
-// bare, the other hosts' as host:model. [] for a payload with none.
-export function modelNames(payload) {
-  const list = Array.isArray(payload?.models) ? payload.models : [];
-  return list.map((m) => String(m?.name || "")).filter(Boolean);
-}
-
 // The name to preselect: the remembered one when it is still offered (any
 // case), else the server's default, else the first offered, else "".
 export function pickModel(names, defaultName, stored) {

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

@@ -0,0 +1,169 @@
+// Notifications (notify.js has the rules; this is the page's side): when a
+// session needs the user (a question, an approval, a failed turn, a long
+// turn done) and this tab is not in front, an OS notification (the bell
+// turns them on) and a count in the title (always). One tag per event, so
+// several tabs show one, and none while another chi tab is in front with it
+// (notify.js, Several tabs).
+//
+// The browser parts come in as deps (globals by default) so the specs can
+// drive it without a DOM.
+
+import { sessionHash } from "./route.js";
+import {
+  NOTIFY_CHANNEL, attentionText, createNotifyGate, initialAttentionState, notifyState as bellState, trackAttention,
+} from "./notify.js";
+
+export const NOTIFY_KEY = "chi_notify";
+
+const NOTIFY_TITLES = {
+  on: "Notifications on: a session that needs you while this tab is in the background. Click to turn off",
+  off: "Notify me when a session needs me while this tab is in the background",
+  denied: "Notifications are blocked for this site in the browser's settings",
+};
+
+function defaultChannel() {
+  try {
+    if (typeof globalThis.BroadcastChannel === "function") return new BroadcastChannel(NOTIFY_CHANNEL);
+  } catch (_) {}
+  return null;
+}
+
+// @param button the bell (#notifyBtn)
+// @param doc, win the page's document and window (title, visibility, focus,
+//   listeners)
+// @param NotificationApi the Notification constructor (undefined: none)
+// @param storage () => localStorage (it can throw)
+// @param channel the BroadcastChannel to the other chi tabs, or null
+// @param gateOptions passed to createNotifyGate (specs: schedule, now)
+// @return {noticeSessions(type, data), setBaseTitle(title), clearBadge()}
+export function createNotifications({
+  button,
+  doc = globalThis.document,
+  win = globalThis.window,
+  NotificationApi = globalThis.Notification,
+  storage = () => globalThis.localStorage,
+  channel = defaultChannel(),
+  gateOptions = {},
+}) {
+  let attention = initialAttentionState();
+  const badgeKeys = new Set();
+  let baseTitle = "Chi";
+
+  function setTitle() {
+    doc.title = badgeKeys.size ? `(${badgeKeys.size}) ${baseTitle}` : baseTitle;
+  }
+
+  // The user is looking at this tab: visible and focused (a window behind
+  // the terminal is visible but not focused).
+  function tabInFront() {
+    return doc.visibilityState === "visible" && doc.hasFocus();
+  }
+
+  function notifyWanted() {
+    try { return storage().getItem(NOTIFY_KEY) === "1"; } catch (_) { return false; }
+  }
+
+  // "on" | "off" | "denied" | "unsupported" (notify.js)
+  function notifyState() {
+    const hasNotification = typeof NotificationApi === "function";
+    return bellState({
+      hasNotification,
+      secureContext: win.isSecureContext !== false,
+      permission: hasNotification ? NotificationApi.permission : "default",
+      wanted: notifyWanted(),
+    });
+  }
+
+  function renderNotifyBtn() {
+    const state = notifyState();
+    button.hidden = state === "unsupported";
+    button.dataset.state = state;
+    button.title = NOTIFY_TITLES[state] || "";
+    button.setAttribute("aria-pressed", state === "on" ? "true" : "false");
+  }
+
+  async function toggleNotify() {
+    const state = notifyState();
+    if (state === "unsupported" || state === "denied") return;
+    let wanted = state !== "on";
+    if (wanted && NotificationApi.permission !== "granted") {
+      wanted = (await NotificationApi.requestPermission()) === "granted";
+    }
+    try { storage().setItem(NOTIFY_KEY, wanted ? "1" : "0"); } catch (_) {}
+    renderNotifyBtn();
+  }
+
+  function showNotification(session, a) {
+    if (notifyState() !== "on") return;
+    const { title, body } = attentionText(session, a);
+    try {
+      const n = new NotificationApi(title, { body, tag: a.key });
+      n.onclick = () => {
+        win.focus();
+        win.location.hash = sessionHash(a.sessionId);
+        n.close();
+      };
+    } catch (_) {}
+  }
+
+  // Another chi tab in front has these (notify.js, Several tabs).
+  function seenElsewhere(keys) {
+    const size = badgeKeys.size;
+    for (const key of keys) badgeKeys.delete(key);
+    if (badgeKeys.size !== size) setTitle();
+  }
+  const notifyGate = createNotifyGate({ ...gateOptions, channel, onSeen: seenElsewhere });
+
+  // Every hub frame goes through here before the list takes it.
+  function noticeSessions(type, data) {
+    const next = trackAttention(attention, type, data);
+    attention = next.state;
+    const size = badgeKeys.size;
+    for (const key of next.closed) badgeKeys.delete(key);
+    notifyGate.drop(next.closed);
+    if (next.attentions.length > 0 && tabInFront()) {
+      notifyGate.seenInFront(next.attentions.map((a) => a.key));
+    } else {
+      for (const a of next.attentions) {
+        notifyGate.offer(a, () => {
+          if (tabInFront()) return;
+          badgeKeys.add(a.key);
+          setTitle();
+          showNotification(attention.byId[a.sessionId], a);
+        });
+      }
+    }
+    if (badgeKeys.size !== size) setTitle();
+  }
+
+  // The user is here: the badge goes, and the other tabs drop what it had.
+  function clearBadge() {
+    if (badgeKeys.size === 0) return;
+    notifyGate.seenInFront([...badgeKeys]);
+    badgeKeys.clear();
+    setTitle();
+  }
+
+  // The user is back: the page turned visible (Safari makes it visible
+  // before it has focus, and a tab switch inside a focused window sends no
+  // focus event), the window got focus, or they touched the page.
+  function backInFront() {
+    if (doc.visibilityState === "visible") clearBadge();
+  }
+  doc.addEventListener("visibilitychange", backInFront);
+  win.addEventListener("focus", backInFront);
+  doc.addEventListener("pointerdown", clearBadge, true);
+  doc.addEventListener("keydown", clearBadge, true);
+  button.addEventListener("click", toggleNotify);
+  renderNotifyBtn();
+
+  return {
+    noticeSessions,
+    // The title without the badge ("Chi · <project>").
+    setBaseTitle(title) {
+      baseTitle = title;
+      setTitle();
+    },
+    clearBadge,
+  };
+}