feat: unify repository creation flow for desktop and mobile

- ProjectCard.tsx: add onAddRepository prop, show 'Add Repository' button in expanded view
- ProjectCard.tsx: add showBackButton/onBack props for mobile detail reuse
- ProjectsPage.tsx (desktop): wire onAddRepository to open RepositoryCreateDialog
- ProjectsPage.tsx (mobile): reuse ProjectCard for detail view instead of inline duplication
- pages/projects.css: add .project-add-repo style

Both platforms now use the same ProjectCard component and RepositoryCreateDialog
for adding repositories to projects.

Quality gates: tsc --noEmit pass, npm run build pass, 80/80 tests pass

.gitignore

@@ -54,3 +54,4 @@ Thumbs.db
 .atl/
 .sisyphus/
 .pi-lens/
+minerv3/

apps/web/src/components/features/project/ProjectCard.tsx

@@ -8,7 +8,10 @@ interface Props {
 	deleteConfirm: boolean;
 	workspaceLoading: string | null;
 	showCreateForm: string | null;
-	onToggle: () => void;
+	/** Mobile detail mode: shows back button instead of chevron toggle. */
+	showBackButton?: boolean;
+	onToggle?: () => void;
+	onBack?: () => void;
 	onEdit: () => void;
 	onDelete: () => void;
 	onConfirmDelete: () => void;
@@ -19,6 +22,7 @@ interface Props {
 		workspace: WorkspaceSummary,
 		action: "sync" | "delete",
 	) => void;
+	onAddRepository?: () => void;
 	onCancelCreate: () => void;
 	onCreated: () => void;
 }
@@ -29,39 +33,53 @@ export const ProjectCard = ({
 	deleteConfirm,
 	workspaceLoading,
 	showCreateForm,
+	showBackButton = false,
 	onToggle,
+	onBack,
 	onEdit,
 	onDelete,
 	onConfirmDelete,
 	onCancelDelete,
 	onCreateWorkspace,
 	onWorkspaceAction,
+	onAddRepository,
 	onCancelCreate,
 	onCreated,
 }: Props) => {
 	return (
 		<article className="card project-card">
 			<div className="project-info-row">
-				<button
+				{showBackButton ? (
-					className="project-toggle"
+					<button
-					onClick={onToggle}
+						className="mobile-detail-back"
-					type="button"
+						onClick={onBack}
-					aria-expanded={expanded}
+						type="button"
-				>
+						aria-label="Go back"
-					<Icon name={expanded ? "chevron-down" : "chevron-right"} size="sm" />
+					>
-					<div>
+						<Icon name="arrow-left" size="md" />
-						<h3>{project.name}</h3>
+					</button>
-						{project.description && (
+				) : (
-							<p className="muted project-description">{project.description}</p>
+					<button
-						)}
+						className="project-toggle"
-					</div>
+						onClick={onToggle}
-					{project.repositories?.length > 0 && (
+						type="button"
-						<span className="repo-count">
+						aria-expanded={expanded}
-							{project.repositories.length} repo
+					>
-							{project.repositories.length > 1 ? "s" : ""}
+						<Icon name={expanded ? "chevron-down" : "chevron-right"} size="sm" />
-						</span>
+					</button>
+				)}
+				<div>
+					<h3>{project.name}</h3>
+					{project.description && (
+						<p className="muted project-description">{project.description}</p>
 					)}
-				</button>
+				</div>
+				{!showBackButton && project.repositories?.length > 0 && (
+					<span className="repo-count">
+						{project.repositories.length} repo
+						{project.repositories.length > 1 ? "s" : ""}
+					</span>
+				)}
 				<div className="project-actions">
 					<button className="ghost-button" onClick={onEdit} type="button">
 						<Icon name="edit" size="sm" /> Edit
@@ -170,6 +188,17 @@ export const ProjectCard = ({
 							))}
 						</div>
 					)}
+					{onAddRepository && (
+						<div className="project-add-repo">
+							<button
+								className="primary-button"
+								onClick={onAddRepository}
+								type="button"
+							>
+								<Icon name="add" size="sm" /> Add Repository
+							</button>
+						</div>
+					)}
 				</div>
 			)}
 		</article>

apps/web/src/pages/ProjectsPage.tsx

@@ -1,5 +1,9 @@
 import { useState } from "react";
-import { EmptyState, ErrorState, LoadingState } from "../components/data-states";
+import {
+	EmptyState,
+	ErrorState,
+	LoadingState,
+} from "../components/data-states";
 import { Icon } from "../components/icon";
 import { useMobileViewport } from "../hooks/use-mobile-viewport";
 import { ProjectCard } from "../components/features/project/ProjectCard";
@@ -15,7 +19,8 @@ type MobileView = "list" | "detail" | "create-project" | "create-repo";
 export const ProjectsPage = () => {
 	const isMobile = useMobileViewport();
 	const [mobileView, setMobileView] = useState<MobileView>("list");
-	const [selectedProject, setSelectedProject] = useState<ProjectWithRepos | null>(null);
+	const [selectedProject, setSelectedProject] =
+		useState<ProjectWithRepos | null>(null);
 
 	const {
 		projects,
@@ -85,157 +90,59 @@ export const ProjectsPage = () => {
 		}
 
 		if (mobileView === "detail" && selectedProject) {
-			const project = selectedProject;
 			return (
 				<div className="mobile-page">
-					<header className="mobile-detail-header">
+					<ProjectCard
-						<button
+						project={selectedProject}
-							className="mobile-detail-back"
+						expanded={true}
-							onClick={() => {
+						showBackButton={true}
-								setMobileView("list");
+						deleteConfirm={deleteConfirmId === selectedProject.id}
-								setSelectedProject(null);
+						workspaceLoading={workspaceLoading}
-							}}
+						showCreateForm={
-							type="button"
+							creatingWorkspace?.projectId === selectedProject.id
-							aria-label="Go back"
+								? creatingWorkspace.repoId
-						>
+								: null
-							<Icon name="arrow-left" size="md" />
+						}
-						</button>
+						onBack={() => {
-						<div className="mobile-detail-header-content">
+							setMobileView("list");
-							<h1 className="mobile-detail-title">{project.name}</h1>
+							setSelectedProject(null);
-							{project.description && (
+						}}
-								<p className="mobile-detail-subtitle">{project.description}</p>
+						onEdit={() => {
-							)}
+							setFormName(selectedProject.name);
-						</div>
+							setFormDescription(selectedProject.description ?? "");
-					</header>
+							setMobileView("create-project");
-
+						}}
-					<div className="mobile-detail-fields">
+						onDelete={() => setDeleteConfirmId(selectedProject.id)}
-						<div className="mobile-detail-field">
+						onConfirmDelete={() => {
-							<label className="mobile-detail-field-label">Repositories</label>
+							void handleDelete(selectedProject.id);
-							<div className="mobile-detail-field-value">
+							setMobileView("list");
-								{project.repositories.length === 0 ? (
+							setSelectedProject(null);
-									<p className="muted">No repositories yet.</p>
+						}}
-								) : (
+						onCancelDelete={() => setDeleteConfirmId(null)}
-									<div className="repo-list">
+						onCreateWorkspace={(repoId) =>
-										{project.repositories.map((repo) => (
+							setCreatingWorkspace({
-											<div key={repo.id} className="repo-block">
+								projectId: selectedProject.id,
-												<div className="repo-header">
+								repoId,
-													<h4>{repo.name}</h4>
+							})
-													<button
+						}
-														className="btn btn-sm btn-primary"
+						onWorkspaceAction={(repoId, workspace, action) => {
-														onClick={() =>
+							if (action === "sync") {
-															setCreatingWorkspace({
+								void handleSyncWorkspace(
-																projectId: project.id,
+									selectedProject.id,
-																repoId: repo.id,
+									repoId,
-															})
+									workspace,
-														}
+								);
-														type="button"
+							} else if (action === "delete") {
-													>
+								void handleDeleteWorkspace(workspace);
-														<Icon name="add" size="sm" /> New Workspace
+							}
-													</button>
+						}}
-												</div>
+						onAddRepository={() => setMobileView("create-repo")}
-												{/* Inline workspace create */}
+						onCancelCreate={() => setCreatingWorkspace(null)}
-												{creatingWorkspace?.projectId === project.id &&
+						onCreated={() => {
-													creatingWorkspace.repoId === repo.id && (
+							setCreatingWorkspace(null);
-														<div className="mobile-form-group">
+							reload();
-															<p className="muted">Workspace creation form would appear here.</p>
+						}}
-															<button
+					/>
-																className="secondary-button small"
-																onClick={() => setCreatingWorkspace(null)}
-																type="button"
-															>
-																Cancel
-															</button>
-														</div>
-												)}
-												{repo.workspaces.length === 0 ? (
-													<p className="muted">No workspaces.</p>
-												) : (
-													<div className="workspace-grid">
-														{repo.workspaces.map((ws) => (
-															<div
-																key={ws.id}
-																className={`workspace-chip ${ws.status}`}
-															>
-																<a href={`/workspaces/${ws.id}`}>{ws.name}</a>
-																<span className="ws-branch">
-																	<Icon name="branch" size="sm" /> {ws.branch}
-																</span>
-																{ws.instance_count > 0 && (
-																	<span className="ws-instances">
-																		{ws.instance_count} tool
-																		{ws.instance_count > 1 ? "s" : ""}
-																	</span>
-																)}
-																<div className="ws-actions">
-																	<button
-																		type="button"
-																		disabled={workspaceLoading === ws.id}
-																		onClick={() =>
-																			void handleSyncWorkspace(
-																				project.id,
-																				repo.id,
-																				ws,
-																			)
-																		}
-																	>
-																		<Icon name="refresh" size="sm" />
-																	</button>
-																	<button
-																		type="button"
-																		className="danger-text"
-																		disabled={workspaceLoading === ws.id}
-																		onClick={() =>
-																			void handleDeleteWorkspace(ws)
-																		}
-																	>
-																		<Icon name="delete" size="sm" />
-																	</button>
-																</div>
-															</div>
-														))}
-														</div>
-													)}
-												</div>
-										))}
-									</div>
-								)}
-							</div>
-						</div>
-					</div>
-
-					<div className="mobile-form-actions">
-						<button
-							className="primary-button"
-							onClick={() => setMobileView("create-repo")}
-							type="button"
-						>
-							<Icon name="add" size="sm" /> Add Repository
-						</button>
-						<button
-							className="ghost-button"
-							onClick={() => {
-								setFormName(project.name);
-								setFormDescription(project.description ?? "");
-								setMobileView("create-project");
-							}}
-							type="button"
-						>
-							<Icon name="edit" size="sm" /> Edit Project
-						</button>
-						<button
-							className="danger-button"
-							onClick={() => {
-								if (window.confirm("Delete this project?")) {
-									void handleDelete(project.id);
-									setMobileView("list");
-									setSelectedProject(null);
-								}
-							}}
-							type="button"
-						>
-							<Icon name="delete" size="sm" /> Delete Project
-						</button>
-					</div>
 				</div>
 			);
 		}
@@ -250,9 +157,7 @@ export const ProjectsPage = () => {
 					</span>
 				</div>
 
-				{status === "loading" && (
+				{status === "loading" && <LoadingState message="Loading projects..." />}
-					<LoadingState message="Loading projects..." />
-				)}
 
 				{status === "error" && (
 					<ErrorState message="Failed to load projects" onRetry={reload} />
@@ -346,6 +251,10 @@ export const ProjectsPage = () => {
 								}
 							}}
 							onCancelCreate={() => setCreatingWorkspace(null)}
+							onAddRepository={() => {
+								setSelectedProject(project);
+								setMobileView("create-repo");
+							}}
 							onCreated={() => {
 								setCreatingWorkspace(null);
 								reload();

apps/web/src/styles/pages/projects.css

@@ -130,3 +130,11 @@
 	color: var(--danger);
 }
 
+.project-add-repo {
+	margin-top: var(--space-4);
+	padding-top: var(--space-4);
+	border-top: 1px solid var(--border);
+	display: flex;
+	justify-content: flex-start;
+}
+