fix: restore automation lanes and effects sections in two-column layout

Restored the automation lane and effects sections that were removed during
the Track component refactoring. These sections now render as full-width
rows below each track, spanning across both the controls and waveforms columns.

Changes:
- Created TrackExtensions component for effects section rendering
- Added automation lane rendering in TrackList after each track waveform
- Added placeholder spacers in left controls column to maintain alignment
- Effects section shows collapsible device rack with mini preview when collapsed
- Automation lanes render when track.automation.showAutomation is true
- Import dialog moved to waveform-only rendering mode

The automation and effects sections are now properly unfoldable again.

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

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

components/tracks/Track.tsx

@@ -816,6 +816,7 @@ export function Track({
   // Render only waveform
   if (renderWaveformOnly) {
     return (
+      <>
         <div
           className={cn(
             "relative bg-waveform-bg border-b transition-all duration-200",
@@ -897,9 +898,19 @@ export function Track({
                 </>
               )
             )}
-        </div>{" "}
-        {/* Close inner container with minWidth */}
           </div>
+        </div>
+
+        {/* Import Dialog */}
+        <ImportDialog
+          open={showImportDialog}
+          onClose={handleImportCancel}
+          onImport={handleImport}
+          fileName={pendingFile?.name}
+          sampleRate={fileMetadata.sampleRate}
+          channels={fileMetadata.channels}
+        />
+      </>
     );
   }
 

components/tracks/TrackExtensions.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import * as React from 'react';
+import { Plus, ChevronDown, ChevronRight } from 'lucide-react';
+import type { Track as TrackType } from '@/types/track';
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/lib/utils/cn';
+import { EffectDevice } from '@/components/effects/EffectDevice';
+import { EffectBrowser } from '@/components/effects/EffectBrowser';
+import type { EffectType } from '@/lib/audio/effects/chain';
+
+export interface TrackExtensionsProps {
+  track: TrackType;
+  onUpdateTrack: (trackId: string, updates: Partial<TrackType>) => void;
+  onToggleEffect?: (effectId: string) => void;
+  onRemoveEffect?: (effectId: string) => void;
+  onUpdateEffect?: (effectId: string, parameters: any) => void;
+  onAddEffect?: (effectType: EffectType) => void;
+}
+
+export function TrackExtensions({
+  track,
+  onUpdateTrack,
+  onToggleEffect,
+  onRemoveEffect,
+  onUpdateEffect,
+  onAddEffect,
+}: TrackExtensionsProps) {
+  const [effectBrowserOpen, setEffectBrowserOpen] = React.useState(false);
+
+  // Don't render if track is collapsed
+  if (track.collapsed) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Effects Section (Collapsible, Full Width) */}
+      <div className="bg-muted/50 border-b border-border/50">
+        {/* Effects Header - clickable to toggle */}
+        <div
+          className="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-accent/30 transition-colors"
+          onClick={() => {
+            onUpdateTrack(track.id, {
+              showEffects: !track.showEffects,
+            });
+          }}
+        >
+          {track.showEffects ? (
+            <ChevronDown className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+          ) : (
+            <ChevronRight className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+          )}
+
+          {/* Show mini effect chain when collapsed */}
+          {!track.showEffects && track.effectChain.effects.length > 0 ? (
+            <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"
+            className="h-5 w-5 flex-shrink-0"
+          >
+            <Plus className="h-3 w-3" />
+          </Button>
+        </div>
+
+        {/* Horizontal scrolling device rack - expanded state */}
+        {track.showEffects && (
+          <div className="h-48 overflow-x-auto custom-scrollbar bg-muted/70">
+            <div className="flex h-full">
+              {track.effectChain.effects.length === 0 ? (
+                <div className="text-xs text-muted-foreground text-center py-8 w-full">
+                  No devices. Click + to add an effect.
+                </div>
+              ) : (
+                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)}
+                  />
+                ))
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Effect Browser Dialog */}
+      <EffectBrowser
+        open={effectBrowserOpen}
+        onClose={() => setEffectBrowserOpen(false)}
+        onSelectEffect={(effectType) => {
+          if (onAddEffect) {
+            onAddEffect(effectType);
+          }
+        }}
+      />
+    </>
+  );
+}

components/tracks/TrackList.tsx

@@ -4,9 +4,13 @@ import * as React from 'react';
 import { Plus, Upload } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Track } from './Track';
+import { TrackExtensions } from './TrackExtensions';
 import { ImportTrackDialog } from './ImportTrackDialog';
 import type { Track as TrackType } from '@/types/track';
 import { createEffect, type EffectType, EFFECT_NAMES } from '@/lib/audio/effects/chain';
+import { AutomationLane } from '@/components/automation/AutomationLane';
+import type { AutomationPoint as AutomationPointType } from '@/types/automation';
+import { createAutomationPoint } from '@/lib/audio/automation/utils';
 
 export interface TrackListProps {
   tracks: TrackType[];
@@ -102,8 +106,9 @@ export function TrackList({
         {/* Left Column: Track Controls (Fixed Width, No Scroll - synced with waveforms) */}
         <div ref={controlsScrollRef} className="w-48 flex-shrink-0 overflow-hidden pb-3 border-r border-border">
           {tracks.map((track) => (
+            <React.Fragment key={track.id}>
+              {/* Track Controls */}
               <Track
-              key={track.id}
                 track={track}
                 zoom={zoom}
                 currentTime={currentTime}
@@ -187,6 +192,17 @@ export function TrackList({
                 isPlaying={isPlaying}
                 renderControlsOnly={true}
               />
+
+              {/* Spacer for Automation Lane */}
+              {!track.collapsed && track.automation?.showAutomation && (
+                <div className="h-32 bg-muted/30 border-b border-border" />
+              )}
+
+              {/* Spacer for Effects Section */}
+              {!track.collapsed && (
+                <div className={track.showEffects ? "h-64 bg-muted/50 border-b border-border/50" : "h-8 bg-muted/50 border-b border-border/50"} />
+              )}
+            </React.Fragment>
           ))}
         </div>
 
@@ -196,9 +212,11 @@ export function TrackList({
           onScroll={handleWaveformScroll}
           className="flex-1 overflow-auto custom-scrollbar"
         >
+          <div className="flex flex-col">
             {tracks.map((track) => (
+              <React.Fragment key={track.id}>
+                {/* Track Waveform Row */}
                 <Track
-              key={track.id}
                   track={track}
                   zoom={zoom}
                   currentTime={currentTime}
@@ -282,8 +300,116 @@ export function TrackList({
                   isPlaying={isPlaying}
                   renderWaveformOnly={true}
                 />
+
+                {/* Automation Lane Section */}
+                {!track.collapsed && track.automation?.showAutomation && (
+                  <div className="bg-muted/30 border-b border-border">
+                    {track.automation.lanes
+                      .filter((lane) => lane.parameterId === track.automation.selectedParameterId)
+                      .map((lane) => (
+                        <AutomationLane
+                          key={lane.id}
+                          lane={lane}
+                          trackId={track.id}
+                          zoom={zoom}
+                          currentTime={currentTime}
+                          duration={duration}
+                          isPlaying={isPlaying}
+                          onAddPoint={(time, value) => {
+                            const newPoint = createAutomationPoint(time, value);
+                            const updatedLanes = track.automation.lanes.map((l) =>
+                              l.id === lane.id
+                                ? { ...l, points: [...l.points, newPoint].sort((a, b) => a.time - b.time) }
+                                : l
+                            );
+                            onUpdateTrack(track.id, {
+                              automation: { ...track.automation, lanes: updatedLanes },
+                            });
+                          }}
+                          onUpdatePoint={(pointId, updates) => {
+                            const updatedLanes = track.automation.lanes.map((l) =>
+                              l.id === lane.id
+                                ? {
+                                    ...l,
+                                    points: l.points.map((p) =>
+                                      p.id === pointId ? { ...p, ...updates } : p
+                                    ),
+                                  }
+                                : l
+                            );
+                            onUpdateTrack(track.id, {
+                              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 },
+                            });
+                          }}
+                          onUpdateLane={(updates) => {
+                            const updatedLanes = track.automation.lanes.map((l) =>
+                              l.id === lane.id ? { ...l, ...updates } : l
+                            );
+                            onUpdateTrack(track.id, {
+                              automation: { ...track.automation, lanes: updatedLanes },
+                            });
+                          }}
+                          onSeek={onSeek}
+                        />
                       ))}
                   </div>
+                )}
+
+                {/* Effects Section */}
+                <TrackExtensions
+                  track={track}
+                  onUpdateTrack={onUpdateTrack}
+                  onToggleEffect={(effectId) => {
+                    const updatedChain = {
+                      ...track.effectChain,
+                      effects: track.effectChain.effects.map((e) =>
+                        e.id === effectId ? { ...e, enabled: !e.enabled } : e
+                      ),
+                    };
+                    onUpdateTrack(track.id, { effectChain: updatedChain });
+                  }}
+                  onRemoveEffect={(effectId) => {
+                    const updatedChain = {
+                      ...track.effectChain,
+                      effects: track.effectChain.effects.filter((e) => e.id !== effectId),
+                    };
+                    onUpdateTrack(track.id, { effectChain: updatedChain });
+                  }}
+                  onUpdateEffect={(effectId, parameters) => {
+                    const updatedChain = {
+                      ...track.effectChain,
+                      effects: track.effectChain.effects.map((e) =>
+                        e.id === effectId ? { ...e, parameters } : e
+                      ),
+                    };
+                    onUpdateTrack(track.id, { effectChain: updatedChain });
+                  }}
+                  onAddEffect={(effectType) => {
+                    const newEffect = createEffect(
+                      effectType,
+                      EFFECT_NAMES[effectType]
+                    );
+                    const updatedChain = {
+                      ...track.effectChain,
+                      effects: [...track.effectChain.effects, newEffect],
+                    };
+                    onUpdateTrack(track.id, { effectChain: updatedChain });
+                  }}
+                />
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
       </div>
 
       {/* Import Dialog */}