Hugging Face's logo

Spaces:
AKt123479
/
project-name-multi-agent-ai-platfo
Running

App Files Community
AKt123479 commited on
Commit
e5a4c31
·
verified ·
1 Parent(s): ec75c1f

{

Browse files

“project_name”: “Multi-Agent AI Platform”,
“description”: “Build a comprehensive multi-agent AI platform similar to Doraverse with autonomous agents, task orchestration, and collaborative workflows”,
“requirements”: {
“core_functionality”: {
“agent_management”: {
“description”: “Complete agent lifecycle management system”,
“features”: [
“Create, configure, and deploy AI agents with custom personalities and capabilities”,
“Agent templates and presets for common use cases (coding, writing, analysis, etc.)”,
“Dynamic agent spawning based on task requirements”,
“Agent performance monitoring and analytics”,
“Agent memory and context persistence”,
“Agent collaboration and communication protocols”
]
},
“task_orchestration”: {
“description”: “Intelligent task routing and workflow management”,
“features”: [
“Automatic task decomposition and delegation”,
“Multi-agent collaboration on complex tasks”,
“Task priority queuing and scheduling”,
“Real-time task progress tracking”,
“Workflow templates and automation”,
“Error handling and task recovery mechanisms”
]
},
“communication_system”: {
“description”: “Inter-agent and human-agent communication infrastructure”,
“features”: [
“Real-time messaging between agents”,
“Structured data exchange protocols”,
“Broadcast and multicast messaging”,
“Message queuing and persistence”,
“Communication logging and audit trails”,
“Human-readable conversation interfaces”
]
}
},
“technical_architecture”: {
“backend”: {
“framework”: “Node.js with Express or Python with FastAPI”,
“database”: “PostgreSQL for structured data, Redis for caching and real-time operations”,
“message_queue”: “Redis Pub/Sub or Apache Kafka for agent communication”,
“ai_integration”: “OpenAI API, Anthropic Claude API, or local LLM integration”,
“authentication”: “JWT-based auth with role-based access control”,
“api_design”: “RESTful APIs with GraphQL for complex queries”
},
“frontend”: {
“framework”: “React.js with TypeScript or Next.js”,
“ui_library”: “Tailwind CSS with shadcn/ui components”,
“state_management”: “Redux Toolkit or Zustand”,
“real_time”: “WebSocket connections for live updates”,
“visualization”: “D3.js or Recharts for agent network visualization”,
“routing”: “React Router with protected routes”
},
“infrastructure”: {
“containerization”: “Docker with docker-compose for development”,
“deployment”: “Kubernetes or Docker Swarm for production”,
“monitoring”: “Prometheus and Grafana for system metrics”,
“logging”: “ELK Stack (Elasticsearch, Logstash, Kibana)”,
“ci_cd”: “GitHub Actions or GitLab CI/CD”,
“cloud_services”: “AWS, GCP, or Azure integration options”
}
},
“key_components”: {
“agent_registry”: {
“description”: “Central registry for all available agents”,
“schema”: {
“agent_id”: “string”,
“name”: “string”,
“description”: “string”,
“capabilities”: “array”,
“personality_traits”: “object”,
“resource_requirements”: “object”,
“status”: “enum[active, idle, busy, offline]”,
“performance_metrics”: “object”
}
},
“task_queue”: {
“description”: “Distributed task queue with priority handling”,
“features”: [
“Priority-based task scheduling”,
“Task dependencies and prerequisites”,
“Retry mechanisms with exponential backoff”,
“Dead letter queues for failed tasks”,
“Task result caching and optimization”
]
},
“workflow_engine”: {
“description”: “Visual workflow designer and execution engine”,
“features”: [
“Drag-and-drop workflow builder”,
“Conditional logic and branching”,
“Parallel execution paths”,
“Integration with external APIs and services”,
“Workflow versioning and rollback capabilities”
]
},
“knowledge_base”: {
“description”: “Shared knowledge repository for agents”,
“features”: [
“Vector database for semantic search”,
“Document ingestion and processing”,
“Knowledge graph construction”,
“Version control for knowledge updates”,
“Access control and permissions”
]
}
},
“user_interface”: {
“dashboard”: {
“description”: “Main control panel for platform management”,
“components”: [
“Agent status overview with real-time metrics”,
“Active task monitoring and controls”,
“Resource usage visualization”,
“System health indicators”,
“Quick actions and shortcuts”
]
},
“agent_studio”: {
“description”: “Agent creation and configuration interface”,
“features”: [
“Visual agent designer with personality sliders”,
“Code editor for custom agent behaviors”,
“Testing sandbox for agent validation”,
“Template gallery and marketplace”,
“Version control for agent configurations”
]
},
“conversation_interface”: {
“description”: “Chat interface for human-agent interaction”,
“features”: [
“Multi-agent conversations with threading”,
“Rich media support (files, images, code)”,
“Conversation history and search”,
“Agent switching and handoffs”,
“Real-time typing indicators and presence”
]
},
“analytics_dashboard”: {
“description”: “Performance and usage analytics”,
“metrics”: [
“Task completion rates and times”,
“Agent utilization and efficiency”,
“User engagement and satisfaction”,
“Resource consumption patterns”,
“Error rates and failure but the apps name should be KODE

Files changed (5) hide show
  1. README.md +8 -5
  2. agents.html +561 -0
  3. index.html +553 -18
  4. tasks.html +646 -0
  5. workflows.html +434 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Project Name Multi Agent Ai Platfo
3
- emoji: ⚡
4
- colorFrom: pink
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: ---project-name----Multi-Agent-AI-Platfo
3
+ colorFrom: gray
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
agents.html ADDED
@@ -0,0 +1,561 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Agents - KODE 1</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 50: '#f0f9ff',
19
+ 100: '#e0f2fe',
20
+ 200: '#bae6fd',
21
+ 300: '#7dd3fc',
22
+ 400: '#38bdf8',
23
+ 500: '#0ea5e9',
24
+ 600: '#0284c7',
25
+ 700: '#0369a1',
26
+ 800: '#075985',
27
+ 900: '#0c4a6e',
28
+ },
29
+ secondary: {
30
+ 50: '#f8fafc',
31
+ 100: '#f1f5f9',
32
+ 200: '#e2e8f0',
33
+ 300: '#cbd5e1',
34
+ 400: '#94a3b8',
35
+ 500: '#64748b',
36
+ 600: '#475569',
37
+ 700: '#334155',
38
+ 800: '#1e293b',
39
+ 900: '#0f172a',
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ </script>
46
+ </head>
47
+ <body class="bg-secondary-50 dark:bg-secondary-900 text-secondary-900 dark:text-secondary-100">
48
+ <!-- Navigation -->
49
+ <nav class="bg-white dark:bg-secondary-800 border-b border-secondary-200 dark:border-secondary-700 fixed w-full top-0 z-50">
50
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
51
+ <div class="flex justify-between h-16">
52
+ <div class="flex items-center">
53
+ <div class="flex-shrink-0 flex items-center">
54
+ <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
55
+ <i data-feather="cpu" class="w-6 h-6 text-white"></i>
56
+ </div>
57
+ <span class="ml-3 text-xl font-bold">KODE 1</span>
58
+ </div>
59
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
60
+ <a href="index.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Dashboard</a>
61
+ <a href="#" class="text-primary-600 dark:text-primary-400 px-3 py-2 text-sm font-medium">Agents</a>
62
+ <a href="tasks.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Tasks</a>
63
+ <a href="workflows.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Workflows</a>
64
+ <a href="analytics.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Analytics</a>
65
+ </div>
66
+ </div>
67
+ <div class="flex items-center space-x-4">
68
+ <button onclick="toggleTheme()" class="p-2 rounded-lg hover:bg-secondary-100 dark:hover:bg-secondary-700">
69
+ <i data-feather="moon" class="w-5 h-5 dark:hidden"></i>
70
+ <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
71
+ </button>
72
+ <div class="relative">
73
+ <button class="p-2 rounded-lg hover:bg-secondary-100 dark:hover:bg-secondary-700">
74
+ <i data-feather="bell" class="w-5 h-5"></i>
75
+ <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
76
+ </button>
77
+ </div>
78
+ <div class="flex items-center space-x-2">
79
+ <img src="http://static.photos/people/40x40/1" alt="User" class="w-8 h-8 rounded-full">
80
+ <span class="text-sm font-medium">John Doe</span>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </nav>
86
+
87
+ <!-- Main Content -->
88
+ <main class="pt-16">
89
+ <!-- Header -->
90
+ <section class="bg-white dark:bg-secondary-800 border-b border-secondary-200 dark:border-secondary-700">
91
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
92
+ <div class="flex justify-between items-center">
93
+ <div>
94
+ <h1 class="text-2xl font-bold">Agent Studio</h1>
95
+ <p class="text-secondary-500 dark:text-secondary-400">Create, configure, and manage your AI agents</p>
96
+ </div>
97
+ <button onclick="openCreateAgentModal()" class="bg-primary-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-primary-700 transition-colors flex items-center space-x-2">
98
+ <i data-feather="plus" class="w-5 h-5"></i>
99
+ <span>Create Agent</span>
100
+ </button>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- Filters and Search -->
106
+ <section class="bg-white dark:bg-secondary-800 border-b border-secondary-200 dark:border-secondary-700">
107
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
108
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
109
+ <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
110
+ <div class="relative">
111
+ <input type="text" placeholder="Search agents..." class="pl-10 pr-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
112
+ <i data-feather="search" class="absolute left-3 top-2.5 w-5 h-5 text-secondary-400"></i>
113
+ </div>
114
+ <select class="px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
115
+ <option>All Categories</option>
116
+ <option>Development</option>
117
+ <option>Writing</option>
118
+ <option>Analysis</option>
119
+ <option>Design</option>
120
+ </select>
121
+ <select class="px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
122
+ <option>All Status</option>
123
+ <option>Active</option>
124
+ <option>Idle</option>
125
+ <option>Busy</option>
126
+ <option>Offline</option>
127
+ </select>
128
+ </div>
129
+ <div class="flex items-center space-x-2">
130
+ <button class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg">
131
+ <i data-feather="grid" class="w-5 h-5"></i>
132
+ </button>
133
+ <button class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg">
134
+ <i data-feather="list" class="w-5 h-5"></i>
135
+ </button>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </section>
140
+
141
+ <!-- Agent Templates -->
142
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
143
+ <h2 class="text-lg font-bold mb-4">Agent Templates</h2>
144
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
145
+ <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl p-6 text-white cursor-pointer hover:scale-105 transition-transform">
146
+ <i data-feather="code" class="w-10 h-10 mb-3"></i>
147
+ <h3 class="font-semibold mb-1">Code Agent</h3>
148
+ <p class="text-sm opacity-90">Perfect for development tasks</p>
149
+ </div>
150
+ <div class="bg-gradient-to-br from-green-500 to-teal-600 rounded-xl p-6 text-white cursor-pointer hover:scale-105 transition-transform">
151
+ <i data-feather="edit-3" class="w-10 h-10 mb-3"></i>
152
+ <h3 class="font-semibold mb-1">Writer Agent</h3>
153
+ <p class="text-sm opacity-90">Content creation specialist</p>
154
+ </div>
155
+ <div class="bg-gradient-to-br from-orange-500 to-red-600 rounded-xl p-6 text-white cursor-pointer hover:scale-105 transition-transform">
156
+ <i data-feather="bar-chart-2" class="w-10 h-10 mb-3"></i>
157
+ <h3 class="font-semibold mb-1">Data Agent</h3>
158
+ <p class="text-sm opacity-90">Data analysis and insights</p>
159
+ </div>
160
+ <div class="bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl p-6 text-white cursor-pointer hover:scale-105 transition-transform">
161
+ <i data-feather="command" class="w-10 h-10 mb-3"></i>
162
+ <h3 class="font-semibold mb-1">Custom Agent</h3>
163
+ <p class="text-sm opacity-90">Build your own agent</p>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Agent List -->
168
+ <h2 class="text-lg font-bold mb-4">Your Agents</h2>
169
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
170
+ <!-- Agent Card 1 -->
171
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
172
+ <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2"></div>
173
+ <div class="p-6">
174
+ <div class="flex items-start justify-between mb-4">
175
+ <div class="flex items-center space-x-3">
176
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
177
+ <i data-feather="code" class="w-6 h-6 text-white"></i>
178
+ </div>
179
+ <div>
180
+ <h3 class="font-semibold">CodeAgent Pro</h3>
181
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
182
+ Active
183
+ </span>
184
+ </div>
185
+ </div>
186
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
187
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
188
+ </button>
189
+ </div>
190
+ <p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">Python & JavaScript specialist with expertise in web development and data processing.</p>
191
+ <div class="space-y-3">
192
+ <div class="flex justify-between text-sm">
193
+ <span class="text-secondary-500 dark:text-secondary-400">Tasks Completed</span>
194
+ <span class="font-medium">1,234</span>
195
+ </div>
196
+ <div class="flex justify-between text-sm">
197
+ <span class="text-secondary-500 dark:text-secondary-400">Success Rate</span>
198
+ <span class="font-medium text-green-600">98.5%</span>
199
+ </div>
200
+ <div class="flex justify-between text-sm">
201
+ <span class="text-secondary-500 dark:text-secondary-400">Avg Response Time</span>
202
+ <span class="font-medium">2.3s</span>
203
+ </div>
204
+ </div>
205
+ <div class="mt-4 pt-4 border-t border-secondary-200 dark:border-secondary-700">
206
+ <div class="flex space-x-2">
207
+ <button class="flex-1 bg-primary-600 text-white px-3 py-2 rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
208
+ Configure
209
+ </button>
210
+ <button class="flex-1 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 px-3 py-2 rounded-lg text-sm font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors">
211
+ View Logs
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Agent Card 2 -->
219
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
220
+ <div class="bg-gradient-to-r from-green-500 to-teal-600 h-2"></div>
221
+ <div class="p-6">
222
+ <div class="flex items-start justify-between mb-4">
223
+ <div class="flex items-center space-x-3">
224
+ <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-lg flex items-center justify-center">
225
+ <i data-feather="edit-3" class="w-6 h-6 text-white"></i>
226
+ </div>
227
+ <div>
228
+ <h3 class="font-semibold">WriterAI</h3>
229
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
230
+ Busy
231
+ </span>
232
+ </div>
233
+ </div>
234
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
235
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
236
+ </button>
237
+ </div>
238
+ <p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">Content generation expert specializing in blog posts, articles, and marketing copy.</p>
239
+ <div class="space-y-3">
240
+ <div class="flex justify-between text-sm">
241
+ <span class="text-secondary-500 dark:text-secondary-400">Tasks Completed</span>
242
+ <span class="font-medium">892</span>
243
+ </div>
244
+ <div class="flex justify-between text-sm">
245
+ <span class="text-secondary-500 dark:text-secondary-400">Success Rate</span>
246
+ <span class="font-medium text-green-600">96.2%</span>
247
+ </div>
248
+ <div class="flex justify-between text-sm">
249
+ <span class="text-secondary-500 dark:text-secondary-400">Avg Response Time</span>
250
+ <span class="font-medium">1.8s</span>
251
+ </div>
252
+ </div>
253
+ <div class="mt-4 pt-4 border-t border-secondary-200 dark:border-secondary-700">
254
+ <div class="flex space-x-2">
255
+ <button class="flex-1 bg-primary-600 text-white px-3 py-2 rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
256
+ Configure
257
+ </button>
258
+ <button class="flex-1 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 px-3 py-2 rounded-lg text-sm font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors">
259
+ View Logs
260
+ </button>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Agent Card 3 -->
267
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
268
+ <div class="bg-gradient-to-r from-orange-500 to-red-600 h-2"></div>
269
+ <div class="p-6">
270
+ <div class="flex items-start justify-between mb-4">
271
+ <div class="flex items-center space-x-3">
272
+ <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-lg flex items-center justify-center">
273
+ <i data-feather="bar-chart-2" class="w-6 h-6 text-white"></i>
274
+ </div>
275
+ <div>
276
+ <h3 class="font-semibold">DataAnalyzer</h3>
277
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
278
+ Active
279
+ </span>
280
+ </div>
281
+ </div>
282
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
283
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
284
+ </button>
285
+ </div>
286
+ <p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">Business intelligence agent for data analysis, reporting, and insights generation.</p>
287
+ <div class="space-y-3">
288
+ <div class="flex justify-between text-sm">
289
+ <span class="text-secondary-500 dark:text-secondary-400">Tasks Completed</span>
290
+ <span class="font-medium">567</span>
291
+ </div>
292
+ <div class="flex justify-between text-sm">
293
+ <span class="text-secondary-500 dark:text-secondary-400">Success Rate</span>
294
+ <span class="font-medium text-green-600">99.1%</span>
295
+ </div>
296
+ <div class="flex justify-between text-sm">
297
+ <span class="text-secondary-500 dark:text-secondary-400">Avg Response Time</span>
298
+ <span class="font-medium">3.1s</span>
299
+ </div>
300
+ </div>
301
+ <div class="mt-4 pt-4 border-t border-secondary-200 dark:border-secondary-700">
302
+ <div class="flex space-x-2">
303
+ <button class="flex-1 bg-primary-600 text-white px-3 py-2 rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
304
+ Configure
305
+ </button>
306
+ <button class="flex-1 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 px-3 py-2 rounded-lg text-sm font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors">
307
+ View Logs
308
+ </button>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Agent Card 4 -->
315
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
316
+ <div class="bg-gradient-to-r from-purple-500 to-pink-600 h-2"></div>
317
+ <div class="p-6">
318
+ <div class="flex items-start justify-between mb-4">
319
+ <div class="flex items-center space-x-3">
320
+ <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center">
321
+ <i data-feather="image" class="w-6 h-6 text-white"></i>
322
+ </div>
323
+ <div>
324
+ <h3 class="font-semibold">DesignBot</h3>
325
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
326
+ Idle
327
+ </span>
328
+ </div>
329
+ </div>
330
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
331
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
332
+ </button>
333
+ </div>
334
+ <p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">Creative agent for UI/UX design, graphics, and visual content creation.</p>
335
+ <div class="space-y-3">
336
+ <div class="flex justify-between text-sm">
337
+ <span class="text-secondary-500 dark:text-secondary-400">Tasks Completed</span>
338
+ <span class="font-medium">423</span>
339
+ </div>
340
+ <div class="flex justify-between text-sm">
341
+ <span class="text-secondary-500 dark:text-secondary-400">Success Rate</span>
342
+ <span class="font-medium text-green-600">94.7%</span>
343
+ </div>
344
+ <div class="flex justify-between text-sm">
345
+ <span class="text-secondary-500 dark:text-secondary-400">Avg Response Time</span>
346
+ <span class="font-medium">4.2s</span>
347
+ </div>
348
+ </div>
349
+ <div class="mt-4 pt-4 border-t border-secondary-200 dark:border-secondary-700">
350
+ <div class="flex space-x-2">
351
+ <button class="flex-1 bg-primary-600 text-white px-3 py-2 rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
352
+ Configure
353
+ </button>
354
+ <button class="flex-1 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 px-3 py-2 rounded-lg text-sm font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors">
355
+ View Logs
356
+ </button>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Agent Card 5 -->
363
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
364
+ <div class="bg-gradient-to-r from-indigo-500 to-blue-600 h-2"></div>
365
+ <div class="p-6">
366
+ <div class="flex items-start justify-between mb-4">
367
+ <div class="flex items-center space-x-3">
368
+ <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-lg flex items-center justify-center">
369
+ <i data-feather="shield" class="w-6 h-6 text-white"></i>
370
+ </div>
371
+ <div>
372
+ <h3 class="font-semibold">SecurityGuard</h3>
373
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
374
+ Active
375
+ </span>
376
+ </div>
377
+ </div>
378
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
379
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
380
+ </button>
381
+ </div>
382
+ <p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">Security monitoring and compliance agent for system protection and audits.</p>
383
+ <div class="space-y-3">
384
+ <div class="flex justify-between text-sm">
385
+ <span class="text-secondary-500 dark:text-secondary-400">Tasks Completed</span>
386
+ <span class="font-medium">2,891</span>
387
+ </div>
388
+ <div class="flex justify-between text-sm">
389
+ <span class="text-secondary-500 dark:text-secondary-400">Success Rate</span>
390
+ <span class="font-medium text-green-600">99.9%</span>
391
+ </div>
392
+ <div class="flex justify-between text-sm">
393
+ <span class="text-secondary-500 dark:text-secondary-400">Avg Response Time</span>
394
+ <span class="font-medium">0.8s</span>
395
+ </div>
396
+ </div>
397
+ <div class="mt-4 pt-4 border-t border-secondary-200 dark:border-secondary-700">
398
+ <div class="flex space-x-2">
399
+ <button class="flex-1 bg-primary-600 text-white px-3 py-2 rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
400
+ Configure
401
+ </button>
402
+ <button class="flex-1 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 px-3 py-2 rounded-lg text-sm font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors">
403
+ View Logs
404
+ </button>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Add New Agent Card -->
411
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow border-2 border-dashed border-secondary-300 dark:border-secondary-600">
412
+ <div class="p-6 h-full flex flex-col items-center justify-center cursor-pointer hover:bg-secondary-50 dark:hover:bg-secondary-700" onclick="openCreateAgentModal()">
413
+ <div class="w-16 h-16 bg-secondary-100 dark:bg-secondary-700 rounded-full flex items-center justify-center mb-4">
414
+ <i data-feather="plus" class="w-8 h-8 text-secondary-500 dark:text-secondary-400"></i>
415
+ </div>
416
+ <h3 class="font-semibold mb-1">Create New Agent</h3>
417
+ <p class="text-sm text-secondary-500 dark:text-secondary-400 text-center">Build a custom agent for your specific needs</p>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </section>
422
+ </main>
423
+
424
+ <!-- Create Agent Modal -->
425
+ <div id="createAgentModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
426
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
427
+ <div class="p-6 border-b border-secondary-200 dark:border-secondary-700">
428
+ <div class="flex justify-between items-center">
429
+ <h2 class="text-xl font-bold">Create New Agent</h2>
430
+ <button onclick="closeCreateAgentModal()" class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg">
431
+ <i data-feather="x" class="w-5 h-5"></i>
432
+ </button>
433
+ </div>
434
+ </div>
435
+ <div class="p-6 space-y-6">
436
+ <div>
437
+ <label class="block text-sm font-medium mb-2">Agent Name</label>
438
+ <input type="text" placeholder="Enter agent name" class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
439
+ </div>
440
+ <div>
441
+ <label class="block text-sm font-medium mb-2">Agent Type</label>
442
+ <select class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
443
+ <option>Code Agent</option>
444
+ <option>Writer Agent</option>
445
+ <option>Data Agent</option>
446
+ <option>Design Agent</option>
447
+ <option>Custom Agent</option>
448
+ </select>
449
+ </div>
450
+ <div>
451
+ <label class="block text-sm font-medium mb-2">Description</label>
452
+ <textarea placeholder="Describe your agent's purpose and capabilities" rows="3" class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
453
+ </div>
454
+ <div>
455
+ <label class="block text-sm font-medium mb-2">Personality Traits</label>
456
+ <div class="space-y-3">
457
+ <div>
458
+ <div class="flex justify-between text-sm mb-1">
459
+ <span>Creativity</span>
460
+ <span>70%</span>
461
+ </div>
462
+ <input type="range" min="0" max="100" value="70" class="w-full">
463
+ </div>
464
+ <div>
465
+ <div class="flex justify-between text-sm mb-1">
466
+ <span>Efficiency</span>
467
+ <span>85%</span>
468
+ </div>
469
+ <input type="range" min="0" max="100" value="85" class="w-full">
470
+ </div>
471
+ <div>
472
+ <div class="flex justify-between text-sm mb-1">
473
+ <span>Autonomy</span>
474
+ <span>60%</span>
475
+ </div>
476
+ <input type="range" min="0" max="100" value="60" class="w-full">
477
+ </div>
478
+ </div>
479
+ </div>
480
+ <div>
481
+ <label class="block text-sm font-medium mb-2">Capabilities</label>
482
+ <div class="grid grid-cols-2 gap-3">
483
+ <label class="flex items-center space-x-2">
484
+ <input type="checkbox" class="rounded text-primary-600 focus:ring-primary-500">
485
+ <span class="text-sm">Code Generation</span>
486
+ </label>
487
+ <label class="flex items-center space-x-2">
488
+ <input type="checkbox" class="rounded text-primary-600 focus:ring-primary-500">
489
+ <span class="text-sm">Data Analysis</span>
490
+ </label>
491
+ <label class="flex items-center space-x-2">
492
+ <input type="checkbox" class="rounded text-primary-600 focus:ring-primary-500">
493
+ <span class="text-sm">Content Writing</span>
494
+ </label>
495
+ <label class="flex items-center space-x-2">
496
+ <input type="checkbox" class="rounded text-primary-600 focus:ring-primary-500">
497
+ <span class="text-sm">Problem Solving</span>
498
+ </label>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ <div class="p-6 border-t border-secondary-200 dark:border-secondary-700">
503
+ <div class="flex justify-end space-x-3">
504
+ <button onclick="closeCreateAgentModal()" class="px-4 py-2 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 rounded-lg font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors">
505
+ Cancel
506
+ </button>
507
+ <button onclick="createAgent()" class="px-4 py-2 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700 transition-colors">
508
+ Create Agent
509
+ </button>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+
515
+ <script>
516
+ feather.replace();
517
+
518
+ function toggleTheme() {
519
+ document.documentElement.classList.toggle('dark');
520
+ localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
521
+ }
522
+
523
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
524
+ document.documentElement.classList.add('dark');
525
+ }
526
+
527
+ function openCreateAgentModal() {
528
+ document.getElementById('createAgentModal').classList.remove('hidden');
529
+ }
530
+
531
+ function closeCreateAgentModal() {
532
+ document.getElementById('createAgentModal').classList.add('hidden');
533
+ }
534
+
535
+ function createAgent() {
536
+ // Simulate agent creation
537
+ closeCreateAgentModal();
538
+ // Show success message
539
+ const successMessage = document.createElement('div');
540
+ successMessage.className = 'fixed top-20 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2';
541
+ successMessage.innerHTML = '<i data-feather="check-circle" class="w-5 h-5"></i><span>Agent created successfully!</span>';
542
+ document.body.appendChild(successMessage);
543
+ feather.replace();
544
+ setTimeout(() => {
545
+ successMessage.remove();
546
+ }, 3000);
547
+ }
548
+
549
+ // Range sliders update
550
+ document.querySelectorAll('input[type="range"]').forEach(slider => {
551
+ slider.addEventListener('input', (e) => {
552
+ const value = e.target.value;
553
+ const label = e.target.previousElementSibling.querySelector('span:last-child');
554
+ if (label) {
555
+ label.textContent = value + '%';
556
+ }
557
+ });
558
+ });
559
+ </script>
560
+ </body>
561
+ </html>
index.html CHANGED
@@ -1,19 +1,554 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>KODE 1 - Multi-Agent AI Platform</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: {
19
+ 50: '#f0f9ff',
20
+ 100: '#e0f2fe',
21
+ 200: '#bae6fd',
22
+ 300: '#7dd3fc',
23
+ 400: '#38bdf8',
24
+ 500: '#0ea5e9',
25
+ 600: '#0284c7',
26
+ 700: '#0369a1',
27
+ 800: '#075985',
28
+ 900: '#0c4a6e',
29
+ },
30
+ secondary: {
31
+ 50: '#f8fafc',
32
+ 100: '#f1f5f9',
33
+ 200: '#e2e8f0',
34
+ 300: '#cbd5e1',
35
+ 400: '#94a3b8',
36
+ 500: '#64748b',
37
+ 600: '#475569',
38
+ 700: '#334155',
39
+ 800: '#1e293b',
40
+ 900: '#0f172a',
41
+ }
42
+ },
43
+ animation: {
44
+ 'float': 'float 3s ease-in-out infinite',
45
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
46
+ }
47
+ }
48
+ }
49
+ }
50
+ </script>
51
+ </head>
52
+ <body class="bg-secondary-50 dark:bg-secondary-900 text-secondary-900 dark:text-secondary-100">
53
+ <!-- Navigation -->
54
+ <nav class="bg-white dark:bg-secondary-800 border-b border-secondary-200 dark:border-secondary-700 fixed w-full top-0 z-50">
55
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
56
+ <div class="flex justify-between h-16">
57
+ <div class="flex items-center">
58
+ <div class="flex-shrink-0 flex items-center">
59
+ <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
60
+ <i data-feather="cpu" class="w-6 h-6 text-white"></i>
61
+ </div>
62
+ <span class="ml-3 text-xl font-bold">KODE 1</span>
63
+ </div>
64
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
65
+ <a href="#" class="text-primary-600 dark:text-primary-400 px-3 py-2 text-sm font-medium">Dashboard</a>
66
+ <a href="#" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Agents</a>
67
+ <a href="#" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Tasks</a>
68
+ <a href="#" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Workflows</a>
69
+ <a href="#" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Analytics</a>
70
+ </div>
71
+ </div>
72
+ <div class="flex items-center space-x-4">
73
+ <button onclick="toggleTheme()" class="p-2 rounded-lg hover:bg-secondary-100 dark:hover:bg-secondary-700">
74
+ <i data-feather="moon" class="w-5 h-5 dark:hidden"></i>
75
+ <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
76
+ </button>
77
+ <div class="relative">
78
+ <button class="p-2 rounded-lg hover:bg-secondary-100 dark:hover:bg-secondary-700">
79
+ <i data-feather="bell" class="w-5 h-5"></i>
80
+ <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
81
+ </button>
82
+ </div>
83
+ <div class="flex items-center space-x-2">
84
+ <img src="http://static.photos/people/40x40/1" alt="User" class="w-8 h-8 rounded-full">
85
+ <span class="text-sm font-medium">John Doe</span>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </nav>
91
+
92
+ <!-- Main Content -->
93
+ <main class="pt-16">
94
+ <!-- Hero Section -->
95
+ <section class="bg-gradient-to-br from-primary-600 to-primary-800 text-white py-12">
96
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
97
+ <div class="flex justify-between items-center">
98
+ <div>
99
+ <h1 class="text-4xl font-bold mb-2">Welcome to KODE 1</h1>
100
+ <p class="text-primary-100">Multi-Agent AI Platform for Autonomous Workflows</p>
101
+ </div>
102
+ <button class="bg-white text-primary-600 px-6 py-3 rounded-lg font-semibold hover:bg-primary-50 transition-colors">
103
+ Create New Agent
104
+ </button>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- Stats Cards -->
110
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-6">
111
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
112
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6">
113
+ <div class="flex items-center justify-between">
114
+ <div>
115
+ <p class="text-secondary-500 dark:text-secondary-400 text-sm">Active Agents</p>
116
+ <p class="text-3xl font-bold text-primary-600 dark:text-primary-400">24</p>
117
+ <p class="text-xs text-green-500 mt-1">+12% from last week</p>
118
+ </div>
119
+ <div class="bg-primary-100 dark:bg-primary-900 p-3 rounded-lg">
120
+ <i data-feather="users" class="w-6 h-6 text-primary-600 dark:text-primary-400"></i>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6">
125
+ <div class="flex items-center justify-between">
126
+ <div>
127
+ <p class="text-secondary-500 dark:text-secondary-400 text-sm">Running Tasks</p>
128
+ <p class="text-3xl font-bold text-green-600 dark:text-green-400">156</p>
129
+ <p class="text-xs text-secondary-500 dark:text-secondary-400 mt-1">Processing...</p>
130
+ </div>
131
+ <div class="bg-green-100 dark:bg-green-900 p-3 rounded-lg">
132
+ <i data-feather="activity" class="w-6 h-6 text-green-600 dark:text-green-400"></i>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6">
137
+ <div class="flex items-center justify-between">
138
+ <div>
139
+ <p class="text-secondary-500 dark:text-secondary-400 text-sm">Completed Today</p>
140
+ <p class="text-3xl font-bold text-purple-600 dark:text-purple-400">892</p>
141
+ <p class="text-xs text-green-500 mt-1">+23% efficiency</p>
142
+ </div>
143
+ <div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-lg">
144
+ <i data-feather="check-circle" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6">
149
+ <div class="flex items-center justify-between">
150
+ <div>
151
+ <p class="text-secondary-500 dark:text-secondary-400 text-sm">System Health</p>
152
+ <p class="text-3xl font-bold text-green-600 dark:text-green-400">98%</p>
153
+ <p class="text-xs text-green-500 mt-1">All systems operational</p>
154
+ </div>
155
+ <div class="bg-green-100 dark:bg-green-900 p-3 rounded-lg">
156
+ <i data-feather="server" class="w-6 h-6 text-green-600 dark:text-green-400"></i>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- Dashboard Content -->
164
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
165
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
166
+ <!-- Agent List -->
167
+ <div class="lg:col-span-2 bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6">
168
+ <div class="flex justify-between items-center mb-6">
169
+ <h2 class="text-xl font-bold">Active Agents</h2>
170
+ <button class="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300">
171
+ View All
172
+ </button>
173
+ </div>
174
+ <div class="space-y-4">
175
+ <!-- Agent Card 1 -->
176
+ <div class="border border-secondary-200 dark:border-secondary-700 rounded-lg p-4 hover:shadow-md transition-shadow">
177
+ <div class="flex items-center justify-between">
178
+ <div class="flex items-center space-x-3">
179
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
180
+ <i data-feather="code" class="w-6 h-6 text-white"></i>
181
+ </div>
182
+ <div>
183
+ <h3 class="font-semibold">CodeAgent Pro</h3>
184
+ <p class="text-sm text-secondary-500 dark:text-secondary-400">Python & JavaScript Specialist</p>
185
+ </div>
186
+ </div>
187
+ <div class="text-right">
188
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
189
+ Active
190
+ </span>
191
+ <p class="text-xs text-secondary-500 dark:text-secondary-400 mt-1">8 tasks running</p>
192
+ </div>
193
+ </div>
194
+ <div class="mt-4 flex items-center space-x-4">
195
+ <div class="flex-1">
196
+ <div class="flex justify-between text-xs text-secondary-500 dark:text-secondary-400 mb-1">
197
+ <span>CPU Usage</span>
198
+ <span>65%</span>
199
+ </div>
200
+ <div class="w-full bg-secondary-200 dark:bg-secondary-700 rounded-full h-2">
201
+ <div class="bg-primary-600 h-2 rounded-full" style="width: 65%"></div>
202
+ </div>
203
+ </div>
204
+ <button class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg">
205
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
206
+ </button>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Agent Card 2 -->
211
+ <div class="border border-secondary-200 dark:border-secondary-700 rounded-lg p-4 hover:shadow-md transition-shadow">
212
+ <div class="flex items-center justify-between">
213
+ <div class="flex items-center space-x-3">
214
+ <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-lg flex items-center justify-center">
215
+ <i data-feather="edit-3" class="w-6 h-6 text-white"></i>
216
+ </div>
217
+ <div>
218
+ <h3 class="font-semibold">WriterAI</h3>
219
+ <p class="text-sm text-secondary-500 dark:text-secondary-400">Content Generation Expert</p>
220
+ </div>
221
+ </div>
222
+ <div class="text-right">
223
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
224
+ Busy
225
+ </span>
226
+ <p class="text-xs text-secondary-500 dark:text-secondary-400 mt-1">12 tasks running</p>
227
+ </div>
228
+ </div>
229
+ <div class="mt-4 flex items-center space-x-4">
230
+ <div class="flex-1">
231
+ <div class="flex justify-between text-xs text-secondary-500 dark:text-secondary-400 mb-1">
232
+ <span>CPU Usage</span>
233
+ <span>85%</span>
234
+ </div>
235
+ <div class="w-full bg-secondary-200 dark:bg-secondary-700 rounded-full h-2">
236
+ <div class="bg-yellow-600 h-2 rounded-full" style="width: 85%"></div>
237
+ </div>
238
+ </div>
239
+ <button class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg">
240
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
241
+ </button>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Agent Card 3 -->
246
+ <div class="border border-secondary-200 dark:border-secondary-700 rounded-lg p-4 hover:shadow-md transition-shadow">
247
+ <div class="flex items-center justify-between">
248
+ <div class="flex items-center space-x-3">
249
+ <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-lg flex items-center justify-center">
250
+ <i data-feather="bar-chart-2" class="w-6 h-6 text-white"></i>
251
+ </div>
252
+ <div>
253
+ <h3 class="font-semibold">DataAnalyzer</h3>
254
+ <p class="text-sm text-secondary-500 dark:text-secondary-400">Business Intelligence Agent</p>
255
+ </div>
256
+ </div>
257
+ <div class="text-right">
258
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
259
+ Active
260
+ </span>
261
+ <p class="text-xs text-secondary-500 dark:text-secondary-400 mt-1">3 tasks running</p>
262
+ </div>
263
+ </div>
264
+ <div class="mt-4 flex items-center space-x-4">
265
+ <div class="flex-1">
266
+ <div class="flex justify-between text-xs text-secondary-500 dark:text-secondary-400 mb-1">
267
+ <span>CPU Usage</span>
268
+ <span>42%</span>
269
+ </div>
270
+ <div class="w-full bg-secondary-200 dark:bg-secondary-700 rounded-full h-2">
271
+ <div class="bg-primary-600 h-2 rounded-full" style="width: 42%"></div>
272
+ </div>
273
+ </div>
274
+ <button class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg">
275
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
276
+ </button>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Right Column -->
283
+ <div class="space-y-6">
284
+ <!-- Quick Actions -->
285
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6">
286
+ <h2 class="text-xl font-bold mb-4">Quick Actions</h2>
287
+ <div class="space-y-3">
288
+ <button class="w-full bg-primary-600 text-white px-4 py-3 rounded-lg font-medium hover:bg-primary-700 transition-colors flex items-center justify-center space-x-2">
289
+ <i data-feather="plus-circle" class="w-5 h-5"></i>
290
+ <span>Create New Agent</span>
291
+ </button>
292
+ <button class="w-full bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 px-4 py-3 rounded-lg font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors flex items-center justify-center space-x-2">
293
+ <i data-feather="play-circle" class="w-5 h-5"></i>
294
+ <span>Start Workflow</span>
295
+ </button>
296
+ <button class="w-full bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 px-4 py-3 rounded-lg font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors flex items-center justify-center space-x-2">
297
+ <i data-feather="upload" class="w-5 h-5"></i>
298
+ <span>Import Knowledge</span>
299
+ </button>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Recent Activity -->
304
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6">
305
+ <h2 class="text-xl font-bold mb-4">Recent Activity</h2>
306
+ <div class="space-y-3">
307
+ <div class="flex items-start space-x-3">
308
+ <div class="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
309
+ <div class="flex-1">
310
+ <p class="text-sm font-medium">CodeAgent Pro completed task</p>
311
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">2 minutes ago</p>
312
+ </div>
313
+ </div>
314
+ <div class="flex items-start space-x-3">
315
+ <div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
316
+ <div class="flex-1">
317
+ <p class="text-sm font-medium">New agent deployed</p>
318
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">15 minutes ago</p>
319
+ </div>
320
+ </div>
321
+ <div class="flex items-start space-x-3">
322
+ <div class="w-2 h-2 bg-yellow-500 rounded-full mt-2"></div>
323
+ <div class="flex-1">
324
+ <p class="text-sm font-medium">Workflow paused</p>
325
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">1 hour ago</p>
326
+ </div>
327
+ </div>
328
+ <div class="flex items-start space-x-3">
329
+ <div class="w-2 h-2 bg-purple-500 rounded-full mt-2"></div>
330
+ <div class="flex-1">
331
+ <p class="text-sm font-medium">Knowledge base updated</p>
332
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">2 hours ago</p>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Performance Chart -->
339
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6">
340
+ <h2 class="text-xl font-bold mb-4">Performance Overview</h2>
341
+ <canvas id="performanceChart" width="400" height="200"></canvas>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </section>
346
+
347
+ <!-- Task Queue -->
348
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
349
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6">
350
+ <div class="flex justify-between items-center mb-6">
351
+ <h2 class="text-xl font-bold">Task Queue</h2>
352
+ <div class="flex space-x-2">
353
+ <button class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
354
+ All Tasks
355
+ </button>
356
+ <button class="px-4 py-2 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 rounded-lg text-sm font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors">
357
+ Running
358
+ </button>
359
+ <button class="px-4 py-2 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 rounded-lg text-sm font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors">
360
+ Completed
361
+ </button>
362
+ </div>
363
+ </div>
364
+ <div class="overflow-x-auto">
365
+ <table class="w-full">
366
+ <thead>
367
+ <tr class="border-b border-secondary-200 dark:border-secondary-700">
368
+ <th class="text-left py-3 px-4 font-medium text-secondary-700 dark:text-secondary-300">Task ID</th>
369
+ <th class="text-left py-3 px-4 font-medium text-secondary-700 dark:text-secondary-300">Name</th>
370
+ <th class="text-left py-3 px-4 font-medium text-secondary-700 dark:text-secondary-300">Agent</th>
371
+ <th class="text-left py-3 px-4 font-medium text-secondary-700 dark:text-secondary-300">Priority</th>
372
+ <th class="text-left py-3 px-4 font-medium text-secondary-700 dark:text-secondary-300">Status</th>
373
+ <th class="text-left py-3 px-4 font-medium text-secondary-700 dark:text-secondary-300">Progress</th>
374
+ <th class="text-left py-3 px-4 font-medium text-secondary-700 dark:text-secondary-300">Actions</th>
375
+ </tr>
376
+ </thead>
377
+ <tbody>
378
+ <tr class="border-b border-secondary-100 dark:border-secondary-800 hover:bg-secondary-50 dark:hover:bg-secondary-900">
379
+ <td class="py-3 px-4 text-sm">#TK001</td>
380
+ <td class="py-3 px-4 text-sm">Code Review</td>
381
+ <td class="py-3 px-4 text-sm">CodeAgent Pro</td>
382
+ <td class="py-3 px-4">
383
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
384
+ High
385
+ </span>
386
+ </td>
387
+ <td class="py-3 px-4">
388
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
389
+ Running
390
+ </span>
391
+ </td>
392
+ <td class="py-3 px-4">
393
+ <div class="flex items-center space-x-2">
394
+ <div class="w-24 bg-secondary-200 dark:bg-secondary-700 rounded-full h-2">
395
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 75%"></div>
396
+ </div>
397
+ <span class="text-xs">75%</span>
398
+ </div>
399
+ </td>
400
+ <td class="py-3 px-4">
401
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
402
+ <i data-feather="pause" class="w-4 h-4"></i>
403
+ </button>
404
+ </td>
405
+ </tr>
406
+ <tr class="border-b border-secondary-100 dark:border-secondary-800 hover:bg-secondary-50 dark:hover:bg-secondary-900">
407
+ <td class="py-3 px-4 text-sm">#TK002</td>
408
+ <td class="py-3 px-4 text-sm">Content Generation</td>
409
+ <td class="py-3 px-4 text-sm">WriterAI</td>
410
+ <td class="py-3 px-4">
411
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
412
+ Medium
413
+ </span>
414
+ </td>
415
+ <td class="py-3 px-4">
416
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
417
+ Completed
418
+ </span>
419
+ </td>
420
+ <td class="py-3 px-4">
421
+ <div class="flex items-center space-x-2">
422
+ <div class="w-24 bg-secondary-200 dark:bg-secondary-700 rounded-full h-2">
423
+ <div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div>
424
+ </div>
425
+ <span class="text-xs">100%</span>
426
+ </div>
427
+ </td>
428
+ <td class="py-3 px-4">
429
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
430
+ <i data-feather="check" class="w-4 h-4"></i>
431
+ </button>
432
+ </td>
433
+ </tr>
434
+ <tr class="border-b border-secondary-100 dark:border-secondary-800 hover:bg-secondary-50 dark:hover:bg-secondary-900">
435
+ <td class="py-3 px-4 text-sm">#TK003</td>
436
+ <td class="py-3 px-4 text-sm">Data Analysis</td>
437
+ <td class="py-3 px-4 text-sm">DataAnalyzer</td>
438
+ <td class="py-3 px-4">
439
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
440
+ Low
441
+ </span>
442
+ </td>
443
+ <td class="py-3 px-4">
444
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
445
+ Queued
446
+ </span>
447
+ </td>
448
+ <td class="py-3 px-4">
449
+ <div class="flex items-center space-x-2">
450
+ <div class="w-24 bg-secondary-200 dark:bg-secondary-700 rounded-full h-2">
451
+ <div class="bg-gray-600 h-2 rounded-full" style="width: 0%"></div>
452
+ </div>
453
+ <span class="text-xs">0%</span>
454
+ </div>
455
+ </td>
456
+ <td class="py-3 px-4">
457
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
458
+ <i data-feather="play" class="w-4 h-4"></i>
459
+ </button>
460
+ </td>
461
+ </tr>
462
+ </tbody>
463
+ </table>
464
+ </div>
465
+ </div>
466
+ </section>
467
+ </main>
468
+
469
+ <!-- Floating Action Button -->
470
+ <button class="fixed bottom-6 right-6 bg-primary-600 text-white p-4 rounded-full shadow-lg hover:bg-primary-700 transition-all hover:scale-110 z-40">
471
+ <i data-feather="message-circle" class="w-6 h-6"></i>
472
+ </button>
473
+
474
+ <script>
475
+ // Initialize Feather Icons
476
+ feather.replace();
477
+
478
+ // Theme Toggle
479
+ function toggleTheme() {
480
+ document.documentElement.classList.toggle('dark');
481
+ localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
482
+ }
483
+
484
+ // Load saved theme
485
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
486
+ document.documentElement.classList.add('dark');
487
+ }
488
+
489
+ // Initialize Performance Chart
490
+ const ctx = document.getElementById('performanceChart').getContext('2d');
491
+ const performanceChart = new Chart(ctx, {
492
+ type: 'line',
493
+ data: {
494
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
495
+ datasets: [{
496
+ label: 'Tasks Completed',
497
+ data: [120, 190, 300, 250, 420, 380, 450],
498
+ borderColor: 'rgb(59, 130, 246)',
499
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
500
+ tension: 0.4
501
+ }, {
502
+ label: 'Active Agents',
503
+ data: [20, 22, 24, 21, 26, 24, 24],
504
+ borderColor: 'rgb(16, 185, 129)',
505
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
506
+ tension: 0.4
507
+ }]
508
+ },
509
+ options: {
510
+ responsive: true,
511
+ maintainAspectRatio: false,
512
+ plugins: {
513
+ legend: {
514
+ display: true,
515
+ position: 'bottom'
516
+ }
517
+ },
518
+ scales: {
519
+ y: {
520
+ beginAtZero: true,
521
+ grid: {
522
+ color: 'rgba(156, 163, 175, 0.1)'
523
+ }
524
+ },
525
+ x: {
526
+ grid: {
527
+ display: false
528
+ }
529
+ }
530
+ }
531
+ }
532
+ });
533
+
534
+ // Simulate real-time updates
535
+ setInterval(() => {
536
+ // Update random agent status
537
+ const agents = document.querySelectorAll('.space-y-4 > div');
538
+ if (agents.length > 0) {
539
+ const randomAgent = agents[Math.floor(Math.random() * agents.length)];
540
+ const progressBar = randomAgent.querySelector('.bg-primary-600, .bg-yellow-600');
541
+ if (progressBar) {
542
+ const currentWidth = parseInt(progressBar.style.width);
543
+ const newWidth = Math.min(100, currentWidth + Math.random() * 10);
544
+ progressBar.style.width = newWidth + '%';
545
+ const percentText = progressBar.parentElement.parentElement.querySelector('.text-xs:last-child');
546
+ if (percentText) {
547
+ percentText.textContent = Math.round(newWidth) + '%';
548
+ }
549
+ }
550
+ }
551
+ }, 3000);
552
+ </script>
553
+ </body>
554
  </html>
tasks.html ADDED
@@ -0,0 +1,646 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tasks - KODE 1</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 50: '#f0f9ff',
19
+ 100: '#e0f2fe',
20
+ 200: '#bae6fd',
21
+ 300: '#7dd3fc',
22
+ 400: '#38bdf8',
23
+ 500: '#0ea5e9',
24
+ 600: '#0284c7',
25
+ 700: '#0369a1',
26
+ 800: '#075985',
27
+ 900: '#0c4a6e',
28
+ },
29
+ secondary: {
30
+ 50: '#f8fafc',
31
+ 100: '#f1f5f9',
32
+ 200: '#e2e8f0',
33
+ 300: '#cbd5e1',
34
+ 400: '#94a3b8',
35
+ 500: '#64748b',
36
+ 600: '#475569',
37
+ 700: '#334155',
38
+ 800: '#1e293b',
39
+ 900: '#0f172a',
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ </script>
46
+ </head>
47
+ <body class="bg-secondary-50 dark:bg-secondary-900 text-secondary-900 dark:text-secondary-100">
48
+ <!-- Navigation -->
49
+ <nav class="bg-white dark:bg-secondary-800 border-b border-secondary-200 dark:border-secondary-700 fixed w-full top-0 z-50">
50
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
51
+ <div class="flex justify-between h-16">
52
+ <div class="flex items-center">
53
+ <div class="flex-shrink-0 flex items-center">
54
+ <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
55
+ <i data-feather="cpu" class="w-6 h-6 text-white"></i>
56
+ </div>
57
+ <span class="ml-3 text-xl font-bold">KODE 1</span>
58
+ </div>
59
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
60
+ <a href="index.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Dashboard</a>
61
+ <a href="agents.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Agents</a>
62
+ <a href="#" class="text-primary-600 dark:text-primary-400 px-3 py-2 text-sm font-medium">Tasks</a>
63
+ <a href="workflows.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Workflows</a>
64
+ <a href="analytics.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Analytics</a>
65
+ </div>
66
+ </div>
67
+ <div class="flex items-center space-x-4">
68
+ <button onclick="toggleTheme()" class="p-2 rounded-lg hover:bg-secondary-100 dark:hover:bg-secondary-700">
69
+ <i data-feather="moon" class="w-5 h-5 dark:hidden"></i>
70
+ <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
71
+ </button>
72
+ <div class="relative">
73
+ <button class="p-2 rounded-lg hover:bg-secondary-100 dark:hover:bg-secondary-700">
74
+ <i data-feather="bell" class="w-5 h-5"></i>
75
+ <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
76
+ </button>
77
+ </div>
78
+ <div class="flex items-center space-x-2">
79
+ <img src="http://static.photos/people/40x40/1" alt="User" class="w-8 h-8 rounded-full">
80
+ <span class="text-sm font-medium">John Doe</span>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </nav>
86
+
87
+ <!-- Main Content -->
88
+ <main class="pt-16">
89
+ <!-- Header -->
90
+ <section class="bg-white dark:bg-secondary-800 border-b border-secondary-200 dark:border-secondary-700">
91
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
92
+ <div class="flex justify-between items-center">
93
+ <div>
94
+ <h1 class="text-2xl font-bold">Task Management</h1>
95
+ <p class="text-secondary-500 dark:text-secondary-400">Monitor and manage all active and queued tasks</p>
96
+ </div>
97
+ <button onclick="openCreateTaskModal()" class="bg-primary-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-primary-700 transition-colors flex items-center space-x-2">
98
+ <i data-feather="plus" class="w-5 h-5"></i>
99
+ <span>Create Task</span>
100
+ </button>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- Stats Overview -->
106
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
107
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
108
+ <div class="bg-white dark:bg-secondary-800 rounded-lg shadow p-4">
109
+ <div class="flex items-center justify-between">
110
+ <div>
111
+ <p class="text-sm text-secondary-500 dark:text-secondary-400">Total Tasks</p>
112
+ <p class="text-2xl font-bold">2,456</p>
113
+ </div>
114
+ <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-lg">
115
+ <i data-feather="layers" class="w-6 h-6 text-blue-600 dark:text-blue-400"></i>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ <div class="bg-white dark:bg-secondary-800 rounded-lg shadow p-4">
120
+ <div class="flex items-center justify-between">
121
+ <div>
122
+ <p class="text-sm text-secondary-500 dark:text-secondary-400">Running</p>
123
+ <p class="text-2xl font-bold text-green-600">142</p>
124
+ </div>
125
+ <div class="bg-green-100 dark:bg-green-900 p-3 rounded-lg">
126
+ <i data-feather="play-circle" class="w-6 h-6 text-green-600 dark:text-green-400"></i>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <div class="bg-white dark:bg-secondary-800 rounded-lg shadow p-4">
131
+ <div class="flex items-center justify-between">
132
+ <div>
133
+ <p class="text-sm text-secondary-500 dark:text-secondary-400">Queued</p>
134
+ <p class="text-2xl font-bold text-yellow-600">58</p>
135
+ </div>
136
+ <div class="bg-yellow-100 dark:bg-yellow-900 p-3 rounded-lg">
137
+ <i data-feather="clock" class="w-6 h-6 text-yellow-600 dark:text-yellow-400"></i>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ <div class="bg-white dark:bg-secondary-800 rounded-lg shadow p-4">
142
+ <div class="flex items-center justify-between">
143
+ <div>
144
+ <p class="text-sm text-secondary-500 dark:text-secondary-400">Failed</p>
145
+ <p class="text-2xl font-bold text-red-600">12</p>
146
+ </div>
147
+ <div class="bg-red-100 dark:bg-red-900 p-3 rounded-lg">
148
+ <i data-feather="alert-circle" class="w-6 h-6 text-red-600 dark:text-red-400"></i>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- Task Queue -->
156
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
157
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg">
158
+ <div class="p-6 border-b border-secondary-200 dark:border-secondary-700">
159
+ <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
160
+ <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
161
+ <div class="relative">
162
+ <input type="text" placeholder="Search tasks..." class="pl-10 pr-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
163
+ <i data-feather="search" class="absolute left-3 top-2.5 w-5 h-5 text-secondary-400"></i>
164
+ </div>
165
+ <select class="px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
166
+ <option>All Status</option>
167
+ <option>Running</option>
168
+ <option>Queued</option>
169
+ <option>Completed</option>
170
+ <option>Failed</option>
171
+ </select>
172
+ <select class="px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
173
+ <option>All Agents</option>
174
+ <option>CodeAgent Pro</option>
175
+ <option>WriterAI</option>
176
+ <option>DataAnalyzer</option>
177
+ <option>DesignBot</option>
178
+ </select>
179
+ </div>
180
+ <div class="flex items-center space-x-2">
181
+ <button class="px-4 py-2 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 rounded-lg text-sm font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors">
182
+ Export CSV
183
+ </button>
184
+ <button class="px-4 py-2 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 rounded-lg text-sm font-medium hover:bg-red-200 dark:hover:bg-red-800 transition-colors">
185
+ Clear Failed
186
+ </button>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ <div class="overflow-x-auto">
191
+ <table class="w-full">
192
+ <thead class="bg-secondary-50 dark:bg-secondary-900">
193
+ <tr>
194
+ <th class="text-left py-3 px-6 font-medium text-secondary-700 dark:text-secondary-300">Task ID</th>
195
+ <th class="text-left py-3 px-6 font-medium text-secondary-700 dark:text-secondary-300">Name</th>
196
+ <th class="text-left py-3 px-6 font-medium text-secondary-700 dark:text-secondary-300">Agent</th>
197
+ <th class="text-left py-3 px-6 font-medium text-secondary-700 dark:text-secondary-300">Priority</th>
198
+ <th class="text-left py-3 px-6 font-medium text-secondary-700 dark:text-secondary-300">Status</th>
199
+ <th class="text-left py-3 px-6 font-medium text-secondary-700 dark:text-secondary-300">Progress</th>
200
+ <th class="text-left py-3 px-6 font-medium text-secondary-700 dark:text-secondary-300">Created</th>
201
+ <th class="text-left py-3 px-6 font-medium text-secondary-700 dark:text-secondary-300">Actions</th>
202
+ </tr>
203
+ </thead>
204
+ <tbody class="divide-y divide-secondary-200 dark:divide-secondary-700">
205
+ <!-- Task Row 1 -->
206
+ <tr class="hover:bg-secondary-50 dark:hover:bg-secondary-900">
207
+ <td class="py-4 px-6">
208
+ <span class="text-sm font-mono">#TK001</span>
209
+ </td>
210
+ <td class="py-4 px-6">
211
+ <div>
212
+ <p class="text-sm font-medium">API Integration</p>
213
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">Connect to external payment API</p>
214
+ </div>
215
+ </td>
216
+ <td class="py-4 px-6">
217
+ <div class="flex items-center space-x-2">
218
+ <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
219
+ <i data-feather="code" class="w-4 h-4 text-white"></i>
220
+ </div>
221
+ <span class="text-sm">CodeAgent Pro</span>
222
+ </div>
223
+ </td>
224
+ <td class="py-4 px-6">
225
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
226
+ High
227
+ </span>
228
+ </td>
229
+ <td class="py-4 px-6">
230
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
231
+ Running
232
+ </span>
233
+ </td>
234
+ <td class="py-4 px-6">
235
+ <div class="flex items-center space-x-2">
236
+ <div class="w-24 bg-secondary-200 dark:bg-secondary-700 rounded-full h-2">
237
+ <div class="bg-green-600 h-2 rounded-full" style="width: 65%"></div>
238
+ </div>
239
+ <span class="text-xs text-secondary-600 dark:text-secondary-400">65%</span>
240
+ </div>
241
+ </td>
242
+ <td class="py-4 px-6">
243
+ <span class="text-sm text-secondary-600 dark:text-secondary-400">5 min ago</span>
244
+ </td>
245
+ <td class="py-4 px-6">
246
+ <div class="flex items-center space-x-2">
247
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="Pause">
248
+ <i data-feather="pause" class="w-4 h-4"></i>
249
+ </button>
250
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="View Details">
251
+ <i data-feather="eye" class="w-4 h-4"></i>
252
+ </button>
253
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="Cancel">
254
+ <i data-feather="x-circle" class="w-4 h-4"></i>
255
+ </button>
256
+ </div>
257
+ </td>
258
+ </tr>
259
+
260
+ <!-- Task Row 2 -->
261
+ <tr class="hover:bg-secondary-50 dark:hover:bg-secondary-900">
262
+ <td class="py-4 px-6">
263
+ <span class="text-sm font-mono">#TK002</span>
264
+ </td>
265
+ <td class="py-4 px-6">
266
+ <div>
267
+ <p class="text-sm font-medium">Blog Post Creation</p>
268
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">Write article about AI trends</p>
269
+ </div>
270
+ </td>
271
+ <td class="py-4 px-6">
272
+ <div class="flex items-center space-x-2">
273
+ <div class="w-8 h-8 bg-gradient-to-br from-green-500 to-teal-600 rounded-lg flex items-center justify-center">
274
+ <i data-feather="edit-3" class="w-4 h-4 text-white"></i>
275
+ </div>
276
+ <span class="text-sm">WriterAI</span>
277
+ </div>
278
+ </td>
279
+ <td class="py-4 px-6">
280
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
281
+ Medium
282
+ </span>
283
+ </td>
284
+ <td class="py-4 px-6">
285
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
286
+ Queued
287
+ </span>
288
+ </td>
289
+ <td class="py-4 px-6">
290
+ <div class="flex items-center space-x-2">
291
+ <div class="w-24 bg-secondary-200 dark:bg-secondary-700 rounded-full h-2">
292
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
293
+ </div>
294
+ <span class="text-xs text-secondary-600 dark:text-secondary-400">0%</span>
295
+ </div>
296
+ </td>
297
+ <td class="py-4 px-6">
298
+ <span class="text-sm text-secondary-600 dark:text-secondary-400">10 min ago</span>
299
+ </td>
300
+ <td class="py-4 px-6">
301
+ <div class="flex items-center space-x-2">
302
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="Start">
303
+ <i data-feather="play" class="w-4 h-4"></i>
304
+ </button>
305
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="View Details">
306
+ <i data-feather="eye" class="w-4 h-4"></i>
307
+ </button>
308
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="Delete">
309
+ <i data-feather="trash-2" class="w-4 h-4"></i>
310
+ </button>
311
+ </div>
312
+ </td>
313
+ </tr>
314
+
315
+ <!-- Task Row 3 -->
316
+ <tr class="hover:bg-secondary-50 dark:hover:bg-secondary-900">
317
+ <td class="py-4 px-6">
318
+ <span class="text-sm font-mono">#TK003</span>
319
+ </td>
320
+ <td class="py-4 px-6">
321
+ <div>
322
+ <p class="text-sm font-medium">Sales Report Analysis</p>
323
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">Generate Q4 2024 insights</p>
324
+ </div>
325
+ </td>
326
+ <td class="py-4 px-6">
327
+ <div class="flex items-center space-x-2">
328
+ <div class="w-8 h-8 bg-gradient-to-br from-orange-500 to-red-600 rounded-lg flex items-center justify-center">
329
+ <i data-feather="bar-chart-2" class="w-4 h-4 text-white"></i>
330
+ </div>
331
+ <span class="text-sm">DataAnalyzer</span>
332
+ </div>
333
+ </td>
334
+ <td class="py-4 px-6">
335
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
336
+ Low
337
+ </span>
338
+ </td>
339
+ <td class="py-4 px-6">
340
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
341
+ Completed
342
+ </span>
343
+ </td>
344
+ <td class="py-4 px-6">
345
+ <div class="flex items-center space-x-2">
346
+ <div class="w-24 bg-secondary-200 dark:bg-secondary-700 rounded-full h-2">
347
+ <div class="bg-gray-600 h-2 rounded-full" style="width: 100%"></div>
348
+ </div>
349
+ <span class="text-xs text-secondary-600 dark:text-secondary-400">100%</span>
350
+ </div>
351
+ </td>
352
+ <td class="py-4 px-6">
353
+ <span class="text-sm text-secondary-600 dark:text-secondary-400">1 hour ago</span>
354
+ </td>
355
+ <td class="py-4 px-6">
356
+ <div class="flex items-center space-x-2">
357
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="View Details">
358
+ <i data-feather="eye" class="w-4 h-4"></i>
359
+ </button>
360
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="Download">
361
+ <i data-feather="download" class="w-4 h-4"></i>
362
+ </button>
363
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="Retry">
364
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
365
+ </button>
366
+ </div>
367
+ </td>
368
+ </tr>
369
+
370
+ <!-- Task Row 4 -->
371
+ <tr class="hover:bg-secondary-50 dark:hover:bg-secondary-900">
372
+ <td class="py-4 px-6">
373
+ <span class="text-sm font-mono">#TK004</span>
374
+ </td>
375
+ <td class="py-4 px-6">
376
+ <div>
377
+ <p class="text-sm font-medium">UI Design Mockup</p>
378
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">Create dashboard wireframes</p>
379
+ </div>
380
+ </td>
381
+ <td class="py-4 px-6">
382
+ <div class="flex items-center space-x-2">
383
+ <div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center">
384
+ <i data-feather="image" class="w-4 h-4 text-white"></i>
385
+ </div>
386
+ <span class="text-sm">DesignBot</span>
387
+ </div>
388
+ </td>
389
+ <td class="py-4 px-6">
390
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
391
+ High
392
+ </span>
393
+ </td>
394
+ <td class="py-4 px-6">
395
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
396
+ Failed
397
+ </span>
398
+ </td>
399
+ <td class="py-4 px-6">
400
+ <div class="flex items-center space-x-2">
401
+ <div class="w-24 bg-secondary-200 dark:bg-secondary-700 rounded-full h-2">
402
+ <div class="bg-red-600 h-2 rounded-full" style="width: 35%"></div>
403
+ </div>
404
+ <span class="text-xs text-secondary-600 dark:text-secondary-400">35%</span>
405
+ </div>
406
+ </td>
407
+ <td class="py-4 px-6">
408
+ <span class="text-sm text-secondary-600 dark:text-secondary-400">2 hours ago</span>
409
+ </td>
410
+ <td class="py-4 px-6">
411
+ <div class="flex items-center space-x-2">
412
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="Retry">
413
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
414
+ </button>
415
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="View Logs">
416
+ <i data-feather="file-text" class="w-4 h-4"></i>
417
+ </button>
418
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="Delete">
419
+ <i data-feather="trash-2" class="w-4 h-4"></i>
420
+ </button>
421
+ </div>
422
+ </td>
423
+ </tr>
424
+
425
+ <!-- Task Row 5 -->
426
+ <tr class="hover:bg-secondary-50 dark:hover:bg-secondary-900">
427
+ <td class="py-4 px-6">
428
+ <span class="text-sm font-mono">#TK005</span>
429
+ </td>
430
+ <td class="py-4 px-6">
431
+ <div>
432
+ <p class="text-sm font-medium">Security Audit</p>
433
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">Run comprehensive security check</p>
434
+ </div>
435
+ </td>
436
+ <td class="py-4 px-6">
437
+ <div class="flex items-center space-x-2">
438
+ <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-lg flex items-center justify-center">
439
+ <i data-feather="shield" class="w-4 h-4 text-white"></i>
440
+ </div>
441
+ <span class="text-sm">SecurityGuard</span>
442
+ </div>
443
+ </td>
444
+ <td class="py-4 px-6">
445
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
446
+ High
447
+ </span>
448
+ </td>
449
+ <td class="py-4 px-6">
450
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
451
+ Running
452
+ </span>
453
+ </td>
454
+ <td class="py-4 px-6">
455
+ <div class="flex items-center space-x-2">
456
+ <div class="w-24 bg-secondary-200 dark:bg-secondary-700 rounded-full h-2">
457
+ <div class="bg-green-600 h-2 rounded-full" style="width: 89%"></div>
458
+ </div>
459
+ <span class="text-xs text-secondary-600 dark:text-secondary-400">89%</span>
460
+ </div>
461
+ </td>
462
+ <td class="py-4 px-6">
463
+ <span class="text-sm text-secondary-600 dark:text-secondary-400">3 hours ago</span>
464
+ </td>
465
+ <td class="py-4 px-6">
466
+ <div class="flex items-center space-x-2">
467
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="Pause">
468
+ <i data-feather="pause" class="w-4 h-4"></i>
469
+ </button>
470
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="View Details">
471
+ <i data-feather="eye" class="w-4 h-4"></i>
472
+ </button>
473
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded" title="Cancel">
474
+ <i data-feather="x-circle" class="w-4 h-4"></i>
475
+ </button>
476
+ </div>
477
+ </td>
478
+ </tr>
479
+ </tbody>
480
+ </table>
481
+ </div>
482
+ <div class="p-4 border-t border-secondary-200 dark:border-secondary-700">
483
+ <div class="flex items-center justify-between">
484
+ <p class="text-sm text-secondary-600 dark:text-secondary-400">
485
+ Showing 1-5 of 2,456 tasks
486
+ </p>
487
+ <div class="flex items-center space-x-2">
488
+ <button class="px-3 py-1 border border-secondary-300 dark:border-secondary-600 rounded-lg text-sm hover:bg-secondary-100 dark:hover:bg-secondary-700">
489
+ Previous
490
+ </button>
491
+ <button class="px-3 py-1 bg-primary-600 text-white rounded-lg text-sm">1</button>
492
+ <button class="px-3 py-1 border border-secondary-300 dark:border-secondary-600 rounded-lg text-sm hover:bg-secondary-100 dark:hover:bg-secondary-700">2</button>
493
+ <button class="px-3 py-1 border border-secondary-300 dark:border-secondary-600 rounded-lg text-sm hover:bg-secondary-100 dark:hover:bg-secondary-700">3</button>
494
+ <span class="px-2">...</span>
495
+ <button class="px-3 py-1 border border-secondary-300 dark:border-secondary-600 rounded-lg text-sm hover:bg-secondary-100 dark:hover:bg-secondary-700">492</button>
496
+ <button class="px-3 py-1 border border-secondary-300 dark:border-secondary-600 rounded-lg text-sm hover:bg-secondary-100 dark:hover:bg-secondary-700">
497
+ Next
498
+ </button>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </section>
504
+ </main>
505
+
506
+ <!-- Create Task Modal -->
507
+ <div id="createTaskModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
508
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
509
+ <div class="p-6 border-b border-secondary-200 dark:border-secondary-700">
510
+ <div class="flex justify-between items-center">
511
+ <h2 class="text-xl font-bold">Create New Task</h2>
512
+ <button onclick="closeCreateTaskModal()" class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg">
513
+ <i data-feather="x" class="w-5 h-5"></i>
514
+ </button>
515
+ </div>
516
+ </div>
517
+ <div class="p-6 space-y-6">
518
+ <div>
519
+ <label class="block text-sm font-medium mb-2">Task Name</label>
520
+ <input type="text" placeholder="Enter task name" class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
521
+ </div>
522
+ <div>
523
+ <label class="block text-sm font-medium mb-2">Description</label>
524
+ <textarea placeholder="Describe the task in detail" rows="3" class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
525
+ </div>
526
+ <div class="grid grid-cols-2 gap-4">
527
+ <div>
528
+ <label class="block text-sm font-medium mb-2">Assign Agent</label>
529
+ <select class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
530
+ <option>Auto-assign</option>
531
+ <option>CodeAgent Pro</option>
532
+ <option>WriterAI</option>
533
+ <option>DataAnalyzer</option>
534
+ <option>DesignBot</option>
535
+ <option>SecurityGuard</option>
536
+ </select>
537
+ </div>
538
+ <div>
539
+ <label class="block text-sm font-medium mb-2">Priority</label>
540
+ <select class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
541
+ <option>Low</option>
542
+ <option>Medium</option>
543
+ <option>High</option>
544
+ <option>Critical</option>
545
+ </select>
546
+ </div>
547
+ </div>
548
+ <div>
549
+ <label class="block text-sm font-medium mb-2">Task Type</label>
550
+ <div class="grid grid-cols-3 gap-3">
551
+ <label class="flex items-center space-x-2 cursor-pointer">
552
+ <input type="radio" name="taskType" class="text-primary-600 focus:ring-primary-500">
553
+ <span class="text-sm">Development</span>
554
+ </label>
555
+ <label class="flex items-center space-x-2 cursor-pointer">
556
+ <input type="radio" name="taskType" class="text-primary-600 focus:ring-primary-500">
557
+ <span class="text-sm">Writing</span>
558
+ </label>
559
+ <label class="flex items-center space-x-2 cursor-pointer">
560
+ <input type="radio" name="taskType" class="text-primary-600 focus:ring-primary-500">
561
+ <span class="text-sm">Analysis</span>
562
+ </label>
563
+ <label class="flex items-center space-x-2 cursor-pointer">
564
+ <input type="radio" name="taskType" class="text-primary-600 focus:ring-primary-500">
565
+ <span class="text-sm">Design</span>
566
+ </label>
567
+ <label class="flex items-center space-x-2 cursor-pointer">
568
+ <input type="radio" name="taskType" class="text-primary-600 focus:ring-primary-500">
569
+ <span class="text-sm">Security</span>
570
+ </label>
571
+ <label class="flex items-center space-x-2 cursor-pointer">
572
+ <input type="radio" name="taskType" class="text-primary-600 focus:ring-primary-500">
573
+ <span class="text-sm">Other</span>
574
+ </label>
575
+ </div>
576
+ </div>
577
+ <div>
578
+ <label class="block text-sm font-medium mb-2">Dependencies</label>
579
+ <input type="text" placeholder="Enter task IDs if any dependencies" class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
580
+ </div>
581
+ </div>
582
+ <div class="p-6 border-t border-secondary-200 dark:border-secondary-700">
583
+ <div class="flex justify-end space-x-3">
584
+ <button onclick="closeCreateTaskModal()" class="px-4 py-2 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 rounded-lg font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors">
585
+ Cancel
586
+ </button>
587
+ <button onclick="createTask()" class="px-4 py-2 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700 transition-colors">
588
+ Create Task
589
+ </button>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+
595
+ <script>
596
+ feather.replace();
597
+
598
+ function toggleTheme() {
599
+ document.documentElement.classList.toggle('dark');
600
+ localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
601
+ }
602
+
603
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
604
+ document.documentElement.classList.add('dark');
605
+ }
606
+
607
+ function openCreateTaskModal() {
608
+ document.getElementById('createTaskModal').classList.remove('hidden');
609
+ }
610
+
611
+ function closeCreateTaskModal() {
612
+ document.getElementById('createTaskModal').classList.add('hidden');
613
+ }
614
+
615
+ function createTask() {
616
+ closeCreateTaskModal();
617
+ const successMessage = document.createElement('div');
618
+ successMessage.className = 'fixed top-20 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2';
619
+ successMessage.innerHTML = '<i data-feather="check-circle" class="w-5 h-5"></i><span>Task created successfully!</span>';
620
+ document.body.appendChild(successMessage);
621
+ feather.replace();
622
+ setTimeout(() => {
623
+ successMessage.remove();
624
+ }, 3000);
625
+ }
626
+
627
+ // Simulate real-time progress updates
628
+ setInterval(() => {
629
+ const progressBars = document.querySelectorAll('.bg-green-600, .bg-red-600');
630
+ progressBars.forEach(bar => {
631
+ if (Math.random() > 0.7) {
632
+ const currentWidth = parseInt(bar.style.width);
633
+ if (currentWidth < 100 && currentWidth > 0) {
634
+ const newWidth = Math.min(100, currentWidth + Math.random() * 5);
635
+ bar.style.width = newWidth + '%';
636
+ const percentText = bar.parentElement.parentElement.querySelector('.text-xs:last-child');
637
+ if (percentText) {
638
+ percentText.textContent = Math.round(newWidth) + '%';
639
+ }
640
+ }
641
+ }
642
+ });
643
+ }, 2000);
644
+ </script>
645
+ </body>
646
+ </html>
workflows.html ADDED
@@ -0,0 +1,434 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Workflows - KODE 1</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 50: '#f0f9ff',
19
+ 100: '#e0f2fe',
20
+ 200: '#bae6fd',
21
+ 300: '#7dd3fc',
22
+ 400: '#38bdf8',
23
+ 500: '#0ea5e9',
24
+ 600: '#0284c7',
25
+ 700: '#0369a1',
26
+ 800: '#075985',
27
+ 900: '#0c4a6e',
28
+ },
29
+ secondary: {
30
+ 50: '#f8fafc',
31
+ 100: '#f1f5f9',
32
+ 200: '#e2e8f0',
33
+ 300: '#cbd5e1',
34
+ 400: '#94a3b8',
35
+ 500: '#64748b',
36
+ 600: '#475569',
37
+ 700: '#334155',
38
+ 800: '#1e293b',
39
+ 900: '#0f172a',
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ </script>
46
+ </head>
47
+ <body class="bg-secondary-50 dark:bg-secondary-900 text-secondary-900 dark:text-secondary-100">
48
+ <!-- Navigation -->
49
+ <nav class="bg-white dark:bg-secondary-800 border-b border-secondary-200 dark:border-secondary-700 fixed w-full top-0 z-50">
50
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
51
+ <div class="flex justify-between h-16">
52
+ <div class="flex items-center">
53
+ <div class="flex-shrink-0 flex items-center">
54
+ <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
55
+ <i data-feather="cpu" class="w-6 h-6 text-white"></i>
56
+ </div>
57
+ <span class="ml-3 text-xl font-bold">KODE 1</span>
58
+ </div>
59
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
60
+ <a href="index.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Dashboard</a>
61
+ <a href="agents.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Agents</a>
62
+ <a href="tasks.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Tasks</a>
63
+ <a href="#" class="text-primary-600 dark:text-primary-400 px-3 py-2 text-sm font-medium">Workflows</a>
64
+ <a href="analytics.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Analytics</a>
65
+ </div>
66
+ </div>
67
+ <div class="flex items-center space-x-4">
68
+ <button onclick="toggleTheme()" class="p-2 rounded-lg hover:bg-secondary-100 dark:hover:bg-secondary-700">
69
+ <i data-feather="moon" class="w-5 h-5 dark:hidden"></i>
70
+ <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
71
+ </button>
72
+ <div class="relative">
73
+ <button class="p-2 rounded-lg hover:bg-secondary-100 dark:hover:bg-secondary-700">
74
+ <i data-feather="bell" class="w-5 h-5"></i>
75
+ <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
76
+ </button>
77
+ </div>
78
+ <div class="flex items-center space-x-2">
79
+ <img src="http://static.photos/people/40x40/1" alt="User" class="w-8 h-8 rounded-full">
80
+ <span class="text-sm font-medium">John Doe</span>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </nav>
86
+
87
+ <!-- Main Content -->
88
+ <main class="pt-16">
89
+ <!-- Header -->
90
+ <section class="bg-white dark:bg-secondary-800 border-b border-secondary-200 dark:border-secondary-700">
91
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
92
+ <div class="flex justify-between items-center">
93
+ <div>
94
+ <h1 class="text-2xl font-bold">Workflow Designer</h1>
95
+ <p class="text-secondary-500 dark:text-secondary-400">Design and automate complex multi-agent workflows</p>
96
+ </div>
97
+ <div class="flex space-x-3">
98
+ <button onclick="openTemplateModal()" class="bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 px-6 py-2 rounded-lg font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600 transition-colors flex items-center space-x-2">
99
+ <i data-feather="file-text" class="w-5 h-5"></i>
100
+ <span>Templates</span>
101
+ </button>
102
+ <button onclick="openCreateWorkflowModal()" class="bg-primary-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-primary-700 transition-colors flex items-center space-x-2">
103
+ <i data-feather="plus" class="w-5 h-5"></i>
104
+ <span>Create Workflow</span>
105
+ </button>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </section>
110
+
111
+ <!-- Workflow Canvas -->
112
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
113
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden">
114
+ <div class="p-4 border-b border-secondary-200 dark:border-secondary-700 bg-secondary-50 dark:bg-secondary-900">
115
+ <div class="flex items-center justify-between">
116
+ <div class="flex items-center space-x-4">
117
+ <button class="p-2 hover:bg-secondary-200 dark:hover:bg-secondary-700 rounded-lg">
118
+ <i data-feather="mouse-pointer" class="w-5 h-5"></i>
119
+ </button>
120
+ <button class="p-2 hover:bg-secondary-200 dark:hover:bg-secondary-700 rounded-lg">
121
+ <i data-feather="move" class="w-5 h-5"></i>
122
+ </button>
123
+ <div class="h-6 w-px bg-secondary-300 dark:bg-secondary-600"></div>
124
+ <button class="p-2 hover:bg-secondary-200 dark:hover:bg-secondary-700 rounded-lg">
125
+ <i data-feather="zoom-in" class="w-5 h-5"></i>
126
+ </button>
127
+ <button class="p-2 hover:bg-secondary-200 dark:hover:bg-secondary-700 rounded-lg">
128
+ <i data-feather="zoom-out" class="w-5 h-5"></i>
129
+ </button>
130
+ <button class="p-2 hover:bg-secondary-200 dark:hover:bg-secondary-700 rounded-lg">
131
+ <i data-feather="maximize" class="w-5 h-5"></i>
132
+ </button>
133
+ </div>
134
+ <div class="flex items-center space-x-2">
135
+ <button class="px-3 py-1 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 rounded-lg text-sm font-medium hover:bg-secondary-200 dark:hover:bg-secondary-600">
136
+ Save Draft
137
+ </button>
138
+ <button class="px-3 py-1 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700">
139
+ Publish
140
+ </button>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ <div class="p-8 bg-gradient-to-br from-secondary-50 to-secondary-100 dark:from-secondary-900 dark:to-secondary-800 min-h-[600px] relative">
145
+ <!-- Workflow Nodes -->
146
+ <div class="absolute top-8 left-8">
147
+ <div class="bg-white dark:bg-secondary-800 rounded-lg shadow-lg p-4 border-2 border-primary-500">
148
+ <div class="flex items-center space-x-2 mb-2">
149
+ <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
150
+ <i data-feather="play" class="w-4 h-4 text-white"></i>
151
+ </div>
152
+ <span class="font-semibold text-sm">Start</span>
153
+ </div>
154
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">Trigger: Manual</p>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Connection Line -->
159
+ <svg class="absolute top-16 left-32" width="100" height="2">
160
+ <line x1="0" y1="1" x2="100" y2="1" stroke="#0ea5e9" stroke-width="2"/>
161
+ </svg>
162
+
163
+ <!-- Node 1 -->
164
+ <div class="absolute top-8 left-40">
165
+ <div class="bg-white dark:bg-secondary-800 rounded-lg shadow-lg p-4 border-2 border-secondary-300 dark:border-secondary-600">
166
+ <div class="flex items-center space-x-2 mb-2">
167
+ <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
168
+ <i data-feather="code" class="w-4 h-4 text-white"></i>
169
+ </div>
170
+ <span class="font-semibold text-sm">CodeAgent Pro</span>
171
+ </div>
172
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">Analyze requirements</p>
173
+ <div class="mt-2 pt-2 border-t border-secondary-200 dark:border-secondary-700">
174
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
175
+ Running
176
+ </span>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Connection Line 2 -->
182
+ <svg class="absolute top-16 left-64" width="100" height="2">
183
+ <line x1="0" y1="1" x2="100" y2="1" stroke="#0ea5e9" stroke-width="2"/>
184
+ </svg>
185
+
186
+ <!-- Decision Node -->
187
+ <div class="absolute top-8 left-72">
188
+ <div class="bg-white dark:bg-secondary-800 rounded-lg shadow-lg p-4 border-2 border-yellow-500">
189
+ <div class="flex items-center space-x-2 mb-2">
190
+ <div class="w-8 h-8 bg-yellow-500 rounded-lg flex items-center justify-center">
191
+ <i data-feather="git-branch" class="w-4 h-4 text-white"></i>
192
+ </div>
193
+ <span class="font-semibold text-sm">Decision</span>
194
+ </div>
195
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">Success?</p>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Branch Lines -->
200
+ <svg class="absolute top-24 left-80" width="2" height="60">
201
+ <line x1="1" y1="0" x2="1" y2="60" stroke="#0ea5e9" stroke-width="2"/>
202
+ </svg>
203
+ <svg class="absolute top-24 left-88" width="80" height="60">
204
+ <line x1="0" y1="0" x2="80" y2="60" stroke="#0ea5e9" stroke-width="2"/>
205
+ </svg>
206
+
207
+ <!-- Node 2 - Success Path -->
208
+ <div class="absolute top-36 left-64">
209
+ <div class="bg-white dark:bg-secondary-800 rounded-lg shadow-lg p-4 border-2 border-secondary-300 dark:border-secondary-600">
210
+ <div class="flex items-center space-x-2 mb-2">
211
+ <div class="w-8 h-8 bg-gradient-to-br from-green-500 to-teal-600 rounded-lg flex items-center justify-center">
212
+ <i data-feather="edit-3" class="w-4 h-4 text-white"></i>
213
+ </div>
214
+ <span class="font-semibold text-sm">WriterAI</span>
215
+ </div>
216
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">Generate documentation</p>
217
+ <div class="mt-2 pt-2 border-t border-secondary-200 dark:border-secondary-700">
218
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
219
+ Waiting
220
+ </span>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Node 3 - Failure Path -->
226
+ <div class="absolute top-36 left-40">
227
+ <div class="bg-white dark:bg-secondary-800 rounded-lg shadow-lg p-4 border-2 border-red-500">
228
+ <div class="flex items-center space-x-2 mb-2">
229
+ <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-lg flex items-center justify-center">
230
+ <i data-feather="shield" class="w-4 h-4 text-white"></i>
231
+ </div>
232
+ <span class="font-semibold text-sm">SecurityGuard</span>
233
+ </div>
234
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">Error analysis</p>
235
+ <div class="mt-2 pt-2 border-t border-secondary-200 dark:border-secondary-700">
236
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
237
+ Waiting
238
+ </span>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- End Node -->
244
+ <svg class="absolute top-56 left-80" width="2" height="60">
245
+ <line x1="1" y1="0" x2="1" y2="60" stroke="#0ea5e9" stroke-width="2"/>
246
+ </svg>
247
+ <div class="absolute top-60 left-72">
248
+ <div class="bg-white dark:bg-secondary-800 rounded-lg shadow-lg p-4 border-2 border-secondary-500">
249
+ <div class="flex items-center space-x-2 mb-2">
250
+ <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
251
+ <i data-feather="square" class="w-4 h-4 text-white"></i>
252
+ </div>
253
+ <span class="font-semibold text-sm">End</span>
254
+ </div>
255
+ <p class="text-xs text-secondary-500 dark:text-secondary-400">Workflow complete</p>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Floating Action Buttons -->
260
+ <div class="absolute bottom-4 right-4 flex flex-col space-y-2">
261
+ <button class="bg-white dark:bg-secondary-800 p-3 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
262
+ <i data-feather="plus-circle" class="w-6 h-6 text-primary-600"></i>
263
+ </button>
264
+ <button class="bg-white dark:bg-secondary-800 p-3 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
265
+ <i data-feather="message-circle" class="w-6 h-6 text-secondary-600"></i>
266
+ </button>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- Workflow List -->
273
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
274
+ <h2 class="text-lg font-bold mb-4">Active Workflows</h2>
275
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
276
+ <!-- Workflow Card 1 -->
277
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
278
+ <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2"></div>
279
+ <div class="p-6">
280
+ <div class="flex items-start justify-between mb-4">
281
+ <div>
282
+ <h3 class="font-semibold mb-1">Content Pipeline</h3>
283
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
284
+ Active
285
+ </span>
286
+ </div>
287
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
288
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
289
+ </button>
290
+ </div>
291
+ <p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">Automated content creation and publishing workflow</p>
292
+ <div class="space-y-3">
293
+ <div class="flex items-center justify-between text-sm">
294
+ <span class="text-secondary-500 dark:text-secondary-400">Total Runs</span>
295
+ <span class="font-medium">342</span>
296
+ </div>
297
+ <div class="flex items-center justify-between text-sm">
298
+ <span class="text-secondary-500 dark:text-secondary-400">Success Rate</span>
299
+ <span class="font-medium text-green-600">94.2%</span>
300
+ </div>
301
+ <div class="flex items-center justify-between text-sm">
302
+ <span class="text-secondary-500 dark:text-secondary-400">Avg Duration</span>
303
+ <span class="font-medium">12m 34s</span>
304
+ </div>
305
+ </div>
306
+ <div class="mt-4 pt-4 border-t border-secondary-200 dark:border-secondary-700">
307
+ <div class="flex items-center justify-between">
308
+ <div class="flex -space-x-2">
309
+ <div class="w-6 h-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full border-2 border-white dark:border-secondary-800"></div>
310
+ <div class="w-6 h-6 bg-gradient-to-br from-green-500 to-teal-600 rounded-full border-2 border-white dark:border-secondary-800"></div>
311
+ <div class="w-6 h-6 bg-gradient-to-br from-orange-500 to-red-600 rounded-full border-2 border-white dark:border-secondary-800"></div>
312
+ </div>
313
+ <div class="flex space-x-2">
314
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
315
+ <i data-feather="play" class="w-4 h-4"></i>
316
+ </button>
317
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
318
+ <i data-feather="edit" class="w-4 h-4"></i>
319
+ </button>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Workflow Card 2 -->
327
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
328
+ <div class="bg-gradient-to-r from-green-500 to-teal-600 h-2"></div>
329
+ <div class="p-6">
330
+ <div class="flex items-start justify-between mb-4">
331
+ <div>
332
+ <h3 class="font-semibold mb-1">Data Processing</h3>
333
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
334
+ Active
335
+ </span>
336
+ </div>
337
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
338
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
339
+ </button>
340
+ </div>
341
+ <p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">ETL pipeline for business intelligence</p>
342
+ <div class="space-y-3">
343
+ <div class="flex items-center justify-between text-sm">
344
+ <span class="text-secondary-500 dark:text-secondary-400">Total Runs</span>
345
+ <span class="font-medium">1,892</span>
346
+ </div>
347
+ <div class="flex items-center justify-between text-sm">
348
+ <span class="text-secondary-500 dark:text-secondary-400">Success Rate</span>
349
+ <span class="font-medium text-green-600">98.7%</span>
350
+ </div>
351
+ <div class="flex items-center justify-between text-sm">
352
+ <span class="text-secondary-500 dark:text-secondary-400">Avg Duration</span>
353
+ <span class="font-medium">45m 12s</span>
354
+ </div>
355
+ </div>
356
+ <div class="mt-4 pt-4 border-t border-secondary-200 dark:border-secondary-700">
357
+ <div class="flex items-center justify-between">
358
+ <div class="flex -space-x-2">
359
+ <div class="w-6 h-6 bg-gradient-to-br from-orange-500 to-red-600 rounded-full border-2 border-white dark:border-secondary-800"></div>
360
+ <div class="w-6 h-6 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-full border-2 border-white dark:border-secondary-800"></div>
361
+ </div>
362
+ <div class="flex space-x-2">
363
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
364
+ <i data-feather="play" class="w-4 h-4"></i>
365
+ </button>
366
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
367
+ <i data-feather="edit" class="w-4 h-4"></i>
368
+ </button>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- Workflow Card 3 -->
376
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
377
+ <div class="bg-gradient-to-r from-purple-500 to-pink-600 h-2"></div>
378
+ <div class="p-6">
379
+ <div class="flex items-start justify-between mb-4">
380
+ <div>
381
+ <h3 class="font-semibold mb-1">Security Audit</h3>
382
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
383
+ Scheduled
384
+ </span>
385
+ </div>
386
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
387
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
388
+ </button>
389
+ </div>
390
+ <p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">Automated security scanning and reporting</p>
391
+ <div class="space-y-3">
392
+ <div class="flex items-center justify-between text-sm">
393
+ <span class="text-secondary-500 dark:text-secondary-400">Total Runs</span>
394
+ <span class="font-medium">56</span>
395
+ </div>
396
+ <div class="flex items-center justify-between text-sm">
397
+ <span class="text-secondary-500 dark:text-secondary-400">Success Rate</span>
398
+ <span class="font-medium text-green-600">100%</span>
399
+ </div>
400
+ <div class="flex items-center justify-between text-sm">
401
+ <span class="text-secondary-500 dark:text-secondary-400">Avg Duration</span>
402
+ <span class="font-medium">2h 15m</span>
403
+ </div>
404
+ </div>
405
+ <div class="mt-4 pt-4 border-t border-secondary-200 dark:border-secondary-700">
406
+ <div class="flex items-center justify-between">
407
+ <div class="flex -space-x-2">
408
+ <div class="w-6 h-6 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-full border-2 border-white dark:border-secondary-800"></div>
409
+ </div>
410
+ <div class="flex space-x-2">
411
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
412
+ <i data-feather="play" class="w-4 h-4"></i>
413
+ </button>
414
+ <button class="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded">
415
+ <i data-feather="edit" class="w-4 h-4"></i>
416
+ </button>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </section>
424
+ </main>
425
+
426
+ <!-- Create Workflow Modal -->
427
+ <div id="createWorkflowModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
428
+ <div class="bg-white dark:bg-secondary-800 rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
429
+ <div class="p-6 border-b border-secondary-200 dark:border-secondary-700">
430
+ <div class="flex justify-between items-center">
431
+ <h2 class="text-xl font-bold">Create New Workflow</h2>
432
+ <button onclick="closeCreateWorkflowModal()" class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg">
433
+ </body>
434
+ </html>