retake-dev 0.4.0 → 0.5.1

package/CHANGELOG.md

@@ -0,0 +1,125 @@
+# Changelog
+
+## 0.5.1
+
+- Notes on animations work the way web animation does: per element, on the
+  animation's own clock. ⌘-click an element and it gets a row on the track with
+  its own animations; open one to see its clock (0 after the delay), its
+  keyframes and what it moves, and the path it takes on the app. Click to pin a
+  note at a point ("at 100ms (20%) of fadeUp"), drag to pin it over a range
+  ("200–400ms"), or Shift+drag the timeline first. Numbers typed in the note are
+  read on that clock. Copy for agent and `get_note` now give the animation's
+  keyframes and timing, the exact point or range with its keyframe segment, the
+  values and the box there, and how to change only that part.
+- Each animation note now carries an exact edit: the keyframes again, on plain
+  time, with the note's point or range edges as keyframes of their own and the
+  exact part of each curve on both sides (written for CSS `@keyframes`,
+  `element.animate()` or Motion's `times`/`ease`). Change the marked part and the
+  rest of the motion stays as it was, even when the easing is on the whole
+  effect. A `@keyframes` that runs on several elements says so, and the edit
+  gives the noted element its own copy.
+- Motion keyframes (`x: [0, 120, 120, 240]` with `times`) are read off the
+  motion element's props: every keyframe, its times and the ease of each
+  segment, so a range over a hold is on one clip and the exact edit is in
+  Motion's own terms. A CSS transition's exact edit is its timing as `linear()`
+  stops with the range edges marked. Two animations over the same time on one
+  element (a transform and an opacity transition) stack on its row, so either
+  can be opened.
+- Script-driven motion is recorded: GSAP tweens, Motion's `x`/`y`/`scale` and
+  react-spring write inline styles every frame, and now show as clips (kind
+  `js`) with their first and last values. Motion and GSAP are named, with
+  Motion's `animate`/`transition` props in the note; `element.animate()` clips
+  say where they were called. A note after an animation ended is about its end
+  state. CSS animations from `<link>` stylesheets (Next, any framework) get
+  their `@keyframes` file and line, and source paths are relative to the project.
+- ⌘-click picks what you can see under the pointer: text, media, a control or a
+  painted box come first; empty overlays (glows, stretched links, scrims) and
+  invisible layers (opacity 0, a closed menu sheet) are a wheel step away, shown
+  dimmed with why. The highlight and the note always agree (⌘ pressed with the
+  pointer already still, or a build swapping in while ⌘ is held). An svg icon is
+  the `<svg>` or its button, not the section around it; shadow DOM and embedded
+  iframes are pickable (an embed gets no clicks while paused). A note's clip is
+  only ever its own element's (or an ancestor's that moves it). Selectors leave
+  out generated ids and classes that came and went during the recording, so they
+  find the element on a fresh load. A server component's element gets its own
+  source line (`GET /__retake/map`), or "unknown", never its client parent's.
+  Next's layout components are left out of component names. A second ⌘-click on
+  a pinned spot makes a new note there.
+- `retake mcp`: `get_animation` maps recording times onto an animation's own
+  clock (and into CSS %, Motion `times`, GSAP seconds); `get_moment` on a note
+  takes the note's word for which animations are its element's, so it can't
+  disagree with `get_note`; `list_notes` shows each note's range and animation.
+  The server's instructions carry a short guide to editing each kind of animation.
+- Next.js: the timeline on your usual dev URL. Add `proxy.ts` with
+  `export { default } from "retake-dev/next"` (Next 16), or `middleware.ts` with the
+  Node.js runtime (Next 15), and run `next dev` as always: no second port. Already
+  have one? `export default withRetake(yourMiddleware)`. Sessions, notes and
+  `retake mcp` work as with the CLI. Dev only: `next build` output has no dock or
+  runtime. `npx retake-dev .` still works without installing anything.
+- Large recordings upload gzipped (a Next.js middleware reads 10 MB of a request at most).
+- 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.
+- `retake mcp` reads the recording: `get_moment` (around a note's moment, or any
+  moment of a timeline) and `get_timeline_events` (a stretch of a timeline) list
+  the user's actions, requests, route changes, the animations on or near an
+  element with their start, end and what they animate between, and when the
+  screen changed most. `get_note` gives the animation's start and end too, and
+  points to `get_moment`.
+- A note's source in a bundled app (Next.js on Turbopack or webpack) is the
+  app's file and line: the dock reads the chunk's source map, index maps
+  included, and skips frames that land in the bundled JSX runtime. With no map
+  it says the source isn't known (`retake mcp` tries the map again) instead of
+  naming the chunk.
+- "Copy for agent" starts with two lines saying what a Retake note is and how to
+  see what happened around its moment.
+- Recorded animations keep their first and last keyframe values (`from`/`to`),
+  delay and per-iteration duration.
+- A second skill, `retake-notes`: how a coding agent works through notes.
+
+## 0.5.0
+
+The dock folds into an icon you can drag anywhere, notes show only when paused, and timelines are named Timeline 1, Timeline 2. Everything above builds on it.
+
+## 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.
 
@@ -51,6 +51,60 @@ export default defineConfig({
 
 `retake()` only runs in `vite dev`; `vite build` output has no Retake code in it.
 
+### Next.js: on your usual dev URL
+Install `retake-dev` (above) and add one file in the project root (in `src/` if
+your app lives in `src/app`). Then run `next dev` / `npm run dev` as always: the
+timeline shows on your normal dev URL (http://localhost:3000), no second port.
+
+```ts
+// proxy.ts (Next 16)
+export { default } from "retake-dev/next"
+```
+
+```ts
+// middleware.ts (Next 15.5)
+import retake from "retake-dev/next"
+export default retake
+export const config = { runtime: "nodejs" }
+```
+
+Install it from the registry (or a tarball, `npm i ../retake-dev-0.5.1.tgz`): a
+`file:` or linked install is a symlink, which Turbopack doesn't follow out of the
+project, and `retake-dev/next` isn't found.
+
+Next 15 needs the Node.js runtime (Retake keeps `.retake/` on disk). It only runs in
+`next dev`: in `next build` / `next start` every request goes straight on, and the
+build has no dock or runtime in it.
+
+Already have a proxy or middleware? Wrap yours:
+
+```ts
+import { withRetake } from "retake-dev/next"
+
+export default withRetake(async (req) => {
+  // ...your middleware, as before
+})
+```
+
+Next reads `config` from your file as written (it can't be re-exported). Without one
+the proxy runs for every request and passes everything but page loads on. With a
+`matcher` of your own, add Retake's two entries to it:
+
+```ts
+export const config = {
+  matcher: [
+    "/__retake/:path*",
+    { source: "/((?!_next/static|_next/image).*)", has: [{ type: "header", key: "sec-fetch-mode", value: "navigate" }] },
+    // ...your entries
+  ],
+}
+```
+
+`withRetake` hands every request it doesn't answer to your function, so with a
+merged matcher your function also sees page loads it didn't match before.
+No install at all: `npx retake-dev .` runs `next dev` behind Retake's own port
+(3014) instead.
+
 ### Connect your coding agent (MCP)
 Notes you leave in the dock can go straight to your coding agent. Register the
 MCP server once, from the app folder. With Claude Code:
@@ -63,10 +117,26 @@ Any other MCP client (Cursor, Codex, Windsurf...) takes the same command,
 `npx -y retake-dev mcp`, in its MCP settings.
 
 With the dev server running, the agent can `list_notes`, `get_note`,
-`get_active_timeline`, `acknowledge`, `resolve`, `reply` and `watch_notes`.
+`get_moment`, `get_animation`, `get_timeline_events`, `get_active_timeline`,
+`acknowledge`, `resolve`, `reply` and `watch_notes`.
 It finds the server through `.retake/server.json` (or pass `--url http://localhost:3014`).
 Acknowledging and resolving show up on the note in the dock right away.
 
+A note is pinned to a moment of a recording. `get_moment` (a note id, or a
+timeline and a time like `00:10.91`) reads that recording around it: the user's
+clicks, keys, typing and route changes, the requests, the animations on or near
+the element (start, end, duration, what they animate between, how far along at
+the moment) and when the screen changed most. `get_timeline_events` lists the
+same for any stretch of a timeline. A note whose source is only a line of a
+compiled bundle (a Next.js chunk) is mapped back to the app's file and line
+through the bundle's source map.
+
+A note on an animation says exactly which part of it you mean (see
+[Notes on animations](#notes-on-animations)). `get_animation` gives that
+animation's timing and every keyframe, and maps any recording time onto its own
+clock, in CSS %, Motion `times` and GSAP seconds. `get_note`, `get_moment` and
+Copy for agent describe the element and its animation with the same words.
+
 ### The first 60 seconds
 1. **Use your app** for a few seconds: it's being recorded already.
 2. **Pause** with space (or ⌥P, or the play button). The app goes view-only:
@@ -81,13 +151,86 @@ 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.
 
+### Picking an element
+Hold ⌘ over the paused app: a chip by the pointer lists what's under it, and the
+pick is what you can see there: text, an image or icon, a control, a painted box.
+Empty overlays (a glow, a stretched card link, a scrim) and invisible layers
+(opacity 0, a closed menu) stay in the list, dimmed with why, one wheel step or
+Tab away. On an icon you get the `<svg>` (or the button it's the icon of), with
+the shape inside it a step away; inside an open shadow root, the element itself;
+an embedded iframe is one element (and gets no clicks while paused). A second
+⌘-click on a pinned spot makes another note there.
+
+The note's selector finds the element again on a fresh load: no generated ids
+(`:r1:`, `radix-…`), no classes that came and went during the recording (`in`,
+`is-open`, `opacity-100`), test ids, labels and hrefs where they're unique. Its
+source is where the element itself was written, a server component's line too
+(the dev server reads the chunk's source map), never just the parent it was
+passed into; Next's own layout components aren't listed as yours.
+
+### Notes on animations
+Web animations aren't edited on a global timeline: each one belongs to an
+element, runs on its own clock (0 is the end of its delay), and moves the
+element between keyframes. Notes work the same way.
+
+- **⌘-click an element** and it gets a row on the track under the timelines, with
+  its own animations (and an ancestor's that moves it). Nothing moving on it?
+  The row says so and lists what animates inside it; click one to switch. Two
+  animations at once (a transform and an opacity transition) stack in thinner
+  rows; hover one to see its name.
+- **Click an animation** on that row to open it: a ruler on its own clock (the
+  delay hatched before 0), a diamond where each keyframe is reached, and small
+  lines of what it moves (x, y, scale, rotation, opacity, size). The hint reads
+  where the playhead is on it: `fadeUp · 100ms of 500 · 20% · seg 0→40% ease-out ·
+  x 248 y 568 · 320×64`. On the app, dashed boxes show where the element starts and
+  ends, and a dotted line the path it takes.
+- **A point**: click on the open animation (or step with ←/→ a frame at a time,
+  Shift+←/→ keyframe to keyframe). The note is pinned there: "at 100ms (20%) of
+  fadeUp on `<h1.title>`".
+- **A range**: drag across the open animation ("200–400ms · 40–80% of fadeUp").
+  It snaps to keyframes and 10ms steps (hold ⌥ to drag freely); drag past the
+  end for "from here to the end". Shift+drag on the timeline selects a range of
+  the recording first, then ⌘-click any element.
+- **Typed numbers** ("at 100ms", "between 200 and 400 ms", "after 40%") are read
+  on the open animation's own clock; a chip under the note says how, and a click
+  switches it to recording time.
+- Esc closes the open animation, then the note.
+
+The note carries, for that animation: its kind and where it's defined, timing,
+every keyframe, the point or both range edges on its own clock (local ms,
+progress, eased progress, the keyframe segment), the values and the element's
+box there and one frame either side, samples across a range, and what to change
+for its kind (CSS keyframes, transitions, `element.animate()`, Motion, GSAP,
+scroll-driven). It ends with an exact edit: the keyframes again on plain time,
+the point or range edges as keyframes of their own, each piece keeping its part
+of the curve, so an agent changes only the marked part and the rest moves as
+before. A `@keyframes` shared with other elements is flagged, and the edit gives
+the noted element its own copy. Motion written as inline styles every frame
+(GSAP, Motion's `x`, react-spring) is recorded too, with its first and last
+values and the library named; Motion keyframes come with every keyframe, their
+`times` and each segment's ease, read off the component's props. A CSS
+transition's exact edit is its timing as `linear()` stops.
+
+### The dock
+- **Keys**: space or ⌥P plays and pauses, ←/→ step (on an open animation: its
+  frames; Shift: its keyframes), F fits everything, + starts a new timeline at
+  the playhead, M drops a bookmark, ⌥T folds the dock away, Esc closes an open
+  animation, a selected range, then the note.
+- **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
 rm -rf .retake                    # Retake's session and recordings
 claude mcp remove retake          # if you added the MCP server (or remove it in your client's MCP settings)
 ```
-Remove `retake()` from `vite.config` if you added it.
+Remove `retake()` from `vite.config`, or Retake's `proxy.ts` / `middleware.ts` (or `withRetake`), if you added it.
 
 ## Commands
 ```sh
@@ -97,7 +240,7 @@ retake <project> --code-branches     # each timeline keeps its own version of th
 retake <project> -- --host           # anything after -- goes to the dev server
 retake -- <dev command>              # run that command with the timeline in front (retake -- next dev)
 retake http://localhost:3000         # put the timeline in front of a dev server that's already running
-retake init                          # print the vite.config lines
+retake init                          # print the vite.config / proxy.ts lines
 retake mcp                           # the MCP server your coding agent runs
 ```
 `--root <dir>` puts `.retake/` somewhere else; `--verbose` logs every request the
@@ -124,7 +267,7 @@ the package manager its lockfile names):
 | Framework | Run | Notes |
 |---|---|---|
 | Vite SPA (React, Vue, Svelte, plain) | `npx retake-dev .` | or `plugins: [retake()]` in `vite.config` |
-| Next.js | `npx retake-dev .` | tested on 16.3 (app and pages router, server actions) and 15.5 (app router), Turbopack |
+| Next.js | `proxy.ts` / `middleware.ts` ([above](#nextjs-on-your-usual-dev-url)) and your usual `next dev`, or `npx retake-dev .` | tested on 16.3 (app and pages router, server actions) and 15.5 (app router), Turbopack and webpack |
 | React Router 7 framework mode | `npx retake-dev .` | or `plugins: [retake(), reactRouter()]` and your usual `npm run dev`; tested on 7.18 |
 | Remix 2 (Vite) | `npx retake-dev .` | tested on 2.17 |
 | Astro | `npx retake-dev .` | tested on 7.3 with React islands and `<ClientRouter />` |
@@ -136,9 +279,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
@@ -159,10 +302,13 @@ through the same front server and should work; say so if one doesn't.
   loaded chunks) run at their recorded moment, the dev server's own traffic (HMR)
   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
+  (Vite's lazy routes, Astro islands) can't be held to its moment. With Next's
+  `proxy.ts` the same holds, except that a rebuilt moment's page is rendered again
+  (what the server renders differently each time, like the time, can differ).
+- **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 +319,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/bin/retake.js

@@ -38,7 +38,8 @@ Usage:
   retake http://localhost:3000      put the timeline in front of a running dev server
   retake -- <dev command>           run that command with the timeline in front
                                     (e.g. retake -- next dev, retake -- pnpm dev)
-  retake init                       print the vite.config lines instead
+  retake init                       print the lines for vite.config or Next's
+                                    proxy.ts instead
   retake mcp [--url http://localhost:3014]
                                     MCP server for coding agents (stdio)
 
@@ -289,6 +290,18 @@ function init() {
   })
 
 Options: retake({ codeBranches: true }) gives each timeline its own version of the code.
+
+Next.js: one file in the project root (src/ if your app is in src/app), dev only; the timeline
+shows on your usual dev URL:
+
+  // proxy.ts (Next 16)
+  export { default } from "retake-dev/next"
+
+  // middleware.ts (Next 15)
+  import retake from "retake-dev/next"
+  export default retake
+  export const config = { runtime: "nodejs" }
+
 Or leave the project untouched and run:  npx retake-dev .
 (Next, Nuxt, React Router, SvelteKit, Astro... too: it puts Retake in front of your dev server.)`)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "retake-dev",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "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": {
@@ -21,6 +21,11 @@
     "./client": {
       "types": "./types/client.d.ts"
     },
+    "./next": {
+      "types": "./types/next.d.ts",
+      "default": "./src/next.js"
+    },
+    "./next-dev": "./src/next-dev.js",
     "./package.json": "./package.json"
   },
   "bin": {
@@ -33,6 +38,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,19 +53,36 @@ 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 } : {}),
+    // The project folder: source paths in notes are given relative to it.
+    ...(options.root ? { root: options.root } : {}),
   }
   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")
-      return `;(function () {\n"use strict";\n${files.map((f) => read("shell", f)).join("\n")}\n})();`
+      return `;(function () {\n"use strict";\n${noteTextSource()}\n${files.map((f) => read("shell", f)).join("\n")}\n})();`
     })
 }
 
+// src/note-text.js (the note as text for an agent, shared with `retake mcp`)
+// for the dock: its exports as one const, `NT`.
+export function noteTextSource() {
+  const src = read("note-text.js")
+  const names = new Set()
+  const body = src
+    .replace(/^export (?:async )?(function|const|let) (\w+)/gm, (_, kind, name) => (names.add(name), `${kind} ${name}`))
+    .replace(/^export \{([^}]*)\}\s*$/gm, (_, list) => (list.split(",").forEach((n) => n.trim() && names.add(n.trim())), ""))
+  return `const NT = (function () {\n${body}\nreturn { ${[...names].join(", ")} }\n})();`
+}
+
 // The script a server injects into a page it can't tell apart from the app's
 // own frames (any iframe document). It takes itself out of the DOM first (so an
 // app hydrating the whole document never sees it), then runs the runtime only

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>