feat(chat): terminal chat parity for every tool; Desktop-like artifacts

- The chat over a terminal pane now covers Claude, Codex, omp, Cursor and
  Antigravity: Cursor's agent transcript and agy's step log
  (brain/<id>/.system_generated/logs/transcript_full.jsonl) are read as
  conversations; Cursor sessions are claimed by their workspace
- Replies appear as soon as they are written: the projects-tree watcher
  broadcasts `transcript_changed` (at most every 250 ms per session) and the
  chat re-reads the transcript while the terminal underneath draws
- Stop shows from the pane's own busy line (Claude/Codex `esc to interrupt`,
  agy `… esc to cancel`), or fresh output for omp/Cursor — no hooks needed
- Permission prompts read off the terminal become a card with the tool, its
  command and "Deny with a note"; Codex gets Permission mode / Model buttons
  that open its own numbered pickers, answered from the menu card
- Artifacts: cards for pages/documents/diagrams/tables/React components, a
  Preview | Code panel with versions, copy, download, save to the Artifacts
  Hub, full screen; sandboxed iframes without allow-same-origin
- Claude panes get CLAUDE_CODE_ENABLE_TODO_TOOLS=1 so the Progress panel has a
  plan; multi-question pane menus read their Next row and question tabs
- The realtime chat bridge (structured stdio, /api/chat-bridge, /ws-chat)
  from the unreleased ad9d475 is not kept
This commit is contained in:
2026-10-21 15:44:17 +07:00
parent aee4fc190e
commit 383b9ae231
41 changed files with 2582 additions and 426 deletions
@@ -31,6 +31,10 @@ vi.mock("../../../lib/api", async (importOriginal) => {
}),
gitRawUrl: () => "",
},
artifacts: {
pinFile: vi.fn().mockResolvedValue({ item: { id: 1 } }),
uploadFile: vi.fn().mockResolvedValue({ item: { id: 2 } }),
},
sessions: {
readImageUrl: (id: string, p: string) => `/img/${id}?path=${p}`,
readFile: vi.fn((_id: string, p: string) =>
@@ -75,7 +79,11 @@ const scope = { laneId: 4, laneCwd: "/w", cwd: "/w", sessionId: "s1" };
describe("FilePreview", () => {
it("reads a workspace file through the lane", async () => {
render(<FilePreview path="/w/src/a.ts" scope={scope} onClose={() => {}} />);
expect(await screen.findByText("export const a = 1;")).toBeTruthy();
expect(
await screen.findByText(
(_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
)
).toBeTruthy();
expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(4, "src/a.ts");
});
@@ -89,7 +97,11 @@ describe("FilePreview", () => {
it("reads Windows paths the same way", async () => {
const win = { laneId: 4, laneCwd: "D:\\w", cwd: "D:\\w", sessionId: "s1" };
render(<FilePreview path={"D:\\w\\src\\a.ts"} scope={win} onClose={() => {}} />);
expect(await screen.findByText("export const a = 1;")).toBeTruthy();
expect(
await screen.findByText(
(_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
)
).toBeTruthy();
expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(4, "src/a.ts");
cleanup();
const tool = "C:\\Users\\k\\.claude\\projects\\D--w\\s1\\tool-results\\b.txt";
@@ -144,7 +156,11 @@ describe("FileListModal", () => {
);
expect(screen.getByText("No preview for this file here")).toBeTruthy();
fireEvent.click(screen.getByRole("button", { name: "a.ts" }));
expect(await screen.findByText("export const a = 1;")).toBeTruthy();
expect(
await screen.findByText(
(_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
)
).toBeTruthy();
});
});
@@ -172,3 +188,77 @@ describe("SkillListModal", () => {
expect(screen.getByText("No preview for this file here")).toBeTruthy();
});
});
describe("the artifact view", () => {
const html = (lines: string[]) =>
vi.mocked(api.lanes.gitFile).mockResolvedValueOnce({
available: true,
path: "page.html",
rev: "work",
binary: false,
truncated: false,
lines,
} as never);
it("runs a page in a sandbox with scripts but no same origin, and shows its code", async () => {
html(["<button>go</button>"]);
render(<FilePreview path="/w/page.html" scope={scope} onClose={() => {}} />);
const frame = (await screen.findByTestId("artifact-frame")) as HTMLIFrameElement;
expect(frame.getAttribute("sandbox")).toContain("allow-scripts");
expect(frame.getAttribute("sandbox")).not.toContain("allow-same-origin");
expect(frame.getAttribute("srcdoc")).toContain("<button>go</button>");
fireEvent.click(screen.getByTestId("artifact-tab-code"));
expect(screen.queryByTestId("artifact-frame")).toBeNull();
expect(
await screen.findByText(
(_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("<button>go</button>")
)
).toBeTruthy();
cleanup();
});
it("steps back to an older version the conversation wrote", async () => {
html(["<p>two</p>"]);
const tool = (id: string, input: Record<string, unknown>, name = "Write") => ({
type: "assistant" as const,
timestamp: null,
content: [{ type: "tool_use" as const, id, name, input }],
});
const messages = [
tool("1", { file_path: "/w/page.html", content: "<p>one</p>" }),
tool("2", { file_path: "/w/page.html", old_string: "one", new_string: "two" }, "Edit"),
];
render(
<FilePreview
path="/w/page.html"
scope={scope}
onClose={() => {}}
messages={messages as never}
/>
);
const versions = await screen.findByTestId("artifact-versions");
expect(versions.textContent).toContain("2");
expect(
((await screen.findByTestId("artifact-frame")) as HTMLIFrameElement).getAttribute("srcdoc")
).toContain("two");
fireEvent.click(versions.querySelector("button")!);
expect(screen.getByTestId("artifact-frame").getAttribute("srcdoc")).toContain("<p>one</p>");
cleanup();
});
it("saves a workspace file to the Artifacts library by its path", async () => {
html(["<p>x</p>"]);
render(<FilePreview path="/w/page.html" scope={scope} onClose={() => {}} />);
await screen.findByTestId("artifact-frame");
fireEvent.click(screen.getByTestId("artifact-share"));
await vi.waitFor(() =>
expect(api.artifacts.pinFile).toHaveBeenCalledWith({
laneId: 4,
path: "page.html",
title: "page.html",
sessionId: "s1",
})
);
cleanup();
});
});
@@ -7,9 +7,11 @@
* activity panel, collapsed into a file button with the output count, whose
* files open a preview in its place; a file in a turn's "Edited N files" card
* opens in the Workspace's Changes panel when it is in the pane's folder; and
* Stop in Send's place while the main agent works, pressing Esc in the pane;
* Stop in Send's place while the main agent works (its hooks, or the pane's
* own busy line / fresh output), pressing Esc in the pane;
* and the menu the CLI asks with, shown as buttons that press its keys, a
* message sent meanwhile typed as its "Type something" answer.
* message sent meanwhile typed as its "Type something" answer; a Codex
* terminal's Model / Permission mode buttons typing its own pickers.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
@@ -22,11 +24,14 @@ import {
answerRunMenu,
chooseRunOption,
interruptRun,
onPaneOutput,
readRunBusy,
readRunMenu,
submitToRun,
type PaneMenu,
} from "../../../lib/panePaste";
import { OPEN_IN_CHANGES_EVENT } from "../../../lib/openInChanges";
import { eventBus } from "../../../lib/eventBus";
vi.mock("../../conversation/ConversationView", () => ({
// Stands in for a turn's "Edited N files" card: a click names a file.
@@ -51,8 +56,12 @@ vi.mock("../../../lib/panePaste", () => ({
submitToRun: vi.fn(() => true),
interruptRun: vi.fn(() => true),
readRunMenu: vi.fn(() => null),
readRunBusy: vi.fn(() => false),
chooseRunOption: vi.fn(() => true),
answerRunMenu: vi.fn(() => true),
stepRunMenu: vi.fn(() => true),
notePaneFocus: vi.fn(),
onPaneOutput: vi.fn(() => () => {}),
}));
vi.mock("../../../lib/api", async (importOriginal) => {
const actual = await importOriginal<Record<string, unknown>>();
@@ -212,6 +221,54 @@ describe("PaneChat — Stop", () => {
}
});
it("shows Stop while the pane's own busy line shows, with no hook saying so", async () => {
// omp, Cursor or Codex without its hooks: only the terminal knows.
vi.useFakeTimers({ shouldAdvanceTime: true });
vi.mocked(readRunBusy).mockReturnValue(true);
try {
renderChat();
expect(await screen.findByTestId("pane-chat-stop")).toBeInTheDocument();
expect(readRunBusy).toHaveBeenCalledWith("agenthub-lane-1", "claude");
vi.mocked(readRunBusy).mockReturnValue(false);
await act(async () => {
await vi.advanceTimersByTimeAsync(800);
});
await waitFor(() => expect(screen.queryByTestId("pane-chat-stop")).toBeNull());
} finally {
vi.useRealTimers();
vi.mocked(readRunBusy).mockReturnValue(false);
}
});
it("counts a tool with no known busy line as working while its pane draws", async () => {
vi.useFakeTimers({ shouldAdvanceTime: true });
vi.mocked(readRunBusy).mockReturnValue(null);
const fns: (() => void)[] = [];
vi.mocked(onPaneOutput).mockImplementation((_runId, fn) => {
fns.push(fn);
return () => {};
});
try {
renderChat();
await waitFor(() => expect(fns.length).toBeGreaterThan(0));
expect(screen.queryByTestId("pane-chat-stop")).toBeNull();
fns.forEach((fn) => fn());
await act(async () => {
await vi.advanceTimersByTimeAsync(800);
});
expect(await screen.findByTestId("pane-chat-stop")).toBeInTheDocument();
// Quiet for longer than OUTPUT_BUSY_MS: at rest again.
await act(async () => {
await vi.advanceTimersByTimeAsync(2800);
});
await waitFor(() => expect(screen.queryByTestId("pane-chat-stop")).toBeNull());
} finally {
vi.useRealTimers();
vi.mocked(readRunBusy).mockReturnValue(false);
vi.mocked(onPaneOutput).mockImplementation(() => () => {});
}
});
it("keeps Send for a session at rest", async () => {
// With session_id the server answers EVERY agent of the session (its
// status filter does not apply): the main agent is there, waiting.
@@ -553,4 +610,103 @@ describe("PaneChat — a menu the CLI asks with", () => {
vi.mocked(readRunMenu).mockReturnValue(null);
}
});
it("re-reads its transcript when the pane draws, at most once a second", async () => {
// Every listener the chat put on the pane (the re-read, the busy clock).
const fns: (() => void)[] = [];
const drew = () => fns.forEach((fn) => fn());
vi.mocked(onPaneOutput).mockImplementation((_runId, fn) => {
fns.push(fn);
return () => {};
});
const seen: unknown[] = [];
const off = eventBus.subscribe((m) => {
if (m.type === "transcript_changed") seen.push(m.data);
});
try {
renderChat();
await waitFor(() => expect(fns.length).toBeGreaterThan(0));
vi.useFakeTimers();
drew();
drew();
drew();
expect(seen).toEqual([{ session_id: "s1" }]);
await act(async () => {
await vi.advanceTimersByTimeAsync(1100);
});
expect(seen).toHaveLength(2);
} finally {
vi.useRealTimers();
off();
vi.mocked(onPaneOutput).mockImplementation(() => () => {});
}
});
const PERMISSION: PaneMenu = {
question: "Do you want to proceed?",
detail: ["Bash command", "npm test", "Run the tests"],
options: [
{ n: 1, label: "Yes", hint: "", checked: null },
{ n: 2, label: "Yes, and don't ask again for npm test", hint: "", checked: null },
{ n: 3, label: "No, and tell Claude what to do differently (esc)", hint: "", checked: null },
],
cursor: 0,
multi: false,
typeAt: -1,
};
it("lays a permission prompt out as a card, each answer its own key", async () => {
vi.mocked(readRunMenu).mockReturnValue(PERMISSION);
vi.mocked(chooseRunOption).mockClear();
try {
renderChat();
const card = await screen.findByTestId("pane-chat-permission");
expect(card).toHaveTextContent("Bash command");
expect(card).toHaveTextContent("npm test");
expect(card).toHaveTextContent("Do you want to proceed?");
const options = screen.getAllByTestId("pane-chat-permission-option");
// The key hint is dropped from the label.
expect(options.map((o) => o.textContent)).toEqual([
"Yes",
"Yes, and don't ask again for npm test",
"No, and tell Claude what to do differently",
]);
fireEvent.click(options[1]!);
expect(chooseRunOption).toHaveBeenCalledWith("agenthub-lane-1", PERMISSION, 1);
} finally {
vi.mocked(readRunMenu).mockReturnValue(null);
}
});
it("denies with a note: picks the No row, then sends the note as the next message", async () => {
vi.mocked(readRunMenu).mockReturnValue(PERMISSION);
vi.mocked(chooseRunOption).mockClear();
vi.mocked(submitToRun).mockClear();
try {
renderChat();
fireEvent.click(await screen.findByTestId("pane-chat-permission-tell"));
const field = screen.getByTestId("pane-chat-permission-note");
fireEvent.change(field, { target: { value: "use pnpm" } });
fireEvent.keyDown(field, { key: "Enter" });
expect(chooseRunOption).toHaveBeenCalledWith("agenthub-lane-1", PERMISSION, 2);
await waitFor(() => expect(submitToRun).toHaveBeenCalled(), { timeout: 2000 });
expect(vi.mocked(submitToRun).mock.calls[0]![1]).toContain("use pnpm");
} finally {
vi.mocked(readRunMenu).mockReturnValue(null);
}
});
});
describe("PaneChat — a Codex terminal", () => {
it("types /model and /permissions, whose pickers come back as menu cards", () => {
renderChat({ tool: "codex" });
fireEvent.click(screen.getByTestId("pane-chat-codex-model"));
fireEvent.click(screen.getByTestId("pane-chat-codex-permissions"));
expect(vi.mocked(submitToRun).mock.calls.map((c) => c[1])).toEqual(["/model", "/permissions"]);
});
it("offers neither to a Claude pane", () => {
renderChat();
expect(screen.queryByTestId("pane-chat-codex-model")).toBeNull();
});
});