agentcraft 0.0.1 → 0.0.3

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]) => (

package/web/lib/packs.ts

@@ -0,0 +1,82 @@
+import { readdir, stat } from 'fs/promises';
+import { join } from 'path';
+import { homedir } from 'os';
+
+export const PACKS_DIR = join(homedir(), '.agentcraft', 'packs');
+export const ASSIGNMENTS_PATH = join(homedir(), '.agentcraft', 'assignments.json');
+export const WAVEFORM_CACHE = join(homedir(), '.agentcraft', 'waveforms.json');
+const AUDIO_EXTS = new Set(['.mp3', '.wav', '.ogg', '.m4a']);
+
+export interface Pack {
+  publisher: string;
+  name: string;
+  path: string;
+  id: string; // "publisher/name"
+}
+
+export async function listPacks(): Promise<Pack[]> {
+  const packs: Pack[] = [];
+  let publishers: string[];
+  try {
+    publishers = await readdir(PACKS_DIR);
+  } catch {
+    return packs;
+  }
+  for (const publisher of publishers) {
+    const publisherPath = join(PACKS_DIR, publisher);
+    const ps = await stat(publisherPath).catch(() => null);
+    if (!ps?.isDirectory()) continue;
+    const names = await readdir(publisherPath).catch(() => [] as string[]);
+    for (const name of names) {
+      const packPath = join(publisherPath, name);
+      const ns = await stat(packPath).catch(() => null);
+      if (!ns?.isDirectory()) continue;
+      packs.push({ publisher, name, path: packPath, id: `${publisher}/${name}` });
+    }
+  }
+  return packs;
+}
+
+export function resolvePackPath(soundPath: string): string | null {
+  if (!soundPath) return null;
+  const colonIdx = soundPath.indexOf(':');
+  if (colonIdx === -1) {
+    // Legacy path — assume rohenaz/agentcraft-sounds
+    return join(PACKS_DIR, 'rohenaz', 'agentcraft-sounds', soundPath);
+  }
+  const packId = soundPath.slice(0, colonIdx);
+  const internal = soundPath.slice(colonIdx + 1);
+  if (!packId || !internal || internal.includes('..')) return null;
+  const [publisher, name] = packId.split('/');
+  if (!publisher || !name) return null;
+  return join(PACKS_DIR, publisher, name, internal);
+}
+
+export async function walkPackDir(
+  dir: string,
+  base: string,
+  packId: string
+): Promise<Array<{ relPath: string; absPath: string }>> {
+  const results: Array<{ relPath: string; absPath: string }> = [];
+  let entries: string[];
+  try {
+    entries = await readdir(dir);
+  } catch {
+    return results;
+  }
+  for (const entry of entries) {
+    const abs = join(dir, entry);
+    const s = await stat(abs).catch(() => null);
+    if (!s) continue;
+    if (s.isDirectory()) {
+      results.push(...await walkPackDir(abs, base, packId));
+    } else {
+      const ext = entry.slice(entry.lastIndexOf('.')).toLowerCase();
+      if (AUDIO_EXTS.has(ext)) {
+        const rel = abs.slice(base.length + 1);
+        results.push({ relPath: `${packId}:${rel}`, absPath: abs });
+      }
+    }
+  }
+  return results;
+}