@vale-dinap/lucidly 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+All notable changes to Lucidly are listed here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and versions follow [Semantic Versioning](https://semver.org/).
+
+## [0.2.0] - 2026-11-05
+
+### Added
+
+- **Zoom for the Simple view**, from 50% to 200%: a stepped slider in the toolbar, Ctrl+scroll over the view, or `-` and `=` (`0`, or a click on the percentage, resets it). Bigger for comfortable reading and high-resolution screens; smaller for an overview of more tasks and longer chains, with step labels hidden below 75% and task titles kept readable. The setting is remembered.
+
+### Fixed
+
+- **Expand all / Collapse all now work with every filter.** Choosing a filter no longer opens all of its tasks: it narrows the list and keeps what is open or closed. The button's label follows what is on screen.
+- **The session list no longer hangs on "Loading…"** when the Lucidly server is slow, stopped or returns an error: it says what happened and offers a Retry.
+
+### Changed
+
+- A slightly larger keep-awake icon.
+- The README starts with a quick start: `npx @vale-dinap/lucidly`.
+
+## [0.1.0] - 2026-11-05
+
+First public release.
+
+[0.2.0]: https://github.com/vale-dinap/lucidly/compare/v0.1.0...v0.2.0
+[0.1.0]: https://github.com/vale-dinap/lucidly/releases/tag/v0.1.0

package/README.md

@@ -4,6 +4,16 @@
 
 *See what your AI agent is doing, at a glance.*
 
+## Quick start
+
+From a project folder where you use Claude Code (Node.js 22.18 or newer):
+
+```sh
+npx @vale-dinap/lucidly
+```
+
+It opens that folder's latest session in your browser and follows it live while you keep working. To keep the `lucidly` command around, install it: see [Getting started](#getting-started).
+
 ## Purpose
 
 AI agents are increasingly capable of working on long, multi-step tasks on their own. While they work, most of them report their progress as a continuous stream of text: plans, tool calls, file reads, command outputs, reasoning, errors and retries. That stream is complete, but it is hard to follow. To find out what the agent is doing right now, what it has already finished, or where it got stuck, the user has to read through a fast-moving wall of text and often scroll back through a long history to find the relevant part.
@@ -52,8 +62,6 @@ Requires Node.js 22.18 or newer. Install the `lucidly` command from npm:
 npm install -g @vale-dinap/lucidly
 ```
 
-or try it without installing: `npx @vale-dinap/lucidly`.
-
 To run it from a clone instead (Node runs the TypeScript sources directly, no build needed):
 
 ```sh
@@ -82,7 +90,7 @@ In the browser:
 - The **token meter** in the top bar is always visible: input and output tokens so far, the main agent's current context size, and the live rate per minute. Click it (or press `T`) for the breakdown: fresh input, cache writes and reads, output, a table per model, and tokens per minute over the last hour. Counts come from the transcripts, subagents included.
 - The **overview** counts tasks, steps, actions and *failed* actions (with how many failures were recovered), and draws the whole run as a strip of thin bars, one per action, in time order. File edits are amber and a little taller, with a pointed top when zoomed in enough to see it (*file edit* in the legend). Shell commands are green, and reads, searches and the rest are short teal bars. Violet marks a subagent's launch. Blue is running, pale red is a failure that was recovered, and solid red is one that is still failed. While the agent is working, the overview card and the current task's card glow softly, and a pulsing blue mark holds the live end of the strip. The current task's steps that haven't started yet follow in grey. Click a bar to jump to that action. Subagents get their own track under the main one, like layers in a video editor. Each subagent is one box from its launch to its last action, on the same time-ordered axis, so you can see what ran in parallel with what. Overlapping subagents stack on separate rows (up to four for the part in view; a busier burst shares the last row and shows a *+N* count), a running one pulses with a dashed border, and one with failures has a red border. The main track leaves gaps where only subagents were working. Zoom in to widen the boxes and read their names. Select a subagent (its violet bar on the strip, its tile in the path, or anything it did) and its own **timeline** opens below the strip, showing its model, actions, duration, tokens and failures, with one bar per action. Its span is marked on the main strip. Click a bar to open that action. The timeline closes as soon as you select something outside the subagent, or with ×, which goes back to the step that called it. On long runs, zoom the strip like a video editor's timeline: scroll over it to zoom around the cursor (Shift+scroll pans), or use the navigator below it, a mini map of the whole run, where you drag the window to pan, drag its edges to zoom, click to jump, and double-click to fit. The `−` `+` *Fit* buttons do the same.
 - A failure counts as **recovered** when a later action in the same step or subtask, or in a fix nested inside it, succeeds. Otherwise it counts as **failed**: the agent moved on or the session ended without getting past it. This is a heuristic based on the order of actions, not on what the error was.
-- **Simple** (the default view) keeps only the essentials. Tasks sit on a vertical line, oldest at the top, each a round node with its status (done, running, interrupted) and one line of facts. A Q&A exchange is a small speech-bubble node with the start of the answer. Click a task to unfold its steps to the right as a chain, from your request to the goal. Each step is a node whose shape says what it mostly did: a pointed tile for file edits, a rounded rectangle for commands, a circle for reads and searches, a hexagon for subagents, a speech bubble for a question to you. Its colour matches the timeline once done; the running step glows blue, a failed one is red, steps not started yet are dashed. Only the running task is open by default, and it folds closed when the next one starts. A long chain scrolls sideways with the request pinned on the left, and follows the running step by itself until you scroll it yourself (scroll back to the end to resume). New nodes pop in and finished steps flash once. Click any node for its details on the right; a selected step also opens in place into a capsule of small marks, one per action in the timeline's colours (failed red, recovered ringed, running blue), up to 12 and then *+N*. Hover a mark for what it did, click it to open that action. It folds back when you select something else. Search dims what doesn't match, and *Hide Q&A* hides the questions answered without any work, as in the detailed view.
+- **Simple** (the default view) keeps only the essentials. Tasks sit on a vertical line, oldest at the top, each a round node with its status (done, running, interrupted) and one line of facts. A Q&A exchange is a small speech-bubble node with the start of the answer. Click a task to unfold its steps to the right as a chain, from your request to the goal. Each step is a node whose shape says what it mostly did: a pointed tile for file edits, a rounded rectangle for commands, a circle for reads and searches, a hexagon for subagents, a speech bubble for a question to you. Its colour matches the timeline once done; the running step glows blue, a failed one is red, steps not started yet are dashed. Only the running task is open by default, and it folds closed when the next one starts. A long chain scrolls sideways with the request pinned on the left, and follows the running step by itself until you scroll it yourself (scroll back to the end to resume). New nodes pop in and finished steps flash once. Click any node for its details on the right; a selected step also opens in place into a capsule of small marks, one per action in the timeline's colours (failed red, recovered ringed, running blue), up to 12 and then *+N*. Hover a mark for what it did, click it to open that action. It folds back when you select something else. The **zoom** slider in the toolbar (also Ctrl+scroll over the view, or `-` and `=`; click the percentage or press `0` to reset) scales this view from 50% to 200%: bigger for comfortable reading or a high-resolution screen, smaller for an overview of more tasks and longer chains at once (below 75% step labels are hidden; hover a node for its name). Search dims what doesn't match, and *Hide Q&A* hides the questions answered without any work, as in the detailed view.
 - **Detailed** lists each task as a card with a progress bar (one segment per step). Steps are expandable: folded, a step is one line with its flags (errors, subtasks, subagents, *Blocked*); open, it shows the models that worked on it and their tokens, the files and commands involved, its subtasks and blockers, and its latest actions. Subagents show their model too (for example *Haiku 5.5*). Each task ends at its goal while in progress, and at its result once done. The current step opens by itself. Filter by *Failed* (failures nothing has succeeded after yet, and open blockers), *Recovered* (trouble along the way that got fixed, flagged ↺) or *Subagents*, hide Q&A exchanges, search steps, files and commands (`/`), or *Expand all* (`E`).
 - Click any item to see **its own output** on the right. Narration reads as formatted text (markdown: headings, tables, nested and task lists, quotes, links, and code blocks with highlighting), and every action is a row you can expand to see its input and result. File edits show as a diff, like on GitHub: hunks with old and new line numbers, context lines, and the changed words highlighted. Shell commands are syntax-highlighted, including Python run inline (`python -c`, `python - <<EOF`), as are Python and shell files in diffs and writes.
 - **Files** (a view of its own, next to *Simple* and *Detailed*) lists every file the agent changed, with the number of edits, lines removed and added, when it was last touched, and a sparkline of where in the run its edits happened. Sort by recency, by number of edits, or by path. Open a file for its history, oldest edit first, with the task and step behind each change. Click an edit for its diff in the side panel, or use *Show all diffs* to read the whole history inline. Files outside the project (scratch files, notes) are folded away at the bottom. Switch from *By file* to *History* for every edit in time order, oldest first, so the same file appears once per change. Dividers show the task each group of edits belonged to, and *Show all diffs* reads the whole history inline. Only changes made through the agent's edit and write tools are listed: files changed by shell commands (`sed -i`, scripts, redirections) are not.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vale-dinap/lucidly",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "See what your AI agent is doing, at a glance.",
   "keywords": [
     "claude",
@@ -46,6 +46,7 @@
     "bin/",
     "dist/",
     "web/",
-    "NOTICE"
+    "NOTICE",
+    "CHANGELOG.md"
   ]
 }

package/web/app.js

@@ -40,13 +40,17 @@ const S = {
   pinOv: localStorage.getItem('lucidly.pinOverview') !== '0', // pinned unless you unpinned it
   // Token heat: a green-to-red glow around tasks and steps by how many tokens they used.
   heat: localStorage.getItem('lucidly.heat') === '1',
+  // Zoom of the simple view (1 = normal), one of FLOW_ZOOMS.
+  fz: Number(localStorage.getItem('lucidly.flowZoom')) || 1,
   // path view
   openGoals: new Set(),
   closedGoals: new Set(),
   openSteps: new Set(),
   closedSteps: new Set(),
   allActs: new Set(), // units whose full action list is shown
-  expandAll: false,
+  // Expand all / collapse all: true or false once you chose, null until then (the running task
+  // open, and search hits). It wins over the automatic opening; a filter opens nothing by itself.
+  expandAll: null,
   pf: { mode: 'all', hideChat: false, q: '' },
   // File edits view: sort order, files opened, files showing their diffs inline.
   ff: { sort: 'recent', open: new Set(), diffs: new Set(), outside: false, layout: 'files', histDiffs: false },
@@ -447,14 +451,15 @@ function stepMatches(s, q) {
 function isGoalOpen(g) {
   if (S.openGoals.has(g.id)) return true;
   if (S.closedGoals.has(g.id)) return false;
-  if (S.expandAll || filtering()) return true;
+  if (S.expandAll !== null) return S.expandAll;
+  if (pathQuery()) return true; // only the matching tasks are listed: show where they match
   return g.id === S.run.currentGoal || S.run.goals.length === 1;
 }
 
 function isStepOpen(s) {
   if (S.openSteps.has(s.id)) return true;
   if (S.closedSteps.has(s.id)) return false;
-  if (S.expandAll) return true;
+  if (S.expandAll !== null) return S.expandAll;
   const q = pathQuery();
   if (q && !s.title.toLowerCase().includes(q) && stepText(s).includes(q)) return true; // the match is inside
   return s.status === 'active' && s.id === S.run.currentStep;
@@ -1265,8 +1270,8 @@ function stepState(s) {
 function flowOpen(g, q, hit) {
   if (S.openGoals.has(g.id)) return true;
   if (S.closedGoals.has(g.id)) return false;
-  if (S.expandAll) return true;
-  if (q || (S.pf.mode !== 'all' && S.pf.mode !== 'qa')) return hit;
+  if (S.expandAll !== null) return S.expandAll;
+  if (q) return hit;
   return g.id === S.run.currentGoal || S.run.goals.length === 1;
 }
 
@@ -1543,6 +1548,14 @@ function setExpandBtn(collapse) {
   b.textContent = collapse ? 'Collapse all' : 'Expand all';
 }
 
+/** The button's label from the tasks as rendered: Collapse all once every listed one is open. */
+function syncExpandBtn(view, simple) {
+  const rows = [...view.querySelectorAll(simple ? '.fg:not(.qa)' : ':scope > .task')];
+  const collapse = rows.length > 0 && rows.every((el) => el.classList.contains('open'));
+  $('#expandAll').dataset.collapse = collapse ? '1' : '';
+  setExpandBtn(collapse);
+}
+
 const MODE_LABEL = { all: 'All', open: 'Failed', recovered: 'Recovered', agents: 'Subagents', qa: 'Questions' };
 
 /** The filters as chips, plus the same as a menu for when the toolbar is too narrow for chips. */
@@ -1614,7 +1627,8 @@ function renderPath() {
     : nQA
       ? `${S.pf.hideChat ? 'Hiding' : 'Hide'} ${plural(nQA, 'question')} answered without any work`
       : 'No questions answered without work in this run yet: nothing to hide for now';
-  setExpandBtn(files ? S.ff.open.size > 0 : S.expandAll);
+  if (files) setExpandBtn(S.ff.open.size > 0);
+  applyFlowZoom();
   const hb = $('#heatBtn');
   hb.hidden = files;
   hb.classList.toggle('on', S.heat);
@@ -1638,6 +1652,7 @@ function renderPath() {
       mode === 'qa' ? isQA(g) : mode === 'all' ? !(S.pf.hideChat && isQA(g)) : kids(g).some((s) => s.type === 'step' && stepMatches(s, '')),
     );
     renderFlow(view, shown, q);
+    syncExpandBtn(view, true);
     return;
   }
   if (view.__flow) {
@@ -1653,6 +1668,7 @@ function renderPath() {
       ? '<div class="no-match">Nothing matches these filters.</div>'
       : '<div class="no-match">The run is open. Progress appears as soon as the agent does something.</div>'),
   );
+  syncExpandBtn(view, false);
 }
 
 /** Tokens per minute over the last hour, as a tiny bar chart. */
@@ -2525,7 +2541,7 @@ function render() {
 function connect(runId) {
   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: false, firstPaint: true, seenActs: null });
+  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 } });
   writeHash();
@@ -2580,10 +2596,25 @@ async function openPicker() {
   for (const b of dlg.querySelectorAll('[data-scope]')) b.classList.toggle('on', b.dataset.scope === S.pickerScope);
   const list = $('#pickerList');
   list.innerHTML = '<li class="mute">Loading…</li>';
-  const [{ runs }, data] = await Promise.all([
-    fetch('/api/runs').then((r) => r.json()),
-    fetch(`/api/sessions?scope=${S.pickerScope}`).then((r) => r.json()),
-  ]);
+  // Only the latest request may fill the list (switching tabs while one is slow), and a failure
+  // says so with a retry instead of leaving "Loading…" up for good.
+  const ticket = (S.pickerTicket = (S.pickerTicket ?? 0) + 1);
+  const get = async (url) => {
+    const r = await fetch(url, { signal: AbortSignal.timeout(20000) });
+    if (!r.ok) throw new Error(`the server answered ${r.status}`);
+    return r.json();
+  };
+  let runs, data;
+  try {
+    [{ runs }, data] = await Promise.all([get('/api/runs'), get(`/api/sessions?scope=${S.pickerScope}`)]);
+    if (!Array.isArray(runs) || !Array.isArray(data?.sessions)) throw new Error('unexpected reply from the server');
+  } catch (e) {
+    if (ticket !== S.pickerTicket) return;
+    const why = e?.name === 'TimeoutError' ? 'the server took too long to answer' : e instanceof TypeError ? 'the Lucidly server is not reachable (is it still running?)' : (e?.message ?? String(e));
+    list.innerHTML = `<li class="mute perr">Couldn't load the sessions: ${esc(why)}. <button type="button" class="tbtn" data-picker-retry>Retry</button></li>`;
+    return;
+  }
+  if (ticket !== S.pickerTicket) return;
   const others = runs.filter((r) => !r.key.startsWith('claude:'));
   $('#pickerOpen').innerHTML = others.length
     ? `<div class="psec">Open in Lucidly</div><ul class="plist">${others
@@ -2729,6 +2760,65 @@ function toggleTokens(show = $('#tokensPop').hidden) {
   renderTokens();
 }
 
+// ───────────────────────────── simple view zoom
+/** The zoom steps of the simple view: half to twice the normal size. */
+const FLOW_ZOOMS = [0.5, 0.67, 0.8, 1, 1.25, 1.5, 2];
+
+/**
+ * Zooms the simple view by a step (+1 / -1), or back to normal (0). It scales the layout itself
+ * (CSS zoom), so text stays sharp and the chains keep scrolling; the spot in the middle of the
+ * pane stays put while everything grows or shrinks around it.
+ */
+function zoomFlow(dir) {
+  const i = FLOW_ZOOMS.indexOf(S.fz);
+  setFlowZoom(dir === 0 ? 1 : FLOW_ZOOMS[Math.max(0, Math.min(FLOW_ZOOMS.length - 1, (i < 0 ? 3 : i) + dir))]);
+}
+
+function setFlowZoom(next) {
+  if (!next || next === S.fz) return;
+  const pane = $('#pane');
+  const view = $('#pathView');
+  const top = view.offsetTop;
+  const mid = pane.scrollTop + pane.clientHeight / 2 - top;
+  const ratio = next / S.fz;
+  S.fz = next;
+  localStorage.setItem('lucidly.flowZoom', String(next));
+  applyFlowZoom();
+  if (mid > 0) pane.scrollTop = top + mid * ratio - pane.clientHeight / 2;
+}
+
+function applyFlowZoom() {
+  const simple = S.layout === 'simple' && S.view === 'path';
+  const view = $('#pathView');
+  view.style.zoom = simple && S.fz !== 1 ? String(S.fz) : '';
+  view.style.setProperty('--fz', String(simple ? S.fz : 1));
+  view.classList.toggle('fz-small', simple && S.fz < 0.75);
+  const box = $('#flowZoom');
+  box.hidden = !simple;
+  const range = $('#flowZoomRange');
+  range.value = String(Math.max(0, FLOW_ZOOMS.indexOf(S.fz)));
+  range.setAttribute('aria-valuetext', `${Math.round(S.fz * 100)}%`);
+  const v = box.querySelector('[data-fz="0"]');
+  v.textContent = `${Math.round(S.fz * 100)}%`;
+  v.title = S.fz === 1 ? 'Zoom of the simple view (Ctrl+scroll, - and =)' : 'Back to 100% (0)';
+}
+
+$('#flowZoomRange').addEventListener('input', (e) => setFlowZoom(FLOW_ZOOMS[Number(e.target.value)]));
+
+// Ctrl+scroll over the simple view zooms it (one step per notch), instead of the whole page.
+let wheelAt = 0;
+$('#pathView').addEventListener(
+  'wheel',
+  (e) => {
+    if (!e.ctrlKey || S.layout !== 'simple' || S.view !== 'path') return;
+    e.preventDefault();
+    if (Date.now() - wheelAt < 140) return;
+    wheelAt = Date.now();
+    zoomFlow(e.deltaY < 0 ? 1 : -1);
+  },
+  { passive: false },
+);
+
 function toggleHeat() {
   S.heat = !S.heat;
   localStorage.setItem('lucidly.heat', S.heat ? '1' : '0');
@@ -2796,6 +2886,7 @@ document.addEventListener('click', (e) => {
   if ((el = on('[data-view]'))) return setView(el.dataset.view);
   if (on('[data-pin]')) return togglePin();
   if (on('#heatBtn')) return toggleHeat();
+  if ((el = on('[data-fz]'))) return zoomFlow(Number(el.dataset.fz));
   if (on('[data-fsel]')) {
     S.fselOpen = !S.fselOpen;
     return schedule();
@@ -2943,7 +3034,8 @@ document.addEventListener('click', (e) => {
       else for (const f of fileEdits()) S.ff.open.add(f.key);
       return schedule();
     }
-    S.expandAll = !S.expandAll;
+    // The button says what it will do, from what is on screen: collapse if every listed task is open.
+    S.expandAll = $('#expandAll').dataset.collapse !== '1';
     for (const set of [S.openGoals, S.closedGoals, S.openSteps, S.closedSteps]) set.clear();
     return schedule();
   }
@@ -2975,6 +3067,7 @@ document.addEventListener('click', (e) => {
     $('#picker').close();
     return connect(el.dataset.run);
   }
+  if (on('[data-picker-retry]')) return void openPicker();
   if ((el = on('[data-scope]'))) {
     S.pickerScope = el.dataset.scope;
     return void openPicker();
@@ -3226,6 +3319,7 @@ document.addEventListener('keydown', (e) => {
   } else if (e.key === 'o') openPicker();
   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' && !$('#wakePop').hidden) toggleWake(false);

package/web/index.html

@@ -53,6 +53,7 @@
             <svg viewBox="0 0 24 24"><path d="M11 4a7 7 0 1 0 0 14a7 7 0 1 0 0-14zM20 20l-4-4" /></svg>
             <input type="search" id="pathSearch" placeholder="Search steps, files, commands" autocomplete="off" />
           </div>
+          <div class="zoomer" id="flowZoom" role="group" aria-label="Zoom" hidden><input type="range" id="flowZoomRange" min="0" max="6" step="1" value="3" aria-label="Zoom" title="Zoom: 50% to 200% (Ctrl+scroll, - and =)" /><button type="button" data-fz="0" class="zv">100%</button></div>
           <button class="ibtn heat-btn" id="heatBtn" aria-pressed="false" aria-label="Token heat" title="Token heat (H)"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3c.5 3.2 4.5 5.2 4.5 10a4.5 4.5 0 0 1-9 0c0-2 .9-3.4 2-4.5.2 1.6 1 2.6 2 3 .3-3.3-.8-5.8.5-8.5z" /></svg></button>
           <button class="tbtn" id="expandAll" title="Expand all (E)">Expand all</button>
         </div>

package/web/style.css

@@ -822,7 +822,7 @@ pre .dh { color: var(--faint); font-weight: 600; }
 /* ───────── keep awake */
 .wake-wrap { position: relative; margin-left: 4px; }
 .wake { color: var(--faint); }
-.wake svg { width: 17px; height: 17px; }
+.wake svg { width: 20px; height: 20px; stroke-width: 1.7; }
 .wake .steam { opacity: 0; transition: opacity 0.3s; }
 .wake[data-wake='awake'] { color: var(--accent); }
 .wake[data-wake='awake'] .steam { opacity: 1; animation: steam 2.4s ease-in-out infinite; }
@@ -948,3 +948,26 @@ pre .dh { color: var(--faint); font-weight: 600; }
 .fm-more { height: 18px; padding: 0 5px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 10.5px; font-weight: 600; cursor: pointer; }
 .fm-more:hover { background: var(--hover); color: var(--text); }
 .fcap.dim { opacity: 0.32; }
+.perr { line-height: 1.6; } .perr .tbtn { margin-left: 6px; }
+
+/* ───────── simple view zoom (CSS zoom on #pathView: --fz is its factor) */
+.zoomer { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 2px 0 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
+.zoomer .zv { min-width: 42px; height: 24px; padding: 0 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
+.zoomer .zv:hover { background: var(--hover); color: var(--text); }
+/* a mini stepped slider: 84px wide, so its 7 stops (12px thumb) fall every 12px, with a tick at each */
+#flowZoomRange { -webkit-appearance: none; appearance: none; width: 84px; height: 14px; margin: 0; background: none; cursor: pointer; }
+#flowZoomRange::-webkit-slider-runnable-track { height: 14px; background: radial-gradient(circle, var(--border-strong) 1.6px, transparent 2px) 0 50% / 12px 100% repeat-x, linear-gradient(var(--border-strong), var(--border-strong)) 6px 50% / 72px 2px no-repeat; }
+#flowZoomRange::-moz-range-track { height: 14px; background: radial-gradient(circle, var(--border-strong) 1.6px, transparent 2px) 0 50% / 12px 100% repeat-x, linear-gradient(var(--border-strong), var(--border-strong)) 6px 50% / 72px 2px no-repeat; }
+#flowZoomRange::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: 1px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); transition: transform 0.12s; }
+#flowZoomRange::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); }
+#flowZoomRange:hover::-webkit-slider-thumb, #flowZoomRange:active::-webkit-slider-thumb { transform: scale(1.2); }
+#flowZoomRange:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
+/* zoomed out, text keeps a readable floor on screen (about 11px titles, 10px facts) */
+#pathView .fg-title { font-size: max(14px, calc(11px / var(--fz, 1))); }
+#pathView .fg.qa .fg-title { font-size: max(13px, calc(10.5px / var(--fz, 1))); }
+#pathView .fg-meta { font-size: max(12px, calc(10px / var(--fz, 1))); }
+/* and step labels go: below 75% they would be too small to read (hover shows them) */
+#pathView.fz-small .fn-l { display: none; }
+#pathView.fz-small .fn { gap: 0; }
+/* the column keeps its width on screen at any zoom (zoom multiplies CSS pixels, so divide them) */
+#pathView { max-width: calc(940px / var(--fz, 1)); padding: calc(4px / var(--fz, 1)) calc(20px / var(--fz, 1)) calc(120px / var(--fz, 1)); }