groove-dev 0.12.8 → 0.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/node_modules/@groove-dev/daemon/skills-registry.json +414 -0
- package/node_modules/@groove-dev/daemon/src/api.js +41 -0
- package/node_modules/@groove-dev/daemon/src/index.js +2 -0
- package/node_modules/@groove-dev/daemon/src/skills.js +225 -0
- package/node_modules/@groove-dev/gui/dist/assets/index-C4fB8_Qg.js +74 -0
- package/node_modules/@groove-dev/gui/dist/index.html +1 -1
- package/node_modules/@groove-dev/gui/src/App.jsx +3 -0
- package/node_modules/@groove-dev/gui/src/views/SkillsMarketplace.jsx +350 -0
- package/package.json +1 -1
- package/packages/daemon/skills-registry.json +414 -0
- package/packages/daemon/src/api.js +41 -0
- package/packages/daemon/src/index.js +2 -0
- package/packages/daemon/src/skills.js +225 -0
- package/packages/gui/dist/assets/index-C4fB8_Qg.js +74 -0
- package/packages/gui/dist/index.html +1 -1
- package/packages/gui/src/App.jsx +3 -0
- package/packages/gui/src/views/SkillsMarketplace.jsx +350 -0
- package/node_modules/@groove-dev/gui/dist/assets/index-CeyNe9uc.js +0 -73
- package/packages/gui/dist/assets/index-CeyNe9uc.js +0 -73
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>GROOVE</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-C4fB8_Qg.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-Gfb8Zxy9.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
@@ -11,9 +11,11 @@ import JournalistFeed from './views/JournalistFeed';
|
|
|
11
11
|
import TeamSelector from './components/TeamSelector';
|
|
12
12
|
import CommandCenter from './views/CommandCenter';
|
|
13
13
|
import ApprovalQueue from './components/ApprovalQueue';
|
|
14
|
+
import SkillsMarketplace from './views/SkillsMarketplace';
|
|
14
15
|
|
|
15
16
|
const TABS = [
|
|
16
17
|
{ id: 'agents', label: 'Agents' },
|
|
18
|
+
{ id: 'skills', label: 'Skills' },
|
|
17
19
|
{ id: 'stats', label: 'Stats' },
|
|
18
20
|
{ id: 'teams', label: 'Teams' },
|
|
19
21
|
{ id: 'approvals', label: 'Approvals' },
|
|
@@ -138,6 +140,7 @@ export default function App() {
|
|
|
138
140
|
{activeTab === 'agents' && (
|
|
139
141
|
!hasAgents ? <EmptyState /> : <AgentTree />
|
|
140
142
|
)}
|
|
143
|
+
{activeTab === 'skills' && <SkillsMarketplace />}
|
|
141
144
|
{activeTab === 'stats' && <CommandCenter />}
|
|
142
145
|
{activeTab === 'teams' && <TeamSelector />}
|
|
143
146
|
{activeTab === 'approvals' && <ApprovalQueue />}
|
|
@@ -0,0 +1,350 @@
|
|
|
1
|
+
// GROOVE GUI — Skills Marketplace
|
|
2
|
+
// FSL-1.1-Apache-2.0 — see LICENSE
|
|
3
|
+
|
|
4
|
+
import React, { useState, useEffect } from 'react';
|
|
5
|
+
|
|
6
|
+
const CATEGORY_LABELS = {
|
|
7
|
+
all: 'All Skills',
|
|
8
|
+
design: 'Design',
|
|
9
|
+
quality: 'Quality',
|
|
10
|
+
devtools: 'Dev Tools',
|
|
11
|
+
workflow: 'Workflow',
|
|
12
|
+
security: 'Security',
|
|
13
|
+
specialized: 'Specialized',
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export default function SkillsMarketplace() {
|
|
17
|
+
const [skills, setSkills] = useState([]);
|
|
18
|
+
const [categories, setCategories] = useState([]);
|
|
19
|
+
const [search, setSearch] = useState('');
|
|
20
|
+
const [category, setCategory] = useState('all');
|
|
21
|
+
const [loading, setLoading] = useState(true);
|
|
22
|
+
const [installing, setInstalling] = useState(null);
|
|
23
|
+
const [expandedSkill, setExpandedSkill] = useState(null);
|
|
24
|
+
const [skillContent, setSkillContent] = useState(null);
|
|
25
|
+
const [hovered, setHovered] = useState(null);
|
|
26
|
+
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
fetchSkills();
|
|
29
|
+
}, [search, category]);
|
|
30
|
+
|
|
31
|
+
async function fetchSkills() {
|
|
32
|
+
setLoading(true);
|
|
33
|
+
try {
|
|
34
|
+
const params = new URLSearchParams();
|
|
35
|
+
if (search) params.set('search', search);
|
|
36
|
+
if (category !== 'all') params.set('category', category);
|
|
37
|
+
const res = await fetch(`/api/skills/registry?${params}`);
|
|
38
|
+
const data = await res.json();
|
|
39
|
+
setSkills(data.skills || []);
|
|
40
|
+
setCategories(data.categories || []);
|
|
41
|
+
} catch { /* ignore */ }
|
|
42
|
+
setLoading(false);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
async function handleInstall(id) {
|
|
46
|
+
setInstalling(id);
|
|
47
|
+
try {
|
|
48
|
+
await fetch(`/api/skills/${id}/install`, { method: 'POST' });
|
|
49
|
+
await fetchSkills();
|
|
50
|
+
} catch { /* ignore */ }
|
|
51
|
+
setInstalling(null);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
async function handleUninstall(id) {
|
|
55
|
+
setInstalling(id);
|
|
56
|
+
try {
|
|
57
|
+
await fetch(`/api/skills/${id}`, { method: 'DELETE' });
|
|
58
|
+
setExpandedSkill(null);
|
|
59
|
+
setSkillContent(null);
|
|
60
|
+
await fetchSkills();
|
|
61
|
+
} catch { /* ignore */ }
|
|
62
|
+
setInstalling(null);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
async function handleExpand(skill) {
|
|
66
|
+
if (expandedSkill === skill.id) {
|
|
67
|
+
setExpandedSkill(null);
|
|
68
|
+
setSkillContent(null);
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
setExpandedSkill(skill.id);
|
|
72
|
+
setSkillContent(null);
|
|
73
|
+
if (skill.installed) {
|
|
74
|
+
try {
|
|
75
|
+
const res = await fetch(`/api/skills/${skill.id}/content`);
|
|
76
|
+
const data = await res.json();
|
|
77
|
+
setSkillContent(data.content);
|
|
78
|
+
} catch { /* ignore */ }
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const installedCount = skills.filter((s) => s.installed).length;
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<div style={styles.root}>
|
|
86
|
+
{/* Header */}
|
|
87
|
+
<div style={styles.header}>
|
|
88
|
+
<div>
|
|
89
|
+
<div style={styles.title}>Skills Marketplace</div>
|
|
90
|
+
<div style={styles.subtitle}>
|
|
91
|
+
{skills.length} skills available, {installedCount} installed
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
{/* Search + Categories */}
|
|
97
|
+
<div style={styles.toolbar}>
|
|
98
|
+
<input
|
|
99
|
+
style={styles.search}
|
|
100
|
+
placeholder="Search skills..."
|
|
101
|
+
value={search}
|
|
102
|
+
onChange={(e) => setSearch(e.target.value)}
|
|
103
|
+
/>
|
|
104
|
+
<div style={styles.catRow}>
|
|
105
|
+
<button
|
|
106
|
+
onClick={() => setCategory('all')}
|
|
107
|
+
style={{
|
|
108
|
+
...styles.catBtn,
|
|
109
|
+
...(category === 'all' ? styles.catBtnActive : {}),
|
|
110
|
+
}}
|
|
111
|
+
>
|
|
112
|
+
All
|
|
113
|
+
</button>
|
|
114
|
+
{categories.map((cat) => (
|
|
115
|
+
<button
|
|
116
|
+
key={cat.id}
|
|
117
|
+
onClick={() => setCategory(cat.id)}
|
|
118
|
+
style={{
|
|
119
|
+
...styles.catBtn,
|
|
120
|
+
...(category === cat.id ? styles.catBtnActive : {}),
|
|
121
|
+
}}
|
|
122
|
+
>
|
|
123
|
+
{CATEGORY_LABELS[cat.id] || cat.id} ({cat.count})
|
|
124
|
+
</button>
|
|
125
|
+
))}
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
{/* Skills Grid */}
|
|
130
|
+
<div style={styles.grid}>
|
|
131
|
+
{loading && skills.length === 0 && (
|
|
132
|
+
<div style={styles.empty}>Loading skills...</div>
|
|
133
|
+
)}
|
|
134
|
+
|
|
135
|
+
{!loading && skills.length === 0 && (
|
|
136
|
+
<div style={styles.empty}>No skills match your search.</div>
|
|
137
|
+
)}
|
|
138
|
+
|
|
139
|
+
{skills.map((skill) => (
|
|
140
|
+
<div key={skill.id}>
|
|
141
|
+
<div
|
|
142
|
+
onClick={() => handleExpand(skill)}
|
|
143
|
+
onMouseEnter={() => setHovered(skill.id)}
|
|
144
|
+
onMouseLeave={() => setHovered(null)}
|
|
145
|
+
style={{
|
|
146
|
+
...styles.card,
|
|
147
|
+
borderColor: skill.installed ? 'var(--green)' : (hovered === skill.id ? 'var(--accent)' : 'var(--border)'),
|
|
148
|
+
background: hovered === skill.id ? 'var(--bg-hover)' : 'var(--bg-surface)',
|
|
149
|
+
}}
|
|
150
|
+
>
|
|
151
|
+
{/* Card header */}
|
|
152
|
+
<div style={styles.cardTop}>
|
|
153
|
+
<div style={{
|
|
154
|
+
...styles.cardIcon,
|
|
155
|
+
background: skill.installed ? 'var(--green)' : 'var(--accent)',
|
|
156
|
+
}}>
|
|
157
|
+
{skill.icon || skill.name.charAt(0)}
|
|
158
|
+
</div>
|
|
159
|
+
<div style={styles.cardInfo}>
|
|
160
|
+
<div style={styles.cardName}>{skill.name}</div>
|
|
161
|
+
<div style={styles.cardAuthor}>{skill.author}</div>
|
|
162
|
+
</div>
|
|
163
|
+
{skill.installed && (
|
|
164
|
+
<div style={styles.installedBadge}>installed</div>
|
|
165
|
+
)}
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
{/* Description */}
|
|
169
|
+
<div style={styles.cardDesc}>{skill.description}</div>
|
|
170
|
+
|
|
171
|
+
{/* Tags */}
|
|
172
|
+
<div style={styles.tagRow}>
|
|
173
|
+
<span style={styles.catTag}>{CATEGORY_LABELS[skill.category] || skill.category}</span>
|
|
174
|
+
{skill.roles.slice(0, 3).map((r) => (
|
|
175
|
+
<span key={r} style={styles.roleTag}>{r}</span>
|
|
176
|
+
))}
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
|
|
180
|
+
{/* Expanded detail */}
|
|
181
|
+
{expandedSkill === skill.id && (
|
|
182
|
+
<div style={styles.detail}>
|
|
183
|
+
{skillContent && (
|
|
184
|
+
<div style={styles.contentPreview}>
|
|
185
|
+
<div style={styles.contentLabel}>SKILL INSTRUCTIONS</div>
|
|
186
|
+
<pre style={styles.contentPre}>
|
|
187
|
+
{skillContent.replace(/^---[\s\S]*?---\n/, '').trim().slice(0, 800)}
|
|
188
|
+
{skillContent.length > 800 ? '\n...' : ''}
|
|
189
|
+
</pre>
|
|
190
|
+
</div>
|
|
191
|
+
)}
|
|
192
|
+
<div style={styles.detailActions}>
|
|
193
|
+
{skill.installed ? (
|
|
194
|
+
<button
|
|
195
|
+
onClick={(e) => { e.stopPropagation(); handleUninstall(skill.id); }}
|
|
196
|
+
disabled={installing === skill.id}
|
|
197
|
+
style={styles.uninstallBtn}
|
|
198
|
+
>
|
|
199
|
+
{installing === skill.id ? 'Removing...' : 'Uninstall'}
|
|
200
|
+
</button>
|
|
201
|
+
) : (
|
|
202
|
+
<button
|
|
203
|
+
onClick={(e) => { e.stopPropagation(); handleInstall(skill.id); }}
|
|
204
|
+
disabled={installing === skill.id}
|
|
205
|
+
style={styles.installBtn}
|
|
206
|
+
>
|
|
207
|
+
{installing === skill.id ? 'Installing...' : 'Install'}
|
|
208
|
+
</button>
|
|
209
|
+
)}
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
)}
|
|
213
|
+
</div>
|
|
214
|
+
))}
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
const styles = {
|
|
221
|
+
root: {
|
|
222
|
+
height: '100%', display: 'flex', flexDirection: 'column',
|
|
223
|
+
overflow: 'hidden',
|
|
224
|
+
},
|
|
225
|
+
header: {
|
|
226
|
+
padding: '16px 20px 0',
|
|
227
|
+
flexShrink: 0,
|
|
228
|
+
},
|
|
229
|
+
title: {
|
|
230
|
+
fontSize: 14, fontWeight: 700, color: 'var(--text-bright)',
|
|
231
|
+
},
|
|
232
|
+
subtitle: {
|
|
233
|
+
fontSize: 11, color: 'var(--text-dim)', marginTop: 2,
|
|
234
|
+
},
|
|
235
|
+
toolbar: {
|
|
236
|
+
padding: '12px 20px',
|
|
237
|
+
flexShrink: 0,
|
|
238
|
+
},
|
|
239
|
+
search: {
|
|
240
|
+
width: '100%', padding: '8px 12px',
|
|
241
|
+
background: 'var(--bg-surface)', border: '1px solid var(--border)',
|
|
242
|
+
borderRadius: 4, color: 'var(--text-primary)', fontSize: 12,
|
|
243
|
+
fontFamily: 'var(--font)', outline: 'none',
|
|
244
|
+
},
|
|
245
|
+
catRow: {
|
|
246
|
+
display: 'flex', gap: 4, marginTop: 8, flexWrap: 'wrap',
|
|
247
|
+
},
|
|
248
|
+
catBtn: {
|
|
249
|
+
padding: '3px 10px',
|
|
250
|
+
background: 'transparent', border: '1px solid var(--border)',
|
|
251
|
+
borderRadius: 12, color: 'var(--text-dim)', fontSize: 10,
|
|
252
|
+
fontFamily: 'var(--font)', cursor: 'pointer',
|
|
253
|
+
transition: 'all 0.1s',
|
|
254
|
+
},
|
|
255
|
+
catBtnActive: {
|
|
256
|
+
borderColor: 'var(--accent)', color: 'var(--accent)',
|
|
257
|
+
background: 'rgba(51, 175, 188, 0.08)',
|
|
258
|
+
},
|
|
259
|
+
grid: {
|
|
260
|
+
flex: 1, overflowY: 'auto', padding: '0 20px 20px',
|
|
261
|
+
display: 'flex', flexDirection: 'column', gap: 6,
|
|
262
|
+
},
|
|
263
|
+
empty: {
|
|
264
|
+
padding: '40px 0', textAlign: 'center',
|
|
265
|
+
color: 'var(--text-dim)', fontSize: 12,
|
|
266
|
+
},
|
|
267
|
+
card: {
|
|
268
|
+
padding: '12px 14px',
|
|
269
|
+
background: 'var(--bg-surface)', border: '1px solid var(--border)',
|
|
270
|
+
borderRadius: 6, cursor: 'pointer',
|
|
271
|
+
transition: 'border-color 0.1s, background 0.1s',
|
|
272
|
+
},
|
|
273
|
+
cardTop: {
|
|
274
|
+
display: 'flex', alignItems: 'center', gap: 10,
|
|
275
|
+
},
|
|
276
|
+
cardIcon: {
|
|
277
|
+
width: 32, height: 32, borderRadius: 6,
|
|
278
|
+
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
279
|
+
fontSize: 13, fontWeight: 700, color: 'var(--bg-base)',
|
|
280
|
+
flexShrink: 0,
|
|
281
|
+
},
|
|
282
|
+
cardInfo: {
|
|
283
|
+
flex: 1, minWidth: 0,
|
|
284
|
+
},
|
|
285
|
+
cardName: {
|
|
286
|
+
fontSize: 12, fontWeight: 600, color: 'var(--text-bright)',
|
|
287
|
+
},
|
|
288
|
+
cardAuthor: {
|
|
289
|
+
fontSize: 10, color: 'var(--text-muted)',
|
|
290
|
+
},
|
|
291
|
+
installedBadge: {
|
|
292
|
+
fontSize: 9, fontWeight: 600, color: 'var(--green)',
|
|
293
|
+
border: '1px solid var(--green)', borderRadius: 3,
|
|
294
|
+
padding: '1px 6px', textTransform: 'uppercase', letterSpacing: 0.5,
|
|
295
|
+
flexShrink: 0,
|
|
296
|
+
},
|
|
297
|
+
cardDesc: {
|
|
298
|
+
fontSize: 11, color: 'var(--text-dim)', marginTop: 8,
|
|
299
|
+
lineHeight: 1.45,
|
|
300
|
+
display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
|
|
301
|
+
overflow: 'hidden',
|
|
302
|
+
},
|
|
303
|
+
tagRow: {
|
|
304
|
+
display: 'flex', gap: 4, marginTop: 8, flexWrap: 'wrap',
|
|
305
|
+
},
|
|
306
|
+
catTag: {
|
|
307
|
+
fontSize: 9, padding: '1px 6px', borderRadius: 3,
|
|
308
|
+
background: 'var(--bg-active)', color: 'var(--text-dim)',
|
|
309
|
+
fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5,
|
|
310
|
+
},
|
|
311
|
+
roleTag: {
|
|
312
|
+
fontSize: 9, padding: '1px 6px', borderRadius: 3,
|
|
313
|
+
background: 'rgba(51, 175, 188, 0.1)', color: 'var(--accent)',
|
|
314
|
+
},
|
|
315
|
+
detail: {
|
|
316
|
+
margin: '0 0 4px',
|
|
317
|
+
padding: '10px 14px',
|
|
318
|
+
background: 'var(--bg-base)', border: '1px solid var(--border)',
|
|
319
|
+
borderTop: 'none', borderRadius: '0 0 6px 6px',
|
|
320
|
+
},
|
|
321
|
+
contentPreview: {
|
|
322
|
+
marginBottom: 10,
|
|
323
|
+
},
|
|
324
|
+
contentLabel: {
|
|
325
|
+
fontSize: 9, fontWeight: 600, color: 'var(--text-muted)',
|
|
326
|
+
textTransform: 'uppercase', letterSpacing: 1, marginBottom: 6,
|
|
327
|
+
},
|
|
328
|
+
contentPre: {
|
|
329
|
+
fontSize: 10, color: 'var(--text-dim)', lineHeight: 1.5,
|
|
330
|
+
fontFamily: 'var(--font)', whiteSpace: 'pre-wrap', wordBreak: 'break-word',
|
|
331
|
+
maxHeight: 200, overflowY: 'auto',
|
|
332
|
+
padding: '8px 10px', background: 'var(--bg-surface)',
|
|
333
|
+
border: '1px solid var(--border)', borderRadius: 4,
|
|
334
|
+
},
|
|
335
|
+
detailActions: {
|
|
336
|
+
display: 'flex', justifyContent: 'flex-end', gap: 8,
|
|
337
|
+
},
|
|
338
|
+
installBtn: {
|
|
339
|
+
padding: '6px 20px',
|
|
340
|
+
background: 'var(--accent)', border: '1px solid var(--accent)',
|
|
341
|
+
borderRadius: 4, color: 'var(--bg-base)', fontSize: 11, fontWeight: 700,
|
|
342
|
+
fontFamily: 'var(--font)', cursor: 'pointer',
|
|
343
|
+
},
|
|
344
|
+
uninstallBtn: {
|
|
345
|
+
padding: '6px 16px',
|
|
346
|
+
background: 'transparent', border: '1px solid var(--red)',
|
|
347
|
+
borderRadius: 4, color: 'var(--red)', fontSize: 11, fontWeight: 600,
|
|
348
|
+
fontFamily: 'var(--font)', cursor: 'pointer',
|
|
349
|
+
},
|
|
350
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "groove-dev",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.1",
|
|
4
4
|
"description": "Open-source agent orchestration layer for AI coding tools. GUI dashboard, multi-agent coordination, zero cold-start (Journalist), infinite sessions (adaptive context rotation), AI Project Manager, Quick Launch. Works with Claude Code, Codex, Gemini CLI, Ollama.",
|
|
5
5
|
"license": "FSL-1.1-Apache-2.0",
|
|
6
6
|
"author": "Groove Dev <hello@groovedev.ai> (https://groovedev.ai)",
|