agentcraft 0.0.2 → 0.0.3

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "agentcraft",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "Assign sounds to AI coding agent lifecycle events. Works with Claude Code and OpenCode.",
   "author": { "name": "rohenaz" },
   "keywords": ["sounds", "hooks", "audio", "productivity", "opencode", "claude-code"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentcraft",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Assign sounds to AI coding agent lifecycle events. CLI for managing sound packs.",
   "license": "MIT",
   "author": "rohenaz",

package/web/app/api/packs/route.ts

@@ -0,0 +1,109 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { readdir, stat, readFile } from 'fs/promises';
+import { join } from 'path';
+import { homedir } from 'os';
+import { spawnSync } from 'child_process';
+
+const PACKS_DIR = join(homedir(), '.agentcraft', 'packs');
+
+interface PackInfo {
+  id: string;          // "publisher/name"
+  publisher: string;
+  name: string;
+  description?: string;
+  version?: string;
+}
+
+async function getInstalledPacks(): Promise<PackInfo[]> {
+  const packs: PackInfo[] = [];
+  let publishers: string[];
+  try {
+    publishers = await readdir(PACKS_DIR);
+  } catch {
+    return packs;
+  }
+  for (const publisher of publishers) {
+    const pubPath = join(PACKS_DIR, publisher);
+    const ps = await stat(pubPath).catch(() => null);
+    if (!ps?.isDirectory()) continue;
+    const names = await readdir(pubPath).catch(() => [] as string[]);
+    for (const name of names) {
+      const packPath = join(pubPath, name);
+      const ns = await stat(packPath).catch(() => null);
+      if (!ns?.isDirectory()) continue;
+      // Try to read pack.json for metadata
+      let description: string | undefined;
+      let version: string | undefined;
+      try {
+        const manifest = JSON.parse(await readFile(join(packPath, 'pack.json'), 'utf-8'));
+        description = manifest.description;
+        version = manifest.version;
+      } catch { /* no manifest, that's fine */ }
+      packs.push({ id: `${publisher}/${name}`, publisher, name, description, version });
+    }
+  }
+  return packs;
+}
+
+// GET — list installed packs
+export async function GET() {
+  const packs = await getInstalledPacks();
+  return NextResponse.json(packs);
+}
+
+// POST { repo: "publisher/name" } — install a pack
+export async function POST(req: NextRequest) {
+  try {
+    const { repo } = await req.json();
+    if (!repo || !/^[a-zA-Z0-9._-]+\/[a-zA-Z0-9._-]+$/.test(repo)) {
+      return NextResponse.json({ error: 'Invalid repo format' }, { status: 400 });
+    }
+    const [publisher, name] = repo.split('/');
+    const dest = join(PACKS_DIR, publisher, name);
+    const url = `https://github.com/${repo}`;
+    // mkdir publisher dir
+    spawnSync('mkdir', ['-p', join(PACKS_DIR, publisher)]);
+    const result = spawnSync('git', ['clone', url, dest], { timeout: 60000 });
+    if (result.status !== 0) {
+      return NextResponse.json({ error: 'Clone failed' }, { status: 500 });
+    }
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: 'Install failed' }, { status: 500 });
+  }
+}
+
+// DELETE { repo: "publisher/name" } — remove a pack
+export async function DELETE(req: NextRequest) {
+  try {
+    const { repo } = await req.json();
+    if (!repo || !/^[a-zA-Z0-9._-]+\/[a-zA-Z0-9._-]+$/.test(repo)) {
+      return NextResponse.json({ error: 'Invalid repo format' }, { status: 400 });
+    }
+    const [publisher, name] = repo.split('/');
+    const dest = join(PACKS_DIR, publisher, name);
+    spawnSync('rm', ['-rf', dest]);
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: 'Remove failed' }, { status: 500 });
+  }
+}
+
+// PATCH { repo: "publisher/name" } — update a pack (git pull)
+export async function PATCH(req: NextRequest) {
+  try {
+    const { repo } = await req.json();
+    if (!repo || !/^[a-zA-Z0-9._-]+\/[a-zA-Z0-9._-]+$/.test(repo)) {
+      return NextResponse.json({ error: 'Invalid repo format' }, { status: 400 });
+    }
+    const [publisher, name] = repo.split('/');
+    const dest = join(PACKS_DIR, publisher, name);
+    const result = spawnSync('git', ['-C', dest, 'pull'], { timeout: 30000 });
+    if (result.status !== 0) {
+      return NextResponse.json({ error: 'Update failed' }, { status: 500 });
+    }
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: 'Update failed' }, { status: 500 });
+  }
+}

package/web/components/agent-roster-panel.tsx

@@ -3,6 +3,7 @@
 import { useState, useMemo } from 'react';
 import { HookSlot } from './hook-slot';
 import { AgentForm } from './agent-form';
+import { PacksPanel } from './packs-panel';
 import { playUISound } from '@/lib/ui-audio';
 import { getEventLabel } from '@/lib/utils';
 import type { HookEvent, SkillHookEvent, SoundAssignments, AgentInfo, SkillInfo, AgentFormData, SelectMode } from '@/lib/types';
@@ -220,7 +221,7 @@ interface AgentRosterPanelProps {
 }
 
 export function AgentRosterPanel({ assignments, agents, skills, onAssignmentChange, onPreview, onAgentsChange, selectMode, onSlotSelect }: AgentRosterPanelProps) {
-  const [activeView, setActiveView] = useState<'agents' | 'skills'>('agents');
+  const [activeView, setActiveView] = useState<'agents' | 'skills' | 'packs'>('agents');
   const [showForm, setShowForm] = useState(false);
   const [editingAgent, setEditingAgent] = useState<AgentInfo | undefined>();
   const [skillSearch, setSkillSearch] = useState('');
@@ -341,7 +342,7 @@ export function AgentRosterPanel({ assignments, agents, skills, onAssignmentChan
       {/* Tab bar header */}
       <div className="shrink-0 border-b" style={{ borderColor: 'var(--sf-border)', backgroundColor: 'var(--sf-panel)' }}>
         <div className="flex items-stretch">
-          {(['agents', 'skills'] as const).map((view) => (
+          {(['agents', 'skills', 'packs'] as const).map((view) => (
             <button
               key={view}
               data-sf-hover
@@ -359,7 +360,7 @@ export function AgentRosterPanel({ assignments, agents, skills, onAssignmentChan
                 backgroundColor: activeView === view ? 'rgba(0,229,255,0.04)' : 'transparent',
               }}
             >
-              {view === 'agents' ? 'AGENTS' : 'SKILLS'}
+              {view.toUpperCase()}
             </button>
           ))}
           {activeView === 'agents' && (
@@ -496,6 +497,8 @@ export function AgentRosterPanel({ assignments, agents, skills, onAssignmentChan
             })}
           </>
         )}
+
+        {activeView === 'packs' && <PacksPanel />}
       </div>
     </div>
   );

package/web/components/packs-panel.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { playUISound } from '@/lib/ui-audio';
+
+interface PackInfo {
+  id: string;
+  publisher: string;
+  name: string;
+  description?: string;
+  version?: string;
+}
+
+interface RegistryPack {
+  id: string;
+  name: string;
+  publisher: string;
+  description: string;
+  stars: number;
+  updatedAt: string;
+}
+
+type PackAction = 'idle' | 'installing' | 'updating' | 'removing';
+
+export function PacksPanel() {
+  const [installed, setInstalled] = useState<PackInfo[]>([]);
+  const [registry, setRegistry] = useState<RegistryPack[]>([]);
+  const [actions, setActions] = useState<Record<string, PackAction>>({});
+  const [registryError, setRegistryError] = useState(false);
+
+  const fetchInstalled = useCallback(() => {
+    fetch('/api/packs').then(r => r.json()).then(setInstalled).catch(console.error);
+  }, []);
+
+  useEffect(() => {
+    fetchInstalled();
+    // Fetch registry index
+    fetch('https://rohenaz.github.io/agentcraft-registry/index.json')
+      .then(r => r.json())
+      .then(setRegistry)
+      .catch(() => setRegistryError(true));
+  }, [fetchInstalled]);
+
+  const setAction = (id: string, action: PackAction) =>
+    setActions(prev => ({ ...prev, [id]: action }));
+
+  const handleInstall = async (id: string) => {
+    setAction(id, 'installing');
+    try {
+      const r = await fetch('/api/packs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ repo: id }) });
+      if (!r.ok) throw new Error();
+      playUISound('confirm', 0.5);
+      fetchInstalled();
+    } catch {
+      playUISound('error', 0.5);
+    }
+    setAction(id, 'idle');
+  };
+
+  const handleUpdate = async (id: string) => {
+    setAction(id, 'updating');
+    try {
+      const r = await fetch('/api/packs', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ repo: id }) });
+      if (!r.ok) throw new Error();
+      playUISound('confirm', 0.4);
+    } catch {
+      playUISound('error', 0.5);
+    }
+    setAction(id, 'idle');
+  };
+
+  const handleRemove = async (id: string) => {
+    setAction(id, 'removing');
+    try {
+      const r = await fetch('/api/packs', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ repo: id }) });
+      if (!r.ok) throw new Error();
+      fetchInstalled();
+    } catch {
+      playUISound('error', 0.5);
+    }
+    setAction(id, 'idle');
+  };
+
+  const installedIds = new Set(installed.map(p => p.id));
+  const browsePacks = registry.filter(p => !installedIds.has(p.id));
+
+  const btnStyle = (active: boolean, danger = false) => ({
+    border: `1px solid ${danger ? 'rgba(255,80,80,0.4)' : active ? 'var(--sf-cyan)' : 'var(--sf-border)'}`,
+    color: danger ? 'rgba(255,80,80,0.7)' : active ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.4)',
+    backgroundColor: 'transparent',
+    padding: '2px 8px',
+    fontSize: '9px',
+    fontFamily: 'inherit',
+    letterSpacing: '0.08em',
+    textTransform: 'uppercase' as const,
+    cursor: 'pointer',
+    transition: 'all 0.15s',
+  });
+
+  return (
+    <div className="flex flex-col overflow-hidden h-full">
+      {/* Installed */}
+      <div className="shrink-0 px-3 pt-3 pb-1">
+        <div className="text-[10px] sf-heading font-semibold tracking-widest uppercase mb-2" style={{ color: 'var(--sf-cyan)' }}>
+          INSTALLED PACKS
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-3 pb-3 space-y-1">
+        {installed.length === 0 && (
+          <div className="text-[10px] opacity-30 py-4 text-center">NO PACKS INSTALLED</div>
+        )}
+        {installed.map(pack => {
+          const action = actions[pack.id] ?? 'idle';
+          return (
+            <div key={pack.id} className="p-2.5" style={{ border: '1px solid var(--sf-border)', backgroundColor: 'rgba(0,229,255,0.02)' }}>
+              <div className="flex items-start justify-between gap-2">
+                <div className="overflow-hidden">
+                  <div className="text-xs sf-heading font-semibold truncate" style={{ color: 'rgba(255,255,255,0.85)' }}>
+                    {pack.name}
+                  </div>
+                  <div className="text-[10px] opacity-40">{pack.publisher}{pack.version ? ` · v${pack.version}` : ''}</div>
+                  {pack.description && (
+                    <div className="text-[10px] opacity-50 mt-0.5 line-clamp-2">{pack.description}</div>
+                  )}
+                </div>
+                <div className="flex gap-1 shrink-0">
+                  <button style={btnStyle(false)} disabled={action !== 'idle'} onClick={() => handleUpdate(pack.id)}>
+                    {action === 'updating' ? '···' : 'UPDATE'}
+                  </button>
+                  <button style={btnStyle(false, true)} disabled={action !== 'idle'} onClick={() => handleRemove(pack.id)}>
+                    {action === 'removing' ? '···' : 'REMOVE'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+
+        {/* Browse */}
+        <div className="text-[10px] sf-heading font-semibold tracking-widest uppercase mt-4 mb-2" style={{ color: 'var(--sf-cyan)' }}>
+          BROWSE PACKS
+        </div>
+
+        {registryError && (
+          <div className="text-[10px] opacity-30 py-2 text-center">REGISTRY UNAVAILABLE</div>
+        )}
+
+        {!registryError && browsePacks.length === 0 && registry.length > 0 && (
+          <div className="text-[10px] opacity-30 py-2 text-center">ALL AVAILABLE PACKS INSTALLED</div>
+        )}
+
+        {browsePacks.map(pack => {
+          const action = actions[pack.id] ?? 'idle';
+          return (
+            <div key={pack.id} className="p-2.5" style={{ border: '1px solid var(--sf-border)' }}>
+              <div className="flex items-start justify-between gap-2">
+                <div className="overflow-hidden">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs sf-heading font-semibold truncate" style={{ color: 'rgba(255,255,255,0.85)' }}>
+                      {pack.name}
+                    </span>
+                    {pack.stars > 0 && (
+                      <span className="text-[9px] opacity-40">★ {pack.stars}</span>
+                    )}
+                  </div>
+                  <div className="text-[10px] opacity-40">{pack.publisher}</div>
+                  <div className="text-[10px] opacity-50 mt-0.5 line-clamp-2">{pack.description}</div>
+                </div>
+                <button style={btnStyle(true)} disabled={action !== 'idle'} onClick={() => handleInstall(pack.id)}>
+                  {action === 'installing' ? '···' : 'INSTALL'}
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/web/components/sound-browser-panel.tsx

@@ -15,6 +15,12 @@ interface SoundBrowserPanelProps {
   onClearSelectMode: () => void;
 }
 
+// Strip pack prefix from category: "publisher/name:sc2/terran" → "sc2/terran"
+function internalCat(category: string): string {
+  const idx = category.indexOf(':');
+  return idx === -1 ? category : category.slice(idx + 1);
+}
+
 export function SoundBrowserPanel({ sounds, assignments, onPreview, selectMode, onSelectModeAssign, onClearSelectMode }: SoundBrowserPanelProps) {
   const [activeGroup, setActiveGroup] = useState<string>('sc2');
   const [activeCategory, setActiveCategory] = useState<string>('sc2/terran');
@@ -31,12 +37,12 @@ export function SoundBrowserPanel({ sounds, assignments, onPreview, selectMode,
   }, []);
 
   const allGroups = useMemo(() => {
-    return [...new Set(sounds.map((s) => s.category.split('/')[0]))].sort();
+    return [...new Set(sounds.map((s) => internalCat(s.category).split('/')[0]))].sort();
   }, [sounds]);
 
   const groupCategories = useMemo(() => {
     return [...new Set(
-      sounds.filter((s) => s.category.split('/')[0] === activeGroup).map((s) => s.category)
+      sounds.filter((s) => internalCat(s.category).split('/')[0] === activeGroup).map((s) => s.category)
     )].sort();
   }, [sounds, activeGroup]);
 
@@ -131,7 +137,7 @@ export function SoundBrowserPanel({ sounds, assignments, onPreview, selectMode,
                   backgroundColor: effectiveCategory === cat ? 'rgba(0,229,255,0.05)' : 'transparent',
                 }}
               >
-                {getSubTabLabel(cat)}
+                {getSubTabLabel(internalCat(cat))}
               </button>
             ))}
           </div>
@@ -176,7 +182,7 @@ export function SoundBrowserPanel({ sounds, assignments, onPreview, selectMode,
           <div key={cat}>
             {isSearching && (
               <div className="text-[9px] uppercase tracking-widest mb-1 mt-3 px-1 first:mt-0" style={{ color: 'var(--sf-cyan)', opacity: 0.6 }}>
-                {cat.replace(/\//g, ' › ')}
+                {internalCat(cat).replace(/\//g, ' › ')}
               </div>
             )}
             {Object.entries(subcats).map(([subcat, catSounds]) => (