feat: make agent instance name a navigable link in data table

Instance names in the AgentHealth data table are now clickable amber
links that navigate to the agent instance page (/agents/:appId/:id).
Row click still opens the detail slide-in panel.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/AgentHealth/AgentHealth.module.css

@@ -98,6 +98,17 @@
   color: var(--text-primary);
 }
 
+.instanceLink {
+  font-weight: 600;
+  color: var(--amber);
+  cursor: pointer;
+}
+
+.instanceLink:hover {
+  text-decoration: underline;
+  color: var(--amber-deep);
+}
+
 .instanceMeta {
   color: var(--text-muted);
   white-space: nowrap;

ui/src/pages/AgentHealth/AgentHealth.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react';
-import { useParams } from 'react-router';
+import { useParams, useNavigate } from 'react-router';
 import {
   StatCard, StatusDot, Badge, MonoText, ProgressBar,
   GroupCard, DataTable, LineChart, EventFeed, DetailPanel,
@@ -240,6 +240,7 @@ function mapLogLevel(level: string): LogEntry['level'] {
 
 export default function AgentHealth() {
   const { appId } = useParams();
+  const navigate = useNavigate();
   const { data: agents } = useAgents(undefined, appId);
   const [eventSortAsc, setEventSortAsc] = useState(false);
   const [eventRefreshTo, setEventRefreshTo] = useState<string | undefined>();
@@ -311,7 +312,16 @@ export default function AgentHealth() {
         key: 'name',
         header: 'Instance',
         render: (_val, row) => (
-          <MonoText size="sm" className={styles.instanceName}>{row.name ?? row.id}</MonoText>
+          <MonoText
+            size="sm"
+            className={styles.instanceLink}
+            onClick={(e: React.MouseEvent) => {
+              e.stopPropagation();
+              navigate(`/agents/${row.application}/${row.id}`);
+            }}
+          >
+            {row.name ?? row.id}
+          </MonoText>
         ),
       },
       {