From da7b52e9ea2b2a0e520273c5229d30c54d5f6326 Mon Sep 17 00:00:00 2001
From: Ganeshbeldar015 <ganeshbeldar.ug@gmail.com>
Date: Sun, 1 Nov 2026 02:53:40 +0530
Subject: [PATCH 1/5] feat(ui): redesign autonomous dependency DAG graph
 representation

---
 .../components/topology/TopologyGraph.test.ts |   68 ++
 .../src/components/topology/TopologyGraph.tsx | 1023 ++++++++++++++---
 apps/web/src/index.css                        |   34 +
 3 files changed, 981 insertions(+), 144 deletions(-)
 create mode 100644 apps/web/src/components/topology/TopologyGraph.test.ts

diff --git a/apps/web/src/components/topology/TopologyGraph.test.ts b/apps/web/src/components/topology/TopologyGraph.test.ts
new file mode 100644
index 0000000..780d1dc
--- /dev/null
+++ b/apps/web/src/components/topology/TopologyGraph.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'bun:test';
+import { TopologyGraph } from './TopologyGraph';
+import { clusterState } from '../../engine/state';
+
+describe('TopologyGraph Component & Autonomous DAG Suite', () => {
+  it('exports TopologyGraph as a valid React functional component', () => {
+    expect(TopologyGraph).toBeDefined();
+    expect(typeof TopologyGraph).toBe('function');
+  });
+
+  it('validates 7 enterprise nodes in cluster state', () => {
+    const nodes = clusterState.getNodes();
+    expect(nodes.length).toBeGreaterThanOrEqual(7);
+
+    const ids = nodes.map((n) => n.id);
+    expect(ids).toContain('db-primary');
+    expect(ids).toContain('db-replica');
+    expect(ids).toContain('redis-cache');
+    expect(ids).toContain('auth-service');
+    expect(ids).toContain('payment-service');
+    expect(ids).toContain('api-gateway');
+    expect(ids).toContain('web-frontend');
+  });
+
+  it('verifies DAG is cycle-free with Kahn topological sort', () => {
+    const graph = clusterState.getGraph();
+    expect(graph.hasCycle()).toBe(false);
+
+    const order = graph.getTopologicalRecoveryOrder();
+    expect(order).toBeDefined();
+    expect(order.length).toBe(7);
+
+    // Root database must be restored before dependent microservices
+    const dbIndex = order.indexOf('db-primary');
+    const authIndex = order.indexOf('auth-service');
+    const gatewayIndex = order.indexOf('api-gateway');
+    const webIndex = order.indexOf('web-frontend');
+
+    expect(dbIndex).toBeLessThan(authIndex);
+    expect(authIndex).toBeLessThan(gatewayIndex);
+    expect(gatewayIndex).toBeLessThan(webIndex);
+  });
+
+  it('verifies reverse blast radius calculation for root db outage', () => {
+    const graph = clusterState.getGraph();
+    const blast = graph.computeBlastRadius('db-primary');
+
+    expect(blast.targetNodeId).toBe('db-primary');
+    // Primary DB failure cascades to cache, replica, auth, payment, gateway, web
+    expect(blast.affectedNodeIds).toContain('redis-cache');
+    expect(blast.affectedNodeIds).toContain('db-replica');
+    expect(blast.affectedNodeIds).toContain('auth-service');
+    expect(blast.affectedNodeIds).toContain('payment-service');
+    expect(blast.affectedNodeIds).toContain('api-gateway');
+    expect(blast.affectedNodeIds).toContain('web-frontend');
+    expect(blast.severity).toBe('critical');
+  });
+
+  it('verifies minimal leaf blast radius for web frontend outage', () => {
+    const graph = clusterState.getGraph();
+    const blast = graph.computeBlastRadius('web-frontend');
+
+    expect(blast.targetNodeId).toBe('web-frontend');
+    // Frontend is an edge leaf node; downtime should not cascade to core databases
+    expect(blast.affectedNodeIds.length).toBe(0);
+    expect(blast.severity).toBe('low');
+  });
+});
diff --git a/apps/web/src/components/topology/TopologyGraph.tsx b/apps/web/src/components/topology/TopologyGraph.tsx
index 05a53b0..4470020 100644
--- a/apps/web/src/components/topology/TopologyGraph.tsx
+++ b/apps/web/src/components/topology/TopologyGraph.tsx
@@ -1,31 +1,285 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { Card } from '../common/Card';
 import { Badge } from '../common/Badge';
 import { Button } from '../common/Button';
 import { fetchNodes, fetchGraph, triggerSimulation } from '../../lib/api';
+import { clusterState } from '../../engine/state';
 import type { SystemNode } from '../../types';
+import { cn } from '../../lib/utils';
 import {
   Network,
-  CheckCircle2,
-  AlertOctagon,
+  Database,
+  Globe,
+  Zap,
+  ShieldCheck,
+  CreditCard,
+  Monitor,
   RefreshCw,
+  AlertOctagon,
+  CheckCircle2,
+  AlertTriangle,
+  ArrowDown,
+  Layers,
+  Activity,
+  Flame,
+  Radio,
+  Server,
+  Play,
+  RotateCcw,
 } from 'lucide-react';
 
-export const TopologyGraph: React.FC = () => {
+export interface TopologyGraphProps {
+  className?: string;
+}
+
+interface NodeLayoutMeta {
+  id: string;
+  name: string;
+  tier: number;
+  tierLabel: string;
+  tierName: string;
+  recoveryStep: number;
+  type: 'database' | 'application' | 'gateway' | 'cache';
+  port: string;
+  latency: string;
+  protocol: string;
+  icon: React.ElementType;
+  iconColor: string;
+  iconBg: string;
+  engine: string;
+  description: string;
+  x: number;
+  y: number;
+}
+
+const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
+  'web-frontend': {
+    id: 'web-frontend',
+    name: 'Horizon Web UI',
+    tier: 3,
+    tierLabel: 'Tier 3',
+    tierName: 'Client Ingress',
+    recoveryStep: 5,
+    type: 'application',
+    port: ':3000',
+    latency: '24ms',
+    protocol: 'HTTPS / Web',
+    icon: Monitor,
+    iconColor: 'text-[#0047AB]',
+    iconBg: 'bg-blue-50 border-blue-200',
+    engine: 'React 19 / Vite Edge',
+    description: 'Client-facing mission control dashboard and operator cockpit.',
+    x: 400,
+    y: 56,
+  },
+  'api-gateway': {
+    id: 'api-gateway',
+    name: 'API Gateway',
+    tier: 2,
+    tierLabel: 'Tier 2',
+    tierName: 'Routing & Proxy',
+    recoveryStep: 4,
+    type: 'gateway',
+    port: ':8080',
+    latency: '4.5ms',
+    protocol: 'HTTP/2 & gRPC',
+    icon: Globe,
+    iconColor: 'text-indigo-600',
+    iconBg: 'bg-indigo-50 border-indigo-200',
+    engine: 'Envoy Reverse Proxy',
+    description: 'TLS termination, rate limiting, and intelligent load routing.',
+    x: 400,
+    y: 195,
+  },
+  'auth-service': {
+    id: 'auth-service',
+    name: 'Auth Service',
+    tier: 1,
+    tierLabel: 'Tier 1',
+    tierName: 'Microservice',
+    recoveryStep: 3,
+    type: 'application',
+    port: ':5001',
+    latency: '12ms',
+    protocol: 'gRPC / JWT',
+    icon: ShieldCheck,
+    iconColor: 'text-emerald-700',
+    iconBg: 'bg-emerald-50 border-emerald-200',
+    engine: 'EIP-712 / Go Auth Engine',
+    description: 'Session state validation, HMAC token signing, and Web3 key authorization.',
+    x: 260,
+    y: 340,
+  },
+  'payment-service': {
+    id: 'payment-service',
+    name: 'Payment Service',
+    tier: 1,
+    tierLabel: 'Tier 1',
+    tierName: 'Microservice',
+    recoveryStep: 3,
+    type: 'application',
+    port: ':5002',
+    latency: '18ms',
+    protocol: 'REST / Webhook',
+    icon: CreditCard,
+    iconColor: 'text-purple-700',
+    iconBg: 'bg-purple-50 border-purple-200',
+    engine: 'MST Escrow / Stripe Gateway',
+    description: 'NFT subscription license checking and fiat/crypto payment settlement.',
+    x: 540,
+    y: 340,
+  },
+  'redis-cache': {
+    id: 'redis-cache',
+    name: 'Redis Cache',
+    tier: 0,
+    tierLabel: 'Tier 0',
+    tierName: 'In-Memory Store',
+    recoveryStep: 2,
+    type: 'cache',
+    port: ':6379',
+    latency: '0.4ms',
+    protocol: 'RESP3 / TCP',
+    icon: Zap,
+    iconColor: 'text-amber-700',
+    iconBg: 'bg-amber-50 border-amber-200',
+    engine: 'Redis 7.2 Memory Cluster',
+    description: 'High-throughput session cache, rate-limit buckets, and pub/sub message bus.',
+    x: 160,
+    y: 505,
+  },
+  'db-primary': {
+    id: 'db-primary',
+    name: 'PostgreSQL Primary',
+    tier: 0,
+    tierLabel: 'Tier 0',
+    tierName: 'Primary Database',
+    recoveryStep: 1,
+    type: 'database',
+    port: ':5432',
+    latency: '1.2ms',
+    protocol: 'PostgreSQL Wire / TLS',
+    icon: Database,
+    iconColor: 'text-[#0047AB]',
+    iconBg: 'bg-blue-100 border-blue-300',
+    engine: 'PostgreSQL 16 Primary ACID',
+    description: 'Foundational system of record with continuous WAL replication archiving.',
+    x: 400,
+    y: 505,
+  },
+  'db-replica': {
+    id: 'db-replica',
+    name: 'PostgreSQL Replica',
+    tier: 0,
+    tierLabel: 'Tier 0',
+    tierName: 'Standby Database',
+    recoveryStep: 2,
+    type: 'database',
+    port: ':5433',
+    latency: '0.8ms',
+    protocol: 'WAL Streaming Sync',
+    icon: Database,
+    iconColor: 'text-sky-700',
+    iconBg: 'bg-sky-50 border-sky-200',
+    engine: 'PostgreSQL 16 Hot Standby',
+    description: 'Real-time asynchronous read replica ready for automated failover promotion.',
+    x: 640,
+    y: 505,
+  },
+};
+
+interface GraphEdgeConfig {
+  id: string;
+  sourceId: string;
+  targetId: string;
+  label: string;
+  path: string;
+}
+
+const STATIC_EDGES: GraphEdgeConfig[] = [
+  {
+    id: 'edge-gateway-to-web',
+    sourceId: 'api-gateway',
+    targetId: 'web-frontend',
+    label: 'User Traffic Ingress',
+    path: 'M 400 156 L 400 95',
+  },
+  {
+    id: 'edge-auth-to-gateway',
+    sourceId: 'auth-service',
+    targetId: 'api-gateway',
+    label: 'Route Auth & JWT',
+    path: 'M 260 301 C 260 255, 365 265, 365 234',
+  },
+  {
+    id: 'edge-cache-to-gateway',
+    sourceId: 'redis-cache',
+    targetId: 'api-gateway',
+    label: 'Session & Rate Limits',
+    path: 'M 160 466 C 120 340, 290 280, 335 234',
+  },
+  {
+    id: 'edge-cache-to-auth',
+    sourceId: 'redis-cache',
+    targetId: 'auth-service',
+    label: 'Token Caching',
+    path: 'M 175 466 C 175 420, 235 425, 235 379',
+  },
+  {
+    id: 'edge-db-to-auth',
+    sourceId: 'db-primary',
+    targetId: 'auth-service',
+    label: 'User Credentials Query',
+    path: 'M 370 466 C 370 420, 285 425, 285 379',
+  },
+  {
+    id: 'edge-auth-to-payment',
+    sourceId: 'auth-service',
+    targetId: 'payment-service',
+    label: 'Identity Attestation',
+    path: 'M 344 340 C 400 340, 400 340, 456 340',
+  },
+  {
+    id: 'edge-db-to-payment',
+    sourceId: 'db-primary',
+    targetId: 'payment-service',
+    label: 'Ledger Balance Query',
+    path: 'M 430 466 C 430 420, 540 425, 540 379',
+  },
+  {
+    id: 'edge-db-to-cache',
+    sourceId: 'db-primary',
+    targetId: 'redis-cache',
+    label: 'Cache Warmup & Sync',
+    path: 'M 316 505 C 280 505, 280 505, 244 505',
+  },
+  {
+    id: 'edge-db-to-replica',
+    sourceId: 'db-primary',
+    targetId: 'db-replica',
+    label: 'Continuous WAL Stream',
+    path: 'M 484 505 C 520 505, 520 505, 556 505',
+  },
+];
+
+export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' }) => {
   const [nodes, setNodes] = useState<SystemNode[]>([]);
   const [edges, setEdges] = useState<{ dependent_id: string; depends_on_id: string }[]>([]);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>('db-primary');
-  const [loading, setLoading] = useState(true);
-  const [blastRadius, setBlastRadius] = useState<string[]>([]);
+  const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
+  const [hoveredEdgeId, setHoveredEdgeId] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [viewMode, setViewMode] = useState<'traffic' | 'recovery'>('traffic');
+  const [tierFilter, setTierFilter] = useState<'all' | 't0' | 't1' | 't2-3'>('all');
 
-  const loadTopology = async () => {
+  const loadTopology = useCallback(async () => {
     try {
+      setLoading(true);
       const [n, g] = await Promise.all([fetchNodes(), fetchGraph()]);
       setNodes(n);
       if (g.edges && g.edges.length > 0) {
         setEdges(g.edges);
       } else {
-        // Fallback default edges based on node dependencies
         const derivedEdges: { dependent_id: string; depends_on_id: string }[] = [];
         n.forEach((node: SystemNode) => {
           node.dependencies.forEach((dep: string) => {
@@ -37,25 +291,43 @@ export const TopologyGraph: React.FC = () => {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     loadTopology();
-  }, []);
+    const unsubscribe = clusterState.subscribe(() => {
+      loadTopology();
+    });
+    return () => unsubscribe();
+  }, [loadTopology]);
 
-  // Compute blast radius: find all nodes that depend directly or indirectly on targetNode
-  useEffect(() => {
-    if (!selectedNodeId) {
-      setBlastRadius([]);
-      return;
-    }
+  // Selected node metadata
+  const selectedNode = useMemo(() => {
+    return nodes.find((n) => n.id === selectedNodeId) || null;
+  }, [nodes, selectedNodeId]);
+
+  const selectedNodeMeta = useMemo(() => {
+    if (!selectedNodeId) return null;
+    return STATIC_NODE_METAS[selectedNodeId] || null;
+  }, [selectedNodeId]);
+
+  // Compute upstream prerequisites for selected node (nodes it depends on)
+  const upstreamDependencies = useMemo(() => {
+    if (!selectedNodeId) return [];
+    const directPrereqs = edges
+      .filter((e) => e.dependent_id === selectedNodeId)
+      .map((e) => e.depends_on_id);
+    return Array.from(new Set(directPrereqs));
+  }, [selectedNodeId, edges]);
 
+  // Compute blast radius for selected node (all nodes that depend on it directly or indirectly)
+  const blastRadius = useMemo(() => {
+    if (!selectedNodeId) return [];
     const affected = new Set<string>();
     const queue = [selectedNodeId];
 
     while (queue.length > 0) {
       const current = queue.shift()!;
-      // Find all nodes that depend on current
       const dependents = edges
         .filter((e) => e.depends_on_id === current)
         .map((e) => e.dependent_id);
@@ -67,114 +339,528 @@ export const TopologyGraph: React.FC = () => {
         }
       }
     }
-
-    setBlastRadius(Array.from(affected));
+    return Array.from(affected);
   }, [selectedNodeId, edges]);
 
-  const selectedNode = nodes.find((n) => n.id === selectedNodeId);
+  // Check if any node in cluster is down
+  const downNodes = useMemo(() => {
+    return nodes.filter((n) => n.status === 'down');
+  }, [nodes]);
+
+  const isSelectedDown = selectedNode?.status === 'down';
 
+  // Toggle simulate failure or restore
   const handleToggleState = async (nodeId: string, currentStatus: string) => {
     const nextStatus = currentStatus === 'down' ? 'healthy' : 'down';
     await triggerSimulation(nodeId, nextStatus);
     await loadTopology();
   };
 
-  // Group nodes into topological visual tiers
-  const tier1 = nodes.filter((n) => n.id === 'web-frontend');
-  const tier2 = nodes.filter((n) => n.id === 'api-gateway');
-  const tier3 = nodes.filter((n) => n.id === 'auth-service' || n.id === 'payment-service');
-  const tier4 = nodes.filter((n) => n.id === 'redis-cache');
-  const tier5 = nodes.filter((n) => n.id === 'db-primary' || n.id === 'db-replica');
+  // One-click restore all nodes to healthy
+  const handleRestoreAll = async () => {
+    for (const node of nodes) {
+      if (node.status === 'down') {
+        await triggerSimulation(node.id, 'healthy');
+      }
+    }
+    await loadTopology();
+  };
+
+  // Helper to determine edge relationship with active focus
+  const getEdgeState = (edge: GraphEdgeConfig) => {
+    const focusId = hoveredNodeId || selectedNodeId;
+    if (!focusId) return 'normal';
+
+    const isDirectUpstream = edge.targetId === focusId;
+    const isDirectDownstream = edge.sourceId === focusId;
+    const isCascaded =
+      blastRadius.includes(edge.targetId) &&
+      (edge.sourceId === selectedNodeId || blastRadius.includes(edge.sourceId));
+
+    if (isDirectUpstream) return 'upstream';
+    if (isDirectDownstream || isCascaded) {
+      return isSelectedDown ? 'danger' : 'downstream';
+    }
+    return 'dimmed';
+  };
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <div className={cn('horizon-topology-graph grid grid-cols-1 xl:grid-cols-3 gap-6 font-sans', className)}>
       {/* Main Interactive Visualizer */}
-      <Card className="p-6 lg:col-span-2 flex flex-col justify-between min-h-[580px] relative overflow-hidden skeuo-card border-[#E5D7C5]">
+      <Card className="horizon-topology-card p-5 sm:p-6 xl:col-span-2 flex flex-col justify-between min-h-[660px] relative overflow-hidden skeuo-card border-[#E5D7C5]">
         {/* Subtle Network Dot Grid */}
-        <div className="absolute inset-0 opacity-[0.07] pointer-events-none bg-[radial-gradient(#0047AB_1.5px,transparent_1.5px)] [background-size:24px_24px]" />
+        <div className="absolute inset-0 opacity-[0.06] pointer-events-none bg-[radial-gradient(#0047AB_1.5px,transparent_1.5px)] [background-size:24px_24px]" />
 
         <div>
-          <div className="flex items-center justify-between pb-4 mb-6 border-b border-[#EADCC9] relative z-10">
+          {/* Header Controls Bar */}
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between pb-4 mb-4 border-b border-[#EADCC9] gap-4 relative z-10">
             <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-[#0047AB]/10 border border-[#0047AB]/25 text-[#0047AB] flex items-center justify-center shadow-inner">
+              <div className="w-10 h-10 rounded-xl bg-[#0047AB]/10 border border-[#0047AB]/25 text-[#0047AB] flex items-center justify-center shadow-inner shrink-0">
                 <Network className="w-5 h-5" />
               </div>
               <div>
-                <h2 className="text-base font-bold text-[#1A1A1A] tracking-tight">
-                  Autonomous Dependency DAG
-                </h2>
-                <p className="text-xs text-[#6E6258] font-medium">
-                  Topological recovery flow: Foundational Data Layer &rarr; Gateway &rarr; Web Edge
+                <div className="flex items-center gap-2">
+                  <h2 className="text-base font-black text-[#1A1A1A] tracking-tight">
+                    Autonomous Dependency DAG
+                  </h2>
+                  <span className="px-2 py-0.5 rounded-full text-[10px] font-mono font-bold bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20">
+                    O(V + E)
+                  </span>
+                </div>
+                <p className="text-xs text-[#6E6258] font-medium mt-0.5">
+                  Dynamic multi-tier topology graph showing service dependencies, traffic paths, and cascade risk.
                 </p>
               </div>
             </div>
 
-            <Button variant="secondary" size="sm" onClick={loadTopology} className="gap-1.5 text-xs font-semibold">
-              <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />
-              <span>Refresh DAG</span>
-            </Button>
+            <div className="flex flex-wrap items-center gap-2">
+              {/* View Mode Switcher */}
+              <div className="inline-flex p-1 rounded-xl bg-[#F5EDE2] border border-[#E5D7C5] shadow-inner text-xs font-semibold">
+                <button
+                  type="button"
+                  onClick={() => setViewMode('traffic')}
+                  className={cn(
+                    'px-3 py-1.5 rounded-lg transition-all duration-150 flex items-center gap-1.5 cursor-pointer',
+                    viewMode === 'traffic'
+                      ? 'bg-white text-[#0047AB] font-bold shadow-xs border border-[#E0D0BE]'
+                      : 'text-[#6E6258] hover:text-[#1A1A1A]'
+                  )}
+                >
+                  <ArrowDown className="w-3.5 h-3.5" />
+                  <span>Traffic Flow</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setViewMode('recovery')}
+                  className={cn(
+                    'px-3 py-1.5 rounded-lg transition-all duration-150 flex items-center gap-1.5 cursor-pointer',
+                    viewMode === 'recovery'
+                      ? 'bg-white text-[#0047AB] font-bold shadow-xs border border-[#E0D0BE]'
+                      : 'text-[#6E6258] hover:text-[#1A1A1A]'
+                  )}
+                >
+                  <Layers className="w-3.5 h-3.5" />
+                  <span>Kahn Recovery Order</span>
+                </button>
+              </div>
+
+              {/* Refresh DAG */}
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={loadTopology}
+                className="gap-1.5 text-xs font-semibold rounded-xl"
+              >
+                <RefreshCw className={cn('w-3.5 h-3.5', loading && 'animate-spin')} />
+                <span className="hidden sm:inline">Refresh</span>
+              </Button>
+            </div>
           </div>
 
-          {/* Interactive Tiered Canvas */}
-          <div className="relative z-10 py-4 flex flex-col items-center gap-8">
-            
-            {/* Tier 1: Client Edge */}
-            <div className="flex justify-center gap-6 w-full">
-              {tier1.map((n) => renderNode(n))}
+          {/* Sub-toolbar: Tier Filter & Outage Alert Banner */}
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-4 pb-2 text-xs relative z-10">
+            {/* Filter pills */}
+            <div className="flex items-center gap-1.5 text-xs">
+              <span className="text-[11px] font-mono text-[#8A7B6D] font-bold uppercase mr-1">
+                Filter:
+              </span>
+              {[
+                { id: 'all', label: 'All Tiers (7)' },
+                { id: 't0', label: 'Tier 0 Data' },
+                { id: 't1', label: 'Tier 1 Services' },
+                { id: 't2-3', label: 'Tier 2-3 Edge' },
+              ].map((filter) => (
+                <button
+                  key={filter.id}
+                  type="button"
+                  onClick={() => setTierFilter(filter.id as any)}
+                  className={cn(
+                    'px-2.5 py-1 rounded-lg font-mono text-[11px] font-semibold transition-colors cursor-pointer',
+                    tierFilter === filter.id
+                      ? 'bg-[#0047AB] text-white shadow-xs'
+                      : 'bg-white border border-[#E5D7C5] text-[#6E6258] hover:bg-[#FAF3EA]'
+                  )}
+                >
+                  {filter.label}
+                </button>
+              ))}
             </div>
 
-            <ConnectorArrow text="Directs User Traffic" />
+            {/* Outage status pill */}
+            {downNodes.length > 0 ? (
+              <div className="flex items-center gap-2 px-3 py-1 rounded-lg bg-red-50 border border-red-300 text-red-700 text-xs font-bold animate-pulse">
+                <AlertTriangle className="w-3.5 h-3.5 text-red-600 shrink-0" />
+                <span>
+                  {downNodes.length} Outage Active: {downNodes.map((n) => n.name).join(', ')}
+                </span>
+                <button
+                  type="button"
+                  onClick={handleRestoreAll}
+                  className="ml-1 underline hover:text-red-900 cursor-pointer text-[11px]"
+                >
+                  Heal All
+                </button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 text-xs font-mono text-emerald-800">
+                <span className="w-2 h-2 rounded-full bg-emerald-500 shadow-xs" />
+                <span className="font-semibold">All 7 Services Operational • Zero Deadlocks</span>
+              </div>
+            )}
+          </div>
 
-            {/* Tier 2: Gateway */}
-            <div className="flex justify-center gap-6 w-full">
-              {tier2.map((n) => renderNode(n))}
-            </div>
+          {/* Interactive Topological DAG Canvas */}
+          <div className="relative w-full overflow-x-auto overflow-y-hidden rounded-2xl bg-[#FFFDF9] border border-[#E8DCCE] p-2 shadow-inner">
+            <div className="relative w-[780px] h-[580px] mx-auto select-none">
+              {/* Background Tier Swimlanes */}
+              <div className="absolute inset-0 pointer-events-none flex flex-col justify-between py-2">
+                {/* Tier 3: Client Ingress */}
+                <div className="h-[96px] rounded-xl border border-dashed border-[#0047AB]/15 bg-[#0047AB]/[0.02] relative px-3 py-1.5 flex justify-between items-start">
+                  <div className="flex items-center gap-1.5 text-[10px] font-mono font-bold text-[#0047AB]">
+                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 border border-[#0047AB]/20">
+                      TIER 3
+                    </span>
+                    <span>CLIENT INGRESS & WEB EDGE</span>
+                  </div>
+                  {viewMode === 'recovery' && (
+                    <span className="text-[10px] font-mono font-bold text-[#0047AB] bg-white px-2 py-0.5 rounded border border-[#0047AB]/30">
+                      Step 5: Client Restoration
+                    </span>
+                  )}
+                </div>
 
-            <ConnectorArrow text="Authenticates & Routes" />
+                {/* Tier 2: API Gateway */}
+                <div className="h-[105px] rounded-xl border border-dashed border-indigo-500/15 bg-indigo-500/[0.02] relative px-3 py-1.5 flex justify-between items-start">
+                  <div className="flex items-center gap-1.5 text-[10px] font-mono font-bold text-indigo-700">
+                    <span className="px-1.5 py-0.5 rounded bg-indigo-50 border border-indigo-200">
+                      TIER 2
+                    </span>
+                    <span>API GATEWAY & ROUTING</span>
+                  </div>
+                  {viewMode === 'recovery' && (
+                    <span className="text-[10px] font-mono font-bold text-indigo-700 bg-white px-2 py-0.5 rounded border border-indigo-300">
+                      Step 4: Gateway Routing
+                    </span>
+                  )}
+                </div>
 
-            {/* Tier 3: Microservices */}
-            <div className="flex justify-center gap-6 w-full flex-wrap">
-              {tier3.map((n) => renderNode(n))}
-            </div>
+                {/* Tier 1: Core Microservices */}
+                <div className="h-[125px] rounded-xl border border-dashed border-emerald-500/15 bg-emerald-500/[0.02] relative px-3 py-1.5 flex justify-between items-start">
+                  <div className="flex items-center gap-1.5 text-[10px] font-mono font-bold text-emerald-800">
+                    <span className="px-1.5 py-0.5 rounded bg-emerald-50 border border-emerald-200">
+                      TIER 1
+                    </span>
+                    <span>CORE APPLICATION SERVICES</span>
+                  </div>
+                  {viewMode === 'recovery' && (
+                    <span className="text-[10px] font-mono font-bold text-emerald-800 bg-white px-2 py-0.5 rounded border border-emerald-300">
+                      Step 3: Business Microservices
+                    </span>
+                  )}
+                </div>
 
-            <ConnectorArrow text="Caches & Persists" />
+                {/* Tier 0: Foundational Data & Storage */}
+                <div className="h-[125px] rounded-xl border border-dashed border-[#0047AB]/20 bg-[#0047AB]/[0.03] relative px-3 py-1.5 flex justify-between items-start">
+                  <div className="flex items-center gap-1.5 text-[10px] font-mono font-bold text-[#0047AB]">
+                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 border border-[#0047AB]/25">
+                      TIER 0
+                    </span>
+                    <span>FOUNDATIONAL PERSISTENCE & CACHING (ROOT)</span>
+                  </div>
+                  {viewMode === 'recovery' && (
+                    <span className="text-[10px] font-mono font-bold text-[#0047AB] bg-white px-2 py-0.5 rounded border border-[#0047AB]/30">
+                      Steps 1-2: Root Data & Cache
+                    </span>
+                  )}
+                </div>
+              </div>
 
-            {/* Tier 4 & 5: Cache & Database Foundational */}
-            <div className="flex justify-center gap-6 w-full flex-wrap">
-              {tier4.map((n) => renderNode(n))}
-              {tier5.map((n) => renderNode(n))}
+              {/* SVG Connectors Canvas */}
+              <svg
+                className="absolute inset-0 w-full h-full pointer-events-none"
+                viewBox="0 0 780 580"
+              >
+                <defs>
+                  {/* Default arrow marker */}
+                  <marker
+                    id="arrow-default"
+                    viewBox="0 0 10 10"
+                    refX="6"
+                    refY="5"
+                    markerWidth="6"
+                    markerHeight="6"
+                    orient="auto-start-reverse"
+                  >
+                    <path d="M 0 1 L 8 5 L 0 9 z" fill="#94A3B8" />
+                  </marker>
+
+                  {/* Upstream prerequisite arrow (Cobalt) */}
+                  <marker
+                    id="arrow-upstream"
+                    viewBox="0 0 10 10"
+                    refX="6"
+                    refY="5"
+                    markerWidth="6"
+                    markerHeight="6"
+                    orient="auto-start-reverse"
+                  >
+                    <path d="M 0 1 L 8 5 L 0 9 z" fill="#0047AB" />
+                  </marker>
+
+                  {/* Downstream dependent arrow (Amber) */}
+                  <marker
+                    id="arrow-downstream"
+                    viewBox="0 0 10 10"
+                    refX="6"
+                    refY="5"
+                    markerWidth="6"
+                    markerHeight="6"
+                    orient="auto-start-reverse"
+                  >
+                    <path d="M 0 1 L 8 5 L 0 9 z" fill="#D97706" />
+                  </marker>
+
+                  {/* Outage cascading danger arrow (Red) */}
+                  <marker
+                    id="arrow-danger"
+                    viewBox="0 0 10 10"
+                    refX="6"
+                    refY="5"
+                    markerWidth="6"
+                    markerHeight="6"
+                    orient="auto-start-reverse"
+                  >
+                    <path d="M 0 1 L 8 5 L 0 9 z" fill="#EF4444" />
+                  </marker>
+                </defs>
+
+                {/* Render Directed Bézier Curves */}
+                {STATIC_EDGES.map((edge) => {
+                  const state = getEdgeState(edge);
+                  const isHovered = hoveredEdgeId === edge.id;
+
+                  let strokeColor = '#CBD5E1';
+                  let strokeWidth = 1.75;
+                  let strokeDash = '5 4';
+                  let marker = 'url(#arrow-default)';
+                  let animClass = 'animate-dag-flow';
+                  let opacity = 1;
+
+                  if (state === 'upstream') {
+                    strokeColor = '#0047AB';
+                    strokeWidth = 2.75;
+                    strokeDash = '6 3';
+                    marker = 'url(#arrow-upstream)';
+                    animClass = 'animate-dag-flow-fast';
+                  } else if (state === 'downstream') {
+                    strokeColor = '#D97706';
+                    strokeWidth = 2.5;
+                    strokeDash = '6 3';
+                    marker = 'url(#arrow-downstream)';
+                    animClass = 'animate-dag-flow-fast';
+                  } else if (state === 'danger') {
+                    strokeColor = '#EF4444';
+                    strokeWidth = 3;
+                    strokeDash = '4 4';
+                    marker = 'url(#arrow-danger)';
+                    animClass = 'animate-dag-flow-fast';
+                  } else if (state === 'dimmed') {
+                    opacity = 0.22;
+                    animClass = '';
+                  }
+
+                  if (isHovered) {
+                    strokeWidth = 3.5;
+                    opacity = 1;
+                  }
+
+                  return (
+                    <g key={edge.id}>
+                      {/* Invisible wider hit area for hover */}
+                      <path
+                        d={edge.path}
+                        fill="none"
+                        stroke="transparent"
+                        strokeWidth={18}
+                        className="pointer-events-auto cursor-pointer"
+                        onMouseEnter={() => setHoveredEdgeId(edge.id)}
+                        onMouseLeave={() => setHoveredEdgeId(null)}
+                      />
+                      {/* Visible directed curve */}
+                      <path
+                        d={edge.path}
+                        fill="none"
+                        stroke={strokeColor}
+                        strokeWidth={strokeWidth}
+                        strokeDasharray={strokeDash}
+                        markerEnd={viewMode === 'recovery' ? marker : undefined}
+                        markerStart={viewMode === 'traffic' ? marker : undefined}
+                        className={cn('transition-all duration-200', animClass)}
+                        style={{ opacity }}
+                      />
+                    </g>
+                  );
+                })}
+              </svg>
+
+              {/* Edge Label Hover Tooltip Badge */}
+              {hoveredEdgeId && (
+                (() => {
+                  const hoveredEdge = STATIC_EDGES.find((e) => e.id === hoveredEdgeId);
+                  if (!hoveredEdge) return null;
+                  const source = STATIC_NODE_METAS[hoveredEdge.sourceId];
+                  const target = STATIC_NODE_METAS[hoveredEdge.targetId];
+                  return (
+                    <div className="absolute top-2 left-1/2 -translate-x-1/2 z-30 px-3 py-1 rounded-full bg-[#1A1A1A] text-white text-[11px] font-mono font-bold shadow-lg flex items-center gap-2 border border-white/20 animate-in fade-in">
+                      <span className="text-blue-300">{source?.name}</span>
+                      <span>&rarr;</span>
+                      <span className="text-emerald-300">{target?.name}</span>
+                      <span className="text-white/60">({hoveredEdge.label})</span>
+                    </div>
+                  );
+                })()
+              )}
+
+              {/* Interactive Node Cards */}
+              {Object.values(STATIC_NODE_METAS).map((meta) => {
+                const liveNode = nodes.find((n) => n.id === meta.id);
+                const status = liveNode?.status || 'healthy';
+                const isDown = status === 'down';
+                const isSelected = selectedNodeId === meta.id;
+                const isUpstream = upstreamDependencies.includes(meta.id);
+                const isDownstream = blastRadius.includes(meta.id);
+                const isSimulatedBlast = isDownstream && isSelectedDown;
+
+                // Dim card if filter does not match
+                let isFilteredOut = false;
+                if (tierFilter === 't0' && meta.tier !== 0) isFilteredOut = true;
+                if (tierFilter === 't1' && meta.tier !== 1) isFilteredOut = true;
+                if (tierFilter === 't2-3' && meta.tier < 2) isFilteredOut = true;
+
+                const IconComponent = meta.icon;
+
+                return (
+                  <div
+                    key={meta.id}
+                    onClick={() => setSelectedNodeId(meta.id)}
+                    onMouseEnter={() => setHoveredNodeId(meta.id)}
+                    onMouseLeave={() => setHoveredNodeId(null)}
+                    style={{
+                      left: `${meta.x}px`,
+                      top: `${meta.y}px`,
+                    }}
+                    className={cn(
+                      'horizon-dag-node absolute -translate-x-1/2 -translate-y-1/2 w-[168px] rounded-2xl p-2.5 transition-all duration-200 cursor-pointer select-none',
+                      'shadow-[0_2px_8px_rgba(26,26,26,0.06),0_1px_2px_rgba(26,26,26,0.04)]',
+                      isFilteredOut && 'opacity-25 pointer-events-none',
+                      // Base Card Style
+                      !isSelected && !isDown && !isSimulatedBlast && 'bg-white border-2 border-[rgba(26,26,26,0.12)] hover:border-[#0047AB]/50 hover:shadow-[0_4px_16px_rgba(0,71,171,0.15)] hover:-translate-y-1',
+                      // Selected Style
+                      isSelected && !isDown && 'bg-white border-2 border-[#0047AB] ring-4 ring-[#0047AB]/15 shadow-[0_6px_20px_rgba(0,71,171,0.22)] -translate-y-1 z-20',
+                      // Upstream Prerequisite of Selected Node
+                      isUpstream && !isSelected && 'border-2 border-[#0047AB]/60 bg-blue-50/40',
+                      // Downstream Consumer of Selected Node (Normal Mode)
+                      isDownstream && !isDown && !isSimulatedBlast && !isSelected && 'border-2 border-amber-300 bg-amber-50/30',
+                      // Active Cascaded Risk (when selected target is down)
+                      isSimulatedBlast && 'border-2 border-dashed border-amber-500 bg-amber-50/90 shadow-[0_4px_14px_rgba(217,119,6,0.2)] animate-pulse z-15',
+                      // Target Node Is Down (Primary Failure)
+                      isDown && 'border-2 border-red-500 bg-red-50/90 ring-4 ring-red-500/20 shadow-[0_6px_20px_rgba(239,68,68,0.25)] -translate-y-1 z-20'
+                    )}
+                  >
+                    {/* Top Anchor Dot */}
+                    <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs" />
+                    {/* Bottom Anchor Dot */}
+                    <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs" />
+
+                    {/* Mode Tag / Sequence Pill */}
+                    <div className="flex items-center justify-between gap-1 mb-1.5">
+                      <span className="text-[10px] font-mono font-bold px-1.5 py-0.5 rounded bg-[#F4EBE0] border border-[#E0D0BE] text-[#5A4E44]">
+                        {viewMode === 'recovery' ? `Step ${meta.recoveryStep}` : `T${meta.tier}`}
+                      </span>
+
+                      {/* Status Indicator Pill */}
+                      {isDown ? (
+                        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-red-100 text-red-800 border border-red-300">
+                          <span className="w-1.5 h-1.5 rounded-full bg-red-600 animate-ping" />
+                          <span>DOWN</span>
+                        </span>
+                      ) : isSimulatedBlast ? (
+                        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-amber-100 text-amber-900 border border-amber-300">
+                          <AlertTriangle className="w-2.5 h-2.5 text-amber-700" />
+                          <span>Risk</span>
+                        </span>
+                      ) : isUpstream ? (
+                        <span className="text-[9px] font-mono font-bold text-[#0047AB] bg-blue-50 px-1 rounded border border-blue-200">
+                          Prereq
+                        </span>
+                      ) : (
+                        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-[#EBF7EE] text-[#0A6C3D] border border-[#0F8E52]/25">
+                          <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-xs" />
+                          <span>healthy</span>
+                        </span>
+                      )}
+                    </div>
+
+                    {/* Node Core Info */}
+                    <div className="flex items-center gap-2">
+                      <div className={cn('w-7 h-7 rounded-lg border flex items-center justify-center shrink-0 shadow-xs', meta.iconBg)}>
+                        <IconComponent className={cn('w-4 h-4', meta.iconColor)} />
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <div className="text-xs font-black text-[#1A1A1A] truncate leading-tight">
+                          {meta.name}
+                        </div>
+                        <div className="text-[10px] text-[#6E6258] font-mono truncate">
+                          {meta.port} &bull; {meta.latency}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
             </div>
           </div>
         </div>
 
         {/* Legend Footer */}
-        <div className="mt-8 pt-4 border-t border-[#EADCC9] flex flex-wrap items-center justify-between text-xs text-[#6E6258] relative z-10">
-          <div className="flex items-center gap-4">
+        <div className="mt-4 pt-3 border-t border-[#EADCC9] flex flex-wrap items-center justify-between text-xs text-[#6E6258] relative z-10 gap-3">
+          <div className="flex flex-wrap items-center gap-3">
             <span className="flex items-center gap-1.5 font-medium">
               <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-xs" /> Healthy
             </span>
             <span className="flex items-center gap-1.5 font-medium">
-              <span className="w-2.5 h-2.5 rounded-full bg-red-500 shadow-xs" /> Down
+              <span className="w-2.5 h-2.5 rounded-full bg-red-500 shadow-xs animate-pulse" /> Outage (Down)
             </span>
             <span className="flex items-center gap-1.5 font-medium">
-              <span className="w-2.5 h-2.5 rounded-full bg-amber-500 border border-amber-600 shadow-xs" /> Blast Radius Affected
+              <span className="w-2.5 h-2.5 rounded-full bg-amber-500 border border-amber-600 shadow-xs" /> Cascade Risk
+            </span>
+            <span className="flex items-center gap-1.5 font-medium text-[#0047AB]">
+              <span className="w-2.5 h-2.5 rounded-full bg-[#0047AB] shadow-xs" /> Selected Prerequisite
             </span>
           </div>
-          <span className="font-mono text-[11px] text-[#8A7B6D] font-bold">Click any node to inspect blast radius</span>
+          <span className="font-mono text-[11px] text-[#8A7B6D] font-bold">
+            Click any service to inspect blast radius & playbooks
+          </span>
         </div>
       </Card>
 
       {/* Side Impact & Blast Radius Inspection Panel */}
-      <Card className="p-6 flex flex-col justify-between skeuo-card border-[#E5D7C5]">
+      <Card className="horizon-impact-panel p-5 sm:p-6 flex flex-col justify-between skeuo-card border-[#E5D7C5]">
         <div>
+          {/* Panel Header */}
           <div className="flex items-center justify-between pb-3 mb-4 border-b border-[#EADCC9]">
             <div className="flex items-center gap-2">
               <div className="w-8 h-8 rounded-lg bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20 flex items-center justify-center">
                 <AlertOctagon className="w-4 h-4" />
               </div>
-              <h3 className="text-base font-bold text-[#1A1A1A] tracking-tight">
-                Impact Analysis
-              </h3>
+              <div>
+                <h3 className="text-base font-black text-[#1A1A1A] tracking-tight">
+                  Topology Inspector
+                </h3>
+                <p className="text-[11px] text-[#6E6258] font-medium">
+                  Service architecture & blast radius
+                </p>
+              </div>
             </div>
             {selectedNode && (
               <Badge status={selectedNode.status as any}>
@@ -183,57 +869,129 @@ export const TopologyGraph: React.FC = () => {
             )}
           </div>
 
-          {selectedNode ? (
+          {selectedNode && selectedNodeMeta ? (
             <div className="space-y-4">
+              {/* Target Service Card */}
               <div className="p-4 rounded-xl skeuo-well border-[#E5D7C5]">
-                <span className="text-[10px] text-[#8A7B6D] uppercase font-mono tracking-wider font-bold">
-                  Target Service
-                </span>
-                <div className="text-lg font-black text-[#1A1A1A] mt-0.5">
-                  {selectedNode.name}
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px] text-[#8A7B6D] uppercase font-mono tracking-wider font-bold">
+                    Target Service
+                  </span>
+                  <span className="text-[10px] font-mono px-2 py-0.5 rounded-md bg-[#0047AB]/10 text-[#0047AB] font-bold border border-[#0047AB]/20">
+                    {selectedNodeMeta.tierLabel} &bull; {selectedNodeMeta.tierName}
+                  </span>
+                </div>
+
+                <div className="flex items-center gap-2.5 mt-2">
+                  <div className={cn('w-9 h-9 rounded-xl border flex items-center justify-center shadow-xs', selectedNodeMeta.iconBg)}>
+                    {React.createElement(selectedNodeMeta.icon, {
+                      className: cn('w-5 h-5', selectedNodeMeta.iconColor),
+                    })}
+                  </div>
+                  <div>
+                    <div className="text-lg font-black text-[#1A1A1A]">
+                      {selectedNodeMeta.name}
+                    </div>
+                    <div className="text-xs text-[#6E6258] font-medium">
+                      {selectedNodeMeta.engine}
+                    </div>
+                  </div>
                 </div>
-                <div className="flex items-center gap-2 mt-2">
-                  <span className="text-[11px] font-mono px-2 py-0.5 rounded-md bg-white border border-[#D9C8B5] text-[#0047AB] font-bold">
-                    ID: {selectedNode.id}
+
+                <div className="grid grid-cols-2 gap-2 mt-3 pt-3 border-t border-[#E5D7C5]/60 text-xs font-mono">
+                  <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
+                    <span className="text-[10px] text-[#8A7B6D] block">PORT / PROTOCOL</span>
+                    <span className="font-bold text-[#1A1A1A]">
+                      {selectedNodeMeta.port} ({selectedNodeMeta.protocol})
+                    </span>
+                  </div>
+                  <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
+                    <span className="text-[10px] text-[#8A7B6D] block">TELEMETRY P99</span>
+                    <span className="font-bold text-[#0047AB]">
+                      {selectedNodeMeta.latency} Latency
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Upstream Prerequisites */}
+              <div className="p-3.5 rounded-xl bg-white border border-[#E5D7C5] shadow-xs">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-xs font-bold text-[#1A1A1A] flex items-center gap-1.5">
+                    <Radio className="w-3.5 h-3.5 text-[#0047AB]" />
+                    <span>Upstream Prerequisites</span>
                   </span>
-                  <span className="text-[11px] font-mono px-2 py-0.5 rounded-md bg-white border border-[#D9C8B5] text-[#6E6258] font-semibold">
-                    TYPE: {selectedNode.type}
+                  <span className="text-[11px] font-mono font-bold text-[#6E6258]">
+                    {upstreamDependencies.length} Required
                   </span>
                 </div>
+                {upstreamDependencies.length === 0 ? (
+                  <p className="text-xs text-[#6E6258] italic font-medium">
+                    Root foundation service. Has zero upstream dependencies.
+                  </p>
+                ) : (
+                  <div className="space-y-1.5">
+                    {upstreamDependencies.map((depId) => {
+                      const depMeta = STATIC_NODE_METAS[depId];
+                      const depNode = nodes.find((n) => n.id === depId);
+                      return (
+                        <div
+                          key={depId}
+                          onClick={() => setSelectedNodeId(depId)}
+                          className="flex items-center justify-between p-2 rounded-lg bg-[#FAF3EA] border border-[#E5D7C5] hover:border-[#0047AB]/40 cursor-pointer transition-colors text-xs"
+                        >
+                          <div className="flex items-center gap-2">
+                            <span className="w-2 h-2 rounded-full bg-[#0047AB]" />
+                            <span className="font-bold text-[#1A1A1A]">
+                              {depMeta?.name || depId}
+                            </span>
+                          </div>
+                          <Badge status={(depNode?.status || 'healthy') as any}>
+                            {depNode?.status || 'healthy'}
+                          </Badge>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
               </div>
 
-              {/* Blast Radius Count - Cobalt Blue Patch */}
+              {/* Blast Radius Box (Cobalt Patch) */}
               <div className="p-4 rounded-xl cobalt-patch shadow-lg shadow-[#0047AB]/20">
                 <div className="flex items-center justify-between">
-                  <span className="text-xs font-bold text-white">Calculated Blast Radius</span>
+                  <span className="text-xs font-bold text-white flex items-center gap-1.5">
+                    <Flame className="w-3.5 h-3.5 text-amber-300" />
+                    <span>Cascaded Blast Radius</span>
+                  </span>
                   <span className="text-xs font-mono font-bold px-2 py-0.5 rounded-full bg-white/20 text-white border border-white/30">
-                    {blastRadius.length} Cascaded Services
+                    {blastRadius.length} Downstream
                   </span>
                 </div>
 
                 <p className="text-xs text-white/80 mt-2 font-medium">
-                  If <strong className="text-white underline">{selectedNode.name}</strong> experiences downtime, the following downstream systems are impaired:
+                  If <strong className="text-white underline">{selectedNodeMeta.name}</strong> fails, the following downstream systems are impaired:
                 </p>
 
                 <div className="mt-3 space-y-1.5">
                   {blastRadius.length === 0 ? (
                     <div className="text-xs text-emerald-200 flex items-center gap-1.5 py-1 font-semibold">
                       <CheckCircle2 className="w-4 h-4 text-emerald-300" />
-                      <span>Edge leaf node: 0 downstream dependencies impacted.</span>
+                      <span>Edge leaf node: 0 downstream dependencies cascaded.</span>
                     </div>
                   ) : (
                     blastRadius.map((depId) => {
-                      const depNode = nodes.find((n) => n.id === depId);
+                      const depMeta = STATIC_NODE_METAS[depId];
                       return (
                         <div
                           key={depId}
-                          className="flex items-center justify-between p-2 rounded-lg bg-black/20 border border-white/10 text-xs"
+                          onClick={() => setSelectedNodeId(depId)}
+                          className="flex items-center justify-between p-2 rounded-lg bg-black/25 border border-white/10 hover:border-white/30 text-xs cursor-pointer transition-colors"
                         >
                           <span className="text-white font-semibold">
-                            {depNode ? depNode.name : depId}
+                            {depMeta ? depMeta.name : depId}
                           </span>
-                          <span className="text-[10px] font-mono text-amber-300 font-bold">
-                            Impaired
+                          <span className="text-[10px] font-mono text-amber-300 font-bold px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-400/30">
+                            {isSelectedDown ? 'Impaired' : 'Cascaded Risk'}
                           </span>
                         </div>
                       );
@@ -242,77 +1000,54 @@ export const TopologyGraph: React.FC = () => {
                 </div>
               </div>
 
-              {/* Recovery Order Recommendation */}
+              {/* Autonomous Playbook Assignment */}
               <div className="p-3.5 rounded-xl skeuo-well border-[#E5D7C5] text-xs text-[#5A4E44]">
-                <span className="font-bold text-[#1A1A1A] block mb-1">
-                  Autonomous Playbook Assignment:
-                </span>
-                {selectedNode.type === 'database'
-                  ? 'High-Risk Database Failover to replica. Human Commander approval gate required.'
-                  : selectedNode.type === 'cache'
-                  ? 'Automated Cache Invalidation and connection pool reconnection.'
-                  : 'Zero-Downtime Rolling Service Pod Restart.'}
+                <div className="flex items-center gap-1.5 font-bold text-[#1A1A1A] mb-1">
+                  <Activity className="w-3.5 h-3.5 text-[#0047AB]" />
+                  <span>Autonomous Playbook Assignment:</span>
+                </div>
+                <p className="leading-relaxed">
+                  {selectedNode.type === 'database'
+                    ? 'Playbook #PB-01: High-Risk Database Failover to read replica. EIP-712 Multi-Sig Commander approval required.'
+                    : selectedNode.type === 'cache'
+                    ? 'Playbook #PB-02: Automated Redis cache flush, container restart, and client pool reconnection.'
+                    : selectedNode.type === 'gateway'
+                    ? 'Playbook #PB-03: Zero-downtime Envoy ingress reload and dynamic DNS re-route to healthy pods.'
+                    : 'Playbook #PB-04: Graceful SIGTERM pod termination, Kubernetes rolling restart, and readiness probe poll.'}
+                </p>
               </div>
             </div>
           ) : (
-            <div className="text-center py-12 text-xs text-[#8A7B6D] font-medium">
-              Select a service from the DAG topology to inspect its blast radius.
+            <div className="text-center py-16 text-xs text-[#8A7B6D] font-medium">
+              Select any service from the DAG topology to inspect its dependencies and blast radius.
             </div>
           )}
         </div>
 
+        {/* Action Controls Footer */}
         {selectedNode && (
-          <div className="mt-6 pt-4 border-t border-[#EADCC9] flex items-center justify-between gap-3">
+          <div className="mt-6 pt-4 border-t border-[#EADCC9] space-y-2">
             <Button
               variant={selectedNode.status === 'down' ? 'primary' : 'danger'}
               size="sm"
               onClick={() => handleToggleState(selectedNode.id, selectedNode.status)}
-              className="w-full text-xs font-bold py-2.5 rounded-xl"
+              className="w-full text-xs font-bold py-2.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer shadow-sm"
             >
-              {selectedNode.status === 'down' ? 'Restore Service' : 'Simulate Failure'}
+              {selectedNode.status === 'down' ? (
+                <>
+                  <RotateCcw className="w-4 h-4" />
+                  <span>Restore & Heal Service</span>
+                </>
+              ) : (
+                <>
+                  <Flame className="w-4 h-4" />
+                  <span>Simulate Failure on Node</span>
+                </>
+              )}
             </Button>
           </div>
         )}
       </Card>
     </div>
   );
-
-  function renderNode(node: SystemNode) {
-    const isSelected = selectedNodeId === node.id;
-    const isImpacted = blastRadius.includes(node.id);
-    const isDown = node.status === 'down';
-
-    return (
-      <div
-        key={node.id}
-        onClick={() => setSelectedNodeId(node.id)}
-        className={`p-3.5 rounded-xl border cursor-pointer transition-all duration-200 min-w-[150px] flex flex-col items-center gap-2 select-none ${
-          isDown
-            ? 'bg-red-50 border-red-300 shadow-md shadow-red-500/10 scale-105'
-            : isSelected
-            ? 'bg-blue-50 border-[#0047AB] shadow-md shadow-[#0047AB]/20 scale-105 ring-2 ring-[#0047AB]/20'
-            : isImpacted
-            ? 'bg-amber-50/80 border-amber-300 shadow-xs'
-            : 'bg-white border-[#E5D7C5] shadow-xs hover:border-[#0047AB]/50 hover:shadow-md'
-        }`}
-      >
-        <span className="text-xs font-bold text-[#1A1A1A] text-center">{node.name}</span>
-        <Badge status={node.status as any}>{node.status}</Badge>
-        {isImpacted && (
-          <span className="text-[10px] font-mono font-bold text-amber-800">
-            &bull; Impacted
-          </span>
-        )}
-      </div>
-    );
-  }
-
-  function ConnectorArrow({ text }: { text: string }) {
-    return (
-      <div className="flex flex-col items-center gap-1 text-[10px] font-mono text-[#8A7B6D] font-bold">
-        <div className="w-px h-6 bg-gradient-to-b from-[#0047AB]/60 to-transparent" />
-        <span>{text}</span>
-      </div>
-    );
-  }
 };
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index ca15ab1..268acbe 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -457,3 +457,37 @@ h1.bblacnkherotit.text-3xl.sm\:text-4xl.font-black.text-\[\#1A1A1A\].tracking-ti
   background-clip: text;
   filter: brightness(0.65) contrast(2.5);
 }
+
+
+/* =====================================================================
+   DAG SVG ANIMATED DEPENDENCY FLOW
+   ===================================================================== */
+@keyframes dagFlow {
+  from {
+    stroke-dashoffset: 24;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes dagFlowReverse {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: 24;
+  }
+}
+
+.animate-dag-flow {
+  animation: dagFlow 1.4s linear infinite;
+}
+
+.animate-dag-flow-fast {
+  animation: dagFlow 0.7s linear infinite;
+}
+
+.animate-dag-flow-reverse {
+  animation: dagFlowReverse 1.4s linear infinite;
+}

From 8c45277015066ddb1ff471771383151bba2bcce1 Mon Sep 17 00:00:00 2001
From: Ganeshbeldar015 <ganeshbeldar.ug@gmail.com>
Date: Sun, 1 Nov 2026 03:00:00 +0530
Subject: [PATCH 2/5] fix(topology): eliminate card hover translation jitter
 and edge rerender lag

---
 .../components/topology/TopologyGraph.test.ts |   1 +
 .../src/components/topology/TopologyGraph.tsx | 162 ++++++++----------
 2 files changed, 74 insertions(+), 89 deletions(-)

diff --git a/apps/web/src/components/topology/TopologyGraph.test.ts b/apps/web/src/components/topology/TopologyGraph.test.ts
index 780d1dc..d637ec5 100644
--- a/apps/web/src/components/topology/TopologyGraph.test.ts
+++ b/apps/web/src/components/topology/TopologyGraph.test.ts
@@ -66,3 +66,4 @@ describe('TopologyGraph Component & Autonomous DAG Suite', () => {
     expect(blast.severity).toBe('low');
   });
 });
+
diff --git a/apps/web/src/components/topology/TopologyGraph.tsx b/apps/web/src/components/topology/TopologyGraph.tsx
index 4470020..ade163a 100644
--- a/apps/web/src/components/topology/TopologyGraph.tsx
+++ b/apps/web/src/components/topology/TopologyGraph.tsx
@@ -267,7 +267,6 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
   const [edges, setEdges] = useState<{ dependent_id: string; depends_on_id: string }[]>([]);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>('db-primary');
   const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
-  const [hoveredEdgeId, setHoveredEdgeId] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [viewMode, setViewMode] = useState<'traffic' | 'recovery'>('traffic');
   const [tierFilter, setTierFilter] = useState<'all' | 't0' | 't1' | 't2-3'>('all');
@@ -637,7 +636,8 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                 {/* Render Directed Bézier Curves */}
                 {STATIC_EDGES.map((edge) => {
                   const state = getEdgeState(edge);
-                  const isHovered = hoveredEdgeId === edge.id;
+                  const source = STATIC_NODE_METAS[edge.sourceId];
+                  const target = STATIC_NODE_METAS[edge.targetId];
 
                   let strokeColor = '#CBD5E1';
                   let strokeWidth = 1.75;
@@ -669,22 +669,15 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                     animClass = '';
                   }
 
-                  if (isHovered) {
-                    strokeWidth = 3.5;
-                    opacity = 1;
-                  }
-
                   return (
-                    <g key={edge.id}>
+                    <g key={edge.id} className="cursor-pointer group">
                       {/* Invisible wider hit area for hover */}
                       <path
                         d={edge.path}
                         fill="none"
                         stroke="transparent"
-                        strokeWidth={18}
-                        className="pointer-events-auto cursor-pointer"
-                        onMouseEnter={() => setHoveredEdgeId(edge.id)}
-                        onMouseLeave={() => setHoveredEdgeId(null)}
+                        strokeWidth={14}
+                        className="pointer-events-auto"
                       />
                       {/* Visible directed curve */}
                       <path
@@ -695,32 +688,15 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                         strokeDasharray={strokeDash}
                         markerEnd={viewMode === 'recovery' ? marker : undefined}
                         markerStart={viewMode === 'traffic' ? marker : undefined}
-                        className={cn('transition-all duration-200', animClass)}
+                        className={cn('transition-all duration-150', animClass, 'group-hover:stroke-[#0047AB] group-hover:stroke-[3px]')}
                         style={{ opacity }}
                       />
+                      <title>{`${source?.name} → ${target?.name} (${edge.label})`}</title>
                     </g>
                   );
                 })}
               </svg>
 
-              {/* Edge Label Hover Tooltip Badge */}
-              {hoveredEdgeId && (
-                (() => {
-                  const hoveredEdge = STATIC_EDGES.find((e) => e.id === hoveredEdgeId);
-                  if (!hoveredEdge) return null;
-                  const source = STATIC_NODE_METAS[hoveredEdge.sourceId];
-                  const target = STATIC_NODE_METAS[hoveredEdge.targetId];
-                  return (
-                    <div className="absolute top-2 left-1/2 -translate-x-1/2 z-30 px-3 py-1 rounded-full bg-[#1A1A1A] text-white text-[11px] font-mono font-bold shadow-lg flex items-center gap-2 border border-white/20 animate-in fade-in">
-                      <span className="text-blue-300">{source?.name}</span>
-                      <span>&rarr;</span>
-                      <span className="text-emerald-300">{target?.name}</span>
-                      <span className="text-white/60">({hoveredEdge.label})</span>
-                    </div>
-                  );
-                })()
-              )}
-
               {/* Interactive Node Cards */}
               {Object.values(STATIC_NODE_METAS).map((meta) => {
                 const liveNode = nodes.find((n) => n.id === meta.id);
@@ -742,76 +718,84 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                 return (
                   <div
                     key={meta.id}
-                    onClick={() => setSelectedNodeId(meta.id)}
-                    onMouseEnter={() => setHoveredNodeId(meta.id)}
-                    onMouseLeave={() => setHoveredNodeId(null)}
                     style={{
                       left: `${meta.x}px`,
                       top: `${meta.y}px`,
+                      transform: 'translate(-50%, -50%)',
                     }}
                     className={cn(
-                      'horizon-dag-node absolute -translate-x-1/2 -translate-y-1/2 w-[168px] rounded-2xl p-2.5 transition-all duration-200 cursor-pointer select-none',
-                      'shadow-[0_2px_8px_rgba(26,26,26,0.06),0_1px_2px_rgba(26,26,26,0.04)]',
-                      isFilteredOut && 'opacity-25 pointer-events-none',
-                      // Base Card Style
-                      !isSelected && !isDown && !isSimulatedBlast && 'bg-white border-2 border-[rgba(26,26,26,0.12)] hover:border-[#0047AB]/50 hover:shadow-[0_4px_16px_rgba(0,71,171,0.15)] hover:-translate-y-1',
-                      // Selected Style
-                      isSelected && !isDown && 'bg-white border-2 border-[#0047AB] ring-4 ring-[#0047AB]/15 shadow-[0_6px_20px_rgba(0,71,171,0.22)] -translate-y-1 z-20',
-                      // Upstream Prerequisite of Selected Node
-                      isUpstream && !isSelected && 'border-2 border-[#0047AB]/60 bg-blue-50/40',
-                      // Downstream Consumer of Selected Node (Normal Mode)
-                      isDownstream && !isDown && !isSimulatedBlast && !isSelected && 'border-2 border-amber-300 bg-amber-50/30',
-                      // Active Cascaded Risk (when selected target is down)
-                      isSimulatedBlast && 'border-2 border-dashed border-amber-500 bg-amber-50/90 shadow-[0_4px_14px_rgba(217,119,6,0.2)] animate-pulse z-15',
-                      // Target Node Is Down (Primary Failure)
-                      isDown && 'border-2 border-red-500 bg-red-50/90 ring-4 ring-red-500/20 shadow-[0_6px_20px_rgba(239,68,68,0.25)] -translate-y-1 z-20'
+                      'absolute pointer-events-auto select-none transition-opacity duration-150',
+                      isSelected ? 'z-20' : 'z-10',
+                      isFilteredOut && 'opacity-25 pointer-events-none'
                     )}
                   >
-                    {/* Top Anchor Dot */}
-                    <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs" />
-                    {/* Bottom Anchor Dot */}
-                    <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs" />
-
-                    {/* Mode Tag / Sequence Pill */}
-                    <div className="flex items-center justify-between gap-1 mb-1.5">
-                      <span className="text-[10px] font-mono font-bold px-1.5 py-0.5 rounded bg-[#F4EBE0] border border-[#E0D0BE] text-[#5A4E44]">
-                        {viewMode === 'recovery' ? `Step ${meta.recoveryStep}` : `T${meta.tier}`}
-                      </span>
+                    <div
+                      onClick={() => setSelectedNodeId(meta.id)}
+                      onMouseEnter={() => setHoveredNodeId(meta.id)}
+                      onMouseLeave={() => setHoveredNodeId(null)}
+                      className={cn(
+                        'horizon-dag-node w-[168px] rounded-2xl p-2.5 transition-all duration-150 cursor-pointer select-none',
+                        'shadow-[0_2px_8px_rgba(26,26,26,0.06),0_1px_2px_rgba(26,26,26,0.04)]',
+                        // Base Card Style (Rock solid, zero translation movement!)
+                        !isSelected && !isDown && !isSimulatedBlast && 'bg-white border-2 border-[rgba(26,26,26,0.12)] hover:border-[#0047AB]/70 hover:shadow-[0_4px_16px_rgba(0,71,171,0.18)] hover:ring-2 hover:ring-[#0047AB]/20',
+                        // Selected Style
+                        isSelected && !isDown && 'bg-white border-2 border-[#0047AB] ring-4 ring-[#0047AB]/20 shadow-[0_6px_20px_rgba(0,71,171,0.22)]',
+                        // Upstream Prerequisite of Selected Node
+                        isUpstream && !isSelected && 'border-2 border-[#0047AB]/60 bg-blue-50/40',
+                        // Downstream Consumer of Selected Node (Normal Mode)
+                        isDownstream && !isDown && !isSimulatedBlast && !isSelected && 'border-2 border-amber-300 bg-amber-50/30',
+                        // Active Cascaded Risk (when selected target is down)
+                        isSimulatedBlast && 'border-2 border-dashed border-amber-500 bg-amber-50/90 shadow-[0_4px_14px_rgba(217,119,6,0.2)]',
+                        // Target Node Is Down (Primary Failure)
+                        isDown && 'border-2 border-red-500 bg-red-50/90 ring-4 ring-red-500/20 shadow-[0_6px_20px_rgba(239,68,68,0.25)]'
+                      )}
+                    >
+                      {/* Top Anchor Dot */}
+                      <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs pointer-events-none" />
+                      {/* Bottom Anchor Dot */}
+                      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs pointer-events-none" />
 
-                      {/* Status Indicator Pill */}
-                      {isDown ? (
-                        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-red-100 text-red-800 border border-red-300">
-                          <span className="w-1.5 h-1.5 rounded-full bg-red-600 animate-ping" />
-                          <span>DOWN</span>
-                        </span>
-                      ) : isSimulatedBlast ? (
-                        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-amber-100 text-amber-900 border border-amber-300">
-                          <AlertTriangle className="w-2.5 h-2.5 text-amber-700" />
-                          <span>Risk</span>
-                        </span>
-                      ) : isUpstream ? (
-                        <span className="text-[9px] font-mono font-bold text-[#0047AB] bg-blue-50 px-1 rounded border border-blue-200">
-                          Prereq
+                      {/* Mode Tag / Sequence Pill */}
+                      <div className="flex items-center justify-between gap-1 mb-1.5">
+                        <span className="text-[10px] font-mono font-bold px-1.5 py-0.5 rounded bg-[#F4EBE0] border border-[#E0D0BE] text-[#5A4E44]">
+                          {viewMode === 'recovery' ? `Step ${meta.recoveryStep}` : `T${meta.tier}`}
                         </span>
-                      ) : (
-                        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-[#EBF7EE] text-[#0A6C3D] border border-[#0F8E52]/25">
-                          <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-xs" />
-                          <span>healthy</span>
-                        </span>
-                      )}
-                    </div>
 
-                    {/* Node Core Info */}
-                    <div className="flex items-center gap-2">
-                      <div className={cn('w-7 h-7 rounded-lg border flex items-center justify-center shrink-0 shadow-xs', meta.iconBg)}>
-                        <IconComponent className={cn('w-4 h-4', meta.iconColor)} />
+                        {/* Status Indicator Pill */}
+                        {isDown ? (
+                          <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-red-100 text-red-800 border border-red-300">
+                            <span className="w-1.5 h-1.5 rounded-full bg-red-600 animate-ping" />
+                            <span>DOWN</span>
+                          </span>
+                        ) : isSimulatedBlast ? (
+                          <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-amber-100 text-amber-900 border border-amber-300">
+                            <AlertTriangle className="w-2.5 h-2.5 text-amber-700" />
+                            <span>Risk</span>
+                          </span>
+                        ) : isUpstream ? (
+                          <span className="text-[9px] font-mono font-bold text-[#0047AB] bg-blue-50 px-1 rounded border border-blue-200">
+                            Prereq
+                          </span>
+                        ) : (
+                          <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-[#EBF7EE] text-[#0A6C3D] border border-[#0F8E52]/25">
+                            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-xs" />
+                            <span>healthy</span>
+                          </span>
+                        )}
                       </div>
-                      <div className="min-w-0 flex-1">
-                        <div className="text-xs font-black text-[#1A1A1A] truncate leading-tight">
-                          {meta.name}
+
+                      {/* Node Core Info */}
+                      <div className="flex items-center gap-2">
+                        <div className={cn('w-7 h-7 rounded-lg border flex items-center justify-center shrink-0 shadow-xs', meta.iconBg)}>
+                          <IconComponent className={cn('w-4 h-4', meta.iconColor)} />
                         </div>
-                        <div className="text-[10px] text-[#6E6258] font-mono truncate">
-                          {meta.port} &bull; {meta.latency}
+                        <div className="min-w-0 flex-1">
+                          <div className="text-xs font-black text-[#1A1A1A] truncate leading-tight">
+                            {meta.name}
+                          </div>
+                          <div className="text-[10px] text-[#6E6258] font-mono truncate">
+                            {meta.port} &bull; {meta.latency}
+                          </div>
                         </div>
                       </div>
                     </div>

From aa64798ce7aad145df206ee4ca73ee6136f593b3 Mon Sep 17 00:00:00 2001
From: Ganeshbeldar015 <ganeshbeldar.ug@gmail.com>
Date: Sun, 1 Nov 2026 03:28:43 +0530
Subject: [PATCH 3/5] feat(topology): add full-width canvas with left rail
 gutter, slide-out drawer, and AI tech typography

---
 .../src/components/topology/TopologyGraph.tsx | 1081 +++++++++--------
 1 file changed, 557 insertions(+), 524 deletions(-)

diff --git a/apps/web/src/components/topology/TopologyGraph.tsx b/apps/web/src/components/topology/TopologyGraph.tsx
index ade163a..dc3d45f 100644
--- a/apps/web/src/components/topology/TopologyGraph.tsx
+++ b/apps/web/src/components/topology/TopologyGraph.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { Card } from '../common/Card';
 import { Badge } from '../common/Badge';
 import { Button } from '../common/Button';
@@ -23,9 +24,9 @@ import {
   Activity,
   Flame,
   Radio,
-  Server,
-  Play,
   RotateCcw,
+  X,
+  SlidersHorizontal,
 } from 'lucide-react';
 
 export interface TopologyGraphProps {
@@ -35,9 +36,9 @@ export interface TopologyGraphProps {
 interface NodeLayoutMeta {
   id: string;
   name: string;
-  tier: number;
-  tierLabel: string;
-  tierName: string;
+  layer: number;
+  layerLabel: string;
+  layerName: string;
   recoveryStep: number;
   type: 'database' | 'application' | 'gateway' | 'cache';
   port: string;
@@ -56,9 +57,9 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
   'web-frontend': {
     id: 'web-frontend',
     name: 'Horizon Web UI',
-    tier: 3,
-    tierLabel: 'Tier 3',
-    tierName: 'Client Ingress',
+    layer: 3,
+    layerLabel: 'L3',
+    layerName: 'Client Ingress',
     recoveryStep: 5,
     type: 'application',
     port: ':3000',
@@ -69,15 +70,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-blue-50 border-blue-200',
     engine: 'React 19 / Vite Edge',
     description: 'Client-facing mission control dashboard and operator cockpit.',
-    x: 400,
-    y: 56,
+    x: 470,
+    y: 55,
   },
   'api-gateway': {
     id: 'api-gateway',
     name: 'API Gateway',
-    tier: 2,
-    tierLabel: 'Tier 2',
-    tierName: 'Routing & Proxy',
+    layer: 2,
+    layerLabel: 'L2',
+    layerName: 'Routing & Proxy',
     recoveryStep: 4,
     type: 'gateway',
     port: ':8080',
@@ -88,15 +89,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-indigo-50 border-indigo-200',
     engine: 'Envoy Reverse Proxy',
     description: 'TLS termination, rate limiting, and intelligent load routing.',
-    x: 400,
-    y: 195,
+    x: 470,
+    y: 185,
   },
   'auth-service': {
     id: 'auth-service',
     name: 'Auth Service',
-    tier: 1,
-    tierLabel: 'Tier 1',
-    tierName: 'Microservice',
+    layer: 1,
+    layerLabel: 'L1',
+    layerName: 'Microservice',
     recoveryStep: 3,
     type: 'application',
     port: ':5001',
@@ -107,15 +108,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-emerald-50 border-emerald-200',
     engine: 'EIP-712 / Go Auth Engine',
     description: 'Session state validation, HMAC token signing, and Web3 key authorization.',
-    x: 260,
-    y: 340,
+    x: 310,
+    y: 325,
   },
   'payment-service': {
     id: 'payment-service',
     name: 'Payment Service',
-    tier: 1,
-    tierLabel: 'Tier 1',
-    tierName: 'Microservice',
+    layer: 1,
+    layerLabel: 'L1',
+    layerName: 'Microservice',
     recoveryStep: 3,
     type: 'application',
     port: ':5002',
@@ -126,15 +127,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-purple-50 border-purple-200',
     engine: 'MST Escrow / Stripe Gateway',
     description: 'NFT subscription license checking and fiat/crypto payment settlement.',
-    x: 540,
-    y: 340,
+    x: 630,
+    y: 325,
   },
   'redis-cache': {
     id: 'redis-cache',
     name: 'Redis Cache',
-    tier: 0,
-    tierLabel: 'Tier 0',
-    tierName: 'In-Memory Store',
+    layer: 0,
+    layerLabel: 'L0',
+    layerName: 'In-Memory Store',
     recoveryStep: 2,
     type: 'cache',
     port: ':6379',
@@ -145,15 +146,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-amber-50 border-amber-200',
     engine: 'Redis 7.2 Memory Cluster',
     description: 'High-throughput session cache, rate-limit buckets, and pub/sub message bus.',
-    x: 160,
-    y: 505,
+    x: 210,
+    y: 480,
   },
   'db-primary': {
     id: 'db-primary',
     name: 'PostgreSQL Primary',
-    tier: 0,
-    tierLabel: 'Tier 0',
-    tierName: 'Primary Database',
+    layer: 0,
+    layerLabel: 'L0',
+    layerName: 'Primary Database',
     recoveryStep: 1,
     type: 'database',
     port: ':5432',
@@ -164,15 +165,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-blue-100 border-blue-300',
     engine: 'PostgreSQL 16 Primary ACID',
     description: 'Foundational system of record with continuous WAL replication archiving.',
-    x: 400,
-    y: 505,
+    x: 470,
+    y: 480,
   },
   'db-replica': {
     id: 'db-replica',
     name: 'PostgreSQL Replica',
-    tier: 0,
-    tierLabel: 'Tier 0',
-    tierName: 'Standby Database',
+    layer: 0,
+    layerLabel: 'L0',
+    layerName: 'Standby Database',
     recoveryStep: 2,
     type: 'database',
     port: ':5433',
@@ -183,8 +184,8 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-sky-50 border-sky-200',
     engine: 'PostgreSQL 16 Hot Standby',
     description: 'Real-time asynchronous read replica ready for automated failover promotion.',
-    x: 640,
-    y: 505,
+    x: 730,
+    y: 480,
   },
 };
 
@@ -202,74 +203,75 @@ const STATIC_EDGES: GraphEdgeConfig[] = [
     sourceId: 'api-gateway',
     targetId: 'web-frontend',
     label: 'User Traffic Ingress',
-    path: 'M 400 156 L 400 95',
+    path: 'M 470 148 L 470 92',
   },
   {
     id: 'edge-auth-to-gateway',
     sourceId: 'auth-service',
     targetId: 'api-gateway',
     label: 'Route Auth & JWT',
-    path: 'M 260 301 C 260 255, 365 265, 365 234',
+    path: 'M 310 288 C 310 245, 430 255, 430 222',
   },
   {
     id: 'edge-cache-to-gateway',
     sourceId: 'redis-cache',
     targetId: 'api-gateway',
     label: 'Session & Rate Limits',
-    path: 'M 160 466 C 120 340, 290 280, 335 234',
+    path: 'M 210 443 C 170 330, 360 270, 400 222',
   },
   {
     id: 'edge-cache-to-auth',
     sourceId: 'redis-cache',
     targetId: 'auth-service',
     label: 'Token Caching',
-    path: 'M 175 466 C 175 420, 235 425, 235 379',
+    path: 'M 220 443 C 220 400, 280 405, 280 362',
   },
   {
     id: 'edge-db-to-auth',
     sourceId: 'db-primary',
     targetId: 'auth-service',
     label: 'User Credentials Query',
-    path: 'M 370 466 C 370 420, 285 425, 285 379',
+    path: 'M 430 443 C 430 400, 340 405, 340 362',
   },
   {
     id: 'edge-auth-to-payment',
     sourceId: 'auth-service',
     targetId: 'payment-service',
     label: 'Identity Attestation',
-    path: 'M 344 340 C 400 340, 400 340, 456 340',
+    path: 'M 400 325 C 470 325, 470 325, 540 325',
   },
   {
     id: 'edge-db-to-payment',
     sourceId: 'db-primary',
     targetId: 'payment-service',
     label: 'Ledger Balance Query',
-    path: 'M 430 466 C 430 420, 540 425, 540 379',
+    path: 'M 510 443 C 510 400, 630 405, 630 362',
   },
   {
     id: 'edge-db-to-cache',
     sourceId: 'db-primary',
     targetId: 'redis-cache',
     label: 'Cache Warmup & Sync',
-    path: 'M 316 505 C 280 505, 280 505, 244 505',
+    path: 'M 380 480 C 340 480, 340 480, 300 480',
   },
   {
     id: 'edge-db-to-replica',
     sourceId: 'db-primary',
     targetId: 'db-replica',
     label: 'Continuous WAL Stream',
-    path: 'M 484 505 C 520 505, 520 505, 556 505',
+    path: 'M 560 480 C 600 480, 600 480, 640 480',
   },
 ];
 
 export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' }) => {
   const [nodes, setNodes] = useState<SystemNode[]>([]);
   const [edges, setEdges] = useState<{ dependent_id: string; depends_on_id: string }[]>([]);
-  const [selectedNodeId, setSelectedNodeId] = useState<string | null>('db-primary');
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
   const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [viewMode, setViewMode] = useState<'traffic' | 'recovery'>('traffic');
-  const [tierFilter, setTierFilter] = useState<'all' | 't0' | 't1' | 't2-3'>('all');
+  const [filter, setFilter] = useState<'all' | 'data' | 'services' | 'edge'>('all');
+  const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
 
   const loadTopology = useCallback(async () => {
     try {
@@ -310,7 +312,7 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
     return STATIC_NODE_METAS[selectedNodeId] || null;
   }, [selectedNodeId]);
 
-  // Compute upstream prerequisites for selected node (nodes it depends on)
+  // Compute upstream prerequisites for selected node
   const upstreamDependencies = useMemo(() => {
     if (!selectedNodeId) return [];
     const directPrereqs = edges
@@ -319,7 +321,7 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
     return Array.from(new Set(directPrereqs));
   }, [selectedNodeId, edges]);
 
-  // Compute blast radius for selected node (all nodes that depend on it directly or indirectly)
+  // Compute blast radius for selected node
   const blastRadius = useMemo(() => {
     if (!selectedNodeId) return [];
     const affected = new Set<string>();
@@ -348,6 +350,15 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
 
   const isSelectedDown = selectedNode?.status === 'down';
 
+  const handleSelectNode = (nodeId: string) => {
+    setSelectedNodeId(nodeId);
+    setIsDrawerOpen(true);
+  };
+
+  const handleCloseDrawer = () => {
+    setIsDrawerOpen(false);
+  };
+
   // Toggle simulate failure or restore
   const handleToggleState = async (nodeId: string, currentStatus: string) => {
     const nextStatus = currentStatus === 'down' ? 'healthy' : 'down';
@@ -384,9 +395,9 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
   };
 
   return (
-    <div className={cn('horizon-topology-graph grid grid-cols-1 xl:grid-cols-3 gap-6 font-sans', className)}>
-      {/* Main Interactive Visualizer */}
-      <Card className="horizon-topology-card p-5 sm:p-6 xl:col-span-2 flex flex-col justify-between min-h-[660px] relative overflow-hidden skeuo-card border-[#E5D7C5]">
+    <div className={cn('horizon-topology-graph w-full font-sans relative', className)}>
+      {/* Full Width Visualizer Card */}
+      <Card className="horizon-topology-card p-5 sm:p-6 flex flex-col justify-between min-h-[670px] relative overflow-hidden skeuo-card border-[#E5D7C5]">
         {/* Subtle Network Dot Grid */}
         <div className="absolute inset-0 opacity-[0.06] pointer-events-none bg-[radial-gradient(#0047AB_1.5px,transparent_1.5px)] [background-size:24px_24px]" />
 
@@ -402,12 +413,12 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                   <h2 className="text-base font-black text-[#1A1A1A] tracking-tight">
                     Autonomous Dependency DAG
                   </h2>
-                  <span className="px-2 py-0.5 rounded-full text-[10px] font-mono font-bold bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20">
+                  <span className="px-2 py-0.5 rounded-full text-[10px] font-mono tracking-wider font-bold bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20">
                     O(V + E)
                   </span>
                 </div>
                 <p className="text-xs text-[#6E6258] font-medium mt-0.5">
-                  Dynamic multi-tier topology graph showing service dependencies, traffic paths, and cascade risk.
+                  Multi-tier service dependency topology with reverse blast radius resolution.
                 </p>
               </div>
             </div>
@@ -443,6 +454,18 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                 </button>
               </div>
 
+              {/* Drawer Toggle (if node selected) */}
+              {selectedNodeId && !isDrawerOpen && (
+                <button
+                  type="button"
+                  onClick={() => setIsDrawerOpen(true)}
+                  className="px-3 py-1.5 rounded-xl bg-[#0047AB]/10 border border-[#0047AB]/25 text-[#0047AB] hover:bg-[#0047AB]/20 text-xs font-bold flex items-center gap-1.5 cursor-pointer transition-colors"
+                >
+                  <SlidersHorizontal className="w-3.5 h-3.5" />
+                  <span>Inspect Service</span>
+                </button>
+              )}
+
               {/* Refresh DAG */}
               <Button
                 variant="secondary"
@@ -456,31 +479,31 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
             </div>
           </div>
 
-          {/* Sub-toolbar: Tier Filter & Outage Alert Banner */}
+          {/* Sub-toolbar: Non-Repetitive Filter & Outage Alert Banner */}
           <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-4 pb-2 text-xs relative z-10">
-            {/* Filter pills */}
+            {/* Filter pills without repeating "Tier" */}
             <div className="flex items-center gap-1.5 text-xs">
-              <span className="text-[11px] font-mono text-[#8A7B6D] font-bold uppercase mr-1">
+              <span className="text-[10px] font-mono tracking-wider text-[#8A7B6D] font-bold uppercase mr-1">
                 Filter:
               </span>
               {[
-                { id: 'all', label: 'All Tiers (7)' },
-                { id: 't0', label: 'Tier 0 Data' },
-                { id: 't1', label: 'Tier 1 Services' },
-                { id: 't2-3', label: 'Tier 2-3 Edge' },
-              ].map((filter) => (
+                { id: 'all', label: 'All (7)' },
+                { id: 'data', label: 'L0 Data' },
+                { id: 'services', label: 'L1 Services' },
+                { id: 'edge', label: 'L2-3 Edge' },
+              ].map((f) => (
                 <button
-                  key={filter.id}
+                  key={f.id}
                   type="button"
-                  onClick={() => setTierFilter(filter.id as any)}
+                  onClick={() => setFilter(f.id as any)}
                   className={cn(
-                    'px-2.5 py-1 rounded-lg font-mono text-[11px] font-semibold transition-colors cursor-pointer',
-                    tierFilter === filter.id
+                    'px-2.5 py-1 rounded-lg font-mono text-[10px] tracking-wider font-bold uppercase transition-colors cursor-pointer',
+                    filter === f.id
                       ? 'bg-[#0047AB] text-white shadow-xs'
                       : 'bg-white border border-[#E5D7C5] text-[#6E6258] hover:bg-[#FAF3EA]'
                   )}
                 >
-                  {filter.label}
+                  {f.label}
                 </button>
               ))}
             </div>
@@ -489,548 +512,558 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
             {downNodes.length > 0 ? (
               <div className="flex items-center gap-2 px-3 py-1 rounded-lg bg-red-50 border border-red-300 text-red-700 text-xs font-bold animate-pulse">
                 <AlertTriangle className="w-3.5 h-3.5 text-red-600 shrink-0" />
-                <span>
-                  {downNodes.length} Outage Active: {downNodes.map((n) => n.name).join(', ')}
+                <span className="font-mono text-[11px] tracking-wider">
+                  {downNodes.length} OUTAGE ACTIVE: {downNodes.map((n) => n.name).join(', ')}
                 </span>
                 <button
                   type="button"
                   onClick={handleRestoreAll}
-                  className="ml-1 underline hover:text-red-900 cursor-pointer text-[11px]"
+                  className="ml-1 underline hover:text-red-900 cursor-pointer font-mono text-[10px] uppercase font-bold"
                 >
                   Heal All
                 </button>
               </div>
             ) : (
-              <div className="flex items-center gap-2 text-xs font-mono text-emerald-800">
+              <div className="flex items-center gap-2 text-xs font-mono tracking-wider text-emerald-800">
                 <span className="w-2 h-2 rounded-full bg-emerald-500 shadow-xs" />
-                <span className="font-semibold">All 7 Services Operational • Zero Deadlocks</span>
+                <span className="font-semibold text-[11px]">ALL 7 NODES OPERATIONAL &bull; 0 CYCLES</span>
               </div>
             )}
           </div>
 
-          {/* Interactive Topological DAG Canvas */}
-          <div className="relative w-full overflow-x-auto overflow-y-hidden rounded-2xl bg-[#FFFDF9] border border-[#E8DCCE] p-2 shadow-inner">
-            <div className="relative w-[780px] h-[580px] mx-auto select-none">
-              {/* Background Tier Swimlanes */}
-              <div className="absolute inset-0 pointer-events-none flex flex-col justify-between py-2">
-                {/* Tier 3: Client Ingress */}
-                <div className="h-[96px] rounded-xl border border-dashed border-[#0047AB]/15 bg-[#0047AB]/[0.02] relative px-3 py-1.5 flex justify-between items-start">
-                  <div className="flex items-center gap-1.5 text-[10px] font-mono font-bold text-[#0047AB]">
-                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 border border-[#0047AB]/20">
-                      TIER 3
+          {/* Interactive Topological DAG Canvas with Left Rail */}
+          <div className="relative w-full overflow-x-auto overflow-y-hidden rounded-2xl bg-[#FFFDF9] border border-[#E8DCCE] p-3 shadow-inner">
+            <div className="relative w-[880px] h-[550px] mx-auto select-none flex">
+              {/* Dedicated Left-Side Rail Gutter (No text behind cards!) */}
+              <div className="w-[100px] h-full flex flex-col justify-between py-2 border-r border-[#EADCC9]/60 shrink-0 select-none z-10">
+                {/* L3: Ingress */}
+                <div className="h-[90px] flex flex-col justify-center pr-3">
+                  <div className="flex items-center gap-1.5">
+                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-mono tracking-widest text-[9px] font-black border border-[#0047AB]/20">
+                      L3
                     </span>
-                    <span>CLIENT INGRESS & WEB EDGE</span>
-                  </div>
-                  {viewMode === 'recovery' && (
-                    <span className="text-[10px] font-mono font-bold text-[#0047AB] bg-white px-2 py-0.5 rounded border border-[#0047AB]/30">
-                      Step 5: Client Restoration
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase">
+                      Ingress
                     </span>
-                  )}
+                  </div>
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-0.5">
+                    Client Edge
+                  </span>
                 </div>
 
-                {/* Tier 2: API Gateway */}
-                <div className="h-[105px] rounded-xl border border-dashed border-indigo-500/15 bg-indigo-500/[0.02] relative px-3 py-1.5 flex justify-between items-start">
-                  <div className="flex items-center gap-1.5 text-[10px] font-mono font-bold text-indigo-700">
-                    <span className="px-1.5 py-0.5 rounded bg-indigo-50 border border-indigo-200">
-                      TIER 2
+                {/* L2: Gateway */}
+                <div className="h-[95px] flex flex-col justify-center pr-3">
+                  <div className="flex items-center gap-1.5">
+                    <span className="px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-700 font-mono tracking-widest text-[9px] font-black border border-indigo-200">
+                      L2
                     </span>
-                    <span>API GATEWAY & ROUTING</span>
-                  </div>
-                  {viewMode === 'recovery' && (
-                    <span className="text-[10px] font-mono font-bold text-indigo-700 bg-white px-2 py-0.5 rounded border border-indigo-300">
-                      Step 4: Gateway Routing
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase">
+                      Gateway
                     </span>
-                  )}
+                  </div>
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-0.5">
+                    Route & TLS
+                  </span>
                 </div>
 
-                {/* Tier 1: Core Microservices */}
-                <div className="h-[125px] rounded-xl border border-dashed border-emerald-500/15 bg-emerald-500/[0.02] relative px-3 py-1.5 flex justify-between items-start">
-                  <div className="flex items-center gap-1.5 text-[10px] font-mono font-bold text-emerald-800">
-                    <span className="px-1.5 py-0.5 rounded bg-emerald-50 border border-emerald-200">
-                      TIER 1
+                {/* L1: Microservices */}
+                <div className="h-[105px] flex flex-col justify-center pr-3">
+                  <div className="flex items-center gap-1.5">
+                    <span className="px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-800 font-mono tracking-widest text-[9px] font-black border border-emerald-200">
+                      L1
                     </span>
-                    <span>CORE APPLICATION SERVICES</span>
-                  </div>
-                  {viewMode === 'recovery' && (
-                    <span className="text-[10px] font-mono font-bold text-emerald-800 bg-white px-2 py-0.5 rounded border border-emerald-300">
-                      Step 3: Business Microservices
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase">
+                      Core
                     </span>
-                  )}
+                  </div>
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-0.5">
+                    Application
+                  </span>
                 </div>
 
-                {/* Tier 0: Foundational Data & Storage */}
-                <div className="h-[125px] rounded-xl border border-dashed border-[#0047AB]/20 bg-[#0047AB]/[0.03] relative px-3 py-1.5 flex justify-between items-start">
-                  <div className="flex items-center gap-1.5 text-[10px] font-mono font-bold text-[#0047AB]">
-                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 border border-[#0047AB]/25">
-                      TIER 0
+                {/* L0: Storage */}
+                <div className="h-[105px] flex flex-col justify-center pr-3">
+                  <div className="flex items-center gap-1.5">
+                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-mono tracking-widest text-[9px] font-black border border-[#0047AB]/25">
+                      L0
                     </span>
-                    <span>FOUNDATIONAL PERSISTENCE & CACHING (ROOT)</span>
-                  </div>
-                  {viewMode === 'recovery' && (
-                    <span className="text-[10px] font-mono font-bold text-[#0047AB] bg-white px-2 py-0.5 rounded border border-[#0047AB]/30">
-                      Steps 1-2: Root Data & Cache
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#0047AB] uppercase">
+                      Data
                     </span>
-                  )}
+                  </div>
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-0.5">
+                    Root ACID
+                  </span>
                 </div>
               </div>
 
-              {/* SVG Connectors Canvas */}
-              <svg
-                className="absolute inset-0 w-full h-full pointer-events-none"
-                viewBox="0 0 780 580"
-              >
-                <defs>
-                  {/* Default arrow marker */}
-                  <marker
-                    id="arrow-default"
-                    viewBox="0 0 10 10"
-                    refX="6"
-                    refY="5"
-                    markerWidth="6"
-                    markerHeight="6"
-                    orient="auto-start-reverse"
-                  >
-                    <path d="M 0 1 L 8 5 L 0 9 z" fill="#94A3B8" />
-                  </marker>
+              {/* Main Node Canvas Area */}
+              <div className="relative flex-1 h-full overflow-hidden">
+                {/* Subtle Horizontal Divider Lines (Zero text collisions!) */}
+                <div className="absolute inset-0 pointer-events-none flex flex-col justify-between py-2">
+                  <div className="h-[90px] border-b border-dashed border-[#E5D7C5]/40" />
+                  <div className="h-[95px] border-b border-dashed border-[#E5D7C5]/40" />
+                  <div className="h-[105px] border-b border-dashed border-[#E5D7C5]/40" />
+                  <div className="h-[105px]" />
+                </div>
 
-                  {/* Upstream prerequisite arrow (Cobalt) */}
-                  <marker
-                    id="arrow-upstream"
-                    viewBox="0 0 10 10"
-                    refX="6"
-                    refY="5"
-                    markerWidth="6"
-                    markerHeight="6"
-                    orient="auto-start-reverse"
-                  >
-                    <path d="M 0 1 L 8 5 L 0 9 z" fill="#0047AB" />
-                  </marker>
+                {/* SVG Connectors Canvas */}
+                <svg
+                  className="absolute inset-0 w-full h-full pointer-events-none"
+                  viewBox="0 0 780 550"
+                  style={{ left: '-100px', width: '880px' }}
+                >
+                  <defs>
+                    <marker
+                      id="arrow-default"
+                      viewBox="0 0 10 10"
+                      refX="6"
+                      refY="5"
+                      markerWidth="6"
+                      markerHeight="6"
+                      orient="auto-start-reverse"
+                    >
+                      <path d="M 0 1 L 8 5 L 0 9 z" fill="#94A3B8" />
+                    </marker>
 
-                  {/* Downstream dependent arrow (Amber) */}
-                  <marker
-                    id="arrow-downstream"
-                    viewBox="0 0 10 10"
-                    refX="6"
-                    refY="5"
-                    markerWidth="6"
-                    markerHeight="6"
-                    orient="auto-start-reverse"
-                  >
-                    <path d="M 0 1 L 8 5 L 0 9 z" fill="#D97706" />
-                  </marker>
+                    <marker
+                      id="arrow-upstream"
+                      viewBox="0 0 10 10"
+                      refX="6"
+                      refY="5"
+                      markerWidth="6"
+                      markerHeight="6"
+                      orient="auto-start-reverse"
+                    >
+                      <path d="M 0 1 L 8 5 L 0 9 z" fill="#0047AB" />
+                    </marker>
 
-                  {/* Outage cascading danger arrow (Red) */}
-                  <marker
-                    id="arrow-danger"
-                    viewBox="0 0 10 10"
-                    refX="6"
-                    refY="5"
-                    markerWidth="6"
-                    markerHeight="6"
-                    orient="auto-start-reverse"
-                  >
-                    <path d="M 0 1 L 8 5 L 0 9 z" fill="#EF4444" />
-                  </marker>
-                </defs>
+                    <marker
+                      id="arrow-downstream"
+                      viewBox="0 0 10 10"
+                      refX="6"
+                      refY="5"
+                      markerWidth="6"
+                      markerHeight="6"
+                      orient="auto-start-reverse"
+                    >
+                      <path d="M 0 1 L 8 5 L 0 9 z" fill="#D97706" />
+                    </marker>
 
-                {/* Render Directed Bézier Curves */}
-                {STATIC_EDGES.map((edge) => {
-                  const state = getEdgeState(edge);
-                  const source = STATIC_NODE_METAS[edge.sourceId];
-                  const target = STATIC_NODE_METAS[edge.targetId];
+                    <marker
+                      id="arrow-danger"
+                      viewBox="0 0 10 10"
+                      refX="6"
+                      refY="5"
+                      markerWidth="6"
+                      markerHeight="6"
+                      orient="auto-start-reverse"
+                    >
+                      <path d="M 0 1 L 8 5 L 0 9 z" fill="#EF4444" />
+                    </marker>
+                  </defs>
 
-                  let strokeColor = '#CBD5E1';
-                  let strokeWidth = 1.75;
-                  let strokeDash = '5 4';
-                  let marker = 'url(#arrow-default)';
-                  let animClass = 'animate-dag-flow';
-                  let opacity = 1;
+                  {/* Render Directed Bézier Curves */}
+                  {STATIC_EDGES.map((edge) => {
+                    const state = getEdgeState(edge);
+                    const source = STATIC_NODE_METAS[edge.sourceId];
+                    const target = STATIC_NODE_METAS[edge.targetId];
 
-                  if (state === 'upstream') {
-                    strokeColor = '#0047AB';
-                    strokeWidth = 2.75;
-                    strokeDash = '6 3';
-                    marker = 'url(#arrow-upstream)';
-                    animClass = 'animate-dag-flow-fast';
-                  } else if (state === 'downstream') {
-                    strokeColor = '#D97706';
-                    strokeWidth = 2.5;
-                    strokeDash = '6 3';
-                    marker = 'url(#arrow-downstream)';
-                    animClass = 'animate-dag-flow-fast';
-                  } else if (state === 'danger') {
-                    strokeColor = '#EF4444';
-                    strokeWidth = 3;
-                    strokeDash = '4 4';
-                    marker = 'url(#arrow-danger)';
-                    animClass = 'animate-dag-flow-fast';
-                  } else if (state === 'dimmed') {
-                    opacity = 0.22;
-                    animClass = '';
-                  }
+                    let strokeColor = '#CBD5E1';
+                    let strokeWidth = 1.75;
+                    let strokeDash = '5 4';
+                    let marker = 'url(#arrow-default)';
+                    let animClass = 'animate-dag-flow';
+                    let opacity = 1;
 
-                  return (
-                    <g key={edge.id} className="cursor-pointer group">
-                      {/* Invisible wider hit area for hover */}
-                      <path
-                        d={edge.path}
-                        fill="none"
-                        stroke="transparent"
-                        strokeWidth={14}
-                        className="pointer-events-auto"
-                      />
-                      {/* Visible directed curve */}
-                      <path
-                        d={edge.path}
-                        fill="none"
-                        stroke={strokeColor}
-                        strokeWidth={strokeWidth}
-                        strokeDasharray={strokeDash}
-                        markerEnd={viewMode === 'recovery' ? marker : undefined}
-                        markerStart={viewMode === 'traffic' ? marker : undefined}
-                        className={cn('transition-all duration-150', animClass, 'group-hover:stroke-[#0047AB] group-hover:stroke-[3px]')}
-                        style={{ opacity }}
-                      />
-                      <title>{`${source?.name} → ${target?.name} (${edge.label})`}</title>
-                    </g>
-                  );
-                })}
-              </svg>
+                    if (state === 'upstream') {
+                      strokeColor = '#0047AB';
+                      strokeWidth = 2.75;
+                      strokeDash = '6 3';
+                      marker = 'url(#arrow-upstream)';
+                      animClass = 'animate-dag-flow-fast';
+                    } else if (state === 'downstream') {
+                      strokeColor = '#D97706';
+                      strokeWidth = 2.5;
+                      strokeDash = '6 3';
+                      marker = 'url(#arrow-downstream)';
+                      animClass = 'animate-dag-flow-fast';
+                    } else if (state === 'danger') {
+                      strokeColor = '#EF4444';
+                      strokeWidth = 3;
+                      strokeDash = '4 4';
+                      marker = 'url(#arrow-danger)';
+                      animClass = 'animate-dag-flow-fast';
+                    } else if (state === 'dimmed') {
+                      opacity = 0.22;
+                      animClass = '';
+                    }
 
-              {/* Interactive Node Cards */}
-              {Object.values(STATIC_NODE_METAS).map((meta) => {
-                const liveNode = nodes.find((n) => n.id === meta.id);
-                const status = liveNode?.status || 'healthy';
-                const isDown = status === 'down';
-                const isSelected = selectedNodeId === meta.id;
-                const isUpstream = upstreamDependencies.includes(meta.id);
-                const isDownstream = blastRadius.includes(meta.id);
-                const isSimulatedBlast = isDownstream && isSelectedDown;
+                    return (
+                      <g key={edge.id} className="cursor-pointer group">
+                        <path
+                          d={edge.path}
+                          fill="none"
+                          stroke="transparent"
+                          strokeWidth={14}
+                          className="pointer-events-auto"
+                        />
+                        <path
+                          d={edge.path}
+                          fill="none"
+                          stroke={strokeColor}
+                          strokeWidth={strokeWidth}
+                          strokeDasharray={strokeDash}
+                          markerEnd={viewMode === 'recovery' ? marker : undefined}
+                          markerStart={viewMode === 'traffic' ? marker : undefined}
+                          className={cn('transition-all duration-150', animClass, 'group-hover:stroke-[#0047AB] group-hover:stroke-[3px]')}
+                          style={{ opacity }}
+                        />
+                        <title>{`${source?.name} → ${target?.name} (${edge.label})`}</title>
+                      </g>
+                    );
+                  })}
+                </svg>
 
-                // Dim card if filter does not match
-                let isFilteredOut = false;
-                if (tierFilter === 't0' && meta.tier !== 0) isFilteredOut = true;
-                if (tierFilter === 't1' && meta.tier !== 1) isFilteredOut = true;
-                if (tierFilter === 't2-3' && meta.tier < 2) isFilteredOut = true;
+                {/* Interactive Node Cards */}
+                {Object.values(STATIC_NODE_METAS).map((meta) => {
+                  const liveNode = nodes.find((n) => n.id === meta.id);
+                  const status = liveNode?.status || 'healthy';
+                  const isDown = status === 'down';
+                  const isSelected = selectedNodeId === meta.id;
+                  const isUpstream = upstreamDependencies.includes(meta.id);
+                  const isDownstream = blastRadius.includes(meta.id);
+                  const isSimulatedBlast = isDownstream && isSelectedDown;
 
-                const IconComponent = meta.icon;
+                  // Dim card if filter does not match
+                  let isFilteredOut = false;
+                  if (filter === 'data' && meta.layer !== 0) isFilteredOut = true;
+                  if (filter === 'services' && meta.layer !== 1) isFilteredOut = true;
+                  if (filter === 'edge' && meta.layer < 2) isFilteredOut = true;
 
-                return (
-                  <div
-                    key={meta.id}
-                    style={{
-                      left: `${meta.x}px`,
-                      top: `${meta.y}px`,
-                      transform: 'translate(-50%, -50%)',
-                    }}
-                    className={cn(
-                      'absolute pointer-events-auto select-none transition-opacity duration-150',
-                      isSelected ? 'z-20' : 'z-10',
-                      isFilteredOut && 'opacity-25 pointer-events-none'
-                    )}
-                  >
+                  const IconComponent = meta.icon;
+                  // Compensate for left gutter offset (100px)
+                  const adjustedX = meta.x - 100;
+
+                  return (
                     <div
-                      onClick={() => setSelectedNodeId(meta.id)}
-                      onMouseEnter={() => setHoveredNodeId(meta.id)}
-                      onMouseLeave={() => setHoveredNodeId(null)}
+                      key={meta.id}
+                      style={{
+                        left: `${adjustedX}px`,
+                        top: `${meta.y}px`,
+                        transform: 'translate(-50%, -50%)',
+                      }}
                       className={cn(
-                        'horizon-dag-node w-[168px] rounded-2xl p-2.5 transition-all duration-150 cursor-pointer select-none',
-                        'shadow-[0_2px_8px_rgba(26,26,26,0.06),0_1px_2px_rgba(26,26,26,0.04)]',
-                        // Base Card Style (Rock solid, zero translation movement!)
-                        !isSelected && !isDown && !isSimulatedBlast && 'bg-white border-2 border-[rgba(26,26,26,0.12)] hover:border-[#0047AB]/70 hover:shadow-[0_4px_16px_rgba(0,71,171,0.18)] hover:ring-2 hover:ring-[#0047AB]/20',
-                        // Selected Style
-                        isSelected && !isDown && 'bg-white border-2 border-[#0047AB] ring-4 ring-[#0047AB]/20 shadow-[0_6px_20px_rgba(0,71,171,0.22)]',
-                        // Upstream Prerequisite of Selected Node
-                        isUpstream && !isSelected && 'border-2 border-[#0047AB]/60 bg-blue-50/40',
-                        // Downstream Consumer of Selected Node (Normal Mode)
-                        isDownstream && !isDown && !isSimulatedBlast && !isSelected && 'border-2 border-amber-300 bg-amber-50/30',
-                        // Active Cascaded Risk (when selected target is down)
-                        isSimulatedBlast && 'border-2 border-dashed border-amber-500 bg-amber-50/90 shadow-[0_4px_14px_rgba(217,119,6,0.2)]',
-                        // Target Node Is Down (Primary Failure)
-                        isDown && 'border-2 border-red-500 bg-red-50/90 ring-4 ring-red-500/20 shadow-[0_6px_20px_rgba(239,68,68,0.25)]'
+                        'absolute pointer-events-auto select-none transition-opacity duration-150',
+                        isSelected ? 'z-20' : 'z-10',
+                        isFilteredOut && 'opacity-25 pointer-events-none'
                       )}
                     >
-                      {/* Top Anchor Dot */}
-                      <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs pointer-events-none" />
-                      {/* Bottom Anchor Dot */}
-                      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs pointer-events-none" />
-
-                      {/* Mode Tag / Sequence Pill */}
-                      <div className="flex items-center justify-between gap-1 mb-1.5">
-                        <span className="text-[10px] font-mono font-bold px-1.5 py-0.5 rounded bg-[#F4EBE0] border border-[#E0D0BE] text-[#5A4E44]">
-                          {viewMode === 'recovery' ? `Step ${meta.recoveryStep}` : `T${meta.tier}`}
-                        </span>
+                      <div
+                        onClick={() => handleSelectNode(meta.id)}
+                        onMouseEnter={() => setHoveredNodeId(meta.id)}
+                        onMouseLeave={() => setHoveredNodeId(null)}
+                        className={cn(
+                          'horizon-dag-node w-[184px] rounded-2xl p-2.5 transition-all duration-150 cursor-pointer select-none',
+                          'shadow-[0_2px_8px_rgba(26,26,26,0.06),0_1px_2px_rgba(26,26,26,0.04)]',
+                          // Base Card Style (No movement on hover!)
+                          !isSelected && !isDown && !isSimulatedBlast && 'bg-white border-2 border-[rgba(26,26,26,0.12)] hover:border-[#0047AB]/70 hover:shadow-[0_4px_16px_rgba(0,71,171,0.18)] hover:ring-2 hover:ring-[#0047AB]/20',
+                          // Selected Style
+                          isSelected && !isDown && 'bg-white border-2 border-[#0047AB] ring-4 ring-[#0047AB]/20 shadow-[0_6px_20px_rgba(0,71,171,0.22)]',
+                          // Upstream Prerequisite of Selected Node
+                          isUpstream && !isSelected && 'border-2 border-[#0047AB]/60 bg-blue-50/40',
+                          // Active Cascaded Risk (when selected target is down)
+                          isSimulatedBlast && 'border-2 border-dashed border-amber-500 bg-amber-50/90 shadow-[0_4px_14px_rgba(217,119,6,0.2)]',
+                          // Target Node Is Down (Primary Failure)
+                          isDown && 'border-2 border-red-500 bg-red-50/90 ring-4 ring-red-500/20 shadow-[0_6px_20px_rgba(239,68,68,0.25)]'
+                        )}
+                      >
+                        {/* Top Anchor Dot */}
+                        <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs pointer-events-none" />
+                        {/* Bottom Anchor Dot */}
+                        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs pointer-events-none" />
 
-                        {/* Status Indicator Pill */}
-                        {isDown ? (
-                          <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-red-100 text-red-800 border border-red-300">
-                            <span className="w-1.5 h-1.5 rounded-full bg-red-600 animate-ping" />
-                            <span>DOWN</span>
+                        {/* Mode Tag / Sequence Pill */}
+                        <div className="flex items-center justify-between gap-1 mb-1.5">
+                          <span className="text-[9px] font-mono tracking-widest font-black px-1.5 py-0.5 rounded bg-[#F4EBE0] border border-[#E0D0BE] text-[#5A4E44] uppercase">
+                            {viewMode === 'recovery' ? `STEP ${meta.recoveryStep}` : meta.layerLabel}
                           </span>
-                        ) : isSimulatedBlast ? (
-                          <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-amber-100 text-amber-900 border border-amber-300">
-                            <AlertTriangle className="w-2.5 h-2.5 text-amber-700" />
-                            <span>Risk</span>
-                          </span>
-                        ) : isUpstream ? (
-                          <span className="text-[9px] font-mono font-bold text-[#0047AB] bg-blue-50 px-1 rounded border border-blue-200">
-                            Prereq
-                          </span>
-                        ) : (
-                          <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-[#EBF7EE] text-[#0A6C3D] border border-[#0F8E52]/25">
-                            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-xs" />
-                            <span>healthy</span>
-                          </span>
-                        )}
-                      </div>
 
-                      {/* Node Core Info */}
-                      <div className="flex items-center gap-2">
-                        <div className={cn('w-7 h-7 rounded-lg border flex items-center justify-center shrink-0 shadow-xs', meta.iconBg)}>
-                          <IconComponent className={cn('w-4 h-4', meta.iconColor)} />
+                          {/* Status Indicator Pill */}
+                          {isDown ? (
+                            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-mono tracking-wider font-bold bg-red-100 text-red-800 border border-red-300">
+                              <span className="w-1.5 h-1.5 rounded-full bg-red-600 animate-ping" />
+                              <span>DOWN</span>
+                            </span>
+                          ) : isSimulatedBlast ? (
+                            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-mono tracking-wider font-bold bg-amber-100 text-amber-900 border border-amber-300">
+                              <AlertTriangle className="w-2.5 h-2.5 text-amber-700" />
+                              <span>RISK</span>
+                            </span>
+                          ) : isUpstream ? (
+                            <span className="text-[9px] font-mono tracking-wider font-bold text-[#0047AB] bg-blue-50 px-1.5 py-0.5 rounded border border-blue-200">
+                              PREREQ
+                            </span>
+                          ) : (
+                            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-mono tracking-wider font-bold bg-[#EBF7EE] text-[#0A6C3D] border border-[#0F8E52]/25">
+                              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-xs" />
+                              <span>HEALTHY</span>
+                            </span>
+                          )}
                         </div>
-                        <div className="min-w-0 flex-1">
-                          <div className="text-xs font-black text-[#1A1A1A] truncate leading-tight">
-                            {meta.name}
+
+                        {/* Node Core Info */}
+                        <div className="flex items-center gap-2">
+                          <div className={cn('w-7 h-7 rounded-lg border flex items-center justify-center shrink-0 shadow-xs', meta.iconBg)}>
+                            <IconComponent className={cn('w-4 h-4', meta.iconColor)} />
                           </div>
-                          <div className="text-[10px] text-[#6E6258] font-mono truncate">
-                            {meta.port} &bull; {meta.latency}
+                          <div className="min-w-0 flex-1">
+                            <div className="text-xs font-black text-[#1A1A1A] truncate leading-tight">
+                              {meta.name}
+                            </div>
+                            <div className="text-[10px] text-[#6E6258] font-mono tracking-wider uppercase font-bold truncate">
+                              {meta.port} &bull; {meta.latency}
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                );
-              })}
+                  );
+                })}
+              </div>
             </div>
           </div>
         </div>
 
         {/* Legend Footer */}
         <div className="mt-4 pt-3 border-t border-[#EADCC9] flex flex-wrap items-center justify-between text-xs text-[#6E6258] relative z-10 gap-3">
-          <div className="flex flex-wrap items-center gap-3">
-            <span className="flex items-center gap-1.5 font-medium">
+          <div className="flex flex-wrap items-center gap-3 font-mono text-[11px] tracking-wider uppercase">
+            <span className="flex items-center gap-1.5 font-bold">
               <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-xs" /> Healthy
             </span>
-            <span className="flex items-center gap-1.5 font-medium">
-              <span className="w-2.5 h-2.5 rounded-full bg-red-500 shadow-xs animate-pulse" /> Outage (Down)
+            <span className="flex items-center gap-1.5 font-bold text-red-700">
+              <span className="w-2.5 h-2.5 rounded-full bg-red-500 shadow-xs animate-pulse" /> Outage
             </span>
-            <span className="flex items-center gap-1.5 font-medium">
+            <span className="flex items-center gap-1.5 font-bold text-amber-700">
               <span className="w-2.5 h-2.5 rounded-full bg-amber-500 border border-amber-600 shadow-xs" /> Cascade Risk
             </span>
-            <span className="flex items-center gap-1.5 font-medium text-[#0047AB]">
-              <span className="w-2.5 h-2.5 rounded-full bg-[#0047AB] shadow-xs" /> Selected Prerequisite
+            <span className="flex items-center gap-1.5 font-bold text-[#0047AB]">
+              <span className="w-2.5 h-2.5 rounded-full bg-[#0047AB] shadow-xs" /> Prerequisite
             </span>
           </div>
-          <span className="font-mono text-[11px] text-[#8A7B6D] font-bold">
-            Click any service to inspect blast radius & playbooks
+          <span className="font-mono text-[10px] tracking-wider text-[#8A7B6D] font-bold uppercase">
+            Click any service to slide out the impact inspector
           </span>
         </div>
-      </Card>
 
-      {/* Side Impact & Blast Radius Inspection Panel */}
-      <Card className="horizon-impact-panel p-5 sm:p-6 flex flex-col justify-between skeuo-card border-[#E5D7C5]">
-        <div>
-          {/* Panel Header */}
-          <div className="flex items-center justify-between pb-3 mb-4 border-b border-[#EADCC9]">
-            <div className="flex items-center gap-2">
-              <div className="w-8 h-8 rounded-lg bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20 flex items-center justify-center">
-                <AlertOctagon className="w-4 h-4" />
-              </div>
+        {/* Slide-out Topology Inspector Drawer */}
+        <AnimatePresence>
+          {isDrawerOpen && selectedNode && selectedNodeMeta && (
+            <motion.div
+              initial={{ x: '100%', opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              exit={{ x: '100%', opacity: 0 }}
+              transition={{ type: 'spring', damping: 25, stiffness: 220 }}
+              className="absolute top-0 right-0 bottom-0 w-full sm:w-[380px] bg-white border-l border-[#E5D7C5] shadow-2xl z-30 flex flex-col justify-between p-5 overflow-y-auto"
+            >
               <div>
-                <h3 className="text-base font-black text-[#1A1A1A] tracking-tight">
-                  Topology Inspector
-                </h3>
-                <p className="text-[11px] text-[#6E6258] font-medium">
-                  Service architecture & blast radius
-                </p>
-              </div>
-            </div>
-            {selectedNode && (
-              <Badge status={selectedNode.status as any}>
-                {selectedNode.status}
-              </Badge>
-            )}
-          </div>
-
-          {selectedNode && selectedNodeMeta ? (
-            <div className="space-y-4">
-              {/* Target Service Card */}
-              <div className="p-4 rounded-xl skeuo-well border-[#E5D7C5]">
-                <div className="flex items-center justify-between">
-                  <span className="text-[10px] text-[#8A7B6D] uppercase font-mono tracking-wider font-bold">
-                    Target Service
-                  </span>
-                  <span className="text-[10px] font-mono px-2 py-0.5 rounded-md bg-[#0047AB]/10 text-[#0047AB] font-bold border border-[#0047AB]/20">
-                    {selectedNodeMeta.tierLabel} &bull; {selectedNodeMeta.tierName}
-                  </span>
-                </div>
-
-                <div className="flex items-center gap-2.5 mt-2">
-                  <div className={cn('w-9 h-9 rounded-xl border flex items-center justify-center shadow-xs', selectedNodeMeta.iconBg)}>
-                    {React.createElement(selectedNodeMeta.icon, {
-                      className: cn('w-5 h-5', selectedNodeMeta.iconColor),
-                    })}
-                  </div>
-                  <div>
-                    <div className="text-lg font-black text-[#1A1A1A]">
-                      {selectedNodeMeta.name}
+                {/* Drawer Header */}
+                <div className="flex items-center justify-between pb-3 mb-4 border-b border-[#EADCC9]">
+                  <div className="flex items-center gap-2">
+                    <div className="w-8 h-8 rounded-lg bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20 flex items-center justify-center">
+                      <AlertOctagon className="w-4 h-4" />
                     </div>
-                    <div className="text-xs text-[#6E6258] font-medium">
-                      {selectedNodeMeta.engine}
+                    <div>
+                      <h3 className="text-base font-black text-[#1A1A1A] tracking-tight">
+                        Service Inspector
+                      </h3>
+                      <p className="text-[10px] font-mono tracking-wider uppercase text-[#6E6258] font-bold">
+                        Topological Impact Analysis
+                      </p>
                     </div>
                   </div>
+                  <button
+                    type="button"
+                    onClick={handleCloseDrawer}
+                    className="p-1.5 rounded-lg text-[#6E6258] hover:text-[#1A1A1A] hover:bg-[#F5EDE2] transition-colors cursor-pointer"
+                  >
+                    <X className="w-5 h-5" />
+                  </button>
                 </div>
 
-                <div className="grid grid-cols-2 gap-2 mt-3 pt-3 border-t border-[#E5D7C5]/60 text-xs font-mono">
-                  <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
-                    <span className="text-[10px] text-[#8A7B6D] block">PORT / PROTOCOL</span>
-                    <span className="font-bold text-[#1A1A1A]">
-                      {selectedNodeMeta.port} ({selectedNodeMeta.protocol})
-                    </span>
-                  </div>
-                  <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
-                    <span className="text-[10px] text-[#8A7B6D] block">TELEMETRY P99</span>
-                    <span className="font-bold text-[#0047AB]">
-                      {selectedNodeMeta.latency} Latency
-                    </span>
-                  </div>
-                </div>
-              </div>
+                {/* Target Service Card */}
+                <div className="space-y-4">
+                  <div className="p-4 rounded-xl skeuo-well border-[#E5D7C5]">
+                    <div className="flex items-center justify-between">
+                      <span className="text-[10px] text-[#8A7B6D] uppercase font-mono tracking-wider font-bold">
+                        Target Service
+                      </span>
+                      <span className="text-[9px] font-mono tracking-widest px-2 py-0.5 rounded-md bg-[#0047AB]/10 text-[#0047AB] font-black border border-[#0047AB]/20 uppercase">
+                        {selectedNodeMeta.layerLabel} &bull; {selectedNodeMeta.layerName}
+                      </span>
+                    </div>
 
-              {/* Upstream Prerequisites */}
-              <div className="p-3.5 rounded-xl bg-white border border-[#E5D7C5] shadow-xs">
-                <div className="flex items-center justify-between mb-2">
-                  <span className="text-xs font-bold text-[#1A1A1A] flex items-center gap-1.5">
-                    <Radio className="w-3.5 h-3.5 text-[#0047AB]" />
-                    <span>Upstream Prerequisites</span>
-                  </span>
-                  <span className="text-[11px] font-mono font-bold text-[#6E6258]">
-                    {upstreamDependencies.length} Required
-                  </span>
-                </div>
-                {upstreamDependencies.length === 0 ? (
-                  <p className="text-xs text-[#6E6258] italic font-medium">
-                    Root foundation service. Has zero upstream dependencies.
-                  </p>
-                ) : (
-                  <div className="space-y-1.5">
-                    {upstreamDependencies.map((depId) => {
-                      const depMeta = STATIC_NODE_METAS[depId];
-                      const depNode = nodes.find((n) => n.id === depId);
-                      return (
-                        <div
-                          key={depId}
-                          onClick={() => setSelectedNodeId(depId)}
-                          className="flex items-center justify-between p-2 rounded-lg bg-[#FAF3EA] border border-[#E5D7C5] hover:border-[#0047AB]/40 cursor-pointer transition-colors text-xs"
-                        >
-                          <div className="flex items-center gap-2">
-                            <span className="w-2 h-2 rounded-full bg-[#0047AB]" />
-                            <span className="font-bold text-[#1A1A1A]">
-                              {depMeta?.name || depId}
-                            </span>
-                          </div>
-                          <Badge status={(depNode?.status || 'healthy') as any}>
-                            {depNode?.status || 'healthy'}
-                          </Badge>
+                    <div className="flex items-center gap-2.5 mt-2">
+                      <div className={cn('w-9 h-9 rounded-xl border flex items-center justify-center shadow-xs', selectedNodeMeta.iconBg)}>
+                        {React.createElement(selectedNodeMeta.icon, {
+                          className: cn('w-5 h-5', selectedNodeMeta.iconColor),
+                        })}
+                      </div>
+                      <div>
+                        <div className="text-base font-black text-[#1A1A1A]">
+                          {selectedNodeMeta.name}
                         </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
+                        <div className="text-xs text-[#6E6258] font-medium font-mono text-[11px]">
+                          {selectedNodeMeta.engine}
+                        </div>
+                      </div>
+                    </div>
 
-              {/* Blast Radius Box (Cobalt Patch) */}
-              <div className="p-4 rounded-xl cobalt-patch shadow-lg shadow-[#0047AB]/20">
-                <div className="flex items-center justify-between">
-                  <span className="text-xs font-bold text-white flex items-center gap-1.5">
-                    <Flame className="w-3.5 h-3.5 text-amber-300" />
-                    <span>Cascaded Blast Radius</span>
-                  </span>
-                  <span className="text-xs font-mono font-bold px-2 py-0.5 rounded-full bg-white/20 text-white border border-white/30">
-                    {blastRadius.length} Downstream
-                  </span>
-                </div>
+                    <div className="grid grid-cols-2 gap-2 mt-3 pt-3 border-t border-[#E5D7C5]/60 text-xs font-mono">
+                      <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
+                        <span className="text-[9px] text-[#8A7B6D] block tracking-wider uppercase font-bold">PORT / PROTOCOL</span>
+                        <span className="font-bold text-[#1A1A1A] text-[11px]">
+                          {selectedNodeMeta.port} ({selectedNodeMeta.protocol})
+                        </span>
+                      </div>
+                      <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
+                        <span className="text-[9px] text-[#8A7B6D] block tracking-wider uppercase font-bold">TELEMETRY P99</span>
+                        <span className="font-bold text-[#0047AB] text-[11px]">
+                          {selectedNodeMeta.latency}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
 
-                <p className="text-xs text-white/80 mt-2 font-medium">
-                  If <strong className="text-white underline">{selectedNodeMeta.name}</strong> fails, the following downstream systems are impaired:
-                </p>
+                  {/* Upstream Prerequisites */}
+                  <div className="p-3.5 rounded-xl bg-white border border-[#E5D7C5] shadow-xs">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-xs font-bold text-[#1A1A1A] flex items-center gap-1.5">
+                        <Radio className="w-3.5 h-3.5 text-[#0047AB]" />
+                        <span>Upstream Prerequisites</span>
+                      </span>
+                      <span className="text-[10px] font-mono tracking-wider font-bold text-[#6E6258] uppercase">
+                        {upstreamDependencies.length} REQUIRED
+                      </span>
+                    </div>
+                    {upstreamDependencies.length === 0 ? (
+                      <p className="text-xs text-[#6E6258] italic font-medium">
+                        Root foundation service. Has zero upstream dependencies.
+                      </p>
+                    ) : (
+                      <div className="space-y-1.5">
+                        {upstreamDependencies.map((depId) => {
+                          const depMeta = STATIC_NODE_METAS[depId];
+                          const depNode = nodes.find((n) => n.id === depId);
+                          return (
+                            <div
+                              key={depId}
+                              onClick={() => setSelectedNodeId(depId)}
+                              className="flex items-center justify-between p-2 rounded-lg bg-[#FAF3EA] border border-[#E5D7C5] hover:border-[#0047AB]/40 cursor-pointer transition-colors text-xs"
+                            >
+                              <div className="flex items-center gap-2">
+                                <span className="w-2 h-2 rounded-full bg-[#0047AB]" />
+                                <span className="font-bold text-[#1A1A1A]">
+                                  {depMeta?.name || depId}
+                                </span>
+                              </div>
+                              <Badge status={(depNode?.status || 'healthy') as any}>
+                                {depNode?.status || 'healthy'}
+                              </Badge>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
 
-                <div className="mt-3 space-y-1.5">
-                  {blastRadius.length === 0 ? (
-                    <div className="text-xs text-emerald-200 flex items-center gap-1.5 py-1 font-semibold">
-                      <CheckCircle2 className="w-4 h-4 text-emerald-300" />
-                      <span>Edge leaf node: 0 downstream dependencies cascaded.</span>
+                  {/* Blast Radius Box (Cobalt Patch) */}
+                  <div className="p-4 rounded-xl cobalt-patch shadow-lg shadow-[#0047AB]/20">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs font-bold text-white flex items-center gap-1.5">
+                        <Flame className="w-3.5 h-3.5 text-amber-300" />
+                        <span>Cascaded Blast Radius</span>
+                      </span>
+                      <span className="text-[10px] font-mono tracking-wider font-bold px-2 py-0.5 rounded-full bg-white/20 text-white border border-white/30 uppercase">
+                        {blastRadius.length} DOWNSTREAM
+                      </span>
                     </div>
-                  ) : (
-                    blastRadius.map((depId) => {
-                      const depMeta = STATIC_NODE_METAS[depId];
-                      return (
-                        <div
-                          key={depId}
-                          onClick={() => setSelectedNodeId(depId)}
-                          className="flex items-center justify-between p-2 rounded-lg bg-black/25 border border-white/10 hover:border-white/30 text-xs cursor-pointer transition-colors"
-                        >
-                          <span className="text-white font-semibold">
-                            {depMeta ? depMeta.name : depId}
-                          </span>
-                          <span className="text-[10px] font-mono text-amber-300 font-bold px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-400/30">
-                            {isSelectedDown ? 'Impaired' : 'Cascaded Risk'}
-                          </span>
+
+                    <p className="text-xs text-white/80 mt-2 font-medium">
+                      If <strong className="text-white underline">{selectedNodeMeta.name}</strong> fails, the following downstream systems are impaired:
+                    </p>
+
+                    <div className="mt-3 space-y-1.5">
+                      {blastRadius.length === 0 ? (
+                        <div className="text-xs text-emerald-200 flex items-center gap-1.5 py-1 font-semibold">
+                          <CheckCircle2 className="w-4 h-4 text-emerald-300" />
+                          <span>Edge leaf node: 0 downstream dependencies cascaded.</span>
                         </div>
-                      );
-                    })
-                  )}
+                      ) : (
+                        blastRadius.map((depId) => {
+                          const depMeta = STATIC_NODE_METAS[depId];
+                          return (
+                            <div
+                              key={depId}
+                              onClick={() => setSelectedNodeId(depId)}
+                              className="flex items-center justify-between p-2 rounded-lg bg-black/25 border border-white/10 hover:border-white/30 text-xs cursor-pointer transition-colors"
+                            >
+                              <span className="text-white font-semibold">
+                                {depMeta ? depMeta.name : depId}
+                              </span>
+                              <span className="text-[9px] font-mono tracking-wider text-amber-300 font-bold px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-400/30 uppercase">
+                                {isSelectedDown ? 'IMPAIRED' : 'AT RISK'}
+                              </span>
+                            </div>
+                          );
+                        })
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Autonomous Playbook Assignment */}
+                  <div className="p-3.5 rounded-xl skeuo-well border-[#E5D7C5] text-xs text-[#5A4E44]">
+                    <div className="flex items-center gap-1.5 font-bold text-[#1A1A1A] mb-1">
+                      <Activity className="w-3.5 h-3.5 text-[#0047AB]" />
+                      <span>Autonomous Playbook Assignment:</span>
+                    </div>
+                    <p className="leading-relaxed text-[11px]">
+                      {selectedNode.type === 'database'
+                        ? 'Playbook #PB-01: High-Risk Database Failover to read replica. EIP-712 Multi-Sig Commander approval required.'
+                        : selectedNode.type === 'cache'
+                        ? 'Playbook #PB-02: Automated Redis cache flush, container restart, and client pool reconnection.'
+                        : selectedNode.type === 'gateway'
+                        ? 'Playbook #PB-03: Zero-downtime Envoy ingress reload and dynamic DNS re-route to healthy pods.'
+                        : 'Playbook #PB-04: Graceful SIGTERM pod termination, Kubernetes rolling restart, and readiness probe poll.'}
+                    </p>
+                  </div>
                 </div>
               </div>
 
-              {/* Autonomous Playbook Assignment */}
-              <div className="p-3.5 rounded-xl skeuo-well border-[#E5D7C5] text-xs text-[#5A4E44]">
-                <div className="flex items-center gap-1.5 font-bold text-[#1A1A1A] mb-1">
-                  <Activity className="w-3.5 h-3.5 text-[#0047AB]" />
-                  <span>Autonomous Playbook Assignment:</span>
-                </div>
-                <p className="leading-relaxed">
-                  {selectedNode.type === 'database'
-                    ? 'Playbook #PB-01: High-Risk Database Failover to read replica. EIP-712 Multi-Sig Commander approval required.'
-                    : selectedNode.type === 'cache'
-                    ? 'Playbook #PB-02: Automated Redis cache flush, container restart, and client pool reconnection.'
-                    : selectedNode.type === 'gateway'
-                    ? 'Playbook #PB-03: Zero-downtime Envoy ingress reload and dynamic DNS re-route to healthy pods.'
-                    : 'Playbook #PB-04: Graceful SIGTERM pod termination, Kubernetes rolling restart, and readiness probe poll.'}
-                </p>
+              {/* Action Controls Footer */}
+              <div className="mt-4 pt-3 border-t border-[#EADCC9]">
+                <Button
+                  variant={selectedNode.status === 'down' ? 'primary' : 'danger'}
+                  size="sm"
+                  onClick={() => handleToggleState(selectedNode.id, selectedNode.status)}
+                  className="w-full text-xs font-bold py-2.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer shadow-sm"
+                >
+                  {selectedNode.status === 'down' ? (
+                    <>
+                      <RotateCcw className="w-4 h-4" />
+                      <span>Restore & Heal Service</span>
+                    </>
+                  ) : (
+                    <>
+                      <Flame className="w-4 h-4" />
+                      <span>Simulate Failure on Node</span>
+                    </>
+                  )}
+                </Button>
               </div>
-            </div>
-          ) : (
-            <div className="text-center py-16 text-xs text-[#8A7B6D] font-medium">
-              Select any service from the DAG topology to inspect its dependencies and blast radius.
-            </div>
+            </motion.div>
           )}
-        </div>
-
-        {/* Action Controls Footer */}
-        {selectedNode && (
-          <div className="mt-6 pt-4 border-t border-[#EADCC9] space-y-2">
-            <Button
-              variant={selectedNode.status === 'down' ? 'primary' : 'danger'}
-              size="sm"
-              onClick={() => handleToggleState(selectedNode.id, selectedNode.status)}
-              className="w-full text-xs font-bold py-2.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer shadow-sm"
-            >
-              {selectedNode.status === 'down' ? (
-                <>
-                  <RotateCcw className="w-4 h-4" />
-                  <span>Restore & Heal Service</span>
-                </>
-              ) : (
-                <>
-                  <Flame className="w-4 h-4" />
-                  <span>Simulate Failure on Node</span>
-                </>
-              )}
-            </Button>
-          </div>
-        )}
+        </AnimatePresence>
       </Card>
     </div>
   );

From 400c7fd656fa647e97bdb292cb89a89999e9fe5b Mon Sep 17 00:00:00 2001
From: Ganeshbeldar015 <ganeshbeldar.ug@gmail.com>
Date: Sun, 1 Nov 2026 03:41:12 +0530
Subject: [PATCH 4/5] feat(topology): show TIER in left rail badges and
 streamline DAG layout

---
 .../src/components/topology/TopologyGraph.tsx | 599 +++++++++---------
 1 file changed, 284 insertions(+), 315 deletions(-)

diff --git a/apps/web/src/components/topology/TopologyGraph.tsx b/apps/web/src/components/topology/TopologyGraph.tsx
index dc3d45f..4a9930b 100644
--- a/apps/web/src/components/topology/TopologyGraph.tsx
+++ b/apps/web/src/components/topology/TopologyGraph.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
 import { Card } from '../common/Card';
 import { Badge } from '../common/Badge';
 import { Button } from '../common/Button';
@@ -25,8 +24,6 @@ import {
   Flame,
   Radio,
   RotateCcw,
-  X,
-  SlidersHorizontal,
 } from 'lucide-react';
 
 export interface TopologyGraphProps {
@@ -36,9 +33,9 @@ export interface TopologyGraphProps {
 interface NodeLayoutMeta {
   id: string;
   name: string;
-  layer: number;
-  layerLabel: string;
-  layerName: string;
+  tier: number;
+  tierLabel: string;
+  tierName: string;
   recoveryStep: number;
   type: 'database' | 'application' | 'gateway' | 'cache';
   port: string;
@@ -57,9 +54,9 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
   'web-frontend': {
     id: 'web-frontend',
     name: 'Horizon Web UI',
-    layer: 3,
-    layerLabel: 'L3',
-    layerName: 'Client Ingress',
+    tier: 3,
+    tierLabel: 'TIER 3',
+    tierName: 'Client Ingress',
     recoveryStep: 5,
     type: 'application',
     port: ':3000',
@@ -70,15 +67,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-blue-50 border-blue-200',
     engine: 'React 19 / Vite Edge',
     description: 'Client-facing mission control dashboard and operator cockpit.',
-    x: 470,
-    y: 55,
+    x: 300,
+    y: 50,
   },
   'api-gateway': {
     id: 'api-gateway',
     name: 'API Gateway',
-    layer: 2,
-    layerLabel: 'L2',
-    layerName: 'Routing & Proxy',
+    tier: 2,
+    tierLabel: 'TIER 2',
+    tierName: 'Routing & Proxy',
     recoveryStep: 4,
     type: 'gateway',
     port: ':8080',
@@ -89,15 +86,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-indigo-50 border-indigo-200',
     engine: 'Envoy Reverse Proxy',
     description: 'TLS termination, rate limiting, and intelligent load routing.',
-    x: 470,
-    y: 185,
+    x: 300,
+    y: 165,
   },
   'auth-service': {
     id: 'auth-service',
     name: 'Auth Service',
-    layer: 1,
-    layerLabel: 'L1',
-    layerName: 'Microservice',
+    tier: 1,
+    tierLabel: 'TIER 1',
+    tierName: 'Microservice',
     recoveryStep: 3,
     type: 'application',
     port: ':5001',
@@ -108,15 +105,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-emerald-50 border-emerald-200',
     engine: 'EIP-712 / Go Auth Engine',
     description: 'Session state validation, HMAC token signing, and Web3 key authorization.',
-    x: 310,
-    y: 325,
+    x: 180,
+    y: 295,
   },
   'payment-service': {
     id: 'payment-service',
     name: 'Payment Service',
-    layer: 1,
-    layerLabel: 'L1',
-    layerName: 'Microservice',
+    tier: 1,
+    tierLabel: 'TIER 1',
+    tierName: 'Microservice',
     recoveryStep: 3,
     type: 'application',
     port: ':5002',
@@ -127,15 +124,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-purple-50 border-purple-200',
     engine: 'MST Escrow / Stripe Gateway',
     description: 'NFT subscription license checking and fiat/crypto payment settlement.',
-    x: 630,
-    y: 325,
+    x: 420,
+    y: 295,
   },
   'redis-cache': {
     id: 'redis-cache',
     name: 'Redis Cache',
-    layer: 0,
-    layerLabel: 'L0',
-    layerName: 'In-Memory Store',
+    tier: 0,
+    tierLabel: 'TIER 0',
+    tierName: 'In-Memory Store',
     recoveryStep: 2,
     type: 'cache',
     port: ':6379',
@@ -146,15 +143,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-amber-50 border-amber-200',
     engine: 'Redis 7.2 Memory Cluster',
     description: 'High-throughput session cache, rate-limit buckets, and pub/sub message bus.',
-    x: 210,
-    y: 480,
+    x: 105,
+    y: 435,
   },
   'db-primary': {
     id: 'db-primary',
     name: 'PostgreSQL Primary',
-    layer: 0,
-    layerLabel: 'L0',
-    layerName: 'Primary Database',
+    tier: 0,
+    tierLabel: 'TIER 0',
+    tierName: 'Primary Database',
     recoveryStep: 1,
     type: 'database',
     port: ':5432',
@@ -165,15 +162,15 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-blue-100 border-blue-300',
     engine: 'PostgreSQL 16 Primary ACID',
     description: 'Foundational system of record with continuous WAL replication archiving.',
-    x: 470,
-    y: 480,
+    x: 300,
+    y: 435,
   },
   'db-replica': {
     id: 'db-replica',
     name: 'PostgreSQL Replica',
-    layer: 0,
-    layerLabel: 'L0',
-    layerName: 'Standby Database',
+    tier: 0,
+    tierLabel: 'TIER 0',
+    tierName: 'Standby Database',
     recoveryStep: 2,
     type: 'database',
     port: ':5433',
@@ -184,8 +181,8 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     iconBg: 'bg-sky-50 border-sky-200',
     engine: 'PostgreSQL 16 Hot Standby',
     description: 'Real-time asynchronous read replica ready for automated failover promotion.',
-    x: 730,
-    y: 480,
+    x: 495,
+    y: 435,
   },
 };
 
@@ -203,75 +200,74 @@ const STATIC_EDGES: GraphEdgeConfig[] = [
     sourceId: 'api-gateway',
     targetId: 'web-frontend',
     label: 'User Traffic Ingress',
-    path: 'M 470 148 L 470 92',
+    path: 'M 300 129 L 300 86',
   },
   {
     id: 'edge-auth-to-gateway',
     sourceId: 'auth-service',
     targetId: 'api-gateway',
     label: 'Route Auth & JWT',
-    path: 'M 310 288 C 310 245, 430 255, 430 222',
+    path: 'M 180 259 C 180 220, 270 230, 270 201',
   },
   {
     id: 'edge-cache-to-gateway',
     sourceId: 'redis-cache',
     targetId: 'api-gateway',
     label: 'Session & Rate Limits',
-    path: 'M 210 443 C 170 330, 360 270, 400 222',
+    path: 'M 105 399 C 75 300, 220 250, 245 201',
   },
   {
     id: 'edge-cache-to-auth',
     sourceId: 'redis-cache',
     targetId: 'auth-service',
     label: 'Token Caching',
-    path: 'M 220 443 C 220 400, 280 405, 280 362',
+    path: 'M 120 399 C 120 360, 155 365, 155 331',
   },
   {
     id: 'edge-db-to-auth',
     sourceId: 'db-primary',
     targetId: 'auth-service',
     label: 'User Credentials Query',
-    path: 'M 430 443 C 430 400, 340 405, 340 362',
+    path: 'M 275 399 C 275 360, 205 365, 205 331',
   },
   {
     id: 'edge-auth-to-payment',
     sourceId: 'auth-service',
     targetId: 'payment-service',
     label: 'Identity Attestation',
-    path: 'M 400 325 C 470 325, 470 325, 540 325',
+    path: 'M 260 295 C 300 295, 300 295, 340 295',
   },
   {
     id: 'edge-db-to-payment',
     sourceId: 'db-primary',
     targetId: 'payment-service',
     label: 'Ledger Balance Query',
-    path: 'M 510 443 C 510 400, 630 405, 630 362',
+    path: 'M 325 399 C 325 360, 420 365, 420 331',
   },
   {
     id: 'edge-db-to-cache',
     sourceId: 'db-primary',
     targetId: 'redis-cache',
     label: 'Cache Warmup & Sync',
-    path: 'M 380 480 C 340 480, 340 480, 300 480',
+    path: 'M 220 435 C 200 435, 200 435, 185 435',
   },
   {
     id: 'edge-db-to-replica',
     sourceId: 'db-primary',
     targetId: 'db-replica',
     label: 'Continuous WAL Stream',
-    path: 'M 560 480 C 600 480, 600 480, 640 480',
+    path: 'M 380 435 C 400 435, 400 435, 415 435',
   },
 ];
 
 export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' }) => {
   const [nodes, setNodes] = useState<SystemNode[]>([]);
   const [edges, setEdges] = useState<{ dependent_id: string; depends_on_id: string }[]>([]);
-  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>('db-primary');
   const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [viewMode, setViewMode] = useState<'traffic' | 'recovery'>('traffic');
   const [filter, setFilter] = useState<'all' | 'data' | 'services' | 'edge'>('all');
-  const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
 
   const loadTopology = useCallback(async () => {
     try {
@@ -350,15 +346,6 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
 
   const isSelectedDown = selectedNode?.status === 'down';
 
-  const handleSelectNode = (nodeId: string) => {
-    setSelectedNodeId(nodeId);
-    setIsDrawerOpen(true);
-  };
-
-  const handleCloseDrawer = () => {
-    setIsDrawerOpen(false);
-  };
-
   // Toggle simulate failure or restore
   const handleToggleState = async (nodeId: string, currentStatus: string) => {
     const nextStatus = currentStatus === 'down' ? 'healthy' : 'down';
@@ -395,9 +382,9 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
   };
 
   return (
-    <div className={cn('horizon-topology-graph w-full font-sans relative', className)}>
-      {/* Full Width Visualizer Card */}
-      <Card className="horizon-topology-card p-5 sm:p-6 flex flex-col justify-between min-h-[670px] relative overflow-hidden skeuo-card border-[#E5D7C5]">
+    <div className={cn('horizon-topology-graph grid grid-cols-1 xl:grid-cols-12 gap-6 items-start font-sans', className)}>
+      {/* Main Interactive Visualizer (Left Column, 8-span) */}
+      <Card className="horizon-topology-card p-5 sm:p-6 xl:col-span-8 flex flex-col justify-between min-h-[630px] relative overflow-hidden skeuo-card border-[#E5D7C5]">
         {/* Subtle Network Dot Grid */}
         <div className="absolute inset-0 opacity-[0.06] pointer-events-none bg-[radial-gradient(#0047AB_1.5px,transparent_1.5px)] [background-size:24px_24px]" />
 
@@ -450,22 +437,10 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                   )}
                 >
                   <Layers className="w-3.5 h-3.5" />
-                  <span>Kahn Recovery Order</span>
+                  <span>Kahn Order</span>
                 </button>
               </div>
 
-              {/* Drawer Toggle (if node selected) */}
-              {selectedNodeId && !isDrawerOpen && (
-                <button
-                  type="button"
-                  onClick={() => setIsDrawerOpen(true)}
-                  className="px-3 py-1.5 rounded-xl bg-[#0047AB]/10 border border-[#0047AB]/25 text-[#0047AB] hover:bg-[#0047AB]/20 text-xs font-bold flex items-center gap-1.5 cursor-pointer transition-colors"
-                >
-                  <SlidersHorizontal className="w-3.5 h-3.5" />
-                  <span>Inspect Service</span>
-                </button>
-              )}
-
               {/* Refresh DAG */}
               <Button
                 variant="secondary"
@@ -488,9 +463,9 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
               </span>
               {[
                 { id: 'all', label: 'All (7)' },
-                { id: 'data', label: 'L0 Data' },
-                { id: 'services', label: 'L1 Services' },
-                { id: 'edge', label: 'L2-3 Edge' },
+                { id: 'data', label: 'Tier 0' },
+                { id: 'services', label: 'Tier 1' },
+                { id: 'edge', label: 'Tier 2-3' },
               ].map((f) => (
                 <button
                   key={f.id}
@@ -531,87 +506,86 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
             )}
           </div>
 
-          {/* Interactive Topological DAG Canvas with Left Rail */}
-          <div className="relative w-full overflow-x-auto overflow-y-hidden rounded-2xl bg-[#FFFDF9] border border-[#E8DCCE] p-3 shadow-inner">
-            <div className="relative w-[880px] h-[550px] mx-auto select-none flex">
+          {/* Interactive Topological DAG Canvas with Dedicated Left Rail */}
+          <div className="relative w-full overflow-x-auto overflow-y-hidden rounded-2xl bg-[#FFFDF9] border border-[#E8DCCE] p-2 shadow-inner">
+            <div className="relative w-[710px] h-[500px] mx-auto select-none flex">
               {/* Dedicated Left-Side Rail Gutter (No text behind cards!) */}
-              <div className="w-[100px] h-full flex flex-col justify-between py-2 border-r border-[#EADCC9]/60 shrink-0 select-none z-10">
-                {/* L3: Ingress */}
-                <div className="h-[90px] flex flex-col justify-center pr-3">
+              <div className="w-[110px] h-full flex flex-col justify-between py-2 border-r border-[#EADCC9]/60 shrink-0 select-none z-10 pr-2">
+                {/* TIER 3: Ingress */}
+                <div className="h-[80px] flex flex-col justify-center">
                   <div className="flex items-center gap-1.5">
-                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-mono tracking-widest text-[9px] font-black border border-[#0047AB]/20">
-                      L3
+                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-mono tracking-wider text-[9px] font-black border border-[#0047AB]/20">
+                      TIER 3
                     </span>
                     <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase">
-                      Ingress
+                      INGRESS
                     </span>
                   </div>
-                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-0.5">
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
                     Client Edge
                   </span>
                 </div>
 
-                {/* L2: Gateway */}
-                <div className="h-[95px] flex flex-col justify-center pr-3">
+                {/* TIER 2: Gateway */}
+                <div className="h-[85px] flex flex-col justify-center">
                   <div className="flex items-center gap-1.5">
-                    <span className="px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-700 font-mono tracking-widest text-[9px] font-black border border-indigo-200">
-                      L2
+                    <span className="px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-700 font-mono tracking-wider text-[9px] font-black border border-indigo-200">
+                      TIER 2
                     </span>
                     <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase">
-                      Gateway
+                      GATEWAY
                     </span>
                   </div>
-                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-0.5">
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
                     Route & TLS
                   </span>
                 </div>
 
-                {/* L1: Microservices */}
-                <div className="h-[105px] flex flex-col justify-center pr-3">
+                {/* TIER 1: Core */}
+                <div className="h-[95px] flex flex-col justify-center">
                   <div className="flex items-center gap-1.5">
-                    <span className="px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-800 font-mono tracking-widest text-[9px] font-black border border-emerald-200">
-                      L1
+                    <span className="px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-800 font-mono tracking-wider text-[9px] font-black border border-emerald-200">
+                      TIER 1
                     </span>
                     <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase">
-                      Core
+                      CORE
                     </span>
                   </div>
-                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-0.5">
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
                     Application
                   </span>
                 </div>
 
-                {/* L0: Storage */}
-                <div className="h-[105px] flex flex-col justify-center pr-3">
+                {/* TIER 0: Data */}
+                <div className="h-[95px] flex flex-col justify-center">
                   <div className="flex items-center gap-1.5">
-                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-mono tracking-widest text-[9px] font-black border border-[#0047AB]/25">
-                      L0
+                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-mono tracking-wider text-[9px] font-black border border-[#0047AB]/25">
+                      TIER 0
                     </span>
                     <span className="font-mono tracking-wider text-[10px] font-bold text-[#0047AB] uppercase">
-                      Data
+                      DATA
                     </span>
                   </div>
-                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-0.5">
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
                     Root ACID
                   </span>
                 </div>
               </div>
 
-              {/* Main Node Canvas Area */}
-              <div className="relative flex-1 h-full overflow-hidden">
+              {/* Main Node Canvas Area (600px width) */}
+              <div className="relative w-[600px] h-full overflow-hidden">
                 {/* Subtle Horizontal Divider Lines (Zero text collisions!) */}
                 <div className="absolute inset-0 pointer-events-none flex flex-col justify-between py-2">
-                  <div className="h-[90px] border-b border-dashed border-[#E5D7C5]/40" />
+                  <div className="h-[80px] border-b border-dashed border-[#E5D7C5]/40" />
+                  <div className="h-[85px] border-b border-dashed border-[#E5D7C5]/40" />
                   <div className="h-[95px] border-b border-dashed border-[#E5D7C5]/40" />
-                  <div className="h-[105px] border-b border-dashed border-[#E5D7C5]/40" />
-                  <div className="h-[105px]" />
+                  <div className="h-[95px]" />
                 </div>
 
                 {/* SVG Connectors Canvas */}
                 <svg
                   className="absolute inset-0 w-full h-full pointer-events-none"
-                  viewBox="0 0 780 550"
-                  style={{ left: '-100px', width: '880px' }}
+                  viewBox="0 0 600 500"
                 >
                   <defs>
                     <marker
@@ -737,19 +711,17 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
 
                   // Dim card if filter does not match
                   let isFilteredOut = false;
-                  if (filter === 'data' && meta.layer !== 0) isFilteredOut = true;
-                  if (filter === 'services' && meta.layer !== 1) isFilteredOut = true;
-                  if (filter === 'edge' && meta.layer < 2) isFilteredOut = true;
+                  if (filter === 'data' && meta.tier !== 0) isFilteredOut = true;
+                  if (filter === 'services' && meta.tier !== 1) isFilteredOut = true;
+                  if (filter === 'edge' && meta.tier < 2) isFilteredOut = true;
 
                   const IconComponent = meta.icon;
-                  // Compensate for left gutter offset (100px)
-                  const adjustedX = meta.x - 100;
 
                   return (
                     <div
                       key={meta.id}
                       style={{
-                        left: `${adjustedX}px`,
+                        left: `${meta.x}px`,
                         top: `${meta.y}px`,
                         transform: 'translate(-50%, -50%)',
                       }}
@@ -760,11 +732,11 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                       )}
                     >
                       <div
-                        onClick={() => handleSelectNode(meta.id)}
+                        onClick={() => setSelectedNodeId(meta.id)}
                         onMouseEnter={() => setHoveredNodeId(meta.id)}
                         onMouseLeave={() => setHoveredNodeId(null)}
                         className={cn(
-                          'horizon-dag-node w-[184px] rounded-2xl p-2.5 transition-all duration-150 cursor-pointer select-none',
+                          'horizon-dag-node w-[160px] rounded-2xl p-2.5 transition-all duration-150 cursor-pointer select-none',
                           'shadow-[0_2px_8px_rgba(26,26,26,0.06),0_1px_2px_rgba(26,26,26,0.04)]',
                           // Base Card Style (No movement on hover!)
                           !isSelected && !isDown && !isSimulatedBlast && 'bg-white border-2 border-[rgba(26,26,26,0.12)] hover:border-[#0047AB]/70 hover:shadow-[0_4px_16px_rgba(0,71,171,0.18)] hover:ring-2 hover:ring-[#0047AB]/20',
@@ -786,7 +758,7 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                         {/* Mode Tag / Sequence Pill */}
                         <div className="flex items-center justify-between gap-1 mb-1.5">
                           <span className="text-[9px] font-mono tracking-widest font-black px-1.5 py-0.5 rounded bg-[#F4EBE0] border border-[#E0D0BE] text-[#5A4E44] uppercase">
-                            {viewMode === 'recovery' ? `STEP ${meta.recoveryStep}` : meta.layerLabel}
+                            {viewMode === 'recovery' ? `STEP ${meta.recoveryStep}` : meta.tierLabel}
                           </span>
 
                           {/* Status Indicator Pill */}
@@ -852,218 +824,215 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
             </span>
           </div>
           <span className="font-mono text-[10px] tracking-wider text-[#8A7B6D] font-bold uppercase">
-            Click any service to slide out the impact inspector
+            Click any service to inspect topology & blast radius
           </span>
         </div>
+      </Card>
 
-        {/* Slide-out Topology Inspector Drawer */}
-        <AnimatePresence>
-          {isDrawerOpen && selectedNode && selectedNodeMeta && (
-            <motion.div
-              initial={{ x: '100%', opacity: 0 }}
-              animate={{ x: 0, opacity: 1 }}
-              exit={{ x: '100%', opacity: 0 }}
-              transition={{ type: 'spring', damping: 25, stiffness: 220 }}
-              className="absolute top-0 right-0 bottom-0 w-full sm:w-[380px] bg-white border-l border-[#E5D7C5] shadow-2xl z-30 flex flex-col justify-between p-5 overflow-y-auto"
-            >
+      {/* Persistent Side-by-Side Service Inspector Column (Right Column, 4-span) */}
+      <Card className="horizon-impact-panel p-5 xl:col-span-4 h-[630px] flex flex-col justify-between skeuo-card border-[#E5D7C5] sticky top-6">
+        <div>
+          {/* Panel Header */}
+          <div className="flex items-center justify-between pb-3 mb-3 border-b border-[#EADCC9] shrink-0">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20 flex items-center justify-center">
+                <AlertOctagon className="w-4 h-4" />
+              </div>
               <div>
-                {/* Drawer Header */}
-                <div className="flex items-center justify-between pb-3 mb-4 border-b border-[#EADCC9]">
-                  <div className="flex items-center gap-2">
-                    <div className="w-8 h-8 rounded-lg bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20 flex items-center justify-center">
-                      <AlertOctagon className="w-4 h-4" />
-                    </div>
-                    <div>
-                      <h3 className="text-base font-black text-[#1A1A1A] tracking-tight">
-                        Service Inspector
-                      </h3>
-                      <p className="text-[10px] font-mono tracking-wider uppercase text-[#6E6258] font-bold">
-                        Topological Impact Analysis
-                      </p>
-                    </div>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={handleCloseDrawer}
-                    className="p-1.5 rounded-lg text-[#6E6258] hover:text-[#1A1A1A] hover:bg-[#F5EDE2] transition-colors cursor-pointer"
-                  >
-                    <X className="w-5 h-5" />
-                  </button>
-                </div>
+                <h3 className="text-base font-black text-[#1A1A1A] tracking-tight">
+                  Service Inspector
+                </h3>
+                <p className="text-[10px] font-mono tracking-wider uppercase text-[#6E6258] font-bold">
+                  Topological Impact Analysis
+                </p>
+              </div>
+            </div>
+            {selectedNode && (
+              <Badge status={selectedNode.status as any}>
+                {selectedNode.status}
+              </Badge>
+            )}
+          </div>
 
-                {/* Target Service Card */}
-                <div className="space-y-4">
-                  <div className="p-4 rounded-xl skeuo-well border-[#E5D7C5]">
-                    <div className="flex items-center justify-between">
-                      <span className="text-[10px] text-[#8A7B6D] uppercase font-mono tracking-wider font-bold">
-                        Target Service
-                      </span>
-                      <span className="text-[9px] font-mono tracking-widest px-2 py-0.5 rounded-md bg-[#0047AB]/10 text-[#0047AB] font-black border border-[#0047AB]/20 uppercase">
-                        {selectedNodeMeta.layerLabel} &bull; {selectedNodeMeta.layerName}
-                      </span>
-                    </div>
+          {/* Scrollable Inspector Body with Constant Stable Container Height */}
+          {selectedNode && selectedNodeMeta ? (
+            <div className="overflow-y-auto max-h-[460px] space-y-3.5 pr-1">
+              {/* Target Service Overview Card */}
+              <div className="p-3.5 rounded-xl skeuo-well border-[#E5D7C5]">
+                <div className="flex items-center justify-between">
+                  <span className="text-[9px] text-[#8A7B6D] uppercase font-mono tracking-wider font-bold">
+                    Target Service
+                  </span>
+                  <span className="text-[9px] font-mono tracking-widest px-2 py-0.5 rounded-md bg-[#0047AB]/10 text-[#0047AB] font-black border border-[#0047AB]/20 uppercase">
+                    {selectedNodeMeta.tierLabel} &bull; {selectedNodeMeta.tierName}
+                  </span>
+                </div>
 
-                    <div className="flex items-center gap-2.5 mt-2">
-                      <div className={cn('w-9 h-9 rounded-xl border flex items-center justify-center shadow-xs', selectedNodeMeta.iconBg)}>
-                        {React.createElement(selectedNodeMeta.icon, {
-                          className: cn('w-5 h-5', selectedNodeMeta.iconColor),
-                        })}
-                      </div>
-                      <div>
-                        <div className="text-base font-black text-[#1A1A1A]">
-                          {selectedNodeMeta.name}
-                        </div>
-                        <div className="text-xs text-[#6E6258] font-medium font-mono text-[11px]">
-                          {selectedNodeMeta.engine}
-                        </div>
-                      </div>
+                <div className="flex items-center gap-2.5 mt-2">
+                  <div className={cn('w-9 h-9 rounded-xl border flex items-center justify-center shadow-xs shrink-0', selectedNodeMeta.iconBg)}>
+                    {React.createElement(selectedNodeMeta.icon, {
+                      className: cn('w-5 h-5', selectedNodeMeta.iconColor),
+                    })}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="text-base font-black text-[#1A1A1A] truncate">
+                      {selectedNodeMeta.name}
                     </div>
-
-                    <div className="grid grid-cols-2 gap-2 mt-3 pt-3 border-t border-[#E5D7C5]/60 text-xs font-mono">
-                      <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
-                        <span className="text-[9px] text-[#8A7B6D] block tracking-wider uppercase font-bold">PORT / PROTOCOL</span>
-                        <span className="font-bold text-[#1A1A1A] text-[11px]">
-                          {selectedNodeMeta.port} ({selectedNodeMeta.protocol})
-                        </span>
-                      </div>
-                      <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
-                        <span className="text-[9px] text-[#8A7B6D] block tracking-wider uppercase font-bold">TELEMETRY P99</span>
-                        <span className="font-bold text-[#0047AB] text-[11px]">
-                          {selectedNodeMeta.latency}
-                        </span>
-                      </div>
+                    <div className="text-[11px] text-[#6E6258] font-mono truncate">
+                      {selectedNodeMeta.engine}
                     </div>
                   </div>
+                </div>
 
-                  {/* Upstream Prerequisites */}
-                  <div className="p-3.5 rounded-xl bg-white border border-[#E5D7C5] shadow-xs">
-                    <div className="flex items-center justify-between mb-2">
-                      <span className="text-xs font-bold text-[#1A1A1A] flex items-center gap-1.5">
-                        <Radio className="w-3.5 h-3.5 text-[#0047AB]" />
-                        <span>Upstream Prerequisites</span>
-                      </span>
-                      <span className="text-[10px] font-mono tracking-wider font-bold text-[#6E6258] uppercase">
-                        {upstreamDependencies.length} REQUIRED
-                      </span>
-                    </div>
-                    {upstreamDependencies.length === 0 ? (
-                      <p className="text-xs text-[#6E6258] italic font-medium">
-                        Root foundation service. Has zero upstream dependencies.
-                      </p>
-                    ) : (
-                      <div className="space-y-1.5">
-                        {upstreamDependencies.map((depId) => {
-                          const depMeta = STATIC_NODE_METAS[depId];
-                          const depNode = nodes.find((n) => n.id === depId);
-                          return (
-                            <div
-                              key={depId}
-                              onClick={() => setSelectedNodeId(depId)}
-                              className="flex items-center justify-between p-2 rounded-lg bg-[#FAF3EA] border border-[#E5D7C5] hover:border-[#0047AB]/40 cursor-pointer transition-colors text-xs"
-                            >
-                              <div className="flex items-center gap-2">
-                                <span className="w-2 h-2 rounded-full bg-[#0047AB]" />
-                                <span className="font-bold text-[#1A1A1A]">
-                                  {depMeta?.name || depId}
-                                </span>
-                              </div>
-                              <Badge status={(depNode?.status || 'healthy') as any}>
-                                {depNode?.status || 'healthy'}
-                              </Badge>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    )}
+                <div className="grid grid-cols-2 gap-2 mt-3 pt-3 border-t border-[#E5D7C5]/60 text-xs font-mono">
+                  <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
+                    <span className="text-[8px] text-[#8A7B6D] block tracking-wider uppercase font-bold">PORT / PROTOCOL</span>
+                    <span className="font-bold text-[#1A1A1A] text-[10px] truncate block">
+                      {selectedNodeMeta.port} ({selectedNodeMeta.protocol})
+                    </span>
                   </div>
+                  <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
+                    <span className="text-[8px] text-[#8A7B6D] block tracking-wider uppercase font-bold">TELEMETRY P99</span>
+                    <span className="font-bold text-[#0047AB] text-[10px] block">
+                      {selectedNodeMeta.latency}
+                    </span>
+                  </div>
+                </div>
+              </div>
 
-                  {/* Blast Radius Box (Cobalt Patch) */}
-                  <div className="p-4 rounded-xl cobalt-patch shadow-lg shadow-[#0047AB]/20">
-                    <div className="flex items-center justify-between">
-                      <span className="text-xs font-bold text-white flex items-center gap-1.5">
-                        <Flame className="w-3.5 h-3.5 text-amber-300" />
-                        <span>Cascaded Blast Radius</span>
-                      </span>
-                      <span className="text-[10px] font-mono tracking-wider font-bold px-2 py-0.5 rounded-full bg-white/20 text-white border border-white/30 uppercase">
-                        {blastRadius.length} DOWNSTREAM
-                      </span>
-                    </div>
-
-                    <p className="text-xs text-white/80 mt-2 font-medium">
-                      If <strong className="text-white underline">{selectedNodeMeta.name}</strong> fails, the following downstream systems are impaired:
-                    </p>
-
-                    <div className="mt-3 space-y-1.5">
-                      {blastRadius.length === 0 ? (
-                        <div className="text-xs text-emerald-200 flex items-center gap-1.5 py-1 font-semibold">
-                          <CheckCircle2 className="w-4 h-4 text-emerald-300" />
-                          <span>Edge leaf node: 0 downstream dependencies cascaded.</span>
+              {/* Upstream Prerequisites */}
+              <div className="p-3 rounded-xl bg-white border border-[#E5D7C5] shadow-xs">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-xs font-bold text-[#1A1A1A] flex items-center gap-1.5">
+                    <Radio className="w-3.5 h-3.5 text-[#0047AB]" />
+                    <span>Upstream Prerequisites</span>
+                  </span>
+                  <span className="text-[9px] font-mono tracking-wider font-bold text-[#6E6258] uppercase">
+                    {upstreamDependencies.length} REQUIRED
+                  </span>
+                </div>
+                {upstreamDependencies.length === 0 ? (
+                  <p className="text-xs text-[#6E6258] italic font-medium">
+                    Root foundation service. Has zero upstream dependencies.
+                  </p>
+                ) : (
+                  <div className="space-y-1.5">
+                    {upstreamDependencies.map((depId) => {
+                      const depMeta = STATIC_NODE_METAS[depId];
+                      const depNode = nodes.find((n) => n.id === depId);
+                      return (
+                        <div
+                          key={depId}
+                          onClick={() => setSelectedNodeId(depId)}
+                          className="flex items-center justify-between p-2 rounded-lg bg-[#FAF3EA] border border-[#E5D7C5] hover:border-[#0047AB]/40 cursor-pointer transition-colors text-xs"
+                        >
+                          <div className="flex items-center gap-2">
+                            <span className="w-2 h-2 rounded-full bg-[#0047AB]" />
+                            <span className="font-bold text-[#1A1A1A]">
+                              {depMeta?.name || depId}
+                            </span>
+                          </div>
+                          <Badge status={(depNode?.status || 'healthy') as any}>
+                            {depNode?.status || 'healthy'}
+                          </Badge>
                         </div>
-                      ) : (
-                        blastRadius.map((depId) => {
-                          const depMeta = STATIC_NODE_METAS[depId];
-                          return (
-                            <div
-                              key={depId}
-                              onClick={() => setSelectedNodeId(depId)}
-                              className="flex items-center justify-between p-2 rounded-lg bg-black/25 border border-white/10 hover:border-white/30 text-xs cursor-pointer transition-colors"
-                            >
-                              <span className="text-white font-semibold">
-                                {depMeta ? depMeta.name : depId}
-                              </span>
-                              <span className="text-[9px] font-mono tracking-wider text-amber-300 font-bold px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-400/30 uppercase">
-                                {isSelectedDown ? 'IMPAIRED' : 'AT RISK'}
-                              </span>
-                            </div>
-                          );
-                        })
-                      )}
-                    </div>
+                      );
+                    })}
                   </div>
+                )}
+              </div>
 
-                  {/* Autonomous Playbook Assignment */}
-                  <div className="p-3.5 rounded-xl skeuo-well border-[#E5D7C5] text-xs text-[#5A4E44]">
-                    <div className="flex items-center gap-1.5 font-bold text-[#1A1A1A] mb-1">
-                      <Activity className="w-3.5 h-3.5 text-[#0047AB]" />
-                      <span>Autonomous Playbook Assignment:</span>
-                    </div>
-                    <p className="leading-relaxed text-[11px]">
-                      {selectedNode.type === 'database'
-                        ? 'Playbook #PB-01: High-Risk Database Failover to read replica. EIP-712 Multi-Sig Commander approval required.'
-                        : selectedNode.type === 'cache'
-                        ? 'Playbook #PB-02: Automated Redis cache flush, container restart, and client pool reconnection.'
-                        : selectedNode.type === 'gateway'
-                        ? 'Playbook #PB-03: Zero-downtime Envoy ingress reload and dynamic DNS re-route to healthy pods.'
-                        : 'Playbook #PB-04: Graceful SIGTERM pod termination, Kubernetes rolling restart, and readiness probe poll.'}
-                    </p>
-                  </div>
+              {/* Blast Radius Box (Cobalt Patch) */}
+              <div className="p-3.5 rounded-xl cobalt-patch shadow-lg shadow-[#0047AB]/20">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-bold text-white flex items-center gap-1.5">
+                    <Flame className="w-3.5 h-3.5 text-amber-300" />
+                    <span>Cascaded Blast Radius</span>
+                  </span>
+                  <span className="text-[9px] font-mono tracking-wider font-bold px-2 py-0.5 rounded-full bg-white/20 text-white border border-white/30 uppercase">
+                    {blastRadius.length} DOWNSTREAM
+                  </span>
                 </div>
-              </div>
 
-              {/* Action Controls Footer */}
-              <div className="mt-4 pt-3 border-t border-[#EADCC9]">
-                <Button
-                  variant={selectedNode.status === 'down' ? 'primary' : 'danger'}
-                  size="sm"
-                  onClick={() => handleToggleState(selectedNode.id, selectedNode.status)}
-                  className="w-full text-xs font-bold py-2.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer shadow-sm"
-                >
-                  {selectedNode.status === 'down' ? (
-                    <>
-                      <RotateCcw className="w-4 h-4" />
-                      <span>Restore & Heal Service</span>
-                    </>
+                <p className="text-xs text-white/80 mt-2 font-medium">
+                  If <strong className="text-white underline">{selectedNodeMeta.name}</strong> fails, the following downstream systems are impaired:
+                </p>
+
+                <div className="mt-2.5 space-y-1.5">
+                  {blastRadius.length === 0 ? (
+                    <div className="text-xs text-emerald-200 flex items-center gap-1.5 py-1 font-semibold">
+                      <CheckCircle2 className="w-4 h-4 text-emerald-300" />
+                      <span>Edge leaf node: 0 downstream dependencies cascaded.</span>
+                    </div>
                   ) : (
-                    <>
-                      <Flame className="w-4 h-4" />
-                      <span>Simulate Failure on Node</span>
-                    </>
+                    blastRadius.map((depId) => {
+                      const depMeta = STATIC_NODE_METAS[depId];
+                      return (
+                        <div
+                          key={depId}
+                          onClick={() => setSelectedNodeId(depId)}
+                          className="flex items-center justify-between p-2 rounded-lg bg-black/25 border border-white/10 hover:border-white/30 text-xs cursor-pointer transition-colors"
+                        >
+                          <span className="text-white font-semibold">
+                            {depMeta ? depMeta.name : depId}
+                          </span>
+                          <span className="text-[9px] font-mono tracking-wider text-amber-300 font-bold px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-400/30 uppercase">
+                            {isSelectedDown ? 'IMPAIRED' : 'AT RISK'}
+                          </span>
+                        </div>
+                      );
+                    })
                   )}
-                </Button>
+                </div>
+              </div>
+
+              {/* Autonomous Playbook Assignment */}
+              <div className="p-3 rounded-xl skeuo-well border-[#E5D7C5] text-xs text-[#5A4E44]">
+                <div className="flex items-center gap-1.5 font-bold text-[#1A1A1A] mb-1">
+                  <Activity className="w-3.5 h-3.5 text-[#0047AB]" />
+                  <span>Autonomous Playbook Assignment:</span>
+                </div>
+                <p className="leading-relaxed text-[11px]">
+                  {selectedNode.type === 'database'
+                    ? 'Playbook #PB-01: High-Risk Database Failover to read replica. EIP-712 Multi-Sig Commander approval required.'
+                    : selectedNode.type === 'cache'
+                    ? 'Playbook #PB-02: Automated Redis cache flush, container restart, and client pool reconnection.'
+                    : selectedNode.type === 'gateway'
+                    ? 'Playbook #PB-03: Zero-downtime Envoy ingress reload and dynamic DNS re-route to healthy pods.'
+                    : 'Playbook #PB-04: Graceful SIGTERM pod termination, Kubernetes rolling restart, and readiness probe poll.'}
+                </p>
               </div>
-            </motion.div>
+            </div>
+          ) : (
+            <div className="text-center py-16 text-xs text-[#8A7B6D] font-medium">
+              Select any service from the DAG topology to inspect its dependencies and blast radius.
+            </div>
           )}
-        </AnimatePresence>
+        </div>
+
+        {/* Action Controls Footer (Always Pinned and 100% Visible, Never Cut Off!) */}
+        {selectedNode && (
+          <div className="pt-3 border-t border-[#EADCC9] shrink-0">
+            <Button
+              variant={selectedNode.status === 'down' ? 'primary' : 'danger'}
+              size="sm"
+              onClick={() => handleToggleState(selectedNode.id, selectedNode.status)}
+              className="w-full text-xs font-bold py-2.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer shadow-sm"
+            >
+              {selectedNode.status === 'down' ? (
+                <>
+                  <RotateCcw className="w-4 h-4" />
+                  <span>Restore & Heal Service</span>
+                </>
+              ) : (
+                <>
+                  <Flame className="w-4 h-4" />
+                  <span>Simulate Failure on Node</span>
+                </>
+              )}
+            </Button>
+          </div>
+        )}
       </Card>
     </div>
   );

From 944e1bc147f7eaa2390a815eee0d3f3f52a42ed7 Mon Sep 17 00:00:00 2001
From: Ganeshbeldar015 <ganeshbeldar.ug@gmail.com>
Date: Sun, 1 Nov 2026 04:28:25 +0530
Subject: [PATCH 5/5] feat(topology): add right slide-over inspector,
 interactive tier parameters, and Silvana font for docs

---
 apps/web/index.html                           |   5 +-
 .../public/fonts/silvana/Silvana-Bold.woff    | Bin 0 -> 9292 bytes
 .../public/fonts/silvana/Silvana-Italic.woff  | Bin 0 -> 9716 bytes
 .../public/fonts/silvana/Silvana-Light.woff   | Bin 0 -> 8788 bytes
 .../public/fonts/silvana/Silvana-Medium.woff  | Bin 0 -> 9304 bytes
 .../public/fonts/silvana/Silvana-Regular.woff | Bin 0 -> 9208 bytes
 apps/web/src/components/layout/RootLayout.tsx |   8 +-
 .../src/components/topology/TopologyGraph.tsx | 369 +++++++++++-------
 apps/web/src/index.css                        | 102 +++++
 apps/web/src/pages/DocsPage.tsx               |  18 +-
 apps/web/src/pages/TopologyPage.tsx           |  18 +-
 11 files changed, 355 insertions(+), 165 deletions(-)
 create mode 100644 apps/web/public/fonts/silvana/Silvana-Bold.woff
 create mode 100644 apps/web/public/fonts/silvana/Silvana-Italic.woff
 create mode 100644 apps/web/public/fonts/silvana/Silvana-Light.woff
 create mode 100644 apps/web/public/fonts/silvana/Silvana-Medium.woff
 create mode 100644 apps/web/public/fonts/silvana/Silvana-Regular.woff

diff --git a/apps/web/index.html b/apps/web/index.html
index 8ea13ac..c09e476 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -34,10 +34,11 @@
     <link rel="icon" type="image/png" href="/logo.png" />
     <link rel="apple-touch-icon" href="/logo.png" />
 
-    <!-- Typography: Poppins & JetBrains Mono -->
+    <!-- Typography: Poppins, JetBrains Mono & Silvana Editorial Serif -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=JetBrains+Mono:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..800&display=swap" rel="stylesheet">
+    <link href="https://fonts.cdnfonts.com/css/silvana" rel="stylesheet">
 
     <!-- Schema.org JSON-LD Structured Data -->
     <script type="application/ld+json">
diff --git a/apps/web/public/fonts/silvana/Silvana-Bold.woff b/apps/web/public/fonts/silvana/Silvana-Bold.woff
new file mode 100644
index 0000000000000000000000000000000000000000..314ffa6582f4168fa67dce37ebc817d4f08b6244
GIT binary patch
literal 9292
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

literal 0
HcmV?d00001

diff --git a/apps/web/public/fonts/silvana/Silvana-Italic.woff b/apps/web/public/fonts/silvana/Silvana-Italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..d15a1140ac13ee4f0652c4df2965b36fcd221bd9
GIT binary patch
literal 9716
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

literal 0
HcmV?d00001

diff --git a/apps/web/public/fonts/silvana/Silvana-Light.woff b/apps/web/public/fonts/silvana/Silvana-Light.woff
new file mode 100644
index 0000000000000000000000000000000000000000..a08f7780084a2e1d22c95459e61758ed0dd86815
GIT binary patch
literal 8788
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

literal 0
HcmV?d00001

diff --git a/apps/web/public/fonts/silvana/Silvana-Medium.woff b/apps/web/public/fonts/silvana/Silvana-Medium.woff
new file mode 100644
index 0000000000000000000000000000000000000000..223490329d169e80dccd7d28d4cf7506548b00a7
GIT binary patch
literal 9304
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

literal 0
HcmV?d00001

diff --git a/apps/web/public/fonts/silvana/Silvana-Regular.woff b/apps/web/public/fonts/silvana/Silvana-Regular.woff
new file mode 100644
index 0000000000000000000000000000000000000000..2d79c89e050beb9794b15e495b09af3af9a16ea6
GIT binary patch
literal 9208
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
Bv_}8{

literal 0
HcmV?d00001

diff --git a/apps/web/src/components/layout/RootLayout.tsx b/apps/web/src/components/layout/RootLayout.tsx
index 44774aa..a21783d 100644
--- a/apps/web/src/components/layout/RootLayout.tsx
+++ b/apps/web/src/components/layout/RootLayout.tsx
@@ -13,9 +13,11 @@ import { cn } from '../../lib/utils';
  * - Dominating cream background (#FFF8F0) with skeuomorphic porcelain depth.
  * - Fluid, component-by-component Framer Motion transitions.
  * - Subtle ambient cobalt blue lighting.
+ * - Editorial Silvana typography applied across pages, preserving sans on home hero/navbar/footer.
  */
 export const RootLayout: React.FC = () => {
   const location = useLocation();
+  const isHome = location.pathname === '/';
   const isPatents = location.pathname.startsWith('/patents') || location.pathname === '/governance/patents';
   const isArchitect = location.pathname.startsWith('/architect');
 
@@ -34,7 +36,7 @@ export const RootLayout: React.FC = () => {
           className="pointer-events-none fixed inset-0 z-0 opacity-20 bg-[linear-gradient(to_right,rgba(26,26,26,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(26,26,26,0.03)_1px,transparent_1px)] bg-[size:4rem_4rem]"
         />
 
-        {/* Floating Porcelain Dock Navbar */}
+        {/* Floating Porcelain Dock Navbar (Maintains Poppins / font-sans) */}
         <Navbar />
 
         {/* Centered Main Stage */}
@@ -56,14 +58,14 @@ export const RootLayout: React.FC = () => {
                 animate={{ opacity: 1, y: 0, scale: 1 }}
                 exit={{ opacity: 0, y: -10, scale: 0.995 }}
                 transition={{ duration: 0.32, ease: [0.16, 1, 0.3, 1] }}
-                className="w-full"
+                className={cn('w-full', !isHome && 'silvana-scope')}
               >
                 <Outlet />
               </motion.div>
             </AnimatePresence>
           </div>
         </main>
-        {/* Antigravity-Style Monumental Footer */}
+        {/* Antigravity-Style Monumental Footer (Maintains Poppins / font-sans) */}
         <Footer />
       </div>
     </OnboardingGate>
diff --git a/apps/web/src/components/topology/TopologyGraph.tsx b/apps/web/src/components/topology/TopologyGraph.tsx
index 4a9930b..f58e963 100644
--- a/apps/web/src/components/topology/TopologyGraph.tsx
+++ b/apps/web/src/components/topology/TopologyGraph.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { Card } from '../common/Card';
 import { Badge } from '../common/Badge';
 import { Button } from '../common/Button';
@@ -24,6 +25,8 @@ import {
   Flame,
   Radio,
   RotateCcw,
+  X,
+  SlidersHorizontal,
 } from 'lucide-react';
 
 export interface TopologyGraphProps {
@@ -55,8 +58,8 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     id: 'web-frontend',
     name: 'Horizon Web UI',
     tier: 3,
-    tierLabel: 'TIER 3',
-    tierName: 'Client Ingress',
+    tierLabel: 'L3',
+    tierName: 'CLIENT INGRESS',
     recoveryStep: 5,
     type: 'application',
     port: ':3000',
@@ -74,8 +77,8 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     id: 'api-gateway',
     name: 'API Gateway',
     tier: 2,
-    tierLabel: 'TIER 2',
-    tierName: 'Routing & Proxy',
+    tierLabel: 'L2',
+    tierName: 'ROUTING & PROXY',
     recoveryStep: 4,
     type: 'gateway',
     port: ':8080',
@@ -93,8 +96,8 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     id: 'auth-service',
     name: 'Auth Service',
     tier: 1,
-    tierLabel: 'TIER 1',
-    tierName: 'Microservice',
+    tierLabel: 'L1',
+    tierName: 'APPLICATION CORE',
     recoveryStep: 3,
     type: 'application',
     port: ':5001',
@@ -112,8 +115,8 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     id: 'payment-service',
     name: 'Payment Service',
     tier: 1,
-    tierLabel: 'TIER 1',
-    tierName: 'Microservice',
+    tierLabel: 'L1',
+    tierName: 'PAYMENT GATEWAY',
     recoveryStep: 3,
     type: 'application',
     port: ':5002',
@@ -131,8 +134,8 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     id: 'redis-cache',
     name: 'Redis Cache',
     tier: 0,
-    tierLabel: 'TIER 0',
-    tierName: 'In-Memory Store',
+    tierLabel: 'L0',
+    tierName: 'CACHE STORE',
     recoveryStep: 2,
     type: 'cache',
     port: ':6379',
@@ -150,8 +153,8 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     id: 'db-primary',
     name: 'PostgreSQL Primary',
     tier: 0,
-    tierLabel: 'TIER 0',
-    tierName: 'Primary Database',
+    tierLabel: 'L0',
+    tierName: 'ROOT ACID',
     recoveryStep: 1,
     type: 'database',
     port: ':5432',
@@ -169,8 +172,8 @@ const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
     id: 'db-replica',
     name: 'PostgreSQL Replica',
     tier: 0,
-    tierLabel: 'TIER 0',
-    tierName: 'Standby Database',
+    tierLabel: 'L0',
+    tierName: 'READ REPLICA',
     recoveryStep: 2,
     type: 'database',
     port: ':5433',
@@ -268,6 +271,7 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
   const [loading, setLoading] = useState<boolean>(true);
   const [viewMode, setViewMode] = useState<'traffic' | 'recovery'>('traffic');
   const [filter, setFilter] = useState<'all' | 'data' | 'services' | 'edge'>('all');
+  const [isInspectorOpen, setIsInspectorOpen] = useState<boolean>(true);
 
   const loadTopology = useCallback(async () => {
     try {
@@ -382,9 +386,9 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
   };
 
   return (
-    <div className={cn('horizon-topology-graph grid grid-cols-1 xl:grid-cols-12 gap-6 items-start font-sans', className)}>
-      {/* Main Interactive Visualizer (Left Column, 8-span) */}
-      <Card className="horizon-topology-card p-5 sm:p-6 xl:col-span-8 flex flex-col justify-between min-h-[630px] relative overflow-hidden skeuo-card border-[#E5D7C5]">
+    <div className={cn('horizon-topology-graph flex flex-col gap-6 font-sans w-full', className)}>
+      {/* Main Interactive Visualizer (Full Width) */}
+      <Card className="horizon-topology-card p-5 sm:p-6 flex flex-col justify-between min-h-[620px] relative overflow-hidden skeuo-card border-[#E5D7C5] w-full">
         {/* Subtle Network Dot Grid */}
         <div className="absolute inset-0 opacity-[0.06] pointer-events-none bg-[radial-gradient(#0047AB_1.5px,transparent_1.5px)] [background-size:24px_24px]" />
 
@@ -396,14 +400,9 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                 <Network className="w-5 h-5" />
               </div>
               <div>
-                <div className="flex items-center gap-2">
-                  <h2 className="text-base font-black text-[#1A1A1A] tracking-tight">
-                    Autonomous Dependency DAG
-                  </h2>
-                  <span className="px-2 py-0.5 rounded-full text-[10px] font-mono tracking-wider font-bold bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20">
-                    O(V + E)
-                  </span>
-                </div>
+                <h2 className="text-base font-black text-[#1A1A1A] tracking-tight">
+                  Autonomous Dependency DAG
+                </h2>
                 <p className="text-xs text-[#6E6258] font-medium mt-0.5">
                   Multi-tier service dependency topology with reverse blast radius resolution.
                 </p>
@@ -456,21 +455,27 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
 
           {/* Sub-toolbar: Non-Repetitive Filter & Outage Alert Banner */}
           <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-4 pb-2 text-xs relative z-10">
-            {/* Filter pills without repeating "Tier" */}
+            {/* Filter pills with primary node auto-selection */}
             <div className="flex items-center gap-1.5 text-xs">
               <span className="text-[10px] font-mono tracking-wider text-[#8A7B6D] font-bold uppercase mr-1">
                 Filter:
               </span>
               {[
-                { id: 'all', label: 'All (7)' },
-                { id: 'data', label: 'Tier 0' },
-                { id: 'services', label: 'Tier 1' },
-                { id: 'edge', label: 'Tier 2-3' },
+                { id: 'all', label: 'All Tiers (7)', targetNode: null },
+                { id: 'data', label: 'Tier 0 Data', targetNode: 'db-primary' },
+                { id: 'services', label: 'Tier 1 Services', targetNode: 'auth-service' },
+                { id: 'edge', label: 'Tier 2-3 Edge', targetNode: 'web-frontend' },
               ].map((f) => (
                 <button
                   key={f.id}
                   type="button"
-                  onClick={() => setFilter(f.id as any)}
+                  onClick={() => {
+                    setFilter(f.id as any);
+                    if (f.targetNode) {
+                      setSelectedNodeId(f.targetNode);
+                      setIsInspectorOpen(true);
+                    }
+                  }}
                   className={cn(
                     'px-2.5 py-1 rounded-lg font-mono text-[10px] tracking-wider font-bold uppercase transition-colors cursor-pointer',
                     filter === f.id
@@ -507,69 +512,121 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
           </div>
 
           {/* Interactive Topological DAG Canvas with Dedicated Left Rail */}
-          <div className="relative w-full overflow-x-auto overflow-y-hidden rounded-2xl bg-[#FFFDF9] border border-[#E8DCCE] p-2 shadow-inner">
+          <div className="relative w-full overflow-x-auto overflow-y-hidden rounded-2xl bg-[#FFFDF9] border border-[#E8DCCE] p-3 shadow-inner">
             <div className="relative w-[710px] h-[500px] mx-auto select-none flex">
-              {/* Dedicated Left-Side Rail Gutter (No text behind cards!) */}
+              {/* Dedicated Left-Side Rail Gutter (Interactive Clickable Tier Parameters) */}
               <div className="w-[110px] h-full flex flex-col justify-between py-2 border-r border-[#EADCC9]/60 shrink-0 select-none z-10 pr-2">
-                {/* TIER 3: Ingress */}
-                <div className="h-[80px] flex flex-col justify-center">
+                {/* L3: Ingress */}
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSelectedNodeId('web-frontend');
+                    setIsInspectorOpen(true);
+                  }}
+                  className={cn(
+                    'h-[80px] flex flex-col justify-center text-left p-1.5 rounded-xl transition-all cursor-pointer group',
+                    selectedNodeMeta?.tier === 3
+                      ? 'bg-[#0047AB]/10 border border-[#0047AB]/30 shadow-xs ring-1 ring-[#0047AB]/20'
+                      : 'hover:bg-[#FAF3EA] border border-transparent'
+                  )}
+                  title="Click Tier 3 Ingress to inspect on right"
+                >
                   <div className="flex items-center gap-1.5">
                     <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-mono tracking-wider text-[9px] font-black border border-[#0047AB]/20">
-                      TIER 3
+                      L3
                     </span>
-                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase">
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase group-hover:text-[#0047AB]">
                       INGRESS
                     </span>
                   </div>
                   <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
                     Client Edge
                   </span>
-                </div>
+                </button>
 
-                {/* TIER 2: Gateway */}
-                <div className="h-[85px] flex flex-col justify-center">
+                {/* L2: Gateway */}
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSelectedNodeId('api-gateway');
+                    setIsInspectorOpen(true);
+                  }}
+                  className={cn(
+                    'h-[85px] flex flex-col justify-center text-left p-1.5 rounded-xl transition-all cursor-pointer group',
+                    selectedNodeMeta?.tier === 2
+                      ? 'bg-indigo-50 border border-indigo-300 shadow-xs ring-1 ring-indigo-200'
+                      : 'hover:bg-[#FAF3EA] border border-transparent'
+                  )}
+                  title="Click Tier 2 Gateway to inspect on right"
+                >
                   <div className="flex items-center gap-1.5">
                     <span className="px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-700 font-mono tracking-wider text-[9px] font-black border border-indigo-200">
-                      TIER 2
+                      L2
                     </span>
-                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase">
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase group-hover:text-indigo-700">
                       GATEWAY
                     </span>
                   </div>
                   <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
                     Route & TLS
                   </span>
-                </div>
+                </button>
 
-                {/* TIER 1: Core */}
-                <div className="h-[95px] flex flex-col justify-center">
+                {/* L1: Core */}
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSelectedNodeId('auth-service');
+                    setIsInspectorOpen(true);
+                  }}
+                  className={cn(
+                    'h-[95px] flex flex-col justify-center text-left p-1.5 rounded-xl transition-all cursor-pointer group',
+                    selectedNodeMeta?.tier === 1
+                      ? 'bg-emerald-50 border border-emerald-300 shadow-xs ring-1 ring-emerald-200'
+                      : 'hover:bg-[#FAF3EA] border border-transparent'
+                  )}
+                  title="Click Tier 1 Core to inspect on right"
+                >
                   <div className="flex items-center gap-1.5">
                     <span className="px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-800 font-mono tracking-wider text-[9px] font-black border border-emerald-200">
-                      TIER 1
+                      L1
                     </span>
-                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase">
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase group-hover:text-emerald-800">
                       CORE
                     </span>
                   </div>
                   <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
                     Application
                   </span>
-                </div>
+                </button>
 
-                {/* TIER 0: Data */}
-                <div className="h-[95px] flex flex-col justify-center">
+                {/* L0: Data */}
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSelectedNodeId('db-primary');
+                    setIsInspectorOpen(true);
+                  }}
+                  className={cn(
+                    'h-[95px] flex flex-col justify-center text-left p-1.5 rounded-xl transition-all cursor-pointer group',
+                    selectedNodeMeta?.tier === 0
+                      ? 'bg-[#0047AB]/10 border border-[#0047AB]/30 shadow-xs ring-1 ring-[#0047AB]/25'
+                      : 'hover:bg-[#FAF3EA] border border-transparent'
+                  )}
+                  title="Click Tier 0 Data to inspect on right"
+                >
                   <div className="flex items-center gap-1.5">
                     <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-mono tracking-wider text-[9px] font-black border border-[#0047AB]/25">
-                      TIER 0
+                      L0
                     </span>
-                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#0047AB] uppercase">
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#0047AB] uppercase group-hover:underline">
                       DATA
                     </span>
                   </div>
                   <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
                     Root ACID
                   </span>
-                </div>
+                </button>
               </div>
 
               {/* Main Node Canvas Area (600px width) */}
@@ -732,7 +789,10 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                       )}
                     >
                       <div
-                        onClick={() => setSelectedNodeId(meta.id)}
+                        onClick={() => {
+                          setSelectedNodeId(meta.id);
+                          setIsInspectorOpen(true);
+                        }}
                         onMouseEnter={() => setHoveredNodeId(meta.id)}
                         onMouseLeave={() => setHoveredNodeId(null)}
                         className={cn(
@@ -807,7 +867,7 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
           </div>
         </div>
 
-        {/* Legend Footer */}
+        {/* Legend Footer & Right Inspector Drawer Trigger */}
         <div className="mt-4 pt-3 border-t border-[#EADCC9] flex flex-wrap items-center justify-between text-xs text-[#6E6258] relative z-10 gap-3">
           <div className="flex flex-wrap items-center gap-3 font-mono text-[11px] tracking-wider uppercase">
             <span className="flex items-center gap-1.5 font-bold">
@@ -823,52 +883,80 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
               <span className="w-2.5 h-2.5 rounded-full bg-[#0047AB] shadow-xs" /> Prerequisite
             </span>
           </div>
-          <span className="font-mono text-[10px] tracking-wider text-[#8A7B6D] font-bold uppercase">
-            Click any service to inspect topology & blast radius
-          </span>
+
+          <div className="flex items-center gap-2.5">
+            <span className="font-mono text-[10px] tracking-wider text-[#8A7B6D] font-bold uppercase hidden sm:inline">
+              Click any tier parameter or node to inspect on right &rarr;
+            </span>
+            <button
+              type="button"
+              onClick={() => setIsInspectorOpen((prev) => !prev)}
+              className="px-2.5 py-1 rounded-lg bg-[#FAF3EA] border border-[#E5D7C5] hover:border-[#0047AB]/40 text-[#1A1A1A] font-mono text-[10px] font-bold uppercase tracking-wider transition-colors cursor-pointer flex items-center gap-1.5"
+            >
+              <SlidersHorizontal className="w-3 h-3 text-[#0047AB]" />
+              <span>{isInspectorOpen ? 'Hide Inspector' : 'Show Inspector'}</span>
+            </button>
+          </div>
         </div>
       </Card>
 
-      {/* Persistent Side-by-Side Service Inspector Column (Right Column, 4-span) */}
-      <Card className="horizon-impact-panel p-5 xl:col-span-4 h-[630px] flex flex-col justify-between skeuo-card border-[#E5D7C5] sticky top-6">
-        <div>
-          {/* Panel Header */}
-          <div className="flex items-center justify-between pb-3 mb-3 border-b border-[#EADCC9] shrink-0">
-            <div className="flex items-center gap-2">
-              <div className="w-8 h-8 rounded-lg bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20 flex items-center justify-center">
-                <AlertOctagon className="w-4 h-4" />
+      {/* Right-Side Slide-Over Inspector Drawer */}
+      <AnimatePresence>
+        {isInspectorOpen && selectedNode && selectedNodeMeta && (
+          <motion.aside
+            key="service-inspector-drawer"
+            initial={{ x: '100%', opacity: 0.9 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: '100%', opacity: 0 }}
+            transition={{ type: 'spring', damping: 28, stiffness: 280 }}
+            className="fixed top-0 right-0 h-full w-[440px] max-w-[94vw] z-50 bg-[#FFFDF9] border-l-2 border-[#E5D7C5] shadow-[-10px_0_35px_rgba(26,26,26,0.18)] flex flex-col justify-between"
+            aria-label="Service Inspector"
+          >
+            {/* Drawer Header */}
+            <div className="p-4 sm:p-5 border-b border-[#EADCC9] bg-[#FFF8F0]/80 flex items-center justify-between shrink-0">
+              <div className="flex items-center gap-2.5">
+                <div className="w-9 h-9 rounded-xl bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20 flex items-center justify-center shrink-0 shadow-inner">
+                  <AlertOctagon className="w-5 h-5" />
+                </div>
+                <div>
+                  <h3 className="text-sm font-black text-[#1A1A1A] tracking-tight">
+                    Service Inspector
+                  </h3>
+                  <p className="text-[9px] font-mono tracking-wider uppercase text-[#6E6258] font-bold">
+                    Blast Radius & Autonomous Playbook
+                  </p>
+                </div>
               </div>
-              <div>
-                <h3 className="text-base font-black text-[#1A1A1A] tracking-tight">
-                  Service Inspector
-                </h3>
-                <p className="text-[10px] font-mono tracking-wider uppercase text-[#6E6258] font-bold">
-                  Topological Impact Analysis
-                </p>
+
+              <div className="flex items-center gap-2">
+                <span className="text-[9px] font-mono tracking-widest px-2.5 py-1 rounded-md bg-[#0047AB]/10 text-[#0047AB] font-black border border-[#0047AB]/20 uppercase">
+                  {selectedNodeMeta.tierLabel} &bull; {selectedNodeMeta.tierName}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => setIsInspectorOpen(false)}
+                  className="p-1.5 rounded-lg text-[#6E6258] hover:text-[#1A1A1A] hover:bg-[#F5EDE2] border border-[#E5D7C5] transition-colors cursor-pointer"
+                  title="Close Inspector"
+                >
+                  <X className="w-4 h-4" />
+                </button>
               </div>
             </div>
-            {selectedNode && (
-              <Badge status={selectedNode.status as any}>
-                {selectedNode.status}
-              </Badge>
-            )}
-          </div>
 
-          {/* Scrollable Inspector Body with Constant Stable Container Height */}
-          {selectedNode && selectedNodeMeta ? (
-            <div className="overflow-y-auto max-h-[460px] space-y-3.5 pr-1">
-              {/* Target Service Overview Card */}
-              <div className="p-3.5 rounded-xl skeuo-well border-[#E5D7C5]">
-                <div className="flex items-center justify-between">
+            {/* Drawer Scrollable Content: 4 Cards Stacked Vertically */}
+            <div className="p-4 sm:p-5 overflow-y-auto flex-1 space-y-3.5">
+              {/* Card 1: Target Service */}
+              <div className="p-4 rounded-xl skeuo-well border-[#E5D7C5]">
+                <div className="flex items-center justify-between mb-2">
                   <span className="text-[9px] text-[#8A7B6D] uppercase font-mono tracking-wider font-bold">
-                    Target Service
+                    TARGET SERVICE
                   </span>
-                  <span className="text-[9px] font-mono tracking-widest px-2 py-0.5 rounded-md bg-[#0047AB]/10 text-[#0047AB] font-black border border-[#0047AB]/20 uppercase">
+                  <span className="text-[9px] font-mono tracking-widest px-2 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-black border border-[#0047AB]/20 uppercase">
                     {selectedNodeMeta.tierLabel} &bull; {selectedNodeMeta.tierName}
                   </span>
                 </div>
 
-                <div className="flex items-center gap-2.5 mt-2">
+                <div className="flex items-center gap-2.5">
                   <div className={cn('w-9 h-9 rounded-xl border flex items-center justify-center shadow-xs shrink-0', selectedNodeMeta.iconBg)}>
                     {React.createElement(selectedNodeMeta.icon, {
                       className: cn('w-5 h-5', selectedNodeMeta.iconColor),
@@ -884,6 +972,10 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                   </div>
                 </div>
 
+                <p className="text-xs text-[#5A4E44] mt-2.5 leading-relaxed">
+                  {selectedNodeMeta.description}
+                </p>
+
                 <div className="grid grid-cols-2 gap-2 mt-3 pt-3 border-t border-[#E5D7C5]/60 text-xs font-mono">
                   <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
                     <span className="text-[8px] text-[#8A7B6D] block tracking-wider uppercase font-bold">PORT / PROTOCOL</span>
@@ -900,8 +992,8 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                 </div>
               </div>
 
-              {/* Upstream Prerequisites */}
-              <div className="p-3 rounded-xl bg-white border border-[#E5D7C5] shadow-xs">
+              {/* Card 2: Upstream Prerequisites */}
+              <div className="p-4 rounded-xl bg-white border border-[#E5D7C5] shadow-xs">
                 <div className="flex items-center justify-between mb-2">
                   <span className="text-xs font-bold text-[#1A1A1A] flex items-center gap-1.5">
                     <Radio className="w-3.5 h-3.5 text-[#0047AB]" />
@@ -911,12 +1003,13 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                     {upstreamDependencies.length} REQUIRED
                   </span>
                 </div>
+
                 {upstreamDependencies.length === 0 ? (
-                  <p className="text-xs text-[#6E6258] italic font-medium">
+                  <div className="p-3 rounded-lg bg-[#FAF3EA] border border-[#E5D7C5] text-xs text-[#6E6258] italic font-medium mt-2">
                     Root foundation service. Has zero upstream dependencies.
-                  </p>
+                  </div>
                 ) : (
-                  <div className="space-y-1.5">
+                  <div className="space-y-1.5 mt-2">
                     {upstreamDependencies.map((depId) => {
                       const depMeta = STATIC_NODE_METAS[depId];
                       const depNode = nodes.find((n) => n.id === depId);
@@ -940,11 +1033,15 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                     })}
                   </div>
                 )}
+
+                <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-3 block">
+                  Click any prerequisite to inspect its dependencies
+                </span>
               </div>
 
-              {/* Blast Radius Box (Cobalt Patch) */}
-              <div className="p-3.5 rounded-xl cobalt-patch shadow-lg shadow-[#0047AB]/20">
-                <div className="flex items-center justify-between">
+              {/* Card 3: Cascaded Blast Radius (Cobalt Patch) */}
+              <div className="p-4 rounded-xl cobalt-patch shadow-lg shadow-[#0047AB]/20 text-white">
+                <div className="flex items-center justify-between mb-2">
                   <span className="text-xs font-bold text-white flex items-center gap-1.5">
                     <Flame className="w-3.5 h-3.5 text-amber-300" />
                     <span>Cascaded Blast Radius</span>
@@ -954,15 +1051,15 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                   </span>
                 </div>
 
-                <p className="text-xs text-white/80 mt-2 font-medium">
-                  If <strong className="text-white underline">{selectedNodeMeta.name}</strong> fails, the following downstream systems are impaired:
+                <p className="text-xs text-white/80 mt-1 font-medium">
+                  If <strong className="text-white underline">{selectedNodeMeta.name}</strong> fails:
                 </p>
 
-                <div className="mt-2.5 space-y-1.5">
+                <div className="mt-2 space-y-1.5">
                   {blastRadius.length === 0 ? (
-                    <div className="text-xs text-emerald-200 flex items-center gap-1.5 py-1 font-semibold">
-                      <CheckCircle2 className="w-4 h-4 text-emerald-300" />
-                      <span>Edge leaf node: 0 downstream dependencies cascaded.</span>
+                    <div className="text-xs text-emerald-200 flex items-center gap-1.5 py-2 font-semibold">
+                      <CheckCircle2 className="w-4 h-4 text-emerald-300 shrink-0" />
+                      <span>Edge leaf node: 0 downstream cascaded.</span>
                     </div>
                   ) : (
                     blastRadius.map((depId) => {
@@ -973,10 +1070,10 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                           onClick={() => setSelectedNodeId(depId)}
                           className="flex items-center justify-between p-2 rounded-lg bg-black/25 border border-white/10 hover:border-white/30 text-xs cursor-pointer transition-colors"
                         >
-                          <span className="text-white font-semibold">
+                          <span className="text-white font-semibold truncate mr-2">
                             {depMeta ? depMeta.name : depId}
                           </span>
-                          <span className="text-[9px] font-mono tracking-wider text-amber-300 font-bold px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-400/30 uppercase">
+                          <span className="text-[9px] font-mono tracking-wider text-amber-300 font-bold px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-400/30 uppercase shrink-0">
                             {isSelectedDown ? 'IMPAIRED' : 'AT RISK'}
                           </span>
                         </div>
@@ -984,15 +1081,19 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                     })
                   )}
                 </div>
+
+                <span className="font-mono text-[9px] text-white/70 tracking-wide mt-3 block">
+                  Reverse topological traversal O(V+E)
+                </span>
               </div>
 
-              {/* Autonomous Playbook Assignment */}
-              <div className="p-3 rounded-xl skeuo-well border-[#E5D7C5] text-xs text-[#5A4E44]">
-                <div className="flex items-center gap-1.5 font-bold text-[#1A1A1A] mb-1">
+              {/* Card 4: Autonomous Playbook Assignment */}
+              <div className="p-4 rounded-xl skeuo-well border-[#E5D7C5]">
+                <div className="flex items-center gap-1.5 font-bold text-[#1A1A1A] mb-2 text-xs">
                   <Activity className="w-3.5 h-3.5 text-[#0047AB]" />
                   <span>Autonomous Playbook Assignment:</span>
                 </div>
-                <p className="leading-relaxed text-[11px]">
+                <p className="leading-relaxed text-[11px] text-[#5A4E44]">
                   {selectedNode.type === 'database'
                     ? 'Playbook #PB-01: High-Risk Database Failover to read replica. EIP-712 Multi-Sig Commander approval required.'
                     : selectedNode.type === 'cache'
@@ -1003,37 +1104,31 @@ export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' })
                 </p>
               </div>
             </div>
-          ) : (
-            <div className="text-center py-16 text-xs text-[#8A7B6D] font-medium">
-              Select any service from the DAG topology to inspect its dependencies and blast radius.
-            </div>
-          )}
-        </div>
 
-        {/* Action Controls Footer (Always Pinned and 100% Visible, Never Cut Off!) */}
-        {selectedNode && (
-          <div className="pt-3 border-t border-[#EADCC9] shrink-0">
-            <Button
-              variant={selectedNode.status === 'down' ? 'primary' : 'danger'}
-              size="sm"
-              onClick={() => handleToggleState(selectedNode.id, selectedNode.status)}
-              className="w-full text-xs font-bold py-2.5 rounded-xl flex items-center justify-center gap-2 cursor-pointer shadow-sm"
-            >
-              {selectedNode.status === 'down' ? (
-                <>
-                  <RotateCcw className="w-4 h-4" />
-                  <span>Restore & Heal Service</span>
-                </>
-              ) : (
-                <>
-                  <Flame className="w-4 h-4" />
-                  <span>Simulate Failure on Node</span>
-                </>
-              )}
-            </Button>
-          </div>
+            {/* Drawer Footer: Pinned Action Button (100% visible, zero cutoff!) */}
+            <div className="p-4 sm:p-5 border-t border-[#E5D7C5] bg-[#FFFDF9] shrink-0">
+              <Button
+                variant={selectedNode.status === 'down' ? 'primary' : 'danger'}
+                size="sm"
+                onClick={() => handleToggleState(selectedNode.id, selectedNode.status)}
+                className="w-full text-xs font-bold py-3 rounded-xl flex items-center justify-center gap-2 cursor-pointer shadow-md"
+              >
+                {selectedNode.status === 'down' ? (
+                  <>
+                    <RotateCcw className="w-4 h-4" />
+                    <span>Restore & Heal Service</span>
+                  </>
+                ) : (
+                  <>
+                    <Flame className="w-4 h-4" />
+                    <span>Simulate Failure on Node</span>
+                  </>
+                )}
+              </Button>
+            </div>
+          </motion.aside>
         )}
-      </Card>
+      </AnimatePresence>
     </div>
   );
 };
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 268acbe..e16d3b4 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -10,6 +10,55 @@
 @import "@fontsource/poppins/800.css";
 @import "@fontsource/poppins/900.css";
 
+
+/* =====================================================================
+   SILVANA TYPEFACE FAMILY (Blaze Type / Awwwards Typography)
+   ===================================================================== */
+@font-face {
+  font-family: 'Silvana';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('/fonts/silvana/Silvana-Light.woff') format('woff'),
+       url('https://fonts.cdnfonts.com/s/88418/Silvana-Light-Trial.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Silvana';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/silvana/Silvana-Regular.woff') format('woff'),
+       url('https://fonts.cdnfonts.com/s/88418/Silvana-Regular-Trial.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Silvana';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/silvana/Silvana-Italic.woff') format('woff'),
+       url('https://fonts.cdnfonts.com/s/88418/Silvana-RegularItalic-Trial.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Silvana';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/silvana/Silvana-Medium.woff') format('woff'),
+       url('https://fonts.cdnfonts.com/s/88418/Silvana-Medium-Trial.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Silvana';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/silvana/Silvana-Bold.woff') format('woff'),
+       url('https://fonts.cdnfonts.com/s/88418/Silvana-Bold-Trial.woff') format('woff');
+}
+
 @plugin "daisyui";
 
 /* =====================================================================
@@ -47,6 +96,7 @@
     "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-heading:
     "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-silvana: "Silvana", "Newsreader", "Cormorant Garamond", "Playfair Display", Georgia, serif;
   --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
 
   --color-background: var(--background);
@@ -491,3 +541,55 @@ h1.bblacnkherotit.text-3xl.sm\:text-4xl.font-black.text-\[\#1A1A1A\].tracking-ti
 .animate-dag-flow-reverse {
   animation: dagFlowReverse 1.4s linear infinite;
 }
+
+/* =====================================================================
+   SILVANA EDITORIAL TYPOGRAPHY RULES
+   ===================================================================== */
+.font-silvana {
+  font-family: 'Silvana', 'Newsreader', 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
+}
+
+/* Scoped Silvana Typography for Docs and Sub-pages */
+.docs-page-container,
+.silvana-scope {
+  font-family: 'Silvana', 'Newsreader', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
+}
+
+.docs-page-container h1,
+.docs-page-container h2,
+.docs-page-container h3,
+.docs-page-container h4,
+.docs-page-container h5,
+.docs-page-container h6,
+.silvana-scope h1,
+.silvana-scope h2,
+.silvana-scope h3,
+.silvana-scope h4,
+.silvana-scope h5,
+.silvana-scope h6 {
+  font-family: 'Silvana', 'Newsreader', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
+  letter-spacing: -0.012em;
+}
+
+.docs-page-container p,
+.docs-page-container li,
+.docs-page-container td,
+.docs-page-container th,
+.silvana-scope p,
+.silvana-scope li,
+.silvana-scope td,
+.silvana-scope th {
+  font-family: 'Silvana', 'Newsreader', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
+}
+
+/* Ensure code, terminals, badges and monospace elements strictly retain JetBrains Mono */
+.docs-page-container code,
+.docs-page-container pre,
+.docs-page-container kbd,
+.docs-page-container .font-mono,
+.silvana-scope code,
+.silvana-scope pre,
+.silvana-scope kbd,
+.silvana-scope .font-mono {
+  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace !important;
+}
diff --git a/apps/web/src/pages/DocsPage.tsx b/apps/web/src/pages/DocsPage.tsx
index 9204eda..745b7bf 100644
--- a/apps/web/src/pages/DocsPage.tsx
+++ b/apps/web/src/pages/DocsPage.tsx
@@ -963,7 +963,7 @@ export const DocsPage: React.FC = () => {
       variants={containerVariants}
       initial="hidden"
       animate="visible"
-      className="space-y-8 font-sans w-full max-w-7xl mx-auto pb-16"
+      className="space-y-8 font-silvana docs-page-container w-full max-w-7xl mx-auto pb-16"
     >
       {/* MDN-Style Breadcrumb Navigation */}
       <motion.div variants={itemVariants} className="flex flex-wrap items-center justify-between gap-3 text-xs border-b border-[#EADCC9] pb-3">
@@ -1474,25 +1474,25 @@ export const DocsPage: React.FC = () => {
                         <td className="p-3 font-bold text-[#0047AB]">HORIZON_API_URL</td>
                         <td className="p-3 text-[#6E6258]">URL</td>
                         <td className="p-3 text-emerald-800 font-bold">Required</td>
-                        <td className="p-3 font-sans text-[#1A1A1A]">Production Horizon orchestrator endpoint or local daemon URL.</td>
+                        <td className="p-3 font-silvana text-[#1A1A1A]">Production Horizon orchestrator endpoint or local daemon URL.</td>
                       </tr>
                       <tr>
                         <td className="p-3 font-bold text-[#0047AB]">MST_CHAIN_ID</td>
                         <td className="p-3 text-[#6E6258]">Number</td>
                         <td className="p-3">91562037</td>
-                        <td className="p-3 font-sans text-[#1A1A1A]">MST Blockchain Testnet EVM Chain identifier for EIP-712 signing.</td>
+                        <td className="p-3 font-silvana text-[#1A1A1A]">MST Blockchain Testnet EVM Chain identifier for EIP-712 signing.</td>
                       </tr>
                       <tr>
                         <td className="p-3 font-bold text-[#0047AB]">MST_RPC_URL</td>
                         <td className="p-3 text-[#6E6258]">URL</td>
                         <td className="p-3">https://testnet.mstscan.com/rpc</td>
-                        <td className="p-3 font-sans text-[#1A1A1A]">JSON-RPC node for blockchain Merkle root query and smart contract state.</td>
+                        <td className="p-3 font-silvana text-[#1A1A1A]">JSON-RPC node for blockchain Merkle root query and smart contract state.</td>
                       </tr>
                       <tr>
                         <td className="p-3 font-bold text-[#0047AB]">SARVAM_AGENT_ENABLED</td>
                         <td className="p-3 text-[#6E6258]">Boolean</td>
                         <td className="p-3">true</td>
-                        <td className="p-3 font-sans text-[#1A1A1A]">Enables native Sarvam-105b LLM integration for automated SRE synthesis.</td>
+                        <td className="p-3 font-silvana text-[#1A1A1A]">Enables native Sarvam-105b LLM integration for automated SRE synthesis.</td>
                       </tr>
                     </tbody>
                   </table>
@@ -1611,7 +1611,7 @@ export const DocsPage: React.FC = () => {
                             )}
                           </td>
                           <td className="p-3 text-[#5A4E44]">{param.defaultVal}</td>
-                          <td className="p-3 font-sans text-[#1A1A1A] leading-relaxed">{param.description}</td>
+                          <td className="p-3 font-silvana text-[#1A1A1A] leading-relaxed">{param.description}</td>
                         </tr>
                       ))}
                     </tbody>
@@ -1769,10 +1769,10 @@ export const DocsPage: React.FC = () => {
                           {err.category}
                         </span>
                       </td>
-                      <td className="p-3.5 font-sans font-medium text-[#403830] max-w-sm leading-relaxed">
+                      <td className="p-3.5 font-silvana font-medium text-[#403830] max-w-sm leading-relaxed">
                         {err.description}
                       </td>
-                      <td className="p-3.5 font-sans font-medium text-emerald-800 max-w-xs leading-relaxed">
+                      <td className="p-3.5 font-silvana font-medium text-emerald-800 max-w-xs leading-relaxed">
                         {err.remediation}
                       </td>
                     </tr>
@@ -1863,7 +1863,7 @@ export const DocsPage: React.FC = () => {
                       <td className="p-3.5 text-[#6E6258] whitespace-nowrap font-medium">
                         {sc.args || '—'}
                       </td>
-                      <td className="p-3.5 font-sans font-medium text-[#1A1A1A] max-w-xs leading-relaxed">
+                      <td className="p-3.5 font-silvana font-medium text-[#1A1A1A] max-w-xs leading-relaxed">
                         {sc.desc}
                       </td>
                       <td className="p-3.5 text-emerald-800 font-semibold whitespace-nowrap">
diff --git a/apps/web/src/pages/TopologyPage.tsx b/apps/web/src/pages/TopologyPage.tsx
index ec261ac..21f2e2c 100644
--- a/apps/web/src/pages/TopologyPage.tsx
+++ b/apps/web/src/pages/TopologyPage.tsx
@@ -38,7 +38,7 @@ export const TopologyPage: React.FC = () => {
       animate="visible"
       className="space-y-6 sm:space-y-8 font-sans w-full"
     >
-      {/* Return Navigation & Live Pill */}
+      {/* Return Navigation */}
       <motion.div variants={itemVariants} className="flex items-center justify-between">
         <Link
           to="/"
@@ -46,24 +46,14 @@ export const TopologyPage: React.FC = () => {
         >
           <span>&larr; Return to Home</span>
         </Link>
-        <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200/80 shadow-xs">
-          <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-          <span className="text-xs font-mono text-emerald-800 font-bold">O(V + E) Acyclic DAG Active</span>
-        </div>
       </motion.div>
 
       {/* Header */}
       <motion.div variants={itemVariants} className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-1">
         <div>
-          <div className="flex flex-wrap items-center gap-3">
-            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-[#1A1A1A]">
-              Dependency DAG Topology
-            </h1>
-            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-mono font-bold bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20 shadow-xs">
-              <Network className="w-3.5 h-3.5 text-[#0047AB]" />
-              TOPOLOGICAL RESOLVER
-            </span>
-          </div>
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-[#1A1A1A]">
+            Dependency DAG Topology
+          </h1>
           <p className="text-xs sm:text-sm text-[#5A4E44] mt-1.5 max-w-3xl leading-relaxed font-medium">
             Dynamic Directed Acyclic Graph (DAG) visualizing parent-child service relationships, reverse dependency traversal, and failure blast radius.
           </p>