samagotchi 0.46.1 → 0.48.0

data/lib/samagotchi/web/app.rb

@@ -594,6 +594,7 @@ module Samagotchi
         if prompt.to_s.strip.empty? && !idle
           return error_response(400, "missing_fields", "prompt is required")
         end
+        return handle_continue(body, prompt, idle) if body.key?("continues")
 
         # dir: the folder the chat starts in (the page's scope); without it,
         # the server's own cwd.
@@ -632,6 +633,55 @@ module Samagotchi
         json_response(201, session_to_json(session).merge(bridge_port: port))
       end
 
+      # POST /api/sessions with continues: <id, prefix or last:id>: the next
+      # link of that session's chain (SessionManager.continue_session), in its
+      # folder, on its model and with its llm_context, so dir, model and
+      # llm_context are refused beside it. 409 continued (with next_id, the
+      # link that continues it already: the page opens that one),
+      # open_children (ids), folder_gone, busy, scratch or owned_by_tui.
+      def handle_continue(body, prompt, idle)
+        given = body["continues"]
+        unless given.is_a?(String) && !given.strip.empty?
+          return error_response(400, "invalid_continues", "continues is a session id")
+        end
+        if (fields = %w[dir model model_name llm_context].select { |key| body.key?(key) }).any?
+          return error_response(400, "invalid_continues",
+                                "continues takes the previous session's folder, model and llm_context; " \
+                                "leave out #{fields.join(", ")}")
+        end
+
+        preview = idle ? body["preview"].to_s.strip : ""
+        session, error = continue_from(given, prompt: idle ? nil : prompt.to_s, title: preview.empty? ? nil : preview)
+        return error if error
+
+        port = await_bridge_port(session.id)
+        moved = session.moved_children || []
+        # The moved delegates' cards fold under the new link now.
+        [session.continues, session.id, *moved].each { |sid| @hub&.touch(sid) }
+        record_history(body, prompt) if !idle && PromptHistory.shell_line?(prompt.to_s.strip)
+        json_response(201, session_to_json(session).merge(bridge_port: port, moved: moved))
+      end
+
+      # SessionManager.continue_session, its refusals as responses: [session,
+      # nil] or [nil, the response]. Only its own errors: what fails after
+      # the new link started is not a refusal of it.
+      def continue_from(given, prompt:, title:)
+        [@manager.continue_session(given, prompt: prompt, title: title, state_dir: @state_dir), nil]
+      rescue SessionManager::ContinueRefused => e
+        extra = e.reason == :continued ? { next_id: e.ids.first } : { ids: e.ids }
+        [nil, json_response(409, { error: e.reason.to_s, detail: e.message, **extra })]
+      rescue SessionManager::ArchiveRefused => e
+        [nil, error_response(409, e.reason == :scratch ? "scratch" : "busy", e.message)]
+      rescue SessionManager::OwnedByTUI
+        [nil, error_response(409, "owned_by_tui", "session #{given} is open in a chi REPL; close it there first")]
+      rescue ModelProfile::MissingModel => e
+        [nil, error_response(400, "invalid_model", e.message)]
+      rescue Session::AmbiguousId => e
+        [nil, error_response(400, "ambiguous_id", e.message)]
+      rescue ArgumentError => e
+        [nil, error_response(404, "not_found", e.message)]
+      end
+
       # The create request's "llm_context" ({strategy:, apply:, budget:},
       # each a word as /llm-context takes it, "default" for unset) as an
       # override: [override, nil] (nil when absent or all default), or

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

@@ -12,6 +12,7 @@ import {
   openStream,
   openEvents,
   createIdleSession,
+  continueSession,
   uploadImage,
   listModels,
   fetchHistory,
@@ -36,6 +37,7 @@ import { createTurnView, turnHistoryHtml } from "./turn_view.js";
 import { BADGES, emptyAnswerHtml, htmlElement, stateBadgeHtml, userBubbleHtml } from "./turn_html.js";
 import { createStageView } from "./stage_view.js";
 import { createFamilyPop, familyChipHtml, familyRowsHtml } from "./families_view.js";
+import { CONTINUE_OPENER, allViewChains, chainChipHtml, chainTitle, isOpener, chainDate, chainNeighbours, chainRowsHtml, continueRefusal, continuedText, foldChains, openChildrenHtml } from "./chains.js";
 import { createTaskStopper } from "./task_stop.js";
 import { appendQuote } from "./annotations.js";
 import { parsePresets } from "./annotate_presets.js";
@@ -260,7 +262,9 @@ function openSessionEvents() {
       allSessions = applySessionEvent(allSessions, "session", data);
       render();
       if (data.session && data.session.id === selected) followSelectedSession(data.session);
-      else if (selected && data.session?.parent_id === selected) updateInfoBar(); // its children chip
+      // Its children chip; its chain's ← → links (a link that continues it, its previous one).
+      else if (selected && (data.session?.parent_id === selected || data.session?.continues === selected
+                            || (data.session?.id && data.session.id === current.continues))) updateInfoBar();
     },
     session_gone: (data) => {
       notifications.noticeSessions("session_gone", data);
@@ -270,7 +274,7 @@ function openSessionEvents() {
       if (next !== allSessions) {
         allSessions = next;
         render();
-        if (selected) updateInfoBar(); // a deleted child leaves the children chip
+        if (selected) updateInfoBar(); // a deleted child leaves the children chip, a deleted chain link its ← → link
       }
       leaveGoneSession(data.id, "deleted");
     },
@@ -363,9 +367,22 @@ function filterQuery() {
   return $("#filter").value.trim().toLowerCase();
 }
 
+// The page's sessions by id, built again only when the list changed.
+let byIdOf = { list: null, map: new Map() };
+function sessionsById() {
+  if (byIdOf.list !== allSessions) byIdOf = { list: allSessions, map: new Map(allSessions.map((s) => [s.id, s])) };
+  return byIdOf.map;
+}
+
+// A card's title: its preview, or its chain's first link's for a link
+// titled with the opener (chains.js chainTitle; display only).
+function cardTitle(s) {
+  return chainTitle(s, sessionsById());
+}
+
 // Whether a session matches the all view's search +q+ (lower case).
 function matchesFilter(s, q) {
-  return previewForCard(s).toLowerCase().includes(q) ||
+  return cardTitle(s).toLowerCase().includes(q) ||
     (s.first_preview || "").toLowerCase().includes(q) ||
     s.short_id.toLowerCase().includes(q) ||
     s.id.toLowerCase().includes(q) ||
@@ -384,12 +401,13 @@ function matchesFilter(s, q) {
 // members, its chip (which opens their list), and the card waits when any
 // member does; with rows (all sessions) an open family lists its members
 // inline, the strip's opens in a popover; matchIds: a search's matching
-// members.
+// members. A family in a session chain (chains.js foldChains) carries its
+// `day N` chip, which opens the other links in a popover.
 function cardHtml(s, { deletable = false, archivable = false, selectable = false, picked = false, skipReason = null, family = null, open = false, rows = false, matchIds = 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}`;
-  const preview = escapeHtml(previewForCard(s));
+  const preview = escapeHtml(cardTitle(s));
   const memTitle = s.used_memory_names && s.used_memory_names.length ? `mem: ${s.used_memory_names.join(", ")}` : "";
   const ago = relativeTime(ts);
   const timeHtml = ago ? `<span class="time" title="${escapeHtml(new Date(ts).toLocaleString())}">${escapeHtml(ago)}</span>` : "";
@@ -407,11 +425,15 @@ function cardHtml(s, { deletable = false, archivable = false, selectable = false
   const dotWord = waiting ? waiting.title : s.status;
   const pickHtml = selectable ? `<input type="checkbox" class="card-pick" aria-label="Select session ${escapeHtml(s.short_id)}"${picked ? " checked" : ""}>` : "";
   const skipHtml = skipReason ? `<div class="skip-reason">skipped: ${escapeHtml(skipReason)}</div>` : "";
-  const familyWaiting = !!fam && familyWaits(fam);
+  const familyWaiting = !!family && familyWaits(family);
+  const chainHtml = family?.chain ? chainChipHtml(family, { open: chainOpenHead() === s.id }) : "";
   const kidsHtml = fam ? familyChipHtml(fam, { open }) : "";
   const rowsHtml = fam && rows && open ? familyRowsHtml(fam, { activeId: selected, matchIds, archivable: !selectable }) : "";
-  const membersAttr = fam ? ` data-members="${escapeHtml(fam.members.map((m) => m.session.id).join(" "))}"` : "";
-  return `<div class="card${s.archived ? " archived" : ""}${waiting || familyWaiting ? " waiting" : ""}${selectable && picked ? " picked" : ""}${fam && rows && open ? " family-open" : ""}" data-id="${s.id}"${membersAttr} title="${escapeHtml(tip)}${memTitle ? ` · ${escapeHtml(memTitle)}` : ""}"><div class="preview">${preview}</div>${s.recap ? `<div class="recap" title="${escapeHtml(s.recap)}">${escapeHtml(s.recap)}</div>` : ""}<div class="meta"><span class="status dot ${escapeHtml(s.status)}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord)}" aria-label="${escapeHtml(dotWord)}"></span>${waitingHtml}${stoppedHtml}${timeHtml}${ctxHtml}${folderHtml}${parentChipHtml(s)}${kidsHtml}${ownerBadgeHtml(s)}${archivedHtml}</div>${rowsHtml}${skipHtml}${pickHtml}${selectable ? "" : cardToolsHtml(s, { deletable, archivable })}</div>`;
+  // Its delegates and its chain's other links: the card is .contains-active while one is open.
+  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 membersAttr = memberIds.length ? ` data-members="${escapeHtml(memberIds.join(" "))}"` : "";
+  return `<div class="card${s.archived ? " archived" : ""}${waiting || familyWaiting ? " waiting" : ""}${selectable && picked ? " picked" : ""}${fam && rows && open ? " family-open" : ""}" data-id="${s.id}"${membersAttr} title="${escapeHtml(tip)}${memTitle ? ` · ${escapeHtml(memTitle)}` : ""}"><div class="preview">${preview}</div>${s.recap ? `<div class="recap" title="${escapeHtml(s.recap)}">${escapeHtml(s.recap)}</div>` : ""}<div class="meta"><span class="status dot ${escapeHtml(s.status)}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord)}" aria-label="${escapeHtml(dotWord)}"></span>${waitingHtml}${stoppedHtml}${timeHtml}${ctxHtml}${folderHtml}${parentChipHtml(s)}${chainHtml}${kidsHtml}${ownerBadgeHtml(s)}${archivedHtml}</div>${rowsHtml}${skipHtml}${pickHtml}${selectable ? "" : cardToolsHtml(s, { deletable, archivable })}</div>`;
 }
 
 function cardToolsHtml(s, { deletable, archivable }) {
@@ -460,7 +482,7 @@ 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).
   const holding = el.getClientRects().length > 0
-    && ((canHover && el.matches(":hover")) || (el === topStripEl && familyPop.isOpen()));
+    && ((canHover && el.matches(":hover")) || (el === topStripEl && familyPop.isOpen()) || 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);
@@ -473,7 +495,7 @@ function listOrder(el, next, idOf = (s) => s.id) {
 // first-listed member's place, so a hub upsert doesn't move it), waiting
 // ones first, as many as fit. A family is one card.
 function stripCards() {
-  return listOrder(topStripEl, waitingFirst(families(shownSessions(), { order: "list" })), familyId).slice(0, stripCols);
+  return listOrder(topStripEl, waitingFirst(foldChains(families(shownSessions(), { order: "list" }), allSessions)), familyId).slice(0, stripCols);
 }
 
 // The strip's family popover (families_view.js): the open family's rows,
@@ -501,6 +523,52 @@ window.addEventListener("keydown", (e) => familyPop.onKeydown(e), true);
 document.addEventListener("pointerdown", (e) => familyPop.onPointerDown(e), true);
 document.addEventListener("scroll", () => familyPop.reposition(), true);
 
+// A chain's popover (chains.js): the other links of the chain a card's
+// `day N` chip stands for, under the chip, in the strip or all sessions
+// (the list it was opened from: chainFrom). A row opens that link.
+let chainFamilies = new Map(); // head id → family, as the lists last drew it
+let chainFrom = null; // the list element the open popover's chip is in
+const chainPop = createFamilyPop({
+  id: "chainPop",
+  doc: document,
+  win: window,
+  rowsFor: (id) => {
+    const f = chainFamilies.get(id);
+    return f?.chain ? chainRowsHtml(f, { activeId: selected }) : null;
+  },
+  anchorFor: (id) => (chainFrom ? [...chainFrom.querySelectorAll(".card[data-id] .chain-chip")].find((chip) => chip.closest(".card").dataset.id === id) || null : null),
+  onPick: (id) => {
+    chainPop.close();
+    if (allViewOpen()) leaveAllView(sessionHash(id));
+    select(id);
+  },
+  // chainFrom stays (Esc focuses the chip again after the close); only an
+  // open popover holds a list (chainPopIn).
+  onClose: () => {
+    if (chainFrom === topStripEl && heldLists.has(topStripEl) && !(canHover && topStripEl.matches(":hover"))) renderTop(stripCards());
+  },
+});
+function chainOpenHead() {
+  return chainPop.openHead();
+}
+function chainPopIn(el) {
+  return chainPop.isOpen() && chainFrom === el;
+}
+function toggleChainPop(from, id, e) {
+  if (chainPop.openHead() === id && chainFrom === from) {
+    chainPop.close();
+    return;
+  }
+  chainPop.close();
+  chainFrom = from;
+  chainPop.open(id);
+  // From the keyboard the focus goes into the popover; Esc brings it back.
+  if (e?.detail === 0 && chainPop.isOpen()) $("#chainPop .fr-open")?.focus();
+}
+window.addEventListener("keydown", (e) => chainPop.onKeydown(e), true);
+document.addEventListener("pointerdown", (e) => chainPop.onPointerDown(e), true);
+document.addEventListener("scroll", () => chainPop.reposition(), true);
+
 function render() {
   fitStripColumns();
   renderTop(stripCards());
@@ -515,6 +583,7 @@ window.addEventListener("resize", () => {
     fitStripColumns();
     if (stripCols !== before && allSessions.length) renderTop(stripCards());
     familyPop.reposition();
+    chainPop.reposition();
   }, 150);
 });
 
@@ -524,6 +593,12 @@ window.addEventListener("resize", () => {
 function bindCards(container, onPick, { onFamily = () => {}, onRow = () => {} } = {}) {
   container.querySelectorAll(".card[data-id]").forEach((el) => {
     el.addEventListener("click", (e) => {
+      const chainChip = e.target.closest(".chain-chip");
+      if (chainChip) {
+        e.stopPropagation();
+        toggleChainPop(container, el.dataset.id, e);
+        return;
+      }
       const chip = e.target.closest(".family-chip");
       if (chip) {
         e.stopPropagation();
@@ -575,15 +650,18 @@ function renderTop(cards) {
   topStripEl.classList.remove("loading");
   renderStripShow();
   stripFamilies = new Map(cards.map((f) => [f.head.id, f]));
+  noteChainFamilies(cards);
   if (scopeError) {
     topStripEl.innerHTML = `<div class="hint scope-error">${escapeHtml(scopeError)} · <a href="${escapeHtml(allScopeHref("", null, location.search))}">show every session</a></div>`;
     familyPop.close();
+    chainPop.close();
     return;
   }
   // Only archived sessions: no cards, but the tile stays, the way to them.
   if (!allSessions.length) {
     topStripEl.innerHTML = "";
     familyPop.close();
+    chainPop.close();
     return;
   }
   const n = shownSessions().length;
@@ -603,6 +681,15 @@ function renderTop(cards) {
   $("#allTile").addEventListener("click", openAllView);
   $("#stripHide").addEventListener("click", () => setStripHidden(true));
   familyPop.refresh();
+  if (chainFrom === topStripEl) chainPop.refresh();
+}
+
+// The chain families a list drew: the popover's rows come from them.
+function noteChainFamilies(fams) {
+  for (const f of fams) {
+    if (f.chain) chainFamilies.set(f.head.id, f);
+    else chainFamilies.delete(f.head.id);
+  }
 }
 
 // The hidden strip's pill: "▾ 5 sessions · ● 1 live · ● 1 waiting",
@@ -610,7 +697,7 @@ function renderTop(cards) {
 // sessions (a waiting delegate too).
 function renderStripShow() {
   const shown = shownSessions();
-  const { count, live, waiting } = stripShowParts(shown, { cards: families(shown).length });
+  const { count, live, waiting } = stripShowParts(shown, { cards: foldChains(families(shown), allSessions).length });
   const liveHtml = live ? ` · <span class="live"><span class="live-dot" aria-hidden="true"></span>${escapeHtml(live)}</span>` : "";
   const waitingHtml = waiting ? ` · <span class="waiting"><span class="waiting-dot" aria-hidden="true"></span>${escapeHtml(waiting)}</span>` : "";
   $("#stripShow").innerHTML = `<span class="pill-arrow" aria-hidden="true">\u25BE</span> ${escapeHtml(count)}${liveHtml}${waitingHtml}`;
@@ -629,7 +716,9 @@ const drawnOpen = new Map(); // head id → open as last drawn in all sessions
 function renderAll() {
   const listed = allViewSessions();
   const q = filterQuery();
-  const all = families(listed);
+  // A search and the archived ones see every link as a card (allViewChains).
+  const all = allViewChains(families(listed), allSessions, { query: q, includeArchived: $("#includeArchived").checked });
+  noteChainFamilies(all);
   const shown = q ? filterFamilies(all, (s) => matchesFilter(s, q)) : all;
   const fams = listOrder(allListEl, waitingFirst(shown), familyId);
   const delegates = all.reduce((n, f) => n + f.members.length, 0);
@@ -640,11 +729,12 @@ function renderAll() {
   if (!fams.length) {
     drawnOpen.clear();
     allListEl.innerHTML = `<div class="hint">${listed.length ? "No session matches." : "No sessions yet."}</div>`;
+    if (chainFrom === allListEl) chainPop.refresh();
     return;
   }
   // A hub event redraws the list under a checkbox or a chip the keyboard is on.
-  const focused = document.activeElement?.matches?.("#allList .card-pick, #allList .family-chip")
-    ? { id: document.activeElement.closest(".card")?.dataset.id, sel: document.activeElement.matches(".card-pick") ? ".card-pick" : ".family-chip" } : null;
+  const focusSel = [".card-pick", ".family-chip", ".chain-chip"].find((sel) => document.activeElement?.matches?.(`#allList ${sel}`));
+  const focused = focusSel ? { id: document.activeElement.closest(".card")?.dataset.id, sel: focusSel } : null;
   const opts = (s) => (selecting.on
     ? { selectable: true, picked: selecting.picked.has(s.id), skipReason: selecting.skipReasons.get(s.id) }
     : { deletable: true, archivable: true });
@@ -676,6 +766,7 @@ function renderAll() {
     },
   });
   if (focused?.id) allListEl.querySelector(`.card[data-id="${focused.id}"] ${focused.sel}`)?.focus();
+  if (chainFrom === allListEl) chainPop.refresh();
 }
 
 // ── Select mode (all sessions) ─────────────────────────────────────────────
@@ -908,6 +999,8 @@ function applyView() {
     topStripEl.scrollLeft = 0; // a phone's strip scrolls sideways to the tile
   }
   document.body.classList.toggle("all-view", open);
+  // Its chip was in the list just hidden (the strip, or all sessions).
+  chainPop.close();
   if (open) {
     familyPop.close(); // the strip is hidden in the all view
     // The list is live; only its order can lag (upserts keep cards in
@@ -1178,6 +1271,7 @@ function renderSessionView(data) {
   current.llmContext = s.llm_context || null;
   llmContextControl.refresh();
   current.parentId = s.parent_id || null;
+  current.continues = s.continues || null;
   current.commands = Array.isArray(data.commands) ? data.commands : [];
   if (data.messages && data.messages.length) {
     const first = data.messages.find((m) => m.role === "user");
@@ -1805,6 +1899,16 @@ function updateInfoBar() {
   const stopBtn = document.getElementById("infoStopBtn");
   const deleteBtn = document.getElementById("infoDeleteBtn");
   const archiveBtn = document.getElementById("infoArchiveBtn");
+  const continueBtn = document.getElementById("infoContinueBtn");
+  const chain = selected ? chainNeighbours(allSessions, selected, { continues: current.continues }) : { prev: null, next: null };
+  if (continueBtn) {
+    // A link continued already has its → link instead; a terminal's
+    // session is continued there.
+    continueBtn.style.display = selected && !chain.next && current.owner !== "tui" ? "" : "none";
+    const busy = !!selected && continuingIds.has(selected);
+    continueBtn.disabled = busy;
+    continueBtn.textContent = busy ? "continuing…" : "continue →";
+  }
   if (deleteBtn) deleteBtn.style.display = selected ? "" : "none";
   if (archiveBtn) {
     archiveBtn.style.display = selected ? "" : "none";
@@ -1838,6 +1942,12 @@ function updateInfoBar() {
   // A delegated session names its parent, as a link to it.
   const parentChip = delegatedBy(current.parentId, allSessions.find((x) => x.id === current.parentId) || null);
   const parentHtml = parentChip ? `<a class="model parent" href="${escapeHtml(sessionHash(current.parentId))}" title="${escapeHtml(parentChip.title)}">delegated by ${escapeHtml(String(current.parentId).slice(0, 8))}</a>` : "";
+  // A link of a session chain: ← the previous link, → the next one (each
+  // only while the list holds it).
+  const chainHtml = [
+    chain.prev ? chainLinkHtml(chain.prev, "\u2190", "The previous link of this chain") : "",
+    chain.next ? chainLinkHtml(chain.next, "\u2192", "The next link of this chain") : "",
+  ].join("");
   // A parent names its delegates; the link opens all sessions.
   const kids = childrenSummary({ id: selected }, allSessions);
   // The model notes the session's prompt carried.
@@ -1847,14 +1957,29 @@ function updateInfoBar() {
   const attachCmd = `chi --attach ${selected}`;
   const copied = Date.now() - attachCopiedAt < 2000;
   const copyHtml = `<button type="button" class="copy-attach" title="Copy &quot;${escapeHtml(attachCmd)}&quot; to attach a terminal">${copied ? "copied ✓" : "copy chi --attach"}</button>`;
-  const metaHtml = `<div class="meta"><span class="id" title="${escapeHtml(selected)}">${escapeHtml(idShort)}</span>${copyHtml}<span class="${statusClass}">${escapeHtml(current.status||"")}</span><span class="model${label.mismatch ? " served-mismatch" : ""}" title="${escapeHtml(label.title)}">${escapeHtml(label.text)}</span>${parentHtml}${kidsHtml}${llmContextChipHtml(current.llmContext, escapeHtml)}${notesHtml}${current.usedMemories.length ? `<span class="model mem-chip" title="${escapeHtml(memChipTitle(current.usedMemories))}">${escapeHtml(memChipText(current.usedMemories))}</span>` : ""}<span class="dir" title="${escapeHtml(current.dir||"")}"><bdi>${escapeHtml(current.dir||"")}</bdi></span>${ctxText ? `<span class="model ctx" title="${escapeHtml(ctxTip)}">${escapeHtml(ctxText)}</span>` : ""}${speedTextNow ? `<span class="model speed" title="${escapeHtml(speedTip)}">${escapeHtml(speedTextNow)}</span>` : ""}${timingText ? `<span class="model session-time"></span>` : ""}${workerBadgeHtml()}</div>`;
-  const previewHtml = `<div class="preview-line"><span class="preview">${escapeHtml(current.firstPreview || "—")}</span> · <span class="mem" title="${escapeHtml(current.usedMemories.join(", "))}">mem: ${escapeHtml(memText)}</span></div>`;
+  const metaHtml = `<div class="meta"><span class="id" title="${escapeHtml(selected)}">${escapeHtml(idShort)}</span>${copyHtml}<span class="${statusClass}">${escapeHtml(current.status||"")}</span><span class="model${label.mismatch ? " served-mismatch" : ""}" title="${escapeHtml(label.title)}">${escapeHtml(label.text)}</span>${chainHtml}${parentHtml}${kidsHtml}${llmContextChipHtml(current.llmContext, escapeHtml)}${notesHtml}${current.usedMemories.length ? `<span class="model mem-chip" title="${escapeHtml(memChipTitle(current.usedMemories))}">${escapeHtml(memChipText(current.usedMemories))}</span>` : ""}<span class="dir" title="${escapeHtml(current.dir||"")}"><bdi>${escapeHtml(current.dir||"")}</bdi></span>${ctxText ? `<span class="model ctx" title="${escapeHtml(ctxTip)}">${escapeHtml(ctxText)}</span>` : ""}${speedTextNow ? `<span class="model speed" title="${escapeHtml(speedTip)}">${escapeHtml(speedTextNow)}</span>` : ""}${timingText ? `<span class="model session-time"></span>` : ""}${workerBadgeHtml()}</div>`;
+  // The title line follows the card's: a chain link opened with the opener
+  // reads its chain's first link's title (cardTitle).
+  const shown = sessionsById().get(selected);
+  const titleText = shown && isOpener(current.firstPreview) ? cardTitle(shown) : current.firstPreview;
+  const previewHtml = `<div class="preview-line"><span class="preview">${escapeHtml(titleText || "—")}</span> · <span class="mem" title="${escapeHtml(current.usedMemories.join(", "))}">mem: ${escapeHtml(memText)}</span></div>`;
   // The session clock ticks every second while a turn runs: only its text
   // changes, the bar's other nodes (a tooltip, a button mid-press) stay.
   renderStable(infoTextEl, metaHtml + previewHtml, { ".session-time": timingText });
   infoTextEl.title = memoriesTooltip(current.usedMemories, current.preloadedMemories, current.mutedMemories);
 }
 
+// The info bar's ← / → link to a chain's link (chains.js chainNeighbours):
+// its date (else its short id), its preview and id in the tooltip.
+function chainLinkHtml(link, arrow, what) {
+  const short = String(link.id).slice(0, 8);
+  const date = chainDate(link.session?.created_at);
+  const preview = link.session ? cardTitle(link.session) : "";
+  const title = `${what}: ${short}${preview ? ` · ${preview}` : ""}${link.session?.archived ? " (archived)" : ""}`;
+  const text = arrow === "\u2190" ? `${arrow} ${date || short}` : `${date || short} ${arrow}`;
+  return `<a class="model chain-link" href="${escapeHtml(sessionHash(link.id))}" title="${escapeHtml(title)}">${escapeHtml(text)}</a>`;
+}
+
 // `memories: a, b · preloaded: c · muted: d`: the used memories always,
 // the session's --memory and --mute lists only when there are any.
 function memoriesTooltip(used, preloaded, muted) {
@@ -2727,12 +2852,67 @@ $("#infoStopBtn").addEventListener("click", async () => {
 $("#infoDeleteBtn").addEventListener("click", () => {
   if (selected) confirmDelete(selected);
 });
+$("#infoContinueBtn").addEventListener("click", () => continueSelected());
 $("#infoArchiveBtn").addEventListener("click", () => {
   if (!selected) return;
   if (selectedArchived()) setArchived(selected, false);
   else setArchived(selected, true);
 });
 
+// ── Continue (session chains) ───────────────────────────────────────────────
+// Continue → starts the next link of the open session's chain (the server
+// waits up to 30 s for its recap, archives it, starts the new one with the
+// recap as a note) and opens it with the opener in the composer, not sent.
+// A link continued already opens that next link; its open delegates move
+// to the new link (the toast counts them); a refusal for open delegates
+// that can't move names them, each a link.
+// One continue per session at a time (the server locks it too); another
+// session's continue may run beside it.
+const continuingIds = new Set();
+
+async function continueSelected() {
+  if (!selected || continuingIds.has(selected)) return;
+  const id = selected;
+  const short = id.slice(0, 8);
+  continuingIds.add(id);
+  updateInfoBar();
+  try {
+    const created = await continueSession(id);
+    markArchived([id], true);
+    addCreatedSession(created);
+    const next = created.id;
+    if (selected !== id) {
+      showToast(continuedText(id, created, { opened: false }), { label: "Open", run: () => select(next) });
+      return;
+    }
+    await select(next);
+    if (selected === next) fillOpener();
+    showToast(continuedText(id, created));
+  } catch (e) {
+    const refusal = continueRefusal(e, allSessions);
+    if (refusal.kind === "open") {
+      if (selected === id) await select(refusal.id);
+      showToast(`${short} is continued already: ${selected === refusal.id ? "opened" : "see"} ${refusal.id.slice(0, 8)}`);
+    } else if (refusal.kind === "children") {
+      showToast(openChildrenHtml(id, refusal.children, sessionHash), null, { sticky: true, html: true });
+    } else {
+      showToast(`Can't continue ${short}: ${refusal.text}`, null, { sticky: true });
+    }
+  } finally {
+    continuingIds.delete(id);
+    updateInfoBar();
+  }
+}
+
+// The new link's composer: the opener, unless a draft is there (it stays).
+function fillOpener() {
+  if (promptEl.value.trim() || chips.length) return;
+  promptEl.value = CONTINUE_OPENER;
+  fitPrompt();
+  promptEl.focus();
+  promptEl.setSelectionRange(promptEl.value.length, promptEl.value.length);
+}
+
 // ── Archive ────────────────────────────────────────────────────────────────
 // Archive hides a session (and its delegates) from the strip and the list,
 // kept for good; "include archived" in all sessions finds it. No confirm:
@@ -2794,9 +2974,10 @@ async function setArchived(id, archive, { undo = true } = {}) {
 
 // sticky: stays until its action or its ✕ (else gone after 6 s).
 let toastTimer = null;
-function showToast(text, action = null, { sticky = false } = {}) {
+// html: +text+ is markup this page built (its parts escaped), not words.
+function showToast(text, action = null, { sticky = false, html = false } = {}) {
   const el = $("#toast");
-  el.innerHTML = `<span>${escapeHtml(text)}</span>${action ? `<button type="button" class="toast-action">${escapeHtml(action.label)}</button>` : ""}` +
+  el.innerHTML = `<span>${html ? text : escapeHtml(text)}</span>${action ? `<button type="button" class="toast-action">${escapeHtml(action.label)}</button>` : ""}` +
     (sticky ? `<button type="button" class="toast-close" title="Dismiss" aria-label="Dismiss">✕</button>` : "");
   el.hidden = false;
   el.querySelector(".toast-action")?.addEventListener("click", () => {
@@ -2804,6 +2985,8 @@ function showToast(text, action = null, { sticky = false } = {}) {
     action.run();
   });
   el.querySelector(".toast-close")?.addEventListener("click", () => { el.hidden = true; });
+  // A link in it (a delegate a continue waits for) opens that session.
+  el.querySelectorAll("a[href]").forEach((a) => a.addEventListener("click", () => { el.hidden = true; }));
   clearTimeout(toastTimer);
   if (!sticky) toastTimer = setTimeout(() => { el.hidden = true; }, 6000);
 }