samagotchi 0.150.0 → 0.151.0

data/lib/samagotchi/web/markdown_renderer.rb

@@ -2,6 +2,7 @@
 
 require "nokogiri"
 require "uri"
+require_relative "../block_renderers"
 
 module Samagotchi
   module Web
@@ -17,6 +18,12 @@ module Samagotchi
       ALLOWED_ELEMENTS = %w[a blockquote br code del em h1 h2 h3 h4 h5 h6 hr li ol p pre s strong span table tbody td th thead tr ul].freeze
       DROP_ELEMENTS = %w[iframe object script style svg].freeze
       ALLOWED_PROTOCOLS = %w[http https mailto].freeze
+      # Both Commonmarker calls take these: the parse that reads the fences has
+      # to see the blocks #render's own parse does.
+      OPTIONS = {
+        render: { escape: true }, # escape raw HTML from source; highlighter output is still emitted
+        extension: { header_ids: nil }
+      }.freeze
 
       def initialize(enabled: false)
         @enabled = enabled
@@ -46,10 +53,7 @@ module Samagotchi
       def render(markdown)
         return nil unless available?
 
-        html = Commonmarker.to_html(markdown.to_s, options: {
-          render: { escape: true }, # escape raw HTML from source; highlighter output is still emitted
-          extension: { header_ids: nil }
-        }, plugins: {
+        html = Commonmarker.to_html(markdown.to_s, options: OPTIONS, plugins: {
           # An empty theme makes syntect emit scope classes (`keyword`, `string`, ...)
           # instead of inline colours from one fixed theme, so the page's light and
           # dark palettes colour code blocks (the --code-* tokens in index.html).
@@ -57,7 +61,7 @@ module Samagotchi
         })
         return nil unless html
 
-        sanitize(html)
+        sanitize(html, fence_languages(markdown.to_s))
       end
 
       private
@@ -77,7 +81,35 @@ module Samagotchi
         @commonmarker_installed = Gem::Specification.find_all_by_name("commonmarker").any?
       end
 
-      def sanitize(html)
+      # Every code block's language, in document order (nil for an indented block
+      # or a bare fence): the highlighter drops it from the HTML, the parse tree
+      # has it. [] for a text with no fence: its blocks have no language.
+      def fence_languages(markdown)
+        return [] unless markdown.include?("```") || markdown.include?("~~~")
+
+        languages = []
+        Commonmarker.parse(markdown, options: OPTIONS).walk do |node|
+          languages << language_of(node.fence_info) if node.type == :code_block
+        end
+        languages
+      end
+
+      def language_of(info)
+        word = info.to_s.split.first.to_s.downcase
+        word if word.match?(BlockRenderers::LANG)
+      end
+
+      # After the walk, which drops every attribute it doesn't know. Blocks and
+      # languages pair by position; a count that differs says the two parses
+      # disagree, and then no block gets one (it shows as source).
+      def mark_languages(fragment, languages)
+        blocks = fragment.css("pre")
+        return unless blocks.size == languages.size
+
+        blocks.zip(languages) { |pre, language| pre["data-lang"] = language if language }
+      end
+
+      def sanitize(html, languages)
         fragment = Nokogiri::HTML5.fragment(html)
         fragment.traverse do |node|
           next unless node.element?
@@ -90,6 +122,7 @@ module Samagotchi
             sanitize_attributes(node)
           end
         end
+        mark_languages(fragment, languages)
         fragment.to_html
       end
 

data/lib/samagotchi/web/message_display.rb

@@ -59,7 +59,7 @@ module Samagotchi
         return nil unless saved
 
         messages = Array(session.messages)
-        since = messages.drop(saved[:covered].to_i).count { |m| Samagotchi::Steer.turn_prompt?(m) }
+        since = messages.drop(saved[:covered].to_i).count { |m| Samagotchi::Steer.turn_opening?(m) }
         { text: saved[:text], turns_since: since, created_at: saved[:created_at] }.compact
       rescue StandardError
         nil
@@ -288,8 +288,8 @@ module Samagotchi
       end
 
       # As JSON has them (string keys and values), like a snapshot's.
-      def saved_cards(id)
-        JSON.parse(JSON.generate(Samagotchi::Bridge::CardStore.saved(Session.session_dir(id, state_dir: default_state_dir))))
+      def saved_cards(id, messages: nil)
+        JSON.parse(JSON.generate(Samagotchi::Bridge::CardStore.saved(Session.session_dir(id, state_dir: default_state_dir), messages: messages)))
       rescue StandardError
         []
       end

data/lib/samagotchi/web/participant_view.rb

@@ -85,7 +85,7 @@ module Samagotchi
         llm_context_edited merged_input objectives_updated participants_changed pending_input_merged plugin_init_finished
         plugin_init_started plugin_init_wait prompt_restored question question_relay reasoning_history_refused
         recap_ready reminder_injected sampling_refused session_end session_start side_usage steer_cut thinking_dropped
-        thinking_refused tool_dispatch_completed tool_dispatch_started turn_rolled_back used_memories_updated working_set_updated
+        thinking_refused tool_dispatch_completed tool_dispatch_started used_memories_updated working_set_updated
       ].freeze
 
       # A merged input line's saved sources a participant sees: a person's

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

@@ -71,6 +71,7 @@ import { createAnnotateBar } from "./annotate_bar.js";
 import { VERIFY_PRESET, VERIFY_UNAVAILABLE, verifyWorkerUnavailable, withVerify } from "./verify_preset.js";
 import { OWNER_FINAL, verifyTurnOf } from "./verify_target.js";
 import { actionLine, annotationActions, composerWithAction } from "./annotate_actions.js";
+import { createBlockHost } from "./block_host.js";
 import { copyText, installCopy } from "./copy.js";
 import { installAnswerFold, sweepAnswerFolds } from "./answer_fold.js";
 import { installDetailsMotion } from "./details_motion.js";
@@ -2119,6 +2120,7 @@ historyEl.addEventListener("click", (e) => {
 });
 turnDom.scrollEl.addEventListener("scroll", annotateBar.schedule, true);
 turnRoots().forEach((root) => installCopy(root));
+createBlockHost({ roots: turnRoots(), sessionId: () => store.selected });
 // A steps block, a thinking block and the recap open and close by hand
 // with their height animated (details_motion.js), in the history and on
 // the stage.

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

@@ -0,0 +1,202 @@
+// One language's renderer in a hidden sandboxed frame: a bundle's JS, whose
+// input is model-written, must not reach a page that controls sessions. The
+// layers and rules are docs/internals/block-renderers.md.
+//
+// `sandbox="allow-scripts"`, never allow-same-origin. The frame has no network
+// and no cookie, so its code comes by postMessage from the page's own
+// authenticated fetch and enters as `script.text` (eval doesn't work: a library's
+// "use strict" keeps its global local; a syntax error doesn't throw, it reaches
+// the frame's error event). The protocol, the handshake first:
+//
+//   frame → loaded, page → code {files}, frame → ready | failed {message}
+//   page → render {id, source, theme}, frame → done {id, svg} | error {id, message}
+//
+// One render at a time. A timer can't fire while the renderer hangs (the frame
+// shares the page's thread): block_host.js's mark is for that.
+//
+// A module of its own: static JS is cached at unversioned URLs.
+
+// Same words as the spike that tested them; the page's frame-src 'none' covers
+// what this doesn't (navigation).
+export const FRAME_CSP = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; form-action 'none'";
+export const FRAME_TIMEOUT_MS = 15000;
+// An SVG this size isn't a diagram anyone reads, and it would sit in the DOM.
+export const MAX_SVG_CHARS = 8 * 1024 * 1024;
+
+// Runs in the frame, before any bundle code. CSP doesn't stop WebRTC, so its
+// constructors go (a nested srcdoc frame gets a fresh one: the residual risk,
+// docs/internals/block-renderers.md).
+const BOOTSTRAP = `(() => {
+  delete window.RTCPeerConnection;
+  delete window.webkitRTCPeerConnection;
+  const send = (m) => parent.postMessage(m, "*");
+  const words = (e) => String((e && e.message) || e).split("\\n")[0].slice(0, 300);
+  let renderer = null;
+  let loadError = null;
+  window.chi = { defineRenderer(r) { renderer = r; } };
+  addEventListener("error", (e) => { loadError = loadError || words(e.message || e.error); });
+  async function load(files) {
+    for (const code of files) {
+      const tag = document.createElement("script");
+      tag.text = code;
+      document.head.append(tag);
+      tag.remove();
+      if (loadError) return send({ type: "failed", message: loadError });
+    }
+    if (!renderer || typeof renderer.render !== "function") return send({ type: "failed", message: "no chi.defineRenderer" });
+    try { await (renderer.init && renderer.init()); } catch (e) { return send({ type: "failed", message: words(e) }); }
+    send({ type: "ready" });
+  }
+  async function render(m) {
+    try {
+      const svg = await renderer.render(m.source, m.theme);
+      if (typeof svg !== "string") throw new Error("the renderer returned no SVG");
+      send({ type: "done", id: m.id, svg });
+    } catch (e) {
+      send({ type: "error", id: m.id, message: words(e) });
+    }
+  }
+  addEventListener("message", (e) => {
+    if (e.source !== parent) return;
+    if (e.data.type === "code") load(e.data.files);
+    else if (e.data.type === "render") render(e.data);
+  });
+  send({ type: "loaded" });
+})();`;
+
+export function frameSrcdoc() {
+  return `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="${FRAME_CSP}"><script>${BOOTSTRAP}<\/script></head><body></body></html>`;
+}
+
+const TYPES = new Set(["loaded", "ready", "failed", "done", "error"]);
+
+// What +event+ says, or null: only +frameWindow+'s, of a known type, and read
+// as data from here on (rule 3). No other window `message` listener exists on
+// this page, so this is the only receiver.
+export function frameMessage(event, frameWindow) {
+  if (!frameWindow || event.source !== frameWindow) return null;
+  const data = event.data;
+  if (!data || typeof data !== "object" || !TYPES.has(data.type)) return null;
+  return data;
+}
+
+// A reason a render or load failed. +timedOut+: the page's timer fired, so the
+// block is suspect (block_host.js keeps its mark); +dropped+: the page let the
+// frame go, which says nothing of the block.
+export class FrameError extends Error {
+  constructor(message, { timedOut = false, dropped = false, load = false } = {}) {
+    super(message);
+    this.timedOut = timedOut;
+    this.dropped = dropped;
+    this.load = load;
+  }
+}
+
+// @param files the renderer's file names, in load order
+// @param fetchFile (file) => a promise of its text (block_host.js fetchRendererFile)
+// @return {render(source, theme, {onStart}) → Promise<svg>, drop(), dead()}
+export function createBlockFrame({ files, fetchFile, doc = document, win = window, timeoutMs = FRAME_TIMEOUT_MS }) {
+  const iframe = doc.createElement("iframe");
+  iframe.setAttribute("sandbox", "allow-scripts");
+  iframe.setAttribute("aria-hidden", "true");
+  iframe.setAttribute("tabindex", "-1");
+  // Off-screen, not display:none: a renderer's layout measures text in it.
+  iframe.style.cssText = "position:fixed;left:-10000px;top:0;width:1000px;height:800px;border:0";
+
+  let dead = false;
+  let nextId = 0;
+  // What the frame is being waited for: {type?, id?, resolve, reject, timer}.
+  let waiting = null;
+
+  function die(error) {
+    if (dead) return;
+    dead = true;
+    win.removeEventListener("message", onMessage);
+    iframe.remove();
+    settle((w) => w.reject(error));
+  }
+
+  function settle(answer) {
+    const w = waiting;
+    waiting = null;
+    if (!w) return;
+    clearTimeout(w.timer);
+    answer(w);
+  }
+
+  // The frame's next answer, bounded.
+  function answer(what, loadStage = false) {
+    if (dead) return Promise.reject(new FrameError("the frame is gone", { dropped: true }));
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => die(new FrameError(`timed out (${what})`, { timedOut: !loadStage, load: loadStage })), timeoutMs);
+      waiting = { what, resolve, reject, timer, loadStage };
+    });
+  }
+
+  let loadedSeen = null;
+  function onMessage(event) {
+    const m = frameMessage(event, iframe.contentWindow);
+    if (!m) return;
+    if (m.type === "loaded") { loadedSeen?.(); return; }
+    if (!waiting) return;
+    if (m.type === "ready" && waiting.what === "ready") settle((w) => w.resolve());
+    else if (m.type === "failed" && waiting.what === "ready") {
+      settle((w) => w.reject(new FrameError(String(m.message ?? "load failed"), { load: true })));
+    } else if (m.type === "done" && m.id === waiting.id) {
+      if (typeof m.svg !== "string" || m.svg.length > MAX_SVG_CHARS) settle((w) => w.reject(new FrameError("the renderer's SVG is too large or not text")));
+      else settle((w) => w.resolve(m.svg));
+    } else if (m.type === "error" && m.id === waiting.id) {
+      settle((w) => w.reject(new FrameError(String(m.message ?? "render failed"))));
+    }
+  }
+
+  const loaded = new Promise((resolve) => { loadedSeen = resolve; });
+  win.addEventListener("message", onMessage);
+  iframe.srcdoc = frameSrcdoc();
+  doc.body.append(iframe);
+
+  async function load() {
+    const texts = await Promise.all(files.map((file) => fetchFile(file)));
+    const handshake = answer("load", true);
+    loaded.then(() => {
+      // Stop waiting on the handshake's own timer and start the code's.
+      if (dead) return;
+      settle((w) => w.resolve());
+    });
+    await handshake;
+    const ready = answer("ready", true);
+    iframe.contentWindow.postMessage({ type: "code", files: texts }, "*");
+    await ready;
+  }
+
+  const ready = load().catch((e) => {
+    const error = e instanceof FrameError ? e : new FrameError(String(e?.message || e), { load: true });
+    die(error);
+    throw error;
+  });
+  // One render at a time, whatever the last one came to.
+  let queue = ready.catch(() => {});
+
+  function render(source, theme, { onStart = () => {} } = {}) {
+    const run = async () => {
+      await ready;
+      if (dead) throw new FrameError("the frame is gone", { dropped: true });
+      onStart();
+      const id = ++nextId;
+      const done = answer(`render ${id}`);
+      waiting.id = id;
+      iframe.contentWindow.postMessage({ type: "render", id, source, theme }, "*");
+      return done;
+    };
+    const result = queue.then(run);
+    queue = result.catch(() => {});
+    return result;
+  }
+
+  return {
+    ready,
+    render,
+    dead: () => dead,
+    drop: () => die(new FrameError("dropped", { dropped: true })),
+  };
+}