Hugging Face's logo

Spaces:
yourgui
/
undefined
Running

App Files Community
yourgui commited on
Commit
e3c45a3
·
verified ·
1 Parent(s): 9ff1f13

🧠 Feedback — Agent Team Concept

Browse files

• The user (or “operator”) will have a lot of agents, forming a personal agent team.
• These agents are micro-specialists — each one is focused on accomplishing a specific type of task (e.g., follow-ups, investor research, writing outreach emails, etc.).
• Think of it like Elon Musk’s team of 8–10 close people — but here, it’s digital.
◦ Equivalent roles: Advisor, Right-hand, or Director to CEO (we’ll define a sexier title later).
• A key function is agent management — overseeing, assigning, and coordinating agents.
• The interface should let the user click on any agent (e.g., “Investor Bot”) to access its workspace or issue commands directly.

Files changed (4) hide show
  1. agent_workspace.html +228 -0
  2. agents.html +12 -12
  3. dashboard.html +3 -3
  4. index.html +3 -3
agent_workspace.html ADDED
@@ -0,0 +1,228 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Agent Workspace | VAI</title>
7
+ <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/42">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
+
13
+ .glass-panel {
14
+ backdrop-filter: blur(16px);
15
+ background: rgba(16, 21, 27, 0.7);
16
+ border: 1px solid rgba(255, 255, 255, 0.08);
17
+ }
18
+
19
+ .agent-header-gradient {
20
+ background: linear-gradient(90deg, rgba(16,185,129,0.1) 0%, rgba(16,21,27,0.7) 100%);
21
+ }
22
+
23
+ .task-item:hover {
24
+ transform: translateX(2px);
25
+ background: rgba(63, 242, 140, 0.05);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-dark-900 text-gray-200 font-sans min-h-screen">
30
+ <div class="container mx-auto px-4 py-8 max-w-7xl">
31
+ <!-- Agent Header -->
32
+ <header class="glass-panel rounded-2xl p-6 mb-8 agent-header-gradient">
33
+ <div class="flex items-center justify-between">
34
+ <div class="flex items-center space-x-4">
35
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center">
36
+ <i data-feather="cpu" class="text-dark-900 text-xl"></i>
37
+ </div>
38
+ <div>
39
+ <h1 class="text-3xl font-bold" id="agentName">Investor Director</h1>
40
+ <div class="flex items-center space-x-4 mt-1">
41
+ <span class="text-sm bg-secondary-500/20 text-secondary-500 px-3 py-1 rounded-full">Capital Team</span>
42
+ <span class="text-sm text-gray-400 flex items-center">
43
+ <span class="w-2 h-2 rounded-full bg-green-400 mr-1.5"></span>
44
+ Active
45
+ </span>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ <div class="flex space-x-3">
50
+ <button class="px-4 py-2 bg-dark-800 hover:bg-dark-700 rounded-lg transition flex items-center">
51
+ <i data-feather="activity" class="mr-2"></i>
52
+ <span>Analytics</span>
53
+ </button>
54
+ <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg transition flex items-center">
55
+ <i data-feather="settings" class="mr-2"></i>
56
+ <span>Configure</span>
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </header>
61
+
62
+ <!-- Workspace Grid -->
63
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
64
+ <!-- Task Management -->
65
+ <div class="lg:col-span-2 glass-panel rounded-2xl p-6">
66
+ <div class="flex justify-between items-center mb-6">
67
+ <h2 class="text-xl font-bold">Current Mission</h2>
68
+ <button class="px-3 py-1 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg text-sm">
69
+ <i data-feather="plus" class="w-3 h-3 mr-1"></i> New Task
70
+ </button>
71
+ </div>
72
+
73
+ <div class="space-y-3">
74
+ <!-- Task Item -->
75
+ <div class="task-item bg-dark-800 p-4 rounded-lg border-l-4 border-secondary-500 transition cursor-pointer">
76
+ <div class="flex justify-between items-start">
77
+ <div>
78
+ <h3 class="font-medium">Research Series A funding trends</h3>
79
+ <p class="text-sm text-gray-400 mt-1">Analyze last quarter's AI startup investments</p>
80
+ </div>
81
+ <div class="flex space-x-2">
82
+ <button class="text-xs text-green-400 hover:text-green-300">
83
+ <i data-feather="check" class="w-3 h-3"></i>
84
+ </button>
85
+ <button class="text-xs text-gray-400 hover:text-primary-500">
86
+ <i data-feather="more-vertical" class="w-3 h-3"></i>
87
+ </button>
88
+ </div>
89
+ </div>
90
+ <div class="flex items-center justify-between mt-3">
91
+ <span class="text-xs bg-secondary-500/10 text-secondary-500 px-2 py-0.5 rounded">In Progress</span>
92
+ <span class="text-xs text-gray-400">Started 2h ago</span>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Task Item -->
97
+ <div class="task-item bg-dark-800 p-4 rounded-lg border-l-4 border-primary-500 transition cursor-pointer">
98
+ <div class="flex justify-between items-start">
99
+ <div>
100
+ <h3 class="font-medium">Prepare investor memo</h3>
101
+ <p class="text-sm text-gray-400 mt-1">Summarize key findings for CEO review</p>
102
+ </div>
103
+ <div class="flex space-x-2">
104
+ <button class="text-xs text-gray-400 hover:text-primary-500">
105
+ <i data-feather="more-vertical" class="w-3 h-3"></i>
106
+ </button>
107
+ </div>
108
+ </div>
109
+ <div class="flex items-center justify-between mt-3">
110
+ <span class="text-xs bg-primary-500/10 text-primary-500 px-2 py-0.5 rounded">Pending Review</span>
111
+ <span class="text-xs text-gray-400">Due tomorrow</span>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Agent Communication -->
117
+ <div class="mt-8">
118
+ <h2 class="text-xl font-bold mb-4">Direct Command</h2>
119
+ <div class="bg-dark-800 rounded-xl p-4 border border-gray-700">
120
+ <textarea class="w-full bg-transparent border-none focus:outline-none resize-none mb-3" rows="3" placeholder="Issue direct command to this agent..."></textarea>
121
+ <div class="flex justify-end space-x-3">
122
+ <button class="px-4 py-2 bg-dark-700 hover:bg-dark-600 rounded-lg transition">
123
+ <i data-feather="paperclip" class="w-4 h-4 mr-2"></i>
124
+ <span>Attach</span>
125
+ </button>
126
+ <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg transition">
127
+ <i data-feather="send" class="w-4 h-4 mr-2"></i>
128
+ <span>Send Instruction</span>
129
+ </button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Agent Details -->
136
+ <div class="glass-panel rounded-2xl p-6">
137
+ <h2 class="text-xl font-bold mb-6">Agent Profile</h2>
138
+
139
+ <div class="space-y-6">
140
+ <div>
141
+ <h3 class="font-medium mb-3">Specialization</h3>
142
+ <p class="text-sm text-gray-300">Investor relations, market analysis, funding strategy, and capital acquisition.</p>
143
+ </div>
144
+
145
+ <div>
146
+ <h3 class="font-medium mb-3">Performance Metrics</h3>
147
+ <div class="space-y-4">
148
+ <div>
149
+ <div class="flex justify-between text-sm mb-1">
150
+ <span>Task Completion</span>
151
+ <span>87%</span>
152
+ </div>
153
+ <div class="h-1.5 bg-gray-800 rounded-full overflow-hidden">
154
+ <div class="bg-green-400 h-full rounded-full" style="width: 87%"></div>
155
+ </div>
156
+ </div>
157
+ <div>
158
+ <div class="flex justify-between text-sm mb-1">
159
+ <span>Time Saved</span>
160
+ <span>14.5h this week</span>
161
+ </div>
162
+ <div class="h-1.5 bg-gray-800 rounded-full overflow-hidden">
163
+ <div class="bg-blue-400 h-full rounded-full" style="width: 72%"></div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <div>
170
+ <h3 class="font-medium mb-3">Connected Services</h3>
171
+ <div class="flex flex-wrap gap-2">
172
+ <span class="text-xs bg-blue-400/10 text-blue-400 px-2 py-1 rounded">Crunchbase API</span>
173
+ <span class="text-xs bg-purple-500/10 text-purple-500 px-2 py-1 rounded">PitchBook</span>
174
+ <span class="text-xs bg-green-400/10 text-green-400 px-2 py-1 rounded">Notion</span>
175
+ <span class="text-xs bg-yellow-500/10 text-yellow-500 px-2 py-1 rounded">Google Sheets</span>
176
+ </div>
177
+ </div>
178
+
179
+ <div>
180
+ <h3 class="font-medium mb-3">Recent Activity</h3>
181
+ <div class="space-y-3 text-sm">
182
+ <div class="flex items-start space-x-3">
183
+ <div class="w-5 h-5 rounded-full bg-secondary-500/20 flex items-center justify-center mt-0.5">
184
+ <i data-feather="activity" class="text-secondary-500 w-3 h-3"></i>
185
+ </div>
186
+ <div>
187
+ <p>Completed market analysis of Q2 AI investments</p>
188
+ <p class="text-xs text-gray-400 mt-0.5">2 hours ago</p>
189
+ </div>
190
+ </div>
191
+ <div class="flex items-start space-x-3">
192
+ <div class="w-5 h-5 rounded-full bg-secondary-500/20 flex items-center justify-center mt-0.5">
193
+ <i data-feather="file-text" class="text-secondary-500 w-3 h-3"></i>
194
+ </div>
195
+ <div>
196
+ <p>Generated investor memo draft</p>
197
+ <p class="text-xs text-gray-400 mt-0.5">4 hours ago</p>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <script>
208
+ feather.replace();
209
+
210
+ // Get agent name from URL
211
+ const urlParams = new URLSearchParams(window.location.search);
212
+ const agent = urlParams.get('agent');
213
+ if (agent) {
214
+ document.getElementById('agentName').textContent = agent;
215
+ }
216
+
217
+ // Task interaction
218
+ document.querySelectorAll('.task-item').forEach(item => {
219
+ item.addEventListener('click', (e) => {
220
+ if (!e.target.closest('button')) {
221
+ // Show task details in a modal
222
+ alert(`Opening task details for: ${item.querySelector('h3').textContent}`);
223
+ }
224
+ });
225
+ });
226
+ </script>
227
+ </body>
228
+ </html>
agents.html CHANGED
@@ -59,8 +59,8 @@
59
  <header class="flex justify-between items-center mb-12">
60
  <div class="flex items-center space-x-2">
61
  <img src="https://static.photos/technology/200x200/42" alt="VAI Logo" class="w-10 h-10 rounded-lg">
62
- <h1 class="text-2xl font-bold text-primary-500">VAI</h1>
63
- </div>
64
  <nav class="hidden md:flex space-x-6">
65
  <a href="index.html" class="hover:text-primary-500 transition">Home</a>
66
  <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a>
@@ -110,8 +110,8 @@
110
  </span>
111
  </div>
112
  <div>
113
- <h3 class="font-bold">Chief of Staff</h3>
114
- <span class="text-xs text-green-400">Active</span>
115
  </div>
116
  </div>
117
  <div class="dropdown relative">
@@ -143,8 +143,8 @@
143
  </span>
144
  </div>
145
  <div>
146
- <h3 class="font-bold">Email Director</h3>
147
- <span class="text-xs text-green-400">Active</span>
148
  </div>
149
  </div>
150
  <div class="dropdown relative">
@@ -176,8 +176,8 @@
176
  </span>
177
  </div>
178
  <div>
179
- <h3 class="font-bold">Schedule Manager</h3>
180
- <span class="text-xs text-yellow-400">Syncing</span>
181
  </div>
182
  </div>
183
  <div class="dropdown relative">
@@ -209,8 +209,8 @@
209
  </span>
210
  </div>
211
  <div>
212
- <h3 class="font-bold">Investor Relations</h3>
213
- <span class="text-xs text-green-400">Active</span>
214
  </div>
215
  </div>
216
  <div class="dropdown relative">
@@ -242,8 +242,8 @@
242
  </span>
243
  </div>
244
  <div>
245
- <h3 class="font-bold">Error Handler</h3>
246
- <span class="text-xs text-red-400">Needs attention</span>
247
  </div>
248
  </div>
249
  <div class="dropdown relative">
 
59
  <header class="flex justify-between items-center mb-12">
60
  <div class="flex items-center space-x-2">
61
  <img src="https://static.photos/technology/200x200/42" alt="VAI Logo" class="w-10 h-10 rounded-lg">
62
+ <h1 class="text-2xl font-bold text-primary-500">Agent Headquarters</h1>
63
+ </div>
64
  <nav class="hidden md:flex space-x-6">
65
  <a href="index.html" class="hover:text-primary-500 transition">Home</a>
66
  <a href="dashboard.html" class="hover:text-primary-500 transition">Dashboard</a>
 
110
  </span>
111
  </div>
112
  <div>
113
+ <h3 class="font-bold">Chief of Staff <span class="text-xs bg-primary-500/10 text-primary-500 px-2 py-0.5 rounded">Orchestrator</span></h3>
114
+ <span class="text-xs text-green-400">Active</span>
115
  </div>
116
  </div>
117
  <div class="dropdown relative">
 
143
  </span>
144
  </div>
145
  <div>
146
+ <h3 class="font-bold">Comms Director <span class="text-xs bg-blue-400/10 text-blue-400 px-2 py-0.5 rounded">Communications</span></h3>
147
+ <span class="text-xs text-green-400">Active</span>
148
  </div>
149
  </div>
150
  <div class="dropdown relative">
 
176
  </span>
177
  </div>
178
  <div>
179
+ <h3 class="font-bold">Chief of Scheduling <span class="text-xs bg-purple-500/10 text-purple-500 px-2 py-0.5 rounded">Coordination</span></h3>
180
+ <span class="text-xs text-yellow-400">Syncing</span>
181
  </div>
182
  </div>
183
  <div class="dropdown relative">
 
209
  </span>
210
  </div>
211
  <div>
212
+ <h3 class="font-bold">Investor Director <span class="text-xs bg-secondary-500/10 text-secondary-500 px-2 py-0.5 rounded">Capital</span></h3>
213
+ <span class="text-xs text-green-400">Active</span>
214
  </div>
215
  </div>
216
  <div class="dropdown relative">
 
242
  </span>
243
  </div>
244
  <div>
245
+ <h3 class="font-bold">Quality Control <span class="text-xs bg-red-400/10 text-red-400 px-2 py-0.5 rounded">Operations</span></h3>
246
+ <span class="text-xs text-red-400">Needs attention</span>
247
  </div>
248
  </div>
249
  <div class="dropdown relative">
dashboard.html CHANGED
@@ -172,12 +172,12 @@
172
  <!-- Agent Grid -->
173
  <section class="mb-8">
174
  <div class="flex justify-between items-center mb-6">
175
- <h3 class="text-xl font-bold">Your Agent Team</h3>
176
  <button class="px-4 py-2 bg-dark-800 hover:bg-dark-700 rounded-lg transition flex items-center">
177
  <i data-feather="plus" class="mr-2"></i>
178
- <span>Add Agent</span>
179
  </button>
180
- </div>
181
 
182
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
183
  <!-- Agent Card 1 -->
 
172
  <!-- Agent Grid -->
173
  <section class="mb-8">
174
  <div class="flex justify-between items-center mb-6">
175
+ <h3 class="text-xl font-bold">Your Executive Team</h3>
176
  <button class="px-4 py-2 bg-dark-800 hover:bg-dark-700 rounded-lg transition flex items-center">
177
  <i data-feather="plus" class="mr-2"></i>
178
+ <span>Hire Director</span>
179
  </button>
180
+ </div>
181
 
182
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
183
  <!-- Agent Card 1 -->
index.html CHANGED
@@ -130,11 +130,11 @@ secondary: {
130
  <div class="absolute inset-0 bg-gradient-to-r from-dark-900/80 to-dark-900/30 z-0"></div>
131
  <div class="relative z-10">
132
  <h2 class="text-4xl md:text-5xl font-bold mb-4 max-w-2xl">
133
- <span class="text-primary-500">Your AI Team, Working With You</span>
134
  </h2>
135
  <p class="text-lg text-gray-300 mb-8 max-w-2xl">
136
- Manage multiple AI agents simultaneously with VAI as your personal orchestrator. Stay in your genius zone while your virtual team works in perfect sync.
137
- </p>
138
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
139
  <button onclick="window.location.href='onboarding.html'" class="px-6 py-3 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
140
  Get Started - It's Free
 
130
  <div class="absolute inset-0 bg-gradient-to-r from-dark-900/80 to-dark-900/30 z-0"></div>
131
  <div class="relative z-10">
132
  <h2 class="text-4xl md:text-5xl font-bold mb-4 max-w-2xl">
133
+ <span class="text-primary-500">Your Digital Executive Team</span>
134
  </h2>
135
  <p class="text-lg text-gray-300 mb-8 max-w-2xl">
136
+ Lead your team of specialist agents - each a micro-expert in their domain. Orchestrate your digital executives like a visionary CEO.
137
+ </p>
138
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
139
  <button onclick="window.location.href='onboarding.html'" class="px-6 py-3 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
140
  Get Started - It's Free