openclaw-dashboard/components/DashboardOverview.tsx

'use client';

import { useEffect, useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { RefreshCw, Activity, Cpu, Clock, Zap } from 'lucide-react';

interface SystemStatus {
  gateway: {
    running: boolean;
    pid?: number;
    port?: number;
    uptime?: number;
    mode?: string;
  };
  activeModel: string | null;
  instanceCount: number;
  uptime: number;
}

export function DashboardOverview() {
  const [status, setStatus] = useState<SystemStatus | null>(null);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

  const fetchStatus = async () => {
    try {
      const response = await fetch('/api/status');
      const data = await response.json();
      setStatus(data);
    } catch (error) {
      console.error('Failed to fetch status:', error);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  useEffect(() => {
    fetchStatus();
    const interval = setInterval(fetchStatus, 5000); // Refresh every 5s
    return () => clearInterval(interval);
  }, []);

  const handleRefresh = () => {
    setRefreshing(true);
    fetchStatus();
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <RefreshCw className="w-8 h-8 animate-spin text-orange-400" />
      </div>
    );
  }

  const formatUptime = (seconds: number) => {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    return `${h}h ${m}m`;
  };

  return (
    <div className="space-y-6">
      {/* Header Actions */}
      <div className="flex justify-end">
        <Button
          variant="outline"
          size="sm"
          onClick={handleRefresh}
          disabled={refreshing}
          className="border-zinc-700 hover:bg-zinc-800"
        >
          <RefreshCw className={`w-4 h-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
          Refresh
        </Button>
      </div>

      {/* Status Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="bg-zinc-900/50 border-zinc-800 hover:border-zinc-700 transition-colors">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-zinc-400 flex items-center gap-2">
              <Activity className="w-4 h-4" />
              Gateway Status
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <span className={`w-3 h-3 rounded-full ${status?.gateway.running ? 'bg-green-500' : 'bg-red-500'}`} />
              <span className="text-2xl font-bold">
                {status?.gateway.running ? 'Online' : 'Offline'}
              </span>
            </div>
            {status?.gateway.port && (
              <p className="text-sm text-zinc-500 mt-1">Port: {status.gateway.port}</p>
            )}
          </CardContent>
        </Card>

        <Card className="bg-zinc-900/50 border-zinc-800 hover:border-zinc-700 transition-colors">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-zinc-400 flex items-center gap-2">
              <Cpu className="w-4 h-4" />
              Active Model
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-lg font-semibold truncate" title={status?.activeModel || 'None'}>
              {status?.activeModel || 'None'}
            </p>
            <Badge variant="outline" className="mt-2 border-zinc-700">
              {status?.activeModel ? 'Configured' : 'Not set'}
            </Badge>
          </CardContent>
        </Card>

        <Card className="bg-zinc-900/50 border-zinc-800 hover:border-zinc-700 transition-colors">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-zinc-400 flex items-center gap-2">
              <Zap className="w-4 h-4" />
              Instances
            </CardTitle>
          </CardHeader>
          <CardContent>
            <span className="text-2xl font-bold">{status?.instanceCount || 0}</span>
            <p className="text-sm text-zinc-500 mt-1">Active instances</p>
          </CardContent>
        </Card>

        <Card className="bg-zinc-900/50 border-zinc-800 hover:border-zinc-700 transition-colors">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-zinc-400 flex items-center gap-2">
              <Clock className="w-4 h-4" />
              System Uptime
            </CardTitle>
          </CardHeader>
          <CardContent>
            <span className="text-2xl font-bold">
              {status?.uptime ? formatUptime(status.uptime) : '--'}
            </span>
            <p className="text-sm text-zinc-500 mt-1">Since restart</p>
          </CardContent>
        </Card>
      </div>

      {/* Gateway Details */}
      <Card className="bg-zinc-900/50 border-zinc-800">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="w-5 h-5" />
            Gateway Details
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <p className="text-sm text-zinc-400">Status</p>
              <p className="font-semibold">{status?.gateway.running ? 'Running' : 'Stopped'}</p>
            </div>
            <div>
              <p className="text-sm text-zinc-400">Mode</p>
              <p className="font-semibold">{status?.gateway.mode || 'N/A'}</p>
            </div>
            <div>
              <p className="text-sm text-zinc-400">PID</p>
              <p className="font-semibold">{status?.gateway.pid || 'N/A'}</p>
            </div>
            <div>
              <p className="text-sm text-zinc-400">Port</p>
              <p className="font-semibold">{status?.gateway.port || 'N/A'}</p>
            </div>
            {status?.gateway.uptime && (
              <div>
                <p className="text-sm text-zinc-400">Gateway Uptime</p>
                <p className="font-semibold">{formatUptime(status.gateway.uptime)}</p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Quick Actions Preview */}
      <Card className="bg-gradient-to-r from-orange-500/10 to-cyan-500/10 border-orange-500/20">
        <CardHeader>
          <CardTitle>Quick Access</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-2">
            <Button
              variant="outline"
              size="sm"
              className="border-zinc-700 hover:bg-zinc-800"
              onClick={() => document.querySelector('[value="config"]')?.dispatchEvent(new MouseEvent('click'))}
            >
              Edit Config
            </Button>
            <Button
              variant="outline"
              size="sm"
              className="border-zinc-700 hover:bg-zinc-800"
              onClick={() => document.querySelector('[value="logs"]')?.dispatchEvent(new MouseEvent('click'))}
            >
              View Logs
            </Button>
            <Button
              variant="outline"
              size="sm"
              className="border-zinc-700 hover:bg-zinc-800"
              onClick={() => document.querySelector('[value="models"]')?.dispatchEvent(new MouseEvent('click'))}
            >
              Switch Model
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}