agentcraft 0.0.1

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

@@ -0,0 +1,83 @@
+import { NextResponse } from 'next/server';
+import { readdir, readFile } from 'fs/promises';
+import { join } from 'path';
+import { homedir } from 'os';
+import type { SkillInfo } from '@/lib/types';
+
+const HOME = homedir();
+const USER_SKILLS_DIR = join(HOME, '.claude', 'skills');
+const PLUGINS_JSON = join(HOME, '.claude', 'plugins', 'installed_plugins.json');
+
+async function readSkillFromDir(dir: string, namespace?: string): Promise<SkillInfo | null> {
+  try {
+    const skillMd = await readFile(join(dir, 'SKILL.md'), 'utf-8');
+    const descMatch = skillMd.match(/^description:\s*(.+)$/m);
+    const dirName = dir.split('/').pop() ?? '';
+    const qualifiedName = namespace ? `${namespace}:${dirName}` : dirName;
+    return {
+      name: dirName,
+      qualifiedName,
+      description: descMatch ? descMatch[1].trim() : dirName,
+      namespace,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export async function GET() {
+  const skills: SkillInfo[] = [];
+  const seen = new Set<string>();
+
+  // User skills from ~/.claude/skills/
+  try {
+    const entries = await readdir(USER_SKILLS_DIR, { withFileTypes: true });
+    for (const entry of entries) {
+      if (!entry.isDirectory()) continue;
+      const skill = await readSkillFromDir(join(USER_SKILLS_DIR, entry.name));
+      if (skill && !seen.has(skill.qualifiedName)) {
+        skills.push(skill);
+        seen.add(skill.qualifiedName);
+      }
+    }
+  } catch {
+    // user skills dir may not exist
+  }
+
+  // Plugin skills from installed_plugins.json
+  try {
+    const raw = await readFile(PLUGINS_JSON, 'utf-8');
+    const data = JSON.parse(raw) as {
+      version: number;
+      plugins: Record<string, Array<{ scope: string; installPath: string }>>;
+    };
+
+    for (const [pluginKey, installs] of Object.entries(data.plugins)) {
+      const pluginName = pluginKey.split('@')[0];
+      // Deduplicate: use first install (user-scope preferred over project)
+      const install = installs.find(i => i.scope === 'user') ?? installs[0];
+      if (!install?.installPath) continue;
+
+      const skillsDir = join(install.installPath, 'skills');
+      try {
+        const entries = await readdir(skillsDir, { withFileTypes: true });
+        for (const entry of entries) {
+          if (!entry.isDirectory()) continue;
+          const qualifiedName = `${pluginName}:${entry.name}`;
+          if (seen.has(qualifiedName)) continue;
+          const skill = await readSkillFromDir(join(skillsDir, entry.name), pluginName);
+          if (skill) {
+            skills.push(skill);
+            seen.add(qualifiedName);
+          }
+        }
+      } catch {
+        // plugin may not have a skills dir
+      }
+    }
+  } catch {
+    // installed_plugins.json may not exist
+  }
+
+  return NextResponse.json(skills.sort((a, b) => a.qualifiedName.localeCompare(b.qualifiedName)));
+}

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

@@ -0,0 +1,106 @@
+import { NextResponse } from 'next/server';
+import { readdir, readFile, writeFile, mkdir } from 'fs/promises';
+import { join, dirname } from 'path';
+import { homedir } from 'os';
+import { spawnSync } from 'child_process';
+import type { SoundAsset } from '@/lib/types';
+
+const SOUND_LIBRARY = join(homedir(), '.agentcraft', 'sounds');
+const WAVEFORM_CACHE = join(homedir(), '.agentcraft', 'waveforms.json');
+const BARS = 16;
+const FALLBACK = [5, 7, 4, 9, 6, 8, 3, 7, 5, 8, 4, 6, 7, 5, 8, 4];
+
+function computeWaveform(filePath: string): number[] {
+  // Decode to mono f32le PCM at 1000 Hz (massively downsampled — fast, still accurate)
+  const result = spawnSync('ffmpeg', [
+    '-i', filePath,
+    '-ac', '1',          // mono
+    '-ar', '1000',       // 1000 Hz sample rate
+    '-f', 'f32le',       // raw 32-bit float output
+    '-',                 // pipe to stdout
+  ], { maxBuffer: 1024 * 1024 * 4 });
+
+  if (result.status !== 0 || !result.stdout?.length) return FALLBACK;
+
+  const buf = result.stdout as Buffer;
+  const samples = buf.length / 4; // 4 bytes per f32
+  const blockSize = Math.floor(samples / BARS);
+  const values: number[] = [];
+
+  for (let i = 0; i < BARS; i++) {
+    let sum = 0;
+    for (let j = 0; j < blockSize; j++) {
+      sum += Math.abs(buf.readFloatLE((i * blockSize + j) * 4));
+    }
+    values.push(sum / blockSize);
+  }
+
+  const max = Math.max(...values, 0.0001);
+  return values.map((v) => Math.max(1, Math.round((v / max) * 10)));
+}
+
+async function loadCache(): Promise<Record<string, number[]>> {
+  try {
+    return JSON.parse(await readFile(WAVEFORM_CACHE, 'utf-8'));
+  } catch {
+    return {};
+  }
+}
+
+async function saveCache(cache: Record<string, number[]>) {
+  await mkdir(dirname(WAVEFORM_CACHE), { recursive: true });
+  await writeFile(WAVEFORM_CACHE, JSON.stringify(cache), 'utf-8');
+}
+
+async function walkDir(dir: string, base: string): Promise<SoundAsset[]> {
+  const assets: SoundAsset[] = [];
+  const entries = await readdir(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      assets.push(...await walkDir(fullPath, base));
+    } else if (entry.name.match(/\.(mp3|wav|ogg|m4a)$/i)) {
+      const relativePath = fullPath.replace(base + '/', '');
+      const parts = relativePath.split('/');
+      // For flat dirs (depth 1): icq/uh-oh.mp3 → category=icq, subcategory=''
+      // For nested dirs (depth 2+): sc2/terran/session-start/scv.mp3 → category=sc2/terran, subcategory=session-start
+      const category = parts.length > 2 ? parts.slice(0, -2).join('/') : parts[0];
+      const subcategory = parts.length > 2 ? parts[parts.length - 2] : '';
+      assets.push({
+        id: relativePath.replace(/\.[^/.]+$/, ''),
+        filename: parts[parts.length - 1],
+        category,
+        subcategory,
+        path: relativePath,
+        waveform: FALLBACK,
+      });
+    }
+  }
+
+  return assets;
+}
+
+export async function GET() {
+  try {
+    const assets = await walkDir(SOUND_LIBRARY, SOUND_LIBRARY);
+    const cache = await loadCache();
+
+    let dirty = false;
+    const results = assets.map((asset) => {
+      if (cache[asset.path]) {
+        return { ...asset, waveform: cache[asset.path] };
+      }
+      const waveform = computeWaveform(join(SOUND_LIBRARY, asset.path));
+      cache[asset.path] = waveform;
+      dirty = true;
+      return { ...asset, waveform };
+    });
+
+    if (dirty) await saveCache(cache);
+
+    return NextResponse.json(results);
+  } catch {
+    return NextResponse.json({ error: 'Failed to read sound library' }, { status: 500 });
+  }
+}

package/web/app/api/ui-sounds/route.ts

@@ -0,0 +1,44 @@
+import { NextResponse } from 'next/server';
+import { readdir, stat } from 'fs/promises';
+import { join } from 'path';
+import { homedir } from 'os';
+
+const UI_DIR = join(homedir(), '.agentcraft', 'sounds', 'ui');
+const AUDIO_EXTS = new Set(['.mp3', '.wav', '.ogg', '.m4a']);
+
+interface UISound {
+  path: string;     // relative to ~/.agentcraft/sounds/, e.g. "ui/sc2/click.mp3"
+  filename: string; // e.g. "click.mp3"
+  group: string;    // e.g. "sc2"
+}
+
+async function scanDir(dir: string, base: string): Promise<UISound[]> {
+  const results: UISound[] = [];
+  let entries: string[];
+  try {
+    entries = await readdir(dir);
+  } catch {
+    return results;
+  }
+  for (const entry of entries.sort()) {
+    const full = join(dir, entry);
+    const s = await stat(full).catch(() => null);
+    if (!s) continue;
+    if (s.isDirectory()) {
+      results.push(...await scanDir(full, `${base}/${entry}`));
+    } else {
+      const ext = entry.toLowerCase().slice(entry.lastIndexOf('.'));
+      if (AUDIO_EXTS.has(ext)) {
+        const rel = `${base}/${entry}`;
+        const group = base.replace('ui/', '');
+        results.push({ path: rel, filename: entry, group });
+      }
+    }
+  }
+  return results;
+}
+
+export async function GET() {
+  const sounds = await scanDir(UI_DIR, 'ui');
+  return NextResponse.json(sounds);
+}

package/web/app/globals.css

@@ -0,0 +1,99 @@
+@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');
+@import "tailwindcss";
+
+@font-face {
+  font-family: 'Starcraft';
+  src: url('/fonts/starcraft-normal.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --sf-bg: #07090F;
+  --sf-panel: #0A0E18;
+  --sf-panel2: #0D1520;
+  --sf-cyan: #00E5FF;
+  --sf-blue: #00A8FF;
+  --sf-alert: #FF3366;
+  --sf-gold: #FFC000;
+  --sf-green: #00FF88;
+  --sf-border: rgba(0, 229, 255, 0.2);
+  --sf-border-gold: rgba(255, 192, 0, 0.4);
+}
+
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--sf-bg);
+  color: #e0e8ff;
+  font-family: 'Share Tech Mono', monospace;
+  overflow: hidden;
+}
+
+.sf-heading {
+  font-family: 'Chakra Petch', sans-serif;
+}
+
+.sf-logo {
+  font-family: 'Starcraft', 'Chakra Petch', sans-serif;
+}
+
+/* Scanlines overlay */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.08) 2px,
+    rgba(0, 0, 0, 0.08) 4px
+  );
+}
+
+/* Angled clip-path card */
+.sf-card {
+  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
+}
+
+/* Cyan glow */
+.sf-glow {
+  box-shadow: 0 0 8px rgba(0, 229, 255, 0.3), inset 0 0 8px rgba(0, 229, 255, 0.05);
+}
+
+/* Gold glow */
+.sf-glow-gold {
+  box-shadow: 0 0 8px rgba(255, 192, 0, 0.3), inset 0 0 8px rgba(255, 192, 0, 0.05);
+}
+
+/* Pulse animation for dirty state */
+@keyframes pulse-gold {
+  0%, 100% { box-shadow: 0 0 4px rgba(255, 192, 0, 0.4); }
+  50% { box-shadow: 0 0 16px rgba(255, 192, 0, 0.8), 0 0 32px rgba(255, 192, 0, 0.3); }
+}
+
+.sf-pulse-gold {
+  animation: pulse-gold 1.5s ease-in-out infinite;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 4px;
+}
+::-webkit-scrollbar-track {
+  background: var(--sf-bg);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--sf-border);
+  border-radius: 2px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--sf-cyan);
+}

package/web/app/icon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" fill="#07090F"/>
+  <!-- Waveform bars: 8 bars of varying height, centered -->
+  <rect x="2"  y="18" width="3" height="8"  fill="#00E5FF" opacity="0.5"/>
+  <rect x="6"  y="12" width="3" height="14" fill="#00E5FF" opacity="0.7"/>
+  <rect x="10" y="7"  width="3" height="19" fill="#00E5FF"/>
+  <rect x="14" y="10" width="3" height="16" fill="#00E5FF"/>
+  <rect x="18" y="4"  width="3" height="22" fill="#00E5FF"/>
+  <rect x="22" y="9"  width="3" height="17" fill="#00E5FF"/>
+  <rect x="26" y="14" width="3" height="12" fill="#00E5FF" opacity="0.7"/>
+  <!-- Top cyan border accent -->
+  <rect x="0" y="0" width="32" height="2" fill="#00E5FF" opacity="0.6"/>
+</svg>

package/web/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'AgentCraft',
+  description: 'Assign sounds to AI coding agent lifecycle events',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

package/web/app/opengraph-image.tsx

@@ -0,0 +1,96 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+export const alt = 'AgentCraft — Assign sounds to AI coding agent lifecycle events';
+export const size = { width: 1200, height: 630 };
+export const contentType = 'image/png';
+
+export default function OGImage() {
+  const bars = [4, 7, 5, 9, 6, 10, 7, 8, 5, 9, 6, 8, 4, 7, 5, 8];
+  const maxH = 120;
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: 1200,
+          height: 630,
+          background: '#07090F',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontFamily: 'monospace',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Top border accent */}
+        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: '#00E5FF', opacity: 0.8, display: 'flex' }} />
+
+        {/* Grid overlay */}
+        <div style={{
+          position: 'absolute', inset: 0,
+          backgroundImage: 'linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px)',
+          backgroundSize: '40px 40px',
+          display: 'flex',
+        }} />
+
+        {/* Waveform */}
+        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, marginBottom: 48, height: maxH + 20 }}>
+          {bars.map((v, i) => (
+            <div
+              key={i}
+              style={{
+                width: 28,
+                height: Math.round((v / 10) * maxH),
+                background: i === 8 ? '#00E5FF' : `rgba(0,229,255,${0.3 + (v / 10) * 0.7})`,
+                borderRadius: 2,
+              }}
+            />
+          ))}
+        </div>
+
+        {/* Title */}
+        <div style={{
+          fontSize: 72,
+          fontWeight: 700,
+          color: '#00E5FF',
+          letterSpacing: '0.2em',
+          textTransform: 'uppercase',
+          display: 'flex',
+        }}>
+          AGENTCRAFT
+        </div>
+
+        {/* Subtitle */}
+        <div style={{
+          fontSize: 22,
+          color: 'rgba(255,255,255,0.5)',
+          letterSpacing: '0.3em',
+          textTransform: 'uppercase',
+          marginTop: 16,
+          display: 'flex',
+        }}>
+          AUDIO ASSIGNMENT TERMINAL
+        </div>
+
+        {/* Tag line */}
+        <div style={{
+          fontSize: 16,
+          color: 'rgba(0,229,255,0.5)',
+          letterSpacing: '0.15em',
+          textTransform: 'uppercase',
+          marginTop: 24,
+          display: 'flex',
+        }}>
+          CLAUDE CODE · OPENCODE · AI LIFECYCLE HOOKS
+        </div>
+
+        {/* Bottom border */}
+        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: '#00E5FF', opacity: 0.3, display: 'flex' }} />
+      </div>
+    ),
+    { ...size }
+  );
+}