samagotchi 0.100.1 → 0.101.0

data/lib/samagotchi/version.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Samagotchi
-  VERSION = "0.100.1"
+  VERSION = "0.101.0"
   # Sent as the User-Agent of every HTTP request chi makes.
   USER_AGENT = "chi/#{VERSION}"
 end

data/lib/samagotchi/web/app.rb

@@ -25,6 +25,7 @@ require_relative "../session_commands"
 require_relative "../steer"
 require_relative "../host_registry"
 require_relative "../llm_context_override"
+require_relative "../working_set"
 require_relative "../model_catalog"
 require_relative "../model_profile"
 require_relative "../session_setting"
@@ -97,6 +98,8 @@ module Samagotchi
       #   freshly-spawned worker's bridge before answering POST /api/sessions.
       # @param view ["stage", "turn"] the page's view of a turn (web.view);
       #   ?view=stage|turn overrides it for one page load
+      # @param working_set [Boolean] the stage view's working set
+      #   (web.working_set); ?working_set=1|0 overrides it for one page load
       # @param annotate_presets [String, Array] the quick replies next to
       #   Annotate (web.annotate_presets, "|"-separated); "" shows none. The
       #   page parses them (annotate_presets.js).
@@ -119,7 +122,8 @@ module Samagotchi
                      annotate_presets: Config::BY_KEY["web.annotate_presets"].default,
                      editor: Config::BY_KEY["web.editor"].default,
                      events_heartbeat: EVENTS_HEARTBEAT, events_queue: EVENTS_QUEUE,
-                     registry: nil, models_wait_timeout: MODELS_WAIT_TIMEOUT, lan: nil)
+                     registry: nil, models_wait_timeout: MODELS_WAIT_TIMEOUT, lan: nil,
+                     working_set: Config::BY_KEY["web.working_set"].default)
         @manager = manager || SessionManager
         @registry = registry
         @registry_given = !registry.nil?
@@ -132,6 +136,7 @@ module Samagotchi
         @bridge_wait_timeout = bridge_wait_timeout
         @markdown_renderer = MarkdownRenderer.new(enabled: markdown)
         @view = view
+        @working_set = working_set
         @annotate_presets = annotate_presets.is_a?(Array) ? annotate_presets.join("|") : annotate_presets.to_s
         @editor_url = Editor.template(editor)
         @hub = hub
@@ -183,6 +188,7 @@ module Samagotchi
         ["GET", %r{\A/api/sessions/([^/]+)/context/([^/]+)\z}, :handle_context_show, :session],
         ["POST", %r{\A/api/sessions/([^/]+)/context\z}, :handle_context_add, :session],
         ["DELETE", %r{\A/api/sessions/([^/]+)/context/([^/]+)\z}, :handle_context_delete, :session],
+        ["GET", %r{\A/api/sessions/([^/]+)/working_set\z}, :handle_working_set, :session],
         ["GET", %r{\A/api/sessions/([^/]+)\z}, :handle_show, :session],
         ["DELETE", %r{\A/api/sessions/([^/]+)\z}, :handle_delete, :session]
       ].freeze
@@ -1477,6 +1483,36 @@ module Samagotchi
         error_response(409, e.reason.to_s, "#{e.message}; try again in a moment")
       end
 
+      # ── The working set (web.working_set) ───────────────────────────────
+
+      # GET /api/sessions/:id/working_set: the working set as the model has
+      # it ({items:, at:}, WorkingSet), what the page overlays on its rows'
+      # set when it seeds a session's and when the expanded view opens (a
+      # file changed while the session sat idle). A live worker's snapshot
+      # messages are the truth, as #handle_show's, else the file's; the
+      # strategy is the session's llm ctx chip's, the folder its working
+      # directory.
+      def handle_working_set(_req, id)
+        session = @session_class.load(id, state_dir: default_state_dir)
+        live = bridge_get_json(id, "snapshot")
+        messages = live_or_saved(live && live["snapshot"], "messages") { session.messages }
+        # A snapshot's entries have string keys (paired_runs reads symbols).
+        messages = Array(messages).map { |message| message.is_a?(Hash) ? message.transform_keys(&:to_sym) : message }
+        llm_context = SessionSetting::LLM_CONTEXT.snapshot_value(live && live["session_state_snapshot"]) do
+          SessionSetting::LLM_CONTEXT.saved_summary(session, registry: host_registry)
+        end
+        snapshot = WorkingSet.build(messages, cwd: session.working_directory, strategy: working_set_strategy(llm_context))
+        json_response(200, snapshot.to_h)
+      end
+
+      # The strategy an llm ctx chip names ("none", "stale,forget"), as
+      # LLMContextView takes it; none when there is no chip.
+      def working_set_strategy(llm_context)
+        named = llm_context.is_a?(Hash) ? (llm_context[:strategy] || llm_context["strategy"]).to_s : ""
+        layers = named.split(",").map(&:strip).reject { |layer| layer.empty? || layer == "none" }
+        layers.empty? ? LLMContextView::NONE : layers.map(&:to_sym)
+      end
+
       # ── Attached context (ContextSources): the session bar's chips ───────
       # A source's command isn't shown (the page may be on a phone over the
       # LAN), and the web adds a URL only, through an installed bundle's
@@ -2126,6 +2162,8 @@ module Samagotchi
         # the one serving now (an upgraded chi web after a reconnect).
         attrs = { "sessions-dir" => sessions_dir_label, "server-dir" => home_label(Dir.pwd), "version" => Samagotchi::VERSION }
         attrs["view"] = view_name(req.params["view"])
+        # Only when on: the page reads its presence (the turn view ignores it).
+        attrs["working-set"] = "1" if working_set?(req.params["working_set"])
         # Always there: an empty one means no presets, not the default.
         attrs["annotate-presets"] = @annotate_presets
         dir, = scope_dir(req.params["dir"])
@@ -2154,6 +2192,16 @@ module Samagotchi
         VIEWS.include?(param) ? param : @view
       end
 
+      # The working set for this page load: ?working_set=1|0 wins, anything
+      # else leaves the config's choice (web.working_set).
+      def working_set?(param)
+        case param
+        when "1" then true
+        when "0" then false
+        else @working_set
+        end
+      end
+
       def json_response(status, payload)
         body = JSON.generate(payload)
         [status, { "Content-Type" => "application/json; charset=utf-8", "Content-Length" => body.bytesize.to_s, "Cache-Control" => "no-store" }, [body]]

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

@@ -21,6 +21,7 @@ import {
   detachContext,
   addContext,
   renderText,
+  getWorkingSet,
 } from "./data.js";
 import { createContextChips } from "./context_chips.js";
 import { createLlmContextControl } from "./llm_context_chip.js";
@@ -37,6 +38,8 @@ import { elementOf, emptyAnswerTemplate } from "./turn_html.js";
 import { createBubbles, hintEl, outputBubbleTemplate } from "./bubbles.js";
 import { createCardsPlace } from "./cards_place.js";
 import { createStageView } from "./stage_view.js";
+import { createWorkingSet, groupItems } from "./working_set_view.js";
+import { turnGroups } from "./timing.js";
 import { createMarkdownPlace } from "./markdown_place.js";
 import { openerFill, openTitle, restoredComposer } from "./chains.js";
 import { createTaskStopper } from "./task_stop.js";
@@ -225,10 +228,21 @@ const markdownPlace = createMarkdownPlace({
   answerRefsOf,
 });
 const { renderMarkdown, pairRefsIn, linkRefsIn, applyFinalMarkdown, linkTextRefs } = markdownPlace;
+// The stage view's working set (web.working_set, or ?working_set=1|0):
+// what each turn brought into context, in a rail in the stage, a footprint
+// under each finished turn and a "set N" chip in the mem chip's place
+// (working_set_view.js). The turn view ignores it.
+const workingSet = view === "stage" && document.body.dataset.workingSet === "1"
+  ? createWorkingSet({
+    historyEl, stageRoot: () => turnDom.root, state: () => current, session: () => selected, infoEl: infoTextEl,
+    onChange: () => updateInfoBar(), getWorkingSet,
+  })
+  : null;
+document.body.classList.toggle("working-set", !!workingSet);
 const turnDom = view === "stage"
   ? createStageView({
     ...viewArgs, isNearBottom: () => atHistoryEnd(), dockEl: $("#dock"), centerEl: $("#center"), composerEl,
-    renderMarkdown, linkRefs: linkRefsIn,
+    renderMarkdown, linkRefs: linkRefsIn, workingSet,
   })
   : createTurnView(viewArgs);
 // The history's bottom reserve and the toast's place follow the composer
@@ -862,6 +876,7 @@ function renderSessionView(data, { kept = [] } = {}) {
   reasoningHistoryControl.refresh();
   if (data.messages && data.messages.length) renderHistory(data.messages);
   else renderHistory(data.history || []);
+  seedWorkingSet(data);
   restoreCommandBubbles(historyEl, kept);
   // A failed turn's prompt went back to the user: shown after the
   // conversation, marked failed, as it was live (prompt_restored).
@@ -921,13 +936,27 @@ function renderSessionView(data, { kept = [] } = {}) {
   updateComposerMode();
 }
 
+// The working set's turns from a session's messages, as turnHistoryNodes
+// numbers them; the running turn (the replay draws it in the stage) isn't
+// one of them yet.
+function seedWorkingSet(data) {
+  if (!workingSet) return;
+  const items = data.messages || [];
+  const groups = typeof items[0] === "object" && items[0]?.role ? turnGroups(items, current.timing).filter((g) => g.kind === "turn") : [];
+  if (data.current_turn && groups.length) groups.pop();
+  workingSet.seed(groups.map((g, i) => {
+    const text = String(items[g.user]?.content ?? "").replace(/\s+/g, " ").trim();
+    return { items: groupItems(g, i), prompt: text.length > 60 ? `${text.slice(0, 59)}\u2026` : text };
+  }));
+}
+
 function renderHistory(items) {
   if (!items.length) {
     historyEl.replaceChildren(hintEl("No output yet. Send a message."));
     return;
   }
   if (typeof items[0] === "object" && items[0].role) {
-    historyEl.replaceChildren(turnHistoryNodes(items, current.timing, { thumbs: (images) => thumbsTemplate(selected, images) }));
+    historyEl.replaceChildren(turnHistoryNodes(items, current.timing, { thumbs: (images) => thumbsTemplate(selected, images), workingSet: !!workingSet }));
     linkTextRefs();
   } else {
     historyEl.replaceChildren(...items.map((c) => elementOf(outputBubbleTemplate(c))));
@@ -1088,7 +1117,7 @@ function updateInfoBar() {
   const { buttons, bar } = sessionBar({
     id: selected, state: current, sessions: allSessions, versions, cardTitle: (s) => lists.cardTitle(s),
     continuing: sessionActions.continuing, restarting: restartingIds, streaming: !!streamControl, running: liveTurn.running,
-    now: Date.now(),
+    now: Date.now(), workingSet: workingSet ? workingSet.chip() : undefined,
   });
   const stopBtn = document.getElementById("infoStopBtn");
   const deleteBtn = document.getElementById("infoDeleteBtn");
@@ -1269,6 +1298,7 @@ const streamHandlers = createStreamHandlers({
   llmContextControl,
   thinkingControl,
   reasoningHistoryControl,
+  workingSet,
   sentIds,
   earlyRestores,
   stream: {

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

@@ -1,14 +1,19 @@
 // The popover shell a session-bar chip opens (llm_context_chip.js,
-// level_chip.js): a div.ctx-popover on the body, placed at the chip,
-// opened by a click on it (delegated on +el+), closed by a second click,
-// its × (data-act="close"), a click outside or Esc. Another session's
-// summary (refresh) closes it. What it draws, and what a Set or another
-// data-act does, is the caller's.
+// level_chip.js, the working set's): a div.ctx-popover on the body, placed
+// at the chip, opened by a click on it (delegated on +el+) or by open()
+// (another opener: the working set's rail and footprint), closed by a second
+// click, its × (data-act="close"), a click outside or Esc; focus goes back
+// to the opener. Another session's summary (refresh) closes it. What it
+// draws, and what a Set or another data-act does, is the caller's. With
+// +sheet+, a window narrower than SHEET_MAX gets it as a bottom sheet.
 
 import { nothing, render } from "./vendor/lit-html.js";
 
 const EDGE = 16;
 const GAP = 8;
+// Under this window width a +sheet+ popover is a bottom sheet.
+export const SHEET_MAX = 600;
+const SHEET_EDGE = 8;
 
 // Where the popover goes for the chip's +rect+: above it, or below when
 // the room above is short of its height and below has more; capped to the
@@ -24,26 +29,48 @@ export function popoverPlace(rect, { width, height, innerWidth, innerHeight }) {
   return height > room ? { ...place, maxHeight: room } : place;
 }
 
+// A bottom sheet's place in a phone's window: the window's width less its
+// edges, at its bottom, at most 60 % of its height (the rest scrolls).
+// @return {left, bottom, width, maxHeight}
+export function sheetPlace({ innerWidth, innerHeight }) {
+  return { left: SHEET_EDGE, bottom: SHEET_EDGE, width: innerWidth - 2 * SHEET_EDGE, maxHeight: Math.round(innerHeight * 0.6) };
+}
+
 // id, className: the popover's; width: its widest (px); el: where the chip
-// is drawn; anchor: the chip's selector; summary(): what the form is drawn
-// from (null: nothing opens); session(): the open session's id.
+// is drawn; anchor: the chip's selector; openers: the selector of every
+// element that opens it (a click there is not a click outside; default the
+// anchor's); summary(anchor): what the form is drawn from (null: nothing
+// opens); session(): the open session's id.
 // show(data, opening): draws the form into the popover (opening: a fresh
 // open, else a refresh with a newer summary); onClose(): the caller forgets
 // its open state; onSubmit(form); onAct(name): a data-act other than close.
-// @return {pop, close, refresh, isOpen}
-export function createChipPopover({ id, className, width: widest, el, anchor: anchorSel, summary,
+// sheet: a bottom sheet in a narrow window (sheetPlace).
+// @return {pop, open, close, refresh, isOpen, opener}
+export function createChipPopover({ id, className, width: widest, el, anchor: anchorSel, openers = anchorSel, summary,
                                     session = () => null, show, onClose = () => {}, onSubmit, onAct = () => {},
-                                    doc = document, win = window }) {
+                                    sheet = false, doc = document, win = window }) {
   const pop = doc.createElement("div");
   pop.id = id;
   pop.className = className;
   pop.setAttribute("role", "dialog");
   pop.hidden = true;
   doc.body.appendChild(pop);
-  // The session the open form is for.
+  // The session the open form is for, and the element that opened it.
   let openFor = null;
+  let opener = null;
 
   function place(anchor) {
+    const narrow = sheet && win.innerWidth < SHEET_MAX;
+    pop.classList.toggle("sheet", narrow);
+    if (narrow) {
+      const at = sheetPlace({ innerWidth: win.innerWidth, innerHeight: win.innerHeight });
+      pop.style.width = `${at.width}px`;
+      pop.style.left = `${at.left}px`;
+      pop.style.top = "";
+      pop.style.bottom = `${at.bottom}px`;
+      pop.style.maxHeight = `${at.maxHeight}px`;
+      return;
+    }
     const width = Math.min(widest, win.innerWidth - 32);
     pop.style.width = `${width}px`;
     pop.style.maxHeight = "";
@@ -55,22 +82,29 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
     if (at.maxHeight !== undefined) pop.style.maxHeight = `${at.maxHeight}px`;
   }
 
+  // Opens at +anchor+ (open already: drawn anew there).
   function open(anchor) {
-    const data = summary();
+    const data = summary(anchor);
     if (!data) return;
     openFor = session();
+    opener = anchor;
     show(data, true);
     pop.hidden = false;
     place(anchor);
   }
 
   // A closed popover is empty, so each open draws a fresh form (unsent
-  // edits are gone).
-  function close() {
+  // edits are gone). Focus that was in it (or +refocus+: Esc) goes back to
+  // its opener.
+  function close({ refocus = false } = {}) {
+    const had = refocus || pop.contains(doc.activeElement);
+    const back = opener;
     pop.hidden = true;
     openFor = null;
+    opener = null;
     onClose();
     render(nothing, pop);
+    if (had && back?.isConnected) back.focus?.();
   }
 
   function isOpen() { return !pop.hidden; }
@@ -84,6 +118,11 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
     show(data, false);
   }
 
+  // A popover's own re-placement (its content grew or shrank).
+  function replace() {
+    if (isOpen() && opener?.isConnected) place(opener);
+  }
+
   // The click goes on to the document: another chip's popover (or the
   // context popover) open meanwhile closes there. This one's own closer
   // leaves its chip's click alone.
@@ -103,11 +142,11 @@ export function createChipPopover({ id, className, width: widest, el, anchor: an
     else if (act) onAct(act);
   });
   doc.addEventListener("click", (e) => {
-    if (isOpen() && !pop.contains(e.target) && !e.target.closest?.(anchorSel)) close();
+    if (isOpen() && !pop.contains(e.target) && !e.target.closest?.(openers)) close();
   });
   doc.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && isOpen()) close();
+    if (e.key === "Escape" && isOpen()) close({ refocus: true });
   });
 
-  return { pop, close, refresh, isOpen };
+  return { pop, open, close, refresh, isOpen, replace, opener: () => opener };
 }

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

@@ -298,6 +298,12 @@ export function openEvents(handlers = {}, opts = {}) {
   };
 }
 
+// A session's working set as the model has it (WorkingSet: {items, at}),
+// what the stage view's working set overlays on its rows (web.working_set).
+export function getWorkingSet(id, opts = {}) {
+  return api(`/api/sessions/${encodeURIComponent(id)}/working_set`, opts);
+}
+
 // A session's attached context (chi context): the sources it sees, one
 // with its text, and detach (a session's) or mute here (a project's).
 export function listContext(id, opts = {}) {

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

@@ -867,6 +867,132 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
 .turn-stage .outline-fold{display:none}
 .turn-stage .turn-work.outline>.gen.folded{display:block}
 .turn-stage .ts-cloud-body .gen:first-of-type{margin-top:0;border-top:0}
+/* The working set (web.working_set, working_set_rail.js): a rail on the right of the live slots, out of their flow (absolute,
+   the live block's full height), so it never sets their height; its lines are fixed 18 px slots, each at its place by a
+   transform (a fold fades the absorbed lines out in place and slides the ones below up once). A stage narrower than 760 px
+   has it as a row under the trail (a fixed line, part of the live block from the turn's start); a phone has neither (the
+   session bar's chip is its entry). body.working-set: the flag is on (app.js). */
+body.working-set .turn-stage{container-type:inline-size}
+body.working-set .ts-live{position:relative;padding-right:264px}
+.ts-ws{--ws-line:18px;position:absolute;top:0;right:0;bottom:0;width:248px;box-sizing:border-box;padding:0 4px 0 12px;border-left:1px solid var(--border);border-radius:0 6px 6px 0;display:flex;flex-direction:column;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:var(--ws-line);color:var(--text-2);cursor:pointer}
+.ts-ws:hover{background:var(--bg-hover)}
+.ts-ws:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
+.ws-head{flex:none;display:flex;align-items:center;gap:6px;min-width:0;height:var(--ws-line);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
+.ws-count{margin-right:auto;font-weight:400;letter-spacing:0;color:var(--text-faint);font-variant-numeric:tabular-nums}
+.ws-tick{display:none}
+.ws-fold{flex:none;width:18px;height:18px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--text-muted);font-size:12px;line-height:18px;opacity:0;transition:opacity .15s}
+.ws-fold:hover:not(:disabled){filter:none;background:var(--bg-raised);color:var(--text)}
+.ts-ws:hover .ws-fold,.ts-ws:focus-within .ws-fold,.ts-ws.collapsed .ws-fold{opacity:1}
+@media (hover:none){.ws-fold{opacity:1}}
+.ws-ring{flex:none;width:14px;height:14px}
+.ws-ring circle{fill:none;stroke-width:2.4}
+.ws-ring .track{stroke:var(--border-strong)}
+.ws-ring .fill{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .4s ease}
+.ws-ring.warn .fill{stroke:var(--warn)}
+.ws-ring.danger .fill{stroke:var(--danger)}
+.ws-list{position:relative;flex:1;min-height:0;overflow:hidden}
+.ts-ws.empty .ws-list::before{content:"nothing read yet";font-family:ui-sans-serif,system-ui,sans-serif;font-style:italic;color:var(--text-faint)}
+.ws-item,.ws-more{position:absolute;top:0;left:0;right:0;height:var(--ws-line);transition:transform .18s cubic-bezier(.3,.7,.2,1),opacity .15s ease,background-color .8s ease}
+.ws-item{display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;border-radius:4px}
+.ws-item .k{flex:none;width:12px;text-align:center;color:var(--text-faint)}
+.ws-item.memory .k{color:var(--think-text)}
+.ws-item.url .k{color:var(--accent)}
+.ws-item .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.ws-item .n{flex:none;color:var(--text-faint);font-variant-numeric:tabular-nums}
+.ws-item .e{flex:none;color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
+.ws-item .c{flex:none;color:var(--text-faint);font-variant-numeric:tabular-nums}
+.ws-item .n:empty,.ws-item .e:empty,.ws-item .c:empty{display:none}
+/* The server's states (WorkingSet): stale faded; forgotten struck, faint and faded (a group only when all its members are). The words are the popover's and the titles' (colour is never alone). */
+.ws-item.stale{opacity:.55}
+.ws-item.forgotten{opacity:.5}
+.ws-item.forgotten .t,.ws-row.forgotten .t,.ws-foot .l.forgotten{text-decoration:line-through;color:var(--text-faint)}
+.ws-row.stale .k,.ws-row.stale .t,.ws-foot .l.stale{opacity:.55}
+.ws-row.forgotten .k,.ws-row.forgotten .t,.ws-foot .l.forgotten{opacity:.5}
+.ws-item.enter{animation:ws-in .2s ease}
+@keyframes ws-in{from{opacity:0}}
+.ws-item.leave,.ws-more.leave{opacity:0;pointer-events:none}
+/* Just entered (FLASH_MS): an accent dot for the glyph and a tint; it settles (the tint fades 800 ms). */
+.ws-item.fresh{background:var(--accent-tint)}
+.ws-item.fresh .k{font-size:0;display:flex;align-items:center;justify-content:center;height:var(--ws-line)}
+.ws-item.fresh .k::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--accent-ring)}
+.ws-more{padding-left:17px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}
+/* Folded by hand (kept per browser): the head line alone at the right, the newest entry ticking through it. */
+.ts-ws.collapsed{bottom:auto;width:auto;max-width:248px;height:var(--ws-line);border-left:0;padding-left:6px}
+.ts-ws.collapsed .ws-list{display:none}
+.ts-ws.collapsed .ws-count{margin-right:0}
+.ts-ws.collapsed .ws-tick{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-right:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-2)}
+.ts-ws.collapsed .ws-tick:not(:empty)::before{content:"+";margin-right:5px;color:var(--accent);font-weight:700}
+.ws-tick.fresh{animation:ts-fade .3s ease}
+/* The row form, in a stage under 760 px: one line under the trail (its room, 18 px and a gap, kept while a card waits). */
+@container (max-width:759px){
+  body.working-set .ts-live{padding-right:0;--ws-row-h:26px}
+  .ts-ws{position:static;width:auto;height:var(--ws-line);flex-direction:row;align-items:center;gap:10px;padding:0;border-left:0;border-radius:6px}
+  .ts-ws .ws-head{flex:none}
+  .ts-ws .ws-count{margin-right:0}
+  .ts-ws .ws-list{display:flex;align-items:center;gap:12px;height:var(--ws-line)}
+  .ws-item,.ws-more{position:static;flex:none;max-width:30ch;transform:none !important;transition:none}
+  .ws-more{padding-left:0}
+  .ws-item.leave,.ws-more.leave{display:none}
+  .turn-stage.waiting .ts-ws{display:none}
+}
+body.working-set .turn-stage.waiting .ts-live{min-height:calc(var(--ts-live-h) + var(--ws-row-h,0px))}
+body.working-set .turn-stage.held-wait:not(.waiting) .ts-live{min-height:max(calc(var(--ts-live-h) + var(--ws-row-h,0px)),var(--live-held,0px))}
+/* A finished turn's footprint, under its closed block (working_set_view.js): one faint line; a click opens its list. */
+.ws-foot{display:block;width:fit-content;max-width:calc(100% - 13px);box-sizing:border-box;margin:-4px 0 0 13px;padding:0 6px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:18px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
+.ws-foot:hover{color:var(--text-muted);background:var(--bg-hover)}
+.ws-foot:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
+.ws-foot .w{font-family:ui-sans-serif,system-ui,sans-serif}
+.ws-foot .sep{color:var(--border-strong)}
+.ws-foot .e{color:var(--accent)}
+.ws-foot .k{color:var(--think-text)}
+.ws-foot .url .k{color:var(--accent)}
+.ws-foot .f{text-decoration:line-through}
+/* A step tag (s3, t2·s3, prompt): where an item entered; a button jumps to its call. */
+.ws-step{display:inline-block;padding:0 4px;border:0;border-radius:4px;background:var(--badge-bg);font-family:ui-sans-serif,system-ui,sans-serif;font-size:10.5px;line-height:14px;font-weight:400;color:var(--text-faint);font-variant-numeric:tabular-nums;vertical-align:1px}
+.ws-step.p{color:var(--think-text)}
+button.ws-step{cursor:pointer}
+button.ws-step:hover:not(:disabled){filter:none;background:var(--accent-bg);color:var(--accent)}
+/* The expanded view (a chip popover; a bottom sheet on a phone). */
+.ws-popover{gap:0}
+.ws-popover .ctx-pop-head{align-items:center;flex-wrap:wrap;margin-bottom:4px}
+.ws-scope{display:inline-flex;gap:2px}
+.ws-scope button{padding:1px 8px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--text-muted);font-size:11px;line-height:16px}
+.ws-scope button.on{color:var(--text-2);border-color:var(--border-strong);background:var(--bg-raised)}
+.ws-scope button:hover:not(:disabled){filter:none;color:var(--text)}
+.ws-popover .ctx-pop-meta{margin-top:6px}
+.ws-popover .ws-hint{margin-top:10px;color:var(--text-faint)}
+.ws-row{display:flex;align-items:center;gap:8px;width:100%;min-width:0;height:28px;box-sizing:border-box;padding:0 6px;border:0;border-radius:6px;background:transparent;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:28px;color:var(--text-2);text-align:left}
+.ws-row:hover{background:var(--bg-hover)}
+button.ws-row:hover:not(:disabled){filter:none;background:var(--bg-hover)}
+.ws-row .k{flex:none;width:12px;text-align:center;color:var(--text-faint)}
+.ws-row.memory .k{color:var(--think-text)}
+.ws-row.url .k{color:var(--accent)}
+.ws-row .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
+.ws-row a.t{text-decoration:none}
+.ws-row a.t:hover{text-decoration:underline}
+.ws-row .e{flex:none;color:var(--accent);font-weight:600}
+.ws-row .n{flex:none;color:var(--text-faint)}
+.ws-row .st{flex:none;margin-left:auto;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;color:var(--text-faint)}
+.ws-row .chev{flex:none;margin-left:auto;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;color:var(--text-faint)}
+.ws-row .ws-step{flex:none}
+.ws-row .tk,.ws-row .c{flex:none;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}
+.ws-row.member{padding-left:26px}
+.ws-row.fresh{background:var(--accent-tint)}
+.ws-row.fresh .k{color:var(--accent)}
+.ws-row.muted{opacity:.6}
+.ws-popover.sheet{border-radius:14px}
+/* A phone's sheet: the name, the scope and × on the first line, the count and the ring under them. */
+.ws-popover.sheet .ctx-pop-close{order:2}
+.ws-popover.sheet .ctx-pop-head>.ctx-pop-kind{order:3;flex:1 0 calc(100% - 30px)}
+.ws-popover.sheet .ctx-pop-head>.ws-ring{order:4}
+.ws-popover.sheet .ws-row{height:30px;line-height:30px}
+/* The session bar's chip, in the mem chip's place: a dot (the accent: changed since its list was last opened) and the count. */
+#infoBar .meta .ws-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border:1px solid transparent;cursor:pointer;font-family:inherit;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
+#infoBar .meta .ws-chip:hover:not(:disabled){filter:none;color:var(--text);border-color:var(--accent-border);background:var(--accent-bg)}
+.ws-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);opacity:.6}
+.ws-chip.changed .ws-dot{background:var(--accent);opacity:1;box-shadow:0 0 0 2px var(--accent-ring)}
+@media(max-width:600px){body.working-set .ts-live{padding-right:0;--ws-row-h:0px}.ts-ws{display:none}}
+@media (prefers-reduced-motion:reduce){.ws-item,.ws-more,.ws-ring .fill{transition:none}.ws-item.enter,.ws-tick.fresh{animation:none}}
 @media(max-width:600px){
   .bubble.user.queued[data-delivery="queue"]{flex-wrap:wrap}
   .bubble.user.queued[data-delivery="queue"] .origin-label,.bubble.user.queued[data-delivery="queue"] .state-badge{order:0}
@@ -974,7 +1100,7 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
   #infoBar .meta .id{order:-2}
   #infoBar .meta .status{order:-1}
   /* The memory chip right after the status (same order, later in the DOM): the meta scrolls, and only its start is in sight. */
-  #infoBar .meta .mem-chip{order:-1}
+  #infoBar .meta .mem-chip,#infoBar .meta .ws-chip{order:-1}
   /* A parent's children chip too: its waiting part is what to see. */
   #infoBar .meta .children-chip{order:-1}
   /* A chain's ← → links too: the way to the other days. */

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

@@ -57,6 +57,15 @@ function kidsTemplate(kids) {
   return html`<a class=${`model children-chip${kids.waitingText ? " waiting" : ""}`} href=${ALL_SESSIONS_HASH} title=${`${kids.title} (all sessions)`}>${kids.text}${waiting}</a>`;
 }
 
+// The working set's chip (web.working_set), in the mem chip's place: a dot
+// (the accent when the set changed since its list was last opened) and
+// "set N"; nothing while the set is empty. +chip+: {n, changed} or null.
+export function workingSetChipTemplate(chip) {
+  if (!chip) return nothing;
+  const title = `Working set: ${chip.n} item${chip.n === 1 ? "" : "s"} this session brought into context (files, memories, URLs)${chip.changed ? ", changed since you last looked" : ""}. Open the list.`;
+  return html`<button type="button" class=${`model ws-chip${chip.changed ? " changed" : ""}`} title=${title} aria-label=${title} aria-haspopup="dialog"><span class="ws-dot" aria-hidden="true"></span>set ${chip.n}</button>`;
+}
+
 // The info line for +bar+, nothing without a session (the start page hides
 // the bar). +bar+:
 //   id, copied (the copy button just copied), status, model ({text, title,
@@ -65,18 +74,21 @@ function kidsTemplate(kids) {
 //   childrenSummary), llmContext, thinking and reasoningHistory (the chips'
 //   summaries; reasoningHistory null on a native host: no chip), toolkit
 //   (the tools chip's summary, null on full: no chip), notes
-//   ({text, title} or null), memories (the used names), dir, ctx ({text,
+//   ({text, title} or null), memories (the used names), workingSet
+//   (web.working_set on: {chip}, the working set's chip in place of the
+//   mem chip; null: off), dir, ctx ({text,
 //   tip}), speed ({text, tip} or null), clock (the session time's text, ""
 //   for none), worker ({badge, busy} or null).
 export function infoBarHtml(bar) {
   if (!bar) return nothing;
   const attach = `chi --attach ${bar.id}`;
   const memories = bar.memories || [];
-  return html`<div class="meta"><span class="id" title=${bar.id}>${String(bar.id).slice(0, 8)}</span><button type="button" class="copy-attach" title=${`Copy "${attach}" to attach a terminal`}>${bar.copied ? "copied ✓" : "copy chi --attach"}</button><span class=${bar.status ? `status ${bar.status}` : "status"}>${bar.status || ""}</span><span class=${`model${bar.model.mismatch ? " served-mismatch" : ""}`} title=${bar.model.title}>${bar.model.text}</span>${bar.chain?.prev ? chainLinkTemplate(bar.chain.prev, PREV, "The previous link of this chain") : nothing}${bar.chain?.next ? chainLinkTemplate(bar.chain.next, NEXT, "The next link of this chain") : nothing}${bar.parent ? html`<a class="model parent" href=${sessionHash(bar.parent.id)} title=${bar.parent.title}>delegated by ${String(bar.parent.id).slice(0, 8)}</a>` : nothing}${kidsTemplate(bar.kids)}${thinkingChip(bar.thinking)}${reasoningHistoryChip(bar.reasoningHistory)}${llmContextChip(bar.llmContext)}${toolkitChip(bar.toolkit)}${bar.notes ? html`<span class="model notes-chip" title=${bar.notes.title}>${bar.notes.text}</span>` : nothing}${memories.length ? html`<span class="model mem-chip" title=${memChipTitle(memories)}>${memChipText(memories)}</span>` : nothing}<span class="dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span><span class="model ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span>${bar.speed ? html`<span class="model speed" title=${bar.speed.tip}>${bar.speed.text}</span>` : nothing}${bar.clock ? html`<span class="model session-time">${bar.clock}</span>` : nothing}${workerBadgeTemplate(bar.worker)}</div>`;
+  return html`<div class="meta"><span class="id" title=${bar.id}>${String(bar.id).slice(0, 8)}</span><button type="button" class="copy-attach" title=${`Copy "${attach}" to attach a terminal`}>${bar.copied ? "copied ✓" : "copy chi --attach"}</button><span class=${bar.status ? `status ${bar.status}` : "status"}>${bar.status || ""}</span><span class=${`model${bar.model.mismatch ? " served-mismatch" : ""}`} title=${bar.model.title}>${bar.model.text}</span>${bar.chain?.prev ? chainLinkTemplate(bar.chain.prev, PREV, "The previous link of this chain") : nothing}${bar.chain?.next ? chainLinkTemplate(bar.chain.next, NEXT, "The next link of this chain") : nothing}${bar.parent ? html`<a class="model parent" href=${sessionHash(bar.parent.id)} title=${bar.parent.title}>delegated by ${String(bar.parent.id).slice(0, 8)}</a>` : nothing}${kidsTemplate(bar.kids)}${thinkingChip(bar.thinking)}${reasoningHistoryChip(bar.reasoningHistory)}${llmContextChip(bar.llmContext)}${toolkitChip(bar.toolkit)}${bar.notes ? html`<span class="model notes-chip" title=${bar.notes.title}>${bar.notes.text}</span>` : nothing}${bar.workingSet ? workingSetChipTemplate(bar.workingSet.chip) : memories.length ? html`<span class="model mem-chip" title=${memChipTitle(memories)}>${memChipText(memories)}</span>` : nothing}<span class="dir" title=${bar.dir || ""}><bdi>${bar.dir || ""}</bdi></span><span class="model ctx" title=${bar.ctx.tip}>${bar.ctx.text}</span>${bar.speed ? html`<span class="model speed" title=${bar.speed.tip}>${bar.speed.text}</span>` : nothing}${bar.clock ? html`<span class="model session-time">${bar.clock}</span>` : nothing}${workerBadgeTemplate(bar.worker)}</div>`;
 }
 
-// Draws +bar+ into +el+ (#infoText), with the memories in its tooltip.
+// Draws +bar+ into +el+ (#infoText), with the memories in its tooltip
+// (with the working set on, its list says them instead).
 export function renderInfoBar(el, bar) {
   render(infoBarHtml(bar), el);
-  el.title = bar ? memoriesTooltip(bar.memories, bar.preloaded, bar.muted) : "";
+  el.title = bar && !bar.workingSet ? memoriesTooltip(bar.memories, bar.preloaded, bar.muted) : "";
 }

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

@@ -63,7 +63,9 @@ export function infoButtons({ id, state, chain, archived, continuing, streaming
 // @param restarting whether this session's Restart is under way
 // @param running whether its turn runs (the session clock ticks)
 // @param now the clock (ms)
-export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting, running, now }) {
+// @param workingSet web.working_set on: the chip's {n, changed}, or null
+//   while the set is empty; undefined: off (the mem chip shows)
+export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting, running, now, workingSet = undefined }) {
   const tokens = state.timing.tokens;
   const ctxTip = ctxBarTip(tokens, state.timing.memoryIndex,
                            { tokens: state.ctxWindow, source: state.ctxWindowSource, pct: state.ctxPct,
@@ -96,6 +98,8 @@ export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, res
     // The model notes the session's prompt carried.
     notes: promptNotesChip(state.promptNotes),
     memories: state.usedMemories,
+    // On, the working set's chip stands in the mem chip's place.
+    workingSet: workingSet === undefined ? null : { chip: workingSet },
     preloaded: state.preloadedMemories,
     muted: state.mutedMemories,
     dir: state.dir,
@@ -109,12 +113,12 @@ export function infoBarModel({ id, state, sessions, chain, cardTitle, badge, res
 // The whole bar for the open session +id+ (null: the start page, no line).
 // @param sessions the page's list; +continuing+, +restarting+: Sets of ids
 // @return {buttons, bar}
-export function sessionBar({ id, state, sessions, versions, cardTitle, continuing, restarting, streaming, running, now }) {
+export function sessionBar({ id, state, sessions, versions, cardTitle, continuing, restarting, streaming, running, now, workingSet = undefined }) {
   const chain = id ? chainNeighbours(sessions, id, { continues: state.continues }) : { prev: null, next: null };
   const archived = !!sessions.find((s) => s.id === id)?.archived;
   const buttons = infoButtons({ id, state, chain, archived, continuing: continuing.has(id), streaming });
   if (!id) return { buttons, bar: null };
   const badge = workerBadgeFor(id, state, versions);
-  const bar = infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting: restarting.has(id), running, now });
+  const bar = infoBarModel({ id, state, sessions, chain, cardTitle, badge, restarting: restarting.has(id), running, now, workingSet });
   return { buttons, bar };
 }

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

@@ -413,10 +413,19 @@ function lineIn(row, line) {
 export function showInTurn(target, { behavior = smoothScroll() } = {}) {
   const row = turnRowFor(target);
   if (!row) return null;
+  return showRow(row, { line: target.line, behavior });
+}
+
+// Shows a tool row: what hides it opened (its step, its turn's block; a
+// view that hides its rows its own way opens on the row's ref:reveal
+// event), its diff (or the read showing +line+) opened, scrolled to the
+// line (else the row) and both flashed. The working set's step tags jump
+// here. The row.
+export function showRow(row, { line: lineNo = null, behavior = smoothScroll() } = {}) {
   const view = row.ownerDocument.defaultView || globalThis;
   const reveal = new view.CustomEvent("ref:reveal", { bubbles: true, detail: {} });
   row.dispatchEvent(reveal);
-  const line = target.line ? lineIn(row, target.line) : null;
+  const line = lineNo ? lineIn(row, lineNo) : 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;

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

@@ -225,11 +225,12 @@ export function handOffDue({ ended, pending, inUse, quietSinceMs, nowMs }) {
 }
 
 // A handed-off turn's nodes in the order the turn view leaves them: the
-// prompt bubble (none for a reminder turn), the block, the extras in
-// arrival order, the answer's pieces, the timing line, the end line, the
-// kept cards, then the lines queued for after the turn (they run next).
-export function handOffOrder({ prompt = null, block = null, extras = [], answer = [], timing = null, end = null, kept = [], queued = [] }) {
-  return [prompt, block, ...extras, ...answer, timing, end, ...kept, ...queued].filter(Boolean);
+// prompt bubble (none for a reminder turn), the block, its working set's
+// footprint line (web.working_set), the extras in arrival order, the
+// answer's pieces, the timing line, the end line, the kept cards, then the
+// lines queued for after the turn (they run next).
+export function handOffOrder({ prompt = null, block = null, footprint = null, extras = [], answer = [], timing = null, end = null, kept = [], queued = [] }) {
+  return [prompt, block, footprint, ...extras, ...answer, timing, end, ...kept, ...queued].filter(Boolean);
 }
 
 // The rows that wait for the running turn's end to run as their own: a