Add native traffic inspection to Harbor Connect and Gateway

src/web/components/ClientOverviewPage.tsx

@@ -47,6 +47,11 @@ import {
   InstructionsToggle,
   useInstructionsFeature,
 } from '../features/instructions/index.js';
+import {
+  TrafficPanel,
+  TrafficToggle,
+  useTrafficFeature,
+} from '../features/traffic/index.js';
 import { FailoverPanel, FailoverToggle, useFailoverFeature } from '../features/failover/index.js';
 import {
   ActivityJournalPanel,
@@ -72,7 +77,7 @@ const VERSION_PARTS = [
 ] as const;
 
 const DRAWER_SWITCH_MS = 620;
-const DRAWER_ORDER = ['subscription', 'failover', 'instructions', 'devices', 'diagnostics', 'routing', 'journal'] as const;
+const DRAWER_ORDER = ['subscription', 'failover', 'instructions', 'devices', 'traffic', 'diagnostics', 'routing', 'journal'] as const;
 type DrawerKey = typeof DRAWER_ORDER[number];
 
 const failoverReasonLabel = (reason: string | null) => ({
@@ -128,6 +133,7 @@ interface ComponentActions {
   pingServers: (profileId: string, ids: string[]) => Promise<unknown>;
   runConnectivityDiagnostics: (target?: unknown) => Promise<unknown>;
   loadActivityJournal: (cursor?: string | null) => Promise<unknown>;
+  loadLiveTraffic: () => Promise<unknown>;
 }
 
 interface ClientViewState extends StateSnapshot {
@@ -586,6 +592,11 @@ export function ClientOverviewPage({
   });
   const failoverFeature = useFailoverFeature();
   const activityJournalFeature = useActivityJournalFeature();
+  const trafficFeature = useTrafficFeature({
+    enabled: true,
+    isGateway,
+    loadLiveTraffic: actions.loadLiveTraffic,
+  });
   const diagnosticsAvailable = hasSubscription;
   const drawerControls = {
     subscription: {
@@ -612,6 +623,12 @@ export function ClientOverviewPage({
       show: devicesFeature.toggle,
       close: devicesFeature.close,
     },
+    traffic: {
+      isOpen: trafficFeature.isOpen,
+      panelRef: trafficFeature.panelRef,
+      show: trafficFeature.toggle,
+      close: trafficFeature.close,
+    },
     diagnostics: {
       isOpen: diagnosticsFeature.isOpen,
       panelRef: diagnosticsFeature.panelRef,
@@ -654,8 +671,9 @@ export function ClientOverviewPage({
       diagnosticsFeature.close();
       failoverFeature.close();
       activityJournalFeature.close();
+      trafficFeature.close();
     }
-  }, [hasSubscription, isGateway]);
+  }, [hasSubscription]);
 
   useEffect(() => {
     if (!diagnosticsAvailable) diagnosticsFeature.close();
@@ -851,6 +869,11 @@ export function ClientOverviewPage({
           open={activeRailDrawer === 'devices'}
           onToggle={() => switchDrawer('devices')}
         />}
+        <TrafficToggle
+          feature={trafficFeature}
+          open={activeRailDrawer === 'traffic'}
+          onToggle={() => switchDrawer('traffic')}
+        />
         <DiagnosticsToggle
           feature={diagnosticsFeature}
           open={activeRailDrawer === 'diagnostics'}
@@ -936,6 +959,8 @@ export function ClientOverviewPage({
 
       {isGateway && hasSubscription && <DevicesPanel feature={devicesFeature} />}
 
+      {hasSubscription && <TrafficPanel feature={trafficFeature} />}
+
       {diagnosticsAvailable && <ConnectivityDiagnosticsPanel
         feature={diagnosticsFeature}
         runConnectivityDiagnostics={actions.runConnectivityDiagnostics}