samagotchi 0.100.0 → 0.101.0

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

@@ -23,6 +23,8 @@ import { createInUseWatch } from "./stage_watch.js";
 import { formatDuration } from "./timing.js";
 import { easeScrollTo } from "./scroll.js";
 import { readStored, writeStored } from "./storage.js";
+import { createWorkingSetRail } from "./working_set_rail.js";
+import { stampRows } from "./working_set_view.js";
 
 const COLLAPSE_KEY = "chi_stage_collapsed";
 // The turn-end read (markdown, answer_display) settles within this, or the
@@ -54,10 +56,12 @@ function readCollapsed() {
 // +composerEl+ size the stage's cap.
 // +taskStop+: the page's stopper (task_stop.js), for the stop-task button
 // on a running task_wait. +renderMarkdown+ and +linkRefs+: the asking
-// slot's markdown read and ref pass (stage_slots.js).
+// slot's markdown read and ref pass (stage_slots.js). +workingSet+: the
+// page's working set (working_set_view.js, web.working_set; null: off): its
+// rail in the live slots, its footprint at the hand-off.
 export function createStageView({
   historyEl, appendToHistory, isNearBottom: historyNearBottom, sawText, sessionId, dockEl, centerEl, composerEl, taskStop = null,
-  renderMarkdown, linkRefs,
+  renderMarkdown, linkRefs, workingSet = 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).
@@ -97,6 +101,16 @@ export function createStageView({
   asking.hidden = true;
   const now = node("div", "ts-now", live);
   const trail = node("div", "ts-trail", live);
+  // The working set's rail: out of the live slots' flow on their right (a
+  // row under the trail in a narrow stage), so it never sets their height.
+  const rail = workingSet
+    ? createWorkingSetRail({ live, stage, onOpen: (el) => workingSet.openTurn(el), onChange: () => scheduleRefresh() })
+    : null;
+  if (rail) {
+    workingSet.setSeen(rail.seenAt);
+    // The server's states change the lines (never the fold): a redraw.
+    workingSet.onServer(() => scheduleRefresh());
+  }
   const extras = node("div", "ts-extras", scroller);
   const answer = node("div", "ts-answer", scroller);
   const tail = node("div", "ts-tail", scroller);
@@ -324,6 +338,11 @@ export function createStageView({
     slotsView.drawNow(slots.tool, slots.quiet);
     slotsView.drawTrail(slots.trail, flash);
     slotsView.drawTicks(slots.ticks);
+    if (rail) {
+      const { items, ordinal } = workingSet.liveItems(turn, promptWords());
+      stampRows(blockEl, turn, ordinal);
+      rail.draw(items, { ctxPct: workingSet.ctxPct() });
+    }
     const calls = slots.ticks.length;
     // An ended turn says each thing once: its steps in the chip (the label
     // of what the cloud holds), its time in the status row's timing line
@@ -348,6 +367,13 @@ export function createStageView({
     tail.hidden = !tail.firstChild;
   }
 
+  // The prompt's first words (the working set's session tags say whose
+  // turn a step was).
+  function promptWords() {
+    const text = (promptSlot.querySelector(".user-message")?.textContent || "").replace(/\s+/g, " ").trim();
+    return text.length > 60 ? `${text.slice(0, 59)}\u2026` : text;
+  }
+
   // The next step: the live slots' waiting height is let go. In a turn
   // with the question room that height was the whole reply's: it goes as
   // far as the stage's scroll absorbs it (the scroll moves up by as much,
@@ -539,6 +565,7 @@ export function createStageView({
   function emptySlots() {
     for (const slot of [promptSlot, extras, answer, tail, cloudBody, queuedSlot, timingSlot]) slot.replaceChildren();
     slotsView.reset();
+    rail?.reset();
     promptSlot.classList.remove("full");
     thinkingLine = null;
     flash = null;
@@ -584,6 +611,7 @@ export function createStageView({
   }
 
   function release() {
+    workingSet?.release();
     releaseTurn();
     clearStage();
   }
@@ -604,9 +632,13 @@ export function createStageView({
     const { blockEl } = view.current();
     view.chronological();
     const block = blockEl && blockEl.parentNode === cloudBody ? blockEl : null;
+    // The turn's set joins the page's turns (a plain one's too: the turns
+    // keep their places); its footprint goes under the block.
+    const footprint = workingSet ? workingSet.handOff(view.current().turn, promptWords()) : null;
     const pieces = handOffOrder({
       prompt: promptSlot.firstElementChild,
       block,
+      footprint: block ? footprint : null,
       extras: [...extras.children],
       answer: [...answer.children],
       timing: timingSlot.firstElementChild,

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

@@ -17,6 +17,8 @@
 //   liveTurn, turnDom, shownTexts, questionCards, contextChips,
 //   llmContextControl, thinkingControl,
 //   reasoningHistoryControl                 the page's views
+//   workingSet            the stage view's working set (web.working_set),
+//                         null when off
 //   sentIds, earlyRestores                  restore.js's bookkeeping
 //   stream: {takeGuess(), restart()}        the stream was opened from a
 //                         guess (takeGuess: whether, and forget it); restart:
@@ -51,7 +53,7 @@ export function createStreamHandlers(deps) {
   const {
     selected, state, clientId, capabilities, historyEl,
     liveTurn, turnDom, shownTexts, questionCards, contextChips, llmContextControl, thinkingControl, reasoningHistoryControl,
-    sentIds, earlyRestores, stream, composer, getSession,
+    workingSet = null, sentIds, earlyRestores, stream, composer, getSession,
     resync, updateInfoBar, applyPromptOps, showSteers, markRecapStale, setTurnRunning, setLiveStatus, endTurnView,
     appendChunk, readTurnEnd, applyFinalMarkdown, refreshTimingFromSession, makeUserBubble, addEndBubble,
     commandBubble, addCommandBubble, addNoteBubble, findInTurnRoots, setUsedMemories, showRecap,
@@ -307,6 +309,9 @@ export function createStreamHandlers(deps) {
     used_memories_updated: (data) => {
       if (Array.isArray(data.used_memory_names)) setUsedMemories(data.used_memory_names);
     },
+    // The server's working set (WorkingSet), at a request and at turn end;
+    // ignored with web.working_set off.
+    working_set_updated: (data) => { workingSet?.update({ items: data.items, at: data.at }); },
     context_status: (data) => {
       const current = state();
       // After /model (Engine#announce_switched_context!): the new model's

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

@@ -39,6 +39,7 @@ 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";
+import { footprintTemplate, groupItems, stampHistory } from "./working_set_view.js";
 
 // ---- The templates: one step, its thinking, its label ----
 
@@ -71,13 +72,21 @@ function thinkingTemplate({ body, wrapped = true, line = null, cls = "thinking",
 // full text. None when there is nothing to say. A closed step's text is
 // set whole (.textContent): its refs (ref_scan.js) split it into spans
 // that a text part's update would leave behind. +at+: a reloaded step's
-// message index, for its refs (data-answer-at, as an answer's).
-function textTemplate(text, { live, sentences, placeholder, at = null }) {
+// message index, for its refs (data-answer-at, as an answer's). A
+// reloaded step's +rendered+ markdown (its message's html, sanitised on the
+// server, as an answer's) shows in place of the text, which it keeps as
+// its source (stepText); a live step's renders once it closed
+// (markdown_place.js renderStepTexts).
+function textTemplate(text, { live, sentences, placeholder, at = null, rendered = null }) {
   if (live && sentences?.length) {
     return html`<div class="gen-text streaming"><div class="narration">${sentences.map((s) => html`<div class="sentence">${s}</div>`)}</div></div>`;
   }
   if (live) return placeholder ? html`<div class="gen-text streaming">…</div>` : nothing;
-  return text ? html`<div class="gen-text" data-answer-at=${at ?? nothing} .textContent=${text}></div>` : nothing;
+  if (!text) return nothing;
+  if (typeof rendered === "string" && rendered) {
+    return html`<div class="gen-text markdown md-compact" data-answer-at=${at ?? nothing} data-copy-source=${text} .innerHTML=${rendered}></div>`;
+  }
+  return html`<div class="gen-text" data-answer-at=${at ?? nothing} .textContent=${text}></div>`;
 }
 
 // One step, live or reloaded. +gen+: { text, thinking, tools, answer } (a
@@ -97,7 +106,7 @@ export function stepTemplate(gen, st = {}) {
   const failed = !live && model.failedCount(gen.tools) > 0;
   // A step left with its thinking only reads "thinking" once.
   const wrapped = live || !!text || gen.tools.length > 0;
-  return html`<details class=${`gen${live ? " live" : ""}${failed ? " has-failed" : ""}`} .open=${open}><summary class=${label.repeats ? "repeats" : nothing} @click=${on.stepClick ?? nothing}>${label.content}</summary>${steers}${gen.thinking ? thinkingTemplate({ body, wrapped, line, on }) : nothing}${textTemplate(text, { live, sentences, placeholder, at })}${items.length ? html`<div class="activity-body">${items}</div>` : nothing}</details>`;
+  return html`<details class=${`gen${live ? " live" : ""}${failed ? " has-failed" : ""}`} .open=${open}><summary class=${label.repeats ? "repeats" : nothing} @click=${on.stepClick ?? nothing}>${label.content}</summary>${steers}${gen.thinking ? thinkingTemplate({ body, wrapped, line, on }) : nothing}${textTemplate(text, { live, sentences, placeholder, at, rendered: gen.html })}${items.length ? html`<div class="activity-body">${items}</div>` : nothing}</details>`;
 }
 
 // A hook's line (hook_notice) as a step's row. data.line is a whole row of
@@ -807,10 +816,11 @@ function defaultPlaceAnswer(appendToHistory) {
 
 // The text of a reloaded block's step +iteration+ (1-based, as the snapshot's
 // cards count), "" when it has none: a reloaded question card's asking
-// reply.
+// reply, as written (a rendered step keeps it as data-copy-source).
 export function stepText(block, iteration) {
   const step = block?.querySelectorAll(":scope > .gen")[Number(iteration) - 1];
-  return step?.querySelector(":scope > .gen-text")?.textContent || "";
+  const text = step?.querySelector(":scope > .gen-text");
+  return text?.getAttribute("data-copy-source") ?? text?.textContent ?? "";
 }
 
 // A re-rendered failed turn's line (a .bubble.cancel, as live's
@@ -831,8 +841,11 @@ function failedLineTemplate(record) {
 // duration from the timing's tool records), then the answer and the turn's
 // timing line under it.
 // +thumbs(images)+ draws a prompt's or a tool row's image thumbs (a
-// template, images.js thumbsTemplate).
-export function turnHistoryNodes(items, timing, { thumbs }) {
+// template, images.js thumbsTemplate). +workingSet+ (the stage view's
+// web.working_set, never the turn view's): each block stamped with its
+// turn's ordinal and its rows with theirs (working_set_view.js), and the
+// turn's footprint line after it.
+export function turnHistoryNodes(items, timing, { thumbs, workingSet = false }) {
   const timingTemplate = (group) => {
     const record = group.record;
     // Numbered by its place in the turn records, as live (a failed turn
@@ -866,12 +879,16 @@ export function turnHistoryNodes(items, timing, { thumbs }) {
   };
   const steerTemplate = (i, bubble) => steerRowTemplate({ source: items[i].source, text: items[i].content }, { bubble });
   const parts = [];
-  // Each block's steps, in order: its outline once the nodes exist.
+  // Each block's steps, in order: its outline once the nodes exist; and
+  // its turn's place among the turns (the working set's stamp).
   const outlines = [];
+  const blockTurns = [];
+  let turnOrdinal = -1;
   for (const group of turnGroups(items, timing)) {
     if (group.kind === "note") { parts.push(noteBubbleTemplate(items[group.i])); continue; }
     if (group.kind === "steer") { parts.push(steerTemplate(group.i, true)); continue; }
     if (group.kind === "answer") { parts.push(answerTemplate(group.answer, nothing)); continue; }
+    turnOrdinal += 1;
     const prompt = items[group.user];
     // A context wake turn starts with its note.
     parts.push(prompt.role === "note" ? noteBubbleTemplate(prompt) : userTemplate(prompt));
@@ -885,7 +902,12 @@ export function turnHistoryNodes(items, timing, { thumbs }) {
     if (plainThinking) {
       parts.push(thinkingTemplate({ body: only.thinking, cls: "bubble thinking" }));
     } else if (group.steps.length) {
-      const gens = group.steps.map((step) => ({ text: step.i === null ? "" : String(items[step.i].content ?? ""), thinking: step.thinking || "", tools: step.tools }));
+      // A step's text with its message's rendered markdown (html: web.markdown on).
+      const gens = group.steps.map((step) => ({
+        text: step.i === null ? "" : String(items[step.i].content ?? ""),
+        html: step.i === null ? null : items[step.i].html ?? null,
+        thinking: step.thinking || "", tools: step.tools,
+      }));
       const steps = gens.map((gen, k) => stepTemplate(gen, {
         // The steers the step answered first, where the live rows went.
         steers: (group.steps[k].steers || []).map((i) => steerTemplate(i, false)),
@@ -895,6 +917,8 @@ export function turnHistoryNodes(items, timing, { thumbs }) {
       }));
       parts.push(html`<details class="turn-work done"><summary>${model.blockSummary({ gens, ended: true })}</summary>${steps}</details>`);
       outlines.push(gens);
+      blockTurns.push(turnOrdinal);
+      if (workingSet) parts.push(footprintTemplate(groupItems(group, turnOrdinal), turnOrdinal));
     }
     // Steers with no step to sit in, or in a turn that shows no block: on
     // their own after the prompt.
@@ -921,7 +945,9 @@ export function turnHistoryNodes(items, timing, { thumbs }) {
   }
   const out = nodesOf(parts);
   // A finished turn's block as the live end leaves it: its outline, open.
-  [...out.children].filter((el) => el.matches(".turn-work")).forEach((block, i) => outlineBlock(block, outlines[i] || []));
+  const blocks = [...out.children].filter((el) => el.matches(".turn-work"));
+  blocks.forEach((block, i) => outlineBlock(block, outlines[i] || []));
+  if (workingSet) stampHistory(blocks, blockTurns);
   // Each answer bubble and step text knows its message's refs
   // (answer_refs.js; the page pairs them after the render), the index
   // stays out of the DOM.