From 03817dbb1d022961960856deb1396f62c14b6976 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@users.noreply.github.com>
Date: Wed, 18 Feb 2026 14:12:16 +0000
Subject: [PATCH] Fix project form dropdowns without changing project routes

---
 apps/web/src/App.tsx                          |  16 --
 .../src/components/project/ProjectForm.tsx    | 172 +++++++++++++++---
 apps/web/src/pages/CreateWorkspace.tsx        |  21 +--
 apps/web/tests/unit/app-routes.test.tsx       |  74 ++++++++
 .../unit/pages/create-workspace.test.tsx      |  17 +-
 apps/web/tests/unit/pages/projects.test.tsx   |  26 ++-
 ...ect-creation-dropdowns-and-navbar-links.md |   6 +-
 ...18-project-form-dropdown-regression-fix.md |  47 +++++
 8 files changed, 304 insertions(+), 75 deletions(-)
 create mode 100644 apps/web/tests/unit/app-routes.test.tsx
 create mode 100644 tasks/backlog/2026-02-18-project-form-dropdown-regression-fix.md

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 7982ff3..c2f4c0d 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -33,14 +33,6 @@ export default function App() {
               </ProtectedRoute>
             }
           />
-          <Route
-            path="/projects"
-            element={
-              <ProtectedRoute>
-                <Dashboard />
-              </ProtectedRoute>
-            }
-          />
           <Route
             path="/settings"
             element={
@@ -57,14 +49,6 @@ export default function App() {
               </ProtectedRoute>
             }
           />
-          <Route
-            path="/projects/new"
-            element={
-              <ProtectedRoute>
-                <CreateWorkspace mode="project" />
-              </ProtectedRoute>
-            }
-          />
           <Route
             path="/workspaces/:id"
             element={
diff --git a/apps/web/src/components/project/ProjectForm.tsx b/apps/web/src/components/project/ProjectForm.tsx
index e043cdf..c83f499 100644
--- a/apps/web/src/components/project/ProjectForm.tsx
+++ b/apps/web/src/components/project/ProjectForm.tsx
@@ -1,6 +1,8 @@
-import { useMemo, useState, type FormEvent } from 'react';
+import { useCallback, useMemo, useState, type FormEvent } from 'react';
 import type { GitHubInstallation } from '@simple-agent-manager/shared';
-import { Button, Input } from '@simple-agent-manager/ui';
+import { Button, Input, Spinner } from '@simple-agent-manager/ui';
+import { listBranches } from '../../lib/api';
+import { RepoSelector } from '../RepoSelector';
 
 export interface ProjectFormValues {
   name: string;
@@ -20,6 +22,18 @@ interface ProjectFormProps {
   submitLabel?: string;
 }
 
+function normalizeRepository(value: string): string {
+  let repository = value.trim();
+
+  if (repository.startsWith('https://github.com/')) {
+    repository = repository.replace('https://github.com/', '');
+  } else if (repository.startsWith('git@github.com:')) {
+    repository = repository.replace('git@github.com:', '');
+  }
+
+  return repository.replace(/\.git$/, '');
+}
+
 export function ProjectForm({
   mode,
   installations,
@@ -43,14 +57,75 @@ export function ProjectForm({
     repository: initialValues?.repository ?? '',
     defaultBranch: initialValues?.defaultBranch ?? 'main',
   });
+  const [branches, setBranches] = useState<Array<{ name: string }>>([]);
+  const [branchesLoading, setBranchesLoading] = useState(false);
+  const [branchesError, setBranchesError] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const isEditMode = mode === 'edit';
 
+  const fetchBranches = useCallback(async (repository: string, installationId: string) => {
+    setBranchesLoading(true);
+    setBranches([]);
+    setBranchesError(null);
+
+    try {
+      const result = await listBranches(repository, installationId || undefined);
+      setBranches(result);
+
+      if (result.length === 0) {
+        setBranches([{ name: 'main' }, { name: 'master' }]);
+        setBranchesError('Could not fetch branches, showing common defaults');
+      }
+    } catch {
+      setBranches([{ name: 'main' }, { name: 'master' }, { name: 'develop' }]);
+      setBranchesError('Unable to fetch branches. Common branch names provided.');
+    } finally {
+      setBranchesLoading(false);
+    }
+  }, []);
+
   const handleChange = (field: keyof ProjectFormValues, value: string) => {
     setValues((current) => ({ ...current, [field]: value }));
   };
 
+  const handleRepositoryChange = (value: string) => {
+    setBranches([]);
+    setBranchesError(null);
+    handleChange('repository', value);
+  };
+
+  const handleRepoSelect = useCallback(
+    (repo: { fullName: string; defaultBranch: string } | null) => {
+      if (!repo) {
+        setBranches([]);
+        setBranchesError(null);
+        return;
+      }
+
+      setValues((current) => ({ ...current, defaultBranch: repo.defaultBranch }));
+      void fetchBranches(repo.fullName, values.installationId);
+    },
+    [fetchBranches, values.installationId]
+  );
+
+  const handleInstallationChange = (installationId: string) => {
+    handleChange('installationId', installationId);
+
+    if (isEditMode) {
+      return;
+    }
+
+    const normalizedRepository = normalizeRepository(values.repository);
+    if (!normalizedRepository || !normalizedRepository.includes('/')) {
+      setBranches([]);
+      setBranchesError(null);
+      return;
+    }
+
+    void fetchBranches(normalizedRepository, installationId);
+  };
+
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError(null);
@@ -79,11 +154,21 @@ export function ProjectForm({
       name: values.name.trim(),
       description: values.description.trim(),
       installationId: values.installationId,
-      repository: values.repository.trim(),
+      repository: normalizeRepository(values.repository),
       defaultBranch: values.defaultBranch.trim(),
     });
   };
 
+  const selectStyle = {
+    width: '100%',
+    borderRadius: 'var(--sam-radius-md)',
+    border: '1px solid var(--sam-color-border-default)',
+    background: 'var(--sam-color-bg-surface)',
+    color: 'var(--sam-color-fg-primary)',
+    padding: '0.625rem 0.75rem',
+    minHeight: '2.75rem',
+  };
+
   return (
     <form onSubmit={handleSubmit} style={{ display: 'grid', gap: 'var(--sam-space-3)' }}>
       <label style={{ display: 'grid', gap: '0.375rem' }}>
@@ -119,17 +204,9 @@ export function ProjectForm({
         <span style={{ fontSize: '0.875rem', color: 'var(--sam-color-fg-muted)' }}>Installation</span>
         <select
           value={values.installationId}
-          onChange={(event) => handleChange('installationId', event.currentTarget.value)}
+          onChange={(event) => handleInstallationChange(event.currentTarget.value)}
           disabled={submitting || isEditMode}
-          style={{
-            width: '100%',
-            borderRadius: 'var(--sam-radius-md)',
-            border: '1px solid var(--sam-color-border-default)',
-            background: 'var(--sam-color-bg-surface)',
-            color: 'var(--sam-color-fg-primary)',
-            padding: '0.625rem 0.75rem',
-            minHeight: '2.75rem',
-          }}
+          style={selectStyle}
         >
           {installations.length === 0 ? (
             <option value="">No installations</option>
@@ -143,24 +220,65 @@ export function ProjectForm({
         </select>
       </label>
 
-      <label style={{ display: 'grid', gap: '0.375rem' }}>
+      <label htmlFor="project-repository" style={{ display: 'grid', gap: '0.375rem' }}>
         <span style={{ fontSize: '0.875rem', color: 'var(--sam-color-fg-muted)' }}>Repository</span>
-        <Input
-          value={values.repository}
-          onChange={(event) => handleChange('repository', event.currentTarget.value)}
-          placeholder="owner/repo"
-          disabled={submitting || isEditMode}
-        />
+        {isEditMode ? (
+          <Input
+            id="project-repository"
+            value={values.repository}
+            onChange={(event) => handleChange('repository', event.currentTarget.value)}
+            placeholder="owner/repo"
+            disabled
+          />
+        ) : (
+          <RepoSelector
+            id="project-repository"
+            value={values.repository}
+            onChange={handleRepositoryChange}
+            onRepoSelect={handleRepoSelect}
+            disabled={submitting}
+            required
+          />
+        )}
       </label>
 
-      <label style={{ display: 'grid', gap: '0.375rem' }}>
+      <label htmlFor="project-default-branch" style={{ display: 'grid', gap: '0.375rem' }}>
         <span style={{ fontSize: '0.875rem', color: 'var(--sam-color-fg-muted)' }}>Default branch</span>
-        <Input
-          value={values.defaultBranch}
-          onChange={(event) => handleChange('defaultBranch', event.currentTarget.value)}
-          placeholder="main"
-          disabled={submitting}
-        />
+        <div style={{ position: 'relative' }}>
+          {!isEditMode && branches.length > 0 ? (
+            <select
+              id="project-default-branch"
+              value={values.defaultBranch}
+              onChange={(event) => handleChange('defaultBranch', event.currentTarget.value)}
+              disabled={submitting}
+              style={selectStyle}
+            >
+              {branches.map((branch) => (
+                <option key={branch.name} value={branch.name}>
+                  {branch.name}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <Input
+              id="project-default-branch"
+              value={values.defaultBranch}
+              onChange={(event) => handleChange('defaultBranch', event.currentTarget.value)}
+              placeholder="main"
+              disabled={submitting}
+            />
+          )}
+          {!isEditMode && branchesLoading && (
+            <div style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)' }}>
+              <Spinner size="sm" />
+            </div>
+          )}
+        </div>
+        {!isEditMode && branchesError && (
+          <span style={{ fontSize: '0.75rem', color: 'var(--sam-color-fg-muted)' }}>
+            {branchesError}
+          </span>
+        )}
       </label>
 
       {error && (
diff --git a/apps/web/src/pages/CreateWorkspace.tsx b/apps/web/src/pages/CreateWorkspace.tsx
index 39d05b0..e45cbe1 100644
--- a/apps/web/src/pages/CreateWorkspace.tsx
+++ b/apps/web/src/pages/CreateWorkspace.tsx
@@ -97,17 +97,10 @@ type LocationState = {
   nodeId?: string;
 };
 
-interface CreateWorkspaceProps {
-  mode?: 'workspace' | 'project';
-}
-
-export function CreateWorkspace({ mode = 'workspace' }: CreateWorkspaceProps) {
+export function CreateWorkspace() {
   const navigate = useNavigate();
   const location = useLocation();
   const locationState = (location.state as LocationState | null) ?? null;
-  const entityLabel = mode === 'project' ? 'Project' : 'Workspace';
-  const entityLabelLower = entityLabel.toLowerCase();
-  const listPath = mode === 'project' ? '/projects' : '/dashboard';
 
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -245,8 +238,8 @@ export function CreateWorkspace({ mode = 'workspace' }: CreateWorkspaceProps) {
 
   return (
     <PageLayout
-      title={`Create ${entityLabel}`}
-      onBack={() => navigate(listPath)}
+      title="Create Workspace"
+      onBack={() => navigate('/dashboard')}
       maxWidth="md"
       headerRight={<UserMenu />}
     >
@@ -258,7 +251,7 @@ export function CreateWorkspace({ mode = 'workspace' }: CreateWorkspaceProps) {
             </h3>
             {!checkingPrereqs && anyMissing && (
               <p style={{ margin: '4px 0 0', fontSize: '0.8125rem', color: 'var(--sam-color-fg-muted)' }}>
-                Complete the items below before creating a {entityLabelLower}.
+                Complete the items below before creating a workspace.
               </p>
             )}
           </div>
@@ -319,7 +312,7 @@ export function CreateWorkspace({ mode = 'workspace' }: CreateWorkspaceProps) {
 
           <div>
             <label htmlFor="name" style={labelStyle}>
-              {entityLabel} Name
+              Workspace Name
             </label>
             <Input
               id="name"
@@ -482,11 +475,11 @@ export function CreateWorkspace({ mode = 'workspace' }: CreateWorkspaceProps) {
               paddingTop: 'var(--sam-space-4)',
             }}
           >
-            <Button type="button" onClick={() => navigate(listPath)} variant="secondary" size="md">
+            <Button type="button" onClick={() => navigate('/dashboard')} variant="secondary" size="md">
               Cancel
             </Button>
             <Button type="submit" disabled={loading || !name || !repository} size="lg" loading={loading}>
-              Create {entityLabel}
+              Create Workspace
             </Button>
           </div>
         </form>
diff --git a/apps/web/tests/unit/app-routes.test.tsx b/apps/web/tests/unit/app-routes.test.tsx
new file mode 100644
index 0000000..03198e8
--- /dev/null
+++ b/apps/web/tests/unit/app-routes.test.tsx
@@ -0,0 +1,74 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+
+vi.mock('../../src/components/AuthProvider', () => ({
+  AuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+vi.mock('../../src/components/ErrorBoundary', () => ({
+  ErrorBoundary: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+vi.mock('../../src/hooks/useToast', () => ({
+  ToastProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+vi.mock('../../src/components/ProtectedRoute', () => ({
+  ProtectedRoute: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+vi.mock('../../src/pages/Landing', () => ({
+  Landing: () => <div data-testid="landing-page" />,
+}));
+
+vi.mock('../../src/pages/Dashboard', () => ({
+  Dashboard: () => <div data-testid="dashboard-page" />,
+}));
+
+vi.mock('../../src/pages/Settings', () => ({
+  Settings: () => <div data-testid="settings-page" />,
+}));
+
+vi.mock('../../src/pages/CreateWorkspace', () => ({
+  CreateWorkspace: () => <div data-testid="create-workspace-page" />,
+}));
+
+vi.mock('../../src/pages/Workspace', () => ({
+  Workspace: () => <div data-testid="workspace-page" />,
+}));
+
+vi.mock('../../src/pages/Nodes', () => ({
+  Nodes: () => <div data-testid="nodes-page" />,
+}));
+
+vi.mock('../../src/pages/Node', () => ({
+  Node: () => <div data-testid="node-page" />,
+}));
+
+vi.mock('../../src/pages/UiStandards', () => ({
+  UiStandards: () => <div data-testid="ui-standards-page" />,
+}));
+
+vi.mock('../../src/pages/Projects', () => ({
+  Projects: () => <div data-testid="projects-page" />,
+}));
+
+vi.mock('../../src/pages/Project', () => ({
+  Project: () => <div data-testid="project-detail-page" />,
+}));
+
+import App from '../../src/App';
+
+function renderAt(path: string) {
+  window.history.pushState({}, '', path);
+  return render(<App />);
+}
+
+describe('App routes', () => {
+  it('routes /projects to the Projects page', () => {
+    renderAt('/projects');
+
+    expect(screen.getByTestId('projects-page')).toBeInTheDocument();
+    expect(screen.queryByTestId('dashboard-page')).not.toBeInTheDocument();
+  });
+});
diff --git a/apps/web/tests/unit/pages/create-workspace.test.tsx b/apps/web/tests/unit/pages/create-workspace.test.tsx
index 299db86..bb71e11 100644
--- a/apps/web/tests/unit/pages/create-workspace.test.tsx
+++ b/apps/web/tests/unit/pages/create-workspace.test.tsx
@@ -26,19 +26,14 @@ vi.mock('../../../src/components/UserMenu', () => ({
 
 import { CreateWorkspace } from '../../../src/pages/CreateWorkspace';
 
-function renderCreateWorkspace(
-  mode: 'workspace' | 'project' = 'workspace',
-  initialEntry: string = '/create'
-) {
+function renderCreateWorkspace() {
   return render(
-    <MemoryRouter initialEntries={[initialEntry]}>
+    <MemoryRouter initialEntries={['/create']}>
       <Routes>
-        <Route path="/create" element={<CreateWorkspace mode={mode} />} />
-        <Route path="/projects/new" element={<CreateWorkspace mode={mode} />} />
+        <Route path="/create" element={<CreateWorkspace />} />
         <Route path="/workspaces/:id" element={<div data-testid="workspace-detail" />} />
         <Route path="/settings" element={<div data-testid="settings" />} />
         <Route path="/dashboard" element={<div data-testid="dashboard" />} />
-        <Route path="/projects" element={<div data-testid="projects" />} />
       </Routes>
     </MemoryRouter>
   );
@@ -230,10 +225,4 @@ describe('CreateWorkspace', () => {
     expect(screen.queryByText('Checking prerequisites...')).not.toBeInTheDocument();
   });
 
-  it('uses project copy in project mode', async () => {
-    renderCreateWorkspace('project', '/projects/new');
-
-    expect(await screen.findByLabelText('Project Name')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Create Project' })).toBeInTheDocument();
-  });
 });
diff --git a/apps/web/tests/unit/pages/projects.test.tsx b/apps/web/tests/unit/pages/projects.test.tsx
index 440cabf..542ce72 100644
--- a/apps/web/tests/unit/pages/projects.test.tsx
+++ b/apps/web/tests/unit/pages/projects.test.tsx
@@ -6,12 +6,16 @@ import { ToastProvider } from '../../../src/hooks/useToast';
 const mocks = vi.hoisted(() => ({
   listProjects: vi.fn(),
   listGitHubInstallations: vi.fn(),
+  listRepositories: vi.fn(),
+  listBranches: vi.fn(),
   createProject: vi.fn(),
 }));
 
 vi.mock('../../../src/lib/api', () => ({
   listProjects: mocks.listProjects,
   listGitHubInstallations: mocks.listGitHubInstallations,
+  listRepositories: mocks.listRepositories,
+  listBranches: mocks.listBranches,
   createProject: mocks.createProject,
 }));
 
@@ -75,6 +79,17 @@ describe('Projects page', () => {
       createdAt: '2026-02-18T00:00:00.000Z',
       updatedAt: '2026-02-18T00:00:00.000Z',
     });
+    mocks.listRepositories.mockResolvedValue([
+      {
+        id: 1,
+        fullName: 'acme/new-repo',
+        name: 'new-repo',
+        private: false,
+        defaultBranch: 'main',
+        installationId: 'inst-1',
+      },
+    ]);
+    mocks.listBranches.mockResolvedValue([{ name: 'main' }, { name: 'develop' }]);
   });
 
   it('loads and renders projects', async () => {
@@ -99,7 +114,16 @@ describe('Projects page', () => {
     });
 
     fireEvent.change(screen.getByPlaceholderText('Project name'), { target: { value: 'New Project' } });
-    fireEvent.change(screen.getByPlaceholderText('owner/repo'), { target: { value: 'acme/new-repo' } });
+    await waitFor(() => {
+      expect(mocks.listRepositories).toHaveBeenCalled();
+    });
+    const repositoryInput = screen.getByLabelText('Repository');
+    fireEvent.focus(repositoryInput);
+    fireEvent.click(await screen.findByText('acme/new-repo'));
+
+    await waitFor(() => {
+      expect(mocks.listBranches).toHaveBeenCalledWith('acme/new-repo', 'inst-1');
+    });
 
     fireEvent.click(screen.getByRole('button', { name: 'Create Project' }));
 
diff --git a/tasks/backlog/2026-02-18-project-creation-dropdowns-and-navbar-links.md b/tasks/backlog/2026-02-18-project-creation-dropdowns-and-navbar-links.md
index 7fd481c..e5fff0f 100644
--- a/tasks/backlog/2026-02-18-project-creation-dropdowns-and-navbar-links.md
+++ b/tasks/backlog/2026-02-18-project-creation-dropdowns-and-navbar-links.md
@@ -1,7 +1,7 @@
 # Project Creation Dropdowns and Top-Level Navbar Links
 
 **Created**: 2026-02-18
-**Status**: completed
+**Status**: superseded
 
 ## Request
 
@@ -54,8 +54,8 @@ Update the project creation experience to match workspace creation behavior by u
 
 ## Completion Notes
 
-- Added project-oriented routes (`/projects`, `/projects/new`) and reused the workspace creation flow in project mode.
 - Added persistent top-level primary navigation in the header via `UserMenu` while retaining profile dropdown actions.
 - Repo selector now behaves as a true dropdown on focus (shows available repositories without requiring typed input first).
+- The `/projects/new` workspace-reuse route introduced in this task caused a regression and was reverted in follow-up task `tasks/backlog/2026-02-18-project-form-dropdown-regression-fix.md`.
 - Mobile screenshot captured at `.codex/tmp/playwright-screenshots/landing-mobile.png`.
-- Docs review outcome: no user-facing docs currently describe these navbar or frontend route details, so no additional docs required beyond this task record.
+- Docs review outcome: no user-facing docs currently describe these navbar or frontend route details, so no additional docs required beyond task records.
diff --git a/tasks/backlog/2026-02-18-project-form-dropdown-regression-fix.md b/tasks/backlog/2026-02-18-project-form-dropdown-regression-fix.md
new file mode 100644
index 0000000..288175a
--- /dev/null
+++ b/tasks/backlog/2026-02-18-project-form-dropdown-regression-fix.md
@@ -0,0 +1,47 @@
+# Project Form Dropdown Regression Fix
+
+**Created**: 2026-02-18
+**Status**: completed
+
+## Problem
+
+PR #110 introduced a regression where project navigation/routes no longer behaved as before (projects path resolving to workspace-oriented screens). The intended change was narrower: keep existing Projects behavior and only improve project creation repository/default-branch inputs to match workspace creation dropdown behavior.
+
+## Scope
+
+1. Restore project route behavior to pre-#110 behavior.
+2. Update project creation form (`ProjectForm`) so repository uses searchable dropdown behavior and default branch is populated from GitHub branches API.
+3. Keep top-level navbar links intact.
+
+## Preflight Classification
+
+- `ui-change`
+- `cross-component-change`
+- `business-logic-change`
+- `docs-sync-change`
+
+## Implementation Plan
+
+1. Revert unintended route wiring introduced in `App.tsx` for `/projects` and `/projects/new`.
+2. Replace project form repository plain input with `RepoSelector`.
+3. Add branch-fetch behavior mirroring workspace creation:
+   - select repo -> fetch branches via `listBranches`
+   - use default branch from selected repo
+   - fallback branch options/messages on API failure
+4. Normalize repository value before submit (`owner/repo` expected by API).
+5. Add/update unit tests for projects creation flow and branch dropdown behavior.
+
+## Validation Checklist
+
+- [x] `/projects` shows projects page (not dashboard/workspace screen)
+- [x] Project creation repository field is searchable dropdown-like selector
+- [x] Branch options are fetched/populated from API after repo selection
+- [x] Project create submit payload uses normalized repository and selected branch
+- [x] Relevant web tests pass
+
+## Completion Notes
+
+- Restored project routes to pre-#110 behavior by removing unintended `/projects` -> dashboard and `/projects/new` -> workspace-create mappings.
+- Kept top-level navbar links from `UserMenu` intact.
+- Updated `ProjectForm` create mode to use `RepoSelector` and branch fetching via `listBranches`, with the same fallback behavior used in workspace creation.
+- Added route regression coverage and project creation form coverage in unit tests.