mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-31 05:32:58 +00:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d1278aa856 | ||
|
|
091350544d | ||
|
|
bc825af843 |
@@ -2,8 +2,8 @@
|
||||
|
||||
Agent chat delivery has two paths:
|
||||
|
||||
1. **Live stream** — `agent_stream` WebSocket messages for immediacy. These may be delta-shaped lifecycle updates.
|
||||
2. **Authoritative history** — `fetch_agent_timeline_request` for correctness. This always returns full projected timeline items, never lifecycle deltas.
|
||||
1. **Live stream** — `agent_stream` WebSocket messages for immediacy.
|
||||
2. **Authoritative history** — `fetch_agent_timeline_request` for correctness.
|
||||
|
||||
The invariant is:
|
||||
|
||||
@@ -24,8 +24,6 @@ Heartbeat is used for notification routing. It must not be used as a correctness
|
||||
|
||||
Large unbounded timeline responses can exceed relay frame limits, so catch-up uses bounded pages. Bounded does not mean partial.
|
||||
|
||||
Page limits are projected-item targets. A tool call lifecycle is one projected item even if it spans many source sequence numbers, and assistant/reasoning chunks are merged before counting. The response carries `seqStart`, `seqEnd`, `sourceSeqRanges`, and `collapsed` so clients can advance sequence cursors without rendering delta rows.
|
||||
|
||||
When the app fetches `direction: "after"` and the daemon responds with `hasNewer: true`, the app must immediately fetch the next page from `endCursor`. The catch-up is complete only when `hasNewer: false`.
|
||||
|
||||
The first load of an agent without a local cursor is different: it fetches a bounded latest tail page. Older history remains user-driven by scrolling upward.
|
||||
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
installAcpCatalogProvider,
|
||||
openAddProviderModal,
|
||||
openSettingsHost,
|
||||
openSettingsHostSection,
|
||||
} from "./helpers/settings";
|
||||
|
||||
const ACP_PROVIDER = {
|
||||
@@ -19,8 +18,6 @@ test.describe("ACP provider catalog", () => {
|
||||
await gotoAppShell(page);
|
||||
await openSettings(page);
|
||||
await openSettingsHost(page, getServerId());
|
||||
// Providers moved to their own host section; add-provider lives there now.
|
||||
await openSettingsHostSection(page, getServerId(), "providers");
|
||||
await openAddProviderModal(page);
|
||||
|
||||
await installAcpCatalogProvider(page, ACP_PROVIDER.name);
|
||||
|
||||
@@ -1,193 +0,0 @@
|
||||
import { expect, test, type Page } from "./fixtures";
|
||||
import { waitForTabBar } from "./helpers/launcher";
|
||||
import { setupDeterministicPrompt, waitForTerminalContent } from "./helpers/terminal-perf";
|
||||
import { connectSeedClient } from "./helpers/seed-client";
|
||||
import { createTempGitRepo } from "./helpers/workspace";
|
||||
import { openFileExplorer, openFileFromExplorer } from "./helpers/file-explorer";
|
||||
import {
|
||||
connectWorkspaceSetupClient,
|
||||
openHomeWithProject,
|
||||
seedProjectForWorkspaceSetup,
|
||||
} from "./helpers/workspace-setup";
|
||||
import { buildHostWorkspaceRoute } from "../src/utils/host-routes";
|
||||
|
||||
function getServerId(): string {
|
||||
const serverId = process.env.E2E_SERVER_ID;
|
||||
if (!serverId) {
|
||||
throw new Error("E2E_SERVER_ID is not set.");
|
||||
}
|
||||
return serverId;
|
||||
}
|
||||
|
||||
function findShortcut(): string {
|
||||
return process.platform === "darwin" ? "Meta+f" : "Control+f";
|
||||
}
|
||||
|
||||
async function navigateToWorkspaceViaSidebar(page: Page, workspaceId: string): Promise<void> {
|
||||
const row = page.getByTestId(`sidebar-workspace-row-${getServerId()}:${workspaceId}`);
|
||||
await expect(row).toBeVisible({ timeout: 30_000 });
|
||||
await row.click();
|
||||
await waitForTabBar(page);
|
||||
}
|
||||
|
||||
async function openFind(page: Page): Promise<void> {
|
||||
await page.keyboard.press(findShortcut());
|
||||
await expect(page.getByTestId("pane-find-bar")).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
|
||||
async function typeFindQuery(page: Page, query: string): Promise<void> {
|
||||
const input = page.getByTestId("pane-find-input");
|
||||
await expect(input).toBeVisible({ timeout: 10_000 });
|
||||
await input.fill(query);
|
||||
}
|
||||
|
||||
test.describe("in-pane find", () => {
|
||||
test("walks chat, file, terminal, split-pane, and browser-web find flows in the running app", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.setTimeout(120_000);
|
||||
|
||||
const client = await connectWorkspaceSetupClient();
|
||||
const agentClient = await connectSeedClient();
|
||||
const repo = await createTempGitRepo("find-pane-qa-", {
|
||||
files: [
|
||||
{
|
||||
path: "src/find-target.txt",
|
||||
content: [
|
||||
"alpha needle first",
|
||||
"beta without match",
|
||||
"gamma NEEDLE second",
|
||||
"delta needle third",
|
||||
"",
|
||||
].join("\n"),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
try {
|
||||
await seedProjectForWorkspaceSetup(client, repo.path);
|
||||
const workspaceResult = await client.openProject(repo.path);
|
||||
if (!workspaceResult.workspace) {
|
||||
throw new Error(workspaceResult.error ?? `Failed to open project ${repo.path}`);
|
||||
}
|
||||
|
||||
await openHomeWithProject(page, repo.path);
|
||||
await navigateToWorkspaceViaSidebar(page, workspaceResult.workspace.id);
|
||||
|
||||
await openFileExplorer(page);
|
||||
await openFileFromExplorer(page, "src");
|
||||
await openFileFromExplorer(page, "find-target.txt");
|
||||
await expect(page.getByTestId("workspace-file-pane")).toBeVisible({ timeout: 30_000 });
|
||||
await page.getByTestId("workspace-file-pane").click();
|
||||
|
||||
await openFind(page);
|
||||
await typeFindQuery(page, "needle");
|
||||
await expect(page.getByText("1 / 3")).toBeVisible({ timeout: 10_000 });
|
||||
await page.getByTestId("pane-find-next").click();
|
||||
await expect(page.getByText("2 / 3")).toBeVisible({ timeout: 10_000 });
|
||||
await page.getByTestId("pane-find-prev").click();
|
||||
await expect(page.getByText("1 / 3")).toBeVisible({ timeout: 10_000 });
|
||||
await page.getByTestId("pane-find-input").focus();
|
||||
await page.keyboard.press("Enter");
|
||||
await expect(page.getByText("2 / 3")).toBeVisible({ timeout: 10_000 });
|
||||
await page.keyboard.press("Shift+Enter");
|
||||
await expect(page.getByText("1 / 3")).toBeVisible({ timeout: 10_000 });
|
||||
await typeFindQuery(page, "missing-value");
|
||||
await expect(page.getByText("No matches")).toBeVisible({ timeout: 10_000 });
|
||||
await typeFindQuery(page, "");
|
||||
await expect(page.getByText("0 / 0")).toBeVisible({ timeout: 10_000 });
|
||||
await typeFindQuery(page, "needle");
|
||||
await page.keyboard.press("Escape");
|
||||
await expect(page.getByTestId("pane-find-bar")).toHaveCount(0);
|
||||
await testInfo.attach("file-find-walkthrough", {
|
||||
body: await page.screenshot(),
|
||||
contentType: "image/png",
|
||||
});
|
||||
|
||||
await page.getByLabel("Split pane right").filter({ visible: true }).last().click();
|
||||
await expect(page.getByTestId("workspace-tabs-row").filter({ visible: true })).toHaveCount(2);
|
||||
await page.getByTestId("workspace-new-terminal").filter({ visible: true }).last().click();
|
||||
const splitTerminal = page.getByTestId("terminal-surface").last();
|
||||
await expect(splitTerminal).toBeVisible({ timeout: 20_000 });
|
||||
await splitTerminal.click();
|
||||
await setupDeterministicPrompt(page, `SPLIT_FIND_READY_${Date.now()}`);
|
||||
await splitTerminal.pressSequentially("printf 'split needle one\\nsplit needle two\\n'\n", {
|
||||
delay: 0,
|
||||
});
|
||||
await waitForTerminalContent(page, (text) => text.includes("split needle two"), 10_000);
|
||||
await openFind(page);
|
||||
await typeFindQuery(page, "needle");
|
||||
await expect(page.getByText(/[1-9] \/ [1-9]/)).toBeVisible({
|
||||
timeout: 10_000,
|
||||
});
|
||||
await page.getByTestId("workspace-file-pane").click();
|
||||
await expect(page.getByTestId("pane-find-bar")).toHaveCount(0);
|
||||
await openFind(page);
|
||||
await typeFindQuery(page, "needle");
|
||||
await expect(page.getByText("1 / 3")).toBeVisible({ timeout: 10_000 });
|
||||
await page.getByTestId("pane-find-close").click();
|
||||
await expect(page.getByTestId("pane-find-bar")).toHaveCount(0);
|
||||
await testInfo.attach("terminal-find-walkthrough", {
|
||||
body: await page.screenshot(),
|
||||
contentType: "image/png",
|
||||
});
|
||||
await testInfo.attach("split-pane-focus-switching", {
|
||||
body: await page.screenshot(),
|
||||
contentType: "image/png",
|
||||
});
|
||||
|
||||
const agent = await agentClient.createAgent({
|
||||
provider: "mock",
|
||||
cwd: repo.path,
|
||||
title: "Find pane QA",
|
||||
modeId: "load-test",
|
||||
model: "ten-second-stream",
|
||||
initialPrompt: "chat needle alpha",
|
||||
});
|
||||
await page.goto(
|
||||
`${buildHostWorkspaceRoute(getServerId(), repo.path)}?open=${encodeURIComponent(
|
||||
`agent:${agent.id}`,
|
||||
)}`,
|
||||
);
|
||||
await expect(page.getByText("chat needle alpha").first()).toBeVisible({
|
||||
timeout: 30_000,
|
||||
});
|
||||
await page.getByText("chat needle alpha").first().click();
|
||||
await openFind(page);
|
||||
await typeFindQuery(page, "needle");
|
||||
await expect(page.getByText(/[1-9] \/ [1-9]/)).toBeVisible({ timeout: 10_000 });
|
||||
await page.getByTestId("pane-find-next").click();
|
||||
await page.getByTestId("pane-find-prev").click();
|
||||
await page.getByTestId("pane-find-close").click();
|
||||
await expect(page.getByTestId("pane-find-bar")).toHaveCount(0);
|
||||
await testInfo.attach("chat-find-walkthrough", {
|
||||
body: await page.screenshot(),
|
||||
contentType: "image/png",
|
||||
});
|
||||
|
||||
await page.getByTestId("workspace-header-menu-trigger").click();
|
||||
const browserMenuItem = page.getByTestId("workspace-header-new-browser");
|
||||
if (await browserMenuItem.isVisible().catch(() => false)) {
|
||||
await browserMenuItem.click();
|
||||
await expect(
|
||||
page.getByText("Open this workspace in Electron to use the built-in browser."),
|
||||
).toBeVisible({ timeout: 10_000 });
|
||||
await page.keyboard.press(findShortcut());
|
||||
await expect(page.getByTestId("pane-find-bar")).toHaveCount(0);
|
||||
await testInfo.attach("browser-web-fallback", {
|
||||
body: await page.screenshot(),
|
||||
contentType: "image/png",
|
||||
});
|
||||
} else {
|
||||
await testInfo.attach("browser-web-fallback", {
|
||||
body: "Browser tab creation is not exposed in this browser-web runtime.",
|
||||
contentType: "text/plain",
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
await agentClient.close();
|
||||
await client.close();
|
||||
await repo.cleanup();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -2,7 +2,7 @@ import { readFileSync } from "node:fs";
|
||||
import { expect, type Page } from "@playwright/test";
|
||||
import { openSettings } from "./app";
|
||||
import { getE2EDaemonPort } from "./daemon-port";
|
||||
import { openSettingsHost, openSettingsHostSection } from "./settings";
|
||||
import { openSettingsHost } from "./settings";
|
||||
|
||||
interface DaemonApiStatus {
|
||||
version: string;
|
||||
@@ -208,9 +208,6 @@ export async function injectDesktopBridge(page: Page, config: DesktopBridgeConfi
|
||||
export async function openDesktopSettings(page: Page, serverId: string): Promise<void> {
|
||||
await openSettings(page);
|
||||
await openSettingsHost(page, serverId);
|
||||
// The daemon-lifecycle card moved to the Daemon section in the flat-settings
|
||||
// layout; navigate there before asserting it.
|
||||
await openSettingsHostSection(page, serverId, "daemon");
|
||||
await expect(page.getByTestId("host-page-daemon-lifecycle-card")).toBeVisible({
|
||||
timeout: 15_000,
|
||||
});
|
||||
|
||||
@@ -320,12 +320,12 @@ async function fetchTimelineEpoch(handle: AgentHandle): Promise<string | undefin
|
||||
const client = handle.client as SeedDaemonClient & {
|
||||
fetchAgentTimeline: (
|
||||
agentId: string,
|
||||
options?: { direction?: "head" | "tail"; projection?: "projected"; limit?: number },
|
||||
options?: { direction?: "head" | "tail"; projection?: "canonical"; limit?: number },
|
||||
) => Promise<{ epoch?: string }>;
|
||||
};
|
||||
const timeline = await client.fetchAgentTimeline(handle.agentId, {
|
||||
direction: "tail",
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
limit: 0,
|
||||
});
|
||||
return timeline.epoch;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { expect, type Page } from "@playwright/test";
|
||||
import { TEST_HOST_LABEL } from "./daemon-registry";
|
||||
import { escapeRegex } from "./regex";
|
||||
import { getServerId } from "./server-id";
|
||||
|
||||
@@ -14,8 +13,6 @@ const SECTION_LABELS = {
|
||||
|
||||
export type SettingsSection = keyof typeof SECTION_LABELS | "projects";
|
||||
|
||||
type HostSection = "connections" | "orchestration" | "providers" | "daemon";
|
||||
|
||||
export async function openSettingsSection(page: Page, section: SettingsSection): Promise<void> {
|
||||
const sidebar = page.getByTestId("settings-sidebar");
|
||||
await expect(sidebar).toBeVisible();
|
||||
@@ -31,22 +28,8 @@ export async function openSettingsSection(page: Page, section: SettingsSection):
|
||||
}
|
||||
|
||||
export async function openSettingsHost(page: Page, serverId: string): Promise<void> {
|
||||
// Host sections are now flat top-level rows under the Host group. Navigate by
|
||||
// clicking the Connections section row; the picker only matters when >1 host.
|
||||
await page.getByTestId("settings-host-section-connections").click();
|
||||
await expectHostSettingsUrl(page, serverId);
|
||||
await expect(page.getByTestId("host-page-connections-card")).toBeVisible();
|
||||
}
|
||||
|
||||
export async function openSettingsHostSection(
|
||||
page: Page,
|
||||
serverId: string,
|
||||
section: HostSection,
|
||||
): Promise<void> {
|
||||
await page.getByTestId(`settings-host-section-${section}`).click();
|
||||
await expect(page).toHaveURL(
|
||||
new RegExp(`/settings/hosts/${escapeRegex(encodeURIComponent(serverId))}/${section}$`),
|
||||
);
|
||||
await page.getByTestId(`settings-host-entry-${serverId}`).click();
|
||||
await expect(page.getByTestId(`settings-host-page-${serverId}`)).toBeVisible();
|
||||
}
|
||||
|
||||
export async function expectSettingsHeader(page: Page, title: string): Promise<void> {
|
||||
@@ -54,9 +37,6 @@ export async function expectSettingsHeader(page: Page, title: string): Promise<v
|
||||
}
|
||||
|
||||
export async function openAddHostFlow(page: Page): Promise<void> {
|
||||
// "Add host" is now an item inside the host picker (a Combobox); open the
|
||||
// picker first, then pick it. The picker renders whenever a host exists.
|
||||
await page.getByTestId("settings-host-picker").click();
|
||||
await page.getByTestId("settings-add-host").click();
|
||||
await expect(page.getByText("Add connection", { exact: true })).toBeVisible();
|
||||
}
|
||||
@@ -88,7 +68,7 @@ export async function expectCompactSettingsList(page: Page): Promise<void> {
|
||||
await expect(page.getByTestId("settings-sidebar")).toBeVisible();
|
||||
await expect(page.getByText("Theme", { exact: true })).toHaveCount(0);
|
||||
await expect(page.getByRole("button", { name: "Play test" })).toHaveCount(0);
|
||||
await expect(page.getByTestId("host-page-connections-card")).toHaveCount(0);
|
||||
await expect(page.locator('[data-testid^="settings-host-page-"]')).toHaveCount(0);
|
||||
}
|
||||
|
||||
export async function expectSettingsSidebarVisible(page: Page): Promise<void> {
|
||||
@@ -125,7 +105,7 @@ export async function clickSettingsBackToWorkspace(page: Page): Promise<void> {
|
||||
|
||||
export async function expectHostSettingsUrl(page: Page, serverId: string): Promise<void> {
|
||||
await expect(page).toHaveURL(
|
||||
new RegExp(`/settings/hosts/${escapeRegex(encodeURIComponent(serverId))}/connections$`),
|
||||
new RegExp(`/settings/hosts/${escapeRegex(encodeURIComponent(serverId))}$`),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -201,11 +181,7 @@ export async function expectHostLabelEditMode(page: Page, expectedLabel: string)
|
||||
export async function expectHostConnectionsCard(page: Page, port: string): Promise<void> {
|
||||
const card = page.getByTestId("host-page-connections-card");
|
||||
await expect(card).toBeVisible();
|
||||
// "Connections" appears three times on this page: the sidebar section row, the
|
||||
// detail header title, and the SettingsSection heading above the card. Match
|
||||
// the first to keep the heading assertion without tripping Playwright strict
|
||||
// mode.
|
||||
await expect(page.getByText("Connections", { exact: true }).first()).toBeVisible();
|
||||
await expect(page.getByText("Connections", { exact: true })).toBeVisible();
|
||||
await expect(
|
||||
card.getByText(new RegExp(`TCP \\((localhost|127\\.0\\.0\\.1):${port}\\)`)),
|
||||
).toBeVisible();
|
||||
@@ -217,29 +193,14 @@ export async function expectHostInjectMcpCard(page: Page): Promise<void> {
|
||||
await expect(card.getByRole("switch", { name: "Inject Paseo tools" })).toBeVisible();
|
||||
}
|
||||
|
||||
export async function openHostSection(
|
||||
page: Page,
|
||||
serverId: string,
|
||||
section: HostSection,
|
||||
): Promise<void> {
|
||||
await openSettingsHostSection(page, serverId, section);
|
||||
}
|
||||
|
||||
export async function expectHostActionCards(page: Page, serverId: string): Promise<void> {
|
||||
// Restart + remove cards live on the Daemon section; providers moved to its
|
||||
// own Providers section (asserted via expectHostProvidersCard).
|
||||
await openSettingsHostSection(page, serverId, "daemon");
|
||||
export async function expectHostActionCards(page: Page): Promise<void> {
|
||||
await expect(page.getByTestId("host-page-restart-card")).toBeVisible();
|
||||
await expect(page.getByTestId("host-page-restart-button")).toBeVisible();
|
||||
await expect(page.getByTestId("host-page-providers-card")).toBeVisible();
|
||||
await expect(page.getByTestId("host-page-remove-host-card")).toBeVisible();
|
||||
await expect(page.getByTestId("host-page-remove-host-button")).toBeVisible();
|
||||
}
|
||||
|
||||
export async function expectHostProvidersCard(page: Page, serverId: string): Promise<void> {
|
||||
await openSettingsHostSection(page, serverId, "providers");
|
||||
await expect(page.getByTestId("host-page-providers-card")).toBeVisible();
|
||||
}
|
||||
|
||||
export async function serveJson(page: Page, url: string, body: unknown): Promise<void> {
|
||||
await page.route(url, async (route) => {
|
||||
await route.fulfill({
|
||||
@@ -283,35 +244,27 @@ export async function expectHostNoLocalOnlyRows(page: Page): Promise<void> {
|
||||
export async function expectRetiredSidebarSectionsAbsent(page: Page): Promise<void> {
|
||||
const sidebar = page.getByTestId("settings-sidebar");
|
||||
await expect(sidebar).toBeVisible();
|
||||
|
||||
// App group rows remain top-level.
|
||||
await expect(sidebar.getByRole("button", { name: "Hosts", exact: true })).toHaveCount(0);
|
||||
await expect(sidebar.getByRole("button", { name: "Providers", exact: true })).toHaveCount(0);
|
||||
await expect(sidebar.getByRole("button", { name: "Pair device", exact: true })).toHaveCount(0);
|
||||
await expect(sidebar.getByRole("button", { name: "Daemon", exact: true })).toHaveCount(0);
|
||||
await expect(sidebar.getByRole("button", { name: "General", exact: true })).toBeVisible();
|
||||
await expect(sidebar.getByRole("button", { name: "Diagnostics", exact: true })).toBeVisible();
|
||||
await expect(sidebar.getByRole("button", { name: "About", exact: true })).toBeVisible();
|
||||
|
||||
// Host group rows are now flat top-level sections (no drill-in).
|
||||
await expect(sidebar.getByTestId("settings-host-section-connections")).toBeVisible();
|
||||
await expect(sidebar.getByTestId("settings-host-section-orchestration")).toBeVisible();
|
||||
await expect(sidebar.getByTestId("settings-host-section-providers")).toBeVisible();
|
||||
await expect(sidebar.getByTestId("settings-host-section-daemon")).toBeVisible();
|
||||
|
||||
// The old per-host entry rows are replaced by the host picker.
|
||||
await expect(sidebar.locator('[data-testid^="settings-host-entry-"]')).toHaveCount(0);
|
||||
}
|
||||
|
||||
export async function expectHostPageVisible(page: Page, _serverId: string): Promise<void> {
|
||||
await expect(page.getByTestId("host-page-connections-card")).toBeVisible();
|
||||
export async function expectHostPageVisible(page: Page, serverId: string): Promise<void> {
|
||||
await expect(page.getByTestId(`settings-host-page-${serverId}`)).toBeVisible();
|
||||
}
|
||||
|
||||
export async function expectLocalHostEntryFirst(page: Page, _serverId: string): Promise<void> {
|
||||
export async function expectLocalHostEntryFirst(page: Page, serverId: string): Promise<void> {
|
||||
const sidebar = page.getByTestId("settings-sidebar");
|
||||
await expect(sidebar).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
// Single-host fixture: the picker is a non-interactive chip (no dropdown to
|
||||
// open) that surfaces the local host by its label. The "Local" marker only
|
||||
// appears on dropdown rows in the multi-host case, which this fixture does not
|
||||
// exercise.
|
||||
const picker = sidebar.getByTestId("settings-host-picker");
|
||||
await expect(picker).toBeVisible();
|
||||
await expect(picker.getByText(TEST_HOST_LABEL, { exact: true })).toBeVisible();
|
||||
await expect(sidebar.locator('[data-testid^="settings-host-entry-"]').first()).toHaveAttribute(
|
||||
"data-testid",
|
||||
`settings-host-entry-${serverId}`,
|
||||
);
|
||||
const localHostEntry = page.getByTestId(`settings-host-entry-${serverId}`);
|
||||
await expect(localHostEntry.getByTestId("settings-host-local-marker")).toBeVisible();
|
||||
await expect(localHostEntry.getByText("Local", { exact: true })).toBeVisible();
|
||||
}
|
||||
|
||||
@@ -6,14 +6,12 @@ import { getServerId } from "./helpers/server-id";
|
||||
import {
|
||||
expectSettingsHeader,
|
||||
openSettingsHost,
|
||||
openHostSection,
|
||||
expectHostLabelDisplayed,
|
||||
clickEditHostLabel,
|
||||
expectHostLabelEditMode,
|
||||
expectHostConnectionsCard,
|
||||
expectHostInjectMcpCard,
|
||||
expectHostActionCards,
|
||||
expectHostProvidersCard,
|
||||
expectHostNoLocalOnlyRows,
|
||||
expectRetiredSidebarSectionsAbsent,
|
||||
expectHostPageVisible,
|
||||
@@ -21,7 +19,9 @@ import {
|
||||
} from "./helpers/settings";
|
||||
|
||||
test.describe("Settings host page", () => {
|
||||
test("connections section shows the seeded connection endpoint", async ({ page }) => {
|
||||
test("host page shows seeded label, connection endpoint, inject MCP toggle, and all action rows", async ({
|
||||
page,
|
||||
}) => {
|
||||
const serverId = getServerId();
|
||||
const port = getE2EDaemonPort();
|
||||
|
||||
@@ -29,44 +29,11 @@ test.describe("Settings host page", () => {
|
||||
await openSettings(page);
|
||||
await openSettingsHost(page, serverId);
|
||||
|
||||
await expectSettingsHeader(page, "Connections");
|
||||
await expectHostConnectionsCard(page, port);
|
||||
});
|
||||
|
||||
test("orchestration section shows the inject MCP toggle", async ({ page }) => {
|
||||
const serverId = getServerId();
|
||||
|
||||
await gotoAppShell(page);
|
||||
await openSettings(page);
|
||||
await openSettingsHost(page, serverId);
|
||||
|
||||
await openHostSection(page, serverId, "orchestration");
|
||||
await expectSettingsHeader(page, "Orchestration");
|
||||
await expectHostInjectMcpCard(page);
|
||||
});
|
||||
|
||||
test("providers section shows the providers card", async ({ page }) => {
|
||||
const serverId = getServerId();
|
||||
|
||||
await gotoAppShell(page);
|
||||
await openSettings(page);
|
||||
await openSettingsHost(page, serverId);
|
||||
|
||||
await expectHostProvidersCard(page, serverId);
|
||||
await expectSettingsHeader(page, "Providers");
|
||||
});
|
||||
|
||||
test("daemon section shows the host label and restart/remove action cards", async ({ page }) => {
|
||||
const serverId = getServerId();
|
||||
|
||||
await gotoAppShell(page);
|
||||
await openSettings(page);
|
||||
await openSettingsHost(page, serverId);
|
||||
|
||||
await openHostSection(page, serverId, "daemon");
|
||||
await expectSettingsHeader(page, "Daemon");
|
||||
await expectSettingsHeader(page, TEST_HOST_LABEL);
|
||||
await expectHostLabelDisplayed(page);
|
||||
await expectHostActionCards(page, serverId);
|
||||
await expectHostConnectionsCard(page, port);
|
||||
await expectHostInjectMcpCard(page);
|
||||
await expectHostActionCards(page);
|
||||
});
|
||||
|
||||
test("clicking the label pencil reveals the inline editor", async ({ page }) => {
|
||||
@@ -75,14 +42,13 @@ test.describe("Settings host page", () => {
|
||||
await gotoAppShell(page);
|
||||
await openSettings(page);
|
||||
await openSettingsHost(page, serverId);
|
||||
await openHostSection(page, serverId, "daemon");
|
||||
|
||||
await expectHostLabelDisplayed(page);
|
||||
await clickEditHostLabel(page);
|
||||
await expectHostLabelEditMode(page, TEST_HOST_LABEL);
|
||||
});
|
||||
|
||||
test("daemon section does not render pair-device or daemon-lifecycle rows for a remote daemon", async ({
|
||||
test("host page does not render pair-device or daemon-lifecycle rows for a remote daemon", async ({
|
||||
page,
|
||||
}) => {
|
||||
const serverId = getServerId();
|
||||
@@ -90,20 +56,19 @@ test.describe("Settings host page", () => {
|
||||
await gotoAppShell(page);
|
||||
await openSettings(page);
|
||||
await openSettingsHost(page, serverId);
|
||||
await openHostSection(page, serverId, "daemon");
|
||||
|
||||
// TODO: add local-daemon fixture for positive Pair/Daemon coverage.
|
||||
await expectHostNoLocalOnlyRows(page);
|
||||
});
|
||||
|
||||
test("settings sidebar exposes the flat App and Host section rows", async ({ page }) => {
|
||||
test("settings sidebar does not expose retired top-level sections", async ({ page }) => {
|
||||
await gotoAppShell(page);
|
||||
await openSettings(page);
|
||||
|
||||
await expectRetiredSidebarSectionsAbsent(page);
|
||||
});
|
||||
|
||||
test("navigating to /settings/hosts/[serverId] redirects to the connections section", async ({
|
||||
test("navigating to /settings/hosts/[serverId] directly renders the host page", async ({
|
||||
page,
|
||||
}) => {
|
||||
const serverId = getServerId();
|
||||
@@ -112,10 +77,9 @@ test.describe("Settings host page", () => {
|
||||
await page.goto(`/settings/hosts/${encodeURIComponent(serverId)}`);
|
||||
|
||||
await expectHostPageVisible(page, serverId);
|
||||
await expectSettingsHeader(page, "Connections");
|
||||
await openHostSection(page, serverId, "daemon");
|
||||
await expectSettingsHeader(page, TEST_HOST_LABEL);
|
||||
await expectHostLabelDisplayed(page);
|
||||
await expectHostActionCards(page, serverId);
|
||||
await expectHostActionCards(page);
|
||||
});
|
||||
|
||||
test("sidebar pins the local daemon host first with a Local marker", async ({ page }) => {
|
||||
|
||||
@@ -45,7 +45,7 @@ test.describe("Settings sidebar navigation", () => {
|
||||
await expectGeneralContent(page);
|
||||
});
|
||||
|
||||
test("/h/[serverId]/settings redirects to the host connections section", async ({ page }) => {
|
||||
test("/h/[serverId]/settings redirects to /settings/hosts/[serverId]", async ({ page }) => {
|
||||
await gotoAppShell(page);
|
||||
await verifyLegacyHostSettingsRedirect(page);
|
||||
});
|
||||
@@ -132,9 +132,7 @@ test.describe("Settings — compact master-detail", () => {
|
||||
await expectSettingsBackButton(page);
|
||||
});
|
||||
|
||||
test("tapping a host section row pushes /settings/hosts/[serverId]/connections", async ({
|
||||
page,
|
||||
}) => {
|
||||
test("tapping a host entry pushes /settings/hosts/[serverId]", async ({ page }) => {
|
||||
await gotoAppShell(page);
|
||||
await openCompactSettings(page);
|
||||
|
||||
|
||||
@@ -32,30 +32,11 @@ const DEFAULT_MAINTAIN_VISIBLE_CONTENT_POSITION = Object.freeze({
|
||||
autoscrollToTopThreshold: 0,
|
||||
});
|
||||
const HISTORY_START_THRESHOLD_PX = 96;
|
||||
const SCROLL_TO_INDEX_RETRY_DELAY_MS = 80;
|
||||
|
||||
interface NativeScrollToIndexFailedInfo {
|
||||
index: number;
|
||||
highestMeasuredFrameIndex: number;
|
||||
averageItemLength: number;
|
||||
}
|
||||
|
||||
interface NativeScrollIndexFallbackInput {
|
||||
index: number;
|
||||
averageItemLength: number;
|
||||
}
|
||||
|
||||
function keyExtractor(item: { id: string }): string {
|
||||
return item.id;
|
||||
}
|
||||
|
||||
export function getNativeScrollToIndexFallbackOffset(input: NativeScrollIndexFallbackInput) {
|
||||
if (!Number.isFinite(input.averageItemLength) || input.averageItemLength <= 0) {
|
||||
return 0;
|
||||
}
|
||||
return Math.max(0, input.averageItemLength * input.index);
|
||||
}
|
||||
|
||||
function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrategy }) {
|
||||
const {
|
||||
agentId,
|
||||
@@ -88,7 +69,6 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
|
||||
});
|
||||
const scrollOffsetYRef = useRef(0);
|
||||
const programmaticScrollEventBudgetRef = useRef(0);
|
||||
const scrollToIndexRetryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const [isNativeViewportSettling, setIsNativeViewportSettling] = useState(false);
|
||||
const nativeViewportSettlingFrameIdRef = useRef<number | null>(null);
|
||||
const historyStartReadyRef = useRef(false);
|
||||
@@ -107,13 +87,6 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
|
||||
}
|
||||
}, []);
|
||||
|
||||
const clearScrollToIndexRetry = useCallback(() => {
|
||||
if (scrollToIndexRetryTimeoutRef.current !== null) {
|
||||
clearTimeout(scrollToIndexRetryTimeoutRef.current);
|
||||
scrollToIndexRetryTimeoutRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const markNativeViewportSettling = useCallback(() => {
|
||||
clearNativeViewportSettling();
|
||||
setIsNativeViewportSettling(true);
|
||||
@@ -176,37 +149,6 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
|
||||
scrollToBottom,
|
||||
});
|
||||
|
||||
const scrollToHistoryIndex = useCallback(
|
||||
(index: number) => {
|
||||
programmaticScrollEventBudgetRef.current = 3;
|
||||
clearScrollToIndexRetry();
|
||||
flatListRef.current?.scrollToIndex({
|
||||
index,
|
||||
animated: true,
|
||||
viewPosition: 0.5,
|
||||
});
|
||||
},
|
||||
[clearScrollToIndexRetry],
|
||||
);
|
||||
|
||||
const handleScrollToIndexFailed = useStableEvent((info: NativeScrollToIndexFailedInfo) => {
|
||||
programmaticScrollEventBudgetRef.current = 3;
|
||||
flatListRef.current?.scrollToOffset({
|
||||
offset: getNativeScrollToIndexFallbackOffset(info),
|
||||
animated: true,
|
||||
});
|
||||
clearScrollToIndexRetry();
|
||||
scrollToIndexRetryTimeoutRef.current = setTimeout(() => {
|
||||
scrollToIndexRetryTimeoutRef.current = null;
|
||||
programmaticScrollEventBudgetRef.current = 3;
|
||||
flatListRef.current?.scrollToIndex({
|
||||
index: info.index,
|
||||
animated: true,
|
||||
viewPosition: 0.5,
|
||||
});
|
||||
}, SCROLL_TO_INDEX_RETRY_DELAY_MS);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
streamViewportMetricsRef.current = {
|
||||
containerKey: "native-virtualized",
|
||||
@@ -219,7 +161,6 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
|
||||
};
|
||||
scrollOffsetYRef.current = 0;
|
||||
clearNativeViewportSettling();
|
||||
clearScrollToIndexRetry();
|
||||
setIsNativeViewportSettling(false);
|
||||
historyStartReadyRef.current = false;
|
||||
const frame = requestAnimationFrame(() => {
|
||||
@@ -228,7 +169,7 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
|
||||
return () => {
|
||||
cancelAnimationFrame(frame);
|
||||
};
|
||||
}, [agentId, clearNativeViewportSettling, clearScrollToIndexRetry]);
|
||||
}, [agentId, clearNativeViewportSettling]);
|
||||
|
||||
useEffect(() => {
|
||||
const keyboardEvents = [
|
||||
@@ -249,9 +190,8 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
|
||||
subscription.remove();
|
||||
}
|
||||
clearNativeViewportSettling();
|
||||
clearScrollToIndexRetry();
|
||||
};
|
||||
}, [clearNativeViewportSettling, clearScrollToIndexRetry, markNativeViewportSettling]);
|
||||
}, [clearNativeViewportSettling, markNativeViewportSettling]);
|
||||
|
||||
useEffect(() => {
|
||||
bottomAnchorController.prepareForStickyContentChange();
|
||||
@@ -269,17 +209,6 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
|
||||
bottomAnchorController.prepareForStickyViewportChange();
|
||||
markNativeViewportSettling();
|
||||
},
|
||||
scrollToStreamItem: (target) => {
|
||||
programmaticScrollEventBudgetRef.current = 3;
|
||||
if (target.source === "liveHead") {
|
||||
flatListRef.current?.scrollToOffset({
|
||||
offset: 0,
|
||||
animated: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
scrollToHistoryIndex(target.index);
|
||||
},
|
||||
};
|
||||
viewportRef.current = handle;
|
||||
return () => {
|
||||
@@ -287,13 +216,7 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
|
||||
viewportRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [
|
||||
agentId,
|
||||
bottomAnchorController,
|
||||
markNativeViewportSettling,
|
||||
scrollToHistoryIndex,
|
||||
viewportRef,
|
||||
]);
|
||||
}, [agentId, bottomAnchorController, markNativeViewportSettling, viewportRef]);
|
||||
|
||||
const handleScroll = useStableEvent((event: NativeSyntheticEvent<NativeScrollEvent>) => {
|
||||
const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
|
||||
@@ -437,7 +360,6 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
|
||||
onScroll={handleScroll}
|
||||
scrollEventThrottle={16}
|
||||
onContentSizeChange={handleContentSizeChange}
|
||||
onScrollToIndexFailed={handleScrollToIndexFailed}
|
||||
maintainVisibleContentPosition={DEFAULT_MAINTAIN_VISIBLE_CONTENT_POSITION}
|
||||
initialNumToRender={40}
|
||||
maxToRenderPerBatch={40}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, {
|
||||
Fragment,
|
||||
type CSSProperties,
|
||||
useCallback,
|
||||
useEffect,
|
||||
@@ -66,10 +67,6 @@ function scrollElementToBottom(
|
||||
});
|
||||
}
|
||||
|
||||
function getStreamItemElementId(itemId: string): string {
|
||||
return `agent-stream-row-${itemId}`;
|
||||
}
|
||||
|
||||
function syncNearBottom(
|
||||
scrollContainer: HTMLElement | null,
|
||||
onNearBottomChange: (value: boolean) => void,
|
||||
@@ -471,21 +468,6 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
|
||||
}
|
||||
scheduleStickToBottom();
|
||||
},
|
||||
scrollToStreamItem: (target) => {
|
||||
setFollowOutput(false);
|
||||
cancelPendingStickToBottom();
|
||||
if (target.source === "historyVirtualized") {
|
||||
rowVirtualizer.scrollToIndex(target.index, { align: "center" });
|
||||
return;
|
||||
}
|
||||
const row = document.getElementById(getStreamItemElementId(target.itemId));
|
||||
row?.scrollIntoView({ block: "center", behavior: "auto" });
|
||||
const scrollContainer = scrollContainerRef.current;
|
||||
if (scrollContainer) {
|
||||
lastKnownScrollTopRef.current = scrollContainer.scrollTop;
|
||||
syncNearBottom(scrollContainer, onNearBottomChange);
|
||||
}
|
||||
},
|
||||
};
|
||||
viewportRef.current = handle;
|
||||
return () => {
|
||||
@@ -494,14 +476,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
|
||||
}
|
||||
cancelPendingStickToBottom();
|
||||
};
|
||||
}, [
|
||||
cancelPendingStickToBottom,
|
||||
forceStickToBottom,
|
||||
onNearBottomChange,
|
||||
rowVirtualizer,
|
||||
scheduleStickToBottom,
|
||||
viewportRef,
|
||||
]);
|
||||
}, [cancelPendingStickToBottom, forceStickToBottom, scheduleStickToBottom, viewportRef]);
|
||||
|
||||
const contentContainerStyle = useMemo((): CSSProperties => {
|
||||
return {
|
||||
@@ -545,16 +520,14 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
|
||||
);
|
||||
const mountedHistoryRows = useMemo(() => {
|
||||
return segments.historyMounted.map((item, index) => (
|
||||
<div id={getStreamItemElementId(item.id)} key={item.id}>
|
||||
<Fragment key={item.id}>
|
||||
{renderHistoryMountedRow(item, index, segments.historyMounted)}
|
||||
</div>
|
||||
</Fragment>
|
||||
));
|
||||
}, [renderHistoryMountedRow, segments.historyMounted]);
|
||||
const liveHeadRows = useMemo(() => {
|
||||
return segments.liveHead.map((item, index) => (
|
||||
<div id={getStreamItemElementId(item.id)} key={item.id}>
|
||||
{renderLiveHeadRow(item, index, segments.liveHead)}
|
||||
</div>
|
||||
<Fragment key={item.id}>{renderLiveHeadRow(item, index, segments.liveHead)}</Fragment>
|
||||
));
|
||||
}, [renderLiveHeadRow, segments.liveHead]);
|
||||
const liveAuxiliary = useMemo(() => {
|
||||
@@ -597,7 +570,6 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
|
||||
<div
|
||||
key={virtualRow.key}
|
||||
data-index={virtualRow.index}
|
||||
id={getStreamItemElementId(item.id)}
|
||||
ref={measureVirtualizedRowElement}
|
||||
style={renderVirtualRowStyle(virtualRow.start)}
|
||||
>
|
||||
|
||||
@@ -42,13 +42,6 @@ export interface StreamEdgeSlotProps {
|
||||
export interface StreamViewportHandle {
|
||||
scrollToBottom: (reason?: BottomAnchorLocalRequest["reason"]) => void;
|
||||
prepareForViewportChange: () => void;
|
||||
scrollToStreamItem: (target: StreamScrollTarget) => void;
|
||||
}
|
||||
|
||||
export interface StreamScrollTarget {
|
||||
source: "historyVirtualized" | "historyMounted" | "liveHead";
|
||||
index: number;
|
||||
itemId: string;
|
||||
}
|
||||
|
||||
export interface StreamSegmentRenderers {
|
||||
|
||||
@@ -36,7 +36,6 @@ import {
|
||||
CompactionMarker,
|
||||
MessageOuterSpacingProvider,
|
||||
type InlinePathTarget,
|
||||
type MessageFindHighlight,
|
||||
} from "@/components/message";
|
||||
import { PlanCard } from "@/components/plan-card";
|
||||
import type { StreamItem } from "@/types/stream";
|
||||
@@ -59,11 +58,6 @@ import { resolveStreamRenderStrategy } from "./strategy-resolver";
|
||||
import { type StreamSegmentRenderers, type StreamViewportHandle } from "./strategy";
|
||||
import { CompletedTurnFooterRow, TurnFooter, type TurnContentStrategy } from "./turn-footer";
|
||||
import { layoutStream, type StreamLayoutItem } from "./layout";
|
||||
import {
|
||||
buildAgentStreamSearchModel,
|
||||
findAgentStreamSearchMatches,
|
||||
type AgentStreamSearchMatch,
|
||||
} from "@/components/agent-stream-search-model";
|
||||
import {
|
||||
type BottomAnchorLocalRequest,
|
||||
type BottomAnchorRouteRequest,
|
||||
@@ -81,12 +75,6 @@ import {
|
||||
import { resolveWorkspaceIdByExecutionDirectory } from "@/utils/workspace-execution";
|
||||
import { navigateToPreparedWorkspaceTab } from "@/utils/workspace-navigation";
|
||||
import { useStableEvent } from "@/hooks/use-stable-event";
|
||||
import {
|
||||
FindBar,
|
||||
type PaneFindMatchState,
|
||||
type UsePaneFindResult,
|
||||
usePaneFind,
|
||||
} from "@/panels/pane-find";
|
||||
import { isWeb } from "@/constants/platform";
|
||||
import type { Theme } from "@/styles/theme";
|
||||
|
||||
@@ -209,69 +197,6 @@ function renderLiveHeadStreamItem(input: {
|
||||
return input.renderStreamItem(layoutItem);
|
||||
}
|
||||
|
||||
function createAgentStreamFindMatchState(input: {
|
||||
query: string;
|
||||
matches: AgentStreamSearchMatch[];
|
||||
currentMatchId: string | null;
|
||||
}): PaneFindMatchState {
|
||||
if (input.query.length === 0) {
|
||||
return { status: "empty" };
|
||||
}
|
||||
if (input.matches.length === 0) {
|
||||
return { status: "no-match" };
|
||||
}
|
||||
const currentIndex = Math.max(
|
||||
0,
|
||||
input.matches.findIndex((match) => match.id === input.currentMatchId),
|
||||
);
|
||||
return {
|
||||
status: "matched",
|
||||
current: currentIndex + 1,
|
||||
total: input.matches.length,
|
||||
};
|
||||
}
|
||||
|
||||
function createAgentStreamFindHighlightsByItemId(input: {
|
||||
matches: AgentStreamSearchMatch[];
|
||||
currentMatchId: string | null;
|
||||
}): Map<string, MessageFindHighlight[]> {
|
||||
const highlightsByItemId = new Map<string, MessageFindHighlight[]>();
|
||||
|
||||
for (const match of input.matches) {
|
||||
if (match.segmentKey !== "text") {
|
||||
continue;
|
||||
}
|
||||
|
||||
const itemKind = match.entry.item.kind;
|
||||
if (itemKind !== "user_message" && itemKind !== "assistant_message") {
|
||||
continue;
|
||||
}
|
||||
|
||||
const highlights = highlightsByItemId.get(match.entry.item.id) ?? [];
|
||||
highlights.push({
|
||||
id: match.id,
|
||||
start: match.start,
|
||||
end: match.end,
|
||||
isCurrent: match.id === input.currentMatchId,
|
||||
});
|
||||
highlightsByItemId.set(match.entry.item.id, highlights);
|
||||
}
|
||||
|
||||
return highlightsByItemId;
|
||||
}
|
||||
|
||||
interface AgentStreamFindState {
|
||||
query: string;
|
||||
matches: AgentStreamSearchMatch[];
|
||||
currentMatchId: string | null;
|
||||
}
|
||||
|
||||
const EMPTY_AGENT_STREAM_FIND_STATE: AgentStreamFindState = {
|
||||
query: "",
|
||||
matches: [],
|
||||
currentMatchId: null,
|
||||
};
|
||||
|
||||
export interface AgentStreamViewHandle {
|
||||
scrollToBottom(reason?: BottomAnchorLocalRequest["reason"]): void;
|
||||
prepareForViewportChange(): void;
|
||||
@@ -448,154 +373,6 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
streamRenderStrategy,
|
||||
],
|
||||
);
|
||||
const searchModel = useMemo(
|
||||
() =>
|
||||
buildAgentStreamSearchModel({
|
||||
streamItems,
|
||||
streamHead: streamHead ?? [],
|
||||
platform: isWeb ? "web" : "native",
|
||||
isMobileBreakpoint: isMobile,
|
||||
cwd: agent.cwd,
|
||||
}),
|
||||
[agent.cwd, isMobile, streamHead, streamItems],
|
||||
);
|
||||
const [findState, setFindState] = useState<AgentStreamFindState>(EMPTY_AGENT_STREAM_FIND_STATE);
|
||||
const findQuery = findState.query;
|
||||
const findMatches = findState.matches;
|
||||
const currentFindMatchId = findState.currentMatchId;
|
||||
const currentFindMatchIndex = useMemo(() => {
|
||||
if (findMatches.length === 0) {
|
||||
return -1;
|
||||
}
|
||||
const existingIndex = findMatches.findIndex((match) => match.id === currentFindMatchId);
|
||||
return existingIndex >= 0 ? existingIndex : 0;
|
||||
}, [currentFindMatchId, findMatches]);
|
||||
const findMatchState = useMemo(
|
||||
() =>
|
||||
createAgentStreamFindMatchState({
|
||||
query: findQuery,
|
||||
matches: findMatches,
|
||||
currentMatchId: currentFindMatchId,
|
||||
}),
|
||||
[currentFindMatchId, findMatches, findQuery],
|
||||
);
|
||||
const findHighlightsByItemId = useMemo(
|
||||
() =>
|
||||
createAgentStreamFindHighlightsByItemId({
|
||||
matches: findMatches,
|
||||
currentMatchId: currentFindMatchId,
|
||||
}),
|
||||
[currentFindMatchId, findMatches],
|
||||
);
|
||||
const scrollFindMatchIntoView = useCallback((match: AgentStreamSearchMatch | undefined) => {
|
||||
if (!match) {
|
||||
return;
|
||||
}
|
||||
viewportRef.current?.scrollToStreamItem({
|
||||
source: match.entry.source,
|
||||
index: match.entry.index,
|
||||
itemId: match.entry.item.id,
|
||||
});
|
||||
}, []);
|
||||
const paneFind = usePaneFind({
|
||||
matchState: findMatchState,
|
||||
onQuery: (query) => {
|
||||
const nextMatches = findAgentStreamSearchMatches({
|
||||
model: searchModel,
|
||||
query,
|
||||
});
|
||||
const nextMatchId = nextMatches[0]?.id ?? null;
|
||||
setFindState({ query, matches: nextMatches, currentMatchId: nextMatchId });
|
||||
scrollFindMatchIntoView(nextMatches[0]);
|
||||
return createAgentStreamFindMatchState({
|
||||
query,
|
||||
matches: nextMatches,
|
||||
currentMatchId: nextMatchId,
|
||||
});
|
||||
},
|
||||
onNext: () => {
|
||||
if (findMatches.length === 0) {
|
||||
return findMatchState;
|
||||
}
|
||||
const nextIndex = (currentFindMatchIndex + 1) % findMatches.length;
|
||||
const nextMatch = findMatches[nextIndex];
|
||||
setFindState((current) => ({
|
||||
...current,
|
||||
currentMatchId: nextMatch?.id ?? null,
|
||||
}));
|
||||
scrollFindMatchIntoView(nextMatch);
|
||||
return createAgentStreamFindMatchState({
|
||||
query: findQuery,
|
||||
matches: findMatches,
|
||||
currentMatchId: nextMatch?.id ?? null,
|
||||
});
|
||||
},
|
||||
onPrev: () => {
|
||||
if (findMatches.length === 0) {
|
||||
return findMatchState;
|
||||
}
|
||||
const nextIndex = (currentFindMatchIndex - 1 + findMatches.length) % findMatches.length;
|
||||
const nextMatch = findMatches[nextIndex];
|
||||
setFindState((current) => ({
|
||||
...current,
|
||||
currentMatchId: nextMatch?.id ?? null,
|
||||
}));
|
||||
scrollFindMatchIntoView(nextMatch);
|
||||
return createAgentStreamFindMatchState({
|
||||
query: findQuery,
|
||||
matches: findMatches,
|
||||
currentMatchId: nextMatch?.id ?? null,
|
||||
});
|
||||
},
|
||||
onClose: () => {
|
||||
setFindState(EMPTY_AGENT_STREAM_FIND_STATE);
|
||||
},
|
||||
});
|
||||
useEffect(() => {
|
||||
setFindState((current) => {
|
||||
if (current.query.length === 0) {
|
||||
return current.currentMatchId === null && current.matches.length === 0
|
||||
? current
|
||||
: EMPTY_AGENT_STREAM_FIND_STATE;
|
||||
}
|
||||
|
||||
const nextMatches = findAgentStreamSearchMatches({
|
||||
model: searchModel,
|
||||
query: current.query,
|
||||
});
|
||||
let keepsCurrentMatch = false;
|
||||
if (current.currentMatchId) {
|
||||
for (const match of nextMatches) {
|
||||
if (match.id === current.currentMatchId) {
|
||||
keepsCurrentMatch = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
const nextMatchId = keepsCurrentMatch
|
||||
? current.currentMatchId
|
||||
: (nextMatches[0]?.id ?? null);
|
||||
|
||||
let matchesUnchanged = current.matches.length === nextMatches.length;
|
||||
if (matchesUnchanged) {
|
||||
for (let index = 0; index < current.matches.length; index += 1) {
|
||||
if (current.matches[index]?.id !== nextMatches[index]?.id) {
|
||||
matchesUnchanged = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (matchesUnchanged && current.currentMatchId === nextMatchId) {
|
||||
return current;
|
||||
}
|
||||
|
||||
return {
|
||||
query: current.query,
|
||||
matches: nextMatches,
|
||||
currentMatchId: nextMatchId,
|
||||
};
|
||||
});
|
||||
}, [searchModel]);
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
@@ -646,11 +423,11 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
client={client}
|
||||
isFirstInGroup={layoutItem.isFirstInUserGroup}
|
||||
isLastInGroup={layoutItem.isLastInUserGroup}
|
||||
findHighlights={findHighlightsByItemId.get(item.id)}
|
||||
deliveryHint={item.deliveryHint}
|
||||
/>
|
||||
);
|
||||
},
|
||||
[agent.capabilities, agentId, client, findHighlightsByItemId, resolvedServerId],
|
||||
[agent.capabilities, agentId, client, resolvedServerId],
|
||||
);
|
||||
|
||||
const renderAssistantMessageItem = useCallback(
|
||||
@@ -670,19 +447,11 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
serverId={resolvedServerId}
|
||||
client={client}
|
||||
spacing={layoutItem.assistantSpacing}
|
||||
findHighlights={findHighlightsByItemId.get(item.id)}
|
||||
/>
|
||||
</AssistantFileLinkResolverProvider>
|
||||
);
|
||||
},
|
||||
[
|
||||
client,
|
||||
findHighlightsByItemId,
|
||||
handleInlinePathPress,
|
||||
resolvedServerId,
|
||||
toast,
|
||||
workspaceRoot,
|
||||
],
|
||||
[client, handleInlinePathPress, resolvedServerId, toast, workspaceRoot],
|
||||
);
|
||||
|
||||
const renderThoughtItem = useCallback(
|
||||
@@ -932,7 +701,6 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
return (
|
||||
<ToolCallSheetProvider>
|
||||
<View style={stylesheet.container}>
|
||||
<AgentStreamFindBarSlot paneFind={paneFind} />
|
||||
<MessageOuterSpacingProvider disableOuterSpacing>
|
||||
{streamRenderStrategy.render({
|
||||
agentId,
|
||||
@@ -981,10 +749,6 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
|
||||
export const AgentStreamView = memo(AgentStreamViewComponent);
|
||||
AgentStreamView.displayName = "AgentStreamView";
|
||||
|
||||
function AgentStreamFindBarSlot({ paneFind }: { paneFind: UsePaneFindResult }) {
|
||||
return paneFind.isOpen ? <FindBar {...paneFind.findBarProps} /> : null;
|
||||
}
|
||||
|
||||
interface ToolCallSlotProps extends Omit<
|
||||
ComponentProps<typeof ToolCall>,
|
||||
"onInlineDetailsExpandedChange"
|
||||
|
||||
@@ -867,8 +867,7 @@ function RootStack() {
|
||||
<Stack.Screen name="h/[serverId]/sessions" />
|
||||
<Stack.Screen name="h/[serverId]/open-project" />
|
||||
<Stack.Screen name="h/[serverId]/settings" />
|
||||
<Stack.Screen name="settings/hosts/[serverId]/index" />
|
||||
<Stack.Screen name="settings/hosts/[serverId]/[hostSection]" />
|
||||
<Stack.Screen name="settings/hosts/[serverId]" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import { useMemo } from "react";
|
||||
import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
|
||||
import SettingsScreen from "@/screens/settings-screen";
|
||||
|
||||
export default function SettingsHostRoute() {
|
||||
const params = useLocalSearchParams<{ serverId?: string }>();
|
||||
const serverId = typeof params.serverId === "string" ? params.serverId.trim() : "";
|
||||
const view = useMemo(() => ({ kind: "host" as const, serverId }), [serverId]);
|
||||
|
||||
return (
|
||||
<HostRouteBootstrapBoundary>
|
||||
<SettingsScreen view={view} />
|
||||
</HostRouteBootstrapBoundary>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import { useMemo } from "react";
|
||||
import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
|
||||
import SettingsScreen from "@/screens/settings-screen";
|
||||
import { type HostSectionSlug, isHostSectionSlug } from "@/utils/host-routes";
|
||||
|
||||
export default function SettingsHostSectionRoute() {
|
||||
const params = useLocalSearchParams<{ serverId?: string; hostSection?: string }>();
|
||||
const serverId = typeof params.serverId === "string" ? params.serverId.trim() : "";
|
||||
const rawSection = typeof params.hostSection === "string" ? params.hostSection : "";
|
||||
const section: HostSectionSlug = isHostSectionSlug(rawSection) ? rawSection : "connections";
|
||||
const view = useMemo(() => ({ kind: "host" as const, serverId, section }), [serverId, section]);
|
||||
|
||||
return (
|
||||
<HostRouteBootstrapBoundary>
|
||||
<SettingsScreen view={view} />
|
||||
</HostRouteBootstrapBoundary>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import { Redirect, useLocalSearchParams } from "expo-router";
|
||||
import { buildSettingsHostSectionRoute, buildSettingsRoute } from "@/utils/host-routes";
|
||||
|
||||
export default function SettingsHostIndexRoute() {
|
||||
const params = useLocalSearchParams<{ serverId?: string }>();
|
||||
const serverId = typeof params.serverId === "string" ? params.serverId.trim() : "";
|
||||
|
||||
if (!serverId) {
|
||||
return <Redirect href={buildSettingsRoute()} />;
|
||||
}
|
||||
|
||||
return <Redirect href={buildSettingsHostSectionRoute(serverId, "connections")} />;
|
||||
}
|
||||
@@ -1,190 +0,0 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import type { StreamItem } from "@/types/stream";
|
||||
import {
|
||||
buildAgentStreamSearchModel,
|
||||
findAgentStreamSearchMatches,
|
||||
} from "./agent-stream-search-model";
|
||||
|
||||
function timestamp(seed: number): Date {
|
||||
return new Date(`2026-01-01T00:00:${seed.toString().padStart(2, "0")}.000Z`);
|
||||
}
|
||||
|
||||
function userMessage(id: string, text: string, seed = 1): StreamItem {
|
||||
return {
|
||||
kind: "user_message",
|
||||
id,
|
||||
text,
|
||||
timestamp: timestamp(seed),
|
||||
};
|
||||
}
|
||||
|
||||
function assistantMessage(id: string, text: string, seed = 1): StreamItem {
|
||||
return {
|
||||
kind: "assistant_message",
|
||||
id,
|
||||
text,
|
||||
timestamp: timestamp(seed),
|
||||
};
|
||||
}
|
||||
|
||||
function thought(id: string, text: string, seed = 1): StreamItem {
|
||||
return {
|
||||
kind: "thought",
|
||||
id,
|
||||
text,
|
||||
status: "ready",
|
||||
timestamp: timestamp(seed),
|
||||
};
|
||||
}
|
||||
|
||||
function activityLog(id: string, message: string, seed = 1): StreamItem {
|
||||
return {
|
||||
kind: "activity_log",
|
||||
id,
|
||||
activityType: "info",
|
||||
message,
|
||||
metadata: { hidden: "metadata is not searched" },
|
||||
timestamp: timestamp(seed),
|
||||
};
|
||||
}
|
||||
|
||||
function todoList(id: string, seed = 1): StreamItem {
|
||||
return {
|
||||
kind: "todo_list",
|
||||
id,
|
||||
provider: "codex",
|
||||
items: [
|
||||
{ text: "Write the red test", completed: true },
|
||||
{ text: "Make search green", completed: false },
|
||||
],
|
||||
timestamp: timestamp(seed),
|
||||
};
|
||||
}
|
||||
|
||||
function getSearchableText(item: StreamItem): string {
|
||||
const model = buildAgentStreamSearchModel({
|
||||
streamItems: [item],
|
||||
streamHead: [],
|
||||
platform: "web",
|
||||
isMobileBreakpoint: true,
|
||||
});
|
||||
return model.entries[0]?.text ?? "";
|
||||
}
|
||||
|
||||
describe("buildAgentStreamSearchModel", () => {
|
||||
it("indexes user and assistant message text", () => {
|
||||
expect(getSearchableText(userMessage("u1", "user text"))).toBe("user text");
|
||||
expect(getSearchableText(assistantMessage("a1", "assistant text"))).toBe("assistant text");
|
||||
});
|
||||
|
||||
it("excludes non-message rows that do not render find highlights", () => {
|
||||
expect(getSearchableText(thought("t1", "thought text"))).toBe("");
|
||||
expect(getSearchableText(activityLog("l1", "activity text"))).toBe("");
|
||||
expect(getSearchableText(todoList("todo"))).toBe("");
|
||||
});
|
||||
|
||||
it("excludes tool call rows from the search index", () => {
|
||||
const toolCall: StreamItem = {
|
||||
kind: "tool_call",
|
||||
id: "shell",
|
||||
timestamp: timestamp(1),
|
||||
payload: {
|
||||
source: "agent",
|
||||
data: {
|
||||
provider: "codex",
|
||||
callId: "call-shell",
|
||||
name: "exec_command",
|
||||
status: "completed",
|
||||
error: null,
|
||||
detail: {
|
||||
type: "shell",
|
||||
command: "npm run typecheck",
|
||||
output: "internal output should stay out",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
expect(getSearchableText(toolCall)).toBe("");
|
||||
});
|
||||
|
||||
it("orders virtualized history, mounted history, live head, and optimistic items deterministically", () => {
|
||||
const committed: StreamItem[] = [];
|
||||
for (let index = 0; index < 64; index += 1) {
|
||||
committed.push(userMessage(`u${index}`, `history ${index}`, index));
|
||||
}
|
||||
const optimistic = userMessage("optimistic", "draft message", 65);
|
||||
const liveHead = [assistantMessage("live", "live answer", 66)];
|
||||
|
||||
const model = buildAgentStreamSearchModel({
|
||||
streamItems: committed,
|
||||
optimisticItems: [optimistic],
|
||||
streamHead: liveHead,
|
||||
platform: "web",
|
||||
isMobileBreakpoint: false,
|
||||
});
|
||||
|
||||
expect(model.entries.at(0)?.item.id).toBe("optimistic");
|
||||
expect(model.entries.map((entry) => entry.source)).toEqual([
|
||||
...Array.from(
|
||||
{ length: model.segments.historyVirtualized.length },
|
||||
() => "historyVirtualized",
|
||||
),
|
||||
...Array.from({ length: model.segments.historyMounted.length }, () => "historyMounted"),
|
||||
"liveHead",
|
||||
]);
|
||||
expect(model.entries.at(-1)?.item.id).toBe("live");
|
||||
});
|
||||
|
||||
it("does not duplicate an optimistic item once committed history has the same id", () => {
|
||||
const committed = [userMessage("u1", "committed draft")];
|
||||
const model = buildAgentStreamSearchModel({
|
||||
streamItems: committed,
|
||||
optimisticItems: [userMessage("u1", "optimistic draft")],
|
||||
streamHead: [],
|
||||
platform: "web",
|
||||
isMobileBreakpoint: true,
|
||||
});
|
||||
|
||||
expect(model.entries.map((entry) => entry.text)).toEqual(["committed draft"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("findAgentStreamSearchMatches", () => {
|
||||
it("returns stable match ids from item identity and local occurrence data", () => {
|
||||
const model = buildAgentStreamSearchModel({
|
||||
streamItems: [assistantMessage("a1", "Alpha alpha beta")],
|
||||
streamHead: [assistantMessage("h1", "alpha live")],
|
||||
platform: "web",
|
||||
isMobileBreakpoint: true,
|
||||
});
|
||||
|
||||
const matches = findAgentStreamSearchMatches({
|
||||
model,
|
||||
query: "alpha",
|
||||
});
|
||||
|
||||
expect(matches.map((match) => match.id)).toEqual([
|
||||
"a1:text:0:0:5",
|
||||
"a1:text:1:6:11",
|
||||
"h1:text:0:0:5",
|
||||
]);
|
||||
expect(matches.map((match) => match.entry.item.id)).toEqual(["a1", "a1", "h1"]);
|
||||
});
|
||||
|
||||
it("skips fenced code blocks while preserving message offsets for highlights", () => {
|
||||
const model = buildAgentStreamSearchModel({
|
||||
streamItems: [assistantMessage("a1", "before alpha\n```\nalpha\n```\nafter alpha")],
|
||||
streamHead: [],
|
||||
platform: "web",
|
||||
isMobileBreakpoint: true,
|
||||
});
|
||||
|
||||
const matches = findAgentStreamSearchMatches({
|
||||
model,
|
||||
query: "alpha",
|
||||
});
|
||||
|
||||
expect(matches.map((match) => match.id)).toEqual(["a1:text:0:7:12", "a1:text:0:33:38"]);
|
||||
});
|
||||
});
|
||||
@@ -1,276 +0,0 @@
|
||||
import type { StreamItem } from "@/types/stream";
|
||||
import {
|
||||
findMountedWindowStart,
|
||||
getWebMountedRecentStreamItems,
|
||||
getWebPartialVirtualizationThreshold,
|
||||
} from "@/agent-stream/web-virtualization";
|
||||
|
||||
type AgentStreamSearchSource = "historyVirtualized" | "historyMounted" | "liveHead";
|
||||
|
||||
interface AgentStreamSearchTextSegment {
|
||||
key: string;
|
||||
text: string;
|
||||
startOffset: number;
|
||||
}
|
||||
|
||||
interface AgentStreamSearchEntry {
|
||||
item: StreamItem;
|
||||
source: AgentStreamSearchSource;
|
||||
index: number;
|
||||
text: string;
|
||||
segments: AgentStreamSearchTextSegment[];
|
||||
}
|
||||
|
||||
export interface AgentStreamSearchMatch {
|
||||
id: string;
|
||||
entry: AgentStreamSearchEntry;
|
||||
segmentKey: string;
|
||||
occurrenceIndex: number;
|
||||
start: number;
|
||||
end: number;
|
||||
}
|
||||
|
||||
interface AgentStreamSearchModel {
|
||||
entries: AgentStreamSearchEntry[];
|
||||
segments: {
|
||||
historyVirtualized: AgentStreamSearchEntry[];
|
||||
historyMounted: AgentStreamSearchEntry[];
|
||||
liveHead: AgentStreamSearchEntry[];
|
||||
};
|
||||
}
|
||||
|
||||
interface BuildAgentStreamSearchModelInput {
|
||||
platform: "web" | "native";
|
||||
isMobileBreakpoint: boolean;
|
||||
streamItems: StreamItem[];
|
||||
streamHead: StreamItem[];
|
||||
optimisticItems?: StreamItem[];
|
||||
cwd?: string;
|
||||
}
|
||||
|
||||
interface FindAgentStreamSearchMatchesInput {
|
||||
model: AgentStreamSearchModel;
|
||||
query: string;
|
||||
}
|
||||
|
||||
function getFenceDelimiter(line: string): string | null {
|
||||
const match = /^( {0,3})(`{3,}|~{3,})/.exec(line);
|
||||
return match?.[2] ?? null;
|
||||
}
|
||||
|
||||
function getMessageSearchableSegments(text: string): AgentStreamSearchTextSegment[] {
|
||||
const segments: AgentStreamSearchTextSegment[] = [];
|
||||
let activeFenceCharacter: "`" | "~" | null = null;
|
||||
let activeFenceLength = 0;
|
||||
let currentText = "";
|
||||
let currentStartOffset = 0;
|
||||
let offset = 0;
|
||||
|
||||
const flush = () => {
|
||||
if (currentText.length > 0) {
|
||||
segments.push({ key: "text", text: currentText, startOffset: currentStartOffset });
|
||||
currentText = "";
|
||||
}
|
||||
};
|
||||
|
||||
for (const line of text.split("\n")) {
|
||||
const lineWithBreak = offset + line.length < text.length ? `${line}\n` : line;
|
||||
const fenceDelimiter = getFenceDelimiter(line);
|
||||
const isClosingFence =
|
||||
activeFenceCharacter &&
|
||||
fenceDelimiter?.[0] === activeFenceCharacter &&
|
||||
fenceDelimiter.length >= activeFenceLength;
|
||||
const isOpeningFence = !activeFenceCharacter && fenceDelimiter;
|
||||
const isIndentedCode = !activeFenceCharacter && (/^( {4,}|\t)/.test(line) || line === " ");
|
||||
|
||||
if (isOpeningFence || activeFenceCharacter || isIndentedCode) {
|
||||
flush();
|
||||
} else {
|
||||
if (currentText.length === 0) {
|
||||
currentStartOffset = offset;
|
||||
}
|
||||
currentText += lineWithBreak;
|
||||
}
|
||||
|
||||
if (isOpeningFence) {
|
||||
activeFenceCharacter = fenceDelimiter[0] as "`" | "~";
|
||||
activeFenceLength = fenceDelimiter.length;
|
||||
} else if (isClosingFence) {
|
||||
activeFenceCharacter = null;
|
||||
activeFenceLength = 0;
|
||||
}
|
||||
|
||||
offset += lineWithBreak.length;
|
||||
}
|
||||
|
||||
flush();
|
||||
return segments;
|
||||
}
|
||||
|
||||
function getAgentStreamItemSearchableSegments(item: StreamItem): AgentStreamSearchTextSegment[] {
|
||||
switch (item.kind) {
|
||||
case "user_message":
|
||||
case "assistant_message":
|
||||
return item.text ? getMessageSearchableSegments(item.text) : [];
|
||||
case "thought":
|
||||
case "activity_log":
|
||||
case "todo_list":
|
||||
case "tool_call":
|
||||
case "compaction":
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function mergeOptimisticItems(input: {
|
||||
streamItems: StreamItem[];
|
||||
optimisticItems: StreamItem[] | undefined;
|
||||
}): StreamItem[] {
|
||||
if (!input.optimisticItems || input.optimisticItems.length === 0) {
|
||||
return input.streamItems;
|
||||
}
|
||||
const committedIds = new Set(input.streamItems.map((item) => item.id));
|
||||
const pendingOptimisticItems = input.optimisticItems.filter((item) => !committedIds.has(item.id));
|
||||
if (pendingOptimisticItems.length === 0) {
|
||||
return input.streamItems;
|
||||
}
|
||||
return [...pendingOptimisticItems, ...input.streamItems];
|
||||
}
|
||||
|
||||
function buildEntries(input: {
|
||||
items: StreamItem[];
|
||||
source: AgentStreamSearchSource;
|
||||
startIndex: number;
|
||||
cwd: string | undefined;
|
||||
}): AgentStreamSearchEntry[] {
|
||||
return input.items.map((item, offset) => {
|
||||
const segments = getAgentStreamItemSearchableSegments(item);
|
||||
return {
|
||||
item,
|
||||
source: input.source,
|
||||
index: input.startIndex + offset,
|
||||
text: segments.map((segment) => segment.text).join("\n"),
|
||||
segments,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function orderStreamItems(input: {
|
||||
items: StreamItem[];
|
||||
platform: "web" | "native";
|
||||
}): StreamItem[] {
|
||||
return input.platform === "native" ? [...input.items].toReversed() : input.items;
|
||||
}
|
||||
|
||||
function splitOrderedHistory(input: {
|
||||
orderedTail: StreamItem[];
|
||||
platform: "web" | "native";
|
||||
isMobileBreakpoint: boolean;
|
||||
}): {
|
||||
historyVirtualizedItems: StreamItem[];
|
||||
historyMountedItems: StreamItem[];
|
||||
} {
|
||||
const shouldSplitHistory =
|
||||
input.platform === "web" &&
|
||||
!input.isMobileBreakpoint &&
|
||||
input.orderedTail.length > getWebPartialVirtualizationThreshold();
|
||||
if (!shouldSplitHistory) {
|
||||
return {
|
||||
historyVirtualizedItems: [],
|
||||
historyMountedItems: input.orderedTail,
|
||||
};
|
||||
}
|
||||
const mountedWindowStart = findMountedWindowStart({
|
||||
items: input.orderedTail,
|
||||
minMountedCount: getWebMountedRecentStreamItems(),
|
||||
});
|
||||
return {
|
||||
historyVirtualizedItems: input.orderedTail.slice(0, mountedWindowStart),
|
||||
historyMountedItems: input.orderedTail.slice(mountedWindowStart),
|
||||
};
|
||||
}
|
||||
|
||||
export function buildAgentStreamSearchModel(
|
||||
input: BuildAgentStreamSearchModelInput,
|
||||
): AgentStreamSearchModel {
|
||||
const tail = mergeOptimisticItems({
|
||||
streamItems: input.streamItems,
|
||||
optimisticItems: input.optimisticItems,
|
||||
});
|
||||
const orderedTail = orderStreamItems({
|
||||
items: tail,
|
||||
platform: input.platform,
|
||||
});
|
||||
const orderedHead = orderStreamItems({
|
||||
items: input.streamHead,
|
||||
platform: input.platform,
|
||||
});
|
||||
const splitHistory = splitOrderedHistory({
|
||||
orderedTail,
|
||||
platform: input.platform,
|
||||
isMobileBreakpoint: input.isMobileBreakpoint,
|
||||
});
|
||||
const historyVirtualized = buildEntries({
|
||||
items: splitHistory.historyVirtualizedItems,
|
||||
source: "historyVirtualized",
|
||||
startIndex: 0,
|
||||
cwd: input.cwd,
|
||||
});
|
||||
const historyMounted = buildEntries({
|
||||
items: splitHistory.historyMountedItems,
|
||||
source: "historyMounted",
|
||||
startIndex: historyVirtualized.length,
|
||||
cwd: input.cwd,
|
||||
});
|
||||
const liveHead = buildEntries({
|
||||
items: orderedHead,
|
||||
source: "liveHead",
|
||||
startIndex: historyVirtualized.length + historyMounted.length,
|
||||
cwd: input.cwd,
|
||||
});
|
||||
return {
|
||||
entries: [...historyVirtualized, ...historyMounted, ...liveHead],
|
||||
segments: {
|
||||
historyVirtualized,
|
||||
historyMounted,
|
||||
liveHead,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function findAgentStreamSearchMatches(
|
||||
input: FindAgentStreamSearchMatchesInput,
|
||||
): AgentStreamSearchMatch[] {
|
||||
const normalizedQuery = input.query.toLocaleLowerCase();
|
||||
if (!normalizedQuery) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const matches: AgentStreamSearchMatch[] = [];
|
||||
for (const entry of input.model.entries) {
|
||||
for (const segment of entry.segments) {
|
||||
const normalizedText = segment.text.toLocaleLowerCase();
|
||||
let occurrenceIndex = 0;
|
||||
let fromIndex = 0;
|
||||
while (fromIndex <= normalizedText.length) {
|
||||
const start = normalizedText.indexOf(normalizedQuery, fromIndex);
|
||||
if (start < 0) {
|
||||
break;
|
||||
}
|
||||
const end = start + input.query.length;
|
||||
const absoluteStart = segment.startOffset + start;
|
||||
const absoluteEnd = segment.startOffset + end;
|
||||
matches.push({
|
||||
id: `${entry.item.id}:${segment.key}:${occurrenceIndex}:${absoluteStart}:${absoluteEnd}`,
|
||||
entry,
|
||||
segmentKey: segment.key,
|
||||
occurrenceIndex,
|
||||
start: absoluteStart,
|
||||
end: absoluteEnd,
|
||||
});
|
||||
occurrenceIndex += 1;
|
||||
fromIndex = end;
|
||||
}
|
||||
}
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
@@ -1,492 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import React from "react";
|
||||
import { act } from "react";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { BrowserPane } from "@/components/browser-pane.electron";
|
||||
import {
|
||||
PaneFocusProvider,
|
||||
PaneProvider,
|
||||
createPaneFocusContextValue,
|
||||
type PaneContextValue,
|
||||
} from "@/panels/pane-context";
|
||||
import {
|
||||
createPaneFindPaneId,
|
||||
handlePaneFindKeyboardAction,
|
||||
setActivePaneFindPaneId,
|
||||
} from "@/panels/pane-find-registry";
|
||||
|
||||
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT =
|
||||
true;
|
||||
|
||||
const updateBrowser = vi.fn();
|
||||
let browserState = {
|
||||
browsersById: {
|
||||
"browser-a": {
|
||||
id: "browser-a",
|
||||
url: "https://example.com",
|
||||
title: "",
|
||||
faviconUrl: null,
|
||||
canGoBack: false,
|
||||
canGoForward: false,
|
||||
isLoading: false,
|
||||
lastError: null,
|
||||
},
|
||||
},
|
||||
updateBrowser,
|
||||
};
|
||||
|
||||
const { theme } = vi.hoisted(() => ({
|
||||
theme: {
|
||||
borderRadius: { md: 6 },
|
||||
colors: {
|
||||
accent: "#3b82f6",
|
||||
border: "#333",
|
||||
foreground: "#fff",
|
||||
foregroundMuted: "#aaa",
|
||||
palette: { red: { 500: "#ef4444" } },
|
||||
surface0: "#111",
|
||||
surface1: "#222",
|
||||
surface2: "#333",
|
||||
},
|
||||
fontSize: { sm: 13, xs: 11 },
|
||||
spacing: { 1: 4, 2: 8 },
|
||||
},
|
||||
}));
|
||||
|
||||
const desktopBridge = vi.hoisted(() => {
|
||||
const foundInPageListeners = new Set<(result: unknown) => void>();
|
||||
return {
|
||||
foundInPageListeners,
|
||||
findInPage: vi.fn<(browserId: string, text: string, options?: unknown) => number>(),
|
||||
setActivePane: vi.fn<(browserId: string | null) => Promise<void>>(),
|
||||
stopFindInPage: vi.fn<(browserId: string, action: string) => void>(),
|
||||
onFoundInPage: vi.fn((_browserId: string, listener: (result: unknown) => void) => {
|
||||
const scopedListener = (result: unknown) => listener(result);
|
||||
foundInPageListeners.add(scopedListener);
|
||||
return () => {
|
||||
foundInPageListeners.delete(scopedListener);
|
||||
};
|
||||
}),
|
||||
eventsOn: vi.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("lucide-react-native", () => {
|
||||
const createIcon = (name: string) =>
|
||||
function Icon() {
|
||||
return React.createElement("span", { "data-icon": name });
|
||||
};
|
||||
|
||||
return {
|
||||
ArrowLeft: createIcon("ArrowLeft"),
|
||||
ArrowRight: createIcon("ArrowRight"),
|
||||
ChevronDown: createIcon("ChevronDown"),
|
||||
ChevronUp: createIcon("ChevronUp"),
|
||||
MousePointer2: createIcon("MousePointer2"),
|
||||
RotateCw: createIcon("RotateCw"),
|
||||
X: createIcon("X"),
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("react-native", () => {
|
||||
const MockView = ({
|
||||
children,
|
||||
testID,
|
||||
style,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
testID?: string;
|
||||
style?: unknown;
|
||||
}) => React.createElement("div", { "data-testid": testID, style }, children);
|
||||
const MockText = ({ children }: { children?: React.ReactNode }) =>
|
||||
React.createElement("span", null, children);
|
||||
const MockPressable = ({
|
||||
children,
|
||||
disabled,
|
||||
onPress,
|
||||
testID,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
onPress?: () => void;
|
||||
testID?: string;
|
||||
}) =>
|
||||
React.createElement(
|
||||
"button",
|
||||
{
|
||||
"data-testid": testID,
|
||||
disabled,
|
||||
onClick: () => {
|
||||
if (!disabled) onPress?.();
|
||||
},
|
||||
type: "button",
|
||||
},
|
||||
children,
|
||||
);
|
||||
const MockTextInput = React.forwardRef<
|
||||
HTMLInputElement,
|
||||
{
|
||||
value?: string;
|
||||
onChangeText?: (text: string) => void;
|
||||
onFocus?: () => void;
|
||||
onKeyPress?: (event: {
|
||||
nativeEvent: { key: string; shiftKey?: boolean };
|
||||
preventDefault: () => void;
|
||||
}) => void;
|
||||
onSubmitEditing?: () => void;
|
||||
testID?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
>(function TextInput(
|
||||
{ value, onChangeText, onFocus, onKeyPress, onSubmitEditing, testID, placeholder },
|
||||
ref,
|
||||
) {
|
||||
return React.createElement("input", {
|
||||
"data-testid": testID,
|
||||
onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
onChangeText?.(event.currentTarget.value),
|
||||
onFocus,
|
||||
onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
onKeyPress?.({
|
||||
nativeEvent: { key: event.key, shiftKey: event.shiftKey },
|
||||
preventDefault: () => event.preventDefault(),
|
||||
});
|
||||
if (event.key === "Enter") {
|
||||
onSubmitEditing?.();
|
||||
}
|
||||
},
|
||||
placeholder,
|
||||
ref,
|
||||
value: value ?? "",
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
Platform: {
|
||||
OS: "web",
|
||||
select: (options: Record<string, unknown>) => options.web ?? options.default,
|
||||
},
|
||||
Pressable: MockPressable,
|
||||
Text: MockText,
|
||||
TextInput: MockTextInput,
|
||||
View: MockView,
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("react-native-unistyles", () => ({
|
||||
StyleSheet: {
|
||||
hairlineWidth: 1,
|
||||
create: (factory: unknown) =>
|
||||
typeof factory === "function" ? (factory as (t: typeof theme) => unknown)(theme) : factory,
|
||||
},
|
||||
useUnistyles: () => ({ theme }),
|
||||
}));
|
||||
|
||||
vi.mock("@/attachments/workspace-attachments-store", () => ({
|
||||
buildWorkspaceAttachmentScopeKey: () => "scope-a",
|
||||
useWorkspaceAttachments: () => [],
|
||||
useWorkspaceAttachmentsStore: (
|
||||
selector: (state: { setWorkspaceAttachments: () => void }) => unknown,
|
||||
) => selector({ setWorkspaceAttachments: vi.fn() }),
|
||||
}));
|
||||
|
||||
vi.mock("@/desktop/host", () => ({
|
||||
getDesktopHost: () => ({
|
||||
browser: {
|
||||
findInPage: desktopBridge.findInPage,
|
||||
onFoundInPage: desktopBridge.onFoundInPage,
|
||||
setActivePane: desktopBridge.setActivePane,
|
||||
stopFindInPage: desktopBridge.stopFindInPage,
|
||||
},
|
||||
events: { on: desktopBridge.eventsOn },
|
||||
}),
|
||||
isElectronRuntime: () => true,
|
||||
}));
|
||||
|
||||
vi.mock("@/constants/layout", () => ({
|
||||
WORKSPACE_SECONDARY_HEADER_HEIGHT: 36,
|
||||
}));
|
||||
|
||||
vi.mock("@/stores/browser-store", () => ({
|
||||
normalizeWorkspaceBrowserUrl: (url: string) => url,
|
||||
useBrowserStore: (selector: (state: typeof browserState) => unknown) => selector(browserState),
|
||||
}));
|
||||
|
||||
type FakeWebview = HTMLDivElement & {
|
||||
getURL: ReturnType<typeof vi.fn<() => string>>;
|
||||
canGoBack: ReturnType<typeof vi.fn<() => boolean>>;
|
||||
canGoForward: ReturnType<typeof vi.fn<() => boolean>>;
|
||||
reload: ReturnType<typeof vi.fn<() => void>>;
|
||||
stop: ReturnType<typeof vi.fn<() => void>>;
|
||||
};
|
||||
|
||||
let container: HTMLDivElement | null = null;
|
||||
let root: Root | null = null;
|
||||
let webview: FakeWebview | null = null;
|
||||
let nextRequestId = 1;
|
||||
let restoreCreateElement: (() => void) | null = null;
|
||||
|
||||
const paneInstanceId = createPaneFindPaneId({
|
||||
serverId: "server-a",
|
||||
workspaceId: "workspace-a",
|
||||
paneId: "pane-a",
|
||||
});
|
||||
|
||||
const paneContextValue: PaneContextValue = {
|
||||
serverId: "server-a",
|
||||
workspaceId: "workspace-a",
|
||||
paneInstanceId,
|
||||
tabId: "browser_browser-a",
|
||||
target: { kind: "browser", browserId: "browser-a" },
|
||||
openTab: vi.fn(),
|
||||
closeCurrentTab: vi.fn(),
|
||||
retargetCurrentTab: vi.fn(),
|
||||
openFileInWorkspace: vi.fn(),
|
||||
openImportSheet: vi.fn(),
|
||||
};
|
||||
|
||||
function installWebviewElementFactory(): void {
|
||||
const originalCreateElement = document.createElement.bind(document);
|
||||
const createElementSpy = vi.spyOn(document, "createElement");
|
||||
const createElement = ((tagName: string, options?: ElementCreationOptions) => {
|
||||
if (tagName.toLowerCase() !== "webview") {
|
||||
return originalCreateElement(tagName, options);
|
||||
}
|
||||
const element = originalCreateElement("div") as FakeWebview;
|
||||
element.getURL = vi.fn(() => "https://example.com");
|
||||
element.canGoBack = vi.fn(() => false);
|
||||
element.canGoForward = vi.fn(() => false);
|
||||
element.reload = vi.fn();
|
||||
element.stop = vi.fn();
|
||||
webview = element;
|
||||
return element;
|
||||
}) as typeof document.createElement;
|
||||
createElementSpy.mockImplementation(createElement);
|
||||
restoreCreateElement = () => createElementSpy.mockRestore();
|
||||
}
|
||||
|
||||
function renderBrowserPane(input?: { isInteractive?: boolean }): void {
|
||||
act(() => {
|
||||
root?.render(
|
||||
<PaneProvider value={paneContextValue}>
|
||||
<PaneFocusProvider
|
||||
value={createPaneFocusContextValue({
|
||||
isPaneFocused: input?.isInteractive ?? true,
|
||||
isWorkspaceFocused: true,
|
||||
})}
|
||||
>
|
||||
<BrowserPane
|
||||
browserId="browser-a"
|
||||
serverId="server-a"
|
||||
workspaceId="workspace-a"
|
||||
cwd="/repo"
|
||||
isInteractive={input?.isInteractive ?? true}
|
||||
/>
|
||||
</PaneFocusProvider>
|
||||
</PaneProvider>,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function openFind(): void {
|
||||
act(() => {
|
||||
setActivePaneFindPaneId(paneInstanceId);
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
}
|
||||
|
||||
function markWebviewDomReady(): void {
|
||||
act(() => {
|
||||
webview?.dispatchEvent(new Event("dom-ready"));
|
||||
});
|
||||
}
|
||||
|
||||
function inputElement(): HTMLInputElement {
|
||||
const input = container?.querySelector('[data-testid="pane-find-input"]');
|
||||
expect(input).toBeInstanceOf(HTMLInputElement);
|
||||
return input as HTMLInputElement;
|
||||
}
|
||||
|
||||
function changeInput(value: string): void {
|
||||
const input = inputElement();
|
||||
act(() => {
|
||||
const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
|
||||
valueSetter?.call(input, value);
|
||||
input.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
input.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function pressKey(key: string, shiftKey = false): void {
|
||||
const input = inputElement();
|
||||
act(() => {
|
||||
input.dispatchEvent(new KeyboardEvent("keydown", { key, shiftKey, bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function click(testId: string): void {
|
||||
const element = container?.querySelector(`[data-testid="${testId}"]`);
|
||||
expect(element).toBeInstanceOf(HTMLElement);
|
||||
act(() => {
|
||||
element?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function dispatchFoundInPage(result: {
|
||||
requestId?: number;
|
||||
activeMatchOrdinal: number;
|
||||
matches: number;
|
||||
}): void {
|
||||
act(() => {
|
||||
for (const listener of desktopBridge.foundInPageListeners) {
|
||||
listener(result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
updateBrowser.mockClear();
|
||||
desktopBridge.findInPage.mockImplementation(() => nextRequestId++);
|
||||
desktopBridge.findInPage.mockClear();
|
||||
desktopBridge.onFoundInPage.mockClear();
|
||||
desktopBridge.setActivePane.mockClear();
|
||||
desktopBridge.stopFindInPage.mockClear();
|
||||
desktopBridge.eventsOn.mockClear();
|
||||
desktopBridge.foundInPageListeners.clear();
|
||||
browserState = {
|
||||
...browserState,
|
||||
browsersById: {
|
||||
"browser-a": {
|
||||
id: "browser-a",
|
||||
url: "https://example.com",
|
||||
title: "",
|
||||
faviconUrl: null,
|
||||
canGoBack: false,
|
||||
canGoForward: false,
|
||||
isLoading: false,
|
||||
lastError: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
nextRequestId = 1;
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
installWebviewElementFactory();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
act(() => {
|
||||
root?.unmount();
|
||||
});
|
||||
root = null;
|
||||
container?.remove();
|
||||
container = null;
|
||||
webview = null;
|
||||
restoreCreateElement?.();
|
||||
restoreCreateElement = null;
|
||||
});
|
||||
|
||||
describe("BrowserPane Electron find", () => {
|
||||
it("registers browser find through the shared FindBar and desktop bridge find APIs", () => {
|
||||
renderBrowserPane();
|
||||
markWebviewDomReady();
|
||||
openFind();
|
||||
|
||||
changeInput("needle");
|
||||
|
||||
expect(desktopBridge.onFoundInPage).toHaveBeenCalledWith("browser-a", expect.any(Function));
|
||||
expect(desktopBridge.findInPage).toHaveBeenLastCalledWith("browser-a", "needle", {
|
||||
forward: true,
|
||||
findNext: false,
|
||||
matchCase: false,
|
||||
});
|
||||
expect(container?.textContent).toContain("Searching...");
|
||||
dispatchFoundInPage({ requestId: 1, activeMatchOrdinal: 2, matches: 5 });
|
||||
expect(container?.textContent).toContain("2 / 5");
|
||||
|
||||
pressKey("Enter");
|
||||
expect(desktopBridge.findInPage).toHaveBeenLastCalledWith("browser-a", "needle", {
|
||||
forward: true,
|
||||
findNext: true,
|
||||
matchCase: false,
|
||||
});
|
||||
dispatchFoundInPage({ requestId: 2, activeMatchOrdinal: 3, matches: 5 });
|
||||
|
||||
pressKey("Enter", true);
|
||||
expect(desktopBridge.findInPage).toHaveBeenLastCalledWith("browser-a", "needle", {
|
||||
forward: false,
|
||||
findNext: true,
|
||||
matchCase: false,
|
||||
});
|
||||
|
||||
click("pane-find-close");
|
||||
|
||||
expect(desktopBridge.stopFindInPage).toHaveBeenLastCalledWith("browser-a", "clearSelection");
|
||||
expect(container?.querySelector('[data-testid="pane-find-input"]')).toBeNull();
|
||||
});
|
||||
|
||||
it("cleans browser find selection on empty query, navigation, blur, and unmount", () => {
|
||||
renderBrowserPane();
|
||||
markWebviewDomReady();
|
||||
openFind();
|
||||
changeInput("needle");
|
||||
dispatchFoundInPage({ requestId: 1, activeMatchOrdinal: 1, matches: 3 });
|
||||
|
||||
changeInput("");
|
||||
expect(desktopBridge.stopFindInPage).toHaveBeenLastCalledWith("browser-a", "clearSelection");
|
||||
expect(container?.textContent).toContain("0 / 0");
|
||||
dispatchFoundInPage({ activeMatchOrdinal: 2, matches: 9 });
|
||||
expect(container?.textContent).toContain("0 / 0");
|
||||
|
||||
changeInput("needle");
|
||||
expect(container?.textContent).toContain("Searching...");
|
||||
act(() => {
|
||||
webview?.dispatchEvent(new Event("did-start-loading"));
|
||||
});
|
||||
expect(desktopBridge.stopFindInPage).toHaveBeenLastCalledWith("browser-a", "clearSelection");
|
||||
expect(container?.textContent).toContain("0 / 0");
|
||||
|
||||
act(() => {
|
||||
webview?.dispatchEvent(new Event("dom-ready"));
|
||||
});
|
||||
expect(desktopBridge.findInPage).toHaveBeenLastCalledWith("browser-a", "needle", {
|
||||
forward: true,
|
||||
findNext: false,
|
||||
matchCase: false,
|
||||
});
|
||||
|
||||
renderBrowserPane({ isInteractive: false });
|
||||
expect(desktopBridge.stopFindInPage).toHaveBeenLastCalledWith("browser-a", "clearSelection");
|
||||
|
||||
act(() => {
|
||||
root?.unmount();
|
||||
});
|
||||
expect(desktopBridge.stopFindInPage).toHaveBeenLastCalledWith("browser-a", "clearSelection");
|
||||
expect(desktopBridge.foundInPageListeners.size).toBe(0);
|
||||
});
|
||||
|
||||
it("does not call the browser find bridge before dom-ready", () => {
|
||||
renderBrowserPane();
|
||||
openFind();
|
||||
|
||||
changeInput("needle");
|
||||
expect(container?.textContent).toContain("Searching...");
|
||||
expect(desktopBridge.findInPage).not.toHaveBeenCalled();
|
||||
|
||||
click("pane-find-close");
|
||||
expect(desktopBridge.stopFindInPage).not.toHaveBeenCalled();
|
||||
|
||||
openFind();
|
||||
changeInput("needle");
|
||||
markWebviewDomReady();
|
||||
expect(desktopBridge.findInPage).toHaveBeenLastCalledWith("browser-a", "needle", {
|
||||
forward: true,
|
||||
findNext: false,
|
||||
matchCase: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, {
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
@@ -20,12 +20,9 @@ import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
|
||||
import {
|
||||
getDesktopHost,
|
||||
isElectronRuntime,
|
||||
type DesktopBrowserFoundInPageResult,
|
||||
type DesktopBrowserFindAction,
|
||||
type DesktopBrowserShortcutEvent,
|
||||
} from "@/desktop/host";
|
||||
import { isDev } from "@/constants/platform";
|
||||
import { FindBar, usePaneFind, type PaneFindMatchState } from "@/panels/pane-find";
|
||||
import { useBrowserStore, normalizeWorkspaceBrowserUrl } from "@/stores/browser-store";
|
||||
|
||||
type ElectronWebview = HTMLElement & {
|
||||
@@ -53,15 +50,6 @@ type BrowserElementSelection = Omit<BrowserElementAttachment, "formatted"> & {
|
||||
|
||||
const ERR_ABORTED = -3;
|
||||
const ALLOWED_BROWSER_PROTOCOLS = new Set(["http:", "https:"]);
|
||||
const EMPTY_FIND_MATCH_STATE: PaneFindMatchState = { status: "empty" };
|
||||
const NO_FIND_MATCH_STATE: PaneFindMatchState = { status: "no-match" };
|
||||
const PENDING_FIND_MATCH_STATE: PaneFindMatchState = { status: "pending" };
|
||||
|
||||
interface ActiveBrowserFind {
|
||||
generation: number;
|
||||
query: string;
|
||||
requestId: number | null;
|
||||
}
|
||||
|
||||
function truncateText(value: string, maxLength: number): string {
|
||||
return value.length > maxLength ? `${value.slice(0, maxLength).trim()}...` : value;
|
||||
@@ -246,18 +234,6 @@ function isDesktopBrowserShortcutEvent(payload: unknown): payload is DesktopBrow
|
||||
return event.action === "focus-url";
|
||||
}
|
||||
|
||||
function stopBrowserFindInPage(input: {
|
||||
browserId: string;
|
||||
action: DesktopBrowserFindAction;
|
||||
}): void {
|
||||
const bridge = getDesktopHost()?.browser;
|
||||
if (!bridge?.stopFindInPage) {
|
||||
console.warn("Electron browser find bridge is unavailable; cannot stop find-in-page.");
|
||||
return;
|
||||
}
|
||||
void bridge.stopFindInPage(input.browserId, input.action);
|
||||
}
|
||||
|
||||
function startSelectorResultPolling(input: {
|
||||
webview: ElectronWebview;
|
||||
onSelection: (selection: BrowserElementSelection) => void;
|
||||
@@ -319,13 +295,7 @@ export function BrowserPane({
|
||||
browserRef.current = browser;
|
||||
const pendingNavigationUrlRef = useRef<string | null>(null);
|
||||
const domReadyRef = useRef(false);
|
||||
const browserFindQueryRef = useRef("");
|
||||
const browserFindGenerationRef = useRef(0);
|
||||
const activeBrowserFindRef = useRef<ActiveBrowserFind | null>(null);
|
||||
const browserFindOpenRef = useRef(false);
|
||||
const [selectorActive, setSelectorActive] = useState(false);
|
||||
const [browserFindMatchState, setBrowserFindMatchState] =
|
||||
useState<PaneFindMatchState>(EMPTY_FIND_MATCH_STATE);
|
||||
const [draftUrl, setDraftUrl] = useState(browser?.url ?? "https://example.com");
|
||||
const workspaceAttachmentScopeKey = useMemo(
|
||||
() => buildBrowserAttachmentScopeKey({ cwd, serverId, workspaceId }),
|
||||
@@ -402,115 +372,6 @@ export function BrowserPane({
|
||||
}
|
||||
}, []);
|
||||
|
||||
const clearBrowserFindSelection = useCallback((input?: { resetQuery?: boolean }) => {
|
||||
if (input?.resetQuery) {
|
||||
browserFindQueryRef.current = "";
|
||||
}
|
||||
browserFindGenerationRef.current += 1;
|
||||
activeBrowserFindRef.current = null;
|
||||
setBrowserFindMatchState(EMPTY_FIND_MATCH_STATE);
|
||||
if (domReadyRef.current) {
|
||||
stopBrowserFindInPage({
|
||||
browserId: browserIdRef.current,
|
||||
action: "clearSelection",
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const runBrowserFind = useCallback(
|
||||
(query: string, direction: "next" | "previous", input?: { reset?: boolean }) => {
|
||||
browserFindQueryRef.current = query;
|
||||
if (!query) {
|
||||
clearBrowserFindSelection({ resetQuery: true });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!domReadyRef.current) {
|
||||
setBrowserFindMatchState(PENDING_FIND_MATCH_STATE);
|
||||
return;
|
||||
}
|
||||
const bridgeFindInPage = getDesktopHost()?.browser?.findInPage;
|
||||
if (!bridgeFindInPage) {
|
||||
console.warn("Electron browser find bridge is unavailable; cannot start find-in-page.");
|
||||
setBrowserFindMatchState(NO_FIND_MATCH_STATE);
|
||||
return;
|
||||
}
|
||||
|
||||
const generation = (browserFindGenerationRef.current += 1);
|
||||
activeBrowserFindRef.current = {
|
||||
generation,
|
||||
query,
|
||||
requestId: null,
|
||||
};
|
||||
setBrowserFindMatchState(PENDING_FIND_MATCH_STATE);
|
||||
|
||||
const options = {
|
||||
forward: direction === "next",
|
||||
findNext: !input?.reset,
|
||||
matchCase: false,
|
||||
};
|
||||
const requestIdResult = bridgeFindInPage(browserIdRef.current, query, options);
|
||||
if (typeof requestIdResult === "number") {
|
||||
activeBrowserFindRef.current = {
|
||||
generation,
|
||||
query,
|
||||
requestId: requestIdResult,
|
||||
};
|
||||
return;
|
||||
}
|
||||
void Promise.resolve(requestIdResult ?? null).then((requestId) => {
|
||||
const activeFind = activeBrowserFindRef.current;
|
||||
if (
|
||||
!activeFind ||
|
||||
activeFind.generation !== generation ||
|
||||
activeFind.query !== browserFindQueryRef.current
|
||||
) {
|
||||
return undefined;
|
||||
}
|
||||
activeBrowserFindRef.current = {
|
||||
...activeFind,
|
||||
requestId: typeof requestId === "number" ? requestId : null,
|
||||
};
|
||||
return undefined;
|
||||
});
|
||||
},
|
||||
[clearBrowserFindSelection],
|
||||
);
|
||||
|
||||
const handleFoundInPageResult = useCallback((result: DesktopBrowserFoundInPageResult) => {
|
||||
const activeFind = activeBrowserFindRef.current;
|
||||
if (
|
||||
!activeFind ||
|
||||
activeFind.generation !== browserFindGenerationRef.current ||
|
||||
activeFind.query !== browserFindQueryRef.current
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const requestId = result.requestId;
|
||||
if (typeof requestId !== "number") {
|
||||
return;
|
||||
}
|
||||
if (typeof activeFind.requestId !== "number" || requestId !== activeFind.requestId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const total = typeof result.matches === "number" ? Math.max(0, result.matches) : 0;
|
||||
if (total === 0) {
|
||||
setBrowserFindMatchState(NO_FIND_MATCH_STATE);
|
||||
return;
|
||||
}
|
||||
|
||||
const current =
|
||||
typeof result.activeMatchOrdinal === "number" && result.activeMatchOrdinal > 0
|
||||
? result.activeMatchOrdinal
|
||||
: 1;
|
||||
setBrowserFindMatchState({
|
||||
status: "matched",
|
||||
current: Math.min(current, total),
|
||||
total,
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isElectronRuntime()) {
|
||||
return;
|
||||
@@ -542,7 +403,6 @@ export function BrowserPane({
|
||||
webview.style.background = "transparent";
|
||||
|
||||
const handleStartLoading = () => {
|
||||
clearBrowserFindSelection();
|
||||
updateBrowser(browserId, { isLoading: true, lastError: null });
|
||||
syncNavigationState({ syncUrl: false });
|
||||
};
|
||||
@@ -569,7 +429,6 @@ export function BrowserPane({
|
||||
syncNavigationState();
|
||||
};
|
||||
const handleWillNavigate = (event: Event) => {
|
||||
clearBrowserFindSelection();
|
||||
const nextUrl =
|
||||
typeof (event as Event & { url?: unknown }).url === "string"
|
||||
? ((event as Event & { url?: string }).url ?? "")
|
||||
@@ -612,9 +471,6 @@ export function BrowserPane({
|
||||
const handleDomReady = () => {
|
||||
domReadyRef.current = true;
|
||||
syncNavigationState();
|
||||
if (browserFindOpenRef.current && browserFindQueryRef.current) {
|
||||
runBrowserFind(browserFindQueryRef.current, "next", { reset: true });
|
||||
}
|
||||
};
|
||||
const handleWebviewFocus = () => {
|
||||
onFocusPane?.();
|
||||
@@ -632,29 +488,6 @@ export function BrowserPane({
|
||||
webview.addEventListener("focus", handleWebviewFocus);
|
||||
webview.addEventListener("mousedown", handleWebviewFocus);
|
||||
|
||||
const foundInPageBridge = getDesktopHost()?.browser?.onFoundInPage;
|
||||
let unsubscribeFoundInPage: (() => void) | null = null;
|
||||
let didCleanupFoundInPage = false;
|
||||
if (foundInPageBridge) {
|
||||
const unsubscribeResult = foundInPageBridge(browserId, (result) => {
|
||||
handleFoundInPageResult(result);
|
||||
});
|
||||
if (typeof unsubscribeResult === "function") {
|
||||
unsubscribeFoundInPage = unsubscribeResult;
|
||||
} else {
|
||||
void Promise.resolve(unsubscribeResult).then((unsubscribe) => {
|
||||
if (didCleanupFoundInPage) {
|
||||
unsubscribe();
|
||||
return undefined;
|
||||
}
|
||||
unsubscribeFoundInPage = unsubscribe;
|
||||
return undefined;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.warn("Electron browser find bridge is unavailable; found-in-page events disabled.");
|
||||
}
|
||||
|
||||
host.appendChild(webview);
|
||||
if (initialUnsafeNavigationMessage) {
|
||||
updateBrowserRef.current(browserIdRef.current, {
|
||||
@@ -673,16 +506,8 @@ export function BrowserPane({
|
||||
webview.removeEventListener("page-favicon-updated", handleFaviconUpdated);
|
||||
webview.removeEventListener("did-fail-load", handleLoadFailed);
|
||||
webview.removeEventListener("dom-ready", handleDomReady);
|
||||
didCleanupFoundInPage = true;
|
||||
unsubscribeFoundInPage?.();
|
||||
webview.removeEventListener("focus", handleWebviewFocus);
|
||||
webview.removeEventListener("mousedown", handleWebviewFocus);
|
||||
if (domReadyRef.current) {
|
||||
stopBrowserFindInPage({
|
||||
browserId: browserIdRef.current,
|
||||
action: "clearSelection",
|
||||
});
|
||||
}
|
||||
if (host.contains(webview)) {
|
||||
host.removeChild(webview);
|
||||
}
|
||||
@@ -694,35 +519,6 @@ export function BrowserPane({
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [browserId, onFocusPane]);
|
||||
|
||||
const paneFind = usePaneFind({
|
||||
matchState: browserFindMatchState,
|
||||
onQuery: (query) => runBrowserFind(query, "next", { reset: true }),
|
||||
onNext: () => runBrowserFind(browserFindQueryRef.current, "next"),
|
||||
onPrev: () => runBrowserFind(browserFindQueryRef.current, "previous"),
|
||||
onClose: () => clearBrowserFindSelection({ resetQuery: true }),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
browserFindOpenRef.current = paneFind.isOpen;
|
||||
if (!paneFind.isOpen) {
|
||||
clearBrowserFindSelection({ resetQuery: true });
|
||||
}
|
||||
}, [clearBrowserFindSelection, paneFind.isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isInteractive) {
|
||||
if (paneFind.isOpen && browserFindQueryRef.current) {
|
||||
runBrowserFind(browserFindQueryRef.current, "next", { reset: true });
|
||||
}
|
||||
return;
|
||||
}
|
||||
clearBrowserFindSelection();
|
||||
}, [clearBrowserFindSelection, isInteractive, paneFind.isOpen, runBrowserFind]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => clearBrowserFindSelection({ resetQuery: true });
|
||||
}, [clearBrowserFindSelection]);
|
||||
|
||||
const navigate = useCallback((nextUrl: string) => {
|
||||
const normalizedUrl = normalizeWorkspaceBrowserUrl(nextUrl);
|
||||
const webview = webviewRef.current;
|
||||
@@ -1143,7 +939,6 @@ export function BrowserPane({
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{paneFind.isOpen ? <FindBar {...paneFind.findBarProps} /> : null}
|
||||
<View style={styles.chromeRow}>
|
||||
<View style={styles.chromeLeft}>
|
||||
<Pressable
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import {
|
||||
createFilePaneFindTokenSegments,
|
||||
createFilePaneLineFindHighlightMap,
|
||||
createFilePaneTextRenderData,
|
||||
findFilePaneTextMatches,
|
||||
} from "@/components/file-pane-text-render-data";
|
||||
|
||||
type FilePaneTextLineRenderData = ReturnType<typeof createFilePaneTextRenderData>["lines"][number];
|
||||
|
||||
function tokenText(line: FilePaneTextLineRenderData): string {
|
||||
return line.tokens.map(({ text }) => text).join("");
|
||||
}
|
||||
|
||||
describe("createFilePaneTextRenderData", () => {
|
||||
it("keeps code render lines in source order and reconstructs searchable text from tokens", () => {
|
||||
const renderData = createFilePaneTextRenderData(
|
||||
"const answer = 42;\nconsole.log(answer);",
|
||||
"src/answer.ts",
|
||||
);
|
||||
|
||||
expect(renderData.lines.map((line) => line.lineNumber)).toEqual([1, 2]);
|
||||
expect(renderData.lines.map((line) => line.text)).toEqual([
|
||||
"const answer = 42;",
|
||||
"console.log(answer);",
|
||||
]);
|
||||
expect(renderData.searchableText).toBe("const answer = 42;\nconsole.log(answer);");
|
||||
const tokenTexts = renderData.lines.map(tokenText);
|
||||
expect(tokenTexts).toEqual(renderData.lines.map((line) => line.text));
|
||||
});
|
||||
|
||||
it("preserves blank text lines for navigation and scrolling targets", () => {
|
||||
const renderData = createFilePaneTextRenderData("alpha\n\nbeta", "notes.txt");
|
||||
|
||||
expect(
|
||||
renderData.lines.map((line) => ({ lineNumber: line.lineNumber, text: line.text })),
|
||||
).toEqual([
|
||||
{ lineNumber: 1, text: "alpha" },
|
||||
{ lineNumber: 2, text: "" },
|
||||
{ lineNumber: 3, text: "beta" },
|
||||
]);
|
||||
expect(renderData.searchableText).toBe("alpha\n\nbeta");
|
||||
});
|
||||
});
|
||||
|
||||
describe("findFilePaneTextMatches", () => {
|
||||
it("indexes loaded text case-insensitively in source order", () => {
|
||||
const renderData = createFilePaneTextRenderData(
|
||||
"Alpha beta\nBETA gamma\nalphabet",
|
||||
"notes.txt",
|
||||
);
|
||||
|
||||
const matches = findFilePaneTextMatches(renderData, "beta");
|
||||
|
||||
expect(
|
||||
matches.map((match) => ({
|
||||
index: match.index,
|
||||
lineSpans: match.lineSpans,
|
||||
})),
|
||||
).toEqual([
|
||||
{
|
||||
index: 0,
|
||||
lineSpans: [{ lineNumber: 1, startColumn: 6, endColumn: 10 }],
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
lineSpans: [{ lineNumber: 2, startColumn: 0, endColumn: 4 }],
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it("maps pasted multi-line queries back to per-line spans", () => {
|
||||
const renderData = createFilePaneTextRenderData("alpha\nbeta", "notes.txt");
|
||||
|
||||
const matches = findFilePaneTextMatches(renderData, "ha\nbe");
|
||||
|
||||
expect(matches).toHaveLength(1);
|
||||
expect(matches[0]?.lineSpans).toEqual([
|
||||
{ lineNumber: 1, startColumn: 3, endColumn: 5 },
|
||||
{ lineNumber: 2, startColumn: 0, endColumn: 2 },
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("createFilePaneFindTokenSegments", () => {
|
||||
it("splits immutable token render data around match spans and marks the current match", () => {
|
||||
const line: FilePaneTextLineRenderData = {
|
||||
lineNumber: 1,
|
||||
text: "const answer",
|
||||
tokens: [
|
||||
{ text: "const", style: "keyword" },
|
||||
{ text: " answer", style: null },
|
||||
],
|
||||
};
|
||||
const highlights = createFilePaneLineFindHighlightMap(
|
||||
[
|
||||
{
|
||||
index: 0,
|
||||
startOffset: 2,
|
||||
endOffset: 8,
|
||||
lineSpans: [{ lineNumber: 1, startColumn: 2, endColumn: 8 }],
|
||||
},
|
||||
],
|
||||
0,
|
||||
);
|
||||
|
||||
const segments = createFilePaneFindTokenSegments(line, highlights.get(1) ?? []);
|
||||
|
||||
expect(segments).toEqual([
|
||||
{ text: "co", style: "keyword", isFindMatch: false, isCurrentFindMatch: false },
|
||||
{ text: "nst", style: "keyword", isFindMatch: true, isCurrentFindMatch: true },
|
||||
{ text: " an", style: null, isFindMatch: true, isCurrentFindMatch: true },
|
||||
{ text: "swer", style: null, isFindMatch: false, isCurrentFindMatch: false },
|
||||
]);
|
||||
expect(line.tokens).toEqual([
|
||||
{ text: "const", style: "keyword" },
|
||||
{ text: " answer", style: null },
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -1,198 +0,0 @@
|
||||
import { highlightCode, type HighlightToken } from "@getpaseo/highlight";
|
||||
|
||||
interface FilePaneTextLineRenderData {
|
||||
lineNumber: number;
|
||||
text: string;
|
||||
tokens: HighlightToken[];
|
||||
}
|
||||
|
||||
interface FilePaneTextRenderData {
|
||||
lines: FilePaneTextLineRenderData[];
|
||||
searchableText: string;
|
||||
}
|
||||
|
||||
interface FilePaneFindLineSpan {
|
||||
lineNumber: number;
|
||||
startColumn: number;
|
||||
endColumn: number;
|
||||
}
|
||||
|
||||
export interface FilePaneFindMatch {
|
||||
index: number;
|
||||
startOffset: number;
|
||||
endOffset: number;
|
||||
lineSpans: FilePaneFindLineSpan[];
|
||||
}
|
||||
|
||||
export interface FilePaneFindLineHighlight extends FilePaneFindLineSpan {
|
||||
matchIndex: number;
|
||||
isCurrent: boolean;
|
||||
}
|
||||
|
||||
export interface FilePaneFindTokenSegment {
|
||||
text: string;
|
||||
style: HighlightToken["style"];
|
||||
isFindMatch: boolean;
|
||||
isCurrentFindMatch: boolean;
|
||||
}
|
||||
|
||||
export function createFilePaneTextRenderData(
|
||||
content: string,
|
||||
filePath: string,
|
||||
): FilePaneTextRenderData {
|
||||
const lines = highlightCode(content, filePath).map((tokens, index) => ({
|
||||
lineNumber: index + 1,
|
||||
text: tokens.map((token) => token.text).join(""),
|
||||
tokens,
|
||||
}));
|
||||
|
||||
return {
|
||||
lines,
|
||||
searchableText: lines.map((line) => line.text).join("\n"),
|
||||
};
|
||||
}
|
||||
|
||||
export function findFilePaneTextMatches(
|
||||
renderData: FilePaneTextRenderData,
|
||||
query: string,
|
||||
): FilePaneFindMatch[] {
|
||||
if (query.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const searchableText = renderData.searchableText.toLocaleLowerCase();
|
||||
const normalizedQuery = query.toLocaleLowerCase();
|
||||
const matches: FilePaneFindMatch[] = [];
|
||||
let nextOffset = searchableText.indexOf(normalizedQuery);
|
||||
|
||||
while (nextOffset >= 0) {
|
||||
const endOffset = nextOffset + normalizedQuery.length;
|
||||
matches.push({
|
||||
index: matches.length,
|
||||
startOffset: nextOffset,
|
||||
endOffset,
|
||||
lineSpans: mapFilePaneTextRangeToLineSpans(renderData, nextOffset, endOffset),
|
||||
});
|
||||
nextOffset = searchableText.indexOf(normalizedQuery, endOffset);
|
||||
}
|
||||
|
||||
return matches;
|
||||
}
|
||||
|
||||
export function createFilePaneLineFindHighlightMap(
|
||||
matches: FilePaneFindMatch[],
|
||||
currentMatchIndex: number,
|
||||
): Map<number, FilePaneFindLineHighlight[]> {
|
||||
const highlightsByLine = new Map<number, FilePaneFindLineHighlight[]>();
|
||||
|
||||
for (const match of matches) {
|
||||
for (const span of match.lineSpans) {
|
||||
const highlights = highlightsByLine.get(span.lineNumber) ?? [];
|
||||
highlights.push({
|
||||
...span,
|
||||
matchIndex: match.index,
|
||||
isCurrent: match.index === currentMatchIndex,
|
||||
});
|
||||
highlightsByLine.set(span.lineNumber, highlights);
|
||||
}
|
||||
}
|
||||
|
||||
for (const highlights of highlightsByLine.values()) {
|
||||
highlights.sort((left, right) => left.startColumn - right.startColumn);
|
||||
}
|
||||
|
||||
return highlightsByLine;
|
||||
}
|
||||
|
||||
export function createFilePaneFindTokenSegments(
|
||||
line: FilePaneTextLineRenderData,
|
||||
highlights: FilePaneFindLineHighlight[],
|
||||
): FilePaneFindTokenSegment[] {
|
||||
if (highlights.length === 0) {
|
||||
return line.tokens.map((token) => ({
|
||||
...token,
|
||||
isFindMatch: false,
|
||||
isCurrentFindMatch: false,
|
||||
}));
|
||||
}
|
||||
|
||||
const segments: FilePaneFindTokenSegment[] = [];
|
||||
let tokenStartColumn = 0;
|
||||
|
||||
for (const token of line.tokens) {
|
||||
let cursor = tokenStartColumn;
|
||||
const tokenEndColumn = tokenStartColumn + token.text.length;
|
||||
const tokenHighlights = highlights.filter(
|
||||
(highlight) =>
|
||||
highlight.startColumn < tokenEndColumn && highlight.endColumn > tokenStartColumn,
|
||||
);
|
||||
|
||||
for (const highlight of tokenHighlights) {
|
||||
const highlightStart = Math.max(highlight.startColumn, tokenStartColumn);
|
||||
const highlightEnd = Math.min(highlight.endColumn, tokenEndColumn);
|
||||
|
||||
if (cursor < highlightStart) {
|
||||
segments.push({
|
||||
text: token.text.slice(cursor - tokenStartColumn, highlightStart - tokenStartColumn),
|
||||
style: token.style,
|
||||
isFindMatch: false,
|
||||
isCurrentFindMatch: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (highlightStart < highlightEnd) {
|
||||
segments.push({
|
||||
text: token.text.slice(
|
||||
highlightStart - tokenStartColumn,
|
||||
highlightEnd - tokenStartColumn,
|
||||
),
|
||||
style: token.style,
|
||||
isFindMatch: true,
|
||||
isCurrentFindMatch: highlight.isCurrent,
|
||||
});
|
||||
}
|
||||
|
||||
cursor = highlightEnd;
|
||||
}
|
||||
|
||||
if (cursor < tokenEndColumn) {
|
||||
segments.push({
|
||||
text: token.text.slice(cursor - tokenStartColumn),
|
||||
style: token.style,
|
||||
isFindMatch: false,
|
||||
isCurrentFindMatch: false,
|
||||
});
|
||||
}
|
||||
|
||||
tokenStartColumn = tokenEndColumn;
|
||||
}
|
||||
|
||||
return segments;
|
||||
}
|
||||
|
||||
function mapFilePaneTextRangeToLineSpans(
|
||||
renderData: FilePaneTextRenderData,
|
||||
startOffset: number,
|
||||
endOffset: number,
|
||||
): FilePaneFindLineSpan[] {
|
||||
const spans: FilePaneFindLineSpan[] = [];
|
||||
let lineStartOffset = 0;
|
||||
|
||||
for (const line of renderData.lines) {
|
||||
const lineEndOffset = lineStartOffset + line.text.length;
|
||||
const spanStartOffset = Math.max(startOffset, lineStartOffset);
|
||||
const spanEndOffset = Math.min(endOffset, lineEndOffset);
|
||||
|
||||
if (spanStartOffset < spanEndOffset) {
|
||||
spans.push({
|
||||
lineNumber: line.lineNumber,
|
||||
startColumn: spanStartOffset - lineStartOffset,
|
||||
endColumn: spanEndOffset - lineStartOffset,
|
||||
});
|
||||
}
|
||||
|
||||
lineStartOffset = lineEndOffset + 1;
|
||||
}
|
||||
|
||||
return spans;
|
||||
}
|
||||
@@ -1,435 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import React from "react";
|
||||
import { act } from "react";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import type { ExplorerFile } from "@/stores/session-store";
|
||||
import { FilePane } from "@/components/file-pane";
|
||||
import {
|
||||
PaneFocusProvider,
|
||||
PaneProvider,
|
||||
createPaneFocusContextValue,
|
||||
type PaneContextValue,
|
||||
} from "@/panels/pane-context";
|
||||
import {
|
||||
clearActivePaneFindPaneId,
|
||||
handlePaneFindKeyboardAction,
|
||||
setActivePaneFindPaneId,
|
||||
} from "@/panels/pane-find-registry";
|
||||
|
||||
const { queryState, theme } = vi.hoisted(() => ({
|
||||
queryState: {
|
||||
current: {
|
||||
data: null as null | {
|
||||
error: string | null;
|
||||
file: ExplorerFile | null;
|
||||
imageAttachment?: unknown;
|
||||
},
|
||||
isFetching: false,
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
spacing: { 1: 4, 2: 8, 3: 12, 4: 16 },
|
||||
fontSize: { sm: 13, code: 13 },
|
||||
colors: {
|
||||
destructive: "#f43f5e",
|
||||
foreground: "#fff",
|
||||
foregroundMuted: "#aaa",
|
||||
primary: "#0a84ff",
|
||||
surface0: "#111",
|
||||
surface1: "#222",
|
||||
surface2: "#333",
|
||||
},
|
||||
colorScheme: "dark",
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@tanstack/react-query", () => ({
|
||||
useQuery: () => queryState.current,
|
||||
}));
|
||||
|
||||
vi.mock("react-native", () => {
|
||||
const MockView = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
{ children?: React.ReactNode; testID?: string }
|
||||
>(function View({ children, testID }, ref) {
|
||||
return React.createElement("div", { "data-testid": testID, ref }, children);
|
||||
});
|
||||
const MockScrollView = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
{ children?: React.ReactNode; horizontal?: boolean }
|
||||
>(function ScrollView({ children, horizontal }, ref) {
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ "data-horizontal": horizontal ? "true" : undefined, ref },
|
||||
children,
|
||||
);
|
||||
});
|
||||
const flattenMockStyle = (value: unknown): React.CSSProperties => {
|
||||
if (Array.isArray(value)) {
|
||||
return value.reduce<React.CSSProperties>(
|
||||
(acc, item) => Object.assign(acc, flattenMockStyle(item)),
|
||||
{},
|
||||
);
|
||||
}
|
||||
return (value as React.CSSProperties | null | undefined) ?? {};
|
||||
};
|
||||
const MockText = ({ children, style }: { children?: React.ReactNode; style?: unknown }) =>
|
||||
React.createElement("span", { style: flattenMockStyle(style) }, children);
|
||||
const MockPressable = ({
|
||||
children,
|
||||
disabled,
|
||||
onPress,
|
||||
testID,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
onPress?: () => void;
|
||||
testID?: string;
|
||||
}) =>
|
||||
React.createElement(
|
||||
"button",
|
||||
{
|
||||
"data-testid": testID,
|
||||
disabled,
|
||||
onClick: () => {
|
||||
if (!disabled) {
|
||||
onPress?.();
|
||||
}
|
||||
},
|
||||
type: "button",
|
||||
},
|
||||
children,
|
||||
);
|
||||
const MockTextInput = React.forwardRef<
|
||||
HTMLInputElement,
|
||||
{
|
||||
value?: string;
|
||||
onChangeText?: (text: string) => void;
|
||||
onKeyPress?: (event: {
|
||||
nativeEvent: { key: string; shiftKey?: boolean };
|
||||
preventDefault: () => void;
|
||||
}) => void;
|
||||
testID?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
>(function TextInput({ value, onChangeText, onKeyPress, testID, placeholder }, ref) {
|
||||
return React.createElement("input", {
|
||||
"data-testid": testID,
|
||||
onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
onChangeText?.(event.currentTarget.value),
|
||||
onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) =>
|
||||
onKeyPress?.({
|
||||
nativeEvent: { key: event.key, shiftKey: event.shiftKey },
|
||||
preventDefault: () => event.preventDefault(),
|
||||
}),
|
||||
placeholder,
|
||||
ref,
|
||||
value: value ?? "",
|
||||
});
|
||||
});
|
||||
const MockImage = ({ source }: { source?: { uri?: string } }) =>
|
||||
React.createElement("img", { alt: "", src: source?.uri ?? "" });
|
||||
|
||||
return {
|
||||
ActivityIndicator: () => React.createElement("span", { "data-testid": "activity" }),
|
||||
Image: MockImage,
|
||||
Platform: {
|
||||
OS: "web",
|
||||
select: (options: Record<string, unknown>) => options.web ?? options.default,
|
||||
},
|
||||
Pressable: MockPressable,
|
||||
ScrollView: MockScrollView,
|
||||
Text: MockText,
|
||||
TextInput: MockTextInput,
|
||||
View: MockView,
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("lucide-react-native", () => {
|
||||
const createIcon = (name: string) =>
|
||||
function Icon() {
|
||||
return React.createElement("span", { "data-icon": name });
|
||||
};
|
||||
return {
|
||||
ChevronDown: createIcon("ChevronDown"),
|
||||
ChevronUp: createIcon("ChevronUp"),
|
||||
X: createIcon("X"),
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("react-native-markdown-display", () => ({
|
||||
default: ({ children }: { children?: React.ReactNode }) =>
|
||||
React.createElement("article", { "data-testid": "markdown-preview" }, children),
|
||||
MarkdownIt: () => ({}),
|
||||
}));
|
||||
|
||||
vi.mock("react-native-unistyles", () => ({
|
||||
StyleSheet: {
|
||||
create: (factory: unknown) =>
|
||||
typeof factory === "function" ? (factory as (t: typeof theme) => unknown)(theme) : factory,
|
||||
},
|
||||
useUnistyles: () => ({ theme }),
|
||||
}));
|
||||
|
||||
vi.mock("@/styles/syntax-token-styles", () => ({
|
||||
syntaxTokenStyleFor: () => ({ color: "#fff" }),
|
||||
}));
|
||||
|
||||
vi.mock("@/attachments/use-attachment-preview-url", () => ({
|
||||
useAttachmentPreviewUrl: (metadata: unknown) => (metadata ? "blob:preview" : null),
|
||||
}));
|
||||
|
||||
vi.mock("@/components/use-web-scrollbar", () => ({
|
||||
useWebScrollViewScrollbar: () => ({
|
||||
onContentSizeChange: vi.fn(),
|
||||
onLayout: vi.fn(),
|
||||
onScroll: vi.fn(),
|
||||
overlay: null,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@/hooks/use-web-scrollbar-style", () => ({
|
||||
useWebScrollbarStyle: () => ({}),
|
||||
}));
|
||||
|
||||
vi.mock("@/constants/layout", () => ({
|
||||
useIsCompactFormFactor: () => false,
|
||||
}));
|
||||
|
||||
vi.mock("@/constants/platform", () => ({
|
||||
isWeb: true,
|
||||
}));
|
||||
|
||||
vi.mock("@/styles/markdown-styles", () => ({
|
||||
createMarkdownStyles: () => ({}),
|
||||
}));
|
||||
|
||||
vi.mock("@/stores/session-store", () => ({
|
||||
useSessionStore: (selector: (state: unknown) => unknown) => selector({ sessions: {} }),
|
||||
}));
|
||||
|
||||
let root: Root | null = null;
|
||||
let container: HTMLElement | null = null;
|
||||
const paneInstanceId = "server:workspace:file";
|
||||
const paneContext: PaneContextValue = {
|
||||
serverId: "server",
|
||||
workspaceId: "workspace",
|
||||
paneInstanceId,
|
||||
tabId: "file",
|
||||
target: { kind: "file", path: "src/example.ts" },
|
||||
openTab: () => {},
|
||||
closeCurrentTab: () => {},
|
||||
retargetCurrentTab: () => {},
|
||||
openFileInWorkspace: () => {},
|
||||
openImportSheet: () => {},
|
||||
};
|
||||
const paneFocus = createPaneFocusContextValue({
|
||||
isPaneFocused: true,
|
||||
isWorkspaceFocused: true,
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
|
||||
vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
|
||||
callback(0);
|
||||
return 1;
|
||||
});
|
||||
HTMLElement.prototype.scrollIntoView = vi.fn();
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (root) {
|
||||
act(() => {
|
||||
root?.unmount();
|
||||
});
|
||||
}
|
||||
clearActivePaneFindPaneId(paneInstanceId);
|
||||
root = null;
|
||||
container?.remove();
|
||||
container = null;
|
||||
queryState.current = { data: null, isFetching: false };
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
function renderFilePane(location: { path: string } = { path: "src/example.ts" }) {
|
||||
act(() => {
|
||||
root?.render(
|
||||
<PaneProvider value={paneContext}>
|
||||
<PaneFocusProvider value={paneFocus}>
|
||||
<FilePane serverId="server" workspaceRoot="/repo" location={location} />
|
||||
</PaneFocusProvider>
|
||||
</PaneProvider>,
|
||||
);
|
||||
});
|
||||
setActivePaneFindPaneId(paneInstanceId);
|
||||
}
|
||||
|
||||
function inputElement(): HTMLInputElement {
|
||||
const input = container?.querySelector('[data-testid="pane-find-input"]');
|
||||
expect(input).toBeInstanceOf(HTMLInputElement);
|
||||
return input as HTMLInputElement;
|
||||
}
|
||||
|
||||
function changeInput(value: string): void {
|
||||
const input = inputElement();
|
||||
act(() => {
|
||||
const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
|
||||
valueSetter?.call(input, value);
|
||||
input.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
input.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function click(testId: string): void {
|
||||
const element = container?.querySelector(`[data-testid="${testId}"]`);
|
||||
expect(element).toBeInstanceOf(HTMLElement);
|
||||
act(() => {
|
||||
element?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function makeFile(file: Partial<ExplorerFile>): ExplorerFile {
|
||||
return {
|
||||
content: "",
|
||||
encoding: "utf-8",
|
||||
kind: "text",
|
||||
modifiedAt: "2026-05-02T00:00:00.000Z",
|
||||
path: file.path ?? "src/example.ts",
|
||||
size: file.size ?? 0,
|
||||
...file,
|
||||
};
|
||||
}
|
||||
|
||||
describe("FilePane preview rendering", () => {
|
||||
it("renders code/text previews with line numbers and highlighted token text", () => {
|
||||
queryState.current = {
|
||||
data: {
|
||||
error: null,
|
||||
file: makeFile({ content: "const answer = 42;\nconsole.log(answer);" }),
|
||||
},
|
||||
isFetching: false,
|
||||
};
|
||||
|
||||
renderFilePane();
|
||||
|
||||
const text = container?.textContent ?? "";
|
||||
expect(text).toContain("1");
|
||||
expect(text).toContain("2");
|
||||
expect(text).toContain("const answer = 42;");
|
||||
expect(text).toContain("console.log(answer);");
|
||||
});
|
||||
|
||||
it("keeps markdown files on the markdown preview path", () => {
|
||||
queryState.current = {
|
||||
data: {
|
||||
error: null,
|
||||
file: makeFile({ content: "# Guide", path: "README.md" }),
|
||||
},
|
||||
isFetching: false,
|
||||
};
|
||||
|
||||
renderFilePane({ path: "README.md" });
|
||||
|
||||
expect(container?.querySelector('[data-testid="markdown-preview"]')?.textContent).toBe(
|
||||
"# Guide",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders image previews from the attachment preview URL", () => {
|
||||
queryState.current = {
|
||||
data: {
|
||||
error: null,
|
||||
file: makeFile({ content: undefined, encoding: "none", kind: "image", path: "logo.png" }),
|
||||
imageAttachment: { id: "preview" },
|
||||
},
|
||||
isFetching: false,
|
||||
};
|
||||
|
||||
renderFilePane({ path: "logo.png" });
|
||||
|
||||
expect(container?.querySelector("img")?.getAttribute("src")).toBe("blob:preview");
|
||||
});
|
||||
|
||||
it("keeps binary previews on the unavailable state with file size", () => {
|
||||
queryState.current = {
|
||||
data: {
|
||||
error: null,
|
||||
file: makeFile({
|
||||
content: undefined,
|
||||
encoding: "none",
|
||||
kind: "binary",
|
||||
path: "tool",
|
||||
size: 2048,
|
||||
}),
|
||||
},
|
||||
isFetching: false,
|
||||
};
|
||||
|
||||
renderFilePane({ path: "tool" });
|
||||
|
||||
expect(container?.textContent).toContain("Binary preview unavailable");
|
||||
expect(container?.textContent).toContain("2.0 KB");
|
||||
});
|
||||
|
||||
it("searches code/text previews case-insensitively and navigates matches", () => {
|
||||
queryState.current = {
|
||||
data: {
|
||||
error: null,
|
||||
file: makeFile({ content: "const answer = 42;\nconsole.log(ANSWER);" }),
|
||||
},
|
||||
isFetching: false,
|
||||
};
|
||||
renderFilePane();
|
||||
|
||||
act(() => {
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
changeInput("answer");
|
||||
|
||||
expect(container?.textContent).toContain("1 / 2");
|
||||
expect(HTMLElement.prototype.scrollIntoView).toHaveBeenCalledTimes(1);
|
||||
expect(container?.querySelectorAll('span[style*="background-color"]').length).toBeGreaterThan(
|
||||
0,
|
||||
);
|
||||
|
||||
click("pane-find-next");
|
||||
expect(container?.textContent).toContain("2 / 2");
|
||||
expect(HTMLElement.prototype.scrollIntoView).toHaveBeenCalledTimes(2);
|
||||
|
||||
click("pane-find-prev");
|
||||
expect(container?.textContent).toContain("1 / 2");
|
||||
expect(HTMLElement.prototype.scrollIntoView).toHaveBeenCalledTimes(3);
|
||||
});
|
||||
|
||||
it("clears file highlights on empty query and close", () => {
|
||||
queryState.current = {
|
||||
data: {
|
||||
error: null,
|
||||
file: makeFile({ content: "needle\nneedle" }),
|
||||
},
|
||||
isFetching: false,
|
||||
};
|
||||
renderFilePane();
|
||||
|
||||
act(() => {
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
changeInput("needle");
|
||||
expect(container?.textContent).toContain("1 / 2");
|
||||
|
||||
changeInput("");
|
||||
expect(container?.textContent).toContain("0 / 0");
|
||||
expect(container?.querySelectorAll('span[style*="background-color"]').length).toBe(0);
|
||||
|
||||
changeInput("needle");
|
||||
click("pane-find-close");
|
||||
expect(container?.querySelector('[data-testid="pane-find-input"]')).toBeNull();
|
||||
expect(container?.querySelectorAll('span[style*="background-color"]').length).toBe(0);
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { FileReadResult } from "@getpaseo/client/internal/daemon-client";
|
||||
import Markdown, { MarkdownIt } from "react-native-markdown-display";
|
||||
@@ -15,7 +15,7 @@ import { Fonts } from "@/constants/theme";
|
||||
import { useSessionStore, type ExplorerFile } from "@/stores/session-store";
|
||||
import { useWebScrollViewScrollbar } from "@/components/use-web-scrollbar";
|
||||
import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style";
|
||||
import type { HighlightToken } from "@getpaseo/highlight";
|
||||
import { highlightCode, type HighlightToken } from "@getpaseo/highlight";
|
||||
import { syntaxTokenStyleFor } from "@/styles/syntax-token-styles";
|
||||
import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
|
||||
import { lineNumberGutterWidth } from "@/components/code-insets";
|
||||
@@ -26,33 +26,15 @@ import type { AttachmentMetadata } from "@/attachments/types";
|
||||
import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
|
||||
import { persistAttachmentFromBytes } from "@/attachments/service";
|
||||
import { createPreviewAttachmentId, getFileNameFromPath } from "@/attachments/utils";
|
||||
import {
|
||||
createFilePaneFindTokenSegments,
|
||||
createFilePaneLineFindHighlightMap,
|
||||
createFilePaneTextRenderData,
|
||||
findFilePaneTextMatches,
|
||||
type FilePaneFindLineHighlight,
|
||||
type FilePaneFindMatch,
|
||||
type FilePaneFindTokenSegment,
|
||||
} from "@/components/file-pane-text-render-data";
|
||||
import { explorerFileFromReadResult } from "@/file-explorer/read-result";
|
||||
import { resolveFilePreviewReadTarget } from "@/file-explorer/preview-target";
|
||||
import type { WorkspaceFileLocation } from "@/workspace/file-open";
|
||||
import {
|
||||
FindBar,
|
||||
type PaneFindMatchState,
|
||||
type UsePaneFindResult,
|
||||
usePaneFind,
|
||||
} from "@/panels/pane-find";
|
||||
|
||||
interface CodeLineProps {
|
||||
segments: FilePaneFindTokenSegment[];
|
||||
tokens: HighlightToken[];
|
||||
lineNumber: number;
|
||||
gutterWidth: number;
|
||||
highlighted: boolean;
|
||||
matchBackgroundColor: string;
|
||||
currentMatchBackgroundColor: string;
|
||||
onLineRef?: (lineNumber: number, node: View | null) => void;
|
||||
}
|
||||
|
||||
interface FilePreviewBodyProps {
|
||||
@@ -64,50 +46,6 @@ interface FilePreviewBodyProps {
|
||||
imagePreviewUri: string | null;
|
||||
}
|
||||
|
||||
interface FilePaneTextScrollRefs {
|
||||
lineRefs: React.MutableRefObject<Map<number, View>>;
|
||||
previewScrollRef: React.RefObject<RNScrollView | null>;
|
||||
registerLineRef: (lineNumber: number, node: View | null) => void;
|
||||
}
|
||||
|
||||
interface FilePaneCenterStateProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
interface FilePaneTextPreviewProps {
|
||||
currentMatchBackgroundColor: string;
|
||||
findHighlightsByLine: Map<number, FilePaneFindLineHighlight[]>;
|
||||
gutterWidth: number;
|
||||
isMarkdownFile: boolean;
|
||||
isMobile: boolean;
|
||||
lineSelection: FileLineSelection | null;
|
||||
markdownParser: ReturnType<typeof MarkdownIt>;
|
||||
markdownStyles: ReturnType<typeof createMarkdownStyles>;
|
||||
matchBackgroundColor: string;
|
||||
preview: ExplorerFile;
|
||||
previewScrollRef: React.RefObject<RNScrollView | null>;
|
||||
scrollbar: ReturnType<typeof useWebScrollViewScrollbar>;
|
||||
showDesktopWebScrollbar: boolean;
|
||||
textRenderData: ReturnType<typeof createFilePaneTextRenderData> | null;
|
||||
textScrollRefs: FilePaneTextScrollRefs;
|
||||
webScrollbarStyle: object;
|
||||
}
|
||||
|
||||
interface FilePaneSearchableTextPreviewProps extends Omit<
|
||||
FilePaneTextPreviewProps,
|
||||
"findHighlightsByLine" | "textRenderData"
|
||||
> {
|
||||
textRenderData: ReturnType<typeof createFilePaneTextRenderData>;
|
||||
}
|
||||
|
||||
interface FilePaneImagePreviewProps {
|
||||
imagePreviewUri: string | null;
|
||||
imageSource: { uri: string } | null;
|
||||
previewScrollRef: React.RefObject<RNScrollView | null>;
|
||||
scrollbar: ReturnType<typeof useWebScrollViewScrollbar>;
|
||||
showDesktopWebScrollbar: boolean;
|
||||
}
|
||||
|
||||
function trimNonEmpty(value: string | null | undefined): string | null {
|
||||
if (typeof value !== "string") {
|
||||
return null;
|
||||
@@ -179,20 +117,11 @@ function clampLineSelection(input: {
|
||||
}
|
||||
|
||||
const CodeLine = React.memo(function CodeLine({
|
||||
segments,
|
||||
tokens,
|
||||
lineNumber,
|
||||
gutterWidth,
|
||||
highlighted,
|
||||
matchBackgroundColor,
|
||||
currentMatchBackgroundColor,
|
||||
onLineRef,
|
||||
}: CodeLineProps) {
|
||||
const setLineRef = useCallback(
|
||||
(node: View | null) => {
|
||||
onLineRef?.(lineNumber, node);
|
||||
},
|
||||
[lineNumber, onLineRef],
|
||||
);
|
||||
const gutterStyle = useMemo(
|
||||
() => [codeLineStyles.gutter, inlineUnistylesStyle({ width: gutterWidth })],
|
||||
[gutterWidth],
|
||||
@@ -202,28 +131,19 @@ const CodeLine = React.memo(function CodeLine({
|
||||
[highlighted],
|
||||
);
|
||||
const keyedTokens = useMemo(
|
||||
() => segments.map((segment, index) => ({ key: `${index}-${segment.text}`, segment })),
|
||||
[segments],
|
||||
() => tokens.map((token, index) => ({ key: `${index}-${token.text}`, token })),
|
||||
[tokens],
|
||||
);
|
||||
return (
|
||||
<View ref={setLineRef} style={lineStyle}>
|
||||
<View style={lineStyle}>
|
||||
<View style={gutterStyle}>
|
||||
<Text numberOfLines={1} style={codeLineStyles.gutterText}>
|
||||
{String(lineNumber)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text selectable style={codeLineStyles.lineText}>
|
||||
{keyedTokens.map(({ key, segment }) => (
|
||||
<CodeLineToken
|
||||
key={key}
|
||||
backgroundColor={getFindSegmentBackgroundColor({
|
||||
currentMatchBackgroundColor,
|
||||
matchBackgroundColor,
|
||||
segment,
|
||||
})}
|
||||
style={segment.style}
|
||||
text={segment.text}
|
||||
/>
|
||||
{keyedTokens.map(({ key, token }) => (
|
||||
<CodeLineToken key={key} token={token} />
|
||||
))}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -231,237 +151,11 @@ const CodeLine = React.memo(function CodeLine({
|
||||
});
|
||||
|
||||
interface CodeLineTokenProps {
|
||||
backgroundColor?: string;
|
||||
style: HighlightToken["style"];
|
||||
text: string;
|
||||
token: HighlightToken;
|
||||
}
|
||||
|
||||
function CodeLineToken({ backgroundColor, style, text }: CodeLineTokenProps) {
|
||||
const tokenStyle = useMemo(
|
||||
() => [
|
||||
style ? syntaxTokenStyleFor(style) : undefined,
|
||||
backgroundColor ? { backgroundColor } : null,
|
||||
],
|
||||
[backgroundColor, style],
|
||||
);
|
||||
return <Text style={tokenStyle}>{text}</Text>;
|
||||
}
|
||||
|
||||
function getFindSegmentBackgroundColor(input: {
|
||||
segment: FilePaneFindTokenSegment;
|
||||
matchBackgroundColor: string;
|
||||
currentMatchBackgroundColor: string;
|
||||
}) {
|
||||
if (input.segment.isCurrentFindMatch) {
|
||||
return input.currentMatchBackgroundColor;
|
||||
}
|
||||
if (input.segment.isFindMatch) {
|
||||
return input.matchBackgroundColor;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function useFilePaneTextScrollRefs(lineNumbers: number[] | null): FilePaneTextScrollRefs {
|
||||
const previewScrollRef = useRef<RNScrollView>(null);
|
||||
const lineRefs = useRef(new Map<number, View>());
|
||||
|
||||
const registerLineRef = useCallback((lineNumber: number, node: View | null) => {
|
||||
if (node) {
|
||||
lineRefs.current.set(lineNumber, node);
|
||||
return;
|
||||
}
|
||||
lineRefs.current.delete(lineNumber);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!lineNumbers) {
|
||||
lineRefs.current.clear();
|
||||
return;
|
||||
}
|
||||
|
||||
const visibleLineNumbers = new Set(lineNumbers);
|
||||
for (const lineNumber of lineRefs.current.keys()) {
|
||||
if (!visibleLineNumbers.has(lineNumber)) {
|
||||
lineRefs.current.delete(lineNumber);
|
||||
}
|
||||
}
|
||||
}, [lineNumbers]);
|
||||
|
||||
return {
|
||||
lineRefs,
|
||||
previewScrollRef,
|
||||
registerLineRef,
|
||||
};
|
||||
}
|
||||
|
||||
function createFilePaneMatchState(
|
||||
query: string,
|
||||
matches: FilePaneFindMatch[],
|
||||
currentMatchIndex: number,
|
||||
): PaneFindMatchState {
|
||||
if (query.length === 0) {
|
||||
return { status: "empty" };
|
||||
}
|
||||
if (matches.length === 0) {
|
||||
return { status: "no-match" };
|
||||
}
|
||||
return {
|
||||
status: "matched",
|
||||
current: Math.max(0, currentMatchIndex) + 1,
|
||||
total: matches.length,
|
||||
};
|
||||
}
|
||||
|
||||
function scrollFilePaneLineIntoView(input: {
|
||||
lineRefs: React.MutableRefObject<Map<number, View>>;
|
||||
previewScrollRef: React.RefObject<RNScrollView | null>;
|
||||
lineNumber: number;
|
||||
}) {
|
||||
const lineNode = input.lineRefs.current.get(input.lineNumber);
|
||||
const scrollNode = input.previewScrollRef.current;
|
||||
if (!lineNode || !scrollNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isWeb && "scrollIntoView" in lineNode) {
|
||||
(
|
||||
lineNode as unknown as { scrollIntoView(options?: ScrollIntoViewOptions): void }
|
||||
).scrollIntoView({
|
||||
block: "center",
|
||||
inline: "nearest",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const measurableLineNode = lineNode as View & {
|
||||
measureLayout?: (
|
||||
relativeToNativeNode: unknown,
|
||||
onSuccess: (x: number, y: number) => void,
|
||||
onFail?: () => void,
|
||||
) => void;
|
||||
};
|
||||
measurableLineNode.measureLayout?.(scrollNode, (_x, y) => {
|
||||
scrollNode.scrollTo({ y: Math.max(0, y - 48), animated: true });
|
||||
});
|
||||
}
|
||||
|
||||
function scrollFilePaneLineIntoViewSoon(input: {
|
||||
lineRefs: React.MutableRefObject<Map<number, View>>;
|
||||
previewScrollRef: React.RefObject<RNScrollView | null>;
|
||||
lineNumber: number;
|
||||
}) {
|
||||
const schedule =
|
||||
globalThis.requestAnimationFrame ??
|
||||
((callback: FrameRequestCallback) => {
|
||||
setTimeout(() => callback(Date.now()), 0);
|
||||
return 0;
|
||||
});
|
||||
schedule(() => {
|
||||
scrollFilePaneLineIntoView(input);
|
||||
});
|
||||
}
|
||||
|
||||
interface FilePaneFindState {
|
||||
query: string;
|
||||
matches: FilePaneFindMatch[];
|
||||
currentMatchIndex: number;
|
||||
}
|
||||
|
||||
const EMPTY_FILE_PANE_FIND_STATE: FilePaneFindState = {
|
||||
query: "",
|
||||
matches: [],
|
||||
currentMatchIndex: 0,
|
||||
};
|
||||
|
||||
function useFilePaneFindAdapter(input: {
|
||||
textRenderData: ReturnType<typeof createFilePaneTextRenderData> | null;
|
||||
textScrollRefs: FilePaneTextScrollRefs;
|
||||
}) {
|
||||
const [findState, setFindState] = useState<FilePaneFindState>(EMPTY_FILE_PANE_FIND_STATE);
|
||||
const findQuery = findState.query;
|
||||
const findMatches = findState.matches;
|
||||
const currentMatchIndex = findState.currentMatchIndex;
|
||||
const findHighlightsByLine = useMemo(
|
||||
() => createFilePaneLineFindHighlightMap(findMatches, currentMatchIndex),
|
||||
[currentMatchIndex, findMatches],
|
||||
);
|
||||
const findMatchState = useMemo(
|
||||
() => createFilePaneMatchState(findQuery, findMatches, currentMatchIndex),
|
||||
[currentMatchIndex, findMatches, findQuery],
|
||||
);
|
||||
const scrollMatchIntoView = useCallback(
|
||||
(matches: FilePaneFindMatch[], matchIndex: number) => {
|
||||
const lineNumber = matches[matchIndex]?.lineSpans[0]?.lineNumber;
|
||||
if (!lineNumber) {
|
||||
return;
|
||||
}
|
||||
scrollFilePaneLineIntoViewSoon({
|
||||
lineRefs: input.textScrollRefs.lineRefs,
|
||||
lineNumber,
|
||||
previewScrollRef: input.textScrollRefs.previewScrollRef,
|
||||
});
|
||||
},
|
||||
[input.textScrollRefs.lineRefs, input.textScrollRefs.previewScrollRef],
|
||||
);
|
||||
const paneFind = usePaneFind({
|
||||
matchState: findMatchState,
|
||||
onQuery: (query) => {
|
||||
const nextMatches = input.textRenderData
|
||||
? findFilePaneTextMatches(input.textRenderData, query)
|
||||
: [];
|
||||
setFindState({ query, matches: nextMatches, currentMatchIndex: 0 });
|
||||
scrollMatchIntoView(nextMatches, 0);
|
||||
return createFilePaneMatchState(query, nextMatches, 0);
|
||||
},
|
||||
onNext: () => {
|
||||
if (findMatches.length === 0) {
|
||||
return createFilePaneMatchState(findQuery, findMatches, currentMatchIndex);
|
||||
}
|
||||
const nextIndex = (currentMatchIndex + 1) % findMatches.length;
|
||||
setFindState((current) => ({ ...current, currentMatchIndex: nextIndex }));
|
||||
scrollMatchIntoView(findMatches, nextIndex);
|
||||
return createFilePaneMatchState(findQuery, findMatches, nextIndex);
|
||||
},
|
||||
onPrev: () => {
|
||||
if (findMatches.length === 0) {
|
||||
return createFilePaneMatchState(findQuery, findMatches, currentMatchIndex);
|
||||
}
|
||||
const nextIndex = (currentMatchIndex - 1 + findMatches.length) % findMatches.length;
|
||||
setFindState((current) => ({ ...current, currentMatchIndex: nextIndex }));
|
||||
scrollMatchIntoView(findMatches, nextIndex);
|
||||
return createFilePaneMatchState(findQuery, findMatches, nextIndex);
|
||||
},
|
||||
onClose: () => {
|
||||
setFindState(EMPTY_FILE_PANE_FIND_STATE);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setFindState((current) => {
|
||||
if (!input.textRenderData || current.query.length === 0) {
|
||||
return current.query.length === 0 &&
|
||||
current.matches.length === 0 &&
|
||||
current.currentMatchIndex === 0
|
||||
? current
|
||||
: EMPTY_FILE_PANE_FIND_STATE;
|
||||
}
|
||||
|
||||
const nextMatches = findFilePaneTextMatches(input.textRenderData, current.query);
|
||||
const nextMatchIndex =
|
||||
nextMatches.length === 0 ? 0 : Math.min(current.currentMatchIndex, nextMatches.length - 1);
|
||||
|
||||
return {
|
||||
query: current.query,
|
||||
matches: nextMatches,
|
||||
currentMatchIndex: nextMatchIndex,
|
||||
};
|
||||
});
|
||||
}, [input.textRenderData]);
|
||||
|
||||
return {
|
||||
findHighlightsByLine,
|
||||
paneFind,
|
||||
};
|
||||
function CodeLineToken({ token }: CodeLineTokenProps) {
|
||||
return <Text style={syntaxTokenStyleFor(token.style)}>{token.text}</Text>;
|
||||
}
|
||||
|
||||
const codeLineStyles = StyleSheet.create((theme) => ({
|
||||
@@ -492,175 +186,6 @@ const codeLineStyles = StyleSheet.create((theme) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
function FilePaneFindBarSlot({ paneFind }: { paneFind: UsePaneFindResult }) {
|
||||
return paneFind.isOpen ? <FindBar {...paneFind.findBarProps} /> : null;
|
||||
}
|
||||
|
||||
function FilePaneCenterState({ children }: FilePaneCenterStateProps) {
|
||||
return <View style={styles.centerState}>{children}</View>;
|
||||
}
|
||||
|
||||
function isLineSelected(lineSelection: FileLineSelection | null, lineNumber: number): boolean {
|
||||
if (!lineSelection) {
|
||||
return false;
|
||||
}
|
||||
return lineNumber >= lineSelection.lineStart && lineNumber <= lineSelection.lineEnd;
|
||||
}
|
||||
|
||||
function FilePaneTextPreview({
|
||||
currentMatchBackgroundColor,
|
||||
findHighlightsByLine,
|
||||
gutterWidth,
|
||||
isMarkdownFile,
|
||||
isMobile,
|
||||
lineSelection,
|
||||
markdownParser,
|
||||
markdownStyles,
|
||||
matchBackgroundColor,
|
||||
preview,
|
||||
previewScrollRef,
|
||||
scrollbar,
|
||||
showDesktopWebScrollbar,
|
||||
textRenderData,
|
||||
textScrollRefs,
|
||||
webScrollbarStyle,
|
||||
}: FilePaneTextPreviewProps) {
|
||||
if (isMarkdownFile) {
|
||||
return (
|
||||
<>
|
||||
<RNScrollView
|
||||
ref={previewScrollRef}
|
||||
style={styles.previewContent}
|
||||
contentContainerStyle={styles.previewMarkdownScrollContent}
|
||||
onLayout={scrollbar.onLayout}
|
||||
onScroll={scrollbar.onScroll}
|
||||
onContentSizeChange={scrollbar.onContentSizeChange}
|
||||
scrollEventThrottle={16}
|
||||
showsVerticalScrollIndicator={!showDesktopWebScrollbar}
|
||||
>
|
||||
<Markdown style={markdownStyles} markdownit={markdownParser}>
|
||||
{preview.content ?? ""}
|
||||
</Markdown>
|
||||
</RNScrollView>
|
||||
{scrollbar.overlay}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const lines = textRenderData?.lines ?? [
|
||||
{
|
||||
lineNumber: 1,
|
||||
text: preview.content ?? "",
|
||||
tokens: [{ text: preview.content ?? "", style: null }],
|
||||
},
|
||||
];
|
||||
const keyedLines = lines.map((line) => ({
|
||||
key: `line-${line.lineNumber}`,
|
||||
line,
|
||||
}));
|
||||
const codeLines = (
|
||||
<View>
|
||||
{keyedLines.map(({ key, line }) => (
|
||||
<CodeLine
|
||||
key={key}
|
||||
segments={createFilePaneFindTokenSegments(
|
||||
line,
|
||||
findHighlightsByLine.get(line.lineNumber) ?? [],
|
||||
)}
|
||||
lineNumber={line.lineNumber}
|
||||
gutterWidth={gutterWidth}
|
||||
highlighted={isLineSelected(lineSelection, line.lineNumber)}
|
||||
matchBackgroundColor={matchBackgroundColor}
|
||||
currentMatchBackgroundColor={currentMatchBackgroundColor}
|
||||
onLineRef={textScrollRefs.registerLineRef}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<RNScrollView
|
||||
ref={previewScrollRef}
|
||||
style={styles.previewContent}
|
||||
onLayout={scrollbar.onLayout}
|
||||
onScroll={scrollbar.onScroll}
|
||||
onContentSizeChange={scrollbar.onContentSizeChange}
|
||||
scrollEventThrottle={16}
|
||||
showsVerticalScrollIndicator={!showDesktopWebScrollbar}
|
||||
>
|
||||
{isMobile ? (
|
||||
<View style={styles.previewCodeScrollContent}>{codeLines}</View>
|
||||
) : (
|
||||
<RNScrollView
|
||||
horizontal
|
||||
nestedScrollEnabled
|
||||
showsHorizontalScrollIndicator
|
||||
style={webScrollbarStyle}
|
||||
contentContainerStyle={styles.previewCodeScrollContent}
|
||||
>
|
||||
{codeLines}
|
||||
</RNScrollView>
|
||||
)}
|
||||
</RNScrollView>
|
||||
{scrollbar.overlay}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function FilePaneSearchableTextPreview(props: FilePaneSearchableTextPreviewProps) {
|
||||
const { findHighlightsByLine, paneFind } = useFilePaneFindAdapter({
|
||||
textRenderData: props.textRenderData,
|
||||
textScrollRefs: props.textScrollRefs,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<FilePaneFindBarSlot paneFind={paneFind} />
|
||||
<FilePaneTextPreview {...props} findHighlightsByLine={findHighlightsByLine} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function FilePaneImagePreview({
|
||||
imagePreviewUri,
|
||||
imageSource,
|
||||
previewScrollRef,
|
||||
scrollbar,
|
||||
showDesktopWebScrollbar,
|
||||
}: FilePaneImagePreviewProps) {
|
||||
if (!imagePreviewUri) {
|
||||
return (
|
||||
<FilePaneCenterState>
|
||||
<ActivityIndicator size="small" />
|
||||
<Text style={styles.loadingText}>Loading file…</Text>
|
||||
</FilePaneCenterState>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<RNScrollView
|
||||
ref={previewScrollRef}
|
||||
style={styles.previewContent}
|
||||
contentContainerStyle={styles.previewImageScrollContent}
|
||||
onLayout={scrollbar.onLayout}
|
||||
onScroll={scrollbar.onScroll}
|
||||
onContentSizeChange={scrollbar.onContentSizeChange}
|
||||
scrollEventThrottle={16}
|
||||
showsVerticalScrollIndicator={!showDesktopWebScrollbar}
|
||||
>
|
||||
<RNImage
|
||||
source={imageSource ?? undefined}
|
||||
style={styles.previewImage}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</RNScrollView>
|
||||
{scrollbar.overlay}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function FilePreviewBody({
|
||||
preview,
|
||||
isLoading,
|
||||
@@ -671,50 +196,40 @@ function FilePreviewBody({
|
||||
}: FilePreviewBodyProps) {
|
||||
const { theme } = useUnistyles();
|
||||
const filePath = location.path;
|
||||
const isDark = theme.colorScheme === "dark";
|
||||
const matchBackgroundColor = isDark ? "rgba(250, 204, 21, 0.32)" : "rgba(250, 204, 21, 0.38)";
|
||||
const currentMatchBackgroundColor = isDark
|
||||
? "rgba(251, 146, 60, 0.58)"
|
||||
: "rgba(251, 146, 60, 0.48)";
|
||||
const markdownStyles = useMemo(() => createMarkdownStyles(theme), [theme]);
|
||||
const markdownParser = useMemo(() => MarkdownIt({ typographer: true, linkify: true }), []);
|
||||
const isMarkdownFile =
|
||||
preview?.kind === "text" && isRenderedMarkdownFile(filePath) && !location.lineStart;
|
||||
|
||||
const fallbackScrollRef = useRef<RNScrollView>(null);
|
||||
const previewScrollRef = useRef<RNScrollView>(null);
|
||||
const webScrollbarStyle = useWebScrollbarStyle();
|
||||
const scrollbar = useWebScrollViewScrollbar(previewScrollRef, {
|
||||
enabled: showDesktopWebScrollbar,
|
||||
});
|
||||
|
||||
const textRenderData = useMemo(() => {
|
||||
const highlightedLines = useMemo(() => {
|
||||
if (!preview || preview.kind !== "text" || isMarkdownFile) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return createFilePaneTextRenderData(preview.content ?? "", filePath);
|
||||
return highlightCode(preview.content ?? "", filePath);
|
||||
}, [isMarkdownFile, preview, filePath]);
|
||||
const textLineNumbers = useMemo(
|
||||
() => textRenderData?.lines.map((line) => line.lineNumber) ?? null,
|
||||
[textRenderData],
|
||||
);
|
||||
const textScrollRefs = useFilePaneTextScrollRefs(textLineNumbers);
|
||||
const previewScrollRef = textRenderData ? textScrollRefs.previewScrollRef : fallbackScrollRef;
|
||||
const scrollbar = useWebScrollViewScrollbar(previewScrollRef, {
|
||||
enabled: showDesktopWebScrollbar,
|
||||
});
|
||||
|
||||
const gutterWidth = useMemo(() => {
|
||||
if (!textRenderData) return 0;
|
||||
return lineNumberGutterWidth(textRenderData.lines.length, theme.fontSize.code);
|
||||
}, [textRenderData, theme.fontSize.code]);
|
||||
if (!highlightedLines) return 0;
|
||||
return lineNumberGutterWidth(highlightedLines.length, theme.fontSize.code);
|
||||
}, [highlightedLines, theme.fontSize.code]);
|
||||
const lineHeight = theme.fontSize.code * 1.45;
|
||||
const lineSelection = useMemo(() => {
|
||||
if (!textRenderData) {
|
||||
if (!highlightedLines) {
|
||||
return null;
|
||||
}
|
||||
return clampLineSelection({
|
||||
lineStart: location.lineStart,
|
||||
lineEnd: location.lineEnd,
|
||||
lineCount: textRenderData.lines.length,
|
||||
lineCount: highlightedLines.length,
|
||||
});
|
||||
}, [textRenderData, location.lineEnd, location.lineStart]);
|
||||
}, [highlightedLines, location.lineEnd, location.lineStart]);
|
||||
|
||||
const imageSource = useMemo(
|
||||
() => (imagePreviewUri ? { uri: imagePreviewUri } : null),
|
||||
@@ -732,83 +247,141 @@ function FilePreviewBody({
|
||||
});
|
||||
}, 0);
|
||||
return () => clearTimeout(timeout);
|
||||
}, [lineHeight, lineSelection, previewScrollRef]);
|
||||
}, [lineHeight, lineSelection]);
|
||||
|
||||
let content: React.ReactNode;
|
||||
if (isLoading && !preview) {
|
||||
content = (
|
||||
<FilePaneCenterState>
|
||||
return (
|
||||
<View style={styles.centerState}>
|
||||
<ActivityIndicator size="small" />
|
||||
<Text style={styles.loadingText}>Loading file…</Text>
|
||||
</FilePaneCenterState>
|
||||
);
|
||||
} else if (!preview) {
|
||||
content = (
|
||||
<FilePaneCenterState>
|
||||
<Text style={styles.emptyText}>No preview available</Text>
|
||||
</FilePaneCenterState>
|
||||
);
|
||||
} else if (preview.kind === "text" && textRenderData) {
|
||||
content = (
|
||||
<FilePaneSearchableTextPreview
|
||||
currentMatchBackgroundColor={currentMatchBackgroundColor}
|
||||
gutterWidth={gutterWidth}
|
||||
isMarkdownFile={isMarkdownFile}
|
||||
isMobile={isMobile}
|
||||
lineSelection={lineSelection}
|
||||
markdownParser={markdownParser}
|
||||
markdownStyles={markdownStyles}
|
||||
matchBackgroundColor={matchBackgroundColor}
|
||||
preview={preview}
|
||||
previewScrollRef={previewScrollRef}
|
||||
scrollbar={scrollbar}
|
||||
showDesktopWebScrollbar={showDesktopWebScrollbar}
|
||||
textRenderData={textRenderData}
|
||||
textScrollRefs={textScrollRefs}
|
||||
webScrollbarStyle={webScrollbarStyle}
|
||||
/>
|
||||
);
|
||||
} else if (preview.kind === "text") {
|
||||
content = (
|
||||
<FilePaneTextPreview
|
||||
currentMatchBackgroundColor={currentMatchBackgroundColor}
|
||||
findHighlightsByLine={new Map()}
|
||||
gutterWidth={gutterWidth}
|
||||
isMarkdownFile={isMarkdownFile}
|
||||
isMobile={isMobile}
|
||||
lineSelection={lineSelection}
|
||||
markdownParser={markdownParser}
|
||||
markdownStyles={markdownStyles}
|
||||
matchBackgroundColor={matchBackgroundColor}
|
||||
preview={preview}
|
||||
previewScrollRef={previewScrollRef}
|
||||
scrollbar={scrollbar}
|
||||
showDesktopWebScrollbar={showDesktopWebScrollbar}
|
||||
textRenderData={textRenderData}
|
||||
textScrollRefs={textScrollRefs}
|
||||
webScrollbarStyle={webScrollbarStyle}
|
||||
/>
|
||||
);
|
||||
} else if (preview.kind === "image") {
|
||||
content = (
|
||||
<FilePaneImagePreview
|
||||
imagePreviewUri={imagePreviewUri}
|
||||
imageSource={imageSource}
|
||||
previewScrollRef={previewScrollRef}
|
||||
scrollbar={scrollbar}
|
||||
showDesktopWebScrollbar={showDesktopWebScrollbar}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
content = (
|
||||
<FilePaneCenterState>
|
||||
<Text style={styles.emptyText}>Binary preview unavailable</Text>
|
||||
<Text style={styles.binaryMetaText}>{formatFileSize({ size: preview.size })}</Text>
|
||||
</FilePaneCenterState>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return <View style={styles.previewScrollContainer}>{content}</View>;
|
||||
if (!preview) {
|
||||
return (
|
||||
<View style={styles.centerState}>
|
||||
<Text style={styles.emptyText}>No preview available</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (preview.kind === "text") {
|
||||
if (isMarkdownFile) {
|
||||
return (
|
||||
<View style={styles.previewScrollContainer}>
|
||||
<RNScrollView
|
||||
ref={previewScrollRef}
|
||||
style={styles.previewContent}
|
||||
contentContainerStyle={styles.previewMarkdownScrollContent}
|
||||
onLayout={scrollbar.onLayout}
|
||||
onScroll={scrollbar.onScroll}
|
||||
onContentSizeChange={scrollbar.onContentSizeChange}
|
||||
scrollEventThrottle={16}
|
||||
showsVerticalScrollIndicator={!showDesktopWebScrollbar}
|
||||
>
|
||||
<Markdown style={markdownStyles} markdownit={markdownParser}>
|
||||
{preview.content ?? ""}
|
||||
</Markdown>
|
||||
</RNScrollView>
|
||||
{scrollbar.overlay}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const lines = highlightedLines ?? [[{ text: preview.content ?? "", style: null }]];
|
||||
const keyedLines = lines.map((tokens, index) => ({
|
||||
key: `line-${index}`,
|
||||
tokens,
|
||||
lineNumber: index + 1,
|
||||
}));
|
||||
const codeLines = (
|
||||
<View>
|
||||
{keyedLines.map(({ key, tokens, lineNumber }) => (
|
||||
<CodeLine
|
||||
key={key}
|
||||
tokens={tokens}
|
||||
lineNumber={lineNumber}
|
||||
gutterWidth={gutterWidth}
|
||||
highlighted={
|
||||
Boolean(lineSelection) &&
|
||||
lineNumber >= (lineSelection?.lineStart ?? 0) &&
|
||||
lineNumber <= (lineSelection?.lineEnd ?? 0)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.previewScrollContainer}>
|
||||
<RNScrollView
|
||||
ref={previewScrollRef}
|
||||
style={styles.previewContent}
|
||||
onLayout={scrollbar.onLayout}
|
||||
onScroll={scrollbar.onScroll}
|
||||
onContentSizeChange={scrollbar.onContentSizeChange}
|
||||
scrollEventThrottle={16}
|
||||
showsVerticalScrollIndicator={!showDesktopWebScrollbar}
|
||||
>
|
||||
{isMobile ? (
|
||||
<View style={styles.previewCodeScrollContent}>{codeLines}</View>
|
||||
) : (
|
||||
<RNScrollView
|
||||
horizontal
|
||||
nestedScrollEnabled
|
||||
showsHorizontalScrollIndicator
|
||||
style={webScrollbarStyle}
|
||||
contentContainerStyle={styles.previewCodeScrollContent}
|
||||
>
|
||||
{codeLines}
|
||||
</RNScrollView>
|
||||
)}
|
||||
</RNScrollView>
|
||||
{scrollbar.overlay}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (preview.kind === "image") {
|
||||
if (!imagePreviewUri) {
|
||||
return (
|
||||
<View style={styles.centerState}>
|
||||
<ActivityIndicator size="small" />
|
||||
<Text style={styles.loadingText}>Loading file…</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.previewScrollContainer}>
|
||||
<RNScrollView
|
||||
ref={previewScrollRef}
|
||||
style={styles.previewContent}
|
||||
contentContainerStyle={styles.previewImageScrollContent}
|
||||
onLayout={scrollbar.onLayout}
|
||||
onScroll={scrollbar.onScroll}
|
||||
onContentSizeChange={scrollbar.onContentSizeChange}
|
||||
scrollEventThrottle={16}
|
||||
showsVerticalScrollIndicator={!showDesktopWebScrollbar}
|
||||
>
|
||||
<RNImage
|
||||
source={imageSource ?? undefined}
|
||||
style={styles.previewImage}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</RNScrollView>
|
||||
{scrollbar.overlay}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.centerState}>
|
||||
<Text style={styles.emptyText}>Binary preview unavailable</Text>
|
||||
<Text style={styles.binaryMetaText}>{formatFileSize({ size: preview.size })}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export function FilePane({
|
||||
|
||||
@@ -63,7 +63,11 @@ import Animated, {
|
||||
import Svg, { Defs, LinearGradient as SvgLinearGradient, Rect, Stop } from "react-native-svg";
|
||||
import { createMarkdownStyles } from "@/styles/markdown-styles";
|
||||
import { Fonts } from "@/constants/theme";
|
||||
import type { TodoEntry, UserMessageImageAttachment } from "@/types/stream";
|
||||
import type {
|
||||
TodoEntry,
|
||||
UserMessageDeliveryHint,
|
||||
UserMessageImageAttachment,
|
||||
} from "@/types/stream";
|
||||
import type { AgentAttachment } from "@getpaseo/protocol/messages";
|
||||
import type { ToolCallDetail } from "@getpaseo/protocol/agent-types";
|
||||
import { buildToolCallPresentation } from "@/tool-calls/presentation";
|
||||
@@ -124,7 +128,7 @@ interface UserMessageProps {
|
||||
isFirstInGroup?: boolean;
|
||||
isLastInGroup?: boolean;
|
||||
disableOuterSpacing?: boolean;
|
||||
findHighlights?: MessageFindHighlight[];
|
||||
deliveryHint?: UserMessageDeliveryHint;
|
||||
}
|
||||
|
||||
const MessageOuterSpacingContext = createContext(false);
|
||||
@@ -159,19 +163,6 @@ const MARKDOWN_ALLOWED_IMAGE_HANDLERS = [
|
||||
] as const;
|
||||
const MARKDOWN_TOP_LEVEL_MAX_EXCEEDED_ITEM = <Text key="dotdotdot">...</Text>;
|
||||
|
||||
export interface MessageFindHighlight {
|
||||
id: string;
|
||||
start: number;
|
||||
end: number;
|
||||
isCurrent: boolean;
|
||||
}
|
||||
|
||||
interface MessageFindTextSegment {
|
||||
key: string;
|
||||
text: string;
|
||||
highlight?: MessageFindHighlight;
|
||||
}
|
||||
|
||||
interface MarkdownWithStableRendererProps {
|
||||
children: ReactNode;
|
||||
style: ReturnType<typeof createMarkdownStyles>;
|
||||
@@ -223,95 +214,6 @@ const SCROLL_EDGE_EPSILON = 0.5;
|
||||
export const STREAM_METADATA_FONT_SIZE = 13;
|
||||
type ScrollAxis = "x" | "y";
|
||||
|
||||
function normalizeFindHighlights(
|
||||
textLength: number,
|
||||
highlights: MessageFindHighlight[] | undefined,
|
||||
): MessageFindHighlight[] {
|
||||
if (!highlights || highlights.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return highlights
|
||||
.map((highlight) => ({
|
||||
...highlight,
|
||||
start: Math.max(0, Math.min(textLength, highlight.start)),
|
||||
end: Math.max(0, Math.min(textLength, highlight.end)),
|
||||
}))
|
||||
.filter((highlight) => highlight.start < highlight.end)
|
||||
.sort((left, right) => left.start - right.start || left.end - right.end);
|
||||
}
|
||||
|
||||
function createMessageFindTextSegments(
|
||||
text: string,
|
||||
highlights: MessageFindHighlight[] | undefined,
|
||||
): MessageFindTextSegment[] {
|
||||
const normalizedHighlights = normalizeFindHighlights(text.length, highlights);
|
||||
if (normalizedHighlights.length === 0) {
|
||||
return [{ key: "text", text }];
|
||||
}
|
||||
|
||||
const segments: MessageFindTextSegment[] = [];
|
||||
let cursor = 0;
|
||||
for (const highlight of normalizedHighlights) {
|
||||
if (cursor < highlight.start) {
|
||||
segments.push({
|
||||
key: `plain:${cursor}:${highlight.start}`,
|
||||
text: text.slice(cursor, highlight.start),
|
||||
});
|
||||
}
|
||||
segments.push({
|
||||
key: highlight.id,
|
||||
text: text.slice(highlight.start, highlight.end),
|
||||
highlight,
|
||||
});
|
||||
cursor = highlight.end;
|
||||
}
|
||||
|
||||
if (cursor < text.length) {
|
||||
segments.push({
|
||||
key: `plain:${cursor}:${text.length}`,
|
||||
text: text.slice(cursor),
|
||||
});
|
||||
}
|
||||
|
||||
return segments;
|
||||
}
|
||||
|
||||
interface MarkdownBlockWithOffset {
|
||||
key: string;
|
||||
block: string;
|
||||
startOffset: number;
|
||||
}
|
||||
|
||||
function createMarkdownBlocksWithOffsets(message: string): MarkdownBlockWithOffset[] {
|
||||
let cursor = 0;
|
||||
return splitMarkdownBlocks(message).map((block, index) => {
|
||||
const startOffset = Math.max(cursor, message.indexOf(block, cursor));
|
||||
cursor = startOffset + block.length;
|
||||
return {
|
||||
key: `${index}:${block.slice(0, 32)}`,
|
||||
block,
|
||||
startOffset,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function createBlockFindHighlights(
|
||||
blockStartOffset: number,
|
||||
blockLength: number,
|
||||
highlights: MessageFindHighlight[] | undefined,
|
||||
): MessageFindHighlight[] {
|
||||
const blockEndOffset = blockStartOffset + blockLength;
|
||||
return normalizeFindHighlights(blockEndOffset, highlights)
|
||||
.filter((highlight) => highlight.start < blockEndOffset && highlight.end > blockStartOffset)
|
||||
.map((highlight) => ({
|
||||
id: highlight.id,
|
||||
start: Math.max(0, highlight.start - blockStartOffset),
|
||||
end: Math.min(blockLength, highlight.end - blockStartOffset),
|
||||
isCurrent: highlight.isCurrent,
|
||||
}));
|
||||
}
|
||||
|
||||
function ensureWebToolCallShimmerKeyframes() {
|
||||
if (isNative) {
|
||||
return;
|
||||
@@ -472,14 +374,6 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
|
||||
lineHeight: 22,
|
||||
overflowWrap: "anywhere",
|
||||
},
|
||||
findMatchText: {
|
||||
backgroundColor:
|
||||
theme.colorScheme === "dark" ? "rgba(250, 204, 21, 0.32)" : "rgba(250, 204, 21, 0.38)",
|
||||
},
|
||||
findCurrentMatchText: {
|
||||
backgroundColor:
|
||||
theme.colorScheme === "dark" ? "rgba(251, 146, 60, 0.58)" : "rgba(251, 146, 60, 0.48)",
|
||||
},
|
||||
imagePreviewContainer: {
|
||||
flexDirection: "row",
|
||||
gap: theme.spacing[2],
|
||||
@@ -545,30 +439,14 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
|
||||
color: theme.colors.foregroundMuted,
|
||||
fontSize: STREAM_METADATA_FONT_SIZE,
|
||||
},
|
||||
deliveryHintLabel: {
|
||||
alignSelf: "flex-end",
|
||||
marginTop: theme.spacing[1],
|
||||
color: theme.colors.foregroundMuted,
|
||||
fontSize: theme.fontSize.xs,
|
||||
},
|
||||
}));
|
||||
|
||||
function MessageFindHighlightedText({ segments }: { segments: MessageFindTextSegment[] }) {
|
||||
return (
|
||||
<>
|
||||
{segments.map((segment) => (
|
||||
<Text key={segment.key} style={getMessageFindHighlightStyle(segment.highlight)}>
|
||||
{segment.text}
|
||||
</Text>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function getMessageFindHighlightStyle(highlight: MessageFindHighlight | undefined) {
|
||||
if (highlight?.isCurrent) {
|
||||
return userMessageStylesheet.findCurrentMatchText;
|
||||
}
|
||||
if (highlight) {
|
||||
return userMessageStylesheet.findMatchText;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function UserMessageAttachmentThumbnail({ image }: { image: UserMessageImageAttachment }) {
|
||||
const uri = useAttachmentPreviewUrl(image);
|
||||
const imageSource = useMemo(() => ({ uri: uri ?? "" }), [uri]);
|
||||
@@ -608,7 +486,7 @@ export const UserMessage = memo(function UserMessage({
|
||||
isFirstInGroup = true,
|
||||
isLastInGroup = true,
|
||||
disableOuterSpacing,
|
||||
findHighlights,
|
||||
deliveryHint,
|
||||
}: UserMessageProps) {
|
||||
const isCompact = useIsCompactFormFactor();
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
@@ -632,10 +510,6 @@ export const UserMessage = memo(function UserMessage({
|
||||
},
|
||||
[rewindMutation],
|
||||
);
|
||||
const highlightedMessageSegments = useMemo(
|
||||
() => createMessageFindTextSegments(message, findHighlights),
|
||||
[findHighlights, message],
|
||||
);
|
||||
|
||||
const containerStyle = useMemo(
|
||||
() => [
|
||||
@@ -705,7 +579,7 @@ export const UserMessage = memo(function UserMessage({
|
||||
) : null}
|
||||
{hasText ? (
|
||||
<Text selectable style={userMessageStylesheet.text}>
|
||||
<MessageFindHighlightedText segments={highlightedMessageSegments} />
|
||||
{message}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
@@ -727,6 +601,14 @@ export const UserMessage = memo(function UserMessage({
|
||||
/>
|
||||
</View>
|
||||
) : null}
|
||||
{deliveryHint === "steering" ? (
|
||||
<Text
|
||||
accessibilityLabel="Steering conversation"
|
||||
style={userMessageStylesheet.deliveryHintLabel}
|
||||
>
|
||||
Steering conversation
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@@ -890,7 +772,6 @@ interface AssistantMessageProps {
|
||||
serverId?: string;
|
||||
client?: DaemonClient | null;
|
||||
spacing?: "default" | "compactTop" | "compactBottom" | "compactBoth";
|
||||
findHighlights?: MessageFindHighlight[];
|
||||
}
|
||||
|
||||
export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
|
||||
@@ -1626,7 +1507,6 @@ interface MemoizedMarkdownBlockProps {
|
||||
rules: RenderRules;
|
||||
parser: MarkdownIt;
|
||||
onLinkPress: (url: string) => boolean;
|
||||
findHighlights?: MessageFindHighlight[];
|
||||
}
|
||||
|
||||
const MemoizedMarkdownBlock = React.memo(function MemoizedMarkdownBlock({
|
||||
@@ -1634,61 +1514,26 @@ const MemoizedMarkdownBlock = React.memo(function MemoizedMarkdownBlock({
|
||||
rules,
|
||||
parser,
|
||||
onLinkPress,
|
||||
findHighlights,
|
||||
}: MemoizedMarkdownBlockProps) {
|
||||
const textCursorRef = useRef(0);
|
||||
textCursorRef.current = 0;
|
||||
const renderFindHighlightedText = useCallback(
|
||||
(content: string) => {
|
||||
if (!findHighlights || findHighlights.length === 0 || content.length === 0) {
|
||||
return content;
|
||||
}
|
||||
|
||||
const start = text.indexOf(content, textCursorRef.current);
|
||||
if (start < 0) {
|
||||
return content;
|
||||
}
|
||||
|
||||
textCursorRef.current = start + content.length;
|
||||
const end = start + content.length;
|
||||
const contentHighlights = findHighlights
|
||||
.filter((highlight) => highlight.start < end && highlight.end > start)
|
||||
.map((highlight) => ({
|
||||
id: highlight.id,
|
||||
start: Math.max(0, highlight.start - start),
|
||||
end: Math.min(content.length, highlight.end - start),
|
||||
isCurrent: highlight.isCurrent,
|
||||
}));
|
||||
const segments = createMessageFindTextSegments(content, contentHighlights);
|
||||
return <MessageFindHighlightedText segments={segments} />;
|
||||
},
|
||||
[findHighlights, text],
|
||||
);
|
||||
|
||||
return (
|
||||
<MarkdownFindHighlightContext.Provider value={renderFindHighlightedText}>
|
||||
<ThemedMarkdown
|
||||
uniProps={markdownStyleMapping}
|
||||
rules={rules}
|
||||
markdownit={parser}
|
||||
onLinkPress={onLinkPress}
|
||||
allowedImageHandlers={MARKDOWN_ALLOWED_IMAGE_HANDLERS}
|
||||
topLevelMaxExceededItem={MARKDOWN_TOP_LEVEL_MAX_EXCEEDED_ITEM}
|
||||
>
|
||||
{text}
|
||||
</ThemedMarkdown>
|
||||
</MarkdownFindHighlightContext.Provider>
|
||||
<ThemedMarkdown
|
||||
uniProps={markdownStyleMapping}
|
||||
rules={rules}
|
||||
markdownit={parser}
|
||||
onLinkPress={onLinkPress}
|
||||
allowedImageHandlers={MARKDOWN_ALLOWED_IMAGE_HANDLERS}
|
||||
topLevelMaxExceededItem={MARKDOWN_TOP_LEVEL_MAX_EXCEEDED_ITEM}
|
||||
>
|
||||
{text}
|
||||
</ThemedMarkdown>
|
||||
);
|
||||
});
|
||||
|
||||
const MarkdownFindHighlightContext = createContext<((content: string) => ReactNode) | null>(null);
|
||||
|
||||
interface MarkdownInheritedTextProps {
|
||||
inheritedStyles: TextStyle;
|
||||
textStyle: TextStyle;
|
||||
style?: StyleProp<TextStyle>;
|
||||
children: ReactNode;
|
||||
disableFindHighlight?: boolean;
|
||||
}
|
||||
|
||||
function MarkdownInheritedText({
|
||||
@@ -1696,18 +1541,12 @@ function MarkdownInheritedText({
|
||||
textStyle,
|
||||
style: overrideStyle,
|
||||
children,
|
||||
disableFindHighlight = false,
|
||||
}: MarkdownInheritedTextProps) {
|
||||
const renderFindHighlightedText = useContext(MarkdownFindHighlightContext);
|
||||
const style = useMemo(
|
||||
() => [inheritedStyles, textStyle, overrideStyle],
|
||||
[inheritedStyles, textStyle, overrideStyle],
|
||||
);
|
||||
const renderedChildren =
|
||||
!disableFindHighlight && typeof children === "string" && renderFindHighlightedText
|
||||
? renderFindHighlightedText(children)
|
||||
: children;
|
||||
return <MarkdownTextSpan style={style}>{renderedChildren}</MarkdownTextSpan>;
|
||||
return <MarkdownTextSpan style={style}>{children}</MarkdownTextSpan>;
|
||||
}
|
||||
|
||||
interface MarkdownListItemContentProps {
|
||||
@@ -1740,7 +1579,6 @@ export const AssistantMessage = memo(function AssistantMessage({
|
||||
serverId,
|
||||
client,
|
||||
spacing = "default",
|
||||
findHighlights,
|
||||
}: AssistantMessageProps) {
|
||||
const markdownParser = useMemo(() => {
|
||||
const parser = MarkdownIt({ typographer: true, linkify: true });
|
||||
@@ -1878,7 +1716,6 @@ export const AssistantMessage = memo(function AssistantMessage({
|
||||
key={node.key}
|
||||
inheritedStyles={inheritedStyles}
|
||||
textStyle={styles.code_inline}
|
||||
disableFindHighlight
|
||||
>
|
||||
{content}
|
||||
</MarkdownInheritedText>
|
||||
@@ -1986,7 +1823,11 @@ export const AssistantMessage = memo(function AssistantMessage({
|
||||
};
|
||||
}, [client, fileLinkActions, markdownParser, serverId, workspaceRoot]);
|
||||
|
||||
const keyedBlocks = useMemo(() => createMarkdownBlocksWithOffsets(message), [message]);
|
||||
const blocks = useMemo(() => splitMarkdownBlocks(message), [message]);
|
||||
const keyedBlocks = useMemo(
|
||||
() => blocks.map((block, index) => ({ key: `${index}:${block.slice(0, 32)}`, block })),
|
||||
[blocks],
|
||||
);
|
||||
|
||||
const assistantContainerStyle = useMemo(
|
||||
() => [
|
||||
@@ -2001,7 +1842,7 @@ export const AssistantMessage = memo(function AssistantMessage({
|
||||
|
||||
return (
|
||||
<View testID="assistant-message" style={assistantContainerStyle}>
|
||||
{keyedBlocks.map(({ key, block, startOffset }, index) => (
|
||||
{keyedBlocks.map(({ key, block }, index) => (
|
||||
<AssistantMessageBlockContainer
|
||||
key={key}
|
||||
block={block}
|
||||
@@ -2012,7 +1853,6 @@ export const AssistantMessage = memo(function AssistantMessage({
|
||||
rules={markdownRules}
|
||||
parser={markdownParser}
|
||||
onLinkPress={handleMarkdownLinkPress}
|
||||
findHighlights={createBlockFindHighlights(startOffset, block.length, findHighlights)}
|
||||
/>
|
||||
</AssistantMessageBlockContainer>
|
||||
))}
|
||||
|
||||
@@ -47,7 +47,7 @@ export function useRewindAgentMutation(input: UseRewindAgentMutationInput): {
|
||||
: undefined;
|
||||
await input.client.fetchAgentTimeline(input.agentId, {
|
||||
direction: "tail",
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
...(cursor ? { cursor: { epoch: cursor.epoch, seq: cursor.endSeq } } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { getNativeScrollToIndexFallbackOffset } from "@/agent-stream/strategy-native";
|
||||
|
||||
describe("getNativeScrollToIndexFallbackOffset", () => {
|
||||
it("approximates the offset for an unmeasured native FlatList row", () => {
|
||||
expect(
|
||||
getNativeScrollToIndexFallbackOffset({
|
||||
index: 25,
|
||||
averageItemLength: 72,
|
||||
}),
|
||||
).toBe(1800);
|
||||
});
|
||||
|
||||
it("falls back to the start when the average item length is not useful", () => {
|
||||
expect(
|
||||
getNativeScrollToIndexFallbackOffset({
|
||||
index: 25,
|
||||
averageItemLength: 0,
|
||||
}),
|
||||
).toBe(0);
|
||||
expect(
|
||||
getNativeScrollToIndexFallbackOffset({
|
||||
index: 25,
|
||||
averageItemLength: Number.NaN,
|
||||
}),
|
||||
).toBe(0);
|
||||
});
|
||||
});
|
||||
@@ -22,7 +22,6 @@ import type { TerminalInputModeState } from "@getpaseo/protocol/terminal-input-m
|
||||
import type { PendingTerminalModifiers } from "../utils/terminal-keys";
|
||||
import {
|
||||
TerminalEmulatorRuntime,
|
||||
type TerminalFindResultChangeEvent,
|
||||
type TerminalOutputData,
|
||||
} from "../terminal/runtime/terminal-emulator-runtime";
|
||||
import type {
|
||||
@@ -50,10 +49,6 @@ export interface TerminalEmulatorHandle {
|
||||
renderSnapshot: (state: TerminalState | null) => void;
|
||||
clear: () => void;
|
||||
blur: () => void;
|
||||
findNext: (input: { query: string }) => boolean;
|
||||
findPrevious: (input: { query: string }) => boolean;
|
||||
clearFindDecorations: () => void;
|
||||
onFindResultsChanged: (listener: (event: TerminalFindResultChangeEvent) => void) => () => void;
|
||||
}
|
||||
|
||||
const SCROLLBAR_HANDLE_WIDTH_IDLE = 6;
|
||||
@@ -333,18 +328,6 @@ export default function TerminalEmulator({
|
||||
blur: () => {
|
||||
runtimeRef.current?.blur();
|
||||
},
|
||||
findNext: (input: { query: string }) => {
|
||||
return runtimeRef.current?.findNext(input) ?? false;
|
||||
},
|
||||
findPrevious: (input: { query: string }) => {
|
||||
return runtimeRef.current?.findPrevious(input) ?? false;
|
||||
},
|
||||
clearFindDecorations: () => {
|
||||
runtimeRef.current?.clearFindDecorations();
|
||||
},
|
||||
onFindResultsChanged: (listener: (event: TerminalFindResultChangeEvent) => void) => {
|
||||
return runtimeRef.current?.onFindResultsChanged(listener) ?? (() => {});
|
||||
},
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
@@ -1,452 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import React, { act, useImperativeHandle } from "react";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { TerminalPane } from "@/components/terminal-pane";
|
||||
import type { TerminalEmulatorHandle } from "@/components/terminal-emulator";
|
||||
import {
|
||||
PaneFocusProvider,
|
||||
PaneProvider,
|
||||
createPaneFocusContextValue,
|
||||
type PaneContextValue,
|
||||
} from "@/panels/pane-context";
|
||||
import {
|
||||
clearActivePaneFindPaneId,
|
||||
handlePaneFindKeyboardAction,
|
||||
setActivePaneFindPaneId,
|
||||
} from "@/panels/pane-find-registry";
|
||||
|
||||
interface FindResultChange {
|
||||
resultIndex: number;
|
||||
resultCount: number;
|
||||
}
|
||||
|
||||
interface TerminalKeyInput {
|
||||
key: string;
|
||||
ctrl: boolean;
|
||||
shift: boolean;
|
||||
alt: boolean;
|
||||
meta: boolean;
|
||||
}
|
||||
|
||||
interface MockTerminalEmulatorProps {
|
||||
testId?: string;
|
||||
onTerminalKey?: (input: TerminalKeyInput) => Promise<void> | void;
|
||||
}
|
||||
|
||||
const { client, findListeners, terminalProps, theme, terminalHandle, resetTerminalHandle } =
|
||||
vi.hoisted(() => {
|
||||
const listeners: Array<(event: FindResultChange) => void> = [];
|
||||
const handle = {
|
||||
writeOutput: vi.fn(),
|
||||
restoreOutput: vi.fn(),
|
||||
renderSnapshot: vi.fn(),
|
||||
clear: vi.fn(),
|
||||
blur: vi.fn(),
|
||||
findNext: vi.fn(() => true),
|
||||
findPrevious: vi.fn(() => true),
|
||||
clearFindDecorations: vi.fn(),
|
||||
onFindResultsChanged: vi.fn((listener: (event: FindResultChange) => void) => {
|
||||
listeners.push(listener);
|
||||
return () => {
|
||||
const index = listeners.indexOf(listener);
|
||||
if (index >= 0) {
|
||||
listeners.splice(index, 1);
|
||||
}
|
||||
};
|
||||
}),
|
||||
};
|
||||
return {
|
||||
client: {
|
||||
on: vi.fn(() => () => {}),
|
||||
sendTerminalInput: vi.fn(),
|
||||
},
|
||||
findListeners: listeners,
|
||||
terminalProps: {
|
||||
current: null as null | MockTerminalEmulatorProps,
|
||||
},
|
||||
terminalHandle: handle,
|
||||
resetTerminalHandle: () => {
|
||||
handle.writeOutput.mockClear();
|
||||
handle.renderSnapshot.mockClear();
|
||||
handle.clear.mockClear();
|
||||
handle.findNext.mockClear();
|
||||
handle.findPrevious.mockClear();
|
||||
handle.clearFindDecorations.mockClear();
|
||||
handle.onFindResultsChanged.mockClear();
|
||||
listeners.splice(0);
|
||||
},
|
||||
theme: {
|
||||
spacing: { 1: 4, 2: 8, 3: 12, 4: 16 },
|
||||
fontSize: { xs: 11, sm: 13 },
|
||||
fontWeight: { medium: "500" as const },
|
||||
borderRadius: { md: 6 },
|
||||
colors: {
|
||||
background: "#000",
|
||||
border: "#333",
|
||||
destructive: "#f43f5e",
|
||||
foreground: "#fff",
|
||||
foregroundMuted: "#aaa",
|
||||
primary: "#0a84ff",
|
||||
surface0: "#111",
|
||||
surface1: "#222",
|
||||
surface2: "#333",
|
||||
terminal: {
|
||||
background: "#000",
|
||||
foreground: "#fff",
|
||||
cursor: "#fff",
|
||||
cursorAccent: "#000",
|
||||
selectionBackground: "#444",
|
||||
selectionForeground: "#fff",
|
||||
black: "#000",
|
||||
red: "#f00",
|
||||
green: "#0f0",
|
||||
yellow: "#ff0",
|
||||
blue: "#00f",
|
||||
magenta: "#f0f",
|
||||
cyan: "#0ff",
|
||||
white: "#fff",
|
||||
brightBlack: "#555",
|
||||
brightRed: "#f55",
|
||||
brightGreen: "#5f5",
|
||||
brightYellow: "#ff5",
|
||||
brightBlue: "#55f",
|
||||
brightMagenta: "#f5f",
|
||||
brightCyan: "#5ff",
|
||||
brightWhite: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("react-native", () => {
|
||||
const MockView = ({ children, testID }: { children?: React.ReactNode; testID?: string }) =>
|
||||
React.createElement("div", { "data-testid": testID }, children);
|
||||
const MockText = ({ children }: { children?: React.ReactNode }) =>
|
||||
React.createElement("span", null, children);
|
||||
const MockPressable = ({
|
||||
children,
|
||||
disabled,
|
||||
onPress,
|
||||
testID,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
onPress?: () => void;
|
||||
testID?: string;
|
||||
}) =>
|
||||
React.createElement(
|
||||
"button",
|
||||
{
|
||||
"data-testid": testID,
|
||||
disabled,
|
||||
onClick: () => {
|
||||
if (!disabled) {
|
||||
onPress?.();
|
||||
}
|
||||
},
|
||||
type: "button",
|
||||
},
|
||||
children,
|
||||
);
|
||||
const MockTextInput = React.forwardRef<
|
||||
HTMLInputElement,
|
||||
{
|
||||
value?: string;
|
||||
onChangeText?: (text: string) => void;
|
||||
onKeyPress?: (event: {
|
||||
nativeEvent: { key: string; shiftKey?: boolean };
|
||||
preventDefault: () => void;
|
||||
}) => void;
|
||||
testID?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
>(function TextInput({ value, onChangeText, onKeyPress, testID, placeholder }, ref) {
|
||||
return React.createElement("input", {
|
||||
"data-testid": testID,
|
||||
onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
onChangeText?.(event.currentTarget.value),
|
||||
onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) =>
|
||||
onKeyPress?.({
|
||||
nativeEvent: { key: event.key, shiftKey: event.shiftKey },
|
||||
preventDefault: () => event.preventDefault(),
|
||||
}),
|
||||
placeholder,
|
||||
ref,
|
||||
value: value ?? "",
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
ActivityIndicator: () => React.createElement("span", { "data-testid": "activity" }),
|
||||
Platform: {
|
||||
OS: "web",
|
||||
select: (options: Record<string, unknown>) => options.web ?? options.default,
|
||||
},
|
||||
Pressable: MockPressable,
|
||||
ScrollView: MockView,
|
||||
Text: MockText,
|
||||
TextInput: MockTextInput,
|
||||
View: MockView,
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("react-native-reanimated", () => ({
|
||||
default: {
|
||||
View: ({ children }: { children?: React.ReactNode }) =>
|
||||
React.createElement("div", null, children),
|
||||
},
|
||||
runOnJS: (fn: () => void) => fn,
|
||||
useAnimatedReaction: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("react-native-unistyles", () => ({
|
||||
StyleSheet: {
|
||||
absoluteFillObject: {},
|
||||
hairlineWidth: 1,
|
||||
create: (factory: unknown) =>
|
||||
Object.prototype.toString.call(factory) === "[object Function]"
|
||||
? (factory as (value: unknown) => unknown)(theme)
|
||||
: factory,
|
||||
},
|
||||
useUnistyles: () => ({ theme }),
|
||||
}));
|
||||
|
||||
vi.mock("lucide-react-native", () => {
|
||||
const createIcon = (name: string) =>
|
||||
function Icon() {
|
||||
return React.createElement("span", { "data-icon": name });
|
||||
};
|
||||
return {
|
||||
ChevronDown: createIcon("ChevronDown"),
|
||||
ChevronUp: createIcon("ChevronUp"),
|
||||
X: createIcon("X"),
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("@/runtime/host-runtime", () => ({
|
||||
useHostRuntimeClient: () => client,
|
||||
useHostRuntimeIsConnected: () => true,
|
||||
}));
|
||||
|
||||
vi.mock("@/hooks/use-app-visible", () => ({
|
||||
useAppVisible: () => true,
|
||||
}));
|
||||
|
||||
vi.mock("@/hooks/use-keyboard-shift-style", () => ({
|
||||
useKeyboardShiftStyle: () => ({
|
||||
shift: { value: 0 },
|
||||
style: null,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@/hooks/use-settings", () => ({
|
||||
useAppSettings: () => ({ settings: { terminalScrollbackLines: 1000 } }),
|
||||
}));
|
||||
|
||||
vi.mock("@/constants/layout", () => ({
|
||||
useIsCompactFormFactor: () => false,
|
||||
}));
|
||||
|
||||
vi.mock("@/stores/panel-store", () => ({
|
||||
usePanelStore: (
|
||||
selector: (state: { mobileView: string; showMobileAgentList: () => void }) => unknown,
|
||||
) => selector({ mobileView: "agent", showMobileAgentList: vi.fn() }),
|
||||
}));
|
||||
|
||||
vi.mock("@/terminal/runtime/workspace-terminal-session", () => ({
|
||||
getWorkspaceTerminalSession: () => ({
|
||||
snapshots: {
|
||||
clear: vi.fn(),
|
||||
get: vi.fn(() => null),
|
||||
set: vi.fn(),
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@/terminal/runtime/terminal-stream-controller", () => ({
|
||||
TerminalStreamController: class {
|
||||
dispose() {}
|
||||
setTerminal() {}
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@/components/terminal-emulator", () => ({
|
||||
default: React.forwardRef<TerminalEmulatorHandle, MockTerminalEmulatorProps>(
|
||||
function TerminalEmulator(props, ref) {
|
||||
terminalProps.current = props;
|
||||
useImperativeHandle(ref, () => terminalHandle);
|
||||
return React.createElement("div", { "data-testid": props.testId ?? "terminal-surface" });
|
||||
},
|
||||
),
|
||||
}));
|
||||
|
||||
const paneInstanceId = "server-a:workspace-a:left";
|
||||
const paneContext: PaneContextValue = {
|
||||
serverId: "server-a",
|
||||
workspaceId: "workspace-a",
|
||||
paneInstanceId,
|
||||
tabId: "terminal",
|
||||
target: { kind: "terminal", terminalId: "terminal-a" },
|
||||
openTab: () => {},
|
||||
closeCurrentTab: () => {},
|
||||
retargetCurrentTab: () => {},
|
||||
openFileInWorkspace: () => {},
|
||||
openImportSheet: () => {},
|
||||
};
|
||||
const paneFocus = createPaneFocusContextValue({
|
||||
isPaneFocused: true,
|
||||
isWorkspaceFocused: true,
|
||||
});
|
||||
|
||||
let root: Root | null = null;
|
||||
let container: HTMLElement | null = null;
|
||||
|
||||
beforeEach(() => {
|
||||
vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
|
||||
resetTerminalHandle();
|
||||
client.sendTerminalInput.mockClear();
|
||||
client.on.mockClear();
|
||||
terminalProps.current = null;
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (root) {
|
||||
act(() => {
|
||||
root?.unmount();
|
||||
});
|
||||
}
|
||||
clearActivePaneFindPaneId(paneInstanceId);
|
||||
root = null;
|
||||
container?.remove();
|
||||
container = null;
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
function renderTerminalPane(): void {
|
||||
act(() => {
|
||||
root?.render(
|
||||
<PaneProvider value={paneContext}>
|
||||
<PaneFocusProvider value={paneFocus}>
|
||||
<TerminalPane
|
||||
serverId="server-a"
|
||||
cwd="/repo"
|
||||
terminalId="terminal-a"
|
||||
isWorkspaceFocused
|
||||
isPaneFocused
|
||||
onOpenFileExplorer={vi.fn()}
|
||||
onOpenWorkspaceFile={vi.fn()}
|
||||
/>
|
||||
</PaneFocusProvider>
|
||||
</PaneProvider>,
|
||||
);
|
||||
});
|
||||
setActivePaneFindPaneId(paneInstanceId);
|
||||
}
|
||||
|
||||
function inputElement(): HTMLInputElement {
|
||||
const input = container?.querySelector('[data-testid="pane-find-input"]');
|
||||
expect(input).toBeInstanceOf(HTMLInputElement);
|
||||
return input as HTMLInputElement;
|
||||
}
|
||||
|
||||
function changeInput(value: string): void {
|
||||
const input = inputElement();
|
||||
act(() => {
|
||||
const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
|
||||
valueSetter?.call(input, value);
|
||||
input.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
input.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function pressFindKey(key: string, shiftKey = false): void {
|
||||
act(() => {
|
||||
inputElement().dispatchEvent(new KeyboardEvent("keydown", { key, shiftKey, bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function click(testId: string): void {
|
||||
const element = container?.querySelector(`[data-testid="${testId}"]`);
|
||||
expect(element).toBeInstanceOf(HTMLElement);
|
||||
act(() => {
|
||||
element?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function emitFindResults(event: FindResultChange): void {
|
||||
act(() => {
|
||||
for (const listener of findListeners) {
|
||||
listener(event);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
describe("TerminalPane find", () => {
|
||||
it("searches through xterm, navigates matches, and clears decorations", () => {
|
||||
renderTerminalPane();
|
||||
|
||||
act(() => {
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
changeInput("needle");
|
||||
expect(container?.textContent).toContain("Searching...");
|
||||
emitFindResults({ resultIndex: 2, resultCount: 7 });
|
||||
|
||||
expect(terminalHandle.findNext).toHaveBeenCalledWith({ query: "needle" });
|
||||
expect(container?.textContent).toContain("3 / 7");
|
||||
|
||||
click("pane-find-next");
|
||||
expect(terminalHandle.findNext).toHaveBeenLastCalledWith({ query: "needle" });
|
||||
expect(container?.textContent).toContain("Searching...");
|
||||
emitFindResults({ resultIndex: 3, resultCount: 7 });
|
||||
|
||||
click("pane-find-prev");
|
||||
expect(terminalHandle.findPrevious).toHaveBeenLastCalledWith({ query: "needle" });
|
||||
emitFindResults({ resultIndex: 2, resultCount: 7 });
|
||||
|
||||
pressFindKey("Enter");
|
||||
expect(terminalHandle.findNext).toHaveBeenLastCalledWith({ query: "needle" });
|
||||
emitFindResults({ resultIndex: 3, resultCount: 7 });
|
||||
|
||||
pressFindKey("Enter", true);
|
||||
expect(terminalHandle.findPrevious).toHaveBeenLastCalledWith({ query: "needle" });
|
||||
|
||||
changeInput("");
|
||||
expect(terminalHandle.clearFindDecorations).toHaveBeenCalledTimes(1);
|
||||
expect(container?.textContent).toContain("0 / 0");
|
||||
|
||||
changeInput("needle");
|
||||
click("pane-find-close");
|
||||
expect(terminalHandle.clearFindDecorations).toHaveBeenCalledTimes(2);
|
||||
expect(container?.querySelector('[data-testid="pane-find-input"]')).toBeNull();
|
||||
});
|
||||
|
||||
it("keeps terminal key input flowing while the find bar is open", async () => {
|
||||
renderTerminalPane();
|
||||
|
||||
act(() => {
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
await act(async () => {
|
||||
await terminalProps.current?.onTerminalKey?.({
|
||||
key: "c",
|
||||
ctrl: true,
|
||||
shift: false,
|
||||
alt: false,
|
||||
meta: false,
|
||||
});
|
||||
});
|
||||
|
||||
expect(client.sendTerminalInput).toHaveBeenCalledWith("terminal-a", {
|
||||
type: "input",
|
||||
data: "\u0003",
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Pressable,
|
||||
@@ -47,8 +47,6 @@ import {
|
||||
type OpenFileDisposition,
|
||||
type WorkspaceFileOpenRequest,
|
||||
} from "@/workspace/file-open";
|
||||
import { FindBar, usePaneFind, type PaneFindMatchState } from "@/panels/pane-find";
|
||||
import type { TerminalFindResultChangeEvent } from "@/terminal/runtime/terminal-emulator-runtime";
|
||||
|
||||
interface TerminalPaneProps {
|
||||
serverId: string;
|
||||
@@ -108,25 +106,10 @@ const EMPTY_MODIFIERS: ModifierState = {
|
||||
alt: false,
|
||||
};
|
||||
|
||||
const EMPTY_FIND_MATCH_STATE: PaneFindMatchState = { status: "empty" };
|
||||
const NO_FIND_MATCH_STATE: PaneFindMatchState = { status: "no-match" };
|
||||
const PENDING_FIND_MATCH_STATE: PaneFindMatchState = { status: "pending" };
|
||||
|
||||
function terminalScopeKey(input: { serverId: string; cwd: string }): string {
|
||||
return `${input.serverId}:${input.cwd}`;
|
||||
}
|
||||
|
||||
function terminalFindStateFromResult(event: TerminalFindResultChangeEvent): PaneFindMatchState {
|
||||
if (event.resultCount <= 0 || event.resultIndex < 0) {
|
||||
return NO_FIND_MATCH_STATE;
|
||||
}
|
||||
return {
|
||||
status: "matched",
|
||||
current: event.resultIndex + 1,
|
||||
total: event.resultCount,
|
||||
};
|
||||
}
|
||||
|
||||
interface ModifierButtonProps {
|
||||
modifier: keyof ModifierState;
|
||||
active: boolean;
|
||||
@@ -229,16 +212,9 @@ export function TerminalPane({
|
||||
win32InputMode: false,
|
||||
});
|
||||
const pendingTerminalInputRef = useRef<PendingTerminalInput[]>([]);
|
||||
const terminalFindQueryRef = useRef("");
|
||||
const keyboardRefitTimeoutsRef = useRef<Array<ReturnType<typeof setTimeout>>>([]);
|
||||
const lastAutoFocusKeyRef = useRef<string | null>(null);
|
||||
const initialSnapshot = workspaceTerminalSession.snapshots.get({ terminalId });
|
||||
const [terminalFindMatchState, setTerminalFindMatchStateValue] =
|
||||
useState<PaneFindMatchState>(EMPTY_FIND_MATCH_STATE);
|
||||
|
||||
const setTerminalFindMatchState = useCallback((nextState: PaneFindMatchState) => {
|
||||
setTerminalFindMatchStateValue(nextState);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
terminalIdRef.current = terminalId;
|
||||
@@ -248,19 +224,6 @@ export function TerminalPane({
|
||||
};
|
||||
}, [terminalId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isWorkspaceFocused || !terminalId) {
|
||||
return;
|
||||
}
|
||||
|
||||
return emulatorRef.current?.onFindResultsChanged((event) => {
|
||||
if (terminalFindQueryRef.current.length === 0) {
|
||||
return;
|
||||
}
|
||||
setTerminalFindMatchState(terminalFindStateFromResult(event));
|
||||
});
|
||||
}, [isWorkspaceFocused, setTerminalFindMatchState, terminalId]);
|
||||
|
||||
const requestTerminalFocus = useCallback(() => {
|
||||
setFocusRequestToken((current) => current + 1);
|
||||
}, []);
|
||||
@@ -288,43 +251,6 @@ export function TerminalPane({
|
||||
[terminalId, terminalStreamKey, workspaceTerminalSession.snapshots],
|
||||
);
|
||||
|
||||
const clearTerminalFind = useCallback(() => {
|
||||
terminalFindQueryRef.current = "";
|
||||
emulatorRef.current?.clearFindDecorations();
|
||||
setTerminalFindMatchState(EMPTY_FIND_MATCH_STATE);
|
||||
}, [setTerminalFindMatchState]);
|
||||
|
||||
const runTerminalFind = useCallback(
|
||||
(query: string, direction: "next" | "previous"): PaneFindMatchState => {
|
||||
terminalFindQueryRef.current = query;
|
||||
if (query.length === 0) {
|
||||
clearTerminalFind();
|
||||
return EMPTY_FIND_MATCH_STATE;
|
||||
}
|
||||
|
||||
const found =
|
||||
direction === "previous"
|
||||
? (emulatorRef.current?.findPrevious({ query }) ?? false)
|
||||
: (emulatorRef.current?.findNext({ query }) ?? false);
|
||||
if (!found) {
|
||||
setTerminalFindMatchState(NO_FIND_MATCH_STATE);
|
||||
return NO_FIND_MATCH_STATE;
|
||||
}
|
||||
|
||||
setTerminalFindMatchState(PENDING_FIND_MATCH_STATE);
|
||||
return PENDING_FIND_MATCH_STATE;
|
||||
},
|
||||
[clearTerminalFind, setTerminalFindMatchState],
|
||||
);
|
||||
|
||||
const paneFind = usePaneFind({
|
||||
matchState: terminalFindMatchState,
|
||||
onQuery: (query) => runTerminalFind(query, "next"),
|
||||
onNext: () => runTerminalFind(terminalFindQueryRef.current, "next"),
|
||||
onPrev: () => runTerminalFind(terminalFindQueryRef.current, "previous"),
|
||||
onClose: clearTerminalFind,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isMobile || !isWorkspaceFocused || !isPaneFocused || !terminalId) {
|
||||
lastAutoFocusKeyRef.current = null;
|
||||
@@ -822,7 +748,6 @@ export function TerminalPane({
|
||||
|
||||
return (
|
||||
<Animated.View style={containerStyle}>
|
||||
{paneFind.isOpen ? <FindBar {...paneFind.findBarProps} /> : null}
|
||||
<View style={styles.outputContainer}>
|
||||
{isWorkspaceFocused ? (
|
||||
<View style={styles.terminalGestureContainer}>
|
||||
|
||||
@@ -417,6 +417,44 @@ describe("dispatchComposerAgentMessage", () => {
|
||||
expect(client.calls[0]?.options.images).toEqual([]);
|
||||
});
|
||||
|
||||
it("attaches a steering deliveryHint to the optimistic user_message when provided", async () => {
|
||||
const client = createFakeSendClient();
|
||||
const stream = createFakeStream();
|
||||
|
||||
await dispatchComposerAgentMessage({
|
||||
client,
|
||||
agentId: "agent",
|
||||
text: "steer this",
|
||||
attachments: [],
|
||||
encodeImages: passthroughEncodeImages,
|
||||
stream,
|
||||
deliveryHint: "steering",
|
||||
});
|
||||
|
||||
const tail = stream.tail.get("agent");
|
||||
expect(tail).toHaveLength(1);
|
||||
const userMessage = tail?.[0] as Extract<StreamItem, { kind: "user_message" }>;
|
||||
expect(userMessage.deliveryHint).toBe("steering");
|
||||
});
|
||||
|
||||
it("omits deliveryHint when none is supplied (no marker for non-steering sends)", async () => {
|
||||
const client = createFakeSendClient();
|
||||
const stream = createFakeStream();
|
||||
|
||||
await dispatchComposerAgentMessage({
|
||||
client,
|
||||
agentId: "agent",
|
||||
text: "no steering",
|
||||
attachments: [],
|
||||
encodeImages: passthroughEncodeImages,
|
||||
stream,
|
||||
});
|
||||
|
||||
const tail = stream.tail.get("agent");
|
||||
const userMessage = tail?.[0] as Extract<StreamItem, { kind: "user_message" }>;
|
||||
expect(userMessage.deliveryHint).toBeUndefined();
|
||||
});
|
||||
|
||||
it("serializes browser_element workspace attachments as text attachments at the wire boundary", async () => {
|
||||
const client = createFakeSendClient();
|
||||
const stream = createFakeStream();
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
buildOptimisticUserMessage,
|
||||
generateMessageId,
|
||||
type StreamItem,
|
||||
type UserMessageDeliveryHint,
|
||||
type UserMessageItem,
|
||||
} from "@/types/stream";
|
||||
import type { PickedImageAttachmentInput } from "@/hooks/image-attachment-picker";
|
||||
@@ -130,6 +131,7 @@ export interface DispatchComposerAgentMessageInput {
|
||||
images: AttachmentMetadata[],
|
||||
) => Promise<Array<{ data: string; mimeType: string }> | undefined>;
|
||||
stream: AgentStreamWriter;
|
||||
deliveryHint?: UserMessageDeliveryHint;
|
||||
}
|
||||
|
||||
export async function dispatchComposerAgentMessage(
|
||||
@@ -143,6 +145,7 @@ export async function dispatchComposerAgentMessage(
|
||||
timestamp: new Date(),
|
||||
images: wirePayload.images,
|
||||
attachments: wirePayload.attachments,
|
||||
deliveryHint: input.deliveryHint,
|
||||
});
|
||||
appendUserMessageToStream(input.agentId, userMessage, input.stream);
|
||||
const imagesData = await input.encodeImages(wirePayload.images);
|
||||
|
||||
@@ -1070,6 +1070,9 @@ export function Composer({
|
||||
setHead: (updater) => setAgentStreamHead(serverId, updater),
|
||||
setTail: (updater) => setAgentStreamTail(serverId, updater),
|
||||
};
|
||||
const targetAgent = useSessionStore.getState().sessions[serverId]?.agents?.get(targetAgentId);
|
||||
const isSteering =
|
||||
targetAgent?.status === "running" && targetAgent.capabilities.supportsSteering === true;
|
||||
await dispatchComposerAgentMessage({
|
||||
client,
|
||||
agentId: targetAgentId,
|
||||
@@ -1077,6 +1080,7 @@ export function Composer({
|
||||
attachments: sendAttachments,
|
||||
encodeImages,
|
||||
stream,
|
||||
...(isSteering ? { deliveryHint: "steering" as const } : {}),
|
||||
});
|
||||
onAttentionPromptSend?.();
|
||||
};
|
||||
|
||||
@@ -1700,6 +1700,9 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
|
||||
attachments?: AgentAttachment[],
|
||||
) => {
|
||||
const messageId = generateMessageId();
|
||||
const targetAgent = useSessionStore.getState().sessions[serverId]?.agents?.get(agentId);
|
||||
const isSteering =
|
||||
targetAgent?.status === "running" && targetAgent.capabilities.supportsSteering === true;
|
||||
const userMessage: StreamItem = {
|
||||
kind: "user_message",
|
||||
id: messageId,
|
||||
@@ -1708,6 +1711,7 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
|
||||
optimistic: true,
|
||||
...(images && images.length > 0 ? { images } : {}),
|
||||
...(attachments && attachments.length > 0 ? { attachments } : {}),
|
||||
...(isSteering ? { deliveryHint: "steering" as const } : {}),
|
||||
};
|
||||
|
||||
// Append to head if streaming (keeps the user message with the current
|
||||
|
||||
@@ -92,35 +92,10 @@ export interface DesktopBrowserShortcutEvent {
|
||||
action: "focus-url";
|
||||
}
|
||||
|
||||
export interface DesktopBrowserFindOptions {
|
||||
forward?: boolean;
|
||||
findNext?: boolean;
|
||||
matchCase?: boolean;
|
||||
}
|
||||
|
||||
export type DesktopBrowserFindAction = "clearSelection" | "keepSelection" | "activateSelection";
|
||||
|
||||
export interface DesktopBrowserFoundInPageResult {
|
||||
requestId?: number;
|
||||
activeMatchOrdinal?: number;
|
||||
matches?: number;
|
||||
finalUpdate?: boolean;
|
||||
}
|
||||
|
||||
export interface DesktopBrowserBridge {
|
||||
setWorkspaceActiveBrowser?: (browserId: string | null) => Promise<void>;
|
||||
openDevTools?: (browserId: string) => Promise<unknown>;
|
||||
clearPartition?: (browserId: string) => Promise<void>;
|
||||
findInPage: (
|
||||
browserId: string,
|
||||
text: string,
|
||||
options?: DesktopBrowserFindOptions,
|
||||
) => Promise<number | null> | number | null;
|
||||
stopFindInPage: (browserId: string, action: DesktopBrowserFindAction) => Promise<void> | void;
|
||||
onFoundInPage: (
|
||||
browserId: string,
|
||||
listener: (result: DesktopBrowserFoundInPageResult) => void,
|
||||
) => Promise<() => void> | (() => void);
|
||||
}
|
||||
|
||||
export interface DesktopInvokeBridge {
|
||||
|
||||
@@ -34,7 +34,7 @@ afterEach(() => {
|
||||
});
|
||||
|
||||
describe("ensureAgentIsInitialized", () => {
|
||||
it("requests bounded projected catch-up after the current cursor when authoritative history is loaded", () => {
|
||||
it("requests bounded canonical catch-up after the current cursor when authoritative history is loaded", () => {
|
||||
const client = makeClient();
|
||||
useSessionStore.getState().initializeSession(serverId, client as never);
|
||||
useSessionStore
|
||||
@@ -56,12 +56,12 @@ describe("ensureAgentIsInitialized", () => {
|
||||
direction: "after",
|
||||
cursor: { epoch: "epoch-1", seq: 42 },
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
});
|
||||
expect(getInitDeferred(getInitKey(serverId, agentId))?.requestDirection).toBe("after");
|
||||
});
|
||||
|
||||
it("requests a bounded projected tail when no authoritative cursor is available", () => {
|
||||
it("requests a bounded canonical tail when no authoritative cursor is available", () => {
|
||||
const client = makeClient();
|
||||
useSessionStore.getState().initializeSession(serverId, client as never);
|
||||
|
||||
@@ -75,7 +75,7 @@ describe("ensureAgentIsInitialized", () => {
|
||||
expect(client.fetchAgentTimeline).toHaveBeenCalledWith(agentId, {
|
||||
direction: "tail",
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
});
|
||||
expect(getInitDeferred(getInitKey(serverId, agentId))?.requestDirection).toBe("tail");
|
||||
});
|
||||
@@ -107,7 +107,7 @@ describe("ensureAgentIsInitialized", () => {
|
||||
});
|
||||
|
||||
describe("refreshAgent", () => {
|
||||
it("fetches a bounded projected tail after refreshing the agent", async () => {
|
||||
it("fetches a bounded canonical tail after refreshing the agent", async () => {
|
||||
const client = makeClient();
|
||||
useSessionStore.getState().initializeSession(serverId, client as never);
|
||||
|
||||
@@ -121,7 +121,7 @@ describe("refreshAgent", () => {
|
||||
expect(client.fetchAgentTimeline).toHaveBeenCalledWith(agentId, {
|
||||
direction: "tail",
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -27,25 +27,6 @@ import {
|
||||
navigateToLastWorkspace,
|
||||
useActiveWorkspaceSelection,
|
||||
} from "@/stores/navigation-active-workspace-store";
|
||||
import { handlePaneFindKeyboardAction } from "@/panels/pane-find-registry";
|
||||
|
||||
type KeyboardShortcutResult = ReturnType<typeof resolveKeyboardShortcut>;
|
||||
|
||||
function applyPendingChordEventHandling(event: KeyboardEvent, result: KeyboardShortcutResult) {
|
||||
if (result.preventDefault && !result.match) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
|
||||
function applyHandledShortcutEventHandling(event: KeyboardEvent, result: KeyboardShortcutResult) {
|
||||
if (result.preventDefault || result.match?.preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
if (result.preventDefault || result.match?.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
|
||||
export function useKeyboardShortcuts({
|
||||
enabled,
|
||||
@@ -113,8 +94,6 @@ export function useKeyboardShortcuts({
|
||||
return false;
|
||||
case "dispatch":
|
||||
return keyboardActionDispatcher.dispatch(action.action);
|
||||
case "pane-find-open":
|
||||
return handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
case "navigate-workspace":
|
||||
navigateToWorkspace(action.serverId, action.workspaceId, { currentPathname: pathname });
|
||||
return true;
|
||||
@@ -203,7 +182,10 @@ export function useKeyboardShortcuts({
|
||||
|
||||
chordStateRef.current = result.nextChordState;
|
||||
|
||||
applyPendingChordEventHandling(event, result);
|
||||
if (result.preventDefault) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
if (!result.match) {
|
||||
return;
|
||||
@@ -226,7 +208,12 @@ export function useKeyboardShortcuts({
|
||||
return;
|
||||
}
|
||||
|
||||
applyHandledShortcutEventHandling(event, result);
|
||||
if (result.match.preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
if (result.match.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = (event: KeyboardEvent) => {
|
||||
|
||||
@@ -147,7 +147,7 @@ describe("loadOlderAgentHistory", () => {
|
||||
direction: "before",
|
||||
cursor: { epoch: "epoch-1", seq: 10 },
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -10,7 +10,7 @@ export interface LoadOlderAgentHistoryClient {
|
||||
direction: "before";
|
||||
cursor: { epoch: string; seq: number };
|
||||
limit: number;
|
||||
projection: "projected";
|
||||
projection: "canonical";
|
||||
},
|
||||
) => Promise<unknown>;
|
||||
}
|
||||
|
||||
@@ -20,7 +20,6 @@ export type KeyboardActionId =
|
||||
| "agent.new"
|
||||
| "workspace.tab.new"
|
||||
| "workspace.tab.close.current"
|
||||
| "workspace.find.open"
|
||||
| "workspace.tab.navigate.index"
|
||||
| "workspace.tab.navigate.relative"
|
||||
| "workspace.pane.split.right"
|
||||
|
||||
@@ -206,18 +206,6 @@ describe("keyboard-shortcuts", () => {
|
||||
context: { isMac: true, isDesktop: true },
|
||||
action: "workspace.tab.close.current",
|
||||
},
|
||||
{
|
||||
name: "matches Cmd+F to open find in the focused pane",
|
||||
event: { key: "f", code: "KeyF", metaKey: true },
|
||||
context: { isMac: true, focusScope: "terminal" },
|
||||
action: "workspace.find.open",
|
||||
},
|
||||
{
|
||||
name: "matches Ctrl+F to open find in the focused pane on non-mac",
|
||||
event: { key: "f", code: "KeyF", ctrlKey: true },
|
||||
context: { isMac: false, focusScope: "terminal" },
|
||||
action: "workspace.find.open",
|
||||
},
|
||||
{
|
||||
name: "matches Ctrl+W to close current tab on non-mac desktop",
|
||||
event: { key: "w", code: "KeyW", ctrlKey: true },
|
||||
@@ -552,7 +540,6 @@ describe("keyboard-shortcut help sections", () => {
|
||||
"workspace-jump-index": ["alt", "1-9"],
|
||||
"workspace-tab-jump-index": ["alt", "shift", "1-9"],
|
||||
"workspace-tab-close-current": ["alt", "shift", "W"],
|
||||
"workspace-find-open": ["mod", "F"],
|
||||
"workspace-pane-split-right": ["mod", "\\"],
|
||||
"workspace-pane-close": ["mod", "shift", "W"],
|
||||
},
|
||||
@@ -566,7 +553,6 @@ describe("keyboard-shortcut help sections", () => {
|
||||
"workspace-jump-index": ["mod", "1-9"],
|
||||
"workspace-tab-jump-index": ["mod", "alt", "1-9"],
|
||||
"workspace-tab-close-current": ["meta", "W"],
|
||||
"workspace-find-open": ["mod", "F"],
|
||||
"workspace-pane-split-right": ["mod", "\\"],
|
||||
"workspace-pane-close": ["mod", "shift", "W"],
|
||||
},
|
||||
|
||||
@@ -250,32 +250,6 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
|
||||
},
|
||||
},
|
||||
|
||||
// --- Find in pane ---
|
||||
{
|
||||
id: "workspace-find-open-cmd-f-mac",
|
||||
action: "workspace.find.open",
|
||||
combo: "Cmd+F",
|
||||
when: { mac: true, commandCenter: false },
|
||||
help: {
|
||||
id: "workspace-find-open",
|
||||
section: "tabs-panes",
|
||||
label: "Find in pane",
|
||||
keys: ["mod", "F"],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "workspace-find-open-ctrl-f-non-mac",
|
||||
action: "workspace.find.open",
|
||||
combo: "Ctrl+F",
|
||||
when: { mac: false, commandCenter: false },
|
||||
help: {
|
||||
id: "workspace-find-open",
|
||||
section: "tabs-panes",
|
||||
label: "Find in pane",
|
||||
keys: ["mod", "F"],
|
||||
},
|
||||
},
|
||||
|
||||
// --- Workspace index jump ---
|
||||
{
|
||||
id: "workspace-navigate-index-cmd-digit-mac",
|
||||
|
||||
@@ -37,8 +37,7 @@ export type ShortcutAction =
|
||||
| { kind: "open-project-picker" }
|
||||
| { kind: "callback"; name: ShortcutCallbackName }
|
||||
| { kind: "command-center-toggle"; nextOpen: boolean }
|
||||
| { kind: "shortcuts-dialog-toggle"; nextOpen: boolean }
|
||||
| { kind: "pane-find-open" };
|
||||
| { kind: "shortcuts-dialog-toggle"; nextOpen: boolean };
|
||||
|
||||
const NONE: ShortcutAction = { kind: "none" };
|
||||
|
||||
@@ -202,8 +201,6 @@ export function routeKeyboardShortcut(
|
||||
return { kind: "command-center-toggle", nextOpen: !ctx.commandCenterOpen };
|
||||
case "shortcuts.dialog.toggle":
|
||||
return { kind: "shortcuts-dialog-toggle", nextOpen: !ctx.shortcutsDialogOpen };
|
||||
case "workspace.find.open":
|
||||
return { kind: "pane-find-open" };
|
||||
default:
|
||||
return NONE;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@ import type { WorkspaceFileOpenRequest } from "@/workspace/file-open";
|
||||
export interface PaneContextValue {
|
||||
serverId: string;
|
||||
workspaceId: string;
|
||||
paneInstanceId: string | null;
|
||||
tabId: string;
|
||||
target: WorkspaceTabTarget;
|
||||
openTab: (target: WorkspaceTabTarget) => void;
|
||||
|
||||
@@ -1,116 +0,0 @@
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
import {
|
||||
clearActivePaneFindPaneId,
|
||||
createPaneFindRegistry,
|
||||
handlePaneFindKeyboardAction,
|
||||
paneFindRegistry,
|
||||
setActivePaneFindPaneId,
|
||||
type PaneFindController,
|
||||
} from "@/panels/pane-find-registry";
|
||||
|
||||
function createController(input?: { openResult?: boolean }): PaneFindController {
|
||||
return {
|
||||
openFind: vi.fn(() => input?.openResult ?? true),
|
||||
closeFind: vi.fn(() => true),
|
||||
};
|
||||
}
|
||||
|
||||
describe("pane find registry", () => {
|
||||
it("routes open find to the active pane instance", () => {
|
||||
const activePaneId = { current: "server:workspace:left" };
|
||||
const registry = createPaneFindRegistry({
|
||||
getActivePaneId: () => activePaneId.current,
|
||||
});
|
||||
const left = createController({ openResult: false });
|
||||
const right = createController({ openResult: true });
|
||||
|
||||
registry.register({
|
||||
paneId: "server:workspace:left",
|
||||
controller: left,
|
||||
});
|
||||
registry.register({
|
||||
paneId: "server:workspace:right",
|
||||
controller: right,
|
||||
});
|
||||
|
||||
expect(registry.openFindInActivePane()).toBe(false);
|
||||
});
|
||||
|
||||
it("stops routing to a pane after it unregisters", () => {
|
||||
const registry = createPaneFindRegistry({
|
||||
getActivePaneId: () => "server:workspace:left",
|
||||
});
|
||||
const controller = createController();
|
||||
|
||||
const unregister = registry.register({
|
||||
paneId: "server:workspace:left",
|
||||
controller,
|
||||
});
|
||||
unregister();
|
||||
|
||||
expect(registry.openFindInActivePane()).toBe(false);
|
||||
expect(controller.closeFind).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("keeps split panes with the same target distinct by pane instance", () => {
|
||||
const activePaneId = { current: "server:workspace:right" };
|
||||
const registry = createPaneFindRegistry({
|
||||
getActivePaneId: () => activePaneId.current,
|
||||
});
|
||||
const left = createController({ openResult: false });
|
||||
const right = createController({ openResult: true });
|
||||
|
||||
registry.register({
|
||||
paneId: "server:workspace:left",
|
||||
controller: left,
|
||||
});
|
||||
registry.register({
|
||||
paneId: "server:workspace:right",
|
||||
controller: right,
|
||||
});
|
||||
|
||||
expect(registry.openFindInActivePane()).toBe(true);
|
||||
});
|
||||
|
||||
it("handles the keyboard find action through the active pane", () => {
|
||||
const controller = createController();
|
||||
const unregister = paneFindRegistry.register({
|
||||
paneId: "server:workspace:left",
|
||||
controller,
|
||||
});
|
||||
setActivePaneFindPaneId("server:workspace:left");
|
||||
|
||||
expect(handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" })).toBe(
|
||||
true,
|
||||
);
|
||||
expect(controller.openFind).toHaveBeenCalledTimes(1);
|
||||
|
||||
clearActivePaneFindPaneId("server:workspace:left");
|
||||
expect(controller.closeFind).toHaveBeenCalledTimes(1);
|
||||
unregister();
|
||||
});
|
||||
|
||||
it("closes the previous active pane when pane focus changes", () => {
|
||||
const left = createController();
|
||||
const right = createController();
|
||||
const unregisterLeft = paneFindRegistry.register({
|
||||
paneId: "server:workspace:left",
|
||||
controller: left,
|
||||
});
|
||||
const unregisterRight = paneFindRegistry.register({
|
||||
paneId: "server:workspace:right",
|
||||
controller: right,
|
||||
});
|
||||
|
||||
setActivePaneFindPaneId("server:workspace:left");
|
||||
setActivePaneFindPaneId("server:workspace:right");
|
||||
|
||||
expect(left.closeFind).toHaveBeenCalledTimes(1);
|
||||
expect(right.closeFind).not.toHaveBeenCalled();
|
||||
|
||||
clearActivePaneFindPaneId("server:workspace:right");
|
||||
unregisterLeft();
|
||||
unregisterRight();
|
||||
});
|
||||
});
|
||||
@@ -1,82 +0,0 @@
|
||||
export interface PaneFindController {
|
||||
openFind(): boolean;
|
||||
closeFind(): boolean;
|
||||
}
|
||||
|
||||
interface PaneFindKeyboardAction {
|
||||
id: "workspace.find.open";
|
||||
scope: "workspace";
|
||||
}
|
||||
|
||||
interface RegisterPaneFindInput {
|
||||
paneId: string;
|
||||
controller: PaneFindController;
|
||||
}
|
||||
|
||||
interface PaneFindRegistry {
|
||||
register(input: RegisterPaneFindInput): () => void;
|
||||
openFindInActivePane(): boolean;
|
||||
closeFindInPane(paneId: string): boolean;
|
||||
}
|
||||
|
||||
export function createPaneFindRegistry(input: { getActivePaneId: () => string | null }) {
|
||||
const controllers = new Map<string, PaneFindController>();
|
||||
|
||||
return {
|
||||
register({ paneId, controller }: RegisterPaneFindInput) {
|
||||
controllers.set(paneId, controller);
|
||||
|
||||
return () => {
|
||||
if (controllers.get(paneId) === controller) {
|
||||
controller.closeFind();
|
||||
controllers.delete(paneId);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
openFindInActivePane(): boolean {
|
||||
const activePaneId = input.getActivePaneId();
|
||||
if (!activePaneId) {
|
||||
return false;
|
||||
}
|
||||
return controllers.get(activePaneId)?.openFind() ?? false;
|
||||
},
|
||||
|
||||
closeFindInPane(paneId: string): boolean {
|
||||
return controllers.get(paneId)?.closeFind() ?? false;
|
||||
},
|
||||
} satisfies PaneFindRegistry;
|
||||
}
|
||||
|
||||
let activePaneId: string | null = null;
|
||||
|
||||
export const paneFindRegistry = createPaneFindRegistry({
|
||||
getActivePaneId: () => activePaneId,
|
||||
});
|
||||
|
||||
export function createPaneFindPaneId(input: {
|
||||
serverId: string;
|
||||
workspaceId: string;
|
||||
paneId: string;
|
||||
}): string {
|
||||
return `${input.serverId}:${input.workspaceId}:${input.paneId}`;
|
||||
}
|
||||
|
||||
export function setActivePaneFindPaneId(paneId: string | null) {
|
||||
if (activePaneId && activePaneId !== paneId) {
|
||||
paneFindRegistry.closeFindInPane(activePaneId);
|
||||
}
|
||||
activePaneId = paneId;
|
||||
}
|
||||
|
||||
export function clearActivePaneFindPaneId(paneId: string) {
|
||||
if (activePaneId === paneId) {
|
||||
paneFindRegistry.closeFindInPane(paneId);
|
||||
activePaneId = null;
|
||||
}
|
||||
}
|
||||
|
||||
export function handlePaneFindKeyboardAction(action: PaneFindKeyboardAction): boolean {
|
||||
void action;
|
||||
return paneFindRegistry.openFindInActivePane();
|
||||
}
|
||||
@@ -1,503 +0,0 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import React from "react";
|
||||
import { act } from "react";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { Text, View } from "react-native";
|
||||
import {
|
||||
FindBar,
|
||||
usePaneFind,
|
||||
type PaneFindCommandResult,
|
||||
type PaneFindMatchState,
|
||||
} from "@/panels/pane-find";
|
||||
import {
|
||||
PaneFocusProvider,
|
||||
PaneProvider,
|
||||
createPaneFocusContextValue,
|
||||
usePaneContext,
|
||||
type PaneContextValue,
|
||||
} from "@/panels/pane-context";
|
||||
import {
|
||||
clearActivePaneFindPaneId,
|
||||
createPaneFindPaneId,
|
||||
handlePaneFindKeyboardAction,
|
||||
setActivePaneFindPaneId,
|
||||
} from "@/panels/pane-find-registry";
|
||||
import {
|
||||
buildWorkspacePaneContentModel,
|
||||
WorkspacePaneContent,
|
||||
} from "@/screens/workspace/workspace-pane-content";
|
||||
import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
|
||||
|
||||
const { theme } = vi.hoisted(() => ({
|
||||
theme: {
|
||||
colors: {
|
||||
border: "#333",
|
||||
foreground: "#fff",
|
||||
foregroundMuted: "#aaa",
|
||||
surface0: "#111",
|
||||
surface1: "#222",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("lucide-react-native", () => {
|
||||
const createIcon = (name: string) =>
|
||||
function Icon() {
|
||||
return React.createElement("span", { "data-icon": name });
|
||||
};
|
||||
|
||||
return {
|
||||
ChevronDown: createIcon("ChevronDown"),
|
||||
ChevronUp: createIcon("ChevronUp"),
|
||||
X: createIcon("X"),
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("react-native", () => {
|
||||
const MockView = ({ children, testID }: { children?: React.ReactNode; testID?: string }) =>
|
||||
React.createElement("div", { "data-testid": testID }, children);
|
||||
const MockText = ({ children }: { children?: React.ReactNode }) =>
|
||||
React.createElement("span", null, children);
|
||||
const MockPressable = ({
|
||||
children,
|
||||
disabled,
|
||||
onPress,
|
||||
testID,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
onPress?: () => void;
|
||||
testID?: string;
|
||||
}) =>
|
||||
React.createElement(
|
||||
"button",
|
||||
{
|
||||
"data-testid": testID,
|
||||
disabled,
|
||||
onClick: () => {
|
||||
if (!disabled) onPress?.();
|
||||
},
|
||||
type: "button",
|
||||
},
|
||||
children,
|
||||
);
|
||||
const MockTextInput = React.forwardRef<
|
||||
HTMLInputElement,
|
||||
{
|
||||
value?: string;
|
||||
onChangeText?: (text: string) => void;
|
||||
onKeyPress?: (event: {
|
||||
nativeEvent: { key: string; shiftKey?: boolean };
|
||||
preventDefault: () => void;
|
||||
}) => void;
|
||||
testID?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
>(function TextInput({ value, onChangeText, onKeyPress, testID, placeholder }, ref) {
|
||||
return React.createElement("input", {
|
||||
"data-testid": testID,
|
||||
onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
onChangeText?.(event.currentTarget.value),
|
||||
onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) =>
|
||||
onKeyPress?.({
|
||||
nativeEvent: { key: event.key, shiftKey: event.shiftKey },
|
||||
preventDefault: () => event.preventDefault(),
|
||||
}),
|
||||
placeholder,
|
||||
ref,
|
||||
value: value ?? "",
|
||||
});
|
||||
});
|
||||
|
||||
return { Pressable: MockPressable, Text: MockText, TextInput: MockTextInput, View: MockView };
|
||||
});
|
||||
|
||||
vi.mock("react-native-unistyles", () => ({
|
||||
StyleSheet: {
|
||||
hairlineWidth: 1,
|
||||
create: (factory: unknown) =>
|
||||
typeof factory === "function" ? (factory as (t: typeof theme) => unknown)(theme) : factory,
|
||||
},
|
||||
useUnistyles: () => ({ theme }),
|
||||
}));
|
||||
|
||||
vi.mock("@/panels/register-panels", () => ({
|
||||
ensurePanelsRegistered: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("@/panels/panel-registry", () => ({
|
||||
getPanelRegistration: () => ({
|
||||
kind: "agent",
|
||||
component: FakeFindPanel,
|
||||
useDescriptor: vi.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
interface FakeSearchController {
|
||||
query: ReturnType<typeof vi.fn<(query: string) => PaneFindCommandResult>>;
|
||||
next: ReturnType<typeof vi.fn<() => PaneFindCommandResult>>;
|
||||
prev: ReturnType<typeof vi.fn<() => PaneFindCommandResult>>;
|
||||
close: ReturnType<typeof vi.fn<() => void>>;
|
||||
}
|
||||
|
||||
const controllers = new Map<string, FakeSearchController>();
|
||||
|
||||
function createController(input?: { total?: number }): FakeSearchController {
|
||||
const total = input?.total ?? 3;
|
||||
return {
|
||||
query: vi.fn((query: string) =>
|
||||
query === "missing" ? { status: "no-match" } : { status: "matched", current: 1, total },
|
||||
),
|
||||
next: vi.fn(() => ({ status: "matched", current: 2, total })),
|
||||
prev: vi.fn(() => ({ status: "matched", current: 3, total })),
|
||||
close: vi.fn(),
|
||||
};
|
||||
}
|
||||
|
||||
function FakeFindPanel() {
|
||||
const paneContext = usePaneContext();
|
||||
const controller = controllers.get(paneContext.paneInstanceId ?? "");
|
||||
if (!controller) {
|
||||
throw new Error(`Missing fake find controller for pane ${paneContext.paneInstanceId}`);
|
||||
}
|
||||
const paneFind = usePaneFind({
|
||||
onQuery: controller.query,
|
||||
onNext: controller.next,
|
||||
onPrev: controller.prev,
|
||||
onClose: controller.close,
|
||||
});
|
||||
|
||||
return (
|
||||
<View>
|
||||
{paneFind.isOpen ? <FindBar {...paneFind.findBarProps} /> : null}
|
||||
<Text>Pane body</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function AsyncFindPanel({
|
||||
matchState,
|
||||
onQuery,
|
||||
}: {
|
||||
matchState: PaneFindMatchState;
|
||||
onQuery: (query: string) => PaneFindCommandResult;
|
||||
}) {
|
||||
const paneFind = usePaneFind({
|
||||
matchState,
|
||||
onQuery,
|
||||
onNext: () => undefined,
|
||||
onPrev: () => undefined,
|
||||
onClose: vi.fn(),
|
||||
});
|
||||
|
||||
return (
|
||||
<View>
|
||||
{paneFind.isOpen ? <FindBar {...paneFind.findBarProps} /> : null}
|
||||
<Text>Pane body</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const tab: WorkspaceTabDescriptor = {
|
||||
key: "agent_agent-a",
|
||||
tabId: "agent_agent-a",
|
||||
kind: "agent",
|
||||
target: { kind: "agent", agentId: "agent-a" },
|
||||
};
|
||||
const leftPaneInstanceId = createPaneFindPaneId({
|
||||
serverId: "server-a",
|
||||
workspaceId: "workspace-a",
|
||||
paneId: "left",
|
||||
});
|
||||
const harnessPaneContext: PaneContextValue = {
|
||||
serverId: "server-a",
|
||||
workspaceId: "workspace-a",
|
||||
paneInstanceId: leftPaneInstanceId,
|
||||
tabId: "agent_agent-a",
|
||||
target: tab.target,
|
||||
openTab: () => {},
|
||||
closeCurrentTab: () => {},
|
||||
retargetCurrentTab: () => {},
|
||||
openFileInWorkspace: () => {},
|
||||
openImportSheet: () => {},
|
||||
};
|
||||
const harnessPaneFocus = createPaneFocusContextValue({
|
||||
isPaneFocused: true,
|
||||
isWorkspaceFocused: true,
|
||||
onFocusPane: () => {},
|
||||
});
|
||||
|
||||
let root: Root | null = null;
|
||||
let container: HTMLElement | null = null;
|
||||
|
||||
beforeEach(() => {
|
||||
vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (root) {
|
||||
act(() => {
|
||||
root?.unmount();
|
||||
});
|
||||
}
|
||||
clearActivePaneFindPaneId("server-a:workspace-a:left");
|
||||
clearActivePaneFindPaneId("server-a:workspace-a:right");
|
||||
controllers.clear();
|
||||
root = null;
|
||||
container?.remove();
|
||||
container = null;
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
function renderFindHarness(controller: FakeSearchController = createController()) {
|
||||
controllers.set(leftPaneInstanceId, controller);
|
||||
|
||||
act(() => {
|
||||
root?.render(
|
||||
<PaneProvider value={harnessPaneContext}>
|
||||
<PaneFocusProvider value={harnessPaneFocus}>
|
||||
<FakeFindPanel />
|
||||
</PaneFocusProvider>
|
||||
</PaneProvider>,
|
||||
);
|
||||
});
|
||||
|
||||
setActivePaneFindPaneId(leftPaneInstanceId);
|
||||
}
|
||||
|
||||
function inputElement(): HTMLInputElement {
|
||||
const input = container?.querySelector('[data-testid="pane-find-input"]');
|
||||
expect(input).toBeInstanceOf(HTMLInputElement);
|
||||
return input as HTMLInputElement;
|
||||
}
|
||||
|
||||
function button(testId: string): HTMLElement {
|
||||
const element = container?.querySelector(`[data-testid="${testId}"]`);
|
||||
expect(element).toBeInstanceOf(HTMLElement);
|
||||
return element as HTMLElement;
|
||||
}
|
||||
|
||||
function changeInput(value: string): void {
|
||||
const input = inputElement();
|
||||
act(() => {
|
||||
const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
|
||||
valueSetter?.call(input, value);
|
||||
input.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
input.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function pressKey(key: string, shiftKey = false): void {
|
||||
const input = inputElement();
|
||||
act(() => {
|
||||
input.dispatchEvent(new KeyboardEvent("keydown", { key, shiftKey, bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
describe("FindBar", () => {
|
||||
it("opens through pane registration and focuses the query input", () => {
|
||||
renderFindHarness();
|
||||
|
||||
expect(container?.querySelector('[data-testid="pane-find-input"]')).toBeNull();
|
||||
|
||||
act(() => {
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
|
||||
expect(inputElement()).toBe(document.activeElement);
|
||||
expect(container?.textContent).toContain("Find");
|
||||
});
|
||||
|
||||
it("dispatches query changes and renders match, empty, and no-match states", () => {
|
||||
const controller = createController();
|
||||
renderFindHarness(controller);
|
||||
|
||||
act(() => {
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
|
||||
expect(container?.textContent).toContain("0 / 0");
|
||||
|
||||
changeInput("abc");
|
||||
expect(controller.query).toHaveBeenLastCalledWith("abc");
|
||||
expect(container?.textContent).toContain("1 / 3");
|
||||
|
||||
changeInput("missing");
|
||||
expect(container?.textContent).toContain("No matches");
|
||||
|
||||
changeInput("");
|
||||
expect(container?.textContent).toContain("0 / 0");
|
||||
});
|
||||
|
||||
it("handles next, previous, Escape, Enter, Shift+Enter, and close", () => {
|
||||
const controller = createController();
|
||||
renderFindHarness(controller);
|
||||
|
||||
act(() => {
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
changeInput("abc");
|
||||
|
||||
pressKey("Enter");
|
||||
expect(controller.next).toHaveBeenCalledTimes(1);
|
||||
expect(container?.textContent).toContain("2 / 3");
|
||||
|
||||
pressKey("Enter", true);
|
||||
expect(controller.prev).toHaveBeenCalledTimes(1);
|
||||
expect(container?.textContent).toContain("3 / 3");
|
||||
|
||||
act(() => {
|
||||
button("pane-find-next").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
expect(container?.textContent).toContain("2 / 3");
|
||||
|
||||
act(() => {
|
||||
button("pane-find-prev").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
expect(container?.textContent).toContain("3 / 3");
|
||||
|
||||
pressKey("Escape");
|
||||
expect(controller.close).toHaveBeenCalledTimes(1);
|
||||
expect(container?.querySelector('[data-testid="pane-find-input"]')).toBeNull();
|
||||
|
||||
act(() => {
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
act(() => {
|
||||
button("pane-find-close").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
expect(container?.querySelector('[data-testid="pane-find-input"]')).toBeNull();
|
||||
});
|
||||
|
||||
it("cleans up the active find adapter on pane deactivation and unmount", () => {
|
||||
const controller = createController();
|
||||
renderFindHarness(controller);
|
||||
|
||||
act(() => {
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
changeInput("abc");
|
||||
|
||||
act(() => {
|
||||
clearActivePaneFindPaneId(leftPaneInstanceId);
|
||||
});
|
||||
expect(controller.close).toHaveBeenCalledTimes(1);
|
||||
expect(container?.querySelector('[data-testid="pane-find-input"]')).toBeNull();
|
||||
|
||||
act(() => {
|
||||
setActivePaneFindPaneId(leftPaneInstanceId);
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
changeInput("abc");
|
||||
act(() => {
|
||||
root?.unmount();
|
||||
});
|
||||
expect(controller.close).toHaveBeenCalledTimes(2);
|
||||
root = null;
|
||||
});
|
||||
|
||||
it("shows pending match metadata until an adapter-owned async result arrives", () => {
|
||||
const onQuery = vi.fn(() => undefined);
|
||||
let setExternalMatchState: ((matchState: PaneFindMatchState) => void) | null = null;
|
||||
|
||||
function Harness() {
|
||||
const [externalMatchState, setMatchState] = React.useState<PaneFindMatchState>({
|
||||
status: "empty",
|
||||
});
|
||||
setExternalMatchState = setMatchState;
|
||||
return (
|
||||
<PaneProvider value={harnessPaneContext}>
|
||||
<PaneFocusProvider value={harnessPaneFocus}>
|
||||
<AsyncFindPanel matchState={externalMatchState} onQuery={onQuery} />
|
||||
</PaneFocusProvider>
|
||||
</PaneProvider>
|
||||
);
|
||||
}
|
||||
|
||||
act(() => {
|
||||
root?.render(<Harness />);
|
||||
});
|
||||
setActivePaneFindPaneId(leftPaneInstanceId);
|
||||
|
||||
act(() => {
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
changeInput("needle");
|
||||
|
||||
expect(onQuery).toHaveBeenCalledWith("needle");
|
||||
expect(container?.textContent).toContain("Searching...");
|
||||
|
||||
act(() => {
|
||||
setExternalMatchState?.({ status: "matched", current: 2, total: 4 });
|
||||
});
|
||||
|
||||
expect(container?.textContent).toContain("2 / 4");
|
||||
});
|
||||
|
||||
it("routes open find through the focused workspace pane without replacing pane focus", () => {
|
||||
const left = createController({ total: 7 });
|
||||
const right = createController({ total: 5 });
|
||||
const leftContent = buildWorkspacePaneContentModel({
|
||||
tab,
|
||||
paneId: "left",
|
||||
normalizedServerId: "server-a",
|
||||
normalizedWorkspaceId: "workspace-a",
|
||||
onOpenTab: vi.fn(),
|
||||
onCloseCurrentTab: vi.fn(),
|
||||
onRetargetCurrentTab: vi.fn(),
|
||||
onOpenWorkspaceFile: vi.fn(),
|
||||
onOpenImportSheet: vi.fn(),
|
||||
});
|
||||
|
||||
const rightContent = buildWorkspacePaneContentModel({
|
||||
tab,
|
||||
paneId: "right",
|
||||
normalizedServerId: "server-a",
|
||||
normalizedWorkspaceId: "workspace-a",
|
||||
onOpenTab: vi.fn(),
|
||||
onCloseCurrentTab: vi.fn(),
|
||||
onRetargetCurrentTab: vi.fn(),
|
||||
onOpenWorkspaceFile: vi.fn(),
|
||||
onOpenImportSheet: vi.fn(),
|
||||
});
|
||||
const focusLeft = vi.fn();
|
||||
const focusRight = vi.fn();
|
||||
controllers.set("server-a:workspace-a:left", left);
|
||||
controllers.set("server-a:workspace-a:right", right);
|
||||
|
||||
act(() => {
|
||||
root?.render(
|
||||
<View>
|
||||
<WorkspacePaneContent
|
||||
content={leftContent}
|
||||
isPaneFocused={false}
|
||||
isWorkspaceFocused
|
||||
onFocusPane={focusLeft}
|
||||
/>
|
||||
<WorkspacePaneContent
|
||||
content={rightContent}
|
||||
isPaneFocused
|
||||
isWorkspaceFocused
|
||||
onFocusPane={focusRight}
|
||||
/>
|
||||
</View>,
|
||||
);
|
||||
});
|
||||
|
||||
act(() => {
|
||||
handlePaneFindKeyboardAction({ id: "workspace.find.open", scope: "workspace" });
|
||||
});
|
||||
|
||||
changeInput("abc");
|
||||
expect(container?.textContent).toContain("1 / 5");
|
||||
expect(container?.textContent).not.toContain("1 / 7");
|
||||
expect(focusLeft).not.toHaveBeenCalled();
|
||||
expect(focusRight).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -1,310 +0,0 @@
|
||||
import { ChevronDown, ChevronUp, X } from "lucide-react-native";
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
Pressable,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
type NativeSyntheticEvent,
|
||||
type TextInputKeyPressEventData,
|
||||
} from "react-native";
|
||||
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
||||
import { useStableEvent } from "@/hooks/use-stable-event";
|
||||
import { usePaneContext } from "@/panels/pane-context";
|
||||
import { paneFindRegistry } from "@/panels/pane-find-registry";
|
||||
|
||||
export type PaneFindMatchState =
|
||||
| { status: "empty" }
|
||||
| { status: "pending" }
|
||||
| { status: "no-match" }
|
||||
| { status: "matched"; current: number; total: number };
|
||||
|
||||
export type PaneFindCommandResult = PaneFindMatchState | void;
|
||||
|
||||
export interface UsePaneFindInput {
|
||||
matchState?: PaneFindMatchState;
|
||||
onQuery(query: string): PaneFindCommandResult;
|
||||
onNext(): PaneFindCommandResult;
|
||||
onPrev(): PaneFindCommandResult;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
export interface FindBarProps {
|
||||
query: string;
|
||||
matchState: PaneFindMatchState;
|
||||
focusToken: number;
|
||||
onQueryChange(query: string): void;
|
||||
onNext(): void;
|
||||
onPrev(): void;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
export interface UsePaneFindResult {
|
||||
isOpen: boolean;
|
||||
findBarProps: FindBarProps;
|
||||
}
|
||||
|
||||
export function usePaneFind(input: UsePaneFindInput): UsePaneFindResult {
|
||||
const { paneInstanceId } = usePaneContext();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
const [matchState, setMatchState] = useState<PaneFindMatchState>({ status: "empty" });
|
||||
const [focusToken, setFocusToken] = useState(0);
|
||||
const onQuery = useStableEvent(input.onQuery);
|
||||
const onNextInput = useStableEvent(input.onNext);
|
||||
const onPrevInput = useStableEvent(input.onPrev);
|
||||
const onCloseInput = useStableEvent(input.onClose);
|
||||
const isOpenRef = useRef(false);
|
||||
const queryRef = useRef("");
|
||||
|
||||
useEffect(() => {
|
||||
isOpenRef.current = isOpen;
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
queryRef.current = query;
|
||||
}, [query]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !input.matchState) {
|
||||
return;
|
||||
}
|
||||
setMatchState(input.matchState);
|
||||
}, [input.matchState, isOpen]);
|
||||
|
||||
const openFind = useCallback(() => {
|
||||
isOpenRef.current = true;
|
||||
setIsOpen(true);
|
||||
setFocusToken((current) => current + 1);
|
||||
return true;
|
||||
}, []);
|
||||
|
||||
const closeFind = useCallback(() => {
|
||||
if (!isOpenRef.current && queryRef.current.length === 0) {
|
||||
return false;
|
||||
}
|
||||
isOpenRef.current = false;
|
||||
queryRef.current = "";
|
||||
setIsOpen(false);
|
||||
setQuery("");
|
||||
setMatchState({ status: "empty" });
|
||||
onCloseInput();
|
||||
return true;
|
||||
}, [onCloseInput]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!paneInstanceId) {
|
||||
return;
|
||||
}
|
||||
return paneFindRegistry.register({
|
||||
paneId: paneInstanceId,
|
||||
controller: { openFind, closeFind },
|
||||
});
|
||||
}, [closeFind, openFind, paneInstanceId]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
closeFind();
|
||||
};
|
||||
}, [closeFind]);
|
||||
|
||||
const handleQueryChange = useCallback(
|
||||
(nextQuery: string) => {
|
||||
queryRef.current = nextQuery;
|
||||
setQuery(nextQuery);
|
||||
const nextState = onQuery(nextQuery);
|
||||
setMatchState(
|
||||
nextQuery.length === 0 ? { status: "empty" } : (nextState ?? { status: "pending" }),
|
||||
);
|
||||
},
|
||||
[onQuery],
|
||||
);
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
if (queryRef.current.length === 0) {
|
||||
return;
|
||||
}
|
||||
setMatchState(onNextInput() ?? { status: "pending" });
|
||||
}, [onNextInput]);
|
||||
|
||||
const handlePrev = useCallback(() => {
|
||||
if (queryRef.current.length === 0) {
|
||||
return;
|
||||
}
|
||||
setMatchState(onPrevInput() ?? { status: "pending" });
|
||||
}, [onPrevInput]);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
closeFind();
|
||||
}, [closeFind]);
|
||||
|
||||
const findBarProps = useMemo(
|
||||
() => ({
|
||||
query,
|
||||
matchState,
|
||||
focusToken,
|
||||
onQueryChange: handleQueryChange,
|
||||
onNext: handleNext,
|
||||
onPrev: handlePrev,
|
||||
onClose: handleClose,
|
||||
}),
|
||||
[focusToken, handleClose, handleNext, handlePrev, handleQueryChange, matchState, query],
|
||||
);
|
||||
|
||||
return { isOpen, findBarProps };
|
||||
}
|
||||
|
||||
export function FindBar({
|
||||
query,
|
||||
matchState,
|
||||
focusToken,
|
||||
onQueryChange,
|
||||
onNext,
|
||||
onPrev,
|
||||
onClose,
|
||||
}: FindBarProps) {
|
||||
const inputRef = useRef<TextInput>(null);
|
||||
const { theme } = useUnistyles();
|
||||
const iconColor = theme.colors?.foregroundMuted ?? "#71717a";
|
||||
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
}, [focusToken]);
|
||||
|
||||
const canNavigate = matchState.status === "matched";
|
||||
const handleKeyPress = useCallback(
|
||||
(event: NativeSyntheticEvent<TextInputKeyPressEventData & { shiftKey?: boolean }>) => {
|
||||
if (event.nativeEvent.key === "Escape") {
|
||||
event.preventDefault?.();
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
if (event.nativeEvent.key !== "Enter") {
|
||||
return;
|
||||
}
|
||||
event.preventDefault?.();
|
||||
if (!canNavigate) {
|
||||
return;
|
||||
}
|
||||
if (event.nativeEvent.shiftKey) {
|
||||
onPrev();
|
||||
return;
|
||||
}
|
||||
onNext();
|
||||
},
|
||||
[canNavigate, onClose, onNext, onPrev],
|
||||
);
|
||||
|
||||
const counterText = formatMatchState(matchState);
|
||||
const controlDisabled = !canNavigate;
|
||||
const matchButtonStyle = useMemo(
|
||||
() => [styles.iconButton, controlDisabled && styles.iconButtonDisabled],
|
||||
[controlDisabled],
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container} testID="pane-find-bar">
|
||||
<Text style={styles.label}>Find</Text>
|
||||
<TextInput
|
||||
ref={inputRef}
|
||||
testID="pane-find-input"
|
||||
value={query}
|
||||
onChangeText={onQueryChange}
|
||||
onKeyPress={handleKeyPress}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
placeholder="Search"
|
||||
placeholderTextColor={theme.colors?.foregroundMuted ?? "#71717a"}
|
||||
style={styles.input}
|
||||
/>
|
||||
<Text style={styles.counter}>{counterText}</Text>
|
||||
<Pressable
|
||||
accessibilityLabel="Previous match"
|
||||
disabled={controlDisabled}
|
||||
onPress={onPrev}
|
||||
style={matchButtonStyle}
|
||||
testID="pane-find-prev"
|
||||
>
|
||||
<ChevronUp size={14} color={iconColor} />
|
||||
</Pressable>
|
||||
<Pressable
|
||||
accessibilityLabel="Next match"
|
||||
disabled={controlDisabled}
|
||||
onPress={onNext}
|
||||
style={matchButtonStyle}
|
||||
testID="pane-find-next"
|
||||
>
|
||||
<ChevronDown size={14} color={iconColor} />
|
||||
</Pressable>
|
||||
<Pressable
|
||||
accessibilityLabel="Close find"
|
||||
onPress={onClose}
|
||||
style={styles.iconButton}
|
||||
testID="pane-find-close"
|
||||
>
|
||||
<X size={14} color={iconColor} />
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function formatMatchState(matchState: PaneFindMatchState): string {
|
||||
if (matchState.status === "matched") {
|
||||
return `${matchState.current} / ${matchState.total}`;
|
||||
}
|
||||
if (matchState.status === "no-match") {
|
||||
return "No matches";
|
||||
}
|
||||
if (matchState.status === "pending") {
|
||||
return "Searching...";
|
||||
}
|
||||
return "0 / 0";
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create((theme) => ({
|
||||
container: {
|
||||
minHeight: 36,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: theme.colors.border,
|
||||
backgroundColor: theme.colors.surface1,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
},
|
||||
label: {
|
||||
color: theme.colors.foregroundMuted,
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
minWidth: 120,
|
||||
height: 26,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: theme.colors.border,
|
||||
borderRadius: 6,
|
||||
color: theme.colors.foreground,
|
||||
backgroundColor: theme.colors.surface0,
|
||||
fontSize: 13,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 3,
|
||||
},
|
||||
counter: {
|
||||
minWidth: 64,
|
||||
color: theme.colors.foregroundMuted,
|
||||
fontSize: 12,
|
||||
textAlign: "right",
|
||||
},
|
||||
iconButton: {
|
||||
width: 26,
|
||||
height: 26,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 6,
|
||||
},
|
||||
iconButtonDisabled: {
|
||||
opacity: 0.4,
|
||||
},
|
||||
}));
|
||||
@@ -17,7 +17,7 @@ import {
|
||||
import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
|
||||
import { useIsLocalDaemon } from "@/hooks/use-is-local-daemon";
|
||||
import { PairDeviceModal } from "@/desktop/components/pair-device-modal";
|
||||
import { buildHostAgentDetailRoute, buildSettingsHostSectionRoute } from "@/utils/host-routes";
|
||||
import { buildHostAgentDetailRoute, buildSettingsHostRoute } from "@/utils/host-routes";
|
||||
import { ImportSessionSheet } from "@/components/import-session-sheet";
|
||||
import { useHostRuntimeClient } from "@/runtime/host-runtime";
|
||||
import { useOpenProject } from "@/hooks/use-open-project";
|
||||
@@ -62,7 +62,7 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) {
|
||||
);
|
||||
|
||||
const handleOpenProviders = useCallback(() => {
|
||||
router.push(buildSettingsHostSectionRoute(serverId, "providers"));
|
||||
router.push(buildSettingsHostRoute(serverId));
|
||||
}, [router, serverId]);
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,13 +1,5 @@
|
||||
import {
|
||||
Fragment,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
useSyncExternalStore,
|
||||
} from "react";
|
||||
import type { ComponentType, ReactElement, ReactNode } from "react";
|
||||
import { Fragment, useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
|
||||
import type { ComponentType, ReactNode } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Pressable,
|
||||
@@ -30,9 +22,6 @@ import {
|
||||
ChevronDown,
|
||||
Settings,
|
||||
Server,
|
||||
Network,
|
||||
Workflow,
|
||||
Boxes,
|
||||
Keyboard,
|
||||
Stethoscope,
|
||||
Info,
|
||||
@@ -83,7 +72,6 @@ import {
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
|
||||
import { DesktopPermissionsSection } from "@/desktop/components/desktop-permissions-section";
|
||||
import { IntegrationsSection } from "@/desktop/components/integrations-section";
|
||||
import { isElectronRuntime } from "@/desktop/host";
|
||||
@@ -93,12 +81,7 @@ import { resolveAppVersion } from "@/utils/app-version";
|
||||
import { settingsStyles } from "@/styles/settings";
|
||||
import { THINKING_TONE_NATIVE_PCM_BASE64 } from "@/utils/thinking-tone.native-pcm";
|
||||
import { useVoiceAudioEngineOptional } from "@/contexts/voice-context";
|
||||
import {
|
||||
HostConnectionsPage,
|
||||
HostDaemonPage,
|
||||
HostOrchestrationPage,
|
||||
HostProvidersPage,
|
||||
} from "@/screens/settings/host-page";
|
||||
import { HostPage, HostRenameButton } from "@/screens/settings/host-page";
|
||||
import ProjectsScreen from "@/screens/projects-screen";
|
||||
import ProjectSettingsScreen from "@/screens/project-settings-screen";
|
||||
import { useIsCompactFormFactor } from "@/constants/layout";
|
||||
@@ -107,9 +90,8 @@ import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style";
|
||||
import {
|
||||
buildHostOpenProjectRoute,
|
||||
buildProjectsSettingsRoute,
|
||||
buildSettingsHostSectionRoute,
|
||||
buildSettingsHostRoute,
|
||||
buildSettingsSectionRoute,
|
||||
type HostSectionSlug,
|
||||
type SettingsSectionSlug,
|
||||
} from "@/utils/host-routes";
|
||||
import { navigateToLastWorkspace } from "@/stores/navigation-active-workspace-store";
|
||||
@@ -121,7 +103,7 @@ import { navigateToLastWorkspace } from "@/stores/navigation-active-workspace-st
|
||||
export type SettingsView =
|
||||
| { kind: "root" }
|
||||
| { kind: "section"; section: SettingsSectionSlug }
|
||||
| { kind: "host"; serverId: string; section: HostSectionSlug }
|
||||
| { kind: "host"; serverId: string }
|
||||
| { kind: "projects" }
|
||||
| { kind: "project"; projectKey: string };
|
||||
|
||||
@@ -141,19 +123,6 @@ const SIDEBAR_SECTION_ITEMS: SidebarSectionItem[] = [
|
||||
{ id: "about", label: "About", icon: Info },
|
||||
];
|
||||
|
||||
interface HostSectionItem {
|
||||
id: HostSectionSlug;
|
||||
label: string;
|
||||
icon: ComponentType<{ size: number; color: string }>;
|
||||
}
|
||||
|
||||
const HOST_SECTION_ITEMS: HostSectionItem[] = [
|
||||
{ id: "connections", label: "Connections", icon: Network },
|
||||
{ id: "orchestration", label: "Orchestration", icon: Workflow },
|
||||
{ id: "providers", label: "Providers", icon: Boxes },
|
||||
{ id: "daemon", label: "Daemon", icon: Server },
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Theme helpers (General section)
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -740,26 +709,6 @@ function useAnyOnlineHostServerId(serverIds: string[]): string | null {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Local daemon first, then remaining hosts in their existing order. Lets the
|
||||
* picker and the active-host resolver agree on a stable "first" host.
|
||||
*/
|
||||
function useSortedHosts(hosts: HostProfile[], localServerId: string | null): HostProfile[] {
|
||||
return useMemo(() => {
|
||||
if (!localServerId) {
|
||||
return hosts;
|
||||
}
|
||||
const localIndex = hosts.findIndex((host) => host.serverId === localServerId);
|
||||
if (localIndex <= 0) {
|
||||
return hosts;
|
||||
}
|
||||
const next = hosts.slice();
|
||||
const [local] = next.splice(localIndex, 1);
|
||||
next.unshift(local);
|
||||
return next;
|
||||
}, [hosts, localServerId]);
|
||||
}
|
||||
|
||||
interface SidebarSectionButtonProps {
|
||||
itemId: SettingsSectionSlug;
|
||||
label: string;
|
||||
@@ -802,49 +751,6 @@ function SidebarSectionButton({
|
||||
);
|
||||
}
|
||||
|
||||
interface SidebarHostSectionButtonProps {
|
||||
itemId: HostSectionSlug;
|
||||
label: string;
|
||||
icon: ComponentType<{ size: number; color: string }>;
|
||||
isSelected: boolean;
|
||||
onSelect: (section: HostSectionSlug) => void;
|
||||
}
|
||||
|
||||
function SidebarHostSectionButton({
|
||||
itemId,
|
||||
label,
|
||||
icon: IconComponent,
|
||||
isSelected,
|
||||
onSelect,
|
||||
}: SidebarHostSectionButtonProps) {
|
||||
const { theme } = useUnistyles();
|
||||
const handlePress = useCallback(() => {
|
||||
onSelect(itemId);
|
||||
}, [onSelect, itemId]);
|
||||
const accessibilityState = useMemo(() => ({ selected: isSelected }), [isSelected]);
|
||||
const labelStyle = useMemo(
|
||||
() => [sidebarStyles.label, isSelected && { color: theme.colors.foreground }],
|
||||
[isSelected, theme.colors.foreground],
|
||||
);
|
||||
return (
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
accessibilityState={accessibilityState}
|
||||
onPress={handlePress}
|
||||
testID={`settings-host-section-${itemId}`}
|
||||
style={isSelected ? selectedSidebarItemStyle : sidebarItemStyle}
|
||||
>
|
||||
<IconComponent
|
||||
size={theme.iconSize.md}
|
||||
color={isSelected ? theme.colors.foreground : theme.colors.foregroundMuted}
|
||||
/>
|
||||
<Text style={labelStyle} numberOfLines={1}>
|
||||
{label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
interface SidebarProjectsButtonProps {
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
@@ -876,213 +782,83 @@ function SidebarProjectsButton({ isSelected, onSelect }: SidebarProjectsButtonPr
|
||||
);
|
||||
}
|
||||
|
||||
// Sentinel option id for the "Add host" row appended to the picker list.
|
||||
const ADD_HOST_OPTION_ID = "__add_host__";
|
||||
|
||||
interface HostPickerOptionProps {
|
||||
interface SidebarHostItemProps {
|
||||
serverId: string;
|
||||
label: string;
|
||||
isSelected: boolean;
|
||||
isLocal: boolean;
|
||||
selected: boolean;
|
||||
active: boolean;
|
||||
onPress: () => void;
|
||||
onSelect: (serverId: string) => void;
|
||||
}
|
||||
|
||||
function HostPickerOption({
|
||||
serverId,
|
||||
label,
|
||||
isLocal,
|
||||
selected,
|
||||
active,
|
||||
onPress,
|
||||
}: HostPickerOptionProps) {
|
||||
function SidebarHostItem({ serverId, label, isSelected, isLocal, onSelect }: SidebarHostItemProps) {
|
||||
const { theme } = useUnistyles();
|
||||
const leadingSlot = useMemo(
|
||||
() => <Server size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />,
|
||||
[theme.iconSize.sm, theme.colors.foregroundMuted],
|
||||
const handlePress = useCallback(() => {
|
||||
onSelect(serverId);
|
||||
}, [onSelect, serverId]);
|
||||
const accessibilityState = useMemo(() => ({ selected: isSelected }), [isSelected]);
|
||||
const labelStyle = useMemo(
|
||||
() => [sidebarStyles.label, isSelected && { color: theme.colors.foreground }],
|
||||
[isSelected, theme.colors.foreground],
|
||||
);
|
||||
// The local host carries a "Local" marker; the active host is conveyed by the
|
||||
// row's selected check, so both can coexist on one row.
|
||||
const trailingSlot = useMemo(
|
||||
() =>
|
||||
isLocal ? (
|
||||
return (
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
accessibilityState={accessibilityState}
|
||||
onPress={handlePress}
|
||||
testID={`settings-host-entry-${serverId}`}
|
||||
style={isSelected ? selectedSidebarItemStyle : sidebarItemStyle}
|
||||
>
|
||||
<Server
|
||||
size={theme.iconSize.md}
|
||||
color={isSelected ? theme.colors.foreground : theme.colors.foregroundMuted}
|
||||
/>
|
||||
<Text style={labelStyle} numberOfLines={1}>
|
||||
{label}
|
||||
</Text>
|
||||
{isLocal ? (
|
||||
<Text style={sidebarStyles.localMarker} testID="settings-host-local-marker">
|
||||
Local
|
||||
</Text>
|
||||
) : undefined,
|
||||
[isLocal],
|
||||
);
|
||||
return (
|
||||
<ComboboxItem
|
||||
label={label}
|
||||
leadingSlot={leadingSlot}
|
||||
trailingSlot={trailingSlot}
|
||||
selected={selected}
|
||||
active={active}
|
||||
onPress={onPress}
|
||||
testID={`settings-host-picker-item-${serverId}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AddHostOption({ active, onPress }: { active: boolean; onPress: () => void }) {
|
||||
const { theme } = useUnistyles();
|
||||
const leadingSlot = useMemo(
|
||||
() => <Plus size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />,
|
||||
[theme.iconSize.sm, theme.colors.foregroundMuted],
|
||||
);
|
||||
return (
|
||||
<ComboboxItem
|
||||
label="Add host"
|
||||
leadingSlot={leadingSlot}
|
||||
active={active}
|
||||
onPress={onPress}
|
||||
testID="settings-add-host"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface HostPickerProps {
|
||||
activeServerId: string | null;
|
||||
sortedHosts: HostProfile[];
|
||||
localServerId: string | null;
|
||||
onSelectHost: (serverId: string) => void;
|
||||
onAddHost: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Scopes the four host sections to a host. Reuses the canonical sidebar host
|
||||
* switcher pattern (left-sidebar.tsx): a quiet row-styled trigger opening a
|
||||
* <Combobox>. The local host is listed first and tagged "Local"; an "Add host"
|
||||
* row is always reachable from the list — even with a single host.
|
||||
*/
|
||||
function HostPicker({
|
||||
activeServerId,
|
||||
sortedHosts,
|
||||
localServerId,
|
||||
onSelectHost,
|
||||
onAddHost,
|
||||
}: HostPickerProps) {
|
||||
const { theme } = useUnistyles();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const triggerRef = useRef<View | null>(null);
|
||||
const activeHost =
|
||||
sortedHosts.find((host) => host.serverId === activeServerId) ?? sortedHosts[0] ?? null;
|
||||
|
||||
const options = useMemo<ComboboxOption[]>(() => {
|
||||
const hostOptions = sortedHosts.map((host) => ({ id: host.serverId, label: host.label }));
|
||||
return [...hostOptions, { id: ADD_HOST_OPTION_ID, label: "Add host" }];
|
||||
}, [sortedHosts]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(id: string) => {
|
||||
if (id === ADD_HOST_OPTION_ID) {
|
||||
onAddHost();
|
||||
return;
|
||||
}
|
||||
onSelectHost(id);
|
||||
},
|
||||
[onAddHost, onSelectHost],
|
||||
);
|
||||
|
||||
const renderOption = useCallback(
|
||||
({
|
||||
option,
|
||||
selected,
|
||||
active,
|
||||
onPress,
|
||||
}: {
|
||||
option: ComboboxOption;
|
||||
selected: boolean;
|
||||
active: boolean;
|
||||
onPress: () => void;
|
||||
}): ReactElement => {
|
||||
if (option.id === ADD_HOST_OPTION_ID) {
|
||||
return <AddHostOption active={active} onPress={onPress} />;
|
||||
}
|
||||
return (
|
||||
<HostPickerOption
|
||||
serverId={option.id}
|
||||
label={option.label}
|
||||
isLocal={localServerId !== null && option.id === localServerId}
|
||||
selected={selected}
|
||||
active={active}
|
||||
onPress={onPress}
|
||||
/>
|
||||
);
|
||||
},
|
||||
[localServerId],
|
||||
);
|
||||
|
||||
const handleOpen = useCallback(() => setIsOpen(true), []);
|
||||
const triggerStyle = useCallback(
|
||||
({ hovered = false }: PressableStateCallbackType & { hovered?: boolean }) => [
|
||||
sidebarStyles.pickerTrigger,
|
||||
hovered && sidebarStyles.pickerTriggerHovered,
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Pressable
|
||||
ref={triggerRef}
|
||||
style={triggerStyle}
|
||||
onPress={handleOpen}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Switch host"
|
||||
testID="settings-host-picker"
|
||||
>
|
||||
<Monitor size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
|
||||
<Text style={sidebarStyles.pickerTriggerLabel} numberOfLines={1}>
|
||||
{activeHost?.label ?? "Host"}
|
||||
</Text>
|
||||
<ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
|
||||
</Pressable>
|
||||
<Combobox
|
||||
options={options}
|
||||
value={activeServerId ?? ""}
|
||||
onSelect={handleSelect}
|
||||
renderOption={renderOption}
|
||||
searchable={false}
|
||||
title="Switch host"
|
||||
desktopMinWidth={240}
|
||||
open={isOpen}
|
||||
onOpenChange={setIsOpen}
|
||||
anchorRef={triggerRef}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
interface SettingsSidebarProps {
|
||||
view: SettingsView;
|
||||
onSelectSection: (section: SettingsSectionSlug) => void;
|
||||
onSelectHostSection: (section: HostSectionSlug) => void;
|
||||
onSelectHost: (serverId: string) => void;
|
||||
onSelectProjects: () => void;
|
||||
onAddHost: () => void;
|
||||
onBackToWorkspace: () => void;
|
||||
activeHostServerId: string | null;
|
||||
layout: "desktop" | "mobile";
|
||||
}
|
||||
|
||||
function SettingsSidebar({
|
||||
view,
|
||||
onSelectSection,
|
||||
onSelectHostSection,
|
||||
onSelectHost,
|
||||
onSelectProjects,
|
||||
onAddHost,
|
||||
onBackToWorkspace,
|
||||
activeHostServerId,
|
||||
layout,
|
||||
}: SettingsSidebarProps) {
|
||||
const { theme } = useUnistyles();
|
||||
const hosts = useHosts();
|
||||
const localServerId = useLocalDaemonServerId();
|
||||
const sortedHosts = useSortedHosts(hosts, localServerId);
|
||||
const hasHosts = sortedHosts.length > 0;
|
||||
const sortedHosts = useMemo(() => {
|
||||
if (!localServerId) {
|
||||
return hosts;
|
||||
}
|
||||
const localIndex = hosts.findIndex((host) => host.serverId === localServerId);
|
||||
if (localIndex <= 0) {
|
||||
return hosts;
|
||||
}
|
||||
const next = hosts.slice();
|
||||
const [local] = next.splice(localIndex, 1);
|
||||
next.unshift(local);
|
||||
return next;
|
||||
}, [hosts, localServerId]);
|
||||
const isDesktopApp = isElectronRuntime();
|
||||
const items = SIDEBAR_SECTION_ITEMS.filter((item) => !item.desktopOnly || isDesktopApp);
|
||||
const insets = useSafeAreaInsets();
|
||||
@@ -1096,7 +872,7 @@ function SettingsSidebar({
|
||||
[insets.top, isDesktop],
|
||||
);
|
||||
const selectedSectionId = view.kind === "section" ? view.section : null;
|
||||
const selectedHostSection = view.kind === "host" ? view.section : null;
|
||||
const selectedServerId = view.kind === "host" ? view.serverId : null;
|
||||
const isProjectsSelected = view.kind === "projects" || view.kind === "project";
|
||||
const paddingTopStyle = useMemo(() => ({ height: padding.top }), [padding.top]);
|
||||
|
||||
@@ -1117,7 +893,6 @@ function SettingsSidebar({
|
||||
/>
|
||||
) : null}
|
||||
<View style={sidebarStyles.list}>
|
||||
<Text style={sidebarStyles.groupLabel}>App</Text>
|
||||
{items.map((item) => (
|
||||
<Fragment key={item.id}>
|
||||
<SidebarSectionButton
|
||||
@@ -1134,43 +909,30 @@ function SettingsSidebar({
|
||||
))}
|
||||
</View>
|
||||
<SidebarSeparator />
|
||||
{hasHosts ? (
|
||||
<View style={sidebarStyles.list}>
|
||||
<Text style={sidebarStyles.groupLabel}>Host</Text>
|
||||
<HostPicker
|
||||
activeServerId={activeHostServerId}
|
||||
sortedHosts={sortedHosts}
|
||||
localServerId={localServerId}
|
||||
onSelectHost={onSelectHost}
|
||||
onAddHost={onAddHost}
|
||||
<View style={sidebarStyles.list}>
|
||||
{sortedHosts.map((host) => (
|
||||
<SidebarHostItem
|
||||
key={host.serverId}
|
||||
serverId={host.serverId}
|
||||
label={host.label}
|
||||
isSelected={selectedServerId === host.serverId}
|
||||
isLocal={localServerId !== null && host.serverId === localServerId}
|
||||
onSelect={onSelectHost}
|
||||
/>
|
||||
{HOST_SECTION_ITEMS.map((item) => (
|
||||
<SidebarHostSectionButton
|
||||
key={item.id}
|
||||
itemId={item.id}
|
||||
label={item.label}
|
||||
icon={item.icon}
|
||||
isSelected={selectedHostSection === item.id}
|
||||
onSelect={onSelectHostSection}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
) : (
|
||||
<View style={sidebarStyles.list}>
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Add host"
|
||||
onPress={onAddHost}
|
||||
testID="settings-add-host"
|
||||
style={sidebarItemStyle}
|
||||
>
|
||||
<Plus size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
|
||||
<Text style={sidebarStyles.label} numberOfLines={1}>
|
||||
Add host
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
)}
|
||||
))}
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Add host"
|
||||
onPress={onAddHost}
|
||||
testID="settings-add-host"
|
||||
style={sidebarItemStyle}
|
||||
>
|
||||
<Plus size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
|
||||
<Text style={sidebarStyles.label} numberOfLines={1}>
|
||||
Add host
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1205,18 +967,9 @@ export default function SettingsScreen({ view }: SettingsScreenProps) {
|
||||
[webScrollbarStyle],
|
||||
);
|
||||
const hosts = useHosts();
|
||||
const localServerId = useLocalDaemonServerId();
|
||||
const sortedHosts = useSortedHosts(hosts, localServerId);
|
||||
const hostServerIds = useMemo(() => hosts.map((host) => host.serverId), [hosts]);
|
||||
const anyOnlineServerId = useAnyOnlineHostServerId(hostServerIds);
|
||||
|
||||
// The host the four sections scope to: the host on the active view, otherwise
|
||||
// the local daemon, otherwise the first available host.
|
||||
const activeHostServerId = useMemo(() => {
|
||||
if (view.kind === "host") return view.serverId;
|
||||
return localServerId ?? sortedHosts[0]?.serverId ?? null;
|
||||
}, [view, localServerId, sortedHosts]);
|
||||
|
||||
const handleThemeChange = useCallback(
|
||||
(nextTheme: AppSettings["theme"]) => {
|
||||
void updateSettings({ theme: nextTheme });
|
||||
@@ -1302,7 +1055,7 @@ export default function SettingsScreen({ view }: SettingsScreenProps) {
|
||||
|
||||
const handleHostAdded = useCallback(
|
||||
({ serverId }: { serverId: string }) => {
|
||||
const target = buildSettingsHostSectionRoute(serverId, "connections");
|
||||
const target = buildSettingsHostRoute(serverId);
|
||||
if (isCompactLayout) {
|
||||
router.push(target);
|
||||
} else {
|
||||
@@ -1324,34 +1077,16 @@ export default function SettingsScreen({ view }: SettingsScreenProps) {
|
||||
[isCompactLayout, router],
|
||||
);
|
||||
|
||||
// Picker: swap the host but keep the section the user is already looking at.
|
||||
const handleSelectHost = useCallback(
|
||||
(serverId: string) => {
|
||||
const section: HostSectionSlug = view.kind === "host" ? view.section : "connections";
|
||||
const target = buildSettingsHostSectionRoute(serverId, section);
|
||||
const target = buildSettingsHostRoute(serverId);
|
||||
if (isCompactLayout) {
|
||||
router.push(target);
|
||||
} else {
|
||||
router.replace(target);
|
||||
}
|
||||
},
|
||||
[isCompactLayout, router, view],
|
||||
);
|
||||
|
||||
const handleSelectHostSection = useCallback(
|
||||
(section: HostSectionSlug) => {
|
||||
if (!activeHostServerId) {
|
||||
handleAddHost();
|
||||
return;
|
||||
}
|
||||
const target = buildSettingsHostSectionRoute(activeHostServerId, section);
|
||||
if (isCompactLayout) {
|
||||
router.push(target);
|
||||
} else {
|
||||
router.replace(target);
|
||||
}
|
||||
},
|
||||
[activeHostServerId, handleAddHost, isCompactLayout, router],
|
||||
[isCompactLayout, router],
|
||||
);
|
||||
|
||||
const handleSelectProjects = useCallback(() => {
|
||||
@@ -1405,9 +1140,13 @@ export default function SettingsScreen({ view }: SettingsScreenProps) {
|
||||
titleAccessory?: ReactNode;
|
||||
} | null => {
|
||||
if (view.kind === "host") {
|
||||
const item = HOST_SECTION_ITEMS.find((s) => s.id === view.section);
|
||||
if (!item) return null;
|
||||
return { title: item.label, Icon: item.icon };
|
||||
const host = hosts.find((h) => h.serverId === view.serverId);
|
||||
if (!host) return null;
|
||||
return {
|
||||
title: host.label,
|
||||
Icon: Server,
|
||||
titleAccessory: <HostRenameButton host={host} />,
|
||||
};
|
||||
}
|
||||
if (view.kind === "section") {
|
||||
const item = SIDEBAR_SECTION_ITEMS.find((s) => s.id === view.section);
|
||||
@@ -1422,16 +1161,7 @@ export default function SettingsScreen({ view }: SettingsScreenProps) {
|
||||
|
||||
const content = (() => {
|
||||
if (view.kind === "host") {
|
||||
switch (view.section) {
|
||||
case "connections":
|
||||
return <HostConnectionsPage serverId={view.serverId} />;
|
||||
case "orchestration":
|
||||
return <HostOrchestrationPage serverId={view.serverId} />;
|
||||
case "providers":
|
||||
return <HostProvidersPage serverId={view.serverId} />;
|
||||
case "daemon":
|
||||
return <HostDaemonPage serverId={view.serverId} onHostRemoved={handleHostRemoved} />;
|
||||
}
|
||||
return <HostPage serverId={view.serverId} onHostRemoved={handleHostRemoved} />;
|
||||
}
|
||||
if (view.kind === "projects") {
|
||||
return <ProjectsScreen view={view} />;
|
||||
@@ -1521,12 +1251,10 @@ export default function SettingsScreen({ view }: SettingsScreenProps) {
|
||||
<SettingsSidebar
|
||||
view={view}
|
||||
onSelectSection={handleSelectSection}
|
||||
onSelectHostSection={handleSelectHostSection}
|
||||
onSelectHost={handleSelectHost}
|
||||
onSelectProjects={handleSelectProjects}
|
||||
onAddHost={handleAddHost}
|
||||
onBackToWorkspace={handleBackToWorkspace}
|
||||
activeHostServerId={activeHostServerId}
|
||||
layout="mobile"
|
||||
/>
|
||||
</ScrollView>
|
||||
@@ -1565,12 +1293,10 @@ export default function SettingsScreen({ view }: SettingsScreenProps) {
|
||||
<SettingsSidebar
|
||||
view={view}
|
||||
onSelectSection={handleSelectSection}
|
||||
onSelectHostSection={handleSelectHostSection}
|
||||
onSelectHost={handleSelectHost}
|
||||
onSelectProjects={handleSelectProjects}
|
||||
onAddHost={handleAddHost}
|
||||
onBackToWorkspace={handleBackToWorkspace}
|
||||
activeHostServerId={activeHostServerId}
|
||||
layout="desktop"
|
||||
/>
|
||||
<View style={desktopStyles.contentPane}>
|
||||
@@ -1722,13 +1448,6 @@ const sidebarStyles = StyleSheet.create((theme) => ({
|
||||
paddingHorizontal: theme.spacing[2],
|
||||
gap: theme.spacing[1],
|
||||
},
|
||||
groupLabel: {
|
||||
fontSize: theme.fontSize.sm,
|
||||
fontWeight: theme.fontWeight.medium,
|
||||
color: theme.colors.foregroundMuted,
|
||||
paddingHorizontal: theme.spacing[2],
|
||||
paddingVertical: theme.spacing[1],
|
||||
},
|
||||
item: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
@@ -1753,25 +1472,11 @@ const sidebarStyles = StyleSheet.create((theme) => ({
|
||||
localMarker: {
|
||||
fontSize: theme.fontSize.xs,
|
||||
color: theme.colors.foregroundMuted,
|
||||
marginLeft: theme.spacing[1],
|
||||
},
|
||||
pickerTrigger: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[2],
|
||||
minHeight: 36,
|
||||
paddingVertical: theme.spacing[2],
|
||||
paddingHorizontal: theme.spacing[2],
|
||||
borderRadius: theme.borderRadius.lg,
|
||||
},
|
||||
pickerTriggerHovered: {
|
||||
backgroundColor: theme.colors.surfaceSidebarHover,
|
||||
},
|
||||
pickerTriggerLabel: {
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
fontSize: theme.fontSize.base,
|
||||
color: theme.colors.foreground,
|
||||
fontWeight: theme.fontWeight.normal,
|
||||
paddingVertical: 2,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.colors.border,
|
||||
borderRadius: theme.borderRadius.full,
|
||||
backgroundColor: theme.colors.surface3,
|
||||
},
|
||||
}));
|
||||
|
||||
@@ -74,30 +74,25 @@ function formatDaemonVersionBadge(version: string | null): string | null {
|
||||
const REMOVE_CONNECTION_HEADER: SheetHeader = { title: "Remove connection" };
|
||||
const REMOVE_HOST_HEADER: SheetHeader = { title: "Remove host" };
|
||||
|
||||
function useHostProfile(serverId: string): HostProfile | null {
|
||||
export interface HostPageProps {
|
||||
serverId: string;
|
||||
onHostRemoved?: () => void;
|
||||
}
|
||||
|
||||
export function HostPage({ serverId, onHostRemoved }: HostPageProps) {
|
||||
const daemons = useHosts();
|
||||
return daemons.find((entry) => entry.serverId === serverId) ?? null;
|
||||
}
|
||||
|
||||
function HostNotFound() {
|
||||
return (
|
||||
<View>
|
||||
<View style={EMPTY_CARD_STYLE}>
|
||||
<Text style={styles.emptyText}>Host not found</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function HostStatusBadges({ serverId }: { serverId: string }) {
|
||||
const host = daemons.find((entry) => entry.serverId === serverId) ?? null;
|
||||
const { theme } = useUnistyles();
|
||||
const snapshot = useHostRuntimeSnapshot(serverId);
|
||||
const isLocalDaemon = useIsLocalDaemon(serverId);
|
||||
|
||||
const daemonVersion = useSessionStore(
|
||||
(state) => state.sessions[serverId]?.serverInfo?.version ?? null,
|
||||
);
|
||||
|
||||
const connectionStatus = snapshot?.connectionStatus ?? "connecting";
|
||||
const activeConnection = snapshot?.activeConnection ?? null;
|
||||
const lastError = snapshot?.lastError ?? null;
|
||||
const statusLabel = formatConnectionStatus(connectionStatus);
|
||||
const statusTone = getConnectionStatusTone(connectionStatus);
|
||||
let statusColor: string;
|
||||
@@ -122,6 +117,8 @@ function HostStatusBadges({ serverId }: { serverId: string }) {
|
||||
}
|
||||
const connectionBadge = formatActiveConnectionBadge(activeConnection, theme);
|
||||
const versionBadgeText = formatDaemonVersionBadge(daemonVersion);
|
||||
const connectionError =
|
||||
typeof lastError === "string" && lastError.trim().length > 0 ? lastError.trim() : null;
|
||||
|
||||
const statusPillStyle = useMemo(
|
||||
() => [styles.statusPill, { backgroundColor: statusPillBg }],
|
||||
@@ -133,125 +130,46 @@ function HostStatusBadges({ serverId }: { serverId: string }) {
|
||||
);
|
||||
const statusTextStyle = useMemo(() => [styles.statusText, { color: statusColor }], [statusColor]);
|
||||
|
||||
return (
|
||||
<View style={styles.identityBadges} testID="host-page-identity">
|
||||
<View style={statusPillStyle}>
|
||||
<View style={statusDotStyle} />
|
||||
<Text style={statusTextStyle}>{statusLabel}</Text>
|
||||
</View>
|
||||
{connectionBadge ? (
|
||||
<View style={styles.badgePill}>
|
||||
{connectionBadge.icon}
|
||||
<Text style={styles.badgeText} numberOfLines={1}>
|
||||
{connectionBadge.text}
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
{versionBadgeText ? (
|
||||
<View style={styles.badgePill}>
|
||||
<Text style={styles.badgeText} numberOfLines={1}>
|
||||
{versionBadgeText}
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function HostConnectionError({ serverId }: { serverId: string }) {
|
||||
const snapshot = useHostRuntimeSnapshot(serverId);
|
||||
const lastError = snapshot?.lastError ?? null;
|
||||
const connectionError =
|
||||
typeof lastError === "string" && lastError.trim().length > 0 ? lastError.trim() : null;
|
||||
if (!connectionError) return null;
|
||||
return <Text style={styles.errorText}>{connectionError}</Text>;
|
||||
}
|
||||
|
||||
export function HostConnectionsPage({ serverId }: { serverId: string }) {
|
||||
const host = useHostProfile(serverId);
|
||||
const isLocalDaemon = useIsLocalDaemon(serverId);
|
||||
|
||||
if (!host) {
|
||||
return <HostNotFound />;
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<HostConnectionError serverId={serverId} />
|
||||
<ConnectionsSection host={host} />
|
||||
{isLocalDaemon ? (
|
||||
<SettingsSection title="Pair devices">
|
||||
<PairDeviceRow />
|
||||
</SettingsSection>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export function HostOrchestrationPage({ serverId }: { serverId: string }) {
|
||||
const host = useHostProfile(serverId);
|
||||
const isConnected = useHostRuntimeIsConnected(serverId);
|
||||
|
||||
if (!host) {
|
||||
return <HostNotFound />;
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
{isConnected ? (
|
||||
<SettingsSection title="Orchestration">
|
||||
<InjectPaseoToolsCard serverId={serverId} />
|
||||
<AppendSystemPromptCard serverId={serverId} />
|
||||
</SettingsSection>
|
||||
) : (
|
||||
return (
|
||||
<View testID={`settings-host-page-${serverId}`}>
|
||||
<View style={EMPTY_CARD_STYLE}>
|
||||
<Text style={styles.emptyText}>Connect to this host to manage orchestration</Text>
|
||||
<Text style={styles.emptyText}>Host not found</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export function HostProvidersPage({ serverId }: { serverId: string }) {
|
||||
const host = useHostProfile(serverId);
|
||||
|
||||
if (!host) {
|
||||
return <HostNotFound />;
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<ProvidersSection serverId={serverId} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export function HostDaemonPage({
|
||||
serverId,
|
||||
onHostRemoved,
|
||||
}: {
|
||||
serverId: string;
|
||||
onHostRemoved?: () => void;
|
||||
}) {
|
||||
const host = useHostProfile(serverId);
|
||||
const isLocalDaemon = useIsLocalDaemon(serverId);
|
||||
|
||||
if (!host) {
|
||||
return <HostNotFound />;
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.daemonHeader}>
|
||||
<Text style={styles.daemonHeaderLabel} numberOfLines={1}>
|
||||
{host.label}
|
||||
</Text>
|
||||
<HostRenameButton host={host} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
<HostStatusBadges serverId={serverId} />
|
||||
return (
|
||||
<View testID={`settings-host-page-${serverId}`}>
|
||||
<View style={styles.identityBadges} testID="host-page-identity">
|
||||
<View style={statusPillStyle}>
|
||||
<View style={statusDotStyle} />
|
||||
<Text style={statusTextStyle}>{statusLabel}</Text>
|
||||
</View>
|
||||
{connectionBadge ? (
|
||||
<View style={styles.badgePill}>
|
||||
{connectionBadge.icon}
|
||||
<Text style={styles.badgeText} numberOfLines={1}>
|
||||
{connectionBadge.text}
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
{versionBadgeText ? (
|
||||
<View style={styles.badgePill}>
|
||||
<Text style={styles.badgeText} numberOfLines={1}>
|
||||
{versionBadgeText}
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
{connectionError ? <Text style={styles.errorText}>{connectionError}</Text> : null}
|
||||
|
||||
{isLocalDaemon ? <LocalDaemonSection /> : null}
|
||||
<ConnectionsSection host={host} />
|
||||
|
||||
<DaemonSection host={host} isLocalDaemon={isLocalDaemon} />
|
||||
|
||||
<ProvidersSection serverId={serverId} />
|
||||
|
||||
<RemoveHostSection host={host} onRemoved={onHostRemoved} />
|
||||
</View>
|
||||
@@ -419,7 +337,7 @@ function ConnectionRow({
|
||||
if (latencyLoading) return "...";
|
||||
if (latencyError) return "Timeout";
|
||||
if (latencyMs != null) return formatLatency(latencyMs);
|
||||
return "—";
|
||||
return "\u2014";
|
||||
})();
|
||||
const latencyColor = latencyError ? theme.colors.palette.red[300] : theme.colors.foregroundMuted;
|
||||
|
||||
@@ -460,6 +378,23 @@ function ConnectionRow({
|
||||
);
|
||||
}
|
||||
|
||||
function DaemonSection({ host, isLocalDaemon }: { host: HostProfile; isLocalDaemon: boolean }) {
|
||||
return (
|
||||
<>
|
||||
<SettingsSection title="Daemon settings">
|
||||
<InjectPaseoToolsCard serverId={host.serverId} />
|
||||
<AppendSystemPromptCard serverId={host.serverId} />
|
||||
</SettingsSection>
|
||||
{isLocalDaemon ? (
|
||||
<SettingsSection title="Pair devices">
|
||||
<PairDeviceRow />
|
||||
</SettingsSection>
|
||||
) : null}
|
||||
{isLocalDaemon ? <LocalDaemonSection /> : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const delay = (ms: number) =>
|
||||
new Promise<void>((resolve) => {
|
||||
setTimeout(resolve, ms);
|
||||
@@ -677,7 +612,7 @@ function AppendSystemPromptCard({ serverId }: { serverId: string }) {
|
||||
<View style={settingsStyles.row}>
|
||||
<View style={settingsStyles.rowContent}>
|
||||
<Text style={settingsStyles.rowTitle}>System prompt</Text>
|
||||
<Text style={settingsStyles.rowHint}>Adds a system prompt to all agents</Text>
|
||||
<Text style={settingsStyles.rowHint}>Added a system prompt to all agents</Text>
|
||||
</View>
|
||||
<Button
|
||||
variant="outline"
|
||||
@@ -868,18 +803,6 @@ const styles = StyleSheet.create((theme) => ({
|
||||
padding: theme.spacing[1],
|
||||
borderRadius: theme.borderRadius.md,
|
||||
},
|
||||
daemonHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[1],
|
||||
marginBottom: theme.spacing[4],
|
||||
},
|
||||
daemonHeaderLabel: {
|
||||
flexShrink: 1,
|
||||
fontSize: theme.fontSize.base,
|
||||
fontWeight: theme.fontWeight.medium,
|
||||
color: theme.colors.foreground,
|
||||
},
|
||||
identityBadges: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
|
||||
@@ -113,7 +113,6 @@ describe("WorkspacePaneContent", () => {
|
||||
isInteractive: false,
|
||||
focusPane: expect.any(Function),
|
||||
});
|
||||
expect(snapshots[0]?.paneContextValue.paneInstanceId).toBeNull();
|
||||
expect(snapshots[1]?.focus).toEqual({
|
||||
isWorkspaceFocused: true,
|
||||
isPaneFocused: true,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useMemo, type ComponentType } from "react";
|
||||
import React, { useMemo, type ComponentType } from "react";
|
||||
import invariant from "tiny-invariant";
|
||||
import {
|
||||
createPaneFocusContextValue,
|
||||
@@ -10,11 +10,6 @@ import { getPanelRegistration } from "@/panels/panel-registry";
|
||||
import { ensurePanelsRegistered } from "@/panels/register-panels";
|
||||
import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
|
||||
import type { WorkspaceFileOpenRequest } from "@/workspace/file-open";
|
||||
import {
|
||||
clearActivePaneFindPaneId,
|
||||
createPaneFindPaneId,
|
||||
setActivePaneFindPaneId,
|
||||
} from "@/panels/pane-find-registry";
|
||||
|
||||
export interface WorkspacePaneContentModel {
|
||||
key: string;
|
||||
@@ -24,7 +19,6 @@ export interface WorkspacePaneContentModel {
|
||||
|
||||
export interface BuildWorkspacePaneContentModelInput {
|
||||
tab: WorkspaceTabDescriptor;
|
||||
paneId?: string | null;
|
||||
normalizedServerId: string;
|
||||
normalizedWorkspaceId: string;
|
||||
onOpenTab: (target: WorkspaceTabDescriptor["target"]) => void;
|
||||
@@ -36,7 +30,6 @@ export interface BuildWorkspacePaneContentModelInput {
|
||||
|
||||
export function buildWorkspacePaneContentModel({
|
||||
tab,
|
||||
paneId,
|
||||
normalizedServerId,
|
||||
normalizedWorkspaceId,
|
||||
onOpenTab,
|
||||
@@ -48,20 +41,12 @@ export function buildWorkspacePaneContentModel({
|
||||
ensurePanelsRegistered();
|
||||
const registration = getPanelRegistration(tab.kind);
|
||||
invariant(registration, `No panel registration for kind: ${tab.kind}`);
|
||||
const paneInstanceId = paneId
|
||||
? createPaneFindPaneId({
|
||||
serverId: normalizedServerId,
|
||||
workspaceId: normalizedWorkspaceId,
|
||||
paneId,
|
||||
})
|
||||
: null;
|
||||
return {
|
||||
key: `${normalizedServerId}:${normalizedWorkspaceId}:${tab.tabId}`,
|
||||
Component: registration.component,
|
||||
paneContextValue: {
|
||||
serverId: normalizedServerId,
|
||||
workspaceId: normalizedWorkspaceId,
|
||||
paneInstanceId,
|
||||
tabId: tab.tabId,
|
||||
target: tab.target,
|
||||
openTab: onOpenTab,
|
||||
@@ -96,16 +81,6 @@ export function WorkspacePaneContent({
|
||||
}),
|
||||
[isPaneFocused, isWorkspaceFocused, onFocusPane],
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!paneContextValue.paneInstanceId || !isWorkspaceFocused || !isPaneFocused) {
|
||||
return;
|
||||
}
|
||||
const paneInstanceId = paneContextValue.paneInstanceId;
|
||||
setActivePaneFindPaneId(paneInstanceId);
|
||||
return () => {
|
||||
clearActivePaneFindPaneId(paneInstanceId);
|
||||
};
|
||||
}, [isPaneFocused, isWorkspaceFocused, paneContextValue.paneInstanceId]);
|
||||
|
||||
return (
|
||||
<PaneProvider value={paneContextValue}>
|
||||
|
||||
@@ -2465,7 +2465,7 @@ function WorkspaceScreenContent({
|
||||
const currentCursor = sessionState?.agentTimelineCursor.get(agentId);
|
||||
await client.fetchAgentTimeline(agentId, {
|
||||
direction: "tail",
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
...(currentCursor
|
||||
? { cursor: { epoch: currentCursor.epoch, seq: currentCursor.endSeq } }
|
||||
: {}),
|
||||
@@ -2827,7 +2827,6 @@ function WorkspaceScreenContent({
|
||||
}) =>
|
||||
buildWorkspacePaneContentModel({
|
||||
tab: input.tab,
|
||||
paneId: input.paneId,
|
||||
normalizedServerId,
|
||||
normalizedWorkspaceId,
|
||||
onOpenTab: (target) => {
|
||||
|
||||
@@ -26,16 +26,6 @@ vi.mock("@xterm/addon-ligatures/lib/addon-ligatures.mjs", () => ({
|
||||
|
||||
vi.mock("@xterm/addon-search", () => ({
|
||||
SearchAddon: class SearchAddon {
|
||||
findNext(): boolean {
|
||||
return false;
|
||||
}
|
||||
findPrevious(): boolean {
|
||||
return false;
|
||||
}
|
||||
clearDecorations(): void {}
|
||||
onDidChangeResults(): { dispose: () => void } {
|
||||
return { dispose: () => {} };
|
||||
}
|
||||
dispose(): void {}
|
||||
},
|
||||
}));
|
||||
@@ -101,15 +91,6 @@ interface StubTerminal {
|
||||
cols?: number;
|
||||
}
|
||||
|
||||
interface StubSearchAddon {
|
||||
findNext: (term: string, options?: unknown) => boolean;
|
||||
findPrevious: (term: string, options?: unknown) => boolean;
|
||||
clearDecorations: () => void;
|
||||
onDidChangeResults: (listener: (event: { resultIndex: number; resultCount: number }) => void) => {
|
||||
dispose: () => void;
|
||||
};
|
||||
}
|
||||
|
||||
function createRuntimeWithTerminal(): {
|
||||
runtime: TerminalEmulatorRuntime;
|
||||
terminal: StubTerminal & {
|
||||
@@ -164,55 +145,6 @@ function decodeTerminalOutput(data: string | Uint8Array): string {
|
||||
return new TextDecoder().decode(data);
|
||||
}
|
||||
|
||||
function createRuntimeWithSearchAddon(input?: {
|
||||
findNextResult?: boolean;
|
||||
findPreviousResult?: boolean;
|
||||
}): {
|
||||
runtime: TerminalEmulatorRuntime;
|
||||
searchAddon: StubSearchAddon;
|
||||
calls: {
|
||||
findNext: Array<{ term: string; options: unknown }>;
|
||||
findPrevious: Array<{ term: string; options: unknown }>;
|
||||
clearDecorations: number;
|
||||
subscribedListeners: Array<(event: { resultIndex: number; resultCount: number }) => void>;
|
||||
disposeSubscription: number;
|
||||
};
|
||||
} {
|
||||
const runtime = new TerminalEmulatorRuntime();
|
||||
const calls = {
|
||||
findNext: [] as Array<{ term: string; options: unknown }>,
|
||||
findPrevious: [] as Array<{ term: string; options: unknown }>,
|
||||
clearDecorations: 0,
|
||||
subscribedListeners: [] as Array<(event: { resultIndex: number; resultCount: number }) => void>,
|
||||
disposeSubscription: 0,
|
||||
};
|
||||
const searchAddon: StubSearchAddon = {
|
||||
findNext: (term, options) => {
|
||||
calls.findNext.push({ term, options });
|
||||
return input?.findNextResult ?? true;
|
||||
},
|
||||
findPrevious: (term, options) => {
|
||||
calls.findPrevious.push({ term, options });
|
||||
return input?.findPreviousResult ?? true;
|
||||
},
|
||||
clearDecorations: () => {
|
||||
calls.clearDecorations += 1;
|
||||
},
|
||||
onDidChangeResults: (listener) => {
|
||||
calls.subscribedListeners.push(listener);
|
||||
return {
|
||||
dispose: () => {
|
||||
calls.disposeSubscription += 1;
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
(runtime as unknown as { searchAddon: StubSearchAddon }).searchAddon = searchAddon;
|
||||
|
||||
return { runtime, searchAddon, calls };
|
||||
}
|
||||
|
||||
describe("terminal-emulator-runtime", () => {
|
||||
const originalWindow = (globalThis as { window?: unknown }).window;
|
||||
|
||||
@@ -486,71 +418,4 @@ describe("terminal-emulator-runtime", () => {
|
||||
|
||||
expect(fitAndEmitResize).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("delegates find navigation and clearing to the stored xterm search addon", () => {
|
||||
const { runtime, calls } = createRuntimeWithSearchAddon({
|
||||
findNextResult: true,
|
||||
findPreviousResult: false,
|
||||
});
|
||||
|
||||
expect(runtime.findNext({ query: "needle" })).toBe(true);
|
||||
expect(runtime.findPrevious({ query: "needle" })).toBe(false);
|
||||
runtime.clearFindDecorations();
|
||||
|
||||
expect(calls.findNext).toEqual([
|
||||
{
|
||||
term: "needle",
|
||||
options: {
|
||||
caseSensitive: false,
|
||||
decorations: {
|
||||
matchBackground: "#facc15",
|
||||
matchOverviewRuler: "#facc15",
|
||||
activeMatchBackground: "#38bdf8",
|
||||
activeMatchColorOverviewRuler: "#38bdf8",
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
expect(calls.findPrevious).toEqual([
|
||||
{
|
||||
term: "needle",
|
||||
options: {
|
||||
caseSensitive: false,
|
||||
decorations: {
|
||||
matchBackground: "#facc15",
|
||||
matchOverviewRuler: "#facc15",
|
||||
activeMatchBackground: "#38bdf8",
|
||||
activeMatchColorOverviewRuler: "#38bdf8",
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
expect(calls.clearDecorations).toBe(1);
|
||||
});
|
||||
|
||||
it("forwards xterm search result changes and disposes the subscription", () => {
|
||||
const { runtime, calls } = createRuntimeWithSearchAddon();
|
||||
const events: Array<{ resultIndex: number; resultCount: number }> = [];
|
||||
|
||||
const unsubscribe = runtime.onFindResultsChanged((event) => {
|
||||
events.push(event);
|
||||
});
|
||||
calls.subscribedListeners[0]?.({ resultIndex: 2, resultCount: 5 });
|
||||
unsubscribe();
|
||||
|
||||
expect(events).toEqual([{ resultIndex: 2, resultCount: 5 }]);
|
||||
expect(calls.disposeSubscription).toBe(1);
|
||||
});
|
||||
|
||||
it("keeps find methods inert before the search addon is mounted", () => {
|
||||
const runtime = new TerminalEmulatorRuntime();
|
||||
const listener = vi.fn();
|
||||
|
||||
expect(runtime.findNext({ query: "needle" })).toBe(false);
|
||||
expect(runtime.findPrevious({ query: "needle" })).toBe(false);
|
||||
runtime.clearFindDecorations();
|
||||
runtime.onFindResultsChanged(listener)();
|
||||
|
||||
expect(listener).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,12 +2,11 @@ import { ClipboardAddon } from "@xterm/addon-clipboard";
|
||||
import { FitAddon } from "@xterm/addon-fit";
|
||||
import { ImageAddon } from "@xterm/addon-image";
|
||||
import { SearchAddon } from "@xterm/addon-search";
|
||||
import type { ISearchOptions, ISearchResultChangeEvent } from "@xterm/addon-search";
|
||||
import { Unicode11Addon } from "@xterm/addon-unicode11";
|
||||
import { WebLinksAddon } from "@xterm/addon-web-links";
|
||||
import { WebglAddon } from "@xterm/addon-webgl";
|
||||
import { LigaturesAddon } from "@xterm/addon-ligatures/lib/addon-ligatures.mjs";
|
||||
import { Terminal, type IDisposable, type ITheme } from "@xterm/xterm";
|
||||
import { Terminal, type ITheme } from "@xterm/xterm";
|
||||
import type { TerminalState } from "@getpaseo/protocol/messages";
|
||||
import {
|
||||
type TerminalInputModeState,
|
||||
@@ -62,12 +61,6 @@ export interface TerminalEmulatorRuntimeCallbacks {
|
||||
onInputModeChange?: (state: TerminalInputModeState) => Promise<void> | void;
|
||||
}
|
||||
|
||||
export type TerminalFindResultChangeEvent = ISearchResultChangeEvent;
|
||||
|
||||
export interface TerminalFindQueryInput {
|
||||
query: string;
|
||||
}
|
||||
|
||||
interface TerminalEmulatorRuntimeDisposables {
|
||||
disposeInput: () => void;
|
||||
disconnectResizeObserver: () => void;
|
||||
@@ -135,16 +128,6 @@ function prependTerminalOutput(
|
||||
return output;
|
||||
}
|
||||
|
||||
const TERMINAL_FIND_SEARCH_OPTIONS: ISearchOptions = {
|
||||
caseSensitive: false,
|
||||
decorations: {
|
||||
matchBackground: "#facc15",
|
||||
matchOverviewRuler: "#facc15",
|
||||
activeMatchBackground: "#38bdf8",
|
||||
activeMatchColorOverviewRuler: "#38bdf8",
|
||||
},
|
||||
};
|
||||
|
||||
const DEFAULT_TERMINAL_FONT_FAMILY = [
|
||||
// Prefer common developer fonts, with Nerd Font variants for prompt/TUI glyphs.
|
||||
"JetBrains Mono",
|
||||
@@ -181,7 +164,6 @@ export class TerminalEmulatorRuntime {
|
||||
};
|
||||
private terminal: Terminal | null = null;
|
||||
private fitAddon: FitAddon | null = null;
|
||||
private searchAddon: SearchAddon | null = null;
|
||||
private fitAndEmitResize: ((force: boolean) => void) | null = null;
|
||||
private lastSize: { rows: number; cols: number } | null = null;
|
||||
private cleanup: (() => void) | null = null;
|
||||
@@ -241,7 +223,6 @@ export class TerminalEmulatorRuntime {
|
||||
theme: withOverviewRulerBorderHidden(input.theme),
|
||||
});
|
||||
const fitAddon = new FitAddon();
|
||||
const searchAddon = new SearchAddon({ highlightLimit: 20_000 });
|
||||
const unicode11Addon = new Unicode11Addon();
|
||||
let webglAddon: WebglAddon | null = null;
|
||||
let imageAddon: ImageAddon | null = null;
|
||||
@@ -264,7 +245,7 @@ export class TerminalEmulatorRuntime {
|
||||
},
|
||||
}),
|
||||
);
|
||||
terminal.loadAddon(searchAddon);
|
||||
terminal.loadAddon(new SearchAddon({ highlightLimit: 20_000 }));
|
||||
terminal.loadAddon(new ClipboardAddon());
|
||||
try {
|
||||
terminal.loadAddon(new LigaturesAddon());
|
||||
@@ -353,7 +334,6 @@ export class TerminalEmulatorRuntime {
|
||||
|
||||
this.terminal = terminal;
|
||||
this.fitAddon = fitAddon;
|
||||
this.searchAddon = searchAddon;
|
||||
window.__paseoTerminal = terminal;
|
||||
|
||||
const fitAndEmitResize = (force: boolean): void => {
|
||||
@@ -707,25 +687,6 @@ export class TerminalEmulatorRuntime {
|
||||
this.terminal?.blur();
|
||||
}
|
||||
|
||||
findNext(input: TerminalFindQueryInput): boolean {
|
||||
return this.searchAddon?.findNext(input.query, TERMINAL_FIND_SEARCH_OPTIONS) ?? false;
|
||||
}
|
||||
|
||||
findPrevious(input: TerminalFindQueryInput): boolean {
|
||||
return this.searchAddon?.findPrevious(input.query, TERMINAL_FIND_SEARCH_OPTIONS) ?? false;
|
||||
}
|
||||
|
||||
clearFindDecorations(): void {
|
||||
this.searchAddon?.clearDecorations();
|
||||
}
|
||||
|
||||
onFindResultsChanged(listener: (event: TerminalFindResultChangeEvent) => void): () => void {
|
||||
const disposable: IDisposable | undefined = this.searchAddon?.onDidChangeResults(listener);
|
||||
return () => {
|
||||
disposable?.dispose();
|
||||
};
|
||||
}
|
||||
|
||||
private refreshVisibleRows(): void {
|
||||
const terminal = this.terminal;
|
||||
if (!terminal || terminal.rows <= 0) {
|
||||
@@ -778,7 +739,6 @@ export class TerminalEmulatorRuntime {
|
||||
}
|
||||
this.terminal = null;
|
||||
this.fitAddon = null;
|
||||
this.searchAddon = null;
|
||||
this.fitAndEmitResize = null;
|
||||
this.lastSize = null;
|
||||
this.themeBackgroundElements = [];
|
||||
|
||||
@@ -547,153 +547,6 @@ describe("processTimelineResponse", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("hydrates a fetched in-progress tool call as one item and streams the next update on top", () => {
|
||||
const fetched = processTimelineResponse({
|
||||
...baseTimelineInput,
|
||||
isInitializing: true,
|
||||
hasActiveInitDeferred: true,
|
||||
initRequestDirection: "tail",
|
||||
payload: {
|
||||
...baseTimelineInput.payload,
|
||||
direction: "tail",
|
||||
epoch: "epoch-1",
|
||||
startCursor: { seq: 10 },
|
||||
endCursor: { seq: 250 },
|
||||
entries: [
|
||||
{
|
||||
...makeToolCallTimelineEntry(10, "call-1", "running", {
|
||||
type: "read",
|
||||
filePath: "/tmp/example.ts",
|
||||
}),
|
||||
seqEnd: 250,
|
||||
sourceSeqRanges: [
|
||||
{ startSeq: 10, endSeq: 10 },
|
||||
{ startSeq: 250, endSeq: 250 },
|
||||
],
|
||||
collapsed: ["tool_lifecycle"],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
expect(getAgentToolCalls(fetched.tail)).toHaveLength(1);
|
||||
expect(fetched.cursor).toEqual({ epoch: "epoch-1", startSeq: 10, endSeq: 250 });
|
||||
|
||||
const streamed = processAgentStreamEvent({
|
||||
...baseStreamInput,
|
||||
currentTail: fetched.tail,
|
||||
currentHead: fetched.head,
|
||||
currentCursor: fetched.cursor ?? undefined,
|
||||
seq: 251,
|
||||
epoch: "epoch-1",
|
||||
event: {
|
||||
type: "timeline",
|
||||
provider: "claude",
|
||||
item: {
|
||||
type: "tool_call",
|
||||
callId: "call-1",
|
||||
name: "Read",
|
||||
status: "completed",
|
||||
detail: {
|
||||
type: "read",
|
||||
filePath: "/tmp/example.ts",
|
||||
},
|
||||
error: null,
|
||||
},
|
||||
} as AgentStreamEventPayload,
|
||||
});
|
||||
|
||||
const tools = getAgentToolCalls(streamed.tail);
|
||||
expect(tools).toHaveLength(1);
|
||||
expect(tools[0]?.payload.data.status).toBe("completed");
|
||||
expect(streamed.cursor).toEqual({ epoch: "epoch-1", startSeq: 10, endSeq: 251 });
|
||||
});
|
||||
|
||||
it("accepts an after-page projected tool update whose item started before the cursor", () => {
|
||||
const existingCursor: TimelineCursor = {
|
||||
epoch: "epoch-1",
|
||||
startSeq: 10,
|
||||
endSeq: 249,
|
||||
};
|
||||
const runningTool = hydrateStreamState(
|
||||
[
|
||||
{
|
||||
event: makeToolCallTimelineEvent("call-1"),
|
||||
timestamp: new Date(1010),
|
||||
},
|
||||
],
|
||||
{ source: "canonical" },
|
||||
);
|
||||
|
||||
const result = processTimelineResponse({
|
||||
...baseTimelineInput,
|
||||
currentTail: runningTool,
|
||||
currentCursor: existingCursor,
|
||||
payload: {
|
||||
...baseTimelineInput.payload,
|
||||
direction: "after",
|
||||
epoch: "epoch-1",
|
||||
startCursor: { seq: 250 },
|
||||
endCursor: { seq: 250 },
|
||||
entries: [
|
||||
{
|
||||
...makeToolCallTimelineEntry(10, "call-1", "completed", {
|
||||
type: "read",
|
||||
filePath: "/tmp/example.ts",
|
||||
}),
|
||||
seqEnd: 250,
|
||||
sourceSeqRanges: [
|
||||
{ startSeq: 10, endSeq: 10 },
|
||||
{ startSeq: 250, endSeq: 250 },
|
||||
],
|
||||
collapsed: ["tool_lifecycle"],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const catchUp = result.sideEffects.find((effect) => effect.type === "catch_up");
|
||||
const tools = getAgentToolCalls(result.tail);
|
||||
expect(catchUp).toBeUndefined();
|
||||
expect(tools).toHaveLength(1);
|
||||
expect(tools[0]?.payload.data.status).toBe("completed");
|
||||
expect(result.cursor).toEqual({ epoch: "epoch-1", startSeq: 10, endSeq: 250 });
|
||||
});
|
||||
|
||||
it("replaces an active assistant head when after-page returns a full projected assistant item", () => {
|
||||
const existingCursor: TimelineCursor = {
|
||||
epoch: "epoch-1",
|
||||
startSeq: 1,
|
||||
endSeq: 3,
|
||||
};
|
||||
const currentHead = [makeAssistantItem("ABC")];
|
||||
|
||||
const result = processTimelineResponse({
|
||||
...baseTimelineInput,
|
||||
currentHead,
|
||||
currentCursor: existingCursor,
|
||||
payload: {
|
||||
...baseTimelineInput.payload,
|
||||
direction: "after",
|
||||
epoch: "epoch-1",
|
||||
startCursor: { seq: 4 },
|
||||
endCursor: { seq: 5 },
|
||||
entries: [
|
||||
{
|
||||
...makeTimelineEntry(1, "ABCDE"),
|
||||
seqEnd: 5,
|
||||
sourceSeqRanges: [{ startSeq: 1, endSeq: 5 }],
|
||||
collapsed: ["assistant_merge"],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
expect(getAssistantTexts(result.tail)).toEqual([]);
|
||||
expect(getAssistantTexts(result.head)).toEqual(["ABCDE"]);
|
||||
expect(result.cursor).toEqual({ epoch: "epoch-1", startSeq: 1, endSeq: 5 });
|
||||
});
|
||||
|
||||
it("detects gap and emits catch-up side effect", () => {
|
||||
const existingCursor: TimelineCursor = {
|
||||
epoch: "epoch-1",
|
||||
|
||||
@@ -53,16 +53,9 @@ type SessionTimelineSeqCursor =
|
||||
|
||||
type SessionTimelineSeqDecision = "accept" | "drop_stale" | "drop_epoch" | "gap" | "init";
|
||||
|
||||
interface TimelineSeqRange {
|
||||
startSeq: number;
|
||||
endSeq: number;
|
||||
}
|
||||
|
||||
interface TimelineResponseEntry {
|
||||
seqStart: number;
|
||||
seqEnd: number;
|
||||
sourceSeqRanges?: TimelineSeqRange[];
|
||||
collapsed?: string[];
|
||||
provider: string;
|
||||
item: Record<string, unknown>;
|
||||
timestamp: string;
|
||||
@@ -103,7 +96,6 @@ export interface ProcessTimelineResponseOutput {
|
||||
interface TimelineUnit {
|
||||
seq: number;
|
||||
seqEnd: number;
|
||||
sourceSeqRanges: TimelineSeqRange[];
|
||||
event: AgentStreamEventPayload;
|
||||
timestamp: Date;
|
||||
}
|
||||
@@ -384,56 +376,44 @@ function acceptIncrementalTimelineUnits(args: {
|
||||
currentCursor: TimelineCursor | undefined;
|
||||
}): IncrementalAcceptResult {
|
||||
const { timelineUnits, payload, currentCursor } = args;
|
||||
const firstUnit = timelineUnits[0];
|
||||
const lastUnit = timelineUnits[timelineUnits.length - 1];
|
||||
const responseStartSeq = payload.startCursor?.seq ?? firstUnit?.seq;
|
||||
const responseEndSeq = payload.endCursor?.seq ?? lastUnit?.seqEnd;
|
||||
const acceptedUnits: TimelineUnit[] = [];
|
||||
let cursor: TimelineCursor | undefined = currentCursor;
|
||||
let gapCursor: { epoch: string; endSeq: number } | null = null;
|
||||
|
||||
if (responseStartSeq === undefined || responseEndSeq === undefined) {
|
||||
return { acceptedUnits: [], cursor: currentCursor, gapCursor: null };
|
||||
for (const unit of timelineUnits) {
|
||||
const decision: SessionTimelineSeqDecision = classifySessionTimelineSeq({
|
||||
cursor: cursor ? { epoch: cursor.epoch, endSeq: cursor.endSeq } : null,
|
||||
epoch: payload.epoch,
|
||||
seq: unit.seq,
|
||||
});
|
||||
|
||||
if (decision === "gap") {
|
||||
gapCursor = cursor ? { epoch: cursor.epoch, endSeq: cursor.endSeq } : null;
|
||||
break;
|
||||
}
|
||||
if (decision === "drop_stale") {
|
||||
if (cursor && unit.seqEnd > cursor.endSeq) {
|
||||
gapCursor = { epoch: cursor.epoch, endSeq: cursor.endSeq };
|
||||
break;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
if (decision === "drop_epoch") {
|
||||
continue;
|
||||
}
|
||||
|
||||
acceptedUnits.push(unit);
|
||||
if (decision === "init") {
|
||||
cursor = { epoch: payload.epoch, startSeq: unit.seq, endSeq: unit.seqEnd };
|
||||
continue;
|
||||
}
|
||||
if (!cursor) {
|
||||
continue;
|
||||
}
|
||||
cursor = { ...cursor, endSeq: unit.seqEnd };
|
||||
}
|
||||
|
||||
if (!currentCursor) {
|
||||
return {
|
||||
acceptedUnits: timelineUnits,
|
||||
cursor: { epoch: payload.epoch, startSeq: responseStartSeq, endSeq: responseEndSeq },
|
||||
gapCursor: null,
|
||||
};
|
||||
}
|
||||
|
||||
if (currentCursor.epoch !== payload.epoch) {
|
||||
return { acceptedUnits: [], cursor: currentCursor, gapCursor: null };
|
||||
}
|
||||
|
||||
if (
|
||||
(!payload.startCursor || !payload.endCursor) &&
|
||||
responseStartSeq <= currentCursor.endSeq &&
|
||||
responseEndSeq > currentCursor.endSeq
|
||||
) {
|
||||
return {
|
||||
acceptedUnits: [],
|
||||
cursor: currentCursor,
|
||||
gapCursor: { epoch: currentCursor.epoch, endSeq: currentCursor.endSeq },
|
||||
};
|
||||
}
|
||||
|
||||
if (responseEndSeq <= currentCursor.endSeq) {
|
||||
return { acceptedUnits: [], cursor: currentCursor, gapCursor: null };
|
||||
}
|
||||
|
||||
if (responseStartSeq > currentCursor.endSeq + 1) {
|
||||
return {
|
||||
acceptedUnits: [],
|
||||
cursor: currentCursor,
|
||||
gapCursor: { epoch: currentCursor.epoch, endSeq: currentCursor.endSeq },
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
acceptedUnits: timelineUnits,
|
||||
cursor: { ...currentCursor, endSeq: responseEndSeq },
|
||||
gapCursor: null,
|
||||
};
|
||||
return { acceptedUnits, cursor, gapCursor };
|
||||
}
|
||||
|
||||
function acceptOlderTimelineUnits(args: {
|
||||
@@ -446,21 +426,16 @@ function acceptOlderTimelineUnits(args: {
|
||||
return { acceptedUnits: [], cursor: currentCursor, gapCursor: null };
|
||||
}
|
||||
|
||||
const firstUnit = timelineUnits[0];
|
||||
const lastUnit = timelineUnits[timelineUnits.length - 1];
|
||||
const responseStartSeq = payload.startCursor?.seq ?? firstUnit?.seq;
|
||||
const responseEndSeq = payload.endCursor?.seq ?? lastUnit?.seqEnd;
|
||||
if (
|
||||
responseStartSeq === undefined ||
|
||||
responseEndSeq === undefined ||
|
||||
responseEndSeq >= currentCursor.startSeq
|
||||
) {
|
||||
return { acceptedUnits: [], cursor: currentCursor, gapCursor: null };
|
||||
const acceptedUnits = timelineUnits.filter((unit) => unit.seqEnd < currentCursor.startSeq);
|
||||
if (acceptedUnits.length === 0) {
|
||||
return { acceptedUnits, cursor: currentCursor, gapCursor: null };
|
||||
}
|
||||
|
||||
const firstAccepted = acceptedUnits[0];
|
||||
const startSeq = payload.startCursor?.seq ?? firstAccepted?.seq ?? currentCursor.startSeq;
|
||||
return {
|
||||
acceptedUnits: timelineUnits,
|
||||
cursor: { ...currentCursor, startSeq: responseStartSeq },
|
||||
acceptedUnits,
|
||||
cursor: { ...currentCursor, startSeq },
|
||||
gapCursor: null,
|
||||
};
|
||||
}
|
||||
@@ -505,32 +480,6 @@ function mergePrependedCanonicalTail(olderTail: StreamItem[], currentTail: Strea
|
||||
];
|
||||
}
|
||||
|
||||
function replaceLiveAssistantWithProjectedText(params: {
|
||||
head: StreamItem[];
|
||||
event: AgentStreamEventPayload;
|
||||
timestamp: Date;
|
||||
}): StreamItem[] | null {
|
||||
const { head, event, timestamp } = params;
|
||||
if (event.type !== "timeline" || event.item.type !== "assistant_message") {
|
||||
return null;
|
||||
}
|
||||
const index = head.findLastIndex((item) => item.kind === "assistant_message");
|
||||
const current = head[index];
|
||||
if (!current || current.kind !== "assistant_message") {
|
||||
return null;
|
||||
}
|
||||
if (!event.item.text.startsWith(current.text)) {
|
||||
return null;
|
||||
}
|
||||
const next = [...head];
|
||||
next[index] = {
|
||||
...current,
|
||||
text: event.item.text,
|
||||
timestamp,
|
||||
};
|
||||
return next;
|
||||
}
|
||||
|
||||
function applyTimelineIncrementalPath(args: {
|
||||
timelineUnits: TimelineUnit[];
|
||||
payload: ProcessTimelineResponseInput["payload"];
|
||||
@@ -574,15 +523,6 @@ function applyTimelineIncrementalPath(args: {
|
||||
nextTail = mergePrependedCanonicalTail(olderTail, currentTail);
|
||||
} else if (currentHead.length > 0) {
|
||||
for (const { event, timestamp } of acceptedUnits) {
|
||||
const replacedHead = replaceLiveAssistantWithProjectedText({
|
||||
head: nextHead,
|
||||
event,
|
||||
timestamp,
|
||||
});
|
||||
if (replacedHead) {
|
||||
nextHead = replacedHead;
|
||||
continue;
|
||||
}
|
||||
const applied = applyStreamEvent({
|
||||
tail: nextTail,
|
||||
head: nextHead,
|
||||
@@ -657,10 +597,6 @@ export function processTimelineResponse(
|
||||
const timelineUnits = payload.entries.map((entry) => ({
|
||||
seq: entry.seqStart,
|
||||
seqEnd: entry.seqEnd,
|
||||
sourceSeqRanges:
|
||||
entry.sourceSeqRanges && entry.sourceSeqRanges.length > 0
|
||||
? entry.sourceSeqRanges
|
||||
: [{ startSeq: entry.seqStart, endSeq: entry.seqEnd }],
|
||||
event: {
|
||||
type: "timeline",
|
||||
provider: entry.provider,
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
// Count is projected timeline items, not delta chunks. Fetch responses never return
|
||||
// tool lifecycle deltas; `sourceSeqRanges` maps projected items back to source seqs.
|
||||
// Count is projected timeline items, not delta chunks. The daemon's `selectTimelineWindowByProjectedLimit` interprets this against canonical entries: `assistant_merge`, `reasoning_merge`, and `tool_lifecycle`. Do not confuse this with raw stream deltas.
|
||||
export const TIMELINE_FETCH_PAGE_SIZE = 100;
|
||||
|
||||
@@ -18,7 +18,7 @@ describe("timeline sync planning", () => {
|
||||
expect(plan).toEqual({
|
||||
direction: "tail",
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
});
|
||||
});
|
||||
|
||||
@@ -32,7 +32,7 @@ describe("timeline sync planning", () => {
|
||||
direction: "after",
|
||||
cursor: { epoch: "epoch-1", seq: 42 },
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
});
|
||||
});
|
||||
|
||||
@@ -45,7 +45,7 @@ describe("timeline sync planning", () => {
|
||||
direction: "after",
|
||||
cursor: { epoch: "epoch-1", seq: 100 },
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
});
|
||||
});
|
||||
|
||||
@@ -55,7 +55,7 @@ describe("timeline sync planning", () => {
|
||||
expect(plan).toEqual({
|
||||
direction: "tail",
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
});
|
||||
});
|
||||
|
||||
@@ -66,7 +66,7 @@ describe("timeline sync planning", () => {
|
||||
direction: "before",
|
||||
cursor: { epoch: "epoch-1", seq: 25 },
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
});
|
||||
});
|
||||
|
||||
@@ -82,7 +82,7 @@ describe("timeline sync planning", () => {
|
||||
direction: "after",
|
||||
cursor: { epoch: "epoch-1", seq: 200 },
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -11,39 +11,39 @@ export interface AgentTimelineCursorRange {
|
||||
endSeq: number;
|
||||
}
|
||||
|
||||
export interface ProjectedTimelineTailFetchPlan {
|
||||
export interface CanonicalTimelineTailFetchPlan {
|
||||
direction: "tail";
|
||||
limit: number;
|
||||
projection: "projected";
|
||||
projection: "canonical";
|
||||
}
|
||||
|
||||
export interface ProjectedTimelineAfterFetchPlan {
|
||||
export interface CanonicalTimelineAfterFetchPlan {
|
||||
direction: "after";
|
||||
cursor: TimelineSyncCursor;
|
||||
limit: number;
|
||||
projection: "projected";
|
||||
projection: "canonical";
|
||||
}
|
||||
|
||||
export interface ProjectedTimelineBeforeFetchPlan {
|
||||
export interface CanonicalTimelineBeforeFetchPlan {
|
||||
direction: "before";
|
||||
cursor: TimelineSyncCursor;
|
||||
limit: number;
|
||||
projection: "projected";
|
||||
projection: "canonical";
|
||||
}
|
||||
|
||||
export type ProjectedTimelineFetchPlan =
|
||||
| ProjectedTimelineTailFetchPlan
|
||||
| ProjectedTimelineAfterFetchPlan
|
||||
| ProjectedTimelineBeforeFetchPlan;
|
||||
export type CanonicalTimelineFetchPlan =
|
||||
| CanonicalTimelineTailFetchPlan
|
||||
| CanonicalTimelineAfterFetchPlan
|
||||
| CanonicalTimelineBeforeFetchPlan;
|
||||
|
||||
export type ProjectedTimelineForwardFetchPlan =
|
||||
| ProjectedTimelineTailFetchPlan
|
||||
| ProjectedTimelineAfterFetchPlan;
|
||||
export type CanonicalTimelineForwardFetchPlan =
|
||||
| CanonicalTimelineTailFetchPlan
|
||||
| CanonicalTimelineAfterFetchPlan;
|
||||
|
||||
export function planInitialAgentTimelineSync(input: {
|
||||
cursor: AgentTimelineCursorRange | undefined;
|
||||
hasAuthoritativeHistory: boolean;
|
||||
}): ProjectedTimelineForwardFetchPlan {
|
||||
}): CanonicalTimelineForwardFetchPlan {
|
||||
if (input.hasAuthoritativeHistory && input.cursor) {
|
||||
return planTimelineCatchUpAfter({ epoch: input.cursor.epoch, seq: input.cursor.endSeq });
|
||||
}
|
||||
@@ -53,7 +53,7 @@ export function planInitialAgentTimelineSync(input: {
|
||||
|
||||
export function planResumeTimelineSync(input: {
|
||||
cursor: AgentTimelineCursorRange | undefined;
|
||||
}): ProjectedTimelineForwardFetchPlan {
|
||||
}): CanonicalTimelineForwardFetchPlan {
|
||||
if (input.cursor) {
|
||||
return planTimelineCatchUpAfter({ epoch: input.cursor.epoch, seq: input.cursor.endSeq });
|
||||
}
|
||||
@@ -66,7 +66,7 @@ export function planTimelineCatchUpAfter(cursor: TimelineSyncCursor) {
|
||||
direction: "after",
|
||||
cursor,
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
} as const;
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@ export function planTimelineTailFetch() {
|
||||
return {
|
||||
direction: "tail",
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
} as const;
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@ export function planTimelineOlderFetch(cursor: TimelineSyncCursor) {
|
||||
direction: "before",
|
||||
cursor,
|
||||
limit: TIMELINE_FETCH_PAGE_SIZE,
|
||||
projection: "projected",
|
||||
projection: "canonical",
|
||||
} as const;
|
||||
}
|
||||
|
||||
@@ -92,7 +92,7 @@ export function planTimelineCatchUpFollowUp(input: {
|
||||
hasNewer: boolean;
|
||||
endCursor: TimelineSyncCursor | null;
|
||||
error: string | null;
|
||||
}): ProjectedTimelineAfterFetchPlan | null {
|
||||
}): CanonicalTimelineAfterFetchPlan | null {
|
||||
if (input.error || input.direction !== "after" || !input.hasNewer || !input.endCursor) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -765,6 +765,52 @@ describe("stream reducer canonical tool calls", () => {
|
||||
assert.strictEqual(message.timestamp.getTime(), optimisticTimestamp.getTime());
|
||||
});
|
||||
|
||||
it("preserves optimistic steering deliveryHint when authoritative user message arrives", () => {
|
||||
const messageId = "msg-user-steering";
|
||||
const initialState: StreamItem[] = [
|
||||
{
|
||||
kind: "user_message",
|
||||
id: messageId,
|
||||
text: "Steer to a different approach",
|
||||
timestamp: new Date("2025-01-01T11:10:00Z"),
|
||||
deliveryHint: "steering",
|
||||
},
|
||||
];
|
||||
const event: AgentStreamEventPayload = {
|
||||
type: "timeline",
|
||||
provider: "claude",
|
||||
item: {
|
||||
type: "user_message",
|
||||
text: "Steer to a different approach",
|
||||
messageId,
|
||||
},
|
||||
};
|
||||
|
||||
const state = reduceStreamUpdate(initialState, event, new Date("2025-01-01T11:10:01Z"));
|
||||
const message = state.find((item) => item.kind === "user_message");
|
||||
|
||||
assert.ok(message);
|
||||
assert.strictEqual(message.deliveryHint, "steering");
|
||||
});
|
||||
|
||||
it("does not invent a deliveryHint for canonical user messages without prior optimistic state", () => {
|
||||
const event: AgentStreamEventPayload = {
|
||||
type: "timeline",
|
||||
provider: "claude",
|
||||
item: {
|
||||
type: "user_message",
|
||||
text: "Hello there",
|
||||
messageId: "canonical-only",
|
||||
},
|
||||
};
|
||||
|
||||
const state = reduceStreamUpdate([], event, new Date("2025-01-01T11:11:00Z"));
|
||||
const message = state.find((item) => item.kind === "user_message");
|
||||
|
||||
assert.ok(message);
|
||||
assert.strictEqual(message.deliveryHint, undefined);
|
||||
});
|
||||
|
||||
it("keeps canonical assistant/user/assistant order during replay", () => {
|
||||
const state: StreamItem[] = [
|
||||
{
|
||||
|
||||
@@ -54,6 +54,8 @@ export type StreamItem =
|
||||
|
||||
export type UserMessageImageAttachment = AttachmentMetadata;
|
||||
|
||||
export type UserMessageDeliveryHint = "steering";
|
||||
|
||||
export interface UserMessageItem {
|
||||
kind: "user_message";
|
||||
id: string;
|
||||
@@ -62,6 +64,13 @@ export interface UserMessageItem {
|
||||
optimistic?: true;
|
||||
images?: UserMessageImageAttachment[];
|
||||
attachments?: AgentAttachment[];
|
||||
/**
|
||||
* Local-only marker set when this user message was sent optimistically
|
||||
* while the agent was running and the provider supports steering. Never
|
||||
* sent or received over the wire — preserved across canonical replays so
|
||||
* the UI can keep showing the marker.
|
||||
*/
|
||||
deliveryHint?: UserMessageDeliveryHint;
|
||||
}
|
||||
|
||||
export interface OptimisticUserMessageInput {
|
||||
@@ -70,6 +79,7 @@ export interface OptimisticUserMessageInput {
|
||||
timestamp: Date;
|
||||
images?: UserMessageImageAttachment[];
|
||||
attachments?: AgentAttachment[];
|
||||
deliveryHint?: UserMessageDeliveryHint;
|
||||
}
|
||||
|
||||
export type OptimisticUserMessagePlacement = "tail" | "active-head";
|
||||
@@ -213,6 +223,7 @@ function buildUserMessageItem(input: {
|
||||
...(input.optimistic.attachments && input.optimistic.attachments.length > 0
|
||||
? { attachments: input.optimistic.attachments }
|
||||
: {}),
|
||||
...(input.optimistic.deliveryHint ? { deliveryHint: input.optimistic.deliveryHint } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -235,6 +246,7 @@ export function buildOptimisticUserMessage(input: OptimisticUserMessageInput): U
|
||||
...(input.attachments && input.attachments.length > 0
|
||||
? { attachments: input.attachments }
|
||||
: {}),
|
||||
...(input.deliveryHint ? { deliveryHint: input.deliveryHint } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -390,14 +390,6 @@ export function isSettingsSectionSlug(value: string): value is SettingsSectionSl
|
||||
return (SETTINGS_SECTION_SLUGS as readonly string[]).includes(value);
|
||||
}
|
||||
|
||||
export const HOST_SECTION_SLUGS = ["connections", "orchestration", "providers", "daemon"] as const;
|
||||
|
||||
export type HostSectionSlug = (typeof HOST_SECTION_SLUGS)[number];
|
||||
|
||||
export function isHostSectionSlug(value: string): value is HostSectionSlug {
|
||||
return (HOST_SECTION_SLUGS as readonly string[]).includes(value);
|
||||
}
|
||||
|
||||
export function buildSettingsRoute() {
|
||||
return "/settings" as const;
|
||||
}
|
||||
@@ -414,14 +406,6 @@ export function buildSettingsHostRoute(serverId: string) {
|
||||
return `/settings/hosts/${encodeSegment(normalized)}` as const;
|
||||
}
|
||||
|
||||
export function buildSettingsHostSectionRoute(serverId: string, section: HostSectionSlug) {
|
||||
const normalized = trimNonEmpty(serverId);
|
||||
if (!normalized) {
|
||||
throw new Error("buildSettingsHostSectionRoute requires a non-empty serverId");
|
||||
}
|
||||
return `/settings/hosts/${encodeSegment(normalized)}/${section}` as const;
|
||||
}
|
||||
|
||||
export function buildProjectsSettingsRoute() {
|
||||
return "/settings/projects" as const;
|
||||
}
|
||||
|
||||
@@ -152,6 +152,7 @@ function createAgent(input: Partial<PaseoAgent> = {}): PaseoAgent {
|
||||
supportsRewindBoth: false,
|
||||
supportsRewindConversation: false,
|
||||
supportsRewindFiles: false,
|
||||
supportsSteering: false,
|
||||
supportsToolInvocations: true,
|
||||
},
|
||||
currentModeId: null,
|
||||
|
||||
@@ -1,71 +1,16 @@
|
||||
import { webContents as allWebContents, type WebContents } from "electron";
|
||||
|
||||
export const BROWSER_FOUND_IN_PAGE_EVENT = "paseo:event:browser-found-in-page";
|
||||
|
||||
const browserIdsByWebContentsId = new Map<number, string>();
|
||||
const webContentsIdsByBrowserId = new Map<string, number>();
|
||||
const ownerWebContentsIdsByBrowserId = new Map<string, number>();
|
||||
const activeFindBrowserIdsByOwnerWebContentsId = new Map<number, string>();
|
||||
const ownerFoundInPageListenerWebContentsIds = new Set<number>();
|
||||
let workspaceActiveBrowserId: string | null = null;
|
||||
|
||||
export function listRegisteredPaseoBrowserIds(): string[] {
|
||||
return Array.from(new Set(browserIdsByWebContentsId.values())).sort();
|
||||
}
|
||||
|
||||
function ensureOwnerFoundInPageListener(ownerContents: WebContents): void {
|
||||
if (ownerFoundInPageListenerWebContentsIds.has(ownerContents.id)) {
|
||||
return;
|
||||
}
|
||||
ownerFoundInPageListenerWebContentsIds.add(ownerContents.id);
|
||||
const handleFoundInPage = (_event: Electron.Event, result: Electron.Result): void => {
|
||||
const browserId = activeFindBrowserIdsByOwnerWebContentsId.get(ownerContents.id);
|
||||
if (!browserId || ownerContents.isDestroyed()) {
|
||||
return;
|
||||
}
|
||||
ownerContents.send(BROWSER_FOUND_IN_PAGE_EVENT, {
|
||||
browserId,
|
||||
requestId: result.requestId,
|
||||
activeMatchOrdinal: result.activeMatchOrdinal,
|
||||
matches: result.matches,
|
||||
finalUpdate: result.finalUpdate,
|
||||
});
|
||||
if (result.finalUpdate) {
|
||||
activeFindBrowserIdsByOwnerWebContentsId.delete(ownerContents.id);
|
||||
}
|
||||
};
|
||||
ownerContents.on("found-in-page", handleFoundInPage);
|
||||
ownerContents.once("destroyed", () => {
|
||||
ownerContents.removeListener("found-in-page", handleFoundInPage);
|
||||
ownerFoundInPageListenerWebContentsIds.delete(ownerContents.id);
|
||||
activeFindBrowserIdsByOwnerWebContentsId.delete(ownerContents.id);
|
||||
});
|
||||
}
|
||||
|
||||
export function registerPaseoBrowserWebContents(
|
||||
contents: WebContents,
|
||||
browserId: string,
|
||||
ownerContents: WebContents,
|
||||
): void {
|
||||
export function registerPaseoBrowserWebContents(contents: WebContents, browserId: string): void {
|
||||
browserIdsByWebContentsId.set(contents.id, browserId);
|
||||
webContentsIdsByBrowserId.set(browserId, contents.id);
|
||||
if (!ownerContents.isDestroyed()) {
|
||||
ownerWebContentsIdsByBrowserId.set(browserId, ownerContents.id);
|
||||
ensureOwnerFoundInPageListener(ownerContents);
|
||||
}
|
||||
contents.once("destroyed", () => {
|
||||
browserIdsByWebContentsId.delete(contents.id);
|
||||
if (webContentsIdsByBrowserId.get(browserId) === contents.id) {
|
||||
webContentsIdsByBrowserId.delete(browserId);
|
||||
const ownerContentsId = ownerWebContentsIdsByBrowserId.get(browserId);
|
||||
ownerWebContentsIdsByBrowserId.delete(browserId);
|
||||
if (
|
||||
ownerContentsId &&
|
||||
activeFindBrowserIdsByOwnerWebContentsId.get(ownerContentsId) === browserId
|
||||
) {
|
||||
activeFindBrowserIdsByOwnerWebContentsId.delete(ownerContentsId);
|
||||
}
|
||||
}
|
||||
if (workspaceActiveBrowserId === browserId) {
|
||||
workspaceActiveBrowserId = null;
|
||||
}
|
||||
@@ -84,35 +29,14 @@ export function setWorkspaceActivePaseoBrowserId(browserId: string | null): void
|
||||
}
|
||||
|
||||
export function getPaseoBrowserWebContents(browserId: string): WebContents | null {
|
||||
const contentsId = webContentsIdsByBrowserId.get(browserId);
|
||||
if (!contentsId) {
|
||||
return null;
|
||||
}
|
||||
const contents = allWebContents.fromId(contentsId);
|
||||
return contents && !contents.isDestroyed() ? contents : null;
|
||||
}
|
||||
|
||||
export function setActivePaseoBrowserFind(browserId: string): void {
|
||||
const ownerContentsId = ownerWebContentsIdsByBrowserId.get(browserId);
|
||||
if (!ownerContentsId) {
|
||||
return;
|
||||
}
|
||||
const ownerContents = allWebContents.fromId(ownerContentsId);
|
||||
if (!ownerContents || ownerContents.isDestroyed()) {
|
||||
return;
|
||||
}
|
||||
ensureOwnerFoundInPageListener(ownerContents);
|
||||
activeFindBrowserIdsByOwnerWebContentsId.set(ownerContents.id, browserId);
|
||||
}
|
||||
|
||||
export function clearActivePaseoBrowserFind(browserId: string): void {
|
||||
const ownerContentsId = ownerWebContentsIdsByBrowserId.get(browserId);
|
||||
if (!ownerContentsId) {
|
||||
return;
|
||||
}
|
||||
if (activeFindBrowserIdsByOwnerWebContentsId.get(ownerContentsId) === browserId) {
|
||||
activeFindBrowserIdsByOwnerWebContentsId.delete(ownerContentsId);
|
||||
for (const [contentsId, registeredBrowserId] of browserIdsByWebContentsId) {
|
||||
if (registeredBrowserId !== browserId) continue;
|
||||
const contents = allWebContents.fromId(contentsId);
|
||||
if (contents && !contents.isDestroyed()) {
|
||||
return contents;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function getWorkspaceActivePaseoBrowserWebContents(): WebContents | null {
|
||||
|
||||
@@ -33,12 +33,10 @@ import {
|
||||
import { registerOpenerHandlers } from "./features/opener.js";
|
||||
import { setupApplicationMenu } from "./features/menu.js";
|
||||
import {
|
||||
clearActivePaseoBrowserFind,
|
||||
getPaseoBrowserIdForWebContents,
|
||||
getPaseoBrowserWebContents,
|
||||
listRegisteredPaseoBrowserIds,
|
||||
registerPaseoBrowserWebContents,
|
||||
setActivePaseoBrowserFind,
|
||||
setWorkspaceActivePaseoBrowserId,
|
||||
} from "./features/browser-webviews.js";
|
||||
import { parseOpenProjectPathFromArgv } from "./open-project-routing.js";
|
||||
@@ -312,48 +310,6 @@ ipcMain.handle("paseo:browser:clear-partition", async (_event, browserId: unknow
|
||||
await session.fromPartition(partition).clearStorageData();
|
||||
});
|
||||
|
||||
ipcMain.handle(
|
||||
"paseo:browser:find-in-page",
|
||||
(_event, browserId: unknown, text: unknown, options: unknown): number | null => {
|
||||
if (typeof browserId !== "string" || typeof text !== "string" || text.length === 0) {
|
||||
return null;
|
||||
}
|
||||
const contents = getPaseoBrowserWebContents(browserId);
|
||||
if (!contents) {
|
||||
return null;
|
||||
}
|
||||
setActivePaseoBrowserFind(browserId);
|
||||
const inputOptions =
|
||||
options && typeof options === "object"
|
||||
? (options as { forward?: unknown; findNext?: unknown; matchCase?: unknown })
|
||||
: {};
|
||||
return contents.findInPage(text, {
|
||||
forward: inputOptions.forward !== false,
|
||||
findNext: inputOptions.findNext === true,
|
||||
matchCase: inputOptions.matchCase === true,
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
ipcMain.handle(
|
||||
"paseo:browser:stop-find-in-page",
|
||||
(_event, browserId: unknown, action: unknown): null => {
|
||||
if (typeof browserId !== "string") {
|
||||
return null;
|
||||
}
|
||||
if (
|
||||
action !== "clearSelection" &&
|
||||
action !== "keepSelection" &&
|
||||
action !== "activateSelection"
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
getPaseoBrowserWebContents(browserId)?.stopFindInPage(action);
|
||||
clearActivePaseoBrowserFind(browserId);
|
||||
return null;
|
||||
},
|
||||
);
|
||||
|
||||
protocol.registerSchemesAsPrivileged([
|
||||
{ scheme: APP_SCHEME, privileges: { standard: true, secure: true, supportFetchAPI: true } },
|
||||
]);
|
||||
@@ -475,7 +431,7 @@ async function createMainWindow(): Promise<void> {
|
||||
mainWindow.webContents.on("did-attach-webview", (_event, contents) => {
|
||||
const browserId = pendingBrowserWebviewIds.shift() ?? null;
|
||||
if (browserId) {
|
||||
registerPaseoBrowserWebContents(contents, browserId, mainWindow.webContents);
|
||||
registerPaseoBrowserWebContents(contents, browserId);
|
||||
log.info("[browser-webview] registered", {
|
||||
browserId,
|
||||
webContentsId: contents.id,
|
||||
|
||||
@@ -1,14 +1,6 @@
|
||||
import { contextBridge, ipcRenderer, webUtils } from "electron";
|
||||
|
||||
type EventHandler = (payload: unknown) => void;
|
||||
type BrowserFindAction = "clearSelection" | "keepSelection" | "activateSelection";
|
||||
|
||||
interface BrowserFoundInPageResult {
|
||||
requestId: number;
|
||||
activeMatchOrdinal: number;
|
||||
matches: number;
|
||||
finalUpdate: boolean;
|
||||
}
|
||||
|
||||
contextBridge.exposeInMainWorld("paseoDesktop", {
|
||||
platform: process.platform,
|
||||
@@ -77,31 +69,5 @@ contextBridge.exposeInMainWorld("paseoDesktop", {
|
||||
ipcRenderer.invoke("paseo:browser:open-devtools", browserId),
|
||||
clearPartition: (browserId: string) =>
|
||||
ipcRenderer.invoke("paseo:browser:clear-partition", browserId),
|
||||
findInPage: (
|
||||
browserId: string,
|
||||
text: string,
|
||||
options?: { forward?: boolean; findNext?: boolean; matchCase?: boolean },
|
||||
) => ipcRenderer.invoke("paseo:browser:find-in-page", browserId, text, options),
|
||||
stopFindInPage: (browserId: string, action: BrowserFindAction) =>
|
||||
ipcRenderer.invoke("paseo:browser:stop-find-in-page", browserId, action),
|
||||
onFoundInPage: (
|
||||
browserId: string,
|
||||
listener: (result: BrowserFoundInPageResult) => void,
|
||||
): (() => void) => {
|
||||
const ipcListener = (
|
||||
_ipcEvent: Electron.IpcRendererEvent,
|
||||
payload: BrowserFoundInPageResult & { browserId?: unknown },
|
||||
) => {
|
||||
if (payload?.browserId !== browserId) {
|
||||
return;
|
||||
}
|
||||
const { browserId: _browserId, ...result } = payload;
|
||||
listener(result);
|
||||
};
|
||||
ipcRenderer.on("paseo:event:browser-found-in-page", ipcListener);
|
||||
return () => {
|
||||
ipcRenderer.removeListener("paseo:event:browser-found-in-page", ipcListener);
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -125,6 +125,7 @@ export interface AgentCapabilityFlags {
|
||||
supportsRewindConversation?: boolean;
|
||||
supportsRewindFiles?: boolean;
|
||||
supportsRewindBoth?: boolean;
|
||||
supportsSteering?: boolean;
|
||||
}
|
||||
|
||||
export interface AgentPersistenceHandle {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import {
|
||||
AgentSnapshotPayloadSchema,
|
||||
GetProvidersSnapshotResponseMessageSchema,
|
||||
ProviderSnapshotEntrySchema,
|
||||
ProvidersSnapshotUpdateMessageSchema,
|
||||
@@ -16,6 +17,34 @@ describe("provider snapshot message schemas", () => {
|
||||
expect(parsed.enabled).toBe(true);
|
||||
});
|
||||
|
||||
test("defaults missing agent capability steering support to false", () => {
|
||||
const parsed = AgentSnapshotPayloadSchema.parse({
|
||||
id: "agent-1",
|
||||
provider: "codex",
|
||||
cwd: "/tmp/repo",
|
||||
model: null,
|
||||
createdAt: "2026-04-24T00:00:00.000Z",
|
||||
updatedAt: "2026-04-24T00:00:00.000Z",
|
||||
lastUserMessageAt: null,
|
||||
status: "idle",
|
||||
capabilities: {
|
||||
supportsStreaming: true,
|
||||
supportsSessionPersistence: true,
|
||||
supportsDynamicModes: false,
|
||||
supportsMcpServers: true,
|
||||
supportsReasoningStream: true,
|
||||
supportsToolInvocations: true,
|
||||
},
|
||||
currentModeId: null,
|
||||
availableModes: [],
|
||||
pendingPermissions: [],
|
||||
persistence: null,
|
||||
title: null,
|
||||
});
|
||||
|
||||
expect(parsed.capabilities.supportsSteering).toBe(false);
|
||||
});
|
||||
|
||||
test("preserves disabled provider snapshot entries", () => {
|
||||
const parsed = ProviderSnapshotEntrySchema.parse({
|
||||
provider: "claude",
|
||||
|
||||
@@ -251,6 +251,8 @@ const AgentCapabilityFlagsSchema: z.ZodType<AgentCapabilityFlags> = z.object({
|
||||
supportsRewindFiles: z.boolean().optional().default(false),
|
||||
// COMPAT(rewind): added in v0.1.X, drop when floor >= v0.1.X.
|
||||
supportsRewindBoth: z.boolean().optional().default(false),
|
||||
// COMPAT(steering): added in v0.1.X, drop when floor >= v0.1.X.
|
||||
supportsSteering: z.boolean().optional().default(false),
|
||||
});
|
||||
|
||||
const AgentUsageSchema: z.ZodType<AgentUsage> = z.object({
|
||||
|
||||
@@ -18,6 +18,7 @@ import type {
|
||||
AgentLaunchContext,
|
||||
AgentProvider,
|
||||
AgentPersistenceHandle,
|
||||
AgentPromptInput,
|
||||
AgentRunResult,
|
||||
AgentSession,
|
||||
AgentSessionConfig,
|
||||
@@ -3010,6 +3011,314 @@ test("replaceAgentRun does not emit idle or resolve waiters between interrupted
|
||||
unsubscribe();
|
||||
});
|
||||
|
||||
test("startAgentRun applies the replace-vs-stream policy in AgentManager", async () => {
|
||||
const workdir = mkdtempSync(join(tmpdir(), "agent-manager-start-policy-"));
|
||||
const storagePath = join(workdir, "agents");
|
||||
const storage = new AgentStorage(storagePath, logger);
|
||||
const manager = new AgentManager({
|
||||
clients: {
|
||||
codex: new TestAgentClient(),
|
||||
},
|
||||
registry: storage,
|
||||
logger,
|
||||
idFactory: () => "00000000-0000-4000-8000-000000000126",
|
||||
});
|
||||
|
||||
const snapshot = await manager.createAgent({
|
||||
provider: "codex",
|
||||
cwd: workdir,
|
||||
});
|
||||
|
||||
const replacementEvents = (async function* replacementEvents() {})();
|
||||
const streamEvents = (async function* streamEvents() {})();
|
||||
const hasInFlightRunSpy = vi.spyOn(manager, "hasInFlightRun").mockReturnValue(true);
|
||||
const replaceAgentRunSpy = vi
|
||||
.spyOn(manager, "replaceAgentRun")
|
||||
.mockReturnValue(replacementEvents);
|
||||
const streamAgentSpy = vi.spyOn(manager, "streamAgent").mockReturnValue(streamEvents);
|
||||
|
||||
const replacement = manager.startAgentRun(snapshot.id, "replace me", {
|
||||
replaceRunning: true,
|
||||
});
|
||||
|
||||
expect(replacement).toEqual({ outOfBand: false, events: replacementEvents });
|
||||
expect(hasInFlightRunSpy).toHaveBeenCalledWith(snapshot.id);
|
||||
expect(replaceAgentRunSpy).toHaveBeenCalledWith(snapshot.id, "replace me", undefined);
|
||||
expect(streamAgentSpy).not.toHaveBeenCalled();
|
||||
|
||||
replaceAgentRunSpy.mockClear();
|
||||
streamAgentSpy.mockClear();
|
||||
|
||||
const streamed = manager.startAgentRun(snapshot.id, "stream me", {
|
||||
replaceRunning: false,
|
||||
});
|
||||
|
||||
expect(streamed).toEqual({ outOfBand: false, events: streamEvents });
|
||||
expect(streamAgentSpy).toHaveBeenCalledWith(snapshot.id, "stream me", undefined);
|
||||
expect(replaceAgentRunSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("startAgentRun steers a running foreground turn when the provider supports steering", async () => {
|
||||
const workdir = mkdtempSync(join(tmpdir(), "agent-manager-steer-run-"));
|
||||
const storagePath = join(workdir, "agents");
|
||||
const storage = new AgentStorage(storagePath, logger);
|
||||
const allowFirstRunToEnd = deferred<void>();
|
||||
const steeredPrompts: AgentPromptInput[] = [];
|
||||
let capturedSession: SteerableSession | null = null;
|
||||
|
||||
const steeringCapabilities = {
|
||||
...TEST_CAPABILITIES,
|
||||
supportsSteering: true,
|
||||
} as const;
|
||||
|
||||
class SteerableSession implements AgentSession {
|
||||
readonly provider = "codex" as const;
|
||||
readonly capabilities = steeringCapabilities;
|
||||
readonly id = randomUUID();
|
||||
readonly interrupt = vi.fn(async () => undefined);
|
||||
private subscribers = new Set<(event: AgentStreamEvent) => void>();
|
||||
private turnIdCounter = 0;
|
||||
|
||||
async run(): Promise<AgentRunResult> {
|
||||
return {
|
||||
sessionId: this.id,
|
||||
finalText: "",
|
||||
timeline: [],
|
||||
};
|
||||
}
|
||||
|
||||
async startTurn(): Promise<{ turnId: string }> {
|
||||
const turnId = `turn-${++this.turnIdCounter}`;
|
||||
void (async () => {
|
||||
this.pushEvent({ type: "turn_started", provider: this.provider, turnId });
|
||||
await allowFirstRunToEnd.promise;
|
||||
this.pushEvent({ type: "turn_completed", provider: this.provider, turnId });
|
||||
})();
|
||||
return { turnId };
|
||||
}
|
||||
|
||||
async steerTurn(prompt: AgentPromptInput): Promise<void> {
|
||||
steeredPrompts.push(prompt);
|
||||
}
|
||||
|
||||
subscribe(callback: (event: AgentStreamEvent) => void): () => void {
|
||||
this.subscribers.add(callback);
|
||||
return () => {
|
||||
this.subscribers.delete(callback);
|
||||
};
|
||||
}
|
||||
|
||||
private pushEvent(event: AgentStreamEvent): void {
|
||||
for (const callback of this.subscribers) {
|
||||
callback(event);
|
||||
}
|
||||
}
|
||||
|
||||
async *streamHistory(): AsyncGenerator<AgentStreamEvent> {}
|
||||
async getRuntimeInfo() {
|
||||
return { provider: this.provider, sessionId: this.id, model: null, modeId: null };
|
||||
}
|
||||
async getAvailableModes() {
|
||||
return [];
|
||||
}
|
||||
async getCurrentMode() {
|
||||
return null;
|
||||
}
|
||||
async setMode(): Promise<void> {}
|
||||
getPendingPermissions() {
|
||||
return [];
|
||||
}
|
||||
async respondToPermission(): Promise<void> {}
|
||||
describePersistence() {
|
||||
return { provider: this.provider, sessionId: this.id };
|
||||
}
|
||||
async close(): Promise<void> {}
|
||||
}
|
||||
|
||||
class SteerableClient extends TestAgentClient {
|
||||
readonly capabilities = steeringCapabilities;
|
||||
|
||||
override async createSession(_config: AgentSessionConfig): Promise<AgentSession> {
|
||||
capturedSession = new SteerableSession();
|
||||
return capturedSession;
|
||||
}
|
||||
}
|
||||
|
||||
const manager = new AgentManager({
|
||||
clients: {
|
||||
codex: new SteerableClient(),
|
||||
},
|
||||
registry: storage,
|
||||
logger,
|
||||
idFactory: () => "00000000-0000-4000-8000-000000000127",
|
||||
});
|
||||
|
||||
const snapshot = await manager.createAgent({
|
||||
provider: "codex",
|
||||
cwd: workdir,
|
||||
});
|
||||
|
||||
const firstRun = manager.streamAgent(snapshot.id, "first run");
|
||||
const firstRunDrain = (async () => {
|
||||
for await (const _event of firstRun) {
|
||||
// Drain the original foreground run.
|
||||
}
|
||||
})();
|
||||
|
||||
await manager.waitForAgentRunStart(snapshot.id);
|
||||
|
||||
const steered = manager.startAgentRun(snapshot.id, "steer this", {
|
||||
replaceRunning: true,
|
||||
});
|
||||
expect(steered.outOfBand).toBe(false);
|
||||
if (!steered.outOfBand) {
|
||||
for await (const _event of steered.events) {
|
||||
// Steering produces no foreground stream events.
|
||||
}
|
||||
}
|
||||
|
||||
expect(steeredPrompts).toEqual(["steer this"]);
|
||||
expect(capturedSession?.interrupt).not.toHaveBeenCalled();
|
||||
expect(manager.getAgent(snapshot.id)?.lifecycle).toBe("running");
|
||||
|
||||
allowFirstRunToEnd.resolve();
|
||||
await firstRunDrain;
|
||||
});
|
||||
|
||||
test("startAgentRun replaces a running foreground turn when steering is unsupported", async () => {
|
||||
const workdir = mkdtempSync(join(tmpdir(), "agent-manager-unsupported-steer-run-"));
|
||||
const storagePath = join(workdir, "agents");
|
||||
const storage = new AgentStorage(storagePath, logger);
|
||||
const allowFirstRunToCancel = deferred<void>();
|
||||
const allowSecondRunToEnd = deferred<void>();
|
||||
let startTurnCount = 0;
|
||||
let interruptCount = 0;
|
||||
|
||||
class UnsupportedSteeringSession implements AgentSession {
|
||||
readonly provider = "codex" as const;
|
||||
readonly capabilities = TEST_CAPABILITIES;
|
||||
readonly id = randomUUID();
|
||||
private subscribers = new Set<(event: AgentStreamEvent) => void>();
|
||||
|
||||
async run(): Promise<AgentRunResult> {
|
||||
return {
|
||||
sessionId: this.id,
|
||||
finalText: "",
|
||||
timeline: [],
|
||||
};
|
||||
}
|
||||
|
||||
async startTurn(): Promise<{ turnId: string }> {
|
||||
startTurnCount += 1;
|
||||
const turnId = `turn-${startTurnCount}`;
|
||||
const turnNumber = startTurnCount;
|
||||
void (async () => {
|
||||
this.pushEvent({ type: "turn_started", provider: this.provider, turnId });
|
||||
if (turnNumber === 1) {
|
||||
await allowFirstRunToCancel.promise;
|
||||
this.pushEvent({
|
||||
type: "turn_canceled",
|
||||
provider: this.provider,
|
||||
reason: "interrupted",
|
||||
turnId,
|
||||
});
|
||||
return;
|
||||
}
|
||||
await allowSecondRunToEnd.promise;
|
||||
this.pushEvent({ type: "turn_completed", provider: this.provider, turnId });
|
||||
})();
|
||||
return { turnId };
|
||||
}
|
||||
|
||||
subscribe(callback: (event: AgentStreamEvent) => void): () => void {
|
||||
this.subscribers.add(callback);
|
||||
return () => {
|
||||
this.subscribers.delete(callback);
|
||||
};
|
||||
}
|
||||
|
||||
private pushEvent(event: AgentStreamEvent): void {
|
||||
for (const callback of this.subscribers) {
|
||||
callback(event);
|
||||
}
|
||||
}
|
||||
|
||||
async *streamHistory(): AsyncGenerator<AgentStreamEvent> {}
|
||||
async getRuntimeInfo() {
|
||||
return { provider: this.provider, sessionId: this.id, model: null, modeId: null };
|
||||
}
|
||||
async getAvailableModes() {
|
||||
return [];
|
||||
}
|
||||
async getCurrentMode() {
|
||||
return null;
|
||||
}
|
||||
async setMode(): Promise<void> {}
|
||||
getPendingPermissions() {
|
||||
return [];
|
||||
}
|
||||
async respondToPermission(): Promise<void> {}
|
||||
describePersistence() {
|
||||
return { provider: this.provider, sessionId: this.id };
|
||||
}
|
||||
async interrupt(): Promise<void> {
|
||||
interruptCount += 1;
|
||||
allowFirstRunToCancel.resolve();
|
||||
}
|
||||
async close(): Promise<void> {}
|
||||
}
|
||||
|
||||
class UnsupportedSteeringClient extends TestAgentClient {
|
||||
override async createSession(_config: AgentSessionConfig): Promise<AgentSession> {
|
||||
return new UnsupportedSteeringSession();
|
||||
}
|
||||
}
|
||||
|
||||
const manager = new AgentManager({
|
||||
clients: {
|
||||
codex: new UnsupportedSteeringClient(),
|
||||
},
|
||||
registry: storage,
|
||||
logger,
|
||||
idFactory: () => "00000000-0000-4000-8000-000000000128",
|
||||
});
|
||||
|
||||
const snapshot = await manager.createAgent({
|
||||
provider: "codex",
|
||||
cwd: workdir,
|
||||
});
|
||||
|
||||
const firstRun = manager.streamAgent(snapshot.id, "first run");
|
||||
const firstRunDrain = (async () => {
|
||||
for await (const _event of firstRun) {
|
||||
// Drain the original foreground run.
|
||||
}
|
||||
})();
|
||||
|
||||
await manager.waitForAgentRunStart(snapshot.id);
|
||||
|
||||
const replacement = manager.startAgentRun(snapshot.id, "replace this", {
|
||||
replaceRunning: true,
|
||||
});
|
||||
expect(replacement.outOfBand).toBe(false);
|
||||
const replacementDrain =
|
||||
replacement.outOfBand === false
|
||||
? (async () => {
|
||||
for await (const _event of replacement.events) {
|
||||
// Drain the replacement foreground run.
|
||||
}
|
||||
})()
|
||||
: Promise.resolve();
|
||||
|
||||
await manager.waitForAgentRunStart(snapshot.id);
|
||||
expect(interruptCount).toBe(1);
|
||||
expect(startTurnCount).toBe(2);
|
||||
|
||||
allowSecondRunToEnd.resolve();
|
||||
await firstRunDrain;
|
||||
await replacementDrain;
|
||||
});
|
||||
|
||||
test("replaceAgentRun stays running when a stale old terminal arrives before the replacement turn is current", async () => {
|
||||
const workdir = mkdtempSync(join(tmpdir(), "agent-manager-replace-stale-terminal-"));
|
||||
const storagePath = join(workdir, "agents");
|
||||
|
||||
@@ -205,6 +205,15 @@ export interface WaitForAgentStartOptions {
|
||||
signal?: AbortSignal;
|
||||
}
|
||||
|
||||
export interface StartAgentRunOptions {
|
||||
replaceRunning?: boolean;
|
||||
runOptions?: AgentRunOptions;
|
||||
}
|
||||
|
||||
export type StartAgentRunResult =
|
||||
| { outOfBand: true }
|
||||
| { outOfBand: false; events: AsyncGenerator<AgentStreamEvent> };
|
||||
|
||||
type AttentionState =
|
||||
| { requiresAttention: false }
|
||||
| {
|
||||
@@ -1482,6 +1491,55 @@ export class AgentManager {
|
||||
return true;
|
||||
}
|
||||
|
||||
startAgentRun(
|
||||
agentId: string,
|
||||
prompt: AgentPromptInput,
|
||||
options?: StartAgentRunOptions,
|
||||
): StartAgentRunResult {
|
||||
// Out-of-band commands (e.g. /goal pause) must run WITHOUT canceling an
|
||||
// in-flight turn. Keeping this policy here makes every send surface share
|
||||
// the same replace-vs-stream decision.
|
||||
if (this.tryRunOutOfBand(agentId, prompt)) {
|
||||
return { outOfBand: true };
|
||||
}
|
||||
|
||||
const shouldReplace = Boolean(options?.replaceRunning && this.hasInFlightRun(agentId));
|
||||
const runOptions = options?.runOptions;
|
||||
if (shouldReplace && this.canSteerActiveForegroundRun(agentId)) {
|
||||
const events = this.steerAgentRun(agentId, prompt, runOptions);
|
||||
return { outOfBand: false, events };
|
||||
}
|
||||
|
||||
const events = shouldReplace
|
||||
? this.replaceAgentRun(agentId, prompt, runOptions)
|
||||
: this.streamAgent(agentId, prompt, runOptions);
|
||||
return { outOfBand: false, events };
|
||||
}
|
||||
|
||||
private canSteerActiveForegroundRun(agentId: string): boolean {
|
||||
const agent = this.agents.get(agentId);
|
||||
return Boolean(
|
||||
agent?.activeForegroundTurnId &&
|
||||
agent.capabilities.supportsSteering === true &&
|
||||
agent.session.steerTurn,
|
||||
);
|
||||
}
|
||||
|
||||
private async *steerAgentRun(
|
||||
agentId: string,
|
||||
prompt: AgentPromptInput,
|
||||
options?: AgentRunOptions,
|
||||
): AsyncGenerator<AgentStreamEvent> {
|
||||
const agent = this.requireSessionAgent(agentId);
|
||||
if (!agent.session.steerTurn) {
|
||||
throw new Error(`Agent ${agentId} does not support steering`);
|
||||
}
|
||||
await agent.session.steerTurn(prompt, options);
|
||||
this.touchUpdatedAt(agent);
|
||||
this.emitState(agent);
|
||||
yield* [];
|
||||
}
|
||||
|
||||
async appendTimelineItem(agentId: string, item: AgentTimelineItem): Promise<void> {
|
||||
const agent = this.requireAgent(agentId);
|
||||
this.touchUpdatedAt(agent);
|
||||
|
||||
@@ -10,6 +10,9 @@ import {
|
||||
} from "./agent-prompt.js";
|
||||
import type { AgentManagerEvent, ManagedAgent } from "./agent-manager.js";
|
||||
|
||||
const CHILD_AGENT_ID = "11111111-1111-4111-8111-111111111111";
|
||||
const CALLER_AGENT_ID = "22222222-2222-4222-8222-222222222222";
|
||||
|
||||
test("isSystemInjectedEnvelope matches the envelope formatSystemNotificationPrompt produces", () => {
|
||||
expect(isSystemInjectedEnvelope(formatSystemNotificationPrompt("child finished"))).toBe(true);
|
||||
expect(isSystemInjectedEnvelope("hello world")).toBe(false);
|
||||
@@ -19,27 +22,24 @@ it("does not notify archived callers", async () => {
|
||||
let subscriber: ((event: AgentManagerEvent) => void) | null = null;
|
||||
|
||||
const childAgent: ManagedAgent = Object.create(null);
|
||||
Reflect.set(childAgent, "id", "child-agent");
|
||||
Reflect.set(childAgent, "id", CHILD_AGENT_ID);
|
||||
Reflect.set(childAgent, "lifecycle", "idle");
|
||||
Reflect.set(childAgent, "config", { title: "Child Agent" });
|
||||
|
||||
const callerAgent: ManagedAgent = Object.create(null);
|
||||
Reflect.set(callerAgent, "id", "caller-agent");
|
||||
Reflect.set(callerAgent, "id", CALLER_AGENT_ID);
|
||||
Reflect.set(callerAgent, "lifecycle", "idle");
|
||||
Reflect.set(callerAgent, "config", { title: "Caller Agent" });
|
||||
|
||||
const streamAgentSpy = vi.fn(() => (async function* noop() {})());
|
||||
const replaceAgentRunSpy = vi.fn(() => (async function* noop() {})());
|
||||
|
||||
const agentManager: AgentManager = Object.create(AgentManager.prototype);
|
||||
Reflect.set(
|
||||
agentManager,
|
||||
"getAgent",
|
||||
vi.fn((agentId: string) => {
|
||||
if (agentId === "child-agent") {
|
||||
if (agentId === CHILD_AGENT_ID) {
|
||||
return childAgent;
|
||||
}
|
||||
if (agentId === "caller-agent") {
|
||||
if (agentId === CALLER_AGENT_ID) {
|
||||
return callerAgent;
|
||||
}
|
||||
return null;
|
||||
@@ -55,12 +55,14 @@ it("does not notify archived callers", async () => {
|
||||
};
|
||||
}),
|
||||
);
|
||||
Reflect.set(agentManager, "hasInFlightRun", vi.fn().mockReturnValue(false));
|
||||
Reflect.set(agentManager, "streamAgent", streamAgentSpy);
|
||||
Reflect.set(agentManager, "replaceAgentRun", replaceAgentRunSpy);
|
||||
const startAgentRunSpy = vi.fn(() => ({
|
||||
outOfBand: false,
|
||||
events: (async function* noop() {})(),
|
||||
}));
|
||||
Reflect.set(agentManager, "startAgentRun", startAgentRunSpy);
|
||||
|
||||
const agentStorageGetSpy = vi.fn(async (agentId: string) =>
|
||||
agentId === "caller-agent" ? { archivedAt: "2024-01-01" } : null,
|
||||
agentId === CALLER_AGENT_ID ? { archivedAt: "2024-01-01" } : null,
|
||||
);
|
||||
const agentStorage: AgentStorage = Object.create(AgentStorage.prototype);
|
||||
Reflect.set(agentStorage, "get", agentStorageGetSpy);
|
||||
@@ -68,8 +70,8 @@ it("does not notify archived callers", async () => {
|
||||
setupFinishNotification({
|
||||
agentManager,
|
||||
agentStorage,
|
||||
childAgentId: "child-agent",
|
||||
callerAgentId: "caller-agent",
|
||||
childAgentId: CHILD_AGENT_ID,
|
||||
callerAgentId: CALLER_AGENT_ID,
|
||||
logger: createTestLogger(),
|
||||
});
|
||||
|
||||
@@ -88,9 +90,92 @@ it("does not notify archived callers", async () => {
|
||||
});
|
||||
|
||||
await vi.waitFor(() => {
|
||||
expect(agentStorageGetSpy).toHaveBeenCalledWith("caller-agent");
|
||||
expect(agentStorageGetSpy).toHaveBeenCalledWith(CALLER_AGENT_ID);
|
||||
});
|
||||
|
||||
expect(streamAgentSpy).not.toHaveBeenCalled();
|
||||
expect(replaceAgentRunSpy).not.toHaveBeenCalled();
|
||||
expect(startAgentRunSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("uses AgentManager startAgentRun for finish notifications", async () => {
|
||||
let subscriber: ((event: AgentManagerEvent) => void) | null = null;
|
||||
|
||||
const childAgent: ManagedAgent = Object.create(null);
|
||||
Reflect.set(childAgent, "id", CHILD_AGENT_ID);
|
||||
Reflect.set(childAgent, "lifecycle", "idle");
|
||||
Reflect.set(childAgent, "config", { title: "Child Agent" });
|
||||
|
||||
const callerAgent: ManagedAgent = Object.create(null);
|
||||
Reflect.set(callerAgent, "id", CALLER_AGENT_ID);
|
||||
Reflect.set(callerAgent, "lifecycle", "idle");
|
||||
Reflect.set(callerAgent, "config", { title: "Caller Agent" });
|
||||
|
||||
const startAgentRunSpy = vi.fn(() => ({
|
||||
outOfBand: false,
|
||||
events: (async function* noop() {})(),
|
||||
}));
|
||||
|
||||
const agentManager: AgentManager = Object.create(AgentManager.prototype);
|
||||
Reflect.set(
|
||||
agentManager,
|
||||
"getAgent",
|
||||
vi.fn((agentId: string) => {
|
||||
if (agentId === CHILD_AGENT_ID) {
|
||||
return childAgent;
|
||||
}
|
||||
if (agentId === CALLER_AGENT_ID) {
|
||||
return callerAgent;
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
);
|
||||
Reflect.set(
|
||||
agentManager,
|
||||
"subscribe",
|
||||
vi.fn((callback: (event: AgentManagerEvent) => void) => {
|
||||
subscriber = callback;
|
||||
return () => {
|
||||
subscriber = null;
|
||||
};
|
||||
}),
|
||||
);
|
||||
Reflect.set(agentManager, "startAgentRun", startAgentRunSpy);
|
||||
|
||||
const agentStorage: AgentStorage = Object.create(AgentStorage.prototype);
|
||||
Reflect.set(
|
||||
agentStorage,
|
||||
"get",
|
||||
vi.fn(async (agentId: string) =>
|
||||
agentId === CHILD_AGENT_ID ? { title: "Child Agent" } : null,
|
||||
),
|
||||
);
|
||||
|
||||
setupFinishNotification({
|
||||
agentManager,
|
||||
agentStorage,
|
||||
childAgentId: CHILD_AGENT_ID,
|
||||
callerAgentId: CALLER_AGENT_ID,
|
||||
logger: createTestLogger(),
|
||||
});
|
||||
|
||||
expect(subscriber).not.toBeNull();
|
||||
|
||||
childAgent.lifecycle = "running";
|
||||
subscriber?.({
|
||||
type: "agent_state",
|
||||
agent: childAgent,
|
||||
});
|
||||
|
||||
childAgent.lifecycle = "idle";
|
||||
subscriber?.({
|
||||
type: "agent_state",
|
||||
agent: childAgent,
|
||||
});
|
||||
|
||||
await vi.waitFor(() => {
|
||||
expect(startAgentRunSpy).toHaveBeenCalledWith(
|
||||
CALLER_AGENT_ID,
|
||||
`<paseo-system>\nAgent ${CHILD_AGENT_ID} (Child Agent) finished.\n</paseo-system>`,
|
||||
{ replaceRunning: true },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,19 +1,11 @@
|
||||
import type { Logger } from "pino";
|
||||
|
||||
import type { AgentPromptInput, AgentRunOptions } from "./agent-sdk-types.js";
|
||||
import type { AgentManager, ManagedAgent } from "./agent-manager.js";
|
||||
import type { AgentManager, ManagedAgent, StartAgentRunOptions } from "./agent-manager.js";
|
||||
import type { AgentStorage } from "./agent-storage.js";
|
||||
import { ensureAgentLoaded } from "./agent-loading.js";
|
||||
|
||||
export type AgentRunController = Pick<
|
||||
AgentManager,
|
||||
"getAgent" | "tryRunOutOfBand" | "hasInFlightRun" | "replaceAgentRun" | "streamAgent"
|
||||
>;
|
||||
|
||||
export interface StartAgentRunOptions {
|
||||
replaceRunning?: boolean;
|
||||
runOptions?: AgentRunOptions;
|
||||
}
|
||||
export type AgentRunController = Pick<AgentManager, "getAgent" | "startAgentRun">;
|
||||
|
||||
export function startAgentRun(
|
||||
agentManager: AgentRunController,
|
||||
@@ -35,23 +27,17 @@ export function startAgentRun(
|
||||
},
|
||||
"agent.session.start_stream.request",
|
||||
);
|
||||
// Out-of-band commands (e.g. /goal pause) must run WITHOUT canceling an
|
||||
// in-flight turn — replaceAgentRun would interrupt the running turn. The
|
||||
// intercept lives at this layer so it covers every prompt entrypoint.
|
||||
if (agentManager.tryRunOutOfBand(agentId, prompt)) {
|
||||
|
||||
const result = agentManager.startAgentRun(agentId, prompt, options);
|
||||
if (result.outOfBand) {
|
||||
return { outOfBand: true };
|
||||
}
|
||||
const shouldReplace = Boolean(options?.replaceRunning && agentManager.hasInFlightRun(agentId));
|
||||
const runOptions = options?.runOptions;
|
||||
const iterator = shouldReplace
|
||||
? agentManager.replaceAgentRun(agentId, prompt, runOptions)
|
||||
: agentManager.streamAgent(agentId, prompt, runOptions);
|
||||
const iterator = result.events;
|
||||
logger.trace(
|
||||
{
|
||||
agentId,
|
||||
provider: snapshot?.provider,
|
||||
providerSessionId: snapshot?.persistence?.sessionId ?? undefined,
|
||||
shouldReplace,
|
||||
},
|
||||
"agent.session.start_stream.iterator_returned",
|
||||
);
|
||||
|
||||
@@ -153,6 +153,7 @@ export interface AgentCapabilityFlags {
|
||||
supportsRewindConversation?: boolean;
|
||||
supportsRewindFiles?: boolean;
|
||||
supportsRewindBoth?: boolean;
|
||||
supportsSteering?: boolean;
|
||||
}
|
||||
|
||||
export interface AgentPersistenceHandle {
|
||||
@@ -558,6 +559,7 @@ export interface AgentSession {
|
||||
readonly features?: AgentFeature[];
|
||||
run(prompt: AgentPromptInput, options?: AgentRunOptions): Promise<AgentRunResult>;
|
||||
startTurn(prompt: AgentPromptInput, options?: AgentRunOptions): Promise<{ turnId: string }>;
|
||||
steerTurn?(prompt: AgentPromptInput, options?: AgentRunOptions): Promise<void>;
|
||||
subscribe(callback: (event: AgentStreamEvent) => void): () => void;
|
||||
streamHistory(): AsyncGenerator<AgentStreamEvent>;
|
||||
getRuntimeInfo(): Promise<AgentRuntimeInfo>;
|
||||
|
||||
@@ -8,6 +8,7 @@ import type {
|
||||
AgentPermissionResponse,
|
||||
} from "./agent-sdk-types.js";
|
||||
import type { AgentStreamEvent } from "../messages.js";
|
||||
import type { StartAgentRunOptions, StartAgentRunResult } from "./agent-manager.js";
|
||||
import { respondToAgentPermission } from "./permission-response.js";
|
||||
|
||||
class FakePermissionAgentManager {
|
||||
@@ -61,6 +62,21 @@ class FakePermissionAgentManager {
|
||||
this.replacementRuns.push({ agentId, prompt, options });
|
||||
return emptyAgentStream();
|
||||
}
|
||||
|
||||
startAgentRun(
|
||||
agentId: string,
|
||||
prompt: AgentPromptInput,
|
||||
options?: StartAgentRunOptions,
|
||||
): StartAgentRunResult {
|
||||
if (this.tryRunOutOfBand()) {
|
||||
return { outOfBand: true };
|
||||
}
|
||||
const shouldReplace = Boolean(options?.replaceRunning && this.hasInFlightRun());
|
||||
const events = shouldReplace
|
||||
? this.replaceAgentRun(agentId, prompt, options?.runOptions)
|
||||
: this.streamAgent(agentId, prompt, options?.runOptions);
|
||||
return { outOfBand: false, events };
|
||||
}
|
||||
}
|
||||
|
||||
async function* emptyAgentStream(): AsyncGenerator<AgentStreamEvent> {}
|
||||
|
||||
@@ -351,6 +351,7 @@ export function wrapSessionProvider(provider: AgentProvider, inner: AgentSession
|
||||
},
|
||||
run: (prompt, options) => inner.run(prompt, options),
|
||||
startTurn: (prompt, options) => inner.startTurn(prompt, options),
|
||||
steerTurn: inner.steerTurn?.bind(inner),
|
||||
subscribe: (callback) => inner.subscribe((event) => callback(mapStreamEvent(provider, event))),
|
||||
async *streamHistory() {
|
||||
for await (const event of inner.streamHistory()) {
|
||||
|
||||
@@ -2,7 +2,7 @@ import * as fs from "node:fs/promises";
|
||||
import * as os from "node:os";
|
||||
import * as path from "node:path";
|
||||
import { afterEach, describe, expect, test, vi } from "vitest";
|
||||
import type { SDKMessage } from "@anthropic-ai/claude-agent-sdk";
|
||||
import type { SDKMessage, SDKUserMessage } from "@anthropic-ai/claude-agent-sdk";
|
||||
|
||||
import { createTestLogger } from "../../../../test-utils/test-logger.js";
|
||||
import * as executableUtils from "../../../../utils/executable.js";
|
||||
@@ -749,7 +749,10 @@ describe("ClaudeAgentSession context window usage", () => {
|
||||
return session as unknown as TestClaudeSession;
|
||||
}
|
||||
|
||||
function createQueryFactoryForTurns(turns: Array<Array<Record<string, unknown>>>) {
|
||||
function createQueryFactoryForTurns(
|
||||
turns: Array<Array<Record<string, unknown>>>,
|
||||
onPrompt?: (prompt: unknown) => void,
|
||||
) {
|
||||
return vi.fn(({ prompt }: { prompt: AsyncIterable<unknown> }) => {
|
||||
const queuedMessages: Array<Record<string, unknown>> = [];
|
||||
const waiters: Array<() => void> = [];
|
||||
@@ -768,6 +771,7 @@ describe("ClaudeAgentSession context window usage", () => {
|
||||
|
||||
void (async () => {
|
||||
for await (const _prompt of prompt) {
|
||||
onPrompt?.(_prompt);
|
||||
const turnMessages = turns[turnIndex] ?? [];
|
||||
turnIndex += 1;
|
||||
for (const message of turnMessages) {
|
||||
@@ -1003,6 +1007,42 @@ describe("ClaudeAgentSession context window usage", () => {
|
||||
}
|
||||
});
|
||||
|
||||
test("steerTurn pushes a priority next user message into the existing input stream", async () => {
|
||||
const capturedPrompts: SDKUserMessage[] = [];
|
||||
const queryFactory = createQueryFactoryForTurns([], (prompt) => {
|
||||
capturedPrompts.push(prompt as SDKUserMessage);
|
||||
});
|
||||
const client = new ClaudeAgentClient({ logger, queryFactory });
|
||||
const session = await client.createSession({
|
||||
provider: "claude",
|
||||
cwd: process.cwd(),
|
||||
});
|
||||
|
||||
try {
|
||||
await session.startTurn("first prompt");
|
||||
await vi.waitFor(() => {
|
||||
expect(capturedPrompts).toHaveLength(1);
|
||||
});
|
||||
|
||||
await expect(session.steerTurn?.("steered prompt")).resolves.toBeUndefined();
|
||||
|
||||
await vi.waitFor(() => {
|
||||
expect(capturedPrompts).toHaveLength(2);
|
||||
});
|
||||
expect(capturedPrompts[1]).toMatchObject({
|
||||
type: "user",
|
||||
priority: "next",
|
||||
message: {
|
||||
role: "user",
|
||||
content: [{ type: "text", text: "steered prompt" }],
|
||||
},
|
||||
});
|
||||
expect(queryFactory).toHaveBeenCalledTimes(1);
|
||||
} finally {
|
||||
await session.close();
|
||||
}
|
||||
});
|
||||
|
||||
test("convertUsage includes contextWindowMaxTokens and derives used tokens from result usage as initial fallback", async () => {
|
||||
const session = await createSessionForTest();
|
||||
|
||||
|
||||
@@ -216,6 +216,7 @@ const CLAUDE_CAPABILITIES: AgentCapabilityFlags = {
|
||||
supportsRewindConversation: true,
|
||||
supportsRewindFiles: true,
|
||||
supportsRewindBoth: true,
|
||||
supportsSteering: true,
|
||||
};
|
||||
|
||||
const DEFAULT_MODES: AgentMode[] = [
|
||||
@@ -1789,6 +1790,20 @@ class ClaudeAgentSession implements AgentSession {
|
||||
return { turnId };
|
||||
}
|
||||
|
||||
async steerTurn(prompt: AgentPromptInput, _options?: AgentRunOptions): Promise<void> {
|
||||
if (this.closed) {
|
||||
throw new Error("Claude session is closed");
|
||||
}
|
||||
const sdkMessage = this.toSdkUserMessage(prompt);
|
||||
sdkMessage.priority = "next";
|
||||
|
||||
await this.ensureQuery();
|
||||
if (!this.input) {
|
||||
throw new Error("Claude session input stream not initialized");
|
||||
}
|
||||
this.input.push(sdkMessage);
|
||||
}
|
||||
|
||||
subscribe(callback: (event: AgentStreamEvent) => void): () => void {
|
||||
this.subscribers.add(callback);
|
||||
return () => {
|
||||
|
||||
@@ -63,6 +63,7 @@ type CodexTestSession = AgentSession & {
|
||||
connected: boolean;
|
||||
currentThreadId: string | null;
|
||||
activeForegroundTurnId: string | null;
|
||||
activeAppServerTurnId: string | null;
|
||||
client: CodexClientLike | null;
|
||||
};
|
||||
|
||||
@@ -99,6 +100,7 @@ function createSession(
|
||||
session.connected = true;
|
||||
session.currentThreadId = "test-thread";
|
||||
session.activeForegroundTurnId = "test-turn";
|
||||
session.activeAppServerTurnId = "test-turn";
|
||||
return session;
|
||||
}
|
||||
|
||||
@@ -395,6 +397,12 @@ describe("Codex app-server provider", () => {
|
||||
);
|
||||
});
|
||||
|
||||
test("advertises steering support for app-server sessions", () => {
|
||||
const session = createSession();
|
||||
|
||||
expect(session.capabilities.supportsSteering).toBe(true);
|
||||
});
|
||||
|
||||
test("passes ephemeral: true to thread/start when constructed as ephemeral", async () => {
|
||||
const requests: Array<{ method: string; params: unknown }> = [];
|
||||
const fakeClient: CodexClientLike = {
|
||||
@@ -880,6 +888,161 @@ describe("Codex app-server provider", () => {
|
||||
);
|
||||
});
|
||||
|
||||
test("steers against the app-server turn id returned by turn/start", async () => {
|
||||
const session = createSession();
|
||||
const request = vi.fn(async (method: string) => {
|
||||
if (method === "thread/loaded/list") {
|
||||
return { data: ["test-thread"] };
|
||||
}
|
||||
if (method === "turn/start") {
|
||||
return { turn: { id: "app-server-turn-from-start" } };
|
||||
}
|
||||
if (method === "turn/steer") {
|
||||
return { turnId: "app-server-turn-from-start" };
|
||||
}
|
||||
throw new Error(`Unexpected request: ${method}`);
|
||||
});
|
||||
session.activeForegroundTurnId = null;
|
||||
session.client = createStub<CodexClientLike>({ request });
|
||||
|
||||
const started = await session.startTurn("Start the turn");
|
||||
expect(started.turnId).not.toBe("app-server-turn-from-start");
|
||||
|
||||
await session.steerTurn!("Steer the active turn");
|
||||
|
||||
expect(request).toHaveBeenCalledWith(
|
||||
"turn/steer",
|
||||
expect.objectContaining({
|
||||
expectedTurnId: "app-server-turn-from-start",
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
test("waits for the app-server turn id before steering Codex", async () => {
|
||||
const session = createSession();
|
||||
const request = vi.fn(async (method: string) => {
|
||||
if (method === "thread/loaded/list") {
|
||||
return { data: ["test-thread"] };
|
||||
}
|
||||
if (method === "turn/start") {
|
||||
return {};
|
||||
}
|
||||
if (method === "turn/steer") {
|
||||
return {};
|
||||
}
|
||||
throw new Error(`Unexpected request: ${method}`);
|
||||
});
|
||||
session.activeForegroundTurnId = null;
|
||||
session.client = createStub<CodexClientLike>({ request });
|
||||
|
||||
await session.startTurn("Start the turn");
|
||||
await expect(session.steerTurn!("Too early")).rejects.toThrow(
|
||||
"Cannot steer Codex turn without an active app-server turn",
|
||||
);
|
||||
|
||||
asInternals(session).handleNotification("turn/started", {
|
||||
turn: { id: "app-server-turn-from-notification" },
|
||||
});
|
||||
|
||||
await session.steerTurn!("Steer after notification");
|
||||
|
||||
expect(request).toHaveBeenCalledWith(
|
||||
"turn/steer",
|
||||
expect.objectContaining({
|
||||
expectedTurnId: "app-server-turn-from-notification",
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
test("sends turn/steer with thread id, built input, and active foreground turn id", async () => {
|
||||
const session = createSession();
|
||||
const request = vi.fn(async (method: string) => {
|
||||
if (method === "turn/steer") {
|
||||
return {};
|
||||
}
|
||||
throw new Error(`Unexpected request: ${method}`);
|
||||
});
|
||||
session.client = createStub<CodexClientLike>({ request });
|
||||
session.currentThreadId = "thread-for-steer";
|
||||
session.activeForegroundTurnId = "paseo-foreground-turn-for-steer";
|
||||
session.activeAppServerTurnId = "app-server-turn-for-steer";
|
||||
|
||||
await session.steerTurn!("Use this guidance next.");
|
||||
|
||||
expect(request).toHaveBeenCalledTimes(1);
|
||||
expect(request).toHaveBeenCalledWith("turn/steer", {
|
||||
threadId: "thread-for-steer",
|
||||
expectedTurnId: "app-server-turn-for-steer",
|
||||
input: [
|
||||
{
|
||||
type: "text",
|
||||
text: "Use this guidance next.",
|
||||
text_elements: [],
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
test("does not start a new turn when steering Codex", async () => {
|
||||
const session = createSession();
|
||||
const request = vi.fn(async (method: string) => {
|
||||
if (method === "turn/steer") {
|
||||
return {};
|
||||
}
|
||||
throw new Error(`Unexpected request: ${method}`);
|
||||
});
|
||||
session.client = createStub<CodexClientLike>({ request });
|
||||
|
||||
await session.steerTurn!("Keep going with this constraint.");
|
||||
|
||||
expect(request.mock.calls.some(([method]) => method === "turn/start")).toBe(false);
|
||||
expect(session.activeForegroundTurnId).toBe("test-turn");
|
||||
});
|
||||
|
||||
test("fails Codex steering without an initialized client", async () => {
|
||||
const session = createSession();
|
||||
session.client = null;
|
||||
session.connected = true;
|
||||
|
||||
await expect(session.steerTurn!("hello")).rejects.toThrow("Codex client not initialized");
|
||||
});
|
||||
|
||||
test("fails Codex steering without a current thread", async () => {
|
||||
const session = createSession();
|
||||
session.currentThreadId = null;
|
||||
session.client = createStub<CodexClientLike>({
|
||||
request: vi.fn(async () => ({})),
|
||||
});
|
||||
|
||||
await expect(session.steerTurn!("hello")).rejects.toThrow(
|
||||
"Cannot steer Codex turn without an active thread",
|
||||
);
|
||||
});
|
||||
|
||||
test("fails Codex steering without an active foreground turn", async () => {
|
||||
const session = createSession();
|
||||
session.activeForegroundTurnId = null;
|
||||
session.client = createStub<CodexClientLike>({
|
||||
request: vi.fn(async () => ({})),
|
||||
});
|
||||
|
||||
await expect(session.steerTurn!("hello")).rejects.toThrow(
|
||||
"Cannot steer Codex turn without an active foreground turn",
|
||||
);
|
||||
});
|
||||
|
||||
test("fails Codex steering without an active app-server turn id", async () => {
|
||||
const session = createSession();
|
||||
session.activeAppServerTurnId = null;
|
||||
session.client = createStub<CodexClientLike>({
|
||||
request: vi.fn(async () => ({})),
|
||||
});
|
||||
|
||||
await expect(session.steerTurn!("hello")).rejects.toThrow(
|
||||
"Cannot steer Codex turn without an active app-server turn",
|
||||
);
|
||||
});
|
||||
|
||||
test("resolves Codex skill slash commands into app-server skill input", async () => {
|
||||
const session = createSession();
|
||||
const request = vi.fn(async (method: string) => {
|
||||
|
||||
@@ -171,6 +171,7 @@ const CODEX_APP_SERVER_CAPABILITIES: AgentCapabilityFlags = {
|
||||
supportsRewindConversation: true,
|
||||
supportsRewindFiles: false,
|
||||
supportsRewindBoth: false,
|
||||
supportsSteering: true,
|
||||
};
|
||||
|
||||
const CODEX_MODES: AgentMode[] = [
|
||||
@@ -2888,6 +2889,7 @@ export class CodexAppServerAgentSession implements AgentSession {
|
||||
private readonly subscribers = new Set<(event: AgentStreamEvent) => void>();
|
||||
private nextTurnOrdinal = 0;
|
||||
private activeForegroundTurnId: string | null = null;
|
||||
private activeAppServerTurnId: string | null = null;
|
||||
private cachedRuntimeInfo: AgentRuntimeInfo | null = null;
|
||||
private serviceTier: "fast" | null = null;
|
||||
private planModeEnabled = false;
|
||||
@@ -3481,6 +3483,13 @@ export class CodexAppServerAgentSession implements AgentSession {
|
||||
);
|
||||
}
|
||||
|
||||
private async buildEffectivePromptInput(prompt: AgentPromptInput): Promise<CodexPromptInput> {
|
||||
const slashCommand = await this.resolveSlashCommandInvocation(prompt);
|
||||
return slashCommand
|
||||
? await this.buildCommandPromptInput(slashCommand.commandName, slashCommand.args)
|
||||
: prompt;
|
||||
}
|
||||
|
||||
async run(prompt: AgentPromptInput, options?: AgentRunOptions): Promise<AgentRunResult> {
|
||||
return runProviderTurn({
|
||||
prompt,
|
||||
@@ -3513,10 +3522,7 @@ export class CodexAppServerAgentSession implements AgentSession {
|
||||
throw new Error("Codex client not initialized");
|
||||
}
|
||||
|
||||
const slashCommand = await this.resolveSlashCommandInvocation(prompt);
|
||||
const effectivePrompt = slashCommand
|
||||
? await this.buildCommandPromptInput(slashCommand.commandName, slashCommand.args)
|
||||
: prompt;
|
||||
const effectivePrompt = await this.buildEffectivePromptInput(prompt);
|
||||
|
||||
if (this.currentThreadId) {
|
||||
await this.ensureThreadLoaded();
|
||||
@@ -3528,6 +3534,7 @@ export class CodexAppServerAgentSession implements AgentSession {
|
||||
|
||||
const turnId = this.createTurnId();
|
||||
this.activeForegroundTurnId = turnId;
|
||||
this.activeAppServerTurnId = null;
|
||||
|
||||
try {
|
||||
this.logTurnStartSummary({
|
||||
@@ -3539,9 +3546,15 @@ export class CodexAppServerAgentSession implements AgentSession {
|
||||
hasDeveloperInstructions: turnStart.hasDeveloperInstructions,
|
||||
hasCodexConfig: turnStart.hasCodexConfig,
|
||||
});
|
||||
await this.client.request("turn/start", turnStart.params, TURN_START_TIMEOUT_MS);
|
||||
const response = await this.client.request(
|
||||
"turn/start",
|
||||
turnStart.params,
|
||||
TURN_START_TIMEOUT_MS,
|
||||
);
|
||||
this.rememberStartedAppServerTurn(response);
|
||||
} catch (error) {
|
||||
this.activeForegroundTurnId = null;
|
||||
this.activeAppServerTurnId = null;
|
||||
throw error;
|
||||
}
|
||||
|
||||
@@ -3583,6 +3596,36 @@ export class CodexAppServerAgentSession implements AgentSession {
|
||||
};
|
||||
}
|
||||
|
||||
private rememberStartedAppServerTurn(response: unknown): void {
|
||||
const record = toObjectRecord(response);
|
||||
const turn = toObjectRecord(record?.turn);
|
||||
this.activeAppServerTurnId = typeof turn?.id === "string" ? turn.id : null;
|
||||
}
|
||||
|
||||
async steerTurn(prompt: AgentPromptInput, _options?: AgentRunOptions): Promise<void> {
|
||||
await this.connect();
|
||||
if (!this.client) {
|
||||
throw new Error("Codex client not initialized");
|
||||
}
|
||||
if (!this.currentThreadId) {
|
||||
throw new Error("Cannot steer Codex turn without an active thread");
|
||||
}
|
||||
if (!this.activeForegroundTurnId) {
|
||||
throw new Error("Cannot steer Codex turn without an active foreground turn");
|
||||
}
|
||||
if (!this.activeAppServerTurnId) {
|
||||
throw new Error("Cannot steer Codex turn without an active app-server turn");
|
||||
}
|
||||
|
||||
const effectivePrompt = await this.buildEffectivePromptInput(prompt);
|
||||
const input = await this.buildUserInput(effectivePrompt);
|
||||
await this.client.request("turn/steer", {
|
||||
threadId: this.currentThreadId,
|
||||
input,
|
||||
expectedTurnId: this.activeAppServerTurnId,
|
||||
});
|
||||
}
|
||||
|
||||
subscribe(callback: (event: AgentStreamEvent) => void): () => void {
|
||||
this.subscribers.add(callback);
|
||||
return () => {
|
||||
@@ -3920,6 +3963,7 @@ export class CodexAppServerAgentSession implements AgentSession {
|
||||
this.resolvedPermissionRequests.clear();
|
||||
this.subscribers.clear();
|
||||
this.activeForegroundTurnId = null;
|
||||
this.activeAppServerTurnId = null;
|
||||
if (this.client) {
|
||||
await this.client.dispose();
|
||||
}
|
||||
@@ -4541,6 +4585,7 @@ export class CodexAppServerAgentSession implements AgentSession {
|
||||
return;
|
||||
}
|
||||
this.currentTurnId = parsed.turnId;
|
||||
this.activeAppServerTurnId = parsed.turnId;
|
||||
this.resetTurnTrackingState();
|
||||
this.emitEvent({ type: "turn_started", provider: CODEX_PROVIDER });
|
||||
}
|
||||
@@ -4578,6 +4623,7 @@ export class CodexAppServerAgentSession implements AgentSession {
|
||||
});
|
||||
}
|
||||
this.activeForegroundTurnId = null;
|
||||
this.activeAppServerTurnId = null;
|
||||
this.resetTurnTrackingState();
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@ import { describe, expect, test } from "vitest";
|
||||
import type { AgentTimelineRow } from "./agent-manager.js";
|
||||
import {
|
||||
projectTimelineRows,
|
||||
selectProjectedTimelinePage,
|
||||
selectTimelineWindowByProjectedLimit,
|
||||
} from "./timeline-projection.js";
|
||||
|
||||
@@ -437,178 +436,58 @@ describe("selectTimelineWindowByProjectedLimit", () => {
|
||||
});
|
||||
});
|
||||
|
||||
test("tail limit treats a repeated running tool call as one projected item", () => {
|
||||
test("can enforce a hard projected limit when tool lifecycle collapsing is disabled", () => {
|
||||
const rows: AgentTimelineRow[] = [
|
||||
...Array.from({ length: 6 }, (_, index) => ({
|
||||
seq: index + 1,
|
||||
timestamp: `2026-02-13T00:00:00.00${index}Z`,
|
||||
item: { type: "assistant_message" as const, text: `old ${index}` },
|
||||
})),
|
||||
...Array.from({ length: 20 }, (_, index) => ({
|
||||
seq: index + 7,
|
||||
timestamp: `2026-02-13T00:00:01.0${index}Z`,
|
||||
{
|
||||
seq: 1,
|
||||
timestamp: "2026-02-13T00:00:00.000Z",
|
||||
item: {
|
||||
type: "tool_call" as const,
|
||||
type: "tool_call",
|
||||
callId: "call_1",
|
||||
name: "shell",
|
||||
status: "running" as const,
|
||||
status: "running",
|
||||
error: null,
|
||||
detail: {
|
||||
type: "unknown" as const,
|
||||
input: { cmd: "sleep 10" },
|
||||
output: { progress: index },
|
||||
type: "unknown",
|
||||
input: { cmd: "pwd" },
|
||||
output: null,
|
||||
},
|
||||
},
|
||||
})),
|
||||
},
|
||||
{
|
||||
seq: 2,
|
||||
timestamp: "2026-02-13T00:00:00.100Z",
|
||||
item: { type: "assistant_message", text: "work" },
|
||||
},
|
||||
{
|
||||
seq: 3,
|
||||
timestamp: "2026-02-13T00:00:00.200Z",
|
||||
item: {
|
||||
type: "tool_call",
|
||||
callId: "call_1",
|
||||
name: "shell",
|
||||
status: "completed",
|
||||
error: null,
|
||||
detail: {
|
||||
type: "unknown",
|
||||
input: { cmd: "pwd" },
|
||||
output: { stdout: "/tmp" },
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const selected = selectTimelineWindowByProjectedLimit({
|
||||
rows,
|
||||
direction: "tail",
|
||||
limit: 100,
|
||||
limit: 1,
|
||||
collapseToolLifecycle: false,
|
||||
});
|
||||
|
||||
const tools = selected.projectedEntries.filter((entry) => entry.item.type === "tool_call");
|
||||
expect(tools).toHaveLength(1);
|
||||
expect(tools[0]?.collapsed).toContain("tool_lifecycle");
|
||||
expect(selected.projectedEntries).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe("selectProjectedTimelinePage", () => {
|
||||
function toolRow(seq: number, status: "running" | "completed"): AgentTimelineRow {
|
||||
return {
|
||||
seq,
|
||||
timestamp: new Date(1000 + seq).toISOString(),
|
||||
item: {
|
||||
type: "tool_call",
|
||||
callId: "call_1",
|
||||
name: "shell",
|
||||
status,
|
||||
error: null,
|
||||
detail: {
|
||||
type: "unknown",
|
||||
input: { cmd: "sleep 10" },
|
||||
output: status === "completed" ? { stdout: "done" } : null,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
test("tail page returns full projected items instead of tool lifecycle deltas", () => {
|
||||
const rows: AgentTimelineRow[] = [
|
||||
{ seq: 1, timestamp: "2026-02-13T00:00:00.000Z", item: { type: "user_message", text: "go" } },
|
||||
...Array.from({ length: 120 }, (_, index) => toolRow(index + 2, "running")),
|
||||
];
|
||||
|
||||
const page = selectProjectedTimelinePage({ rows, direction: "tail", limit: 100 });
|
||||
|
||||
expect(page.entries.map((entry) => entry.item.type)).toEqual(["user_message", "tool_call"]);
|
||||
expect(page.entries[1]?.collapsed).toContain("tool_lifecycle");
|
||||
expect(page.entries[1]?.sourceSeqRanges).toEqual([{ startSeq: 2, endSeq: 121 }]);
|
||||
expect(page.startSeq).toBe(1);
|
||||
expect(page.endSeq).toBe(121);
|
||||
expect(page.hasNewer).toBe(false);
|
||||
});
|
||||
|
||||
test("after page includes a full projected tool item when only its update is new", () => {
|
||||
const rows: AgentTimelineRow[] = [
|
||||
toolRow(10, "running"),
|
||||
{
|
||||
seq: 11,
|
||||
timestamp: "2026-02-13T00:00:00.011Z",
|
||||
item: { type: "assistant_message", text: "working" },
|
||||
},
|
||||
toolRow(250, "completed"),
|
||||
];
|
||||
|
||||
const page = selectProjectedTimelinePage({
|
||||
rows,
|
||||
direction: "after",
|
||||
cursorSeq: 249,
|
||||
limit: 100,
|
||||
});
|
||||
|
||||
expect(page.entries).toHaveLength(1);
|
||||
expect(page.entries[0]?.item.type).toBe("tool_call");
|
||||
expect(page.entries[0]?.seqStart).toBe(10);
|
||||
expect(page.entries[0]?.seqEnd).toBe(250);
|
||||
expect(page.entries[0]?.sourceSeqRanges).toEqual([
|
||||
{ startSeq: 10, endSeq: 10 },
|
||||
{ startSeq: 250, endSeq: 250 },
|
||||
]);
|
||||
expect(page.startSeq).toBe(250);
|
||||
expect(page.endSeq).toBe(250);
|
||||
});
|
||||
|
||||
test("after page cursor advances only through contiguously covered seqs", () => {
|
||||
const rows: AgentTimelineRow[] = [
|
||||
toolRow(1, "running"),
|
||||
...Array.from({ length: 498 }, (_, index) => ({
|
||||
seq: index + 2,
|
||||
timestamp: new Date(2000 + index).toISOString(),
|
||||
item: { type: "user_message" as const, text: `middle ${index + 2}` },
|
||||
})),
|
||||
toolRow(500, "completed"),
|
||||
...Array.from({ length: 101 }, (_, index) => ({
|
||||
seq: index + 501,
|
||||
timestamp: new Date(3000 + index).toISOString(),
|
||||
item: { type: "user_message" as const, text: `later ${index + 501}` },
|
||||
})),
|
||||
];
|
||||
|
||||
const page = selectProjectedTimelinePage({
|
||||
rows,
|
||||
direction: "after",
|
||||
cursorSeq: 0,
|
||||
limit: 100,
|
||||
});
|
||||
|
||||
expect(page.entries[0]?.item.type).toBe("tool_call");
|
||||
expect(
|
||||
page.entries.some((entry) => entry.item.type === "user_message" && entry.seqStart === 101),
|
||||
).toBe(false);
|
||||
expect(page.endSeq).toBe(100);
|
||||
expect(page.hasNewer).toBe(true);
|
||||
});
|
||||
|
||||
test("before page includes a wide tool whose earlier source range is before the cursor", () => {
|
||||
const rows: AgentTimelineRow[] = [
|
||||
toolRow(1, "running"),
|
||||
...Array.from({ length: 498 }, (_, index) => ({
|
||||
seq: index + 2,
|
||||
timestamp: new Date(2000 + index).toISOString(),
|
||||
item: { type: "user_message" as const, text: `middle ${index + 2}` },
|
||||
})),
|
||||
toolRow(500, "completed"),
|
||||
];
|
||||
|
||||
const page = selectProjectedTimelinePage({
|
||||
rows,
|
||||
direction: "before",
|
||||
cursorSeq: 500,
|
||||
limit: 100,
|
||||
});
|
||||
|
||||
expect(page.entries.some((entry) => entry.item.type === "tool_call")).toBe(true);
|
||||
expect(page.endSeq).toBeLessThan(500);
|
||||
expect(page.hasOlder).toBe(true);
|
||||
});
|
||||
|
||||
test("tail page includes a wide tool when its completion is the newest seq", () => {
|
||||
const rows: AgentTimelineRow[] = [
|
||||
toolRow(1, "running"),
|
||||
...Array.from({ length: 499 }, (_, index) => ({
|
||||
seq: index + 2,
|
||||
timestamp: new Date(2000 + index).toISOString(),
|
||||
item: { type: "user_message" as const, text: `middle ${index + 2}` },
|
||||
})),
|
||||
toolRow(501, "completed"),
|
||||
];
|
||||
|
||||
const page = selectProjectedTimelinePage({ rows, direction: "tail", limit: 100 });
|
||||
|
||||
expect(page.entries.some((entry) => entry.item.type === "tool_call")).toBe(true);
|
||||
expect(page.endSeq).toBe(501);
|
||||
expect(selected.minSeq).toBe(3);
|
||||
expect(selected.maxSeq).toBe(3);
|
||||
expect(selected.selectedRows.map((row) => row.seq)).toEqual([3]);
|
||||
expect(selected.projectedEntries).toHaveLength(1);
|
||||
expect(selected.projectedEntries[0]?.item.type).toBe("tool_call");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -28,14 +28,6 @@ interface ProjectedWindowSelection {
|
||||
maxSeq: number | null;
|
||||
}
|
||||
|
||||
export interface ProjectedTimelinePageSelection {
|
||||
entries: TimelineProjectionEntry[];
|
||||
startSeq: number | null;
|
||||
endSeq: number | null;
|
||||
hasOlder: boolean;
|
||||
hasNewer: boolean;
|
||||
}
|
||||
|
||||
function appendSeqToRanges(ranges: TimelineSeqRange[], seq: number): TimelineSeqRange[] {
|
||||
if (ranges.length === 0) {
|
||||
return [{ startSeq: seq, endSeq: seq }];
|
||||
@@ -274,11 +266,15 @@ export function selectTimelineWindowByProjectedLimit(input: {
|
||||
rows: readonly AgentTimelineRow[];
|
||||
direction: TimelineLimitDirection;
|
||||
limit: number;
|
||||
collapseToolLifecycle?: boolean;
|
||||
}): ProjectedWindowSelection {
|
||||
const { rows, direction } = input;
|
||||
const limit = Math.max(0, Math.floor(input.limit));
|
||||
const collapseTools = input.collapseToolLifecycle ?? true;
|
||||
const canonical = makeCanonicalEntries(rows);
|
||||
const projectedAll = mergeReasoningChunks(mergeAssistantChunks(collapseToolLifecycle(canonical)));
|
||||
const projectedAll = mergeReasoningChunks(
|
||||
mergeAssistantChunks(collapseTools ? collapseToolLifecycle(canonical) : canonical),
|
||||
);
|
||||
|
||||
if (projectedAll.length === 0) {
|
||||
return {
|
||||
@@ -324,25 +320,27 @@ export function selectTimelineWindowByProjectedLimit(input: {
|
||||
let { minSeq, maxSeq } = computeWindowBounds(projectedEntries);
|
||||
let expandedEntries = projectedEntries;
|
||||
|
||||
// Expand to include any projected entries that overlap the selected canonical
|
||||
// range. Tool lifecycle collapse can produce non-monotonic seqEnd values,
|
||||
// which would otherwise create cursor gaps.
|
||||
for (let iteration = 0; iteration < projectedAll.length + 1; iteration += 1) {
|
||||
const overlapping = projectedAll.filter(
|
||||
(entry) => entry.seqStart <= maxSeq && entry.seqEnd >= minSeq,
|
||||
);
|
||||
const nextBounds = computeWindowBounds(overlapping);
|
||||
if (
|
||||
overlapping.length === expandedEntries.length &&
|
||||
nextBounds.minSeq === minSeq &&
|
||||
nextBounds.maxSeq === maxSeq
|
||||
) {
|
||||
if (collapseTools) {
|
||||
// Expand to include any projected entries that overlap the selected
|
||||
// canonical range. Tool lifecycle collapse can produce non-monotonic
|
||||
// seqEnd values, which would otherwise create cursor gaps.
|
||||
for (let iteration = 0; iteration < projectedAll.length + 1; iteration += 1) {
|
||||
const overlapping = projectedAll.filter(
|
||||
(entry) => entry.seqStart <= maxSeq && entry.seqEnd >= minSeq,
|
||||
);
|
||||
const nextBounds = computeWindowBounds(overlapping);
|
||||
if (
|
||||
overlapping.length === expandedEntries.length &&
|
||||
nextBounds.minSeq === minSeq &&
|
||||
nextBounds.maxSeq === maxSeq
|
||||
) {
|
||||
expandedEntries = overlapping;
|
||||
break;
|
||||
}
|
||||
expandedEntries = overlapping;
|
||||
break;
|
||||
minSeq = nextBounds.minSeq;
|
||||
maxSeq = nextBounds.maxSeq;
|
||||
}
|
||||
expandedEntries = overlapping;
|
||||
minSeq = nextBounds.minSeq;
|
||||
maxSeq = nextBounds.maxSeq;
|
||||
}
|
||||
|
||||
const selectedRows = rows.filter((row) => row.seq >= minSeq && row.seq <= maxSeq);
|
||||
@@ -355,94 +353,6 @@ export function selectTimelineWindowByProjectedLimit(input: {
|
||||
};
|
||||
}
|
||||
|
||||
function getTimelineBounds(
|
||||
rows: readonly AgentTimelineRow[],
|
||||
): { minSeq: number; maxSeq: number } | null {
|
||||
const first = rows[0];
|
||||
const last = rows[rows.length - 1];
|
||||
if (!first || !last) {
|
||||
return null;
|
||||
}
|
||||
return { minSeq: first.seq, maxSeq: last.seq };
|
||||
}
|
||||
|
||||
function selectEntriesOverlappingSeqRange(input: {
|
||||
entries: readonly TimelineProjectionEntry[];
|
||||
startSeq: number;
|
||||
endSeq: number;
|
||||
}): TimelineProjectionEntry[] {
|
||||
return input.entries.filter(
|
||||
(entry) => entry.seqStart <= input.endSeq && entry.seqEnd >= input.startSeq,
|
||||
);
|
||||
}
|
||||
|
||||
export function selectProjectedTimelinePage(input: {
|
||||
rows: readonly AgentTimelineRow[];
|
||||
bounds?: { minSeq: number; maxSeq: number };
|
||||
direction: TimelineLimitDirection;
|
||||
cursorSeq?: number;
|
||||
limit?: number;
|
||||
}): ProjectedTimelinePageSelection {
|
||||
const limit = input.limit === undefined ? 0 : Math.max(0, Math.floor(input.limit));
|
||||
const bounds = input.bounds ?? getTimelineBounds(input.rows);
|
||||
const projectedAll = projectTimelineRows({ rows: input.rows, mode: "projected" });
|
||||
if (projectedAll.length === 0 || !bounds) {
|
||||
return {
|
||||
entries: [],
|
||||
startSeq: null,
|
||||
endSeq: null,
|
||||
hasOlder: false,
|
||||
hasNewer: false,
|
||||
};
|
||||
}
|
||||
|
||||
if (input.direction === "tail") {
|
||||
const selected = selectTimelineWindowByProjectedLimit({
|
||||
rows: input.rows,
|
||||
direction: "tail",
|
||||
limit,
|
||||
});
|
||||
return {
|
||||
entries: selected.projectedEntries,
|
||||
startSeq: selected.minSeq,
|
||||
endSeq: selected.maxSeq,
|
||||
hasOlder: selected.minSeq !== null && selected.minSeq > bounds.minSeq,
|
||||
hasNewer: false,
|
||||
};
|
||||
}
|
||||
|
||||
let startSeq: number;
|
||||
let endSeq: number;
|
||||
if (input.direction === "after") {
|
||||
const cursorSeq = input.cursorSeq ?? bounds.minSeq - 1;
|
||||
startSeq = Math.max(bounds.minSeq, cursorSeq + 1);
|
||||
endSeq = limit === 0 ? bounds.maxSeq : Math.min(bounds.maxSeq, cursorSeq + limit);
|
||||
} else {
|
||||
const cursorSeq = input.cursorSeq ?? bounds.maxSeq + 1;
|
||||
endSeq = Math.min(bounds.maxSeq, cursorSeq - 1);
|
||||
startSeq = limit === 0 ? bounds.minSeq : Math.max(bounds.minSeq, cursorSeq - limit);
|
||||
}
|
||||
|
||||
if (startSeq > endSeq) {
|
||||
return {
|
||||
entries: [],
|
||||
startSeq: null,
|
||||
endSeq: null,
|
||||
hasOlder: startSeq > bounds.minSeq,
|
||||
hasNewer: endSeq < bounds.maxSeq,
|
||||
};
|
||||
}
|
||||
|
||||
const entries = selectEntriesOverlappingSeqRange({ entries: projectedAll, startSeq, endSeq });
|
||||
return {
|
||||
entries,
|
||||
startSeq,
|
||||
endSeq,
|
||||
hasOlder: startSeq > bounds.minSeq,
|
||||
hasNewer: endSeq < bounds.maxSeq,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply a projected-count limit to a flat AgentTimelineItem[] without seq metadata.
|
||||
* Used by callers that only have items in hand (e.g. MCP tools reading
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { describe, test, expect, beforeEach, afterEach, vi } from "vitest";
|
||||
import { describe, test, expect, beforeEach, afterEach } from "vitest";
|
||||
import { mkdtempSync, rmSync } from "node:fs";
|
||||
import { tmpdir } from "node:os";
|
||||
import path from "node:path";
|
||||
@@ -17,7 +17,6 @@ describe("daemon E2E - timeline window", () => {
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
vi.restoreAllMocks();
|
||||
await ctx.cleanup();
|
||||
}, 60_000);
|
||||
|
||||
@@ -67,10 +66,6 @@ describe("daemon E2E - timeline window", () => {
|
||||
expect((await ctx.client.waitForFinish(agent.id, 5_000)).status).toBe("idle");
|
||||
|
||||
const expected = "SECOND";
|
||||
await ctx.daemon.daemon.agentManager.appendTimelineItem(agent.id, {
|
||||
type: "user_message",
|
||||
text: "next",
|
||||
});
|
||||
await ctx.client.sendMessage(agent.id, `Respond with exactly: ${expected}`);
|
||||
expect((await ctx.client.waitForFinish(agent.id, 5_000)).status).toBe("idle");
|
||||
|
||||
@@ -91,271 +86,4 @@ describe("daemon E2E - timeline window", () => {
|
||||
rmSync(cwd, { recursive: true, force: true });
|
||||
}
|
||||
}, 30_000);
|
||||
|
||||
test("timeline fetch returns one projected in-progress tool call instead of lifecycle deltas", async () => {
|
||||
const cwd = tmpCwd();
|
||||
try {
|
||||
const agent = await ctx.client.createAgent({
|
||||
provider: "codex",
|
||||
cwd,
|
||||
title: "Timeline Tool Projection Test",
|
||||
modeId: "full-access",
|
||||
});
|
||||
|
||||
await ctx.daemon.daemon.agentManager.appendTimelineItem(agent.id, {
|
||||
type: "user_message",
|
||||
text: "run the tool",
|
||||
});
|
||||
for (let index = 0; index < 120; index += 1) {
|
||||
await ctx.daemon.daemon.agentManager.appendTimelineItem(agent.id, {
|
||||
type: "tool_call",
|
||||
callId: "call_1",
|
||||
name: "shell",
|
||||
status: "running",
|
||||
error: null,
|
||||
detail: {
|
||||
type: "unknown",
|
||||
input: { cmd: "sleep 10" },
|
||||
output: { progress: index },
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const timeline = await ctx.client.fetchAgentTimeline(agent.id, {
|
||||
direction: "tail",
|
||||
limit: 100,
|
||||
projection: "canonical",
|
||||
});
|
||||
|
||||
const toolEntries = timeline.entries.filter((entry) => entry.item.type === "tool_call");
|
||||
expect(timeline.projection).toBe("projected");
|
||||
expect(timeline.entries.map((entry) => entry.item.type)).toEqual([
|
||||
"user_message",
|
||||
"tool_call",
|
||||
]);
|
||||
expect(toolEntries).toHaveLength(1);
|
||||
expect(toolEntries[0]?.collapsed).toContain("tool_lifecycle");
|
||||
expect(toolEntries[0]?.sourceSeqRanges).toEqual([{ startSeq: 2, endSeq: 121 }]);
|
||||
expect(timeline.endCursor?.seq).toBe(121);
|
||||
} finally {
|
||||
rmSync(cwd, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
test("after fetch returns the full projected tool item for a new lifecycle update", async () => {
|
||||
const cwd = tmpCwd();
|
||||
try {
|
||||
const agent = await ctx.client.createAgent({
|
||||
provider: "codex",
|
||||
cwd,
|
||||
title: "Timeline Tool Catch-up Test",
|
||||
modeId: "full-access",
|
||||
});
|
||||
|
||||
await ctx.daemon.daemon.agentManager.appendTimelineItem(agent.id, {
|
||||
type: "tool_call",
|
||||
callId: "call_1",
|
||||
name: "shell",
|
||||
status: "running",
|
||||
error: null,
|
||||
detail: {
|
||||
type: "unknown",
|
||||
input: { cmd: "sleep 10" },
|
||||
output: null,
|
||||
},
|
||||
});
|
||||
for (let seq = 2; seq <= 249; seq += 1) {
|
||||
await ctx.daemon.daemon.agentManager.appendTimelineItem(agent.id, {
|
||||
type: "assistant_message",
|
||||
text: `background ${seq}`,
|
||||
});
|
||||
}
|
||||
await ctx.daemon.daemon.agentManager.appendTimelineItem(agent.id, {
|
||||
type: "tool_call",
|
||||
callId: "call_1",
|
||||
name: "shell",
|
||||
status: "completed",
|
||||
error: null,
|
||||
detail: {
|
||||
type: "unknown",
|
||||
input: { cmd: "sleep 10" },
|
||||
output: { stdout: "done" },
|
||||
},
|
||||
});
|
||||
|
||||
const baseline = await ctx.client.fetchAgentTimeline(agent.id, {
|
||||
direction: "tail",
|
||||
limit: 0,
|
||||
});
|
||||
const timeline = await ctx.client.fetchAgentTimeline(agent.id, {
|
||||
direction: "after",
|
||||
cursor: { epoch: baseline.epoch, seq: 249 },
|
||||
limit: 100,
|
||||
projection: "canonical",
|
||||
});
|
||||
|
||||
expect(timeline.entries).toHaveLength(1);
|
||||
expect(timeline.startCursor?.seq).toBe(250);
|
||||
expect(timeline.endCursor?.seq).toBe(250);
|
||||
expect(timeline.entries[0]?.seqStart).toBe(1);
|
||||
expect(timeline.entries[0]?.seqEnd).toBe(250);
|
||||
expect(timeline.entries[0]?.sourceSeqRanges).toEqual([
|
||||
{ startSeq: 1, endSeq: 1 },
|
||||
{ startSeq: 250, endSeq: 250 },
|
||||
]);
|
||||
expect(timeline.entries[0]?.item.type).toBe("tool_call");
|
||||
} finally {
|
||||
rmSync(cwd, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
test("reset timeline fetch reports older history when the reset slice starts after window min", async () => {
|
||||
const cwd = tmpCwd();
|
||||
try {
|
||||
const agent = await ctx.client.createAgent({
|
||||
provider: "codex",
|
||||
cwd,
|
||||
title: "Timeline Reset HasOlder Test",
|
||||
modeId: "full-access",
|
||||
});
|
||||
|
||||
for (let seq = 1; seq <= 600; seq += 1) {
|
||||
await ctx.daemon.daemon.agentManager.appendTimelineItem(agent.id, {
|
||||
type: "user_message",
|
||||
text: `row ${seq}`,
|
||||
});
|
||||
}
|
||||
|
||||
const timeline = await ctx.client.fetchAgentTimeline(agent.id, {
|
||||
direction: "tail",
|
||||
cursor: { epoch: "stale-epoch", seq: 600 },
|
||||
limit: 200,
|
||||
});
|
||||
|
||||
expect(timeline.reset).toBe(true);
|
||||
expect(timeline.staleCursor).toBe(true);
|
||||
expect(timeline.startCursor?.seq).toBeGreaterThan(timeline.window.minSeq);
|
||||
expect(timeline.hasOlder).toBe(true);
|
||||
} finally {
|
||||
rmSync(cwd, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
test("tail fetch does not re-fetch full plain chat history", async () => {
|
||||
const cwd = tmpCwd();
|
||||
try {
|
||||
const agent = await ctx.client.createAgent({
|
||||
provider: "codex",
|
||||
cwd,
|
||||
title: "Timeline Tail Bounded Fetch Test",
|
||||
modeId: "full-access",
|
||||
});
|
||||
for (let seq = 1; seq <= 600; seq += 1) {
|
||||
await ctx.daemon.daemon.agentManager.appendTimelineItem(agent.id, {
|
||||
type: "user_message",
|
||||
text: `row ${seq}`,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSpy = vi.spyOn(ctx.daemon.daemon.agentManager, "fetchTimeline");
|
||||
const timeline = await ctx.client.fetchAgentTimeline(agent.id, {
|
||||
direction: "tail",
|
||||
limit: 100,
|
||||
});
|
||||
|
||||
expect(timeline.entries).toHaveLength(100);
|
||||
expect(timeline.startCursor?.seq).toBe(501);
|
||||
expect(timeline.endCursor?.seq).toBe(600);
|
||||
expect(timeline.hasOlder).toBe(true);
|
||||
expect(
|
||||
fetchSpy.mock.calls.some(
|
||||
([, options]) => options?.direction === "tail" && options.limit === 0,
|
||||
),
|
||||
).toBe(false);
|
||||
} finally {
|
||||
rmSync(cwd, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
test("after fetch does not re-fetch full plain chat history", async () => {
|
||||
const cwd = tmpCwd();
|
||||
try {
|
||||
const agent = await ctx.client.createAgent({
|
||||
provider: "codex",
|
||||
cwd,
|
||||
title: "Timeline After Bounded Fetch Test",
|
||||
modeId: "full-access",
|
||||
});
|
||||
for (let seq = 1; seq <= 600; seq += 1) {
|
||||
await ctx.daemon.daemon.agentManager.appendTimelineItem(agent.id, {
|
||||
type: "user_message",
|
||||
text: `row ${seq}`,
|
||||
});
|
||||
}
|
||||
const epoch = ctx.daemon.daemon.agentManager.fetchTimeline(agent.id, {
|
||||
direction: "tail",
|
||||
limit: 1,
|
||||
}).epoch;
|
||||
|
||||
const fetchSpy = vi.spyOn(ctx.daemon.daemon.agentManager, "fetchTimeline");
|
||||
const timeline = await ctx.client.fetchAgentTimeline(agent.id, {
|
||||
direction: "after",
|
||||
cursor: { epoch, seq: 300 },
|
||||
limit: 100,
|
||||
});
|
||||
|
||||
expect(timeline.entries).toHaveLength(100);
|
||||
expect(timeline.startCursor?.seq).toBe(301);
|
||||
expect(timeline.endCursor?.seq).toBe(400);
|
||||
expect(timeline.hasNewer).toBe(true);
|
||||
expect(
|
||||
fetchSpy.mock.calls.some(
|
||||
([, options]) => options?.direction === "tail" && options.limit === 0,
|
||||
),
|
||||
).toBe(false);
|
||||
} finally {
|
||||
rmSync(cwd, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
test("before fetch does not re-fetch full plain chat history", async () => {
|
||||
const cwd = tmpCwd();
|
||||
try {
|
||||
const agent = await ctx.client.createAgent({
|
||||
provider: "codex",
|
||||
cwd,
|
||||
title: "Timeline Before Bounded Fetch Test",
|
||||
modeId: "full-access",
|
||||
});
|
||||
for (let seq = 1; seq <= 600; seq += 1) {
|
||||
await ctx.daemon.daemon.agentManager.appendTimelineItem(agent.id, {
|
||||
type: "user_message",
|
||||
text: `row ${seq}`,
|
||||
});
|
||||
}
|
||||
const epoch = ctx.daemon.daemon.agentManager.fetchTimeline(agent.id, {
|
||||
direction: "tail",
|
||||
limit: 1,
|
||||
}).epoch;
|
||||
|
||||
const fetchSpy = vi.spyOn(ctx.daemon.daemon.agentManager, "fetchTimeline");
|
||||
const timeline = await ctx.client.fetchAgentTimeline(agent.id, {
|
||||
direction: "before",
|
||||
cursor: { epoch, seq: 501 },
|
||||
limit: 100,
|
||||
});
|
||||
|
||||
expect(timeline.entries).toHaveLength(100);
|
||||
expect(timeline.startCursor?.seq).toBe(401);
|
||||
expect(timeline.endCursor?.seq).toBe(500);
|
||||
expect(timeline.hasOlder).toBe(true);
|
||||
expect(
|
||||
fetchSpy.mock.calls.some(
|
||||
([, options]) => options?.direction === "tail" && options.limit === 0,
|
||||
),
|
||||
).toBe(false);
|
||||
} finally {
|
||||
rmSync(cwd, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -99,7 +99,6 @@ import type {
|
||||
AgentManagerEvent,
|
||||
AgentTimelineCursor,
|
||||
AgentTimelineFetchDirection,
|
||||
AgentTimelineFetchResult,
|
||||
ManagedAgent,
|
||||
} from "./agent/agent-manager.js";
|
||||
import { createAgentCommand } from "./agent/create-agent/create.js";
|
||||
@@ -121,7 +120,8 @@ import {
|
||||
emitLiveTimelineItemIfAgentKnown,
|
||||
} from "./agent/timeline-append.js";
|
||||
import {
|
||||
selectProjectedTimelinePage,
|
||||
projectTimelineRows,
|
||||
selectTimelineWindowByProjectedLimit,
|
||||
type TimelineProjectionMode,
|
||||
} from "./agent/timeline-projection.js";
|
||||
import {
|
||||
@@ -7415,33 +7415,84 @@ export class Session {
|
||||
});
|
||||
}
|
||||
|
||||
private shouldUseFullTimelineForProjectedPage(input: {
|
||||
timeline: AgentTimelineFetchResult;
|
||||
}): boolean {
|
||||
const { timeline } = input;
|
||||
if (timeline.reset || timeline.rows.length === 0 || !timeline.hasOlder) {
|
||||
return false;
|
||||
private loadProjectedTimelineWindow(params: {
|
||||
agentId: string;
|
||||
direction: AgentTimelineFetchDirection;
|
||||
cursor: AgentTimelineCursor | undefined;
|
||||
requestedLimit: number;
|
||||
timeline: ReturnType<AgentManager["fetchTimeline"]>;
|
||||
}): {
|
||||
timeline: ReturnType<AgentManager["fetchTimeline"]>;
|
||||
selectedRows: ReturnType<typeof selectTimelineWindowByProjectedLimit>["selectedRows"];
|
||||
minSeq: number | null;
|
||||
maxSeq: number | null;
|
||||
} {
|
||||
const { agentId, direction, cursor, requestedLimit } = params;
|
||||
let timeline = params.timeline;
|
||||
const projectedLimit = Math.max(1, Math.floor(requestedLimit));
|
||||
let fetchLimit = projectedLimit;
|
||||
let projectedWindow = selectTimelineWindowByProjectedLimit({
|
||||
rows: timeline.rows,
|
||||
direction,
|
||||
limit: projectedLimit,
|
||||
collapseToolLifecycle: false,
|
||||
});
|
||||
|
||||
while (timeline.hasOlder) {
|
||||
const needsMoreProjectedEntries = projectedWindow.projectedEntries.length < projectedLimit;
|
||||
const firstLoadedRow = timeline.rows[0];
|
||||
const firstSelectedRow = projectedWindow.selectedRows[0];
|
||||
const startsAtLoadedBoundary =
|
||||
firstLoadedRow != null &&
|
||||
firstSelectedRow != null &&
|
||||
firstSelectedRow.seq === firstLoadedRow.seq;
|
||||
const boundaryIsAssistantChunk =
|
||||
startsAtLoadedBoundary && firstLoadedRow.item.type === "assistant_message";
|
||||
|
||||
if (!needsMoreProjectedEntries && !boundaryIsAssistantChunk) {
|
||||
break;
|
||||
}
|
||||
|
||||
const maxRows = Math.max(0, timeline.window.maxSeq - timeline.window.minSeq + 1);
|
||||
const nextFetchLimit = Math.min(maxRows, fetchLimit * 2);
|
||||
if (nextFetchLimit <= fetchLimit) {
|
||||
break;
|
||||
}
|
||||
|
||||
fetchLimit = nextFetchLimit;
|
||||
timeline = this.agentManager.fetchTimeline(agentId, {
|
||||
direction,
|
||||
cursor,
|
||||
limit: fetchLimit,
|
||||
});
|
||||
projectedWindow = selectTimelineWindowByProjectedLimit({
|
||||
rows: timeline.rows,
|
||||
direction,
|
||||
limit: projectedLimit,
|
||||
collapseToolLifecycle: false,
|
||||
});
|
||||
}
|
||||
|
||||
const firstRow = timeline.rows[0];
|
||||
if (
|
||||
firstRow?.item.type === "assistant_message" ||
|
||||
firstRow?.item.type === "reasoning" ||
|
||||
firstRow?.item.type === "tool_call"
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return timeline.rows.some((row) => row.item.type === "tool_call");
|
||||
return {
|
||||
timeline,
|
||||
selectedRows: projectedWindow.selectedRows,
|
||||
minSeq: projectedWindow.minSeq,
|
||||
maxSeq: projectedWindow.maxSeq,
|
||||
};
|
||||
}
|
||||
|
||||
private async handleFetchAgentTimelineRequest(
|
||||
msg: Extract<SessionInboundMessage, { type: "fetch_agent_timeline_request" }>,
|
||||
): Promise<void> {
|
||||
const direction: AgentTimelineFetchDirection = msg.direction ?? (msg.cursor ? "after" : "tail");
|
||||
const projection: TimelineProjectionMode = "projected";
|
||||
const projection: TimelineProjectionMode = msg.projection ?? "projected";
|
||||
const requestedLimit = msg.limit;
|
||||
const pageLimit = requestedLimit ?? (direction === "after" ? 0 : 200);
|
||||
const limit = requestedLimit ?? (direction === "after" ? 0 : undefined);
|
||||
const shouldLimitByProjectedWindow =
|
||||
projection === "canonical" &&
|
||||
direction === "tail" &&
|
||||
typeof requestedLimit === "number" &&
|
||||
requestedLimit > 0;
|
||||
const cursor: AgentTimelineCursor | undefined = msg.cursor
|
||||
? {
|
||||
epoch: msg.cursor.epoch,
|
||||
@@ -7457,29 +7508,43 @@ export class Session {
|
||||
});
|
||||
const agentPayload = await this.buildAgentPayload(snapshot);
|
||||
|
||||
const controlTimeline = this.agentManager.fetchTimeline(msg.agentId, {
|
||||
let timeline = this.agentManager.fetchTimeline(msg.agentId, {
|
||||
direction,
|
||||
cursor,
|
||||
limit: pageLimit,
|
||||
limit:
|
||||
shouldLimitByProjectedWindow && typeof requestedLimit === "number"
|
||||
? Math.max(1, Math.floor(requestedLimit))
|
||||
: limit,
|
||||
});
|
||||
const timeline = this.shouldUseFullTimelineForProjectedPage({
|
||||
timeline: controlTimeline,
|
||||
})
|
||||
? this.agentManager.fetchTimeline(msg.agentId, { direction: "tail", limit: 0 })
|
||||
: controlTimeline;
|
||||
const projectedPage = selectProjectedTimelinePage({
|
||||
rows: timeline.rows,
|
||||
bounds: timeline.window,
|
||||
direction: controlTimeline.reset ? "tail" : direction,
|
||||
...(cursor ? { cursorSeq: cursor.seq } : {}),
|
||||
limit: pageLimit,
|
||||
});
|
||||
const startCursor =
|
||||
projectedPage.startSeq !== null
|
||||
? { epoch: timeline.epoch, seq: projectedPage.startSeq }
|
||||
: null;
|
||||
const endCursor =
|
||||
projectedPage.endSeq !== null ? { epoch: timeline.epoch, seq: projectedPage.endSeq } : null;
|
||||
let hasOlder = timeline.hasOlder;
|
||||
let hasNewer = timeline.hasNewer;
|
||||
let startCursor: { epoch: string; seq: number } | null = null;
|
||||
let endCursor: { epoch: string; seq: number } | null = null;
|
||||
let entries: ReturnType<typeof projectTimelineRows>;
|
||||
|
||||
if (shouldLimitByProjectedWindow) {
|
||||
const projectedResult = this.loadProjectedTimelineWindow({
|
||||
agentId: msg.agentId,
|
||||
direction,
|
||||
cursor,
|
||||
requestedLimit,
|
||||
timeline,
|
||||
});
|
||||
timeline = projectedResult.timeline;
|
||||
entries = projectTimelineRows({ rows: projectedResult.selectedRows, mode: projection });
|
||||
if (projectedResult.minSeq !== null && projectedResult.maxSeq !== null) {
|
||||
startCursor = { epoch: timeline.epoch, seq: projectedResult.minSeq };
|
||||
endCursor = { epoch: timeline.epoch, seq: projectedResult.maxSeq };
|
||||
hasOlder = projectedResult.minSeq > timeline.window.minSeq;
|
||||
hasNewer = false;
|
||||
}
|
||||
} else {
|
||||
const firstRow = timeline.rows[0];
|
||||
const lastRow = timeline.rows[timeline.rows.length - 1];
|
||||
startCursor = firstRow ? { epoch: timeline.epoch, seq: firstRow.seq } : null;
|
||||
endCursor = lastRow ? { epoch: timeline.epoch, seq: lastRow.seq } : null;
|
||||
entries = projectTimelineRows({ rows: timeline.rows, mode: projection });
|
||||
}
|
||||
|
||||
this.emit({
|
||||
type: "fetch_agent_timeline_response",
|
||||
@@ -7490,17 +7555,15 @@ export class Session {
|
||||
direction,
|
||||
projection,
|
||||
epoch: timeline.epoch,
|
||||
reset: controlTimeline.reset,
|
||||
staleCursor: controlTimeline.staleCursor,
|
||||
gap: controlTimeline.gap,
|
||||
reset: timeline.reset,
|
||||
staleCursor: timeline.staleCursor,
|
||||
gap: timeline.gap,
|
||||
window: timeline.window,
|
||||
startCursor,
|
||||
endCursor,
|
||||
hasOlder:
|
||||
projectedPage.hasOlder ||
|
||||
(projectedPage.startSeq !== null && projectedPage.startSeq > timeline.window.minSeq),
|
||||
hasNewer: projectedPage.hasNewer,
|
||||
entries: projectedPage.entries.map((entry) => ({
|
||||
hasOlder,
|
||||
hasNewer,
|
||||
entries: entries.map((entry) => ({
|
||||
provider: snapshot.provider,
|
||||
item: entry.item,
|
||||
timestamp: entry.timestamp,
|
||||
|
||||
@@ -96,19 +96,6 @@ it("creates separate terminals for different cwds", async () => {
|
||||
expect(tmpTerminals[0].id).not.toBe(homeTerminals[0].id);
|
||||
});
|
||||
|
||||
it("lists subdirectory terminals when querying the workspace root", async () => {
|
||||
manager = createTerminalManager();
|
||||
const rootCwd = mkdtempSync(join(tmpdir(), "terminal-manager-subdir-root-"));
|
||||
const subdirCwd = join(rootCwd, "apps", "mobile");
|
||||
mkdirSync(subdirCwd, { recursive: true });
|
||||
temporaryDirs.push(rootCwd);
|
||||
|
||||
const created = await manager.createTerminal({ cwd: subdirCwd, name: "Mobile" });
|
||||
|
||||
const rootTerminals = await manager.getTerminals(rootCwd);
|
||||
expect(rootTerminals.map((terminal) => terminal.id)).toEqual([created.id]);
|
||||
});
|
||||
|
||||
it("creates additional terminal with auto-incrementing name", async () => {
|
||||
manager = createTerminalManager();
|
||||
const cwd = realpathSync(tmpdir());
|
||||
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
} from "./terminal.js";
|
||||
import { captureTerminalLines, type CaptureTerminalLinesResult } from "./terminal-capture.js";
|
||||
import { resolve, sep, win32, posix } from "node:path";
|
||||
import { isSameOrDescendantPath } from "../server/path-utils.js";
|
||||
|
||||
export interface TerminalListItem {
|
||||
id: string;
|
||||
@@ -170,16 +169,7 @@ export function createTerminalManager(): TerminalManager {
|
||||
async getTerminals(cwd: string): Promise<TerminalSession[]> {
|
||||
assertAbsolutePath(cwd);
|
||||
|
||||
// Terminals are bucketed by exact cwd, but an agent can open a terminal in
|
||||
// a subdirectory of the workspace. A query for the workspace root must
|
||||
// surface those too, so aggregate every bucket at or below `cwd`.
|
||||
const sessions: TerminalSession[] = [];
|
||||
for (const [bucketCwd, bucketSessions] of terminalsByCwd) {
|
||||
if (isSameOrDescendantPath(cwd, bucketCwd)) {
|
||||
sessions.push(...bucketSessions);
|
||||
}
|
||||
}
|
||||
return sessions;
|
||||
return terminalsByCwd.get(cwd) ?? [];
|
||||
},
|
||||
|
||||
async createTerminal(options: {
|
||||
|
||||
@@ -10,8 +10,7 @@ import {
|
||||
import type { TerminalCell, TerminalState } from "@getpaseo/protocol/messages";
|
||||
import type { ServerMessage, TerminalSession, TerminalStateSnapshot } from "./terminal.js";
|
||||
import { TerminalSessionController } from "./terminal-session-controller.js";
|
||||
import type { TerminalManager, TerminalsChangedEvent } from "./terminal-manager.js";
|
||||
import { isSameOrDescendantPath } from "../server/path-utils.js";
|
||||
import type { TerminalManager } from "./terminal-manager.js";
|
||||
|
||||
function deferred<T>(): {
|
||||
promise: Promise<T>;
|
||||
@@ -141,97 +140,3 @@ describe("terminal-session-controller restore", () => {
|
||||
expect(new TextDecoder().decode(binaryFrames[1]?.payload)).toBe("restore-after\n");
|
||||
});
|
||||
});
|
||||
|
||||
function listSession(input: { id: string; name: string; cwd: string }): TerminalSession {
|
||||
return {
|
||||
id: input.id,
|
||||
name: input.name,
|
||||
cwd: input.cwd,
|
||||
send: vi.fn(),
|
||||
subscribe: () => vi.fn(),
|
||||
onExit: () => vi.fn(),
|
||||
onCommandFinished: () => vi.fn(),
|
||||
onTitleChange: () => vi.fn(),
|
||||
getSize: () => ({ rows: 1, cols: 80 }),
|
||||
getState: () => terminalState(""),
|
||||
getStateSnapshot: () => ({ state: terminalState(""), revision: 0 }),
|
||||
getReplayPreamble: () => "",
|
||||
getTitle: () => undefined,
|
||||
setTitle: vi.fn(),
|
||||
getExitInfo: () => null,
|
||||
kill: vi.fn(),
|
||||
killAndWait: vi.fn(),
|
||||
};
|
||||
}
|
||||
|
||||
async function flushMicrotasks(): Promise<void> {
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
}
|
||||
|
||||
describe("terminal-session-controller subdirectory aggregation", () => {
|
||||
test("delivers a subdirectory change to a root subscriber as an aggregated, root-keyed snapshot", async () => {
|
||||
const rootCwd = "/work/repo";
|
||||
const subdirCwd = "/work/repo/apps/mobile";
|
||||
// Aggregating subdirectory buckets into the root query is the manager's
|
||||
// contract, covered by terminal-manager.test.ts. Here we only assert the
|
||||
// controller re-fetches by root and keys the snapshot by root, so the fake
|
||||
// returns a fixed aggregated list for the root and nothing otherwise.
|
||||
const aggregatedRootTerminals = [
|
||||
listSession({ id: "root-term", name: "Terminal 1", cwd: rootCwd }),
|
||||
listSession({ id: "subdir-term", name: "Mobile", cwd: subdirCwd }),
|
||||
];
|
||||
|
||||
let changedListener: ((event: TerminalsChangedEvent) => void) | null = null;
|
||||
const terminalManager: TerminalManager = {
|
||||
getTerminals: vi.fn(async (cwd: string) => (cwd === rootCwd ? aggregatedRootTerminals : [])),
|
||||
createTerminal: vi.fn(),
|
||||
registerCwdEnv: vi.fn(),
|
||||
getTerminal: vi.fn(),
|
||||
getTerminalState: vi.fn(),
|
||||
setTerminalTitle: vi.fn(),
|
||||
killTerminal: vi.fn(),
|
||||
killTerminalAndWait: vi.fn(),
|
||||
captureTerminal: vi.fn(),
|
||||
listDirectories: vi.fn(() => [rootCwd, subdirCwd]),
|
||||
killAll: vi.fn(),
|
||||
subscribeTerminalsChanged: vi.fn((listener) => {
|
||||
changedListener = listener;
|
||||
return vi.fn();
|
||||
}),
|
||||
};
|
||||
|
||||
const outboundMessages: SessionOutboundMessage[] = [];
|
||||
const controller = new TerminalSessionController({
|
||||
terminalManager,
|
||||
emit: (message) => outboundMessages.push(message),
|
||||
emitBinary: vi.fn(),
|
||||
hasBinaryChannel: () => true,
|
||||
isPathWithinRoot: isSameOrDescendantPath,
|
||||
sessionLogger: createLogger(),
|
||||
});
|
||||
controller.start();
|
||||
|
||||
controller.dispatch({ type: "subscribe_terminals_request", cwd: rootCwd });
|
||||
await flushMicrotasks();
|
||||
outboundMessages.length = 0;
|
||||
|
||||
changedListener?.({
|
||||
cwd: subdirCwd,
|
||||
terminals: [{ id: "subdir-term", name: "Mobile", cwd: subdirCwd }],
|
||||
});
|
||||
await flushMicrotasks();
|
||||
|
||||
expect(outboundMessages).toEqual([
|
||||
{
|
||||
type: "terminals_changed",
|
||||
payload: {
|
||||
cwd: rootCwd,
|
||||
terminals: [
|
||||
{ id: "root-term", name: "Terminal 1" },
|
||||
{ id: "subdir-term", name: "Mobile" },
|
||||
],
|
||||
},
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -125,9 +125,9 @@ export class TerminalSessionController {
|
||||
if (!this.terminalManager) {
|
||||
return;
|
||||
}
|
||||
this.unsubscribeTerminalsChanged = this.terminalManager.subscribeTerminalsChanged((event) => {
|
||||
void this.handleTerminalsChanged(event);
|
||||
});
|
||||
this.unsubscribeTerminalsChanged = this.terminalManager.subscribeTerminalsChanged((event) =>
|
||||
this.handleTerminalsChanged(event),
|
||||
);
|
||||
}
|
||||
|
||||
getMetrics(): TerminalSessionControllerMetrics {
|
||||
@@ -293,30 +293,31 @@ export class TerminalSessionController {
|
||||
};
|
||||
}
|
||||
|
||||
private async handleTerminalsChanged(event: TerminalsChangedEvent): Promise<void> {
|
||||
// A terminal can live in a subdirectory of a subscribed workspace root (an
|
||||
// agent can open one there). Deliver the change to every subscribed root at
|
||||
// or above the terminal's cwd, keyed by that root, carrying the full
|
||||
// aggregated list — so the client's cache replacement doesn't drop the
|
||||
// terminals that live directly at the root.
|
||||
const matchingRoots = Array.from(this.subscribedDirectories).filter((root) =>
|
||||
this.isPathWithinRoot(root, event.cwd),
|
||||
);
|
||||
for (const root of matchingRoots) {
|
||||
await this.emitTerminalsSnapshotForRoot(root);
|
||||
private handleTerminalsChanged(event: TerminalsChangedEvent): void {
|
||||
if (!this.subscribedDirectories.has(event.cwd)) {
|
||||
return;
|
||||
}
|
||||
this.emitTerminalsChangedSnapshot({
|
||||
cwd: event.cwd,
|
||||
terminals: event.terminals.map((terminal) =>
|
||||
Object.assign(
|
||||
{ id: terminal.id, name: terminal.name },
|
||||
terminal.title ? { title: terminal.title } : {},
|
||||
),
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
private handleSubscribeTerminalsRequest(msg: SubscribeTerminalsRequest): void {
|
||||
this.subscribedDirectories.add(msg.cwd);
|
||||
void this.emitTerminalsSnapshotForRoot(msg.cwd);
|
||||
void this.emitInitialTerminalsChangedSnapshot(msg.cwd);
|
||||
}
|
||||
|
||||
private handleUnsubscribeTerminalsRequest(msg: UnsubscribeTerminalsRequest): void {
|
||||
this.subscribedDirectories.delete(msg.cwd);
|
||||
}
|
||||
|
||||
private async emitTerminalsSnapshotForRoot(cwd: string): Promise<void> {
|
||||
private async emitInitialTerminalsChangedSnapshot(cwd: string): Promise<void> {
|
||||
if (!this.terminalManager || !this.subscribedDirectories.has(cwd)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { afterEach, expect, it } from "vitest";
|
||||
import { EventEmitter } from "node:events";
|
||||
import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync } from "node:fs";
|
||||
import { existsSync, mkdtempSync, readFileSync, rmSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
import { tmpdir } from "node:os";
|
||||
import { createWorkerTerminalManager } from "./worker-terminal-manager.js";
|
||||
@@ -332,24 +332,6 @@ it("starts the default shell through the worker and accepts quoted commands", as
|
||||
expect(readFileSync(markerPath, "utf8")).toBe("shell-ok");
|
||||
});
|
||||
|
||||
it("lists subdirectory terminals when querying the workspace root", async () => {
|
||||
const rootCwd = mkdtempSync(join(tmpdir(), "worker-terminal-manager-subdir-root-"));
|
||||
const subdirCwd = join(rootCwd, "apps", "mobile");
|
||||
mkdirSync(subdirCwd, { recursive: true });
|
||||
temporaryDirs.push(rootCwd);
|
||||
manager = createWorkerTerminalManager();
|
||||
const created = trackTerminal(
|
||||
await manager.createTerminal({
|
||||
cwd: subdirCwd,
|
||||
...nodeTerminalCommand("setInterval(() => {}, 1000);"),
|
||||
}),
|
||||
);
|
||||
|
||||
const rootTerminals = await manager.getTerminals(rootCwd);
|
||||
|
||||
expect(rootTerminals.map((terminal) => terminal.id)).toEqual([created.id]);
|
||||
});
|
||||
|
||||
it("removes worker terminals after killAndWait", async () => {
|
||||
const cwd = mkdtempSync(join(tmpdir(), "worker-terminal-manager-kill-"));
|
||||
temporaryDirs.push(cwd);
|
||||
|
||||
Reference in New Issue
Block a user