Split project settings into sub-pages (raphaeltm#1523)

* feat: split project settings into subpages

* chore: archive project settings subpages task

---------

Co-authored-by: Raphaël Titsworth-Morin <raphael@raphaeltm.com>

Author: simple-agent-manager[bot]

apps/api/src/routes/project-deployment.ts

@@ -528,7 +528,7 @@ gcpDeployCallbackRoute.get(
     const db = drizzle(c.env.DATABASE, { schema });
     await requireProjectCapability(db, projectId, sessionUserId, 'infra:manage');
 
-    const appUrl = `https://app.${c.env.BASE_DOMAIN}/projects/${projectId}/settings`;
+    const appUrl = `https://app.${c.env.BASE_DOMAIN}/projects/${projectId}/settings/deploy`;
 
     // Exchange auth code for access token
     const redirectUri = `https://api.${c.env.BASE_DOMAIN}/api/deployment/gcp/callback`;

apps/api/src/services/credential-attribution-health.ts

@@ -235,7 +235,7 @@ export async function buildCredentialAttributionForTriggers(input: {
     const owner = users.get(trigger.userId) ?? null;
     const agentTarget = inferAgentTarget(trigger, project, defaultAgentType);
     const computeTarget = inferComputeTarget(trigger, project);
-    const fixHref = `/projects/${project.id}/settings`;
+    const fixHref = `/projects/${project.id}/settings/connections`;
     const agentCoverage = findCoverage(coverage, 'agent', agentTarget);
     const computeCoverage = findCoverage(coverage, 'compute', computeTarget);
 

apps/api/src/services/project-offboarding-preview-resources.ts

@@ -391,7 +391,7 @@ async function addProjectAttachmentResources(input: {
       resourceId: attachment.id,
       title: row.configurationName,
       subtitle: `${attachment.consumerKind}:${attachment.consumerTarget}`,
-      href: `/projects/${input.projectId}/settings`,
+      href: `/projects/${input.projectId}/settings/connections`,
       credentialSourceBefore: 'project',
       attributionUserIdBefore: attachment.userId,
       attributionProjectIdBefore: input.projectId,

apps/api/tests/unit/routes/project-deployment.test.ts

@@ -681,7 +681,7 @@ describe('GET /api/deployment/gcp/callback (static URI)', () => {
     const location = res.headers.get('Location')!;
 
     // Redirect goes to the project from KV state, not from URL
-    expect(location).toContain('/projects/proj-from-state/settings');
+    expect(location).toContain('/projects/proj-from-state/settings/deploy');
     expect(location).toContain('gcp_deploy_setup=ready');
 
     // Token exchange uses the static redirect URI

apps/web/src/App.tsx

@@ -44,7 +44,17 @@ import { ProjectLibrary } from './pages/ProjectLibrary';
 import { ProjectNotifications } from './pages/ProjectNotifications';
 import { ProjectProfiles } from './pages/ProjectProfiles';
 import { Projects } from './pages/Projects';
-import { ProjectSettings } from './pages/ProjectSettings';
+import {
+  ProjectSettings,
+  ProjectSettingsAccess,
+  ProjectSettingsAgents,
+  ProjectSettingsConnections,
+  ProjectSettingsDeploy,
+  ProjectSettingsGeneral,
+  ProjectSettingsIndexRedirect,
+  ProjectSettingsInfrastructure,
+  ProjectSettingsRuntime,
+} from './pages/ProjectSettings';
 import { ProjectSkills } from './pages/ProjectSkills';
 import { ProjectTriggerDetail } from './pages/ProjectTriggerDetail';
 import { ProjectTriggers } from './pages/ProjectTriggers';
@@ -127,7 +137,16 @@ export default function App() {
                     <Route path="ideas/:taskId" element={<IdeaDetailPage />} />
                     <Route path="tasks" element={<Navigate to="../ideas" replace />} />
                     <Route path="tasks/:taskId" element={<TaskDetail />} />
-                    <Route path="settings" element={<ProjectSettings />} />
+                    <Route path="settings" element={<ProjectSettings />}>
+                      <Route index element={<ProjectSettingsIndexRedirect />} />
+                      <Route path="general" element={<ProjectSettingsGeneral />} />
+                      <Route path="access" element={<ProjectSettingsAccess />} />
+                      <Route path="connections" element={<ProjectSettingsConnections />} />
+                      <Route path="agents" element={<ProjectSettingsAgents />} />
+                      <Route path="infrastructure" element={<ProjectSettingsInfrastructure />} />
+                      <Route path="runtime" element={<ProjectSettingsRuntime />} />
+                      <Route path="deploy" element={<ProjectSettingsDeploy />} />
+                    </Route>
                     <Route path="activity" element={<ProjectActivity />} />
                     <Route path="notifications" element={<ProjectNotifications />} />
                     <Route path="triggers" element={<ProjectTriggers />} />

apps/web/src/components/project-settings/ProjectMembersSection.tsx

@@ -135,7 +135,7 @@ function MemberRow({
           {member.user?.email ?? member.userId}
         </div>
       </div>
-      <div className="flex flex-wrap items-center gap-1.5 sm:justify-end">
+      <div className="flex flex-col items-start gap-1.5 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end">
         <span className="text-[0.6875rem] px-1.5 py-px rounded-sm bg-inset text-fg-muted">
           {member.role}
         </span>