New Repo for Agent Workflow Frontend

.gitignore

@@ -0,0 +1,39 @@
+# -------------------------------------------------
+# Environment files
+# -------------------------------------------------
+.env
+.env.*
+*.env
+
+# -------------------------------------------------
+# Python cache / compiled files
+# -------------------------------------------------
+__pycache__/
+*.py[cod]
+*.pyo
+*.pyd
+*.egg-info/
+*.egg
+*.dist-info/
+
+# -------------------------------------------------
+# Log files and log folder
+# -------------------------------------------------
+logs/
+*.log
+
+# -------------------------------------------------
+# Cursor‑specific files (project‑specific metadata)
+# -------------------------------------------------
+.cursor/
+*.cursor
+
+# -------------------------------------------------
+# Virtual environment directories
+# -------------------------------------------------
+# If you use a venv folder named “venv” (common default)
+venv/
+# If you use a .venv folder (also common)
+.venv/
+# If you use a virtual environment named “env”
+env/

job_writer_ui/api/__init__.py

@@ -0,0 +1,10 @@
+"""
+API module for LangGraph workflow integration.
+
+This module provides functions for interacting with the LangGraph API
+to manage workflow execution, interrupts, and resumption.
+"""
+
+from api.workflow import resume_with_feedback, start_generation
+
+__all__ = ["resume_with_feedback", "start_generation"]

job_writer_ui/api/workflow.py

@@ -0,0 +1,291 @@
+"""
+LangGraph API integration module.
+
+This module handles:
+- Workflow initialization and execution
+- Interrupt handling and state management
+- Workflow resumption with user feedback
+"""
+
+from typing import Any, Dict, Optional, Tuple
+
+from config import (
+    ASSISTANT_ID,
+    DEFAULT_RESUME_PATH,
+    LANGGRAPH_CLIENT,
+    logger,
+    log_activity,
+)
+
+
+class WorkflowError(Exception):
+    """Custom exception for workflow-related errors."""
+
+    pass
+
+
+def get_current_workflow_node(state_dict: Dict[str, Any]) -> str:
+    """
+    Extract current node from thread state.
+
+    Args:
+        state_dict: Thread state dictionary
+
+    Returns:
+        Current node name, defaults to 'human_approval' if not found
+    """
+    next_nodes = state_dict.get("next", [])
+    current_node = next_nodes[0] if next_nodes else None
+
+    if not current_node:
+        current_node = "human_approval"
+        logger.warning(
+            "Could not extract current_node from state, using fallback: %s",
+            current_node,
+        )
+    else:
+        log_activity("Extracted current_node", current_node=current_node)
+
+    return current_node
+
+
+def start_generation(
+    job_url: str,
+    content_type: str,
+    state: Dict[str, Any],
+    resume_url: Optional[str] = None,
+) -> Tuple[Dict[str, Any], Dict[str, Any]]:
+    """
+    Start the workflow and handle potential interrupt.
+
+    Args:
+        job_url: Job posting URL
+        content_type: Type of content to generate
+        state: Current application state
+        resume_url: Optional resume file URL (uses default if not provided)
+
+    Returns:
+        Tuple of (result_dict, updated_state).
+        Result dict contains either interrupt info or completed result.
+
+    Raises:
+        WorkflowError: If workflow execution fails
+        ValueError: If required parameters are missing
+    """
+    if not job_url or not job_url.strip():
+        return {"error": "Please provide a job posting URL."}, state
+
+    try:
+        thread = LANGGRAPH_CLIENT.threads.create()
+        thread_id = thread["thread_id"]
+        log_activity("Created thread", thread_id=thread_id)
+
+        resume_path = (
+            resume_url.strip()
+            if resume_url and resume_url.strip()
+            else DEFAULT_RESUME_PATH
+        )
+
+        payload = {
+            "resume_path": resume_path,
+            "job_description_source": job_url.strip(),
+            "content_category": content_type,
+            "current_node": "load",
+            "messages": [],
+            "company_research_data": {},
+        }
+
+        run = LANGGRAPH_CLIENT.runs.create(
+            thread_id=thread_id, assistant_id=ASSISTANT_ID, input=payload
+        )
+        run_id = (
+            run.get("run_id") if isinstance(run, dict) else getattr(run, "run_id", None)
+        )
+        log_activity("Created initial run", run_id=run_id, thread_id=thread_id)
+
+        LANGGRAPH_CLIENT.runs.wait(thread_id=thread_id, assistant_id=ASSISTANT_ID)
+
+        thread_state = LANGGRAPH_CLIENT.threads.get_state(thread_id=thread_id)
+        state_dict = (
+            thread_state if isinstance(thread_state, dict) else thread_state.__dict__
+        )
+
+        if state_dict.get("interrupts"):
+            interrupt_value = state_dict["interrupts"][0].get("value", {})
+            current_node = get_current_workflow_node(state_dict)
+
+            return {
+                "status": "interrupted",
+                "thread_id": thread_id,
+                "draft": interrupt_value.get("draft", ""),
+                "message": interrupt_value.get("message", "Please review the draft"),
+                "current_node": current_node,
+            }, {"thread_id": thread_id, "run_id": run_id, "current_node": current_node}
+
+        return {
+            "status": "completed",
+            "result": state_dict.get("values", {}).get("output_data", state_dict),
+        }, {"thread_id": thread_id, "run_id": run_id}
+
+    except (ValueError, ConnectionError, RuntimeError) as error:
+        logger.error("Request failed: %s", error, exc_info=True)
+        return {"error": "Request failed", "details": str(error)}, state
+
+
+def cancel_run(*, thread_id: str, run_id: str, action: str = "cancel") -> bool:
+    """Cancel a LangGraph run safely.
+
+    Returns True if cancellation request was sent successfully.
+    """
+    try:
+        LANGGRAPH_CLIENT.runs.cancel(
+            thread_id=thread_id,
+            run_id=run_id,
+            action=action,
+        )
+        log_activity("Cancelled run", thread_id=thread_id, run_id=run_id, action=action)
+        return True
+    except Exception as exc:
+        log_activity(
+            "Failed to cancel run",
+            thread_id=thread_id,
+            run_id=run_id,
+            action=action,
+            error=str(exc),
+        )
+        logger.warning(
+            "Failed to cancel run %s for thread %s: %s",
+            run_id,
+            thread_id,
+            exc,
+            exc_info=True,
+        )
+        return False
+
+
+def cancel_current_run(state: Dict[str, Any]) -> Dict[str, Any]:
+    """Cancel the current run from UI.
+
+    Args:
+        state: Current application state containing thread_id and run_id
+
+    Returns:
+        Status dictionary with cancellation result
+    """
+    if not state:
+        log_activity("Cancel attempted with empty state")
+        return {
+            "status": "error",
+            "message": "No active run to cancel. State is empty.",
+        }
+
+    thread_id = state.get("thread_id")
+    run_id = state.get("run_id")
+
+    log_activity(
+        "Cancel run requested",
+        thread_id=thread_id,
+        run_id=run_id,
+        state_keys=list(state.keys()) if state else [],
+    )
+
+    if not thread_id or not run_id:
+        return {
+            "status": "error",
+            "message": f"No active run to cancel. Missing thread_id or run_id. (thread_id={thread_id}, run_id={run_id})",
+        }
+
+    success = cancel_run(thread_id=thread_id, run_id=run_id, action="ui_cancel")
+    print("Cancellation Message:", success)
+
+    if success:
+        return {
+            "status": "cancelled",
+            "message": "Run has been cancelled successfully.",
+            "thread_id": thread_id,
+            "run_id": run_id,
+        }
+    else:
+        return {
+            "status": "error",
+            "message": "Failed to cancel the run. Please try again.",
+            "thread_id": thread_id,
+            "run_id": run_id,
+        }
+
+
+def resume_with_feedback(
+    feedback: str, state: Dict[str, Any]
+) -> Tuple[Dict[str, Any], Dict[str, Any]]:
+    """
+    Resume workflow after interrupt with user feedback.
+
+    Empty feedback string means approve as-is.
+
+    Args:
+        feedback: User feedback text (empty string means approve)
+        state: Current application state with thread_id
+
+    Returns:
+        Tuple of (result_dict, updated_state).
+        Result dict contains completed result or error.
+
+    Raises:
+        WorkflowError: If resume fails
+        ValueError: If thread_id is missing from state
+    """
+    thread_id = state.get("thread_id")
+    if not thread_id:
+        return {"error": "No active workflow to resume"}, state
+
+    current_node = state.get("current_node", "human_approval")
+    if not current_node:
+        current_node = "human_approval"
+        logger.warning(
+            "No current_node in state for thread %s, using fallback: %s",
+            thread_id,
+            current_node,
+        )
+
+    log_activity(
+        "Resuming thread",
+        thread_id=thread_id,
+        current_node=current_node,
+        feedback=feedback[:50] if feedback else "empty",
+    )
+
+    try:
+        LANGGRAPH_CLIENT.threads.update_state(
+            thread_id=thread_id,
+            values={"feedback": feedback.strip()},
+            as_node=current_node,
+        )
+        log_activity("State updated", thread_id=thread_id, current_node=current_node)
+
+        run = LANGGRAPH_CLIENT.runs.create(
+            thread_id=thread_id, assistant_id=ASSISTANT_ID, input=None
+        )
+        run_id = (
+            run.get("run_id") if isinstance(run, dict) else getattr(run, "run_id", None)
+        )
+        log_activity("Created resume run", run_id=run_id, thread_id=thread_id)
+
+        LANGGRAPH_CLIENT.runs.wait(thread_id=thread_id, assistant_id=ASSISTANT_ID)
+
+        final_state = LANGGRAPH_CLIENT.threads.get_state(thread_id=thread_id)
+        state_dict = (
+            final_state if isinstance(final_state, dict) else final_state.__dict__
+        )
+
+        # Update state with the new run_id from resume
+        updated_state = state.copy()
+        updated_state["run_id"] = run_id
+
+        return {
+            "status": "completed",
+            "result": state_dict.get("values", {}).get("output_data", state_dict),
+        }, updated_state
+
+    except (ValueError, ConnectionError, RuntimeError) as error:
+        logger.error("Resume failed: %s", error, exc_info=True)
+        return {"error": "Resume failed", "details": str(error)}, state

job_writer_ui/app.py

@@ -0,0 +1,285 @@
+"""
+Main application entry point for Job Application Writer UI.
+
+This module initializes the Gradio interface, creates UI components,
+and wires event handlers. All business logic is delegated to specialized
+modules (api, ui, utils).
+"""
+
+# Third-party imports
+import gradio as gr
+import os
+
+# Local application imports
+from config import APP_PORT, log_activity
+from static.js import CUSTOM_JS
+from api.workflow import cancel_current_run
+from ui.handlers import (
+    approve_final_content,
+    execute_workflow,
+    handle_feedback,
+    show_chat_interface,
+)
+from utils.content import download_content_as_file, extract_message_content
+from utils.state import reset_session
+from utils.validation import validate_form_inputs
+
+# ============================================================================
+# Gradio UI Definition
+# ============================================================================
+
+# Get the absolute path to the CSS file
+_css_path = os.path.join(os.path.dirname(__file__), "static", "custom.css")
+
+with gr.Blocks(
+    title="Job Application Assistant",
+    theme=gr.themes.Soft(),
+    css_paths=[_css_path],
+    head=f"<script>{CUSTOM_JS}</script>",
+) as demo:
+    state = gr.State(value={})
+
+    # Phase 1: Form Interface
+    with gr.Group(visible=True) as form_phase:
+        with gr.Row(elem_classes=["container", "section"]):
+            with gr.Column(scale=1, elem_classes=["form-container", "card"]):
+                gr.Markdown(
+                    """
+                    <div class="page-header">
+                      <h1 class="page-title">Job Application Writer</h1>
+                      <p class="helper-text">
+                        Generate personalized job application content from a job posting URL.
+                      </p>
+                    </div>
+                    """
+                )
+                job_url = gr.Textbox(
+                    label="Job Posting URL",
+                    placeholder="https://example.com/job-posting",
+                    lines=1,
+                )
+                email = gr.Textbox(
+                    label="Email ID",
+                    placeholder="you@example.com",
+                    lines=1,
+                )
+                resume_url = gr.Textbox(
+                    label="Resume File URL",
+                    placeholder="https://example.com/resume.pdf",
+                    lines=1,
+                    info=(
+                        "URL where your resume has been uploaded "
+                        "(optional - uses default if empty)"
+                    ),
+                )
+                content_type = gr.Dropdown(
+                    choices=["cover_letter", "bullets", "linkedin_note"],
+                    value=None,
+                    label="Content Type",
+                    info="Select the type of content to generate",
+                )
+                form_error = gr.Markdown("", elem_classes=["form-error"])
+                generate_btn = gr.Button(
+                    "Generate Content",
+                    variant="primary",
+                    size="lg",
+                    elem_classes=["btn-primary"],
+                    interactive=False,
+                )
+
+    # Phase 2: Chat Interface
+    with gr.Group(visible=False) as chat_phase:
+        with gr.Row(elem_classes=["container", "section"]):
+            with gr.Column(elem_classes=["chat-phase-container", "card"]):
+                with gr.Row(elem_classes=["chat-header-row"]):
+                    gr.Markdown(
+                        "<div class='chat-page-header'><h1 class='page-title'>Job Application Writer</h1></div>",
+                        elem_classes=["chat-title"],
+                    )
+                    new_session_btn = gr.Button(
+                        "New chat",
+                        variant="primary",
+                        size="sm",
+                        elem_classes=["plus-button"],
+                        min_width=48,
+                    )
+                chatbot = gr.Chatbot(
+                    label="Conversation",
+                    height=500,
+                    elem_classes=["chat-container"],
+                    show_label=False,
+                )
+
+                with gr.Group(
+                    visible=True, elem_classes=["section"]
+                ) as feedback_section:
+                    cancel_run_btn = gr.Button(
+                        "Cancel Run",
+                        variant="stop",
+                        size="sm",
+                        elem_classes=["btn-secondary"],
+                        visible=False,  # Hidden by default, shown when run is active
+                    )
+                    cancel_status_msg = gr.Markdown("", visible=False)
+                    feedback_input = gr.Textbox(
+                        label="Your Feedback",
+                        placeholder=(
+                            "Provide feedback to improve the content, "
+                            "or leave empty to approve..."
+                        ),
+                        lines=3,
+                    )
+                    with gr.Row():
+                        send_btn = gr.Button(
+                            "Send Feedback",
+                            variant="primary",
+                            elem_classes=["btn-primary"],
+                            interactive=False,
+                        )
+                        approve_btn = gr.Button(
+                            "Approve Final Version",
+                            variant="secondary",
+                            elem_classes=["btn-secondary"],
+                            interactive=False,
+                        )
+
+                with gr.Group(
+                    visible=False, elem_classes=["section"]
+                ) as action_buttons:
+                    with gr.Row():
+                        copy_btn = gr.Button(
+                            "Copy to Clipboard",
+                            variant="secondary",
+                            elem_classes=["btn-secondary"],
+                        )
+                        download_btn = gr.Button(
+                            "Download",
+                            variant="secondary",
+                            elem_classes=["btn-secondary"],
+                        )
+                    copy_textbox = gr.Textbox(
+                        label="Content (select and copy manually)",
+                        visible=False,
+                        interactive=True,
+                        lines=10,
+                    )
+
+                download_file = gr.File(label="Download", visible=False)
+
+    # Event Handlers
+    def _validate_and_toggle(job_url_val, content_type_val, resume_url_val, email_val):
+        is_valid, err_md = validate_form_inputs(
+            job_url=job_url_val,
+            content_type=content_type_val,
+            resume_url=resume_url_val,
+            email=email_val,
+        )
+        return gr.update(interactive=is_valid), err_md
+
+    job_url.change(
+        fn=_validate_and_toggle,
+        inputs=[job_url, content_type, resume_url, email],
+        outputs=[generate_btn, form_error],
+    )
+    content_type.change(
+        fn=_validate_and_toggle,
+        inputs=[job_url, content_type, resume_url, email],
+        outputs=[generate_btn, form_error],
+    )
+    resume_url.change(
+        fn=_validate_and_toggle,
+        inputs=[job_url, content_type, resume_url, email],
+        outputs=[generate_btn, form_error],
+    )
+    email.change(
+        fn=_validate_and_toggle,
+        inputs=[job_url, content_type, resume_url, email],
+        outputs=[generate_btn, form_error],
+    )
+
+    generate_btn.click(
+        fn=show_chat_interface,
+        inputs=[chatbot, state, content_type],
+        outputs=[chatbot, state, form_phase, chat_phase, send_btn, approve_btn],
+    ).then(
+        fn=execute_workflow,
+        inputs=[job_url, content_type, resume_url, chatbot, state],
+        outputs=[chatbot, state, send_btn, approve_btn, cancel_run_btn],
+    )
+
+    def handle_cancel_run(current_state):
+        """Handle cancel run button click."""
+        # Ensure we have a dict and not None
+        if not current_state:
+            current_state = {}
+
+        result = cancel_current_run(current_state)
+        status = result.get("status", "error")
+        message = result.get("message", "")
+
+        # Update state with result (preserve existing state keys, update with result)
+        updated_state = current_state.copy()
+        updated_state.update(result)
+
+        # Hide button on success, show status message
+        if status == "cancelled":
+            return (
+                updated_state,  # Updated state
+                gr.update(visible=False),  # Hide cancel button
+                gr.update(visible=True, value=f"✓ {message}"),  # Show success message
+            )
+        else:
+            # Show error message but keep button visible
+            return (
+                current_state,  # Keep current state on error
+                gr.update(visible=True),  # Keep button visible
+                gr.update(visible=True, value=f"⚠ {message}"),  # Show error message
+            )
+
+    cancel_run_btn.click(
+        fn=handle_cancel_run,
+        inputs=[state],
+        outputs=[state, cancel_run_btn, cancel_status_msg],
+    )
+
+    send_btn.click(
+        fn=handle_feedback,
+        inputs=[chatbot, feedback_input, state],
+        outputs=[chatbot, feedback_input, state, cancel_run_btn],
+    )
+
+    approve_btn.click(
+        fn=approve_final_content,
+        inputs=[chatbot, state],
+        outputs=[chatbot, feedback_section, action_buttons],
+    )
+
+    copy_btn.click(
+        fn=extract_message_content,
+        inputs=[chatbot],
+        outputs=[copy_textbox],
+    ).then(
+        lambda: gr.update(visible=True),
+        outputs=[copy_textbox],
+    )
+
+    download_btn.click(
+        fn=download_content_as_file,
+        inputs=[chatbot, state],
+        outputs=[download_file],
+    )
+
+    new_session_btn.click(
+        fn=reset_session,
+        inputs=None,
+        outputs=[form_phase, chat_phase, chatbot, state],
+    )
+
+    demo.queue(max_size=10, default_concurrency_limit=2)
+
+
+# Application Entry Point
+
+if __name__ == "__main__":
+    log_activity("Application started")
+    demo.launch(server_name="0.0.0.0", server_port=APP_PORT, theme=gr.themes.Ocean())

job_writer_ui/config.py

@@ -0,0 +1,80 @@
+"""
+Configuration module for Job Application Writer UI.
+
+This module handles:
+- Logging configuration
+- Environment variable loading
+- Application constants
+- LangGraph client initialization
+"""
+
+import logging
+import os
+from typing import Optional
+
+from dotenv import load_dotenv
+from langgraph_sdk import get_sync_client
+
+# Logging configuration
+logging.basicConfig(
+    level=logging.INFO, format="%(asctime)s - %(name)s - %(levelname)s - %(message)s"
+)
+logger = logging.getLogger(__name__)
+
+# File handler for logging to file
+log_file_path = os.path.join(
+    os.path.dirname(os.path.abspath(__file__)), "..", "logs", "app.log"
+)
+file_handler = logging.FileHandler(log_file_path)
+file_handler.setLevel(logging.INFO)
+file_handler.setFormatter(
+    logging.Formatter("%(asctime)s - %(name)s - %(levelname)s - %(message)s")
+)
+logger.addHandler(file_handler)
+
+
+def log_activity(message: str, **kwargs):
+    """Log a structured activity message.
+
+    Args:
+        message: Main log message.
+        **kwargs: Additional context such as thread_id, run_id, etc.
+    """
+    if kwargs:
+        context = " | ".join(f"{key}={value}" for key, value in kwargs.items())
+        logger.info(f"{message} | {context}")
+    else:
+        logger.info(message)
+
+
+# Load environment variables
+load_dotenv()
+
+# Configuration constants
+ASSISTANT_ID = os.getenv("ASSISTANT_ID", "job_app_graph")
+LANGGRAPH_API_URL = os.getenv(
+    "LANGGRAPH_API_URL", "https://rishabh2095-agentworkflowjobapplications.hf.space"
+).rstrip("/")
+LANGGRAPH_API_KEY: Optional[str] = os.getenv("LANGGRAPH_API_KEY")
+APP_PORT = int(os.getenv("APP_PORT", "7865"))
+
+# Default resume path
+DEFAULT_RESUME_PATH = (
+    "https://huggingface.co/datasets/Rishabh2095/"
+    "resume-file-dataset/resolve/main/resume.pdf"
+)
+
+# Initialize LangGraph client
+try:
+    LANGGRAPH_CLIENT = get_sync_client(url=LANGGRAPH_API_URL, api_key=LANGGRAPH_API_KEY)
+    logger.info(
+        "LangGraph client initialized successfully with URL: %s", LANGGRAPH_API_URL
+    )
+except (ValueError, ConnectionError) as error:
+    logger.error(
+        "Failed to initialize LangGraph client: %s. "
+        "Check that LANGGRAPH_API_URL (%s) is correct and the server is running.",
+        error,
+        LANGGRAPH_API_URL,
+    )
+    raise

job_writer_ui/requirements.txt

@@ -0,0 +1,5 @@
+gradio>=4.0.0
+requests>=2.31.0
+python-dotenv>=1.0.0
+langgraph-sdk>=0.0.34
+pydantic>=2.0.0

job_writer_ui/static/__init__.py

@@ -0,0 +1,10 @@
+"""
+Static assets module for Job Application Writer UI.
+
+This package provides JavaScript constants for interactive features.
+CSS is now loaded from static/custom.css file via Gradio's css_paths.
+"""
+
+from static.js import CUSTOM_JS
+
+__all__ = ["CUSTOM_JS"]

job_writer_ui/static/custom.css

@@ -0,0 +1,281 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+    --container-max-width: 64rem;
+    --page-padding: 1.5rem;
+    --card-padding: 2rem;
+    --bg-page: #F3F4F6;
+    --bg-card: #FFFFFF;
+    --text-primary: #0F172A;
+    --text-secondary: #475569;
+    --helper: #6B7280;
+    --brand: #5B5CE2;
+}
+
+html,
+body {
+    height: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: var(--bg-page) !important;
+    color: var(--text-primary) !important;
+}
+
+.gradio-container {
+    min-height: 100vh !important;
+    width: 100vw !important;
+    background-color: var(--bg-page) !important;
+    margin: 0 !important;
+    padding: 2rem 0 !important;
+}
+
+.container {
+    max-width: var(--container-max-width);
+    margin: 0 auto;
+    padding-inline: var(--page-padding);
+}
+
+.page-header {
+    padding: 2rem 0 1rem;
+}
+
+.chat-page-header {
+    width: 100%;
+    text-align: center;
+    padding: 0 0 0.5rem;
+}
+
+.page-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.card {
+    background: var(--bg-card);
+    border-radius: 0.75rem;
+    padding: var(--card-padding);
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+}
+
+.section {
+    margin-top: 2rem;
+}
+
+.section-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+.helper-text {
+    font-size: 0.875rem;
+    color: var(--helper);
+}
+
+/* Hide Chatbot toolbar widgets (top-right icons) */
+.gradio-chatbot .toolbar,
+.gradio-chatbot button[aria-label*="Share"],
+.gradio-chatbot button[title*="Share"],
+.gradio-chatbot button[aria-label*="Download"],
+.gradio-chatbot button[title*="Download"],
+.gradio-chatbot button[aria-label*="Clear"],
+.gradio-chatbot button[title*="Clear"],
+.gradio-chatbot button[aria-label*="Fullscreen"],
+.gradio-chatbot button[title*="Fullscreen"] {
+    display: none !important;
+}
+
+.btn-primary button {
+    background: var(--brand) !important;
+    color: #FFFFFF !important;
+    border-color: var(--brand) !important;
+}
+
+.btn-secondary button {
+    background: transparent !important;
+    color: var(--brand) !important;
+    border-color: var(--brand) !important;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding-inline: 1rem;
+    }
+
+    .page-title {
+        font-size: 1.75rem;
+    }
+}
+
+@media (max-width: 640px) {
+    #fab {
+        bottom: 1.5rem;
+        right: 1.5rem;
+    }
+}
+
+* {
+    font-family: 'Inter', sans-serif;
+}
+
+.form-container {
+    max-width: 800px !important;
+    width: 90% !important;
+    margin: 3rem auto !important;
+    padding: 3rem !important;
+    background: #ffffff !important;
+    border-radius: 12px !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+}
+
+.chat-container {
+    height: 600px;
+}
+
+.chat-phase-header {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    padding: 1.5rem 0 !important;
+    margin-bottom: 1rem !important;
+}
+
+.chat-phase-header h3 {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-family: 'Inter', sans-serif !important;
+    font-size: 1.5rem !important;
+    font-weight: 600 !important;
+}
+
+.chat-phase-container {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    min-height: 100vh !important;
+    padding: 2rem 0 !important;
+}
+
+[data-testid="bot"] .markdown,
+[data-testid="user"] .markdown,
+.message-wrap .markdown {
+    padding: 1rem !important;
+    margin: 0.5rem 0 !important;
+}
+
+.gradio-chatbot {
+    margin: 1rem 0 !important;
+}
+
+.primary-button {
+    background-color: #4f46e5;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.primary-button:hover {
+    background-color: #4338ca;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.copy-message-btn {
+    background: transparent !important;
+    border: 1px solid #4f46e5 !important;
+    color: #4f46e5 !important;
+    padding: 0.25rem 0.75rem !important;
+    border-radius: 4px !important;
+    font-size: 0.75rem !important;
+    cursor: pointer !important;
+    margin: 0 !important;
+    z-index: 100 !important;
+}
+
+.copy-message-btn:hover {
+    background: #4f46e5 !important;
+    color: white !important;
+}
+
+.copy-btn-wrapper {
+    position: absolute !important;
+    bottom: 8px !important;
+    right: 8px !important;
+    z-index: 100 !important;
+    margin-left: 12px !important;
+}
+
+.message-content-wrapper {
+    padding-right: 80px !important;
+    margin-bottom: 8px !important;
+}
+
+[data-testid="bot"],
+[data-testid="user"],
+.message-wrap {
+    position: relative !important;
+    min-height: 40px;
+    padding-bottom: 40px !important;
+}
+
+.chat-header-row {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    margin-bottom: 1rem !important;
+    gap: 1rem !important;
+}
+
+.chat-header-row button.plus-button {
+    flex: 0 0 32px !important;
+}
+
+.chat-title {
+    margin: 0 !important;
+    flex: 1 !important;
+}
+
+.plus-button {
+    min-width: 48px !important;
+    min-height: 48px !important;
+    padding: 0 14px !important;
+    border-radius: 9999px !important;
+    background-color: var(--brand) !important;
+    color: white !important;
+    border: none !important;
+    font-size: 0.875rem !important;
+    font-weight: 600 !important;
+    line-height: 1 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer !important;
+    transition: background-color 0.2s ease !important;
+    flex-shrink: 0 !important;
+    flex-grow: 0 !important;
+    box-sizing: border-box !important;
+}
+
+.plus-button:hover {
+    background-color: #4338ca !important;
+}
+
+.gradio-chatbot button[title*="Copy"],
+.gradio-chatbot button[aria-label*="Copy"],
+.message-wrap button[title*="Copy"],
+.message-wrap button[aria-label*="Copy"]:not(.copy-message-btn) {
+    display: none !important;
+}

job_writer_ui/static/js.py

@@ -0,0 +1,176 @@
+"""
+JavaScript code for interactive features.
+
+This module contains custom JavaScript for adding copy buttons
+to each chat message.
+"""
+
+CUSTOM_JS = """
+(function() {
+    'use strict';
+    
+    var processedIds = new Set();
+    
+    function addCopyButtons() {
+        var messages = document.querySelectorAll('[data-testid="bot"], [data-testid="user"], .message-wrap');
+        
+        messages.forEach(function(messageEl) {
+            var messageId = messageEl.getAttribute('data-testid') || messageEl.className || messageEl.id || messageEl.outerHTML.substring(0, 100);
+            
+            if (processedIds.has(messageId)) {
+                return;
+            }
+            
+            if (messageEl.querySelector('.copy-message-btn')) {
+                processedIds.add(messageId);
+                return;
+            }
+            
+            var parentContainer = messageEl.closest('.message, .message-wrap, [class*="message"]');
+            if (parentContainer && parentContainer.querySelector('.copy-message-btn')) {
+                processedIds.add(messageId);
+                return;
+            }
+            
+            var messageContent = messageEl.querySelector('.markdown, .message-content, [data-testid="bot"] .markdown, [data-testid="user"] .markdown');
+            if (!messageContent) {
+                return;
+            }
+            
+            // Only add copy button to bot messages (draft/final content), not user messages or system messages
+            var isBotMessage = messageEl.hasAttribute('data-testid') && messageEl.getAttribute('data-testid') === 'bot';
+            var isUserMessage = messageEl.hasAttribute('data-testid') && messageEl.getAttribute('data-testid') === 'user';
+            
+            // Skip if it's a user message or if message doesn't contain draft/final content
+            if (isUserMessage) {
+                return;
+            }
+            
+            // Check if message contains draft/final content markers
+            var messageText = messageContent.innerText || messageContent.textContent || '';
+            var hasDraftContent = messageText.includes('**Draft**') || 
+                                  messageText.includes('**Final Version**') || 
+                                  messageText.includes('**Approved**') ||
+                                  (isBotMessage && messageText.trim().length > 50);
+            
+            if (!hasDraftContent) {
+                return;
+            }
+            
+            var existingButtons = messageEl.querySelectorAll('button[title*="Copy"], button[title*="copy"], button[aria-label*="Copy" i], button[aria-label*="copy" i], .copy-message-btn');
+            if (existingButtons.length > 0) {
+                processedIds.add(messageId);
+                return;
+            }
+            
+            var parent = messageEl.parentElement;
+            while (parent && parent !== document.body) {
+                var parentButtons = parent.querySelectorAll('button[title*="Copy"], button[title*="copy"], button[aria-label*="Copy" i]');
+                if (parentButtons.length > 0 && parent.classList.contains('message')) {
+                    processedIds.add(messageId);
+                    return;
+                }
+                parent = parent.parentElement;
+            }
+            
+            var copyBtn = document.createElement('button');
+            copyBtn.className = 'copy-message-btn';
+            copyBtn.type = 'button';
+            copyBtn.textContent = 'Copy';
+            copyBtn.setAttribute('aria-label', 'Copy message content');
+            
+            copyBtn.onclick = function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                
+                var textToCopy = messageContent.innerText || messageContent.textContent || '';
+                textToCopy = textToCopy.trim();
+                
+                if (!textToCopy) {
+                    return;
+                }
+                
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                    navigator.clipboard.writeText(textToCopy).then(function() {
+                        copyBtn.textContent = 'Copied!';
+                        setTimeout(function() {
+                            copyBtn.textContent = 'Copy';
+                        }, 2000);
+                    }).catch(function() {
+                        fallbackCopy(textToCopy, copyBtn);
+                    });
+                } else {
+                    fallbackCopy(textToCopy, copyBtn);
+                }
+            };
+            
+            var buttonWrapper = document.createElement('div');
+            buttonWrapper.className = 'copy-btn-wrapper';
+            buttonWrapper.style.cssText = 'position: absolute; bottom: 8px; right: 8px; z-index: 10; margin-left: 12px;';
+            buttonWrapper.appendChild(copyBtn);
+            
+            // Add spacing wrapper around message content
+            if (!messageContent.classList.contains('message-content-wrapper')) {
+                messageContent.classList.add('message-content-wrapper');
+                messageContent.style.paddingRight = '80px';
+                messageContent.style.marginBottom = '8px';
+            }
+            
+            var container = messageEl;
+            if (window.getComputedStyle(container).position === 'static') {
+                container.style.position = 'relative';
+            }
+            
+            container.appendChild(buttonWrapper);
+            processedIds.add(messageId);
+        });
+    }
+    
+    function fallbackCopy(text, btn) {
+        var textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-9999px';
+        textArea.style.opacity = '0';
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+            document.execCommand('copy');
+            btn.textContent = 'Copied!';
+        } catch (err) {
+            btn.textContent = 'Copy failed';
+        }
+        document.body.removeChild(textArea);
+        setTimeout(function() {
+            btn.textContent = 'Copy';
+        }, 2000);
+    }
+    
+    function initCopyButtons() {
+        addCopyButtons();
+    }
+    
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initCopyButtons);
+    } else {
+        initCopyButtons();
+    }
+    
+    var observer = new MutationObserver(function(mutations) {
+        var shouldUpdate = false;
+        mutations.forEach(function(mutation) {
+            if (mutation.addedNodes.length > 0) {
+                shouldUpdate = true;
+            }
+        });
+        if (shouldUpdate) {
+            setTimeout(addCopyButtons, 300);
+        }
+    });
+    
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+})();
+"""

job_writer_ui/ui/__init__.py

@@ -0,0 +1,21 @@
+"""
+UI module for Gradio interface components and handlers.
+
+This package provides:
+- UI component helpers
+- Event handlers for user interactions
+"""
+
+from ui.handlers import (
+    approve_final_content,
+    execute_workflow,
+    handle_feedback,
+    show_chat_interface,
+)
+
+__all__ = [
+    "approve_final_content",
+    "execute_workflow",
+    "handle_feedback",
+    "show_chat_interface",
+]

job_writer_ui/ui/handlers.py

@@ -0,0 +1,321 @@
+"""
+UI event handlers.
+
+This module provides handler functions that wrap workflow functions
+with UI logic for chat interface formatting and event handling.
+
+It is written against the Gradio Chatbot \"messages\" format, but remains
+backwards-compatible with legacy tuple-style histories.
+"""
+
+from typing import Any, Dict, List, Tuple, Union
+
+import gradio as gr
+
+from api.workflow import resume_with_feedback, start_generation
+from utils.formatters import extract_content_from_result, format_draft_message
+
+# Error message templates
+ERROR_MESSAGE_TEMPLATE = (
+    "Error: {error_msg}\n\nPlease try again or start a new session."
+)
+UNEXPECTED_ERROR_MESSAGE = "Error: Unexpected response format. Please try again."
+
+# Processing messages
+PROCESSING_MESSAGE = "Analyzing job posting and resume. This will take a moment..."
+FEEDBACK_PROCESSING_MESSAGE = "Processing your feedback and revising the content..."
+APPROVED_MESSAGE = "Content approved."
+
+
+ChatHistory = List[Any]
+
+
+def _to_messages(history: Union[None, ChatHistory]) -> ChatHistory:
+    """
+    Normalize chat history to Gradio \"messages\" format:
+    List[Dict[str, Any]] with \"role\" and \"content\" keys.
+
+    Supports legacy tuple/list format: [[user, assistant], ...].
+    """
+    if not history:
+        return []
+
+    # Already messages format
+    if isinstance(history[0], dict) and "role" in history[0]:
+        return history
+
+    # Legacy [[user, assistant], ...] format
+    messages: ChatHistory = []
+    for pair in history:
+        if isinstance(pair, (list, tuple)) and len(pair) == 2:
+            user, assistant = pair
+            if user:
+                messages.append({"role": "user", "content": user})
+            if assistant:
+                messages.append({"role": "assistant", "content": assistant})
+    return messages
+
+
+def _replace_last_assistant_content(
+    messages: ChatHistory, new_content: str
+) -> ChatHistory:
+    """
+    Replace the content of the last assistant message in a messages-style history.
+    If none is found, append a new assistant message.
+    """
+    if not messages:
+        return [{"role": "assistant", "content": new_content}]
+
+    for idx in range(len(messages) - 1, -1, -1):
+        msg = messages[idx]
+        if isinstance(msg, dict) and msg.get("role") == "assistant":
+            updated = messages.copy()
+            updated[idx] = {"role": "assistant", "content": new_content}
+            return updated
+
+    # If we didn't find an assistant message, append one
+    return messages + [{"role": "assistant", "content": new_content}]
+
+
+def _get_last_assistant_content(messages: ChatHistory) -> str:
+    """
+    Get the content of the last assistant message from either messages-style
+    or legacy tuple-style history.
+    """
+    if not messages:
+        return ""
+
+    # Messages format
+    if isinstance(messages[-1], dict):
+        for msg in reversed(messages):
+            if isinstance(msg, dict) and msg.get("role") == "assistant":
+                return msg.get("content") or ""
+        return ""
+
+    # Legacy [[user, assistant], ...] format
+    last = messages[-1]
+    if isinstance(last, (list, tuple)) and len(last) == 2:
+        return last[1] or ""
+    return ""
+
+
+def show_chat_interface(
+    chat_history: ChatHistory, state: Dict[str, Any], content_type: str
+) -> Tuple[ChatHistory, Dict[str, Any], Dict, Dict, Dict, Dict]:
+    """
+    Show chat interface and display processing message.
+
+    Args:
+        chat_history: Current chat history
+        state: Current state dict
+        content_type: Type of content to generate
+
+    Returns:
+        Tuple of (updated_chat_history with processing message, updated_state,
+                 form_visibility, chat_visibility, send_btn_update, approve_btn_update)
+    """
+    # Normalize to messages format and add processing message
+    messages = _to_messages(chat_history)
+    new_history: ChatHistory = messages + [
+        {"role": "assistant", "content": PROCESSING_MESSAGE}
+    ]
+
+    # Store content_type in state
+    updated_state = state.copy()
+    updated_state["content_type"] = content_type
+
+    # Transition to chat phase
+    form_visibility = gr.update(visible=False)
+    chat_visibility = gr.update(visible=True)
+
+    # Disable feedback + approve while generation runs
+    send_btn_update = gr.update(interactive=False)
+    approve_btn_update = gr.update(interactive=False)
+
+    return (
+        new_history,
+        updated_state,
+        form_visibility,
+        chat_visibility,
+        send_btn_update,
+        approve_btn_update,
+    )
+
+
+def execute_workflow(
+    job_url: str,
+    content_type: str,
+    resume_url: str,
+    chat_history: ChatHistory,
+    state: Dict[str, Any],
+) -> Tuple[ChatHistory, Dict[str, Any], Dict, Dict, Dict]:
+    """
+    Execute workflow and update chat with response.
+
+    Args:
+        job_url: Job posting URL
+        content_type: Type of content to generate
+        resume_url: Resume file URL (optional)
+        chat_history: Current chat history (with processing message)
+        state: Current state dict
+
+    Returns:
+        Tuple of (updated_chat_history, updated_state, send_btn_update, approve_btn_update, cancel_btn_update)
+    """
+    messages = _to_messages(chat_history)
+
+    # Call start_generation
+    result_dict, updated_state = start_generation(
+        job_url, content_type, state, resume_url
+    )
+
+    # Convert response to chat format
+    new_history = messages.copy()
+    if result_dict.get("error"):
+        error_msg = result_dict.get(
+            "details", result_dict.get("error", "Unknown error")
+        )
+        error_content = ERROR_MESSAGE_TEMPLATE.format(error_msg=error_msg)
+        new_history = _replace_last_assistant_content(new_history, error_content)
+        send_btn_update = gr.update(interactive=False)
+        approve_btn_update = gr.update(interactive=False)
+    elif result_dict.get("status") == "interrupted":
+        draft = result_dict.get("draft", "")
+        formatted_draft = format_draft_message(draft, status="draft")
+        new_history = _replace_last_assistant_content(new_history, formatted_draft)
+        send_btn_update = gr.update(interactive=True)
+        approve_btn_update = gr.update(interactive=True)
+    elif result_dict.get("status") == "completed":
+        result = result_dict.get("result", "")
+        content = extract_content_from_result(result)
+        formatted_content = format_draft_message(content, status="final")
+        new_history = _replace_last_assistant_content(new_history, formatted_content)
+        send_btn_update = gr.update(interactive=True)
+        approve_btn_update = gr.update(interactive=True)
+    else:
+        new_history = _replace_last_assistant_content(
+            new_history, UNEXPECTED_ERROR_MESSAGE
+        )
+        send_btn_update = gr.update(interactive=False)
+        approve_btn_update = gr.update(interactive=False)
+
+    # Make cancel button visible if there's a run_id in state
+    cancel_btn_update = gr.update(visible=bool(updated_state.get("run_id")))
+
+    return (
+        new_history,
+        updated_state,
+        send_btn_update,
+        approve_btn_update,
+        cancel_btn_update,
+    )
+
+
+def handle_feedback(
+    chat_history: ChatHistory, feedback_text: str, state: Dict[str, Any]
+) -> Tuple[ChatHistory, str, Dict[str, Any], Dict]:
+    """
+    Handle user feedback and update chat.
+
+    Args:
+        chat_history: Current chat history
+        feedback_text: User feedback text
+        state: Current state dict
+
+    Returns:
+        Tuple of (updated_chat_history, cleared_feedback, updated_state, cancel_btn_update)
+    """
+    messages = _to_messages(chat_history)
+
+    # Step 1: Add user feedback message
+    feedback_content = feedback_text.strip()
+    if feedback_content:
+        messages = messages + [{"role": "user", "content": feedback_content}]
+
+    # Step 2: Add processing message
+    new_history = messages + [
+        {"role": "assistant", "content": FEEDBACK_PROCESSING_MESSAGE}
+    ]
+
+    # Step 3: Call resume_with_feedback (preserves existing function)
+    result_dict, updated_state = resume_with_feedback(feedback_text, state)
+
+    # Step 4: Convert response to chat format
+    if result_dict.get("error"):
+        error_msg = result_dict.get(
+            "details", result_dict.get("error", "Unknown error")
+        )
+        error_content = ERROR_MESSAGE_TEMPLATE.format(error_msg=error_msg)
+        new_history = _replace_last_assistant_content(new_history, error_content)
+    elif result_dict.get("status") == "completed":
+        result = result_dict.get("result", "")
+        content = extract_content_from_result(result)
+        formatted_content = format_draft_message(content, status="final")
+        new_history = _replace_last_assistant_content(new_history, formatted_content)
+    else:
+        new_history = _replace_last_assistant_content(
+            new_history, UNEXPECTED_ERROR_MESSAGE
+        )
+
+    # Step 5: Clear feedback input
+    cleared_feedback = ""
+
+    # Update cancel button visibility based on whether there's an active run_id
+    cancel_btn_update = gr.update(visible=bool(updated_state.get("run_id")))
+
+    return new_history, cleared_feedback, updated_state, cancel_btn_update
+
+
+def approve_final_content(
+    chat_history: ChatHistory, state: Dict[str, Any]
+) -> Tuple[ChatHistory, Dict, Dict]:
+    """
+    Mark content as approved and show confirmation.
+
+    Args:
+        chat_history: Current chat history
+        state: Current state dict
+
+    Returns:
+        Tuple of (updated_chat_history, feedback_visibility, button_visibility)
+    """
+    # Content extraction markers
+    content_start_marker = "---\n\n"
+    content_end_marker = "\n\n---"
+
+    messages = _to_messages(chat_history)
+
+    # Extract last assistant message and mark as approved
+    last_message = _get_last_assistant_content(messages)
+    if last_message:
+        # Replace status with "Approved" if it's a draft message
+        if "**Draft**" in last_message or "**Final Version**" in last_message:
+            content_start = last_message.find(content_start_marker) + len(
+                content_start_marker
+            )
+            content_end = last_message.rfind(content_end_marker)
+            if (
+                content_start > len(content_start_marker) - 1
+                and content_end > content_start
+            ):
+                content = last_message[content_start:content_end]
+                approved_message = format_draft_message(content, status="approved")
+                new_history = _replace_last_assistant_content(
+                    messages, approved_message
+                )
+            else:
+                new_history = messages + [
+                    {"role": "assistant", "content": APPROVED_MESSAGE}
+                ]
+        else:
+            new_history = messages + [
+                {"role": "assistant", "content": APPROVED_MESSAGE}
+            ]
+    else:
+        new_history = messages + [{"role": "assistant", "content": APPROVED_MESSAGE}]
+
+    # Hide feedback input, show action buttons
+    feedback_visibility = gr.update(visible=False)
+    button_visibility = gr.update(visible=True)
+
+    return new_history, feedback_visibility, button_visibility

job_writer_ui/utils/__init__.py

@@ -0,0 +1,20 @@
+"""
+Utility modules for Job Application Writer UI.
+
+This package provides:
+- Message formatting utilities
+- Content extraction and file operations
+- State management helpers
+"""
+
+from utils.content import download_content_as_file, extract_message_content
+from utils.formatters import extract_content_from_result, format_draft_message
+from utils.state import reset_session
+
+__all__ = [
+    "download_content_as_file",
+    "extract_content_from_result",
+    "extract_message_content",
+    "format_draft_message",
+    "reset_session",
+]

job_writer_ui/utils/content.py

@@ -0,0 +1,128 @@
+"""
+Content extraction and file operations.
+
+This module provides functions for extracting content from chat history
+and creating downloadable files.
+"""
+
+import tempfile
+from datetime import datetime
+from typing import Any, Dict, List
+
+# Content type mapping for file naming
+CONTENT_TYPE_MAP = {
+    "cover_letter": "cover_letter",
+    "bullets": "bullets",
+    "linkedin_note": "linkedin_note",
+}
+
+# Default content type
+DEFAULT_CONTENT_TYPE = "content"
+
+# Content extraction markers
+CONTENT_START_MARKER = "---\n\n"
+CONTENT_END_MARKER = "\n\n---"
+
+# Default content fallback
+DEFAULT_CONTENT = "No content available."
+
+
+def _get_last_assistant_message_content(
+    chat_history: List[Any], message_index: int = -1
+) -> str:
+    """
+    Get assistant message content from either messages-style or
+    legacy tuple-style chat history.
+    """
+    if not chat_history:
+        return ""
+
+    # Messages format: list of dicts with role/content
+    if isinstance(chat_history[0], dict):
+        # Use explicit index if provided, otherwise search from the end
+        history = chat_history
+        if 0 <= message_index < len(history):
+            candidates = [history[message_index]]
+        else:
+            candidates = reversed(history)
+        for msg in candidates:
+            if isinstance(msg, dict) and msg.get("role") == "assistant":
+                return msg.get("content") or ""
+        return ""
+
+    # Legacy [[user, assistant], ...] format
+    try:
+        target_message = (
+            chat_history[message_index][1]
+            if chat_history[message_index][1]
+            else ""
+        )
+    except (IndexError, KeyError, TypeError):
+        return ""
+
+    return target_message or ""
+
+
+def extract_message_content(chat_history: List[Any], message_index: int = -1) -> str:
+    """
+    Extract content from a specific message for clipboard.
+
+    Args:
+        chat_history: Current chat history
+        message_index: Index of message to extract (-1 for last message)
+
+    Returns:
+        Content string extracted from message
+    """
+    target_message = _get_last_assistant_message_content(
+        chat_history, message_index=message_index
+    )
+    if not target_message:
+        return ""
+
+    # Extract content between markdown separators if present
+    content_start = target_message.find(CONTENT_START_MARKER) + len(
+        CONTENT_START_MARKER
+    )
+    content_end = target_message.rfind(CONTENT_END_MARKER)
+
+    if content_start > len(CONTENT_START_MARKER) - 1 and content_end > content_start:
+        return target_message[content_start:content_end]
+
+    return target_message
+
+
+def download_content_as_file(chat_history: List, state: Dict) -> str:
+    """
+    Create downloadable file from last message content.
+
+    Args:
+        chat_history: Current chat history
+        state: Current state dict (contains content_type)
+
+    Returns:
+        Path to temporary file created for download
+
+    Raises:
+        OSError: If file creation fails
+    """
+    content = extract_message_content(chat_history)
+    if not content:
+        content = DEFAULT_CONTENT
+
+    # Get content_type from state
+    content_type = state.get("content_type", DEFAULT_CONTENT_TYPE)
+
+    # Generate suffix based on content type
+    type_str = CONTENT_TYPE_MAP.get(content_type, DEFAULT_CONTENT_TYPE)
+    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+    suffix = f"_{type_str}_{timestamp}.txt"
+
+    # Create temporary file with descriptive suffix
+    try:
+        temp_file = tempfile.NamedTemporaryFile(mode="w", suffix=suffix, delete=False)
+        temp_file.write(content)
+        temp_file.close()
+        return temp_file.name
+    except OSError as error:
+        raise OSError(f"Failed to create download file: {error}") from error

job_writer_ui/utils/formatters.py

@@ -0,0 +1,82 @@
+"""
+Message formatting utilities.
+
+This module provides functions for formatting content and messages
+for display in the chat interface.
+"""
+
+from typing import Any
+
+# Status label mapping
+STATUS_LABELS = {
+    "draft": "Draft",
+    "final": "Final Version",
+    "approved": "Approved",
+}
+
+# Default status
+DEFAULT_STATUS = "Draft"
+
+# Message templates
+FEEDBACK_PROMPT = "*You can provide feedback below or approve this version.*"
+
+
+def format_draft_message(draft_content: str, status: str = DEFAULT_STATUS) -> str:
+    """
+    Format draft content for chat display.
+
+    Args:
+        draft_content: The draft content to display
+        status: Status label ("draft", "final", "approved")
+
+    Returns:
+        Formatted message string with markdown formatting
+    """
+    status_label = STATUS_LABELS.get(status, DEFAULT_STATUS)
+
+    return f"""**{status_label}**
+
+---
+
+{draft_content}
+
+---
+
+{FEEDBACK_PROMPT}"""
+
+
+def extract_content_from_result(result: Any) -> str:
+    """
+    Extract content string from result dict or object.
+
+    Attempts to extract content from various result structures
+    returned by the workflow.
+
+    Args:
+        result: Result dict or string from workflow
+
+    Returns:
+        Content string extracted from result structure
+    """
+    if isinstance(result, str):
+        return result
+
+    if isinstance(result, dict):
+        # Try common result keys
+        if "content" in result:
+            return str(result["content"])
+
+        if "text" in result:
+            return str(result["text"])
+
+        if "output_data" in result:
+            output = result["output_data"]
+            if isinstance(output, str):
+                return output
+            if isinstance(output, dict) and "content" in output:
+                return str(output["content"])
+
+        # Return string representation of entire dict if no specific key found
+        return str(result)
+
+    return str(result)

job_writer_ui/utils/state.py

@@ -0,0 +1,25 @@
+"""
+State management helpers.
+
+This module provides functions for managing application state,
+including session resets and state initialization.
+"""
+
+from typing import Dict, List, Tuple
+
+import gradio as gr
+
+
+def reset_session() -> Tuple[Dict, Dict, List, Dict]:
+    """
+    Reset UI to form phase and clear state.
+
+    Returns:
+        Tuple of (form_visibility, chat_visibility, empty_chat_history, empty_state)
+    """
+    form_visibility = gr.update(visible=True)
+    chat_visibility = gr.update(visible=False)
+    empty_history: List = []
+    empty_state: Dict = {}
+
+    return form_visibility, chat_visibility, empty_history, empty_state

job_writer_ui/utils/validation.py

@@ -0,0 +1,56 @@
+"""Form input validation.
+
+Uses Pydantic to validate user inputs in the Gradio form.
+"""
+
+from __future__ import annotations
+
+from typing import Optional
+
+from pydantic import BaseModel, EmailStr, HttpUrl, ValidationError
+
+
+class JobWriterForm(BaseModel):
+    job_url: HttpUrl
+    content_type: str
+    resume_url: Optional[HttpUrl] = None
+    email: Optional[EmailStr] = None
+
+
+def validate_form_inputs(
+    job_url: str | None,
+    content_type: str | None,
+    resume_url: str | None,
+    email: str | None,
+) -> tuple[bool, str]:
+    """Validate inputs and return (is_valid, error_message_markdown)."""
+
+    # Normalize empties
+    job_url = (job_url or "").strip()
+    content_type = (content_type or "").strip()
+    resume_url = (resume_url or "").strip()
+    email = (email or "").strip()
+
+    # Enablement rules: job_url + content_type required.
+    if not job_url or not content_type:
+        return False, ""
+
+    # Pydantic validation for requested fields
+    try:
+        JobWriterForm(
+            job_url=job_url,
+            content_type=content_type,
+            resume_url=resume_url or None,
+            email=email or None,
+        )
+    except ValidationError as exc:
+        # Show first couple of errors as a compact list.
+        items = []
+        for err in exc.errors()[:3]:
+            loc = ".".join(str(p) for p in err.get("loc", []))
+            msg = err.get("msg", "Invalid value")
+            items.append(f"- **{loc}**: {msg}")
+        details = "\n".join(items) if items else "- Invalid input"
+        return False, f"**Please fix the following:**\n{details}"
+
+    return True, ""