@vale-dinap/lucidly 0.3.0 → 0.4.0

package/web/app.js

@@ -1359,14 +1359,19 @@ function flowNode({ key, id, kind, st, label, tip, badge = '', extra = '' }) {
 
 function chainItems(g, q) {
   const steps = kids(g).filter((c) => c.type === 'step');
+  // Each node also says, in a few words, what it stands for (`say`: Glance's line under the orb).
   const items = [
-    flowNode({ key: 'start', id: g.id, kind: 'start', st: 'start', label: 'Request', tip: `You asked (${clock(g.startedAt)}): ${clip(g.title, 300)}`, extra: ' start' }),
+    {
+      ...flowNode({ key: 'start', id: g.id, kind: 'start', st: 'start', label: 'Request', tip: `You asked (${clock(g.startedAt)}): ${clip(g.title, 300)}`, extra: ' start' }),
+      say: { tag: 'Your request', st: 'you', text: g.startedAt ? `sent at ${clock(g.startedAt)}` : '' },
+    },
   ];
   // A task with no steps but some work of its own: one node stands for that work.
   if (!steps.length && (g.stats?.actions ?? 0) > 0) {
     const kind = stepKind(g);
     const st = unresolvedOf(g) ? 'bad' : g.status === 'active' ? (liveNow() ? 'live' : 'idle') : 'done';
-    items.push(flowNode({ key: `w:${g.id}`, id: g.id, kind, st, label: plural(g.stats.actions, 'action'), tip: `${plural(g.stats.actions, 'action')}, mostly ${KIND_LABEL[kind]}` }));
+    const text = `${plural(g.stats.actions, 'action')}, mostly ${KIND_LABEL[kind]}`;
+    items.push({ ...flowNode({ key: `w:${g.id}`, id: g.id, kind, st, label: plural(g.stats.actions, 'action'), tip: text }), say: { tag: 'Work', st, text } });
   }
   // A task can run over several rounds: a reply after its turn ended continues it. The round's
   // end node stays where it was, turned into an intermediate goal, and the reply follows it.
@@ -1378,15 +1383,17 @@ function chainItems(g, q) {
       const st = reached ? 'done' : g.status === 'waiting' ? 'wait' : 'pend';
       const label = reached ? 'Done' : g.status === 'waiting' ? 'Interrupted' : 'Goal';
       const tip = g.outcome ? `Result: ${clip(g.outcome, 400)}` : `Goal: ${clip(goalAim(g), 300)}`;
-      return flowNode({ key: `end:${round}`, id: g.id, kind: 'end', st, label, tip, extra: ' end' });
+      const say = { tag: g.outcome ? 'Result' : label === 'Done' ? 'Done' : label, st: st === 'done' ? 'done' : st === 'wait' ? 'wait' : 'pend', text: g.outcome ?? goalAim(g) };
+      return { ...flowNode({ key: `end:${round}`, id: g.id, kind: 'end', st, label, tip, extra: ' end' }), say };
     }
     const label = r.interrupted ? 'Interrupted' : r.asked ? 'Asked' : 'Done';
     const tip = `${r.interrupted ? 'Interrupted' : r.asked ? 'Asked you' : 'Done for now'}${r.outcome ? `: ${clip(r.outcome, 400)}` : ''}\nThe task went on after your reply.`;
-    return flowNode({ key: `end:${round}`, id: g.id, kind: r.interrupted ? 'mid-wait' : r.asked ? 'mid-ask' : 'mid', st: r.interrupted ? 'wait' : 'done', label, tip, extra: ' mid' });
+    const say = { tag: r.interrupted ? 'Interrupted' : r.asked ? 'Asked you' : 'Done for now', st: r.interrupted ? 'wait' : r.asked ? 'ask' : 'done', text: r.outcome ?? '' };
+    return { ...flowNode({ key: `end:${round}`, id: g.id, kind: r.interrupted ? 'mid-wait' : r.asked ? 'mid-ask' : 'mid', st: r.interrupted ? 'wait' : 'done', label, tip, extra: ' mid' }), say };
   };
   // Every message of yours is a node: a reply that continued the task, or one sent while it worked.
-  const replyNode = (c) =>
-    flowNode({
+  const replyNode = (c) => ({
+    ...flowNode({
       key: `u:${c.id}`,
       id: g.id,
       kind: 'start',
@@ -1394,7 +1401,9 @@ function chainItems(g, q) {
       label: c.round ? 'Reply' : 'Message',
       tip: `${c.round ? 'You replied' : 'You wrote, while the agent worked'} (${clock(c.startedAt)}): ${clip(c.title.replace(/^You: /, ''), 300)}`,
       extra: ' reply',
-    });
+    }),
+    say: { tag: c.round ? 'Your reply' : 'Your message', st: 'you', text: c.title.replace(/^You: /, '') },
+  });
   let i = 0;
   for (const c of kids(g)) {
     if (c.kind === 'user') {
@@ -1424,7 +1433,8 @@ function chainItems(g, q) {
       st === 'bad' ? 'Failed: nothing has worked after it yet' : rec ? 'Failed along the way, then recovered' : s.untracked ? "Done with the others: its work wasn't told apart" : '',
     ].filter(Boolean).join('\n');
     const badge = (st === 'bad' ? '<span class="fn-b bad">!</span>' : rec ? '<span class="fn-b rec"></span>' : '') + (a > 1 ? `<span class="fn-n">${a > 99 ? '99+' : a}</span>` : '');
-    items.push({ ...flowNode({ key: `s:${s.id}`, id: s.id, kind, st, label: s.title, tip, badge, extra: (s.untracked ? ' untr' : '') + dim }), i });
+    const say = { tag: `Step ${i + 1} of ${steps.length}`, st, text: s.title };
+    items.push({ ...flowNode({ key: `s:${s.id}`, id: s.id, kind, st, label: s.title, tip, badge, extra: (s.untracked ? ' untr' : '') + dim }), i, say });
     const cap = capsuleItem(s, dim);
     if (cap) items.push(cap);
   }
@@ -1486,8 +1496,8 @@ const glanceTime = (s) => (s.ago ? ago(s.since) : dur(s.since));
 function renderGlance(view) {
   if (!view.__glance) {
     view.innerHTML = `<div class="glance">
-      <div class="gx-state"><button type="button" class="gx-orb" data-glive><svg viewBox="0 0 24 24" aria-hidden="true"><path d=""/></svg></button><div class="gx-time"></div><div class="gx-ask" hidden><small>Waiting for your answer</small><span></span></div></div>
-      <div class="gx-title"></div>
+      <div class="gx-state"><button type="button" class="gx-orb" data-glive><svg viewBox="0 0 24 24" aria-hidden="true"><path d=""/></svg></button><div class="gx-time"></div><div class="gx-ask" hidden><small>Waiting for your answer</small><span></span></div><button type="button" class="gx-agents" aria-haspopup="true" aria-expanded="false" hidden></button><div class="gx-agpop" role="menu" hidden></div></div>
+      <div class="gx-lines"><div class="gx-line gx-task"></div><div class="gx-line gx-step"></div></div>
       <div class="gx-wheel"></div>
       <div class="gx-hint">Scroll or <kbd>↑</kbd> <kbd>↓</kbd> for other tasks · <kbd>←</kbd> <kbd>→</kbd> along the steps · <kbd>Enter</kbd> toggle selection · <kbd>F</kbd> back to now</div>
     </div>`;
@@ -1516,17 +1526,20 @@ function renderGlance(view) {
     S.gSettleTimer = setTimeout(schedule, wait + 20);
   }
   // With the side panel open, a past task shows its conversation there as soon as it reaches the
-  // spotlight (from your first message), without waiting for it to unfold; back on the live
-  // task, the panel shows what it showed before. A closed panel stays closed.
+  // spotlight, at its goal (where the chain is centred, see placeChain), without waiting for it
+  // to unfold; back on the live task, the panel shows what it showed before. A closed panel
+  // stays closed.
   const past = !!spot && spot !== live;
   if (past && S.gOpened !== spot.id) {
     S.gOpened = spot.id;
     if (S.selected) {
       if (!S.gAutoSel) S.gPrevSel = { sel: S.selected, pick: S.flowPick, focus: S.focus };
+      // The goal is the last round's end (each reply that continued the task began a round).
+      const round = kids(spot).filter((c) => c.kind === 'user' && c.round).length;
       S.gAutoSel = spot.id;
       S.selected = spot.id;
-      S.flowPick = 'start';
-      S.focus = { at: 'request' };
+      S.flowPick = `end:${round}`;
+      S.focus = { at: 'end', round };
     }
   } else if (!past) {
     S.gOpened = null;
@@ -1562,10 +1575,6 @@ function renderGlance(view) {
   if (ask.hidden !== (q === null)) ask.hidden = q === null;
   const words = q || 'The agent asked you something.';
   if (q !== null && ask.lastChild.textContent !== words) ask.lastChild.textContent = words;
-  const title = root.querySelector('.gx-title');
-  const t = spot ? spot.title : '';
-  if (title.textContent !== t) title.textContent = t;
-  title.title = t;
 
   // The wheel: two tasks above the spotlight and two below, compressed to their node and fading
   // with distance. Empty slots keep the spotlight on the same spot at the start and end of the run.
@@ -1608,9 +1617,135 @@ function renderGlance(view) {
         if (!el.classList.contains('pad')) el.animate([{ opacity: 0, transform: `translateY(${(S.gDir ?? 1) > 0 ? 36 : -36}px)` }, {}], { duration: glanceFast() ? 170 : 380, easing: 'cubic-bezier(.2,.7,.3,1)' });
       } else if (Math.abs(from - top) > 1) el.animate([{ transform: `translateY(${from - top}px)` }, { transform: 'none' }], { duration: glanceFast() ? 170 : 380, easing: 'cubic-bezier(.2,.7,.3,1)' });
     }
+  glanceLines(root, spot, spot === live ? s : null);
+  glanceAgents(root);
   S.glanceReady = true;
 }
 
+// Small status marks for the lines under the orb: a spinning ring while it runs, a tick, a
+// cross, a balloon, a pause, or an empty ring for what hasn't started (or has gone quiet).
+const GX_MARK = { done: GLYPH.check, bad: 'M7 7l10 10 M17 7L7 17', ask: GLYPH['mid-ask'], wait: GLYPH.pause, you: PATHS.user };
+const gxMark = (st) => `<span class="gx-mk m-${st}" aria-hidden="true">${GX_MARK[st] ? SVG(GX_MARK[st]) : ''}</span>`;
+
+/** The task in the spotlight's state, for its line: the live one follows the orb. */
+function glanceTaskSt(g, s) {
+  if (s?.st === 'you') return 'ask';
+  if (s?.st === 'bad' || g.status === 'failed') return 'bad';
+  if (g.status === 'active') return s?.st === 'work' ? 'live' : 'idle';
+  if (g.status === 'waiting') return 'wait';
+  if (g.asked) return 'ask';
+  return 'done';
+}
+
+const GX_SAY = { live: 'Under way', idle: 'Under way', done: 'Done', bad: 'In trouble', ask: 'Asked you', wait: 'Interrupted' };
+
+/**
+ * Two lines under the orb: the task in the spotlight, and the node in the middle of its chain
+ * (the step under way by default; ← → move it), each with a mark saying how it stands.
+ */
+function glanceLines(root, g, s) {
+  const task = root.querySelector('.gx-task');
+  const step = root.querySelector('.gx-step');
+  const set = (el, html, tip) => {
+    if (el.__html !== html) {
+      el.innerHTML = html;
+      el.__html = html;
+    }
+    el.title = tip;
+  };
+  if (!g) {
+    set(task, '', '');
+    set(step, '', '');
+    return;
+  }
+  const ts = glanceTaskSt(g, s);
+  set(task, `${gxMark(ts)}<span class="gx-tx">${esc(g.title)}</span>`, `${GX_SAY[ts] ?? ''}: ${g.title}`);
+  // The chain's middle, once the task has unfolded in the spotlight (until then, the line keeps
+  // its place, empty, so nothing below it moves).
+  const f = S.gFocusNow;
+  const it = f?.goal === g.id ? S.gItemsNow?.[f.c] : null;
+  const say = it?.say;
+  if (!say) return set(step, '', '');
+  const text = clip(say.text.replace(/\s+/g, ' '), 300);
+  set(step, `${gxMark(say.st)}<small class="m-${say.st}">${esc(say.tag)}</small>${text ? `<span class="gx-tx">${esc(text)}</span>` : ''}`, `${say.tag}${text ? `: ${text}` : ''}`);
+}
+
+/** Subagents still at work, anywhere in the run (a background one can outlive the agent's turn). */
+const runningAgents = () =>
+  S.downAt || isStale() ? [] : Object.values(S.nodes).filter((n) => n.type === 'subtask' && n.origin === 'subagent' && n.status === 'active');
+
+const agentName = (a) => a.title.replace(/^Subagent:\s*/, '');
+
+/**
+ * Running subagents, at a glance: a tag on the orb's left (the side the question balloon doesn't
+ * use), there only while some run, naming the latest one, "+N" for the others. A click lists them
+ * all; picking one brings the step that launched it into the spotlight (see glancePickAgent).
+ */
+function glanceAgents(root) {
+  // Latest first.
+  const ags = runningAgents().sort((a, b) => (b.startedAt ?? '').localeCompare(a.startedAt ?? ''));
+  const tag = root.querySelector('.gx-agents');
+  const pop = root.querySelector('.gx-agpop');
+  if (tag.hidden !== !ags.length) tag.hidden = !ags.length;
+  if (!ags.length) S.gAgOpen = false;
+  if (pop.hidden !== !S.gAgOpen) pop.hidden = !S.gAgOpen;
+  tag.setAttribute('aria-expanded', String(!!S.gAgOpen));
+  tag.classList.toggle('open', !!S.gAgOpen);
+  if (!ags.length) return;
+  const more = ags.length - 1;
+  const html = `<span class="gx-mk m-live" aria-hidden="true"></span><span class="gx-ag-t"><small>${more ? 'Subagents running' : 'Subagent running'}</small><span class="gx-ag-n"><span class="gx-tx">${esc(agentName(ags[0]))}</span>${more ? `<b>+${more}</b>` : ''}</span></span>`;
+  if (tag.__html !== html) {
+    tag.innerHTML = html;
+    tag.__html = html;
+  }
+  const tip = `${more ? `${ags.length} subagents are` : 'A subagent is'} still running${S.run.status === 'working' ? '' : ', after the agent finished its turn'}\nClick to see ${more ? 'them' : 'it'}`;
+  tag.title = tip;
+  tag.setAttribute('aria-label', tip);
+  if (!S.gAgOpen) return;
+  // The list: each subagent, how long it has run, and the task (and step) that launched it.
+  const rows = ags
+    .map((a) => {
+      const up = ancestors(a.id);
+      const step = up.find((n) => n.type === 'step');
+      const goal = up.find((n) => n.type === 'goal');
+      const where = [goal ? clip(goal.title, 60) : '', step ? clip(step.title, 60) : ''].filter(Boolean).join(' › ');
+      const acts = a.stats?.actions ?? 0;
+      return `<button type="button" class="gx-ag-row" role="menuitem" data-gpick="${a.id}" title="${esc(`${agentName(a)}\n${where}\nBring it into the spotlight`)}"><span class="gx-mk m-live" aria-hidden="true"></span><span class="gx-ag-t"><span class="gx-tx">${esc(agentName(a))}</span><small>${esc([a.startedAt ? dur(a.startedAt) : '', acts ? plural(acts, 'action') : '', where].filter(Boolean).join(' · '))}</small></span></button>`;
+    })
+    .join('');
+  if (pop.__html !== rows) {
+    pop.innerHTML = rows;
+    pop.__html = rows;
+  }
+}
+
+/**
+ * A subagent picked from the list: the wheel turns to its task, the chain centres on the step that
+ * launched it, and the side panel, if it's open, shows the subagent.
+ */
+function glancePickAgent(id) {
+  const a = N(id);
+  if (!a) return;
+  const up = ancestors(id);
+  const goal = up.find((n) => n.type === 'goal');
+  const step = up.find((n) => n.type === 'step');
+  S.gAgOpen = false;
+  if (goal) {
+    glanceSpot(goal.id);
+    S.gFocus = { goal: goal.id, key: step ? `s:${step.id}` : `w:${goal.id}` };
+  }
+  if (S.selected) {
+    // The panel follows the pick, not the task the wheel turned to (see renderGlance).
+    S.gOpened = goal?.id ?? null;
+    S.gAutoSel = null;
+    S.gPrevSel = null;
+    S.follow = false;
+    S.selected = id;
+    S.focus = null;
+  }
+  schedule();
+}
+
 /** Moving fast through the wheel: rows slide quicker so they keep up. */
 const glanceFast = () => (S.gStreak ?? 0) >= 2 && Date.now() - (S.gStepAt ?? 0) < 200;
 
@@ -1657,15 +1792,16 @@ function placeChain(row, g, items, unfold) {
   const keys = items.map((it) => it.key);
   // The node in the middle.
   let c = S.gFocus?.goal === g.id ? keys.indexOf(S.gFocus.key) : -1;
-  // By default: on a past task, your request (where it began); on the live one, the step under
+  // By default: on a past task, its goal (where it ended up); on the live one, the step under
   // way, its goal once it's done, or the latest step.
-  if (c < 0 && g.id !== (S.run.currentGoal ?? S.run.goals[S.run.goals.length - 1])) c = 0;
+  if (c < 0 && g.id !== (S.run.currentGoal ?? S.run.goals[S.run.goals.length - 1])) c = n - 1;
   if (c < 0 && (g.status === 'done' || g.status === 'failed')) c = n - 1;
   if (c < 0) {
     for (let i = n - 1; i >= 0 && c < 0; i--) if (items[i].st === 'live' || items[i].st === 'idle' || items[i].st === 'bad') c = i;
     if (c < 0) c = Math.max(0, n - 2);
   }
   S.gFocusNow = { goal: g.id, keys, c };
+  S.gItemsNow = items;
   const s = GLANCE_SLOT;
   const W = track.clientWidth;
   const mid = W / 2;
@@ -1835,6 +1971,8 @@ $('#pathView').addEventListener(
   'wheel',
   (e) => {
     if (S.view !== 'path' || S.layout !== 'glance' || e.ctrlKey) return;
+    // The running-subagents list scrolls on its own.
+    if (e.target instanceof Element && e.target.closest('.gx-agpop')) return;
     e.preventDefault();
     const now = Date.now();
     S.gWheel = (now - (S.gWheelAt ?? 0) > 400 ? 0 : (S.gWheel ?? 0)) + e.deltaY;
@@ -2272,7 +2410,7 @@ function renderHeader() {
   const r = S.run;
   $('#runTitle').textContent = r ? (r.title ?? r.cwd ?? 'Untitled run') : 'No run open';
   $('#runSub').textContent = r ? [r.cwd, r.updatedAt ? `updated ${ago(r.updatedAt)}` : ''].filter(Boolean).join(' · ') : '';
-  document.title = r?.title ? `${r.title} · Lucidly` : 'Lucidly';
+  pageTitle();
   const [st, text] = runState();
   $('#status').dataset.status = st;
   $('#statusText').textContent = text;
@@ -3361,14 +3499,17 @@ function render() {
 }
 
 // ───────────────────────────── connection
-function connect(runId) {
+function connect(runId, restore = null) {
   S.es?.close();
   // A session opens at the top, on the timeline; the arrow button (or F) jumps to the end.
   Object.assign(S, { runId, run: null, nodes: {}, selected: null, follow: false, raw: new Map(), lastFollowTarget: null, expandAll: null, firstPaint: true, seenActs: null });
   for (const set of [S.openGoals, S.closedGoals, S.openSteps, S.closedSteps, S.allActs, S.openActs, S.closedActs]) set.clear();
   Object.assign(S, { actions: null, actionsStale: true, actionsLimit: 400, stripRows: [], zoom: { a: 0, b: 1 } });
+  // Back on a tab: its place is put back once its data is in (see restoreTab).
+  S.restore = restore;
+  if (restore) S.view = restore.view;
   writeHash();
-  const es = new EventSource(`/api/s/${runId}/stream`);
+  const es = new EventSource(`/api/s/${runId}/stream?client=${CLIENT}`);
   S.es = es;
   es.addEventListener('open', () => setDown(false));
   es.addEventListener('snapshot', (e) => {
@@ -3376,8 +3517,10 @@ function connect(runId) {
     S.run = snap.run;
     S.nodes = snap.nodes;
     S.actionsStale = true;
+    if (S.restore) restoreTab();
     for (const v of S.raw.values()) v.stale = true;
     schedule();
+    renderTabs();
   });
   es.addEventListener('patch', (e) => {
     const p = JSON.parse(e.data);
@@ -3402,11 +3545,7 @@ function connect(runId) {
       setDown(false);
       if (!runs.some((r) => r.id === runId) && S.runId === runId) {
         es.close();
-        S.run = null;
-        S.runId = null;
-        history.replaceState(null, '', '#');
-        schedule();
-        openPicker();
+        tabGone(runId);
       }
     } catch {
       // The server is gone: say so. EventSource keeps retrying, and reconnects when it is back.
@@ -3415,6 +3554,273 @@ function connect(runId) {
   };
 }
 
+// ───────────────────────────── session tabs
+/*
+ * Several sessions open at once, one tab each. Only the tab you're on is fully loaded (its own
+ * stream, as before); the others get their state (working, your turn, done...) from one light
+ * stream for all of them (/api/tabs/stream), so their dots stay live. Switching saves where you
+ * were in the tab you leave (view, selection, spotlight, scroll) and puts it back when you return.
+ *
+ * Picking a session replaces the one in the current tab; Ctrl/⌘-click, a middle click, the row's
+ * "new tab" button or the strip's + open it in a new tab. A session already in a tab is never
+ * opened twice: picking it switches to its tab. Closing a tab stops its session on the server,
+ * unless another page has it too. The strip shows from two tabs on; the tabs are kept per browser
+ * tab (sessionStorage), by session file, so they come back after a reload or a server restart.
+ */
+const CLIENT = (() => {
+  const make = () => globalThis.crypto?.randomUUID?.() ?? `c${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+  try {
+    let id = sessionStorage.getItem('lucidly.client');
+    if (!id) sessionStorage.setItem('lucidly.client', (id = make()));
+    return id;
+  } catch {
+    return make();
+  }
+})();
+
+const T = { tabs: [], active: null, seq: 0, es: null, esIds: '' };
+/** A tab not on screen that turns one of these wants you: it flashes, then glows until you open it. */
+const TAB_ATTN = new Set(['you', 'bad', 'done']);
+/** How long it flashes (the CSS animation: 4 × 0.8s). */
+const TAB_FLASH_MS = 3200;
+const TAB_SAY = { work: 'Working', you: 'Your turn: it asked you', bad: 'Working, with failures', done: 'Finished', rest: 'Finished a while ago', quiet: 'Quiet', paused: 'Interrupted' };
+// What a tab keeps of where you were.
+const TAB_KEEP = ['selected', 'follow', 'expandAll', 'layout', 'pf', 'af', 'ff', 'zoom', 'focus', 'flowPick', 'gSpot', 'gFocus', 'gOpened', 'gPrevSel', 'gAutoSel'];
+const TAB_SETS = ['openGoals', 'closedGoals', 'openSteps', 'closedSteps', 'allActs', 'openActs', 'closedActs'];
+
+const activeTab = () => T.tabs.find((t) => t.uid === T.active) ?? null;
+const tabOf = (runId) => T.tabs.find((t) => t.runId === runId) ?? null;
+const samePath = (a, b) => !!a && !!b && a.replace(/\\/g, '/').toLowerCase() === b.replace(/\\/g, '/').toLowerCase();
+const tabOfPath = (path) => T.tabs.find((t) => samePath(t.path, path)) ?? null;
+const newTab = (runId, o = {}) => ({ uid: ++T.seq, runId, path: o.path ?? null, title: o.title ?? '', sum: null, attn: false, flashAt: 0, state: null });
+
+function saveTabs() {
+  try {
+    const i = T.tabs.findIndex((t) => t.uid === T.active);
+    sessionStorage.setItem('lucidly.tabs', JSON.stringify({ tabs: T.tabs.map((t) => ({ runId: t.runId, path: t.path, title: t.title })), active: i }));
+  } catch {
+    // Storage blocked: the tabs just won't survive a reload.
+  }
+}
+
+function loadTabs() {
+  try {
+    const v = JSON.parse(sessionStorage.getItem('lucidly.tabs') ?? 'null');
+    return v && Array.isArray(v.tabs) ? v : { tabs: [], active: -1 };
+  } catch {
+    return { tabs: [], active: -1 };
+  }
+}
+
+/** Where you are in the session on screen, to put back when you return to its tab. */
+function tabState() {
+  const st = { view: S.view, top: $('#pane').scrollTop, raw: S.raw };
+  for (const k of TAB_KEEP) st[k] = S[k] && typeof S[k] === 'object' ? structuredClone(S[k]) : S[k];
+  for (const k of TAB_SETS) st[k] = new Set(S[k]);
+  return st;
+}
+
+/** Called with the session's first data, once back on its tab (see connect). */
+function restoreTab() {
+  const st = S.restore;
+  S.restore = null;
+  for (const k of TAB_KEEP) S[k] = st[k];
+  for (const k of TAB_SETS) S[k] = st[k];
+  S.raw = st.raw;
+  S.view = st.view;
+  S.firstPaint = false;
+  // Following finds its own place; otherwise the scroll position comes back once drawn.
+  requestAnimationFrame(() => requestAnimationFrame(() => S.follow || ($('#pane').scrollTop = st.top)));
+}
+
+/** Shows a tab's session (saving where you were in the one you leave). */
+function showTab(tab) {
+  if (!tab) return;
+  if (T.active === tab.uid && S.runId === tab.runId) return;
+  const cur = activeTab();
+  if (cur && cur !== tab && S.run && S.runId === cur.runId) cur.state = tabState();
+  T.active = tab.uid;
+  tab.attn = false;
+  S.gAgOpen = false;
+  connect(tab.runId, tab.state);
+  tab.state = null;
+  renderTabs();
+  saveTabs();
+}
+
+/**
+ * Shows a run: switches to its tab if one has it; otherwise opens it in a new tab (`newTab`, or
+ * when there's none yet) or in place of the current tab's session, which then stops.
+ */
+function openRun(runId, o = {}) {
+  const have = tabOf(runId) ?? (o.path ? tabOfPath(o.path) : null);
+  if (have) {
+    have.runId = runId;
+    showTab(have);
+    return tabsChanged();
+  }
+  const cur = activeTab();
+  if (cur && !o.newTab) {
+    const old = cur.runId;
+    Object.assign(cur, newTab(runId, o), { uid: cur.uid });
+    T.active = null;
+    showTab(cur);
+    releaseRun(old);
+  } else {
+    const t = newTab(runId, o);
+    // A new tab goes right after the current one.
+    const i = cur ? T.tabs.indexOf(cur) + 1 : T.tabs.length;
+    T.tabs.splice(i, 0, t);
+    showTab(t);
+  }
+  tabsChanged();
+}
+
+/** The run stops on the server, unless another tab or page still has it. */
+function releaseRun(runId) {
+  if (!runId || tabOf(runId)) return;
+  fetch(`/api/s/${runId}?client=${encodeURIComponent(CLIENT)}`, { method: 'DELETE' }).catch(() => {});
+}
+
+function closeTab(tab) {
+  const i = T.tabs.indexOf(tab);
+  if (i < 0) return;
+  T.tabs.splice(i, 1);
+  if (T.active === tab.uid) {
+    T.active = null;
+    const next = T.tabs[i] ?? T.tabs[i - 1];
+    if (next) showTab(next);
+    else closeAll();
+  }
+  releaseRun(tab.runId);
+  tabsChanged();
+}
+
+/** No tab left: the page is empty, and asks which session to open. */
+function closeAll() {
+  S.es?.close();
+  S.es = null;
+  Object.assign(S, { runId: null, run: null, nodes: {}, selected: null, restore: null });
+  history.replaceState(null, '', '#');
+  schedule();
+  openPicker();
+}
+
+/**
+ * A tab's run is gone from the server (it restarted, or closed it): a session file is opened
+ * again, in the same tab; a run that can't be (a saved snapshot, a stream) closes its tab.
+ */
+async function tabGone(runId) {
+  const tab = tabOf(runId);
+  if (!tab) {
+    if (S.runId === runId) closeAll();
+    return;
+  }
+  if (tab.reopening) return;
+  tab.reopening = true;
+  let id = null;
+  if (tab.path) {
+    try {
+      const res = await fetch('/api/open', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ path: tab.path }) });
+      if (res.ok) id = (await res.json()).run.id;
+    } catch {
+      // The server is down: the page says so (setDown), and the tab waits for it.
+      tab.reopening = false;
+      return;
+    }
+  }
+  tab.reopening = false;
+  if (!id) return closeTab(tab);
+  const shown = T.active === tab.uid;
+  const st = shown && S.run ? tabState() : tab.state;
+  tab.runId = id;
+  if (shown) {
+    connect(id, st);
+    tab.state = null;
+  }
+  tabsChanged();
+}
+
+/** The tab set changed: keep it, and follow the states of exactly these runs. */
+function tabsChanged() {
+  saveTabs();
+  renderTabs();
+  const ids = T.tabs.map((t) => t.runId).join(',');
+  if (T.es && T.esIds === ids) return;
+  T.es?.close();
+  T.es = null;
+  T.esIds = ids;
+  if (!ids) return;
+  const es = new EventSource(`/api/tabs/stream?client=${encodeURIComponent(CLIENT)}&runs=${ids}`);
+  T.es = es;
+  es.addEventListener('tabs', (e) => {
+    const { runs } = JSON.parse(e.data);
+    for (const [id, sum] of Object.entries(runs)) {
+      const tab = tabOf(id);
+      if (!tab) continue;
+      if (sum.gone) {
+        void tabGone(id);
+        continue;
+      }
+      const before = tab.sum?.state;
+      tab.sum = sum;
+      if (sum.title) tab.title = sum.title;
+      if (before && before !== sum.state && TAB_ATTN.has(sum.state) && (tab.uid !== T.active || document.hidden)) {
+        tab.attn = true;
+        tab.flashAt = Date.now();
+        setTimeout(renderTabs, TAB_FLASH_MS + 50);
+      }
+      if (!TAB_ATTN.has(sum.state)) tab.attn = false;
+    }
+    renderTabs();
+    saveTabs();
+  });
+}
+
+// Back on the page: the tab on screen no longer needs to call you.
+document.addEventListener('visibilitychange', () => {
+  const t = activeTab();
+  if (!document.hidden && t?.attn) {
+    t.attn = false;
+    renderTabs();
+  }
+});
+
+function renderTabs() {
+  const bar = $('#tabs');
+  bar.hidden = T.tabs.length < 2;
+  const act = activeTab();
+  const now = Date.now();
+  const html =
+    T.tabs
+      .map((t) => {
+        const on = t === act;
+        const title = (on && S.run?.title) || t.title || 'Untitled session';
+        const st = t.sum?.state ?? 'quiet';
+        const say = TAB_SAY[st] ?? '';
+        const q = st === 'you' && t.sum?.question ? `: “${clip(t.sum.question, 160)}”` : '';
+        const ag = t.sum?.agents ? ` · ${plural(t.sum.agents, 'subagent')} running` : '';
+        const tip = `${title}\n${say}${q}${ag}`;
+        return `<div class="tab${on ? ' on' : ''}${t.attn ? ' attn' : ''}${t.attn && now - t.flashAt < TAB_FLASH_MS ? ' flash' : ''}" role="tab" aria-selected="${on}" tabindex="${on ? 0 : -1}" data-tab="${t.uid}" title="${esc(tip)}"><span class="tdot s-${st}" aria-label="${esc(say)}"></span><span class="tt">${esc(title)}</span>${t.sum?.agents ? `<span class="tag" aria-hidden="true">${t.sum.agents}</span>` : ''}<button type="button" class="tx" data-tabx="${t.uid}" aria-label="Close tab" title="Close tab">${CLOSE}</button></div>`;
+      })
+      .join('') + `<button type="button" class="tab-add" data-tabadd title="Open a session in a new tab" aria-label="Open a session in a new tab">${SVG('M12 5v14M5 12h14')}</button>`;
+  fill(bar, html);
+  pageTitle();
+}
+
+/** The page's title: the session on screen, after how many tabs want you, if any. */
+function pageTitle() {
+  const name = S.run && (S.run.title ?? activeTab()?.title);
+  const n = T.tabs.filter((t) => t.attn).length;
+  document.title = `${n ? `(${n}) ` : ''}${name ? `${name} · Lucidly` : 'Lucidly'}`;
+}
+
+function cycleTab(by) {
+  const i = T.tabs.indexOf(activeTab());
+  if (T.tabs.length < 2 || i < 0) return;
+  showTab(T.tabs[(i + by + T.tabs.length) % T.tabs.length]);
+}
+
 // ───────────────────────────── picker
 /*
  * The session list. While it is open (and the tab is visible) it refreshes every few seconds, so a
@@ -3423,12 +3829,19 @@ function connect(runId) {
  * one leaves the list as it was (the server-stopped bar says why).
  */
 const PICKER_REFRESH = 4000;
-async function openPicker({ quiet = false } = {}) {
+async function openPicker({ quiet = false, newTab = false } = {}) {
   const dlg = $('#picker');
   if (!dlg.open) {
     if (quiet) return;
     dlg.showModal();
   }
+  if (!quiet) {
+    // From the strip's +, what you pick opens in a new tab; otherwise it replaces this tab's session.
+    S.pickNew = newTab && T.tabs.length > 0;
+    $('#pickerTitle').textContent = S.pickNew ? 'Open in a new tab' : 'Open session';
+    const mod = /Mac|iP(hone|ad)/.test(navigator.platform) ? '⌘' : 'Ctrl';
+    $('#pickerHint').textContent = T.tabs.length && !S.pickNew ? `${mod}-click or middle-click a session to open it in a new tab.` : '';
+  }
   S.pickerTimer ??= setInterval(() => {
     if (!dlg.open) S.pickerTimer = void clearInterval(S.pickerTimer);
     else if (!document.hidden) openPicker({ quiet: true });
@@ -3478,10 +3891,14 @@ function fill(el, html) {
 function sessionRow(s, withDir) {
   const title = s.title ?? s.firstPrompt ?? s.id;
   const sub = [s.title ? s.firstPrompt : '', withDir ? s.cwd ?? s.project : ''].filter(Boolean).join(' · ');
-  return `<li data-path="${esc(s.path)}" title="${esc(s.path)}">
+  // A session already in a tab: picking it switches to that tab.
+  const tab = tabOfPath(s.path);
+  const mark = tab ? `<span class="pin-tab">${tab === activeTab() ? 'Showing' : 'In a tab'}</span>` : '';
+  const add = tab ? '' : '<button type="button" class="pnew" data-newtab title="Open in a new tab">New tab</button>';
+  return `<li data-path="${esc(s.path)}" title="${esc(s.path)}"${tab ? ' class="intab"' : ''}>
         <span class="dot${s.live ? ' live' : ''}" title="${s.live ? 'Active in the last few minutes' : ''}"></span>
         <div class="pm"><div class="pt">${esc(title)}</div><div class="ps">${esc(sub)}</div></div>
-        <span class="pw">${esc(ago(s.mtime))}</span></li>`;
+        ${mark}<span class="pw">${esc(ago(s.mtime))}</span>${T.tabs.length ? add : ''}</li>`;
 }
 
 /** A directory as a comparable key: forward slashes, no trailing slash, any case on Windows. */
@@ -3530,12 +3947,15 @@ function sessionListHtml(data) {
   );
 }
 
-async function openSession(path) {
+async function openSession(path, newTab = false) {
+  $('#picker').close();
+  // Already in a tab: switch to it.
+  const have = tabOfPath(path);
+  if (have && T.tabs.includes(have)) return showTab(have);
   const res = await fetch('/api/open', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ path }) });
   const data = await res.json();
   if (!res.ok) return alert(data.error ?? 'Could not open the session');
-  $('#picker').close();
-  connect(data.run.id);
+  openRun(data.run.id, { path: data.run.path ?? path, title: data.run.title, newTab: newTab || S.pickNew });
 }
 
 async function loadFile(file) {
@@ -3543,7 +3963,7 @@ async function loadFile(file) {
   const res = await fetch('/api/load', { method: 'POST', headers: { 'content-type': 'application/json' }, body: text });
   const data = await res.json();
   if (!res.ok) return alert(data.error ?? 'Could not load the file');
-  connect(data.run.id);
+  openRun(data.run.id, { title: data.run.title ?? data.run.label, newTab: S.pickNew });
 }
 
 // ───────────────────────────── interaction
@@ -3714,9 +4134,16 @@ $('#pathView').addEventListener(
 
 // ───────────────────────────── theme
 const THEMES = {
-  system: { label: 'System', icon: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="11.5" rx="1.5" /><path d="M9 20h6M12 16v4" /></svg>' },
+  // Light or dark, as the system says: the Light and Dark icons, pushed apart into opposite corners
+  // and cut along a "/" diagonal, the sun above the cut and the moon (flipped, so it faces the
+  // sun) below it.
+  system: {
+    label: 'System',
+    icon: '<svg viewBox="0 0 24 24" aria-hidden="true"><clipPath id="thSun"><path d="M0 0h22.3L0 22.3z" /></clipPath><clipPath id="thMoon"><path d="M24 1.7V24H1.7z" /></clipPath><g clip-path="url(#thSun)"><g transform="translate(-2.26 -2.26) scale(.88)" stroke-width="2.05"><circle cx="12" cy="12" r="3.8" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4" /></g></g><g clip-path="url(#thMoon)"><path transform="translate(5.24 5.24) scale(.88) translate(24 0) scale(-1 1)" stroke-width="2.05" d="M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10z" /></g></svg>',
+  },
   light: { label: 'Light', icon: '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3.8" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4" /></svg>' },
-  dark: { label: 'Dark', icon: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10z" /></svg>' },
+  // The moon faces left, as in the System icon.
+  dark: { label: 'Dark', icon: '<svg viewBox="0 0 24 24" aria-hidden="true"><path transform="translate(24 0) scale(-1 1)" d="M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10z" /></svg>' },
 };
 const THEME_ORDER = ['system', 'light', 'dark'];
 const darkMedia = matchMedia('(prefers-color-scheme: dark)');
@@ -3815,8 +4242,18 @@ document.addEventListener('click', (e) => {
   if (!(t instanceof Element)) return;
   const on = (sel) => t.closest(sel);
   let el;
+  // The running-subagents list closes on a click anywhere else.
+  if (S.gAgOpen && !on('.gx-agpop') && !on('.gx-agents')) {
+    S.gAgOpen = false;
+    schedule();
+  }
   if (on('[data-glive]')) return void glanceMove(0);
   if ((el = on('[data-gspot]'))) return void glanceSpot(el.dataset.gspot);
+  if ((el = on('[data-gpick]'))) return void glancePickAgent(el.dataset.gpick);
+  if (on('.gx-agents')) {
+    S.gAgOpen = !S.gAgOpen;
+    return void schedule();
+  }
   if ((el = on('[data-copy]'))) {
     e.preventDefault();
     return void copyText(el);
@@ -4024,11 +4461,14 @@ document.addEventListener('click', (e) => {
     }
     return renderDetail();
   }
-  if ((el = on('#picker li[data-path]'))) return void openSession(el.dataset.path);
+  if ((el = on('#picker li[data-path]'))) return void openSession(el.dataset.path, !!on('[data-newtab]') || e.ctrlKey || e.metaKey);
   if ((el = on('#picker li[data-run]'))) {
     $('#picker').close();
-    return connect(el.dataset.run);
+    return openRun(el.dataset.run, { title: el.querySelector('.pt')?.textContent, newTab: S.pickNew || e.ctrlKey || e.metaKey });
   }
+  if ((el = on('[data-tabx]'))) return closeTab(T.tabs.find((t) => t.uid === Number(el.dataset.tabx)));
+  if (on('[data-tabadd]')) return void openPicker({ newTab: true });
+  if ((el = on('[data-tab]'))) return showTab(T.tabs.find((t) => t.uid === Number(el.dataset.tab)));
   if (on('[data-picker-retry]')) return void openPicker();
   if ((el = on('[data-pgroup]'))) {
     S.pgOpen ??= new Map();
@@ -4270,6 +4710,18 @@ function updateCompact() {
 }
 $('#pane').addEventListener('scroll', () => requestAnimationFrame(updateCompact), { passive: true });
 $('#sessionsBtn').addEventListener('click', () => openPicker());
+// A middle click closes a tab, or opens a session in a new tab.
+document.addEventListener('auxclick', (e) => {
+  if (e.button !== 1) return;
+  const tab = e.target.closest?.('[data-tab]');
+  const row = e.target.closest?.('#picker li[data-path]');
+  if (!tab && !row) return;
+  e.preventDefault();
+  if (tab) closeTab(T.tabs.find((t) => t.uid === Number(tab.dataset.tab)));
+  else void openSession(row.dataset.path, true);
+});
+// No page scrolling on a middle press over them (the browser's autoscroll).
+document.addEventListener('mousedown', (e) => e.button === 1 && e.target.closest?.('[data-tab], #picker li[data-path]') && e.preventDefault());
 $('#runBox').addEventListener('click', () => openPicker());
 $('#loadInput').addEventListener('change', (e) => {
   const f = e.target.files?.[0];
@@ -4308,11 +4760,15 @@ document.addEventListener('keydown', (e) => {
     e.preventDefault();
     $(S.view === 'path' ? '#pathSearch' : '#actionsSearch').focus();
   } else if (e.key === 'o') openPicker();
+  else if (e.key === '[' || e.key === ']') cycleTab(e.key === '[' ? -1 : 1);
   else if (e.key === 'p' && S.run) togglePin();
   else if (e.key === 'h' && S.run && S.view === 'path') toggleHeat();
   else if ((e.key === '-' || e.key === '=' || e.key === '+' || e.key === '0') && S.run && S.view === 'path' && S.layout === 'simple') zoomFlow(e.key === '-' ? -1 : e.key === '0' ? 0 : 1);
   else if (e.key === 't' && S.run?.usage) toggleTokens();
-  else if (e.key === 'Escape' && !$('#tokensPop').hidden) toggleTokens(false);
+  else if (e.key === 'Escape' && S.gAgOpen) {
+    S.gAgOpen = false;
+    schedule();
+  } else if (e.key === 'Escape' && !$('#tokensPop').hidden) toggleTokens(false);
   else if (e.key === 'Escape' && !$('#wakePop').hidden) toggleWake(false);
   else if (e.key === 'Escape' && !$('#picker').open) {
     S.follow = false;
@@ -4330,10 +4786,32 @@ setInterval(() => S.run && renderHeader(), 15000);
   const m = /run=([\w-]+)/.exec(location.hash);
   const { runs } = await fetch('/api/runs').then((r) => r.json());
   if (location.hash.includes('view=actions')) S.view = 'actions';
+  const kept = loadTabs();
+  let active = null;
+  for (const [i, k] of kept.tabs.entries()) {
+    // Run ids start again from r1 when the server restarts: one counts only if it's the same session.
+    let id = runs.find((r) => r.id === k.runId && (k.path ? samePath(r.path, k.path) : !r.path))?.id ?? null;
+    if (!id && k.path) {
+      try {
+        const res = await fetch('/api/open', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ path: k.path }) });
+        if (res.ok) id = (await res.json()).run.id;
+      } catch {
+        // Gone: the tab is dropped.
+      }
+    }
+    if (!id || tabOf(id)) continue;
+    const t = newTab(id, k);
+    T.tabs.push(t);
+    if (i === kept.active) active = t;
+  }
   const wanted = m && runs.find((r) => r.id === m[1]);
-  if (wanted) connect(wanted.id);
-  else if (runs.length) connect(runs[runs.length - 1].id);
-  else {
+  if (T.tabs.length) {
+    showTab(active ?? T.tabs[0]);
+    tabsChanged();
+  } else if (wanted || runs.length) {
+    const r = wanted ?? runs[runs.length - 1];
+    openRun(r.id, { path: r.path, title: r.title ?? r.label });
+  } else {
     // The server opened nothing (no obvious session for this folder): let the user choose.
     render();
     openPicker();