(() => {
const session = workspace.selectedSession;
+ const project = workspace.selectedProject;
+ const worktree = workspace.selectedWorktree;
+ const hasMissingManagedWorktree = Boolean(session?.worktreeId && !worktree);
+ const sessionPath = hasMissingManagedWorktree
+ ? undefined
+ : worktree?.path ?? session?.worktreePath ?? session?.cwd;
+ const isSessionLive = session ? isLiveStatus(session.status) : false;
const baseCommands: CommandPaletteCommand[] = [
{
id: "project.add",
@@ -246,19 +260,53 @@ export function AppShell() {
onSelect: openNewSession,
},
{
- id: "session.open",
- label: "Open Session",
- description: "Open the selected session workspace.",
- disabled: !session,
- disabledReason: "Select a session first.",
- onSelect: () => workspace.setView("session"),
+ id: "project.rename",
+ label: "Rename Project",
+ description: "Change only the selected project's display name.",
+ disabled: !project || !workspace.isConnected,
+ disabledReason: "Select a project and connect the local daemon first.",
+ onSelect: () => {
+ if (project) {
+ workspace.openOverlay({ kind: "rename-project", projectId: project.id });
+ }
+ },
+ },
+ {
+ id: "project.remove",
+ label: "Remove Project",
+ description: "Forget the selected project without deleting its directory.",
+ disabled: !project || !workspace.isConnected,
+ disabledReason: "Select a project and connect the local daemon first.",
+ onSelect: () => {
+ if (project) {
+ workspace.openOverlay({ kind: "remove-project", projectId: project.id });
+ }
+ },
+ },
+ {
+ id: "session.start",
+ label: "Start Session",
+ description: "Start a fresh process for the selected session.",
+ disabled:
+ !session ||
+ !workspace.isConnected ||
+ isSessionLive ||
+ hasMissingManagedWorktree,
+ disabledReason: hasMissingManagedWorktree
+ ? "The selected session's managed worktree is unavailable."
+ : "Select a stopped session and connect the local daemon first.",
+ onSelect: () => {
+ if (session) {
+ void workspace.startSession({ sessionId: session.id }).catch(() => undefined);
+ }
+ },
},
{
id: "session.stop",
label: "Stop Session",
description: "Stop only the selected agent process.",
disabled:
- !session || !workspace.isConnected || !isLiveStatus(session.status),
+ !session || !workspace.isConnected || !isSessionLive,
disabledReason:
"Select a live session and connect the local daemon first.",
onSelect: () => {
@@ -269,8 +317,10 @@ export function AppShell() {
id: "session.restart",
label: "Restart Session",
description: "Restart the selected agent process.",
- disabled: !session || !workspace.isConnected,
- disabledReason: "Select a session and connect the daemon first.",
+ disabled: !session || !workspace.isConnected || hasMissingManagedWorktree,
+ disabledReason: hasMissingManagedWorktree
+ ? "The selected session's managed worktree is unavailable."
+ : "Select a session and connect the daemon first.",
onSelect: () => {
if (session) {
void workspace
@@ -279,21 +329,90 @@ export function AppShell() {
}
},
},
+ {
+ id: "session.rename",
+ label: "Rename Session",
+ description: "Change only the selected session's display name.",
+ disabled: !session || !workspace.isConnected,
+ disabledReason: "Select a session and connect the local daemon first.",
+ onSelect: () => {
+ if (session) {
+ workspace.openOverlay({ kind: "rename-session", sessionId: session.id });
+ }
+ },
+ },
+ {
+ id: "session.git-status",
+ label: "Show Git Status",
+ description: "Inspect the selected session's working tree.",
+ disabled: !session || !workspace.isConnected || hasMissingManagedWorktree,
+ disabledReason: hasMissingManagedWorktree
+ ? "The selected session's managed worktree is unavailable."
+ : "Select a session and connect the local daemon first.",
+ onSelect: () => {
+ if (session) {
+ workspace.openOverlay({ kind: "git-status", sessionId: session.id });
+ }
+ },
+ },
+ {
+ id: "session.open-path",
+ label: "Open Session Path",
+ description: "Reveal the selected session directory in the system file manager.",
+ disabled: !sessionPath,
+ disabledReason: hasMissingManagedWorktree
+ ? "The selected session's managed worktree is unavailable."
+ : "Select a session first.",
+ onSelect: () => {
+ if (sessionPath) {
+ void workspace.openPath(sessionPath).catch(() => undefined);
+ }
+ },
+ },
+ {
+ id: "session.delete",
+ label: "Delete Session",
+ description: "Delete stopped session metadata without removing its worktree.",
+ disabled: !session || !workspace.isConnected || isSessionLive,
+ disabledReason: isSessionLive
+ ? "Stop the selected session before deleting its metadata."
+ : "Select a stopped session and connect the local daemon first.",
+ onSelect: () => {
+ if (session) {
+ workspace.openOverlay({ kind: "delete-session", sessionId: session.id });
+ }
+ },
+ },
+ {
+ id: "session.remove-worktree",
+ label: "Remove Session Worktree",
+ description: "Begin the guarded removal flow for the selected worktree.",
+ disabled: !session || !worktree || !workspace.isConnected || isSessionLive,
+ disabledReason: isSessionLive
+ ? "Stop the selected session before removing its worktree."
+ : "Select a stopped session with an available managed worktree.",
+ onSelect: () => {
+ if (worktree) {
+ workspace.openOverlay({ kind: "remove-worktree", worktreeId: worktree.id });
+ }
+ },
+ },
+ {
+ id: "knowledge.open",
+ label: "Open prompts and context",
+ description: "Browse saved content and insert a snapshot into a terminal draft.",
+ keywords: ["library", "knowledge", "templates", "XIRP"],
+ onSelect: () => {
+ workspace.setView("canvas");
+ setKnowledgeOpenRevision((revision) => revision + 1);
+ },
+ },
{
id: "view.canvas",
label: "Open Canvas",
description: "Arrange terminals and notes in the spatial workspace.",
onSelect: () => workspace.setView("canvas"),
},
- {
- id: "view.grid",
- label: "Open Grid",
- description: "Show sessions for the selected project in a grid.",
- shortcut: `${modifier} Shift G`,
- disabled: !workspace.selectedProject,
- disabledReason: "Select a project first.",
- onSelect: () => workspace.setView("grid"),
- },
{
id: "view.settings",
label: "Open Settings",
@@ -312,46 +431,81 @@ export function AppShell() {
label: `Switch Project: ${project.name}`,
description: project.repositoryRoot ?? project.path,
keywords: ["recent repository", project.currentBranch ?? ""],
- onSelect: () => selectProject(project.id),
+ onSelect: () => selectCanvasProject(project.id),
}));
- return [...baseCommands, ...switchCommands];
+ const focusCommands: CommandPaletteCommand[] = orderedProjectSessions.map(
+ (projectSession, index) => ({
+ id: `session.focus.${projectSession.id}`,
+ label: `Focus Session: ${projectSession.name}`,
+ description: "Reveal and focus this terminal node on the canvas.",
+ shortcut: index < 9 ? `${modifier} ${index + 1}` : undefined,
+ onSelect: () => requestSessionFocus(projectSession.id),
+ }),
+ );
+ const sessionIds = new Set(workspace.sessions.map(({ id }) => id));
+ const retainedWorktreeCommands: CommandPaletteCommand[] = workspace.worktrees
+ .filter(
+ (candidate) =>
+ candidate.projectId === project?.id &&
+ (!candidate.sessionId || !sessionIds.has(candidate.sessionId)),
+ )
+ .map((candidate) => ({
+ id: `worktree.remove.${candidate.id}`,
+ label: `Remove Retained Worktree: ${candidate.branch}`,
+ description: candidate.path,
+ disabled: !workspace.isConnected,
+ disabledReason: "Connect the local daemon first.",
+ onSelect: () =>
+ workspace.openOverlay({
+ kind: "remove-worktree",
+ worktreeId: candidate.id,
+ }),
+ }));
+ return [
+ ...baseCommands,
+ ...switchCommands,
+ ...focusCommands,
+ ...retainedWorktreeCommands,
+ ];
}, [
canCreateSession,
cycleProject,
modifier,
openAddProject,
openNewSession,
+ orderedProjectSessions,
repositoryUnavailable,
- selectProject,
+ requestSessionFocus,
+ selectCanvasProject,
workspace,
]);
+ const isNavigationHidden = isCompactNavigation
+ ? !navigationOpen
+ : canvasSidebarCollapsed;
+
return (
Skip to workspace
-
setNavigationOpen((open) => !open)}
- onNewSession={openNewSession}
- onOpenPalette={openCommandPalette}
- />
- {workspace.connection.status === "disconnected" && workspace.snapshot ? (
-
-
Daemon disconnected. Existing metadata may be stale.
-
Reconnect
+ {workspace.connection.status === "disconnected" ? (
+
+
+ Daemon disconnected. {" "}
+ {workspace.snapshot
+ ? "Existing metadata may be stale."
+ : "Notes and terminal drafts are available offline."}
+
+
+ {workspace.snapshot ? "Reconnect" : "Retry Connection"}
+
) : null}
{workspace.operationError ? (
@@ -372,20 +526,16 @@ export function AppShell() {
) : null}
Navigation
@@ -393,76 +543,99 @@ export function AppShell() {
- {usesCanvasShell ? (
-
{
- workspace.setView("canvas");
- setNavigationOpen(false);
- }}
- onHide={() => setCanvasSidebarCollapsed(true)}
- onAddProject={openAddProject}
- onOpenSettings={() => {
- workspace.setView("settings");
- setNavigationOpen(false);
- }}
- onOpenDiagnostics={() => {
- workspace.setView("diagnostics");
- setNavigationOpen(false);
- }}
- />
- ) : (
- <>
- workspace.openOverlay({ kind: "rename-project", projectId })}
- onRemoveProject={(projectId) => workspace.openOverlay({ kind: "remove-project", projectId })}
- onOpenSettings={() => { workspace.setView("settings"); setNavigationOpen(false); }}
- onOpenDiagnostics={() => { workspace.setView("diagnostics"); setNavigationOpen(false); }}
- />
-
- worktree.projectId === workspace.selectedProject?.id,
- )}
- selectedSessionId={workspace.selectedSessionId ?? undefined}
- projectSelected={workspace.selectedProject !== null}
- onSelectSession={selectSession}
- onNewSession={openNewSession}
- onRemoveWorktree={(worktreeId) =>
- workspace.openOverlay({ kind: "remove-worktree", worktreeId })
- }
- />
-
- )}
+ {
+ workspace.setView("canvas");
+ setNavigationOpen(false);
+ }}
+ onHide={hideNavigation}
+ onAddProject={openAddProject}
+ onRenameProject={(projectId) => {
+ closeNavigationForOverlay();
+ workspace.openOverlay({ kind: "rename-project", projectId });
+ }}
+ onRemoveProject={(projectId) => {
+ closeNavigationForOverlay();
+ workspace.openOverlay({ kind: "remove-project", projectId });
+ }}
+ onOpenSettings={() => {
+ workspace.setView("settings");
+ setNavigationOpen(false);
+ }}
+ onOpenDiagnostics={() => {
+ workspace.setView("diagnostics");
+ setNavigationOpen(false);
+ }}
+ />
- {usesCanvasShell && canvasSidebarCollapsed ? (
+ {navigationOpen ?
setNavigationOpen(false)} /> : null}
+
setCanvasSidebarCollapsed(false)}
+ aria-label={
+ isNavigationHidden
+ ? isCompactNavigation
+ ? "Open navigation"
+ : "Show workspace sidebar"
+ : "Hide navigation"
+ }
+ aria-controls="canvas-navigation"
+ aria-expanded={!isNavigationHidden}
+ onClick={toggleNavigation}
>
-
- ) : null}
- {navigationOpen ? setNavigationOpen(false)} /> : null}
+
+
+ {workspace.selectedProject ? (
+
+ New session
+
+ ) : (
+
+ Add project
+
+ )}
+
workspace.setView("canvas")}
- onSelectProject={selectProject}
- onSelectSession={selectSession}
+ onSelectSession={(sessionId) => workspace.selectSession(sessionId)}
onCreateCustomAgent={workspace.createCustomAgent}
onCreateSession={(input) =>
workspace.createSession(input, { select: false })
@@ -494,10 +667,9 @@ export function AppShell() {
onRenameSession={(sessionId) => workspace.openOverlay({ kind: "rename-session", sessionId })}
onStopSession={(sessionId) => workspace.openOverlay({ kind: "stop-session", sessionId })}
onDeleteSession={(sessionId) => workspace.openOverlay({ kind: "delete-session", sessionId })}
- onRemoveWorktree={(sessionId) => {
- const session = workspace.sessions.find((candidate) => candidate.id === sessionId);
- if (session?.worktreeId) workspace.openOverlay({ kind: "remove-worktree", worktreeId: session.worktreeId });
- }}
+ onRemoveWorktree={(worktreeId) =>
+ workspace.openOverlay({ kind: "remove-worktree", worktreeId })
+ }
onGitStatus={(sessionId) => workspace.openOverlay({ kind: "git-status", sessionId })}
onOpenPath={workspace.openPath}
onLoadDiagnostics={workspace.getDiagnostics}
@@ -528,6 +700,35 @@ function readCanvasSidebarCollapsed(): boolean {
}
}
+const COMPACT_NAVIGATION_QUERY = "(max-width: 47.99rem)";
+
+/** Keeps drawer behavior aligned with the CSS compact-navigation breakpoint. */
+function useCompactNavigation(onExitCompact: () => void): boolean {
+ const [isCompact, setIsCompact] = useState(() => {
+ if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+ return false;
+ }
+ return window.matchMedia(COMPACT_NAVIGATION_QUERY).matches;
+ });
+
+ useEffect(() => {
+ if (typeof window.matchMedia !== "function") {
+ return undefined;
+ }
+ const query = window.matchMedia(COMPACT_NAVIGATION_QUERY);
+ const update = (event: MediaQueryListEvent) => {
+ setIsCompact(event.matches);
+ if (!event.matches) {
+ onExitCompact();
+ }
+ };
+ query.addEventListener("change", update);
+ return () => query.removeEventListener("change", update);
+ }, [onExitCompact]);
+
+ return isCompact;
+}
+
const NAVIGATION_FOCUSABLE = [
"a[href]",
"button:not([disabled])",
diff --git a/apps/desktop/src/app/components/AppHeader.tsx b/apps/desktop/src/app/components/AppHeader.tsx
deleted file mode 100644
index b446e63..0000000
--- a/apps/desktop/src/app/components/AppHeader.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { AppPlatform } from "../../ipc/client";
-import type { Project } from "../../ipc/types";
-import { Icon } from "./Icon";
-
-interface AppHeaderProps {
- readonly project?: Project;
- readonly platform: AppPlatform;
- readonly canCreateSession: boolean;
- readonly navigationOpen: boolean;
- readonly onToggleNavigation: () => void;
- readonly onNewSession: () => void;
- readonly onOpenPalette: () => void;
-}
-
-/** Renders product identity, current repository context, and primary actions. */
-export function AppHeader({
- project,
- platform,
- canCreateSession,
- navigationOpen,
- onToggleNavigation,
- onNewSession,
- onOpenPalette,
-}: AppHeaderProps) {
- const modifier = platform === "macos" ? "⌘" : "Ctrl";
- return (
-
- );
-}
diff --git a/apps/desktop/src/app/components/Icon.tsx b/apps/desktop/src/app/components/Icon.tsx
index 5e5ba95..dc66c35 100644
--- a/apps/desktop/src/app/components/Icon.tsx
+++ b/apps/desktop/src/app/components/Icon.tsx
@@ -15,7 +15,6 @@ export type IconName =
| "diagnostics"
| "external-link"
| "folder"
- | "grid"
| "layers"
| "link"
| "map"
@@ -31,7 +30,6 @@ export type IconName =
| "repository"
| "sidebar"
| "search"
- | "session"
| "settings"
| "stop"
| "terminal"
@@ -131,15 +129,6 @@ function getIconPaths(name: IconName): ReactNode {
return (
;
+ readonly agents: readonly AgentRecord[];
+ readonly onFocusNode: (node: CanvasNode) => void;
+ readonly onClose: () => void;
+}
+
+/** Searches canvas metadata while the live terminal cards remain mounted. */
+export function CanvasElementSearch({
+ nodes,
+ sessions,
+ agents,
+ onFocusNode,
+ onClose,
+}: CanvasElementSearchProps) {
+ const [query, setQuery] = useState("");
+ const inputRef = useRef(null);
+ const resultsRef = useRef(new Map());
+ const terms = query.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
+ const entries = nodes.map((node) => {
+ const session = node.kind === "terminal" && node.sessionId
+ ? sessions.get(node.sessionId)
+ : undefined;
+ const agentId = session?.agentId ?? (node.kind === "terminal" ? node.agentId : undefined);
+ const agent = agents.find((candidate) => candidate.id === agentId);
+ const details = node.kind === "note"
+ ? node.text
+ : node.kind === "browser"
+ ? normalizeBrowserUrl(node.url)
+ : [agent?.displayName, agent?.command.executable ?? node.executable, session?.branch, session?.cwd ?? node.workingDirectory]
+ .filter(Boolean).join(" · ");
+ return { node, details, searchable: `${node.title} ${node.kind} ${details}`.toLocaleLowerCase() };
+ }).filter((entry) => terms.every((term) => entry.searchable.includes(term)));
+
+ useLayoutEffect(() => {
+ inputRef.current?.focus();
+ }, []);
+
+ return (
+
+ );
+}
diff --git a/apps/desktop/src/app/features/canvas/CanvasKnowledgePanel.tsx b/apps/desktop/src/app/features/canvas/CanvasKnowledgePanel.tsx
new file mode 100644
index 0000000..5607ec6
--- /dev/null
+++ b/apps/desktop/src/app/features/canvas/CanvasKnowledgePanel.tsx
@@ -0,0 +1,121 @@
+import { useLayoutEffect, useRef, useState } from "react";
+
+import { Icon } from "../../components/Icon";
+import { KnowledgePanel } from "../knowledge/KnowledgePanel";
+import type { KnowledgePanelProps } from "../knowledge/KnowledgePanel";
+import type { KnowledgeProject } from "../knowledge/knowledge-types";
+import { KnowledgeSourceInspector } from "../knowledge/KnowledgeSourceInspector";
+import type { KnowledgeSourceInspectorProps } from "../knowledge/useKnowledgeSources";
+import "./canvas-knowledge-panel.css";
+
+/** Keeps library drafts mounted while the canvas overlay is dismissed. */
+interface CanvasKnowledgePanelProps extends Omit {
+ readonly client: KnowledgePanelProps["client"] & KnowledgeSourceInspectorProps["client"];
+ readonly connectionKey?: string;
+ readonly open: boolean;
+ readonly currentProject?: KnowledgeProject | null;
+ readonly projects: readonly KnowledgeProject[];
+ readonly targetTitle?: string;
+ readonly onClose: () => void;
+}
+
+export function CanvasKnowledgePanel({
+ open,
+ client,
+ connectionKey,
+ currentProject,
+ projects,
+ targetTitle,
+ onClose,
+ ...props
+}: CanvasKnowledgePanelProps) {
+ const panelRef = useRef(null);
+ const returnFocusRef = useRef(null);
+ const composingRef = useRef(false);
+ const [section, setSection] = useState<"library" | "sources">("library");
+ // Keep the last project identity when it disappears instead of relabeling
+ // its in-memory drafts as global. Switching to another real project is safe.
+ const [scopeProject, setScopeProject] = useState(currentProject ?? null);
+ const nextScope = currentProject ?? (
+ scopeProject && !projects.some((project) => project.id === scopeProject.id)
+ ? scopeProject
+ : null
+ );
+ if (scopeProject !== nextScope) setScopeProject(nextScope);
+
+ useLayoutEffect(() => {
+ if (!open) return;
+ const previous = document.activeElement;
+ returnFocusRef.current = previous instanceof HTMLElement ? previous : null;
+ const panel = panelRef.current;
+ Array.from(panel?.querySelectorAll('input[type="search"]') ?? [])
+ .find((input) => !input.closest("[hidden]"))?.focus();
+ return () => {
+ if (panel?.contains(document.activeElement) && returnFocusRef.current?.isConnected) {
+ returnFocusRef.current.focus();
+ }
+ };
+ }, [open]);
+
+ function requestClose() {
+ if (returnFocusRef.current?.isConnected) returnFocusRef.current.focus();
+ onClose();
+ }
+
+ const missingProject = scopeProject && !projects.some((project) => project.id === scopeProject.id);
+ return (
+ event.stopPropagation()}
+ onCompositionStartCapture={() => { composingRef.current = true; }}
+ onCompositionEndCapture={() => { composingRef.current = false; }}
+ onKeyDown={(event) => {
+ if (
+ event.key === "Escape" && !event.defaultPrevented && !event.repeat
+ && !composingRef.current && !event.nativeEvent.isComposing
+ && event.nativeEvent.keyCode !== 229
+ && !(event.target instanceof Element && event.target.closest("dialog"))
+ ) {
+ event.preventDefault();
+ event.stopPropagation();
+ requestClose();
+ }
+ }}
+ >
+
+
+ setSection("library")}>
+ Saved prompts & context
+
+ setSection("sources")}>
+ Rules & skills
+
+
+ {missingProject ? (
+
+ {scopeProject.name} is no longer in the workspace. Its library drafts stay associated with that project.
+
+ ) : null}
+
+
+ {open && section === "sources" ? (
+
+
+ ) : null}
+
+ );
+}
diff --git a/apps/desktop/src/app/features/canvas/CanvasWorkspace.test.tsx b/apps/desktop/src/app/features/canvas/CanvasWorkspace.test.tsx
index 293eb14..df3a941 100644
--- a/apps/desktop/src/app/features/canvas/CanvasWorkspace.test.tsx
+++ b/apps/desktop/src/app/features/canvas/CanvasWorkspace.test.tsx
@@ -1,3 +1,5 @@
+import { useImperativeHandle, useState } from "react";
+import type { ComponentProps, Ref } from "react";
import {
act,
fireEvent,
@@ -9,11 +11,19 @@ import {
import userEvent from "@testing-library/user-event";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import type { Session } from "../../../ipc/types";
+import { IpcError } from "../../../ipc/client";
+import type { KnowledgeSourceEntry } from "../../../ipc/domain";
+import type { Session, Worktree } from "../../../ipc/types";
+import { createMockIpcClient } from "../../../test/mockIpc";
import type { BrowserRuntime } from "../browser/browser-runtime";
-import type { LiveTerminalTransport } from "../terminal/LiveTerminal";
+import type { KnowledgeRecord } from "../knowledge/knowledge-types";
+import type {
+ LiveTerminalInputHandle,
+ LiveTerminalTransport,
+} from "../terminal/LiveTerminal";
import {
CANVAS_STORAGE_KEY,
+ parseCanvasDocument,
type BrowserCanvasNode,
type CanvasDocument,
type NoteCanvasNode,
@@ -21,6 +31,24 @@ import {
} from "./canvas-state";
import { CanvasWorkspace } from "./CanvasWorkspace";
+vi.mock("../terminal/LiveTerminal", () => ({
+ LiveTerminal: ({ session, inputRef, writeTerminal }: {
+ readonly session: Session;
+ readonly inputRef?: Ref;
+ readonly writeTerminal: LiveTerminalTransport["writeTerminal"];
+ }) => {
+ useImperativeHandle(inputRef, () => ({
+ writeInput: async (encode) => {
+ await writeTerminal(session.id, encode({
+ bracketedPasteMode: true,
+ applicationCursorKeysMode: false,
+ }));
+ },
+ }), [session.id, writeTerminal]);
+ return
;
+ },
+}));
+
const PROJECT = {
id: "0198f000-0000-7000-8000-000000000001",
name: "Jig",
@@ -39,6 +67,40 @@ const SHELL_AGENT = {
enabled: true,
} as const;
+const OTHER_PROJECT = {
+ ...PROJECT,
+ id: "0198f000-0000-7000-8000-000000000010",
+ name: "Other project",
+ path: "/workspace/other",
+ repositoryRoot: "/workspace/other",
+} as const;
+
+const STOPPED_SESSION: Session = {
+ id: "0198f000-0000-7000-8000-000000000003",
+ projectId: PROJECT.id,
+ name: "Review agent",
+ agentId: SHELL_AGENT.id,
+ cwd: "/workspace/jig/.worktrees/review",
+ branch: "agent/review",
+ worktreeId: "0198f000-0000-7000-8000-000000000004",
+ worktreePath: "/workspace/jig/.worktrees/review",
+ status: "exited",
+ createdAtMs: 2,
+ updatedAtMs: 3,
+};
+
+const MANAGED_WORKTREE: Worktree = {
+ id: "0198f000-0000-7000-8000-000000000004",
+ projectId: PROJECT.id,
+ sessionId: STOPPED_SESSION.id,
+ path: "/workspace/jig/.worktrees/review",
+ branch: "agent/review",
+ isDirty: false,
+ state: "active",
+ createdAtMs: 2,
+ updatedAtMs: 3,
+};
+
const BROWSER_NODE: BrowserCanvasNode = {
id: "browser-test",
kind: "browser",
@@ -95,6 +157,513 @@ describe("CanvasWorkspace", () => {
vi.restoreAllMocks();
});
+ describe("Knowledge library", () => {
+ it.each(["Source content", "Discovery issue details"])(
+ "keeps canvas actions out of the focusable %s inspector surface",
+ async (surfaceName) => {
+ const user = userEvent.setup();
+ const entry: KnowledgeSourceEntry = {
+ entryId: "rule-shortcuts", kind: "rule", provider: "codex", scope: "project",
+ sourcePath: "/workspace/jig/AGENTS.md", name: "AGENTS.md", scopeDirectory: ".",
+ precedenceHint: "Native loading depends on the CLI.", viaSymlink: false, availability: "available",
+ };
+ const knowledgeClient = createMockIpcClient({ handlers: {
+ listKnowledge: async () => ({ entries: [], nextCursor: null }),
+ discoverKnowledge: async () => ({
+ scanId: "scan-shortcuts", entries: [entry], truncated: false,
+ issues: [{ code: "nested_scope_unsupported", sourcePath: "/workspace/jig/nested", message: "Nested project scopes are not included." }],
+ }),
+ readKnowledge: async () => ({ entry, content: "Read these instructions without changing the canvas." }),
+ } });
+ seedCanvasDocument([TERMINAL_NODE, NOTE_NODE]);
+ const { props } = renderProjectCanvas({ knowledgeClient, sessions: [LIVE_SESSION] });
+ const terminal = screen.getByRole("article", { name: "Terminal 1, terminal canvas item" });
+ const note = screen.getByRole("article", { name: "Notes, note canvas item" });
+ await user.click(terminal);
+ await user.click(screen.getByRole("button", { name: "Open prompts and context" }));
+ await user.click(screen.getByRole("button", { name: "Rules & skills" }));
+ await user.click(await screen.findByRole("button", { name: entry.name }));
+ await screen.findByLabelText("Source content");
+ const surface = screen.getByLabelText(surfaceName);
+ act(() => surface.focus());
+ expect(surface).toHaveFocus();
+ await user.keyboard("{Backspace}{Delete}{Control>}a{/Control}{Control>}{Shift>}p{/Shift}{/Control}");
+
+ expect(terminal).toBeInTheDocument();
+ expect(terminal).toHaveAttribute("data-selected", "true");
+ expect(note).toBeInTheDocument();
+ expect(note).not.toHaveAttribute("data-selected", "true");
+ expect(readCanvasDocument().nodes.map((node) => node.id)).toEqual([TERMINAL_NODE.id, NOTE_NODE.id]);
+ expect(screen.getByRole("region", { name: "Knowledge library" })).toBeVisible();
+ expect(screen.getByRole("region", { name: "Rules & skills" })).toBeVisible();
+ expect(screen.queryByRole("region", { name: "Prompt Composer" })).not.toBeInTheDocument();
+ expect(surface).toHaveFocus();
+ expect(props.writeTerminal).not.toHaveBeenCalled();
+ expect(props.onStartSession).not.toHaveBeenCalled();
+ expect(props.onStopSession).not.toHaveBeenCalled();
+ expect(knowledgeClient.saveKnowledge).not.toHaveBeenCalled();
+ },
+ );
+
+ it("preserves saved-content drafts while source inspection is opened, hidden and reopened", async () => {
+ const user = userEvent.setup();
+ const entry: KnowledgeSourceEntry = {
+ entryId: "rule-one", kind: "rule", provider: "codex", scope: "project",
+ sourcePath: "/workspace/jig/AGENTS.md", name: "AGENTS.md", scopeDirectory: ".",
+ precedenceHint: "Native loading depends on the CLI.", viaSymlink: false, availability: "available",
+ };
+ const knowledgeClient = createMockIpcClient({ handlers: {
+ listKnowledge: async () => ({ entries: [], nextCursor: null }),
+ discoverKnowledge: async () => ({ scanId: "canvas-scan", entries: [entry], truncated: false, issues: [] }),
+ } });
+ const { props, rerender } = renderProjectCanvas({ knowledgeClient, knowledgeConnectionKey: "connected:daemon-a" });
+ const trigger = screen.getByRole("button", { name: "Open prompts and context" });
+ await user.click(trigger);
+ const library = screen.getByRole("region", { name: "Prompts & context" });
+ await user.type(within(library).getByLabelText("Title"), "Unfinished review");
+ await user.type(within(library).getByLabelText("Content"), "Keep my unsaved instructions");
+ expect(knowledgeClient.discoverKnowledge).not.toHaveBeenCalled();
+ await user.click(screen.getByRole("button", { name: "Rules & skills" }));
+ await screen.findByRole("button", { name: entry.name });
+ expect(knowledgeClient.discoverKnowledge).toHaveBeenCalledExactlyOnceWith({ projectId: PROJECT.id });
+ expect(library).toBeInTheDocument();
+ expect(library).not.toBeVisible();
+ await user.click(screen.getByRole("button", { name: "Close knowledge library" }));
+ expect(screen.queryByRole("region", { name: "Rules & skills" })).not.toBeInTheDocument();
+ rerender((PROJECT);
+ return <>
+ setProject(PROJECT)}>Use Jig
+ setProject(OTHER_PROJECT)}>Use other project
+ ().mockResolvedValue(undefined);
+ seedCanvasDocument([TERMINAL_NODE]);
+ const { props } = renderProjectCanvas({ sessions: [LIVE_SESSION], writeTerminal });
+ const trigger = screen.getByRole("button", { name: "Open Prompt Composer for Terminal 1" });
+ await user.click(trigger);
+ expect(trigger).toHaveAttribute("aria-expanded", "true");
+ const composer = screen.getByRole("region", { name: "Prompt Composer" });
+ const editor = within(composer).getByRole("textbox", { name: "Prompt for Terminal 1" });
+ expect(editor).toHaveFocus();
+ await user.type(editor, " Review Linux{Shift>}{Enter}{/Shift}and macOS ");
+ await user.click(within(composer).getByRole("button", { name: "Send prompt" }));
+
+ expect(writeTerminal).toHaveBeenCalledExactlyOnceWith(
+ LIVE_SESSION.id,
+ new TextEncoder().encode("\x1b[200~ Review Linux\rand macOS \x1b[201~\r"),
+ );
+ expect(editor).toHaveValue("");
+ expect(readPromptDraft(TERMINAL_NODE.id)).toBe("");
+ expect(props.onCreateSession).not.toHaveBeenCalled();
+ expect(props.onStartSession).not.toHaveBeenCalled();
+ });
+
+ it.each(["disconnected", "stopped", "unattached"] as const)(
+ "allows drafting but never starts or writes a %s terminal",
+ async (availability) => {
+ const user = userEvent.setup();
+ seedCanvasDocument([{
+ ...TERMINAL_NODE,
+ sessionId: availability === "unattached" ? undefined : LIVE_SESSION.id,
+ }]);
+ const { props } = renderProjectCanvas({
+ isConnected: availability !== "disconnected",
+ sessions: availability === "unattached" ? [] : [{
+ ...LIVE_SESSION,
+ status: availability === "stopped" ? "exited" : "running",
+ }],
+ });
+ await user.click(screen.getByRole("button", { name: "Open Prompt Composer for Terminal 1" }));
+ const editor = screen.getByRole("textbox", { name: "Prompt for Terminal 1" });
+ await user.keyboard("{Enter}{ArrowUp}");
+ await user.type(editor, "Continue when ready{Enter}");
+
+ expect(editor).toHaveValue("Continue when ready");
+ expect(screen.getByRole("button", { name: "Send prompt" })).toBeDisabled();
+ expect(readPromptDraft(TERMINAL_NODE.id)).toBe("Continue when ready");
+ expect(props.writeTerminal).not.toHaveBeenCalled();
+ expect(props.onCreateSession).not.toHaveBeenCalled();
+ expect(props.onStartSession).not.toHaveBeenCalled();
+ },
+ );
+
+ it("restores the same terminal's offline draft after workspace reload", async () => {
+ const user = userEvent.setup();
+ seedCanvasDocument([TERMINAL_NODE]);
+ const first = renderProjectCanvas({ isConnected: false });
+ await user.click(screen.getByRole("button", { name: "Open Prompt Composer for Terminal 1" }));
+ await user.type(screen.getByRole("textbox", { name: "Prompt for Terminal 1" }), "Revisar a implantação");
+ await waitFor(() => expect(readPromptDraft(TERMINAL_NODE.id)).toBe("Revisar a implantação"));
+ first.unmount();
+
+ const second = renderProjectCanvas({ isConnected: false });
+ await user.click(screen.getByRole("button", { name: "Open Prompt Composer for Terminal 1" }));
+ expect(screen.getByRole("textbox", { name: "Prompt for Terminal 1" })).toHaveValue("Revisar a implantação");
+ expect(first.props.writeTerminal).not.toHaveBeenCalled();
+ expect(second.props.writeTerminal).not.toHaveBeenCalled();
+ expect(second.props.onStartSession).not.toHaveBeenCalled();
+ });
+
+ it.each([false, true])(
+ "keeps pending delivery isolated across close/reopen (revised draft: %s)",
+ async (reviseDraft) => {
+ const user = userEvent.setup();
+ const delivery = deferredPromptDelivery();
+ const writeTerminal = vi.fn().mockReturnValue(delivery.promise);
+ seedCanvasDocument([TERMINAL_NODE]);
+ renderProjectCanvas({ sessions: [LIVE_SESSION], writeTerminal });
+ const trigger = screen.getByRole("button", { name: "Open Prompt Composer for Terminal 1" });
+ await user.click(trigger);
+ await user.type(screen.getByRole("textbox", { name: "Prompt for Terminal 1" }), "Repeat{Enter}");
+ await user.click(screen.getByRole("button", { name: "Close Prompt Composer" }));
+ await user.click(trigger);
+ const editor = screen.getByRole("textbox", { name: "Prompt for Terminal 1" });
+ expect(editor).toHaveValue("Repeat");
+ await user.keyboard("{Enter}");
+ expect(writeTerminal).toHaveBeenCalledTimes(1);
+ if (reviseDraft) {
+ await user.clear(editor);
+ await user.type(editor, "Repeat");
+ }
+ await user.click(screen.getByRole("button", { name: "Close Prompt Composer" }));
+ await act(async () => delivery.complete());
+ expect(screen.queryByRole("region", { name: "Prompt Composer" })).not.toBeInTheDocument();
+ await user.click(trigger);
+
+ expect(screen.getByRole("textbox", { name: "Prompt for Terminal 1" })).toHaveValue(reviseDraft ? "Repeat" : "");
+ expect(readPromptDraft(TERMINAL_NODE.id)).toBe(reviseDraft ? "Repeat" : "");
+ expect(writeTerminal).toHaveBeenCalledTimes(1);
+ },
+ );
+
+ it("follows the primary terminal without letting the previous delivery erase its draft", async () => {
+ const user = userEvent.setup();
+ const delivery = deferredPromptDelivery();
+ const secondSession = { ...LIVE_SESSION, id: "0198f000-0000-7000-8000-000000000011", name: "Terminal 2" };
+ const secondNode = { ...TERMINAL_NODE, id: "terminal-second", title: "Terminal 2", sessionId: secondSession.id };
+ const writeTerminal = vi.fn()
+ .mockReturnValueOnce(delivery.promise).mockResolvedValue(undefined);
+ seedCanvasDocument([TERMINAL_NODE, secondNode, NOTE_NODE]);
+ renderProjectCanvas({ sessions: [LIVE_SESSION, secondSession], writeTerminal });
+ await user.click(screen.getByRole("button", { name: "Open Prompt Composer for Terminal 1" }));
+ await user.type(screen.getByRole("textbox", { name: "Prompt for Terminal 1" }), "First request{Enter}");
+ await user.click(screen.getByRole("article", { name: "Terminal 2, terminal canvas item" }));
+ const secondEditor = screen.getByRole("textbox", { name: "Prompt for Terminal 2" });
+ await user.type(secondEditor, "Second request");
+ await act(async () => delivery.complete());
+ expect(secondEditor).toHaveValue("Second request");
+ expect(readPromptDraft(TERMINAL_NODE.id)).toBe("");
+ await user.keyboard("{Enter}");
+
+ expect(writeTerminal).toHaveBeenNthCalledWith(1, LIVE_SESSION.id, new TextEncoder().encode("\x1b[200~First request\x1b[201~\r"));
+ expect(writeTerminal).toHaveBeenNthCalledWith(2, secondSession.id, new TextEncoder().encode("\x1b[200~Second request\x1b[201~\r"));
+ await user.click(screen.getByRole("article", { name: "Notes, note canvas item" }));
+ expect(screen.queryByRole("region", { name: "Prompt Composer" })).not.toBeInTheDocument();
+ });
+
+ it("hides the composer on project changes and completes only the original project's draft", async () => {
+ const user = userEvent.setup();
+ const delivery = deferredPromptDelivery();
+ const otherSession = {
+ ...LIVE_SESSION,
+ id: "0198f000-0000-7000-8000-000000000011",
+ projectId: OTHER_PROJECT.id,
+ name: "Other terminal",
+ cwd: OTHER_PROJECT.path,
+ };
+ const otherNode = {
+ ...TERMINAL_NODE, id: "terminal-other", title: "Other terminal",
+ projectId: OTHER_PROJECT.id, sessionId: otherSession.id,
+ };
+ const writeTerminal = vi.fn().mockReturnValue(delivery.promise);
+ seedCanvasDocument([{ ...TERMINAL_NODE, projectId: PROJECT.id }, otherNode]);
+ const props = createProjectCanvasProps({
+ projects: [PROJECT, OTHER_PROJECT], sessions: [LIVE_SESSION, otherSession], writeTerminal,
+ });
+ function ProjectSwitcher() {
+ const [project, setProject] = useState(PROJECT);
+ return <>
+ setProject(OTHER_PROJECT)}>Switch project
+ ().mockResolvedValue(undefined);
+ seedCanvasDocument([TERMINAL_NODE]);
+ renderProjectCanvas({ sessions: [LIVE_SESSION], writeTerminal });
+ const terminal = screen.getByRole("article", { name: "Terminal 1, terminal canvas item" });
+ await user.click(terminal);
+ const shortcut = { key: "P", shiftKey: true, [modifier]: true };
+ fireEvent.keyDown(terminal, { ...shortcut, repeat: true });
+ fireEvent.keyDown(terminal, { ...shortcut, isComposing: true });
+ expect(screen.queryByRole("region", { name: "Prompt Composer" })).not.toBeInTheDocument();
+ fireEvent.keyDown(terminal, shortcut);
+ const editor = screen.getByRole("textbox", { name: "Prompt for Terminal 1" });
+ await user.type(editor, "Intentional request");
+ fireEvent.compositionStart(editor);
+ fireEvent.keyDown(editor, shortcut);
+ expect(editor).toBeVisible();
+ fireEvent.compositionEnd(editor);
+ fireEvent.keyDown(editor, { key: "Enter", repeat: true });
+ fireEvent.keyDown(editor, { key: "Enter", isComposing: true });
+ fireEvent.keyDown(editor, { key: "Enter", keyCode: 229 });
+ expect(writeTerminal).not.toHaveBeenCalled();
+ expect(editor).toHaveValue("Intentional request");
+ await user.keyboard("{Enter}");
+ expect(writeTerminal).toHaveBeenCalledExactlyOnceWith(LIVE_SESSION.id, new TextEncoder().encode("\x1b[200~Intentional request\x1b[201~\r"));
+ fireEvent.keyDown(editor, shortcut);
+ expect(screen.queryByRole("region", { name: "Prompt Composer" })).not.toBeInTheDocument();
+ const toolbarTrigger = screen.getByRole("button", { name: "Toggle Prompt Composer" });
+ await user.click(toolbarTrigger);
+ expect(screen.getByRole("textbox", { name: "Prompt for Terminal 1" })).toHaveValue("");
+ await user.keyboard("{Escape}");
+ expect(toolbarTrigger).toHaveFocus();
+ fireEvent.keyDown(toolbarTrigger, shortcut);
+ expect(screen.getByRole("textbox", { name: "Prompt for Terminal 1" })).toHaveFocus();
+ });
+
+ it("forwards intentional empty-editor keys as terminal input", async () => {
+ const user = userEvent.setup();
+ const writeTerminal = vi.fn().mockResolvedValue(undefined);
+ seedCanvasDocument([TERMINAL_NODE]);
+ renderProjectCanvas({ sessions: [LIVE_SESSION], writeTerminal });
+ await user.click(screen.getByRole("button", { name: "Open Prompt Composer for Terminal 1" }));
+ for (const key of ["Enter", "Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]) {
+ await user.keyboard(`{${key}}`);
+ }
+ expect(writeTerminal.mock.calls.map(([sessionId, bytes]) => [sessionId, new TextDecoder().decode(bytes)])).toEqual(
+ ["\r", "\t", "\x1b[A", "\x1b[B", "\x1b[D", "\x1b[C"].map((text) => [LIVE_SESSION.id, text]),
+ );
+ expect(screen.getByRole("textbox", { name: "Prompt for Terminal 1" })).toHaveValue("");
+ });
+
+ it("inserts only connected context snapshots and sends them only on explicit submission", async () => {
+ const user = userEvent.setup();
+ const writeTerminal = vi.fn().mockResolvedValue(undefined);
+ seedCanvasDocument([
+ TERMINAL_NODE, NOTE_NODE, { ...BROWSER_NODE, url: "docs.example.com/guide" },
+ { ...NOTE_NODE, id: "unconnected-note", title: "Unconnected", text: "Not selected as context" },
+ ], [
+ { id: "terminal-note", sourceNodeId: TERMINAL_NODE.id, targetNodeId: NOTE_NODE.id },
+ { id: "browser-terminal", sourceNodeId: BROWSER_NODE.id, targetNodeId: TERMINAL_NODE.id },
+ ]);
+ const { props } = renderProjectCanvas({ sessions: [LIVE_SESSION], writeTerminal });
+ await user.click(screen.getByRole("button", { name: "Open Prompt Composer for Terminal 1" }));
+ const composer = screen.getByRole("region", { name: "Prompt Composer" });
+ await user.click(within(composer).getByText(/Insert context/));
+ expect(within(composer).queryByRole("button", { name: "Insert context from Unconnected" })).not.toBeInTheDocument();
+ await user.click(within(composer).getByRole("button", { name: "Insert context from Notes" }));
+ await user.click(within(composer).getByRole("button", { name: "Insert context from Browser URL" }));
+ const editor = within(composer).getByRole("textbox", { name: "Prompt for Terminal 1" });
+ const draft = (editor as HTMLTextAreaElement).value;
+ expect(draft).toContain("Context snapshot: Notes\nReview the integration\n");
+ expect(draft).toContain("Context snapshot: Browser URL\nhttps://docs.example.com/guide\n");
+ fireEvent.change(within(screen.getByRole("article", { name: "Notes, note canvas item" })).getByRole("textbox"), {
+ target: { value: "Changed after insertion" },
+ });
+ expect(editor).toHaveValue(draft);
+ expect(writeTerminal).not.toHaveBeenCalled();
+ expect(props.onCreateSession).not.toHaveBeenCalled();
+ expect(props.onStartSession).not.toHaveBeenCalled();
+ await user.click(within(composer).getByRole("button", { name: "Send prompt" }));
+ expect(writeTerminal).toHaveBeenCalledExactlyOnceWith(LIVE_SESSION.id, new TextEncoder().encode(`\x1b[200~${draft.replace(/\n/g, "\r")}\x1b[201~\r`));
+ });
+
+ it("preserves a rejected transport write for an explicit retry", async () => {
+ const user = userEvent.setup();
+ const writeTerminal = vi.fn()
+ .mockRejectedValueOnce(new Error("Socket disconnected")).mockResolvedValue(undefined);
+ seedCanvasDocument([TERMINAL_NODE]);
+ renderProjectCanvas({ sessions: [LIVE_SESSION], writeTerminal });
+ await user.click(screen.getByRole("button", { name: "Open Prompt Composer for Terminal 1" }));
+ const editor = screen.getByRole("textbox", { name: "Prompt for Terminal 1" });
+ await user.type(editor, "Keep for retry{Enter}");
+ expect(screen.getByRole("alert")).toHaveTextContent("Could not send the prompt");
+ expect(editor).toHaveValue("Keep for retry");
+ expect(readPromptDraft(TERMINAL_NODE.id)).toBe("Keep for retry");
+ await user.click(screen.getByRole("button", { name: "Try again" }));
+ expect(writeTerminal).toHaveBeenCalledTimes(2);
+ expect(writeTerminal).toHaveBeenLastCalledWith(LIVE_SESSION.id, new TextEncoder().encode("\x1b[200~Keep for retry\x1b[201~\r"));
+ expect(editor).toHaveValue("");
+ });
+ });
+
it("renders the first-launch terminal and note composition", () => {
const { container } = renderCanvas();
@@ -177,6 +746,7 @@ describe("CanvasWorkspace", () => {
status: "running",
pid: 123,
});
+ const onSelectSession = vi.fn();
render(
{
project={PROJECT}
agents={[SHELL_AGENT]}
sessions={[]}
- onAddProject={vi.fn()}
- onNewSession={vi.fn()}
- onSelectSession={vi.fn()}
+ worktrees={[]}
+ sessionFocusRevision={0}
+ onSelectSession={onSelectSession}
onCreateCustomAgent={vi.fn()}
onCreateSession={onCreateSession}
onStartSession={onStartSession}
+ onRestartSession={vi.fn()}
+ onRenameSession={vi.fn()}
+ onStopSession={vi.fn()}
+ onDeleteSession={vi.fn()}
+ onRemoveWorktree={vi.fn()}
+ onGitStatus={vi.fn()}
+ onOpenPath={vi.fn()}
subscribeTerminal={vi.fn()}
writeTerminal={vi.fn()}
resizeTerminal={vi.fn()}
@@ -212,6 +789,7 @@ describe("CanvasWorkspace", () => {
relativeDirectory: undefined,
});
expect(onStartSession).toHaveBeenCalledWith(createdSession.id);
+ expect(onSelectSession).toHaveBeenCalledWith(createdSession.id);
});
const persisted = JSON.parse(
localStorage.getItem(CANVAS_STORAGE_KEY) ?? "{}",
@@ -250,6 +828,38 @@ describe("CanvasWorkspace", () => {
});
});
+ it("prepares an isolated checkout before explicitly starting its returned session", async () => {
+ const user = userEvent.setup();
+ const session: Session = {
+ id: "isolated-session", projectId: PROJECT.id, agentId: SHELL_AGENT.id, name: "Shell",
+ cwd: "/managed/worktrees/review/tools", worktreeId: "isolated-worktree",
+ worktreePath: "/managed/worktrees/review", status: "unknown", createdAtMs: 1, updatedAtMs: 1,
+ };
+ let resolveCreate!: (value: Session) => void;
+ const prepared = new Promise((resolve) => { resolveCreate = resolve; });
+ const { props } = renderProjectCanvas({
+ onCreateSession: vi.fn(() => prepared),
+ onStartSession: vi.fn(async () => ({ ...session, status: "running" as const })),
+ });
+ await user.click(screen.getByRole("button", { name: "Add terminal card" }));
+ const dialog = screen.getByRole("dialog", { name: "New Terminal" });
+ await user.selectOptions(within(dialog).getByRole("combobox", { name: "Working copy" }), "new_worktree");
+ await user.clear(within(dialog).getByLabelText("Working directory"));
+ await user.type(within(dialog).getByLabelText("Working directory"), `${PROJECT.path}/tools`);
+ await user.click(within(dialog).getByRole("button", { name: "Create terminal" }));
+ await waitFor(() => expect(props.onCreateSession).toHaveBeenCalledExactlyOnceWith({
+ projectId: PROJECT.id, name: "Shell", agentId: SHELL_AGENT.id,
+ isolation: "new_worktree", relativeDirectory: "tools",
+ }));
+ expect(props.onStartSession).not.toHaveBeenCalled();
+ await act(async () => { resolveCreate(session); await prepared; });
+ await waitFor(() => expect(props.onStartSession).toHaveBeenCalledExactlyOnceWith(session.id));
+ const saved = parseCanvasDocument(localStorage.getItem(CANVAS_STORAGE_KEY));
+ expect(saved.nodes).toContainEqual(expect.objectContaining({
+ isolation: "new_worktree", sessionId: session.id, projectId: PROJECT.id,
+ }));
+ });
+
it("adds an integrated browser card to the persisted canvas", async () => {
const user = userEvent.setup();
const { container } = renderCanvas();
@@ -383,7 +993,7 @@ describe("CanvasWorkspace", () => {
async () => undefined,
);
seedCanvasDocument([{ ...BROWSER_NODE, url: browserUrl }, TERMINAL_NODE]);
- renderCanvas({
+ renderProjectCanvas({
sessions: [LIVE_SESSION],
writeTerminal,
subscribeTerminal: vi.fn(async () => vi.fn()),
@@ -440,7 +1050,7 @@ describe("CanvasWorkspace", () => {
await user.click(browser);
const webPage = within(browser).getByRole("region", { name: "Web page" });
await waitFor(() => {
- expect(browser).toHaveAttribute("aria-selected", "true");
+ expect(browser).toHaveAttribute("data-selected", "true");
expect(webPage).toHaveAttribute("data-native-browser-visible", "true");
});
@@ -592,6 +1202,94 @@ describe("CanvasWorkspace", () => {
expect(webPage).toHaveAttribute("data-native-browser-visible", "true");
});
+ it("keeps only the primary browser active during group selection and movement", async () => {
+ const user = userEvent.setup();
+ const runtime = createAvailableBrowserRuntime();
+ stubVisibleBrowserGeometry();
+ seedCanvasDocument([
+ BROWSER_NODE,
+ { ...BROWSER_NODE, id: "browser-second", title: "Preview", x: 840 },
+ ]);
+ renderCanvas({ browserRuntime: runtime });
+ const browser = screen.getByRole("article", { name: "Browser, browser canvas item" });
+ const preview = screen.getByRole("article", { name: "Preview, browser canvas item" });
+ const firstPage = within(browser).getByRole("region", { name: "Web page" });
+ const secondPage = within(preview).getByRole("region", { name: "Web page" });
+
+ await user.click(browser);
+ await waitFor(() => expect(firstPage).toHaveAttribute("data-native-browser-visible", "true"));
+ await user.keyboard("{Shift>}");
+ await user.click(preview);
+ await user.keyboard("{/Shift}");
+
+ expect(browser).toHaveAttribute("data-selected", "true");
+ expect(preview).toHaveAttribute("data-selected", "true");
+ await waitFor(() => {
+ expect(firstPage).toHaveAttribute("data-native-browser-visible", "false");
+ expect(secondPage).toHaveAttribute("data-native-browser-visible", "true");
+ expect(runtime.close).toHaveBeenCalledWith({ nodeId: BROWSER_NODE.id });
+ });
+ expect(runtime.open).toHaveBeenCalledTimes(2);
+
+ const header = within(preview).getByLabelText("Move Preview");
+ fireEvent.pointerDown(header, { pointerId: 51, button: 0, clientX: 100, clientY: 100 });
+ fireEvent.pointerMove(header, { pointerId: 51, clientX: 124, clientY: 116 });
+ expect(secondPage).toHaveAttribute("data-native-browser-visible", "false");
+ expect(readNodePosition(BROWSER_NODE.id)).toEqual({ x: 184, y: 136 });
+ expect(readNodePosition("browser-second")).toEqual({ x: 864, y: 136 });
+ fireEvent.pointerUp(header, { pointerId: 51 });
+ await waitFor(() => expect(secondPage).toHaveAttribute("data-native-browser-visible", "true"));
+
+ await user.click(screen.getByRole("button", { name: "Duplicate selected canvas items" }));
+ expect(screen.getAllByRole("article", { name: /browser canvas item/ })).toHaveLength(4);
+ await waitFor(() => expect(runtime.open).toHaveBeenCalledTimes(3));
+ expect(runtime.close).toHaveBeenCalledWith({ nodeId: "browser-second" });
+ expect(document.querySelectorAll('[data-native-browser-visible="true"]')).toHaveLength(1);
+ });
+
+ it("scopes browsers and URL search to the selected project and hides the surface while searching", async () => {
+ const user = userEvent.setup();
+ const runtime = createAvailableBrowserRuntime();
+ stubVisibleBrowserGeometry();
+ seedCanvasDocument([
+ { ...BROWSER_NODE, projectId: PROJECT.id },
+ { ...BROWSER_NODE, id: "other-browser", title: "Private preview", projectId: OTHER_PROJECT.id, url: "https://other.example.com/private" },
+ ]);
+ const { props, rerender } = renderProjectCanvas({
+ projects: [PROJECT, OTHER_PROJECT],
+ browserRuntime: runtime,
+ });
+ const browser = screen.getByRole("article", { name: "Browser, browser canvas item" });
+ const webPage = within(browser).getByRole("region", { name: "Web page" });
+ expect(screen.queryByRole("article", { name: /Private preview/ })).not.toBeInTheDocument();
+ expect(screen.getByText(/1 browsers/)).toBeVisible();
+ await user.click(browser);
+ await waitFor(() => expect(webPage).toHaveAttribute("data-native-browser-visible", "true"));
+
+ await user.click(screen.getByRole("button", { name: "Show canvas items" }));
+ expect(webPage).toHaveAttribute("data-native-browser-visible", "false");
+ expect(screen.getByRole("region", { name: "Canvas items" })).toHaveAttribute("data-browser-obstruction", "true");
+ const search = screen.getByRole("searchbox", { name: "Search canvas items" });
+ await user.type(search, "docs.example.com guide");
+ expect(screen.getByRole("button", { name: /Browser https:\/\/docs.example.com/ })).toBeVisible();
+ await user.clear(search);
+ await user.type(search, "other.example.com");
+ expect(screen.getByText(/No matching items/)).toBeVisible();
+ await user.keyboard("{Escape}");
+ expect(screen.getByRole("button", { name: "Show canvas items" })).toHaveFocus();
+ await waitFor(() => expect(webPage).toHaveAttribute("data-native-browser-visible", "true"));
+
+ await user.click(screen.getByRole("button", { name: "Add browser" }));
+ const added = readCanvasDocument().nodes.find((node) => node.kind === "browser" && node.url === "");
+ expect(added).toEqual(expect.objectContaining({ projectId: PROJECT.id }));
+ rerender((".canvas-viewport");
+ expect(viewport).not.toBeNull();
+ viewport!.scrollLeft = 2_000;
+ viewport!.scrollTop = 1_500;
+ const note = screen.getByRole("textbox", { name: "Notes content" });
+
+ expect(fireEvent.keyDown(note, { key: "ArrowLeft" })).toBe(true);
+ expect(fireEvent.keyDown(note, { key: "ArrowUp" })).toBe(true);
+
+ expect(viewport!.scrollLeft).toBe(2_000);
+ expect(viewport!.scrollTop).toBe(1_500);
+ });
+
+ it("uses one compact terminal width for rendering and connection geometry", async () => {
+ const user = userEvent.setup();
+ const view = renderProjectCanvas({ isCompact: true });
+ const viewport = view.container.querySelector(
+ ".canvas-viewport",
+ );
+ expect(viewport).not.toBeNull();
+ Object.defineProperty(viewport, "clientWidth", {
+ configurable: true,
+ value: 320,
+ });
+ fireEvent(window, new Event("resize"));
+ const terminal = screen.getByRole("article", {
+ name: "Terminal 1, terminal canvas item",
+ });
+
+ await waitFor(() => {
+ expect(Number.parseFloat(terminal.style.width)).toBeCloseTo(272);
+ expect(connectionEndpointX(view.container)).toBeCloseTo(442);
+ });
+
+ await user.click(terminal);
+ const resize = within(terminal).getByRole("button", {
+ name: "Resize Terminal 1",
+ });
+ fireEvent.keyDown(resize, { key: "ArrowRight" });
+ await waitFor(() => {
+ expect(readTerminalSize("terminal-primary").width).toBe(448);
+ });
+ fireEvent.pointerDown(resize, {
+ pointerId: 73,
+ clientX: 100,
+ clientY: 100,
+ });
+ fireEvent.pointerMove(resize, {
+ pointerId: 73,
+ clientX: 110,
+ clientY: 100,
+ });
+ fireEvent.pointerUp(resize, { pointerId: 73 });
+ await waitFor(() => {
+ expect(readTerminalSize("terminal-primary").width).toBe(458);
+ });
+ expect(Number.parseFloat(terminal.style.width)).toBeCloseTo(272);
+
+ const zoomIn = screen.getByRole("button", { name: "Zoom in" });
+ for (let step = 0; step < 5; step += 1) {
+ await user.click(zoomIn);
+ }
+ await waitFor(() => {
+ const modelWidth = Number.parseFloat(terminal.style.width);
+ expect(modelWidth).toBeCloseTo(272 / 1.5);
+ expect(modelWidth * 1.5).toBeCloseTo(272);
+ expect(connectionEndpointX(view.container)).toBeCloseTo(
+ 170 + 272 / 1.5,
+ );
+ });
+ expect(
+ readCanvasDocument().nodes.find((node) => node.id === "terminal-primary"),
+ ).toEqual(expect.objectContaining({ width: 458 }));
+
+ view.rerender(
+ (
+ ".canvas-viewport",
+ );
+ expect(viewport).not.toBeNull();
+ const scrollTo = vi.fn();
+ Object.defineProperties(viewport, {
+ clientWidth: { configurable: true, value: 320 },
+ clientHeight: { configurable: true, value: 640 },
+ scrollTo: { configurable: true, value: scrollTo },
+ });
+ fireEvent(window, new Event("resize"));
+ const terminal = screen.getByRole("article", {
+ name: "Wide terminal, terminal canvas item",
+ });
+
+ await user.click(screen.getByRole("button", { name: "Fit canvas to items" }));
+
+ await waitFor(() => {
+ expect(screen.getByText("50%")).toBeVisible();
+ expect(Number.parseFloat(terminal.style.width) * 0.5).toBeCloseTo(272);
+ expect(scrollTo).toHaveBeenLastCalledWith(
+ expect.objectContaining({ left: 1_476, top: 1_244 }),
+ );
+ });
+ });
+
it("removes a selected item's connection from the inspector", async () => {
const user = userEvent.setup();
const { container } = renderCanvas();
@@ -760,39 +1780,770 @@ describe("CanvasWorkspace", () => {
container.querySelectorAll("[data-connection-id]"),
).toHaveLength(1);
});
+
+ it("reconciles every selected-project session and hides attached nodes from other projects", async () => {
+ const user = userEvent.setup();
+ const otherSession: Session = {
+ ...STOPPED_SESSION,
+ id: "0198f000-0000-7000-8000-000000000011",
+ projectId: OTHER_PROJECT.id,
+ name: "Other agent",
+ cwd: OTHER_PROJECT.path,
+ worktreeId: undefined,
+ worktreePath: undefined,
+ };
+ const view = renderProjectCanvas({
+ projects: [PROJECT, OTHER_PROJECT],
+ sessions: [STOPPED_SESSION, otherSession],
+ });
+
+ const projectTerminal = await screen.findByRole("article", {
+ name: "Review agent, terminal canvas item",
+ });
+ expect(projectTerminal).toBeVisible();
+ await user.click(projectTerminal);
+ expect(projectTerminal).toHaveAttribute("data-selected", "true");
+ expect(
+ screen.queryByRole("article", {
+ name: "Other agent, terminal canvas item",
+ }),
+ ).not.toBeInTheDocument();
+
+ view.rerender(
+ > = {},
+) {
+ const props: ComponentProps = {
+ isConnected: true,
+ projects: [],
+ agents: [],
+ sessions: [],
+ worktrees: [],
+ sessionFocusRevision: 0,
+ onSelectSession: vi.fn(),
+ onCreateCustomAgent: vi.fn(),
+ onCreateSession: vi.fn(),
+ onStartSession: vi.fn(),
+ onRestartSession: vi.fn(),
+ onRenameSession: vi.fn(),
+ onStopSession: vi.fn(),
+ onDeleteSession: vi.fn(),
+ onRemoveWorktree: vi.fn(),
+ onGitStatus: vi.fn(),
+ onOpenPath: vi.fn(),
+ subscribeTerminal: vi.fn(),
+ writeTerminal: vi.fn(),
+ resizeTerminal: vi.fn(),
+ ...overrides,
+ };
+ return { ...render( undefined)}
- browserRuntime={browserRuntime}
- />,
- );
+function renderProjectCanvas(
+ overrides: Partial> = {},
+) {
+ const props = createProjectCanvasProps(overrides);
+ return { ...render(> = {},
+): ComponentProps {
+ return {
+ isConnected: true,
+ projects: [PROJECT],
+ project: PROJECT,
+ agents: [SHELL_AGENT],
+ sessions: [],
+ worktrees: [],
+ sessionFocusRevision: 0,
+ onSelectSession: vi.fn(),
+ onCreateCustomAgent: vi.fn().mockResolvedValue(SHELL_AGENT),
+ onCreateSession: vi.fn().mockResolvedValue(STOPPED_SESSION),
+ onStartSession: vi.fn().mockResolvedValue(STOPPED_SESSION),
+ onRestartSession: vi.fn().mockResolvedValue(STOPPED_SESSION),
+ onRenameSession: vi.fn(),
+ onStopSession: vi.fn(),
+ onDeleteSession: vi.fn(),
+ onRemoveWorktree: vi.fn(),
+ onGitStatus: vi.fn(),
+ onOpenPath: vi.fn().mockResolvedValue(undefined),
+ subscribeTerminal: vi.fn(),
+ writeTerminal: vi.fn(),
+ resizeTerminal: vi.fn(),
+ ...overrides,
+ };
+}
+
+function readCanvasDocument(): CanvasDocument {
+ const document = parseCanvasDocument(localStorage.getItem(CANVAS_STORAGE_KEY));
+ if (!document) throw new Error("Expected a persisted canvas document.");
+ return document;
+}
+
+function readPromptDraft(nodeId: string): string {
+ const node = readCanvasDocument().nodes.find((candidate) => candidate.id === nodeId);
+ if (node?.kind !== "terminal") throw new Error(`Expected terminal ${nodeId}.`);
+ return node.promptDraft ?? "";
+}
+
+function knowledgeEntry(overrides: Partial = {}): KnowledgeRecord {
+ return {
+ id: "knowledge-review", kind: "prompt", projectId: null,
+ title: "Review changes", body: "Review the diff.\n", revision: 3,
+ createdAtMs: 1, updatedAtMs: 2, ...overrides,
+ };
+}
+
+async function ensureKnowledgeLibraryOpen(user: ReturnType) {
+ if (!screen.queryByRole("region", { name: "Knowledge library" })) {
+ await user.click(screen.getByRole("button", { name: "Open prompts and context" }));
+ }
+}
+
+function deferredPromptDelivery() {
+ let complete: () => void = () => {};
+ const promise = new Promise((resolve) => { complete = resolve; });
+ return { promise, complete };
+}
+
+function connectionEndpointX(container: HTMLElement): number {
+ const path = container.querySelector("[data-connection-id] path");
+ const coordinates = path?.getAttribute("d")?.match(/-?\d+(?:\.\d+)?/g);
+ if (!coordinates || coordinates.length < 2) {
+ throw new Error("Expected a rendered canvas connection path.");
+ }
+ return Number(coordinates[coordinates.length - 2]);
}
function seedCanvasDocument(
@@ -804,16 +2555,11 @@ function seedCanvasDocument(
nodes,
connections,
zoom: 1,
+ hiddenSessionIds: [],
};
localStorage.setItem(CANVAS_STORAGE_KEY, JSON.stringify(document));
}
-function readCanvasDocument(): CanvasDocument {
- return JSON.parse(
- localStorage.getItem(CANVAS_STORAGE_KEY) ?? "{}",
- ) as CanvasDocument;
-}
-
function createAvailableBrowserRuntime(): BrowserRuntime {
return {
isAvailable: () => true,
diff --git a/apps/desktop/src/app/features/canvas/CanvasWorkspace.tsx b/apps/desktop/src/app/features/canvas/CanvasWorkspace.tsx
index 51d3f3c..83b2e78 100644
--- a/apps/desktop/src/app/features/canvas/CanvasWorkspace.tsx
+++ b/apps/desktop/src/app/features/canvas/CanvasWorkspace.tsx
@@ -1,11 +1,24 @@
-import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+ useCallback,
+ useEffect,
+ useId,
+ useLayoutEffect,
+ useMemo,
+ useRef,
+ useState,
+ useSyncExternalStore,
+} from "react";
+import type { Ref } from "react";
+import type { IpcClient } from "../../../ipc/client";
import type {
AgentRecord,
+ ApiErrorData,
CreateCustomAgentInput,
CreateSessionInput,
Project,
Session,
+ Worktree,
} from "../../../ipc/types";
import { Icon } from "../../components/Icon";
import { StatusBadge } from "../../components/StatusBadge";
@@ -17,8 +30,11 @@ import {
import {
createCanvasNode,
createInitialCanvasDocument,
+ createSessionTerminalCanvasNode,
createTerminalCanvasNode,
+ duplicateCanvasSelection,
getCanvasNodeSize,
+ normalizeBrowserUrl,
type BrowserCanvasNode,
type CanvasTerminalConfiguration,
type CanvasNode,
@@ -30,6 +46,9 @@ import {
browserUrlForTerminal,
} from "./browser-handoff";
import { CanvasConnections } from "./CanvasConnections";
+import { CanvasKnowledgePanel } from "./CanvasKnowledgePanel";
+import type { KnowledgeInsertion } from "../knowledge/knowledge-types";
+import { CanvasElementSearch } from "./CanvasElementSearch";
import {
CANVAS_ORIGIN_X,
CANVAS_ORIGIN_Y,
@@ -37,54 +56,98 @@ import {
toStagePoint,
} from "./canvas-geometry";
import { NewCanvasTerminalDialog } from "./NewCanvasTerminalDialog";
+import { PromptComposer } from "./PromptComposer";
+import type { PromptContextItem, PromptTerminalKey } from "./PromptComposer";
+import { encodePromptInput, encodePromptTerminalKey, getPromptInputError } from "./prompt-input";
import { useCanvasState } from "./useCanvasState";
import {
LiveTerminal,
+ type LiveTerminalInputHandle,
type LiveTerminalTransport,
} from "../terminal/LiveTerminal";
-import { isLiveStatus } from "../../utils";
+import type { TerminalInputModes } from "../terminal/terminal-runtime";
+import { errorData, isLiveStatus } from "../../utils";
+
+export interface CanvasSessionFocusRequest {
+ readonly sessionId: string;
+ readonly revision: number;
+}
interface CanvasWorkspaceProps extends LiveTerminalTransport {
+ readonly isCompact?: boolean;
readonly isConnected: boolean;
readonly projects: readonly Project[];
readonly project?: Project;
readonly agents: readonly AgentRecord[];
readonly sessions: readonly Session[];
- readonly onAddProject: () => void;
- readonly onNewSession: () => void;
- readonly onSelectSession: (sessionId: string) => void;
+ readonly worktrees: readonly Worktree[];
+ readonly selectedSessionId?: string;
+ readonly sessionFocusRevision: number;
+ readonly onSelectSession: (sessionId: string | null) => void;
readonly onCreateCustomAgent: (
input: CreateCustomAgentInput,
) => Promise;
readonly onCreateSession: (input: CreateSessionInput) => Promise;
readonly onStartSession: (sessionId: string) => Promise;
+ readonly onRestartSession: (sessionId: string) => Promise;
+ readonly onRenameSession: (sessionId: string) => void;
+ readonly onStopSession: (sessionId: string) => void;
+ readonly onDeleteSession: (sessionId: string) => void;
+ readonly onRemoveWorktree: (worktreeId: string) => void;
+ readonly onGitStatus: (sessionId: string) => void;
+ readonly onOpenPath: (path: string) => Promise;
readonly browserRuntime?: BrowserRuntime;
+ readonly knowledgeClient?: Pick;
+ readonly knowledgeConnectionKey?: string;
+ readonly knowledgeOpenRevision?: number;
}
const ZOOM_STEP = 0.1;
+const COMPACT_TERMINAL_GUTTER_PX = 48;
const SCROLL_SETTLE_DELAY_MS = 160;
/** Spatial terminal and notes workspace inspired by the supplied references. */
export function CanvasWorkspace({
+ isCompact = false,
isConnected,
projects,
project,
agents,
sessions,
- onAddProject,
- onNewSession,
+ worktrees,
+ selectedSessionId,
+ sessionFocusRevision,
onSelectSession,
onCreateCustomAgent,
onCreateSession,
onStartSession,
+ onRestartSession,
+ onRenameSession,
+ onStopSession,
+ onDeleteSession,
+ onRemoveWorktree,
+ onGitStatus,
+ onOpenPath,
browserRuntime = defaultBrowserRuntime,
+ knowledgeClient,
+ knowledgeConnectionKey,
+ knowledgeOpenRevision = 0,
subscribeTerminal,
writeTerminal,
resizeTerminal,
}: CanvasWorkspaceProps) {
const { state, dispatch, persistenceAvailable } = useCanvasState();
const viewportRef = useRef(null);
+ const viewportWidth = useElementWidth(viewportRef);
const viewportInitializedRef = useRef(false);
+ const nodeElementsRef = useRef(new Map());
+ const handledFocusRequestRef = useRef(null);
+ const focusSelectionRef = useRef(false);
+ const layersTriggerRef = useRef(null);
+ const terminalInputsRef = useRef(new Map());
+ const pendingComposerInputRef = useRef(new Set());
+ const canvasComposingRef = useRef(false);
+ const handledKnowledgeRequestRef = useRef(0);
const panRef = useRef<{
readonly pointerId: number;
readonly clientX: number;
@@ -96,6 +159,12 @@ export function CanvasWorkspace({
null,
);
const [layersOpen, setLayersOpen] = useState(false);
+ const [composerOpen, setComposerOpen] = useState(false);
+ const [knowledgeOpen, setKnowledgeOpen] = useState(false);
+ const [knowledgeVisited, setKnowledgeVisited] = useState(false);
+ const [pendingComposerNodes, setPendingComposerNodes] = useState>(
+ () => new Set(),
+ );
const [terminalDialogOpen, setTerminalDialogOpen] = useState(false);
const [pendingTerminals, setPendingTerminals] = useState>(
() => new Set(),
@@ -112,21 +181,279 @@ export function CanvasWorkspace({
() => new Map(sessions.map((session) => [session.id, session])),
[sessions],
);
- const selectedNode = state.nodes.find(
+ const projectSessions = useMemo(
+ () =>
+ project
+ ? sessions.filter((session) => session.projectId === project.id)
+ : [],
+ [project, sessions],
+ );
+ const hiddenSessionIds = useMemo(
+ () => new Set(state.hiddenSessionIds),
+ [state.hiddenSessionIds],
+ );
+ const storedVisibleNodes = useMemo(
+ () =>
+ state.nodes.filter((node) => {
+ if (
+ node.kind === "terminal" &&
+ node.sessionId &&
+ hiddenSessionIds.has(node.sessionId)
+ ) {
+ return false;
+ }
+ const session =
+ node.kind === "terminal" && node.sessionId
+ ? terminalSessions.get(node.sessionId)
+ : undefined;
+ const nodeProjectId = session?.projectId ?? node.projectId;
+ return !nodeProjectId || nodeProjectId === project?.id;
+ }),
+ [hiddenSessionIds, project?.id, state.nodes, terminalSessions],
+ );
+ const visibleNodes = useMemo(
+ () =>
+ effectiveCanvasNodes(
+ storedVisibleNodes,
+ isCompact,
+ viewportWidth,
+ state.zoom,
+ ),
+ [isCompact, state.zoom, storedVisibleNodes, viewportWidth],
+ );
+ const storedVisibleNodesById = useMemo(
+ () => new Map(storedVisibleNodes.map((node) => [node.id, node])),
+ [storedVisibleNodes],
+ );
+ const visibleNodeIds = useMemo(
+ () => new Set(visibleNodes.map((node) => node.id)),
+ [visibleNodes],
+ );
+ const visibleConnections = useMemo(
+ () =>
+ state.connections.filter(
+ (connection) =>
+ visibleNodeIds.has(connection.sourceNodeId) &&
+ visibleNodeIds.has(connection.targetNodeId),
+ ),
+ [state.connections, visibleNodeIds],
+ );
+ const visibleConnectionSourceId =
+ state.connectionSourceId && visibleNodeIds.has(state.connectionSourceId)
+ ? state.connectionSourceId
+ : null;
+ const selectedNode = visibleNodes.find(
(node) => node.id === state.selectedNodeId,
);
+ const composerNode = composerOpen && selectedNode?.kind === "terminal"
+ ? selectedNode
+ : undefined;
+ const composerSession = composerNode?.sessionId
+ ? terminalSessions.get(composerNode.sessionId)
+ : undefined;
+ const composerDisabledReason = composerNode
+ ? !isConnected
+ ? "Reconnect to the daemon to send input. You can keep drafting."
+ : !composerSession
+ ? "Attach a running session to send input. You can keep drafting."
+ : !isLiveStatus(composerSession.status)
+ ? "This terminal is stopped. Start it to send input."
+ : pendingComposerNodes.has(composerNode.id)
+ ? "Input is being delivered to this terminal. You can keep drafting."
+ : composerNode.promptDraft?.trim()
+ ? getPromptInputError(composerNode.promptDraft)
+ : undefined
+ : undefined;
+ const selectedNodeIds = state.selectedNodeIds.filter((id) =>
+ visibleNodeIds.has(id),
+ );
const selectedConnections = selectedNode
- ? state.connections.flatMap((connection) => {
+ ? visibleConnections.flatMap((connection) => {
const otherNodeId =
connection.sourceNodeId === selectedNode.id
? connection.targetNodeId
: connection.targetNodeId === selectedNode.id
? connection.sourceNodeId
: null;
- const otherNode = state.nodes.find((node) => node.id === otherNodeId);
+ const otherNode = visibleNodes.find((node) => node.id === otherNodeId);
return otherNode ? [{ connection, otherNode }] : [];
})
: [];
+ const composerContextItems: readonly PromptContextItem[] = composerNode
+ ? selectedConnections.flatMap(({ otherNode }) => {
+ if (otherNode.kind === "note") {
+ return [{ id: otherNode.id, title: otherNode.title, text: otherNode.text }];
+ }
+ if (otherNode.kind === "browser") {
+ const url = normalizeBrowserUrl(otherNode.url);
+ return url ? [{ id: otherNode.id, title: `${otherNode.title} URL`, text: url }] : [];
+ }
+ return [];
+ })
+ : [];
+ const registerTerminalInput = useCallback((nodeId: string, handle: LiveTerminalInputHandle | null) => {
+ if (handle) terminalInputsRef.current.set(nodeId, handle);
+ else terminalInputsRef.current.delete(nodeId);
+ }, []);
+ useLayoutEffect(() => {
+ if (!knowledgeClient || knowledgeOpenRevision <= handledKnowledgeRequestRef.current) return;
+ handledKnowledgeRequestRef.current = knowledgeOpenRevision;
+ setKnowledgeVisited(true);
+ setKnowledgeOpen(true);
+ setLayersOpen(false);
+ }, [knowledgeClient, knowledgeOpenRevision]);
+ const sessionCanvasTopologyKey = useMemo(
+ () =>
+ JSON.stringify({
+ attachedSessionIds: state.nodes.flatMap((node) =>
+ node.kind === "terminal" && node.sessionId ? [node.sessionId] : [],
+ ),
+ hiddenSessionIds: state.hiddenSessionIds,
+ }),
+ [state.hiddenSessionIds, state.nodes],
+ );
+ const markCanvasScrolling = useCallback(() => {
+ setCanvasScrolling(true);
+ if (scrollSettleTimerRef.current !== null) {
+ globalThis.clearTimeout(scrollSettleTimerRef.current);
+ }
+ scrollSettleTimerRef.current = globalThis.setTimeout(() => {
+ scrollSettleTimerRef.current = null;
+ setCanvasScrolling(false);
+ }, SCROLL_SETTLE_DELAY_MS);
+ }, []);
+ const focusNode = useCallback(
+ (node: CanvasNode) => {
+ const viewport = viewportRef.current;
+ onSelectSession(
+ node.kind === "terminal" && node.sessionId ? node.sessionId : null,
+ );
+ dispatch({ type: "node/select", nodeId: node.id });
+ setLayersOpen(false);
+ nodeElementsRef.current.get(node.id)?.focus({ preventScroll: true });
+ if (!viewport) {
+ return;
+ }
+
+ const size = getCanvasNodeSize(node);
+ markCanvasScrolling();
+ viewport.scrollTo({
+ left: Math.max(
+ 0,
+ (CANVAS_ORIGIN_X + node.x + size.width / 2) * state.zoom -
+ viewport.clientWidth / 2,
+ ),
+ top: Math.max(
+ 0,
+ (CANVAS_ORIGIN_Y + node.y + size.height / 2) * state.zoom -
+ viewport.clientHeight / 2,
+ ),
+ behavior: canvasScrollBehavior(),
+ });
+ },
+ [dispatch, markCanvasScrolling, onSelectSession, state.zoom],
+ );
+
+ useLayoutEffect(() => {
+ // An offline empty session list is not evidence that saved sessions vanished.
+ if (!isConnected) return;
+ dispatch({
+ type: "sessions/reconcile",
+ knownSessionIds: sessions.map((session) => session.id),
+ sessionNodes: projectSessions.map((session, index) =>
+ createSessionTerminalCanvasNode(
+ reconciledSessionPosition(index),
+ session,
+ ),
+ ),
+ });
+ }, [dispatch, isConnected, projectSessions, sessionCanvasTopologyKey, sessions]);
+
+ useLayoutEffect(() => {
+ const remainingSelection = state.selectedNodeIds.filter((id) =>
+ visibleNodeIds.has(id),
+ );
+ if (remainingSelection.length !== state.selectedNodeIds.length) {
+ dispatch({ type: "nodes/select", nodeIds: remainingSelection });
+ }
+ if (
+ state.connectionSourceId !== null &&
+ !visibleNodeIds.has(state.connectionSourceId)
+ ) {
+ dispatch({ type: "connection/cancel" });
+ }
+ }, [
+ dispatch,
+ state.connectionSourceId,
+ state.selectedNodeIds,
+ visibleNodeIds,
+ ]);
+
+ useLayoutEffect(() => {
+ if (focusSelectionRef.current && state.selectedNodeId) {
+ focusSelectionRef.current = false;
+ nodeElementsRef.current
+ .get(state.selectedNodeId)
+ ?.focus({ preventScroll: true });
+ }
+ }, [state.selectedNodeId]);
+
+ useLayoutEffect(() => {
+ if (!selectedSessionId) {
+ handledFocusRequestRef.current = null;
+ return;
+ }
+ const request: CanvasSessionFocusRequest = {
+ sessionId: selectedSessionId,
+ revision: sessionFocusRevision,
+ };
+ const handledRequest = handledFocusRequestRef.current;
+ if (
+ handledRequest?.sessionId === request.sessionId &&
+ handledRequest.revision === request.revision
+ ) {
+ return;
+ }
+
+ const session = terminalSessions.get(request.sessionId);
+ if (!session || session.projectId !== project?.id) {
+ return;
+ }
+ const existingNode = visibleNodes.find(
+ (node) =>
+ node.kind === "terminal" && node.sessionId === request.sessionId,
+ );
+ if (!existingNode || hiddenSessionIds.has(request.sessionId)) {
+ const projectSessionIndex = Math.max(
+ 0,
+ projectSessions.findIndex((candidate) => candidate.id === session.id),
+ );
+ dispatch({
+ type: "session/reveal",
+ node: createSessionTerminalCanvasNode(
+ reconciledSessionPosition(projectSessionIndex),
+ session,
+ ),
+ });
+ return;
+ }
+ if (!nodeElementsRef.current.has(existingNode.id)) {
+ return;
+ }
+
+ handledFocusRequestRef.current = request;
+ focusNode(existingNode);
+ }, [
+ dispatch,
+ focusNode,
+ hiddenSessionIds,
+ project?.id,
+ projectSessions,
+ selectedSessionId,
+ sessionFocusRevision,
+ terminalSessions,
+ visibleNodes,
+ ]);
useLayoutEffect(
() => () => {
@@ -172,22 +499,33 @@ export function CanvasWorkspace({
}
function addNote() {
+ const node = createCanvasNode("note", nextNodePosition());
+ onSelectSession(null);
dispatch({
type: "node/add",
- node: createCanvasNode("note", nextNodePosition()),
+ node: project ? { ...node, projectId: project.id } : node,
});
}
function addBrowser() {
+ const node = createCanvasNode("browser", nextNodePosition());
setBrowserHandoffStatus(null);
+ onSelectSession(null);
dispatch({
type: "node/add",
- node: createCanvasNode("browser", nextNodePosition()),
+ node: project ? { ...node, projectId: project.id } : node,
});
}
function addTerminal(configuration: CanvasTerminalConfiguration) {
- const node = createTerminalCanvasNode(nextNodePosition(), configuration);
+ const terminal = createTerminalCanvasNode(
+ nextNodePosition(),
+ configuration,
+ );
+ const node = project
+ ? { ...terminal, projectId: project.id }
+ : terminal;
+ onSelectSession(null);
dispatch({
type: "node/add",
node,
@@ -265,14 +603,16 @@ export function CanvasWorkspace({
projectId: project.id,
name: node.title,
agentId: agent.id,
- isolation: "current",
+ isolation: node.isolation ?? "current",
relativeDirectory: relativeWorkingDirectory(project, node.workingDirectory),
});
dispatch({
type: "terminal/attach",
nodeId: node.id,
sessionId: created.id,
+ projectId: created.projectId,
});
+ onSelectSession(created.id);
await onStartSession(created.id);
} catch (error) {
setTerminalErrors((current) => ({
@@ -288,72 +628,143 @@ export function CanvasWorkspace({
}
}
- function setZoom(zoom: number) {
- dispatch({ type: "zoom/set", zoom: Number(zoom.toFixed(2)) });
+ async function deliverComposerInput(
+ node: TerminalCanvasNode,
+ encode: (modes: TerminalInputModes) => Uint8Array,
+ ) {
+ const session = terminalSessions.get(node.sessionId ?? "");
+ const input = terminalInputsRef.current.get(node.id);
+ if (!isConnected || !session || !isLiveStatus(session.status) || !input) {
+ throw new Error("This terminal is not available for input.");
+ }
+ if (pendingComposerInputRef.current.has(node.id)) {
+ throw new Error("Input is already being delivered to this terminal.");
+ }
+ pendingComposerInputRef.current.add(node.id);
+ setPendingComposerNodes(new Set(pendingComposerInputRef.current));
+ try {
+ await input.writeInput(encode);
+ } finally {
+ pendingComposerInputRef.current.delete(node.id);
+ setPendingComposerNodes(new Set(pendingComposerInputRef.current));
+ }
}
- function markCanvasScrolling() {
- setCanvasScrolling(true);
- if (scrollSettleTimerRef.current !== null) {
- globalThis.clearTimeout(scrollSettleTimerRef.current);
- }
- scrollSettleTimerRef.current = globalThis.setTimeout(() => {
- scrollSettleTimerRef.current = null;
- setCanvasScrolling(false);
- }, SCROLL_SETTLE_DELAY_MS);
+ async function sendComposerPrompt(node: TerminalCanvasNode, text: string) {
+ const revision = node.promptDraftRevision ?? 0;
+ await deliverComposerInput(node, (modes) => encodePromptInput(text, modes));
+ dispatch({ type: "terminal/draft_sent", nodeId: node.id, text, revision });
}
- function focusNode(node: CanvasNode) {
- const viewport = viewportRef.current;
- dispatch({ type: "node/select", nodeId: node.id });
+ function sendComposerKey(node: TerminalCanvasNode, key: PromptTerminalKey) {
+ return deliverComposerInput(node, (modes) => encodePromptTerminalKey(key, modes));
+ }
+
+ function toggleComposer(node: TerminalCanvasNode) {
+ selectNode(node);
setLayersOpen(false);
- if (!viewport) {
- return;
+ setKnowledgeOpen(false);
+ setComposerOpen((open) => !(open && selectedNode?.id === node.id));
+ }
+
+ function toggleKnowledge() {
+ if (!knowledgeClient) return;
+ setKnowledgeVisited(true);
+ setKnowledgeOpen((open) => !open);
+ setLayersOpen(false);
+ }
+
+ function insertKnowledge(content: KnowledgeInsertion) {
+ if (selectedNode?.kind !== "terminal") {
+ throw new Error("Select a terminal before inserting this snapshot.");
}
+ const current = selectedNode.promptDraft ?? "";
+ const separator = current.endsWith("\n\n") || !current ? "" : current.endsWith("\n") ? "\n" : "\n\n";
+ const title = content.title || (content.kind === "prompt" ? "Untitled prompt" : "Untitled context");
+ const text = `${current}${separator}Knowledge snapshot: ${title}\n${content.body}\n`;
+ dispatch({ type: "terminal/draft", nodeId: selectedNode.id, text });
+ setComposerOpen(true);
+ setKnowledgeOpen(false);
+ }
- const size = getCanvasNodeSize(node);
+ function setZoom(zoom: number) {
markCanvasScrolling();
- viewport.scrollTo({
- left: Math.max(
- 0,
- (CANVAS_ORIGIN_X + node.x + size.width / 2) * state.zoom -
- viewport.clientWidth / 2,
- ),
- top: Math.max(
- 0,
- (CANVAS_ORIGIN_Y + node.y + size.height / 2) * state.zoom -
- viewport.clientHeight / 2,
- ),
- behavior: "smooth",
+ dispatch({ type: "zoom/set", zoom: Number(zoom.toFixed(2)) });
+ }
+
+ function selectAllNodes() {
+ onSelectSession(null);
+ dispatch({
+ type: "nodes/select",
+ nodeIds: visibleNodes.map((node) => node.id),
});
}
+ function duplicateSelectedNodes() {
+ if (selectedNodeIds.length === 0) return;
+ onSelectSession(null);
+ focusSelectionRef.current = true;
+ dispatch(duplicateCanvasSelection(state, selectedNodeIds));
+ }
+
+ function removeSelectedNodes() {
+ if (selectedNodeIds.length === 0) return;
+ onSelectSession(null);
+ dispatch({ type: "nodes/delete", nodeIds: selectedNodeIds });
+ viewportRef.current?.focus({ preventScroll: true });
+ }
+
+ function selectNode(node: CanvasNode, additive = false, fromFocus = false) {
+ if (fromFocus && state.selectedNodeIds.length > 0) return;
+ const sessionId = node.kind === "terminal" ? node.sessionId : undefined;
+ // A selection made here is already focused; do not treat its echo from
+ // AppShell as a sidebar navigation request that would collapse the group.
+ handledFocusRequestRef.current = sessionId
+ ? { sessionId, revision: sessionFocusRevision }
+ : null;
+ if (additive || !state.selectedNodeIds.includes(node.id)) {
+ dispatch({ type: "node/select", nodeId: node.id, additive });
+ } else if (state.selectedNodeId !== node.id) {
+ dispatch({
+ type: "nodes/select",
+ nodeIds: [...state.selectedNodeIds.filter((id) => id !== node.id), node.id],
+ });
+ }
+ onSelectSession(sessionId ?? null);
+ }
+
+ function closeLayers() {
+ setLayersOpen(false);
+ layersTriggerRef.current?.focus();
+ }
+
function fitCanvasToItems() {
const viewport = viewportRef.current;
- if (!viewport || state.nodes.length === 0) {
+ if (!viewport || storedVisibleNodes.length === 0) {
return;
}
- const minimumX = Math.min(...state.nodes.map((node) => node.x));
- const minimumY = Math.min(...state.nodes.map((node) => node.y));
- const maximumX = Math.max(
- ...state.nodes.map((node) => node.x + getCanvasNodeSize(node).width),
- );
- const maximumY = Math.max(
- ...state.nodes.map((node) => node.y + getCanvasNodeSize(node).height),
- );
- const contentWidth = maximumX - minimumX;
- const contentHeight = maximumY - minimumY;
- const viewportWidth = viewport.clientWidth || 960;
+ const storedBounds = canvasNodeBounds(storedVisibleNodes);
+ const measuredViewportWidth = viewport.clientWidth || viewportWidth || 960;
const viewportHeight = viewport.clientHeight || 640;
- const nextZoom = Math.min(
- 1,
- Math.max(
- 0.5,
- Math.min(
- (viewportWidth - 160) / contentWidth,
- (viewportHeight - 160) / contentHeight,
+ const nextZoom = Number(
+ Math.min(
+ 1,
+ Math.max(
+ 0.5,
+ Math.min(
+ (measuredViewportWidth - 160) / storedBounds.width,
+ (viewportHeight - 160) / storedBounds.height,
+ ),
),
+ ).toFixed(2),
+ );
+ const fittedBounds = canvasNodeBounds(
+ effectiveCanvasNodes(
+ storedVisibleNodes,
+ isCompact,
+ measuredViewportWidth,
+ nextZoom,
),
);
@@ -362,15 +773,53 @@ export function CanvasWorkspace({
viewport.scrollTo({
left: Math.max(
0,
- (CANVAS_ORIGIN_X + minimumX + contentWidth / 2) * nextZoom -
- viewportWidth / 2,
+ (CANVAS_ORIGIN_X + fittedBounds.minimumX + fittedBounds.width / 2) *
+ nextZoom -
+ measuredViewportWidth / 2,
),
top: Math.max(
0,
- (CANVAS_ORIGIN_Y + minimumY + contentHeight / 2) * nextZoom -
+ (CANVAS_ORIGIN_Y + fittedBounds.minimumY + fittedBounds.height / 2) *
+ nextZoom -
viewportHeight / 2,
),
- behavior: "smooth",
+ behavior: canvasScrollBehavior(),
+ });
+ }
+
+ function resetCanvasLayout() {
+ onSelectSession(null);
+ if (!project) {
+ dispatch({
+ type: "document/hydrate",
+ document: createInitialCanvasDocument(),
+ });
+ return;
+ }
+
+ const projectNodeIds = new Set(
+ state.nodes
+ .filter((node) => node.projectId === project.id)
+ .map((node) => node.id),
+ );
+ const projectSessionIds = new Set(
+ projectSessions.map((session) => session.id),
+ );
+ dispatch({
+ type: "document/hydrate",
+ document: {
+ version: 2,
+ nodes: state.nodes.filter((node) => !projectNodeIds.has(node.id)),
+ connections: state.connections.filter(
+ (connection) =>
+ !projectNodeIds.has(connection.sourceNodeId) &&
+ !projectNodeIds.has(connection.targetNodeId),
+ ),
+ zoom: state.zoom,
+ hiddenSessionIds: state.hiddenSessionIds.filter(
+ (sessionId) => !projectSessionIds.has(sessionId),
+ ),
+ },
});
}
@@ -380,6 +829,50 @@ export function CanvasWorkspace({
className="canvas-workspace"
tabIndex={-1}
aria-labelledby="canvas-workspace-title"
+ onCompositionStartCapture={() => { canvasComposingRef.current = true; }}
+ onCompositionEndCapture={() => { canvasComposingRef.current = false; }}
+ onKeyDownCapture={(event) => {
+ if (
+ event.defaultPrevented || event.repeat || canvasComposingRef.current || event.nativeEvent.isComposing
+ || event.nativeEvent.keyCode === 229 || !event.shiftKey || event.altKey
+ || event.metaKey === event.ctrlKey || event.key.toLowerCase() !== "p"
+ ) return;
+ const target = event.target instanceof Element ? event.target : null;
+ if (target?.closest('[data-shortcut-scope="knowledge-library"]')) return;
+ const targetId = target?.closest("[data-canvas-node-id]")?.getAttribute("data-canvas-node-id");
+ const targetNode = visibleNodes.find((node) => node.id === targetId);
+ if (targetNode && targetNode.kind !== "terminal") return;
+ const terminal = targetNode?.kind === "terminal" ? targetNode : selectedNode;
+ if (terminal?.kind !== "terminal") return;
+ if (
+ target?.closest("input, textarea, select, [contenteditable]:not([contenteditable='false']), [role='textbox'], [role='dialog']")
+ && !target?.closest("[data-terminal-root], .prompt-composer")
+ ) return;
+ event.preventDefault();
+ event.stopPropagation();
+ toggleComposer(terminal);
+ }}
+ onKeyDown={(event) => {
+ if (event.defaultPrevented || isCanvasEditingTarget(event.target)) {
+ return;
+ }
+ const command = event.metaKey || event.ctrlKey;
+ if (command && event.key.toLowerCase() === "f") {
+ event.preventDefault();
+ setLayersOpen(true);
+ } else if (command && event.key.toLowerCase() === "a") {
+ event.preventDefault();
+ selectAllNodes();
+ } else if (command && event.key.toLowerCase() === "d") {
+ event.preventDefault();
+ duplicateSelectedNodes();
+ } else if (event.key === "Delete" || event.key === "Backspace") {
+ event.preventDefault();
+ removeSelectedNodes();
+ } else if (event.key === "Escape") {
+ dispatch({ type: "node/select", nodeId: null });
+ }
+ }}
>
{projects.length} {projects.length === 1 ? "project" : "projects"}
·
- {state.nodes.filter((node) => node.kind === "terminal").length}{" "}
+ {visibleNodes.filter((node) => node.kind === "terminal").length}{" "}
terminals
·
- {state.nodes.filter((node) => node.kind === "browser").length}{" "}
+ {visibleNodes.filter((node) => node.kind === "browser").length}{" "}
browsers
@@ -407,15 +900,6 @@ export function CanvasWorkspace({
aria-label="Canvas tools"
data-browser-obstruction="true"
>
-
-
-
+ {
+ if (selectedNode?.kind === "terminal") toggleComposer(selectedNode);
+ }}
+ >
+ {
- if (state.connectionSourceId) {
+ if (visibleConnectionSourceId) {
dispatch({ type: "connection/cancel" });
} else if (selectedNode) {
dispatch({ type: "connection/start", nodeId: selectedNode.id });
@@ -468,13 +973,34 @@ export function CanvasWorkspace({
{
- if (selectedNode) {
- dispatch({ type: "node/delete", nodeId: selectedNode.id });
- }
- }}
+ aria-label="Select all canvas items"
+ title="Select all canvas items (⌘/Ctrl+A)"
+ disabled={visibleNodes.length === 0}
+ onClick={selectAllNodes}
+ >
+
+
+
+ 1
+ ? "Remove selected items from canvas"
+ : "Remove selected item from canvas"
+ }
+ title="Remove selected cards (Delete); sessions keep running"
+ disabled={selectedNodeIds.length === 0}
+ onClick={removeSelectedNodes}
>
@@ -482,43 +1008,26 @@ export function CanvasWorkspace({
className="canvas-tool"
type="button"
aria-label="Reset canvas layout"
- onClick={() =>
- dispatch({
- type: "document/hydrate",
- document: createInitialCanvasDocument(),
- })
+ title={
+ project ? "Reset this project's canvas layout" : "Reset canvas layout"
}
+ onClick={resetCanvasLayout}
>
-
- {project ? (
-
-
- ) : (
-
-
- )}
-
+ {selectedNodeIds.length > 0
+ ? `${selectedNodeIds.length} selected · Shift+click to add or remove`
+ : "Shift+click to select multiple items"}
+
- {state.connectionSourceId ? (
+ {visibleConnectionSourceId ? (
{
if (event.defaultPrevented || event.currentTarget !== event.target) {
return;
@@ -551,18 +1060,28 @@ export function CanvasWorkspace({
if (movement) {
event.preventDefault();
markCanvasScrolling();
- event.currentTarget.scrollLeft += movement.x;
- event.currentTarget.scrollTop += movement.y;
+ if (selectedNodeIds.length > 0) {
+ dispatch({
+ type: "nodes/move",
+ nodeIds: selectedNodeIds,
+ delta: keyboardMovement(event.key, event.altKey ? 1 : 8) ?? movement,
+ });
+ } else {
+ event.currentTarget.scrollLeft += movement.x;
+ event.currentTarget.scrollTop += movement.y;
+ }
}
}}
onPointerDown={(event) => {
if (
event.button !== 0 ||
- (event.target as HTMLElement).closest(".canvas-node")
+ (event.target instanceof Element &&
+ event.target.closest(".canvas-node"))
) {
return;
}
event.preventDefault();
+ onSelectSession(null);
dispatch({ type: "node/select", nodeId: null });
panRef.current = {
pointerId: event.pointerId,
@@ -613,41 +1132,60 @@ export function CanvasWorkspace({
style={{ transform: `scale(${state.zoom})` }}
>
agent.id === (session?.agentId ??
+ (node.kind === "terminal" ? node.agentId : undefined)),
+ )}
+ worktree={worktree}
+ isConnected={isConnected}
+ selected={selectedNodeIds.includes(node.id)}
+ connectionSource={visibleConnectionSourceId}
+ connectionCount={visibleConnections.filter(
(connection) =>
connection.sourceNodeId === node.id ||
connection.targetNodeId === node.id,
).length}
- onSelect={() =>
- dispatch({ type: "node/select", nodeId: node.id })
+ onSelect={(additive, fromFocus) =>
+ selectNode(node, additive, fromFocus)
}
onConnect={() => {
if (
- state.connectionSourceId &&
- state.connectionSourceId !== node.id
+ visibleConnectionSourceId &&
+ visibleConnectionSourceId !== node.id
) {
dispatch({
type: "connection/complete",
targetNodeId: node.id,
});
- } else if (state.connectionSourceId === node.id) {
+ } else if (visibleConnectionSourceId === node.id) {
dispatch({ type: "connection/cancel" });
} else {
dispatch({ type: "connection/start", nodeId: node.id });
@@ -656,12 +1194,19 @@ export function CanvasWorkspace({
onCancelConnection={() =>
dispatch({ type: "connection/cancel" })
}
- onDelete={() =>
- dispatch({ type: "node/delete", nodeId: node.id })
- }
+ onDelete={() => {
+ onSelectSession(null);
+ dispatch({ type: "node/delete", nodeId: node.id });
+ }}
zoom={state.zoom}
- onMove={(position) =>
- dispatch({ type: "node/move", nodeId: node.id, position })
+ onMove={(delta) =>
+ dispatch({
+ type: "nodes/move",
+ nodeIds: selectedNodeIds.includes(node.id)
+ ? selectedNodeIds
+ : [node.id],
+ delta,
+ })
}
onResize={(size) =>
dispatch({ type: "node/resize", nodeId: node.id, size })
@@ -670,10 +1215,29 @@ export function CanvasWorkspace({
onNoteChange={(text) =>
dispatch({ type: "note/update", nodeId: node.id, text })
}
- onOpenSession={() => session && onSelectSession(session.id)}
onStartTerminal={() =>
node.kind === "terminal" && launchTerminal(node, session)
}
+ composerOpen={composerNode?.id === node.id}
+ onToggleComposer={() => {
+ if (node.kind === "terminal") toggleComposer(node);
+ }}
+ onTerminalInput={registerTerminalInput}
+ onStartSession={onStartSession}
+ onRestartSession={onRestartSession}
+ onRenameSession={onRenameSession}
+ onStopSession={onStopSession}
+ onDeleteSession={onDeleteSession}
+ onRemoveWorktree={onRemoveWorktree}
+ onGitStatus={onGitStatus}
+ onOpenPath={onOpenPath}
+ elementRef={(element) => {
+ if (element) {
+ nodeElementsRef.current.set(node.id, element);
+ } else {
+ nodeElementsRef.current.delete(node.id);
+ }
+ }}
terminalPending={pendingTerminals.has(node.id)}
terminalError={terminalErrors[node.id]}
terminalTransport={{
@@ -682,9 +1246,13 @@ export function CanvasWorkspace({
resizeTerminal,
}}
browserRuntime={browserRuntime}
+ browserActive={state.selectedNodeId === node.id}
browserVisible={
state.zoom === 1 &&
!terminalDialogOpen &&
+ !layersOpen &&
+ !composerNode &&
+ !knowledgeOpen &&
!canvasInteracting &&
!canvasScrolling
}
@@ -695,6 +1263,12 @@ export function CanvasWorkspace({
? "The browser is hidden while the canvas view moves."
: terminalDialogOpen
? "The browser is hidden while a dialog covers the canvas."
+ : layersOpen
+ ? "The browser is hidden while canvas search is open."
+ : composerNode
+ ? "The browser is hidden while Prompt Composer is open."
+ : knowledgeOpen
+ ? "The browser is hidden while the knowledge library is open."
: state.zoom !== 1
? "Use 100% zoom to interact with this page."
: undefined
@@ -710,48 +1284,48 @@ export function CanvasWorkspace({
{layersOpen ? (
-
-
-
- {state.nodes.map((node) => (
-
- focusNode(node)}>
- {node.title}
-
- {state.connections.filter(
- (connection) =>
- connection.sourceNodeId === node.id ||
- connection.targetNodeId === node.id,
- ).length} connections
-
-
-
- ))}
-
-
+
+ ) : null}
+
+ {composerNode && !layersOpen && !terminalDialogOpen && !knowledgeOpen ? (
+
+
dispatch({ type: "terminal/draft", nodeId: composerNode.id, text })}
+ onSend={(text) => sendComposerPrompt(composerNode, text)}
+ onTerminalKey={(key) => sendComposerKey(composerNode, key)}
+ onClose={() => setComposerOpen(false)}
+ disabledReason={composerDisabledReason}
+ contextItems={composerContextItems}
+ clearOnSend={false}
+ />
+
+ ) : null}
+
+ {knowledgeVisited && knowledgeClient ? (
+
setKnowledgeOpen(false)}
+ />
) : null}
- {selectedNode && selectedConnections.length > 0 && !layersOpen ? (
+ {selectedNode && selectedConnections.length > 0 && !layersOpen && !composerNode && !knowledgeOpen ? (
@@ -878,28 +1455,47 @@ export function CanvasWorkspace({
interface CanvasNodeCardProps {
readonly node: CanvasNode;
+ readonly storedTerminalSize?: {
+ readonly width: number;
+ readonly height: number;
+ };
readonly session?: Session;
+ readonly agent?: AgentRecord;
+ readonly worktree?: Worktree;
+ readonly isConnected: boolean;
readonly selected: boolean;
readonly connectionSource: string | null;
readonly connectionCount: number;
readonly zoom: number;
- readonly onSelect: () => void;
+ readonly onSelect: (additive?: boolean, fromFocus?: boolean) => void;
readonly onConnect: () => void;
readonly onCancelConnection: () => void;
readonly onDelete: () => void;
- readonly onMove: (position: { readonly x: number; readonly y: number }) => void;
+ readonly onMove: (delta: { readonly x: number; readonly y: number }) => void;
readonly onResize: (size: {
readonly width: number;
readonly height: number;
}) => void;
readonly onManipulationChange: (interacting: boolean) => void;
readonly onNoteChange: (text: string) => void;
- readonly onOpenSession: () => void;
readonly onStartTerminal: () => void;
+ readonly composerOpen: boolean;
+ readonly onToggleComposer: () => void;
+ readonly onTerminalInput: (nodeId: string, handle: LiveTerminalInputHandle | null) => void;
+ readonly onStartSession: (sessionId: string) => Promise;
+ readonly onRestartSession: (sessionId: string) => Promise;
+ readonly onRenameSession: (sessionId: string) => void;
+ readonly onStopSession: (sessionId: string) => void;
+ readonly onDeleteSession: (sessionId: string) => void;
+ readonly onRemoveWorktree: (worktreeId: string) => void;
+ readonly onGitStatus: (sessionId: string) => void;
+ readonly onOpenPath: (path: string) => Promise;
+ readonly elementRef: (element: HTMLElement | null) => void;
readonly terminalPending: boolean;
readonly terminalError?: string;
readonly terminalTransport: LiveTerminalTransport;
readonly browserRuntime: BrowserRuntime;
+ readonly browserActive: boolean;
readonly browserVisible: boolean;
readonly browserUnavailableReason?: string;
readonly onBrowserNavigate: (url: string) => void;
@@ -907,7 +1503,11 @@ interface CanvasNodeCardProps {
function CanvasNodeCard({
node,
+ storedTerminalSize,
session,
+ agent,
+ worktree,
+ isConnected,
selected,
connectionSource,
connectionCount,
@@ -920,23 +1520,37 @@ function CanvasNodeCard({
onResize,
onManipulationChange,
onNoteChange,
- onOpenSession,
onStartTerminal,
+ composerOpen,
+ onToggleComposer,
+ onTerminalInput,
+ onStartSession,
+ onRestartSession,
+ onRenameSession,
+ onStopSession,
+ onDeleteSession,
+ onRemoveWorktree,
+ onGitStatus,
+ onOpenPath,
+ elementRef,
terminalPending,
terminalError,
terminalTransport,
browserRuntime,
+ browserActive,
browserVisible,
browserUnavailableReason,
onBrowserNavigate,
}: CanvasNodeCardProps) {
+ const registerInput = useCallback((handle: LiveTerminalInputHandle | null) => {
+ onTerminalInput(node.id, handle);
+ }, [node.id, onTerminalInput]);
const dragRef = useRef<{
readonly pointerId: number;
readonly clientX: number;
readonly clientY: number;
- readonly nodeX: number;
- readonly nodeY: number;
} | null>(null);
+ const pointerSelectingRef = useRef(false);
const resizeRef = useRef<{
readonly pointerId: number;
readonly clientX: number;
@@ -957,6 +1571,7 @@ function CanvasNodeCard({
return (
{
+ if (event.currentTarget === event.target && !pointerSelectingRef.current) {
+ onSelect(false, true);
+ } else if (
+ event.target instanceof Element &&
+ event.target.closest("[data-terminal-root]")
+ ) {
+ onSelect();
+ }
+ }}
onKeyDown={(event) => {
if (event.currentTarget !== event.target) {
return;
@@ -979,7 +1605,11 @@ function CanvasNodeCard({
if (movement) {
event.preventDefault();
onManipulationChange(true);
- onMove({ x: node.x + movement.x, y: node.y + movement.y });
+ onSelect();
+ onMove(movement);
+ } else if (event.key === " " && event.shiftKey) {
+ event.preventDefault();
+ onSelect(true);
} else if (event.key === "Escape" && connectionSource) {
event.preventDefault();
onCancelConnection();
@@ -1000,25 +1630,51 @@ function CanvasNodeCard({
}}
onPointerDown={(event) => {
event.stopPropagation();
- onSelect();
+ if (event.button !== 0) return;
+ if (
+ event.target instanceof Element &&
+ event.target.closest("[data-terminal-root]")
+ ) {
+ onSelect();
+ return;
+ }
+ if (isCanvasEditingTarget(event.target)) return;
+ pointerSelectingRef.current = true;
+ onSelect(event.shiftKey);
+ }}
+ onPointerUp={() => {
+ pointerSelectingRef.current = false;
+ }}
+ onPointerCancel={() => {
+ pointerSelectingRef.current = false;
}}
>
+ {selected ? (
+
+ Selected canvas item
+
+ ) : null}
{
- if ((event.target as HTMLElement).closest("button")) {
+ if (
+ event.button !== 0 ||
+ (event.target instanceof Element &&
+ event.target.closest("button, summary"))
+ ) {
return;
}
event.preventDefault();
event.stopPropagation();
- onSelect();
+ pointerSelectingRef.current = true;
+ onSelect(event.shiftKey);
+ event.currentTarget.closest("article")?.focus({ preventScroll: true });
+ if (event.shiftKey) return;
dragRef.current = {
pointerId: event.pointerId,
clientX: event.clientX,
clientY: event.clientY,
- nodeX: node.x,
- nodeY: node.y,
};
onManipulationChange(true);
event.currentTarget.setPointerCapture?.(event.pointerId);
@@ -1029,9 +1685,14 @@ function CanvasNodeCard({
return;
}
onMove({
- x: drag.nodeX + (event.clientX - drag.clientX) / zoom,
- y: drag.nodeY + (event.clientY - drag.clientY) / zoom,
+ x: (event.clientX - drag.clientX) / zoom,
+ y: (event.clientY - drag.clientY) / zoom,
});
+ dragRef.current = {
+ pointerId: event.pointerId,
+ clientX: event.clientX,
+ clientY: event.clientY,
+ };
}}
onPointerUp={(event) => {
if (dragRef.current?.pointerId === event.pointerId) {
@@ -1065,9 +1726,36 @@ function CanvasNodeCard({
) : null}
+ {node.kind === "terminal" ? (
+
{
+ event.stopPropagation();
+ onToggleComposer();
+ }}
+ >
+ ) : null}
{selected ? (
Selected
) : null}
+ {session ? (
+
+ ) : null}
{
event.stopPropagation();
onDelete();
@@ -1100,12 +1789,18 @@ function CanvasNodeCard({
{node.kind === "terminal" ? (
;
+ readonly onRestartSession: (sessionId: string) => Promise;
+ readonly onRenameSession: (sessionId: string) => void;
+ readonly onStopSession: (sessionId: string) => void;
+ readonly onDeleteSession: (sessionId: string) => void;
+ readonly onRemoveWorktree: (worktreeId: string) => void;
+ readonly onGitStatus: (sessionId: string) => void;
+ readonly onOpenPath: (path: string) => Promise;
+}
+
+function CanvasSessionActions({
+ session,
+ worktree,
+ isConnected,
+ onStartSession,
+ onRestartSession,
+ onRenameSession,
+ onStopSession,
+ onDeleteSession,
+ onRemoveWorktree,
+ onGitStatus,
+ onOpenPath,
+}: CanvasSessionActionsProps) {
+ const actionsContainerRef = useRef(null);
+ const triggerRef = useRef(null);
+ const [actionsOpen, setActionsOpen] = useState(false);
+ const [pendingAction, setPendingAction] = useState();
+ const [actionError, setActionError] = useState();
+ const live = isLiveStatus(session.status);
+ const managedWorktreeUnavailable = Boolean(session.worktreeId && !worktree);
+ const availablePath = worktree?.path ?? session.worktreePath ?? session.cwd;
+ const path = managedWorktreeUnavailable
+ ? undefined
+ : availablePath || undefined;
+ const unavailableWorktreeReason = managedWorktreeUnavailable
+ ? "The managed worktree is no longer available."
+ : undefined;
+ const disconnectedReason = !isConnected
+ ? "Connect the local daemon first."
+ : undefined;
+
+ useEffect(() => {
+ if (!actionsOpen) {
+ return;
+ }
+
+ function closeForOutsideInteraction(event: Event) {
+ const target = event.target;
+ if (
+ target instanceof Node &&
+ !actionsContainerRef.current?.contains(target)
+ ) {
+ setActionsOpen(false);
+ }
+ }
+
+ document.addEventListener("pointerdown", closeForOutsideInteraction, true);
+ document.addEventListener("focusin", closeForOutsideInteraction);
+ return () => {
+ document.removeEventListener(
+ "pointerdown",
+ closeForOutsideInteraction,
+ true,
+ );
+ document.removeEventListener("focusin", closeForOutsideInteraction);
+ };
+ }, [actionsOpen]);
+
+ function closeActionDisclosure() {
+ triggerRef.current?.focus();
+ setActionsOpen(false);
+ }
+
+ async function runDirectAction(
+ name: string,
+ action: () => Promise,
+ ) {
+ if (pendingAction) {
+ return;
+ }
+ setPendingAction(name);
+ setActionError(undefined);
+ try {
+ await action();
+ closeActionDisclosure();
+ } catch (error) {
+ setActionError(errorData(error));
+ } finally {
+ setPendingAction(undefined);
+ }
+ }
+
+ function runOverlayAction(action: () => void) {
+ if (pendingAction) {
+ return;
+ }
+ setActionError(undefined);
+ try {
+ action();
+ closeActionDisclosure();
+ } catch (error) {
+ setActionError(errorData(error));
+ }
+ }
+
+ return (
+ event.stopPropagation()}
+ onKeyDown={(event) => {
+ if (actionsOpen && event.key === "Escape") {
+ event.preventDefault();
+ event.stopPropagation();
+ closeActionDisclosure();
+ }
+ }}
+ >
+
setActionsOpen((open) => !open)}
+ >
+
+ {actionsOpen ? (
+
+
{session.name}
+
+
+ void runDirectAction("start", () => onStartSession(session.id))
+ }
+ />
+
+ void runDirectAction("restart", () =>
+ onRestartSession(session.id),
+ )
+ }
+ />
+ runOverlayAction(() => onRenameSession(session.id))}
+ />
+ runOverlayAction(() => onStopSession(session.id))}
+ />
+ runOverlayAction(() => onGitStatus(session.id))}
+ />
+ {
+ if (path) {
+ void runDirectAction("open-path", () => onOpenPath(path));
+ }
+ }}
+ />
+
+ runOverlayAction(() => onDeleteSession(session.id))
+ }
+ />
+ {
+ if (worktree) {
+ runOverlayAction(() => onRemoveWorktree(worktree.id));
+ }
+ }}
+ />
+ {actionError ? (
+
+ {actionError.message}
+ {actionError.action ? {actionError.action} : null}
+ setActionError(undefined)}
+ >
+
+
+ ) : null}
+
+ ) : null}
+
[0]["name"];
+ readonly pending?: boolean;
+ readonly disabledReason?: string;
+ readonly onClick: () => void;
+}) {
+ const disabledReasonId = useId();
+ const disabled = disabledReason !== undefined;
+ return (
+ <>
+ {
+ if (!disabled) {
+ onClick();
+ }
+ }}
+ >
+ {pending ? `${label}…` : label}
+
+ {disabledReason ? (
+
+ {disabledReason}
+
+ ) : null}
+
+ );
+}
+
function keyboardMovement(
key: string,
step: number,
@@ -1205,6 +2293,33 @@ function keyboardMovement(
}
}
+function reconciledSessionPosition(index: number) {
+ return {
+ x: 170 + (index % 3) * 464,
+ y: 720 + Math.floor(index / 3) * 288,
+ };
+}
+
+function canvasScrollBehavior(): ScrollBehavior {
+ return globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+ ? "auto"
+ : "smooth";
+}
+
+function terminalStartDisabledReason(
+ session: Session | undefined,
+ worktree: Worktree | undefined,
+ isConnected: boolean,
+): string | undefined {
+ if (!isConnected) {
+ return "Connect the local daemon first.";
+ }
+ if (session?.worktreeId && !worktree) {
+ return "The managed worktree is no longer available.";
+ }
+ return undefined;
+}
+
interface BrowserHandoff {
readonly browser: BrowserCanvasNode;
readonly target: NoteCanvasNode | TerminalCanvasNode;
@@ -1252,22 +2367,27 @@ function keyboardResize(
function TerminalNodeBody({
node,
+ agent,
session,
- onOpenSession,
onStart,
pending,
error,
+ startDisabledReason,
transport,
+ inputRef,
}: {
readonly node: TerminalCanvasNode;
+ readonly agent?: AgentRecord;
readonly session?: Session;
- readonly onOpenSession: () => void;
readonly onStart: () => void;
readonly pending: boolean;
readonly error?: string;
+ readonly startDisabledReason?: string;
readonly transport: LiveTerminalTransport;
+ readonly inputRef: Ref;
}) {
const live = session ? isLiveStatus(session.status) : false;
+ const startDisabled = pending || startDisabledReason !== undefined;
return (
) : (
-
)}
-
) : (
{error ??
+ startDisabledReason ??
(session
? "This terminal is stopped. Start it to attach a fresh live PTY."
- : `${node.executable ?? "A login shell"} is ready to start in this project.`)}
+ : `${agent?.displayName ?? node.executable ?? (node.agentId ? "The saved agent" : "A login shell")} is ready to start in this project.`)}
{
+ if (!startDisabled) {
+ onStart();
+ }
+ }}
>
{pending ? "Starting…" : error ? "Retry terminal" : "Start terminal"}
- {session ? (
-
- Session details
-
- ) : null}
)}
@@ -1328,6 +2449,16 @@ async function resolveTerminalAgent(
input: CreateCustomAgentInput,
) => Promise,
): Promise {
+ if (node.agentId) {
+ const savedAgent = agents.find((agent) => agent.id === node.agentId);
+ if (!savedAgent) {
+ throw new Error("The original agent is unavailable. Restore it before starting this copy.");
+ }
+ if (!savedAgent.enabled) {
+ throw new Error("The original agent is disabled. Enable it before starting this copy.");
+ }
+ return savedAgent;
+ }
if (node.preset === "custom") {
if (!node.executable) {
throw new Error("Choose an executable before starting this terminal.");
@@ -1402,3 +2533,12 @@ function NoteNodeBody({
);
}
+
+function isCanvasEditingTarget(target: EventTarget | null): boolean {
+ return (
+ target instanceof Element &&
+ target.closest(
+ "input, textarea, select, button, a, summary, [contenteditable]:not([contenteditable='false']), [role='textbox'], [data-terminal-root], [data-shortcut-scope], .xterm, [role='dialog']",
+ ) !== null
+ );
+}
diff --git a/apps/desktop/src/app/features/canvas/NewCanvasTerminalDialog.test.tsx b/apps/desktop/src/app/features/canvas/NewCanvasTerminalDialog.test.tsx
new file mode 100644
index 0000000..3f511cf
--- /dev/null
+++ b/apps/desktop/src/app/features/canvas/NewCanvasTerminalDialog.test.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { NewCanvasTerminalDialog } from "./NewCanvasTerminalDialog";
+
+describe("NewCanvasTerminalDialog", () => {
+ it("creates a Gemini draft using the selected project directory", async () => {
+ const user = userEvent.setup();
+ const onCreate = vi.fn();
+ render((null);
const [preset, setPreset] = useState("shell");
+ const [isolation, setIsolation] = useState("current");
const [name, setName] = useState("");
const [executable, setExecutable] = useState("");
const [workingDirectory, setWorkingDirectory] = useState(
@@ -74,6 +78,7 @@ export function NewCanvasTerminalDialog({
onCreate({
title: name.trim() || selectedPreset.label,
preset,
+ isolation,
executable: executable.trim() || undefined,
workingDirectory: workingDirectory.trim() || undefined,
});
@@ -170,7 +175,22 @@ export function NewCanvasTerminalDialog({
placeholder="~"
onChange={(event) => setWorkingDirectory(event.currentTarget.value)}
/>
+ Working copy
+ setIsolation(event.currentTarget.value === "new_worktree" ? "new_worktree" : "current")}
+ >
+ Use project working copy
+ Create an isolated Git worktree
+
+
+ {isolation === "new_worktree"
+ ? "Creates a new branch and checkout before starting. Requires a Git repository with a commit; the directory above is resolved relative to the project inside the new checkout."
+ : "Uses the existing project directory. Changes share this working copy with other sessions."}
+
{error ? (
diff --git a/apps/desktop/src/app/features/canvas/PromptComposer.test.tsx b/apps/desktop/src/app/features/canvas/PromptComposer.test.tsx
new file mode 100644
index 0000000..36d54c1
--- /dev/null
+++ b/apps/desktop/src/app/features/canvas/PromptComposer.test.tsx
@@ -0,0 +1,269 @@
+import { useState } from "react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { PromptComposer } from "./PromptComposer";
+import type { PromptComposerProps, PromptTerminalKey } from "./PromptComposer";
+
+interface FixtureProps extends Omit {
+ readonly initialValue?: string;
+}
+
+function Fixture({ initialValue = "", ...props }: FixtureProps) {
+ const [value, setValue] = useState(initialValue);
+ return ((resolve) => { complete = resolve; });
+ return { promise, complete };
+}
+
+function setup(overrides: Partial = {}) {
+ const onSend = vi.fn().mockResolvedValue(undefined);
+ const onClose = vi.fn();
+ const props = { nodeId: "terminal-a", title: "Codex API", onSend, onClose, ...overrides };
+ const view = render(>().mockResolvedValue(undefined);
+ const { user, onSend } = setup({ disabledReason: "Attach a running session to send input.", onTerminalKey });
+ const editor = screen.getByRole("textbox");
+ expect(editor).toHaveAccessibleDescription(expect.stringContaining("Attach a running session"));
+ await user.keyboard("{Enter}{ArrowUp}");
+ await user.type(editor, "Saved for later{Enter}");
+
+ expect(editor).toHaveValue("Saved for later");
+ expect(screen.getByRole("button", { name: "Send prompt" })).toBeDisabled();
+ expect(onSend).not.toHaveBeenCalled();
+ expect(onTerminalKey).not.toHaveBeenCalled();
+ });
+
+ it("retains the draft after a rejected send and offers an explicit retry", async () => {
+ const onSend = vi.fn()
+ .mockRejectedValueOnce(new Error("Transport failed"))
+ .mockResolvedValueOnce(undefined);
+ const { user } = setup({ initialValue: "Keep this request", onSend });
+ await user.click(screen.getByRole("button", { name: "Send prompt" }));
+
+ expect(screen.getByRole("alert")).toHaveTextContent("Your draft is still here");
+ expect(screen.getByRole("textbox")).toHaveValue("Keep this request");
+ await user.click(screen.getByRole("button", { name: "Try again" }));
+
+ expect(onSend).toHaveBeenCalledTimes(2);
+ expect(onSend).toHaveBeenLastCalledWith("Keep this request");
+ expect(screen.getByRole("textbox")).toHaveValue("");
+ expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+ });
+
+ it("does not duplicate pending sends or clear a draft edited while sending", async () => {
+ const delivery = deferred();
+ const onSend = vi.fn().mockReturnValue(delivery.promise);
+ const { user } = setup({ initialValue: "Submitted", onSend });
+ const editor = screen.getByRole("textbox");
+ await user.keyboard("{Enter}{Enter}");
+ expect(screen.getByRole("button", { name: "Sending…" })).toBeDisabled();
+ expect(screen.getByRole("status")).toHaveTextContent("Sending prompt…");
+ await user.clear(editor);
+ await user.type(editor, "Next request");
+ await act(async () => delivery.complete());
+
+ expect(onSend).toHaveBeenCalledExactlyOnceWith("Submitted");
+ expect(editor).toHaveValue("Next request");
+ expect(screen.getByRole("button", { name: "Send prompt" })).toBeEnabled();
+ });
+
+ it("preserves a revised draft even when it equals the submitted text again", async () => {
+ const delivery = deferred();
+ const { user } = setup({ initialValue: "Repeat", onSend: () => delivery.promise });
+ const editor = screen.getByRole("textbox");
+ await user.keyboard("{Enter}");
+ await user.clear(editor);
+ await user.type(editor, "Repeat");
+ await act(async () => delivery.complete());
+ expect(editor).toHaveValue("Repeat");
+ });
+
+ it("ignores a previous terminal's pending completion after switching targets", async () => {
+ const delivery = deferred();
+ const onChange = vi.fn();
+ const onClose = vi.fn();
+ const { rerender } = render( delivery.promise} onClose={onClose}
+ />);
+ fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" });
+ rerender((["Enter", "Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"])(
+ "forwards %s only when the editor is empty and the keystroke is intentional",
+ async (key) => {
+ const onTerminalKey = vi.fn>().mockResolvedValue(undefined);
+ const { onSend, user } = setup({ onTerminalKey });
+ const editor = screen.getByRole("textbox");
+ fireEvent.keyDown(editor, { key, repeat: true });
+ fireEvent.keyDown(editor, { key, isComposing: true });
+ fireEvent.keyDown(editor, { key, ctrlKey: true });
+ expect(onTerminalKey).not.toHaveBeenCalled();
+ await act(async () => { fireEvent.keyDown(editor, { key }); });
+ expect(onTerminalKey).toHaveBeenCalledExactlyOnceWith(key);
+ expect(onSend).not.toHaveBeenCalled();
+ await user.type(editor, "New draft");
+ await act(async () => { fireEvent.keyDown(editor, { key }); });
+ expect(onTerminalKey).toHaveBeenCalledTimes(1);
+ },
+ );
+
+ it("allows Shift+Tab to leave the empty editor", async () => {
+ const onTerminalKey = vi.fn>().mockResolvedValue(undefined);
+ const { user } = setup({ onTerminalKey });
+ await user.tab({ shift: true });
+ expect(screen.getByRole("button", { name: "Close Prompt Composer" })).toHaveFocus();
+ expect(onTerminalKey).not.toHaveBeenCalled();
+ });
+
+ it("keeps forward tab navigation available when terminal input is disabled", async () => {
+ const onTerminalKey = vi.fn>().mockResolvedValue(undefined);
+ const { user } = setup({
+ onTerminalKey,
+ disabledReason: "Attach a running session to send input.",
+ contextItems: [{ id: "note-a", title: "Plan", text: "Useful context" }],
+ });
+ await user.tab();
+ expect(screen.getByText(/Insert context/)).toHaveFocus();
+ expect(onTerminalKey).not.toHaveBeenCalled();
+ });
+
+ it("offers a retry for a key that could not be delivered", async () => {
+ const onTerminalKey = vi.fn>()
+ .mockRejectedValueOnce(new Error("Disconnected"))
+ .mockResolvedValueOnce(undefined);
+ const { user, onSend } = setup({ onTerminalKey });
+ await user.keyboard("{ArrowUp}");
+ expect(screen.getByRole("alert")).toHaveTextContent("Could not deliver the key");
+ await user.click(screen.getByRole("button", { name: "Retry key" }));
+ expect(onTerminalKey).toHaveBeenCalledTimes(2);
+ expect(onTerminalKey).toHaveBeenLastCalledWith("ArrowUp");
+ expect(onSend).not.toHaveBeenCalled();
+ expect(screen.getByRole("status")).toHaveTextContent("Key sent to Codex API.");
+ });
+
+ it("closes with Escape or the close button without discarding the draft", async () => {
+ const { user, onClose, onSend } = setup({ initialValue: "Return to this later" });
+ await user.keyboard("{Escape}");
+ expect(onClose).toHaveBeenCalledTimes(1);
+ expect(screen.getByRole("textbox")).toHaveValue("Return to this later");
+ await user.click(screen.getByRole("button", { name: "Close Prompt Composer" }));
+ expect(onClose).toHaveBeenCalledTimes(2);
+ expect(onSend).not.toHaveBeenCalled();
+ });
+
+ it("restores focus to the trigger when closed from inside the composer", async () => {
+ const user = userEvent.setup();
+ function Host() {
+ const [open, setOpen] = useState(false);
+ return <>
+ setOpen(true)}>Compose
+ {open ? setOpen(false)} /> : null}
+ ;
+ }
+ render(;
+ readonly onClose: () => void;
+ /** Explains why input cannot be sent; drafting remains available. */
+ readonly disabledReason?: string;
+ readonly contextItems?: readonly PromptContextItem[];
+ readonly onTerminalKey?: (key: PromptTerminalKey) => Promise;
+ /** False when the owner acknowledges sends with its own persistent revision check. */
+ readonly clearOnSend?: boolean;
+}
+
+type PendingInput = { readonly kind: "prompt" } | {
+ readonly kind: "key";
+ readonly key: PromptTerminalKey;
+};
+
+/** Keeps each terminal's focus and in-flight input isolated when targets change. */
+export function PromptComposer(props: PromptComposerProps) {
+ return (null);
+ const editorRef = useRef(null);
+ const mountedRef = useRef(false);
+ const composingRef = useRef(false);
+ const busyRef = useRef(false);
+ const draftRef = useRef({ value, onChange, revision: 0 });
+ const [pending, setPending] = useState();
+ const [failed, setFailed] = useState();
+ const [status, setStatus] = useState("");
+
+ useLayoutEffect(() => {
+ const previous = draftRef.current;
+ draftRef.current = {
+ value,
+ onChange,
+ revision: previous.revision + (previous.value === value ? 0 : 1),
+ };
+ }, [value, onChange]);
+
+ useLayoutEffect(() => {
+ mountedRef.current = true;
+ const panel = panelRef.current;
+ const previousFocus = document.activeElement;
+ editorRef.current?.focus();
+ return () => {
+ mountedRef.current = false;
+ if (
+ panel?.contains(document.activeElement)
+ && previousFocus instanceof HTMLElement
+ && previousFocus.isConnected
+ ) {
+ previousFocus.focus();
+ }
+ };
+ }, []);
+
+ function changeDraft(nextValue: string) {
+ draftRef.current = {
+ value: nextValue,
+ onChange,
+ revision: draftRef.current.revision + 1,
+ };
+ onChange(nextValue);
+ setFailed(undefined);
+ setStatus("");
+ }
+
+ async function sendPrompt() {
+ if (disabledReason || busyRef.current || !value.trim()) return;
+ const submitted = draftRef.current;
+ busyRef.current = true;
+ setPending({ kind: "prompt" });
+ setFailed(undefined);
+ setStatus("");
+ try {
+ await onSend(value);
+ if (!mountedRef.current) return;
+ const latest = draftRef.current;
+ if (clearOnSend && latest.value === submitted.value && latest.revision === submitted.revision) {
+ latest.onChange("");
+ }
+ setStatus(`Prompt sent to ${title}.`);
+ } catch {
+ if (mountedRef.current) setFailed({ kind: "prompt" });
+ } finally {
+ busyRef.current = false;
+ if (mountedRef.current) setPending(undefined);
+ }
+ }
+
+ async function sendTerminalKey(key: PromptTerminalKey) {
+ if (disabledReason || busyRef.current || !onTerminalKey) return;
+ busyRef.current = true;
+ setPending({ kind: "key", key });
+ setFailed(undefined);
+ setStatus("");
+ try {
+ await onTerminalKey(key);
+ if (mountedRef.current) setStatus(`Key sent to ${title}.`);
+ } catch {
+ if (mountedRef.current) setFailed({ kind: "key", key });
+ } finally {
+ busyRef.current = false;
+ if (mountedRef.current) setPending(undefined);
+ }
+ }
+
+ function handleSubmit(event: FormEvent) {
+ event.preventDefault();
+ void sendPrompt();
+ }
+
+ function handleEditorKey(event: KeyboardEvent) {
+ if (
+ composingRef.current || event.nativeEvent.isComposing
+ || event.nativeEvent.keyCode === 229
+ || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey
+ ) return;
+
+ if (
+ value === "" && onTerminalKey && !disabledReason && !busyRef.current
+ && isTerminalKey(event.key)
+ ) {
+ event.preventDefault();
+ event.stopPropagation();
+ if (!event.repeat) void sendTerminalKey(event.key);
+ return;
+ }
+ if (event.key === "Enter") {
+ event.preventDefault();
+ event.stopPropagation();
+ if (!event.repeat) void sendPrompt();
+ }
+ }
+
+ function insertContext(item: PromptContextItem) {
+ const separator = value && !value.endsWith("\n\n") ? "\n\n" : "";
+ changeDraft(`${value}${separator}Context snapshot: ${item.title}\n${item.text}\n`);
+ setStatus(`Inserted a text snapshot from ${item.title}.`);
+ editorRef.current?.focus();
+ }
+
+ const feedbackId = `${id}-feedback`;
+ const disabledId = `${id}-disabled`;
+ const helpId = `${id}-help`;
+
+ return (
+ event.stopPropagation()}
+ onClick={(event) => event.stopPropagation()}
+ onKeyDown={(event) => {
+ if (
+ event.key === "Escape" && !event.repeat && !composingRef.current
+ && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229
+ ) {
+ event.preventDefault();
+ event.stopPropagation();
+ onClose();
+ }
+ }}
+ >
+
+
+
+
{title}
+
+