fix: convert navigate() calls to Link components for cmd-click support

Replaced button/div onClick + navigate() patterns with React Router
<Link> components so that cmd-click (or ctrl-click) opens pages in a
new browser tab. Changes across:

- AgentDetail: RunListItem, "Issues Touched" items, "Manage" config
  link, "Back to runs" mobile button
- CompanySwitcher: "Company Settings" and "Manage Companies" items
- Approvals: pass detailLink prop instead of onOpen callback
- Org: OrgTree nodes now render as Links

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/components/CompanySwitcher.tsx

@@ -1,5 +1,5 @@
 import { ChevronsUpDown, Plus, Settings } from "lucide-react";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useCompany } from "../context/CompanyContext";
 import {
   DropdownMenu,
@@ -26,7 +26,6 @@ function statusDotColor(status?: string): string {
 
 export function CompanySwitcher() {
   const { companies, selectedCompany, setSelectedCompanyId } = useCompany();
-  const navigate = useNavigate();
 
   return (
     <DropdownMenu>
@@ -63,13 +62,17 @@ export function CompanySwitcher() {
           <DropdownMenuItem disabled>No companies</DropdownMenuItem>
         )}
         <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={() => navigate("/company/settings")}>
-          <Settings className="h-4 w-4 mr-2" />
-          Company Settings
+        <DropdownMenuItem asChild>
+          <Link to="/company/settings" className="no-underline text-inherit">
+            <Settings className="h-4 w-4 mr-2" />
+            Company Settings
+          </Link>
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => navigate("/companies")}>
-          <Plus className="h-4 w-4 mr-2" />
-          Manage Companies
+        <DropdownMenuItem asChild>
+          <Link to="/companies" className="no-underline text-inherit">
+            <Plus className="h-4 w-4 mr-2" />
+            Manage Companies
+          </Link>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

ui/src/pages/AgentDetail.tsx

@@ -604,8 +604,6 @@ function SummaryRow({ label, children }: { label: string; children: React.ReactN
 }
 
 function LatestRunCard({ runs, agentId }: { runs: HeartbeatRun[]; agentId: string }) {
-  const navigate = useNavigate();
-
   if (runs.length === 0) return null;
 
   const sorted = [...runs].sort(
@@ -687,8 +685,6 @@ function AgentOverview({
   directReports: Agent[];
   agentId: string;
 }) {
-  const navigate = useNavigate();
-
   return (
     <div className="space-y-8">
       {/* Latest Run */}
@@ -1023,7 +1019,6 @@ function ConfigSummary({
   reportsToAgent: Agent | null;
   directReports: Agent[];
 }) {
-  const navigate = useNavigate();
   const config = agent.adapterConfig as Record<string, unknown>;
   const promptText = typeof config?.promptTemplate === "string" ? config.promptTemplate : "";
 
@@ -1031,13 +1026,13 @@ function ConfigSummary({
     <div className="space-y-3">
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-medium">Configuration</h3>
-        <button
-          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
-          onClick={() => navigate(`/agents/${agentId}/configure`)}
+        <Link
+          to={`/agents/${agentId}/configure`}
+          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors no-underline"
         >
           <Settings className="h-3 w-3" />
           Manage &rarr;
-        </button>
+        </Link>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div className="border border-border rounded-lg p-4 space-y-3">
@@ -1393,7 +1388,6 @@ function ConfigurationTab({
 /* ---- Runs Tab ---- */
 
 function RunListItem({ run, isSelected, agentId }: { run: HeartbeatRun; isSelected: boolean; agentId: string }) {
-  const navigate = useNavigate();
   const statusInfo = runStatusIcons[run.status] ?? { icon: Clock, color: "text-neutral-400" };
   const StatusIcon = statusInfo.icon;
   const metrics = runMetrics(run);
@@ -1402,12 +1396,12 @@ function RunListItem({ run, isSelected, agentId }: { run: HeartbeatRun; isSelect
     : run.error ?? "";
 
   return (
-    <button
+    <Link
+      to={isSelected ? `/agents/${agentId}/runs` : `/agents/${agentId}/runs/${run.id}`}
       className={cn(
-        "flex flex-col gap-1 w-full px-3 py-2.5 text-left border-b border-border last:border-b-0 transition-colors",
+        "flex flex-col gap-1 w-full px-3 py-2.5 text-left border-b border-border last:border-b-0 transition-colors no-underline text-inherit",
         isSelected ? "bg-accent/40" : "hover:bg-accent/20",
       )}
-      onClick={() => navigate(isSelected ? `/agents/${agentId}/runs` : `/agents/${agentId}/runs/${run.id}`)}
     >
       <div className="flex items-center gap-2">
         <StatusIcon className={cn("h-3.5 w-3.5 shrink-0", statusInfo.color, run.status === "running" && "animate-spin")} />
@@ -1438,12 +1432,11 @@ function RunListItem({ run, isSelected, agentId }: { run: HeartbeatRun; isSelect
           {metrics.cost > 0 && <span>${metrics.cost.toFixed(3)}</span>}
         </div>
       )}
-    </button>
+    </Link>
   );
 }
 
 function RunsTab({ runs, companyId, agentId, selectedRunId, adapterType }: { runs: HeartbeatRun[]; companyId: string; agentId: string; selectedRunId: string | null; adapterType: string }) {
-  const navigate = useNavigate();
   const { isMobile } = useSidebar();
 
   if (runs.length === 0) {
@@ -1464,13 +1457,13 @@ function RunsTab({ runs, companyId, agentId, selectedRunId, adapterType }: { run
     if (selectedRun) {
       return (
         <div className="space-y-3">
-          <button
-            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-            onClick={() => navigate(`/agents/${agentId}/runs`)}
+          <Link
+            to={`/agents/${agentId}/runs`}
+            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors no-underline"
           >
             <ArrowLeft className="h-3.5 w-3.5" />
             Back to runs
-          </button>
+          </Link>
           <RunDetail key={selectedRun.id} run={selectedRun} adapterType={adapterType} />
         </div>
       );
@@ -1513,7 +1506,6 @@ function RunsTab({ runs, companyId, agentId, selectedRunId, adapterType }: { run
 
 function RunDetail({ run, adapterType }: { run: HeartbeatRun; adapterType: string }) {
   const queryClient = useQueryClient();
-  const navigate = useNavigate();
   const metrics = runMetrics(run);
   const [sessionOpen, setSessionOpen] = useState(false);
   const [claudeLoginResult, setClaudeLoginResult] = useState<ClaudeLoginResult | null>(null);
@@ -1758,17 +1750,17 @@ function RunDetail({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
           <span className="text-xs font-medium text-muted-foreground">Issues Touched ({touchedIssues.length})</span>
           <div className="border border-border rounded-lg divide-y divide-border">
             {touchedIssues.map((issue) => (
-              <button
+              <Link
                 key={issue.issueId}
-                className="flex items-center justify-between w-full px-3 py-2 text-xs hover:bg-accent/20 transition-colors text-left"
-                onClick={() => navigate(`/issues/${issue.identifier ?? issue.issueId}`)}
+                to={`/issues/${issue.identifier ?? issue.issueId}`}
+                className="flex items-center justify-between w-full px-3 py-2 text-xs hover:bg-accent/20 transition-colors text-left no-underline text-inherit"
               >
                 <div className="flex items-center gap-2 min-w-0">
                   <StatusBadge status={issue.status} />
                   <span className="truncate">{issue.title}</span>
                 </div>
                 <span className="font-mono text-muted-foreground shrink-0 ml-2">{issue.identifier ?? issue.issueId.slice(0, 8)}</span>
-              </button>
+              </Link>
             ))}
           </div>
         </div>

ui/src/pages/Approvals.tsx

@@ -117,7 +117,7 @@ export function Approvals() {
               requesterAgent={approval.requestedByAgentId ? (agents ?? []).find((a) => a.id === approval.requestedByAgentId) ?? null : null}
               onApprove={() => approveMutation.mutate(approval.id)}
               onReject={() => rejectMutation.mutate(approval.id)}
-              onOpen={() => navigate(`/approvals/${approval.id}`)}
+              detailLink={`/approvals/${approval.id}`}
               isPending={approveMutation.isPending || rejectMutation.isPending}
             />
           ))}

ui/src/pages/Org.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { agentsApi, type OrgNode } from "../api/agents";
 import { useCompany } from "../context/CompanyContext";
@@ -13,16 +13,16 @@ import { cn } from "../lib/utils";
 function OrgTree({
   nodes,
   depth = 0,
-  onSelect,
+  hrefFn,
 }: {
   nodes: OrgNode[];
   depth?: number;
-  onSelect: (id: string) => void;
+  hrefFn: (id: string) => string;
 }) {
   return (
     <div>
       {nodes.map((node) => (
-        <OrgTreeNode key={node.id} node={node} depth={depth} onSelect={onSelect} />
+        <OrgTreeNode key={node.id} node={node} depth={depth} hrefFn={hrefFn} />
       ))}
     </div>
   );
@@ -31,26 +31,27 @@ function OrgTree({
 function OrgTreeNode({
   node,
   depth,
-  onSelect,
+  hrefFn,
 }: {
   node: OrgNode;
   depth: number;
-  onSelect: (id: string) => void;
+  hrefFn: (id: string) => string;
 }) {
   const [expanded, setExpanded] = useState(true);
   const hasChildren = node.reports.length > 0;
 
   return (
     <div>
-      <div
-        className="flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors cursor-pointer hover:bg-accent/50"
+      <Link
+        to={hrefFn(node.id)}
+        className="flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors cursor-pointer hover:bg-accent/50 no-underline text-inherit"
         style={{ paddingLeft: `${depth * 16 + 12}px` }}
-        onClick={() => onSelect(node.id)}
       >
         {hasChildren ? (
           <button
             className="p-0.5"
             onClick={(e) => {
+              e.preventDefault();
               e.stopPropagation();
               setExpanded(!expanded);
             }}
@@ -79,9 +80,9 @@ function OrgTreeNode({
         <span className="font-medium flex-1">{node.name}</span>
         <span className="text-xs text-muted-foreground">{node.role}</span>
         <StatusBadge status={node.status} />
-      </div>
+      </Link>
       {hasChildren && expanded && (
-        <OrgTree nodes={node.reports} depth={depth + 1} onSelect={onSelect} />
+        <OrgTree nodes={node.reports} depth={depth + 1} hrefFn={hrefFn} />
       )}
     </div>
   );
@@ -90,7 +91,6 @@ function OrgTreeNode({
 export function Org() {
   const { selectedCompanyId } = useCompany();
   const { setBreadcrumbs } = useBreadcrumbs();
-  const navigate = useNavigate();
 
   useEffect(() => {
     setBreadcrumbs([{ label: "Org Chart" }]);
@@ -120,7 +120,7 @@ export function Org() {
 
       {data && data.length > 0 && (
         <div className="border border-border py-1">
-          <OrgTree nodes={data} onSelect={(id) => navigate(`/agents/${id}`)} />
+          <OrgTree nodes={data} hrefFn={(id) => `/agents/${id}`} />
         </div>
       )}
     </div>