feat(web/ui): rework project pane into flat list with repo/workspace/tool hierarchy

- Add ProjectListItem component with project header actions
- Show repositories horizontally with branch labels
- List workspaces vertically under each repo
- Show running tools per workspace from useSessions
- Link workspace names to /workspaces/:id
- Link tool names to web URL or terminal page
- Keep existing mobile view and dialogs unchanged

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

@@ -188,6 +188,154 @@
 	}
 }
 
+/* ─── New Project Pane List Layout ─── */
+.project-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-4);
+}
+
+.project-list-item {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-4);
+	padding: var(--space-4);
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-md);
+}
+
+.project-list-item-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--space-3);
+}
+
+.project-list-item-title h3 {
+	margin: 0;
+	font-size: var(--font-size-lg);
+}
+
+.project-list-item-title p {
+	margin: var(--space-1) 0 0;
+}
+
+.project-list-item-actions {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	flex-shrink: 0;
+}
+
+.project-repo-list {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--space-3);
+}
+
+.project-repo-item {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+	min-width: 260px;
+	max-width: 320px;
+	flex: 1 1 260px;
+	padding: var(--space-3);
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-md);
+}
+
+.project-repo-item-header {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	padding-bottom: var(--space-2);
+	border-bottom: 1px solid var(--border);
+}
+
+.project-repo-name {
+	font-weight: 600;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.project-repo-branch {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-1);
+	font-size: var(--font-size-xs);
+	color: var(--muted);
+}
+
+.project-repo-workspaces {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+}
+
+.project-repo-workspace {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+}
+
+.workspace-name {
+	font-weight: 500;
+	color: var(--brand);
+}
+
+.workspace-name:hover {
+	text-decoration: underline;
+}
+
+.workspace-tool-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-1);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.workspace-tool-link {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	padding: var(--space-1) var(--space-2);
+	border-radius: var(--radius-md);
+	background: var(--panel);
+	border: 1px solid var(--border);
+	color: var(--ink);
+	font-size: var(--font-size-sm);
+	text-decoration: none;
+}
+
+.workspace-tool-link:hover {
+	background: var(--bg);
+}
+
+.session-status-dot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--muted);
+}
+
+.session-status-dot.running {
+	background: var(--success);
+}
+
+.tool-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 /* Inline radio buttons for repository creation mode */
 .repo-mode-radios {
 	display: flex;