mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-15 04:45:11 +00:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
78d9a36a16 |
+9
-39
@@ -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.
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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>;
|
||||
};
|
||||
}>;
|
||||
}>;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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([]);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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([]);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -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",
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
+58
-44
@@ -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,
|
||||
),
|
||||
};
|
||||
}
|
||||
@@ -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],
|
||||
},
|
||||
|
||||
@@ -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,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,
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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}} في اللوحة الجانبية",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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}}をサイドパネルで開く",
|
||||
|
||||
@@ -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}} 열기",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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}} в боковой панели",
|
||||
|
||||
@@ -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", () => {
|
||||
|
||||
@@ -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":
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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,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,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;
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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 });
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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] };
|
||||
|
||||
Reference in New Issue
Block a user