feat(dashboard): refactor project tabs into URL-backed routes with expandable sidebar tree

tests/unit/web/project-navigation.test.ts

@@ -0,0 +1,122 @@
+import { describe, expect, it } from 'vitest';
+import {
+	DEFAULT_PROJECT_SECTION,
+	PROJECT_SECTIONS,
+	isProjectActive,
+	isSectionActive,
+	resolveDefaultProjectPath,
+} from '../../../web/src/lib/project-sections.js';
+
+describe('PROJECT_SECTIONS', () => {
+	it('contains exactly the expected sections in order', () => {
+		expect(PROJECT_SECTIONS.map((s) => s.id)).toEqual([
+			'general',
+			'harness',
+			'work',
+			'integrations',
+			'agent-configs',
+		]);
+	});
+
+	it('each section has a non-empty label and path', () => {
+		for (const section of PROJECT_SECTIONS) {
+			expect(section.label.length).toBeGreaterThan(0);
+			expect(section.path.length).toBeGreaterThan(0);
+		}
+	});
+
+	it('has unique ids', () => {
+		const ids = PROJECT_SECTIONS.map((s) => s.id);
+		expect(new Set(ids).size).toBe(ids.length);
+	});
+
+	it('has unique paths', () => {
+		const paths = PROJECT_SECTIONS.map((s) => s.path);
+		expect(new Set(paths).size).toBe(paths.length);
+	});
+});
+
+describe('DEFAULT_PROJECT_SECTION', () => {
+	it('is "general"', () => {
+		expect(DEFAULT_PROJECT_SECTION).toBe('general');
+	});
+
+	it('exists in PROJECT_SECTIONS', () => {
+		const ids = PROJECT_SECTIONS.map((s) => s.id);
+		expect(ids).toContain(DEFAULT_PROJECT_SECTION);
+	});
+});
+
+describe('section path mapping', () => {
+	it('maps general section to /general path', () => {
+		const generalSection = PROJECT_SECTIONS.find((s) => s.id === 'general');
+		expect(generalSection?.path).toBe('general');
+	});
+
+	it('maps agent-configs section to /agent-configs path', () => {
+		const agentConfigsSection = PROJECT_SECTIONS.find((s) => s.id === 'agent-configs');
+		expect(agentConfigsSection?.path).toBe('agent-configs');
+	});
+
+	it('maps work section to /work path', () => {
+		const workSection = PROJECT_SECTIONS.find((s) => s.id === 'work');
+		expect(workSection?.path).toBe('work');
+	});
+
+	it('maps integrations section to /integrations path', () => {
+		const integrationsSection = PROJECT_SECTIONS.find((s) => s.id === 'integrations');
+		expect(integrationsSection?.path).toBe('integrations');
+	});
+});
+
+describe('isProjectActive', () => {
+	it('detects active project from section path', () => {
+		expect(isProjectActive('/projects/my-project/general', 'my-project')).toBe(true);
+		expect(isProjectActive('/projects/my-project/work', 'my-project')).toBe(true);
+		expect(isProjectActive('/projects/my-project/agent-configs', 'my-project')).toBe(true);
+	});
+
+	it('detects active project at root path', () => {
+		expect(isProjectActive('/projects/my-project', 'my-project')).toBe(true);
+	});
+
+	it('does not falsely match other projects', () => {
+		expect(isProjectActive('/projects/other-project/general', 'my-project')).toBe(false);
+		expect(isProjectActive('/projects', 'my-project')).toBe(false);
+	});
+});
+
+describe('isSectionActive', () => {
+	it('returns true for matching section path', () => {
+		expect(isSectionActive('/projects/proj1/general', 'proj1', 'general')).toBe(true);
+		expect(isSectionActive('/projects/proj1/work', 'proj1', 'work')).toBe(true);
+		expect(isSectionActive('/projects/proj1/agent-configs', 'proj1', 'agent-configs')).toBe(true);
+	});
+
+	it('returns false for non-matching section', () => {
+		expect(isSectionActive('/projects/proj1/general', 'proj1', 'work')).toBe(false);
+		expect(isSectionActive('/projects/proj1/integrations', 'proj1', 'general')).toBe(false);
+	});
+
+	it('returns false for different project', () => {
+		expect(isSectionActive('/projects/proj2/general', 'proj1', 'general')).toBe(false);
+	});
+
+	it('returns true for sub-paths of a section', () => {
+		expect(isSectionActive('/projects/proj1/work/details', 'proj1', 'work')).toBe(true);
+	});
+});
+
+describe('resolveDefaultProjectPath', () => {
+	it('resolves to /general for any project id', () => {
+		expect(resolveDefaultProjectPath('abc123')).toBe('/projects/abc123/general');
+		expect(resolveDefaultProjectPath('my-project')).toBe('/projects/my-project/general');
+	});
+
+	it('always uses the DEFAULT_PROJECT_SECTION', () => {
+		const projectId = 'test-proj';
+		expect(resolveDefaultProjectPath(projectId)).toBe(
+			`/projects/${projectId}/${DEFAULT_PROJECT_SECTION}`,
+		);
+	});
+});

web/src/components/layout/sidebar.tsx

@@ -1,4 +1,5 @@
 import { Separator } from '@/components/ui/separator.js';
+import { PROJECT_SECTIONS, isProjectActive, isSectionActive } from '@/lib/project-sections.js';
 import { trpc } from '@/lib/trpc.js';
 import { cn } from '@/lib/utils.js';
 import { useQuery } from '@tanstack/react-query';
@@ -7,13 +8,16 @@ import {
 	Activity,
 	BookOpen,
 	Building,
+	ChevronDown,
+	ChevronRight,
 	FolderGit2,
 	KeyRound,
 	LayoutDashboard,
 	Settings,
 	Users,
 	Zap,
 } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 interface SidebarProps {
 	user: { name: string; email: string; role: string } | undefined;
@@ -66,6 +70,69 @@ function NavLink({
 	);
 }
 
+interface ProjectNavItemProps {
+	project: { id: string; name: string };
+	currentPath: string;
+}
+
+function ProjectNavItem({ project, currentPath }: ProjectNavItemProps) {
+	const activeProject = isProjectActive(currentPath, project.id);
+	const [isExpanded, setIsExpanded] = useState(activeProject);
+
+	// Sync expansion state when the active project changes due to URL navigation
+	useEffect(() => {
+		if (activeProject) {
+			setIsExpanded(true);
+		}
+	}, [activeProject]);
+
+	return (
+		<div>
+			<button
+				type="button"
+				onClick={() => setIsExpanded((prev) => !prev)}
+				className={cn(
+					'flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+					activeProject
+						? 'bg-sidebar-accent text-sidebar-accent-foreground'
+						: 'text-sidebar-foreground hover:bg-sidebar-accent/50',
+				)}
+			>
+				<FolderGit2 className="h-4 w-4 shrink-0" />
+				<span className="flex-1 truncate text-left">{project.name}</span>
+				{isExpanded ? (
+					<ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
+				) : (
+					<ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
+				)}
+			</button>
+
+			{isExpanded && (
+				<div className="ml-4 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2">
+					{PROJECT_SECTIONS.map((section) => {
+						const sectionActive = isSectionActive(currentPath, project.id, section.path);
+						return (
+							<Link
+								key={section.id}
+								to={section.route}
+								params={{ projectId: project.id }}
+								className={cn(
+									'rounded-md px-2 py-1.5 text-xs font-medium transition-colors',
+									sectionActive
+										? 'bg-sidebar-accent text-sidebar-accent-foreground'
+										: 'text-sidebar-foreground hover:bg-sidebar-accent/50',
+								)}
+							>
+								{section.label}
+							</Link>
+						);
+					})}
+				</div>
+			)}
+		</div>
+	);
+}
+
 export function Sidebar({ user }: SidebarProps) {
 	const routerState = useRouterState();
 	const currentPath = routerState.location.pathname;
@@ -89,16 +156,10 @@ export function Sidebar({ user }: SidebarProps) {
 				<div className="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
 					Projects
 				</div>
-				<div className="overflow-y-auto max-h-48">
+				<div className="overflow-y-auto max-h-48 flex flex-col gap-0.5">
 					{projects && projects.length > 0 ? (
 						projects.map((project) => (
-							<NavLink
-								key={project.id}
-								to={`/projects/${project.id}`}
-								label={project.name}
-								icon={FolderGit2}
-								currentPath={currentPath}
-							/>
+							<ProjectNavItem key={project.id} project={project} currentPath={currentPath} />
 						))
 					) : (
 						<Link

web/src/components/projects/projects-table.tsx

@@ -95,7 +95,10 @@ export function ProjectsTable({
 								key={project.id}
 								className="cursor-pointer"
 								onClick={() =>
-									navigate({ to: '/projects/$projectId', params: { projectId: project.id } })
+									navigate({
+										to: '/projects/$projectId/general',
+										params: { projectId: project.id },
+									})
 								}
 							>
 								<TableCell className="font-medium">{project.name}</TableCell>

web/src/lib/project-sections.ts

@@ -0,0 +1,55 @@
+export type ProjectSection = 'general' | 'harness' | 'work' | 'integrations' | 'agent-configs';
+
+export type ProjectSectionRoute =
+	| '/projects/$projectId/general'
+	| '/projects/$projectId/harness'
+	| '/projects/$projectId/work'
+	| '/projects/$projectId/integrations'
+	| '/projects/$projectId/agent-configs';
+
+export const PROJECT_SECTIONS: {
+	id: ProjectSection;
+	label: string;
+	path: string;
+	route: ProjectSectionRoute;
+}[] = [
+	{ id: 'general', label: 'General', path: 'general', route: '/projects/$projectId/general' },
+	{ id: 'harness', label: 'Harness', path: 'harness', route: '/projects/$projectId/harness' },
+	{ id: 'work', label: 'Work', path: 'work', route: '/projects/$projectId/work' },
+	{
+		id: 'integrations',
+		label: 'Integrations',
+		path: 'integrations',
+		route: '/projects/$projectId/integrations',
+	},
+	{
+		id: 'agent-configs',
+		label: 'Agent Configs',
+		path: 'agent-configs',
+		route: '/projects/$projectId/agent-configs',
+	},
+];
+
+export const DEFAULT_PROJECT_SECTION: ProjectSection = 'general';
+
+/**
+ * Returns true if the given pathname is within the given project.
+ */
+export function isProjectActive(pathname: string, projectId: string): boolean {
+	return pathname.startsWith(`/projects/${projectId}/`) || pathname === `/projects/${projectId}`;
+}
+
+/**
+ * Returns true if the given pathname matches a specific section of a project.
+ */
+export function isSectionActive(pathname: string, projectId: string, sectionPath: string): boolean {
+	const fullPath = `/projects/${projectId}/${sectionPath}`;
+	return pathname === fullPath || pathname.startsWith(`${fullPath}/`);
+}
+
+/**
+ * Resolves the default section URL for a given project.
+ */
+export function resolveDefaultProjectPath(projectId: string): string {
+	return `/projects/${projectId}/${DEFAULT_PROJECT_SECTION}`;
+}

web/src/routes/projects/$projectId.agent-configs.tsx

@@ -0,0 +1,14 @@
+import { ProjectAgentConfigs } from '@/components/projects/project-agent-configs.js';
+import { createRoute } from '@tanstack/react-router';
+import { projectDetailRoute } from './$projectId.js';
+
+function ProjectAgentConfigsPage() {
+	const { projectId } = projectAgentConfigsRoute.useParams();
+	return <ProjectAgentConfigs projectId={projectId} />;
+}
+
+export const projectAgentConfigsRoute = createRoute({
+	getParentRoute: () => projectDetailRoute,
+	path: '/agent-configs',
+	component: ProjectAgentConfigsPage,
+});

web/src/routes/projects/$projectId.general.tsx

@@ -0,0 +1,26 @@
+import { ProjectGeneralForm } from '@/components/projects/project-general-form.js';
+import { trpc } from '@/lib/trpc.js';
+import { useQuery } from '@tanstack/react-query';
+import { createRoute } from '@tanstack/react-router';
+import { projectDetailRoute } from './$projectId.js';
+
+function ProjectGeneralPage() {
+	const { projectId } = projectGeneralRoute.useParams();
+	const projectQuery = useQuery(trpc.projects.getById.queryOptions({ id: projectId }));
+
+	if (projectQuery.isLoading) {
+		return <div className="py-8 text-center text-muted-foreground">Loading...</div>;
+	}
+
+	if (projectQuery.isError || !projectQuery.data) {
+		return <div className="py-8 text-center text-destructive">Project not found</div>;
+	}
+
+	return <ProjectGeneralForm project={projectQuery.data} />;
+}
+
+export const projectGeneralRoute = createRoute({
+	getParentRoute: () => projectDetailRoute,
+	path: '/general',
+	component: ProjectGeneralPage,
+});

web/src/routes/projects/$projectId.harness.tsx

@@ -0,0 +1,26 @@
+import { ProjectHarnessForm } from '@/components/projects/project-harness-form.js';
+import { trpc } from '@/lib/trpc.js';
+import { useQuery } from '@tanstack/react-query';
+import { createRoute } from '@tanstack/react-router';
+import { projectDetailRoute } from './$projectId.js';
+
+function ProjectHarnessPage() {
+	const { projectId } = projectHarnessRoute.useParams();
+	const projectQuery = useQuery(trpc.projects.getById.queryOptions({ id: projectId }));
+
+	if (projectQuery.isLoading) {
+		return <div className="py-8 text-center text-muted-foreground">Loading...</div>;
+	}
+
+	if (projectQuery.isError || !projectQuery.data) {
+		return <div className="py-8 text-center text-destructive">Project not found</div>;
+	}
+
+	return <ProjectHarnessForm project={projectQuery.data} />;
+}
+
+export const projectHarnessRoute = createRoute({
+	getParentRoute: () => projectDetailRoute,
+	path: '/harness',
+	component: ProjectHarnessPage,
+});

web/src/routes/projects/$projectId.integrations.tsx

@@ -0,0 +1,14 @@
+import { IntegrationForm } from '@/components/projects/integration-form.js';
+import { createRoute } from '@tanstack/react-router';
+import { projectDetailRoute } from './$projectId.js';
+
+function ProjectIntegrationsPage() {
+	const { projectId } = projectIntegrationsRoute.useParams();
+	return <IntegrationForm projectId={projectId} />;
+}
+
+export const projectIntegrationsRoute = createRoute({
+	getParentRoute: () => projectDetailRoute,
+	path: '/integrations',
+	component: ProjectIntegrationsPage,
+});