samagotchi 0.100.0 → 0.101.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/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

@@ -345,7 +345,13 @@ button.task-stop:hover:not(:disabled){background:var(--danger-bg-dim);filter:non
   --md-strong-color:var(--text-bright);--md-blockquote-color:var(--text-muted);--md-code-color:var(--text);
   --md-pre-size:12.5px;--md-cell-size:13px
 }
-.md-compact:is(.ts-asking,.question-said-full){white-space:normal}
+.gen-text.md-compact{
+  --md-heading-size:14.5px;--md-heading-color:var(--text);
+  --md-subheading-size:14px;--md-subheading-color:var(--text-2);
+  --md-strong-color:var(--text);--md-blockquote-color:var(--text-muted);--md-code-color:var(--text);
+  --md-pre-size:12.5px;--md-cell-size:13px
+}
+.md-compact:is(.ts-asking,.question-said-full,.gen-text){white-space:normal}
 .md-compact :is(h1,h2,h3,h4,h5,h6){font-size:var(--md-heading-size);font-weight:600;line-height:1.4;margin:8px 0 2px;color:var(--md-heading-color)}
 .md-compact :is(h4,h5,h6){font-size:var(--md-subheading-size);color:var(--md-subheading-color)}
 .md-compact :is(p,ul,ol,blockquote,table,pre){margin:0 0 6px}
@@ -861,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}
@@ -968,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/markdown_place.js

@@ -7,11 +7,17 @@
 // The texts whose refs linkTextRefs links: the answers and the closed
 // steps' texts.
 const TEXTS = ".bubble.output, .gen:not(.live) > .gen-text";
+// The closed steps' texts still shown raw: a live turn's (a reload's come
+// rendered, turn_view.js textTemplate).
+const RAW_STEPS = ".gen:not(.live) > .gen-text:not(.markdown)";
 
 export function createMarkdownPlace({
   capabilities, renderText, roots, touchedFiles, currentDir, linkRefs, applyFinalAnswer, findInTurnRoots, normalize,
-  pairAnswerRefs, setAnswerRefs = () => {},
+  pairAnswerRefs, setAnswerRefs = () => {}, answerRefsOf = () => null,
 }) {
+  // The raw step texts already waiting for their step's open.
+  const waiting = new WeakSet();
+
   // A text the page already shows as its markdown HTML (POST /api/render,
   // sanitised there), or null: markdown off here (no request), or a failed
   // read (the raw text stays).
@@ -55,6 +61,7 @@ export function createMarkdownPlace({
   // turn's end and after a reload's render. A ref already made stays as it
   // is.
   function linkTextRefs() {
+    renderStepTexts();
     const pageRoots = roots();
     const touched = touchedFiles(pageRoots);
     for (const root of pageRoots) {
@@ -66,5 +73,44 @@ export function createMarkdownPlace({
     }
   }
 
+  // The closed steps' raw texts as markdown, as the answers' (markdown on
+  // only): each from its step's first open (a turn's end would ask once per
+  // step, folded or not), as a resolved question card's kept reply. The
+  // text stays as its source (stepText); its refs, a question's, pair again
+  // on the swap, then the `path:line` ones (linkRefsIn). A null render
+  // keeps the text, and the next open asks again.
+  function renderStepTexts() {
+    if (capabilities().display !== true) return;
+    for (const root of roots()) {
+      for (const el of root.querySelectorAll(RAW_STEPS)) {
+        const step = el.parentElement;
+        if (waiting.has(el) || !step?.addEventListener) continue;
+        waiting.add(el);
+        renderOnOpen(step, el, el.textContent);
+      }
+    }
+  }
+
+  function renderOnOpen(step, el, text) {
+    let state = "raw";
+    const draw = () => {
+      if (!step.open || state !== "raw") return;
+      state = "asking";
+      renderMarkdown(text).then((html) => {
+        if (!html || el.textContent !== text) { state = html ? "done" : "raw"; return; }
+        state = "done";
+        step.removeEventListener("toggle", draw);
+        const refs = answerRefsOf(el);
+        el.setAttribute("data-copy-source", text);
+        // Sanitised on the server (POST /api/render).
+        el.innerHTML = html;
+        el.classList.add("markdown", "md-compact");
+        linkRefsIn(el, refs);
+      });
+    };
+    step.addEventListener("toggle", draw);
+    draw();
+  }
+
   return { renderMarkdown, pairRefsIn, linkRefsIn, applyFinalMarkdown, linkTextRefs };
 }

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

@@ -19,7 +19,8 @@ import { composerAfterAck, dropEarlyRestores, restoreOnAck } from "./restore.js"
 // (start_page.js: pendingPick(), chosenModel(), newChoices(),
 // clearChoices()); +takeDelivery()+ the delivery line's armed choice;
 // +composer+: {el (the text box), button (Send/Start), chips(),
-// setChips(list), fit(), clear(), openForVisit(), focus()}; +historyEl+,
+// setChips(list), fit(), clear(), openForVisit(), focus(), noteDraft(id) (the
+// text was written in session id)}; +historyEl+,
 // +turnDom+; +makeUserBubble(prompt, opts)+, +bubbleById(id)+,
 // +addCommandBubble(view)+; +addCreatedSession(created)+, +select(id)+,
 // +showNotice(text)+, +updateInfoBar()+, +updateComposerMode()+,
@@ -128,7 +129,10 @@ export function createSendTurn({
       const restored = restoreOnAck(ack?.enqueued_id, earlyRestores, { myId: clientId, sentIds });
       // A restored line must be seen: the composer opens for this visit.
       if (restored?.refill && sentTo === session()) composer.openForVisit();
-      promptEl.value = composerAfterAck({ sent: line, current: promptEl.value, refill: restored?.refill || "" });
+      const before = promptEl.value;
+      promptEl.value = composerAfterAck({ sent: line, current: before, refill: restored?.refill || "" });
+      // A line back from sentTo is a draft of that session, wherever the page is now.
+      if (promptEl.value.trim() && promptEl.value !== before) composer.noteDraft(sentTo);
       composer.fit();
       // Only the sent chips go: images added since stay (they go up at their own send).
       const kept = chipsAfterSend(composer.chips(), sending);

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

@@ -1,4 +1,4 @@
-import { continueRefusal, continuedText, openChildrenTemplate } from "./chains.js";
+import { continueRefusal, continuedText, openChildrenTemplate, openerText } from "./chains.js";
 import { cantText, deleteConfirmText, goneSessionNotice } from "./format.js";
 import { sessionHash } from "./route.js";
 import { inTree } from "./sessions_list.js";
@@ -14,12 +14,14 @@ import { inTree } from "./sessions_list.js";
 // +refresh()+ fetches the list); +lists+ (lists_view.js: render);
 // +select(id)+, +clearSelection()+, +showNotice(text)+, +updateInfoBar()+,
 // +toast(text, action, options)+, +addCreatedSession(created)+,
-// +fillOpener(created)+ (the new link's composer), +closeLiveStream()+ (the live
+// +fillOpener(created, continuedId)+ (the new link's composer; returns a draft
+// from another session it displaced, or null), +restoreDraft(draft, opener)+
+// (that draft back, never over newer text), +closeLiveStream()+ (the live
 // stream's close, the stream left as it is) and +workerGone(id)+ the page's.
 // +alert+ / +confirm+: the browser's.
 export function createSessionActions({
   selected, state, sessions, setSessions, api, eventsLive, refresh, lists,
-  select, clearSelection, showNotice, updateInfoBar, toast, addCreatedSession, fillOpener, closeLiveStream, workerGone,
+  select, clearSelection, showNotice, updateInfoBar, toast, addCreatedSession, fillOpener, restoreDraft, closeLiveStream, workerGone,
   alert = (text) => globalThis.alert(text), confirm = (text) => globalThis.confirm(text),
 }) {
   // The session this tab is stopping: its stream may close before the stop
@@ -105,8 +107,11 @@ export function createSessionActions({
         return;
       }
       await select(next);
-      if (selected() === next) fillOpener(created);
-      toast(continuedText(id, created), null, { sticky });
+      // A draft carried over from elsewhere gave way to the opener: the
+      // toast brings it back, and stays until closed so it can't be lost.
+      const displaced = selected() === next ? fillOpener(created, id) : null;
+      const restore = displaced ? { label: "Restore draft", run: () => restoreDraft(displaced, openerText(created)) } : null;
+      toast(continuedText(id, created), restore, { sticky: sticky || !!displaced });
     } catch (e) {
       const refusal = continueRefusal(e, sessions());
       if (refusal.kind === "open") {

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