retake-dev 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -0,0 +1,50 @@
+# Changelog
+
+## 0.5.0
+
+- The dock is open on a first visit, and folds away: drag its divider down (or
+  press ⌥T) and the timeline becomes a round button, bottom-right at first. The
+  dock follows the pointer all the way down; let go near the bottom and it eases
+  into the button, let go higher and it springs back to its minimum height. The
+  app gets the whole window and recording carries on. The button (Enter/Space
+  too) brings the dock back at its default height. Remembered across reloads.
+- Drag the button anywhere (mouse or finger): it eases to the nearer side edge,
+  stays on screen through a resize, and keeps its spot across reloads. A press
+  that barely moves is still a click.
+- A new mark on the button (a playhead on a track with an arc back to it), with
+  a dot for the phase: green live, blue playing, amber paused. `markSvg()`
+  (exported from `retake-dev`) returns it as an SVG string.
+- Timelines are named "Timeline 1", "Timeline 2"... (they were "Main", "Take 2"...).
+  Sessions saved with the old default names show the new ones (in the dock and
+  through `retake mcp`); names you gave them stay. A new timeline says so:
+  "Timeline 2 started".
+- Note pins show on the app only while paused; live or playing, only the count shows.
+- Phones and touch screens: the dock's top row fits at 360px (Start fresh shrinks
+  to its icon), its controls are 40px, and the divider takes a finger drag (to
+  resize or fold). Before, a touch drag on it left the app ignoring taps.
+- ⌥T typed in a note or a timeline's name no longer folds the dock.
+- The app can leave room for the dock: in its frame, `window.__retakeDockHeight`
+  is the height the dock covers (0 when folded), and a `retake:dock` event says
+  when it changes.
+- `shellHtml({ server: false })` for a dock with no Retake server behind it: it
+  never requests `/__retake/` (no session 404 in the console).
+- Leaving the page while recording (a new address typed in) no longer loses the
+  seconds since the last save: they're kept in the tab's sessionStorage and the
+  timeline carries on from them.
+
+## 0.4.0
+
+First release.
+
+- A timeline docked over your dev server's app, recording from page load: inputs,
+  a virtual clock (timers, rAF, `Date`, CSS and Web Animations), seeded randomness,
+  and server traffic (`fetch`, XHR, `EventSource`, `WebSocket`).
+- Drag back and the app is at that moment: a live preview at once, the real
+  moment rebuilt behind it and swapped in.
+- Ctrl-click (or +) to start a new take from any moment; the old one stays a lane.
+- Notes on elements at a moment, with component, source file:line and CSS;
+  "Copy for agent", and an MCP server (`retake mcp`) for coding agents.
+- Vite plugin (`retake()`), and a front server for Next.js, React Router, Remix,
+  Astro, SvelteKit, Nuxt or any dev server that serves HTML (`retake .`,
+  `retake -- <cmd>`, `retake http://…`).
+- `--code-branches`: each timeline keeps its own version of the code (Vite apps).

package/README.md

@@ -1,7 +1,7 @@
 # Retake
 
 A time machine for your dev server: Vite apps, Next.js, React Router and other
-frameworks. A timeline docks over the bottom of your app and records everything from page load. Drag it back and the app is at that
+frameworks. A timeline docks over the bottom of your app and records from page load. Drag it back and the app is at that
 moment. Ctrl-click the timeline to start a new take from there; the old one
 stays as a lane you can click back into. Dev only: nothing ships in builds.
 
@@ -81,6 +81,17 @@ Acknowledging and resolving show up on the note in the dock right away.
    the element, its React component, source file:line and CSS; or let your
    agent pick it up over MCP.
 
+### The dock
+- **Keys**: space or ⌥P plays and pauses, ←/→ step, F fits everything, + starts
+  a new timeline at the playhead, M drops a bookmark, ⌥T folds the dock away.
+- **Resize** by dragging the divider at its top. Drag it all the way down and
+  the timeline folds into a round button (bottom-right at first): the whole
+  window is the app's, and recording carries on. Drag the button anywhere; it
+  keeps to the nearer side edge. Click it (or ⌥T) to bring the dock back.
+  Folded or not, and where the button sits, are remembered across reloads.
+- **Notes show when paused.** While the app is live or playing, note pins stay
+  off it (the count on the notes icon stays). Pause and the notes come back.
+
 ### Uninstall
 ```sh
 npm uninstall retake-dev          # or pnpm remove / yarn remove / bun remove
@@ -136,9 +147,9 @@ the package manager its lockfile names):
 
 Tested means: the app hydrates in the dock with no warning, and recording, scrubbing back, the rebuilt moment, Play, hot
 updates and reloads all work, started either way (`retake .` or `retake http://localhost:…`). The untested ones go
-through the same front server and should work; say so if one doesn't.
+through the same front server and should work; open an issue if one doesn't.
 
-- **Which port?** Retake sets `PORT` to a free port for the dev command (or keeps
+- **Ports.** Retake sets `PORT` to a free port for the dev command (or keeps
   yours), and otherwise uses the first `http://localhost:…` the command prints, so
   tools that ignore `PORT` work too. Ctrl-C stops the dev server with it.
 - **The plugin in a Vite-based framework.** With `retake()` in `vite.config` and
@@ -160,9 +171,10 @@ through the same front server and should work; say so if one doesn't.
   is left out of the recording, and a rebuilt moment gets the page's HTML as it
   was recorded (kept in `.retake/docs/`), not rendered again. Native `import()`
   (Vite's lazy routes, Astro islands) can't be held to its moment.
-- **Bottom of the app hidden by the dock?** The dock floats over the bottom of
+- **The dock covers the bottom of the app.** It floats over the bottom of
   the app (a cookie banner's buttons, Next's dev badge). Drag the dock's divider
-  down, or open the app with `?retake=0`.
+  down (all the way down folds it into a button in the corner, as does ⌥T), or
+  open the app with `?retake=0`.
 - **Not rewound.** Retake rewinds the browser, not your server: database writes,
   server sessions and server-action side effects stay as they are (replays answer
   from the recording). Service workers are off while Retake is in front, and
@@ -173,6 +185,23 @@ you're on takes the new code; the others keep theirs. Stepping into a timeline
 checks its code out on disk (snapshots are kept in `.retake/`, and the newest
 code is put back when the server stops), but use it on prototypes, not shared repos.
 
+## The dock without a Retake server
+
+`shellHtml(options)` (exported from `retake-dev`) returns the dock page, for a
+host that serves it itself, such as a deployed demo. With no Retake server
+behind it, pass `server: false`: the dock then never requests `/__retake/` (no
+session fetch, so no 404 in the console) and keeps timelines and notes in memory
+for the page.
+
+```js
+import { shellHtml } from "retake-dev"
+const html = shellHtml({ marker: "header", server: false })
+```
+
+`markSvg()` returns Retake's mark (the folded button's icon) as an SVG string:
+a 24×24 viewBox, the arc and the played part in `currentColor`, the rest white,
+for a dark background.
+
 ## How going back works
 
 It doesn't snapshot the DOM. It records every input (pointer, keys, typing,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "retake-dev",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Retake: a time machine for your dev server (Vite, Next.js, React Router, Remix, Astro, SvelteKit, Nuxt). Drag back on a timeline and your app is at that moment; branch a new take from there.",
   "homepage": "https://retake-omega.vercel.app",
   "repository": {
@@ -33,6 +33,7 @@
     "!src/shell/mock",
     "types",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "engines": {

package/src/core.js

@@ -39,6 +39,11 @@ export function runtimeSource(rt = {}) {
   return `;(function () {\n"use strict";\nif (window.__retake) return;\nconst RT = Object.freeze(${config});\n${body}\n})();`
 }
 
+// Retake's mark (src/mark.svg): a playhead on a track with an arc back to it.
+// 24×24, the arc and the played part in `currentColor`, the rest white. The
+// dock's folded button uses it; so can a favicon (on a dark tile).
+export const markSvg = () => read("mark.svg").trim()
+
 /** @param {import("../types/index.js").ShellOptions} [options] */
 export function shellHtml(options = {}) {
   const config = {
@@ -48,12 +53,16 @@ export function shellHtml(options = {}) {
     ...(options.marker && options.marker !== "url" ? { marker: options.marker } : {}),
     // Behind the front server: rebuilds ask for the page as it was recorded (F56).
     ...(options.docs ? { docs: true } : {}),
+    // No Retake server behind it (a static or serverless deploy): the dock
+    // never asks /__retake/ for anything and keeps the session in memory.
+    ...(options.server === false ? { server: false } : {}),
   }
   return read("shell", "shell.html")
     .replace(
       "/*CONFIG*/",
       () => `window.__retakeConfig = ${JSON.stringify(config)};` + (options.token ? `window.__RETAKE_TOKEN = ${JSON.stringify(options.token)};` : ""),
     )
+    .replace("<!--MARK-->", () => markSvg().replace("<svg ", '<svg width="22" height="22" aria-hidden="true" '))
     .replace("/*CSS*/", () => read("shell", "shell.css"))
     .replace("/*JS*/", () => {
       const files = setFiles("shell")

package/src/mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17h18" stroke="#fff" stroke-opacity=".28" stroke-width="2"/><path d="M3 17h7" stroke="currentColor" stroke-width="2"/><path d="M19 14c0-5.5-9-7.5-9-1" stroke="currentColor" stroke-width="1.8"/><path d="M7.6 10.9 10 13.3l2.4-2.4" stroke="currentColor" stroke-width="1.8"/><circle cx="10" cy="17" r="2.6" fill="#fff"/></svg>

package/src/plugin.js

@@ -12,7 +12,7 @@ import { createBus, sessionApi } from "./server/api.js"
 import { frontRuntime } from "./server/detect.js"
 
 // The site's deployed build (apps/site/app/retake-dock, retake-runtime) and the tests import these from here.
-export { runtimeSource, shellHtml, runtimeTag, injectHtml } from "./core.js"
+export { runtimeSource, shellHtml, runtimeTag, injectHtml, markSvg } from "./core.js"
 
 const NESTED_DEST = new Set(["iframe", "frame", "embed", "object"])
 const pageKind = new AsyncLocalStorage()

package/src/runtime/70-boot.js

@@ -112,7 +112,7 @@ function record() {
 }
 
 Object.assign(PT, {
-  version: "0.4.0",
+  version: "0.5.0",
   now: () => clock.now,
   record,
   // Play from here: replays the recorded future, then carries on live.
@@ -363,6 +363,25 @@ try {
   }
 } catch {}
 
+// A link or redirect to another site (GitHub, npm, a sign-in page) can't load
+// inside the dock's frame: most sites refuse to be framed. A click the user
+// makes opens it in a new tab, so the timeline stays; anything else (a
+// redirect) goes to the top window, as it would without Retake. Frames being
+// built or replayed never leave.
+try {
+  if (W.navigation && shell) {
+    W.navigation.addEventListener("navigate", (e) => {
+      if (!e.cancelable || e.downloadRequest || !e.destination) return
+      const url = new URL(e.destination.url)
+      if (url.origin === location.origin || !/^https?:$/.test(url.protocol)) return
+      e.preventDefault()
+      if (clock.seeking || !onShow()) return
+      if (e.userInitiated) W.open(url.href, "_blank", "noopener")
+      else W.top.location.assign(url.href)
+    })
+  }
+} catch {}
+
 // A reload (or navigation) fires beforeunload first; a frame the dock removes
 // doesn't. Only a reload leaves its recording on the shell to resume.
 let unloading = false

package/src/server/mcp.js

@@ -106,6 +106,14 @@ const fmt = (ms) => {
   return `${String(Math.floor(s / 60)).padStart(2, "0")}:${(s % 60).toFixed(2).padStart(5, "0")}`
 }
 
+// Older sessions named timelines "Main" and "Take N"; the dock now shows
+// those defaults as "Timeline N" (migratedName in shell/10-dock.js).
+function withNames(session) {
+  if (!session || !Array.isArray(session.branches)) return session
+  const old = (b) => (String(b.id) === "1" ? "Main" : `Take ${b.id}`)
+  return { ...session, branches: session.branches.map((b) => (b.name === old(b) ? { ...b, name: `Timeline ${b.id}` } : b)) }
+}
+
 function summary(n, session) {
   const b = (session.branches || []).find((x) => String(x.id) === String(n.branchId))
   return {
@@ -197,6 +205,7 @@ const TOOLS = [
 const isOpen = (n) => !n.status || n.status === "pending" || n.status === "acknowledged"
 
 export function createTools(client) {
+  const readSession = async () => withNames(await client.session())
   const byId = async (id) => {
     const note = await client.note(id).catch((err) => {
       if (/→ 404/.test(err.message)) throw new Error(`no note with id ${id}; list_notes shows the ids`)
@@ -206,16 +215,16 @@ export function createTools(client) {
   }
   const handlers = {
     async list_notes({ status = "open" } = {}) {
-      const session = await client.session()
+      const session = await readSession()
       const notes = (session.notes || []).filter((n) => (status === "all" ? true : status === "open" ? isOpen(n) : (n.status || "pending") === status))
       return { count: notes.length, notes: notes.map((n) => summary(n, session)) }
     },
     async get_note({ id }) {
-      const [session, note] = await Promise.all([client.session(), byId(id)])
+      const [session, note] = await Promise.all([readSession(), byId(id)])
       return describe(note, session)
     },
     async get_active_timeline() {
-      const session = await client.session()
+      const session = await readSession()
       const branches = session.branches || []
       const active = branches.find((b) => String(b.id) === String(session.activeId)) || null
       const parent = active && branches.find((b) => String(b.id) === String(active.parentId))
@@ -245,12 +254,12 @@ export function createTools(client) {
     async watch_notes({ timeout_seconds = 60 } = {}) {
       const ms = Math.min(Math.max(Number(timeout_seconds) || 60, 1), 600) * 1000
       const key = (n) => `${n.status || "pending"}|${(n.replies || []).filter((r) => r.from === "user").length}|${n.text}`
-      const before = new Map(((await client.session()).notes || []).map((n) => [String(n.id), key(n)]))
+      const before = new Map(((await readSession()).notes || []).map((n) => [String(n.id), key(n)]))
       const deadline = Date.now() + ms
       while (Date.now() < deadline) {
         const got = await client.nextEvent(["session", "note-updated"], deadline - Date.now())
         if (!got) break
-        const session = await client.session()
+        const session = await readSession()
         const changed = (session.notes || []).filter((n) => before.get(String(n.id)) !== key(n))
         // Ignore what agents did (replies from "agent" don't change the key).
         if (changed.length) return { changed: changed.map((n) => ({ ...summary(n, session), new: !before.has(String(n.id)) })) }

package/src/shell/00-state.js

@@ -19,6 +19,9 @@ const store = {
   },
 }
 
+const fabPos = (v) =>
+  v && (v.side === "left" || v.side === "right") && Number.isFinite(v.y) ? { side: v.side, y: Math.min(1, Math.max(0, v.y)) } : { side: "right", y: 1 }
+
 const D = {
   // frames
   frame: null, // the visible prototype frame
@@ -59,6 +62,10 @@ const D = {
   scopeEl: null, // the element the Select tool scoped scrubbing to
   // dock size
   height: store.get("height", 200),
+  collapsed: store.get("collapsed", false) === true, // folded into the corner button (10-dock.js)
+  // Where that button sits: the side it's snapped to and how far down the
+  // window (0 top … 1 bottom), so it stays put through a resize (10-dock.js).
+  fab: fabPos(store.get("fab", null)),
   view: null, // the window of time on the timeline (20-timeline.js)
 }
 

package/src/shell/10-dock.js

@@ -8,9 +8,14 @@ const dock = $("#wb-dock")
 const track = $(".track")
 const cv = $(".lines") // the timeline canvas
 
+// Timelines are "Timeline 1", "Timeline 2"... until the user renames one.
+const defaultName = (id) => `Timeline ${id}`
+// Older sessions named them "Main" and "Take N": those defaults
+// (and only those) read as the new ones.
+const migratedName = (b) => (b.name === (b.id === 1 ? "Main" : `Take ${b.id}`) ? defaultName(b.id) : b.name)
 const newBranch = (forkAt, parentId = null) => {
   const id = ++D.branchSeq
-  const b = { id, name: id === 1 ? "Main" : `Take ${id}`, forkAt, parentId, json: null, end: forkAt, born: performance.now() }
+  const b = { id, name: defaultName(id), forkAt, parentId, json: null, end: forkAt, born: performance.now() }
   D.branches.push(b)
   return b
 }
@@ -257,6 +262,7 @@ window.__retakeShell = {
     b.version = old.version // a new timeline starts on its parent's code
     D.activeId = b.id
     D.frameBranch = b.id // the visible frame carries on as the new timeline
+    flash(`${b.name} started`, { warn: false })
   },
 }
 
@@ -548,6 +554,7 @@ function render() {
   const dh = dockHeight()
   dock.style.height = dh + "px"
   document.body.style.setProperty("--dock-h", dh + "px")
+  tellDock(D.collapsed ? 0 : dh)
   if (!s || !D.frame) return
   autoStart(s)
   if (D.perfNoDraw) return // (perf measurements: the runtime alone)
@@ -561,6 +568,20 @@ function render() {
   renderShield(s)
   if (s.started) renderTimeline(s, shownT)
   renderExtras(s)
+  if (D.collapsed && fab.dataset.phase !== readoutPhase.dataset.phase) fab.dataset.phase = readoutPhase.dataset.phase
+}
+
+// The app is full-window under the dock. So that it can leave room, the frame
+// on show gets `window.__retakeDockHeight` (the px the dock covers at the
+// bottom, 0 when folded) and a `retake:dock` event ({ detail: { height } })
+// whenever that changes.
+function tellDock(height) {
+  try {
+    const win = /** @type {any} */ (D.frame && D.frame.contentWindow)
+    if (!win || win.__retakeDockHeight === height) return
+    win.__retakeDockHeight = height
+    win.dispatchEvent(new win.CustomEvent("retake:dock", { detail: { height } }))
+  } catch {}
 }
 
 // A frame built behind can take the window's focus (its replay focused a
@@ -672,6 +693,7 @@ document.addEventListener("click", (e) => {
     return
   }
   const a = b.dataset.a
+  if (a === "expand") return setCollapsed(false)
   if (a === "play") togglePlay()
   if (a === "fresh") return startFresh()
   if (a === "undo") return undoFresh()
@@ -695,34 +717,185 @@ document.addEventListener("click", (e) => {
 // The dock never grows by itself (that would resize the app mid-recording);
 // only the divider changes it.
 const MIN_H = 96
+const DEFAULT_H = 200
 // Never so short that the lanes (at their closest) don't fit under the ruler.
+const minDockHeight = () => Math.max(MIN_H, 56 + 24 + D.branches.length * 10 + 16)
 const dockHeight = () => {
-  const min = Math.max(MIN_H, 56 + 24 + D.branches.length * 10 + 16)
+  const min = minDockHeight()
   return Math.round(clamp(D.height, min, Math.max(min, innerHeight * 0.7)))
 }
 
-// Resize by dragging the top edge, like docked DevTools.
+// Resize by dragging the top edge, like docked DevTools. Below the minimum
+// height the dock keeps following the pointer: it slides down (a transform, so
+// neither its layout nor the app's changes mid-drag) all the way off the edge.
+// Let go far enough down and it settles into the corner icon; anywhere higher
+// it springs back up to the minimum.
 const divider = $(".divider")
 divider.addEventListener("pointerdown", (e) => {
   divider.setPointerCapture(e.pointerId)
   document.body.classList.add("dragging")
   const startY = e.clientY
   const startH = dock.offsetHeight
+  const min = minDockHeight()
+  let fold = false
+  let lastY = startY
+  let raf = 0
+  // One write per frame, whatever the pointer's rate.
+  const paint = () => {
+    raf = 0
+    const want = startH + startY - lastY
+    D.height = Math.round(clamp(want, min, innerHeight * 0.7))
+    const drop = clamp(min - want, 0, min + 24)
+    fold = drop > min / 2 || lastY >= innerHeight - FOLD_EDGE
+    dock.style.transform = drop ? `translateY(${drop}px)` : ""
+    dock.classList.toggle("will-collapse", fold)
+  }
   const move = (ev) => {
-    D.height = Math.round(clamp(startH + startY - ev.clientY, MIN_H, innerHeight * 0.7))
+    lastY = ev.clientY
+    if (!raf) raf = requestAnimationFrame(paint)
   }
-  const up = () => {
+  // A touch the browser takes back (pointercancel) ends the drag too, or the
+  // app would stay unclickable under body.dragging.
+  const up = (ev) => {
+    for (const type of ["pointermove", "pointerup", "pointercancel", "lostpointercapture"]) divider.removeEventListener(type, type === "pointermove" ? move : up)
+    if (raf) cancelAnimationFrame(raf)
+    if (ev.type !== "pointercancel" && ev.type !== "lostpointercapture") {
+      lastY = ev.clientY
+      paint()
+    }
+    // From where the finger left it: on into the icon, or back up.
     document.body.classList.remove("dragging")
-    divider.removeEventListener("pointermove", move)
-    divider.removeEventListener("pointerup", up)
+    dock.classList.remove("will-collapse")
+    dock.style.transform = ""
     store.set("height", D.height)
+    if (fold && ev.type !== "pointercancel") setCollapsed(true)
   }
   divider.addEventListener("pointermove", move)
-  divider.addEventListener("pointerup", up)
+  for (const type of ["pointerup", "pointercancel", "lostpointercapture"]) divider.addEventListener(type, up)
+})
+
+// Folded: the timeline is a round button (bottom-right at first) and the app
+// has the whole window. It keeps recording; the button (or ⌥T) brings the dock
+// back at its default height. Remembered across reloads.
+const FOLD_EDGE = 48 // px from the bottom edge: let go there and it folds
+const fab = $("#wb-fab")
+function applyCollapsed() {
+  document.body.classList.toggle("collapsed", D.collapsed)
+  fab.hidden = !D.collapsed
+  dock.inert = D.collapsed
+  if (D.collapsed) placeFab()
+}
+
+// The button can be dragged anywhere (mouse or finger). Past a few px it's a
+// drag, not a click; let go and it eases to the nearer side edge. Where it is
+// (`D.fab`: that side, and how far down) is stored, so a reload or a resized
+// window puts it back in the same place, always fully on screen.
+const FAB_SIZE = 44
+const FAB_MARGIN = 16
+const FAB_SLOP = 5 // px a press may move and still be a click
+let fabDragged = false // the press that just ended was a drag: not a click
+// The notch and the home bar (viewport-fit=cover), measured once per layout.
+const safeProbe = document.createElement("div")
+safeProbe.style.cssText =
+  "position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)"
+document.body.appendChild(safeProbe)
+function fabBounds() {
+  const cs = getComputedStyle(safeProbe)
+  const left = FAB_MARGIN + (parseFloat(cs.paddingLeft) || 0)
+  const top = FAB_MARGIN + (parseFloat(cs.paddingTop) || 0)
+  const right = Math.max(left, innerWidth - FAB_SIZE - FAB_MARGIN - (parseFloat(cs.paddingRight) || 0))
+  const bottom = Math.max(top, innerHeight - FAB_SIZE - FAB_MARGIN - (parseFloat(cs.paddingBottom) || 0))
+  return { left, top, right, bottom }
+}
+function moveFab(x, y) {
+  fab.style.left = Math.round(x) + "px"
+  fab.style.top = Math.round(y) + "px"
+}
+function placeFab() {
+  const b = fabBounds()
+  moveFab(D.fab.side === "left" ? b.left : b.right, b.top + D.fab.y * (b.bottom - b.top))
+}
+applyCollapsed()
+addEventListener("resize", () => D.collapsed && !fab.classList.contains("moving") && placeFab())
+
+fab.addEventListener("pointerdown", (e) => {
+  fabDragged = false
+  if (e.button !== 0) return
+  const r = fab.getBoundingClientRect()
+  const grabX = e.clientX - r.left
+  const grabY = e.clientY - r.top
+  const x0 = e.clientX
+  const y0 = e.clientY
+  let moving = false
+  fab.setPointerCapture(e.pointerId)
+  const move = (ev) => {
+    if (!moving && Math.hypot(ev.clientX - x0, ev.clientY - y0) < FAB_SLOP) return
+    if (!moving) {
+      moving = true
+      fab.classList.remove("snapping")
+      fab.classList.add("moving")
+    }
+    const b = fabBounds()
+    moveFab(clamp(ev.clientX - grabX, b.left, b.right), clamp(ev.clientY - grabY, b.top, b.bottom))
+  }
+  const up = () => {
+    for (const type of ["pointermove", "pointerup", "pointercancel"]) fab.removeEventListener(type, type === "pointermove" ? move : up)
+    if (!moving) return
+    fabDragged = true
+    fab.classList.remove("moving")
+    // Where it was let go (its left/top: the rect would include the lift's scale).
+    const b = fabBounds()
+    const x = parseFloat(fab.style.left) || 0
+    const y = parseFloat(fab.style.top) || 0
+    D.fab = {
+      side: x + FAB_SIZE / 2 < innerWidth / 2 ? "left" : "right",
+      y: b.bottom > b.top ? clamp((y - b.top) / (b.bottom - b.top), 0, 1) : 1,
+    }
+    store.set("fab", D.fab)
+    fab.classList.add("snapping")
+    placeFab()
+    setTimeout(() => fab.classList.remove("snapping"), 400)
+  }
+  fab.addEventListener("pointermove", move)
+  fab.addEventListener("pointerup", up)
+  fab.addEventListener("pointercancel", up)
 })
+// The click that ends a drag doesn't open the dock.
+fab.addEventListener(
+  "click",
+  (e) => {
+    if (!fabDragged) return
+    fabDragged = false
+    e.stopPropagation()
+    e.preventDefault()
+  },
+  true,
+)
+function setCollapsed(on) {
+  if (on === D.collapsed) return
+  const hadFocus = on ? dock.contains(document.activeElement) : document.activeElement === fab
+  if (on) {
+    setPicking(null)
+    closeCard()
+  } else {
+    D.height = DEFAULT_H
+    store.set("height", D.height)
+  }
+  D.collapsed = on
+  store.set("collapsed", on)
+  applyCollapsed()
+  if (hadFocus) (on ? fab : playBtn).focus({ preventScroll: true })
+}
 
 window.addEventListener("keydown", (e) => {
   if (e.key === "Meta") return window.__retakeShell.meta(true)
+  // The corner button is a real button: Enter and Space press it.
+  if (e.target === fab && (e.key === "Enter" || e.code === "Space")) return
+  // Not while typing in the dock (a note, a timeline's name): ⌥T types there († on a Mac).
+  if (e.altKey && e.code === "KeyT" && !typing(e.target)) {
+    e.preventDefault()
+    return setCollapsed(!D.collapsed)
+  }
   if (e.key === "Escape") {
     setPicking(null)
     closeCard()

package/src/shell/15-session.js

@@ -2,11 +2,13 @@
 // (/__retake/session, kept on disk under <project>/.retake/) so a reload or a
 // restart doesn't lose them; each timeline's recording goes to
 // /__retake/recording/:id. Agents reply to notes over /__retake/events.
-// When the server has no session API (it answers 404), everything stays in
-// memory for this page.
+// When the server has no session API (it answers 404), or the page says
+// there's no server at all (`__retakeConfig.server === false`, a static
+// deploy), everything stays in memory for this page.
 const TOKEN = window.__RETAKE_TOKEN || ""
+const SERVER = !(window.__retakeConfig && window.__retakeConfig.server === false)
 const net = {
-  on: true, // false: in-memory only
+  on: SERVER, // false: in-memory only
   restoring: true, // nothing is saved until what's on disk has been read
   savedSession: null, // the last session body the server has
   savedRec: new Map(), // branch id → the recording string the server has
@@ -40,7 +42,7 @@ function sessionBody() {
 }
 
 function applySession(s) {
-  D.branches = s.branches.map((b) => ({ ...b, version: b.codeVersion || undefined, json: null, end: b.end ?? b.forkAt, born: -1e9 }))
+  D.branches = s.branches.map((b) => ({ ...b, name: migratedName(b), version: b.codeVersion || undefined, json: null, end: b.end ?? b.forkAt, born: -1e9 }))
   D.branchSeq = Math.max(0, ...D.branches.map((b) => b.id))
   D.activeId = D.branches.some((b) => b.id === s.activeId) ? s.activeId : D.branches[0].id
   D.markers = Array.isArray(s.markers) ? s.markers : []
@@ -83,6 +85,7 @@ async function restore() {
     return b.id
   }
   try {
+    if (!SERVER) return
     const r = await api("GET", "session")
     if (r.missing) {
       net.on = false
@@ -93,7 +96,7 @@ async function restore() {
     applySession(s)
     net.savedSession = JSON.stringify(sessionBody())
     known = true
-    const json = await recordingOf(activeBranch())
+    const json = newerThanSaved(await recordingOf(activeBranch()))
     if (D.frame) {
       // Opened fresh already (the session was slow): that visit is its own.
       D.frameBranch = ownTimeline()
@@ -119,6 +122,53 @@ async function restore() {
   }
 }
 
+// Leaving the page (a new address typed in, a reload of the dock) while
+// recording: the server has the recording as it was at the last save, up to
+// five seconds ago. What came after is kept in this tab's sessionStorage on
+// the way out, and restore() carries on from it (F78).
+const LIVE_KEY = KEY + "live"
+function takeLiveStash() {
+  try {
+    const v = sessionStorage.getItem(LIVE_KEY)
+    sessionStorage.removeItem(LIVE_KEY) // the app's frame shares this storage
+    return v ? JSON.parse(v) : null
+  } catch {
+    return null
+  }
+}
+const liveStash = SERVER ? takeLiveStash() : null
+// The saved recording, or what this tab kept of the same recording (same
+// timeline, same epoch) when it's further along.
+function newerThanSaved(json) {
+  const kept = liveStash
+  if (!json || !kept || kept.branchId !== D.activeId || typeof kept.rec !== "string") return json
+  try {
+    const saved = JSON.parse(json)
+    const rec = JSON.parse(kept.rec)
+    if (rec.epoch !== saved.epoch || !(rec.end > saved.end)) return json
+  } catch {
+    return json
+  }
+  activeBranch().json = kept.rec
+  return kept.rec
+}
+window.addEventListener("pagehide", () => {
+  if (!net.on || net.restoring || net.hold || !D.PT || D.building || D.frameBranch !== D.activeId) return
+  try {
+    const s = D.PT.state()
+    if (!s.started || s.seeking) return
+    const rec = JSON.stringify(D.PT.history())
+    if (rec === net.savedRec.get(D.activeId)) return
+    sessionStorage.setItem(LIVE_KEY, JSON.stringify({ branchId: D.activeId, rec }))
+  } catch {}
+})
+// Back from the back/forward cache: this page carries on, nothing to keep.
+window.addEventListener("pageshow", (e) => {
+  try {
+    if (e.persisted) sessionStorage.removeItem(LIVE_KEY)
+  } catch {}
+})
+
 // The active timeline's recording is saved when it's still (paused), and every
 // few seconds while it's live.
 function activeSig(s) {

package/src/shell/20-timeline.js

@@ -41,7 +41,6 @@ const MONO = '10px "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace'
 
 const tip = $("#wb-tip")
 const gutter = $(".gutter")
-const liveBtn = $(".live-btn")
 const readoutT = $(".readout .t")
 // Minutes and seconds, then the hundredths dimmer.
 readoutT.innerHTML = '<span class="ms"></span><span class="cs"></span>'
@@ -100,7 +99,7 @@ function setView(from, to, { animate = true } = {}) {
   const r = pinStart({ from: mid - span / 2, to: mid + span / 2 }, D.last)
   D.view.fit = false
   D.view.followSpan = r.to - r.from
-  if (D.last && D.last.playing) D.view.detached = true
+  if (D.last && D.last.playing) (D.view.detached = true), (D.view.detachedAt = performance.now())
   if (animate) D.view.target = r
   else {
     D.view.from = r.from
@@ -117,6 +116,8 @@ function fitRange(a, b) {
   const pad = Math.max((b - a) * 0.15, 10)
   setView(a - pad, b + pad)
 }
+// How long a manual scroll of a live timeline holds the view before it follows again.
+const FOLLOW_AGAIN_MS = 3000
 function followLive() {
   D.view.detached = false
   D.view.fit = false
@@ -131,6 +132,8 @@ function stepView(s) {
   const v = D.view
   // Started playing: follow again. Paused: stay exactly where it is.
   if (s.playing && !v.wasPlaying) v.detached = false
+  // Scrolled away while it records: it follows again once you leave it alone.
+  if (s.playing && !s.future && v.detached && now - (v.detachedAt || 0) > FOLLOW_AGAIN_MS) v.detached = false
   if (!s.playing && v.wasPlaying) {
     v.fit = false
     v.target = null
@@ -310,11 +313,13 @@ function drawRuler(g, s, xNow) {
     const isMajor = rel % major === 0
     ctx.fillStyle = isMajor ? INK.dim : INK.faint
     ctx.fillRect(x - 0.5, RULER - (isMajor ? 6 : 3), 1, isMajor ? 5 : 2)
-    // A label the playhead's cap would sit on is left out.
-    if (isMajor && !(x + 3 < xNow + 8 && x + 36 > xNow - 8)) {
+    // A label that would run past the right edge is left out.
+    if (isMajor) {
+      const text = label(t)
+      if (x + 3 + ctx.measureText(text).width > g.w) continue
       ctx.fillStyle = INK.dim
-      ctx.fillText(label(t), x + 3, RULER - 8)
-      labels.push(label(t))
+      ctx.fillText(text, x + 3, RULER - 8)
+      labels.push(text)
     }
   }
   return labels
@@ -457,7 +462,6 @@ function renderTimeline(s, shownT) {
   D.lanes = lanes
   renderGutter(lanes)
   const following = s.playing && !D.view.detached
-  liveBtn.hidden = !(s.playing && !s.future && D.view.detached)
   checkPendingFork(s)
 
   if (band.id !== D.activeId) {
@@ -702,11 +706,13 @@ function renderHead(s, shownT) {
   hintEl.classList.remove("show", "warn")
 }
 
-// A short message in the hint's place (a refused checkout, say).
-function flash(msg) {
-  flashUntil = performance.now() + 3500
+// A short message in the hint's place: a warning (a refused checkout, say),
+// or with `warn: false` news ("Timeline 2 started").
+function flash(msg, { warn = true } = {}) {
+  flashUntil = performance.now() + (warn ? 3500 : 2500)
   hintEl.textContent = msg
-  hintEl.classList.add("show", "warn")
+  hintEl.classList.add("show")
+  hintEl.classList.toggle("warn", warn)
 }
 
 // ---- a new timeline from a chosen moment -------------------------------------------

package/src/shell/25-input.js

@@ -520,6 +520,10 @@ function dockKey(e, fromApp) {
     stepBy(e.key === "ArrowRight" ? 1 : -1, e.shiftKey)
     return true
   }
+  if (e.altKey && e.code === "KeyT") {
+    setCollapsed(!D.collapsed)
+    return true
+  }
   if (e.altKey) return false
   if (e.code === "KeyF") {
     fitAll()

package/src/shell/30-notes.js

@@ -821,15 +821,17 @@ function renderExtras(s) {
   if (D.scopeEl && D.scopeEl.isConnected) boxAt(D.scopeEl, scopeBox)
   else scopeBox.style.display = "none"
 
-  // Numbered pins on the notes of the branch in view.
+  // Numbered pins on the notes of the branch in view, only while it's paused:
+  // live or playing, the app is left alone (the count still says how many).
+  const paused = !s.playing && !(D.building && D.building.play)
+  if (!paused && openNote) closeCard()
   let doc = null
   try {
     doc = D.frame.contentDocument
   } catch {}
-  const f = D.frame.getBoundingClientRect()
   const seen = new Set()
   D.notes.forEach((n, i) => {
-    if (n.branchId !== D.activeId || !doc || s.seeking) return
+    if (n.branchId !== D.activeId || !doc || s.seeking || !paused) return
     const p = anchorOf(n.el)
     let pin = pinEls.get(n.id)
     if (!pin) {

package/src/shell/shell.css

@@ -54,11 +54,40 @@ body.dragging #wb-stage, body.scrubbing #wb-stage { pointer-events: none; }
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 36px), var(--glass);
   -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 -8px 32px rgba(0, 0, 0, 0.35); }
+/* Folded away (the divider dragged to the bottom edge, or ⌥T): it slides down
+   out of sight and the round button in the corner brings it back. */
+#wb-dock { padding-bottom: env(safe-area-inset-bottom, 0px);
+  transition: transform .24s var(--ease), opacity .2s var(--ease), visibility 0s linear 0s; }
+#wb-dock.will-collapse { opacity: .55; }
+/* Mid-drag it follows the pointer exactly (translateY below the minimum height,
+   see 10-dock.js); let go and it eases from there into the icon or back up. */
+body.dragging #wb-dock { transition: opacity .12s var(--ease); will-change: transform; }
+body.collapsed #wb-dock { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none;
+  transition: transform .24s var(--ease), opacity .2s var(--ease), visibility 0s linear .24s; }
+/* Placed by 10-dock.js (left/top: dragged anywhere, snapped to a side edge). */
+#wb-fab { position: fixed; z-index: 10; left: calc(100vw - 60px); top: calc(100vh - 60px); touch-action: none; cursor: grab;
+  width: 44px; height: 44px; border-radius: 999px; color: var(--blue);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)), var(--glass);
+  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px var(--hair), var(--shadow); animation: fab-in .22s var(--ease); }
+#wb-fab[hidden] { display: none; }
+#wb-fab.moving { cursor: grabbing; transform: scale(1.06); transition: transform .12s var(--ease); }
+#wb-fab.snapping { transition: left .28s var(--ease), top .28s var(--ease), transform .12s var(--ease); }
+@media (hover: hover) { #wb-fab:hover { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)), var(--glass); } }
+#wb-fab svg { display: block; }
+/* The phase, as the readout shows it: green live, blue playing, amber paused. */
+#wb-fab .dot { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 999px; background: var(--dim); box-shadow: 0 0 0 2px rgba(22, 22, 26, 0.9); }
+#wb-fab[data-phase="live"] .dot { background: var(--green); }
+#wb-fab[data-phase="playing"] .dot { background: var(--blue); }
+#wb-fab[data-phase="paused"] .dot, #wb-fab[data-phase="scrubbing"] .dot { background: var(--amber); }
+@keyframes fab-in { from { opacity: 0; transform: scale(.6) translateY(8px); } }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  #wb-fab { background: rgba(20, 20, 24, 0.92); }
   #wb-dock { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 36px), rgba(20, 20, 24, 0.92); }
 }
 /* The grab handle at the top centre: always there, brighter on hover. */
-.divider { position: absolute; left: 0; right: 0; top: 0; height: 12px; cursor: ns-resize; z-index: 3; display: flex; justify-content: center; }
+/* touch-action: a finger drag on it is the dock's, never the page's scroll. */
+.divider { position: absolute; left: 0; right: 0; top: 0; height: 12px; cursor: ns-resize; z-index: 3; display: flex; justify-content: center; touch-action: none; }
 .divider span { margin-top: 4px; width: 36px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); transition: background .15s var(--ease), width .15s var(--ease); }
 .divider:hover span, body.dragging .divider span { background: rgba(255, 255, 255, 0.45); width: 44px; }
 
@@ -71,12 +100,11 @@ button:active { transform: scale(0.96); }
 .head { position: relative; flex: none; height: 48px; margin-top: 8px; display: flex; align-items: center; gap: 8px; padding: 0 16px; }
 .left, .right { display: flex; align-items: center; gap: 8px; flex: none; }
 .right { margin-left: auto; }
-/* Phone width: the tools scroll sideways rather than run off the edge. */
-@media (max-width: 520px) { .head { padding: 0 10px; gap: 6px; } .readout .phase { display: none; } .right { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .right::-webkit-scrollbar { display: none; } }
 /* One button style for the text controls: 32px, full round, a ghost fill. */
 .btn { flex: none; height: 32px; padding: 0 14px; gap: 8px; border-radius: 999px; background: var(--fill); color: var(--muted);
   font: 500 13px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--hair); }
 @media (hover: hover) { .btn:hover { color: var(--white); background: var(--fill-2); } }
+.btn.fresh svg { display: none; }
 
 /* Transport: play and the clock in one capsule. */
 .transport { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 4px; border-radius: 999px;
@@ -118,6 +146,29 @@ button:active { transform: scale(0.96); }
   box-shadow: 0 0 0 2px rgba(22, 22, 26, 0.9); transform: scale(0); opacity: 0; transition: transform .2s var(--ease), opacity .2s var(--ease); }
 .notes-count.has .n { transform: none; opacity: 1; }
 
+/* Phone width: the phase word goes, the row tightens, and Start fresh becomes
+   its icon; anything still too wide scrolls sideways rather than run off the edge. */
+@media (max-width: 520px) { .head { padding: 0 10px; gap: 6px; } .readout .phase { display: none; } .right { gap: 6px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .right::-webkit-scrollbar { display: none; } }
+@media (max-width: 440px) { .btn.fresh { width: 32px; padding: 0; } .btn.fresh span { display: none; } .btn.fresh svg { display: block; } }
+/* Fingers (and phone widths): 40px targets. The handle's strip reaches 16px
+   above the dock; lane names get a narrower gutter so the track keeps its
+   width; the glass is denser, so the page under it doesn't muddy the dock. */
+@media (pointer: coarse), (max-width: 520px) {
+  .divider { top: -16px; height: 32px; }
+  .divider span { margin-top: 20px; }
+  .head { height: 56px; }
+  .transport { height: 44px; gap: 8px; padding: 0 12px 0 2px; }
+  .play { width: 40px; height: 40px; }
+  .tools { height: 44px; padding: 2px; }
+  .tool { width: 40px; height: 40px; }
+  .btn { height: 40px; }
+  .notes-count { width: 32px; }
+}
+@media (max-width: 440px) { .btn.fresh { width: 40px; } }
+@media (max-width: 520px) {
+  :root { --glass: rgba(20, 20, 24, 0.9); }
+  .gutter { width: 76px; }
+}
 /* The one hint: a small pill. */
 /* Warnings only, centred on the dock. */
 .hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); height: 24px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px;
@@ -163,10 +214,6 @@ body.scrubbing, body.scrubbing .track { cursor: ew-resize; }
 body.branching .track, body.branching .track * { cursor: crosshair !important; }
 
 /* Following was stopped by hand: this brings it back. */
-.live-btn { position: absolute; right: 8px; top: 24px; z-index: 2; height: 24px; padding: 0 10px; border-radius: 999px;
-  background: var(--fill-2); color: var(--white); font: 500 12px/1 var(--sans); }
-@media (hover: hover) { .live-btn:hover { background: rgba(255, 255, 255, 0.18); } }
-.live-btn[hidden] { display: none; }
 
 /* ruler: numbers are monospace */
 .lines .rule { stroke: var(--hair); stroke-width: 1; }
@@ -292,4 +339,4 @@ body.branching .track, body.branching .track * { cursor: crosshair !important; }
 .ctx button.danger { color: var(--red); }
 .ctx .menu-note { padding: 8px; color: var(--dim); font-size: 12px; line-height: 16px; }
 
-@media (prefers-reduced-motion: reduce) { * { animation-duration: 0s !important; transition-duration: 0s !important; } }
+@media (prefers-reduced-motion: reduce) { * { animation-duration: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } }

package/src/shell/shell.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>Prototype</title>
     <style>/*CSS*/</style>
   </head>
@@ -35,17 +35,23 @@
             <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
             <span class="n">0</span>
           </span>
-          <button class="btn fresh" data-a="fresh">Start fresh</button>
+          <button class="btn fresh" data-a="fresh" aria-label="Start fresh" title="Start fresh">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+            <span>Start fresh</span>
+          </button>
         </div>
       </div>
       <div class="body">
         <div class="gutter" aria-label="Timelines"></div>
         <div class="track">
           <canvas class="lines" aria-label="Timeline"></canvas>
-          <button class="live-btn" data-a="live" hidden>Live →</button>
         </div>
       </div>
     </div>
+    <button id="wb-fab" data-a="expand" aria-label="Show timeline" title="Show timeline (⌥T)" hidden>
+      <!--MARK-->
+      <i class="dot" aria-hidden="true"></i>
+    </button>
     <div id="wb-tip" class="tip" hidden></div>
     <div id="wb-layers" hidden></div>
     <div id="wb-hl"></div>

package/types/client.d.ts

@@ -69,5 +69,14 @@ export interface RetakeRuntime {
 declare global {
   interface Window {
     __retake?: RetakeRuntime | { readonly inert: true }
+    /**
+     * In the dock's frame: how many px the dock covers at the bottom of the
+     * page (0 when it's folded away). A `retake:dock` event on `window`
+     * (`detail: { height }`) says when it changes.
+     */
+    __retakeDockHeight?: number
+  }
+  interface WindowEventMap {
+    "retake:dock": CustomEvent<{ height: number }>
   }
 }

package/types/index.d.ts

@@ -78,6 +78,13 @@ export interface ShellOptions {
   marker?: "url" | "header"
   /** Rebuilds ask the server for the page as it was recorded (front server only). */
   docs?: boolean
+  /**
+   * `false`: there's no Retake server behind the dock (a static or serverless
+   * deploy). It never requests `/__retake/` (no session, no events) and keeps
+   * the session in memory for the page. Default: a server is assumed, and a 404
+   * from it falls back to memory.
+   */
+  server?: boolean
   /** The token mutating `/__retake/` requests carry. */
   token?: string
 }
@@ -85,6 +92,13 @@ export interface ShellOptions {
 /** The dock page: a complete HTML document with the app in a frame. */
 export function shellHtml(options?: ShellOptions): string
 
+/**
+ * Retake's mark as an SVG string (24×24 viewBox, no width or height): a
+ * playhead on a track with an arc back to it. The arc and the played part are
+ * `currentColor`, the rest white, so it reads on a dark background.
+ */
+export function markSvg(): string
+
 export interface RuntimeTagOptions {
   /** The runtime's setup. */
   rt?: RuntimeConfig