agentcraft 0.0.1

package/web/components/assignment-log-panel.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { getEventLabel } from '@/lib/utils';
+import type { SoundAssignments, HookEvent } from '@/lib/types';
+
+interface AssignmentEntry {
+  scope: string;
+  event: HookEvent;
+  sound: string;
+}
+
+interface AssignmentLogPanelProps {
+  assignments: SoundAssignments;
+  isDirty: boolean;
+  onClear: (scope: string, event: HookEvent) => void;
+  onSave: () => void;
+}
+
+export function AssignmentLogPanel({ assignments, isDirty, onClear, onSave }: AssignmentLogPanelProps) {
+  const entries: AssignmentEntry[] = [];
+
+  // Global entries
+  for (const [event, sound] of Object.entries(assignments.global)) {
+    if (sound) entries.push({ scope: 'GLOBAL', event: event as HookEvent, sound });
+  }
+
+  // Agent entries
+  for (const [agentName, config] of Object.entries(assignments.agents)) {
+    for (const [event, sound] of Object.entries(config.hooks)) {
+      if (sound) entries.push({ scope: agentName, event: event as HookEvent, sound });
+    }
+  }
+
+  return (
+    <div className="flex flex-col overflow-hidden">
+      <div className="shrink-0 px-4 py-2 border-b" style={{ borderColor: 'var(--sf-border)', backgroundColor: 'var(--sf-panel)' }}>
+        <div className="sf-heading text-xs font-semibold tracking-widest uppercase" style={{ color: 'var(--sf-cyan)' }}>
+          ASSIGNMENT LOG
+        </div>
+        {isDirty && (
+          <div className="text-[10px] mt-1" style={{ color: 'var(--sf-gold)' }}>
+            &#x25CF; UNSAVED CHANGES
+          </div>
+        )}
+      </div>
+
+      {/* Assignment table */}
+      <div className="flex-1 overflow-y-auto">
+        {entries.length === 0 ? (
+          <div className="text-xs opacity-30 text-center py-8">NO ASSIGNMENTS</div>
+        ) : (
+          <table className="w-full text-[10px]">
+            <thead className="sticky top-0" style={{ backgroundColor: 'var(--sf-panel)' }}>
+              <tr>
+                <th className="text-left px-3 py-1 opacity-40 uppercase tracking-wider font-normal">Scope</th>
+                <th className="text-left px-2 py-1 opacity-40 uppercase tracking-wider font-normal">Event</th>
+                <th className="text-left px-2 py-1 opacity-40 uppercase tracking-wider font-normal">Sound</th>
+                <th className="px-2 py-1 w-6" />
+              </tr>
+            </thead>
+            <tbody>
+              {entries.map((entry, i) => (
+                <tr
+                  key={i}
+                  className="border-b transition-all hover:bg-white/5"
+                  style={{ borderColor: 'rgba(0,229,255,0.06)' }}
+                >
+                  <td className="px-3 py-1.5 truncate max-w-[80px]" style={{ color: entry.scope === 'GLOBAL' ? 'var(--sf-gold)' : undefined }}>
+                    {entry.scope}
+                  </td>
+                  <td className="px-2 py-1.5 truncate max-w-[90px] opacity-70">
+                    {getEventLabel(entry.event)}
+                  </td>
+                  <td className="px-2 py-1.5 truncate max-w-[100px] opacity-60">
+                    {entry.sound.split('/').pop()}
+                  </td>
+                  <td className="px-2 py-1.5 text-center">
+                    <button
+                      onClick={() => onClear(entry.scope === 'GLOBAL' ? 'global' : entry.scope, entry.event)}
+                      className="opacity-40 hover:opacity-80 transition-opacity text-[10px]"
+                      style={{ color: 'var(--sf-alert)' }}
+                    >
+                      &#x2715;
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {/* Save button */}
+      <div className="shrink-0 p-3 border-t" style={{ borderColor: 'var(--sf-border)' }}>
+        <button
+          onClick={onSave}
+          className={`w-full py-2 text-xs sf-heading font-bold uppercase tracking-widest transition-all ${isDirty ? 'sf-pulse-gold' : ''}`}
+          style={{
+            border: `1px solid ${isDirty ? 'var(--sf-gold)' : 'var(--sf-border)'}`,
+            color: isDirty ? 'var(--sf-gold)' : 'rgba(255,255,255,0.3)',
+            backgroundColor: isDirty ? 'rgba(255,192,0,0.06)' : 'transparent',
+          }}
+        >
+          {isDirty ? '\u2B21 ESTABLISH UPLINK' : 'SYNCED'}
+        </button>
+      </div>
+    </div>
+  );
+}

package/web/components/hook-slot.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { useState } from 'react';
+import { useDroppable } from '@dnd-kit/core';
+import { getEventLabel } from '@/lib/utils';
+import { playUISound } from '@/lib/ui-audio';
+import type { HookEvent, SelectMode } from '@/lib/types';
+
+interface HookSlotProps {
+  event: HookEvent | string;
+  scope: string;
+  assignedSound?: string;
+  onClear: () => void;
+  onPreview: (path: string) => void;
+  selectMode: SelectMode | null;
+  onSelect: () => void; // called when empty slot is clicked to enter select mode
+}
+
+export function HookSlot({ event, scope, assignedSound, onClear, onPreview, selectMode, onSelect }: HookSlotProps) {
+  const dropId = `${scope}:${event}`;
+  const { isOver, setNodeRef } = useDroppable({ id: dropId });
+  const [isHovered, setIsHovered] = useState(false);
+
+  const label = getEventLabel(event as HookEvent);
+  const filename = assignedSound ? assignedSound.split('/').pop() ?? assignedSound : null;
+  const isSelected = selectMode?.scope === scope && selectMode?.event === event;
+  const isSelectModeActive = !!selectMode;
+
+  const handleContainerClick = () => {
+    if (assignedSound) {
+      onPreview(assignedSound);
+    } else {
+      onSelect();
+    }
+  };
+
+  const handlePlayClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (assignedSound) onPreview(assignedSound);
+  };
+
+  const handleClearClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClear();
+  };
+
+  // Border logic
+  let borderColor: string;
+  let borderStyle: 'solid' | 'dashed';
+  let bgColor: string;
+
+  if (isOver) {
+    borderColor = 'var(--sf-cyan)';
+    borderStyle = 'solid';
+    bgColor = 'rgba(0,229,255,0.12)';
+  } else if (isSelected) {
+    borderColor = 'var(--sf-cyan)';
+    borderStyle = 'dashed';
+    bgColor = 'rgba(0,229,255,0.08)';
+  } else if (assignedSound) {
+    borderColor = isHovered ? 'rgba(0,229,255,0.7)' : 'rgba(0,229,255,0.4)';
+    borderStyle = 'solid';
+    bgColor = isHovered ? 'rgba(0,229,255,0.08)' : 'rgba(0,229,255,0.04)';
+  } else if (isSelectModeActive) {
+    // Another slot is being selected — mute everything
+    borderColor = 'rgba(0,229,255,0.06)';
+    borderStyle = 'dashed';
+    bgColor = 'transparent';
+  } else {
+    borderColor = isHovered ? 'rgba(0,229,255,0.25)' : 'rgba(0,229,255,0.12)';
+    borderStyle = 'dashed';
+    bgColor = isHovered ? 'rgba(0,229,255,0.03)' : 'transparent';
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      data-sf-hover
+      {...(assignedSound ? { 'data-no-ui-sound': '' } : {})}
+      className="flex items-center justify-between px-2 py-1 text-xs transition-all cursor-pointer select-none"
+      style={{
+        borderWidth: '1px',
+        borderStyle,
+        borderColor,
+        backgroundColor: bgColor,
+        boxShadow: isOver ? 'inset 0 0 8px rgba(0,229,255,0.08)' : isSelected ? '0 0 6px rgba(0,229,255,0.15)' : undefined,
+        minHeight: '28px',
+        opacity: isSelectModeActive && !isSelected ? 0.45 : 1,
+      }}
+      onMouseEnter={() => { setIsHovered(true); playUISound('hover', 0.15); }}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={handleContainerClick}
+    >
+      <span
+        className="text-[10px] uppercase tracking-wider shrink-0 mr-2 transition-opacity"
+        style={{ color: 'var(--sf-cyan)', opacity: isOver ? 0.9 : 0.5 }}
+      >
+        {label}
+      </span>
+
+      {isOver ? (
+        <span className="text-[10px] tracking-wider" style={{ color: 'var(--sf-cyan)' }}>
+          RELEASE TO ASSIGN ▼
+        </span>
+      ) : isSelected ? (
+        <span className="text-[10px] tracking-wider animate-pulse" style={{ color: 'var(--sf-cyan)' }}>
+          CLICK A SOUND →
+        </span>
+      ) : assignedSound ? (
+        <div className="flex items-center gap-2 overflow-hidden">
+          <span
+            className="truncate text-[11px] transition-opacity"
+            style={{ opacity: isHovered ? 1 : 0.7, color: isHovered ? 'rgba(255,255,255,0.95)' : 'inherit' }}
+            title={assignedSound}
+          >
+            {filename}
+          </span>
+          <div className="flex items-center gap-1 shrink-0" style={{ opacity: isHovered ? 1 : 0 }}>
+            <button
+              data-no-ui-sound
+              onClick={handlePlayClick}
+              className="text-[10px] px-1 transition-opacity"
+              style={{ color: 'var(--sf-cyan)' }}
+              title="Preview"
+            >
+              &#x25B6;
+            </button>
+            <button
+              data-no-ui-sound
+              onClick={handleClearClick}
+              className="text-[10px] px-1 transition-opacity"
+              style={{ color: 'var(--sf-alert)' }}
+              title="Clear"
+            >
+              &#x2715;
+            </button>
+          </div>
+        </div>
+      ) : (
+        <span
+          className="text-[10px] italic transition-opacity"
+          style={{ opacity: isHovered ? 0.5 : 0.2 }}
+        >
+          {isHovered ? 'click to assign' : 'empty'}
+        </span>
+      )}
+    </div>
+  );
+}

package/web/components/hud-header.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useState } from 'react';
+import type { UITheme } from '@/lib/types';
+
+interface HudHeaderProps {
+  enabled: boolean;
+  onToggle: () => void;
+  uiTheme: UITheme;
+  onUiThemeChange: (theme: UITheme) => void;
+  onConfigureUISounds: () => void;
+}
+
+const UI_THEMES: { value: UITheme; label: string }[] = [
+  { value: 'sc2', label: 'SC2' },
+  { value: 'wc3', label: 'WC3' },
+  { value: 'ff7', label: 'FF7' },
+  { value: 'ff9', label: 'FF9' },
+  { value: 'off', label: 'OFF' },
+];
+
+export function HudHeader({ enabled, onToggle, uiTheme, onUiThemeChange, onConfigureUISounds }: HudHeaderProps) {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const activeLabel = UI_THEMES.find((t) => t.value === uiTheme)?.label ?? uiTheme.toUpperCase();
+
+  return (
+    <header className="shrink-0 flex items-center justify-between px-6 py-3 border-b" style={{ borderColor: 'var(--sf-border)', backgroundColor: 'var(--sf-panel)' }}>
+      <div className="flex items-center gap-4">
+        <h1 className="sf-logo text-lg font-bold tracking-widest uppercase" style={{ color: 'var(--sf-cyan)' }}>
+          AGENTCRAFT
+        </h1>
+        <span className="text-xs opacity-40" style={{ color: 'var(--sf-cyan)' }}>v0.0.3</span>
+        <div className="h-4 w-px opacity-20" style={{ backgroundColor: 'var(--sf-cyan)' }} />
+        <span className="text-xs opacity-60">AUDIO ASSIGNMENT TERMINAL</span>
+      </div>
+
+      <div className="flex items-center gap-4">
+        {/* UI sound theme dropdown */}
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] tracking-widest uppercase opacity-40">UI SFX</span>
+
+          <div className="relative">
+            {/* Click-away overlay */}
+            {showDropdown && (
+              <div className="fixed inset-0 z-10" onClick={() => setShowDropdown(false)} />
+            )}
+
+            {/* Trigger */}
+            <button
+              data-sf-hover
+              data-no-ui-sound
+              onClick={() => setShowDropdown(!showDropdown)}
+              className="flex items-center gap-1.5 px-3 py-0.5 text-[10px] sf-heading font-medium uppercase tracking-wider transition-all"
+              style={{
+                position: 'relative',
+                zIndex: 11,
+                border: `1px solid ${showDropdown ? 'var(--sf-cyan)' : 'var(--sf-border)'}`,
+                color: uiTheme === 'off' ? 'rgba(255,255,255,0.3)' : 'var(--sf-cyan)',
+                backgroundColor: showDropdown ? 'rgba(0,229,255,0.08)' : 'transparent',
+                minWidth: '3.5rem',
+              }}
+            >
+              <span>{activeLabel}</span>
+              <span style={{ opacity: 0.5 }}>{showDropdown ? '▴' : '▾'}</span>
+            </button>
+
+            {/* Dropdown */}
+            {showDropdown && (
+              <div
+                className="absolute right-0 top-full mt-1"
+                style={{
+                  zIndex: 20,
+                  border: '1px solid var(--sf-border)',
+                  backgroundColor: 'var(--sf-panel)',
+                  boxShadow: '0 4px 24px rgba(0,0,0,0.6)',
+                  minWidth: '5rem',
+                }}
+              >
+                {UI_THEMES.map((t, i) => (
+                  <button
+                    key={t.value}
+                    data-sf-hover
+                    onClick={() => {
+                      onUiThemeChange(t.value);
+                      setShowDropdown(false);
+                    }}
+                    className="w-full flex items-center gap-1.5 px-3 py-1.5 text-left text-[10px] sf-heading font-medium uppercase tracking-wider transition-all"
+                    style={{
+                      color: uiTheme === t.value ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.5)',
+                      backgroundColor: uiTheme === t.value ? 'rgba(0,229,255,0.08)' : 'transparent',
+                      borderBottom: i < UI_THEMES.length - 1 ? '1px solid var(--sf-border)' : 'none',
+                    }}
+                  >
+                    <span style={{ opacity: uiTheme === t.value ? 1 : 0 }}>▸</span>
+                    {t.label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Configure gear */}
+          <button
+            data-sf-hover
+            onClick={onConfigureUISounds}
+            title="Configure UI sound assignments"
+            className="px-2 py-0.5 text-[10px] sf-heading font-medium transition-all"
+            style={{
+              border: '1px solid var(--sf-border)',
+              color: 'rgba(255,255,255,0.35)',
+            }}
+          >
+            ⚙
+          </button>
+        </div>
+
+        <div className="h-4 w-px opacity-20" style={{ backgroundColor: 'var(--sf-cyan)' }} />
+
+        {/* Master enable/disable */}
+        <button
+          onClick={onToggle}
+          className="flex items-center gap-2 px-4 py-1 text-xs sf-heading font-semibold uppercase tracking-wider transition-all"
+          style={{
+            border: `1px solid ${enabled ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.2)'}`,
+            color: enabled ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.4)',
+            backgroundColor: enabled ? 'rgba(0,229,255,0.08)' : 'transparent',
+          }}
+        >
+          <span className="inline-block w-2 h-2 rounded-full" style={{ backgroundColor: enabled ? 'var(--sf-green)' : 'rgba(255,255,255,0.2)' }} />
+          {enabled ? 'ONLINE' : 'OFFLINE'}
+        </button>
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { SoundUnit } from './sound-unit';
+import { groupSoundsByCategory, getGroupLabel, getSubTabLabel } from '@/lib/utils';
+import { playUISound } from '@/lib/ui-audio';
+import type { SoundAsset, SoundAssignments, SelectMode } from '@/lib/types';
+
+interface SoundBrowserPanelProps {
+  sounds: SoundAsset[];
+  assignments: SoundAssignments;
+  onPreview: (path: string) => void;
+  selectMode: SelectMode | null;
+  onSelectModeAssign: (path: string) => void;
+  onClearSelectMode: () => void;
+}
+
+export function SoundBrowserPanel({ sounds, assignments, onPreview, selectMode, onSelectModeAssign, onClearSelectMode }: SoundBrowserPanelProps) {
+  const [activeGroup, setActiveGroup] = useState<string>('sc2');
+  const [activeCategory, setActiveCategory] = useState<string>('sc2/terran');
+  const [search, setSearch] = useState('');
+
+  const handleGroupChange = useCallback((group: string) => {
+    setActiveGroup(group);
+    playUISound('pageChange', 0.4);
+  }, []);
+
+  const handleCategoryChange = useCallback((cat: string) => {
+    setActiveCategory(cat);
+    playUISound('pageChange', 0.35);
+  }, []);
+
+  const allGroups = useMemo(() => {
+    return [...new Set(sounds.map((s) => s.category.split('/')[0]))].sort();
+  }, [sounds]);
+
+  const groupCategories = useMemo(() => {
+    return [...new Set(
+      sounds.filter((s) => s.category.split('/')[0] === activeGroup).map((s) => s.category)
+    )].sort();
+  }, [sounds, activeGroup]);
+
+  // If activeCategory doesn't belong to current group, use first category of the group
+  const effectiveCategory = groupCategories.includes(activeCategory)
+    ? activeCategory
+    : (groupCategories[0] ?? '');
+
+  const assignedPaths = useMemo(() => {
+    const paths = new Set<string>();
+    Object.values(assignments.global).forEach((p) => p && paths.add(p));
+    Object.values(assignments.agents).forEach((a) => {
+      Object.values(a.hooks).forEach((p) => p && paths.add(p));
+    });
+    return paths;
+  }, [assignments]);
+
+  const isSearching = search.trim().length > 0;
+
+  const filteredSounds = useMemo(() => {
+    if (isSearching) {
+      // Global search across all sounds
+      const q = search.toLowerCase();
+      return sounds.filter((s) =>
+        s.filename.toLowerCase().includes(q) ||
+        s.category.toLowerCase().includes(q) ||
+        s.subcategory.toLowerCase().includes(q)
+      );
+    }
+    // Normal tab-filtered view
+    return sounds.filter((s) => s.category === effectiveCategory);
+  }, [sounds, effectiveCategory, search, isSearching]);
+
+  const grouped = useMemo(() => groupSoundsByCategory(filteredSounds), [filteredSounds]);
+
+  const showSubTabs = !isSearching && groupCategories.length > 1;
+
+  return (
+    <div className="flex flex-col overflow-hidden" style={{ borderLeft: '1px solid var(--sf-border)', borderRight: '1px solid var(--sf-border)' }}>
+      {/* Header */}
+      <div className="shrink-0 px-4 py-2 border-b" style={{ borderColor: 'var(--sf-border)', backgroundColor: 'var(--sf-panel)' }}>
+        <div className="sf-heading text-xs font-semibold tracking-widest uppercase mb-2" style={{ color: 'var(--sf-cyan)' }}>
+          SOUND LIBRARY
+        </div>
+
+        {/* Search */}
+        <input
+          type="text"
+          placeholder="SEARCH ALL SOUNDS..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          onKeyDown={(e) => e.key === 'Escape' && setSearch('')}
+          className="w-full px-3 py-1 text-xs bg-transparent outline-none"
+          style={{
+            border: `1px solid ${isSearching ? 'var(--sf-cyan)' : 'var(--sf-border)'}`,
+            color: 'var(--sf-cyan)',
+            boxShadow: isSearching ? '0 0 6px rgba(0,229,255,0.15)' : undefined,
+          }}
+        />
+
+        {/* Group tabs */}
+        <div className="flex gap-1 mt-2 overflow-x-auto" style={{ opacity: isSearching ? 0.3 : 1, pointerEvents: isSearching ? 'none' : 'auto' }}>
+          {allGroups.map((group) => (
+            <button
+              key={group}
+              data-sf-hover
+              onClick={() => handleGroupChange(group)}
+              className="shrink-0 px-3 py-1 text-[10px] sf-heading font-semibold uppercase tracking-wider transition-all"
+              style={{
+                border: `1px solid ${activeGroup === group ? 'var(--sf-cyan)' : 'var(--sf-border)'}`,
+                color: activeGroup === group ? 'var(--sf-cyan)' : 'rgba(255,255,255,0.4)',
+                backgroundColor: activeGroup === group ? 'rgba(0,229,255,0.08)' : 'transparent',
+              }}
+            >
+              {getGroupLabel(group)}
+            </button>
+          ))}
+        </div>
+
+        {/* Sub-tabs (race / platform) */}
+        {showSubTabs && (
+          <div className="flex gap-1 mt-1 overflow-x-auto">
+            {groupCategories.map((cat) => (
+              <button
+                key={cat}
+                data-sf-hover
+                onClick={() => handleCategoryChange(cat)}
+                className="shrink-0 px-2 py-0.5 text-[9px] sf-heading font-medium uppercase tracking-wider transition-all"
+                style={{
+                  border: `1px solid ${effectiveCategory === cat ? 'rgba(0,229,255,0.6)' : 'rgba(0,229,255,0.15)'}`,
+                  color: effectiveCategory === cat ? 'rgba(0,229,255,0.8)' : 'rgba(255,255,255,0.3)',
+                  backgroundColor: effectiveCategory === cat ? 'rgba(0,229,255,0.05)' : 'transparent',
+                }}
+              >
+                {getSubTabLabel(cat)}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Select mode banner */}
+      {selectMode && (
+        <div
+          className="shrink-0 flex items-center justify-between px-4 py-2"
+          style={{
+            backgroundColor: 'rgba(0,229,255,0.08)',
+            borderBottom: '1px solid var(--sf-cyan)',
+            boxShadow: '0 0 12px rgba(0,229,255,0.1)',
+          }}
+        >
+          <div>
+            <span className="text-[10px] sf-heading font-semibold tracking-widest" style={{ color: 'var(--sf-cyan)' }}>
+              ASSIGNING → {selectMode.label}
+            </span>
+            <span className="text-[10px] opacity-40 ml-3">click a sound card to assign</span>
+          </div>
+          <button
+            data-no-ui-sound
+            onClick={onClearSelectMode}
+            className="text-[10px] px-2 py-0.5 transition-opacity"
+            style={{ border: '1px solid rgba(0,229,255,0.3)', color: 'rgba(0,229,255,0.6)' }}
+          >
+            ESC
+          </button>
+        </div>
+      )}
+
+      {/* Sound grid */}
+      <div className="flex-1 overflow-y-auto p-3">
+        {isSearching && filteredSounds.length > 0 && (
+          <div className="text-[9px] uppercase tracking-widest mb-3 opacity-40 px-1">
+            {filteredSounds.length} result{filteredSounds.length !== 1 ? 's' : ''}
+          </div>
+        )}
+        {Object.entries(grouped).map(([cat, subcats]) => (
+          <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, ' › ')}
+              </div>
+            )}
+            {Object.entries(subcats).map(([subcat, catSounds]) => (
+              <div key={`${cat}/${subcat}`} className="mb-4">
+                {subcat && <div className="text-[10px] uppercase tracking-widest mb-2 opacity-40 px-1">{subcat.replace(/-/g, ' ')}</div>}
+                <div className="grid grid-cols-2 gap-2">
+                  {catSounds.map((sound) => (
+                    <SoundUnit
+                      key={sound.id}
+                      sound={sound}
+                      isAssigned={assignedPaths.has(sound.path)}
+                      onPreview={onPreview}
+                      onSelectAssign={selectMode ? () => onSelectModeAssign(sound.path) : undefined}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
+        {filteredSounds.length === 0 && (
+          <div className="text-xs opacity-30 text-center py-8">NO SOUNDS FOUND</div>
+        )}
+      </div>
+    </div>
+  );
+}