Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Miguel PalhasandClaude Opus 5
|
9ba1078386 |
@@ -1,79 +0,0 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
import type { BranchInfo } from "../../types.js";
|
||||
import { BranchPicker, type BranchPickerProps } from "./BranchPicker.js";
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
function props(over: Partial<BranchPickerProps> = {}): BranchPickerProps {
|
||||
return {
|
||||
enabled: true,
|
||||
onToggleEnabled: vi.fn(),
|
||||
hint: null,
|
||||
baseRepo: "/repo",
|
||||
mode: "new",
|
||||
onModeChange: vi.fn(),
|
||||
newBranch: "",
|
||||
onNewBranchChange: vi.fn(),
|
||||
branches: undefined,
|
||||
existingBranch: "",
|
||||
onExistingBranchChange: vi.fn(),
|
||||
...over,
|
||||
};
|
||||
}
|
||||
|
||||
describe("BranchPicker", () => {
|
||||
it("shows the hint instead of the body while unresolved", () => {
|
||||
render(<BranchPicker {...props({ hint: "Choose a working directory first." })} />);
|
||||
expect(screen.getByText("Choose a working directory first.")).not.toBeNull();
|
||||
expect(screen.queryByText("New branch name")).toBeNull();
|
||||
});
|
||||
|
||||
it("shows the new-branch field by default and the repo line once resolved", () => {
|
||||
render(<BranchPicker {...props()} />);
|
||||
expect(screen.getByText("repo: /repo")).not.toBeNull();
|
||||
expect(screen.getByPlaceholderText("feat/foo")).not.toBeNull();
|
||||
expect(screen.queryByText("Pick a branch")).toBeNull();
|
||||
});
|
||||
|
||||
it("switches to the existing-branch select and reports the mode change", () => {
|
||||
const onModeChange = vi.fn();
|
||||
render(<BranchPicker {...props({ onModeChange })} />);
|
||||
|
||||
fireEvent.click(screen.getByLabelText("Existing branch"));
|
||||
|
||||
expect(onModeChange).toHaveBeenCalledWith("existing");
|
||||
});
|
||||
|
||||
it("disables a branch already held by another worktree, and the main checkout's HEAD", () => {
|
||||
const branches: BranchInfo[] = [
|
||||
{ name: "main", is_head: true },
|
||||
{ name: "feat/a", is_head: false, worktree: "/repos/a" },
|
||||
{ name: "feat/b", is_head: false },
|
||||
];
|
||||
render(<BranchPicker {...props({ mode: "existing", branches })} />);
|
||||
|
||||
const main = screen.getByRole("option", { name: /main — held by the main checkout/ }) as HTMLOptionElement;
|
||||
const a = screen.getByRole("option", { name: /feat\/a — held by \/repos\/a/ }) as HTMLOptionElement;
|
||||
const b = screen.getByRole("option", { name: "feat/b" }) as HTMLOptionElement;
|
||||
expect(main.disabled).toBe(true);
|
||||
expect(a.disabled).toBe(true);
|
||||
expect(b.disabled).toBe(false);
|
||||
});
|
||||
|
||||
it("shows a placeholder option when no local branches were found", () => {
|
||||
render(<BranchPicker {...props({ mode: "existing", branches: [] })} />);
|
||||
expect(screen.getByText("No local branches found.")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("toggles the worktree checkbox", () => {
|
||||
const onToggleEnabled = vi.fn();
|
||||
render(<BranchPicker {...props({ onToggleEnabled })} />);
|
||||
|
||||
fireEvent.click(screen.getByLabelText("Create git worktree"));
|
||||
|
||||
expect(onToggleEnabled).toHaveBeenCalledWith(false);
|
||||
});
|
||||
});
|
||||
@@ -1,119 +0,0 @@
|
||||
// The spawn form's worktree section (#61): create-worktree toggle, then
|
||||
// (once a base repo is known) new-branch-vs-existing-branch, mirroring
|
||||
// spawnForm.ts's `.adv-group`/`.wt-body`/`.wt-mode` markup.
|
||||
|
||||
import type { BranchInfo } from "../../types.js";
|
||||
import type { WorktreeBranchMode } from "../../spawnForm.js";
|
||||
|
||||
export interface BranchPickerProps {
|
||||
enabled: boolean;
|
||||
onToggleEnabled(enabled: boolean): void;
|
||||
/** Status line shown in place of the body — "Checking…", "not a repo",
|
||||
* "choose a directory first". `null` once the body itself can render. */
|
||||
hint: string | null;
|
||||
/** The repo a worktree would branch from, once resolved. */
|
||||
baseRepo: string | null;
|
||||
mode: WorktreeBranchMode;
|
||||
onModeChange(mode: WorktreeBranchMode): void;
|
||||
newBranch: string;
|
||||
onNewBranchChange(value: string): void;
|
||||
/** This cwd's local branches, or `undefined` while unknown/not yet loaded. */
|
||||
branches: BranchInfo[] | undefined;
|
||||
existingBranch: string;
|
||||
onExistingBranchChange(value: string): void;
|
||||
}
|
||||
|
||||
export function BranchPicker(props: BranchPickerProps) {
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col gap-sp-3 border-l-2 pl-sp-3 ${
|
||||
props.enabled ? "border-accent" : "border-border"
|
||||
}`}
|
||||
>
|
||||
<label className="flex cursor-pointer items-center gap-sp-2 text-fs-14 text-ink">
|
||||
<input
|
||||
type="checkbox"
|
||||
data-role="toggle"
|
||||
className="size-[18px] accent-accent"
|
||||
checked={props.enabled}
|
||||
onChange={(e) => props.onToggleEnabled(e.currentTarget.checked)}
|
||||
/>
|
||||
Create git worktree
|
||||
</label>
|
||||
|
||||
{props.hint && <p className="m-0 text-fs-12 text-muted">{props.hint}</p>}
|
||||
|
||||
{props.enabled && !props.hint && (
|
||||
<div className="flex flex-col gap-sp-3">
|
||||
{props.baseRepo && (
|
||||
<p className="m-0 font-mono text-fs-12 text-muted">repo: {props.baseRepo}</p>
|
||||
)}
|
||||
<div role="radiogroup" aria-label="Branch source" className="flex gap-sp-4">
|
||||
<label className="flex cursor-pointer items-center gap-sp-2 text-fs-14 text-ink">
|
||||
<input
|
||||
type="radio"
|
||||
name="worktree_branch_mode"
|
||||
checked={props.mode === "new"}
|
||||
onChange={() => props.onModeChange("new")}
|
||||
/>
|
||||
New branch
|
||||
</label>
|
||||
<label className="flex cursor-pointer items-center gap-sp-2 text-fs-14 text-ink">
|
||||
<input
|
||||
type="radio"
|
||||
name="worktree_branch_mode"
|
||||
checked={props.mode === "existing"}
|
||||
onChange={() => props.onModeChange("existing")}
|
||||
/>
|
||||
Existing branch
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{props.mode === "new" ? (
|
||||
<label className="flex flex-col gap-1 text-fs-12 text-muted">
|
||||
New branch name
|
||||
<input
|
||||
name="worktree_branch"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
placeholder="feat/foo"
|
||||
className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2 font-mono text-fs-15 text-ink"
|
||||
value={props.newBranch}
|
||||
onChange={(e) => props.onNewBranchChange(e.currentTarget.value)}
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<label className="flex flex-col gap-1 text-fs-12 text-muted">
|
||||
Pick a branch
|
||||
<select
|
||||
className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2 font-mono text-fs-15 text-ink"
|
||||
value={props.existingBranch}
|
||||
onChange={(e) => props.onExistingBranchChange(e.currentTarget.value)}
|
||||
>
|
||||
{branchOptions(props.branches)}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function branchOptions(branches: BranchInfo[] | undefined) {
|
||||
if (!branches || branches.length === 0) {
|
||||
return <option value="">No local branches found.</option>;
|
||||
}
|
||||
return branches.map((b) => {
|
||||
// A branch already checked out anywhere stays visible but unpickable —
|
||||
// git refuses a second checkout. That includes the main checkout's own
|
||||
// HEAD, which is commonly `main` and would otherwise be the default pick,
|
||||
// making every existing-branch spawn fail (#54 review).
|
||||
const held = b.worktree ?? (b.is_head ? "the main checkout" : null);
|
||||
return (
|
||||
<option key={b.name} value={b.name} disabled={held !== null} title={held ?? ""}>
|
||||
{held ? `${b.name} — held by ${held}` : b.name}
|
||||
</option>
|
||||
);
|
||||
});
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { useState } from "react";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
import { DirAutocomplete } from "./DirAutocomplete.js";
|
||||
|
||||
vi.mock("../../api.js", () => ({
|
||||
listDir: vi.fn(),
|
||||
}));
|
||||
|
||||
import { listDir } from "../../api.js";
|
||||
|
||||
const mockListDir = vi.mocked(listDir);
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
function Harness({ initial = "" }: { initial?: string }) {
|
||||
const [value, setValue] = useState(initial);
|
||||
return <DirAutocomplete value={value} onChange={setValue} placeholder="cwd" />;
|
||||
}
|
||||
|
||||
// `fireEvent.focus`/`.blur` dispatch the event without moving the browser's
|
||||
// real focus, so `document.activeElement` (which the dropdown's fetch guards
|
||||
// against) never changes — calling the DOM method directly does both.
|
||||
function focus(el: HTMLElement): void {
|
||||
act(() => el.focus());
|
||||
}
|
||||
function blur(el: HTMLElement): void {
|
||||
act(() => el.blur());
|
||||
}
|
||||
|
||||
describe("DirAutocomplete", () => {
|
||||
it("lists entries matching the trailing segment on focus", async () => {
|
||||
mockListDir.mockResolvedValue({ path: "/home/n", entries: ["alpha", "beta"] });
|
||||
render(<Harness initial="/home/n/al" />);
|
||||
|
||||
focus(screen.getByPlaceholderText("cwd"));
|
||||
|
||||
expect(await screen.findByRole("option", { name: "alpha/" })).not.toBeNull();
|
||||
expect(screen.queryByRole("option", { name: "beta/" })).toBeNull();
|
||||
});
|
||||
|
||||
it("Tab commits the highlighted entry and does not close the field", async () => {
|
||||
mockListDir.mockResolvedValue({ path: "/home/n", entries: ["alpha"] });
|
||||
render(<Harness initial="/home/n/a" />);
|
||||
const input = screen.getByPlaceholderText("cwd") as HTMLInputElement;
|
||||
focus(input);
|
||||
await screen.findByRole("option", { name: "alpha/" });
|
||||
|
||||
fireEvent.keyDown(input, { key: "Tab" });
|
||||
|
||||
expect(input.value).toBe("/home/n/alpha/");
|
||||
});
|
||||
|
||||
it("arrows move the highlight and Enter accepts it without submitting", async () => {
|
||||
mockListDir.mockResolvedValue({ path: "/home/n", entries: ["alpha", "beta"] });
|
||||
render(<Harness initial="/home/n/" />);
|
||||
const input = screen.getByPlaceholderText("cwd") as HTMLInputElement;
|
||||
focus(input);
|
||||
await screen.findByRole("option", { name: "alpha/" });
|
||||
|
||||
fireEvent.keyDown(input, { key: "ArrowDown" });
|
||||
const notPrevented = fireEvent.keyDown(input, { key: "Enter" });
|
||||
|
||||
expect(input.value).toBe("/home/n/beta/");
|
||||
expect(notPrevented).toBe(false); // preventDefault called -> event "processed"
|
||||
});
|
||||
|
||||
it("Escape closes the dropdown and stops the key from bubbling", async () => {
|
||||
mockListDir.mockResolvedValue({ path: "/home/n", entries: ["alpha"] });
|
||||
const onKeyDown = vi.fn();
|
||||
render(
|
||||
<div onKeyDown={onKeyDown}>
|
||||
<Harness initial="/home/n/a" />
|
||||
</div>,
|
||||
);
|
||||
const input = screen.getByPlaceholderText("cwd");
|
||||
focus(input);
|
||||
await screen.findByRole("option", { name: "alpha/" });
|
||||
|
||||
fireEvent.keyDown(input, { key: "Escape" });
|
||||
|
||||
await waitFor(() => expect(screen.queryByRole("option")).toBeNull());
|
||||
expect(onKeyDown).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("does not reopen on refocus until the operator types again", async () => {
|
||||
mockListDir.mockResolvedValue({ path: "/home/n", entries: ["alpha"] });
|
||||
render(<Harness initial="/home/n/a" />);
|
||||
const input = screen.getByPlaceholderText("cwd");
|
||||
focus(input);
|
||||
await screen.findByRole("option", { name: "alpha/" });
|
||||
fireEvent.keyDown(input, { key: "Escape" });
|
||||
await waitFor(() => expect(screen.queryByRole("option")).toBeNull());
|
||||
|
||||
blur(input);
|
||||
focus(input);
|
||||
|
||||
await new Promise((r) => setTimeout(r, 10));
|
||||
expect(screen.queryByRole("option")).toBeNull();
|
||||
|
||||
fireEvent.change(input, { target: { value: "/home/n/al" } });
|
||||
expect(await screen.findByRole("option", { name: "alpha/" })).not.toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -1,256 +0,0 @@
|
||||
// React port of ../../dirAutocomplete.ts: shell-style directory autocomplete
|
||||
// on a path <input>. Lists one directory at a time over `GET /api/dirs`,
|
||||
// caches per directory, and filters the trailing path segment locally.
|
||||
//
|
||||
// Keyboard model mirrors `cd dir/sub<tab>`:
|
||||
// Tab commit the highlighted entry and let focus move on; with nothing
|
||||
// highlighted, plain tab navigation
|
||||
// ↑/↓ move the highlight
|
||||
// Enter accept the highlighted entry (and suppress form submit); with
|
||||
// nothing highlighted, bubble to the form unprevented
|
||||
// Esc close the dropdown, refocus the input, and stop the key from
|
||||
// bubbling — so dismissing the popup can't also close a parent modal
|
||||
//
|
||||
// Once dismissed (Esc or blur) the popup stays closed until the operator
|
||||
// types again — refocusing alone doesn't reopen it.
|
||||
|
||||
import { useCallback, useEffect, useRef, useState, type InputHTMLAttributes, type Ref } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
import { listDir } from "../../api.js";
|
||||
import { splitPath } from "../../paths.js";
|
||||
|
||||
/** Most entries rendered at once — a long list is unhelpful and slow. */
|
||||
const MAX_VISIBLE = 60;
|
||||
/** Debounce before a network fetch when the input crosses into a new directory. */
|
||||
const FETCH_DEBOUNCE_MS = 90;
|
||||
|
||||
export interface DirAutocompleteProps
|
||||
extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
|
||||
value: string;
|
||||
onChange(value: string): void;
|
||||
/** Access to the underlying `<input>` — e.g. to focus/select it. */
|
||||
inputRef?: Ref<HTMLInputElement>;
|
||||
}
|
||||
|
||||
function assignRef(ref: Ref<HTMLInputElement> | undefined, el: HTMLInputElement | null): void {
|
||||
if (!ref) return;
|
||||
if (typeof ref === "function") ref(el);
|
||||
else (ref as { current: HTMLInputElement | null }).current = el;
|
||||
}
|
||||
|
||||
export function DirAutocomplete({ value, onChange, inputRef, ...inputProps }: DirAutocompleteProps) {
|
||||
const localRef = useRef<HTMLInputElement | null>(null);
|
||||
const cache = useRef(new Map<string, string[]>());
|
||||
const fetchSeq = useRef(0);
|
||||
const debounceTimer = useRef<number | undefined>(undefined);
|
||||
const dismissedRef = useRef(false);
|
||||
|
||||
const [filtered, setFiltered] = useState<string[]>([]);
|
||||
const [highlight, setHighlight] = useState(-1);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [rect, setRect] = useState<{ left: number; top: number; width: number } | null>(null);
|
||||
|
||||
const setInputRef = useCallback(
|
||||
(el: HTMLInputElement | null) => {
|
||||
localRef.current = el;
|
||||
assignRef(inputRef, el);
|
||||
},
|
||||
[inputRef],
|
||||
);
|
||||
|
||||
const reposition = useCallback(() => {
|
||||
const el = localRef.current;
|
||||
if (!el) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
setRect({ left: r.left, top: r.bottom + 4, width: r.width });
|
||||
}, []);
|
||||
|
||||
const close = useCallback(() => {
|
||||
setOpen(false);
|
||||
setFiltered([]);
|
||||
setHighlight(-1);
|
||||
}, []);
|
||||
|
||||
const dismiss = useCallback(() => {
|
||||
dismissedRef.current = true;
|
||||
close();
|
||||
}, [close]);
|
||||
|
||||
const applyFilter = useCallback(
|
||||
(entries: string[], prefix: string) => {
|
||||
// A fetch can outlive the dismissal it was meant to serve (Tab-commit
|
||||
// re-arms a refresh, then blur dismisses 120ms later). Showing it now
|
||||
// would anchor a dropdown under an unfocused input nothing closes.
|
||||
if (dismissedRef.current || document.activeElement !== localRef.current) {
|
||||
close();
|
||||
return;
|
||||
}
|
||||
const lower = prefix.toLowerCase();
|
||||
const next = entries.filter((e) => e.toLowerCase().startsWith(lower));
|
||||
setFiltered(next);
|
||||
setHighlight(next.length > 0 ? 0 : -1);
|
||||
if (next.length === 0) {
|
||||
close();
|
||||
return;
|
||||
}
|
||||
setOpen(true);
|
||||
reposition();
|
||||
},
|
||||
[close, reposition],
|
||||
);
|
||||
|
||||
const refresh = useCallback(
|
||||
(raw: string) => {
|
||||
const { dir, prefix } = splitPath(raw);
|
||||
const cached = cache.current.get(dir);
|
||||
if (cached) {
|
||||
applyFilter(cached, prefix);
|
||||
return;
|
||||
}
|
||||
const seq = ++fetchSeq.current;
|
||||
listDir(dir)
|
||||
.then((listing) => {
|
||||
cache.current.set(dir, listing.entries);
|
||||
if (seq !== fetchSeq.current) return; // a newer fetch superseded this one
|
||||
const cur = splitPath(localRef.current?.value ?? raw);
|
||||
if (cur.dir === dir) applyFilter(listing.entries, cur.prefix);
|
||||
})
|
||||
.catch(() => {
|
||||
if (seq === fetchSeq.current) close();
|
||||
});
|
||||
},
|
||||
[applyFilter, close],
|
||||
);
|
||||
|
||||
const scheduleRefresh = useCallback(
|
||||
(raw: string) => {
|
||||
window.clearTimeout(debounceTimer.current);
|
||||
debounceTimer.current = window.setTimeout(() => refresh(raw), FETCH_DEBOUNCE_MS);
|
||||
},
|
||||
[refresh],
|
||||
);
|
||||
|
||||
/** Complete `name` as the next path segment and append `/` so the child
|
||||
* directory's listing loads on the next interaction — the drill-in
|
||||
* gesture. Unlike `accept`, doesn't steal focus: Tab uses this to commit
|
||||
* and move to the next field in one gesture. */
|
||||
const commit = useCallback(
|
||||
(name: string) => {
|
||||
const { dir } = splitPath(value);
|
||||
onChange(`${dir}${name}/`);
|
||||
},
|
||||
[value, onChange],
|
||||
);
|
||||
|
||||
const accept = useCallback(
|
||||
(name: string) => {
|
||||
commit(name);
|
||||
localRef.current?.focus();
|
||||
},
|
||||
[commit],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
window.addEventListener("scroll", reposition, true);
|
||||
window.addEventListener("resize", reposition);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", reposition, true);
|
||||
window.removeEventListener("resize", reposition);
|
||||
};
|
||||
}, [open, reposition]);
|
||||
|
||||
useEffect(() => () => window.clearTimeout(debounceTimer.current), []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
{...inputProps}
|
||||
ref={setInputRef}
|
||||
value={value}
|
||||
autoComplete="off"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
aria-autocomplete="list"
|
||||
onChange={(e) => {
|
||||
dismissedRef.current = false;
|
||||
const next = e.currentTarget.value;
|
||||
onChange(next);
|
||||
scheduleRefresh(next);
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
inputProps.onFocus?.(e);
|
||||
if (dismissedRef.current) return;
|
||||
refresh(value);
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
inputProps.onBlur?.(e);
|
||||
// Delay so a dropdown mousedown can complete first.
|
||||
window.setTimeout(dismiss, 120);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
inputProps.onKeyDown?.(e);
|
||||
if (e.defaultPrevented) return;
|
||||
if (e.key === "Escape") {
|
||||
if (open) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dismiss();
|
||||
localRef.current?.focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (e.key === "Tab") {
|
||||
if (!open || highlight < 0 || highlight >= filtered.length) return; // plain tab navigation
|
||||
commit(filtered[highlight]); // no preventDefault — focus moves to the next field
|
||||
return;
|
||||
}
|
||||
if (!open) return;
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
setHighlight((h) => Math.min(h + 1, filtered.length - 1));
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
setHighlight((h) => Math.max(h - 1, 0));
|
||||
} else if (e.key === "Enter" && highlight >= 0 && highlight < filtered.length) {
|
||||
e.preventDefault(); // accept the entry instead of submitting the form
|
||||
accept(filtered[highlight]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{open &&
|
||||
rect &&
|
||||
createPortal(
|
||||
<ul
|
||||
role="listbox"
|
||||
className="dir-ac fixed z-modal max-h-[240px] overflow-y-auto rounded-r-2 border border-border-strong bg-surface py-sp-1 font-mono shadow-2"
|
||||
style={{ left: rect.left, top: rect.top, width: rect.width }}
|
||||
>
|
||||
{filtered.slice(0, MAX_VISIBLE).map((name, i) => (
|
||||
<li
|
||||
key={name}
|
||||
role="option"
|
||||
aria-selected={i === highlight}
|
||||
className={`cursor-pointer truncate px-sp-3 py-1 text-fs-12 text-ink ${
|
||||
i === highlight ? "bg-accent-tint" : ""
|
||||
}`}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault(); // accept before the input's blur fires
|
||||
accept(name);
|
||||
}}
|
||||
>
|
||||
{name}/
|
||||
</li>
|
||||
))}
|
||||
{filtered.length > MAX_VISIBLE && (
|
||||
<li className="px-sp-3 py-1 text-fs-11 text-faint">
|
||||
+{filtered.length - MAX_VISIBLE} more — keep typing to narrow
|
||||
</li>
|
||||
)}
|
||||
</ul>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,383 +0,0 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
import type { BranchInfo, DaemonInfo, Project, Session, SpawnPreset } from "../../types.js";
|
||||
import { SpawnForm } from "./SpawnForm.js";
|
||||
|
||||
vi.mock("../../api.js", () => ({
|
||||
createSession: vi.fn(),
|
||||
fetchBranches: vi.fn(),
|
||||
fetchNames: vi.fn(),
|
||||
getDaemonInfo: vi.fn(),
|
||||
gitRoot: vi.fn(),
|
||||
listDir: vi.fn(),
|
||||
projects: vi.fn(),
|
||||
}));
|
||||
|
||||
import {
|
||||
createSession,
|
||||
fetchBranches,
|
||||
fetchNames,
|
||||
getDaemonInfo,
|
||||
gitRoot,
|
||||
listDir,
|
||||
projects as fetchProjects,
|
||||
} from "../../api.js";
|
||||
|
||||
const mockCreateSession = vi.mocked(createSession);
|
||||
const mockFetchBranches = vi.mocked(fetchBranches);
|
||||
const mockFetchNames = vi.mocked(fetchNames);
|
||||
const mockGetDaemonInfo = vi.mocked(getDaemonInfo);
|
||||
const mockGitRoot = vi.mocked(gitRoot);
|
||||
const mockListDir = vi.mocked(listDir);
|
||||
const mockFetchProjects = vi.mocked(fetchProjects);
|
||||
|
||||
const presets: SpawnPreset[] = [
|
||||
{ id: "claude", label: "Claude", command: "claude" },
|
||||
{ id: "opencode", label: "opencode", command: "opencode" },
|
||||
{ id: "zsh", label: "Shell", command: "zsh" },
|
||||
{ id: "custom", label: "Custom…", command: "" },
|
||||
];
|
||||
|
||||
function info(over: Partial<DaemonInfo> = {}): DaemonInfo {
|
||||
return { hostname: "h", version: "1", home_dir: "/home/n", presets, ...over };
|
||||
}
|
||||
|
||||
function project(over: Partial<Project> = {}): Project {
|
||||
return { path: "/repos/p", name: "p", last_activity: new Date().toISOString(), ...over };
|
||||
}
|
||||
|
||||
function session(over: Partial<Session> = {}): Session {
|
||||
return {
|
||||
id: "s1",
|
||||
cwd: "/repos/p",
|
||||
command: "claude",
|
||||
env: {},
|
||||
metadata: {},
|
||||
status: "Running",
|
||||
created_at: "2026-01-01T00:00:00Z",
|
||||
...over,
|
||||
};
|
||||
}
|
||||
|
||||
/** Defaults every test starts from: one known project, no branches, a fresh
|
||||
* generated handle. Individual tests override what they care about. */
|
||||
function stub(over: { projects?: Project[]; info?: DaemonInfo; names?: string[]; branches?: BranchInfo[] } = {}) {
|
||||
mockGetDaemonInfo.mockResolvedValue(over.info ?? info());
|
||||
mockFetchProjects.mockResolvedValue(over.projects ?? [project()]);
|
||||
mockFetchNames.mockResolvedValue({ names: over.names ?? ["amber-fox"] });
|
||||
mockFetchBranches.mockResolvedValue(over.branches ?? []);
|
||||
mockGitRoot.mockResolvedValue({});
|
||||
mockListDir.mockResolvedValue({ path: "", entries: [] });
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
async function settle() {
|
||||
await waitFor(() => expect(screen.queryByText("Loading projects…")).toBeNull());
|
||||
}
|
||||
|
||||
/** Everything worktree/name/structured-related lives behind the "Advanced"
|
||||
* disclosure, collapsed by default (#93) — mirrors the vanilla form exactly. */
|
||||
function openAdvanced() {
|
||||
fireEvent.click(screen.getByRole("button", { name: /Advanced/ }));
|
||||
}
|
||||
|
||||
describe("SpawnForm harness picker", () => {
|
||||
it("selects the first non-custom preset by default and reveals the custom input on Custom…", async () => {
|
||||
stub();
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
|
||||
expect(screen.getByRole("button", { name: /^Claude/ }).className).toContain("border-accent");
|
||||
fireEvent.click(screen.getByRole("button", { name: "Custom…" }));
|
||||
|
||||
expect(screen.getByPlaceholderText("bash -l").hidden).toBe(false);
|
||||
});
|
||||
|
||||
it("resolves a seeded command to its matching preset", async () => {
|
||||
stub();
|
||||
render(<SpawnForm seed={{ command: "opencode" }} onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
|
||||
const opencode = screen.getByRole("button", { name: /opencode/ });
|
||||
expect(opencode.className).toContain("border-accent");
|
||||
});
|
||||
|
||||
it("drops an unmatched seeded command into the custom field", async () => {
|
||||
stub();
|
||||
render(<SpawnForm seed={{ command: "hx src/" }} onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
|
||||
const raw = screen.getByPlaceholderText("bash -l") as HTMLInputElement;
|
||||
expect(raw.hidden).toBe(false);
|
||||
expect(raw.value).toBe("hx src/");
|
||||
});
|
||||
});
|
||||
|
||||
describe("SpawnForm project picker", () => {
|
||||
it("lists discovered projects and reveals the worktree step on pick", async () => {
|
||||
stub({ projects: [project({ path: "/repos/a", name: "a" }), project({ path: "/repos/b", name: "b" })] });
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
openAdvanced();
|
||||
|
||||
expect(screen.queryByText("Worktree")).toBeNull();
|
||||
fireEvent.click(screen.getByText("a"));
|
||||
|
||||
expect(screen.getByText("Worktree")).not.toBeNull();
|
||||
expect(screen.getByText("+ new").closest("button")?.getAttribute("data-active")).toBe("true");
|
||||
});
|
||||
|
||||
it("filters the project grid by name", async () => {
|
||||
stub({ projects: [project({ path: "/repos/alpha", name: "alpha" }), project({ path: "/repos/beta", name: "beta" })] });
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
|
||||
fireEvent.change(screen.getByPlaceholderText("Filter projects…"), { target: { value: "alp" } });
|
||||
|
||||
expect(screen.getByText("alpha")).not.toBeNull();
|
||||
expect(screen.queryByText("beta")).toBeNull();
|
||||
});
|
||||
|
||||
it("falls back to the raw directory input when no projects are discovered", async () => {
|
||||
stub({ projects: [] });
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
|
||||
expect((screen.getByPlaceholderText("/home/user/project") as HTMLInputElement).value).toBe("/home/n");
|
||||
});
|
||||
|
||||
it("Other directory… clears the picker and opens the raw input", async () => {
|
||||
stub({ projects: [project({ path: "/repos/a", name: "a" })] });
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
fireEvent.click(screen.getByText("a"));
|
||||
expect(screen.getByText("a").closest("button")?.getAttribute("data-active")).toBe("true");
|
||||
|
||||
fireEvent.click(screen.getByText("Other directory…"));
|
||||
|
||||
expect(screen.getByText("a").closest("button")?.getAttribute("data-active")).toBeNull();
|
||||
expect((screen.getByPlaceholderText("/home/user/project") as HTMLInputElement).value).toBe("/repos/a");
|
||||
});
|
||||
});
|
||||
|
||||
describe("SpawnForm worktree defaults", () => {
|
||||
it("defaults the toggle on for a picked project and infers the repo without a gitroot probe", async () => {
|
||||
stub({ projects: [project({ path: "/repos/a", name: "a" })] });
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
openAdvanced();
|
||||
|
||||
fireEvent.click(screen.getByText("a"));
|
||||
|
||||
expect(screen.getByText("repo: /repos/a")).not.toBeNull();
|
||||
expect(mockGitRoot).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("defaults the toggle off for a project that is itself a worktree (#91)", async () => {
|
||||
stub({
|
||||
projects: [
|
||||
project({ path: "/repos/main", name: "main" }),
|
||||
project({ path: "/repos/wt", name: "wt", is_worktree: true, base_repo: "/repos/main" }),
|
||||
],
|
||||
});
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
openAdvanced();
|
||||
|
||||
fireEvent.click(screen.getByText("main"));
|
||||
fireEvent.click(screen.getByText("wt"));
|
||||
|
||||
expect((screen.getByLabelText("Create git worktree") as HTMLInputElement).checked).toBe(false);
|
||||
});
|
||||
|
||||
it("still probes gitroot for a free-text directory", async () => {
|
||||
stub();
|
||||
mockGitRoot.mockResolvedValue({ root: "/repos/found" });
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
openAdvanced();
|
||||
fireEvent.click(screen.getByText("Other directory…"));
|
||||
|
||||
fireEvent.change(screen.getByPlaceholderText("/home/user/project"), {
|
||||
target: { value: "/repos/found/sub" },
|
||||
});
|
||||
|
||||
await waitFor(() => expect(mockGitRoot).toHaveBeenCalledWith("/repos/found/sub"));
|
||||
expect(await screen.findByText("repo: /repos/found")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("populates existing branches, disabling the one held by another worktree", async () => {
|
||||
stub({
|
||||
projects: [project({ path: "/repos/a", name: "a" })],
|
||||
branches: [
|
||||
{ name: "main", is_head: true },
|
||||
{ name: "feat/x", is_head: false, worktree: "/repos/other" },
|
||||
{ name: "feat/y", is_head: false },
|
||||
],
|
||||
});
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
openAdvanced();
|
||||
fireEvent.click(screen.getByText("a"));
|
||||
|
||||
fireEvent.click(screen.getByLabelText("Existing branch"));
|
||||
|
||||
const y = await screen.findByRole("option", { name: "feat/y" });
|
||||
expect((y as HTMLOptionElement).disabled).toBe(false);
|
||||
expect((screen.getByRole("option", { name: /main — held by the main checkout/ }) as HTMLOptionElement).disabled).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it("submits the first pickable branch when the operator never opens the select", async () => {
|
||||
stub({
|
||||
projects: [project({ path: "/repos/a", name: "a" })],
|
||||
branches: [
|
||||
{ name: "main", is_head: true },
|
||||
{ name: "feat/y", is_head: false },
|
||||
],
|
||||
});
|
||||
mockCreateSession.mockResolvedValue(session());
|
||||
const onSuccess = vi.fn();
|
||||
render(<SpawnForm onSuccess={onSuccess} />);
|
||||
await settle();
|
||||
openAdvanced();
|
||||
fireEvent.click(screen.getByText("a"));
|
||||
fireEvent.click(screen.getByLabelText("Existing branch"));
|
||||
await screen.findByRole("option", { name: "feat/y" });
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Spawn" }));
|
||||
|
||||
await waitFor(() => expect(onSuccess).toHaveBeenCalled());
|
||||
expect(mockCreateSession).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ worktree: expect.objectContaining({ branch: "feat/y", create_branch: false }) }),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("SpawnForm structured view", () => {
|
||||
it("defaults on for a resolved Claude Code command and off for an unsupported one", async () => {
|
||||
stub();
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
openAdvanced();
|
||||
|
||||
expect((screen.getByLabelText("Structured view") as HTMLInputElement).checked).toBe(true);
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /^Shell/ }));
|
||||
|
||||
expect(screen.queryByLabelText("Structured view")).toBeNull();
|
||||
});
|
||||
|
||||
it("keeps an unchecked box unchecked across a command change between two supported tools", async () => {
|
||||
stub();
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
openAdvanced();
|
||||
fireEvent.click(screen.getByLabelText("Structured view"));
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /opencode/ }));
|
||||
fireEvent.click(screen.getByRole("button", { name: /^Claude/ }));
|
||||
|
||||
expect((screen.getByLabelText("Structured view") as HTMLInputElement).checked).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("SpawnForm submit", () => {
|
||||
it("builds and posts the request, reporting the created session", async () => {
|
||||
stub({ projects: [project({ path: "/repos/a", name: "a" })] });
|
||||
const created = session();
|
||||
mockCreateSession.mockResolvedValue(created);
|
||||
const onSuccess = vi.fn();
|
||||
render(<SpawnForm onSuccess={onSuccess} />);
|
||||
await settle();
|
||||
fireEvent.click(screen.getByText("a"));
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Spawn" }));
|
||||
|
||||
await waitFor(() => expect(onSuccess).toHaveBeenCalledWith(created));
|
||||
expect(mockCreateSession).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ cwd: "/repos/a", command: "claude" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("shows the daemon's rejection and leaves the form open", async () => {
|
||||
stub({ projects: [project({ path: "/repos/a", name: "a" })] });
|
||||
mockCreateSession.mockRejectedValue(new Error("cwd is not a directory"));
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
fireEvent.click(screen.getByText("a"));
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Spawn" }));
|
||||
|
||||
expect(await screen.findByText("cwd is not a directory")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("rejects an existing-branch worktree with nothing picked", async () => {
|
||||
stub({ projects: [project({ path: "/repos/a", name: "a" })], branches: [] });
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
openAdvanced();
|
||||
fireEvent.click(screen.getByText("a"));
|
||||
fireEvent.click(screen.getByLabelText("Existing branch"));
|
||||
await screen.findByText("No local branches found.");
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Spawn" }));
|
||||
|
||||
expect(await screen.findByText("Pick an existing branch.")).not.toBeNull();
|
||||
expect(mockCreateSession).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("SpawnForm Enter-to-submit (#97)", () => {
|
||||
it("submits from the session name field", async () => {
|
||||
stub({ projects: [project({ path: "/repos/a", name: "a" })] });
|
||||
mockCreateSession.mockResolvedValue(session());
|
||||
const onSuccess = vi.fn();
|
||||
render(<SpawnForm onSuccess={onSuccess} />);
|
||||
await settle();
|
||||
fireEvent.click(screen.getByText("a"));
|
||||
openAdvanced();
|
||||
|
||||
fireEvent.keyDown(screen.getByPlaceholderText("named after your first prompt"), { key: "Enter" });
|
||||
|
||||
await waitFor(() => expect(onSuccess).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it("first Enter picks a not-yet-active project box, the second submits", async () => {
|
||||
stub({ projects: [project({ path: "/repos/a", name: "a" }), project({ path: "/repos/b", name: "b" })] });
|
||||
mockCreateSession.mockResolvedValue(session());
|
||||
const onSuccess = vi.fn();
|
||||
render(<SpawnForm onSuccess={onSuccess} />);
|
||||
await settle();
|
||||
|
||||
const boxB = screen.getByText("b").closest("button")!;
|
||||
fireEvent.keyDown(boxB, { key: "Enter" });
|
||||
expect(onSuccess).not.toHaveBeenCalled();
|
||||
expect(boxB.getAttribute("data-active")).toBe("true");
|
||||
|
||||
fireEvent.keyDown(boxB, { key: "Enter" });
|
||||
await waitFor(() => expect(onSuccess).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it("toggles the worktree checkbox on Enter instead of submitting", async () => {
|
||||
stub({ projects: [project({ path: "/repos/a", name: "a" })] });
|
||||
render(<SpawnForm onSuccess={vi.fn()} />);
|
||||
await settle();
|
||||
openAdvanced();
|
||||
fireEvent.click(screen.getByText("a"));
|
||||
const checkbox = screen.getByLabelText("Create git worktree") as HTMLInputElement;
|
||||
expect(checkbox.checked).toBe(true);
|
||||
|
||||
fireEvent.keyDown(checkbox, { key: "Enter" });
|
||||
|
||||
expect(checkbox.checked).toBe(false);
|
||||
expect(mockCreateSession).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -1,853 +0,0 @@
|
||||
// React port of ../../spawnForm.ts: the spawn form itself — preset tiles,
|
||||
// two-step project picker, name, structured-view checkbox, worktree. Mounted
|
||||
// inside SpawnModal.
|
||||
//
|
||||
// Working-directory picker (#95), unchanged from the vanilla form:
|
||||
// 1. Step one is one box per repository (name, then its parent directory).
|
||||
// A worktree is a box only when its main checkout is missing from the
|
||||
// scan.
|
||||
// 2. The filter keeps a repository when the query matches it or any of its
|
||||
// worktrees.
|
||||
// 3. Picking a box reveals step two: "+ new", then that repository's
|
||||
// worktrees newest-first. "Other directory…" clears both steps.
|
||||
// 4. "+ new" is the default selection — except on a box that is itself a
|
||||
// linked worktree, which defaults to that worktree.
|
||||
// 5. "+ new" means create: cwd is the repository, create-worktree on. An
|
||||
// existing worktree means run in it: cwd is that worktree, create-worktree
|
||||
// off (the daemon never adopts, docs/WORKTREES.md).
|
||||
// 6. Neither step probes /api/gitroot; only the free-text hatch does.
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import {
|
||||
createSession,
|
||||
fetchBranches,
|
||||
fetchNames,
|
||||
getDaemonInfo,
|
||||
gitRoot,
|
||||
projects as fetchProjects,
|
||||
} from "../../api.js";
|
||||
import { parentDir } from "../../paths.js";
|
||||
import {
|
||||
filterProjects,
|
||||
groupProjects,
|
||||
isStale,
|
||||
sortProjects,
|
||||
type ProjectGroup,
|
||||
} from "../../projectList.js";
|
||||
import {
|
||||
buildSpawnRequest,
|
||||
FALLBACK_PRESETS,
|
||||
supportsStructuredView,
|
||||
type SpawnFormSeed,
|
||||
type SpawnFormValues,
|
||||
type WorktreeBranchMode,
|
||||
} from "../../spawnForm.js";
|
||||
import { splitCommand, toolIconSvg, TOOL_LABELS } from "../../toolIcon.js";
|
||||
import { abbreviateCwd } from "../../types.js";
|
||||
import type { BranchInfo, Project, Session, SpawnPreset } from "../../types.js";
|
||||
import { BranchPicker } from "./BranchPicker.js";
|
||||
import { DirAutocomplete } from "./DirAutocomplete.js";
|
||||
|
||||
/** Quiet period after raw-path typing before `/api/gitroot` fires (#74). Must
|
||||
* stay equal to `GITROOT_PROBE_DEBOUNCE_MS` in crates/maestro-tui/src/draft.rs
|
||||
* and to ../../spawnForm.ts's own constant, so every client debounces alike. */
|
||||
const GITROOT_PROBE_DEBOUNCE_MS = 250;
|
||||
|
||||
/** "new" (create a worktree) or the path of an existing worktree to run in. */
|
||||
type WorktreeChoice = "new" | string;
|
||||
|
||||
type BaseRepoResolution =
|
||||
| { kind: "disabled" }
|
||||
| { kind: "no-cwd" }
|
||||
| { kind: "found"; repo: string }
|
||||
| { kind: "probe" };
|
||||
|
||||
function resolveBaseRepoFor(cwd: string, wtEnabled: boolean, discovered: Project[]): BaseRepoResolution {
|
||||
if (!wtEnabled) return { kind: "disabled" };
|
||||
if (!cwd) return { kind: "no-cwd" };
|
||||
const project = discovered.find((p) => p.path === cwd);
|
||||
if (project) return { kind: "found", repo: project.base_repo ?? project.path };
|
||||
return { kind: "probe" };
|
||||
}
|
||||
|
||||
/** Every worktree of a group, including the group's own box when the scan
|
||||
* found no main checkout to nest it under. */
|
||||
function worktreesOf(group: ProjectGroup): Project[] {
|
||||
return [group.main, ...group.worktrees].filter((p) => p.is_worktree);
|
||||
}
|
||||
|
||||
/** Resolve a preset id to a tool icon id — the preset's command is the source
|
||||
* of truth, the same way the sidebar derives one. The "Custom…" preset (empty
|
||||
* command) has no tool to show. */
|
||||
function presetToolId(p: SpawnPreset): string | null {
|
||||
if (!p.command) return null;
|
||||
return splitCommand(p.command).tool;
|
||||
}
|
||||
|
||||
function harnessIcon(toolId: string): string | null {
|
||||
const small = toolIconSvg(toolId);
|
||||
if (!small) return null;
|
||||
// toolIconSvg renders at 13x13 (viewBox 0 0 16 16) for the sidebar; the
|
||||
// harness card wants the same mark at 24x24 so it breathes.
|
||||
return small.replace(/width="13"/g, 'width="24"').replace(/height="13"/g, 'height="24"');
|
||||
}
|
||||
|
||||
function pickerButtonClass(active: boolean): string {
|
||||
return `flex min-h-[32px] items-baseline justify-between gap-sp-3 rounded-r-2 border px-sp-3 py-1.5 text-left font-mono ${
|
||||
active ? "border-accent bg-accent-tint" : "border-border bg-surface-2 hover:border-border-strong"
|
||||
}`;
|
||||
}
|
||||
|
||||
export interface SpawnFormProps {
|
||||
seed?: SpawnFormSeed;
|
||||
/** Fired whenever any value changes, once the form's initial seed settles. */
|
||||
onChange?(values: SpawnFormValues): void;
|
||||
onSuccess(session: Session): void;
|
||||
}
|
||||
|
||||
export function SpawnForm({ seed, onChange, onSuccess }: SpawnFormProps) {
|
||||
const prefill = useRef(seed ?? {}).current;
|
||||
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
const filterInputRef = useRef<HTMLInputElement>(null);
|
||||
const customCommandRef = useRef<HTMLInputElement>(null);
|
||||
const rawCwdRef = useRef<HTMLInputElement>(null);
|
||||
const destroyedRef = useRef(false);
|
||||
useEffect(() => () => {
|
||||
destroyedRef.current = true;
|
||||
}, []);
|
||||
|
||||
// ---- harness / command -------------------------------------------------
|
||||
const [homeDir, setHomeDir] = useState("");
|
||||
const [infoLoading, setInfoLoading] = useState(true);
|
||||
const [presets, setPresets] = useState<SpawnPreset[]>(FALLBACK_PRESETS);
|
||||
const [selectedPresetId, setSelectedPresetId] = useState("");
|
||||
const [command, setCommand] = useState("");
|
||||
const [customCommand, setCustomCommand] = useState("");
|
||||
const [commandTouched, setCommandTouched] = useState(false);
|
||||
const [structuredView, setStructuredView] = useState(false);
|
||||
const [structuredTouched, setStructuredTouched] = useState(false);
|
||||
|
||||
const activePreset = useMemo(() => presets.find((p) => p.id === selectedPresetId), [presets, selectedPresetId]);
|
||||
const isCustomSelected = !activePreset || activePreset.command === "";
|
||||
|
||||
useEffect(() => {
|
||||
if (commandTouched && isCustomSelected) customCommandRef.current?.focus();
|
||||
}, [isCustomSelected, commandTouched]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
getDaemonInfo()
|
||||
.then((info) => {
|
||||
if (cancelled) return;
|
||||
setHomeDir(info.home_dir ?? "");
|
||||
if (info.presets?.length) setPresets(info.presets);
|
||||
})
|
||||
.catch(() => {
|
||||
// keep fallbacks
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setInfoLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Pick a sensible starting command whenever the preset list changes and the
|
||||
// operator hasn't touched it yet: a seed's command (matched to a preset, or
|
||||
// dropped into custom), else the first non-custom preset.
|
||||
useEffect(() => {
|
||||
if (commandTouched) return;
|
||||
const wanted = prefill.command;
|
||||
if (wanted) {
|
||||
const match = presets.find((p) => p.command === wanted && p.command !== "");
|
||||
if (match) {
|
||||
setSelectedPresetId(match.id);
|
||||
setCommand(match.command);
|
||||
return;
|
||||
}
|
||||
const custom = presets.find((p) => p.command === "");
|
||||
setCustomCommand(wanted);
|
||||
setSelectedPresetId(custom ? custom.id : "custom");
|
||||
setCommand(wanted);
|
||||
return;
|
||||
}
|
||||
const first = presets.find((p) => p.command !== "");
|
||||
if (first) {
|
||||
setSelectedPresetId(first.id);
|
||||
setCommand(first.command);
|
||||
}
|
||||
// prefill is captured once at construction, not a reactive dependency.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [presets, commandTouched]);
|
||||
|
||||
const structuredSupported = useMemo(() => supportsStructuredView(command), [command]);
|
||||
useEffect(() => {
|
||||
if (!structuredSupported) setStructuredView(false);
|
||||
else if (!structuredTouched) setStructuredView(true);
|
||||
}, [structuredSupported, structuredTouched]);
|
||||
|
||||
// ---- project picker ------------------------------------------------------
|
||||
const [discovered, setDiscovered] = useState<Project[]>([]);
|
||||
const [projectsLoading, setProjectsLoading] = useState(true);
|
||||
const [filterQuery, setFilterQuery] = useState("");
|
||||
const [cwd, setCwd] = useState("");
|
||||
const [cwdRawVisible, setCwdRawVisible] = useState(false);
|
||||
const [rawFocusToken, setRawFocusToken] = useState(0);
|
||||
const [selectedGroupPath, setSelectedGroupPath] = useState<string | null>(null);
|
||||
const [worktreeChoice, setWorktreeChoice] = useState<WorktreeChoice>("new");
|
||||
|
||||
const groups = useMemo(() => groupProjects(sortProjects(discovered, new Date())), [discovered]);
|
||||
const visibleGroups = useMemo(
|
||||
() => groups.filter((g) => filterProjects([g.main, ...g.worktrees], filterQuery).length > 0),
|
||||
[groups, filterQuery],
|
||||
);
|
||||
const selectedGroup = useMemo(
|
||||
() => groups.find((g) => g.main.path === selectedGroupPath) ?? null,
|
||||
[groups, selectedGroupPath],
|
||||
);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
fetchProjects()
|
||||
.then((list) => {
|
||||
if (!cancelled) setDiscovered(list);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setDiscovered([]);
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setProjectsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// ---- worktree (branch-only; base_repo inferred via scan or /gitroot) ----
|
||||
const [wtEnabled, setWtEnabled] = useState(prefill.worktreeEnabled ?? true);
|
||||
const [inferredBaseRepo, setInferredBaseRepo] = useState<string | null>(null);
|
||||
const [wtHint, setWtHint] = useState<string | null>(null);
|
||||
const [name, setName] = useState(prefill.name ?? "");
|
||||
const [branchEdited, setBranchEdited] = useState(Boolean(prefill.worktreeBranchEdited));
|
||||
const [branchMode, setBranchMode] = useState<WorktreeBranchMode>(prefill.worktreeBranchMode ?? "new");
|
||||
const [newBranch, setNewBranch] = useState(prefill.worktreeBranch ?? "");
|
||||
const [existingBranch, setExistingBranch] = useState("");
|
||||
const [branchCache, setBranchCache] = useState<{ cwd: string; branches: BranchInfo[] } | null>(null);
|
||||
|
||||
const [advancedCollapsed, setAdvancedCollapsed] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
const probeTokenRef = useRef(0);
|
||||
const probeTimerRef = useRef<number | undefined>(undefined);
|
||||
|
||||
const applyBaseRepoResolution = useCallback((res: BaseRepoResolution) => {
|
||||
switch (res.kind) {
|
||||
case "disabled":
|
||||
setInferredBaseRepo(null);
|
||||
setWtHint(null);
|
||||
return;
|
||||
case "no-cwd":
|
||||
setInferredBaseRepo(null);
|
||||
setWtHint("Choose a working directory first.");
|
||||
return;
|
||||
case "found":
|
||||
setInferredBaseRepo(res.repo);
|
||||
setWtHint(null);
|
||||
setBranchCache(null);
|
||||
setExistingBranch("");
|
||||
return;
|
||||
case "probe":
|
||||
return; // caller schedules the probe
|
||||
}
|
||||
}, []);
|
||||
|
||||
const probeGitRoot = useCallback(async (path: string) => {
|
||||
const token = ++probeTokenRef.current;
|
||||
if (!path) {
|
||||
setInferredBaseRepo(null);
|
||||
setWtHint("Choose a working directory first.");
|
||||
return;
|
||||
}
|
||||
setWtHint("Checking for a git repository…");
|
||||
let root: string | undefined;
|
||||
try {
|
||||
root = (await gitRoot(path)).root;
|
||||
} catch {
|
||||
root = undefined;
|
||||
}
|
||||
if (token !== probeTokenRef.current || destroyedRef.current) return; // a newer probe superseded us
|
||||
if (root) {
|
||||
setInferredBaseRepo(root);
|
||||
setWtHint(null);
|
||||
setBranchCache(null);
|
||||
setExistingBranch("");
|
||||
} else {
|
||||
setInferredBaseRepo(null);
|
||||
// Publish the untick too, or a later submit fails with an inferred repo
|
||||
// that no longer matches an unticked box.
|
||||
setWtEnabled(false);
|
||||
setWtHint("Not inside a git repository — pick a dir in a repo to use a worktree.");
|
||||
}
|
||||
}, []);
|
||||
|
||||
const scheduleGitRootProbe = useCallback(
|
||||
(path: string) => {
|
||||
window.clearTimeout(probeTimerRef.current);
|
||||
probeTimerRef.current = window.setTimeout(() => {
|
||||
probeTimerRef.current = undefined;
|
||||
void probeGitRoot(path);
|
||||
}, GITROOT_PROBE_DEBOUNCE_MS);
|
||||
},
|
||||
[probeGitRoot],
|
||||
);
|
||||
useEffect(() => () => window.clearTimeout(probeTimerRef.current), []);
|
||||
|
||||
// Seed the form once the initial project scan and daemon info have both
|
||||
// settled — mirrors createSpawnForm's `loadProjects()`. Computed from local
|
||||
// values rather than reading state back, since the setState calls below
|
||||
// won't have committed yet within this same effect.
|
||||
const seededRef = useRef(false);
|
||||
useEffect(() => {
|
||||
if (infoLoading || projectsLoading || seededRef.current) return;
|
||||
seededRef.current = true;
|
||||
|
||||
const seedCwd = prefill.cwd ?? null;
|
||||
let finalCwd = "";
|
||||
let finalCwdRawVisible = false;
|
||||
let finalGroupPath: string | null = null;
|
||||
let finalChoice: WorktreeChoice = "new";
|
||||
|
||||
const restore = (path: string): boolean => {
|
||||
for (const group of groups) {
|
||||
const wt = worktreesOf(group).find((p) => p.path === path);
|
||||
const choice: WorktreeChoice | null = wt ? wt.path : group.main.path === path ? "new" : null;
|
||||
if (choice === null) continue;
|
||||
finalGroupPath = group.main.path;
|
||||
finalChoice = choice;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
if (seedCwd) {
|
||||
if (prefill.cwdRawVisible === false) {
|
||||
finalCwd = seedCwd;
|
||||
if (!restore(seedCwd)) finalCwdRawVisible = true;
|
||||
} else {
|
||||
finalCwd = seedCwd;
|
||||
finalCwdRawVisible = true;
|
||||
}
|
||||
} else if (discovered.length === 0) {
|
||||
finalCwd = homeDir;
|
||||
finalCwdRawVisible = true;
|
||||
}
|
||||
|
||||
setCwd(finalCwd);
|
||||
setCwdRawVisible(finalCwdRawVisible);
|
||||
setSelectedGroupPath(finalGroupPath);
|
||||
setWorktreeChoice(finalChoice);
|
||||
|
||||
const res = resolveBaseRepoFor(finalCwd, wtEnabled, discovered);
|
||||
applyBaseRepoResolution(res);
|
||||
if (res.kind === "probe") scheduleGitRootProbe(finalCwd);
|
||||
|
||||
setReady(true);
|
||||
// groups/wtEnabled/discovered/homeDir are read for this one settle pass;
|
||||
// re-running on their later changes would re-seed a form the operator
|
||||
// has since edited.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [infoLoading, projectsLoading]);
|
||||
|
||||
// ---- name (also seeds the worktree branch) ------------------------------
|
||||
const skipInitialBranchSync = useRef(Boolean(prefill.worktreeBranch));
|
||||
useEffect(() => {
|
||||
// One-time construction seeding, mirroring spawnForm.ts precedence: an
|
||||
// explicit seed wins outright; otherwise the prefilled name; otherwise a
|
||||
// freshly generated handle (#53).
|
||||
if (prefill.worktreeBranch) return;
|
||||
if (!branchEdited && branchMode === "new" && prefill.name) return; // handled below, mount-only
|
||||
if (!branchEdited && branchMode === "new") {
|
||||
void fetchNames(1)
|
||||
.then((batch) => {
|
||||
const handle = batch.names[0];
|
||||
if (destroyedRef.current || !handle) return;
|
||||
setNewBranch((cur) => cur || handle);
|
||||
})
|
||||
.catch(() => {
|
||||
// the operator types their own branch
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!skipInitialBranchSync.current && !branchEdited && branchMode === "new" && name) {
|
||||
setNewBranch(name);
|
||||
}
|
||||
skipInitialBranchSync.current = false;
|
||||
// A cleared name leaves the branch on its last value; only `name` changes
|
||||
// (typed or the mount-time prefill) drive this sync.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [name]);
|
||||
|
||||
// ---- existing-branch picker (#61): fetch once per cwd -------------------
|
||||
useEffect(() => {
|
||||
if (branchMode !== "existing" || !cwd || !inferredBaseRepo) return;
|
||||
if (branchCache?.cwd === cwd) return;
|
||||
let cancelled = false;
|
||||
const target = cwd;
|
||||
fetchBranches(target)
|
||||
.then((branches) => {
|
||||
if (cancelled || destroyedRef.current) return;
|
||||
setBranchCache({ cwd: target, branches });
|
||||
})
|
||||
.catch(() => {
|
||||
// the picker just stays empty; "new" mode still works
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [branchMode, cwd, inferredBaseRepo, branchCache]);
|
||||
|
||||
const branchesForCwd = branchCache?.cwd === cwd ? branchCache.branches : undefined;
|
||||
|
||||
// A native <select> defaults its displayed (and reported) value to the
|
||||
// first enabled option once nothing is explicitly selected. Derived at
|
||||
// render/submit time rather than synced via an effect, so there is no
|
||||
// window where the control shows one branch while state still holds "".
|
||||
const effectiveExistingBranch =
|
||||
existingBranch || branchesForCwd?.find((b) => !b.worktree && !b.is_head)?.name || "";
|
||||
|
||||
// ---- emit (#observability parity with spawnForm.ts's onChange) ---------
|
||||
useEffect(() => {
|
||||
if (!ready) return;
|
||||
onChange?.({
|
||||
command,
|
||||
cwd,
|
||||
name,
|
||||
structuredView,
|
||||
autoApprove: activePreset?.auto_approve ?? false,
|
||||
worktreeEnabled: wtEnabled,
|
||||
worktreeBranch: branchMode === "existing" ? effectiveExistingBranch : newBranch,
|
||||
worktreeBranchEdited: branchEdited,
|
||||
worktreeBranchMode: branchMode,
|
||||
cwdRawVisible,
|
||||
});
|
||||
}, [
|
||||
ready,
|
||||
command,
|
||||
cwd,
|
||||
name,
|
||||
structuredView,
|
||||
activePreset,
|
||||
wtEnabled,
|
||||
branchMode,
|
||||
effectiveExistingBranch,
|
||||
newBranch,
|
||||
branchEdited,
|
||||
cwdRawVisible,
|
||||
onChange,
|
||||
]);
|
||||
|
||||
// ---- handlers -------------------------------------------------------------
|
||||
const selectPreset = useCallback(
|
||||
(id: string) => {
|
||||
setCommandTouched(true);
|
||||
setSelectedPresetId(id);
|
||||
const preset = presets.find((p) => p.id === id);
|
||||
if (!preset || preset.command === "") setCommand(customCommand.trim());
|
||||
else setCommand(preset.command);
|
||||
},
|
||||
[presets, customCommand],
|
||||
);
|
||||
|
||||
const clearProjectSelection = useCallback(() => {
|
||||
setSelectedGroupPath(null);
|
||||
setWorktreeChoice("new");
|
||||
}, []);
|
||||
|
||||
const showRawCwd = useCallback(
|
||||
(prefillValue?: string, focus = true) => {
|
||||
setCwdRawVisible(true);
|
||||
if (prefillValue != null) setCwd(prefillValue);
|
||||
clearProjectSelection();
|
||||
if (focus) setRawFocusToken((t) => t + 1);
|
||||
},
|
||||
[clearProjectSelection],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (rawFocusToken === 0) return;
|
||||
rawCwdRef.current?.focus();
|
||||
rawCwdRef.current?.select();
|
||||
}, [rawFocusToken]);
|
||||
|
||||
const applyWorktreeChoice = useCallback(
|
||||
(group: ProjectGroup, choice: WorktreeChoice) => {
|
||||
const target = choice === "new" ? group.main : worktreesOf(group).find((p) => p.path === choice);
|
||||
if (!target) return;
|
||||
setWorktreeChoice(choice);
|
||||
setCwd(target.path);
|
||||
setBranchCache(null);
|
||||
setExistingBranch("");
|
||||
if (choice === "new") {
|
||||
setWtEnabled(true);
|
||||
applyBaseRepoResolution({ kind: "found", repo: group.main.base_repo ?? group.main.path });
|
||||
} else {
|
||||
setWtEnabled(false);
|
||||
applyBaseRepoResolution({ kind: "disabled" });
|
||||
}
|
||||
},
|
||||
[applyBaseRepoResolution],
|
||||
);
|
||||
|
||||
const selectProject = useCallback(
|
||||
(group: ProjectGroup) => {
|
||||
setSelectedGroupPath(group.main.path);
|
||||
setCwdRawVisible(false);
|
||||
// Rule 4: a box that is itself a linked worktree defaults to running there.
|
||||
applyWorktreeChoice(group, group.main.is_worktree ? group.main.path : "new");
|
||||
},
|
||||
[applyWorktreeChoice],
|
||||
);
|
||||
|
||||
const onWtEnabledChange = useCallback(
|
||||
(next: boolean) => {
|
||||
setWtEnabled(next);
|
||||
const res = resolveBaseRepoFor(cwd, next, discovered);
|
||||
applyBaseRepoResolution(res);
|
||||
if (res.kind === "probe") scheduleGitRootProbe(cwd);
|
||||
},
|
||||
[cwd, discovered, applyBaseRepoResolution, scheduleGitRootProbe],
|
||||
);
|
||||
|
||||
const onRawCwdChange = useCallback(
|
||||
(v: string) => {
|
||||
setCwd(v);
|
||||
setBranchCache(null);
|
||||
setExistingBranch("");
|
||||
if (wtEnabled) scheduleGitRootProbe(v);
|
||||
},
|
||||
[wtEnabled, scheduleGitRootProbe],
|
||||
);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
const values: SpawnFormValues = {
|
||||
command,
|
||||
cwd,
|
||||
name,
|
||||
structuredView,
|
||||
autoApprove: activePreset?.auto_approve ?? false,
|
||||
worktreeEnabled: wtEnabled,
|
||||
worktreeBranch: branchMode === "existing" ? effectiveExistingBranch : newBranch,
|
||||
worktreeBranchEdited: branchEdited,
|
||||
worktreeBranchMode: branchMode,
|
||||
};
|
||||
const built = buildSpawnRequest(values, inferredBaseRepo);
|
||||
if ("error" in built) {
|
||||
setError(built.error);
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const session = await createSession(built.req);
|
||||
onSuccess(session);
|
||||
} catch (err) {
|
||||
setError((err as Error).message);
|
||||
setSubmitting(false);
|
||||
}
|
||||
},
|
||||
[
|
||||
command,
|
||||
cwd,
|
||||
name,
|
||||
structuredView,
|
||||
activePreset,
|
||||
wtEnabled,
|
||||
branchMode,
|
||||
effectiveExistingBranch,
|
||||
newBranch,
|
||||
branchEdited,
|
||||
inferredBaseRepo,
|
||||
onSuccess,
|
||||
],
|
||||
);
|
||||
|
||||
// ---- Enter submits from anywhere (#97) ------------------------------------
|
||||
const onFormKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent<HTMLFormElement>) => {
|
||||
if (e.key !== "Enter" || e.defaultPrevented) return;
|
||||
const target = e.target as HTMLElement;
|
||||
|
||||
if (target.dataset.role === "toggle") {
|
||||
e.preventDefault();
|
||||
(target as HTMLInputElement).click();
|
||||
return;
|
||||
}
|
||||
|
||||
if (target instanceof HTMLButtonElement && target.dataset.picker) {
|
||||
e.preventDefault();
|
||||
if (target.dataset.active === "true") {
|
||||
formRef.current?.requestSubmit();
|
||||
} else {
|
||||
target.click();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
if (target === filterInputRef.current) {
|
||||
// Resolve the filter to a project only when the current pick isn't
|
||||
// one of the matches: a filter typed past it means the operator
|
||||
// moved on, while a pick that still matches keeps its worktree choice.
|
||||
const stillMatches =
|
||||
selectedGroup != null && visibleGroups.some((g) => g.main.path === selectedGroup.main.path);
|
||||
if (!stillMatches && visibleGroups[0]) selectProject(visibleGroups[0]);
|
||||
}
|
||||
formRef.current?.requestSubmit();
|
||||
},
|
||||
[selectedGroup, visibleGroups, selectProject],
|
||||
);
|
||||
|
||||
return (
|
||||
<form
|
||||
ref={formRef}
|
||||
onSubmit={onSubmit}
|
||||
onKeyDown={onFormKeyDown}
|
||||
className="mx-auto flex w-full max-w-[60ch] flex-col gap-sp-2 overflow-auto p-sp-3"
|
||||
>
|
||||
<div className="flex flex-col gap-sp-2">
|
||||
<span className="text-fs-13 text-ink">Harness</span>
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-sp-2">
|
||||
{presets.map((p) => {
|
||||
const isCustom = p.command === "";
|
||||
const toolId = presetToolId(p);
|
||||
const icon = isCustom ? null : toolId ? harnessIcon(toolId) : harnessIcon("shell");
|
||||
const label = TOOL_LABELS[toolId ?? ""] ?? p.label;
|
||||
const active = p.id === selectedPresetId;
|
||||
return (
|
||||
<button
|
||||
key={p.id}
|
||||
type="button"
|
||||
className={`flex flex-col items-center gap-sp-2 rounded-r-2 border px-sp-2 py-sp-3 text-center ${
|
||||
active
|
||||
? "border-accent bg-accent-tint"
|
||||
: isCustom
|
||||
? "border-dashed border-border text-muted"
|
||||
: "border-border bg-surface-2 hover:border-border-strong"
|
||||
}`}
|
||||
onClick={() => selectPreset(p.id)}
|
||||
>
|
||||
<span
|
||||
className={`flex h-8 w-8 items-center justify-center ${active ? "text-ink" : "text-muted"}`}
|
||||
aria-hidden={icon ? undefined : true}
|
||||
dangerouslySetInnerHTML={icon ? { __html: icon } : undefined}
|
||||
>
|
||||
{icon ? undefined : "…"}
|
||||
</span>
|
||||
<span className="max-w-full truncate text-fs-13 font-semibold">
|
||||
{isCustom ? "Custom…" : label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<input
|
||||
ref={customCommandRef}
|
||||
className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2.5 font-mono text-fs-15 text-ink"
|
||||
name="command_raw"
|
||||
type="text"
|
||||
hidden={!isCustomSelected}
|
||||
placeholder="bash -l"
|
||||
autoComplete="off"
|
||||
value={customCommand}
|
||||
onChange={(e) => {
|
||||
const v = e.currentTarget.value;
|
||||
setCustomCommand(v);
|
||||
if (isCustomSelected) {
|
||||
setCommandTouched(true);
|
||||
setCommand(v.trim());
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-sp-2">
|
||||
<span className="text-fs-13 text-ink">Project</span>
|
||||
<input
|
||||
ref={filterInputRef}
|
||||
className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2.5 font-mono text-fs-15 text-ink"
|
||||
type="text"
|
||||
placeholder="Filter projects…"
|
||||
autoComplete="off"
|
||||
value={filterQuery}
|
||||
onChange={(e) => setFilterQuery(e.currentTarget.value)}
|
||||
/>
|
||||
{!ready ? (
|
||||
<p className="m-0 px-sp-3 py-1.5 text-fs-13 text-faint">Loading projects…</p>
|
||||
) : (
|
||||
<div className="grid max-h-[300px] grid-cols-2 gap-sp-2 overflow-y-auto p-px">
|
||||
{visibleGroups.map((group) => {
|
||||
const active = selectedGroup?.main.path === group.main.path;
|
||||
return (
|
||||
<button
|
||||
key={group.main.path}
|
||||
type="button"
|
||||
data-picker="project"
|
||||
data-active={active || undefined}
|
||||
className={`flex min-w-0 flex-col gap-0.5 rounded-r-2 border px-sp-3 py-sp-2 text-left ${
|
||||
active ? "border-accent bg-accent-tint" : "border-border bg-surface-2 hover:border-border-strong"
|
||||
} ${isStale(group.main, new Date()) ? "opacity-55" : ""}`}
|
||||
onClick={() => selectProject(group)}
|
||||
>
|
||||
<span className="truncate text-fs-13 font-semibold text-ink">{group.main.name}</span>
|
||||
<span className="break-words font-mono text-fs-12 text-muted">
|
||||
{abbreviateCwd(parentDir(group.main.path), homeDir)}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{discovered.length > 0 && visibleGroups.length === 0 && (
|
||||
<p className="col-span-2 m-0 px-sp-3 py-1.5 text-fs-13 text-faint">No projects match.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="self-start bg-transparent px-0 py-1 text-fs-13 italic text-muted hover:text-ink"
|
||||
onClick={() => showRawCwd(cwd || homeDir)}
|
||||
>
|
||||
Other directory…
|
||||
</button>
|
||||
{cwdRawVisible && (
|
||||
<DirAutocomplete
|
||||
inputRef={rawCwdRef}
|
||||
className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2.5 font-mono text-fs-15 text-ink"
|
||||
name="cwd_raw"
|
||||
type="text"
|
||||
placeholder="/home/user/project"
|
||||
value={cwd}
|
||||
onChange={onRawCwdChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col border-t border-border pt-sp-2">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center gap-sp-1 py-sp-2 text-left text-fs-11 text-muted"
|
||||
aria-expanded={!advancedCollapsed}
|
||||
onClick={() => setAdvancedCollapsed((c) => !c)}
|
||||
>
|
||||
<span className={`inline-block transition-transform ${advancedCollapsed ? "-rotate-90" : ""}`}>▾</span>
|
||||
<span className="font-semibold">Advanced</span>
|
||||
<span className="ml-auto text-fs-12 text-muted">{wtEnabled ? "creates a worktree" : "no worktree"}</span>
|
||||
</button>
|
||||
{!advancedCollapsed && (
|
||||
<div className="flex flex-col gap-sp-3 py-sp-2">
|
||||
<label className="flex flex-col gap-1 text-fs-12 text-muted">
|
||||
Session name
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
placeholder="named after your first prompt"
|
||||
className="w-full rounded-r-2 border border-border bg-surface-2 px-sp-3 py-2.5 font-mono text-fs-15 text-ink"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.currentTarget.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{structuredSupported && (
|
||||
<label className="flex cursor-pointer items-center gap-sp-2 text-fs-14 text-ink">
|
||||
<input
|
||||
type="checkbox"
|
||||
data-role="toggle"
|
||||
className="size-[18px] accent-accent"
|
||||
checked={structuredView}
|
||||
onChange={(e) => {
|
||||
setStructuredTouched(true);
|
||||
setStructuredView(e.currentTarget.checked);
|
||||
}}
|
||||
/>
|
||||
Structured view
|
||||
</label>
|
||||
)}
|
||||
|
||||
{selectedGroup && (
|
||||
<div className="flex flex-col gap-sp-2">
|
||||
<span className="text-fs-13 text-ink">Worktree</span>
|
||||
<div className="flex max-h-[200px] flex-col gap-sp-1 overflow-y-auto">
|
||||
<button
|
||||
type="button"
|
||||
data-picker="worktree"
|
||||
data-active={worktreeChoice === "new" || undefined}
|
||||
className={pickerButtonClass(worktreeChoice === "new")}
|
||||
onClick={() => applyWorktreeChoice(selectedGroup, "new")}
|
||||
>
|
||||
<span className="text-fs-13 font-semibold text-accent">+ new</span>
|
||||
<span className="text-right text-fs-12 text-muted">
|
||||
new worktree of {selectedGroup.main.name}
|
||||
</span>
|
||||
</button>
|
||||
{worktreesOf(selectedGroup).map((wt) => (
|
||||
<button
|
||||
key={wt.path}
|
||||
type="button"
|
||||
data-picker="worktree"
|
||||
data-active={worktreeChoice === wt.path || undefined}
|
||||
className={pickerButtonClass(worktreeChoice === wt.path)}
|
||||
onClick={() => applyWorktreeChoice(selectedGroup, wt.path)}
|
||||
>
|
||||
<span className="text-fs-13 font-semibold text-ink">{wt.name}</span>
|
||||
<span className="text-right text-fs-12 text-muted">{wt.path}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<BranchPicker
|
||||
enabled={wtEnabled}
|
||||
onToggleEnabled={onWtEnabledChange}
|
||||
hint={wtHint}
|
||||
baseRepo={inferredBaseRepo}
|
||||
mode={branchMode}
|
||||
onModeChange={setBranchMode}
|
||||
newBranch={newBranch}
|
||||
onNewBranchChange={(v) => {
|
||||
setBranchEdited(true);
|
||||
setNewBranch(v);
|
||||
}}
|
||||
branches={branchesForCwd}
|
||||
existingBranch={effectiveExistingBranch}
|
||||
onExistingBranchChange={setExistingBranch}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p role="alert" aria-live="polite" className={`m-0 text-fs-13 text-danger ${error ? "rounded-r-2 bg-danger-tint px-sp-3 py-sp-2" : "min-h-[1.2em]"}`}>
|
||||
{error}
|
||||
</p>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="rounded-r-1 bg-accent px-sp-4 py-sp-2 text-fs-13 font-semibold text-accent-ink disabled:opacity-60"
|
||||
>
|
||||
Spawn
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
import type { DaemonInfo, Project, Session } from "../../types.js";
|
||||
import { SpawnModal } from "./SpawnModal.js";
|
||||
|
||||
vi.mock("../../api.js", () => ({
|
||||
createSession: vi.fn(),
|
||||
fetchBranches: vi.fn(),
|
||||
fetchNames: vi.fn(),
|
||||
getDaemonInfo: vi.fn(),
|
||||
gitRoot: vi.fn(),
|
||||
listDir: vi.fn(),
|
||||
projects: vi.fn(),
|
||||
}));
|
||||
|
||||
import { createSession, fetchNames, getDaemonInfo, listDir, projects as fetchProjects } from "../../api.js";
|
||||
|
||||
function info(): DaemonInfo {
|
||||
return { hostname: "h", version: "1", home_dir: "/home/n", presets: [{ id: "claude", label: "Claude", command: "claude" }] };
|
||||
}
|
||||
|
||||
function project(over: Partial<Project> = {}): Project {
|
||||
return { path: "/repos/p", name: "p", ...over };
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.mocked(getDaemonInfo).mockResolvedValue(info());
|
||||
vi.mocked(fetchProjects).mockResolvedValue([project()]);
|
||||
vi.mocked(fetchNames).mockResolvedValue({ names: ["amber-fox"] });
|
||||
vi.mocked(listDir).mockResolvedValue({ path: "", entries: [] });
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
async function settle() {
|
||||
await waitFor(() => expect(screen.queryByText("Loading projects…")).toBeNull());
|
||||
}
|
||||
|
||||
describe("SpawnModal", () => {
|
||||
it("mounts the spawn form inside a dialog", async () => {
|
||||
render(<SpawnModal onSuccess={vi.fn()} onClose={vi.fn()} />);
|
||||
await settle();
|
||||
|
||||
expect(screen.getByRole("dialog")).not.toBeNull();
|
||||
expect(screen.getByRole("button", { name: "Spawn" })).not.toBeNull();
|
||||
});
|
||||
|
||||
it("titles a seeded open as a clone", async () => {
|
||||
render(<SpawnModal seed={{ command: "claude" }} onSuccess={vi.fn()} onClose={vi.fn()} />);
|
||||
await settle();
|
||||
|
||||
expect(screen.getByText("Spawn similar")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("titles a plain open as a new session", async () => {
|
||||
render(<SpawnModal onSuccess={vi.fn()} onClose={vi.fn()} />);
|
||||
await settle();
|
||||
|
||||
expect(screen.getByText("Spawn session")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("closes on Escape, on Cancel and on a backdrop click", async () => {
|
||||
const onClose = vi.fn();
|
||||
const { unmount } = render(<SpawnModal onSuccess={vi.fn()} onClose={onClose} />);
|
||||
await settle();
|
||||
|
||||
fireEvent.keyDown(screen.getByRole("dialog"), { key: "Escape" });
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
|
||||
expect(onClose).toHaveBeenCalledTimes(2);
|
||||
unmount();
|
||||
|
||||
render(<SpawnModal onSuccess={vi.fn()} onClose={onClose} />);
|
||||
await settle();
|
||||
fireEvent.click(document.querySelector(".modal-backdrop")!);
|
||||
expect(onClose).toHaveBeenCalledTimes(3);
|
||||
});
|
||||
|
||||
it("closes before handing the created session to its caller", async () => {
|
||||
const created: Session = {
|
||||
id: "s1",
|
||||
cwd: "/repos/p",
|
||||
command: "claude",
|
||||
env: {},
|
||||
metadata: {},
|
||||
status: "Running",
|
||||
created_at: "2026-01-01T00:00:00Z",
|
||||
};
|
||||
vi.mocked(createSession).mockResolvedValue(created);
|
||||
const calls: string[] = [];
|
||||
const onClose = vi.fn(() => calls.push("close"));
|
||||
const onSuccess = vi.fn(() => calls.push("success"));
|
||||
render(<SpawnModal onSuccess={onSuccess} onClose={onClose} />);
|
||||
await settle();
|
||||
fireEvent.click(screen.getByText("p"));
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Spawn" }));
|
||||
|
||||
await waitFor(() => expect(onSuccess).toHaveBeenCalledWith(created));
|
||||
expect(calls).toEqual(["close", "success"]);
|
||||
});
|
||||
});
|
||||
@@ -1,82 +0,0 @@
|
||||
// React port of ../../spawnModal.ts: dialog chrome around SpawnForm. Escape,
|
||||
// the ✕ and a click on the backdrop all close it; SpawnForm's own DirAutocomplete
|
||||
// swallows Escape first, so dismissing a dropdown never also discards the form.
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
import type { Session } from "../../types.js";
|
||||
import { SpawnForm, type SpawnFormProps } from "./SpawnForm.js";
|
||||
|
||||
export interface SpawnModalProps {
|
||||
seed?: SpawnFormProps["seed"];
|
||||
/** Called with the created session after a successful submit — the modal
|
||||
* has already closed by then, so the caller decides where it lands. */
|
||||
onSuccess(session: Session): void;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
export function SpawnModal({ seed, onSuccess, onClose }: SpawnModalProps) {
|
||||
const filterInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleSuccess = (session: Session) => {
|
||||
onClose();
|
||||
onSuccess(session);
|
||||
};
|
||||
|
||||
// The project filter owns the keyboard on open: typing narrows the list and
|
||||
// Tab from here reaches the harness tiles, matching the TUI's draft pane.
|
||||
useEffect(() => {
|
||||
const host = filterInputRef.current;
|
||||
host?.querySelector<HTMLInputElement>("input[placeholder='Filter projects…']")?.focus();
|
||||
}, []);
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className="modal-backdrop fixed inset-0 z-modal flex items-center justify-center bg-bg/70 backdrop-blur-sm"
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="spawn-title"
|
||||
className="flex max-h-[92vh] w-full max-w-[560px] flex-col rounded-r-3 border border-border bg-surface shadow-2"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape" && !e.defaultPrevented) {
|
||||
e.preventDefault();
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<header className="flex items-center justify-between border-b border-border p-sp-3">
|
||||
<h2 id="spawn-title" className="m-0 text-fs-15 font-semibold text-ink">
|
||||
{seed ? "Spawn similar" : "Spawn session"}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close"
|
||||
className="rounded-r-1 px-sp-2 py-1 text-fs-15 text-muted hover:text-ink"
|
||||
onClick={onClose}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</header>
|
||||
<div ref={filterInputRef} className="min-h-0 flex-1 overflow-auto">
|
||||
<SpawnForm seed={seed} onSuccess={handleSuccess} />
|
||||
</div>
|
||||
<div className="flex justify-end gap-sp-2 border-t border-border p-sp-3">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-r-1 border border-border px-sp-3 py-sp-1 text-fs-12 text-ink"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export { SpawnModal, type SpawnModalProps } from "./SpawnModal.js";
|
||||
export { SpawnForm, type SpawnFormProps } from "./SpawnForm.js";
|
||||
export { DirAutocomplete, type DirAutocompleteProps } from "./DirAutocomplete.js";
|
||||
export { BranchPicker, type BranchPickerProps } from "./BranchPicker.js";
|
||||
export { useFastForward, type UseFastForwardOptions } from "./useFastForward.js";
|
||||
// spawnSimilar.ts is pure seed-building logic with no DOM dependency — reused
|
||||
// as-is rather than re-implemented for React (#248).
|
||||
export { spawnSimilarSeed, spawnSimilarProjectSeed } from "../../spawnSimilar.js";
|
||||
@@ -1,114 +0,0 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { act, renderHook } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
import type { Project, Session, SpawnPreset } from "../../types.js";
|
||||
import { useFastForward } from "./useFastForward.js";
|
||||
|
||||
vi.mock("../../api.js", () => ({
|
||||
createSession: vi.fn(),
|
||||
fetchNames: vi.fn(),
|
||||
getDaemonInfo: vi.fn(),
|
||||
projects: vi.fn(),
|
||||
}));
|
||||
|
||||
import { createSession, fetchNames, getDaemonInfo, projects as fetchProjects } from "../../api.js";
|
||||
|
||||
const mockCreateSession = vi.mocked(createSession);
|
||||
const mockFetchNames = vi.mocked(fetchNames);
|
||||
const mockGetDaemonInfo = vi.mocked(getDaemonInfo);
|
||||
const mockFetchProjects = vi.mocked(fetchProjects);
|
||||
|
||||
const presets: SpawnPreset[] = [{ id: "claude", label: "Claude", command: "claude" }];
|
||||
|
||||
function project(over: Partial<Project> = {}): Project {
|
||||
return { path: "/repos/p", name: "p", base_repo: "/repos/p", last_command: "claude", ...over };
|
||||
}
|
||||
|
||||
function session(): Session {
|
||||
return {
|
||||
id: "s1",
|
||||
cwd: "/repos/p",
|
||||
command: "claude",
|
||||
env: {},
|
||||
metadata: {},
|
||||
status: "Running",
|
||||
created_at: "2026-01-01T00:00:00Z",
|
||||
};
|
||||
}
|
||||
|
||||
afterEach(() => vi.clearAllMocks());
|
||||
|
||||
describe("useFastForward", () => {
|
||||
it("spawns immediately once every default resolves", async () => {
|
||||
mockFetchProjects.mockResolvedValue([project()]);
|
||||
mockFetchNames.mockResolvedValue({ names: ["amber-fox"] });
|
||||
mockGetDaemonInfo.mockResolvedValue({ hostname: "h", version: "1", presets });
|
||||
const created = session();
|
||||
mockCreateSession.mockResolvedValue(created);
|
||||
const onSpawned = vi.fn();
|
||||
const onFallback = vi.fn();
|
||||
|
||||
const { result } = renderHook(() => useFastForward({ onSpawned, onFallback }));
|
||||
await act(() => result.current());
|
||||
|
||||
expect(mockCreateSession).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
cwd: "/repos/p",
|
||||
command: "claude",
|
||||
worktree: { base_repo: "/repos/p", branch: "amber-fox", create_branch: true },
|
||||
}),
|
||||
);
|
||||
expect(onSpawned).toHaveBeenCalledWith(created);
|
||||
expect(onFallback).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("falls back to a pre-filled seed when the daemon rejects the spawn", async () => {
|
||||
mockFetchProjects.mockResolvedValue([project()]);
|
||||
mockFetchNames.mockResolvedValue({ names: ["amber-fox"] });
|
||||
mockGetDaemonInfo.mockResolvedValue({ hostname: "h", version: "1", presets });
|
||||
mockCreateSession.mockRejectedValue(new Error("boom"));
|
||||
const onSpawned = vi.fn();
|
||||
const onFallback = vi.fn();
|
||||
|
||||
const { result } = renderHook(() => useFastForward({ onSpawned, onFallback }));
|
||||
await act(() => result.current());
|
||||
|
||||
expect(onSpawned).not.toHaveBeenCalled();
|
||||
expect(onFallback).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ cwd: "/repos/p", command: "claude", worktreeBranch: "amber-fox" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("falls back when nothing is known yet (no projects, no handle)", async () => {
|
||||
mockFetchProjects.mockResolvedValue([]);
|
||||
mockFetchNames.mockRejectedValue(new Error("exhausted"));
|
||||
mockGetDaemonInfo.mockResolvedValue({ hostname: "h", version: "1", presets });
|
||||
const onSpawned = vi.fn();
|
||||
const onFallback = vi.fn();
|
||||
|
||||
const { result } = renderHook(() => useFastForward({ onSpawned, onFallback }));
|
||||
await act(() => result.current());
|
||||
|
||||
expect(mockCreateSession).not.toHaveBeenCalled();
|
||||
expect(onFallback).toHaveBeenCalledWith(expect.objectContaining({ cwd: "" }));
|
||||
});
|
||||
|
||||
it("prefers the focused session's project over the freshest one", async () => {
|
||||
mockFetchProjects.mockResolvedValue([
|
||||
project({ path: "/repos/fresh", name: "fresh" }),
|
||||
project({ path: "/repos/current", name: "current", last_activity: "2020-01-01T00:00:00Z" }),
|
||||
]);
|
||||
mockFetchNames.mockResolvedValue({ names: ["h"] });
|
||||
mockGetDaemonInfo.mockResolvedValue({ hostname: "h", version: "1", presets });
|
||||
mockCreateSession.mockResolvedValue(session());
|
||||
const onSpawned = vi.fn();
|
||||
|
||||
const { result } = renderHook(() =>
|
||||
useFastForward({ focusedCwd: "/repos/current", onSpawned, onFallback: vi.fn() }),
|
||||
);
|
||||
await act(() => result.current());
|
||||
|
||||
expect(mockCreateSession).toHaveBeenCalledWith(expect.objectContaining({ cwd: "/repos/current" }));
|
||||
});
|
||||
});
|
||||
@@ -1,57 +0,0 @@
|
||||
// React port of main.ts's `requestFastForward` (#67): one keystroke, every
|
||||
// spawn default resolved — most recent project (or the one the operator is
|
||||
// on), its last command, a fresh generated branch handle, worktree on with a
|
||||
// new branch. A failed POST, or any missing default, falls back to the same
|
||||
// pre-filled form `onFallback` opens, rather than a dead keystroke.
|
||||
|
||||
import { useCallback } from "react";
|
||||
|
||||
import { createSession, fetchNames, getDaemonInfo, projects as fetchProjects } from "../../api.js";
|
||||
import { buildFastForwardRequest, fastForwardSeed, resolveFastForward } from "../../fastForward.js";
|
||||
import { FALLBACK_PRESETS, type SpawnFormSeed } from "../../spawnForm.js";
|
||||
import type { Project, Session, SpawnPreset } from "../../types.js";
|
||||
|
||||
export interface UseFastForwardOptions {
|
||||
/** The project of the session the operator is currently on, if any — its
|
||||
* base repo for a worktree session, else its cwd. Same rule the plain
|
||||
* spawn modal's seed uses, so `N` lands where the operator currently is. */
|
||||
focusedCwd?: string;
|
||||
onSpawned(session: Session): void;
|
||||
onFallback(seed: SpawnFormSeed): void;
|
||||
}
|
||||
|
||||
async function resolvePresets(): Promise<SpawnPreset[]> {
|
||||
try {
|
||||
const info = await getDaemonInfo();
|
||||
if (info.presets?.length) return info.presets;
|
||||
} catch {
|
||||
// keep fallbacks
|
||||
}
|
||||
return FALLBACK_PRESETS;
|
||||
}
|
||||
|
||||
/** Returns a function to call on the fast-forward keystroke. */
|
||||
export function useFastForward(opts: UseFastForwardOptions): () => Promise<void> {
|
||||
const { focusedCwd, onSpawned, onFallback } = opts;
|
||||
|
||||
return useCallback(async () => {
|
||||
const [discovered, handle] = await Promise.all([
|
||||
fetchProjects().catch(() => [] as Project[]),
|
||||
fetchNames(1)
|
||||
.then((batch) => batch.names[0])
|
||||
.catch(() => undefined),
|
||||
]);
|
||||
const presets = await resolvePresets();
|
||||
const resolved = resolveFastForward(discovered, presets, handle, focusedCwd);
|
||||
const req = buildFastForwardRequest(resolved);
|
||||
if (req) {
|
||||
try {
|
||||
onSpawned(await createSession(req));
|
||||
return;
|
||||
} catch {
|
||||
// degrades to the pre-filled form below, never a silent dead key
|
||||
}
|
||||
}
|
||||
onFallback(fastForwardSeed(resolved));
|
||||
}, [focusedCwd, onSpawned, onFallback]);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
import { ApprovalView } from "./ApprovalView.js";
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const ALL_OPTIONS = [
|
||||
{ optionId: "a1", name: "Allow once", kind: "allow_once" as const },
|
||||
{ optionId: "a2", name: "Allow always", kind: "allow_always" as const },
|
||||
{ optionId: "r1", name: "Reject", kind: "reject_once" as const },
|
||||
];
|
||||
|
||||
function buttons(): string[] {
|
||||
return [...document.querySelectorAll(".st-approval-acts button")].map((b) => b.textContent ?? "");
|
||||
}
|
||||
|
||||
describe("ApprovalView", () => {
|
||||
it("asks the operator with the three decisions the daemon exposes", () => {
|
||||
render(
|
||||
<ApprovalView
|
||||
request={{ toolCall: { title: "Write(a.ts)", locations: [{ path: "/repo/a.ts" }] }, options: ALL_OPTIONS }}
|
||||
pending
|
||||
onDecide={() => Promise.resolve()}
|
||||
/>,
|
||||
);
|
||||
expect(buttons()).toEqual(["Allow once", "Allow for session", "Deny"]);
|
||||
expect(screen.getByText("Write(a.ts)")).toBeTruthy();
|
||||
expect(screen.getByText("/repo/a.ts")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("submits the decision the operator picked", async () => {
|
||||
const onDecide = vi.fn().mockResolvedValue(undefined);
|
||||
render(<ApprovalView request={{ options: ALL_OPTIONS }} pending onDecide={onDecide} />);
|
||||
fireEvent.click(screen.getByText("Deny"));
|
||||
await waitFor(() => expect(onDecide).toHaveBeenCalledWith("deny"));
|
||||
});
|
||||
|
||||
it("disables every button once one is pressed, so a decision is sent once", () => {
|
||||
render(<ApprovalView request={{ options: ALL_OPTIONS }} pending onDecide={() => new Promise(() => {})} />);
|
||||
fireEvent.click(screen.getByText("Allow once"));
|
||||
const all = [...document.querySelectorAll<HTMLButtonElement>(".st-approval-acts button")];
|
||||
expect(all.every((b) => b.disabled)).toBe(true);
|
||||
});
|
||||
|
||||
it("restores the controls when the decision failed and this approval is still pending", async () => {
|
||||
const onDecide = vi.fn().mockRejectedValue(new Error("nope"));
|
||||
render(<ApprovalView request={{ options: ALL_OPTIONS }} pending onDecide={onDecide} />);
|
||||
fireEvent.click(screen.getByText("Allow once"));
|
||||
await waitFor(() => {
|
||||
const all = [...document.querySelectorAll<HTMLButtonElement>(".st-approval-acts button")];
|
||||
expect(all.every((b) => !b.disabled)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it("offers no button for a decision the request cannot back", () => {
|
||||
render(
|
||||
<ApprovalView
|
||||
request={{ options: [{ optionId: "a1", name: "Allow once", kind: "allow_once" }] }}
|
||||
pending
|
||||
onDecide={() => Promise.resolve()}
|
||||
/>,
|
||||
);
|
||||
expect(buttons()).toEqual(["Allow once"]);
|
||||
});
|
||||
|
||||
it("says so when the request offers no decision at all", () => {
|
||||
render(<ApprovalView request={{ options: [] }} pending onDecide={() => Promise.resolve()} />);
|
||||
expect(screen.getByText("no decision offered")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("renders a resolved approval as a one-liner, with no controls", () => {
|
||||
render(
|
||||
<ApprovalView
|
||||
request={{ toolCall: { title: "Write(a.ts)" }, options: ALL_OPTIONS }}
|
||||
pending={false}
|
||||
onDecide={() => Promise.resolve()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("Write(a.ts) — approved")).toBeTruthy();
|
||||
expect(document.querySelector(".st-approval-acts")).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,80 @@
|
||||
// An `Approval` row. The daemon exposes exactly three decisions
|
||||
// (docs/STRUCTURED-VIEW.md) and mints the nonce; this only solicits one of
|
||||
// them. A decision the request offers no matching ACP option for is not shown
|
||||
// — its button would "allow" something that silently resolves `Cancelled`.
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import type { AcpPermissionOption, AcpToolCallLike, StructuredApprovalDecision } from "../../types.js";
|
||||
import { offeredDecisions, toolKindLabel } from "./model.js";
|
||||
|
||||
const SPECS: [StructuredApprovalDecision, string, string][] = [
|
||||
["allow_once", "Allow once", "primary"],
|
||||
["allow_for_session", "Allow for session", ""],
|
||||
["deny", "Deny", "deny"],
|
||||
];
|
||||
|
||||
export interface ApprovalViewProps {
|
||||
/** The `RequestPermissionRequest` the row carries — serialized without its
|
||||
* nonce, which never leaves the daemon's live wire. */
|
||||
request: { toolCall?: AcpToolCallLike; options?: AcpPermissionOption[] };
|
||||
/** Whether this is the one live approval. A restored/answered row is not. */
|
||||
pending: boolean;
|
||||
/** Resolves once the decision reached the daemon; rejects only while this
|
||||
* approval is still the pending one, so the buttons can come back. */
|
||||
onDecide: (decision: StructuredApprovalDecision) => Promise<void>;
|
||||
}
|
||||
|
||||
export function ApprovalView({ request, pending, onDecide }: ApprovalViewProps) {
|
||||
const [busy, setBusy] = useState(false);
|
||||
const toolCall = request.toolCall ?? {};
|
||||
const what = toolCall.title ?? toolKindLabel(toolCall.kind);
|
||||
|
||||
// Resolved approvals render as a compact one-liner inside a tool group (or
|
||||
// are dropped entirely when standalone — see model.ts's transcriptItems).
|
||||
if (!pending) {
|
||||
return <div className="st-row st-row-approval st-approval-compact">{`${what} — approved`}</div>;
|
||||
}
|
||||
|
||||
const offered = offeredDecisions(request.options ?? []);
|
||||
const path = toolCall.locations?.[0]?.path;
|
||||
|
||||
const decide = (decision: StructuredApprovalDecision) => {
|
||||
setBusy(true);
|
||||
onDecide(decision).catch(() => {
|
||||
// Rejects only while this approval is still pending — restore the
|
||||
// controls so the operator can retry. The error itself is surfaced by
|
||||
// the pane's banner.
|
||||
setBusy(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="st-row st-row-approval">
|
||||
<div className="st-approval">
|
||||
<div className="st-approval-title">
|
||||
<span aria-hidden="true">⚠</span> permission requested
|
||||
</div>
|
||||
<div className="st-approval-what">{what}</div>
|
||||
{path && <div className="st-approval-path">{path}</div>}
|
||||
{offered.length > 0 ? (
|
||||
<div className="st-approval-acts">
|
||||
{SPECS.filter(([decision]) => offered.includes(decision)).map(([decision, label, cls]) => (
|
||||
<button
|
||||
key={decision}
|
||||
type="button"
|
||||
className={cls ? `act ${cls}` : "act"}
|
||||
disabled={busy}
|
||||
onClick={() => decide(decision)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="st-approval-resolved">no decision offered</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,391 @@
|
||||
// The composer: draft, attachments, `/` command autocomplete off the live
|
||||
// `available_commands_update` notices, the session-settings menu, and the
|
||||
// send/cancel pair. Sending is the pane's job — this only hands it a draft and
|
||||
// the files that go with it.
|
||||
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type ChangeEvent,
|
||||
type ClipboardEvent,
|
||||
type DragEvent,
|
||||
type FormEvent,
|
||||
type KeyboardEvent,
|
||||
} from "react";
|
||||
|
||||
import type { AcpSessionConfigChoice, AcpSessionConfigOption } from "../../types.js";
|
||||
import {
|
||||
applyCommand,
|
||||
commandTokenAt,
|
||||
filterCommands,
|
||||
orderConfigOptions,
|
||||
type AvailableCommand,
|
||||
} from "./model.js";
|
||||
|
||||
/** Per-message ceilings the daemon enforces on uploads
|
||||
* (docs/STRUCTURED-VIEW.md, "Prompt and cancel"). */
|
||||
export const MAX_ATTACHMENTS = 10;
|
||||
export const MAX_ATTACHMENT_BYTES = 20 * 1024 * 1024;
|
||||
/** Pasted text at or above either bound becomes a `.txt` attachment instead of
|
||||
* going inline. */
|
||||
const PASTE_TO_FILE_CHARS = 4_000;
|
||||
const PASTE_TO_FILE_LINES = 40;
|
||||
|
||||
export interface ComposerProps {
|
||||
/** Files chosen but not yet sent. Owned by the pane so a failed send can put
|
||||
* them back. */
|
||||
attachments: File[];
|
||||
onAttachmentsChange(files: File[]): void;
|
||||
commands: AvailableCommand[];
|
||||
configOptions: AcpSessionConfigOption[];
|
||||
/** A turn is in flight — the cancel control replaces nothing, it appears
|
||||
* beside send (a queued message is still allowed). */
|
||||
turnActive: boolean;
|
||||
/** An upload/POST is in flight: the attachment controls are frozen. */
|
||||
uploading: boolean;
|
||||
configBusy: boolean;
|
||||
/** Restored into the box when a send fails. */
|
||||
draft: string;
|
||||
onDraftChange(draft: string): void;
|
||||
onSubmit(text: string, attachments: File[]): void;
|
||||
onCancel(): void;
|
||||
onConfigChange(option: AcpSessionConfigOption, value: string | boolean): void;
|
||||
onError(message: string): void;
|
||||
menuId: string;
|
||||
}
|
||||
|
||||
function configChoices(option: AcpSessionConfigOption): AcpSessionConfigChoice[] {
|
||||
return (option.options ?? []).flatMap((choice) => ("options" in choice ? choice.options : [choice]));
|
||||
}
|
||||
|
||||
function currentConfigLabel(option: AcpSessionConfigOption): string {
|
||||
if (typeof option.currentValue === "boolean") return option.currentValue ? "On" : "Off";
|
||||
return configChoices(option).find((choice) => choice.value === option.currentValue)?.name
|
||||
?? String(option.currentValue);
|
||||
}
|
||||
|
||||
export function Composer({
|
||||
attachments,
|
||||
onAttachmentsChange,
|
||||
commands,
|
||||
configOptions,
|
||||
turnActive,
|
||||
uploading,
|
||||
configBusy,
|
||||
draft,
|
||||
onDraftChange,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
onConfigChange,
|
||||
onError,
|
||||
menuId,
|
||||
}: ComposerProps) {
|
||||
const inputRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
const fileRef = useRef<HTMLInputElement | null>(null);
|
||||
const configRef = useRef<HTMLDivElement | null>(null);
|
||||
const [caret, setCaret] = useState(0);
|
||||
const [activeCommand, setActiveCommand] = useState(0);
|
||||
const [configOpen, setConfigOpen] = useState(false);
|
||||
/** Escape closes the menu until the draft or caret moves again. */
|
||||
const [menuDismissed, setMenuDismissed] = useState(false);
|
||||
const pasteCount = useRef(0);
|
||||
|
||||
// Grow with the draft, up to the CSS max-height; past that it scrolls.
|
||||
useLayoutEffect(() => {
|
||||
const input = inputRef.current;
|
||||
if (!input) return;
|
||||
input.style.height = "auto";
|
||||
input.style.overflowY = "hidden";
|
||||
input.style.height = `${Math.min(input.scrollHeight, 160)}px`;
|
||||
if (input.scrollHeight > 160) input.style.overflowY = "auto";
|
||||
}, [draft]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!configOpen) return;
|
||||
const onPointerDown = (event: PointerEvent) => {
|
||||
if (!configRef.current?.contains(event.target as Node)) setConfigOpen(false);
|
||||
};
|
||||
document.addEventListener("pointerdown", onPointerDown);
|
||||
return () => document.removeEventListener("pointerdown", onPointerDown);
|
||||
}, [configOpen]);
|
||||
|
||||
const token = commandTokenAt(draft, caret, caret);
|
||||
const matches = token && commands.length > 0 ? filterCommands(commands, token.query) : [];
|
||||
const menuOpen = matches.length > 0 && !menuDismissed;
|
||||
const activeIndex = menuOpen ? Math.min(Math.max(activeCommand, 0), matches.length - 1) : -1;
|
||||
|
||||
const addFiles = useCallback(
|
||||
(files: File[]) => {
|
||||
if (uploading) return;
|
||||
const next = [...attachments];
|
||||
for (const file of files) {
|
||||
if (file.size > MAX_ATTACHMENT_BYTES) {
|
||||
onError(`${file.name} exceeds 20 MiB. Choose a smaller file.`);
|
||||
} else if (next.length >= MAX_ATTACHMENTS) {
|
||||
onError(`Attach up to ${MAX_ATTACHMENTS} files per message.`);
|
||||
} else {
|
||||
next.push(file);
|
||||
}
|
||||
}
|
||||
onAttachmentsChange(next);
|
||||
},
|
||||
[attachments, onAttachmentsChange, onError, uploading],
|
||||
);
|
||||
|
||||
const syncCaret = () => {
|
||||
setMenuDismissed(false);
|
||||
setCaret(inputRef.current?.selectionStart ?? 0);
|
||||
};
|
||||
|
||||
const chooseCommand = (command: AvailableCommand) => {
|
||||
const input = inputRef.current;
|
||||
if (!input) return;
|
||||
const current = commandTokenAt(draft, input.selectionStart, input.selectionEnd);
|
||||
if (!current) return;
|
||||
const applied = applyCommand(draft, current, command.name);
|
||||
onDraftChange(applied.value);
|
||||
setActiveCommand(0);
|
||||
// The caret has to move after React has written the new value.
|
||||
requestAnimationFrame(() => {
|
||||
input.focus();
|
||||
input.setSelectionRange(applied.cursor, applied.cursor);
|
||||
setCaret(applied.cursor);
|
||||
});
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
if ((!draft.trim() && attachments.length === 0) || uploading) return;
|
||||
onSubmit(draft, attachments);
|
||||
};
|
||||
|
||||
const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (menuOpen) {
|
||||
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
const direction = event.key === "ArrowDown" ? 1 : -1;
|
||||
setActiveCommand((index) => (index + direction + matches.length) % matches.length);
|
||||
return;
|
||||
}
|
||||
if ((event.key === "Enter" && !event.shiftKey) || event.key === "Tab") {
|
||||
event.preventDefault();
|
||||
chooseCommand(matches[activeIndex]);
|
||||
return;
|
||||
}
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
setMenuDismissed(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
submit();
|
||||
}
|
||||
};
|
||||
|
||||
const onPaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
|
||||
const clipboard = event.clipboardData;
|
||||
if (!clipboard || uploading) return;
|
||||
if (clipboard.files.length) {
|
||||
event.preventDefault();
|
||||
addFiles(Array.from(clipboard.files));
|
||||
return;
|
||||
}
|
||||
const text = clipboard.getData("text/plain");
|
||||
if (text.length < PASTE_TO_FILE_CHARS && text.split("\n").length < PASTE_TO_FILE_LINES) return;
|
||||
// No slot for it, or too big to upload: leave it inline rather than
|
||||
// dropping it on the floor.
|
||||
if (attachments.length >= MAX_ATTACHMENTS || new Blob([text]).size > MAX_ATTACHMENT_BYTES) return;
|
||||
event.preventDefault();
|
||||
addFiles([new File([text], `pasted-${++pasteCount.current}.txt`, { type: "text/plain" })]);
|
||||
};
|
||||
|
||||
const ordered = orderConfigOptions(configOptions);
|
||||
const summary = ordered.map((option) => `${option.name}: ${currentConfigLabel(option)}`).join("\n");
|
||||
|
||||
return (
|
||||
<form
|
||||
className="structured-composer"
|
||||
onSubmit={(event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
submit();
|
||||
}}
|
||||
onDragOver={(event: DragEvent) => {
|
||||
if (event.dataTransfer?.types.includes("Files")) event.preventDefault();
|
||||
}}
|
||||
onDrop={(event: DragEvent) => {
|
||||
if (!event.dataTransfer?.files.length) return;
|
||||
event.preventDefault();
|
||||
addFiles(Array.from(event.dataTransfer.files));
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="structured-attach"
|
||||
aria-label="Attach files"
|
||||
title="Attach files (up to 20 MiB each)"
|
||||
disabled={uploading}
|
||||
onClick={() => fileRef.current?.click()}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||||
<path d="m8 12 7-7a3 3 0 0 1 4 4L9 19a5 5 0 0 1-7-7L12 2M5 14l9-9" />
|
||||
</svg>
|
||||
</button>
|
||||
<input
|
||||
ref={fileRef}
|
||||
className="structured-file-input"
|
||||
type="file"
|
||||
multiple
|
||||
hidden
|
||||
disabled={uploading}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
addFiles(Array.from(event.target.files ?? []));
|
||||
event.target.value = "";
|
||||
}}
|
||||
/>
|
||||
<div className="structured-input-wrap">
|
||||
<div className="structured-attachments" aria-label="Attachments" aria-live="polite" hidden={attachments.length === 0}>
|
||||
{attachments.map((file, index) => (
|
||||
<span key={`${file.name}-${index}`} className="structured-attachment">
|
||||
<span title={`${file.name} (${file.size.toLocaleString()} bytes)`}>{file.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Remove ${file.name}`}
|
||||
disabled={uploading}
|
||||
onClick={() => onAttachmentsChange(attachments.filter((_, i) => i !== index))}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div id={menuId} className="structured-command-menu" role="listbox" hidden={!menuOpen}>
|
||||
{matches.map((command, index) => (
|
||||
<div
|
||||
key={command.name}
|
||||
id={`${menuId}-option-${index}`}
|
||||
className="structured-command-option"
|
||||
role="option"
|
||||
aria-selected={index === activeIndex}
|
||||
onPointerDown={(event) => event.preventDefault()}
|
||||
onClick={() => chooseCommand(command)}
|
||||
>
|
||||
<div className="structured-command-title">
|
||||
<span className="structured-command-name">{`/${command.name}`}</span>
|
||||
<span className="structured-command-hint">{command.input?.hint ?? ""}</span>
|
||||
</div>
|
||||
<div className="structured-command-description">
|
||||
{command.description.replace(/\s+/g, " ").trim()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
className="structured-input"
|
||||
rows={1}
|
||||
placeholder="Reply, or / for commands…"
|
||||
autoComplete="off"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded={menuOpen}
|
||||
aria-controls={menuId}
|
||||
aria-activedescendant={activeIndex >= 0 ? `${menuId}-option-${activeIndex}` : undefined}
|
||||
value={draft}
|
||||
onChange={(event) => {
|
||||
onDraftChange(event.target.value);
|
||||
setActiveCommand(0);
|
||||
setMenuDismissed(false);
|
||||
setCaret(event.target.selectionStart ?? event.target.value.length);
|
||||
}}
|
||||
onClick={syncCaret}
|
||||
onSelect={syncCaret}
|
||||
onKeyUp={(event) => {
|
||||
if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) syncCaret();
|
||||
}}
|
||||
onKeyDown={onKeyDown}
|
||||
onPaste={onPaste}
|
||||
/>
|
||||
</div>
|
||||
<div className="structured-config" ref={configRef} hidden={ordered.length === 0}>
|
||||
<button
|
||||
type="button"
|
||||
className="structured-config-trigger"
|
||||
aria-haspopup="true"
|
||||
aria-expanded={configOpen}
|
||||
aria-label={`Session settings. ${summary.replaceAll("\n", ". ")}`}
|
||||
title={summary}
|
||||
disabled={configBusy}
|
||||
onClick={() => setConfigOpen((open) => !open)}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
className="structured-config-menu"
|
||||
role="group"
|
||||
aria-label="Session settings"
|
||||
hidden={!configOpen}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key !== "Escape") return;
|
||||
setConfigOpen(false);
|
||||
configRef.current?.querySelector<HTMLButtonElement>(".structured-config-trigger")?.focus();
|
||||
}}
|
||||
>
|
||||
{ordered.map((option) => (
|
||||
<label key={option.id} className="structured-config-row" title={option.description ?? undefined}>
|
||||
<span className="structured-config-name">{option.name}</span>
|
||||
{option.type === "select" ? (
|
||||
<select
|
||||
className="structured-config-select"
|
||||
disabled={configBusy}
|
||||
value={String(option.currentValue)}
|
||||
onChange={(event) => onConfigChange(option, event.target.value)}
|
||||
>
|
||||
{configChoices(option).map((choice) => (
|
||||
<option key={choice.value} value={choice.value} title={choice.description ?? ""}>
|
||||
{choice.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : option.type === "boolean" ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
className="structured-config-toggle"
|
||||
disabled={configBusy}
|
||||
checked={option.currentValue === true}
|
||||
onChange={(event) => onConfigChange(option, event.target.checked)}
|
||||
/>
|
||||
) : null}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" className="structured-send">
|
||||
<span>Send</span>
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true">
|
||||
<path d="m7 5 5 5-5 5M12 10H3" />
|
||||
</svg>
|
||||
</button>
|
||||
{turnActive && (
|
||||
<button
|
||||
type="button"
|
||||
className="structured-cancel"
|
||||
aria-label="Cancel turn"
|
||||
title="Cancel turn"
|
||||
onClick={onCancel}
|
||||
>
|
||||
<svg className="structured-cancel-spinner" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="2" strokeDasharray="50 14" strokeLinecap="round" />
|
||||
</svg>
|
||||
<svg className="structured-cancel-stop" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
// docs/STRUCTURED-VIEW.md: the web client's user, agent, thought, tool-detail
|
||||
// and notice text blocks copy their complete source text when clicked or
|
||||
// keyboard-activated. The visible node is whatever it wraps; this only adds
|
||||
// the affordance and the "copied"/"error" state the CSS reads.
|
||||
|
||||
import { useCallback, useEffect, useRef, useState, type ElementType, type ReactNode } from "react";
|
||||
|
||||
async function writeClipboard(text: string): Promise<void> {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return;
|
||||
} catch {
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = text;
|
||||
textarea.style.position = "fixed";
|
||||
textarea.style.opacity = "0";
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
const copied = document.execCommand?.("copy") ?? false;
|
||||
textarea.remove();
|
||||
if (!copied) throw new Error("clipboard unavailable");
|
||||
}
|
||||
}
|
||||
|
||||
export interface CopyableProps {
|
||||
/** The complete source text — not whatever the DOM happens to show. */
|
||||
text: string;
|
||||
/** Names the thing in the "Copy …" label ("message", "diff", "path", …). */
|
||||
label: string;
|
||||
as?: ElementType;
|
||||
className?: string;
|
||||
title?: string;
|
||||
children?: ReactNode;
|
||||
/** Extra attributes the row builders set (`data-row-id`, `lang`, …). */
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
/** Wrapping a node in a copy affordance. Empty `text` renders the node plain —
|
||||
* a control that copies nothing is worse than no control. */
|
||||
export function Copyable({
|
||||
text,
|
||||
label,
|
||||
as: Tag = "div",
|
||||
className,
|
||||
children,
|
||||
...rest
|
||||
}: CopyableProps) {
|
||||
const [copyState, setCopyState] = useState<"copied" | "error" | null>(null);
|
||||
const timer = useRef<number | null>(null);
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
if (timer.current !== null) window.clearTimeout(timer.current);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const copy = useCallback(() => {
|
||||
void writeClipboard(text).then(
|
||||
() => {
|
||||
setCopyState("copied");
|
||||
if (timer.current !== null) window.clearTimeout(timer.current);
|
||||
timer.current = window.setTimeout(() => setCopyState(null), 1200);
|
||||
},
|
||||
() => setCopyState("error"),
|
||||
);
|
||||
}, [text]);
|
||||
|
||||
if (!text) {
|
||||
return (
|
||||
<Tag className={className} {...rest}>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
|
||||
const ariaLabel = copyState === "copied" ? `${label} copied` : `Copy ${label}`;
|
||||
return (
|
||||
<Tag
|
||||
className={className ? `${className} st-copyable` : "st-copyable"}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label={ariaLabel}
|
||||
title={`Copy ${label}`}
|
||||
data-copy-state={copyState ?? undefined}
|
||||
onClick={(event: React.MouseEvent) => {
|
||||
// A link inside the block is a link, not a copy target.
|
||||
if ((event.target as Element | null)?.closest("a")) return;
|
||||
copy();
|
||||
}}
|
||||
onKeyDown={(event: React.KeyboardEvent) => {
|
||||
if (event.key !== "Enter" && event.key !== " ") return;
|
||||
event.preventDefault();
|
||||
copy();
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { cleanup, render, screen } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, it } from "vitest";
|
||||
|
||||
import { DiffView } from "./DiffView.js";
|
||||
import { toolDiffMeta } from "./model.js";
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
function lines(kind: string): string[] {
|
||||
return [...document.querySelectorAll(`.st-ln-${kind}`)].map((el) => el.textContent ?? "");
|
||||
}
|
||||
|
||||
describe("DiffView", () => {
|
||||
it("marks insertions and deletions with their column prefixes", () => {
|
||||
render(<DiffView diff={{ path: "src/a.ts", oldText: "one\ntwo\n", newText: "one\nTWO\nthree\n" }} />);
|
||||
expect(lines("del")).toEqual(["- two"]);
|
||||
expect(lines("add")).toEqual(["+ TWO", "+ three"]);
|
||||
expect(lines("ctx")).toEqual([" one"]);
|
||||
expect(screen.getByText("src/a.ts")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("carries the +added −removed counts the tool head shows", () => {
|
||||
render(<DiffView diff={{ path: "a.ts", oldText: "one\ntwo\n", newText: "one\nTWO\nthree\n" }} />);
|
||||
const body = document.querySelector<HTMLElement>(".st-diff")!;
|
||||
expect(body.dataset.added).toBe("2");
|
||||
expect(body.dataset.removed).toBe("1");
|
||||
expect(toolDiffMeta([{ type: "diff", path: "a.ts", oldText: "one\ntwo\n", newText: "one\nTWO\nthree\n" }]))
|
||||
.toBe("+2 −1");
|
||||
});
|
||||
|
||||
it("renders every line of a new file as added", () => {
|
||||
render(<DiffView diff={{ path: "new.ts", newText: "alpha\nbeta\n" }} />);
|
||||
expect(lines("add")).toEqual(["+ alpha", "+ beta"]);
|
||||
expect(lines("del")).toEqual([]);
|
||||
});
|
||||
|
||||
it("collapses a long unchanged run to a hunk summary", () => {
|
||||
const filler = Array.from({ length: 20 }, (_, i) => `line ${i}`).join("\n");
|
||||
render(<DiffView diff={{ path: "a.ts", oldText: `head\n${filler}\n`, newText: `HEAD\n${filler}\n` }} />);
|
||||
expect(lines("hunk")).toEqual(["⋯ 17 unchanged lines ⋯"]);
|
||||
});
|
||||
|
||||
it("copies the whole diff, prefixes included", () => {
|
||||
render(<DiffView diff={{ path: "a.ts", oldText: "one\n", newText: "two\n" }} />);
|
||||
const body = document.querySelector<HTMLElement>(".st-diff")!;
|
||||
expect(body.getAttribute("aria-label")).toBe("Copy diff");
|
||||
expect(body.textContent).toBe("- one+ two");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,56 @@
|
||||
// A `Diff` content block, rendered as coloured hunks. ACP hands over whole
|
||||
// `oldText`/`newText`, so the lines and their `+added −removed` counts are
|
||||
// computed here (structuredDiff.ts) rather than parsed out of a patch.
|
||||
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { computeDiffLines, diffStats, type DiffLine } from "../../structuredDiff.js";
|
||||
import type { AcpDiff } from "../../types.js";
|
||||
import { Copyable } from "./Copyable.js";
|
||||
|
||||
/** Column prefix by line kind. A `hunk` summary and an `eof` marker are their
|
||||
* own complete text, so neither takes one. */
|
||||
const PREFIX: Record<DiffLine["kind"], string> = {
|
||||
add: "+ ",
|
||||
del: "- ",
|
||||
ctx: " ",
|
||||
hunk: "",
|
||||
eof: "",
|
||||
};
|
||||
|
||||
export function diffLineText(line: DiffLine): string {
|
||||
return PREFIX[line.kind] + line.text;
|
||||
}
|
||||
|
||||
export interface DiffViewProps {
|
||||
diff: AcpDiff;
|
||||
}
|
||||
|
||||
export function DiffView({ diff }: DiffViewProps) {
|
||||
const lines = useMemo(() => computeDiffLines(diff.oldText, diff.newText), [diff.oldText, diff.newText]);
|
||||
const stats = useMemo(() => diffStats(lines), [lines]);
|
||||
const plain = useMemo(() => lines.map(diffLineText).join("\n"), [lines]);
|
||||
|
||||
return (
|
||||
<div className="st-diff-block">
|
||||
<Copyable className="st-diff-path" text={diff.path} label="path" title={diff.path}>
|
||||
{diff.path}
|
||||
</Copyable>
|
||||
<Copyable
|
||||
className="st-diff"
|
||||
text={plain}
|
||||
label="diff"
|
||||
data-added={stats.added}
|
||||
data-removed={stats.removed}
|
||||
>
|
||||
<pre>
|
||||
{lines.map((line, index) => (
|
||||
<span key={index} className={`st-ln st-ln-${line.kind}`}>
|
||||
{diffLineText(line)}
|
||||
</span>
|
||||
))}
|
||||
</pre>
|
||||
</Copyable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,403 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
vi.mock("../../api.js", async () => {
|
||||
const actual = await vi.importActual<typeof import("../../api.js")>("../../api.js");
|
||||
return {
|
||||
...actual,
|
||||
sendStructuredPrompt: vi.fn().mockResolvedValue(undefined),
|
||||
uploadStructuredFile: vi.fn().mockResolvedValue({ path: "/uploads/pasted.txt" }),
|
||||
cancelStructuredTurn: vi.fn().mockResolvedValue(undefined),
|
||||
resolveStructuredApproval: vi.fn().mockResolvedValue(undefined),
|
||||
setStructuredConfig: vi.fn().mockResolvedValue(undefined),
|
||||
};
|
||||
});
|
||||
|
||||
import {
|
||||
cancelStructuredTurn,
|
||||
resolveStructuredApproval,
|
||||
sendStructuredPrompt,
|
||||
uploadStructuredFile,
|
||||
} from "../../api.js";
|
||||
import { INITIAL_RECONNECT_MS } from "../../reconnect.js";
|
||||
import type { ReducedState, StructuredEvent, TranscriptRow } from "../../types.js";
|
||||
import { StructuredPane } from "./StructuredPane.js";
|
||||
|
||||
/** Just enough of a WebSocket for the pane to drive (mirrors structured.test.ts's
|
||||
* own fake, which the pre-React connection used). */
|
||||
class FakeSocket {
|
||||
onopen: (() => void) | null = null;
|
||||
onmessage: ((ev: { data: string }) => void) | null = null;
|
||||
onerror: (() => void) | null = null;
|
||||
onclose: ((ev: { code: number; reason: string }) => void) | null = null;
|
||||
closed = false;
|
||||
|
||||
open(): void {
|
||||
act(() => this.onopen?.());
|
||||
}
|
||||
emit(event: StructuredEvent): void {
|
||||
act(() => this.onmessage?.({ data: JSON.stringify(event) }));
|
||||
}
|
||||
drop(code = 1006, reason = ""): void {
|
||||
act(() => this.onclose?.({ code, reason }));
|
||||
}
|
||||
close(): void {
|
||||
this.closed = true;
|
||||
}
|
||||
}
|
||||
|
||||
const idle: ReducedState = { turn: { responding: false, thinking: false, active_tool_calls: [] } };
|
||||
const busy: ReducedState = { turn: { responding: true, thinking: false, active_tool_calls: [] } };
|
||||
|
||||
function row(id: string, kind: TranscriptRow["kind"], data: unknown = {}): TranscriptRow {
|
||||
return { id, kind, data };
|
||||
}
|
||||
|
||||
function chunk(id: string, kind: "user" | "agent_text" | "agent_thought", text: string): TranscriptRow {
|
||||
return row(id, kind, { content: { type: "text", text } });
|
||||
}
|
||||
|
||||
const APPROVAL_REQUEST = {
|
||||
toolCall: { title: "Write(secrets.txt)", kind: "edit", locations: [{ path: "/repo/secrets.txt" }] },
|
||||
options: [
|
||||
{ optionId: "a1", name: "Allow once", kind: "allow_once" },
|
||||
{ optionId: "a2", name: "Allow always", kind: "allow_always" },
|
||||
{ optionId: "r1", name: "Reject", kind: "reject_once" },
|
||||
],
|
||||
};
|
||||
|
||||
function mount(): { socket: FakeSocket; sockets: FakeSocket[] } {
|
||||
const sockets: FakeSocket[] = [];
|
||||
render(
|
||||
<StructuredPane
|
||||
sessionId="s1"
|
||||
socketFactory={() => {
|
||||
const socket = new FakeSocket();
|
||||
sockets.push(socket);
|
||||
return socket as unknown as WebSocket;
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
sockets[0].open();
|
||||
return { socket: sockets[0], sockets };
|
||||
}
|
||||
|
||||
function snapshot(socket: FakeSocket, rows: TranscriptRow[], state: ReducedState = idle): void {
|
||||
socket.emit({ type: "transcript_snapshot", snapshot: { cursor: rows.length, rows } });
|
||||
socket.emit({ type: "reduced_state", state });
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
describe("the eight row kinds", () => {
|
||||
it("renders user, agent, thought, tool, diff, approval and notice rows; never a plan", () => {
|
||||
const { socket } = mount();
|
||||
snapshot(
|
||||
socket,
|
||||
[
|
||||
chunk("user:1", "user", "please edit it"),
|
||||
chunk("agent:1", "agent_text", "**bold** answer"),
|
||||
chunk("thought:1", "agent_thought", "considering"),
|
||||
row("tool:1", "tool_call", { title: "Read(src/main.ts)", kind: "read", status: "completed" }),
|
||||
row("tool:2", "tool_diff", {
|
||||
title: "Edit(a.ts)",
|
||||
kind: "edit",
|
||||
status: "completed",
|
||||
content: [{ type: "diff", path: "a.ts", oldText: "one\n", newText: "one\ntwo\n" }],
|
||||
}),
|
||||
row("approval:1", "approval", APPROVAL_REQUEST),
|
||||
row("plan", "plan", { entries: [{ content: "step", priority: "high", status: "pending" }] }),
|
||||
row("notice:1", "notice", { sessionUpdate: "mystery_update" }),
|
||||
],
|
||||
{ ...idle, pending_approval: { nonce: "nonce-1", request: APPROVAL_REQUEST as never } },
|
||||
);
|
||||
|
||||
expect(screen.getByText("please edit it")).toBeTruthy();
|
||||
expect(document.querySelector(".st-row-agent strong")?.textContent).toBe("bold");
|
||||
expect(document.querySelector(".st-row-thought")?.textContent).toContain("considering");
|
||||
expect(screen.getByText("src/main.ts")).toBeTruthy();
|
||||
// The diff row's head carries the line counts, not a fabricated duration.
|
||||
expect(document.querySelector('[data-row-id="tool:2"] .st-tool-meta')?.textContent).toBe("+1 −0");
|
||||
expect(screen.getByText("permission requested")).toBeTruthy();
|
||||
expect(screen.getByText("[notice]")).toBeTruthy();
|
||||
expect(document.querySelector('[data-row-id="plan"]')).toBeNull();
|
||||
});
|
||||
|
||||
it("omits the state-only notices it consumes for `/` autocomplete", () => {
|
||||
const { socket } = mount();
|
||||
snapshot(socket, [
|
||||
row("notice:1", "notice", {
|
||||
sessionUpdate: "available_commands_update",
|
||||
availableCommands: [{ name: "compact", description: "Compact the conversation" }],
|
||||
}),
|
||||
row("notice:2", "notice", { sessionUpdate: "session_info_update" }),
|
||||
]);
|
||||
expect(screen.queryByText("[notice]")).toBeNull();
|
||||
|
||||
// …and offers them in the composer instead.
|
||||
const input = document.querySelector<HTMLTextAreaElement>(".structured-input")!;
|
||||
fireEvent.change(input, { target: { value: "/comp" } });
|
||||
expect(screen.getByText("/compact")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("renders a completed turn's footer inline, and retires it once the next turn starts", () => {
|
||||
const { socket } = mount();
|
||||
const footer = row("turn_meta:1", "notice", {
|
||||
maestroTurnMeta: { elapsedMs: 65_000, outcome: "completed", model: "sonnet", contextDelta: 1200 },
|
||||
});
|
||||
snapshot(socket, [chunk("user:1", "user", "go"), footer]);
|
||||
expect(screen.getByText("1m 5s · +1.2k context tokens · sonnet")).toBeTruthy();
|
||||
|
||||
socket.emit({
|
||||
type: "projection_update",
|
||||
transcript: { type: "append", row: chunk("user:2", "user", "again") },
|
||||
state: idle,
|
||||
});
|
||||
expect(screen.queryByText(/1m 5s/)).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("tool rows and activity groups", () => {
|
||||
it("collapses two or more tools in a turn into one group, opened on click", () => {
|
||||
const { socket } = mount();
|
||||
snapshot(socket, [
|
||||
chunk("user:1", "user", "go"),
|
||||
row("tool:1", "tool_call", { title: "Read(a.ts)", kind: "read", status: "completed" }),
|
||||
chunk("agent:1", "agent_text", "still working"),
|
||||
row("tool:2", "tool_call", { title: "Read(b.ts)", kind: "read", status: "completed" }),
|
||||
chunk("agent:2", "agent_text", "the answer"),
|
||||
]);
|
||||
|
||||
const head = screen.getByText("2 tool calls").closest("button")!;
|
||||
expect(head.getAttribute("aria-expanded")).toBe("false");
|
||||
// The final answer stays outside the group; the intermediate text is in it.
|
||||
expect(document.querySelector(".st-tool-group")!.contains(screen.getByText("the answer"))).toBe(false);
|
||||
expect(document.querySelector(".st-tool-group")!.contains(screen.getByText("still working"))).toBe(true);
|
||||
|
||||
fireEvent.click(head);
|
||||
expect(head.getAttribute("aria-expanded")).toBe("true");
|
||||
});
|
||||
|
||||
it("discloses a tool's output only once its head is opened", () => {
|
||||
const { socket } = mount();
|
||||
snapshot(socket, [
|
||||
row("tool:1", "tool_call", {
|
||||
title: "Execute(ls)",
|
||||
kind: "execute",
|
||||
status: "completed",
|
||||
content: [{ type: "content", content: { type: "text", text: "a.ts\nb.ts" } }],
|
||||
rawInput: { command: "ls" },
|
||||
rawOutput: { exit_code: 0 },
|
||||
}),
|
||||
]);
|
||||
expect(document.querySelector(".st-tool-text")).toBeNull();
|
||||
|
||||
fireEvent.click(document.querySelector<HTMLButtonElement>(".st-tool-head")!);
|
||||
expect(document.querySelector(".st-tool-text")?.textContent).toBe("a.ts\nb.ts");
|
||||
expect(screen.getByText("Exit code")).toBeTruthy();
|
||||
expect(document.querySelector(".st-tool-exit-ok")?.textContent).toBe("0");
|
||||
});
|
||||
|
||||
it("patches a tool row in place rather than appending a second one", () => {
|
||||
const { socket } = mount();
|
||||
snapshot(socket, [row("tool:1", "tool_call", { title: "Read(a.ts)", kind: "read", status: "in_progress" })]);
|
||||
expect(document.querySelector(".st-tool-meta")?.textContent).toBe("running");
|
||||
|
||||
socket.emit({
|
||||
type: "projection_update",
|
||||
transcript: {
|
||||
type: "patch",
|
||||
row: row("tool:1", "tool_call", { title: "Read(a.ts)", kind: "read", status: "completed" }),
|
||||
},
|
||||
state: idle,
|
||||
});
|
||||
expect(document.querySelectorAll('[data-row-id="tool:1"]')).toHaveLength(1);
|
||||
expect(document.querySelector(".st-tool-meta")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("approvals", () => {
|
||||
it("answers with the live nonce, offering only the decisions the request backs", async () => {
|
||||
const { socket } = mount();
|
||||
snapshot(socket, [row("approval:1", "approval", APPROVAL_REQUEST)], {
|
||||
...idle,
|
||||
pending_approval: { nonce: "nonce-1", request: APPROVAL_REQUEST as never },
|
||||
});
|
||||
|
||||
expect(screen.getByText("/repo/secrets.txt")).toBeTruthy();
|
||||
fireEvent.click(screen.getByText("Allow for session"));
|
||||
await waitFor(() =>
|
||||
expect(resolveStructuredApproval).toHaveBeenCalledWith("s1", "nonce-1", "allow_for_session"),
|
||||
);
|
||||
});
|
||||
|
||||
it("hides a decision the request offers no ACP option for", () => {
|
||||
const { socket } = mount();
|
||||
const request = { toolCall: { title: "Read(a.ts)" }, options: [{ optionId: "r", name: "No", kind: "reject_once" }] };
|
||||
snapshot(socket, [row("approval:1", "approval", request)], {
|
||||
...idle,
|
||||
pending_approval: { nonce: "nonce-2", request: request as never },
|
||||
});
|
||||
expect(screen.getByText("Deny")).toBeTruthy();
|
||||
expect(screen.queryByText("Allow once")).toBeNull();
|
||||
});
|
||||
|
||||
it("treats only the newest approval as pending, and hides resolved standalone ones", () => {
|
||||
const { socket } = mount();
|
||||
snapshot(
|
||||
socket,
|
||||
[row("approval:1", "approval", APPROVAL_REQUEST), row("approval:2", "approval", APPROVAL_REQUEST)],
|
||||
{ ...idle, pending_approval: { nonce: "nonce-3", request: APPROVAL_REQUEST as never } },
|
||||
);
|
||||
expect(screen.getAllByText("permission requested")).toHaveLength(1);
|
||||
expect(screen.queryByText(/approved/)).toBeNull();
|
||||
});
|
||||
|
||||
it("drops the controls once the approval is no longer pending", () => {
|
||||
const { socket } = mount();
|
||||
snapshot(socket, [row("approval:1", "approval", APPROVAL_REQUEST)], {
|
||||
...idle,
|
||||
pending_approval: { nonce: "nonce-4", request: APPROVAL_REQUEST as never },
|
||||
});
|
||||
expect(screen.getByText("Allow once")).toBeTruthy();
|
||||
|
||||
socket.emit({ type: "reduced_state", state: idle });
|
||||
expect(screen.queryByText("Allow once")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("prompt and cancel", () => {
|
||||
it("sends a draft, clearing the composer", async () => {
|
||||
const { socket } = mount();
|
||||
snapshot(socket, []);
|
||||
const input = document.querySelector<HTMLTextAreaElement>(".structured-input")!;
|
||||
fireEvent.change(input, { target: { value: "do the thing" } });
|
||||
fireEvent.submit(document.querySelector("form.structured-composer")!);
|
||||
|
||||
await waitFor(() => expect(sendStructuredPrompt).toHaveBeenCalledWith("s1", "do the thing"));
|
||||
expect(input.value).toBe("");
|
||||
});
|
||||
|
||||
it("uploads attachments and names them in the prompt", async () => {
|
||||
const { socket } = mount();
|
||||
snapshot(socket, []);
|
||||
const file = new File(["hello"], "notes.txt", { type: "text/plain" });
|
||||
fireEvent.change(document.querySelector<HTMLInputElement>(".structured-file-input")!, {
|
||||
target: { files: [file] },
|
||||
});
|
||||
expect(screen.getByText("notes.txt")).toBeTruthy();
|
||||
|
||||
fireEvent.change(document.querySelector<HTMLTextAreaElement>(".structured-input")!, {
|
||||
target: { value: "read this" },
|
||||
});
|
||||
fireEvent.submit(document.querySelector("form.structured-composer")!);
|
||||
|
||||
await waitFor(() => expect(uploadStructuredFile).toHaveBeenCalled());
|
||||
await waitFor(() =>
|
||||
expect(sendStructuredPrompt).toHaveBeenCalledWith(
|
||||
"s1",
|
||||
'read this\n\nAttached file "notes.txt": "/uploads/pasted.txt"',
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
it("queues a second message while a turn is in flight, and sends it when the turn ends", async () => {
|
||||
const { socket } = mount();
|
||||
snapshot(socket, [], busy);
|
||||
fireEvent.change(document.querySelector<HTMLTextAreaElement>(".structured-input")!, {
|
||||
target: { value: "next up" },
|
||||
});
|
||||
fireEvent.submit(document.querySelector("form.structured-composer")!);
|
||||
|
||||
expect(sendStructuredPrompt).not.toHaveBeenCalled();
|
||||
expect(document.querySelector(".st-row-queued")?.textContent).toBe("next up");
|
||||
|
||||
socket.emit({ type: "reduced_state", state: idle });
|
||||
await waitFor(() => expect(sendStructuredPrompt).toHaveBeenCalledWith("s1", "next up"));
|
||||
});
|
||||
|
||||
it("hands a failed send's draft back to the operator", async () => {
|
||||
vi.mocked(sendStructuredPrompt).mockRejectedValueOnce(new Error("boom"));
|
||||
const { socket } = mount();
|
||||
snapshot(socket, []);
|
||||
const input = document.querySelector<HTMLTextAreaElement>(".structured-input")!;
|
||||
fireEvent.change(input, { target: { value: "keep me" } });
|
||||
fireEvent.submit(document.querySelector("form.structured-composer")!);
|
||||
|
||||
await waitFor(() => expect(document.querySelector(".structured-error")?.textContent).toContain("boom"));
|
||||
expect(input.value).toBe("keep me");
|
||||
});
|
||||
|
||||
it("shows the cancel control only while a turn is live", () => {
|
||||
const { socket } = mount();
|
||||
snapshot(socket, []);
|
||||
expect(document.querySelector(".structured-cancel")).toBeNull();
|
||||
|
||||
socket.emit({ type: "reduced_state", state: busy });
|
||||
fireEvent.click(document.querySelector<HTMLButtonElement>(".structured-cancel")!);
|
||||
expect(cancelStructuredTurn).toHaveBeenCalledWith("s1");
|
||||
});
|
||||
|
||||
it("reports live turn activity above the composer", () => {
|
||||
const { socket } = mount();
|
||||
snapshot(socket, [], {
|
||||
turn: {
|
||||
responding: true,
|
||||
thinking: false,
|
||||
active_tool_calls: ["t1", "t2"],
|
||||
started_at: new Date(Date.now() - 5_000).toISOString(),
|
||||
},
|
||||
usage: { used: 12_000, size: 200_000 },
|
||||
});
|
||||
const activity = document.querySelector<HTMLElement>(".structured-activity")!;
|
||||
expect(activity.hidden).toBe(false);
|
||||
expect(activity.textContent).toContain("Running 2 tools");
|
||||
expect(activity.textContent).toContain("12k context / 200k context");
|
||||
});
|
||||
});
|
||||
|
||||
describe("the socket", () => {
|
||||
it("replaces the transcript wholesale on every snapshot, never merging", async () => {
|
||||
const { socket, sockets } = mount();
|
||||
snapshot(socket, [chunk("user:1", "user", "first")]);
|
||||
socket.drop(1006);
|
||||
|
||||
// The retry is on reconnect.ts's backoff schedule, not immediate.
|
||||
await act(async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, INITIAL_RECONNECT_MS + 20));
|
||||
});
|
||||
const replacement = sockets[1];
|
||||
expect(replacement).toBeDefined();
|
||||
replacement.open();
|
||||
snapshot(replacement, [chunk("user:2", "user", "second")]);
|
||||
expect(screen.queryByText("first")).toBeNull();
|
||||
expect(screen.getByText("second")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("reports a daemon rejection instead of retrying it", () => {
|
||||
const status = vi.fn();
|
||||
const sockets: FakeSocket[] = [];
|
||||
render(
|
||||
<StructuredPane
|
||||
sessionId="s1"
|
||||
onStatusChange={status}
|
||||
socketFactory={() => {
|
||||
const socket = new FakeSocket();
|
||||
sockets.push(socket);
|
||||
return socket as unknown as WebSocket;
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
sockets[0].open();
|
||||
sockets[0].drop(4004, "not a structured session");
|
||||
expect(sockets).toHaveLength(1);
|
||||
expect(status).toHaveBeenCalledWith("error", "not a structured session");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,400 @@
|
||||
// React port of structured.ts (#246): a live structured session — the
|
||||
// transcript from `WS /api/structured/:id`, the composer that drives
|
||||
// `.../prompt` and `.../cancel`, and the approval controls that answer
|
||||
// `.../approvals/:nonce`. docs/STRUCTURED-VIEW.md is the contract.
|
||||
//
|
||||
// Like TerminalPane, the pane draws the body only: pane chrome (title,
|
||||
// disconnect, sessions drawer) belongs to whatever composes it, which reads
|
||||
// the connection state through `onStatusChange`.
|
||||
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
import {
|
||||
cancelStructuredTurn,
|
||||
resolveStructuredApproval,
|
||||
sendStructuredPrompt,
|
||||
setStructuredConfig,
|
||||
uploadStructuredFile,
|
||||
} from "../../api.js";
|
||||
import { formatContextTokens, formatElapsed } from "../../structuredRender.js";
|
||||
import type {
|
||||
AcpSessionConfigOption,
|
||||
StructuredApprovalDecision,
|
||||
TranscriptRow as Row,
|
||||
Uuid,
|
||||
} from "../../types.js";
|
||||
import { Composer } from "./Composer.js";
|
||||
import {
|
||||
commandsFromTranscript,
|
||||
pendingApprovalRowId as pendingApprovalRowIdOf,
|
||||
transcriptItems,
|
||||
turnIsActive,
|
||||
} from "./model.js";
|
||||
import { ToolGroup } from "./ToolGroup.js";
|
||||
import { TranscriptRow } from "./TranscriptRow.js";
|
||||
import { useStructuredSession, type StructuredStatus, type StructuredSocketFactory } from "./useStructuredSession.js";
|
||||
import "./structured.css";
|
||||
|
||||
/** Within this much of the bottom, wheel and touch imprecision should still
|
||||
* count as following. */
|
||||
const FOLLOW_BOTTOM_THRESHOLD_PX = 64;
|
||||
|
||||
interface QueuedPrompt {
|
||||
text: string;
|
||||
attachments: File[];
|
||||
}
|
||||
|
||||
export interface StructuredPaneProps {
|
||||
sessionId: Uuid;
|
||||
/** Grabs the composer once mounted. A sidebar preview passes `false`. */
|
||||
focus?: boolean;
|
||||
shouldReconnect?: (code: number) => boolean;
|
||||
onClosed?: () => void;
|
||||
onStatusChange?: (status: StructuredStatus, detail?: string) => void;
|
||||
/** Test seam: drive the socket without a daemon. */
|
||||
socketFactory?: StructuredSocketFactory;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export interface StructuredPaneHandle {
|
||||
/** Put the keyboard in the composer — the structured pane's terminal. */
|
||||
focusComposer(): void;
|
||||
}
|
||||
|
||||
export const StructuredPane = forwardRef<StructuredPaneHandle, StructuredPaneProps>(function StructuredPane(
|
||||
{ sessionId, focus = true, shouldReconnect, onClosed, onStatusChange, socketFactory, className },
|
||||
ref,
|
||||
) {
|
||||
const session = useStructuredSession(sessionId, { shouldReconnect, onClosed, socketFactory });
|
||||
const { rows, state, status, detail, socketGeneration } = session;
|
||||
|
||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||
const composerRef = useRef<HTMLDivElement | null>(null);
|
||||
const followingBottom = useRef(true);
|
||||
|
||||
const [expandedRows, setExpandedRows] = useState<ReadonlySet<string>>(new Set());
|
||||
const [expandedGroups, setExpandedGroups] = useState<ReadonlySet<string>>(new Set());
|
||||
const [draft, setDraft] = useState("");
|
||||
const [attachments, setAttachments] = useState<File[]>([]);
|
||||
const [queue, setQueue] = useState<QueuedPrompt[]>([]);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [configBusy, setConfigBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [now, setNow] = useState(() => Date.now());
|
||||
/** Server path → object URL, so a user row can preview an image it uploaded. */
|
||||
const imageUrls = useRef(new Map<string, string>());
|
||||
|
||||
// Submission bookkeeping, ported from structured.ts: a prompt is "sending"
|
||||
// from the POST until the projection shows the turn it claimed, and an
|
||||
// acceptance that straddles a reconnect forces one more reconnect so the
|
||||
// snapshot cannot predate the 204.
|
||||
const submission = useRef(0);
|
||||
const accepted = useRef<{ generation: number; socketGeneration: number } | null>(null);
|
||||
const optimisticStart = useRef<number | null>(null);
|
||||
const promptPending = useRef(false);
|
||||
const [awaitingBegin, setAwaitingBegin] = useState<number | null>(null);
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
focusComposer: () => composerRef.current?.querySelector<HTMLTextAreaElement>(".structured-input")?.focus(),
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
onStatusChange?.(status, detail ?? undefined);
|
||||
}, [status, detail, onStatusChange]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!focus) return;
|
||||
composerRef.current?.querySelector<HTMLTextAreaElement>(".structured-input")?.focus();
|
||||
}, [focus]);
|
||||
|
||||
const urls = imageUrls.current;
|
||||
useEffect(
|
||||
() => () => {
|
||||
for (const url of urls.values()) URL.revokeObjectURL(url);
|
||||
urls.clear();
|
||||
},
|
||||
[urls],
|
||||
);
|
||||
|
||||
const turnActive = turnIsActive(state);
|
||||
const pendingRowId = useMemo(() => pendingApprovalRowIdOf(rows, state), [rows, state]);
|
||||
const items = useMemo(
|
||||
() => transcriptItems(rows, pendingRowId, turnActive),
|
||||
[rows, pendingRowId, turnActive],
|
||||
);
|
||||
const commands = useMemo(() => commandsFromTranscript(rows), [rows]);
|
||||
const configOptions: AcpSessionConfigOption[] = state.config_options?.configOptions ?? [];
|
||||
|
||||
const active = turnActive || awaitingBegin !== null;
|
||||
|
||||
// Stop saying "Sending" once the turn the submission was waiting for has
|
||||
// begun — or, when it was accepted but a replacement socket has
|
||||
// re-snapshotted since, once that newer snapshot has landed. Without the
|
||||
// second case a prompt accepted across a reconnect would say "Sending"
|
||||
// forever.
|
||||
useEffect(() => {
|
||||
if (turnActive) {
|
||||
setAwaitingBegin(null);
|
||||
} else if (
|
||||
awaitingBegin !== null &&
|
||||
accepted.current?.generation === awaitingBegin &&
|
||||
socketGeneration > accepted.current.socketGeneration
|
||||
) {
|
||||
setAwaitingBegin(null);
|
||||
}
|
||||
}, [turnActive, awaitingBegin, socketGeneration]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!active) optimisticStart.current = null;
|
||||
}, [active]);
|
||||
|
||||
// Keep the pane pinned to the newest row unless the operator scrolled away.
|
||||
useLayoutEffect(() => {
|
||||
const el = scrollRef.current;
|
||||
if (!el || !followingBottom.current) return;
|
||||
el.scrollTop = Math.max(0, el.scrollHeight - el.clientHeight);
|
||||
}, [items, active, queue]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!active) return;
|
||||
const timer = window.setInterval(() => setNow(Date.now()), 1_000);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [active]);
|
||||
|
||||
const onScroll = () => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
followingBottom.current = el.scrollHeight - el.clientHeight - el.scrollTop <= FOLLOW_BOTTOM_THRESHOLD_PX;
|
||||
};
|
||||
|
||||
const decide = useCallback(
|
||||
async (rowId: string, decision: StructuredApprovalDecision): Promise<void> => {
|
||||
const nonce = state.pending_approval?.nonce;
|
||||
// Already resolved elsewhere between the click and here. A stale nonce
|
||||
// is a no-op, not an error (docs/STRUCTURED-VIEW.md: any nonce answers
|
||||
// 204), and the row's buttons are already gone — resolve quietly.
|
||||
if (!nonce || rowId !== pendingRowId) return;
|
||||
try {
|
||||
await resolveStructuredApproval(sessionId, nonce, decision);
|
||||
} catch (e: unknown) {
|
||||
// Propagate — so the row re-enables its buttons — only while this is
|
||||
// still the pending approval. If it moved on in flight, reviving the
|
||||
// buttons would revive a decision that no longer applies.
|
||||
setError(String(e));
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
[sessionId, state.pending_approval?.nonce, pendingRowId],
|
||||
);
|
||||
|
||||
const dispatchPrompt = useCallback(
|
||||
(text: string, files: File[]) => {
|
||||
const generation = ++submission.current;
|
||||
const submissionSocket = socketGeneration;
|
||||
setAwaitingBegin(generation);
|
||||
optimisticStart.current = Date.now();
|
||||
accepted.current = null;
|
||||
promptPending.current = true;
|
||||
setUploading(files.length > 0);
|
||||
setDraft("");
|
||||
setError(null);
|
||||
|
||||
const send = async () => {
|
||||
const references: string[] = [];
|
||||
for (const file of files) {
|
||||
const { path } = await uploadStructuredFile(sessionId, file);
|
||||
if (file.type.startsWith("image/")) imageUrls.current.set(path, URL.createObjectURL(file));
|
||||
references.push(`Attached file ${JSON.stringify(file.name)}: ${JSON.stringify(path)}`);
|
||||
}
|
||||
await sendStructuredPrompt(sessionId, [text, ...references].filter(Boolean).join("\n\n"));
|
||||
};
|
||||
|
||||
void send().then(
|
||||
() => {
|
||||
promptPending.current = false;
|
||||
if (generation !== submission.current) return;
|
||||
setUploading(false);
|
||||
setAttachments((current) => (current === files ? [] : current));
|
||||
accepted.current = { generation, socketGeneration };
|
||||
// A replacement socket may have captured idle before the POST
|
||||
// claimed the prompt. Reconnect so its snapshot cannot predate the
|
||||
// 204.
|
||||
if (socketGeneration > submissionSocket) session.reconnect();
|
||||
},
|
||||
(e: unknown) => {
|
||||
promptPending.current = false;
|
||||
if (generation !== submission.current) return;
|
||||
setAwaitingBegin((current) => (current === generation ? null : current));
|
||||
optimisticStart.current = null;
|
||||
setUploading(false);
|
||||
// The draft and its attachments are the operator's work — a failed
|
||||
// send hands both back rather than eating them.
|
||||
setAttachments((current) => (current.length === 0 ? files : current));
|
||||
setDraft((current) => (current === "" ? text : current));
|
||||
setError(String(e));
|
||||
},
|
||||
);
|
||||
},
|
||||
[sessionId, socketGeneration, session],
|
||||
);
|
||||
|
||||
// A queued message goes out as soon as the projected turn is idle — the
|
||||
// daemon answers a second prompt `409 turn_in_flight`, so the queue is
|
||||
// client-local (docs/STRUCTURED-VIEW.md).
|
||||
useEffect(() => {
|
||||
if (active || promptPending.current || queue.length === 0) return;
|
||||
const [next, ...rest] = queue;
|
||||
setQueue(rest);
|
||||
dispatchPrompt(next.text, next.attachments);
|
||||
}, [active, queue, dispatchPrompt]);
|
||||
|
||||
const submit = (text: string, files: File[]) => {
|
||||
if (active || queue.length > 0) {
|
||||
setQueue((current) => [...current, { text, attachments: files }]);
|
||||
setAttachments([]);
|
||||
setDraft("");
|
||||
setError(null);
|
||||
return;
|
||||
}
|
||||
dispatchPrompt(text, files);
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
setError(null);
|
||||
cancelStructuredTurn(sessionId).catch((e: unknown) => setError(String(e)));
|
||||
};
|
||||
|
||||
const changeConfig = (option: AcpSessionConfigOption, value: string | boolean) => {
|
||||
setConfigBusy(true);
|
||||
setError(null);
|
||||
setStructuredConfig(sessionId, { config_id: option.id, value })
|
||||
.catch((e: unknown) =>
|
||||
setError(e instanceof Error ? e.message : "Could not change the session setting"),
|
||||
)
|
||||
.finally(() => setConfigBusy(false));
|
||||
};
|
||||
|
||||
const elapsedMs = () => {
|
||||
const authoritative = state.turn.started_at ? Date.parse(state.turn.started_at) : Number.NaN;
|
||||
const startedAt = Number.isFinite(authoritative) ? authoritative : optimisticStart.current;
|
||||
return startedAt === null ? 0 : Math.max(0, now - startedAt);
|
||||
};
|
||||
|
||||
const activityLabel = () => {
|
||||
const tools = state.turn.active_tool_calls.length;
|
||||
const label = awaitingBegin !== null
|
||||
? "Sending"
|
||||
: state.turn.thinking
|
||||
? "Thinking"
|
||||
: tools > 0
|
||||
? `Running ${tools} ${tools === 1 ? "tool" : "tools"}`
|
||||
: "Responding";
|
||||
const parts = [label, formatElapsed(elapsedMs())];
|
||||
if (typeof state.usage?.used === "number") {
|
||||
const usage = formatContextTokens(state.usage.used);
|
||||
parts.push(
|
||||
typeof state.usage.size === "number" ? `${usage} / ${formatContextTokens(state.usage.size)}` : usage,
|
||||
);
|
||||
}
|
||||
return parts.join(" · ");
|
||||
};
|
||||
|
||||
const setRowExpanded = (id: string, expanded: boolean) =>
|
||||
setExpandedRows((current) => {
|
||||
const next = new Set(current);
|
||||
if (expanded) next.add(id);
|
||||
else next.delete(id);
|
||||
return next;
|
||||
});
|
||||
|
||||
const setGroupExpanded = (id: string, expanded: boolean) =>
|
||||
setExpandedGroups((current) => {
|
||||
const next = new Set(current);
|
||||
if (expanded) next.add(id);
|
||||
else next.delete(id);
|
||||
return next;
|
||||
});
|
||||
|
||||
const renderRow = (row: Row) => (
|
||||
<TranscriptRow
|
||||
key={row.id}
|
||||
row={row}
|
||||
pendingApproval={row.id === pendingRowId}
|
||||
onDecide={(decision) => decide(row.id, decision)}
|
||||
expanded={expandedRows.has(row.id)}
|
||||
onExpandedChange={(expanded) => setRowExpanded(row.id, expanded)}
|
||||
imageUrls={imageUrls.current}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={className ? `structured-pane ${className}` : "structured-pane"}>
|
||||
<div className="structured-body">
|
||||
<div className="structured-main">
|
||||
<div className="structured-scroll" ref={scrollRef} onScroll={onScroll}>
|
||||
<div className="structured-rows">
|
||||
{items.map((item) =>
|
||||
item.type === "row" ? (
|
||||
renderRow(item.row)
|
||||
) : (
|
||||
<ToolGroup
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
toolCount={item.group.toolCount}
|
||||
expanded={expandedGroups.has(item.id)}
|
||||
onExpandedChange={(expanded) => setGroupExpanded(item.id, expanded)}
|
||||
>
|
||||
{item.group.rows.map(renderRow)}
|
||||
</ToolGroup>
|
||||
),
|
||||
)}
|
||||
{queue.map((queued, index) => (
|
||||
<div key={`queued-${index}`} className="st-row st-row-queued">
|
||||
<div className="st-body">
|
||||
<div className="st-user-text">{queued.text}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="structured-activity" role="status" aria-live="polite" hidden={!active}>
|
||||
<span className="structured-activity-pulse" aria-hidden="true" />
|
||||
<span className="structured-activity-text">{active ? activityLabel() : ""}</span>
|
||||
</div>
|
||||
</div>
|
||||
{error !== null && <div className="structured-error">{error}</div>}
|
||||
<div ref={composerRef}>
|
||||
<Composer
|
||||
attachments={attachments}
|
||||
onAttachmentsChange={setAttachments}
|
||||
commands={commands}
|
||||
configOptions={configOptions}
|
||||
turnActive={active}
|
||||
uploading={uploading}
|
||||
configBusy={configBusy}
|
||||
draft={draft}
|
||||
onDraftChange={setDraft}
|
||||
onSubmit={submit}
|
||||
onCancel={cancel}
|
||||
onConfigChange={changeConfig}
|
||||
onError={setError}
|
||||
menuId={`structured-command-menu-${sessionId}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
// A turn's collapsed activity block: two or more tool rows after the same
|
||||
// `User` row, plus the narration absorbed between them. The header counts tool
|
||||
// rows only (docs/STRUCTURED-VIEW.md); opening it reveals tools and text in
|
||||
// chronological order.
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export interface ToolGroupProps {
|
||||
id: string;
|
||||
toolCount: number;
|
||||
expanded: boolean;
|
||||
onExpandedChange(expanded: boolean): void;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function ToolGroup({ id, toolCount, expanded, onExpandedChange, children }: ToolGroupProps) {
|
||||
return (
|
||||
<div className="st-tool-group" data-tool-group-id={id}>
|
||||
<button
|
||||
type="button"
|
||||
className="st-tool-group-head"
|
||||
aria-expanded={expanded}
|
||||
onClick={() => onExpandedChange(!expanded)}
|
||||
>
|
||||
<span className="st-tool-group-glyph" aria-hidden="true">
|
||||
›
|
||||
</span>
|
||||
<span className="st-tool-group-title">{`${toolCount} tool calls`}</span>
|
||||
</button>
|
||||
<div
|
||||
className={
|
||||
expanded ? "st-tool-group-body st-disclosure is-expanded" : "st-tool-group-body st-disclosure"
|
||||
}
|
||||
aria-hidden={!expanded}
|
||||
inert={!expanded}
|
||||
>
|
||||
<div className="st-disclosure-clip">
|
||||
<div className="st-disclosure-inner">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
// The glyph column of a tool row's head. Recognition is narrow on purpose: an
|
||||
// unrecognised or absent `ToolKind` gets the generic bullet, never a blank
|
||||
// column and never a mark that stands for the wrong kind of work.
|
||||
|
||||
import type { AcpToolKind } from "../../types.js";
|
||||
|
||||
/** Glyph shown in a tool row's head, by `ToolKind`. */
|
||||
const KIND_GLYPH: Record<string, string> = {
|
||||
read: "≡",
|
||||
edit: "±",
|
||||
delete: "✕",
|
||||
move: "→",
|
||||
search: "⌕",
|
||||
execute: "$",
|
||||
think: "…",
|
||||
fetch: "⇣",
|
||||
switch_mode: "⇄",
|
||||
};
|
||||
|
||||
export function toolGlyph(kind: string | undefined): string {
|
||||
return (kind && KIND_GLYPH[kind]) || "•";
|
||||
}
|
||||
|
||||
export interface ToolIconProps {
|
||||
kind: AcpToolKind | string | undefined;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ToolIcon({ kind, className = "st-tool-glyph" }: ToolIconProps) {
|
||||
return (
|
||||
<span className={className} aria-hidden="true">
|
||||
{toolGlyph(kind)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,387 @@
|
||||
// One transcript row, by kind. docs/STRUCTURED-VIEW.md fixes the eight kinds
|
||||
// and leaves every rendering decision here: markdown for AgentText, an inline
|
||||
// italic stream for AgentThought, a tool card for ToolCall/ToolDiff, a diff
|
||||
// view for ToolDiff's content, an approval card for Approval, and an opaque
|
||||
// collapsed line for a Notice nobody has taught the client about. `Plan` is
|
||||
// deliberately not drawn — the web client has no plan rail.
|
||||
|
||||
import { useEffect, useRef, type ReactNode } from "react";
|
||||
|
||||
import { renderInlineMarkdown, renderMarkdown, formatElapsed } from "../../structuredRender.js";
|
||||
import type {
|
||||
AcpContentBlock,
|
||||
AcpPermissionOption,
|
||||
AcpToolCallContent,
|
||||
AcpToolCallLike,
|
||||
StructuredApprovalDecision,
|
||||
TranscriptRow as Row,
|
||||
TurnMeta,
|
||||
} from "../../types.js";
|
||||
import { ApprovalView } from "./ApprovalView.js";
|
||||
import { Copyable } from "./Copyable.js";
|
||||
import { DiffView } from "./DiffView.js";
|
||||
import {
|
||||
contentBlockText,
|
||||
isStateOnlyNotice,
|
||||
splitToolTitle,
|
||||
statusMeta,
|
||||
toolDiffMeta,
|
||||
turnMeta,
|
||||
} from "./model.js";
|
||||
import { safeMediaSource, toolPayload } from "./toolPayload.js";
|
||||
import { ToolIcon } from "./ToolIcon.js";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// content rows: user / agent / thought
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Model-authored markdown, sanitized by structuredRender.ts before it enters
|
||||
* the DOM. Tables get their own scroller and links open out of the app. */
|
||||
function Prose({ html }: { html: string }) {
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
useEffect(() => {
|
||||
const container = ref.current;
|
||||
if (!container) return;
|
||||
for (const table of Array.from(container.querySelectorAll("table"))) {
|
||||
if (table.parentElement?.classList.contains("st-markdown-table-wrap")) continue;
|
||||
const scroller = document.createElement("div");
|
||||
scroller.className = "st-markdown-table-wrap";
|
||||
table.replaceWith(scroller);
|
||||
scroller.appendChild(table);
|
||||
}
|
||||
for (const link of container.querySelectorAll("a")) {
|
||||
link.target = "_blank";
|
||||
link.rel = "noopener noreferrer";
|
||||
}
|
||||
}, [html]);
|
||||
return <div ref={ref} className="st-body" dangerouslySetInnerHTML={{ __html: html }} />;
|
||||
}
|
||||
|
||||
export interface ContentRowProps {
|
||||
row: Row;
|
||||
variant: "user" | "agent" | "thought";
|
||||
/** Object URLs for images this prompt uploaded, keyed by the server path the
|
||||
* row's text names. */
|
||||
imageUrls?: Map<string, string>;
|
||||
}
|
||||
|
||||
/** `Attached file "name": "path"` references the composer appends on send. */
|
||||
const ATTACHED_FILE_RE = /Attached file "(?:[^"\\]|\\.)*": "((?:[^"\\]|\\.)*)"/g;
|
||||
|
||||
function attachedImages(text: string, imageUrls: Map<string, string>): string[] {
|
||||
const urls: string[] = [];
|
||||
ATTACHED_FILE_RE.lastIndex = 0;
|
||||
let match: RegExpExecArray | null;
|
||||
while ((match = ATTACHED_FILE_RE.exec(text)) !== null) {
|
||||
let serverPath: string;
|
||||
try {
|
||||
serverPath = JSON.parse(`"${match[1]}"`) as string;
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
const url = imageUrls.get(serverPath);
|
||||
if (url) urls.push(url);
|
||||
}
|
||||
return urls;
|
||||
}
|
||||
|
||||
export function ContentRow({ row, variant, imageUrls }: ContentRowProps) {
|
||||
const data = row.data as { content?: AcpContentBlock } | undefined;
|
||||
const text = contentBlockText(data?.content);
|
||||
const displayText = variant === "thought" ? text.trim() : text;
|
||||
const label = variant === "user" ? "message" : variant === "agent" ? "response" : "thought";
|
||||
|
||||
let body: ReactNode;
|
||||
if (variant === "user") {
|
||||
const images = imageUrls && imageUrls.size > 0 ? attachedImages(displayText, imageUrls) : [];
|
||||
// With previews in hand the path references are noise — the image is the
|
||||
// attachment. Without them the text is all the operator has, so it stays.
|
||||
const shown =
|
||||
images.length > 0
|
||||
? displayText.replace(/\n\nAttached file "[^"]*": "[^"]*"/g, "").trim()
|
||||
: displayText;
|
||||
body = (
|
||||
<div className="st-body">
|
||||
{shown && <div className="st-user-text">{shown}</div>}
|
||||
{images.map((src) => (
|
||||
<img key={src} className="st-user-image" src={src} alt="Uploaded image" loading="lazy" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
} else if (variant === "agent") {
|
||||
body = <Prose html={renderMarkdown(displayText)} />;
|
||||
} else {
|
||||
body = <div className="st-body" dangerouslySetInnerHTML={{ __html: renderInlineMarkdown(displayText) }} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Copyable className={`st-row st-row-${variant}`} text={displayText} label={label} data-row-id={row.id}>
|
||||
{body}
|
||||
</Copyable>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// tool rows
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function ToolDetailBlock({ label, text }: { label: string; text: string }) {
|
||||
return (
|
||||
<div className="st-tool-detail">
|
||||
<div className="st-tool-detail-label">{label}</div>
|
||||
<Copyable as="pre" text={text} label={label.toLowerCase()}>
|
||||
{text}
|
||||
</Copyable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ContentBlockView({ block }: { block: AcpContentBlock }) {
|
||||
if (block.type === "text") {
|
||||
if (!block.text) return null;
|
||||
return (
|
||||
<Copyable className="st-tool-text" text={block.text} label="output">
|
||||
{block.text}
|
||||
</Copyable>
|
||||
);
|
||||
}
|
||||
if (block.type === "image") {
|
||||
const source = safeMediaSource(block.mimeType, block.data, "image");
|
||||
if (source) return <img className="st-tool-image" src={source} alt="Tool output" loading="lazy" />;
|
||||
return <ToolDetailBlock label="Image" text={block.uri ?? block.mimeType ?? "Unavailable"} />;
|
||||
}
|
||||
if (block.type === "audio") {
|
||||
const source = safeMediaSource(block.mimeType, block.data, "audio");
|
||||
if (source) return <audio className="st-tool-audio" controls src={source} />;
|
||||
return <ToolDetailBlock label="Audio" text={block.mimeType ?? "Unavailable"} />;
|
||||
}
|
||||
if (block.type === "resource_link") {
|
||||
return (
|
||||
<div className="st-tool-resource">
|
||||
<span className="st-tool-resource-name">{block.title ?? block.name ?? "Resource"}</span>
|
||||
{block.uri && (
|
||||
<Copyable as="code" className="st-tool-resource-uri" text={block.uri} label="resource URI">
|
||||
{block.uri}
|
||||
</Copyable>
|
||||
)}
|
||||
{block.description && <span className="st-tool-resource-description">{block.description}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const resource = block.resource;
|
||||
if (typeof resource?.text === "string") {
|
||||
return (
|
||||
<ToolDetailBlock label={resource.uri ? `Resource · ${resource.uri}` : "Resource"} text={resource.text} />
|
||||
);
|
||||
}
|
||||
const printed = resource === undefined ? "" : JSON.stringify(resource, null, 2);
|
||||
return printed ? <ToolDetailBlock label="Resource" text={printed} /> : null;
|
||||
}
|
||||
|
||||
function ToolBody({ tool, content }: { tool: AcpToolCallLike; content: AcpToolCallContent[] }) {
|
||||
const payload = toolPayload(tool, content);
|
||||
const hasRaw = payload.raw.input !== null || payload.raw.output !== null;
|
||||
return (
|
||||
<>
|
||||
{content.map((block, index) => {
|
||||
if (block.type === "content") return <ContentBlockView key={index} block={block.content} />;
|
||||
if (block.type === "diff") return <DiffView key={index} diff={block} />;
|
||||
return (
|
||||
<div key={index} className="st-tool-terminal">
|
||||
{block.terminalId ? `Terminal · ${block.terminalId}` : "Embedded terminal"}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{payload.details.map((detail, index) => (
|
||||
<ToolDetailBlock key={`${detail.label}-${index}`} label={detail.label} text={detail.text} />
|
||||
))}
|
||||
{payload.exitCode !== null && (
|
||||
<div className="st-tool-fact">
|
||||
<span className="st-tool-fact-label">Exit code</span>
|
||||
<code className={payload.exitCode === 0 ? "st-tool-exit-ok" : "st-tool-exit-failed"}>
|
||||
{payload.exitCode}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
{hasRaw && (
|
||||
<details className="st-tool-raw">
|
||||
<summary>Raw JSON</summary>
|
||||
<div className="st-tool-raw-body">
|
||||
{payload.raw.input !== null && <ToolDetailBlock label="Input" text={payload.raw.input} />}
|
||||
{payload.raw.output !== null && <ToolDetailBlock label="Output" text={payload.raw.output} />}
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** True when a tool call has anything at all to disclose — a head with nothing
|
||||
* behind it stays a plain line rather than an empty disclosure. */
|
||||
function hasToolBody(tool: AcpToolCallLike, content: AcpToolCallContent[]): boolean {
|
||||
if (content.length > 0) return true;
|
||||
const payload = toolPayload(tool, content);
|
||||
return payload.details.length > 0 || payload.exitCode !== null || payload.raw.input !== null || payload.raw.output !== null;
|
||||
}
|
||||
|
||||
export interface ToolRowProps {
|
||||
row: Row;
|
||||
expanded: boolean;
|
||||
onExpandedChange(expanded: boolean): void;
|
||||
}
|
||||
|
||||
export function ToolRow({ row, expanded, onExpandedChange }: ToolRowProps) {
|
||||
const tool = (row.data ?? {}) as AcpToolCallLike;
|
||||
const content = tool.content ?? [];
|
||||
const hasDiff = content.some((c) => c.type === "diff");
|
||||
const { label, arg } = splitToolTitle(tool.title, tool.name, tool.kind);
|
||||
const meta = statusMeta(tool.status, hasDiff);
|
||||
const metaParts: string[] = [];
|
||||
if (hasDiff) metaParts.push(toolDiffMeta(content));
|
||||
if (meta) metaParts.push(meta.text);
|
||||
const disclosable = hasToolBody(tool, content);
|
||||
const open = expanded && disclosable;
|
||||
|
||||
return (
|
||||
<div className="st-row st-row-tool" data-row-id={row.id}>
|
||||
<div className="st-tool">
|
||||
<button
|
||||
type="button"
|
||||
className="st-tool-head"
|
||||
aria-expanded={open}
|
||||
onClick={() => disclosable && onExpandedChange(!open)}
|
||||
>
|
||||
<ToolIcon kind={tool.kind} />
|
||||
<span className="st-tool-name">{label}</span>
|
||||
<span className="st-tool-arg" title={arg}>
|
||||
{arg}
|
||||
</span>
|
||||
{metaParts.length > 0 && (
|
||||
<span className={meta ? `st-tool-meta st-tool-meta-${meta.kind}` : "st-tool-meta"}>
|
||||
{metaParts.join(" · ")}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{disclosable && (
|
||||
<div
|
||||
className={open ? "st-tool-out st-disclosure is-expanded" : "st-tool-out st-disclosure"}
|
||||
aria-hidden={!open}
|
||||
inert={!open}
|
||||
>
|
||||
<div className="st-disclosure-clip">
|
||||
<div className="st-disclosure-inner">
|
||||
{/* Built only once opened: a long transcript would otherwise
|
||||
render every tool's whole output up front. */}
|
||||
{open && <ToolBody tool={tool} content={content} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// notices and turn footers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function compactNumber(value: number): string {
|
||||
if (Math.abs(value) < 1_000) return String(value);
|
||||
if (Math.abs(value) < 1_000_000) return `${(value / 1_000).toFixed(value % 1_000 === 0 ? 0 : 1)}k`;
|
||||
return `${(value / 1_000_000).toFixed(value % 1_000_000 === 0 ? 0 : 1)}m`;
|
||||
}
|
||||
|
||||
export function TurnMetaRow({ meta }: { meta: TurnMeta }) {
|
||||
const parts = [formatElapsed(meta.elapsedMs)];
|
||||
if (typeof meta.contextDelta === "number") {
|
||||
const sign = meta.contextDelta > 0 ? "+" : "";
|
||||
parts.push(`${sign}${compactNumber(meta.contextDelta)} context tokens`);
|
||||
} else if (typeof meta.contextTokens === "number") {
|
||||
parts.push(`${compactNumber(meta.contextTokens)} context`);
|
||||
}
|
||||
if (meta.model) parts.push(meta.model);
|
||||
if (meta.outcome !== "completed") parts.push(meta.outcome);
|
||||
const text = parts.join(" · ");
|
||||
return (
|
||||
<Copyable
|
||||
className={`st-turn-meta st-turn-meta-${meta.outcome}`}
|
||||
text={text}
|
||||
label="turn details"
|
||||
aria-label={`Turn ${meta.outcome}`}
|
||||
>
|
||||
<span className="st-turn-meta-dot" aria-hidden="true" />
|
||||
<span>{text}</span>
|
||||
</Copyable>
|
||||
);
|
||||
}
|
||||
|
||||
/** The floor presentation docs/STRUCTURED-VIEW.md allows for a `Notice` the
|
||||
* client has nothing better to do with: an opaque, collapsed line. */
|
||||
export function NoticeRow({ row }: { row: Row }) {
|
||||
const text = `[${row.kind}]`;
|
||||
return (
|
||||
<Copyable className="st-row st-row-notice" text={text} label="notice" data-row-id={row.id}>
|
||||
<div className="st-body">{text}</div>
|
||||
</Copyable>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// dispatch
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface TranscriptRowProps {
|
||||
row: Row;
|
||||
/** This row is the one live approval (docs/STRUCTURED-VIEW.md's nonce
|
||||
* rules). Every other approval row is history. */
|
||||
pendingApproval?: boolean;
|
||||
onDecide?: (decision: StructuredApprovalDecision) => Promise<void>;
|
||||
expanded?: boolean;
|
||||
onExpandedChange?: (expanded: boolean) => void;
|
||||
imageUrls?: Map<string, string>;
|
||||
}
|
||||
|
||||
/** One transcript row, or `null` for the rows the web client omits (`plan`,
|
||||
* and the state-only notices it consumes for `/` autocomplete). */
|
||||
export function TranscriptRow({
|
||||
row,
|
||||
pendingApproval = false,
|
||||
onDecide,
|
||||
expanded = false,
|
||||
onExpandedChange,
|
||||
imageUrls,
|
||||
}: TranscriptRowProps) {
|
||||
switch (row.kind) {
|
||||
case "user":
|
||||
return <ContentRow row={row} variant="user" imageUrls={imageUrls} />;
|
||||
case "agent_text":
|
||||
return <ContentRow row={row} variant="agent" />;
|
||||
case "agent_thought":
|
||||
return <ContentRow row={row} variant="thought" />;
|
||||
case "tool_call":
|
||||
case "tool_diff":
|
||||
return (
|
||||
<ToolRow row={row} expanded={expanded} onExpandedChange={(next) => onExpandedChange?.(next)} />
|
||||
);
|
||||
case "approval": {
|
||||
const request = (row.data ?? {}) as { toolCall?: AcpToolCallLike; options?: AcpPermissionOption[] };
|
||||
return (
|
||||
<ApprovalView
|
||||
request={request}
|
||||
pending={pendingApproval}
|
||||
onDecide={onDecide ?? (() => Promise.resolve())}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case "plan":
|
||||
return null;
|
||||
case "notice": {
|
||||
if (isStateOnlyNotice(row)) return null;
|
||||
const meta = turnMeta(row);
|
||||
return meta ? <TurnMetaRow meta={meta} /> : <NoticeRow row={row} />;
|
||||
}
|
||||
default:
|
||||
return <NoticeRow row={row} />;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
export { StructuredPane, type StructuredPaneHandle, type StructuredPaneProps } from "./StructuredPane.js";
|
||||
export { TranscriptRow, type TranscriptRowProps } from "./TranscriptRow.js";
|
||||
export { DiffView, type DiffViewProps } from "./DiffView.js";
|
||||
export { ApprovalView, type ApprovalViewProps } from "./ApprovalView.js";
|
||||
export { ToolGroup, type ToolGroupProps } from "./ToolGroup.js";
|
||||
export { ToolIcon, toolGlyph, type ToolIconProps } from "./ToolIcon.js";
|
||||
export { Composer, type ComposerProps } from "./Composer.js";
|
||||
export {
|
||||
useStructuredSession,
|
||||
type StructuredSession,
|
||||
type StructuredSocketFactory,
|
||||
type StructuredStatus,
|
||||
} from "./useStructuredSession.js";
|
||||
@@ -0,0 +1,252 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import type { ReducedState, TranscriptRow } from "../../types.js";
|
||||
import {
|
||||
activityGroupsByTurn,
|
||||
applyCommand,
|
||||
commandsFromTranscript,
|
||||
commandTokenAt,
|
||||
contentBlockText,
|
||||
filterCommands,
|
||||
isStateOnlyNotice,
|
||||
offeredDecisions,
|
||||
orderConfigOptions,
|
||||
pendingApprovalRowId,
|
||||
splitToolTitle,
|
||||
statusMeta,
|
||||
toolDiffMeta,
|
||||
toolKindLabel,
|
||||
transcriptItems,
|
||||
turnMeta,
|
||||
} from "./model.js";
|
||||
|
||||
function row(id: string, kind: TranscriptRow["kind"], data: unknown = {}): TranscriptRow {
|
||||
return { id, kind, data };
|
||||
}
|
||||
|
||||
function tool(id: string): TranscriptRow {
|
||||
return row(id, "tool_call", { title: `Read(${id})`, status: "completed" });
|
||||
}
|
||||
|
||||
function text(id: string, kind: "user" | "agent_text" | "agent_thought", body: string): TranscriptRow {
|
||||
return row(id, kind, { content: { type: "text", text: body } });
|
||||
}
|
||||
|
||||
const idle: ReducedState = { turn: { responding: false, thinking: false, active_tool_calls: [] } };
|
||||
|
||||
describe("row taxonomy", () => {
|
||||
it("splits an adapter's Name(argument) title, and falls back to the kind", () => {
|
||||
expect(splitToolTitle("Read(src/main.ts)", null, "read")).toEqual({ label: "Read", arg: "src/main.ts" });
|
||||
expect(splitToolTitle("something opaque", null, "search")).toEqual({
|
||||
label: "Search",
|
||||
arg: "something opaque",
|
||||
});
|
||||
expect(splitToolTitle(undefined, null, undefined)).toEqual({ label: "Tool", arg: "" });
|
||||
});
|
||||
|
||||
it("labels an unknown tool kind rather than leaving it blank", () => {
|
||||
expect(toolKindLabel("execute")).toBe("Execute");
|
||||
expect(toolKindLabel("no_such_kind")).toBe("Tool");
|
||||
expect(toolKindLabel(undefined)).toBe("Tool");
|
||||
});
|
||||
|
||||
it("names non-text content blocks instead of dropping them", () => {
|
||||
expect(contentBlockText({ type: "text", text: "hi" })).toBe("hi");
|
||||
expect(contentBlockText({ type: "image" })).toBe("[image]");
|
||||
expect(contentBlockText({ type: "resource_link", name: "spec.md" })).toBe("[resource: spec.md]");
|
||||
expect(contentBlockText(undefined)).toBe("");
|
||||
});
|
||||
|
||||
it("counts a tool call's diff lines", () => {
|
||||
expect(toolDiffMeta([{ type: "diff", path: "a.ts", oldText: "one\ntwo\n", newText: "one\nTWO\nthree\n" }]))
|
||||
.toBe("+2 −1");
|
||||
expect(toolDiffMeta([])).toBe("+0 −0");
|
||||
});
|
||||
|
||||
it("shows a status only while it is worth showing", () => {
|
||||
expect(statusMeta("in_progress", false)).toEqual({ text: "running", kind: "running" });
|
||||
expect(statusMeta("failed", true)).toEqual({ text: "failed", kind: "failed" });
|
||||
expect(statusMeta("pending", true)).toBeNull(); // the diff counts already say it
|
||||
expect(statusMeta("completed", false)).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("notices", () => {
|
||||
it("reads a maestroTurnMeta footer, and only a well-formed one", () => {
|
||||
const meta = { elapsedMs: 4200, outcome: "completed", model: "sonnet" };
|
||||
expect(turnMeta(row("n1", "notice", { maestroTurnMeta: meta }))).toEqual(meta);
|
||||
expect(turnMeta(row("n2", "notice", { maestroTurnMeta: { outcome: "completed" } }))).toBeNull();
|
||||
expect(turnMeta(row("n3", "notice", { sessionUpdate: "session_info_update" }))).toBeNull();
|
||||
});
|
||||
|
||||
it("marks the state-only notices the client consumes rather than shows", () => {
|
||||
expect(isStateOnlyNotice(row("n1", "notice", { sessionUpdate: "available_commands_update" }))).toBe(true);
|
||||
expect(isStateOnlyNotice(row("n2", "notice", { sessionUpdate: "session_info_update" }))).toBe(true);
|
||||
expect(isStateOnlyNotice(row("n3", "notice", { sessionUpdate: "something_else" }))).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("approvals", () => {
|
||||
it("offers only decisions the request actually backs", () => {
|
||||
expect(
|
||||
offeredDecisions([
|
||||
{ optionId: "a", name: "Allow once", kind: "allow_once" },
|
||||
{ optionId: "r", name: "Reject", kind: "reject_once" },
|
||||
]),
|
||||
).toEqual(["allow_once", "deny"]);
|
||||
expect(offeredDecisions([{ optionId: "a", name: "Always", kind: "allow_always" }])).toEqual([
|
||||
"allow_for_session",
|
||||
]);
|
||||
expect(offeredDecisions([])).toEqual([]);
|
||||
});
|
||||
|
||||
it("points a live pending approval at the newest approval row", () => {
|
||||
const rows = [row("approval:1", "approval"), tool("tool:1"), row("approval:2", "approval")];
|
||||
const pending: ReducedState = {
|
||||
...idle,
|
||||
pending_approval: { nonce: "n", request: {} as never },
|
||||
};
|
||||
expect(pendingApprovalRowId(rows, pending)).toBe("approval:2");
|
||||
expect(pendingApprovalRowId(rows, idle)).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("activity grouping", () => {
|
||||
it("groups a turn's tools once there are two of them", () => {
|
||||
const rows = [text("user:1", "user", "go"), tool("tool:1"), tool("tool:2")];
|
||||
const groups = activityGroupsByTurn(rows, null, false);
|
||||
expect([...groups.keys()]).toEqual(["turn:user:1"]);
|
||||
expect(groups.get("turn:user:1")).toMatchObject({ toolCount: 2 });
|
||||
});
|
||||
|
||||
it("leaves a single tool call standalone", () => {
|
||||
const rows = [text("user:1", "user", "go"), tool("tool:1")];
|
||||
expect(activityGroupsByTurn(rows, null, false).size).toBe(0);
|
||||
});
|
||||
|
||||
it("absorbs intermediate narration but keeps the final answer outside", () => {
|
||||
const rows = [
|
||||
text("user:1", "user", "go"),
|
||||
tool("tool:1"),
|
||||
text("agent:1", "agent_text", "working"),
|
||||
tool("tool:2"),
|
||||
text("agent:2", "agent_text", "done"),
|
||||
];
|
||||
const group = activityGroupsByTurn(rows, null, false).get("turn:user:1")!;
|
||||
expect(group.rows.map((r) => r.id)).toEqual(["tool:1", "agent:1", "tool:2"]);
|
||||
expect(group.toolCount).toBe(2);
|
||||
});
|
||||
|
||||
it("keeps the newest thought outside while the turn is still live", () => {
|
||||
const rows = [
|
||||
text("user:1", "user", "go"),
|
||||
tool("tool:1"),
|
||||
tool("tool:2"),
|
||||
text("thought:1", "agent_thought", "hmm"),
|
||||
text("thought:2", "agent_thought", "aha"),
|
||||
];
|
||||
const live = activityGroupsByTurn(rows, null, true).get("turn:user:1")!;
|
||||
expect(live.rows.map((r) => r.id)).toEqual(["tool:1", "tool:2", "thought:1"]);
|
||||
const ended = activityGroupsByTurn(rows, null, false).get("turn:user:1")!;
|
||||
expect(ended.rows.map((r) => r.id)).toEqual(["tool:1", "tool:2", "thought:1", "thought:2"]);
|
||||
});
|
||||
|
||||
it("absorbs a resolved approval, never the pending one", () => {
|
||||
const rows = [
|
||||
text("user:1", "user", "go"),
|
||||
tool("tool:1"),
|
||||
row("approval:1", "approval"),
|
||||
tool("tool:2"),
|
||||
row("approval:2", "approval"),
|
||||
tool("tool:3"),
|
||||
];
|
||||
const group = activityGroupsByTurn(rows, "approval:2", false).get("turn:user:1")!;
|
||||
expect(group.rows.map((r) => r.id)).toEqual(["tool:1", "approval:1", "tool:2", "tool:3"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("transcript render list", () => {
|
||||
it("renders a group once, at its first member's position", () => {
|
||||
const rows = [text("user:1", "user", "go"), tool("tool:1"), tool("tool:2"), text("agent:1", "agent_text", "done")];
|
||||
const items = transcriptItems(rows, null, false);
|
||||
expect(items.map((item) => (item.type === "row" ? item.row.id : item.id))).toEqual([
|
||||
"user:1",
|
||||
"turn:user:1",
|
||||
"agent:1",
|
||||
]);
|
||||
});
|
||||
|
||||
it("omits plan rows, state-only notices and standalone resolved approvals", () => {
|
||||
const rows = [
|
||||
text("user:1", "user", "go"),
|
||||
row("plan", "plan", { entries: [] }),
|
||||
row("notice:1", "notice", { sessionUpdate: "available_commands_update", availableCommands: [] }),
|
||||
row("approval:1", "approval"),
|
||||
text("agent:1", "agent_text", "done"),
|
||||
];
|
||||
const items = transcriptItems(rows, null, false);
|
||||
expect(items.map((item) => (item.type === "row" ? item.row.id : item.id))).toEqual(["user:1", "agent:1"]);
|
||||
});
|
||||
|
||||
it("keeps a turn footer only while it is the final item", () => {
|
||||
const footer = row("turn_meta:1", "notice", { maestroTurnMeta: { elapsedMs: 10, outcome: "completed" } });
|
||||
expect(transcriptItems([text("user:1", "user", "go"), footer], null, false)).toHaveLength(2);
|
||||
const later = [text("user:1", "user", "go"), footer, text("user:2", "user", "again")];
|
||||
expect(transcriptItems(later, null, false).map((i) => (i.type === "row" ? i.row.id : i.id))).toEqual([
|
||||
"user:1",
|
||||
"user:2",
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("composer commands", () => {
|
||||
const notice = row("notice:9", "notice", {
|
||||
sessionUpdate: "available_commands_update",
|
||||
availableCommands: [
|
||||
{ name: "compact", description: "Compact the\n conversation" },
|
||||
{ name: "cost", description: "Show cost", input: { hint: "[period]" } },
|
||||
{ name: 42 },
|
||||
],
|
||||
});
|
||||
|
||||
it("takes the newest available_commands_update, skipping malformed entries", () => {
|
||||
const stale = row("notice:1", "notice", {
|
||||
sessionUpdate: "available_commands_update",
|
||||
availableCommands: [{ name: "old", description: "gone" }],
|
||||
});
|
||||
expect(commandsFromTranscript([stale, notice]).map((c) => c.name)).toEqual(["compact", "cost"]);
|
||||
expect(commandsFromTranscript([])).toEqual([]);
|
||||
});
|
||||
|
||||
it("only matches a /token under the caret", () => {
|
||||
expect(commandTokenAt("/comp", 5, 5)).toEqual({ start: 0, end: 5, query: "comp" });
|
||||
expect(commandTokenAt("hello /co there", 9, 9)).toEqual({ start: 6, end: 9, query: "co" });
|
||||
expect(commandTokenAt("no slash", 3, 3)).toBeNull();
|
||||
expect(commandTokenAt("/comp", 2, 5)).toBeNull(); // a selection is not a caret
|
||||
});
|
||||
|
||||
it("ranks prefix matches ahead of substring matches", () => {
|
||||
const commands = commandsFromTranscript([notice]);
|
||||
expect(filterCommands(commands, "co").map((c) => c.name)).toEqual(["compact", "cost"]);
|
||||
expect(filterCommands(commands, "act").map((c) => c.name)).toEqual(["compact"]);
|
||||
});
|
||||
|
||||
it("replaces only the token under the caret", () => {
|
||||
const token = commandTokenAt("say /co now", 7, 7)!;
|
||||
expect(applyCommand("say /co now", token, "compact")).toEqual({ value: "say /compact now", cursor: 13 });
|
||||
const trailing = commandTokenAt("/co", 3, 3)!;
|
||||
expect(applyCommand("/co", trailing, "compact")).toEqual({ value: "/compact ", cursor: 9 });
|
||||
});
|
||||
});
|
||||
|
||||
describe("session config", () => {
|
||||
it("orders the menu by category, unknown categories last", () => {
|
||||
const options = [
|
||||
{ id: "d", category: null },
|
||||
{ id: "b", category: "thought_level" },
|
||||
{ id: "a", category: "model" },
|
||||
{ id: "c", category: "mode" },
|
||||
];
|
||||
expect(orderConfigOptions(options).map((o) => o.id)).toEqual(["a", "b", "c", "d"]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,369 @@
|
||||
// Pure transcript logic for the structured pane (#246) — the decisions
|
||||
// docs/STRUCTURED-VIEW.md leaves to a client, kept out of the components so
|
||||
// they can be tested without a DOM or a socket. Ported from structured.ts's
|
||||
// private helpers and the parts of structuredRender.ts that were data, not
|
||||
// markup.
|
||||
|
||||
import type {
|
||||
AcpContentBlock,
|
||||
AcpPermissionOption,
|
||||
AcpToolCallContent,
|
||||
ReducedState,
|
||||
StructuredApprovalDecision,
|
||||
TranscriptRow,
|
||||
TranscriptRowKind,
|
||||
TurnMeta,
|
||||
} from "../../types.js";
|
||||
import { computeDiffLines, diffStats } from "../../structuredDiff.js";
|
||||
|
||||
/** Human label behind a `ToolKind`. An unrecognised/absent kind is "Tool" —
|
||||
* never a blank label. */
|
||||
const KIND_LABEL: Record<string, string> = {
|
||||
read: "Read",
|
||||
edit: "Edit",
|
||||
delete: "Delete",
|
||||
move: "Move",
|
||||
search: "Search",
|
||||
execute: "Execute",
|
||||
think: "Think",
|
||||
fetch: "Fetch",
|
||||
switch_mode: "Switch mode",
|
||||
};
|
||||
|
||||
export function toolKindLabel(kind: string | undefined): string {
|
||||
return (kind && KIND_LABEL[kind]) || "Tool";
|
||||
}
|
||||
|
||||
/** Split a title into `{label, arg}` when it follows the adapter's own
|
||||
* `Name(argument)` convention; otherwise the whole title is the arg and the
|
||||
* tool's `kind` supplies a generic label. Never guesses at a shape the data
|
||||
* doesn't actually show. */
|
||||
export function splitToolTitle(
|
||||
title: string | undefined,
|
||||
name: string | null | undefined,
|
||||
kind: string | undefined,
|
||||
): { label: string; arg: string } {
|
||||
const label = name ?? toolKindLabel(kind);
|
||||
if (!title) return { label, arg: "" };
|
||||
const m = /^(\S+)\(([\s\S]*)\)$/.exec(title);
|
||||
if (m) return { label: name ?? m[1], arg: m[2] };
|
||||
return { label, arg: title };
|
||||
}
|
||||
|
||||
/** Content-block text, or a labelled placeholder for anything that isn't
|
||||
* text — never dropped silently, never fabricated. */
|
||||
export function contentBlockText(block: AcpContentBlock | undefined): string {
|
||||
if (!block) return "";
|
||||
switch (block.type) {
|
||||
case "text":
|
||||
return block.text;
|
||||
case "image":
|
||||
return "[image]";
|
||||
case "audio":
|
||||
return "[audio]";
|
||||
case "resource_link":
|
||||
return `[resource: ${block.name ?? block.uri ?? "linked"}]`;
|
||||
case "resource":
|
||||
return "[resource]";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
/** `+added −removed` across every diff block in a tool call's content — real
|
||||
* derived data, never a fabricated duration. */
|
||||
export function toolDiffMeta(content: AcpToolCallContent[]): string {
|
||||
let added = 0;
|
||||
let removed = 0;
|
||||
for (const block of content) {
|
||||
if (block.type !== "diff") continue;
|
||||
const stats = diffStats(computeDiffLines(block.oldText, block.newText));
|
||||
added += stats.added;
|
||||
removed += stats.removed;
|
||||
}
|
||||
return `+${added} −${removed}`;
|
||||
}
|
||||
|
||||
export function statusMeta(
|
||||
status: string | undefined,
|
||||
hasDiff: boolean,
|
||||
): { text: string; kind: string } | null {
|
||||
if (status === "in_progress") return { text: "running", kind: "running" };
|
||||
if (status === "failed") return { text: "failed", kind: "failed" };
|
||||
if (status === "pending" && !hasDiff) return { text: "pending", kind: "pending" };
|
||||
return null;
|
||||
}
|
||||
|
||||
/** The `maestroTurnMeta` footer a `Notice` row carries when it is a completed,
|
||||
* cancelled or failed turn's durable footer — `null` for every other notice. */
|
||||
export function turnMeta(row: TranscriptRow): TurnMeta | null {
|
||||
if (row.kind !== "notice" || !row.data || typeof row.data !== "object") return null;
|
||||
const value = (row.data as { maestroTurnMeta?: unknown }).maestroTurnMeta;
|
||||
if (!value || typeof value !== "object") return null;
|
||||
const meta = value as Partial<TurnMeta>;
|
||||
if (typeof meta.elapsedMs !== "number" || typeof meta.outcome !== "string") return null;
|
||||
return meta as TurnMeta;
|
||||
}
|
||||
|
||||
/** Notices the web client consumes as state and omits from the visible
|
||||
* transcript (docs/STRUCTURED-VIEW.md, "A client decides"). */
|
||||
export function isStateOnlyNotice(row: TranscriptRow): boolean {
|
||||
if (row.kind !== "notice" || !row.data || typeof row.data !== "object") return false;
|
||||
const update = (row.data as { sessionUpdate?: string }).sessionUpdate;
|
||||
return update === "available_commands_update" || update === "session_info_update";
|
||||
}
|
||||
|
||||
/** Which decisions a permission request actually backs, by the
|
||||
* `PermissionOptionKind` values it offers (docs/STRUCTURED-VIEW.md's
|
||||
* "Decision mapping"). A decision with no matching option resolves
|
||||
* `Cancelled` server-side regardless of what the client sent — offering its
|
||||
* button would let the operator "allow" something that silently no-ops. */
|
||||
export function offeredDecisions(options: AcpPermissionOption[]): StructuredApprovalDecision[] {
|
||||
const kinds = new Set(options.map((o) => o.kind));
|
||||
const decisions: StructuredApprovalDecision[] = [];
|
||||
if (kinds.has("allow_once")) decisions.push("allow_once");
|
||||
if (kinds.has("allow_always")) decisions.push("allow_for_session");
|
||||
if (kinds.has("reject_once") || kinds.has("reject_always")) decisions.push("deny");
|
||||
return decisions;
|
||||
}
|
||||
|
||||
/** The row id a live `pending_approval` names: the newest `Approval` row.
|
||||
* Only one approval is ever live (docs/STRUCTURED-VIEW.md, "One live
|
||||
* approval at a time"), so the last one is the pending one. */
|
||||
export function pendingApprovalRowId(rows: TranscriptRow[], state: ReducedState): string | null {
|
||||
return state.pending_approval ? lastRowIdOfKind(rows, "approval") : null;
|
||||
}
|
||||
|
||||
export function lastRowIdOfKind(rows: TranscriptRow[], kind: TranscriptRowKind): string | null {
|
||||
for (let i = rows.length - 1; i >= 0; i--) if (rows[i].kind === kind) return rows[i].id;
|
||||
return null;
|
||||
}
|
||||
|
||||
export function turnIsActive(state: ReducedState): boolean {
|
||||
return state.turn.responding || state.turn.thinking;
|
||||
}
|
||||
|
||||
export interface ActivityGroup {
|
||||
/** Header label count — tool rows only, never absorbed text. */
|
||||
toolCount: number;
|
||||
/** Tools plus absorbed intermediate text/approvals, in transcript order. */
|
||||
rows: TranscriptRow[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Group tool rows (and intermediate agent text / resolved approvals between
|
||||
* them) by turn. An agent_text/agent_thought row is "intermediate" when a tool
|
||||
* row follows it in the same turn — it gets absorbed into the group so the
|
||||
* collapsed block preserves chronological order. Resolved approval rows (not
|
||||
* the currently pending one) are absorbed the same way. The *last* agent text
|
||||
* with no subsequent tool stays standalone (the prominent final answer).
|
||||
*
|
||||
* Returns groups keyed by `turn:<userId>`.
|
||||
*/
|
||||
export function activityGroupsByTurn(
|
||||
rows: TranscriptRow[],
|
||||
pendingApprovalId: string | null,
|
||||
turnActive: boolean,
|
||||
): Map<string, ActivityGroup> {
|
||||
// First: count tools per turn to know which turns qualify for grouping.
|
||||
const toolCounts = new Map<string, number>();
|
||||
let turnId = "before-first-message";
|
||||
for (const row of rows) {
|
||||
if (row.kind === "user") turnId = row.id;
|
||||
if (row.kind !== "tool_call" && row.kind !== "tool_diff") continue;
|
||||
const gid = `turn:${turnId}`;
|
||||
toolCounts.set(gid, (toolCounts.get(gid) ?? 0) + 1);
|
||||
}
|
||||
// Second: build groups with interleaved text for turns with 2+ tools.
|
||||
const groups = new Map<string, ActivityGroup>();
|
||||
turnId = "before-first-message";
|
||||
// Pending rows that might be intermediate (not yet confirmed by a following
|
||||
// tool). If no tool follows, they stay standalone.
|
||||
let pending: TranscriptRow[] = [];
|
||||
let currentGid = `turn:${turnId}`;
|
||||
for (const row of rows) {
|
||||
if (row.kind === "user") {
|
||||
turnId = row.id;
|
||||
currentGid = `turn:${turnId}`;
|
||||
pending = [];
|
||||
continue;
|
||||
}
|
||||
const count = toolCounts.get(currentGid) ?? 0;
|
||||
if (count < 2) continue;
|
||||
const isIntermediateText = row.kind === "agent_text" || row.kind === "agent_thought";
|
||||
const isResolvedApproval = row.kind === "approval" && row.id !== pendingApprovalId;
|
||||
if (isIntermediateText || isResolvedApproval) {
|
||||
pending.push(row);
|
||||
continue;
|
||||
}
|
||||
if (row.kind === "tool_call" || row.kind === "tool_diff") {
|
||||
const group = groups.get(currentGid) ?? { toolCount: count, rows: [] };
|
||||
// Flush any pending rows — a tool follows, so they're intermediate.
|
||||
group.rows.push(...pending);
|
||||
pending = [];
|
||||
group.rows.push(row);
|
||||
groups.set(currentGid, group);
|
||||
}
|
||||
}
|
||||
// A final agent text is the answer, so it stays outside. Thought rows are
|
||||
// working commentary, though: when a turn already has a disclosure they
|
||||
// belong with its activity even if the next tool call has not arrived yet.
|
||||
// While the turn is still live the most recent one stays outside as visible
|
||||
// narration (docs/STRUCTURED-VIEW.md), and is absorbed when the turn ends.
|
||||
const lastGroup = groups.get(currentGid);
|
||||
if (lastGroup && pending.length > 0 && pending.every((row) => row.kind === "agent_thought")) {
|
||||
const absorb = turnActive ? pending.slice(0, -1) : pending;
|
||||
lastGroup.rows.push(...absorb);
|
||||
}
|
||||
|
||||
return groups;
|
||||
}
|
||||
|
||||
/** One entry of the flattened render list: either a standalone row or a whole
|
||||
* activity group. */
|
||||
export type TranscriptItem =
|
||||
| { type: "row"; row: TranscriptRow }
|
||||
| { type: "group"; id: string; group: ActivityGroup };
|
||||
|
||||
/**
|
||||
* The transcript in render order: rows, with each turn's tool activity folded
|
||||
* into a single group item where one exists. Resolved approvals not absorbed
|
||||
* into a group are dropped — the tool row itself already identifies the
|
||||
* action. `plan` rows and state-only notices are dropped too (both clients
|
||||
* omit `Plan` from the transcript). A turn footer only survives as the final
|
||||
* item, so old footers stop reading like transcript content.
|
||||
*/
|
||||
export function transcriptItems(
|
||||
rows: TranscriptRow[],
|
||||
pendingApprovalId: string | null,
|
||||
turnActive: boolean,
|
||||
): TranscriptItem[] {
|
||||
const groups = activityGroupsByTurn(rows, pendingApprovalId, turnActive);
|
||||
const grouped = new Set<string>();
|
||||
for (const group of groups.values()) for (const row of group.rows) grouped.add(row.id);
|
||||
|
||||
const items: TranscriptItem[] = [];
|
||||
let turnId = "before-first-message";
|
||||
const emitted = new Set<string>();
|
||||
for (const row of rows) {
|
||||
if (row.kind === "user") turnId = row.id;
|
||||
const groupId = `turn:${turnId}`;
|
||||
const group = groups.get(groupId);
|
||||
if (group && grouped.has(row.id)) {
|
||||
// The group renders once, at its first member's position.
|
||||
if (!emitted.has(groupId)) {
|
||||
emitted.add(groupId);
|
||||
items.push({ type: "group", id: groupId, group });
|
||||
}
|
||||
continue;
|
||||
}
|
||||
if (row.kind === "plan") continue;
|
||||
if (row.kind === "notice" && isStateOnlyNotice(row)) continue;
|
||||
// A resolved approval outside a group adds nothing the tool row does not
|
||||
// already say. A pending one always renders.
|
||||
if (row.kind === "approval" && row.id !== pendingApprovalId) continue;
|
||||
items.push({ type: "row", row });
|
||||
}
|
||||
|
||||
return items.filter(
|
||||
(item, index) =>
|
||||
!(item.type === "row" && turnMeta(item.row) !== null) || index === items.length - 1,
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// composer: `/` command autocomplete off `available_commands_update` notices
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface AvailableCommand {
|
||||
name: string;
|
||||
description: string;
|
||||
input?: { hint?: string };
|
||||
}
|
||||
|
||||
/** The live command list is whatever the most recent
|
||||
* `available_commands_update` notice carries (docs/STRUCTURED-VIEW.md). */
|
||||
export function commandsFromTranscript(rows: TranscriptRow[]): AvailableCommand[] {
|
||||
for (let i = rows.length - 1; i >= 0; i--) {
|
||||
if (rows[i].kind !== "notice") continue;
|
||||
const data = rows[i].data as { sessionUpdate?: string; availableCommands?: unknown[] } | undefined;
|
||||
if (data?.sessionUpdate !== "available_commands_update") continue;
|
||||
return (data.availableCommands ?? []).flatMap((value) => {
|
||||
if (!value || typeof value !== "object") return [];
|
||||
const command = value as Partial<AvailableCommand>;
|
||||
if (typeof command.name !== "string" || typeof command.description !== "string") return [];
|
||||
return [{ name: command.name, description: command.description, input: command.input }];
|
||||
});
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
export interface CommandToken {
|
||||
start: number;
|
||||
end: number;
|
||||
query: string;
|
||||
}
|
||||
|
||||
/** The whitespace-delimited token under the caret, when it is a `/command`
|
||||
* being typed. Completing one replaces only that token. */
|
||||
export function commandTokenAt(
|
||||
value: string,
|
||||
selectionStart: number,
|
||||
selectionEnd: number,
|
||||
): CommandToken | null {
|
||||
if (selectionStart !== selectionEnd) return null;
|
||||
let start = selectionStart;
|
||||
while (start > 0 && !/\s/.test(value[start - 1])) start--;
|
||||
let end = selectionStart;
|
||||
while (end < value.length && !/\s/.test(value[end])) end++;
|
||||
const match = /^\/([^\s/]*)$/.exec(value.slice(start, selectionStart));
|
||||
return match ? { start, end, query: match[1].toLocaleLowerCase() } : null;
|
||||
}
|
||||
|
||||
/** Substring match, prefix matches first, then alphabetical. */
|
||||
export function filterCommands(commands: AvailableCommand[], query: string): AvailableCommand[] {
|
||||
return commands
|
||||
.filter((command) => command.name.toLocaleLowerCase().includes(query))
|
||||
.sort((a, b) => {
|
||||
const aStarts = a.name.toLocaleLowerCase().startsWith(query);
|
||||
const bStarts = b.name.toLocaleLowerCase().startsWith(query);
|
||||
return aStarts === bStarts ? a.name.localeCompare(b.name) : aStarts ? -1 : 1;
|
||||
});
|
||||
}
|
||||
|
||||
/** Replace the token under the caret with `/name`, returning the new draft and
|
||||
* where the caret lands. A trailing space is added only when the completion
|
||||
* ends the draft. */
|
||||
export function applyCommand(
|
||||
value: string,
|
||||
token: CommandToken,
|
||||
name: string,
|
||||
): { value: string; cursor: number } {
|
||||
const before = value.slice(0, token.start);
|
||||
const after = value.slice(token.end);
|
||||
let replacement = `/${name}`;
|
||||
let cursor = before.length + replacement.length;
|
||||
if (after.length === 0) {
|
||||
replacement += " ";
|
||||
cursor++;
|
||||
} else if (/^[ \t]/.test(after)) {
|
||||
cursor++;
|
||||
}
|
||||
return { value: before + replacement + after, cursor };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// session config menu
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Category order the config menu sorts by; anything else lands after. */
|
||||
const CONFIG_CATEGORY_ORDER = ["model", "thought_level", "mode", "model_config"];
|
||||
|
||||
export function orderConfigOptions<T extends { category?: string | null }>(options: T[]): T[] {
|
||||
return [...options].sort((a, b) => {
|
||||
const rank = (category?: string | null) => CONFIG_CATEGORY_ORDER.indexOf(category ?? "");
|
||||
const aRank = rank(a.category);
|
||||
const bRank = rank(b.category);
|
||||
return (aRank < 0 ? 99 : aRank) - (bRank < 0 ? 99 : bRank);
|
||||
});
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,112 @@
|
||||
// What a tool row shows below its head, derived from `rawInput`/`rawOutput`.
|
||||
// The adapters emit a handful of recognisable payload shapes (a shell command,
|
||||
// an MCP call, a search, a plain function call); anything else falls through to
|
||||
// the raw JSON disclosure rather than being guessed at.
|
||||
|
||||
import type { AcpContentBlock, AcpToolCallContent, AcpToolCallLike } from "../../types.js";
|
||||
|
||||
/** One labelled `<pre>` block under a tool head. */
|
||||
export interface ToolDetail {
|
||||
label: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export interface ToolPayload {
|
||||
details: ToolDetail[];
|
||||
/** A shell command's exit code, when the output carried one. */
|
||||
exitCode: number | null;
|
||||
raw: { input: string | null; output: string | null };
|
||||
}
|
||||
|
||||
function printable(value: unknown): string | null {
|
||||
if (value === undefined || value === null) return null;
|
||||
if (typeof value === "string") return value;
|
||||
try {
|
||||
return JSON.stringify(value, null, 2);
|
||||
} catch {
|
||||
return String(value);
|
||||
}
|
||||
}
|
||||
|
||||
function jsonPrintable(value: unknown): string | null {
|
||||
if (value === undefined) return null;
|
||||
try {
|
||||
return JSON.stringify(value, null, 2) ?? null;
|
||||
} catch {
|
||||
return printable(value);
|
||||
}
|
||||
}
|
||||
|
||||
function record(value: unknown): Record<string, unknown> | null {
|
||||
if (!value || typeof value !== "object" || Array.isArray(value)) return null;
|
||||
return value as Record<string, unknown>;
|
||||
}
|
||||
|
||||
/** Push a detail unless it is empty, or repeats text the content blocks above
|
||||
* already show verbatim. */
|
||||
function push(details: ToolDetail[], label: string, value: unknown, duplicates?: Set<string>): void {
|
||||
const text = printable(value);
|
||||
if (text !== null && text !== "" && !duplicates?.has(text)) details.push({ label, text });
|
||||
}
|
||||
|
||||
/** The text of every `content` block, so a `rawOutput` echoing it is not shown
|
||||
* a second time. */
|
||||
function contentTexts(content: AcpToolCallContent[]): Set<string> {
|
||||
return new Set(
|
||||
content
|
||||
.filter((block): block is Extract<AcpToolCallContent, { type: "content" }> => block.type === "content")
|
||||
.filter((block) => block.content.type === "text")
|
||||
.map((block) => (block.content as Extract<AcpContentBlock, { type: "text" }>).text),
|
||||
);
|
||||
}
|
||||
|
||||
export function toolPayload(tool: AcpToolCallLike, content: AcpToolCallContent[]): ToolPayload {
|
||||
const details: ToolDetail[] = [];
|
||||
let exitCode: number | null = null;
|
||||
const input = record(tool.rawInput);
|
||||
const texts = contentTexts(content);
|
||||
|
||||
if (input) {
|
||||
if (typeof input.command === "string") {
|
||||
details.push({ label: "Command", text: input.command });
|
||||
push(details, "Working directory", input.cwd);
|
||||
const result = record(tool.rawOutput);
|
||||
if (result) {
|
||||
push(details, "Output", result.formatted_output ?? result.stdout ?? result.output, texts);
|
||||
if (typeof result.exit_code === "number") exitCode = result.exit_code;
|
||||
}
|
||||
} else if (typeof input.server === "string" && typeof input.tool === "string" && "arguments" in input) {
|
||||
push(details, "Arguments", input.arguments);
|
||||
const result = record(tool.rawOutput);
|
||||
if (result) {
|
||||
push(details, "Result", result.result, texts);
|
||||
push(details, "Error", result.error);
|
||||
}
|
||||
} else if (typeof input.query === "string" && (tool.kind === "search" || input.type === "webSearch")) {
|
||||
details.push({ label: "Query", text: input.query });
|
||||
push(details, "Action", input.action);
|
||||
} else if ("arguments" in input) {
|
||||
push(details, "Arguments", input.arguments);
|
||||
const result = record(tool.rawOutput);
|
||||
if (result) push(details, "Result", result.output, texts);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
details,
|
||||
exitCode,
|
||||
raw: { input: jsonPrintable(tool.rawInput), output: jsonPrintable(tool.rawOutput) },
|
||||
};
|
||||
}
|
||||
|
||||
/** A `data:` URL for an inline image/audio block, or `null` when the mime type
|
||||
* is absent or does not name that family — never a URL built from an
|
||||
* unvalidated string. */
|
||||
export function safeMediaSource(
|
||||
mimeType: string | undefined,
|
||||
data: string | undefined,
|
||||
family: "image" | "audio",
|
||||
): string | null {
|
||||
if (!mimeType || !data || !new RegExp(`^${family}/[a-z0-9.+-]+$`, "i").test(mimeType)) return null;
|
||||
return `data:${mimeType};base64,${data}`;
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
// The `WS /api/structured/:id` half of the pane (#246). Every connect — fresh
|
||||
// or reconnect — resends the whole transcript rather than resuming a cursor
|
||||
// (docs/STRUCTURED-VIEW.md), so a snapshot replaces state wholesale instead of
|
||||
// merging into what came before.
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import { structuredWsUrl } from "../../routes.js";
|
||||
import { INITIAL_RECONNECT_MS, MAX_RECONNECT_MS } from "../../reconnect.js";
|
||||
import type {
|
||||
ReducedState,
|
||||
StructuredEvent,
|
||||
TranscriptDelta,
|
||||
TranscriptRow,
|
||||
Uuid,
|
||||
} from "../../types.js";
|
||||
|
||||
export type StructuredStatus = "connecting" | "open" | "reconnecting" | "closed" | "error";
|
||||
|
||||
/** Injectable so tests can drive the socket without a daemon — the same seam
|
||||
* structured.ts used. */
|
||||
export type StructuredSocketFactory = (sessionId: Uuid) => WebSocket;
|
||||
|
||||
const idleState = (): ReducedState => ({
|
||||
turn: { responding: false, thinking: false, active_tool_calls: [] },
|
||||
});
|
||||
|
||||
function applyDelta(rows: TranscriptRow[], delta: TranscriptDelta): TranscriptRow[] {
|
||||
if (delta.type === "append") {
|
||||
// A patch can arrive for a row this connection has never seen (its
|
||||
// snapshot predates it); treating an unknown id as an append keeps the
|
||||
// transcript complete rather than dropping the row.
|
||||
const at = rows.findIndex((row) => row.id === delta.row.id);
|
||||
return at === -1 ? [...rows, delta.row] : rows.map((row, i) => (i === at ? delta.row : row));
|
||||
}
|
||||
if (delta.type === "patch") {
|
||||
const at = rows.findIndex((row) => row.id === delta.row.id);
|
||||
return at === -1 ? [...rows, delta.row] : rows.map((row, i) => (i === at ? delta.row : row));
|
||||
}
|
||||
return rows.filter((row) => row.id !== delta.id);
|
||||
}
|
||||
|
||||
export interface StructuredSession {
|
||||
rows: TranscriptRow[];
|
||||
state: ReducedState;
|
||||
status: StructuredStatus;
|
||||
/** A daemon-supplied close reason (code ≥ 4000), when there is one. */
|
||||
detail: string | null;
|
||||
/** The number of sockets this pane has opened, newest last. A submission
|
||||
* that straddles a reconnect uses it to notice its acceptance may predate
|
||||
* the current snapshot. */
|
||||
socketGeneration: number;
|
||||
/** Drop the socket and reconnect, so the next snapshot cannot predate a
|
||||
* POST that has already been accepted. */
|
||||
reconnect(): void;
|
||||
}
|
||||
|
||||
export interface UseStructuredSessionOptions {
|
||||
shouldReconnect?: (code: number) => boolean;
|
||||
onClosed?: () => void;
|
||||
socketFactory?: StructuredSocketFactory;
|
||||
}
|
||||
|
||||
/** Application-defined close codes (daemon rejection) and the clean-close code
|
||||
* — retrying either would only loop. */
|
||||
function defaultShouldReconnect(code: number): boolean {
|
||||
return code < 4000 && code !== 1000;
|
||||
}
|
||||
|
||||
export function useStructuredSession(
|
||||
sessionId: Uuid,
|
||||
{
|
||||
shouldReconnect = defaultShouldReconnect,
|
||||
onClosed,
|
||||
socketFactory = (id) => new WebSocket(structuredWsUrl(id)),
|
||||
}: UseStructuredSessionOptions = {},
|
||||
): StructuredSession {
|
||||
const [rows, setRows] = useState<TranscriptRow[]>([]);
|
||||
const [state, setState] = useState<ReducedState>(idleState);
|
||||
const [status, setStatus] = useState<StructuredStatus>("connecting");
|
||||
const [detail, setDetail] = useState<string | null>(null);
|
||||
const [socketGeneration, setSocketGeneration] = useState(0);
|
||||
|
||||
// Read through refs so a changed callback never tears the socket down.
|
||||
const shouldReconnectRef = useRef(shouldReconnect);
|
||||
const onClosedRef = useRef(onClosed);
|
||||
const factoryRef = useRef(socketFactory);
|
||||
shouldReconnectRef.current = shouldReconnect;
|
||||
onClosedRef.current = onClosed;
|
||||
factoryRef.current = socketFactory;
|
||||
|
||||
const reconnectRef = useRef<() => void>(() => {});
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false;
|
||||
let socket: WebSocket | null = null;
|
||||
let reconnectMs = INITIAL_RECONNECT_MS;
|
||||
let timer: number | null = null;
|
||||
|
||||
const closeSocket = () => {
|
||||
const existing = socket;
|
||||
socket = null;
|
||||
if (!existing) return;
|
||||
existing.onopen = null;
|
||||
existing.onmessage = null;
|
||||
existing.onerror = null;
|
||||
existing.onclose = null;
|
||||
try {
|
||||
existing.close();
|
||||
} catch {
|
||||
// ignore — an already-closing socket has nothing to close
|
||||
}
|
||||
};
|
||||
|
||||
const cancelTimer = () => {
|
||||
if (timer === null) return;
|
||||
window.clearTimeout(timer);
|
||||
timer = null;
|
||||
};
|
||||
|
||||
function connect(): void {
|
||||
if (disposed) return;
|
||||
cancelTimer();
|
||||
closeSocket();
|
||||
const current = factoryRef.current(sessionId);
|
||||
socket = current;
|
||||
setSocketGeneration((n) => n + 1);
|
||||
|
||||
current.onopen = () => {
|
||||
if (disposed || socket !== current) return;
|
||||
reconnectMs = INITIAL_RECONNECT_MS;
|
||||
setDetail(null);
|
||||
setStatus("open");
|
||||
};
|
||||
|
||||
current.onmessage = (ev) => {
|
||||
if (disposed || socket !== current) return;
|
||||
if (typeof ev.data !== "string") return;
|
||||
let msg: StructuredEvent;
|
||||
try {
|
||||
msg = JSON.parse(ev.data) as StructuredEvent;
|
||||
} catch {
|
||||
return; // not a structured event we understand
|
||||
}
|
||||
switch (msg.type) {
|
||||
case "transcript_snapshot":
|
||||
setRows([...msg.snapshot.rows]);
|
||||
break;
|
||||
case "reduced_state":
|
||||
setState(msg.state);
|
||||
break;
|
||||
case "projection_update":
|
||||
if (msg.transcript) {
|
||||
const delta = msg.transcript;
|
||||
setRows((previous) => applyDelta(previous, delta));
|
||||
}
|
||||
setState(msg.state);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
current.onerror = () => {
|
||||
if (disposed || socket !== current) return;
|
||||
setStatus("error");
|
||||
};
|
||||
|
||||
current.onclose = (ev) => {
|
||||
if (disposed || socket !== current) return;
|
||||
socket = null;
|
||||
const reason = ev.reason?.trim();
|
||||
if (ev.code >= 4000 && reason) {
|
||||
setDetail(reason);
|
||||
setStatus("error");
|
||||
return;
|
||||
}
|
||||
if (shouldReconnectRef.current(ev.code)) {
|
||||
const delay = Math.min(reconnectMs, MAX_RECONNECT_MS);
|
||||
setStatus("reconnecting");
|
||||
timer = window.setTimeout(() => {
|
||||
timer = null;
|
||||
if (disposed) return;
|
||||
reconnectMs = Math.min(reconnectMs * 2, MAX_RECONNECT_MS);
|
||||
connect();
|
||||
}, delay);
|
||||
return;
|
||||
}
|
||||
setDetail(String(ev.code));
|
||||
setStatus("closed");
|
||||
onClosedRef.current?.();
|
||||
};
|
||||
}
|
||||
|
||||
reconnectRef.current = () => {
|
||||
if (disposed) return;
|
||||
setStatus("reconnecting");
|
||||
connect();
|
||||
};
|
||||
|
||||
setStatus("connecting");
|
||||
connect();
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
reconnectRef.current = () => {};
|
||||
cancelTimer();
|
||||
closeSocket();
|
||||
};
|
||||
}, [sessionId]);
|
||||
|
||||
const reconnect = useCallback(() => reconnectRef.current(), []);
|
||||
|
||||
return useMemo(
|
||||
() => ({ rows, state, status, detail, socketGeneration, reconnect }),
|
||||
[rows, state, status, detail, socketGeneration, reconnect],
|
||||
);
|
||||
}
|
||||
@@ -15,9 +15,9 @@ import { splitCommand, toolIconSvg, TOOL_LABELS } from "./toolIcon.js";
|
||||
import { abbreviateCwd } from "./types.js";
|
||||
import type { BranchInfo, CreateSessionRequest, Project, Session, SpawnPreset } from "./types.js";
|
||||
|
||||
export const STRUCTURED_VIEW_TOOLS = new Set(["claude", "codex"]);
|
||||
const STRUCTURED_VIEW_TOOLS = new Set(["claude", "codex"]);
|
||||
|
||||
export function supportsStructuredView(command: string): boolean {
|
||||
function supportsStructuredView(command: string): boolean {
|
||||
const tool = splitCommand(command).tool;
|
||||
return tool !== null && STRUCTURED_VIEW_TOOLS.has(tool);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user