samagotchi 0.26.0 → 0.28.0

data/lib/samagotchi/web/app.rb

@@ -139,6 +139,7 @@ module Samagotchi
         ["GET", %r{\A/api/sessions/([^/]+)/stream\z}, :handle_stream],
         ["GET", %r{\A/api/sessions/([^/]+)/output\z}, :handle_output],
         ["POST", %r{\A/api/sessions/([^/]+)/cancel\z}, :handle_cancel],
+        ["POST", %r{\A/api/sessions/([^/]+)/tasks/([^/]+)/stop\z}, :handle_task_stop],
         ["POST", %r{\A/api/sessions/([^/]+)/stop\z}, :handle_stop],
         ["POST", %r{\A/api/sessions/([^/]+)/restart\z}, :handle_restart],
         ["POST", %r{\A/api/sessions/([^/]+)/archive\z}, :handle_archive],
@@ -1019,6 +1020,30 @@ module Samagotchi
         error_response(404, "not_found", e.message)
       end
 
+      # A task id as TaskRuntime.generate_task_id makes it.
+      TASK_ID = /\A\d{14}-\h{8}\z/
+
+      # The stop-task button: the worker stops the task as the user
+      # (Bridge#handle_task_stop) and its task_wait returns. Its own 404
+      # (not this conversation's task) and 409 (already ended) pass through;
+      # a 404 from a worker without the route is the stale worker's 501.
+      def handle_task_stop(_req, id, task_id)
+        return error_response(400, "invalid_task_id", "not a task id: #{task_id.to_s[0, 80]}") unless TASK_ID.match?(task_id)
+
+        @session_class.load(id, state_dir: default_state_dir)
+        request = ->(client) { client.stop_task(task_id) }
+        relay(id, bridge_client(id), request, what: "the task was not stopped", cant: "stop tasks") do |reply|
+          body = reply.json || {}
+          case reply.status
+          when 200 then json_response(200, { status: body["status"], stop_reason: body["stop_reason"], task_id: task_id, session_id: id })
+          when 404 then (error_response(404, "task_not_found", "no task #{task_id} in this conversation") if body["error"] == "task_not_found")
+          when 409 then json_response(409, { error: "not_running", status: body["status"], task_id: task_id, session_id: id })
+          end
+        end
+      rescue ArgumentError => e
+        error_response(404, "not_found", e.message)
+      end
+
       def handle_stop(_req, id)
         # Bounded, so a Rack thread isn't held long; a worker still exiting
         # after it just means an immediate resume finds it (rare).

data/lib/samagotchi/web/markdown_renderer.rb

@@ -8,7 +8,7 @@ module Samagotchi
     class MarkdownRenderer
       WARNING = "Markdown rendering is enabled, but the optional commonmarker gem is not installed. Install it with: gem install commonmarker"
       # NOTE: `span` is allowed because the syntax highlighter (commonmarker/syntect)
-      # emits inline-styled <span>s; keeping it lets highlighting render.
+      # emits classed <span>s; keeping it lets highlighting render.
       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
@@ -35,6 +35,11 @@ module Samagotchi
         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: {
+          # 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).
+          syntax_highlighter: { theme: "" }
         })
         return nil unless html
 
@@ -74,6 +79,7 @@ module Samagotchi
 
           node.remove_attribute(attribute.name)
         end
+        prefix_highlight_classes(node) if node.name == "span"
         return unless node.name == "a"
 
         href = node["href"].to_s.strip
@@ -85,16 +91,25 @@ module Samagotchi
         node["rel"] = "noopener noreferrer"
       end
 
-      # The syntax highlighter emits inline `style=` on <span>/<pre>/<code>. Those
-      # values come from the (trusted) theme, not user input, and raw HTML from the
-      # markdown source is already escaped by commonmarker (escape: true), so style
-      # attributes are safe to keep on these elements only.
+      # The syntax highlighter emits `class=` on <pre> ("syntax-highlighting") and
+      # <span> (syntect scope names). They come from the highlighter, not user input:
+      # raw HTML from the markdown source is already escaped by commonmarker
+      # (escape: true), so class attributes are safe to keep on these elements only.
       def allowed_attribute?(node, name)
-        return true if name == "style" && %w[span pre code].include?(node.name)
+        return true if name == "class" && %w[span pre].include?(node.name)
 
         node.name == "a" && %w[href title].include?(name)
       end
 
+      # Scope names are plain words ("diff", "meta", "name", ...) that page CSS and
+      # querySelectors use too: prefix them so they only ever match the hl-* rules.
+      def prefix_highlight_classes(node)
+        words = node["class"].to_s.split
+        return node.remove_attribute("class") if words.empty?
+
+        node["class"] = words.map { |word| "hl-#{word}" }.join(" ")
+      end
+
       def safe_href?(href)
         return true if href.start_with?("#", "/")
 

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

@@ -23,6 +23,7 @@ import { chipName, chipsHtml, imageFiles, restoredChips, thumbsHtml, turnRefs, t
 import { escapeHtml, memChipText, memChipTitle, noteHtml, normalize, steerRowHtml, userBodyHtml, ownerBadge, previewForCard, relativeTime, failedTurnText, modelLabel, deleteConfirmText, recapLabel, canStopSession, goneSessionNotice, withLiveStatus, withoutWorker, recapPlace, delegatedBy } from "./format.js";
 import { EMPTY_ANSWER_CLASS, createTurnView, turnHistoryHtml } from "./turn_view.js";
 import { createStageView } from "./stage_view.js";
+import { createTaskStopper } from "./task_stop.js";
 import { appendQuote } from "./annotations.js";
 import { parsePresets } from "./annotate_presets.js";
 import { createAnnotateBar } from "./annotate_bar.js";
@@ -86,6 +87,9 @@ const viewArgs = {
   isNearBottom: () => isNearBottom(),
   sawText: (k) => seenContent.add(k),
   sessionId: () => selected,
+  // The stop-task button on a running task_wait, for a worker that has
+  // the route (its sidecar features).
+  taskStop: createTaskStopper({ sessionId: () => selected, features: () => current.workerFeatures }),
 };
 const turnDom = view === "stage"
   ? createStageView({ ...viewArgs, isNearBottom: () => atHistoryEnd(), dockEl: $("#dock"), centerEl: $("#center"), composerEl })

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

@@ -123,6 +123,17 @@ export function stopSession(id, opts = {}) {
   return api(`/api/sessions/${id}/stop`, { method: "POST", body: JSON.stringify({}), ...opts });
 }
 
+// Kills a background task the session's conversation started (the
+// stop-task button): 200 {status, stop_reason}; 409 it already ended, 503
+// no live worker.
+export function stopTask(id, taskId, opts = {}) {
+  return api(`/api/sessions/${encodeURIComponent(id)}/tasks/${encodeURIComponent(taskId)}/stop`, {
+    method: "POST",
+    body: JSON.stringify({}),
+    ...opts,
+  });
+}
+
 // Hands the session to a new worker on the newest chi installed: 200
 // {status, from_version, version}, or 409 with the reason in words (detail).
 export function restartSession(id, opts = {}) {

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

@@ -8,11 +8,13 @@
 :root{color-scheme:dark;--bg:#0b0d11;--bg-panel:#151821;--bg-inset:#0f1115;--bg-raised:#22262f;--bg-hover:#1b1f27;--border:#1f232b;--border-strong:#2d333f;--text:#e6e8eb;--text-bright:#f0f3f6;--text-2:#c9d1d9;--text-3:#9aa4b2;--text-muted:#8b949e;--text-faint:#6e7681;--accent:#7aa5ff;--accent-strong:#1f6feb;--accent-bg:#1b2336;--accent-ring:rgba(122,165,255,.18);--primary:#2a68d1;--ok:#3fb950;--ok-text:#7ee787;--ok-bg:#1a2e1a;--warn:#d29922;--warn-text:#e3b341;--warn-bright:#f2cc60;--warn-bg:#2b2108;--warn-border:#6b5416;--danger:#f85149;--danger-bg:#da3633;--danger-text:#ff7b72;--danger-bg-dim:#3d1f1f;--think:#8957e5;--think-text:#d2a8ff;--accent-border:#223150;--accent-tint:color-mix(in srgb,var(--accent) 7%,transparent);--narr:color-mix(in srgb,var(--accent) 38%,var(--text-muted));
   --glass-bg:color-mix(in srgb,var(--bg-panel) 70%,transparent);--glass-border:rgba(255,255,255,.08);--glass-highlight:rgba(255,255,255,.05);--glass-shadow:0 8px 30px rgba(0,0,0,.35);
   --diff-add-bg:rgba(63,185,80,.14);--diff-add-text:#aff5b4;--diff-del-bg:rgba(248,81,73,.14);--diff-del-text:#ffc1bc;
+  --code-text:#c9d1d9;--code-keyword:#ff7b72;--code-string:#a5d6ff;--code-comment:#8b949e;--code-constant:#79c0ff;--code-func:#d2a8ff;--code-type:#ffa657;
   --card-hover-border:rgba(255,255,255,.14);--on-solid:#fff;--on-warn:#fff;--text-hover:#fff;--badge-bg:rgba(255,255,255,.08);--badge-ring:rgba(255,255,255,.18);--shadow-strong:rgba(0,0,0,.5);--backdrop:rgba(0,0,0,.85);--toast-shadow:0 6px 24px rgba(0,0,0,.25)}
 /* Light palette: follows the system setting. :not([data-theme="dark"]) leaves room for a later in-page toggle (data-theme on <html>); there is none yet. Each palette sets color-scheme, so native radios, inputs and scrollbars follow it. */
 @media (prefers-color-scheme:light){:root:not([data-theme="dark"]){color-scheme:light;--bg:#f5f6f8;--bg-panel:#ffffff;--bg-inset:#f1f3f6;--bg-raised:#e8ebf0;--bg-hover:#eceff4;--border:#dde1e7;--border-strong:#c3c9d2;--text:#1f2328;--text-bright:#0d1117;--text-2:#2f363d;--text-3:#475160;--text-muted:#57606a;--text-faint:#636c76;--accent:#0b5cd5;--accent-strong:#0550ae;--accent-bg:#e2ecfd;--accent-ring:rgba(11,92,213,.2);--primary:#1f6feb;--ok:#1a7f37;--ok-text:#116329;--ok-bg:#dafbe1;--warn:#9a6700;--warn-text:#7d4e00;--warn-bright:#875c00;--warn-bg:#fff6cc;--warn-border:#d4a72c;--danger:#cf222e;--danger-bg:#cf222e;--danger-text:#a40e26;--danger-bg-dim:#ffebe9;--think:#8250df;--think-text:#6639ba;--accent-border:#b8cef5;
   --glass-border:rgba(31,35,40,.10);--glass-highlight:rgba(255,255,255,.7);--glass-shadow:0 8px 30px rgba(31,35,40,.10);
   --diff-add-bg:rgba(26,127,55,.12);--diff-add-text:#116329;--diff-del-bg:rgba(207,34,46,.10);--diff-del-text:#82071e;
+  --code-text:#1f2328;--code-keyword:#cf222e;--code-string:#0a3069;--code-comment:#57606a;--code-constant:#0550ae;--code-func:#8250df;--code-type:#953800;
   --card-hover-border:rgba(31,35,40,.18);--on-solid:#fff;--on-warn:#1f2328;--text-hover:#0d1117;--badge-bg:rgba(31,35,40,.06);--badge-ring:rgba(31,35,40,.15);--shadow-strong:rgba(31,35,40,.18);--backdrop:rgba(13,17,23,.85);--toast-shadow:0 6px 24px rgba(31,35,40,.14)}}
 *{box-sizing:border-box;margin:0;padding:0}
 body{font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1100px 700px at 8% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),radial-gradient(900px 700px at 100% 100%,color-mix(in srgb,var(--think) 9%,transparent),transparent 70%),var(--bg);background-attachment:fixed;color:var(--text);height:100vh;display:flex;flex-direction:column}
@@ -62,6 +64,18 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .bubble.output.markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
 .bubble.output.markdown :not(pre)>code{background:var(--bg-inset);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text)}
 .bubble.output.markdown pre{font-size:13px;line-height:1.45;border:1px solid var(--border)}
+/* Code highlighting (markdown_renderer.rb): syntect scope classes, hl-prefixed, coloured from the palette's --code-* tokens. More classes win over fewer (a function name is also "entity"). */
+.syntax-highlighting{color:var(--code-text)}
+.syntax-highlighting .hl-keyword,.syntax-highlighting .hl-storage{color:var(--code-keyword)}
+.syntax-highlighting .hl-string{color:var(--code-string)}
+.syntax-highlighting .hl-string .hl-embedded{color:var(--code-text)}
+.syntax-highlighting .hl-constant{color:var(--code-constant)}
+.syntax-highlighting .hl-entity.hl-name.hl-function,.syntax-highlighting .hl-support.hl-function{color:var(--code-func)}
+.syntax-highlighting .hl-entity.hl-name.hl-class,.syntax-highlighting .hl-entity.hl-name.hl-type,.syntax-highlighting .hl-entity.hl-other.hl-inherited-class,.syntax-highlighting .hl-support.hl-class,.syntax-highlighting .hl-support.hl-type,.syntax-highlighting .hl-meta.hl-diff.hl-range{color:var(--code-type)}
+.syntax-highlighting .hl-comment{color:var(--code-comment);font-style:italic}
+.syntax-highlighting .hl-markup.hl-inserted{color:var(--diff-add-text)}
+.syntax-highlighting .hl-markup.hl-deleted{color:var(--diff-del-text)}
+.syntax-highlighting .hl-invalid{color:var(--danger-text)}
 .bubble.output.markdown h1,.bubble.output.markdown h2,.bubble.output.markdown h3,.bubble.output.markdown h4,.bubble.output.markdown h5,.bubble.output.markdown h6{font-weight:600;line-height:1.3;margin:18px 0 8px;color:var(--text-bright)}
 .bubble.output.markdown h1{font-size:19px}
 .bubble.output.markdown h2{font-size:17px}
@@ -122,6 +136,11 @@ main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;overflow:au
 .activity-status.stopped{color:var(--warn-text);opacity:.8}
 .activity-status.blocked{color:var(--danger-text)}
 .activity-tool{color:var(--accent);font-weight:600}
+/* The stop-task button on a running task_wait (task_stop.js): a small ghost
+   button in the danger colours, at the row's end and in the stage's now slot. */
+button.task-stop{flex:none;margin-left:auto;padding:1px 8px;border:1px solid color-mix(in srgb,var(--danger) 45%,transparent);border-radius:6px;background:transparent;color:var(--danger-text);font-size:11.5px;line-height:18px;white-space:nowrap}
+button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:none}
+.ts-now button.task-stop{align-self:center}
 .activity-params{color:var(--text-muted);word-break:break-all}
 .activity-duration{color:var(--text-faint);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
 .activity-output{margin:4px 0 2px 60px;font-size:12px;color:var(--text-muted);white-space:pre-wrap;word-break:break-word;background:var(--bg);border-radius:6px;padding:6px 8px;max-height:160px;overflow:auto}

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

@@ -85,6 +85,12 @@ function withCommand(slot, row) {
   return row.view?.command ? { ...slot, command: row.view.command } : slot;
 }
 
+// A running task_wait's slot: the task it waits on and the row's key, for
+// the stop-task button (task_stop.js).
+function withTask(slot, row) {
+  return row.tool === "task_wait" && row.view?.task_id ? { ...slot, taskId: row.view.task_id, key: row.key } : slot;
+}
+
 // While the first step has no thinking and no tool rows the turn is plain:
 // its text streams in the stage's answer slot, as the turn view's
 // chrome-less block streams like a bubble.
@@ -106,7 +112,7 @@ const NO_ANSWER = "no answer";
 //            feed), else the newest thinking one (+thinking+, its ticker),
 //            else "…";
 //   tool     the running call ({name, title, kind}, and command: its full
-//            command when it has one) or null;
+//            command when it has one; taskId and key: a task_wait's) or null;
 //   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)}.
@@ -137,7 +143,7 @@ export function liveSlots(turn, { narration = "", thinking = "", pending = false
     phase,
     step: ended ? gens.filter((g) => !g.answer || g.thinking || g.tools.length).length : gens.length,
     headline,
-    tool: running ? withCommand({ name: toolName(running), title: rowTitle(running), kind: toolKind(running.tool) }, running) : null,
+    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 })),
   };

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

@@ -13,6 +13,7 @@
 import { createTurnView } from "./turn_view.js";
 import { flashOf, handOffDue, handOffOrder, headlineOf, inUseFrom, isPlain, liveSlots, placeFor } from "./stage_model.js";
 import { formatDuration } from "./timing.js";
+import { taskCommand, taskStopButton } from "./task_stop.js";
 
 const COLLAPSE_KEY = "chi_stage_collapsed";
 const WATCH_MS = 200;
@@ -45,7 +46,9 @@ function readCollapsed() {
 // +historyNearBottom+: the history's own follow check (the hand-off scrolls
 // the history only for a reader at its end). +dockEl+, +centerEl+ and
 // +composerEl+ size the stage's cap.
-export function createStageView({ historyEl, appendToHistory, isNearBottom: historyNearBottom, sawText, sessionId, dockEl, centerEl, composerEl }) {
+// +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 }) {
   // 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");
@@ -131,6 +134,7 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
     },
     useHold: false,
     newestFirst: true,
+    taskStop,
     onChange: () => scheduleRefresh(),
     onThinkingLine: (text) => {
       const { turn } = view.current();
@@ -223,7 +227,11 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
 
   function drawNow(tool, gen) {
     const quiet = gen?.text && !gen.textDone ? "writing…" : "thinking…";
-    const key = tool ? `run|${tool.name}|${tool.title}|${tool.command || ""}` : `quiet|${quiet}`;
+    // A task_wait's stop button, as the row's (task_stop.js): in the key
+    // with its in-flight state, so a redraw keeps a clicked one disabled.
+    const stopId = tool?.taskId && taskStop?.target({ tool: "task_wait", status: "running", view: { task_id: tool.taskId } });
+    const stopKey = stopId ? `|stop:${tool.key}:${taskStop.busy(stopId)}` : "";
+    const key = tool ? `run|${tool.name}|${tool.title}|${tool.command || ""}${stopKey}` : `quiet|${quiet}`;
     if (shown.now === key) return;
     shown.now = key;
     now.replaceChildren();
@@ -236,6 +244,10 @@ export function createStageView({ historyEl, appendToHistory, isNearBottom: hist
       title.textContent = tool.title;
       // The full command when the call has one (the title is its first step +N).
       title.title = tool.command || tool.title;
+      if (stopId) {
+        const command = () => taskCommand(view.current().turn?.gens, stopId);
+        now.appendChild(taskStopButton(taskStop, stopId, { command, onChange: scheduleRefresh }));
+      }
     } else {
       const word = node("span", "ts-title quiet", now);
       word.textContent = quiet;

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

@@ -0,0 +1,124 @@
+// The stop-task button on a running task_wait (POST …/tasks/:task_id/stop,
+// Bridge#handle_task_stop): the worker kills the task as the user, the wait
+// returns, and the turn goes on. Which row gets one, what the confirm says,
+// and the stops in flight. The in-flight set lives here, not in the DOM:
+// the stage rebuilds its "now" slot, and a redraw must keep a clicked
+// button disabled. Pure but for the injected calls, so `node --test`
+// covers it; turn_view.js and stage_view.js draw the button.
+import { stopTask as postStopTask } from "./data.js";
+
+// What a worker that has the route names in its sidecar features.
+export const TASK_STOP_FEATURE = "task_stop";
+const COMMAND_SHOWN = 120;
+
+// The task a row's button would stop: a running task_wait's (its server
+// view's task_id), on a worker that has the route; else null.
+export function stopTarget(row, features) {
+  if (!row || row.tool !== "task_wait" || row.status !== "running") return null;
+  if (!Array.isArray(features) || !features.includes(TASK_STOP_FEATURE)) return null;
+  return row.view?.task_id || null;
+}
+
+// The command a task_create of this turn started +taskId+ with (its row's
+// view), or null: a task from an earlier turn has no row here.
+export function taskCommand(gens, taskId) {
+  for (const gen of gens || []) {
+    for (const row of gen.tools || []) {
+      if (row.tool !== "task_create") continue;
+      const id = /(?:^|\n)task_id: (\S+)/.exec(row.output || "")?.[1];
+      if (id === taskId) return row.view?.command || null;
+    }
+  }
+  return null;
+}
+
+export function confirmText(taskId, command) {
+  const line = String(command || "").replace(/\s+/g, " ").trim();
+  const what = !line ? taskId : line.length > COMMAND_SHOWN ? `${line.slice(0, COMMAND_SHOWN - 1)}…` : line;
+  return `Stop task ${what}?`;
+}
+
+// A failed stop said nothing about: 409 (the task ended meanwhile), 503
+// (no live worker: it can't be stopped now).
+export function quietFailure(error) {
+  return error?.status === 409 || error?.status === 503;
+}
+
+// +sessionId+ and +features+ are read at each call (the selected session,
+// its worker's sidecar features).
+export function createTaskStopper({
+  sessionId,
+  features,
+  stopTask = postStopTask,
+  confirm = (text) => globalThis.confirm(text),
+  alert = (text) => globalThis.alert(text),
+}) {
+  const inFlight = new Set();
+  const watchers = new Map(); // key -> Set of fn(busy)
+  const keyOf = (taskId) => `${sessionId()}|${taskId}`;
+  const notify = (key, busy) => watchers.get(key)?.forEach((fn) => fn(busy));
+  return {
+    target: (row) => stopTarget(row, features()),
+    busy: (taskId) => inFlight.has(keyOf(taskId)),
+    // Call +fn+ whenever a stop for +taskId+ starts or ends (the key enters
+    // or leaves the in-flight set) — the session's own task, on this session.
+    // Returns unwatch. A task drawn in two rows (the stage's "now" slot and
+    // the step list) so both buttons stay in step; a watcher for a button
+    // that is gone unwatches itself.
+    watch(taskId, fn) {
+      const key = keyOf(taskId);
+      let set = watchers.get(key);
+      if (!set) watchers.set(key, (set = new Set()));
+      set.add(fn);
+      return () => set.delete(fn);
+    },
+    // true once the worker stopped it. A stop that went through stays in
+    // flight: the button goes with its row's completion a moment later.
+    async stop(taskId, command = null) {
+      const id = sessionId();
+      const key = keyOf(taskId);
+      if (!id || inFlight.has(key) || !confirm(confirmText(taskId, command))) return false;
+      inFlight.add(key);
+      notify(key, true);
+      try {
+        await stopTask(id, taskId);
+        return true;
+      } catch (e) {
+        inFlight.delete(key);
+        notify(key, false);
+        if (!quietFailure(e)) alert(e.message);
+        return false;
+      }
+    },
+  };
+}
+
+// The button itself (the one DOM part): a click asks, posts, and keeps it
+// disabled while the stop is in flight. +command+ is read at the click;
+// +onChange+ lets a view redraw (the stage's slot). It also watches the
+// task's in-flight state, so a stop started from a second button of the
+// same row (the stage draws one in the "now" slot and one in the step
+// list) disables this one too — a button that is gone unwatched.
+export function taskStopButton(stopper, taskId, { command = () => null, onChange = () => {} } = {}) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = "ghost task-stop";
+  btn.textContent = "stop task";
+  btn.title = "Kill this background task; the model is told you stopped it";
+  btn.disabled = stopper.busy(taskId);
+  const unwatch = stopper.watch?.(taskId, (busy) => {
+    if (!btn.isConnected) { unwatch(); return; }
+    btn.disabled = busy;
+  });
+  btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const pending = stopper.stop(taskId, command());
+    btn.disabled = stopper.busy(taskId);
+    onChange();
+    pending.then(() => {
+      btn.disabled = stopper.busy(taskId);
+      onChange();
+    });
+  });
+  return btn;
+}

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

@@ -23,6 +23,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 { taskCommand, taskStopButton } from "./task_stop.js";
 
 // A row's status (live, or a saved tool record's on reload): running,
 // error, stopped (a task_wait the user's Stop ended), blocked (a guardrail
@@ -90,7 +91,9 @@ function fillActivityRow(el, row, sessionId) {
 //                  (chronological() restores the order);
 //   onChange()     after anything in the turn changed (the stage redraws
 //                  its slots from current());
-//   onThinkingLine(sentence) the live step's ticker showed a new line.
+//   onThinkingLine(sentence) the live step's ticker showed a new line;
+//   taskStop       the page's stopper (task_stop.js): a running task_wait
+//                  row gets its stop-task button (none: no button).
 export function createTurnView({
   historyEl, appendToHistory, isNearBottom, sawText, sessionId,
   blockHost = appendToHistory,
@@ -100,6 +103,7 @@ export function createTurnView({
   newestFirst = false,
   onChange = () => {},
   onThinkingLine = () => {},
+  taskStop = null,
 }) {
   let turn = null;
   let blockEl = null;
@@ -407,14 +411,33 @@ export function createTurnView({
       const stick = isNearBottom();
       body.appendChild(el);
       fillActivityRow(el, r.row, sessionId());
+      syncTaskStop(el, r.row);
       if (stick) follow();
     } else {
       fillActivityRow(el, r.row, sessionId());
+      syncTaskStop(el, r.row);
     }
     updateBlockSummary();
     onChange();
   }
 
+  // The stop-task button after a running task_wait's params; gone once the
+  // row completes.
+  function syncTaskStop(el, row) {
+    const taskId = taskStop?.target(row);
+    const btn = el.querySelector(":scope > .task-stop");
+    if (!taskId) {
+      btn?.remove();
+      return;
+    }
+    if (btn) {
+      btn.disabled = taskStop.busy(taskId);
+      return;
+    }
+    const command = () => taskCommand(turn?.gens, taskId);
+    el.querySelector(".activity-params").after(taskStopButton(taskStop, taskId, { command }));
+  }
+
   // A hook's line (hook_notice) as a row of the current step, above the row
   // of the call it judged; false with no running turn (app.js shows the
   // bubble then). data.line is a whole row of chi's own (an empty-answer

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: samagotchi
 version: !ruby/object:Gem::Version
-  version: 0.26.0
+  version: 0.28.0
 platform: ruby
 authors:
 - Dmitry Dedov
@@ -471,6 +471,7 @@ files:
 - lib/samagotchi/web/public/stage_view.js
 - lib/samagotchi/web/public/strip.js
 - lib/samagotchi/web/public/tally.js
+- lib/samagotchi/web/public/task_stop.js
 - lib/samagotchi/web/public/thinking_ticker.js
 - lib/samagotchi/web/public/timing.js
 - lib/samagotchi/web/public/turn_events.js