feat: refine UI with effects panel improvements and visual polish

Major improvements:
- Fixed multi-file import (FileList to Array conversion)
- Auto-select first track when adding to empty project
- Global effects panel folding state (independent of track selection)
- Effects panel collapsed/disabled when no track selected
- Effect device expansion state persisted per-device
- Effect browser with searchable descriptions

Visual refinements:
- Removed center dot from pan knob for cleaner look
- Simplified fader: removed volume fill overlay, dynamic level meter visible through semi-transparent handle
- Level meter capped at fader position (realistic mixer behavior)
- Solid background instead of gradient for fader track
- Subtle volume overlay up to fader handle
- Fixed track control width flickering (consistent 4px border)
- Effect devices: removed shadows/rounded corners for flatter DAW-style look, added consistent border-radius
- Added border between track control and waveform area

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

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

app/globals.css

@@ -354,4 +354,31 @@
   .custom-scrollbar::-webkit-scrollbar-thumb:active {
     background: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
   }
+
+  /* Clip/Region styling for Ableton-style appearance */
+  .track-clip-container {
+    @apply absolute inset-2 rounded-sm shadow-sm overflow-hidden transition-all duration-150;
+    background: oklch(0.2 0.01 var(--hue) / 0.3);
+    border: 1px solid oklch(0.4 0.02 var(--hue) / 0.5);
+  }
+
+  .track-clip-container:hover {
+    border-color: oklch(0.5 0.03 var(--hue) / 0.7);
+  }
+
+  .track-clip-header {
+    @apply absolute top-0 left-0 right-0 h-4 pointer-events-none z-10 px-2 flex items-center;
+    background: linear-gradient(to bottom, rgb(0 0 0 / 0.1), transparent);
+  }
+}
+
+@layer utilities {
+  [data-theme='light'] .track-clip-container {
+    background: oklch(0.95 0.01 var(--hue) / 0.3);
+    border: 1px solid oklch(0.7 0.02 var(--hue) / 0.5);
+  }
+
+  [data-theme='light'] .track-clip-header {
+    background: linear-gradient(to bottom, rgb(255 255 255 / 0.15), transparent);
+  }
 }

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>
+  );
+}

components/automation/AutomationLane.tsx

@@ -0,0 +1,337 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+import type { AutomationLane as AutomationLaneType, AutomationPoint as AutomationPointType, AutomationMode } from '@/types/automation';
+import { AutomationHeader } from './AutomationHeader';
+import { AutomationPoint } from './AutomationPoint';
+
+export interface AutomationLaneProps {
+  lane: AutomationLaneType;
+  duration: number; // Total timeline duration in seconds
+  zoom: number; // Zoom factor
+  currentTime?: number; // Playhead position
+  onUpdateLane?: (updates: Partial<AutomationLaneType>) => void;
+  onAddPoint?: (time: number, value: number) => void;
+  onUpdatePoint?: (pointId: string, updates: Partial<AutomationPointType>) => void;
+  onRemovePoint?: (pointId: string) => void;
+  className?: string;
+}
+
+export function AutomationLane({
+  lane,
+  duration,
+  zoom,
+  currentTime = 0,
+  onUpdateLane,
+  onAddPoint,
+  onUpdatePoint,
+  onRemovePoint,
+  className,
+}: AutomationLaneProps) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [selectedPointId, setSelectedPointId] = React.useState<string | null>(null);
+  const [isDraggingPoint, setIsDraggingPoint] = React.useState(false);
+
+  // Convert time to X pixel position
+  const timeToX = React.useCallback(
+    (time: number): number => {
+      if (!containerRef.current) return 0;
+      const width = containerRef.current.clientWidth;
+      return (time / duration) * width * zoom;
+    },
+    [duration, zoom]
+  );
+
+  // Convert value (0-1) to Y pixel position (inverted: 0 at bottom, 1 at top)
+  const valueToY = React.useCallback(
+    (value: number): number => {
+      if (!containerRef.current) return 0;
+      const height = lane.height;
+      return height * (1 - value);
+    },
+    [lane.height]
+  );
+
+  // Convert X pixel position to time
+  const xToTime = React.useCallback(
+    (x: number): number => {
+      if (!containerRef.current) return 0;
+      const width = containerRef.current.clientWidth;
+      return (x / (width * zoom)) * duration;
+    },
+    [duration, zoom]
+  );
+
+  // Convert Y pixel position to value (0-1)
+  const yToValue = React.useCallback(
+    (y: number): number => {
+      const height = lane.height;
+      return Math.max(0, Math.min(1, 1 - y / height));
+    },
+    [lane.height]
+  );
+
+  // Draw automation curve
+  React.useEffect(() => {
+    if (!canvasRef.current || !lane.visible) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.scale(dpr, dpr);
+
+    const width = rect.width;
+    const height = rect.height;
+
+    // Clear canvas
+    ctx.clearRect(0, 0, width, height);
+
+    // Background
+    ctx.fillStyle = getComputedStyle(canvas).getPropertyValue('--color-background') || 'rgb(15, 23, 42)';
+    ctx.fillRect(0, 0, width, height);
+
+    // Grid lines (horizontal value guides)
+    ctx.strokeStyle = 'rgba(148, 163, 184, 0.1)';
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= 4; i++) {
+      const y = (height / 4) * i;
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(width, y);
+      ctx.stroke();
+    }
+
+    // Draw automation curve
+    if (lane.points.length > 0) {
+      const color = lane.color || 'rgb(59, 130, 246)';
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+
+      // Sort points by time
+      const sortedPoints = [...lane.points].sort((a, b) => a.time - b.time);
+
+      // Draw lines between points
+      for (let i = 0; i < sortedPoints.length; i++) {
+        const point = sortedPoints[i];
+        const x = timeToX(point.time);
+        const y = valueToY(point.value);
+
+        if (i === 0) {
+          // Start from left edge at first point's value
+          ctx.moveTo(0, y);
+          ctx.lineTo(x, y);
+        } else {
+          const prevPoint = sortedPoints[i - 1];
+          const prevX = timeToX(prevPoint.time);
+          const prevY = valueToY(prevPoint.value);
+
+          if (point.curve === 'step') {
+            // Step curve: horizontal then vertical
+            ctx.lineTo(x, prevY);
+            ctx.lineTo(x, y);
+          } else {
+            // Linear curve (bezier not implemented yet)
+            ctx.lineTo(x, y);
+          }
+        }
+
+        // Extend to right edge from last point
+        if (i === sortedPoints.length - 1) {
+          ctx.lineTo(width, y);
+        }
+      }
+
+      ctx.stroke();
+
+      // Fill area under curve
+      ctx.globalAlpha = 0.2;
+      ctx.fillStyle = color;
+      ctx.lineTo(width, height);
+      ctx.lineTo(0, height);
+      ctx.closePath();
+      ctx.fill();
+      ctx.globalAlpha = 1.0;
+    }
+
+    // Draw playhead
+    if (currentTime >= 0 && duration > 0) {
+      const playheadX = timeToX(currentTime);
+      if (playheadX >= 0 && playheadX <= width) {
+        ctx.strokeStyle = 'rgba(239, 68, 68, 0.8)';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(playheadX, 0);
+        ctx.lineTo(playheadX, height);
+        ctx.stroke();
+      }
+    }
+  }, [lane, duration, zoom, currentTime, timeToX, valueToY]);
+
+  // Handle canvas click to add point
+  const handleCanvasClick = React.useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      if (isDraggingPoint || !onAddPoint) return;
+
+      const rect = e.currentTarget.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      const time = xToTime(x);
+      const value = yToValue(y);
+
+      onAddPoint(time, value);
+    },
+    [isDraggingPoint, onAddPoint, xToTime, yToValue]
+  );
+
+  // Handle point drag
+  const handlePointDragStart = React.useCallback((pointId: string) => {
+    setIsDraggingPoint(true);
+    setSelectedPointId(pointId);
+  }, []);
+
+  const handlePointDrag = React.useCallback(
+    (pointId: string, deltaX: number, deltaY: number) => {
+      if (!containerRef.current || !onUpdatePoint) return;
+
+      const point = lane.points.find((p) => p.id === pointId);
+      if (!point) return;
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const width = rect.width;
+
+      // Calculate new time and value
+      const timePerPixel = duration / (width * zoom);
+      const valuePerPixel = 1 / lane.height;
+
+      const newTime = Math.max(0, Math.min(duration, point.time + deltaX * timePerPixel));
+      const newValue = Math.max(0, Math.min(1, point.value - deltaY * valuePerPixel));
+
+      onUpdatePoint(pointId, { time: newTime, value: newValue });
+    },
+    [lane.points, lane.height, duration, zoom, onUpdatePoint]
+  );
+
+  const handlePointDragEnd = React.useCallback(() => {
+    setIsDraggingPoint(false);
+  }, []);
+
+  // Handle point click (select)
+  const handlePointClick = React.useCallback((pointId: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    setSelectedPointId(pointId);
+  }, []);
+
+  // Handle point double-click (delete)
+  const handlePointDoubleClick = React.useCallback(
+    (pointId: string) => {
+      if (onRemovePoint) {
+        onRemovePoint(pointId);
+      }
+    },
+    [onRemovePoint]
+  );
+
+  // Handle keyboard delete
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.key === 'Delete' || e.key === 'Backspace') && selectedPointId && onRemovePoint) {
+        e.preventDefault();
+        onRemovePoint(selectedPointId);
+        setSelectedPointId(null);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [selectedPointId, onRemovePoint]);
+
+  // Get current value at playhead (interpolated)
+  const getCurrentValue = React.useCallback((): number | undefined => {
+    if (lane.points.length === 0) return undefined;
+
+    const sortedPoints = [...lane.points].sort((a, b) => a.time - b.time);
+
+    // Find surrounding points
+    let prevPoint = sortedPoints[0];
+    let nextPoint = sortedPoints[sortedPoints.length - 1];
+
+    for (let i = 0; i < sortedPoints.length - 1; i++) {
+      if (sortedPoints[i].time <= currentTime && sortedPoints[i + 1].time >= currentTime) {
+        prevPoint = sortedPoints[i];
+        nextPoint = sortedPoints[i + 1];
+        break;
+      }
+    }
+
+    // Interpolate
+    if (currentTime <= prevPoint.time) return prevPoint.value;
+    if (currentTime >= nextPoint.time) return nextPoint.value;
+
+    const timeDelta = nextPoint.time - prevPoint.time;
+    const valueDelta = nextPoint.value - prevPoint.value;
+    const progress = (currentTime - prevPoint.time) / timeDelta;
+
+    return prevPoint.value + valueDelta * progress;
+  }, [lane.points, currentTime]);
+
+  if (!lane.visible) return null;
+
+  return (
+    <div className={cn('flex flex-col border-b border-border/50', className)} style={{ height: lane.height + 30 }}>
+      {/* Header */}
+      <AutomationHeader
+        parameterName={lane.parameterName}
+        currentValue={getCurrentValue()}
+        visible={lane.visible}
+        mode={lane.mode}
+        color={lane.color}
+        onToggleVisible={() => onUpdateLane?.({ visible: !lane.visible })}
+        onModeChange={(mode: AutomationMode) => onUpdateLane?.({ mode })}
+        onHeightChange={(delta) => {
+          const newHeight = Math.max(60, Math.min(180, lane.height + delta));
+          onUpdateLane?.({ height: newHeight });
+        }}
+        formatter={lane.valueRange.formatter}
+      />
+
+      {/* Lane canvas area */}
+      <div
+        ref={containerRef}
+        className="relative flex-1 bg-background/30 overflow-hidden cursor-crosshair"
+        style={{ height: lane.height }}
+      >
+        <canvas
+          ref={canvasRef}
+          className="absolute inset-0 w-full h-full"
+          onClick={handleCanvasClick}
+        />
+
+        {/* Automation points */}
+        {lane.points.map((point) => (
+          <AutomationPoint
+            key={point.id}
+            point={point}
+            x={timeToX(point.time)}
+            y={valueToY(point.value)}
+            isSelected={selectedPointId === point.id}
+            onDragStart={handlePointDragStart}
+            onDrag={handlePointDrag}
+            onDragEnd={handlePointDragEnd}
+            onClick={handlePointClick}
+            onDoubleClick={handlePointDoubleClick}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

components/automation/AutomationPoint.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+import type { AutomationPoint as AutomationPointType } from '@/types/automation';
+
+export interface AutomationPointProps {
+  point: AutomationPointType;
+  x: number; // Pixel position
+  y: number; // Pixel position
+  isSelected?: boolean;
+  onDragStart?: (pointId: string, startX: number, startY: number) => void;
+  onDrag?: (pointId: string, deltaX: number, deltaY: number) => void;
+  onDragEnd?: (pointId: string) => void;
+  onClick?: (pointId: string, event: React.MouseEvent) => void;
+  onDoubleClick?: (pointId: string) => void;
+}
+
+export function AutomationPoint({
+  point,
+  x,
+  y,
+  isSelected = false,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+  onClick,
+  onDoubleClick,
+}: AutomationPointProps) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragStartRef = React.useRef({ x: 0, y: 0 });
+
+  const handleMouseDown = React.useCallback(
+    (e: React.MouseEvent) => {
+      if (e.button !== 0) return; // Only left click
+
+      e.stopPropagation();
+      setIsDragging(true);
+      dragStartRef.current = { x: e.clientX, y: e.clientY };
+
+      if (onDragStart) {
+        onDragStart(point.id, e.clientX, e.clientY);
+      }
+    },
+    [point.id, onDragStart]
+  );
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDragging && onClick) {
+        onClick(point.id, e);
+      }
+    },
+    [isDragging, point.id, onClick]
+  );
+
+  const handleDoubleClick = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (onDoubleClick) {
+        onDoubleClick(point.id);
+      }
+    },
+    [point.id, onDoubleClick]
+  );
+
+  // Global mouse handlers
+  React.useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging) return;
+
+      const deltaX = e.clientX - dragStartRef.current.x;
+      const deltaY = e.clientY - dragStartRef.current.y;
+
+      if (onDrag) {
+        onDrag(point.id, deltaX, deltaY);
+      }
+
+      // Update drag start position for next delta calculation
+      dragStartRef.current = { x: e.clientX, y: e.clientY };
+    };
+
+    const handleMouseUp = () => {
+      if (isDragging) {
+        setIsDragging(false);
+        if (onDragEnd) {
+          onDragEnd(point.id);
+        }
+      }
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, point.id, onDrag, onDragEnd]);
+
+  return (
+    <div
+      className={cn(
+        'absolute rounded-full cursor-pointer transition-all select-none',
+        'hover:scale-125',
+        isDragging ? 'scale-125 z-10' : 'z-0',
+        isSelected
+          ? 'w-3 h-3 bg-primary border-2 border-background shadow-lg'
+          : 'w-2.5 h-2.5 bg-primary/80 border border-background shadow-md'
+      )}
+      style={{
+        left: x - (isSelected || isDragging ? 6 : 5),
+        top: y - (isSelected || isDragging ? 6 : 5),
+      }}
+      onMouseDown={handleMouseDown}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      title={`Time: ${point.time.toFixed(3)}s, Value: ${point.value.toFixed(3)}`}
+    />
+  );
+}

components/editor/AudioEditor.tsx

@@ -14,6 +14,7 @@ import { useEffectChain } from '@/lib/hooks/useEffectChain';
 import { useToast } from '@/components/ui/Toast';
 import { TrackList } from '@/components/tracks/TrackList';
 import { ImportTrackDialog } from '@/components/tracks/ImportTrackDialog';
+import { EffectsPanel } from '@/components/effects/EffectsPanel';
 import { formatDuration } from '@/lib/audio/decoder';
 import { useHistory } from '@/lib/hooks/useHistory';
 import { useRecording } from '@/lib/hooks/useRecording';
@@ -38,6 +39,8 @@ export function AudioEditor() {
   const [punchOutTime, setPunchOutTime] = React.useState(0);
   const [overdubEnabled, setOverdubEnabled] = React.useState(false);
   const [settingsDialogOpen, setSettingsDialogOpen] = React.useState(false);
+  const [effectsPanelHeight, setEffectsPanelHeight] = React.useState(300);
+  const [effectsPanelVisible, setEffectsPanelVisible] = React.useState(false);
 
   const { addToast } = useToast();
 
@@ -61,13 +64,46 @@ export function AudioEditor() {
   // Multi-track hooks
   const {
     tracks,
-    addTrack,
+    addTrack: addTrackOriginal,
-    addTrackFromBuffer,
+    addTrackFromBuffer: addTrackFromBufferOriginal,
     removeTrack,
     updateTrack,
     clearTracks,
   } = useMultiTrack();
 
+  // Track whether we should auto-select on next add (when project is empty)
+  const shouldAutoSelectRef = React.useRef(true);
+
+  React.useEffect(() => {
+    // Update auto-select flag based on track count
+    shouldAutoSelectRef.current = tracks.length === 0;
+  }, [tracks.length]);
+
+  // Wrap addTrack to auto-select first track when adding to empty project
+  const addTrack = React.useCallback((name?: string) => {
+    const shouldAutoSelect = shouldAutoSelectRef.current;
+    const track = addTrackOriginal(name);
+    if (shouldAutoSelect) {
+      setSelectedTrackId(track.id);
+      shouldAutoSelectRef.current = false; // Only auto-select once
+    }
+    return track;
+  }, [addTrackOriginal]);
+
+  // Wrap addTrackFromBuffer to auto-select first track when adding to empty project
+  const addTrackFromBuffer = React.useCallback((buffer: AudioBuffer, name?: string) => {
+    console.log(`[AudioEditor] addTrackFromBuffer wrapper called: ${name}, shouldAutoSelect: ${shouldAutoSelectRef.current}`);
+    const shouldAutoSelect = shouldAutoSelectRef.current;
+    const track = addTrackFromBufferOriginal(buffer, name);
+    console.log(`[AudioEditor] Track created: ${track.name} (${track.id})`);
+    if (shouldAutoSelect) {
+      console.log(`[AudioEditor] Auto-selecting track: ${track.id}`);
+      setSelectedTrackId(track.id);
+      shouldAutoSelectRef.current = false; // Only auto-select once
+    }
+    return track;
+  }, [addTrackFromBufferOriginal]);
+
   // Log tracks to see if they update
   React.useEffect(() => {
     console.log('[AudioEditor] Tracks updated:', tracks.map(t => ({
@@ -108,6 +144,7 @@ export function AudioEditor() {
   };
 
   const handleImportTrack = (buffer: AudioBuffer, name: string) => {
+    console.log(`[AudioEditor] handleImportTrack called: ${name}`);
     addTrackFromBuffer(buffer, name);
   };
 
@@ -171,6 +208,79 @@ export function AudioEditor() {
     updateTrack(selectedTrack.id, { effectChain: updatedChain });
   };
 
+  // Effects Panel handlers
+  const handleAddEffect = React.useCallback((effectType: any) => {
+    if (!selectedTrackId) return;
+    const track = tracks.find((t) => t.id === selectedTrackId);
+    if (!track) return;
+
+    // Import createEffect and EFFECT_NAMES dynamically
+    import('@/lib/audio/effects/chain').then(({ createEffect, EFFECT_NAMES }) => {
+      const newEffect = createEffect(effectType, EFFECT_NAMES[effectType]);
+      const updatedChain = {
+        ...track.effectChain,
+        effects: [...track.effectChain.effects, newEffect],
+      };
+      updateTrack(selectedTrackId, { effectChain: updatedChain });
+    });
+  }, [selectedTrackId, tracks, updateTrack]);
+
+  const handleToggleEffect = React.useCallback((effectId: string) => {
+    if (!selectedTrackId) return;
+    const track = tracks.find((t) => t.id === selectedTrackId);
+    if (!track) return;
+
+    const updatedChain = {
+      ...track.effectChain,
+      effects: track.effectChain.effects.map((e) =>
+        e.id === effectId ? { ...e, enabled: !e.enabled } : e
+      ),
+    };
+    updateTrack(selectedTrackId, { effectChain: updatedChain });
+  }, [selectedTrackId, tracks, updateTrack]);
+
+  const handleRemoveEffect = React.useCallback((effectId: string) => {
+    if (!selectedTrackId) return;
+    const track = tracks.find((t) => t.id === selectedTrackId);
+    if (!track) return;
+
+    const updatedChain = {
+      ...track.effectChain,
+      effects: track.effectChain.effects.filter((e) => e.id !== effectId),
+    };
+    updateTrack(selectedTrackId, { effectChain: updatedChain });
+  }, [selectedTrackId, tracks, updateTrack]);
+
+  const handleUpdateEffect = React.useCallback((effectId: string, parameters: any) => {
+    if (!selectedTrackId) return;
+    const track = tracks.find((t) => t.id === selectedTrackId);
+    if (!track) return;
+
+    const updatedChain = {
+      ...track.effectChain,
+      effects: track.effectChain.effects.map((e) =>
+        e.id === effectId ? { ...e, parameters } : e
+      ),
+    };
+    updateTrack(selectedTrackId, { effectChain: updatedChain });
+  }, [selectedTrackId, tracks, updateTrack]);
+
+  const handleToggleEffectExpanded = React.useCallback((effectId: string) => {
+    if (!selectedTrackId) return;
+    const track = tracks.find((t) => t.id === selectedTrackId);
+    if (!track) return;
+
+    const updatedChain = {
+      ...track.effectChain,
+      effects: track.effectChain.effects.map((e) =>
+        e.id === effectId ? { ...e, expanded: !e.expanded } : e
+      ),
+    };
+    updateTrack(selectedTrackId, { effectChain: updatedChain });
+  }, [selectedTrackId, tracks, updateTrack]);
+
+  // Preserve effects panel state - don't auto-open/close on track selection
+
   // Selection handler
   const handleSelectionChange = (trackId: string, selection: { start: number; end: number } | null) => {
     updateTrack(trackId, { selection });
@@ -706,6 +816,23 @@ export function AudioEditor() {
             />
           </div>
 
+          {/* Effects Panel - Global Folding State, Collapsed when no track */}
+          <EffectsPanel
+            track={selectedTrack || null}
+            visible={selectedTrack ? effectsPanelVisible : false}
+            height={effectsPanelHeight}
+            onToggleVisible={() => {
+              if (selectedTrack) {
+                setEffectsPanelVisible(!effectsPanelVisible);
+              }
+            }}
+            onResizeHeight={setEffectsPanelHeight}
+            onAddEffect={handleAddEffect}
+            onToggleEffect={handleToggleEffect}
+            onRemoveEffect={handleRemoveEffect}
+            onUpdateEffect={handleUpdateEffect}
+            onToggleEffectExpanded={handleToggleEffectExpanded}
+          />
         </main>
       </div>
 

components/effects/EffectBrowser.tsx

@@ -21,6 +21,28 @@ const EFFECT_CATEGORIES = {
   'Pitch & Time': ['pitch', 'timestretch'] as EffectType[],
 };
 
+const EFFECT_DESCRIPTIONS: Record<EffectType, string> = {
+  'compressor': 'Reduce dynamic range and control peaks',
+  'limiter': 'Prevent audio from exceeding a maximum level',
+  'gate': 'Reduce noise by cutting low-level signals',
+  'lowpass': 'Allow frequencies below cutoff to pass',
+  'highpass': 'Allow frequencies above cutoff to pass',
+  'bandpass': 'Allow frequencies within a range to pass',
+  'notch': 'Remove a specific frequency range',
+  'lowshelf': 'Boost or cut low frequencies',
+  'highshelf': 'Boost or cut high frequencies',
+  'peaking': 'Boost or cut a specific frequency band',
+  'delay': 'Create echoes and rhythmic repeats',
+  'reverb': 'Simulate acoustic space and ambience',
+  'chorus': 'Thicken sound with subtle pitch variations',
+  'flanger': 'Create sweeping comb filter effects',
+  'phaser': 'Create phase-shifted modulation effects',
+  'distortion': 'Add harmonic saturation and grit',
+  'bitcrusher': 'Reduce bit depth for lo-fi effects',
+  'pitch': 'Shift pitch without changing tempo',
+  'timestretch': 'Change tempo without affecting pitch',
+};
+
 export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserProps) {
   const [search, setSearch] = React.useState('');
   const [selectedCategory, setSelectedCategory] = React.useState<string | null>(null);
@@ -40,7 +62,8 @@ export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserPr
 
     Object.entries(EFFECT_CATEGORIES).forEach(([category, effects]) => {
       const matchingEffects = effects.filter((effect) =>
-        EFFECT_NAMES[effect].toLowerCase().includes(searchLower)
+        EFFECT_NAMES[effect].toLowerCase().includes(searchLower) ||
+        EFFECT_DESCRIPTIONS[effect].toLowerCase().includes(searchLower)
       );
       if (matchingEffects.length > 0) {
         filtered[category] = matchingEffects;
@@ -101,7 +124,7 @@ export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserPr
                       )}
                     >
                       <div className="font-medium text-sm">{EFFECT_NAMES[effect]}</div>
-                      <div className="text-xs text-muted-foreground capitalize">{effect}</div>
+                      <div className="text-xs text-muted-foreground">{EFFECT_DESCRIPTIONS[effect]}</div>
                     </button>
                   ))}
                 </div>

components/effects/EffectDevice.tsx

@@ -12,6 +12,7 @@ export interface EffectDeviceProps {
   onToggleEnabled?: () => void;
   onRemove?: () => void;
   onUpdateParameters?: (parameters: any) => void;
+  onToggleExpanded?: () => void;
 }
 
 export function EffectDevice({
@@ -19,50 +20,61 @@ export function EffectDevice({
   onToggleEnabled,
   onRemove,
   onUpdateParameters,
+  onToggleExpanded,
 }: EffectDeviceProps) {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const isExpanded = effect.expanded || false;
 
   return (
     <div
       className={cn(
-        'flex-shrink-0 flex flex-col h-full border-l border-border transition-all duration-200',
+        'flex-shrink-0 flex flex-col h-full transition-all duration-200 overflow-hidden rounded-md',
-        effect.enabled ? 'bg-accent/20' : 'bg-muted/20',
+        effect.enabled
+          ? 'bg-card border-l border-r border-b border-border'
+          : 'bg-card/40 border-l border-r border-b border-border/50 opacity-60 hover:opacity-80',
         isExpanded ? 'min-w-96' : 'w-10'
       )}
     >
       {!isExpanded ? (
-        /* Collapsed State - No Header */
+        /* Collapsed State */
-        <button
+        <>
-          onClick={() => setIsExpanded(true)}
+          {/* Colored top indicator */}
-          className="w-full h-full flex flex-col items-center justify-between py-1 hover:bg-primary/10 transition-colors group"
+          <div className={cn('h-0.5 w-full', effect.enabled ? 'bg-primary' : 'bg-muted-foreground/20')} />
-          title={`Expand ${effect.name}`}
+
-        >
+          <button
-          <ChevronRight className="h-3 w-3 flex-shrink-0 text-muted-foreground group-hover:text-primary transition-colors" />
+            onClick={onToggleExpanded}
-          <span
+            className="w-full h-full flex flex-col items-center justify-between py-1 hover:bg-primary/10 transition-colors group"
-            className="flex-1 text-xs font-medium whitespace-nowrap text-muted-foreground group-hover:text-primary transition-colors"
+            title={`Expand ${effect.name}`}
-            style={{
-              writingMode: 'vertical-rl',
-              textOrientation: 'mixed',
-            }}
           >
-            {effect.name}
+            <ChevronRight className="h-3 w-3 flex-shrink-0 text-muted-foreground group-hover:text-primary transition-colors" />
-          </span>
+            <span
-          <div
+              className="flex-1 text-xs font-medium whitespace-nowrap text-muted-foreground group-hover:text-primary transition-colors"
-            className={cn(
+              style={{
-              'w-1 h-1 rounded-full flex-shrink-0 mb-1',
+                writingMode: 'vertical-rl',
-              effect.enabled ? 'bg-primary' : 'bg-muted-foreground/30'
+                textOrientation: 'mixed',
-            )}
+              }}
-            title={effect.enabled ? 'Enabled' : 'Disabled'}
+            >
-          />
+              {effect.name}
-        </button>
+            </span>
+            <div
+              className={cn(
+                'w-1.5 h-1.5 rounded-full flex-shrink-0 mb-1',
+                effect.enabled ? 'bg-primary shadow-sm shadow-primary/50' : 'bg-muted-foreground/30'
+              )}
+              title={effect.enabled ? 'Enabled' : 'Disabled'}
+            />
+          </button>
+        </>
       ) : (
         <>
+          {/* Colored top indicator */}
+          <div className={cn('h-0.5 w-full', effect.enabled ? 'bg-primary' : 'bg-muted-foreground/20')} />
+
           {/* Full-Width Header Row */}
-          <div className="flex items-center gap-1 px-2 py-1 border-b border-border bg-card/30 flex-shrink-0">
+          <div className="flex items-center gap-1 px-2 py-1.5 border-b border-border/50 bg-muted/30 flex-shrink-0">
             <Button
               variant="ghost"
               size="icon-sm"
-              onClick={() => setIsExpanded(false)}
+              onClick={onToggleExpanded}
               title="Collapse device"
               className="h-5 w-5 flex-shrink-0"
             >
@@ -95,7 +107,7 @@ export function EffectDevice({
           </div>
 
           {/* Device Body */}
-          <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-2">
+          <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-3 bg-card/50">
             <EffectParameters effect={effect} onUpdateParameters={onUpdateParameters} />
           </div>
         </>

components/effects/EffectsPanel.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronDown, ChevronUp, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { EffectDevice } from './EffectDevice';
+import { EffectBrowser } from './EffectBrowser';
+import type { Track } from '@/types/track';
+import type { EffectType } from '@/lib/audio/effects/chain';
+import { cn } from '@/lib/utils/cn';
+
+export interface EffectsPanelProps {
+  track: Track | null; // Selected track
+  visible: boolean;
+  height: number;
+  onToggleVisible: () => void;
+  onResizeHeight: (height: number) => void;
+  onAddEffect?: (effectType: EffectType) => void;
+  onToggleEffect?: (effectId: string) => void;
+  onRemoveEffect?: (effectId: string) => void;
+  onUpdateEffect?: (effectId: string, parameters: any) => void;
+  onToggleEffectExpanded?: (effectId: string) => void;
+}
+
+export function EffectsPanel({
+  track,
+  visible,
+  height,
+  onToggleVisible,
+  onResizeHeight,
+  onAddEffect,
+  onToggleEffect,
+  onRemoveEffect,
+  onUpdateEffect,
+  onToggleEffectExpanded,
+}: EffectsPanelProps) {
+  const [effectBrowserOpen, setEffectBrowserOpen] = React.useState(false);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const resizeStartRef = React.useRef({ y: 0, height: 0 });
+
+  // Resize handler
+  const handleResizeStart = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setIsResizing(true);
+      resizeStartRef.current = { y: e.clientY, height };
+    },
+    [height]
+  );
+
+  React.useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const delta = resizeStartRef.current.y - e.clientY;
+      const newHeight = Math.max(200, Math.min(600, resizeStartRef.current.height + delta));
+      onResizeHeight(newHeight);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isResizing, onResizeHeight]);
+
+  if (!visible) {
+    // Collapsed state - just show header bar
+    return (
+      <div className="h-8 bg-card border-t border-border flex items-center px-3 gap-2 flex-shrink-0">
+        <button
+          onClick={onToggleVisible}
+          className="flex items-center gap-2 flex-1 hover:text-primary transition-colors text-sm font-medium"
+        >
+          <ChevronUp className="h-4 w-4" />
+          <span>Device View</span>
+          {track && (
+            <span className="text-muted-foreground">- {track.name}</span>
+          )}
+        </button>
+        {track && (
+          <div className="flex items-center gap-1">
+            <span className="text-xs text-muted-foreground">
+              {track.effectChain.effects.length} device(s)
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="bg-card border-t border-border flex flex-col flex-shrink-0 transition-all duration-300 ease-in-out"
+      style={{ height }}
+    >
+      {/* Resize handle */}
+      <div
+        className={cn(
+          'h-1 cursor-ns-resize hover:bg-primary/50 transition-colors group flex items-center justify-center',
+          isResizing && 'bg-primary/50'
+        )}
+        onMouseDown={handleResizeStart}
+        title="Drag to resize panel"
+      >
+        <div className="h-px w-16 bg-border group-hover:bg-primary transition-colors" />
+      </div>
+
+      {/* Header */}
+      <div className="h-10 flex-shrink-0 border-b border-border flex items-center px-3 gap-2 bg-muted/30">
+        <button
+          onClick={onToggleVisible}
+          className="flex items-center gap-2 flex-1 hover:text-primary transition-colors"
+        >
+          <ChevronDown className="h-4 w-4" />
+          <span className="text-sm font-medium">Device View</span>
+          {track && (
+            <>
+              <span className="text-sm text-muted-foreground">-</span>
+              <div
+                className="w-0.5 h-4 rounded-full"
+                style={{ backgroundColor: track.color }}
+              />
+              <span className="text-sm font-semibold text-foreground">{track.name}</span>
+            </>
+          )}
+        </button>
+
+        {track && (
+          <>
+            <span className="text-xs text-muted-foreground">
+              {track.effectChain.effects.length} device(s)
+            </span>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={() => setEffectBrowserOpen(true)}
+              title="Add effect"
+              className="h-7 w-7"
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          </>
+        )}
+      </div>
+
+      {/* Device Rack */}
+      <div className="flex-1 overflow-x-auto overflow-y-hidden custom-scrollbar bg-background/50 p-3">
+        {!track ? (
+          <div className="h-full flex items-center justify-center text-sm text-muted-foreground">
+            Select a track to view its devices
+          </div>
+        ) : track.effectChain.effects.length === 0 ? (
+          <div className="h-full flex flex-col items-center justify-center text-sm text-muted-foreground gap-2">
+            <p>No devices on this track</p>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setEffectBrowserOpen(true)}
+            >
+              <Plus className="h-4 w-4 mr-1" />
+              Add Device
+            </Button>
+          </div>
+        ) : (
+          <div className="flex h-full gap-3">
+            {track.effectChain.effects.map((effect) => (
+              <EffectDevice
+                key={effect.id}
+                effect={effect}
+                onToggleEnabled={() => onToggleEffect?.(effect.id)}
+                onRemove={() => onRemoveEffect?.(effect.id)}
+                onUpdateParameters={(params) => onUpdateEffect?.(effect.id, params)}
+                onToggleExpanded={() => onToggleEffectExpanded?.(effect.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Effect Browser Dialog */}
+      {track && (
+        <EffectBrowser
+          open={effectBrowserOpen}
+          onClose={() => setEffectBrowserOpen(false)}
+          onSelectEffect={(effectType) => {
+            if (onAddEffect) {
+              onAddEffect(effectType);
+            }
+            setEffectBrowserOpen(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}

components/tracks/ImportTrackDialog.tsx

@@ -24,28 +24,42 @@ export function ImportTrackDialog({
   const handleFiles = async (files: FileList) => {
     setIsLoading(true);
 
+    // Convert FileList to Array to prevent any weird behavior
+    const fileArray = Array.from(files);
+    console.log(`[ImportTrackDialog] Processing ${fileArray.length} files`, fileArray);
+
     try {
       // Process files sequentially
-      for (let i = 0; i < files.length; i++) {
+      for (let i = 0; i < fileArray.length; i++) {
-        const file = files[i];
+        console.log(`[ImportTrackDialog] Loop iteration ${i}, fileArray.length: ${fileArray.length}`);
+        const file = fileArray[i];
+        console.log(`[ImportTrackDialog] Processing file ${i + 1}/${fileArray.length}: ${file.name}, type: ${file.type}`);
 
         if (!file.type.startsWith('audio/')) {
-          console.warn(`Skipping non-audio file: ${file.name}`);
+          console.warn(`Skipping non-audio file: ${file.name} (type: ${file.type})`);
           continue;
         }
 
         try {
+          console.log(`[ImportTrackDialog] Decoding file ${i + 1}/${files.length}: ${file.name}`);
           const buffer = await decodeAudioFile(file);
           const trackName = file.name.replace(/\.[^/.]+$/, ''); // Remove extension
+          console.log(`[ImportTrackDialog] Importing track: ${trackName}`);
           onImportTrack(buffer, trackName);
+          console.log(`[ImportTrackDialog] Track imported: ${trackName}`);
         } catch (error) {
           console.error(`Failed to import ${file.name}:`, error);
         }
+        console.log(`[ImportTrackDialog] Finished processing file ${i + 1}`);
       }
 
-      onClose();
+      console.log('[ImportTrackDialog] Loop completed, all files processed');
+    } catch (error) {
+      console.error('[ImportTrackDialog] Error in handleFiles:', error);
     } finally {
       setIsLoading(false);
+      console.log('[ImportTrackDialog] Closing dialog');
+      onClose();
     }
   };
 

components/tracks/Track.tsx

@@ -1,16 +1,18 @@
 'use client';
 
 import * as React from 'react';
-import { Volume2, VolumeX, Headphones, Trash2, ChevronDown, ChevronRight, UnfoldHorizontal, Upload, Plus, Mic, Gauge } from 'lucide-react';
+import { Volume2, VolumeX, Headphones, Trash2, ChevronDown, ChevronRight, UnfoldHorizontal, Upload, Mic, Gauge, Circle } from 'lucide-react';
 import type { Track as TrackType } from '@/types/track';
+import { COLLAPSED_TRACK_HEIGHT, MIN_TRACK_HEIGHT, MAX_TRACK_HEIGHT } from '@/types/track';
 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 type { EffectType } from '@/lib/audio/effects/chain';
-import { EffectDevice } from '@/components/effects/EffectDevice';
-import { createEffect, type EffectType } from '@/lib/audio/effects/chain';
 import { VerticalFader } from '@/components/ui/VerticalFader';
 import { CircularKnob } from '@/components/ui/CircularKnob';
+import { AutomationLane } from '@/components/automation/AutomationLane';
+import type { AutomationLane as AutomationLaneType, AutomationPoint as AutomationPointType } from '@/types/automation';
+import { createAutomationPoint } from '@/lib/audio/automation/utils';
 
 export interface TrackProps {
   track: TrackType;
@@ -26,6 +28,7 @@ export interface TrackProps {
   onPanChange: (pan: number) => void;
   onRemove: () => void;
   onNameChange: (name: string) => void;
+  onUpdateTrack: (trackId: string, updates: Partial<TrackType>) => void;
   onSeek?: (time: number) => void;
   onLoadAudio?: (buffer: AudioBuffer) => void;
   onToggleEffect?: (effectId: string) => void;
@@ -53,6 +56,7 @@ export function Track({
   onPanChange,
   onRemove,
   onNameChange,
+  onUpdateTrack,
   onSeek,
   onLoadAudio,
   onToggleEffect,
@@ -70,10 +74,10 @@ 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 [effectBrowserOpen, setEffectBrowserOpen] = React.useState(false);
-  const [showEffects, setShowEffects] = React.useState(false);
   const [themeKey, setThemeKey] = React.useState(0);
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const resizeStartRef = React.useRef({ y: 0, height: 0 });
 
   // Selection state
   const [isSelecting, setIsSelecting] = React.useState(false);
@@ -390,172 +394,243 @@ export function Track({
     }
   };
 
-  const trackHeight = track.collapsed ? 48 : track.height;
+  const trackHeight = track.collapsed ? COLLAPSED_TRACK_HEIGHT : track.height;
+
+  // Track height resize handlers
+  const handleResizeStart = React.useCallback(
+    (e: React.MouseEvent) => {
+      if (track.collapsed) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsResizing(true);
+      resizeStartRef.current = { y: e.clientY, height: track.height };
+    },
+    [track.collapsed, track.height]
+  );
+
+  React.useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const delta = e.clientY - resizeStartRef.current.y;
+      const newHeight = Math.max(
+        MIN_TRACK_HEIGHT,
+        Math.min(MAX_TRACK_HEIGHT, resizeStartRef.current.height + delta)
+      );
+      onUpdateTrack(track.id, { height: newHeight });
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isResizing, onUpdateTrack, track.id]);
 
   return (
     <div
       ref={containerRef}
       className={cn(
-        'flex flex-col',
+        'flex flex-col transition-all duration-200 relative',
-        isSelected && 'ring-2 ring-primary ring-inset'
+        isSelected && 'bg-primary/5'
       )}
     >
       {/* Top: Track Row (Control Panel + Waveform) */}
       <div className="flex" style={{ height: trackHeight }}>
         {/* Left: Track Control Panel (Fixed Width) - Ableton Style */}
         <div
-          className="w-48 flex-shrink-0 bg-card border-r border-border border-b border-border p-2 flex flex-col gap-2"
+          className={cn(
-          onClick={(e) => e.stopPropagation()}
+            "w-48 flex-shrink-0 border-b border-r-4 p-2 flex flex-col gap-2 min-h-0 transition-all duration-200 cursor-pointer border-border",
-        >
+            isSelected
-        {/* Track Name (Full Width) */}
+              ? "bg-primary/10 border-r-primary"
-        <div className="flex items-center gap-1">
+              : "bg-card border-r-transparent hover:bg-accent/30"
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            onClick={onToggleCollapse}
-            title={track.collapsed ? 'Expand track' : 'Collapse track'}
-            className="flex-shrink-0 h-6 w-6"
-          >
-            {track.collapsed ? (
-              <ChevronRight className="h-3 w-3" />
-            ) : (
-              <ChevronDown className="h-3 w-3" />
-            )}
-          </Button>
-
-          <div
-            className="w-1 h-6 rounded-full flex-shrink-0"
-            style={{ backgroundColor: track.color }}
-          />
-
-          <div className="flex-1 min-w-0">
-            {isEditingName ? (
-              <input
-                ref={inputRef}
-                type="text"
-                value={nameInput}
-                onChange={(e) => setNameInput(e.target.value)}
-                onBlur={handleNameBlur}
-                onKeyDown={handleNameKeyDown}
-                className="w-full px-1 py-0.5 text-xs font-medium bg-background border border-border rounded"
-              />
-            ) : (
-              <div
-                onClick={handleNameClick}
-                className="px-1 py-0.5 text-xs font-medium text-foreground truncate cursor-pointer hover:bg-accent rounded"
-                title={String(track.name || 'Untitled Track')}
-              >
-                {String(track.name || 'Untitled Track')}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Compact Button Row */}
-        <div className="flex items-center justify-center gap-1">
-          {/* Record Enable Button */}
-          {onToggleRecordEnable && (
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              onClick={onToggleRecordEnable}
-              title="Arm track for recording"
-              className={cn(
-                'h-6 w-6',
-                track.recordEnabled && 'bg-red-500/20 hover:bg-red-500/30',
-                isRecording && 'animate-pulse'
-              )}
-            >
-              <div
-                className={cn(
-                  'h-3 w-3 rounded-full border-2',
-                  track.recordEnabled ? 'bg-red-500 border-red-500' : 'border-current'
-                )}
-              />
-            </Button>
           )}
-
+          onClick={(e) => {
-          {/* Solo Button */}
+            e.stopPropagation();
-          <Button
+            if (onSelect) onSelect();
-            variant="ghost"
+          }}
-            size="icon-sm"
+        >
-            onClick={onToggleSolo}
+          {/* Track Name Row - Integrated collapse (DAW style) */}
-            title="Solo track"
+          <div
             className={cn(
-              'h-6 w-6 text-[10px] font-bold',
+              "group flex items-center gap-1.5 px-1 py-0.5 rounded cursor-pointer transition-colors",
-              track.solo && 'bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-500'
+              isSelected ? "bg-primary/10" : "hover:bg-accent/50"
             )}
+            onClick={(e) => {
+              if (!isEditingName) {
+                e.stopPropagation();
+                onToggleCollapse();
+              }
+            }}
+            title={track.collapsed ? 'Expand track' : 'Collapse track'}
           >
-            S
+            {/* Small triangle indicator */}
-          </Button>
+            <div className={cn(
+              "flex-shrink-0 transition-colors",
+              isSelected ? "text-primary" : "text-muted-foreground group-hover:text-foreground"
+            )}>
+              {track.collapsed ? (
+                <ChevronRight className="h-3 w-3" />
+              ) : (
+                <ChevronDown className="h-3 w-3" />
+              )}
+            </div>
 
-          {/* Mute Button */}
+            {/* Color stripe (thicker when selected) */}
-          <Button
+            <div
-            variant="ghost"
+              className={cn(
-            size="icon-sm"
+                "h-5 rounded-full flex-shrink-0 transition-all",
-            onClick={onToggleMute}
+                isSelected ? "w-1" : "w-0.5"
-            title="Mute track"
+              )}
-            className={cn(
+              style={{ backgroundColor: track.color }}
-              'h-6 w-6 text-[10px] font-bold',
-              track.mute && 'bg-red-500/20 hover:bg-red-500/30 text-red-500'
-            )}
-          >
-            M
-          </Button>
-
-          {/* Remove Button */}
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            onClick={onRemove}
-            title="Remove track"
-            className="h-6 w-6 text-destructive hover:text-destructive hover:bg-destructive/10"
-          >
-            <Trash2 className="h-3 w-3" />
-          </Button>
-        </div>
-
-        {/* Track Controls - Only show when not collapsed */}
-        {!track.collapsed && (
-          <div className="flex-1 flex flex-col items-center justify-center gap-2 py-2">
-            {/* Pan Knob */}
-            <CircularKnob
-              value={track.pan}
-              onChange={onPanChange}
-              min={-1}
-              max={1}
-              step={0.01}
-              size={40}
-              label="PAN"
             />
 
-            {/* Vertical Volume Fader with integrated meter */}
+            {/* Track name (editable) */}
-            <VerticalFader
+            <div className="flex-1 min-w-0">
-              value={track.volume}
+              {isEditingName ? (
-              level={track.recordEnabled || isRecording ? recordingLevel : playbackLevel}
+                <input
-              onChange={onVolumeChange}
+                  ref={inputRef}
-              min={0}
+                  type="text"
-              max={1}
+                  value={nameInput}
-              step={0.01}
+                  onChange={(e) => setNameInput(e.target.value)}
-              showDb={true}
+                  onBlur={handleNameBlur}
-            />
+                  onKeyDown={handleNameKeyDown}
+                  onClick={(e) => e.stopPropagation()}
+                  className="w-full px-1 py-0.5 text-xs font-semibold bg-background border border-border rounded"
+                />
+              ) : (
+                <div
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleNameClick();
+                  }}
+                  className="px-1 py-0.5 text-xs font-semibold text-foreground truncate"
+                  title={String(track.name || 'Untitled Track')}
+                >
+                  {String(track.name || 'Untitled Track')}
+                </div>
+              )}
+            </div>
           </div>
-        )}
+
-      </div>
+          {/* Track Controls - Only show when not collapsed */}
+          {!track.collapsed && (
+            <div className="flex-1 flex flex-col items-center justify-between min-h-0 overflow-hidden">
+              {/* Pan Knob */}
+              <div className="flex-shrink-0">
+                <CircularKnob
+                  value={track.pan}
+                  onChange={onPanChange}
+                  min={-1}
+                  max={1}
+                  step={0.01}
+                  size={48}
+                  label="PAN"
+                />
+              </div>
+
+              {/* Vertical Volume Fader with integrated meter */}
+              <div className="flex-1 flex items-center justify-center min-h-0">
+                <VerticalFader
+                  value={track.volume}
+                  level={track.recordEnabled || isRecording ? recordingLevel : playbackLevel}
+                  onChange={onVolumeChange}
+                  min={0}
+                  max={1}
+                  step={0.01}
+                  showDb={true}
+                />
+              </div>
+
+              {/* Inline Button Row - Below fader */}
+              <div className="flex-shrink-0 w-full">
+                {/* R/S/M inline row with icons */}
+                <div className="flex items-center gap-1 justify-center">
+                  {/* Record Arm */}
+                  {onToggleRecordEnable && (
+                    <button
+                      onClick={onToggleRecordEnable}
+                      className={cn(
+                        'h-6 w-6 rounded flex items-center justify-center transition-all',
+                        track.recordEnabled
+                          ? 'bg-red-500 text-white shadow-md shadow-red-500/30'
+                          : 'bg-card hover:bg-accent text-muted-foreground border border-border/50',
+                        isRecording && 'animate-pulse'
+                      )}
+                      title="Arm track for recording"
+                    >
+                      <Circle className="h-3 w-3 fill-current" />
+                    </button>
+                  )}
+
+                  {/* Solo Button */}
+                  <button
+                    onClick={onToggleSolo}
+                    className={cn(
+                      'h-6 w-6 rounded flex items-center justify-center transition-all',
+                      track.solo
+                        ? 'bg-yellow-500 text-black shadow-md shadow-yellow-500/30'
+                        : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+                    )}
+                    title="Solo track"
+                  >
+                    <Headphones className="h-3 w-3" />
+                  </button>
+
+                  {/* Mute Button */}
+                  <button
+                    onClick={onToggleMute}
+                    className={cn(
+                      'h-6 w-6 rounded flex items-center justify-center transition-all',
+                      track.mute
+                        ? 'bg-blue-500 text-white shadow-md shadow-blue-500/30'
+                        : 'bg-card hover:bg-accent text-muted-foreground border border-border/50'
+                    )}
+                    title="Mute track"
+                  >
+                    {track.mute ? <VolumeX className="h-3 w-3" /> : <Volume2 className="h-3 w-3" />}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
 
       {/* Right: Waveform Area (Flexible Width) */}
       <div
-        className="flex-1 relative bg-waveform-bg border-b border-border cursor-pointer"
+        className="flex-1 relative bg-waveform-bg border-b border-l border-border"
-        onClick={onSelect}
       >
+        {/* Delete Button - Top Right Overlay */}
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          className={cn(
+            'absolute top-2 right-2 z-20 h-6 w-6 rounded flex items-center justify-center transition-all',
+            'bg-card/80 hover:bg-destructive/90 text-muted-foreground hover:text-white',
+            'border border-border/50 hover:border-destructive',
+            'backdrop-blur-sm shadow-sm hover:shadow-md'
+          )}
+          title="Remove track"
+        >
+          <Trash2 className="h-3 w-3" />
+        </button>
+
         {track.audioBuffer ? (
-          <canvas
+          <>
-            ref={canvasRef}
+            {/* Waveform Canvas */}
-            className="absolute inset-0 w-full h-full cursor-crosshair"
+            <canvas
-            onMouseDown={handleCanvasMouseDown}
+              ref={canvasRef}
-            onMouseMove={handleCanvasMouseMove}
+              className="absolute inset-0 w-full h-full"
-            onMouseUp={handleCanvasMouseUp}
+            />
-          />
+          </>
         ) : (
           !track.collapsed && (
             <>
@@ -589,92 +664,82 @@ export function Track({
       </div>
       </div>
 
-      {/* Bottom: Effects Section (Collapsible, Full Width) */}
+      {/* Automation Lanes */}
-      {!track.collapsed && (
+      {!track.collapsed && track.automation?.showAutomation && (
-        <div className="bg-muted/50 border-b border-border/50">
+        <div className="bg-background/30">
-          {/* Effects Header - clickable to toggle */}
+          {track.automation.lanes.map((lane) => (
-          <div
+            <AutomationLane
-            className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
+              key={lane.id}
-            onClick={() => setShowEffects(!showEffects)}
+              lane={lane}
-          >
+              duration={duration}
-            {showEffects ? (
+              zoom={zoom}
-              <ChevronDown className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+              currentTime={currentTime}
-            ) : (
+              onUpdateLane={(updates) => {
-              <ChevronRight className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                const updatedLanes = track.automation.lanes.map((l) =>
-            )}
+                  l.id === lane.id ? { ...l, ...updates } : l
-
+                );
-            {/* Show mini effect chain when collapsed */}
+                onUpdateTrack(track.id, {
-            {!showEffects && track.effectChain.effects.length > 0 ? (
+                  automation: { ...track.automation, lanes: updatedLanes },
-              <div className="flex-1 flex items-center gap-1 overflow-x-auto custom-scrollbar">
+                });
-                {track.effectChain.effects.map((effect) => (
-                  <div
-                    key={effect.id}
-                    className={cn(
-                      'px-2 py-0.5 rounded text-[10px] font-medium flex-shrink-0',
-                      effect.enabled
-                        ? 'bg-primary/20 text-primary border border-primary/30'
-                        : 'bg-muted/30 text-muted-foreground border border-border'
-                    )}
-                  >
-                    {effect.name}
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <span className="text-xs font-medium text-muted-foreground">
-                Devices ({track.effectChain.effects.length})
-              </span>
-            )}
-
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              onClick={(e) => {
-                e.stopPropagation();
-                setEffectBrowserOpen(true);
               }}
-              title="Add effect"
+              onAddPoint={(time, value) => {
-              className="h-5 w-5 flex-shrink-0"
+                const newPoint = createAutomationPoint({
-            >
+                  time,
-              <Plus className="h-3 w-3" />
+                  value,
-            </Button>
+                  curve: 'linear',
-          </div>
+                });
-
+                const updatedLanes = track.automation.lanes.map((l) =>
-          {/* Horizontal scrolling device rack - expanded state */}
+                  l.id === lane.id
-          {showEffects && (
+                    ? { ...l, points: [...l.points, newPoint] }
-            <div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70">
+                    : l
-              <div className="flex h-full">
+                );
-                {track.effectChain.effects.length === 0 ? (
+                onUpdateTrack(track.id, {
-                  <div className="text-xs text-muted-foreground text-center py-8 w-full">
+                  automation: { ...track.automation, lanes: updatedLanes },
-                    No devices. Click + to add an effect.
+                });
-                  </div>
+              }}
-                ) : (
+              onUpdatePoint={(pointId, updates) => {
-                  track.effectChain.effects.map((effect) => (
+                const updatedLanes = track.automation.lanes.map((l) =>
-                    <EffectDevice
+                  l.id === lane.id
-                      key={effect.id}
+                    ? {
-                      effect={effect}
+                        ...l,
-                      onToggleEnabled={() => onToggleEffect?.(effect.id)}
+                        points: l.points.map((p) =>
-                      onRemove={() => onRemoveEffect?.(effect.id)}
+                          p.id === pointId ? { ...p, ...updates } : p
-                      onUpdateParameters={(params) => onUpdateEffect?.(effect.id, params)}
+                        ),
-                    />
+                      }
-                  ))
+                    : l
-                )}
+                );
-              </div>
+                onUpdateTrack(track.id, {
-            </div>
+                  automation: { ...track.automation, lanes: updatedLanes },
-          )}
+                });
+              }}
+              onRemovePoint={(pointId) => {
+                const updatedLanes = track.automation.lanes.map((l) =>
+                  l.id === lane.id
+                    ? { ...l, points: l.points.filter((p) => p.id !== pointId) }
+                    : l
+                );
+                onUpdateTrack(track.id, {
+                  automation: { ...track.automation, lanes: updatedLanes },
+                });
+              }}
+            />
+          ))}
         </div>
       )}
 
-      {/* Effect Browser Dialog */}
+      {/* Track Height Resize Handle */}
-      <EffectBrowser
+      {!track.collapsed && (
-        open={effectBrowserOpen}
+        <div
-        onClose={() => setEffectBrowserOpen(false)}
+          className={cn(
-        onSelectEffect={(effectType) => {
+            'absolute bottom-0 left-0 right-0 h-1 cursor-ns-resize hover:bg-primary/50 transition-all duration-200 z-20 group',
-          if (onAddEffect) {
+            isResizing && 'bg-primary/50 h-1.5'
-            onAddEffect(effectType);
+          )}
-          }
+          onMouseDown={handleResizeStart}
-        }}
+          title="Drag to resize track height"
-      />
+        >
+          <div className="absolute inset-x-0 bottom-0 h-px bg-border group-hover:bg-primary transition-colors duration-200" />
+        </div>
+      )}
     </div>
   );
 }

components/tracks/TrackList.tsx

@@ -114,6 +114,7 @@ export function TrackList({
             onNameChange={(name) =>
               onUpdateTrack(track.id, { name })
             }
+            onUpdateTrack={onUpdateTrack}
             onSeek={onSeek}
             onLoadAudio={(buffer) =>
               onUpdateTrack(track.id, { audioBuffer: buffer })

components/ui/CircularKnob.tsx

@@ -167,11 +167,6 @@ export function CircularKnob({
           {/* Indicator line */}
           <div className="absolute top-1 left-1/2 w-0.5 h-2 bg-primary rounded-full -translate-x-1/2" />
         </div>
-
-        {/* Center dot (for zero position) */}
-        {value === 0 && (
-          <div className="absolute top-1/2 left-1/2 w-1 h-1 bg-primary rounded-full -translate-x-1/2 -translate-y-1/2" />
-        )}
       </div>
 
       {/* Value Display */}

components/ui/VerticalFader.tsx

@@ -107,35 +107,29 @@ export function VerticalFader({
       <div
         ref={trackRef}
         onMouseDown={handleMouseDown}
-        className="relative w-8 h-32 bg-muted rounded cursor-pointer select-none overflow-hidden"
+        className="relative w-8 flex-1 min-h-[80px] max-h-[140px] bg-background/50 border border-border rounded cursor-pointer select-none overflow-hidden"
       >
-        {/* Level Meter Background (green/yellow/red gradient) */}
+        {/* Volume Level Overlay - subtle fill up to fader handle */}
         <div
-          className="absolute inset-0 opacity-40"
+          className="absolute bottom-0 left-0 right-0 bg-primary/10"
-          style={{
+          style={{ height: `${valuePercentage}%` }}
-            background: 'linear-gradient(to top, rgb(34, 197, 94) 0%, rgb(34, 197, 94) 70%, rgb(234, 179, 8) 85%, rgb(239, 68, 68) 100%)',
-          }}
         />
 
-        {/* Level Meter (actual level) */}
+        {/* Level Meter (actual level) - capped at fader handle position */}
         <div
           className="absolute bottom-0 left-0 right-0 transition-all duration-75"
           style={{
-            height: `${level * 100}%`,
+            height: `${Math.min(level * 100, valuePercentage)}%`,
             background: 'linear-gradient(to top, rgb(34, 197, 94) 0%, rgb(34, 197, 94) 70%, rgb(234, 179, 8) 85%, rgb(239, 68, 68) 100%)',
             opacity: 0.6,
           }}
         />
 
-        {/* Volume Value Fill */}
+        {/* Volume Value Fill - Removed to show gradient spectrum */}
-        <div
-          className="absolute bottom-0 left-0 right-0 bg-primary/30 border-t-2 border-primary"
-          style={{ height: `${valuePercentage}%` }}
-        />
 
         {/* Fader Handle */}
         <div
-          className="absolute left-0 right-0 h-3 -ml-1 -mr-1 bg-primary rounded-sm shadow-lg cursor-grab active:cursor-grabbing"
+          className="absolute left-0 right-0 h-3 -ml-1 -mr-1 bg-primary/70 border-2 border-primary rounded-sm shadow-lg cursor-grab active:cursor-grabbing backdrop-blur-sm"
           style={{
             bottom: `calc(${valuePercentage}% - 6px)`,
             width: 'calc(100% + 8px)',

lib/audio/automation/playback.ts

@@ -0,0 +1,167 @@
+/**
+ * Automation playback engine
+ * Applies automation to track parameters in real-time during playback
+ */
+
+import type { Track } from '@/types/track';
+import type { AutomationLane, AutomationValue } from '@/types/automation';
+import { interpolateAutomationValue, applyAutomationToTrack } from './utils';
+
+/**
+ * Get all automation values at a specific time
+ */
+export function getAutomationValuesAtTime(
+  track: Track,
+  time: number
+): AutomationValue[] {
+  if (!track.automation || track.automation.lanes.length === 0) {
+    return [];
+  }
+
+  const values: AutomationValue[] = [];
+
+  for (const lane of track.automation.lanes) {
+    // Skip lanes in write mode (don't apply during playback)
+    if (lane.mode === 'write') continue;
+
+    // Skip lanes with no points
+    if (lane.points.length === 0) continue;
+
+    const value = interpolateAutomationValue(lane.points, time);
+
+    values.push({
+      parameterId: lane.parameterId,
+      value,
+      time,
+    });
+  }
+
+  return values;
+}
+
+/**
+ * Apply automation values to a track
+ * Returns a new track object with automated parameters applied
+ */
+export function applyAutomationValues(
+  track: Track,
+  values: AutomationValue[]
+): Track {
+  let updatedTrack = track;
+
+  for (const automation of values) {
+    updatedTrack = applyAutomationToTrack(
+      updatedTrack,
+      automation.parameterId,
+      automation.value
+    );
+  }
+
+  return updatedTrack;
+}
+
+/**
+ * Apply automation to all tracks at a specific time
+ * Returns a new tracks array with automation applied
+ */
+export function applyAutomationToTracks(
+  tracks: Track[],
+  time: number
+): Track[] {
+  return tracks.map((track) => {
+    const automationValues = getAutomationValuesAtTime(track, time);
+
+    if (automationValues.length === 0) {
+      return track;
+    }
+
+    return applyAutomationValues(track, automationValues);
+  });
+}
+
+/**
+ * Record automation point during playback
+ */
+export function recordAutomationPoint(
+  lane: AutomationLane,
+  time: number,
+  value: number
+): AutomationLane {
+  // In write mode, replace all existing points in the recorded region
+  // For simplicity, just add the point for now
+  // TODO: Implement proper write mode that clears existing points
+
+  const newPoint = {
+    id: `point-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    time,
+    value,
+    curve: 'linear' as const,
+  };
+
+  return {
+    ...lane,
+    points: [...lane.points, newPoint],
+  };
+}
+
+/**
+ * Automation playback scheduler
+ * Schedules automation updates at regular intervals during playback
+ */
+export class AutomationPlaybackScheduler {
+  private intervalId: number | null = null;
+  private updateInterval: number = 50; // Update every 50ms (20 Hz)
+  private onUpdate: ((time: number) => void) | null = null;
+
+  /**
+   * Start the automation scheduler
+   */
+  start(onUpdate: (time: number) => void): void {
+    if (this.intervalId !== null) {
+      this.stop();
+    }
+
+    this.onUpdate = onUpdate;
+    this.intervalId = window.setInterval(() => {
+      // Get current playback time from your audio engine
+      // This is a placeholder - you'll need to integrate with your actual playback system
+      if (this.onUpdate) {
+        // Call update callback with current time
+        // The callback should get the time from your actual playback system
+        this.onUpdate(0); // Placeholder
+      }
+    }, this.updateInterval);
+  }
+
+  /**
+   * Stop the automation scheduler
+   */
+  stop(): void {
+    if (this.intervalId !== null) {
+      window.clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+    this.onUpdate = null;
+  }
+
+  /**
+   * Set update interval (in milliseconds)
+   */
+  setUpdateInterval(interval: number): void {
+    this.updateInterval = Math.max(10, Math.min(1000, interval));
+
+    // Restart if already running
+    if (this.intervalId !== null && this.onUpdate) {
+      const callback = this.onUpdate;
+      this.stop();
+      this.start(callback);
+    }
+  }
+
+  /**
+   * Check if scheduler is running
+   */
+  isRunning(): boolean {
+    return this.intervalId !== null;
+  }
+}

lib/audio/automation/utils.ts

@@ -0,0 +1,185 @@
+/**
+ * Automation utility functions
+ */
+
+import type {
+  AutomationLane,
+  AutomationPoint,
+  CreateAutomationLaneInput,
+  CreateAutomationPointInput,
+  AutomationParameterId,
+} from '@/types/automation';
+
+/**
+ * Generate a unique automation point ID
+ */
+export function generateAutomationPointId(): string {
+  return `point-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * Generate a unique automation lane ID
+ */
+export function generateAutomationLaneId(): string {
+  return `lane-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * Create a new automation point
+ */
+export function createAutomationPoint(
+  input: CreateAutomationPointInput
+): AutomationPoint {
+  return {
+    id: generateAutomationPointId(),
+    ...input,
+  };
+}
+
+/**
+ * Create a new automation lane
+ */
+export function createAutomationLane(
+  trackId: string,
+  parameterId: AutomationParameterId,
+  parameterName: string,
+  input?: Partial<CreateAutomationLaneInput>
+): AutomationLane {
+  return {
+    id: generateAutomationLaneId(),
+    trackId,
+    parameterId,
+    parameterName,
+    visible: input?.visible ?? true,
+    height: input?.height ?? 80,
+    points: input?.points ?? [],
+    mode: input?.mode ?? 'read',
+    color: input?.color,
+    valueRange: input?.valueRange ?? {
+      min: 0,
+      max: 1,
+    },
+  };
+}
+
+/**
+ * Create a volume automation lane
+ */
+export function createVolumeAutomationLane(trackId: string): AutomationLane {
+  return createAutomationLane(trackId, 'volume', 'Volume', {
+    valueRange: {
+      min: 0,
+      max: 1,
+      formatter: (value) => `${(value * 100).toFixed(0)}%`,
+    },
+    color: 'rgb(34, 197, 94)', // green
+  });
+}
+
+/**
+ * Create a pan automation lane
+ */
+export function createPanAutomationLane(trackId: string): AutomationLane {
+  return createAutomationLane(trackId, 'pan', 'Pan', {
+    valueRange: {
+      min: -1,
+      max: 1,
+      formatter: (value) => {
+        const normalized = value * 2 - 1; // Convert 0-1 to -1-1
+        if (normalized === 0) return 'C';
+        if (normalized < 0) return `L${Math.abs(Math.round(normalized * 100))}`;
+        return `R${Math.round(normalized * 100)}`;
+      },
+    },
+    color: 'rgb(59, 130, 246)', // blue
+  });
+}
+
+/**
+ * Interpolate automation value at a specific time
+ */
+export function interpolateAutomationValue(
+  points: AutomationPoint[],
+  time: number
+): number {
+  if (points.length === 0) return 0;
+
+  const sortedPoints = [...points].sort((a, b) => a.time - b.time);
+
+  // Before first point
+  if (time <= sortedPoints[0].time) {
+    return sortedPoints[0].value;
+  }
+
+  // After last point
+  if (time >= sortedPoints[sortedPoints.length - 1].time) {
+    return sortedPoints[sortedPoints.length - 1].value;
+  }
+
+  // Find surrounding points
+  for (let i = 0; i < sortedPoints.length - 1; i++) {
+    const prevPoint = sortedPoints[i];
+    const nextPoint = sortedPoints[i + 1];
+
+    if (time >= prevPoint.time && time <= nextPoint.time) {
+      // Handle step curve
+      if (prevPoint.curve === 'step') {
+        return prevPoint.value;
+      }
+
+      // Linear interpolation
+      const timeDelta = nextPoint.time - prevPoint.time;
+      const valueDelta = nextPoint.value - prevPoint.value;
+      const progress = (time - prevPoint.time) / timeDelta;
+
+      return prevPoint.value + valueDelta * progress;
+    }
+  }
+
+  return 0;
+}
+
+/**
+ * Apply automation value to track parameter
+ */
+export function applyAutomationToTrack(
+  track: any,
+  parameterId: AutomationParameterId,
+  value: number
+): any {
+  if (parameterId === 'volume') {
+    return { ...track, volume: value };
+  }
+
+  if (parameterId === 'pan') {
+    // Convert 0-1 to -1-1
+    return { ...track, pan: value * 2 - 1 };
+  }
+
+  // Effect parameters (format: "effect.{effectId}.{paramName}")
+  if (parameterId.startsWith('effect.')) {
+    const parts = parameterId.split('.');
+    if (parts.length === 3) {
+      const [, effectId, paramName] = parts;
+      return {
+        ...track,
+        effectChain: {
+          ...track.effectChain,
+          effects: track.effectChain.effects.map((effect: any) =>
+            effect.id === effectId
+              ? {
+                  ...effect,
+                  parameters: {
+                    ...effect.parameters,
+                    [paramName]: value,
+                  },
+                }
+              : effect
+          ),
+        },
+      };
+    }
+  }
+
+  return track;
+}

lib/audio/effects/chain.ts

@@ -72,6 +72,7 @@ export interface ChainEffect {
   type: EffectType;
   name: string;
   enabled: boolean;
+  expanded?: boolean; // UI state for effect device expansion
   parameters?: EffectParameters;
 }
 

lib/audio/track-utils.ts

@@ -35,6 +35,10 @@ export function createTrack(name?: string, color?: TrackColor): Track {
     solo: false,
     recordEnabled: false,
     effectChain: createEffectChain(`${trackName} Effects`),
+    automation: {
+      lanes: [],
+      showAutomation: false,
+    },
     collapsed: false,
     selected: false,
     selection: null,

lib/hooks/useMultiTrack.ts

@@ -26,13 +26,14 @@ export function useMultiTrack() {
           return [];
         }
 
-        // Note: AudioBuffers can't be serialized, but EffectChains can
+        // Note: AudioBuffers can't be serialized, but EffectChains and Automation can
         return parsed.map((t: any) => ({
           ...t,
           name: String(t.name || 'Untitled Track'), // Ensure name is always a string
           height: t.height && t.height >= DEFAULT_TRACK_HEIGHT ? t.height : DEFAULT_TRACK_HEIGHT, // Migrate old heights
           audioBuffer: null, // Will need to be reloaded
           effectChain: t.effectChain || createEffectChain(`${t.name} Effects`), // Restore effect chain or create new
+          automation: t.automation || { lanes: [], showAutomation: false }, // Restore automation or create new
           selection: t.selection || null, // Initialize selection
         }));
       }
@@ -64,6 +65,7 @@ export function useMultiTrack() {
         collapsed: track.collapsed,
         selected: track.selected,
         effectChain: track.effectChain, // Save effect chain
+        automation: track.automation, // Save automation data
       }));
       localStorage.setItem(STORAGE_KEY, JSON.stringify(trackData));
     } catch (error) {

types/automation.ts

@@ -0,0 +1,105 @@
+/**
+ * Automation system type definitions
+ * Based on Ableton Live's automation model
+ */
+
+/**
+ * Automation curve types
+ * - linear: Straight line between points
+ * - bezier: Curved line with control handles
+ * - step: Horizontal lines with vertical transitions (for discrete values)
+ */
+export type AutomationCurveType = 'linear' | 'bezier' | 'step';
+
+/**
+ * Automation recording/playback modes
+ * - read: Only playback automation
+ * - write: Record automation (replaces existing)
+ * - touch: Record while touching control, then return to read mode
+ * - latch: Record from first touch until stop, then return to read mode
+ */
+export type AutomationMode = 'read' | 'write' | 'touch' | 'latch';
+
+/**
+ * Single automation breakpoint
+ */
+export interface AutomationPoint {
+  id: string;
+  time: number; // Position in seconds from track start
+  value: number; // Parameter value (normalized 0-1)
+  curve: AutomationCurveType;
+  // Bezier control handles (only used when curve is 'bezier')
+  handleIn?: { x: number; y: number }; // Relative to point position
+  handleOut?: { x: number; y: number }; // Relative to point position
+}
+
+/**
+ * Parameter identifier for automation
+ * Examples:
+ * - 'volume' - Track volume
+ * - 'pan' - Track pan
+ * - 'mute' - Track mute (step curve)
+ * - 'effect.compressor-1.threshold' - Effect parameter
+ * - 'effect.delay-2.time' - Effect parameter
+ */
+export type AutomationParameterId = string;
+
+/**
+ * Single automation lane for a specific parameter
+ */
+export interface AutomationLane {
+  id: string;
+  trackId: string;
+  parameterId: AutomationParameterId;
+  parameterName: string; // Display name (e.g., "Volume", "Compressor Threshold")
+  visible: boolean; // Show/hide lane
+  height: number; // Lane height in pixels (user-adjustable, 60-120px)
+  points: AutomationPoint[];
+  mode: AutomationMode;
+  color?: string; // Optional color override (defaults to parameter type color)
+  // Value range for display (actual values are normalized 0-1)
+  valueRange: {
+    min: number; // Display minimum (e.g., 0 for volume)
+    max: number; // Display maximum (e.g., 1 for volume)
+    unit?: string; // Display unit (e.g., 'dB', '%', 'ms', 'Hz')
+    formatter?: (value: number) => string; // Custom value formatter
+  };
+}
+
+/**
+ * All automation lanes for a single track
+ */
+export interface TrackAutomation {
+  trackId: string;
+  lanes: AutomationLane[];
+  showAutomation: boolean; // Master show/hide toggle for all lanes
+}
+
+/**
+ * Complete automation data for entire project
+ */
+export interface ProjectAutomation {
+  tracks: Record<string, TrackAutomation>;
+}
+
+/**
+ * Automation parameter value at a specific time
+ * Used for real-time playback
+ */
+export interface AutomationValue {
+  parameterId: AutomationParameterId;
+  value: number;
+  time: number;
+}
+
+/**
+ * Helper type for creating new automation points
+ */
+export type CreateAutomationPointInput = Omit<AutomationPoint, 'id'>;
+
+/**
+ * Helper type for creating new automation lanes
+ */
+export type CreateAutomationLaneInput = Omit<AutomationLane, 'id' | 'points'> & {
+  points?: AutomationPoint[];
+};

types/track.ts

@@ -4,6 +4,7 @@
 
 import type { EffectChain } from '@/lib/audio/effects/chain';
 import type { Selection } from './selection';
+import type { AutomationLane } from './automation';
 
 export interface Track {
   id: string;
@@ -22,6 +23,12 @@ export interface Track {
   // Effects
   effectChain: EffectChain;
 
+  // Automation
+  automation: {
+    lanes: AutomationLane[];
+    showAutomation: boolean; // Master show/hide toggle
+  };
+
   // UI state
   collapsed: boolean;
   selected: boolean;
@@ -59,6 +66,7 @@ export const TRACK_COLORS: Record<TrackColor, string> = {
   gray: 'rgb(156, 163, 175)',
 };
 
-export const DEFAULT_TRACK_HEIGHT = 180;
+export const DEFAULT_TRACK_HEIGHT = 300; // Knob + fader with labels + R/S/M buttons
-export const MIN_TRACK_HEIGHT = 60;
+export const MIN_TRACK_HEIGHT = 220; // Minimum to fit knob + fader with labels + buttons
-export const MAX_TRACK_HEIGHT = 300;
+export const MAX_TRACK_HEIGHT = 500; // Increased for better waveform viewing
+export const COLLAPSED_TRACK_HEIGHT = 48; // Extracted constant for collapsed state