replay-theater

1// Replay Theater: step through the last turn's edits, one diff at a time.
2
3const PANE = "replay-theater";
4const EDIT_TOOLS = new Set(["Edit", "Write"]);
5const MAX_TEXT = 20_000;
6const MAX_DIFF_LINES = 40;
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 step = { plugin: "replay-theater", key: "step" };
11
12// Edits of the turn in progress; a reload mid-turn only loses this turn's partial record.
13let pending = [];
14
15export function register(on) {
16  // Observe: record the edit, never block or change it.
17  on("tool.call", async ($, e, next) => {
18    const steps = EDIT_TOOLS.has(e.tool) ? await stepsFor($, e) : [];
19    const result = await next(e); // the edit runs untouched
20    if (steps.length && !("deny" in result) && !result.isError) pending.push(...steps);
21    return result;
22  });
23
24  // Pair turn.start and turn.complete into one replay per turn; subagent turns stay out.
25  on("turn.start", ($, e, next) => {
26    if (!e.agentId) pending = [];
27    return next(e);
28  });
29
30  on("turn.complete", async ($, e, next) => {
31    const result = await next(e);
32    if (!e.agentId && pending.length) {
33      await $.state.set(replay, { steps: pending, seen: false });
34      await $.state.set(step, 0);
35      pending = [];
36    }
37    return result;
38  });
39
40  on("session.start", async ($, e, next) => {
41    const result = await next(e);
42    await $.command.register({ name: "replay", description: "Step through the last turn's file edits" });
43    return result;
44  });
45
46  on("command.run", { command: "replay" }, async ($) => ({ text: (await openReplay($)) ? "Replaying" : "No edits" }));
47
48  on("ui.render", { component: "AbovePrompt" }, async ($, e, next) => {
49    const { value } = await $.state.get(replay);
50    if (e.props.hasSurvey || !value || value.seen) return next(e);
51    const { Box, Text, Button } = $.ui.resolve(e);
52    const files = new Set(value.steps.map((s) => s.file)).size;
53    return Box({
54      flexDirection: "row",
55      paddingX: 1,
56      gap: 2,
57      children: [
58        Text({ color: "magenta", bold: true, children: "↺ Replay" }),
59        Text({ dimColor: true, children: `${value.steps.length} edit${value.steps.length === 1 ? "" : "s"} across ${files} file${files === 1 ? "" : "s"}` }),
60        Button({ key: "replay", label: "Replay", hotkey: "r", onPress: () => void openReplay($) }),
61      ],
62    });
63  });
64
65  on("ui.render", { component: "Pane", requestId: PANE }, async ($, e, next) => {
66    const { value } = await $.state.get(replay);
67    if (!value) return next(e);
68    const { value: at = 0 } = await $.state.get(step);
69    const index = Math.min(Math.max(at, 0), value.steps.length - 1);
70    const current = value.steps[index];
71    const { Box, Text, Button } = $.ui.resolve(e);
72    const go = (to) => () => void $.state.set(step, Math.min(Math.max(to, 0), value.steps.length - 1));
73    return Box({
74      flexDirection: "column",
75      paddingX: 1,
76      children: [
77        Text({
78          children: value.steps.map((_, i) => (i === index ? `[${i + 1}]` : ` ${i + 1} `)).join(""),
79        }),
80        Text({ bold: true, color: "magenta", children: `${index + 1}/${value.steps.length}  ${current.file}` }),
81        ...diff(current.before, current.after).map(([sign, line]) =>
82          Text({ color: sign === "+" ? "green" : sign === "-" ? "red" : undefined, dimColor: sign === " ", children: `${sign} ${line}` }),
83        ),
84        Box({
85          flexDirection: "row",
86          gap: 2,
87          children: [
88            Button({ key: "prev", label: "Prev", hotkey: "p", onPress: go(index - 1) }),
89            Button({ key: "next", label: "Next", hotkey: "n", onPress: go(index + 1) }),
90            Button({ key: "close", label: "Close", hotkey: "q", onPress: () => void $.ui.close({ id: PANE }) }),
91          ],
92        }),
93      ],
94    });
95  });
96}
97
98async function openReplay($) {
99  const { value } = await $.state.get(replay);
100  if (!value || value.steps.length === 0) return false;
101  await $.state.set(replay, { ...value, seen: true });
102  await $.state.set(step, 0);
103  // Placement is the surface's job: docked beside the transcript, or inline above the prompt.
104  await $.ui.open({ id: PANE, title: "Replay Theater", focus: true });
105  return true;
106}
107
108// For a Write, read the old contents just before the write lands, so the diff is real.
109async function stepsFor($, e) {
110  if (e.tool === "Edit") {
111    return [{ file: e.file_path, before: clip(e.old_string), after: clip(e.new_string) }];
112  }
113  let before = "";
114  try {
115    before = await $.fs.read(e.file_path);
116  } catch {
117    // a new file: nothing before it
118  }
119  return [{ file: e.file_path, before: clip(before), after: clip(e.content) }];
120}
121
122function clip(text) {
123  const value = String(text ?? "");
124  return value.length > MAX_TEXT ? `${value.slice(0, MAX_TEXT)}\n…` : value;
125}
126
127// A line diff by longest common subsequence, trimmed to the changed region.
128function diff(before, after) {
129  const a = before.split("\n");
130  const b = after.split("\n");
131  if (a.length * b.length > 250_000) {
132    return [...a.map((l) => ["-", l]), ...b.map((l) => ["+", l])].slice(0, MAX_DIFF_LINES);
133  }
134  const lcs = Array.from({ length: a.length + 1 }, () => new Array(b.length + 1).fill(0));
135  for (let i = a.length - 1; i >= 0; i -= 1) {
136    for (let j = b.length - 1; j >= 0; j -= 1) {
137      lcs[i][j] = a[i] === b[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
138    }
139  }
140  const out = [];
141  let i = 0;
142  let j = 0;
143  while (i < a.length || j < b.length) {
144    if (i < a.length && j < b.length && a[i] === b[j]) {
145      out.push([" ", a[i]]);
146      i += 1;
147      j += 1;
148    } else if (j < b.length && (i === a.length || lcs[i][j + 1] >= lcs[i + 1][j])) {
149      out.push(["+", b[j]]);
150      j += 1;
151    } else {
152      out.push(["-", a[i]]);
153      i += 1;
154    }
155  }
156  const first = out.findIndex(([s]) => s !== " ");
157  const last = out.length - 1 - [...out].reverse().findIndex(([s]) => s !== " ");
158  if (first === -1) return [[" ", "(no change)"]];
159  return out.slice(Math.max(0, first - 2), last + 3).slice(0, MAX_DIFF_LINES);
160}
161

1export type ReplayStep = { file: string; before: string; after: string };
2
3export type Replay = { steps: ReplayStep[]; seen: boolean };
4
5declare module "claude-code" {
6  interface PluginState {
7    "replay-theater": { replay: Replay; step: number };
8  }
9}
10