Initial commit of PodCraft application

.gitattributes

@@ -33,3 +33,9 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text

.github/workflows/docker-image.yml

@@ -0,0 +1,22 @@
+name: Docker Image CI/CD
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v1
+      
+    - name: Build the Docker image
+      run: |
+        docker build . --file Dockerfile --tag podcraft-app:$(date +%s)
+        
+    # Add deployment steps here if needed for your specific platform 

.gitignore

@@ -0,0 +1,14 @@
+backend/app/__pycache__
+backend/.env
+frontend/podcraft/node_modules
+backend/.venv/
+backend/venv/
+.DS_Store
+frontend/podcraft/.DS_Store
+backend/.DS_Store
+frontend/.DS_Store
+backend/temp_audio/*
+!backend/temp_audio/Default/
+!backend/temp_audio/Default/final_podcast.mp3
+backend/temp/*
+backend/app/agents/__pycache__/

Dockerfile

@@ -0,0 +1,36 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Install system dependencies including ffmpeg
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    ffmpeg \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first to leverage Docker cache
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy backend code
+COPY backend/app/ /app/app/
+
+# Copy frontend build to static directory
+COPY frontend/podcraft/build/ /app/static/
+
+# Install additional packages needed for serving frontend
+RUN pip install --no-cache-dir python-multipart
+
+# Create directory for temporary files
+RUN mkdir -p /app/temp_audio
+
+# Set environment variables
+ENV PYTHONPATH=/app
+ENV MONGODB_URL="mongodb+srv://NageshBM:Nash166^@podcraft.ozqmc.mongodb.net/?retryWrites=true&w=majority&appName=Podcraft"
+
+# Expose the port the app runs on
+EXPOSE 8000
+
+# Command to run the application
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"] 

Dockerfile.spaces

@@ -0,0 +1,39 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Install system dependencies including ffmpeg
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    ffmpeg \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first to leverage Docker cache
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy backend code
+COPY backend/app /app/app/
+
+# Copy frontend build to static directory if available
+COPY frontend/podcraft/build/ /app/static/
+
+# Install additional packages needed for serving frontend
+RUN pip install --no-cache-dir python-multipart
+
+# Create directory for temporary files
+RUN mkdir -p /app/temp_audio
+
+# Set environment variables
+ENV PYTHONPATH=/app
+
+# Using Secrets from HuggingFace Spaces
+# MongoDB_URL is hardcoded to the Atlas URL in this case
+ENV MONGODB_URL="mongodb+srv://NageshBM:Nash166^@podcraft.ozqmc.mongodb.net/?retryWrites=true&w=majority&appName=Podcraft"
+
+# Expose the port the app runs on
+EXPOSE 7860
+
+# HuggingFace Spaces expects the app to run on port 7860
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"] 

app/main.py

@@ -0,0 +1,199 @@
+from fastapi import FastAPI, Request, HTTPException, Depends, status, File, UploadFile, Form
+from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
+from fastapi.responses import JSONResponse, FileResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from typing import Optional, Dict, List, Union, Any
+from datetime import datetime, timedelta
+import jwt
+from jwt.exceptions import PyJWTError
+from passlib.context import CryptContext
+import os
+import shutil
+import logging
+import json
+from motor.motor_asyncio import AsyncIOMotorClient
+from decouple import config
+import uuid
+from bson.objectid import ObjectId
+import asyncio
+import time
+import sys
+from pathlib import Path
+
+# Import the original app modules
+from app.models import *
+from app.agents.podcast_manager import PodcastManager
+from app.agents.researcher import Researcher
+from app.agents.debate_agent import DebateAgent
+
+# Setup logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Initialize FastAPI app
+app = FastAPI(title="PodCraft API")
+
+# Add CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Allow all origins in production
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Get MongoDB connection string from environment or config
+MONGODB_URL = os.getenv("MONGODB_URL", config("MONGODB_URL", default="mongodb://localhost:27017"))
+
+# MongoDB client
+client = AsyncIOMotorClient(MONGODB_URL)
+db = client.podcraft
+users = db.users
+podcasts = db.podcasts
+agents = db.agents
+workflows = db.workflows
+
+# Initialize podcast manager
+podcast_manager = PodcastManager()
+
+# Initialize researcher
+researcher = Researcher()
+
+# Initialize debate agent
+debate_agent = DebateAgent()
+
+# Password hashing
+pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
+
+# JWT settings
+SECRET_KEY = os.getenv("SECRET_KEY", config("SECRET_KEY", default="your-secret-key"))
+ALGORITHM = "HS256"
+ACCESS_TOKEN_EXPIRE_MINUTES = 60 * 24 * 7  # 1 week
+
+# OAuth2 scheme
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")
+
+# Keep the original authentication and API routes
+# Include all the functions and routes from the original main.py
+
+def create_access_token(data: dict):
+    to_encode = data.copy()
+    expire = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
+    to_encode.update({"exp": expire})
+    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
+    return encoded_jwt
+
+def verify_password(plain_password, hashed_password):
+    return pwd_context.verify(plain_password, hashed_password)
+
+def get_password_hash(password):
+    return pwd_context.hash(password)
+
+async def get_current_user(token: str = Depends(oauth2_scheme)):
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    )
+    try:
+        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+        username: str = payload.get("sub")
+        if username is None:
+            raise credentials_exception
+    except PyJWTError:
+        raise credentials_exception
+    
+    user = await users.find_one({"username": username})
+    if user is None:
+        raise credentials_exception
+    
+    # Convert ObjectId to string for JSON serialization
+    user["_id"] = str(user["_id"])
+    
+    return user
+
+# Include all the API routes from the original main.py here
+# ...
+
+# Mount static files for frontend
+static_path = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", "static"))
+app.mount("/static", StaticFiles(directory=static_path), name="static")
+
+# Add route to serve the frontend
+@app.get("/", response_class=HTMLResponse)
+async def serve_frontend():
+    html_file = os.path.join(static_path, "index.html")
+    if os.path.exists(html_file):
+        with open(html_file, "r") as f:
+            return f.read()
+    else:
+        return HTMLResponse(content="<html><body><h1>PodCraft API</h1><p>Frontend not found.</p></body></html>")
+
+# Add route to serve audio files
+@app.get("/audio/{path:path}")
+async def serve_audio(path: str):
+    audio_file = os.path.join("/app/temp_audio", path)
+    if os.path.exists(audio_file):
+        return FileResponse(audio_file)
+    else:
+        raise HTTPException(status_code=404, detail="Audio file not found")
+
+# Route for health check
+@app.get("/health")
+async def health():
+    return {"status": "healthy"}
+
+# Include all the original API routes here from the original main.py
+
+@app.post("/signup")
+async def signup(user: UserCreate):
+    # Check if username exists
+    existing_user = await users.find_one({"username": user.username})
+    if existing_user:
+        raise HTTPException(status_code=400, detail="Username already registered")
+    
+    # Hash the password
+    hashed_password = get_password_hash(user.password)
+    
+    # Create new user
+    user_obj = {"username": user.username, "password": hashed_password}
+    new_user = await users.insert_one(user_obj)
+    
+    # Create access token
+    access_token = create_access_token(data={"sub": user.username})
+    
+    return {"access_token": access_token, "token_type": "bearer"}
+
+@app.post("/token", response_model=Token)
+async def login_for_access_token(form_data: OAuth2PasswordRequestForm = Depends()):
+    user = await users.find_one({"username": form_data.username})
+    if not user or not verify_password(form_data.password, user["password"]):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    
+    access_token = create_access_token(data={"sub": form_data.username})
+    return {"access_token": access_token, "token_type": "bearer"}
+
+@app.post("/login", response_model=Token)
+async def login(request: Request, user: UserLogin):
+    db_user = await users.find_one({"username": user.username})
+    if not db_user or not verify_password(user.password, db_user["password"]):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password"
+        )
+    
+    access_token = create_access_token(data={"sub": user.username})
+    return {"access_token": access_token, "token_type": "bearer"}
+
+# Add all the other API routes from the original main.py
+# ...
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True) 

backend/app/agents/debaters.py

@@ -0,0 +1,206 @@
+from langchain_openai import ChatOpenAI
+from langchain_core.prompts import ChatPromptTemplate
+from decouple import config
+from typing import Dict, List, AsyncGenerator
+import json
+import logging
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+OPENAI_API_KEY = config('OPENAI_API_KEY')
+
+# Debug logging
+print(f"\nDebaters - Loaded OpenAI API Key: {OPENAI_API_KEY[:7]}...")
+print(f"Key starts with 'sk-proj-': {OPENAI_API_KEY.startswith('sk-proj-')}")
+print(f"Key starts with 'sk-': {OPENAI_API_KEY.startswith('sk-')}\n")
+
+believer_turn_prompt = ChatPromptTemplate.from_messages([
+    ("system", """You are an optimistic and enthusiastic podcast host who sees the positive potential in new developments.
+    Your responses should be engaging, conversational, and STRICTLY LIMITED TO 100 WORDS.
+    Focus on the opportunities, benefits, and positive implications of the topic.
+    Maintain a non-chalant, happy, podcast-style tone while being informative.
+    Your name is {name}, use 'I' when referring to yourself."""),
+    ("user", "Based on this research and the skeptic's last response (if any), provide your perspective for turn {turn_number}:\n\nResearch: {research}\nSkeptic's last response: {skeptic_response}")
+])
+
+skeptic_turn_prompt = ChatPromptTemplate.from_messages([
+    ("system", """You are a thoughtful and critical podcast host who carefully examines potential drawbacks and challenges.
+    Your responses should be engaging, conversational, and STRICTLY LIMITED TO 100 WORDS.
+    Focus on potential risks, limitations, and areas needing careful consideration.
+    Maintain a enthusiastic and angry, podcast-style tone while being informative.
+    Your name is {name}, use 'I' when referring to yourself."""),
+    ("user", "Based on this research and the believer's last response (if any), provide your perspective for turn {turn_number}:\n\nResearch: {research}\nBeliever's last response: {believer_response}")
+])
+
+# Initialize the LLMs with streaming
+believer_llm = ChatOpenAI(
+    model="gpt-4o-mini",
+    temperature=0.7,
+    api_key=OPENAI_API_KEY,
+    streaming=True
+)
+
+skeptic_llm = ChatOpenAI(
+    model="gpt-4o-mini",
+    temperature=0.7,
+    api_key=OPENAI_API_KEY,
+    streaming=True
+)
+
+def chunk_text(text: str, max_length: int = 3800) -> List[str]:
+    """Split text into chunks of maximum length while preserving sentence boundaries."""
+    # Split into sentences and trim whitespace
+    sentences = [s.strip() for s in text.split('.')]
+    sentences = [s + '.' for s in sentences if s]
+    
+    chunks = []
+    current_chunk = []
+    current_length = 0
+    
+    for sentence in sentences:
+        sentence_length = len(sentence)
+        if current_length + sentence_length > max_length:
+            if current_chunk:  # If we have accumulated sentences, join them and add to chunks
+                chunks.append(' '.join(current_chunk))
+                current_chunk = [sentence]
+                current_length = sentence_length
+            else:  # If a single sentence is too long, split it
+                if sentence_length > max_length:
+                    words = sentence.split()
+                    temp_chunk = []
+                    temp_length = 0
+                    for word in words:
+                        if temp_length + len(word) + 1 > max_length:
+                            chunks.append(' '.join(temp_chunk))
+                            temp_chunk = [word]
+                            temp_length = len(word)
+                        else:
+                            temp_chunk.append(word)
+                            temp_length += len(word) + 1
+                    if temp_chunk:
+                        chunks.append(' '.join(temp_chunk))
+                else:
+                    chunks.append(sentence)
+        else:
+            current_chunk.append(sentence)
+            current_length += sentence_length
+    
+    if current_chunk:
+        chunks.append(' '.join(current_chunk))
+    
+    return chunks
+
+async def generate_debate_stream(research: str, believer_name: str, skeptic_name: str) -> AsyncGenerator[str, None]:
+    """
+    Generate a streaming podcast-style debate between believer and skeptic agents with alternating turns.
+    """
+    try:
+        turns = 3  # Number of turns for each speaker
+        skeptic_last_response = ""
+        believer_last_response = ""
+
+        # Start with skeptic for first turn
+        for turn in range(1, turns + 1):
+            logger.info(f"Starting skeptic ({skeptic_name}) turn {turn}")
+            skeptic_response = ""
+            # Stream skeptic's perspective
+            async for chunk in skeptic_llm.astream(
+                skeptic_turn_prompt.format(
+                    research=research,
+                    name=skeptic_name,
+                    turn_number=turn,
+                    believer_response=believer_last_response
+                )
+            ):
+                skeptic_response += chunk.content
+                yield json.dumps({
+                    "type": "skeptic",
+                    "name": skeptic_name,
+                    "content": chunk.content,
+                    "turn": turn
+                }) + "\n"
+            skeptic_last_response = skeptic_response
+            logger.info(f"Skeptic turn {turn}: {skeptic_response}")
+
+            logger.info(f"Starting believer ({believer_name}) turn {turn}")
+            believer_response = ""
+            # Stream believer's perspective
+            async for chunk in believer_llm.astream(
+                believer_turn_prompt.format(
+                    research=research,
+                    name=believer_name,
+                    turn_number=turn,
+                    skeptic_response=skeptic_last_response
+                )
+            ):
+                believer_response += chunk.content
+                yield json.dumps({
+                    "type": "believer",
+                    "name": believer_name,
+                    "content": chunk.content,
+                    "turn": turn
+                }) + "\n"
+            believer_last_response = believer_response
+            logger.info(f"Believer turn {turn}: {believer_response}")
+
+    except Exception as e:
+        logger.error(f"Error in debate generation: {str(e)}")
+        yield json.dumps({"type": "error", "content": str(e)}) + "\n"
+
+async def generate_debate(research: str, believer_name: str, skeptic_name: str) -> List[Dict]:
+    """
+    Generate a complete podcast-style debate between believer and skeptic agents.
+    Kept for compatibility with existing code.
+    """
+    try:
+        logger.info(f"Starting believer ({believer_name}) response generation")
+        # Get believer's perspective
+        believer_response = await believer_llm.ainvoke(
+            believer_prompt.format(research=research, name=believer_name)
+        )
+        logger.info(f"Believer response: {believer_response.content}")
+        
+        logger.info(f"Starting skeptic ({skeptic_name}) response generation")
+        # Get skeptic's perspective
+        skeptic_response = await skeptic_llm.ainvoke(
+            skeptic_prompt.format(research=research, name=skeptic_name)
+        )
+        logger.info(f"Skeptic response: {skeptic_response.content}")
+
+        # Create conversation blocks with chunked text
+        blocks = []
+        
+        # Add believer chunks
+        believer_chunks = chunk_text(believer_response.content)
+        for i, chunk in enumerate(believer_chunks):
+            blocks.append({
+                "name": f"{believer_name}'s Perspective (Part {i+1})",
+                "input": chunk,
+                "silence_before": 1,
+                "voice_id": "OA001",  # Will be updated based on selected voice
+                "emotion": "neutral",
+                "model": "tts-1",
+                "speed": 1,
+                "duration": 0
+            })
+        
+        # Add skeptic chunks
+        skeptic_chunks = chunk_text(skeptic_response.content)
+        for i, chunk in enumerate(skeptic_chunks):
+            blocks.append({
+                "name": f"{skeptic_name}'s Perspective (Part {i+1})",
+                "input": chunk,
+                "silence_before": 1,
+                "voice_id": "OA002",  # Will be updated based on selected voice
+                "emotion": "neutral",
+                "model": "tts-1",
+                "speed": 1,
+                "duration": 0
+            })
+
+        return blocks
+    except Exception as e:
+        logger.error(f"Error in debate generation: {str(e)}")
+        return [] 

backend/app/agents/podcast_manager.py

@@ -0,0 +1,393 @@
+import requests
+import json
+import os
+import shutil
+import subprocess
+from datetime import datetime
+from decouple import config
+from motor.motor_asyncio import AsyncIOMotorClient
+from typing import Dict, List
+import logging
+from fastapi import HTTPException, status
+
+logger = logging.getLogger(__name__)
+
+class Settings:
+    MONGODB_URL = config('MONGODB_URL')
+    SECRET_KEY = config('SECRET_KEY')
+    OPENAI_API_KEY = config('OPENAI_API_KEY')
+    # Other settings...
+
+settings = Settings()
+
+client = AsyncIOMotorClient(settings.MONGODB_URL)
+db = client.podcraft
+podcasts = db.podcasts
+
+class PodcastManager:
+    def __init__(self):
+        self.tts_url = "https://api.openai.com/v1/audio/speech"
+        self.headers = {
+            "Authorization": f"Bearer {settings.OPENAI_API_KEY}",
+            "Content-Type": "application/json"
+        }
+        # Create absolute path for temp directory
+        self.temp_dir = os.path.abspath("temp_audio")
+        os.makedirs(self.temp_dir, exist_ok=True)
+        
+        # Define allowed voices
+        self.allowed_voices = ["alloy", "echo", "fable", "onyx", "nova", "shimmer", "ash", "sage", "coral"]
+
+    def generate_speech(self, text: str, voice_id: str, filename: str) -> bool:
+        """Generate speech using OpenAI's TTS API."""
+        try:
+            # Debug logging for voice selection
+            print(f"\n=== TTS Generation Details ===")
+            print(f"File: {filename}")
+            print(f"Voice ID (original): {voice_id}")
+            print(f"Voice ID (lowercase): {voice_id.lower()}")
+            print(f"Allowed voices: {self.allowed_voices}")
+            
+            # Validate and normalize voice_id
+            voice = voice_id.lower().strip()
+            if voice not in self.allowed_voices:
+                print(f"Warning: Invalid voice ID: {voice_id}. Using default voice 'alloy'")
+                voice = "alloy"
+            
+            print(f"Final voice selection: {voice}")
+
+            # Ensure the output directory exists
+            output_dir = os.path.dirname(filename)
+            os.makedirs(output_dir, exist_ok=True)
+
+            payload = {
+                "model": "tts-1",
+                "input": text,
+                "voice": voice
+            }
+            
+            print(f"TTS API payload: {json.dumps(payload, indent=2)}")
+            print(f"Request headers: {json.dumps({k: '***' if k == 'Authorization' else v for k, v in self.headers.items()}, indent=2)}")
+
+            response = requests.post(self.tts_url, json=payload, headers=self.headers)
+            if response.status_code != 200:
+                print(f"API error response: {response.status_code} - {response.text}")
+                return False
+                
+            # Write the audio content to the file
+            with open(filename, "wb") as f:
+                f.write(response.content)
+            
+            print(f"Successfully generated speech file: {filename}")
+            print(f"File size: {os.path.getsize(filename)} bytes")
+            
+            # Verify the file exists and has content
+            if not os.path.exists(filename) or os.path.getsize(filename) == 0:
+                print(f"Error: Generated file is empty or does not exist: {filename}")
+                return False
+                
+            return True
+        except Exception as e:
+            print(f"Error generating speech: {str(e)}")
+            logger.exception(f"Error generating speech: {str(e)}")
+            return False
+
+    def merge_audio_files(self, audio_files: List[str], output_file: str) -> bool:
+        """Merge multiple audio files into one using ffmpeg."""
+        try:
+            # Ensure output directory exists
+            output_dir = os.path.dirname(os.path.abspath(output_file))
+            os.makedirs(output_dir, exist_ok=True)
+            
+            if not audio_files:
+                print("No audio files to merge")
+                return False
+
+            # Verify all input files exist
+            for audio_file in audio_files:
+                if not os.path.exists(audio_file):
+                    print(f"Audio file does not exist: {audio_file}")
+                    return False
+
+            # Ensure all paths are absolute
+            output_file = os.path.abspath(output_file)
+            output_dir = os.path.dirname(output_file)
+            os.makedirs(output_dir, exist_ok=True)
+            
+            # Create temporary files in the same directory
+            list_file = os.path.join(output_dir, "files.txt")
+            silence_file = os.path.join(output_dir, "silence.mp3")
+            
+            print(f"Output directory: {output_dir}")
+            print(f"List file: {list_file}")
+            print(f"Silence file: {silence_file}")
+            
+            # Generate shorter silence file (0.3 seconds instead of 1 second)
+            silence_result = subprocess.run([
+                'ffmpeg', '-f', 'lavfi', '-i', 'anullsrc=r=44100:cl=mono', 
+                '-t', '0.3', '-q:a', '9', '-acodec', 'libmp3lame', silence_file
+            ], capture_output=True, text=True)
+
+            if silence_result.returncode != 0:
+                print(f"Error generating silence file: {silence_result.stderr}")
+                return False
+
+            if not os.path.exists(silence_file):
+                print("Failed to create silence file")
+                return False
+
+            # IMPORTANT: The order here determines the final audio order
+            print("\nGenerating files list in exact provided order:")
+            try:
+                with open(list_file, "w", encoding='utf-8') as f:
+                    for i, audio_file in enumerate(audio_files):
+                        abs_audio_path = os.path.abspath(audio_file)
+                        print(f"{i+1}. Adding audio file: {os.path.basename(abs_audio_path)}")
+                        # Use forward slashes for ffmpeg compatibility
+                        abs_audio_path = abs_audio_path.replace('\\', '/')
+                        silence_path = silence_file.replace('\\', '/')
+                        f.write(f"file '{abs_audio_path}'\n")
+                        # Add a shorter silence after each audio segment (except the last one)
+                        if i < len(audio_files) - 1:
+                            f.write(f"file '{silence_path}'\n")
+            except Exception as e:
+                print(f"Error writing list file: {str(e)}")
+                return False
+
+            if not os.path.exists(list_file):
+                print("Failed to create list file")
+                return False
+
+            # Print the contents of the list file for debugging
+            print("\nContents of files.txt:")
+            with open(list_file, 'r', encoding='utf-8') as f:
+                print(f.read())
+
+            # Merge all files using the concat demuxer with optimized settings
+            try:
+                # Use concat demuxer with additional parameters for better playback
+                result = subprocess.run(
+                    ['ffmpeg', '-f', 'concat', '-safe', '0', '-i', list_file,
+                     '-c:a', 'libmp3lame', '-q:a', '4', '-ar', '44100',
+                     output_file],
+                    capture_output=True,
+                    text=True,
+                    check=True
+                )
+            except subprocess.CalledProcessError as e:
+                logger.error(f"FFmpeg command failed: {e.stderr}")
+                return False
+            
+            # Verify the output file was created
+            if not os.path.exists(output_file):
+                print("Failed to create output file")
+                return False
+
+            print(f"Successfully created merged audio file: {output_file}")
+            return True
+        except Exception as e:
+            print(f"Error merging audio files: {str(e)}")
+            return False
+
+    async def create_podcast(
+        self,
+        topic: str,
+        research: str,
+        conversation_blocks: List[Dict],
+        believer_voice_id: str,
+        skeptic_voice_id: str,
+        user_id: str = None
+    ) -> Dict:
+        """Create a podcast by converting text to speech and storing the results."""
+        podcast_temp_dir = None
+        try:
+            # Debug logging for voice IDs
+            print(f"\nPodcast Creation - Voice Configuration:")
+            print(f"Believer Voice ID: {believer_voice_id}")
+            print(f"Skeptic Voice ID: {skeptic_voice_id}")
+            
+            # Create a unique directory with absolute path
+            timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+            podcast_temp_dir = os.path.abspath(os.path.join(self.temp_dir, timestamp))
+            os.makedirs(podcast_temp_dir, exist_ok=True)
+            
+            print(f"Created temp directory: {podcast_temp_dir}")
+            print(f"Processing conversation blocks: {json.dumps(conversation_blocks, indent=2)}")
+            
+            audio_files = []
+            
+            # Process the blocks differently based on format:
+            # 1. New turn-based format with "type" and "turn" fields
+            # 2. Blocks with "input" field but no turn-based structure (old format)
+            # 3. Blocks with both "input" field and turn-based structure (mixed format)
+            
+            # First check: New format blocks with type and turn
+            if any("type" in block and "turn" in block and "content" in block for block in conversation_blocks):
+                print("\nProcessing new format blocks with type, turn, and content fields")
+                
+                # Process conversation blocks in the EXACT order they were provided
+                # This ensures proper alternation between speakers as specified by the caller
+                
+                for idx, block in enumerate(conversation_blocks):
+                    if "type" in block and "content" in block and "turn" in block:
+                        turn = block.get("turn", 0)
+                        agent_type = block.get("type", "")
+                        content = block.get("content", "")
+                        
+                        if not content.strip():  # Skip empty content
+                            continue
+                            
+                        # Use the correct voice based on agent type
+                        voice_id = believer_voice_id if agent_type == "believer" else skeptic_voice_id
+                        file_prefix = "believer" if agent_type == "believer" else "skeptic"
+                        
+                        # Create a unique filename with turn number
+                        audio_file = os.path.join(podcast_temp_dir, f"{file_prefix}_turn_{turn}_{idx}.mp3")
+                        
+                        print(f"\nProcessing {agent_type} turn {turn} (index {idx}) with voice {voice_id}")
+                        print(f"Content preview: {content[:100]}...")
+                        
+                        if self.generate_speech(content, voice_id, audio_file):
+                            # Add to our audio files list IN THE ORIGINAL ORDER
+                            audio_files.append(audio_file)
+                            print(f"Generated {agent_type} audio for turn {turn}, added to position {len(audio_files)}")
+                        else:
+                            raise Exception(f"Failed to generate audio for {agent_type} turn {turn}")
+                
+            # Second check: Blocks with input field and possibly turn information
+            elif any("input" in block for block in conversation_blocks):
+                print("\nProcessing blocks with input field")
+                
+                # Check if these blocks also have type and turn information
+                has_turn_info = any("turn" in block and "type" in block for block in conversation_blocks)
+                
+                if has_turn_info:
+                    print("Blocks have both input field and turn-based structure - using mixed format")
+                    # Sort by turn if available, ensuring proper sequence
+                    sorted_blocks = sorted(conversation_blocks, key=lambda b: b.get("turn", float('inf')))
+                    
+                    for idx, block in enumerate(sorted_blocks):
+                        if "input" in block and block["input"].strip():
+                            # Determine voice based on type field or name
+                            if "type" in block:
+                                is_believer = block["type"] == "believer"
+                            else:
+                                is_believer = "Believer" in block.get("name", "") or block.get("name", "").lower().startswith("alloy")
+                            
+                            voice_id = believer_voice_id if is_believer else skeptic_voice_id
+                            speaker_type = "believer" if is_believer else "skeptic"
+                            turn = block.get("turn", idx + 1)
+                            
+                            print(f"\nProcessing {speaker_type} block with turn {turn} using voice {voice_id}")
+                            audio_file = os.path.join(podcast_temp_dir, f"{speaker_type}_turn_{turn}_{idx}.mp3")
+                            
+                            if self.generate_speech(block["input"], voice_id, audio_file):
+                                audio_files.append(audio_file)
+                                print(f"Generated audio for {speaker_type} turn {turn}")
+                            else:
+                                raise Exception(f"Failed to generate audio for {speaker_type} turn {turn}")
+                else:
+                    # Old format - process blocks sequentially as they appear
+                    print("Processing old format blocks sequentially")
+                    for i, block in enumerate(conversation_blocks):
+                        if "input" in block and block["input"].strip():
+                            # Check for either "Believer" in name or if the name starts with "alloy"
+                            is_believer = "Believer" in block.get("name", "") or block.get("name", "").lower().startswith("alloy")
+                            voice_id = believer_voice_id if is_believer else skeptic_voice_id
+                            speaker_type = "believer" if is_believer else "skeptic"
+                            
+                            print(f"\nProcessing {speaker_type} block {i+1} with voice {voice_id}")
+                            print(f"Block name: {block.get('name', '')}")  # Debug logging
+                            
+                            audio_file = os.path.join(podcast_temp_dir, f"part_{i+1}.mp3")
+                            if self.generate_speech(block["input"], voice_id, audio_file):
+                                audio_files.append(audio_file)
+                                print(f"Generated audio for part {i+1}")
+                            else:
+                                raise Exception(f"Failed to generate audio for part {i+1}")
+            else:
+                raise Exception("Invalid conversation blocks format - no recognizable structure found")
+
+            if not audio_files:
+                raise Exception("No audio files were generated from the conversation blocks")
+
+            print(f"\nGenerated {len(audio_files)} audio files in total")
+            
+            # Print the final order of audio files for verification
+            print("\nFinal audio file order before merging:")
+            for i, file in enumerate(audio_files):
+                print(f"{i+1}. {os.path.basename(file)}")
+            
+            # Merge all audio files
+            final_audio = os.path.join(podcast_temp_dir, "final_podcast.mp3")
+            print(f"Merging to final audio: {final_audio}")
+            
+            if not self.merge_audio_files(audio_files, final_audio):
+                raise Exception("Failed to merge audio files")
+                
+            # Calculate audio duration using ffprobe
+            duration = 0
+            try:
+                cmd = [
+                    'ffprobe', 
+                    '-v', 'error', 
+                    '-show_entries', 'format=duration', 
+                    '-of', 'default=noprint_wrappers=1:nokey=1', 
+                    final_audio
+                ]
+                duration_result = subprocess.run(cmd, capture_output=True, text=True)
+                if duration_result.returncode == 0:
+                    duration = float(duration_result.stdout.strip())
+                    print(f"Audio duration: {duration} seconds")
+                else:
+                    print(f"Failed to get audio duration: {duration_result.stderr}")
+            except Exception as e:
+                print(f"Error calculating duration: {str(e)}")
+                # Don't fail the entire process for duration calculation
+
+            podcast_doc = {
+                "topic": topic,
+                "research": research,
+                "conversation_blocks": conversation_blocks,
+                "audio_path": final_audio,
+                "created_at": datetime.utcnow(),
+                "believer_voice_id": believer_voice_id,
+                "skeptic_voice_id": skeptic_voice_id,
+                "user_id": user_id,
+                "duration": duration  # Add duration to MongoDB document
+            }
+
+            result = await podcasts.insert_one(podcast_doc)
+            
+            # Clean up individual audio files but keep the final one
+            for audio_file in audio_files:
+                if os.path.exists(audio_file):
+                    os.remove(audio_file)
+
+            return {
+                "podcast_id": str(result.inserted_id),
+                "audio_path": final_audio,
+                "topic": topic,
+                "duration": duration  # Return duration in the result
+            }
+
+        except Exception as e:
+            # Clean up the temp directory in case of error
+            if os.path.exists(podcast_temp_dir):
+                shutil.rmtree(podcast_temp_dir)
+            logger.exception(f"Error in podcast creation: {str(e)}")
+            return {
+                "error": str(e)
+            }
+
+    async def get_podcast(self, podcast_id: str) -> Dict:
+        """Retrieve a podcast by ID."""
+        try:
+            from bson.objectid import ObjectId
+            podcast = await podcasts.find_one({"_id": ObjectId(podcast_id)})
+            if podcast:
+                podcast["_id"] = str(podcast["_id"])
+                return podcast
+            return {"error": "Podcast not found"}
+        except Exception as e:
+            return {"error": str(e)} 

backend/app/agents/researcher.py

@@ -0,0 +1,153 @@
+from langchain_core.prompts import ChatPromptTemplate
+from langchain_openai import ChatOpenAI
+from langchain_community.tools.tavily_search import TavilySearchResults
+from langchain.agents import AgentExecutor, create_openai_functions_agent
+from decouple import config
+from typing import AsyncGenerator, List
+import os
+import json
+
+# Get API keys from environment
+TAVILY_API_KEY = config('TAVILY_API_KEY')
+OPENAI_API_KEY = config('OPENAI_API_KEY')
+
+# Debug logging
+print(f"\nLoaded OpenAI API Key: {OPENAI_API_KEY[:7]}...")
+print(f"Key starts with 'sk-proj-': {OPENAI_API_KEY.startswith('sk-proj-')}")
+print(f"Key starts with 'sk-': {OPENAI_API_KEY.startswith('sk-')}\n")
+
+# Set Tavily API key in environment
+os.environ["TAVILY_API_KEY"] = TAVILY_API_KEY
+
+# Initialize the search tool
+search_tool = TavilySearchResults(tavily_api_key=TAVILY_API_KEY)
+
+# List of available tools for the prompt
+tools_description = """
+Available tools:
+- TavilySearchResults: A search tool that provides comprehensive web search results. Use this to gather information about topics.
+"""
+
+# Create the prompt template
+researcher_prompt = ChatPromptTemplate.from_messages([
+    ("system", """You are an expert researcher tasked with gathering comprehensive information on given topics.
+    Your goal is to provide detailed, factual information limited to 500 words.
+    Focus on key points, recent developments, and verified facts.
+    Structure your response clearly with main points and supporting details.
+    Keep your response concise and focused.
+    
+    {tools}
+    
+    Remember to provide accurate and up-to-date information."""),
+    ("user", "{input}"),
+    ("assistant", "{agent_scratchpad}")
+])
+
+# Initialize the LLM with streaming
+researcher_llm = ChatOpenAI(
+    model="gpt-4o-mini",
+    temperature=0.3,
+    api_key=OPENAI_API_KEY,
+    streaming=True
+)
+
+# Create the agent
+researcher_agent = create_openai_functions_agent(
+    llm=researcher_llm,
+    prompt=researcher_prompt,
+    tools=[search_tool]
+)
+
+# Create the agent executor
+researcher_executor = AgentExecutor(
+    agent=researcher_agent,
+    tools=[search_tool],
+    verbose=True,
+    handle_parsing_errors=True,
+    return_intermediate_steps=True
+)
+
+def chunk_text(text: str, max_length: int = 3800) -> List[str]:
+    """Split text into chunks of maximum length while preserving sentence boundaries."""
+    # Split into sentences and trim whitespace
+    sentences = [s.strip() for s in text.split('.')]
+    sentences = [s + '.' for s in sentences if s]
+    
+    chunks = []
+    current_chunk = []
+    current_length = 0
+    
+    for sentence in sentences:
+        sentence_length = len(sentence)
+        if current_length + sentence_length > max_length:
+            if current_chunk:  # If we have accumulated sentences, join them and add to chunks
+                chunks.append(' '.join(current_chunk))
+                current_chunk = [sentence]
+                current_length = sentence_length
+            else:  # If a single sentence is too long, split it
+                if sentence_length > max_length:
+                    words = sentence.split()
+                    temp_chunk = []
+                    temp_length = 0
+                    for word in words:
+                        if temp_length + len(word) + 1 > max_length:
+                            chunks.append(' '.join(temp_chunk))
+                            temp_chunk = [word]
+                            temp_length = len(word)
+                        else:
+                            temp_chunk.append(word)
+                            temp_length += len(word) + 1
+                    if temp_chunk:
+                        chunks.append(' '.join(temp_chunk))
+                else:
+                    chunks.append(sentence)
+        else:
+            current_chunk.append(sentence)
+            current_length += sentence_length
+    
+    if current_chunk:
+        chunks.append(' '.join(current_chunk))
+    
+    return chunks
+
+async def research_topic_stream(topic: str) -> AsyncGenerator[str, None]:
+    """
+    Research a topic and stream the results as they are generated.
+    """
+    try:
+        async for chunk in researcher_executor.astream(
+            {
+                "input": f"Research this topic thoroughly: {topic}",
+                "tools": tools_description
+            }
+        ):
+            if isinstance(chunk, dict):
+                # Stream intermediate steps for transparency
+                if "intermediate_steps" in chunk:
+                    for step in chunk["intermediate_steps"]:
+                        yield json.dumps({"type": "intermediate", "content": str(step)}) + "\n"
+                
+                # Stream the final output
+                if "output" in chunk:
+                    yield json.dumps({"type": "final", "content": chunk["output"]}) + "\n"
+            else:
+                yield json.dumps({"type": "chunk", "content": str(chunk)}) + "\n"
+    except Exception as e:
+        yield json.dumps({"type": "error", "content": str(e)}) + "\n"
+
+async def research_topic(topic: str) -> str:
+    """
+    Research a topic and return the complete result.
+    Kept for compatibility with existing code.
+    """
+    try:
+        result = await researcher_executor.ainvoke(
+            {
+                "input": f"Research this topic thoroughly: {topic}",
+                "tools": tools_description
+            }
+        )
+        return result["output"]
+    except Exception as e:
+        print(f"Error in research: {str(e)}")
+        return "Error occurred during research." 

backend/app/database.py

@@ -0,0 +1,13 @@
+from motor.motor_asyncio import AsyncIOMotorClient
+from decouple import config
+
+MONGODB_URL = config('MONGODB_URL')
+client = AsyncIOMotorClient(MONGODB_URL)
+db = client.podcraft
+
+# Collections
+users = db.users
+podcasts = db.podcasts
+agents = db.agents  # New collection for storing agent configurations
+workflows = db.workflows  # Collection for storing workflow configurations 
+workflows = db.workflows  # Collection for storing workflow configurations 

backend/app/main.py

@@ -0,0 +1,1020 @@
+from fastapi import FastAPI, HTTPException, Depends, status, Request
+from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import StreamingResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
+from passlib.context import CryptContext
+from datetime import datetime, timedelta
+from jose import JWTError, jwt
+from decouple import config
+import logging
+from .database import users, podcasts, agents, workflows
+from .models import (
+    UserCreate, UserLogin, Token, UserUpdate, UserResponse,
+    PodcastRequest, PodcastResponse, AgentCreate, AgentResponse,
+    TextPodcastRequest, TextPodcastResponse,
+    WorkflowCreate, WorkflowResponse, InsightsData, TranscriptEntry
+)
+from .agents.researcher import research_topic, research_topic_stream
+from .agents.debaters import generate_debate, generate_debate_stream, chunk_text
+from .agents.podcast_manager import PodcastManager
+import json
+import os
+import shutil
+from typing import List
+import time
+from bson import ObjectId
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Debug environment variables
+openai_key = config('OPENAI_API_KEY')
+logger.info(f"Loaded OpenAI API Key at startup: {openai_key[:7]}...")
+logger.info(f"Key starts with 'sk-proj-': {openai_key.startswith('sk-proj-')}")
+logger.info(f"Key starts with 'sk-': {openai_key.startswith('sk-')}")
+
+app = FastAPI()
+
+# CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173"],  # React app
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+    expose_headers=["*"]  # Expose all headers
+)
+
+# Create necessary directories if they don't exist
+os.makedirs("temp", exist_ok=True)
+os.makedirs("temp_audio", exist_ok=True)
+
+# Make sure the directory paths are absolute
+TEMP_AUDIO_DIR = os.path.abspath("temp_audio")
+print(f"Mounting temp_audio directory: {TEMP_AUDIO_DIR}")
+
+# Mount static directory for audio files
+app.mount("/audio", StaticFiles(directory=TEMP_AUDIO_DIR), name="audio")
+
+# Security
+pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")
+SECRET_KEY = config("SECRET_KEY")
+ACCESS_TOKEN_EXPIRE_MINUTES = int(config("ACCESS_TOKEN_EXPIRE_MINUTES"))
+
+# Helper functions
+def create_access_token(data: dict):
+    expires = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
+    data.update({"exp": expires})
+    token = jwt.encode(data, SECRET_KEY, algorithm="HS256")
+    return token
+
+def verify_password(plain_password, hashed_password):
+    return pwd_context.verify(plain_password, hashed_password)
+
+def get_password_hash(password):
+    return pwd_context.hash(password)
+
+async def get_current_user(token: str = Depends(oauth2_scheme)):
+    logger.info("Authenticating user with token")
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials"
+    )
+    try:
+        logger.info("Decoding JWT token")
+        payload = jwt.decode(token, SECRET_KEY, algorithms=["HS256"])
+        username: str = payload.get("sub")
+        if username is None:
+            logger.error("No username found in token")
+            raise credentials_exception
+        logger.info(f"Token decoded successfully for user: {username}")
+    except JWTError as e:
+        logger.error(f"JWT Error: {str(e)}")
+        raise credentials_exception
+        
+    user = await users.find_one({"username": username})
+    if user is None:
+        logger.error(f"No user found for username: {username}")
+        raise credentials_exception
+    logger.info(f"User authenticated successfully: {username}")
+    return user
+
+# Initialize PodcastManager
+podcast_manager = PodcastManager()
+
+# Routes
+@app.post("/signup")
+async def signup(user: UserCreate):
+    # Check if username exists
+    if await users.find_one({"username": user.username}):
+        raise HTTPException(status_code=400, detail="Username already registered")
+    
+    # Create new user
+    user_dict = user.dict()
+    user_dict["password"] = get_password_hash(user.password)
+    await users.insert_one(user_dict)
+    
+    # Create and return token after signup
+    access_token = create_access_token(data={"sub": user.username})
+    return {"access_token": access_token, "token_type": "bearer"}
+
+@app.post("/token", response_model=Token)
+async def login_for_access_token(form_data: OAuth2PasswordRequestForm = Depends()):
+    logger.info(f"Token request for user: {form_data.username}")
+    # Find user
+    db_user = await users.find_one({"username": form_data.username})
+    if not db_user or not verify_password(form_data.password, db_user["password"]):
+        logger.error(f"Failed token request for user: {form_data.username}")
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    
+    # Create access token
+    access_token = create_access_token(data={"sub": form_data.username})
+    logger.info(f"Token generated successfully for user: {form_data.username}")
+    return {"access_token": access_token, "token_type": "bearer"}
+
+@app.post("/login", response_model=Token)
+async def login(request: Request, user: UserLogin):
+    logger.info(f"Login attempt for user: {user.username}")
+    # Find user
+    db_user = await users.find_one({"username": user.username})
+    if not db_user or not verify_password(user.password, db_user["password"]):
+        logger.error(f"Failed login attempt for user: {user.username}")
+        raise HTTPException(
+            status_code=401,
+            detail="Incorrect username or password"
+        )
+    
+    # Create access token
+    access_token = create_access_token(data={"sub": user.username})
+    logger.info(f"Login successful for user: {user.username}")
+    return {"access_token": access_token, "token_type": "bearer"}
+
+@app.get("/user/me", response_model=UserResponse)
+async def get_user_profile(current_user: dict = Depends(get_current_user)):
+    return {
+        "username": current_user["username"]
+    }
+
+@app.put("/user/update-password")
+async def update_password(user_update: UserUpdate, current_user: dict = Depends(get_current_user)):
+    hashed_password = get_password_hash(user_update.password)
+    await users.update_one(
+        {"username": current_user["username"]},
+        {"$set": {"password": hashed_password}}
+    )
+    return {"message": "Password updated successfully"}
+
+@app.get("/")
+async def root():
+    return {"message": "Welcome to PodCraft API"}
+
+# New podcast endpoints
+@app.post("/generate-podcast", response_model=PodcastResponse)
+async def generate_podcast(request: Request, podcast_req: PodcastRequest, current_user: dict = Depends(get_current_user)):
+    logger.info(f"Received podcast generation request for topic: {podcast_req.topic}")
+    logger.info(f"Request headers: {dict(request.headers)}")
+    
+    try:
+        # Step 1: Research the topic
+        logger.info("Starting research phase")
+        research_results = await research_topic(podcast_req.topic)
+        logger.info("Research phase completed")
+        
+        # Step 2: Generate debate between believer and skeptic
+        logger.info("Starting debate generation")
+        conversation_blocks = await generate_debate(
+            research=research_results,
+            believer_name=podcast_req.believer_voice_id,
+            skeptic_name=podcast_req.skeptic_voice_id
+        )
+        
+        if not conversation_blocks:
+            logger.error("Failed to generate debate - no conversation blocks returned")
+            raise HTTPException(status_code=500, detail="Failed to generate debate")
+        
+        logger.info("Debate generation completed")
+        
+        # Step 3: Create podcast using TTS and store in MongoDB
+        logger.info("Starting podcast creation with TTS")
+        result = await podcast_manager.create_podcast(
+            topic=podcast_req.topic,
+            research=research_results,
+            conversation_blocks=conversation_blocks,
+            believer_voice_id=podcast_req.believer_voice_id,
+            skeptic_voice_id=podcast_req.skeptic_voice_id
+        )
+        
+        if "error" in result:
+            logger.error(f"Error in podcast creation: {result['error']}")
+            raise HTTPException(status_code=500, detail=result["error"])
+        
+        logger.info(f"Podcast generated successfully with ID: {result.get('podcast_id')}")
+        return result
+    except Exception as e:
+        logger.error(f"Error in podcast generation: {str(e)}", exc_info=True)
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/podcast/{podcast_id}", response_model=PodcastResponse)
+async def get_podcast(podcast_id: str, current_user: dict = Depends(get_current_user)):
+    try:
+        result = await podcast_manager.get_podcast(podcast_id)
+        if "error" in result:
+            raise HTTPException(status_code=404, detail=result["error"])
+        return result
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/generate-podcast/stream")
+async def generate_podcast_stream(request: PodcastRequest, current_user: dict = Depends(get_current_user)):
+    async def generate():
+        try:
+            # Store complete responses for podcast creation
+            believer_turns = {}  # Store responses by turn number
+            skeptic_turns = {}   # Store responses by turn number
+            
+            # Stream research results
+            logger.info("Starting research phase (streaming)")
+            research_results = ""
+            async for chunk in research_topic_stream(request.topic):
+                yield chunk
+                if isinstance(chunk, str) and "final" in chunk:
+                    data = json.loads(chunk)
+                    if data["type"] == "final":
+                        research_results = data["content"]
+            
+            # Stream debate and track turns properly
+            logger.info("Starting debate phase (streaming)")
+            async for chunk in generate_debate_stream(
+                research=research_results,
+                believer_name=request.believer_voice_id,
+                skeptic_name=request.skeptic_voice_id
+            ):
+                yield chunk
+                # Parse the chunk
+                data = json.loads(chunk)
+                
+                # Track responses by turn to maintain proper ordering
+                if data["type"] == "believer" and "turn" in data:
+                    turn = data["turn"]
+                    if turn not in believer_turns:
+                        believer_turns[turn] = ""
+                    believer_turns[turn] += data["content"]
+                elif data["type"] == "skeptic" and "turn" in data:
+                    turn = data["turn"]
+                    if turn not in skeptic_turns:
+                        skeptic_turns[turn] = ""
+                    skeptic_turns[turn] += data["content"]
+            
+            # Create strictly alternating conversation blocks for podcast
+            blocks = []
+            
+            # Find the maximum turn number
+            max_turn = max(
+                max(skeptic_turns.keys()) if skeptic_turns else 0,
+                max(believer_turns.keys()) if believer_turns else 0
+            )
+            
+            logger.info(f"Creating podcast with {len(believer_turns)} believer turns and {len(skeptic_turns)} skeptic turns")
+            logger.info(f"Max turn number: {max_turn}")
+            
+            # Create blocks in strict turn order: Skeptic 1, Believer 1, Skeptic 2, Believer 2, etc.
+            for turn in range(1, max_turn + 1):
+                # First Skeptic's turn
+                if turn in skeptic_turns and skeptic_turns[turn].strip():
+                    blocks.append({
+                        "name": f"{request.skeptic_voice_id}'s Turn {turn}",
+                        "input": skeptic_turns[turn],
+                        "silence_before": 1,
+                        "voice_id": request.skeptic_voice_id,
+                        "emotion": "neutral",
+                        "model": "tts-1",
+                        "speed": 1,
+                        "duration": 0,
+                        "type": "skeptic",
+                        "turn": turn
+                    })
+                
+                # Then Believer's turn
+                if turn in believer_turns and believer_turns[turn].strip():
+                    blocks.append({
+                        "name": f"{request.believer_voice_id}'s Turn {turn}",
+                        "input": believer_turns[turn],
+                        "silence_before": 1,
+                        "voice_id": request.believer_voice_id,
+                        "emotion": "neutral",
+                        "model": "tts-1",
+                        "speed": 1,
+                        "duration": 0,
+                        "type": "believer",
+                        "turn": turn
+                    })
+            
+            # Log the conversational structure for debugging
+            turn_structure = [f"{block.get('type', 'unknown')}-{block.get('turn', 'unknown')}" for block in blocks]
+            logger.info(f"Conversation structure: {turn_structure}")
+            
+            # Create podcast using TTS and store in MongoDB
+            logger.info("Starting podcast creation with TTS")
+            result = await podcast_manager.create_podcast(
+                topic=request.topic,
+                research=research_results,
+                conversation_blocks=blocks,
+                believer_voice_id=request.believer_voice_id,
+                skeptic_voice_id=request.skeptic_voice_id,
+                user_id=str(current_user["_id"])
+            )
+            
+            if "error" in result:
+                logger.error(f"Error in podcast creation: {result['error']}")
+                yield json.dumps({"type": "error", "content": result["error"]}) + "\n"
+            else:
+                logger.info(f"Podcast generated successfully with ID: {result.get('podcast_id')}")
+                # Create audio URL from the audio path
+                audio_url = f"/audio/{os.path.basename(os.path.dirname(result['audio_path']))}/final_podcast.mp3"
+                yield json.dumps({
+                    "type": "success",
+                    "content": f"Podcast created successfully! ID: {result.get('podcast_id')}",
+                    "podcast_url": audio_url
+                }) + "\n"
+                
+        except Exception as e:
+            logger.error(f"Error in streaming podcast generation: {str(e)}")
+            yield json.dumps({"type": "error", "content": str(e)}) + "\n"
+    
+    return StreamingResponse(
+        generate(),
+        media_type="text/event-stream"
+    )
+
+@app.get("/podcasts")
+async def list_podcasts(current_user: dict = Depends(get_current_user)):
+    try:
+        # Query podcasts for the current user
+        cursor = podcasts.find({"user_id": str(current_user["_id"])})
+        podcast_list = []
+        async for podcast in cursor:
+            # Convert MongoDB _id to string and create audio URL
+            podcast["_id"] = str(podcast["_id"])
+            if "audio_path" in podcast:
+                audio_url = f"/audio/{os.path.basename(os.path.dirname(podcast['audio_path']))}/final_podcast.mp3"
+                podcast["audio_url"] = f"http://localhost:8000{audio_url}"
+            podcast_list.append(podcast)
+        return podcast_list
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/podcasts/latest")
+async def get_latest_podcast(current_user: dict = Depends(get_current_user)):
+    try:
+        # Query podcasts for the current user, sorted by creation date (newest first)
+        from bson.objectid import ObjectId
+        
+        # Find the most recent podcast for this user
+        latest_podcast = await podcasts.find_one(
+            {"user_id": str(current_user["_id"])},
+            sort=[("created_at", -1)]  # Sort by created_at in descending order
+        )
+        
+        if not latest_podcast:
+            return {"message": "No podcasts found"}
+        
+        # Convert MongoDB _id to string and create audio URL
+        latest_podcast["_id"] = str(latest_podcast["_id"])
+        
+        if "audio_path" in latest_podcast:
+            audio_url = f"/audio/{os.path.basename(os.path.dirname(latest_podcast['audio_path']))}/final_podcast.mp3"
+            latest_podcast["audio_url"] = f"http://localhost:8000{audio_url}"
+        
+        logger.info(f"Latest podcast found: {latest_podcast['topic']}")
+        return latest_podcast
+    except Exception as e:
+        logger.error(f"Error getting latest podcast: {str(e)}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.delete("/podcast/{podcast_id}")
+async def delete_podcast(podcast_id: str, current_user: dict = Depends(get_current_user)):
+    try:
+        # Convert string ID to ObjectId
+        from bson.objectid import ObjectId
+        podcast_obj_id = ObjectId(podcast_id)
+        
+        # Find the podcast first to get its audio path
+        podcast = await podcasts.find_one({"_id": podcast_obj_id, "user_id": str(current_user["_id"])})
+        if not podcast:
+            raise HTTPException(status_code=404, detail="Podcast not found")
+        
+        # Delete the podcast from MongoDB
+        result = await podcasts.delete_one({"_id": podcast_obj_id, "user_id": str(current_user["_id"])})
+        
+        if result.deleted_count == 0:
+            raise HTTPException(status_code=404, detail="Podcast not found")
+            
+        # Delete the associated audio files if they exist
+        if "audio_path" in podcast:
+            audio_dir = os.path.dirname(podcast["audio_path"])
+            if os.path.exists(audio_dir):
+                shutil.rmtree(audio_dir)
+        
+        return {"message": "Podcast deleted successfully"}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/agents/create", response_model=AgentResponse)
+async def create_agent(agent: AgentCreate, current_user: dict = Depends(get_current_user)):
+    """Create a new agent configuration for the current user."""
+    try:
+        # Convert the user ID to string to ensure consistent handling
+        user_id = str(current_user["_id"])
+        
+        # Prepare agent data
+        agent_data = {
+            **agent.dict(),
+            "user_id": user_id,
+            "created_at": datetime.utcnow()
+        }
+        
+        # Insert the agent into the database
+        result = await agents.insert_one(agent_data)
+        
+        # Return the created agent with its ID
+        created_agent = await agents.find_one({"_id": result.inserted_id})
+        if not created_agent:
+            raise HTTPException(status_code=500, detail="Failed to retrieve created agent")
+            
+        return {
+            "agent_id": str(created_agent["_id"]),
+            **{k: v for k, v in created_agent.items() if k != "_id"}
+        }
+    except Exception as e:
+        logger.error(f"Error creating agent: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to create agent: {str(e)}")
+
+@app.get("/agents", response_model=List[AgentResponse])
+async def list_agents(current_user: dict = Depends(get_current_user)):
+    """List all agents created by the current user."""
+    try:
+        # Convert user ID to string for consistent handling
+        user_id = str(current_user["_id"])
+        user_agents = []
+        
+        # Find agents for the current user
+        async for agent in agents.find({"user_id": user_id}):
+            user_agents.append({
+                "agent_id": str(agent["_id"]),
+                **{k: v for k, v in agent.items() if k != "_id"}
+            })
+        
+        return user_agents
+    except Exception as e:
+        logger.error(f"Error listing agents: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to list agents: {str(e)}")
+
+@app.post("/agents/test-voice")
+async def test_agent_voice(request: Request):
+    try:
+        # Parse request body
+        data = await request.json()
+        text = data.get("text")
+        voice_id = data.get("voice_id")
+        emotion = data.get("emotion", "neutral")  # Default emotion
+        speed = data.get("speed", 1.0)
+
+        # Log the received request
+        logger.info(f"Test voice request received: voice_id={voice_id}, text={text[:30]}...")
+        
+        if not text or not voice_id:
+            logger.error("Missing required fields in test voice request")
+            raise HTTPException(status_code=400, detail="Missing required fields (text or voice_id)")
+
+        # Initialize the podcast manager
+        manager = PodcastManager()
+
+        # Generate a unique filename for this test
+        test_filename = f"test_{voice_id}_{int(time.time())}.mp3"
+        output_dir = os.path.join("temp_audio", f"test_{int(time.time())}")
+        os.makedirs(output_dir, exist_ok=True)
+        output_path = os.path.join(output_dir, test_filename)
+
+        logger.info(f"Generating test audio to {output_path}")
+
+        # Generate the speech
+        success = manager.generate_speech(text, voice_id, output_path)
+
+        if not success:
+            logger.error("Failed to generate test audio")
+            raise HTTPException(status_code=500, detail="Failed to generate test audio")
+
+        # Construct the audio URL
+        audio_url = f"/audio/{os.path.basename(output_dir)}/{test_filename}"
+        full_audio_url = f"http://localhost:8000{audio_url}"
+        
+        logger.info(f"Test audio generated successfully at {full_audio_url}")
+
+        # Return the full URL to the generated audio
+        return {"audio_url": full_audio_url, "status": "success"}
+
+    except Exception as e:
+        logger.error(f"Error in test_agent_voice: {str(e)}", exc_info=True)
+        return {"error": str(e), "status": "error", "audio_url": None}
+
+# Add the new PUT endpoint for updating agents
+@app.put("/agents/{agent_id}", response_model=AgentResponse)
+async def update_agent(agent_id: str, agent: AgentCreate, current_user: dict = Depends(get_current_user)):
+    """Update an existing agent configuration."""
+    try:
+        # Convert user ID to string for consistent handling
+        user_id = str(current_user["_id"])
+        
+        # Convert agent_id to ObjectId
+        from bson.objectid import ObjectId
+        agent_obj_id = ObjectId(agent_id)
+        
+        # Check if agent exists and belongs to user
+        existing_agent = await agents.find_one({
+            "_id": agent_obj_id,
+            "user_id": user_id
+        })
+        
+        if not existing_agent:
+            raise HTTPException(status_code=404, detail="Agent not found or unauthorized")
+        
+        # Prepare update data
+        update_data = {
+            **agent.dict(),
+            "updated_at": datetime.utcnow()
+        }
+        
+        # Update the agent
+        result = await agents.update_one(
+            {"_id": agent_obj_id},
+            {"$set": update_data}
+        )
+        
+        if result.modified_count == 0:
+            raise HTTPException(status_code=500, detail="Failed to update agent")
+            
+        # Get the updated agent
+        updated_agent = await agents.find_one({"_id": agent_obj_id})
+        if not updated_agent:
+            raise HTTPException(status_code=500, detail="Failed to retrieve updated agent")
+            
+        return {
+            "agent_id": str(updated_agent["_id"]),
+            **{k: v for k, v in updated_agent.items() if k != "_id"}
+        }
+    except Exception as e:
+        logger.error(f"Error updating agent: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to update agent: {str(e)}")
+
+@app.get("/agents/{agent_id}", response_model=AgentResponse)
+async def get_agent(agent_id: str, current_user: dict = Depends(get_current_user)):
+    """Get a specific agent by ID."""
+    try:
+        # Convert user ID to string for consistent handling
+        user_id = str(current_user["_id"])
+        
+        # Convert agent_id to ObjectId
+        from bson.objectid import ObjectId
+        agent_obj_id = ObjectId(agent_id)
+        
+        # Check if agent exists and belongs to user
+        agent = await agents.find_one({
+            "_id": agent_obj_id,
+            "user_id": user_id
+        })
+        
+        if not agent:
+            raise HTTPException(status_code=404, detail="Agent not found or unauthorized")
+            
+        # Return the agent data
+        return {
+            "agent_id": str(agent["_id"]),
+            **{k: v for k, v in agent.items() if k != "_id"}
+        }
+    except Exception as e:
+        logger.error(f"Error getting agent: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to get agent: {str(e)}")
+
+@app.post("/generate-text-podcast", response_model=TextPodcastResponse)
+async def generate_text_podcast(request: TextPodcastRequest, current_user: dict = Depends(get_current_user)):
+    """Generate a podcast from text input with a single voice and emotion."""
+    logger.info(f"Received text-based podcast generation request from user: {current_user['username']}")
+    
+    try:
+        # Create conversation block for the single voice
+        conversation_blocks = [
+            {
+                "name": "Voice",
+                "input": request.text,
+                "silence_before": 1,
+                "voice_id": request.voice_id,
+                "emotion": request.emotion,
+                "model": "tts-1",
+                "speed": request.speed,
+                "duration": 0
+            }
+        ]
+        
+        # Use the provided title if available, otherwise use generic title
+        podcast_title = request.title if hasattr(request, 'title') and request.title else f"Text Podcast {datetime.now().strftime('%Y-%m-%d %H:%M')}"
+        podcast_description = request.text[:150] + "..." if len(request.text) > 150 else request.text
+        
+        # Create podcast using TTS
+        result = await podcast_manager.create_podcast(
+            topic=podcast_title,
+            research=podcast_description,
+            conversation_blocks=conversation_blocks,
+            believer_voice_id=request.voice_id,  # Using same voice for both since we only need one
+            skeptic_voice_id=request.voice_id,
+            user_id=str(current_user["_id"])
+        )
+        
+        if "error" in result:
+            logger.error(f"Error in podcast creation: {result['error']}")
+            return TextPodcastResponse(
+                audio_url="",
+                status="failed",
+                error=result["error"],
+                duration=0,
+                updated_at=datetime.now().isoformat()
+            )
+        
+        # Create audio URL from the audio path
+        audio_url = f"/audio/{os.path.basename(os.path.dirname(result['audio_path']))}/final_podcast.mp3"
+        full_audio_url = f"http://localhost:8000{audio_url}"
+        
+        logger.info("Successfully generated text-based podcast")
+        
+        return TextPodcastResponse(
+            audio_url=full_audio_url,
+            duration=result.get("duration", 0),
+            status="completed",
+            error=None,
+            updated_at=datetime.now().isoformat()
+        )
+        
+    except Exception as e:
+        logger.error(f"Error generating text-based podcast: {str(e)}", exc_info=True)
+        return TextPodcastResponse(
+            audio_url="",
+            status="failed",
+            error=str(e),
+            duration=0,
+            updated_at=datetime.now().isoformat()
+        )
+  
+  
+@app.get("/api/workflows", response_model=List[WorkflowResponse])
+async def list_workflows(current_user: dict = Depends(get_current_user)):
+    try:
+        print("\n=== Debug list_workflows ===")
+        print(f"Current user object: {current_user}")
+        print(f"User ID type: {type(current_user['_id'])}")
+        print(f"Username: {current_user['username']}")
+        
+        # Use email as user_id for consistency
+        user_id = current_user["username"]
+        print(f"Using user_id (email): {user_id}")
+        
+        # Find workflows for this user and convert cursor to list
+        workflows_cursor = workflows.find({"user_id": user_id})
+        workflows_list = await workflows_cursor.to_list(length=None)
+        
+        print(f"Found {len(workflows_list)} workflows")
+        
+        # Convert MongoDB _id to string and datetime to ISO format for each workflow
+        validated_workflows = []
+        for workflow in workflows_list:
+            print(f"\nProcessing workflow: {workflow}")
+            
+            # Convert MongoDB _id to string
+            workflow_data = {
+                "id": str(workflow["_id"]),
+                "name": workflow["name"],
+                "description": workflow.get("description", ""),
+                "nodes": workflow.get("nodes", []),
+                "edges": workflow.get("edges", []),
+                "user_id": workflow["user_id"],
+                "created_at": workflow["created_at"].isoformat() if "created_at" in workflow else None,
+                "updated_at": workflow["updated_at"].isoformat() if "updated_at" in workflow else None
+            }
+            
+            print(f"Converted workflow data: {workflow_data}")
+            
+            # Validate each workflow
+            validated_workflow = WorkflowResponse(**workflow_data)
+            print(f"Validated workflow: {validated_workflow}")
+            
+            validated_workflows.append(validated_workflow)
+        
+        print(f"Successfully validated {len(validated_workflows)} workflows")
+        print("=== End Debug ===\n")
+        
+        return validated_workflows
+    except Exception as e:
+        print(f"Error in list_workflows: {str(e)}")
+        print(f"Error type: {type(e)}")
+        import traceback
+        print(f"Traceback: {traceback.format_exc()}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.put("/api/workflows/{workflow_id}", response_model=WorkflowResponse)
+async def update_workflow(workflow_id: str, workflow: WorkflowCreate, current_user: dict = Depends(get_current_user)):
+    """Update a specific workflow."""
+    try:
+        print("\n=== Debug update_workflow ===")
+        print(f"Updating workflow ID: {workflow_id}")
+        print(f"Current user: {current_user.get('username')}")
+        
+        # Prepare update data
+        now = datetime.utcnow()
+        
+        # Convert insights to dict if it's a Pydantic model
+        insights_data = workflow.insights
+        if isinstance(insights_data, InsightsData):
+            insights_data = insights_data.dict()
+            print(f"Converted InsightsData to dict: {type(insights_data)}")
+        
+        workflow_data = {
+            "name": workflow.name,
+            "description": workflow.description,
+            "nodes": workflow.nodes,
+            "edges": workflow.edges,
+            "insights": insights_data,  # Use the converted insights
+            "updated_at": now
+        }
+        
+        print(f"Update data prepared (insights type: {type(workflow_data['insights'])})")
+        
+        # Update the workflow
+        result = await workflows.update_one(
+            {"_id": ObjectId(workflow_id), "user_id": current_user.get("username")},
+            {"$set": workflow_data}
+        )
+        
+        if result.modified_count == 0:
+            raise HTTPException(status_code=404, detail="Workflow not found")
+        
+        # Get the updated workflow
+        updated_workflow = await workflows.find_one({"_id": ObjectId(workflow_id)})
+        
+        # Prepare response data
+        response_data = {
+            "id": str(updated_workflow["_id"]),
+            "name": updated_workflow["name"],
+            "description": updated_workflow.get("description", ""),
+            "nodes": updated_workflow.get("nodes", []),
+            "edges": updated_workflow.get("edges", []),
+            "insights": updated_workflow.get("insights", ""),  # Add insights field
+            "user_id": updated_workflow["user_id"],
+            "created_at": updated_workflow["created_at"].isoformat() if "created_at" in updated_workflow else None,
+            "updated_at": updated_workflow["updated_at"].isoformat() if "updated_at" in updated_workflow else None
+        }
+        
+        print(f"Response data prepared (insights type: {type(response_data['insights'])})")
+        
+        # Create and validate the response model
+        response = WorkflowResponse(**response_data)
+        print(f"Validated response: {response}")
+        print("=== End Debug ===\n")
+        
+        return response
+    except Exception as e:
+        print(f"Error in update_workflow: {str(e)}")
+        print(f"Error type: {type(e)}")
+        import traceback
+        print(f"Traceback: {traceback.format_exc()}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.delete("/api/workflows/{workflow_id}")
+async def delete_workflow(workflow_id: str, current_user: dict = Depends(get_current_user)):
+    """Delete a specific workflow."""
+    try:
+        result = await workflows.delete_one({
+            "_id": ObjectId(workflow_id),
+            "user_id": current_user.get("username")  # This is actually the email from the token
+        })
+        
+        if result.deleted_count == 0:
+            raise HTTPException(status_code=404, detail="Workflow not found")
+            
+        return {"message": "Workflow deleted successfully"}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/api/workflows", response_model=WorkflowResponse)
+async def create_workflow(workflow: WorkflowCreate, current_user: dict = Depends(get_current_user)):
+    try:
+        print("\n=== Debug create_workflow ===")
+        print(f"Current user object: {current_user}")
+        print(f"Username: {current_user.get('username')}")
+        
+        # Use email from token as user_id for consistency
+        user_id = current_user.get("username")  # This is actually the email from the token
+        print(f"Using user_id (email): {user_id}")
+        
+        # Convert insights to dict if it's a Pydantic model
+        insights_data = workflow.insights
+        if isinstance(insights_data, InsightsData):
+            insights_data = insights_data.dict()
+            print(f"Converted InsightsData to dict: {type(insights_data)}")
+        
+        # Create workflow data
+        now = datetime.utcnow()
+        workflow_data = {
+            "name": workflow.name,
+            "description": workflow.description,
+            "nodes": workflow.nodes,
+            "edges": workflow.edges,
+            "insights": insights_data,  # Use the converted insights
+            "user_id": user_id,
+            "created_at": now,
+            "updated_at": now
+        }
+        
+        print(f"Workflow data prepared (insights type: {type(workflow_data['insights'])})")
+        
+        # Insert into database
+        result = await workflows.insert_one(workflow_data)
+        
+        # Prepare response data
+        response_data = {
+            "id": str(result.inserted_id),
+            "name": workflow_data["name"],
+            "description": workflow_data["description"],
+            "nodes": workflow_data["nodes"],
+            "edges": workflow_data["edges"],
+            "insights": workflow_data.get("insights"),  # Add insights field
+            "user_id": workflow_data["user_id"],
+            "created_at": workflow_data["created_at"].isoformat(),
+            "updated_at": workflow_data["updated_at"].isoformat()
+        }
+        
+        print(f"Response data prepared (insights type: {type(response_data['insights'])})")
+        
+        # Create and validate the response model
+        response = WorkflowResponse(**response_data)
+        print(f"Validated response: {response}")
+        print("=== End Debug ===\n")
+        
+        return response
+    except Exception as e:
+        print(f"Error in create_workflow: {str(e)}")
+        print(f"Error type: {type(e)}")
+        import traceback
+        print(f"Traceback: {traceback.format_exc()}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/api/workflows/{workflow_id}", response_model=WorkflowResponse)
+async def get_workflow(workflow_id: str, current_user: dict = Depends(get_current_user)):
+    """Get a specific workflow by ID."""
+    try:
+        print("\n=== Debug get_workflow ===")
+        print(f"Looking for workflow ID: {workflow_id}")
+        print(f"Current user: {current_user.get('username')}")
+        
+        workflow = await workflows.find_one({
+            "_id": ObjectId(workflow_id),
+            "user_id": current_user.get("username")  # This is actually the email from the token
+        })
+        
+        if workflow is None:
+            raise HTTPException(status_code=404, detail="Workflow not found")
+        
+        print(f"Found workflow: {workflow}")
+        
+        # Convert MongoDB _id to string
+        workflow["id"] = str(workflow.pop("_id"))
+        
+        # Convert datetime objects to ISO format strings
+        if "created_at" in workflow:
+            workflow["created_at"] = workflow["created_at"].isoformat()
+            print(f"Converted created_at: {workflow['created_at']}")
+        
+        if "updated_at" in workflow:
+            workflow["updated_at"] = workflow["updated_at"].isoformat()
+            print(f"Converted updated_at: {workflow['updated_at']}")
+        
+        # Ensure all required fields are present
+        response_data = {
+            "id": workflow["id"],
+            "name": workflow["name"],
+            "description": workflow.get("description", ""),
+            "nodes": workflow.get("nodes", []),
+            "edges": workflow.get("edges", []),
+            "insights": workflow.get("insights", ""),  # Add insights field
+            "user_id": workflow["user_id"],
+            "created_at": workflow.get("created_at"),
+            "updated_at": workflow.get("updated_at")
+        }
+        
+        print(f"Response data: {response_data}")
+        
+        # Create and validate the response model
+        response = WorkflowResponse(**response_data)
+        print(f"Validated response: {response}")
+        print("=== End Debug ===\n")
+        
+        return response
+    except Exception as e:
+        logger.error(f"Error in get_workflow: {str(e)}")
+        print(f"Error in get_workflow: {str(e)}")
+        print(f"Error type: {type(e)}")
+        import traceback
+        print(f"Traceback: {traceback.format_exc()}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/direct-podcast", response_model=TextPodcastResponse)
+async def create_direct_podcast(request: Request, current_user: dict = Depends(get_current_user)):
+    """Generate a podcast directly from conversation blocks with different voices."""
+    logger.info(f"Received direct podcast generation request from user: {current_user['username']}")
+    
+    try:
+        # Parse the request body
+        data = await request.json()
+        topic = data.get("topic", "Debate")
+        conversation_blocks = data.get("conversation_blocks", [])
+        
+        logger.info(f"Direct podcast request for topic: {topic}")
+        logger.info(f"Number of conversation blocks: {len(conversation_blocks)}")
+        
+        if not conversation_blocks:
+            raise HTTPException(status_code=400, detail="No conversation blocks provided")
+        
+        # Format conversation blocks for the podcast manager
+        formatted_blocks = []
+        for idx, block in enumerate(conversation_blocks):
+            # Extract data from each block
+            content = block.get("content", "")
+            voice_id = block.get("voice_id", "alloy")  # Default to alloy if not specified
+            block_type = block.get("type", "generic")
+            turn = block.get("turn", idx + 1)
+            agent_id = block.get("agent_id", "")
+            
+            # Format for podcast manager
+            formatted_block = {
+                "name": f"Turn {turn}",
+                "input": content,
+                "silence_before": 0.3,  # Short pause between blocks
+                "voice_id": voice_id,
+                "emotion": "neutral",
+                "model": "tts-1",
+                "speed": 1.0,
+                "duration": 0,
+                "type": block_type,
+                "turn": turn,
+                "agent_id": agent_id
+            }
+            
+            formatted_blocks.append(formatted_block)
+            
+        # Use the podcast manager to create the audio
+        result = await podcast_manager.create_podcast(
+            topic=topic,
+            research=f"Direct podcast on {topic}",
+            conversation_blocks=formatted_blocks,
+            believer_voice_id="alloy",  # These are just placeholders for the manager
+            skeptic_voice_id="echo", 
+            user_id=str(current_user["_id"])
+        )
+        
+        if "error" in result:
+            logger.error(f"Error in direct podcast creation: {result['error']}")
+            return TextPodcastResponse(
+                audio_url="",
+                status="failed",
+                error=result["error"],
+                duration=0,
+                updated_at=datetime.now().isoformat()
+            )
+        
+        # Create audio URL from the audio path
+        audio_url = f"/audio/{os.path.basename(os.path.dirname(result['audio_path']))}/final_podcast.mp3"
+        full_audio_url = f"http://localhost:8000{audio_url}"
+        
+        logger.info(f"Successfully generated direct podcast: {result.get('podcast_id')}")
+        
+        return TextPodcastResponse(
+            audio_url=full_audio_url,
+            duration=result.get("duration", 0),
+            status="completed",
+            error=None,
+            updated_at=datetime.now().isoformat()
+        )
+        
+    except Exception as e:
+        logger.error(f"Error generating direct podcast: {str(e)}", exc_info=True)
+        return TextPodcastResponse(
+            audio_url="",
+            status="failed",
+            error=str(e),
+            duration=0,
+            updated_at=datetime.now().isoformat()
+        ) 

backend/app/models.py

@@ -0,0 +1,114 @@
+from pydantic import BaseModel, Field
+from typing import Optional, List, Dict, Union, Any
+from datetime import datetime
+
+class UserCreate(BaseModel):
+    username: str
+    password: str
+
+class UserLogin(BaseModel):
+    username: str
+    password: str
+
+class Token(BaseModel):
+    access_token: str
+    token_type: str
+
+class UserUpdate(BaseModel):
+    password: str
+
+class UserResponse(BaseModel):
+    username: str
+
+class AgentCreate(BaseModel):
+    name: str
+    voice_id: str
+    voice_name: str
+    voice_description: str
+    speed: float
+    pitch: float
+    volume: float
+    output_format: str
+    personality: str = None  # Optional field for agent personality
+
+class AgentResponse(BaseModel):
+    agent_id: str
+    name: str
+    voice_id: str
+    voice_name: str
+    voice_description: str
+    speed: float
+    pitch: float
+    volume: float
+    output_format: str
+    user_id: str
+    personality: str = None  # Optional field for agent personality
+
+class PodcastRequest(BaseModel):
+    topic: str
+    believer_voice_id: str
+    skeptic_voice_id: str
+
+class ConversationBlock(BaseModel):
+    name: str
+    input: str
+    silence_before: int
+    voice_id: str
+    emotion: str
+    model: str
+    speed: float
+    duration: int
+
+class PodcastResponse(BaseModel):
+    podcast_id: str
+    audio_url: Optional[str]
+    topic: str
+    error: Optional[str]
+
+# Models for structured debate transcript and insights
+class TranscriptEntry(BaseModel):
+    agentId: str
+    agentName: str
+    turn: int
+    content: str
+
+class InsightsData(BaseModel):
+    topic: str
+    research: str
+    transcript: List[TranscriptEntry]
+    keyInsights: List[str]
+    conclusion: str
+
+# New Workflow Models
+class WorkflowCreate(BaseModel):
+    name: str
+    description: str
+    nodes: List[Dict]
+    edges: List[Dict]
+    insights: Optional[Union[InsightsData, str]] = None
+
+class WorkflowResponse(BaseModel):
+    id: str
+    name: str
+    description: str
+    nodes: List[Dict]
+    edges: List[Dict]
+    insights: Optional[Union[InsightsData, str]] = None
+    user_id: str
+    created_at: Optional[str]
+    updated_at: Optional[str]
+
+class TextPodcastRequest(BaseModel):
+    text: str
+    voice_id: str = "alloy"
+    emotion: str = "neutral"
+    speed: float = 1.0
+    title: Optional[str] = None
+
+class TextPodcastResponse(BaseModel):
+    audio_url: str
+    duration: Optional[float]
+    status: str
+    error: Optional[str]
+    updated_at: Optional[str] 
+

backend/requirements.txt

@@ -0,0 +1,15 @@
+fastapi==0.104.1
+uvicorn==0.24.0
+motor==3.1.1
+pymongo==4.3.3
+certifi==2024.2.2
+python-jose[cryptography]==3.3.0
+passlib[bcrypt]==1.7.4
+python-multipart==0.0.6
+python-decouple==3.8
+langgraph==0.2.14
+langchain>=0.1.0
+langchain-openai>=0.0.5
+langchain-core>=0.2.35
+langchain-community>=0.0.24
+pydub==0.25.1

backend/run.py

@@ -0,0 +1,14 @@
+import uvicorn
+
+if __name__ == "__main__":
+    uvicorn.run(
+        "app.main:app",
+        host="0.0.0.0",
+        port=8000,
+        reload=True,
+        reload_dirs=["app"],
+        workers=1,
+        ws_ping_interval=None,
+        ws_ping_timeout=None,
+        timeout_keep_alive=0
+    ) 

backend/temp_audio/Default/final_podcast.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:266ec16b7f8b53b12e8ac9899be9932265a8723abb61c57915fb9ae64438b6fc
+size 408620

build_and_deploy.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+set -e
+
+echo "===> Building PodCraft for deployment <===="
+
+# Navigate to frontend directory
+echo "Building frontend..."
+cd frontend/podcraft
+
+# Install dependencies
+echo "Installing frontend dependencies..."
+npm install
+
+# Build the frontend
+echo "Creating production build..."
+npm run build
+
+# Back to root directory
+cd ../../
+
+# Make sure static directory exists
+mkdir -p app/static
+
+# Copy build to static directory (this will be mounted by FastAPI)
+echo "Copying frontend build to static directory..."
+cp -r frontend/podcraft/build/* app/static/
+
+echo "Building Docker image..."
+docker build -t podcraft-app .
+
+echo "Build completed successfully!"
+echo "You can now run: docker run -p 8000:8000 podcraft-app" 

build_for_spaces.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+set -e
+
+echo "===> Building PodCraft for HuggingFace Spaces <===="
+
+# Navigate to frontend directory
+echo "Building frontend..."
+cd frontend/podcraft
+
+# Install dependencies
+echo "Installing frontend dependencies..."
+npm install
+
+# Build the frontend
+echo "Creating production build..."
+npm run build
+
+# Back to root directory
+cd ../../
+
+# Make sure static directory exists
+mkdir -p app/static
+
+# Copy build to static directory (this will be mounted by FastAPI)
+echo "Copying frontend build to static directory..."
+cp -r frontend/podcraft/build/* app/static/
+
+# Copy the Spaces Dockerfile to main Dockerfile
+echo "Setting up Dockerfile for Spaces deployment..."
+cp Dockerfile.spaces Dockerfile
+
+echo "Build setup completed successfully!"
+echo "You can now push this to your HuggingFace Space repository" 

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3'
+
+services:
+  podcraft-app:
+    build: .
+    ports:
+      - "8000:8000"
+    volumes:
+      - ./app:/app/app
+      - ./temp_audio:/app/temp_audio
+    environment:
+      - MONGODB_URL=mongodb+srv://NageshBM:Nash166^@podcraft.ozqmc.mongodb.net/?retryWrites=true&w=majority&appName=Podcraft
+      - SECRET_KEY=your-secret-key-change-in-production
+      - OPENAI_API_KEY=${OPENAI_API_KEY}
+    restart: always

frontend/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "frontend",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

frontend/podcraft/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/podcraft/README.md

@@ -0,0 +1,12 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/podcraft/eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

frontend/podcraft/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/podcraft/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "podcraft",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^6.22.3",
+    "reactflow": "^11.11.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "vite": "^6.2.0"
+  }
+}

frontend/podcraft/src/App.css

@@ -0,0 +1,496 @@
+#root {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+.app-container {
+  display: flex;
+  min-height: 100vh;
+  transition: all 0.3s ease;
+  width: 100%;
+  overflow-x: hidden;
+  position: relative;
+}
+
+.app-container.light {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+.app-container.dark {
+  /* background-color: #040511; */
+  color: #ffffff;
+}
+
+.sidebar {
+  height: 100vh;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease-in-out;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(8px);
+  z-index: 999;
+}
+
+.sidebar-top {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.sidebar-bottom {
+  margin-top: auto;
+}
+
+.sidebar.open {
+  width: 200px;
+  z-index: 1;
+}
+
+.sidebar.closed {
+  width: 40px;
+}
+
+.toggle-btn {
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+  transition: color 0.3s ease;
+  text-align: left;
+}
+
+.toggle-btn:hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.nav-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  text-decoration: none;
+  padding: 0.5rem;
+  transition: all 0.3s ease;
+  font-size: 1rem;
+}
+
+.nav-link.theme-toggle {
+  margin-top: auto;
+}
+
+.nav-link svg {
+  font-size: 1.2rem;
+  transition: all 0.3s ease;
+}
+
+.nav-link:hover svg {
+  color: linear-gradient(90deg,
+      #000 0%,
+      #e0e0e0 50%,
+      #ffffff 100%);
+  animation: ease-in-out 3s infinite;
+}
+
+.link-text {
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+}
+
+.nav-link:hover .link-text {
+  background: linear-gradient(90deg,
+      #ffffff 0%,
+      #e0e0e0 50%,
+      #ffffff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: textShine 3s infinite;
+}
+
+@keyframes textShine {
+  0% {
+    background-position: -100px;
+  }
+
+  100% {
+    background-position: 100px;
+  }
+}
+
+@keyframes iconShine {
+  0% {
+    background-position: -50px;
+  }
+
+  100% {
+    background-position: 50px;
+  }
+}
+
+.link-text.hidden {
+  opacity: 0;
+  width: 0;
+  overflow: hidden;
+}
+
+.theme-toggle {
+  margin-top: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  padding: 0.5rem;
+}
+
+.main-content {
+  margin-left: 40px;
+  padding: 1rem;
+  flex: 1;
+  transition: margin-left 0.3s ease-in-out;
+  width: calc(100% - 40px);
+  box-sizing: border-box;
+}
+
+.main-content.expanded {
+  margin-left: 40px;
+}
+
+.light .nav-link,
+.light .toggle-btn {
+  color: #000000;
+}
+
+.dark .nav-link,
+.dark .toggle-btn {
+  color: #ffffff;
+}
+
+.auth-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - 2rem);
+  padding: 1rem;
+  gap: 4rem;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.bg-login {
+  background: url("../assets/bg2.gif") no-repeat center center fixed #040511;
+  background-size: cover;
+}
+
+.simple-bg {
+  /* background: url("../assets/bg3.gif") repeat center center fixed #040511; */
+  background: url("../assets/bg3.gif") repeat center center fixed #000;
+  background-size: contain;
+  background-blend-mode: lighten;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  opacity: 1;
+}
+
+.auth-form-container {
+  background: rgba(99, 102, 241, 0.05);
+  backdrop-filter: blur(10px);
+  padding: 1rem;
+  width: 100%;
+  max-width: 360px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border-radius: 24px;
+}
+
+.auth-form-container::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(45deg,
+      transparent,
+      rgba(255, 255, 255, 0.1),
+      rgba(255, 255, 255, 0.2),
+      rgba(255, 255, 255, 0.1),
+      transparent);
+  transform: translateX(-100%) rotate(45deg);
+  transition: transform 0.1s ease;
+}
+
+.auth-form-container:hover::before {
+  animation: cardGloss 1s ease-in-out;
+}
+
+@keyframes cardGloss {
+  0% {
+    transform: translateX(-100%) rotate(45deg);
+  }
+
+  100% {
+    transform: translateX(100%) rotate(45deg);
+  }
+}
+
+.auth-form-container h2 {
+  margin-bottom: 1.5rem;
+  font-size: 1.75rem;
+  text-align: center;
+  position: relative;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+.auth-form .form-group input {
+  width: 100%;
+  padding: 0.5rem 0;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  color: inherit;
+  font-size: 0.9rem;
+  transition: all 0.3s ease;
+  text-align: center;
+}
+
+.light .form-group input {
+  background: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.light .form-group input:focus {
+  border-color: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.submit-btn {
+  width: 100%;
+  padding: 0.5rem;
+  border: none;
+  border-radius: 8px;
+  background: #6366f1;
+  color: white;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 0.5rem;
+}
+
+.submit-btn:hover {
+  background: #4f46e5;
+  transform: translateY(-1px);
+}
+
+.form-switch {
+  margin-top: 1rem;
+  text-align: center;
+  font-size: 0.85rem;
+  position: relative;
+}
+
+.form-switch a {
+  color: #6366f1;
+  text-decoration: none;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  margin-left: 0.25rem;
+}
+
+.form-switch a:hover {
+  color: #4f46e5;
+}
+
+.hero-section {
+  max-width: 400px;
+}
+
+.hero-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2rem;
+}
+
+.hero-logo {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.hero-logo svg {
+  font-size: 3rem;
+}
+
+.product-name {
+  position: fixed;
+  font-size: 20px;
+  width: 165px;
+  bottom: 20px;
+  left: 70px;
+}
+
+sup {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+sub {
+  font-size: 12px;
+  background: #6366f1;
+  border: 1px solid #999;
+  padding: 1px;
+  border-radius: 5px;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  font-weight: bold;
+}
+
+.hero-logo h1 {
+  font-size: 3.5rem;
+  font-weight: 700;
+  background: linear-gradient(0.25turn, #fff, #8a8f98);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.hero-tagline {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #6366f1;
+  position: relative;
+  padding-left: 1rem;
+}
+
+.nav-divider {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.1);
+  margin: 0.5rem 0;
+  width: 100%;
+}
+
+.light .nav-divider {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 968px) {
+  .auth-container {
+    padding: 1rem;
+    gap: 2rem;
+  }
+
+  .main-content {
+    padding: 0.5rem;
+  }
+
+  .hero-section {
+    text-align: center;
+  }
+
+  .hero-content {
+    align-items: center;
+  }
+
+  .hero-logo h1 {
+    font-size: 2.5rem;
+  }
+
+  .hero-tagline {
+    font-size: 1.25rem;
+  }
+}
+
+#toast-container {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  width: auto;
+  max-width: calc(100vw - 40px);
+  pointer-events: none;
+}
+
+#toast-container>* {
+  pointer-events: auto;
+}
+
+/* Prevent horizontal scrollbar when toast appears */
+body.has-toast {
+  overflow-x: hidden;
+}

frontend/podcraft/src/App.jsx

@@ -0,0 +1,268 @@
+import { useState, useRef, useEffect } from 'react'
+import { BrowserRouter as Router, Route, Routes, Navigate, useNavigate, Link } from 'react-router-dom'
+import { TbLayoutSidebarLeftCollapse, TbLayoutSidebarRightCollapse } from "react-icons/tb";
+import { AiFillHome } from "react-icons/ai";
+import { BiPodcast } from "react-icons/bi";
+import { FaMicrophoneAlt } from "react-icons/fa";
+import { MdDarkMode, MdLightMode } from "react-icons/md";
+import { ImPodcast } from "react-icons/im";
+import { RiChatVoiceAiFill } from "react-icons/ri";
+import { FaUser, FaSignOutAlt } from "react-icons/fa";
+import { PiGooglePodcastsLogo } from "react-icons/pi";
+import { TiFlowSwitch } from "react-icons/ti";
+import { SiNodemon } from "react-icons/si";
+import React from 'react';
+
+import Home from './pages/Home'
+import Podcasts from './pages/Podcasts'
+import Workflows from './pages/Workflows'
+import Demo from './pages/Demo'
+import WorkflowEditor from './components/WorkflowEditor'
+import UserModal from './components/UserModal'
+import Toast from './components/Toast'
+import './App.css'
+
+// Global toast context
+export const ToastContext = React.createContext({
+  toast: null,
+  setToast: () => { }
+});
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isDark, setIsDark] = useState(true);
+  const [isLogin, setIsLogin] = useState(true);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [toast, setToast] = useState(null);
+  const sidebarRef = useRef(null);
+
+  // Check for token on initial load
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      // Validate token by making a request to the backend
+      const validateToken = async () => {
+        try {
+          const response = await fetch('http://localhost:8000/user/me', {
+            headers: {
+              'Authorization': `Bearer ${token}`
+            }
+          });
+
+          if (response.ok) {
+            setIsAuthenticated(true);
+            console.log('User authenticated from stored token');
+          } else {
+            // Token is invalid, remove it
+            localStorage.removeItem('token');
+            setIsAuthenticated(false);
+            console.log('Stored token is invalid, removed');
+          }
+        } catch (error) {
+          console.error('Error validating token:', error);
+          // Don't remove token on network errors to allow offline access
+        }
+      };
+
+      validateToken();
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (sidebarRef.current && !sidebarRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const toggleSidebar = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggleTheme = (e) => {
+    e.preventDefault();
+    setIsDark(!isDark);
+    document.body.style.backgroundColor = !isDark ? '#040511' : '#ffffff';
+    document.body.style.color = !isDark ? '#ffffff' : '#000000';
+  };
+
+  const toggleForm = () => {
+    setIsLogin(!isLogin);
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    setIsAuthenticated(false);
+    showToast('Logged out successfully', 'success');
+  };
+
+  const showToast = (message, type = 'success') => {
+    setToast({ message, type });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const username = formData.get('username');
+    const password = formData.get('password');
+
+    try {
+      const response = await fetch(`http://localhost:8000/${isLogin ? 'login' : 'signup'}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        localStorage.setItem('token', data.access_token);
+        setIsAuthenticated(true);
+        showToast(`Successfully ${isLogin ? 'logged in' : 'signed up'}!`, 'success');
+      } else {
+        const error = await response.json();
+        showToast(error.detail, 'error');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+      showToast('An error occurred during authentication', 'error');
+    }
+  };
+
+  return (
+    <ToastContext.Provider value={{ toast, setToast }}>
+      <Router>
+        <>
+          <div className={`${isAuthenticated && 'simple-bg'}`}>
+          </div>
+          <div className={`app-container ${isDark ? 'dark' : 'light'} ${!isAuthenticated && isDark ? 'bg-login' : ''} `} >
+            <nav ref={sidebarRef} className={`sidebar ${isOpen ? 'open' : 'closed'}`}>
+              <div className='product-name'>
+                <span><PiGooglePodcastsLogo /> PodCraft <sup>©</sup> <sub>Beta</sub></span>
+              </div>
+              <span className="toggle-btn" onClick={toggleSidebar}>
+                {isOpen ? <TbLayoutSidebarLeftCollapse /> : <TbLayoutSidebarRightCollapse />}
+              </span>
+
+              <div className="nav-links">
+                {isAuthenticated && (
+                  <>
+                    <Link to="/home" className="nav-link">
+                      <AiFillHome />
+                      <span className={`link-text ${!isOpen && 'hidden'}`}>Home</span>
+                    </Link>
+
+                    <Link to="/podcasts" className="nav-link">
+                      <BiPodcast />
+                      <span className={`link-text ${!isOpen && 'hidden'}`}>Podcasts</span>
+                    </Link>
+
+                    <Link to="/workflows" className="nav-link">
+                      <TiFlowSwitch />
+                      <span className={`link-text ${!isOpen && 'hidden'}`}>Workflows</span>
+                    </Link>
+                    
+                    <Link to="/demo" className="nav-link">
+                      <SiNodemon />
+                      <span className={`link-text ${!isOpen && 'hidden'}`}>Demo</span>
+                    </Link>
+
+                    <div className="nav-divider"></div>
+
+                    <a href="#" className="nav-link" onClick={() => setIsModalOpen(true)}>
+                      <FaUser />
+                      <span className={`link-text ${!isOpen && 'hidden'}`}>Profile</span>
+                    </a>
+
+                    <a href="#" className="nav-link" onClick={handleLogout}>
+                      <FaSignOutAlt />
+                      <span className={`link-text ${!isOpen && 'hidden'}`}>Logout</span>
+                    </a>
+                  </>
+                )}
+
+                <a href="#" className="nav-link theme-toggle" onClick={toggleTheme}>
+                  {isDark ? <MdDarkMode /> : <MdLightMode />}
+                  <span className={`link-text ${!isOpen && 'hidden'}`}>
+                    {isDark ? 'Dark Mode' : 'Light Mode'}
+                  </span>
+                </a>
+              </div>
+            </nav>
+
+            <main className={`main-content ${!isOpen ? 'expanded' : ''}`}>
+              {!isAuthenticated ? (
+                <div className="auth-container">
+                  <div className="hero-section">
+                    <div className="hero-content">
+                      <div className="hero-logo">
+                        <ImPodcast />
+                        <h1>PodCraft</h1>
+                      </div>
+                      <p className="hero-tagline">One prompt <RiChatVoiceAiFill /> to Podcast <BiPodcast /></p>
+                    </div>
+                  </div>
+                  <div className="auth-form-container">
+                    <h2>{isLogin ? 'Login' : 'Sign Up'}</h2>
+                    <form className="auth-form" onSubmit={handleSubmit}>
+                      <div className="form-group">
+                        <input type="text" name="username" placeholder="Username" required />
+                      </div>
+                      <div className="form-group">
+                        <input type="password" name="password" placeholder="Password" required />
+                      </div>
+                      <button type="submit" className="submit-btn">
+                        {isLogin ? 'Login' : 'Sign Up'}
+                      </button>
+                    </form>
+                    <p className="form-switch">
+                      {isLogin ? "Don't have an account? " : "Already have an account? "}
+                      <a href="#" onClick={toggleForm}>
+                        {isLogin ? 'Sign Up' : 'Login'}
+                      </a>
+                    </p>
+                  </div>
+                </div>
+              ) : (
+                <Routes>
+                  <Route path="/home" element={<Home />} />
+                  <Route path="/podcasts" element={<Podcasts />} />
+                  <Route path="/workflows" element={<Workflows />} />
+                  <Route path="/demo" element={<Demo />} />
+                  <Route path="/workflows/workflow/:workflowId" element={<WorkflowEditor />} />
+                  <Route path="/" element={<Navigate to="/home" replace />} />
+                </Routes>
+              )}
+            </main>
+
+            <UserModal
+              isOpen={isModalOpen}
+              onClose={() => setIsModalOpen(false)}
+              token={localStorage.getItem('token')}
+            />
+
+            <div className="toast-container">
+              {toast && (
+                <Toast
+                  message={toast.message}
+                  type={toast.type}
+                  onClose={() => setToast(null)}
+                />
+              )}
+            </div>
+          </div>
+        </>
+      </Router>
+    </ToastContext.Provider>
+  )
+}
+
+export default App

frontend/podcraft/src/components/AgentModal.css

@@ -0,0 +1,470 @@
+.agent-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    backdrop-filter: blur(5px);
+}
+
+.agent-form .form-group {
+    margin-bottom: 0.5rem;
+}
+
+.agent-modal-content {
+    background: rgba(20, 20, 20, 0.95);
+    backdrop-filter: blur(10px);
+    padding: 1rem 2rem;
+    border-radius: 12px;
+    width: 90%;
+    max-width: 600px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    position: relative;
+}
+
+.agent-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.agent-modal-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    background: linear-gradient(90deg, #fff, #999);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.close-button {
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+}
+
+.close-button:hover {
+    color: white;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.agent-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.form-group label {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: 500;
+}
+
+.form-group input[type="text"],
+.form-group textarea {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 0.75rem;
+    color: white;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+}
+
+.form-group input[type="text"]:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #6366f1;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+/* Custom Dropdown Styles */
+.custom-dropdown {
+    position: relative;
+    width: 100%;
+}
+
+.dropdown-header {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 0.75rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.dropdown-header:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(99, 102, 241, 0.3);
+}
+
+.selected-voice,
+.voice-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.voice-info {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+}
+
+.voice-info span {
+    font-size: 0.9rem;
+    color: white;
+}
+
+.voice-info small {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.dropdown-options {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    margin-top: 0.5rem;
+    background: rgba(30, 30, 30, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 10;
+    backdrop-filter: blur(10px);
+    scrollbar-width: thin;
+    scrollbar-color: rgba(99, 102, 241, 0.3) rgba(255, 255, 255, 0.05);
+}
+
+.dropdown-options::-webkit-scrollbar {
+    width: 6px;
+}
+
+.dropdown-options::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 3px;
+}
+
+.dropdown-options::-webkit-scrollbar-thumb {
+    background: rgba(99, 102, 241, 0.3);
+    border-radius: 3px;
+    transition: background 0.3s ease;
+}
+
+.dropdown-options::-webkit-scrollbar-thumb:hover {
+    background: rgba(99, 102, 241, 0.5);
+}
+
+.dropdown-option {
+    padding: 0.75rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    transition: all 0.3s ease;
+}
+
+.dropdown-option:hover {
+    background: rgba(99, 102, 241, 0.1);
+}
+
+/* Slider Styles */
+.slider-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.agent-form input#name {
+    width: auto;
+}
+
+.slider-container input[type="range"] {
+    padding: 2px 0;
+    border-radius: 5px;
+    background: #222;
+}
+
+.slider-container input[type="range"] {
+    flex: 1;
+    -webkit-appearance: none;
+    height: 0px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    outline: none;
+}
+
+.slider-container input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: #6366f1;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.slider-container input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    background: #4f46e5;
+}
+
+.slider-value {
+    min-width: 48px;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+    text-align: right;
+}
+
+/* Radio Group Styles */
+.radio-group {
+    display: flex;
+    gap: 1rem;
+}
+
+.radio-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+}
+
+.radio-label input[type="radio"] {
+    display: none;
+}
+
+.radio-label span {
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+    transition: all 0.3s ease;
+}
+
+.radio-label input[type="radio"]:checked+span {
+    background: rgba(99, 102, 241, 0.1);
+    border-color: #6366f1;
+    color: #6366f1;
+}
+
+/* Modal Actions */
+.modal-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1rem;
+}
+
+.right-actions {
+    display: flex;
+    gap: 1rem;
+}
+
+.test-voice-btn,
+.save-btn,
+.cancel-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.test-voice-btn {
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    color: #6366f1;
+}
+
+.test-voice-btn:hover {
+    background: rgba(99, 102, 241, 0.2);
+    transform: translateY(-1px);
+}
+
+.save-btn {
+    background: #6366f1;
+    border: none;
+    color: white;
+}
+
+.save-btn:hover {
+    background: #4f46e5;
+    transform: translateY(-1px);
+}
+
+.cancel-btn {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.cancel-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: translateY(-1px);
+}
+
+/* Light Theme Adjustments */
+.light .agent-modal-content {
+    background: rgba(255, 255, 255, 0.95);
+    border-color: rgba(0, 0, 0, 0.1);
+    color: black;
+}
+
+.light .agent-modal-header h2 {
+    background: linear-gradient(90deg, #333, #666);
+    -webkit-background-clip: text;
+}
+
+.light .form-group label {
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.light .form-group input[type="text"],
+.light .form-group textarea {
+    background: rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.1);
+    color: black;
+}
+
+.light .form-group input[type="text"]:focus,
+.light .form-group textarea:focus {
+    border-color: #6366f1;
+    background: rgba(0, 0, 0, 0.08);
+}
+
+.light .dropdown-header {
+    background: rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+.light .dropdown-header:hover {
+    background: rgba(0, 0, 0, 0.08);
+}
+
+.light .voice-info span {
+    color: black;
+}
+
+.light .voice-info small {
+    color: rgba(0, 0, 0, 0.6);
+}
+
+.light .dropdown-options {
+    background: rgba(255, 255, 255, 0.95);
+    border-color: rgba(0, 0, 0, 0.1);
+    scrollbar-color: rgba(99, 102, 241, 0.3) rgba(0, 0, 0, 0.05);
+}
+
+.light .dropdown-options::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.light .dropdown-options::-webkit-scrollbar-thumb {
+    background: rgba(99, 102, 241, 0.3);
+}
+
+.light .dropdown-options::-webkit-scrollbar-thumb:hover {
+    background: rgba(99, 102, 241, 0.5);
+}
+
+.light .slider-container input[type="range"] {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.light .slider-value {
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.light .radio-label span {
+    background: rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.light .cancel-btn {
+    border-color: rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.light .cancel-btn:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.toggle-group {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.toggle-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.toggle-container:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.toggle-container span {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.9rem;
+}
+
+.toggle-container span.active {
+    color: rgba(255, 255, 255, 1);
+    font-weight: 500;
+}
+
+.toggle-icon {
+    font-size: 1.5rem;
+    color: #6366f1;
+    transition: transform 0.3s ease;
+}
+
+.help-text {
+    display: block;
+    margin-top: 5px;
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.5);
+    font-style: italic;
+}

frontend/podcraft/src/components/AgentModal.tsx

@@ -0,0 +1,558 @@
+import React, { useState, useEffect } from 'react';
+import { FaPlay, FaSave, FaTimes, FaChevronDown, FaVolumeUp } from 'react-icons/fa';
+import './AgentModal.css';
+import { BsRobot, BsToggleOff, BsToggleOn } from "react-icons/bs";
+import Toast from './Toast';
+
+
+type Voice = {
+    id: string;
+    name: string;
+    description: string;
+};
+
+type FormData = {
+    name: string;
+    voice: Voice | null;
+    speed: number;
+    pitch: number;
+    volume: number;
+    outputFormat: 'mp3' | 'wav';
+    testInput: string;
+    personality: string;
+    showPersonality: boolean;
+};
+
+const VOICE_OPTIONS: Voice[] = [
+    { id: 'alloy', name: 'Alloy', description: 'Versatile, well-rounded voice' },
+    { id: 'ash', name: 'Ash', description: 'Direct and clear articulation' },
+    { id: 'coral', name: 'Coral', description: 'Warm and inviting tone' },
+    { id: 'echo', name: 'Echo', description: 'Balanced and measured delivery' },
+    { id: 'fable', name: 'Fable', description: 'Expressive storytelling voice' },
+    { id: 'onyx', name: 'Onyx', description: 'Authoritative and professional' },
+    { id: 'nova', name: 'Nova', description: 'Energetic and engaging' },
+    { id: 'sage', name: 'Sage', description: 'Calm and thoughtful delivery' },
+    { id: 'shimmer', name: 'Shimmer', description: 'Bright and optimistic tone' }
+];
+
+interface AgentModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    editAgent?: {
+        id: string;
+        name: string;
+        voice_id: string;
+        speed: number;
+        pitch: number;
+        volume: number;
+        output_format: string;
+        personality: string;
+    } | null;
+}
+
+const AgentModal: React.FC<AgentModalProps> = ({ isOpen, onClose, editAgent }) => {
+    const [formData, setFormData] = useState<FormData>({
+        name: '',
+        voice: null,
+        speed: 1,
+        pitch: 1,
+        volume: 1,
+        outputFormat: 'mp3',
+        testInput: '',
+        personality: '',
+        showPersonality: false
+    });
+
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' | 'info' } | null>(null);
+    const [audioPlayer, setAudioPlayer] = useState<HTMLAudioElement | null>(null);
+    const [isTestingVoice, setIsTestingVoice] = useState(false);
+
+    // Initialize form data when editing an agent
+    useEffect(() => {
+        if (editAgent) {
+            // Find the matching voice from VOICE_OPTIONS
+            const matchingVoice = VOICE_OPTIONS.find(voice => voice.id === editAgent.voice_id) || VOICE_OPTIONS[0];
+
+            // Ensure output_format is either 'mp3' or 'wav'
+            const validOutputFormat = editAgent.output_format === 'wav' ? 'wav' : 'mp3';
+
+            setFormData({
+                name: editAgent.name,
+                voice: matchingVoice,
+                speed: editAgent.speed || 1,
+                pitch: editAgent.pitch || 1,
+                volume: editAgent.volume || 1,
+                outputFormat: validOutputFormat,
+                testInput: '',
+                personality: editAgent.personality || '',
+                showPersonality: !!editAgent.personality
+            });
+        } else {
+            // Reset form when not editing
+            setFormData({
+                name: '',
+                voice: VOICE_OPTIONS[0],
+                speed: 1,
+                pitch: 1,
+                volume: 1,
+                outputFormat: 'mp3',
+                testInput: '',
+                personality: '',
+                showPersonality: false
+            });
+        }
+    }, [editAgent]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: value
+        }));
+    };
+
+    const handleVoiceSelect = (voice: Voice) => {
+        setFormData(prev => ({
+            ...prev,
+            voice
+        }));
+        setIsDropdownOpen(false);
+    };
+
+    const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        const numericValue = parseFloat(value);
+        if (!isNaN(numericValue)) {
+            setFormData(prev => ({
+                ...prev,
+                [name]: numericValue
+            }));
+        }
+    };
+
+    const handleTestVoice = async () => {
+        if (!formData.testInput.trim()) {
+            setToast({ message: 'Please enter some text to test', type: 'error' });
+            return;
+        }
+
+        try {
+            setIsTestingVoice(true);
+            const token = localStorage.getItem('token');
+            if (!token) {
+                setToast({ message: 'Authentication token not found', type: 'error' });
+                setIsTestingVoice(false);
+                return;
+            }
+
+            // Stop any currently playing audio
+            if (audioPlayer) {
+                audioPlayer.pause();
+                audioPlayer.src = '';
+                setAudioPlayer(null);
+            }
+
+            // Prepare test data
+            const testData = {
+                text: formData.testInput.trim(),
+                voice_id: formData.voice?.id || 'alloy',
+                emotion: 'neutral',  // Default emotion
+                speed: formData.speed
+            };
+
+            console.log('Sending test data:', JSON.stringify(testData, null, 2));
+
+            // Make API request
+            const response = await fetch('http://localhost:8000/agents/test-voice', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify(testData)
+            });
+
+            console.log('Response status:', response.status);
+            const data = await response.json();
+            console.log('Response data:', JSON.stringify(data, null, 2));
+
+            if (!response.ok) {
+                throw new Error(data.detail || 'Failed to test voice');
+            }
+
+            if (!data.audio_url) {
+                throw new Error('No audio URL returned from server');
+            }
+
+            setToast({ message: 'Creating audio player...', type: 'info' });
+
+            // Create and configure new audio player
+            const newPlayer = new Audio();
+
+            // Set up event handlers before setting the source
+            newPlayer.onerror = (e) => {
+                console.error('Audio loading error:', newPlayer.error, e);
+                setToast({
+                    message: `Failed to load audio file: ${newPlayer.error?.message || 'Unknown error'}`,
+                    type: 'error'
+                });
+                setIsTestingVoice(false);
+            };
+
+            newPlayer.oncanplaythrough = () => {
+                console.log('Audio can play through, starting playback');
+                newPlayer.play()
+                    .then(() => {
+                        setToast({ message: 'Playing test audio', type: 'success' });
+                    })
+                    .catch((error) => {
+                        console.error('Playback error:', error);
+                        setToast({
+                            message: `Failed to play audio: ${error.message}`,
+                            type: 'error'
+                        });
+                        setIsTestingVoice(false);
+                    });
+            };
+
+            newPlayer.onended = () => {
+                console.log('Audio playback ended');
+                setIsTestingVoice(false);
+            };
+
+            // Log the audio URL we're trying to play
+            console.log('Setting audio source to:', data.audio_url);
+
+            // Set the source and start loading
+            newPlayer.src = data.audio_url;
+            setAudioPlayer(newPlayer);
+
+            // Try to load the audio
+            try {
+                await newPlayer.load();
+                console.log('Audio loaded successfully');
+            } catch (loadError) {
+                console.error('Error loading audio:', loadError);
+                setToast({
+                    message: `Error loading audio: ${loadError instanceof Error ? loadError.message : 'Unknown error'}`,
+                    type: 'error'
+                });
+                setIsTestingVoice(false);
+            }
+
+        } catch (error) {
+            console.error('Error testing voice:', error);
+            setToast({
+                message: error instanceof Error ? error.message : 'Failed to test voice',
+                type: 'error'
+            });
+            setIsTestingVoice(false);
+        }
+    };
+
+    // Cleanup audio player on modal close
+    React.useEffect(() => {
+        return () => {
+            if (audioPlayer) {
+                audioPlayer.pause();
+                audioPlayer.src = '';
+            }
+        };
+    }, [audioPlayer]);
+
+    const toggleInputType = () => {
+        setFormData(prev => ({
+            ...prev,
+            showPersonality: !prev.showPersonality
+        }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!formData.voice) {
+            setToast({ message: 'Please select a voice', type: 'error' });
+            return;
+        }
+
+        try {
+            const token = localStorage.getItem('token');
+            if (!token) {
+                setToast({ message: 'Authentication token not found', type: 'error' });
+                return;
+            }
+
+            const requestData = {
+                name: formData.name,
+                voice_id: formData.voice.id,
+                voice_name: formData.voice.name,
+                voice_description: formData.voice.description,
+                speed: formData.speed,
+                pitch: formData.pitch,
+                volume: formData.volume,
+                output_format: formData.outputFormat, // Use snake_case to match backend
+                personality: formData.showPersonality ? formData.personality : null
+            };
+
+            console.log('Request data:', JSON.stringify(requestData, null, 2));
+
+            const url = editAgent
+                ? `http://localhost:8000/agents/${editAgent.id}`
+                : 'http://localhost:8000/agents/create';
+
+            const response = await fetch(url, {
+                method: editAgent ? 'PUT' : 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify(requestData)
+            });
+
+            const responseData = await response.json();
+            console.log('Response data:', JSON.stringify(responseData, null, 2));
+
+            if (!response.ok) {
+                throw new Error(JSON.stringify(responseData, null, 2));
+            }
+
+            setToast({ message: `Agent ${editAgent ? 'updated' : 'created'} successfully`, type: 'success' });
+            onClose();
+        } catch (error) {
+            console.error('Error saving agent:', error);
+            if (error instanceof Error) {
+                console.error('Error details:', error.message);
+                try {
+                    const errorDetails = JSON.parse(error.message);
+                    setToast({
+                        message: errorDetails.detail?.[0]?.msg || 'Failed to save agent',
+                        type: 'error'
+                    });
+                } catch {
+                    setToast({ message: error.message, type: 'error' });
+                }
+            } else {
+                setToast({ message: 'An unexpected error occurred', type: 'error' });
+            }
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="agent-modal-overlay" style={{ display: isOpen ? 'flex' : 'none' }}>
+            <div className="agent-modal-content">
+                <div className="agent-modal-header">
+                    <h2>{editAgent ? 'Edit Agent' : 'Create New Agent'}</h2>
+                    <button className="close-button" onClick={onClose}>&times;</button>
+                </div>
+
+                <form className="agent-form" onSubmit={handleSubmit}>
+                    <div className="form-group">
+                        <label htmlFor="name">Agent Name</label>
+                        <input
+                            type="text"
+                            id="name"
+                            name="name"
+                            value={formData.name}
+                            onChange={handleInputChange}
+                            placeholder="Enter agent name"
+                            required
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label>Voice</label>
+                        <div className="custom-dropdown">
+                            <div
+                                className="dropdown-header"
+                                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                            >
+                                <div className="selected-voice">
+                                    <FaVolumeUp />
+                                    <div className="voice-info">
+                                        <span>{formData.voice?.name}</span>
+                                        <small>{formData.voice?.description}</small>
+                                    </div>
+                                </div>
+                                <FaChevronDown style={{
+                                    transform: isDropdownOpen ? 'rotate(180deg)' : 'none',
+                                    transition: 'transform 0.3s ease'
+                                }} />
+                            </div>
+                            {isDropdownOpen && (
+                                <div className="dropdown-options">
+                                    {VOICE_OPTIONS.map(voice => (
+                                        <div
+                                            key={voice.id}
+                                            className="dropdown-option"
+                                            onClick={() => handleVoiceSelect(voice)}
+                                        >
+                                            <FaVolumeUp />
+                                            <div className="voice-info">
+                                                <span>{voice.name}</span>
+                                                <small>{voice.description}</small>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    <div className="form-group">
+                        <label htmlFor="speed">Speed</label>
+                        <div className="slider-container">
+                            <input
+                                type="range"
+                                id="speed"
+                                name="speed"
+                                min="0.5"
+                                max="2"
+                                step="0.1"
+                                value={formData.speed}
+                                onChange={handleSliderChange}
+                            />
+                            <span className="slider-value">{formData.speed}x</span>
+                        </div>
+                    </div>
+
+                    <div className="form-group">
+                        <label htmlFor="pitch">Pitch</label>
+                        <div className="slider-container">
+                            <input
+                                type="range"
+                                id="pitch"
+                                name="pitch"
+                                min="0.5"
+                                max="2"
+                                step="0.1"
+                                value={formData.pitch}
+                                onChange={handleSliderChange}
+                            />
+                            <span className="slider-value">{formData.pitch}x</span>
+                        </div>
+                    </div>
+
+                    <div className="form-group">
+                        <label htmlFor="volume">Volume</label>
+                        <div className="slider-container">
+                            <input
+                                type="range"
+                                id="volume"
+                                name="volume"
+                                min="0"
+                                max="2"
+                                step="0.1"
+                                value={formData.volume}
+                                onChange={handleSliderChange}
+                            />
+                            <span className="slider-value">{formData.volume}x</span>
+                        </div>
+                    </div>
+
+                    <div className="form-group">
+                        <label>Output Format</label>
+                        <div className="radio-group">
+                            <label className="radio-label">
+                                <input
+                                    type="radio"
+                                    name="outputFormat"
+                                    value="mp3"
+                                    checked={formData.outputFormat === 'mp3'}
+                                    onChange={handleInputChange}
+                                />
+                                <span>MP3</span>
+                            </label>
+                            <label className="radio-label">
+                                <input
+                                    type="radio"
+                                    name="outputFormat"
+                                    value="wav"
+                                    checked={formData.outputFormat === 'wav'}
+                                    onChange={handleInputChange}
+                                />
+                                <span>WAV</span>
+                            </label>
+                        </div>
+                    </div>
+
+                    <div className="form-group toggle-group">
+                        <label>Input Type</label>
+                        <div className="toggle-container" onClick={toggleInputType}>
+                            <span className={!formData.showPersonality ? 'active' : ''}>Test Input</span>
+                            {formData.showPersonality ?
+                                <BsToggleOn className="toggle-icon" /> :
+                                <BsToggleOff className="toggle-icon" />
+                            }
+                            <span className={formData.showPersonality ? 'active' : ''}>Agent Personality</span>
+                        </div>
+                    </div>
+
+                    {formData.showPersonality ? (
+                        <div className="form-group">
+                            <label htmlFor="personality">Agent Personality</label>
+                            <textarea
+                                id="personality"
+                                name="personality"
+                                value={formData.personality}
+                                onChange={handleInputChange}
+                                placeholder="Describe the personality and characteristics of this agent..."
+                                rows={4}
+                            />
+                            <small className="help-text">This personality description will be used to guide the agent's responses in workflows.</small>
+                        </div>
+                    ) : (
+                        <div className="form-group">
+                            <label htmlFor="testInput">Test Input</label>
+                            <textarea
+                                id="testInput"
+                                name="testInput"
+                                value={formData.testInput}
+                                onChange={handleInputChange}
+                                placeholder="Enter text to test the voice"
+                                rows={4}
+                            />
+                        </div>
+                    )}
+
+                    <div className="modal-actions">
+                        {!formData.showPersonality && (
+                            <button
+                                type="button"
+                                className="test-voice-btn"
+                                onClick={handleTestVoice}
+                                disabled={!formData.testInput || isTestingVoice}
+                            >
+                                <FaPlay /> {isTestingVoice ? 'Testing...' : 'Test Voice'}
+                            </button>
+                        )}
+                        <div className="right-actions">
+                            <button type="button" className="cancel-btn" onClick={onClose}>
+                                Cancel
+                            </button>
+                            <button
+                                type="submit"
+                                className="save-btn"
+                                disabled={isLoading}
+                            >
+                                <FaSave /> {isLoading ? 'Saving...' : 'Save Agent'}
+                            </button>
+                        </div>
+                    </div>
+                </form>
+
+                {toast && (
+                    <Toast
+                        message={toast.message}
+                        type={toast.type}
+                        onClose={() => setToast(null)}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default AgentModal; 

frontend/podcraft/src/components/ChatDetailModal.css

@@ -0,0 +1,400 @@
+.chat-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1100;
+    backdrop-filter: blur(5px);
+    animation: fadeIn 0.25s ease-out;
+}
+
+.chat-modal-content {
+    background: rgba(25, 25, 35, 0.95);
+    border-radius: 16px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(99, 102, 241, 0.3);
+    width: 90%;
+    max-width: 700px;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    animation: slideUp 0.3s ease-out;
+}
+
+.chat-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    background: rgba(30, 30, 45, 0.7);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.agent-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.agent-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.2rem;
+    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+}
+
+.agent-details {
+    display: flex;
+    flex-direction: column;
+}
+
+.agent-details h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: white;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.turn-badge {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.7);
+    background: rgba(99, 102, 241, 0.2);
+    padding: 3px 8px;
+    border-radius: 12px;
+    margin-top: 4px;
+    width: fit-content;
+}
+
+.modal-actions {
+    display: flex;
+    gap: 12px;
+}
+
+.copy-button,
+.close-button {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: white;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 1rem;
+}
+
+.copy-button {
+    font-size: 0.85rem;
+}
+
+.copy-button:hover,
+.close-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+}
+
+.copy-button.copied {
+    background: rgba(34, 197, 94, 0.3);
+    color: rgb(134, 239, 172);
+    animation: flash 0.5s;
+}
+
+.copy-button.copied::after {
+    content: 'Copied!';
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(34, 197, 94, 0.9);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 0.7rem;
+    animation: fadeOut 2s;
+}
+
+.close-button {
+    font-size: 1.4rem;
+}
+
+.chat-modal-body {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+    min-height: 200px;
+    max-height: 60vh;
+}
+
+.content-box {
+    line-height: 1.7;
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.9);
+    white-space: pre-wrap;
+}
+
+.chat-modal-footer {
+    padding: 16px 20px;
+    display: flex;
+    justify-content: flex-end;
+    background: rgba(30, 30, 45, 0.7);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.modal-button {
+    padding: 8px 16px;
+    border-radius: 8px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.close-btn {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.close-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes flash {
+
+    0%,
+    100% {
+        background: rgba(34, 197, 94, 0.3);
+    }
+
+    50% {
+        background: rgba(34, 197, 94, 0.5);
+    }
+}
+
+@keyframes fadeOut {
+
+    0%,
+    10% {
+        opacity: 1;
+    }
+
+    90%,
+    100% {
+        opacity: 0;
+    }
+}
+
+/* Light theme adjustments */
+:root[data-theme="light"] .chat-modal-content {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(99, 102, 241, 0.2);
+    border: 1px solid rgba(99, 102, 241, 0.1);
+}
+
+:root[data-theme="light"] .chat-modal-header,
+:root[data-theme="light"] .chat-modal-footer {
+    background: rgba(245, 245, 255, 0.9);
+    border-color: rgba(0, 0, 0, 0.05);
+}
+
+:root[data-theme="light"] .agent-details h3 {
+    color: #333;
+}
+
+:root[data-theme="light"] .turn-badge {
+    color: rgba(0, 0, 0, 0.7);
+    background: rgba(99, 102, 241, 0.1);
+}
+
+:root[data-theme="light"] .copy-button,
+:root[data-theme="light"] .close-button {
+    background: rgba(0, 0, 0, 0.05);
+    color: #333;
+}
+
+:root[data-theme="light"] .copy-button:hover,
+:root[data-theme="light"] .close-button:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+:root[data-theme="light"] .content-box {
+    color: #333;
+}
+
+:root[data-theme="light"] .close-btn {
+    background: rgba(0, 0, 0, 0.05);
+    color: #333;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+:root[data-theme="light"] .close-btn:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.edit-button,
+.save-button,
+.cancel-button {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: white;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 0.85rem;
+}
+
+.edit-button:hover {
+    background: rgba(99, 102, 241, 0.3);
+    transform: translateY(-2px);
+}
+
+.save-button {
+    background: rgba(16, 185, 129, 0.2);
+    color: rgb(134, 239, 172);
+}
+
+.save-button:hover {
+    background: rgba(16, 185, 129, 0.4);
+    transform: translateY(-2px);
+}
+
+.cancel-button {
+    background: rgba(239, 68, 68, 0.2);
+    color: rgb(252, 165, 165);
+}
+
+.cancel-button:hover {
+    background: rgba(239, 68, 68, 0.4);
+    transform: translateY(-2px);
+}
+
+.content-editor {
+    width: 100%;
+    min-height: 200px;
+    background: rgba(30, 30, 45, 0.6);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    border-radius: 8px;
+    color: white;
+    font-family: inherit;
+    font-size: 0.95rem;
+    line-height: 1.7;
+    /* padding: 12px; */
+    resize: vertical;
+    transition: all 0.2s ease;
+}
+
+.content-editor:focus {
+    outline: none;
+    border-color: rgba(99, 102, 241, 0.8);
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+.save-btn {
+    background: rgba(16, 185, 129, 0.2);
+    color: rgb(134, 239, 172);
+    border: 1px solid rgba(16, 185, 129, 0.4);
+    margin-left: 12px;
+}
+
+.save-btn:hover {
+    background: rgba(16, 185, 129, 0.4);
+    transform: translateY(-2px);
+}
+
+/* Light theme adjustments for new elements */
+:root[data-theme="light"] .edit-button,
+:root[data-theme="light"] .save-button,
+:root[data-theme="light"] .cancel-button {
+    background: rgba(0, 0, 0, 0.05);
+    color: #333;
+}
+
+:root[data-theme="light"] .edit-button:hover {
+    background: rgba(99, 102, 241, 0.2);
+}
+
+:root[data-theme="light"] .save-button {
+    background: rgba(16, 185, 129, 0.1);
+    color: rgb(5, 150, 105);
+}
+
+:root[data-theme="light"] .save-button:hover {
+    background: rgba(16, 185, 129, 0.2);
+}
+
+:root[data-theme="light"] .cancel-button {
+    background: rgba(239, 68, 68, 0.1);
+    color: rgb(220, 38, 38);
+}
+
+:root[data-theme="light"] .cancel-button:hover {
+    background: rgba(239, 68, 68, 0.2);
+}
+
+:root[data-theme="light"] .content-editor {
+    background: #fff;
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    color: #333;
+}
+
+:root[data-theme="light"] .content-editor:focus {
+    border-color: rgba(99, 102, 241, 0.6);
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+}
+
+:root[data-theme="light"] .save-btn {
+    background: rgba(16, 185, 129, 0.1);
+    color: rgb(5, 150, 105);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+:root[data-theme="light"] .save-btn:hover {
+    background: rgba(16, 185, 129, 0.2);
+}

frontend/podcraft/src/components/ChatDetailModal.jsx

@@ -0,0 +1,191 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { FaRobot, FaUser, FaCopy, FaSearch, FaEdit, FaSave, FaTimes } from 'react-icons/fa';
+import './ChatDetailModal.css';
+
+/**
+ * Modal component for displaying and editing agent chat messages in detail
+ * @param {Object} props
+ * @param {boolean} props.isOpen - Whether the modal is open
+ * @param {function} props.onClose - Function to call when the modal is closed
+ * @param {string} props.agentName - The name of the agent
+ * @param {string} props.agentId - The ID of the agent
+ * @param {number} props.turn - The turn number
+ * @param {string} props.content - The chat message content
+ * @param {function} props.onSave - Function to call when the content is saved
+ */
+const ChatDetailModal = ({ isOpen, onClose, agentName, agentId, turn, content, onSave }) => {
+    const modalRef = useRef(null);
+    const [isEditing, setIsEditing] = useState(false);
+    const [editedContent, setEditedContent] = useState('');
+    const textareaRef = useRef(null);
+
+    // Initialize the editor with the current content when editing starts
+    useEffect(() => {
+        if (isEditing && content) {
+            // Remove any HTML tags to get plain text for editing
+            const plainText = content.replace(/<[^>]*>/g, '');
+            setEditedContent(plainText);
+
+            // Focus the textarea when editing starts
+            setTimeout(() => {
+                if (textareaRef.current) {
+                    textareaRef.current.focus();
+                }
+            }, 100);
+        }
+    }, [isEditing, content]);
+
+    // Reset edited content when content changes (even if modal is already open)
+    useEffect(() => {
+        if (content && isOpen) {
+            // If we're currently editing, update the edited content
+            if (isEditing) {
+                const plainText = content.replace(/<[^>]*>/g, '');
+                setEditedContent(plainText);
+            }
+        }
+    }, [content, isOpen]);
+
+    // Handle clicks outside the modal to close it
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (modalRef.current && !modalRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, onClose]);
+
+    // Copy content to clipboard
+    const handleCopyContent = () => {
+        const plainText = content.replace(/<[^>]*>/g, '');
+        navigator.clipboard.writeText(plainText);
+
+        // Show a mini toast or feedback
+        const copyButton = document.querySelector('.copy-button');
+        if (copyButton) {
+            copyButton.classList.add('copied');
+            setTimeout(() => {
+                copyButton.classList.remove('copied');
+            }, 2000);
+        }
+    };
+
+    // Start editing the content
+    const handleStartEditing = () => {
+        setIsEditing(true);
+    };
+
+    // Cancel editing and reset
+    const handleCancelEdit = () => {
+        setIsEditing(false);
+        setEditedContent('');
+    };
+
+    // Save the edited content
+    const handleSaveEdit = () => {
+        if (onSave) {
+            onSave(agentId, turn, editedContent);
+        }
+        setIsEditing(false);
+    };
+
+    // Don't render anything if the modal is not open
+    if (!isOpen) return null;
+
+    // Get agent icon based on agent ID or name
+    const getAgentIcon = () => {
+        if (agentId === 'researcher') {
+            return <FaSearch />;
+        }
+        return <FaRobot />;
+    };
+
+    return (
+        <div className="chat-modal-overlay">
+            <div className="chat-modal-content" ref={modalRef}>
+                <div className="chat-modal-header">
+                    <div className="agent-info">
+                        <div className="agent-avatar">
+                            {getAgentIcon()}
+                        </div>
+                        <div className="agent-details">
+                            <h3>{agentName}</h3>
+                            <span className="turn-badge">Turn {turn}</span>
+                        </div>
+                    </div>
+                    <div className="modal-actions">
+                        {!isEditing ? (
+                            <>
+                                <button
+                                    className="edit-button"
+                                    onClick={handleStartEditing}
+                                    title="Edit content"
+                                >
+                                    <FaEdit />
+                                </button>
+                                <button
+                                    className="copy-button"
+                                    onClick={handleCopyContent}
+                                    title="Copy to clipboard"
+                                >
+                                    <FaCopy />
+                                </button>
+                            </>
+                        ) : (
+                            <>
+                                <button
+                                    className="save-button"
+                                    onClick={handleSaveEdit}
+                                    title="Save changes"
+                                >
+                                    <FaSave />
+                                </button>
+                                <button
+                                    className="cancel-button"
+                                    onClick={handleCancelEdit}
+                                    title="Cancel editing"
+                                >
+                                    <FaTimes />
+                                </button>
+                            </>
+                        )}
+                        <button className="close-button" onClick={onClose}>×</button>
+                    </div>
+                </div>
+                <div className="chat-modal-body">
+                    {!isEditing ? (
+                        <div className="content-box" dangerouslySetInnerHTML={{ __html: content }} />
+                    ) : (
+                        <textarea
+                            ref={textareaRef}
+                            className="content-editor"
+                            value={editedContent}
+                            onChange={(e) => setEditedContent(e.target.value)}
+                            placeholder="Edit the content..."
+                        />
+                    )}
+                </div>
+                <div className="chat-modal-footer">
+                    {!isEditing ? (
+                        <button className="modal-button close-btn" onClick={onClose}>Close</button>
+                    ) : (
+                        <>
+                            <button className="modal-button cancel-btn" onClick={handleCancelEdit}>Cancel</button>
+                            <button className="modal-button save-btn" onClick={handleSaveEdit}>Save Changes</button>
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ChatDetailModal; 

frontend/podcraft/src/components/CustomEdge.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import {
+    getSmoothStepPath,
+    EdgeText
+} from 'reactflow';
+
+// Custom animated edge component with contextual styling
+const CustomEdge = (props) => {
+    const {
+        id,
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+        style = {},
+        markerEnd,
+        data,
+        label,
+        labelStyle,
+        labelShowBg = true
+    } = props;
+
+    // Get edge path based on the edge type (default to smoothstep)
+    const [edgePath, labelX, labelY] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        borderRadius: 20, // Add rounded corners to the paths
+    });
+
+    // Determine edge style based on source node type
+    const sourceType = data?.sourceType || 'default';
+
+    // Default style if nothing specific is provided
+    const edgeStyle = {
+        strokeWidth: 3, // Increase stroke width from default
+        ...style,
+    };
+
+    return (
+        <>
+            {/* Main path */}
+            <path
+                id={id}
+                className={`react-flow__edge-path animated source-${sourceType}`}
+                d={edgePath}
+                style={edgeStyle}
+                markerEnd={markerEnd}
+                strokeDasharray="6 3" // Improved dash pattern
+                strokeLinecap="round"
+                filter="drop-shadow(0px 1px 2px rgba(0,0,0,0.3))" // Add subtle shadow
+            />
+
+            {/* Glow effect for the path */}
+            <path
+                d={edgePath}
+                className={`edge-glow source-${sourceType}`}
+                style={{
+                    ...edgeStyle,
+                    stroke: style.stroke,
+                    strokeWidth: 10,
+                    strokeOpacity: 0.15,
+                    filter: 'blur(3px)',
+                    pointerEvents: 'none', // Ensure this doesn't interfere with clicks
+                }}
+            />
+
+            {/* Edge label */}
+            {label && (
+                <EdgeText
+                    x={labelX}
+                    y={labelY}
+                    label={label}
+                    labelStyle={{
+                        fontWeight: 500,
+                        fill: 'white',
+                        fontSize: 12,
+                        ...labelStyle,
+                    }}
+                    labelShowBg={labelShowBg}
+                    labelBgStyle={{
+                        fill: '#1E1E28',
+                        opacity: 0.8,
+                        rx: 4,
+                        ry: 4,
+                    }}
+                    labelBgPadding={[4, 6]}
+                />
+            )}
+        </>
+    );
+};
+
+// Define edge types for ReactFlow
+export const customEdgeTypes = {
+    custom: CustomEdge,
+};
+
+export default CustomEdge; 

frontend/podcraft/src/components/CustomNodes.css

@@ -0,0 +1,251 @@
+/* Custom Node Styling */
+.custom-node {
+    background: rgba(30, 30, 40, 0.95);
+    border-radius: 10px;
+    padding: 5px 10px;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+    width: 120px;
+    border: 1px solid transparent;
+    backdrop-filter: blur(8px);
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: visible;
+}
+
+.custom-node::before {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    background: linear-gradient(45deg, transparent, currentColor, transparent);
+    border-radius: 11px;
+    z-index: -1;
+    opacity: 0.3;
+}
+
+.custom-node:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+}
+
+.custom-node:hover::before {
+    opacity: 0.4;
+}
+
+.node-content {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.node-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.node-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 8px;
+    color: white;
+    font-size: 16px;
+}
+
+.node-title {
+    flex: 1;
+    font-weight: 600;
+    font-size: 10px;
+    color: white;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+}
+
+.node-description {
+    font-size: 7px;
+    color: rgba(255, 255, 255, 0.7);
+    max-height: 30px;
+    overflow: hidden;
+    margin-left: 1.9rem;
+    line-height: 1.3;
+    text-align: left;
+}
+
+/* Custom Handle Styling */
+.custom-handle {
+    width: 10px !important;
+    height: 10px !important;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.6) !important;
+    z-index: 10;
+    transition: all 0.2s ease;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.custom-handle:hover {
+    width: 12px !important;
+    height: 12px !important;
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
+}
+
+/* Node type-specific styling */
+.input-node {
+    color: #6366F1;
+    background: rgba(30, 30, 40, 0.95);
+}
+
+/* Remove the pseudo-element background for input and publish nodes */
+.input-node::before,
+.publish-node::before {
+    background: none;
+    opacity: 0;
+}
+
+.input-node.has-prompt {
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
+}
+
+.node-prompt {
+    margin-top: 5px;
+    font-size: 9px;
+    text-align: center;
+}
+
+.prompt-indicator {
+    display: inline-block;
+    background-color: rgba(99, 102, 241, 0.2);
+    color: #6366F1;
+    padding: 2px 5px;
+    border-radius: 4px;
+    font-weight: 500;
+}
+
+/* Light theme adjustments */
+:root[data-theme="light"] .custom-node {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+:root[data-theme="light"] .node-title {
+    color: #333;
+}
+
+:root[data-theme="light"] .node-description {
+    color: rgba(0, 0, 0, 0.6);
+}
+
+:root[data-theme="light"] .custom-handle {
+    border: 1px solid rgba(0, 0, 0, 0.3) !important;
+}
+
+:root[data-theme="light"] .prompt-indicator {
+    background-color: rgba(99, 102, 241, 0.1);
+}
+
+/* Execution Status Styling */
+.custom-node.pending {
+    opacity: 0.8;
+}
+
+.custom-node.in-progress {
+    animation: node-pulse 1.5s infinite;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
+}
+
+.custom-node.in-progress::before {
+    opacity: 0.6;
+    background: linear-gradient(45deg, transparent, #6366f1, transparent);
+    animation: border-pulse 1.5s infinite;
+}
+
+.custom-node.completed {
+    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
+}
+
+.custom-node.completed::before {
+    opacity: 0.6;
+    background: linear-gradient(45deg, transparent, #10B981, transparent);
+}
+
+.custom-node.error {
+    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
+}
+
+.custom-node.error::before {
+    opacity: 0.6;
+    background: linear-gradient(45deg, transparent, #EF4444, transparent);
+}
+
+@keyframes node-pulse {
+    0% {
+        transform: translateY(0);
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
+    }
+
+    50% {
+        transform: translateY(-3px);
+        box-shadow: 0 0 15px rgba(99, 102, 241, 0.7);
+    }
+
+    100% {
+        transform: translateY(0);
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
+    }
+}
+
+@keyframes border-pulse {
+    0% {
+        opacity: 0.4;
+    }
+
+    50% {
+        opacity: 0.8;
+    }
+
+    100% {
+        opacity: 0.4;
+    }
+}
+
+/* Light theme adjustments */
+:root[data-theme="light"] .custom-node.in-progress {
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
+}
+
+:root[data-theme="light"] .custom-node.completed {
+    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
+}
+
+:root[data-theme="light"] .custom-node.error {
+    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
+}
+
+.researcher-node {
+    color: #4C1D95;
+}
+
+.agent-node {
+    color: #10B981;
+}
+
+.insights-node {
+    color: #F59E0B;
+}
+
+.notify-node {
+    color: #EF4444;
+}
+
+.publish-node {
+    color: #DC2626;
+    background: rgba(30, 30, 40, 0.95);
+}
+
+.default-node {
+    color: #8B5CF6;
+}

frontend/podcraft/src/components/CustomNodes.jsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import { Handle, Position } from 'reactflow';
+import {
+    FaKeyboard,
+    FaRobot,
+    FaLightbulb,
+    FaBell,
+    FaYoutube,
+    FaBrain,
+    FaMicrophone,
+    FaSlidersH,
+    FaSearch,
+    FaBookReader
+} from 'react-icons/fa';
+import { BiPodcast } from 'react-icons/bi';
+import './CustomNodes.css';
+
+const nodeIcons = {
+    input: FaKeyboard,
+    researcher: FaSearch,
+    agent: FaRobot,
+    insights: FaBrain,
+    notify: FaBell,
+    publish: FaYoutube,
+    default: BiPodcast
+};
+
+// Base node component
+const BaseNode = ({ data, nodeType, icon: IconComponent, color, showSourceHandle = true, showTargetHandle = true }) => {
+    // Use CSS variable through inline style object without TypeScript complaints
+    const nodeStyle = {
+        borderColor: color,
+        // Additional inline styles can be added here
+    };
+
+    // Check if this is an input node with a prompt
+    const hasPrompt = nodeType === 'input-node' && data.prompt;
+
+    return (
+        <div className={`custom-node ${nodeType}-node ${data.prompt ? 'has-prompt' : ''}`} style={nodeStyle}>
+            {showTargetHandle && (
+                <Handle
+                    type="target"
+                    position={Position.Left}
+                    className="custom-handle"
+                    style={{ backgroundColor: color }}
+                />
+            )}
+
+            <div className="node-content">
+                <div className="node-header">
+                    <div className="node-icon" style={{ backgroundColor: color }}>
+                        <IconComponent />
+                    </div>
+                    <div className="node-title">{data.label}</div>
+                </div>
+                {data.description && (
+                    <div className="node-description">{data.description}</div>
+                )}
+                {data.prompt && nodeType === 'input-node' && (
+                    <div className="node-prompt">
+                        <div className="prompt-indicator">Prompt set ✓</div>
+                    </div>
+                )}
+            </div>
+
+            {showSourceHandle && (
+                <Handle
+                    type="source"
+                    position={Position.Right}
+                    className="custom-handle"
+                    style={{ backgroundColor: color }}
+                />
+            )}
+        </div>
+    );
+};
+
+// Specific node types
+export const InputNode = (props) => {
+    // Input nodes only have source handles (output)
+    return (
+        <BaseNode
+            {...props}
+            nodeType="input"
+            icon={FaKeyboard}
+            color="#6366F1"
+            showTargetHandle={false}
+        />
+    );
+};
+
+// Specialized Researcher node (a type of agent)
+export const ResearcherNode = (props) => {
+    return (
+        <BaseNode
+            {...props}
+            nodeType="researcher"
+            icon={FaSearch}
+            color="#4C1D95" // Deep purple
+        />
+    );
+};
+
+export const AgentNode = (props) => {
+    return (
+        <BaseNode
+            {...props}
+            nodeType="agent"
+            icon={FaRobot}
+            color="#10B981"
+        />
+    );
+};
+
+export const InsightsNode = (props) => {
+    return (
+        <BaseNode
+            {...props}
+            nodeType="insights"
+            icon={FaBrain}
+            color="#F59E0B"
+        />
+    );
+};
+
+export const NotifyNode = (props) => {
+    return (
+        <BaseNode
+            {...props}
+            nodeType="notify"
+            icon={FaBell}
+            color="#EF4444"
+        />
+    );
+};
+
+export const PublishNode = (props) => {
+    // Output nodes only have target handles (input)
+    return (
+        <BaseNode
+            {...props}
+            nodeType="publish"
+            icon={FaYoutube}
+            color="#DC2626"
+            showSourceHandle={false}
+        />
+    );
+};
+
+// Default node for any other types
+export const DefaultNode = (props) => {
+    return (
+        <BaseNode
+            {...props}
+            nodeType="default"
+            icon={BiPodcast}
+            color="#8B5CF6"
+        />
+    );
+};
+
+// A map of node types to their components for easy registration
+export const nodeTypes = {
+    input: InputNode,
+    researcher: ResearcherNode,
+    agent: AgentNode,
+    insights: InsightsNode,
+    notify: NotifyNode,
+    output: PublishNode,
+    default: DefaultNode
+};
+
+export default nodeTypes; 

frontend/podcraft/src/components/DeleteModal.css

@@ -0,0 +1,138 @@
+.delete-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    backdrop-filter: blur(5px);
+}
+
+.delete-modal-content {
+    background: rgba(17, 17, 17, 0.95);
+    backdrop-filter: blur(10px);
+    padding: 2rem;
+    border-radius: 12px;
+    width: 90%;
+    max-width: 500px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    animation: modalSlideIn 0.3s ease-out;
+}
+
+.delete-modal-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.delete-modal-header h2 {
+    color: #fff;
+    margin: 0;
+    font-size: 1.5rem;
+}
+
+.warning-icon {
+    color: #ef4444;
+    font-size: 1.5rem;
+}
+
+.delete-modal-body {
+    margin-bottom: 2rem;
+}
+
+.delete-modal-body p {
+    color: rgba(255, 255, 255, 0.8);
+    margin: 0.5rem 0;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.podcast-name {
+    color: #6366f1;
+    font-weight: 500;
+}
+
+.warning-text {
+    color: #ef4444 !important;
+    font-size: 0.9rem !important;
+    margin-top: 1rem !important;
+}
+
+.delete-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+}
+
+.cancel-btn,
+.delete-btn {
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.cancel-btn {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.cancel-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.delete-btn {
+    background: #ef4444;
+    border: none;
+    color: white;
+}
+
+.delete-btn:hover {
+    background: #dc2626;
+    transform: translateY(-1px);
+}
+
+@keyframes modalSlideIn {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Light theme adjustments */
+.light .delete-modal-content {
+    background: rgba(255, 255, 255, 0.95);
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+.light .delete-modal-header h2 {
+    color: #000;
+}
+
+.light .delete-modal-body p {
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.light .cancel-btn {
+    border-color: rgba(0, 0, 0, 0.2);
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.light .cancel-btn:hover {
+    background: rgba(0, 0, 0, 0.1);
+    border-color: rgba(0, 0, 0, 0.3);
+}

frontend/podcraft/src/components/DeleteModal.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import './DeleteModal.css';
+import { FaExclamationTriangle } from 'react-icons/fa';
+
+const DeleteModal = ({ isOpen, onClose, onConfirm, podcastName }) => {
+    if (!isOpen) return null;
+
+    return (
+        <div className="delete-modal-overlay">
+            <div className="delete-modal-content">
+                <div className="delete-modal-header">
+                    <FaExclamationTriangle className="warning-icon" />
+                    <h2>Confirm Deletion</h2>
+                </div>
+                <div className="delete-modal-body">
+                    <p>This will permanently delete <span className="podcast-name">"{podcastName}"</span> podcast.</p>
+                    <p className="warning-text">This action cannot be undone.</p>
+                </div>
+                <div className="delete-modal-footer">
+                    <button className="cancel-btn" onClick={onClose}>Cancel</button>
+                    <button className="delete-btn" onClick={onConfirm}>Delete Podcast</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DeleteModal; 

frontend/podcraft/src/components/InputNodeModal.css

@@ -0,0 +1,194 @@
+.input-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fadeIn 0.2s ease-out;
+}
+
+.input-modal {
+    background: rgba(20, 20, 20, 0.95);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    border-radius: 12px;
+    padding: 1.5rem;
+    width: 90%;
+    max-width: 600px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    animation: slideIn 0.3s ease-out;
+}
+
+.input-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+}
+
+.input-modal-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+    background: linear-gradient(0.25turn, #999, #fff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.close-button {
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 1.5rem;
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+}
+
+.close-button:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    transform: rotate(90deg);
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group textarea {
+    width: auto;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    color: white;
+    padding: 1rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    resize: vertical;
+    transition: all 0.2s ease;
+}
+
+.form-group textarea:focus {
+    outline: none;
+    border-color: #6366f1;
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+.form-group textarea::placeholder {
+    color: rgba(255, 255, 255, 0.3);
+}
+
+.input-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+}
+
+.input-modal-footer button {
+    padding: 0.5rem 1.25rem;
+    border-radius: 6px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.cancel-button {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.cancel-button:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.submit-button {
+    background: #6366f1;
+    border: none;
+    color: white;
+}
+
+.submit-button:hover {
+    background: #4f46e5;
+    transform: translateY(-1px);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Light theme adjustments */
+:root[data-theme="light"] .input-modal {
+    background: rgba(255, 255, 255, 0.95);
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+:root[data-theme="light"] .input-modal-header h2 {
+    background: linear-gradient(90deg, #333, #666);
+    -webkit-background-clip: text;
+}
+
+:root[data-theme="light"] .close-button {
+    color: rgba(0, 0, 0, 0.6);
+}
+
+:root[data-theme="light"] .close-button:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.8);
+}
+
+:root[data-theme="light"] .form-group textarea {
+    background: rgba(0, 0, 0, 0.05);
+    border-color: rgba(0, 0, 0, 0.1);
+    color: #000;
+}
+
+:root[data-theme="light"] .form-group textarea:focus {
+    border-color: rgba(99, 102, 241, 0.5);
+    background: rgba(0, 0, 0, 0.02);
+}
+
+:root[data-theme="light"] .form-group textarea::placeholder {
+    color: rgba(0, 0, 0, 0.3);
+}
+
+:root[data-theme="light"] .cancel-button {
+    border-color: rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.8);
+}
+
+:root[data-theme="light"] .cancel-button:hover {
+    background: rgba(0, 0, 0, 0.1);
+    border-color: rgba(0, 0, 0, 0.2);
+}

frontend/podcraft/src/components/InputNodeModal.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import './InputNodeModal.css';
+
+const InputNodeModal = ({ isOpen, onClose, onSubmit, nodeId }) => {
+    const [prompt, setPrompt] = useState('');
+
+    if (!isOpen) return null;
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit(nodeId, prompt);
+        setPrompt('');
+        onClose();
+    };
+
+    return (
+        <div className="input-modal-overlay">
+            <div className="input-modal">
+                <div className="input-modal-header">
+                    <h2>Enter Your Prompt</h2>
+                    <button className="close-button" onClick={onClose}>×</button>
+                </div>
+                <form onSubmit={handleSubmit}>
+                    <div className="form-group">
+                        <textarea
+                            value={prompt}
+                            onChange={(e) => setPrompt(e.target.value)}
+                            placeholder="Enter your prompt here..."
+                            rows={6}
+                            required
+                        />
+                    </div>
+                    <div className="input-modal-footer">
+                        <button type="button" className="cancel-button" onClick={onClose}>
+                            Cancel
+                        </button>
+                        <button type="submit" className="submit-button">
+                            Save
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default InputNodeModal; 

frontend/podcraft/src/components/NodeSelectionPanel.css

@@ -0,0 +1,413 @@
+.node-selection-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    backdrop-filter: blur(8px);
+    animation: fadeIn 0.2s ease-out;
+}
+
+.node-selection-panel {
+    background: rgba(17, 17, 17, 0.95);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    border-radius: 16px;
+    padding: 2rem;
+    width: 90%;
+    max-width: 600px;
+    max-height: 85vh;
+    overflow-y: auto;
+    color: white;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    animation: slideUp 0.3s ease-out;
+    position: relative;
+}
+
+.node-selection-panel::-webkit-scrollbar {
+    width: 6px;
+}
+
+.node-selection-panel::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 3px;
+}
+
+.node-selection-panel::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+    transition: background 0.3s ease;
+}
+
+.node-selection-panel::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.panel-header h2 {
+    margin: 0;
+    font-size: 1.75rem;
+    font-weight: 600;
+    background: linear-gradient(90deg, #fff, #999);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.close-button {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+}
+
+.close-button:hover {
+    color: white;
+    background: rgba(255, 255, 255, 0.2);
+    transform: rotate(90deg);
+}
+
+.node-types {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.node-type-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.node-type-item {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 0.75rem 1.25rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid;
+    border-color: var(--node-color);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.node-type-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.03), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.6s ease;
+}
+
+.node-type-item:hover::before {
+    transform: translateX(100%);
+}
+
+.node-type-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.node-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 6px;
+    color: white;
+    font-size: 25px;
+}
+
+.node-icon::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: transform 0.6s ease;
+}
+
+.node-type-item:hover .node-icon::after {
+    transform: translateX(100%);
+}
+
+.node-info {
+    flex: 1;
+}
+
+.node-info h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: white;
+    margin-bottom: 0.25rem;
+}
+
+.node-info p {
+    margin: 0;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.6);
+    line-height: 1.4;
+}
+
+.agent-list {
+    margin-left: 4rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding-top: 0.5rem;
+    height: 15vh;
+    overflow-y: auto;
+    max-height: 25vh;
+}
+
+.agent-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.agent-list::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 3px;
+}
+
+.agent-list::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+    transition: background 0.3s ease;
+}
+
+.agent-list::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.agent-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: rgba(99, 102, 241, 0.1);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+.agent-item:hover {
+    transform: translateX(4px);
+    background: rgba(99, 102, 241, 0.15);
+    border-color: rgba(99, 102, 241, 0.3);
+}
+
+.agent-name {
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.9);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.agent-special-icon {
+    color: #4C1D95;
+    font-size: 0.9rem;
+}
+
+.researcher-agent {
+    background: rgba(76, 29, 149, 0.15);
+    border-color: rgba(76, 29, 149, 0.3);
+    position: relative;
+}
+
+.researcher-agent:hover {
+    background: rgba(76, 29, 149, 0.25);
+    border-color: rgba(76, 29, 149, 0.4);
+}
+
+.researcher-agent::after {
+    content: 'Special node with unique connection rules';
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    right: 0;
+    color: #4C1D95;
+    font-size: 0.65rem;
+    opacity: 0;
+    transition: all 0.3s ease;
+    text-align: center;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 4px;
+    padding: 2px 4px;
+    pointer-events: none;
+    transform: translateY(5px);
+}
+
+.researcher-agent:hover::after {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.node-constraint {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 6px;
+    font-size: 0.7rem;
+    color: rgba(255, 255, 255, 0.5);
+    line-height: 1.2;
+    padding: 4px 8px;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+}
+
+.node-constraint svg {
+    flex-shrink: 0;
+}
+
+.agent-status {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 0.25rem 0.75rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Light theme adjustments */
+:root[data-theme="light"] .node-selection-panel {
+    background: rgba(255, 255, 255, 0.95);
+    border-color: rgba(0, 0, 0, 0.1);
+    color: black;
+}
+
+:root[data-theme="light"] .panel-header h2 {
+    background: linear-gradient(90deg, #333, #666);
+    -webkit-background-clip: text;
+    background-clip: text;
+}
+
+:root[data-theme="light"] .close-button {
+    background: rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.6);
+}
+
+:root[data-theme="light"] .close-button:hover {
+    color: black;
+    background: rgba(0, 0, 0, 0.15);
+}
+
+:root[data-theme="light"] .node-type-item {
+    background: rgba(0, 0, 0, 0.03);
+}
+
+:root[data-theme="light"] .node-type-item:hover {
+    background: rgba(var(--node-color-rgb), 0.1);
+}
+
+:root[data-theme="light"] .node-info h3 {
+    color: black;
+}
+
+:root[data-theme="light"] .node-info p {
+    color: rgba(0, 0, 0, 0.6);
+}
+
+:root[data-theme="light"] .agent-name {
+    color: rgba(0, 0, 0, 0.9);
+}
+
+:root[data-theme="light"] .agent-status {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.05);
+}
+
+:root[data-theme="light"] .node-constraint {
+    background: rgba(0, 0, 0, 0.05);
+    color: rgba(0, 0, 0, 0.6);
+}
+
+:root[data-theme="light"] .researcher-agent {
+    background: rgba(76, 29, 149, 0.1);
+}
+
+:root[data-theme="light"] .researcher-agent:hover {
+    background: rgba(76, 29, 149, 0.15);
+}
+
+:root[data-theme="light"] .researcher-agent::after {
+    background: rgba(255, 255, 255, 0.95);
+    color: #4C1D95;
+    border: 1px solid rgba(76, 29, 149, 0.2);
+}
+
+/* Node color classes for each type */
+.node-color-input:hover {
+    background: rgba(99, 102, 241, 0.1);
+}
+
+.node-color-agent:hover {
+    background: rgba(16, 185, 129, 0.1);
+}
+
+.node-color-insights:hover {
+    background: rgba(245, 158, 11, 0.1);
+}
+
+.node-color-notify:hover {
+    background: rgba(239, 68, 68, 0.1);
+}
+
+.node-color-publish:hover {
+    background: rgba(220, 38, 38, 0.1);
+}

frontend/podcraft/src/components/NodeSelectionPanel.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { FaRobot, FaYoutube, FaBell, FaLightbulb, FaKeyboard, FaSearch, FaInfoCircle } from 'react-icons/fa';
+import './NodeSelectionPanel.css';
+
+const NodeSelectionPanel = ({ isOpen, onClose, agents, onSelectNode }) => {
+    const nodeTypes = [
+        {
+            id: 'input',
+            label: 'Input Node',
+            description: 'Add an input prompt for your podcast',
+            constraint: 'Can only connect to Research Agent',
+            icon: <FaKeyboard />,
+            color: '#6366F1',
+            colorRgb: '99, 102, 241',
+            subItems: null
+        },
+        {
+            id: 'agent',
+            label: 'Agents Node',
+            description: 'Add AI agents to process your content',
+            constraint: 'Research Agent can receive from Input and connect to Agents or Insights. Regular Agents can only connect to Insights',
+            icon: <FaRobot />,
+            color: '#10B981',
+            colorRgb: '16, 185, 129',
+            subItems: agents
+        },
+        {
+            id: 'insights',
+            label: 'Insights Node',
+            description: 'Add analytics and insights processing',
+            constraint: 'Can receive from Agents or Research Agent and connect to Notify or Publish nodes',
+            icon: <FaLightbulb />,
+            color: '#F59E0B',
+            colorRgb: '245, 158, 11',
+            subItems: null
+        },
+        {
+            id: 'notify',
+            label: 'Notify Node',
+            description: 'Add notifications and alerts',
+            constraint: 'Can only receive from Insights nodes',
+            icon: <FaBell />,
+            color: '#EF4444',
+            colorRgb: '239, 68, 68',
+            subItems: null
+        },
+        {
+            id: 'publish',
+            label: 'Publish Node',
+            description: 'Publish to YouTube',
+            constraint: 'Can only receive from Insights nodes',
+            icon: <FaYoutube />,
+            color: '#DC2626',
+            colorRgb: '220, 38, 38',
+            subItems: null
+        }
+    ];
+
+    if (!isOpen) return null;
+
+    const handleNodeSelect = (nodeType, agentId = null) => {
+        onSelectNode({ type: nodeType, agentId });
+        onClose();
+    };
+
+    return (
+        <div className="node-selection-overlay" onClick={onClose}>
+            <div className="node-selection-panel" onClick={e => e.stopPropagation()}>
+                <div className="panel-header">
+                    <h2>Add Node</h2>
+                    <button className="close-button" onClick={onClose}>&times;</button>
+                </div>
+                <div className="node-types">
+                    {nodeTypes.map((nodeType) => (
+                        <div key={nodeType.id} className="node-type-section">
+                            <div
+                                className={`node-type-item node-color-${nodeType.id}`}
+                                onClick={() => nodeType.id !== 'agent' && handleNodeSelect(nodeType.id)}
+                                style={{ borderColor: nodeType.color }}
+                            >
+                                <div className="node-icon" style={{ backgroundColor: nodeType.color }}>{nodeType.icon}</div>
+                                <div className="node-info">
+                                    <h3>{nodeType.label}</h3>
+                                    <p>{nodeType.description}</p>
+                                    <div className="node-constraint" style={{ color: `rgba(${nodeType.colorRgb}, 0.7)` }}>
+                                        <FaInfoCircle style={{ color: nodeType.color }} />
+                                        <span>{nodeType.constraint}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            {nodeType.id === 'agent' && nodeType.subItems && (
+                                <div className="agent-list">
+                                    {nodeType.subItems.map((agent) => (
+                                        <div
+                                            key={agent.id}
+                                            className={`agent-item ${agent.isDefault ? 'default' : 'custom'} ${agent.id === 'researcher' ? 'researcher-agent' : ''}`}
+                                            onClick={() => handleNodeSelect('agent', agent.id)}
+                                        >
+                                            <span className="agent-name">
+                                                {agent.id === 'researcher' && <FaSearch className="agent-special-icon" />}
+                                                {agent.name}
+                                            </span>
+                                            <span className="agent-status">{agent.status}</span>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NodeSelectionPanel; 

frontend/podcraft/src/components/ResponseEditModal.css

@@ -0,0 +1,186 @@
+.response-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    backdrop-filter: blur(3px);
+    animation: fadeIn 0.2s ease-out;
+}
+
+.response-modal-content {
+    background-color: #1a1a2e;
+    padding: 1.5rem;
+    border-radius: 12px;
+    width: 90%;
+    max-width: 700px;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+    border: 1px solid #2a2a42;
+    animation: slideUp 0.3s ease-out;
+}
+
+.response-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #2a2a42;
+}
+
+.response-modal-header h3 {
+    margin: 0;
+    font-size: 1.3rem;
+    background: linear-gradient(45deg, #8b5cf6, #3b82f6);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    flex-grow: 1;
+}
+
+.response-modal-turn {
+    margin-right: 1rem;
+    color: #9ca3af;
+    font-size: 0.9rem;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    color: #9ca3af;
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0;
+    transition: color 0.2s;
+}
+
+.close-btn:hover {
+    color: #f43f5e;
+}
+
+.response-editor {
+    width: 100%;
+    min-height: 200px;
+    padding: 0.8rem;
+    margin-bottom: 1rem;
+    background-color: #1e1e30;
+    border: 1px solid #3a3a5a;
+    border-radius: 8px;
+    color: #e5e7eb;
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.6;
+    resize: vertical;
+    transition: border 0.2s ease;
+}
+
+.response-editor:focus {
+    outline: none;
+    border-color: #8b5cf6;
+    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
+}
+
+.response-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.cancel-btn,
+.save-btn {
+    padding: 0.6rem 1.2rem;
+    border-radius: 6px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+}
+
+.cancel-btn {
+    background-color: transparent;
+    color: #9ca3af;
+    border: 1px solid #3a3a5a;
+}
+
+.cancel-btn:hover {
+    background-color: #2a2a42;
+    color: #e5e7eb;
+}
+
+.save-btn {
+    background-color: #8b5cf6;
+    color: white;
+}
+
+.save-btn:hover {
+    background-color: #7c3aed;
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Light theme adjustments */
+:root[data-theme="light"] .response-modal-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+:root[data-theme="light"] .response-modal-content {
+    background-color: #ffffff;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+:root[data-theme="light"] .response-modal-header {
+    border-bottom: 1px solid #e5e7eb;
+}
+
+:root[data-theme="light"] .response-editor {
+    background-color: #f9fafb;
+    border: 1px solid #d1d5db;
+    color: #1f2937;
+}
+
+:root[data-theme="light"] .response-editor:focus {
+    border-color: #8b5cf6;
+    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
+}
+
+:root[data-theme="light"] .cancel-btn {
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+}
+
+:root[data-theme="light"] .cancel-btn:hover {
+    background-color: #f3f4f6;
+    color: #1f2937;
+}

frontend/podcraft/src/components/ResponseEditModal.jsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect, useRef } from 'react';
+import './ResponseEditModal.css';
+
+/**
+ * Modal component for editing agent responses in the insights
+ * @param {Object} props
+ * @param {boolean} props.isOpen - Whether the modal is open
+ * @param {function} props.onClose - Function to call when the modal is closed
+ * @param {string} props.agentName - The name of the agent whose response is being edited
+ * @param {string} props.agentId - The ID of the agent
+ * @param {number} props.turn - The turn number of the response
+ * @param {string} props.response - The current response text
+ * @param {function} props.onSave - Function to call when the response is saved, receives (agentId, turn, newResponse)
+ */
+const ResponseEditModal = ({ isOpen, onClose, agentName, agentId, turn, response, onSave }) => {
+    const [editedResponse, setEditedResponse] = useState('');
+    const modalRef = useRef(null);
+    const editorRef = useRef(null);
+
+    // Initialize the editor with the current response when the modal opens
+    useEffect(() => {
+        if (isOpen && response) {
+            // Remove any HTML tags to get plain text for editing
+            const plainText = response.replace(/<[^>]*>/g, '');
+            setEditedResponse(plainText);
+
+            // Focus the editor when the modal opens
+            setTimeout(() => {
+                if (editorRef.current) {
+                    editorRef.current.focus();
+                }
+            }, 100);
+        }
+    }, [isOpen, response]);
+
+    // Handle clicks outside the modal to close it
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (modalRef.current && !modalRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, onClose]);
+
+    // Handle saving the edited response
+    const handleSave = () => {
+        // Call the onSave callback with the agent ID, turn, and new response
+        onSave(agentId, turn, editedResponse);
+        onClose();
+    };
+
+    // Don't render anything if the modal is not open
+    if (!isOpen) return null;
+
+    return (
+        <div className="response-modal-overlay">
+            <div className="response-modal-content" ref={modalRef}>
+                <div className="response-modal-header">
+                    <h3>Edit Response: {agentName}</h3>
+                    <span className="response-modal-turn">Turn {turn}</span>
+                    <button className="close-btn" onClick={onClose}>×</button>
+                </div>
+                <textarea
+                    ref={editorRef}
+                    className="response-editor"
+                    value={editedResponse}
+                    onChange={(e) => setEditedResponse(e.target.value)}
+                    placeholder="Edit the agent's response..."
+                />
+                <div className="response-modal-footer">
+                    <button className="cancel-btn" onClick={onClose}>Cancel</button>
+                    <button className="save-btn" onClick={handleSave}>Save Changes</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ResponseEditModal; 

frontend/podcraft/src/components/Toast.css

@@ -0,0 +1,63 @@
+.toast-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.toast {
+    background: rgba(99, 102, 241, 0.95);
+    backdrop-filter: blur(8px);
+    color: white;
+    padding: 1rem 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.9rem;
+    transform: translateX(120%);
+    opacity: 0;
+    animation: slideIn 0.3s ease forwards, fadeOut 0.3s ease 2.7s forwards;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    width: auto;
+    max-width: 400px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.toast.success {
+    background: rgba(34, 197, 94, 0.95);
+}
+
+.toast.error {
+    background: rgba(239, 68, 68, 0.95);
+}
+
+.toast svg {
+    font-size: 1.2rem;
+}
+
+@keyframes slideIn {
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    to {
+        opacity: 0;
+        transform: translateX(120%);
+    }
+}
+
+/* Light theme adjustments */
+.light .toast {
+    background: rgba(99, 102, 241, 0.9);
+    color: white;
+}

frontend/podcraft/src/components/Toast.jsx

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+import { FaCheckCircle, FaTimesCircle } from 'react-icons/fa';
+import './Toast.css';
+
+const Toast = ({ message, type = 'success', onClose }) => {
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            onClose();
+        }, 3000);
+
+        return () => clearTimeout(timer);
+    }, [onClose]);
+
+    return (
+        <div className={`toast ${type}`}>
+            {type === 'success' ? <FaCheckCircle /> : <FaTimesCircle />}
+            {message}
+        </div>
+    );
+};
+
+export default Toast;