feat: Ableton Live-style effects and complete automation system

Enhanced visual design:
- Improved device rack container with darker background and inner shadow
- Device cards now have rounded corners, shadows, and colored indicators
- Better visual separation between enabled/disabled effects
- Active devices highlighted with accent border

Complete automation infrastructure (Phase 9):
- Created comprehensive type system for automation lanes and points
- Implemented AutomationPoint component with drag-and-drop editing
- Implemented AutomationHeader with mode controls (Read/Write/Touch/Latch)
- Implemented AutomationLane with canvas-based curve rendering
- Integrated automation lanes into Track component below effects
- Created automation playback engine with real-time interpolation
- Added automation data persistence to localStorage

Automation features:
- Add/remove automation points by clicking/double-clicking
- Drag points to change time and value
- Multiple automation modes (Read, Write, Touch, Latch)
- Linear and step curve types (bezier planned)
- Adjustable lane height (60-180px)
- Show/hide automation per lane
- Real-time value display at playhead
- Color-coded lanes by parameter type
- Keyboard delete support (Delete/Backspace)

Track type updates:
- Added automation field to Track interface
- Updated track creation to initialize empty automation
- Updated localStorage save/load to include automation data

Files created:
- components/automation/AutomationPoint.tsx
- components/automation/AutomationHeader.tsx
- components/automation/AutomationLane.tsx
- lib/audio/automation/utils.ts (helper functions)
- lib/audio/automation/playback.ts (playback engine)
- types/automation.ts (complete type system)

Files modified:
- components/effects/EffectDevice.tsx (Ableton-style visual improvements)
- components/tracks/Track.tsx (automation lanes integration)
- types/track.ts (automation field added)
- lib/audio/track-utils.ts (automation initialization)
- lib/hooks/useMultiTrack.ts (automation persistence)

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

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

components/automation/AutomationHeader.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import * as React from 'react';
+import { Eye, EyeOff, ChevronDown, ChevronUp } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/lib/utils/cn';
+import type { AutomationMode } from '@/types/automation';
+
+export interface AutomationHeaderProps {
+  parameterName: string;
+  currentValue?: number;
+  visible: boolean;
+  mode: AutomationMode;
+  color?: string;
+  onToggleVisible?: () => void;
+  onModeChange?: (mode: AutomationMode) => void;
+  onHeightChange?: (delta: number) => void;
+  className?: string;
+  formatter?: (value: number) => string;
+}
+
+const MODE_LABELS: Record<AutomationMode, string> = {
+  read: 'R',
+  write: 'W',
+  touch: 'T',
+  latch: 'L',
+};
+
+const MODE_COLORS: Record<AutomationMode, string> = {
+  read: 'text-muted-foreground',
+  write: 'text-red-500',
+  touch: 'text-yellow-500',
+  latch: 'text-orange-500',
+};
+
+export function AutomationHeader({
+  parameterName,
+  currentValue,
+  visible,
+  mode,
+  color,
+  onToggleVisible,
+  onModeChange,
+  onHeightChange,
+  className,
+  formatter,
+}: AutomationHeaderProps) {
+  const modes: AutomationMode[] = ['read', 'write', 'touch', 'latch'];
+  const currentModeIndex = modes.indexOf(mode);
+
+  const handleCycleModeClick = () => {
+    if (!onModeChange) return;
+    const nextIndex = (currentModeIndex + 1) % modes.length;
+    onModeChange(modes[nextIndex]);
+  };
+
+  const formatValue = (value: number) => {
+    if (formatter) return formatter(value);
+    return value.toFixed(2);
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 px-2 py-1 bg-muted/50 border-b border-border/30 flex-shrink-0',
+        className
+      )}
+    >
+      {/* Color indicator */}
+      {color && (
+        <div
+          className="w-1 h-4 rounded-full flex-shrink-0"
+          style={{ backgroundColor: color }}
+        />
+      )}
+
+      {/* Parameter name */}
+      <span className="text-xs font-medium text-foreground flex-1 min-w-0 truncate">
+        {parameterName}
+      </span>
+
+      {/* Current value display */}
+      {currentValue !== undefined && (
+        <span className="text-[10px] font-mono text-muted-foreground px-1.5 py-0.5 bg-background/50 rounded">
+          {formatValue(currentValue)}
+        </span>
+      )}
+
+      {/* Automation mode button */}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onClick={handleCycleModeClick}
+        title={`Automation mode: ${mode} (click to cycle)`}
+        className={cn('h-5 w-5 text-[10px] font-bold flex-shrink-0', MODE_COLORS[mode])}
+      >
+        {MODE_LABELS[mode]}
+      </Button>
+
+      {/* Height controls */}
+      {onHeightChange && (
+        <div className="flex flex-col gap-0 flex-shrink-0">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={() => onHeightChange(20)}
+            title="Increase lane height"
+            className="h-3 w-4 p-0"
+          >
+            <ChevronUp className="h-2.5 w-2.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={() => onHeightChange(-20)}
+            title="Decrease lane height"
+            className="h-3 w-4 p-0"
+          >
+            <ChevronDown className="h-2.5 w-2.5" />
+          </Button>
+        </div>
+      )}
+
+      {/* Show/hide toggle */}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onClick={onToggleVisible}
+        title={visible ? 'Hide automation' : 'Show automation'}
+        className="h-5 w-5 flex-shrink-0"
+      >
+        {visible ? (
+          <Eye className="h-3 w-3" />
+        ) : (
+          <EyeOff className="h-3 w-3 text-muted-foreground" />
+        )}
+      </Button>
+    </div>
+  );
+}