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
2026-06-16 21:20:04 +00:00
parent 39bac24100
commit 563ff13969
6 changed files with 958 additions and 34 deletions
@@ -0,0 +1,200 @@
+import { useMemo } from "react";
+import { Link } from "react-router-dom";
+
+import { Icon } from "../../icon";
+import type { Session } from "../../../api/sessions";
+import type { IconName } from "../../../utils/icons";
+import type { ProjectWithRepos, RepositorySummary } from "../../../types";
+
+interface ProjectListItemProps {
+	project: ProjectWithRepos;
+	deleteConfirm: boolean;
+	onEdit: () => void;
+	onDelete: () => void;
+	onConfirmDelete: () => void;
+	onCancelDelete: () => void;
+	sessions: Session[];
+}
+
+export const ProjectListItem = ({
+	project,
+	deleteConfirm,
+	onEdit,
+	onDelete,
+	onConfirmDelete,
+	onCancelDelete,
+	sessions,
+}: ProjectListItemProps) => {
+	return (
+		<article className="project-list-item">
+			<header className="project-list-item-header">
+				<div className="project-list-item-title">
+					<h3>{project.name}</h3>
+					{project.description && (
+						<p className="muted">{project.description}</p>
+					)}
+				</div>
+				<div className="project-list-item-actions">
+					{deleteConfirm ? (
+						<div className="delete-confirm">
+							<span>Are you sure?</span>
+							<button
+								className="btn btn-sm btn-danger"
+								onClick={onConfirmDelete}
+								type="button"
+							>
+								<Icon name="delete" size="sm" /> Delete
+							</button>
+							<button
+								className="btn btn-sm btn-secondary"
+								onClick={onCancelDelete}
+								type="button"
+							>
+								<Icon name="cancel" size="sm" /> Cancel
+							</button>
+						</div>
+					) : (
+						<>
+							<button
+								className="btn btn-sm btn-secondary"
+								onClick={onEdit}
+								type="button"
+							>
+								<Icon name="edit" size="sm" /> Edit
+							</button>
+							<button
+								className="btn btn-sm btn-danger"
+								onClick={onDelete}
+								type="button"
+							>
+								<Icon name="delete" size="sm" /> Delete
+							</button>
+						</>
+					)}
+				</div>
+			</header>
+
+			<div className="project-repo-list">
+				{project.repositories.length === 0 ? (
+					<p className="muted">No repositories.</p>
+				) : (
+					project.repositories.map((repo) => (
+						<ProjectRepoItem
+							key={repo.id}
+							repo={repo}
+							project={project}
+							sessions={sessions}
+						/>
+					))
+				)}
+			</div>
+		</article>
+	);
+};
+
+function ProjectRepoItem({
+	repo,
+	project,
+	sessions,
+}: {
+	repo: RepositorySummary;
+	project: ProjectWithRepos;
+	sessions: Session[];
+}) {
+	const sessionsByWorkspace = useMemo(() => {
+		const map = new Map<string, Session[]>();
+		for (const ws of repo.workspaces) {
+			map.set(ws.name, []);
+		}
+		for (const session of sessions) {
+			if (
+				session.project_id !== project.id ||
+				session.repository_id !== repo.id
+			) {
+				continue;
+			}
+			if (session.status !== "running") continue;
+			const list = map.get(session.workspace_name || "") || [];
+			list.push(session);
+			map.set(session.workspace_name || "", list);
+		}
+		return map;
+	}, [sessions, project.id, repo.id, repo.workspaces]);
+
+	const branch = useMemo(() => {
+		const firstWs = repo.workspaces[0];
+		if (!firstWs) return "—";
+		return firstWs.branch;
+	}, [repo.workspaces]);
+
+	return (
+		<div className="project-repo-item">
+			<div className="project-repo-item-header">
+				<Icon name="folder" size="sm" />
+				<span className="project-repo-name">{repo.name}</span>
+				<span className="project-repo-branch">
+					<Icon name="branch" size="sm" /> {branch}
+				</span>
+			</div>
+
+			<div className="project-repo-workspaces">
+				{repo.workspaces.length === 0 ? (
+					<p className="muted text-sm">No workspaces.</p>
+				) : (
+					repo.workspaces.map((ws) => {
+						const runningSessions = sessionsByWorkspace.get(ws.name) || [];
+						return (
+							<div key={ws.id} className="project-repo-workspace">
+								<Link className="workspace-name" to={`/workspaces/${ws.id}`}>
+									{ws.name}
+								</Link>
+								{runningSessions.length === 0 ? (
+									<span className="muted text-xs">No running tools</span>
+								) : (
+									<ul className="workspace-tool-list">
+										{runningSessions.map((session) => (
+											<li key={session.id}>
+												<SessionToolLink session={session} />
+											</li>
+										))}
+									</ul>
+								)}
+							</div>
+						);
+					})
+				)}
+			</div>
+		</div>
+	);
+}
+
+function SessionToolLink({ session }: { session: Session }) {
+	const hasTerminal = session.tool_type_interfaces.includes("terminal");
+	const hasWeb = session.tool_type_interfaces.includes("web");
+	const href =
+		session.url && hasWeb
+			? session.url
+			: hasTerminal
+				? `/instances/${session.id}/terminal`
+				: `/projects/${session.project_id}`;
+
+	const isExternal = href.startsWith("http");
+
+	return (
+		<a
+			href={href}
+			target={isExternal ? `session-${session.id}` : undefined}
+			rel={isExternal ? "noreferrer" : undefined}
+			className="workspace-tool-link"
+			title={`${session.display_name} (${session.status})`}
+		>
+			<span
+				className={`session-status-dot ${session.status === "running" ? "running" : ""}`}
+			/>
+			<Icon name={(session.tool_icon as IconName) || "terminal"} size="sm" />
+			<span className="tool-name">
+				{session.display_name || session.tool_type_name}
+			</span>
+		</a>
+	);
+}