feat(ui): admin page for outbound connections list + navigation

Adds OutboundConnectionsPage (list view with delete), lazy route at
/admin/outbound-connections, and Outbound Connections nav node in the
admin sidebar tree. No test file created — UI codebase has no existing
test infrastructure to build on.

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

ui/src/components/sidebar-utils.ts

@@ -107,6 +107,7 @@ export function buildAdminTreeNodes(opts?: { infrastructureEndpoints?: boolean }
     ...(showInfra ? [{ id: 'admin:database', label: 'Database', path: '/admin/database' }] : []),
     { id: 'admin:environments', label: 'Environments', path: '/admin/environments' },
     { id: 'admin:oidc', label: 'OIDC', path: '/admin/oidc' },
+    { id: 'admin:outbound-connections', label: 'Outbound Connections', path: '/admin/outbound-connections' },
     { id: 'admin:sensitive-keys', label: 'Sensitive Keys', path: '/admin/sensitive-keys' },
     { id: 'admin:rbac', label: 'Users & Roles', path: '/admin/rbac' },
   ];

ui/src/pages/Admin/OutboundConnectionsPage.tsx

@@ -0,0 +1,87 @@
+import { Link } from 'react-router-dom';
+import { Button, Badge, SectionHeader, useToast } from '@cameleer/design-system';
+import { PageLoader } from '../../components/PageLoader';
+import {
+  useOutboundConnections,
+  useDeleteOutboundConnection,
+  type OutboundConnectionDto,
+  type TrustMode,
+} from '../../api/queries/admin/outboundConnections';
+import sectionStyles from '../../styles/section-card.module.css';
+
+export default function OutboundConnectionsPage() {
+  const { data, isLoading, error } = useOutboundConnections();
+  const deleteMut = useDeleteOutboundConnection();
+  const { toast } = useToast();
+
+  if (isLoading) return <PageLoader />;
+  if (error) return <div>Failed to load outbound connections: {String(error)}</div>;
+
+  const rows = data ?? [];
+
+  const onDelete = (c: OutboundConnectionDto) => {
+    if (!confirm(`Delete outbound connection "${c.name}"?`)) return;
+    deleteMut.mutate(c.id, {
+      onSuccess: () => toast({ title: 'Deleted', description: c.name, variant: 'success' }),
+      onError: (e) => toast({ title: 'Delete failed', description: String(e), variant: 'error' }),
+    });
+  };
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <SectionHeader>Outbound Connections</SectionHeader>
+        <Link to="/admin/outbound-connections/new">
+          <Button variant="primary">New connection</Button>
+        </Link>
+      </div>
+      <div className={sectionStyles.section}>
+        {rows.length === 0 ? (
+          <p>No outbound connections yet. Create one to enable alerting webhooks or other outbound integrations.</p>
+        ) : (
+          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr>
+                <th style={{ textAlign: 'left' }}>Name</th>
+                <th style={{ textAlign: 'left' }}>Host</th>
+                <th style={{ textAlign: 'left' }}>Method</th>
+                <th style={{ textAlign: 'left' }}>Trust</th>
+                <th style={{ textAlign: 'left' }}>Auth</th>
+                <th style={{ textAlign: 'left' }}>Envs</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((c) => (
+                <tr key={c.id}>
+                  <td><Link to={`/admin/outbound-connections/${c.id}`}>{c.name}</Link></td>
+                  <td><code>{safeHost(c.url)}</code></td>
+                  <td>{c.method}</td>
+                  <td><TrustBadge mode={c.tlsTrustMode} /></td>
+                  <td>{c.authKind}</td>
+                  <td>{c.allowedEnvironmentIds.length > 0 ? c.allowedEnvironmentIds.length : 'all'}</td>
+                  <td>
+                    <Button variant="secondary" onClick={() => onDelete(c)} disabled={deleteMut.isPending}>
+                      Delete
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function safeHost(url: string): string {
+  try { return new URL(url).host; }
+  catch { return url; }
+}
+
+function TrustBadge({ mode }: { mode: TrustMode }) {
+  if (mode === 'TRUST_ALL') return <Badge label="Trust all" color="error" variant="filled" />;
+  if (mode === 'TRUST_PATHS') return <Badge label="Custom CA" color="warning" variant="filled" />;
+  return <Badge label="System" color="auto" variant="filled" />;
+}

ui/src/router.tsx

@@ -18,6 +18,7 @@ const OidcConfigPage = lazy(() => import('./pages/Admin/OidcConfigPage'));
 const DatabaseAdminPage = lazy(() => import('./pages/Admin/DatabaseAdminPage'));
 const ClickHouseAdminPage = lazy(() => import('./pages/Admin/ClickHouseAdminPage'));
 const EnvironmentsPage = lazy(() => import('./pages/Admin/EnvironmentsPage'));
+const OutboundConnectionsPage = lazy(() => import('./pages/Admin/OutboundConnectionsPage'));
 const SensitiveKeysPage = lazy(() => import('./pages/Admin/SensitiveKeysPage'));
 const AppsTab = lazy(() => import('./pages/AppsTab/AppsTab'));
 const SwaggerPage = lazy(() => import('./pages/Swagger/SwaggerPage'));
@@ -84,6 +85,7 @@ export const router = createBrowserRouter([
                 { path: 'rbac', element: <SuspenseWrapper><RbacPage /></SuspenseWrapper> },
                 { path: 'audit', element: <SuspenseWrapper><AuditLogPage /></SuspenseWrapper> },
                 { path: 'oidc', element: <SuspenseWrapper><OidcConfigPage /></SuspenseWrapper> },
+                { path: 'outbound-connections', element: <SuspenseWrapper><OutboundConnectionsPage /></SuspenseWrapper> },
                 { path: 'sensitive-keys', element: <SuspenseWrapper><SensitiveKeysPage /></SuspenseWrapper> },
                 { path: 'database', element: <SuspenseWrapper><DatabaseAdminPage /></SuspenseWrapper> },
                 { path: 'clickhouse', element: <SuspenseWrapper><ClickHouseAdminPage /></SuspenseWrapper> },