@shipfox/client-auth 0.2.0

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@shipfox/client-auth",
+  "license": "MIT",
+  "version": "0.2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
+    "directory": "libs/client/auth"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "imports": {
+    "#*": {
+      "types": "./src/*",
+      "workspace-source": "./src/*",
+      "development": "./src/*",
+      "default": "./dist/*"
+    },
+    "#test/*": "./test/*"
+  },
+  "exports": {
+    ".": {
+      "development": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./feature": {
+      "development": {
+        "types": "./src/feature.ts",
+        "default": "./src/feature.ts"
+      },
+      "default": {
+        "types": "./dist/feature.d.ts",
+        "default": "./dist/feature.js"
+      }
+    },
+    "./routes/*": {
+      "development": {
+        "types": "./src/routes/*.tsx",
+        "default": "./src/routes/*.tsx"
+      },
+      "default": {
+        "types": "./dist/routes/*.d.ts",
+        "default": "./dist/routes/*.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@swc/helpers": "^0.5.17",
+    "@tanstack/react-form": "^1.32.0",
+    "@shipfox/api-auth-dto": "2.0.0",
+    "@shipfox/api-workspaces-dto": "2.0.0",
+    "@shipfox/client-shell": "0.2.0",
+    "@shipfox/client-api": "0.2.0",
+    "@shipfox/client-ui": "0.2.0",
+    "@shipfox/react-ui": "0.3.1"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-router": "^1.170.16",
+    "jotai": "^2.19.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@argos-ci/cli": "^5.0.0",
+    "@argos-ci/storybook": "^6.0.0",
+    "@faker-js/faker": "^10.4.0",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-router": "^1.170.16",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^6.0.0",
+    "@vitest/browser-playwright": "^4.1.5",
+    "fishery": "^2.4.0",
+    "jotai": "^2.19.1",
+    "jsdom": "^29.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^10.0.0",
+    "storybook-addon-pseudo-states": "^10.0.0",
+    "tailwindcss": "^4.1.13",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.5",
+    "@shipfox/biome": "1.8.1",
+    "@shipfox/client-test-setup": "0.0.2",
+    "@shipfox/ts-config": "1.3.8",
+    "@shipfox/typescript": "1.1.6",
+    "@shipfox/swc": "1.2.5",
+    "@shipfox/vitest": "1.2.2"
+  },
+  "scripts": {
+    "build": "shipfox-swc",
+    "check": "shipfox-biome-check",
+    "check:fix": "shipfox-biome-check --write",
+    "storybook": "storybook dev -p 6009",
+    "storybook:build": "storybook build -o storybook-static",
+    "test": "shipfox-vitest-run",
+    "test:watch": "shipfox-vitest-watch",
+    "type": "shipfox-tsc-check",
+    "type:emit": "shipfox-tsc-emit"
+  }
+}

package/src/components/auth-guard.tsx

@@ -0,0 +1,58 @@
+import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {Navigate, useRouter, useSearch} from '@tanstack/react-router';
+import {type PropsWithChildren, useEffect} from 'react';
+import {useAuthState} from '#hooks/use-auth-state.js';
+import {WorkspaceOnboardingPage} from '#pages/workspace-onboarding-page.js';
+import {sanitizeRedirectPath} from './redirect-target.js';
+
+export function AuthGuard({children}: PropsWithChildren) {
+  const auth = useAuthState();
+
+  if (auth.isLoading) {
+    return <FullPageLoader />;
+  }
+
+  if (!auth.isAuthenticated) {
+    return <Navigate to="/auth/login" replace />;
+  }
+
+  return children;
+}
+
+export function GuestGuard({children}: PropsWithChildren) {
+  const auth = useAuthState();
+  const search = useSearch({strict: false}) as {redirect?: unknown};
+  const router = useRouter();
+  const target = sanitizeRedirectPath(search.redirect);
+
+  useEffect(() => {
+    if (auth.isAuthenticated && target !== undefined) {
+      // Bypass the typed route matcher — `target` is an arbitrary same-origin
+      // path resolved at runtime, so we let the URL change drive route resolution.
+      router.history.replace(target);
+    }
+  }, [auth.isAuthenticated, target, router]);
+
+  if (auth.isLoading) {
+    return <FullPageLoader />;
+  }
+
+  if (auth.isAuthenticated) {
+    if (target !== undefined) {
+      return <FullPageLoader />;
+    }
+    return <Navigate to="/" replace />;
+  }
+
+  return children;
+}
+
+export function WorkspaceGuard({children}: PropsWithChildren) {
+  const auth = useAuthState();
+
+  if (auth.isAuthenticated && !auth.hasWorkspace) {
+    return <WorkspaceOnboardingPage />;
+  }
+
+  return children;
+}

package/src/components/auth-provider.test.tsx

@@ -0,0 +1,164 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {render, screen, waitFor} from '@testing-library/react';
+import {useEffect, useRef} from 'react';
+import {useLogoutAuth} from '#hooks/api/logout-auth.js';
+import {useRefreshAuth} from '#hooks/api/refresh-auth.js';
+import {useAuthState} from '#hooks/use-auth-state.js';
+import {AuthProvider} from './auth-provider.js';
+
+const user = {
+  id: '11111111-1111-4111-8111-111111111111',
+  email: 'noe@example.com',
+  name: 'Noe',
+  email_verified_at: '2026-04-27T00:00:00.000Z',
+  status: 'active' as const,
+  created_at: '2026-04-27T00:00:00.000Z',
+  updated_at: '2026-04-27T00:00:00.000Z',
+};
+
+function jsonResponse(body: unknown, init: ResponseInit = {}): Response {
+  return new Response(JSON.stringify(body), {
+    headers: {'content-type': 'application/json'},
+    status: 200,
+    ...init,
+  });
+}
+
+function StatusProbe() {
+  const auth = useAuthState();
+  const logout = useLogoutAuth();
+
+  return (
+    <div>
+      <span data-testid="status">{auth.status}</span>
+      <span data-testid="email">{auth.user?.email ?? 'none'}</span>
+      <button type="button" onClick={() => void logout.mutateAsync()}>
+        Logout
+      </button>
+    </div>
+  );
+}
+
+describe('AuthProvider', () => {
+  beforeEach(() => {
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: fetch,
+      getAccessToken: undefined,
+      refreshAccessToken: undefined,
+    });
+  });
+
+  test('boots from a successful refresh', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(jsonResponse({token: 'access-token', user}));
+    configureApiClient({fetchImpl});
+
+    render(
+      <AuthProvider>
+        <StatusProbe />
+      </AuthProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId('status')).toHaveTextContent('authenticated'));
+    expect(screen.getByTestId('email')).toHaveTextContent('noe@example.com');
+  });
+
+  test('treats refresh 401 as a guest session', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValue(
+        jsonResponse({code: 'unauthorized', message: 'Unauthorized'}, {status: 401}),
+      );
+    configureApiClient({fetchImpl});
+
+    render(
+      <AuthProvider>
+        <StatusProbe />
+      </AuthProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId('status')).toHaveTextContent('guest'));
+    expect(screen.getByTestId('email')).toHaveTextContent('none');
+  });
+
+  test('keeps the current session when refresh fails with a server error', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse({token: 'access-token', user}))
+      .mockResolvedValueOnce(
+        jsonResponse({code: 'internal-error', message: 'Internal Server Error'}, {status: 500}),
+      );
+    configureApiClient({fetchImpl});
+    const onDone = vi.fn();
+
+    function RefreshAfterBootProbe() {
+      const auth = useAuthState();
+      const refresh = useRefreshAuth();
+      const didRefresh = useRef(false);
+
+      useEffect(() => {
+        if (auth.status !== 'authenticated' || didRefresh.current) return;
+        didRefresh.current = true;
+        void refresh().catch(onDone);
+      }, [auth.status, refresh]);
+
+      return <StatusProbe />;
+    }
+
+    render(
+      <AuthProvider>
+        <RefreshAfterBootProbe />
+      </AuthProvider>,
+    );
+
+    await waitFor(() => expect(onDone).toHaveBeenCalledTimes(1));
+    expect(screen.getByTestId('status')).toHaveTextContent('authenticated');
+    expect(screen.getByTestId('email')).toHaveTextContent('noe@example.com');
+  });
+
+  test('deduplicates concurrent refresh calls', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockImplementation(() => Promise.resolve(jsonResponse({token: 'access-token', user})));
+    configureApiClient({fetchImpl});
+    const onDone = vi.fn();
+
+    function RefreshTwiceProbe() {
+      const refresh = useRefreshAuth();
+
+      useEffect(() => {
+        void Promise.all([refresh(), refresh()]).then(onDone);
+      }, [refresh]);
+
+      return <StatusProbe />;
+    }
+
+    render(
+      <AuthProvider>
+        <RefreshTwiceProbe />
+      </AuthProvider>,
+    );
+
+    await waitFor(() => expect(onDone).toHaveBeenCalledTimes(1));
+    expect(fetchImpl).toHaveBeenCalledTimes(2);
+  });
+
+  test('logout clears local state even when the API call fails', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse({token: 'access-token', user}))
+      .mockRejectedValueOnce(new Error('offline'));
+    configureApiClient({fetchImpl});
+
+    render(
+      <AuthProvider>
+        <StatusProbe />
+      </AuthProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId('status')).toHaveTextContent('authenticated'));
+    screen.getByRole('button', {name: 'Logout'}).click();
+
+    await waitFor(() => expect(screen.getByTestId('status')).toHaveTextContent('guest'));
+  });
+});

package/src/components/auth-provider.tsx

@@ -0,0 +1,24 @@
+import {AuthRuntime} from '@shipfox/client-shell/runtime';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {Provider as JotaiProvider} from 'jotai';
+import {type PropsWithChildren, useState} from 'react';
+
+export interface AuthProviderProps extends PropsWithChildren {
+  queryClient?: QueryClient;
+}
+
+/**
+ * Backwards-compatible provider for applications that have not adopted
+ * `composeClientApp` yet. The shell owns the runtime behavior in both paths.
+ */
+export function AuthProvider({children, queryClient}: AuthProviderProps) {
+  const [fallbackQueryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient ?? fallbackQueryClient}>
+      <JotaiProvider>
+        <AuthRuntime>{children}</AuthRuntime>
+      </JotaiProvider>
+    </QueryClientProvider>
+  );
+}

package/src/components/auth-shell.tsx

@@ -0,0 +1,53 @@
+import {Icon} from '@shipfox/react-ui/icon';
+import {Header, Text} from '@shipfox/react-ui/typography';
+import type {PropsWithChildren, ReactNode} from 'react';
+
+interface AuthShellProps {
+  title: string;
+  description: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function AuthShell({title, description, children, className}: AuthShellProps) {
+  return (
+    <main className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background-subtle-base px-24 py-32 max-[520px]:items-start max-[520px]:px-20 max-[520px]:pb-32 max-[520px]:pt-56">
+      <div
+        className="pointer-events-none absolute left-1/2 top-0 h-[380px] w-full max-w-[880px] -translate-x-1/2 -translate-y-[120px] opacity-55 max-[520px]:-translate-y-[170px] max-[520px]:opacity-35"
+        aria-hidden="true"
+        style={{
+          maskImage:
+            'radial-gradient(ellipse 85% 100% at 50% 0%, #000 0%, #000 24%, transparent 78%)',
+          WebkitMaskImage:
+            'radial-gradient(ellipse 85% 100% at 50% 0%, #000 0%, #000 24%, transparent 78%)',
+        }}
+      >
+        <div className="h-full w-full bg-[radial-gradient(circle,rgba(230,62,0,0.48)_1.6px,transparent_1.8px)] bg-[length:44px_44px]" />
+      </div>
+
+      <section
+        className={className ?? 'relative flex w-full max-w-[384px] flex-col items-stretch gap-28'}
+        aria-labelledby="auth-title"
+      >
+        <div className="flex flex-col items-center gap-16">
+          <div className="flex size-64 items-center justify-center rounded-12 border border-border-neutral-base bg-background-neutral-base p-10 shadow-button-neutral">
+            <Icon name="shipfox" className="size-42 text-background-highlight-interactive" />
+          </div>
+          <div className="flex min-w-[128px] flex-col items-center gap-4 text-center">
+            <Header id="auth-title" variant="h1">
+              {title}
+            </Header>
+            <Text size="sm" className="text-foreground-neutral-subtle">
+              {description}
+            </Text>
+          </div>
+        </div>
+        {children}
+      </section>
+    </main>
+  );
+}
+
+export function AuthActions({children}: PropsWithChildren) {
+  return <div className="flex flex-col gap-20">{children}</div>;
+}

package/src/components/redirect-target.test.ts

@@ -0,0 +1,60 @@
+import {sanitizeRedirectPath} from './redirect-target.js';
+
+describe('sanitizeRedirectPath', () => {
+  describe.each([
+    ['simple absolute path', '/foo'],
+    ['nested workspace path', '/workspaces/abc/projects/xyz'],
+    ['path with search', '/foo?bar=1'],
+    ['path with hash', '/foo#hash'],
+    ['path with search and hash', '/workspaces/abc?tab=runs#header'],
+  ])('accepts %s', (_label, input) => {
+    test('returns the original string', () => {
+      const result = sanitizeRedirectPath(input);
+
+      expect(result).toBe(input);
+    });
+  });
+
+  describe.each([
+    ['undefined', undefined],
+    ['null', null],
+    ['number', 42],
+    ['empty string', ''],
+    ['no leading slash', 'foo'],
+    ['protocol-relative URL', '//evil.com'],
+    ['triple-slash URL', '///evil.com'],
+    ['absolute https URL', 'https://evil.com'],
+    ['javascript scheme', 'javascript:alert(1)'],
+    ['plain /auth/login', '/auth/login'],
+    ['/auth bare', '/auth'],
+    ['/auth/reset with token', '/auth/reset?token=x'],
+    ['/auth with query bypass', '/auth?token=x'],
+    ['/auth with fragment bypass', '/auth#foo'],
+  ])('rejects %s', (_label, input) => {
+    test('returns undefined', () => {
+      const result = sanitizeRedirectPath(input);
+
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe('decode-then-check defenses', () => {
+    test('rejects percent-encoded /auth/* path', () => {
+      const result = sanitizeRedirectPath('/%61uth/login');
+
+      expect(result).toBeUndefined();
+    });
+
+    test('rejects percent-encoded protocol-relative URL', () => {
+      const result = sanitizeRedirectPath('/%2fevil.com');
+
+      expect(result).toBeUndefined();
+    });
+
+    test('rejects malformed percent-encoded input', () => {
+      const result = sanitizeRedirectPath('/%E0%80%80');
+
+      expect(result).toBeUndefined();
+    });
+  });
+});

package/src/components/redirect-target.ts

@@ -0,0 +1,21 @@
+const SEARCH_OR_HASH_RE = /[?#]/u;
+
+// Returns the input string only if it is a same-origin internal path safe to
+// navigate to after authentication. We decode before checking so percent-encoded
+// variants like `/%61uth/login` cannot bypass the `/auth/*` rejection.
+export function sanitizeRedirectPath(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined;
+  let decoded: string;
+  try {
+    decoded = decodeURIComponent(value);
+  } catch {
+    return undefined;
+  }
+  if (!decoded.startsWith('/')) return undefined;
+  if (decoded.startsWith('//')) return undefined;
+  // Strip search/hash before the /auth check so /auth?token=x and /auth#x
+  // cannot bypass the prefix match.
+  const pathOnly = decoded.split(SEARCH_OR_HASH_RE, 1)[0] ?? decoded;
+  if (pathOnly === '/auth' || pathOnly.startsWith('/auth/')) return undefined;
+  return value;
+}

package/src/components/workspace-crumb.tsx

@@ -0,0 +1,2 @@
+export type {WorkspaceCrumbProps} from '@shipfox/client-shell/runtime';
+export {WorkspaceCrumb} from '@shipfox/client-shell/runtime';

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

@@ -0,0 +1,169 @@
+import {argosScreenshot} from '@argos-ci/storybook/vitest';
+import type {Meta, StoryObj} from '@storybook/react';
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
+import {createStore, Provider as JotaiProvider} from 'jotai';
+import {useMemo} from 'react';
+import {expect, userEvent, waitFor, within} from 'storybook/test';
+import {authStateAtom, type Workspace} from '#state/auth.js';
+import {WorkspaceSwitcher} from './workspace-switcher.js';
+
+const ACTIVE_WORKSPACE_ID = '00000000-0000-4000-8000-000000000001';
+const WORKSPACES = [
+  workspace(ACTIVE_WORKSPACE_ID, 'Alpha Workspace', 1),
+  workspace('00000000-0000-4000-8000-000000000002', 'Beta Workspace', 2),
+  workspace('00000000-0000-4000-8000-000000000003', 'Gamma Workspace', 3),
+  workspace('00000000-0000-4000-8000-000000000004', 'Delta Workspace', 4),
+];
+const SINGLE_WORKSPACE = [workspace(ACTIVE_WORKSPACE_ID, 'Alpha Workspace', 1)];
+const MANY_WORKSPACES = Array.from({length: 20}, (_, index) =>
+  workspace(
+    `00000000-0000-4000-8000-${String(index + 1).padStart(12, '0')}`,
+    `Workspace ${String(index + 1).padStart(2, '0')}`,
+    index + 1,
+  ),
+);
+
+interface WorkspaceSwitcherStoryProps {
+  activeWorkspaceId: string;
+  workspaces: Workspace[];
+}
+
+function workspace(id: string, name: string, index: number): Workspace {
+  return {
+    id,
+    name,
+    membershipId: `10000000-0000-4000-8000-${String(index).padStart(12, '0')}`,
+  };
+}
+
+function WorkspaceSwitcherStory({activeWorkspaceId, workspaces}: WorkspaceSwitcherStoryProps) {
+  const store = useMemo(() => {
+    const nextStore = createStore();
+    nextStore.set(authStateAtom, {status: 'authenticated', workspaces});
+    return nextStore;
+  }, [workspaces]);
+  const router = useMemo(() => {
+    const rootRoute = createRootRoute({component: Outlet});
+    const workspaceRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/workspaces/$wid',
+      component: () => (
+        <JotaiProvider store={store}>
+          <div className="min-h-screen bg-background-neutral-base p-24">
+            <div className="w-[280px] rounded-10 bg-background-neutral-overlay shadow-tooltip">
+              <WorkspaceSwitcher activeWorkspaceId={activeWorkspaceId} />
+            </div>
+          </div>
+        </JotaiProvider>
+      ),
+    });
+    const setupRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/setup/workspaces/new',
+      component: () => <div />,
+    });
+
+    return createRouter({
+      routeTree: rootRoute.addChildren([workspaceRoute, setupRoute]),
+      history: createMemoryHistory({initialEntries: [`/workspaces/${activeWorkspaceId}`]}),
+    });
+  }, [activeWorkspaceId, store]);
+
+  return <RouterProvider router={router} />;
+}
+
+const meta = {
+  title: 'Auth/WorkspaceSwitcher',
+  component: WorkspaceSwitcherStory,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    activeWorkspaceId: ACTIVE_WORKSPACE_ID,
+    workspaces: WORKSPACES,
+  },
+} satisfies Meta<typeof WorkspaceSwitcherStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+type WorkspaceSwitcherStoryContext = Parameters<NonNullable<Story['play']>>[0];
+
+async function captureSwitcher(ctx: WorkspaceSwitcherStoryContext, screenshotName: string) {
+  const canvas = within(ctx.canvasElement);
+  await canvas.findByRole('option', {name: 'Create workspace'});
+  await argosScreenshot(ctx, screenshotName);
+}
+
+export const Playground: Story = {
+  play: async (ctx) => {
+    await captureSwitcher(ctx, 'Workspace Switcher Open');
+  },
+};
+
+export const SingleWithCreate: Story = {
+  args: {
+    workspaces: SINGLE_WORKSPACE,
+  },
+  play: async (ctx) => {
+    await captureSwitcher(ctx, 'Workspace Switcher Single With Create');
+  },
+};
+
+export const EmptySearch: Story = {
+  play: async (ctx) => {
+    const canvas = within(ctx.canvasElement);
+
+    await userEvent.type(
+      await canvas.findByPlaceholderText('Search workspaces...'),
+      'zzz-no-match',
+    );
+
+    await canvas.findByText('No workspaces found.');
+    await canvas.findByRole('option', {name: 'Create workspace'});
+    await argosScreenshot(ctx, 'Workspace Switcher Empty Search');
+  },
+};
+
+export const ManyOverflow: Story = {
+  args: {
+    activeWorkspaceId: MANY_WORKSPACES[0]?.id ?? ACTIVE_WORKSPACE_ID,
+    workspaces: MANY_WORKSPACES,
+  },
+  play: async (ctx) => {
+    await captureSwitcher(ctx, 'Workspace Switcher Many Overflow');
+  },
+};
+
+export const ManyOverflowScrolled: Story = {
+  args: {
+    activeWorkspaceId: MANY_WORKSPACES[0]?.id ?? ACTIVE_WORKSPACE_ID,
+    workspaces: MANY_WORKSPACES,
+  },
+  play: async (ctx) => {
+    const canvas = within(ctx.canvasElement);
+
+    await canvas.findByRole('option', {name: 'Workspace 01'});
+    await canvas.findByRole('option', {name: 'Create workspace'});
+
+    await canvas.findByRole('option', {name: 'Workspace 20'});
+    const firstOption = canvas.getAllByRole('option')[0];
+    let scrollContainer = firstOption?.parentElement ?? null;
+    while (scrollContainer && scrollContainer.scrollHeight <= scrollContainer.clientHeight) {
+      scrollContainer = scrollContainer.parentElement;
+    }
+    if (!scrollContainer) {
+      throw new Error('Workspace switcher scroll container was not found');
+    }
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+
+    await waitFor(() => expect(canvas.getByRole('option', {name: 'Workspace 20'})).toBeVisible());
+    await argosScreenshot(ctx, 'Workspace Switcher Many Overflow Scrolled');
+  },
+};