samagotchi 0.148.0 → 0.150.0

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

@@ -14,6 +14,7 @@
 <link rel="stylesheet" href="/assets/annotate_bar.css">
 <link rel="stylesheet" href="/assets/composer.css">
 <link rel="stylesheet" href="/assets/forms.css">
+<link rel="stylesheet" href="/assets/objectives.css">
 <style>
 /* Icon masks shared by the phone info bar and the all view's cards (the stroke only shapes the mask; the icon takes currentColor); the image icon is composer.css's. */
 :root{--icon-archive:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M6.5 9h3'/%3E%3C/svg%3E");--icon-unarchive:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='3.5' rx='1'/%3E%3Cpath d='M3.25 6.25v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6M8 11.5V8.25M6.5 9.75 8 8.25l1.5 1.5'/%3E%3C/svg%3E")}
@@ -345,10 +346,16 @@ button.system-one-wrong,.system-one-wrong.marked{flex:none;padding:1px 6px;borde
 .thinking-body{margin-top:6px;font-size:13px;color:var(--text-3);white-space:pre-wrap;word-break:break-word;font-style:italic;max-height:240px;overflow:auto}
 /* The turn block (the stage's cloud, the history): one block per turn, its steps as collapsed rows, the live one open on top. */
 .turn-work{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;background:var(--bg-panel);padding:8px 12px;font-size:14px}
-.turn-work>summary{cursor:pointer;color:var(--text-muted);font-size:13px;font-weight:600;user-select:none;list-style:none}
+.turn-work>summary{position:relative;padding-left:13px;cursor:pointer;color:var(--text-muted);font-size:13px;font-weight:600;user-select:none;list-style:none}
 .turn-work>summary::-webkit-details-marker{display:none}
-.turn-work>summary::before{content:"▸ ";color:var(--accent)}
-.turn-work[open]>summary::before{content:"▾ "}
+.turn-work>summary::before{content:"▸";position:absolute;left:0;color:var(--accent)}
+/* The summary's line: flex on this span, not on <summary> (WebKit's flex on a summary has had quirks). The chevron and the steps toggle the block, the footprint opens the turn's working set (working_set_view.js footClick). */
+.tw-sum{display:flex;align-items:baseline;gap:10px;min-width:0}
+/* The count gives way before the footprint, which is what the line is for. */
+.ws-foot~.turn-steps{margin-left:auto;flex:0 100 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:500;color:var(--text-muted);white-space:nowrap}
+/* A phone has no count to tap, and the chevron is then the only way to the steps: its hit area spreads over the block's padding, the glyph stays where it is. */
+@media (max-width:600px){.ws-foot~.turn-steps{display:none}.turn-work>summary::before{left:-12px;top:-8px;width:36px;box-sizing:border-box;padding:8px 0 8px 12px}}
+.turn-work[open]>summary::before{content:"▾"}
 /* Closed, a block keeps its box (the bar, the border, the width): a click changes its height only (details_motion.js); thinking and the recap the same. */
 /* A step's body (thinking, narration, rows, cards) sits --step-indent right of its summary, so the thinking
    chevron and the row marks share one column under the step's own chevron. The summary takes it back with a
@@ -398,11 +405,11 @@ button.system-one-wrong,.system-one-wrong.marked{flex:none;padding:1px 6px;borde
 .gen:not(.live) .gen-text{font-size:14px;color:var(--text-2)}
 .gen-text:empty{display:none}
 .gen .activity-body{margin-top:6px}
-/* One gen, no thinking, no tool rows: nothing to stack yet, so the narration streams like a plain answer bubble. */
-.turn-work:not(:has(.gen~.gen,.thinking-body,.activity-body)){border:0;padding:0;background:transparent}
-.turn-work:not(:has(.gen~.gen,.thinking-body,.activity-body))>summary,.turn-work:not(:has(.gen~.gen,.thinking-body,.activity-body)) .gen>summary{display:none}
-.turn-work:not(:has(.gen~.gen,.thinking-body,.activity-body)) .gen{margin:0;padding:0;border:0;background:transparent}
-.turn-work:not(:has(.gen~.gen,.thinking-body,.activity-body)) .gen-text{margin:0;background:var(--bg-panel);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:12px 14px;opacity:.95}
+/* One gen, no thinking, no tool rows: nothing to stack yet, so the narration streams like a plain answer bubble. A step that closed with text (a line steered in after it, its answer gone from the block) is a row: its summary is the way to its text. */
+.turn-work:not(:has(.gen~.gen,.thinking-body,.activity-body,.gen:not(.live)>.gen-text)){border:0;padding:0;background:transparent}
+.turn-work:not(:has(.gen~.gen,.thinking-body,.activity-body,.gen:not(.live)>.gen-text))>summary,.turn-work:not(:has(.gen~.gen,.thinking-body,.activity-body,.gen:not(.live)>.gen-text)) .gen>summary{display:none}
+.turn-work:not(:has(.gen~.gen,.thinking-body,.activity-body,.gen:not(.live)>.gen-text)) .gen{margin:0;padding:0;border:0;background:transparent}
+.turn-work:not(:has(.gen~.gen,.thinking-body,.activity-body,.gen:not(.live)>.gen-text)) .gen-text{margin:0;background:var(--bg-panel);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:12px 14px;opacity:.95}
 @media(max-width:600px){.gen{--step-indent:8px}}
 /* A question card asks for input like the composer card, so it wears the same glass (the recipe above); only its warm tint is its own. */
 .bubble.question{border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 7%,var(--glass-bg));padding:10px 12px}
@@ -977,11 +984,11 @@ body.working-set .ts-live{position:relative;padding-right:264px}
 }
 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}
-@media(hover:hover){.ws-foot:hover{color:var(--text-muted);background:var(--bg-hover)}}
+/* A finished turn's footprint, its block's summary line (working_set_view.js): a click opens its list. */
+.ws-foot{flex:0 1 auto;min-width:0;padding:0 6px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
+@media(hover:hover){.ws-foot:hover{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 .w{font-family:ui-sans-serif,system-ui,sans-serif;font-weight:600;color:var(--text-muted)}
 .ws-foot .sep{color:var(--border-strong)}
 .ws-foot .e{color:var(--accent)}
 .ws-foot .k{color:var(--think-text)}
@@ -1326,8 +1333,6 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
 .us-row-head span{flex:1 1 0;min-width:0;text-align:right;color:var(--text-2);font-size:12px;overflow-wrap:anywhere}
 .us-detail{margin-top:4px;color:var(--text-muted);font-size:12px;overflow-wrap:anywhere}
 .us-kept{margin-top:6px;color:var(--warn-text);font-size:12px}
-.us-kept ul{margin:3px 0 0;padding-left:18px;color:var(--text-2)}
-.us-kept li{overflow-wrap:anywhere}
 .us-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:10px}
 @media(max-width:600px){#updateSheet{position:fixed;inset:auto 8px 8px;width:auto;max-width:none;max-height:min(80dvh,calc(100dvh - 16px));margin:0}}
 .ctx-pop-kind{font-size:11px;color:var(--text-muted)}
@@ -1788,6 +1793,7 @@ a{color:var(--accent)}
     <div id="stage">
       <div id="markdownWarning" class="markdown-warning" hidden></div>
       <div id="markdownTip" class="markdown-tip" hidden><span class="markdown-tip-text"></span><button type="button" class="markdown-tip-close" aria-label="Dismiss tip" title="Dismiss tip">×</button></div>
+      <div id="objectivesStrip" hidden></div>
       <div id="history"></div>
       <div id="empty"></div>
       <div id="notice" role="status" hidden></div>

data/lib/samagotchi/web/public/objectives.css

@@ -0,0 +1,80 @@
+/* The session's objectives (objectives_strip.js, objectives_entry.js). Colours are tokens.css's only. */
+#objectivesStrip{flex:none;padding:6px max(16px,calc((100% - 960px)/2));border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg-panel) 60%,transparent)}
+#objectivesStrip[hidden]{display:none}
+.obj-strip{display:flex;align-items:center;gap:8px;min-height:32px}
+.obj-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1}
+.obj-chip{display:inline-flex;align-items:baseline;gap:6px;max-width:280px;min-width:0;padding:3px 10px;border-radius:999px;border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-2);font-size:13px;line-height:1.4}
+.obj-chip.done{background:transparent;border-color:var(--border-strong);color:var(--text-muted)}
+.obj-id{flex:none;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent)}
+.obj-chip.done .obj-id{color:var(--text-muted)}
+.obj-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.obj-count{flex:none;color:var(--text-muted);font-size:12px;font-variant-numeric:tabular-nums}
+/* An objectives note in the conversation: pills for a list, a line for an edit. */
+.bubble.note.objectives-entry{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:transparent;border:0;padding:2px 0;white-space:normal}
+.obj-entry-label{color:var(--text-muted);font-size:12px;margin-right:2px}
+.obj-pill{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--text-2);font-size:13px;line-height:1.45}
+.obj-pill.done{background:transparent;border-color:var(--border-strong);color:var(--text-muted)}
+.bubble.note.objectives-entry.change{flex-wrap:nowrap;gap:10px;color:var(--text-muted);font-size:13px}
+.obj-rule{flex:1 1 16px;min-width:16px;height:1px;background:var(--border-strong)}
+.obj-change{min-width:0;text-align:center;overflow-wrap:anywhere}
+/* The strip's chips open the edit list. */
+button.obj-chip{cursor:pointer;font:inherit;font-size:13px;line-height:1.4;text-align:left}
+@media(hover:hover){button.obj-chip:hover:not(:disabled){filter:none;border-color:var(--accent)}}
+.obj-edit{flex:none;background:transparent;color:var(--text-muted);padding:3px 8px;font-size:12px}
+@media(hover:hover){.obj-edit:hover:not(:disabled){filter:none;color:var(--text-bright)}}
+.obj-waiting{flex:none;color:var(--warn-text);font-size:12px}
+/* The edit list (chip_popover.js's shell, .ctx-popover; a bottom sheet on a phone). */
+.obj-panel{display:flex;flex-direction:column;gap:10px;overflow:auto}
+.obj-rows{display:flex;flex-direction:column;gap:2px}
+.obj-row{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-top:1px solid var(--border)}
+.obj-row:first-child{border-top:0}
+.obj-row .obj-id{padding-top:3px}
+.obj-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
+.obj-row-text{display:block;width:100%;padding:2px 0;background:transparent;color:var(--text);text-align:left;font-size:14px;line-height:1.4;border-radius:4px;white-space:normal;overflow-wrap:anywhere}
+@media(hover:hover){.obj-row-text:hover:not(:disabled){filter:none;text-decoration:underline dotted var(--text-muted)}}
+.obj-row.done .obj-row-text{color:var(--text-muted)}
+.obj-row.dropped .obj-row-text{color:var(--text-faint);text-decoration:line-through}
+.obj-row.done .obj-id,.obj-row.dropped .obj-id{color:var(--text-muted)}
+.obj-row-sub{display:flex;flex-direction:column;gap:1px;color:var(--text-muted);font-size:12px;overflow-wrap:anywhere}
+.obj-row-acts{flex:none;display:flex;gap:4px}
+.obj-check.refuted{color:var(--warn-text)}
+.obj-check.confirmed{color:var(--text-2)}
+.obj-act{padding:3px 10px;font-size:12px;border-radius:6px}
+.obj-act.ghost{background:var(--bg-raised);color:var(--text-2)}
+form.obj-row{align-items:center}
+.obj-input{flex:1;min-width:0;padding:5px 8px;border-radius:6px;border:1px solid var(--border-strong);background:var(--bg-inset);color:var(--text);font-size:14px}
+.obj-add{display:flex;gap:6px;align-items:center}
+.obj-note{color:var(--text-muted);font-size:12px}
+/* A phone: one line, the objective being worked on and how far along, and the whole list a tap away in a bottom sheet (chip_popover.js), never pushing the conversation down. */
+@media(max-width:600px){
+  #objectivesStrip{padding:4px 12px}
+  .obj-strip{min-height:36px}
+  .obj-chips{flex-wrap:nowrap}
+  .obj-chip:not(.first){display:none}
+  .obj-chip.first{flex:1;max-width:none;min-height:36px;align-items:center;border-radius:10px}
+  .obj-edit{padding:8px;min-height:36px}
+  .obj-waiting{max-width:90px;font-size:11px;line-height:1.2}
+  .obj-pill{font-size:12.5px}
+  .bubble.note.objectives-entry.change{font-size:12.5px;gap:6px}
+}
+.obj-panel.sheet{font-size:15px;max-height:85dvh}
+.obj-panel.sheet .obj-row{align-items:flex-start;flex-wrap:wrap;padding:8px 0}
+.obj-panel.sheet form.obj-row{align-items:center;flex-wrap:nowrap}
+/* The text keeps the row's width and the buttons get their own line: a phone reads a reason. */
+.obj-panel.sheet .obj-row-main{flex:1 1 calc(100% - 40px)}
+.obj-panel.sheet .obj-row-text{font-size:15px;min-height:32px}
+.obj-panel.sheet .obj-row-acts{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end;gap:6px}
+.obj-panel.sheet .obj-act{min-height:44px;min-width:56px;padding:0 8px;font-size:14px;border-radius:10px}
+.obj-panel.sheet .obj-input{min-height:44px;font-size:16px;border-radius:10px}
+.obj-panel.sheet .obj-note{font-size:12px}
+@media (prefers-reduced-motion:reduce){.obj-chip,.obj-act{transition:none}}
+/* A move: a turn's line above its answer, a tool row's chip, a decision card's "Concerns". */
+.obj-pill.obj-mark{padding:0 7px;font:700 11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent)}
+.obj-moves{display:flex;flex-direction:column;gap:2px;margin-bottom:-4px;font-size:13px}
+.obj-move-line{display:flex;align-items:baseline;gap:8px;color:var(--text-2);flex-wrap:wrap}
+.obj-move-note{min-width:0;flex:1 1 200px;overflow-wrap:anywhere}
+.obj-concerns .obj-pill{margin-right:4px}
+.obj-notyet{flex:none}
+.obj-moves:not(.newest) .obj-notyet{display:none}
+@media (pointer:coarse){.obj-notyet{min-height:36px}}
+.obj-short{display:flex;justify-content:flex-end;margin-top:-6px}

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

@@ -0,0 +1,22 @@
+// An objectives note in the conversation, in place of the plain note bubble
+// (turn_html.js noteBubbleTemplate): the list as pills, or, for a later edit, one
+// line saying what the user changed. Read-only: the strip above the history is
+// where the list is edited (objectives_strip.js). The raw note text stays the
+// tooltip. A module of its own: static JS is cached at unversioned URLs.
+import { html, nothing } from "./vendor/lit-html.js";
+import { DROPPED, entryLine } from "./objectives_model.js";
+
+function pill(item) {
+  const klass = `obj-pill ${item.status}`;
+  return html`<span class=${klass} title=${item.done_when ? `done when: ${item.done_when}` : nothing}><span class="obj-id">${item.id}</span> ${item.status === "done" ? "✓ " : ""}${item.text}</span>`;
+}
+
+export function objectivesEntryTemplate(note, timeTitle = "") {
+  const line = entryLine(note.objectives);
+  const tip = [timeTitle, note.content].filter(Boolean).join("\n");
+  if (line) {
+    return html`<div class="bubble note objectives-entry change" title=${tip}><span class="obj-rule" aria-hidden="true"></span><span class="obj-change">${line}</span><span class="obj-rule" aria-hidden="true"></span></div>`;
+  }
+  const items = (note.objectives?.items || []).filter((i) => i.status !== DROPPED);
+  return html`<div class="bubble note objectives-entry" title=${tip}><span class="obj-entry-label">Objectives</span>${items.map(pill)}</div>`;
+}

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

@@ -0,0 +1,100 @@
+// The session's objectives as the page reads them (pure, no DOM): the fold the
+// server sends (Objectives.view: {items: [{id, text, status, done_when?,
+// move?, check?}], pending}) and what a list note's entry says (Objectives.entry:
+// {items, changes?}). See docs/internals/objectives.md.
+
+export const ACTIVE = "active";
+export const DONE = "done";
+export const DROPPED = "dropped";
+
+const itemsOf = (list) => (Array.isArray(list?.items) ? list.items : []);
+
+// The objectives the strip shows: active first, then done; a dropped one only
+// in the edit list.
+export function stripItems(list) {
+  const items = itemsOf(list);
+  return [...items.filter((i) => i.status === ACTIVE), ...items.filter((i) => i.status === DONE)];
+}
+
+// Done of the ones still meant (a dropped one doesn't count).
+export function progress(list) {
+  const kept = itemsOf(list).filter((i) => i.status !== DROPPED);
+  return { done: kept.filter((i) => i.status === DONE).length, total: kept.length };
+}
+
+// The one objective a one-line strip names: the first still active, else the
+// last one done.
+export function headline(list) {
+  const items = stripItems(list);
+  return items.find((i) => i.status === ACTIVE) || items[items.length - 1] || null;
+}
+
+// One change as words after "You": "marked O2 done", "reworded O3: old → new".
+export function changeText(change) {
+  const { id, kind, text, was } = change || {};
+  switch (kind) {
+    case "added": return `added ${id} ${text}`;
+    case "reworded": return `reworded ${id}: ${was} → ${text}`;
+    case DONE: return `marked ${id} done`;
+    case DROPPED: return `dropped ${id} ${text}`;
+    case "reopened": return `reopened ${id}`;
+    default: return String(id ?? "");
+  }
+}
+
+// An entry's line: what the user did, or null when it has nothing to say (a
+// first list, a list sent again), which then shows the list itself.
+export function entryLine(entry) {
+  const changes = Array.isArray(entry?.changes) ? entry.changes : [];
+  return changes.length ? `You ${changes.map(changeText).join(" · ")}` : null;
+}
+
+// The one route to an edit: the lines /objectives takes (ObjectivesCommand).
+const oneLine = (text) => String(text ?? "").replace(/\s+/g, " ").trim();
+export const markLine = (verb, id) => `/objectives ${verb} ${id}`;
+export const addLine = (text) => (oneLine(text) ? `/objectives add ${oneLine(text)}` : null);
+export const rewordLine = (id, text) => (oneLine(text) ? `/objectives edit ${id} ${oneLine(text)}` : null);
+
+// An item's text as the edit box shows it: the form /objectives reads back.
+export function editableText(item) {
+  return item?.done_when ? `${item.text} (done when: ${item.done_when})` : String(item?.text ?? "");
+}
+
+// What the strip says about an edit waiting for the running turn's end. Idle,
+// it lands in a moment and says nothing.
+export function pendingText(list, running) {
+  return list?.pending && running ? "Applies after this turn" : null;
+}
+
+// A check's line in the list: its verdict and reason, or that it runs. Information
+// only (ObjectivesCheck). null: no check of the latest move.
+export function checkText(check) {
+  if (!check) return null;
+  if (check.running) return "Checking…";
+  const word = check.verdict === "no_answer" ? "no answer" : check.verdict;
+  return `Check: ${word}${check.reason ? ` — ${check.reason}` : ""}`;
+}
+
+// When the soonest running check runs out, in ms; null with none. No event says so
+// when its worker dies.
+export function nextExpiry(list) {
+  const times = itemsOf(list).filter((i) => i.check?.running && i.check.until).map((i) => Date.parse(i.check.until)).filter(Number.isFinite);
+  return times.length ? Math.min(...times) : null;
+}
+
+// +list+ without the running checks past their time.
+export function expireChecks(list, now) {
+  if (!list) return list;
+  const gone = (i) => i.check?.running && Date.parse(i.check.until) <= now;
+  if (!itemsOf(list).some(gone)) return list;
+  return { ...list, items: list.items.map((i) => {
+    if (!gone(i)) return i;
+    const { check: _gone, ...rest } = i;
+    return rest;
+  }) };
+}
+
+// What a tap on Not yet tells the agent: a normal message, as if typed.
+export function notYetText(item) {
+  return `Not yet on ${item.id} (${item.text}).`;
+}

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

@@ -0,0 +1,145 @@
+// The model's moves on the objectives, as chips in the conversation. A tool row
+// of the objectives tool shows its id as a chip (moveRowText, turn_html.js, live
+// and reloaded alike), but a finished turn's steps collapse, so a finished turn
+// also gets a line of its moves between its block and its answer (mockup G). The
+// rows are the record: one observer on the history reads them back, as
+// answer_fold.js decorates its answers, so every path that fills it is covered.
+// Nothing is drawn for a turn with no move. A decision-card's "Concerns O2" gets
+// the same chip. The newest long answer of a session with a list offers its
+// short version where the bundle's /short is there (decision-card): the card
+// lands under it, so the button sits there too. A module of its own: static JS is cached at unversioned URLs.
+import { foldable } from "./answer_fold.js";
+import { keepFollowing } from "./scroll.js";
+import { html, nothing, render } from "./vendor/lit-html.js";
+
+const ROW_TITLE = /^(O\d+)\s+([^]*)$/;
+const RECORDED = /Recorded a move on /;
+const CONCERNS = /^Concerns (O\d+)\b/;
+
+// A row's move: {id, note}, null for any other row, and for a call that recorded
+// nothing (no list, a refusal: Tools::ObjectivesTool).
+export function moveOfRow(row) {
+  if (row?.tool !== "objectives" || !RECORDED.test(String(row.output || ""))) return null;
+  const found = ROW_TITLE.exec(String(row.title || row.params || ""));
+  return found ? { id: found[1], note: found[2] } : null;
+}
+
+// The row's title, its objective a chip, marked for the line above an answer
+// when the call recorded a move.
+export function moveRowText(row, shown) {
+  if (row?.tool !== "objectives") return shown;
+  const found = ROW_TITLE.exec(String(shown ?? ""));
+  if (!found) return shown;
+  const move = moveOfRow(row);
+  return html`<span class="obj-pill obj-mark" data-move-id=${move ? move.id : nothing} data-move-note=${move ? move.note : nothing}>${found[1]}</span> ${found[2]}`;
+}
+
+// A finished turn block's moves, in order.
+export function movesInBlock(block) {
+  return [...block.querySelectorAll("[data-move-id]")].map((el) => ({ id: el.dataset.moveId, note: el.dataset.moveNote || "" }));
+}
+
+// A card body's "Concerns O2 …" paragraph: the id a chip. Idempotent.
+export function chipConcerns(body) {
+  for (const p of body.querySelectorAll("p")) {
+    const first = p.firstChild;
+    if (first?.nodeType !== 3) continue;
+    const found = CONCERNS.exec(first.textContent);
+    if (!found) continue;
+    const chip = body.ownerDocument.createElement("span");
+    chip.className = "obj-pill obj-mark";
+    chip.textContent = found[1];
+    first.textContent = first.textContent.slice(found[0].length);
+    p.insertBefore(chip, first);
+    p.classList.add("obj-concerns");
+  }
+}
+
+function lineFor(block) {
+  const next = block.nextElementSibling;
+  return next?.classList.contains("obj-moves") ? next : null;
+}
+
+// @param historyEl the history
+// @param notYet (id) the tap on a move's Not yet (the newest turn's only: CSS)
+// @param canShorten () whether the newest long answer offers its short version
+// @param shorten () the tap on it
+export function createObjectivesMoves({ historyEl, notYet = () => {}, canShorten = () => false, shorten = () => {} }) {
+  // Off once tapped; back when +ask+ answers false (a failure, already told).
+  const once = (e, ask) => {
+    const button = e.currentTarget;
+    button.disabled = true;
+    Promise.resolve(ask()).then((sent) => {
+      if (sent === false) button.disabled = false;
+    });
+  };
+  const drawLine = (line, moves) => render(html`${moves.map((m) => html`<div class="obj-move-line">
+    <span class="obj-pill obj-mark">${m.id}</span><span class="obj-move-note">${m.note}</span>
+    <button type="button" class="obj-act ghost obj-notyet" title=${`Tell the agent: not yet on ${m.id}`} @click=${(e) => once(e, () => notYet(m.id))}>Not yet</button>
+  </div>`)}`, line);
+
+  const markNewest = () => {
+    const lines = [...historyEl.querySelectorAll(":scope > .obj-moves")];
+    lines.forEach((line, i) => line.classList.toggle("newest", i === lines.length - 1));
+  };
+
+  // After an answer's own rows (its Revise row, its timing line: the bubble's
+  // next siblings, one of which CSS reads by adjacency).
+  function shortRowPlace(answer) {
+    let place = answer;
+    while (place.nextElementSibling?.matches(".revise-row, .turn-timing")) place = place.nextElementSibling;
+    return place;
+  }
+
+  function placeShort() {
+    const answers = canShorten() ? historyEl.querySelectorAll(":scope > .bubble.output:not(.streaming)") : [];
+    const answer = answers[answers.length - 1];
+    const long = answer && foldable(answer.dataset.copySource || answer.textContent);
+    let row = historyEl.querySelector(":scope > .obj-short");
+    if (!long) {
+      row?.remove();
+      return;
+    }
+    if (!row) {
+      row = historyEl.ownerDocument.createElement("div");
+      row.className = "obj-short";
+      render(html`<button type="button" class="obj-act ghost" title="Ask for the short version; nothing enters the conversation"
+        @click=${(e) => once(e, shorten)}>Short version</button>`, row);
+    }
+    const place = shortRowPlace(answer);
+    if (place.nextElementSibling !== row) {
+      row.querySelector("button").disabled = false;
+      keepFollowing(historyEl, () => place.after(row));
+    }
+  }
+
+  function decorate() {
+    for (const block of historyEl.querySelectorAll(":scope > .turn-work")) {
+      const moves = movesInBlock(block);
+      const line = lineFor(block);
+      if (!moves.length) {
+        line?.remove();
+        continue;
+      }
+      const sig = JSON.stringify(moves);
+      if (line?.dataset.sig === sig) continue;
+      keepFollowing(historyEl, () => {
+        const el = line || historyEl.ownerDocument.createElement("div");
+        el.className = "obj-moves";
+        el.dataset.sig = sig;
+        drawLine(el, moves);
+        if (!line) block.after(el);
+      });
+    }
+    markNewest();
+    placeShort();
+    for (const card of historyEl.querySelectorAll(".plugin-card .card-body")) {
+      if (card.closest(".plugin-card").querySelector(".card-source")?.textContent === "decision-card") chipConcerns(card);
+    }
+  }
+
+  // The class toggle isn't a childList change, so this doesn't feed itself.
+  new MutationObserver(decorate).observe(historyEl, { childList: true, subtree: true });
+  decorate();
+  return { decorate };
+}