agentcraft 0.0.1

package/web/components/sound-unit.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useDraggable } from '@dnd-kit/core';
+import { formatSoundName } from '@/lib/utils';
+import type { SoundAsset } from '@/lib/types';
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+interface SoundUnitProps {
+  sound: SoundAsset;
+  isAssigned: boolean;
+  onPreview: (path: string) => void;
+  isOverlay?: boolean;
+  onSelectAssign?: () => void; // if set, card click assigns instead of plays
+}
+
+const BARS = 16;
+
+export function SoundUnit({ sound, isAssigned, onPreview, isOverlay, onSelectAssign }: SoundUnitProps) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [bars, setBars] = useState<number[]>(sound.waveform.map(h => h / 10));
+
+  const ctxRef = useRef<AudioContext | null>(null);
+  const sourceRef = useRef<AudioBufferSourceNode | null>(null);
+  const rafRef = useRef<number | null>(null);
+  // Track whether a drag actually happened so we can suppress the click
+  const didDragRef = useRef(false);
+
+  useEffect(() => {
+    setBars(sound.waveform.map(h => h / 10));
+  }, [sound.waveform]);
+
+  const stop = useCallback(() => {
+    if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = null; }
+    if (sourceRef.current) { try { sourceRef.current.stop(); } catch {} sourceRef.current = null; }
+    if (ctxRef.current) { ctxRef.current.close(); ctxRef.current = null; }
+    setIsPlaying(false);
+    setBars(sound.waveform.map(h => h / 10));
+  }, [sound.waveform]);
+
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: sound.path,
+    data: { sound },
+    disabled: isOverlay,
+  });
+
+  // Track drag so we can suppress click-to-play after a drag
+  useEffect(() => {
+    if (isDragging) didDragRef.current = true;
+  }, [isDragging]);
+
+  const playSound = useCallback(async () => {
+    if (isPlaying) { stop(); return; }
+    setIsPlaying(true);
+
+    const ctx = new AudioContext();
+    ctxRef.current = ctx;
+
+    const analyser = ctx.createAnalyser();
+    analyser.fftSize = 256;
+    analyser.smoothingTimeConstant = 0.6;
+    analyser.connect(ctx.destination);
+
+    let audioBuffer: AudioBuffer;
+    try {
+      const res = await fetch(`/api/audio/${sound.path}`);
+      const arrayBuf = await res.arrayBuffer();
+      audioBuffer = await ctx.decodeAudioData(arrayBuf);
+    } catch {
+      stop();
+      return;
+    }
+
+    const source = ctx.createBufferSource();
+    source.buffer = audioBuffer;
+    source.connect(analyser);
+    source.start();
+    sourceRef.current = source;
+    source.onended = stop;
+
+    const freqData = new Uint8Array(analyser.frequencyBinCount);
+    const binsPerBar = Math.floor(analyser.frequencyBinCount / BARS);
+
+    const draw = () => {
+      analyser.getByteFrequencyData(freqData);
+      const next = Array.from({ length: BARS }, (_, i) => {
+        let sum = 0;
+        for (let j = 0; j < binsPerBar; j++) sum += freqData[i * binsPerBar + j];
+        return Math.max(0.04, (sum / binsPerBar) / 255);
+      });
+      setBars(next);
+      rafRef.current = requestAnimationFrame(draw);
+    };
+    draw();
+  }, [isPlaying, sound.path, stop]);
+
+  const handleCardClick = useCallback(() => {
+    if (didDragRef.current) { didDragRef.current = false; return; }
+    if (onSelectAssign) {
+      onSelectAssign();
+    } else {
+      playSound();
+    }
+  }, [playSound, onSelectAssign]);
+
+  if (isOverlay) {
+    return (
+      <div
+        className="sf-card relative flex flex-col gap-2 p-3"
+        style={{
+          backgroundColor: 'var(--sf-panel2)',
+          border: '1px solid var(--sf-cyan)',
+          boxShadow: '0 0 24px rgba(0,229,255,0.5), 0 0 8px rgba(0,229,255,0.3)',
+          opacity: 1,
+          cursor: 'grabbing',
+          transform: 'rotate(1.5deg) scale(1.04)',
+        }}
+      >
+        <div className="flex items-end gap-px h-5">
+          {bars.map((v, i) => (
+            <div
+              key={i}
+              className="flex-1"
+              style={{ height: `${v * 100}%`, backgroundColor: 'var(--sf-cyan)', minWidth: '2px' }}
+            />
+          ))}
+        </div>
+        <span className="text-[10px] opacity-70 truncate leading-tight">{formatSoundName(sound.filename)}</span>
+      </div>
+    );
+  }
+
+  const lit = isHovered || isPlaying;
+
+  return (
+    <div
+      ref={setNodeRef}
+      // data-sf-hover: hover sound fires on enter
+      // data-no-ui-sound: suppress UI click sound (card click plays actual audio instead)
+      data-sf-hover
+      data-no-ui-sound
+      className="sf-card relative flex flex-col gap-2 p-3 transition-all select-none"
+      style={{
+        backgroundColor: lit ? 'rgba(0,229,255,0.06)' : 'var(--sf-panel2)',
+        border: `1px solid ${
+          isDragging ? 'var(--sf-cyan)'
+          : isPlaying ? 'var(--sf-cyan)'
+          : onSelectAssign && lit ? 'rgba(0,229,255,0.8)'
+          : onSelectAssign ? 'rgba(0,229,255,0.35)'
+          : lit ? 'rgba(0,229,255,0.55)'
+          : isAssigned ? 'rgba(0,255,136,0.4)'
+          : 'var(--sf-border)'
+        }`,
+        opacity: isDragging ? 0.3 : 1,
+        boxShadow: isPlaying ? '0 0 8px rgba(0,229,255,0.2)' : isDragging ? '0 0 16px rgba(0,229,255,0.4)' : undefined,
+        cursor: isDragging ? 'grabbing' : 'pointer',
+      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={handleCardClick}
+      {...listeners}
+      {...attributes}
+    >
+      {isAssigned && !isPlaying && (
+        <div
+          className="absolute top-2 right-2 w-1.5 h-1.5 rounded-full"
+          style={{ backgroundColor: 'var(--sf-green)', boxShadow: '0 0 4px var(--sf-green)' }}
+        />
+      )}
+
+      <div className="flex items-end gap-px h-5">
+        {bars.map((v, i) => (
+          <div
+            key={i}
+            className="flex-1"
+            style={{
+              height: `${v * 100}%`,
+              backgroundColor: isPlaying ? 'var(--sf-cyan)' : lit ? 'rgba(0,229,255,0.55)' : 'rgba(0,229,255,0.3)',
+              minWidth: '2px',
+              transition: 'height 50ms linear',
+            }}
+          />
+        ))}
+      </div>
+
+      <div className="flex items-center justify-between gap-1">
+        <span
+          className="text-[10px] truncate leading-tight"
+          style={{ color: lit ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.65)' }}
+          title={sound.filename}
+        >
+          {formatSoundName(sound.filename)}
+        </span>
+        {onSelectAssign && !isPlaying && (
+          <span className="shrink-0 text-[9px]" style={{ color: 'rgba(0,229,255,0.5)' }}>→</span>
+        )}
+        {isPlaying && (
+          <span className="shrink-0 text-[9px] animate-pulse" style={{ color: 'var(--sf-cyan)' }}>♪</span>
+        )}
+      </div>
+    </div>
+  );
+}

package/web/components/ui-sounds-modal.tsx

@@ -0,0 +1,308 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { previewUISound } from '@/lib/ui-audio';
+import type { UITheme, UISlotMap } from '@/lib/types';
+
+interface UISound {
+  path: string;
+  filename: string;
+  group: string;
+}
+
+type SlotName = 'click' | 'hover' | 'error' | 'pageChange' | 'toggle' | 'confirm';
+
+const SLOTS: { name: SlotName; label: string; desc: string }[] = [
+  { name: 'hover', label: 'HOVER', desc: 'Mouse over interactive element' },
+  { name: 'click', label: 'CLICK', desc: 'Button or card clicked' },
+  { name: 'toggle', label: 'TOGGLE', desc: 'Expand / collapse sidebar items' },
+  { name: 'pageChange', label: 'PAGE CHANGE', desc: 'Tab / group navigation' },
+  { name: 'confirm', label: 'CONFIRM', desc: 'Sound assigned, settings saved' },
+  { name: 'error', label: 'ERROR', desc: 'Action failed or invalid' },
+];
+
+interface Props {
+  uiTheme: UITheme;
+  uiSounds: Record<string, UISlotMap>;
+  onSave: (theme: UITheme, sounds: Record<string, UISlotMap>) => void;
+  onClose: () => void;
+}
+
+export function UISoundsModal({ uiTheme, uiSounds, onSave, onClose }: Props) {
+  const [sounds, setSounds] = useState<UISound[]>([]);
+  const [activeTheme, setActiveTheme] = useState<UITheme>(uiTheme === 'off' ? 'sc2' : uiTheme);
+  const [slots, setSlots] = useState<UISlotMap>(uiSounds[uiTheme === 'off' ? 'sc2' : uiTheme] ?? {});
+  const [activeSlot, setActiveSlot] = useState<SlotName>('hover');
+  const [playing, setPlaying] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch('/api/ui-sounds').then((r) => r.json()).then(setSounds).catch(console.error);
+  }, []);
+
+  // When theme changes, load existing slot config for that theme
+  const switchTheme = useCallback((theme: UITheme) => {
+    setActiveTheme(theme);
+    setSlots(uiSounds[theme] ?? {});
+  }, [uiSounds]);
+
+  const handlePreview = useCallback(async (path: string) => {
+    setPlaying(path);
+    await previewUISound(path, 0.5);
+    setTimeout(() => setPlaying((p) => p === path ? null : p), 800);
+  }, []);
+
+  const assignSound = useCallback((path: string) => {
+    setSlots((prev) => ({ ...prev, [activeSlot]: path }));
+    handlePreview(path);
+  }, [activeSlot, handlePreview]);
+
+  const clearSlot = useCallback((slot: SlotName) => {
+    setSlots((prev) => { const next = { ...prev }; delete next[slot]; return next; });
+  }, []);
+
+  const handleSave = useCallback(() => {
+    const nextSounds = { ...uiSounds, [activeTheme]: slots };
+    onSave(activeTheme, nextSounds);
+    onClose();
+  }, [uiSounds, activeTheme, slots, onSave, onClose]);
+
+  // Group sounds by their group
+  const grouped = sounds.reduce<Record<string, UISound[]>>((acc, s) => {
+    (acc[s.group] ??= []).push(s);
+    return acc;
+  }, {});
+
+  const formatName = (filename: string) =>
+    filename.replace(/\.(mp3|wav|ogg|m4a)$/i, '').replace(/-/g, ' ').replace(/_/g, ' ');
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      style={{ backgroundColor: 'rgba(0,0,0,0.8)' }}
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+    >
+      <div
+        className="flex flex-col"
+        style={{
+          width: 680,
+          maxHeight: '85vh',
+          backgroundColor: 'var(--sf-panel)',
+          border: '1px solid var(--sf-cyan)',
+          boxShadow: '0 0 40px rgba(0,229,255,0.2)',
+        }}
+      >
+        {/* Header */}
+        <div
+          className="flex items-center justify-between px-5 py-3 shrink-0"
+          style={{ borderBottom: '1px solid var(--sf-border)' }}
+        >
+          <span className="sf-heading text-sm font-bold tracking-widest uppercase" style={{ color: 'var(--sf-cyan)' }}>
+            UI SFX CONFIGURATOR
+          </span>
+          <button
+            onClick={onClose}
+            data-no-ui-sound
+            className="text-xs opacity-40 hover:opacity-100 transition-opacity px-2 py-1"
+            style={{ color: 'var(--sf-cyan)' }}
+          >
+            ✕ CLOSE
+          </button>
+        </div>
+
+        {/* Theme selector */}
+        <div className="flex items-center gap-2 px-5 py-2 shrink-0" style={{ borderBottom: '1px solid var(--sf-border)' }}>
+          <span className="text-[10px] tracking-widest uppercase opacity-40">THEME</span>
+          {(['sc2', 'wc3', 'ff7', 'ff9'] as const).map((t) => (
+            <button
+              key={t}
+              data-sf-hover
+              onClick={() => switchTheme(t)}
+              className="px-3 py-0.5 text-[10px] sf-heading font-semibold uppercase tracking-wider transition-all"
+              style={{
+                border: `1px solid ${activeTheme === t ? 'var(--sf-cyan)' : 'var(--sf-border)'}`,
+                color: activeTheme === t ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.35)',
+                backgroundColor: activeTheme === t ? 'rgba(0,229,255,0.08)' : 'transparent',
+              }}
+            >
+              {t.toUpperCase()}
+            </button>
+          ))}
+          <span className="text-[10px] opacity-30 ml-2">
+            Click a slot on the left, then pick a sound on the right to assign.
+          </span>
+        </div>
+
+        {/* Body: 2-col */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* Left: slots */}
+          <div className="flex flex-col gap-0 shrink-0" style={{ width: 240, borderRight: '1px solid var(--sf-border)' }}>
+            <div className="px-4 pt-3 pb-1 text-[10px] uppercase tracking-widest opacity-40">
+              EVENT SLOTS
+            </div>
+            {SLOTS.map(({ name, label, desc }) => {
+              const assigned = slots[name];
+              const isActive = activeSlot === name;
+              return (
+                <div
+                  key={name}
+                  data-sf-hover
+                  onClick={() => setActiveSlot(name)}
+                  className="flex flex-col gap-1 px-4 py-3 cursor-pointer transition-all"
+                  style={{
+                    borderLeft: `3px solid ${isActive ? 'var(--sf-cyan)' : 'transparent'}`,
+                    backgroundColor: isActive ? 'rgba(0,229,255,0.06)' : 'transparent',
+                    borderBottom: '1px solid var(--sf-border)',
+                  }}
+                >
+                  <div className="flex items-center justify-between">
+                    <span
+                      className="text-[11px] sf-heading font-semibold tracking-wider"
+                      style={{ color: isActive ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.7)' }}
+                    >
+                      {label}
+                    </span>
+                    <div className="flex items-center gap-1">
+                      {assigned && (
+                        <>
+                          <button
+                            data-no-ui-sound
+                            onClick={(e) => { e.stopPropagation(); handlePreview(assigned); }}
+                            className="text-[9px] px-1.5 py-0.5 transition-all"
+                            style={{
+                              border: '1px solid rgba(0,229,255,0.4)',
+                              color: playing === assigned ? 'var(--sf-cyan)' : 'rgba(0,229,255,0.6)',
+                            }}
+                          >
+                            ▶
+                          </button>
+                          <button
+                            data-no-ui-sound
+                            onClick={(e) => { e.stopPropagation(); clearSlot(name); }}
+                            className="text-[9px] px-1.5 py-0.5 transition-all opacity-40 hover:opacity-100"
+                            style={{ border: '1px solid rgba(255,255,255,0.2)', color: 'white' }}
+                          >
+                            ✕
+                          </button>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                  <span className="text-[9px] opacity-40">{desc}</span>
+                  {assigned ? (
+                    <span
+                      className="text-[9px] truncate"
+                      style={{ color: 'var(--sf-green)' }}
+                      title={assigned}
+                    >
+                      {formatName(assigned.split('/').pop() ?? assigned)}
+                    </span>
+                  ) : (
+                    <span className="text-[9px] opacity-25 italic">— unassigned (uses default) —</span>
+                  )}
+                </div>
+              );
+            })}
+
+            {/* Default paths note */}
+            <div className="px-4 pt-3 pb-2">
+              <div className="text-[9px] opacity-25 leading-relaxed">
+                Defaults: ui/{activeTheme}/hover.mp3<br />
+                ui/{activeTheme}/click.mp3<br />
+                ui/{activeTheme}/error.mp3
+              </div>
+            </div>
+          </div>
+
+          {/* Right: sound browser */}
+          <div className="flex flex-col flex-1 overflow-hidden">
+            <div className="px-4 pt-3 pb-1 text-[10px] uppercase tracking-widest opacity-40 shrink-0">
+              AVAILABLE SOUNDS — click to preview & assign to{' '}
+              <span style={{ color: 'var(--sf-cyan)' }}>{activeSlot.toUpperCase()}</span>
+            </div>
+            <div className="flex-1 overflow-y-auto px-3 pb-3">
+              {Object.entries(grouped).sort().map(([group, groupSounds]) => (
+                <div key={group} className="mb-4">
+                  <div
+                    className="text-[9px] uppercase tracking-widest mb-2 px-1 py-0.5"
+                    style={{ color: 'var(--sf-cyan)', opacity: 0.5, borderBottom: '1px solid var(--sf-border)' }}
+                  >
+                    {group.replace(/-/g, ' ')}
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    {groupSounds.map((s) => {
+                      const isAssignedHere = Object.values(slots).includes(s.path);
+                      const isPlaying = playing === s.path;
+                      return (
+                        <button
+                          key={s.path}
+                          data-no-ui-sound
+                          onClick={() => assignSound(s.path)}
+                          className="flex items-center gap-2 px-3 py-2 text-left transition-all"
+                          style={{
+                            border: `1px solid ${isAssignedHere ? 'var(--sf-green)' : isPlaying ? 'var(--sf-cyan)' : 'var(--sf-border)'}`,
+                            backgroundColor: isPlaying ? 'rgba(0,229,255,0.08)' : isAssignedHere ? 'rgba(0,255,136,0.06)' : 'transparent',
+                            color: isPlaying ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.75)',
+                          }}
+                        >
+                          <span
+                            className="text-[9px] shrink-0 px-1"
+                            style={{ color: isPlaying ? 'var(--sf-cyan)' : 'rgba(0,229,255,0.5)' }}
+                          >
+                            {isPlaying ? '♪' : '▶'}
+                          </span>
+                          <span className="text-[11px] truncate">{formatName(s.filename)}</span>
+                          {isAssignedHere && (
+                            <span
+                              className="ml-auto text-[9px] shrink-0"
+                              style={{ color: 'var(--sf-green)' }}
+                            >
+                              {Object.entries(slots).find(([, v]) => v === s.path)?.[0].toUpperCase()}
+                            </span>
+                          )}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              ))}
+              {sounds.length === 0 && (
+                <div className="text-xs opacity-30 text-center py-8">LOADING...</div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div
+          className="flex items-center justify-end gap-3 px-5 py-3 shrink-0"
+          style={{ borderTop: '1px solid var(--sf-border)' }}
+        >
+          <button
+            data-no-ui-sound
+            onClick={onClose}
+            className="px-4 py-1.5 text-xs sf-heading uppercase tracking-wider transition-all"
+            style={{
+              border: '1px solid var(--sf-border)',
+              color: 'rgba(255,255,255,0.4)',
+            }}
+          >
+            CANCEL
+          </button>
+          <button
+            data-sf-hover
+            onClick={handleSave}
+            className="px-5 py-1.5 text-xs sf-heading font-semibold uppercase tracking-wider transition-all"
+            style={{
+              border: '1px solid var(--sf-cyan)',
+              color: 'var(--sf-cyan)',
+              backgroundColor: 'rgba(0,229,255,0.1)',
+              boxShadow: '0 0 10px rgba(0,229,255,0.15)',
+            }}
+          >
+            SAVE CONFIG
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/web/lib/types.ts

@@ -0,0 +1,87 @@
+export type HookEvent =
+  | 'SessionStart'
+  | 'SessionEnd'
+  | 'Stop'
+  | 'SubagentStop'
+  | 'PreToolUse'
+  | 'PostToolUse'
+  | 'PostToolUseFailure'
+  | 'Notification'
+  | 'PreCompact';
+
+export type SkillHookEvent = 'PreToolUse' | 'PostToolUse';
+
+export interface AgentConfig {
+  enabled: boolean;
+  hooks: Partial<Record<HookEvent, string>>;
+}
+
+export interface SkillConfig {
+  enabled: boolean;
+  hooks: Partial<Record<SkillHookEvent, string>>;
+}
+
+export type UITheme = 'sc2' | 'wc3' | 'ff7' | 'ff9' | 'off';
+
+export interface SelectMode {
+  scope: string;  // 'global' | agent-name | 'skill/qualifiedName'
+  event: string;  // HookEvent | SkillHookEvent
+  label: string;  // e.g. "SESSION START"
+}
+
+export interface UISlotMap {
+  click?: string;      // relative path under ~/code/claude-sounds/
+  hover?: string;
+  error?: string;
+  pageChange?: string; // tab/group navigation
+  toggle?: string;     // expand/collapse sidebar items
+  confirm?: string;    // sound assigned, settings saved
+}
+
+export interface SoundAssignments {
+  global: Partial<Record<HookEvent, string>>;
+  agents: Record<string, AgentConfig>;
+  skills: Record<string, SkillConfig>;
+  settings: {
+    masterVolume: number;
+    enabled: boolean;
+    theme: 'terran' | 'protoss' | 'zerg';
+    uiTheme: UITheme;
+    uiSounds?: Record<string, UISlotMap>; // theme -> slot -> path
+  };
+}
+
+export interface SoundAsset {
+  id: string;
+  filename: string;
+  category: string;
+  subcategory: string;
+  path: string;
+  waveform: number[]; // 16 RMS values, normalized 1–10
+}
+
+export interface AgentInfo {
+  name: string;
+  filename: string;
+  description?: string;
+  model?: string;
+  tools?: string;
+  color?: string;
+  prompt?: string;
+}
+
+export interface SkillInfo {
+  name: string;          // directory name, e.g. "hook-development"
+  qualifiedName: string; // "plugin-dev:hook-development" or "ask-gemini" (user skill)
+  description: string;
+  namespace?: string;    // "plugin-dev" for plugin skills, undefined for user skills
+}
+
+export interface AgentFormData {
+  name: string;
+  description: string;
+  model: string;
+  tools: string;
+  color: string;
+  prompt: string;
+}