+
+
)
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
deleted file mode 100644
index 74335b8..0000000
--- a/frontend/src/api.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-const API_BASE = ''
-
-async function api
+
+ )
+}
diff --git a/frontend/src/components/agents/AgentGrid.tsx b/frontend/src/components/agents/AgentGrid.tsx
new file mode 100644
index 0000000..7829a07
--- /dev/null
+++ b/frontend/src/components/agents/AgentGrid.tsx
@@ -0,0 +1,62 @@
+import { motion } from 'framer-motion'
+import { Cpu, Activity, Clock } from 'lucide-react'
+import { useQuery } from '@tanstack/react-query'
+
+interface Agent {
+ id: string
+ model: string
+ healthy: boolean
+ activeRuns: number
+ totalTokens: number
+}
+
+async function fetchAgents(): PromiseRecent Activity
+
+ {events.map((event, i) => (
+
+
+
+ ))}
+ Loading agents...
+
+ return (
+
+
+ )
+}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..4f7b6cf
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,51 @@
+import { cn } from '@/lib/utils'
+import { Home, Users, FolderOpen, Zap, Settings, Activity } from 'lucide-react'
+
+const menuItems = [
+ { icon: Home, label: 'Dashboard', active: true },
+ { icon: Users, label: 'Agents' },
+ { icon: FolderOpen, label: 'Projects' },
+ { icon: Zap, label: 'Tasks' },
+ { icon: Activity, label: 'Activity' },
+ { icon: Settings, label: 'Settings' },
+]
+
+export function Sidebar() {
+ return (
+ Live Agents
+
+ {agents?.map((agent) => (
+
+
+ ))}
+
+
+
+
+
+
+ {agent.id.replace('worker-', '')}
+{agent.model}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/components/tasks/Kanban.tsx b/frontend/src/components/tasks/Kanban.tsx
new file mode 100644
index 0000000..c33d201
--- /dev/null
+++ b/frontend/src/components/tasks/Kanban.tsx
@@ -0,0 +1,40 @@
+import { CheckCircle2, Circle, Plus } from 'lucide-react'
+import { useState } from 'react'
+
+interface Task { id: string; title: string; done: boolean; project: string }
+
+export function Kanban() {
+ const [tasks] = useState
+
+
+
+
+
+
+
+ ACC
+
+
+
+ Control Center
+ v0.2.0
+
+ ● Connected · 4 Agents
+
+
+
+ )
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 43e0a37..d1f4e1f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,167 +1,26 @@
-:root {
- --bg: #0b0d12;
- --surface: #151821;
- --surface-2: #1d212b;
- --text: #e6e8ef;
- --muted: #8e95a8;
- --accent: #3b82f6;
- --accent-2: #22c55e;
- --danger: #ef4444;
- --warn: #f59e0b;
- --radius: 8px;
+@import "tailwindcss";
+
+@theme {
+ --color-border: hsl(240 3.7% 15.9%);
+ --color-input: hsl(240 3.7% 15.9%);
+ --color-ring: hsl(240 4.9% 83.9%);
+ --color-background: hsl(240 10% 3.9%);
+ --color-foreground: hsl(0 0% 98%);
+ --color-primary: hsl(226 70% 55%);
+ --color-primary-foreground: hsl(0 0% 98%);
+ --color-secondary: hsl(240 3.7% 15.9%);
+ --color-secondary-foreground: hsl(0 0% 98%);
+ --color-muted: hsl(240 3.7% 15.9%);
+ --color-muted-foreground: hsl(240 5% 64.9%);
+ --color-accent: hsl(240 3.7% 15.9%);
+ --color-accent-foreground: hsl(0 0% 98%);
+ --color-destructive: hsl(0 62.8% 30.6%);
+ --color-card: hsl(240 10% 3.9%);
+ --color-card-foreground: hsl(0 0% 98%);
}
-* { box-sizing: border-box; }
-
-body {
- margin: 0;
- background: var(--bg);
- color: var(--text);
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-.app {
- display: grid;
- grid-template-columns: 220px 1fr;
- height: 100vh;
-}
-
-.sidebar {
- background: var(--surface);
- border-right: 1px solid #23262f;
- padding: 16px;
- display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-.sidebar h1 {
- font-size: 1.1rem;
- margin: 0 0 12px;
- color: var(--accent);
-}
-
-.sidebar a {
- color: var(--text);
- text-decoration: none;
- padding: 10px 12px;
- border-radius: var(--radius);
- transition: background 0.15s;
-}
-
-.sidebar a:hover,
-.sidebar a.active {
- background: var(--surface-2);
-}
-
-main {
- padding: 24px;
- overflow: auto;
-}
-
-h2 { margin-top: 0; }
-
-card, .card {
- background: var(--surface);
- border: 1px solid #23262f;
- border-radius: var(--radius);
- padding: 16px;
- margin-bottom: 16px;
-}
-
-button {
- background: var(--accent);
- color: white;
- border: none;
- border-radius: var(--radius);
- padding: 10px 16px;
- cursor: pointer;
- font-size: 0.95rem;
-}
-
-button:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-button.secondary {
- background: var(--surface-2);
- border: 1px solid #2f3441;
-}
-
-select, textarea, input {
- background: var(--surface-2);
- color: var(--text);
- border: 1px solid #2f3441;
- border-radius: var(--radius);
- padding: 10px 12px;
- font: inherit;
-}
-
-textarea {
- width: 100%;
- min-height: 120px;
- resize: vertical;
-}
-
-.status-ok { color: var(--accent-2); }
-.status-timeout { color: var(--warn); }
-.status-error, .status-offline, .status-failed { color: var(--danger); }
-.status-running { color: var(--accent); }
-
-.grid-2 {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 16px;
-}
-
-.grid-4 {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
- gap: 16px;
-}
-
-.health-card {
- background: var(--surface);
- border: 1px solid #23262f;
- border-radius: var(--radius);
- padding: 16px;
-}
-
-.health-card h4 {
- margin: 0 0 8px;
-}
-
-.health-card p {
- margin: 4px 0;
- color: var(--muted);
- font-size: 0.9rem;
-}
-
-.run-list {
- display: flex;
- flex-direction: column;
- gap: 12px;
-}
-
-.run-item {
- background: var(--surface);
- border: 1px solid #23262f;
- border-radius: var(--radius);
- padding: 12px 16px;
-}
-
-.run-item pre {
- background: var(--surface-2);
- padding: 12px;
- border-radius: var(--radius);
- overflow: auto;
- max-height: 200px;
- white-space: pre-wrap;
-}
-
-.memory-editor {
- display: flex;
- flex-direction: column;
- gap: 12px;
-}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { background: var(--color-background); color: var(--color-foreground); font-family: 'Inter', system-ui, sans-serif; }
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: hsl(240 3.7% 25%); border-radius: 3px; }
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..666a6e7
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,3 @@
+export function cn(...classes: (string | false | undefined | null)[]) {
+ return classes.filter(Boolean).join(' ')
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index fa94fac..b06a21c 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,13 +1,17 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import App from './App'
import './index.css'
-ReactDOM.createRoot(document.getElementById('root')!).render(
-
+
+ Tasks
+ +
+ {tasks.map(task => (
+
+
+ {task.done
+ ?
+ ))}
+
-