feat: implement horizontal device rack with collapsible effect cards

- Created EffectDevice component with expand/collapse state
- Each device shows name, type, enabled/disabled toggle, and remove button
- When expanded, devices show parameter details
- Replaced vertical effect list with horizontal scrolling rack
- Effects display in 192px wide cards with visual feedback
- Power button toggles effect enabled/disabled state
- Parameters display shown when expanded (controls coming soon)

This matches the Ableton Live/Bitwig workflow where effects are
arranged horizontally with collapsible UI for each device.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/effects/EffectDevice.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronDown, ChevronUp, Power, X } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/lib/utils/cn';
+import type { ChainEffect } from '@/lib/audio/effects/chain';
+
+export interface EffectDeviceProps {
+  effect: ChainEffect;
+  onToggleEnabled?: () => void;
+  onRemove?: () => void;
+  onUpdateParameters?: (parameters: any) => void;
+}
+
+export function EffectDevice({
+  effect,
+  onToggleEnabled,
+  onRemove,
+  onUpdateParameters,
+}: EffectDeviceProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  return (
+    <div
+      className={cn(
+        'flex-shrink-0 w-48 border border-border rounded-md overflow-hidden',
+        effect.enabled ? 'bg-accent/30' : 'bg-muted/30'
+      )}
+    >
+      {/* Device Header */}
+      <div className="flex items-center justify-between px-2 py-1.5 border-b border-border bg-card/50">
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex items-center gap-1 flex-1 min-w-0 text-left hover:text-primary transition-colors"
+        >
+          <span className="text-xs font-medium truncate">{effect.name}</span>
+          {isExpanded ? (
+            <ChevronUp className="h-3 w-3 flex-shrink-0" />
+          ) : (
+            <ChevronDown className="h-3 w-3 flex-shrink-0" />
+          )}
+        </button>
+        <div className="flex items-center gap-0.5 ml-1">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={onToggleEnabled}
+            title={effect.enabled ? 'Disable effect' : 'Enable effect'}
+            className="h-5 w-5"
+          >
+            <Power
+              className={cn(
+                'h-3 w-3',
+                effect.enabled ? 'text-primary' : 'text-muted-foreground'
+              )}
+            />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={onRemove}
+            title="Remove effect"
+            className="h-5 w-5"
+          >
+            <X className="h-3 w-3 text-destructive" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Device Parameters */}
+      {isExpanded && (
+        <div className="p-2 space-y-2 bg-card/30">
+          <div className="text-xs text-muted-foreground">
+            <div className="mb-1">
+              <span className="font-medium">Type:</span> {effect.type}
+            </div>
+            {effect.parameters && Object.keys(effect.parameters).length > 0 && (
+              <div>
+                <span className="font-medium">Parameters:</span>
+                <div className="mt-1 space-y-1 pl-2">
+                  {Object.entries(effect.parameters).map(([key, value]) => (
+                    <div key={key} className="flex justify-between">
+                      <span className="text-muted-foreground/70">{key}:</span>
+                      <span>{String(value)}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="text-xs text-muted-foreground/70 italic">
+            Parameter controls coming soon
+          </div>
+        </div>
+      )}
+
+      {/* Collapsed State Indicator */}
+      {!isExpanded && (
+        <div className="px-2 py-1 text-center">
+          <span className="text-[10px] text-muted-foreground uppercase tracking-wider">
+            {effect.type}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

components/tracks/Track.tsx

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/Button';
 import { Slider } from '@/components/ui/Slider';
 import { cn } from '@/lib/utils/cn';
 import { EffectBrowser } from '@/components/effects/EffectBrowser';
+import { EffectDevice } from '@/components/effects/EffectDevice';
 import { createEffect, type EffectType } from '@/lib/audio/effects/chain';
 
 export interface TrackProps {
@@ -55,7 +56,6 @@ export function Track({
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const [isEditingName, setIsEditingName] = React.useState(false);
   const [nameInput, setNameInput] = React.useState(String(track.name || 'Untitled Track'));
-  const [showDevices, setShowDevices] = React.useState(true);
   const [effectBrowserOpen, setEffectBrowserOpen] = React.useState(false);
   const inputRef = React.useRef<HTMLInputElement>(null);
 
@@ -390,19 +390,11 @@ export function Track({
             </div>
 
             {/* Devices/Effects Section */}
-            <div className="pt-2">
+            <div className="pt-2 border-t border-border">
               <div className="flex items-center justify-between mb-2">
-                <button
+                <span className="text-xs font-medium text-muted-foreground uppercase">
-                  onClick={() => setShowDevices(!showDevices)}
+                  Devices ({track.effectChain.effects.length})
-                  className="flex items-center gap-1 text-xs font-medium text-foreground hover:text-primary transition-colors"
+                </span>
-                >
-                  <span>Devices ({track.effectChain.effects.length})</span>
-                  {showDevices ? (
-                    <ChevronDown className="h-3.5 w-3.5" />
-                  ) : (
-                    <ChevronRight className="h-3.5 w-3.5" />
-                  )}
-                </button>
                 <Button
                   variant="ghost"
                   size="icon-sm"
@@ -414,45 +406,25 @@ export function Track({
                 </Button>
               </div>
 
-              {showDevices && (
+              {/* Horizontal scrolling device rack */}
-                <div className="space-y-1">
+              <div className="overflow-x-auto custom-scrollbar">
+                <div className="flex gap-2 pb-2">
                   {track.effectChain.effects.length === 0 ? (
-                    <div className="text-xs text-muted-foreground text-center py-2">
+                    <div className="text-xs text-muted-foreground text-center py-4 w-full">
-                      No devices
+                      No devices. Click + to add an effect.
                     </div>
                   ) : (
                     track.effectChain.effects.map((effect) => (
-                      <div
+                      <EffectDevice
                         key={effect.id}
-                        className={cn(
+                        effect={effect}
-                          'flex items-center justify-between px-2 py-1.5 rounded text-xs',
+                        onToggleEnabled={() => onToggleEffect?.(effect.id)}
-                          effect.enabled
+                        onRemove={() => onRemoveEffect?.(effect.id)}
-                            ? 'bg-accent/50 text-foreground'
+                      />
-                            : 'bg-muted/50 text-muted-foreground'
-                        )}
-                      >
-                        <span className="truncate">{effect.name}</span>
-                        <div className="flex items-center gap-1">
-                          <button
-                            onClick={() => onToggleEffect?.(effect.id)}
-                            className="hover:text-primary"
-                            title={effect.enabled ? 'Disable' : 'Enable'}
-                          >
-                            {effect.enabled ? '●' : '○'}
-                          </button>
-                          <button
-                            onClick={() => onRemoveEffect?.(effect.id)}
-                            className="hover:text-destructive"
-                            title="Remove"
-                          >
-                            ×
-                          </button>
-                        </div>
-                      </div>
                     ))
                   )}
                 </div>
-              )}
+              </div>
             </div>
           </>
         )}