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/app-shell.tsx

@@ -2,6 +2,7 @@ import { Link, NavLink, Outlet, useLocation } from "react-router-dom";
 
 import type { Session } from "../api/sessions";
 import { useTheme } from "../hooks/use-theme";
+import { openSession } from "../utils/open-session";
 import { useAuth } from "../state/auth";
 import { useSessions } from "../state/sessions";
 import { useMobileViewport } from "../hooks/use-mobile-viewport";
@@ -33,19 +34,6 @@ const NAV_ITEMS: {
 const SessionItem = ({ session }: { session: Session }) => {
 	const isRunning = session.status === "running";
 
-	// Determine the link target:
-	// - Web tools open their tunnel URL
-	// - Terminal tools open the terminal page
-	// - Everything else falls back to the project page
-	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 contextName = session.workspace_name || session.repository_name;
 	const tooltipParts = [
 		session.display_name,
@@ -56,10 +44,9 @@ const SessionItem = ({ session }: { session: Session }) => {
 	tooltipParts.push(`(${session.status})`);
 
 	return (
-		<a
-			href={href}
-			target={`session-${session.id}`}
-			rel="noreferrer"
+		<button
+			type="button"
+			onClick={() => openSession(session)}
 			className="nav-item session-item"
 			title={tooltipParts.join(" · ")}
 		>
@@ -76,7 +63,7 @@ const SessionItem = ({ session }: { session: Session }) => {
 					{session.tool_type_name} · {session.project_name}
 				</span>
 			</span>
-		</a>
+		</button>
 	);
 };
 

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>
 	);
 }