From 81f8be1a94232bb85179c66a15c802f47a1bf33d Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Fri, 13 Mar 2026 10:28:20 -0700
Subject: [PATCH] defer story add until TTS completes, add generating pill to
 story editor, fix item placement per-track

---
 .../Generation/FloatingGenerateBox.tsx        | 27 ++---------
 .../components/StoriesTab/StoryContent.tsx    | 38 ++++++++++++---
 app/src/lib/hooks/useGenerationProgress.ts    | 47 ++++++++++++++++---
 app/src/stores/generationStore.ts             | 26 +++++++++-
 backend/stories.py                            | 12 ++---
 5 files changed, 108 insertions(+), 42 deletions(-)

diff --git a/app/src/components/Generation/FloatingGenerateBox.tsx b/app/src/components/Generation/FloatingGenerateBox.tsx
index a9b830dc..d3159486 100644
--- a/app/src/components/Generation/FloatingGenerateBox.tsx
+++ b/app/src/components/Generation/FloatingGenerateBox.tsx
@@ -12,12 +12,12 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
-import { useToast } from '@/components/ui/use-toast';
 import { getLanguageOptionsForEngine, type LanguageCode } from '@/lib/constants/languages';
 import { useGenerationForm } from '@/lib/hooks/useGenerationForm';
 import { useProfile, useProfiles } from '@/lib/hooks/useProfiles';
-import { useAddStoryItem, useStory } from '@/lib/hooks/useStories';
+import { useStory } from '@/lib/hooks/useStories';
 import { cn } from '@/lib/utils/cn';
+import { useGenerationStore } from '@/stores/generationStore';
 import { useStoryStore } from '@/stores/storyStore';
 import { useUIStore } from '@/stores/uiStore';
 import { ParalinguisticInput } from './ParalinguisticInput';
@@ -44,8 +44,7 @@ export function FloatingGenerateBox({
   const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
   const trackEditorHeight = useStoryStore((state) => state.trackEditorHeight);
   const { data: currentStory } = useStory(selectedStoryId);
-  const addStoryItem = useAddStoryItem();
-  const { toast } = useToast();
+  const addPendingStoryAdd = useGenerationStore((s) => s.addPendingStoryAdd);
 
   // Calculate if track editor is visible (on stories route with items)
   const hasTrackEditor = isStoriesRoute && currentStory && currentStory.items.length > 0;
@@ -53,25 +52,9 @@ export function FloatingGenerateBox({
   const { form, handleSubmit, isPending } = useGenerationForm({
     onSuccess: async (generationId) => {
       setIsExpanded(false);
-      // If on stories route and a story is selected, add generation to story
+      // Defer the story add until TTS completes — useGenerationProgress handles it
       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',
-          });
-        }
+        addPendingStoryAdd(generationId, selectedStoryId);
       }
     },
   });
diff --git a/app/src/components/StoriesTab/StoryContent.tsx b/app/src/components/StoriesTab/StoryContent.tsx
index 483e6657..89d6dbb1 100644
--- a/app/src/components/StoriesTab/StoryContent.tsx
+++ b/app/src/components/StoriesTab/StoryContent.tsx
@@ -13,8 +13,11 @@ import {
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
+import { Link } from '@tanstack/react-router';
+import { AnimatePresence, motion } from 'framer-motion';
 import { Download, Plus } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import Loader from 'react-loaders';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -28,6 +31,7 @@ import {
   useStory,
 } from '@/lib/hooks/useStories';
 import { useStoryPlayback } from '@/lib/hooks/useStoryPlayback';
+import { useGenerationStore } from '@/stores/generationStore';
 import { useStoryStore } from '@/stores/storyStore';
 import { SortableStoryChatItem } from './StoryChatItem';
 
@@ -40,6 +44,7 @@ export function StoryContent() {
   const addStoryItem = useAddStoryItem();
   const { toast } = useToast();
   const scrollRef = useRef<HTMLDivElement>(null);
+  const pendingCount = useGenerationStore((s) => s.pendingGenerationIds.size);
 
   // Add generation popover state
   const [searchQuery, setSearchQuery] = useState('');
@@ -54,8 +59,7 @@ export function StoryContent() {
     return historyData.items.filter(
       (gen) =>
         !storyGenerationIds.has(gen.id) &&
-        (gen.text.toLowerCase().includes(query) ||
-          gen.profile_name.toLowerCase().includes(query)),
+        (gen.text.toLowerCase().includes(query) || gen.profile_name.toLowerCase().includes(query)),
     );
   }, [historyData, story, searchQuery]);
 
@@ -267,7 +271,31 @@ export function StoryContent() {
             <p className="text-sm text-muted-foreground mt-1">{story.description}</p>
           )}
         </div>
-        <div className="flex gap-2">
+        <div className="flex gap-2 items-center">
+          <AnimatePresence>
+            {pendingCount > 0 && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.9, width: 0 }}
+                animate={{ opacity: 1, scale: 1, width: 'auto' }}
+                exit={{ opacity: 0, scale: 0.9, width: 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Link
+                  to="/"
+                  className="flex items-center gap-2 h-8 pl-1.5 pr-3 rounded-full bg-card border border-border hover:bg-muted/50 transition-all duration-200 cursor-pointer"
+                >
+                  <div className="shrink-0 w-10 h-5 overflow-hidden flex items-center justify-center">
+                    <div className="scale-[0.45]">
+                      <Loader type="line-scale" active />
+                    </div>
+                  </div>
+                  <span className="text-xs text-muted-foreground whitespace-nowrap">
+                    Generating {pendingCount} {pendingCount === 1 ? 'audio' : 'audios'}
+                  </span>
+                </Link>
+              </motion.div>
+            )}
+          </AnimatePresence>
           <Popover open={isAddOpen} onOpenChange={setIsAddOpen}>
             <PopoverTrigger asChild>
               <Button variant="outline" size="sm">
@@ -287,9 +315,7 @@ export function StoryContent() {
               <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'}
+                    {searchQuery ? 'No matching generations found' : 'No available generations'}
                   </div>
                 ) : (
                   availableGenerations.map((gen) => (
diff --git a/app/src/lib/hooks/useGenerationProgress.ts b/app/src/lib/hooks/useGenerationProgress.ts
index b8c98f78..5a75cad9 100644
--- a/app/src/lib/hooks/useGenerationProgress.ts
+++ b/app/src/lib/hooks/useGenerationProgress.ts
@@ -23,6 +23,7 @@ export function useGenerationProgress() {
   const { toast } = useToast();
   const pendingIds = useGenerationStore((s) => s.pendingGenerationIds);
   const removePendingGeneration = useGenerationStore((s) => s.removePendingGeneration);
+  const removePendingStoryAdd = useGenerationStore((s) => s.removePendingStoryAdd);
   const isPlaying = usePlayerStore((s) => s.isPlaying);
   const setAudioWithAutoPlay = usePlayerStore((s) => s.setAudioWithAutoPlay);
   const autoplayOnGenerate = useServerStore((s) => s.autoplayOnGenerate);
@@ -66,12 +67,36 @@ export function useGenerationProgress() {
             // Refresh history to pick up the completed generation
             queryClient.invalidateQueries({ queryKey: ['history'] });
 
-            toast({
-              title: 'Generation complete!',
-              description: data.duration
-                ? `Audio generated (${data.duration.toFixed(2)}s)`
-                : 'Audio generated',
-            });
+            // If this generation was queued for a story, add it now
+            const storyId = removePendingStoryAdd(id);
+            if (storyId) {
+              apiClient
+                .addStoryItem(storyId, { generation_id: id })
+                .then(() => {
+                  queryClient.invalidateQueries({ queryKey: ['stories'] });
+                  queryClient.invalidateQueries({ queryKey: ['stories', storyId] });
+                  toast({
+                    title: 'Added to story',
+                    description: data.duration
+                      ? `Audio generated (${data.duration.toFixed(2)}s) and added to story`
+                      : 'Audio generated and added to story',
+                  });
+                })
+                .catch(() => {
+                  toast({
+                    title: 'Generation complete',
+                    description: 'Audio generated but failed to add to story',
+                    variant: 'destructive',
+                  });
+                });
+            } else {
+              toast({
+                title: 'Generation complete!',
+                description: data.duration
+                  ? `Audio generated (${data.duration.toFixed(2)}s)`
+                  : 'Audio generated',
+              });
+            }
 
             // Auto-play if enabled and nothing is currently playing
             if (autoplayRef.current && !isPlayingRef.current) {
@@ -82,6 +107,7 @@ export function useGenerationProgress() {
             source.close();
             currentSources.delete(id);
             removePendingGeneration(id);
+            removePendingStoryAdd(id);
 
             queryClient.invalidateQueries({ queryKey: ['history'] });
 
@@ -114,5 +140,12 @@ export function useGenerationProgress() {
       }
       currentSources.clear();
     };
-  }, [pendingIds, removePendingGeneration, queryClient, toast, setAudioWithAutoPlay]);
+  }, [
+    pendingIds,
+    removePendingGeneration,
+    removePendingStoryAdd,
+    queryClient,
+    toast,
+    setAudioWithAutoPlay,
+  ]);
 }
diff --git a/app/src/stores/generationStore.ts b/app/src/stores/generationStore.ts
index a7395305..e791a992 100644
--- a/app/src/stores/generationStore.ts
+++ b/app/src/stores/generationStore.ts
@@ -5,18 +5,23 @@ interface GenerationState {
   pendingGenerationIds: Set<string>;
   /** Whether any generation is in progress (derived convenience) */
   isGenerating: boolean;
+  /** Map of generationId → storyId for deferred story additions */
+  pendingStoryAdds: Map<string, string>;
   addPendingGeneration: (id: string) => void;
   removePendingGeneration: (id: string) => void;
+  addPendingStoryAdd: (generationId: string, storyId: string) => void;
+  removePendingStoryAdd: (generationId: string) => string | undefined;
   /** Legacy setter for backward compat with useRestoreActiveTasks */
   setIsGenerating: (generating: boolean) => void;
   setActiveGenerationId: (id: string | null) => void;
   activeGenerationId: string | null;
 }
 
-export const useGenerationStore = create<GenerationState>((set) => ({
+export const useGenerationStore = create<GenerationState>((set, get) => ({
   pendingGenerationIds: new Set(),
   isGenerating: false,
   activeGenerationId: null,
+  pendingStoryAdds: new Map(),
 
   addPendingGeneration: (id) =>
     set((state) => {
@@ -32,6 +37,25 @@ export const useGenerationStore = create<GenerationState>((set) => ({
       return { pendingGenerationIds: next, isGenerating: next.size > 0 };
     }),
 
+  addPendingStoryAdd: (generationId, storyId) =>
+    set((state) => {
+      const next = new Map(state.pendingStoryAdds);
+      next.set(generationId, storyId);
+      return { pendingStoryAdds: next };
+    }),
+
+  removePendingStoryAdd: (generationId) => {
+    const storyId = get().pendingStoryAdds.get(generationId);
+    if (storyId) {
+      set((state) => {
+        const next = new Map(state.pendingStoryAdds);
+        next.delete(generationId);
+        return { pendingStoryAdds: next };
+      });
+    }
+    return storyId;
+  },
+
   setIsGenerating: (generating) => set({ isGenerating: generating }),
   setActiveGenerationId: (id) => set({ activeGenerationId: id }),
 }));
diff --git a/backend/stories.py b/backend/stories.py
index 2a2f5abb..f63710c7 100644
--- a/backend/stories.py
+++ b/backend/stories.py
@@ -270,11 +270,14 @@ async def add_item_to_story(
             generation_created_at=generation.created_at,
         )
 
+    # Get track from data or default to 0
+    track = data.track if data.track is not None else 0
+
     # 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
+        # Find the maximum end time on the target track only
         existing_items = db.query(
             DBStoryItem,
             DBGeneration
@@ -282,11 +285,11 @@ async def add_item_to_story(
             DBGeneration,
             DBStoryItem.generation_id == DBGeneration.id
         ).filter(
-            DBStoryItem.story_id == story_id
+            DBStoryItem.story_id == story_id,
+            DBStoryItem.track == track,
         ).all()
         
         if not existing_items:
-            # First item starts at 0
             start_time_ms = 0
         else:
             max_end_time_ms = 0
@@ -297,9 +300,6 @@ 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()),