npm - groove-dev - Versions diffs - 0.14.1 → 0.15.0 - Mend

groove-dev 0.14.1 → 0.15.0

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.

Files changed (23) hide show

package/packages/gui/dist/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GROOVE</title>
-    <script type="module" crossorigin src="/assets/index-TcP3URUY.js"></script>
+    <script type="module" crossorigin src="/assets/index-CNCSwHwH.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Gfb8Zxy9.css">
   </head>
   <body>

package/packages/gui/src/components/AgentActions.jsx CHANGED Viewed

@@ -18,11 +18,14 @@ export default function AgentActions({ agent }) {
   const [editingPrompt, setEditingPrompt] = useState(false);
   const [selectedModel, setSelectedModel] = useState(agent.model || '');
   const [providerList, setProviderList] = useState([]);
+  const [installedSkills, setInstalledSkills] = useState([]);
+  const [showSkillPicker, setShowSkillPicker] = useState(false);
   const isAlive = agent.status === 'running' || agent.status === 'starting';
   useEffect(() => {
     fetch('/api/providers').then(r => r.json()).then(setProviderList).catch(() => {});
+    fetch('/api/skills/installed').then(r => r.json()).then(setInstalledSkills).catch(() => {});
   }, []);
   const currentProvider = providerList.find((p) => p.id === agent.provider);
@@ -67,6 +70,24 @@ export default function AgentActions({ agent }) {
     setConfirmDelete(false);
   }
+  async function handleAttachSkill(skillId) {
+    try {
+      await fetch(`/api/agents/${agent.id}/skills/${skillId}`, { method: 'POST' });
+      showStatus(`skill attached to ${agent.name}`);
+    } catch (err) {
+      showStatus(`attach failed: ${err.message}`);
+    }
+  }
+  async function handleDetachSkill(skillId) {
+    try {
+      await fetch(`/api/agents/${agent.id}/skills/${skillId}`, { method: 'DELETE' });
+      showStatus(`skill detached from ${agent.name}`);
+    } catch (err) {
+      showStatus(`detach failed: ${err.message}`);
+    }
+  }
   async function handleClone() {
     try {
       const newAgent = await spawnAgent({
@@ -75,6 +96,7 @@ export default function AgentActions({ agent }) {
         prompt: agent.prompt,
         provider: agent.provider,
         model: agent.model,
+        skills: agent.skills,
       });
       showStatus(`cloned as ${newAgent.name}`);
     } catch (err) {
@@ -119,6 +141,7 @@ export default function AgentActions({ agent }) {
         prompt: agent.prompt,
         provider: agent.provider,
         model: agent.model,
+        skills: agent.skills,
       });
       showStatus(`restarted as ${newAgent.name}`);
     } catch (err) {
@@ -232,6 +255,75 @@ export default function AgentActions({ agent }) {
         </div>
       )}
+      {/* Skills */}
+      <div style={{ ...styles.sectionLabel, marginTop: 20 }}>
+        SKILLS ({(agent.skills || []).length})
+      </div>
+      {(agent.skills || []).length > 0 ? (
+        <div style={styles.skillsList}>
+          {(agent.skills || []).map((skillId) => {
+            const skill = installedSkills.find((s) => s.id === skillId);
+            return (
+              <div key={skillId} style={styles.skillRow}>
+                <span style={styles.skillRowIcon}>
+                  {skill?.icon || skillId.charAt(0).toUpperCase()}
+                </span>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ fontSize: 11, color: 'var(--text-primary)', fontWeight: 500 }}>
+                    {skill?.name || skillId}
+                  </div>
+                  <div style={{ fontSize: 9, color: 'var(--text-muted)' }}>
+                    {skill?.author || 'unknown'}
+                  </div>
+                </div>
+                <button
+                  onClick={() => handleDetachSkill(skillId)}
+                  style={styles.detachBtn}
+                  title="Detach skill"
+                >
+                  {'\u2715'}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div style={styles.noPrompt}>No skills attached</div>
+      )}
+      {!showSkillPicker && installedSkills.length > 0 && (
+        <button
+          onClick={() => setShowSkillPicker(true)}
+          style={{ ...styles.editBtn, marginTop: 6 }}
+        >
+          + Attach Skill
+        </button>
+      )}
+      {showSkillPicker && (
+        <div style={styles.skillPicker}>
+          {installedSkills
+            .filter((s) => !(agent.skills || []).includes(s.id))
+            .map((skill) => (
+              <button
+                key={skill.id}
+                onClick={() => { handleAttachSkill(skill.id); setShowSkillPicker(false); }}
+                style={styles.skillPickerItem}
+              >
+                <span style={styles.skillRowIcon}>
+                  {skill.icon || skill.name.charAt(0)}
+                </span>
+                <div style={{ flex: 1 }}>
+                  <div style={{ fontSize: 11, color: 'var(--text-primary)' }}>{skill.name}</div>
+                  <div style={{ fontSize: 9, color: 'var(--text-muted)' }}>{skill.author}</div>
+                </div>
+              </button>
+            ))}
+          {installedSkills.filter((s) => !(agent.skills || []).includes(s.id)).length === 0 && (
+            <div style={{ fontSize: 10, color: 'var(--text-dim)', padding: 8 }}>All installed skills are already attached</div>
+          )}
+          <button onClick={() => setShowSkillPicker(false)} style={styles.cancelBtn}>cancel</button>
+        </div>
+      )}
       {/* Current config */}
       <div style={{ ...styles.sectionLabel, marginTop: 20 }}>CONFIGURATION</div>
       <ConfigRow label="ID" value={agent.id} />
@@ -346,4 +438,41 @@ const styles = {
     display: 'flex', gap: 8, padding: '3px 0',
     borderBottom: '1px solid var(--bg-surface)',
   },
+  skillsList: {
+    display: 'flex', flexDirection: 'column', gap: 3,
+  },
+  skillRow: {
+    display: 'flex', alignItems: 'center', gap: 8,
+    padding: '5px 8px',
+    background: 'var(--bg-surface)', border: '1px solid var(--border)',
+    borderRadius: 2,
+  },
+  skillRowIcon: {
+    width: 20, height: 20, borderRadius: 4,
+    background: 'var(--accent)',
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+    fontSize: 9, fontWeight: 700, color: 'var(--bg-base)',
+    flexShrink: 0,
+  },
+  detachBtn: {
+    background: 'none', border: 'none',
+    color: 'var(--text-muted)', fontSize: 11,
+    cursor: 'pointer', fontFamily: 'var(--font)',
+    padding: '2px 4px', flexShrink: 0,
+  },
+  skillPicker: {
+    marginTop: 6, padding: 6,
+    background: 'var(--bg-base)', border: '1px solid var(--border)',
+    borderRadius: 2,
+    display: 'flex', flexDirection: 'column', gap: 2,
+    maxHeight: 180, overflowY: 'auto',
+  },
+  skillPickerItem: {
+    display: 'flex', alignItems: 'center', gap: 8,
+    padding: '5px 8px', width: '100%',
+    background: 'var(--bg-surface)', border: '1px solid var(--border)',
+    borderRadius: 2, cursor: 'pointer', textAlign: 'left',
+    fontFamily: 'var(--font)',
+    transition: 'border-color 0.1s',
+  },
 };

package/packages/gui/src/components/SpawnPanel.jsx CHANGED Viewed

@@ -41,10 +41,13 @@ export default function SpawnPanel() {
   const [apiKeyInput, setApiKeyInput] = useState('');
   const [keySaving, setKeySaving] = useState(false);
   const [showDirPicker, setShowDirPicker] = useState(false);
+  const [installedSkills, setInstalledSkills] = useState([]);
+  const [selectedSkills, setSelectedSkills] = useState([]);
   useEffect(() => {
     fetchProviders();
     fetchWorkspaces();
+    fetchInstalledSkills();
   }, []);
   async function fetchProviders() {
@@ -62,6 +65,19 @@ export default function SpawnPanel() {
     } catch { /* ignore */ }
   }
+  async function fetchInstalledSkills() {
+    try {
+      const res = await fetch('/api/skills/installed');
+      setInstalledSkills(await res.json());
+    } catch { /* ignore */ }
+  }
+  function toggleSkill(skillId) {
+    setSelectedSkills((prev) =>
+      prev.includes(skillId) ? prev.filter((s) => s !== skillId) : [...prev, skillId]
+    );
+  }
   const selectedPreset = ROLE_PRESETS.find((p) => p.id === role);
   const effectiveScope = role === 'custom'
     ? scope
@@ -127,6 +143,7 @@ export default function SpawnPanel() {
         provider,
         permission,
         ...(workingDir.trim() ? { workingDir: workingDir.trim() } : {}),
+        ...(selectedSkills.length > 0 ? { skills: selectedSkills } : {}),
       });
       closeDetail();
     } catch (err) {
@@ -281,6 +298,57 @@ export default function SpawnPanel() {
           ))}
         </div>
+        {/* Skills picker */}
+        {installedSkills.length > 0 && (
+          <>
+            <div style={styles.label}>SKILLS</div>
+            <div style={styles.skillsGrid}>
+              {installedSkills.map((skill) => {
+                const active = selectedSkills.includes(skill.id);
+                return (
+                  <button
+                    key={skill.id}
+                    type="button"
+                    onClick={() => toggleSkill(skill.id)}
+                    style={{
+                      ...styles.skillBtn,
+                      borderColor: active ? 'var(--accent)' : 'var(--border)',
+                      background: active ? 'rgba(51, 175, 188, 0.08)' : 'var(--bg-surface)',
+                    }}
+                  >
+                    <span style={{
+                      ...styles.skillIcon,
+                      background: active ? 'var(--accent)' : 'var(--bg-active)',
+                      color: active ? 'var(--bg-base)' : 'var(--text-dim)',
+                    }}>
+                      {skill.icon || skill.name.charAt(0)}
+                    </span>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{
+                        fontSize: 11, fontWeight: 600,
+                        color: active ? 'var(--text-bright)' : 'var(--text-primary)',
+                      }}>
+                        {skill.name}
+                      </div>
+                      <div style={{ fontSize: 9, color: 'var(--text-muted)' }}>
+                        {skill.author || 'local'}
+                      </div>
+                    </div>
+                    {active && (
+                      <span style={{ fontSize: 10, color: 'var(--accent)', flexShrink: 0 }}>{'\u2713'}</span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+            {selectedSkills.length > 0 && (
+              <div style={styles.hint}>
+                {selectedSkills.length} skill{selectedSkills.length !== 1 ? 's' : ''} will be injected into this agent's context
+              </div>
+            )}
+          </>
+        )}
         {/* Advanced toggle */}
         <button
           type="button"
@@ -505,6 +573,22 @@ const styles = {
   permDesc: {
     fontSize: 10, color: 'var(--text-dim)',
   },
+  skillsGrid: {
+    display: 'flex', flexDirection: 'column', gap: 3,
+  },
+  skillBtn: {
+    display: 'flex', alignItems: 'center', gap: 8,
+    padding: '6px 8px', width: '100%',
+    border: '1px solid var(--border)',
+    borderRadius: 2, cursor: 'pointer', textAlign: 'left',
+    fontFamily: 'var(--font)',
+    transition: 'border-color 0.1s, background 0.1s',
+  },
+  skillIcon: {
+    width: 22, height: 22, borderRadius: 4,
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+    fontSize: 10, fontWeight: 700, flexShrink: 0,
+  },
   advancedToggle: {
     background: 'none', border: 'none', color: 'var(--text-dim)',
     fontSize: 10, cursor: 'pointer', fontFamily: 'var(--font)',

package/packages/gui/src/views/SkillsMarketplace.jsx CHANGED Viewed

@@ -653,7 +653,7 @@ const styles = {
   // Scroll area
   scrollArea: {
-    flex: 1, overflowY: 'auto', padding: '0 20px 20px',
+    flex: 1, overflowY: 'auto', padding: '4px 20px 20px',
   },
   // Featured