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,6 +133,12 @@ function App() {
         )}
 
         {phase === 'assignment' && (
+          <>
+            {isLongText && (
+              <div className="max-w-4xl mx-auto mb-4 p-4 bg-yellow-100 border border-yellow-400 text-yellow-800 rounded">
+                Generation may take several minutes for very long content.
+              </div>
+            )}
             <VoiceAssignmentSection
               roles={roles}
               voiceAssignments={voiceAssignments}
@@ -142,6 +151,7 @@ function App() {
               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>
   )