From 88a973dc6892ffdbe40333de3a51346b6f9bdecf Mon Sep 17 00:00:00 2001
From: Alex Blank <alexblank@fastmail.com>
Date: Mon, 1 Jun 2026 17:18:51 +0200
Subject: [PATCH] feat: workspace-first UI refresh - PR-3 projects page +
 routing cleanup

- Rewrite ProjectsPage with inline repository and workspace display
- Expandable project cards showing repos + workspace chips
- Inline workspace creation from project page (New Workspace button per repo)
- Workspace chips link to workspace detail page
- Sync/delete actions on workspace chips
- Update Project type: add ProjectWithRepos, RepositorySummary, WorkspaceSummary
- Update listProjects API to return ProjectWithRepos[]
- Update dashboard, sessions, config-profiles to use ProjectWithRepos
- Remove old /projects/:projectId route (RepoWorkspace)
- Add chevron icons to Icon component
- Projects page CSS: project-toggle, repo-block, workspace-grid, workspace-chip
- TypeScript + eslint clean

Quality gates: tsc --noEmit clean, eslint clean
---
 apps/web/src/api/projects.ts           |   6 +-
 apps/web/src/components/icon.tsx       |   8 +-
 apps/web/src/pages/config-profiles.tsx |   4 +-
 apps/web/src/pages/dashboard.tsx       |   4 +-
 apps/web/src/pages/projects.tsx        | 635 +++++++++++++++++--------
 apps/web/src/pages/sessions.tsx        |   4 +-
 apps/web/src/router.tsx                |   2 -
 apps/web/src/styles.css                | 132 +++++
 apps/web/src/types.ts                  |  25 +
 apps/web/src/utils/icons.ts            | 181 +------
 10 files changed, 620 insertions(+), 381 deletions(-)

diff --git a/apps/web/src/api/projects.ts b/apps/web/src/api/projects.ts
index beaed85..1252dce 100644
--- a/apps/web/src/api/projects.ts
+++ b/apps/web/src/api/projects.ts
@@ -1,5 +1,5 @@
 import { apiClient } from "./client";
-import type { Project } from "../types";
+import type { Project, ProjectWithRepos } from "../types";
 
 export type ProjectCreateInput = {
   name: string;
@@ -15,8 +15,8 @@ export type SetDefaultSSHKeyInput = {
   ssh_key_id: string;
 };
 
-export const listProjects = async (): Promise<Project[]> => {
-  const response = await apiClient.get<Project[]>("/projects");
+export const listProjects = async (): Promise<ProjectWithRepos[]> => {
+  const response = await apiClient.get<ProjectWithRepos[]>("/projects");
   return response.data;
 };
 
diff --git a/apps/web/src/components/icon.tsx b/apps/web/src/components/icon.tsx
index cc2cc79..7222b30 100644
--- a/apps/web/src/components/icon.tsx
+++ b/apps/web/src/components/icon.tsx
@@ -36,6 +36,8 @@ import {
 	ArrowLeft,
 	DotsSixVertical,
 	Bell,
+	CaretDown,
+	CaretRight,
 } from "@phosphor-icons/react";
 
 export type IconName =
@@ -79,7 +81,9 @@ export type IconName =
 	| "terminal"
 	| "arrow-left"
 	| "drag"
-	| "bell";
+	| "bell"
+	| "chevron-down"
+	| "chevron-right";
 
 const iconMap: Record<
 	IconName,
@@ -129,6 +133,8 @@ const iconMap: Record<
 	"arrow-left": ArrowLeft,
 	drag: DotsSixVertical,
 	bell: Bell,
+	"chevron-down": CaretDown,
+	"chevron-right": CaretRight,
 };
 
 export interface IconProps {
diff --git a/apps/web/src/pages/config-profiles.tsx b/apps/web/src/pages/config-profiles.tsx
index 4e630cf..ac7e33f 100644
--- a/apps/web/src/pages/config-profiles.tsx
+++ b/apps/web/src/pages/config-profiles.tsx
@@ -19,7 +19,7 @@ import {
 	type ResolvedProfile,
 } from "../api/config_profiles";
 import { listProjects } from "../api/projects";
-import type { Project } from "../types";
+import type { ProjectWithRepos } from "../types";
 import { listToolTypes, type ToolType } from "../api/tool_types";
 import { GitMountEditor } from "../components/git-mount-editor";
 
@@ -31,7 +31,7 @@ export const ConfigProfilesPage = () => {
 	const [mobileView, setMobileView] = useState<MobileView>("list");
 	const [status, setStatus] = useState<Status>("loading");
 	const [profiles, setProfiles] = useState<ConfigProfile[]>([]);
-	const [projects, setProjects] = useState<Project[]>([]);
+	const [projects, setProjects] = useState<ProjectWithRepos[]>([]);
 	const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
 
 	const [selectedProfileId, setSelectedProfileId] = useState<string | null>(
diff --git a/apps/web/src/pages/dashboard.tsx b/apps/web/src/pages/dashboard.tsx
index 00ee820..59e2ea0 100644
--- a/apps/web/src/pages/dashboard.tsx
+++ b/apps/web/src/pages/dashboard.tsx
@@ -7,7 +7,7 @@ import { listProjects } from "../api/projects";
 import { listRepositories, type GitRepository } from "../api/git_repositories";
 import { listToolTypes, type ToolType } from "../api/tool_types";
 import { updateUserConfig } from "../api/settings";
-import type { Project } from "../types";
+import type { ProjectWithRepos } from "../types";
 import { EmptyState, ErrorState, LoadingState } from "../components/data-states";
 import { CreateSessionForm } from "../components/create-session-form";
 import { SessionList } from "../components/session-list";
@@ -28,7 +28,7 @@ export const HomePage = () => {
   const [status, setStatus] = useState<HomeStatus>("loading");
   const [summary, setSummary] = useState<DashboardSummary | null>(null);
   const [sessions, setSessions] = useState<SessionView[]>([]);
-  const [projects, setProjects] = useState<Project[]>([]);
+  const [projects, setProjects] = useState<ProjectWithRepos[]>([]);
   const [repositories, setRepositories] = useState<GitRepository[]>([]);
   const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
   const [selectedProject, setSelectedProject] = useState("");
diff --git a/apps/web/src/pages/projects.tsx b/apps/web/src/pages/projects.tsx
index c1c0d71..92df8f0 100644
--- a/apps/web/src/pages/projects.tsx
+++ b/apps/web/src/pages/projects.tsx
@@ -1,216 +1,473 @@
+/** Projects page with inline repositories and workspaces. */
+
 import { useState } from "react";
 
-import { Link } from "react-router-dom";
-
 import {
-  createProject,
-  deleteProject,
-  listProjects,
-  updateProject,
-  type ProjectCreateInput,
-  type ProjectUpdateInput,
+	createProject,
+	deleteProject,
+	listProjects,
+	updateProject,
+	type ProjectCreateInput,
+	type ProjectUpdateInput,
 } from "../api/projects";
+import {
+	createWorkspace,
+	deleteWorkspace,
+	syncWorkspace,
+} from "../api/workspaces";
 import { EmptyState, ErrorState, LoadingState } from "../components/data-states";
 import { Icon } from "../components/icon";
+import { WorkspaceCreateForm } from "../components/workspace-create-form";
 import { useAsyncData } from "../hooks/use-async-data";
-import type { Project } from "../types";
+import type { ProjectWithRepos, WorkspaceSummary } from "../types";
 
 type DialogMode = "none" | "create" | "edit";
 
 export const ProjectsPage = () => {
-  const { data: projects, status, reload } = useAsyncData<Project[]>(listProjects, []);
-  const [dialogMode, setDialogMode] = useState<DialogMode>("none");
-  const [editingProject, setEditingProject] = useState<Project | null>(null);
-  const [formName, setFormName] = useState("");
-  const [formDescription, setFormDescription] = useState("");
-  const [formError, setFormError] = useState<string | null>(null);
-  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+	const { data: projects, status, reload } = useAsyncData<ProjectWithRepos[]>(
+		listProjects,
+		[],
+	);
+	const [dialogMode, setDialogMode] = useState<DialogMode>("none");
+	const [editingProject, setEditingProject] = useState<ProjectWithRepos | null>(
+		null,
+	);
+	const [formName, setFormName] = useState("");
+	const [formDescription, setFormDescription] = useState("");
+	const [formError, setFormError] = useState<string | null>(null);
+	const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+	const [expandedProject, setExpandedProject] = useState<string | null>(null);
+	const [creatingWorkspace, setCreatingWorkspace] = useState<{
+		projectId: string;
+		repoId: string;
+	} | null>(null);
+	const [workspaceLoading, setWorkspaceLoading] = useState<string | null>(null);
 
-  const safeProjects = projects ?? [];
+	const safeProjects = projects ?? [];
 
-  const openCreate = () => {
-    setFormName("");
-    setFormDescription("");
-    setFormError(null);
-    setEditingProject(null);
-    setDialogMode("create");
-  };
+	const openCreate = () => {
+		setFormName("");
+		setFormDescription("");
+		setFormError(null);
+		setEditingProject(null);
+		setDialogMode("create");
+	};
 
-  const openEdit = (project: Project) => {
-    setFormName(project.name);
-    setFormDescription(project.description ?? "");
-    setFormError(null);
-    setEditingProject(project);
-    setDialogMode("edit");
-  };
+	const openEdit = (project: ProjectWithRepos) => {
+		setFormName(project.name);
+		setFormDescription(project.description ?? "");
+		setFormError(null);
+		setEditingProject(project);
+		setDialogMode("edit");
+	};
 
-  const closeDialog = () => {
-    setDialogMode("none");
-    setEditingProject(null);
-    setFormError(null);
-  };
+	const closeDialog = () => {
+		setDialogMode("none");
+		setEditingProject(null);
+		setFormError(null);
+	};
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setFormError(null);
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setFormError(null);
 
-    if (!formName.trim()) {
-      setFormError("Project name is required");
-      return;
-    }
+		if (!formName.trim()) {
+			setFormError("Project name is required");
+			return;
+		}
 
-    try {
-      if (dialogMode === "create") {
-        const input: ProjectCreateInput = {
-          name: formName.trim(),
-          description: formDescription.trim() || null,
-        };
-        await createProject(input);
-      } else if (dialogMode === "edit" && editingProject) {
-        const input: ProjectUpdateInput = {
-          name: formName.trim(),
-          description: formDescription.trim() || null,
-        };
-        await updateProject(editingProject.id, input);
-      }
-      closeDialog();
-      reload();
-    } catch {
-      setFormError("Failed to save project");
-    }
-  };
+		try {
+			if (dialogMode === "create") {
+				const input: ProjectCreateInput = {
+					name: formName.trim(),
+					description: formDescription.trim() || null,
+				};
+				await createProject(input);
+			} else if (dialogMode === "edit" && editingProject) {
+				const input: ProjectUpdateInput = {
+					name: formName.trim(),
+					description: formDescription.trim() || null,
+				};
+				await updateProject(editingProject.id, input);
+			}
+			closeDialog();
+			reload();
+		} catch {
+			setFormError("Failed to save project");
+		}
+	};
 
-  const handleDelete = async (projectId: string) => {
-    try {
-      await deleteProject(projectId);
-      setDeleteConfirmId(null);
-      reload();
-    } catch {
-      setDeleteConfirmId(null);
-    }
-  };
+	const handleDelete = async (projectId: string) => {
+		try {
+			await deleteProject(projectId);
+			setDeleteConfirmId(null);
+			reload();
+		} catch {
+			setDeleteConfirmId(null);
+		}
+	};
 
-  const isEmpty = status === "ready" && safeProjects.length === 0;
+	const handleCreateWorkspace = async (
+		projectId: string,
+		repoId: string,
+		data: { name: string; branch: string },
+	) => {
+		setWorkspaceLoading(repoId);
+		try {
+			await createWorkspace(projectId, repoId, data);
+			setCreatingWorkspace(null);
+			reload();
+		} catch (err) {
+			alert(err instanceof Error ? err.message : "Failed to create workspace");
+		} finally {
+			setWorkspaceLoading(null);
+		}
+	};
 
-  return (
-    <section className="stack">
-      <div className="page-header">
-        <h1>Projects</h1>
-        <button className="primary-button" onClick={openCreate} type="button">
-          <Icon name="add" size="sm" />
-          New Project
-        </button>
-      </div>
+	const handleSyncWorkspace = async (
+		projectId: string,
+		repoId: string,
+		workspace: WorkspaceSummary,
+	) => {
+		setWorkspaceLoading(workspace.id);
+		try {
+			await syncWorkspace(projectId, repoId, workspace.id);
+			reload();
+		} catch (err) {
+			alert(err instanceof Error ? err.message : "Failed to sync workspace");
+		} finally {
+			setWorkspaceLoading(null);
+		}
+	};
 
-      {status === "loading" && <LoadingState message="Loading projects..." />}
+	const handleDeleteWorkspace = async (
+		projectId: string,
+		repoId: string,
+		workspace: WorkspaceSummary,
+	) => {
+		if (!confirm(`Delete workspace "${workspace.name}"?`)) return;
+		setWorkspaceLoading(workspace.id);
+		try {
+			await deleteWorkspace(projectId, repoId, workspace.id);
+			reload();
+		} catch (err) {
+			alert(err instanceof Error ? err.message : "Failed to delete workspace");
+		} finally {
+			setWorkspaceLoading(null);
+		}
+	};
 
-      {status === "error" && <ErrorState message="Failed to load projects" onRetry={reload} />}
+	const isEmpty = status === "ready" && safeProjects.length === 0;
 
-      {isEmpty && <EmptyState message="No projects yet. Create your first project above." />}
+	return (
+		<section className="stack">
+			<div className="page-header">
+				<h1>Projects</h1>
+				<button className="primary-button" onClick={openCreate} type="button">
+					<Icon name="add" size="sm" />
+					New Project
+				</button>
+			</div>
 
-      {status === "ready" && safeProjects.length > 0 && (
-        <div className="project-list">
-          {safeProjects.map((project) => (
-            <article className="card project-card" key={project.id}>
-              <div className="project-info">
-                <h3>{project.name}</h3>
-                {project.description && <p className="muted">{project.description}</p>}
-              </div>
-              <div className="project-actions">
-                <Link className="ghost-button" to={`/projects/${project.id}`}>
-                  Open Workspace
-                </Link>
-                <button
-                  className="ghost-button"
-                  onClick={() => openEdit(project)}
-                  type="button"
-                >
-                  <Icon name="edit" size="sm" />
-                  Edit
-                </button>
-                {deleteConfirmId === project.id ? (
-                  <div className="delete-confirm">
-                    <span>Are you sure?</span>
-                    <button
-                      className="danger-button"
-                      onClick={() => void handleDelete(project.id)}
-                      type="button"
-                    >
-                      <Icon name="delete" size="sm" />
-                      Delete
-                    </button>
-                    <button
-                      className="ghost-button"
-                      onClick={() => setDeleteConfirmId(null)}
-                      type="button"
-                    >
-                      <Icon name="cancel" size="sm" />
-                      Cancel
-                    </button>
-                  </div>
-                ) : (
-                  <button
-                    className="ghost-button danger-text"
-                    onClick={() => setDeleteConfirmId(project.id)}
-                    type="button"
-                  >
-                    <Icon name="delete" size="sm" />
-                    Delete
-                  </button>
-                )}
-              </div>
-            </article>
-          ))}
-        </div>
-      )}
+			{status === "loading" && <LoadingState message="Loading projects..." />}
 
-      {dialogMode !== "none" && (
-        <div className="dialog-overlay" role="dialog" aria-modal="true">
-          <div className="dialog">
-            <h2>{dialogMode === "create" ? "Create Project" : "Edit Project"}</h2>
-            <form onSubmit={handleSubmit} className="stack">
-              <label className="form-field">
-                Name
-                <input
-                  type="text"
-                  value={formName}
-                  onChange={(e) => setFormName(e.target.value)}
-                  placeholder="Project name"
-                />
-              </label>
-              <label className="form-field">
-                Description
-                <textarea
-                  value={formDescription}
-                  onChange={(e) => setFormDescription(e.target.value)}
-                  placeholder="Optional description"
-                  rows={3}
-                />
-              </label>
-              {formError && <p className="error-text">{formError}</p>}
-              <div className="dialog-actions">
-                <button className="secondary-button" onClick={closeDialog} type="button">
-                  <Icon name="cancel" size="sm" />
-                  Cancel
-                </button>
-                <button className="primary-button" type="submit">
-                  {dialogMode === "create" ? (
-                    <>
-                      <Icon name="add" size="sm" />
-                      Create
-                    </>
-                  ) : (
-                    <>
-                      <Icon name="save" size="sm" />
-                      Save
-                    </>
-                  )}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-    </section>
-  );
+			{status === "error" && (
+				<ErrorState message="Failed to load projects" onRetry={reload} />
+			)}
+
+			{isEmpty && (
+				<EmptyState message="No projects yet. Create your first project above." />
+			)}
+
+			{status === "ready" && safeProjects.length > 0 && (
+				<div className="project-list">
+					{safeProjects.map((project) => (
+						<ProjectCard
+							key={project.id}
+							project={project}
+							expanded={expandedProject === project.id}
+							onToggle={() =>
+								setExpandedProject(
+									expandedProject === project.id ? null : project.id,
+								)
+							}
+							onEdit={() => openEdit(project)}
+							onDelete={() => setDeleteConfirmId(project.id)}
+							deleteConfirm={deleteConfirmId === project.id}
+							onConfirmDelete={() => void handleDelete(project.id)}
+							onCancelDelete={() => setDeleteConfirmId(null)}
+							onCreateWorkspace={(repoId) =>
+								setCreatingWorkspace({ projectId: project.id, repoId })
+							}
+							onWorkspaceAction={(repoId, workspace, action) => {
+								if (action === "sync") {
+									void handleSyncWorkspace(project.id, repoId, workspace);
+								} else if (action === "delete") {
+									void handleDeleteWorkspace(
+										project.id,
+										repoId,
+										workspace,
+									);
+								}
+							}}
+							workspaceLoading={workspaceLoading}
+							showCreateForm={
+								creatingWorkspace?.projectId === project.id
+									? creatingWorkspace.repoId
+									: null
+							}
+							onCancelCreate={() => setCreatingWorkspace(null)}
+							onSubmitCreate={async (repoId, data) =>
+								await handleCreateWorkspace(project.id, repoId, data)
+							}
+						/>
+					))}
+				</div>
+			)}
+
+			{dialogMode !== "none" && (
+				<div className="dialog-overlay" role="dialog" aria-modal="true">
+					<div className="dialog">
+						<h2>
+							{dialogMode === "create" ? "Create Project" : "Edit Project"}
+						</h2>
+						<form onSubmit={handleSubmit} className="stack">
+							<label className="form-field">
+								Name
+								<input
+									type="text"
+									value={formName}
+									onChange={(e) => setFormName(e.target.value)}
+									placeholder="Project name"
+								/>
+							</label>
+							<label className="form-field">
+								Description
+								<textarea
+									value={formDescription}
+									onChange={(e) => setFormDescription(e.target.value)}
+									placeholder="Optional description"
+									rows={3}
+								/>
+							</label>
+							{formError && <p className="error-text">{formError}</p>}
+							<div className="dialog-actions">
+								<button
+									className="secondary-button"
+									onClick={closeDialog}
+									type="button"
+								>
+									<Icon name="cancel" size="sm" />
+									Cancel
+								</button>
+								<button className="primary-button" type="submit">
+									{dialogMode === "create" ? (
+										<>
+											<Icon name="add" size="sm" />
+											Create
+										</>
+									) : (
+										<>
+											<Icon name="save" size="sm" />
+											Save
+										</>
+									)}
+								</button>
+							</div>
+						</form>
+					</div>
+				</div>
+			)}
+		</section>
+	);
 };
+
+/* ─── Project Card ─── */
+
+function ProjectCard({
+	project,
+	expanded,
+	onToggle,
+	onEdit,
+	onDelete,
+	deleteConfirm,
+	onConfirmDelete,
+	onCancelDelete,
+	onCreateWorkspace,
+	onWorkspaceAction,
+	workspaceLoading,
+	showCreateForm,
+	onCancelCreate,
+	onSubmitCreate,
+}: {
+	project: ProjectWithRepos;
+	expanded: boolean;
+	onToggle: () => void;
+	onEdit: () => void;
+	onDelete: () => void;
+	deleteConfirm: boolean;
+	onConfirmDelete: () => void;
+	onCancelDelete: () => void;
+	onCreateWorkspace: (repoId: string) => void;
+	onWorkspaceAction: (
+		repoId: string,
+		workspace: WorkspaceSummary,
+		action: "sync" | "delete",
+	) => void;
+	workspaceLoading: string | null;
+	onCancelCreate: () => void;
+	showCreateForm: string | null;
+	onSubmitCreate: (repoId: string, data: { name: string; branch: string }) => Promise<void>;
+}) {
+	return (
+		<article className="card project-card">
+			<div className="project-info-row">
+				<button
+					className="project-toggle"
+					onClick={onToggle}
+					type="button"
+					aria-expanded={expanded}
+				>
+					<Icon
+						name={expanded ? "chevron-down" : "chevron-right"}
+						size="sm"
+					/>
+					<h3>{project.name}</h3>
+					{project.repositories.length > 0 && (
+						<span className="repo-count">
+							{project.repositories.length} repo
+							{project.repositories.length > 1 ? "s" : ""}
+						</span>
+					)}
+				</button>
+				<div className="project-actions">
+					<button className="ghost-button" onClick={onEdit} type="button">
+						<Icon name="edit" size="sm" />
+						Edit
+					</button>
+					{deleteConfirm ? (
+						<div className="delete-confirm">
+							<span>Are you sure?</span>
+							<button
+								className="danger-button"
+								onClick={onConfirmDelete}
+								type="button"
+							>
+								<Icon name="delete" size="sm" />
+								Delete
+							</button>
+							<button
+								className="ghost-button"
+								onClick={onCancelDelete}
+								type="button"
+							>
+								<Icon name="cancel" size="sm" />
+								Cancel
+							</button>
+						</div>
+					) : (
+						<button
+							className="ghost-button danger-text"
+							onClick={onDelete}
+							type="button"
+						>
+							<Icon name="delete" size="sm" />
+							Delete
+						</button>
+					)}
+				</div>
+			</div>
+
+			{expanded && (
+				<div className="project-detail">
+					{project.repositories.length === 0 ? (
+						<p className="muted">No repositories yet.</p>
+					) : (
+						<div className="repo-list">
+							{project.repositories.map((repo) => (
+								<div key={repo.id} className="repo-block">
+									<div className="repo-header">
+										<h4>{repo.name}</h4>
+										<button
+											className="btn btn-sm btn-primary"
+											onClick={() => onCreateWorkspace(repo.id)}
+											type="button"
+										>
+											<Icon name="add" size="sm" /> New Workspace
+										</button>
+									</div>
+									{showCreateForm === repo.id && (
+										<WorkspaceCreateForm
+											projectId={project.id}
+											repoId={repo.id}
+											onSubmit={(data) =>
+												onSubmitCreate(repo.id, data)
+											}
+											onCancel={onCancelCreate}
+										/>
+									)}
+									{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={() =>
+																onWorkspaceAction(
+																	repo.id,
+																	ws,
+																	"sync",
+																)
+															}
+														>
+															<Icon name="refresh" size="sm" />
+														</button>
+														<button
+															type="button"
+															className="danger-text"
+															disabled={
+																workspaceLoading === ws.id
+															}
+															onClick={() =>
+																onWorkspaceAction(
+																	repo.id,
+																	ws,
+																	"delete",
+																)
+															}
+														>
+															<Icon name="delete" size="sm" />
+														</button>
+													</div>
+												</div>
+											))}
+										</div>
+									)}
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			)}
+		</article>
+	);
+}
diff --git a/apps/web/src/pages/sessions.tsx b/apps/web/src/pages/sessions.tsx
index dd95c27..54d9965 100644
--- a/apps/web/src/pages/sessions.tsx
+++ b/apps/web/src/pages/sessions.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { listProjects } from "../api/projects";
-import type { Project } from "../types";
+import type { ProjectWithRepos } from "../types";
 import { listRepositories, type GitRepository } from "../api/git_repositories";
 import {
   getUserSessions,
@@ -24,7 +24,7 @@ export const SessionsPage = () => {
   const [sessions, setSessions] = useState<Session[]>([]);
   const [lastSessionId, setLastSessionId] = useState<string | null>(null);
 
-  const [projects, setProjects] = useState<Project[]>([]);
+  const [projects, setProjects] = useState<ProjectWithRepos[]>([]);
   const [repositories, setRepositories] = useState<GitRepository[]>([]);
   const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
   const [selectedProject, setSelectedProject] = useState<string>("");
diff --git a/apps/web/src/router.tsx b/apps/web/src/router.tsx
index 9131e30..dd393fa 100644
--- a/apps/web/src/router.tsx
+++ b/apps/web/src/router.tsx
@@ -9,7 +9,6 @@ import { ProjectsPage } from "./pages/projects";
 import { GitRepositoriesPage } from "./pages/git-repositories";
 import { GitHistoryPage } from "./pages/git-history";
 import { ProjectSettingsPage } from "./pages/project-settings";
-import { RepoWorkspace } from "./pages/repo-workspace";
 import { SettingsPage, GeneralSettingsTab } from "./pages/settings";
 import { TerminalPage } from "./pages/terminal";
 import { ToolWorkshopPage } from "./pages/tool-workshop";
@@ -37,7 +36,6 @@ export const AppRouter = () => {
 			>
 				<Route index element={<HomePage />} />
 				<Route path="projects" element={<ProjectsPage />} />
-				<Route path="projects/:projectId" element={<RepoWorkspace />} />
 				<Route
 					path="projects/:projectId/repositories"
 					element={<GitRepositoriesPage />}
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index b15d9eb..4960c82 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -5322,3 +5322,135 @@ a:active,
 .workspace-header-link:hover .workspace-header h4 {
 	color: var(--brand);
 }
+
+/* ─── Projects Page Refresh ─── */
+
+.project-info-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--space-3);
+	flex-wrap: wrap;
+}
+
+.project-toggle {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	background: none;
+	border: none;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+	padding: var(--space-2);
+	border-radius: 10px;
+	flex: 1;
+}
+
+.project-toggle:hover {
+	background: var(--bg);
+}
+
+.project-toggle h3 {
+	margin: 0;
+	font-size: var(--font-size-lg);
+}
+
+.repo-count {
+	font-size: var(--font-size-xs);
+	padding: var(--space-1) var(--space-2);
+	background: var(--bg);
+	border-radius: 999px;
+	color: var(--muted);
+}
+
+.project-detail {
+	margin-top: var(--space-4);
+	padding-top: var(--space-4);
+	border-top: 1px solid var(--border);
+}
+
+.repo-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-4);
+}
+
+.repo-block {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+	padding: var(--space-4);
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+}
+
+.repo-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--space-3);
+	flex-wrap: wrap;
+}
+
+.repo-header h4 {
+	margin: 0;
+	font-size: var(--font-size-base);
+}
+
+.workspace-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: var(--space-3);
+}
+
+.workspace-chip {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+	padding: var(--space-3);
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	font-size: var(--font-size-sm);
+}
+
+.workspace-chip a {
+	font-weight: 600;
+	color: var(--brand);
+}
+
+.workspace-chip .ws-branch {
+	color: var(--muted);
+	font-size: var(--font-size-xs);
+}
+
+.workspace-chip .ws-instances {
+	font-size: var(--font-size-xs);
+	color: var(--success);
+}
+
+.workspace-chip .ws-actions {
+	display: flex;
+	gap: var(--space-1);
+	margin-top: var(--space-1);
+}
+
+.workspace-chip .ws-actions button {
+	background: none;
+	border: none;
+	color: var(--muted);
+	cursor: pointer;
+	padding: var(--space-1);
+	border-radius: 4px;
+}
+
+.workspace-chip .ws-actions button:hover {
+	background: var(--bg);
+	color: var(--ink);
+}
+
+.workspace-chip .ws-actions button.danger-text:hover {
+	color: var(--danger);
+}
diff --git a/apps/web/src/types.ts b/apps/web/src/types.ts
index d564bcc..c00b186 100644
--- a/apps/web/src/types.ts
+++ b/apps/web/src/types.ts
@@ -16,3 +16,28 @@ export type Project = {
   owner_id: string;
   default_ssh_key_id: string | null;
 };
+
+export type WorkspaceSummary = {
+  id: string;
+  name: string;
+  branch: string;
+  status: string;
+  instance_count: number;
+};
+
+export type RepositorySummary = {
+  id: string;
+  name: string;
+  remote_url: string;
+  workspaces: WorkspaceSummary[];
+};
+
+export type ProjectWithRepos = {
+  id: string;
+  name: string;
+  description: string | null;
+  owner_id: string;
+  default_ssh_key_id: string | null;
+  repositories: RepositorySummary[];
+  created_at: string;
+};
diff --git a/apps/web/src/utils/icons.ts b/apps/web/src/utils/icons.ts
index 4db62f6..bca4188 100644
--- a/apps/web/src/utils/icons.ts
+++ b/apps/web/src/utils/icons.ts
@@ -1,180 +1 @@
-import {
-	House,
-	Folder,
-	GitBranch,
-	Gear,
-	User,
-	SignOut,
-	Plus,
-	PencilSimple,
-	Trash,
-	FloppyDisk,
-	X,
-	ArrowsClockwise,
-	Copy,
-	MagnifyingGlass,
-	List,
-	Check,
-	Warning,
-	Info,
-	Spinner,
-	GitCommit,
-	GitMerge,
-	ClockCounterClockwise,
-	ArrowDown,
-	ArrowUp,
-	File,
-	FileText,
-	Image,
-	Binary,
-	Code,
-	ArrowSquareOut,
-	Play,
-	Stop,
-	Terminal,
-	ArrowLeft,
-	Bell,
-} from "@phosphor-icons/react";
-
-export type IconName =
-	| "dashboard"
-	| "projects"
-	| "repositories"
-	| "settings"
-	| "profile"
-	| "logout"
-	| "add"
-	| "edit"
-	| "delete"
-	| "save"
-	| "cancel"
-	| "refresh"
-	| "copy"
-	| "search"
-	| "menu"
-	| "close"
-	| "success"
-	| "error"
-	| "warning"
-	| "info"
-	| "loading"
-	| "branch"
-	| "commit"
-	| "merge"
-	| "history"
-	| "pull"
-	| "push"
-	| "fetch"
-	| "file"
-	| "folder"
-	| "code"
-	| "document"
-	| "image"
-	| "binary"
-	| "external"
-	| "play"
-	| "stop"
-	| "terminal"
-	| "arrow-left"
-	| "bell";
-
-export const iconRegistry: Record<
-	IconName,
-	React.ComponentType<{
-		size?: number | string;
-		weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
-	}>
-> = {
-	// Navigation
-	dashboard: House,
-	projects: Folder,
-	repositories: GitBranch,
-	settings: Gear,
-	profile: User,
-	logout: SignOut,
-
-	// Actions
-	add: Plus,
-	edit: PencilSimple,
-	delete: Trash,
-	save: FloppyDisk,
-	cancel: X,
-	refresh: ArrowsClockwise,
-	copy: Copy,
-	search: MagnifyingGlass,
-	menu: List,
-	close: X,
-
-	// Status
-	success: Check,
-	error: X,
-	warning: Warning,
-	info: Info,
-	loading: Spinner,
-
-	// Git
-	branch: GitBranch,
-	commit: GitCommit,
-	merge: GitMerge,
-	history: ClockCounterClockwise,
-	pull: ArrowDown,
-	push: ArrowUp,
-	fetch: ArrowsClockwise,
-
-	// Files
-	file: File,
-	folder: Folder,
-	code: Code,
-	document: FileText,
-	image: Image,
-	binary: Binary,
-
-	// Instance actions
-	external: ArrowSquareOut,
-	play: Play,
-	stop: Stop,
-	terminal: Terminal,
-	"arrow-left": ArrowLeft,
-	bell: Bell,
-};
-
-export const iconCategories = {
-	navigation: [
-		"dashboard",
-		"projects",
-		"repositories",
-		"settings",
-		"profile",
-		"logout",
-	] as IconName[],
-	actions: [
-		"add",
-		"edit",
-		"delete",
-		"save",
-		"cancel",
-		"refresh",
-		"copy",
-		"search",
-		"menu",
-		"close",
-	] as IconName[],
-	status: ["success", "error", "warning", "info", "loading"] as IconName[],
-	git: [
-		"branch",
-		"commit",
-		"merge",
-		"history",
-		"pull",
-		"push",
-		"fetch",
-	] as IconName[],
-	files: [
-		"file",
-		"folder",
-		"code",
-		"document",
-		"image",
-		"binary",
-	] as IconName[],
-};
+export type { IconName } from "../components/icon";