From ea854a295f539d08bd5cbb7260f5edf6e0eddfb2 Mon Sep 17 00:00:00 2001
From: Pranav Kaja <balajipranavreddyk@gmail.com>
Date: Thu, 25 Jun 2026 18:35:01 -0400
Subject: [PATCH] feat: add optional web ui and windows start script

---
 PR_DESCRIPTION.md      |   76 +++
 Start-Hiring-Agent.bat |   20 +
 app.py                 |  185 +++++++
 evaluator.py           |    6 +-
 frontend/app.js        |  558 +++++++++++++++++++
 frontend/index.html    |  249 +++++++++
 frontend/style.css     | 1195 ++++++++++++++++++++++++++++++++++++++++
 github.py              |   18 +-
 llm_utils.py           |   10 +-
 models.py              |   33 +-
 pdf.py                 |  100 +++-
 prompt.py              |   12 +-
 requirements.txt       |    1 +
 score.py               |   18 +-
 14 files changed, 2425 insertions(+), 56 deletions(-)
 create mode 100644 PR_DESCRIPTION.md
 create mode 100644 Start-Hiring-Agent.bat
 create mode 100644 app.py
 create mode 100644 frontend/app.js
 create mode 100644 frontend/index.html
 create mode 100644 frontend/style.css

diff --git a/PR_DESCRIPTION.md b/PR_DESCRIPTION.md
new file mode 100644
index 0000000..0040703
--- /dev/null
+++ b/PR_DESCRIPTION.md
@@ -0,0 +1,76 @@
+# Pull Request: Add an optional web UI for the scoring pipeline
+
+> Submit this **after** opening the feature-request issue below and commenting that you're working on it (per CONTRIBUTING.md). Fork `interviewstreet/hiring-agent`, branch off `master`, e.g. `feat/web-ui`.
+
+---
+
+## Suggested issue to open first
+
+**Title:** Optional browser UI for running the scoring pipeline
+
+**Body:**
+The pipeline is currently CLI-only. For users who want to score a resume without the terminal, a thin local web UI would help: drag-and-drop the PDF, pick the model/key in a settings panel, and watch the same pipeline output stream live. It would wrap the existing `score.main()` without changing CLI behavior. Would a self-contained, optional Flask UI be welcome? Happy to implement.
+
+---
+
+## PR title
+
+```
+feat: add optional Flask web UI with live-streamed scoring output
+```
+
+## Summary
+
+Adds an optional browser interface on top of the existing pipeline. It does not change the CLI, the scoring logic, the prompts, or any model behavior. The server simply calls the existing `score.main(pdf_path, api_key, model_name)` and streams its stdout/stderr to the page.
+
+## Motivation
+
+`python score.py <pdf>` is great for developers, but reviewers who just want to score a resume have to use the terminal and edit `.env` to switch models or keys. A small local UI lowers that barrier while reusing the exact same pipeline, so results are identical to the CLI.
+
+## What's included
+
+- `app.py` — a small Flask server:
+  - `GET /` serves the UI.
+  - `POST /api/upload` accepts a PDF plus model/API-key from the settings panel, starts the pipeline on a background thread.
+  - `GET /api/stream/<job_id>` streams pipeline output to the browser over Server-Sent Events, with heartbeats and a clean end-of-stream sentinel.
+  - Friendly handling for an invalid/expired Gemini key and for failed evaluations.
+- `frontend/` — a no-framework UI (`index.html`, `app.js`, `style.css`): drag-and-drop PDF upload, a settings panel (model + API key, stored client-side), session history, and a live output console.
+- `requirements.txt` — adds `flask` (currently imported by the UI but not declared).
+- `Start-Hiring-Agent.bat` — a convenient one-click Windows batch script to activate the environment, start the server, and open the browser.
+
+## What's deliberately unchanged
+
+- No change to `score.py` scoring logic, `prompt.py`/`prompts/` templates, `github.py`, `evaluator.py`, or `models.py` behavior.
+- The CLI (`python score.py <pdf>`) works exactly as before. The UI is opt-in.
+- No new model providers or prompt formatting; provider-agnostic, per CONTRIBUTING.
+
+## How to run
+
+```bash
+pip install -r requirements.txt
+python app.py
+# open http://127.0.0.1:5000, set your model + Gemini key in Settings, drop a PDF
+```
+
+## Testing / smoke checks
+
+- PDF to Markdown, section extraction, GitHub enrichment, and evaluation all run through the unchanged `score.main()`; verified the UI output matches a CLI run on the same resume.
+- Gemini run (`gemini-2.5-flash`): identical category scores via UI and CLI.
+- Verified invalid-key and non-PDF upload paths return clear errors.
+- Formatted with Black (`black .`).
+
+## Notes for reviewers
+
+- The server binds to `127.0.0.1` only and is meant for local use.
+- Uploads go to a temp dir keyed by job id; nothing is committed.
+- If a web UI is out of scope for this project, I'm happy to instead split out just the `requirements.txt` `flask` fix, or move the UI to a `contrib/` or `examples/` folder.
+
+## Checklist
+
+- [ ] Opened/linked a feature-request issue and claimed it
+- [ ] Branched off `master` on my fork
+- [ ] CLI behavior unchanged
+- [ ] `flask` added to `requirements.txt`
+- [ ] Formatted with Black
+- [ ] Smoke-tested at least one full run (Gemini)
+- [ ] Added a screenshot/GIF of the UI to this PR
diff --git a/Start-Hiring-Agent.bat b/Start-Hiring-Agent.bat
new file mode 100644
index 0000000..0f7cd3f
--- /dev/null
+++ b/Start-Hiring-Agent.bat
@@ -0,0 +1,20 @@
+@echo off
+echo Starting Hiring Agent...
+
+:: Activate the virtual environment
+if exist ".venv\Scripts\activate.bat" (
+    call .venv\Scripts\activate.bat
+) else (
+    echo Virtual environment not found. Make sure you ran 'python -m venv .venv' and installed requirements.
+    pause
+    exit /b
+)
+
+:: Wait a second for the server to be ready before opening the browser
+timeout /t 2 /nobreak >nul
+start http://127.0.0.1:5000
+
+:: Run the local web server
+python app.py
+
+pause
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..3379b52
--- /dev/null
+++ b/app.py
@@ -0,0 +1,185 @@
+"""
+Flask web server for the Hiring Agent frontend.
+Provides file upload, settings management, and streams the scoring pipeline output in real-time.
+"""
+
+import os
+import sys
+import json
+import uuid
+import threading
+import queue
+import io
+import contextlib
+import tempfile
+import shutil
+import importlib
+from pathlib import Path
+
+from flask import Flask, request, jsonify, Response, send_from_directory, stream_with_context
+
+app = Flask(__name__, static_folder="frontend", static_url_path="")
+
+UPLOAD_DIR = os.path.join(tempfile.gettempdir(), "hiring_agent_uploads")
+os.makedirs(UPLOAD_DIR, exist_ok=True)
+
+ENV_FILE = os.path.join(os.path.dirname(__file__), ".env")
+
+# All supported Gemini models (from prompt.py)
+GEMINI_MODELS = [
+    "gemini-2.0-flash",
+    "gemini-2.0-flash-lite",
+    "gemini-2.5-pro",
+    "gemini-2.5-flash",
+    "gemini-2.5-flash-lite",
+    "gemini-3.5-flash",
+    "gemini-3.1-flash-lite",
+]
+
+# Store active jobs: job_id -> {"queue": Queue, "status": str, "thread": Thread}
+jobs = {}
+
+class OutputCapture:
+    """Captures both stdout and stderr into a queue for streaming."""
+
+    def __init__(self, output_queue, original_stream, stream_name="stdout"):
+        self.queue = output_queue
+        self.original = original_stream
+        self.stream_name = stream_name
+
+    def write(self, text):
+        if text:
+            self.queue.put(text)
+            try:
+                self.original.write(text)
+            except (UnicodeEncodeError, UnicodeDecodeError):
+                # Windows console (cp1252) can't render emoji — skip it there,
+                # the browser stream still gets the full text via the queue.
+                pass
+
+    def flush(self):
+        self.original.flush()
+
+
+def run_scoring_pipeline(pdf_path, output_queue, api_key, model_name):
+    """Run the scoring pipeline in a thread, capturing all output."""
+    old_stdout = sys.stdout
+    old_stderr = sys.stderr
+
+    sys.stdout = OutputCapture(output_queue, old_stdout, "stdout")
+    sys.stderr = OutputCapture(output_queue, old_stderr, "stderr")
+
+    try:
+        from score import main as score_main
+        score = score_main(pdf_path, api_key=api_key, model_name=model_name)
+        if score is None:
+            output_queue.put("\n❌ Evaluation failed to produce a valid report. (Check rate limits or file quality)\n")
+            output_queue.put("__STATUS__:FAILED")
+        else:
+            output_queue.put("\n✅ Evaluation complete.\n")
+            output_queue.put("__STATUS__:SUCCESS")
+    except Exception as e:
+        error_msg = str(e)
+        if "API_KEY_INVALID" in error_msg or "API key not valid" in error_msg or "400 API key" in error_msg:
+            output_queue.put(f"\n❌ Error: Your Gemini API Key is invalid or expired. Please update it in Settings.\n")
+        else:
+            output_queue.put(f"\n❌ Error: {error_msg}\n")
+        output_queue.put("__STATUS__:FAILED")
+    finally:
+        sys.stdout = old_stdout
+        sys.stderr = old_stderr
+        output_queue.put(None)  # Sentinel: signals end of stream
+
+
+@app.route("/")
+def index():
+    return send_from_directory("frontend", "index.html")
+
+
+# --- Upload & Streaming ---
+
+@app.route("/api/upload", methods=["POST"])
+def upload_resume():
+    """Handle resume PDF upload and start scoring."""
+    if "resume" not in request.files:
+        return jsonify({"error": "No file uploaded"}), 400
+
+    file = request.files["resume"]
+    if file.filename == "":
+        return jsonify({"error": "No file selected"}), 400
+
+    if not file.filename.lower().endswith(".pdf"):
+        return jsonify({"error": "Only PDF files are accepted"}), 400
+
+    # Save file
+    job_id = str(uuid.uuid4())
+    save_dir = os.path.join(UPLOAD_DIR, job_id)
+    os.makedirs(save_dir, exist_ok=True)
+    pdf_path = os.path.join(save_dir, file.filename)
+    file.save(pdf_path)
+
+    # Get local settings from frontend
+    api_key = request.form.get("api_key", "").strip()
+    model_name = request.form.get("model", "gemini-2.5-flash").strip()
+
+    if not api_key:
+        return jsonify({"error": "No API key provided"}), 400
+
+    # Create output queue
+    output_queue = queue.Queue()
+
+    # Start scoring in background thread
+    thread = threading.Thread(
+        target=run_scoring_pipeline,
+        args=(pdf_path, output_queue, api_key, model_name),
+        daemon=True,
+    )
+    jobs[job_id] = {
+        "queue": output_queue,
+        "status": "running",
+        "thread": thread,
+        "pdf_path": pdf_path,
+    }
+    thread.start()
+
+    return jsonify({"job_id": job_id, "filename": file.filename})
+
+
+@app.route("/api/stream/<job_id>")
+def stream_output(job_id):
+    """Stream scoring output as Server-Sent Events."""
+    if job_id not in jobs:
+        return jsonify({"error": "Job not found"}), 404
+
+    def generate():
+        q = jobs[job_id]["queue"]
+        success_flag = False
+        while True:
+            try:
+                msg = q.get(timeout=120)
+                if msg is None:
+                    # End sentinel
+                    yield f"data: {json.dumps({'type': 'done', 'success': success_flag})}\n\n"
+                    break
+                
+                if isinstance(msg, str) and msg.startswith('__STATUS__:'):
+                    success_flag = (msg == '__STATUS__:SUCCESS')
+                    continue
+
+                yield f"data: {json.dumps({'type': 'output', 'text': msg})}\n\n"
+            except queue.Empty:
+                yield f"data: {json.dumps({'type': 'heartbeat'})}\n\n"
+
+    return Response(
+        stream_with_context(generate()),
+        mimetype="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "X-Accel-Buffering": "no",
+            "Connection": "keep-alive",
+        },
+    )
+
+
+if __name__ == "__main__":
+    app.run(host="127.0.0.1", port=5000, debug=False, threaded=True)
diff --git a/evaluator.py b/evaluator.py
index 1f9e91f..01fc3de 100644
--- a/evaluator.py
+++ b/evaluator.py
@@ -14,7 +14,6 @@
     DEFAULT_MODEL,
     MODEL_PARAMETERS,
     MODEL_PROVIDER_MAPPING,
-    GEMINI_API_KEY,
 )
 from prompts.template_manager import TemplateManager
 
@@ -22,7 +21,7 @@
 
 
 class ResumeEvaluator:
-    def __init__(self, model_name: str = DEFAULT_MODEL, model_params: dict = None):
+    def __init__(self, model_name: str = DEFAULT_MODEL, model_params: dict = None, api_key: str = None):
         if not model_name:
             raise ValueError("Model name cannot be empty")
 
@@ -30,12 +29,13 @@ def __init__(self, model_name: str = DEFAULT_MODEL, model_params: dict = None):
         self.model_params = model_params or MODEL_PARAMETERS.get(
             model_name, {"temperature": 0.5, "top_p": 0.9}
         )
+        self.api_key = api_key
         self.template_manager = TemplateManager()
         self._initialize_llm_provider()
 
     def _initialize_llm_provider(self):
         """Initialize the appropriate LLM provider based on the model."""
-        self.provider = initialize_llm_provider(self.model_name)
+        self.provider = initialize_llm_provider(self.model_name, api_key=self.api_key)
 
     def _load_evaluation_prompt(self, resume_text: str) -> str:
         criteria_template = self.template_manager.render_template(
diff --git a/frontend/app.js b/frontend/app.js
new file mode 100644
index 0000000..a635e55
--- /dev/null
+++ b/frontend/app.js
@@ -0,0 +1,558 @@
+/**
+ * Hiring Agent — Frontend Application Logic
+ * Handles drag-and-drop, file upload, settings, and terminal output streaming.
+ */
+
+(function () {
+  "use strict";
+
+  // --- DOM References ---
+  const dropzone = document.getElementById("dropzone");
+  const fileInput = document.getElementById("file-input");
+  const dropzonePanel = document.getElementById("dropzone-panel");
+  const fileSelectedEl = document.getElementById("file-selected");
+  const fileNameEl = document.getElementById("file-name");
+  const fileSizeEl = document.getElementById("file-size");
+  const removeBtn = document.getElementById("remove-file");
+  const runBtn = document.getElementById("run-btn");
+  const terminalPanel = document.getElementById("terminal-panel");
+  const terminalOutput = document.getElementById("terminal-output");
+  const terminalTitle = document.getElementById("terminal-title");
+  const cursorLine = document.getElementById("cursor-line");
+  const clearBtn = document.getElementById("clear-btn");
+  const progressFill = document.getElementById("progress-fill");
+  const terminalActions = document.getElementById("terminal-actions");
+  const downloadReportBtn = document.getElementById("download-report-btn");
+
+  // History DOM
+  const historyBtn = document.getElementById("history-btn");
+  const historySidebar = document.getElementById("history-sidebar");
+  const closeHistoryBtn = document.getElementById("close-history");
+  const historyList = document.getElementById("history-list");
+
+  // Settings DOM
+  const settingsBtn = document.getElementById("settings-btn");
+  const settingsOverlay = document.getElementById("settings-overlay");
+  const settingsClose = document.getElementById("settings-close");
+  const modelSelect = document.getElementById("model-select");
+  const apiKeyInput = document.getElementById("api-key-input");
+  const toggleKeyVis = document.getElementById("toggle-key-vis");
+  const currentKeyVal = document.getElementById("current-key-val");
+  const settingsSave = document.getElementById("settings-save");
+  const saveStatus = document.getElementById("save-status");
+  const headerModelSelect = document.getElementById("header-model-select");
+  const copyReportBtn = document.getElementById("copy-report-btn");
+
+  // --- State ---
+  let selectedFile = null;
+  let isRunning = false;
+  let eventSource = null;
+  let currentReportContent = "";
+
+  // --- Helpers ---
+  function formatFileSize(bytes) {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  }
+
+  function scrollTerminal() {
+    const body = document.querySelector(".terminal-body");
+    body.scrollTop = body.scrollHeight;
+  }
+
+  function formatModelLabel(modelId) {
+    // "gemini-2.5-flash" -> "Gemini 2.5 Flash"
+    return modelId
+      .replace("gemini-", "Gemini ")
+      .replace(/-/g, " ")
+      .replace(/\b\w/g, (c) => c.toUpperCase())
+      .replace("Lite", "Lite")
+      .replace("Pro", "Pro");
+  }
+
+  // --- Settings ---
+  const AVAILABLE_MODELS = [
+    // Cloud Models
+    "gemini-2.0-flash",
+    "gemini-2.0-flash-lite",
+    "gemini-2.5-pro",
+    "gemini-2.5-flash",
+    "gemini-2.5-flash-lite",
+    "gemini-3.5-flash",
+    "gemini-3.1-flash-lite",
+  ];
+
+  function getStoredKey() {
+    return localStorage.getItem("gemini_api_key") || "";
+  }
+
+  function getStoredModel() {
+    return localStorage.getItem("gemini_model") || "gemini-2.5-flash";
+  }
+
+  function loadSettings() {
+    const currentModel = getStoredModel();
+    const currentKey = getStoredKey();
+
+    // Populate model dropdown
+    modelSelect.innerHTML = "";
+    AVAILABLE_MODELS.forEach((m) => {
+      const opt = document.createElement("option");
+      opt.value = m;
+      opt.textContent = formatModelLabel(m);
+      if (m === currentModel) opt.selected = true;
+      modelSelect.appendChild(opt);
+    });
+
+    // Show current key masked
+    if (currentKey) {
+      if (currentKey.length > 10) {
+        currentKeyVal.textContent = currentKey.substring(0, 6) + "•".repeat(currentKey.length - 10) + currentKey.slice(-4);
+      } else {
+        currentKeyVal.textContent = "•".repeat(currentKey.length);
+      }
+    } else {
+      currentKeyVal.textContent = "Not set";
+    }
+
+    // Populate header model dropdown
+    headerModelSelect.innerHTML = "";
+    AVAILABLE_MODELS.forEach((m) => {
+      const opt = document.createElement("option");
+      opt.value = m;
+      opt.textContent = formatModelLabel(m);
+      if (m === currentModel) opt.selected = true;
+      headerModelSelect.appendChild(opt);
+    });
+  }
+
+  // Handle header select change
+  headerModelSelect.addEventListener("change", (e) => {
+    localStorage.setItem("gemini_model", e.target.value);
+    loadSettings();
+  });
+
+  function openSettings() {
+    loadSettings();
+    apiKeyInput.value = "";
+    saveStatus.classList.add("hidden");
+    settingsOverlay.classList.remove("hidden");
+    // Animate in
+    requestAnimationFrame(() => {
+      settingsOverlay.querySelector(".modal").classList.add("modal-open");
+    });
+  }
+
+  function closeSettings() {
+    const modal = settingsOverlay.querySelector(".modal");
+    modal.classList.remove("modal-open");
+    setTimeout(() => settingsOverlay.classList.add("hidden"), 200);
+  }
+
+  settingsBtn.addEventListener("click", openSettings);
+  settingsClose.addEventListener("click", closeSettings);
+  settingsOverlay.addEventListener("click", (e) => {
+    if (e.target === settingsOverlay) closeSettings();
+  });
+
+  // Toggle API key visibility
+  let keyVisible = false;
+  toggleKeyVis.addEventListener("click", () => {
+    keyVisible = !keyVisible;
+    apiKeyInput.type = keyVisible ? "text" : "password";
+    toggleKeyVis.title = keyVisible ? "Hide key" : "Show key";
+  });
+
+  // Save settings
+  settingsSave.addEventListener("click", () => {
+    const newModel = modelSelect.value;
+    if (newModel) {
+      localStorage.setItem("gemini_model", newModel);
+    }
+
+    const newKey = apiKeyInput.value.trim();
+    if (newKey) {
+      localStorage.setItem("gemini_api_key", newKey);
+    }
+
+    settingsSave.disabled = true;
+    settingsSave.textContent = "Saving…";
+
+    // Simulate slight delay for UI feedback
+    setTimeout(() => {
+      loadSettings();
+      
+      // Clear key input
+      apiKeyInput.value = "";
+
+      // Show saved and close
+      saveStatus.textContent = "✓ Settings saved";
+      saveStatus.className = "save-status save-success";
+      saveStatus.classList.remove("hidden");
+      
+      setTimeout(() => {
+        saveStatus.classList.add("hidden");
+        closeSettings();
+        
+        settingsSave.disabled = false;
+        settingsSave.innerHTML = `
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="20 6 9 17 4 12"/>
+          </svg>
+          Save Changes
+        `;
+      }, 600);
+    }, 300);
+  });
+
+  // Keyboard shortcut: Escape closes modal
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      if (!settingsOverlay.classList.contains("hidden")) {
+        closeSettings();
+      }
+      if (!historySidebar.classList.contains("hidden")) {
+        historySidebar.classList.add("hidden");
+        document.body.classList.remove("sidebar-open");
+      }
+    }
+  });
+
+  // --- History & Download ---
+  function getHistory() {
+    try {
+      return JSON.parse(sessionStorage.getItem("hiring_agent_history")) || [];
+    } catch {
+      return [];
+    }
+  }
+
+  function saveToHistory(filename, content) {
+    const history = getHistory();
+    const item = {
+      id: Date.now().toString(),
+      filename: filename.replace(".pdf", ""),
+      date: new Date().toLocaleString(),
+      content: content
+    };
+    history.unshift(item);
+    sessionStorage.setItem("hiring_agent_history", JSON.stringify(history));
+    renderHistory();
+  }
+
+  function renderHistory() {
+    const history = getHistory();
+    historyList.innerHTML = "";
+    if (history.length === 0) {
+      historyList.innerHTML = `<p class="empty-history">No reports generated yet.</p>`;
+      return;
+    }
+
+    history.forEach(item => {
+      const el = document.createElement("div");
+      el.className = "history-item";
+      el.innerHTML = `
+        <div class="history-item-title">${item.filename}</div>
+        <div class="history-item-date">${item.date}</div>
+        <div class="history-item-actions" style="gap: 8px;">
+          <button class="history-item-btn copy-history" data-id="${item.id}" title="Copy Report">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            </svg> Copy
+          </button>
+          <button class="history-item-btn download-history" data-id="${item.id}" title="Download Report">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+              <polyline points="7 10 12 15 17 10"></polyline>
+              <line x1="12" y1="15" x2="12" y2="3"></line>
+            </svg> Download
+          </button>
+        </div>
+      `;
+      historyList.appendChild(el);
+    });
+
+    document.querySelectorAll(".download-history").forEach(btn => {
+      btn.addEventListener("click", (e) => {
+        const id = e.currentTarget.getAttribute("data-id");
+        const histItem = getHistory().find(h => h.id === id);
+        if (histItem) {
+          downloadMarkdown(histItem.filename, histItem.content);
+        }
+      });
+    });
+
+    document.querySelectorAll(".copy-history").forEach(btn => {
+      btn.addEventListener("click", (e) => {
+        const id = e.currentTarget.getAttribute("data-id");
+        const histItem = getHistory().find(h => h.id === id);
+        if (histItem) {
+          navigator.clipboard.writeText(histItem.content);
+          const originalHTML = btn.innerHTML;
+          btn.innerHTML = `✓ Copied`;
+          setTimeout(() => btn.innerHTML = originalHTML, 2000);
+        }
+      });
+    });
+  }
+
+  historyBtn.addEventListener("click", () => {
+    historySidebar.classList.remove("hidden");
+    document.body.classList.add("sidebar-open");
+    renderHistory();
+  });
+
+  closeHistoryBtn.addEventListener("click", () => {
+    historySidebar.classList.add("hidden");
+    document.body.classList.remove("sidebar-open");
+  });
+
+  function downloadMarkdown(filename, content) {
+    const blob = new Blob([content], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${filename}_Report.md`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  downloadReportBtn.addEventListener("click", () => {
+    if (selectedFile && currentReportContent) {
+      const filename = selectedFile.name.replace(".pdf", "");
+      downloadMarkdown(filename, currentReportContent);
+    }
+  });
+
+  copyReportBtn.addEventListener("click", () => {
+    if (selectedFile && currentReportContent) {
+      navigator.clipboard.writeText(currentReportContent);
+      const originalHTML = copyReportBtn.innerHTML;
+      copyReportBtn.innerHTML = `✓ Copied!`;
+      setTimeout(() => copyReportBtn.innerHTML = originalHTML, 2000);
+    }
+  });
+
+  // --- File Selection ---
+  function selectFile(file) {
+    if (!file) return;
+    if (!file.name.toLowerCase().endsWith(".pdf")) {
+      alert("Please select a PDF file.");
+      return;
+    }
+    if (file.size > 20 * 1024 * 1024) {
+      alert("File is too large. Maximum 20MB.");
+      return;
+    }
+
+    selectedFile = file;
+    fileNameEl.textContent = file.name;
+    fileSizeEl.textContent = formatFileSize(file.size);
+
+    dropzone.classList.add("hidden");
+    fileSelectedEl.classList.remove("hidden");
+  }
+
+  function clearFile() {
+    selectedFile = null;
+    fileInput.value = "";
+    dropzone.classList.remove("hidden");
+    fileSelectedEl.classList.add("hidden");
+  }
+
+  // --- Drag & Drop ---
+  dropzone.addEventListener("click", () => fileInput.click());
+
+  fileInput.addEventListener("change", (e) => {
+    if (e.target.files.length > 0) {
+      selectFile(e.target.files[0]);
+    }
+  });
+
+  dropzone.addEventListener("dragover", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dropzone.classList.add("drag-over");
+  });
+
+  dropzone.addEventListener("dragleave", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dropzone.classList.remove("drag-over");
+  });
+
+  dropzone.addEventListener("drop", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dropzone.classList.remove("drag-over");
+    if (e.dataTransfer.files.length > 0) {
+      selectFile(e.dataTransfer.files[0]);
+    }
+  });
+
+  // Prevent page-level drops
+  document.addEventListener("dragover", (e) => e.preventDefault());
+  document.addEventListener("drop", (e) => e.preventDefault());
+
+  // --- Remove File ---
+  removeBtn.addEventListener("click", clearFile);
+
+  // --- Run Evaluation ---
+  runBtn.addEventListener("click", async () => {
+    if (!selectedFile || isRunning) return;
+
+    // Check if API key is set
+    const currentKey = getStoredKey();
+    if (!currentKey) {
+      openSettings();
+      alert("Please enter a Gemini API Key to run the evaluation.");
+      return;
+    }
+
+    isRunning = true;
+    runBtn.disabled = true;
+    runBtn.classList.add("running");
+    runBtn.innerHTML = `
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+        <circle cx="12" cy="12" r="10" stroke-dasharray="31" stroke-dashoffset="10">
+          <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/>
+        </circle>
+      </svg>
+      Running...
+    `;
+
+    // Show terminal
+    terminalPanel.classList.remove("hidden");
+    terminalActions.classList.add("hidden");
+    terminalOutput.textContent = "";
+    currentReportContent = "";
+    cursorLine.classList.remove("hidden");
+    terminalTitle.textContent = `hiring-agent — ${selectedFile.name}`;
+    progressFill.className = "progress-fill active";
+
+    // Scroll to terminal
+    terminalPanel.scrollIntoView({ behavior: "smooth", block: "start" });
+
+    try {
+      // Upload file with local settings
+      const formData = new FormData();
+      formData.append("resume", selectedFile);
+      formData.append("api_key", currentKey);
+      formData.append("model", getStoredModel());
+
+      const uploadResp = await fetch("/api/upload", {
+        method: "POST",
+        body: formData,
+      });
+
+      // Safe JSON parse
+      let uploadData;
+      let rawText = "";
+      try {
+        rawText = await uploadResp.text();
+        uploadData = JSON.parse(rawText);
+      } catch (parseErr) {
+        appendOutput(`❌ Server response error: ${parseErr.message}\n`);
+        appendOutput(`(HTTP ${uploadResp.status}) Raw response: "${rawText}"\n`);
+        finishRun(false);
+        return;
+      }
+
+      if (!uploadResp.ok) {
+        appendOutput(`❌ Upload failed: ${uploadData.error || "Unknown error"}\n`);
+        finishRun(false);
+        return;
+      }
+
+      const job_id = uploadData.job_id;
+      appendOutput("📤 Resume uploaded. Starting evaluation...\n\n");
+
+      // Open SSE stream
+      eventSource = new EventSource(`/api/stream/${job_id}`);
+
+      eventSource.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.type === "output") {
+            appendOutput(data.text);
+            currentReportContent += data.text;
+          } else if (data.type === "done") {
+            eventSource.close();
+            eventSource = null;
+            if (data.success) {
+              saveToHistory(selectedFile.name, currentReportContent);
+              terminalActions.classList.remove("hidden");
+              finishRun(true);
+            } else {
+              finishRun(false);
+            }
+          }
+        } catch (e) {
+          // Ignore parse errors on SSE
+        }
+      };
+
+      eventSource.onerror = () => {
+        if (eventSource) {
+          eventSource.close();
+          eventSource = null;
+        }
+        if (isRunning) {
+          appendOutput("\n⚠️ Connection lost.\n");
+          finishRun(false);
+        }
+      };
+    } catch (err) {
+      appendOutput(`\n❌ Error: ${err.message}\n`);
+      finishRun(false);
+    }
+  });
+
+  function appendOutput(text) {
+    terminalOutput.textContent += text;
+    scrollTerminal();
+  }
+
+  function finishRun(success) {
+    isRunning = false;
+    runBtn.disabled = false;
+    runBtn.classList.remove("running");
+    runBtn.innerHTML = `
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polygon points="5 3 19 12 5 21 5 3"/>
+      </svg>
+      Run Evaluation
+    `;
+
+    cursorLine.classList.add("hidden");
+    progressFill.className = success ? "progress-fill done" : "progress-fill";
+  }
+
+  // --- Clear / New ---
+  clearBtn.addEventListener("click", () => {
+    if (eventSource) {
+      eventSource.close();
+      eventSource = null;
+    }
+    isRunning = false;
+    terminalPanel.classList.add("hidden");
+    terminalOutput.textContent = "";
+    progressFill.className = "progress-fill";
+    clearFile();
+    runBtn.disabled = false;
+    runBtn.classList.remove("running");
+    runBtn.innerHTML = `
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polygon points="5 3 19 12 5 21 5 3"/>
+      </svg>
+      Run Evaluation
+    `;
+  });
+
+  // --- Init ---
+  loadSettings();
+})();
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..61390aa
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hiring Agent — Resume Evaluator</title>
+  <meta name="description" content="AI-powered resume evaluation pipeline. Drop a resume PDF and get a detailed, fair scoring report.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <!-- Ambient background -->
+  <div class="ambient-bg">
+    <div class="orb orb-1"></div>
+    <div class="orb orb-2"></div>
+    <div class="orb orb-3"></div>
+  </div>
+
+  <div class="app-container">
+    <!-- Header -->
+    <header class="header">
+      <div class="logo-group">
+        <div class="logo-icon">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+            <circle cx="9" cy="7" r="4"/>
+            <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
+            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+          </svg>
+        </div>
+        <div>
+          <h1>Hiring Agent</h1>
+          <p class="subtitle">AI-Powered Resume Evaluation</p>
+        </div>
+      </div>
+      <div class="header-actions">
+        <div class="header-controls">
+          <select id="header-model-select" class="header-badge header-model-select">
+            <!-- Populated by JS -->
+          </select>
+          <div style="display: flex; gap: 8px;">
+            <button id="history-btn" class="icon-btn" aria-label="History" title="View History">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"></circle>
+                <polyline points="12 6 12 12 16 14"></polyline>
+              </svg>
+            </button>
+            <button id="settings-btn" class="icon-btn" aria-label="Settings" title="Settings">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="3"></circle>
+                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+
+      <!-- History Sidebar -->
+      <div id="history-sidebar" class="history-sidebar hidden">
+        <div class="history-header">
+          <h2>Session History</h2>
+          <button id="close-history" class="icon-btn" title="Close">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+        <div id="history-list" class="history-list">
+          <p class="empty-history">No reports generated yet.</p>
+        </div>
+      </div>
+
+    <!-- Settings Modal -->
+    <div id="settings-overlay" class="modal-overlay hidden">
+      <div class="modal" id="settings-modal">
+        <div class="modal-header">
+          <h2>Settings</h2>
+          <button id="settings-close" class="modal-close" title="Close">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="modal-body">
+          <!-- Model Selection -->
+          <div class="setting-group">
+            <label class="setting-label" for="model-select">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polygon points="12 2 2 7 12 12 22 7 12 2"/>
+                <polyline points="2 17 12 22 22 17"/>
+                <polyline points="2 12 12 17 22 12"/>
+              </svg>
+              Model
+            </label>
+            <p class="setting-hint">Switch models if one hits its rate limit</p>
+            <select id="model-select" class="setting-select">
+              <!-- Populated by JS -->
+            </select>
+          </div>
+
+          <!-- API Key -->
+          <div class="setting-group">
+            <label class="setting-label" for="api-key-input">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
+              </svg>
+              Gemini API Key
+            </label>
+            <p class="setting-hint">
+              Replace your key when it expires or hits quota. 
+              <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener" style="color: var(--accent-primary); text-decoration: underline;">Get a free API key here</a>
+            </p>
+            <div class="key-input-group">
+              <input type="password" id="api-key-input" class="setting-input" placeholder="Paste new API key…" autocomplete="off" spellcheck="false">
+              <button id="toggle-key-vis" class="key-toggle" title="Show / hide key" type="button">
+                <svg id="eye-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                  <circle cx="12" cy="12" r="3"/>
+                </svg>
+              </button>
+            </div>
+            <p class="setting-current" id="current-key-display">Current: <span id="current-key-val">—</span></p>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button id="settings-save" class="save-btn">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12"/>
+            </svg>
+            Save Changes
+          </button>
+          <div id="save-status" class="save-status hidden"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Drop Zone Panel -->
+      <section id="dropzone-panel" class="panel drop-panel">
+        <div id="dropzone" class="dropzone">
+          <div class="dropzone-content">
+            <div class="upload-icon">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                <polyline points="14 2 14 8 20 8"/>
+                <line x1="12" y1="18" x2="12" y2="12"/>
+                <polyline points="9 15 12 12 15 15"/>
+              </svg>
+            </div>
+            <h2>Drop Resume PDF</h2>
+            <p>Drag & drop your resume here, or <label for="file-input" class="browse-link">browse</label></p>
+            <p class="file-hint">PDF files only • Max 20MB</p>
+          </div>
+          <input type="file" id="file-input" accept=".pdf" hidden>
+        </div>
+
+        <!-- File selected state -->
+        <div id="file-selected" class="file-selected hidden">
+          <div class="file-info">
+            <div class="file-icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                <polyline points="14 2 14 8 20 8"/>
+              </svg>
+            </div>
+            <div class="file-details">
+              <span id="file-name" class="file-name">resume.pdf</span>
+              <span id="file-size" class="file-size">2.4 MB</span>
+            </div>
+            <button id="remove-file" class="remove-btn" title="Remove file">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18"/>
+                <line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          </div>
+          <button id="run-btn" class="run-btn">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polygon points="5 3 19 12 5 21 5 3"/>
+            </svg>
+            Run Evaluation
+          </button>
+        </div>
+      </section>
+
+      <!-- Terminal Output Panel -->
+      <section id="terminal-panel" class="panel terminal-panel hidden">
+        <div class="terminal-header">
+          <div class="terminal-dots">
+            <span class="dot dot-red"></span>
+            <span class="dot dot-yellow"></span>
+            <span class="dot dot-green"></span>
+          </div>
+          <span class="terminal-title" id="terminal-title">hiring-agent — evaluation</span>
+          <button id="clear-btn" class="clear-btn" title="Clear & start over">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="1 4 1 10 7 10"/>
+              <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
+            </svg>
+            New
+          </button>
+        </div>
+        <div class="terminal-body">
+          <pre id="terminal-output"></pre>
+          <div id="cursor-line" class="cursor-line">
+            <span class="cursor-block">█</span>
+          </div>
+        </div>
+        <div id="terminal-actions" class="terminal-actions hidden">
+          <button id="copy-report-btn" class="secondary-btn">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            </svg>
+            Copy Report
+          </button>
+          <button id="download-report-btn" class="secondary-btn">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+              <polyline points="7 10 12 15 17 10"></polyline>
+              <line x1="12" y1="15" x2="12" y2="3"></line>
+            </svg>
+            Download Report
+          </button>
+        </div>
+        <!-- Progress bar -->
+        <div id="progress-bar" class="progress-bar">
+          <div id="progress-fill" class="progress-fill"></div>
+        </div>
+      </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <span>Built on <a href="https://github.com/interviewstreet/hiring-agent" target="_blank" rel="noopener">hiring-agent</a> by HackerRank</span>
+    </footer>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/frontend/style.css b/frontend/style.css
new file mode 100644
index 0000000..307e327
--- /dev/null
+++ b/frontend/style.css
@@ -0,0 +1,1195 @@
+/* ============================================
+   HIRING AGENT — DESIGN SYSTEM & STYLES
+   ============================================ */
+
+/* --- CSS Custom Properties --- */
+:root {
+    /* Surface & Background */
+    --bg-primary: #0a0a0f;
+    --bg-secondary: #111118;
+    --bg-surface: #16161e;
+    --bg-elevated: #1c1c28;
+    --bg-terminal: #0c0c14;
+
+    /* Accent Palette */
+    --accent-primary: #6c5ce7;
+    --accent-primary-glow: rgba(108, 92, 231, 0.25);
+    --accent-secondary: #00cec9;
+    --accent-warm: #fd79a8;
+    --accent-success: #00b894;
+    --accent-warning: #fdcb6e;
+    --accent-danger: #e17055;
+
+    /* Text */
+    --text-primary: #e8e6f0;
+    --text-secondary: #8b8a95;
+    --text-muted: #555566;
+    --text-terminal: #c8f7c5;
+
+    /* Borders */
+    --border-subtle: rgba(255, 255, 255, 0.06);
+    --border-medium: rgba(255, 255, 255, 0.1);
+    --border-active: rgba(108, 92, 231, 0.4);
+
+    /* Sizing */
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 20px;
+
+    /* Fonts */
+    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
+
+    /* Shadows */
+    --shadow-glow: 0 0 60px rgba(108, 92, 231, 0.08);
+    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* --- Reset & Base --- */
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    font-family: var(--font-ui);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    min-height: 100vh;
+    overflow-x: hidden;
+    line-height: 1.6;
+    transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.sidebar-open {
+    padding-right: 350px;
+}
+
+/* --- Ambient Background --- */
+.ambient-bg {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+}
+
+.orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(100px);
+    opacity: 0.3;
+    animation: float 20s ease-in-out infinite;
+}
+
+.orb-1 {
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, var(--accent-primary), transparent 70%);
+    top: -150px;
+    right: -100px;
+    animation-duration: 25s;
+}
+
+.orb-2 {
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, var(--accent-secondary), transparent 70%);
+    bottom: -100px;
+    left: -100px;
+    animation-duration: 30s;
+    animation-delay: -5s;
+}
+
+.orb-3 {
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, var(--accent-warm), transparent 70%);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation-duration: 22s;
+    animation-delay: -10s;
+    opacity: 0.15;
+}
+
+@keyframes float {
+
+    0%,
+    100% {
+        transform: translate(0, 0) scale(1);
+    }
+
+    25% {
+        transform: translate(30px, -40px) scale(1.05);
+    }
+
+    50% {
+        transform: translate(-20px, 20px) scale(0.95);
+    }
+
+    75% {
+        transform: translate(40px, 30px) scale(1.02);
+    }
+}
+
+/* --- App Container --- */
+.app-container {
+    position: relative;
+    z-index: 1;
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 32px 24px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* --- Header --- */
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 40px;
+    padding: 0 4px;
+}
+
+.logo-group {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.logo-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-md);
+    background: linear-gradient(135deg, var(--accent-primary), #8b5cf6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    box-shadow: 0 0 24px var(--accent-primary-glow);
+}
+
+.header h1 {
+    font-size: 1.5rem;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+    background: linear-gradient(135deg, #fff, var(--text-secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.subtitle {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+    margin-top: 2px;
+}
+
+.header-badge {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 14px;
+    border-radius: 100px;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-subtle);
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.header-model-select {
+    appearance: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8a95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    padding-right: 30px;
+    transition: all 0.2s;
+}
+
+.header-model-select:hover {
+    color: var(--text-primary);
+    border-color: var(--border-medium);
+}
+
+.header-model-select:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+}
+
+.header-model-select option {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+}
+
+.badge-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--accent-success);
+    box-shadow: 0 0 8px rgba(0, 184, 148, 0.5);
+    animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.4;
+    }
+}
+
+/* --- Panels --- */
+.panel {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-card);
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* --- Drop Zone Panel --- */
+.drop-panel {
+    padding: 8px;
+}
+
+.dropzone {
+    position: relative;
+    border: 2px dashed var(--border-medium);
+    border-radius: var(--radius-lg);
+    padding: 64px 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: transparent;
+}
+
+.dropzone:hover {
+    border-color: var(--accent-primary);
+    background: rgba(108, 92, 231, 0.04);
+}
+
+.dropzone.drag-over {
+    border-color: var(--accent-primary);
+    background: rgba(108, 92, 231, 0.08);
+    box-shadow: inset 0 0 40px var(--accent-primary-glow);
+    transform: scale(1.005);
+}
+
+.dropzone-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.upload-icon {
+    color: var(--text-muted);
+    transition: color 0.3s, transform 0.3s;
+}
+
+.dropzone:hover .upload-icon {
+    color: var(--accent-primary);
+    transform: translateY(-4px);
+}
+
+.dropzone h2 {
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.dropzone p {
+    font-size: 0.88rem;
+    color: var(--text-secondary);
+}
+
+.browse-link {
+    color: var(--accent-primary);
+    cursor: pointer;
+    font-weight: 600;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color 0.2s;
+}
+
+.browse-link:hover {
+    color: #8b7af0;
+}
+
+.file-hint {
+    font-size: 0.78rem !important;
+    color: var(--text-muted) !important;
+}
+
+/* --- File Selected State --- */
+.file-selected {
+    padding: 20px 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.file-info {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    flex: 1;
+    min-width: 0;
+}
+
+.file-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: var(--radius-sm);
+    background: rgba(108, 92, 231, 0.12);
+    color: var(--accent-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.file-details {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.file-name {
+    font-weight: 600;
+    font-size: 0.92rem;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.file-size {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+}
+
+.remove-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-sm);
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    flex-shrink: 0;
+}
+
+.remove-btn:hover {
+    background: rgba(225, 112, 85, 0.12);
+    color: var(--accent-danger);
+}
+
+/* --- Run Button --- */
+.run-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 28px;
+    border: none;
+    border-radius: var(--radius-md);
+    background: linear-gradient(135deg, var(--accent-primary), #8b5cf6);
+    color: white;
+    font-family: var(--font-ui);
+    font-size: 0.92rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    white-space: nowrap;
+    flex-shrink: 0;
+    box-shadow: 0 4px 16px var(--accent-primary-glow);
+}
+
+.run-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 32px var(--accent-primary-glow);
+}
+
+.run-btn:active {
+    transform: translateY(0);
+}
+
+.run-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+.run-btn.running {
+    background: linear-gradient(135deg, #e17055, #d63031);
+    animation: btn-pulse 2s ease-in-out infinite;
+}
+
+@keyframes btn-pulse {
+
+    0%,
+    100% {
+        box-shadow: 0 4px 16px rgba(225, 112, 85, 0.3);
+    }
+
+    50% {
+        box-shadow: 0 4px 32px rgba(225, 112, 85, 0.5);
+    }
+}
+
+/* --- Terminal Panel --- */
+.terminal-panel {
+    margin-top: 24px;
+    display: flex;
+    flex-direction: column;
+    animation: slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.terminal-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 20px;
+    background: var(--bg-elevated);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.terminal-dots {
+    display: flex;
+    gap: 7px;
+}
+
+.dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.dot-red {
+    background: #ff5f57;
+}
+
+.dot-yellow {
+    background: #febc2e;
+}
+
+.dot-green {
+    background: #28c840;
+}
+
+.terminal-title {
+    flex: 1;
+    text-align: center;
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    font-weight: 500;
+    font-family: var(--font-mono);
+}
+
+.clear-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text-secondary);
+    font-family: var(--font-ui);
+    font-size: 0.78rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.clear-btn:hover {
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    border-color: var(--border-medium);
+}
+
+/* --- Terminal Body --- */
+.terminal-body {
+    background: var(--bg-terminal);
+    padding: 20px 24px;
+    min-height: 300px;
+    max-height: 70vh;
+    overflow-y: auto;
+    font-family: var(--font-mono);
+    font-size: 0.84rem;
+    line-height: 1.7;
+    color: var(--text-terminal);
+    /* Custom scrollbar */
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-medium) transparent;
+}
+
+.terminal-body::-webkit-scrollbar {
+    width: 6px;
+}
+
+.terminal-body::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.terminal-body::-webkit-scrollbar-thumb {
+    background: var(--border-medium);
+    border-radius: 3px;
+}
+
+.terminal-body::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
+
+#terminal-output {
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+}
+
+/* --- Cursor --- */
+.cursor-line {
+    display: inline;
+}
+
+.cursor-block {
+    animation: blink 1s step-end infinite;
+    color: var(--accent-secondary);
+    font-weight: bold;
+}
+
+@keyframes blink {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+    }
+}
+
+/* --- Progress Bar --- */
+.progress-bar {
+    height: 3px;
+    background: var(--bg-elevated);
+    overflow: hidden;
+    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
+}
+
+.progress-fill {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-warm));
+    background-size: 200% 100%;
+    border-radius: 3px;
+    transition: width 0.4s ease;
+    animation: shimmer 2s linear infinite;
+}
+
+.progress-fill.active {
+    width: 100%;
+    animation: progress-indeterminate 1.8s ease-in-out infinite, shimmer 2s linear infinite;
+}
+
+.progress-fill.done {
+    width: 100%;
+    background: var(--accent-success);
+    animation: none;
+}
+
+@keyframes progress-indeterminate {
+    0% {
+        width: 0%;
+        margin-left: 0%;
+    }
+
+    50% {
+        width: 40%;
+        margin-left: 30%;
+    }
+
+    100% {
+        width: 0%;
+        margin-left: 100%;
+    }
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: 200% 0;
+    }
+
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+/* --- Footer --- */
+.footer {
+    margin-top: auto;
+    padding: 32px 4px 8px;
+    text-align: center;
+    font-size: 0.78rem;
+    color: var(--text-muted);
+}
+
+.footer a {
+    color: var(--accent-primary);
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.2s;
+}
+
+.footer a:hover {
+    color: #8b7af0;
+}
+
+/* --- Utility --- */
+.hidden {
+    display: none !important;
+}
+
+/* --- Terminal Text Colors (for ANSI-like styling) --- */
+.t-info {
+    color: #74b9ff;
+}
+
+.t-success {
+    color: #55efc4;
+}
+
+.t-warning {
+    color: #ffeaa7;
+}
+
+.t-error {
+    color: #fab1a0;
+}
+
+.t-score {
+    color: #dfe6e9;
+    font-weight: 600;
+}
+
+.t-heading {
+    color: #a29bfe;
+    font-weight: 700;
+}
+
+.t-divider {
+    color: #636e72;
+}
+
+.t-emoji {
+    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
+}
+
+/* --- Responsive --- */
+@media (max-width: 640px) {
+    .app-container {
+        padding: 20px 16px;
+    }
+
+    .header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+
+    .dropzone {
+        padding: 40px 20px;
+    }
+
+    .file-selected {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .run-btn {
+        justify-content: center;
+    }
+
+    .terminal-body {
+        font-size: 0.76rem;
+        padding: 16px;
+        max-height: 60vh;
+    }
+
+    .modal {
+        margin: 16px;
+        max-width: 100%;
+    }
+}
+
+/* --- Header Actions --- */
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.icon-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-subtle);
+    background: var(--bg-elevated);
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.25s ease;
+}
+
+.icon-btn:hover {
+    color: var(--text-primary);
+    border-color: var(--border-medium);
+    background: var(--bg-surface);
+    transform: rotate(15deg);
+}
+
+/* --- Modal --- */
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: fade-in 0.2s ease;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.modal {
+    width: 100%;
+    max-width: 480px;
+    margin: 24px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 80px var(--accent-primary-glow);
+    overflow: hidden;
+    transform: translateY(12px) scale(0.97);
+    opacity: 0;
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
+}
+
+.modal.modal-open {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px 16px;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.modal-header h2 {
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.modal-close {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius-sm);
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.modal-close:hover {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text-primary);
+}
+
+.modal-body {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.modal-footer {
+    padding: 16px 24px 20px;
+    border-top: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+/* --- Setting Groups --- */
+.setting-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.setting-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.setting-label svg {
+    color: var(--accent-primary);
+}
+
+.setting-hint {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    margin-top: -2px;
+}
+
+/* --- Select Dropdown --- */
+.setting-select {
+    appearance: none;
+    -webkit-appearance: none;
+    padding: 10px 40px 10px 14px;
+    border: 1px solid var(--border-medium);
+    border-radius: var(--radius-sm);
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: border-color 0.2s;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8a95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+}
+
+.setting-select:hover,
+.setting-select:focus {
+    border-color: var(--accent-primary);
+    outline: none;
+    box-shadow: 0 0 0 3px var(--accent-primary-glow);
+}
+
+.setting-select option {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    padding: 8px;
+}
+
+/* --- API Key Input --- */
+.key-input-group {
+    display: flex;
+    gap: 0;
+    border: 1px solid var(--border-medium);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.key-input-group:focus-within {
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 3px var(--accent-primary-glow);
+}
+
+.setting-input {
+    flex: 1;
+    padding: 10px 14px;
+    border: none;
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    outline: none;
+}
+
+.setting-input::placeholder {
+    color: var(--text-muted);
+}
+
+.key-toggle {
+    width: 44px;
+    border: none;
+    border-left: 1px solid var(--border-subtle);
+    background: var(--bg-elevated);
+    color: var(--text-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s, background 0.2s;
+}
+
+.key-toggle:hover {
+    color: var(--text-primary);
+    background: rgba(255, 255, 255, 0.04);
+}
+
+.setting-current {
+    font-size: 0.76rem;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+}
+
+.setting-current span {
+    color: var(--text-secondary);
+}
+
+/* --- Save Button --- */
+.save-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 24px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: linear-gradient(135deg, var(--accent-primary), #8b5cf6);
+    color: white;
+    font-family: var(--font-ui);
+    font-size: 0.88rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.25s;
+    box-shadow: 0 2px 12px var(--accent-primary-glow);
+}
+
+.save-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 20px var(--accent-primary-glow);
+}
+
+.save-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.save-status {
+    font-size: 0.82rem;
+    font-weight: 600;
+    animation: fade-in 0.2s ease;
+}
+
+.save-success {
+    color: var(--accent-success);
+}
+
+.save-error {
+    color: var(--accent-danger);
+}
+
+/* History Sidebar */
+.history-sidebar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 350px;
+    max-width: 100vw;
+    height: 100vh;
+    background: var(--bg-card);
+    border-left: 1px solid var(--border-color);
+    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.5);
+    z-index: 200;
+    display: flex;
+    flex-direction: column;
+    transform: translateX(0);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.history-sidebar.hidden {
+    transform: translateX(100%);
+    display: flex !important;
+}
+
+.history-header {
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.history-header h2 {
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.history-list {
+    padding: 15px;
+    overflow-y: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.empty-history {
+    color: var(--text-muted);
+    text-align: center;
+    margin-top: 20px;
+    font-size: 0.9rem;
+}
+
+.history-item {
+    background: var(--bg-hover);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    transition: border-color 0.2s, background-color 0.2s;
+}
+
+.history-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--accent-primary);
+}
+
+.history-item-title {
+    color: var(--text-primary);
+    font-weight: 500;
+    font-size: 0.95rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.history-item-date {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+}
+
+.history-item-actions {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.history-item-btn {
+    background: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.2s;
+}
+
+.history-item-btn:hover {
+    background: var(--accent-primary);
+    color: white;
+    border-color: var(--accent-primary);
+}
+
+/* Terminal Actions */
+.terminal-actions {
+    padding: 12px 20px;
+    background: rgba(0, 0, 0, 0.2);
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+.secondary-btn {
+    background: transparent;
+    border: 1px solid var(--accent-primary);
+    color: var(--accent-primary);
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s;
+}
+
+.secondary-btn:hover {
+    background: rgba(139, 92, 246, 0.1);
+    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
+}
\ No newline at end of file
diff --git a/github.py b/github.py
index 0e19568..b50605a 100644
--- a/github.py
+++ b/github.py
@@ -331,7 +331,7 @@ def generate_profile_json(profile: GitHubProfile) -> Dict:
     return profile_data
 
 
-def generate_projects_json(projects: List[Dict]) -> List[Dict]:
+def generate_projects_json(projects: List[Dict], api_key: str = None, model_name: str = None) -> List[Dict]:
     if not projects:
         return []
 
@@ -366,17 +366,17 @@ def generate_projects_json(projects: List[Dict]) -> List[Dict]:
             f"🤖 Using LLM to select top 5 projects from {len(projects)} repositories..."
         )
 
-        # Initialize the LLM provider
-        provider = initialize_llm_provider(DEFAULT_MODEL)
+        model = model_name or DEFAULT_MODEL
+        provider = initialize_llm_provider(model, api_key=api_key)
 
         # Get model parameters
         model_params = MODEL_PARAMETERS.get(
-            DEFAULT_MODEL, {"temperature": 0.1, "top_p": 0.9}
+            model, {"temperature": 0.1, "top_p": 0.9}
         )
 
         # Prepare chat parameters
         chat_params = {
-            "model": DEFAULT_MODEL,
+            "model": model,
             "messages": [
                 {
                     "role": "system",
@@ -456,7 +456,7 @@ def generate_projects_json(projects: List[Dict]) -> List[Dict]:
         return projects_data
 
 
-def fetch_and_display_github_info(github_url: str) -> Dict:
+def fetch_and_display_github_info(github_url: str, api_key: str = None, model_name: str = None) -> Dict:
     logger.info(f"{github_url}")
     github_profile = fetch_github_profile(github_url)
     if not github_profile:
@@ -470,7 +470,7 @@ def fetch_and_display_github_info(github_url: str) -> Dict:
         print("\n❌ No repositories found or failed to fetch repository details.")
 
     profile_json = generate_profile_json(github_profile)
-    projects_json = generate_projects_json(projects)
+    projects_json = generate_projects_json(projects, api_key=api_key, model_name=model_name)
 
     result = {
         "profile": profile_json,
@@ -481,8 +481,8 @@ def fetch_and_display_github_info(github_url: str) -> Dict:
     return result
 
 
-def main(github_url):
-    result = fetch_and_display_github_info(github_url)
+def main(github_url, api_key=None, model_name=None):
+    result = fetch_and_display_github_info(github_url, api_key=api_key, model_name=model_name)
     print("\n" + "=" * 60)
     print("JSON DATA OUTPUT")
     print("=" * 60)
diff --git a/llm_utils.py b/llm_utils.py
index 7e1d96d..5ab3276 100644
--- a/llm_utils.py
+++ b/llm_utils.py
@@ -5,7 +5,7 @@
 import logging
 from typing import Any, Dict, Optional
 from models import ModelProvider, OllamaProvider, GeminiProvider
-from prompt import MODEL_PROVIDER_MAPPING, GEMINI_API_KEY
+from prompt import MODEL_PROVIDER_MAPPING
 
 logger = logging.getLogger(__name__)
 
@@ -37,7 +37,7 @@ def extract_json_from_response(response_text: str) -> str:
     return response_text
 
 
-def initialize_llm_provider(model_name: str) -> Any:
+def initialize_llm_provider(model_name: str, api_key: str = None) -> Any:
     """
     Initialize the appropriate LLM provider based on the model name.
 
@@ -52,11 +52,11 @@ def initialize_llm_provider(model_name: str) -> Any:
     # If using Gemini and API key is available, use Gemini provider
     model_provider = MODEL_PROVIDER_MAPPING.get(model_name, ModelProvider.OLLAMA)
     if model_provider == ModelProvider.GEMINI:
-        if not GEMINI_API_KEY:
-            logger.warning("⚠️ Gemini API key not found. Falling back to Ollama.")
+        if not api_key:
+            logger.warning("⚠️ Gemini API key not provided. Falling back to Ollama.")
         else:
             logger.info(f"🔄 Using Google Gemini API provider with model {model_name}")
-            provider = GeminiProvider(api_key=GEMINI_API_KEY)
+            provider = GeminiProvider(api_key=api_key)
     else:
         logger.info(f"🔄 Using Ollama provider with model {model_name}")
     return provider
diff --git a/models.py b/models.py
index e714600..c5526fd 100644
--- a/models.py
+++ b/models.py
@@ -290,8 +290,8 @@ def chat(
         # remove steam from ollama options
         ollama_options.pop("stream", None)
 
-        # Add num_ctx 32K context window to options
-        ollama_options["num_ctx"] = 32768
+        # Add num_ctx 8K context window to options (32K causes extreme slowdown/hangs on local PCs)
+        ollama_options["num_ctx"] = 8192
 
         # convert to chat params
         chat_params = {
@@ -300,14 +300,29 @@ def chat(
             "options": ollama_options,
         }
 
-        # add it to top level
-        if "stream" in kwargs:
-            chat_params["stream"] = kwargs["stream"]
-
+        # Remove format schema for local Ollama models. 
+        # Schema enforcement causes small models to struggle and return empty responses after 20 minutes!
+        # The prompt already asks for JSON, and extract_json_from_response handles it.
         if "format" in kwargs:
-            chat_params["format"] = kwargs["format"]
-
-        return self.client.chat(**chat_params)
+            # chat_params["format"] = kwargs["format"] 
+            pass
+
+        # Force streaming so we can print chunks live to the UI terminal
+        chat_params["stream"] = True
+        
+        response_generator = self.client.chat(**chat_params)
+        
+        print("\n\n", end="", flush=True)
+        full_response = ""
+        for chunk in response_generator:
+            content = chunk.get("message", {}).get("content", "")
+            full_response += content
+            # Print to stdout so the Flask app streams it to the user's browser via SSE
+            print(content, end="", flush=True)
+            
+        print("\n\n", end="", flush=True)
+        
+        return {"message": {"role": "assistant", "content": full_response}}
 
 
 class GeminiProvider:
diff --git a/pdf.py b/pdf.py
index f793c50..d783528 100644
--- a/pdf.py
+++ b/pdf.py
@@ -27,8 +27,8 @@
     DEFAULT_MODEL,
     MODEL_PARAMETERS,
     MODEL_PROVIDER_MAPPING,
-    GEMINI_API_KEY,
 )
+import concurrent.futures
 from prompts.template_manager import TemplateManager
 from transform import transform_parsed_data
 
@@ -36,13 +36,15 @@
 
 
 class PDFHandler:
-    def __init__(self):
+    def __init__(self, model_name: str = None, api_key: str = None):
         self.template_manager = TemplateManager()
+        self.model_name = model_name or DEFAULT_MODEL
+        self.api_key = api_key
         self._initialize_llm_provider()
 
     def _initialize_llm_provider(self):
         """Initialize the appropriate LLM provider based on the model."""
-        self.provider = initialize_llm_provider(DEFAULT_MODEL)
+        self.provider = initialize_llm_provider(self.model_name, api_key=self.api_key)
 
     def extract_text_from_pdf(self, pdf_path: str) -> Optional[str]:
         try:
@@ -55,6 +57,11 @@ def extract_text_from_pdf(self, pdf_path: str) -> Optional[str]:
                     doc,
                     pages=pages,
                 )
+                
+                if not resume_text or len(resume_text.strip()) < 50:
+                    logger.info("📄 PDF seems to be an image. Falling back to OCR via Gemini Vision...")
+                    return self._extract_text_via_ocr(doc)
+                    
                 logger.debug(
                     f"Extracted text from PDF: {len(resume_text) if resume_text else 0} characters"
                 )
@@ -63,17 +70,46 @@ def extract_text_from_pdf(self, pdf_path: str) -> Optional[str]:
             logger.error(f"An error occurred while reading the PDF: {e}")
             return None
 
+    def _extract_text_via_ocr(self, doc) -> Optional[str]:
+        if not self.api_key:
+            logger.error("❌ OCR Fallback requires Gemini API Key, but none was provided.")
+            return None
+            
+        try:
+            from PIL import Image
+            import google.generativeai as genai
+            
+            genai.configure(api_key=self.api_key)
+            vision_model = genai.GenerativeModel("gemini-2.5-flash")
+            
+            full_text = ""
+            for i in range(min(doc.page_count, 3)):  # Limit to 3 pages
+                page = doc.load_page(i)
+                pix = page.get_pixmap(matrix=pymupdf.Matrix(2, 2))  # 2x zoom for clarity
+                img = Image.frombytes("RGB", [pix.width, pix.height], pix.samples)
+                
+                response = vision_model.generate_content([
+                    img, 
+                    "Extract all the text from this resume exactly as written. Do not add any conversational text or formatting outside of the resume content."
+                ])
+                full_text += response.text + "\n\n"
+                
+            return full_text
+        except Exception as e:
+            logger.error(f"❌ OCR failed: {e}")
+            return None
+
     def _call_llm_for_section(
         self, section_name: str, text_content: str, prompt: str, return_model=None
     ) -> Optional[Dict]:
         try:
             start_time = time.time()
             logger.debug(
-                f"🔄 Extracting {section_name} section using {DEFAULT_MODEL}..."
+                f"🔄 Extracting {section_name} section using {self.model_name}..."
             )
 
             model_params = MODEL_PARAMETERS.get(
-                DEFAULT_MODEL, {"temperature": 0.1, "top_p": 0.9}
+                self.model_name, {"temperature": 0.1, "top_p": 0.9}
             )
 
             section_system_message = self.template_manager.render_template(
@@ -86,7 +122,7 @@ def _call_llm_for_section(
                 return None
 
             chat_params = {
-                "model": DEFAULT_MODEL,
+                "model": self.model_name,
                 "messages": [
                     {"role": "system", "content": section_system_message},
                     {"role": "user", "content": prompt},
@@ -286,17 +322,49 @@ def _extract_all_sections_separately(
             "meta": None,
         }
 
-        for section_name in sections:
-            section_data = self._extract_section_data(text_content, section_name)
+        is_ollama = type(self.provider).__name__ == "OllamaProvider"
 
-            if section_data:
-                complete_resume.update(section_data)
-                logger.debug(f"✅ Successfully extracted {section_name} section")
-            else:
-                logger.error(
-                    f"⚠️ Failed to extract {section_name} section. Aborting extraction to prevent partial/invalid resume data."
-                )
-                return None
+        if is_ollama:
+            logger.info("🤖 Using Ollama provider. Running sequential extraction to avoid overloading local model.")
+            print("\n🤖 Processing with local model (Sequential Mode - Expected time: 5-20m)\n")
+            for section_name in sections:
+                try:
+                    print(f"⏳ Extracting {section_name.title()} section... ", end="", flush=True)
+                    section_data = self._extract_section_data(text_content, section_name)
+                    if section_data:
+                        complete_resume.update(section_data)
+                        logger.debug(f"✅ Successfully extracted {section_name} section")
+                        print("✅ Done!")
+                    else:
+                        logger.error(f"⚠️ Failed to extract {section_name} section. Aborting extraction to prevent partial/invalid resume data.")
+                        print("❌ Failed!")
+                        return None
+                except Exception as exc:
+                    logger.error(f"⚠️ {section_name} section extraction generated an exception: {exc}")
+                    print("❌ Error!")
+                    return None
+        else:
+            logger.info("☁️ Using cloud provider. Running parallel extraction for speed.")
+            print("\n☁️ Processing with cloud model (Parallel Mode - Expected time: 5-10s)\n")
+            with concurrent.futures.ThreadPoolExecutor(max_workers=len(sections)) as executor:
+                future_to_section = {
+                    executor.submit(self._extract_section_data, text_content, section_name): section_name
+                    for section_name in sections
+                }
+                
+                for future in concurrent.futures.as_completed(future_to_section):
+                    section_name = future_to_section[future]
+                    try:
+                        section_data = future.result()
+                        if section_data:
+                            complete_resume.update(section_data)
+                            logger.debug(f"✅ Successfully extracted {section_name} section")
+                        else:
+                            logger.error(f"⚠️ Failed to extract {section_name} section. Aborting extraction to prevent partial/invalid resume data.")
+                            return None
+                    except Exception as exc:
+                        logger.error(f"⚠️ {section_name} section extraction generated an exception: {exc}")
+                        return None
 
         try:
             if complete_resume.get("basics") and isinstance(
diff --git a/prompt.py b/prompt.py
index 108e970..7d8c7f5 100644
--- a/prompt.py
+++ b/prompt.py
@@ -26,13 +26,6 @@
 
 # Model-specific parameters
 MODEL_PARAMETERS = {
-    # Ollama models
-    "qwen3:1.7b": {"temperature": 0.0, "top_p": 0.9},
-    "gemma3:1b": {"temperature": 0.0, "top_p": 0.9},
-    "qwen3:4b": {"temperature": 0.1, "top_p": 0.4},
-    "gemma3:4b": {"temperature": 0.1, "top_p": 0.9},
-    "gemma3:12b": {"temperature": 0.1, "top_p": 0.9},
-    "mistral:7b": {"temperature": 0.1, "top_p": 0.9},
     # Google Gemini models
     "gemini-2.0-flash": {"temperature": 0.1, "top_p": 0.9},
     "gemini-2.0-flash-lite": {"temperature": 0.1, "top_p": 0.9},
@@ -47,6 +40,11 @@
 # Maps model names to their provider
 MODEL_PROVIDER_MAPPING = {
     # Ollama models
+    "gemma4": ModelProvider.OLLAMA,
+    "qwen3.6": ModelProvider.OLLAMA,
+    "llama3.2": ModelProvider.OLLAMA,
+    "llama3.1": ModelProvider.OLLAMA,
+    "qwen2.5": ModelProvider.OLLAMA,
     "qwen3:1.7b": ModelProvider.OLLAMA,
     "gemma3:1b": ModelProvider.OLLAMA,
     "qwen3:4b": ModelProvider.OLLAMA,
diff --git a/requirements.txt b/requirements.txt
index df14bd5..32406dc 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -6,4 +6,5 @@ pymupdf4llm==0.0.27
 Jinja2==3.1.6
 google-generativeai==0.4.0
 python-dotenv==1.0.1
+flask==3.0.3
 black==25.9.0
\ No newline at end of file
diff --git a/score.py b/score.py
index 21fd06c..e510759 100644
--- a/score.py
+++ b/score.py
@@ -160,12 +160,15 @@ def print_evaluation_results(
 
 
 def _evaluate_resume(
-    resume_data: JSONResume, github_data: dict = None, blog_data: dict = None
+    resume_data: JSONResume, github_data: dict = None, blog_data: dict = None, api_key: str = None, model_name: str = None
 ) -> Optional[EvaluationData]:
     """Evaluate the resume using AI and display results."""
 
-    model_params = MODEL_PARAMETERS.get(DEFAULT_MODEL)
-    evaluator = ResumeEvaluator(model_name=DEFAULT_MODEL, model_params=model_params)
+    if not model_name:
+        model_name = DEFAULT_MODEL
+
+    model_params = MODEL_PARAMETERS.get(model_name)
+    evaluator = ResumeEvaluator(model_name=model_name, model_params=model_params, api_key=api_key)
 
     # Convert JSON resume data to text
     resume_text = convert_json_resume_to_text(resume_data)
@@ -211,7 +214,7 @@ def find_profile(profiles, network):
     )
 
 
-def main(pdf_path):
+def main(pdf_path, api_key=None, model_name=None):
     # Create cache filename based on PDF path
     cache_filename = (
         f"cache/resumecache_{os.path.basename(pdf_path).replace('.pdf', '')}.json"
@@ -248,7 +251,7 @@ def main(pdf_path):
             f"Extracting data from PDF"
             + (" and caching to " + cache_filename if DEVELOPMENT_MODE else "")
         )
-        pdf_handler = PDFHandler()
+        pdf_handler = PDFHandler(model_name=model_name, api_key=api_key)
         resume_data = pdf_handler.extract_json_from_pdf(pdf_path)
 
         if resume_data == None:
@@ -309,7 +312,7 @@ def main(pdf_path):
                     else ""
                 )
             )
-            github_data = fetch_and_display_github_info(github_profile.url)
+            github_data = fetch_and_display_github_info(github_profile.url, api_key=api_key, model_name=model_name)
 
             if (
                 DEVELOPMENT_MODE
@@ -323,7 +326,8 @@ def main(pdf_path):
                     encoding="utf-8",
                 )
 
-    score = _evaluate_resume(resume_data, github_data)
+    print("\n🧠 Starting AI Evaluation! (This may take several minutes if using a local Ollama model...)")
+    score = _evaluate_resume(resume_data, github_data, api_key=api_key, model_name=model_name)
 
     # Get candidate name for display
     candidate_name = os.path.basename(pdf_path).replace(".pdf", "")