Compare commits

..
Author SHA1 Message Date
78d9a36a16 Keep New workspace plugin metadata when the first agent start is retried
When New workspace hands its draft to the ready workspace's draft tab,
the text and setup move with it but the draft's plugin metadata did
not: it was cleared with the New workspace draft and never written to
the destination draft. A send after a failed first start then created
the agent without the metadata.

Copy the metadata into the destination draft at handoff, before the
New workspace draft is cleared.

Closes #9716

Co-authored-by: Michael Wu <michaelmwu@gmail.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-15 03:26:19 +00:00
88 changed files with 1027 additions and 3969 deletions
+9 -39
View File
@@ -7,12 +7,12 @@ canonical files and are trying to add or change one.
## Canonical files
| File | Use case |
| ------------------------------------- | ----------------------------------------------------------------- |
| `components/ui/combobox.tsx` | Anchored picker with search; mobile falls back to bottom sheet |
| `components/ui/tooltip.tsx` | Non-interactive hover/long-press tooltip |
| `components/ui/hover-card.tsx` | Desktop-web hover card the pointer can move onto; Portal |
| `components/ui/autocomplete-popover/` | Slash-command autocomplete anchored to the focused composer input |
| File | Use case |
| ---------------------------------------- | ----------------------------------------------------------------- |
| `components/ui/combobox.tsx` | Anchored picker with search; mobile falls back to bottom sheet |
| `components/ui/tooltip.tsx` | Non-interactive hover/long-press tooltip |
| `components/ui/hover-card.tsx` | Desktop-web hover card the pointer can move onto; Portal |
| `components/ui/autocomplete-popover.tsx` | Slash-command autocomplete anchored to the focused composer input |
Each handles a different mix of concerns: combobox owns input focus, tooltip is
non-interactive, hover-card is web-only desktop, autocomplete keeps the composer
@@ -65,10 +65,6 @@ Two escape hatches in the codebase:
Android can detach the IME from an underlying TextInput. Fine for combobox
(it has its own input) and tooltip (no input). **Not** fine for autocomplete
(the composer's input must stay focused so the user keeps typing).
Use `@/components/ui/modal`, not React Native's `Modal`. On Android, React Native lays out a
modal's first frames at the screen size minus the status and navigation bars, then grows it to
the full edge-to-edge window, so a full-screen backdrop stops short of the bottom and snaps
down. The wrapper sizes the content to the window from the first frame.
- **`<Portal>` from `@gorhom/portal`** (hover-card, autocomplete-popover) —
hoists the React subtree to a fixed mount point whose bounds cover the
screen. Same window, same IME, hit-test works because the new parent is
@@ -284,22 +280,6 @@ popover or leaves it behind the keyboard. `measureAtRest` measures through
Fabric's transform-free `measureLayout` instead. Re-measure when `isMoving`
settles; the composer's resting position changes as the draft grows.
A measured rect is an asynchronous copy, so it lands after the anchor's new
layout has painted. The composer resizes while the autocomplete is open: a
wrapped line, cleared text, a window resize. On web a `ResizeObserver` reads
the anchor's rect against the layer and commits the placement with `flushSync`,
which runs after layout and before paint. On native a Reanimated frame callback
reads only the anchor's height on the UI thread and holds its bottom edge at
the rest measurement. A height carries no transform. On iOS the absolute
position does not reliably include one: the keyboard lift runs on the native
driver and reaches the shadow tree only when the view re-renders. The
fixed-bottom model is wrong for the centered New workspace composer on tablets,
which grows around its middle, and for width or x changes. The popover is off
there by half the growth, or by the old width, until the next rest measurement.
Keep the portal's `KeyboardTranslateView` host-sized with
`pointerEvents="box-none"` and position the popover inside it, so the popover
moves without leaving its parent's bounds (Gotcha 1).
The provider also reconciles iOS from the controller's native `onEnd` event.
The controller's stock iOS shared values update at move start and during an
interactive move, but not at the terminal event, so JS contention can otherwise
@@ -442,11 +422,9 @@ gets that 0 and draws over the navigation bar.
- A Gorhom sheet reads the inset inside its children, which render in the app's sheet host. See
`CompactSheetBody`, `MenuSheetScrollView` and `ComboboxSheetFrame`.
- An RN `Modal` passes the call site's context straight through, so wrap its content in
`WindowSafeArea` from `@/window-layout` and read the inset below that. It provides the insets of
the whole window, published by `WindowLayoutProvider`. Do not put a `SafeAreaProvider` inside the
modal: on Android it measures the dialog window, whose bottom inset reads 24, then 0, then 24
again over the first frames, and everything padded by it jumps. See `attachment-lightbox.tsx`.
- An RN `Modal` passes the call site's context straight through, so put a `SafeAreaProvider`
inside it and read the inset below that. The modal is its own window, and the provider measures
it. See `attachment-lightbox.tsx`.
## Recipe for a new anchored panel
@@ -475,14 +453,6 @@ Before you write a new one, ask:
`top` paints over its anchor until the next placement lands, about 150 ms
on Android. Web hides this because React commits the resize and the
re-placement in one task.
7. **Does the panel hold a list that reads away from its anchor?** Make the
anchor edge the list's resting scroll position: an inverted list, as in
`components/ui/autocomplete.tsx`. On Android a scroll command issued after
the rows commit reaches the screen one or two frames after them, so a list
scrolled to its anchor edge paints its far end first. Give each result set
its own list with a `key`, so it starts at the anchor edge with the rows
that fill the panel. A list that mounts every result holds the panel's
first frame until the last row is ready.
Then copy the closest canonical file and trim.
-2
View File
@@ -59,8 +59,6 @@ Register keyboard handling with `useOverlayRegistration` from `@/keyboard`.
Pass the surface's open state, layer, handled keys and `onKeyDown`. The highest
layer gets first refusal; the latest registration wins a tie. Native registration
does not need a DOM ref. Web adds focus trapping and restoration through its adapter.
Declaring Tab takes it from the web focus trap and hands it to `onKeyDown`; the command
center rotates its tabs with it. Native sources drop Tab from the declarations.
Capture a global overlay’s layer in state for its opening lifetime. Memo caches can
be discarded or removed by React Compiler; recomputing against the registry lets an
@@ -5,7 +5,7 @@ import { seedMockAgentWorkspace } from "../support/helpers/mock-agent";
import { openAgentRoute } from "../support/helpers/mock-agent";
import { resetSeededPageState, openSessions } from "../support/helpers/archive-tab";
test("agent list age advances and command center says just now for a fresh workspace", async ({
test("agent list age advances and command center says just now for a fresh agent", async ({
page,
}) => {
const session = await seedMockAgentWorkspace({
@@ -23,10 +23,10 @@ test("agent list age advances and command center says just now for a fresh works
const commandCenter = await openCommandCenter(page);
await commandCenter.getByTestId("command-center-input").fill("Relative time agent");
const workspaceResult = commandCenter.getByTestId(
`command-center-workspace-${getServerId()}:${session.workspaceId}`,
const agentResult = commandCenter.getByTestId(
`command-center-agent-${getServerId()}:${session.agentId}`,
);
await expect(workspaceResult.getByTestId("command-center-result-timestamp")).toContainText(
await expect(agentResult.getByTestId("command-center-result-timestamp")).toContainText(
"just now",
);
await page.keyboard.press("Escape");
@@ -1,12 +1,5 @@
import { expect, test } from "../support/fixtures";
import { openSettings } from "../support/helpers/app";
import {
closeCommandCenter,
expectCommandCenterTab,
expectCommandCenterTabs,
openCommandCenter,
selectCommandCenterTab,
} from "../support/helpers/command-center";
import { openCommandCenter } from "../support/helpers/command-center";
import {
delayDirectorySuggestionResponses,
holdDirectorySuggestionResponses,
@@ -24,7 +17,6 @@ import {
} from "../support/helpers/command-center-scroll";
import { expectFileTabOpen } from "../support/helpers/file-explorer";
import { gotoWorkspace } from "../support/helpers/launcher";
import { getServerId } from "../support/helpers/server-id";
import { seedWorkspace, type SeededWorkspace } from "../support/helpers/seed-client";
const FILE_PATH =
@@ -75,7 +67,7 @@ test("workspace file search stays geometrically stable through delayed loading a
const panel = page.getByTestId("command-center-panel");
await expect(panel).toBeVisible({ timeout: 30_000 });
await expectCommandCenterTab(panel, "Files");
await expect(panel.getByRole("button", { name: "Files" })).toBeVisible();
await startCommandCenterLayoutObservation(page);
await panel.getByTestId("command-center-input").fill(FILE_NAME);
@@ -105,90 +97,26 @@ test("workspace file search stays geometrically stable through delayed loading a
}
});
test("command center tabs rotate with Tab and never move the header", async ({ page }) => {
test("dropping the files scope leaves the search row the same height", async ({ page }) => {
const seeded = await seedWorkspace({
repoPrefix: "command-center-tabs-",
title: "Tab rotation",
repoPrefix: "command-center-file-search-scope-",
title: "Scope chip height",
});
try {
await gotoWorkspace(page, seeded.workspaceId);
await page.keyboard.press("Meta+P");
const panel = page.getByTestId("command-center-panel");
await expect(panel).toBeVisible({ timeout: 30_000 });
const header = panel.getByTestId("command-center-header");
const input = panel.getByTestId("command-center-input");
const scoped = await header.boundingBox();
await test.step("⌘P opens on Files and Backspace on an empty field returns to All", async () => {
await page.keyboard.press("Meta+P");
await expect(panel).toBeVisible({ timeout: 30_000 });
await expectCommandCenterTab(panel, "Files");
await page.keyboard.press("Backspace");
await expectCommandCenterTab(panel, "All");
});
await page.getByTestId("command-center-files-scope").click();
await expect(page.getByTestId("command-center-files-scope")).toHaveCount(0);
const unscoped = await header.boundingBox();
const results = panel.getByTestId("command-center-results");
const headerOnAll = await header.boundingBox();
const resultsTopOnAll = (await results.boundingBox())?.y;
await test.step("Tab walks forward and wraps; Shift+Tab walks back", async () => {
await page.keyboard.press("Tab");
await expectCommandCenterTab(panel, "Workspaces");
await page.keyboard.press("Tab");
await expectCommandCenterTab(panel, "Files");
await page.keyboard.press("Tab");
await expectCommandCenterTab(panel, "Actions");
expect(await header.boundingBox()).toEqual(headerOnAll);
expect((await results.boundingBox())?.y).toBe(resultsTopOnAll);
await page.keyboard.press("Tab");
await expectCommandCenterTab(panel, "All");
await page.keyboard.press("Shift+Tab");
await expectCommandCenterTab(panel, "Actions");
await page.keyboard.press("Shift+Tab");
await expectCommandCenterTab(panel, "Files");
});
await test.step("rotating keeps the query", async () => {
await input.fill("tab rot");
await page.keyboard.press("Tab");
await expectCommandCenterTab(panel, "Actions");
await expect(input).toHaveValue("tab rot");
});
await test.step("clicking a tab keeps typing in the search field", async () => {
await selectCommandCenterTab(panel, "Workspaces");
await page.keyboard.press("Backspace");
await expect(input).toHaveValue("tab ro");
await expect(
panel.getByTestId(`command-center-workspace-${getServerId()}:${seeded.workspaceId}`),
).toBeVisible();
});
await test.step("⌘K opens on All", async () => {
await page.keyboard.press("Escape");
await expect(panel).not.toBeVisible();
await page.keyboard.press("Meta+K");
await expectCommandCenterTab(panel, "All");
});
await test.step("in a workspace every tab is offered", async () => {
await expectCommandCenterTabs(panel, ["All", "Workspaces", "Files", "Actions"]);
});
await test.step("outside a workspace there is no Files tab, and Tab skips it", async () => {
const outside = { workspaceOpen: false };
await closeCommandCenter(page);
await openSettings(page);
await page.keyboard.press("Meta+K");
await expectCommandCenterTab(panel, "All", outside);
await expectCommandCenterTabs(panel, ["All", "Workspaces", "Actions"]);
await page.keyboard.press("Tab");
await expectCommandCenterTab(panel, "Workspaces", outside);
await page.keyboard.press("Tab");
await expectCommandCenterTab(panel, "Actions", outside);
await page.keyboard.press("Tab");
await expectCommandCenterTab(panel, "All", outside);
await page.keyboard.press("Shift+Tab");
await expectCommandCenterTab(panel, "Actions", outside);
});
expect(scoped?.height).toBe(unscoped?.height);
} finally {
await seeded.cleanup();
}
@@ -7,8 +7,8 @@ import {
searchCommandCenter,
warmCommandCenterRows,
expectOnlyCommandCenterRowRendered,
expectCommandCenterWorkspaceWindow,
scrollToOldestCommandCenterWorkspace,
expectCommandCenterAgentWindow,
scrollToOldestCommandCenterAgent,
} from "../support/helpers/command-center-performance";
import { gotoAppShell } from "../support/helpers/app";
import {
@@ -19,7 +19,7 @@ import {
expectPrimaryCommandCenterActions,
expectTightTwoLineResultSpacing,
expectVisibleKeyboardNavigationNotToScroll,
expectRecentWorkspacesUntilSearch,
expectWorkspaceResultsToBeLimitedUntilSearch,
observeCommandCenterScroll,
openCommandCenterWithKeyboard,
} from "../support/helpers/command-center-scroll";
@@ -63,9 +63,9 @@ test("Command Center preserves manual scrolling through live updates and resumes
await expectCommandCenterToRemainAtTheTop(page);
await expectPrimaryCommandCenterActions(panel);
await expectVisibleKeyboardNavigationNotToScroll(page, panel);
// All leads with the most recent workspaces, so the last one seeded leads it.
// The empty query lists the most recent workspaces, so the last one seeded leads it.
await expectTightTwoLineResultSpacing(panel, "Command Center Scroll 08");
await expectRecentWorkspacesUntilSearch(panel);
await expectWorkspaceResultsToBeLimitedUntilSearch(panel);
const offset = await scrollCommandCenterAwayFromSelection(page, panel);
await seeded.client.setWorkspaceTitle(newestWorkspaceId, "Command Center Scroll renamed");
await expect(panel.getByText("Command Center Scroll renamed", { exact: true })).toHaveCount(1);
@@ -76,50 +76,42 @@ test("Command Center preserves manual scrolling through live updates and resumes
}
});
test("live search updates render only the changed row and keep workspaces virtualized", async ({
test("live search updates render only the changed row and keep agents virtualized", async ({
page,
}) => {
test.setTimeout(120_000);
const seeded = await seedSearchableCommandCenter();
const agentWorkspaceRowId = `workspace:${getServerId()}:${seeded.workspaceId}`;
try {
await observeCommandCenterRowRenders(page);
await gotoAppShell(page);
const panel = await openCommandCenterWithKeyboard(page);
await searchCommandCenter(panel, "Search agent");
await expect(panel.getByText("Search agent 059", { exact: true })).toBeVisible();
await warmCommandCenterRows(page);
await expectCommandCenterAgentWindow(panel, seeded.agents.length);
await test.step("renaming a matched agent re-renders only its workspace", async () => {
await searchCommandCenter(panel, "Search agent 002");
const agentLine = panel
.getByTestId(`command-center-workspace-${getServerId()}:${seeded.workspaceId}`)
.getByTestId("command-center-workspace-agent");
await expect(agentLine).toHaveText("Search agent 002");
await warmCommandCenterRows(page);
await seeded.client.updateAgent(seeded.agents[2].id, { name: "Search agent 002 revised" });
await expect(agentLine).toHaveText("Search agent 002 revised");
await expectOnlyCommandCenterRowRendered(page, agentWorkspaceRowId);
});
await seeded.client.updateAgent(seeded.agents[59].id, { name: "Search agent 059 revised" });
await expect(panel.getByText("Search agent 059 revised", { exact: true })).toBeVisible();
await expectOnlyCommandCenterRowRendered(
page,
`agent:${getServerId()}:${seeded.agents[59].id}`,
);
await test.step("renaming a workspace re-renders only its row", async () => {
await searchCommandCenter(panel, "Search workspace");
await expect(panel.getByText("Search workspace 039", { exact: true })).toBeVisible();
await warmCommandCenterRows(page);
await seeded.client.setWorkspaceTitle(
seeded.workspaces[39].id,
"Search workspace 039 revised",
);
await expect(panel.getByText("Search workspace 039 revised", { exact: true })).toBeVisible();
await expectOnlyCommandCenterRowRendered(
page,
`workspace:${getServerId()}:${seeded.workspaces[39].id}`,
);
});
await searchCommandCenter(panel, "Search workspace");
await expect(panel.getByText("Search workspace 039", { exact: true })).toBeVisible();
await warmCommandCenterRows(page);
await seeded.client.setWorkspaceTitle(seeded.workspaces[39].id, "Search workspace 039 revised");
await expect(panel.getByText("Search workspace 039 revised", { exact: true })).toBeVisible();
await expectOnlyCommandCenterRowRendered(
page,
`workspace:${getServerId()}:${seeded.workspaces[39].id}`,
);
await test.step("a long list mounts only a window of rows", async () => {
await expectCommandCenterWorkspaceWindow(panel, seeded.workspaces.length + 1);
await scrollToOldestCommandCenterWorkspace(panel);
await expect(panel.getByText("Search workspace 000", { exact: true })).toBeVisible();
await expectCommandCenterWorkspaceWindow(panel, seeded.workspaces.length + 1);
});
await searchCommandCenter(panel, "Search agent");
await warmCommandCenterRows(page);
await scrollToOldestCommandCenterAgent(panel);
await expect(panel.getByText("Search agent 000", { exact: true })).toBeVisible();
await expectCommandCenterAgentWindow(panel, seeded.agents.length);
} finally {
await seeded.cleanup();
}
@@ -4,12 +4,7 @@ import { test } from "../support/fixtures";
import { gotoAppShell } from "../support/helpers/app";
import { createIdleAgent } from "../support/helpers/archive-tab";
import { expectAgentTabActive } from "../support/helpers/launcher";
import {
commandCenterSection,
expectCommandCenterTab,
openCommandCenter,
selectCommandCenterTab,
} from "../support/helpers/command-center";
import { openCommandCenter } from "../support/helpers/command-center";
import { addOfflineHostAndReload } from "../support/helpers/hosts";
import { expectAppRoute } from "../support/helpers/route-assertions";
import { seedWorkspace } from "../support/helpers/seed-client";
@@ -26,7 +21,9 @@ const AGENT_TITLE = "Fix checkout retries";
test.describe("Command center workspaces", () => {
test.describe.configure({ timeout: 180_000 });
test("workspace results overlay live status", async ({ page }) => {
test("agent and workspace results retain their icons and overlay live status", async ({
page,
}) => {
const workspace = await seedRunningMockAgentWorkspace({
repoPrefix: "command-center-status-",
title: "Review checkout retries",
@@ -37,13 +34,15 @@ test.describe("Command center workspaces", () => {
await openAgentRoute(page, workspace);
await expectAgentTabActive(page, workspace.agentId);
const panel = await openCommandCenter(page);
// Recent workspaces leaves out the open one; the Workspaces tab lists every workspace.
await selectCommandCenterTab(panel, "Workspaces");
const agent = panel.getByTestId(`command-center-agent-${getServerId()}:${workspace.agentId}`);
const row = panel.getByTestId(
`command-center-workspace-${getServerId()}:${workspace.workspaceId}`,
);
await expect(agent.getByRole("progressbar", { name: "Agent running" })).toBeVisible();
await expect(row.getByRole("progressbar", { name: "Agent running" })).toBeVisible();
await expect(agent.getByRole("img", { name: "Mock agent" })).toBeVisible();
await workspace.client.cancelAgent(workspace.agentId);
await expect(agent.getByRole("progressbar")).toHaveCount(0);
await expect(row.getByRole("progressbar")).toHaveCount(0);
} finally {
await workspace.cleanup();
@@ -81,11 +80,9 @@ test.describe("Command center workspaces", () => {
});
const panel = await openCommandCenter(page);
await selectCommandCenterTab(panel, "Workspaces");
const row = panel.getByTestId(
`command-center-workspace-${getServerId()}:${seeded.workspaceId}`,
);
const agentLine = row.getByTestId("command-center-workspace-agent");
await expect(row).toBeVisible({ timeout: 30_000 });
await expect(row).toContainText(WORKSPACE_TITLE);
await expect(row).toContainText(WORKSPACE_BRANCH);
@@ -95,151 +92,65 @@ test.describe("Command center workspaces", () => {
await expect(subtitle).toContainText(PRIMARY_HOST_LABEL);
await expect(subtitle).toContainText(seeded.projectDisplayName);
await expect(subtitle).toContainText(WORKSPACE_BRANCH);
await expect(agentLine).toHaveCount(0);
await test.step("a workspace matches on its own fields", async () => {
const input = panel.getByTestId("command-center-input");
for (const query of [
PRIMARY_HOST_LABEL,
WORKSPACE_BRANCH,
WORKSPACE_TITLE,
seeded.projectDisplayName,
]) {
await input.fill(query);
await expect(row).toBeVisible();
await expect(agentLine).toHaveCount(0);
}
// `cwd` is never shown, so it must never match.
await input.fill(seeded.repoPath);
await expect(row).not.toBeVisible();
// The agent subtitle is unchanged by the shared-helper refactor.
const agentRow = panel.getByTestId(`command-center-agent-${getServerId()}:${agent.id}`);
await expect(agentRow).toContainText(AGENT_TITLE);
await expect(agentRow).toContainText(PRIMARY_HOST_LABEL);
await expect(agentRow).toContainText(WORKSPACE_TITLE);
await expect(agentRow).not.toContainText(seeded.repoPath);
const workspaceSectionTop = await panel
.getByText("Workspaces", { exact: true })
.evaluate((element) => element.getBoundingClientRect().top);
const agentSectionTop = await panel
.getByText("Agents", { exact: true })
.evaluate((element) => element.getBoundingClientRect().top);
expect(workspaceSectionTop).toBeLessThan(agentSectionTop);
const input = panel.getByTestId("command-center-input");
await input.fill(PRIMARY_HOST_LABEL);
await expect(row).toBeVisible();
await expect(agentRow).toBeVisible();
await input.fill(WORKSPACE_BRANCH);
await expect(row).toBeVisible();
await expect(agentRow).not.toBeVisible();
await input.fill(WORKSPACE_TITLE);
await expect(row).toBeVisible();
await expect(agentRow).toBeVisible();
await input.fill(seeded.repoPath);
await expect(agentRow).toBeVisible();
await expect(row).not.toBeVisible();
// The project name is now part of the workspace searchText.
await input.fill(seeded.projectDisplayName);
await expect(row).toBeVisible();
await input.fill(AGENT_TITLE);
await expect(agentRow).toBeVisible();
await expect(row).not.toBeVisible();
await input.fill(WORKSPACE_TITLE);
await page.keyboard.press("Enter");
await expectAppRoute(page, buildHostWorkspaceRoute(getServerId(), seeded.workspaceId), {
timeout: 30_000,
});
await test.step("an agent title finds its workspace and names the agent", async () => {
await panel.getByTestId("command-center-input").fill(AGENT_TITLE);
await expect(agentLine).toHaveText(AGENT_TITLE);
await expect(panel.getByText("Agents", { exact: true })).toHaveCount(0);
await test.step("find an agent and open its workspace tab", async () => {
const agentPanel = await openCommandCenter(page);
await agentPanel.getByTestId("command-center-input").fill(AGENT_TITLE);
await page.keyboard.press("Enter");
await expectAgentTabActive(page, agent.id);
});
await test.step("a workspace match opens the workspace", async () => {
const searchAgain = await openCommandCenter(page);
await expectCommandCenterTab(searchAgain, "All");
await searchAgain.getByTestId("command-center-input").fill(WORKSPACE_TITLE);
await page.keyboard.press("Enter");
await expectAppRoute(page, buildHostWorkspaceRoute(getServerId(), seeded.workspaceId), {
timeout: 30_000,
});
});
} finally {
await seeded.cleanup();
}
});
test("All leads with the three most recent workspaces other than the open one", async ({
page,
}) => {
const older = [];
for (const title of ["Recent oldest", "Recent third", "Recent second", "Recent newest"]) {
older.push(await seedWorkspace({ repoPrefix: "command-center-recent-", title }));
}
const current = await seedWorkspace({
repoPrefix: "command-center-recent-",
title: "Open one",
});
try {
await page.goto(buildHostWorkspaceRoute(getServerId(), current.workspaceId));
const panel = await openCommandCenter(page);
await expectCommandCenterTab(panel, "All");
await expect(commandCenterSection(panel, "Recent workspaces")).toBeVisible();
const rowOf = (workspaceId: string) =>
panel.getByTestId(`command-center-workspace-${getServerId()}:${workspaceId}`);
await expect(rowOf(older[3].workspaceId)).toBeVisible({ timeout: 30_000 });
await expect(rowOf(older[2].workspaceId)).toBeVisible();
await expect(rowOf(older[1].workspaceId)).toBeVisible();
await expect(rowOf(older[0].workspaceId)).toHaveCount(0);
await expect(rowOf(current.workspaceId)).toHaveCount(0);
await expect(commandCenterSection(panel, "Workspaces")).toHaveCount(0);
// The newest recent workspace is selected, so Enter goes straight back to it.
await page.keyboard.press("Enter");
await expectAppRoute(page, buildHostWorkspaceRoute(getServerId(), older[3].workspaceId), {
timeout: 30_000,
});
} finally {
for (const seeded of [current, ...older]) await seeded.cleanup();
}
});
test("archived workspaces follow active matches and open where they can be unarchived", async ({
page,
}) => {
const active = await seedWorkspace({
repoPrefix: "command-center-archived-active-",
title: "Billing dashboard",
});
const archived = await seedWorkspace({
repoPrefix: "command-center-archived-",
title: "Billing cleanup",
});
try {
await createIdleAgent(archived.client, {
cwd: archived.repoPath,
workspaceId: archived.workspaceId,
title: "Audit invoice totals",
});
expect((await archived.client.archiveWorkspace(archived.workspaceId)).error).toBeNull();
await gotoAppShell(page);
const panel = await openCommandCenter(page);
const input = panel.getByTestId("command-center-input");
const activeRow = panel.getByTestId(
`command-center-workspace-${getServerId()}:${active.workspaceId}`,
);
const archivedRow = panel.getByTestId(
`command-center-workspace-${getServerId()}:${archived.workspaceId}`,
);
await test.step("an empty query never lists archived workspaces", async () => {
await selectCommandCenterTab(panel, "Workspaces");
await expect(activeRow).toBeVisible({ timeout: 30_000 });
await expect(archivedRow).toHaveCount(0);
});
await test.step("a query lists the archived workspace after the active one", async () => {
await input.fill("billing");
await expect(archivedRow).toBeVisible({ timeout: 30_000 });
await expect(archivedRow).toContainText("Archived");
await expect(activeRow).not.toContainText("Archived");
const activeTop = (await activeRow.boundingBox())?.y ?? Number.NaN;
const archivedTop = (await archivedRow.boundingBox())?.y ?? Number.NaN;
expect(archivedTop).toBeGreaterThan(activeTop);
});
await test.step("an agent title finds the archived workspace on All", async () => {
// Opened from the app shell, outside any workspace.
await selectCommandCenterTab(panel, "All", { workspaceOpen: false });
await input.fill("invoice totals");
await expect(archivedRow.getByTestId("command-center-workspace-agent")).toHaveText(
"Audit invoice totals",
{ timeout: 30_000 },
);
await expect(activeRow).toHaveCount(0);
});
await test.step("opening it lands where the workspace can be unarchived", async () => {
await page.keyboard.press("Enter");
await expect(page.getByText("Workspace archived", { exact: true })).toBeVisible({
timeout: 30_000,
});
await expect(page.getByRole("button", { name: "Unarchive", exact: true })).toBeVisible();
});
} finally {
await active.cleanup();
await archived.cleanup();
}
});
test("single-host workspace subtitle omits the host and shows project · branch", async ({
page,
}) => {
@@ -318,7 +229,7 @@ test.describe("Compact sidebar inspection", () => {
title: "Compact destination",
});
try {
await createIdleAgent(seeded.client, {
const agent = await createIdleAgent(seeded.client, {
cwd: seeded.repoPath,
workspaceId: seeded.workspaceId,
title: "Compact root agent",
@@ -335,10 +246,7 @@ test.describe("Compact sidebar inspection", () => {
await openSidebar(page);
const agentSearch = await openCommandCenter(page);
await agentSearch.getByTestId("command-center-input").fill("Compact root agent");
await agentSearch
.getByTestId(`command-center-workspace-${getServerId()}:${seeded.workspaceId}`)
.getByTestId("command-center-workspace-agent")
.click();
await agentSearch.getByTestId(`command-center-agent-${getServerId()}:${agent.id}`).click();
await expect(page.getByRole("button", { name: "Open menu", exact: true })).toBeVisible();
await expect(
page.getByRole("textbox", { name: "Message agent...", exact: true }),
@@ -148,6 +148,23 @@ for (const scenario of [
});
}
test("retrying failed agent initialization keeps the plugin metadata set on New workspace", async ({
creation,
startup,
composerMetadata,
}) => {
await creation.openWorkspaceForm("local");
await composerMetadata.set({ "composer-metadata.tag": "kept" });
await creation.submitPrompt("Start the tagged task.", "Create");
await creation.expectAgentStillStarting();
await startup.fail();
await creation.expectStartupFailure();
await creation.expectOneCreatedWorkspace();
await creation.submitPrompt("Start the tagged task.");
await creation.expectAgentCount(1);
await creation.expectAgentMetadata({ "composer-metadata.tag": "kept" });
});
test("an edited agent draft starts after its first start failed", async ({
creation,
startup,
+50 -2
View File
@@ -1,6 +1,8 @@
import { writeFile, rm, rename } from "node:fs/promises";
import { mkdtemp, writeFile, rm, rename } from "node:fs/promises";
import { tmpdir } from "node:os";
import path from "node:path";
import { copyPluginExample } from "./helpers/plugin-fixture";
import type { Page } from "@playwright/test";
import { copyPluginExample, pluginRequirements } from "./helpers/plugin-fixture";
import { connectNewWorkspaceDaemonClient } from "./helpers/new-workspace";
import { test as base } from "./fixtures";
import {
@@ -14,6 +16,7 @@ import { delayBrowserAgentCreatedStatus } from "./helpers/new-workspace";
export const test = base.extend<{
startup: { release(): Promise<void>; fail(): Promise<void> };
promptRejection: void;
composerMetadata: { set(patch: Record<string, string>): Promise<void> };
creation: Awaited<ReturnType<typeof createCreationScenario>>;
promptRetry: ReturnType<typeof createPromptRetryScenario>;
agentRetries: Awaited<ReturnType<typeof retryNextAgentCreation>>;
@@ -98,6 +101,39 @@ export default function contribute(server) {
await client.close();
}
},
composerMetadata: async ({ page }, provide) => {
const client = await connectNewWorkspaceDaemonClient();
const previous = await client.getDaemonConfig();
const directory = await mkdtemp(path.join(tmpdir(), "paseo-composer-metadata-"));
try {
await writeFile(
path.join(directory, "paseo-plugin.json"),
JSON.stringify({ id: "composer-metadata", requirements: pluginRequirements }),
);
await writeFile(
path.join(directory, "index.client.tsx"),
`import { useComposer } from "@getpaseo/plugin/client";
function Holder() {
globalThis.metadataComposer = useComposer();
return null;
}
export default function contribute(client) {
client.addComposerItem({ id: "holder", Component: Holder });
return () => {};
}`,
);
await client.patchDaemonConfig({ pluginsEnabled: true });
await client.installDirectoryPlugin(directory);
await provide({ set: (patch) => setComposerMetadata(page, patch) });
} finally {
await client.removePlugin("composer-metadata");
await client.patchDaemonConfig({ pluginsEnabled: previous.config.pluginsEnabled });
await rm(directory, { recursive: true, force: true });
await client.close();
}
},
creation: async ({ page }, provide) => {
const creation = await createCreationScenario(page);
try {
@@ -126,3 +162,15 @@ export default function contribute(server) {
}
},
});
type MetadataComposerGlobal = typeof globalThis & {
metadataComposer?: { setMetadata(patch: Record<string, string>): Promise<void> };
};
async function setComposerMetadata(page: Page, patch: Record<string, string>) {
await page.waitForFunction(() => (globalThis as MetadataComposerGlobal).metadataComposer);
await page.evaluate(
(value) => (globalThis as MetadataComposerGlobal).metadataComposer!.setMetadata(value),
patch,
);
}
@@ -26,7 +26,7 @@ const SURFACE_SELECTORS = {
input: '[data-testid="command-center-input"]',
fileSearchStatus: '[data-testid="command-center-file-search-status"]',
results: '[data-testid="command-center-results"]',
tabs: '[data-testid="command-center-tabs"]',
scope: '[data-testid="command-center-files-scope"]',
fileRow: '[data-testid^="command-center-file-row-"]',
fileIcon: '[data-testid="command-center-file-icon"]',
fileLine: '[data-testid="command-center-file-line"]',
@@ -11,7 +11,7 @@ export async function seedSearchableCommandCenter() {
});
try {
const agents = [];
for (let index = 0; index < 3; index += 1) {
for (let index = 0; index < 60; index += 1) {
agents.push(
await createMockIdleAgent(seed.client, {
cwd: seed.repoPath,
@@ -89,17 +89,16 @@ export async function expectOnlyCommandCenterRowRendered(page: Page, resultId: s
expect(renders).toEqual({ [`CommandCenterResultRow:${resultId}`]: { render: 1 } });
}
const WORKSPACE_ROWS =
'[data-testid^="command-center-workspace-"]:not([data-testid="command-center-workspace-subtitle"]):not([data-testid="command-center-workspace-agent"])';
/** The list mounts a window of rows, not every match. */
export async function expectCommandCenterWorkspaceWindow(panel: Locator, total: number) {
const count = await panel.locator(WORKSPACE_ROWS).count();
export async function expectCommandCenterAgentWindow(panel: Locator, total: number) {
const rows = panel.locator(
'[data-testid^="command-center-agent-"]:not([data-testid="command-center-agent-subtitle"])',
);
const count = await rows.count();
expect(count).toBeGreaterThan(0);
expect(count).toBeLessThan(total);
}
export async function scrollToOldestCommandCenterWorkspace(panel: Locator) {
export async function scrollToOldestCommandCenterAgent(panel: Locator) {
await panel.getByTestId("command-center-results").evaluate((element) => {
element.scrollTop = element.scrollHeight;
element.dispatchEvent(new Event("scroll"));
@@ -22,9 +22,14 @@ export async function observeCommandCenterScroll(page: Page): Promise<void> {
const discoverPanel = new MutationObserver(() => {
const panel = document.querySelector<HTMLElement>('[data-testid="command-center-panel"]');
const viewport = panel?.querySelector<HTMLElement>('[data-testid="command-center-results"]');
const firstResult = viewport?.querySelector<HTMLElement>('[role="button"]');
if (!viewport || !firstResult) return;
const firstResult = panel?.querySelector<HTMLElement>('[role="button"]');
if (!panel || !firstResult) return;
let viewport = firstResult.parentElement;
while (viewport && viewport !== panel && viewport.scrollHeight <= viewport.clientHeight) {
viewport = viewport.parentElement;
}
if (!viewport || viewport === panel) return;
discoverPanel.disconnect();
let frame = 0;
@@ -114,8 +119,15 @@ export async function expectVisibleKeyboardNavigationNotToScroll(
for (let index = 0; index < 4; index += 1) await page.keyboard.press("ArrowDown");
const scrollSamples = await panel
.getByTestId("command-center-results")
.evaluate(async (viewport) => {
.getByRole("button")
.first()
.evaluate(async (firstResult) => {
let viewport = firstResult.parentElement;
while (viewport && viewport.scrollHeight <= viewport.clientHeight) {
viewport = viewport.parentElement;
}
if (!viewport) throw new Error("Could not find the command center scroll viewport");
const samples: number[] = [];
for (let frame = 0; frame < 20; frame += 1) {
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
@@ -127,8 +139,7 @@ export async function expectVisibleKeyboardNavigationNotToScroll(
expect(Math.max(...scrollSamples)).toBe(0);
}
/** All leads with three recent workspaces; a query searches every workspace. */
export async function expectRecentWorkspacesUntilSearch(panel: Locator): Promise<void> {
export async function expectWorkspaceResultsToBeLimitedUntilSearch(panel: Locator): Promise<void> {
const workspaces = panel.locator(
'[data-testid^="command-center-workspace-"]:not([data-testid="command-center-workspace-subtitle"])',
);
@@ -139,11 +150,9 @@ export async function expectRecentWorkspacesUntilSearch(panel: Locator): Promise
),
).size;
await expect(panel.getByText("Recent workspaces", { exact: true })).toBeVisible();
await expect.poll(distinctWorkspaceCount).toBe(3);
await expect.poll(distinctWorkspaceCount).toBe(5);
await panel.getByTestId("command-center-input").fill("Command Center Scroll");
await expect(panel.getByText("Recent workspaces", { exact: true })).toHaveCount(0);
await expect.poll(distinctWorkspaceCount).toBe(9);
}
@@ -1,20 +1,5 @@
import { expect, type Locator, type Page } from "@playwright/test";
export type CommandCenterTabName = "All" | "Workspaces" | "Files" | "Actions";
const TAB_PLACEHOLDERS: Record<CommandCenterTabName, string> = {
All: "Search workspaces, files, and actions...",
Workspaces: "Search workspaces...",
Files: "Search files...",
Actions: "Search actions...",
};
/** Outside a workspace there are no files to search, so All does not offer them. */
const TAB_PLACEHOLDERS_WITHOUT_WORKSPACE: Record<CommandCenterTabName, string> = {
...TAB_PLACEHOLDERS,
All: "Search workspaces and actions...",
};
// Opens the command center / global search palette from the sidebar and returns its panel.
export async function openCommandCenter(page: Page): Promise<Locator> {
await page.getByTestId("sidebar-search").click();
@@ -27,46 +12,3 @@ export async function closeCommandCenter(page: Page): Promise<void> {
await page.keyboard.press("Escape");
await expect(page.getByTestId("command-center-panel")).not.toBeVisible();
}
function commandCenterTab(panel: Locator, name: CommandCenterTabName): Locator {
return panel.getByTestId("command-center-tabs").getByRole("button", { name, exact: true });
}
export async function selectCommandCenterTab(
panel: Locator,
name: CommandCenterTabName,
options: { workspaceOpen?: boolean } = {},
): Promise<void> {
await commandCenterTab(panel, name).click();
await expectCommandCenterTab(panel, name, options);
}
/**
* The tab is selected and the search field asks for what that tab lists. Pass
* `{ workspaceOpen: false }` when the command center was opened outside a workspace.
*/
export async function expectCommandCenterTab(
panel: Locator,
name: CommandCenterTabName,
options: { workspaceOpen?: boolean } = {},
): Promise<void> {
const placeholders =
options.workspaceOpen === false ? TAB_PLACEHOLDERS_WITHOUT_WORKSPACE : TAB_PLACEHOLDERS;
await expect(commandCenterTab(panel, name)).toHaveAttribute("aria-selected", "true");
await expect(panel.getByTestId("command-center-input")).toHaveAttribute(
"placeholder",
placeholders[name],
);
}
/** Exactly these tabs are offered, in this order. */
export async function expectCommandCenterTabs(
panel: Locator,
names: readonly CommandCenterTabName[],
): Promise<void> {
await expect(panel.getByTestId("command-center-tabs").getByRole("button")).toHaveText([...names]);
}
export function commandCenterSection(panel: Locator, title: string): Locator {
return panel.getByTestId("command-center-results").getByText(title, { exact: true });
}
@@ -258,6 +258,16 @@ export async function createCreationScenario(page: Page) {
.filter(({ agent }) => agent.workspaceId === workspaceId)
.map(({ agent }) => agent.id);
},
async expectAgentMetadata(metadata: Record<string, unknown>) {
await expect
.poll(
async () =>
(await project.client.fetchAgents()).entries.find(
({ agent }) => agent.workspaceId === workspaceId,
)?.agent.metadata,
)
.toEqual(metadata);
},
async expectAgentTitle(title: string) {
await expect
.poll(
@@ -33,10 +33,8 @@ async function createRunningMockAgent(
return { id: agent.id, title };
}
// Agents are found through their workspace: the query names the agent, the row shows it.
async function searchCommandCenter(page: Page, query: string): Promise<void> {
async function openCommandCenter(page: Page): Promise<void> {
await page.getByTestId("sidebar-search").click();
await page.getByTestId("command-center-input").fill(query);
}
export class DirectoryBootstrapScenario {
@@ -80,10 +78,8 @@ export class DirectoryBootstrapScenario {
const workspaceLink = this.page.getByText(workspace.projectDisplayName, { exact: true });
await expect(workspaceLink).toHaveCount(1);
await expect(workspaceLink).toBeVisible();
await searchCommandCenter(this.page, agent.title);
const agentLink = this.page
.getByTestId("command-center-workspace-agent")
.getByText(agent.title, { exact: true });
await openCommandCenter(this.page);
const agentLink = this.page.getByText(agent.title, { exact: true });
await expect(agentLink).toHaveCount(1);
await expect(agentLink).toBeVisible();
await this.page.keyboard.press("Escape");
@@ -115,10 +111,8 @@ export class DirectoryBootstrapScenario {
const workspaceLink = this.page.getByText(workspace.projectDisplayName, { exact: true });
await expect(workspaceLink).toHaveCount(1);
await expect(workspaceLink).toBeVisible();
await searchCommandCenter(this.page, agent.title);
const agentLink = this.page
.getByTestId("command-center-workspace-agent")
.getByText(agent.title, { exact: true });
await openCommandCenter(this.page);
const agentLink = this.page.getByText(agent.title, { exact: true });
await expect(agentLink).toHaveCount(1);
await expect(agentLink).toBeVisible();
await agentLink.click();
@@ -131,6 +131,7 @@ export interface SeedDaemonClient {
currentModeId: string | null;
status: string;
title?: string | null;
metadata?: Record<string, unknown>;
};
}>;
}>;
-6
View File
@@ -23,12 +23,6 @@ export default defineConfig({
// spec on one worker avoids repeating its file-level setup across daemons.
fullyParallel: false,
workers: Number(process.env.E2E_WORKERS ?? (process.env.CI ? "2" : "1")),
// Workspace packages are already compiled. Tests import them at run time, so
// on a cold cache every worker transpiles the same files and writes them into
// Playwright's shared transform cache without locking. A worker that reads an
// entry mid-write loads an empty module and fails with "does not provide an
// export named".
build: { external: ["**/packages/*/dist/**"] },
retries: process.env.CI ? 1 : 0,
reporter: [["list"]],
use: {
@@ -1,5 +0,0 @@
export type { ArchivedWorkspace, ArchivedWorkspaceAgent } from "./internal/group";
export {
useArchivedWorkspaceSearch,
type ArchivedWorkspaceSearch,
} from "./internal/use-archived-workspace-search";
@@ -1,128 +0,0 @@
import { describe, expect, it } from "vitest";
import type { AggregatedAgent } from "@/hooks/use-aggregated-agents";
import { groupArchivedWorkspaces } from "./group";
const T0 = Date.parse("2026-11-01T10:00:00.000Z");
const minutes = (count: number) => new Date(T0 + count * 60_000);
function historyAgent(input: {
id: string;
serverId?: string;
workspaceId?: string | null;
title?: string | null;
activeAt: number;
archivedAt?: number | null;
workspaceName?: string | null;
branch?: string | null;
cwd?: string;
}): AggregatedAgent {
const cwd = input.cwd ?? "/repos/payments";
return {
id: input.id,
serverId: input.serverId ?? "host-a",
serverLabel: input.serverId ?? "host-a",
title: input.title ?? null,
status: "closed",
turn: { phase: "open", turnId: null, startedAt: null, cancellationRequestId: null },
lastActivityAt: minutes(input.activeAt),
cwd,
workspaceId: input.workspaceId === undefined ? "ws-1" : input.workspaceId,
provider: "claude",
requiresAttention: false,
attentionReason: null,
attentionTimestamp: null,
archivedAt: input.archivedAt == null ? null : minutes(input.archivedAt),
createdAt: minutes(0),
labels: {},
projectPlacement: {
projectKey: "prj-payments",
projectName: "payments",
workspaceName: input.workspaceName === undefined ? "Billing cleanup" : input.workspaceName,
checkout: {
cwd,
isGit: true,
currentBranch: input.branch === undefined ? "billing-cleanup" : input.branch,
remoteUrl: null,
worktreeRoot: cwd,
isPaseoOwnedWorktree: false,
mainRepoRoot: null,
},
},
} as AggregatedAgent;
}
const NO_ACTIVE = new Map<string, ReadonlySet<string>>();
describe("groupArchivedWorkspaces", () => {
it("folds a workspace's agents into one entry led by its most recent agent", () => {
const [workspace] = groupArchivedWorkspaces({
agents: [
historyAgent({ id: "older", title: "Audit invoices", activeAt: 1, archivedAt: 5 }),
historyAgent({ id: "newer", title: "Fix totals", activeAt: 3, archivedAt: 4 }),
],
activeIds: NO_ACTIVE,
});
expect(workspace).toMatchObject({
key: "host-a:ws-1",
serverId: "host-a",
workspaceId: "ws-1",
name: "Billing cleanup",
projectName: "payments",
projectKey: "prj-payments",
branch: "billing-cleanup",
archivedAt: minutes(5),
});
expect(workspace.agents.map((agent) => agent.id)).toEqual(["newer", "older"]);
});
it("leaves out workspaces that are still active on their host", () => {
const workspaces = groupArchivedWorkspaces({
agents: [historyAgent({ id: "a", activeAt: 1, archivedAt: 2 })],
activeIds: new Map([["host-a", new Set(["ws-1"])]]),
});
expect(workspaces).toEqual([]);
});
it("leaves out an inactive workspace none of whose agents were archived", () => {
const workspaces = groupArchivedWorkspaces({
agents: [historyAgent({ id: "a", activeAt: 1, archivedAt: null })],
activeIds: NO_ACTIVE,
});
expect(workspaces).toEqual([]);
});
it("keeps the same workspace ID on two hosts apart and lists the latest archive first", () => {
const workspaces = groupArchivedWorkspaces({
agents: [
historyAgent({ id: "a", serverId: "host-a", activeAt: 1, archivedAt: 2 }),
historyAgent({ id: "b", serverId: "host-b", activeAt: 1, archivedAt: 9 }),
],
activeIds: NO_ACTIVE,
});
expect(workspaces.map((workspace) => workspace.key)).toEqual(["host-b:ws-1", "host-a:ws-1"]);
});
it("skips agents with no workspace and names an unnamed workspace after its folder", () => {
const workspaces = groupArchivedWorkspaces({
agents: [
historyAgent({ id: "loose", workspaceId: null, activeAt: 1, archivedAt: 2 }),
historyAgent({
id: "a",
workspaceName: null,
branch: null,
cwd: "/repos/receipts",
activeAt: 1,
archivedAt: 2,
}),
],
activeIds: NO_ACTIVE,
});
expect(workspaces).toHaveLength(1);
expect(workspaces[0]).toMatchObject({ name: "receipts", branch: null });
});
});
@@ -1,87 +0,0 @@
import type { AggregatedAgent } from "@/hooks/use-aggregated-agents";
export interface ArchivedWorkspaceAgent {
id: string;
title: string | null;
provider: string;
}
/** A workspace the user archived, as agent history describes it. */
export interface ArchivedWorkspace {
/** `serverId:workspaceId` */
key: string;
serverId: string;
workspaceId: string;
name: string;
projectName: string | null;
/** The host's project ID. */
projectKey: string | null;
branch: string | null;
/** The latest archive time among its agents. */
archivedAt: Date;
/** Its agents in this history page, most recently active first. Never empty. */
agents: ArchivedWorkspaceAgent[];
}
/** Which workspaces each host still lists as active. */
export type ActiveWorkspaceIdsByServer = ReadonlyMap<string, ReadonlySet<string>>;
function lastPathSegment(path: string): string {
const parts = path.split(/[\\/]/).filter(Boolean);
return parts[parts.length - 1] ?? path;
}
function checkoutBranch(agent: AggregatedAgent): string | null {
const checkout = agent.projectPlacement?.checkout;
return checkout?.isGit ? checkout.currentBranch : null;
}
/**
* Folds agent history into one entry per archived workspace, newest archive first. A
* workspace its host still lists is active, so it is left out. So is an inactive workspace
* with no archived agent: the user never put it away (a background workspace, for example).
*/
export function groupArchivedWorkspaces(input: {
agents: readonly AggregatedAgent[];
activeIds: ActiveWorkspaceIdsByServer;
}): ArchivedWorkspace[] {
const byKey = new Map<string, ArchivedWorkspace & { archivedAtOrNull: Date | null }>();
const newestFirst = [...input.agents].sort(
(left, right) => right.lastActivityAt.getTime() - left.lastActivityAt.getTime(),
);
for (const agent of newestFirst) {
const workspaceId = agent.workspaceId;
if (!workspaceId || input.activeIds.get(agent.serverId)?.has(workspaceId)) continue;
const key = `${agent.serverId}:${workspaceId}`;
const archivedAt = agent.archivedAt ? new Date(agent.archivedAt) : null;
const summary = { id: agent.id, title: agent.title ?? null, provider: agent.provider };
const existing = byKey.get(key);
if (existing) {
existing.agents.push(summary);
if (archivedAt && (!existing.archivedAtOrNull || archivedAt > existing.archivedAtOrNull)) {
existing.archivedAtOrNull = archivedAt;
}
continue;
}
// The most recent agent describes the workspace: it saw its latest name and branch.
const placement = agent.projectPlacement;
byKey.set(key, {
key,
serverId: agent.serverId,
workspaceId,
name: placement?.workspaceName || lastPathSegment(agent.cwd),
projectName: placement?.projectName ?? null,
projectKey: placement?.projectKey ?? null,
branch: checkoutBranch(agent),
archivedAt: archivedAt ?? new Date(0),
archivedAtOrNull: archivedAt,
agents: [summary],
});
}
const archived: ArchivedWorkspace[] = [];
for (const { archivedAtOrNull, ...workspace } of byKey.values()) {
if (archivedAtOrNull) archived.push({ ...workspace, archivedAt: archivedAtOrNull });
}
return archived.sort((left, right) => right.archivedAt.getTime() - left.archivedAt.getTime());
}
@@ -1,83 +0,0 @@
import { useMemo } from "react";
import { useShallow } from "zustand/shallow";
import { useAgentHistory } from "@/hooks/use-agent-history";
import { useDebouncedValue } from "@/hooks/use-debounced-value";
import { useSessionStore, type WorkspaceDescriptor } from "@/stores/session-store";
import {
groupArchivedWorkspaces,
type ActiveWorkspaceIdsByServer,
type ArchivedWorkspace,
} from "./group";
const SEARCH_DEBOUNCE_MS = 200;
const NO_WORKSPACES: Record<string, ReadonlyMap<string, WorkspaceDescriptor>> = {};
const NO_ARCHIVED_WORKSPACES: ArchivedWorkspace[] = [];
export interface ArchivedWorkspaceSearch {
/** Newest archive first. Empty without a query. */
workspaces: ArchivedWorkspace[];
/**
* The host matched these for the current query. Its search forgives typos, so its matches
* can include rows the caller cannot match itself. False while the previous query's
* results stand in for the next one; those rows must still match the query on their own.
*/
matchedByHost: boolean;
/** Still searching for the current query, debounce included. */
pending: boolean;
}
function useActiveWorkspaceIds(enabled: boolean): ActiveWorkspaceIdsByServer {
// Each host's workspace map is replaced only when its workspaces change, so this does not
// re-render on agent activity.
const workspacesByServer = useSessionStore(
useShallow((state) =>
enabled
? Object.fromEntries(
Object.entries(state.sessions).map(([serverId, session]) => [
serverId,
session.workspaces,
]),
)
: NO_WORKSPACES,
),
);
return useMemo(
() =>
new Map(
Object.entries(workspacesByServer).map(([serverId, workspaces]) => [
serverId,
new Set(workspaces.keys()),
]),
),
[workspacesByServer],
);
}
/**
* Archived workspaces whose name, project, branch, or agent titles match `query`, searched on
* every host that supports history search. Hosts that predate it contribute nothing.
*/
export function useArchivedWorkspaceSearch(
query: string,
options: { enabled: boolean },
): ArchivedWorkspaceSearch {
const trimmed = query.trim();
const search = useDebouncedValue(trimmed, SEARCH_DEBOUNCE_MS);
const enabled = options.enabled && trimmed.length > 0;
const activeIds = useActiveWorkspaceIds(enabled);
const history = useAgentHistory({
search,
enabled: enabled && search.length > 0,
searchableHostsOnly: true,
keepPreviousResults: true,
});
const workspaces = useMemo(
() =>
enabled
? groupArchivedWorkspaces({ agents: history.agents, activeIds })
: NO_ARCHIVED_WORKSPACES,
[activeIds, enabled, history.agents],
);
const matchedByHost = search === trimmed && !history.isLoading && !history.isPreviousResults;
return { workspaces, matchedByHost, pending: enabled && !matchedByHost };
}
@@ -39,21 +39,6 @@ function createDeferred<T>() {
return { promise, resolve, reject };
}
/**
* Resolves a pending lookup and waits until React Query has delivered the result. It delivers on a
* timer, which would otherwise fire after the test, when jsdom is gone.
*/
async function resolveLookupAndDeliver(
lookup: ReturnType<typeof createDeferred<DirectorySuggestionResult>>,
result: DirectorySuggestionResult,
): Promise<void> {
await act(async () => {
lookup.resolve(result);
await lookup.promise;
await new Promise((resolve) => setTimeout(resolve, 0));
});
}
interface OpenedFile {
target: InlinePathTarget;
disposition: OpenFileDisposition;
@@ -337,12 +322,11 @@ describe("useFileLink", () => {
act(() => {
result.current.setWorkspaceRoot("/Users/test/other");
});
await resolveLookupAndDeliver(
deferred,
resolvedSuggestions([{ path: "docs/dumm.md", kind: "file" }]),
);
deferred.resolve(resolvedSuggestions([{ path: "docs/dumm.md", kind: "file" }]));
expect(getDirectorySuggestions).toHaveBeenCalledTimes(1);
await waitFor(() => {
expect(getDirectorySuggestions).toHaveBeenCalledTimes(1);
});
expect(openedFiles).toEqual([]);
});
});
@@ -1,71 +0,0 @@
import React, { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, expect, it, vi } from "vitest";
import { persistAttachmentFromBlob } from "@/attachments/service";
import type { AttachmentMetadata } from "@/attachments/types";
import { type AttachmentPreviewUrl, useAttachmentPreviewUrl } from "./use-attachment-preview-url";
let root: Root;
let container: HTMLDivElement;
let latest: AttachmentPreviewUrl | null = null;
function PreviewProbe({ attachment }: { attachment: AttachmentMetadata | null }) {
latest = useAttachmentPreviewUrl(attachment);
return null;
}
async function render(attachment: AttachmentMetadata | null) {
await act(async () => root.render(<PreviewProbe attachment={attachment} />));
}
async function waitForReady(): Promise<string> {
await vi.waitFor(() => expect(latest?.status).toBe("ready"));
if (latest?.status !== "ready") throw new Error("preview never resolved");
return latest.url;
}
beforeEach(() => {
vi.stubGlobal("React", React);
container = document.createElement("div");
document.body.appendChild(container);
root = createRoot(container);
latest = null;
});
afterEach(() => {
act(() => root.unmount());
container.remove();
vi.unstubAllGlobals();
});
it("never hands back a URL it already released when the same attachment returns", async () => {
const attachment = await persistAttachmentFromBlob({
blob: new Blob([new Uint8Array([1, 2, 3])], { type: "image/png" }),
mimeType: "image/png",
fileName: "shot.png",
});
await render(attachment);
const released = await waitForReady();
await render(null);
await render(attachment);
expect(latest).not.toEqual({ status: "ready", url: released });
expect(await waitForReady()).not.toBe(released);
});
it("retries a failed attachment from loading when it returns", async () => {
const stored = await persistAttachmentFromBlob({
blob: new Blob([new Uint8Array([1, 2, 3])], { type: "image/png" }),
mimeType: "image/png",
fileName: "shot.png",
});
const missing = { ...stored, id: "missing-attachment", storageKey: "missing-attachment" };
await render(missing);
await vi.waitFor(() => expect(latest?.status).toBe("failed"));
await render(null);
await render(missing);
expect(latest).toEqual({ status: "loading" });
});
@@ -2,75 +2,62 @@ import { useEffect, useRef, useState } from "react";
import type { AttachmentMetadata } from "@/attachments/types";
import { releaseAttachmentPreviewUrl, resolveAttachmentPreviewUrl } from "@/attachments/service";
export type AttachmentPreviewUrl =
| { status: "loading" }
| { status: "ready"; url: string }
| { status: "failed" };
const LOADING: AttachmentPreviewUrl = { status: "loading" };
const FAILED: AttachmentPreviewUrl = { status: "failed" };
function attachmentKey(attachment: AttachmentMetadata | null | undefined): string | null {
if (!attachment) return null;
return [attachment.id, attachment.storageType, attachment.storageKey, attachment.mimeType].join(
"\u0000",
);
}
/**
* Resolves a displayable URL for a stored attachment. Stays `loading` until the URL for the
* current attachment resolves, so a caller never shows a failure, or the previous attachment's
* URL, while the next one is still resolving. A missing attachment stays `loading`.
*/
export function useAttachmentPreviewUrl(
attachment: AttachmentMetadata | null | undefined,
): AttachmentPreviewUrl {
const [resolved, setResolved] = useState<{
key: string;
preview: AttachmentPreviewUrl;
} | null>(null);
): string | null {
const [url, setUrl] = useState<string | null>(null);
const activeAttachmentRef = useRef<AttachmentMetadata | null>(null);
const attachmentRef = useRef(attachment);
attachmentRef.current = attachment;
const key = attachmentKey(attachment);
const id = attachment?.id;
const storageType = attachment?.storageType;
const storageKey = attachment?.storageKey;
const mimeType = attachment?.mimeType;
useEffect(() => {
const current = attachmentRef.current;
if (!current || key === null) {
return;
}
let disposed = false;
let currentUrl: string | null = null;
const current = attachmentRef.current;
activeAttachmentRef.current = current ?? null;
if (!current) {
setUrl(null);
return;
}
void (async () => {
try {
const url = await resolveAttachmentPreviewUrl(current);
const resolved = await resolveAttachmentPreviewUrl(current);
if (disposed) {
await releaseAttachmentPreviewUrl({ attachment: current, url });
await releaseAttachmentPreviewUrl({ attachment: current, url: resolved });
return;
}
currentUrl = url;
setResolved({ key, preview: { status: "ready", url } });
currentUrl = resolved;
setUrl(resolved);
} catch (error) {
console.error("[attachments] Failed to resolve preview URL", {
attachmentId: current.id,
error,
});
if (!disposed) {
setResolved({ key, preview: FAILED });
setUrl(null);
}
}
})();
return () => {
disposed = true;
if (currentUrl) {
void releaseAttachmentPreviewUrl({ attachment: current, url: currentUrl });
const activeAttachment = activeAttachmentRef.current;
if (!currentUrl || !activeAttachment) {
return;
}
// A result lives only as long as its lookup. Kept, the same attachment coming back would
// read a released URL, or an old failure, until the next lookup lands.
setResolved((previous) => (previous?.key === key ? null : previous));
void releaseAttachmentPreviewUrl({
attachment: activeAttachment,
url: currentUrl,
});
};
}, [key]);
}, [id, storageType, storageKey, mimeType]);
return resolved !== null && resolved.key === key ? resolved.preview : LOADING;
return url;
}
+293 -410
View File
@@ -24,12 +24,10 @@ import {
useSyncExternalStore,
} from "react";
import { useTranslation } from "react-i18next";
import { Check, ChevronRight } from "lucide-react-native";
import { Check, ChevronRight, Folder, X } from "lucide-react-native";
import { StyleSheet, withUnistyles } from "react-native-unistyles";
import { BottomSheetFlatList, type BottomSheetFlatListMethods } from "@gorhom/bottom-sheet";
import { resolveAgentLabel } from "@/agent-presentation";
import { useArchivedWorkspaceSearch, type ArchivedWorkspace } from "@/archived-workspaces";
import { ArchivedBadge } from "@/components/archived-badge";
import { useAgentDescriptor, resolveAgentLabel } from "@/agent-presentation";
import { StatusIcon } from "@/components/status-icon";
import { useWorkspaceStatus } from "@/workspace-status";
import type { SurfaceBackdrop } from "@/styles/surface-backdrop";
@@ -37,14 +35,12 @@ import type { Theme } from "@/styles/theme";
import { HighlightedText, type HighlightedTextProps } from "@/components/ui/highlighted-text";
import { findHighlightRanges } from "@/components/ui/highlighted-text-segments";
import { MaterialFileIcon } from "@/components/material-file-icon";
import { useProviderIcon } from "@/components/provider-icons";
import { ProjectIconView } from "@/components/project-icon-view";
import { LoadingSpinner } from "@/components/ui/loading-spinner";
import {
EditingTextInput as TextInput,
type EditingTextInputHandle,
} from "@/components/ui/text-input";
import { SegmentedControl, type SegmentedControlOption } from "@/components/ui/segmented-control";
import { Shortcut } from "@/components/ui/shortcut";
import {
IsolatedBottomSheetModal,
@@ -52,20 +48,18 @@ import {
} from "@/components/ui/isolated-bottom-sheet-modal";
import { useIsCompactFormFactor } from "@/constants/layout";
import { isNative, isWeb } from "@/constants/platform";
import { useAggregatedAgents, type AggregatedAgent } from "@/hooks/use-aggregated-agents";
import { useAggregatedAgents } from "@/hooks/use-aggregated-agents";
import { useProjects } from "@/hooks/use-projects";
import { useTimeAgo } from "@/hooks/use-time-ago";
import { createProjectIconTarget } from "@/projects/icon-target";
import { useProjectIcons } from "@/projects/icons";
import { OverlayLayerProvider, useGlobalOverlayLayer } from "@/lib/overlay-root";
import { useHostRuntimeConnectionStatuses, useHosts } from "@/runtime/host-runtime";
import { useHydratedWorkspaceServerIds } from "@/stores/session-store-hooks";
import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
import { useSidebarViewStore } from "@/stores/sidebar-view-store";
import { useHosts } from "@/runtime/host-runtime";
import {
navigateToWorkspace,
useActiveWorkspaceSelection,
} from "@/stores/navigation-active-workspace-store";
useKeyboardShortcutsStore,
type CommandCenterScope,
} from "@/stores/keyboard-shortcuts-store";
import { navigateToWorkspace } from "@/stores/navigation-active-workspace-store";
import { useKeyboardActionDispatcher } from "@/keyboard/keyboard-action-dispatcher-context";
import {
clearCommandCenterFocusRestoreElement,
@@ -73,8 +67,8 @@ import {
} from "@/utils/command-center-focus-restore";
import { focusWithRetries } from "@/utils/web-focus";
import { navigateToAgent } from "@/utils/navigate-to-agent";
import { shortenPath } from "@/utils/shorten-path";
import { projectIconPlaceholderLabelFromDisplayName } from "@/utils/project-display-name";
import { getProjectSummaryForHostProject } from "@/utils/projects";
import {
COMMAND_CENTER_LINE_HEIGHT,
COMMAND_CENTER_LIST_METRICS,
@@ -82,23 +76,21 @@ import {
type CommandCenterListMetrics,
} from "./list-metrics";
import { useCommandCenterContributions } from "./provider";
import { createWorkspaceRanker } from "./workspace-search";
import { filterAndRankWorkspaces } from "./workspace-search";
import {
buildContributionSections,
filterAndRankBuiltInResults,
joinSubtitleParts,
PINNED_SECTION_BAND,
projectCommandCenterRows,
type CommandCenterAgentResult,
type CommandCenterFileResult,
type CommandCenterListRow,
type CommandCenterResult,
type CommandCenterWorkspaceAgent,
type CommandCenterResultSection,
type CommandCenterSearchFields,
type CommandCenterWorkspaceResult,
} from "./results";
import { buildCommandCenterSections } from "./sections";
import {
availableCommandCenterTabs,
resolveCommandCenterTab,
rotateCommandCenterTab,
type CommandCenterTab,
} from "./tabs";
import { createCommandCenterInteraction, type CommandCenterInteraction } from "./interaction";
import { useWorkspaceFileSearch } from "./workspace-file-search";
@@ -108,16 +100,23 @@ const ThemedBottomSheetTextInput = withUnistyles(TextInput, (theme) => ({
const ThemedTextInput = withUnistyles(TextInput, (theme) => ({
placeholderTextColor: theme.colors.foregroundMuted,
}));
const ThemedFolder = withUnistyles(Folder, (theme) => ({ color: theme.colors.foregroundMuted }));
const ThemedCheck = withUnistyles(Check, (theme) => ({ color: theme.colors.foreground }));
const ThemedChevronRight = withUnistyles(ChevronRight, (theme) => ({
color: theme.colors.foregroundMuted,
}));
const ThemedX = withUnistyles(X, (theme) => ({ color: theme.colors.foregroundMuted }));
const ThemedLoadingSpinner = withUnistyles(LoadingSpinner, (theme) => ({
color: theme.colors.foregroundMuted,
}));
const COMMAND_CENTER_SNAP_POINTS = ["60%", "90%"];
const KEYBOARD_SHOULD_PERSIST_TAPS = "always" as const;
/** `cwd` is not rendered, so a path match must never outrank a match on text the user can see. */
function agentSearchFields(result: CommandCenterAgentResult): CommandCenterSearchFields {
return { visible: [result.title, result.subtitle], hidden: [result.agent.cwd] };
}
function createWorkspaceResultAction(serverId: string, workspaceId: string) {
return () => {
clearCommandCenterFocusRestoreElement();
@@ -125,73 +124,28 @@ function createWorkspaceResultAction(serverId: string, workspaceId: string) {
};
}
function createAgentResultAction(serverId: string) {
return (agentId: string) => {
function createAgentResultAction(serverId: string, agentId: string) {
return () => {
clearCommandCenterFocusRestoreElement();
navigateToAgent({ serverId, agentId });
};
}
const NO_WORKSPACE_AGENTS: readonly CommandCenterWorkspaceAgent[] = [];
/** Each workspace's titled agents, most recent first, keyed `serverId:workspaceId`. */
function groupWorkspaceAgents(
agents: readonly AggregatedAgent[],
): Map<string, CommandCenterWorkspaceAgent[]> {
const byWorkspace = new Map<string, CommandCenterWorkspaceAgent[]>();
const newestFirst = [...agents].sort(
(left, right) => right.lastActivityAt.getTime() - left.lastActivityAt.getTime(),
);
for (const agent of newestFirst) {
const title = resolveAgentLabel(agent.title);
if (!agent.workspaceId || !title) continue;
const key = `${agent.serverId}:${agent.workspaceId}`;
const list = byWorkspace.get(key) ?? [];
list.push({ id: agent.id, title, provider: agent.provider });
byWorkspace.set(key, list);
}
return byWorkspace;
}
function createArchivedAgentAction(serverId: string, workspaceId: string) {
// Opening on an agent with the tab pinned is what offers Unarchive, as History does.
return (agentId: string) => {
clearCommandCenterFocusRestoreElement();
navigateToAgent({ serverId, agentId, workspaceId, pin: true });
};
}
function titledAgents(
agents: readonly { id: string; title: string | null; provider: string }[],
): CommandCenterWorkspaceAgent[] {
return agents.flatMap((agent) => {
const title = resolveAgentLabel(agent.title);
return title ? [{ id: agent.id, title, provider: agent.provider }] : [];
});
}
interface WorkspaceRows {
active: CommandCenterWorkspaceResult[];
archived: CommandCenterWorkspaceResult[];
/** The workspace list has not loaded yet, so rows are still arriving. */
loading: boolean;
}
/**
* Build every workspace row. Deliberately not keyed on `query`: none of this work depends on
* what was typed. Ordering belongs to the workspace ranker, which ranks on every keystroke.
* Archived rows come from the host's history search, so they change with its results.
* Build every pinned row. Deliberately not keyed on `query`: none of this work depends on what
* was typed. Ordering belongs to `filterAndRankBuiltInResults`, which ranks on every keystroke.
*/
function useWorkspaceRows(
open: boolean,
archivedWorkspaces: readonly ArchivedWorkspace[],
): WorkspaceRows {
const previousRows = useRef(new Map<string, CommandCenterWorkspaceResult>());
const { agents, isInitialLoad: agentsLoading } = useAggregatedAgents({ demand: open });
const { projects, isLoading: projectsLoading } = useProjects({ enabled: open });
const hosts = useHosts();
const workspacesArriving = useWorkspacesArriving(open, hosts);
const showHost = hosts.length > 1;
function useBuiltInRows(open: boolean): {
workspaces: CommandCenterWorkspaceResult[];
agents: CommandCenterAgentResult[];
} {
const { t } = useTranslation();
const previousRows = useRef(
new Map<string, CommandCenterAgentResult | CommandCenterWorkspaceResult>(),
);
const { agents } = useAggregatedAgents({ demand: open });
const { projects } = useProjects({ enabled: open });
const showHost = useHosts().length > 1;
const iconTargets = useMemo(
() =>
open
@@ -209,26 +163,24 @@ function useWorkspaceRows(
);
const iconDataByProjectViewKey = useProjectIcons({ projects: iconTargets });
const active = useMemo(() => {
return useMemo(() => {
if (!open) {
previousRows.current.clear();
return [];
return { workspaces: [], agents: [] };
}
// Workspace IDs identify immutable navigation targets. Reuse their callbacks and unchanged
// Built-in IDs identify immutable navigation targets. Reuse their callbacks and unchanged
// row data so a directory update does not invalidate every mounted ResultRow.
const nextRows = new Map<string, CommandCenterWorkspaceResult>();
const preserve = (row: CommandCenterWorkspaceResult): CommandCenterWorkspaceResult => {
const nextRows = new Map<string, CommandCenterAgentResult | CommandCenterWorkspaceResult>();
const preserve = <T extends CommandCenterAgentResult | CommandCenterWorkspaceResult>(
row: T,
): T => {
const previous = previousRows.current.get(row.id);
if (previous) {
row.run = previous.run;
row.openAgent = previous.openAgent;
}
const stable = previous && equal(previous, row) ? previous : row;
if (previous) row.run = previous.run;
const stable = previous && equal(previous, row) ? (previous as T) : row;
nextRows.set(row.id, stable);
return stable;
};
const agentsByWorkspace = groupWorkspaceAgents(agents);
const rows: CommandCenterWorkspaceResult[] = [];
const allWorkspaces: CommandCenterWorkspaceResult[] = [];
for (const project of projects) {
const workspaceProject = {
viewKey: project.viewKey,
@@ -238,11 +190,10 @@ function useWorkspaceRows(
for (const host of project.hosts) {
for (const workspace of host.workspaces) {
if (workspace.archivingAt) continue;
const key = `${host.serverId}:${workspace.id}`;
rows.push(
allWorkspaces.push(
preserve({
kind: "workspace",
id: `workspace:${key}`,
id: `workspace:${host.serverId}:${workspace.id}`,
title: workspace.title ?? workspace.name,
subtitle: joinSubtitleParts([
showHost ? host.serverName : null,
@@ -254,93 +205,66 @@ function useWorkspaceRows(
project: workspaceProject,
changeRequestNumber: workspace.changeRequestNumber,
activityAt: workspace.statusEnteredAt,
agents: agentsByWorkspace.get(key) ?? NO_WORKSPACE_AGENTS,
matchedAgent: null,
archived: false,
background: workspace.background,
run: createWorkspaceResultAction(host.serverId, workspace.id),
openAgent: createAgentResultAction(host.serverId),
}),
);
}
}
}
previousRows.current = nextRows;
return rows;
}, [agents, iconDataByProjectViewKey, open, projects, showHost]);
const archived = useMemo(() => {
const activeIds = new Set(active.map((row) => row.id));
const hostLabels = new Map(hosts.map((host) => [host.serverId, host.label]));
return archivedWorkspaces.flatMap<CommandCenterWorkspaceResult>((workspace) => {
const id = `workspace:${workspace.key}`;
// The host's history can trail its workspace list; the active row wins.
if (activeIds.has(id)) return [];
const project = workspace.projectKey
? getProjectSummaryForHostProject(projects, workspace.serverId, workspace.projectKey)
const workspaceTitleByKey = new Map(
allWorkspaces.map((workspace) => [workspace.id.slice("workspace:".length), workspace.title]),
);
const agentRows = agents.map<CommandCenterAgentResult>((agent) => {
const workspaceTitle = agent.workspaceId
? workspaceTitleByKey.get(`${agent.serverId}:${agent.workspaceId}`)
: undefined;
const projectName = project?.projectName ?? workspace.projectName ?? workspace.name;
const openAgent = createArchivedAgentAction(workspace.serverId, workspace.workspaceId);
const latestAgentId = workspace.agents[0].id;
return [
{
kind: "workspace",
id,
title: workspace.name,
subtitle: joinSubtitleParts([
showHost ? (hostLabels.get(workspace.serverId) ?? workspace.serverId) : null,
projectName,
workspace.branch,
]),
serverId: workspace.serverId,
workspaceId: workspace.workspaceId,
project: {
viewKey: project?.viewKey ?? `archived:${workspace.key}`,
name: projectName,
iconDataUri: project ? (iconDataByProjectViewKey.get(project.viewKey) ?? null) : null,
},
changeRequestNumber: null,
activityAt: workspace.archivedAt,
agents: titledAgents(workspace.agents),
matchedAgent: null,
archived: true,
background: false,
run: () => openAgent(latestAgentId),
openAgent,
},
];
return preserve({
kind: "agent",
id: `agent:${agent.serverId}:${agent.id}`,
agent,
title: resolveAgentLabel(agent.title) ?? t("workspace.tabs.loading"),
subtitle: joinSubtitleParts([
showHost ? agent.serverLabel : null,
workspaceTitle ?? shortenPath(agent.cwd),
]),
activityAt: agent.lastActivityAt,
run: createAgentResultAction(agent.serverId, agent.id),
});
});
}, [active, archivedWorkspaces, hosts, iconDataByProjectViewKey, projects, showHost]);
return {
active,
archived,
// Opening a workspace route loads that workspace before the rest of the directory, so rows
// are no sign that the list is complete.
loading: agentsLoading || projectsLoading || workspacesArriving,
};
previousRows.current = nextRows;
return { workspaces: allWorkspaces, agents: agentRows };
}, [agents, iconDataByProjectViewKey, open, projects, showHost, t]);
}
/**
* An online host's workspaces have not arrived yet. Its agent directory reports ready before
* the workspace snapshot lands, so until then the workspace rows are incomplete.
*/
function useWorkspacesArriving(open: boolean, hosts: readonly { serverId: string }[]): boolean {
const serverIds = useMemo(() => (open ? hosts.map((host) => host.serverId) : []), [hosts, open]);
const connectionStatuses = useHostRuntimeConnectionStatuses(serverIds);
const hydratedServerIds = useHydratedWorkspaceServerIds(serverIds);
return serverIds.some(
(serverId) =>
connectionStatuses.get(serverId) === "online" && !hydratedServerIds.includes(serverId),
);
function useBuiltInSections(open: boolean, query: string): CommandCenterResultSection[] {
const { t } = useTranslation();
const rows = useBuiltInRows(open);
return useMemo(() => {
if (!open) return [];
return [
{
id: "workspaces",
band: PINNED_SECTION_BAND,
rank: 2,
title: t("shell.commandCenter.workspaces"),
results: filterAndRankWorkspaces(rows.workspaces, query),
},
{
id: "agents",
band: PINNED_SECTION_BAND,
rank: 3,
title: t("shell.commandCenter.agents"),
results: filterAndRankBuiltInResults(rows.agents, query, agentSearchFields),
},
];
}, [open, query, rows, t]);
}
interface CommandCenterState {
open: boolean;
/** The tabs on offer, in the order Tab walks them. */
tabs: readonly CommandCenterTab[];
tab: CommandCenterTab;
selectTab(tab: CommandCenterTab): void;
scope: CommandCenterScope;
clearScope(): void;
query: string;
setQuery(query: string): void;
activeId: string | null;
@@ -351,7 +275,7 @@ interface CommandCenterState {
fileSearchError: string | null;
close(): void;
select(result: CommandCenterResult): void;
key(event: { key: string; shiftKey?: boolean }): boolean;
key(key: string): boolean;
}
function useCommandCenterState(
@@ -361,95 +285,62 @@ function useCommandCenterState(
const keyboardActionDispatcher = useKeyboardActionDispatcher();
const { t } = useTranslation();
const open = useKeyboardShortcutsStore((state) => state.commandCenterOpen);
const requestedTab = useKeyboardShortcutsStore((state) => state.commandCenterTab);
const scope = useKeyboardShortcutsStore((state) => state.commandCenterScope);
const setOpen = useKeyboardShortcutsStore((state) => state.setCommandCenterOpen);
const setTab = useKeyboardShortcutsStore((state) => state.setCommandCenterTab);
const setScope = useKeyboardShortcutsStore((state) => state.setCommandCenterScope);
const snapshot = useCommandCenterContributions();
const inputRef = useRef<EditingTextInputHandle>(null);
const previousOpenRef = useRef(open);
const { query, activeId } = useSyncExternalStore(interaction.subscribe, interaction.getSnapshot);
const activeWorkspace = useActiveWorkspaceSelection();
const hasWorkspace = activeWorkspace !== null;
const tabs = useMemo(() => availableCommandCenterTabs({ hasWorkspace }), [hasWorkspace]);
const tab = resolveCommandCenterTab(requestedTab, tabs);
const showBackground = useSidebarViewStore((state) => state.showBackground);
const listsWorkspaces = tab === "all" || tab === "workspaces";
const archivedSearch = useArchivedWorkspaceSearch(query, {
enabled: open && listsWorkspaces,
});
const workspaceRows = useWorkspaceRows(open, archivedSearch.workspaces);
const [rankWorkspaces] = useState(createWorkspaceRanker);
const currentWorkspaceId = activeWorkspace
? `workspace:${activeWorkspace.serverId}:${activeWorkspace.workspaceId}`
: null;
const builtInSections = useBuiltInSections(open, query);
const {
entries: fileSearchEntries,
loading: fileSearchLoading,
error: fileSearchError,
openFile,
} = useWorkspaceFileSearch({
enabled:
open &&
tabs.includes("files") &&
(tab === "files" || (tab === "all" && Boolean(query.trim()))),
enabled: open && (scope === "files" || Boolean(query.trim())),
query,
});
const files = useMemo(
() =>
fileSearchEntries.map<CommandCenterFileResult>((entry) => ({
kind: "file",
id: `file:${entry.path}`,
filePath: entry.path,
title: entry.name,
subtitle: entry.directory,
run: () => openFile(entry.path),
})),
[fileSearchEntries, openFile],
);
const sections = useMemo(
() =>
open
? buildCommandCenterSections({
tab,
query,
rankWorkspaces,
workspaces: workspaceRows.active,
archivedWorkspaces: workspaceRows.archived,
archivedMatchedByHost: archivedSearch.matchedByHost,
showBackground,
currentWorkspaceId,
contributions: snapshot.contributions,
files,
titles: {
recentWorkspaces: t("shell.commandCenter.recentWorkspaces"),
workspaces: t("shell.commandCenter.workspaces"),
files: t("shell.commandCenter.files"),
},
})
: [],
[
archivedSearch.matchedByHost,
currentWorkspaceId,
files,
open,
query,
rankWorkspaces,
showBackground,
snapshot.contributions,
t,
tab,
workspaceRows,
],
const fileSections = useMemo<CommandCenterResultSection[]>(() => {
const results = fileSearchEntries.map<CommandCenterFileResult>((entry) => ({
kind: "file",
id: `file:${entry.path}`,
filePath: entry.path,
title: entry.name,
subtitle: entry.directory,
run: () => openFile(entry.path),
}));
// File rows are matched by the daemon, so they carry no client-side score and cannot be
// relevance-compared against the rows that do. Pinning them keeps the section comparator
// total: band is decided before any score is read.
return [
{
id: "files",
band: PINNED_SECTION_BAND,
rank: 4,
title: t("shell.commandCenter.files"),
results,
},
];
}, [fileSearchEntries, openFile, t]);
const contributionSections = useMemo(
() => buildContributionSections(snapshot.contributions, query),
[query, snapshot.contributions],
);
const projection = useMemo(
() => projectCommandCenterRows(sections, listMetrics),
[listMetrics, sections],
() =>
projectCommandCenterRows(
scope === "files"
? fileSections
: [...contributionSections, ...fileSections, ...builtInSections],
listMetrics,
),
[builtInSections, contributionSections, fileSections, listMetrics, scope],
);
const loading =
fileSearchLoading || (listsWorkspaces && (archivedSearch.pending || workspaceRows.loading));
useLayoutEffect(() => {
interaction.update({ open, tab, query, projection, loading });
}, [interaction, open, tab, query, projection, loading]);
interaction.update({ open, scope, query, projection, loading: fileSearchLoading });
}, [interaction, open, scope, query, projection, fileSearchLoading]);
const close = useCallback(() => setOpen(false), [setOpen]);
const select = useCallback(
@@ -459,29 +350,16 @@ function useCommandCenterState(
},
[setOpen],
);
const selectTab = useCallback(
(next: CommandCenterTab) => {
setTab(next);
// A tab click must not take typing away from the search field.
inputRef.current?.focus();
},
[setTab],
);
const key = useCallback(
(event: { key: string; shiftKey?: boolean }): boolean => {
(pressed: string): boolean => {
if (!open) return false;
const pressed = event.key;
const results = projection.selectableResults;
if (pressed === "Escape") {
close();
return true;
}
if (pressed === "Tab") {
setTab(rotateCommandCenterTab(tab, event.shiftKey ? "previous" : "next", tabs));
return true;
}
if (pressed === "Backspace" && !query.trim() && tab !== "all") {
setTab("all");
if (pressed === "Backspace" && !query.trim() && scope) {
setScope(null);
return true;
}
if (pressed === "Enter") {
@@ -499,10 +377,9 @@ function useCommandCenterState(
projection.selectableResults,
query,
activeId,
tab,
tabs,
scope,
select,
setTab,
setScope,
interaction,
],
);
@@ -528,9 +405,8 @@ function useCommandCenterState(
return {
open,
tabs,
tab,
selectTab,
scope,
clearScope: () => setScope(null),
query,
setQuery: interaction.setQuery,
activeId,
@@ -660,38 +536,55 @@ function SubtitleWithTimestamp({
);
}
/**
* The third line of a workspace that matched only through one of its agents: which agent, so the
* user can tell why the row is here. It starts on the title's rail.
*/
function MatchedAgentLine({
agent,
serverId,
const providerIconMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
function AgentResultContent({
result,
query,
backdrop,
}: {
agent: CommandCenterWorkspaceAgent;
serverId: string;
result: CommandCenterAgentResult;
query: string;
backdrop: SurfaceBackdrop;
}) {
const ProviderIcon = useProviderIcon(agent.provider, serverId);
const Icon = useMemo(() => withUnistyles(ProviderIcon, providerIconMapping), [ProviderIcon]);
const agent = result.agent;
const descriptor = useAgentDescriptor(
{ kind: "agent", agentId: agent.id },
{ serverId: agent.serverId },
);
const Icon = useMemo(
() => withUnistyles(descriptor.icon, providerIconMapping),
[descriptor.icon],
);
return (
<View style={styles.agentLine} testID="command-center-workspace-agent">
<View style={styles.agentLineIcon}>
<Icon size={12} />
<View style={styles.rowContent} testID={`command-center-agent-${agent.serverId}:${agent.id}`}>
<View style={styles.rowMain}>
<View style={styles.iconSlot}>
<StatusIcon statusBucket={descriptor.statusBucket} size={16} backdrop={backdrop}>
<View accessibilityRole="image" accessibilityLabel={descriptor.subtitle}>
<Icon size={16} />
</View>
</StatusIcon>
</View>
<View style={styles.textContent}>
<QueryHighlightedText
query={query}
text={result.title}
style={styles.title}
numberOfLines={1}
/>
<SubtitleWithTimestamp
query={query}
subtitle={result.subtitle}
activityAt={result.activityAt}
testID="command-center-agent-subtitle"
/>
</View>
</View>
<QueryHighlightedText
query={query}
text={agent.title}
style={[styles.subtitle, styles.subtitleText]}
numberOfLines={1}
/>
</View>
);
}
const providerIconMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
function WorkspaceResultIcon({
result,
backdrop,
@@ -702,27 +595,24 @@ function WorkspaceResultIcon({
const statusBucket = useWorkspaceStatus(result.serverId, result.workspaceId);
return (
<StatusIcon statusBucket={statusBucket} size={16} backdrop={backdrop}>
<DecorativeProjectIcon project={result.project} />
<View accessibilityElementsHidden importantForAccessibility="no-hide-descendants" aria-hidden>
<WorkspaceProjectIcon project={result.project} />
</View>
</StatusIcon>
);
}
/**
* The same project icon the sidebar's workspace rows lead with: its image, or a lettered square.
* Hidden from assistive tech so the fallback's initial does not prefix the row's name.
*/
function DecorativeProjectIcon({ project }: { project: CommandCenterWorkspaceResult["project"] }) {
/** The same project icon the sidebar's workspace rows lead with: its image, or a lettered square. */
function WorkspaceProjectIcon({ project }: { project: CommandCenterWorkspaceResult["project"] }) {
const initial = projectIconPlaceholderLabelFromDisplayName(project.name).charAt(0).toUpperCase();
return (
<View accessibilityElementsHidden importantForAccessibility="no-hide-descendants" aria-hidden>
<ProjectIconView
iconDataUri={project.iconDataUri}
initial={initial}
projectViewKey={project.viewKey}
size={16}
textStyle={styles.projectIconFallbackText}
/>
</View>
<ProjectIconView
iconDataUri={project.iconDataUri}
initial={initial}
projectViewKey={project.viewKey}
size={16}
textStyle={styles.projectIconFallbackText}
/>
);
}
@@ -760,18 +650,17 @@ function ResultContent({
</View>
);
}
if (result.kind === "agent") {
return <AgentResultContent result={result} query={query} backdrop={backdrop} />;
}
if (result.kind === "workspace") {
const key = result.id.slice("workspace:".length);
return (
<View style={styles.rowContent} testID={`command-center-workspace-${key}`}>
<View style={styles.rowMain}>
{/* Decorative: the fallback icon's initial must not prefix the row's accessible name. */}
<View style={styles.iconSlot}>
{/* An archived workspace runs nothing, so it has no status to show. */}
{result.archived ? (
<DecorativeProjectIcon project={result.project} />
) : (
<WorkspaceResultIcon result={result} backdrop={backdrop} />
)}
<WorkspaceResultIcon result={result} backdrop={backdrop} />
</View>
<View style={styles.textContent}>
<QueryHighlightedText
@@ -786,16 +675,8 @@ function ResultContent({
activityAt={result.activityAt}
testID="command-center-workspace-subtitle"
/>
{result.matchedAgent ? (
<MatchedAgentLine
agent={result.matchedAgent}
serverId={result.serverId}
query={query}
/>
) : null}
</View>
</View>
{result.archived ? <ArchivedBadge /> : null}
</View>
);
}
@@ -880,24 +761,9 @@ function SectionRow({ row }: { row: Extract<CommandCenterListRow, { kind: "secti
}
// Escape arrives without asking; it is registered for `agent.interrupt` anyway.
// Backspace stays off deliberately — on web it returns a tab to All when the field is empty,
// Backspace stays off deliberately — the palette pops its scope with it on web,
// but a registered command would stop the search field deleting text.
const TAB_PLACEHOLDER_KEYS = {
all: "shell.commandCenter.placeholder",
workspaces: "shell.commandCenter.workspacePlaceholder",
files: "shell.commandCenter.filePlaceholder",
actions: "shell.commandCenter.actionPlaceholder",
} as const satisfies Record<CommandCenterTab, string>;
/** The search field names what the tab searches; All names only the kinds on offer. */
function placeholderKey(tab: CommandCenterTab, tabs: readonly CommandCenterTab[]) {
if (tab === "all" && !tabs.includes("files")) {
return "shell.commandCenter.placeholderWithoutFiles";
}
return TAB_PLACEHOLDER_KEYS[tab];
}
export function CommandCenter() {
const { t } = useTranslation();
const isCompact = useIsCompactFormFactor();
@@ -1009,42 +875,22 @@ export function CommandCenter() {
: {}),
scrollEventThrottle: 16,
};
const submit = useCallback(() => state.key({ key: "Enter" }), [state]);
const submit = useCallback(() => state.key("Enter"), [state]);
const handleOverlayKeyDown = useCallback(
(event: KeyboardInputEvent) => {
if (!state.key(event)) return false;
if (!state.key(event.key)) return false;
event.preventDefault();
return true;
},
[state],
);
const setOverlayScope = useOverlayRegistration({
keys: ["Escape", "Enter", "ArrowUp", "ArrowDown", "Tab"],
keys: ["Escape", "Enter", "ArrowUp", "ArrowDown"],
active: state.open,
layer: modalLayer,
onKeyDown: handleOverlayKeyDown,
});
const tabOptions = useMemo<SegmentedControlOption<CommandCenterTab>[]>(
() =>
state.tabs.map((tab) => ({
value: tab,
label: t(`shell.commandCenter.tabs.${tab}`),
testID: `command-center-tab-${tab}`,
})),
[state.tabs, t],
);
const tabs = (
<SegmentedControl
options={tabOptions}
value={state.tab}
onValueChange={state.selectTab}
size="sm"
testID="command-center-tabs"
/>
);
const placeholder = t(placeholderKey(state.tab, state.tabs));
if (showBottomSheet) {
return (
<IsolatedBottomSheetModal
@@ -1064,28 +910,32 @@ export function CommandCenter() {
accessible={false}
>
<OverlayLayerProvider layer={modalLayer}>
<View style={styles.header} testID="command-center-header">
<View style={styles.searchRow}>
<ThemedBottomSheetTextInput
testID="command-center-input"
ref={bottomSheetInputRef}
initialValue={state.query}
variant="bottom-sheet"
onChangeText={state.setQuery}
onSubmitEditing={submit}
placeholder={placeholder}
style={[styles.input, styles.growingInput]}
autoCapitalize="none"
autoCorrect={false}
autoFocus
/>
<FileSearchLoadingIndicator
loading={state.fileSearchLoading}
label={t("shell.commandCenter.searchingFiles")}
/>
</View>
<View style={[styles.bottomSheetHeader, styles.searchRow]} testID="command-center-header">
{state.scope === "files" ? (
<ScopeChip label={t("shell.commandCenter.files")} onRemove={state.clearScope} />
) : null}
<ThemedBottomSheetTextInput
testID="command-center-input"
ref={bottomSheetInputRef}
initialValue={state.query}
variant="bottom-sheet"
onChangeText={state.setQuery}
onSubmitEditing={submit}
placeholder={
state.scope === "files"
? t("shell.commandCenter.filePlaceholder")
: t("shell.commandCenter.placeholder")
}
style={[styles.input, styles.growingInput]}
autoCapitalize="none"
autoCorrect={false}
autoFocus
/>
<FileSearchLoadingIndicator
loading={state.fileSearchLoading}
label={t("shell.commandCenter.searchingFiles")}
/>
</View>
<View style={styles.tabBar}>{tabs}</View>
{fileSearchError}
<BottomSheetFlatList ref={bottomSheetListRef} {...commonListProps} />
</OverlayLayerProvider>
@@ -1099,26 +949,30 @@ export function CommandCenter() {
<View style={styles.overlay}>
<Pressable style={styles.backdrop} onPress={state.close} />
<View ref={setOverlayScope} testID="command-center-panel" style={styles.panel}>
<View style={styles.header} testID="command-center-header">
<View style={styles.searchRow}>
<ThemedTextInput
testID="command-center-input"
ref={state.inputRef}
initialValue={state.query}
onChangeText={state.setQuery}
placeholder={placeholder}
style={[styles.input, styles.growingInput]}
autoCapitalize="none"
autoCorrect={false}
autoFocus
/>
<FileSearchLoadingIndicator
loading={state.fileSearchLoading}
label={t("shell.commandCenter.searchingFiles")}
/>
</View>
<View style={[styles.header, styles.searchRow]} testID="command-center-header">
{state.scope === "files" ? (
<ScopeChip label={t("shell.commandCenter.files")} onRemove={state.clearScope} />
) : null}
<ThemedTextInput
testID="command-center-input"
ref={state.inputRef}
initialValue={state.query}
onChangeText={state.setQuery}
placeholder={
state.scope === "files"
? t("shell.commandCenter.filePlaceholder")
: t("shell.commandCenter.placeholder")
}
style={[styles.input, styles.growingInput]}
autoCapitalize="none"
autoCorrect={false}
autoFocus
/>
<FileSearchLoadingIndicator
loading={state.fileSearchLoading}
label={t("shell.commandCenter.searchingFiles")}
/>
</View>
<View style={styles.tabBar}>{tabs}</View>
{fileSearchError}
<FlatList ref={listRef} {...commonListProps} />
</View>
@@ -1144,6 +998,25 @@ function FileSearchLoadingIndicator({ loading, label }: { loading: boolean; labe
);
}
// The chip sits at the input's own height and type size so it reads as the scope of the field
// rather than a badge dropped into the query. Its 28px matches the input's line box, so showing or
// dropping the scope cannot resize the header.
function ScopeChip({ label, onRemove }: { label: string; onRemove(): void }) {
return (
<Pressable
accessibilityRole="button"
accessibilityLabel={label}
onPress={onRemove}
style={styles.scopeChip}
testID="command-center-files-scope"
>
<ThemedFolder size={14} strokeWidth={2.2} />
<Text style={styles.scopeChipLabel}>{label}</Text>
<ThemedX size={12} strokeWidth={2.2} />
</Pressable>
);
}
const styles = StyleSheet.create((theme) => ({
overlay: {
flex: 1,
@@ -1170,12 +1043,11 @@ const styles = StyleSheet.create((theme) => ({
borderBottomWidth: 1,
borderBottomColor: theme.colors.border,
},
// Below the divider, above the list. The first section label brings its own top gap, so the
// pills sit with equal space above and below. A fixed bar, so switching tabs never moves the
// field or the list.
tabBar: {
bottomSheetHeader: {
paddingHorizontal: theme.spacing[4],
paddingTop: COMMAND_CENTER_SECTION_GAP,
paddingVertical: theme.spacing[3],
borderBottomWidth: 1,
borderBottomColor: theme.colors.border,
},
input: {
fontSize: theme.fontSize.base,
@@ -1186,6 +1058,25 @@ const styles = StyleSheet.create((theme) => ({
growingInput: { flex: 1, minWidth: 0 },
searchRow: { flexDirection: "row", alignItems: "center", gap: theme.spacing[2] },
fileSearchStatus: { width: 14, height: 14, alignItems: "center", justifyContent: "center" },
scopeChip: {
// Stretching to the row rather than setting a height keeps the chip exactly as tall as the
// input's line box, so showing or dropping the scope can never resize the header.
alignSelf: "stretch",
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[1.5],
marginRight: theme.spacing[1],
paddingHorizontal: theme.spacing[2],
borderRadius: theme.borderRadius.md,
borderWidth: 1,
borderColor: theme.colors.borderAccent,
backgroundColor: theme.colors.surface2,
},
scopeChipLabel: {
color: theme.colors.foreground,
fontSize: theme.fontSize.base,
fontWeight: "500",
},
results: { flex: 1 },
// Sections and rows take their height from list-metrics; these styles only place content in it.
section: { justifyContent: "flex-end" },
@@ -1238,14 +1129,6 @@ const styles = StyleSheet.create((theme) => ({
},
subtitleLine: { flexDirection: "row", minWidth: 0 },
subtitleText: { flexShrink: 1, minWidth: 0 },
agentLine: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[1.5],
minWidth: 0,
height: COMMAND_CENTER_LINE_HEIGHT.agent,
},
agentLineIcon: { width: 12, alignItems: "center", justifyContent: "center" },
iconSlot: {
width: 16,
height: COMMAND_CENTER_LINE_HEIGHT.singleLine,
@@ -1,7 +1,7 @@
import { describe, expect, it } from "vitest";
import { createCommandCenterInteraction } from "./interaction";
import { projectCommandCenterRows, type CommandCenterFileResult } from "./results";
import type { CommandCenterTab } from "./tabs";
import type { CommandCenterScope } from "@/stores/keyboard-shortcuts-store";
function results(ids = ["a", "b", "c", "d"]) {
return projectCommandCenterRows(
@@ -21,17 +21,17 @@ function results(ids = ["a", "b", "c", "d"]) {
})),
},
],
{ singleLineRow: 40, twoLineRow: 60, threeLineRow: 80, sectionTitle: 20, sectionDivider: 10 },
{ singleLineRow: 40, twoLineRow: 60, sectionTitle: 20, sectionDivider: 10 },
);
}
function setup(options: { tab?: CommandCenterTab; measured?: boolean } = {}) {
function setup(options: { scope?: CommandCenterScope; measured?: boolean } = {}) {
const offsets: number[] = [];
const model = createCommandCenterInteraction((offset) => offsets.push(offset));
const publish = (ids = ["a", "b", "c", "d"], loading = false) =>
model.update({
open: true,
tab: options.tab ?? "all",
scope: options.scope ?? null,
query: model.getSnapshot().query,
projection: results(ids),
loading,
@@ -53,45 +53,6 @@ describe("Command Center interaction", () => {
expect(offsets).toEqual([]);
});
it("follows the first result while results load, so Enter does not run what rendered first", () => {
const { model, publish } = setup();
model.setQuery("");
// Recent workspaces lead All and arrive after the actions below them.
publish(["new-workspace", "settings"], true);
expect(model.getSnapshot().activeId).toBe("new-workspace");
publish(["recent", "new-workspace", "settings"]);
expect(model.getSnapshot().activeId).toBe("recent");
});
it("keeps the selected row when settled results reorder", () => {
const { model, publish } = setup();
expect(model.getSnapshot().activeId).toBe("a");
// Another workspace's agent changed status, so it moves to the top of Recent workspaces.
publish(["b", "a", "c", "d"]);
expect(model.getSnapshot().activeId).toBe("a");
});
it("keeps the selected row when results land above it after the query settled", () => {
const { model, publish } = setup();
model.setQuery("invoice");
// Files arrive while archived workspaces are still being searched.
publish(["file-1", "file-2"], true);
expect(model.getSnapshot().activeId).toBe("file-1");
publish(["archived", "file-1", "file-2"]);
expect(model.getSnapshot().activeId).toBe("archived");
publish(["archived-2", "archived", "file-1", "file-2"]);
expect(model.getSnapshot().activeId).toBe("archived");
});
it("keeps the user's pick while results are still loading", () => {
const { model, publish } = setup();
model.setQuery("q");
publish(["a", "b"], true);
model.move("next");
publish(["z", "a", "b"], true);
expect(model.getSnapshot().activeId).toBe("b");
});
it("reveals only clipped keyboard selections and wraps around", () => {
const { model, offsets } = setup();
expect(model.move("next")).toBe(true);
@@ -159,7 +120,7 @@ describe("Command Center interaction", () => {
});
it("waits for scoped search results instead of revealing the previous query's rows", () => {
const { model, offsets, publish } = setup({ tab: "files" });
const { model, offsets, publish } = setup({ scope: "files" });
model.scrolled(100);
model.setQuery("new");
publish(["a", "b"], true);
@@ -171,7 +132,7 @@ describe("Command Center interaction", () => {
});
it("manual interaction cancels a reveal awaiting search results", () => {
const { model, offsets, publish } = setup({ tab: "files" });
const { model, offsets, publish } = setup({ scope: "files" });
model.setQuery("new");
publish([], true);
model.beginManualScroll();
@@ -192,29 +153,13 @@ describe("Command Center interaction", () => {
expect(offsets).toEqual([]);
});
it("tab changes select the first result and return the list to the top", () => {
it("scope changes reset selection and request a reveal", () => {
const { model, offsets } = setup();
model.move("next");
model.move("next");
model.move("next");
model.scrolled(100);
model.update({ open: true, tab: "files", query: "", projection: results(), loading: false });
model.update({ open: true, scope: "files", query: "", projection: results(), loading: false });
expect(model.getSnapshot().activeId).toBe("a");
expect(offsets.at(-1)).toBe(0);
});
it("tab changes keep the query", () => {
const { model, publish } = setup();
model.setQuery("b");
publish(["b"]);
model.update({
open: true,
tab: "workspaces",
query: "b",
projection: results(["b"]),
loading: false,
});
expect(model.getSnapshot()).toEqual({ query: "b", activeId: "b" });
expect(offsets).toEqual([20, 20]);
});
it("close discards the old query, metrics, and deferred reveal", () => {
@@ -222,7 +167,7 @@ describe("Command Center interaction", () => {
model.setQuery("old");
publish();
model.move("previous");
model.update({ open: false, tab: "all", query: "old", projection: results(), loading: false });
model.update({ open: false, scope: null, query: "old", projection: results(), loading: false });
model.layout(80);
expect(model.getSnapshot()).toEqual({ query: "", activeId: null });
expect(offsets).toEqual([]);
+11 -30
View File
@@ -1,9 +1,9 @@
import type { CommandCenterScope } from "@/stores/keyboard-shortcuts-store";
import {
moveActiveResultId,
preserveActiveResultId,
type CommandCenterListProjection,
} from "./results";
import type { CommandCenterTab } from "./tabs";
interface Snapshot {
query: string;
@@ -12,28 +12,21 @@ interface Snapshot {
interface ResultsInput {
open: boolean;
tab: CommandCenterTab;
scope: CommandCenterScope;
query: string;
projection: CommandCenterListProjection;
/** A source of this query's and tab's results is still loading. */
loading: boolean;
}
/**
* While a query's or tab's results are still loading, the selection follows the first result,
* so Enter right after opening runs what ends up on top rather than whatever rendered first.
* Once they have all loaded, or the user moves the selection, it stays on its row by ID through
* any later reordering. Permission to move the viewport lasts for one user command.
*/
/** Selection persists; permission to move the viewport lasts for one user command. */
export function createCommandCenterInteraction(scrollToOffset: (offset: number) => void) {
let snapshot: Snapshot = { query: "", activeId: null };
const listeners = new Set<() => void>();
let open = false;
let tab: CommandCenterTab = "all";
let scope: CommandCenterScope = null;
let projection: CommandCenterListProjection | null = null;
let loading = false;
let revealPending = false;
let followingFirst = true;
let offset = 0;
let visibleLength = 0;
@@ -45,8 +38,8 @@ export function createCommandCenterInteraction(scrollToOffset: (offset: number)
function reveal() {
if (!open || !revealPending || !projection || visibleLength <= 0) return;
// The Files tab keeps its previous entries while the next query is loading.
if (tab === "files" && loading) return;
// Scoped file search keeps its previous entries while the next query is loading.
if (scope === "files" && loading) return;
if (!snapshot.activeId) {
if (!loading) revealPending = false;
return;
@@ -74,10 +67,9 @@ export function createCommandCenterInteraction(scrollToOffset: (offset: number)
};
},
update(input: ResultsInput) {
const tabChanged = open && input.open && tab !== input.tab;
const resetSelection = input.open && (!open || tabChanged);
const resetSelection = input.open && (!open || scope !== input.scope);
open = input.open;
tab = input.tab;
scope = input.scope;
if (!open) {
projection = null;
revealPending = false;
@@ -88,44 +80,33 @@ export function createCommandCenterInteraction(scrollToOffset: (offset: number)
}
if (resetSelection) {
revealPending = true;
followingFirst = true;
publish({ ...snapshot, activeId: null });
}
// A tab is a different list: it starts at its top, section label included.
if (tabChanged && offset !== 0) {
offset = 0;
scrollToOffset(0);
}
// A query command invalidates the old projection until React supplies its new results.
if (input.query !== snapshot.query) return;
projection = input.projection;
loading = input.loading;
if (tab !== "files" || !loading) {
if (scope !== "files" || !loading) {
publish({
...snapshot,
activeId: followingFirst
? (projection.selectableResults[0]?.id ?? null)
: preserveActiveResultId(snapshot.activeId, projection.selectableResults),
activeId: preserveActiveResultId(snapshot.activeId, projection.selectableResults),
});
if (!loading) followingFirst = false;
}
reveal();
},
setQuery(query: string) {
projection = null;
revealPending = true;
followingFirst = true;
publish({ query, activeId: null });
},
move(direction: "next" | "previous"): boolean {
if (
!open ||
!projection ||
(tab === "files" && loading) ||
(scope === "files" && loading) ||
projection.selectableResults.length === 0
)
return false;
followingFirst = false;
publish({
...snapshot,
activeId: moveActiveResultId(snapshot.activeId, projection.selectableResults, direction),
@@ -16,8 +16,6 @@ export const COMMAND_CENTER_LINE_HEIGHT = {
singleLine: 20,
title: 18,
subtitle: 16,
/** The matched-agent line under a workspace's subtitle. */
agent: 16,
sectionLabel: 16,
} as const;
@@ -28,8 +26,6 @@ const SECTION_DIVIDER_THICKNESS = 1;
export interface CommandCenterListMetrics {
singleLineRow: number;
twoLineRow: number;
/** A workspace row that also names the agent the query matched. */
threeLineRow: number;
/** A section label and the gaps around it. */
sectionTitle: number;
/** The rule between two sections and the gaps around it. */
@@ -41,7 +37,6 @@ function listMetrics(rowInset: number): CommandCenterListMetrics {
return {
singleLineRow: rowInset + line.singleLine + rowInset,
twoLineRow: rowInset + line.title + line.subtitle + rowInset,
threeLineRow: rowInset + line.title + line.subtitle + line.agent + rowInset,
sectionTitle: COMMAND_CENTER_SECTION_GAP + line.sectionLabel + COMMAND_CENTER_SECTION_GAP,
sectionDivider:
COMMAND_CENTER_SECTION_GAP + SECTION_DIVIDER_THICKNESS + COMMAND_CENTER_SECTION_GAP,
+45 -47
View File
@@ -3,6 +3,7 @@ import type { CommandCenterContribution } from "./contributions";
import { COMMAND_CENTER_LIST_METRICS } from "./list-metrics";
import {
buildContributionSections,
filterAndRankBuiltInResults,
joinSubtitleParts,
moveActiveResultId,
PINNED_SECTION_BAND,
@@ -10,7 +11,6 @@ import {
projectCommandCenterRows,
type CommandCenterWorkspaceResult,
} from "./results";
import { createWorkspaceRanker } from "./workspace-search";
function contribution(input: {
id: string;
@@ -118,12 +118,7 @@ function workspace(
project: { viewKey: "project", name: "project", iconDataUri: null },
changeRequestNumber: null,
activityAt,
agents: [],
matchedAgent: null,
archived: false,
background: false,
run: () => undefined,
openAgent: () => undefined,
};
}
@@ -189,40 +184,6 @@ describe("Command Center result projection", () => {
expect(sectionResultIds(buildContributionSections(contributions, "home"))).toEqual(["home"]);
});
it("lists query-only actions without a query when asked to browse them", () => {
const contributions = [
contribution({ id: "settings", group: "actions", groupRank: 0 }),
contribution({ id: "opus", group: "models", groupRank: 1, visibility: "query" }),
];
expect(
sectionResultIds(buildContributionSections(contributions, "", { includeQueryOnly: true })),
).toEqual(["settings", "opus"]);
});
it("gives a workspace row matched through an agent room for its agent line", () => {
const matched = {
...workspace("workspace:matched"),
matchedAgent: { id: "agent", title: "Add receipt emails", provider: "mock" },
};
const projection = projectCommandCenterRows(
[
{
id: "workspaces",
band: PINNED_SECTION_BAND,
rank: 2,
results: [workspace("workspace:plain"), matched],
},
],
metrics,
);
expect(projection.rows.map((row) => row.height)).toEqual([
metrics.twoLineRow,
metrics.threeLineRow,
]);
expect(metrics.threeLineRow).toBeGreaterThan(metrics.twoLineRow);
});
it("preserves active selection by id and falls back to the first result", () => {
const first = workspace("workspace:first");
const second = workspace("workspace:second");
@@ -525,9 +486,25 @@ describe("Command Center query tokenization", () => {
});
});
describe("workspace ranking", () => {
const rank = (rows: readonly CommandCenterWorkspaceResult[], query: string) =>
createWorkspaceRanker()(rows, query).map((row) => row.id);
describe("filterAndRankBuiltInResults", () => {
const visibleOnly = (row: CommandCenterWorkspaceResult) => ({
visible: [row.title, row.subtitle],
hidden: [],
});
it("shows the five most recent rows for an empty query", () => {
const rows = Array.from({ length: 8 }, (_, index) =>
workspace(`w${index}`, `w${index}`, "host", minutesAgo(8 - index)),
);
expect(filterAndRankBuiltInResults(rows, "", visibleOnly).map((row) => row.id)).toEqual([
"w7",
"w6",
"w5",
"w4",
"w3",
]);
});
it("puts the best match first even when it sorts last alphabetically", () => {
const rows = [
@@ -537,7 +514,22 @@ describe("workspace ranking", () => {
];
// Alphabetically this is Alpha, Label, Zebra. "lab des" only matches Label as Design.
expect(rank(rows, "lab des")).toEqual(["c"]);
expect(filterAndRankBuiltInResults(rows, "lab des", visibleOnly).map((row) => row.id)).toEqual([
"c",
]);
});
it("ranks a title match above a match that only the hidden field reached", () => {
const rows = [workspace("hidden-hit", "Unrelated"), workspace("title-hit", "Deploy")];
const fields = (row: CommandCenterWorkspaceResult) =>
row.id === "hidden-hit"
? { visible: [row.title], hidden: ["deploy"] }
: { visible: [row.title], hidden: [] };
expect(filterAndRankBuiltInResults(rows, "deploy", fields).map((row) => row.id)).toEqual([
"title-hit",
"hidden-hit",
]);
});
it("orders rows in the same match tier by recency, not by where the word sits", () => {
@@ -547,7 +539,10 @@ describe("workspace ranking", () => {
workspace("newer", "design the cli interface to expose usage data", "host", minutesAgo(5)),
];
expect(rank(rows, "usage")).toEqual(["newer", "older"]);
expect(filterAndRankBuiltInResults(rows, "usage", visibleOnly).map((row) => row.id)).toEqual([
"newer",
"older",
]);
});
it("keeps a better match tier above a more recent weaker match", () => {
@@ -556,13 +551,16 @@ describe("workspace ranking", () => {
workspace("whole-word", "Usage hover card", "host", minutesAgo(600)),
];
expect(rank(rows, "usage")).toEqual(["whole-word", "subsequence"]);
expect(filterAndRankBuiltInResults(rows, "usage", visibleOnly).map((row) => row.id)).toEqual([
"whole-word",
"subsequence",
]);
});
it("drops a row when one token matches nothing", () => {
const rows = [workspace("a", "Label as Design")];
expect(rank(rows, "lab zzz")).toEqual([]);
expect(filterAndRankBuiltInResults(rows, "lab zzz", visibleOnly)).toEqual([]);
});
});
+51 -48
View File
@@ -1,15 +1,12 @@
import type { AggregatedAgent } from "@/hooks/use-aggregated-agents";
import {
compareMatchScores,
type MatchClass,
type MatchScore,
scoreTextFields,
textFieldsMatchClass,
} from "@getpaseo/protocol/search/text-match";
import type { CommandCenterContribution } from "./contributions";
import type { CommandCenterListMetrics } from "./list-metrics";
/** Sections pinned above every contribution section. */
export const LEADING_SECTION_BAND = -1;
/** Sections that reorder by how well they match the query. */
export const CONTRIBUTION_SECTION_BAND = 0;
/** Sections pinned below every contribution section regardless of match quality. */
@@ -53,13 +50,6 @@ export interface CommandCenterWorkspaceProject {
iconDataUri: string | null;
}
/** An agent a workspace can be found by. Agents are never results of their own. */
export interface CommandCenterWorkspaceAgent {
id: string;
title: string;
provider: string;
}
export interface CommandCenterWorkspaceResult {
kind: "workspace";
id: string;
@@ -70,19 +60,18 @@ export interface CommandCenterWorkspaceResult {
project: CommandCenterWorkspaceProject;
/** PR/MR number backing this workspace, so a number query can match it exactly. */
changeRequestNumber: number | null;
/** Last activity, or when it was archived for an archived workspace. */
activityAt: Date | null;
/** The workspace's agents, most recent first. Part of what the workspace matches on. */
agents: readonly CommandCenterWorkspaceAgent[];
/** The agent the query matched better than the workspace's own text. Drawn as a third line. */
matchedAgent: CommandCenterWorkspaceAgent | null;
archived: boolean;
/** Started by automation rather than the user. Found by a query, never listed as recent. */
background: boolean;
/** Opens the workspace and lets its default tab selection apply. */
run(): void;
/** Opens the workspace on this agent's tab. */
openAgent(agentId: string): void;
}
export interface CommandCenterAgentResult {
kind: "agent";
id: string;
agent: AggregatedAgent;
title: string;
subtitle: string;
activityAt: Date | null;
run(): void;
}
export interface CommandCenterFileResult {
@@ -105,12 +94,13 @@ export interface CommandCenterContributionResult {
export type CommandCenterResult =
| CommandCenterWorkspaceResult
| CommandCenterAgentResult
| CommandCenterFileResult
| CommandCenterContributionResult;
export interface CommandCenterResultSection {
id: string;
/** LEADING, CONTRIBUTION or PINNED_SECTION_BAND. Compared before anything else. */
/** CONTRIBUTION_SECTION_BAND or PINNED_SECTION_BAND. Compared before anything else. */
band: number;
rank: number;
title?: string;
@@ -172,14 +162,6 @@ export function scoreSearchFields(
return match ? { fieldRank: KEYWORD_FIELD_RANK, match } : null;
}
/** How closely the query matched the fields; see `MatchClass`. Null when it does not match. */
export function searchFieldsMatchClass(
query: string,
fields: CommandCenterSearchFields,
): MatchClass | null {
return textFieldsMatchClass(query, [...fields.visible, ...fields.hidden]);
}
/** Join non-empty subtitle parts with " · ", dropping null/undefined/empty. */
export function joinSubtitleParts(parts: readonly (string | null | undefined)[]): string {
return parts.filter((part): part is string => Boolean(part)).join(" · ");
@@ -199,18 +181,12 @@ function contributionSearchFields(
return { visible, hidden: contribution.keywords };
}
/** How many lines of text the row draws, which decides its height. */
function resultLineCount(result: CommandCenterResult): 1 | 2 | 3 {
if (result.kind === "workspace") return result.matchedAgent ? 3 : 2;
if (result.kind === "file") return 1;
/** Whether the row draws a second, subtitle line under its title. */
function hasSubtitleLine(result: CommandCenterResult): boolean {
if (result.kind === "workspace" || result.kind === "agent") return true;
if (result.kind === "file") return false;
const presentation = result.contribution.presentation;
return presentation.kind === "action" && presentation.subtitle ? 2 : 1;
}
function resultHeight(result: CommandCenterResult, metrics: CommandCenterListMetrics): number {
const lines = resultLineCount(result);
if (lines === 3) return metrics.threeLineRow;
return lines === 2 ? metrics.twoLineRow : metrics.singleLineRow;
return presentation.kind === "action" && Boolean(presentation.subtitle);
}
/**
@@ -235,7 +211,10 @@ function resultScore(result: CommandCenterResult): CommandCenterScore | undefine
return result.kind === "contribution" ? result.score : undefined;
}
/** A built-in row that orders by how recently it saw activity. */
/** Rows shown when nothing has been typed, per pinned category. */
const DEFAULT_CATEGORY_RESULT_LIMIT = 5;
/** A built-in row (workspace or agent) that orders by how recently it saw activity. */
export interface CommandCenterRecentRow {
activityAt: Date | null;
}
@@ -256,20 +235,44 @@ export function compareBuiltInScores(left: CommandCenterScore, right: CommandCen
}
/**
* Group contributions into their sections, ranked by the query. `includeQueryOnly` lists the
* contributions that otherwise wait for a query, for a list whose whole job is browsing them.
* Filter and rank already-built rows. Rows in, rows out — building them needs translations,
* navigation callbacks and the project tree, none of which matching cares about, so that stays
* with the caller and this stays testable without mounting React.
*
* Rows rank by `compareBuiltInScores`; rows that rank equally, including every row of an empty
* query, go most recent first.
*/
export function filterAndRankBuiltInResults<Row extends CommandCenterRecentRow>(
rows: readonly Row[],
query: string,
fieldsOf: (row: Row) => CommandCenterSearchFields,
): Row[] {
if (!query.trim()) {
return [...rows].sort(compareByRecency).slice(0, DEFAULT_CATEGORY_RESULT_LIMIT);
}
const scored: { row: Row; score: CommandCenterScore }[] = [];
for (const row of rows) {
const score = scoreSearchFields(query, fieldsOf(row));
if (score) scored.push({ row, score });
}
scored.sort(
(left, right) =>
compareBuiltInScores(left.score, right.score) || compareByRecency(left.row, right.row),
);
return scored.map((entry) => entry.row);
}
export function buildContributionSections(
contributions: readonly CommandCenterContribution[],
query: string,
options: { includeQueryOnly?: boolean } = {},
): CommandCenterResultSection[] {
const groups = new Map<string, MutableCommandCenterResultSection>();
const registryIndexById = new Map<string, number>();
const hasQuery = Boolean(query.trim());
for (const [index, contribution] of contributions.entries()) {
if (contribution.visibility === "query" && !hasQuery && !options.includeQueryOnly) continue;
if (contribution.visibility === "query" && !hasQuery) continue;
let score: CommandCenterScore | undefined;
if (hasQuery) {
// The score is the filter: null means no token found a home, so the row is out.
@@ -348,7 +351,7 @@ export function projectCommandCenterRows(
offset += sectionHeight;
}
for (const result of section.results) {
const height = resultHeight(result, metrics);
const height = hasSubtitleLine(result) ? metrics.twoLineRow : metrics.singleLineRow;
offsets.push(offset);
rowIndexByResultId.set(result.id, rows.length);
rows.push({ kind: "result", key: result.id, result, height });
@@ -1,181 +0,0 @@
import { describe, expect, it } from "vitest";
import type { CommandCenterContribution } from "./contributions";
import type { CommandCenterFileResult, CommandCenterWorkspaceResult } from "./results";
import { COMMAND_CENTER_LIST_METRICS } from "./list-metrics";
import { projectCommandCenterRows } from "./results";
import { buildCommandCenterSections } from "./sections";
import type { CommandCenterTab } from "./tabs";
import { createWorkspaceRanker } from "./workspace-search";
function workspace(
id: string,
options: {
daysAgo?: number;
title?: string;
archived?: boolean;
background?: boolean;
agentTitle?: string;
} = {},
): CommandCenterWorkspaceResult {
return {
kind: "workspace",
id: `workspace:server:${id}`,
serverId: "server",
workspaceId: id,
title: options.title ?? id,
subtitle: "project · main",
project: { viewKey: "project", name: "project", iconDataUri: null },
changeRequestNumber: null,
activityAt: new Date(Date.UTC(2026, 9, 30) - (options.daysAgo ?? 0) * 86_400_000),
agents: options.agentTitle
? [{ id: `${id}-agent`, title: options.agentTitle, provider: "mock" }]
: [],
matchedAgent: null,
archived: options.archived ?? false,
background: options.background ?? false,
run: () => undefined,
openAgent: () => undefined,
};
}
function action(id: string, group: string, visibility: "always" | "query" = "always") {
return {
id,
group,
groupRank: group === "workspace" ? 0 : 1,
rank: 0,
keywords: [],
visibility,
run: () => undefined,
presentation: { kind: "action", title: id, sectionTitle: group },
} satisfies CommandCenterContribution;
}
const file: CommandCenterFileResult = {
kind: "file",
id: "file:src/index.ts",
filePath: "src/index.ts",
title: "index.ts",
subtitle: "src",
run: () => undefined,
};
const workspaces = [
workspace("current", { daysAgo: 0 }),
workspace("payments", { daysAgo: 1, title: "Payments refactor" }),
// Started by automation; more recent than the workspaces below it.
workspace("nightly", { daysAgo: 1.5, title: "Nightly triage", background: true }),
workspace("onboarding", { daysAgo: 2, title: "Onboarding flow", agentTitle: "Add receipts" }),
workspace("docs", { daysAgo: 3, title: "Docs site" }),
workspace("search", { daysAgo: 4, title: "Search ranking" }),
];
const archived = [workspace("billing", { title: "Billing cleanup", archived: true })];
const contributions = [
action("New agent", "workspace"),
action("Settings", "actions"),
action("Group by status", "actions", "query"),
];
function listed(
tab: CommandCenterTab,
query: string,
options: { archivedMatchedByHost?: boolean; showBackground?: boolean } = {},
) {
const sections = buildCommandCenterSections({
tab,
query,
rankWorkspaces: createWorkspaceRanker(),
workspaces,
archivedWorkspaces: query ? archived : [],
archivedMatchedByHost: options.archivedMatchedByHost ?? true,
showBackground: options.showBackground ?? false,
currentWorkspaceId: "workspace:server:current",
contributions,
files: [file],
titles: { recentWorkspaces: "Recent workspaces", workspaces: "Workspaces", files: "Files" },
});
return projectCommandCenterRows(sections, COMMAND_CENTER_LIST_METRICS.desktop).rows.map((row) =>
row.kind === "section" ? `# ${row.title ?? ""}` : row.key,
);
}
describe("command center tabs", () => {
it("All leads with the three most recent workspaces, then actions, before a query", () => {
expect(listed("all", "")).toEqual([
"# Recent workspaces",
"workspace:server:payments",
"workspace:server:onboarding",
"workspace:server:docs",
"# workspace",
"New agent",
"# actions",
"Settings",
]);
});
it("lists background workspaces unqueried only as the sidebar does; a query finds them", () => {
expect(listed("all", "")).not.toContain("workspace:server:nightly");
expect(listed("all", "", { showBackground: true })).not.toContain("workspace:server:nightly");
expect(listed("workspaces", "")).not.toContain("workspace:server:nightly");
expect(listed("workspaces", "", { showBackground: true })).toContain(
"workspace:server:nightly",
);
expect(listed("all", "nightly")).toContain("workspace:server:nightly");
expect(listed("workspaces", "nightly")).toContain("workspace:server:nightly");
});
it("All ranks every kind of result for a query, archived workspaces after active ones", () => {
expect(listed("all", "i")).toEqual(
expect.arrayContaining(["Settings", "file:src/index.ts", "workspace:server:billing"]),
);
const rows = listed("all", "ing");
const workspaceRows = rows.filter((row) => row.startsWith("workspace:"));
expect(workspaceRows.at(-1)).toBe("workspace:server:billing");
expect(rows).not.toContain("# Recent workspaces");
});
it("Workspaces lists every workspace, current included, most recent first", () => {
expect(listed("workspaces", "")).toEqual([
"# Workspaces",
"workspace:server:current",
"workspace:server:payments",
"workspace:server:onboarding",
"workspace:server:docs",
"workspace:server:search",
]);
});
it("Workspaces finds a workspace through its agent and appends archived matches", () => {
expect(listed("workspaces", "receipts")).toEqual([
"# Workspaces",
"workspace:server:onboarding",
"workspace:server:billing",
]);
});
it("keeps archived rows the host did not match for this query only if they match it", () => {
// The previous query's archived results stand in while the next search loads.
expect(listed("workspaces", "receipts", { archivedMatchedByHost: false })).toEqual([
"# Workspaces",
"workspace:server:onboarding",
]);
expect(listed("workspaces", "billing", { archivedMatchedByHost: false })).toEqual([
"# Workspaces",
"workspace:server:billing",
]);
});
it("Files lists only files", () => {
expect(listed("files", "")).toEqual(["# Files", "file:src/index.ts"]);
});
it("Actions lists every action, including those that otherwise wait for a query", () => {
expect(listed("actions", "")).toEqual([
"# workspace",
"New agent",
"# actions",
"Settings",
"Group by status",
]);
});
});
-120
View File
@@ -1,120 +0,0 @@
import type { CommandCenterContribution } from "./contributions";
import {
buildContributionSections,
LEADING_SECTION_BAND,
PINNED_SECTION_BAND,
type CommandCenterFileResult,
type CommandCenterResultSection,
type CommandCenterWorkspaceResult,
} from "./results";
import type { CommandCenterTab } from "./tabs";
import type { WorkspaceRanker } from "./workspace-search";
/**
* How many workspaces All leads with before anything is typed. Background workspaces are left
* out, as the sidebar leaves them out by default.
*/
const RECENT_WORKSPACE_LIMIT = 3;
export interface CommandCenterSectionTitles {
recentWorkspaces: string;
workspaces: string;
files: string;
}
export interface CommandCenterSectionsInput {
tab: CommandCenterTab;
query: string;
rankWorkspaces: WorkspaceRanker;
workspaces: readonly CommandCenterWorkspaceResult[];
/** Archived workspaces the host found for the query. Empty without a query. */
archivedWorkspaces: readonly CommandCenterWorkspaceResult[];
/**
* The host matched the archived workspaces for this exact query. Its search forgives typos,
* so its matches stay even when the client cannot score them. Results from the previous
* query must match on their own.
*/
archivedMatchedByHost: boolean;
/**
* The sidebar's Show background preference. Without a query, Workspaces lists background
* workspaces only when the sidebar does; a query finds them either way.
*/
showBackground: boolean;
/** The open workspace's result ID. Recent workspaces leaves it out: the user is already there. */
currentWorkspaceId: string | null;
contributions: readonly CommandCenterContribution[];
files: readonly CommandCenterFileResult[];
titles: CommandCenterSectionTitles;
}
function recentWorkspacesSection(input: CommandCenterSectionsInput): CommandCenterResultSection {
const recent = input
.rankWorkspaces(input.workspaces, "")
.filter((workspace) => workspace.id !== input.currentWorkspaceId && !workspace.background)
.slice(0, RECENT_WORKSPACE_LIMIT);
return {
id: "recent-workspaces",
band: LEADING_SECTION_BAND,
rank: 0,
title: input.titles.recentWorkspaces,
results: recent,
};
}
/** Active matches first; archived ones are appended, so active rows never move when they land. */
function workspacesSection(input: CommandCenterSectionsInput): CommandCenterResultSection {
const listed =
input.query.trim() || input.showBackground
? input.workspaces
: input.workspaces.filter((workspace) => !workspace.background);
const active = input.rankWorkspaces(listed, input.query);
const archived = input.query.trim()
? input.rankWorkspaces(input.archivedWorkspaces, input.query, {
keepUnmatched: input.archivedMatchedByHost,
})
: [];
return {
id: "workspaces",
band: PINNED_SECTION_BAND,
rank: 2,
title: input.titles.workspaces,
results: [...active, ...archived],
};
}
function filesSection(input: CommandCenterSectionsInput): CommandCenterResultSection {
// File rows are matched by the daemon, so they carry no client-side score and cannot be
// relevance-compared against the rows that do. Pinning them keeps the section comparator
// total: band is decided before any score is read.
return {
id: "files",
band: PINNED_SECTION_BAND,
rank: 4,
title: input.titles.files,
results: input.files,
};
}
/**
* The sections a tab shows. All mixes every kind and leads with recent workspaces until
* something is typed; every other tab lists everything of its one kind.
*/
export function buildCommandCenterSections(
input: CommandCenterSectionsInput,
): CommandCenterResultSection[] {
switch (input.tab) {
case "all": {
const actions = buildContributionSections(input.contributions, input.query);
if (!input.query.trim()) return [recentWorkspacesSection(input), ...actions];
return [...actions, workspacesSection(input), filesSection(input)];
}
case "workspaces":
return [workspacesSection(input)];
case "files":
return [filesSection(input)];
case "actions":
return buildContributionSections(input.contributions, input.query, {
includeQueryOnly: true,
});
}
}
@@ -1,43 +0,0 @@
import { describe, expect, it } from "vitest";
import {
availableCommandCenterTabs,
resolveCommandCenterTab,
rotateCommandCenterTab,
type CommandCenterTab,
} from "./tabs";
const IN_WORKSPACE = availableCommandCenterTabs({ hasWorkspace: true });
const NO_WORKSPACE = availableCommandCenterTabs({ hasWorkspace: false });
function walk(available: readonly CommandCenterTab[], direction: "next" | "previous") {
const walked: CommandCenterTab[] = ["all"];
for (let step = 0; step < available.length; step += 1) {
walked.push(rotateCommandCenterTab(walked[walked.length - 1], direction, available));
}
return walked;
}
describe("command center tabs", () => {
it("walks All, Workspaces, Files, Actions in a workspace and wraps", () => {
expect(walk(IN_WORKSPACE, "next")).toEqual(["all", "workspaces", "files", "actions", "all"]);
expect(walk(IN_WORKSPACE, "previous")).toEqual([
"all",
"actions",
"files",
"workspaces",
"all",
]);
});
it("offers no Files tab outside a workspace, and Tab skips it", () => {
expect(NO_WORKSPACE).toEqual(["all", "workspaces", "actions"]);
expect(walk(NO_WORKSPACE, "next")).toEqual(["all", "workspaces", "actions", "all"]);
expect(walk(NO_WORKSPACE, "previous")).toEqual(["all", "actions", "workspaces", "all"]);
});
it("opens a requested tab only when it is on offer", () => {
expect(resolveCommandCenterTab("files", IN_WORKSPACE)).toBe("files");
expect(resolveCommandCenterTab("files", NO_WORKSPACE)).toBe("all");
expect(resolveCommandCenterTab("actions", NO_WORKSPACE)).toBe("actions");
});
});
-39
View File
@@ -1,39 +0,0 @@
/**
* The command center's tabs, in the order Tab walks them. All shows every kind of result; each
* other tab shows one kind.
*/
const COMMAND_CENTER_TABS = ["all", "workspaces", "files", "actions"] as const;
export type CommandCenterTab = (typeof COMMAND_CENTER_TABS)[number];
/**
* The tabs on offer, in the order Tab walks them. Files searches the open workspace, so it is
* offered only when a workspace is open; without one, All lists no files either.
*/
export function availableCommandCenterTabs(context: {
hasWorkspace: boolean;
}): readonly CommandCenterTab[] {
return context.hasWorkspace
? COMMAND_CENTER_TABS
: COMMAND_CENTER_TABS.filter((tab) => tab !== "files");
}
/** The tab to show for a requested one: itself when on offer, otherwise All. */
export function resolveCommandCenterTab(
requested: CommandCenterTab,
available: readonly CommandCenterTab[],
): CommandCenterTab {
return available.includes(requested) ? requested : "all";
}
/** The available tab after (or before) `tab`, wrapping at either end. */
export function rotateCommandCenterTab(
tab: CommandCenterTab,
direction: "next" | "previous",
available: readonly CommandCenterTab[],
): CommandCenterTab {
const index = available.indexOf(tab);
const delta = direction === "next" ? 1 : -1;
const count = available.length;
return available[(index + delta + count) % count];
}
@@ -1,6 +1,6 @@
import { describe, expect, it } from "vitest";
import type { CommandCenterWorkspaceAgent, CommandCenterWorkspaceResult } from "./results";
import { createWorkspaceRanker } from "./workspace-search";
import type { CommandCenterWorkspaceResult } from "./results";
import { filterAndRankWorkspaces } from "./workspace-search";
function workspace(input: {
id: string;
@@ -8,8 +8,6 @@ function workspace(input: {
subtitle?: string;
changeRequestNumber?: number | null;
activityAt?: Date | null;
agents?: readonly CommandCenterWorkspaceAgent[];
opened?: string[];
}): CommandCenterWorkspaceResult {
return {
kind: "workspace",
@@ -21,24 +19,15 @@ function workspace(input: {
project: { viewKey: "project", name: "project", iconDataUri: null },
changeRequestNumber: input.changeRequestNumber ?? null,
activityAt: input.activityAt ?? null,
agents: input.agents ?? [],
matchedAgent: null,
archived: false,
background: false,
run: () => input.opened?.push("workspace"),
openAgent: (agentId) => input.opened?.push(agentId),
run: () => undefined,
};
}
function agent(id: string, title: string): CommandCenterWorkspaceAgent {
return { id, title, provider: "mock" };
}
function ids(rows: readonly CommandCenterWorkspaceResult[], query: string): string[] {
return createWorkspaceRanker()(rows, query).map((row) => row.id);
return filterAndRankWorkspaces(rows, query).map((row) => row.id);
}
describe("workspace ranking", () => {
describe("filterAndRankWorkspaces", () => {
const subject = workspace({
id: "payments",
title: "Payments refactor",
@@ -107,214 +96,4 @@ describe("workspace ranking", () => {
});
expect(ids([older, newer], "usage")).toEqual(["newer", "older"]);
});
it("lists every workspace most recent first when the query is empty", () => {
const rows = Array.from({ length: 8 }, (_, index) =>
workspace({ id: `w${index}`, activityAt: new Date(2026, 0, index + 1) }),
);
expect(ids(rows, "")).toEqual(["w7", "w6", "w5", "w4", "w3", "w2", "w1", "w0"]);
});
it("matches a workspace through one of its agents and names that agent", () => {
const receipts = agent("agent-receipts", "Add receipt emails");
const row = workspace({
id: "onboarding",
title: "Onboarding flow",
agents: [agent("agent-welcome", "Polish welcome screen"), receipts],
});
const [ranked] = createWorkspaceRanker()([row], "receipt");
expect(ranked.id).toBe("onboarding");
expect(ranked.matchedAgent).toEqual(receipts);
});
it("names no agent when the workspace's own text matched", () => {
const row = workspace({
id: "payments",
title: "Payments refactor",
agents: [agent("agent-payments", "Payments retries")],
});
const [ranked] = createWorkspaceRanker()([row], "payments");
expect(ranked.matchedAgent).toBeNull();
});
it("ranks a workspace's own match above an equally good match through an agent", () => {
const viaAgent = workspace({
id: "via-agent",
title: "Onboarding flow",
activityAt: new Date("2026-10-17T00:00:00Z"),
agents: [agent("a", "Receipt emails")],
});
const own = workspace({
id: "own",
title: "Receipt redesign",
activityAt: new Date("2026-10-01T00:00:00Z"),
});
expect(ids([viaAgent, own], "receipt")).toEqual(["own", "via-agent"]);
});
it("picks the best-matching agent for the line", () => {
const row = workspace({
id: "w",
title: "Onboarding",
agents: [agent("loose", "Reconcile cash receipts later"), agent("exact", "receipts")],
});
const [ranked] = createWorkspaceRanker()([row], "receipts");
expect(ranked.matchedAgent?.id).toBe("exact");
});
it("matches a query split between the workspace's text and an agent's title", () => {
const login = agent("agent-login", "Fix login retries");
const row = workspace({ id: "payments", title: "payments", agents: [login] });
const [ranked] = createWorkspaceRanker()([row], "payments login");
expect(ranked?.id).toBe("payments");
expect(ranked?.matchedAgent).toEqual(login);
});
it("names the agent when it matches better than a loose match on the workspace's text", () => {
const opened: string[] = [];
const login = agent("agent-login", "Fix login retries");
const row = workspace({
id: "long-input",
title: "Long input",
// "login" is a subsequence of "long-input", the weakest kind of match.
subtitle: "Local · paseo · feature/long-input",
agents: [login],
opened,
});
const [ranked] = createWorkspaceRanker()([row], "login");
expect(ranked?.matchedAgent).toEqual(login);
ranked?.run();
expect(opened).toEqual(["agent-login"]);
});
it("keeps a change-request hit on the workspace even when an agent's title names the number", () => {
const opened: string[] = [];
const row = workspace({
id: "payments",
title: "Payments refactor",
changeRequestNumber: 42,
agents: [agent("agent-review", "Address PR 42 review comments")],
opened,
});
const rank = createWorkspaceRanker();
for (const query of ["42", "pr 42", "#42"]) {
const [ranked] = rank([row], query);
expect(ranked?.matchedAgent).toBeNull();
ranked?.run();
}
expect(opened).toEqual(["workspace", "workspace", "workspace"]);
});
it("names no agent while the workspace's own text matches every keystroke contiguously", () => {
const row = workspace({
id: "fix-login-bug",
title: "fix-login-bug",
subtitle: "paseo · fix/login-bug",
agents: [agent("agent-login", "Login page fix")],
});
const rank = createWorkspaceRanker();
for (const query of ["l", "lo", "log", "logi", "login"]) {
expect(rank([row], query)[0]?.matchedAgent).toBeNull();
}
});
it("names no agent whose one-word title matches better than the workspace's whole word", () => {
const row = workspace({
id: "review-queue",
title: "Review queue",
agents: [agent("agent-review", "Review")],
});
expect(createWorkspaceRanker()([row], "review")[0]?.matchedAgent).toBeNull();
});
it("ranks a better match through an agent above a looser match on a workspace's own text", () => {
const loose = workspace({
id: "loose-own",
title: "Long input",
subtitle: "Local · paseo · feature/long-input",
activityAt: new Date("2026-10-17T00:00:00Z"),
});
const viaAgent = workspace({
id: "via-agent",
title: "Auth",
activityAt: new Date("2026-10-01T00:00:00Z"),
agents: [agent("a", "login page")],
});
expect(ids([loose, viaAgent], "login")).toEqual(["via-agent", "loose-own"]);
});
it("keeps a workspace that also matches on its own name first while typing an agent's title", () => {
const ownAndAgent = workspace({
id: "oauth-refactor",
activityAt: new Date("2026-10-17T00:00:00Z"),
agents: [agent("agent-a", "Auth flow fix")],
});
const agentOnly = workspace({
id: "cleanup",
activityAt: new Date("2026-10-01T00:00:00Z"),
agents: [agent("agent-b", "Auth flow fix")],
});
for (const query of ["a", "au", "auth", "auth f", "auth fl", "auth flow"]) {
expect(ids([ownAndAgent, agentOnly], query)).toEqual(["oauth-refactor", "cleanup"]);
}
});
it("ranks a word match on a workspace's name above a newer one that matches only inside a word", () => {
const rank = createWorkspaceRanker();
const authService = workspace({
id: "auth-service",
activityAt: new Date("2026-10-01T00:00:00Z"),
});
const oauthRefactor = workspace({
id: "oauth-refactor",
activityAt: new Date("2026-10-17T00:00:00Z"),
agents: [agent("agent-auth", "Auth flow fix")],
});
const authRows = rank([oauthRefactor, authService], "auth");
expect(authRows.map((row) => row.id)).toEqual(["auth-service", "oauth-refactor"]);
// The row that matched through its agent says so.
expect(authRows[1]?.matchedAgent?.title).toBe("Auth flow fix");
const fixLogin = workspace({ id: "fix-login", activityAt: new Date("2026-10-17T00:00:00Z") });
const prefixedThing = workspace({
id: "prefixed-thing",
activityAt: new Date("2026-10-01T00:00:00Z"),
agents: [agent("agent-fix", "Fix")],
});
const fixRows = rank([prefixedThing, fixLogin], "fix");
expect(fixRows.map((row) => row.id)).toEqual(["fix-login", "prefixed-thing"]);
expect(fixRows[1]?.matchedAgent?.title).toBe("Fix");
});
it("opens the matched agent's tab, and the workspace otherwise", () => {
const opened: string[] = [];
const row = workspace({
id: "w",
title: "Onboarding flow",
agents: [agent("agent-receipts", "Add receipt emails")],
opened,
});
const rank = createWorkspaceRanker();
rank([row], "receipt")[0].run();
rank([row], "onboarding")[0].run();
expect(opened).toEqual(["agent-receipts", "workspace"]);
});
it("returns the same row object across keystrokes while the matched agent holds", () => {
const row = workspace({
id: "w",
title: "Onboarding flow",
agents: [agent("agent-receipts", "Add receipt emails")],
});
const rank = createWorkspaceRanker();
expect(rank([row], "rece")[0]).toBe(rank([row], "receipt")[0]);
expect(rank([row], "onboard")[0]).toBe(row);
});
it("keeps rows the host already matched when asked to, without an agent line", () => {
const row = workspace({ id: "archived", title: "Billing cleanup" });
const rank = createWorkspaceRanker();
expect(rank([row], "billign")).toEqual([]);
expect(rank([row], "billign", { keepUnmatched: true })).toEqual([row]);
});
});
@@ -1,12 +1,9 @@
import { compareMatchClasses, type MatchClass } from "@getpaseo/protocol/search/text-match";
import {
compareBuiltInScores,
compareByRecency,
filterAndRankBuiltInResults,
scoreSearchFields,
searchFieldsMatchClass,
type CommandCenterScore,
type CommandCenterSearchFields,
type CommandCenterWorkspaceAgent,
type CommandCenterWorkspaceResult,
} from "./results";
@@ -27,176 +24,41 @@ function parseChangeRequestQuery(query: string): number | null {
return Number.isSafeInteger(number) ? number : null;
}
/** Within a match class, a match on the workspace's own text ranks ahead of one through an agent. */
const OWN_MATCH = 0;
const AGENT_MATCH = 1;
/** The host matched it (typo-tolerant, server-side) but nothing here does. Archived rows only. */
const HOST_MATCH = 2;
/** How a row matched: its class decides first, its score within the class. */
interface Candidate {
matchClass: MatchClass;
score: CommandCenterScore;
}
interface ScoredWorkspace {
workspace: CommandCenterWorkspaceResult;
via: typeof OWN_MATCH | typeof AGENT_MATCH | typeof HOST_MATCH;
/** The match the row shows, which is also the one it ranks by. */
candidate: Candidate | null;
agent: CommandCenterWorkspaceAgent | null;
score: CommandCenterScore | null;
changeRequestHit: boolean;
}
function ownSearchFields(workspace: CommandCenterWorkspaceResult) {
function searchFields(workspace: CommandCenterWorkspaceResult) {
return { visible: [workspace.title, workspace.subtitle], hidden: [] };
}
/** An agent is found through its own title and its workspace's text together. */
function agentSearchFields(
workspace: CommandCenterWorkspaceResult,
agent: CommandCenterWorkspaceAgent,
) {
return { visible: [workspace.title, workspace.subtitle, agent.title], hidden: [] };
}
function scoreCandidate(query: string, fields: CommandCenterSearchFields): Candidate | null {
const score = scoreSearchFields(query, fields);
const matchClass = searchFieldsMatchClass(query, fields);
return score && matchClass ? { matchClass, score } : null;
}
function compareCandidates(left: Candidate, right: Candidate): number {
return (
compareMatchClasses(left.matchClass, right.matchClass) ||
compareBuiltInScores(left.score, right.score)
);
}
/**
* Change-request hits first, host-only matches last; then match class, the workspace's own text
* ahead of an agent, match quality, and recency.
*/
function compareScoredWorkspaces(left: ScoredWorkspace, right: ScoredWorkspace): number {
if (left.changeRequestHit !== right.changeRequestHit) {
return left.changeRequestHit ? -1 : 1;
}
if ((left.via === HOST_MATCH) !== (right.via === HOST_MATCH)) {
return left.via === HOST_MATCH ? 1 : -1;
}
if (left.candidate && right.candidate) {
const classDelta = compareMatchClasses(left.candidate.matchClass, right.candidate.matchClass);
if (classDelta !== 0) return classDelta;
}
if (left.via !== right.via) return left.via - right.via;
if (left.candidate && right.candidate) {
const scoreDelta = compareBuiltInScores(left.candidate.score, right.candidate.score);
if (left.score && right.score) {
const scoreDelta = compareBuiltInScores(left.score, right.score);
if (scoreDelta !== 0) return scoreDelta;
}
return compareByRecency(left.workspace, right.workspace);
}
interface AgentMatch extends Candidate {
agent: CommandCenterWorkspaceAgent;
}
/**
* The workspace's best-matching agent. Each agent is scored together with the workspace's
* text, so a query split across the two finds it. Agents arrive most recent first, so a tie
* keeps the newer one.
*/
function agentMatch(workspace: CommandCenterWorkspaceResult, query: string): AgentMatch | null {
let best: AgentMatch | null = null;
for (const agent of workspace.agents) {
const candidate = scoreCandidate(query, agentSearchFields(workspace, agent));
if (candidate && (!best || compareCandidates(candidate, best) < 0)) {
best = { agent, ...candidate };
}
}
return best;
}
export type WorkspaceRanker = (
export function filterAndRankWorkspaces(
workspaces: readonly CommandCenterWorkspaceResult[],
query: string,
options?: { keepUnmatched?: boolean },
) => CommandCenterWorkspaceResult[];
): CommandCenterWorkspaceResult[] {
if (!query.trim()) return filterAndRankBuiltInResults(workspaces, query, searchFields);
/**
* Rank workspaces for a query, best match first. A workspace matches on its own title, project,
* branch and change request, or on those together with the title of one of its agents. It is
* matched through an agent only when the agent matches in a closer class than its own text
* (see `MatchClass`), never on a change-request hit; such a match comes back naming that agent,
* and opens it. Each row ranks by the match it shows.
*
* An empty query lists every workspace, most recent first. `keepUnmatched` keeps rows nothing
* here matches, ranked last: archived rows come from the host's own search, which is
* typo-tolerant, so the host is the authority on whether they match.
*
* The ranker remembers the row it made for each workspace and agent, so a row matched through
* the same agent is the same object on every keystroke and its list row does not re-render.
*/
export function createWorkspaceRanker(): WorkspaceRanker {
const viaAgent = new WeakMap<
CommandCenterWorkspaceResult,
Map<string, CommandCenterWorkspaceResult>
>();
function matchedThrough(
workspace: CommandCenterWorkspaceResult,
agent: CommandCenterWorkspaceAgent,
): CommandCenterWorkspaceResult {
let rows = viaAgent.get(workspace);
if (!rows) {
rows = new Map();
viaAgent.set(workspace, rows);
}
let row = rows.get(agent.id);
if (!row) {
row = { ...workspace, matchedAgent: agent, run: () => workspace.openAgent(agent.id) };
rows.set(agent.id, row);
}
return row;
const changeRequestNumber = parseChangeRequestQuery(query);
const matches: ScoredWorkspace[] = [];
for (const workspace of workspaces) {
const score = scoreSearchFields(query, searchFields(workspace));
const changeRequestHit =
changeRequestNumber !== null && workspace.changeRequestNumber === changeRequestNumber;
if (score || changeRequestHit) matches.push({ workspace, score, changeRequestHit });
}
return (workspaces, query, options = {}) => {
if (!query.trim()) return [...workspaces].sort(compareByRecency);
const changeRequestNumber = parseChangeRequestQuery(query);
const matches: ScoredWorkspace[] = [];
for (const workspace of workspaces) {
const changeRequestHit =
changeRequestNumber !== null && workspace.changeRequestNumber === changeRequestNumber;
const own = scoreCandidate(query, ownSearchFields(workspace));
// A change-request hit is the workspace's own answer to the query.
const throughAgent = changeRequestHit ? null : agentMatch(workspace, query);
// An agent is named only when it matches in a closer class than the workspace's own text.
if (
throughAgent &&
(!own || compareMatchClasses(throughAgent.matchClass, own.matchClass) < 0)
) {
matches.push({
workspace,
via: AGENT_MATCH,
candidate: throughAgent,
agent: throughAgent.agent,
changeRequestHit,
});
} else if (own || changeRequestHit) {
matches.push({ workspace, via: OWN_MATCH, candidate: own, agent: null, changeRequestHit });
} else if (options.keepUnmatched) {
matches.push({
workspace,
via: HOST_MATCH,
candidate: null,
agent: null,
changeRequestHit,
});
}
}
matches.sort(compareScoredWorkspaces);
return matches.map((match) =>
match.agent ? matchedThrough(match.workspace, match.agent) : match.workspace,
);
};
matches.sort(compareScoredWorkspaces);
return matches.map((match) => match.workspace);
}
+14 -4
View File
@@ -17,12 +17,11 @@ import { useIsCompactFormFactor } from "@/constants/layout";
import { useTimeAgo } from "@/hooks/use-time-ago";
import { type AggregatedAgent } from "@/hooks/use-aggregated-agents";
import { useSessionStore } from "@/stores/session-store";
import { ChevronRight } from "lucide-react-native";
import { Archive, ChevronRight } from "lucide-react-native";
import { useProviderIcon } from "@/components/provider-icons";
import { navigateToAgent } from "@/utils/navigate-to-agent";
import { useArchiveAgent } from "@/hooks/use-archive-agent";
import { HighlightedText } from "@/components/ui/highlighted-text";
import { ArchivedBadge } from "@/components/archived-badge";
import { StatusBadge, type StatusBadgeVariant } from "@/components/ui/status-badge";
import { findHighlightRanges } from "@/components/ui/highlighted-text-segments";
@@ -100,30 +99,36 @@ function formatDateSectionLabel(t: TFunction, section: DateSectionKey): string {
function SessionBadge({
label,
icon,
tone = "neutral",
}: {
label: string;
icon?: ReactElement;
tone?: "neutral" | "warning" | "danger";
}) {
let variant: StatusBadgeVariant = "muted";
if (tone === "warning") variant = "warning";
else if (tone === "danger") variant = "error";
return <StatusBadge label={label} variant={variant} />;
return <StatusBadge label={label} variant={variant} leading={icon} />;
}
function SessionRowBadges({
agent,
archivedIcon,
pendingPermissionCount,
showDesktopAttention,
}: {
agent: AggregatedAgent;
archivedIcon: ReactElement;
pendingPermissionCount: number;
showDesktopAttention: boolean;
}) {
const { t } = useTranslation();
return (
<>
{agent.archivedAt ? <ArchivedBadge /> : null}
{agent.archivedAt ? (
<SessionBadge label={t("agentList.badges.archived")} icon={archivedIcon} />
) : null}
{pendingPermissionCount > 0 ? (
<SessionBadge
label={t("agentList.badges.pending", { count: pendingPermissionCount })}
@@ -209,6 +214,10 @@ function SessionRow({
const handlePress = useCallback(() => onPress(agent), [onPress, agent]);
const handleLongPress = useCallback(() => onLongPress(agent), [onLongPress, agent]);
const archivedIcon = useMemo(
() => <Archive size={theme.fontSize.sm} color={theme.colors.foregroundMuted} />,
[theme.fontSize.sm, theme.colors.foregroundMuted],
);
const showDesktopAttention =
!isMobile && showAttentionIndicator && Boolean(agent.requiresAttention);
@@ -252,6 +261,7 @@ function SessionRow({
) : null}
<SessionRowBadges
agent={agent}
archivedIcon={archivedIcon}
pendingPermissionCount={pendingPermissionCount}
showDesktopAttention={showDesktopAttention}
/>
@@ -1,17 +0,0 @@
import { Archive } from "lucide-react-native";
import { useTranslation } from "react-i18next";
import { withUnistyles } from "react-native-unistyles";
import { StatusBadge } from "@/components/ui/status-badge";
const ThemedArchive = withUnistyles(Archive, (theme) => ({
size: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
}));
const ARCHIVE_ICON = <ThemedArchive />;
/** Marks a session or workspace the user archived, wherever archived items are listed. */
export function ArchivedBadge() {
const { t } = useTranslation();
return <StatusBadge label={t("agentList.badges.archived")} leading={ARCHIVE_ICON} />;
}
@@ -1,149 +0,0 @@
import React, { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { persistAttachmentFromBlob } from "@/attachments/service";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { i18n } from "@/i18n/i18next";
import { WindowLayoutProvider } from "@/window-layout";
import { AttachmentLightbox, type ImageLightboxSource } from "./attachment-lightbox";
interface FrameSample {
image: { x: number; y: number; width: number; height: number } | null;
error: boolean;
}
function nextFrame(): Promise<number> {
return new Promise((resolve) => requestAnimationFrame(resolve));
}
function createPng(width: number, height: number): Promise<Blob> {
const canvas = new OffscreenCanvas(width, height);
const context = canvas.getContext("2d");
if (!context) throw new Error("Canvas 2D context unavailable");
context.fillStyle = "#3a7";
context.fillRect(0, 0, width, height);
return canvas.convertToBlob({ type: "image/png" });
}
function noop() {}
function isPainted(element: Element): boolean {
for (let node: Element | null = element; node; node = node.parentElement) {
if (Number(getComputedStyle(node).opacity) === 0) return false;
}
return true;
}
/** What the next paint will show: the visible lightbox image box, and whether the error is up. */
function sampleFrame(): FrameSample {
const image = document.querySelector('[data-testid="attachment-lightbox-image"]');
const rect = image?.getBoundingClientRect();
const visible = image && rect && rect.width > 0 && rect.height > 0 && isPainted(image);
return {
image: visible
? {
x: Math.round(rect.x),
y: Math.round(rect.y),
width: Math.round(rect.width),
height: Math.round(rect.height),
}
: null,
error: (document.body.textContent ?? "").includes("Couldn't load image"),
};
}
/** Samples every frame from the open until the image has held one box for 20 frames. */
async function recordOpening(open: () => void): Promise<FrameSample[]> {
const samples: FrameSample[] = [];
open();
let stableFrames = 0;
for (let frame = 0; frame < 300 && stableFrames < 20; frame += 1) {
await nextFrame();
const sample = sampleFrame();
const previous = samples.at(-1);
stableFrames =
sample.image && JSON.stringify(sample.image) === JSON.stringify(previous?.image)
? stableFrames + 1
: 0;
samples.push(sample);
}
return samples;
}
let root: Root;
let container: HTMLDivElement;
beforeEach(async () => {
vi.stubGlobal("React", React);
await i18n.changeLanguage("en");
container = document.createElement("div");
document.body.appendChild(container);
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
document.body.replaceChildren();
vi.unstubAllGlobals();
});
function renderLightbox(source: ImageLightboxSource | null) {
root.render(
<SafeAreaProvider>
<WindowLayoutProvider>
<AttachmentLightbox source={source} onClose={noop} />
</WindowLayoutProvider>
</SafeAreaProvider>,
);
}
async function expectOpeningPaintsOnlyTheFittedImage(source: ImageLightboxSource) {
const samples = await recordOpening(() => renderLightbox(source));
const fitted = samples.at(-1)?.image;
expect(fitted, "the image never settled").toBeTruthy();
expect(samples.filter((sample) => sample.error)).toEqual([]);
expect(
samples.filter(
(sample) => sample.image && JSON.stringify(sample.image) !== JSON.stringify(fitted),
),
).toEqual([]);
}
describe("AttachmentLightbox opening in the browser", () => {
it("paints the fitted attachment image as its first image frame", async () => {
const metadata = await persistAttachmentFromBlob({
blob: await createPng(2400, 1600),
mimeType: "image/png",
fileName: "screenshot.png",
});
await expectOpeningPaintsOnlyTheFittedImage({ type: "attachment", metadata });
});
it("paints only the fitted image when the same attachment opens again", async () => {
const metadata = await persistAttachmentFromBlob({
blob: await createPng(2400, 1600),
mimeType: "image/png",
fileName: "screenshot.png",
});
const source: ImageLightboxSource = { type: "attachment", metadata };
await expectOpeningPaintsOnlyTheFittedImage(source);
await act(async () => renderLightbox(null));
await expectOpeningPaintsOnlyTheFittedImage(source);
});
it("shows an image the browser reports no natural size for", async () => {
const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"></svg>';
const uri = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
await expectOpeningPaintsOnlyTheFittedImage({ type: "uri", uri });
});
it("paints the fitted timeline image as its first image frame", async () => {
const uri = URL.createObjectURL(await createPng(2400, 1600));
await expectOpeningPaintsOnlyTheFittedImage({ type: "uri", uri });
});
});
@@ -4,7 +4,6 @@ import { createRoot, type Root } from "react-dom/client";
import { JSDOM } from "jsdom";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import type { AttachmentMetadata } from "@/attachments/types";
import type { AttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
import { AttachmentLightbox, type ImageLightboxSource } from "./attachment-lightbox";
const { theme, imageMetadata, useAttachmentPreviewUrlMock } = vi.hoisted(() => {
@@ -39,9 +38,9 @@ const { theme, imageMetadata, useAttachmentPreviewUrlMock } = vi.hoisted(() => {
return {
theme: hoistedTheme,
imageMetadata: hoistedImageMetadata,
useAttachmentPreviewUrlMock: vi.fn<
(metadata: AttachmentMetadata | null) => AttachmentPreviewUrl
>(() => ({ status: "ready", url: "blob:preview" })),
useAttachmentPreviewUrlMock: vi.fn<(metadata: AttachmentMetadata | null) => string | null>(
() => "blob:preview",
),
};
});
const attachmentSource: ImageLightboxSource = { type: "attachment", metadata: imageMetadata };
@@ -74,13 +73,10 @@ vi.mock("react-i18next", () => ({
}));
vi.mock("react-native-safe-area-context", () => ({
SafeAreaProvider: ({ children }: { children?: React.ReactNode }) => children,
useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
}));
vi.mock("@/window-layout", () => ({
WindowSafeArea: ({ children }: { children?: React.ReactNode }) => children,
}));
vi.mock("react-native-gesture-handler", () => ({
GestureHandlerRootView: ({ children }: { children?: React.ReactNode }) =>
React.createElement("div", { "data-testid": "gesture-handler-root" }, children),
@@ -155,7 +151,7 @@ beforeEach(() => {
container = document.createElement("div");
document.body.appendChild(container);
root = createRoot(container);
useAttachmentPreviewUrlMock.mockReturnValue({ status: "ready", url: "blob:preview" });
useAttachmentPreviewUrlMock.mockReturnValue("blob:preview");
});
afterEach(() => {
@@ -233,22 +229,14 @@ describe("AttachmentLightbox", () => {
expect(onClose).toHaveBeenCalledTimes(1);
});
it("shows error text when the preview URL fails to resolve", () => {
useAttachmentPreviewUrlMock.mockReturnValue({ status: "failed" });
it("shows error text when the preview URL resolves to null", () => {
useAttachmentPreviewUrlMock.mockReturnValue(null);
render(<AttachmentLightbox source={attachmentSource} onClose={vi.fn()} />);
expect(queryByTestId("attachment-lightbox-image")).toBeNull();
expect(document.body.textContent ?? "").toContain("Couldn't load image");
});
it("shows neither the image nor an error while the preview URL resolves", () => {
useAttachmentPreviewUrlMock.mockReturnValue({ status: "loading" });
render(<AttachmentLightbox source={attachmentSource} onClose={vi.fn()} />);
expect(queryByTestId("attachment-lightbox-image")).toBeNull();
expect(document.body.textContent ?? "").not.toContain("Couldn't load image");
});
it("closes on Escape key on web", () => {
const onClose = vi.fn();
render(<AttachmentLightbox source={attachmentSource} onClose={onClose} />);
@@ -4,21 +4,17 @@ import { type ReactNode, useCallback, useEffect, useMemo, useState } from "react
import { Pressable, Text, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { StyleSheet } from "react-native-unistyles";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { SafeAreaProvider, useSafeAreaInsets } from "react-native-safe-area-context";
import { X } from "lucide-react-native";
import { useTranslation } from "react-i18next";
import type { AttachmentMetadata } from "@/attachments/types";
import {
type AttachmentPreviewUrl,
useAttachmentPreviewUrl,
} from "@/attachments/use-attachment-preview-url";
import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
import { isNative } from "@/constants/platform";
import { SPACING } from "@/styles/theme";
import { WindowChromeRootRegion } from "@/utils/desktop-window";
import { ZoomableImage } from "@/components/zoomable-viewport/image";
import type { ViewportSize } from "@/components/zoomable-viewport/geometry";
import { useGlobalOverlayLayer } from "@/lib/overlay-root";
import { WindowSafeArea } from "@/window-layout";
export type ImageLightboxSource =
| { type: "attachment"; metadata: AttachmentMetadata }
@@ -35,13 +31,10 @@ const LIGHTBOX_FIT = { padding: SPACING[4], maxWidth: 960, maxHeight: 640 };
export function AttachmentLightbox({ source, onClose }: AttachmentLightboxProps) {
const { t } = useTranslation();
const metadata = source?.type === "attachment" ? source.metadata : null;
const attachmentPreview = useAttachmentPreviewUrl(metadata);
const image: AttachmentPreviewUrl =
source?.type === "uri" ? { status: "ready", url: source.uri } : attachmentPreview;
const url = image.status === "ready" ? image.url : null;
const attachmentUrl = useAttachmentPreviewUrl(metadata);
const url = source?.type === "uri" ? source.uri : attachmentUrl;
const contentSize = source?.type === "uri" ? source.contentSize : undefined;
const [errored, setErrored] = useState(false);
const failed = errored || image.status === "failed";
const modalLayer = useGlobalOverlayLayer("modal", source !== null);
useEffect(() => {
@@ -83,12 +76,14 @@ export function AttachmentLightbox({ source, onClose }: AttachmentLightboxProps)
return null;
}
const hasError = errored || !url;
return (
<Modal transparent animationType="fade" statusBarTranslucent visible onRequestClose={onClose}>
<ModalRoot style={styles.root}>
{/* The modal draws over the whole window: its insets are the window's, not the ones left
where the image was opened (inside a sheet tab, the bottom one is already spent). */}
<WindowSafeArea>
{/* The modal is its own window: its insets are the window's, not the ones left where the
image was opened (inside a sheet tab, the bottom one is already spent). */}
<SafeAreaProvider>
<WindowChromeRootRegion corners="both">
<View ref={setOverlayScope} style={styles.root}>
<Pressable
@@ -99,10 +94,9 @@ export function AttachmentLightbox({ source, onClose }: AttachmentLightboxProps)
style={styles.backdrop}
/>
<LightboxImageArea>
{failed ? (
{hasError ? (
<Text style={styles.errorText}>{t("message.attachments.imageLoadFailed")}</Text>
) : null}
{!failed && url ? (
) : (
<ZoomableImage
accessibilityLabel={t("composer.attachments.openImage")}
actions={actions}
@@ -114,11 +108,11 @@ export function AttachmentLightbox({ source, onClose }: AttachmentLightboxProps)
testID="attachment-lightbox"
uri={url}
/>
) : null}
)}
</LightboxImageArea>
</View>
</WindowChromeRootRegion>
</WindowSafeArea>
</SafeAreaProvider>
</ModalRoot>
</Modal>
);
@@ -133,10 +133,9 @@ export function AttachmentLabel({ icon, title, subtitle }: AttachmentLabelProps)
/** Square image preview pill body. */
export function AttachmentThumbnail({ metadata }: { metadata: AttachmentMetadata }) {
const preview = useAttachmentPreviewUrl(metadata);
const uri = preview.status === "ready" ? preview.url : null;
const source = useMemo(() => (uri ? { uri } : null), [uri]);
if (!source) {
const uri = useAttachmentPreviewUrl(metadata);
const source = useMemo(() => ({ uri: uri ?? "" }), [uri]);
if (!uri) {
return <View style={styles.thumbnailPlaceholder} />;
}
return <Image source={source} style={styles.thumbnail} />;
@@ -1,574 +0,0 @@
import React, { act, type ReactNode } from "react";
import { flushSync } from "react-dom";
import { createRoot, type Root } from "react-dom/client";
import { PortalProvider } from "@gorhom/portal";
import { View } from "react-native";
import { KeyboardProvider } from "react-native-keyboard-controller";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { afterEach, beforeEach, expect, it, vi } from "vitest";
import { RetainedPanel } from "@/components/retained-panel";
import { KeyboardShiftProvider } from "@/keyboard/shift";
import type { AutocompleteOption } from "./autocomplete";
import { AutocompletePopover } from "./autocomplete-popover";
import { FloatingPanelPortalHost } from "./floating-panel-portal";
// App sources compile against the classic JSX runtime, which expects React on the global.
beforeEach(() => vi.stubGlobal("React", React));
/**
* The popover must paint its first frame at its place. On native, Reanimated computes a style's
* first value when its hook first runs and sends later values after the mounting commit, which
* native paints: a bound computed while the popover was closed hung the popover over the composer
* for a frame on every open. The frame now mounts only with a measured anchor. This suite runs the
* web frame; the native frame was checked frame by frame on Android.
*/
const SAFE_AREA = {
frame: { x: 0, y: 0, width: 390, height: 844 },
insets: { top: 0, left: 0, right: 0, bottom: 0 },
};
// The composer rests on the dock's bottom edge and grows upward, as in the app.
const COMPOSER_BOTTOM = 124;
const OFFSET_FROM_ANCHOR = 12;
const OPTIONS: AutocompleteOption[] = ["help", "hello", "history"].map((name) => ({
id: name,
label: `/${name}`,
icon: "command",
}));
let root: Root | null = null;
let container: HTMLDivElement | null = null;
afterEach(() => {
act(() => root?.unmount());
container?.remove();
root = null;
container = null;
});
const SCREEN_STYLE = { width: 390, height: 844 };
const styleCache = new Map<string, object>();
function cachedStyle<T extends object>(key: string, create: () => T): T {
const cached = styleCache.get(key);
if (cached) return cached as T;
const style = create();
styleCache.set(key, style);
return style;
}
function composerStyle(width: number): object {
return cachedStyle(`composer:${width}`, () => ({
position: "absolute" as const,
bottom: COMPOSER_BOTTOM,
left: 16,
width,
}));
}
function inputStyle(height: number): object {
return cachedStyle(`input:${height}`, () => ({ height }));
}
function ignoreSelection(): void {}
function Providers({ children }: { children: ReactNode }): ReactNode {
return (
<SafeAreaProvider initialMetrics={SAFE_AREA}>
<KeyboardProvider>
<KeyboardShiftProvider>
<PortalProvider>{children}</PortalProvider>
</KeyboardShiftProvider>
</KeyboardProvider>
</SafeAreaProvider>
);
}
interface ScreenProps {
visible: boolean;
panelActive?: boolean;
inputHeight?: number;
composerWidth?: number;
options?: AutocompleteOption[];
/** Counted up from the best match, which is the last option. */
selectedFromBest?: number;
}
function Screen({
visible,
panelActive = true,
inputHeight = 120,
composerWidth = 358,
options = OPTIONS,
selectedFromBest = 0,
}: ScreenProps): ReactNode {
return (
<Providers>
<RetainedPanel active={panelActive}>
<View style={SCREEN_STYLE}>
<View style={composerStyle(composerWidth)}>
<AutocompletePopover
visible={visible}
options={options}
selectedIndex={options.length - 1 - selectedFromBest}
onSelect={ignoreSelection}
>
<View testID="composer-input" style={inputStyle(inputHeight)} />
</AutocompletePopover>
</View>
<FloatingPanelPortalHost />
</View>
</RetainedPanel>
</Providers>
);
}
function render(node: ReactNode): void {
if (!container) {
container = document.createElement("div");
document.body.appendChild(container);
root = createRoot(container);
}
act(() => root?.render(node));
}
/** Commits a change to the screen synchronously and lets the browser paint it. */
async function changeAndPaint(node: ReactNode): Promise<void> {
flushSync(() => root?.render(node));
await new Promise<void>((resolve) => {
requestAnimationFrame(() => {
const channel = new MessageChannel();
channel.port1.addEventListener("message", () => resolve(), { once: true });
channel.port1.start();
channel.port2.postMessage(null);
});
});
}
function rectOf(testID: string): DOMRect | null {
return document.querySelector(`[data-testid="${testID}"]`)?.getBoundingClientRect() ?? null;
}
/** Where the popover sits against the composer, or null when it is not painted. */
function placementAgainstComposer(): { gap: number; x: number; width: number } | null {
const popover = rectOf("composer-autocomplete-popover");
const composer = rectOf("composer-input");
if (!popover || !composer) return null;
return {
gap: Math.round(composer.top - popover.bottom),
x: Math.round(popover.x - composer.x),
width: Math.round(popover.width - composer.width),
};
}
async function openSettled(props: Omit<ScreenProps, "visible"> = {}): Promise<void> {
render(<Screen visible={false} {...props} />);
render(<Screen visible {...props} />);
await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 200));
expect(placementAgainstComposer()).toEqual({ gap: OFFSET_FROM_ANCHOR, x: 0, width: 0 });
}
/** Every max-height the popover's frame has held, starting with the one it mounted with. */
function recordPopoverMaxHeights(): { values: string[]; stop: () => void } {
const values: string[] = [];
const observer = new MutationObserver((records) => {
for (const record of records) {
if (record.type === "childList") {
for (const node of record.addedNodes) {
if (!(node instanceof HTMLElement)) continue;
const popover = node.matches('[data-testid="composer-autocomplete-popover"]')
? node
: node.querySelector<HTMLElement>('[data-testid="composer-autocomplete-popover"]');
// The attribute records below carry what the style was before each change; this
// carries the style at insertion when nothing changed it afterwards.
if (popover && values.length === 0) values.push(popover.style.maxHeight);
}
}
if (
record.type === "attributes" &&
record.target instanceof HTMLElement &&
record.target.dataset.testid === "composer-autocomplete-popover"
) {
const before = /max-height:\s*([^;]+)/.exec(record.oldValue ?? "")?.[1]?.trim() ?? "";
if (values.length <= 1) values.splice(0, values.length, before);
values.push(record.target.style.maxHeight);
}
}
});
observer.observe(document.body, {
subtree: true,
childList: true,
attributes: true,
attributeFilter: ["style"],
attributeOldValue: true,
});
return { values, stop: () => observer.disconnect() };
}
async function waitForPopover(): Promise<HTMLElement> {
for (let attempt = 0; attempt < 100; attempt += 1) {
const popover = document.querySelector<HTMLElement>(
'[data-testid="composer-autocomplete-popover"]',
);
if (popover) return popover;
await new Promise((resolve) => setTimeout(resolve, 20));
}
throw new Error("The popover did not open");
}
it("opens with its height bound instead of the bound it had while closed", async () => {
// The composer mounts first and opens the popover later, as typing `/` does.
render(<Screen visible={false} />);
const recording = recordPopoverMaxHeights();
render(<Screen visible />);
const popover = await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 200));
recording.stop();
const settled = popover.style.maxHeight;
expect(Number.parseFloat(settled)).toBeGreaterThan(0);
expect(recording.values[0]).toBe(settled);
});
/**
* The popover lives in a portal and copies the composer's rect. A copy taken after the composer's
* layout paints the composer at its new size against the popover's old place: the popover overlapped
* a composer that grew a line, floated above one that shrank, and kept the old width after a resize.
*/
it("moves with the composer in the frame the composer grows", async () => {
await openSettled();
await changeAndPaint(<Screen visible inputHeight={160} />);
expect(placementAgainstComposer()).toEqual({ gap: OFFSET_FROM_ANCHOR, x: 0, width: 0 });
});
it("follows the composer down when its text clears before the popover closes", async () => {
// The input relayouts on the cleared text before the autocomplete hides the popover.
await openSettled({ inputHeight: 160 });
await changeAndPaint(<Screen visible inputHeight={120} />);
expect(placementAgainstComposer()).toEqual({ gap: OFFSET_FROM_ANCHOR, x: 0, width: 0 });
});
it("matches the composer's width in the frame the composer resizes", async () => {
await openSettled();
await changeAndPaint(<Screen visible composerWidth={240} />);
expect(placementAgainstComposer()).toEqual({ gap: OFFSET_FROM_ANCHOR, x: 0, width: 0 });
});
/**
* A retained workspace stays mounted while another route shows. A popover left open there tracked a
* composer it could not measure, and on native stopped following the composer after the user came
* back.
*/
it("closes while its retained panel is hidden and reopens in place when it shows again", async () => {
await openSettled();
render(<Screen visible panelActive={false} />);
expect(rectOf("composer-autocomplete-popover")).toBeNull();
render(<Screen visible />);
await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 200));
expect(placementAgainstComposer()).toEqual({ gap: OFFSET_FROM_ANCHOR, x: 0, width: 0 });
});
/** As many commands as a workspace with skills installed lists; the best match is last. */
function commandOptions(prefix: string, count: number): AutocompleteOption[] {
return Array.from({ length: count }, (_, index) => ({
id: `${prefix}-${count - index}`,
label: `/${prefix}-${count - index}`,
icon: "skill" as const,
description: `Description of ${prefix} ${count - index}`,
tag: "Skill",
}));
}
const LIST_PADDING_AND_BORDER = 5;
const ROW_HEIGHT_AT_LEAST = 36;
/** How far the best match's row sits above the popover's bottom edge, or null when not painted. */
function bestMatchAgainstPopoverBottom(label: string): number | null {
const popover = rectOf("composer-autocomplete-popover");
const row = document.querySelector(`[aria-label^="${label},"]`)?.getBoundingClientRect();
if (!popover) return null;
if (!row) return Number.NaN;
return Math.round(popover.bottom - row.bottom);
}
/** Samples a reading after every paint until stopped. */
function recordPaintedFrames<T>(read: () => T): { frames: T[]; stop: () => void } {
const frames: T[] = [];
let running = true;
const channel = new MessageChannel();
channel.port1.addEventListener("message", () => {
if (running) frames.push(read());
});
channel.port1.start();
const tick = (): void => {
if (!running) return;
channel.port2.postMessage(null);
requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
return {
frames,
stop: () => {
running = false;
},
};
}
/**
* The list is longer than the popover and reads upward from its best match, which sits against the
* bottom edge. Scrolling there after the list mounted painted the list at its old offset first: a
* few pixels short on open, a different stretch of the list when the results changed.
*/
it("paints a long list with its best match against the bottom from the first frame", async () => {
const options = commandOptions("skill", 100);
render(<Screen visible={false} options={options} />);
const recording = recordPaintedFrames(() => bestMatchAgainstPopoverBottom("/skill-1"));
render(<Screen visible options={options} />);
await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 300));
recording.stop();
const painted = recording.frames.filter((frame) => frame !== null);
expect(painted.length).toBeGreaterThan(0);
expect([...new Set(painted)]).toEqual([LIST_PADDING_AND_BORDER]);
});
it("keeps the best match against the bottom in the frame the results change", async () => {
const all = commandOptions("skill", 100);
const fewer = all.filter((_, index) => index % 3 === 0);
render(<Screen visible={false} options={all} />);
render(<Screen visible options={all} />);
await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 300));
// Narrowing keeps `/skill-1` the best match; widening brings the rest back above it.
const recording = recordPaintedFrames(() => bestMatchAgainstPopoverBottom("/skill-1"));
await changeAndPaint(<Screen visible options={fewer} />);
await new Promise((resolve) => setTimeout(resolve, 200));
await changeAndPaint(<Screen visible options={all} />);
await new Promise((resolve) => setTimeout(resolve, 300));
recording.stop();
expect([...new Set(recording.frames)]).toEqual([LIST_PADDING_AND_BORDER]);
});
function mountedRows(prefix = "skill"): Element[] {
return [...document.querySelectorAll(`[aria-label^="/${prefix}-"]`)];
}
/**
* Every result used to mount before the popover's first frame, so a workspace with a hundred
* commands waited on a hundred rows to see six.
*/
it("mounts the rows nearest the composer first, however many results there are", async () => {
const options = commandOptions("skill", 500);
render(<Screen visible={false} options={options} />);
const recording = recordPaintedFrames(() =>
rectOf("composer-autocomplete-popover") ? mountedRows().length : null,
);
render(<Screen visible options={options} />);
await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 100));
recording.stop();
const firstFrame = recording.frames.find((frame) => frame !== null);
expect(firstFrame).toBeGreaterThan(0);
expect(firstFrame).toBeLessThan(20);
expect(bestMatchAgainstPopoverBottom("/skill-1")).toBe(LIST_PADDING_AND_BORDER);
});
/**
* A list that had mounted its whole window kept that window for the next results, so narrowing a
* long list to another long one waited on ten times the rows the popover shows.
*/
it("mounts the rows nearest the composer first when the results change", async () => {
const commands = commandOptions("skill", 500);
const matches = commandOptions("plugin", 300);
render(<Screen visible={false} options={commands} />);
render(<Screen visible options={commands} />);
await waitForPopover();
await expect.poll(() => mountedRows().length, { timeout: 3000 }).toBeGreaterThan(40);
const recording = recordPaintedFrames(() => mountedRows("plugin").length);
await changeAndPaint(<Screen visible options={matches} />);
recording.stop();
const firstFrame = recording.frames.find((count) => count > 0);
expect(firstFrame).toBeLessThan(20);
expect(bestMatchAgainstPopoverBottom("/plugin-1")).toBe(LIST_PADDING_AND_BORDER);
});
function scrollerOf(popover: HTMLElement): HTMLElement {
const scroller = [...popover.querySelectorAll<HTMLElement>("*")].find(
(element) =>
element.scrollHeight > element.clientHeight + 1 &&
["auto", "scroll"].includes(getComputedStyle(element).overflowY),
);
if (!scroller) throw new Error("The list does not scroll");
return scroller;
}
/**
* Native paints a scroll command a frame or two after the rows it was meant for. A list that rests
* against the composer only because script scrolled it there shows the rows somewhere else first,
* so the composer's edge is where the list's scroll starts.
*/
it("rests against the composer where its scroll starts", async () => {
const all = commandOptions("skill", 100);
const fewer = all.filter((_, index) => index % 3 === 0);
render(<Screen visible={false} options={all} />);
render(<Screen visible options={all} />);
const popover = await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 300));
expect(scrollerOf(popover).scrollTop).toBe(0);
await changeAndPaint(<Screen visible options={fewer} />);
await new Promise((resolve) => setTimeout(resolve, 200));
expect(scrollerOf(popover).scrollTop).toBe(0);
await changeAndPaint(<Screen visible options={all} />);
await new Promise((resolve) => setTimeout(resolve, 300));
expect(scrollerOf(popover).scrollTop).toBe(0);
expect(bestMatchAgainstPopoverBottom("/skill-1")).toBe(LIST_PADDING_AND_BORDER);
});
it("returns to the best match in the frame results arrive while the list is scrolled away", async () => {
const all = commandOptions("skill", 100);
const fewer = all.filter((_, index) => index % 3 === 0);
render(<Screen visible={false} options={all} />);
render(<Screen visible options={all} />);
const popover = await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 300));
scrollerOf(popover).scrollTop = 400;
await new Promise((resolve) => setTimeout(resolve, 200));
expect(bestMatchAgainstPopoverBottom("/skill-1")).not.toBe(LIST_PADDING_AND_BORDER);
const recording = recordPaintedFrames(() => bestMatchAgainstPopoverBottom("/skill-1"));
await changeAndPaint(<Screen visible options={fewer} />);
await new Promise((resolve) => setTimeout(resolve, 200));
recording.stop();
expect([...new Set(recording.frames)]).toEqual([LIST_PADDING_AND_BORDER]);
});
/**
* The composer hands over a new list on every keystroke and every refetch, often holding the results
* it already showed. Starting over for those returned a list the user had scrolled to its rest.
*/
it("keeps its place when the same results arrive again", async () => {
const options = commandOptions("skill", 100);
render(<Screen visible={false} options={options} />);
render(<Screen visible options={options} />);
const popover = await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 300));
scrollerOf(popover).scrollTop = 400;
await new Promise((resolve) => setTimeout(resolve, 200));
const scrolledAway = bestMatchAgainstPopoverBottom("/skill-1");
expect(scrolledAway).not.toBe(LIST_PADDING_AND_BORDER);
const recording = recordPaintedFrames(() => bestMatchAgainstPopoverBottom("/skill-1"));
await changeAndPaint(<Screen visible options={commandOptions("skill", 100)} />);
await new Promise((resolve) => setTimeout(resolve, 200));
recording.stop();
expect([...new Set(recording.frames)]).toEqual([scrolledAway]);
});
/** Whether the row is wholly inside the popover's box. */
function isRowInView(label: string): boolean {
const popover = rectOf("composer-autocomplete-popover");
const row = document.querySelector(`[aria-label^="${label},"]`)?.getBoundingClientRect();
if (!popover || !row) return false;
return row.top >= popover.top - 0.5 && row.bottom <= popover.bottom + 0.5;
}
it("reveals the row the arrow keys select, including across the wrap to the far end", async () => {
const options = commandOptions("skill", 100);
render(<Screen visible={false} options={options} />);
render(<Screen visible options={options} />);
await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 300));
for (const selectedFromBest of [1, 5, 6, 7, 12, 6, 0, 99, 98, 93, 0]) {
render(<Screen visible options={options} selectedFromBest={selectedFromBest} />);
// Rows beyond the mounted ones come into view as they mount.
await expect
.poll(() => [selectedFromBest, isRowInView(`/skill-${selectedFromBest + 1}`)], {
timeout: 3000,
})
.toEqual([selectedFromBest, true]);
}
await expect.poll(() => bestMatchAgainstPopoverBottom("/skill-1")).toBe(LIST_PADDING_AND_BORDER);
});
/** The composer grew until the space above it holds fewer rows than the popover was showing. */
it("keeps the selected row in view when the popover gets shorter", async () => {
const options = commandOptions("skill", 100);
render(<Screen visible={false} options={options} />);
render(<Screen visible options={options} />);
await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 300));
// Beyond the rows the popover opened with, so it came into view at the popover's top edge.
render(<Screen visible options={options} selectedFromBest={7} />);
await expect.poll(() => isRowInView("/skill-8"), { timeout: 3000 }).toBe(true);
const height = rectOf("composer-autocomplete-popover")!.height;
render(<Screen visible options={options} selectedFromBest={7} inputHeight={560} />);
await expect
.poll(() => rectOf("composer-autocomplete-popover")!.height, { timeout: 3000 })
.toBeLessThan(height - ROW_HEIGHT_AT_LEAST);
await expect.poll(() => isRowInView("/skill-8"), { timeout: 3000 }).toBe(true);
});
/** The label of the row at the top of the popover's box. */
function topRowInView(): string | null {
const popover = rectOf("composer-autocomplete-popover");
if (!popover) return null;
const rows = mountedRows()
.map((row) => ({ rect: row.getBoundingClientRect(), label: row.getAttribute("aria-label") }))
.filter(({ rect }) => rect.top >= popover.top - 0.5 && rect.bottom <= popover.bottom + 0.5)
.toSorted((a, b) => a.rect.top - b.rect.top);
return rows[0]?.label?.split(",")[0] ?? null;
}
/**
* The far end of a long list is not mounted while the list rests against the composer. Scrolling to
* it as rows mounted painted the list at several places on the way.
*/
it("jumps between the two ends in one frame when the arrow keys wrap", async () => {
const options = commandOptions("skill", 100);
render(<Screen visible={false} options={options} />);
render(<Screen visible options={options} />);
await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 300));
const restingAtComposer = topRowInView();
const toFarEnd = recordPaintedFrames(topRowInView);
await changeAndPaint(<Screen visible options={options} selectedFromBest={99} />);
await new Promise((resolve) => setTimeout(resolve, 400));
toFarEnd.stop();
expect([...new Set(toFarEnd.frames)]).toEqual(["/skill-100"]);
expect(isRowInView("/skill-100")).toBe(true);
const toComposer = recordPaintedFrames(topRowInView);
await changeAndPaint(<Screen visible options={options} selectedFromBest={0} />);
await new Promise((resolve) => setTimeout(resolve, 400));
toComposer.stop();
expect([...new Set(toComposer.frames)]).toEqual([restingAtComposer]);
expect(bestMatchAgainstPopoverBottom("/skill-1")).toBe(LIST_PADDING_AND_BORDER);
});
it("scrolls towards rows further from the composer when the wheel turns up", async () => {
const options = commandOptions("skill", 100);
render(<Screen visible={false} options={options} />);
render(<Screen visible options={options} />);
const popover = await waitForPopover();
await new Promise((resolve) => setTimeout(resolve, 300));
const row = document.querySelector('[aria-label^="/skill-1,"]');
row?.dispatchEvent(new WheelEvent("wheel", { deltaY: -120, bubbles: true, cancelable: true }));
await new Promise((resolve) => setTimeout(resolve, 200));
// The best match moved down, out of the popover, by the distance the wheel turned.
expect(bestMatchAgainstPopoverBottom("/skill-1")).toBe(LIST_PADDING_AND_BORDER - 120);
expect(isRowInView("/skill-7")).toBe(true);
expect(popover.getBoundingClientRect().bottom).toBe(rectOf("composer-input")!.top - 12);
});
@@ -1,13 +1,15 @@
import { useCallback, useEffect, useRef, useState, type ReactElement, type ReactNode } from "react";
import {
StyleSheet,
View,
useWindowDimensions,
type StyleProp,
type ViewStyle,
} from "react-native";
useCallback,
useEffect,
useMemo,
useRef,
useState,
type ReactElement,
type ReactNode,
} from "react";
import { View, useWindowDimensions, type StyleProp, type ViewStyle } from "react-native";
import { Portal } from "@gorhom/portal";
import { useAnimatedReaction, useAnimatedRef } from "react-native-reanimated";
import Animated, { useAnimatedReaction, useAnimatedStyle } from "react-native-reanimated";
import { scheduleOnRN } from "react-native-worklets";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import {
@@ -19,10 +21,18 @@ import {
measureFloatingPanelPortalHost,
useFloatingPanelPortalHostName,
} from "@/components/ui/floating-panel-portal";
import { useRetainedPanelActive } from "@/components/retained-panel";
import { KeyboardTranslateView, useKeyboardAnchor, useKeyboardShift } from "@/keyboard/shift";
import { PopoverFrame } from "./internal/frame";
import type { AnchorAtRest } from "./internal/placement";
import { SPACING } from "@/styles/theme";
import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
const OFFSET_FROM_ANCHOR = SPACING[3];
interface RelativeAnchorRect {
x: number;
y: number;
width: number;
hostHeight: number;
}
interface AutocompletePopoverProps {
visible: boolean;
@@ -45,16 +55,8 @@ export function AutocompletePopover({
}: AutocompletePopoverProps): ReactElement | null {
"use no memo";
// React Compiler memoizes effect captures by reading SharedValue.value during render.
const anchorRef = useAnimatedRef<View>();
// The animated ref returns its native handle, which React 19 would call as a ref cleanup.
// The anchor stays a plain View: its style is the caller's Unistyles style.
const setAnchorElement = useCallback(
(element: View | null) => {
anchorRef(element);
},
[anchorRef],
);
const [anchorAtRest, setAnchorAtRest] = useState<AnchorAtRest | null>(null);
const anchorRef = useRef<View>(null);
const [relativeAnchorRect, setRelativeAnchorRect] = useState<RelativeAnchorRect | null>(null);
const windowDimensions = useWindowDimensions();
const safeAreaInsets = useSafeAreaInsets();
const portalHostName = useFloatingPanelPortalHostName();
@@ -62,9 +64,7 @@ export function AutocompletePopover({
const anchor = useKeyboardAnchor();
const { measureAtRest } = anchor;
const measurementGeneration = useRef(0);
// A retained panel stays mounted while hidden; its anchor cannot be measured until it shows.
const isPanelActive = useRetainedPanelActive();
const canMeasure = isPanelActive && visible && (options.length === 0 || selectedIndex >= 0);
const canMeasure = visible && (options.length === 0 || selectedIndex >= 0);
const remeasure = useCallback(() => {
if (!canMeasure) return;
@@ -78,11 +78,10 @@ export function AutocompletePopover({
if (generation !== measurementGeneration.current || !anchorRect || !hostRect) {
return undefined;
}
setAnchorAtRest({
setRelativeAnchorRect({
x: anchorRect.x - hostRect.x,
y: anchorRect.y - hostRect.y,
width: anchorRect.width,
height: anchorRect.height,
hostHeight: hostRect.height,
});
return undefined;
@@ -92,7 +91,7 @@ export function AutocompletePopover({
useEffect(() => {
measurementGeneration.current += 1;
if (!canMeasure) {
setAnchorAtRest(null);
setRelativeAnchorRect(null);
return;
}
@@ -115,32 +114,47 @@ export function AutocompletePopover({
[isMoving, remeasure],
);
// The layer covers the host and rides the anchor's keyboard translation; the frame inside it
// places the popover. A layer that spans the host keeps the popover inside its parent's bounds,
// which Android hit-testing requires.
// Lay out at the anchor's resting position; the KeyboardTranslateView below lifts
// it with the anchor. Height changes only at keyboard boundaries.
const baseStyle = useMemo(() => {
if (!relativeAnchorRect) return null;
return inlineUnistylesStyle({
position: "absolute" as const,
left: relativeAnchorRect.x,
width: relativeAnchorRect.width,
bottom: relativeAnchorRect.hostHeight - relativeAnchorRect.y + OFFSET_FROM_ANCHOR,
});
}, [relativeAnchorRect]);
const anchorY = relativeAnchorRect?.y ?? 0;
const reservedLift = anchor.reservedLift;
const heightStyle = useAnimatedStyle(
() => ({
maxHeight: Math.max(
0,
anchorY - reservedLift.value - safeAreaInsets.top - OFFSET_FROM_ANCHOR * 2,
),
}),
[anchorY, reservedLift, safeAreaInsets.top],
);
const showPopover = canMeasure && relativeAnchorRect && baseStyle;
// The translate view is the popover's own frame, so it lifts only the popover.
return (
<View ref={setAnchorElement} onLayout={remeasure} style={anchorStyle} collapsable={false}>
<View ref={anchorRef} onLayout={remeasure} style={anchorStyle} collapsable={false}>
{children}
{canMeasure && anchorAtRest ? (
{showPopover ? (
<Portal hostName={portalHostName}>
<KeyboardTranslateView
{...anchor.translation}
style={StyleSheet.absoluteFill}
pointerEvents="box-none"
>
<PopoverFrame
anchorRef={anchorRef}
anchorAtRest={anchorAtRest}
reservedLift={anchor.reservedLift}
topInset={safeAreaInsets.top}
>
<KeyboardTranslateView {...anchor.translation} style={baseStyle}>
<Animated.View testID="composer-autocomplete-popover" style={heightStyle}>
<Autocomplete
options={options}
selectedIndex={selectedIndex}
onSelect={onSelect}
status={status}
/>
</PopoverFrame>
</Animated.View>
</KeyboardTranslateView>
</Portal>
) : null}
@@ -1,68 +0,0 @@
import { useCallback, type ReactElement } from "react";
import Animated, {
measure,
useAnimatedStyle,
useFrameCallback,
useSharedValue,
} from "react-native-reanimated";
import { placeAboveAnchor, type PopoverFrameProps } from "./placement";
/**
* The composer grows upward from a fixed bottom edge as its text wraps. Its height is read on the
* UI thread every frame, so the popover moves in the frame the composer's new layout mounts; an
* asynchronous measurement through JS painted the composer over or away from the popover first.
*
* The frame mounts only with a measured anchor. Reanimated computes the first style when the hook
* first runs and sends later values after the mounting commit, which native paints: a placement
* computed before the measurement painted the popover over the composer for a frame on every open.
*/
export function PopoverFrame({
anchorRef,
anchorAtRest,
reservedLift,
topInset,
children,
}: PopoverFrameProps): ReactElement {
"use no memo";
// React Compiler memoizes effect captures by reading SharedValue.value during render.
const anchorHeight = useSharedValue(anchorAtRest.height);
const anchorLost = useSharedValue(false);
const readAnchorHeight = useCallback(() => {
"worklet";
if (anchorLost.value) return;
const measured = measure(anchorRef);
if (!measured) {
// The anchor left the shadow tree, usually as the composer unmounts; the portal removes the
// frame a commit later. Each failed measure() logs a warning, and a busy JS thread holds
// that commit for many frames, so stop measuring and follow the rest measurement.
anchorLost.value = true;
return;
}
if (measured.height !== anchorHeight.value) {
anchorHeight.value = measured.height;
}
}, [anchorHeight, anchorLost, anchorRef]);
useFrameCallback(readAnchorHeight);
const style = useAnimatedStyle(() => {
const anchorBottom = anchorAtRest.y + anchorAtRest.height;
const liveHeight = anchorLost.value ? anchorAtRest.height : anchorHeight.value;
return {
position: "absolute",
left: anchorAtRest.x,
width: anchorAtRest.width,
...placeAboveAnchor({
anchorTop: anchorBottom - liveHeight,
hostHeight: anchorAtRest.hostHeight,
reservedLift: reservedLift.value,
topInset,
}),
};
}, [anchorAtRest, anchorHeight, anchorLost, reservedLift, topInset]);
return (
<Animated.View testID="composer-autocomplete-popover" style={style}>
{children}
</Animated.View>
);
}
@@ -1,68 +0,0 @@
import { useLayoutEffect, useRef, useState, type ReactElement } from "react";
import { flushSync } from "react-dom";
import { View } from "react-native";
import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
import { placeAboveAnchor, type AnchorAtRest, type PopoverFrameProps } from "./placement";
type AnchorRect = Omit<AnchorAtRest, "height">;
function rectWithin(anchor: HTMLElement, host: HTMLElement): AnchorRect {
const anchorRect = anchor.getBoundingClientRect();
const hostRect = host.getBoundingClientRect();
return {
x: anchorRect.x - hostRect.x,
y: anchorRect.y - hostRect.y,
width: anchorRect.width,
hostHeight: hostRect.height,
};
}
/**
* The composer resizes as its text wraps and as the window resizes. ResizeObserver callbacks run
* after layout and before paint, so committing the new placement synchronously there paints the
* popover against the composer's new rect in the same frame.
*/
export function PopoverFrame({
anchorRef,
anchorAtRest,
reservedLift,
topInset,
children,
}: PopoverFrameProps): ReactElement {
"use no memo";
// React Compiler memoizes effect captures by reading SharedValue.value during render.
const frameRef = useRef<View>(null);
const [anchor, setAnchor] = useState<AnchorRect>(anchorAtRest);
useLayoutEffect(() => {
const anchorElement = anchorRef.current as unknown as HTMLElement | null;
// The frame's parent is the portal layer, which covers the host.
const host = (frameRef.current as unknown as HTMLElement | null)?.parentElement;
if (!anchorElement || !host) return undefined;
setAnchor(rectWithin(anchorElement, host));
const observer = new ResizeObserver(() => {
flushSync(() => setAnchor(rectWithin(anchorElement, host)));
});
observer.observe(anchorElement);
observer.observe(host);
return () => observer.disconnect();
}, [anchorAtRest, anchorRef]);
const style = inlineUnistylesStyle({
position: "absolute" as const,
left: anchor.x,
width: anchor.width,
...placeAboveAnchor({
anchorTop: anchor.y,
hostHeight: anchor.hostHeight,
reservedLift: reservedLift.value,
topInset,
}),
});
return (
<View ref={frameRef} testID="composer-autocomplete-popover" style={style}>
{children}
</View>
);
}
@@ -1,41 +0,0 @@
import type { ReactNode } from "react";
import type { View } from "react-native";
import type { AnimatedRef, DerivedValue } from "react-native-reanimated";
import { SPACING } from "@/styles/theme";
const OFFSET_FROM_ANCHOR = SPACING[3];
/** The anchor's resting rect, relative to the portal host the popover renders in. */
export interface AnchorAtRest {
x: number;
y: number;
width: number;
height: number;
hostHeight: number;
}
export interface PopoverFrameProps {
anchorRef: AnimatedRef<View>;
/** Taken asynchronously; the frame follows the anchor's live size between measurements. */
anchorAtRest: AnchorAtRest;
reservedLift: DerivedValue<number>;
topInset: number;
children: ReactNode;
}
/** Places the popover above an anchor whose top edge is `anchorTop` within the host. */
export function placeAboveAnchor(input: {
anchorTop: number;
hostHeight: number;
reservedLift: number;
topInset: number;
}): { bottom: number; maxHeight: number } {
"worklet";
return {
bottom: input.hostHeight - input.anchorTop + OFFSET_FROM_ANCHOR,
maxHeight: Math.max(
0,
input.anchorTop - input.reservedLift - input.topInset - OFFSET_FROM_ANCHOR * 2,
),
};
}
+122 -217
View File
@@ -1,12 +1,13 @@
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useCallback, useEffect, useMemo, useRef } from "react";
import {
FlatList,
ScrollView,
Text,
View,
Pressable,
type ListRenderItemInfo,
type LayoutChangeEvent,
type NativeScrollEvent,
type NativeSyntheticEvent,
type PressableStateCallbackType,
type ViewToken,
} from "react-native";
import { StyleSheet, withUnistyles } from "react-native-unistyles";
import { useTranslation } from "react-i18next";
@@ -28,6 +29,7 @@ import { Button } from "./button";
import { HighlightedText } from "./highlighted-text";
import { mutedIconColorMapping } from "./icon-color";
import { LoadingSpinner } from "./loading-spinner";
import { getScrollOffsetToRevealItem } from "./scroll-reveal";
import { StatusBadge } from "./status-badge";
export type AutocompleteOptionIcon =
@@ -78,8 +80,6 @@ const ErrorIcon = withUnistyles(CircleAlert, mutedIconColorMapping);
const ThemedLoadingSpinner = withUnistyles(LoadingSpinner, mutedIconColorMapping);
const ROW_ICON_SIZE = 14;
const ROW_MIN_HEIGHT = 36;
const DEFAULT_MAX_HEIGHT = 220;
const BOLT_GLYPH_PATTERN = /⚡|️/gu;
@@ -92,17 +92,21 @@ function removeBoltGlyphs(value?: string): string | undefined {
}
interface AutocompleteRowProps {
index: number;
option: AutocompleteOption;
isSelected: boolean;
showArgumentHint: boolean;
onSelect: (option: AutocompleteOption) => void;
onRowLayout: (index: number, event: LayoutChangeEvent) => void;
}
const AutocompleteRow = memo(function AutocompleteRow({
function AutocompleteRow({
index,
option,
isSelected,
showArgumentHint,
onSelect,
onRowLayout,
}: AutocompleteRowProps) {
const label = removeBoltGlyphs(option.label) ?? option.label;
const description = removeBoltGlyphs(option.description);
@@ -110,6 +114,10 @@ const AutocompleteRow = memo(function AutocompleteRow({
const Icon = ROW_ICONS[option.icon];
const labelMatches = label === option.label ? option.labelMatches : undefined;
const handleLayout = useCallback(
(event: LayoutChangeEvent) => onRowLayout(index, event),
[index, onRowLayout],
);
const handlePress = useCallback(() => onSelect(option), [onSelect, option]);
const pressableStyle = useCallback(
({ hovered = false, pressed }: PressableStateCallbackType & { hovered?: boolean }) => [
@@ -121,6 +129,7 @@ const AutocompleteRow = memo(function AutocompleteRow({
return (
<Pressable
onLayout={handleLayout}
onPress={handlePress}
style={pressableStyle}
// Name and description only; the hint and tag repeat what the name implies.
@@ -146,7 +155,7 @@ const AutocompleteRow = memo(function AutocompleteRow({
{option.tag ? <StatusBadge label={option.tag} size="xs" /> : null}
</Pressable>
);
});
}
function AutocompleteStatusRow({ status }: { status: AutocompleteStatus }) {
const { t } = useTranslation();
@@ -193,212 +202,94 @@ function AutocompleteStatusRow({ status }: { status: AutocompleteStatus }) {
);
}
type ListEnd = "composer" | "far";
/**
* The scroller a list is shown in: one for each result set, resting at one end of it. A scroller
* starts at its resting end with only the rows nearest it, so the list opens against the composer
* and reaches the far end when the selection wraps there without mounting the rows in between.
* A scroller that outlived its results would keep its scroll position and its mounted rows: on
* native a scroll command reaches the screen after the rows it was meant for.
*/
function useScroller(
options: readonly AutocompleteOption[],
selectedIndex: number,
): { key: string; restsAt: ListEnd } {
const [scroller, setScroller] = useState<{
options: readonly AutocompleteOption[];
resultSet: number;
restsAt: ListEnd;
}>({ options, resultSet: 0, restsAt: "composer" });
let next = scroller;
if (next.options !== options) {
next = isSameResultSet(next.options, options)
? { ...next, options }
: { options, resultSet: next.resultSet + 1, restsAt: "composer" };
}
const restsAt = endSelected(options, selectedIndex) ?? next.restsAt;
if (restsAt !== next.restsAt) {
next = { ...next, restsAt };
}
if (next !== scroller) {
setScroller(next);
}
return { key: `${next.resultSet}:${next.restsAt}`, restsAt: next.restsAt };
}
/** The composer builds a new list on every keystroke and refetch, often of the results it had. */
function isSameResultSet(
shown: readonly AutocompleteOption[],
arrived: readonly AutocompleteOption[],
): boolean {
return (
shown.length === arrived.length && shown.every((option, row) => option.id === arrived[row].id)
);
}
/** The end of the list the selection sits at, if it sits at one. The best match is last. */
function endSelected(
options: readonly AutocompleteOption[],
selectedIndex: number,
): ListEnd | null {
if (selectedIndex === options.length - 1) return "composer";
if (selectedIndex === 0) return "far";
return null;
}
const FULLY_VISIBLE = { itemVisiblePercentThreshold: 100 };
function ListPadding() {
return <View style={styles.listPadding} />;
}
function keyOfOption(option: AutocompleteOption): string {
return option.id;
}
interface AutocompleteRowsProps {
/** Nearest the resting end first. */
rows: readonly AutocompleteOption[];
selectedRow: number;
restsAt: ListEnd;
maxHeight: number;
onSelect: (option: AutocompleteOption) => void;
}
/**
* The rows, read from the end the list rests at. Against the composer the list is inverted. Either
* way its resting scroll position is that end and the rows nearest it mount first, so a list of any
* length opens where it rests.
*/
function AutocompleteRows({
rows,
selectedRow,
restsAt,
maxHeight,
onSelect,
}: AutocompleteRowsProps) {
const isCompact = useIsCompactFormFactor();
const listRef = useRef<FlatList<AutocompleteOption>>(null);
const fullyVisibleRows = useRef<{ first: number; last: number } | null>(null);
// The row the keyboard selected, until it has been brought into the viewport. The row at the
// other end is never revealed here: selecting it gives the list a scroller that rests there.
const pendingReveal = useRef<number | null>(null);
const isPendingRowMeasured = useRef(true);
const revealPendingRow = useCallback(() => {
const list = listRef.current;
const row = pendingReveal.current;
const visible = fullyVisibleRows.current;
if (!list || row === null || !visible) return;
const span = visible.last - visible.first;
if (row >= visible.first && row <= visible.last) {
pendingReveal.current = null;
} else if (row === 0) {
list.scrollToOffset({ offset: 0, animated: false });
pendingReveal.current = null;
fullyVisibleRows.current = { first: 0, last: span };
} else {
// The row comes in at the edge it was beyond.
const isNearer = row < visible.first;
isPendingRowMeasured.current = true;
list.scrollToIndex({ index: row, viewPosition: isNearer ? 0 : 1, animated: false });
// A row that has not mounted has no position yet: the list was sent towards it instead, and
// is asked again as rows mount.
if (!isPendingRowMeasured.current) return;
pendingReveal.current = null;
// The list reports what it shows after it has scrolled; the next key press may come first.
fullyVisibleRows.current = isNearer
? { first: row, last: row + span }
: { first: row - span, last: row };
}
}, []);
const handleScrollToIndexFailed = useCallback(
(info: { index: number; averageItemLength: number }) => {
isPendingRowMeasured.current = false;
listRef.current?.scrollToOffset({
offset: info.index * info.averageItemLength,
animated: false,
});
},
[],
);
useEffect(() => {
pendingReveal.current = selectedRow < 0 ? null : selectedRow;
revealPendingRow();
}, [revealPendingRow, selectedRow]);
const handleViewableItemsChanged = useCallback(
({ viewableItems }: { viewableItems: ViewToken<AutocompleteOption>[] }) => {
const indexes = viewableItems.flatMap((token) => (token.index === null ? [] : [token.index]));
if (indexes.length === 0) return;
fullyVisibleRows.current = { first: Math.min(...indexes), last: Math.max(...indexes) };
revealPendingRow();
},
[revealPendingRow],
);
// A viewport that got shorter can leave the selected row outside it.
const handleLayout = useCallback(() => {
// The list reports the rows its new height shows before the row is checked against them.
listRef.current?.recordInteraction();
pendingReveal.current = selectedRow < 0 ? null : selectedRow;
revealPendingRow();
}, [revealPendingRow, selectedRow]);
const renderRow = useCallback(
({ item, index }: ListRenderItemInfo<AutocompleteOption>) => (
<AutocompleteRow
option={item}
isSelected={index === selectedRow}
showArgumentHint={!isCompact}
onSelect={onSelect}
/>
),
[isCompact, onSelect, selectedRow],
);
return (
<FlatList
ref={listRef}
inverted={restsAt === "composer"}
data={rows}
renderItem={renderRow}
keyExtractor={keyOfOption}
// The first commit fills the tallest popover, so the popover never opens short and grows.
initialNumToRender={Math.ceil(maxHeight / ROW_MIN_HEIGHT) + 1}
removeClippedSubviews={false}
viewabilityConfig={FULLY_VISIBLE}
onViewableItemsChanged={handleViewableItemsChanged}
onLayout={handleLayout}
onContentSizeChange={revealPendingRow}
onScrollToIndexFailed={handleScrollToIndexFailed}
// The list's padding. As a header and footer it counts in the list's own scroll positions.
ListHeaderComponent={ListPadding}
ListFooterComponent={ListPadding}
style={styles.scrollView}
keyboardShouldPersistTaps="always"
/>
);
}
export function Autocomplete({
options,
selectedIndex,
onSelect,
status,
maxHeight = DEFAULT_MAX_HEIGHT,
maxHeight = 220,
}: AutocompleteProps) {
const { t } = useTranslation();
const scroller = useScroller(options, selectedIndex);
const rows = useMemo(
() => (scroller.restsAt === "composer" ? options.toReversed() : options),
[options, scroller.restsAt],
const isCompact = useIsCompactFormFactor();
const scrollRef = useRef<ScrollView>(null);
const rowLayoutsRef = useRef<Map<number, { top: number; height: number }>>(new Map());
const viewportHeightRef = useRef(0);
const scrollOffsetRef = useRef(0);
const ensureActiveItemVisible = useCallback(() => {
if (selectedIndex < 0) {
return;
}
const layout = rowLayoutsRef.current.get(selectedIndex);
if (!layout) {
return;
}
const nextOffset = getScrollOffsetToRevealItem({
currentOffset: scrollOffsetRef.current,
viewportHeight: viewportHeightRef.current,
itemTop: layout.top,
itemHeight: layout.height,
});
if (Math.abs(nextOffset - scrollOffsetRef.current) < 1) {
return;
}
scrollOffsetRef.current = nextOffset;
scrollRef.current?.scrollTo({ y: nextOffset, animated: false });
}, [selectedIndex]);
const pinToBottom = useCallback(() => {
scrollRef.current?.scrollToEnd({ animated: false });
requestAnimationFrame(() => {
scrollRef.current?.scrollToEnd({ animated: false });
});
}, []);
useEffect(() => {
rowLayoutsRef.current.clear();
scrollOffsetRef.current = 0;
}, [options]);
useEffect(() => {
if (options.length === 0) {
return;
}
pinToBottom();
}, [options, pinToBottom]);
useEffect(() => {
const raf = requestAnimationFrame(ensureActiveItemVisible);
return () => {
cancelAnimationFrame(raf);
};
}, [ensureActiveItemVisible, options.length]);
const handleScrollViewLayout = useCallback(
(event: LayoutChangeEvent) => {
viewportHeightRef.current = event.nativeEvent.layout.height;
ensureActiveItemVisible();
},
[ensureActiveItemVisible],
);
const selectedRow =
scroller.restsAt === "composer" && selectedIndex >= 0
? options.length - 1 - selectedIndex
: selectedIndex;
const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
scrollOffsetRef.current = event.nativeEvent.contentOffset.y;
}, []);
const handleRowLayout = useCallback(
(index: number, event: LayoutChangeEvent) => {
rowLayoutsRef.current.set(index, {
top: event.nativeEvent.layout.y,
height: event.nativeEvent.layout.height,
});
ensureActiveItemVisible();
},
[ensureActiveItemVisible],
);
const containerStyle = useMemo(() => [styles.container, { maxHeight }], [maxHeight]);
const noResultsMessage = t("common.empty.noResults");
@@ -417,14 +308,28 @@ export function Autocomplete({
return (
<View style={containerStyle}>
<AutocompleteRows
key={scroller.key}
rows={rows}
selectedRow={selectedRow}
restsAt={scroller.restsAt}
maxHeight={maxHeight}
onSelect={onSelect}
/>
<ScrollView
ref={scrollRef}
onLayout={handleScrollViewLayout}
onContentSizeChange={pinToBottom}
onScroll={handleScroll}
scrollEventThrottle={16}
style={styles.scrollView}
contentContainerStyle={styles.scrollContent}
keyboardShouldPersistTaps="always"
>
{options.map((option, index) => (
<AutocompleteRow
key={option.id}
index={index}
option={option}
isSelected={index === selectedIndex}
showArgumentHint={!isCompact}
onSelect={onSelect}
onRowLayout={handleRowLayout}
/>
))}
</ScrollView>
</View>
);
}
@@ -445,14 +350,14 @@ const styles = StyleSheet.create((theme: Theme) => ({
flexGrow: 0,
flexShrink: 1,
},
listPadding: {
height: theme.spacing[1],
scrollContent: {
paddingVertical: theme.spacing[1],
},
item: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
minHeight: ROW_MIN_HEIGHT,
minHeight: 36,
paddingHorizontal: theme.spacing[3],
paddingVertical: theme.spacing[2],
},
+3 -25
View File
@@ -1,10 +1,4 @@
import { useMemo } from "react";
import {
Modal as NativeModal,
Platform,
useWindowDimensions,
type ModalProps as NativeModalProps,
} from "react-native";
import { Modal as NativeModal, type ModalProps as NativeModalProps } from "react-native";
import { useDismissibleOverlay } from "@/components/ui/overlay-dismissal";
// React Native defaults iPhone modals to portrait even when the app supports rotation.
@@ -23,23 +17,7 @@ type ModalProps = Omit<NativeModalProps, "onRequestClose"> & {
function noClose() {}
export function Modal(props: ModalProps) {
const { visible = true, onRequestClose, style } = props;
const { visible = true, onRequestClose } = props;
useDismissibleOverlay(visible && onRequestClose !== undefined, onRequestClose ?? noClose);
const windowFrame = useAndroidWindowFrame();
const containerStyle = useMemo(() => [windowFrame, style], [windowFrame, style]);
return <NativeModal supportedOrientations={orientations} {...props} style={containerStyle} />;
}
/**
* On Android, React Native lays out a modal's first frames at the screen size minus the status and
* navigation bars, then grows it to the full window once the dialog reports its size. The app draws
* edge-to-edge, so the dialog always covers the whole window: size the content to the window from
* the first frame, or a full-screen backdrop stops short of the bottom and then snaps down.
*/
function useAndroidWindowFrame() {
const { width, height } = useWindowDimensions();
return useMemo(
() => (Platform.OS === "android" ? { flex: 0, width, height } : null),
[width, height],
);
return <NativeModal supportedOrientations={orientations} {...props} />;
}
@@ -45,6 +45,7 @@ export interface RevealActiveItemHandlers {
* content. Measuring on selection/list changes also covers retained rows that
* move or keep their size without emitting another onLayout event on web.
* A list replacement resets to the top only when selection restarts there.
* Bottom-anchored lists share only getScrollOffsetToRevealItem.
*/
export function useRevealActiveItem(options: {
activeIndex: number;
@@ -1,16 +0,0 @@
import { Image } from "react-native";
import type { ViewportSize } from "./geometry";
/** Resolves the image's natural size; rejects when the image cannot load or has no size. */
export function measureImage(uri: string): Promise<ViewportSize> {
return new Promise((resolve, reject) => {
Image.getSize(
uri,
(width, height) => {
if (width > 0 && height > 0) resolve({ width, height });
else reject(new Error("Image has no size"));
},
reject,
);
});
}
@@ -1,24 +0,0 @@
import type { ViewportSize } from "./geometry";
// The size a browser gives a replaced element that has no intrinsic size of its own.
const NO_INTRINSIC_SIZE: ViewportSize = { width: 300, height: 150 };
/**
* Resolves the image's natural size; rejects when the image cannot load. React Native Web's
* `Image.getSize` never answers for an image that loads with no natural size (an SVG without
* width and height, in some browsers), so the image would never show and never fail.
*/
export function measureImage(uri: string): Promise<ViewportSize> {
return new Promise((resolve, reject) => {
const image = new window.Image();
image.addEventListener("load", () =>
resolve(
image.naturalWidth > 0 && image.naturalHeight > 0
? { width: image.naturalWidth, height: image.naturalHeight }
: NO_INTRINSIC_SIZE,
),
);
image.addEventListener("error", () => reject(new Error("Image failed to load")));
image.src = uri;
});
}
@@ -1,8 +1,7 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { Image, View, type StyleProp, type ViewStyle } from "react-native";
import { StyleSheet } from "react-native-unistyles";
import type { ViewportFitOptions, ViewportSize } from "./geometry";
import { measureImage } from "./image-size";
import { ZoomableViewport } from "./index";
import type { ZoomableViewportAction } from "./types";
@@ -35,33 +34,42 @@ export function ZoomableImage({
testID = "zoomable-image",
wheelActivation = "always",
}: ZoomableImageProps) {
const [loaded, setLoaded] = useState<{ uri: string; size: ViewportSize } | null>(null);
const resolvedSize = contentSize ?? (loaded?.uri === uri ? loaded.size : null);
const [loadedSize, setLoadedSize] = useState<ViewportSize | null>(null);
const resolvedSize = contentSize ?? loadedSize;
const source = useMemo(() => ({ uri }), [uri]);
const [paintedUri, setPaintedUri] = useState<string | null>(null);
const handleLoad = useCallback(() => setPaintedUri(uri), [uri]);
useEffect(() => {
if (contentSize) return;
let active = true;
void (async () => {
try {
const size = await measureImage(uri);
if (active) setLoaded({ uri, size });
} catch {
setLoadedSize(null);
Image.getSize(
uri,
(width, height) => {
if (active && width > 0 && height > 0) setLoadedSize({ width, height });
},
() => {
if (active) onError?.();
}
})();
},
);
return () => {
active = false;
};
}, [contentSize, onError, uri]);
// Paint nothing until the image can be fitted: an unfitted image fills the whole area for the
// frames before the size arrives, then jumps to its fitted box. Then keep the viewport, toolbar
// included, hidden until the image itself has loaded, so they appear together.
if (!resolvedSize) {
return <View style={[styles.root, style]} testID={testID} />;
return (
<View style={[styles.root, style]} testID={testID}>
<Image
accessibilityLabel={accessibilityLabel}
accessibilityRole="image"
onError={onError}
resizeMode="contain"
source={source}
style={styles.image}
testID={`${testID}-image`}
/>
</View>
);
}
return (
@@ -73,15 +81,12 @@ export function ZoomableImage({
maxScale={maxScale}
minScale={minScale}
onPressOutsideContent={onPressOutsideContent}
style={[style, paintedUri !== uri && styles.loading]}
style={style}
testID={testID}
wheelActivation={wheelActivation}
>
<Image
// Android fades a freshly decoded image in over 300ms; it appears with its toolbar instead.
fadeDuration={0}
onError={onError}
onLoad={handleLoad}
resizeMode="contain"
source={source}
style={styles.image}
@@ -94,5 +99,4 @@ export function ZoomableImage({
const styles = StyleSheet.create(() => ({
root: { flex: 1, minHeight: 0 },
image: { width: "100%", height: "100%" },
loading: { opacity: 0 },
}));
+3 -27
View File
@@ -3,10 +3,9 @@ import type {
FetchAgentHistoryOptions,
FetchAgentHistoryPageInfo,
} from "@getpaseo/client/internal/daemon-client";
import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useShallow } from "zustand/shallow";
import type { AggregatedAgent } from "@/hooks/use-aggregated-agents";
import {
getHostRuntimeStore,
@@ -35,8 +34,6 @@ export interface AgentHistoryResult {
isSearchSupported: boolean;
/** More sessions matched than the ranked page holds. Narrow the query. */
isSearchTruncated: boolean;
/** The agents answer the previous query; the current one is loading (`keepPreviousResults`). */
isPreviousResults: boolean;
/** Hosts that failed while others succeeded. The list still renders. */
hostErrors: AgentHistoryHostError[];
refreshAll: () => Promise<void>;
@@ -225,13 +222,6 @@ export function useAgentHistory(options: {
serverId?: string | null;
enabled?: boolean;
search?: string;
/**
* Leave out hosts that predate search, instead of searching no host. For a surface that adds
* history matches to other results, where a missing host is not a claim of "no matches".
*/
searchableHostsOnly?: boolean;
/** Keep the previous query's results until the next query's arrive. */
keepPreviousResults?: boolean;
}): AgentHistoryResult {
const { t } = useTranslation();
const daemons = useHosts();
@@ -241,18 +231,10 @@ export function useAgentHistory(options: {
return typeof value === "string" && value.trim().length > 0 ? value.trim() : null;
}, [options.serverId]);
const enabled = options.enabled ?? true;
const requestedServerIds = useMemo(
const serverIds = useMemo(
() => (serverId ? [serverId] : daemons.map((daemon) => daemon.serverId)),
[daemons, serverId],
);
const searchableServerIds = useSessionStore(
useShallow((state) =>
requestedServerIds.filter(
(id) => state.sessions[id]?.serverInfo?.features?.agentHistorySearch === true,
),
),
);
const serverIds = options.searchableHostsOnly ? searchableServerIds : requestedServerIds;
const connectionStatuses = useHostRuntimeConnectionStatuses(serverIds);
// A host the user asked about splits two ways: one this fetch can reach, and
// one whose sessions will be missing from the answer. Both come out of here,
@@ -305,7 +287,6 @@ export function useAgentHistory(options: {
[daemons],
);
const queryEnabled = Boolean(enabled && targetHosts.length > 0);
const historyQuery = useInfiniteQuery<
AgentHistoryBatchPage,
Error,
@@ -314,11 +295,8 @@ export function useAgentHistory(options: {
AgentHistoryCursorByServerId | null
>({
queryKey,
enabled: queryEnabled,
enabled: Boolean(enabled && targetHosts.length > 0),
staleTime: 30_000,
// Previous results stand in only until the next query's arrive. With no host to search,
// nothing will arrive, so they would stand in, and read as still loading, indefinitely.
...(options.keepPreviousResults && queryEnabled ? { placeholderData: keepPreviousData } : {}),
initialPageParam: null,
getNextPageParam: getNextAgentHistoryPageParam,
queryFn: async ({ pageParam }) => {
@@ -340,7 +318,6 @@ export function useAgentHistory(options: {
isFetching,
isFetchingNextPage,
isLoading,
isPlaceholderData,
refetch,
} = historyQuery;
@@ -386,7 +363,6 @@ export function useAgentHistory(options: {
isLoadingMore: isFetchingNextPage,
isSearchSupported,
isSearchTruncated,
isPreviousResults: isPlaceholderData,
hostErrors,
refreshAll,
loadMore,
+4 -4
View File
@@ -319,15 +319,15 @@ describe("translation resources", () => {
expect(en.shell.menu.toggleSidebar).toBe("Toggle sidebar");
expect(en.shell.menu.open).toBe("Open menu");
expect(en.shell.menu.close).toBe("Close menu");
expect(en.shell.commandCenter.placeholder).toBe("Search workspaces, files, and actions...");
expect(en.shell.commandCenter.placeholderWithoutFiles).toBe("Search workspaces and actions...");
expect(en.shell.commandCenter.placeholder).toBe(
"Search commands, files, workspaces, and agents...",
);
expect(en.shell.commandCenter.filePlaceholder).toBe("Search files...");
expect(en.shell.commandCenter.files).toBe("Files");
expect(en.shell.commandCenter.noMatches).toBe("No matches");
expect(en.shell.commandCenter.actions).toBe("Actions");
expect(en.shell.commandCenter.workspaces).toBe("Workspaces");
expect(en.shell.commandCenter.recentWorkspaces).toBe("Recent workspaces");
expect(en.shell.commandCenter.tabs.all).toBe("All");
expect(en.shell.commandCenter.agents).toBe("Agents");
expect(en.shell.commandCenter.newAgent).toBe("New agent");
expect(en.shell.commandCenter.addProject).toBe("Add project");
expect(en.shell.commandCenter.home).toBe("Home");
+2 -11
View File
@@ -90,23 +90,14 @@ export const ar: TranslationResources = {
close: "إغلاق القائمة",
},
commandCenter: {
placeholder: "البحث في مساحات العمل والملفات والإجراءات...",
placeholderWithoutFiles: "البحث في مساحات العمل والإجراءات...",
placeholder: "ابحث في الأوامر والملفات ومساحات العمل والوكلاء...",
filePlaceholder: "البحث في الملفات...",
workspacePlaceholder: "البحث في مساحات العمل...",
actionPlaceholder: "البحث في الإجراءات...",
searchingFiles: "جارٍ البحث في الملفات...",
noMatches: "لا توجد مباريات",
actions: "الإجراءات",
files: "الملفات",
workspaces: "مساحات العمل",
recentWorkspaces: "مساحات العمل الأخيرة",
tabs: {
all: "الكل",
workspaces: "مساحات العمل",
files: "الملفات",
actions: "الإجراءات",
},
agents: "الوكلاء",
newAgent: "وكيل جديد",
open: "فتح {{name}}",
openInSidePane: "فتح {{name}} في اللوحة الجانبية",
+2 -11
View File
@@ -86,23 +86,14 @@ export const en = {
close: "Close menu",
},
commandCenter: {
placeholder: "Search workspaces, files, and actions...",
placeholderWithoutFiles: "Search workspaces and actions...",
placeholder: "Search commands, files, workspaces, and agents...",
filePlaceholder: "Search files...",
workspacePlaceholder: "Search workspaces...",
actionPlaceholder: "Search actions...",
searchingFiles: "Searching files...",
noMatches: "No matches",
actions: "Actions",
files: "Files",
workspaces: "Workspaces",
recentWorkspaces: "Recent workspaces",
tabs: {
all: "All",
workspaces: "Workspaces",
files: "Files",
actions: "Actions",
},
agents: "Agents",
newAgent: "New agent",
open: "Open {{name}}",
openInSidePane: "Open {{name}} in side pane",
+2 -11
View File
@@ -91,23 +91,14 @@ export const es: TranslationResources = {
close: "Cerrar menú",
},
commandCenter: {
placeholder: "Buscar espacios de trabajo, archivos y acciones...",
placeholderWithoutFiles: "Buscar espacios de trabajo y acciones...",
placeholder: "Buscar comandos, archivos, espacios de trabajo y agentes...",
filePlaceholder: "Buscar archivos...",
workspacePlaceholder: "Buscar espacios de trabajo...",
actionPlaceholder: "Buscar acciones...",
searchingFiles: "Buscando archivos...",
noMatches: "No hay coincidencias",
actions: "Comportamiento",
files: "Archivos",
workspaces: "Espacios de trabajo",
recentWorkspaces: "Espacios de trabajo recientes",
tabs: {
all: "Todo",
workspaces: "Espacios de trabajo",
files: "Archivos",
actions: "Acciones",
},
agents: "Agentes",
newAgent: "Nuevo agente",
open: "Abrir {{name}}",
openInSidePane: "Abrir {{name}} en el panel lateral",
+2 -11
View File
@@ -91,23 +91,14 @@ export const fr: TranslationResources = {
close: "Fermer le menu",
},
commandCenter: {
placeholder: "Rechercher des espaces de travail, fichiers et actions…",
placeholderWithoutFiles: "Rechercher des espaces de travail et des actions…",
placeholder: "Rechercher des commandes, fichiers, espaces de travail et agents…",
filePlaceholder: "Rechercher des fichiers…",
workspacePlaceholder: "Rechercher des espaces de travail…",
actionPlaceholder: "Rechercher des actions…",
searchingFiles: "Recherche de fichiers…",
noMatches: "Aucun résultat",
actions: "Actions",
files: "Fichiers",
workspaces: "Espaces de travail",
recentWorkspaces: "Espaces de travail récents",
tabs: {
all: "Tout",
workspaces: "Espaces de travail",
files: "Fichiers",
actions: "Actions",
},
agents: "Agents",
newAgent: "Nouvel agent",
open: "Ouvrir {{name}}",
openInSidePane: "Ouvrir {{name}} dans le panneau latéral",
+2 -11
View File
@@ -91,23 +91,14 @@ export const ja: TranslationResources = {
close: "メニューを閉じる",
},
commandCenter: {
placeholder: "ワークスペース、ファイル、アクションを検索...",
placeholderWithoutFiles: "ワークスペースとアクションを検索...",
placeholder: "コマンド、ファイル、ワークスペース、エージェントを検索...",
filePlaceholder: "ファイルを検索...",
workspacePlaceholder: "ワークスペースを検索...",
actionPlaceholder: "アクションを検索...",
searchingFiles: "ファイルを検索中...",
noMatches: "一致なし",
actions: "アクション",
files: "ファイル",
workspaces: "ワークスペース",
recentWorkspaces: "最近のワークスペース",
tabs: {
all: "すべて",
workspaces: "ワークスペース",
files: "ファイル",
actions: "アクション",
},
agents: "エージェント",
newAgent: "新しいエージェント",
open: "{{name}}を開く",
openInSidePane: "{{name}}をサイドパネルで開く",
+2 -11
View File
@@ -90,23 +90,14 @@ export const ko: TranslationResources = {
close: "메뉴 닫기",
},
commandCenter: {
placeholder: "워크스페이스, 파일 및 작업 검색...",
placeholderWithoutFiles: "워크스페이스 및 작업 검색...",
placeholder: "명령, 파일, 워크스페이스 및 에이전트 검색...",
filePlaceholder: "파일 검색...",
workspacePlaceholder: "워크스페이스 검색...",
actionPlaceholder: "작업 검색...",
searchingFiles: "파일 검색 중...",
noMatches: "일치 항목 없음",
actions: "작업",
files: "파일",
workspaces: "워크스페이스",
recentWorkspaces: "최근 워크스페이스",
tabs: {
all: "전체",
workspaces: "워크스페이스",
files: "파일",
actions: "작업",
},
agents: "에이전트",
newAgent: "새 에이전트",
open: "{{name}} 열기",
openInSidePane: "사이드 패널에서 {{name}} 열기",
+2 -11
View File
@@ -91,23 +91,14 @@ export const ptBR: TranslationResources = {
close: "Fechar menu",
},
commandCenter: {
placeholder: "Pesquisar espaços de trabalho, arquivos e ações...",
placeholderWithoutFiles: "Pesquisar espaços de trabalho e ações...",
placeholder: "Buscar comandos, arquivos, espaços de trabalho e agentes...",
filePlaceholder: "Pesquisar arquivos...",
workspacePlaceholder: "Pesquisar espaços de trabalho...",
actionPlaceholder: "Pesquisar ações...",
searchingFiles: "Pesquisando arquivos...",
noMatches: "Nenhuma correspondência",
actions: "Ações",
files: "Arquivos",
workspaces: "Espaços de trabalho",
recentWorkspaces: "Espaços de trabalho recentes",
tabs: {
all: "Tudo",
workspaces: "Espaços de trabalho",
files: "Arquivos",
actions: "Ações",
},
agents: "Agentes",
newAgent: "Novo agente",
open: "Abrir {{name}}",
openInSidePane: "Abrir {{name}} no painel lateral",
+2 -11
View File
@@ -91,23 +91,14 @@ export const ru: TranslationResources = {
close: "Закрыть меню",
},
commandCenter: {
placeholder: "Поиск рабочих пространств, файлов и действий...",
placeholderWithoutFiles: "Поиск рабочих пространств и действий...",
placeholder: "Поиск команд, файлов, рабочих пространств и агентов...",
filePlaceholder: "Поиск файлов...",
workspacePlaceholder: "Поиск рабочих пространств...",
actionPlaceholder: "Поиск действий...",
searchingFiles: "Поиск файлов...",
noMatches: "Нет совпадений",
actions: "Действия",
files: "Файлы",
workspaces: "Рабочие пространства",
recentWorkspaces: "Недавние рабочие пространства",
tabs: {
all: "Все",
workspaces: "Рабочие пространства",
files: "Файлы",
actions: "Действия",
},
agents: "Агенты",
newAgent: "Новый агент",
open: "Открыть {{name}}",
openInSidePane: "Открыть {{name}} в боковой панели",
+2 -11
View File
@@ -90,23 +90,14 @@ export const zhCN: TranslationResources = {
close: "关闭菜单",
},
commandCenter: {
placeholder: "搜索工作区、文件和操作...",
placeholderWithoutFiles: "搜索工作区和操作...",
placeholder: "搜索命令、文件、工作区和 Agent...",
filePlaceholder: "搜索文件...",
workspacePlaceholder: "搜索工作区...",
actionPlaceholder: "搜索操作...",
searchingFiles: "正在搜索文件...",
noMatches: "没有匹配项",
actions: "操作",
files: "文件",
workspaces: "工作区",
recentWorkspaces: "最近的工作区",
tabs: {
all: "全部",
workspaces: "工作区",
files: "文件",
actions: "操作",
},
agents: "Agents",
newAgent: "新建 Agent",
open: "打开{{name}}",
openInSidePane: "在侧边面板中打开{{name}}",
@@ -3,10 +3,6 @@ import type { KeyboardInputEvent } from "./overlays";
export interface OverlayRegistration {
active: boolean;
layer: number;
/**
* Keys the overlay handles. Native forwards only these. On web, declaring "Tab" hands Tab to
* `onKeyDown` instead of the focus trap.
*/
keys: readonly string[];
onKeyDown(event: KeyboardInputEvent): boolean;
restoreFocusRef?: RefObject<unknown>;
@@ -85,9 +85,7 @@ function dispatchOverlayEntry(entry: WebOverlayEntry, event: KeyboardInputEvent)
const scope = entry.getScope();
if (!scope) return top.getKeyHandler()(event);
// An overlay that declares Tab owns it (the command center rotates its tabs); the focus trap
// only moves focus for overlays that leave Tab alone.
if (top.manageFocus && event.key === "Tab" && !top.getKeys().includes("Tab")) {
if (top.manageFocus && event.key === "Tab") {
const focusable = getFocusableElements(scope);
const first = focusable[0];
const last = focusable[focusable.length - 1];
@@ -376,10 +376,10 @@ describe("routeKeyboardShortcut — callbacks and pickers", () => {
});
describe("routeKeyboardShortcut — toggle dialogs", () => {
it("opens the command center on the Files tab from a workspace", () => {
it("opens the command center scoped to files from a workspace", () => {
expect(
routeKeyboardShortcut({ action: "command-center.files", payload: null }, makeCtx()),
).toEqual<ShortcutAction>({ kind: "command-center-toggle", nextOpen: true, tab: "files" });
).toEqual<ShortcutAction>({ kind: "command-center-toggle", nextOpen: true, scope: "files" });
});
it("leaves the file-search shortcut to the project-picker host outside a workspace", () => {
+2 -2
View File
@@ -32,7 +32,7 @@ export type ShortcutAction =
| { kind: "router-push"; route: string }
| { kind: "open-project-picker" }
| { kind: "callback"; name: ShortcutCallbackName }
| { kind: "command-center-toggle"; nextOpen: boolean; tab?: "files" }
| { kind: "command-center-toggle"; nextOpen: boolean; scope?: "files" }
| { kind: "shortcuts-dialog-toggle"; nextOpen: boolean };
const NONE: ShortcutAction = { kind: "none" };
@@ -212,7 +212,7 @@ export function routeKeyboardShortcut(
return { kind: "command-center-toggle", nextOpen: !ctx.commandCenterOpen };
case "command-center.files":
if (parseHostWorkspaceRouteFromPathname(ctx.pathname)) {
return { kind: "command-center-toggle", nextOpen: true, tab: "files" };
return { kind: "command-center-toggle", nextOpen: true, scope: "files" };
}
return dispatch({ id: "workspace.project.pick", scope: "workspace" });
case "shortcuts.dialog.toggle":
+3 -1
View File
@@ -152,7 +152,9 @@ export function useKeyboardShortcuts({
if (action.nextOpen) {
captureFocusRestore();
}
useKeyboardShortcutsStore.getState().setCommandCenterOpen(action.nextOpen, action.tab);
useKeyboardShortcutsStore
.getState()
.setCommandCenterOpen(action.nextOpen, action.scope ?? null);
return true;
}
case "shortcuts-dialog-toggle":
@@ -121,7 +121,10 @@ import {
type ListTerminalsPayload,
upsertCreatedTerminalPayload,
} from "./workspace/terminals/state";
import { captureWorkspaceDraftCleanup } from "./new-workspace/background-handoff";
import {
captureWorkspaceDraftCleanup,
handOffDraftMetadata,
} from "./new-workspace/background-handoff";
import { useNewWorkspaceScreenPresence } from "./new-workspace/screen-presence";
function useIsNewWorkspaceDraftHandoffActive(input: {
@@ -635,6 +638,7 @@ function submitWorkspaceDraft(input: SubmitDraftInput): SubmitOutcome {
allowEmptyText: true,
agentCreation: input.agentCreation,
});
handOffDraftMetadata({ serverId, draftId, metadata: composerState.metadata });
clearDraft("sent");
navigateToWorkspace({
serverId,
@@ -1,7 +1,29 @@
import { useWorkspaceAttachmentsStore } from "@/attachments/workspace-attachments-store";
import { buildDraftStoreKey } from "@/stores/draft-keys";
import { useDraftStore } from "@/stores/draft-store";
import type { JsonValue } from "@getpaseo/protocol/agent-types";
import { useWorkspaceDraftSubmissionStore } from "@/stores/workspace-draft-submission-store";
/**
* The ready workspace's draft tab owns the draft once New workspace hands it off, including a
* retry after the first agent start fails. Its metadata moves with it, like its text and setup.
*/
export function handOffDraftMetadata(input: {
serverId: string;
draftId: string;
metadata: Readonly<Record<string, JsonValue>>;
}): void {
if (Object.keys(input.metadata).length === 0) return;
useDraftStore.getState().patchDraftMetadata({
draftKey: buildDraftStoreKey({
serverId: input.serverId,
agentId: input.draftId,
draftId: input.draftId,
}),
patch: { ...input.metadata },
});
}
interface WorkspaceDraftCleanupInput {
draftId?: string;
draftKey: string;
@@ -182,7 +182,6 @@ function workspaceSummary(overrides: Partial<WorkspaceSummary> = {}): WorkspaceS
status: "done",
currentBranch: "main",
changeRequestNumber: null,
background: false,
statusEnteredAt: null,
...overrides,
};
@@ -4,7 +4,7 @@ import { useKeyboardShortcutsStore } from "./keyboard-shortcuts-store";
beforeEach(() => {
useKeyboardShortcutsStore.setState({
commandCenterOpen: false,
commandCenterTab: "all",
commandCenterScope: null,
shortcutsDialogOpen: false,
capturingShortcut: false,
altDown: false,
@@ -20,21 +20,18 @@ describe("keyboard-shortcuts-store", () => {
expect(useKeyboardShortcutsStore.getState().commandCenterOpen).toBe(true);
});
it("opens the command center on a tab and returns to All when closed", () => {
it("opens the command center with a scope and clears it when closed", () => {
useKeyboardShortcutsStore.getState().setCommandCenterOpen(true, "files");
expect(useKeyboardShortcutsStore.getState()).toMatchObject({
commandCenterOpen: true,
commandCenterTab: "files",
commandCenterScope: "files",
});
useKeyboardShortcutsStore.getState().setCommandCenterOpen(false);
expect(useKeyboardShortcutsStore.getState()).toMatchObject({
commandCenterOpen: false,
commandCenterTab: "all",
commandCenterScope: null,
});
useKeyboardShortcutsStore.getState().setCommandCenterOpen(true);
expect(useKeyboardShortcutsStore.getState().commandCenterTab).toBe("all");
});
it("toggles shortcut capture state", () => {
@@ -1,13 +1,13 @@
import { create } from "zustand";
import type { CommandCenterTab } from "@/command-center/tabs";
import type { SidebarShortcutWorkspaceTarget } from "@/utils/sidebar-shortcuts";
const SHORTCUT_BADGE_DELAY_MS = 150;
export type CommandCenterScope = "files" | null;
interface KeyboardShortcutsState {
commandCenterOpen: boolean;
/** The tab the open command center shows. Every opening starts on the tab it asks for. */
commandCenterTab: CommandCenterTab;
commandCenterScope: CommandCenterScope;
shortcutsDialogOpen: boolean;
capturingShortcut: boolean;
altDown: boolean;
@@ -16,8 +16,8 @@ interface KeyboardShortcutsState {
/** Sidebar-visible workspace targets (up to 9), in top-to-bottom visual order. */
sidebarShortcutWorkspaceTargets: SidebarShortcutWorkspaceTarget[];
setCommandCenterOpen: (open: boolean, tab?: CommandCenterTab) => void;
setCommandCenterTab: (tab: CommandCenterTab) => void;
setCommandCenterOpen: (open: boolean, scope?: CommandCenterScope) => void;
setCommandCenterScope: (scope: CommandCenterScope) => void;
setShortcutsDialogOpen: (open: boolean) => void;
setCapturingShortcut: (capturing: boolean) => void;
setAltDown: (down: boolean) => void;
@@ -51,7 +51,7 @@ function updateBadgeTimer(
export const useKeyboardShortcutsStore = create<KeyboardShortcutsState>((set, get) => ({
commandCenterOpen: false,
commandCenterTab: "all",
commandCenterScope: null,
shortcutsDialogOpen: false,
capturingShortcut: false,
altDown: false,
@@ -59,9 +59,9 @@ export const useKeyboardShortcutsStore = create<KeyboardShortcutsState>((set, ge
showShortcutBadges: false,
sidebarShortcutWorkspaceTargets: [],
setCommandCenterOpen: (open, tab = "all") =>
set({ commandCenterOpen: open, commandCenterTab: open ? tab : "all" }),
setCommandCenterTab: (tab) => set({ commandCenterTab: tab }),
setCommandCenterOpen: (open, scope = null) =>
set({ commandCenterOpen: open, commandCenterScope: open ? scope : null }),
setCommandCenterScope: (scope) => set({ commandCenterScope: scope }),
setShortcutsDialogOpen: (open) => set({ shortcutsDialogOpen: open }),
setCapturingShortcut: (capturing) => set({ capturingShortcut: capturing }),
setAltDown: (down) => {
-3
View File
@@ -8,8 +8,6 @@ export interface WorkspaceSummary {
name: string;
title?: string;
workspaceKind: WorkspaceDescriptor["workspaceKind"];
/** Started by automation rather than the user. The sidebar hides it unless asked. */
background: boolean;
status: WorkspaceDescriptor["status"];
currentBranch: string | null;
archivingAt?: string;
@@ -160,7 +158,6 @@ function toWorkspaceSummary(workspace: WorkspaceDescriptor): WorkspaceSummary {
name: workspace.name,
...(workspace.title ? { title: workspace.title } : {}),
workspaceKind: workspace.workspaceKind,
background: workspace.background ?? false,
status: workspace.status,
currentBranch: currentBranch && currentBranch !== "HEAD" ? currentBranch : null,
...(workspace.archivingAt ? { archivingAt: workspace.archivingAt } : {}),
@@ -1,6 +1,5 @@
import { createContext, useContext } from "react";
import { useWindowDimensions } from "react-native";
import type { EdgeInsets } from "react-native-safe-area-context";
import type { TopBand, WindowLayout } from "./model";
export const WindowLayoutContext = createContext<WindowLayout | null>(null);
@@ -8,12 +7,6 @@ export const WindowLayoutContext = createContext<WindowLayout | null>(null);
/** Published by `WindowLayoutProvider` beside the safe-area insets it derives from it. */
export const TopBandContext = createContext<TopBand | null>(null);
/**
* The insets of the whole window, published by `WindowLayoutProvider` before any surface (a
* sheet tab, for one) narrows the insets its content reads.
*/
export const WindowInsetsContext = createContext<EdgeInsets | null>(null);
export function useWindowLayout(): WindowLayout | null {
const layout = useContext(WindowLayoutContext);
const { width, height } = useWindowDimensions();
+2 -10
View File
@@ -2,19 +2,13 @@ import { useCallback, useMemo, useState, type ReactNode } from "react";
import { StyleSheet, View, type NativeSyntheticEvent, type ViewProps } from "react-native";
import { requireNativeViewManager } from "expo-modules-core";
import { SafeAreaInsetsContext, useSafeAreaInsets } from "react-native-safe-area-context";
import {
TopBandContext,
WindowInsetsContext,
WindowLayoutContext,
useWindowLayout,
} from "./context";
import { TopBandContext, WindowLayoutContext, useWindowLayout } from "./context";
import { resolveSafeAreaInsets, resolveTopBand, type WindowLayout } from "./model";
export { useWindowLayout } from "./context";
export { WindowLayoutActions, WindowLayoutActionsHost } from "./actions";
export { WindowLayoutSurface, WindowLayoutDivisionGap } from "./surface";
export { useTopBand } from "./context";
export { WindowSafeArea } from "./window-safe-area";
export {
resolveDesktopDivisionLayout,
resolveWorkspaceActionPlacement,
@@ -62,9 +56,7 @@ function WindowSafeAreaInsets({ children }: { children: ReactNode }) {
);
return (
<TopBandContext.Provider value={topBand}>
<WindowInsetsContext.Provider value={insets}>
<SafeAreaInsetsContext.Provider value={insets}>{children}</SafeAreaInsetsContext.Provider>
</WindowInsetsContext.Provider>
<SafeAreaInsetsContext.Provider value={insets}>{children}</SafeAreaInsetsContext.Provider>
</TopBandContext.Provider>
);
}
+1 -5
View File
@@ -1,12 +1,9 @@
import type { ReactNode } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { WindowInsetsContext } from "./context";
export { useWindowLayout } from "./context";
export { WindowLayoutActions, WindowLayoutActionsHost } from "./actions";
export { WindowLayoutSurface, WindowLayoutDivisionGap } from "./surface";
export { useTopBand } from "./context";
export { WindowSafeArea } from "./window-safe-area";
export {
resolveDesktopDivisionLayout,
resolveWorkspaceActionPlacement,
@@ -15,6 +12,5 @@ export {
export type { DesktopDivisionLayout, TopBand, WindowLayout, WindowLayoutRect } from "./model";
export function WindowLayoutProvider({ children }: { children: ReactNode }) {
const insets = useSafeAreaInsets();
return <WindowInsetsContext.Provider value={insets}>{children}</WindowInsetsContext.Provider>;
return children;
}
@@ -1,43 +0,0 @@
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { Text } from "react-native";
import { SafeAreaInsetsContext, useSafeAreaInsets } from "react-native-safe-area-context";
import { afterEach, expect, it, vi } from "vitest";
import { WindowLayoutProvider, WindowSafeArea } from "@/window-layout";
vi.stubGlobal("React", React);
const windowInsets = { top: 52, right: 0, bottom: 24, left: 0 };
const sheetTabInsets = { ...windowInsets, bottom: 0 };
const container = document.createElement("div");
document.body.appendChild(container);
const root = createRoot(container);
afterEach(() => {
act(() => root.render(null));
});
function InsetsProbe({ testID }: { testID: string }) {
const insets = useSafeAreaInsets();
return <Text testID={testID}>{JSON.stringify(insets)}</Text>;
}
it("gives an overlay opened inside a sheet tab the window's insets", () => {
act(() =>
root.render(
<SafeAreaInsetsContext.Provider value={windowInsets}>
<WindowLayoutProvider>
<SafeAreaInsetsContext.Provider value={sheetTabInsets}>
<InsetsProbe testID="sheet-tab" />
<WindowSafeArea>
<InsetsProbe testID="overlay" />
</WindowSafeArea>
</SafeAreaInsetsContext.Provider>
</WindowLayoutProvider>
</SafeAreaInsetsContext.Provider>,
),
);
const insetsOf = (testID: string) =>
JSON.parse(container.querySelector(`[data-testid="${testID}"]`)?.textContent ?? "null");
expect(insetsOf("sheet-tab")).toEqual(sheetTabInsets);
expect(insetsOf("overlay")).toEqual(windowInsets);
});
@@ -1,15 +0,0 @@
import { useContext, type ReactNode } from "react";
import { SafeAreaInsetsContext } from "react-native-safe-area-context";
import { WindowInsetsContext } from "./context";
/**
* Gives an overlay that draws over the whole window, such as an RN `Modal`, the window's insets
* instead of the ones its call site was given. Read them below it with `useSafeAreaInsets()`.
*/
export function WindowSafeArea({ children }: { children: ReactNode }) {
const insets = useContext(WindowInsetsContext);
if (!insets) {
throw new Error("WindowSafeArea must render inside WindowLayoutProvider");
}
return <SafeAreaInsetsContext.Provider value={insets}>{children}</SafeAreaInsetsContext.Provider>;
}
@@ -7,8 +7,6 @@ import {
isWorkspaceArchivePending,
isWorkspaceArchiveUndoPending,
} from "@/contexts/session-workspace-upserts";
import { queryClient } from "@/data/query-client";
import { allAgentHistoryQueryKey } from "@/hooks/agent-history-query-key";
import { useSessionStore, type WorkspaceDescriptor } from "@/stores/session-store";
import {
archiveWorkspaceOptimistically,
@@ -135,17 +133,6 @@ describe("archiveWorkspaceOptimistically", () => {
expect(storedWorkspace(archived.id)).toBeUndefined();
});
it("marks cached agent history stale once the host has archived the workspace", async () => {
const historyKey = [...allAgentHistoryQueryKey([SERVER_ID]), "workspace-1"];
queryClient.setQueryData(historyKey, { pages: [], pageParams: [] });
const client = createClient(vi.fn(async () => archivePayload({ workspaceId: "workspace-1" })));
await archiveWorkspaceOptimistically({ client, workspace: target() });
expect(queryClient.getQueryState(historyKey)?.isInvalidated).toBe(true);
queryClient.removeQueries({ queryKey: historyKey });
});
it("restores the workspace and clears pending state when the daemon rejects the archive", async () => {
const archived = workspace();
getHostRuntimeStore().acceptWorkspaceSnapshots(SERVER_ID, [archived]);
@@ -1,5 +1,3 @@
import { queryClient } from "@/data/query-client";
import { agentHistoryQueryKey, allAgentHistoryQueryRootKey } from "@/hooks/agent-history-query-key";
import { getHostRuntimeStore } from "@/runtime/host-runtime";
import {
isWorkspaceArchiveIntentCurrent,
@@ -98,12 +96,6 @@ function restoreOptimisticallyHiddenWorkspace(input: {
}
}
/** History fetched before the archive still lists the workspace's agents as active. */
function invalidateAgentHistory(serverId: string): void {
void queryClient.invalidateQueries({ queryKey: agentHistoryQueryKey(serverId) });
void queryClient.invalidateQueries({ queryKey: allAgentHistoryQueryRootKey() });
}
async function archiveWorkspaceOrThrow(input: {
client: WorkspaceArchiveClient;
workspaceId: string;
@@ -135,8 +127,6 @@ export function beginOptimisticWorkspaceArchive(input: {
});
if (outcome === "canceled") {
restoreOptimisticallyHiddenWorkspace({ serverId: input.workspace.serverId, snapshot });
} else {
invalidateAgentHistory(input.workspace.serverId);
}
return outcome;
} catch (error) {
@@ -83,7 +83,6 @@ export const PinOff = StubIcon;
export const Play = StubIcon;
export const Plug = StubIcon;
export const Plus = StubIcon;
export const Puzzle = StubIcon;
export const QrCode = StubIcon;
export const RefreshCcw = StubIcon;
export const RefreshCw = StubIcon;
@@ -101,7 +100,6 @@ export const Smartphone = StubIcon;
export const Split = StubIcon;
export const Square = StubIcon;
export const SquarePen = StubIcon;
export const SquareSlash = StubIcon;
export const SquareTerminal = StubIcon;
export const Star = StubIcon;
export const Sun = StubIcon;
-23
View File
@@ -35,26 +35,6 @@ export default defineConfig({
};
},
},
{
name: "reanimated-web-style-helpers",
transform(_source, id) {
// Reanimated writes animated styles to the DOM through react-native-web helpers it loads
// with `require` inside try/catch. Vite serves ESM, so the require throws, the helpers stay
// undefined, and the first animated style update after mount crashes the component.
if (
!id.split("?")[0].endsWith("/lib/module/ReanimatedModule/js-reanimated/webUtils.web.js")
) {
return;
}
return {
code: [
'export { default as createReactDOMStyle } from "react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle";',
'export { createTransformValue, createTextShadowValue } from "react-native-web/dist/exports/StyleSheet/preprocess";',
].join("\n"),
map: null,
};
},
},
{
name: "compile-react-components",
enforce: "pre",
@@ -207,9 +187,6 @@ export default defineConfig({
"react/jsx-dev-runtime",
"react-native-gesture-handler > hoist-non-react-statics",
"react-native-gesture-handler > invariant",
// Loaded by the reanimated-web-style-helpers plugin, which the dependency scan does not see.
"react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle",
"react-native-web/dist/exports/StyleSheet/preprocess",
],
exclude: [
"react-native-enriched-markdown",
+2 -3
View File
@@ -62,9 +62,8 @@ export async function resolveAgentEntry(
}
}
// COMPAT(fullAgentIdExact): daemons before v0.16.0 resolve a full agent ID
// that matches no agent to an agent titled with it, so archive, detach and
// reload accept their answer only when it is that ID. Remove after 2027-05-15.
// A complete agent UUID is an exact identity: the daemon falls back to a
// title match, which must not answer for an ID that does not exist.
if (FULL_AGENT_UUID_PATTERN.test(trimmed)) {
const agentId = trimmed.toLowerCase();
const fetchResult = await client.fetchAgent({ agentId });
+2 -60
View File
@@ -13,8 +13,8 @@
import assert from "node:assert";
import { runLocalPaseo } from "./helpers/local-cli.ts";
import { getAvailablePort } from "./helpers/network.ts";
import { createTempDirs, runPaseoCli, startTestDaemon } from "./helpers/test-daemon.ts";
import { mkdtemp, rm, writeFile } from "fs/promises";
import { runPaseoCli, startTestDaemon } from "./helpers/test-daemon.ts";
import { mkdtemp, rm } from "fs/promises";
import { tmpdir } from "os";
import { join } from "path";
@@ -135,64 +135,6 @@ try {
}
console.log("✓ delete reports AGENT_NOT_FOUND for an unknown ID\n");
}
{
console.log("Test 10: a missing full ID does not delete an agent titled with it");
const missingId = "11111111-2222-4333-8444-555555555555";
const titledId = "c9a97e5d-4a92-4646-a016-53032146d0a1";
const dirs = await createTempDirs();
await writeFile(
join(dirs.paseoHome, "agents", `${titledId}.json`),
JSON.stringify(
{
id: titledId,
provider: "codex",
cwd: dirs.workDir,
createdAt: "2026-09-03T18:29:21.949Z",
updatedAt: "2026-09-03T18:29:21.949Z",
title: missingId,
labels: {},
lastStatus: "closed",
},
null,
2,
),
);
const daemon = await startTestDaemon(dirs);
const host = `127.0.0.1:${daemon.port}`;
try {
for (const command of ["inspect", "delete"]) {
const result = await runPaseoCli(daemon, [
"agent",
command,
missingId,
"--json",
"--host",
host,
]);
assert.strictEqual(result.exitCode, 1, `${command}: ${result.stdout}`);
assert.strictEqual(
JSON.parse(result.stderr).error.code,
"AGENT_NOT_FOUND",
`${command}: ${result.stderr}`,
);
}
const titled = await runPaseoCli(daemon, [
"agent",
"inspect",
titledId,
"--json",
"--host",
host,
]);
assert.strictEqual(titled.exitCode, 0, titled.stderr);
assert.strictEqual(JSON.parse(titled.stdout).Id, titledId);
} finally {
await daemon.stop();
}
console.log("✓ a missing full ID does not delete an agent titled with it\n");
}
} finally {
await rm(paseoHome, { recursive: true, force: true });
}
@@ -7,7 +7,6 @@ import {
scoreMatch,
scorePathMatch,
scoreTextFields,
textFieldsMatchClass,
} from "./text-match.js";
function markUp(query: string, text: string, options?: Parameters<typeof scoreMatch>[2]): string {
@@ -249,24 +248,6 @@ describe("scoreTextFields", () => {
});
});
describe("textFieldsMatchClass", () => {
it("keeps positional tier differences inside one class", () => {
expect(textFieldsMatchClass("lo", ["fix-login-bug"])).toBe("word");
expect(textFieldsMatchClass("lo", ["Login page fix"])).toBe("word");
});
it("takes the loosest token's class", () => {
expect(textFieldsMatchClass("auth", ["oauth-refactor"])).toBe("inside-word");
expect(textFieldsMatchClass("fix auth", ["fix", "oauth"])).toBe("inside-word");
expect(textFieldsMatchClass("fix lgn", ["fix", "login"])).toBe("scattered");
expect(textFieldsMatchClass("stipe", ["stripe"], { typoTolerant: true })).toBe("scattered");
});
it("returns null when a token matches no field", () => {
expect(textFieldsMatchClass("fix zebra", ["fix"])).toBeNull();
});
});
describe("compareMatchScores", () => {
it("sorts by tier ascending", () => {
expect(compareMatchScores({ tier: 1, offset: 10 }, { tier: 2, offset: 0 })).toBeLessThan(0);
+11 -59
View File
@@ -331,14 +331,16 @@ export interface TextFieldsOptions {
subsequence?: boolean;
}
/** Each token's best score across the fields, or null when some token matches none. */
function scoreTokens(
export function scoreTextFields(
query: string,
fields: string[],
options: TextFieldsOptions,
): { token: string; score: MatchScore }[] | null {
const scores: { token: string; score: MatchScore }[] = [];
for (const token of tokenizeQuery(query)) {
options: TextFieldsOptions = {},
): MatchScore | null {
const tokens = tokenizeQuery(query);
if (tokens.length === 0) return { tier: TIER_EXACT, offset: 0, spread: 0 };
const aggregate: MatchScore = { tier: TIER_EXACT, offset: 0, spread: 0 };
for (const token of tokens) {
const fuzzy = options.typoTolerant ? fuzzyPolicyForToken(token) : null;
let best: MatchScore | null = null;
for (const field of fields) {
@@ -348,59 +350,9 @@ function scoreTokens(
}
}
if (!best) return null;
scores.push({ token, score: best });
}
return scores;
}
export function scoreTextFields(
query: string,
fields: string[],
options: TextFieldsOptions = {},
): MatchScore | null {
const scores = scoreTokens(query, fields, options);
if (!scores) return null;
const aggregate: MatchScore = { tier: TIER_EXACT, offset: 0, spread: 0 };
for (const { token, score } of scores) {
aggregate.tier += score.tier;
aggregate.offset += score.offset;
aggregate.spread = (aggregate.spread ?? 0) + (score.spread ?? token.length);
aggregate.tier += best.tier;
aggregate.offset += best.offset;
aggregate.spread = (aggregate.spread ?? 0) + (best.spread ?? token.length);
}
return aggregate;
}
/**
* How closely a query matched, coarser than a tier: every token at a word boundary, some token
* inside a word, or some token only scattered across a word or misspelled. Positional tier
* differences ("lo" at a title's start versus a branch's middle word) stay within one class.
*/
export type MatchClass = "word" | "inside-word" | "scattered";
const MATCH_CLASS_ORDER: readonly MatchClass[] = ["word", "inside-word", "scattered"];
function matchClassOfTier(tier: number): MatchClass {
if (tier <= TIER_WORD_START) return "word";
if (tier === TIER_SUBSTRING) return "inside-word";
return "scattered";
}
/** Closer classes first. */
export function compareMatchClasses(a: MatchClass, b: MatchClass): number {
return MATCH_CLASS_ORDER.indexOf(a) - MATCH_CLASS_ORDER.indexOf(b);
}
/** The class of the query's loosest token, or null when some token matches no field. */
export function textFieldsMatchClass(
query: string,
fields: string[],
options: TextFieldsOptions = {},
): MatchClass | null {
const scores = scoreTokens(query, fields, options);
if (!scores) return null;
let loosest: MatchClass = "word";
for (const { score } of scores) {
const tokenClass = matchClassOfTier(score.tier);
if (compareMatchClasses(tokenClass, loosest) > 0) loosest = tokenClass;
}
return loosest;
}
-7
View File
@@ -319,7 +319,6 @@ type ProviderSubagentManagerEvent = Extract<
// Clients before 0.1.45 validate providers with z.enum(["claude", "codex", "opencode"]) and reject
// the entire session message if they encounter an unknown provider.
const LEGACY_PROVIDER_IDS = new Set(["claude", "codex", "opencode"]);
const FULL_AGENT_ID_PATTERN = /^[0-9a-f]{8}(?:-[0-9a-f]{4}){3}-[0-9a-f]{12}$/i;
const MIN_VERSION_ALL_PROVIDERS = "0.1.45";
const MIN_VERSION_EXPLICIT_WORKSPACE_RECOVERY = "0.1.105";
function errorToFriendlyMessage(error: unknown): string {
@@ -5768,12 +5767,6 @@ export class Session {
return { ok: true, agentId: trimmed };
}
// A complete agent ID names one agent. When none has it, no prefix or
// title answers for it, so a command never acts on a different agent.
if (FULL_AGENT_ID_PATTERN.test(trimmed)) {
return { ok: false, notFound: true, error: `Agent not found: ${trimmed}` };
}
const prefixMatches = Array.from(knownIds).filter((id) => id.startsWith(trimmed));
if (prefixMatches.length === 1) {
return { ok: true, agentId: prefixMatches[0] };