Merge branch 'sequencer2'

Refines the sound placement logic in the sequencer to ensure sounds
are placed correctly within track boundaries. It restricts sound
placement to the track duration, preventing sounds from being placed
out of bounds.

Enhances the drag preview by visually indicating invalid placement
positions with a red border and "Invalid" label.

Also extracts duration and size formatting into separate utility functions
for better code organization.

src/App.tsx

@@ -13,6 +13,7 @@ import { PlaylistEditPage } from './pages/PlaylistEditPage'
 import { PlaylistsPage } from './pages/PlaylistsPage'
 import { RegisterPage } from './pages/RegisterPage'
 import { SchedulersPage } from './pages/SchedulersPage'
+import { SequencerPage } from './pages/SequencerPage'
 import { SoundsPage } from './pages/SoundsPage'
 import { SettingsPage } from './pages/admin/SettingsPage'
 import { UsersPage } from './pages/admin/UsersPage'
@@ -111,6 +112,14 @@ function AppRoutes() {
           </ProtectedRoute>
         }
       />
+      <Route
+        path="/sequencer"
+        element={
+          <ProtectedRoute>
+            <SequencerPage />
+          </ProtectedRoute>
+        }
+      />
       <Route
         path="/schedulers"
         element={

src/components/AppSidebar.tsx

@@ -15,6 +15,7 @@ import {
   PlayCircle,
   Settings,
   Users,
+  AudioLines,
 } from 'lucide-react'
 import { CreditsNav } from './nav/CreditsNav'
 import { NavGroup } from './nav/NavGroup'
@@ -48,6 +49,7 @@ export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
           <NavItem href="/" icon={Home} title="Dashboard" />
           <NavItem href="/sounds" icon={Music} title="Sounds" />
           <NavItem href="/playlists" icon={PlayCircle} title="Playlists" />
+          <NavItem href="/sequencer" icon={AudioLines} title="Sequencer" />
           <NavItem href="/extractions" icon={Download} title="Extractions" />
           <NavItem href="/schedulers" icon={CalendarClock} title="Schedulers" />
         </NavGroup>

src/components/schedulers/CreateTaskDialog.tsx

@@ -39,7 +39,7 @@ interface CreateTaskDialogProps {
 }
 
 const TASK_TYPES: TaskType[] = ['credit_recharge', 'play_sound', 'play_playlist']
-const RECURRENCE_TYPES: RecurrenceType[] = ['none', 'hourly', 'daily', 'weekly', 'monthly', 'yearly', 'cron']
+const RECURRENCE_TYPES: RecurrenceType[] = ['none', 'minutely', 'hourly', 'daily', 'weekly', 'monthly', 'yearly', 'cron']
 
 export function CreateTaskDialog({
   open,

src/components/schedulers/SchedulersTable.tsx

@@ -64,9 +64,9 @@ export function SchedulersTable({ tasks, onTaskUpdated, onTaskDeleted }: Schedul
       
       await schedulersService.cancelTask(task.id)
       onTaskDeleted?.(task.id)
-      toast.success('Task cancelled successfully')
+      toast.success('Task deleted successfully')
     } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to cancel task'
+      const message = error instanceof Error ? error.message : 'Failed to delete task'
       toast.error(message)
     } finally {
       setLoadingActions(prev => ({ ...prev, [task.id]: false }))
@@ -144,7 +144,7 @@ export function SchedulersTable({ tasks, onTaskUpdated, onTaskDeleted }: Schedul
                     className="text-destructive focus:text-destructive"
                   >
                     <Square className="h-4 w-4 mr-2" />
-                    Cancel Task
+                    Delete Task
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>

src/components/sequencer/SequencerCanvas.tsx

@@ -0,0 +1,406 @@
+import { useDroppable, useDraggable } from '@dnd-kit/core'
+import type { Track, PlacedSound } from '@/pages/SequencerPage'
+import { Button } from '@/components/ui/button'
+import { Trash2, Volume2 } from 'lucide-react'
+import { forwardRef, useRef, useEffect } from 'react'
+
+interface SequencerCanvasProps {
+  tracks: Track[]
+  duration: number
+  zoom: number
+  currentTime: number
+  isPlaying: boolean
+  onScroll?: () => void
+  draggedItem?: any // Current dragged item from parent
+  dragOverInfo?: {trackId: string, x: number} | null // Drag over position info
+  onRemoveSound: (soundId: string, trackId: string) => void
+  timeIntervals: {minorIntervals: number[], majorIntervals: number[], minorInterval: number, majorInterval: number}
+  onZoomChange?: (newZoom: number, mouseX?: number) => void
+  minZoom?: number
+  maxZoom?: number
+}
+
+interface TrackRowProps {
+  track: Track
+  duration: number
+  zoom: number
+  isPlaying: boolean
+  currentTime: number
+  draggedItem?: any // Current dragged item
+  dragOverInfo?: {trackId: string, x: number} | null // Drag over position info
+  onRemoveSound: (soundId: string, trackId: string) => void
+  timeIntervals: {minorIntervals: number[], majorIntervals: number[], minorInterval: number, majorInterval: number}
+}
+
+interface PlacedSoundItemProps {
+  sound: PlacedSound
+  zoom: number
+  trackId: string
+  onRemove: (soundId: string) => void
+}
+
+function PlacedSoundItem({ sound, zoom, trackId, onRemove }: PlacedSoundItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    isDragging,
+  } = useDraggable({
+    id: sound.id,
+    data: {
+      type: 'placed-sound',
+      ...sound,
+      trackId,
+    },
+  })
+
+  const style = transform ? {
+    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+  } : undefined
+
+  const width = (sound.duration / 1000) * zoom  // Convert ms to seconds for zoom calculation
+  // Ensure placed sounds are positioned at 100ms snapped locations
+  const startTimeSeconds = sound.startTime / 1000
+  const snapIntervalMs = 100 // 100ms snap interval
+  const snappedStartTime = Math.round((startTimeSeconds * 1000) / snapIntervalMs) * snapIntervalMs / 1000
+  const left = Math.max(0, snappedStartTime) * zoom
+
+  const formatTime = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60)
+    const secs = Math.floor(seconds % 60)
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        ...style,
+        position: 'absolute',
+        left: `${left}px`,
+        width: `${width}px`,
+        top: '8px',
+        bottom: '8px',
+      }}
+      {...listeners}
+      {...attributes}
+      className={`
+        bg-primary/20 border-2 border-primary/40 rounded
+        flex items-center justify-between px-2 text-xs
+        cursor-grab active:cursor-grabbing
+        hover:bg-primary/30 hover:border-primary/60
+        group transition-colors
+        ${isDragging ? 'opacity-50 z-10' : 'z-0'}
+      `}
+      title={`${sound.name} (${formatTime(sound.duration / 1000)})`}
+    >
+      <div className="flex items-center gap-1 min-w-0 flex-1">
+        <Volume2 className="h-3 w-3 flex-shrink-0 text-primary" />
+        <span className="truncate font-medium text-primary">
+          {sound.name}
+        </span>
+      </div>
+      
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={(e) => {
+          e.stopPropagation()
+          onRemove(sound.id)
+        }}
+        className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive hover:bg-destructive/10"
+        title="Remove sound"
+      >
+        <Trash2 className="h-3 w-3" />
+      </Button>
+    </div>
+  )
+}
+
+function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem, dragOverInfo, onRemoveSound, timeIntervals }: TrackRowProps) {
+  const playheadPosition = (currentTime / 1000) * zoom  // Convert ms to seconds for zoom calculation
+
+  const { isOver, setNodeRef: setDropRef } = useDroppable({
+    id: `track-${track.id}`,
+    data: {
+      type: 'track',
+      trackId: track.id,
+    },
+  })
+
+  const handleRemoveSound = (soundId: string) => {
+    onRemoveSound(soundId, track.id)
+  }
+
+  const { minorIntervals, majorIntervals } = timeIntervals
+
+  return (
+    <div className="relative" style={{ height: '80px' }}>
+      <div
+        ref={setDropRef}
+        id={`track-${track.id}`}
+        className={`
+          h-full border-b border-border/50
+          relative overflow-hidden
+          ${isOver ? 'bg-accent/30' : 'bg-muted/10'}
+          transition-colors
+        `}
+      >
+        {/* Grid lines for time markers */}
+        <div className="absolute inset-0 pointer-events-none">
+          {/* Minor grid lines */}
+          {minorIntervals.map((time) => (
+            <div
+              key={`minor-${time}`}
+              className="absolute top-0 bottom-0 w-px bg-border/30"
+              style={{ left: `${time * zoom}px` }}
+            />
+          ))}
+          {/* Major grid lines */}
+          {majorIntervals.map((time) => (
+            <div
+              key={`major-${time}`}
+              className="absolute top-0 bottom-0 w-px bg-border/60"
+              style={{ left: `${time * zoom}px` }}
+            />
+          ))}
+        </div>
+
+        {/* Precise drag preview (dragOverInfo.x is already snapped) */}
+        {draggedItem && dragOverInfo && dragOverInfo.trackId === track.id && (() => {
+          const soundDurationMs = draggedItem.type === 'sound' 
+            ? draggedItem.sound.duration  // Already in ms
+            : draggedItem.duration         // Already in ms
+          const soundDurationSeconds = soundDurationMs / 1000
+          
+          // dragOverInfo.x is already snapped in the parent component
+          const startTimeSeconds = dragOverInfo.x / zoom
+          const endTimeSeconds = startTimeSeconds + soundDurationSeconds
+          const durationSeconds = duration / 1000
+          const isValidPosition = startTimeSeconds >= 0 && endTimeSeconds <= durationSeconds
+          
+          return (
+            <div
+              className={`absolute top-2 bottom-2 border-2 border-dashed rounded pointer-events-none z-10 flex items-center px-2 ${
+                isValidPosition 
+                  ? 'border-primary/60 bg-primary/10' 
+                  : 'border-red-500/60 bg-red-500/10'
+              }`}
+              style={{
+                left: `${Math.max(0, dragOverInfo.x)}px`,
+                width: `${Math.max(60, soundDurationSeconds * zoom)}px`,
+              }}
+            >
+              <div className={`text-xs truncate font-medium ${
+                isValidPosition ? 'text-primary/80' : 'text-red-500/80'
+              }`}>
+                {draggedItem.type === 'sound' 
+                  ? (draggedItem.sound.name || draggedItem.sound.filename)
+                  : draggedItem.name
+                }
+                {!isValidPosition && ' (Invalid)'}
+              </div>
+            </div>
+          )
+        })()}
+
+        {/* Playhead */}
+        {isPlaying && (
+          <div
+            className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-none z-30"
+            style={{ left: `${playheadPosition}px` }}
+          />
+        )}
+
+        {/* Placed sounds */}
+        {track.sounds.map((sound) => (
+          <PlacedSoundItem
+            key={sound.id}
+            sound={sound}
+            zoom={zoom}
+            trackId={track.id}
+            onRemove={handleRemoveSound}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(({
+  tracks,
+  duration,
+  zoom,
+  currentTime,
+  isPlaying,
+  onScroll,
+  draggedItem,
+  dragOverInfo,
+  onRemoveSound,
+  timeIntervals,
+  onZoomChange,
+  minZoom = 10,
+  maxZoom = 200,
+}, ref) => {
+  const totalWidth = (duration / 1000) * zoom  // Convert ms to seconds for zoom calculation
+  const timelineRef = useRef<HTMLDivElement>(null)
+  
+  // Add a fallback droppable for the entire canvas area
+  const { setNodeRef: setCanvasDropRef } = useDroppable({
+    id: 'sequencer-canvas',
+    data: {
+      type: 'canvas',
+    },
+  })
+
+  const { minorIntervals, majorIntervals } = timeIntervals
+
+  const handleTracksScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    // Sync timeline horizontal scroll with tracks
+    if (timelineRef.current) {
+      const scrollLeft = e.currentTarget.scrollLeft
+      // Only update if different to prevent scroll fighting
+      if (Math.abs(timelineRef.current.scrollLeft - scrollLeft) > 1) {
+        timelineRef.current.scrollLeft = scrollLeft
+      }
+    }
+    // Call the original scroll handler for vertical sync
+    onScroll?.()
+  }
+
+  // Handle mouse wheel zoom with Ctrl key using native event listeners
+  useEffect(() => {
+    if (!onZoomChange) return
+
+    const handleWheel = (e: WheelEvent) => {
+      if (!e.ctrlKey) return
+      
+      e.preventDefault()
+      e.stopPropagation()
+      
+      // Use the same discrete steps as the zoom buttons (+5/-5)
+      const zoomStep = 5
+      const delta = e.deltaY > 0 ? -zoomStep : zoomStep // Inverted for natural feel
+      const newZoom = Math.min(Math.max(zoom + delta, minZoom), maxZoom)
+      
+      if (newZoom !== zoom) {
+        // Get mouse position relative to the scrollable content
+        const target = e.target as HTMLElement
+        const scrollContainer = target.closest('[data-scroll-container]') as HTMLElement
+        if (scrollContainer) {
+          const rect = scrollContainer.getBoundingClientRect()
+          const mouseX = e.clientX - rect.left + scrollContainer.scrollLeft
+          onZoomChange(newZoom, mouseX)
+        }
+      }
+    }
+
+    // Add wheel event listeners to both timeline and tracks
+    const timelineElement = timelineRef.current
+    const tracksElement = ref && typeof ref === 'object' && ref.current ? ref.current : null
+
+    if (timelineElement) {
+      timelineElement.addEventListener('wheel', handleWheel, { passive: false })
+    }
+    if (tracksElement) {
+      tracksElement.addEventListener('wheel', handleWheel, { passive: false })
+    }
+
+    return () => {
+      if (timelineElement) {
+        timelineElement.removeEventListener('wheel', handleWheel)
+      }
+      if (tracksElement) {
+        tracksElement.removeEventListener('wheel', handleWheel)
+      }
+    }
+  }, [onZoomChange, zoom, minZoom, maxZoom, ref])
+
+  return (
+    <div ref={setCanvasDropRef} className="h-full flex flex-col overflow-hidden">
+      {/* Time ruler */}
+      <div className="h-8 bg-muted/50 border-b border-border/50 flex-shrink-0 overflow-hidden">
+        <div
+          ref={timelineRef}
+          className="h-full overflow-x-auto [&::-webkit-scrollbar]:hidden"
+          style={{ 
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none'
+          }}
+          data-scroll-container
+        >
+          <div className="relative h-full" style={{ width: `${totalWidth}px` }}>
+            {/* Minor time markers */}
+            {minorIntervals.map((time) => (
+              <div key={`ruler-minor-${time}`} className="absolute top-0 bottom-0" style={{ left: `${time * zoom}px` }}>
+                <div className="absolute top-0 w-px h-2 bg-border/40" />
+              </div>
+            ))}
+            
+            {/* Major time markers with labels */}
+            {majorIntervals.map((time) => {
+              const formatTime = (seconds: number): string => {
+                if (seconds < 60) {
+                  // For times under 1 minute, show seconds with decimal places if needed
+                  return seconds < 10 && seconds % 1 !== 0 
+                    ? seconds.toFixed(1) + 's'
+                    : Math.floor(seconds) + 's'
+                } else {
+                  // For times over 1 minute, show MM:SS format
+                  const mins = Math.floor(seconds / 60)
+                  const secs = Math.floor(seconds % 60)
+                  return `${mins}:${secs.toString().padStart(2, '0')}`
+                }
+              }
+
+              return (
+                <div key={`ruler-major-${time}`} className="absolute top-0 bottom-0" style={{ left: `${time * zoom}px` }}>
+                  <div className="absolute top-0 w-px h-3 bg-border/60" />
+                  <div className="absolute top-4 text-xs text-muted-foreground font-mono whitespace-nowrap">
+                    {formatTime(time)}
+                  </div>
+                </div>
+              )
+            })}
+            
+            {/* Playhead in ruler */}
+            {isPlaying && (
+              <div
+                className="absolute top-0 bottom-0 w-0.5 bg-red-500 z-30"
+                style={{ left: `${(currentTime / 1000) * zoom}px` }}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Tracks */}
+      <div 
+        ref={ref}
+        className="flex-1 overflow-auto"
+        onScroll={handleTracksScroll}
+        data-scroll-container
+      >
+        <div style={{ width: `${totalWidth}px`, paddingBottom: '52px' }}>
+          {tracks.map((track) => (
+            <TrackRow
+              key={track.id}
+              track={track}
+              duration={duration}
+              zoom={zoom}
+              isPlaying={isPlaying}
+              currentTime={currentTime}
+              draggedItem={draggedItem}
+              dragOverInfo={dragOverInfo}
+              onRemoveSound={onRemoveSound}
+              timeIntervals={timeIntervals}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+})
+
+SequencerCanvas.displayName = 'SequencerCanvas'

src/components/sequencer/SoundLibrary.tsx

@@ -0,0 +1,262 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useDraggable } from '@dnd-kit/core'
+import { soundsService, type Sound } from '@/lib/api/services/sounds'
+import { 
+  AlertCircle, 
+  Music, 
+  RefreshCw, 
+  Search, 
+  Volume2,
+  X 
+} from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import { formatDuration } from '@/utils/format-duration'
+import { formatSize } from '@/utils/format-size'
+
+interface DraggableSoundProps {
+  sound: Sound
+}
+
+function DraggableSound({ sound }: DraggableSoundProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging,
+  } = useDraggable({
+    id: `sound-${sound.id}`,
+    data: {
+      type: 'sound',
+      sound,
+    },
+  })
+
+  // Don't apply transform to prevent layout shift - DragOverlay handles the visual feedback
+  const style = undefined
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...listeners}
+      {...attributes}
+      className={`
+        group cursor-grab active:cursor-grabbing
+        p-3 border rounded-lg bg-card hover:bg-accent/50 transition-colors
+        ${isDragging ? 'opacity-30' : ''}
+      `}
+      title={`Drag to add "${sound.name || sound.filename}" to a track`}
+    >
+      <div className="flex items-start gap-2">
+        <div className="flex-shrink-0 mt-0.5">
+          {sound.type === 'SDB' && <Volume2 className="h-4 w-4 text-blue-500" />}
+          {sound.type === 'TTS' && <span className="text-xs font-bold text-green-500">TTS</span>}
+          {sound.type === 'EXT' && <Music className="h-4 w-4 text-purple-500" />}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="font-medium text-sm break-words">
+            {sound.name || sound.filename}
+          </div>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground mt-1">
+            <span>{formatDuration(sound.duration)}</span>
+            <span>•</span>
+            <span>{formatSize(sound.size)}</span>
+            {sound.play_count > 0 && (
+              <>
+                <span>•</span>
+                <span>{sound.play_count} plays</span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function SoundLibrary() {
+  const [sounds, setSounds] = useState<Sound[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [soundType, setSoundType] = useState<'all' | 'SDB' | 'TTS' | 'EXT'>('all')
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('')
+
+  // Debounce search query
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchQuery(searchQuery)
+    }, 300)
+
+    return () => clearTimeout(handler)
+  }, [searchQuery])
+
+  const fetchSounds = useCallback(async () => {
+    try {
+      setLoading(true)
+      setError(null)
+
+      // Build API params
+      const params: { types?: string[]; search?: string } = {}
+      
+      // Filter by type
+      if (soundType !== 'all') {
+        params.types = [soundType]
+      }
+
+      // Filter by search query
+      if (debouncedSearchQuery.trim()) {
+        params.search = debouncedSearchQuery.trim()
+      }
+
+      const fetchedSounds = await soundsService.getSounds(params)
+      setSounds(fetchedSounds)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch sounds'
+      setError(errorMessage)
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }, [debouncedSearchQuery, soundType])
+
+  useEffect(() => {
+    fetchSounds()
+  }, [fetchSounds])
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <div className="space-y-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="space-y-2">
+              <Skeleton className="h-16 w-full rounded-lg" />
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    if (error) {
+      return (
+        <div className="flex flex-col items-center justify-center py-8 text-center">
+          <AlertCircle className="h-8 w-8 text-muted-foreground mb-3" />
+          <h3 className="font-semibold mb-2">Failed to load sounds</h3>
+          <p className="text-sm text-muted-foreground mb-4">{error}</p>
+          <Button variant="outline" size="sm" onClick={fetchSounds}>
+            Try again
+          </Button>
+        </div>
+      )
+    }
+
+    if (sounds.length === 0) {
+      return (
+        <div className="flex flex-col items-center justify-center py-8 text-center">
+          <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mb-4">
+            <Music className="h-6 w-6 text-muted-foreground" />
+          </div>
+          <h3 className="font-semibold mb-2">No sounds found</h3>
+          <p className="text-sm text-muted-foreground">
+            {searchQuery
+              ? `No sounds match "${searchQuery}"`
+              : 'No sounds available in your library'}
+          </p>
+        </div>
+      )
+    }
+
+    return (
+      <ScrollArea className="h-full">
+        <div className="space-y-2">
+          {sounds.map((sound) => (
+            <DraggableSound key={sound.id} sound={sound} />
+          ))}
+        </div>
+      </ScrollArea>
+    )
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="pb-4 border-b">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="font-semibold">Sound Library</h3>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={fetchSounds}
+            disabled={loading}
+            className="h-8 w-8 p-0"
+          >
+            <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+          </Button>
+        </div>
+
+        {/* Search */}
+        <div className="relative mb-3">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search sounds..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9 pr-9 h-9"
+          />
+          {searchQuery && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setSearchQuery('')}
+              className="absolute right-1 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0"
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          )}
+        </div>
+
+        {/* Type Filter */}
+        <Select
+          value={soundType}
+          onValueChange={(value: 'all' | 'SDB' | 'TTS' | 'EXT') => setSoundType(value)}
+        >
+          <SelectTrigger className="h-9">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Types</SelectItem>
+            <SelectItem value="SDB">Soundboard (SDB)</SelectItem>
+            <SelectItem value="TTS">Text-to-Speech (TTS)</SelectItem>
+            <SelectItem value="EXT">Extracted (EXT)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 pt-4 min-h-0">
+        {renderContent()}
+      </div>
+
+      {/* Footer */}
+      {!loading && !error && (
+        <div className="pt-3 border-t">
+          <div className="text-xs text-muted-foreground text-center">
+            {sounds.length} sound{sounds.length !== 1 ? 's' : ''}
+            {searchQuery && ` matching "${searchQuery}"`}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/sequencer/TimelineControls.tsx

@@ -0,0 +1,157 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Slider } from '@/components/ui/slider'
+import { Minus, Plus, ZoomIn, ZoomOut } from 'lucide-react'
+import { useState } from 'react'
+
+interface TimelineControlsProps {
+  duration: number // in milliseconds
+  zoom: number
+  onDurationChange: (duration: number) => void // expects milliseconds
+  onZoomChange: (zoom: number) => void
+  minZoom: number
+  maxZoom: number
+}
+
+export function TimelineControls({
+  duration,
+  zoom,
+  onDurationChange,
+  onZoomChange,
+  minZoom,
+  maxZoom,
+}: TimelineControlsProps) {
+  const durationInSeconds = duration / 1000
+  const [durationInput, setDurationInput] = useState(durationInSeconds.toString())
+
+  const handleDurationInputChange = (value: string) => {
+    setDurationInput(value)
+    const numValue = parseFloat(value)
+    if (!isNaN(numValue) && numValue > 0 && numValue <= 600) { // Max 10 minutes
+      onDurationChange(numValue * 1000) // Convert to milliseconds
+    }
+  }
+
+  const handleDurationInputBlur = () => {
+    const numValue = parseFloat(durationInput)
+    if (isNaN(numValue) || numValue <= 0) {
+      setDurationInput(durationInSeconds.toString())
+    }
+  }
+
+  const increaseDuration = () => {
+    const newDurationSeconds = Math.min(600, durationInSeconds + 10)
+    onDurationChange(newDurationSeconds * 1000) // Convert to milliseconds
+    setDurationInput(newDurationSeconds.toString())
+  }
+
+  const decreaseDuration = () => {
+    const newDurationSeconds = Math.max(5, durationInSeconds - 10)
+    onDurationChange(newDurationSeconds * 1000) // Convert to milliseconds
+    setDurationInput(newDurationSeconds.toString())
+  }
+
+  const increaseZoom = () => {
+    onZoomChange(Math.min(maxZoom, zoom + 5))
+  }
+
+  const decreaseZoom = () => {
+    onZoomChange(Math.max(minZoom, zoom - 5))
+  }
+
+  const formatTime = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60)
+    const secs = Math.floor(seconds % 60)
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+  }
+
+  return (
+    <div className="flex items-center gap-6">
+      {/* Duration Controls */}
+      <div className="flex items-center gap-2">
+        <Label htmlFor="duration" className="text-sm font-medium whitespace-nowrap">
+          Duration:
+        </Label>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={decreaseDuration}
+            className="h-8 w-8 p-0"
+          >
+            <Minus className="h-3 w-3" />
+          </Button>
+          <Input
+            id="duration"
+            type="number"
+            min="10"
+            max="600"
+            step="0.1"
+            value={durationInput}
+            onChange={(e) => handleDurationInputChange(e.target.value)}
+            onBlur={handleDurationInputBlur}
+            className="h-8 w-16 text-center"
+          />
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={increaseDuration}
+            className="h-8 w-8 p-0"
+          >
+            <Plus className="h-3 w-3" />
+          </Button>
+        </div>
+        <span className="text-sm text-muted-foreground">
+          seconds ({formatTime(duration / 1000)})
+        </span>
+      </div>
+
+      {/* Zoom Controls */}
+      <div className="flex items-center gap-2">
+        <Label htmlFor="zoom" className="text-sm font-medium whitespace-nowrap">
+          Zoom:
+        </Label>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={decreaseZoom}
+            className="h-8 w-8 p-0"
+          >
+            <ZoomOut className="h-3 w-3" />
+          </Button>
+          <div className="w-32">
+            <Slider
+              id="zoom"
+              min={minZoom}
+              max={maxZoom}
+              step={5}
+              value={[zoom]}
+              onValueChange={([value]) => onZoomChange(value)}
+              className="w-full"
+            />
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={increaseZoom}
+            className="h-8 w-8 p-0"
+          >
+            <ZoomIn className="h-3 w-3" />
+          </Button>
+        </div>
+        <span className="text-sm text-muted-foreground">
+          {zoom}px/s
+        </span>
+      </div>
+
+      {/* Timeline Info */}
+      <div className="flex items-center gap-4 ml-auto text-sm text-muted-foreground">
+        <div>
+          Total width: {Math.round((duration / 1000) * zoom)}px
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/sequencer/TrackControls.tsx

@@ -0,0 +1,124 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import type { Track } from '@/pages/SequencerPage'
+import { Plus, Trash2 } from 'lucide-react'
+import { useState, forwardRef } from 'react'
+
+interface TrackControlsProps {
+  tracks: Track[]
+  onAddTrack: () => void
+  onRemoveTrack: (trackId: string) => void
+  onUpdateTrackName: (trackId: string, name: string) => void
+  onScroll?: () => void
+}
+
+export const TrackControls = forwardRef<HTMLDivElement, TrackControlsProps>(({
+  tracks,
+  onAddTrack,
+  onRemoveTrack,
+  onUpdateTrackName,
+  onScroll,
+}, ref) => {
+  const [editingTrackId, setEditingTrackId] = useState<string | null>(null)
+  const [editingName, setEditingName] = useState('')
+
+  const handleStartEditing = (track: Track) => {
+    setEditingTrackId(track.id)
+    setEditingName(track.name)
+  }
+
+  const handleFinishEditing = () => {
+    if (editingTrackId && editingName.trim()) {
+      onUpdateTrackName(editingTrackId, editingName.trim())
+    }
+    setEditingTrackId(null)
+    setEditingName('')
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleFinishEditing()
+    } else if (e.key === 'Escape') {
+      setEditingTrackId(null)
+      setEditingName('')
+    }
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header - matches time ruler height of h-8 (32px) */}
+      <div className="h-8 px-3 border-b bg-muted/50 flex items-center justify-between flex-shrink-0">
+        <h3 className="text-sm font-medium">Tracks</h3>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onAddTrack}
+          className="h-6 w-6 p-0"
+        >
+          <Plus className="h-3 w-3" />
+        </Button>
+      </div>
+
+      {/* Track List */}
+      <div 
+        ref={ref}
+        className="flex-1 overflow-y-auto [&::-webkit-scrollbar]:hidden"
+        onScroll={onScroll}
+        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', paddingBottom: '52px' }}
+      >
+        {tracks.map((track) => (
+          <div
+            key={track.id}
+            className="flex items-center justify-between p-3 border-b hover:bg-muted/30 group"
+            style={{ height: '80px' }} // Match track height in canvas
+          >
+            <div className="flex-1 min-w-0">
+              {editingTrackId === track.id ? (
+                <Input
+                  value={editingName}
+                  onChange={(e) => setEditingName(e.target.value)}
+                  onBlur={handleFinishEditing}
+                  onKeyDown={handleKeyDown}
+                  className="h-8 text-sm"
+                  autoFocus
+                />
+              ) : (
+                <div
+                  className="text-sm font-medium truncate cursor-pointer hover:bg-muted/50 p-1 rounded"
+                  onClick={() => handleStartEditing(track)}
+                  title={`Click to rename track: ${track.name}`}
+                >
+                  {track.name}
+                </div>
+              )}
+              <div className="text-xs text-muted-foreground mt-1">
+                {track.sounds.length} sound{track.sounds.length !== 1 ? 's' : ''}
+              </div>
+            </div>
+            
+            {tracks.length > 1 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onRemoveTrack(track.id)}
+                className="h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive"
+                title="Remove track"
+              >
+                <Trash2 className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Footer */}
+      <div className="p-3 border-t bg-muted/50">
+        <div className="text-xs text-muted-foreground text-center">
+          {tracks.length} track{tracks.length !== 1 ? 's' : ''}
+        </div>
+      </div>
+    </div>
+  )
+})
+
+TrackControls.displayName = 'TrackControls'

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

src/lib/api/services/schedulers.ts

@@ -6,7 +6,7 @@ export type TaskType = 'credit_recharge' | 'play_sound' | 'play_playlist'
 
 export type TaskStatus = 'pending' | 'running' | 'completed' | 'failed' | 'cancelled'
 
-export type RecurrenceType = 'none' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'cron'
+export type RecurrenceType = 'none' | 'minutely' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'cron'
 
 // Task interfaces
 export interface ScheduledTask {
@@ -166,6 +166,8 @@ export function getRecurrenceTypeLabel(recurrenceType: RecurrenceType): string {
   switch (recurrenceType) {
     case 'none':
       return 'None'
+    case 'minutely':
+      return 'Minutely'
     case 'hourly':
       return 'Hourly'
     case 'daily':

src/pages/SequencerPage.tsx

@@ -0,0 +1,489 @@
+import { TrackControls } from '@/components/sequencer/TrackControls'
+import { TimelineControls } from '@/components/sequencer/TimelineControls'
+import { SoundLibrary } from '@/components/sequencer/SoundLibrary'
+import { SequencerCanvas } from '@/components/sequencer/SequencerCanvas'
+import { DndContext, DragOverlay, type DragEndEvent, type DragStartEvent, PointerSensor, useSensors, useSensor } from '@dnd-kit/core'
+import { useState, useRef, useCallback, useEffect } from 'react'
+
+export interface Track {
+  id: string
+  name: string
+  sounds: PlacedSound[]
+}
+
+export interface PlacedSound {
+  id: string
+  soundId: number
+  name: string
+  duration: number // in milliseconds
+  startTime: number // in milliseconds
+  trackId: string
+}
+
+interface SequencerState {
+  tracks: Track[]
+  duration: number // in milliseconds
+  zoom: number // pixels per second
+  currentTime: number // in milliseconds
+  isPlaying: boolean
+}
+
+const INITIAL_DURATION = 30000 // 30 seconds in milliseconds
+const INITIAL_ZOOM = 40 // 40 pixels per second
+const MIN_ZOOM = 5
+const MAX_ZOOM = 200
+
+export function SequencerPage() {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  )
+
+  const [state, setState] = useState<SequencerState>({
+    tracks: [
+      {
+        id: 'track-1',
+        name: 'Track 1',
+        sounds: [],
+      },
+    ],
+    duration: INITIAL_DURATION,
+    zoom: INITIAL_ZOOM,
+    currentTime: 0,
+    isPlaying: false,
+  })
+
+  const [draggedItem, setDraggedItem] = useState<any>(null)
+  const [dragOverInfo, setDragOverInfo] = useState<{trackId: string, x: number} | null>(null)
+  const [currentMousePos, setCurrentMousePos] = useState<{x: number, y: number} | null>(null)
+  
+  const trackControlsRef = useRef<HTMLDivElement>(null)
+  const sequencerCanvasRef = useRef<HTMLDivElement>(null)
+
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    setDraggedItem(event.active.data.current)
+    
+    // Start tracking mouse position globally
+    const handleMouseMove = (e: MouseEvent) => {
+      setCurrentMousePos({ x: e.clientX, y: e.clientY })
+    }
+    
+    document.addEventListener('mousemove', handleMouseMove)
+    
+    // Store cleanup function
+    ;(window as any).dragMouseCleanup = () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [])
+
+  // Calculate logical time intervals based on zoom level (shared with SequencerCanvas)
+  const getTimeIntervals = useCallback((zoom: number, duration: number) => {
+    const durationSeconds = duration / 1000
+    const minorIntervals: number[] = []
+    const majorIntervals: number[] = []
+    
+    // Define logical interval progressions
+    const intervalSets = [
+      { minor: 0.1, major: 1 },    // 0.1s minor, 1s major (mega zoomed in)
+      { minor: 1, major: 5 },      // 1s minor, 5s major (very zoomed in)
+      { minor: 5, major: 30 },     // 5s minor, 30s major 
+      { minor: 10, major: 60 },    // 10s minor, 1min major
+      { minor: 30, major: 300 },   // 30s minor, 5min major
+      { minor: 60, major: 600 },   // 1min minor, 10min major
+      { minor: 300, major: 1800 }, // 5min minor, 30min major
+      { minor: 600, major: 3600 }  // 10min minor, 1h major
+    ]
+    
+    // Find appropriate interval set based on zoom level
+    // We want major intervals to be roughly 100-200px apart
+    const targetMajorSpacing = 150
+    
+    let selectedIntervals = intervalSets[intervalSets.length - 1] // fallback to largest
+    for (const intervals of intervalSets) {
+      if (intervals.major * zoom >= targetMajorSpacing) {
+        selectedIntervals = intervals
+        break
+      }
+    }
+    
+    // Generate minor intervals (every interval)
+    for (let i = 0; i * selectedIntervals.minor <= durationSeconds; i++) {
+      const time = i * selectedIntervals.minor
+      minorIntervals.push(time)
+    }
+    
+    // Generate major intervals (at major boundaries)
+    for (let i = 0; i * selectedIntervals.major <= durationSeconds; i++) {
+      const time = i * selectedIntervals.major
+      majorIntervals.push(time)
+    }
+    
+    return { minorIntervals, majorIntervals, minorInterval: selectedIntervals.minor, majorInterval: selectedIntervals.major }
+  }, [])
+
+  // Helper function to snap time to 100ms intervals
+  const snapToGrid = useCallback((timeInSeconds: number): number => {
+    const snapIntervalMs = 100 // 100ms snap interval
+    const timeInMs = Math.max(0, timeInSeconds * 1000) // Ensure non-negative
+    const snappedMs = Math.round(timeInMs / snapIntervalMs) * snapIntervalMs
+    return Math.max(0, snappedMs / 1000) // Convert back to seconds, ensure non-negative
+  }, [])
+
+  // Update drag over info based on current mouse position and over target
+  useEffect(() => {
+    if (draggedItem && currentMousePos && (draggedItem.type === 'sound' || draggedItem.type === 'placed-sound')) {
+      // Find which track the mouse is currently over
+      for (const track of state.tracks) {
+        const trackElement = document.getElementById(`track-${track.id}`)
+        if (trackElement) {
+          const rect = trackElement.getBoundingClientRect()
+          if (
+            currentMousePos.x >= rect.left &&
+            currentMousePos.x <= rect.right &&
+            currentMousePos.y >= rect.top &&
+            currentMousePos.y <= rect.bottom
+          ) {
+            const rawX = currentMousePos.x - rect.left
+            // Apply 100ms snapping to the drag over position
+            const rawTimeSeconds = rawX / state.zoom
+            const snappedTimeSeconds = snapToGrid(rawTimeSeconds)
+            const snappedX = snappedTimeSeconds * state.zoom
+            setDragOverInfo({ trackId: track.id, x: Math.max(0, snappedX) })
+            return
+          }
+        }
+      }
+      // Mouse is not over any track
+      setDragOverInfo(null)
+    } else {
+      setDragOverInfo(null)
+    }
+  }, [draggedItem, currentMousePos, state.tracks, state.zoom, snapToGrid])
+
+  const handleDragEnd = useCallback((event: DragEndEvent) => {
+    const { active, over } = event
+    const dragData = active.data.current
+    const overData = over?.data.current
+
+    // Handle sound drop from library to track
+    if (dragData?.type === 'sound' && overData?.type === 'track') {
+      // Use precise drop position if available (dragOverInfo.x is already snapped)
+      let startTime = 0
+      if (dragOverInfo && dragOverInfo.trackId === overData.trackId) {
+        startTime = Math.max(0, (dragOverInfo.x / state.zoom) * 1000) // Convert to milliseconds
+      }
+
+      const soundDuration = dragData.sound.duration // Already in milliseconds
+      
+      // Restrict placement to within track duration (all in milliseconds)
+      const maxStartTime = Math.max(0, state.duration - soundDuration)
+      startTime = Math.min(startTime, maxStartTime)
+
+      // Only proceed if the sound can fit within the track
+      if (startTime >= 0 && startTime + soundDuration <= state.duration) {
+        const newPlacedSound: PlacedSound = {
+          id: `placed-${Date.now()}-${Math.random()}`,
+          soundId: dragData.sound.id,
+          name: dragData.sound.name || dragData.sound.filename,
+          duration: soundDuration,
+          startTime,
+          trackId: overData.trackId,
+        }
+
+        setState(prev => ({
+          ...prev,
+          tracks: prev.tracks.map(track =>
+            track.id === overData.trackId
+              ? { ...track, sounds: [...track.sounds, newPlacedSound] }
+              : track
+          ),
+        }))
+      }
+    }
+
+    // Handle moving placed sounds within tracks
+    if (dragData?.type === 'placed-sound' && overData?.type === 'track') {
+      // Use precise drop position if available (dragOverInfo.x is already snapped)
+      let startTime = dragData.startTime || 0
+      if (dragOverInfo && dragOverInfo.trackId === overData.trackId) {
+        startTime = Math.max(0, (dragOverInfo.x / state.zoom) * 1000) // Convert to milliseconds
+      }
+
+      // Restrict placement to within track duration (all in milliseconds)
+      const maxStartTime = Math.max(0, state.duration - dragData.duration)
+      startTime = Math.min(startTime, maxStartTime)
+
+      // Only proceed if the sound can fit within the track
+      if (startTime >= 0 && startTime + dragData.duration <= state.duration) {
+        const sourceTrackId = dragData.trackId
+        const targetTrackId = overData.trackId
+
+        setState(prev => ({
+          ...prev,
+          tracks: prev.tracks.map(track => {
+            if (track.id === sourceTrackId && sourceTrackId === targetTrackId) {
+              // Moving within the same track - just update position
+              const updatedSound: PlacedSound = {
+                id: dragData.id,
+                soundId: dragData.soundId,
+                name: dragData.name,
+                duration: dragData.duration,
+                startTime,
+                trackId: targetTrackId,
+              }
+              return {
+                ...track,
+                sounds: track.sounds.map(s => 
+                  s.id === dragData.id ? updatedSound : s
+                ),
+              }
+            } else if (track.id === sourceTrackId) {
+              // Remove from source track (different track move)
+              return {
+                ...track,
+                sounds: track.sounds.filter(s => s.id !== dragData.id),
+              }
+            } else if (track.id === targetTrackId) {
+              // Add to target track (different track move)
+              const updatedSound: PlacedSound = {
+                id: dragData.id,
+                soundId: dragData.soundId,
+                name: dragData.name,
+                duration: dragData.duration,
+                startTime,
+                trackId: targetTrackId,
+              }
+              return {
+                ...track,
+                sounds: [...track.sounds, updatedSound],
+              }
+            }
+            return track
+          }),
+        }))
+      }
+    }
+    
+    // Clear state
+    setDraggedItem(null)
+    setDragOverInfo(null)
+    setCurrentMousePos(null)
+    
+    // Clean up mouse tracking
+    if ((window as any).dragMouseCleanup) {
+      (window as any).dragMouseCleanup()
+      delete (window as any).dragMouseCleanup
+    }
+  }, [dragOverInfo, state.zoom])
+
+  const handleAddTrack = () => {
+    const newTrackNumber = state.tracks.length + 1
+    const newTrack: Track = {
+      id: `track-${Date.now()}`,
+      name: `Track ${newTrackNumber}`,
+      sounds: [],
+    }
+    setState(prev => ({ ...prev, tracks: [...prev.tracks, newTrack] }))
+  }
+
+  const handleRemoveTrack = (trackId: string) => {
+    setState(prev => ({
+      ...prev,
+      tracks: prev.tracks.filter(track => track.id !== trackId),
+    }))
+  }
+
+  const handleUpdateTrackName = (trackId: string, name: string) => {
+    setState(prev => ({
+      ...prev,
+      tracks: prev.tracks.map(track =>
+        track.id === trackId ? { ...track, name } : track
+      ),
+    }))
+  }
+
+  // const handlePlay = () => {
+  //   setState(prev => ({ ...prev, isPlaying: !prev.isPlaying }))
+  // }
+
+  // const handleStop = () => {
+  //   setState(prev => ({ ...prev, isPlaying: false, currentTime: 0 }))
+  // }
+
+  // const handleReset = () => {
+  //   setState(prev => ({ ...prev, currentTime: 0 }))
+  // }
+
+  const handleZoomChange = (value: number) => {
+    setState(prev => ({ ...prev, zoom: value }))
+  }
+
+  // Handle mouse wheel zoom with position centering
+  const handleZoomChangeWithPosition = (newZoom: number, mouseX?: number) => {
+    if (mouseX !== undefined && sequencerCanvasRef.current) {
+      const oldZoom = state.zoom
+      const currentScrollLeft = sequencerCanvasRef.current.scrollLeft
+      
+      // Calculate the time position that the mouse is pointing at
+      const timeAtMouse = (currentScrollLeft + mouseX) / oldZoom
+      
+      // Calculate what the new scroll position should be to keep the same time under the mouse
+      const newScrollLeft = timeAtMouse * newZoom - mouseX
+      
+      setState(prev => ({ ...prev, zoom: newZoom }))
+      
+      // Apply the new scroll position after the zoom change
+      requestAnimationFrame(() => {
+        if (sequencerCanvasRef.current) {
+          sequencerCanvasRef.current.scrollLeft = Math.max(0, newScrollLeft)
+        }
+      })
+    } else {
+      setState(prev => ({ ...prev, zoom: newZoom }))
+    }
+  }
+
+  const handleDurationChange = (duration: number) => {
+    setState(prev => ({ ...prev, duration }))
+  }
+
+  const handleRemoveSound = (soundId: string, trackId: string) => {
+    setState(prev => ({
+      ...prev,
+      tracks: prev.tracks.map(track =>
+        track.id === trackId
+          ? { ...track, sounds: track.sounds.filter(sound => sound.id !== soundId) }
+          : track
+      ),
+    }))
+  }
+
+  const handleVerticalScroll = useCallback(() => {
+    if (trackControlsRef.current && sequencerCanvasRef.current) {
+      const canvasScrollTop = sequencerCanvasRef.current.scrollTop
+      if (Math.abs(trackControlsRef.current.scrollTop - canvasScrollTop) > 1) {
+        trackControlsRef.current.scrollTop = canvasScrollTop
+      }
+    }
+  }, [])
+
+  // Simple playhead animation
+  useEffect(() => {
+    if (state.isPlaying) {
+      const interval = setInterval(() => {
+        setState(prev => {
+          const newTime = prev.currentTime + 100 // Add 100ms every 100ms
+          if (newTime >= prev.duration) {
+            return { ...prev, currentTime: prev.duration, isPlaying: false }
+          }
+          return { ...prev, currentTime: newTime }
+        })
+      }, 100)
+      return () => clearInterval(interval)
+    }
+  }, [state.isPlaying, state.duration])
+
+  return (
+    <div className="h-screen w-screen flex flex-col overflow-hidden">
+      {/* Simple Header */}
+      <div className="h-12 bg-background border-b flex items-center px-4 flex-shrink-0">
+        <a href="/" className="text-sm text-muted-foreground hover:text-foreground">Dashboard</a>
+        <span className="mx-2 text-muted-foreground">/</span>
+        <span className="text-sm font-medium">Sequencer</span>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 flex overflow-hidden">
+        <DndContext
+          sensors={sensors}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+        >
+          {/* Left Sidebar - Sound Library */}
+          <div className="w-64 border-r bg-muted/30 flex flex-col flex-shrink-0">
+            <div className="p-4 h-full">
+              <SoundLibrary />
+            </div>
+          </div>
+
+          {/* Center Content - Tracks */}
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {/* Timeline Controls */}
+            <div className="p-4 border-b bg-muted/30">
+              <TimelineControls
+                duration={state.duration}
+                zoom={state.zoom}
+                onDurationChange={handleDurationChange}
+                onZoomChange={handleZoomChange}
+                minZoom={MIN_ZOOM}
+                maxZoom={MAX_ZOOM}
+              />
+            </div>
+
+            {/* Track Area */}
+            <div className="flex-1 flex overflow-hidden">
+              {/* Track Controls */}
+              <div className="w-32 border-r flex-shrink-0">
+                <TrackControls
+                  ref={trackControlsRef}
+                  tracks={state.tracks}
+                  onAddTrack={handleAddTrack}
+                  onRemoveTrack={handleRemoveTrack}
+                  onUpdateTrackName={handleUpdateTrackName}
+                  onScroll={handleVerticalScroll}
+                />
+              </div>
+
+              {/* Sequencer Canvas */}
+              <div className="flex-1 overflow-hidden">
+                <SequencerCanvas
+                  ref={sequencerCanvasRef}
+                  tracks={state.tracks}
+                  duration={state.duration}
+                  zoom={state.zoom}
+                  currentTime={state.currentTime}
+                  isPlaying={state.isPlaying}
+                  onScroll={handleVerticalScroll}
+                  draggedItem={draggedItem}
+                  dragOverInfo={dragOverInfo}
+                  onRemoveSound={handleRemoveSound}
+                  timeIntervals={getTimeIntervals(state.zoom, state.duration)}
+                  onZoomChange={handleZoomChangeWithPosition}
+                  minZoom={MIN_ZOOM}
+                  maxZoom={MAX_ZOOM}
+                />
+              </div>
+            </div>
+          </div>
+          <DragOverlay>
+            {draggedItem?.type === 'sound' ? (
+              <div className="p-3 border rounded-lg bg-card shadow-lg opacity-90">
+                <div className="flex items-start gap-2">
+                  <div className="flex-shrink-0 mt-0.5">
+                    {draggedItem.sound.type === 'SDB' && <span className="text-xs font-bold text-blue-500">SDB</span>}
+                    {draggedItem.sound.type === 'TTS' && <span className="text-xs font-bold text-green-500">TTS</span>}
+                    {draggedItem.sound.type === 'EXT' && <span className="text-xs font-bold text-purple-500">EXT</span>}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium text-sm truncate">
+                      {draggedItem.sound.name || draggedItem.sound.filename}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : draggedItem?.type === 'placed-sound' ? (
+              <div className="p-2 border rounded bg-primary/20 border-primary/40 shadow-lg opacity-90">
+                <div className="font-medium text-sm text-primary truncate">
+                  {draggedItem.name}
+                </div>
+              </div>
+            ) : null}
+          </DragOverlay>
+        </DndContext>
+      </div>
+    </div>
+  )
+}