feat: implement main App component with workflow orchestration

- Add complete state management for text, phases, roles, voice assignments
- Implement phase transitions: input → assignment → generated
- Wire up text input to role detection API
- Wire up voice assignment to audio generation API
- Add loading states for async operations (role detection and generation)
- Implement comprehensive error handling and display
- Add warning messages for long text (>5000 chars) in assignment and generation phases
- Ensure text persists across all workflow phases
- Validates Requirements: 1.5, 6.1, 8.1, 8.2, 8.3, 8.4

frontend/src/App.tsx

@@ -93,6 +93,9 @@ function App() {
     }
   }
 
+  // Check if text is long (more than 5000 characters as a threshold)
+  const isLongText = text.length > 5000
+
   const handleDownload = () => {
     if (!audioUrl) return
     
@@ -130,18 +133,25 @@ function App() {
         )}
 
         {phase === 'assignment' && (
-          <VoiceAssignmentSection
+          <>
-            roles={roles}
+            {isLongText && (
-            voiceAssignments={voiceAssignments}
+              <div className="max-w-4xl mx-auto mb-4 p-4 bg-yellow-100 border border-yellow-400 text-yellow-800 rounded">
-            onVoiceChange={handleVoiceChange}
+                Generation may take several minutes for very long content.
-            language={language}
+              </div>
-            onLanguageChange={handleLanguageChange}
+            )}
-            speed={speed}
+            <VoiceAssignmentSection
-            onSpeedChange={handleSpeedChange}
+              roles={roles}
-            onGenerate={handleGenerate}
+              voiceAssignments={voiceAssignments}
-            isGenerating={isGenerating}
+              onVoiceChange={handleVoiceChange}
-            allRolesAssigned={allRolesAssigned}
+              language={language}
-          />
+              onLanguageChange={handleLanguageChange}
+              speed={speed}
+              onSpeedChange={handleSpeedChange}
+              onGenerate={handleGenerate}
+              isGenerating={isGenerating}
+              allRolesAssigned={allRolesAssigned}
+            />
+          </>
         )}
 
         {phase === 'generated' && audioUrl && (
@@ -150,6 +160,12 @@ function App() {
             onDownload={handleDownload}
           />
         )}
+
+        {isGenerating && isLongText && (
+          <div className="max-w-4xl mx-auto mt-4 p-4 bg-blue-100 border border-blue-400 text-blue-800 rounded text-center">
+            Generation may take several minutes for very long content. Please be patient...
+          </div>
+        )}
       </div>
     </div>
   )