Output

A note gives your coding agent what you'd otherwise explain by hand: what to change, the element, where it lives in the code, and the moment it's about.

The example

One note, left on a toast in the middle of its entrance: paused at 00:06.38 on Timeline 2, the toast 140ms into its 350ms transform transition. The note says “Ease this out instead of linear, and start it 60ms later”. Below is what that note becomes, in the dock and over MCP.

Copy for agent

Copy for agent on the note's card puts this Markdown on your clipboard, ready to paste into any agent's chat:

Clipboard

## Ease this out instead of linear, and start it 60ms later

Page: /settings
Element: <li.toast> "Saved Draft synced a moment ago"
Selector: #toasts > li.toast:nth-of-type(2)
Component: Toast < ToastStack
Source: /src/components/Toast.tsx:42
Classes: toast is-entering
Computed: display: flex; position: absolute; width: 320px; height: 56px; padding: 12px 14px; color: rgb(237, 237, 237); background-color: rgb(22, 22, 26); font-size: 14px; font-weight: 400; border-radius: 14px; opacity: 0.62; transform: matrix(1, 0, 0, 1, 0, 8); transition: transform 0.35s linear, opacity 0.35s ease; gap: 12px
Size: 320×56 at (24, 612)
Moment: 00:06.38 into the recording, 140ms into a 350ms transform transition on #toasts > li.toast:nth-of-type(2)
Timeline: "Timeline 2", branched from "Timeline 1" at 00:04.21

Field by field

Lines without a value are left out: an app without React has no Component line, a still element gets “nothing animating”.

Line	What it holds
`## …`	What you wrote
`Page`	The app's path and query at that moment
`Element`	Tag with its id or first class, and up to 80 characters of its text
`Selector`	A CSS path from the nearest ancestor with an id, with `:nth-of-type` where siblings share a tag
`Component`	React components that rendered it, innermost first (`Toast < ToastStack`). Library wrappers (providers, Radix slots, Framer Motion presence) are skipped
`Animation`	For a note on an animation: its kind, where it's defined, timing, keyframes, the point or range on its own clock, what started it, and an exact edit (more)
`CSS`	The stylesheet rule's file and line (and its `@keyframes`), when found
`Source`	The file and line of the JSX that made the element
`Classes`	Its class list
`Computed`	Computed styles an agent asks about first (display, position, size, spacing, colour, type, radius, opacity, transform, transition, animation, z-index, gap), defaults left out
`Size`	Its box in the viewport: width × height at (x, y)
`Moment`	Where in the recording, and what was animating on it (or its nearest ancestors) right then
`Timeline`	The take, and where it branched from
`Earlier replies`	Your agent's replies so far, if any

Some notes carry more: a Group block for a Whole group note, a hover, press or focus state listing every effect it started, Recent animations when nothing ran at the moment, and a Media line for a video (more).

Over MCP: get_note

With the MCP server connected, your agent doesn't need the clipboard. get_note returns the same note as text. This is the real output of Retake's MCP code for the note above, generated when these docs were built:

get_note { "id": "nmg3k2x1a9f" }

Note nmg3k2x1a9f (pending) on timeline "Timeline 2" at 00:06.38
That timeline branched from "Timeline 1" at 00:04.21.

What the user wants: Ease this out instead of linear, and start it 60ms later

Element: <li.toast> "Saved Draft synced a moment ago"
Selector: #toasts > li.toast:nth-of-type(2)
Component: Toast
Source: /src/components/Toast.tsx:42
Classes: toast is-entering
Box: 320×56 at (24, 612)
During an animation: 140ms into a 350ms transform animation (clip 7; it runs 00:06.24 → 00:06.59)
Page: /settings

The note is pinned to 00:06.38 in the recording of that timeline: the user means what was on screen then. get_moment with id "nmg3k2x1a9f" shows what happened around it (actions, animations on this element with their start and end, requests); check it before asking the user about timing.

Timeline: "Timeline 2" (branched from "Timeline 1" at 00:04.21), code version 7f3a1c5e90, no code changes since it started
Files on disk now: Timeline 2's code. Your edit lands in Timeline 2.

Box is the element's size and position; During an animation names the clip so a later look at the timeline can find it. Replies, once there are some, follow under Conversation:.

Over MCP: list_notes

The overview your agent starts from. By default only open notes (pending or acknowledged):

list_notes {}

{
  "count": 1,
  "notes": [
    {
      "id": "nmg3k2x1a9f",
      "status": "pending",
      "text": "Ease this out instead of linear, and start it 60ms later",
      "timeline": "Timeline 2",
      "at": "00:06.38",
      "selector": "#toasts > li.toast:nth-of-type(2)",
      "component": "Toast",
      "source": "/src/components/Toast.tsx:42",
      "animation": "transform +140ms",
      "replies": 0
    }
  ]
}

The note on disk

Notes live in .retake/session.json in your project, next to the takes. Each one has this shape (plus el, the full element description the dock uses to redraw it):

.retake/session.json → notes[0]

{
  "id": "nmg3k2x1a9f",
  "branchId": 2,
  "t": 6380,
  "clip": {
    "id": 7,
    "offset": 140,
    "duration": 350,
    "label": "transform",
    "kind": "transition",
    "property": "transform",
    "selector": "#toasts > li.toast:nth-of-type(2)"
  },
  "selector": "#toasts > li.toast:nth-of-type(2)",
  "component": "Toast",
  "source": {
    "file": "/src/components/Toast.tsx",
    "line": 42,
    "mapped": true
  },
  "classes": [
    "toast",
    "is-entering"
  ],
  "rect": {
    "x": 24,
    "y": 612,
    "w": 320,
    "h": 56
  },
  "text": "Ease this out instead of linear, and start it 60ms later",
  "status": "pending",
  "replies": []
}

status is pending, acknowledged, resolved or dismissed. replies is a list of { from: "user" | "agent", text, at }. t is in milliseconds on the recording's clock.

Where components and lines come from

Component names come from React's owner chain, so a component the element was merely passed through doesn't count.
React 18 and older keep the source line on the element. React 19 keeps a stack; the dock maps its first app frame back to your source with the module's source map.
CSS lines come from Vite's CSS source maps, which the plugin turns on in dev.
A server component has no client-side source to point at, so it gets no Source line.

Components and source lines need React in development mode. Everything else (selector, classes, styles, size, moment) works with any framework or none.