): void {
- window.matchMedia = ((media: string) =>
- ({
- media,
- matches: matching[media] ?? false,
- addEventListener: noop,
- removeEventListener: noop,
- }) as unknown as MediaQueryList) as typeof window.matchMedia;
-}
-
-const emptyMemberships = () =>
- new Response(JSON.stringify({ data: [], nextCursor: null }), {
- status: 200,
- headers: { "content-type": "application/json" },
- });
-
-const user = { id: "user_1", name: "Ada Lovelace", email: "ada@example.com" };
-
-const sampleProfile = {
- kind: "member" as const,
- address: "ada@example.com",
- handle: "ada",
- displayName: "Ada",
- initials: "AD",
-};
-
-/** Stands in for CommandPaletteProvider's position in app.tsx's Shell — a
- * sibling of AppShell, not a descendant — without pulling in the full
- * palette widget. Sources its action context from the same hooks
- * CommandPaletteProvider does, and fires real actions through the real
- * `runActionCommand`. */
-function PaletteActionsProbe() {
- const closeCanvas = useCloseCanvas();
- const openProfile = useOpenProfileInCanvas();
-
- const ctx = {
- path: "/inbox",
- navigate: noop,
- tenantId: null,
- cycleTheme: noop,
- closeCanvas,
- };
-
- return (
-
-
-
-
- );
-}
-
-function Harness() {
- return (
-
-
-
-
-
-
- {"Inbox"}
-
-
-
-
-
- );
-}
-
-describe("palette actions reach the real shell state (sibling-context regression)", () => {
- let container: HTMLDivElement;
- let root: Root;
-
- beforeEach(() => {
- stubMatchMedia({});
- globalThis.fetch = ((_input: RequestInfo | URL, _init?: RequestInit) =>
- Promise.resolve(emptyMemberships())) as typeof fetch;
- container = document.createElement("div");
- document.body.appendChild(container);
- root = createRoot(container);
- });
-
- afterEach(() => {
- act(() => root.unmount());
- container.remove();
- });
-
- function click(testId: string): void {
- const button = container.querySelector(`[data-testid="${testId}"]`);
- if (button === null) throw new Error(`${testId} not rendered`);
- button.click();
- }
-
- test("close-canvas fired from a sibling of AppShell closes a canvas AppShell is showing", async () => {
- await act(async () => {
- root.render();
- });
-
- expect(container.querySelector(".shell-canvas-column")).not.toBeNull();
-
- await act(async () => {
- click("probe-open-profile");
- });
- expect(container.querySelector('.shell-canvas-column[data-open="true"]')).not.toBeNull();
-
- await act(async () => {
- click("probe-close-canvas");
- });
- expect(container.querySelector('.shell-canvas-column[data-open="true"]')).toBeNull();
- });
-});
-
-const sampleArtifact = {
- id: "art_1",
- title: "Notes",
- rendererKind: "doc" as const,
- content: "hello",
-};
-
-/** Reads canvas slots from ShellChromeProvider without mounting AppShell —
- * opening a routine would otherwise pull in RoutinePanel's fetches. Compact
- * layout hides the column but leaves slot state; these probes are the
- * resurrection check. */
-function CanvasSlotsProbe() {
- const openProfile = useOpenProfileInCanvas();
- const openArtifact = useOpenArtifactInCanvas();
- const openRoutine = useOpenRoutineInCanvas();
- const profile = useCanvasColumnProfile();
- const artifact = useCanvasColumnArtifact();
- const routine = useCanvasColumnRoutine();
-
- return (
-
-
-
-
- {profile === null ? "null" : "set"}
- {artifact === null ? "null" : "set"}
- {routine === null ? "null" : "set"}
-
- );
-}
-
-function RouteHarness({ path }: { readonly path: string }) {
- return (
-
-
-
-
-
-
-
-
-
- );
-}
-
-describe("canvas dismisses when in-app nav leaves a rail surface", () => {
- let container: HTMLDivElement;
- let root: Root;
-
- beforeEach(() => {
- stubMatchMedia({});
- globalThis.fetch = ((_input: RequestInfo | URL, _init?: RequestInit) =>
- Promise.resolve(emptyMemberships())) as typeof fetch;
- container = document.createElement("div");
- document.body.appendChild(container);
- root = createRoot(container);
- });
-
- afterEach(() => {
- act(() => root.unmount());
- container.remove();
- });
-
- function click(testId: string): void {
- const button = container.querySelector(`[data-testid="${testId}"]`);
- if (button === null) throw new Error(`${testId} not rendered`);
- button.click();
- }
-
- function slot(name: "routine" | "profile" | "artifact"): string {
- const el = container.querySelector(`[data-testid="canvas-${name}"]`);
- if (el === null) throw new Error(`canvas-${name} not rendered`);
- return el.textContent?.trim() ?? "";
- }
-
- async function renderAt(path: string): Promise {
- await act(async () => {
- root.render();
- });
- }
-
- test("leaving Routines for Files dismisses the pane", async () => {
- await renderAt("/routines");
- await act(async () => {
- click("probe-open-profile");
- });
- expect(slot("profile")).toBe("set");
-
- await renderAt("/files");
- expect(slot("profile")).toBe("null");
- });
-
- test("opening a routine detail under Routines does not dismiss the pane", async () => {
- await renderAt("/routines");
- await act(async () => {
- click("probe-open-profile");
- });
- expect(slot("profile")).toBe("set");
-
- await renderAt("/routines/rt_1");
- expect(slot("profile")).toBe("set");
- });
-
- test("query-only changes do not dismiss the pane", async () => {
- await renderAt("/routines?tab=list");
- await act(async () => {
- click("probe-open-profile");
- });
- expect(slot("profile")).toBe("set");
-
- await renderAt("/routines?tab=runs");
- expect(slot("profile")).toBe("set");
- });
-
- test("leaving a rail surface dismisses a profile pane", async () => {
- await renderAt("/routines");
- await act(async () => {
- click("probe-open-profile");
- });
- expect(slot("profile")).toBe("set");
-
- await renderAt("/insights");
- expect(slot("profile")).toBe("null");
- });
-
- test("leaving a rail surface dismisses an artifact pane", async () => {
- await renderAt("/files");
- await act(async () => {
- click("probe-open-artifact");
- });
- expect(slot("artifact")).toBe("set");
-
- await renderAt("/insights");
- expect(slot("artifact")).toBe("null");
- });
-
- test("route dismiss clears canvas state even when compact layout hides the column", async () => {
- stubMatchMedia({ "(max-width: 1099px)": true });
- await renderAt("/routines");
- await act(async () => {
- click("probe-open-profile");
- });
- expect(slot("profile")).toBe("set");
-
- await renderAt("/insights");
- expect(slot("profile")).toBe("null");
- });
-});
diff --git a/apps/web/test/shell-layout/shell-layout-hook.test.tsx b/apps/web/test/shell-layout/shell-layout-hook.test.tsx
deleted file mode 100644
index 83c01e891d..0000000000
--- a/apps/web/test/shell-layout/shell-layout-hook.test.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-// The first tests in this package that need a live DOM: `useShellLayoutMode`
-// subscribes to media queries, and that behaviour does not exist under
-// `renderToStaticMarkup` — effects never run
-// there. `dom-environment.ts` (preloaded via bunfig.toml) supplies the DOM;
-// `window.matchMedia` is stubbed here because the point is to control when a
-// query flips, which resizing a simulated viewport cannot do
-// deterministically.
-
-import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-
-import {
- COMPACT_MAX_WIDTH,
- NARROW_MAX_WIDTH,
- type ShellLayoutMode,
-} from "../../src/shell/layout/breakpoints";
-import { useShellLayoutMode } from "../../src/shell/layout/use-shell-layout";
-
-type StubQuery = {
- matches: boolean;
- readonly media: string;
- readonly listeners: Set<() => void>;
- readonly addEventListener: (type: string, listener: () => void) => void;
- readonly removeEventListener: (type: string, listener: () => void) => void;
-};
-
-const queries = new Map();
-
-function createStubQuery(media: string): StubQuery {
- const listeners = new Set<() => void>();
- return {
- matches: false,
- media,
- listeners,
- addEventListener: (_type: string, listener: () => void) => {
- listeners.add(listener);
- },
- removeEventListener: (_type: string, listener: () => void) => {
- listeners.delete(listener);
- },
- };
-}
-
-function stubMatchMedia(): void {
- queries.clear();
- window.matchMedia = ((media: string) => {
- const existing = queries.get(media);
- if (existing !== undefined) return existing as unknown as MediaQueryList;
- const query = createStubQuery(media);
- queries.set(media, query);
- return query as unknown as MediaQueryList;
- }) as typeof window.matchMedia;
-}
-
-function queryFor(maxWidth: number): StubQuery {
- const query = queries.get(`(max-width: ${maxWidth - 1}px)`);
- if (query === undefined) throw new Error(`query for ${maxWidth} not created`);
- return query;
-}
-
-function setMatches(maxWidth: number, matches: boolean): void {
- const query = queryFor(maxWidth);
- query.matches = matches;
- act(() => {
- for (const listener of query.listeners) listener();
- });
-}
-
-let container: HTMLDivElement;
-let root: Root;
-let observed: ShellLayoutMode | null = null;
-
-function Probe() {
- observed = useShellLayoutMode();
- return null;
-}
-
-function mountProbe(): void {
- act(() => {
- root.render();
- });
-}
-
-beforeEach(() => {
- stubMatchMedia();
- observed = null;
- container = document.createElement("div");
- document.body.appendChild(container);
- root = createRoot(container);
-});
-
-afterEach(() => {
- act(() => root.unmount());
- container.remove();
-});
-
-describe("useShellLayoutMode", () => {
- test("subscribes to both breakpoints, once each", () => {
- mountProbe();
- expect(queryFor(NARROW_MAX_WIDTH).listeners.size).toBe(1);
- expect(queryFor(COMPACT_MAX_WIDTH).listeners.size).toBe(1);
- });
-
- test("reads the queries on mount rather than waiting for a change event", () => {
- stubMatchMedia();
- window.matchMedia(`(max-width: ${NARROW_MAX_WIDTH - 1}px)`);
- queryFor(NARROW_MAX_WIDTH).matches = true;
- window.matchMedia(`(max-width: ${COMPACT_MAX_WIDTH - 1}px)`);
- queryFor(COMPACT_MAX_WIDTH).matches = true;
- mountProbe();
- expect(observed).toBe("narrow");
- });
-
- test("follows the viewport across every mode", () => {
- mountProbe();
- expect(observed).toBe("expanded");
- setMatches(COMPACT_MAX_WIDTH, true);
- expect(observed).toBe("compact");
- setMatches(NARROW_MAX_WIDTH, true);
- expect(observed).toBe("narrow");
- setMatches(NARROW_MAX_WIDTH, false);
- expect(observed).toBe("compact");
- setMatches(COMPACT_MAX_WIDTH, false);
- expect(observed).toBe("expanded");
- });
-
- test("drops both listeners when the shell unmounts", () => {
- mountProbe();
- act(() => root.render(null));
- expect(queryFor(NARROW_MAX_WIDTH).listeners.size).toBe(0);
- expect(queryFor(COMPACT_MAX_WIDTH).listeners.size).toBe(0);
- });
-});
diff --git a/apps/web/test/shell-layout/use-scroll-reset.test.tsx b/apps/web/test/shell-layout/use-scroll-reset.test.tsx
deleted file mode 100644
index 17fe4ed76d..0000000000
--- a/apps/web/test/shell-layout/use-scroll-reset.test.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { act, createElement, useRef, useState } from "react";
-import { createRoot } from "react-dom/client";
-import type { RefObject } from "react";
-
-import { useScrollReset } from "../../src/shell/layout/use-scroll-reset";
-
-function mount(initialPath: string) {
- const container = document.createElement("div");
- document.body.appendChild(container);
- const root = createRoot(container);
- let setPath: (path: string) => void = () => {};
- let scrollEl: HTMLDivElement | null = null;
-
- function Host() {
- const [path, updatePath] = useState(initialPath);
- setPath = updatePath;
- const ref = useRef(null);
- useScrollReset(ref as RefObject, path);
- return createElement(
- "div",
- {
- ref: (node: HTMLDivElement | null) => {
- scrollEl = node;
- (ref as { current: HTMLDivElement | null }).current = node;
- },
- style: { overflow: "auto", height: "40px" },
- },
- createElement("div", { style: { height: "400px" } }),
- );
- }
-
- act(() => {
- root.render(createElement(Host));
- });
-
- return {
- setScrollTop: (value: number) => {
- if (scrollEl !== null) scrollEl.scrollTop = value;
- },
- setPath: (path: string) =>
- act(() => {
- setPath(path);
- }),
- getScrollTop: () => scrollEl?.scrollTop ?? -1,
- unmount: () => act(() => root.unmount()),
- };
-}
-
-describe("useScrollReset", () => {
- test("resets scrollTop when the route dependency changes", () => {
- const harness = mount("/library");
- harness.setScrollTop(240);
- expect(harness.getScrollTop()).toBe(240);
- harness.setPath("/agents");
- expect(harness.getScrollTop()).toBe(0);
- harness.unmount();
- });
-});
diff --git a/apps/web/test/sidebar.test.tsx b/apps/web/test/sidebar.test.tsx
deleted file mode 100644
index 2df93c5078..0000000000
--- a/apps/web/test/sidebar.test.tsx
+++ /dev/null
@@ -1,711 +0,0 @@
-// The one sidebar: create + search in the header, the workbench list as
-// the entire body, and the utility row in a fixed footer region. It never
-// renders a page-nav list, an approvals/activity band, or a collapse
-// affordance.
-
-import { afterEach, describe, expect, test } from "bun:test";
-import { act } from "react";
-import { createRoot } from "react-dom/client";
-import { renderToStaticMarkup } from "react-dom/server";
-
-import { BenchProvider } from "../src/bench-context";
-import { APP_ROUTES, NAV_ROUTES } from "../src/routes";
-import { Sidebar } from "../src/shell/sidebar";
-import { SIDEBAR_EMPTY_COPY } from "../src/shell/workbench-list";
-import { TestQueryProvider } from "./test-query-provider";
-
-const noop = () => undefined;
-const realFetch = globalThis.fetch;
-const user = { id: "user_1", name: "Ada Lovelace", email: "ada@example.com" };
-
-afterEach(() => {
- globalThis.fetch = realFetch;
-});
-
-function renderSidebar(path: string): string {
- return renderToStaticMarkup(
-
-
-
-
- ,
- );
-}
-
-const membership = {
- data: [
- {
- principalId: "prn_1",
- tenantId: "tnt_1",
- tenantName: "Corbits Bench",
- tenantSlug: "corbits-bench",
- kind: "user",
- status: "active",
- roles: [],
- },
- ],
- nextCursor: null,
-};
-
-function json(body: unknown, status = 200): Response {
- return new Response(JSON.stringify(body), {
- status,
- headers: { "content-type": "application/json" },
- });
-}
-
-function runsBody(count: number): unknown {
- return {
- data: Array.from({ length: count }, (_, i) => ({
- id: `run_${i}`,
- tenantId: "tnt_1",
- definitionId: "wfd_a",
- definitionName: "Research brief",
- address: "addr",
- status: "deployed",
- createdAt: "2026-01-01T00:00:00.000Z",
- updatedAt: "2026-01-01T00:00:00.000Z",
- })),
- nextCursor: null,
- };
-}
-
-function stubFetch(options?: { readonly runCount?: number; readonly failRuns?: boolean }): void {
- globalThis.fetch = ((input: RequestInfo | URL) => {
- const path = typeof input === "string" ? input : String(input);
- if (path.includes("/api/me/principals")) return Promise.resolve(json(membership));
- if (path.includes("/agent-definitions/visible"))
- return Promise.resolve(json({ definitions: [] }));
- if (path.includes("/workflows/runs")) {
- if (options?.failRuns === true) return Promise.resolve(json({ error: "unavailable" }, 500));
- return Promise.resolve(json(runsBody(options?.runCount ?? 0)));
- }
- return Promise.resolve(json({ items: [] }));
- }) as typeof fetch;
-}
-
-function footerRowLabelsFromMarkup(markup: string): string[] {
- return [...markup.matchAll(/shell-sidebar-footer-row[\s\S]*?([^<]*)<\/span>/g)].map(
- (match) => match[1] ?? "",
- );
-}
-
-function footerRowLabelsFromDom(container: HTMLElement): string[] {
- return [...container.querySelectorAll(".shell-sidebar-footer-row")].map(
- (row) => row.querySelector("span")?.textContent ?? "",
- );
-}
-
-async function flush(ticks = 40): Promise {
- for (let i = 0; i < ticks; i++) {
- await act(async () => {
- await new Promise((resolve) => setTimeout(resolve, 0));
- });
- }
-}
-
-async function mountSidebar(
- path: string,
- onNavigate: (to: string) => void = noop,
-): Promise<{
- container: HTMLDivElement;
- root: ReturnType;
-}> {
- const container = document.createElement("div");
- document.body.appendChild(container);
- const root = createRoot(container);
- await act(async () => {
- root.render(
-
-
-
-
- ,
- );
- });
- await flush(60);
- return { container, root };
-}
-
-describe("Sidebar", () => {
- test("header offers create + search; there is no collapse affordance", () => {
- const markup = renderSidebar("/w");
- expect(markup).toContain('aria-label="New workbench"');
- // Search is the box inside the list (below the brand row), never a
- // header icon — the box itself is covered by the workbench-list tests.
- expect(markup).not.toContain('aria-label="Search"');
- expect(markup).not.toContain('aria-label="Collapse sidebar"');
- expect(markup).not.toContain('aria-label="Expand sidebar"');
- });
-
- // the "+" control opens the template picker (`/new`) instead of
- // minting a workbench directly.
- test("the + control opens the template picker, not an instant mint", async () => {
- stubFetch();
- const navigated: string[] = [];
- const container = document.createElement("div");
- document.body.appendChild(container);
- const root = createRoot(container);
- await act(async () => {
- root.render(
-
-
- navigated.push(to)}
- onSignOut={noop}
- />
-
- ,
- );
- });
-
- const newButton = container.querySelector('[aria-label="New workbench"]');
- await act(async () => {
- newButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
- });
- expect(navigated).toEqual(["/new"]);
-
- act(() => root.unmount());
- container.remove();
- });
-
- test("titles itself Agents and Channels and never renders a page-nav list", () => {
- const markup = renderSidebar("/settings/agents");
- // Section labels live inside the list (below its search box); the
- // panel keeps the accessible name for both groups.
- expect(markup).toContain('aria-label="Agents and Channels"');
- expect(markup).not.toContain('aria-label="Workbenches"');
- expect(markup).not.toContain(">Pages<");
- expect(markup).not.toContain("shell-rail-item");
- });
-
- test("first-run footer rail is Routines, Files, Skills, Agents, then the account row — no Insights or Inbox", () => {
- const markup = renderSidebar("/w");
- expect(footerRowLabelsFromMarkup(markup)).toEqual(["Routines", "Files", "Skills", "Agents"]);
- expect(markup).toContain("data-ctx-account");
- expect(markup).not.toContain(">Inbox<");
- expect(markup).not.toContain('aria-label="Notifications"');
- // Settings is its own direct control beside the account row (one
- // click, not buried in the account menu).
- expect(markup).toContain('aria-label="Settings"');
- // Mission Control stays pinned above the rail — not a new footer
- // destination.
- expect(markup).toContain(">Mission Control<");
- expect(markup).toContain("shell-sidebar-mission-control");
- expect(markup.indexOf("shell-sidebar-mission-control")).toBeLessThan(
- markup.indexOf("shell-sidebar-footer-row"),
- );
- });
-
- test("first-run footer rail does not list Insights before there are honest runs", async () => {
- stubFetch({ runCount: 0 });
- const { container, root } = await mountSidebar("/w");
- expect(footerRowLabelsFromDom(container)).toEqual(["Routines", "Files", "Skills", "Agents"]);
- act(() => root.unmount());
- container.remove();
- });
-
- test("Insights remains reachable by URL and command palette", () => {
- const palettePaths = NAV_ROUTES.map((route) => route.path);
- const routedPaths = APP_ROUTES.map((route) => route.path);
- expect(palettePaths).toContain("/insights");
- expect(routedPaths).toContain("/insights");
- });
-
- test("marks the Routines row current for its own route only", () => {
- const onRoutines = renderSidebar("/routines");
- expect(onRoutines).toMatch(
- /shell-sidebar-footer-row"[^>]*data-active="true"[^>]*>[\s\S]*?>RoutinesRoutines<[\s\S]{0,80}aria-current="page"/);
- });
-
- test("Insights joins the footer rail only when top-level runs exist", async () => {
- stubFetch({ runCount: 4 });
- const { container, root } = await mountSidebar("/insights");
- expect(footerRowLabelsFromDom(container)).toEqual([
- "Routines",
- "Files",
- "Skills",
- "Agents",
- "Insights",
- ]);
- const insights = [...container.querySelectorAll(".shell-sidebar-footer-row")].find(
- (row) => row.textContent?.includes("Insights") === true,
- );
- expect(insights?.getAttribute("aria-current")).toBe("page");
- act(() => root.unmount());
- container.remove();
- });
-
- test("a failed usage probe omits the row rather than claiming usage", async () => {
- stubFetch({ failRuns: true });
- const { container, root } = await mountSidebar("/w");
- expect(footerRowLabelsFromDom(container)).toEqual(["Routines", "Files", "Skills", "Agents"]);
- act(() => root.unmount());
- container.remove();
- });
-
- // the global pages (Insights) used to be the one place
- // the sidebar dropped the workbench list — reaching a conversation from
- // there took an extra hop back through `/`. The list is not page-scoped
- // (see `workbench-list.tsx`'s own header comment), so it renders exactly
- // the same on these routes as it does on a chat route, just with no row
- // marked active.
- describe("the workbench list on global pages", () => {
- const workbench = {
- id: "ch_1",
- title: "Research brief",
- kind: "workbench",
- pinned: false,
- participants: [],
- };
-
- function stubWorkbenches(): void {
- globalThis.fetch = ((input: RequestInfo | URL) => {
- const path = typeof input === "string" ? input : String(input);
- if (path.includes("/api/me/principals")) return Promise.resolve(json(membership));
- if (path.includes("/chat/workbenches?kind=workbench"))
- return Promise.resolve(json({ items: [workbench] }));
- if (path.includes("/chat/workbenches?kind=chat"))
- return Promise.resolve(json({ items: [] }));
- if (path.includes("/approvals"))
- return Promise.resolve(json({ data: [], nextCursor: null }));
- if (path.includes("/agent-definitions/visible"))
- return Promise.resolve(json({ definitions: [] }));
- return Promise.resolve(json({ items: [] }));
- }) as typeof fetch;
- }
-
- async function mountAt(
- path: string,
- onNavigate: (to: string) => void = noop,
- ): Promise<{
- container: HTMLDivElement;
- root: ReturnType;
- }> {
- stubWorkbenches();
- const container = document.createElement("div");
- document.body.appendChild(container);
- const root = createRoot(container);
- await act(async () => {
- root.render(
-
-
-
-
- ,
- );
- });
- for (let i = 0; i < 40; i++) {
- await act(async () => {
- await new Promise((resolve) => setTimeout(resolve, 0));
- });
- if (container.innerHTML.includes("shell-ch-row")) break;
- }
- return { container, root };
- }
-
- for (const path of ["/insights"]) {
- test(`renders the same workbench rows on ${path} as on a chat route, with none active`, async () => {
- const { container, root } = await mountAt(path);
-
- expect(container.querySelector('[aria-label="Search agents and channels"]')).not.toBeNull();
- const row = container.querySelector(".shell-ch-row");
- expect(row).not.toBeNull();
- expect(row?.textContent).toContain("Research brief");
- expect(container.querySelector('.shell-ch-row[data-active="true"]')).toBeNull();
-
- act(() => root.unmount());
- container.remove();
- });
- }
-
- test("selecting a row from a global page navigates to that conversation", async () => {
- const navigated: string[] = [];
- const { container, root } = await mountAt("/insights", (to) => navigated.push(to));
-
- const row = container.querySelector(".shell-ch-row");
- await act(async () => {
- row?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
- });
- expect(navigated).toEqual(["/w/ch_1"]);
-
- act(() => root.unmount());
- container.remove();
- });
- });
-
- // Sidebar = opened DMs (Agents) + rooms (Channels). Visible agent
- // definitions that have never been opened do not get a synthetic row.
- describe("agent DM rows", () => {
- const workbench = {
- id: "ch_1",
- title: "Research brief",
- kind: "workbench",
- pinned: false,
- participants: [],
- lastActivityAt: "2026-01-01T00:00:00.000Z",
- };
- const ownAgent = {
- id: "wfd_outreach",
- name: "Outreach",
- tenantId: "tnt_1",
- tenantName: "Corbits Bench",
- createdAt: "2026-01-05T00:00:00.000Z",
- };
- const inheritedAgent = {
- id: "wfd_ancestor_agent",
- name: "Researcher",
- tenantId: "tnt_ancestor",
- tenantName: "Corbits HQ",
- createdAt: "2026-01-02T00:00:00.000Z",
- };
-
- function stubAgentSidebar(): void {
- globalThis.fetch = ((input: RequestInfo | URL, _init?: RequestInit) => {
- const path = typeof input === "string" ? input : String(input);
- if (path.includes("/api/me/principals")) return Promise.resolve(json(membership));
- if (path.includes("/chat/workbenches?kind=workbench"))
- return Promise.resolve(json({ items: [workbench] }));
- if (path.includes("/chat/workbenches?kind=chat"))
- return Promise.resolve(json({ items: [] }));
- if (path.includes("/agent-definitions/visible"))
- return Promise.resolve(json({ definitions: [ownAgent, inheritedAgent] }));
- if (path.includes("/approvals"))
- return Promise.resolve(json({ data: [], nextCursor: null }));
- return Promise.resolve(json({ items: [] }));
- }) as typeof fetch;
- }
-
- async function mountSidebar(onNavigate: (to: string) => void = noop): Promise<{
- container: HTMLDivElement;
- root: ReturnType;
- }> {
- const container = document.createElement("div");
- document.body.appendChild(container);
- const root = createRoot(container);
- await act(async () => {
- root.render(
-
-
-
-
- ,
- );
- });
- for (let i = 0; i < 40; i++) {
- await act(async () => {
- await new Promise((resolve) => setTimeout(resolve, 0));
- });
- if (container.textContent?.includes("Research brief")) break;
- }
- return { container, root };
- }
-
- test("does not render a synthetic row for an unopened agent", async () => {
- stubAgentSidebar();
- const { container, root } = await mountSidebar();
-
- const labels = [...container.querySelectorAll(".shell-ch-row")].map(
- (row) => row.textContent ?? "",
- );
- expect(labels.some((label) => label.includes("Research brief"))).toBe(true);
- expect(labels.some((label) => label.includes("Outreach"))).toBe(false);
- expect(labels.some((label) => label.includes("Researcher"))).toBe(false);
- expect(container.querySelector("[data-ctx-agent]")).toBeNull();
-
- act(() => root.unmount());
- container.remove();
- });
- });
-
- test("renders one mixed recency list, interleaving a newer room above an older DM", async () => {
- const channel = {
- id: "ch_room",
- title: "Launch plan",
- kind: "workbench",
- pinned: false,
- participants: [],
- lastActivityAt: "2026-01-10T00:00:00.000Z",
- };
- const dm = {
- id: "ch_dm",
- title: "Myra",
- kind: "chat",
- pinned: false,
- participants: [],
- lastActivityAt: "2026-01-01T00:00:00.000Z",
- };
- globalThis.fetch = ((input: RequestInfo | URL) => {
- const path = typeof input === "string" ? input : String(input);
- if (path.includes("/api/me/principals")) return Promise.resolve(json(membership));
- if (path.includes("/chat/workbenches?kind=workbench"))
- return Promise.resolve(json({ items: [channel] }));
- if (path.includes("/chat/workbenches?kind=chat"))
- return Promise.resolve(json({ items: [dm] }));
- if (path.includes("/approvals")) return Promise.resolve(json({ data: [], nextCursor: null }));
- if (path.includes("/agent-definitions/visible"))
- return Promise.resolve(json({ definitions: [] }));
- return Promise.resolve(json({ items: [] }));
- }) as typeof fetch;
-
- const container = document.createElement("div");
- document.body.appendChild(container);
- const root = createRoot(container);
- await act(async () => {
- root.render(
-
-
-
-
- ,
- );
- });
- for (let i = 0; i < 40; i++) {
- await act(async () => {
- await new Promise((resolve) => setTimeout(resolve, 0));
- });
- if (container.textContent?.includes("Launch plan")) break;
- }
-
- const agentsHeading = container.querySelector("#sidebar-agents-heading");
- const channelsHeading = container.querySelector("#sidebar-channels-heading");
- expect(agentsHeading).toBeNull();
- expect(channelsHeading).toBeNull();
- expect(container.querySelectorAll(".shell-panel-list-label")).toHaveLength(0);
- const wraps = [...container.querySelectorAll(".shell-ch-row-wrap")];
- expect(wraps.map((row) => row.getAttribute("data-ctx-workbench"))).toEqual([
- "ch_room",
- "ch_dm",
- ]);
- expect(container.innerHTML.indexOf("Launch plan")).toBeLessThan(
- container.innerHTML.indexOf("Myra"),
- );
- expect(container.innerHTML).not.toContain("No workbenches yet");
-
- act(() => root.unmount());
- container.remove();
- });
-
- test("does not render the activity or approvals band", () => {
- const markup = renderSidebar("/w");
- expect(markup).not.toContain("panel-activity-slot");
- expect(markup).not.toContain("panel-band-activity");
- expect(markup).not.toContain('aria-label="Activity"');
- });
-
- test("shows an honest empty state once no scope resolves", async () => {
- globalThis.fetch = ((_input: RequestInfo | URL) =>
- Promise.resolve(json({ data: [], nextCursor: null }))) as typeof fetch;
- const container = document.createElement("div");
- document.body.appendChild(container);
- const root = createRoot(container);
- await act(async () => {
- root.render(
-
-
-
-
- ,
- );
- });
- for (let i = 0; i < 20; i++) {
- await act(async () => {
- await new Promise((resolve) => setTimeout(resolve, 0));
- });
- if (container.innerHTML.includes(SIDEBAR_EMPTY_COPY)) break;
- }
- expect(container.innerHTML).toContain(SIDEBAR_EMPTY_COPY);
- expect(container.innerHTML).not.toContain("No agents yet");
- expect(container.innerHTML).not.toContain("No channels yet");
- expect(container.innerHTML).not.toContain("No workbenches yet");
- act(() => root.unmount());
- container.remove();
- });
-
- // Zero opened conversations: the mixed list speaks honestly — never a
- // fake New Workbench stub, and never the icon "No workbenches yet"
- // empty state. Create still lives on the + control (`/new`).
- test("zero workbenches: honest mixed-list empty copy, not a New Workbench stub", async () => {
- stubFetch();
- const container = document.createElement("div");
- document.body.appendChild(container);
- const root = createRoot(container);
- await act(async () => {
- root.render(
-
-
-
-
- ,
- );
- });
- for (let i = 0; i < 40; i++) {
- await act(async () => {
- await new Promise((resolve) => setTimeout(resolve, 0));
- });
- if (container.innerHTML.includes(SIDEBAR_EMPTY_COPY)) break;
- }
- expect(container.innerHTML).toContain(SIDEBAR_EMPTY_COPY);
- expect(container.querySelector(".shell-ch-row")).toBeNull();
- expect(container.innerHTML).not.toContain("New Workbench");
- expect(container.innerHTML).not.toContain("No workbenches yet");
- act(() => root.unmount());
- container.remove();
- });
-
- // the footer avatar used to be a plain link straight to
- // settings — there was no way to sign out short of the hidden
- // right-click context menu. It is now a real menu (react-ui's `Menu`
- // primitives).
- //
- // grown to the reference shape — the whole account row (avatar
- // + name) is the trigger, and the menu itself carries a weekly usage
- // line, a feedback link out to the repo's GitHub issues, a divider, and
- // a danger-styled "Log out".
- //
- // A later pass split Settings out to its own direct icon beside the row
- // (one click instead of two) — the menu still carries everything else
- // that used to live alongside it, so nothing the old menu offered is
- // stranded.
- describe("the account menu", () => {
- async function openAccountMenu(
- container: HTMLDivElement,
- onSignOut: () => void = noop,
- ): Promise> {
- const root = createRoot(container);
- await act(async () => {
- root.render(
-
-
-
-
- ,
- );
- });
-
- const trigger = container.querySelector(".shell-sidebar-account-btn");
- expect(trigger).not.toBeNull();
- expect(trigger?.textContent).toContain(user.name);
- await act(async () => {
- // Radix's dropdown-menu trigger opens on `pointerdown`, not
- // `click` — mirroring how a real mouse interaction reaches it.
- trigger?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
- });
- for (let i = 0; i < 5; i++) {
- await act(async () => {
- await new Promise((resolve) => setTimeout(resolve, 0));
- });
- }
- return root;
- }
-
- test("the whole avatar + name row opens the menu, popping upward", async () => {
- stubFetch();
- const container = document.createElement("div");
- document.body.appendChild(container);
- const root = await openAccountMenu(container);
-
- // Radix portals menu content onto `document.body`, outside this
- // test's own `container`.
- const menu = document.querySelector('[role="menu"]');
- expect(menu).not.toBeNull();
- expect(menu?.getAttribute("data-side")).toBe("top");
-
- act(() => root.unmount());
- container.remove();
- });
-
- // the "Weekly usage" line read packages/insights' `/usage`
- // route, deleted along with the package — the menu is just feedback and
- // log out now.
- test("offers a feedback link and Log out, no Weekly usage line", async () => {
- stubFetch();
- const container = document.createElement("div");
- document.body.appendChild(container);
- const root = await openAccountMenu(container);
-
- const menu = document.querySelector('[role="menu"]');
- expect(menu?.textContent).not.toContain("Weekly usage");
- expect(menu?.textContent).toContain("Send Feedback");
- expect(menu?.textContent).toContain("Log out");
- // Settings moved out to its own direct control (see the test
- // below) — the menu no longer duplicates it.
- expect(menu?.textContent).not.toContain("Settings");
-
- const feedbackLink = menu?.querySelector(
- 'a[href*="github.com/corbitsdev/workbench"]',
- );
- expect(feedbackLink).not.toBeUndefined();
- expect(feedbackLink?.getAttribute("href")).toContain("/issues");
- expect(feedbackLink?.getAttribute("target")).toBe("_blank");
-
- act(() => root.unmount());
- container.remove();
- });
-
- test("Log out is danger-styled and calls onSignOut", async () => {
- stubFetch();
- const container = document.createElement("div");
- document.body.appendChild(container);
- let signedOut = false;
- const root = await openAccountMenu(container, () => {
- signedOut = true;
- });
-
- const logOutItem = [...document.querySelectorAll('[role="menuitem"]')].find(
- (item) => item.textContent?.includes("Log out") === true,
- );
- expect(logOutItem).not.toBeUndefined();
- expect(logOutItem?.className).toContain("text-destructive");
-
- await act(async () => {
- logOutItem?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
- });
-
- expect(signedOut).toBe(true);
-
- act(() => root.unmount());
- container.remove();
- });
- });
-
- test("the settings icon navigates straight to Settings, no menu in the way", async () => {
- stubFetch();
- const container = document.createElement("div");
- document.body.appendChild(container);
- const navigated: string[] = [];
- const root = createRoot(container);
- await act(async () => {
- root.render(
-
-
- navigated.push(to)}
- onSignOut={noop}
- />
-
- ,
- );
- });
-
- const settingsButton = container.querySelector('[aria-label="Settings"]');
- expect(settingsButton).not.toBeNull();
- await act(async () => {
- settingsButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
- });
- expect(navigated).toEqual(["/settings"]);
- // No popup menu opened along the way — this is a direct control, not
- // a trigger.
- expect(document.querySelector('[role="menu"]')).toBeNull();
-
- act(() => root.unmount());
- container.remove();
- });
-});
diff --git a/apps/web/test/skill-detail-page.test.tsx b/apps/web/test/skill-detail-page.test.tsx
deleted file mode 100644
index aab4e98e40..0000000000
--- a/apps/web/test/skill-detail-page.test.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-// The skill detail page at /skills/ (rescoped by):
-// the workbench-specific skill registry is gone, so the page renders what
-// the stock skill-asset routes carry — the display title, the updated note,
-// and an honest placeholder where the SKILL.md content, version history,
-// pins, and scope toggle used to live. Every case stubs `fetch` at that
-// stock seam (`/api/tenants/:id/assets?kind=skill&inherited=false`) — no
-// live server.
-
-import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-
-import { SkillDetailPage } from "../src/pages/skill-detail-page";
-
-const TENANT = "tnt_1";
-const NAME = "triage";
-
-const TRIAGE_ASSET = {
- id: "ast_1",
- tenantId: TENANT,
- kind: "skill",
- name: NAME,
- displayName: "Triage",
- creatorPrincipalId: "prn_1",
- createdAt: "2026-08-05T11:00:00.000Z",
- updatedAt: "2026-08-05T11:00:00.000Z",
-};
-
-const LIST_PATH = `/api/tenants/${TENANT}/assets?kind=skill&inherited=false`;
-
-type Route = { readonly status: number; readonly body: unknown };
-
-let routes: Record = {};
-let requested: { method: string; path: string }[] = [];
-let container: HTMLDivElement | null = null;
-let root: Root | null = null;
-const originalFetch = globalThis.fetch;
-
-function stubRoutes(next: Record