From 3204e193fad67c1f6dcbba061dedec1782f2b860 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 28 Jan 2026 19:10:58 -0800
Subject: [PATCH 1/9] Implement story management features and update
 dependencies

- Introduced story management functionality, including creating, listing, and managing story items.
- Added new components for story display and interaction, including StoriesTab, StoryList, and StoryContent.
- Integrated drag-and-drop functionality for reordering story items using @dnd-kit.
- Updated dependencies for @dnd-kit packages to enhance drag-and-drop capabilities.
- Bumped version for @voicebox/app, @voicebox/landing, @voicebox/tauri, and @voicebox/web to 0.1.5.
- Enhanced audio playback features to support story mode with auto-play functionality.
- Improved error handling and user feedback through toast notifications in story-related actions.
---
 app/package.json                              |   3 +
 .../components/AudioPlayer/AudioPlayer.tsx    |  28 +
 .../Generation/FloatingGenerateBox.tsx        | 133 +++-
 app/src/components/Sidebar.tsx                |   3 +-
 app/src/components/StoriesTab/StoriesTab.tsx  |  25 +
 .../components/StoriesTab/StoryChatItem.tsx   | 160 +++++
 .../components/StoriesTab/StoryContent.tsx    | 304 +++++++++
 app/src/components/StoriesTab/StoryList.tsx   | 174 +++++
 app/src/lib/api/client.ts                     |  77 +++
 app/src/lib/api/types.ts                      |  58 ++
 app/src/lib/hooks/useGenerationForm.ts        |   4 +-
 app/src/lib/hooks/useStories.ts               | 164 +++++
 app/src/lib/hooks/useStoryPlayback.ts         | 193 ++++++
 app/src/router.tsx                            |   9 +
 app/src/stores/playerStore.ts                 |  23 +
 app/src/stores/storyStore.ts                  | 113 ++++
 backend/database.py                           | 111 ++++
 backend/main.py                               | 150 ++++-
 backend/models.py                             |  76 +++
 backend/stories.py                            | 598 ++++++++++++++++++
 bun.lock                                      |  19 +-
 tauri/src-tauri/gen/Assets.car                | Bin 3847048 -> 3847048 bytes
 22 files changed, 2396 insertions(+), 29 deletions(-)
 create mode 100644 app/src/components/StoriesTab/StoriesTab.tsx
 create mode 100644 app/src/components/StoriesTab/StoryChatItem.tsx
 create mode 100644 app/src/components/StoriesTab/StoryContent.tsx
 create mode 100644 app/src/components/StoriesTab/StoryList.tsx
 create mode 100644 app/src/lib/hooks/useStories.ts
 create mode 100644 app/src/lib/hooks/useStoryPlayback.ts
 create mode 100644 app/src/stores/storyStore.ts
 create mode 100644 backend/stories.py

diff --git a/app/package.json b/app/package.json
index 1c8f9790..20147133 100644
--- a/app/package.json
+++ b/app/package.json
@@ -13,6 +13,9 @@
     "check": "biome check --write src"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.0",
diff --git a/app/src/components/AudioPlayer/AudioPlayer.tsx b/app/src/components/AudioPlayer/AudioPlayer.tsx
index d6b843df..a03224c9 100644
--- a/app/src/components/AudioPlayer/AudioPlayer.tsx
+++ b/app/src/components/AudioPlayer/AudioPlayer.tsx
@@ -402,6 +402,11 @@ export function AudioPlayer() {
           wavesurfer.play();
         } else {
           setIsPlaying(false);
+          // Trigger finish callback if set
+          const onFinish = usePlayerStore.getState().onFinish;
+          if (onFinish) {
+            onFinish();
+          }
         }
       });
 
@@ -653,6 +658,29 @@ export function AudioPlayer() {
     clearRestartFlag();
   }, [shouldRestart, duration, setIsPlaying, clearRestartFlag]);
 
+  // Handle shouldAutoPlay flag - for story mode auto-advance
+  const shouldAutoPlay = usePlayerStore((state) => state.shouldAutoPlay);
+  const clearAutoPlayFlag = usePlayerStore((state) => state.clearAutoPlayFlag);
+  
+  useEffect(() => {
+    const wavesurfer = wavesurferRef.current;
+    if (!wavesurfer || !shouldAutoPlay || duration === 0) {
+      return;
+    }
+
+    // Auto-play the newly loaded audio
+    debug.log('Auto-playing next track in story mode');
+    wavesurfer.seekTo(0);
+    wavesurfer.play().catch((error) => {
+      debug.error('Failed to auto-play:', error);
+      setIsPlaying(false);
+      setError(`Playback error: ${error instanceof Error ? error.message : String(error)}`);
+    });
+
+    // Clear the auto-play flag
+    clearAutoPlayFlag();
+  }, [shouldAutoPlay, duration, setIsPlaying, clearAutoPlayFlag]);
+
   // Handle loop - WaveSurfer handles this via the 'finish' event
 
   const handlePlayPause = async () => {
diff --git a/app/src/components/Generation/FloatingGenerateBox.tsx b/app/src/components/Generation/FloatingGenerateBox.tsx
index 3cdfd3eb..39bda39b 100644
--- a/app/src/components/Generation/FloatingGenerateBox.tsx
+++ b/app/src/components/Generation/FloatingGenerateBox.tsx
@@ -1,6 +1,7 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import { Loader2, Sparkles } from 'lucide-react';
+import { Loader2, MessageSquare, Sparkles } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
+import { useMatchRoute } from '@tanstack/react-router';
 import { Button } from '@/components/ui/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
 import {
@@ -13,22 +14,55 @@ import {
 import { Textarea } from '@/components/ui/textarea';
 import { LANGUAGE_OPTIONS } from '@/lib/constants/languages';
 import { useGenerationForm } from '@/lib/hooks/useGenerationForm';
-import { useProfile } from '@/lib/hooks/useProfiles';
+import { useProfile, useProfiles } from '@/lib/hooks/useProfiles';
+import { useStory, useAddStoryItem } from '@/lib/hooks/useStories';
 import { useUIStore } from '@/stores/uiStore';
+import { useStoryStore } from '@/stores/storyStore';
+import { useToast } from '@/components/ui/use-toast';
+import { cn } from '@/lib/utils/cn';
 
 interface FloatingGenerateBoxProps {
   isPlayerOpen: boolean;
+  showVoiceSelector?: boolean;
 }
 
-export function FloatingGenerateBox({ isPlayerOpen }: FloatingGenerateBoxProps) {
+export function FloatingGenerateBox({ isPlayerOpen, showVoiceSelector = false }: FloatingGenerateBoxProps) {
   const selectedProfileId = useUIStore((state) => state.selectedProfileId);
+  const setSelectedProfileId = useUIStore((state) => state.setSelectedProfileId);
   const { data: selectedProfile } = useProfile(selectedProfileId || '');
+  const { data: profiles } = useProfiles();
   const [isExpanded, setIsExpanded] = useState(false);
+  const [isInstructMode, setIsInstructMode] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
+  const matchRoute = useMatchRoute();
+  const isStoriesRoute = matchRoute({ to: '/stories' });
+  const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
+  const { data: currentStory } = useStory(selectedStoryId);
+  const addStoryItem = useAddStoryItem();
+  const { toast } = useToast();
 
   const { form, handleSubmit, isPending } = useGenerationForm({
-    onSuccess: () => {
+    onSuccess: async (generationId) => {
       setIsExpanded(false);
+      // If on stories route and a story is selected, add generation to story
+      if (isStoriesRoute && selectedStoryId && generationId) {
+        try {
+          await addStoryItem.mutateAsync({
+            storyId: selectedStoryId,
+            data: { generation_id: generationId },
+          });
+          toast({
+            title: 'Added to story',
+            description: `Generation added to "${currentStory?.name || 'story'}"`,
+          });
+        } catch (error) {
+          toast({
+            title: 'Failed to add to story',
+            description: error instanceof Error ? error.message : 'Could not add generation to story',
+            variant: 'destructive',
+          });
+        }
+      }
     },
   });
 
@@ -69,7 +103,12 @@ export function FloatingGenerateBox({ isPlayerOpen }: FloatingGenerateBoxProps)
   return (
     <motion.div
       ref={containerRef}
-      className="fixed left-[calc(5rem+2rem)] right-auto w-[calc((100%-5rem-4rem)/2-1rem)]"
+      className={cn(
+        'fixed right-auto',
+        isStoriesRoute
+          ? 'left-[calc(5rem+2rem+((100%-5rem-4rem)/2)+1.5rem)] w-[calc((100%-5rem-4rem)/2-1rem)]'
+          : 'left-[calc(5rem+2rem)] w-[calc((100%-5rem-4rem)/2-1rem)]',
+      )}
       style={{
         bottom: isPlayerOpen ? 'calc(7rem + 1.5rem)' : '1.5rem',
       }}
@@ -85,17 +124,26 @@ export function FloatingGenerateBox({ isPlayerOpen }: FloatingGenerateBoxProps)
                 className="flex-1"
                 transition={{ duration: 0.3, ease: 'easeOut' }}
               >
+                {isInstructMode && (
+                  <span className="text-xs text-accent font-medium mb-1 block">
+                    Delivery instructions:
+                  </span>
+                )}
                 <FormField
                   control={form.control}
-                  name="text"
+                  name={isInstructMode ? 'instruct' : 'text'}
                   render={({ field }) => (
                     <FormItem>
                       <FormControl>
                         <Textarea
                           placeholder={
-                            selectedProfile
-                              ? `Generate speech using ${selectedProfile.name}...`
-                              : 'Select a voice profile above...'
+                            isInstructMode
+                              ? 'Add delivery instructions...'
+                              : isStoriesRoute && currentStory
+                                ? `Generate speech for "${currentStory.name}"...`
+                                : selectedProfile
+                                  ? `Generate speech using ${selectedProfile.name}...`
+                                  : 'Select a voice profile above...'
                           }
                           className="resize-none bg-transparent border-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0 outline-none ring-0 rounded-2xl text-sm placeholder:text-muted-foreground/60 overflow-hidden transition-all"
                           style={{
@@ -114,18 +162,43 @@ export function FloatingGenerateBox({ isPlayerOpen }: FloatingGenerateBoxProps)
                 />
               </motion.div>
 
-              <Button
-                type="submit"
-                disabled={isPending || !selectedProfileId}
-                className="h-10 w-10 rounded-full bg-accent hover:bg-accent/90 hover:scale-105 text-accent-foreground shadow-lg hover:shadow-accent/50 shrink-0 transition-all duration-200"
-                size="icon"
-              >
-                {isPending ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                ) : (
-                  <Sparkles className="h-4 w-4" />
-                )}
-              </Button>
+              <div className="relative shrink-0">
+                <Button
+                  type="submit"
+                  disabled={isPending || !selectedProfileId}
+                  className="h-10 w-10 rounded-full bg-accent hover:bg-accent/90 hover:scale-105 text-accent-foreground shadow-lg hover:shadow-accent/50 transition-all duration-200"
+                  size="icon"
+                >
+                  {isPending ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Sparkles className="h-4 w-4" />
+                  )}
+                </Button>
+                <AnimatePresence>
+                  {isExpanded && (
+                    <motion.div
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.8 }}
+                      transition={{ duration: 0.2 }}
+                      className="absolute top-0 right-[calc(100%+0.5rem)]"
+                    >
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setIsInstructMode(!isInstructMode)}
+                        className={`h-10 w-10 rounded-full bg-card border border-border hover:bg-background/50 transition-all duration-200 ${
+                          isInstructMode ? 'text-accent' : ''
+                        }`}
+                      >
+                        <MessageSquare className="h-4 w-4" />
+                      </Button>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
             </div>
 
             <AnimatePresence>
@@ -137,6 +210,24 @@ export function FloatingGenerateBox({ isPlayerOpen }: FloatingGenerateBoxProps)
                 className=" mt-3"
               >
                 <div className="flex items-center gap-2">
+                  {showVoiceSelector && (
+                    <Select
+                      value={selectedProfileId || ''}
+                      onValueChange={(value) => setSelectedProfileId(value || null)}
+                    >
+                      <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all flex-1">
+                        <SelectValue placeholder="Select a voice..." />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {profiles?.map((profile) => (
+                          <SelectItem key={profile.id} value={profile.id} className="text-xs">
+                            {profile.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+
                   <FormField
                     control={form.control}
                     name="language"
diff --git a/app/src/components/Sidebar.tsx b/app/src/components/Sidebar.tsx
index 5fdc16a6..a849344f 100644
--- a/app/src/components/Sidebar.tsx
+++ b/app/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { Link, useMatchRoute } from '@tanstack/react-router';
-import { Box, Loader2, Mic, Server, Speaker, Volume2 } from 'lucide-react';
+import { Box, BookOpen, Loader2, Mic, Server, Speaker, Volume2 } from 'lucide-react';
 import voiceboxLogo from '@/assets/voicebox-logo.png';
 import { cn } from '@/lib/utils/cn';
 import { useGenerationStore } from '@/stores/generationStore';
@@ -11,6 +11,7 @@ interface SidebarProps {
 
 const tabs = [
   { id: 'main', path: '/', icon: Volume2, label: 'Generate' },
+  { id: 'stories', path: '/stories', icon: BookOpen, label: 'Stories' },
   { id: 'voices', path: '/voices', icon: Mic, label: 'Voices' },
   { id: 'audio', path: '/audio', icon: Speaker, label: 'Audio' },
   { id: 'models', path: '/models', icon: Box, label: 'Models' },
diff --git a/app/src/components/StoriesTab/StoriesTab.tsx b/app/src/components/StoriesTab/StoriesTab.tsx
new file mode 100644
index 00000000..70001465
--- /dev/null
+++ b/app/src/components/StoriesTab/StoriesTab.tsx
@@ -0,0 +1,25 @@
+import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox';
+import { StoryContent } from './StoryContent';
+import { StoryList } from './StoryList';
+import { usePlayerStore } from '@/stores/playerStore';
+
+export function StoriesTab() {
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full min-h-0 overflow-hidden relative">
+      {/* Left Column - Story List */}
+      <div className="flex flex-col min-h-0 overflow-hidden">
+        <StoryList />
+      </div>
+
+      {/* Right Column - Story Content */}
+      <div className="flex flex-col min-h-0 overflow-hidden">
+        <StoryContent />
+      </div>
+
+      {/* Floating Generate Box */}
+      <FloatingGenerateBox isPlayerOpen={!!audioUrl} showVoiceSelector />
+    </div>
+  );
+}
diff --git a/app/src/components/StoriesTab/StoryChatItem.tsx b/app/src/components/StoriesTab/StoryChatItem.tsx
new file mode 100644
index 00000000..af66dc33
--- /dev/null
+++ b/app/src/components/StoriesTab/StoryChatItem.tsx
@@ -0,0 +1,160 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical, Mic, MoreHorizontal, Play, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Textarea } from '@/components/ui/textarea';
+import type { StoryItemDetail } from '@/lib/api/types';
+import { cn } from '@/lib/utils/cn';
+import { useStoryStore } from '@/stores/storyStore';
+
+interface StoryChatItemProps {
+  item: StoryItemDetail;
+  storyId: string;
+  index: number;
+  onRemove: () => void;
+  currentTimeMs: number;
+  isPlaying: boolean;
+  dragHandleProps?: React.HTMLAttributes<HTMLButtonElement>;
+  isDragging?: boolean;
+}
+
+export function StoryChatItem({
+  item,
+  onRemove,
+  currentTimeMs,
+  isPlaying,
+  dragHandleProps,
+  isDragging,
+}: StoryChatItemProps) {
+  const seek = useStoryStore((state) => state.seek);
+
+  // Check if this item is currently playing based on timecode
+  const itemStartMs = item.start_time_ms;
+  const itemEndMs = item.start_time_ms + item.duration * 1000;
+  const isCurrentlyPlaying = isPlaying && currentTimeMs >= itemStartMs && currentTimeMs < itemEndMs;
+
+  const handlePlay = () => {
+    // Seek to the start of this item
+    seek(itemStartMs);
+  };
+
+  const formatTime = (ms: number): string => {
+    const totalSeconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    const milliseconds = Math.floor((ms % 1000) / 100);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds}`;
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-3 p-4 rounded-lg border transition-colors',
+        isCurrentlyPlaying && 'bg-muted/70 border-primary',
+        !isCurrentlyPlaying && 'hover:bg-muted/50',
+        isDragging && 'opacity-50 shadow-lg',
+      )}
+    >
+      {/* Drag Handle */}
+      {dragHandleProps && (
+        <button
+          type="button"
+          className="shrink-0 cursor-grab active:cursor-grabbing touch-none text-muted-foreground hover:text-foreground transition-colors"
+          {...dragHandleProps}
+        >
+          <GripVertical className="h-5 w-5" />
+        </button>
+      )}
+
+      {/* Voice Icon */}
+      <div className="shrink-0">
+        <div className="h-10 w-10 rounded-full bg-muted flex items-center justify-center">
+          <Mic className="h-5 w-5 text-muted-foreground" />
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-2">
+          <span className="font-medium text-sm">{item.profile_name}</span>
+          <span className="text-xs text-muted-foreground">{item.language}</span>
+          <span className="text-xs text-muted-foreground tabular-nums ml-auto">
+            {formatTime(itemStartMs)}
+          </span>
+        </div>
+        <button
+          type="button"
+          className="w-full text-left cursor-pointer"
+          onClick={(e) => {
+            // Don't trigger play if clicking on textarea or if text is selected
+            const target = e.target as HTMLElement;
+            if (target.closest('textarea') || window.getSelection()?.toString()) {
+              return;
+            }
+            handlePlay();
+          }}
+        >
+          <Textarea
+            value={item.text}
+            className="flex-1 resize-none text-sm text-muted-foreground select-text pointer-events-none bg-card"
+            readOnly
+          />
+        </button>
+      </div>
+
+      {/* Actions */}
+      <div className="shrink-0">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-8 w-8" aria-label="Actions">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={handlePlay}>
+              <Play className="mr-2 h-4 w-4" />
+              Play from here
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onRemove} className="text-destructive focus:text-destructive">
+              <Trash2 className="mr-2 h-4 w-4" />
+              Remove from Story
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}
+
+// Sortable wrapper component
+export function SortableStoryChatItem(props: Omit<StoryChatItemProps, 'dragHandleProps' | 'isDragging'>) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: props.item.generation_id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes}>
+      <StoryChatItem
+        {...props}
+        dragHandleProps={listeners}
+        isDragging={isDragging}
+      />
+    </div>
+  );
+}
diff --git a/app/src/components/StoriesTab/StoryContent.tsx b/app/src/components/StoriesTab/StoryContent.tsx
new file mode 100644
index 00000000..c06c4eae
--- /dev/null
+++ b/app/src/components/StoriesTab/StoryContent.tsx
@@ -0,0 +1,304 @@
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { Download, Pause, Play } from 'lucide-react';
+import { useMemo, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/use-toast';
+import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import { Slider } from '@/components/ui/slider';
+import { useStory, useRemoveStoryItem, useExportStoryAudio, useReorderStoryItems } from '@/lib/hooks/useStories';
+import { useStoryStore } from '@/stores/storyStore';
+import { usePlayerStore } from '@/stores/playerStore';
+import { SortableStoryChatItem } from './StoryChatItem';
+import { cn } from '@/lib/utils/cn';
+import { useStoryPlayback } from '@/lib/hooks/useStoryPlayback';
+
+export function StoryContent() {
+  const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
+  const { data: story, isLoading } = useStory(selectedStoryId);
+  const removeItem = useRemoveStoryItem();
+  const reorderItems = useReorderStoryItems();
+  const exportAudio = useExportStoryAudio();
+  const { toast } = useToast();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
+  const isPlayerVisible = !!audioUrl;
+
+  // Drag and drop sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  // Playback state
+  const isPlaying = useStoryStore((state) => state.isPlaying);
+  const currentTimeMs = useStoryStore((state) => state.currentTimeMs);
+  const totalDurationMs = useStoryStore((state) => state.totalDurationMs);
+  const playbackStoryId = useStoryStore((state) => state.playbackStoryId);
+  const play = useStoryStore((state) => state.play);
+  const pause = useStoryStore((state) => state.pause);
+  const stop = useStoryStore((state) => state.stop);
+  const seek = useStoryStore((state) => state.seek);
+
+  // Use playback hook
+  useStoryPlayback(story?.items);
+
+  // Sort items by start_time_ms
+  const sortedItems = useMemo(() => {
+    if (!story?.items) return [];
+    return [...story.items].sort((a, b) => a.start_time_ms - b.start_time_ms);
+  }, [story?.items]);
+
+  const handleRemoveItem = (generationId: string) => {
+    if (!story) return;
+
+    removeItem.mutate(
+      {
+        storyId: story.id,
+        generationId,
+      },
+      {
+        onError: (error) => {
+          toast({
+            title: 'Failed to remove item',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (!story || !over || active.id === over.id) return;
+
+    const oldIndex = sortedItems.findIndex((item) => item.generation_id === active.id);
+    const newIndex = sortedItems.findIndex((item) => item.generation_id === over.id);
+
+    if (oldIndex === -1 || newIndex === -1) return;
+
+    // Calculate the new order
+    const newOrder = arrayMove(sortedItems, oldIndex, newIndex);
+    const generationIds = newOrder.map((item) => item.generation_id);
+
+    // Send reorder request to backend
+    reorderItems.mutate(
+      {
+        storyId: story.id,
+        data: { generation_ids: generationIds },
+      },
+      {
+        onError: (error) => {
+          toast({
+            title: 'Failed to reorder items',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  const handlePlayPause = () => {
+    if (!story || story.items.length === 0) return;
+
+    if (isPlaying && playbackStoryId === story.id) {
+      pause();
+    } else {
+      play(story.id, sortedItems);
+    }
+  };
+
+  const handleStop = () => {
+    stop();
+  };
+
+  const handleSeek = (value: number[]) => {
+    seek(value[0]);
+  };
+
+  const formatTime = (ms: number): string => {
+    const totalSeconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    const milliseconds = Math.floor((ms % 1000) / 100);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds}`;
+  };
+
+  const handleExportAudio = () => {
+    if (!story) return;
+
+    exportAudio.mutate(
+      {
+        storyId: story.id,
+        storyName: story.name,
+      },
+      {
+        onError: (error) => {
+          toast({
+            title: 'Failed to export audio',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  if (!selectedStoryId) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground">
+        <div className="text-center">
+          <p className="text-lg font-medium mb-2">Select a story</p>
+          <p className="text-sm">Choose a story from the list to view its content</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-muted-foreground">Loading story...</div>
+      </div>
+    );
+  }
+
+  if (!story) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground">
+        <div className="text-center">
+          <p className="text-lg font-medium mb-2">Story not found</p>
+          <p className="text-sm">The selected story could not be loaded</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Header */}
+      <div className="flex flex-col gap-4 mb-4 px-1">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-2xl font-bold">{story.name}</h2>
+            {story.description && (
+              <p className="text-sm text-muted-foreground mt-1">{story.description}</p>
+            )}
+          </div>
+          <div className="flex gap-2">
+            {story.items.length > 0 && (
+              <>
+                <Button variant="outline" size="sm" onClick={handlePlayPause}>
+                  {isPlaying && playbackStoryId === story.id ? (
+                    <>
+                      <Pause className="mr-2 h-4 w-4" />
+                      Pause
+                    </>
+                  ) : (
+                    <>
+                      <Play className="mr-2 h-4 w-4" />
+                      Play
+                    </>
+                  )}
+                </Button>
+                {isPlaying && playbackStoryId === story.id && (
+                  <Button variant="outline" size="sm" onClick={handleStop}>
+                    Stop
+                  </Button>
+                )}
+                <Button variant="outline" size="sm" onClick={handleExportAudio} disabled={exportAudio.isPending}>
+                  <Download className="mr-2 h-4 w-4" />
+                  Export Audio
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Playback Controls */}
+        {story.items.length > 0 && (
+          <div className="flex items-center gap-4">
+            <span className="text-xs text-muted-foreground tabular-nums min-w-16">
+              {formatTime(currentTimeMs)}
+            </span>
+            <Slider
+              value={[currentTimeMs]}
+              max={totalDurationMs || 1}
+              step={10}
+              onValueChange={handleSeek}
+              className="flex-1"
+              disabled={!isPlaying && playbackStoryId !== story.id}
+            />
+            <span className="text-xs text-muted-foreground tabular-nums min-w-16">
+              {formatTime(totalDurationMs)}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div
+        ref={scrollRef}
+        className={cn(
+          'flex-1 min-h-0 overflow-y-auto space-y-3',
+          isPlayerVisible && BOTTOM_SAFE_AREA_PADDING,
+        )}
+      >
+        {sortedItems.length === 0 ? (
+          <div className="text-center py-12 px-5 border-2 border-dashed border-muted rounded-md text-muted-foreground">
+            <p className="text-sm">No items in this story</p>
+            <p className="text-xs mt-2">Generate speech using the box below to add items</p>
+          </div>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={sortedItems.map((item) => item.generation_id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="space-y-3">
+                {sortedItems.map((item, index) => (
+                  <SortableStoryChatItem
+                    key={item.id}
+                    item={item}
+                    storyId={story.id}
+                    index={index}
+                    onRemove={() => handleRemoveItem(item.generation_id)}
+                    currentTimeMs={currentTimeMs}
+                    isPlaying={isPlaying && playbackStoryId === story.id}
+                  />
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        )}
+      </div>
+    </div>
+  );
+}
+
diff --git a/app/src/components/StoriesTab/StoryList.tsx b/app/src/components/StoriesTab/StoryList.tsx
new file mode 100644
index 00000000..f3053f30
--- /dev/null
+++ b/app/src/components/StoriesTab/StoryList.tsx
@@ -0,0 +1,174 @@
+import { Plus, BookOpen } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { useToast } from '@/components/ui/use-toast';
+import { useStories, useCreateStory } from '@/lib/hooks/useStories';
+import { useStoryStore } from '@/stores/storyStore';
+import { cn } from '@/lib/utils/cn';
+import { formatDate } from '@/lib/utils/format';
+
+export function StoryList() {
+  const { data: stories, isLoading } = useStories();
+  const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
+  const setSelectedStoryId = useStoryStore((state) => state.setSelectedStoryId);
+  const createStory = useCreateStory();
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [newStoryName, setNewStoryName] = useState('');
+  const [newStoryDescription, setNewStoryDescription] = useState('');
+  const { toast } = useToast();
+
+  const handleCreateStory = () => {
+    if (!newStoryName.trim()) {
+      toast({
+        title: 'Name required',
+        description: 'Please enter a story name',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    createStory.mutate(
+      {
+        name: newStoryName.trim(),
+        description: newStoryDescription.trim() || undefined,
+      },
+      {
+        onSuccess: (story) => {
+          setSelectedStoryId(story.id);
+          setCreateDialogOpen(false);
+          setNewStoryName('');
+          setNewStoryDescription('');
+          toast({
+            title: 'Story created',
+            description: `"${story.name}" has been created`,
+          });
+        },
+        onError: (error) => {
+          toast({
+            title: 'Failed to create story',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-muted-foreground">Loading stories...</div>
+      </div>
+    );
+  }
+
+  const storyList = stories || [];
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4 px-1">
+        <h2 className="text-2xl font-bold">Stories</h2>
+        <Button onClick={() => setCreateDialogOpen(true)} size="sm">
+          <Plus className="mr-2 h-4 w-4" />
+          New Story
+        </Button>
+      </div>
+
+      {/* Story List */}
+      <div className="flex-1 min-h-0 overflow-y-auto space-y-2">
+        {storyList.length === 0 ? (
+          <div className="text-center py-12 px-5 border-2 border-dashed border-muted rounded-md text-muted-foreground">
+            <BookOpen className="h-12 w-12 mx-auto mb-4 opacity-50" />
+            <p className="text-sm">No stories yet</p>
+            <p className="text-xs mt-2">Create your first story to get started</p>
+          </div>
+        ) : (
+          storyList.map((story) => (
+            <div
+              key={story.id}
+              className={cn(
+                'p-4 border rounded-md cursor-pointer hover:bg-muted/50 transition-colors',
+                selectedStoryId === story.id && 'bg-muted border-primary',
+              )}
+              onClick={() => setSelectedStoryId(story.id)}
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-medium truncate">{story.name}</h3>
+                  {story.description && (
+                    <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                      {story.description}
+                    </p>
+                  )}
+                  <div className="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
+                    <span>{story.item_count} {story.item_count === 1 ? 'item' : 'items'}</span>
+                    <span>•</span>
+                    <span>{formatDate(story.updated_at)}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Create Story Dialog */}
+      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create New Story</DialogTitle>
+            <DialogDescription>
+              Create a new story to organize your voice generations into conversations.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="story-name">Name</Label>
+              <Input
+                id="story-name"
+                placeholder="My Story"
+                value={newStoryName}
+                onChange={(e) => setNewStoryName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    handleCreateStory();
+                  }
+                }}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="story-description">Description (optional)</Label>
+              <Textarea
+                id="story-description"
+                placeholder="A conversation between..."
+                value={newStoryDescription}
+                onChange={(e) => setNewStoryDescription(e.target.value)}
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleCreateStory} disabled={createStory.isPending}>
+              {createStory.isPending ? 'Creating...' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/app/src/lib/api/client.ts b/app/src/lib/api/client.ts
index bc654932..0a77054c 100644
--- a/app/src/lib/api/client.ts
+++ b/app/src/lib/api/client.ts
@@ -13,6 +13,13 @@ import type {
   ModelStatusListResponse,
   ModelDownloadRequest,
   ActiveTasksResponse,
+  StoryCreate,
+  StoryResponse,
+  StoryDetailResponse,
+  StoryItemCreate,
+  StoryItemDetail,
+  StoryItemBatchUpdate,
+  StoryItemReorder,
 } from './types';
 
 class ApiClient {
@@ -361,6 +368,76 @@ class ApiClient {
       body: JSON.stringify({ channel_ids: channelIds }),
     });
   }
+
+  // Stories
+  async listStories(): Promise<StoryResponse[]> {
+    return this.request<StoryResponse[]>('/stories');
+  }
+
+  async createStory(data: StoryCreate): Promise<StoryResponse> {
+    return this.request<StoryResponse>('/stories', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async getStory(storyId: string): Promise<StoryDetailResponse> {
+    return this.request<StoryDetailResponse>(`/stories/${storyId}`);
+  }
+
+  async updateStory(storyId: string, data: StoryCreate): Promise<StoryResponse> {
+    return this.request<StoryResponse>(`/stories/${storyId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteStory(storyId: string): Promise<void> {
+    await this.request<void>(`/stories/${storyId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async addStoryItem(storyId: string, data: StoryItemCreate): Promise<StoryItemDetail> {
+    return this.request<StoryItemDetail>(`/stories/${storyId}/items`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async removeStoryItem(storyId: string, generationId: string): Promise<void> {
+    await this.request<void>(`/stories/${storyId}/items/${generationId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async updateStoryItemTimes(storyId: string, data: StoryItemBatchUpdate): Promise<void> {
+    await this.request<void>(`/stories/${storyId}/items/times`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async reorderStoryItems(storyId: string, data: StoryItemReorder): Promise<StoryItemDetail[]> {
+    return this.request<StoryItemDetail[]>(`/stories/${storyId}/items/reorder`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async exportStoryAudio(storyId: string): Promise<Blob> {
+    const url = `${this.getBaseUrl()}/stories/${storyId}/export-audio`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(error.detail || `HTTP error! status: ${response.status}`);
+    }
+
+    return response.blob();
+  }
 }
 
 export const apiClient = new ApiClient();
diff --git a/app/src/lib/api/types.ts b/app/src/lib/api/types.ts
index a473f29e..d6172652 100644
--- a/app/src/lib/api/types.ts
+++ b/app/src/lib/api/types.ts
@@ -123,3 +123,61 @@ export interface ActiveTasksResponse {
   downloads: ActiveDownloadTask[];
   generations: ActiveGenerationTask[];
 }
+
+export interface StoryCreate {
+  name: string;
+  description?: string;
+}
+
+export interface StoryResponse {
+  id: string;
+  name: string;
+  description?: string;
+  created_at: string;
+  updated_at: string;
+  item_count: number;
+}
+
+export interface StoryItemDetail {
+  id: string;
+  story_id: string;
+  generation_id: string;
+  start_time_ms: number;
+  created_at: string;
+  profile_id: string;
+  profile_name: string;
+  text: string;
+  language: string;
+  audio_path: string;
+  duration: number;
+  seed?: number;
+  instruct?: string;
+  generation_created_at: string;
+}
+
+export interface StoryDetailResponse {
+  id: string;
+  name: string;
+  description?: string;
+  created_at: string;
+  updated_at: string;
+  items: StoryItemDetail[];
+}
+
+export interface StoryItemCreate {
+  generation_id: string;
+  start_time_ms?: number;
+}
+
+export interface StoryItemUpdateTime {
+  generation_id: string;
+  start_time_ms: number;
+}
+
+export interface StoryItemBatchUpdate {
+  updates: StoryItemUpdateTime[];
+}
+
+export interface StoryItemReorder {
+  generation_ids: string[];
+}
diff --git a/app/src/lib/hooks/useGenerationForm.ts b/app/src/lib/hooks/useGenerationForm.ts
index 71aeb1cd..b0c87b4a 100644
--- a/app/src/lib/hooks/useGenerationForm.ts
+++ b/app/src/lib/hooks/useGenerationForm.ts
@@ -21,7 +21,7 @@ const generationSchema = z.object({
 export type GenerationFormValues = z.infer<typeof generationSchema>;
 
 interface UseGenerationFormOptions {
-  onSuccess?: () => void;
+  onSuccess?: (generationId: string) => void;
   defaultValues?: Partial<GenerationFormValues>;
 }
 
@@ -100,7 +100,7 @@ export function useGenerationForm(options: UseGenerationFormOptions = {}) {
       setAudio(audioUrl, result.id, selectedProfileId, data.text.substring(0, 50));
 
       form.reset();
-      options.onSuccess?.();
+      options.onSuccess?.(result.id);
     } catch (error) {
       toast({
         title: 'Generation failed',
diff --git a/app/src/lib/hooks/useStories.ts b/app/src/lib/hooks/useStories.ts
new file mode 100644
index 00000000..8e6f2212
--- /dev/null
+++ b/app/src/lib/hooks/useStories.ts
@@ -0,0 +1,164 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api/client';
+import type { StoryCreate, StoryItemCreate, StoryItemBatchUpdate, StoryItemReorder } from '@/lib/api/types';
+import { isTauri } from '@/lib/tauri';
+
+export function useStories() {
+  return useQuery({
+    queryKey: ['stories'],
+    queryFn: () => apiClient.listStories(),
+  });
+}
+
+export function useStory(storyId: string | null) {
+  return useQuery({
+    queryKey: ['stories', storyId],
+    queryFn: () => apiClient.getStory(storyId!),
+    enabled: !!storyId,
+  });
+}
+
+export function useCreateStory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: StoryCreate) => apiClient.createStory(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+    },
+  });
+}
+
+export function useUpdateStory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryCreate }) =>
+      apiClient.updateStory(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useDeleteStory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (storyId: string) => apiClient.deleteStory(storyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+    },
+  });
+}
+
+export function useAddStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryItemCreate }) =>
+      apiClient.addStoryItem(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useRemoveStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, generationId }: { storyId: string; generationId: string }) =>
+      apiClient.removeStoryItem(storyId, generationId),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useUpdateStoryItemTimes() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryItemBatchUpdate }) =>
+      apiClient.updateStoryItemTimes(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useReorderStoryItems() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryItemReorder }) =>
+      apiClient.reorderStoryItems(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useExportStoryAudio() {
+  return useMutation({
+    mutationFn: async ({ storyId, storyName }: { storyId: string; storyName: string }) => {
+      const blob = await apiClient.exportStoryAudio(storyId);
+
+      // Create safe filename
+      const safeName = storyName.substring(0, 50).replace(/[^a-z0-9]/gi, '-').toLowerCase();
+      const filename = `${safeName || 'story'}.wav`;
+
+      if (isTauri()) {
+        // Use Tauri's native save dialog
+        try {
+          const { save } = await import('@tauri-apps/plugin-dialog');
+          const filePath = await save({
+            defaultPath: filename,
+            filters: [
+              {
+                name: 'Audio File',
+                extensions: ['wav'],
+              },
+            ],
+          });
+
+          if (filePath) {
+            // Write file using Tauri's filesystem API
+            const { writeBinaryFile } = await import('@tauri-apps/plugin-fs');
+            const arrayBuffer = await blob.arrayBuffer();
+            await writeBinaryFile(filePath, new Uint8Array(arrayBuffer));
+          }
+        } catch (error) {
+          console.error('Failed to use Tauri dialog, falling back to browser download:', error);
+          // Fall back to browser download if Tauri dialog fails
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = filename;
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+          document.body.removeChild(a);
+        }
+      } else {
+        // Browser: trigger download
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      }
+
+      return blob;
+    },
+  });
+}
diff --git a/app/src/lib/hooks/useStoryPlayback.ts b/app/src/lib/hooks/useStoryPlayback.ts
new file mode 100644
index 00000000..f3e65f53
--- /dev/null
+++ b/app/src/lib/hooks/useStoryPlayback.ts
@@ -0,0 +1,193 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { useStoryStore } from '@/stores/storyStore';
+import { apiClient } from '@/lib/api/client';
+import type { StoryItemDetail } from '@/lib/api/types';
+
+/**
+ * Hook for managing timecode-based story playback.
+ * Uses a single audio element for reliable playback.
+ */
+export function useStoryPlayback(_items: StoryItemDetail[] | undefined) {
+  const isPlaying = useStoryStore((state) => state.isPlaying);
+  const playbackItems = useStoryStore((state) => state.playbackItems);
+  const tick = useStoryStore((state) => state.tick);
+
+  // Single audio element for playback
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const currentItemIdRef = useRef<string | null>(null);
+  const animationFrameRef = useRef<number | null>(null);
+  const lastTimeRef = useRef<number>(Date.now());
+
+  // Get or create audio element
+  const getAudio = useCallback(() => {
+    if (!audioRef.current) {
+      audioRef.current = new Audio();
+      audioRef.current.preload = 'auto';
+    }
+    return audioRef.current;
+  }, []);
+
+  // Find the item that should be playing at a given time
+  const findActiveItem = useCallback((timeMs: number, items: StoryItemDetail[]): StoryItemDetail | null => {
+    for (const item of items) {
+      const itemStart = item.start_time_ms;
+      const itemEnd = item.start_time_ms + item.duration * 1000;
+      if (timeMs >= itemStart && timeMs < itemEnd) {
+        return item;
+      }
+    }
+    return null;
+  }, []);
+
+  // Find the next item after a given time
+  const findNextItem = useCallback((timeMs: number, items: StoryItemDetail[]): StoryItemDetail | null => {
+    const sorted = [...items].sort((a, b) => a.start_time_ms - b.start_time_ms);
+    for (const item of sorted) {
+      if (item.start_time_ms > timeMs) {
+        return item;
+      }
+    }
+    return null;
+  }, []);
+
+  // Cleanup
+  useEffect(() => {
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.src = '';
+      }
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, []);
+
+  // Main playback effect
+  useEffect(() => {
+    const audio = getAudio();
+
+    if (!isPlaying || !playbackItems || playbackItems.length === 0) {
+      console.log('[StoryPlayback] Stopping playback');
+      audio.pause();
+      currentItemIdRef.current = null;
+      
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+      return;
+    }
+
+    const items = playbackItems; // Capture for closure
+    console.log('[StoryPlayback] Starting playback');
+
+    const playItem = (item: StoryItemDetail, offsetMs: number = 0) => {
+      console.log('[StoryPlayback] Playing item:', item.generation_id, 'offset:', offsetMs);
+      currentItemIdRef.current = item.generation_id;
+      
+      const audioUrl = apiClient.getAudioUrl(item.generation_id);
+      audio.src = audioUrl;
+      
+      audio.onloadedmetadata = () => {
+        const offsetSeconds = Math.max(0, offsetMs / 1000);
+        audio.currentTime = offsetSeconds;
+        audio.play().catch(err => {
+          console.error('[StoryPlayback] Play failed:', err);
+        });
+      };
+
+      audio.onerror = (e) => {
+        console.error('[StoryPlayback] Audio error:', e);
+      };
+
+      // When this audio ends, advance the clock and check for next item
+      audio.onended = () => {
+        console.log('[StoryPlayback] Audio ended');
+        const state = useStoryStore.getState();
+        if (!state.isPlaying || !state.playbackItems) return;
+
+        // Find what's next
+        const nextItem = findNextItem(state.currentTimeMs, state.playbackItems);
+        if (nextItem) {
+          // Jump to next item's start
+          useStoryStore.setState({ currentTimeMs: nextItem.start_time_ms });
+          playItem(nextItem, 0);
+        } else {
+          // No more items
+          console.log('[StoryPlayback] Story complete');
+          useStoryStore.getState().stop();
+        }
+      };
+    };
+
+    // Animation frame for updating the clock
+    const updateClock = () => {
+      if (!useStoryStore.getState().isPlaying) return;
+
+      const now = Date.now();
+      const deltaMs = now - lastTimeRef.current;
+      lastTimeRef.current = now;
+
+      // Update master clock
+      tick(deltaMs);
+
+      const currentTime = useStoryStore.getState().currentTimeMs;
+      const totalDuration = useStoryStore.getState().totalDurationMs;
+
+      // Check if we need to start playing a different item
+      const activeItem = findActiveItem(currentTime, items);
+      
+      if (activeItem && currentItemIdRef.current !== activeItem.generation_id) {
+        // Need to switch to a different item
+        const offset = currentTime - activeItem.start_time_ms;
+        playItem(activeItem, offset);
+      } else if (!activeItem && currentItemIdRef.current) {
+        // We're in a gap between items, pause audio
+        audio.pause();
+        currentItemIdRef.current = null;
+        
+        // Check if there's a next item to wait for
+        const nextItem = findNextItem(currentTime, items);
+        if (!nextItem && currentTime >= totalDuration) {
+          console.log('[StoryPlayback] Reached end');
+          useStoryStore.getState().stop();
+          return;
+        }
+      }
+
+      // Continue loop
+      animationFrameRef.current = requestAnimationFrame(updateClock);
+    };
+
+    // Start with the first item
+    const currentTime = useStoryStore.getState().currentTimeMs;
+    const activeItem = findActiveItem(currentTime, items);
+    
+    if (activeItem) {
+      const offset = currentTime - activeItem.start_time_ms;
+      playItem(activeItem, offset);
+    } else {
+      // Maybe we're before all items start, find the first one
+      const firstItem = [...items].sort((a, b) => a.start_time_ms - b.start_time_ms)[0];
+      if (firstItem && currentTime < firstItem.start_time_ms) {
+        // Wait for the first item
+        console.log('[StoryPlayback] Waiting for first item at', firstItem.start_time_ms);
+      }
+    }
+
+    // Start clock
+    lastTimeRef.current = Date.now();
+    animationFrameRef.current = requestAnimationFrame(updateClock);
+
+    return () => {
+      audio.onended = null;
+      audio.onloadedmetadata = null;
+      audio.onerror = null;
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    };
+  }, [isPlaying, playbackItems, getAudio, findActiveItem, findNextItem, tick]);
+}
diff --git a/app/src/router.tsx b/app/src/router.tsx
index b9ce6a6e..af8eb068 100644
--- a/app/src/router.tsx
+++ b/app/src/router.tsx
@@ -5,6 +5,7 @@ import { MainEditor } from '@/components/MainEditor/MainEditor';
 import { ModelsTab } from '@/components/ModelsTab/ModelsTab';
 import { ServerTab } from '@/components/ServerTab/ServerTab';
 import { Sidebar } from '@/components/Sidebar';
+import { StoriesTab } from '@/components/StoriesTab/StoriesTab';
 import { Toaster } from '@/components/ui/toaster';
 import { VoicesTab } from '@/components/VoicesTab/VoicesTab';
 import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
@@ -77,6 +78,13 @@ const indexRoute = createRoute({
   component: MainEditor,
 });
 
+// Stories route
+const storiesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/stories',
+  component: StoriesTab,
+});
+
 // Voices route
 const voicesRoute = createRoute({
   getParentRoute: () => rootRoute,
@@ -108,6 +116,7 @@ const serverRoute = createRoute({
 // Route tree
 const routeTree = rootRoute.addChildren([
   indexRoute,
+  storiesRoute,
   voicesRoute,
   audioRoute,
   modelsRoute,
diff --git a/app/src/stores/playerStore.ts b/app/src/stores/playerStore.ts
index d6b984a9..fb4e57a4 100644
--- a/app/src/stores/playerStore.ts
+++ b/app/src/stores/playerStore.ts
@@ -11,8 +11,11 @@ interface PlayerState {
   volume: number;
   isLooping: boolean;
   shouldRestart: boolean;
+  shouldAutoPlay: boolean;
+  onFinish: (() => void) | null;
 
   setAudio: (url: string, id: string, profileId: string | null, title?: string) => void;
+  setAudioWithAutoPlay: (url: string, id: string, profileId: string | null, title?: string) => void;
   setIsPlaying: (playing: boolean) => void;
   setCurrentTime: (time: number) => void;
   setDuration: (duration: number) => void;
@@ -20,6 +23,8 @@ interface PlayerState {
   toggleLoop: () => void;
   restartCurrentAudio: () => void;
   clearRestartFlag: () => void;
+  clearAutoPlayFlag: () => void;
+  setOnFinish: (callback: (() => void) | null) => void;
   reset: () => void;
 }
 
@@ -34,6 +39,8 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   volume: 1,
   isLooping: false,
   shouldRestart: false,
+  shouldAutoPlay: false,
+  onFinish: null,
 
   setAudio: (url, id, profileId, title) =>
     set({
@@ -44,6 +51,18 @@ export const usePlayerStore = create<PlayerState>((set) => ({
       currentTime: 0,
       isPlaying: false,
       shouldRestart: false,
+      shouldAutoPlay: false,
+    }),
+  setAudioWithAutoPlay: (url, id, profileId, title) =>
+    set({
+      audioUrl: url,
+      audioId: id,
+      profileId: profileId || null,
+      title: title || null,
+      currentTime: 0,
+      isPlaying: false,
+      shouldRestart: false,
+      shouldAutoPlay: true,
     }),
   setIsPlaying: (playing) => set({ isPlaying: playing }),
   setCurrentTime: (time) => set({ currentTime: time }),
@@ -52,6 +71,8 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   toggleLoop: () => set((state) => ({ isLooping: !state.isLooping })),
   restartCurrentAudio: () => set({ shouldRestart: true }),
   clearRestartFlag: () => set({ shouldRestart: false }),
+  clearAutoPlayFlag: () => set({ shouldAutoPlay: false }),
+  setOnFinish: (callback) => set({ onFinish: callback }),
   reset: () =>
     set({
       audioUrl: null,
@@ -63,5 +84,7 @@ export const usePlayerStore = create<PlayerState>((set) => ({
       duration: 0,
       isLooping: false,
       shouldRestart: false,
+      shouldAutoPlay: false,
+      onFinish: null,
     }),
 }));
diff --git a/app/src/stores/storyStore.ts b/app/src/stores/storyStore.ts
new file mode 100644
index 00000000..be28585a
--- /dev/null
+++ b/app/src/stores/storyStore.ts
@@ -0,0 +1,113 @@
+import { create } from 'zustand';
+import type { StoryItemDetail } from '@/lib/api/types';
+
+interface StoryPlaybackState {
+  // Selection
+  selectedStoryId: string | null;
+  setSelectedStoryId: (id: string | null) => void;
+
+  // Playback state
+  isPlaying: boolean;
+  currentTimeMs: number;
+  totalDurationMs: number;
+  playbackStoryId: string | null;
+  playbackItems: StoryItemDetail[] | null;
+
+  // Actions
+  play: (storyId: string, items: StoryItemDetail[]) => void;
+  pause: () => void;
+  stop: () => void;
+  seek: (timeMs: number) => void;
+  tick: (deltaMs: number) => void; // Called by animation frame
+}
+
+export const useStoryStore = create<StoryPlaybackState>((set, get) => ({
+  // Selection
+  selectedStoryId: null,
+  setSelectedStoryId: (id) => set({ selectedStoryId: id }),
+
+  // Playback state
+  isPlaying: false,
+  currentTimeMs: 0,
+  totalDurationMs: 0,
+  playbackStoryId: null,
+  playbackItems: null,
+
+  // Actions
+  play: (storyId, items) => {
+    // Calculate total duration from items
+    const maxEndTimeMs = Math.max(
+      ...items.map((item) => item.start_time_ms + item.duration * 1000),
+      0
+    );
+
+    // Find the minimum start time (first item)
+    const minStartTimeMs = Math.min(
+      ...items.map((item) => item.start_time_ms),
+      0
+    );
+
+    // If resuming the same story, keep position; otherwise start at first item
+    const currentState = get();
+    const shouldResume = currentState.playbackStoryId === storyId && currentState.currentTimeMs > 0;
+    const startTimeMs = shouldResume ? currentState.currentTimeMs : minStartTimeMs;
+
+    console.log('[StoryStore] Play called:', {
+      storyId,
+      itemCount: items.length,
+      items: items.map(i => ({ id: i.generation_id, start: i.start_time_ms, duration: i.duration })),
+      maxEndTimeMs,
+      minStartTimeMs,
+      startTimeMs,
+      shouldResume,
+    });
+
+    set({
+      isPlaying: true,
+      playbackStoryId: storyId,
+      playbackItems: items,
+      totalDurationMs: maxEndTimeMs,
+      currentTimeMs: startTimeMs,
+    });
+  },
+
+  pause: () => {
+    set({ isPlaying: false });
+  },
+
+  stop: () => {
+    set({
+      isPlaying: false,
+      currentTimeMs: 0,
+      playbackStoryId: null,
+      playbackItems: null,
+      totalDurationMs: 0,
+    });
+  },
+
+  seek: (timeMs) => {
+    const state = get();
+    const clampedTime = Math.max(0, Math.min(timeMs, state.totalDurationMs));
+    set({ currentTimeMs: clampedTime });
+  },
+
+  tick: (deltaMs) => {
+    const state = get();
+    if (!state.isPlaying || !state.playbackItems) {
+      return;
+    }
+
+    const newTime = state.currentTimeMs + deltaMs;
+    const clampedTime = Math.min(newTime, state.totalDurationMs);
+
+    // Auto-stop when reaching the end
+    if (clampedTime >= state.totalDurationMs) {
+      set({
+        currentTimeMs: state.totalDurationMs,
+        isPlaying: false,
+      });
+    } else {
+      set({ currentTimeMs: clampedTime });
+    }
+  },
+}));
diff --git a/backend/database.py b/backend/database.py
index 1e48d86c..0852c040 100644
--- a/backend/database.py
+++ b/backend/database.py
@@ -51,6 +51,28 @@ class Generation(Base):
     created_at = Column(DateTime, default=datetime.utcnow)
 
 
+class Story(Base):
+    """Story database model."""
+    __tablename__ = "stories"
+    
+    id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    name = Column(String, nullable=False)
+    description = Column(Text)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+
+class StoryItem(Base):
+    """Story item database model (links generations to stories)."""
+    __tablename__ = "story_items"
+    
+    id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    story_id = Column(String, ForeignKey("stories.id"), nullable=False)
+    generation_id = Column(String, ForeignKey("generations.id"), nullable=False)
+    start_time_ms = Column(Integer, nullable=False, default=0)  # Milliseconds from story start
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+
 class Project(Base):
     """Audio studio project database model."""
     __tablename__ = "projects"
@@ -108,6 +130,10 @@ def init_db():
     )
 
     SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+    
+    # Run migrations before creating tables
+    _run_migrations(engine)
+    
     Base.metadata.create_all(bind=engine)
     
     # Create default channel if it doesn't exist
@@ -136,6 +162,91 @@ def init_db():
         db.close()
 
 
+def _run_migrations(engine):
+    """Run database migrations."""
+    from sqlalchemy import inspect, text
+    
+    inspector = inspect(engine)
+    
+    # Check if story_items table exists
+    if 'story_items' not in inspector.get_table_names():
+        return  # Table doesn't exist yet, will be created fresh
+    
+    # Get columns in story_items table
+    columns = {col['name'] for col in inspector.get_columns('story_items')}
+    
+    # Migration: Remove position column and ensure start_time_ms exists
+    # SQLite doesn't support DROP COLUMN easily, so we recreate the table
+    if 'position' in columns:
+        print("Migrating story_items: removing position column, using start_time_ms")
+        
+        with engine.connect() as conn:
+            # Check if start_time_ms already exists
+            has_start_time = 'start_time_ms' in columns
+            
+            if not has_start_time:
+                # First, add the new column temporarily
+                conn.execute(text("ALTER TABLE story_items ADD COLUMN start_time_ms INTEGER DEFAULT 0"))
+                
+                # Calculate timecodes from position ordering
+                result = conn.execute(text("""
+                    SELECT si.id, si.story_id, si.position, g.duration
+                    FROM story_items si
+                    JOIN generations g ON si.generation_id = g.id
+                    ORDER BY si.story_id, si.position
+                """))
+                
+                rows = result.fetchall()
+                
+                current_story_id = None
+                current_time_ms = 0
+                
+                for row in rows:
+                    item_id, story_id, position, duration = row
+                    
+                    if story_id != current_story_id:
+                        current_story_id = story_id
+                        current_time_ms = 0
+                    
+                    conn.execute(
+                        text("UPDATE story_items SET start_time_ms = :time WHERE id = :id"),
+                        {"time": current_time_ms, "id": item_id}
+                    )
+                    
+                    current_time_ms += int(duration * 1000) + 200
+                
+                conn.commit()
+            
+            # Now recreate the table without the position column
+            # 1. Create new table
+            conn.execute(text("""
+                CREATE TABLE story_items_new (
+                    id VARCHAR PRIMARY KEY,
+                    story_id VARCHAR NOT NULL,
+                    generation_id VARCHAR NOT NULL,
+                    start_time_ms INTEGER NOT NULL DEFAULT 0,
+                    created_at DATETIME,
+                    FOREIGN KEY (story_id) REFERENCES stories(id),
+                    FOREIGN KEY (generation_id) REFERENCES generations(id)
+                )
+            """))
+            
+            # 2. Copy data
+            conn.execute(text("""
+                INSERT INTO story_items_new (id, story_id, generation_id, start_time_ms, created_at)
+                SELECT id, story_id, generation_id, start_time_ms, created_at FROM story_items
+            """))
+            
+            # 3. Drop old table
+            conn.execute(text("DROP TABLE story_items"))
+            
+            # 4. Rename new table
+            conn.execute(text("ALTER TABLE story_items_new RENAME TO story_items"))
+            
+            conn.commit()
+            print("Migrated story_items table to use start_time_ms (removed position column)")
+
+
 def get_db():
     """Get database session (generator for dependency injection)."""
     db = SessionLocal()
diff --git a/backend/main.py b/backend/main.py
index 8f110b11..b695234d 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -19,7 +19,7 @@ import io
 from pathlib import Path
 import uuid
 
-from . import database, models, profiles, history, tts, transcribe, config, export_import, channels
+from . import database, models, profiles, history, tts, transcribe, config, export_import, channels, stories
 from .database import get_db, Generation as DBGeneration, VoiceProfile as DBVoiceProfile
 from .utils.progress import get_progress_manager
 from .utils.tasks import get_task_manager
@@ -698,6 +698,154 @@ async def transcribe_audio(
         Path(tmp_path).unlink(missing_ok=True)
 
 
+# ============================================
+# STORY ENDPOINTS
+# ============================================
+
+@app.get("/stories", response_model=List[models.StoryResponse])
+async def list_stories(db: Session = Depends(get_db)):
+    """List all stories."""
+    return await stories.list_stories(db)
+
+
+@app.post("/stories", response_model=models.StoryResponse)
+async def create_story(
+    data: models.StoryCreate,
+    db: Session = Depends(get_db),
+):
+    """Create a new story."""
+    try:
+        return await stories.create_story(data, db)
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+
+@app.get("/stories/{story_id}", response_model=models.StoryDetailResponse)
+async def get_story(
+    story_id: str,
+    db: Session = Depends(get_db),
+):
+    """Get a story with all its items."""
+    story = await stories.get_story(story_id, db)
+    if not story:
+        raise HTTPException(status_code=404, detail="Story not found")
+    return story
+
+
+@app.put("/stories/{story_id}", response_model=models.StoryResponse)
+async def update_story(
+    story_id: str,
+    data: models.StoryCreate,
+    db: Session = Depends(get_db),
+):
+    """Update a story."""
+    story = await stories.update_story(story_id, data, db)
+    if not story:
+        raise HTTPException(status_code=404, detail="Story not found")
+    return story
+
+
+@app.delete("/stories/{story_id}")
+async def delete_story(
+    story_id: str,
+    db: Session = Depends(get_db),
+):
+    """Delete a story."""
+    success = await stories.delete_story(story_id, db)
+    if not success:
+        raise HTTPException(status_code=404, detail="Story not found")
+    return {"message": "Story deleted successfully"}
+
+
+@app.post("/stories/{story_id}/items", response_model=models.StoryItemDetail)
+async def add_story_item(
+    story_id: str,
+    data: models.StoryItemCreate,
+    db: Session = Depends(get_db),
+):
+    """Add a generation to a story."""
+    item = await stories.add_item_to_story(story_id, data, db)
+    if not item:
+        raise HTTPException(status_code=404, detail="Story or generation not found")
+    return item
+
+
+@app.delete("/stories/{story_id}/items/{generation_id}")
+async def remove_story_item(
+    story_id: str,
+    generation_id: str,
+    db: Session = Depends(get_db),
+):
+    """Remove a generation from a story."""
+    success = await stories.remove_item_from_story(story_id, generation_id, db)
+    if not success:
+        raise HTTPException(status_code=404, detail="Story item not found")
+    return {"message": "Item removed successfully"}
+
+
+@app.put("/stories/{story_id}/items/times")
+async def update_story_item_times(
+    story_id: str,
+    data: models.StoryItemBatchUpdate,
+    db: Session = Depends(get_db),
+):
+    """Update story item timecodes."""
+    success = await stories.update_story_item_times(story_id, data, db)
+    if not success:
+        raise HTTPException(status_code=400, detail="Invalid timecode update request")
+    return {"message": "Item timecodes updated successfully"}
+
+
+@app.put("/stories/{story_id}/items/reorder", response_model=List[models.StoryItemDetail])
+async def reorder_story_items(
+    story_id: str,
+    data: models.StoryItemReorder,
+    db: Session = Depends(get_db),
+):
+    """Reorder story items and recalculate timecodes."""
+    items = await stories.reorder_story_items(story_id, data.generation_ids, db)
+    if items is None:
+        raise HTTPException(status_code=400, detail="Invalid reorder request - ensure all generation IDs belong to this story")
+    return items
+
+
+@app.get("/stories/{story_id}/export-audio")
+async def export_story_audio(
+    story_id: str,
+    db: Session = Depends(get_db),
+):
+    """Export story as single mixed audio file with timecode-based mixing."""
+    try:
+        # Get story to create filename
+        story = db.query(database.Story).filter_by(id=story_id).first()
+        if not story:
+            raise HTTPException(status_code=404, detail="Story not found")
+        
+        # Export audio
+        audio_bytes = await stories.export_story_audio(story_id, db)
+        if not audio_bytes:
+            raise HTTPException(status_code=400, detail="Story has no audio items")
+        
+        # Create safe filename
+        safe_name = "".join(c for c in story.name if c.isalnum() or c in (' ', '-', '_')).strip()
+        if not safe_name:
+            safe_name = "story"
+        filename = f"{safe_name}.wav"
+        
+        # Return as streaming response
+        return StreamingResponse(
+            io.BytesIO(audio_bytes),
+            media_type="audio/wav",
+            headers={
+                "Content-Disposition": f'attachment; filename="{filename}"'
+            }
+        )
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 # ============================================
 # FILE SERVING
 # ============================================
diff --git a/backend/models.py b/backend/models.py
index 3c7af507..235f66d6 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -193,3 +193,79 @@ class ChannelVoiceAssignment(BaseModel):
 class ProfileChannelAssignment(BaseModel):
     """Request model for assigning channels to a profile."""
     channel_ids: List[str]
+
+
+class StoryCreate(BaseModel):
+    """Request model for creating a story."""
+    name: str = Field(..., min_length=1, max_length=100)
+    description: Optional[str] = Field(None, max_length=500)
+
+
+class StoryResponse(BaseModel):
+    """Response model for story (list view)."""
+    id: str
+    name: str
+    description: Optional[str]
+    created_at: datetime
+    updated_at: datetime
+    item_count: int = 0
+
+    class Config:
+        from_attributes = True
+
+
+class StoryItemDetail(BaseModel):
+    """Detail model for story item with generation info."""
+    id: str
+    story_id: str
+    generation_id: str
+    start_time_ms: int
+    created_at: datetime
+    # Generation details
+    profile_id: str
+    profile_name: str
+    text: str
+    language: str
+    audio_path: str
+    duration: float
+    seed: Optional[int]
+    instruct: Optional[str]
+    generation_created_at: datetime
+
+    class Config:
+        from_attributes = True
+
+
+class StoryDetailResponse(BaseModel):
+    """Response model for story with items."""
+    id: str
+    name: str
+    description: Optional[str]
+    created_at: datetime
+    updated_at: datetime
+    items: List[StoryItemDetail] = []
+
+    class Config:
+        from_attributes = True
+
+
+class StoryItemCreate(BaseModel):
+    """Request model for adding a generation to a story."""
+    generation_id: str
+    start_time_ms: Optional[int] = None  # If not provided, will be calculated automatically
+
+
+class StoryItemUpdateTime(BaseModel):
+    """Request model for updating a story item's timecode."""
+    generation_id: str
+    start_time_ms: int = Field(..., ge=0)
+
+
+class StoryItemBatchUpdate(BaseModel):
+    """Request model for batch updating story item timecodes."""
+    updates: List[StoryItemUpdateTime]
+
+
+class StoryItemReorder(BaseModel):
+    """Request model for reordering story items."""
+    generation_ids: List[str] = Field(..., min_length=1)
diff --git a/backend/stories.py b/backend/stories.py
new file mode 100644
index 00000000..19b8bf86
--- /dev/null
+++ b/backend/stories.py
@@ -0,0 +1,598 @@
+"""
+Story management module.
+"""
+
+from typing import List, Optional
+from datetime import datetime
+import uuid
+import tempfile
+from pathlib import Path
+from sqlalchemy.orm import Session
+from sqlalchemy import func
+
+from .models import (
+    StoryCreate,
+    StoryResponse,
+    StoryDetailResponse,
+    StoryItemDetail,
+    StoryItemCreate,
+    StoryItemBatchUpdate,
+)
+from .database import Story as DBStory, StoryItem as DBStoryItem, Generation as DBGeneration, VoiceProfile as DBVoiceProfile
+from .utils.audio import load_audio, save_audio
+import numpy as np
+
+
+async def create_story(
+    data: StoryCreate,
+    db: Session,
+) -> StoryResponse:
+    """
+    Create a new story.
+
+    Args:
+        data: Story creation data
+        db: Database session
+
+    Returns:
+        Created story
+    """
+    db_story = DBStory(
+        id=str(uuid.uuid4()),
+        name=data.name,
+        description=data.description,
+        created_at=datetime.utcnow(),
+        updated_at=datetime.utcnow(),
+    )
+
+    db.add(db_story)
+    db.commit()
+    db.refresh(db_story)
+
+    # Get item count
+    item_count = db.query(func.count(DBStoryItem.id)).filter(
+        DBStoryItem.story_id == db_story.id
+    ).scalar()
+
+    response = StoryResponse.model_validate(db_story)
+    response.item_count = item_count
+    return response
+
+
+async def list_stories(
+    db: Session,
+) -> List[StoryResponse]:
+    """
+    List all stories.
+
+    Args:
+        db: Database session
+
+    Returns:
+        List of stories with item counts
+    """
+    stories = db.query(DBStory).order_by(DBStory.updated_at.desc()).all()
+    
+    result = []
+    for story in stories:
+        item_count = db.query(func.count(DBStoryItem.id)).filter(
+            DBStoryItem.story_id == story.id
+        ).scalar()
+        
+        response = StoryResponse.model_validate(story)
+        response.item_count = item_count
+        result.append(response)
+    
+    return result
+
+
+async def get_story(
+    story_id: str,
+    db: Session,
+) -> Optional[StoryDetailResponse]:
+    """
+    Get a story with all its items.
+
+    Args:
+        story_id: Story ID
+        db: Database session
+
+    Returns:
+        Story with items or None if not found
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return None
+
+    # Get all items ordered by start_time_ms
+    items = db.query(
+        DBStoryItem,
+        DBGeneration,
+        DBVoiceProfile.name.label('profile_name')
+    ).join(
+        DBGeneration,
+        DBStoryItem.generation_id == DBGeneration.id
+    ).join(
+        DBVoiceProfile,
+        DBGeneration.profile_id == DBVoiceProfile.id
+    ).filter(
+        DBStoryItem.story_id == story_id
+    ).order_by(DBStoryItem.start_time_ms).all()
+
+    # Build item details
+    item_details = []
+    for item, generation, profile_name in items:
+        item_detail = StoryItemDetail(
+            id=item.id,
+            story_id=item.story_id,
+            generation_id=item.generation_id,
+            start_time_ms=item.start_time_ms,
+            created_at=item.created_at,
+            profile_id=generation.profile_id,
+            profile_name=profile_name,
+            text=generation.text,
+            language=generation.language,
+            audio_path=generation.audio_path,
+            duration=generation.duration,
+            seed=generation.seed,
+            instruct=generation.instruct,
+            generation_created_at=generation.created_at,
+        )
+        item_details.append(item_detail)
+
+    response = StoryDetailResponse.model_validate(story)
+    response.items = item_details
+    return response
+
+
+async def update_story(
+    story_id: str,
+    data: StoryCreate,
+    db: Session,
+) -> Optional[StoryResponse]:
+    """
+    Update a story.
+
+    Args:
+        story_id: Story ID
+        data: Update data
+        db: Database session
+
+    Returns:
+        Updated story or None if not found
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return None
+
+    story.name = data.name
+    story.description = data.description
+    story.updated_at = datetime.utcnow()
+
+    db.commit()
+    db.refresh(story)
+
+    # Get item count
+    item_count = db.query(func.count(DBStoryItem.id)).filter(
+        DBStoryItem.story_id == story.id
+    ).scalar()
+
+    response = StoryResponse.model_validate(story)
+    response.item_count = item_count
+    return response
+
+
+async def delete_story(
+    story_id: str,
+    db: Session,
+) -> bool:
+    """
+    Delete a story and all its items.
+
+    Args:
+        story_id: Story ID
+        db: Database session
+
+    Returns:
+        True if deleted, False if not found
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return False
+
+    # Delete all items
+    db.query(DBStoryItem).filter_by(story_id=story_id).delete()
+
+    # Delete story
+    db.delete(story)
+    db.commit()
+
+    return True
+
+
+async def add_item_to_story(
+    story_id: str,
+    data: StoryItemCreate,
+    db: Session,
+) -> Optional[StoryItemDetail]:
+    """
+    Add a generation to a story.
+
+    Args:
+        story_id: Story ID
+        data: Item creation data
+        db: Database session
+
+    Returns:
+        Created item detail or None if story/generation not found
+    """
+    # Verify story exists
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return None
+
+    # Verify generation exists
+    generation = db.query(DBGeneration).filter_by(id=data.generation_id).first()
+    if not generation:
+        return None
+
+    # Check if generation is already in story
+    existing = db.query(DBStoryItem).filter_by(
+        story_id=story_id,
+        generation_id=data.generation_id
+    ).first()
+    if existing:
+        # Return existing item
+        profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
+        return StoryItemDetail(
+            id=existing.id,
+            story_id=existing.story_id,
+            generation_id=existing.generation_id,
+            start_time_ms=existing.start_time_ms,
+            created_at=existing.created_at,
+            profile_id=generation.profile_id,
+            profile_name=profile.name if profile else "Unknown",
+            text=generation.text,
+            language=generation.language,
+            audio_path=generation.audio_path,
+            duration=generation.duration,
+            seed=generation.seed,
+            instruct=generation.instruct,
+            generation_created_at=generation.created_at,
+        )
+
+    # Calculate start_time_ms if not provided
+    if data.start_time_ms is not None:
+        start_time_ms = data.start_time_ms
+    else:
+        # Find the maximum end time (start_time_ms + duration_ms) of existing items
+        existing_items = db.query(
+            DBStoryItem,
+            DBGeneration
+        ).join(
+            DBGeneration,
+            DBStoryItem.generation_id == DBGeneration.id
+        ).filter(
+            DBStoryItem.story_id == story_id
+        ).all()
+        
+        if not existing_items:
+            # First item starts at 0
+            start_time_ms = 0
+        else:
+            max_end_time_ms = 0
+            for item, gen in existing_items:
+                item_end_ms = item.start_time_ms + int(gen.duration * 1000)
+                max_end_time_ms = max(max_end_time_ms, item_end_ms)
+            
+            # Add 200ms gap after the last item
+            start_time_ms = max_end_time_ms + 200
+
+    # Create item
+    item = DBStoryItem(
+        id=str(uuid.uuid4()),
+        story_id=story_id,
+        generation_id=data.generation_id,
+        start_time_ms=start_time_ms,
+        created_at=datetime.utcnow(),
+    )
+
+    db.add(item)
+    
+    # Update story updated_at
+    story.updated_at = datetime.utcnow()
+    
+    db.commit()
+    db.refresh(item)
+
+    # Get profile name
+    profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
+
+    return StoryItemDetail(
+        id=item.id,
+        story_id=item.story_id,
+        generation_id=item.generation_id,
+        start_time_ms=item.start_time_ms,
+        created_at=item.created_at,
+        profile_id=generation.profile_id,
+        profile_name=profile.name if profile else "Unknown",
+        text=generation.text,
+        language=generation.language,
+        audio_path=generation.audio_path,
+        duration=generation.duration,
+        seed=generation.seed,
+        instruct=generation.instruct,
+        generation_created_at=generation.created_at,
+    )
+
+
+async def remove_item_from_story(
+    story_id: str,
+    generation_id: str,
+    db: Session,
+) -> bool:
+    """
+    Remove a generation from a story.
+
+    Args:
+        story_id: Story ID
+        generation_id: Generation ID to remove
+        db: Database session
+
+    Returns:
+        True if removed, False if not found
+    """
+    item = db.query(DBStoryItem).filter_by(
+        story_id=story_id,
+        generation_id=generation_id
+    ).first()
+    if not item:
+        return False
+
+    # Delete item
+    db.delete(item)
+
+    # Update story updated_at
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if story:
+        story.updated_at = datetime.utcnow()
+
+    db.commit()
+    return True
+
+
+async def update_story_item_times(
+    story_id: str,
+    data: StoryItemBatchUpdate,
+    db: Session,
+) -> bool:
+    """
+    Update story item timecodes.
+
+    Args:
+        story_id: Story ID
+        data: Batch update data with timecodes
+        db: Database session
+
+    Returns:
+        True if updated, False if story not found or invalid
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return False
+
+    # Get all items for this story
+    items = db.query(DBStoryItem).filter_by(story_id=story_id).all()
+    item_map = {item.generation_id: item for item in items}
+
+    # Verify all generation IDs belong to this story and update timecodes
+    for update in data.updates:
+        if update.generation_id not in item_map:
+            return False
+        item_map[update.generation_id].start_time_ms = update.start_time_ms
+
+    # Update story updated_at
+    story.updated_at = datetime.utcnow()
+
+    db.commit()
+    return True
+
+
+async def reorder_story_items(
+    story_id: str,
+    generation_ids: List[str],
+    db: Session,
+    gap_ms: int = 200,
+) -> Optional[List[StoryItemDetail]]:
+    """
+    Reorder story items and recalculate timecodes.
+
+    Args:
+        story_id: Story ID
+        generation_ids: List of generation IDs in the desired order
+        db: Database session
+        gap_ms: Gap in milliseconds between items (default 200ms)
+
+    Returns:
+        Updated list of story items with new timecodes, or None if invalid
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return None
+
+    # Get all items for this story with their generation data
+    items_with_gen = db.query(
+        DBStoryItem,
+        DBGeneration,
+        DBVoiceProfile.name.label('profile_name')
+    ).join(
+        DBGeneration,
+        DBStoryItem.generation_id == DBGeneration.id
+    ).join(
+        DBVoiceProfile,
+        DBGeneration.profile_id == DBVoiceProfile.id
+    ).filter(
+        DBStoryItem.story_id == story_id
+    ).all()
+
+    # Create maps for quick lookup
+    item_map = {item.generation_id: (item, gen, profile_name) for item, gen, profile_name in items_with_gen}
+
+    # Verify all generation IDs belong to this story
+    if set(generation_ids) != set(item_map.keys()):
+        return None
+
+    # Recalculate timecodes based on new order
+    current_time_ms = 0
+    updated_items = []
+
+    for gen_id in generation_ids:
+        item, generation, profile_name = item_map[gen_id]
+        
+        # Update the item's start time
+        item.start_time_ms = current_time_ms
+        
+        # Calculate the duration in ms
+        duration_ms = int(generation.duration * 1000)
+        
+        # Move to next position (current end + gap)
+        current_time_ms += duration_ms + gap_ms
+
+        # Build the response item
+        updated_items.append(StoryItemDetail(
+            id=item.id,
+            story_id=item.story_id,
+            generation_id=item.generation_id,
+            start_time_ms=item.start_time_ms,
+            created_at=item.created_at,
+            profile_id=generation.profile_id,
+            profile_name=profile_name,
+            text=generation.text,
+            language=generation.language,
+            audio_path=generation.audio_path,
+            duration=generation.duration,
+            seed=generation.seed,
+            instruct=generation.instruct,
+            generation_created_at=generation.created_at,
+        ))
+
+    # Update story updated_at
+    story.updated_at = datetime.utcnow()
+
+    db.commit()
+    return updated_items
+
+
+async def export_story_audio(
+    story_id: str,
+    db: Session,
+) -> Optional[bytes]:
+    """
+    Export story as single mixed audio file with timecode-based mixing.
+
+    Args:
+        story_id: Story ID
+        db: Database session
+
+    Returns:
+        Audio file bytes or None if story not found
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return None
+
+    # Get all items ordered by start_time_ms
+    items = db.query(
+        DBStoryItem,
+        DBGeneration
+    ).join(
+        DBGeneration,
+        DBStoryItem.generation_id == DBGeneration.id
+    ).filter(
+        DBStoryItem.story_id == story_id
+    ).order_by(DBStoryItem.start_time_ms).all()
+
+    if not items:
+        return None
+
+    # Load all audio files and calculate total duration
+    audio_data = []
+    sample_rate = 24000  # Default sample rate
+
+    for item, generation in items:
+        audio_path = Path(generation.audio_path)
+        if not audio_path.exists():
+            continue
+
+        try:
+            audio, sr = load_audio(str(audio_path), sample_rate=sample_rate)
+            sample_rate = sr  # Use actual sample rate from first file
+            
+            # Store audio with its timecode info
+            start_time_ms = item.start_time_ms
+            duration_ms = int(generation.duration * 1000)
+            
+            audio_data.append({
+                'audio': audio,
+                'start_time_ms': start_time_ms,
+                'duration_ms': duration_ms,
+            })
+        except Exception:
+            # Skip files that can't be loaded
+            continue
+
+    if not audio_data:
+        return None
+
+    # Calculate total duration: max(start_time_ms + duration_ms)
+    max_end_time_ms = max(
+        (data['start_time_ms'] + data['duration_ms'] for data in audio_data),
+        default=0
+    )
+    
+    # Convert to samples
+    total_samples = int((max_end_time_ms / 1000.0) * sample_rate)
+    
+    # Create output buffer initialized to zeros
+    final_audio = np.zeros(total_samples, dtype=np.float32)
+
+    # Mix each audio segment at its timecode position
+    for data in audio_data:
+        audio = data['audio']
+        start_time_ms = data['start_time_ms']
+        
+        # Calculate start sample index
+        start_sample = int((start_time_ms / 1000.0) * sample_rate)
+        
+        # Ensure we don't exceed buffer bounds
+        audio_length = len(audio)
+        end_sample = min(start_sample + audio_length, total_samples)
+        
+        if start_sample < total_samples:
+            # Trim audio if it extends beyond buffer
+            audio_to_mix = audio[:end_sample - start_sample]
+            
+            # Mix: add audio to existing buffer (overlapping audio will sum)
+            # Normalize to prevent clipping (simple approach: divide by max)
+            final_audio[start_sample:end_sample] += audio_to_mix
+
+    # Normalize to prevent clipping
+    max_val = np.abs(final_audio).max()
+    if max_val > 1.0:
+        final_audio = final_audio / max_val
+
+    # Save to temporary file
+    with tempfile.NamedTemporaryFile(suffix='.wav', delete=False) as tmp:
+        tmp_path = tmp.name
+
+    try:
+        save_audio(final_audio, tmp_path, sample_rate)
+
+        # Read file bytes
+        with open(tmp_path, 'rb') as f:
+            audio_bytes = f.read()
+
+        return audio_bytes
+    finally:
+        # Clean up temp file
+        Path(tmp_path).unlink(missing_ok=True)
diff --git a/bun.lock b/bun.lock
index ee866528..7b7a328b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -13,8 +13,11 @@
     },
     "app": {
       "name": "@voicebox/app",
-      "version": "0.1.4",
+      "version": "0.1.5",
       "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@hookform/resolvers": "^3.9.0",
         "@radix-ui/react-alert-dialog": "^1.1.1",
         "@radix-ui/react-avatar": "^1.1.0",
@@ -64,7 +67,7 @@
     },
     "landing": {
       "name": "@voicebox/landing",
-      "version": "0.1.4",
+      "version": "0.1.5",
       "dependencies": {
         "@radix-ui/react-separator": "^1.1.8",
         "@radix-ui/react-slot": "^1.2.4",
@@ -89,7 +92,7 @@
     },
     "tauri": {
       "name": "@voicebox/tauri",
-      "version": "0.1.4",
+      "version": "0.1.5",
       "dependencies": {
         "@tauri-apps/api": "^2.0.0",
         "@tauri-apps/plugin-shell": "^2.0.0",
@@ -108,7 +111,7 @@
     },
     "web": {
       "name": "@voicebox/web",
-      "version": "0.1.4",
+      "version": "0.1.5",
       "dependencies": {
         "@tanstack/react-query": "^5.0.0",
         "react": "^18.3.0",
@@ -189,6 +192,14 @@
 
     "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.3.12", "", { "os": "win32", "cpu": "x64" }, "sha512-qqGVWqNNek0KikwPZlOIoxtXgsNGsX+rgdEzgw82Re8nF02W+E2WokaQhpF5TdBh/D/RQ3TLppH+otp6ztN0lw=="],
 
+    "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="],
+
+    "@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
+
+    "@dnd-kit/sortable": ["@dnd-kit/sortable@10.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg=="],
+
+    "@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="],
+
     "@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
 
     "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.21.5", "", { "os": "aix", "cpu": "ppc64" }, "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ=="],
diff --git a/tauri/src-tauri/gen/Assets.car b/tauri/src-tauri/gen/Assets.car
index 6a91b5e60ea18893accdfada8771a204400c4698..cefe2feabadaf6de2cdd32cdb1d235d40afbe776 100644
GIT binary patch
delta 779
zcmZwFy>62+6b9giP)MPn{1s>^kOJZVG`2tgGVsO6_NQJ#M>aOZ$lf7Yq2eAoB6Ubc
z?f@=;5s8R_6-M5u$`mX;>-*ZrXZ-V5YYd;i_PgDcm6df^gU-qK{*R5Lo*jO)y`wK?
zc=Fl~+O-hI3F$o*7c}XtEXCjw#ik_YtV~rTRmw<1Vt!<jA<1N-4SVn2zWK1beK-rF
zS!lr-Xv0}pg>!IzG7FuuS{tdO2r3g>$E1~s6q8`eK}jn)G_3q`PxPF{Y0u7NTz5XT
z>!#6_S3y!_ZAn|z5DQtTYE05f8|m|Zf;d~57eVh+XR}pn&y|-UlChy8UCKNtW)ddr
z;9L@s!}5*TWuq2Bv)tKg*NL69RZLWpHl(9f6s#*0ol_CxE52C{QrS4uoCe(*9qe~t
z4KBb%ScfiLf(^I~SKumKgX^#fH{d4BGqzwGZo>}TfxB=Idaw)k;Q>5^K0JcQ@C2U1
zv&q5!^S^&yS)T=qOj&t>?<$(uG@49S^R)<$4KEExN!3(*`ljvC@$dx@?7;v8NKjCL
z1~WMx+R5)adDdRWLONj?brylx>q1I+W>G2^vt25b+1p$#3a0}%nhrdK$#n4Y+u=XX
C@7X#4

delta 779
zcmZwFxo%TI6b4`$6L26VYyn~daR9TQc=m;Y>pPqB2r2345G8#IyM>5%NQso<rsNIa
z0Vt8MC}^SNw@fNC($}8<EHnM_vpt1RUxvNaR;$&89;_XI8-8Cu9GLM3GdTRL$H%YC
zs8iKE)GkX+#RW&I=A0a>H8~}X=UPUWBU#V6A~t{A>L`5hQH$NTZ(hIO=^xDeWais&
z20CySR^S|*Z)U!mSE`U=bU|2>s`kiHjGX3$Vkj!Jth0=1Ij2@Z#6`|lGp)KGJC&2x
z3!yUFDV&tGih^g6gcQ7ZnG;uKxlj<v`qM)1Vt1omahH54x)9H~kcvuCt+FR(>ga53
zwbcLXC|eOu3(Zn@6DxEkB(D-?kr++*M75BG1Pe)qD4aEHsiQg+8Ox&3t;zmg7gpf{
zT!b~~!6jIS%Wws*!Zo-K8*l?|!o0>N^x-ya!5z2@+c1C~xCi&)0Sw_GJc7sY1fDkg
zd(Zy-ei^yY9zUX#oJl1o$)$ibg=DZL=Q-2MGco2FU(D2>9F3m?!7hw|0S5sR6zJw?
yY?@ycFD^M(!aR_XDmVmgrYQ@abTN_#>6QY0495KXAN|S6$btjkoQz(4J@^ZB3)!^*


From 1cf90c81ddae4080c5f62d6f2d19c8971a756709 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 28 Jan 2026 19:35:53 -0800
Subject: [PATCH 2/9] Enhance story item management with track editing
 functionality

- Introduced StoryTrackEditor component for managing story item positions and tracks.
- Updated StoriesTab to conditionally render the track editor based on selected story.
- Implemented moveStoryItem API endpoint to handle item repositioning and track changes.
- Enhanced story item data model to include track information.
- Improved audio playback management to support multiple tracks using Web Audio API.
- Added hooks for moving story items and managing playback timing.
---
 app/src/components/StoriesTab/StoriesTab.tsx  |  39 +-
 .../StoriesTab/StoryTrackEditor.tsx           | 388 +++++++++++++++
 app/src/lib/api/client.ts                     |   8 +
 app/src/lib/api/types.ts                      |   7 +
 app/src/lib/hooks/useStories.ts               |  15 +-
 app/src/lib/hooks/useStoryPlayback.ts         | 453 ++++++++++++------
 app/src/stores/storyStore.ts                  |  44 +-
 backend/database.py                           |  11 +
 backend/main.py                               |  14 +
 backend/models.py                             |   8 +
 backend/stories.py                            |  74 +++
 tauri/src-tauri/gen/Assets.car                | Bin 3847048 -> 3847048 bytes
 12 files changed, 891 insertions(+), 170 deletions(-)
 create mode 100644 app/src/components/StoriesTab/StoryTrackEditor.tsx

diff --git a/app/src/components/StoriesTab/StoriesTab.tsx b/app/src/components/StoriesTab/StoriesTab.tsx
index 70001465..2e900666 100644
--- a/app/src/components/StoriesTab/StoriesTab.tsx
+++ b/app/src/components/StoriesTab/StoriesTab.tsx
@@ -1,25 +1,42 @@
 import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox';
 import { StoryContent } from './StoryContent';
 import { StoryList } from './StoryList';
+import { StoryTrackEditor } from './StoryTrackEditor';
 import { usePlayerStore } from '@/stores/playerStore';
+import { useStoryStore } from '@/stores/storyStore';
+import { useStory } from '@/lib/hooks/useStories';
 
 export function StoriesTab() {
   const audioUrl = usePlayerStore((state) => state.audioUrl);
+  const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
+  const { data: story } = useStory(selectedStoryId);
+
+  const hasTrackEditor = selectedStoryId && story && story.items.length > 0;
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full min-h-0 overflow-hidden relative">
-      {/* Left Column - Story List */}
-      <div className="flex flex-col min-h-0 overflow-hidden">
-        <StoryList />
+    <div className="flex flex-col h-full min-h-0 overflow-hidden">
+      {/* Main content area */}
+      <div className="flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-2 gap-6 overflow-hidden relative">
+        {/* Left Column - Story List */}
+        <div className="flex flex-col min-h-0 overflow-hidden">
+          <StoryList />
+        </div>
+
+        {/* Right Column - Story Content */}
+        <div className="flex flex-col min-h-0 overflow-hidden">
+          <StoryContent />
+        </div>
+
+        {/* Floating Generate Box */}
+        <FloatingGenerateBox isPlayerOpen={!!audioUrl || !!hasTrackEditor} showVoiceSelector />
       </div>
 
-      {/* Right Column - Story Content */}
-      <div className="flex flex-col min-h-0 overflow-hidden">
-        <StoryContent />
-      </div>
-
-      {/* Floating Generate Box */}
-      <FloatingGenerateBox isPlayerOpen={!!audioUrl} showVoiceSelector />
+      {/* Track Editor - at bottom when a story with items is selected */}
+      {hasTrackEditor && (
+        <div className="shrink-0 mt-4 px-1">
+          <StoryTrackEditor storyId={story.id} items={story.items} />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/app/src/components/StoriesTab/StoryTrackEditor.tsx b/app/src/components/StoriesTab/StoryTrackEditor.tsx
new file mode 100644
index 00000000..34e4d982
--- /dev/null
+++ b/app/src/components/StoriesTab/StoryTrackEditor.tsx
@@ -0,0 +1,388 @@
+import { GripHorizontal, Minus, Plus } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/use-toast';
+import { useMoveStoryItem } from '@/lib/hooks/useStories';
+import { useStoryStore } from '@/stores/storyStore';
+import type { StoryItemDetail } from '@/lib/api/types';
+import { cn } from '@/lib/utils/cn';
+
+interface StoryTrackEditorProps {
+  storyId: string;
+  items: StoryItemDetail[];
+}
+
+const TRACK_HEIGHT = 48;
+const MIN_PIXELS_PER_SECOND = 10;
+const MAX_PIXELS_PER_SECOND = 200;
+const DEFAULT_PIXELS_PER_SECOND = 50;
+const DEFAULT_TRACKS = [1, 0, -1]; // Default 3 tracks
+const MIN_EDITOR_HEIGHT = 120;
+const MAX_EDITOR_HEIGHT = 500;
+const DEFAULT_EDITOR_HEIGHT = 200;
+
+export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
+  const [pixelsPerSecond, setPixelsPerSecond] = useState(DEFAULT_PIXELS_PER_SECOND);
+  const [draggingItem, setDraggingItem] = useState<string | null>(null);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
+  const [editorHeight, setEditorHeight] = useState(DEFAULT_EDITOR_HEIGHT);
+  const [isResizing, setIsResizing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tracksRef = useRef<HTMLDivElement>(null);
+  const resizeStartY = useRef(0);
+  const resizeStartHeight = useRef(0);
+  const moveItem = useMoveStoryItem();
+  const { toast } = useToast();
+
+  // Playback state
+  const currentTimeMs = useStoryStore((state) => state.currentTimeMs);
+  const playbackStoryId = useStoryStore((state) => state.playbackStoryId);
+  const seek = useStoryStore((state) => state.seek);
+
+  const isActiveStory = playbackStoryId === storyId;
+
+  // Calculate unique tracks from items, always showing at least 3 default tracks
+  const tracks = useMemo(() => {
+    const trackSet = new Set([...DEFAULT_TRACKS, ...items.map((item) => item.track)]);
+    return Array.from(trackSet).sort((a, b) => b - a); // Higher tracks on top
+  }, [items]);
+
+  // Calculate total duration
+  const totalDurationMs = useMemo(() => {
+    if (items.length === 0) return 10000; // Default 10 seconds
+    return Math.max(
+      ...items.map((item) => item.start_time_ms + item.duration * 1000),
+      10000
+    );
+  }, [items]);
+
+  // Calculate timeline width
+  const timelineWidth = (totalDurationMs / 1000) * pixelsPerSecond + 200; // Extra padding
+
+  // Generate time markers
+  const timeMarkers = useMemo(() => {
+    const markers: number[] = [];
+    // Determine interval based on zoom level
+    let intervalMs = 5000; // 5 seconds
+    if (pixelsPerSecond > 100) intervalMs = 1000;
+    else if (pixelsPerSecond > 50) intervalMs = 2000;
+    else if (pixelsPerSecond < 20) intervalMs = 10000;
+
+    for (let ms = 0; ms <= totalDurationMs + intervalMs; ms += intervalMs) {
+      markers.push(ms);
+    }
+    return markers;
+  }, [totalDurationMs, pixelsPerSecond]);
+
+  const formatTime = (ms: number): string => {
+    const totalSeconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  const msToPixels = useCallback(
+    (ms: number) => (ms / 1000) * pixelsPerSecond,
+    [pixelsPerSecond]
+  );
+
+  const pixelsToMs = useCallback(
+    (px: number) => (px / pixelsPerSecond) * 1000,
+    [pixelsPerSecond]
+  );
+
+  const handleZoomIn = () => {
+    setPixelsPerSecond((prev) => Math.min(prev * 1.5, MAX_PIXELS_PER_SECOND));
+  };
+
+  const handleZoomOut = () => {
+    setPixelsPerSecond((prev) => Math.max(prev / 1.5, MIN_PIXELS_PER_SECOND));
+  };
+
+  // Resize handlers
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsResizing(true);
+    resizeStartY.current = e.clientY;
+    resizeStartHeight.current = editorHeight;
+  }, [editorHeight]);
+
+  const handleResizeMove = useCallback((e: MouseEvent) => {
+    if (!isResizing) return;
+    const deltaY = resizeStartY.current - e.clientY;
+    const newHeight = Math.min(
+      MAX_EDITOR_HEIGHT,
+      Math.max(MIN_EDITOR_HEIGHT, resizeStartHeight.current + deltaY)
+    );
+    setEditorHeight(newHeight);
+  }, [isResizing]);
+
+  const handleResizeEnd = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  // Add global mouse listeners for resizing
+  useEffect(() => {
+    if (isResizing) {
+      window.addEventListener('mousemove', handleResizeMove);
+      window.addEventListener('mouseup', handleResizeEnd);
+      return () => {
+        window.removeEventListener('mousemove', handleResizeMove);
+        window.removeEventListener('mouseup', handleResizeEnd);
+      };
+    }
+  }, [isResizing, handleResizeMove, handleResizeEnd]);
+
+  const handleTimelineClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!tracksRef.current || draggingItem) return;
+    const rect = tracksRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left + tracksRef.current.scrollLeft;
+    const timeMs = Math.max(0, pixelsToMs(x));
+    seek(timeMs);
+  };
+
+  const handleDragStart = (
+    e: React.MouseEvent,
+    item: StoryItemDetail
+  ) => {
+    e.stopPropagation();
+    if (!tracksRef.current) return;
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    setDragOffset({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+    setDragPosition({
+      x: rect.left - tracksRef.current.getBoundingClientRect().left + tracksRef.current.scrollLeft,
+      y: rect.top - tracksRef.current.getBoundingClientRect().top,
+    });
+    setDraggingItem(item.generation_id);
+  };
+
+  const handleDragMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!draggingItem || !tracksRef.current) return;
+
+      const rect = tracksRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left + tracksRef.current.scrollLeft - dragOffset.x;
+      const y = e.clientY - rect.top - dragOffset.y;
+
+      setDragPosition({ x: Math.max(0, x), y });
+    },
+    [draggingItem, dragOffset]
+  );
+
+  const handleDragEnd = useCallback(() => {
+    if (!draggingItem || !tracksRef.current) {
+      setDraggingItem(null);
+      return;
+    }
+
+    const item = items.find((i) => i.generation_id === draggingItem);
+    if (!item) {
+      setDraggingItem(null);
+      return;
+    }
+
+    // Calculate new time from x position
+    const newTimeMs = Math.max(0, Math.round(pixelsToMs(dragPosition.x)));
+
+    // Calculate new track from y position
+    const trackIndex = Math.floor(dragPosition.y / TRACK_HEIGHT);
+    const clampedTrackIndex = Math.max(0, Math.min(trackIndex, tracks.length - 1));
+    const newTrack = tracks[clampedTrackIndex] ?? 0;
+
+    // Check if position changed
+    if (newTimeMs !== item.start_time_ms || newTrack !== item.track) {
+      moveItem.mutate(
+        {
+          storyId,
+          generationId: item.generation_id,
+          data: {
+            start_time_ms: newTimeMs,
+            track: newTrack,
+          },
+        },
+        {
+          onError: (error) => {
+            toast({
+              title: 'Failed to move item',
+              description: error.message,
+              variant: 'destructive',
+            });
+          },
+        }
+      );
+    }
+
+    setDraggingItem(null);
+  }, [draggingItem, dragPosition, items, tracks, pixelsToMs, storyId, moveItem, toast]);
+
+  // Get track index for rendering
+  const getTrackIndex = (trackNumber: number) => tracks.indexOf(trackNumber);
+
+  // Calculate clip position and dimensions
+  const getClipStyle = (item: StoryItemDetail) => {
+    const isDragging = draggingItem === item.generation_id;
+    const trackIndex = getTrackIndex(item.track);
+    const width = msToPixels(item.duration * 1000);
+    const left = isDragging ? dragPosition.x : msToPixels(item.start_time_ms);
+    const top = isDragging ? dragPosition.y : trackIndex * TRACK_HEIGHT;
+
+    return {
+      width: `${width}px`,
+      left: `${left}px`,
+      top: `${top}px`,
+      height: `${TRACK_HEIGHT - 4}px`,
+    };
+  };
+
+  // Playhead position
+  const playheadLeft = msToPixels(currentTimeMs);
+
+  // Calculate tracks area height
+  const tracksAreaHeight = tracks.length * TRACK_HEIGHT;
+  const timelineContainerHeight = editorHeight - 40; // Subtract toolbar height
+
+  if (items.length === 0) {
+    return (
+      <div className="h-[200px] border rounded-lg bg-card flex items-center justify-center text-muted-foreground">
+        <p className="text-sm">Add audio clips to see the track editor</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="border rounded-lg bg-card overflow-hidden relative" ref={containerRef}>
+      {/* Resize handle at top */}
+      <button
+        type="button"
+        className="absolute top-0 left-0 right-0 h-2 cursor-ns-resize flex items-center justify-center hover:bg-muted/50 transition-colors z-20 group"
+        onMouseDown={handleResizeStart}
+        aria-label="Resize track editor"
+      >
+        <GripHorizontal className="h-3 w-3 text-muted-foreground/50 group-hover:text-muted-foreground" />
+      </button>
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/30 mt-2">
+        <span className="text-xs text-muted-foreground">Zoom:</span>
+        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleZoomOut}>
+          <Minus className="h-3 w-3" />
+        </Button>
+        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleZoomIn}>
+          <Plus className="h-3 w-3" />
+        </Button>
+        <span className="text-xs text-muted-foreground ml-2">
+          {Math.round(pixelsPerSecond)}px/s
+        </span>
+      </div>
+
+      {/* Timeline container - drag handlers are intentional for drag-and-drop UX */}
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: Container handles drag events for child clips */}
+      <div
+        ref={tracksRef}
+        className="overflow-auto relative"
+        style={{ height: `${timelineContainerHeight}px` }}
+        onMouseMove={draggingItem ? handleDragMove : undefined}
+        onMouseUp={draggingItem ? handleDragEnd : undefined}
+        onMouseLeave={draggingItem ? handleDragEnd : undefined}
+      >
+        {/* Time ruler */}
+        <div
+          className="h-6 border-b bg-muted/20 sticky top-0 z-10"
+          style={{ width: `${timelineWidth}px` }}
+        >
+          {timeMarkers.map((ms) => (
+            <div
+              key={ms}
+              className="absolute top-0 h-full flex flex-col justify-end"
+              style={{ left: `${msToPixels(ms)}px` }}
+            >
+              <div className="h-2 w-px bg-border" />
+              <span className="text-[10px] text-muted-foreground ml-1 select-none">
+                {formatTime(ms)}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        {/* Tracks area */}
+        <div
+          className="relative"
+          style={{ width: `${timelineWidth}px`, height: `${tracksAreaHeight}px` }}
+        >
+          {/* Track backgrounds */}
+          {tracks.map((trackNumber, index) => (
+            <div
+              key={trackNumber}
+              className={cn(
+                'absolute left-0 right-0 border-b',
+                index % 2 === 0 ? 'bg-background' : 'bg-muted/10'
+              )}
+              style={{
+                top: `${index * TRACK_HEIGHT}px`,
+                height: `${TRACK_HEIGHT}px`,
+              }}
+            >
+              <span className="absolute left-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground select-none">
+                Track {trackNumber}
+              </span>
+            </div>
+          ))}
+
+          {/* Click area for seeking - z-index lower than clips */}
+          <button
+            type="button"
+            className="absolute inset-0 z-0 cursor-pointer"
+            onClick={handleTimelineClick}
+            aria-label="Seek timeline"
+          />
+
+          {/* Audio clips */}
+          {items.map((item) => {
+            const isDragging = draggingItem === item.generation_id;
+            const style = getClipStyle(item);
+
+            return (
+              <button
+                type="button"
+                key={item.generation_id}
+                className={cn(
+                  'absolute rounded cursor-move select-none overflow-hidden z-10',
+                  'bg-accent/80 hover:bg-accent border border-accent-foreground/20',
+                  'flex items-center px-2 text-left',
+                  isDragging && 'opacity-80 shadow-lg z-20',
+                  !isDragging && 'transition-all duration-100'
+                )}
+                style={style}
+                onMouseDown={(e) => handleDragStart(e, item)}
+              >
+                <div className="flex-1 min-w-0">
+                  <p className="text-[10px] font-medium text-accent-foreground truncate">
+                    {item.profile_name}
+                  </p>
+                  <p className="text-[9px] text-accent-foreground/70 truncate">
+                    {item.text.substring(0, 30)}...
+                  </p>
+                </div>
+              </button>
+            );
+          })}
+
+          {/* Playhead */}
+          {isActiveStory && (
+            <div
+              className="absolute top-0 bottom-0 w-px bg-primary z-30 pointer-events-none"
+              style={{ left: `${playheadLeft}px` }}
+            >
+              <div className="absolute -top-1 left-1/2 -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-primary" />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/src/lib/api/client.ts b/app/src/lib/api/client.ts
index 0a77054c..5505196f 100644
--- a/app/src/lib/api/client.ts
+++ b/app/src/lib/api/client.ts
@@ -20,6 +20,7 @@ import type {
   StoryItemDetail,
   StoryItemBatchUpdate,
   StoryItemReorder,
+  StoryItemMove,
 } from './types';
 
 class ApiClient {
@@ -425,6 +426,13 @@ class ApiClient {
     });
   }
 
+  async moveStoryItem(storyId: string, generationId: string, data: StoryItemMove): Promise<StoryItemDetail> {
+    return this.request<StoryItemDetail>(`/stories/${storyId}/items/${generationId}/move`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
   async exportStoryAudio(storyId: string): Promise<Blob> {
     const url = `${this.getBaseUrl()}/stories/${storyId}/export-audio`;
     const response = await fetch(url);
diff --git a/app/src/lib/api/types.ts b/app/src/lib/api/types.ts
index d6172652..d8321dfe 100644
--- a/app/src/lib/api/types.ts
+++ b/app/src/lib/api/types.ts
@@ -143,6 +143,7 @@ export interface StoryItemDetail {
   story_id: string;
   generation_id: string;
   start_time_ms: number;
+  track: number;
   created_at: string;
   profile_id: string;
   profile_name: string;
@@ -167,6 +168,7 @@ export interface StoryDetailResponse {
 export interface StoryItemCreate {
   generation_id: string;
   start_time_ms?: number;
+  track?: number;
 }
 
 export interface StoryItemUpdateTime {
@@ -181,3 +183,8 @@ export interface StoryItemBatchUpdate {
 export interface StoryItemReorder {
   generation_ids: string[];
 }
+
+export interface StoryItemMove {
+  start_time_ms: number;
+  track: number;
+}
diff --git a/app/src/lib/hooks/useStories.ts b/app/src/lib/hooks/useStories.ts
index 8e6f2212..a100f837 100644
--- a/app/src/lib/hooks/useStories.ts
+++ b/app/src/lib/hooks/useStories.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { apiClient } from '@/lib/api/client';
-import type { StoryCreate, StoryItemCreate, StoryItemBatchUpdate, StoryItemReorder } from '@/lib/api/types';
+import type { StoryCreate, StoryItemCreate, StoryItemBatchUpdate, StoryItemReorder, StoryItemMove } from '@/lib/api/types';
 import { isTauri } from '@/lib/tauri';
 
 export function useStories() {
@@ -105,6 +105,19 @@ export function useReorderStoryItems() {
   });
 }
 
+export function useMoveStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, generationId, data }: { storyId: string; generationId: string; data: StoryItemMove }) =>
+      apiClient.moveStoryItem(storyId, generationId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
 export function useExportStoryAudio() {
   return useMutation({
     mutationFn: async ({ storyId, storyName }: { storyId: string; storyName: string }) => {
diff --git a/app/src/lib/hooks/useStoryPlayback.ts b/app/src/lib/hooks/useStoryPlayback.ts
index f3e65f53..80c0cdf2 100644
--- a/app/src/lib/hooks/useStoryPlayback.ts
+++ b/app/src/lib/hooks/useStoryPlayback.ts
@@ -1,77 +1,274 @@
 import { useEffect, useRef, useCallback } from 'react';
-import { useStoryStore } from '@/stores/storyStore';
 import { apiClient } from '@/lib/api/client';
 import type { StoryItemDetail } from '@/lib/api/types';
+import { useStoryStore } from '@/stores/storyStore';
+
+interface ActiveSource {
+  source: AudioBufferSourceNode;
+  generationId: string;
+  startTimeMs: number;
+  endTimeMs: number;
+}
 
 /**
- * Hook for managing timecode-based story playback.
- * Uses a single audio element for reliable playback.
+ * Hook for managing timecode-based story playback using Web Audio API.
+ * Supports multiple simultaneous audio sources for overlapping clips on different tracks.
+ * Uses AudioContext for sample-accurate timing synchronization.
  */
-export function useStoryPlayback(_items: StoryItemDetail[] | undefined) {
+export function useStoryPlayback(items: StoryItemDetail[] | undefined) {
   const isPlaying = useStoryStore((state) => state.isPlaying);
   const playbackItems = useStoryStore((state) => state.playbackItems);
-  const tick = useStoryStore((state) => state.tick);
+  const playbackStartContextTime = useStoryStore((state) => state.playbackStartContextTime);
+  const playbackStartStoryTime = useStoryStore((state) => state.playbackStartStoryTime);
+  const currentTimeMs = useStoryStore((state) => state.currentTimeMs);
+  const setPlaybackTiming = useStoryStore((state) => state.setPlaybackTiming);
 
-  // Single audio element for playback
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const currentItemIdRef = useRef<string | null>(null);
+  // AudioContext instance (created once)
+  const audioContextRef = useRef<AudioContext | null>(null);
+  // Master gain for volume control
+  const masterGainRef = useRef<GainNode | null>(null);
+  // Preloaded AudioBuffers by generation_id
+  const audioBuffersRef = useRef<Map<string, AudioBuffer>>(new Map());
+  // Currently playing AudioBufferSourceNodes by generation_id
+  const activeSourcesRef = useRef<Map<string, ActiveSource>>(new Map());
+  // Animation frame for syncing visual playhead
   const animationFrameRef = useRef<number | null>(null);
-  const lastTimeRef = useRef<number>(Date.now());
 
-  // Get or create audio element
-  const getAudio = useCallback(() => {
-    if (!audioRef.current) {
-      audioRef.current = new Audio();
-      audioRef.current.preload = 'auto';
+  // Get or create AudioContext and audio graph
+  const getAudioContext = useCallback(() => {
+    if (!audioContextRef.current) {
+      audioContextRef.current = new AudioContext();
+      console.log(
+        '[StoryPlayback] Created AudioContext, sample rate:',
+        audioContextRef.current.sampleRate,
+      );
+
+      // Create master gain node for volume control
+      // Set to 0.5 to prevent distortion from overlapping audio
+      masterGainRef.current = audioContextRef.current.createGain();
+      masterGainRef.current.gain.value = 0.05;
+      masterGainRef.current.connect(audioContextRef.current.destination);
     }
-    return audioRef.current;
+    // Resume context if suspended (browser autoplay policy)
+    if (audioContextRef.current.state === 'suspended') {
+      audioContextRef.current.resume().catch(() => {
+        // Ignore resume errors
+      });
+    }
+    return audioContextRef.current;
   }, []);
 
-  // Find the item that should be playing at a given time
-  const findActiveItem = useCallback((timeMs: number, items: StoryItemDetail[]): StoryItemDetail | null => {
+  // Stop a source
+  const stopSource = useCallback((generationId: string) => {
+    const activeSource = activeSourcesRef.current.get(generationId);
+    if (activeSource) {
+      try {
+        activeSource.source.stop();
+      } catch {
+        // Source may have already stopped
+      }
+      activeSourcesRef.current.delete(generationId);
+    }
+  }, []);
+
+  // Preload audio files as AudioBuffers
+  useEffect(() => {
+    if (!items || items.length === 0) {
+      // Clear preloaded buffers when no items
+      audioBuffersRef.current.clear();
+      return;
+    }
+
+    const currentIds = new Set(items.map((item) => item.generation_id));
+    const audioContext = getAudioContext();
+
+    // Remove buffers for items that no longer exist
+    for (const [id] of audioBuffersRef.current) {
+      if (!currentIds.has(id)) {
+        audioBuffersRef.current.delete(id);
+      }
+    }
+
+    // Preload audio for new items
+    const preloadPromises: Promise<void>[] = [];
     for (const item of items) {
-      const itemStart = item.start_time_ms;
-      const itemEnd = item.start_time_ms + item.duration * 1000;
-      if (timeMs >= itemStart && timeMs < itemEnd) {
-        return item;
+      if (!audioBuffersRef.current.has(item.generation_id)) {
+        const audioUrl = apiClient.getAudioUrl(item.generation_id);
+        console.log('[StoryPlayback] Preloading audio buffer:', item.generation_id);
+
+        const preloadPromise = fetch(audioUrl)
+          .then((response) => response.arrayBuffer())
+          .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))
+          .then((audioBuffer) => {
+            audioBuffersRef.current.set(item.generation_id, audioBuffer);
+            console.log(
+              '[StoryPlayback] Preloaded buffer:',
+              item.generation_id,
+              'duration:',
+              audioBuffer.duration,
+            );
+          })
+          .catch((err) => {
+            console.error('[StoryPlayback] Failed to preload audio:', item.generation_id, err);
+          });
+
+        preloadPromises.push(preloadPromise);
       }
     }
-    return null;
-  }, []);
 
-  // Find the next item after a given time
-  const findNextItem = useCallback((timeMs: number, items: StoryItemDetail[]): StoryItemDetail | null => {
-    const sorted = [...items].sort((a, b) => a.start_time_ms - b.start_time_ms);
-    for (const item of sorted) {
-      if (item.start_time_ms > timeMs) {
-        return item;
-      }
-    }
-    return null;
-  }, []);
+    Promise.all(preloadPromises).then(() => {
+      console.log('[StoryPlayback] Preloaded', audioBuffersRef.current.size, 'audio buffers');
+    });
+  }, [items, getAudioContext]);
 
-  // Cleanup
+  // Cleanup AudioContext on unmount
   useEffect(() => {
     return () => {
-      if (audioRef.current) {
-        audioRef.current.pause();
-        audioRef.current.src = '';
+      // Stop all sources
+      for (const [generationId] of activeSourcesRef.current) {
+        stopSource(generationId);
       }
+      activeSourcesRef.current.clear();
+
+      // Clean up audio graph
+      if (masterGainRef.current) {
+        masterGainRef.current.disconnect();
+        masterGainRef.current = null;
+      }
+      if (audioContextRef.current && audioContextRef.current.state !== 'closed') {
+        audioContextRef.current.close().catch(() => {
+          // Ignore errors when closing
+        });
+        audioContextRef.current = null;
+      }
+
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
       }
     };
-  }, []);
+  }, [stopSource]);
 
-  // Main playback effect
+  // Find ALL items that should be playing at a given story time
+  const findActiveItems = useCallback(
+    (storyTimeMs: number, itemList: StoryItemDetail[]): StoryItemDetail[] => {
+      return itemList.filter((item) => {
+        const itemStart = item.start_time_ms;
+        const itemEnd = item.start_time_ms + item.duration * 1000;
+        return storyTimeMs >= itemStart && storyTimeMs < itemEnd;
+      });
+    },
+    [],
+  );
+
+  // Convert AudioContext time to story time (ms)
+  const contextTimeToStoryTime = useCallback(
+    (contextTime: number): number => {
+      if (playbackStartContextTime === null || playbackStartStoryTime === null) {
+        return 0;
+      }
+      const elapsedContextTime = contextTime - playbackStartContextTime;
+      return playbackStartStoryTime + elapsedContextTime * 1000;
+    },
+    [playbackStartContextTime, playbackStartStoryTime],
+  );
+
+  // Convert story time (ms) to AudioContext time
+  const storyTimeToContextTime = useCallback(
+    (storyTimeMs: number): number => {
+      if (playbackStartContextTime === null || playbackStartStoryTime === null) {
+        return 0;
+      }
+      const elapsedStoryTime = (storyTimeMs - playbackStartStoryTime) / 1000;
+      return playbackStartContextTime + elapsedStoryTime;
+    },
+    [playbackStartContextTime, playbackStartStoryTime],
+  );
+
+  // Stop all sources
+  const stopAllSources = useCallback(() => {
+    console.log('[StoryPlayback] Stopping all sources');
+    for (const [generationId] of activeSourcesRef.current) {
+      stopSource(generationId);
+    }
+    activeSourcesRef.current.clear();
+  }, [stopSource]);
+
+  // Schedule playback for all items that should be playing
+  const schedulePlayback = useCallback(
+    (storyTimeMs: number, itemList: StoryItemDetail[]) => {
+      const audioContext = getAudioContext();
+      const currentContextTime = audioContext.currentTime;
+
+      // Find all items that should be playing
+      const shouldBePlaying = findActiveItems(storyTimeMs, itemList);
+      const shouldBePlayingIds = new Set(shouldBePlaying.map((item) => item.generation_id));
+
+      // Stop sources that shouldn't be playing anymore
+      for (const [generationId] of activeSourcesRef.current) {
+        if (!shouldBePlayingIds.has(generationId)) {
+          stopSource(generationId);
+        }
+      }
+
+      // Schedule new sources for items that should be playing
+      for (const item of shouldBePlaying) {
+        if (!activeSourcesRef.current.has(item.generation_id)) {
+          const buffer = audioBuffersRef.current.get(item.generation_id);
+          if (!buffer) {
+            console.warn('[StoryPlayback] Buffer not loaded for:', item.generation_id);
+            continue;
+          }
+
+          // Calculate when this item should start in AudioContext time
+          const itemStartContextTime = storyTimeToContextTime(item.start_time_ms);
+          const itemEndStoryTime = item.start_time_ms + item.duration * 1000;
+
+          // Calculate offset into the buffer (if seeking mid-way)
+          const offsetIntoBuffer = Math.max(0, (storyTimeMs - item.start_time_ms) / 1000);
+          const duration = item.duration - offsetIntoBuffer;
+
+          // If the item should have already started, schedule it to start immediately
+          const startAtContextTime = Math.max(currentContextTime, itemStartContextTime);
+
+          console.log('[StoryPlayback] Scheduling source:', {
+            generationId: item.generation_id,
+            storyTimeMs,
+            itemStart: item.start_time_ms,
+            offsetIntoBuffer,
+            startAtContextTime,
+            duration,
+          });
+
+          const source = audioContext.createBufferSource();
+          source.buffer = buffer;
+          source.connect(masterGainRef.current || audioContext.destination);
+
+          const activeSource: ActiveSource = {
+            source,
+            generationId: item.generation_id,
+            startTimeMs: item.start_time_ms,
+            endTimeMs: itemEndStoryTime,
+          };
+
+          activeSourcesRef.current.set(item.generation_id, activeSource);
+
+          // Schedule playback
+          source.start(startAtContextTime, offsetIntoBuffer, duration);
+
+          // Clean up when source ends
+          source.onended = () => {
+            console.log('[StoryPlayback] Source ended:', item.generation_id);
+            activeSourcesRef.current.delete(item.generation_id);
+          };
+        }
+      }
+    },
+    [getAudioContext, findActiveItems, storyTimeToContextTime, stopSource],
+  );
+
+  // Sync visual playhead from AudioContext time
   useEffect(() => {
-    const audio = getAudio();
-
-    if (!isPlaying || !playbackItems || playbackItems.length === 0) {
-      console.log('[StoryPlayback] Stopping playback');
-      audio.pause();
-      currentItemIdRef.current = null;
-      
+    if (!isPlaying || playbackStartContextTime === null || playbackStartStoryTime === null) {
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
         animationFrameRef.current = null;
@@ -79,115 +276,97 @@ export function useStoryPlayback(_items: StoryItemDetail[] | undefined) {
       return;
     }
 
-    const items = playbackItems; // Capture for closure
-    console.log('[StoryPlayback] Starting playback');
+    const audioContext = getAudioContext();
+    const itemList = playbackItems || [];
 
-    const playItem = (item: StoryItemDetail, offsetMs: number = 0) => {
-      console.log('[StoryPlayback] Playing item:', item.generation_id, 'offset:', offsetMs);
-      currentItemIdRef.current = item.generation_id;
-      
-      const audioUrl = apiClient.getAudioUrl(item.generation_id);
-      audio.src = audioUrl;
-      
-      audio.onloadedmetadata = () => {
-        const offsetSeconds = Math.max(0, offsetMs / 1000);
-        audio.currentTime = offsetSeconds;
-        audio.play().catch(err => {
-          console.error('[StoryPlayback] Play failed:', err);
-        });
-      };
+    const syncPlayhead = () => {
+      if (!useStoryStore.getState().isPlaying) {
+        return;
+      }
 
-      audio.onerror = (e) => {
-        console.error('[StoryPlayback] Audio error:', e);
-      };
-
-      // When this audio ends, advance the clock and check for next item
-      audio.onended = () => {
-        console.log('[StoryPlayback] Audio ended');
-        const state = useStoryStore.getState();
-        if (!state.isPlaying || !state.playbackItems) return;
-
-        // Find what's next
-        const nextItem = findNextItem(state.currentTimeMs, state.playbackItems);
-        if (nextItem) {
-          // Jump to next item's start
-          useStoryStore.setState({ currentTimeMs: nextItem.start_time_ms });
-          playItem(nextItem, 0);
-        } else {
-          // No more items
-          console.log('[StoryPlayback] Story complete');
-          useStoryStore.getState().stop();
-        }
-      };
-    };
-
-    // Animation frame for updating the clock
-    const updateClock = () => {
-      if (!useStoryStore.getState().isPlaying) return;
-
-      const now = Date.now();
-      const deltaMs = now - lastTimeRef.current;
-      lastTimeRef.current = now;
-
-      // Update master clock
-      tick(deltaMs);
-
-      const currentTime = useStoryStore.getState().currentTimeMs;
+      const currentContextTime = audioContext.currentTime;
+      const currentStoryTime = contextTimeToStoryTime(currentContextTime);
       const totalDuration = useStoryStore.getState().totalDurationMs;
 
-      // Check if we need to start playing a different item
-      const activeItem = findActiveItem(currentTime, items);
-      
-      if (activeItem && currentItemIdRef.current !== activeItem.generation_id) {
-        // Need to switch to a different item
-        const offset = currentTime - activeItem.start_time_ms;
-        playItem(activeItem, offset);
-      } else if (!activeItem && currentItemIdRef.current) {
-        // We're in a gap between items, pause audio
-        audio.pause();
-        currentItemIdRef.current = null;
-        
-        // Check if there's a next item to wait for
-        const nextItem = findNextItem(currentTime, items);
-        if (!nextItem && currentTime >= totalDuration) {
+      // Update store with current story time
+      useStoryStore.setState({ currentTimeMs: Math.min(currentStoryTime, totalDuration) });
+
+      // Schedule any items that should be playing
+      schedulePlayback(currentStoryTime, itemList);
+
+      // Check if we've reached the end
+      if (currentStoryTime >= totalDuration) {
+        // Check if all sources have ended
+        if (activeSourcesRef.current.size === 0) {
           console.log('[StoryPlayback] Reached end');
           useStoryStore.getState().stop();
           return;
         }
       }
 
-      // Continue loop
-      animationFrameRef.current = requestAnimationFrame(updateClock);
+      // Continue sync loop
+      animationFrameRef.current = requestAnimationFrame(syncPlayhead);
     };
 
-    // Start with the first item
-    const currentTime = useStoryStore.getState().currentTimeMs;
-    const activeItem = findActiveItem(currentTime, items);
-    
-    if (activeItem) {
-      const offset = currentTime - activeItem.start_time_ms;
-      playItem(activeItem, offset);
-    } else {
-      // Maybe we're before all items start, find the first one
-      const firstItem = [...items].sort((a, b) => a.start_time_ms - b.start_time_ms)[0];
-      if (firstItem && currentTime < firstItem.start_time_ms) {
-        // Wait for the first item
-        console.log('[StoryPlayback] Waiting for first item at', firstItem.start_time_ms);
-      }
-    }
+    // Initial sync
+    const currentContextTime = audioContext.currentTime;
+    const currentStoryTime = contextTimeToStoryTime(currentContextTime);
+    schedulePlayback(currentStoryTime, itemList);
 
-    // Start clock
-    lastTimeRef.current = Date.now();
-    animationFrameRef.current = requestAnimationFrame(updateClock);
+    // Start sync loop
+    animationFrameRef.current = requestAnimationFrame(syncPlayhead);
 
     return () => {
-      audio.onended = null;
-      audio.onloadedmetadata = null;
-      audio.onerror = null;
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
         animationFrameRef.current = null;
       }
     };
-  }, [isPlaying, playbackItems, getAudio, findActiveItem, findNextItem, tick]);
+  }, [
+    isPlaying,
+    playbackItems,
+    playbackStartContextTime,
+    playbackStartStoryTime,
+    getAudioContext,
+    contextTimeToStoryTime,
+    schedulePlayback,
+  ]);
+
+  // Handle play/pause/seek changes - set timing anchors and schedule playback
+  useEffect(() => {
+    if (!isPlaying || !playbackItems || playbackItems.length === 0) {
+      console.log('[StoryPlayback] Stopping playback');
+      stopAllSources();
+      return;
+    }
+
+    const audioContext = getAudioContext();
+    const currentContextTime = audioContext.currentTime;
+    const currentStoryTime = currentTimeMs;
+
+    // If timing anchors are not set (or were reset by seek), set them now
+    if (playbackStartContextTime === null || playbackStartStoryTime === null) {
+      console.log('[StoryPlayback] Setting timing anchors:', {
+        contextTime: currentContextTime,
+        storyTime: currentStoryTime,
+      });
+      setPlaybackTiming(currentContextTime, currentStoryTime);
+    }
+
+    // Stop all existing sources
+    stopAllSources();
+
+    // Schedule playback from current position
+    schedulePlayback(currentStoryTime, playbackItems);
+  }, [
+    isPlaying,
+    playbackItems,
+    currentTimeMs,
+    playbackStartContextTime,
+    playbackStartStoryTime,
+    getAudioContext,
+    stopAllSources,
+    schedulePlayback,
+    setPlaybackTiming,
+  ]);
 }
diff --git a/app/src/stores/storyStore.ts b/app/src/stores/storyStore.ts
index be28585a..e01b2d2a 100644
--- a/app/src/stores/storyStore.ts
+++ b/app/src/stores/storyStore.ts
@@ -12,13 +12,16 @@ interface StoryPlaybackState {
   totalDurationMs: number;
   playbackStoryId: string | null;
   playbackItems: StoryItemDetail[] | null;
+  // Web Audio API timing (null when not playing)
+  playbackStartContextTime: number | null; // AudioContext.currentTime when playback started
+  playbackStartStoryTime: number | null; // Story time (ms) when playback started
 
   // Actions
   play: (storyId: string, items: StoryItemDetail[]) => void;
   pause: () => void;
   stop: () => void;
   seek: (timeMs: number) => void;
-  tick: (deltaMs: number) => void; // Called by animation frame
+  setPlaybackTiming: (contextTime: number, storyTime: number) => void; // Set timing anchors for Web Audio API
 }
 
 export const useStoryStore = create<StoryPlaybackState>((set, get) => ({
@@ -32,6 +35,8 @@ export const useStoryStore = create<StoryPlaybackState>((set, get) => ({
   totalDurationMs: 0,
   playbackStoryId: null,
   playbackItems: null,
+  playbackStartContextTime: null,
+  playbackStartStoryTime: null,
 
   // Actions
   play: (storyId, items) => {
@@ -72,7 +77,10 @@ export const useStoryStore = create<StoryPlaybackState>((set, get) => ({
   },
 
   pause: () => {
-    set({ isPlaying: false });
+    set({ 
+      isPlaying: false,
+      // Keep timing anchors so we can resume from same position
+    });
   },
 
   stop: () => {
@@ -82,32 +90,26 @@ export const useStoryStore = create<StoryPlaybackState>((set, get) => ({
       playbackStoryId: null,
       playbackItems: null,
       totalDurationMs: 0,
+      playbackStartContextTime: null,
+      playbackStartStoryTime: null,
     });
   },
 
   seek: (timeMs) => {
     const state = get();
     const clampedTime = Math.max(0, Math.min(timeMs, state.totalDurationMs));
-    set({ currentTimeMs: clampedTime });
+    set({ 
+      currentTimeMs: clampedTime,
+      // Reset timing anchors - will be set by hook when playback resumes
+      playbackStartContextTime: null,
+      playbackStartStoryTime: null,
+    });
   },
 
-  tick: (deltaMs) => {
-    const state = get();
-    if (!state.isPlaying || !state.playbackItems) {
-      return;
-    }
-
-    const newTime = state.currentTimeMs + deltaMs;
-    const clampedTime = Math.min(newTime, state.totalDurationMs);
-
-    // Auto-stop when reaching the end
-    if (clampedTime >= state.totalDurationMs) {
-      set({
-        currentTimeMs: state.totalDurationMs,
-        isPlaying: false,
-      });
-    } else {
-      set({ currentTimeMs: clampedTime });
-    }
+  setPlaybackTiming: (contextTime, storyTime) => {
+    set({
+      playbackStartContextTime: contextTime,
+      playbackStartStoryTime: storyTime,
+    });
   },
 }));
diff --git a/backend/database.py b/backend/database.py
index 0852c040..9cb5de9e 100644
--- a/backend/database.py
+++ b/backend/database.py
@@ -70,6 +70,7 @@ class StoryItem(Base):
     story_id = Column(String, ForeignKey("stories.id"), nullable=False)
     generation_id = Column(String, ForeignKey("generations.id"), nullable=False)
     start_time_ms = Column(Integer, nullable=False, default=0)  # Milliseconds from story start
+    track = Column(Integer, nullable=False, default=0)  # Track number (0 = main track)
     created_at = Column(DateTime, default=datetime.utcnow)
 
 
@@ -245,6 +246,16 @@ def _run_migrations(engine):
             
             conn.commit()
             print("Migrated story_items table to use start_time_ms (removed position column)")
+    
+    # Migration: Add track column if it doesn't exist
+    # Re-check columns after potential position migration
+    columns = {col['name'] for col in inspector.get_columns('story_items')}
+    if 'track' not in columns:
+        print("Migrating story_items: adding track column")
+        with engine.connect() as conn:
+            conn.execute(text("ALTER TABLE story_items ADD COLUMN track INTEGER NOT NULL DEFAULT 0"))
+            conn.commit()
+            print("Added track column to story_items")
 
 
 def get_db():
diff --git a/backend/main.py b/backend/main.py
index b695234d..74a88a5c 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -809,6 +809,20 @@ async def reorder_story_items(
     return items
 
 
+@app.put("/stories/{story_id}/items/{generation_id}/move", response_model=models.StoryItemDetail)
+async def move_story_item(
+    story_id: str,
+    generation_id: str,
+    data: models.StoryItemMove,
+    db: Session = Depends(get_db),
+):
+    """Move a story item (update position and/or track)."""
+    item = await stories.move_story_item(story_id, generation_id, data, db)
+    if item is None:
+        raise HTTPException(status_code=404, detail="Story item not found")
+    return item
+
+
 @app.get("/stories/{story_id}/export-audio")
 async def export_story_audio(
     story_id: str,
diff --git a/backend/models.py b/backend/models.py
index 235f66d6..8c8a6658 100644
--- a/backend/models.py
+++ b/backend/models.py
@@ -220,6 +220,7 @@ class StoryItemDetail(BaseModel):
     story_id: str
     generation_id: str
     start_time_ms: int
+    track: int = 0
     created_at: datetime
     # Generation details
     profile_id: str
@@ -253,6 +254,7 @@ class StoryItemCreate(BaseModel):
     """Request model for adding a generation to a story."""
     generation_id: str
     start_time_ms: Optional[int] = None  # If not provided, will be calculated automatically
+    track: Optional[int] = 0  # Track number (0 = main track)
 
 
 class StoryItemUpdateTime(BaseModel):
@@ -269,3 +271,9 @@ class StoryItemBatchUpdate(BaseModel):
 class StoryItemReorder(BaseModel):
     """Request model for reordering story items."""
     generation_ids: List[str] = Field(..., min_length=1)
+
+
+class StoryItemMove(BaseModel):
+    """Request model for moving a story item (position and/or track)."""
+    start_time_ms: int = Field(..., ge=0)
+    track: int = 0
diff --git a/backend/stories.py b/backend/stories.py
index 19b8bf86..407376d3 100644
--- a/backend/stories.py
+++ b/backend/stories.py
@@ -17,6 +17,7 @@ from .models import (
     StoryItemDetail,
     StoryItemCreate,
     StoryItemBatchUpdate,
+    StoryItemMove,
 )
 from .database import Story as DBStory, StoryItem as DBStoryItem, Generation as DBGeneration, VoiceProfile as DBVoiceProfile
 from .utils.audio import load_audio, save_audio
@@ -127,6 +128,7 @@ async def get_story(
             story_id=item.story_id,
             generation_id=item.generation_id,
             start_time_ms=item.start_time_ms,
+            track=item.track,
             created_at=item.created_at,
             profile_id=generation.profile_id,
             profile_name=profile_name,
@@ -249,6 +251,7 @@ async def add_item_to_story(
             story_id=existing.story_id,
             generation_id=existing.generation_id,
             start_time_ms=existing.start_time_ms,
+            track=existing.track,
             created_at=existing.created_at,
             profile_id=generation.profile_id,
             profile_name=profile.name if profile else "Unknown",
@@ -288,12 +291,16 @@ async def add_item_to_story(
             # Add 200ms gap after the last item
             start_time_ms = max_end_time_ms + 200
 
+    # Get track from data or default to 0
+    track = data.track if data.track is not None else 0
+
     # Create item
     item = DBStoryItem(
         id=str(uuid.uuid4()),
         story_id=story_id,
         generation_id=data.generation_id,
         start_time_ms=start_time_ms,
+        track=track,
         created_at=datetime.utcnow(),
     )
 
@@ -313,6 +320,72 @@ async def add_item_to_story(
         story_id=item.story_id,
         generation_id=item.generation_id,
         start_time_ms=item.start_time_ms,
+        track=item.track,
+        created_at=item.created_at,
+        profile_id=generation.profile_id,
+        profile_name=profile.name if profile else "Unknown",
+        text=generation.text,
+        language=generation.language,
+        audio_path=generation.audio_path,
+        duration=generation.duration,
+        seed=generation.seed,
+        instruct=generation.instruct,
+        generation_created_at=generation.created_at,
+    )
+
+
+async def move_story_item(
+    story_id: str,
+    generation_id: str,
+    data: StoryItemMove,
+    db: Session,
+) -> Optional[StoryItemDetail]:
+    """
+    Move a story item (update position and/or track).
+
+    Args:
+        story_id: Story ID
+        generation_id: Generation ID of the item to move
+        data: New position and track data
+        db: Database session
+
+    Returns:
+        Updated item detail or None if not found
+    """
+    # Get the item
+    item = db.query(DBStoryItem).filter_by(
+        story_id=story_id,
+        generation_id=generation_id
+    ).first()
+    if not item:
+        return None
+
+    # Get the generation
+    generation = db.query(DBGeneration).filter_by(id=generation_id).first()
+    if not generation:
+        return None
+
+    # Update position and track
+    item.start_time_ms = data.start_time_ms
+    item.track = data.track
+
+    # Update story updated_at
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if story:
+        story.updated_at = datetime.utcnow()
+
+    db.commit()
+    db.refresh(item)
+
+    # Get profile name
+    profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
+
+    return StoryItemDetail(
+        id=item.id,
+        story_id=item.story_id,
+        generation_id=item.generation_id,
+        start_time_ms=item.start_time_ms,
+        track=item.track,
         created_at=item.created_at,
         profile_id=generation.profile_id,
         profile_name=profile.name if profile else "Unknown",
@@ -464,6 +537,7 @@ async def reorder_story_items(
             story_id=item.story_id,
             generation_id=item.generation_id,
             start_time_ms=item.start_time_ms,
+            track=item.track,
             created_at=item.created_at,
             profile_id=generation.profile_id,
             profile_name=profile_name,
diff --git a/tauri/src-tauri/gen/Assets.car b/tauri/src-tauri/gen/Assets.car
index cefe2feabadaf6de2cdd32cdb1d235d40afbe776..3e5a561360798b6615bd0e70c8841f26a8e128c8 100644
GIT binary patch
delta 752
zcmZY6yKWRQ6b4{zmcVeo2FMa1;eI<=-|a&)vB$RZ2zdiKL`k1wx22$iJ|z;x>|^i%
z^sFc-XwveB)i&9YK569QKR*7azkUy<@a>Bm{QUma{atH~)|qS2q++sUQY^&DCDNjV
zBy`N#<5+0RBu+lrB`HnyKC9gi@85me86D1fGUoxT!4S^CI-G@b{hXV!-YQ`^C*#R$
zTQEl?N)CS<oD$5{Cy`g@WGl2@%-QOvZS#59S|>vnlA;{5A``PCt}>7g);XyZXI)o=
zN{%uvgFbf6#-QzlQmHCM&PYc_DoG);q$0I2UFB*Nj!$o1g3DqVG|$cEu+61drIV)`
zC2mx6rR0sJB&3N!E2+ckYEB5n-6H7j<Y2#n^Kbz!!X>y2SKumKgX?euZo)0tfZK2f
zPBJ!O1ovPI?!yCk2-~m&kKi#pfv4~cp2G`x39tHt{ny9GZCB7q)RrPwJVO^F1!W3K
z>vR!Lx+2WV>sVdAEQ_T^lcT*iK(GsA5FkN;1_QP~+H?J%)+SZG^@?QH61^IxlzbrO
g7-DC${@>E6I;>zD>vG_1>?gBv0Pbhww?7X50fXez)&Kwi

delta 752
zcmZwFxo%TI6b4{9CUDu;05Jg)_U**8FElrEX67o7kT;-1l=La=mVyrYlt>iUkHK4D
zQBWYEwEULk%8c~2|37o)On?3wOyS!XH~9PgtNXLj3SqsFAyD<vkSWShiat~7YGy9V
z>MBVqD=mq|ky*wpvrR7Ue|Z1y)86QK9w+lSfDIVJ8Q6rgaIT-nrf#-Ynk1qs#LhDr
zWfP?=m`YUANsb+>u-=mb7qRTw>8EY;dDwQH(LqH?iH#%UR7WgiCEeL<l(90D{{(Sy
zvaEtW=4NZqn!q~9n8>=Q$<(?CN`-_iCVHPm;<$bz_Qk4I(7ZI;!#1;*PNz&Y8%riR
zMbY_6$$OPBz8bpqAXTil-7@Iz<mj-0^Kbz!!X>y2SKumKgX?euZo)0tg4=Kh78%<x
zf_tz7_u&CNgk9K!NAMV)z*Bez&*25UgjfC1;p@}WHn>m(i$X;Of&Z$8*mj0&QH#BZ
zo-MCUM@iLbUOs9xIXQR(1p6=s0TL8wFkt(W1K0m<b6^u>s$?>@(G(GhgQ=uMU=~&T
aRNPvjEWs7MDx8h|WHt^E``P&IkK=!Y5!8+V


From 232d2317884acc2acaeb49ce0e85497bc55d0b87 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 28 Jan 2026 19:50:46 -0800
Subject: [PATCH 3/9] Refactor story management components and enhance track
 editor integration

- Updated AppFrame to conditionally render StoryTrackEditor based on the selected story and route.
- Modified FloatingGenerateBox to adjust its position based on the visibility of the track editor.
- Improved StoriesTab by removing direct track editor rendering and relying on the new store state for height management.
- Enhanced StoryContent to dynamically calculate bottom padding based on the track editor's height.
- Introduced trackEditorHeight state in storyStore for better UI management of the track editor's visibility and size.
---
 app/src/components/AppFrame/AppFrame.tsx      | 19 ++++++++++++++-
 .../Generation/FloatingGenerateBox.tsx        | 16 ++++++++++---
 app/src/components/StoriesTab/StoriesTab.tsx  | 21 ++---------------
 .../components/StoriesTab/StoryContent.tsx    | 23 +++++++++++--------
 .../StoriesTab/StoryTrackEditor.tsx           | 18 +++++++--------
 app/src/lib/hooks/useStoryPlayback.ts         |  2 +-
 app/src/stores/storyStore.ts                  | 10 ++++++++
 7 files changed, 67 insertions(+), 42 deletions(-)

diff --git a/app/src/components/AppFrame/AppFrame.tsx b/app/src/components/AppFrame/AppFrame.tsx
index 2caaa0dc..99bf192f 100644
--- a/app/src/components/AppFrame/AppFrame.tsx
+++ b/app/src/components/AppFrame/AppFrame.tsx
@@ -1,18 +1,35 @@
+import { useRouterState } from '@tanstack/react-router';
 import { TitleBarDragRegion } from '@/components/TitleBarDragRegion';
 import { AudioPlayer } from '@/components/AudioPlayer/AudioPlayer';
+import { StoryTrackEditor } from '@/components/StoriesTab/StoryTrackEditor';
 import { TOP_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 import { cn } from '@/lib/utils/cn';
+import { useStoryStore } from '@/stores/storyStore';
+import { useStory } from '@/lib/hooks/useStories';
 
 interface AppFrameProps {
   children: React.ReactNode;
 }
 
 export function AppFrame({ children }: AppFrameProps) {
+  const routerState = useRouterState();
+  const isStoriesRoute = routerState.location.pathname === '/stories';
+  
+  const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
+  const { data: story } = useStory(selectedStoryId);
+  
+  // Show track editor when on stories route with a selected story that has items
+  const showTrackEditor = isStoriesRoute && selectedStoryId && story && story.items.length > 0;
+
   return (
     <div className={cn('h-screen bg-background flex flex-col overflow-hidden', TOP_SAFE_AREA_PADDING)}>
       <TitleBarDragRegion />
       {children}
-      <AudioPlayer />
+      {showTrackEditor ? (
+        <StoryTrackEditor storyId={story.id} items={story.items} />
+      ) : (
+        <AudioPlayer />
+      )}
     </div>
   );
 }
diff --git a/app/src/components/Generation/FloatingGenerateBox.tsx b/app/src/components/Generation/FloatingGenerateBox.tsx
index 39bda39b..91609c62 100644
--- a/app/src/components/Generation/FloatingGenerateBox.tsx
+++ b/app/src/components/Generation/FloatingGenerateBox.tsx
@@ -22,11 +22,11 @@ import { useToast } from '@/components/ui/use-toast';
 import { cn } from '@/lib/utils/cn';
 
 interface FloatingGenerateBoxProps {
-  isPlayerOpen: boolean;
+  isPlayerOpen?: boolean;
   showVoiceSelector?: boolean;
 }
 
-export function FloatingGenerateBox({ isPlayerOpen, showVoiceSelector = false }: FloatingGenerateBoxProps) {
+export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector = false }: FloatingGenerateBoxProps) {
   const selectedProfileId = useUIStore((state) => state.selectedProfileId);
   const setSelectedProfileId = useUIStore((state) => state.setSelectedProfileId);
   const { data: selectedProfile } = useProfile(selectedProfileId || '');
@@ -37,9 +37,13 @@ export function FloatingGenerateBox({ isPlayerOpen, showVoiceSelector = false }:
   const matchRoute = useMatchRoute();
   const isStoriesRoute = matchRoute({ to: '/stories' });
   const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
+  const trackEditorHeight = useStoryStore((state) => state.trackEditorHeight);
   const { data: currentStory } = useStory(selectedStoryId);
   const addStoryItem = useAddStoryItem();
   const { toast } = useToast();
+  
+  // Calculate if track editor is visible (on stories route with items)
+  const hasTrackEditor = isStoriesRoute && currentStory && currentStory.items.length > 0;
 
   const { form, handleSubmit, isPending } = useGenerationForm({
     onSuccess: async (generationId) => {
@@ -110,7 +114,13 @@ export function FloatingGenerateBox({ isPlayerOpen, showVoiceSelector = false }:
           : 'left-[calc(5rem+2rem)] w-[calc((100%-5rem-4rem)/2-1rem)]',
       )}
       style={{
-        bottom: isPlayerOpen ? 'calc(7rem + 1.5rem)' : '1.5rem',
+        // On stories route: offset by track editor height when visible
+        // On other routes: offset by audio player height when visible
+        bottom: hasTrackEditor 
+          ? `${trackEditorHeight + 24}px` 
+          : isPlayerOpen 
+            ? 'calc(7rem + 1.5rem)' 
+            : '1.5rem',
       }}
     >
       <motion.div
diff --git a/app/src/components/StoriesTab/StoriesTab.tsx b/app/src/components/StoriesTab/StoriesTab.tsx
index 2e900666..284fb5f6 100644
--- a/app/src/components/StoriesTab/StoriesTab.tsx
+++ b/app/src/components/StoriesTab/StoriesTab.tsx
@@ -1,18 +1,8 @@
 import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox';
 import { StoryContent } from './StoryContent';
 import { StoryList } from './StoryList';
-import { StoryTrackEditor } from './StoryTrackEditor';
-import { usePlayerStore } from '@/stores/playerStore';
-import { useStoryStore } from '@/stores/storyStore';
-import { useStory } from '@/lib/hooks/useStories';
 
 export function StoriesTab() {
-  const audioUrl = usePlayerStore((state) => state.audioUrl);
-  const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
-  const { data: story } = useStory(selectedStoryId);
-
-  const hasTrackEditor = selectedStoryId && story && story.items.length > 0;
-
   return (
     <div className="flex flex-col h-full min-h-0 overflow-hidden">
       {/* Main content area */}
@@ -27,16 +17,9 @@ export function StoriesTab() {
           <StoryContent />
         </div>
 
-        {/* Floating Generate Box */}
-        <FloatingGenerateBox isPlayerOpen={!!audioUrl || !!hasTrackEditor} showVoiceSelector />
+        {/* Floating Generate Box - position is managed via storyStore.trackEditorHeight */}
+        <FloatingGenerateBox showVoiceSelector />
       </div>
-
-      {/* Track Editor - at bottom when a story with items is selected */}
-      {hasTrackEditor && (
-        <div className="shrink-0 mt-4 px-1">
-          <StoryTrackEditor storyId={story.id} items={story.items} />
-        </div>
-      )}
     </div>
   );
 }
diff --git a/app/src/components/StoriesTab/StoryContent.tsx b/app/src/components/StoriesTab/StoryContent.tsx
index c06c4eae..bd38a987 100644
--- a/app/src/components/StoriesTab/StoryContent.tsx
+++ b/app/src/components/StoriesTab/StoryContent.tsx
@@ -17,15 +17,15 @@ import { Download, Pause, Play } from 'lucide-react';
 import { useMemo, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { useToast } from '@/components/ui/use-toast';
-import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 import { Slider } from '@/components/ui/slider';
 import { useStory, useRemoveStoryItem, useExportStoryAudio, useReorderStoryItems } from '@/lib/hooks/useStories';
 import { useStoryStore } from '@/stores/storyStore';
-import { usePlayerStore } from '@/stores/playerStore';
 import { SortableStoryChatItem } from './StoryChatItem';
-import { cn } from '@/lib/utils/cn';
 import { useStoryPlayback } from '@/lib/hooks/useStoryPlayback';
 
+// Height of the floating generate box plus some padding
+const GENERATE_BOX_HEIGHT = 160;
+
 export function StoryContent() {
   const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
   const { data: story, isLoading } = useStory(selectedStoryId);
@@ -34,8 +34,15 @@ export function StoryContent() {
   const exportAudio = useExportStoryAudio();
   const { toast } = useToast();
   const scrollRef = useRef<HTMLDivElement>(null);
-  const audioUrl = usePlayerStore((state) => state.audioUrl);
-  const isPlayerVisible = !!audioUrl;
+  
+  // Get track editor height from store for dynamic padding
+  const trackEditorHeight = useStoryStore((state) => state.trackEditorHeight);
+  
+  // Track editor is shown when story has items
+  const hasBottomBar = story && story.items.length > 0;
+  
+  // Calculate dynamic bottom padding: track editor + generate box + gap
+  const bottomPadding = hasBottomBar ? trackEditorHeight + GENERATE_BOX_HEIGHT + 24 : 0;
 
   // Drag and drop sensors
   const sensors = useSensors(
@@ -261,10 +268,8 @@ export function StoryContent() {
       {/* Content */}
       <div
         ref={scrollRef}
-        className={cn(
-          'flex-1 min-h-0 overflow-y-auto space-y-3',
-          isPlayerVisible && BOTTOM_SAFE_AREA_PADDING,
-        )}
+        className="flex-1 min-h-0 overflow-y-auto space-y-3"
+        style={{ paddingBottom: bottomPadding > 0 ? `${bottomPadding}px` : undefined }}
       >
         {sortedItems.length === 0 ? (
           <div className="text-center py-12 px-5 border-2 border-dashed border-muted rounded-md text-muted-foreground">
diff --git a/app/src/components/StoriesTab/StoryTrackEditor.tsx b/app/src/components/StoriesTab/StoryTrackEditor.tsx
index 34e4d982..d46d2189 100644
--- a/app/src/components/StoriesTab/StoryTrackEditor.tsx
+++ b/app/src/components/StoriesTab/StoryTrackEditor.tsx
@@ -19,14 +19,12 @@ const DEFAULT_PIXELS_PER_SECOND = 50;
 const DEFAULT_TRACKS = [1, 0, -1]; // Default 3 tracks
 const MIN_EDITOR_HEIGHT = 120;
 const MAX_EDITOR_HEIGHT = 500;
-const DEFAULT_EDITOR_HEIGHT = 200;
 
 export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
   const [pixelsPerSecond, setPixelsPerSecond] = useState(DEFAULT_PIXELS_PER_SECOND);
   const [draggingItem, setDraggingItem] = useState<string | null>(null);
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
   const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
-  const [editorHeight, setEditorHeight] = useState(DEFAULT_EDITOR_HEIGHT);
   const [isResizing, setIsResizing] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const tracksRef = useRef<HTMLDivElement>(null);
@@ -35,6 +33,10 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
   const moveItem = useMoveStoryItem();
   const { toast } = useToast();
 
+  // Track editor height from store (shared with FloatingGenerateBox)
+  const editorHeight = useStoryStore((state) => state.trackEditorHeight);
+  const setEditorHeight = useStoryStore((state) => state.setTrackEditorHeight);
+
   // Playback state
   const currentTimeMs = useStoryStore((state) => state.currentTimeMs);
   const playbackStoryId = useStoryStore((state) => state.playbackStoryId);
@@ -116,7 +118,7 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
       Math.max(MIN_EDITOR_HEIGHT, resizeStartHeight.current + deltaY)
     );
     setEditorHeight(newHeight);
-  }, [isResizing]);
+  }, [isResizing, setEditorHeight]);
 
   const handleResizeEnd = useCallback(() => {
     setIsResizing(false);
@@ -247,15 +249,12 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
   const timelineContainerHeight = editorHeight - 40; // Subtract toolbar height
 
   if (items.length === 0) {
-    return (
-      <div className="h-[200px] border rounded-lg bg-card flex items-center justify-center text-muted-foreground">
-        <p className="text-sm">Add audio clips to see the track editor</p>
-      </div>
-    );
+    return null;
   }
 
   return (
-    <div className="border rounded-lg bg-card overflow-hidden relative" ref={containerRef}>
+    <div className="fixed bottom-0 left-0 right-0 border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 z-50">
+      <div className="border-t bg-card overflow-hidden relative" ref={containerRef}>
       {/* Resize handle at top */}
       <button
         type="button"
@@ -383,6 +382,7 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
           )}
         </div>
       </div>
+      </div>
     </div>
   );
 }
diff --git a/app/src/lib/hooks/useStoryPlayback.ts b/app/src/lib/hooks/useStoryPlayback.ts
index 80c0cdf2..86da1de3 100644
--- a/app/src/lib/hooks/useStoryPlayback.ts
+++ b/app/src/lib/hooks/useStoryPlayback.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { apiClient } from '@/lib/api/client';
 import type { StoryItemDetail } from '@/lib/api/types';
 import { useStoryStore } from '@/stores/storyStore';
diff --git a/app/src/stores/storyStore.ts b/app/src/stores/storyStore.ts
index e01b2d2a..8d862cea 100644
--- a/app/src/stores/storyStore.ts
+++ b/app/src/stores/storyStore.ts
@@ -6,6 +6,10 @@ interface StoryPlaybackState {
   selectedStoryId: string | null;
   setSelectedStoryId: (id: string | null) => void;
 
+  // Track editor UI state
+  trackEditorHeight: number;
+  setTrackEditorHeight: (height: number) => void;
+
   // Playback state
   isPlaying: boolean;
   currentTimeMs: number;
@@ -24,11 +28,17 @@ interface StoryPlaybackState {
   setPlaybackTiming: (contextTime: number, storyTime: number) => void; // Set timing anchors for Web Audio API
 }
 
+const DEFAULT_TRACK_EDITOR_HEIGHT = 200;
+
 export const useStoryStore = create<StoryPlaybackState>((set, get) => ({
   // Selection
   selectedStoryId: null,
   setSelectedStoryId: (id) => set({ selectedStoryId: id }),
 
+  // Track editor UI state
+  trackEditorHeight: DEFAULT_TRACK_EDITOR_HEIGHT,
+  setTrackEditorHeight: (height) => set({ trackEditorHeight: height }),
+
   // Playback state
   isPlaying: false,
   currentTimeMs: 0,

From c4884a0443c18e830fecea2cc5b54dc02fb36660 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 28 Jan 2026 20:15:59 -0800
Subject: [PATCH 4/9] Enhance StoryContent and StoryTrackEditor for improved
 playback and UI dynamics

- Added auto-scrolling functionality to StoryContent for the currently playing item, enhancing user experience during playback.
- Refactored StoryTrackEditor to dynamically calculate container width, ensuring proper layout for varying story lengths.
- Updated audio playback management to improve timing anchor handling and playback scheduling.
- Cleaned up import statements for better organization and readability across components.
---
 .../components/StoriesTab/StoryContent.tsx    | 90 +++++++++++++++----
 .../StoriesTab/StoryTrackEditor.tsx           | 24 ++++-
 app/src/lib/hooks/useStoryPlayback.ts         | 39 ++++----
 3 files changed, 116 insertions(+), 37 deletions(-)

diff --git a/app/src/components/StoriesTab/StoryContent.tsx b/app/src/components/StoriesTab/StoryContent.tsx
index bd38a987..198aeb66 100644
--- a/app/src/components/StoriesTab/StoryContent.tsx
+++ b/app/src/components/StoriesTab/StoryContent.tsx
@@ -14,14 +14,19 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { Download, Pause, Play } from 'lucide-react';
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { Button } from '@/components/ui/button';
-import { useToast } from '@/components/ui/use-toast';
 import { Slider } from '@/components/ui/slider';
-import { useStory, useRemoveStoryItem, useExportStoryAudio, useReorderStoryItems } from '@/lib/hooks/useStories';
+import { useToast } from '@/components/ui/use-toast';
+import {
+  useStory,
+  useRemoveStoryItem,
+  useExportStoryAudio,
+  useReorderStoryItems,
+} from '@/lib/hooks/useStories';
+import { useStoryPlayback } from '@/lib/hooks/useStoryPlayback';
 import { useStoryStore } from '@/stores/storyStore';
 import { SortableStoryChatItem } from './StoryChatItem';
-import { useStoryPlayback } from '@/lib/hooks/useStoryPlayback';
 
 // Height of the floating generate box plus some padding
 const GENERATE_BOX_HEIGHT = 160;
@@ -34,13 +39,13 @@ export function StoryContent() {
   const exportAudio = useExportStoryAudio();
   const { toast } = useToast();
   const scrollRef = useRef<HTMLDivElement>(null);
-  
+
   // Get track editor height from store for dynamic padding
   const trackEditorHeight = useStoryStore((state) => state.trackEditorHeight);
-  
+
   // Track editor is shown when story has items
   const hasBottomBar = story && story.items.length > 0;
-  
+
   // Calculate dynamic bottom padding: track editor + generate box + gap
   const bottomPadding = hasBottomBar ? trackEditorHeight + GENERATE_BOX_HEIGHT + 24 : 0;
 
@@ -66,6 +71,10 @@ export function StoryContent() {
   const stop = useStoryStore((state) => state.stop);
   const seek = useStoryStore((state) => state.seek);
 
+  // Refs for auto-scrolling to playing item
+  const itemRefsMap = useRef<Map<string, HTMLDivElement>>(new Map());
+  const lastScrolledItemRef = useRef<string | null>(null);
+
   // Use playback hook
   useStoryPlayback(story?.items);
 
@@ -75,6 +84,39 @@ export function StoryContent() {
     return [...story.items].sort((a, b) => a.start_time_ms - b.start_time_ms);
   }, [story?.items]);
 
+  // Find the currently playing item based on timecode
+  const currentlyPlayingItemId = useMemo(() => {
+    if (!isPlaying || playbackStoryId !== story?.id || !sortedItems.length) {
+      return null;
+    }
+    const playingItem = sortedItems.find((item) => {
+      const itemStart = item.start_time_ms;
+      const itemEnd = item.start_time_ms + item.duration * 1000;
+      return currentTimeMs >= itemStart && currentTimeMs < itemEnd;
+    });
+    return playingItem?.generation_id ?? null;
+  }, [isPlaying, playbackStoryId, story?.id, sortedItems, currentTimeMs]);
+
+  // Auto-scroll to the currently playing item
+  useEffect(() => {
+    if (!currentlyPlayingItemId || currentlyPlayingItemId === lastScrolledItemRef.current) {
+      return;
+    }
+
+    const element = itemRefsMap.current.get(currentlyPlayingItemId);
+    if (element && scrollRef.current) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      lastScrolledItemRef.current = currentlyPlayingItemId;
+    }
+  }, [currentlyPlayingItemId]);
+
+  // Reset last scrolled item when playback stops
+  useEffect(() => {
+    if (!isPlaying) {
+      lastScrolledItemRef.current = null;
+    }
+  }, [isPlaying]);
+
   const handleRemoveItem = (generationId: string) => {
     if (!story) return;
 
@@ -235,7 +277,12 @@ export function StoryContent() {
                     Stop
                   </Button>
                 )}
-                <Button variant="outline" size="sm" onClick={handleExportAudio} disabled={exportAudio.isPending}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleExportAudio}
+                  disabled={exportAudio.isPending}
+                >
                   <Download className="mr-2 h-4 w-4" />
                   Export Audio
                 </Button>
@@ -288,15 +335,25 @@ export function StoryContent() {
             >
               <div className="space-y-3">
                 {sortedItems.map((item, index) => (
-                  <SortableStoryChatItem
+                  <div
                     key={item.id}
-                    item={item}
-                    storyId={story.id}
-                    index={index}
-                    onRemove={() => handleRemoveItem(item.generation_id)}
-                    currentTimeMs={currentTimeMs}
-                    isPlaying={isPlaying && playbackStoryId === story.id}
-                  />
+                    ref={(el) => {
+                      if (el) {
+                        itemRefsMap.current.set(item.generation_id, el);
+                      } else {
+                        itemRefsMap.current.delete(item.generation_id);
+                      }
+                    }}
+                  >
+                    <SortableStoryChatItem
+                      item={item}
+                      storyId={story.id}
+                      index={index}
+                      onRemove={() => handleRemoveItem(item.generation_id)}
+                      currentTimeMs={currentTimeMs}
+                      isPlaying={isPlaying && playbackStoryId === story.id}
+                    />
+                  </div>
                 ))}
               </div>
             </SortableContext>
@@ -306,4 +363,3 @@ export function StoryContent() {
     </div>
   );
 }
-
diff --git a/app/src/components/StoriesTab/StoryTrackEditor.tsx b/app/src/components/StoriesTab/StoryTrackEditor.tsx
index d46d2189..c1aad487 100644
--- a/app/src/components/StoriesTab/StoryTrackEditor.tsx
+++ b/app/src/components/StoriesTab/StoryTrackEditor.tsx
@@ -26,6 +26,7 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
   const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
   const [isResizing, setIsResizing] = useState(false);
+  const [containerWidth, setContainerWidth] = useState(0);
   const containerRef = useRef<HTMLDivElement>(null);
   const tracksRef = useRef<HTMLDivElement>(null);
   const resizeStartY = useRef(0);
@@ -50,6 +51,24 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
     return Array.from(trackSet).sort((a, b) => b - a); // Higher tracks on top
   }, [items]);
 
+  // Track container width for full-width minimum
+  useEffect(() => {
+    const container = tracksRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+
+    observer.observe(container);
+    // Set initial width
+    setContainerWidth(container.clientWidth);
+
+    return () => observer.disconnect();
+  }, []);
+
   // Calculate total duration
   const totalDurationMs = useMemo(() => {
     if (items.length === 0) return 10000; // Default 10 seconds
@@ -59,8 +78,9 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
     );
   }, [items]);
 
-  // Calculate timeline width
-  const timelineWidth = (totalDurationMs / 1000) * pixelsPerSecond + 200; // Extra padding
+  // Calculate timeline width - at least full container width
+  const contentWidth = (totalDurationMs / 1000) * pixelsPerSecond + 200; // Content width with padding
+  const timelineWidth = Math.max(contentWidth, containerWidth);
 
   // Generate time markers
   const timeMarkers = useMemo(() => {
diff --git a/app/src/lib/hooks/useStoryPlayback.ts b/app/src/lib/hooks/useStoryPlayback.ts
index 86da1de3..83b32088 100644
--- a/app/src/lib/hooks/useStoryPlayback.ts
+++ b/app/src/lib/hooks/useStoryPlayback.ts
@@ -20,7 +20,6 @@ export function useStoryPlayback(items: StoryItemDetail[] | undefined) {
   const playbackItems = useStoryStore((state) => state.playbackItems);
   const playbackStartContextTime = useStoryStore((state) => state.playbackStartContextTime);
   const playbackStartStoryTime = useStoryStore((state) => state.playbackStartStoryTime);
-  const currentTimeMs = useStoryStore((state) => state.currentTimeMs);
   const setPlaybackTiming = useStoryStore((state) => state.setPlaybackTiming);
 
   // AudioContext instance (created once)
@@ -44,9 +43,8 @@ export function useStoryPlayback(items: StoryItemDetail[] | undefined) {
       );
 
       // Create master gain node for volume control
-      // Set to 0.5 to prevent distortion from overlapping audio
       masterGainRef.current = audioContextRef.current.createGain();
-      masterGainRef.current.gain.value = 0.05;
+      masterGainRef.current.gain.value = 1;
       masterGainRef.current.connect(audioContextRef.current.destination);
     }
     // Resume context if suspended (browser autoplay policy)
@@ -332,36 +330,41 @@ export function useStoryPlayback(items: StoryItemDetail[] | undefined) {
     schedulePlayback,
   ]);
 
-  // Handle play/pause/seek changes - set timing anchors and schedule playback
+  // Handle play/pause changes - stop sources when paused
   useEffect(() => {
-    if (!isPlaying || !playbackItems || playbackItems.length === 0) {
+    if (!isPlaying) {
       console.log('[StoryPlayback] Stopping playback');
       stopAllSources();
+    }
+  }, [isPlaying, stopAllSources]);
+
+  // Handle seek - reset timing anchors when they become null (triggered by seek)
+  useEffect(() => {
+    if (!isPlaying || !playbackItems || playbackItems.length === 0) {
+      return;
+    }
+
+    // Only run when timing anchors are null (after a seek)
+    if (playbackStartContextTime !== null && playbackStartStoryTime !== null) {
       return;
     }
 
     const audioContext = getAudioContext();
     const currentContextTime = audioContext.currentTime;
-    const currentStoryTime = currentTimeMs;
+    const currentStoryTime = useStoryStore.getState().currentTimeMs;
 
-    // If timing anchors are not set (or were reset by seek), set them now
-    if (playbackStartContextTime === null || playbackStartStoryTime === null) {
-      console.log('[StoryPlayback] Setting timing anchors:', {
-        contextTime: currentContextTime,
-        storyTime: currentStoryTime,
-      });
-      setPlaybackTiming(currentContextTime, currentStoryTime);
-    }
+    console.log('[StoryPlayback] Setting timing anchors after seek:', {
+      contextTime: currentContextTime,
+      storyTime: currentStoryTime,
+    });
+    setPlaybackTiming(currentContextTime, currentStoryTime);
 
-    // Stop all existing sources
+    // Stop all existing sources and reschedule from new position
     stopAllSources();
-
-    // Schedule playback from current position
     schedulePlayback(currentStoryTime, playbackItems);
   }, [
     isPlaying,
     playbackItems,
-    currentTimeMs,
     playbackStartContextTime,
     playbackStartStoryTime,
     getAudioContext,

From cd82ed0664b81efca84f74362f7be87d97920f04 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 28 Jan 2026 20:31:17 -0800
Subject: [PATCH 5/9] Refactor FloatingGenerateBox and StoriesTab for improved
 layout and interaction

- Adjusted FloatingGenerateBox positioning to align with the story list, ensuring consistent UI across different routes.
- Modified StoriesTab layout to enhance responsiveness, including setting a maximum width for the story list and adjusting the right column for better content display.
- Streamlined StoryChatItem interaction by simplifying the play functionality, allowing double-click to trigger playback directly from the text area.
- Enhanced StoryContent component by cleaning up unused playback controls and improving overall structure for better readability.
---
 .../Generation/FloatingGenerateBox.tsx        |   3 +-
 app/src/components/StoriesTab/StoriesTab.tsx  |   6 +-
 .../components/StoriesTab/StoryChatItem.tsx   |  24 +-
 .../components/StoriesTab/StoryContent.tsx    | 118 ++------
 .../StoriesTab/StoryTrackEditor.tsx           | 270 +++++++++++++-----
 app/src/stores/storyStore.ts                  |   2 +-
 6 files changed, 224 insertions(+), 199 deletions(-)

diff --git a/app/src/components/Generation/FloatingGenerateBox.tsx b/app/src/components/Generation/FloatingGenerateBox.tsx
index 91609c62..10a0ca44 100644
--- a/app/src/components/Generation/FloatingGenerateBox.tsx
+++ b/app/src/components/Generation/FloatingGenerateBox.tsx
@@ -110,7 +110,8 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
       className={cn(
         'fixed right-auto',
         isStoriesRoute
-          ? 'left-[calc(5rem+2rem+((100%-5rem-4rem)/2)+1.5rem)] w-[calc((100%-5rem-4rem)/2-1rem)]'
+          // Position aligned with story list: after sidebar + padding, width 360px
+          ? 'left-[calc(5rem+2rem)] w-[360px]'
           : 'left-[calc(5rem+2rem)] w-[calc((100%-5rem-4rem)/2-1rem)]',
       )}
       style={{
diff --git a/app/src/components/StoriesTab/StoriesTab.tsx b/app/src/components/StoriesTab/StoriesTab.tsx
index 284fb5f6..f237e8db 100644
--- a/app/src/components/StoriesTab/StoriesTab.tsx
+++ b/app/src/components/StoriesTab/StoriesTab.tsx
@@ -6,14 +6,14 @@ export function StoriesTab() {
   return (
     <div className="flex flex-col h-full min-h-0 overflow-hidden">
       {/* Main content area */}
-      <div className="flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-2 gap-6 overflow-hidden relative">
+      <div className="flex-1 min-h-0 flex gap-6 overflow-hidden relative">
         {/* Left Column - Story List */}
-        <div className="flex flex-col min-h-0 overflow-hidden">
+        <div className="flex flex-col min-h-0 overflow-hidden w-full max-w-[360px] shrink-0">
           <StoryList />
         </div>
 
         {/* Right Column - Story Content */}
-        <div className="flex flex-col min-h-0 overflow-hidden">
+        <div className="flex flex-col min-h-0 overflow-hidden flex-1">
           <StoryContent />
         </div>
 
diff --git a/app/src/components/StoriesTab/StoryChatItem.tsx b/app/src/components/StoriesTab/StoryChatItem.tsx
index af66dc33..febf8190 100644
--- a/app/src/components/StoriesTab/StoryChatItem.tsx
+++ b/app/src/components/StoriesTab/StoryChatItem.tsx
@@ -88,24 +88,12 @@ export function StoryChatItem({
             {formatTime(itemStartMs)}
           </span>
         </div>
-        <button
-          type="button"
-          className="w-full text-left cursor-pointer"
-          onClick={(e) => {
-            // Don't trigger play if clicking on textarea or if text is selected
-            const target = e.target as HTMLElement;
-            if (target.closest('textarea') || window.getSelection()?.toString()) {
-              return;
-            }
-            handlePlay();
-          }}
-        >
-          <Textarea
-            value={item.text}
-            className="flex-1 resize-none text-sm text-muted-foreground select-text pointer-events-none bg-card"
-            readOnly
-          />
-        </button>
+        <Textarea
+          value={item.text}
+          className="flex-1 resize-none text-sm text-muted-foreground select-text bg-card cursor-text"
+          readOnly
+          onDoubleClick={handlePlay}
+        />
       </div>
 
       {/* Actions */}
diff --git a/app/src/components/StoriesTab/StoryContent.tsx b/app/src/components/StoriesTab/StoryContent.tsx
index 198aeb66..bf532ab4 100644
--- a/app/src/components/StoriesTab/StoryContent.tsx
+++ b/app/src/components/StoriesTab/StoryContent.tsx
@@ -1,11 +1,11 @@
 import {
-  DndContext,
   closestCenter,
+  DndContext,
+  type DragEndEvent,
   KeyboardSensor,
   PointerSensor,
   useSensor,
   useSensors,
-  type DragEndEvent,
 } from '@dnd-kit/core';
 import {
   arrayMove,
@@ -13,16 +13,15 @@ import {
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import { Download, Pause, Play } from 'lucide-react';
+import { Download } from 'lucide-react';
 import { useEffect, useMemo, useRef } from 'react';
 import { Button } from '@/components/ui/button';
-import { Slider } from '@/components/ui/slider';
 import { useToast } from '@/components/ui/use-toast';
 import {
-  useStory,
-  useRemoveStoryItem,
   useExportStoryAudio,
+  useRemoveStoryItem,
   useReorderStoryItems,
+  useStory,
 } from '@/lib/hooks/useStories';
 import { useStoryPlayback } from '@/lib/hooks/useStoryPlayback';
 import { useStoryStore } from '@/stores/storyStore';
@@ -61,15 +60,10 @@ export function StoryContent() {
     }),
   );
 
-  // Playback state
+  // Playback state (for auto-scroll and item highlighting)
   const isPlaying = useStoryStore((state) => state.isPlaying);
   const currentTimeMs = useStoryStore((state) => state.currentTimeMs);
-  const totalDurationMs = useStoryStore((state) => state.totalDurationMs);
   const playbackStoryId = useStoryStore((state) => state.playbackStoryId);
-  const play = useStoryStore((state) => state.play);
-  const pause = useStoryStore((state) => state.pause);
-  const stop = useStoryStore((state) => state.stop);
-  const seek = useStoryStore((state) => state.seek);
 
   // Refs for auto-scrolling to playing item
   const itemRefsMap = useRef<Map<string, HTMLDivElement>>(new Map());
@@ -169,32 +163,6 @@ export function StoryContent() {
     );
   };
 
-  const handlePlayPause = () => {
-    if (!story || story.items.length === 0) return;
-
-    if (isPlaying && playbackStoryId === story.id) {
-      pause();
-    } else {
-      play(story.id, sortedItems);
-    }
-  };
-
-  const handleStop = () => {
-    stop();
-  };
-
-  const handleSeek = (value: number[]) => {
-    seek(value[0]);
-  };
-
-  const formatTime = (ms: number): string => {
-    const totalSeconds = Math.floor(ms / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    const milliseconds = Math.floor((ms % 1000) / 100);
-    return `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds}`;
-  };
-
   const handleExportAudio = () => {
     if (!story) return;
 
@@ -248,67 +216,23 @@ export function StoryContent() {
   return (
     <div className="flex flex-col h-full min-h-0">
       {/* Header */}
-      <div className="flex flex-col gap-4 mb-4 px-1">
-        <div className="flex items-center justify-between">
-          <div>
-            <h2 className="text-2xl font-bold">{story.name}</h2>
-            {story.description && (
-              <p className="text-sm text-muted-foreground mt-1">{story.description}</p>
-            )}
-          </div>
-          <div className="flex gap-2">
-            {story.items.length > 0 && (
-              <>
-                <Button variant="outline" size="sm" onClick={handlePlayPause}>
-                  {isPlaying && playbackStoryId === story.id ? (
-                    <>
-                      <Pause className="mr-2 h-4 w-4" />
-                      Pause
-                    </>
-                  ) : (
-                    <>
-                      <Play className="mr-2 h-4 w-4" />
-                      Play
-                    </>
-                  )}
-                </Button>
-                {isPlaying && playbackStoryId === story.id && (
-                  <Button variant="outline" size="sm" onClick={handleStop}>
-                    Stop
-                  </Button>
-                )}
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={handleExportAudio}
-                  disabled={exportAudio.isPending}
-                >
-                  <Download className="mr-2 h-4 w-4" />
-                  Export Audio
-                </Button>
-              </>
-            )}
-          </div>
+      <div className="flex items-center justify-between mb-4 px-1">
+        <div>
+          <h2 className="text-2xl font-bold">{story.name}</h2>
+          {story.description && (
+            <p className="text-sm text-muted-foreground mt-1">{story.description}</p>
+          )}
         </div>
-
-        {/* Playback Controls */}
         {story.items.length > 0 && (
-          <div className="flex items-center gap-4">
-            <span className="text-xs text-muted-foreground tabular-nums min-w-16">
-              {formatTime(currentTimeMs)}
-            </span>
-            <Slider
-              value={[currentTimeMs]}
-              max={totalDurationMs || 1}
-              step={10}
-              onValueChange={handleSeek}
-              className="flex-1"
-              disabled={!isPlaying && playbackStoryId !== story.id}
-            />
-            <span className="text-xs text-muted-foreground tabular-nums min-w-16">
-              {formatTime(totalDurationMs)}
-            </span>
-          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleExportAudio}
+            disabled={exportAudio.isPending}
+          >
+            <Download className="mr-2 h-4 w-4" />
+            Export Audio
+          </Button>
         )}
       </div>
 
diff --git a/app/src/components/StoriesTab/StoryTrackEditor.tsx b/app/src/components/StoriesTab/StoryTrackEditor.tsx
index c1aad487..af90fa88 100644
--- a/app/src/components/StoriesTab/StoryTrackEditor.tsx
+++ b/app/src/components/StoriesTab/StoryTrackEditor.tsx
@@ -1,12 +1,60 @@
-import { GripHorizontal, Minus, Plus } from 'lucide-react';
+import { GripHorizontal, Minus, Pause, Play, Plus, Square } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import WaveSurfer from 'wavesurfer.js';
 import { Button } from '@/components/ui/button';
 import { useToast } from '@/components/ui/use-toast';
+import { apiClient } from '@/lib/api/client';
 import { useMoveStoryItem } from '@/lib/hooks/useStories';
 import { useStoryStore } from '@/stores/storyStore';
 import type { StoryItemDetail } from '@/lib/api/types';
 import { cn } from '@/lib/utils/cn';
 
+// Clip waveform component
+function ClipWaveform({ generationId, width }: { generationId: string; width: number }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wavesurferRef = useRef<WaveSurfer | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current || width < 20) return;
+
+    // Get CSS colors
+    const root = document.documentElement;
+    const getCSSVar = (varName: string) => {
+      const value = getComputedStyle(root).getPropertyValue(varName).trim();
+      return value ? `hsl(${value})` : '';
+    };
+
+    const waveColor = getCSSVar('--accent-foreground');
+
+    const wavesurfer = WaveSurfer.create({
+      container: containerRef.current,
+      waveColor,
+      progressColor: waveColor,
+      cursorWidth: 0,
+      barWidth: 1,
+      barRadius: 1,
+      barGap: 1,
+      height: 28,
+      normalize: true,
+      interact: false,
+    });
+
+    wavesurferRef.current = wavesurfer;
+
+    const audioUrl = apiClient.getAudioUrl(generationId);
+    wavesurfer.load(audioUrl).catch(() => {
+      // Ignore load errors
+    });
+
+    return () => {
+      wavesurfer.destroy();
+      wavesurferRef.current = null;
+    };
+  }, [generationId, width]);
+
+  return <div ref={containerRef} className="w-full h-full opacity-60" />;
+}
+
 interface StoryTrackEditorProps {
   storyId: string;
   items: StoryItemDetail[];
@@ -39,11 +87,34 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
   const setEditorHeight = useStoryStore((state) => state.setTrackEditorHeight);
 
   // Playback state
+  const isPlaying = useStoryStore((state) => state.isPlaying);
   const currentTimeMs = useStoryStore((state) => state.currentTimeMs);
+  const storeTotalDurationMs = useStoryStore((state) => state.totalDurationMs);
   const playbackStoryId = useStoryStore((state) => state.playbackStoryId);
+  const play = useStoryStore((state) => state.play);
+  const pause = useStoryStore((state) => state.pause);
+  const stop = useStoryStore((state) => state.stop);
   const seek = useStoryStore((state) => state.seek);
 
   const isActiveStory = playbackStoryId === storyId;
+  const isCurrentlyPlaying = isPlaying && isActiveStory;
+
+  // Sort items by start time for play
+  const sortedItems = useMemo(() => {
+    return [...items].sort((a, b) => a.start_time_ms - b.start_time_ms);
+  }, [items]);
+
+  const handlePlayPause = () => {
+    if (isCurrentlyPlaying) {
+      pause();
+    } else {
+      play(storyId, sortedItems);
+    }
+  };
+
+  const handleStop = () => {
+    stop();
+  };
 
   // Calculate unique tracks from items, always showing at least 3 default tracks
   const tracks = useMemo(() => {
@@ -286,84 +357,122 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
       </button>
 
       {/* Toolbar */}
-      <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/30 mt-2">
-        <span className="text-xs text-muted-foreground">Zoom:</span>
-        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleZoomOut}>
-          <Minus className="h-3 w-3" />
-        </Button>
-        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleZoomIn}>
-          <Plus className="h-3 w-3" />
-        </Button>
-        <span className="text-xs text-muted-foreground ml-2">
-          {Math.round(pixelsPerSecond)}px/s
-        </span>
-      </div>
-
-      {/* Timeline container - drag handlers are intentional for drag-and-drop UX */}
-      {/* biome-ignore lint/a11y/noStaticElementInteractions: Container handles drag events for child clips */}
-      <div
-        ref={tracksRef}
-        className="overflow-auto relative"
-        style={{ height: `${timelineContainerHeight}px` }}
-        onMouseMove={draggingItem ? handleDragMove : undefined}
-        onMouseUp={draggingItem ? handleDragEnd : undefined}
-        onMouseLeave={draggingItem ? handleDragEnd : undefined}
-      >
-        {/* Time ruler */}
-        <div
-          className="h-6 border-b bg-muted/20 sticky top-0 z-10"
-          style={{ width: `${timelineWidth}px` }}
-        >
-          {timeMarkers.map((ms) => (
-            <div
-              key={ms}
-              className="absolute top-0 h-full flex flex-col justify-end"
-              style={{ left: `${msToPixels(ms)}px` }}
-            >
-              <div className="h-2 w-px bg-border" />
-              <span className="text-[10px] text-muted-foreground ml-1 select-none">
-                {formatTime(ms)}
-              </span>
-            </div>
-          ))}
+      <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/30 mt-2">
+        {/* Play controls - left side */}
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={handlePlayPause}>
+            {isCurrentlyPlaying ? (
+              <Pause className="h-4 w-4" />
+            ) : (
+              <Play className="h-4 w-4" />
+            )}
+          </Button>
+          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleStop} disabled={!isActiveStory}>
+            <Square className="h-3 w-3" />
+          </Button>
+          <span className="text-xs text-muted-foreground tabular-nums ml-2">
+            {formatTime(isActiveStory ? currentTimeMs : 0)} / {formatTime(isActiveStory ? storeTotalDurationMs : 0)}
+          </span>
         </div>
 
-        {/* Tracks area */}
-        <div
-          className="relative"
-          style={{ width: `${timelineWidth}px`, height: `${tracksAreaHeight}px` }}
-        >
-          {/* Track backgrounds */}
-          {tracks.map((trackNumber, index) => (
-            <div
-              key={trackNumber}
-              className={cn(
-                'absolute left-0 right-0 border-b',
-                index % 2 === 0 ? 'bg-background' : 'bg-muted/10'
-              )}
-              style={{
-                top: `${index * TRACK_HEIGHT}px`,
-                height: `${TRACK_HEIGHT}px`,
-              }}
-            >
-              <span className="absolute left-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground select-none">
-                Track {trackNumber}
-              </span>
-            </div>
-          ))}
+        {/* Zoom controls - right side */}
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">Zoom:</span>
+          <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleZoomOut}>
+            <Minus className="h-3 w-3" />
+          </Button>
+          <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleZoomIn}>
+            <Plus className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
 
-          {/* Click area for seeking - z-index lower than clips */}
-          <button
-            type="button"
-            className="absolute inset-0 z-0 cursor-pointer"
-            onClick={handleTimelineClick}
-            aria-label="Seek timeline"
-          />
+      {/* Timeline container with track labels sidebar */}
+      <div className="flex" style={{ height: `${timelineContainerHeight}px` }}>
+        {/* Track labels sidebar - fixed width */}
+        <div className="w-16 shrink-0 border-r bg-muted/20 overflow-hidden">
+          {/* Spacer for time ruler */}
+          <div className="h-6 border-b bg-muted/30" />
+          {/* Track labels */}
+          <div style={{ height: `${tracksAreaHeight}px` }}>
+            {tracks.map((trackNumber, index) => (
+              <div
+                key={trackNumber}
+                className={cn(
+                  'border-b flex items-center justify-center',
+                  index % 2 === 0 ? 'bg-background' : 'bg-muted/10'
+                )}
+                style={{ height: `${TRACK_HEIGHT}px` }}
+              >
+                <span className="text-[10px] text-muted-foreground select-none">
+                  {trackNumber}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Scrollable timeline area */}
+        {/* biome-ignore lint/a11y/noStaticElementInteractions: Container handles drag events for child clips */}
+        <div
+          ref={tracksRef}
+          className="overflow-auto relative flex-1"
+          onMouseMove={draggingItem ? handleDragMove : undefined}
+          onMouseUp={draggingItem ? handleDragEnd : undefined}
+          onMouseLeave={draggingItem ? handleDragEnd : undefined}
+        >
+          {/* Time ruler */}
+          <div
+            className="h-6 border-b bg-muted/20 sticky top-0 z-10"
+            style={{ width: `${timelineWidth}px` }}
+          >
+            {timeMarkers.map((ms) => (
+              <div
+                key={ms}
+                className="absolute top-0 h-full flex flex-col justify-end"
+                style={{ left: `${msToPixels(ms)}px` }}
+              >
+                <div className="h-2 w-px bg-border" />
+                <span className="text-[10px] text-muted-foreground ml-1 select-none">
+                  {formatTime(ms)}
+                </span>
+              </div>
+            ))}
+          </div>
+
+          {/* Tracks area */}
+          <div
+            className="relative"
+            style={{ width: `${timelineWidth}px`, height: `${tracksAreaHeight}px` }}
+          >
+            {/* Track backgrounds */}
+            {tracks.map((trackNumber, index) => (
+              <div
+                key={trackNumber}
+                className={cn(
+                  'absolute left-0 right-0 border-b',
+                  index % 2 === 0 ? 'bg-background' : 'bg-muted/10'
+                )}
+                style={{
+                  top: `${index * TRACK_HEIGHT}px`,
+                  height: `${TRACK_HEIGHT}px`,
+                }}
+              />
+            ))}
+
+            {/* Click area for seeking - z-index lower than clips */}
+            <button
+              type="button"
+              className="absolute inset-0 z-0 cursor-pointer"
+              onClick={handleTimelineClick}
+              aria-label="Seek timeline"
+            />
 
           {/* Audio clips */}
           {items.map((item) => {
             const isDragging = draggingItem === item.generation_id;
             const style = getClipStyle(item);
+            const clipWidth = msToPixels(item.duration * 1000);
 
             return (
               <button
@@ -372,20 +481,22 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
                 className={cn(
                   'absolute rounded cursor-move select-none overflow-hidden z-10',
                   'bg-accent/80 hover:bg-accent border border-accent-foreground/20',
-                  'flex items-center px-2 text-left',
+                  'flex flex-col justify-center',
                   isDragging && 'opacity-80 shadow-lg z-20',
                   !isDragging && 'transition-all duration-100'
                 )}
                 style={style}
                 onMouseDown={(e) => handleDragStart(e, item)}
               >
-                <div className="flex-1 min-w-0">
-                  <p className="text-[10px] font-medium text-accent-foreground truncate">
+                {/* Clip label */}
+                <div className="absolute top-0 left-1 right-1 z-10">
+                  <p className="text-[9px] font-medium text-accent-foreground truncate">
                     {item.profile_name}
                   </p>
-                  <p className="text-[9px] text-accent-foreground/70 truncate">
-                    {item.text.substring(0, 30)}...
-                  </p>
+                </div>
+                {/* Waveform */}
+                <div className="absolute inset-0 top-3">
+                  <ClipWaveform generationId={item.generation_id} width={clipWidth} />
                 </div>
               </button>
             );
@@ -394,13 +505,14 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
           {/* Playhead */}
           {isActiveStory && (
             <div
-              className="absolute top-0 bottom-0 w-px bg-primary z-30 pointer-events-none"
+              className="absolute top-0 bottom-0 w-1 bg-accent z-30 pointer-events-none rounded-full"
               style={{ left: `${playheadLeft}px` }}
             >
-              <div className="absolute -top-1 left-1/2 -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-primary" />
+              <div className="absolute -top-1 left-1/2 -translate-x-1/2 w-3 h-3 bg-accent rounded-full" />
             </div>
           )}
         </div>
+        </div>
       </div>
       </div>
     </div>
diff --git a/app/src/stores/storyStore.ts b/app/src/stores/storyStore.ts
index 8d862cea..968a6f00 100644
--- a/app/src/stores/storyStore.ts
+++ b/app/src/stores/storyStore.ts
@@ -28,7 +28,7 @@ interface StoryPlaybackState {
   setPlaybackTiming: (contextTime: number, storyTime: number) => void; // Set timing anchors for Web Audio API
 }
 
-const DEFAULT_TRACK_EDITOR_HEIGHT = 200;
+const DEFAULT_TRACK_EDITOR_HEIGHT = 250;
 
 export const useStoryStore = create<StoryPlaybackState>((set, get) => ({
   // Selection

From 2349bd24ba0a7094bbb0b354a1939cec1e569b01 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 28 Jan 2026 20:39:09 -0800
Subject: [PATCH 6/9] Enhance FloatingGenerateBox and StoryContent with new
 features and improved UI

- Refactored FloatingGenerateBox to improve layout and ensure consistent styling for the voice selector.
- Added a popover component to StoryContent for adding generations, including search functionality for better user experience.
- Implemented story item editing and deletion capabilities in StoryList, enhancing story management features.
- Updated import statements and added new hooks for better organization and functionality across components.
---
 .../Generation/FloatingGenerateBox.tsx        |  36 +--
 .../components/StoriesTab/StoryContent.tsx    | 116 ++++++++--
 app/src/components/StoriesTab/StoryList.tsx   | 211 +++++++++++++++++-
 app/src/components/ui/popover.tsx             |  28 +++
 4 files changed, 353 insertions(+), 38 deletions(-)
 create mode 100644 app/src/components/ui/popover.tsx

diff --git a/app/src/components/Generation/FloatingGenerateBox.tsx b/app/src/components/Generation/FloatingGenerateBox.tsx
index 10a0ca44..2d6a91c9 100644
--- a/app/src/components/Generation/FloatingGenerateBox.tsx
+++ b/app/src/components/Generation/FloatingGenerateBox.tsx
@@ -222,28 +222,30 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
               >
                 <div className="flex items-center gap-2">
                   {showVoiceSelector && (
-                    <Select
-                      value={selectedProfileId || ''}
-                      onValueChange={(value) => setSelectedProfileId(value || null)}
-                    >
-                      <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all flex-1">
-                        <SelectValue placeholder="Select a voice..." />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {profiles?.map((profile) => (
-                          <SelectItem key={profile.id} value={profile.id} className="text-xs">
-                            {profile.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                    <div className="flex-1">
+                      <Select
+                        value={selectedProfileId || ''}
+                        onValueChange={(value) => setSelectedProfileId(value || null)}
+                      >
+                        <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all w-full">
+                          <SelectValue placeholder="Select a voice..." />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {profiles?.map((profile) => (
+                            <SelectItem key={profile.id} value={profile.id} className="text-xs">
+                              {profile.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
                   )}
 
                   <FormField
                     control={form.control}
                     name="language"
                     render={({ field }) => (
-                      <FormItem className="flex-1">
+                      <FormItem className="flex-1 space-y-0">
                         <Select onValueChange={field.onChange} defaultValue={field.value}>
                           <FormControl>
                             <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all">
@@ -267,7 +269,7 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
                     control={form.control}
                     name="modelSize"
                     render={({ field }) => (
-                      <FormItem className="flex-1">
+                      <FormItem className="flex-1 space-y-0">
                         <Select onValueChange={field.onChange} defaultValue={field.value}>
                           <FormControl>
                             <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all">
diff --git a/app/src/components/StoriesTab/StoryContent.tsx b/app/src/components/StoriesTab/StoryContent.tsx
index bf532ab4..3892353c 100644
--- a/app/src/components/StoriesTab/StoryContent.tsx
+++ b/app/src/components/StoriesTab/StoryContent.tsx
@@ -13,11 +13,15 @@ import {
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import { Download } from 'lucide-react';
-import { useEffect, useMemo, useRef } from 'react';
+import { Download, Plus } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { useToast } from '@/components/ui/use-toast';
+import { useHistory } from '@/lib/hooks/useHistory';
 import {
+  useAddStoryItem,
   useExportStoryAudio,
   useRemoveStoryItem,
   useReorderStoryItems,
@@ -36,9 +40,28 @@ export function StoryContent() {
   const removeItem = useRemoveStoryItem();
   const reorderItems = useReorderStoryItems();
   const exportAudio = useExportStoryAudio();
+  const addStoryItem = useAddStoryItem();
   const { toast } = useToast();
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  // Add generation popover state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isAddOpen, setIsAddOpen] = useState(false);
+  const { data: historyData } = useHistory();
+
+  // Filter generations not in story and matching search
+  const availableGenerations = useMemo(() => {
+    if (!historyData?.items || !story) return [];
+    const storyGenerationIds = new Set(story.items.map((i) => i.generation_id));
+    const query = searchQuery.toLowerCase();
+    return historyData.items.filter(
+      (gen) =>
+        !storyGenerationIds.has(gen.id) &&
+        (gen.text.toLowerCase().includes(query) ||
+          gen.profile_name.toLowerCase().includes(query)),
+    );
+  }, [historyData, story, searchQuery]);
+
   // Get track editor height from store for dynamic padding
   const trackEditorHeight = useStoryStore((state) => state.trackEditorHeight);
 
@@ -183,6 +206,30 @@ export function StoryContent() {
     );
   };
 
+  const handleAddGeneration = (generationId: string) => {
+    if (!story) return;
+
+    addStoryItem.mutate(
+      {
+        storyId: story.id,
+        data: { generation_id: generationId },
+      },
+      {
+        onSuccess: () => {
+          setIsAddOpen(false);
+          setSearchQuery('');
+        },
+        onError: (error) => {
+          toast({
+            title: 'Failed to add generation',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
   if (!selectedStoryId) {
     return (
       <div className="flex items-center justify-center h-full text-muted-foreground">
@@ -223,17 +270,60 @@ export function StoryContent() {
             <p className="text-sm text-muted-foreground mt-1">{story.description}</p>
           )}
         </div>
-        {story.items.length > 0 && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleExportAudio}
-            disabled={exportAudio.isPending}
-          >
-            <Download className="mr-2 h-4 w-4" />
-            Export Audio
-          </Button>
-        )}
+        <div className="flex gap-2">
+          <Popover open={isAddOpen} onOpenChange={setIsAddOpen}>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm">
+                <Plus className="mr-2 h-4 w-4" />
+                Add
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80 p-0" align="end">
+              <div className="p-2 border-b">
+                <Input
+                  placeholder="Search by name or transcript..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  autoFocus
+                />
+              </div>
+              <div className="max-h-60 overflow-y-auto">
+                {availableGenerations.length === 0 ? (
+                  <div className="p-4 text-center text-sm text-muted-foreground">
+                    {searchQuery
+                      ? 'No matching generations found'
+                      : 'No available generations'}
+                  </div>
+                ) : (
+                  availableGenerations.map((gen) => (
+                    <button
+                      key={gen.id}
+                      type="button"
+                      className="w-full text-left px-3 py-2 hover:bg-muted transition-colors border-b last:border-b-0"
+                      onClick={() => handleAddGeneration(gen.id)}
+                    >
+                      <div className="font-medium text-sm">{gen.profile_name}</div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {gen.text.length > 50 ? `${gen.text.substring(0, 50)}...` : gen.text}
+                      </div>
+                    </button>
+                  ))
+                )}
+              </div>
+            </PopoverContent>
+          </Popover>
+          {story.items.length > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleExportAudio}
+              disabled={exportAudio.isPending}
+            >
+              <Download className="mr-2 h-4 w-4" />
+              Export Audio
+            </Button>
+          )}
+        </div>
       </div>
 
       {/* Content */}
diff --git a/app/src/components/StoriesTab/StoryList.tsx b/app/src/components/StoriesTab/StoryList.tsx
index f3053f30..ea5e892a 100644
--- a/app/src/components/StoriesTab/StoryList.tsx
+++ b/app/src/components/StoriesTab/StoryList.tsx
@@ -1,4 +1,4 @@
-import { Plus, BookOpen } from 'lucide-react';
+import { Plus, BookOpen, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import {
@@ -9,11 +9,32 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { useToast } from '@/components/ui/use-toast';
-import { useStories, useCreateStory } from '@/lib/hooks/useStories';
+import {
+  useStories,
+  useCreateStory,
+  useUpdateStory,
+  useDeleteStory,
+} from '@/lib/hooks/useStories';
 import { useStoryStore } from '@/stores/storyStore';
 import { cn } from '@/lib/utils/cn';
 import { formatDate } from '@/lib/utils/format';
@@ -23,7 +44,13 @@ export function StoryList() {
   const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
   const setSelectedStoryId = useStoryStore((state) => state.setSelectedStoryId);
   const createStory = useCreateStory();
+  const updateStory = useUpdateStory();
+  const deleteStory = useDeleteStory();
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [editingStory, setEditingStory] = useState<{ id: string; name: string; description?: string } | null>(null);
+  const [deletingStoryId, setDeletingStoryId] = useState<string | null>(null);
   const [newStoryName, setNewStoryName] = useState('');
   const [newStoryDescription, setNewStoryDescription] = useState('');
   const { toast } = useToast();
@@ -65,6 +92,76 @@ export function StoryList() {
     );
   };
 
+  const handleEditClick = (story: { id: string; name: string; description?: string }) => {
+    setEditingStory(story);
+    setNewStoryName(story.name);
+    setNewStoryDescription(story.description || '');
+    setEditDialogOpen(true);
+  };
+
+  const handleUpdateStory = () => {
+    if (!editingStory || !newStoryName.trim()) {
+      toast({
+        title: 'Name required',
+        description: 'Please enter a story name',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    updateStory.mutate(
+      {
+        storyId: editingStory.id,
+        data: {
+          name: newStoryName.trim(),
+          description: newStoryDescription.trim() || undefined,
+        },
+      },
+      {
+        onSuccess: () => {
+          setEditDialogOpen(false);
+          setEditingStory(null);
+          setNewStoryName('');
+          setNewStoryDescription('');
+        },
+        onError: (error) => {
+          toast({
+            title: 'Failed to update story',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  const handleDeleteClick = (storyId: string) => {
+    setDeletingStoryId(storyId);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (!deletingStoryId) return;
+
+    deleteStory.mutate(deletingStoryId, {
+      onSuccess: () => {
+        // Clear selection if deleting the currently selected story
+        if (selectedStoryId === deletingStoryId) {
+          setSelectedStoryId(null);
+        }
+        setDeleteDialogOpen(false);
+        setDeletingStoryId(null);
+      },
+      onError: (error) => {
+        toast({
+          title: 'Failed to delete story',
+          description: error.message,
+          variant: 'destructive',
+        });
+      },
+    });
+  };
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center h-full">
@@ -99,16 +196,19 @@ export function StoryList() {
             <div
               key={story.id}
               className={cn(
-                'p-4 border rounded-md cursor-pointer hover:bg-muted/50 transition-colors',
+                'h-24 p-4 border rounded-md transition-colors group flex items-center',
                 selectedStoryId === story.id && 'bg-muted border-primary',
               )}
-              onClick={() => setSelectedStoryId(story.id)}
             >
-              <div className="flex items-start justify-between">
-                <div className="flex-1 min-w-0">
+              <div className="flex items-start justify-between gap-2 w-full min-w-0">
+                <button
+                  type="button"
+                  className="flex-1 min-w-0 text-left cursor-pointer overflow-hidden"
+                  onClick={() => setSelectedStoryId(story.id)}
+                >
                   <h3 className="font-medium truncate">{story.name}</h3>
                   {story.description && (
-                    <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                    <p className="text-sm text-muted-foreground mt-1 truncate">
                       {story.description}
                     </p>
                   )}
@@ -117,7 +217,32 @@ export function StoryList() {
                     <span>•</span>
                     <span>{formatDate(story.updated_at)}</span>
                   </div>
-                </div>
+                </button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => handleEditClick(story)}>
+                      <Pencil className="mr-2 h-4 w-4" />
+                      Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => handleDeleteClick(story.id)}
+                      className="text-destructive focus:text-destructive"
+                    >
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
               </div>
             </div>
           ))
@@ -169,6 +294,76 @@ export function StoryList() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Edit Story Dialog */}
+      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit Story</DialogTitle>
+            <DialogDescription>
+              Update the story name and description.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="edit-story-name">Name</Label>
+              <Input
+                id="edit-story-name"
+                placeholder="My Story"
+                value={newStoryName}
+                onChange={(e) => setNewStoryName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    handleUpdateStory();
+                  }
+                }}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-story-description">Description (optional)</Label>
+              <Textarea
+                id="edit-story-description"
+                placeholder="A conversation between..."
+                value={newStoryDescription}
+                onChange={(e) => setNewStoryDescription(e.target.value)}
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleUpdateStory} disabled={updateStory.isPending}>
+              {updateStory.isPending ? 'Saving...' : 'Save'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Story Confirmation Dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete the story and all its items. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction asChild>
+              <Button
+                onClick={handleDeleteConfirm}
+                disabled={deleteStory.isPending}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              >
+                {deleteStory.isPending ? 'Deleting...' : 'Delete'}
+              </Button>
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/app/src/components/ui/popover.tsx b/app/src/components/ui/popover.tsx
new file mode 100644
index 00000000..c4014dc6
--- /dev/null
+++ b/app/src/components/ui/popover.tsx
@@ -0,0 +1,28 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

From 9cd4921291a662435d3b1caf8fbde6ffeb7a77ee Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 28 Jan 2026 20:48:13 -0800
Subject: [PATCH 7/9] Enhance FloatingGenerateBox with auto-resizing textarea
 and default voice selection

- Added auto-resizing functionality to the textarea in FloatingGenerateBox, improving user experience when inputting text.
- Implemented logic to set the first voice profile as default if none is selected, ensuring a smoother workflow.
- Updated StoryContent to remove hardcoded height for the generate box, simplifying layout calculations.
- Refactored StoryTrackEditor to improve background styling for better visual consistency.
---
 .../Generation/FloatingGenerateBox.tsx        | 115 +++++++++++++++---
 .../components/StoriesTab/StoryContent.tsx    |   7 +-
 .../StoriesTab/StoryTrackEditor.tsx           |   2 +-
 3 files changed, 99 insertions(+), 25 deletions(-)

diff --git a/app/src/components/Generation/FloatingGenerateBox.tsx b/app/src/components/Generation/FloatingGenerateBox.tsx
index 2d6a91c9..f5e768f3 100644
--- a/app/src/components/Generation/FloatingGenerateBox.tsx
+++ b/app/src/components/Generation/FloatingGenerateBox.tsx
@@ -34,6 +34,7 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
   const [isExpanded, setIsExpanded] = useState(false);
   const [isInstructMode, setIsInstructMode] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const matchRoute = useMatchRoute();
   const isStoriesRoute = matchRoute({ to: '/stories' });
   const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
@@ -100,6 +101,66 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
     };
   }, [isExpanded]);
 
+  // Set first voice as default if none selected
+  useEffect(() => {
+    if (!selectedProfileId && profiles && profiles.length > 0) {
+      setSelectedProfileId(profiles[0].id);
+    }
+  }, [selectedProfileId, profiles, setSelectedProfileId]);
+
+  // Get current form value to trigger resize when it changes
+  const formValue = form.watch(isInstructMode ? 'instruct' : 'text');
+
+  // Auto-resize textarea based on content (only when expanded)
+  useEffect(() => {
+    if (!isExpanded) {
+      // Reset textarea height after collapse animation completes
+      const timeoutId = setTimeout(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+          textarea.style.height = '32px';
+          textarea.style.overflowY = 'hidden';
+        }
+      }, 200); // Wait for animation to complete
+      return () => clearTimeout(timeoutId);
+    }
+    
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const adjustHeight = () => {
+      textarea.style.height = 'auto';
+      const scrollHeight = textarea.scrollHeight;
+      const minHeight = 100; // Expanded minimum
+      const maxHeight = 300; // Max height in pixels
+      const targetHeight = Math.max(minHeight, Math.min(scrollHeight, maxHeight));
+      textarea.style.height = `${targetHeight}px`;
+      
+      // Show scrollbar if content exceeds max height
+      if (scrollHeight > maxHeight) {
+        textarea.style.overflowY = 'auto';
+      } else {
+        textarea.style.overflowY = 'hidden';
+      }
+    };
+
+    // Small delay to let framer animation complete
+    const timeoutId = setTimeout(() => {
+      adjustHeight();
+    }, 200);
+    
+    // Adjust on mount and when value changes
+    adjustHeight();
+    
+    // Watch for input changes
+    textarea.addEventListener('input', adjustHeight);
+    
+    return () => {
+      clearTimeout(timeoutId);
+      textarea.removeEventListener('input', adjustHeight);
+    };
+  }, [formValue, isInstructMode, isExpanded]);
+
   async function onSubmit(data: Parameters<typeof handleSubmit>[0]) {
     await handleSubmit(data, selectedProfileId);
   }
@@ -146,26 +207,42 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
                   render={({ field }) => (
                     <FormItem>
                       <FormControl>
-                        <Textarea
-                          placeholder={
-                            isInstructMode
-                              ? 'Add delivery instructions...'
-                              : isStoriesRoute && currentStory
-                                ? `Generate speech for "${currentStory.name}"...`
-                                : selectedProfile
-                                  ? `Generate speech using ${selectedProfile.name}...`
-                                  : 'Select a voice profile above...'
-                          }
-                          className="resize-none bg-transparent border-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0 outline-none ring-0 rounded-2xl text-sm placeholder:text-muted-foreground/60 overflow-hidden transition-all"
-                          style={{
-                            minHeight: isExpanded ? '100px' : '32px',
-                            height: isExpanded ? '100px' : '32px',
+                        <motion.div
+                          animate={{
+                            height: isExpanded ? 'auto' : '32px',
                           }}
-                          disabled={!selectedProfileId}
-                          onClick={() => setIsExpanded(true)}
-                          onFocus={() => setIsExpanded(true)}
-                          {...field}
-                        />
+                          transition={{ duration: 0.15, ease: 'easeOut' }}
+                          style={{ overflow: 'hidden' }}
+                        >
+                          <Textarea
+                            {...field}
+                            ref={(node: HTMLTextAreaElement | null) => {
+                              // Store ref for auto-resize
+                              textareaRef.current = node;
+                              // Forward ref to react-hook-form
+                              if (typeof field.ref === 'function') {
+                                field.ref(node);
+                              }
+                            }}
+                            placeholder={
+                              isInstructMode
+                                ? 'Add delivery instructions...'
+                                : isStoriesRoute && currentStory
+                                  ? `Generate speech for "${currentStory.name}"...`
+                                  : selectedProfile
+                                    ? `Generate speech using ${selectedProfile.name}...`
+                                    : 'Select a voice profile above...'
+                            }
+                            className="resize-none bg-transparent border-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0 outline-none ring-0 rounded-2xl text-sm placeholder:text-muted-foreground/60 w-full"
+                            style={{
+                              minHeight: isExpanded ? '100px' : '32px',
+                              maxHeight: '300px',
+                            }}
+                            disabled={!selectedProfileId}
+                            onClick={() => setIsExpanded(true)}
+                            onFocus={() => setIsExpanded(true)}
+                          />
+                        </motion.div>
                       </FormControl>
                       <FormMessage className="text-xs" />
                     </FormItem>
diff --git a/app/src/components/StoriesTab/StoryContent.tsx b/app/src/components/StoriesTab/StoryContent.tsx
index 3892353c..f237e1fa 100644
--- a/app/src/components/StoriesTab/StoryContent.tsx
+++ b/app/src/components/StoriesTab/StoryContent.tsx
@@ -31,9 +31,6 @@ import { useStoryPlayback } from '@/lib/hooks/useStoryPlayback';
 import { useStoryStore } from '@/stores/storyStore';
 import { SortableStoryChatItem } from './StoryChatItem';
 
-// Height of the floating generate box plus some padding
-const GENERATE_BOX_HEIGHT = 160;
-
 export function StoryContent() {
   const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
   const { data: story, isLoading } = useStory(selectedStoryId);
@@ -68,8 +65,8 @@ export function StoryContent() {
   // Track editor is shown when story has items
   const hasBottomBar = story && story.items.length > 0;
 
-  // Calculate dynamic bottom padding: track editor + generate box + gap
-  const bottomPadding = hasBottomBar ? trackEditorHeight + GENERATE_BOX_HEIGHT + 24 : 0;
+  // Calculate dynamic bottom padding: track editor + gap
+  const bottomPadding = hasBottomBar ? trackEditorHeight + 24 : 0;
 
   // Drag and drop sensors
   const sensors = useSensors(
diff --git a/app/src/components/StoriesTab/StoryTrackEditor.tsx b/app/src/components/StoriesTab/StoryTrackEditor.tsx
index af90fa88..655ec7fb 100644
--- a/app/src/components/StoriesTab/StoryTrackEditor.tsx
+++ b/app/src/components/StoriesTab/StoryTrackEditor.tsx
@@ -345,7 +345,7 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
 
   return (
     <div className="fixed bottom-0 left-0 right-0 border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 z-50">
-      <div className="border-t bg-card overflow-hidden relative" ref={containerRef}>
+      <div className="border-t bg-background/30 backdrop-blur-2xl overflow-hidden relative" ref={containerRef}>
       {/* Resize handle at top */}
       <button
         type="button"

From be25ddbe0e4490ed1f903e2a067aab1015cecff4 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 28 Jan 2026 20:48:45 -0800
Subject: [PATCH 8/9] Refactor FloatingGenerateBox for improved code
 organization and readability

- Cleaned up import statements for better structure and consistency.
- Adjusted formatting and spacing in the FloatingGenerateBox component for enhanced readability.
- Streamlined the use of hooks and state management within the component.
- Ensured consistent styling and layout adjustments for better user experience.
---
 .../Generation/FloatingGenerateBox.tsx        | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/app/src/components/Generation/FloatingGenerateBox.tsx b/app/src/components/Generation/FloatingGenerateBox.tsx
index f5e768f3..593c3c0f 100644
--- a/app/src/components/Generation/FloatingGenerateBox.tsx
+++ b/app/src/components/Generation/FloatingGenerateBox.tsx
@@ -1,7 +1,7 @@
+import { useMatchRoute } from '@tanstack/react-router';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Loader2, MessageSquare, Sparkles } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import { useMatchRoute } from '@tanstack/react-router';
 import { Button } from '@/components/ui/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
 import {
@@ -12,21 +12,24 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
+import { useToast } from '@/components/ui/use-toast';
 import { LANGUAGE_OPTIONS } from '@/lib/constants/languages';
 import { useGenerationForm } from '@/lib/hooks/useGenerationForm';
 import { useProfile, useProfiles } from '@/lib/hooks/useProfiles';
-import { useStory, useAddStoryItem } from '@/lib/hooks/useStories';
-import { useUIStore } from '@/stores/uiStore';
-import { useStoryStore } from '@/stores/storyStore';
-import { useToast } from '@/components/ui/use-toast';
+import { useAddStoryItem, useStory } from '@/lib/hooks/useStories';
 import { cn } from '@/lib/utils/cn';
+import { useStoryStore } from '@/stores/storyStore';
+import { useUIStore } from '@/stores/uiStore';
 
 interface FloatingGenerateBoxProps {
   isPlayerOpen?: boolean;
   showVoiceSelector?: boolean;
 }
 
-export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector = false }: FloatingGenerateBoxProps) {
+export function FloatingGenerateBox({
+  isPlayerOpen = false,
+  showVoiceSelector = false,
+}: FloatingGenerateBoxProps) {
   const selectedProfileId = useUIStore((state) => state.selectedProfileId);
   const setSelectedProfileId = useUIStore((state) => state.setSelectedProfileId);
   const { data: selectedProfile } = useProfile(selectedProfileId || '');
@@ -42,7 +45,7 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
   const { data: currentStory } = useStory(selectedStoryId);
   const addStoryItem = useAddStoryItem();
   const { toast } = useToast();
-  
+
   // Calculate if track editor is visible (on stories route with items)
   const hasTrackEditor = isStoriesRoute && currentStory && currentStory.items.length > 0;
 
@@ -63,7 +66,8 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
         } catch (error) {
           toast({
             title: 'Failed to add to story',
-            description: error instanceof Error ? error.message : 'Could not add generation to story',
+            description:
+              error instanceof Error ? error.message : 'Could not add generation to story',
             variant: 'destructive',
           });
         }
@@ -124,7 +128,7 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
       }, 200); // Wait for animation to complete
       return () => clearTimeout(timeoutId);
     }
-    
+
     const textarea = textareaRef.current;
     if (!textarea) return;
 
@@ -135,7 +139,7 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
       const maxHeight = 300; // Max height in pixels
       const targetHeight = Math.max(minHeight, Math.min(scrollHeight, maxHeight));
       textarea.style.height = `${targetHeight}px`;
-      
+
       // Show scrollbar if content exceeds max height
       if (scrollHeight > maxHeight) {
         textarea.style.overflowY = 'auto';
@@ -148,18 +152,18 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
     const timeoutId = setTimeout(() => {
       adjustHeight();
     }, 200);
-    
+
     // Adjust on mount and when value changes
     adjustHeight();
-    
+
     // Watch for input changes
     textarea.addEventListener('input', adjustHeight);
-    
+
     return () => {
       clearTimeout(timeoutId);
       textarea.removeEventListener('input', adjustHeight);
     };
-  }, [formValue, isInstructMode, isExpanded]);
+  }, [isExpanded]);
 
   async function onSubmit(data: Parameters<typeof handleSubmit>[0]) {
     await handleSubmit(data, selectedProfileId);
@@ -171,17 +175,17 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
       className={cn(
         'fixed right-auto',
         isStoriesRoute
-          // Position aligned with story list: after sidebar + padding, width 360px
-          ? 'left-[calc(5rem+2rem)] w-[360px]'
+          ? // Position aligned with story list: after sidebar + padding, width 360px
+            'left-[calc(5rem+2rem)] w-[360px]'
           : 'left-[calc(5rem+2rem)] w-[calc((100%-5rem-4rem)/2-1rem)]',
       )}
       style={{
         // On stories route: offset by track editor height when visible
         // On other routes: offset by audio player height when visible
-        bottom: hasTrackEditor 
-          ? `${trackEditorHeight + 24}px` 
-          : isPlayerOpen 
-            ? 'calc(7rem + 1.5rem)' 
+        bottom: hasTrackEditor
+          ? `${trackEditorHeight + 24}px`
+          : isPlayerOpen
+            ? 'calc(7rem + 1.5rem)'
             : '1.5rem',
       }}
     >
@@ -192,10 +196,7 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <div className="flex gap-2">
-              <motion.div
-                className="flex-1"
-                transition={{ duration: 0.3, ease: 'easeOut' }}
-              >
+              <motion.div className="flex-1" transition={{ duration: 0.3, ease: 'easeOut' }}>
                 {isInstructMode && (
                   <span className="text-xs text-accent font-medium mb-1 block">
                     Delivery instructions:

From 51b9e2fd3d9074cccc4cd095c8d6746823b76476 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 28 Jan 2026 20:48:48 -0800
Subject: [PATCH 9/9] =?UTF-8?q?Bump=20version:=200.1.5=20=E2=86=92=200.1.6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .bumpversion.cfg                | 2 +-
 app/package.json                | 2 +-
 backend/main.py                 | 2 +-
 landing/package.json            | 2 +-
 package.json                    | 2 +-
 tauri/package.json              | 2 +-
 tauri/src-tauri/Cargo.toml      | 2 +-
 tauri/src-tauri/tauri.conf.json | 2 +-
 web/package.json                | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/.bumpversion.cfg b/.bumpversion.cfg
index 8593dddf..4d5b8318 100644
--- a/.bumpversion.cfg
+++ b/.bumpversion.cfg
@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 0.1.5
+current_version = 0.1.6
 commit = True
 tag = True
 tag_name = v{new_version}
diff --git a/app/package.json b/app/package.json
index 20147133..f61cf7e6 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@voicebox/app",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/backend/main.py b/backend/main.py
index 74a88a5c..11d87231 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -47,7 +47,7 @@ app.add_middleware(
 @app.get("/")
 async def root():
     """Root endpoint."""
-    return {"message": "voicebox API", "version": "0.1.5"}
+    return {"message": "voicebox API", "version": "0.1.6"}
 
 
 @app.get("/health", response_model=models.HealthResponse)
diff --git a/landing/package.json b/landing/package.json
index 77e0d5d4..79f49847 100644
--- a/landing/package.json
+++ b/landing/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@voicebox/landing",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Landing page for voicebox.sh",
   "scripts": {
     "dev": "bun --bun next dev --turbo",
diff --git a/package.json b/package.json
index 33554041..e17f2eab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "voicebox",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "workspaces": [
     "app",
diff --git a/tauri/package.json b/tauri/package.json
index 4529e64d..b045dfec 100644
--- a/tauri/package.json
+++ b/tauri/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@voicebox/tauri",
   "private": true,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/tauri/src-tauri/Cargo.toml b/tauri/src-tauri/Cargo.toml
index 8f2484b1..0072ec04 100644
--- a/tauri/src-tauri/Cargo.toml
+++ b/tauri/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "voicebox"
-version = "0.1.5"
+version = "0.1.6"
 description = "A production-quality desktop app for Qwen3-TTS voice cloning and generation"
 authors = ["you"]
 license = ""
diff --git a/tauri/src-tauri/tauri.conf.json b/tauri/src-tauri/tauri.conf.json
index f9753609..64e42739 100644
--- a/tauri/src-tauri/tauri.conf.json
+++ b/tauri/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Voicebox",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "identifier": "sh.voicebox.app",
   "build": {
     "beforeDevCommand": "bun run dev",
diff --git a/web/package.json b/web/package.json
index 8902ac07..a54e9729 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@voicebox/web",
   "private": true,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "scripts": {
     "dev": "vite",