samagotchi 0.72.0 → 0.74.0

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

@@ -22,6 +22,7 @@ import {
 import { sessionHash } from "./route.js";
 import { clientLabel, isOwn } from "./turn_events.js";
 import { continueLine } from "./commands.js";
+import { plainText } from "./plain_line.js";
 
 // @param sessionId () => the open session's id (answers go there)
 // @param clientId this tab's id in the session's events
@@ -31,6 +32,9 @@ import { continueLine } from "./commands.js";
 // @param removeHintIfEmpty () drops the history's placeholder hint
 // @param askingText () => the running turn's asking reply (turn_model.js
 //   askingText via the page's view), kept by a question or own approval card
+// @param renderMarkdown (text) => Promise<html|null>: the kept reply's
+//   markdown (the page's POST /api/render; null keeps the raw text)
+// @param linkRefs (el) the page's path:line ref pass on it
 // @param api {sendAnswer, dismissQuestion, sendCommand} (data.js)
 // @param doc the page's document
 // @return {renderQuestion(pq, {said}), resolveQuestion(id, opts), removeQuestion(),
@@ -38,6 +42,7 @@ import { continueLine } from "./commands.js";
 //   renderContinue(offer), resolveContinue(data), forgetContinue()}
 export function createQuestionCards({
   sessionId, clientId, place, isNearBottom, scrollToEnd, removeHintIfEmpty, askingText = () => "",
+  renderMarkdown = () => Promise.resolve(null), linkRefs = () => {},
   api = { sendAnswer, dismissQuestion, sendCommand }, doc = globalThis.document,
 }) {
   // Live ask_user_question card, keyed by pending question id. Re-rendered from
@@ -400,16 +405,18 @@ export function createQuestionCards({
     // The reply that asked, kept with the card: what made the question
     // answerable stays with it in the history. Muted under the "Q → A" line
     // in two lines while the card is closed (a copy screen readers skip: not
-    // the toggle's label), and whole, selectable, at the top of the body
+    // the toggle's label; plain text, plain_line.js: no "##" or "**" in a
+    // clamped line), and whole, selectable, at the top of the body
     // when it is open (a drag in the summary would toggle the card).
     const asked = saidOf.get(questionEl);
+    let full = null;
     if (summary && asked) {
       const line = doc.createElement("div");
       line.className = "question-said";
       line.setAttribute("aria-hidden", "true");
-      line.textContent = asked;
+      line.textContent = plainText(asked);
       summary.appendChild(line);
-      const full = doc.createElement("div");
+      full = doc.createElement("div");
       full.className = "question-said-full";
       full.textContent = asked;
       questionEl.insertBefore(full, summary.nextSibling);
@@ -421,9 +428,36 @@ export function createQuestionCards({
     const keepNote = questionEl.dataset.toggled || (!cancelled && deniedReason(pending, answer));
     if (summary && !keepNote) note.classList.add("hidden");
     if (!questionEl.dataset.toggled) questionEl.open = false;
+    // After the collapse: a card left open by hand renders at once.
+    if (full) renderSaidOnOpen(questionEl, full, asked);
     pending = null;
   }
 
+  // The body's copy as markdown, from the card's first open on (a reload
+  // draws every card in the history: rendering them all would ask once per
+  // card). Raw until then, and when the render answers null (then the next
+  // open asks again).
+  function renderSaidOnOpen(card, full, asked) {
+    let state = "raw";
+    const draw = () => {
+      if (!card.open || state !== "raw") return;
+      state = "asking";
+      Promise.resolve()
+        .then(() => renderMarkdown(asked))
+        .catch(() => null)
+        .then((html) => {
+          if (!html) { state = "raw"; return; }
+          state = "done";
+          // Sanitised on the server (POST /api/render).
+          full.innerHTML = html;
+          full.classList.add("markdown");
+          linkRefs(full);
+        });
+    };
+    card.addEventListener("toggle", draw);
+    draw();
+  }
+
   function markQuestionSelection(sel) {
     if (!questionEl || !sel.length) return;
     questionEl.querySelectorAll(".question-choice").forEach((button) => {

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

@@ -7,6 +7,7 @@ import { splitSentences } from "./sentences.js";
 import { steerSender } from "./format.js";
 import { hookNoticeLabel } from "./turn_events.js";
 import { askingText } from "./turn_model.js";
+import { plainLine } from "./plain_line.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"]);
@@ -19,37 +20,6 @@ const QUIET_MS = 1500;
 // A touch, wheel or scroll counts as use this long (phones have no hover).
 const TOUCH_MS = 4000;
 
-// One headline sentence as plain text: the markdown a streaming answer
-// carries (headings, quotes, bullets, table pipes, emphasis, code ticks,
-// links) goes, and a line that is only syntax (a code fence, a table's
-// separator row, a rule) is empty. A small pass, no renderer: a live line
-// only needs to read well, and an unclosed "**" mid-stream goes too.
-export function plainHeadline(line) {
-  let s = String(line ?? "").trim();
-  if (/^(```|~~~)/.test(s)) return "";
-  if (/^\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)*\|?$/.test(s)) return "";
-  if (/^([-*_])(\s*\1){2,}$/.test(s)) return "";
-  s = s.replace(/^(>\s*)+/, "").replace(/^#{1,6}\s+/, "").replace(/^[-*+]\s+(\[[ xX]\]\s+)?/, "");
-  // A table row: a pipe at either end (a pipe mid-prose, "a || b", stays).
-  if (/^\||\|$/.test(s)) {
-    s = s.replace(/^\|/, "").replace(/\|$/, "").split("|").map((c) => c.trim()).filter(Boolean).join(" · ");
-  }
-  // Code spans keep their text as is; an unclosed tick just goes.
-  const code = [];
-  s = s.replace(/`+([^`]+)`+/g, (_, c) => `\u0000${code.push(c) - 1}\u0000`);
-  s = s
-    .replace(/!\[([^\]]*)\]\([^)]*\)?/g, "$1")
-    .replace(/\[([^\]]*)\]\([^)]*\)?/g, "$1")
-    .replace(/<(https?:\/\/[^>\s]+)>/g, "$1")
-    .replace(/`+/g, "")
-    .replace(/(^|[^\w])__(?=\S)(.*?\S)__(?=$|[^\w])/g, "$1$2")
-    .replace(/(\*\*|~~)/g, "")
-    .replace(/(^|[^\w*])\*(?=\S)([^*]*?\S)\*(?=$|[^\w*])/g, "$1$2")
-    .replace(/(^|[^\w])_(?=\S)([^_]*?\S)_(?=$|[^\w])/g, "$1$2")
-    .replace(/\u0000(\d+)\u0000/g, (_, i) => code[Number(i)]);
-  return s.replace(/\s+/g, " ").trim();
-}
-
 // The step's newest narration sentence, as plain text: the end of a
 // finished text is a boundary (its last line may have no period), a live
 // one's not yet. A sentence that is only markdown syntax is skipped, and so
@@ -61,9 +31,9 @@ export function headlineOf(text, done) {
   const plain = [];
   for (const sentence of sentences) {
     if (/^(```|~~~)/.test(sentence)) fenced = !fenced;
-    else if (!fenced && plainHeadline(sentence)) plain.push(plainHeadline(sentence));
+    else if (!fenced && plainLine(sentence)) plain.push(plainLine(sentence));
   }
-  const fragment = fenced ? "" : plainHeadline(rest);
+  const fragment = fenced ? "" : plainLine(rest);
   if (done && fragment) return fragment;
   if (plain.length) return plain[plain.length - 1];
   return fragment.length > 160 ? fragment : "";

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

@@ -19,10 +19,19 @@ export function node(tag, cls, parent = null) {
 // +taskStop+: the page's stopper (task_stop.js), for the stop-task button
 // on a running task_wait; +gens()+ the running turn's gens (the button's
 // command, read at its click); +onChange+ redraws (the stage's
-// scheduleRefresh).
-export function createStageSlots({ headline, asking, now, trail, ticks, taskStop = null, gens, onChange }) {
+// scheduleRefresh). +renderMarkdown(text)+: the asking text's HTML
+// (Promise<string|null>; null keeps the raw text: markdown off, a failed
+// read); +linkRefs(el)+: the page's path:line ref pass on the slot.
+export function createStageSlots({
+  headline, asking, now, trail, ticks, taskStop = null, gens, onChange,
+  renderMarkdown = () => Promise.resolve(null), linkRefs = () => {},
+}) {
   // What each slot shows, so an unchanged slot is left alone.
   const shown = { headline: null, now: null, trail: null, asking: null };
+  // The last asking text sent to render and its answer (in flight or
+  // done, HTML only): the same question drawn again (after a reset, a
+  // blank between) asks no second time.
+  let rendering = { text: null, html: null };
 
   function drawHeadline({ text, thinking }) {
     const key = `${thinking ? "t" : "n"}|${text}`;
@@ -42,13 +51,35 @@ export function createStageSlots({ headline, asking, now, trail, ticks, taskStop
 
   // Patched only when the text changes (a late chunk to the closed gen
   // rewrites the same text): a selection in it survives. A new text reads
-  // from its top.
+  // from its top: drawn raw at once, then swapped for its markdown when
+  // that comes back while the slot still shows the same text (the text is
+  // final: it shows only once the call that asks runs).
   function drawAsking(text) {
     asking.hidden = !text;
     if (shown.asking === text) return;
     shown.asking = text;
+    asking.classList.remove("markdown");
     asking.textContent = text;
     asking.scrollTop = 0;
+    if (!text) return;
+    linkRefs(asking);
+    if (rendering.text !== text) {
+      let html;
+      try { html = Promise.resolve(renderMarkdown(text)).catch(() => null); } catch (_) { html = Promise.resolve(null); }
+      rendering = { text, html };
+    }
+    const pending = rendering;
+    pending.html.then((html) => {
+      // A null isn't kept: the next draw of this text asks again.
+      if (!html && rendering === pending) rendering = { text: null, html: null };
+      // Swapped once: a blank-then-same draw while in flight waits twice.
+      if (!html || shown.asking !== text || asking.classList.contains("markdown")) return;
+      // Sanitised on the server (POST /api/render), as an answer's HTML is.
+      asking.innerHTML = html;
+      asking.classList.add("markdown");
+      asking.scrollTop = 0;
+      linkRefs(asking);
+    });
   }
 
   function drawNow(tool, quiet) {
@@ -123,6 +154,7 @@ export function createStageSlots({ headline, asking, now, trail, ticks, taskStop
   function reset() {
     for (const slot of [headline, asking, now, trail, ticks]) slot.replaceChildren();
     asking.hidden = true;
+    asking.classList.remove("markdown");
     shown.headline = shown.now = shown.trail = shown.asking = null;
   }
 

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

@@ -48,8 +48,12 @@ function readCollapsed() {
 // the history only for a reader at its end). +dockEl+, +centerEl+ and
 // +composerEl+ size the stage's cap.
 // +taskStop+: the page's stopper (task_stop.js), for the stop-task button
-// on a running task_wait.
-export function createStageView({ historyEl, appendToHistory, isNearBottom: historyNearBottom, sawText, sessionId, dockEl, centerEl, composerEl, taskStop = null }) {
+// on a running task_wait. +renderMarkdown+ and +linkRefs+: the asking
+// slot's markdown read and ref pass (stage_slots.js).
+export function createStageView({
+  historyEl, appendToHistory, isNearBottom: historyNearBottom, sawText, sessionId, dockEl, centerEl, composerEl, taskStop = null,
+  renderMarkdown, linkRefs,
+}) {
   // The dock becomes a clear column: the stage's card, then the composer's
   // (its rows moved into .dock-card, which wears the glass and the focus ring).
   document.body.classList.add("stage-view");
@@ -82,7 +86,8 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   headline.setAttribute("role", "button");
   headline.title = "Show this step's reasoning";
   // While a question or approval waits: the whole reply that asked it, in
-  // the headline's place (the card says what to answer, this says why).
+  // the headline's place (the card says what to answer, this says why),
+  // as markdown when web.markdown is on.
   const asking = node("div", "ts-asking", live);
   asking.hidden = true;
   const now = node("div", "ts-now", live);
@@ -111,7 +116,7 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
   // "queued"), each to run as a turn of its own; they hand off last.
   const queuedSlot = node("div", "ts-queued", stage);
   const slotsView = createStageSlots({
-    headline, asking, now, trail, ticks, taskStop,
+    headline, asking, now, trail, ticks, taskStop, renderMarkdown, linkRefs,
     gens: () => view.current().turn?.gens,
     onChange: () => scheduleRefresh(),
   });

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

@@ -83,8 +83,9 @@ function llmEditTemplate(row) {
 // A gate-corrected call's `ran as:` line shows on hover only.
 const INLINE_CHARS = 300;
 // The JS twin of ToolOutputCut::EXIT_LINE (tool_output_cut.rb): an exit line, then maybe a hint; a
-// signal-killed command's has no number ("exit: ").
-const EXIT_LINE = /\nexit: (?:-?\d+)?[^\n]*(?:\n\([^\n]*\))?$/;
+// signal-killed command's has no number ("exit: "). spec/fixtures/exit_lines.json holds the cases both
+// must answer alike (exported for turn_html.test.js).
+export const EXIT_LINE = /\nexit: (?:-?\d+)?[^\n]*(?:\n\([^\n]*\))?$/;
 // A bare success exit line; group 1 is the hint line after it, if any.
 const SUCCESS_EXIT_LINE = /\nexit: 0(\n\([^\n]*\))?$/;
 const EXECUTE_BLOCK = /(?:^|\n)(?:stdout|stderr):\n/;

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

@@ -26,6 +26,7 @@
 import { addCompleted, addStarted, newActivity, toolName } from "./activity.js";
 import { tallyText } from "./tally.js";
 import { clip, leadTrimmed } from "./format.js";
+import { plainLine } from "./plain_line.js";
 
 const LABEL_MAX = 80;
 const LABEL_TOOLS = 3;
@@ -210,9 +211,11 @@ export function failedCount(rows) {
   return rows.filter((r) => r.status === "error").length;
 }
 
-// The collapsed row of a gen: its narration's first line, else its first
-// call's title ("edit lib/a.rb"), else the tools it worked with, else
-// "thinking"; then its call count and how many failed.
+// The collapsed row of a gen: its narration's first line as plain text
+// (plain_line.js: "## Plan" reads "Plan"; a line that is only syntax, a rule
+// or a fence, gives way to the next), else its first call's title ("edit
+// lib/a.rb"), else the tools it worked with, else "thinking"; then its call
+// count and how many failed.
 export function genLabel(gen) {
   const { head, calls } = genLabelParts(gen);
   return calls ? `${head} · ${calls}` : head;
@@ -223,7 +226,7 @@ export function genLabel(gen) {
 // starts with (its narration, its first call's title), so an open step's
 // summary can say only its calls (turn_view.js labelHtml).
 export function genLabelParts(gen) {
-  const line = String(gen.text || "").trim().split("\n")[0].trim();
+  const line = String(gen.text || "").split("\n").map(plainLine).find(Boolean) || "";
   const calls = gen.tools.length ? toolCallsText(gen.tools) : "";
   const first = gen.tools[0];
   if (line) return { head: cut(line), calls, repeats: true };

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

@@ -37,6 +37,7 @@ import { createSentenceFeed } from "./sentences.js";
 import { createTicker } from "./thinking_ticker.js";
 import * as model from "./turn_model.js";
 import { createHold } from "./hold.js";
+import { linkedLine } from "./notice_links.js";
 import { taskCommand, taskStopButton } from "./task_stop.js";
 
 // ---- The templates: one step, its thinking, its label ----
@@ -99,10 +100,10 @@ export function stepTemplate(gen, st = {}) {
 
 // A hook's line (hook_notice) as a step's row. data.line is a whole row of
 // chi's own (an empty-answer retry), shown as is; data.cls a class of its
-// own and data.title its hover (a ✂ row's).
+// own and data.title its hover (a ✂ row's). Its http(s) URLs are links.
 function noticeTemplate(data) {
   const cls = "hook-notice" + (data.level === "warn" ? " warn" : "") + (data.cls ? ` ${data.cls}` : "");
-  return html`<div class=${cls} title=${data.title || nothing}>${data.line || `${hookNoticeLabel(data.hook)}: ${data.text || ""}`}</div>`;
+  return html`<div class=${cls} title=${data.title || nothing}>${linkedLine(data.line || `${hookNoticeLabel(data.hook)}: ${data.text || ""}`)}</div>`;
 }
 
 // +template+ rendered as detached nodes (a fragment).

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: samagotchi
 version: !ruby/object:Gem::Version
-  version: 0.72.0
+  version: 0.74.0
 platform: ruby
 authors:
 - Dmitry Dedov
@@ -614,8 +614,10 @@ files:
 - lib/samagotchi/web/public/llm_context_chip.js
 - lib/samagotchi/web/public/model_pick.js
 - lib/samagotchi/web/public/model_picker.js
+- lib/samagotchi/web/public/notice_links.js
 - lib/samagotchi/web/public/notifications.js
 - lib/samagotchi/web/public/notify.js
+- lib/samagotchi/web/public/plain_line.js
 - lib/samagotchi/web/public/prompt_history.js
 - lib/samagotchi/web/public/question_card.js
 - lib/samagotchi/web/public/question_cards.js