AgentManagementCenter

# AgentManagementCenter

You are given a task to integrate an existing React component in the codebase

~~~/README.md
# Agent Management Center

A comprehensive, enterprise-grade dashboard for managing autonomous agents, delegations, and verification gates. Built with a modern, dark space gray aesthetic and low-noise design principles.

## Features

- **Agent Registry**: View and monitor registered agents with real-time status and load metrics.
- **Delegation Controls**: Manage x402 gates, payment allowances, webhooks, and social posting permissions.
- **Verification Gates**: Visual tracker and setup for logic-based access gates (NFTs, tokens, roles).
- **Enterprise UI**: Dark mode optimized, collapsible sidebar, responsive layout, and refined typography.

## Usage

### 1. Import the Layout and Pages

This component is structured as a layout with multiple page sub-components. You should configure your routing to use the layout and render the pages within it.

```tsx
import { AgentManagementLayout } from '@/sd-components/b88e58ad-49d4-4efd-8a10-01bd9e4b0f3a';
// You can also import the page components if they are exported, 
// or implement your own pages to fit the layout slots.
```

### 2. Configure Routing (React Router)

The component is designed to work with `react-router-dom`.

```tsx
import { HashRouter, Routes, Route } from 'react-router-dom';
import { AgentManagementLayout } from '@/sd-components/b88e58ad-49d4-4efd-8a10-01bd9e4b0f3a';
// Import your page components here

export default function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<AgentManagementLayout />}>
          <Route index element={<AgentsPage />} />
          <Route path="delegations" element={<DelegationsPage />} />
          <Route path="gates" element={<GatesPage />} />
          {/* Add more routes as needed */}
        </Route>
      </Routes>
    </HashRouter>
  );
}
```

## Props

The `AgentManagementLayout` accepts standard children props, but when used with `Outlet` from react-router-dom, it automatically renders the matched child route.

| Prop | Type | Description |
|------|------|-------------|
| children | ReactNode | (Optional) Content to render if not using Router Outlet |

## Dependencies

- `lucide-react`: Icons
- `framer-motion`: Animations
- `clsx` & `tailwind-merge`: Style utilities
- `react-router-dom`: Routing (Required)
~~~

~~~/src/App.tsx
import React from 'react';
import { HashRouter, Routes, Route } from 'react-router-dom';
import AgentManagementLayout from './Component';
import AgentsPage from './pages/Agents';
import DelegationsPage from './pages/Delegations';
import GatesPage from './pages/Gates';
import PaymentsPage from './pages/Payments';
import WebhooksPage from './pages/Webhooks';
import SettingsPage from './pages/Settings';

export default function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<AgentManagementLayout />}>
          <Route index element={<AgentsPage />} />
          <Route path="delegations" element={<DelegationsPage />} />
          <Route path="gates" element={<GatesPage />} />
          <Route path="payments" element={<PaymentsPage />} />
          <Route path="webhooks" element={<WebhooksPage />} />
          <Route path="settings" element={<SettingsPage />} />
        </Route>
      </Routes>
    </HashRouter>
  );
}
~~~

~~~/package.json
{
  "name": "agent-management-center",
  "description": "A comprehensive agent management dashboard for viewing registered agents, delegating controls, and managing verification gates.",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "lucide-react": "^0.344.0",
    "framer-motion": "^11.0.8",
    "date-fns": "^3.3.1",
    "clsx": "^2.1.0",
    "tailwind-merge": "^2.2.1",
    "react-router-dom": "^6.22.2"
  }
}
~~~

~~~/src/Component.tsx
import React, { useState, useEffect } from 'react';
import { 
  LayoutDashboard, 
  Users, 
  ShieldCheck, 
  CreditCard, 
  Webhook, 
  Settings, 
  Search, 
  Bell, 
  PanelLeft,
  PanelLeftClose,
  Command,
  ChevronRight,
  LogOut,
  Plus,
  Sparkles
} from 'lucide-react';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Outlet, Link, useLocation } from 'react-router-dom';

// --- Utils ---
function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// --- Components ---

interface SidebarItemProps {
  icon: React.ElementType;
  label: string;
  to: string;
  active?: boolean;
  collapsed?: boolean;
}

function SidebarItem({ icon: Icon, label, to, active, collapsed }: SidebarItemProps) {
  return (
    <Link
      to={to}
      className={cn(
        "flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-300 group relative mx-2 mb-0.5",
        active 
          ? "text-primary font-medium bg-white/5 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)] border border-white/5" 
          : "text-muted-foreground hover:text-foreground hover:bg-white/5 hover:backdrop-blur-sm"
      )}
    >
      <div className={cn(
        "relative flex items-center justify-center transition-all duration-300",
        active ? "text-primary" : "text-muted-foreground group-hover:text-foreground"
      )}>
        <Icon className="w-4 h-4 z-10" />
        {active && <div className="absolute inset-0 bg-primary/20 blur-md rounded-full opacity-50" />}
      </div>
      
      {!collapsed && (
        <span className="text-sm tracking-tight whitespace-nowrap overflow-hidden transition-opacity duration-300">
          {label}
        </span>
      )}
      
      {active && !collapsed && (
        <div className="absolute right-2 w-1 h-1 rounded-full bg-primary shadow-[0_0_4px_2px_rgba(255,255,255,0.2)]" />
      )}
    </Link>
  );
}

interface AgentManagementLayoutProps {
  children?: React.ReactNode;
}

export function AgentManagementLayout({ children }: AgentManagementLayoutProps) {
  const [collapsed, setCollapsed] = useState(false);
  const location = useLocation();
  const [scrolled, setScrolled] = useState(false);

  // Dynamic glass effect on scroll
  useEffect(() => {
    const handleScroll = (e: Event) => {
      const target = e.target as HTMLElement;
      setScrolled(target.scrollTop > 10);
    };
    const main = document.getElementById('main-content');
    if (main) main.addEventListener('scroll', handleScroll);
    return () => main?.removeEventListener('scroll', handleScroll);
  }, []);

  const isActive = (path: string) => {
    if (path === '/' && location.pathname === '/') return true;
    if (path !== '/' && location.pathname.startsWith(path)) return true;
    return false;
  };

  const getPageTitle = () => {
    if (location.pathname === '/') return 'Agent Registry';
    return location.pathname.slice(1).charAt(0).toUpperCase() + location.pathname.slice(2);
  };

  return (
    <div className="flex h-screen w-full bg-[#050505] text-foreground font-sans selection:bg-primary/20 selection:text-primary overflow-hidden antialiased">
      {/* Ambient Background Noise/Gradient */}
      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-blue-500/5 blur-[120px] rounded-full mix-blend-screen" />
        <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-violet-500/5 blur-[120px] rounded-full mix-blend-screen" />
        <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-[0.03] mix-blend-overlay" />
      </div>

      {/* Sidebar */}
      <aside 
        className={cn(
          "h-full border-r border-white/5 bg-[#050505]/80 backdrop-blur-xl flex flex-col transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] z-40 relative",
          collapsed ? "w-[68px]" : "w-64"
        )}
      >
        <div className="h-16 flex items-center px-5 border-b border-white/5 justify-between">
          {!collapsed ? (
            <div className="flex items-center gap-3 animate-in fade-in duration-300">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-zinc-800 to-black border border-white/10 flex items-center justify-center shadow-inner">
                 <Command className="w-4 h-4 text-white" />
              </div>
              <div>
                <span className="font-semibold text-sm tracking-tight block leading-none">Nexus</span>
                <span className="text-[10px] text-muted-foreground font-mono tracking-wider">OS v2.4</span>
              </div>
            </div>
          ) : (
            <div className="w-8 h-8 mx-auto rounded-lg bg-gradient-to-br from-zinc-800 to-black border border-white/10 flex items-center justify-center shadow-inner">
               <Command className="w-4 h-4 text-white" />
            </div>
          )}
        </div>

        <div className="flex-1 overflow-y-auto py-6 flex flex-col gap-1 custom-scrollbar">
          <div className={cn("mb-2 px-6 text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest", collapsed && "text-center")}>
            {collapsed ? "—" : "Core"}
          </div>
          
          <SidebarItem icon={Users} label="Agent Registry" to="/" active={isActive('/')} collapsed={collapsed} />
          <SidebarItem icon={ShieldCheck} label="Delegations" to="/delegations" active={isActive('/delegations')} collapsed={collapsed} />
          <SidebarItem icon={LayoutDashboard} label="Verification Gates" to="/gates" active={isActive('/gates')} collapsed={collapsed} />
          
          <div className="my-4 h-px bg-gradient-to-r from-transparent via-white/5 to-transparent mx-4" />
          
          <div className={cn("mb-2 px-6 text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest", collapsed && "text-center")}>
            {collapsed ? "—" : "System"}
          </div>
          <SidebarItem icon={CreditCard} label="Treasury" to="/payments" active={isActive('/payments')} collapsed={collapsed} />
          <SidebarItem icon={Webhook} label="Webhooks" to="/webhooks" active={isActive('/webhooks')} collapsed={collapsed} />
          <SidebarItem icon={Settings} label="Configuration" to="/settings" active={isActive('/settings')} collapsed={collapsed} />
        </div>

        <div className="p-4 border-t border-white/5">
          <button 
            onClick={() => setCollapsed(!collapsed)}
            className="w-full flex items-center justify-center p-2 rounded-lg hover:bg-white/5 text-muted-foreground hover:text-foreground transition-all mb-4"
          >
            {collapsed ? <PanelLeft className="w-4 h-4" /> : <PanelLeftClose className="w-4 h-4" />}
          </button>

          <div className={cn(
            "rounded-xl bg-gradient-to-b from-white/5 to-white/[0.02] border border-white/5 p-3 flex items-center gap-3 overflow-hidden transition-all duration-200 cursor-pointer group hover:border-white/10 shadow-sm",
            collapsed ? "justify-center p-2" : ""
          )}>
            <div className="w-8 h-8 rounded-full bg-zinc-800 border border-white/10 shrink-0 flex items-center justify-center relative">
              <span className="text-[10px] font-medium text-zinc-300">0x</span>
              <div className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-black rounded-full flex items-center justify-center">
                 <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_4px_rgba(16,185,129,0.5)]" />
              </div>
            </div>
            {!collapsed && (
              <div className="flex-1 min-w-0">
                <div className="text-xs font-medium truncate text-zinc-200 group-hover:text-white transition-colors">0x12...4B9</div>
                <div className="text-[10px] text-muted-foreground flex items-center gap-1.5">
                  Pro Plan
                </div>
              </div>
            )}
            {!collapsed && (
              <LogOut className="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
            )}
          </div>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 flex flex-col min-w-0 bg-transparent relative z-10">
        {/* Header */}
        <header 
          className={cn(
            "h-16 sticky top-0 z-50 flex items-center justify-between px-8 transition-all duration-300",
            scrolled ? "bg-[#050505]/80 backdrop-blur-xl border-b border-white/5" : "bg-transparent"
          )}
        >
          <div className="flex items-center gap-4">
             <div className="flex items-center text-xs text-muted-foreground font-medium">
                <span className="opacity-50 hover:opacity-100 transition-opacity cursor-pointer">Dashboard</span>
                <ChevronRight className="w-3 h-3 mx-2 opacity-30" />
                <span className="text-foreground">{getPageTitle()}</span>
             </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="relative hidden md:block group">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground group-focus-within:text-foreground transition-colors" />
              <input 
                type="text" 
                placeholder="Search resources..." 
                className="w-64 h-9 bg-white/[0.03] hover:bg-white/[0.05] focus:bg-black/40 border border-white/5 hover:border-white/10 focus:border-white/20 rounded-full pl-9 pr-4 text-xs outline-none transition-all placeholder:text-muted-foreground/40"
              />
              <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1 pointer-events-none">
                 <span className="text-[10px] text-muted-foreground/40 font-mono">⌘K</span>
              </div>
            </div>
            
            <div className="h-4 w-px bg-white/10 mx-1" />

            <button className="relative w-9 h-9 rounded-full flex items-center justify-center hover:bg-white/5 transition-colors text-muted-foreground hover:text-foreground">
              <Bell className="w-4 h-4" />
              <span className="absolute top-2.5 right-2.5 w-1.5 h-1.5 rounded-full bg-red-500 shadow-sm" />
            </button>
            
            <button className="h-9 px-4 rounded-full bg-white text-black text-xs font-semibold hover:bg-zinc-200 transition-all shadow-[0_0_20px_rgba(255,255,255,0.1)] flex items-center gap-2 group">
              <Plus className="w-3.5 h-3.5 transition-transform group-hover:rotate-90" />
              <span>Create New</span>
            </button>
          </div>
        </header>

        {/* Scrollable Content Area */}
        <div id="main-content" className="flex-1 overflow-y-auto custom-scrollbar scroll-smooth">
          <div className="max-w-[1600px] mx-auto p-8 space-y-10 min-h-screen">
             {children || <Outlet />}
          </div>
        </div>
      </main>
    </div>
  );
}

// Add some custom styles for scrollbar
const style = document.createElement('style');
style.textContent = `
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }
`;
document.head.appendChild(style);

export default AgentManagementLayout;
~~~

~~~/src/pages/Gates.tsx
import React from 'react';
import { 
  GitMerge, 
  Users, 
  Activity, 
  Plus, 
  MoreHorizontal,
  Key,
  Database,
  ArrowRight,
  Lock,
  Unlock
} from 'lucide-react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: any[]) {
  return twMerge(clsx(inputs));
}

const GATES = [
  { 
    id: 'gate_alpha', 
    name: 'Whale Access Only', 
    logic: 'Hold > 10 ETH AND Member of "OG Club"', 
    users: 1240, 
    requests: '15k/day',
    status: 'active',
    icon: Database
  },
  { 
    id: 'gate_beta', 
    name: 'Early Adopter Tier', 
    logic: 'Account Age > 1 Year OR Hold "Genesis NFT"', 
    users: 5600, 
    requests: '45k/day',
    status: 'active',
    icon: Users
  },
  { 
    id: 'gate_gamma', 
    name: 'Admin Dashboard', 
    logic: 'Role == "Admin" AND 2FA Verified', 
    users: 12, 
    requests: '50/day',
    status: 'locked',
    icon: Key
  },
];

export default function GatesPage() {
  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-200">
      <div className="flex items-end justify-between border-b border-white/5 pb-6">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-foreground font-display">Verification Gates</h1>
          <p className="text-muted-foreground mt-2 text-sm max-w-2xl leading-relaxed">
            Configure logical access control and token-gated verification flows.
          </p>
        </div>
        
        <button className="h-10 px-5 bg-white text-black hover:bg-zinc-200 rounded-full font-semibold text-xs transition-all flex items-center gap-2 shadow-[0_0_20px_rgba(255,255,255,0.1)]">
          <Plus className="w-3.5 h-3.5" />
          <span>New Gate</span>
        </button>
      </div>

      <div className="space-y-4">
        {GATES.map((gate) => (
          <div 
            key={gate.id}
            className="group relative bg-white/[0.02] border border-white/5 rounded-xl p-5 hover:bg-white/[0.04] transition-all duration-300 flex items-center justify-between overflow-hidden"
          >
            {/* Background Glow */}
            <div className="absolute top-0 right-0 w-64 h-full bg-gradient-to-l from-white/[0.02] to-transparent pointer-events-none" />

            <div className="flex items-center gap-6 relative z-10">
              <div className={cn(
                "w-12 h-12 rounded-xl flex items-center justify-center shrink-0 border transition-all duration-300",
                gate.status === 'active' 
                  ? "bg-white/[0.03] border-white/10 text-white group-hover:border-primary/30" 
                  : "bg-white/[0.01] border-white/5 text-muted-foreground"
              )}>
                <gate.icon className="w-5 h-5" />
              </div>
              
              <div className="space-y-1.5">
                <div className="flex items-center gap-3">
                  <h3 className="text-base font-medium text-foreground">{gate.name}</h3>
                  <div className={cn(
                    "flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-medium border",
                    gate.status === 'active' 
                      ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500" 
                      : "bg-amber-500/10 border-amber-500/20 text-amber-500"
                  )}>
                    {gate.status === 'active' ? <Unlock className="w-3 h-3" /> : <Lock className="w-3 h-3" />}
                    <span className="uppercase tracking-wide">{gate.status}</span>
                  </div>
                </div>
                <div className="flex items-center gap-2 text-xs">
                   <GitMerge className="w-3.5 h-3.5 text-muted-foreground" />
                   <code className="font-mono text-[10px] text-zinc-400">
                     {gate.logic}
                   </code>
                </div>
              </div>
            </div>

            <div className="flex items-center gap-12 relative z-10 pr-4">
               <div className="text-right">
                 <div className="text-[10px] uppercase tracking-wider text-muted-foreground/50 font-bold mb-0.5">Verified Users</div>
                 <div className="text-sm font-mono font-medium text-foreground">{gate.users.toLocaleString()}</div>
               </div>
               
               <div className="text-right border-l border-white/5 pl-8">
                 <div className="text-[10px] uppercase tracking-wider text-muted-foreground/50 font-bold mb-0.5">Daily Traffic</div>
                 <div className="text-sm font-mono font-medium text-foreground">{gate.requests}</div>
               </div>

               <button className="p-2 hover:bg-white/10 rounded-lg text-muted-foreground hover:text-white transition-colors">
                 <MoreHorizontal className="w-4 h-4" />
               </button>
            </div>
          </div>
        ))}

        <button className="w-full py-4 border border-dashed border-white/10 rounded-xl text-xs text-muted-foreground hover:text-white hover:bg-white/[0.02] hover:border-white/20 transition-all flex items-center justify-center gap-2 group">
          <Plus className="w-4 h-4 transition-transform group-hover:scale-110" />
          <span>Add another verification condition</span>
        </button>
      </div>
    </div>
  );
}
~~~

~~~/src/pages/Agents.tsx
import React from 'react';
import { 
  MoreHorizontal, 
  Cpu, 
  Shield, 
  Zap, 
  CreditCard, 
  ArrowUpRight, 
  Activity,
  Filter,
  Download,
  Search,
  RefreshCw,
  Clock
} from 'lucide-react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: any[]) {
  return twMerge(clsx(inputs));
}

const AGENTS = [
  { id: 'agt_8x92nm1', name: 'Oracle Verifier Alpha', type: 'Verification', status: 'active', load: 42, delegations: 12, lastActive: '2m', uptime: '99.9%' },
  { id: 'agt_p29s8a2', name: 'Payment Streamer V2', type: 'Payment', status: 'active', load: 89, delegations: 45, lastActive: '30s', uptime: '99.8%' },
  { id: 'agt_k82m1x0', name: 'Content Moderator', type: 'Utility', status: 'idle', load: 0, delegations: 3, lastActive: '4h', uptime: '98.5%' },
  { id: 'agt_m921d0s', name: 'Cross-Chain Bridge', type: 'Infrastructure', status: 'offline', load: 0, delegations: 8, lastActive: '2d', uptime: '99.1%' },
  { id: 'agt_x8291ms', name: 'Identity Gatekeeper', type: 'Verification', status: 'active', load: 15, delegations: 28, lastActive: '5m', uptime: '99.9%' },
  { id: 'agt_7721ssd', name: 'Social Poster Bot', type: 'Utility', status: 'active', load: 67, delegations: 5, lastActive: '1h', uptime: '97.2%' },
  { id: 'agt_993jjd2', name: 'Treasury Manager', type: 'Payment', status: 'active', load: 23, delegations: 18, lastActive: '12m', uptime: '99.9%' },
  { id: 'agt_h7732s1', name: 'Data Aggregator', type: 'Infrastructure', status: 'active', load: 55, delegations: 9, lastActive: '1m', uptime: '99.5%' },
];

export default function AgentsPage() {
  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
      
      {/* Page Header */}
      <div className="flex items-end justify-between border-b border-white/5 pb-6">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-foreground font-display">Registered Agents</h1>
          <p className="text-muted-foreground mt-2 text-sm max-w-2xl leading-relaxed">
            Monitor real-time status, computational load, and performance across your autonomous fleet.
          </p>
        </div>
        
        <div className="flex items-center gap-3">
          <div className="relative group">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground group-hover:text-foreground transition-colors" />
             <input 
               type="text" 
               placeholder="Filter agents..." 
               className="h-9 w-48 bg-white/[0.03] border border-white/5 rounded-lg pl-9 pr-3 text-xs focus:ring-1 focus:ring-white/20 outline-none transition-all placeholder:text-muted-foreground/50 hover:bg-white/[0.05]"
             />
          </div>
          <button className="flex items-center gap-2 px-3 py-2 rounded-lg border border-white/5 bg-white/[0.02] hover:bg-white/[0.05] text-xs font-medium text-muted-foreground hover:text-foreground transition-all">
            <Download className="w-3.5 h-3.5" />
            Export
          </button>
        </div>
      </div>

      {/* Metrics Row */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        {[
          { label: 'Total Agents', value: '24', change: '+2', trend: 'up' },
          { label: 'Active Now', value: '18', change: '+5', trend: 'up' },
          { label: 'Avg Network Load', value: '42%', change: '-12%', trend: 'down' },
          { label: 'System Uptime', value: '99.9%', change: '0%', trend: 'flat' }
        ].map((stat, i) => (
          <div key={i} className="group relative overflow-hidden bg-white/[0.02] border border-white/5 rounded-2xl p-5 hover:bg-white/[0.04] transition-all duration-300">
            <div className="absolute top-0 right-0 w-32 h-32 bg-white/[0.02] rounded-full blur-3xl -mr-16 -mt-16 pointer-events-none group-hover:bg-white/[0.05] transition-colors" />
            <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50 relative z-10">{stat.label}</span>
            <div className="flex items-end justify-between mt-3 relative z-10">
              <span className="text-3xl font-light tracking-tight font-mono text-foreground">{stat.value}</span>
              <span className={cn(
                "text-xs font-medium flex items-center gap-0.5 px-2 py-1 rounded-full border",
                stat.trend === 'up' ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500" : 
                stat.trend === 'down' ? "bg-amber-500/10 border-amber-500/20 text-amber-500" : 
                "bg-zinc-500/10 border-zinc-500/20 text-zinc-500"
              )}>
                {stat.change}
                {stat.trend === 'up' && <ArrowUpRight className="w-3 h-3" />}
              </span>
            </div>
          </div>
        ))}
      </div>

      {/* Glass Table */}
      <div className="rounded-2xl border border-white/5 overflow-hidden bg-white/[0.01] backdrop-blur-sm">
        {/* Table Header */}
        <div className="grid grid-cols-12 gap-4 px-6 py-4 border-b border-white/5 bg-white/[0.02] text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
          <div className="col-span-4 pl-2">Agent Name / ID</div>
          <div className="col-span-2">Type</div>
          <div className="col-span-2">Status</div>
          <div className="col-span-2">Load</div>
          <div className="col-span-1">Activity</div>
          <div className="col-span-1 text-right"></div>
        </div>

        {/* Table Body */}
        <div className="divide-y divide-white/5">
          {AGENTS.map((agent) => (
            <div 
              key={agent.id}
              className="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-white/[0.03] transition-colors group relative"
            >
              {/* Hover highlight line */}
              <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-primary opacity-0 group-hover:opacity-100 transition-opacity" />

              {/* Name & ID */}
              <div className="col-span-4 flex items-center gap-4 pl-2">
                <div className={cn(
                  "w-9 h-9 rounded-lg flex items-center justify-center border shrink-0 transition-all duration-300",
                  agent.type === 'Verification' ? "bg-blue-500/5 border-blue-500/10 text-blue-500 group-hover:border-blue-500/30 group-hover:shadow-[0_0_15px_-3px_rgba(59,130,246,0.2)]" :
                  agent.type === 'Payment' ? "bg-emerald-500/5 border-emerald-500/10 text-emerald-500 group-hover:border-emerald-500/30 group-hover:shadow-[0_0_15px_-3px_rgba(16,185,129,0.2)]" :
                  agent.type === 'Infrastructure' ? "bg-violet-500/5 border-violet-500/10 text-violet-500 group-hover:border-violet-500/30 group-hover:shadow-[0_0_15px_-3px_rgba(139,92,246,0.2)]" :
                  "bg-zinc-500/5 border-zinc-500/10 text-zinc-500 group-hover:border-zinc-500/30"
                )}>
                  {agent.type === 'Verification' ? <Shield className="w-4 h-4" /> :
                   agent.type === 'Payment' ? <CreditCard className="w-4 h-4" /> :
                   agent.type === 'Infrastructure' ? <Cpu className="w-4 h-4" /> :
                   <Zap className="w-4 h-4" />
                  }
                </div>
                <div className="min-w-0">
                  <div className="text-sm font-medium text-foreground truncate group-hover:text-white transition-colors">{agent.name}</div>
                  <div className="text-[11px] font-mono text-muted-foreground truncate opacity-50">{agent.id}</div>
                </div>
              </div>

              {/* Type */}
              <div className="col-span-2">
                <span className="text-xs text-muted-foreground bg-white/[0.03] px-2 py-1 rounded border border-white/5">{agent.type}</span>
              </div>

              {/* Status */}
              <div className="col-span-2">
                <div className="flex items-center gap-2">
                  <div className="relative">
                    <div className={cn(
                      "w-2 h-2 rounded-full relative z-10",
                      agent.status === 'active' ? "bg-emerald-500" :
                      agent.status === 'idle' ? "bg-amber-500" : "bg-red-500"
                    )} />
                    {agent.status === 'active' && (
                      <div className="absolute inset-0 bg-emerald-500 rounded-full animate-ping opacity-20" />
                    )}
                  </div>
                  <span className={cn(
                    "text-xs capitalize font-medium",
                    agent.status === 'active' ? "text-emerald-500" : "text-muted-foreground"
                  )}>{agent.status}</span>
                </div>
              </div>

              {/* Load */}
              <div className="col-span-2 pr-8">
                <div className="flex items-center gap-3">
                  <span className="text-xs font-mono w-8 text-right text-muted-foreground">{agent.load}%</span>
                  <div className="flex-1 h-1 bg-white/10 rounded-full overflow-hidden">
                    <div 
                      className={cn("h-full rounded-full transition-all duration-500", 
                        agent.load > 80 ? "bg-amber-500 shadow-[0_0_10px_rgba(245,158,11,0.5)]" : "bg-white shadow-[0_0_10px_rgba(255,255,255,0.3)]"
                      )} 
                      style={{ width: `${agent.load}%` }} 
                    />
                  </div>
                </div>
              </div>

              {/* Activity */}
              <div className="col-span-1">
                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                  <Clock className="w-3 h-3 opacity-50" />
                  <span>{agent.lastActive}</span>
                </div>
              </div>

              {/* Actions */}
              <div className="col-span-1 flex justify-end">
                <button className="p-2 hover:bg-white/10 rounded-lg text-muted-foreground hover:text-white transition-colors opacity-0 group-hover:opacity-100">
                  <MoreHorizontal className="w-4 h-4" />
                </button>
              </div>
            </div>
          ))}
        </div>
        
        {/* Pagination Footer */}
        <div className="px-6 py-4 border-t border-white/5 flex items-center justify-between">
           <span className="text-[10px] text-muted-foreground">Showing 1-8 of 24 agents</span>
           <div className="flex gap-2">
              <button className="px-3 py-1.5 rounded-md border border-white/5 bg-white/[0.02] text-xs hover:bg-white/[0.05] disabled:opacity-50 transition-colors">Previous</button>
              <button className="px-3 py-1.5 rounded-md border border-white/5 bg-white/[0.02] text-xs hover:bg-white/[0.05] transition-colors">Next</button>
           </div>
        </div>
      </div>
    </div>
  );
}
~~~

~~~/src/pages/Payments.tsx
import React from 'react';
import { 
  CreditCard, 
  ArrowUpRight, 
  ArrowDownLeft, 
  MoreHorizontal,
  Wallet,
  Plus,
  DollarSign,
  Briefcase
} from 'lucide-react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: any[]) {
  return twMerge(clsx(inputs));
}

const TRANSACTIONS = [
  { id: 'tx_9921', agent: 'Payment Streamer V2', desc: 'AWS Infrastructure', amount: '-$240.00', date: 'Today, 10:42 AM', status: 'completed' },
  { id: 'tx_9920', agent: 'Oracle Verifier Alpha', desc: 'Gas Fees (ETH)', amount: '-$12.50', date: 'Today, 09:15 AM', status: 'completed' },
  { id: 'tx_9919', agent: 'Treasury Manager', desc: 'Yield Harvest', amount: '+$1,240.50', date: 'Yesterday', status: 'completed' },
  { id: 'tx_9918', agent: 'Payment Streamer V2', desc: 'API Credits (OpenAI)', amount: '-$50.00', date: 'Yesterday', status: 'completed' },
  { id: 'tx_9917', agent: 'Social Poster Bot', desc: 'Premium Subscription', amount: '-$29.00', date: 'Oct 24', status: 'pending' },
];

export default function PaymentsPage() {
  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
      <div className="flex items-end justify-between border-b border-white/5 pb-6">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-foreground font-display">Treasury & Payments</h1>
          <p className="text-muted-foreground mt-2 text-sm max-w-2xl leading-relaxed">
            Manage autonomous spending limits, funding sources, and real-time transaction history.
          </p>
        </div>
        
        <div className="flex gap-3">
          <button className="h-10 px-5 bg-white/[0.05] border border-white/10 hover:bg-white/[0.1] text-foreground rounded-full font-medium text-xs transition-all flex items-center gap-2">
            <Wallet className="w-3.5 h-3.5 text-muted-foreground" />
            <span>Connect Wallet</span>
          </button>
          <button className="h-10 px-5 bg-white text-black hover:bg-zinc-200 rounded-full font-semibold text-xs transition-all flex items-center gap-2 shadow-[0_0_20px_rgba(255,255,255,0.1)]">
            <Plus className="w-3.5 h-3.5" />
            <span>Add Funds</span>
          </button>
        </div>
      </div>

      {/* Cards Row */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         {/* Main Glass Card */}
         <div className="col-span-1 md:col-span-1 bg-gradient-to-br from-zinc-900 via-black to-zinc-900 border border-white/10 p-6 rounded-2xl shadow-2xl relative overflow-hidden group">
            {/* Glass shine effect */}
            <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-white/10 to-transparent opacity-50 pointer-events-none" />
            <div className="absolute -top-24 -right-24 w-48 h-48 bg-white/5 rounded-full blur-3xl pointer-events-none" />
            
            <div className="relative z-10 flex flex-col justify-between h-[200px]">
              <div className="flex justify-between items-start">
                 <div className="w-10 h-6 bg-white/20 rounded-md backdrop-blur-md" />
                 <Briefcase className="w-5 h-5 text-white/50" />
              </div>
              
              <div>
                 <div className="text-zinc-400 text-[10px] font-bold uppercase tracking-widest mb-1">Main Treasury Balance</div>
                 <div className="text-3xl font-mono font-medium tracking-tight text-white mb-6">$12,402.50</div>
                 <div className="flex items-center justify-between text-xs font-mono text-zinc-500">
                    <span>**** 4291</span>
                    <span>EXP 12/28</span>
                 </div>
              </div>
            </div>
         </div>

         {/* Stats Cards */}
         <div className="md:col-span-2 grid grid-cols-2 gap-6">
             <div className="bg-white/[0.02] border border-white/5 p-6 rounded-2xl flex flex-col justify-between hover:bg-white/[0.04] transition-colors">
                <div>
                   <div className="text-muted-foreground text-[10px] font-bold uppercase tracking-widest mb-3">Monthly Spend Limit</div>
                   <div className="text-3xl font-light text-foreground">$5,000.00</div>
                </div>
                <div className="mt-6">
                  <div className="flex items-center justify-between text-xs mb-2">
                    <span className="text-muted-foreground">Used this month</span>
                    <span className="font-mono text-white">64%</span>
                  </div>
                  <div className="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
                    <div className="h-full bg-white w-[64%] shadow-[0_0_10px_rgba(255,255,255,0.3)]" />
                  </div>
                </div>
             </div>

             <div className="bg-white/[0.02] border border-white/5 p-6 rounded-2xl flex flex-col justify-between hover:bg-white/[0.04] transition-colors">
                <div>
                   <div className="text-muted-foreground text-[10px] font-bold uppercase tracking-widest mb-3">Active Virtual Cards</div>
                   <div className="text-3xl font-light text-foreground">12</div>
                </div>
                <div className="flex -space-x-3 mt-6">
                   {[1,2,3,4].map(i => (
                     <div key={i} className="w-8 h-8 rounded-full border-2 border-black bg-zinc-800 flex items-center justify-center text-[10px] font-mono text-zinc-300 shadow-lg">
                       {i}
                     </div>
                   ))}
                   <div className="w-8 h-8 rounded-full border-2 border-black bg-white text-black flex items-center justify-center text-[10px] font-bold shadow-lg">
                     +8
                   </div>
                </div>
             </div>
         </div>
      </div>

      {/* Transactions List */}
      <div className="space-y-4">
         <div className="flex items-center justify-between px-1">
            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Recent Transactions</h3>
            <button className="text-xs text-primary hover:text-white transition-colors">View All</button>
         </div>
         <div className="border border-white/5 rounded-2xl overflow-hidden bg-white/[0.01] backdrop-blur-sm">
            <div className="divide-y divide-white/5">
              {TRANSACTIONS.map((tx) => (
                <div key={tx.id} className="flex items-center justify-between p-5 hover:bg-white/[0.03] transition-colors group">
                   <div className="flex items-center gap-5">
                      <div className={cn(
                        "w-10 h-10 rounded-full flex items-center justify-center border transition-all duration-300",
                        tx.amount.startsWith('+') 
                          ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500 group-hover:border-emerald-500/40 group-hover:shadow-[0_0_10px_rgba(16,185,129,0.2)]" 
                          : "bg-white/[0.03] border-white/10 text-zinc-400 group-hover:border-white/20"
                      )}>
                        {tx.amount.startsWith('+') ? <ArrowDownLeft className="w-5 h-5" /> : <ArrowUpRight className="w-5 h-5" />}
                      </div>
                      <div>
                        <div className="text-sm font-medium text-foreground group-hover:text-white transition-colors">{tx.desc}</div>
                        <div className="text-xs text-muted-foreground mt-0.5">{tx.agent} • {tx.date}</div>
                      </div>
                   </div>

                   <div className="flex items-center gap-8">
                      <div className={cn(
                        "text-sm font-mono font-medium",
                        tx.amount.startsWith('+') ? "text-emerald-500" : "text-zinc-300"
                      )}>
                        {tx.amount}
                      </div>
                      <div className="w-24 text-right hidden sm:block">
                        <span className={cn(
                          "text-[10px] px-2 py-1 rounded-full border",
                          tx.status === 'completed' 
                            ? "bg-white/[0.05] border-white/10 text-muted-foreground" 
                            : "bg-amber-500/10 border-amber-500/20 text-amber-500"
                        )}>
                          {tx.status}
                        </span>
                      </div>
                      <button className="p-2 hover:bg-white/10 rounded-lg text-muted-foreground hover:text-white transition-colors opacity-0 group-hover:opacity-100">
                        <MoreHorizontal className="w-4 h-4" />
                      </button>
                   </div>
                </div>
              ))}
            </div>
         </div>
      </div>
    </div>
  );
}
~~~

~~~/src/pages/Settings.tsx
import React from 'react';
import { 
  Settings, 
  User, 
  Lock, 
  Bell, 
  Globe, 
  Shield, 
  Key,
  ToggleRight,
  ToggleLeft
} from 'lucide-react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: any[]) {
  return twMerge(clsx(inputs));
}

const SECTIONS = [
  {
    id: 'general',
    title: 'General Settings',
    description: 'Manage your workspace profile and preferences.',
    icon: Globe,
    items: [
      { label: 'Workspace Name', type: 'input', value: 'Alpha Protocols Inc.' },
      { label: 'Timezone', type: 'select', value: 'UTC (Universal Time Coordinated)' },
    ]
  },
  {
    id: 'security',
    title: 'Security & Access',
    description: 'Configure 2FA, IP allowlists, and API access.',
    icon: Shield,
    items: [
      { label: 'Two-Factor Authentication', type: 'toggle', value: true, desc: 'Require 2FA for all admin actions' },
      { label: 'IP Whitelist', type: 'toggle', value: false, desc: 'Restrict access to specific IP addresses' },
    ]
  },
  {
    id: 'api',
    title: 'API Configuration',
    description: 'Manage API keys and rate limits.',
    icon: Key,
    items: [
      { label: 'Production API Key', type: 'secret', value: 'sk_live_...9x2A' },
      { label: 'Rate Limit Strategy', type: 'select', value: 'Fixed Window' },
    ]
  }
];

export default function SettingsPage() {
  return (
    <div className="max-w-5xl space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100 pb-20">
      <div className="border-b border-white/5 pb-6">
        <h1 className="text-3xl font-semibold tracking-tight text-foreground font-display">Settings</h1>
        <p className="text-muted-foreground mt-2 text-sm max-w-2xl leading-relaxed">
          Manage workspace configuration, security protocols, and developer API access.
        </p>
      </div>

      <div className="space-y-12">
        {SECTIONS.map((section) => (
          <div key={section.id} className="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-16">
            <div className="md:col-span-4 space-y-2">
               <h3 className="font-medium text-foreground flex items-center gap-2">
                 <div className="p-1.5 rounded-md bg-white/5 border border-white/10">
                    <section.icon className="w-4 h-4 text-zinc-300" />
                 </div>
                 {section.title}
               </h3>
               <p className="text-sm text-muted-foreground leading-relaxed pl-9">
                 {section.description}
               </p>
            </div>

            <div className="md:col-span-8">
              <div className="bg-white/[0.02] border border-white/5 rounded-2xl p-6 backdrop-blur-sm space-y-6 hover:bg-white/[0.03] transition-colors">
                 {section.items.map((item, i) => (
                   <div key={i} className="flex flex-col gap-2 group">
                     <div className="flex items-center justify-between">
                       <label className="text-sm font-medium text-zinc-300 group-hover:text-white transition-colors">{item.label}</label>
                       {item.type === 'toggle' && (
                         <button className={cn("transition-all hover:scale-105", item.value ? "text-emerald-500" : "text-zinc-600")}>
                           {item.value ? <ToggleRight className="w-8 h-8" /> : <ToggleLeft className="w-8 h-8" />}
                         </button>
                       )}
                     </div>
                     
                     {item.desc && (
                       <p className="text-xs text-muted-foreground/70">{item.desc}</p>
                     )}

                     {item.type === 'input' && (
                       <input 
                         type="text" 
                         defaultValue={item.value as string}
                         className="h-10 w-full bg-black/40 border border-white/10 rounded-lg px-3 text-sm focus:ring-1 focus:ring-white/20 outline-none transition-all hover:border-white/20 focus:bg-black/60"
                       />
                     )}

                     {item.type === 'select' && (
                       <select className="h-10 w-full bg-black/40 border border-white/10 rounded-lg px-3 text-sm focus:ring-1 focus:ring-white/20 outline-none transition-all text-zinc-300 appearance-none hover:border-white/20 cursor-pointer">
                         <option>{item.value}</option>
                       </select>
                     )}
                     
                     {item.type === 'secret' && (
                       <div className="flex gap-2">
                         <input 
                           type="text" 
                           defaultValue={item.value as string}
                           className="h-10 w-full bg-black/40 border border-white/10 rounded-lg px-3 text-sm focus:ring-1 focus:ring-white/20 outline-none transition-all font-mono text-zinc-400"
                           readOnly
                         />
                         <button className="h-10 px-4 border border-white/10 rounded-lg text-xs font-medium hover:bg-white/5 transition-colors text-zinc-300">
                           Roll
                         </button>
                       </div>
                     )}
                   </div>
                 ))}
                 
                 <div className="pt-6 border-t border-white/5 flex justify-end">
                   <button className="px-4 py-2 bg-white text-black text-xs font-semibold rounded-lg hover:bg-zinc-200 transition-all shadow-lg shadow-white/5">
                     Save Changes
                   </button>
                 </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
~~~

~~~/src/pages/Webhooks.tsx
import React from 'react';
import { 
  Webhook, 
  Activity, 
  CheckCircle2, 
  XCircle,
  Clock,
  MoreHorizontal,
  Plus,
  RefreshCw,
  AlertCircle,
  ArrowRight
} from 'lucide-react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: any[]) {
  return twMerge(clsx(inputs));
}

const WEBHOOKS = [
  { id: 'wh_slack_notif', name: 'Slack Alerts', url: 'https://hooks.slack.com/services/T000...', events: ['agent.error', 'payment.failed'], status: 'active', successRate: 99.8, lastDelivery: '2m ago' },
  { id: 'wh_discord_log', name: 'Discord Logger', url: 'https://discord.com/api/webhooks/...', events: ['*'], status: 'active', successRate: 100, lastDelivery: '5s ago' },
  { id: 'wh_custom_api', name: 'Internal Analytics', url: 'https://api.internal.corp/events', events: ['delegation.created'], status: 'failing', successRate: 45.2, lastDelivery: '1h ago' },
  { id: 'wh_zapier', name: 'Zapier Automation', url: 'https://hooks.zapier.com/hooks/...', events: ['gate.triggered'], status: 'active', successRate: 98.5, lastDelivery: '12m ago' },
];

export default function WebhooksPage() {
  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
      <div className="flex items-end justify-between border-b border-white/5 pb-6">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-foreground font-display">Webhook Integrations</h1>
          <p className="text-muted-foreground mt-2 text-sm max-w-2xl leading-relaxed">
            Configure event listeners and connect your agent fleet to external services.
          </p>
        </div>
        
        <button className="h-10 px-5 bg-white text-black hover:bg-zinc-200 rounded-full font-semibold text-xs transition-all flex items-center gap-2 shadow-[0_0_20px_rgba(255,255,255,0.1)] group">
          <Plus className="w-3.5 h-3.5" />
          <span>New Webhook</span>
        </button>
      </div>

      <div className="border border-white/5 rounded-2xl overflow-hidden bg-white/[0.01] backdrop-blur-sm">
        <div className="grid grid-cols-12 gap-4 px-6 py-4 border-b border-white/5 bg-white/[0.02] text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
          <div className="col-span-4 pl-2">Endpoint</div>
          <div className="col-span-3">Subscribed Events</div>
          <div className="col-span-2">Health</div>
          <div className="col-span-2">Last Delivery</div>
          <div className="col-span-1 text-right"></div>
        </div>

        <div className="divide-y divide-white/5">
          {WEBHOOKS.map((hook) => (
            <div 
              key={hook.id}
              className="grid grid-cols-12 gap-4 px-6 py-5 items-center hover:bg-white/[0.03] transition-colors group"
            >
              {/* Endpoint */}
              <div className="col-span-4 pl-2">
                 <div className="flex items-center gap-4">
                   <div className={cn(
                     "w-10 h-10 rounded-xl flex items-center justify-center border shrink-0 transition-all duration-300",
                     hook.status === 'failing' 
                       ? "bg-red-500/10 border-red-500/20 text-red-500" 
                       : "bg-white/[0.03] border-white/5 text-muted-foreground group-hover:border-white/10 group-hover:text-white"
                   )}>
                     <Webhook className="w-5 h-5" />
                   </div>
                   <div className="min-w-0">
                     <div className="flex items-center gap-2">
                       <span className="text-sm font-medium text-foreground truncate group-hover:text-white transition-colors">{hook.name}</span>
                       {hook.status === 'failing' && (
                         <div className="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse" />
                       )}
                     </div>
                     <div className="text-[11px] font-mono text-muted-foreground truncate opacity-50">{hook.url}</div>
                   </div>
                 </div>
              </div>

              {/* Events */}
              <div className="col-span-3">
                <div className="flex flex-wrap gap-1.5">
                  {hook.events.map(event => (
                    <span key={event} className="inline-flex items-center px-2 py-0.5 rounded border border-white/5 bg-white/[0.02] text-[10px] text-zinc-400 font-mono">
                      {event}
                    </span>
                  ))}
                </div>
              </div>

              {/* Success Rate */}
              <div className="col-span-2">
                 <div className="flex items-center gap-3">
                   <div className={cn(
                     "text-sm font-mono font-medium",
                     hook.successRate > 98 ? "text-emerald-500" : hook.successRate > 90 ? "text-amber-500" : "text-red-500"
                   )}>
                     {hook.successRate}%
                   </div>
                   <div className="h-1 flex-1 bg-white/10 rounded-full overflow-hidden max-w-[80px]">
                     <div 
                       className={cn("h-full rounded-full",
                         hook.successRate > 98 ? "bg-emerald-500" : hook.successRate > 90 ? "bg-amber-500" : "bg-red-500"
                       )}
                       style={{ width: `${hook.successRate}%` }}
                     />
                   </div>
                 </div>
              </div>

              {/* Last Delivery */}
              <div className="col-span-2">
                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                  <Clock className="w-3 h-3 opacity-50" />
                  <span>{hook.lastDelivery}</span>
                </div>
              </div>

              {/* Actions */}
              <div className="col-span-1 flex justify-end">
                <button className="p-2 hover:bg-white/10 rounded-lg text-muted-foreground hover:text-white transition-colors opacity-0 group-hover:opacity-100">
                  <MoreHorizontal className="w-4 h-4" />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
      
      {/* Logs Preview */}
      <div className="pt-6">
        <div className="flex items-center justify-between mb-4 px-1">
          <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Live Logs</h3>
          <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
             <span className="relative flex h-2 w-2">
               <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
               <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
             </span>
             Streaming
          </div>
        </div>
        <div className="bg-[#0A0A0A] border border-white/5 rounded-xl p-5 font-mono text-xs text-muted-foreground shadow-inner">
           <div className="flex gap-4 border-b border-white/5 pb-2 mb-2 hover:bg-white/[0.02] transition-colors p-1 rounded">
              <span className="w-24 opacity-50">10:42:01.402</span>
              <span className="w-16 text-emerald-500">200 OK</span>
              <span className="text-zinc-300">POST /webhook/slack</span>
              <span className="opacity-30 ml-auto">52ms</span>
           </div>
           <div className="flex gap-4 border-b border-white/5 pb-2 mb-2 hover:bg-white/[0.02] transition-colors p-1 rounded">
              <span className="w-24 opacity-50">10:41:55.201</span>
              <span className="w-16 text-emerald-500">200 OK</span>
              <span className="text-zinc-300">POST /webhook/discord</span>
              <span className="opacity-30 ml-auto">42ms</span>
           </div>
           <div className="flex gap-4 border-b border-white/5 pb-2 mb-2 hover:bg-white/[0.02] transition-colors p-1 rounded">
              <span className="w-24 opacity-50">10:38:12.890</span>
              <span className="w-16 text-red-500">500 ERR</span>
              <span className="text-zinc-300">POST /webhook/internal</span>
              <span className="opacity-30 ml-auto">1204ms</span>
           </div>
           <div className="flex gap-4 opacity-30 p-1">
              <span>...</span>
           </div>
        </div>
      </div>
    </div>
  );
}
~~~

~~~/src/pages/Delegations.tsx
import React from 'react';
import { 
  ShieldCheck, 
  Wallet, 
  Webhook, 
  Globe, 
  CheckCircle2, 
  XCircle,
  MoreHorizontal,
  ArrowRight,
  Filter,
  Plus
} from 'lucide-react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: any[]) {
  return twMerge(clsx(inputs));
}

const DELEGATIONS = [
  { 
    id: 'del_x402_alpha', 
    name: 'Premium Content Access', 
    type: 'x402', 
    target: 'Content Node A', 
    status: 'active',
    policy: 'Payment Required (0.05 ETH)',
    lastTriggered: '10m ago',
    allowance: 'Unlimited'
  },
  { 
    id: 'del_pay_beta', 
    name: 'Auto-Renewal Subscription', 
    type: 'Payment', 
    target: 'Subscription Agent', 
    status: 'active',
    policy: 'Monthly Cap',
    lastTriggered: '1d ago',
    allowance: '100 USDC'
  },
  { 
    id: 'del_hook_gamma', 
    name: 'Slack Notification Sync', 
    type: 'Webhook', 
    target: 'Notification Bot', 
    status: 'paused',
    policy: 'Event Trigger',
    lastTriggered: '5h ago',
    allowance: 'N/A'
  },
  { 
    id: 'del_soc_delta', 
    name: 'Twitter Auto-Post', 
    type: 'Posting', 
    target: 'Social Manager', 
    status: 'active',
    policy: 'Rate Limit',
    lastTriggered: '12m ago',
    allowance: '5 posts/hr'
  },
];

export default function DelegationsPage() {
  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-white/5 pb-6">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-foreground font-display">Delegation Controls</h1>
          <p className="text-muted-foreground mt-2 text-sm max-w-2xl leading-relaxed">
            Manage permissions, automated allowances, and cross-agent policies.
          </p>
        </div>
        
        <button className="h-10 px-5 bg-white text-black hover:bg-zinc-200 rounded-full font-semibold text-xs transition-all flex items-center gap-2 shadow-[0_0_20px_rgba(255,255,255,0.1)] group">
          <span>New Delegation</span>
          <ArrowRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-1" />
        </button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {DELEGATIONS.map((delegation) => (
          <div 
            key={delegation.id}
            className="group relative bg-white/[0.02] border border-white/5 hover:border-white/10 rounded-2xl p-6 transition-all duration-300 hover:bg-white/[0.04]"
          >
            {/* Status light */}
            <div className={cn(
              "absolute top-6 right-6 w-2 h-2 rounded-full",
              delegation.status === 'active' 
                ? "bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" 
                : "bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]"
            )} />

            <div className="flex items-start gap-4 mb-6">
               <div className={cn(
                  "w-12 h-12 rounded-xl flex items-center justify-center shrink-0 border backdrop-blur-md transition-colors duration-300",
                  delegation.type === 'x402' ? "bg-indigo-500/10 border-indigo-500/20 text-indigo-400 group-hover:bg-indigo-500/20" :
                  delegation.type === 'Payment' ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400 group-hover:bg-emerald-500/20" :
                  delegation.type === 'Webhook' ? "bg-pink-500/10 border-pink-500/20 text-pink-400 group-hover:bg-pink-500/20" :
                  "bg-blue-500/10 border-blue-500/20 text-blue-400 group-hover:bg-blue-500/20"
                )}>
                  {delegation.type === 'x402' && <ShieldCheck className="w-6 h-6" />}
                  {delegation.type === 'Payment' && <Wallet className="w-6 h-6" />}
                  {delegation.type === 'Webhook' && <Webhook className="w-6 h-6" />}
                  {delegation.type === 'Posting' && <Globe className="w-6 h-6" />}
                </div>
                <div>
                   <h3 className="text-lg font-medium text-foreground group-hover:text-white transition-colors">{delegation.name}</h3>
                   <div className="flex items-center gap-2 mt-1">
                      <span className="text-xs text-muted-foreground">ID: <span className="font-mono opacity-70">{delegation.id}</span></span>
                      <span className="w-1 h-1 bg-white/20 rounded-full" />
                      <span className="text-xs text-muted-foreground">{delegation.type}</span>
                   </div>
                </div>
            </div>

            <div className="grid grid-cols-2 gap-4 bg-black/20 rounded-xl p-4 border border-white/5">
               <div>
                  <div className="text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold mb-1">Target</div>
                  <div className="text-sm font-medium text-zinc-200">{delegation.target}</div>
               </div>
               <div>
                  <div className="text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold mb-1">Allowance</div>
                  <div className="text-sm font-medium text-zinc-200">{delegation.allowance}</div>
               </div>
               <div className="col-span-2 pt-2 border-t border-white/5">
                  <div className="text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold mb-1">Policy Rule</div>
                  <div className="flex items-center justify-between">
                     <code className="text-xs font-mono text-primary/80 bg-primary/5 px-2 py-1 rounded border border-primary/10">
                       {delegation.policy}
                     </code>
                     <span className="text-[10px] text-muted-foreground">Run {delegation.lastTriggered}</span>
                  </div>
               </div>
            </div>
            
            <div className="mt-4 flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0 duration-300">
               <button className="text-xs font-medium text-muted-foreground hover:text-white px-3 py-1.5 rounded-lg hover:bg-white/5 transition-colors">Edit Policy</button>
               <button className="text-xs font-medium text-red-400 hover:text-red-300 px-3 py-1.5 rounded-lg hover:bg-red-500/10 transition-colors">Revoke</button>
            </div>
          </div>
        ))}

        <button className="group relative bg-white/[0.01] border border-dashed border-white/10 hover:border-white/20 rounded-2xl p-6 transition-all duration-300 hover:bg-white/[0.02] flex flex-col items-center justify-center min-h-[280px] gap-3">
           <div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
             <Plus className="w-5 h-5 text-muted-foreground group-hover:text-white" />
           </div>
           <span className="text-sm font-medium text-muted-foreground group-hover:text-foreground">Create Delegation</span>
        </button>
      </div>
    </div>
  );
}
~~~

Implementation Guidelines

1. Analyze the component structure, styling, animation implementations
2. Review the component's arguments and state
3. Think through what is the best place to adopt this component/style into the design we are doing
4. Then adopt the component/design to our current system

Help me integrate this into my design