Compare commits

...

5 Commits

Author SHA1 Message Date
nntrivi2001 b08482c6aa feat(terminal): a text drag (a Files/Changes row, a skill) is pasted into the pane
xterm.js has no drop handling of its own, so dropped text was lost; the pane
now pastes it as a local terminal does, with a "Drop to paste" hint.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-13 14:43:03 +07:00
nntrivi2001 763759189f feat(server-mode): native-like folder browser, a developer kept to their own folder, no password minimum
- Folder browser (the Browse fallback for a remote browser): back/forward/up,
  a clickable breadcrumb that becomes a path field (Ctrl+L), Places (Home,
  the user's workspaces, recent picks), a filter, Name/Modified columns,
  Show hidden and New folder. A click selects; a double-click or Enter
  opens a folder or picks a file; Backspace goes up; typing jumps to a name.
- GET /api/lanes/browse: `hidden=1` (never the dot entries at the top of a
  non-admin's own folder), each entry's `mtime`, the answer's `home`.
- POST /api/lanes/browse/mkdir: one plain folder name inside an existing
  folder; a non-admin only in their own folder, none in server mode without
  one; under S3 a member's folder is made as the member.
- scope.ownFolder falls back to server.conf's USERS_ROOT under S3, so a
  settings file without AGENTHUB_USERS_ROOT no longer opens the host's home
  to every developer.
- Passwords: any non-empty password is accepted (no 8-character minimum).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-13 14:43:03 +07:00
nntrivi2001 b0dd5af22f fix: v2.7.5 — the chat shows each AskUserQuestion with the user's answer
- Chat: an AskUserQuestion is its own card (AskCard in MessageList.tsx), not
  part of the collapsed work line — each question with the option picked or
  the text typed, "declined" when refused. The transcript route passes the
  answers from Claude Code's toolUseResult (askAnswers, beside diff).
- Chat: the activity panel keeps the user's open/close per session for the
  tab, and opens by default only once the session has an output.
- Workspace home: the sent prompt's draft is dropped even though opening the
  session unmounts the home.
- Terminal: Ctrl+V with text on the clipboard pastes the text; only an empty
  clipboard still sends ^V.
- AGENTS.md / CLAUDE.md: run only the tests a change touches while iterating,
  the full suite once before committing.
2026-10-13 10:46:56 +07:00
nntrivi2001 7cb4f64781 feat(chat): answer the CLI's menus from the chat; Stop ends Thinking… (#74)
- A menu the CLI asks with (AskUserQuestion — one question or several,
  multiSelect —, a permission or trust prompt, Codex's approval, a
  first-start login menu) is read off the terminal under the chat
  (`parsePaneMenu`/`readRunMenu`) and shown in the prompt box's place as a
  card of buttons. A pick presses its digit (picks it, or ticks its box),
  Claude's unnumbered Submit row is reached with the arrows and Enter, and
  Cancel presses Esc. "Type something" opens a field in the card: its text
  goes in by the arrows, Ctrl+U over anything already typed there, a
  bracketed paste and Enter. That row presses no key — a second press of
  its digit typed the digit into the CLI's field ("44444…"). Keys verified
  on Claude Code 2.1.296 and Codex 0.161. AskUserQuestion fires no
  Notification, so a menu on screen also counts as waiting (live line, tab
  badge). Client only: no new route.
- #74: Esc before the model wrote anything puts the prompt back in Claude
  Code's input box and writes no "[Request interrupted by user]" line, so
  the transcript ended on the prompt and the chat read "Thinking…" for
  15 min. The chat's Stop now ends the live line until a newer transcript
  line arrives (matched by line, not by clock).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-13 09:59:40 +07:00
nntrivi2001 69a2c37cd2 fix(terminal): macOS Vietnamese Telex keeps its capitals in Chrome too
macOS's own Vietnamese Telex types into xterm's textarea with no
composition events: a letter is an `insertText`, every later key of the
word an `insertReplacementText`, each keydown (keyCode 229) arriving after
the change. v2.7.4 forwarded the replacements, but a capital typed with
Shift still vanished — xterm drops any `input` that lands while a key is
held — and its 229 fallback could resend an edit. Replayed from a real
Chrome trace, "Abc xin chào" reached the pane as " x c".

lib/imeInput.ts now owns those edits: capture phase on xterm's element,
each one sent as DELs plus the new tail, the IME's input and 229 keydowns
hidden from xterm. Keys xterm sends from keypress (Space) and real
compositions (CJK) stay xterm's. Verified against xterm 5.5 in headless
Chrome: Telex → "Abc xin chào"; a plain keyboard sends the same bytes
as before.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-13 09:20:07 +07:00
49 changed files with 2421 additions and 196 deletions
+1
View File
@@ -25,6 +25,7 @@ make while you work here as Codex.
## Validation expectations
- Backend changes: run `npm run test:server` when possible.
- Frontend changes: run `npm run test:client` when possible.
- Full suites take 5–6 minutes, so while iterating run only what the change touches: `npm run test:server -- server/__tests__/<name>.test.js`, and in `client/` `NODE_ENV=test npx vitest related <changed files> --run` (or `vitest run <test file>`). Run the full suite once before committing, and always when the change touches something every screen uses (`Layout`, `Sidebar`, `StatusBar`, `tailwind.config.js`, global CSS, shared hooks/lib) — the per-screen snapshots catch that.
- If any check is skipped, report it explicitly.
## Safety expectations
+2 -1
View File
@@ -1,6 +1,6 @@
# Claude Code Working Guide
_Last synced: v2.7.4 (2026-10-12) — Changes hides a staged change undone on disk (#72); chat says when the session has not started (#73); a member's missing folder is made as them, bypass offered only once accepted._ A change that makes any statement in this file, `AGENTS.md`, or a README wrong — a moved path, a new or changed extension point, a retired rule — updates that file in the same change-set and bumps this marker. **Bump = replace the version/date and a ≤ 1-line summary; never append a changelog here** — details belong in the commit message and `docs/`, because this whole file is loaded into every session.
_Last synced: v2.7.5 (2026-10-13) — the chat shows each AskUserQuestion with the user's answer; while iterating, run only the tests a change touches._ A change that makes any statement in this file, `AGENTS.md`, or a README wrong — a moved path, a new or changed extension point, a retired rule — updates that file in the same change-set and bumps this marker. **Bump = replace the version/date and a ≤ 1-line summary; never append a changelog here** — details belong in the commit message and `docs/`, because this whole file is loaded into every session.
## Project mission
- Maintain a reliable local-first dashboard for Claude Code session monitoring.
@@ -96,6 +96,7 @@ See `docs/LANES.md` for full guide: stage reporting, custom templates, lane acti
## Testing and verification policy
- Backend changes: run `npm run test:server` before finishing.
- Frontend changes: run `npm run test:client` when relevant. This includes per-screen render snapshots (`client/src/pages/__tests__/screens.snapshot.test.tsx`). If a UI change is intentional, review the snapshot diff and regenerate baselines with `cd client && npx vitest run -u`; never blindly update snapshots to make tests pass.
- Full suites take 5–6 minutes — while iterating run only what the change touches (`npm run test:server -- server/__tests__/<name>.test.js`; in `client/` `NODE_ENV=test npx vitest related <changed files> --run`), then the full suite once before committing, and always when touching something every screen uses (`Layout`, `Sidebar`, `StatusBar`, `tailwind.config.js`, global CSS, shared hooks/lib).
- If you cannot run a verification step, state exactly what was not run and why.
## Change guidelines by area
@@ -3,7 +3,7 @@
* @description Unit tests for the Browse button beside path fields: a chosen
* path fills the field, a Cancel changes nothing, and a folder or a file falls
* back to the in-app browser on ANY native-picker failure (a LAN browser's
* EREMOTE included).
* EREMOTE included), where a double-click on a file picks it.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
@@ -15,7 +15,7 @@ import { toast } from "../../lib/toast";
import { PathPickButton } from "../PathPickButton";
vi.mock("../../lib/api", () => ({
api: { lanes: { pickPath: vi.fn(), browse: vi.fn() } },
api: { lanes: { pickPath: vi.fn(), browse: vi.fn(), list: vi.fn(() => new Promise(() => {})) } },
}));
vi.mock("../../lib/toast", () => ({
toast: { info: vi.fn(), error: vi.fn(), success: vi.fn() },
@@ -55,7 +55,7 @@ describe("PathPickButton", () => {
expect(toast.error).not.toHaveBeenCalled();
});
it("opens the in-app browser for a file too, and a click on a file picks it", async () => {
it("opens the in-app browser for a file too, and a double-click on a file picks it", async () => {
const onPick = vi.fn();
vi.mocked(api.lanes.pickPath).mockRejectedValue(fail("EREMOTE"));
vi.mocked(api.lanes.browse).mockResolvedValue({
@@ -68,9 +68,9 @@ describe("PathPickButton", () => {
render(<PathPickButton kind="file" start="~/.ssh" onPick={onPick} />);
await userEvent.click(screen.getByRole("button"));
const dialog = await screen.findByRole("dialog", { name: "Browse for a file" });
expect(api.lanes.browse).toHaveBeenCalledWith("~/.ssh", true);
expect(api.lanes.browse).toHaveBeenCalledWith("~/.ssh", true, false);
expect(within(dialog).queryByText("Select this folder")).toBeNull();
await userEvent.click(await within(dialog).findByText("id_ed25519"));
await userEvent.dblClick(await within(dialog).findByText("id_ed25519"));
expect(onPick).toHaveBeenCalledWith("/home/u/.ssh/id_ed25519");
expect(screen.queryByRole("dialog")).toBeNull();
expect(toast.info).not.toHaveBeenCalled();
@@ -97,6 +97,8 @@ interface ConversationViewProps {
waiting?: boolean;
/** Shows the pane's terminal, where that question is answered. */
onOpenTerminal?: () => void;
/** Bumped by the chat's Stop: the live line ends with the turn on screen. */
stopped?: number;
/** The newest reply's prompt size (input + cache) and model: how full the
* context is. */
onContext?: (tokens: number, model: string | null) => void;
@@ -113,6 +115,7 @@ export function ConversationView({
follow = 0,
waiting = false,
onOpenTerminal,
stopped = 0,
onContext,
onNotStarted,
}: ConversationViewProps) {
@@ -558,7 +561,11 @@ export function ConversationView({
{t("conversation.notStartedBody")}
</p>
{onOpenTerminal && (
<button type="button" onClick={onOpenTerminal} className="btn-secondary mt-3 text-xs">
<button
type="button"
onClick={onOpenTerminal}
className="btn-secondary mt-3 text-xs"
>
{t("conversation.openTerminal")}
</button>
)}
@@ -578,6 +585,7 @@ export function ConversationView({
live={live}
waiting={waiting}
onOpenTerminal={onOpenTerminal}
stopped={stopped}
/>
)}
</div>
@@ -15,7 +15,9 @@
* files ends with Claude Desktop's "Edited N files" card: every file with the
* lines added and removed (the tool results' `diff`); a click opens the file
* when the caller can (`onOpenFile`), and a row (or the card's header, for
* every file in it) drags into a prompt box as an `@path` attachment. A thinking block that carries text is
* every file in it) drags into a prompt box as an `@path` attachment. An
* AskUserQuestion is its own card (`AskCard`), not part of the collapsed work
* line: each question with the answer the user picked or typed. A thinking block that carries text is
* the model's narration to the user (Claude Code ≥ 2.1.280 stores real
* thinking empty) and reads as prose, like Claude Desktop shows it; a live
* chat (`live`) ends, until its turn is over, with what the model is doing
@@ -95,6 +97,8 @@ import {
Check,
Hand,
SquareTerminal,
MessageCircleQuestion,
CornerDownRight,
} from "lucide-react";
import type { TranscriptMessage, TranscriptContent, TranscriptSender } from "../../lib/types";
@@ -156,6 +160,9 @@ interface MessageListProps {
waiting?: boolean;
/** Shows the pane's terminal, where that question is answered. */
onOpenTerminal?: () => void;
/** Bumped by the chat's Stop: the turn on screen is over, even when the
* transcript never says so. */
stopped?: number;
}
/** Build a map from tool_use id → tool_result for matching */
@@ -458,6 +465,7 @@ type Item =
| { kind: "user"; key: string; msg: TranscriptMessage }
| { kind: "text"; key: string; msg: TranscriptMessage; text: string }
| { kind: "work"; key: string; blocks: TranscriptContent[] }
| { kind: "ask"; key: string; block: TranscriptContent }
| { kind: "edits"; key: string; blocks: TranscriptContent[] }
| { kind: "done"; key: string; ms: number; output: number };
@@ -519,7 +527,10 @@ export function chatItems(messages: TranscriptMessage[], keys: string[]): Item[]
msg.content.forEach((block, b) => {
const last = items[items.length - 1];
if (block.type === "tool_use" && EDIT_TOOLS.has(block.name ?? "")) edits.push(block);
if (block.type === "tool_use") {
// A question to the user is a turn of the conversation, not hidden work.
if (block.type === "tool_use" && block.name === "AskUserQuestion") {
items.push({ kind: "ask", key: `${key}:${b}`, block });
} else if (block.type === "tool_use") {
if (last?.kind === "work") last.blocks.push(block);
else items.push({ kind: "work", key: `${key}:${b}`, blocks: [block] });
} else if ((block.type === "text" || block.type === "thinking") && block.text?.trim()) {
@@ -611,15 +622,24 @@ export function MessageList({
live = false,
waiting = false,
onOpenTerminal,
stopped = 0,
}: MessageListProps) {
const { t } = useTranslation("sessions");
const toolResultMap = useMemo(() => buildToolResultMap(messages), [messages]);
const keys = useMemo(() => messageKeys(messages), [messages]);
const lastKey = keys[keys.length - 1] ?? null;
// The newest line when Stop was pressed. Esc before the model wrote anything
// puts the prompt back in Claude Code's input box and writes no
// "[Request interrupted…]" line (issue #74), so the transcript still ends on
// the prompt: no live line until a newer one arrives.
const [stop, setStop] = useState<{ n: number; on: string | null }>({ n: stopped, on: null });
if (stop.n !== stopped) setStop({ n: stopped, on: lastKey });
const halted = stop.on !== null && stop.on === lastKey;
const pending = useMemo(
() => (live ? workingOn(messages, toolResultMap) : null),
[live, messages, toolResultMap]
() => (live && !halted ? workingOn(messages, toolResultMap) : null),
[live, halted, messages, toolResultMap]
);
const stats = useMemo(() => (pending ? turnStats(messages) : null), [pending, messages]);
const keys = useMemo(() => messageKeys(messages), [messages]);
const items = useMemo(() => chatItems(messages, keys), [messages, keys]);
if (loading) {
@@ -657,6 +677,14 @@ export function MessageList({
return (
<WorkGroup key={item.key} blocks={item.blocks} toolResultMap={toolResultMap} />
);
case "ask":
return (
<AskCard
key={item.key}
block={item.block}
result={item.block.id ? (toolResultMap.get(item.block.id) ?? null) : null}
/>
);
case "edits":
// The card closes a finished turn; one still working has none yet.
if (pending && item === items[items.length - 1]) return null;
@@ -923,6 +951,50 @@ function RunningStep({
}
/** Under a turn that ended: how long it took and the output it made. */
/** An AskUserQuestion: each question with the answer the user picked or
* typed (the result's `answers`), "declined" when they refused it, no answer
* yet while the CLI still asks. */
function AskCard({
block,
result,
}: {
block: TranscriptContent;
result: TranscriptContent | null;
}) {
const { t } = useTranslation("sessions");
const input = block.input as { questions?: unknown } | undefined;
const questions = (Array.isArray(input?.questions) ? input.questions : [])
.map((q) => (q && typeof q === "object" ? (q as { question?: unknown }).question : null))
.filter((q): q is string => typeof q === "string");
return (
<div
data-testid="chat-ask"
className="space-y-2 rounded-xl border border-border px-3 py-2 text-sm"
>
{questions.map((q, i) => {
const answer = result?.answers?.[q];
return (
<div key={i}>
<div className="flex items-start gap-1.5 text-fg-secondary">
<MessageCircleQuestion className="mt-0.5 h-3.5 w-3.5 flex-shrink-0" />
<span>{q}</span>
</div>
{answer && (
<div className="ml-5 mt-0.5 flex items-start gap-1.5 font-medium text-fg-primary">
<CornerDownRight className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-fg-muted" />
<span className="whitespace-pre-wrap">{answer}</span>
</div>
)}
</div>
);
})}
{result?.is_error && (
<div className="text-xs text-fg-muted">{t("conversation.askDeclined")}</div>
)}
</div>
);
}
function TurnDone({ ms, output }: { ms: number; output: number }) {
const { t } = useTranslation("sessions");
return (
@@ -0,0 +1,85 @@
/**
* @file MessageList.ask.test.tsx
* @description An AskUserQuestion call is not folded into the collapsed work
* line: the chat shows it as its own card — each question with the answer the
* user picked or typed, "declined" when they refused it, nothing yet while the
* CLI still waits.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
import { describe, it, expect } from "vitest";
import { render, screen, within } from "@testing-library/react";
import { MessageList } from "../MessageList";
import type { TranscriptMessage } from "../../../lib/types";
const at = "2026-10-13T08:00:00.000Z";
const user = (text: string): TranscriptMessage =>
({
type: "user",
sender: "user",
timestamp: at,
content: [{ type: "text", text }],
}) as TranscriptMessage;
const ask = (id: string, questions: string[]): TranscriptMessage =>
({
type: "assistant",
sender: "assistant",
timestamp: at,
content: [
{ type: "tool_use", id: `${id}r`, name: "Read", input: { file_path: "/w/a.ts" } },
{
type: "tool_use",
id,
name: "AskUserQuestion",
input: {
questions: questions.map((question) => ({
question,
header: "Pick",
options: [{ label: "Yes" }, { label: "No" }],
})),
},
},
],
}) as TranscriptMessage;
const result = (id: string, extra: Record<string, unknown>) =>
({
type: "user",
sender: "tool",
timestamp: at,
content: [{ type: "tool_result", id, output: "x", ...extra }],
}) as TranscriptMessage;
describe("an AskUserQuestion card", () => {
it("shows each question with the user's answer, outside the work line", () => {
render(
<MessageList
loading={false}
messages={[
user("go"),
ask("q1", ["Commit?", "Push?"]),
result("q1", { answers: { "Commit?": "Yes", "Push?": "only after review" } }),
]}
/>
);
const card = screen.getByTestId("chat-ask");
expect(within(card).getByText("Commit?")).toBeTruthy();
expect(within(card).getByText("Yes")).toBeTruthy();
expect(within(card).getByText("only after review")).toBeTruthy();
expect(within(screen.getByTestId("chat-tools")).queryByText(/Commit\?/)).toBeNull();
});
it("says declined when refused, and shows no answer while still asked", () => {
const { rerender } = render(
<MessageList loading={false} messages={[user("go"), ask("q1", ["Commit?"])]} />
);
const card = screen.getByTestId("chat-ask");
expect(within(card).getByText("Commit?")).toBeTruthy();
expect(within(card).queryByText(/declined/i)).toBeNull();
rerender(
<MessageList
loading={false}
messages={[user("go"), ask("q1", ["Commit?"]), result("q1", { is_error: true })]}
/>
);
expect(within(screen.getByTestId("chat-ask")).getByText(/declined/i)).toBeTruthy();
});
});
@@ -182,6 +182,29 @@ describe("MessageList — sender attribution", () => {
expect(screen.queryByTestId("chat-running-step")).toBeNull();
});
// Issue #74: Esc before the model wrote anything takes the prompt back into
// Claude Code's input box and writes NO "[Request interrupted…]" line — the
// transcript still ends on the prompt, which read as "Thinking…" for 15 min.
it("drops Thinking… once Stop was pressed, until the transcript moves on", () => {
const prompt = msg({
sender: "user",
timestamp: new Date(Date.now() - 14_000).toISOString(),
content: [{ type: "text", text: "Phần đề xuất trong báo cáo" }],
});
const { rerender } = render(<MessageList loading={false} messages={[prompt]} live />);
expect(screen.getByTestId("chat-running-step")).toHaveTextContent("Thinking");
rerender(<MessageList loading={false} messages={[prompt]} live stopped={1} />);
expect(screen.queryByTestId("chat-running-step")).toBeNull();
// The next prompt is a new turn: its Thinking… shows.
const next = msg({
sender: "user",
timestamp: new Date().toISOString(),
content: [{ type: "text", text: "again" }],
});
rerender(<MessageList loading={false} messages={[prompt, next]} live stopped={1} />);
expect(screen.getByTestId("chat-running-step")).toHaveTextContent("Thinking");
});
it("counts a turn's output once per API call, since its prompt", () => {
const at = "2026-06-26T08:19:00.000Z";
const line = (cache: number, out: number) =>
+612 -72
View File
@@ -1,20 +1,97 @@
/**
* @file A server-backed folder (or file) browser for the path inputs' Browse
* button. Browsers refuse to expose an absolute filesystem path from a native
* picker, so path selection here is done by browsing `GET /api/lanes/browse`
* (immediate subdirectories of a path, plus its files for `kind="file"`)
* instead — breadcrumb-free, just an up-one-level button and a
* click-to-descend list; in file mode a click on a file picks it.
* button, laid out like the OS's own picker. Browsers refuse to expose an
* absolute filesystem path from a native picker, so path selection here is
* done by browsing `GET /api/lanes/browse` instead: back/forward/up, a
* clickable breadcrumb that turns into a path field (Ctrl+L), a Places column
* (Home, the user's workspaces, recent picks), a filter, Name/Modified columns,
* hidden entries on demand and New folder (`POST /api/lanes/browse/mkdir`).
* A click selects, a double-click or Enter opens a folder (picks a file),
* Backspace goes up and typing jumps to a name.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from "react";
import { useTranslation } from "react-i18next";
import { FolderOpen, FolderGit2, ArrowUp, File } from "lucide-react";
import {
ArrowLeft,
ArrowRight,
ArrowUp,
Clock,
Eye,
File,
FolderGit2,
FolderOpen,
FolderPlus,
Home,
Pencil,
Star,
} from "lucide-react";
import { api } from "../../lib/api";
import { formatDateTime } from "../../lib/format";
import { isSubmitEnter } from "../../lib/keys";
import { useDialog } from "../../hooks/useDialog";
import { useWorkLanes } from "../../hooks/useLanes";
export function FolderBrowseModal({
type Listing = Awaited<ReturnType<typeof api.lanes.browse>>;
type Entry = Listing["entries"][number];
const RECENT_KEY = "agenthub.browse.recent";
const HIDDEN_KEY = "agenthub.browse.hidden";
const RECENT_MAX = 8;
function readStored<T>(key: string, fallback: T): T {
try {
const raw = localStorage.getItem(key);
return raw ? (JSON.parse(raw) as T) : fallback;
} catch {
return fallback;
}
}
function writeStored(key: string, value: unknown) {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch {
// A private window or blocked storage: the preference just isn't kept.
}
}
/** `[label, path]` for each level of `p`, root first. */
function crumbs(p: string): [string, string][] {
const win = /^[A-Za-z]:\\/.test(p);
const sep = win ? "\\" : "/";
const parts = p.split(sep).filter(Boolean);
const out: [string, string][] = win ? [] : [["/", "/"]];
let acc = "";
for (const part of parts) {
acc = win ? (acc ? `${acc}\\${part}` : `${part}\\`) : `${acc}/${part}`;
out.push([part, acc]);
}
return out;
}
const baseName = (p: string) => p.split(/[\\/]/).filter(Boolean).pop() || p;
type Props = {
open: boolean;
/** `file` lists files too, and picking one is the only way to select. */
kind?: "dir" | "file";
/** Path to start browsing from; omitted defaults server-side to the home dir. */
initialPath?: string;
onSelect: (path: string) => void;
onClose: () => void;
};
/**
* Mounted only while open, so a closed picker (one behind every Browse
* button) asks the server for nothing, and each opening starts fresh.
*/
export function FolderBrowseModal(props: Props) {
return props.open ? <BrowseDialog {...props} /> : null;
}
function BrowseDialog({
open,
kind = "dir",
initialPath,
@@ -30,20 +107,62 @@ export function FolderBrowseModal({
onClose: () => void;
}) {
const { t } = useTranslation(["lanes"]);
const [listing, setListing] = useState<Awaited<ReturnType<typeof api.lanes.browse>> | null>(null);
const { lanes } = useWorkLanes();
const [listing, setListing] = useState<Listing | null>(null);
const [error, setError] = useState<string | null>(null);
const [history, setHistory] = useState<{ stack: string[]; at: number }>({ stack: [], at: -1 });
const [selected, setSelected] = useState<string | null>(null);
const [filter, setFilter] = useState("");
const [editing, setEditing] = useState(false);
const [pathText, setPathText] = useState("");
const [sort, setSort] = useState<{ key: "name" | "mtime"; dir: 1 | -1 }>({
key: "name",
dir: 1,
});
const [showHidden, setShowHidden] = useState(() => readStored(HIDDEN_KEY, false));
const [creating, setCreating] = useState(false);
const [newName, setNewName] = useState("");
const [recent, setRecent] = useState<string[]>(() => readStored(RECENT_KEY, []));
// The highest folder this user may open (a member's own folder answers no
// parent) — breadcrumbs above it are not links.
const [floor, setFloor] = useState<string | null>(null);
const [home, setHome] = useState<string | null>(null);
const listRef = useRef<HTMLDivElement>(null);
const crumbRef = useRef<HTMLDivElement>(null);
const typeAhead = useRef({ text: "", at: 0 });
const load = async (path?: string) => {
const load = async (
target?: string,
{ push = true, hidden = showHidden, select = null as string | null } = {}
) => {
setError(null);
try {
setListing(await (kind === "file" ? api.lanes.browse(path, true) : api.lanes.browse(path)));
const next = await api.lanes.browse(target, kind === "file", hidden);
setListing(next);
setSelected(select);
setFilter("");
setEditing(false);
if (next.home) setHome(next.home);
if (next.parent === null && crumbs(next.path).length > 1) setFloor(next.path);
if (push) {
setHistory((h) => {
if (h.stack[h.at] === next.path) return h;
const stack = [...h.stack.slice(0, h.at + 1), next.path];
return { stack, at: stack.length - 1 };
});
}
return true;
} catch (err) {
setError(err instanceof Error ? err.message : String(err));
return false;
}
};
useEffect(() => {
if (open) void load(initialPath);
if (!open) return;
setHistory({ stack: [], at: -1 });
setCreating(false);
void load(initialPath);
// Only re-run when the modal actually opens - not on every initialPath
// keystroke in the field behind it.
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -54,8 +173,164 @@ export function FolderBrowseModal({
const panel = useRef<HTMLDivElement>(null);
useDialog(open, panel, onClose);
const entries = useMemo(() => {
const needle = filter.trim().toLowerCase();
const list = (listing?.entries ?? []).filter(
(e) => !needle || e.name.toLowerCase().includes(needle)
);
const by = (a: Entry, b: Entry) =>
sort.key === "mtime"
? ((a.mtime ?? 0) - (b.mtime ?? 0)) * sort.dir
: a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" }) *
sort.dir;
// Folders first, as every file picker lists them.
return [...list].sort((a, b) => Number(!!a.file) - Number(!!b.file) || by(a, b));
}, [listing, filter, sort]);
const places = useMemo(() => {
const seen = new Set<string>();
return lanes
.filter((l) => l.cwd && !seen.has(l.cwd) && seen.add(l.cwd))
.map((l) => ({ label: l.title || baseName(l.cwd), path: l.cwd }));
}, [lanes]);
// A deep path keeps its LAST levels in view, like a native path bar.
useEffect(() => {
const el = crumbRef.current;
if (el) el.scrollLeft = el.scrollWidth;
}, [listing?.path, editing]);
useEffect(() => {
if (!selected) return;
const el = Array.from(listRef.current?.querySelectorAll<HTMLElement>("[data-path]") ?? []).find(
(x) => x.dataset.path === selected
);
el?.scrollIntoView?.({ block: "nearest" });
}, [selected]);
if (!open) return null;
const finish = (picked: string) => {
const folder = kind === "file" ? (listing?.path ?? picked) : picked;
const next = [folder, ...recent.filter((r) => r !== folder)].slice(0, RECENT_MAX);
setRecent(next);
writeStored(RECENT_KEY, next);
onSelect(picked);
onClose();
};
const activate = (entry: Entry) => {
if (entry.file) finish(entry.path);
else void load(entry.path);
};
const go = (delta: -1 | 1) => {
const at = history.at + delta;
const target = history.stack[at];
if (target === undefined) return;
void load(target, { push: false }).then((ok) => {
if (ok) setHistory((h) => ({ ...h, at }));
});
};
const goUp = () => {
if (!listing?.parent) return;
const from = listing.path;
void load(listing.parent, { select: from });
};
const selectedEntry = entries.find((e) => e.path === selected) ?? null;
const target =
kind === "file"
? selectedEntry?.file
? selectedEntry.path
: null
: selectedEntry && !selectedEntry.file
? selectedEntry.path
: (listing?.path ?? null);
const onListKey = (e: KeyboardEvent<HTMLDivElement>) => {
const idx = entries.findIndex((x) => x.path === selected);
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
e.preventDefault();
if (e.altKey && e.key === "ArrowUp") return goUp();
const next =
e.key === "ArrowDown" ? Math.min(entries.length - 1, idx + 1) : Math.max(0, idx - 1);
if (entries[next]) setSelected(entries[next].path);
return;
}
if (e.key === "Home" || e.key === "End") {
e.preventDefault();
const pick = e.key === "Home" ? entries[0] : entries[entries.length - 1];
if (pick) setSelected(pick.path);
return;
}
if (e.key === "Enter") {
e.preventDefault();
if (selectedEntry) activate(selectedEntry);
else if (kind === "dir" && target) finish(target);
return;
}
if (e.key === "Backspace") {
e.preventDefault();
goUp();
return;
}
if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
// Typing jumps to the first name that starts with what was typed.
const now = Date.now();
const ta = typeAhead.current;
ta.text = now - ta.at > 800 ? e.key.toLowerCase() : ta.text + e.key.toLowerCase();
ta.at = now;
const hit = entries.find((x) => x.name.toLowerCase().startsWith(ta.text));
if (hit) setSelected(hit.path);
}
};
const onPanelKey = (e: KeyboardEvent<HTMLDivElement>) => {
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "l") {
e.preventDefault();
setPathText(listing?.path ?? "");
setEditing(true);
} else if (e.altKey && e.key === "ArrowLeft") {
e.preventDefault();
go(-1);
} else if (e.altKey && e.key === "ArrowRight") {
e.preventDefault();
go(1);
}
};
const createFolder = async () => {
const name = newName.trim();
if (!name || !listing) return;
setError(null);
try {
const made = await api.lanes.mkdir(listing.path, name);
setCreating(false);
setNewName("");
await load(listing.path, { push: false, select: made.path });
} catch (err) {
setError(err instanceof Error ? err.message : String(err));
}
};
const toggleHidden = () => {
const next = !showHidden;
setShowHidden(next);
writeStored(HIDDEN_KEY, next);
if (listing) void load(listing.path, { push: false, hidden: next, select: selected });
};
const iconBtn =
"flex h-7 w-7 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-2 disabled:opacity-40 disabled:hover:bg-transparent";
const placeBtn = (active: boolean) =>
`flex w-full items-center gap-2 rounded px-2 py-1 text-left text-xs ${
active ? "bg-surface-2 text-fg-primary" : "text-fg-secondary hover:bg-surface-2"
}`;
const path = listing?.path ?? "";
const floorDepth = floor ? crumbs(floor).length : 0;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
@@ -64,82 +339,347 @@ export function FolderBrowseModal({
>
<div
ref={panel}
className="relative flex max-h-[70vh] w-full max-w-md flex-col rounded-xl border border-border bg-surface-1 shadow-xl shadow-black/40"
className="relative flex h-[min(80vh,640px)] w-full max-w-3xl flex-col rounded-xl border border-border bg-surface-1 shadow-xl shadow-black/40"
onClick={(e) => e.stopPropagation()}
onKeyDown={onPanelKey}
role="dialog"
aria-modal="true"
aria-label={kind === "file" ? t("browse.fileTitle") : t("browse.title")}
data-tour="folder-browse"
>
<div className="border-b border-border p-3">
<div className="truncate font-mono text-xs text-fg-secondary" title={listing?.path}>
{listing?.path || "…"}
{/* Toolbar: history, up, and the breadcrumb / path field. */}
<div className="flex items-center gap-1 border-b border-border p-2">
<button
type="button"
className={iconBtn}
onClick={() => go(-1)}
disabled={history.at <= 0}
title={t("browse.back")}
aria-label={t("browse.back")}
>
<ArrowLeft className="h-4 w-4" />
</button>
<button
type="button"
className={iconBtn}
onClick={() => go(1)}
disabled={history.at >= history.stack.length - 1}
title={t("browse.forward")}
aria-label={t("browse.forward")}
>
<ArrowRight className="h-4 w-4" />
</button>
<button
type="button"
className={iconBtn}
onClick={goUp}
disabled={!listing?.parent}
title={t("browse.up")}
aria-label={t("browse.up")}
>
<ArrowUp className="h-4 w-4" />
</button>
{editing ? (
<input
autoFocus
value={pathText}
onChange={(e) => setPathText(e.target.value)}
onKeyDown={(e) => {
if (isSubmitEnter(e)) {
e.preventDefault();
if (pathText.trim()) void load(pathText.trim());
} else if (e.key === "Escape") {
e.preventDefault();
e.stopPropagation();
setEditing(false);
}
}}
onBlur={() => setEditing(false)}
aria-label={t("browse.editPath")}
spellCheck={false}
className="input min-w-0 flex-1 font-mono text-xs"
/>
) : (
<div
ref={crumbRef}
className="flex min-w-0 flex-1 items-center overflow-x-auto rounded-md border border-border-light px-1 py-0.5"
onDoubleClick={() => {
setPathText(path);
setEditing(true);
}}
>
{crumbs(path).map(([label, p], i, all) => {
const last = i === all.length - 1;
const locked = i + 1 < floorDepth;
return (
<span key={p} className="flex shrink-0 items-center">
{i > 0 && all[i - 1]?.[0] !== "/" && (
<span className="px-0.5 text-fg-muted">›</span>
)}
<button
type="button"
disabled={last || locked}
onClick={() => void load(p, { select: all[i + 1]?.[1] ?? null })}
className={`rounded px-1 py-0.5 font-mono text-xs ${
last
? "font-medium text-fg-primary"
: locked
? "text-fg-muted"
: "text-fg-secondary hover:bg-surface-2"
}`}
>
{label}
</button>
</span>
);
})}
</div>
)}
<button
type="button"
className={iconBtn}
onMouseDown={(e) => e.preventDefault()}
onClick={() => {
setPathText(path);
setEditing((v) => !v);
}}
title={t("browse.editPath")}
aria-label={t("browse.editPath")}
>
<Pencil className="h-3.5 w-3.5" />
</button>
</div>
<div className="flex min-h-0 flex-1">
{/* Places */}
<nav
className="hidden w-44 shrink-0 overflow-y-auto border-r border-border p-2 sm:block"
aria-label={t("browse.places")}
>
{home && (
<button
type="button"
className={placeBtn(path === home)}
onClick={() => void load(home)}
title={home}
>
<Home className="h-3.5 w-3.5 shrink-0" />
<span className="truncate">{t("browse.home")}</span>
</button>
)}
{places.length > 0 && (
<>
<div className="mt-3 flex items-center gap-1 px-2 pb-1 text-[10px] font-medium uppercase tracking-wide text-fg-muted">
<Star className="h-3 w-3" />
{t("browse.workspaces")}
</div>
{places.map((pl) => (
<button
key={pl.path}
type="button"
className={placeBtn(path === pl.path)}
onClick={() => void load(pl.path)}
title={pl.path}
>
<FolderGit2 className="h-3.5 w-3.5 shrink-0 text-accent" />
<span className="truncate">{pl.label}</span>
</button>
))}
</>
)}
{recent.length > 0 && (
<>
<div className="mt-3 flex items-center gap-1 px-2 pb-1 text-[10px] font-medium uppercase tracking-wide text-fg-muted">
<Clock className="h-3 w-3" />
{t("browse.recent")}
</div>
{recent.map((r) => (
<button
key={r}
type="button"
className={placeBtn(path === r)}
onClick={() => void load(r)}
title={r}
>
<FolderOpen className="h-3.5 w-3.5 shrink-0" />
<span className="truncate">{baseName(r)}</span>
</button>
))}
</>
)}
</nav>
{/* Listing */}
<div className="flex min-w-0 flex-1 flex-col">
<div className="flex items-center gap-2 border-b border-border p-2">
<input
value={filter}
onChange={(e) => setFilter(e.target.value)}
onKeyDown={(e) => {
if (e.key === "ArrowDown") {
e.preventDefault();
if (entries[0]) setSelected(entries[0].path);
listRef.current?.focus();
} else if (isSubmitEnter(e) && entries.length === 1 && entries[0]) {
e.preventDefault();
activate(entries[0]);
}
}}
placeholder={t("browse.filter")}
aria-label={t("browse.filter")}
className="input min-w-0 flex-1 text-xs"
/>
</div>
<div className="flex items-center border-b border-border px-3 py-1 text-[10px] font-medium uppercase tracking-wide text-fg-muted">
{(["name", "mtime"] as const).map((key) => (
<button
key={key}
type="button"
onClick={() =>
setSort((s) => ({ key, dir: s.key === key ? (s.dir === 1 ? -1 : 1) : 1 }))
}
className={`${key === "name" ? "flex-1 text-left" : "hidden w-32 text-right sm:block"} hover:text-fg-secondary`}
>
{key === "name" ? t("browse.name") : t("browse.modified")}
{sort.key === key && (sort.dir === 1 ? " ↑" : " ↓")}
</button>
))}
</div>
<div
ref={listRef}
tabIndex={0}
role="listbox"
aria-label={path}
onKeyDown={onListKey}
className="min-h-0 flex-1 overflow-y-auto p-1 outline-none"
>
{error && (
<p role="alert" className="p-2 text-xs text-status-danger">
{error}
</p>
)}
{creating && (
<div className="flex items-center gap-2 px-2 py-1">
<FolderPlus className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
<input
autoFocus
value={newName}
onChange={(e) => setNewName(e.target.value)}
onKeyDown={(e) => {
e.stopPropagation();
if (isSubmitEnter(e)) {
e.preventDefault();
void createFolder();
} else if (e.key === "Escape") {
e.preventDefault();
setCreating(false);
}
}}
placeholder={t("browse.newFolderName")}
aria-label={t("browse.newFolderName")}
className="input min-w-0 flex-1 text-xs"
/>
<button
type="button"
onClick={() => void createFolder()}
disabled={!newName.trim()}
className="btn-primary text-xs disabled:opacity-50"
>
{t("browse.create")}
</button>
</div>
)}
{entries.map((entry) => {
const isSel = entry.path === selected;
return (
<div
key={entry.path}
data-path={entry.path}
role="option"
aria-selected={isSel}
onClick={() => setSelected(entry.path)}
onDoubleClick={() => activate(entry)}
className={`flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-xs ${
isSel ? "bg-accent-solid text-white" : "text-fg-primary hover:bg-surface-2"
}`}
>
{entry.file ? (
<File className={`h-3.5 w-3.5 shrink-0 ${isSel ? "" : "text-fg-muted"}`} />
) : entry.isGitRepo ? (
<FolderGit2
className={`h-3.5 w-3.5 shrink-0 ${isSel ? "" : "text-accent"}`}
/>
) : (
<FolderOpen
className={`h-3.5 w-3.5 shrink-0 ${isSel ? "" : "text-fg-muted"}`}
/>
)}
<span className="min-w-0 flex-1 truncate">{entry.name}</span>
<span
className={`hidden w-32 shrink-0 text-right tabular-nums sm:block ${isSel ? "" : "text-fg-muted"}`}
>
{entry.mtime ? formatDateTime(new Date(entry.mtime).toISOString()) : ""}
</span>
</div>
);
})}
{listing && entries.length === 0 && (
<p className="p-2 text-xs text-fg-muted">
{filter.trim() ? t("browse.noMatch") : t("browse.empty")}
</p>
)}
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto p-1">
{error && (
<p role="alert" className="p-2 text-xs text-status-danger">
{error}
</p>
)}
{listing?.parent && (
<button
type="button"
onClick={() => load(listing.parent!)}
className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs text-fg-secondary hover:bg-surface-2"
>
<ArrowUp className="h-3.5 w-3.5" />
..
</button>
)}
{listing?.entries.map((entry) => (
<button
key={entry.path}
type="button"
onClick={() => {
if (!entry.file) return void load(entry.path);
onSelect(entry.path);
onClose();
}}
className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs text-fg-primary hover:bg-surface-2"
>
{entry.file ? (
<File className="h-3.5 w-3.5 text-fg-muted" />
) : entry.isGitRepo ? (
<FolderGit2 className="h-3.5 w-3.5 text-accent" />
) : (
<FolderOpen className="h-3.5 w-3.5 text-fg-muted" />
)}
<span className="truncate">{entry.name}</span>
</button>
))}
{listing && listing.entries.length === 0 && !listing.parent && (
<p className="p-2 text-xs text-fg-muted">{t("browse.empty")}</p>
)}
</div>
<div className="flex items-center justify-end gap-2 border-t border-border p-3">
<button
type="button"
onClick={onClose}
className="btn-ghost border border-border text-xs"
{/* Footer: what will be picked, and the actions. */}
<div className="border-t border-border p-2">
<div
// rtl so a long path loses its START to the ellipsis, not the folder.
className="truncate px-1 pb-2 text-left font-mono text-xs text-fg-secondary [direction:rtl]"
title={target ?? undefined}
>
{t("destructive.cancel")}
</button>
{kind === "dir" && (
<bdi>{target ?? "…"}</bdi>
</div>
<div className="flex flex-wrap items-center gap-2">
<button
type="button"
disabled={!listing}
onClick={() => {
if (listing) onSelect(listing.path);
onClose();
setNewName("");
setCreating(true);
}}
className="btn-primary text-xs disabled:opacity-50"
disabled={!listing}
className="btn-ghost flex items-center gap-1 border border-border text-xs disabled:opacity-50"
>
{t("browse.select")}
<FolderPlus className="h-3.5 w-3.5" />
{t("browse.newFolder")}
</button>
)}
<label className="flex cursor-pointer items-center gap-1 text-xs text-fg-secondary">
<input type="checkbox" checked={showHidden} onChange={toggleHidden} />
<Eye className="h-3.5 w-3.5" />
{t("browse.showHidden")}
</label>
<span className="hidden flex-1 truncate text-[10px] text-fg-muted md:block">
{t("browse.hint")}
</span>
<div className="ml-auto flex items-center gap-2">
<button
type="button"
onClick={onClose}
className="btn-ghost border border-border text-xs"
>
{t("destructive.cancel")}
</button>
<button
type="button"
disabled={!target}
onClick={() => target && finish(target)}
className="btn-primary text-xs disabled:opacity-50"
>
{kind === "file" ? t("browse.selectFile") : t("browse.select")}
</button>
</div>
</div>
</div>
</div>
</div>
@@ -277,6 +277,13 @@ function HomeBody({
...(claude && inWorktree && project?.root ? { worktree: true } : {}),
});
setPrompt("");
// Here, not only through the effect: the navigate below unmounts this
// home in the same batch, so the effect never sees the empty prompt.
try {
localStorage.removeItem(draftKey);
} catch {
/* storage unavailable: nothing was kept */
}
images.forEach((i) => i.url && URL.revokeObjectURL(i.url));
setImages([]);
navigate(`/workspace?lane=${lane.id}&run=${encodeURIComponent(runId)}`);
@@ -27,6 +27,8 @@ vi.mock("../../../lib/api", () => ({
ensure: vi.fn(),
browse: vi.fn(),
pickPath: vi.fn(),
// The folder browser's Places list the user's workspaces.
list: vi.fn(() => Promise.resolve({ lanes: [], counts: {} })),
get: vi.fn(),
profileInit: vi.fn(),
mcpSync: vi.fn(),
@@ -614,7 +616,7 @@ describe("AddLaneModal — folder browse", () => {
expect(onClose).not.toHaveBeenCalled();
});
it("opens the browser, lists subdirectories, and selecting one fills the path field", async () => {
it("opens the browser, lists subdirectories, and a double-click opens one", async () => {
noNativePicker();
vi.mocked(api.lanes.browse).mockResolvedValue({
path: "/Users/tester",
@@ -627,8 +629,8 @@ describe("AddLaneModal — folder browse", () => {
await user.click(screen.getByTitle("Browse for a folder"));
expect(await screen.findByText("projects")).toBeInTheDocument();
await user.click(screen.getByText("projects"));
expect(api.lanes.browse).toHaveBeenCalledWith("/Users/tester/projects");
await user.dblClick(screen.getByText("projects"));
expect(api.lanes.browse).toHaveBeenCalledWith("/Users/tester/projects", false, false);
});
it("Escape closes only the folder browser, not the whole modal", async () => {
@@ -0,0 +1,178 @@
/**
* @file FolderBrowseModal.test.tsx
* @description Unit tests for the in-app folder browser laid out like a
* native picker: a click selects and Select picks that folder (else the
* current one), a double-click opens, Backspace and the breadcrumb go up,
* the filter narrows the list, Places open Home and a workspace, the path
* field (Ctrl+L) opens a typed path, New folder makes one and selects it,
* Show hidden re-lists with dot entries, and a Select is remembered as Recent.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { api } from "../../../lib/api";
import { FolderBrowseModal } from "../FolderBrowseModal";
vi.mock("../../../lib/api", () => ({
api: { lanes: { browse: vi.fn(), mkdir: vi.fn(), list: vi.fn() } },
}));
const TREE: Record<string, string[]> = {
"/home/u": ["proj", "notes"],
"/home/u/proj": ["api", "web"],
"/home/u/proj/api": [],
"/home/u/proj/web": [],
"/home/u/notes": [],
"/srv/ws": [],
};
function listing(p: string, hidden = false) {
const names = [...(TREE[p] ?? []), ...(hidden ? [".cfg"] : [])];
return {
path: p,
parent: p === "/home/u" ? null : p.slice(0, p.lastIndexOf("/")) || "/",
home: "/home/u",
entries: names.map((n, i) => ({
name: n,
path: `${p}/${n}`,
isGitRepo: n === "api",
mtime: 1_700_000_000_000 + i,
})),
};
}
beforeEach(() => {
localStorage.clear();
vi.mocked(api.lanes.browse)
.mockReset()
.mockImplementation(async (p?: string, _f?: boolean, hidden?: boolean) => {
const at = p || "/home/u";
if (!(at in TREE)) throw new Error("path does not exist");
return listing(at, hidden);
});
vi.mocked(api.lanes.mkdir).mockReset();
vi.mocked(api.lanes.list)
.mockReset()
.mockResolvedValue({
lanes: [{ id: 1, title: "Shop API", cwd: "/srv/ws" }],
counts: {},
} as never);
});
const open = (onSelect = vi.fn(), initialPath?: string) => {
render(
<FolderBrowseModal open initialPath={initialPath} onSelect={onSelect} onClose={vi.fn()} />
);
return screen.findByRole("dialog", { name: "Browse for a folder" });
};
const option = (dialog: HTMLElement, name: string) =>
within(dialog).findByRole("option", { name: new RegExp(name) });
describe("FolderBrowseModal", () => {
it("click selects, double-click opens, Select picks the selection else the folder", async () => {
const onSelect = vi.fn();
const dialog = await open(onSelect);
await userEvent.click(await option(dialog, "proj"));
expect(await option(dialog, "proj")).toHaveAttribute("aria-selected", "true");
await userEvent.dblClick(await option(dialog, "proj"));
await option(dialog, "web");
await userEvent.click(within(dialog).getByRole("button", { name: "Select this folder" }));
expect(onSelect).toHaveBeenCalledWith("/home/u/proj");
});
it("Enter opens the selected folder and Backspace goes back up to it", async () => {
const dialog = await open();
const list = within(dialog).getByRole("listbox");
await userEvent.click(await option(dialog, "proj"));
await userEvent.keyboard("{Enter}");
await option(dialog, "api");
list.focus();
await userEvent.keyboard("{Backspace}");
await waitFor(() =>
expect(within(dialog).getByRole("option", { name: /proj/ })).toHaveAttribute(
"aria-selected",
"true"
)
);
});
it("the breadcrumb, Back and Forward move between folders", async () => {
const dialog = await open(vi.fn(), "/home/u/proj/api");
await userEvent.click(within(dialog).getByRole("button", { name: "proj" }));
await option(dialog, "web");
await userEvent.click(within(dialog).getByRole("button", { name: /^Back/ }));
await waitFor(() =>
expect(api.lanes.browse).toHaveBeenLastCalledWith("/home/u/proj/api", false, false)
);
await userEvent.click(within(dialog).getByRole("button", { name: /^Forward/ }));
await waitFor(() =>
expect(api.lanes.browse).toHaveBeenLastCalledWith("/home/u/proj", false, false)
);
// Above the user's own folder (it answered no parent) nothing is a link.
await userEvent.click(within(dialog).getByRole("button", { name: /^Home$/ }));
await option(dialog, "notes");
expect(within(dialog).getByRole("button", { name: "home" })).toBeDisabled();
});
it("the filter narrows the list, and Enter on a single match opens it", async () => {
const dialog = await open();
await option(dialog, "notes");
await userEvent.type(within(dialog).getByRole("textbox", { name: "Filter…" }), "pro");
expect(within(dialog).queryByRole("option", { name: /notes/ })).toBeNull();
await userEvent.keyboard("{Enter}");
await option(dialog, "web");
});
it("Places open a workspace and Home; Ctrl+L opens a typed path", async () => {
const dialog = await open(vi.fn(), "/home/u/proj");
await userEvent.click(await within(dialog).findByRole("button", { name: /Shop API/ }));
await waitFor(() => expect(api.lanes.browse).toHaveBeenLastCalledWith("/srv/ws", false, false));
await userEvent.click(within(dialog).getByRole("button", { name: /^Home$/ }));
await option(dialog, "notes");
await userEvent.keyboard("{Control>}l{/Control}");
const field = within(dialog).getByRole("textbox", { name: "Type a path (Ctrl+L)" });
await userEvent.clear(field);
await userEvent.type(field, "/home/u/proj/web{Enter}");
await waitFor(() =>
expect(api.lanes.browse).toHaveBeenLastCalledWith("/home/u/proj/web", false, false)
);
});
it("New folder makes one in the current folder and selects it", async () => {
vi.mocked(api.lanes.mkdir).mockImplementation(async (parent, name) => {
TREE[parent] = [...(TREE[parent] ?? []), name];
return { path: `${parent}/${name}` };
});
const dialog = await open();
await option(dialog, "proj");
await userEvent.click(within(dialog).getByRole("button", { name: /New folder/ }));
await userEvent.type(
within(dialog).getByRole("textbox", { name: "Folder name" }),
"fresh{Enter}"
);
expect(api.lanes.mkdir).toHaveBeenCalledWith("/home/u", "fresh");
await waitFor(async () =>
expect(await option(dialog, "fresh")).toHaveAttribute("aria-selected", "true")
);
TREE["/home/u"] = ["proj", "notes"];
});
it("Show hidden re-lists with dot entries, and a pick is kept as Recent", async () => {
const onSelect = vi.fn();
const dialog = await open(onSelect);
await option(dialog, "proj");
expect(within(dialog).queryByRole("option", { name: /\.cfg/ })).toBeNull();
await userEvent.click(within(dialog).getByRole("checkbox", { name: /Show hidden/ }));
await option(dialog, "\\.cfg");
await userEvent.dblClick(await option(dialog, "proj"));
await option(dialog, "web");
await userEvent.click(within(dialog).getByRole("button", { name: "Select this folder" }));
expect(onSelect).toHaveBeenCalledWith("/home/u/proj");
expect(JSON.parse(localStorage.getItem("agenthub.browse.recent") || "[]")).toEqual([
"/home/u/proj",
]);
});
});
@@ -14,7 +14,7 @@
import { beforeEach, describe, expect, it, vi } from "vitest";
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
import { MemoryRouter, Route, Routes, useLocation, useSearchParams } from "react-router-dom";
import type { Lane, Session } from "../../../lib/types";
import type { LaneSourcesView, RunHandle } from "../../../lib/api";
@@ -241,6 +241,27 @@ describe("WorkspaceHome", () => {
await waitFor(() => expect(localStorage.getItem("agenthub.workspace.draft.1")).toBeNull());
});
it("drops the sent prompt's draft even though opening the session unmounts the home", async () => {
// As the Workspace page: `&run=` replaces the home with the session view.
function HomeUntilRun() {
const [params] = useSearchParams();
return params.get("run") ? null : <WorkspaceHome lane={lane()} onMenuAction={() => undefined} />;
}
const user = userEvent.setup();
render(
<MemoryRouter initialEntries={["/workspace?lane=1"]}>
<Routes>
<Route path="*" element={<HomeUntilRun />} />
</Routes>
</MemoryRouter>
);
await screen.findByTestId("workspace-recent-s-live");
await user.type(screen.getByLabelText("How can I help you today?"), "sent once");
await user.click(screen.getByTestId("workspace-home-start"));
await waitFor(() => expect(screen.queryByTestId("workspace-home-start")).toBeNull());
expect(localStorage.getItem("agenthub.workspace.draft.1")).toBeNull();
});
it("keeps AI and Model (with effort) in the box, Proxy/Permission/Worktree under it", async () => {
renderHome();
await screen.findByTestId("workspace-recent-s-live");
+200 -18
View File
@@ -12,11 +12,18 @@
* `/model <id>` / `/effort <level>` — and the permission mode, which only
* Shift+Tab changes in a running session, so the server steps it and reads
* every step back off the pane (`POST /api/run/:id/permission-mode`); it sits
* in the box beside `+`. A permission prompt or a menu still needs the terminal.
* in the box beside `+`. A menu the CLI asks with — AskUserQuestion, a
* permission or trust prompt, Codex's approval — is read off the terminal
* underneath (`readRunMenu`) and shown in the prompt box's place as buttons
* that press its keys there (`PaneMenuCard`); its "Type something" row opens
* a field in the card, whose text is typed there as the answer
* (`answerRunMenu`).
* It also has Claude Desktop's activity panel (`ChatOutline`: progress,
* outputs, what the session used), open at first in a pane spanning the
* grid's full width or height (`panelOpen`) and collapsed into a file button
* with the output count in a quarter-sized one; it sits beside the
* grid's full width or height (`panelOpen`) once the session has an output,
* else collapsed into a file button with the output count; the user's own
* open/close is kept per session for the tab (sessionStorage), so the chat
* leaving for the terminal and back keeps it; it sits beside the
* conversation when the pane is wide and over it when narrow (a CSS container
* query on the pane, not the window), dragged wider or narrower by its
* splitter there (a fraction of the pane, remembered per browser). A file
@@ -49,7 +56,8 @@
import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
import { useTranslation } from "react-i18next";
import { ArrowUp, FileText, Square } from "lucide-react";
import { ArrowUp, FileText, Square, SquareCheck } from "lucide-react";
import { isSubmitEnter } from "../../lib/keys";
import { ConversationView } from "../conversation/ConversationView";
import { ModelMenu, PromptEditor, promptWithImages, type PromptImage } from "./RunSetup";
import { ChatAddMenu } from "./ChatAddMenu";
@@ -59,7 +67,14 @@ import { ChatOutline, outlineAttachment, useSessionOutline, type OutlineList } f
import { FileListModal, FilePreview, SkillListModal, type PreviewScope } from "./ChatFilePreview";
import { Select } from "../Select";
import { Divider, showTerminal } from "./PaneGrid";
import { interruptRun, submitToRun } from "../../lib/panePaste";
import {
answerRunMenu,
chooseRunOption,
interruptRun,
readRunMenu,
submitToRun,
type PaneMenu,
} from "../../lib/panePaste";
import { useLiveRefresh } from "../../hooks/useLiveRefresh";
import { openInChanges } from "../../lib/openInChanges";
import { toast } from "../../lib/toast";
@@ -79,6 +94,11 @@ const MODES: [PermissionMode, string][] = [
const isSettable = (m: unknown): m is PermissionMode => MODES.some(([v]) => v === m);
const SIDE_KEY = "agenthub.chat.panelWidth";
const clampSide = (f: number) => Math.round(Math.min(0.7, Math.max(0.2, f)) * 100) / 100;
const outlineKey = (sessionId: string) => `agenthub.chat.panel.${sessionId}`;
const readOutlineChoice = (sessionId: string) => {
const v = sessionStorage.getItem(outlineKey(sessionId));
return v === null ? null : v === "1";
};
const storedSide = () => {
const f = Number(localStorage.getItem(SIDE_KEY));
return f ? clampSide(f) : null;
@@ -184,6 +204,108 @@ function PermissionChip({ runId, initial }: { runId: string; initial: Permission
);
}
/** The menu the CLI asks with, as buttons: a pick presses its key in the
* pane; its "Type something" row opens a field right there instead —
* pressing that row's digit again would type the digit into the CLI's own. */
function PaneMenuCard({
menu,
onChoose,
onAnswer,
onCancel,
}: {
menu: PaneMenu;
onChoose: (index: number) => void;
onAnswer: (text: string) => void;
onCancel: () => void;
}) {
const { t } = useTranslation("run");
const [typing, setTyping] = useState(false);
const [draft, setDraft] = useState("");
const submit = () => draft.trim() && onAnswer(draft);
return (
<div
data-testid="pane-chat-menu"
className="rounded-2xl border border-border bg-surface-1 p-3 shadow-sm"
>
{menu.question && (
<p className="mb-2 whitespace-pre-wrap break-words text-sm font-medium text-fg-primary">
{menu.question}
</p>
)}
<div className="flex flex-col gap-1">
{menu.options.map((o, i) =>
typing && i === menu.typeAt ? (
<div
key={`${i}-type`}
className="flex items-center gap-2 rounded-lg border border-accent/50 bg-surface-2 px-3 py-1"
>
<span className="w-4 flex-shrink-0 font-mono text-xs text-fg-muted">{o.n}</span>
<input
autoFocus
data-testid="pane-chat-menu-input"
value={draft}
onChange={(e) => setDraft(e.target.value)}
onKeyDown={(e) => {
if (isSubmitEnter(e)) {
e.preventDefault();
submit();
} else if (e.key === "Escape") setTyping(false);
}}
placeholder={t("chat.menu.placeholder")}
aria-label={t("chat.menu.placeholder")}
className="min-w-0 flex-1 bg-transparent py-0.5 text-sm text-fg-primary outline-none placeholder:text-fg-muted"
/>
<button
type="button"
data-testid="pane-chat-menu-send"
onClick={submit}
disabled={!draft.trim()}
aria-label={t("chat.send")}
title={t("chat.send")}
className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-accent-solid text-white transition-opacity hover:opacity-90 disabled:opacity-40"
>
<ArrowUp className="h-3.5 w-3.5" />
</button>
</div>
) : (
<button
key={`${i}-${o.label}`}
type="button"
onClick={() => (i === menu.typeAt ? setTyping(true) : onChoose(i))}
className={`flex items-start gap-2 rounded-lg border px-3 py-1.5 text-left text-sm text-fg-primary hover:bg-surface-3 ${
i === menu.cursor ? "border-accent/50 bg-surface-2" : "border-border"
}`}
>
<span className="mt-0.5 w-4 flex-shrink-0 font-mono text-xs text-fg-muted">
{o.checked === null ? (
(o.n ?? "↵")
) : o.checked ? (
<SquareCheck className="h-3.5 w-3.5 text-accent" />
) : (
<Square className="h-3.5 w-3.5" />
)}
</span>
<span className="min-w-0 break-words">
{o.label}
{o.hint && <span className="block text-xs text-fg-muted">{o.hint}</span>}
</span>
</button>
)
)}
</div>
<div className="mt-2 flex items-center gap-2 text-xs text-fg-muted">
<button
type="button"
onClick={onCancel}
className="ml-auto rounded-md border border-border px-2 py-0.5 hover:bg-surface-3"
>
{t("chat.menu.cancel")}
</button>
</div>
</div>
);
}
export function PaneChat({
run,
sessionId,
@@ -213,11 +335,20 @@ export function PaneChat({
const [model, setModel] = useState(run.model ?? "");
const [effort, setEffort] = useState<EffortLevel>(run.effort ?? "");
const pickFiles = useRef<(() => void) | null>(null);
const [outlineOpen, setOutlineOpen] = useState(panelOpen);
// The user's own open/close, per session for this tab: it outlives the chat
// leaving for the terminal (an unmount). Unset, the default rules.
const [outlineChoice, setOutlineChoice] = useState(() => readOutlineChoice(sessionId));
// A split or a close changes the pane's shape: its default comes back.
useEffect(() => setOutlineOpen(panelOpen), [panelOpen]);
const shape = useRef(panelOpen);
useEffect(() => {
if (shape.current === panelOpen) return;
shape.current = panelOpen;
sessionStorage.removeItem(outlineKey(sessionId));
setOutlineChoice(null);
}, [panelOpen, sessionId]);
const openOutline = (open: boolean) => {
setOutlineOpen(open);
sessionStorage.setItem(outlineKey(sessionId), open ? "1" : "0");
setOutlineChoice(open);
setPreview(null);
};
const [preview, setPreview] = useState<string | null>(null);
@@ -240,6 +371,8 @@ export function PaneChat({
}, []);
const [list, setList] = useState<OutlineList | null>(null);
const activity = useSessionOutline(sessionId);
// Open by default only in a spanning pane, and only once there is an output.
const outlineOpen = outlineChoice ?? (panelOpen && activity.outputs.length > 0);
const scope: PreviewScope = { laneId, laneCwd: laneCwd || cwd, cwd, sessionId };
const text = promptWithImages(prompt, images);
@@ -247,6 +380,8 @@ export function PaneChat({
// waits on the user from a Notification (a permission prompt) to the next hook.
const [working, setWorking] = useState(false);
const [waiting, setWaiting] = useState(false);
// Stop presses, for the conversation's live line (issue #74).
const [stops, setStops] = useState(0);
const readWorking = useCallback(
() =>
api.agents
@@ -275,14 +410,41 @@ export function PaneChat({
(msg.data as { session_id?: string } | undefined)?.session_id === sessionId,
});
// A hidden tab says when this session waits on the user or its turn ended.
const was = useRef({ working: false, waiting: false });
// The menu the terminal underneath shows now. AskUserQuestion fires no
// Notification, so this — not `waiting` alone — says the CLI asks.
// ponytail: polls the xterm buffer; subscribe to its onRender if it ever shows in a profile.
const [menu, setMenu] = useState<PaneMenu | null>(null);
useEffect(() => {
if (waiting) setTabBadge(runId, "waiting");
const read = () =>
setMenu((prev) => {
const next = readRunMenu(runId);
return JSON.stringify(next) === JSON.stringify(prev) ? prev : next;
});
read();
const timer = window.setInterval(read, 700);
return () => window.clearInterval(timer);
}, [runId]);
const asking = waiting || menu !== null;
// Gone until the pane redraws: no second press on a stale menu.
const choose = (index: number) => {
if (menu && chooseRunOption(runId, menu, index)) setMenu(null);
else toast.error(t("chat.notSent"));
};
const answer = (reply: string) => {
if (menu && answerRunMenu(runId, menu, reply)) {
setMenu(null);
setFollow((n) => n + 1);
} else toast.error(t("chat.notSent"));
};
// A hidden tab says when this session waits on the user or its turn ended.
const was = useRef({ working: false, asking: false });
useEffect(() => {
if (asking) setTabBadge(runId, "waiting");
else if (working) setTabBadge(runId, null);
else if (was.current.working || was.current.waiting) setTabBadge(runId, "done");
was.current = { working, waiting };
}, [runId, working, waiting]);
else if (was.current.working || was.current.asking) setTabBadge(runId, "done");
was.current = { working, asking };
}, [runId, working, asking]);
useEffect(() => () => setTabBadge(runId, null), [runId]);
const [context, setContext] = useState<{ tokens: number; model: string | null }>({
tokens: 0,
@@ -339,7 +501,8 @@ export function PaneChat({
fill
live
follow={follow}
waiting={waiting}
waiting={asking}
stopped={stops}
onOpenTerminal={() => showTerminal(runId, sessionId)}
onContext={onContext}
onNotStarted={setNotStarted}
@@ -366,7 +529,24 @@ export function PaneChat({
</div>
<div className="mx-4">
<div className="mx-auto w-full max-w-[max(48rem,70%)]">
<div className="rounded-2xl border border-border bg-surface-1 p-2 shadow-sm transition-colors focus-within:border-accent/50">
{menu && (
<PaneMenuCard
// A new question starts with its field closed.
key={menu.question}
menu={menu}
onChoose={choose}
onAnswer={answer}
onCancel={() => {
if (interruptRun(runId)) setMenu(null);
else toast.error(t("chat.notSent"));
}}
/>
)}
{/* In the card's place while the CLI asks: hidden, never unmounted,
so a draft or an upload in flight survives the question. */}
<div
className={`rounded-2xl border border-border bg-surface-1 p-2 shadow-sm transition-colors focus-within:border-accent/50 ${menu ? "hidden" : ""}`}
>
<PromptEditor
bare
images={images}
@@ -413,8 +593,10 @@ export function PaneChat({
data-testid="pane-chat-stop"
onClick={() => {
// An interrupted turn fires no Stop hook: clear it here.
if (interruptRun(runId)) setWorking(false);
else toast.error(t("chat.notStopped"));
if (interruptRun(runId)) {
setWorking(false);
setStops((n) => n + 1);
} else toast.error(t("chat.notStopped"));
}}
aria-label={t("chat.stop")}
title={t("chat.stop")}
+46 -38
View File
@@ -17,7 +17,7 @@
* Files (images or any other) dropped or pasted on it — Ctrl+V included — are saved on the server
* (`POST /api/run/drop-file`) and their PATHS pasted into the pane — what a
* local terminal does on a drop, and how `claude` attaches an image or reads
* a file. The pane also registers with
* a file. A text drag (a Files/Changes row, a skill) is pasted as its text. The pane also registers with
* `lib/panePaste.ts`, so a diff-line comment from the Changes panel can be
* pasted into whichever of the workspace's panes was focused last.
* Keyboard: the terminal keeps Tab and Shift+Tab (claude cycles its permission
@@ -25,6 +25,9 @@
* from its terminal — announced by a hint the textarea is described by;
* Cmd+F (macOS) / Ctrl+Shift+F opens a find bar (`@xterm/addon-search`). A screen-reader mode
* (`agenthub.terminal.screenReader` = "1" in localStorage) turns on xterm's.
* An input method that edits the textarea without composition events (macOS
* Vietnamese Telex) is typed through `lib/imeInput.ts` — xterm alone
* dropped its capitals and the words it rewrites.
* URLs open in a new tab (`@xterm/addon-web-links`); a selection tmux copies
* (OSC 52 — tmux's default `set-clipboard external` passes its own
* copy-mode selections on; a CLI's OSC 52 inside the pane is not) lands in the browser
@@ -37,7 +40,15 @@
* here takes the lead back (`resize` with `drive: true`).
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
import { useEffect, useId, useMemo, useRef, useState, type ClipboardEvent, type DragEvent } from "react";
import {
useEffect,
useId,
useMemo,
useRef,
useState,
type ClipboardEvent,
type DragEvent,
} from "react";
import { useTranslation } from "react-i18next";
import type { Terminal } from "@xterm/xterm";
import type { CanvasAddon } from "@xterm/addon-canvas";
@@ -49,9 +60,10 @@ import { useTheme } from "../../hooks/useTheme";
import { terminalThemeFor } from "../../lib/terminalTheme";
import { api } from "../../lib/api";
import { notePaneFocus, registerPane } from "../../lib/panePaste";
import { attachImeInput } from "../../lib/imeInput";
import { TERMINAL_FONTS, readTerminalFont } from "../../lib/terminalFont";
type DropState = "hint" | "uploading" | "failed";
type DropState = "hint" | "paste" | "uploading" | "failed";
/** localStorage flag for xterm's screen-reader mode (a Settings toggle can set it later). */
export const SCREEN_READER_KEY = "agenthub.terminal.screenReader";
@@ -122,6 +134,10 @@ export function loadXterm(): Promise<Xterm> {
const RETRY_MIN_MS = 1500;
const RETRY_MAX_MS = 30_000;
const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer.types).includes("Files");
/** A text drag (a Files/Changes row, a skill, selected text): xterm.js has no
* drop handling of its own, so the pane pastes it, as a local terminal does. */
const hasText = (e: DragEvent) =>
!hasFiles(e) && Array.from(e.dataTransfer.types).includes("text/plain");
interface TerminalViewProps {
runId: string;
@@ -188,7 +204,16 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
const ctrlVRef = useRef(false);
const onDrop = (e: DragEvent) => {
if (!hasFiles(e)) return; // dragged text keeps xterm's own handling
if (hasText(e)) {
e.preventDefault();
dragDepth.current = 0;
setDrop(null);
const text = e.dataTransfer.getData("text/plain");
if (text) termRef.current?.paste(text + " ");
termRef.current?.focus();
return;
}
if (!hasFiles(e)) return;
e.preventDefault();
dragDepth.current = 0;
void attachFiles(Array.from(e.dataTransfer.files));
@@ -196,13 +221,14 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
// A pasted image (a screenshot) goes the way of a drop: xterm only reads
// text/plain and would paste nothing. Capture phase, because xterm's own
// paste listener stops the event. A Ctrl+V with no file in it is the pane's
// ^V again (vim's block select, readline's quoted insert), not a text paste.
// paste listener stops the event. Text is xterm's to paste, Ctrl+V's too;
// only a Ctrl+V with nothing on the clipboard is the pane's ^V again
// (vim's block select, readline's quoted insert).
const onPaste = (e: ClipboardEvent) => {
const ctrlV = ctrlVRef.current;
ctrlVRef.current = false;
const files = Array.from(e.clipboardData?.files ?? []);
if (files.length === 0 && !ctrlV) return;
if (files.length === 0 && (!ctrlV || e.clipboardData?.getData("text/plain"))) return;
e.preventDefault();
e.stopPropagation();
if (files.length > 0) void attachFiles(files);
@@ -350,7 +376,8 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
}
// Ctrl+V: xterm would send ^V, and claude would then read the
// SERVER's clipboard, never this browser's. Let the browser paste
// instead (onPaste); a browser that fires none still sends ^V.
// instead (onPaste: a file's path, or the text); a browser that fires
// no paste, or one with nothing on the clipboard, still sends ^V.
if (ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey && key === "v") {
ctrlVRef.current = true;
setTimeout(() => {
@@ -519,29 +546,11 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
const reassert = takeLead;
term.textarea?.addEventListener("focus", reassert);
// Safari with macOS's own Vietnamese Telex types a word by REPLACING it:
// after the first letter every key fires `insertReplacementText` carrying
// the whole word ("x" → "xi" → "xin"), before its keydown. xterm forwards
// only `insertText`, and its keyCode-229 fallback snapshots the textarea
// after the change, so all but each word's first letter was lost (xterm.js
// #5887). Send the edit ourselves: a DEL per replaced char, then the tail.
let beforeReplace = "";
const onBeforeReplace = (e: Event) => {
if ((e as InputEvent).inputType === "insertReplacementText") {
beforeReplace = term.textarea?.value ?? "";
}
};
const onReplace = (e: Event) => {
if ((e as InputEvent).inputType !== "insertReplacementText") return;
const before = Array.from(beforeReplace);
const after = Array.from(term.textarea?.value ?? "");
let same = 0;
while (same < before.length && before[same] === after[same]) same++;
const edit = "\x7f".repeat(before.length - same) + after.slice(same).join("");
if (edit) term.input(edit, true);
};
term.textarea?.addEventListener("beforeinput", onBeforeReplace);
term.textarea?.addEventListener("input", onReplace);
// macOS's own Vietnamese Telex (Safari and Chrome) types into the
// textarea with no composition events: a capital arrives while Shift is
// held and every later key REPLACES the word — both dropped by xterm
// (xterm.js #5887). lib/imeInput.ts sends those edits itself.
const detachIme = attachImeInput(term);
const refit = () => {
// Never fit a collapsed console — see sendSize.
@@ -571,8 +580,7 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
resizeObserver.disconnect();
document.fonts?.removeEventListener("loadingdone", onFontLoaded);
term.textarea?.removeEventListener("focus", reassert);
term.textarea?.removeEventListener("beforeinput", onBeforeReplace);
term.textarea?.removeEventListener("input", onReplace);
detachIme();
resizeDisposable.dispose();
dataDisposable.dispose();
ws?.close();
@@ -678,20 +686,20 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
className="relative h-full w-full pb-1 pl-3 pr-1 pt-1.5"
style={{ backgroundColor: palette.background }}
onDragEnter={(e) => {
if (!hasFiles(e)) return;
if (!hasFiles(e) && !hasText(e)) return;
e.preventDefault();
dragDepth.current += 1;
setDrop("hint");
setDrop(hasFiles(e) ? "hint" : "paste");
}}
onDragOver={(e) => {
if (!hasFiles(e)) return;
if (!hasFiles(e) && !hasText(e)) return;
e.preventDefault(); // without it the browser refuses the drop
e.dataTransfer.dropEffect = "copy";
}}
onDragLeave={(e) => {
if (!hasFiles(e)) return;
if (!hasFiles(e) && !hasText(e)) return;
dragDepth.current = Math.max(0, dragDepth.current - 1);
if (dragDepth.current === 0) setDrop((d) => (d === "hint" ? null : d));
if (dragDepth.current === 0) setDrop((d) => (d === "hint" || d === "paste" ? null : d));
}}
onDrop={onDrop}
onPasteCapture={onPaste}
@@ -7,16 +7,25 @@
* 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, 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.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { PaneChat, contextWindow } from "../PaneChat";
import { api } from "../../../lib/api";
import { interruptRun, submitToRun } from "../../../lib/panePaste";
import {
answerRunMenu,
chooseRunOption,
interruptRun,
readRunMenu,
submitToRun,
type PaneMenu,
} from "../../../lib/panePaste";
import { OPEN_IN_CHANGES_EVENT } from "../../../lib/openInChanges";
vi.mock("../../conversation/ConversationView", () => ({
@@ -41,6 +50,9 @@ vi.mock("../../../lib/confirm", () => ({ confirmDialog }));
vi.mock("../../../lib/panePaste", () => ({
submitToRun: vi.fn(() => true),
interruptRun: vi.fn(() => true),
readRunMenu: vi.fn(() => null),
chooseRunOption: vi.fn(() => true),
answerRunMenu: vi.fn(() => true),
}));
vi.mock("../../../lib/api", async (importOriginal) => {
const actual = await importOriginal<Record<string, unknown>>();
@@ -136,6 +148,7 @@ beforeEach(() => {
vi.mocked(submitToRun).mockClear();
// A prompt typed in one test is a saved draft in the next (`lib/chatDraft`).
localStorage.removeItem("agenthub.chat.draft.s1");
sessionStorage.clear();
});
describe("PaneChat — the + menu", () => {
@@ -301,27 +314,63 @@ describe("PaneChat — the activity panel", () => {
expect(screen.getByTestId("chat-outline")).toBeTruthy();
});
it("starts open in a pane spanning the grid, and follows the pane when it is split", () => {
it("starts open in a pane spanning the grid, and follows the pane when it is split", async () => {
const pane = (panelOpen: boolean) => (
<MemoryRouter>
<PaneChat run={RUN} sessionId="s1" cwd="/w" panelOpen={panelOpen} />
</MemoryRouter>
);
const { rerender } = render(pane(true));
expect(screen.getByTestId("chat-outline")).toBeTruthy();
await screen.findByTestId("chat-outline");
rerender(pane(false));
expect(screen.queryByTestId("chat-outline")).toBeNull();
expect(screen.getByTestId("chat-outline-show")).toBeTruthy();
});
it("resizes from its splitter and remembers the width", () => {
it("starts closed while the session has no output, even in a spanning pane", async () => {
vi.mocked(api.sessions.outline).mockResolvedValueOnce({
progress: [],
outputs: [],
files: [],
uploads: [],
memory: [],
skills: [],
mcp: [],
} as never);
render(
<MemoryRouter>
<PaneChat run={RUN} sessionId="s1" cwd="/w" panelOpen />
</MemoryRouter>
);
await waitFor(() => expect(api.sessions.outline).toHaveBeenCalled());
expect(screen.queryByTestId("chat-outline")).toBeNull();
expect(screen.getByTestId("chat-outline-show").textContent).toBe("0");
});
it("keeps the user's open or close across the chat leaving for the terminal", async () => {
const pane = () => (
<MemoryRouter>
<PaneChat run={RUN} sessionId="s1" cwd="/w" panelOpen />
</MemoryRouter>
);
const first = render(pane());
fireEvent.click(
within(await screen.findByTestId("chat-outline")).getByRole("button", { name: "Hide side panel" })
);
first.unmount();
render(pane());
await waitFor(() => expect(screen.getByTestId("chat-outline-show").textContent).toBe("2"));
expect(screen.queryByTestId("chat-outline")).toBeNull();
});
it("resizes from its splitter and remembers the width", async () => {
localStorage.removeItem("agenthub.chat.panelWidth");
render(
<MemoryRouter>
<PaneChat run={RUN} sessionId="s1" cwd="/w" panelOpen />
</MemoryRouter>
);
const splitter = screen.getByRole("separator", { name: "Resize side panel" });
const splitter = await screen.findByRole("separator", { name: "Resize side panel" });
expect(splitter.getAttribute("aria-valuenow")).toBe("70");
fireEvent.keyDown(splitter, { key: "ArrowLeft" });
expect(localStorage.getItem("agenthub.chat.panelWidth")).toBe("0.35");
@@ -412,3 +461,51 @@ describe("PaneChat — the unsent prompt", () => {
expect(confirmDialog).not.toHaveBeenCalled();
});
});
describe("PaneChat — a menu the CLI asks with", () => {
const MENU: PaneMenu = {
question: "Which color?",
options: [
{ n: 1, label: "Red", hint: "warm", checked: null },
{ n: 2, label: "Type something.", hint: "", checked: null },
],
cursor: 0,
multi: false,
typeAt: 1,
};
it("shows the question as buttons in the box's place, and a pick presses its key", async () => {
vi.mocked(readRunMenu).mockReturnValue(MENU);
try {
renderChat();
const card = await screen.findByTestId("pane-chat-menu");
expect(card).toHaveTextContent("Which color?");
expect(card).toHaveTextContent("warm");
// The prompt box is hidden (kept mounted) while the CLI asks.
expect(screen.getByPlaceholderText("Write a message…").closest(".hidden")).not.toBeNull();
fireEvent.click(screen.getByText("Red"));
expect(chooseRunOption).toHaveBeenCalledWith("agenthub-lane-1", MENU, 0);
} finally {
vi.mocked(readRunMenu).mockReturnValue(null);
}
});
it("types the answer in the card's own field, never pressing that row's key", async () => {
vi.mocked(readRunMenu).mockReturnValue(MENU);
vi.mocked(chooseRunOption).mockClear();
vi.mocked(submitToRun).mockClear();
try {
renderChat();
fireEvent.click(await screen.findByText("Type something."));
expect(chooseRunOption).not.toHaveBeenCalled();
const field = screen.getByTestId("pane-chat-menu-input");
expect(field).toHaveFocus();
fireEvent.change(field, { target: { value: "purple" } });
fireEvent.keyDown(field, { key: "Enter" });
expect(answerRunMenu).toHaveBeenCalledWith("agenthub-lane-1", MENU, "purple");
expect(submitToRun).not.toHaveBeenCalled();
} finally {
vi.mocked(readRunMenu).mockReturnValue(null);
}
});
});
@@ -75,6 +75,8 @@ vi.mock("@xterm/xterm", () => ({
paste: pasteMock,
input: inputMock,
textarea: (textarea = document.createElement("textarea")),
// xterm's own element, holding its textarea (lib/imeInput listens on it).
element: document.createElement("div").appendChild(textarea).parentElement,
resize: (cols: number, rows: number) => Object.assign(termState, { cols, rows }),
})),
}));
@@ -510,6 +512,23 @@ describe("TerminalView", () => {
);
});
it("pastes the text of a dragged Files-panel row, uploading nothing", () => {
dropFileMock.mockReset();
pasteMock.mockClear();
render(<TerminalView runId="r1" wsBaseUrl="ws://x" />);
const data: Record<string, string> = {
"application/x-agenthub-attach": '{"path":"@src/a.ts","name":"a.ts"}',
"text/plain": "src/a.ts",
};
const dataTransfer = { types: Object.keys(data), files: [], getData: (k: string) => data[k] ?? "" };
fireEvent.dragEnter(screen.getByTestId("terminal-view"), { dataTransfer });
expect(screen.getByTestId("terminal-drop")).toHaveTextContent("Drop to paste into the terminal");
fireEvent.drop(screen.getByTestId("terminal-view"), { dataTransfer });
expect(pasteMock).toHaveBeenCalledWith("src/a.ts ");
expect(screen.queryByTestId("terminal-drop")).toBeNull();
expect(dropFileMock).not.toHaveBeenCalled();
});
it("uploads a pasted image and pastes its path, like a drop", async () => {
dropFileMock.mockReset().mockResolvedValue({ path: "/tmp/agenthub-drops-1/ab-image.png" });
pasteMock.mockClear();
@@ -525,18 +544,30 @@ describe("TerminalView", () => {
});
// Ctrl+V is how claude pastes an image; xterm would send ^V, and claude then
// reads the SERVER's clipboard, not the browser's.
it("lets Ctrl+V reach the browser's paste, and still sends ^V when it holds no file", () => {
// reads the SERVER's clipboard, not the browser's. Text on the clipboard is
// pasted like any browser paste: sending ^V for it pasted nothing.
it("lets Ctrl+V reach the browser's paste: text is pasted, ^V only for an empty clipboard", () => {
vi.useFakeTimers();
inputMock.mockClear();
pasteMock.mockClear();
render(<TerminalView runId="r1" wsBaseUrl="ws://x" />);
const handler = keyHandlerMock.mock.calls[0]![0]! as (e: KeyboardEvent) => boolean;
expect(handler(new KeyboardEvent("keydown", { key: "v", ctrlKey: true }))).toBe(false);
// Not cancelled: xterm's own paste listener takes the text.
expect(
fireEvent.paste(screen.getByTestId("terminal-view"), {
clipboardData: { files: [], getData: () => "some text" },
})
).toBe(true);
vi.advanceTimersByTime(1);
expect(inputMock).not.toHaveBeenCalled();
handler(new KeyboardEvent("keydown", { key: "v", ctrlKey: true }));
fireEvent.paste(screen.getByTestId("terminal-view"), {
clipboardData: { files: [], getData: () => "some text" },
clipboardData: { files: [], getData: () => "" },
});
vi.advanceTimersByTime(1);
expect(inputMock).toHaveBeenCalledTimes(1);
expect(inputMock).toHaveBeenCalledWith("\x16", true);
expect(pasteMock).not.toHaveBeenCalled();
vi.useRealTimers();
});
it("sends ^V on Ctrl+V when the browser fires no paste at all", () => {
+18
View File
@@ -42,6 +42,24 @@
"browse.empty": "This folder is empty.",
"browse.fileTitle": "Browse for a file",
"browse.select": "Select this folder",
"browse.back": "Back (Alt+←)",
"browse.create": "Create",
"browse.editPath": "Type a path (Ctrl+L)",
"browse.filter": "Filter…",
"browse.forward": "Forward (Alt+→)",
"browse.hint": "Double-click or Enter opens · Backspace goes up · type to jump",
"browse.home": "Home",
"browse.modified": "Modified",
"browse.name": "Name",
"browse.newFolder": "New folder",
"browse.newFolderName": "Folder name",
"browse.noMatch": "Nothing matches the filter.",
"browse.places": "Places",
"browse.recent": "Recent",
"browse.selectFile": "Select file",
"browse.showHidden": "Show hidden",
"browse.up": "Up one level (Backspace)",
"browse.workspaces": "Workspaces",
"browse.title": "Browse for a folder",
"changes.back": "All files",
"changes.bin": "bin",
+5
View File
@@ -65,6 +65,7 @@
},
"drop": {
"hint": "Drop files or images to attach",
"paste": "Drop to paste into the terminal",
"uploading": "Uploading…",
"failed": "Could not attach the file",
"remove": "Remove attachment",
@@ -127,6 +128,10 @@
"tab": {
"waiting": "Waiting",
"done": "Done"
},
"menu": {
"placeholder": "Type your answer…",
"cancel": "Cancel (Esc)"
}
},
"interrupted": {
+1
View File
@@ -209,6 +209,7 @@
"moreSteps_one": "+{{count}} more",
"moreSteps_other": "+{{count}} more",
"quiet": "no new activity for {{time}}",
"askDeclined": "Declined — no answer given",
"turnDone": "Done in {{time}}"
},
"overview": {
+2 -2
View File
@@ -25,7 +25,7 @@
"username": "Username",
"usernameHint": "Letters, digits, '.', '_' or '-'",
"password": "Password",
"passwordHint": "At least 8 characters",
"passwordHint": "No minimum length",
"newPassword": "New password",
"changeRole": "Change role",
"disable": "Disable",
@@ -64,7 +64,7 @@
"ESELF": "You cannot change your own role or disable yourself.",
"EEXISTS": "That username is taken.",
"EBADUSER": "Username: letters, digits, '.', '_' or '-' (up to 64).",
"EBADPASSWORD": "Password: at least 8 characters."
"EBADPASSWORD": "Password cannot be empty."
},
"readOnly": "Analysts can view accounts but not change them.",
"auditTitle": "Audit log",
+18
View File
@@ -42,6 +42,24 @@
"browse.empty": "Thư mục này trống.",
"browse.fileTitle": "Duyệt chọn tệp",
"browse.select": "Chọn thư mục này",
"browse.back": "Quay lại (Alt+←)",
"browse.create": "Tạo",
"browse.editPath": "Gõ đường dẫn (Ctrl+L)",
"browse.filter": "Lọc…",
"browse.forward": "Tiến (Alt+→)",
"browse.hint": "Nháy đúp hoặc Enter để mở · Backspace để lên · gõ chữ để nhảy tới",
"browse.home": "Thư mục chính",
"browse.modified": "Ngày sửa",
"browse.name": "Tên",
"browse.newFolder": "Thư mục mới",
"browse.newFolderName": "Tên thư mục",
"browse.noMatch": "Không có mục nào khớp bộ lọc.",
"browse.places": "Vị trí",
"browse.recent": "Gần đây",
"browse.selectFile": "Chọn tệp",
"browse.showHidden": "Hiện mục ẩn",
"browse.up": "Lên một cấp (Backspace)",
"browse.workspaces": "Workspace",
"browse.title": "Duyệt chọn thư mục",
"changes.back": "Tất cả file",
"changes.bin": "bin",
+5
View File
@@ -65,6 +65,7 @@
},
"drop": {
"hint": "Thả file hoặc ảnh để đính kèm",
"paste": "Thả để dán vào terminal",
"uploading": "Đang tải lên…",
"failed": "Không đính kèm được file",
"remove": "Bỏ đính kèm",
@@ -127,6 +128,10 @@
"tab": {
"waiting": "Đang chờ",
"done": "Xong"
},
"menu": {
"placeholder": "Nhập câu trả lời của bạn…",
"cancel": "Huỷ (Esc)"
}
},
"interrupted": {
+1
View File
@@ -209,6 +209,7 @@
"moreSteps_one": "+{{count}} việc nữa",
"moreSteps_other": "+{{count}} việc nữa",
"quiet": "không có hoạt động mới trong {{time}}",
"askDeclined": "Đã từ chối — không trả lời",
"turnDone": "Xong trong {{time}}"
},
"overview": {
+2 -2
View File
@@ -25,7 +25,7 @@
"username": "Tên đăng nhập",
"usernameHint": "Chữ, số, '.', '_' hoặc '-'",
"password": "Mật khẩu",
"passwordHint": "Ít nhất 8 ký tự",
"passwordHint": "Không giới hạn độ dài tối thiểu",
"newPassword": "Mật khẩu mới",
"changeRole": "Đổi vai trò",
"disable": "Khoá",
@@ -64,7 +64,7 @@
"ESELF": "Bạn không thể tự đổi vai trò hay tự khoá chính mình.",
"EEXISTS": "Tên đăng nhập này đã có người dùng.",
"EBADUSER": "Tên đăng nhập: chữ, số, '.', '_' hoặc '-' (tối đa 64 ký tự).",
"EBADPASSWORD": "Mật khẩu: ít nhất 8 ký tự."
"EBADPASSWORD": "Mật khẩu không được để trống."
},
"readOnly": "Analyst chỉ xem được tài khoản, không thay đổi được.",
"auditTitle": "Nhật ký audit",
+159
View File
@@ -0,0 +1,159 @@
/**
* @file imeInput.test.ts
* @description Pins `attachImeInput` against a real event trace of macOS's
* Vietnamese Simple Telex input method in Chrome (typing "Abc xin chào"): the
* IME writes into xterm's textarea with `insertText` / `insertReplacementText`
* and no composition events, its keydown (keyCode 229) arriving AFTER the
* change — which stock xterm 5.5 turned into " x c". The pane must receive
* exactly the text typed, a word the IME rewrites as backspaces plus the new
* tail, and keys xterm already sent from `keypress` (Space) never twice.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
import { afterEach, describe, expect, it } from "vitest";
import { attachImeInput, textEdit } from "../imeInput";
type Step = [type: string, a: string, b: string, keyCode?: number, shift?: boolean];
// Recorded in the user's browser, one line per event on the textarea.
const TELEX: Step[] = [
["keydown", "Shift", "ShiftLeft", 16, true],
["input", "A", "insertText"],
["keydown", "A", "KeyA", 229, true],
["keyup", "A", "KeyA", 65, true],
["keyup", "Shift", "ShiftLeft", 16],
["input", "Ab", "insertReplacementText"],
["keydown", "b", "KeyB", 229],
["keyup", "b", "KeyB", 66],
["input", "Abc", "insertReplacementText"],
["keydown", "c", "KeyC", 229],
["keyup", "c", "KeyC", 67],
["keydown", " ", "Space", 32],
["keypress", " ", "Space", 32],
["input", " ", "insertText"],
["keyup", " ", "Space", 32],
["input", "x", "insertText"],
["keydown", "x", "KeyX", 229],
["keyup", "x", "KeyX", 88],
["input", "xi", "insertReplacementText"],
["keydown", "i", "KeyI", 229],
["input", "xin", "insertReplacementText"],
["keydown", "n", "KeyN", 229],
["keydown", " ", "Space", 32],
["keypress", " ", "Space", 32],
["input", " ", "insertText"],
["input", "c", "insertText"],
["keydown", "c", "KeyC", 229],
["input", "ch", "insertReplacementText"],
["keydown", "h", "KeyH", 229],
["input", "cha", "insertReplacementText"],
["keydown", "a", "KeyA", 229],
["input", "chao", "insertReplacementText"],
["keydown", "o", "KeyO", 229],
["input", "chào", "insertReplacementText"],
["keydown", "f", "KeyF", 229],
];
let cleanup: (() => void) | null = null;
afterEach(() => {
cleanup?.();
cleanup = null;
document.body.innerHTML = "";
});
/** A terminal stand-in: xterm's element and textarea, `input` collecting what
* reaches the pane, and `xterm` what xterm's own textarea listeners saw. */
function setup() {
const element = document.createElement("div");
const textarea = document.createElement("textarea");
element.appendChild(textarea);
document.body.appendChild(element);
let sent = "";
const xterm: string[] = [];
for (const t of ["keydown", "keypress", "input"])
textarea.addEventListener(t, (e) => xterm.push(`${t}:${(e as KeyboardEvent).key ?? ""}`), true);
// xterm sends a printable key from its keypress handler (Space, here).
textarea.addEventListener("keypress", (e) => (sent += e.key), true);
const term = { element, textarea, input: (d: string) => (sent += d) };
cleanup = attachImeInput(term);
return { textarea, xterm, sent: () => sent };
}
function play(ta: HTMLTextAreaElement, steps: Step[]) {
for (const [type, a, b, kc, shift] of steps) {
if (type === "input") {
const before = ta.value;
const next = b === "insertText" ? before + a : before.replace(/\S*$/, "") + a;
ta.dispatchEvent(new InputEvent("beforeinput", { data: a, inputType: b, bubbles: true }));
ta.value = next;
ta.dispatchEvent(new InputEvent("input", { data: a, inputType: b, bubbles: true }));
} else {
const ev = new KeyboardEvent(type, { key: a, code: b, shiftKey: !!shift, bubbles: true });
Object.defineProperty(ev, "keyCode", { get: () => kc });
ta.dispatchEvent(ev);
}
}
}
/** What a line editor holds after `data` (DEL erases one character). */
const typed = (data: string) => {
const out: string[] = [];
for (const ch of data) {
if (ch === "\x7f") out.pop();
else out.push(ch);
}
return out.join("");
};
describe("textEdit", () => {
it("is the backspaces and new tail that turn one value into the other", () => {
expect(textEdit("Abc xin cha", "Abc xin chao")).toBe("o");
expect(textEdit("Abc xin chao", "Abc xin chào")).toBe("\x7f\x7fào");
expect(textEdit("x", "x")).toBe("");
expect(textEdit("ab", "")).toBe("\x7f\x7f");
});
it("counts characters, not UTF-16 units", () => {
expect(textEdit("a😀", "a")).toBe("\x7f");
});
});
describe("attachImeInput", () => {
it("sends what Telex typed — capitals and rewritten words included", () => {
const { textarea, sent } = setup();
play(textarea, TELEX);
expect(typed(sent())).toBe("Abc xin chào");
});
it("leaves xterm the keys it sends itself, and hides the IME's from it", () => {
const { textarea, xterm, sent } = setup();
play(textarea, TELEX);
// Space is xterm's (its keypress sends it, its input event follows); the
// 229 keydowns and the IME's own input events never reach it.
expect(xterm.filter((x) => x.startsWith("keypress"))).toHaveLength(2);
expect(xterm.filter((x) => x.startsWith("input"))).toHaveLength(2);
expect(xterm.some((x) => x === "keydown:A" || x === "keydown:b")).toBe(false);
expect(sent().split(" ")).toHaveLength(3);
});
it("does not touch a composition (CJK input) — xterm handles that", () => {
const { textarea, xterm, sent } = setup();
const ev = new InputEvent("input", {
data: "に",
inputType: "insertCompositionText",
bubbles: true,
});
textarea.value = "に";
textarea.dispatchEvent(ev);
expect(sent()).toBe("");
expect(xterm).toContain("input:");
});
it("stops after dispose", () => {
const { textarea, sent } = setup();
cleanup?.();
cleanup = null;
play(textarea, TELEX.slice(0, 2));
expect(sent()).toBe("");
});
});
+190 -2
View File
@@ -6,16 +6,22 @@
* is not on screen (a hidden console behind a full-width Changes panel); and
* `interruptRun`, the Chat view's Stop, presses Esc only in a visible pane;
* and the input box read off a real `claude`/`codex` screen (`parsePromptInput`)
* and moved out of it (`takeRunInput`) when the pane switches to Chat.
* and moved out of it (`takeRunInput`) when the pane switches to Chat; and
* the menu a CLI asks with, read off real Claude Code 2.1.296 / Codex 0.161
* screens (`parsePaneMenu`) and answered with the keys verified there.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
import { describe, expect, it } from "vitest";
import { describe, expect, it, vi } from "vitest";
import {
interruptRun,
notePaneFocus,
parsePromptInput,
answerRunMenu,
chooseRunOption,
parsePaneMenu,
pasteToLane,
readRunMenu,
registerPane,
takeRunInput,
} from "../panePaste";
@@ -122,4 +128,186 @@ describe("panePaste", () => {
off();
expect(takeRunInput("agenthub-lane-7")).toBe("");
});
it("reads an AskUserQuestion menu: question, options, hints, cursor", () => {
const m = parsePaneMenu(ASK);
expect(m).toEqual({
question: "Which color do you like: red, green, or blue?",
options: [
{ n: 1, label: "Red", hint: "Crisp red", checked: null },
{ n: 2, label: "Green", hint: "", checked: null },
{ n: 3, label: "Type something.", hint: "", checked: null },
{ n: 4, label: "Chat about this", hint: "", checked: null },
],
cursor: 0,
multi: false,
typeAt: 2,
});
});
it("reads a multiSelect question with its unnumbered Submit row", () => {
const m = parsePaneMenu(MULTI)!;
expect(m.multi).toBe(true);
expect(m.options.map((o) => [o.n, o.label, o.checked])).toEqual([
[1, "Nuts", true],
[2, "Honey", false],
[3, "Type something", false],
[null, "Submit", null],
[4, "Chat about this", null],
]);
expect(m.cursor).toBe(1);
expect(m.typeAt).toBe(2);
});
// The "Type something" row once something is typed in it: its label is the
// text. It is still the row right above "Chat about this".
it("finds Type something by its place once text is typed in it, and replaces that text", () => {
vi.useFakeTimers();
const keys: string[] = [];
const typed = ASK.map((r) =>
r === "❯ 1. Red" ? " 1. Red" : r === " 3. Type something." ? "❯ 3. 44444" : r
);
const m = parsePaneMenu(typed)!;
expect(m.typeAt).toBe(2);
expect(m.cursor).toBe(2);
const off = registerPane(
"agenthub-lane-9",
() => {},
() => true,
(d) => keys.push(d)
);
expect(answerRunMenu("agenthub-lane-9", m, "teal")).toBe(true);
vi.runAllTimers();
expect(keys).toEqual(["\x15", "\x1b[200~teal\x1b[201~", "\r"]);
off();
vi.useRealTimers();
});
it("reads Claude's and Codex's permission prompts", () => {
const c = parsePaneMenu(PERMISSION)!;
expect(c.question).toBe("Do you want to proceed?");
expect(c.options.map((o) => o.label)).toEqual(["Yes", "Yes, and always allow", "No"]);
const x = parsePaneMenu(CODEX_APPROVAL)!;
expect(x.question).toBe("Would you like to run the following command?\n$ touch probe.txt");
expect(x.options).toHaveLength(3);
expect(x.cursor).toBe(0);
});
it("reads a menu with no footer: the login method at first start", () => {
const m = parsePaneMenu([
" Select login method:",
"",
" ❯ 1. Claude account with subscription · Pro, Max, Team, or Enterprise",
"",
" 2. Anthropic Console account · API usage billing",
"",
])!;
expect(m.question).toBe("Select login method:");
expect(m.options.map((o) => o.n)).toEqual([1, 2]);
});
it("finds no menu in a reply's numbered list or a typed `1.`", () => {
// No cursor on the list.
expect(parsePaneMenu(["● Steps:", " 1. one", " 2. two", "", RULE, "❯ ", RULE])).toBeNull();
// A numbered list typed into the input box (under its rule), mid-turn.
expect(parsePaneMenu([RULE, "❯ 1. fix it", RULE, " esc to interrupt"])).toBeNull();
expect(parsePaneMenu([RULE, "❯\u00a01. a", " 2. b", RULE, " esc to interrupt"])).toBeNull();
expect(parsePaneMenu(CLAUDE)).toBeNull();
});
it("answers by digit, walks to Submit, and types into Type something", () => {
vi.useFakeTimers();
const keys: string[] = [];
let rows = ASK;
const off = registerPane(
"agenthub-lane-8",
() => {},
() => true,
(d) => keys.push(d),
() => ({ rows, cols: 80 })
);
const ask = readRunMenu("agenthub-lane-8")!;
expect(chooseRunOption("agenthub-lane-8", ask, 1)).toBe(true);
expect(keys).toEqual(["2"]);
keys.length = 0;
// Single select: walk to the row, paste, Enter.
expect(answerRunMenu("agenthub-lane-8", ask, "purple")).toBe(true);
vi.runAllTimers();
expect(keys).toEqual(["\x1b[B", "\x1b[B", "\x1b[200~purple\x1b[201~", "\r"]);
keys.length = 0;
rows = MULTI;
const multi = readRunMenu("agenthub-lane-8")!;
// From Honey (cursor 1) to Submit (3): two Downs, then Enter.
expect(chooseRunOption("agenthub-lane-8", multi, 3)).toBe(true);
vi.runAllTimers();
expect(keys).toEqual(["\x1b[B", "\x1b[B", "\r"]);
keys.length = 0;
// multiSelect: the typed text ticks the row; no Enter, Submit still to pick.
expect(answerRunMenu("agenthub-lane-8", multi, "salt")).toBe(true);
vi.runAllTimers();
expect(keys).toEqual(["\x1b[B", "\x1b[200~salt\x1b[201~"]);
off();
vi.useRealTimers();
expect(readRunMenu("agenthub-lane-8")).toBeNull();
});
});
// Real screens (descriptions trimmed), bottom of a 120-column pane.
const ASK = [
"❯ Use the AskUserQuestion tool to ask me which color I like.",
RULE,
" ☐ Color",
"",
"Which color do you like: red, green, or blue?",
"",
"❯ 1. Red",
" Crisp red",
" 2. Green",
" Green",
" 3. Type something.",
RULE,
" 4. Chat about this",
"",
"Enter to select · ↑/↓ to navigate · Esc to cancel",
"",
];
const MULTI = [
RULE,
"← ☒ Fruit ☐ Toppings ✔ Submit →",
"",
"Which toppings do you want?",
"",
" 1. [✔] Nuts",
" Crunchy, adds texture.",
"❯ 2. [ ] Honey",
" 3. [ ] Type something",
" Submit",
RULE,
" 4. Chat about this",
"",
"Enter to select · Tab/Arrow keys to navigate · Esc to cancel",
];
const PERMISSION = [
" Bash command",
" touch probe-file.txt",
"╌".repeat(60),
" Do you want to proceed?",
" ❯ 1. Yes",
" 2. Yes, and always allow",
" 3. No",
"",
" Esc to cancel · Tab to amend",
];
const CODEX_APPROVAL = [
"• Running touch probe.txt",
"",
" Would you like to run the following command?",
" $ touch probe.txt",
"",
"› 1. Yes, proceed (y)",
" 2. Yes, and don't ask again for commands that start with `touch probe.txt` (p)",
" 3. No, and tell Codex what to do differently",
"",
// "Press enter to confirm or esc to cancel", its dim cells left out.
" enteresc",
];
+23 -3
View File
@@ -2971,19 +2971,39 @@ export const api = {
* filesystem paths from a native picker, so this drives a server-backed one.
* @param path Absolute path to list; defaults server-side to the home dir.
* @param files List files too (`file: true`) — a file field's picker.
* @returns `{ path, parent, entries }` — `parent` is null at the root.
* @param hidden List dot entries too (never at the top of a member's home).
* @returns `{ path, parent, entries, home }` — `parent` is null at the
* root, `home` is the folder the browser's Home place opens.
*/
browse: (path?: string, files?: boolean) => {
browse: (path?: string, files?: boolean, hidden?: boolean) => {
const q = new URLSearchParams();
if (path) q.set("path", path);
if (files) q.set("files", "1");
if (hidden) q.set("hidden", "1");
const qs = q.toString();
return request<{
path: string;
parent: string | null;
entries: { name: string; path: string; isGitRepo: boolean; file?: boolean }[];
home?: string;
entries: {
name: string;
path: string;
isGitRepo: boolean;
file?: boolean;
mtime?: number | null;
}[];
}>(`/lanes/browse${qs ? `?${qs}` : ""}`);
},
/**
* POST /api/lanes/browse/mkdir — the folder browser's New folder: one
* folder `name` inside `parent`. Throws `.code` `EBADNAME`, `EEXISTS`,
* `EFOLDER` (outside the caller's own folder).
*/
mkdir: (parent: string, name: string) =>
request<{ path: string }>("/lanes/browse/mkdir", {
method: "POST",
body: JSON.stringify({ parent, name }),
}),
/**
* POST /api/lanes/pick-path — open the OS's own folder/file picker on the
* server's desktop and wait for the user. Throws `.code` `EREMOTE` (not a
+90
View File
@@ -0,0 +1,90 @@
/**
* @file imeInput.ts
* @description Typing through an input method that edits xterm's textarea
* without composition events — macOS's Vietnamese Telex, in Chrome and
* Safari, writes each letter with `insertText` and rewrites the whole word
* with `insertReplacementText` ("cha" → "chao" → "chào"), its keydown
* (keyCode 229) arriving only AFTER the change. xterm 5.5 drops every
* replacement (xterm.js #5887) and every `input` that lands while a key is
* held (Shift, for a capital), so "Abc xin chào" reached the pane as " x c".
* `attachImeInput` turns each such change into what a line editor needs — a
* backspace per replaced character, then the new tail — and hides those
* events from xterm so nothing is sent twice. A key xterm sends itself (its
* `keypress`, e.g. Space) and a real composition (CJK) stay xterm's.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
/** DEL, the byte a terminal's Backspace sends (xterm's too). */
const DEL = "\x7f";
/** The edits this module answers; anything else stays xterm's. */
const EDITS = new Set(["insertText", "insertReplacementText", "deleteContentBackward"]);
/** The backspaces and new tail that turn `before` into `after` — per
* character (code point), as the pane's line editor counts them. */
export function textEdit(before: string, after: string): string {
const a = Array.from(before);
const b = Array.from(after);
let same = 0;
while (same < a.length && same < b.length && a[same] === b[same]) same++;
return DEL.repeat(a.length - same) + b.slice(same).join("");
}
/** The parts of an xterm `Terminal` this needs. */
interface ImeTerminal {
element?: HTMLElement;
textarea?: HTMLTextAreaElement;
input: (data: string, wasUserInput?: boolean) => void;
}
/** Sends `term`'s non-composition textarea edits to the pane itself; returns
* its dispose. Listens in the capture phase on xterm's element, so it runs
* before xterm's own listeners on the textarea and can keep them from it. */
export function attachImeInput(term: ImeTerminal): () => void {
const root = term.element;
const ta = term.textarea;
if (!root || !ta) return () => {};
// The value before the edit in flight (from `beforeinput`).
let before: string | null = null;
// xterm sent this key from its keypress: the input event that follows is its.
let pressed = false;
const onKeyDown = (e: KeyboardEvent) => {
if (e.target !== ta) return;
pressed = false;
// The IME's own key, its edit already in (or about to come as) an input
// event: xterm's fallback would diff the textarea and send it again.
if (e.keyCode === 229 && !e.isComposing) e.stopPropagation();
};
const onKeyPress = (e: KeyboardEvent) => {
if (e.target === ta) pressed = true;
};
const onBeforeInput = (e: Event) => {
if (e.target === ta) before = ta.value;
};
const onInput = (e: Event) => {
const ev = e as InputEvent;
if (ev.target !== ta) return;
const was = before;
before = null;
if (pressed) {
pressed = false;
return;
}
if (ev.isComposing || !EDITS.has(ev.inputType) || was === null) return;
e.stopPropagation();
const data = textEdit(was, ta.value);
if (data) term.input(data, true);
};
root.addEventListener("keydown", onKeyDown, true);
root.addEventListener("keypress", onKeyPress, true);
root.addEventListener("beforeinput", onBeforeInput, true);
root.addEventListener("input", onInput, true);
return () => {
root.removeEventListener("keydown", onKeyDown, true);
root.removeEventListener("keypress", onKeyPress, true);
root.removeEventListener("beforeinput", onBeforeInput, true);
root.removeEventListener("input", onInput, true);
};
}
+141
View File
@@ -14,6 +14,9 @@
* terminal moves the unsent prompt across (`takeRunInput` reads the TUI's
* input box off the screen and empties it; the chat's draft is pasted back
* without Enter), so the half-typed text is never left behind on the other side.
* The Chat view also answers a menu the CLI asks with (`parsePaneMenu` reads
* it off the screen; `chooseRunOption`/`answerRunMenu` press its digit, the
* arrows and Enter, or type into its "Type something" row).
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
@@ -151,3 +154,141 @@ export function takeRunInput(runId: string): string {
p!.key!("\x1b[3~".repeat(n) + "\x7f".repeat(n));
return text;
}
/** One choice of a menu the CLI shows: `n` its number (null for Claude's
* unnumbered Submit row), `checked` a multiSelect box's state. */
export type PaneMenuOption = {
n: number | null;
label: string;
hint: string;
checked: boolean | null;
};
/** A menu the CLI asks with (AskUserQuestion, a permission or trust prompt,
* Codex's approval): `cursor` the row its `❯`/`›` is on, `typeAt` the
* "Type something" row (-1: none). */
export type PaneMenu = {
question: string;
options: PaneMenuOption[];
cursor: number;
multi: boolean;
typeAt: number;
};
const OPTION = /^ {0,4}([❯›][ \u00a0]?)? *(\d{1,2})\. +(.*)$/;
const SUBMIT = /^ *([❯›])?[ \u00a0]*Submit$/;
const RULE_ROW = /^ *[─╌]{3,} *$/;
const CHECK = /^\[([ ✔])\] *(.*)$/;
const PLACEHOLDER = /^Type something\.?$/;
/** The numbered menu at the bottom of `rows`, or null. A menu has two
* numbered rows or more from 1, the cursor on one of them, and no rule right
* above its first row — a reply's numbered list has no cursor, and a list
* typed into Claude's input box sits under the box's rule. */
export function parsePaneMenu(rows: string[]): PaneMenu | null {
const r = rows.map((l) => l.trimEnd());
let end = r.length - 1;
while (end >= 0 && !r[end]) end--;
const options: PaneMenuOption[] = [];
let cursor = -1;
let hint: string[] = [];
let top = -1;
// Bottom up: a row under an option that is no option is its hint.
for (let i = end; i >= 0 && end - i < 40; i--) {
const row = r[i] ?? "";
const m = OPTION.exec(row);
const s = m ? null : SUBMIT.exec(row);
if (m || s) {
const text = m ? (m[3] ?? "") : "Submit";
const c = m ? CHECK.exec(text) : null;
const label = c ? (c[2] ?? "") : text;
const h = hint.join(" ");
options.unshift({
n: m ? Number(m[2]) : null,
label,
hint: h === label ? "" : h,
checked: c ? c[1] === "✔" : null,
});
if (m?.[1] || s?.[1]) cursor = options.length;
hint = [];
if (m?.[2] === "1") {
top = i;
break;
}
} else if (row && !RULE_ROW.test(row) && options.length) {
hint.unshift(row.trim());
} else if (row && !RULE_ROW.test(row)) {
hint = []; // the footer and anything under the last option
}
}
const numbered = options.filter((o) => o.n !== null);
if (top < 0 || cursor < 0 || numbered.length < 2 || RULE_ROW.test(r[top - 1] ?? "")) return null;
if (numbered.some((o, i) => o.n !== i + 1)) return null;
// The question: the block of text right above the first option.
let q = top - 1;
while (q >= 0 && !r[q]) q--;
const lines: string[] = [];
for (; q >= 0 && r[q] && !RULE_ROW.test(r[q]!) && lines.length < 4; q--)
lines.unshift(r[q]!.trim());
return {
question: lines.join("\n"),
options,
cursor: options.length - cursor,
multi: options.some((o) => o.checked !== null),
typeAt: typeRow(options),
};
}
/** The "Type something" row. Text typed into it replaces its label, and it is
* still the last numbered row above "Chat about this". */
function typeRow(options: PaneMenuOption[]): number {
const at = options.findIndex((o) => PLACEHOLDER.test(o.label));
if (at >= 0) return at;
for (let i = options.findIndex((o) => o.label === "Chat about this") - 1; i >= 0; i--)
if (options[i]!.n !== null) return i;
return -1;
}
/** The menu `runId`'s visible pane shows now, or null. */
export function readRunMenu(runId: string): PaneMenu | null {
const p = panes.get(runId);
const screen = p?.visible() && p.key ? p.screen?.() : null;
return screen ? parsePaneMenu(screen.rows) : null;
}
// One key per write, a beat apart: a TUI reading two arrows in one chunk may
// take them as one key.
function pressKeys(key: (data: string) => void, keys: string[]) {
keys.forEach((k, i) => setTimeout(() => key(k), i * 40));
}
/** The arrow presses from the menu's cursor to row `to`. */
const walk = (menu: PaneMenu, to: number) =>
Array<string>(Math.abs(to - menu.cursor)).fill(to > menu.cursor ? "\x1b[B" : "\x1b[A");
/** Picks `menu`'s option `index` in `runId`'s pane: its digit — which picks
* it, or ticks its box in a multiSelect — else (Submit) the arrows to it
* and Enter. False when the pane is not visible or not attached. */
export function chooseRunOption(runId: string, menu: PaneMenu, index: number): boolean {
const p = panes.get(runId);
const opt = menu.options[index];
if (!p?.visible() || !p.key || !opt) return false;
if (opt.n !== null && opt.n < 10) p.key(String(opt.n));
else pressKeys(p.key, [...walk(menu, index), "\r"]);
return true;
}
/** Answers `menu` with typed text: the arrows to its "Type something" row,
* Ctrl+U over what is typed there already (one key clears it, however long
* it is), the text as a bracketed
* paste, and Enter — none in a multiSelect, where the text only ticks its
* row and Submit is still to pick. */
export function answerRunMenu(runId: string, menu: PaneMenu, text: string): boolean {
const p = panes.get(runId);
const row = menu.options[menu.typeAt];
if (!p?.visible() || !p.key || !row) return false;
const keys = walk(menu, menu.typeAt);
if (!PLACEHOLDER.test(row.label)) keys.push("\x15");
keys.push(`\x1b[200~${text}\x1b[201~`);
pressKeys(p.key, menu.multi ? keys : [...keys, "\r"]);
return true;
}
+3
View File
@@ -3213,6 +3213,9 @@ export interface TranscriptContent {
/** Present on a Write/Edit/MultiEdit "tool_result": the lines it added and
* removed (from Claude Code's `structuredPatch`). */
diff?: { added: number; removed: number };
/** Present on an AskUserQuestion "tool_result": question text → the option
* the user picked, or what they typed. */
answers?: Record<string, string>;
}
/** Who actually sent a transcript message. A JSONL `type:"user"` line can be the
@@ -7178,7 +7178,7 @@ exports[`screen snapshots > Settings — about 1`] = `
<span
class="text-status-warning/90"
>
UI build v2.7.4 (rebuild client to match)
UI build v2.7.5 (rebuild client to match)
</span>
</p>
</div>
+11 -3
View File
@@ -235,9 +235,17 @@ back on ANY of those to the in-app browser `GET /api/lanes/browse?path=<abs>`.
A file field asks it with `files=1`: entries then include the folder's files
(`file: true`, listed after the folders), and `path` opens the way the native
picker's `start` does (`~` expanded, a file's folder, home when missing) —
a click on a file picks it. In server mode with
`AGENTHUB_USERS_ROOT` set, a developer's browser opens on their own folder
(`parent: null` there) and any path whose real path leaves it is `403 EFOLDER`.
a double-click on a file picks it. `hidden=1` lists dot entries too (never
those at the top of a non-admin's own folder), every entry carries its `mtime`
(ms) and the answer its `home` (the browser's Home place). In server mode with
`AGENTHUB_USERS_ROOT` set (under S3, else server.conf's `USERS_ROOT`), a
developer's browser opens on their own folder (`parent: null` there) and any
path whose real path leaves it is `403 EFOLDER`. The browser's **New folder**
is `POST /api/lanes/browse/mkdir` (`{parent, name}` → `201 {path}`): one plain
folder name inside an existing folder, `400 EBADNAME`/`ENOTFOUND`,
`409 EEXISTS`; a non-admin only inside their own folder, and in server mode
not at all without one (`403 EFOLDER`); a member's folder is made as the
member (S3).
#### Update a workspace
+3 -3
View File
File diff suppressed because one or more lines are too long
+6 -3
View File
@@ -196,7 +196,9 @@ that already belongs to another user's workspace gets `409 EOWNED`. Admins are
not limited. Without [one Linux user per account](#one-linux-user-per-account)
you create each user's folder yourself, and this keeps workspaces apart, not
agents. `install-system` sets this value to `/srv/agenthub/users`, and adding a
user makes the folder (it is the Linux account's home).
user makes the folder (it is the Linux account's home). With S3 installed, a
settings file that lacks the variable falls back to `USERS_ROOT` in
`/etc/agenthub/server.conf`, so a developer is never shown the host's home.
## What the gate does
@@ -222,7 +224,7 @@ user makes the folder (it is the Linux account's home).
- A login lasts 30 days in the httpOnly, `SameSite=Strict` cookie
`agenthub_sid`. Only the token's SHA-256 is stored. Logging out, a password
change and disabling the user each end it.
- Passwords are stored as scrypt hashes and must be at least 8 characters.
- Passwords are stored as scrypt hashes; any non-empty password is accepted (no minimum length).
Every login attempt counts before its password is checked, so attempts sent
in parallel count too. After 10 failed logins from one address, or 30 for one
username, in 15 minutes, further logins answer `429 ETOOMANY` until the
@@ -539,7 +541,8 @@ that are not theirs. Each case below is refused, with a test in
line AgentHub adds for a new worktree or `.mcp.json` is written only when the
repo's real git dir is the same account's; a FIFO there cannot hang the
dashboard.
- **Browsing and branch lists.** A developer's `GET /api/lanes/browse` and
- **Browsing and branch lists.** A developer's `GET /api/lanes/browse`, the
browser's New folder (`POST /api/lanes/browse/mkdir`, made as the member) and
`GET /api/lanes/branches` stay inside their own folder (`403 EFOLDER`), and
so does a workspace's extra folder (`POST /api/lanes/:id/sources/folder`,
refused before the path is looked at, so the answer says nothing about
+1 -1
View File
@@ -3,7 +3,7 @@
openapi: 3.0.3
info:
title: Agent Dashboard for Claude Code API
version: 2.7.4
version: 2.7.5
description: HTTP API for real-time Claude Code session monitoring, agent lifecycle tracking, analytics, pricing, hooks ingestion, and workflow intelligence.
contact:
name: Nguyễn Ngọc Trí Vĩ
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "agenthub",
"version": "2.7.4",
"version": "2.7.5",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "agenthub",
"version": "2.7.4",
"version": "2.7.5",
"hasInstallScript": true,
"license": "UNLICENSED",
"dependencies": {
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "agenthub",
"version": "2.7.4",
"version": "2.7.5",
"bin": {
"agenthub": "bin/agenthub.js"
},
+35
View File
@@ -598,6 +598,41 @@ describe("GET /api/lanes/browse", () => {
const dirsOnly = await request("GET", `/api/lanes/browse?path=${encodeURIComponent(ROOT)}`);
assert.ok(!dirsOnly.body.entries.some((e) => e.name === "b-file.txt"));
});
it("answers the home folder and each entry's mtime; hidden=1 lists dot entries", async () => {
fs.mkdirSync(path.join(ROOT, ".hidden-dir"), { recursive: true });
const plain = await request("GET", `/api/lanes/browse?path=${encodeURIComponent(ROOT)}`);
assert.equal(plain.body.home, os.homedir());
assert.ok(!plain.body.entries.some((e) => e.name === ".hidden-dir"));
const repo = plain.body.entries.find((e) => e.name === "src-repo");
assert.equal(typeof repo.mtime, "number");
const all = await request("GET", `/api/lanes/browse?hidden=1&path=${encodeURIComponent(ROOT)}`);
assert.ok(all.body.entries.some((e) => e.name === ".hidden-dir"));
});
});
describe("POST /api/lanes/browse/mkdir", () => {
it("makes one new folder in an existing one and answers its path", async () => {
const r = await request("POST", "/api/lanes/browse/mkdir", { parent: ROOT, name: "made" });
assert.equal(r.status, 201, JSON.stringify(r.body));
assert.equal(r.body.path, path.join(ROOT, "made"));
assert.ok(fs.statSync(path.join(ROOT, "made")).isDirectory());
const again = await request("POST", "/api/lanes/browse/mkdir", { parent: ROOT, name: "made" });
assert.equal(again.status, 409);
assert.equal(again.body.error.code, "EEXISTS");
});
it("refuses a name that is not one plain folder name, and a missing parent", async () => {
for (const name of ["", ".", "..", "a/b", "a\0b", "x".repeat(256), 5]) {
const r = await request("POST", "/api/lanes/browse/mkdir", { parent: ROOT, name });
assert.equal(r.status, 400, `${JSON.stringify(name)}: ${JSON.stringify(r.body)}`);
assert.equal(r.body.error.code, "EBADNAME");
}
for (const parent of ["relative/dir", path.join(ROOT, "nope")]) {
const r = await request("POST", "/api/lanes/browse/mkdir", { parent, name: "x" });
assert.equal(r.status, 400, JSON.stringify(r.body));
}
});
});
describe("destructive lane lifecycle actions", () => {
+58
View File
@@ -0,0 +1,58 @@
/**
* @file scope-users-root.test.js
* @description A non-admin's own folder comes from `AGENTHUB_USERS_ROOT`, and
* under S3 from server.conf's `USERS_ROOT` when that variable is missing — a
* server with S3 installed but no variable in its settings file let every
* developer browse the host account's whole home.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
const { describe, it, before, after, afterEach } = require("node:test");
const assert = require("node:assert/strict");
const path = require("node:path");
const fs = require("node:fs");
const os = require("node:os");
const TMP = fs.realpathSync(fs.mkdtempSync(path.join(os.tmpdir(), "scope-users-root-")));
const CONF = path.join(TMP, "server.conf");
process.env.AGENTHUB_SERVER_CONF = CONF;
process.env.AGENTHUB_MODE = "server";
delete process.env.AGENTHUB_USERS_ROOT;
const scope = require("../lib/scope");
const linux = require("../lib/linux-accounts");
const dev = { user: { id: 2, username: "vinnt", role: "developer" } };
const admin = { user: { id: 1, username: "boss", role: "admin" } };
describe("scope.ownFolder", () => {
before(() => {
fs.writeFileSync(CONF, "HOST_USER=host\nHOST_UID=1000\nUSERS_ROOT=/srv/agenthub/users\n");
linux.__resetConfCache();
});
afterEach(() => {
delete process.env.AGENTHUB_USERS_ROOT;
});
after(() => fs.rmSync(TMP, { recursive: true, force: true }));
it("falls back to server.conf's USERS_ROOT under S3", () => {
assert.equal(scope.ownFolder(dev), "/srv/agenthub/users/vinnt");
assert.equal(scope.folderAllowed(dev, os.homedir()), false);
assert.equal(scope.folderAllowed(dev, "/srv/agenthub/users/vinnt/proj"), true);
});
it("prefers AGENTHUB_USERS_ROOT when it is set", () => {
process.env.AGENTHUB_USERS_ROOT = "/data/users";
assert.equal(scope.ownFolder(dev), "/data/users/vinnt");
});
it("never limits an admin", () => {
assert.equal(scope.ownFolder(admin), null);
});
it("has no folder without S3 or the variable", () => {
fs.rmSync(CONF);
linux.__resetConfCache();
assert.equal(scope.ownFolder(dev), null);
});
});
@@ -94,12 +94,18 @@ describe("managing accounts from the dashboard", () => {
});
assert.equal(dup.status, 409);
assert.equal(dup.body.error.code, "EEXISTS");
// No minimum length — only an empty password is refused.
const empty = await call("POST", "/api/users", {
cookie: boss,
body: { username: "zed", password: "", currentPassword: BOSS_PASS },
});
assert.equal(empty.status, 400);
assert.equal(empty.body.error.code, "EBADPASSWORD");
const short = await call("POST", "/api/users", {
cookie: boss,
body: { username: "zed", password: "short", currentPassword: BOSS_PASS },
body: { username: "zed", password: "1", currentPassword: BOSS_PASS },
});
assert.equal(short.status, 400);
assert.equal(short.body.error.code, "EBADPASSWORD");
assert.equal(short.status, 201);
});
it("refuses without the admin's password, or with a wrong one", async () => {
@@ -155,6 +155,23 @@ describe("server mode", () => {
);
});
it("a member with no folder of their own may not make one anywhere (browse/mkdir)", async () => {
for (const as of ["alice", "ana"]) {
const r = await call("POST", "/api/lanes/browse/mkdir", {
as,
body: { parent: ROOT, name: `by-${as}` },
});
assert.equal(r.status, 403, JSON.stringify(r.body));
assert.equal(r.body.error.code, "EFOLDER");
}
assert.ok(!fs.existsSync(path.join(ROOT, "by-alice")));
const admin = await call("POST", "/api/lanes/browse/mkdir", {
as: "boss",
body: { parent: ROOT, name: "by-boss" },
});
assert.equal(admin.status, 201, JSON.stringify(admin.body));
});
it("pipeline stats cover only a member's own workspaces", async () => {
const mine = await get("/api/lanes/pipeline-stats", "alice");
assert.deepEqual(
@@ -226,6 +226,37 @@ describe("a developer browses and lists branches only in their own folder", () =
assert.equal(admin.status, 200);
});
it("hidden=1 shows dot entries, never the logins at the top of their home", async () => {
fs.mkdirSync(path.join(MIA, ".claude"), { recursive: true });
fs.mkdirSync(path.join(MIA, "proj", ".cfg"), { recursive: true });
const top = await call("mia", "GET", "/api/lanes/browse?hidden=1");
assert.equal(top.status, 200, JSON.stringify(top.body));
assert.equal(top.body.home, MIA);
assert.ok(!top.body.entries.some((e) => e.name.startsWith(".")));
const inner = await call(
"mia",
"GET",
`/api/lanes/browse?hidden=1&path=${encodeURIComponent(path.join(MIA, "proj"))}`
);
assert.ok(inner.body.entries.some((e) => e.name === ".cfg"));
});
it("mkdir: only in their own folder, made as them", async () => {
const mine = await call("mia", "POST", "/api/lanes/browse/mkdir", {
parent: MIA,
name: "fresh",
});
assert.equal(mine.status, 201, JSON.stringify(mine.body));
assert.ok(fs.statSync(path.join(MIA, "fresh")).isDirectory());
for (const parent of [BOB, path.join(MIA, "tohost")]) {
const r = await call("mia", "POST", "/api/lanes/browse/mkdir", { parent, name: "x" });
assert.equal(r.status, 403, `${parent}: ${JSON.stringify(r.body)}`);
assert.equal(r.body.error.code, "EFOLDER");
}
assert.ok(!fs.existsSync(path.join(BOB, "x")));
assert.ok(!fs.existsSync(path.join(HOSTDIR, "x")));
});
it("branches", async () => {
const other = await call(
"mia",
+20 -1
View File
@@ -18,7 +18,7 @@ const fs = require("node:fs");
const TEST_DB = path.join(os.tmpdir(), `transcript-sender-${Date.now()}-${process.pid}.db`);
process.env.DASHBOARD_DB_PATH = TEST_DB;
const { classifyTranscriptSender, patchCounts } = require("../routes/sessions");
const { classifyTranscriptSender, patchCounts, askAnswers } = require("../routes/sessions");
const { db } = require("../db");
after(() => {
@@ -168,3 +168,22 @@ describe("patchCounts — the +/- lines of a Write/Edit result", () => {
assert.equal(patchCounts(undefined), null);
});
});
describe("askAnswers — what the user picked or typed for an AskUserQuestion", () => {
it("returns each question's answer", () => {
const r = {
questions: [{ question: "Commit?", options: [{ label: "Yes" }, { label: "No" }] }],
answers: { "Commit?": "Yes", "Notes?": "typed text" },
annotations: {},
};
assert.deepEqual(askAnswers(r), { "Commit?": "Yes", "Notes?": "typed text" });
});
it("drops a non-string answer and answers null for a result that is no question", () => {
assert.deepEqual(askAnswers({ answers: { a: "x", b: 3 } }), { a: "x" });
assert.equal(askAnswers({ answers: {} }), null);
assert.equal(askAnswers({ answers: ["x"] }), null);
assert.equal(askAnswers({ stdout: "ok" }), null);
assert.equal(askAnswers("text"), null);
});
});
+3 -3
View File
@@ -39,7 +39,6 @@ const COOKIE = "agenthub_sid";
const SESSION_DAYS = 30;
const ROLES = ["admin", "analyst", "developer"];
const USERNAME_RE = /^[a-z0-9][a-z0-9._-]{0,63}$/i;
const MIN_PASSWORD = 8;
/**
* API prefixes whose writes change the host account's own setup. (AI Proxy
@@ -120,8 +119,9 @@ function validateUsername(name) {
}
function validatePassword(password) {
if (typeof password !== "string" || password.length < MIN_PASSWORD) {
throw err("EBADPASSWORD", `password: at least ${MIN_PASSWORD} characters`);
// No minimum length (the operator's choice) — only an empty one is refused.
if (typeof password !== "string" || password.length === 0) {
throw err("EBADPASSWORD", "password: required");
}
if (password.length > 1024) throw err("EBADPASSWORD", "password too long");
}
+8 -2
View File
@@ -289,12 +289,18 @@ function audienceIncludes(audience, user) {
/**
* A non-admin's own folder, `<AGENTHUB_USERS_ROOT>/<username>`, or null (no
* root set, or an admin). Whatever the method: an analyst reads every user's
* root set, or an admin). Under S3 a missing variable falls back to
* server.conf's `USERS_ROOT` — the folder the member's Linux account lives in —
* so a settings file without it can never open the host's whole disk to them.
* Whatever the method: an analyst reads every user's
* ROWS, but a path named in a request is read with the dashboard's own rights
* (CAP_DAC_READ_SEARCH under S3), so an analyst's GET is held to it too.
*/
function ownFolder(req) {
const root = (process.env.AGENTHUB_USERS_ROOT || "").trim();
const linux = require("./linux-accounts");
const root =
(process.env.AGENTHUB_USERS_ROOT || "").trim() ||
(linux.s3Enabled() ? linux.serverConf().usersRoot : "");
if (!req?.user || req.user.role === "admin" || !root) return null;
const path = require("node:path");
return path.join(path.resolve(root), req.user.username);
+2 -2
View File
@@ -241,7 +241,7 @@ const paths = {
required: ["username", "password", "currentPassword"],
properties: {
username: { type: "string" },
password: { type: "string", minLength: 8 },
password: { type: "string", minLength: 1 },
role: {
type: "string",
enum: ["admin", "analyst", "developer"],
@@ -282,7 +282,7 @@ const paths = {
operationId: "resetServerUserPassword",
summary: "Admin: a new password for that user; every login of theirs ends",
parameters: [idParam],
requestBody: changeBody({ password: { type: "string", minLength: 8 } }, ["password"]),
requestBody: changeBody({ password: { type: "string", minLength: 1 } }, ["password"]),
responses: changeResponses,
},
},
+36
View File
@@ -151,6 +151,42 @@ const paths = {
},
},
},
"/api/lanes/browse/mkdir": {
post: {
tags: ["Lanes"],
summary: "New folder, from the in-app folder browser",
description:
"Makes ONE folder `name` (no `/`, `\\`, NUL, `.` or `..`; ≤ 255 bytes) inside the existing folder `parent` — never `-p`, never over an existing entry. A non-admin makes one only inside their own folder, by real path (`EFOLDER`), and in server mode a non-admin with no folder of their own makes none. Under S3 a folder in a member's home is made as that member.",
operationId: "makeBrowseFolder",
requestBody: {
content: {
"application/json": {
schema: {
type: "object",
required: ["parent", "name"],
properties: {
parent: { type: "string", description: "Absolute path of an existing folder." },
name: { type: "string" },
},
},
},
},
},
responses: {
201: {
description: "`{path}` — the folder made.",
content: {
"application/json": {
schema: { type: "object", properties: { path: { type: "string" } } },
},
},
},
400: { description: "EBADNAME, EBADPATH, or ENOTFOUND (no such parent folder)." },
403: { description: "EBADORIGIN, or EFOLDER (outside the caller's own folder)." },
409: { description: "EEXISTS (the name is taken) or EMEMBERGONE." },
},
},
},
"/api/lanes/ensure": {
post: {
tags: ["Lanes"],
+94 -6
View File
@@ -566,6 +566,9 @@ router.post("/gc", sameOriginGuard, (req, res) => {
* "/:id" so the literal "browse" segment is never captured as a lane id.
* `files=1` (a file field's fallback) lists files too, and opens `path` the
* way the native picker would (`startDir`: `~`, a file's folder, else home).
* `hidden=1` lists dot entries too — never those at the top of a non-admin's
* own folder, where a member's logins live. Each entry carries its `mtime`
* (ms), and `home` is the folder the browser's Home place opens.
*/
router.get("/browse", (req, res) => {
// A developer browses only their own folder (by real path: a link in it
@@ -573,6 +576,7 @@ router.get("/browse", (req, res) => {
// rights, CAP_DAC_READ_SEARCH under S3, not theirs.
const own = scope.ownFolder(req);
const files = req.query.files === "1";
const hidden = req.query.hidden === "1";
const raw =
typeof req.query.path === "string" && req.query.path.trim()
? files
@@ -594,15 +598,33 @@ router.get("/browse", (req, res) => {
.json({ error: { code: "ENOTADIR", message: "path is not a directory" } });
}
const atOwnTop = Boolean(own) && resolved === lanesLib.canonicalCwd(own);
const mtimeOf = (full) => {
try {
return fs.statSync(full).mtimeMs;
} catch {
return null;
}
};
let entries = [];
try {
entries = fs
.readdirSync(resolved, { withFileTypes: true })
.filter((e) => (e.isDirectory() || (files && e.isFile())) && !e.name.startsWith("."))
.filter(
(e) =>
(e.isDirectory() || (files && e.isFile())) &&
(!e.name.startsWith(".") || (hidden && !atOwnTop))
)
.map((e) => {
const full = path.join(resolved, e.name);
if (e.isFile()) return { name: e.name, path: full, isGitRepo: false, file: true };
return { name: e.name, path: full, isGitRepo: fs.existsSync(path.join(full, ".git")) };
const mtime = mtimeOf(full);
if (e.isFile()) return { name: e.name, path: full, isGitRepo: false, file: true, mtime };
return {
name: e.name,
path: full,
isGitRepo: fs.existsSync(path.join(full, ".git")),
mtime,
};
})
// Folders first, as every file picker lists them.
.sort((a, b) => !!a.file - !!b.file || a.name.localeCompare(b.name));
@@ -610,12 +632,78 @@ router.get("/browse", (req, res) => {
// An unreadable entry mid-listing is skipped, not a request failure.
}
const top =
path.dirname(resolved) === resolved || (own && resolved === lanesLib.canonicalCwd(own));
const top = path.dirname(resolved) === resolved || atOwnTop;
const parent = top ? null : path.dirname(resolved);
res.json({ path: resolved, parent, entries });
res.json({ path: resolved, parent, entries, home: own || os.homedir() });
});
/**
* The folder browser's New folder: makes ONE folder `name` (a plain name —
* no separator, not `.`/`..`) in the existing folder `parent`, never with
* `-p` and never over an existing entry (`EEXISTS`). A non-admin makes one
* only inside their own folder, judged by real path like `GET /browse`, and
* in server mode a non-admin with no folder of their own makes none
* (`EFOLDER`) — a read of the host's disk is not a write to it. A folder in a
* member's home (S3) is made AS the member, never by the host.
*/
router.post("/browse/mkdir", sameOriginGuard, (req, res) => {
const { parent, name } = req.body || {};
if (
typeof name !== "string" ||
!name ||
name === "." ||
name === ".." ||
/[/\\\0]/.test(name) ||
Buffer.byteLength(name) > 255
) {
return res
.status(400)
.json({ error: { code: "EBADNAME", message: "a folder name without '/' or '\\'" } });
}
if (typeof parent !== "string" || !path.isAbsolute(parent)) {
return res.status(400).json({ error: { code: "EBADPATH", message: "parent: absolute path" } });
}
const own = scope.ownFolder(req);
const limited = Boolean(req.user) && req.user.role !== "admin";
if (limited && !own) return refuseFolder(res);
const dir = own ? lanesLib.canonicalCwd(path.resolve(parent)) : path.resolve(parent);
if (own && !scope.folderAllowed(req, dir, { allowHome: true })) return refuseFolder(res);
try {
if (!fs.statSync(dir).isDirectory()) throw new Error("not a directory");
} catch {
return res
.status(400)
.json({ error: { code: "ENOTFOUND", message: "parent folder does not exist" } });
}
const target = path.join(dir, name);
if (fs.existsSync(target) || isSymlink(target)) {
return res.status(409).json({ error: { code: "EEXISTS", message: "that name is taken" } });
}
try {
const runAs = require("../lib/run-as");
const acct = runAs.accountForPath(target);
if (acct) runAs.mkdirAs(acct, target);
else fs.mkdirSync(target);
} catch (err) {
const status = err.code === "EMEMBERGONE" ? 409 : err.code === "EEXIST" ? 409 : 500;
return res.status(status).json({
error: {
code: err.code === "EEXIST" ? "EEXISTS" : err.code || "EMKDIR",
message: err.message,
},
});
}
res.status(201).json({ path: target });
});
function isSymlink(p) {
try {
return fs.lstatSync(p).isSymbolicLink();
} catch {
return false;
}
}
/**
* The OS's own folder/file picker, shown on the SERVER's desktop
* (`server/lib/native-dialog.js`), answering `{path}` or `{cancelled: true}`.
+13
View File
@@ -1029,6 +1029,7 @@ router.get("/:id/transcript", async (req, res) => {
} else if (block.type === "tool_result") {
// A line carries one tool result; an edit's +/- counts ride on it.
const diff = patchCounts(entry.toolUseResult);
const answers = askAnswers(entry.toolUseResult);
content.push({
type: "tool_result",
id: block.tool_use_id || null,
@@ -1040,6 +1041,7 @@ router.get("/:id/transcript", async (req, res) => {
),
is_error: !!block.is_error,
...(diff ? { diff } : {}),
...(answers ? { answers } : {}),
});
}
}
@@ -1330,6 +1332,16 @@ function patchCounts(r) {
return null;
}
/** An AskUserQuestion result's answers (`toolUseResult.answers`): question
* text → the option picked, or what the user typed. Null for any other result. */
function askAnswers(r) {
if (!r || typeof r !== "object" || !r.answers || typeof r.answers !== "object") return null;
if (Array.isArray(r.answers)) return null;
const out = {};
for (const [q, a] of Object.entries(r.answers)) if (typeof a === "string") out[q] = a;
return Object.keys(out).length ? out : null;
}
// A conversation turn — a prompt, an answer — is shown whole: it is bounded by
// the model's output and what the user typed. Only tool payloads and thinking
// (the parts that can run to megabytes) keep the 10 KB cap. This one guards
@@ -1353,3 +1365,4 @@ module.exports.sessionStats = sessionStats;
// Exported for unit tests — sender attribution is correctness-critical.
module.exports.classifyTranscriptSender = classifyTranscriptSender;
module.exports.patchCounts = patchCounts;
module.exports.askAnswers = askAnswers;