@swarmclawai/swarmclaw 0.5.2 → 0.6.0

package/src/components/skills/skill-list.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { Badge } from '@/components/ui/badge'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { ClawHubBrowser } from './clawhub-browser'
 import { toast } from 'sonner'
 
@@ -27,6 +28,8 @@ interface SearchResponse {
 export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
   const skills = useAppStore((s) => s.skills)
   const loadSkills = useAppStore((s) => s.loadSkills)
+  const agents = useAppStore((s) => s.agents)
+  const loadAgents = useAppStore((s) => s.loadAgents)
   const setSkillSheetOpen = useAppStore((s) => s.setSkillSheetOpen)
   const setEditingSkillId = useAppStore((s) => s.setEditingSkillId)
   const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
@@ -45,6 +48,8 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
 
   useEffect(() => {
     loadSkills()
+    loadAgents()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const skillList = Object.values(skills).filter((s) => !activeProjectFilter || s.projectId === activeProjectFilter)
@@ -258,37 +263,63 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
           </div>
         ) : (
           <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
-            {skillList.map((skill) => (
-              <button
-                key={skill.id}
-                onClick={() => handleEdit(skill.id)}
-                className="w-full text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer"
-              >
-                <div className="flex items-center justify-between mb-1">
-                  <span className="font-display text-[14px] font-600 text-text truncate">{skill.name}</span>
-                  <div className="flex items-center gap-2 shrink-0 ml-2">
-                    <span className="text-[10px] font-mono text-text-3/50">{skill.filename}</span>
-                    {!inSidebar && (
-                      <button
-                        onClick={(e) => handleDelete(e, skill.id)}
-                        className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
-                        title="Delete"
-                      >
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                          <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                        </svg>
-                      </button>
-                    )}
+            {skillList.map((skill) => {
+              const skillScope = skill.scope || 'global'
+              const skillAgentIds = skill.agentIds || []
+              const scopeLabel = skillScope === 'global' ? 'Global' : `${skillAgentIds.length} agent(s)`
+              const scopedAgents = skillScope === 'agent'
+                ? skillAgentIds.map((id) => agents[id]).filter(Boolean)
+                : []
+              return (
+                <button
+                  key={skill.id}
+                  onClick={() => handleEdit(skill.id)}
+                  className="w-full text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer"
+                >
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="font-display text-[14px] font-600 text-text truncate">{skill.name}</span>
+                    <div className="flex items-center gap-2 shrink-0 ml-2">
+                      <span className="text-[10px] font-mono text-text-3/50">{skill.filename}</span>
+                      {!inSidebar && (
+                        <button
+                          onClick={(e) => handleDelete(e, skill.id)}
+                          className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
+                          title="Delete"
+                        >
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                            <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                          </svg>
+                        </button>
+                      )}
+                    </div>
                   </div>
-                </div>
-                {skill.description && (
-                  <p className="text-[12px] text-text-3/60 line-clamp-2">{skill.description}</p>
-                )}
-                <div className="text-[11px] text-text-3/70 mt-1.5">
-                  {skill.content.length} chars
-                </div>
-              </button>
-            ))}
+                  {skill.description && (
+                    <p className="text-[12px] text-text-3/60 line-clamp-2">{skill.description}</p>
+                  )}
+                  <div className="flex items-center gap-2 mt-1.5">
+                    <span className="text-[11px] text-text-3/70">{skill.content.length} chars</span>
+                    <span className="text-[11px] text-text-3/60">·</span>
+                    <span className={`text-[10px] font-600 ${
+                      skillScope === 'global' ? 'text-emerald-400' : 'text-amber-400'
+                    }`}>
+                      {scopeLabel}
+                    </span>
+                  </div>
+                  {scopedAgents.length > 0 && (
+                    <div className="flex items-center gap-1.5 mt-1.5">
+                      <div className="flex items-center -space-x-1.5">
+                        {scopedAgents.slice(0, 5).map((agent) => (
+                          <AgentAvatar key={agent.id} seed={agent.avatarSeed} name={agent.name} size={16} className="ring-1 ring-surface" />
+                        ))}
+                      </div>
+                      {scopedAgents.length > 5 && (
+                        <span className="text-[10px] font-600 text-text-3/60 ml-0.5">+{scopedAgents.length - 5}</span>
+                      )}
+                    </div>
+                  )}
+                </button>
+              )
+            })}
           </div>
         )
       )}

package/src/components/skills/skill-sheet.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState, useRef } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { api } from '@/lib/api-client'
 
 export function SkillSheet() {
@@ -12,18 +13,23 @@ export function SkillSheet() {
   const setEditingId = useAppStore((s) => s.setEditingSkillId)
   const skills = useAppStore((s) => s.skills)
   const loadSkills = useAppStore((s) => s.loadSkills)
+  const agents = useAppStore((s) => s.agents)
+  const loadAgents = useAppStore((s) => s.loadAgents)
   const fileRef = useRef<HTMLInputElement>(null)
 
   const [name, setName] = useState('')
   const [filename, setFilename] = useState('')
   const [description, setDescription] = useState('')
   const [content, setContent] = useState('')
+  const [scope, setScope] = useState<'global' | 'agent'>('global')
+  const [agentIds, setAgentIds] = useState<string[]>([])
   const [importUrl, setImportUrl] = useState('')
   const [importingUrl, setImportingUrl] = useState(false)
   const [importError, setImportError] = useState('')
   const [importNotice, setImportNotice] = useState('')
 
   const editing = editingId ? skills[editingId] : null
+  const agentList = Object.values(agents)
 
   const handleImportFromUrl = async () => {
     if (!importUrl.trim()) return
@@ -48,6 +54,11 @@ export function SkillSheet() {
     }
   }
 
+  useEffect(() => {
+    if (open) loadAgents()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
   useEffect(() => {
     if (open) {
       setImportUrl('')
@@ -59,11 +70,15 @@ export function SkillSheet() {
         setFilename(editing.filename)
         setDescription(editing.description || '')
         setContent(editing.content)
+        setScope(editing.scope || 'global')
+        setAgentIds(editing.agentIds || [])
       } else {
         setName('')
         setFilename('')
         setDescription('')
         setContent('')
+        setScope('global')
+        setAgentIds([])
       }
     }
   }, [open, editingId])
@@ -87,12 +102,24 @@ export function SkillSheet() {
     e.target.value = ''
   }
 
+  const toggleAgent = (id: string) => {
+    setAgentIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id])
+  }
+
+  const scopeHelperText = scope === 'global'
+    ? 'This skill will be accessible to all agents'
+    : agentIds.length === 0
+      ? 'Select which agents can access this skill'
+      : `${agentIds.length} agent(s) selected`
+
   const handleSave = async () => {
     const data = {
       name: name.trim() || 'Unnamed Skill',
       filename: filename.trim() || `${name.trim().toLowerCase().replace(/\s+/g, '-')}.md`,
       description,
       content,
+      scope,
+      agentIds: scope === 'agent' ? agentIds : [],
     }
     if (editing) {
       await api('PUT', `/skills/${editing.id}`, data)
@@ -155,7 +182,7 @@ export function SkillSheet() {
             <button
               onClick={handleImportFromUrl}
               disabled={importingUrl || !importUrl.trim()}
-              className="px-4 py-3 rounded-[12px] border-none bg-[#6366F1] text-white text-[13px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+              className="px-4 py-3 rounded-[12px] border-none bg-accent-bright text-white text-[13px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
               style={{ fontFamily: 'inherit' }}
             >
               {importingUrl ? 'Importing...' : 'Import'}
@@ -191,6 +218,58 @@ export function SkillSheet() {
         <p className="text-[11px] text-text-3/70 mt-2">{content.length} characters</p>
       </div>
 
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Scope</label>
+        <div className="flex p-1 rounded-[12px] bg-bg border border-white/[0.06]">
+          {(['global', 'agent'] as const).map((s) => (
+            <button
+              key={s}
+              onClick={() => setScope(s)}
+              className={`flex-1 py-2.5 rounded-[10px] text-center cursor-pointer transition-all text-[13px] font-600 border-none ${
+                scope === s ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'
+              }`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {s === 'global' ? 'Global' : 'Specific'}
+            </button>
+          ))}
+        </div>
+        <p className="text-[11px] text-text-3/60 mt-1.5 pl-1">{scopeHelperText}</p>
+      </div>
+
+      {scope === 'agent' && (
+        <div className="mb-8">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Agents</label>
+          <div className="max-h-[240px] overflow-y-auto rounded-[12px] border border-white/[0.06] bg-white/[0.03]">
+            {agentList.length === 0 ? (
+              <p className="p-3 text-[12px] text-text-3">No agents available</p>
+            ) : (
+              agentList.map((agent) => {
+                const selected = agentIds.includes(agent.id)
+                return (
+                  <button
+                    key={agent.id}
+                    onClick={() => toggleAgent(agent.id)}
+                    className={`w-full flex items-center gap-2.5 px-3 py-2 text-left transition-all cursor-pointer ${
+                      selected ? 'bg-accent-soft/40' : 'hover:bg-white/[0.04]'
+                    }`}
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                    <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
+                    {selected && (
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright shrink-0">
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                    )}
+                  </button>
+                )
+              })
+            )}
+          </div>
+        </div>
+      )}
+
       <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
         {editing && (
           <button onClick={handleDelete} className="py-3.5 px-6 rounded-[14px] border border-red-500/20 bg-transparent text-red-400 text-[15px] font-600 cursor-pointer hover:bg-red-500/10 transition-all" style={{ fontFamily: 'inherit' }}>
@@ -200,7 +279,7 @@ export function SkillSheet() {
         <button onClick={onClose} className="flex-1 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all" style={{ fontFamily: 'inherit' }}>
           Cancel
         </button>
-        <button onClick={handleSave} disabled={!name.trim() || !content.trim()} className="flex-1 py-3.5 rounded-[14px] border-none bg-[#6366F1] text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110" style={{ fontFamily: 'inherit' }}>
+        <button onClick={handleSave} disabled={!name.trim() || !content.trim()} className="flex-1 py-3.5 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110" style={{ fontFamily: 'inherit' }}>
           {editing ? 'Save' : 'Create'}
         </button>
       </div>