samagotchi 0.100.1 → 0.102.0

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/commands.js

@@ -109,13 +109,19 @@ const WEB_LOCAL_REPLIES = {
   "/detach": "/detach: a terminal's command; close the tab to leave, the worker keeps running",
   "/exit": "/exit: close the tab to leave; stop in the session bar stops the worker",
   "/quit": "/quit: close the tab to leave; stop in the session bar stops the worker",
-  "/recap": "/recap: not in the web yet; a recap shows here by itself when you come back to an idle session, and /recap in a terminal (chi --attach) makes one now",
+  "/recap": "/recap: not in the web yet; a recap shows here by itself when you come back to an idle session, and /recap in a terminal (chi --attach) makes one now. /recap on|off|default sets this session's recap here too",
   "/unqueue": "/unqueue: a terminal's command; here the × on a message queued for after the turn removes it",
   "/stats": "/stats: not in the web yet; each turn shows its time, the session bar the context use and speed (hover ctx for tokens and cost), and /stats in a terminal (chi --attach) has the rest",
 };
 
+// The ones whose words after the name are the worker's (/recap off): the
+// page answers only the bare name.
+const WORKER_WITH_WORDS = new Set(["/recap"]);
+
 export function webLocalReply(text) {
-  const name = String(text || "").trim().split(/\s+/)[0].toLowerCase();
+  const words = String(text || "").trim().split(/\s+/);
+  const name = words[0].toLowerCase();
+  if (WORKER_WITH_WORDS.has(name) && words.length > 1) return null;
   return WEB_LOCAL_REPLIES[name] || null;
 }
 

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

@@ -298,6 +298,13 @@ export function openEvents(handlers = {}, opts = {}) {
   };
 }
 
+// A session's working set as the model has it (WorkingSet: {items, at,
+// running}), 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,150 @@ 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,.ws-item.dropped{opacity:.5}
+.ws-item.forgotten .t,.ws-row.forgotten .t,.ws-foot .l.forgotten,.ws-item.dropped .t,.ws-row.dropped .t,.ws-foot .l.dropped{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,.ws-row.dropped .k,.ws-row.dropped .t,.ws-foot .l.dropped{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}
+/* Steering (drop / undrop): a row's actions on hover and keyboard focus (always where there is no hover); a pending op's row dashed warn with its pill, the footer counting them. */
+.ws-act{flex:none;display:inline-flex;gap:4px;opacity:0}
+.ws-row:hover .ws-act,.ws-row:focus-within .ws-act,.ws-ghead:hover .ws-act,.ws-ghead:focus-within .ws-act,.ws-row.pending .ws-act{opacity:1}
+@media (hover:none){.ws-act{opacity:1}}
+.ws-act-b{flex:none;padding:0 6px;border:1px solid var(--border-strong);border-radius:4px;background:transparent;font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;font-weight:400;line-height:16px;color:var(--text-muted);cursor:pointer}
+.ws-act-b:hover:not(:disabled){filter:none;color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}
+.ws-act-b:disabled{opacity:.5;cursor:default}
+.ws-ghead{display:flex;align-items:center;gap:4px}
+.ws-ghead>.ws-group-head{flex:1;min-width:0}
+.ws-row.pending{border:1px dashed var(--warn-border);background:var(--warn-bg)}
+.ws-row.pending:hover{background:var(--warn-bg)}
+.ws-pend{flex:none;padding:0 6px;border:1px solid var(--warn-border);border-radius:999px;background:var(--warn-bg);color:var(--warn-text);font-family:ui-sans-serif,system-ui,sans-serif;font-size:10.5px;line-height:15px;white-space:nowrap}
+.ws-pending{margin-top:8px;padding:4px 8px;border:1px dashed var(--warn-border);border-radius:6px;background:var(--warn-bg);color:var(--warn-text);font-size:11.5px;line-height:20px}
+.ws-pending .ws-act-b{color:var(--warn-text);border-color:var(--warn-border)}
+.ws-popover.sheet .ws-row .ws-act{display:none}
+.ws-strip{display:flex;gap:8px;padding:2px 6px 6px 26px}
+.ws-strip .ws-act-b{padding:0 14px;font-size:12.5px;line-height:28px;border-radius:6px}
+.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 +1118,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

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,
@@ -226,6 +228,8 @@ export function createStreamHandlers(deps) {
     // the conversation (!rollback, !cmd, a continue answered no) re-reads it.
     command_ran: async (data) => {
       const id = selected();
+      // A queued /working-set line is no longer pending (the list's pill).
+      workingSet?.commandRan(data);
       const view = commandView(data, clientId);
       if (view.modelName && view.modelName !== state().model) {
         state().model = view.modelName;
@@ -288,6 +292,8 @@ export function createStreamHandlers(deps) {
     // turn: its bubble goes here, so the cards it shows come after it. One
     // queued for after the turn (/model X mid-turn) shows waiting here.
     command_queued: (data) => {
+      // A /working-set line queued for after the turn: pending in the list.
+      workingSet?.commandQueued(data);
       // A card's action waits for its command_ran: shown only if it answers.
       if ((data.anytime || data.waits) && !data.card && !commandBubble(data.command_id)) addCommandBubble(commandView(data, clientId));
     },
@@ -307,6 +313,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_html.js

@@ -60,6 +60,11 @@ export function llmEditLine(edit) {
     const tokens = Number(edit.tokens) > 0 ? ` · ~${compactTokens(Number(edit.tokens))}` : "";
     return `✂ stubbed: ${edit.note || "stale"}${tokens}`;
   }
+  // The user's drop (/working-set drop, the working set's list).
+  if (edit.kind === "drop") {
+    const tokens = Number(edit.tokens) > 0 ? ` · ~${compactTokens(Number(edit.tokens))}` : "";
+    return `✂ dropped by the user${tokens}`;
+  }
   return "";
 }