AI Assistant
c7f037c58a
- Dashboard Overview with real-time status display - Live Log Viewer (scrollable, filterable) - Config Editor with JSON syntax highlighting - Model Switcher for provider management - Provider Manager for API key configuration - Quick Actions for common tasks - API Routes: status, logs, config, actions, models, providers Tech Stack: - Next.js 14 (App Router) - TypeScript - Tailwind CSS - shadcn/ui components - CodeMirror for JSON editing - Docker support with docker-compose
100 lines
4.1 KiB
TypeScript
100 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { DashboardOverview } from '@/components/DashboardOverview';
|
|
import { ConfigEditor } from '@/components/ConfigEditor';
|
|
import { LogViewer } from '@/components/LogViewer';
|
|
import { ProviderManager } from '@/components/ProviderManager';
|
|
import { ModelSwitcher } from '@/components/ModelSwitcher';
|
|
import { QuickActions } from '@/components/QuickActions';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Activity, Settings, Terminal, Key, Cpu, Zap } from 'lucide-react';
|
|
|
|
type TabValue = 'dashboard' | 'config' | 'logs' | 'providers' | 'models' | 'actions';
|
|
|
|
export default function Home() {
|
|
const [activeTab, setActiveTab] = useState<TabValue>('dashboard');
|
|
|
|
return (
|
|
<main className="min-h-screen bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950 text-zinc-100">
|
|
<div className="container mx-auto px-4 py-8 max-w-7xl">
|
|
{/* Header */}
|
|
<header className="mb-8 flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-4xl font-bold bg-gradient-to-r from-orange-400 to-cyan-400 bg-clip-text text-transparent">
|
|
OpenClaw Dashboard
|
|
</h1>
|
|
<p className="text-zinc-400 mt-1">Manage your AI infrastructure</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-sm text-zinc-500">Status</div>
|
|
<div className="flex items-center gap-2 text-green-400">
|
|
<span className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
|
|
<span>Live</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TabValue)} className="w-full">
|
|
<TabsList className="grid w-full grid-cols-3 lg:grid-cols-6 bg-zinc-900/50 border border-zinc-800">
|
|
<TabsTrigger value="dashboard" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
|
|
<Activity className="w-4 h-4 mr-2" />
|
|
Dashboard
|
|
</TabsTrigger>
|
|
<TabsTrigger value="config" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
|
|
<Settings className="w-4 h-4 mr-2" />
|
|
Config
|
|
</TabsTrigger>
|
|
<TabsTrigger value="logs" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
|
|
<Terminal className="w-4 h-4 mr-2" />
|
|
Logs
|
|
</TabsTrigger>
|
|
<TabsTrigger value="providers" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
|
|
<Key className="w-4 h-4 mr-2" />
|
|
Providers
|
|
</TabsTrigger>
|
|
<TabsTrigger value="models" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
|
|
<Cpu className="w-4 h-4 mr-2" />
|
|
Models
|
|
</TabsTrigger>
|
|
<TabsTrigger value="actions" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
|
|
<Zap className="w-4 h-4 mr-2" />
|
|
Actions
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="dashboard" className="mt-6">
|
|
<DashboardOverview />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="config" className="mt-6">
|
|
<ConfigEditor />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="logs" className="mt-6">
|
|
<LogViewer />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="providers" className="mt-6">
|
|
<ProviderManager />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="models" className="mt-6">
|
|
<ModelSwitcher />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="actions" className="mt-6">
|
|
<QuickActions />
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
{/* Footer */}
|
|
<footer className="mt-12 text-center text-zinc-600 text-sm">
|
|
<p>OpenClaw Dashboard • Self-hosted AI Management</p>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|