@shipfox/client-projects 0.2.0

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@shipfox/client-projects",
+  "license": "MIT",
+  "version": "0.2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
+    "directory": "libs/client/projects"
+  },
+  "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-definitions-dto": "2.0.0",
+    "@shipfox/api-projects-dto": "2.0.0",
+    "@shipfox/api-workflows-dto": "2.0.0",
+    "@shipfox/api-integration-core-dto": "3.0.0",
+    "@shipfox/client-agent": "0.2.0",
+    "@shipfox/client-auth": "0.2.0",
+    "@shipfox/client-shell": "0.2.0",
+    "@shipfox/client-integrations": "0.2.0",
+    "@shipfox/client-api": "0.2.0",
+    "@shipfox/client-ui": "0.2.0",
+    "@shipfox/client-workflows": "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",
+    "@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",
+    "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/swc": "1.2.5",
+    "@shipfox/client-test-setup": "0.0.2",
+    "@shipfox/vitest": "1.2.2",
+    "@shipfox/typescript": "1.1.6",
+    "@shipfox/ts-config": "1.3.8"
+  },
+  "scripts": {
+    "build": "shipfox-swc",
+    "check": "shipfox-biome-check",
+    "check:fix": "shipfox-biome-check --write",
+    "storybook": "storybook dev -p 6014",
+    "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/chrome.tsx

@@ -0,0 +1,26 @@
+import {useActiveWorkspace} from '@shipfox/client-shell/runtime';
+import {Outlet, useNavigate, useParams} from '@tanstack/react-router';
+import {useEffect} from 'react';
+import {ProjectCrumb} from '#components/project-crumb.js';
+import {useProjectQuery} from '#hooks/api/projects.js';
+
+export function ProjectBreadcrumb() {
+  const workspace = useActiveWorkspace();
+  const {pid} = useParams({strict: false}) as {pid?: string};
+  const project = useProjectQuery(pid).data;
+  return (
+    <ProjectCrumb workspaceId={workspace.id} projectId={project?.id} projectName={project?.name} />
+  );
+}
+
+export function ProjectLayoutGuard() {
+  const {wid, pid} = useParams({strict: false}) as {wid: string; pid: string};
+  const navigate = useNavigate();
+  const project = useProjectQuery(pid).data;
+  useEffect(() => {
+    if (project && project.workspace_id !== wid)
+      void navigate({to: '/workspaces/$wid', params: {wid}, replace: true});
+  }, [navigate, project, wid]);
+  if (project && project.workspace_id !== wid) return null;
+  return <Outlet />;
+}

package/src/components/model-provider-reminder-banner.tsx

@@ -0,0 +1,78 @@
+import {useModelProviderConfigsQuery} from '@shipfox/client-agent';
+import {
+  Alert,
+  AlertActions,
+  AlertClose,
+  AlertContent,
+  AlertDescription,
+  AlertTitle,
+} from '@shipfox/react-ui/alert';
+import {Button} from '@shipfox/react-ui/button';
+import {Link} from '@tanstack/react-router';
+import {useState} from 'react';
+
+const REMINDER_SESSION_KEY_PREFIX = 'shipfox.modelProviderReminder.dismissed.';
+
+export function ModelProviderReminderBanner({workspaceId}: {workspaceId: string}) {
+  const configsQuery = useModelProviderConfigsQuery(workspaceId);
+  const [dismissed, setDismissed] = useState(() => isReminderDismissed(workspaceId));
+  const configs = configsQuery.data?.configs;
+  const unconfigured =
+    Array.isArray(configs) &&
+    configs.length === 0 &&
+    configsQuery.data?.default_provider_id === null;
+
+  if (!unconfigured || dismissed) return null;
+
+  return (
+    <Alert
+      variant="info"
+      animated={false}
+      onOpenChange={(open) => {
+        if (!open) {
+          dismissReminder(workspaceId);
+          setDismissed(true);
+        }
+      }}
+    >
+      <AlertContent className="pr-28">
+        <AlertTitle>Finish setting up a model provider</AlertTitle>
+        <AlertDescription>
+          Add workspace credentials, or keep using the instance default.
+        </AlertDescription>
+        <AlertActions>
+          <Button asChild size="sm" variant="secondary">
+            <Link to="/workspaces/$wid/settings/agents" params={{wid: workspaceId}}>
+              Agents
+            </Link>
+          </Button>
+        </AlertActions>
+      </AlertContent>
+      <AlertClose />
+    </Alert>
+  );
+}
+
+function isReminderDismissed(workspaceId: string): boolean {
+  if (typeof window === 'undefined') return false;
+
+  try {
+    return window.sessionStorage.getItem(sessionKey(workspaceId)) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+function dismissReminder(workspaceId: string): void {
+  if (typeof window === 'undefined') return;
+
+  try {
+    window.sessionStorage.setItem(sessionKey(workspaceId), 'true');
+  } catch {
+    // Session persistence is best-effort; showing the banner again is benign.
+  }
+}
+
+function sessionKey(workspaceId: string): string {
+  return `${REMINDER_SESSION_KEY_PREFIX}${workspaceId}`;
+}

package/src/components/project-crumb.tsx

@@ -0,0 +1,70 @@
+import {Icon} from '@shipfox/react-ui/icon';
+import {Popover, PopoverContent, PopoverTrigger} from '@shipfox/react-ui/popover';
+import {Link} from '@tanstack/react-router';
+import {useState} from 'react';
+import {ProjectSwitcher} from './project-switcher.js';
+
+export interface ProjectCrumbProps {
+  workspaceId: string;
+  projectId?: string | undefined;
+  projectName?: string | undefined;
+}
+
+export function ProjectCrumb({workspaceId, projectId, projectName}: ProjectCrumbProps) {
+  const [open, setOpen] = useState(false);
+
+  if (projectId && projectName) {
+    return (
+      <div className="flex items-center">
+        <Link
+          to="/workspaces/$wid/projects/$pid"
+          params={{wid: workspaceId, pid: projectId}}
+          aria-current="page"
+          className="text-md font-medium text-foreground-neutral-base px-6 py-4 rounded-6 hover:bg-background-components-hover transition-colors max-w-[240px] truncate"
+        >
+          {projectName}
+        </Link>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              aria-label="Switch project"
+              aria-haspopup="listbox"
+              aria-expanded={open}
+              className="ml-2 grid place-items-center size-24 rounded-4 text-foreground-neutral-muted hover:bg-background-components-hover hover:text-foreground-neutral-base transition-colors"
+            >
+              <Icon name="arrowDownSLine" className="size-16" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[320px] p-0" align="start" sideOffset={8}>
+            <ProjectSwitcher
+              workspaceId={workspaceId}
+              activeProjectId={projectId}
+              onSelect={() => setOpen(false)}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label="Switch project"
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          className="flex items-center gap-2 text-md font-medium text-foreground-neutral-base px-6 py-4 rounded-6 hover:bg-background-components-hover transition-colors"
+        >
+          <span className="max-w-[240px] truncate">All projects</span>
+          <Icon name="arrowDownSLine" className="size-16 text-foreground-neutral-muted" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[320px] p-0" align="start" sideOffset={8}>
+        <ProjectSwitcher workspaceId={workspaceId} onSelect={() => setOpen(false)} />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/project-switcher.test.tsx

@@ -0,0 +1,91 @@
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
+import {fireEvent, render, screen} from '@testing-library/react';
+import {projectsQueryKeys} from '#hooks/api/projects.js';
+import {PROJECT_TEST_WID} from '#test/pages.js';
+import {ProjectSwitcher} from './project-switcher.js';
+
+const CREATE_PROJECT_LABEL_RE = /Create project/u;
+
+describe('ProjectSwitcher', () => {
+  test('keeps Create project pinned and keyboard-selectable under empty search', async () => {
+    const onSelect = vi.fn();
+    const projects = [projectDto({id: 'project-1', name: 'Platform'})];
+
+    renderProjectSwitcher({onSelect, projects});
+    await screen.findByRole('option', {name: 'Platform'});
+    const createOption = screen.getByRole('option', {name: CREATE_PROJECT_LABEL_RE});
+    const searchInput = screen.getByPlaceholderText('Search projects...');
+
+    expect(createOption.closest('[data-slot="command-list"]')).toBeNull();
+
+    fireEvent.change(searchInput, {target: {value: 'zzz-no-match'}});
+
+    expect(screen.getByText('No projects found.')).toBeVisible();
+    expect(screen.getByRole('option', {name: CREATE_PROJECT_LABEL_RE})).toBeVisible();
+
+    searchInput.focus();
+    fireEvent.keyDown(searchInput, {key: 'Enter', code: 'Enter'});
+
+    expect(await screen.findByTestId('create-project-route')).toBeInTheDocument();
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+});
+
+function renderProjectSwitcher({
+  onSelect,
+  projects,
+}: {
+  onSelect: () => void;
+  projects: ReturnType<typeof projectDto>[];
+}) {
+  const queryClient = new QueryClient({
+    defaultOptions: {queries: {retry: false, staleTime: Number.POSITIVE_INFINITY}},
+  });
+  queryClient.setQueryData(projectsQueryKeys.list(PROJECT_TEST_WID), {
+    pages: [{projects, next_cursor: null}],
+    pageParams: [undefined],
+  });
+  const rootRoute = createRootRoute({component: Outlet});
+  const workspaceRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/workspaces/$wid',
+    component: () => <ProjectSwitcher workspaceId={PROJECT_TEST_WID} onSelect={onSelect} />,
+  });
+  const createProjectRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/workspaces/$wid/projects/new',
+    component: () => <div data-testid="create-project-route">Create project route</div>,
+  });
+  const router = createRouter({
+    history: createMemoryHistory({initialEntries: [`/workspaces/${PROJECT_TEST_WID}`]}),
+    routeTree: rootRoute.addChildren([workspaceRoute, createProjectRoute]),
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>,
+  );
+}
+
+function projectDto({id, name}: {id: string; name: string}) {
+  return {
+    id,
+    workspace_id: PROJECT_TEST_WID,
+    name,
+    source: {
+      connection_id: '33333333-3333-4333-8333-333333333333',
+      external_repository_id: name.toLowerCase(),
+    },
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  };
+}

package/src/components/project-switcher.tsx

@@ -0,0 +1,127 @@
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@shipfox/react-ui/command';
+import {Icon} from '@shipfox/react-ui/icon';
+import {useNavigate} from '@tanstack/react-router';
+import {type KeyboardEvent, useEffect, useState} from 'react';
+import {useProjectsInfiniteQuery} from '#hooks/api/projects.js';
+
+export interface ProjectSwitcherProps {
+  workspaceId: string;
+  activeProjectId?: string | undefined;
+  onSelect?: () => void;
+}
+
+export function ProjectSwitcher({workspaceId, activeProjectId, onSelect}: ProjectSwitcherProps) {
+  const navigate = useNavigate();
+  const [searchValue, setSearchValue] = useState('');
+  const query = useProjectsInfiniteQuery(workspaceId);
+  const projects = query.data?.pages.flatMap((page) => page.projects) ?? [];
+
+  // Eagerly fetch additional pages once the popover opens; the switcher should
+  // show the full list, not just the first page.
+  useEffect(() => {
+    if (query.hasNextPage && !query.isFetchingNextPage) {
+      query.fetchNextPage();
+    }
+  }, [query.hasNextPage, query.isFetchingNextPage, query.fetchNextPage]);
+
+  const handleSelect = (projectId: string) => {
+    navigate({
+      to: '/workspaces/$wid/projects/$pid',
+      params: {wid: workspaceId, pid: projectId},
+    });
+    onSelect?.();
+  };
+
+  const handleSelectAll = () => {
+    navigate({to: '/workspaces/$wid', params: {wid: workspaceId}});
+    onSelect?.();
+  };
+
+  const handleCreate = () => {
+    navigate({to: '/workspaces/$wid/projects/new', params: {wid: workspaceId}});
+    onSelect?.();
+  };
+
+  const normalizedSearch = searchValue.trim().toLowerCase();
+  const hasSearchMatch =
+    normalizedSearch.length === 0 ||
+    'all projects'.includes(normalizedSearch) ||
+    projects.some((project) =>
+      [project.id, project.name].some((value) => value.toLowerCase().includes(normalizedSearch)),
+    );
+  const shouldCreateFromEmptySearch = !query.isLoading && !query.isError && !hasSearchMatch;
+
+  const handleCommandKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'Enter' || !shouldCreateFromEmptySearch) {
+      return;
+    }
+
+    event.preventDefault();
+    handleCreate();
+  };
+
+  return (
+    <Command onKeyDown={handleCommandKeyDown}>
+      <CommandInput
+        placeholder="Search projects..."
+        value={searchValue}
+        onValueChange={setSearchValue}
+      />
+      <CommandList>
+        {query.isError ? (
+          <CommandEmpty>Couldn&apos;t load projects.</CommandEmpty>
+        ) : query.isLoading ? (
+          <CommandEmpty>Loading projects...</CommandEmpty>
+        ) : projects.length === 0 ? (
+          <CommandEmpty>No projects yet.</CommandEmpty>
+        ) : (
+          <CommandEmpty>No projects found.</CommandEmpty>
+        )}
+        <CommandGroup>
+          <CommandItem value="__all" keywords={['all projects']} onSelect={handleSelectAll}>
+            <Icon
+              name="check"
+              className={`size-16 mr-8 ${activeProjectId ? 'opacity-0' : 'opacity-100'}`}
+            />
+            All projects
+          </CommandItem>
+        </CommandGroup>
+        {projects.length > 0 ? (
+          <CommandGroup heading="Projects">
+            {projects.map((project) => (
+              <CommandItem
+                key={project.id}
+                value={project.id}
+                keywords={[project.name]}
+                onSelect={() => handleSelect(project.id)}
+              >
+                <Icon
+                  name="check"
+                  className={`size-16 mr-8 ${
+                    activeProjectId === project.id ? 'opacity-100' : 'opacity-0'
+                  }`}
+                />
+                {project.name}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        ) : null}
+      </CommandList>
+      <CommandSeparator />
+      <CommandGroup forceMount>
+        <CommandItem value="__create" onSelect={handleCreate} forceMount>
+          <Icon name="addLine" className="size-16" />
+          Create project
+        </CommandItem>
+      </CommandGroup>
+    </Command>
+  );
+}

package/src/components/source-strip.tsx

@@ -0,0 +1,91 @@
+import type {DefinitionSyncSummaryDto} from '@shipfox/api-definitions-dto';
+import {useActiveWorkspace} from '@shipfox/client-auth';
+import {useSourceConnectionsQuery} from '@shipfox/client-integrations';
+import {StatusBadge} from '@shipfox/react-ui/badge';
+import {Icon, type IconName} from '@shipfox/react-ui/icon';
+import {Skeleton} from '@shipfox/react-ui/skeleton';
+import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
+import {Code, Text} from '@shipfox/react-ui/typography';
+
+/**
+ * We cannot cheaply resolve `external_repository_id` → `owner/repo`
+ * (no by-id endpoint; `listRepositories` is paginated by connection).
+ * The strip surfaces the raw id as a `<Code>` chip with a tooltip carrying the
+ * full string.
+ */
+export function SourceStrip({
+  connectionId,
+  externalRepositoryId,
+  sync,
+  isPending,
+}: {
+  connectionId: string;
+  externalRepositoryId: string;
+  sync: DefinitionSyncSummaryDto | null | undefined;
+  isPending: boolean;
+}) {
+  const workspace = useActiveWorkspace();
+  const connectionsQuery = useSourceConnectionsQuery(workspace.id);
+  const connection = connectionsQuery.data?.connections.find((c) => c.id === connectionId);
+
+  return (
+    <section
+      className="flex flex-col gap-8 rounded-8 border border-border-neutral-base bg-background-neutral-base px-14 py-10 sm:flex-row sm:items-center sm:justify-between"
+      aria-label="Project source"
+    >
+      <div className="flex min-w-0 items-center gap-10">
+        <Icon name={providerIconName(connection?.provider)} className="size-20 shrink-0" />
+        <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center sm:gap-10">
+          {connectionsQuery.isPending ? (
+            <Skeleton className="h-16 w-160" />
+          ) : (
+            <Text size="sm" bold className="truncate">
+              {connection?.display_name ?? 'Connected source'}
+            </Text>
+          )}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Code variant="label" className="truncate text-foreground-neutral-muted">
+                {externalRepositoryId}
+              </Code>
+            </TooltipTrigger>
+            <TooltipContent>{externalRepositoryId}</TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+      <div className="shrink-0">
+        <SyncBadge sync={sync} isPending={isPending} />
+      </div>
+    </section>
+  );
+}
+
+function providerIconName(provider: string | undefined): IconName {
+  if (provider === 'github') return 'github' as IconName;
+  return 'componentLine' as IconName;
+}
+
+function SyncBadge({
+  sync,
+  isPending,
+}: {
+  sync: DefinitionSyncSummaryDto | null | undefined;
+  isPending: boolean;
+}) {
+  if (isPending) return <StatusBadge variant="neutral">Loading</StatusBadge>;
+  if (sync === undefined) return <StatusBadge variant="neutral">Unavailable</StatusBadge>;
+  if (sync === null) return <StatusBadge variant="neutral">No sync</StatusBadge>;
+
+  const variantByStatus = {
+    pending: 'neutral',
+    syncing: 'info',
+    succeeded: 'success',
+    failed: 'error',
+  } as const;
+
+  return (
+    <StatusBadge variant={variantByStatus[sync.status as keyof typeof variantByStatus]}>
+      {sync.status}
+    </StatusBadge>
+  );
+}