samagotchi 0.97.0 → 0.98.0

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

@@ -61,13 +61,13 @@ import { createStripGrip } from "./strip_grip.js";
 import { waitingOn } from "./notify.js";
 import { applySessionEvent, sortedByUpdated } from "./sessions_list.js";
 import { createNotifications } from "./notifications.js";
-import { tabTitle, topBarTitle } from "./session_title.js";
+import { renameShown, tabTitle, topBarTitle } from "./session_title.js";
 import { restartConfirmText, versionNotice } from "./update_notice.js";
 import {
   appendAboveLiveTiming, mergeTiming, normalizeTiming,
 } from "./timing.js";
 import { createLiveTurn } from "./live_turn.js";
-import { applyFinalAnswer, pairAnswerRefs } from "./answer_refs.js";
+import { applyFinalAnswer, pairAnswerRefs, setAnswerRefs } from "./answer_refs.js";
 import { installRefClicks } from "./refs.js";
 import { linkRefs, touchedFiles } from "./ref_scan.js";
 import { DONE_MS, applyInitEvent, dropDone, fadeDone, initRowTemplate, newInitTasks, seedInitTasks } from "./init_row.js";
@@ -97,6 +97,8 @@ const composerEl = $("#composer");
 // The open session's title in the top bar, when no strip card in sight
 // shows it; the tab's base ("Chi · <project>"), set by renderScope.
 const sessionTitleEl = $("#sessionTitle");
+const sessionTitleRowEl = $("#sessionTitleRow");
+const titleRenameBtn = $("#titleRenameBtn");
 let tabBase = null;
 let tabShown = null;
 const infoTextEl = $("#infoText");
@@ -210,8 +212,9 @@ const markdownPlace = createMarkdownPlace({
   findInTurnRoots: (selector) => findInTurnRoots(selector),
   normalize,
   pairAnswerRefs,
+  setAnswerRefs,
 });
-const { renderMarkdown, linkRefsIn, applyFinalMarkdown, linkTextRefs } = markdownPlace;
+const { renderMarkdown, pairRefsIn, linkRefsIn, applyFinalMarkdown, linkTextRefs } = markdownPlace;
 const turnDom = view === "stage"
   ? createStageView({
     ...viewArgs, isNearBottom: () => atHistoryEnd(), dockEl: $("#dock"), centerEl: $("#center"), composerEl,
@@ -291,6 +294,7 @@ const questionCards = createQuestionCards({
   askingText: () => turnDom.askingText(),
   renderMarkdown,
   linkRefs: linkRefsIn,
+  pairRefs: pairRefsIn,
 });
 // The history's bubbles (bubbles.js): output, end lines, every client's
 // prompts, the recap, warnings and notices, command and note bubbles.
@@ -473,6 +477,9 @@ const lists = createListsView({
   allViewOpen: () => allViewOpen(),
   openAllView: () => openAllView(),
   leaveAllView: (hash) => leaveAllView(hash),
+  renameShown,
+  onRename: () => rename.open(),
+  renaming: () => rename.isOpen(),
 });
 
 // Continue, Archive, Delete and Stop, and the start page when the open
@@ -496,13 +503,31 @@ const sessionActions = createSessionActions({
   closeLiveStream: () => streamControl?.close(),
   workerGone,
 });
-// ✎: /title through the chips' path (session_rename.js).
+// The title's ✎: /title through the chips' path (session_rename.js), the
+// input over the title row on screen: the top bar's when it shows the
+// title, else the active strip card's (updateSessionTitle decides which).
 const rename = createRename({
-  button: $("#infoRenameBtn"),
+  doc: document,
+  anchor: () => {
+    if (!sessionTitleRowEl.hidden) return sessionTitleRowEl;
+    const row = topStripEl.querySelector(".card.active .preview-row");
+    return row && row.getClientRects().length ? row : null; // not in the All sessions view's hidden strip
+  },
   session: () => selected,
   titleOf: (id) => lists.sessionsById().get(id)?.title || null,
+  shownTitle: () => shownTitle(),
+  closePopovers: () => {
+    lists.familyPop.close();
+    lists.chainPop.close();
+  },
+  // Not from inside a strip draw (its paintActive repositions, which may
+  // close): the held strip catches up after it.
+  onClose: () => queueMicrotask(() => lists.catchUp()),
   run: (line) => runSessionCommand(line),
 });
+titleRenameBtn.addEventListener("click", () => rename.open());
+document.addEventListener("scroll", () => rename.reposition(), true);
+window.addEventListener("resize", () => rename.reposition());
 
 const { confirmDelete, leaveGoneSession, continueSelected, archiveOne, setArchived } = sessionActions;
 
@@ -871,6 +896,8 @@ function renderSessionView(data, { kept = [] } = {}) {
   snapshotCards.during.forEach((card) => upsertCard(card));
   // A question the worker is blocked on (also after a reload).
   if (data.pending_question && data.pending_question.id && data.pending_question.status === "pending") {
+    // Its refs on the asking step, as question_requested puts them.
+    if (data.pending_question.refs) turnDom.questionRefs?.(data.pending_question.refs);
     questionCards.renderQuestion(data.pending_question);
     // The turn's replay drew it as asked; the snapshot knows whether it is
     // relayed to the parent now.
@@ -1055,9 +1082,6 @@ function updateInfoBar() {
   const deleteBtn = document.getElementById("infoDeleteBtn");
   const archiveBtn = document.getElementById("infoArchiveBtn");
   const continueBtn = document.getElementById("infoContinueBtn");
-  const renameBtn = document.getElementById("infoRenameBtn");
-  if (renameBtn) renameBtn.style.display = buttons.rename.shown ? "" : "none";
-  rename.follow(buttons.rename.shown ? selected : null);
   if (continueBtn) {
     continueBtn.style.display = buttons.continue.shown ? "" : "none";
     continueBtn.disabled = buttons.continue.disabled;
@@ -1087,11 +1111,16 @@ function updateInfoBar() {
 // card says it when the strip is shown and has one; else the top bar. The
 // browser tab names it too. It follows the card's (openTitle): a chain link
 // reads its card's title (cardTitle), whatever opener it was sent.
-function updateSessionTitle() {
+function shownTitle() {
   const shown = selected ? lists.sessionsById().get(selected) : null;
   const first = current.firstPreview || "";
   const raw = !selected ? "" : openTitle({ shown, first, cardTitle: (s) => lists.cardTitle(s) });
-  const title = raw === "\u2014" ? "" : raw; // "—": no first message yet
+  return raw === "\u2014" ? "" : raw; // "—": no first message yet
+}
+// The top bar's ✎ follows it (not a plain terminal's session), and an open
+// rename input follows the title row on screen (or closes, none showing).
+function updateSessionTitle() {
+  const title = shownTitle();
   const text = topBarTitle({
     title,
     cardShown: !!topStripEl.querySelector(".card.active"),
@@ -1099,7 +1128,9 @@ function updateSessionTitle() {
     allView: allViewOpen(),
   });
   if (sessionTitleEl.textContent !== text) sessionTitleEl.textContent = text;
-  if (sessionTitleEl.hidden !== !text) sessionTitleEl.hidden = !text;
+  if (sessionTitleRowEl.hidden !== !text) sessionTitleRowEl.hidden = !text;
+  const renamable = !!text && renameShown(current.owner);
+  if (titleRenameBtn.hidden !== !renamable) titleRenameBtn.hidden = !renamable;
   const tip = text ? title : "";
   if (sessionTitleEl.title !== tip) sessionTitleEl.title = tip;
   const tab = tabBase === null ? null : tabTitle({ title, base: tabBase });
@@ -1107,6 +1138,8 @@ function updateSessionTitle() {
     tabShown = tab;
     notifications.setBaseTitle(tab);
   }
+  rename.follow(selected);
+  rename.reposition();
 }
 
 // The stage takes a running turn's rows (its extras); else the history.

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

@@ -779,6 +779,10 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
    text, then its markdown when web.markdown is on (.markdown, stage_slots.js drawAsking); capped so the card keeps
    its room, read from the top. */
 .ts-asking{max-height:calc(var(--stage-max,60vh) * .35);overflow:auto;scrollbar-width:thin;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55;color:var(--narr);border-left:2px solid var(--border-strong);padding-left:10px}
+/* The question room (stage_view.js drawRoom): a model's own question whose asking text overflows that cap. The slot loses its
+   cap and its own scroll, and the stage's one scroll covers the whole reply (the stage's cap rises for the turn, stage_frame.js).
+   --stage-max also scales the extras, the cloud and the queued slot: a ceiling only, content that fit stays as it is. */
+.turn-stage.question-room .ts-asking{max-height:none;overflow:visible}
 .turn-stage.asking .ts-headline{display:none}
 @keyframes ts-fade{from{opacity:.35}}
 .ts-now{height:var(--ts-now-h);display:flex;align-items:center;gap:8px;min-width:0;padding:0 9px;border-radius:8px;background:var(--accent-tint);font-size:13px}
@@ -820,7 +824,12 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
 .ts-answer>.bubble.output>.copy-btn{top:0;right:0}
 /* The cloud: one chip (steps, calls, a tick per call), the turn view's block behind it. */
 /* The footer: the chip at the stage's bottom edge (the cloud's steps open above it, the scroller's last slot). */
-.ts-foot{flex:none;padding:0 14px 10px}
+.ts-foot{position:relative;flex:none;padding:0 14px 10px}
+/* The question room's jump pill (stage_view.js drawPill): at the scroller's bottom edge, above the chip, while the waiting
+   card is out of the stage's view; absolute, so the frame never counts it. */
+.ts-room-pill{position:absolute;bottom:100%;right:14px;margin-bottom:6px;padding:4px 11px;border:1px solid var(--warn-border);border-radius:999px;background:var(--warn-bg);color:var(--warn-text);font-size:12.5px;font-weight:600;line-height:1.4;white-space:nowrap;box-shadow:0 2px 8px var(--shadow-strong);animation:ts-fade .2s ease}
+.ts-room-pill:hover:not(:disabled){filter:none;color:var(--warn-bright);border-color:var(--warn);background:var(--warn-bg)}
+.ts-room-pill[hidden]{display:none}
 /* Below the turn's card: the lines queued for after it (each a turn of its own), apart from the turn by a dashed rule. */
 .ts-queued{flex:none;display:flex;flex-direction:column;gap:6px;padding:8px 14px 10px;border-top:1px dashed var(--border-strong);max-height:calc(var(--stage-max,60vh) * .3);overflow:auto;scrollbar-width:thin}
 .ts-queued:empty{display:none}
@@ -887,10 +896,6 @@ body.stage-view .turn-stage{position:absolute;left:0;right:0;bottom:100%;margin-
 #infoBar #infoStopBtn{background:var(--bg-raised);color:var(--warn-text);border:1px solid var(--border-strong)}
 #infoBar #infoStopBtn:hover{background:var(--warn-bg);border-color:var(--warn-border)}
 #infoBar #infoArchiveBtn{background:transparent;color:var(--text-muted);border:1px solid var(--border-strong)}
-#infoBar #infoRenameBtn{background:transparent;color:var(--text-muted);border:1px solid transparent}
-#infoBar #infoRenameBtn:hover{color:var(--text);background:var(--bg-hover)}
-/* ✎'s input (session_rename.js), in the button's place. */
-#infoBar .rename-input{flex:0 1 18em;min-width:6em;font:inherit;font-size:12px;padding:3px 8px;border-radius:8px;border:1px solid var(--accent-border);background:var(--bg-raised);color:var(--text);outline:none}
 #infoBar #infoArchiveBtn:hover{color:var(--text);background:var(--bg-hover)}
 #infoBar #infoDeleteBtn{background:transparent;color:var(--text-muted);border:1px solid transparent}
 #infoBar #infoDeleteBtn:hover{color:var(--on-solid);background:var(--danger-bg);border-color:var(--danger-bg)}
@@ -980,8 +985,6 @@ body.has-session.composer-folded #infoBar{border-top-color:transparent}
   #infoBar>button{font-size:0;line-height:0;padding:5px 7px}
   #infoBar>button::before{content:"";display:block;width:14px;height:14px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
   #infoBar #infoArchiveBtn{--icon:var(--icon-archive)}
-  #infoBar #infoRenameBtn{--icon: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%3Cpath d='M10.5 2.5l3 3L5.5 13.5H2.5v-3z'/%3E%3C/svg%3E")}
-  #infoBar .rename-input{flex:1 1 8em;font-size:16px}
   #infoBar #infoArchiveBtn.archived{--icon:var(--icon-unarchive)}
   #infoBar #infoContinueBtn{--icon: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%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5'/%3E%3C/svg%3E")}
   #infoBar #infoCancelBtn{--icon: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='4' y='4' width='8' height='8' rx='1.5'/%3E%3C/svg%3E")}
@@ -1031,16 +1034,32 @@ body.has-session #scope .scope-where{display:none}
   #newBtn .brand-new{font-size:16px}
 }
 /* The bell (notifications): quiet at the top bar's right end; filled in the accent when on, struck through when the browser blocks it. */
-/* The open session's title, when no strip card in sight shows it (session_title.js): the bar's middle, cut with an ellipsis; the whole first message in its tooltip. */
-#sessionTitle{flex:1;min-width:0;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-#sessionTitle[hidden]{display:none}
+/* The open session's title, when no strip card in sight shows it (session_title.js): the bar's middle, cut with an ellipsis; the whole first message in its tooltip.
+   Its row holds it and its ✎ (session_rename.js), the ✎ right after the text (the text doesn't grow, the row does). */
+#sessionTitleRow{flex:1;min-width:0;display:flex;align-items:center;gap:2px}
+#sessionTitleRow[hidden]{display:none}
+#sessionTitle{flex:0 1 auto;min-width:0;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* The title's ✎ (the top bar's and the active strip card's): quiet, the text's colour on hover. */
+.title-rename,.card-rename{flex-shrink:0;min-height:0;padding:0 5px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-muted);font-size:13px;line-height:20px;cursor:pointer}
+.title-rename:hover,.card-rename:hover{color:var(--text);background:var(--bg-hover)}
+.title-rename[hidden]{display:none}
+/* The rename input (session_rename.js): fixed over the title row it renames, at the end of body (the strip draws its cards
+   anew on every session event); above the selection bar (20), under the popovers (40). */
+.rename-input{position:fixed;z-index:30;box-sizing:border-box;margin:0;font:inherit;font-size:var(--rename-font,14px);padding:0 8px;border-radius:8px;border:1px solid var(--accent-border);background:var(--bg-raised);color:var(--text);outline:none;box-shadow:var(--glass-shadow)}
+.rename-input::placeholder{color:var(--text-faint)}
+/* Over the top bar's title row (as wide as the bar's middle): a title's width, not a field to the bell. */
+.rename-input.over-bar{max-width:32em}
 /* A phone: the title is its own row under the bar, so "chi + · pill · bell" stay one line. Nothing on that line wraps to a
    row of its own when the pill's text grows mid-turn ("· 1 waiting"): the scope chip and the pill have a base size of 0 (what
    a wrapping line counts) and grow to their text, the pill first; the scope chip cuts with an ellipsis before the pill does.
    The pill drops its session count while it says live or waiting, so the scope chip keeps its words. */
 @media(max-width:600px){
   #topBar{flex-wrap:wrap;row-gap:2px}
-  #sessionTitle{flex-basis:100%;order:10;font-size:12px}
+  #sessionTitleRow{flex-basis:100%;order:10}
+  #sessionTitle{font-size:12px}
+  .title-rename{font-size:12px;line-height:18px}
+  /* Under 16px iOS Safari zooms the page on focus. */
+  .rename-input{font-size:16px}
   #scope,#stripStatus{flex:1 1 0;min-width:0;max-width:max-content}
   #stripStatus{flex-grow:1000;overflow:hidden;text-overflow:ellipsis}
   #scope .scope-name{flex-shrink:1;min-width:0}
@@ -1223,6 +1242,11 @@ body.all-view #center, body.all-view #topStrip{display:none}
 @media (hover:none){.card-tools button{opacity:1}}
 .card.active{background:var(--accent-bg);border-color:var(--accent-border)}
 .card .preview{font-size:14px;line-height:1.4;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* A strip card's title line with its ✎, shown on the active card alone (lists_view.js draws it on each, a select only paints). */
+.card .preview-row{display:flex;align-items:center;gap:2px;min-width:0}
+.card .preview-row .preview{flex:1;min-width:0}
+.card .card-rename{display:none}
+#topStrip .card.active .card-rename{display:block}
 .card .time{font-variant-numeric:tabular-nums;white-space:nowrap}
 .card .ctx{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-3)}
 #topStrip .card .preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -1262,7 +1286,7 @@ a{color:var(--accent)}
     <button type="button" id="newBtn" class="brand" title="New session"><span class="brand-name">chi</span><span class="brand-new">+<span class="brand-new-word"> new session</span></span></button>
     <div id="scope" hidden></div>
     <button type="button" class="strip-toggle" id="stripStatus" title="All sessions, with search"><span class="pill-count">sessions</span></button>
-    <span id="sessionTitle" hidden></span>
+    <span id="sessionTitleRow" hidden><span id="sessionTitle"></span><button type="button" id="titleRenameBtn" class="title-rename" title="Rename this session" aria-label="Rename this session" hidden>✎</button></span>
     <button type="button" id="notifyBtn" aria-label="Notifications" aria-pressed="false" hidden><svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path class="bell" d="M8 1.75a4 4 0 0 0-4 4v2.6L2.75 10.6v.9h10.5v-.9L12 8.35v-2.6a4 4 0 0 0-4-4Z"/><path class="clapper" d="M6.5 13a1.5 1.5 0 0 0 3 0"/><path class="slash" d="M2.5 2.5l11 11"/></svg></button>
   </div>
   <section id="topStrip" aria-label="Latest sessions" class="loading"><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div><div class="card skeleton"><div class="line long"></div><div class="meta"><span class="line tiny" style="display:inline-block"></span></div></div></section>
@@ -1306,7 +1330,6 @@ a{color:var(--accent)}
         <div class="info" id="infoText"></div>
         <div id="contextChips" aria-label="Attached context" hidden></div>
         <button class="ghost" id="infoCancelBtn" title="Cancel the running turn, whoever sent it" style="display:none">Stop turn</button>
-        <button class="ghost" id="infoRenameBtn" title="Rename this session" aria-label="Rename this session" style="display:none">✎</button>
         <button class="ghost" id="infoContinueBtn" title="Continue: start the next link of this session's chain from its recap (this one is archived)" style="display:none">continue →</button>
         <button class="ghost" id="infoArchiveBtn" title="Archive: hide from the lists, keep for good" style="display:none">archive</button>
         <button class="ghost" id="infoStopBtn" title="Stop session (terminate worker)" style="display:none">stop session</button>

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

@@ -42,8 +42,6 @@ export function infoButtons({ id, state, chain, archived, continuing, streaming
   const busy = !!id && continuing;
   return {
     continue: { shown: !!id && !chain.next && state.owner !== "tui", disabled: busy, text: busy ? "continuing…" : "continue →" },
-    // ✎: /title from the web (a plain terminal's session takes no commands).
-    rename: { shown: !!id && state.owner !== "tui" },
     delete: { shown: !!id },
     archive: {
       shown: !!id,

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

@@ -21,6 +21,9 @@
 //   confirmDelete(id), setArchived(id, archive), archiveOne(id, archive)
 //   updateInfoBar(), updateSessionTitle(), showToast(text, action)
 //   allViewOpen(), openAllView(), leaveAllView(hash)
+//   renameShown(owner)    whether a card's title has its ✎ (session_title.js)
+//   onRename()            the active card's ✎ clicked (session_rename.js open)
+//   renaming()            whether that rename input is open (the strip holds)
 
 import { ownerBadge, relativeTime, delegatedBy } from "./format.js";
 import { html, nothing, render } from "./vendor/lit-html.js";
@@ -134,7 +137,9 @@ export function cardAnimStyle({ enterMs = null, now = null } = {}, period = DOT_
 // +ctx+: title (cardTitle), projectName (the page's scope), activeId (the
 // open session), chainOpen (its chain's popover is open), parent (the
 // delegating session, or null).
-export function cardTemplate(s, { deletable = false, archivable = false, selectable = false, picked = false, skipReason = null, family = null, open = false, rows = false, matchIds = null, entering = false, anim = "" } = {}, { title = "", projectName = null, activeId = null, chainOpen = false, parent = null } = {}) {
+// renamable: the title line ends in a ✎ (the strip's cards; CSS shows it on
+// the active one alone, since a select only paints the cards again).
+export function cardTemplate(s, { deletable = false, archivable = false, selectable = false, picked = false, skipReason = null, family = null, open = false, rows = false, matchIds = null, entering = false, anim = "", renamable = false } = {}, { title = "", projectName = null, activeId = null, chainOpen = false, parent = null } = {}) {
   const fam = family && family.members.length ? family : null;
   const ts = s.updated_at || s.created_at || "";
   const tip = `${s.id} · updated ${ts} · ${s.status}`;
@@ -164,8 +169,11 @@ export function cardTemplate(s, { deletable = false, archivable = false, selecta
   const memberIds = [...(fam ? fam.members.map((m) => m.session.id) : []),
     ...(family?.chain ? family.chain.links.map((x) => x.id).filter((id) => id !== s.id) : [])];
   const cls = `card${s.archived ? " archived" : ""}${waiting || familyWaiting ? " waiting" : ""}${selectable && picked ? " picked" : ""}${fam && rows && open ? " family-open" : ""}${entering ? " entering" : ""}`;
+  const preview = renamable
+    ? html`<div class="preview-row"><div class="preview">${title}</div><button type="button" class="card-rename" data-rename=${s.id} title="Rename this session" aria-label="Rename this session">\u270e</button></div>`
+    : html`<div class="preview">${title}</div>`;
   const recap = s.recap ? html`<div class="recap" title=${s.recap}>${s.recap}</div>` : nothing;
-  return html`<div class=${cls} data-id=${s.id} data-members=${memberIds.length ? memberIds.join(" ") : nothing} style=${anim || nothing} title=${`${tip}${memTitle ? ` · ${memTitle}` : ""}`}><div class="preview">${title}</div>${recap}<div class="meta"><span class=${`status dot ${s.status}${waiting ? " waiting" : ""}`} title=${dotWord} aria-label=${dotWord}></span>${waitingT}${stoppedT}${time}${ctxT}${folderT}${parentChipTemplate(s, parent)}${chain}${kids}${ownerBadgeTemplate(s)}${archived}</div>${famRows}${skip}${pick}${selectable ? nothing : cardToolsTemplate(s, { deletable, archivable })}</div>`;
+  return html`<div class=${cls} data-id=${s.id} data-members=${memberIds.length ? memberIds.join(" ") : nothing} style=${anim || nothing} title=${`${tip}${memTitle ? ` · ${memTitle}` : ""}`}>${preview}${recap}<div class="meta"><span class=${`status dot ${s.status}${waiting ? " waiting" : ""}`} title=${dotWord} aria-label=${dotWord}></span>${waitingT}${stoppedT}${time}${ctxT}${folderT}${parentChipTemplate(s, parent)}${chain}${kids}${ownerBadgeTemplate(s)}${archived}</div>${famRows}${skip}${pick}${selectable ? nothing : cardToolsTemplate(s, { deletable, archivable })}</div>`;
 }
 
 function cardToolsTemplate(s, { deletable, archivable }) {
@@ -223,7 +231,7 @@ export function createListsView(deps) {
   const {
     doc, win, topStripEl, allListEl, sessions, selected, scope, scopeError, eventsLive, refresh, select,
     confirmDelete, setArchived, archiveOne, updateInfoBar, updateSessionTitle, showToast,
-    allViewOpen, openAllView, leaveAllView,
+    allViewOpen, openAllView, leaveAllView, renameShown = () => false, onRename = () => {}, renaming = () => false,
   } = deps;
   const $ = (s) => doc.querySelector(s);
 
@@ -261,9 +269,11 @@ export function createListsView(deps) {
     return chainTitle(s, sessionsById());
   }
 
+  // A card with no title yet ("—": no first message) has no ✎ either.
   function cardFor(s, opts) {
-    return cardTemplate(s, opts, {
-      title: cardTitle(s),
+    const title = cardTitle(s);
+    return cardTemplate(s, { ...opts, renamable: !!opts.renamable && title !== "\u2014" }, {
+      title,
       projectName: scope.projectName,
       activeId: selected(),
       chainOpen: !!opts.family?.chain && chainOpenHead() === s.id,
@@ -294,9 +304,10 @@ export function createListsView(deps) {
   const canHover = win.matchMedia?.("(hover: hover)").matches ?? false;
   function listOrder(el, next, idOf = (s) => s.id) {
     // The strip's popover holds it too (the pointer leaves the strip for it,
-    // and a touch screen has no hover at all).
+    // and a touch screen has no hover at all), and so does a rename typed
+    // over its active card (the card doesn't jump away under the input).
     const holding = el.getClientRects().length > 0
-      && ((canHover && el.matches(":hover")) || (el === topStripEl && familyPop.isOpen()) || chainPopIn(el));
+      && ((canHover && el.matches(":hover")) || (el === topStripEl && (familyPop.isOpen() || renaming())) || chainPopIn(el));
     const held = holding ? drawnOrder.get(el) : null;
     const ordered = held ? heldOrder(held, next, idOf) : next;
     if (held && ordered.some((x, i) => idOf(x) !== idOf(next[i]))) heldLists.add(el);
@@ -429,6 +440,12 @@ export function createListsView(deps) {
           onFamily(el.dataset.id, chip, e);
           return;
         }
+        const ren = e.target.closest(".card-rename");
+        if (ren) {
+          e.stopPropagation();
+          onRename();
+          return;
+        }
         const del = e.target.closest(".card-del");
         if (del) {
           e.stopPropagation();
@@ -497,7 +514,7 @@ export function createListsView(deps) {
     }
     const anim = enteringFor(topStripEl, [...cards.map(familyId), STRIP_TILE]);
     const tile = stripTileTemplate(stripCountText(shownSessions().length, all.length), anim(STRIP_TILE));
-    draw(topStripEl, html`${cards.map((f) => cardFor(f.head, { family: f, open: familyPop.openHead() === f.head.id, ...anim(familyId(f)) }))}${tile}`);
+    draw(topStripEl, html`${cards.map((f) => cardFor(f.head, { family: f, open: familyPop.openHead() === f.head.id, renamable: renameShown(f.head.owner), ...anim(familyId(f)) }))}${tile}`);
     bindCards(topStripEl, select, {
       onFamily: (id, _chip, e) => {
         familyPop.toggle(id);
@@ -769,6 +786,13 @@ export function createListsView(deps) {
   return {
     render,
     renderAll,
+    // The rename input closed: a strip held for it catches up (unless the
+    // pointer or a popover holds it still).
+    catchUp() {
+      if (heldLists.has(topStripEl) && !(canHover && topStripEl.matches(":hover")) && !familyPop.isOpen() && !chainPopIn(topStripEl)) {
+        renderTop(stripCards());
+      }
+    },
     paintActive,
     cardTitle,
     sessionsById,

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

@@ -3,9 +3,14 @@
 // a final answer's rendering and refs, and the refs across the page. The
 // page's state comes in as getters (capabilities, roots, currentDir), read
 // at each call.
+
+// The texts whose refs linkTextRefs links: the answers and the closed
+// steps' texts.
+const TEXTS = ".bubble.output, .gen:not(.live) > .gen-text";
+
 export function createMarkdownPlace({
   capabilities, renderText, roots, touchedFiles, currentDir, linkRefs, applyFinalAnswer, findInTurnRoots, normalize,
-  pairAnswerRefs,
+  pairAnswerRefs, setAnswerRefs = () => {},
 }) {
   // 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
@@ -17,9 +22,20 @@ export function createMarkdownPlace({
       .catch(() => null);
   }
 
-  // The `path:line` refs in one rendered text (the stage's asking slot, a
-  // kept reply), as linkTextRefs links the answers'.
-  function linkRefsIn(el) {
+  // A plugin's +refs+ (a question's: its pending question's refs) paired
+  // with one shown text (answer_refs.js), again after each swap of its
+  // nodes: setAnswerRefs starts the pairing over. Not +refs+: nothing.
+  function pairRefsIn(el, refs) {
+    if (refs === undefined || refs === null) return;
+    setAnswerRefs(el, refs);
+    pairAnswerRefs(el);
+  }
+
+  // The refs in one rendered text (the stage's asking slot, a kept reply),
+  // as linkTextRefs links the answers': a plugin's +refs+ first
+  // (pairRefsIn), then the `path:line` ones.
+  function linkRefsIn(el, refs) {
+    pairRefsIn(el, refs);
     linkRefs(el, touchedFiles(roots()), currentDir());
   }
 
@@ -32,7 +48,8 @@ export function createMarkdownPlace({
   }
 
   // The refs on the answers' and closed steps' texts, on this page: first
-  // each answer's own (a plugin's, answer_refs.js), then the `path:line`
+  // each one's own (a plugin's, answer_refs.js: a step's are a question's,
+  // on the reply that asked it), then the `path:line`
   // refs that name a file the session's rows (and cards) touched
   // (ref_scan.js), which leave a plugin's alone. Not mid-stream: at a
   // turn's end and after a reload's render. A ref already made stays as it
@@ -41,13 +58,13 @@ export function createMarkdownPlace({
     const pageRoots = roots();
     const touched = touchedFiles(pageRoots);
     for (const root of pageRoots) {
-      for (const el of root.querySelectorAll(".bubble.output")) pairAnswerRefs(el);
+      for (const el of root.querySelectorAll(TEXTS)) pairAnswerRefs(el);
     }
     if (!touched.size) return;
     for (const root of pageRoots) {
-      for (const el of root.querySelectorAll(".bubble.output, .gen:not(.live) > .gen-text")) linkRefs(el, touched, currentDir());
+      for (const el of root.querySelectorAll(TEXTS)) linkRefs(el, touched, currentDir());
     }
   }
 
-  return { renderMarkdown, linkRefsIn, applyFinalMarkdown, linkTextRefs };
+  return { renderMarkdown, pairRefsIn, linkRefsIn, applyFinalMarkdown, linkTextRefs };
 }

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

@@ -35,7 +35,10 @@ import { plainText } from "./plain_line.js";
 //   askingText via the page's view), kept by a question or own approval card
 // @param renderMarkdown (text) => Promise<html|null>: the kept reply's
 //   markdown (the page's POST /api/render; null keeps the raw text)
-// @param linkRefs (el) the page's path:line ref pass on it
+// @param linkRefs (el, refs) the page's ref pass on it: a plugin's +refs+
+//   (the question's) paired, then the path:line ones
+// @param pairRefs (el, refs) a plugin's +refs+ paired only (the question's
+//   own text; markdown_place.js pairRefsIn)
 // @param api {sendAnswer, dismissQuestion, sendCommand} (data.js)
 // @param doc the page's document
 // @return {renderQuestion(pq, {said}), resolveQuestion(id, opts), removeQuestion(),
@@ -43,7 +46,7 @@ import { plainText } from "./plain_line.js";
 //   renderContinue(offer), resolveContinue(data), forgetContinue()}
 export function createQuestionCards({
   sessionId, clientId, place, isNearBottom, scrollToEnd, removeHintIfEmpty, askingText = () => "",
-  renderMarkdown = () => Promise.resolve(null), linkRefs = () => {},
+  renderMarkdown = () => Promise.resolve(null), linkRefs = () => {}, pairRefs = () => {},
   api = { sendAnswer, dismissQuestion, sendCommand }, doc = globalThis.document,
 }) {
   // Live ask_user_question card, keyed by pending question id. Re-rendered from
@@ -73,6 +76,10 @@ export function createQuestionCards({
     const card = doc.createElement("details");
     card.className = approval ? "bubble question approval" : stepLimit ? "bubble question step-limit" : "bubble question";
     card.dataset.qid = pq.id;
+    // What asks (the stage's question room is a model's own question's,
+    // stage_view.js): the kind, and a delegate's question relayed here.
+    card.dataset.kind = pq.kind || "question";
+    if (relayView(pq)) card.dataset.relay = "1";
     const asked = keepsAskingText(pq) ? String(said ?? askingText() ?? "").trim() : "";
     if (asked) saidOf.set(card, asked);
     // Open while pending: the question must be actionable.
@@ -98,6 +105,8 @@ export function createQuestionCards({
       const q = doc.createElement("div");
       q.className = "question-text";
       q.textContent = (relay && pq.relay.asked) || pq.question || "";
+      // A plugin's refs on the question (its step's: one may name a ticket here too).
+      if (!relay) pairRefs(q, questionRefsOf(pq));
       card.appendChild(q);
     }
 
@@ -421,6 +430,7 @@ export function createQuestionCards({
     // clamped line), and whole, selectable, at the top of the body
     // when it is open (a drag in the summary would toggle the card).
     const asked = saidOf.get(questionEl);
+    const refs = questionRefsOf(pending);
     let full = null;
     if (summary && asked) {
       const line = doc.createElement("div");
@@ -431,6 +441,7 @@ export function createQuestionCards({
       full = doc.createElement("div");
       full.className = "question-said-full";
       full.textContent = asked;
+      pairRefs(full, refs);
       questionEl.insertBefore(full, summary.nextSibling);
     }
     // 4.02: a reopened card's summary already carries the result (the
@@ -441,15 +452,15 @@ export function createQuestionCards({
     if (summary && !keepNote) note.classList.add("hidden");
     if (!questionEl.dataset.toggled) questionEl.open = false;
     // After the collapse: a card left open by hand renders at once.
-    if (full) renderSaidOnOpen(questionEl, full, asked);
+    if (full) renderSaidOnOpen(questionEl, full, asked, refs);
     pending = null;
   }
 
   // The body's copy as markdown, from the card's first open on (a reload
   // draws every card in the history: rendering them all would ask once per
   // card). Raw until then, and when the render answers null (then the next
-  // open asks again).
-  function renderSaidOnOpen(card, full, asked) {
+  // open asks again). +refs+: the question's, paired again on the swap.
+  function renderSaidOnOpen(card, full, asked, refs) {
     let state = "raw";
     const draw = () => {
       if (!card.open || state !== "raw") return;
@@ -463,13 +474,19 @@ export function createQuestionCards({
           // Sanitised on the server (POST /api/render).
           full.innerHTML = html;
           full.classList.add("markdown", "md-compact");
-          linkRefs(full);
+          linkRefs(full, refs);
         });
     };
     card.addEventListener("toggle", draw);
     draw();
   }
 
+  // A pending question's refs (a plugin's, on the reply that asks it), or
+  // null: none, or not an array.
+  function questionRefsOf(pq) {
+    return Array.isArray(pq?.refs) && pq.refs.length ? pq.refs : null;
+  }
+
   function markQuestionSelection(sel) {
     if (!questionEl || !sel.length) return;
     questionEl.querySelectorAll(".question-choice").forEach((button) => {