feat(web/ui): unify session opening and add repo card in project list

- Add openSession utility with tab deduplication/focus
- Use openSession in navbar live sessions, use-instance-actions, and project tool links
- Pass onAddRepository to ProjectListItem and add dashed 'Add Repository' card
- Style add-repo card in projects.css

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

@@ -5,6 +5,7 @@ import { Icon } from "../../icon";
 import type { Session } from "../../../api/sessions";
 import type { IconName } from "../../../utils/icons";
 import type { ProjectWithRepos, RepositorySummary } from "../../../types";
+import { openSession } from "../../../utils/open-session";
 
 interface ProjectListItemProps {
 	project: ProjectWithRepos;
@@ -13,6 +14,7 @@ interface ProjectListItemProps {
 	onDelete: () => void;
 	onConfirmDelete: () => void;
 	onCancelDelete: () => void;
+	onAddRepository?: () => void;
 	sessions: Session[];
 }
 
@@ -23,6 +25,7 @@ export const ProjectListItem = ({
 	onDelete,
 	onConfirmDelete,
 	onCancelDelete,
+	onAddRepository,
 	sessions,
 }: ProjectListItemProps) => {
 	return (
@@ -75,17 +78,23 @@ export const ProjectListItem = ({
 			</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}
-						/>
-					))
+				{project.repositories.map((repo) => (
+					<ProjectRepoItem
+						key={repo.id}
+						repo={repo}
+						project={project}
+						sessions={sessions}
+					/>
+				))}
+				{onAddRepository && (
+					<button
+						type="button"
+						className="project-repo-item project-add-repo-card"
+						onClick={onAddRepository}
+					>
+						<Icon name="add" size="md" />
+						<span className="project-repo-name">Add Repository</span>
+					</button>
 				)}
 			</div>
 		</article>
@@ -169,22 +178,10 @@ function ProjectRepoItem({
 }
 
 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}
+		<button
+			type="button"
+			onClick={() => openSession(session)}
 			className="workspace-tool-link"
 			title={`${session.display_name} (${session.status})`}
 		>
@@ -195,6 +192,6 @@ function SessionToolLink({ session }: { session: Session }) {
 			<span className="tool-name">
 				{session.display_name || session.tool_type_name}
 			</span>
-		</a>
+		</button>
 	);
 }