samagotchi 0.60.0 → 0.62.0

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

@@ -10,9 +10,14 @@
 const HIDE_MS = 300;
 // Kept from the viewport's edges (a phone's width).
 const EDGE = 8;
+// The ▾ sits in room its ref makes after itself while it shows
+// (data-ref-more, index.html), so it never covers what follows the ref:
+// the next words of an answer, a row's duration. A ref that room would
+// push onto the next line (it ends its line: nothing follows it there)
+// makes none (data-ref-more="end"), and the ▾ goes just past its end.
 
 // +doc+'s ▾ and menu. open(el, items, {focus}) shows +items+ ({id, label,
-// run}) under +el+; showMore(el, onOpen) puts the ▾ after +el+, whose click
+// hint?, run}; the hint is the item's hover: a URL action's URL) under +el+; showMore(el, onOpen) puts the ▾ after +el+, whose click
 // calls +onOpen+; hideMoreSoon(el) takes it away unless the pointer reaches
 // it; close({refocus}) closes the menu.
 export function createRefMenu(doc = globalThis.document) {
@@ -50,18 +55,28 @@ export function createRefMenu(doc = globalThis.document) {
   function showMore(el, onOpen) {
     clearTimeout(hideTimer);
     const button = moreButton();
+    if (moreFor && moreFor !== el) delete moreFor.dataset.refMore;
     moreFor = el;
     onMore = onOpen;
+    const before = el.dataset.refMore === undefined ? lastRect(el) : null;
+    if (el.dataset.refMore === undefined) el.dataset.refMore = "";
+    let rect = lastRect(el);
+    if (before && wrapped(before, rect)) {
+      el.dataset.refMore = "end";
+      rect = lastRect(el);
+    }
     button.hidden = false;
-    const rect = lastRect(el);
+    const width = button.offsetWidth || 16;
     const top = rect.top + (rect.height - (button.offsetHeight || rect.height)) / 2;
-    button.style.left = `${Math.min(rect.right + 2, win.innerWidth - (button.offsetWidth || 16) - 2)}px`;
+    const left = el.dataset.refMore === "end" ? rect.right + 2 : rect.right - width - 1;
+    button.style.left = `${Math.min(left, win.innerWidth - width - 2)}px`;
     button.style.top = `${top}px`;
   }
 
   function hideMore() {
     clearTimeout(hideTimer);
     if (more) more.hidden = true;
+    if (moreFor) delete moreFor.dataset.refMore;
     moreFor = null;
   }
 
@@ -88,6 +103,7 @@ export function createRefMenu(doc = globalThis.document) {
       button.tabIndex = -1;
       button.dataset.target = item.id;
       button.textContent = item.label;
+      if (item.hint) button.title = item.hint;
       button.addEventListener("click", (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -182,6 +198,11 @@ export function createRefMenu(doc = globalThis.document) {
 
 // The ref's last line box (a ref wrapped over two lines ends on the
 // second); its whole box when it has none.
+// The room moved the ref's last box onto another line.
+function wrapped(before, after) {
+  return Math.abs(after.top - before.top) > before.height / 2;
+}
+
 function lastRect(el) {
   const rects = el.getClientRects?.() || [];
   return rects.length ? rects[rects.length - 1] : el.getBoundingClientRect();

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

@@ -103,13 +103,15 @@ function resolved(ref, touched, cwd) {
   return path ? { kind: "file", path, line: ref.line, end_line: ref.endLine } : null;
 }
 
-// The absolute paths of the file refs under +roots+ (the session's rows,
-// approval cards): what a text ref may name.
+// The absolute paths of the file refs in the session's rows and approval
+// cards under +roots+: what a text ref may name. Not an answer's own refs
+// (a scanned one repeats a row's; a plugin's file ref names a file the
+// session may not have touched).
 export function touchedFiles(roots) {
   const touched = new Set();
   for (const root of roots) {
     for (const el of root.querySelectorAll('[data-ref-kind="file"][data-ref-path]')) {
-      touched.add(el.dataset.refPath);
+      if (el.closest(".activity-row, .bubble.approval")) touched.add(el.dataset.refPath);
     }
   }
   return touched;

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

@@ -10,7 +10,8 @@
 // bound to its element by bindRef: its label and its URL actions live in a
 // WeakMap off the DOM, and refTarget reads them first. Its actions join the
 // kind's own (the `actions` entry); a kind the page has no table for runs
-// only those.
+// only those. A plugin tool's row (its +refs+, bindRowRefs) puts its first
+// ref on the title and the others in the title's menu (the `more` entry).
 // A plain click runs the first one available (the main target); a ref
 // with more shows a ▾ on hover that opens a menu of all of them
 // (ref_menu.js), and a tap opens it. A ref with a target is a tab stop
@@ -34,18 +35,34 @@ export function refAttrs(ref) {
 // A kind, as the server's Ref allows it (Ref::KIND).
 const KIND = /^[a-z][a-z0-9_-]{0,31}$/;
 
+// +kind+ is one bindRef binds.
+export function refKindOk(kind) {
+  return typeof kind === "string" && KIND.test(kind);
+}
+
 // A plugin's ref data per element (bindRef): {kind, target, label,
 // actions}. A WeakMap, so a redrawn element takes its data with it.
 const REF_DATA = new WeakMap();
 
-// +url+ as the page opens it when it is an http(s) one, else null. The
-// server checks it too (Ref, RefAction); the page never opens another
-// scheme a plugin gave (javascript:, data:, an editor's).
+// The longest URL the page opens: the server's RefAction::MAX_URL.
+const MAX_URL = 2000;
+
+// +url+ as the page opens it when it is an http(s) one with no userinfo
+// and at most MAX_URL characters (trimmed), else null. The server's
+// RefAction.http_url? checks it too; the page is at least as strict on
+// userinfo, and the URL parser refuses an http(s) URL without a host. The
+// page never opens another scheme a plugin gave (javascript:, data:, an
+// editor's), nor a "https://github.com@evil.example/" (one host shown,
+// another opened).
 export function httpUrl(url) {
   if (typeof url !== "string") return null;
+  const trimmed = url.trim();
+  if (trimmed.length > MAX_URL) return null;
   try {
-    const parsed = new URL(url.trim());
-    return parsed.protocol === "http:" || parsed.protocol === "https:" ? parsed.href : null;
+    const parsed = new URL(trimmed);
+    if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return null;
+    if (parsed.username || parsed.password) return null;
+    return parsed.href;
   } catch {
     return null;
   }
@@ -58,20 +75,67 @@ export function httpUrl(url) {
 // nothing. A rebind replaces the target attributes. +el+, or null without one.
 export function bindRef(el, ref) {
   if (!el) return null;
-  if (typeof ref?.kind !== "string" || !KIND.test(ref.kind)) return el;
-  const target = ref.target || {};
+  const clean = cleanRef(ref);
+  if (!clean) return el;
+  const { target } = clean;
   el.classList.add("ref");
-  el.dataset.refKind = ref.kind;
+  el.dataset.refKind = clean.kind;
   for (const [name, value] of [["refPath", target.path], ["refLine", target.line], ["refEndLine", target.end_line]]) {
     if (value) el.dataset[name] = String(value);
     else delete el.dataset[name];
   }
+  REF_DATA.set(el, { ...clean, more: [] });
+  return el;
+}
+
+// +ref+ (the server's Ref#to_h) as the page keeps it: {kind, target,
+// label, actions}, its actions only those with an id, a label and an
+// http(s) URL; null for a kind the server's Ref refuses.
+function cleanRef(ref) {
+  if (!refKindOk(ref?.kind)) return null;
+  const target = ref.target && typeof ref.target === "object" ? ref.target : {};
   const actions = (Array.isArray(ref.actions) ? ref.actions : []).flatMap((action) => {
     const url = httpUrl(action?.url);
     return url && action.id && action.label ? [{ id: String(action.id), label: String(action.label), url }] : [];
   });
-  REF_DATA.set(el, { kind: ref.kind, target, label: ref.label || null, actions });
-  return el;
+  return { kind: ref.kind, target, label: ref.label ? String(ref.label) : null, actions };
+}
+
+// A tool row's refs: a plugin tool's (the events' and the reloaded part's
+// +refs+, the server's RowRefs: Ref#to_h each) that bindRef binds, after
+// the row's own (a file tool's +ref+, as a Ref) when it has one.
+function rowRefsOf(row) {
+  const own = row?.ref?.kind ? [{ kind: row.ref.kind, target: { path: row.ref.path, line: row.ref.line, end_line: row.ref.end_line } }] : [];
+  return [...own, ...(Array.isArray(row?.refs) ? row.refs : [])].map(cleanRef).filter(Boolean);
+}
+
+// The ref a tool row's title carries in its markup (turn_html.js, refAttrs'
+// shape: {kind, path?, line?, end_line?}): the row's own, else its first
+// plugin ref; null for none.
+export function rowTitleRef(row) {
+  const [first] = rowRefsOf(row);
+  return first ? { kind: first.kind, path: first.target.path, line: first.target.line, end_line: first.target.end_line } : null;
+}
+
+// Binds a tool row's refs to its title (the element turn_html.js drew from
+// +row+, live or reloaded; again after each redraw): the first as bindRef
+// does, the others the title's menu offers (D8). Only for a row with a
+// plugin ref: a file tool's row needs no binding (its attributes are its
+// ref). The title, or null.
+export function bindRowRefs(rowEl, row) {
+  const title = rowEl?.querySelector?.(":scope > .activity-params[data-ref-kind]");
+  if (!title || !Array.isArray(row?.refs) || !row.refs.length) return null;
+  const [first, ...more] = rowRefsOf(row);
+  if (!first) return null;
+  bindRef(title, first);
+  REF_DATA.get(title).more = more;
+  return title;
+}
+
+// The plugin ref bound to +el+ (bindRef's data), or null: a row title or
+// a scanned ref (attributes only) has none.
+export function boundRef(el) {
+  return (el && REF_DATA.get(el)) || null;
 }
 
 // The same URL either way (a link's href against an action's URL).
@@ -124,6 +188,51 @@ const URL_ACTIONS = Object.freeze({
     })),
 });
 
+// A short name for a ref in a menu of several: its label, else its id,
+// else its file's name (and line).
+function refName(ref) {
+  if (ref.label) return ref.label;
+  if (ref.target.id != null) return String(ref.target.id);
+  const name = String(ref.target.path || "").split("/").pop();
+  return ref.target.line ? `${name}:${ref.target.line}` : name;
+}
+
+// A row's other refs (bindRowRefs: all but the first), after the title's
+// own targets: each one's actions, named "<ref> · <action>", for every
+// viewer, and a file's editor (where the editor opens). A URL the menu
+// already has (the link's, an action's, an earlier one's) isn't repeated.
+const MORE_REFS = Object.freeze({
+  id: "more",
+  expand(target) {
+    const seen = new Set([target.href, ...(target.actions || []).map((action) => action.url)].map(httpUrl).filter(Boolean));
+    return (target.more || []).flatMap((ref, at) => {
+      const name = refName(ref);
+      const items = [];
+      if (ref.kind === "file" && ref.target.path) {
+        items.push(Object.freeze({
+          id: `more:${at}:editor`,
+          label: () => `${name} · Open in editor`,
+          available: (viewer, target) => !target.isLine && viewer?.editor === true && !!viewer.editorUrl,
+          run: (_target, viewer, env) => env.open(editorUrl(viewer.editorUrl, ref.target.path, ref.target.line)),
+          hint: () => `Open the current file in your editor${ref.target.line ? ` at line ${ref.target.line}` : ""}`,
+        }));
+      }
+      for (const action of ref.actions) {
+        if (seen.has(action.url)) continue;
+        seen.add(action.url);
+        items.push(Object.freeze({
+          id: `more:${at}:${action.id}`,
+          label: () => `${name} · ${action.label}`,
+          available: (_viewer, target) => !target.isLine,
+          run: (_target, _viewer, env) => env.openLink(action.url),
+          hint: () => action.url,
+        }));
+      }
+      return items;
+    });
+  },
+});
+
 export const REF_ACTIONS = Object.freeze({
   file: Object.freeze([
     LINK,
@@ -149,6 +258,7 @@ export const REF_ACTIONS = Object.freeze({
       run: (target, _viewer, env) => env.show(target),
       hint: () => "Show the row that touched it in the turn",
     }),
+    MORE_REFS,
     Object.freeze({
       id: "copy",
       label: () => "Copy path",
@@ -157,8 +267,9 @@ export const REF_ACTIONS = Object.freeze({
       run: (target, _viewer, env) => env.copy(target.path),
     }),
   ]),
-  // Any other kind (a plugin's issue, commit, …): its link, then its actions.
-  "*": Object.freeze([LINK, URL_ACTIONS]),
+  // Any other kind (a plugin's issue, commit, …): its link, then its
+  // actions, then a row's other refs.
+  "*": Object.freeze([LINK, URL_ACTIONS, MORE_REFS]),
 });
 
 // The targets +viewer+ has for +target+ (refTarget's), in order; none
@@ -179,8 +290,9 @@ const OWNERS = ".activity-row, .bubble.approval";
 // A line of the owner's file: a diff line, or a read row's numbered line.
 const LINES = ".diff-line[data-line], .read-line[data-line]";
 
-// What a click on +el+ points at: {kind, path, id, label, actions, line,
-// owner, el, isLine, href} or null (+id+, +label+ and +actions+ a plugin's
+// What a click on +el+ points at: {kind, path, id, label, actions, more,
+// line, owner, el, isLine, href} or null (+id+, +label+, +actions+ and
+// +more+ (a row's other refs, bindRowRefs) a plugin's
 // ref's, bindRef: the WeakMap is read first). A row title (or an approval card's path) opens its file
 // at the lines the call named (an edit without any at its first changed
 // line); a diff line (or a hunk header) or a read row's numbered line, in
@@ -204,11 +316,12 @@ export function refTarget(el) {
 
 function targetOf(el) {
   const data = REF_DATA.get(el);
-  if (!data) return { kind: el.dataset.refKind, path: el.dataset.refPath || "", line: Number(el.dataset.refLine) || null, id: null, label: null, actions: [] };
+  if (!data) return { kind: el.dataset.refKind, path: el.dataset.refPath || "", line: Number(el.dataset.refLine) || null, id: null, label: null, actions: [], more: [] };
   // Bound data is the whole ref: no fallback to the attributes.
   const { target } = data;
   return {
     kind: data.kind, path: target.path || "", line: Number(target.line) || null, id: target.id ?? null, label: data.label, actions: data.actions,
+    more: data.more,
   };
 }
 
@@ -281,19 +394,24 @@ function lineIn(row, line) {
 // (the turn's steps, its step), its diff (or the read that shows the
 // line), scrolls to the line (else the row) and flashes both. A view that
 // hides its rows its own way (the stage's cloud) opens on the row's
-// ref:reveal event, which bubbles. The row, or null when there is none.
+// ref:reveal event, which bubbles; a view that grows for it first sets the
+// event's detail.until (a promise), and the scroll waits for it. The row,
+// or null when there is none.
 export function showInTurn(target, { behavior = smoothScroll() } = {}) {
   const row = turnRowFor(target);
   if (!row) return null;
   const view = row.ownerDocument.defaultView || globalThis;
-  row.dispatchEvent(new view.CustomEvent("ref:reveal", { bubbles: true }));
+  const reveal = new view.CustomEvent("ref:reveal", { bubbles: true, detail: {} });
+  row.dispatchEvent(reveal);
   const line = target.line ? lineIn(row, target.line) : null;
   const fold = line?.closest("details.activity-diff, details.activity-read") || row.querySelector("details.activity-diff");
   for (let details = (line || fold || row).closest("details"); details; details = details.parentElement?.closest("details")) {
     details.open = true;
   }
   if (fold) fold.open = true;
-  (line || row).scrollIntoView?.({ block: "center", behavior });
+  const scroll = () => (line || row).scrollIntoView?.({ block: "center", behavior });
+  if (reveal.detail?.until) reveal.detail.until.then(scroll);
+  else scroll();
   for (const el of [row, line].filter(Boolean)) flash(el);
   return row;
 }
@@ -343,7 +461,9 @@ export function installRefClicks(root, viewer, {
 } = {}) {
   const env = { open, openLink, show, copy };
   const run = (action, target) => action.run(target, viewer(), env);
-  const items = (actions, target) => actions.map((action) => ({ id: action.id, label: action.label(target), run: () => run(action, target) }));
+  const items = (actions, target) => actions.map((action) => ({
+    id: action.id, label: action.label(target), hint: action.hint?.(target) || "", run: () => run(action, target),
+  }));
   const openMenu = (target, actions, options) => menu.open(target.el, items(actions, target), options);
   // The last pointer's type: a tap opens the menu, a mouse click runs the
   // main target.

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

@@ -22,3 +22,45 @@ export function keepFollowing(el, mutate, thresholdPx = SCROLL_FOLLOW_PX) {
   if (follow) el.scrollTop = el.scrollHeight;
   return result;
 }
+
+// A follow that eases instead of jumping: +el+'s scrollTop goes to +top+
+// over +ms+ (ease-out), +el+ marked data-following meanwhile (a layout
+// watcher reads that as a follow, not a jump). +top+ may be a function,
+// read each frame (a target that moves on: the history's end while its
+// bottom reserve eases). With +reduce+ (prefers-reduced-motion) it jumps.
+// A newer call on the same element takes over. Resolves when it is there.
+export const FOLLOW_MS = 180;
+const easing = new WeakMap();
+export function easeScrollTo(el, top, { ms = FOLLOW_MS, reduce = false, raf = (fn) => requestAnimationFrame(fn), now = () => performance.now() } = {}) {
+  const target = () => (typeof top === "function" ? top() : top);
+  easing.get(el)?.stop();
+  if (reduce || ms <= 0) {
+    el.scrollTop = target();
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    const from = el.scrollTop;
+    const start = now();
+    let done = false;
+    const run = { stop: () => finish() };
+    function finish() {
+      if (done) return;
+      done = true;
+      if (easing.get(el) === run) {
+        easing.delete(el);
+        delete el.dataset.following;
+      }
+      resolve();
+    }
+    easing.set(el, run);
+    el.dataset.following = "";
+    const step = () => {
+      if (done) return;
+      const t = Math.min(1, (now() - start) / ms);
+      el.scrollTop = from + (target() - from) * (1 - (1 - t) ** 3);
+      if (t < 1) raf(step);
+      else finish();
+    };
+    raf(step);
+  });
+}

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

@@ -6,6 +6,7 @@ import { toolName } from "./activity.js";
 import { splitSentences } from "./sentences.js";
 import { steerSender } from "./format.js";
 import { hookNoticeLabel } from "./turn_events.js";
+import { askingText } from "./turn_model.js";
 
 const READ_LIKE = new Set(["read", "memory_read", "web_fetch", "task_get", "task_list", "list_sessions"]);
 const EDITS = new Set(["edit", "write", "memory_write"]);
@@ -150,11 +151,15 @@ const NO_ANSWER = "no answer";
 //            ended (nothing happens now);
 //   trail    the last three finished calls, newest last (a file's title
 //            without its dir; command as for tool);
-//   ticks    one per call: {kind, status, step (the gen's index)}.
-// +pending+: a card waits for the user; +ended+: the turn's end kind;
+//   ticks    one per call: {kind, status, step (the gen's index)};
+//   asking   the whole text of the reply whose call a card blocks
+//            (turn_model.js askingText), "" when none is blocked.
+// +pending+: a card waits for the user; +blocked+: a card that blocks the
+// turn (a question, an approval; not an action card) waits; +ended+: the
+// turn's end kind;
 // +emptyAnswer+: a completed turn ended with no answer
 // (turn_summary.empty_answer), so it reads "no answer", not "answered".
-export function liveSlots(turn, { narration = "", thinking = "", pending = false, ended = null, emptyAnswer = false } = {}) {
+export function liveSlots(turn, { narration = "", thinking = "", pending = false, blocked = false, ended = null, emptyAnswer = false } = {}) {
   const gens = turn?.gens || [];
   const rows = gens.flatMap((gen, step) => gen.tools.map((row) => ({ row, step })));
   const running = [...rows].reverse().find(({ row }) => row.status === "running")?.row || null;
@@ -182,9 +187,23 @@ export function liveSlots(turn, { narration = "", thinking = "", pending = false
     tool: running ? withTask(withCommand({ name: toolName(running), title: rowTitle(running), kind: toolKind(running.tool) }, running), running) : null,
     trail,
     ticks: rows.map(({ row, step }) => ({ kind: toolKind(row.tool), status: row.status, step })),
+    asking: blocked && !ended ? askingText(turn) : "",
   };
 }
 
+// The stage's frame height (px) while it holds a turn: grow-only, so a
+// content change inside it (the plain flip, an answered card, a short
+// answer) never moves its top edge. +natural+: its content's own height;
+// +held+: the height it holds (null: none yet); +cap+: --stage-max. A lower
+// cap (a phone's keyboard) clamps it at once and the clamp is the new held
+// height: a cap that rises again doesn't bring the old one back, only new
+// content grows it. null: no frame (not holding a turn, or collapsed to
+// its status row): the content's own height.
+export function frameTarget({ natural, held, cap, holding, collapsed }) {
+  if (!holding || collapsed) return null;
+  return Math.min(Math.max(natural, held ?? 0), cap);
+}
+
 // In use: the pointer over the stage, focus or a selection in it, or a
 // touch/wheel/scroll in it within TOUCH_MS.
 export function inUseFrom({ pointerIn, lastTouchMs, focusInside, selectionInside, nowMs }) {