321 lines
9.4 KiB
TypeScript
321 lines
9.4 KiB
TypeScript
import { get, type ByreEvent, type Schemas } from "./api.js";
|
||
import { errorText, h, replace } from "./dom.js";
|
||
import { onEach, pinSnapshot, snapshots, state } from "./state.js";
|
||
|
||
type Changes = Schemas["TaskChanges"];
|
||
type FileChange = Schemas["FileChange"];
|
||
|
||
const statusLetter: Record<FileChange["status"], string> = {
|
||
added: "A",
|
||
modified: "M",
|
||
deleted: "D",
|
||
renamed: "R",
|
||
type_changed: "T",
|
||
};
|
||
|
||
const open = new Set<string>();
|
||
let range: "main" | "turn" = "main";
|
||
let pinRange: "main" | "step" = "step";
|
||
|
||
const emptyText: Record<"main" | "turn" | "step", string> = {
|
||
main: "No changes from the default branch.",
|
||
turn: "No changes this turn.",
|
||
step: "This step changed nothing.",
|
||
};
|
||
|
||
function turnStart(): string | undefined {
|
||
const ev = state.transcript.findLast((e) => e.kind === "user.message" && typeof e.payload["head"] === "string");
|
||
return ev?.payload["head"] as string | undefined;
|
||
}
|
||
|
||
export function mountChanges(root: HTMLElement, compact = false): () => void {
|
||
const head = h("header", { class: "changes-header" });
|
||
const list = h("div", { class: "changes-list" });
|
||
const diffs = new Map<string, string>();
|
||
let changes: Changes | undefined;
|
||
let error = "";
|
||
let loading = false;
|
||
let again = false;
|
||
let timer: number | undefined;
|
||
let disposed = false;
|
||
let loadedSince: string | undefined;
|
||
let target = 0;
|
||
const pinned = () => (compact ? undefined : state.pinned);
|
||
const mode = () => (compact ? "main" : pinned() !== undefined ? pinRange : range);
|
||
|
||
const load = async () => {
|
||
const taskId = state.selectedTaskId;
|
||
if (!taskId) {
|
||
changes = undefined;
|
||
render();
|
||
return;
|
||
}
|
||
const snapshot = pinned();
|
||
const since = snapshot === undefined && mode() === "turn" ? turnStart() : undefined;
|
||
if (snapshot === undefined && mode() === "turn" && !since) {
|
||
changes = undefined;
|
||
error = "No turn has started in this task yet.";
|
||
render();
|
||
return;
|
||
}
|
||
if (loading) {
|
||
again = true;
|
||
return;
|
||
}
|
||
loading = true;
|
||
const started = target;
|
||
renderHead();
|
||
try {
|
||
const query = snapshot === undefined ? { since } : { snapshot, step: pinRange === "step" };
|
||
const fresh = await get("/api/tasks/{taskId}/changes", { path: { taskId }, query });
|
||
if (started === target) {
|
||
loadedSince = since;
|
||
if (fresh.tree !== changes?.tree || fresh.base !== changes?.base) {
|
||
diffs.clear();
|
||
}
|
||
changes = fresh;
|
||
error = "";
|
||
}
|
||
} catch (err) {
|
||
if (started === target) {
|
||
error = errorText(err);
|
||
}
|
||
} finally {
|
||
loading = false;
|
||
}
|
||
if (disposed) {
|
||
return;
|
||
}
|
||
render();
|
||
if (again) {
|
||
again = false;
|
||
void load();
|
||
}
|
||
};
|
||
|
||
const retarget = () => {
|
||
target++;
|
||
clearTimeout(timer);
|
||
changes = undefined;
|
||
diffs.clear();
|
||
error = "";
|
||
render();
|
||
void load();
|
||
};
|
||
|
||
const soon = () => {
|
||
clearTimeout(timer);
|
||
timer = setTimeout(() => void load(), 1500);
|
||
};
|
||
|
||
const toggle = (): HTMLElement | null => {
|
||
if (compact) {
|
||
return null;
|
||
}
|
||
if (pinned() !== undefined) {
|
||
const button = (r: typeof pinRange, label: string) => {
|
||
const b = h("button", { type: "button", class: r === pinRange ? "active" : "" }, label);
|
||
b.onclick = () => {
|
||
if (pinRange === r) {
|
||
return;
|
||
}
|
||
pinRange = r;
|
||
retarget();
|
||
};
|
||
return b;
|
||
};
|
||
const live = h("button", { type: "button", title: "Back to the live worktree" }, "Live");
|
||
live.onclick = () => pinSnapshot(undefined);
|
||
return h("nav", { class: "range-tabs" }, button("main", "Since main"), button("step", "This step"), live);
|
||
}
|
||
const button = (r: typeof range, label: string) => {
|
||
const b = h("button", { type: "button", class: r === range ? "active" : "" }, label);
|
||
b.onclick = () => {
|
||
if (range === r) {
|
||
return;
|
||
}
|
||
range = r;
|
||
retarget();
|
||
};
|
||
return b;
|
||
};
|
||
return h("nav", { class: "range-tabs" }, button("main", "Since main"), button("turn", "This turn"));
|
||
};
|
||
|
||
const where = (): HTMLElement | null => {
|
||
const n = pinned();
|
||
if (n === undefined) {
|
||
return null;
|
||
}
|
||
const snaps = snapshots();
|
||
const snap = snaps.find((s) => s.n === n);
|
||
const step = (to: number, label: string) => {
|
||
const b = h("button", { type: "button", class: "snap-step", disabled: !snaps.some((s) => s.n === to) }, label);
|
||
b.onclick = () => pinSnapshot(to);
|
||
return b;
|
||
};
|
||
return h(
|
||
"div",
|
||
{ class: "snap-where" },
|
||
`snapshot ${n}`,
|
||
snap ? ` · ${snap.trigger} · ${new Date(snap.created_at).toLocaleTimeString([], { hour12: false })}` : "",
|
||
" · ",
|
||
step(n - 1, `← #${n - 1}`),
|
||
" ",
|
||
step(n + 1, `#${n + 1} →`),
|
||
);
|
||
};
|
||
|
||
const renderHead = () => {
|
||
if (!changes) {
|
||
replace(
|
||
head,
|
||
h("div", { class: "changes-where" }, where(), h("span", { class: "changes-summary" }, error || (state.selectedTaskId ? "Loading changes…" : "No task selected."))),
|
||
toggle(),
|
||
);
|
||
return;
|
||
}
|
||
const adds = changes.files.reduce((n, f) => n + f.additions, 0);
|
||
const dels = changes.files.reduce((n, f) => n + f.deletions, 0);
|
||
replace(
|
||
head,
|
||
h(
|
||
"div",
|
||
{ class: "changes-where" },
|
||
where(),
|
||
h(
|
||
"span",
|
||
{ class: "changes-summary" },
|
||
`${changes.files.length} ${changes.files.length === 1 ? "file" : "files"} `,
|
||
h("span", { class: "adds" }, `+${adds}`),
|
||
" ",
|
||
h("span", { class: "dels" }, `−${dels}`),
|
||
h("span", { class: "base", title: changes.base }, ` vs ${changes.base.slice(0, 8)}`),
|
||
error && h("span", { class: "error-text" }, ` ${error}`),
|
||
),
|
||
),
|
||
toggle(),
|
||
);
|
||
};
|
||
|
||
const fileRow = (c: Changes, f: FileChange): HTMLElement => {
|
||
const body = h("div", { class: "file-diff" });
|
||
const details = h(
|
||
"details",
|
||
{ class: `file ${f.status}`, open: open.has(f.path) },
|
||
h(
|
||
"summary",
|
||
{},
|
||
h("span", { class: `status ${f.status}`, title: f.status.replace("_", " ") }, statusLetter[f.status]),
|
||
h("span", { class: "file-path" }, f.old_path ? `${f.old_path} → ${f.path}` : f.path),
|
||
f.binary ? h("span", { class: "binary" }, "binary") : h("span", { class: "counts" }, h("span", { class: "adds" }, `+${f.additions}`), " ", h("span", { class: "dels" }, `−${f.deletions}`)),
|
||
),
|
||
body,
|
||
);
|
||
const show = async () => {
|
||
const cached = diffs.get(f.path);
|
||
if (cached !== undefined) {
|
||
replace(body, renderPatch(cached));
|
||
return;
|
||
}
|
||
replace(body, h("div", { class: "hint" }, "loading…"));
|
||
try {
|
||
const d = await get("/api/tasks/{taskId}/diff", {
|
||
path: { taskId: state.selectedTaskId! },
|
||
query: { base: c.base, tree: c.tree, path: f.path, old_path: f.old_path },
|
||
});
|
||
diffs.set(f.path, d.patch);
|
||
replace(body, renderPatch(d.patch));
|
||
} catch (err) {
|
||
replace(body, h("div", { class: "error-text" }, errorText(err)));
|
||
}
|
||
};
|
||
details.ontoggle = () => {
|
||
if (details.open) {
|
||
open.add(f.path);
|
||
void show();
|
||
} else {
|
||
open.delete(f.path);
|
||
}
|
||
};
|
||
if (details.open) {
|
||
void show();
|
||
}
|
||
return details;
|
||
};
|
||
|
||
const render = () => {
|
||
renderHead();
|
||
if (compact) {
|
||
return;
|
||
}
|
||
if (!state.selectedTaskId) {
|
||
replace(list, h("div", { class: "empty" }, "No task selected."));
|
||
return;
|
||
}
|
||
if (!changes) {
|
||
replace(list, h("div", { class: "empty" }, error ? "" : "Loading…"));
|
||
return;
|
||
}
|
||
if (changes.files.length === 0) {
|
||
replace(list, h("div", { class: "empty" }, emptyText[mode()]));
|
||
return;
|
||
}
|
||
const c = changes;
|
||
const files = [...c.files].sort((a, b) => a.path.localeCompare(b.path));
|
||
replace(list, ...files.map((f) => fileRow(c, f)));
|
||
};
|
||
|
||
const offs = [
|
||
onEach(["selection"], retarget),
|
||
onEach(["pin"], () => {
|
||
if (!compact) {
|
||
retarget();
|
||
}
|
||
}),
|
||
onEach(["transcript"], (fresh) => {
|
||
if (pinned() !== undefined) {
|
||
if ((fresh as ByreEvent[]).some((ev) => ev.kind === "snapshot.created")) {
|
||
renderHead();
|
||
}
|
||
return;
|
||
}
|
||
if (mode() === "turn" && turnStart() !== loadedSince) {
|
||
void load();
|
||
return;
|
||
}
|
||
if ((fresh as ByreEvent[]).some((ev) => ev.kind === "agent.tool_result" || ev.kind === "turn.ended")) {
|
||
soon();
|
||
}
|
||
}),
|
||
];
|
||
|
||
replace(root, compact ? h("div", { class: "changes-view compact" }, head) : h("div", { class: "changes-view" }, head, list));
|
||
render();
|
||
void load();
|
||
return () => {
|
||
disposed = true;
|
||
clearTimeout(timer);
|
||
for (const off of offs) {
|
||
off();
|
||
}
|
||
};
|
||
}
|
||
|
||
function renderPatch(patch: string): HTMLElement {
|
||
const lines = patch.split("\n");
|
||
const start = lines.findIndex((l) => l.startsWith("@@"));
|
||
const body = start === -1 ? [] : lines.slice(start);
|
||
if (body.length === 0) {
|
||
return h("div", { class: "hint" }, "No textual changes.");
|
||
}
|
||
return h(
|
||
"pre",
|
||
{ class: "diff" },
|
||
...body.map((l) => {
|
||
const cls = l.startsWith("@@") ? "hunk" : l.startsWith("+") ? "add" : l.startsWith("-") ? "del" : l.startsWith("\\") ? "meta" : "ctx";
|
||
return h("span", { class: `line ${cls}` }, l || " ");
|
||
}),
|
||
);
|
||
}
|