@elabs-ai/components-ui 4.0.0 → 4.2.0

package/src/components/virtual-select/virtual-select.tsx

@@ -19,6 +19,7 @@ import { Badge } from "../badge";
 import { Button } from "../button";
 import { Input } from "../input";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { useLocale } from "../locale-provider";
 import { type VirtualSelectOption, useVirtualListbox } from "./use-virtual-listbox";
 
 export type { VirtualSelectOption };
@@ -85,9 +86,9 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
       value,
       defaultValue,
       onValueChange,
-      placeholder = "Select…",
-      searchPlaceholder = "Search…",
-      emptyText = "No results.",
+      placeholder,
+      searchPlaceholder,
+      emptyText,
       estimateOptionHeight = 32,
       maxListHeight = "18rem",
       className,
@@ -95,6 +96,11 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
     },
     ref,
   ) {
+    const { t } = useLocale();
+    const resolvedPlaceholder = placeholder ?? t("ui.virtualSelect.placeholder");
+    const resolvedSearchPlaceholder = searchPlaceholder ?? t("ui.virtualSelect.searchPlaceholder");
+    const resolvedEmptyText = emptyText ?? t("noResults");
+
     // ------------------------------------------------------------------
     // Controlled / uncontrolled
     // ------------------------------------------------------------------
@@ -135,6 +141,15 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
       [options, query],
     );
 
+    // O(1) label lookup for the trigger's selected chips — `selected.map(find)`
+    // is O(selected.length * options.length) and options lists here can be
+    // large (that's the whole point of virtualizing).
+    const optionByValue = useMemo(() => {
+      const map = new Map<string, VirtualSelectOption>();
+      for (const o of options) map.set(o.value, o);
+      return map;
+    }, [options]);
+
     // ------------------------------------------------------------------
     // Virtualizer
     // ------------------------------------------------------------------
@@ -184,26 +199,45 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
     const listboxId = `${uid}-listbox`;
     const optionId = (index: number) => `${uid}-option-${index}`;
 
-    // Focus the search input when the popover opens
+    // Focus the search input when the popover opens. The timeout id is
+    // tracked so it can be cancelled on unmount (or a rapid re-close) —
+    // otherwise it fires after the component (and `searchRef`'s DOM node)
+    // is gone, or focuses a NEW popover's input on a fast toggle.
+    const focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(
+      () => () => {
+        if (focusTimeoutRef.current != null) clearTimeout(focusTimeoutRef.current);
+      },
+      [],
+    );
+
     const handleOpenChange = useCallback((next: boolean) => {
       setOpen(next);
+      if (focusTimeoutRef.current != null) {
+        clearTimeout(focusTimeoutRef.current);
+        focusTimeoutRef.current = null;
+      }
       if (next) {
         // Defer one frame so Radix has mounted the portal
-        setTimeout(() => searchRef.current?.focus(), 0);
+        focusTimeoutRef.current = setTimeout(() => {
+          focusTimeoutRef.current = null;
+          searchRef.current?.focus();
+        }, 0);
       }
     }, []);
 
     // ------------------------------------------------------------------
     // Trigger label
     // ------------------------------------------------------------------
-    const selectedLabels = selected.map((v) => {
-      const opt = options.find((o) => o.value === v);
-      return { value: v, label: opt?.label ?? v };
-    });
+    const selectedLabels = selected.map((v) => ({
+      value: v,
+      label: optionByValue.get(v)?.label ?? v,
+    }));
 
     const triggerContent =
       selectedLabels.length === 0 ? (
-        <span className="text-muted-foreground">{placeholder}</span>
+        <span className="text-muted-foreground">{resolvedPlaceholder}</span>
       ) : multiple ? (
         <>
           {selectedLabels.slice(0, 2).map((l) => (
@@ -247,7 +281,7 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
             aria-expanded={open}
             aria-haspopup="listbox"
             aria-controls={listboxId}
-            className={cn("h-auto min-h-9 w-64 justify-between font-normal", className)}
+            className={cn("h-auto min-h-9 w-full justify-between font-normal", className)}
             {...props}
           >
             <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1 text-start">
@@ -258,7 +292,7 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
         </PopoverTrigger>
 
         <PopoverContent
-          className="w-64 p-0"
+          className="w-[var(--radix-popover-trigger-width)] min-w-64 p-0"
           align="start"
           // Prevent Radix from stealing focus so it can go to the input
           onOpenAutoFocus={(e) => e.preventDefault()}
@@ -270,17 +304,21 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
               type="text"
               autoComplete="off"
               spellCheck={false}
-              placeholder={searchPlaceholder}
+              placeholder={resolvedSearchPlaceholder}
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => onInputKeyDown(e)}
-              aria-label={searchPlaceholder}
+              aria-label={resolvedSearchPlaceholder}
               aria-autocomplete="list"
               aria-controls={listboxId}
               aria-activedescendant={
                 activeIndex >= 0 && activeMounted ? optionId(activeIndex) : undefined
               }
-              className="h-8 border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+              // Border/shadow removed (sits inside the popover's own bordered
+              // header strip) but the base `Input` focus-ring is kept — no
+              // compound ring lives elsewhere on this control, so silencing it
+              // would leave a re-focused search box with no visible indicator.
+              className="h-8 border-0 shadow-none"
             />
           </div>
 
@@ -318,7 +356,7 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
                         transform: `translateY(${virtualRow.start}px)`,
                       }}
                       className={cn(
-                        "flex cursor-pointer select-none items-center rounded-sm px-2 text-sm outline-none",
+                        "flex cursor-pointer select-none items-center rounded-sm px-2 text-body outline-none",
                         "transition-colors duration-fast motion-reduce:transition-none",
                         isActive && "bg-accent text-accent-foreground",
                         !isActive && "hover:bg-accent hover:text-accent-foreground",
@@ -349,9 +387,9 @@ export const VirtualSelect = forwardRef<HTMLButtonElement, VirtualSelectProps>(
             <div
               role="status"
               aria-live="polite"
-              className="px-2 py-6 text-center text-sm text-muted-foreground"
+              className="px-2 py-6 text-center text-body text-muted-foreground"
             >
-              {emptyText}
+              {resolvedEmptyText}
             </div>
           ) : null}
         </PopoverContent>

package/src/components/wizard/wizard.test.tsx

@@ -64,4 +64,13 @@ describe("Wizard", () => {
     await user.click(screen.getByRole("button", { name: "Next" }));
     await waitFor(() => expect(screen.getByRole("button", { name: "Finish" })).toBeInTheDocument());
   });
+
+  it("names the completed-step indicator button — it renders only an icon", async () => {
+    const user = userEvent.setup();
+    renderWizard();
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    // The first step's indicator now shows a checkmark glyph with no text
+    // content — without an accessible name it would be an unlabelled button.
+    expect(screen.getByRole("button", { name: "Account — completed" })).toBeInTheDocument();
+  });
 });

package/src/components/wizard/wizard.tsx

@@ -232,9 +232,13 @@ export const WizardSteps = forwardRef<HTMLOListElement, WizardStepsProps>(functi
               type="button"
               disabled={!isClickable}
               onClick={() => goTo(index)}
+              // The completed state renders only a checkmark glyph (hidden
+              // from AT below) — with no text content, the button would
+              // otherwise have no accessible name at all.
+              aria-label={isComplete ? `${meta.title} — completed` : undefined}
               className={cn(
-                "flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium tabular-nums",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                "flex size-7 shrink-0 items-center justify-center rounded-full border text-meta font-medium tabular-nums",
+                "focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                 isActive && "border-primary bg-primary text-primary-foreground",
                 // #399 — the step NUMBER is text on a `/10` wash, not plate ink
                 // and not a mark: `-text` rung. The border keeps the fill rung.
@@ -248,14 +252,14 @@ export const WizardSteps = forwardRef<HTMLOListElement, WizardStepsProps>(functi
             <span className="flex min-w-0 flex-col">
               <span
                 className={cn(
-                  "truncate text-sm font-medium",
+                  "truncate text-body font-medium",
                   isActive ? "text-foreground" : "text-muted-foreground",
                 )}
               >
                 {meta.title}
               </span>
               {meta.description && (
-                <span className="truncate text-xs text-muted-foreground">{meta.description}</span>
+                <span className="truncate text-meta text-muted-foreground">{meta.description}</span>
               )}
             </span>
           </li>
@@ -309,7 +313,11 @@ export const WizardStep = forwardRef<HTMLDivElement, WizardStepProps>(function W
       role="group"
       aria-labelledby={`${baseId}-step-${step}`}
       tabIndex={-1}
-      className={cn("min-w-0 flex-1 focus-visible:outline-none", className)}
+      // Programmatically focused on step change (`regionRef.current?.focus()`
+      // above) — `focus-ring` gives that a visible indicator instead of
+      // silently discarding the browser's default outline (mirrors
+      // `DialogBody`'s same tabIndex={-1}-container precedent).
+      className={cn("min-w-0 flex-1 focus-ring", className)}
       {...props}
     >
       {children}

package/src/components/workspace-picker/index.ts

@@ -0,0 +1,3 @@
+export { WorkspacePicker } from "./workspace-picker";
+export type { WorkspacePickerProps } from "./workspace-picker";
+export { formatLastOpened, type Workspace } from "./workspace-picker-state";

package/src/components/workspace-picker/workspace-picker-state.ts

@@ -0,0 +1,50 @@
+/**
+ * `WorkspacePicker`'s pure, directly-testable logic — kept out of the
+ * component for the same reason `../model-picker/model-picker-state.ts` does
+ * (see that file's header comment): an expression buried in JSX cannot be
+ * unit-tested in isolation, and relative-time arithmetic in particular has
+ * edge cases worth locking down on their own.
+ */
+
+/**
+ * One recent workspace. Deliberately a strict subset of `ModelPickerItem`'s
+ * shape (`id` / `name` → `label` / `path` → `description` / `lastOpenedAt` →
+ * a formatted `meta` entry) — see the reuse note in `workspace-picker.tsx`.
+ */
+export interface Workspace {
+  id: string;
+  /** Rendered as the row's primary label and, when current, the trigger text. */
+  name: string;
+  /**
+   * The filesystem path. Long, user-supplied content — the row truncates it,
+   * never wraps or overflows.
+   */
+  path: string;
+  /**
+   * When this workspace was last opened. Rendered as a relative time via
+   * `Intl.RelativeTimeFormat` (`formatLastOpened`, below) — never a
+   * pre-formatted string the caller hands over.
+   */
+  lastOpenedAt?: Date;
+}
+
+/**
+ * "2 hours ago" / "in 3 minutes" / "yesterday" — `Intl.RelativeTimeFormat`
+ * picks the coarsest unit (minutes → hours → days) that still reads
+ * naturally, instead of e.g. "127 minutes ago".
+ *
+ * @param now - injection seam for tests; defaults to the real clock.
+ */
+export function formatLastOpened(date: Date, locale: string, now: number = Date.now()): string {
+  const diffMs = date.getTime() - now;
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+
+  const minutes = Math.round(diffMs / (60 * 1000));
+  if (Math.abs(minutes) < 60) return rtf.format(minutes, "minute");
+
+  const hours = Math.round(diffMs / (60 * 60 * 1000));
+  if (Math.abs(hours) < 24) return rtf.format(hours, "hour");
+
+  const days = Math.round(diffMs / (24 * 60 * 60 * 1000));
+  return rtf.format(days, "day");
+}

package/src/components/workspace-picker/workspace-picker.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, within } from "storybook/test";
+import { WorkspacePicker } from "./workspace-picker";
+import type { Workspace } from "./workspace-picker-state";
+
+const workspaces: Workspace[] = [
+  {
+    id: "ws-brand-ui",
+    name: "elabs-components",
+    path: "~/dev/elabs-components",
+    lastOpenedAt: new Date(Date.now() - 15 * 60 * 1000),
+  },
+  {
+    id: "ws-brainless",
+    name: "brainless",
+    path: "~/dev/oss/brainless",
+    lastOpenedAt: new Date(Date.now() - 26 * 60 * 60 * 1000),
+  },
+  {
+    id: "ws-monorepo",
+    name: "platform-monorepo",
+    // Long, user-supplied content — truncates instead of overflowing.
+    path: "~/workspaces/clients/northwind/services/platform-monorepo/packages/api-gateway",
+    lastOpenedAt: new Date(Date.now() - 9 * 24 * 60 * 60 * 1000),
+  },
+];
+
+const meta = {
+  title: "Core/WorkspacePicker",
+  component: WorkspacePicker,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A recent-workspace switcher, built as a `ModelPicker` PRESET rather than a new " +
+          "picker (issue #111) — see `docs/decisions/2026-09-01-brainless-adoption-architecture.md` " +
+          "§ 7. Maps `Workspace[]` onto `ModelPicker`'s grouped rows, formats `lastOpenedAt` with " +
+          "`Intl.RelativeTimeFormat`, marks the current workspace in text, and renders a free-text " +
+          "path entry into `ModelPicker`'s `footer` slot.\n\n" +
+          "No `Sidebar` dependency, unlike `TeamSwitcher` — this works anywhere a picker is needed.",
+      },
+    },
+  },
+  args: { workspaces, currentId: "ws-brand-ui", onSelect: fn(), onSubmitPath: fn() },
+} satisfies Meta<typeof WorkspacePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/**
+ * The current workspace is marked in the row's TEXT (a "Current" badge, not
+ * only `ModelPicker`'s check glyph) — open the popover to see it, and confirm
+ * it survives a greyscale render.
+ */
+export const CurrentWorkspaceMarkedInText: Story = {
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("combobox"));
+    const body = within(canvasElement.ownerDocument.body);
+    const currentRow = await body.findByRole("option", { name: /elabs-components/i });
+    // The marker is part of the row's ACCESSIBLE NAME, not only a visual glyph.
+    await expect(currentRow).toHaveAccessibleName(/current/i);
+    const otherRow = body.getByRole("option", { name: /brainless/i });
+    await expect(otherRow).not.toHaveAccessibleName(/current/i);
+  },
+};
+
+/** No workspace chosen yet — the trigger falls back to a designed placeholder. */
+export const NoCurrentWorkspace: Story = {
+  args: { currentId: undefined },
+};
+
+/**
+ * Nothing to show — `ModelPicker`'s own designed empty panel (reused, not
+ * reimplemented) plus the free-text path entry, which always renders in the
+ * footer regardless of body state and is this state's one action.
+ */
+export const Empty: Story = {
+  args: { workspaces: [], currentId: undefined },
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("combobox"));
+    await within(canvasElement.ownerDocument.body).findByRole("dialog");
+  },
+};
+
+/** A very long, deeply nested path truncates instead of overflowing the row. */
+export const LongPath: Story = {
+  args: {
+    workspaces: [
+      {
+        id: "ws-deep",
+        name: "api-gateway",
+        path: "~/workspaces/clients/northwind/services/platform-monorepo/packages/api-gateway/src/routes/internal",
+      },
+    ],
+    currentId: "ws-deep",
+  },
+};
+
+export const Disabled: Story = { args: { disabled: true } };
+
+/**
+ * The free-text path entry validates non-empty and reports the raw string —
+ * this component performs no filesystem access of any kind (D5). Also proves
+ * Enter submits the path instead of being hijacked by cmdk's own list
+ * navigation (both bind a keydown handler on the same `Command` root).
+ */
+export const SubmitFreeTextPath: Story = {
+  play: async ({ canvas, canvasElement, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole("combobox"));
+    const body = within(canvasElement.ownerDocument.body);
+    const input = body.getByPlaceholderText(/path/i);
+    const submit = body.getByRole("button", { name: /open/i });
+
+    // Nothing typed yet — validated as empty, no call.
+    await userEvent.click(submit);
+    await expect(args.onSubmitPath).not.toHaveBeenCalled();
+
+    await userEvent.type(input, "~/dev/new-project{Enter}");
+    await expect(args.onSubmitPath).toHaveBeenCalledWith("~/dev/new-project");
+    // Enter submitted the path — it did not move cmdk's list highlight/select.
+    await expect(args.onSelect).not.toHaveBeenCalled();
+  },
+};

package/src/components/workspace-picker/workspace-picker.test.tsx

@@ -0,0 +1,207 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { WorkspacePicker } from "./workspace-picker";
+import { formatLastOpened } from "./workspace-picker-state";
+import type { Workspace } from "./workspace-picker-state";
+
+afterEach(cleanup);
+
+// cmdk calls Element.scrollIntoView to keep the auto-highlighted item visible.
+// jsdom doesn't implement it and this package's vitest setup deliberately ships
+// no global stub, so third-party libraries that don't feature-detect get a
+// local, scoped stub — the same pattern as model-picker.test.tsx and
+// combobox.test.tsx.
+let originalScrollIntoView: typeof Element.prototype.scrollIntoView;
+beforeEach(() => {
+  originalScrollIntoView = Element.prototype.scrollIntoView;
+  Element.prototype.scrollIntoView = vi.fn();
+});
+afterEach(() => {
+  Element.prototype.scrollIntoView = originalScrollIntoView;
+});
+
+// No `LocaleProvider` wrapper: `useLocale()` falls back to the shipped English
+// defaults, so these assertions prove the real `ui.workspacePicker.*` catalogue in
+// `packages/ui/src/components/locale-provider/messages.ts` rather than a local stub
+// that would keep passing if the central entry were missing or misspelled.
+function renderPicker(ui: React.ReactElement) {
+  return render(ui);
+}
+
+const workspaces: Workspace[] = [
+  {
+    id: "ws-1",
+    name: "elabs-components",
+    path: "~/dev/elabs-components",
+    lastOpenedAt: new Date(Date.now() - 2 * 60 * 60 * 1000),
+  },
+  {
+    id: "ws-2",
+    name: "brainless",
+    path: "~/dev/brainless",
+  },
+];
+
+const open = async () => {
+  await userEvent.click(screen.getAllByRole("combobox")[0]!);
+};
+
+describe("formatLastOpened", () => {
+  const now = Date.parse("2026-09-01T12:00:00.000Z");
+
+  it("picks minutes for recent times", () => {
+    expect(formatLastOpened(new Date(now - 5 * 60 * 1000), "en-US", now)).toBe("5 minutes ago");
+  });
+
+  it("picks hours once minutes would read awkwardly large", () => {
+    expect(formatLastOpened(new Date(now - 3 * 60 * 60 * 1000), "en-US", now)).toBe("3 hours ago");
+  });
+
+  it("picks days once hours would read awkwardly large", () => {
+    expect(formatLastOpened(new Date(now - 2 * 24 * 60 * 60 * 1000), "en-US", now)).toBe(
+      "2 days ago",
+    );
+  });
+
+  it("formats a future time as relative-forward", () => {
+    expect(formatLastOpened(new Date(now + 10 * 60 * 1000), "en-US", now)).toBe("in 10 minutes");
+  });
+});
+
+describe("WorkspacePicker", () => {
+  it("renders each workspace's path as truncating secondary text", async () => {
+    renderPicker(<WorkspacePicker workspaces={workspaces} />);
+    await open();
+    const description = screen.getByText("~/dev/elabs-components");
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveClass("truncate");
+  });
+
+  it("marks the current workspace in the row's accessible name, not only by icon", async () => {
+    renderPicker(<WorkspacePicker workspaces={workspaces} currentId="ws-1" />);
+    await open();
+    const current = screen.getByRole("option", { name: /elabs-components/ });
+    const other = screen.getByRole("option", { name: /brainless/ });
+    expect(current).toHaveAccessibleName(/current/i);
+    expect(other).not.toHaveAccessibleName(/current/i);
+  });
+
+  it("names the trigger from the current workspace, and falls back to a placeholder", async () => {
+    const { unmount } = renderPicker(<WorkspacePicker workspaces={workspaces} currentId="ws-1" />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("elabs-components");
+    unmount();
+
+    renderPicker(<WorkspacePicker workspaces={workspaces} />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("No workspace selected");
+  });
+
+  it("reports the whole Workspace object on selection, not just the id", async () => {
+    const onSelect = vi.fn();
+    renderPicker(<WorkspacePicker workspaces={workspaces} onSelect={onSelect} />);
+    await open();
+    await userEvent.click(screen.getByText("brainless"));
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(workspaces[1]);
+  });
+
+  it("shows a designed empty state whose one action is the free-text path entry", async () => {
+    renderPicker(<WorkspacePicker workspaces={[]} onSubmitPath={vi.fn()} />);
+    await open();
+    // ModelPicker's own empty panel — reused, not reimplemented.
+    expect(screen.getByText("Nothing to show yet")).toBeInTheDocument();
+    expect(screen.queryByRole("option")).not.toBeInTheDocument();
+    // The action: the free-text path entry always renders, even with zero rows.
+    expect(screen.getByPlaceholderText("/path/to/project…")).toBeInTheDocument();
+  });
+
+  it("validates non-empty free text before reporting the raw string", async () => {
+    const onSubmitPath = vi.fn();
+    renderPicker(<WorkspacePicker workspaces={workspaces} onSubmitPath={onSubmitPath} />);
+    await open();
+    const submit = screen.getByRole("button", { name: "Open" });
+
+    await userEvent.click(submit);
+    expect(onSubmitPath).not.toHaveBeenCalled();
+
+    const input = screen.getByPlaceholderText("/path/to/project…");
+    await userEvent.type(input, "  ");
+    await userEvent.click(submit);
+    expect(onSubmitPath).not.toHaveBeenCalled();
+
+    await userEvent.clear(input);
+    await userEvent.type(input, "/tmp/new-workspace");
+    await userEvent.click(submit);
+    expect(onSubmitPath).toHaveBeenCalledTimes(1);
+    expect(onSubmitPath).toHaveBeenCalledWith("/tmp/new-workspace");
+  });
+
+  it("performs no filesystem access — onSubmitPath is the only side effect of a submit", async () => {
+    const onSubmitPath = vi.fn();
+    const onSelect = vi.fn();
+    renderPicker(
+      <WorkspacePicker workspaces={workspaces} onSubmitPath={onSubmitPath} onSelect={onSelect} />,
+    );
+    await open();
+    const input = screen.getByPlaceholderText("/path/to/project…");
+    await userEvent.type(input, "/tmp/new-workspace");
+    await userEvent.click(screen.getByRole("button", { name: "Open" }));
+    expect(onSubmitPath).toHaveBeenCalledWith("/tmp/new-workspace");
+    expect(onSelect).not.toHaveBeenCalled();
+    // The field clears after a successful submit.
+    expect(input).toHaveValue("");
+  });
+
+  it("submits the path on Enter instead of cmdk hijacking it as list navigation", async () => {
+    const onSubmitPath = vi.fn();
+    const onSelect = vi.fn();
+    renderPicker(
+      <WorkspacePicker workspaces={workspaces} onSubmitPath={onSubmitPath} onSelect={onSelect} />,
+    );
+    await open();
+    const input = screen.getByPlaceholderText("/path/to/project…");
+    await userEvent.type(input, "/tmp/other-workspace{Enter}");
+    expect(onSubmitPath).toHaveBeenCalledWith("/tmp/other-workspace");
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("truncates a very long path without overflow", async () => {
+    const longPath = "~/dev/" + "very-long-segment/".repeat(20) + "elabs-components";
+    renderPicker(
+      <WorkspacePicker workspaces={[{ id: "ws-long", name: "long-one", path: longPath }]} />,
+    );
+    await open();
+    const description = screen.getByText(longPath);
+    expect(description).toHaveClass("truncate");
+    // The truncating span is a min-w-0 flex child — the min-w-0 + flex-1 rule
+    // that lets truncate actually clip instead of overflowing.
+    expect(description.parentElement).toHaveClass("min-w-0");
+  });
+
+  it("uses the caller's explicit aria-label over the default", async () => {
+    renderPicker(<WorkspacePicker workspaces={workspaces} aria-label="Session workspace" />);
+    expect(screen.getByRole("combobox")).toHaveAccessibleName("Session workspace");
+  });
+
+  it("renders the shipped English default with no LocaleProvider mounted", () => {
+    // No provider: `t()` falls back to `DEFAULT_MESSAGES[key] ?? key`. The keys
+    // landed in messages.ts with this component, so the fallback is now real
+    // microcopy — a regression that dropped them would surface here as the raw
+    // key string instead.
+    render(<WorkspacePicker workspaces={workspaces} />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("No workspace selected");
+  });
+
+  it("scopes the workspace-picker data-slot to the root, distinct from model-picker", async () => {
+    const { container } = renderPicker(<WorkspacePicker workspaces={workspaces} />);
+    expect(container.querySelector('[data-slot="workspace-picker"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="model-picker"]')).not.toBeInTheDocument();
+  });
+
+  it("renders the free-text path form outside CommandList — the search query cannot hide it", async () => {
+    renderPicker(<WorkspacePicker workspaces={workspaces} />);
+    await open();
+    await userEvent.type(screen.getByPlaceholderText("Search workspaces…"), "no-match-xyz");
+    expect(screen.getByPlaceholderText("/path/to/project…")).toBeInTheDocument();
+  });
+});