replay-theater

1// Replay Theater: record every Edit and Write in a turn, then step through them one diff at a time.
2
3const PANE = "replay-theater";
4const EDIT_TOOLS = new Set(["Edit", "MultiEdit", "Write"]);
5const CONTEXT = 2;
6const MAX_DIFF_LINES = 400;
7
8// Held by the host, so the last replay survives a hot reload of this file.
9const replay = { plugin: "replay-theater", key: "replay" };
10const at = { plugin: "replay-theater", key: "at" };
11const isHinted = { plugin: "replay-theater", key: "isHinted" };
12
13// The current turn's steps, before the turn completes.
14let pending = [];
15
16export function register(on) {
17  on("session.start", async ($, e, next) => {
18    const r = await next(e);
19    await $.command.register({ name: "replay", description: "Step through the last turn's file edits" });
20    return r;
21  });
22
23  on("turn.start", async ($, e, next) => {
24    if (!e.agentId) {
25      pending = [];
26      await $.state.set(isHinted, false);
27    }
28    return next(e);
29  });
30
31  on("tool.call", async ($, e, next) => {
32    if (!EDIT_TOOLS.has(e.tool)) return next(e);
33    const steps = await stepsFor($, e); // read before the edit lands
34    const r = await next(e); // the edit runs untouched
35    if (!r?.deny && !r?.isError) pending.push(...steps);
36    return r;
37  });
38
39  on("turn.complete", async ($, e, next) => {
40    const r = await next(e);
41    if (!e.agentId && pending.length) {
42      // one replay per turn
43      await $.state.set(replay, pending);
44      await $.state.set(at, 0);
45      await $.state.set(isHinted, true);
46      pending = [];
47    }
48    return r;
49  });
50
51  on("command.run", { command: "replay" }, async ($) => ({
52    text: (await openReplay($)) ? "Replaying" : "No edits in the last turn",
53  }));
54
55  on("ui.press", { plugin: "replay-theater" }, async ($, e, next) => {
56    const { value: steps = [] } = await $.state.get(replay);
57    const { value: i = 0 } = await $.state.get(at);
58    if (e.element === "replay") await openReplay($);
59    else if (e.element === "prev") await $.state.set(at, Math.max(0, i - 1));
60    else if (e.element === "next") await $.state.set(at, Math.min(steps.length - 1, i + 1));
61    else if (e.element === "close") await $.ui.close({ id: PANE });
62    else if (e.element.startsWith("step:")) await $.state.set(at, Number(e.element.slice(5)));
63    return next(e);
64  });
65
66  on("ui.render", { component: "AbovePrompt" }, async ($, e, next) => {
67    const { value: hinted = false } = await $.state.get(isHinted);
68    const { value: steps = [] } = await $.state.get(replay);
69    if (e.props.hasSurvey || e.props.isWorking || !hinted || !steps.length) return next(e);
70    const { Box, Text, Button } = $.ui.resolve(e);
71    const files = new Set(steps.map((s) => s.file)).size;
72    return Box({
73      flexDirection: "row",
74      paddingX: 1,
75      children: [
76        Text({ color: "magenta", children: "↻ " }),
77        Text({ children: `${plural(steps.length, "edit")} across ${plural(files, "file")} last turn  ` }),
78        Button({ key: "replay", label: "Replay", hotkey: "r", plain: true, onPress: () => {} }),
79        Text({ dimColor: true, children: "  or /replay" }),
80      ],
81    });
82  });
83
84  on("ui.render", { component: "Pane" }, async ($, e, next) => {
85    if (e.requestId !== PANE) return next(e);
86    const { value: steps = [] } = await $.state.get(replay);
87    const { value: i = 0 } = await $.state.get(at);
88    if (!steps.length) return next(e);
89    const { Box, Text, Button } = $.ui.resolve(e);
90    const step = steps[Math.min(i, steps.length - 1)];
91    const strip = steps.map((s, n) =>
92      Button({ key: `step:${n}`, label: ` ${n + 1} `, plain: true, dimColor: n !== i, onPress: () => {} }),
93    );
94    return Box({
95      flexDirection: "column",
96      paddingX: 1,
97      children: [
98        Box({ flexDirection: "row", gap: 1, children: strip }),
99        Text({ bold: true, color: "magenta", children: `${step.tool}  ${step.file}`, wrap: "truncate-start" }),
100        Text({ dimColor: true, children: `step ${i + 1} of ${steps.length}` }),
101        Box({ flexDirection: "column", marginY: 1, children: step.lines.map((l) => line(Text, l)) }),
102        Box({
103          flexDirection: "row",
104          gap: 2,
105          children: [
106            Button({ key: "prev", label: "Prev", hotkey: "p", onPress: () => {} }),
107            Button({ key: "next", label: "Next", hotkey: "n", onPress: () => {} }),
108            Button({ key: "close", label: "Close", hotkey: "c", onPress: () => {} }),
109          ],
110        }),
111      ],
112    });
113  });
114}
115
116async function openReplay($) {
117  const { value: steps = [] } = await $.state.get(replay);
118  if (!steps.length) return false;
119  await $.state.set(at, 0);
120  await $.state.set(isHinted, false);
121  await $.ui.open({ id: PANE, title: "Replay Theater", focus: true, closeOnEscape: true });
122  return true;
123}
124
125function line(Text, { op, text }) {
126  const color = op === "+" ? "green" : op === "-" ? "red" : undefined;
127  return Text({ color, dimColor: op === " " || op === "…", children: `${op} ${text}`, wrap: "truncate-end" });
128}
129
130// ---------- recording ----------
131
132async function stepsFor($, e) {
133  const file = String(e.file_path ?? "");
134  if (e.tool === "Write") {
135    const before = await $.fs.read(file).catch(() => "");
136    return [{ file, tool: before ? "Write" : "Create", lines: diff(before, String(e.content ?? "")) }];
137  }
138  const edits = e.tool === "MultiEdit" ? (e.edits ?? []) : [e];
139  return edits.map((edit) => ({
140    file,
141    tool: "Edit",
142    lines: diff(String(edit.old_string ?? ""), String(edit.new_string ?? "")),
143  }));
144}
145
146// ---------- diffing ----------
147
148export function diff(before, after) {
149  const a = before === "" ? [] : before.split("\n");
150  const b = after === "" ? [] : after.split("\n");
151  let start = 0;
152  while (start < a.length && start < b.length && a[start] === b[start]) start++;
153  let endA = a.length;
154  let endB = b.length;
155  while (endA > start && endB > start && a[endA - 1] === b[endB - 1]) {
156    endA--;
157    endB--;
158  }
159  const ops = [
160    ...a.slice(0, start).map((text) => ({ op: " ", text })),
161    ...middle(a.slice(start, endA), b.slice(start, endB)),
162    ...a.slice(endA).map((text) => ({ op: " ", text })),
163  ];
164  return trim(ops);
165}
166
167function middle(a, b) {
168  if (a.length * b.length > MAX_DIFF_LINES * MAX_DIFF_LINES) {
169    return [...a.map((text) => ({ op: "-", text })), ...b.map((text) => ({ op: "+", text }))];
170  }
171  // Longest common subsequence, then walk it.
172  const lcs = Array.from({ length: a.length + 1 }, () => new Array(b.length + 1).fill(0));
173  for (let i = a.length - 1; i >= 0; i--) {
174    for (let j = b.length - 1; j >= 0; j--) {
175      lcs[i][j] = a[i] === b[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
176    }
177  }
178  const out = [];
179  let i = 0;
180  let j = 0;
181  while (i < a.length || j < b.length) {
182    if (i < a.length && j < b.length && a[i] === b[j]) {
183      out.push({ op: " ", text: a[i++] });
184      j++;
185    } else if (i < a.length && (j === b.length || lcs[i + 1][j] >= lcs[i][j + 1])) {
186      out.push({ op: "-", text: a[i++] });
187    } else {
188      out.push({ op: "+", text: b[j++] });
189    }
190  }
191  return out;
192}
193
194// Keep CONTEXT unchanged lines around each change; fold the rest into "…".
195function trim(ops) {
196  const near = ops.map((o, n) =>
197    ops.slice(Math.max(0, n - CONTEXT), n + CONTEXT + 1).some((x) => x.op !== " "),
198  );
199  const out = [];
200  ops.forEach((o, n) => {
201    if (near[n]) out.push(o);
202    else if (out[out.length - 1]?.op !== "…") out.push({ op: "…", text: "" });
203  });
204  return out.length > MAX_DIFF_LINES ? [...out.slice(0, MAX_DIFF_LINES), { op: "…", text: `${out.length - MAX_DIFF_LINES} more lines` }] : out;
205}
206
207function plural(n, word) {
208  return `${n} ${word}${n === 1 ? "" : "s"}`;
209}
210

1export type ReplayLine = { op: " " | "-" | "+" | "…"; text: string };
2export type ReplayStep = { file: string; tool: string; lines: ReplayLine[] };
3
4declare module "claude-code" {
5  interface PluginState {
6    "replay-theater": {
7      replay: ReplayStep[];
8      at: number;
9      isHinted: boolean;
10    };
11  }
12}
13