deploy: minimal bootloader for public Space

.gitattributes

@@ -0,0 +1,13 @@
+models/*.onnx filter=lfs diff=lfs merge=lfs -text
+models/*.bin filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+*.woff filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text
+*.ttf filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,41 @@
+# Stage 1: Build the Nuxt frontend natively inside the container
+FROM node:20-slim AS builder
+
+WORKDIR /build
+
+# Copy only frontend requirements to leverage Docker cache
+COPY frontend/package*.json ./
+RUN npm install
+
+# Copy frontend source files and compile
+COPY frontend/ ./
+RUN npm run build
+
+# Stage 2: Final runtime image
+FROM ldsprgrm/algovision-deps:latest
+
+# Install Node.js and Git
+RUN apt-get update && apt-get install -y curl git && \
+    curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
+    apt-get install -y nodejs && \
+    rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Copy the natively built frontend output to the runtime stage
+COPY --from=builder /build/.output /app/frontend-server
+
+# Copy the bootloader script
+COPY bootloader.sh .
+RUN chmod +x bootloader.sh
+
+# Set environment variables for ports and execution
+ENV PYTHONPATH=/app
+ENV PORT=7860
+ENV NUXT_PORT=7860
+ENV NUXT_HOST=0.0.0.0
+
+EXPOSE 7860
+
+# Run bootloader
+ENTRYPOINT ["./bootloader.sh"]

README.md

@@ -0,0 +1,27 @@
+---
+title: AlgoVision
+emoji: 📽️
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# 📽️ AlgoVision Public Space
+
+This is the public-facing interface for **AlgoVision**, an AI-powered video generation platform that automatically creates educational Manim animation videos explaining algorithms, theorems, and scientific concepts.
+
+This Space runs as a secure public frontend that dynamically boots the core application from the private backend Space via the Two-Space Git Loader pattern.
+
+---
+### 🛠️ Architecture Overview
+```
+[ Public User ] <---> [ Public Space (Frontend Interface) ]
+                                     ^
+                                     | (Secure API Git Clone with HF_TOKEN)
+                                     v
+                       [ Private Space (Core logic / backend) ]
+```
+
+All source code, assets, and intellectual property are kept fully private and secure.

bootloader.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+set -e
+
+echo "=== AlgoVision Two-Space Bootloader ==="
+
+# 1. Validate Token
+if [ -z "$HF_TOKEN" ]; then
+    echo "ERROR: The 'HF_TOKEN' environment variable is empty!"
+    echo "Please add a Write/Read access token under Space Settings -> Variables and secrets."
+    exit 1
+fi
+
+# 2. Clone Private Repository
+echo "Cloning private source code from AlgoVision-Server..."
+rm -rf /tmp/algo_repo
+git clone --depth 1 https://oauth2:$HF_TOKEN@huggingface.co/spaces/ldsprgrm/AlgoVision-Server /tmp/algo_repo
+
+# 3. Deploy to /app
+echo "Moving private assets to active container space..."
+# Copy everything (including hidden files) from /tmp/algo_repo to /app
+cp -rp /tmp/algo_repo/. /app/
+rm -rf /tmp/algo_repo
+
+# 4. Set Permissions
+chmod +x /app/entrypoint.sh
+chmod -R 777 /app
+
+# 5. Hand over control to native entrypoint
+echo "Launching AlgoVision Application..."
+exec /app/entrypoint.sh

frontend/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

frontend/.github/workflows/ci.yml

@@ -0,0 +1,34 @@
+name: ci
+
+on: push
+
+jobs:
+  ci:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [22]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install node
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm run lint
+
+      - name: Typecheck
+        run: pnpm run typecheck

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

frontend/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Nuxt UI Templates
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

frontend/README.md

@@ -0,0 +1,60 @@
+# Nuxt Starter Template
+
+[![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com)
+
+Use this template to get started with [Nuxt UI](https://ui.nuxt.com) quickly.
+
+- [Live demo](https://starter-template.nuxt.dev/)
+- [Documentation](https://ui.nuxt.com/docs/getting-started/installation/nuxt)
+
+<a href="https://starter-template.nuxt.dev/" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://ui.nuxt.com/assets/templates/nuxt/starter-dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://ui.nuxt.com/assets/templates/nuxt/starter-light.png">
+    <img alt="Nuxt Starter Template" src="https://ui.nuxt.com/assets/templates/nuxt/starter-light.png" width="830" height="466">
+  </picture>
+</a>
+
+> The starter template for Vue is on https://github.com/nuxt-ui-templates/starter-vue.
+
+## Quick Start
+
+```bash [Terminal]
+npm create nuxt@latest -- -t github:nuxt-ui-templates/starter
+```
+
+## Deploy your own
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-name=starter&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fstarter&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fstarter-dark.png&demo-url=https%3A%2F%2Fstarter-template.nuxt.dev%2F&demo-title=Nuxt%20Starter%20Template&demo-description=A%20minimal%20template%20to%20get%20started%20with%20Nuxt%20UI.)
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

frontend/app/app.config.ts

@@ -0,0 +1,8 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'green',
+      neutral: 'slate'
+    }
+  }
+})

frontend/app/app.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { useProjectStore } from "~/stores/projects";
+
+const store = useProjectStore();
+
+if (process.client) {
+  store.initKeys();
+}
+
+onMounted(() => {
+  console.log("[AlgoVision] Global initialization started...");
+  store.fetchProjects();
+  store.fetchModels();
+  store.fetchVoices();
+});
+
+useHead({
+  meta: [{ name: "viewport", content: "width=device-width, initial-scale=1" }],
+  link: [{ rel: "icon", type: "image/svg+xml", href: "/favicon.svg" }],
+  htmlAttrs: {
+    lang: "en",
+  },
+});
+
+const title = "AlgoVision";
+const description =
+  "A production-ready starter template powered by Nuxt UI. Build beautiful, accessible, and performant applications in minutes, not hours.";
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
+  ogImage: "https://ui.nuxt.com/assets/templates/nuxt/starter-light.png",
+  twitterImage: "https://ui.nuxt.com/assets/templates/nuxt/starter-light.png",
+  twitterCard: "summary_large_image",
+});
+</script>
+
+<template>
+  <UApp>
+    <UMain>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UMain>
+
+    <GenerationWidget />
+    <OnboardingTour />
+  </UApp>
+</template>

frontend/app/assets/css/main.css

@@ -0,0 +1,287 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme static {
+  --font-sans: "Inter", "Public Sans", sans-serif;
+
+  /* Refined Nuxt Green scale */
+  --color-green-50: #f0fdf6;
+  --color-green-100: #dcfce9;
+  --color-green-200: #bbf7d4;
+  --color-green-300: #86efba;
+  --color-green-400: #4ade8d;
+  --color-green-500: #00dc82;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+
+  --color-glass-border: rgba(255, 255, 255, 0.6);
+  --color-glass-bg: rgba(255, 255, 255, 0.4);
+}
+
+/* ─── Base ─────────────────────────────────────────────────────── */
+body {
+  background-color: #f8fafc;
+  color: #0f172a;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ─── Noise texture ─────────────────────────────────────────────── */
+.bg-noise {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  opacity: 0.04;
+  pointer-events: none;
+}
+
+/* ─── Glass primitives ──────────────────────────────────────────── */
+.premium-glass {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.72) 0%,
+    rgba(255, 255, 255, 0.32) 100%
+  );
+  backdrop-filter: blur(24px) saturate(1.6);
+  -webkit-backdrop-filter: blur(24px) saturate(1.6);
+  border: 1px solid rgba(255, 255, 255, 0.65);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.025),
+    0 12px 28px -6px rgba(0, 0, 0, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.95);
+}
+
+.glass-dark {
+  background: rgba(10, 14, 22, 0.85);
+  backdrop-filter: blur(32px) saturate(1.4);
+  -webkit-backdrop-filter: blur(32px) saturate(1.4);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+}
+
+/* ─── Inputs ────────────────────────────────────────────────────── */
+.premium-input {
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.85);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.025);
+  transition: all 0.2s ease;
+}
+.premium-input:focus {
+  background: rgba(255, 255, 255, 0.88);
+  border-color: var(--color-green-400);
+  box-shadow:
+    inset 0 2px 4px rgba(0, 0, 0, 0.01),
+    0 0 0 3px rgba(0, 220, 130, 0.15);
+  outline: none;
+}
+
+/* ─── Buttons ───────────────────────────────────────────────────── */
+.btn-premium {
+  position: relative;
+  background: linear-gradient(160deg, #00dc82 0%, #00b869 100%);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  box-shadow:
+    0 4px 14px rgba(0, 220, 130, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
+  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.btn-premium:hover:not(:disabled) {
+  transform: translateY(-1.5px);
+  box-shadow:
+    0 8px 22px rgba(0, 220, 130, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+.btn-premium:active:not(:disabled) {
+  transform: translateY(0.5px);
+  box-shadow: 0 2px 8px rgba(0, 220, 130, 0.3);
+}
+
+.btn-glass {
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.75);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.2s ease;
+}
+.btn-glass:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.75);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* ─── Status badge colors ───────────────────────────────────────── */
+.badge-completed {
+  background: rgba(22, 163, 74, 0.12);
+  color: #15803d;
+  border: 1px solid rgba(22, 163, 74, 0.2);
+}
+.badge-in-progress {
+  background: rgba(245, 158, 11, 0.12);
+  color: #b45309;
+  border: 1px solid rgba(245, 158, 11, 0.22);
+}
+.badge-pending {
+  background: rgba(100, 116, 139, 0.1);
+  color: #475569;
+  border: 1px solid rgba(100, 116, 139, 0.18);
+}
+
+/* ─── Animations ────────────────────────────────────────────────── */
+@keyframes blob {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(30px, -50px) scale(1.1);
+  }
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+}
+.animate-blob {
+  animation: blob 7s infinite alternate;
+}
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+.animation-delay-4000 {
+  animation-delay: 4s;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in-up {
+  animation: fadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in {
+  animation: fadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.animate-scale-in {
+  animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes shimmer {
+  from {
+    background-position: -200% center;
+  }
+  to {
+    background-position: 200% center;
+  }
+}
+.animate-shimmer {
+  background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
+  background-size: 200% auto;
+  animation: shimmer 1.5s linear infinite;
+}
+
+@keyframes spin-slow {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin-slow {
+  animation: spin-slow 3s linear infinite;
+}
+
+/* ─── Studio mode ring ──────────────────────────────────────────── */
+@keyframes progress-ring {
+  from {
+    stroke-dashoffset: 220;
+  }
+}
+
+/* ─── Scrollbar ─────────────────────────────────────────────────── */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgba(100, 116, 139, 0.3);
+  border-radius: 2px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.5);
+}
+
+/* ─── Plyr overrides ────────────────────────────────────────────── */
+.plyr--video {
+  border-radius: 0;
+}
+.plyr--video .plyr__controls {
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+}
+.plyr__control--overlaid {
+  background: rgba(0, 220, 130, 0.9) !important;
+  box-shadow: 0 0 0 4px rgba(0, 220, 130, 0.25) !important;
+}
+.plyr__control:hover {
+  background: rgba(0, 220, 130, 0.8) !important;
+}
+.plyr--full-ui input[type="range"] {
+  color: #00dc82;
+}
+
+/* ─── NavLink active state ──────────────────────────────────────── */
+.nav-link-active {
+  color: #00dc82 !important;
+}
+
+/* ─── Project Groups: drag-and-drop ─────────────────────────────── */
+.drop-zone-active {
+  outline: 2px dashed #00dc82;
+  outline-offset: -4px;
+  background: rgba(0, 220, 130, 0.04);
+}
+
+.dragging-card {
+  opacity: 0.45;
+  pointer-events: none;
+  transform: scale(0.97);
+}
+
+@keyframes groupSlide {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.group-slide-in {
+  animation: groupSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}

frontend/app/components/AiAssistDialog.vue

@@ -0,0 +1,236 @@
+<template>
+  <UModal
+    v-model:open="isOpen"
+    prevent-close
+    title="AI Creative Director"
+    description="Draft a production plan in seconds"
+    :ui="{ content: 'p-0 w-full sm:w-[500px]' }"
+  >
+    <template #content>
+      <div
+        class="p-6 bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/60 relative w-full sm:w-[500px]"
+        @click.stop
+      >
+        <button
+          @click="isOpen = false"
+          class="absolute top-4 right-4 p-1.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors z-10 cursor-pointer"
+        >
+          <UIcon name="i-lucide-x" class="w-5 h-5" />
+        </button>
+
+        <!-- Header -->
+        <div class="flex items-center gap-4 mb-8">
+          <div
+            class="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center border border-green-100"
+          >
+            <UIcon name="i-lucide-wand-2" class="w-6 h-6 text-green-500" />
+          </div>
+          <div>
+            <h2 class="text-xl font-bold text-slate-900">
+              AI Creative Director
+            </h2>
+            <p class="text-sm font-medium text-slate-500">
+              Draft a production plan in seconds
+            </p>
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div v-if="!generating" class="space-y-6">
+          <div class="text-center relative">
+            <div class="absolute inset-0 flex items-center" aria-hidden="true">
+              <div class="w-full border-t border-slate-200"></div>
+            </div>
+            <div class="relative flex justify-center">
+              <span
+                class="bg-white px-3 text-xs font-bold tracking-widest text-slate-400 uppercase"
+              >
+                WHO IS THIS VIDEO FOR?
+              </span>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <button
+              v-for="p in personas"
+              :key="p.value"
+              @click="persona = p.value"
+              class="flex flex-col items-center p-4 rounded-xl border-2 transition-all duration-200 text-center cursor-pointer"
+              :class="
+                persona === p.value
+                  ? 'border-green-500 bg-green-50/50 shadow-md shadow-green-500/10'
+                  : 'border-slate-100 bg-white hover:border-slate-300 hover:bg-slate-50'
+              "
+            >
+              <div
+                class="w-12 h-12 rounded-full flex items-center justify-center mb-3 transition-colors duration-200"
+                :class="
+                  persona === p.value ? 'bg-white shadow-sm' : 'bg-slate-50'
+                "
+              >
+                <UIcon
+                  :name="p.icon"
+                  class="w-6 h-6"
+                  :class="
+                    persona === p.value ? 'text-green-500' : 'text-slate-400'
+                  "
+                />
+              </div>
+              <div class="font-semibold text-slate-800 mb-1">
+                {{ p.label }}
+              </div>
+              <div class="text-xs text-slate-500 leading-tight">
+                {{ p.desc }}
+              </div>
+            </button>
+          </div>
+
+          <!-- Error Message -->
+          <div
+            v-if="errorMessage"
+            class="p-4 bg-orange-50 border border-orange-100 rounded-xl flex items-start gap-3"
+          >
+            <UIcon
+              name="i-lucide-alert-circle"
+              class="w-5 h-5 text-orange-500 shrink-0 mt-0.5"
+            />
+            <div class="text-sm text-orange-800 font-medium leading-relaxed">
+              {{ errorMessage }}
+            </div>
+          </div>
+
+          <!-- Generate Action -->
+          <button
+            @click="generate"
+            :disabled="generating || store.loadingModels"
+            class="w-full btn-premium bg-gradient-to-r from-green-600 to-emerald-500 hover:from-green-500 hover:to-emerald-400 text-white rounded-xl py-3.5 font-bold text-base shadow-lg shadow-green-500/30 hover:shadow-green-500/40 transition-all flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <UIcon
+              :name="
+                store.loadingModels ? 'i-lucide-loader-2' : 'i-lucide-wand-2'
+              "
+              class="w-5 h-5"
+              :class="{ 'animate-spin': store.loadingModels }"
+            />
+            {{
+              store.loadingModels ? "Loading Models..." : "Draft Magic Script"
+            }}
+          </button>
+        </div>
+
+        <!-- Loading State -->
+        <div
+          v-else
+          class="py-12 flex flex-col items-center justify-center text-center"
+        >
+          <div class="relative w-16 h-16 mb-6">
+            <div
+              class="absolute inset-0 bg-green-100 rounded-full animate-ping opacity-75"
+            ></div>
+            <div
+              class="relative w-full h-full bg-green-50 rounded-full flex items-center justify-center border-2 border-green-200"
+            >
+              <UIcon
+                name="i-lucide-loader-2"
+                class="w-8 h-8 text-green-500 animate-spin"
+              />
+            </div>
+          </div>
+          <h3 class="text-lg font-bold text-slate-900 animate-pulse mb-1">
+            Designing Lesson Plan...
+          </h3>
+          <p class="text-sm text-slate-500 font-medium">
+            Consulting pedagogical engine
+          </p>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup>
+import { ref, watch, computed, nextTick } from "vue";
+import { useProjectStore } from "~/stores/projects";
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  initialTopic: {
+    type: String,
+    default: "",
+  },
+});
+const emit = defineEmits(["update:modelValue"]);
+
+const store = useProjectStore();
+const isOpen = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const persona = ref("student");
+const generating = ref(false);
+const errorMessage = ref("");
+
+const personas = [
+  {
+    value: "kid",
+    label: "Beginner",
+    icon: "i-lucide-sprout",
+    desc: "Simplifies concepts using intuitive visual analogies.",
+  },
+  {
+    value: "student",
+    label: "Student",
+    icon: "i-lucide-graduation-cap",
+    desc: "Structured, step-by-step guidance for academic depth.",
+  },
+  {
+    value: "expert",
+    label: "Expert",
+    icon: "i-lucide-brain",
+    desc: "Rigorous technical analysis for advanced reasoning.",
+  },
+];
+
+watch(isOpen, (val) => {
+  if (val) {
+    errorMessage.value = "";
+  }
+  if (!val) {
+    setTimeout(() => {
+      generating.value = false;
+    }, 300);
+  }
+});
+
+watch(
+  () => store.draftTopic,
+  (val) => {
+    if (val && val.length > 0 && generating.value) {
+      isOpen.value = false;
+    }
+  },
+);
+
+async function generate() {
+  if (!store.draftTopic || generating.value) return;
+  generating.value = true;
+  errorMessage.value = "";
+  try {
+    await store.draftPlan(
+      store.draftTopic,
+      persona.value,
+      store.targetDuration,
+    );
+    isOpen.value = false;
+  } catch (error) {
+    console.error("Drafting failed:", error);
+    errorMessage.value =
+      error.message || "Something went wrong. Please try again.";
+    generating.value = false;
+  }
+}
+</script>

frontend/app/components/AppLogo.vue

@@ -0,0 +1,66 @@
+<template>
+  <svg
+    width="1020"
+    height="200"
+    viewBox="0 0 1020 200"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M377 200C379.16 200 381 198.209 381 196V103C381 103 386 112 395 127L434 194C435.785 197.74 439.744 200 443 200H470V50H443C441.202 50 439 51.4941 439 54V148L421 116L385 55C383.248 51.8912 379.479 50 376 50H350V200H377Z"
+      fill="currentColor"
+    />
+    <path
+      d="M726 92H739C742.314 92 745 89.3137 745 86V60H773V92H800V116H773V159C773 169.5 778.057 174 787 174H800V200H783C759.948 200 745 185.071 745 160V116H726V92Z"
+      fill="currentColor"
+    />
+    <path
+      d="M591 92V154C591 168.004 585.742 179.809 578 188C570.258 196.191 559.566 200 545 200C530.434 200 518.742 196.191 511 188C503.389 179.809 498 168.004 498 154V92H514C517.412 92 520.769 92.622 523 95C525.231 97.2459 526 98.5652 526 102V154C526 162.059 526.457 167.037 530 171C533.543 174.831 537.914 176 545 176C552.217 176 555.457 174.831 559 171C562.543 167.037 563 162.059 563 154V102C563 98.5652 563.769 96.378 566 94C567.96 91.9107 570.028 91.9599 573 92C573.411 92.0055 574.586 92 575 92H591Z"
+      fill="currentColor"
+    />
+    <path
+      d="M676 144L710 92H684C680.723 92 677.812 93.1758 676 96L660 120L645 97C643.188 94.1758 639.277 92 636 92H611L645 143L608 200H634C637.25 200 640.182 196.787 642 194L660 167L679 195C680.818 197.787 683.75 200 687 200H713L676 144Z"
+      fill="currentColor"
+    />
+    <!-- Replaced primary logo path with new boxes icon -->
+    <g
+      transform="translate(0, 10) scale(7.5)"
+      stroke="#00dc82"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"
+        fill="none"
+      />
+      <path d="m7 16.5-4.74-2.85" />
+      <path d="m7 16.5 5-3" />
+      <path d="M7 16.5v5.17" />
+      <path
+        d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"
+        fill="none"
+      />
+      <path d="m17 16.5-5-3" />
+      <path d="m17 16.5 4.74-2.85" />
+      <path d="M17 16.5v5.17" />
+      <path
+        d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"
+        fill="none"
+      />
+      <path d="M12 8 7.26 5.15" />
+      <path d="m12 8 4.74-2.85" />
+      <path d="M12 13.5V8" />
+    </g>
+    <path
+      d="M958 60.0001H938C933.524 60.0001 929.926 59.9395 927 63C924.074 65.8905 925 67.5792 925 72V141C925 151.372 923.648 156.899 919 162C914.352 166.931 908.468 169 899 169C889.705 169 882.648 166.931 878 162C873.352 156.899 873 151.372 873 141V72.0001C873 67.5793 872.926 65.8906 870 63.0001C867.074 59.9396 863.476 60.0001 859 60.0001H840V141C840 159.023 845.016 173.458 855 184C865.156 194.542 879.893 200 899 200C918.107 200 932.844 194.542 943 184C953.156 173.458 958 159.023 958 141V60.0001Z"
+      fill="var(--ui-primary)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1000 60.0233L1020 60V77L1020 128V156.007L1020 181L1020 189.004C1020 192.938 1019.98 194.429 1017 197.001C1014.02 199.725 1009.56 200 1005 200H986.001V181.006L986 130.012V70.0215C986 66.1576 986.016 64.5494 989 62.023C991.819 59.6358 995.437 60.0233 1000 60.0233Z"
+      fill="var(--ui-primary)"
+    />
+  </svg>
+</template>

frontend/app/components/ChatInterface.vue

@@ -0,0 +1,341 @@
+<template>
+  <div class="flex flex-col h-full bg-slate-50/30">
+    <!-- Header Controls -->
+    <div
+      v-if="messages.length > 0"
+      class="px-4 py-2 border-b border-slate-100 flex justify-end shrink-0"
+    >
+      <UButton
+        icon="i-lucide-trash-2"
+        color="gray"
+        variant="ghost"
+        size="xs"
+        label="Clear Chat"
+        @click="chatStore.clearHistory(project.id)"
+        class="text-slate-400 hover:text-red-500 transition-colors"
+      />
+    </div>
+
+    <div
+      class="flex-1 p-4 overflow-y-auto custom-scrollbar space-y-4"
+      ref="chatContainer"
+    >
+      <!-- Welcome message -->
+      <div
+        v-if="messages.length === 0"
+        class="h-full flex flex-col items-center justify-center text-center p-6 animate-fade-in-up"
+      >
+        <div
+          class="w-16 h-16 rounded-2xl bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center mb-6 shadow-lg shadow-green-500/20"
+        >
+          <UIcon name="i-lucide-bot" class="w-8 h-8 text-white" />
+        </div>
+        <h3 class="font-bold text-slate-900 mb-2">AI Tutor Ready</h3>
+        <p class="text-sm text-slate-500 mb-8 max-w-[240px]">
+          Ask me any questions about the video or educational concepts.
+        </p>
+
+        <!-- Vertical Suggestion Chips -->
+        <div
+          v-if="suggestions.length > 0"
+          class="flex flex-col gap-2.5 w-full max-w-[300px]"
+        >
+          <p
+            class="text-[10px] uppercase tracking-[0.1em] font-bold text-slate-400 mb-1 text-left px-1"
+          >
+            Suggested for you
+          </p>
+          <button
+            v-for="suggestion in suggestions"
+            :key="suggestion"
+            class="group flex items-center gap-3 px-4 py-3 rounded-xl bg-white border border-slate-100 text-left text-sm text-slate-700 hover:border-green-500 hover:bg-green-50/30 transition-all duration-200 shadow-sm hover:shadow-md"
+            @click="useSuggestion(suggestion)"
+          >
+            <UIcon
+              name="i-lucide-sparkles"
+              class="w-4 h-4 text-green-500 opacity-40 group-hover:opacity-100 transition-opacity shrink-0"
+            />
+            <span class="whitespace-normal leading-relaxed text-slate-700">{{
+              suggestion
+            }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Messages -->
+      <div
+        v-for="(msg, i) in messages"
+        :key="i"
+        class="flex animate-fade-in-up"
+        :class="msg.role === 'user' ? 'justify-end' : 'justify-start'"
+      >
+        <!-- User Bubble -->
+        <div
+          v-if="msg.role === 'user'"
+          class="max-w-[85%] p-4 rounded-2xl shadow-sm text-sm leading-relaxed border transition-all bg-green-50/50 border-green-100 text-slate-800 rounded-tr-sm"
+        >
+          <div
+            class="prose prose-sm max-w-none text-slate-800 font-medium prose-p:mb-0 last:prose-p:mb-0 prose-code:bg-slate-200/60 prose-code:text-slate-800 prose-code:px-1 prose-code:py-0.5 prose-code:rounded"
+            v-html="renderMarkdown(msg.content)"
+          ></div>
+        </div>
+
+        <!-- AI Message - Clean text, no avatar, no bubble -->
+        <div v-else class="w-full transition-all duration-200">
+          <div
+            class="prose prose-sm max-w-none prose-p:mb-4 last:prose-p:mb-0 prose-p:text-slate-700 prose-p:leading-7 prose-headings:text-slate-900 prose-headings:font-bold prose-headings:mb-3 prose-headings:mt-6 first:prose-headings:mt-0 prose-h2:text-base prose-h2:border-b prose-h2:border-slate-200 prose-h2:pb-2 prose-h3:text-sm prose-h3:text-slate-900 prose-h3:font-medium prose-h4:text-sm prose-h4:text-slate-800 prose-h4:font-medium prose-strong:text-slate-900 prose-strong:font-semibold prose-ul:list-disc prose-ul:pl-5 prose-ul:mb-4 prose-ul:space-y-1.5 prose-li:text-slate-700 prose-ol:list-decimal prose-ol:pl-5 prose-ol:mb-4 prose-ol:space-y-1.5 prose-li:text-slate-700 prose-code:bg-slate-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-emerald-700 prose-code:font-mono prose-code:text-[0.85em] prose-code:before:content-none prose-code:after:content-none prose-pre:bg-[#0f172a] prose-pre:text-green-400 prose-pre:border prose-pre:border-slate-800 prose-pre:rounded-lg prose-pre:p-4 prose-pre:mt-4 prose-pre:mb-4 prose-pre:overflow-x-auto prose-blockquote:border-l-2 prose-blockquote:border-emerald-300 prose-blockquote:bg-emerald-50/30 prose-blockquote:pl-4 prose-blockquote:pr-4 prose-blockquote:py-3 prose-blockquote:rounded-r-xl prose-blockquote:italic prose-blockquote:text-slate-600 prose-blockquote:my-4 prose-table:w-full prose-table:border-collapse prose-table:my-4 prose-th:bg-slate-50 prose-th:border prose-th:border-slate-200 prose-th:px-3 prose-th:py-2 prose-th:text-left prose-th:text-xs prose-th:font-bold prose-th:text-slate-700 prose-td:border prose-td:border-slate-200 prose-td:px-3 prose-td:py-2 prose-td:text-sm prose-td:text-slate-700 prose-hr:border-slate-200 prose-hr:my-6 prose-a:text-emerald-600 prose-a:underline prose-a:decoration-emerald-600/30 prose-a:underline-offset-2 hover:prose-a:decoration-emerald-600/60 space-y-2"
+            v-html="renderMarkdown(msg.content)"
+          ></div>
+        </div>
+      </div>
+
+      <!-- Loading Indicator -->
+      <div v-if="isTyping" class="flex justify-start animate-fade-in">
+        <div
+          class="bg-green-50 border border-green-100 rounded-2xl rounded-tl-sm px-4 py-3 flex items-center gap-1.5 shadow-sm"
+        >
+          <span
+            class="w-1.5 h-1.5 bg-green-400 rounded-full animate-bounce"
+          ></span>
+          <span
+            class="w-1.5 h-1.5 bg-green-400 rounded-full animate-bounce"
+            style="animation-delay: 0.15s"
+          ></span>
+          <span
+            class="w-1.5 h-1.5 bg-green-400 rounded-full animate-bounce"
+            style="animation-delay: 0.3s"
+          ></span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Input Area -->
+    <div class="bg-white/80 border-t border-slate-100 shrink-0">
+      <div class="p-4">
+        <form @submit.prevent="sendMessage" class="relative group">
+          <input
+            v-model="newMessage"
+            type="text"
+            @keydown.enter.prevent="sendMessage"
+            :placeholder="
+              projectStore.loadingModels
+                ? 'Loading AI models...'
+                : 'Ask a question...'
+            "
+            class="w-full premium-input rounded-xl pl-4 pr-12 py-3 text-sm outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+            :disabled="isTyping || projectStore.loadingModels"
+          />
+          <button
+            type="submit"
+            :disabled="
+              !newMessage.trim() || isTyping || projectStore.loadingModels
+            "
+            class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center rounded-lg bg-green-500 text-white hover:bg-green-600 disabled:opacity-50 disabled:bg-slate-300 transition-colors"
+            :title="
+              projectStore.loadingModels ? 'Models loading' : 'Send message'
+            "
+          >
+            <UIcon
+              :name="
+                projectStore.loadingModels
+                  ? 'i-lucide-loader-2'
+                  : 'i-lucide-send'
+              "
+              class="w-4 h-4"
+              :class="
+                projectStore.loadingModels
+                  ? 'animate-spin'
+                  : '-translate-x-[1px] translate-y-[1px]'
+              "
+            />
+          </button>
+        </form>
+        <div class="mt-2 text-[10px] text-center text-slate-400">
+          AlgoVision can make mistakes. Check important information.
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, nextTick, computed } from "vue";
+import { marked } from "marked";
+import markedKatex from "marked-katex-extension";
+import "katex/dist/katex.min.css";
+import api from "~/utils/api";
+import { useProjectStore } from "~/stores/projects";
+import { useChatStore } from "~/stores/chat";
+
+marked.use(
+  markedKatex({
+    throwOnError: false,
+    output: "html",
+  }),
+);
+
+const props = defineProps({
+  project: { type: Object, required: true },
+});
+
+const projectStore = useProjectStore();
+const chatStore = useChatStore();
+
+const messages = computed(() => chatStore.getHistory(props.project.id));
+const suggestions = computed(() => chatStore.getSuggestions(props.project.id));
+const isTyping = ref(false);
+const newMessage = ref("");
+const chatContainer = ref(null);
+
+const fetchSuggestions = async () => {
+  try {
+    await chatStore.fetchSuggestions(props.project.id, projectStore.apiKeys);
+  } catch (err) {
+    console.error("Error fetching suggestions:", err);
+  }
+};
+
+const useSuggestion = (text) => {
+  newMessage.value = text;
+  sendMessage();
+};
+
+const scrollToBottom = async () => {
+  await nextTick();
+  if (chatContainer.value) {
+    chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
+  }
+};
+
+onMounted(() => {
+  scrollToBottom();
+  if (!projectStore.loadingModels) {
+    fetchSuggestions();
+  }
+});
+
+watch(
+  () => projectStore.loadingModels,
+  (loading) => {
+    if (!loading && suggestions.value.length === 0) {
+      fetchSuggestions();
+    }
+  },
+);
+
+watch(messages, scrollToBottom, { deep: true });
+watch(isTyping, scrollToBottom);
+
+const renderMarkdown = (text) => {
+  if (!text) return "";
+  try {
+    return marked.parse(text);
+  } catch (e) {
+    return text;
+  }
+};
+
+const sendMessage = async () => {
+  if (!newMessage.value.trim() || isTyping.value) return;
+
+  const userText = newMessage.value;
+  chatStore.addMessage(props.project.id, { role: "user", content: userText });
+  newMessage.value = "";
+  isTyping.value = true;
+
+  try {
+    const res = await api.chat(props.project.id, {
+      message: userText,
+      history: messages.value.slice(0, -1),
+      model:
+        projectStore.planningModel ||
+        projectStore.selectedModel ||
+        "gemini/gemini-3.1-flash-latest",
+      openai_api_key: projectStore.apiKeys.openai,
+      anthropic_api_key: projectStore.apiKeys.anthropic,
+      gemini_api_key: projectStore.apiKeys.gemini,
+    });
+
+    chatStore.addMessage(props.project.id, {
+      role: "assistant",
+      content: res.response,
+    });
+  } catch (error) {
+    console.error("Chat error:", error);
+    chatStore.addMessage(props.project.id, {
+      role: "assistant",
+      content: `**Error:** Failed to connect to the AI engine. ${error.response?.data?.detail || error.message}`,
+    });
+  } finally {
+    isTyping.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(203, 213, 225, 0.5);
+  border-radius: 2px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(148, 163, 184, 0.8);
+}
+
+/* Additional prose polish for AI responses */
+:deep(.prose a) {
+  color: #059669;
+  text-decoration: underline;
+  text-decoration-color: rgba(5, 150, 105, 0.3);
+  text-underline-offset: 2px;
+  transition: all 0.15s ease;
+}
+:deep(.prose a:hover) {
+  color: #047857;
+  text-decoration-color: rgba(5, 150, 105, 0.6);
+}
+
+/* Inline math/latex */
+:deep(.prose .katex) {
+  font-size: 0.95em;
+}
+
+/* Display math blocks */
+:deep(.prose .katex-display) {
+  margin: 0.75rem 0;
+  padding: 0.75rem;
+  overflow-x: auto;
+}
+
+/* Smooth text rendering */
+:deep(.prose *) {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Code block line numbers area (if any) */
+:deep(.prose pre code) {
+  font-family:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
+}
+
+/* Prevent code wrap */
+:deep(.prose pre) {
+  white-space: pre;
+  word-break: normal;
+  overflow-wrap: normal;
+}
+
+/* Table responsiveness */
+:deep(.prose table) {
+  display: table;
+  width: 100%;
+  overflow-x: auto;
+}
+</style>

frontend/app/components/GenerationWidget.vue

@@ -0,0 +1,700 @@
+<template>
+  <Transition name="widget-slide">
+    <div
+      v-if="
+        store.isGenerating ||
+        store.generationState.completed ||
+        store.generationState.errorMsg
+      "
+      class="fixed bottom-6 right-6 z-50 transition-all duration-500"
+      :class="isMinimized ? 'w-16 h-16' : 'w-88'"
+    >
+      <!-- Minimized State (Bubble) -->
+      <button
+        v-if="isMinimized"
+        @click="isMinimized = false"
+        class="w-16 h-16 rounded-full shadow-2xl flex items-center justify-center relative group overflow-hidden cursor-pointer border-2"
+        :class="
+          store.isGenerating
+            ? 'bg-gradient-to-br from-green-400 to-green-600 border-green-300'
+            : store.generationState.completed
+              ? 'bg-gradient-to-br from-emerald-400 to-emerald-600 border-emerald-300'
+              : 'bg-gradient-to-br from-slate-400 to-slate-600 border-slate-300'
+        "
+      >
+        <!-- Rhythmic Pulse Rings -->
+        <template v-if="store.isGenerating">
+          <div
+            class="absolute inset-0 bg-white/20 animate-ping-slow rounded-full"
+          ></div>
+          <div
+            class="absolute inset-0 bg-white/10 animate-ping-slower rounded-full"
+          ></div>
+        </template>
+
+        <!-- Icon + Progress -->
+        <div
+          class="relative z-10 flex flex-col items-center justify-center w-full h-full gap-0.5"
+        >
+          <UIcon
+            :name="currentIcon"
+            class="w-6 h-6 text-white transition-all duration-300 drop-shadow-sm"
+            :class="{
+              'animate-float': store.isGenerating,
+              'animate-spin-slow': store.generationState.isReconnecting,
+            }"
+          />
+          <!-- Always-visible progress -->
+          <span
+            v-if="store.isGenerating"
+            class="text-[9px] font-black text-white/90 tabular-nums leading-none"
+          >
+            {{ store.progress }}%
+          </span>
+        </div>
+
+        <!-- Progress Ring -->
+        <svg
+          class="absolute inset-0 -rotate-90 w-full h-full pointer-events-none"
+        >
+          <circle
+            cx="50%"
+            cy="50%"
+            r="45%"
+            fill="transparent"
+            stroke="currentColor"
+            stroke-width="2.5"
+            class="text-white/20"
+          />
+          <circle
+            cx="50%"
+            cy="50%"
+            r="45%"
+            fill="transparent"
+            stroke="currentColor"
+            stroke-width="3"
+            :stroke-dasharray="`${(store.progress / 100) * 282} 282`"
+            class="text-white/80 transition-all duration-700 ease-in-out"
+            stroke-linecap="round"
+          />
+        </svg>
+      </button>
+
+      <!-- Expanded State (Card) -->
+      <div
+        v-else
+        class="bg-white/95 backdrop-blur-xl rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.15)] border border-slate-200 overflow-hidden overflow-y-auto max-h-[80vh]"
+      >
+        <!-- Completion Notification View -->
+        <div
+          v-if="store.generationState.completed"
+          @click="handleViewProject"
+          class="p-5 bg-gradient-to-br from-[#00dc82] to-[#15803d] text-white cursor-pointer hover:brightness-110 transition-all flex items-center gap-4 group active:scale-[0.98] shadow-[inset_0_1px_rgba(255,255,255,0.4),0_10px_25px_-10px_rgba(0,220,130,0.5)] border-b border-white/10"
+        >
+          <div
+            class="p-3 bg-white/20 backdrop-blur-md rounded-2xl group-hover:rotate-12 group-hover:scale-110 transition-all duration-300 border border-white/30 shadow-lg"
+          >
+            <UIcon name="i-lucide-party-popper" class="w-7 h-7" />
+          </div>
+          <div class="flex-1 min-w-0">
+            <p
+              class="font-black text-[10px] uppercase tracking-[0.25em] mb-1 opacity-90 drop-shadow-sm"
+            >
+              Success!
+            </p>
+            <p class="font-black text-sm leading-tight truncate drop-shadow-sm">
+              {{
+                store.currentProject?.title ||
+                store.generationState.completedProjectTitle ||
+                "Your project"
+              }}
+              is ready
+            </p>
+          </div>
+          <div class="flex items-center gap-2">
+            <div
+              class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-all border border-white/10"
+            >
+              <UIcon
+                name="i-lucide-arrow-right"
+                class="w-5 h-5 animate-bounce-x"
+              />
+            </div>
+            <button
+              @click.stop="store.resetGenerationState()"
+              class="p-2 hover:bg-white/20 rounded-xl transition-colors cursor-pointer group/close flex items-center justify-center border border-transparent hover:border-white/20 shadow-none hover:shadow-lg"
+              title="Dismiss"
+            >
+              <UIcon
+                name="i-lucide-x"
+                class="w-4 h-4 opacity-70 group-hover/close:opacity-100"
+              />
+            </button>
+          </div>
+        </div>
+
+        <!-- Active Generation View -->
+        <div v-else>
+          <!-- Header -->
+          <div
+            class="px-4 py-3 bg-slate-50/80 border-b border-slate-100 flex items-center justify-between"
+          >
+            <div class="flex items-center gap-2 min-w-0">
+              <UIcon
+                :name="currentIcon"
+                class="w-4 h-4 flex-shrink-0"
+                :class="[
+                  store.isGenerating || store.generationState.isReconnecting
+                    ? 'text-green-600'
+                    : 'text-slate-400',
+                  {
+                    'animate-spin':
+                      (store.isGenerating ||
+                        store.generationState.isReconnecting) &&
+                      currentIcon === 'i-lucide-loader-2',
+                  },
+                ]"
+              />
+              <span
+                class="font-black text-slate-800 text-[10px] uppercase tracking-[0.15em] truncate"
+              >
+                {{ store.currentProject?.title || "Production Studio" }}
+              </span>
+            </div>
+            <button
+              @click="isMinimized = true"
+              class="p-1 hover:bg-slate-200 rounded text-slate-400 transition-colors cursor-pointer"
+            >
+              <UIcon name="i-lucide-minus" class="w-4 h-4" />
+            </button>
+          </div>
+
+          <!-- Content -->
+          <div class="p-5 space-y-4">
+            <div>
+              <div class="flex justify-between items-end mb-2">
+                <div class="flex flex-col gap-1 min-w-0">
+                  <span
+                    class="text-[9px] font-black uppercase tracking-[0.2em] text-slate-400 leading-none truncate"
+                  >
+                    {{
+                      store.generationState.isReconnecting
+                        ? "Reconnecting..."
+                        : currentStatusLabel
+                    }}
+                  </span>
+                  <!-- Core Stages Progress -->
+                  <!-- <div
+                    class="grid grid-cols-1 gap-2 mt-3 p-2 bg-slate-50/50 rounded-xl border border-slate-100"
+                  >
+                    <div
+                      v-for="(progress, stage) in store.generationState
+                        .stageProgress"
+                      :key="stage"
+                      class="space-y-1"
+                    >
+                      <div
+                        class="flex justify-between items-center text-[9px] font-black uppercase tracking-tighter"
+                      >
+                        <span
+                          :class="
+                            progress > 0 ? 'text-slate-700' : 'text-slate-400'
+                          "
+                          >{{ stage }}</span
+                        >
+                        <span
+                          :class="
+                            progress === 100
+                              ? 'text-green-600'
+                              : 'text-slate-500'
+                          "
+                          >{{ progress }}%</span
+                        >
+                      </div>
+                      <div
+                        class="h-1 w-full bg-slate-200/50 rounded-full overflow-hidden"
+                      >
+                        <div
+                          class="h-full transition-all duration-700 ease-in-out"
+                          :class="
+                            progress === 100
+                              ? 'bg-green-500'
+                              : progress > 0
+                                ? 'bg-green-400'
+                                : 'bg-slate-300'
+                          "
+                          :style="{ width: `${progress}%` }"
+                        ></div>
+                      </div>
+                    </div>
+                  </div> -->
+                  <span
+                    v-if="store.generationState.accumulatedCost > 0"
+                    class="text-[9px] font-bold text-emerald-600 tabular-nums flex items-center gap-1"
+                  >
+                    <UIcon name="i-lucide-receipt-text" class="w-3 h-3" />
+                    {{ store.accumulatedCostPHP }}
+                  </span>
+                </div>
+                <span
+                  class="text-2xl font-black text-slate-900 leading-none tabular-nums"
+                  >{{ store.progress }}%</span
+                >
+              </div>
+              <!-- Progress Bar -->
+              <div
+                class="h-3 w-full bg-slate-200/40 rounded-full overflow-hidden relative border border-slate-100/50 backdrop-blur-sm shadow-[inset_0_1px_4px_rgba(0,0,0,0.05)]"
+              >
+                <!-- Progress Fill -->
+                <div
+                  class="h-full bg-gradient-to-r from-green-400 via-emerald-500 to-emerald-600 transition-all duration-1000 ease-out relative"
+                  :style="{ width: `${store.progress}%` }"
+                >
+                  <!-- Inner Gloss/Sheen -->
+                  <div
+                    class="absolute inset-x-0 top-0 h-[35%] bg-white/20 blur-[1px]"
+                  ></div>
+
+                  <!-- Main Shimmer (Fast/Sharp) -->
+                  <div
+                    v-if="store.isGenerating"
+                    class="absolute top-0 bottom-0 left-0 w-[30%] bg-gradient-to-r from-transparent via-white/40 to-transparent animate-shimmer-fast"
+                  ></div>
+
+                  <!-- Secondary Shimmer (Slow/Broad) -->
+                  <div
+                    v-if="store.isGenerating"
+                    class="absolute top-0 bottom-0 left-0 w-[100%] bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer-slow"
+                  ></div>
+
+                  <!-- Leading Edge Glow -->
+                  <!-- <div
+                    class="absolute right-0 top-1/2 -translate-y-1/2 w-4 h-full bg-white/40 blur-md"
+                  ></div>
+                  <div
+                    class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-2/3 bg-white/80 rounded-full blur-[1px] mr-1"
+                  ></div> -->
+                </div>
+
+                <!-- Animated Background Pattern (Subtle) -->
+                <div
+                  class="absolute inset-0 opacity-[0.03] pointer-events-none"
+                  style="
+                    background-image: repeating-linear-gradient(
+                      45deg,
+                      #000 0,
+                      #000 1px,
+                      transparent 0,
+                      transparent 10px
+                    );
+                    background-size: 20px 20px;
+                  "
+                ></div>
+              </div>
+            </div>
+
+            <!-- Current Content -->
+            <div
+              class="bg-slate-900/5 p-2.5 rounded-xl border border-slate-100 min-h-[44px] space-y-1.5"
+            >
+              <p
+                class="text-[9px] text-slate-700 font-black uppercase tracking-[0.14em] leading-relaxed whitespace-normal break-words"
+              >
+                {{ currentTaskTitle }}
+              </p>
+            </div>
+
+            <!-- Actions -->
+            <div class="pt-1">
+              <button
+                v-if="
+                  store.isGenerating || store.generationState.isReconnecting
+                "
+                @click.stop="handleStop"
+                class="w-full py-2 text-red-500 text-[9px] font-black uppercase tracking-[0.2em] hover:bg-red-50 rounded-xl transition-colors border border-transparent hover:border-red-100 cursor-pointer"
+              >
+                Cancel Generation
+              </button>
+
+              <!-- Error State Actions -->
+              <div v-if="store.generationState.errorMsg" class="space-y-3">
+                <!-- <div class="p-3 bg-red-50 rounded-2xl border border-red-100">
+                  <p
+                    class="text-[10px] text-red-600 font-bold text-center leading-relaxed"
+                  >
+                    {{ store.generationState.errorMsg }}
+                  </p>
+                </div> -->
+                <button
+                  @click="store.initWebSocket(store.currentSessionId)"
+                  class="w-full py-2.5 rounded-2xl bg-slate-900 text-white text-xs font-black uppercase tracking-widest hover:bg-slate-800 transition-all shadow-lg cursor-pointer"
+                >
+                  Reconnect Now
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Stop Confirmation Overlay -->
+          <div
+            v-if="confirmStop"
+            class="absolute inset-0 z-50 bg-white/95 backdrop-blur-sm flex flex-col items-center justify-center p-4 text-center animate-in fade-in zoom-in duration-300"
+          >
+            <div
+              class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center mb-3"
+            >
+              <UIcon
+                name="i-lucide-alert-triangle"
+                class="w-6 h-6 text-red-500"
+              />
+            </div>
+            <h3 class="text-sm font-semibold text-slate-900 mb-1">
+              Stop Generation?
+            </h3>
+            <p class="text-xs text-slate-500 mb-4 px-2">
+              The AI will stop working immediately. This cannot be undone.
+            </p>
+
+            <!-- Delete Toggle -->
+            <label
+              class="mb-5 px-2 flex items-center gap-2 group cursor-pointer select-none justify-center"
+            >
+              <input
+                type="checkbox"
+                v-model="deleteDir"
+                class="w-4 h-4 rounded border-slate-300 text-red-600 focus:ring-red-500 accent-red-600"
+              />
+              <span
+                class="text-[10px] font-bold text-slate-600 group-hover:text-slate-900 transition-colors uppercase tracking-wider"
+              >
+                Delete project directory
+              </span>
+            </label>
+
+            <div class="flex items-center gap-2 w-full max-w-[180px]">
+              <button
+                @click.stop="cancelStop"
+                class="flex-1 py-1.5 px-3 rounded-lg text-xs font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 transition-colors"
+              >
+                No, Keep
+              </button>
+              <button
+                @click.stop="confirmCancellation"
+                class="flex-1 py-1.5 px-3 rounded-lg text-xs font-medium text-white bg-red-600 hover:bg-red-700 transition-colors shadow-sm"
+              >
+                Stop Now
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useProjectStore } from "~/stores/projects";
+import { useRoute, useRouter } from "vue-router";
+
+const store = useProjectStore();
+const router = useRouter();
+const route = useRoute();
+const isMinimized = ref(false);
+const confirmStop = ref(false);
+const deleteDir = ref(true);
+
+const LOADING_MESSAGES = [
+  "If this takes too long, try blinking.",
+  "Loading… because perfection can’t be rushed.",
+  "Still loading… thanks for sticking with us.",
+  "This is taking longer than expected… we’re on it.",
+  "Not gonna lie, this is a bit slow today.",
+  "Loading… we promise it’s doing something.",
+  "Still working… computers need thinking time too.",
+  "This part always takes a second.",
+  "Loading… because perfection can’t be rushed.",
+  "Hang tight… we’re getting there.",
+  "Working on it… slower than we’d like.",
+  "Yep, still loading. Appreciate your patience.",
+  "Just a moment… or two… maybe three.",
+  "This is awkwardly slow… thanks for waiting.",
+  "Loading… we wish this were faster too.",
+  "Still spinning… not just for decoration.",
+  "Doing some behind-the-scenes magic… slowly.",
+  "Processing… one tiny step at a time.",
+  "Still loading… good things take time.",
+  "Taking its sweet time… hang in there.",
+  "Loading… we didn’t expect this either.",
+  "Almost there… we think.",
+  "Still going… thanks for not leaving.",
+  "Loading… because things are complicated.",
+  "Working… just not at lightning speed.",
+  "This might take a sec… or a few.",
+  "Still loading… we owe you one.",
+  "Crunching numbers… very, very carefully.",
+  "Taking a little longer than planned.",
+  "Loading… please don’t judge us.",
+  "Still trying its best…",
+  "This is taking longer than expected… we blame the internet.",
+  "Yep, it’s still loading.",
+  "Getting there… slowly but surely.",
+  "Processing… like a Monday morning.",
+  "Not stuck—just thinking really hard.",
+  "This is why people get coffee.",
+  "Still happening… promise.",
+  "Loading… we hear you sighing.",
+  "One moment… we mean it this time.",
+  "Taking a bit… thanks for hanging in.",
+  "Still working… no need to refresh (yet).",
+  "Almost… okay not quite yet.",
+  "Loading… we’ll be quick-ish.",
+  "It’s thinking… deeply.",
+  "Working… at its own pace.",
+  "Still loading… you’re doing great.",
+  "Just a sec… give or take a few secs.",
+  "This part’s a little slow—sorry about that.",
+  "Loading… we promise it’s worth it.",
+  "Still going… we haven’t forgotten you.",
+  "Almost ready… hang tight just a bit more.",
+  "Loading… thanks for your patience, seriously.",
+];
+
+const currentMessageIndex = ref(0);
+let messageInterval = null;
+
+const startMessageCycling = () => {
+  if (messageInterval) clearInterval(messageInterval);
+  messageInterval = setInterval(() => {
+    currentMessageIndex.value =
+      (currentMessageIndex.value + 1) % LOADING_MESSAGES.length;
+  }, 7000);
+};
+
+const stopMessageCycling = () => {
+  if (messageInterval) clearInterval(messageInterval);
+  messageInterval = null;
+};
+
+watch(
+  () => store.isGenerating,
+  (val) => {
+    if (val) startMessageCycling();
+    else stopMessageCycling();
+  },
+  { immediate: true },
+);
+
+const currentStatusLabel = computed(() => {
+  const status = store.status?.replace("_", " ");
+  return status || "Initializing";
+});
+
+const currentTaskTitle = computed(() => {
+  // Use dynamic loading messages while generating
+  if (store.isGenerating) {
+    return LOADING_MESSAGES[currentMessageIndex.value];
+  }
+
+  const task = store.generationState.currentTask || "";
+  const isFixAttempt = /^fixing\s+scene\s+\d+\s+\(attempt\s+\d+\/\d+\)$/i.test(
+    task.trim(),
+  );
+  const isSceneCompleted = /^scene\s+\d+\s+completed$/i.test(task.trim());
+  if (isFixAttempt && store.progress < 100) {
+    return "Improving scene quality...";
+  }
+  if (isSceneCompleted && store.progress < 100) {
+    return "Rendering scenes...";
+  }
+  if (task) return task;
+
+  const status = (store.status || "").toLowerCase();
+  const phase = store.generationState.currentPhase;
+  if (status.includes("assembly") || status.includes("finaliz") || phase >= 5) {
+    return "Assembling final video...";
+  }
+  if (status.includes("render") || phase === 4) return "Rendering scenes...";
+  if (status.includes("audio") || phase === 3) return "Generating narration...";
+  if (status.includes("script") || phase === 2)
+    return "Writing scene scripts...";
+  if (status.includes("plan") || phase === 1) return "Planning video...";
+  return "Processing...";
+});
+
+const currentIcon = computed(() => {
+  if (store.generationState.completed) return "i-lucide-party-popper";
+  if (store.generationState.isReconnecting) return "i-lucide-loader-2";
+
+  const status = (store.status || "").toLowerCase();
+  const phase = store.generationState.currentPhase;
+
+  if (status.includes("script") || status.includes("writing") || phase === 2)
+    return "i-lucide-scroll-text";
+  if (status.includes("audio") || status.includes("synth") || phase === 3)
+    return "i-lucide-mic-2";
+  if (
+    status.includes("video") ||
+    status.includes("render") ||
+    status.includes("scene") ||
+    phase === 4
+  )
+    return "i-lucide-film";
+  if (status.includes("finaliz") || phase >= 5) return "i-lucide-package-check";
+
+  // Default: planning / initializing
+  return "i-lucide-sparkles";
+});
+
+async function handleStop() {
+  console.log("!!! [WIDGET] handleStop triggered !!!");
+  confirmStop.value = true;
+}
+
+function cancelStop() {
+  confirmStop.value = false;
+}
+
+async function confirmCancellation() {
+  console.log("!!! [WIDGET] confirmCancellation triggered !!!");
+  confirmStop.value = false;
+
+  try {
+    const result = await store.stopGeneration(undefined, deleteDir.value);
+    console.log(
+      "!!! [WIDGET] store.stopGeneration finished with result:",
+      result,
+    );
+  } catch (err) {
+    console.error("!!! [WIDGET] Error in confirmCancellation API call:", err);
+  }
+}
+
+async function handleViewProject() {
+  const fromCompleted = store.generationState.completedProjectId;
+  const fromCurrent = store.currentProject?.id;
+  const fromRoute =
+    route.path.startsWith("/project/") && route.params.id
+      ? String(route.params.id)
+      : null;
+  const fromLatestCompleted =
+    [...store.projects].reverse().find((p) => p?.status === "completed")?.id ||
+    null;
+
+  const projectId =
+    fromCompleted || fromCurrent || fromRoute || fromLatestCompleted;
+
+  if (!projectId) {
+    console.error("!!! [WIDGET] Cannot redirect: No project ID available.");
+    return;
+  }
+
+  const target = `/project/${projectId}`;
+  if (route.path !== target) {
+    await router.push(target);
+  }
+  store.resetGenerationState();
+}
+</script>
+
+<style scoped>
+.widget-slide-enter-active,
+.widget-slide-leave-active {
+  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.widget-slide-enter-from,
+.widget-slide-leave-to {
+  transform: translateY(100px) scale(0.5);
+  opacity: 0;
+}
+
+@keyframes bounce-x {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(5px);
+  }
+}
+.animate-bounce-x {
+  animation: bounce-x 1s infinite;
+}
+
+@keyframes ping-slow {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+.animate-ping-slow {
+  animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes ping-slower {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.8);
+    opacity: 0;
+  }
+}
+.animate-ping-slower {
+  animation: ping-slower 3s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+.animate-float {
+  animation: float 2s ease-in-out infinite;
+}
+
+@keyframes spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin-slow {
+  animation: spin-slow 3s linear infinite;
+}
+
+@keyframes shimmer-fast {
+  0% {
+    transform: translateX(-150%);
+  }
+  100% {
+    transform: translateX(450%);
+  }
+}
+.animate-shimmer-fast {
+  animation: shimmer-fast 1.8s infinite cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes shimmer-slow {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+.animate-shimmer-slow {
+  animation: shimmer-slow 4s infinite ease-in-out;
+}
+</style>

frontend/app/components/GlassCard.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="premium-glass relative overflow-hidden rounded-[24px] p-6 lg:p-8">
+    <div class="relative z-10 w-full h-full">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+// GlassCard component providing the high-end premium frosted glass styling
+</script>
+
+<style scoped>
+.glass-card {
+  /* Additional bespoke styling could go here, but mostly handled by Tailwind v4 */
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
+}
+</style>

frontend/app/components/InteractivePanel.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    class="h-full premium-glass rounded-3xl overflow-hidden flex flex-col shadow-lg"
+  >
+    <!-- Header / Tabs (Visible only when ready) -->
+    <div
+      v-if="isReady"
+      class="flex p-1 bg-slate-900/5 backdrop-blur-sm border-b border-white/20 shrink-0"
+    >
+      <button
+        v-for="tab in ['chat', 'quiz']"
+        :key="tab"
+        :id="'tab-' + tab"
+        @click="activeTab = tab"
+        class="flex-1 py-3 text-sm font-bold uppercase tracking-wider rounded-xl transition-all flex items-center justify-center gap-2"
+        :class="
+          activeTab === tab
+            ? 'bg-white shadow-sm text-green-600'
+            : 'text-slate-500 hover:bg-white/50 hover:text-slate-700'
+        "
+      >
+        <UIcon
+          :name="
+            tab === 'chat'
+              ? 'i-lucide-messages-square'
+              : 'i-lucide-brain-circuit'
+          "
+          class="w-4 h-4"
+        />
+        {{ tab === "chat" ? "AI Tutor" : "Quiz" }}
+      </button>
+    </div>
+
+    <!-- Content Area -->
+    <div class="flex-1 overflow-hidden relative">
+      <Transition name="fade-slide" mode="out-in">
+        <template v-if="isReady">
+          <ChatInterface v-if="activeTab === 'chat'" :project="project" />
+          <QuizBuilder v-else :project="project" />
+        </template>
+        <div
+          v-else
+          class="h-full flex flex-col items-center justify-center p-8 text-center"
+        >
+          <div
+            class="w-20 h-20 rounded-3xl bg-green-50 flex items-center justify-center mb-6 relative"
+          >
+            <div
+              class="absolute inset-0 bg-green-200/30 rounded-3xl animate-ping opacity-20"
+            ></div>
+            <UIcon
+              name="i-lucide-lock"
+              class="w-10 h-10 text-green-600 relative z-10"
+            />
+          </div>
+          <h3 class="text-xl font-black text-slate-900 mb-3">
+            Interactivity Preparing
+          </h3>
+          <p class="text-slate-500 text-sm leading-relaxed max-w-[280px]">
+            The AI Tutor and interactive quiz features will be unlocked once the
+            video generation is complete.
+          </p>
+          <div
+            class="mt-8 flex items-center gap-2 px-4 py-2 bg-slate-900/5 rounded-full border border-slate-900/5"
+          >
+            <UIcon
+              name="i-lucide-loader-2"
+              class="w-4 h-4 text-green-500 animate-spin"
+            />
+            <span
+              class="text-[10px] font-bold uppercase tracking-wider text-slate-500"
+              >Processing Intelligence</span
+            >
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import ChatInterface from "./ChatInterface.vue";
+import QuizBuilder from "./QuizBuilder.vue";
+
+const props = defineProps({
+  project: { type: Object, required: true },
+});
+
+const activeTab = ref("chat");
+const isReady = computed(
+  () =>
+    props.project?.status === "completed" ||
+    props.project?.has_video ||
+    props.project?.has_combined_video,
+);
+</script>
+
+<style scoped>
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.3s ease;
+}
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(10px);
+}
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+</style>

frontend/app/components/OnboardingTour.vue

@@ -0,0 +1,417 @@
+<template>
+  <ClientOnly>
+    <div
+      v-if="active"
+      class="fixed inset-0 z-[100] flex flex-col items-center pointer-events-none"
+    >
+      <!-- Backdrop with Spotlight Hole -->
+      <div
+        class="absolute inset-0 bg-slate-900/60 backdrop-blur-[2px] transition-all duration-700 ease-in-out pointer-events-auto"
+        :style="spotlightStyle"
+      ></div>
+
+      <!-- Instruction Card -->
+      <Transition name="fade-slide">
+        <div
+          v-if="currentStepData"
+          class="fixed z-[101] w-full max-w-sm pointer-events-auto transition-all duration-500 ease-out"
+          :style="cardPosition"
+        >
+          <div
+            class="premium-glass p-6 rounded-3xl shadow-2xl border border-white/50 space-y-4"
+          >
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <div class="bg-green-100 p-2 rounded-xl">
+                  <UIcon
+                    :name="currentStepData.icon"
+                    class="w-6 h-6 text-green-600"
+                  />
+                </div>
+                <h3 class="text-lg font-bold text-slate-900">
+                  {{ currentStepData.title }}
+                </h3>
+              </div>
+              <button
+                @click="skip"
+                class="text-slate-400 hover:text-slate-600 transition-colors p-1"
+              >
+                <UIcon name="i-lucide-x" class="w-5 h-5" />
+              </button>
+            </div>
+
+            <div>
+              <p class="text-sm text-slate-600 leading-relaxed">
+                {{ currentStepData.desc }}
+              </p>
+            </div>
+
+            <div class="flex items-center justify-between pt-2">
+              <div class="flex gap-1">
+                <div
+                  v-for="(_, i) in steps"
+                  :key="i"
+                  class="h-1.5 rounded-full transition-all duration-300"
+                  :class="
+                    i === currentStep
+                      ? 'w-4 bg-green-500'
+                      : 'w-1.5 bg-slate-200'
+                  "
+                ></div>
+              </div>
+
+              <div class="flex gap-2">
+                <button
+                  v-if="currentStep > 0"
+                  @click="prev"
+                  class="px-4 py-2 text-xs font-bold text-slate-600 btn-glass rounded-xl transition-all active:scale-95"
+                >
+                  Previous
+                </button>
+                <button
+                  @click="next"
+                  class="px-6 py-2 btn-premium text-white text-xs font-bold rounded-xl transition-all active:scale-95 shadow-lg shadow-green-500/20"
+                >
+                  {{ isLastStep ? "Finish" : "Next" }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </ClientOnly>
+</template>
+
+<script setup>
+import { storeToRefs } from "pinia";
+const router = useRouter();
+const route = useRoute();
+const store = useProjectStore();
+const active = computed(() => store.onboarding.active);
+const currentStep = computed(() => store.onboarding.currentStep);
+const spotlight = ref({ x: 0, y: 0, w: 0, h: 0, r: 0 });
+
+const steps = computed(() => {
+  const firstProjectId =
+    store.projects && store.projects.length > 0 ? store.projects[0].id : null;
+
+  const baseSteps = [
+    {
+      path: "/ai-providers",
+      target: "#providers-list",
+      title: "Safety & Setup",
+      desc: "Your API keys stay on your device! Paste your API key here to power-up the AI.",
+      icon: "i-lucide-shield-check",
+    },
+    {
+      path: "/",
+      target: "#lesson-concept-block",
+      title: "Lesson Blueprint",
+      desc: "Describe the topic you want to learn about. Pro tip: Click 'AI Draft' for a helping hand with the research!",
+      icon: "i-lucide-pen-tool",
+    },
+    {
+      path: "/",
+      target: "#lesson-settings-block",
+      title: "Fine-Tuning",
+      desc: "Pick your AI model, choose a narrator voice, and set the video length. Customizing your lesson is easy!",
+      icon: "i-lucide-sliders",
+    },
+    {
+      path: "/",
+      target: "#generate-btn",
+      title: "Ready, Set, Go!",
+      desc: "When you're happy with your settings, hit this big button to start building your magical explanation video.",
+      icon: "i-lucide-sparkles",
+    },
+    {
+      path: "/projects",
+      target: "#projects-toolbar",
+      title: "The Lessons Vault",
+      desc: "Every video you make is saved here. Use the toolbar to search, filter, and keep your library organized.",
+      icon: "i-lucide-folder-lock",
+    },
+  ];
+
+  // If projects exist, add the viewing steps
+  if (firstProjectId) {
+    baseSteps.push(
+      {
+        path: "/projects",
+        target: ".project-card",
+        title: "Watch & Learn",
+        desc: "Click on any project to open the theater. Let's see what the AI has built for you!",
+        icon: "i-lucide-play-circle",
+      },
+      {
+        path: `/project/${firstProjectId}`,
+        target: "#video-theater",
+        title: "The Cinema",
+        desc: "Sit back and watch your personalized video lesson. The AI handles the animations and voice for you!",
+        icon: "i-lucide-clapperboard",
+      },
+      {
+        path: `/project/${firstProjectId}`,
+        target: "#ai-panel-container",
+        title: "Tutor & Quiz",
+        desc: "Confused? Ask the AI Tutor. Feeling smart? Take a Quiz! Everything you need to master the topic is right here.",
+        icon: "i-lucide-graduation-cap",
+      },
+    );
+  }
+
+  return baseSteps;
+});
+
+const currentStepData = computed(() => steps.value[currentStep.value]);
+const isLastStep = computed(() => currentStep.value === steps.value.length - 1);
+
+const waitForElement = async (selector, timeout = 3000) => {
+  const start = Date.now();
+  while (Date.now() - start < timeout) {
+    const el = document.querySelector(selector);
+    if (el && el.getBoundingClientRect().width > 0) return el;
+    await new Promise((r) => setTimeout(r, 100));
+  }
+  return null;
+};
+
+const updateSpotlight = async () => {
+  if (!active.value || !currentStepData.value) return;
+
+  // Check if we need to navigate
+  const stepPath = currentStepData.value.path;
+  if (route.path !== stepPath && stepPath) {
+    console.log("Navigating to:", stepPath);
+    await router.push(stepPath);
+  }
+
+  const el = await waitForElement(currentStepData.value.target);
+  if (!el) return;
+
+  // Find the nearest scrollable ancestor (could be an inner div, not window)
+  const getScrollParent = (node) => {
+    if (!node.parentElement) return window;
+    const style = getComputedStyle(node.parentElement);
+    const overflowY = style.overflowY;
+    if (overflowY === "auto" || overflowY === "scroll")
+      return node.parentElement;
+    return getScrollParent(node.parentElement);
+  };
+
+  const scrollParent = getScrollParent(el);
+
+  // Scroll the element to the center of its scroll container
+  if (scrollParent instanceof Window) {
+    el.scrollIntoView({ behavior: "smooth", block: "center" });
+  } else {
+    const parentRect = scrollParent.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const offset =
+      elRect.top -
+      parentRect.top -
+      scrollParent.clientHeight / 2 +
+      elRect.height / 2;
+    scrollParent.scrollBy({ top: offset, behavior: "smooth" });
+  }
+
+  // Wait for scroll to fully settle, then measure from viewport
+  await nextTick();
+
+  const rect = el.getBoundingClientRect();
+  spotlight.value = {
+    x: Math.round(rect.left),
+    y: Math.round(rect.top + 12),
+    w: Math.round(rect.width),
+    h: Math.round(rect.height),
+    r: 12,
+  };
+};
+
+const spotlightStyle = computed(() => {
+  const { x, y, w, h, r } = spotlight.value;
+  const padding = 12;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  if (!active.value || w === 0) return { opacity: 0 };
+
+  return {
+    clipPath: `path(evenodd, 'M 0 0 H ${vw} V ${vh} H 0 Z M ${x - padding} ${y - padding} a ${r} ${r} 0 0 1 ${r} -${r} h ${w + padding * 2 - r * 2} a ${r} ${r} 0 0 1 ${r} ${r} v ${h + padding * 2 - r * 2} a ${r} ${r} 0 0 1 -${r} ${r} h -${w + padding * 2 - r * 2} a ${r} ${r} 0 0 1 -${r} -${r} Z')`,
+    WebkitClipPath: `path(evenodd, 'M 0 0 H ${vw} V ${vh} H 0 Z M ${x - padding} ${y - padding} a ${r} ${r} 0 0 1 ${r} -${r} h ${w + padding * 2 - r * 2} a ${r} ${r} 0 0 1 ${r} ${r} v ${h + padding * 2 - r * 2} a ${r} ${r} 0 0 1 -${r} ${r} h -${w + padding * 2 - r * 2} a ${r} ${r} 0 0 1 -${r} -${r} Z')`,
+  };
+});
+
+const cardPosition = computed(() => {
+  const { x, y, w, h } = spotlight.value;
+  if (!active.value || w === 0) return { opacity: 0, visibility: "hidden" };
+
+  const vh = window.innerHeight;
+  const vw = window.innerWidth;
+  const buffer = 24;
+  const cardWidth = Math.min(380, vw - 32);
+  const estimatedHeight = 260;
+
+  // 1. Try Vertical Placement first (Standard)
+  const spaceBelow = vh - (y + h + buffer + 20);
+  const spaceAbove = y - buffer - 80; // 80 for top safety (notch/header)
+
+  let top, left;
+
+  if (spaceBelow >= estimatedHeight) {
+    // BEST: Below
+    top = y + h + buffer;
+    left = Math.max(
+      16,
+      Math.min(x + w / 2 - cardWidth / 2, vw - cardWidth - 16),
+    );
+  } else if (spaceAbove >= estimatedHeight) {
+    // GOOD: Above
+    top = y - estimatedHeight - buffer;
+    left = Math.max(
+      16,
+      Math.min(x + w / 2 - cardWidth / 2, vw - cardWidth - 16),
+    );
+  } else if (vw > 1100 && (vw - w) / 2 > cardWidth + buffer) {
+    // SIDE PLACEMENT: Only on wide screens with enough margin
+    const spaceRight = vw - (x + w + buffer + 20);
+    const spaceLeft = x - buffer - 20;
+
+    if (spaceRight >= cardWidth) {
+      // Side Right
+      top = Math.max(
+        100,
+        Math.min(y + h / 2 - estimatedHeight / 2, vh - estimatedHeight - 40),
+      );
+      left = x + w + buffer;
+    } else if (spaceLeft >= cardWidth) {
+      // Side Left
+      top = Math.max(
+        100,
+        Math.min(y + h / 2 - estimatedHeight / 2, vh - estimatedHeight - 40),
+      );
+      left = x - cardWidth - buffer;
+    } else {
+      // Vertical Squeeze fallback
+      top = vh - estimatedHeight - 40;
+      left = Math.max(
+        16,
+        Math.min(x + w / 2 - cardWidth / 2, vw - cardWidth - 16),
+      );
+    }
+  } else {
+    // MOBILE/SQUEEZE FALLBACK: Center-ish at bottom
+    top = vh - estimatedHeight - 40;
+    left = Math.max(
+      16,
+      Math.min(x + w / 2 - cardWidth / 2, vw - cardWidth - 16),
+    );
+  }
+
+  // Final Safety Clamping
+  top = Math.max(80, Math.min(top, vh - estimatedHeight - 20));
+
+  return {
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${cardWidth}px`,
+    opacity: 1,
+    visibility: "visible",
+  };
+});
+
+const next = () => {
+  if (isLastStep.value) {
+    complete();
+  } else {
+    store.setOnboardingStep(currentStep.value + 1);
+  }
+};
+
+const prev = () => {
+  if (currentStep.value > 0) {
+    store.setOnboardingStep(currentStep.value - 1);
+  }
+};
+
+const skip = () => {
+  store.stopOnboarding();
+  router.push("/");
+};
+
+const complete = () => {
+  store.stopOnboarding();
+  localStorage.setItem("onboarding_completed", "true");
+  router.push("/");
+};
+
+const remeasureSpotlight = () => {
+  if (!active.value || !currentStepData.value) return;
+  const el = document.querySelector(currentStepData.value.target);
+  if (el) {
+    const rect = el.getBoundingClientRect();
+    spotlight.value = {
+      x: Math.round(rect.left),
+      y: Math.round(rect.top + 12),
+      w: Math.round(rect.width),
+      h: Math.round(rect.height),
+      r: 12,
+    };
+  }
+};
+
+// Start or move spotlight on state changes
+watch(
+  () => store.onboarding.active,
+  (val) => {
+    console.log("Onboarding active changed:", val);
+    if (val) updateSpotlight();
+  },
+);
+
+watch(
+  () => store.onboarding.currentStep,
+  (val) => {
+    console.log("Onboarding step changed:", val);
+    updateSpotlight();
+  },
+);
+
+onMounted(() => {
+  console.log(
+    "OnboardingTour mounted. Current state active:",
+    store.onboarding.active,
+  );
+  window.addEventListener("start-onboarding-tour", () => {
+    store.startOnboarding();
+  });
+
+  // Re-sync spotlight if already active (e.g. page refresh during tour)
+  if (active.value) updateSpotlight();
+
+  window.addEventListener("resize", remeasureSpotlight);
+  window.addEventListener("scroll", remeasureSpotlight, {
+    capture: true,
+    passive: true,
+  });
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", remeasureSpotlight);
+  window.removeEventListener("scroll", remeasureSpotlight, { capture: true });
+});
+</script>
+
+<style scoped>
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.fade-slide-enter-from,
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+}
+</style>

frontend/app/components/PlanReviewPanel.vue

@@ -0,0 +1,191 @@
+<template>
+  <div
+    class="flex flex-col gap-8 w-full animate-fade-in-up max-h-[78vh] overflow-y-auto pr-1 custom-scrollbar"
+  >
+    <!-- Header Section -->
+    <div
+      class="premium-glass rounded-3xl p-6 border border-white/20 shadow-xl bg-white/70 backdrop-blur-xl sticky top-0 z-20"
+    >
+      <div class="flex items-center justify-between gap-4 flex-wrap">
+        <div class="flex items-center gap-4">
+          <div
+            class="w-12 h-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center border border-indigo-500/20 shadow-inner"
+          >
+            <UIcon
+              name="i-lucide-scroll-text"
+              class="w-6 h-6 text-indigo-600"
+            />
+          </div>
+          <div>
+            <h2 class="text-xl font-black text-slate-900 leading-tight">
+              Review Video Plan
+            </h2>
+            <p class="text-sm text-slate-500 font-medium mt-0.5">
+              Iterate on scene details before starting production
+            </p>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-3">
+          <UButton
+            @click="handleRevise"
+            :loading="store.isRevising"
+            :disabled="!hasAnyFeedback || store.isGenerating"
+            variant="soft"
+            color="primary"
+            icon="i-lucide-refresh-cw"
+            class="rounded-xl px-5 py-2.5 font-bold transition-all hover:scale-105 active:scale-95"
+          >
+            Revise Plans
+          </UButton>
+
+          <UButton
+            @click="handleApprove"
+            :loading="store.isGenerating && !store.isRevising"
+            :disabled="store.isRevising"
+            class="btn-premium rounded-xl px-6 py-2.5 font-black text-white shadow-lg shadow-green-500/20 transition-all hover:scale-105 active:scale-95 flex items-center gap-2"
+          >
+            <UIcon name="i-lucide-check-circle" class="w-5 h-5" />
+            Approve & Generate
+          </UButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Scene Plans List -->
+    <div class="flex flex-col gap-6">
+      <div
+        v-for="(scene, idx) in project.scenes"
+        :key="idx"
+        class="premium-glass rounded-3xl overflow-hidden border border-white/20 shadow-lg group hover:shadow-xl transition-all duration-500"
+        :class="{ 'opacity-60 grayscale-[0.2]': store.isRevising }"
+      >
+        <!-- Scene Header -->
+        <div
+          class="bg-white/60 p-5 border-b border-slate-100 flex items-center justify-between gap-4"
+        >
+          <div class="flex items-center gap-4">
+            <div
+              class="w-9 h-9 rounded-xl bg-slate-900 text-white font-mono text-sm font-black flex items-center justify-center shadow-md"
+            >
+              {{ Number(idx) + 1 }}
+            </div>
+            <div>
+              <h3 class="font-black text-slate-900 text-lg">
+                {{ scene.title || `Scene ${Number(idx) + 1}` }}
+              </h3>
+              <p
+                class="text-xs text-indigo-500 font-bold uppercase tracking-wider"
+              >
+                Strategy & Review
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="p-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <!-- Left: Current Plan Details (Parsed) -->
+          <div class="space-y-6">
+            <div class="space-y-4">
+              <div
+                v-if="scene.purpose"
+                class="bg-blue-50/50 p-3 rounded-lg border border-blue-100"
+              >
+                <h5
+                  class="text-[10px] font-bold uppercase tracking-wider text-blue-500 mb-1 flex items-center gap-1"
+                >
+                  <UIcon name="i-lucide-target" class="w-3 h-3" />
+                  Scene Purpose
+                </h5>
+                <p class="text-xs text-slate-700 italic leading-snug">
+                  {{ scene.purpose }}
+                </p>
+              </div>
+
+              <div v-if="scene.description">
+                <h5
+                  class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1"
+                >
+                  Visual Concept
+                </h5>
+                <p class="text-xs text-slate-800 leading-relaxed">
+                  {{ scene.description }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right: Feedback Section -->
+          <div class="flex flex-col h-full">
+            <h4
+              class="text-[11px] font-black uppercase tracking-widest text-slate-400 mb-2 flex items-center gap-1.5"
+            >
+              <UIcon name="i-lucide-message-square" class="w-3.5 h-3.5" />
+              Your Feedback / Changes
+            </h4>
+            <div class="flex-1 relative group/input">
+              <textarea
+                v-model="feedbacks[Number(idx) + 1]"
+                placeholder="What should change in this scene?"
+                class="w-full h-full min-h-[120px] p-4 rounded-2xl bg-white border-2 border-slate-100 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all text-sm font-medium placeholder:text-slate-300 resize-none shadow-inner"
+              ></textarea>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useProjectStore } from "~/stores/projects";
+
+const props = defineProps<{
+  project: any;
+}>();
+
+const store = useProjectStore();
+const feedbacks = ref<Record<number, string>>({});
+
+const hasAnyFeedback = computed(() => {
+  return Object.values(feedbacks.value).some((f) => f.trim().length > 0);
+});
+
+function extractContent(plan: string, tag: string) {
+  if (!plan) return "No plan details available.";
+  const regex = new RegExp(`<${tag}>([\\s\\S]*?)<\\/${tag}>`, "i");
+  const match = plan.match(regex);
+  return match && match[1] ? match[1].trim() : plan.trim();
+}
+
+async function handleRevise() {
+  const activeFeedbacks: Record<number, string> = {};
+  for (const [id, msg] of Object.entries(feedbacks.value)) {
+    if (msg.trim()) activeFeedbacks[Number(id)] = msg.trim();
+  }
+
+  if (Object.keys(activeFeedbacks).length === 0) return;
+
+  await store.revisePlan(props.project.id, activeFeedbacks);
+  // Clear feedbacks after revision
+  feedbacks.value = {};
+}
+
+async function handleApprove() {
+  await store.approvePlan(props.project.id);
+}
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+}
+</style>

frontend/app/components/PlyrVideoPlayer.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="plyr-wrapper relative bg-black w-full h-full group">
+    <video
+      ref="videoRef"
+      class="w-full h-full object-contain"
+      playsinline
+      crossorigin="anonymous"
+      :key="fullVideoUrl"
+    >
+      <source :src="fullVideoUrl" type="video/mp4" />
+      <track
+        v-if="fullSubtitlesUrl"
+        kind="captions"
+        label="English"
+        srclang="en"
+        :src="fullSubtitlesUrl"
+        default
+      />
+    </video>
+
+    <!-- Native PiP Button Overlay -->
+    <button
+      v-if="isPipSupported"
+      @click="togglePip"
+      class="absolute top-4 right-4 z-50 bg-black/60 hover:bg-black/80 text-white p-2 rounded-lg backdrop-blur-sm transition-all opacity-0 group-hover:opacity-100"
+      title="Picture-in-Picture"
+    >
+      <UIcon name="i-lucide-picture-in-picture-2" class="w-5 h-5" />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch, computed } from "vue";
+import { config } from "~/utils/api";
+
+// Import Plyr directly here since it's a client-only component
+import "plyr/dist/plyr.css";
+let Plyr = null;
+if (import.meta.client) {
+  Plyr = (await import("plyr")).default;
+}
+
+const props = defineProps({
+  videoUrl: { type: String, required: true },
+  subtitlesUrl: { type: String, default: null },
+  scenes: { type: Array, default: () => [] },
+});
+
+const videoRef = ref(null);
+let player = null;
+const isPipSupported = ref(false);
+const captionSize = ref(200); // Percentage
+
+const fullVideoUrl = computed(() => {
+  if (!props.videoUrl) return "";
+  return props.videoUrl.startsWith("http")
+    ? props.videoUrl
+    : `${config.API_BASE_URL}${props.videoUrl}`;
+});
+
+const fullSubtitlesUrl = computed(() => {
+  if (!props.subtitlesUrl) return null;
+  return props.subtitlesUrl.startsWith("http")
+    ? props.subtitlesUrl
+    : `${config.API_BASE_URL}${props.subtitlesUrl}`;
+});
+
+onMounted(() => {
+  if (!import.meta.client || !videoRef.value || !Plyr) return;
+
+  isPipSupported.value = "pictureInPictureEnabled" in document;
+
+  // Extract chapters from scenes if available
+  const markers = {};
+  if (props.scenes && props.scenes.length > 0) {
+    let currentTime = 0;
+    props.scenes.forEach((scene, index) => {
+      // Rough estimation if duration isn't provided (fallback)
+      const duration =
+        scene.duration ||
+        Math.max(
+          10,
+          scene.narration?.length ? scene.narration.length / 15 : 10,
+        );
+      markers[currentTime] = scene.title || `Scene ${index + 1}`;
+      currentTime += duration;
+    });
+  }
+
+  player = new Plyr(videoRef.value, {
+    controls: [
+      "play-large",
+      "play",
+      "progress",
+      "current-time",
+      "mute",
+      "volume",
+      "captions",
+      "settings",
+      "pip",
+      "fullscreen",
+    ],
+    settings: ["captions", "quality", "speed"],
+    captions: { active: true, language: "auto", update: true },
+    keyboard: { focused: true, global: false },
+    tooltips: { controls: true, seek: true },
+    markers: {
+      enabled: true,
+      points: Object.entries(markers).map(([time, label]) => ({
+        time: parseFloat(time),
+        label,
+      })),
+    },
+    fullscreen: {
+      enabled: true,
+      fallback: false, // Force native fullscreen API
+      iosNative: true,
+    },
+  });
+
+  // Force-enable captions once the player is ready (captions.active alone isn't always enough)
+  player.on("ready", () => {
+    if (fullSubtitlesUrl.value) {
+      player.currentTrack = 0;
+    }
+  });
+
+  // Hack to enable standard PiP if Plyr's built-in button acts up
+  player.on("pip", (event) => {
+    if (videoRef.value !== document.pictureInPictureElement) {
+      videoRef.value.requestPictureInPicture().catch(console.error);
+    } else {
+      document.exitPictureInPicture().catch(console.error);
+    }
+  });
+
+  // Ensure subtitle size is 200% in fullscreen
+  player.on("enterfullscreen", () => {
+    captionSize.value = 200;
+  });
+
+  player.on("exitfullscreen", () => {
+    // Optionally keep it at 200 or revert to a regular size
+    // For now, we'll keep it at 200 as per request for "default"
+    captionSize.value = 200;
+  });
+
+  // Handle keyboard sizing and global shortcuts
+  const handleKeydown = (e) => {
+    // Only handle if no text input is focused
+    if (["INPUT", "TEXTAREA"].includes(document.activeElement?.tagName)) return;
+
+    // If Plyr (or another component) already handled this event and called preventDefault, skip!
+    if (e.defaultPrevented) return;
+
+    if (e.key === "ArrowLeft") {
+      if (player) player.currentTime = Math.max(0, player.currentTime - 5);
+      e.preventDefault();
+    } else if (e.key === "ArrowRight") {
+      if (player)
+        player.currentTime = Math.min(player.duration, player.currentTime + 5);
+      e.preventDefault();
+    } else if (e.key === " " || e.key === "k") {
+      if (player) player.togglePlay();
+      e.preventDefault();
+    } else if (e.key === "+" || e.key === "=") {
+      captionSize.value = Math.min(captionSize.value + 10, 300);
+      e.preventDefault();
+    } else if (e.key === "-" || e.key === "_") {
+      captionSize.value = Math.max(captionSize.value - 10, 50);
+      e.preventDefault();
+    }
+  };
+
+  window.addEventListener("keydown", handleKeydown);
+  onBeforeUnmount(() => {
+    window.removeEventListener("keydown", handleKeydown);
+  });
+});
+
+onBeforeUnmount(() => {
+  if (player) {
+    player.destroy();
+  }
+});
+
+async function togglePip() {
+  if (!videoRef.value) return;
+  try {
+    if (document.pictureInPictureElement) {
+      await document.exitPictureInPicture();
+    } else {
+      await videoRef.value.requestPictureInPicture();
+    }
+  } catch (err) {
+    console.error("PiP error:", err);
+  }
+}
+</script>
+
+<style>
+/* Nuxt-Theme Overrides for Plyr */
+:root {
+  --plyr-color-main: #00dc82;
+  --plyr-font-family: inherit;
+  --plyr-video-control-background-hover: #00dc82;
+}
+
+.plyr--video {
+  border-radius: 1.5rem;
+  overflow: hidden;
+}
+
+:group(.plyr--fullscreen) .plyr--video {
+  border-radius: 0 !important;
+}
+
+.plyr__captions {
+  /* Premium captions */
+  background: rgba(0, 0, 0, 0.3) !important;
+  padding: 8px 16px !important;
+  border-radius: 12px !important;
+  font-family: var(--font-sans) !important;
+  text-shadow: none !important;
+  transform: translateY(-20px) !important;
+  font-size: v-bind('captionSize + "%"') !important;
+}
+
+/* Specific enforcement for fullscreen captions */
+.plyr--fullscreen-active .plyr__captions {
+  font-size: 200% !important;
+  transform: translateY(
+    -40px
+  ) !important; /* Move up slightly more in fullscreen */
+}
+
+.plyr__caption {
+  font-weight: 600 !important;
+  line-height: 1.4 !important;
+}
+
+/* Scene markers visual override */
+.plyr__progress__marker {
+  background-color: rgba(255, 255, 255, 0.8) !important;
+  width: 4px !important;
+  height: 100% !important;
+  border-radius: 2px !important;
+}
+</style>

frontend/app/components/ProjectCard.vue

@@ -0,0 +1,403 @@
+<template>
+  <!--
+    Outer wrapper is draggable. Browser suppresses click-to-navigate during
+    a real drag, so NuxtLink navigation still works on a plain click.
+  -->
+  <div
+    class="project-card project-card-wrapper"
+    :class="{ 'is-dragging': isDragging }"
+    draggable="true"
+    @dragstart="onDragStart"
+    @dragend="onDragEnd"
+  >
+    <NuxtLink
+      :to="`/project/${project.id}`"
+      draggable="false"
+      class="premium-glass rounded-2xl overflow-hidden group hover:-translate-y-1 transition-all duration-300 block select-none"
+    >
+      <!-- Thumbnail -->
+      <div
+        class="aspect-video w-full bg-slate-900 relative overflow-hidden"
+        @mouseenter="playPreview"
+        @mouseleave="pausePreview"
+      >
+        <!-- Status Badge -->
+        <div class="absolute top-3 left-3 z-10 flex gap-2">
+          <span
+            class="px-2.5 py-1 rounded-full text-xs font-semibold backdrop-blur-md"
+            :class="statusClasses"
+          >
+            {{ formattedStatus }}
+          </span>
+        </div>
+
+        <!-- Action Buttons (Continue + Delete) -->
+        <div class="absolute top-3 right-3 z-10 flex gap-2">
+          <!-- Continue button (only for non-active projects: error, planned, or stopped) -->
+          <button
+            v-if="canContinue"
+            @click.prevent.stop="$emit('continue', project)"
+            class="w-8 h-8 rounded-full bg-white/80 backdrop-blur-md border border-white/80 flex items-center justify-center text-slate-600 hover:bg-green-500 hover:text-white hover:border-green-500 transition-all shadow-sm opacity-0 group-hover:opacity-100"
+            :title="
+              project.status === 'error'
+                ? 'Retry Generation'
+                : 'Continue Generation'
+            "
+          >
+            <UIcon
+              :name="
+                project.status === 'error'
+                  ? 'i-lucide-rotate-ccw'
+                  : 'i-lucide-play-circle'
+              "
+              class="w-4 h-4"
+            />
+          </button>
+
+          <!-- Delete button -->
+          <button
+            @click.prevent.stop="$emit('delete', project)"
+            class="w-8 h-8 rounded-full bg-white/80 backdrop-blur-md border border-white/80 flex items-center justify-center text-slate-600 hover:bg-red-500 hover:text-white hover:border-red-500 transition-all shadow-sm opacity-0 group-hover:opacity-100"
+          >
+            <UIcon name="i-lucide-trash-2" class="w-4 h-4" />
+          </button>
+        </div>
+
+        <!-- Drag hint badge (shows on hover) -->
+        <div
+          class="absolute bottom-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
+        >
+          <div
+            class="flex items-center gap-1 px-2 py-1 rounded-full bg-black/40 backdrop-blur-sm text-white text-xs font-medium"
+          >
+            <UIcon name="i-lucide-grip" class="w-3 h-3" />
+            Drag to group
+          </div>
+        </div>
+
+        <!-- Play icon overlay -->
+        <div
+          v-if="videoUrl"
+          class="absolute inset-0 z-10 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
+        >
+          <div
+            class="w-12 h-12 rounded-full bg-black/50 backdrop-blur-sm flex items-center justify-center"
+          >
+            <UIcon
+              name="i-lucide-play"
+              class="w-6 h-6 text-white translate-x-0.5"
+            />
+          </div>
+        </div>
+
+        <!-- Video preview -->
+        <video
+          v-if="videoUrl"
+          ref="videoEl"
+          :src="videoUrl"
+          draggable="false"
+          class="w-full h-full object-cover transition-opacity duration-500"
+          :class="{
+            'opacity-0': !isHovered && !videoStarted,
+            'opacity-100': isHovered || videoStarted,
+          }"
+          muted
+          loop
+          preload="metadata"
+          @loadedmetadata="onVideoMetadata"
+          @play="videoStarted = true"
+        />
+
+        <!-- Premium Thumbnail / Generating / Fallback Overlay -->
+        <div
+          v-if="!isHovered && !videoStarted"
+          class="absolute inset-0 z-0 flex flex-col items-center justify-center overflow-hidden"
+        >
+          <!-- Thumbnail Image (if available) -->
+          <div v-if="project.thumbnail" class="absolute inset-0 bg-slate-900">
+            <img
+              :src="project.thumbnail"
+              class="w-full h-full object-cover opacity-60 transition-transform duration-700 group-hover:scale-110"
+              alt="Project Thumbnail"
+            />
+            <div
+              class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-slate-950/20 to-transparent"
+            ></div>
+          </div>
+
+          <!-- Fallback Stock Image Background -->
+          <div v-else class="absolute inset-0 bg-slate-900">
+            <img
+              src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&q=80&w=1200"
+              class="w-full h-full object-cover opacity-40 transition-transform duration-700 group-hover:scale-110"
+              alt="Default Project Thumbnail"
+            />
+            <div
+              class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-slate-950/20 to-transparent"
+            ></div>
+          </div>
+
+          <!-- Generating Animation Overlay -->
+          <div
+            v-if="project.status !== 'completed' && project.status !== 'error'"
+            class="absolute inset-0 z-10 flex items-center justify-center"
+          >
+            <div class="absolute inset-0 bg-green-500/10 animate-pulse"></div>
+            <div
+              class="w-full h-1 bg-gradient-to-r from-transparent via-green-400 to-transparent absolute top-0 animate-[scan_3s_linear_infinite]"
+            ></div>
+            <div
+              class="w-full h-1 bg-gradient-to-r from-transparent via-green-400 to-transparent absolute bottom-0 animate-[scan_3s_linear_infinite_reverse]"
+            ></div>
+          </div>
+
+          <!-- Project Identity -->
+          <div
+            class="relative z-20 flex flex-col items-center px-6 text-center"
+          >
+            <div
+              class="px-5 py-3 rounded-2xl border border-white/20 backdrop-blur-md shadow-2xl transition-all duration-500 group-hover:scale-105"
+              :class="
+                project.status !== 'completed' && project.status !== 'error'
+                  ? 'bg-orange-500/20 border-orange-500/40'
+                  : 'bg-green-500/20 border-green-500/30 group-hover:bg-green-500/30'
+              "
+            >
+              <div
+                v-if="
+                  project.status !== 'completed' && project.status !== 'error'
+                "
+                class="flex flex-col items-center gap-2"
+              >
+                <UIcon
+                  :name="
+                    project.status === 'awaiting_approval'
+                      ? 'i-lucide-scroll-text'
+                      : 'i-lucide-loader-2'
+                  "
+                  class="w-6 h-6"
+                  :class="
+                    project.status === 'awaiting_approval'
+                      ? 'text-indigo-400'
+                      : 'text-orange-400 animate-spin'
+                  "
+                />
+                <h3 class="text-xl font-bold text-white leading-tight">
+                  {{
+                    project.status === "awaiting_approval"
+                      ? "Review Plan"
+                      : "Generating..."
+                  }}
+                </h3>
+              </div>
+              <h3 v-else class="text-xl font-bold text-white leading-tight">
+                {{ project.name || "Untitled" }}
+              </h3>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Card Content -->
+      <div class="p-5">
+        <h3 class="font-bold text-slate-900 text-lg mb-1 truncate">
+          {{ project.name || "Untitled Project" }}
+        </h3>
+        <p
+          class="text-slate-500 text-sm line-clamp-2 h-10 mb-4"
+          :title="project.overview || project.topic"
+        >
+          {{ project.overview || project.topic || "No description provided." }}
+        </p>
+
+        <div
+          class="flex items-center justify-between text-xs text-slate-400 font-medium"
+        >
+          <div class="flex items-center gap-1.5">
+            <UIcon name="i-lucide-calendar" class="w-3.5 h-3.5" />
+            {{ formattedDate }}
+          </div>
+          <div class="flex items-center gap-1.5">
+            <UIcon name="i-lucide-clock" class="w-3.5 h-3.5" />
+            {{ duration || "--:--" }}
+          </div>
+        </div>
+      </div>
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { config as apiConfig } from "~/utils/api";
+import { useProjectStore } from "~/stores/projects";
+
+const props = defineProps<{
+  project: any;
+  duration?: string;
+}>();
+
+const store = useProjectStore();
+const emit = defineEmits<{
+  delete: [project: any];
+  continue: [project: any];
+  dragstart: [projectId: string];
+  dragend: [];
+}>();
+
+const videoEl = ref<HTMLVideoElement | null>(null);
+const isDragging = ref(false);
+const isHovered = ref(false);
+const videoStarted = ref(false);
+const localDuration = ref<string>("");
+
+const videoUrl = computed(() => {
+  if (!props.project.video_url) return null;
+  if (props.project.video_url.startsWith("http"))
+    return props.project.video_url;
+  return `${apiConfig.API_BASE_URL}${props.project.video_url}`;
+});
+
+const formattedStatus = computed(() => {
+  if (!props.project.status) return "Unknown";
+  return props.project.status
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (c: string) => c.toUpperCase());
+});
+
+const statusClasses = computed(() => {
+  const s = props.project.status;
+  if (s === "completed")
+    return "bg-white/80 border border-white/50 text-green-700 bg-green-50/80 border-green-200";
+  if (s === "error")
+    return "bg-white/80 border border-white/50 text-red-700 bg-red-50/80 border-red-200";
+  if (s === "awaiting_approval")
+    return "bg-indigo-50/80 border border-indigo-200 text-indigo-700";
+  return "bg-white/80 border border-white/50 text-orange-700 bg-orange-50/80 border-orange-200";
+});
+
+// Only allow continue for: error, planned, stopped, or cancelled
+// BUT also check if there's already an active generation running for this project
+const canContinue = computed(() => {
+  const s = props.project.status;
+  const statusAllowsContinue =
+    s === "error" || s === "planned" || s === "stopped" || s === "cancelled";
+
+  // Check if there's already an active generation for this project
+  const hasActiveGeneration = Object.values(store.activeGenerations).some(
+    (gen: any) => {
+      const matchesProject =
+        gen.projectId === props.project.id ||
+        gen.projectName === props.project.id;
+      const isActive = gen.status !== "stopped" && gen.status !== "completed";
+      return matchesProject && isActive;
+    },
+  );
+
+  // Only show continue if status allows it AND no active generation is running
+  return statusAllowsContinue && !hasActiveGeneration;
+});
+
+const formattedDate = computed(() => {
+  if (!props.project.created_at) return "";
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  }).format(new Date(props.project.created_at));
+});
+
+const duration = computed(
+  () => props.duration || localDuration.value || props.project.duration,
+);
+
+function playPreview() {
+  isHovered.value = true;
+  videoEl.value?.play().catch(() => {});
+}
+
+function pausePreview() {
+  isHovered.value = false;
+  videoStarted.value = false;
+  if (videoEl.value) {
+    videoEl.value.pause();
+    videoEl.value.currentTime = 0;
+  }
+}
+
+function onVideoMetadata(e: Event) {
+  const secs = (e.target as HTMLVideoElement).duration;
+  if (!secs || !isFinite(secs)) return;
+  const m = Math.floor(secs / 60);
+  const s = Math.floor(secs % 60)
+    .toString()
+    .padStart(2, "0");
+  localDuration.value = `${m}:${s}`;
+}
+
+function onDragStart(e: DragEvent) {
+  // Small delay lets the browser snapshot the element before we dim it
+  requestAnimationFrame(() => {
+    isDragging.value = true;
+  });
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", props.project.id);
+  }
+  emit("dragstart", props.project.id);
+}
+
+function onDragEnd() {
+  isDragging.value = false;
+  emit("dragend");
+}
+</script>
+
+<style scoped>
+.project-card-wrapper {
+  cursor: grab;
+}
+.project-card-wrapper.is-dragging {
+  opacity: 0.45;
+  transform: scale(0.97);
+  cursor: grabbing;
+}
+/* Prevent browser from using its default link-drag ghost */
+.project-card-wrapper a {
+  -webkit-user-drag: none;
+}
+
+@keyframes scan {
+  0% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(180px);
+    opacity: 0;
+  }
+}
+
+@keyframes scan-reverse {
+  0% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-180px);
+    opacity: 0;
+  }
+}
+</style>

frontend/app/components/ProjectGroupCard.vue

@@ -0,0 +1,197 @@
+<template>
+  <div
+    class="premium-glass rounded-2xl overflow-hidden animate-fade-in-up transition-all"
+    :class="{ 'drop-zone-active': isDragOver }"
+    @dragenter.prevent="onDragEnter"
+    @dragover.prevent="onDragOver"
+    @dragleave="onDragLeave"
+    @drop.prevent="onDrop"
+  >
+    <!-- Group Header -->
+    <div
+      class="flex items-center gap-3 px-5 py-4 border-b border-white/40 bg-white/20"
+    >
+      <!-- Collapse toggle -->
+      <button
+        @click="emit('toggle-collapse', group.id)"
+        class="w-6 h-6 flex items-center justify-center text-slate-400 hover:text-slate-600 transition-colors shrink-0"
+      >
+        <UIcon
+          :name="
+            group.collapsed ? 'i-lucide-chevron-right' : 'i-lucide-chevron-down'
+          "
+          class="w-4 h-4 transition-transform duration-200"
+        />
+      </button>
+
+      <!-- Folder icon -->
+      <UIcon
+        name="i-lucide-folder-open"
+        class="w-4 h-4 text-green-500 shrink-0"
+      />
+
+      <!-- Editable group name -->
+      <div class="flex-1 min-w-0">
+        <input
+          v-if="isEditing"
+          ref="nameInput"
+          v-model="editName"
+          class="w-full bg-transparent text-slate-900 font-semibold text-sm outline-none border-b border-green-400 pb-0.5 focus:border-green-500"
+          @blur="commitRename"
+          @keydown.enter.prevent="commitRename"
+          @keydown.escape.prevent="cancelRename"
+        />
+        <button
+          v-else
+          @click="startEditing"
+          class="text-slate-800 font-semibold text-sm truncate hover:text-green-600 transition-colors text-left w-full"
+          :title="group.name"
+        >
+          {{ group.name }}
+        </button>
+      </div>
+
+      <!-- Project count badge -->
+      <span
+        class="text-xs font-medium bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full shrink-0"
+      >
+        {{ group.projectIds.length }}
+      </span>
+
+      <!-- Delete group button -->
+      <button
+        @click="onDeleteGroup"
+        class="w-7 h-7 flex items-center justify-center rounded-lg text-slate-400 hover:text-red-500 hover:bg-red-50 transition-all shrink-0"
+        title="Delete group"
+      >
+        <UIcon name="i-lucide-trash-2" class="w-3.5 h-3.5" />
+      </button>
+    </div>
+
+    <!-- Drop zone / project grid -->
+    <div v-show="!group.collapsed" class="p-4 transition-all">
+      <!-- Empty drop zone -->
+      <div
+        v-if="projects.length === 0"
+        class="rounded-xl border-2 border-dashed border-slate-200 flex flex-col items-center justify-center py-8 text-slate-400 text-sm gap-2 transition-colors"
+        :class="
+          isDragOver ? 'border-green-400 bg-green-50/40 text-green-600' : ''
+        "
+      >
+        <UIcon
+          :name="isDragOver ? 'i-lucide-package-plus' : 'i-lucide-package'"
+          class="w-6 h-6"
+        />
+        <span>{{ isDragOver ? "Drop to add" : "Drag projects here" }}</span>
+      </div>
+
+      <!-- Project cards grid -->
+      <div
+        v-else
+        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
+        :class="
+          isDragOver && projects.length > 0
+            ? 'ring-2 ring-green-400 ring-offset-2 rounded-xl'
+            : ''
+        "
+      >
+        <ProjectCard
+          v-for="project in projects"
+          :key="project.id"
+          :project="project"
+          :duration="durations?.[project.id]"
+          @delete="(p) => emit('delete-project', p)"
+          @continue="(p) => emit('continue-project', p)"
+          @dragstart="emit('project-dragstart', $event)"
+          @dragend="emit('project-dragend')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+import type { ProjectGroup } from "~/stores/groups";
+
+const props = defineProps<{
+  group: ProjectGroup;
+  projects: any[];
+  durations?: Record<string, string>;
+}>();
+
+const emit = defineEmits<{
+  "toggle-collapse": [groupId: string];
+  rename: [groupId: string, name: string];
+  delete: [groupId: string];
+  drop: [projectId: string, groupId: string];
+  "delete-project": [project: any];
+  "continue-project": [project: any];
+  "project-dragstart": [projectId: string];
+  "project-dragend": [];
+}>();
+
+// ── Drag-and-drop (counter avoids false dragleave from child elements) ──
+const isDragOver = ref(false);
+let dragEnterCount = 0;
+
+function onDragEnter(e: DragEvent) {
+  dragEnterCount++;
+  isDragOver.value = true;
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+  // Auto-expand collapsed group so user can see where they're dropping
+  if (props.group.collapsed) {
+    emit("toggle-collapse", props.group.id);
+  }
+}
+
+function onDragOver(e: DragEvent) {
+  isDragOver.value = true;
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+}
+
+function onDragLeave(_e: DragEvent) {
+  dragEnterCount = Math.max(0, dragEnterCount - 1);
+  if (dragEnterCount === 0) {
+    isDragOver.value = false;
+  }
+}
+
+function onDrop(e: DragEvent) {
+  dragEnterCount = 0;
+  isDragOver.value = false;
+  const projectId = e.dataTransfer?.getData("text/plain");
+  if (projectId) {
+    emit("drop", projectId, props.group.id);
+  }
+}
+
+// ── Inline editing ──
+const isEditing = ref(false);
+const editName = ref("");
+const nameInput = ref<HTMLInputElement | null>(null);
+
+function startEditing() {
+  editName.value = props.group.name;
+  isEditing.value = true;
+  nextTick(() => {
+    nameInput.value?.select();
+  });
+}
+
+function commitRename() {
+  if (editName.value.trim()) {
+    emit("rename", props.group.id, editName.value.trim());
+  }
+  isEditing.value = false;
+}
+
+function cancelRename() {
+  isEditing.value = false;
+}
+
+// ── Delete ──
+function onDeleteGroup() {
+  emit("delete", props.group.id);
+}
+</script>

frontend/app/components/QuizBuilder.vue

@@ -0,0 +1,612 @@
+<template>
+  <div class="flex flex-col h-full bg-slate-50/30">
+    <!-- Config State -->
+    <div
+      v-if="quizState === 'config'"
+      class="flex-1 p-6 overflow-y-auto custom-scrollbar flex flex-col items-center justify-center animate-fade-in"
+    >
+      <div
+        class="w-16 h-16 rounded-2xl bg-green-100 flex items-center justify-center mb-6 shadow-sm border border-green-200"
+      >
+        <UIcon name="i-lucide-brain-circuit" class="w-8 h-8 text-green-600" />
+      </div>
+      <h3 class="text-xl font-bold text-slate-900 mb-2 text-center">
+        Knowledge Check
+      </h3>
+      <p
+        class="text-slate-800 text-center text-sm max-w-xs mb-8 leading-relaxed"
+      >
+        Test your understanding of {{ project?.title || "this topic" }} with an
+        AI-generated quiz.
+      </p>
+
+      <div
+        class="w-full space-y-5 bg-white/60 backdrop-blur-md border border-slate-200/60 p-6 rounded-2xl"
+      >
+        <!-- Questions Count -->
+        <div class="space-y-2">
+          <label
+            class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.15em] ml-1"
+            >Number of Questions</label
+          >
+          <USelectMenu
+            v-model="settings.count"
+            :items="countOptions"
+            :searchInput="false"
+            value-key="value"
+            label-key="label"
+            class="premium-input rounded-xl"
+            variant="none"
+          >
+            <template #leading>
+              <UIcon
+                name="i-lucide-list-checks"
+                class="w-4 h-4 text-slate-400"
+              />
+            </template>
+          </USelectMenu>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4">
+          <!-- Difficulty -->
+          <div class="space-y-2">
+            <label
+              class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.15em] ml-1"
+              >Difficulty</label
+            >
+            <USelectMenu
+              v-model="settings.difficulty"
+              :items="['Beginner', 'Intermediate', 'Advanced']"
+              :searchInput="false"
+              class="premium-input rounded-md"
+              variant="none"
+            >
+              <template #leading>
+                <UIcon
+                  name="i-lucide-bar-chart"
+                  class="w-3.5 h-3.5 text-slate-400"
+                />
+              </template>
+            </USelectMenu>
+          </div>
+
+          <!-- Type -->
+          <div class="space-y-2">
+            <label
+              class="block text-[10px] font-bold text-slate-500 uppercase tracking-[0.15em] ml-1"
+              >Format</label
+            >
+            <USelectMenu
+              v-model="settings.type"
+              :items="typeOptions"
+              :searchInput="false"
+              class="premium-input rounded-md"
+              variant="none"
+            >
+              <template #leading>
+                <UIcon
+                  name="i-lucide-layers"
+                  class="w-3.5 h-3.5 text-slate-400"
+                />
+              </template>
+            </USelectMenu>
+          </div>
+        </div>
+      </div>
+
+      <UButton
+        @click="startQuiz"
+        :loading="store.loading || pStore.loadingModels"
+        class="w-full mt-6 btn-premium py-3 rounded-xl font-semibold text-lg flex items-center justify-center justify-center shadow-md hover:shadow-lg transition-all cursor-pointer disabled:opacity-50"
+      >
+        <template #leading>
+          <UIcon
+            v-if="!store.loading && !pStore.loadingModels"
+            name="i-lucide-play"
+            class="w-5 h-5"
+          />
+        </template>
+        {{
+          pStore.loadingModels
+            ? "Loading AI models..."
+            : store.loading
+              ? "Generating Quiz..."
+              : "Generate Quiz"
+        }}
+      </UButton>
+
+      <p
+        v-if="store.error"
+        class="text-xs text-red-500 mt-4 text-center bg-red-50 p-3 rounded-xl border border-red-100"
+      >
+        {{ store.error }}
+      </p>
+    </div>
+
+    <!-- Taking State -->
+    <div
+      v-else-if="quizState === 'taking'"
+      class="flex-1 flex flex-col animate-fade-in relative overflow-hidden"
+    >
+      <!-- Progress Header (Sticky) -->
+      <div
+        class="px-5 py-4 border-b border-slate-200/50 bg-white/80 backdrop-blur-md sticky top-0 z-10"
+      >
+        <div class="flex justify-between items-center mb-2">
+          <span class="text-sm font-bold text-slate-700"
+            >Question {{ currentQuestionIndex + 1 }} of
+            {{ questions.length }}</span
+          >
+          <span class="text-xs font-semibold text-slate-400"
+            >{{ Math.round((currentQuestionIndex / questions.length) * 100) }}%
+            Complete</span
+          >
+        </div>
+        <div class="w-full h-1.5 bg-slate-200 rounded-full overflow-hidden">
+          <div
+            class="h-full bg-green-500 transition-all duration-300"
+            :style="`width: ${((currentQuestionIndex + 1) / questions.length) * 100}%`"
+          ></div>
+        </div>
+      </div>
+
+      <!-- Question Content (Scrollable) -->
+      <div class="flex-1 overflow-y-auto p-6 custom-scrollbar">
+        <h4 class="text-lg font-bold text-slate-900 mb-6 leading-snug">
+          {{ currentQuestion?.question }}
+        </h4>
+
+        <div class="space-y-3">
+          <button
+            v-for="(opt, idx) in currentQuestion?.options"
+            :key="idx"
+            @click="selectAnswer(opt)"
+            :disabled="hasAnsweredCurrent"
+            class="w-full text-left px-5 py-3.5 rounded-2xl border transition-all duration-200 relative group overflow-hidden cursor-pointer"
+            :class="getOptionClass(opt)"
+          >
+            <div class="flex items-center gap-3 relative z-10">
+              <div
+                class="w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors"
+                :class="getRadioClass(opt)"
+              >
+                <div
+                  v-if="isSelected(opt)"
+                  class="w-2.5 h-2.5 rounded-full bg-current"
+                ></div>
+              </div>
+              <span
+                class="text-sm font-medium leading-relaxed text-slate-800"
+                >{{ opt }}</span
+              >
+            </div>
+          </button>
+        </div>
+
+        <!-- Explanation (Shows after answering) -->
+        <Transition name="fade-slide">
+          <div
+            v-if="hasAnsweredCurrent"
+            class="mt-6 p-4 rounded-2xl bg-white border border-slate-200 shadow-sm"
+          >
+            <div
+              class="flex items-center gap-2 mb-2"
+              :class="isCorrect ? 'text-green-600' : 'text-red-600'"
+            >
+              <UIcon
+                :name="
+                  isCorrect ? 'i-lucide-check-circle' : 'i-lucide-x-circle'
+                "
+                class="w-5 h-5"
+              />
+              <span class="font-bold">{{
+                isCorrect ? "Correct!" : "Incorrect"
+              }}</span>
+            </div>
+            <p class="text-sm text-slate-800 leading-relaxed">
+              {{ currentQuestion?.explanation }}
+            </p>
+          </div>
+        </Transition>
+
+        <!-- Spacer for the sticky footer button -->
+        <div v-if="hasAnsweredCurrent" class="h-20"></div>
+      </div>
+
+      <!-- Next Button (Fixed/Sticky Footer) -->
+      <Transition name="fade-slide">
+        <div
+          v-if="hasAnsweredCurrent"
+          class="absolute bottom-0 left-0 right-0 p-4 border-t border-slate-200/50 bg-white/90 backdrop-blur-md z-20"
+        >
+          <UButton
+            @click="nextQuestion"
+            class="w-full btn-premium py-3 rounded-xl font-bold flex items-center justify-center shadow-md active:scale-95 transition-transform cursor-pointer"
+          >
+            {{ isLastQuestion ? "View Results" : "Next Question" }}
+            <UIcon name="i-lucide-arrow-right" class="w-4 h-4 ml-2" />
+          </UButton>
+        </div>
+      </Transition>
+    </div>
+
+    <!-- Results State -->
+    <div
+      v-else-if="quizState === 'results'"
+      class="flex-1 overflow-y-auto custom-scrollbar flex flex-col items-center animate-fade-in"
+    >
+      <!-- Score Visualization -->
+      <div
+        class="w-full p-4 flex flex-col items-center justify-center bg-white/40 border-b border-slate-200/50 sticky top-0 z-10 backdrop-blur-md"
+      >
+        <div class="flex items-center gap-6 w-full max-w-lg px-2">
+          <div
+            class="relative w-20 h-20 flex items-center justify-center shrink-0"
+          >
+            <!-- Circular Progress -->
+            <svg
+              viewBox="0 0 128 128"
+              class="w-full h-full transform -rotate-90"
+            >
+              <circle
+                cx="64"
+                cy="64"
+                r="58"
+                stroke="currentColor"
+                stroke-width="10"
+                fill="transparent"
+                class="text-slate-100"
+              />
+              <circle
+                cx="64"
+                cy="64"
+                r="58"
+                stroke="currentColor"
+                stroke-width="10"
+                fill="transparent"
+                :stroke-dasharray="circumference"
+                :stroke-dashoffset="dashOffset"
+                stroke-linecap="round"
+                class="transition-all duration-1000 ease-out"
+                :class="
+                  scorePercentage >= 60 ? 'text-green-500' : 'text-orange-500'
+                "
+              />
+            </svg>
+            <div
+              class="absolute inset-0 flex flex-col items-center justify-center"
+            >
+              <span class="text-xl font-black text-slate-900 leading-none"
+                >{{ scorePercentage }}%</span
+              >
+            </div>
+          </div>
+
+          <div class="flex-1 min-w-0">
+            <h3 class="text-lg font-bold text-slate-900 mb-0.5 truncate">
+              {{
+                scorePercentage === 100
+                  ? "Perfect Mastery!"
+                  : scorePercentage >= 80
+                    ? "Excellent Work!"
+                    : scorePercentage >= 60
+                      ? "Good Progress!"
+                      : "Keep Learning!"
+              }}
+            </h3>
+            <p class="text-slate-600 text-xs font-medium mb-3">
+              You got
+              <span class="text-slate-900 font-bold">{{
+                store.getScore(project.id)
+              }}</span>
+              /
+              <span class="text-slate-900 font-bold">{{
+                questions.length
+              }}</span>
+              correct
+            </p>
+
+            <div class="flex gap-2">
+              <UButton
+                @click="store.resetQuiz(project.id)"
+                size="xs"
+                class="flex-1 btn-premium py-1.5 rounded-lg font-bold shadow-sm justify-center cursor-pointer"
+              >
+                Try Again
+              </UButton>
+              <UButton
+                @click="store.clearQuiz(project.id)"
+                size="xs"
+                variant="ghost"
+                class="px-3 py-1.5 border border-slate-200/60 rounded-lg text-slate-500 hover:text-slate-900 flex items-center justify-center cursor-pointer bg-white"
+                icon="i-lucide-settings-2"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Breakdown Section -->
+      <div class="w-full p-6 space-y-6">
+        <div class="flex items-center justify-between mb-4">
+          <h4
+            class="text-xs font-bold text-slate-400 uppercase tracking-[0.2em]"
+          >
+            Quiz Review
+          </h4>
+          <span class="text-[10px] font-medium text-slate-400"
+            >{{ questions.length }} questions</span
+          >
+        </div>
+
+        <div class="space-y-4">
+          <div
+            v-for="(q, idx) in questions"
+            :key="idx"
+            class="p-4 rounded-2xl bg-white border border-slate-200/60 shadow-sm transition-all hover:border-slate-300"
+          >
+            <div
+              class="flex items-start gap-3 cursor-pointer group/q"
+              @click="toggleQuestion(idx)"
+            >
+              <div
+                class="w-6 h-6 rounded-full flex items-center justify-center shrink-0 text-[10px] font-black mt-0.5"
+                :class="
+                  store.quizzes[project.id].answers[idx] === q.answer
+                    ? 'bg-green-100 text-green-600'
+                    : 'bg-red-100 text-red-600'
+                "
+              >
+                {{ idx + 1 }}
+              </div>
+              <p
+                class="flex-1 text-sm font-bold text-slate-800 leading-snug pt-1"
+              >
+                {{ q.question }}
+              </p>
+              <UIcon
+                :name="
+                  expandedQuestions[idx]
+                    ? 'i-lucide-chevron-up'
+                    : 'i-lucide-chevron-down'
+                "
+                class="w-5 h-5 text-slate-400 group-hover/q:text-slate-600 transition-colors mt-0.5"
+              />
+            </div>
+
+            <Transition name="fade-slide">
+              <div v-show="expandedQuestions[idx]" class="mt-4 ml-9 space-y-4">
+                <!-- Result Status -->
+                <div
+                  class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider"
+                  :class="
+                    store.quizzes[project.id].answers[idx] === q.answer
+                      ? 'bg-green-50 text-green-600 border border-green-100'
+                      : 'bg-red-50 text-red-600 border border-red-100'
+                  "
+                >
+                  <UIcon
+                    :name="
+                      store.quizzes[project.id].answers[idx] === q.answer
+                        ? 'i-lucide-check-circle'
+                        : 'i-lucide-x-circle'
+                    "
+                    class="w-3.5 h-3.5"
+                  />
+                  {{
+                    store.quizzes[project.id].answers[idx] === q.answer
+                      ? "Correct"
+                      : "Incorrect"
+                  }}
+                </div>
+
+                <div class="text-xs space-y-1.5">
+                  <div class="flex items-start gap-2">
+                    <span
+                      class="text-slate-400 font-semibold w-24 shrink-0 mt-0.5"
+                      >Your Answer:</span
+                    >
+                    <span
+                      :class="
+                        store.quizzes[project.id].answers[idx] === q.answer
+                          ? 'text-green-700 font-medium'
+                          : 'text-red-700 font-medium'
+                      "
+                    >
+                      {{
+                        store.quizzes[project.id].answers[idx] || "No answer"
+                      }}
+                    </span>
+                  </div>
+                  <div
+                    v-if="store.quizzes[project.id].answers[idx] !== q.answer"
+                    class="flex items-start gap-2"
+                  >
+                    <span
+                      class="text-slate-400 font-semibold w-24 shrink-0 mt-0.5"
+                      >Correct Answer:</span
+                    >
+                    <span class="text-green-700 font-bold italic">{{
+                      q.answer
+                    }}</span>
+                  </div>
+
+                  <div
+                    class="mt-3 p-3 rounded-xl bg-slate-50 border border-slate-100 italic text-slate-600 leading-relaxed text-[11px]"
+                  >
+                    {{ q.explanation }}
+                  </div>
+                </div>
+              </div>
+            </Transition>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useQuizStore } from "~/stores/quiz";
+import { useProjectStore } from "~/stores/projects";
+
+const props = defineProps({
+  project: { type: Object, required: true },
+});
+
+const store = useQuizStore();
+const pStore = useProjectStore();
+
+// Local config tracking before generation
+const settings = ref({
+  count: 3,
+  difficulty: "Beginner",
+  type: "Multiple Choice",
+});
+
+const typeOptions = ["Multiple Choice", "True/False"];
+
+const countOptions = [
+  { label: "Short (3 questions)", value: 3 },
+  { label: "Medium (5 questions)", value: 5 },
+  { label: "Deep Dive (10 questions)", value: 10 },
+];
+
+// Store Computed mappings
+const quizState = computed(() => store.getQuizState(props.project.id));
+const questions = computed(() => store.getQuestions(props.project.id));
+const currentQuestionIndex = computed(() =>
+  store.getCurrentQuestionIndex(props.project.id),
+);
+const currentQuestion = computed(
+  () => questions.value[currentQuestionIndex.value],
+);
+const currentAnswer = computed(() => store.getCurrentAnswer(props.project.id));
+
+const hasAnsweredCurrent = computed(() => !!currentAnswer.value);
+const isCorrect = computed(
+  () =>
+    hasAnsweredCurrent.value &&
+    currentAnswer.value === currentQuestion.value.answer,
+);
+const isLastQuestion = computed(
+  () => currentQuestionIndex.value === questions.value.length - 1,
+);
+const scorePercentage = computed(() =>
+  questions.value.length > 0
+    ? Math.round(
+        (store.getScore(props.project.id) / questions.value.length) * 100,
+      )
+    : 0,
+);
+
+// Results Expand/Collapse state
+const expandedQuestions = ref({});
+
+const toggleQuestion = (idx) => {
+  expandedQuestions.value[idx] = !expandedQuestions.value[idx];
+};
+
+// Initialize expanded state when quiz completes
+watch(
+  quizState,
+  (newState) => {
+    if (newState === "results") {
+      // Default all to expanded
+      questions.value.forEach((_, idx) => {
+        expandedQuestions.value[idx] = true;
+      });
+    }
+  },
+  { immediate: true },
+);
+
+// SVG Gauge precision
+const circumference = 2 * Math.PI * 58;
+const dashOffset = computed(
+  () => circumference * (1 - scorePercentage.value / 100),
+);
+
+const startQuiz = async () => {
+  if (
+    !pStore.apiKeys.gemini &&
+    !pStore.apiKeys.openai &&
+    !pStore.apiKeys.anthropic
+  ) {
+    alert("Please configure API keys in AI Providers first.");
+    return;
+  }
+  await store.generateQuiz(props.project.id, settings.value);
+};
+
+const selectAnswer = (opt) => {
+  if (!hasAnsweredCurrent.value) {
+    store.answerQuestion(props.project.id, opt);
+  }
+};
+
+const nextQuestion = () => {
+  store.nextQuestion(props.project.id);
+};
+
+// Styling helpers
+const isSelected = (opt) => currentAnswer.value === opt;
+
+const getOptionClass = (opt) => {
+  if (!hasAnsweredCurrent.value) {
+    return "bg-white border-slate-200 hover:border-green-300 hover:bg-green-50/30 text-slate-700";
+  }
+
+  if (opt === currentQuestion.value.answer) {
+    // The right answer
+    return "bg-green-50 border-green-500 text-green-800 shadow-[0_0_0_1px_rgba(34,197,94,1)]";
+  }
+
+  if (isSelected(opt)) {
+    // Picked wrong answer
+    return "bg-red-50 border-red-300 text-red-700";
+  }
+
+  // Other unpicked answers
+  return "bg-slate-50 border-slate-200 text-slate-400 opacity-60";
+};
+
+const getRadioClass = (opt) => {
+  if (!hasAnsweredCurrent.value)
+    return "border-slate-300 group-hover:border-green-400";
+  if (opt === currentQuestion.value.answer)
+    return "border-green-500 text-green-500";
+  if (isSelected(opt)) return "border-red-400 text-red-400";
+  return "border-slate-200";
+};
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(203, 213, 225, 0.5);
+  border-radius: 2px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(148, 163, 184, 0.8);
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.3s ease;
+}
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+</style>

frontend/app/components/TemplateMenu.vue

@@ -0,0 +1,49 @@
+<template>
+  <UDropdownMenu
+    v-slot="{ open }"
+    :modal="false"
+    :items="[{
+      label: 'Starter',
+      to: 'https://starter-template.nuxt.dev/',
+      color: 'primary',
+      checked: true,
+      type: 'checkbox'
+    }, {
+      label: 'Landing',
+      to: 'https://landing-template.nuxt.dev/'
+    }, {
+      label: 'Docs',
+      to: 'https://docs-template.nuxt.dev/'
+    }, {
+      label: 'SaaS',
+      to: 'https://saas-template.nuxt.dev/'
+    }, {
+      label: 'Dashboard',
+      to: 'https://dashboard-template.nuxt.dev/'
+    }, {
+      label: 'Chat',
+      to: 'https://chat-template.nuxt.dev/'
+    }, {
+      label: 'Portfolio',
+      to: 'https://portfolio-template.nuxt.dev/'
+    }, {
+      label: 'Changelog',
+      to: 'https://changelog-template.nuxt.dev/'
+    }]"
+    :content="{ align: 'start' }"
+    :ui="{ content: 'min-w-fit' }"
+    size="xs"
+  >
+    <UButton
+      label="Starter"
+      variant="subtle"
+      trailing-icon="i-lucide-chevron-down"
+      size="xs"
+      class="-mb-[6px] font-semibold rounded-full truncate"
+      :class="[open && 'bg-primary/15']"
+      :ui="{
+        trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
+      }"
+    />
+  </UDropdownMenu>
+</template>

frontend/app/components/TopNavbar.vue

@@ -0,0 +1,198 @@
+<template>
+  <header
+    class="sticky top-0 z-50 w-full"
+    :class="scrolled ? 'scrolled-header' : ''"
+  >
+    <div
+      class="header-inner max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between"
+    >
+      <!-- Brand -->
+      <NuxtLink to="/" class="flex items-center gap-2 group shrink-0">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="28"
+          height="28"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#00dc82"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="lucide lucide-boxes-icon lucide-boxes group-hover:scale-110 transition-transform duration-300"
+        >
+          <path
+            d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"
+          />
+          <path d="m7 16.5-4.74-2.85" />
+          <path d="m7 16.5 5-3" />
+          <path d="M7 16.5v5.17" />
+          <path
+            d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"
+          />
+          <path d="m17 16.5-5-3" />
+          <path d="m17 16.5 4.74-2.85" />
+          <path d="M17 16.5v5.17" />
+          <path
+            d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"
+          />
+          <path d="M12 8 7.26 5.15" />
+          <path d="m12 8 4.74-2.85" />
+          <path d="M12 13.5V8" />
+        </svg>
+        <span class="text-[17px] font-black tracking-tight text-slate-900">
+          Algo<span class="text-green-500">Vision</span>
+        </span>
+      </NuxtLink>
+
+      <!-- Center Nav -->
+      <nav
+        class="hidden md:flex items-center gap-1 bg-white/50 backdrop-blur-md border border-white/70 rounded-full px-2 py-1.5 shadow-sm"
+      >
+        <NuxtLink
+          v-for="link in navLinks"
+          :key="link.to"
+          :to="link.to"
+          :id="`nav-${link.to.replace('/', '') || 'generate'}`"
+          class="nav-pill"
+          :class="{ 'nav-pill-active': isActive(link.to) }"
+        >
+          <UIcon :name="link.icon" class="w-3.5 h-3.5" />
+          {{ link.label }}
+        </NuxtLink>
+      </nav>
+
+      <!-- Right Actions -->
+      <div class="flex items-center gap-2">
+        <!-- Mobile menu -->
+        <button
+          class="md:hidden p-2 rounded-lg btn-glass text-slate-600"
+          @click="mobileOpen = !mobileOpen"
+        >
+          <UIcon
+            :name="mobileOpen ? 'i-lucide-x' : 'i-lucide-menu'"
+            class="w-5 h-5"
+          />
+        </button>
+
+        <!-- Tutorial Button -->
+        <UButton
+          id="nav-tutorial"
+          class="hidden sm:flex btn-premium text-white text-sm font-semibold px-4 py-2 rounded-xl"
+          @click="startTour"
+        >
+          <UIcon name="i-lucide-play-circle" class="w-4 h-4 mr-1.5" />
+          Tutorial
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Mobile Nav -->
+    <Transition name="mobile-nav">
+      <div
+        v-if="mobileOpen"
+        class="md:hidden premium-glass border-t border-white/40 px-4 py-4 space-y-1"
+      >
+        <NuxtLink
+          v-for="link in navLinks"
+          :key="link.to"
+          :to="link.to"
+          class="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-slate-700 hover:text-green-600 hover:bg-green-50/40 transition-all active:scale-95"
+          :class="{ 'text-green-600 bg-green-50/60': isActive(link.to) }"
+          @click="mobileOpen = false"
+        >
+          <UIcon :name="link.icon" class="w-4 h-4" />
+          {{ link.label }}
+        </NuxtLink>
+      </div>
+    </Transition>
+  </header>
+</template>
+
+<script setup>
+const route = useRoute();
+const store = useProjectStore();
+const mobileOpen = ref(false);
+const scrolled = ref(false);
+
+const navLinks = [
+  { to: "/", label: "Generate", icon: "i-lucide-sparkles" },
+  { to: "/projects", label: "Projects", icon: "i-lucide-folder-open" },
+  { to: "/ai-providers", label: "AI Providers", icon: "i-lucide-server" },
+];
+
+const isActive = (path) => {
+  if (path === "/") return route.path === "/";
+  return route.path.startsWith(path);
+};
+
+// Start Onboarding Tour
+const startTour = () => {
+  console.log("Tutorial clicked, starting onboarding...");
+  store.startOnboarding();
+};
+
+onMounted(() => {
+  const handler = () => {
+    scrolled.value = window.scrollY > 20;
+  };
+  window.addEventListener("scroll", handler, { passive: true });
+  onUnmounted(() => window.removeEventListener("scroll", handler));
+});
+</script>
+
+<style scoped>
+.header-inner {
+  transition: all 0.3s ease;
+}
+
+.scrolled-header .header-inner {
+  /* subtle shadow when scrolled */
+}
+
+header {
+  background: rgba(248, 250, 252, 0.6);
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
+  transition: all 0.3s ease;
+}
+
+.scrolled-header {
+  background: rgba(255, 255, 255, 0.82) !important;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
+}
+
+.nav-pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #475569;
+  transition: all 0.18s ease;
+}
+.nav-pill:hover {
+  color: #16a34a;
+  background: rgba(22, 163, 74, 0.08);
+  transform: translateY(-1.5px) scale(1.03);
+  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.08);
+}
+.nav-pill-active {
+  color: #16a34a;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.mobile-nav-enter-active,
+.mobile-nav-leave-active {
+  transition: all 0.22s ease;
+}
+.mobile-nav-enter-from,
+.mobile-nav-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>

frontend/app/layouts/default.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    class="relative min-h-screen bg-slate-50 text-slate-900 selection:bg-green-500/30"
+  >
+    <!-- Animated Glass Deep Layer Background -->
+    <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
+      <!-- Base Soft Light Gradient -->
+      <div
+        class="absolute inset-0 bg-gradient-to-br from-[#ffffff] via-[#f0fdf6] to-[#f8fafc]"
+      ></div>
+
+      <!-- Soft Noise Filter Overlay for premium physical texture -->
+      <div class="absolute inset-0 bg-noise mix-blend-overlay"></div>
+
+      <!-- Animated Light Orbs -->
+      <div
+        class="absolute -top-[10%] -left-[10%] w-3/4 max-w-full aspect-square rounded-full filter blur-[120px] opacity-40 animate-blob"
+        style="
+          background: radial-gradient(
+            circle,
+            rgba(0, 220, 130, 0.5) 0%,
+            rgba(0, 220, 130, 0) 70%
+          );
+        "
+      ></div>
+
+      <div
+        class="absolute top-[20%] -right-[10%] w-2/3 max-w-full aspect-square rounded-full filter blur-[100px] opacity-30 animate-blob animation-delay-2000"
+        style="
+          background: radial-gradient(
+            circle,
+            rgba(56, 189, 248, 0.4) 0%,
+            rgba(56, 189, 248, 0) 70%
+          );
+        "
+      ></div>
+
+      <div
+        class="absolute -bottom-[20%] left-[20%] w-3/4 max-w-full aspect-square rounded-full filter blur-[120px] opacity-30 animate-blob animation-delay-4000"
+        style="
+          background: radial-gradient(
+            circle,
+            rgba(74, 222, 141, 0.5) 0%,
+            rgba(74, 222, 141, 0) 70%
+          );
+        "
+      ></div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="relative z-10 flex flex-col min-h-screen">
+      <TopNavbar />
+
+      <main class="flex-1 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <slot />
+      </main>
+
+      <footer
+        v-if="!['projects', 'ai-providers'].includes(String($route.name || ''))"
+        class="w-full text-center py-6 text-sm text-slate-500 dark:text-slate-400 backdrop-blur-md bg-white/5 dark:bg-black/5 border-t border-white/20 dark:border-white/5"
+      >
+        &copy; {{ new Date().getFullYear() }} AlgoVision. All rights reserved.
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style>
+/* Add the blob animation keyframes directly here for global usage if needed, or in CSS */
+@keyframes blob {
+  0% {
+    transform: translate(0px, 0px) scale(1);
+  }
+  33% {
+    transform: translate(30px, -50px) scale(1.1);
+  }
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+  100% {
+    transform: translate(0px, 0px) scale(1);
+  }
+}
+
+.animate-blob {
+  animation: blob 7s infinite alternate;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}
+</style>

frontend/app/layouts/workspace.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="relative h-screen flex flex-col bg-slate-50 text-slate-900 selection:bg-green-500/30 overflow-hidden"
+  >
+    <!-- Animated Glass Deep Layer Background -->
+    <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
+      <!-- Base Soft Light Gradient -->
+      <div
+        class="absolute inset-0 bg-gradient-to-br from-[#ffffff] via-[#f0fdf6] to-[#f8fafc]"
+      ></div>
+
+      <!-- Soft Noise Filter Overlay -->
+      <div class="absolute inset-0 bg-noise mix-blend-overlay"></div>
+
+      <!-- Animated Light Orbs -->
+      <div
+        class="absolute -top-[10%] -left-[10%] w-3/4 max-w-full aspect-square rounded-full filter blur-[120px] opacity-40 animate-blob"
+        style="
+          background: radial-gradient(
+            circle,
+            rgba(0, 220, 130, 0.5) 0%,
+            rgba(0, 220, 130, 0) 70%
+          );
+        "
+      ></div>
+
+      <div
+        class="absolute top-[20%] -right-[10%] w-2/3 max-w-full aspect-square rounded-full filter blur-[100px] opacity-30 animate-blob animation-delay-2000"
+        style="
+          background: radial-gradient(
+            circle,
+            rgba(56, 189, 248, 0.4) 0%,
+            rgba(56, 189, 248, 0) 70%
+          );
+        "
+      ></div>
+
+      <div
+        class="absolute -bottom-[20%] left-[20%] w-3/4 max-w-full aspect-square rounded-full filter blur-[120px] opacity-30 animate-blob animation-delay-4000"
+        style="
+          background: radial-gradient(
+            circle,
+            rgba(74, 222, 141, 0.5) 0%,
+            rgba(74, 222, 141, 0) 70%
+          );
+        "
+      ></div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="relative z-10 flex flex-col h-full">
+      <TopNavbar />
+
+      <main class="flex-1 w-full overflow-hidden">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style>
+@keyframes blob {
+  0% {
+    transform: translate(0px, 0px) scale(1);
+  }
+  33% {
+    transform: translate(30px, -50px) scale(1.1);
+  }
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+  100% {
+    transform: translate(0px, 0px) scale(1);
+  }
+}
+
+.animate-blob {
+  animation: blob 7s infinite alternate;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}
+</style>

frontend/app/pages/ai-providers.vue

@@ -0,0 +1,595 @@
+<template>
+  <div class="relative w-full overflow-hidden flex flex-col pt-4 pb-12">
+    <!-- Header -->
+    <div
+      class="w-full max-w-2xl mx-auto px-4 mb-4 text-center animate-fade-in-up"
+    >
+      <div
+        class="w-10 h-10 rounded-2xl bg-white/60 border border-white flex items-center justify-center mx-auto mb-3 shadow-sm"
+      >
+        <UIcon name="i-lucide-key-round" class="w-5 h-5 text-slate-700" />
+      </div>
+      <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight mb-1">
+        Connect Your AI Accounts
+      </h1>
+      <p class="text-slate-500 text-sm leading-relaxed">
+        AlgoVision uses AI to generate your videos. Connect at least one
+        provider below to get started — it only takes a minute.
+      </p>
+    </div>
+
+    <!-- Trust Pillars -->
+    <div class="w-full max-w-3xl mx-auto px-4 mb-8">
+      <!-- AI Providers Grid -->
+      <div
+        id="trust-pillars"
+        class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"
+      >
+        <!-- Privacy -->
+        <div
+          class="premium-glass rounded-2xl p-4 flex flex-col items-center text-center animate-fade-in-up animation-delay-100"
+        >
+          <div
+            class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center mb-3 group"
+          >
+            <UIcon
+              name="i-lucide-shield-check"
+              class="w-5 h-5 text-blue-500 group-hover:scale-110 transition-transform"
+            />
+          </div>
+          <h4 class="font-bold text-slate-900 text-sm mb-1.5">Local Privacy</h4>
+          <p class="text-xs text-slate-500 leading-relaxed">
+            Keys stay in your browser. We never see or store them on our
+            servers.
+          </p>
+        </div>
+
+        <!-- Pricing -->
+        <div
+          class="premium-glass rounded-2xl p-4 flex flex-col items-center text-center animate-fade-in-up animation-delay-150"
+        >
+          <div
+            class="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center mb-3 group"
+          >
+            <UIcon
+              name="i-lucide-banknote"
+              class="w-5 h-5 text-emerald-500 group-hover:scale-110 transition-transform"
+            />
+          </div>
+          <h4 class="font-bold text-slate-900 text-sm mb-1.5">Direct Cost</h4>
+          <p class="text-xs text-slate-500 leading-relaxed">
+            Pay providers directly. Most videos cost only a few USD cents to
+            generate.
+          </p>
+        </div>
+
+        <!-- Flexibility -->
+        <div
+          class="premium-glass rounded-2xl p-4 flex flex-col items-center text-center animate-fade-in-up animation-delay-200"
+        >
+          <div
+            class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center mb-3 group"
+          >
+            <UIcon
+              name="i-lucide-layers"
+              class="w-5 h-5 text-indigo-500 group-hover:scale-110 transition-transform"
+            />
+          </div>
+          <h4 class="font-bold text-slate-900 text-sm mb-1.5">One-Key Setup</h4>
+          <p class="text-xs text-slate-500 leading-relaxed">
+            Need only one key to start. Add more to unlock different AI models.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Provider Cards -->
+    <div class="w-full max-w-2xl mx-auto px-4 relative z-10">
+      <div
+        id="providers-list"
+        class="space-y-4 animate-fade-in-up animation-delay-200"
+      >
+        <!-- Google Gemini -->
+        <div
+          id="gemini-key-input"
+          class="premium-glass rounded-3xl p-4 flex flex-col gap-2"
+        >
+          <div class="flex items-center justify-between gap-3">
+            <!-- Logo + Name -->
+            <div class="flex items-center gap-3">
+              <!-- Gemini logo: 4-pointed star -->
+              <div
+                class="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center shrink-0 overflow-hidden"
+              >
+                <img
+                  src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Google_Gemini_icon_2025.svg"
+                  alt="Gemini"
+                  class="w-6 h-6"
+                />
+              </div>
+              <div>
+                <div class="flex items-center gap-2 flex-wrap">
+                  <h3 class="font-bold text-slate-900">Google Gemini</h3>
+                  <span
+                    class="text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded bg-green-100 text-green-700"
+                    >Recommended</span
+                  >
+                </div>
+                <p class="text-xs text-slate-400 mt-0.5">AI provider</p>
+              </div>
+            </div>
+            <!-- Status + Get key + Validation -->
+            <div class="flex items-center gap-2 shrink-0">
+              <a
+                v-if="!store.apiKeys.gemini"
+                href="https://aistudio.google.com/app/apikey"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="inline-flex items-center gap-1 text-xs font-semibold text-slate-400 hover:text-green-600 transition-colors"
+                title="Get a free Gemini key"
+              >
+                Get key
+                <UIcon name="i-lucide-external-link" class="w-3 h-3" />
+              </a>
+              <!-- Validation status icon -->
+              <span
+                v-if="validationStatus.gemini === 'valid'"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-green-100 text-green-700"
+              >
+                <UIcon name="i-lucide-check-circle" class="w-3.5 h-3.5" />
+                Valid
+              </span>
+              <span
+                v-else-if="validationStatus.gemini === 'invalid'"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-red-100 text-red-700"
+                :title="validationErrors.gemini"
+              >
+                <UIcon name="i-lucide-x-circle" class="w-3.5 h-3.5" />
+                Invalid
+              </span>
+              <span
+                v-else-if="validationStatus.gemini === 'testing'"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-blue-100 text-blue-700"
+              >
+                <UIcon
+                  name="i-lucide-loader-2"
+                  class="w-3.5 h-3.5 animate-spin"
+                />
+                Testing...
+              </span>
+              <span
+                v-else-if="store.apiKeys.gemini"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-green-100 text-green-700"
+              >
+                <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
+                Connected
+              </span>
+              <span
+                v-else
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-slate-100 text-slate-500"
+              >
+                <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
+                Not connected
+              </span>
+            </div>
+          </div>
+
+          <!-- Input and Button side by side -->
+          <div class="flex gap-2">
+            <input
+              v-model="keys.gemini"
+              type="password"
+              placeholder="Paste your key here  (starts with AIzaSy…)"
+              class="flex-1 premium-input rounded-xl px-4 py-2.5 text-sm font-mono tracking-wider outline-none text-slate-700 placeholder:font-sans placeholder:tracking-normal placeholder:text-slate-400 select-none"
+              @copy.prevent
+              @cut.prevent
+              @contextmenu.prevent
+              @paste="() => scheduleValidation('gemini', 500)"
+              @input="scheduleValidation('gemini', 1000)"
+            />
+            <button
+              @click="saveAndValidateKeys('gemini')"
+              class="btn-premium text-white text-xs font-semibold px-4 py-2 rounded-xl shrink-0"
+              :disabled="validationStatus.gemini === 'testing'"
+            >
+              {{
+                validationStatus.gemini === "testing"
+                  ? "Testing..."
+                  : "Save & Test"
+              }}
+            </button>
+          </div>
+          <!-- Error message -->
+          <p
+            v-if="
+              validationStatus.gemini === 'invalid' && validationErrors.gemini
+            "
+            class="text-xs text-red-600 mt-1 flex items-center gap-1"
+          >
+            <UIcon name="i-lucide-alert-circle" class="w-3 h-3" />
+            {{ validationErrors.gemini }}
+          </p>
+        </div>
+
+        <!-- OpenAI -->
+        <div class="premium-glass rounded-3xl p-4 flex flex-col gap-2">
+          <div class="flex items-center justify-between gap-3">
+            <div class="flex items-center gap-3">
+              <!-- OpenAI logo -->
+              <div
+                class="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center shrink-0"
+              >
+                <svg
+                  viewBox="0 0 41 41"
+                  class="w-6 h-6 fill-black"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835 9.964 9.964 0 0 0-6.505-2.608 10.079 10.079 0 0 0-9.612 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 6.504 2.608 10.079 10.079 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.814zm-15.217 21.362a7.477 7.477 0 0 1-4.801-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.487 7.443zM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744zM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.012L7.044 23.86a7.504 7.504 0 0 1-2.747-10.24zm27.658 6.437l-9.724-5.615 3.367-1.943a.121.121 0 0 1 .114-.012l8.048 4.648a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.647-1.13zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763zm-21.063 6.929l-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225zm1.829-3.943l4.33-2.501 4.332 2.497v4.998l-4.331 2.5-4.331-2.5V18z"
+                  />
+                </svg>
+              </div>
+              <div>
+                <h3 class="font-bold text-slate-900">OpenAI GPT</h3>
+                <p class="text-xs text-slate-400 mt-0.5">AI provider</p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2 shrink-0">
+              <a
+                v-if="!store.apiKeys.openai"
+                href="https://platform.openai.com/api-keys"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="inline-flex items-center gap-1 text-xs font-semibold text-slate-400 hover:text-green-600 transition-colors"
+                title="Get a free OpenAI key"
+              >
+                Get key
+                <UIcon name="i-lucide-external-link" class="w-3 h-3" />
+              </a>
+              <!-- Validation status -->
+              <span
+                v-if="validationStatus.openai === 'valid'"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-green-100 text-green-700"
+              >
+                <UIcon name="i-lucide-check-circle" class="w-3.5 h-3.5" />
+                Valid
+              </span>
+              <span
+                v-else-if="validationStatus.openai === 'invalid'"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-red-100 text-red-700"
+                :title="validationErrors.openai"
+              >
+                <UIcon name="i-lucide-x-circle" class="w-3.5 h-3.5" />
+                Invalid
+              </span>
+              <span
+                v-else-if="validationStatus.openai === 'testing'"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-blue-100 text-blue-700"
+              >
+                <UIcon
+                  name="i-lucide-loader-2"
+                  class="w-3.5 h-3.5 animate-spin"
+                />
+                Testing...
+              </span>
+              <span
+                v-else-if="store.apiKeys.openai"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-green-100 text-green-700"
+              >
+                <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
+                Connected
+              </span>
+              <span
+                v-else
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-slate-100 text-slate-500"
+              >
+                <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
+                Not connected
+              </span>
+            </div>
+          </div>
+
+          <div class="flex gap-2">
+            <input
+              v-model="keys.openai"
+              type="password"
+              placeholder="Paste your key here  (starts with sk-proj-…)"
+              class="flex-1 premium-input rounded-xl px-4 py-2.5 text-sm font-mono tracking-wider outline-none text-slate-700 placeholder:font-sans placeholder:tracking-normal placeholder:text-slate-400 select-none"
+              @copy.prevent
+              @cut.prevent
+              @contextmenu.prevent
+              @paste="() => scheduleValidation('openai', 500)"
+              @input="scheduleValidation('openai', 1000)"
+            />
+            <button
+              @click="saveAndValidateKeys('openai')"
+              class="btn-premium text-white text-xs font-semibold px-4 py-2 rounded-xl shrink-0"
+              :disabled="validationStatus.openai === 'testing'"
+            >
+              {{
+                validationStatus.openai === "testing"
+                  ? "Testing..."
+                  : "Save & Test"
+              }}
+            </button>
+          </div>
+          <p
+            v-if="
+              validationStatus.openai === 'invalid' && validationErrors.openai
+            "
+            class="text-xs text-red-600 mt-1 flex items-center gap-1"
+          >
+            <UIcon name="i-lucide-alert-circle" class="w-3 h-3" />
+            {{ validationErrors.openai }}
+          </p>
+        </div>
+
+        <!-- Anthropic -->
+        <div class="premium-glass rounded-3xl p-4 flex flex-col gap-2">
+          <div class="flex items-center justify-between gap-3">
+            <div class="flex items-center gap-3">
+              <!-- Anthropic logo: minimal "A" wedge -->
+              <div
+                class="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center shrink-0"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  class="w-6 h-6 fill-[#D97757]"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z"
+                  />
+                </svg>
+              </div>
+              <div>
+                <h3 class="font-bold text-slate-900">Anthropic Claude</h3>
+                <p class="text-xs text-slate-400 mt-0.5">AI provider</p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2 shrink-0">
+              <a
+                v-if="!store.apiKeys.anthropic"
+                href="https://console.anthropic.com/settings/keys"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="inline-flex items-center gap-1 text-xs font-semibold text-slate-400 hover:text-green-600 transition-colors"
+                title="Get a free Anthropic key"
+              >
+                Get key
+                <UIcon name="i-lucide-external-link" class="w-3 h-3" />
+              </a>
+              <!-- Validation status -->
+              <span
+                v-if="validationStatus.anthropic === 'valid'"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-green-100 text-green-700"
+              >
+                <UIcon name="i-lucide-check-circle" class="w-3.5 h-3.5" />
+                Valid
+              </span>
+              <span
+                v-else-if="validationStatus.anthropic === 'invalid'"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-red-100 text-red-700"
+                :title="validationErrors.anthropic"
+              >
+                <UIcon name="i-lucide-x-circle" class="w-3.5 h-3.5" />
+                Invalid
+              </span>
+              <span
+                v-else-if="validationStatus.anthropic === 'testing'"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-blue-100 text-blue-700"
+              >
+                <UIcon
+                  name="i-lucide-loader-2"
+                  class="w-3.5 h-3.5 animate-spin"
+                />
+                Testing...
+              </span>
+              <span
+                v-else-if="store.apiKeys.anthropic"
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-green-100 text-green-700"
+              >
+                <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
+                Connected
+              </span>
+              <span
+                v-else
+                class="text-xs font-semibold px-2.5 py-1 flex items-center gap-1.5 rounded-full bg-slate-100 text-slate-500"
+              >
+                <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
+                Not connected
+              </span>
+            </div>
+          </div>
+
+          <div class="flex gap-2">
+            <input
+              v-model="keys.anthropic"
+              type="password"
+              placeholder="Paste your key here  (starts with sk-ant-…)"
+              class="flex-1 premium-input rounded-xl px-4 py-2.5 text-sm font-mono tracking-wider outline-none text-slate-700 placeholder:font-sans placeholder:tracking-normal placeholder:text-slate-400 select-none"
+              @copy.prevent
+              @cut.prevent
+              @contextmenu.prevent
+              @paste="() => scheduleValidation('anthropic', 500)"
+              @input="scheduleValidation('anthropic', 1000)"
+            />
+            <button
+              @click="saveAndValidateKeys('anthropic')"
+              class="btn-premium text-white text-xs font-semibold px-4 py-2 rounded-xl shrink-0"
+              :disabled="validationStatus.anthropic === 'testing'"
+            >
+              {{
+                validationStatus.anthropic === "testing"
+                  ? "Testing..."
+                  : "Save & Test"
+              }}
+            </button>
+          </div>
+          <p
+            v-if="
+              validationStatus.anthropic === 'invalid' &&
+              validationErrors.anthropic
+            "
+            class="text-xs text-red-600 mt-1 flex items-center gap-1"
+          >
+            <UIcon name="i-lucide-alert-circle" class="w-3 h-3" />
+            {{ validationErrors.anthropic }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useProjectStore } from "~/stores/projects";
+import api from "~/utils/api";
+
+const store = useProjectStore();
+const toast = useToast();
+
+const keys = ref({ openai: "", anthropic: "", gemini: "" });
+
+// Validation state
+const validationStatus = ref({
+  gemini: "",
+  openai: "",
+  anthropic: "",
+});
+const validationErrors = ref({
+  gemini: "",
+  openai: "",
+  anthropic: "",
+});
+
+// Debounce timers to avoid spamming the API
+const validationTimers = {};
+
+function scheduleValidation(provider, delayMs) {
+  // Clear existing timer for this provider
+  if (validationTimers[provider]) {
+    clearTimeout(validationTimers[provider]);
+  }
+
+  // Schedule new validation after delay
+  validationTimers[provider] = setTimeout(async () => {
+    const key = keys.value[provider];
+    if (!key || key.trim().length < 10) {
+      // Key too short to be valid, clear status
+      validationStatus.value[provider] = "";
+      validationErrors.value[provider] = "";
+      return;
+    }
+
+    // Test the key
+    validationStatus.value[provider] = "testing";
+    validationErrors.value[provider] = "";
+
+    try {
+      const result = await api.validateApiKeys({
+        [`${provider}_api_key`]: key,
+      });
+
+      if (result.results[provider]?.valid) {
+        validationStatus.value[provider] = "valid";
+        validationErrors.value[provider] = "";
+      } else {
+        validationStatus.value[provider] = "invalid";
+        validationErrors.value[provider] =
+          result.results[provider]?.error || "Invalid API key";
+      }
+    } catch (error) {
+      validationStatus.value[provider] = "invalid";
+      validationErrors.value[provider] =
+        "Failed to validate key. Check your network and try again.";
+    }
+  }, delayMs);
+}
+
+async function saveAndValidateKeys(targetProvider = null) {
+  // Save keys to store first
+  store.setApiKeys(keys.value);
+
+  // Only validate the specific provider that was clicked, or all if none specified
+  const providersToValidate = targetProvider
+    ? [targetProvider]
+    : ["gemini", "openai", "anthropic"];
+  let anyInvalid = false;
+
+  for (const provider of providersToValidate) {
+    const key = keys.value[provider];
+    if (key && key.trim().length >= 10) {
+      validationStatus.value[provider] = "testing";
+      validationErrors.value[provider] = "";
+
+      try {
+        const result = await api.validateApiKeys({
+          [`${provider}_api_key`]: key,
+        });
+
+        if (result.results[provider]?.valid) {
+          validationStatus.value[provider] = "valid";
+        } else {
+          validationStatus.value[provider] = "invalid";
+          validationErrors.value[provider] =
+            result.results[provider]?.error || "Invalid key";
+          anyInvalid = true;
+        }
+      } catch (error) {
+        validationStatus.value[provider] = "invalid";
+        validationErrors.value[provider] = "Failed to validate key";
+        anyInvalid = true;
+      }
+    }
+  }
+
+  // Show toast based on validation results
+  if (targetProvider) {
+    // Single provider validation
+    const status = validationStatus.value[targetProvider];
+    if (status === "valid") {
+      toast.add({
+        title: "Key Validated Successfully",
+        description: `${targetProvider.charAt(0).toUpperCase() + targetProvider.slice(1)} API key is valid and ready to use.`,
+        icon: "i-lucide-check-circle",
+        color: "green",
+      });
+    } else if (status === "invalid") {
+      toast.add({
+        title: "Key Validation Failed",
+        description:
+          validationErrors.value[targetProvider] || "Invalid API key",
+        icon: "i-lucide-alert-circle",
+        color: "red",
+      });
+    }
+  } else if (anyInvalid) {
+    toast.add({
+      title: "Some Keys Invalid",
+      description:
+        "One or more API keys failed validation. Please check the errors below.",
+      icon: "i-lucide-alert-circle",
+      color: "red",
+    });
+  } else {
+    toast.add({
+      title: "Keys Validated Successfully",
+      description: "All provided API keys are valid and ready to use.",
+      icon: "i-lucide-check-circle",
+      color: "green",
+    });
+  }
+}
+
+onMounted(() => {
+  if (import.meta.client) {
+    store.initKeys();
+    keys.value = { ...store.apiKeys };
+
+    // DO NOT auto-validate existing keys on mount
+    // Validation should only happen when user explicitly clicks "Save & Test" or types/pastes a key
+  }
+});
+</script>

frontend/app/pages/index.vue

@@ -0,0 +1,612 @@
+<template>
+  <div class="relative w-full h-full overflow-hidden flex">
+    <!-- LEFT PANEL: Command Center (Form) -->
+    <div
+      class="w-full h-full overflow-y-auto custom-scrollbar transition-all duration-700 ease-in-out flex flex-col items-center p-4 sm:p-6"
+    >
+      <div
+        class="w-full max-w-2xl my-auto transition-all duration-700 ease-in-out"
+      >
+        <!-- Hero Text -->
+        <div class="text-center mb-4 relative z-10">
+          <h1
+            class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight mb-2"
+          >
+            Explain concepts with <br />
+            <span
+              class="text-transparent bg-clip-text bg-gradient-to-br from-green-400 to-green-600"
+              >AlgoVision</span
+            >
+          </h1>
+          <p
+            class="text-slate-500 text-lg sm:text-xl font-medium max-w-xl mx-auto"
+          >
+            Transform any complex algorithms or mathematical concepts into a
+            compelling, animated video lesson.
+          </p>
+        </div>
+
+        <!-- GENERATOR MODULE -->
+        <div
+          class="premium-glass rounded-3xl p-5 sm:p-6 relative z-10 shadow-xl shadow-slate-200/50"
+        >
+          <div class="space-y-4 relative z-10">
+            <!-- Lesson Concept Block -->
+            <div id="lesson-concept-block" class="space-y-4">
+              <!-- Textarea -->
+              <div id="concept-input-group" class="group">
+                <label
+                  class="block text-xs font-semibold text-slate-500 uppercase tracking-widest mb-1.5 ml-1"
+                  >Concept Description</label
+                >
+                <div class="relative group/input">
+                  <textarea
+                    v-model="description"
+                    id="concept-input"
+                    placeholder="Describe the topic you want to explain (e.g., 'How Merge Sort works' or 'The concept of Quantum Entanglement')..."
+                    class="w-full premium-input rounded-2xl px-5 py-4 min-h-[220px] text-md text-slate-700 placeholder:text-slate-400 resize-none transition-shadow"
+                    rows="8"
+                    @focus="isFocused = true"
+                    @blur="isFocused = false"
+                  ></textarea>
+
+                  <UTooltip
+                    text="Let AI help you research and draft a structured lesson plan for your topic."
+                    :popper="{ placement: 'top' }"
+                  >
+                    <button
+                      id="ai-draft-btn"
+                      @click="showAiDialog = true"
+                      class="absolute bottom-4 right-4 bg-white/70 hover:bg-white text-green-600 border border-green-200 shadow-md rounded-xl px-3.5 py-2 text-sm font-bold flex items-center gap-1.5 transition-all disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer group/draft animate-pulse-subtle hover:animate-none"
+                      :disabled="
+                        !description.trim() ||
+                        store.isDrafting ||
+                        store.loadingModels
+                      "
+                    >
+                      <UIcon
+                        :name="
+                          store.isDrafting
+                            ? 'i-lucide-loader-2'
+                            : 'i-lucide-wand-2'
+                        "
+                        class="w-4 h-4 text-green-500 group-hover/draft:scale-110 transition-transform"
+                        :class="store.isDrafting ? 'animate-spin' : ''"
+                      />
+                      {{ store.isDrafting ? "Drafting..." : "AI Draft" }}
+                    </button>
+                  </UTooltip>
+                </div>
+
+                <!-- Professional Hint -->
+                <div
+                  class="mt-2 ml-1 flex items-center gap-2 transition-opacity duration-300"
+                  :class="
+                    description.length > 0
+                      ? 'opacity-40 hover:opacity-100'
+                      : 'opacity-100'
+                  "
+                >
+                  <UIcon
+                    name="i-lucide-lightbulb"
+                    class="w-4 h-4 text-green-500"
+                  />
+                  <span class="text-xs text-slate-500 font-medium italic">
+                    Tip: A good description includes an objective, the target
+                    audience, and 3-5 key points to cover.
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Settings Row -->
+            <div
+              id="lesson-settings-block"
+              class="grid grid-cols-1 sm:grid-cols-3 gap-6"
+            >
+              <!-- Model -->
+              <div id="model-selector-group">
+                <label
+                  class="flex items-center text-xs font-semibold text-slate-500 uppercase tracking-widest mb-1.5 ml-1"
+                >
+                  AI Model
+                  <UTooltip
+                    text="Choice of AI model affects explanation depth and visual logic."
+                    :popper="{ placement: 'top' }"
+                  >
+                    <UIcon
+                      name="i-lucide-info"
+                      class="w-3.5 h-3.5 ml-1 text-slate-400 cursor-help transition-colors hover:text-green-500"
+                    />
+                  </UTooltip>
+                </label>
+                <USelectMenu
+                  v-model="model"
+                  id="ai-model-selector"
+                  :items="store.filteredModels"
+                  label-key="title"
+                  value-key="value"
+                  class="premium-input rounded-xl w-full"
+                  :popper="{ placement: 'bottom-start' }"
+                  variant="none"
+                  :ui="{
+                    item: 'px-3 py-2 rounded-xl text-slate-700 data-highlighted:bg-green-50 data-highlighted:text-green-700 transition-colors',
+                  }"
+                >
+                  <template #leading>
+                    <UIcon name="i-lucide-cpu" class="w-4 h-4 text-slate-400" />
+                  </template>
+                </USelectMenu>
+              </div>
+
+              <!-- Voice & Accent -->
+              <div id="voice-selector-group">
+                <label
+                  class="flex items-center text-xs font-semibold text-slate-500 uppercase tracking-widest mb-1.5 ml-1"
+                >
+                  Voice &amp; Accent
+                  <UTooltip
+                    text="Select a narrator voice. You can preview each voice to hear it before generating."
+                    :popper="{ placement: 'top' }"
+                  >
+                    <UIcon
+                      name="i-lucide-info"
+                      class="w-3.5 h-3.5 ml-1 text-slate-400 cursor-help transition-colors hover:text-green-500"
+                    />
+                  </UTooltip>
+                </label>
+                <USelectMenu
+                  id="voice-selector"
+                  v-model="voice"
+                  :items="voices"
+                  label-key="name"
+                  value-key="id"
+                  class="premium-input rounded-xl w-full"
+                  placeholder="Select voice"
+                  variant="none"
+                  :ui="{
+                    item: 'px-3 py-2.5 rounded-xl text-slate-700 data-highlighted:bg-green-50 data-highlighted:text-green-700 transition-all duration-200',
+                  }"
+                >
+                  <template #leading>
+                    <UIcon name="i-lucide-mic" class="w-4 h-4 text-slate-400" />
+                  </template>
+                  <template #item="{ item }">
+                    <div class="flex flex-col w-full gap-2.5 py-1">
+                      <!-- Name, Gender & Grade -->
+                      <div class="flex items-center justify-between gap-2">
+                        <div class="flex items-center gap-1.5 min-w-0">
+                          <UIcon
+                            v-if="item.gender"
+                            :name="
+                              item.gender.toLowerCase() === 'female'
+                                ? 'i-lucide-venus'
+                                : 'i-lucide-mars'
+                            "
+                            class="w-3.5 h-3.5 shrink-0"
+                            :class="
+                              item.gender.toLowerCase() === 'female'
+                                ? 'text-pink-400'
+                                : 'text-blue-400'
+                            "
+                          />
+                          <span
+                            class="truncate font-bold text-slate-900 leading-tight text-sm"
+                            >{{ item.name }}</span
+                          >
+                        </div>
+                        <button
+                          type="button"
+                          @click.stop="togglePreview(item.id)"
+                          :disabled="previewLoading === item.id"
+                          class="shrink-0 flex items-center justify-center p-1.5 rounded-lg transition-all cursor-pointer border shadow-sm group/prev"
+                          :class="[
+                            previewPlaying === item.id
+                              ? 'bg-red-50 text-red-600 border-red-200'
+                              : 'bg-slate-50 text-slate-500 border-slate-200 hover:bg-green-50 hover:text-green-600 hover:border-green-200',
+                          ]"
+                          :title="
+                            previewPlaying === item.id
+                              ? 'Stop Preview'
+                              : 'Play Preview'
+                          "
+                        >
+                          <UIcon
+                            :name="
+                              previewLoading === item.id
+                                ? 'i-lucide-loader-2'
+                                : previewPlaying === item.id
+                                  ? 'i-lucide-circle-stop'
+                                  : 'i-lucide-play-circle'
+                            "
+                            class="w-4 h-4"
+                            :class="{
+                              'animate-spin': previewLoading === item.id,
+                              'group-hover/prev:scale-110 transition-transform':
+                                !previewLoading,
+                            }"
+                          />
+                        </button>
+                      </div>
+
+                      <!-- Metadata: Language -->
+                      <div
+                        class="flex flex-col gap-1 text-[10px] text-slate-400 font-bold uppercase tracking-wider"
+                      >
+                        <div v-if="item.language" class="truncate opacity-80">
+                          {{ item.language }}
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </USelectMenu>
+              </div>
+
+              <!-- Target Duration -->
+              <div id="duration-selector-group">
+                <label
+                  class="flex items-center text-xs font-semibold text-slate-500 uppercase tracking-widest mb-1.5 ml-1"
+                >
+                  Target Duration
+                  <UTooltip
+                    text="Sets the target length of the video lesson. Longer durations allow for deeper step-by-step explanations."
+                    :popper="{ placement: 'top' }"
+                  >
+                    <UIcon
+                      name="i-lucide-info"
+                      class="w-3.5 h-3.5 ml-1 text-slate-400 cursor-help transition-colors hover:text-green-500"
+                    />
+                  </UTooltip>
+                </label>
+                <USelectMenu
+                  id="duration-selector"
+                  v-model="store.targetDuration"
+                  :items="[
+                    '1-2 minutes',
+                    '2-3 minutes',
+                    '3-5 minutes',
+                    '5-10 minutes',
+                    '10-15 minutes',
+                  ]"
+                  :searchInput="false"
+                  class="premium-input rounded-xl w-full"
+                  placeholder="Select Duration"
+                  variant="none"
+                  :ui="{
+                    item: 'px-3 py-2 rounded-xl text-slate-700 data-highlighted:bg-green-50 data-highlighted:text-green-700 transition-colors',
+                  }"
+                >
+                  <template #leading>
+                    <UIcon
+                      name="i-lucide-timer"
+                      class="w-4 h-4 text-slate-400"
+                    />
+                  </template>
+                </USelectMenu>
+              </div>
+            </div>
+
+            <!-- Visual Feedback Loop Toggle -->
+            <!-- <div
+              id="visual-fix-group"
+              class="flex items-center justify-between p-3.5 bg-slate-50/50 rounded-2xl border border-slate-100 mt-2 hover:bg-slate-50 transition-colors group/fix"
+            >
+              <div class="flex items-center gap-3">
+                <div
+                  class="w-10 h-10 rounded-xl bg-white shadow-sm flex items-center justify-center border border-slate-100 group-hover/fix:border-green-100 transition-colors"
+                >
+                  <UIcon name="i-lucide-eye" class="w-5 h-5 text-green-500" />
+                </div>
+                <div>
+                  <div class="flex items-center gap-1.5">
+                    <span class="text-sm font-bold text-slate-700"
+                      >Auto Visual Fix</span
+                    >
+                    <UTooltip
+                      text="Enables iterative code fixing based on visual feedback. Improves scene quality by detecting overlaps and positioning errors."
+                      :popper="{ placement: 'top' }"
+                    >
+                      <UIcon
+                        name="i-lucide-info"
+                        class="w-3.5 h-3.5 text-slate-400 cursor-help hover:text-green-500 transition-colors"
+                      />
+                    </UTooltip>
+                  </div>
+                  <span class="text-xs text-slate-400 font-medium"
+                    >Iteratively refines scene visuals through
+                    self-reflection</span
+                  >
+                </div>
+              </div>
+              <USwitch
+                v-model="store.useVisualFixCode"
+                color="primary"
+                @update:model-value="store._persistConfig()"
+                class="scale-110"
+              />
+            </div> -->
+
+            <!-- Action Button -->
+            <button
+              id="generate-btn"
+              @click="handleGenerate"
+              :disabled="
+                !description.trim() ||
+                store.isGenerating ||
+                store.loadingModels ||
+                store.loadingVoices
+              "
+              class="w-full btn-premium rounded-2xl py-4 flex items-center justify-center gap-2 text-white font-bold text-lg disabled:opacity-50 disabled:cursor-not-allowed group mt-6 cursor-pointer"
+            >
+              <UIcon
+                :name="
+                  store.isGenerating ? 'i-lucide-loader-2' : 'i-lucide-sparkles'
+                "
+                class="w-5 h-5"
+                :class="{ 'animate-spin-slow': store.isGenerating }"
+              />
+              {{ store.isGenerating ? "Processing..." : "Generate Video" }}
+            </button>
+
+            <!-- Disclaimer -->
+            <p
+              class="text-center text-[10px] text-slate-400/80 mt-4 font-medium leading-relaxed"
+            >
+              AlgoVision uses AI to generate content and can make mistakes.
+              <br />
+              Please verify important information.
+            </p>
+          </div>
+        </div>
+
+        <!-- Missing API Keys Warning -->
+        <ClientOnly>
+          <div
+            v-if="!hasApiKeys"
+            class="mt-4 p-4 rounded-2xl bg-orange-50/50 border border-orange-200 flex items-start gap-3 backdrop-blur-sm animate-fade-in-up"
+          >
+            <UIcon
+              name="i-lucide-alert-circle"
+              class="w-5 h-5 text-orange-500 shrink-0 mt-0.5"
+            />
+            <div class="text-sm text-orange-800">
+              <span class="font-semibold block mb-0.5"
+                >One quick step before you generate</span
+              >
+              AlgoVision needs an AI provider to create your video. It only
+              takes a minute to connect one —
+              <NuxtLink
+                to="/ai-providers"
+                class="underline font-semibold hover:text-orange-600"
+                >set it up here</NuxtLink
+              >.
+            </div>
+          </div>
+        </ClientOnly>
+      </div>
+    </div>
+
+    <AiAssistDialog v-model="showAiDialog" :initialTopic="projectName" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
+import { useProjectStore } from "~/stores/projects";
+import { useRouter } from "vue-router";
+import AiAssistDialog from "~/components/AiAssistDialog.vue";
+import GenerationWidget from "~/components/GenerationWidget.vue";
+
+const store = useProjectStore();
+const router = useRouter();
+
+definePageMeta({
+  layout: "workspace",
+});
+
+const showAiDialog = ref(false);
+
+// Form State
+const projectName = computed({
+  get: () => store.draftProjectName,
+  set: (val) => (store.draftProjectName = val),
+});
+
+const description = computed({
+  get: () => store.draftTopic,
+  set: (val) => (store.draftTopic = val),
+});
+
+const isFocused = ref(false);
+
+const voice = computed({
+  get: () => store.selectedVoice,
+  set: (val) => (store.selectedVoice = val),
+});
+
+const model = computed({
+  get: () => store.planningModel,
+  set: (val) => {
+    store.planningModel = val;
+    store.codingModel = val;
+  },
+});
+
+const voices = computed(() => {
+  const list = [...store.availableVoices];
+  const hasHeart = list.some((v) => v.id === "af_heart");
+  // Inject a placeholder "Heart" item if af_heart is selected but not yet in the list (e.g. before loading)
+  if (!hasHeart && store.selectedVoice === "af_heart") {
+    list.unshift({
+      id: "af_heart",
+      name: "Heart",
+      gender: "female",
+      language: "English (US)",
+    });
+  }
+  return list;
+});
+
+const hasApiKeys = computed(() => {
+  return !!(
+    store.apiKeys.openai ||
+    store.apiKeys.anthropic ||
+    store.apiKeys.gemini
+  );
+});
+
+async function handleGenerate() {
+  if (!description.value.trim()) return;
+
+  if (!hasApiKeys.value) {
+    router.push("/ai-providers");
+    return;
+  }
+
+  // Update store config
+  store.planningModel = model.value;
+  store.codingModel = model.value;
+  store.selectedVoice = voice.value;
+
+  const result = await store.generatePlanOnly(
+    projectName.value,
+    description.value,
+  );
+  if (result?.project_id) {
+    router.push(`/project/${result.project_id}`);
+  }
+}
+
+import api from "~/utils/api";
+
+// ── Voice preview ──────────────────────────────────────────────────────────
+const previewLoading = ref<string | null>(null);
+const previewPlaying = ref<string | null>(null);
+let previewAudio: HTMLAudioElement | null = null;
+let previewBlobUrl: string | null = null;
+
+async function togglePreview(voiceId: string) {
+  // Stop any current audio first
+  if (previewAudio) {
+    previewAudio.pause();
+    previewAudio = null;
+  }
+  if (previewBlobUrl) {
+    URL.revokeObjectURL(previewBlobUrl);
+    previewBlobUrl = null;
+  }
+
+  // Toggle off if same voice was playing
+  if (previewPlaying.value === voiceId) {
+    previewPlaying.value = null;
+    return;
+  }
+
+  previewLoading.value = voiceId;
+  previewPlaying.value = null;
+
+  try {
+    const url = await api.previewVoice(voiceId);
+    previewBlobUrl = url;
+    const el = new Audio(url);
+    previewAudio = el;
+    previewPlaying.value = voiceId;
+
+    el.addEventListener("ended", () => {
+      previewPlaying.value = null;
+      if (previewBlobUrl) {
+        URL.revokeObjectURL(previewBlobUrl);
+        previewBlobUrl = null;
+      }
+    });
+
+    el.play();
+  } catch (e) {
+    console.error("Voice preview failed:", e);
+    previewPlaying.value = null;
+  } finally {
+    previewLoading.value = null;
+  }
+}
+
+onUnmounted(() => {
+  previewAudio?.pause();
+  if (previewBlobUrl) URL.revokeObjectURL(previewBlobUrl);
+});
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.02);
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.animate-scan {
+  animation: scan 2s linear infinite;
+}
+
+@keyframes pulse-slow {
+  0%,
+  100% {
+    opacity: 0.1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(1.5);
+  }
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 8s ease-in-out infinite;
+}
+
+/* Stage Transitions */
+.stage-fade-enter-active,
+.stage-fade-leave-active {
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.stage-fade-enter-from,
+.stage-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.stage-slide-enter-active,
+.stage-slide-leave-active {
+  transition: all 0.8s cubic-bezier(0.2, 1, 0.2, 1);
+}
+.stage-slide-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+.stage-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+@keyframes pulse-subtle {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.1);
+  }
+  50% {
+    transform: scale(1.02);
+    box-shadow: 0 4px 20px rgba(22, 163, 74, 0.2);
+  }
+}
+
+.animate-pulse-subtle {
+  animation: pulse-subtle 3s ease-in-out infinite;
+}
+</style>

frontend/app/pages/project/[id].vue

@@ -0,0 +1,382 @@
+<template>
+  <div
+    class="w-full flex-1 flex flex-col mt-4 px-4 sm:px-6 lg:px-8 gap-6 -mb-8"
+  >
+    <!-- TOP ROW: Video & AI Tutor -->
+    <!-- CSS Grid: left column determines row height; right cell (overflow-hidden) stretches to match -->
+    <div
+      class="flex flex-col gap-6"
+      :class="{
+        'md:grid md:grid-cols-[1fr_300px] lg:grid-cols-[1fr_380px] xl:grid-cols-[1fr_460px]':
+          project?.status !== 'awaiting_approval'
+      }"
+    >
+      <!-- LEFT: Theater & Overview -->
+      <div class="flex flex-col gap-6 w-full min-w-0 min-h-0">
+        <!-- Back button & Title -->
+        <div
+          class="flex items-center gap-4 sticky top-4 premium-glass py-4 px-6 z-20 animate-fade-in-down rounded-3xl shadow-lg border border-white/20 mb-8"
+        >
+          <UButton
+            to="/projects"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-arrow-left"
+            class="rounded-2xl w-11 h-11 flex items-center justify-center bg-white/80 shadow-md hover:shadow-lg transition-all border border-white/40"
+          />
+          <h1
+            class="text-xl sm:text-2xl md:text-3xl font-black text-slate-900 leading-tight tracking-tight"
+          >
+            {{ project?.name || "Loading Project..." }}
+          </h1>
+        </div>
+
+        <div
+          v-if="loading"
+          class="w-full aspect-video bg-slate-200/50 rounded-3xl animate-pulse"
+        />
+
+        <!-- Main Video Theater -->
+        <div
+          v-else-if="project && project.video_url"
+          id="video-theater"
+          class="premium-glass rounded-3xl overflow-hidden shadow-2xl relative z-10"
+        >
+          <ClientOnly>
+            <PlyrVideoPlayer
+              :key="playerMediaKey"
+              :video-url="project.video_url || undefined"
+              :subtitles-url="subtitlesUrl || undefined"
+              :scenes="project.scenes"
+            />
+            <template #fallback>
+              <div
+                class="w-full aspect-video bg-slate-900 flex items-center justify-center text-white"
+              >
+                <UIcon
+                  name="i-lucide-loader-2"
+                  class="w-8 h-8 text-green-500 animate-spin"
+                />
+              </div>
+            </template>
+          </ClientOnly>
+        </div>
+
+        <!-- Topic Overview -->
+        <div
+          v-if="project && project.overview && project.status === 'completed'"
+          class="premium-glass rounded-3xl p-5 sm:p-8 md:p-10 animate-fade-in-up relative overflow-hidden group"
+        >
+          <div
+            class="absolute top-0 left-0 w-1.5 h-full bg-green-500/20 group-hover:bg-green-500/40 transition-colors"
+          />
+          <div class="flex flex-wrap items-center gap-3 mb-5">
+            <div
+              class="w-10 h-10 rounded-2xl bg-green-50/50 flex items-center justify-center border border-green-100/50 shadow-sm shrink-0"
+            >
+              <UIcon
+                name="i-lucide-info"
+                class="w-5 h-5 text-green-600"
+              />
+            </div>
+            <div>
+              <span
+                class="text-[10px] font-black uppercase tracking-[0.2em] text-green-500/70 block mb-0.5"
+              >Project Intelligence</span>
+              <h3 class="text-lg font-black text-slate-900">
+                Topic Overview
+              </h3>
+            </div>
+          </div>
+          <p
+            class="text-[15px] text-slate-700 leading-relaxed whitespace-pre-wrap font-medium"
+          >
+            {{ project.overview }}
+          </p>
+        </div>
+
+        <!-- Plan Approval State -->
+        <div
+          v-if="project && project.status === 'awaiting_approval'"
+          class="w-full"
+        >
+          <PlanReviewPanel :project="project" />
+        </div>
+
+        <!-- Processing/Error States -->
+        <div
+          v-else-if="
+            project
+              && project.status !== 'completed'
+              && project.status !== 'awaiting_approval'
+          "
+          class="premium-glass rounded-3xl p-12 text-center flex flex-col items-center"
+        >
+          <div
+            class="w-16 h-16 rounded-full flex items-center justify-center mb-6"
+            :class="
+              project.status === 'error'
+                ? 'bg-red-100 text-red-600'
+                : 'bg-green-100 text-green-600'
+            "
+          >
+            <UIcon
+              :name="
+                project.status === 'error'
+                  ? 'i-lucide-alert-triangle'
+                  : 'i-lucide-loader-2'
+              "
+              class="w-8 h-8"
+              :class="{ 'animate-spin': project.status !== 'error' }"
+            />
+          </div>
+          <h2 class="text-xl font-bold text-slate-900 mb-2">
+            {{
+              project.status === "error"
+                ? "Generation Failed"
+                : "Generation in Progress"
+            }}
+          </h2>
+          <p class="text-slate-500 mb-6 max-w-md mx-auto">
+            {{
+              project.status === "error"
+                ? project.error_details || "An unknown error occurred."
+                : "This project is currently rendering. You can view progress in the Projects."
+            }}
+          </p>
+          <div class="flex items-center gap-3">
+            <UButton
+              v-if="canContinueStatus(project.status)"
+              :loading="isContinuing"
+              class="btn-premium rounded-xl px-6 py-2"
+              @click="handleContinue"
+            >
+              {{
+                project.status === "error"
+                  ? "Retry Generation"
+                  : "Continue Generation"
+              }}
+            </UButton>
+            <UButton
+              to="/projects"
+              variant="ghost"
+              color="neutral"
+              class="rounded-xl px-6 py-2"
+            >
+              Return to Projects
+            </UButton>
+          </div>
+        </div>
+
+        <!-- Mobile-only: AI Tutor & Quiz (hidden during planning) -->
+        <div
+          v-if="project && project.status !== 'awaiting_approval'"
+          class="block md:hidden mt-6 pb-6 min-h-[600px]"
+        >
+          <InteractivePanel :project="project" />
+        </div>
+      </div>
+
+      <!-- RIGHT: AI Interactive Panel (hidden during planning) -->
+      <div
+        v-if="project && project.status !== 'awaiting_approval'"
+        id="ai-panel-container"
+        class="hidden md:block overflow-hidden h-0 min-h-full"
+      >
+        <InteractivePanel
+          :project="project"
+          class="h-full max-h-full animate-fade-in-up animation-delay-200"
+        />
+      </div>
+    </div>
+
+    <!-- BOTTOM ROW: Technical Breakdown (Only if not awaiting approval) -->
+    <div
+      v-if="project && project.scenes && project.status !== 'awaiting_approval' && project.status !== 'completed'"
+      id="scene-breakdown"
+      class="premium-glass rounded-3xl p-8 sm:p-10 animate-fade-in-up mb-12 mt-4"
+    >
+      <h3 class="text-lg font-bold text-slate-900 flex items-center gap-2 mb-6">
+        <UIcon
+          name="i-lucide-layout-list"
+          class="w-5 h-5 text-green-600"
+        />
+        Scenes Breakdown
+      </h3>
+      <div class="max-h-[68vh] overflow-y-auto pr-1 custom-scrollbar">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div
+            v-for="(scene, idx) in project.scenes"
+            :key="scene.id || idx"
+            class="flex gap-4"
+          >
+            <div
+              class="w-8 h-8 rounded-lg bg-green-50 text-green-700 font-mono text-sm font-bold flex items-center justify-center shrink-0 border border-green-200"
+            >
+              {{ Number(idx) + 1 }}
+            </div>
+            <div class="flex-1">
+              <h4 class="font-bold text-slate-800 mb-1">
+                {{ scene.title || `Scene ${Number(idx) + 1}` }}
+              </h4>
+              <div class="space-y-4">
+                <!-- High-Level Content -->
+                <div
+                  v-if="scene.purpose"
+                  class="bg-blue-50/50 p-3 rounded-lg border border-blue-100"
+                >
+                  <h5
+                    class="text-[10px] font-bold uppercase tracking-wider text-blue-500 mb-1 flex items-center gap-1"
+                  >
+                    <UIcon
+                      name="i-lucide-target"
+                      class="w-3 h-3"
+                    />
+                    Scene Purpose
+                  </h5>
+                  <p class="text-sm text-slate-700 italic">
+                    {{ scene.purpose }}
+                  </p>
+                </div>
+
+                <div v-if="scene.description">
+                  <h5
+                    class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1"
+                  >
+                    Visual Concept
+                  </h5>
+                  <p class="text-sm text-slate-800 leading-relaxed">
+                    {{ scene.description }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useProjectStore } from '~/stores/projects'
+import { config as apiConfig } from '~/utils/api'
+
+const route = useRoute()
+const router = useRouter()
+const store = useProjectStore()
+const toast = useToast()
+
+const project = computed(() => store.getProjectById(route.params.id as string))
+const loading = ref(true)
+const localError = ref<string | null>(null)
+const isContinuing = ref(false)
+
+onMounted(async () => {
+  const id = route.params.id
+  if (!id) {
+    router.push('/projects')
+    return
+  }
+
+  try {
+    await store.fetchProject(id as string)
+    if (!project.value) {
+      router.push('/projects')
+    }
+  } catch (e: any) {
+    console.error(e)
+    localError.value = e.message || 'Failed to load project'
+  } finally {
+    loading.value = false
+  }
+})
+
+// Handle continue generation
+async function handleContinue() {
+  if (!project.value) return
+  isContinuing.value = true
+  try {
+    await store.continueGeneration(project.value.id)
+    // Refresh project data after starting generation
+    await store.fetchProject(project.value.id)
+
+    toast.add({
+      title: 'Generation Started',
+      description: 'Continuing generation from where it left off',
+      icon: 'i-lucide-play-circle',
+      color: 'success'
+    })
+  } catch (error: any) {
+    console.error('Failed to continue generation:', error)
+    localError.value = 'Failed to continue generation. Please try again.'
+    toast.add({
+      title: 'Failed to Continue',
+      description:
+        error.message || 'An error occurred while continuing generation',
+      icon: 'i-lucide-alert-circle',
+      color: 'error'
+    })
+  } finally {
+    isContinuing.value = false
+  }
+}
+
+// Only allow continue for specific statuses (not while actively generating)
+function canContinueStatus(status: string) {
+  return (
+    status === 'error'
+    || status === 'planned'
+    || status === 'stopped'
+    || status === 'cancelled'
+  )
+}
+
+// Derive the VTT subtitle URL from the files[] array on the project
+// The API returns a files list like ["topic/topic_combined.vtt", ...]
+const subtitlesUrl = computed(() => {
+  const videoUrl = project.value?.video_url
+  if (!videoUrl) return null
+
+  // Prefer explicit .vtt file from backend listing when available.
+  const vttFile = project.value?.files?.find((f: string) => f.endsWith('.vtt'))
+  if (vttFile) {
+    const basePath = videoUrl.substring(
+      0,
+      videoUrl.lastIndexOf('/') + 1
+    )
+    return `${apiConfig.API_BASE_URL}${basePath}${vttFile.split('/').pop()}`
+  }
+
+  // Fallback: derive VTT from combined MP4 path when files[] is stale/late.
+  if (videoUrl.endsWith('.mp4')) {
+    return `${apiConfig.API_BASE_URL}${videoUrl.replace(/\.mp4$/i, '.vtt')}`
+  }
+
+  return null
+})
+
+const playerMediaKey = computed(() => {
+  const video = project.value?.video_url || ''
+  const subs = subtitlesUrl.value || ''
+  return `${video}|${subs}`
+})
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(100, 116, 139, 0.2);
+  border-radius: 3px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.4);
+}
+</style>

frontend/app/pages/projects.vue

@@ -0,0 +1,620 @@
+<template>
+  <div
+    id="projects-root"
+    class="relative w-full overflow-hidden flex flex-col pt-8 pb-20"
+  >
+    <!-- Header Area -->
+    <div class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-8">
+      <div
+        id="projects-header"
+        class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8 animate-fade-in-up"
+      >
+        <div>
+          <h1
+            class="text-3xl font-extrabold text-slate-900 tracking-tight flex items-center gap-3"
+          >
+            Projects
+            <span
+              class="text-sm font-medium bg-green-100 text-green-700 px-2.5 py-0.5 rounded-full"
+            >
+              {{ sortedAndFilteredProjects.length }}
+            </span>
+          </h1>
+          <p class="text-slate-500 mt-1">
+            Manage and review your generated video lessons.
+          </p>
+        </div>
+
+        <div class="flex items-center gap-3">
+          <!-- New → split button -->
+          <UDropdownMenu
+            :items="[
+              [
+                { label: 'New Project', icon: 'i-lucide-plus', to: '/' },
+                {
+                  label: 'New Group',
+                  icon: 'i-lucide-folder-plus',
+                  onSelect: createGroup,
+                },
+              ],
+            ]"
+          >
+            <UButton class="btn-premium rounded-xl px-4 py-2 font-medium">
+              <UIcon name="i-lucide-plus" class="w-4 h-4 mr-1.5" />
+              New
+              <UIcon
+                name="i-lucide-chevron-down"
+                class="w-3.5 h-3.5 ml-1.5 opacity-70"
+              />
+            </UButton>
+          </UDropdownMenu>
+        </div>
+      </div>
+
+      <!-- Toolbar -->
+      <div
+        id="projects-toolbar"
+        class="mt-8 flex flex-col sm:flex-row gap-4 animate-fade-in-up animation-delay-200"
+      >
+        <!-- Search -->
+        <div id="project-search-bar" class="relative flex-1 max-w-sm">
+          <UIcon
+            name="i-lucide-search"
+            class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"
+          />
+          <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="Search projects..."
+            class="w-full premium-input rounded-xl pl-10 pr-4 py-2.5 text-sm outline-none"
+          />
+        </div>
+
+        <!-- Filters -->
+        <div
+          id="project-filters"
+          class="flex items-center gap-2 overflow-x-auto pb-2 sm:pb-0 hide-scrollbar"
+        >
+          <button
+            v-for="filter in ['all', 'completed', 'in_progress', 'error']"
+            :key="filter"
+            @click="activeFilter = filter"
+            class="whitespace-nowrap px-4 py-2 rounded-xl text-sm font-medium transition-all"
+            :class="
+              activeFilter === filter
+                ? 'bg-slate-900 text-white shadow-md'
+                : 'bg-white/50 text-slate-600 hover:bg-white border border-white/60 shadow-sm'
+            "
+          >
+            {{
+              filter.charAt(0).toUpperCase() + filter.slice(1).replace("_", " ")
+            }}
+          </button>
+        </div>
+
+        <div class="flex-1" />
+
+        <!-- Sort -->
+        <div
+          id="project-sort-group"
+          class="flex items-center gap-2 shrink-0 text-sm"
+        >
+          <USelectMenu
+            v-model="sortBy"
+            :items="sortOptions"
+            :searchInput="false"
+            label-key="label"
+            class="premium-input rounded-xl min-w-[150px]"
+            variant="none"
+          >
+            <template #leading>
+              <UIcon
+                name="i-lucide-arrow-up-down"
+                class="w-4 h-4 text-slate-400"
+              />
+            </template>
+          </USelectMenu>
+        </div>
+      </div>
+    </div>
+
+    <!-- Content Area -->
+    <div
+      class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 min-h-[400px] space-y-6"
+    >
+      <!-- Loading -->
+      <div
+        v-if="store.loading"
+        class="absolute inset-0 flex items-center justify-center bg-white/30 backdrop-blur-sm z-20 rounded-3xl"
+      >
+        <UIcon
+          name="i-lucide-loader-2"
+          class="w-8 h-8 text-green-500 animate-spin"
+        />
+      </div>
+
+      <!-- Empty -->
+      <div
+        v-else-if="sortedAndFilteredProjects.length === 0"
+        class="premium-glass rounded-3xl p-12 text-center flex flex-col items-center justify-center animate-scale-in"
+      >
+        <div
+          class="w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center mb-4"
+        >
+          <UIcon name="i-lucide-folder-search" class="w-8 h-8 text-slate-400" />
+        </div>
+        <h3 class="text-lg font-bold text-slate-900 mb-2">No projects found</h3>
+        <p class="text-slate-500 max-w-sm mb-6">
+          {{
+            searchQuery
+              ? `No results matching "${searchQuery}"`
+              : "You haven't generated any videos yet."
+          }}
+        </p>
+        <UButton
+          v-if="!searchQuery"
+          to="/"
+          class="btn-premium rounded-xl px-6 py-2.5 font-semibold"
+        >
+          Start Generating
+        </UButton>
+        <UButton
+          v-else
+          @click="searchQuery = ''"
+          variant="ghost"
+          color="neutral"
+          class="rounded-xl"
+        >
+          Clear search
+        </UButton>
+      </div>
+
+      <!-- ── GRID VIEW ── -->
+      <div>
+        <!-- Groups -->
+        <ProjectGroupCard
+          v-for="(group, idx) in groupStore.groups"
+          :key="group.id"
+          :group="group"
+          :projects="projectsForGroup(group.id)"
+          :durations="videoDurations"
+          :style="`animation-delay: ${idx * 60}ms`"
+          class="group-slide-in"
+          @toggle-collapse="groupStore.toggleCollapse($event)"
+          @rename="(gId, n) => groupStore.renameGroup(gId, n)"
+          @delete="onDeleteGroup"
+          @drop="onDropToGroup"
+          @delete-project="openDeleteModal"
+          @continue-project="openContinueModal"
+          @project-dragstart="activeDragId = $event"
+          @project-dragend="activeDragId = null"
+        />
+
+        <!-- Ungrouped section -->
+        <div
+          v-if="ungroupedFiltered.length > 0 || groupStore.groups.length > 0"
+          class="relative"
+          @dragover.prevent="onDragOverUngrouped"
+          @dragleave="onDragLeaveUngrouped"
+          @drop.prevent="onDropToUngrouped"
+        >
+          <!-- Section header only when groups exist -->
+          <div
+            v-if="groupStore.groups.length > 0"
+            class="flex items-center gap-3 mb-4"
+          >
+            <span
+              class="text-xs font-semibold text-slate-400 uppercase tracking-wider"
+              >Ungrouped</span
+            >
+            <div class="flex-1 h-px bg-slate-200/60" />
+            <span class="text-xs text-slate-400">{{
+              ungroupedFiltered.length
+            }}</span>
+          </div>
+
+          <!-- Ungrouped drop zone (only when dragging) -->
+          <div
+            v-if="activeDragId && groupStore.groups.length > 0"
+            class="mb-4 rounded-xl border-2 border-dashed py-4 px-6 flex items-center gap-2 text-sm transition-colors"
+            :class="
+              isOverUngrouped
+                ? 'border-green-400 bg-green-50/40 text-green-600'
+                : 'border-slate-200 text-slate-400'
+            "
+          >
+            <UIcon
+              :name="
+                isOverUngrouped ? 'i-lucide-package-minus' : 'i-lucide-package'
+              "
+              class="w-4 h-4"
+            />
+            Drop here to ungroup
+          </div>
+
+          <div
+            v-if="ungroupedFiltered.length"
+            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
+            :class="
+              isOverUngrouped
+                ? 'ring-2 ring-green-400 ring-offset-2 rounded-xl p-2'
+                : ''
+            "
+          >
+            <ProjectCard
+              v-for="(project, index) in ungroupedFiltered"
+              :key="project.id"
+              :project="project"
+              :duration="videoDurations[project.id]"
+              :style="`animation-delay: ${index * 50}ms`"
+              class="animate-fade-in-up"
+              @delete="openDeleteModal"
+              @continue="openContinueModal"
+              @dragstart="activeDragId = $event"
+              @dragend="activeDragId = null"
+            />
+          </div>
+
+          <!-- No ungrouped but page has groups -->
+          <div
+            v-else-if="groupStore.groups.length > 0"
+            class="rounded-xl border-2 border-dashed border-slate-100 py-6 flex items-center justify-center text-slate-300 text-sm gap-2"
+          >
+            <UIcon name="i-lucide-package-check" class="w-4 h-4" />
+            All projects are organized in groups
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Delete Project Modal -->
+    <UModal
+      v-model:open="deleteModalOpen"
+      title="Delete Project?"
+      :ui="{ footer: 'justify-end' }"
+    >
+      <template #content>
+        <div class="p-6">
+          <div class="flex items-start gap-4 mb-6">
+            <div
+              class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center shrink-0"
+            >
+              <UIcon
+                name="i-lucide-alert-triangle"
+                class="w-5 h-5 text-red-600"
+              />
+            </div>
+            <div>
+              <h3 class="text-lg font-bold text-slate-900 mb-1">
+                Delete Project?
+              </h3>
+              <p class="text-sm text-slate-500">
+                Are you sure you want to delete
+                <span class="font-semibold text-slate-700"
+                  >"{{ projectToDelete?.name || "Untitled" }}"</span
+                >? This action cannot be undone and will remove all associated
+                assets.
+              </p>
+            </div>
+          </div>
+          <div class="flex items-center justify-end gap-3">
+            <UButton
+              @click="deleteModalOpen = false"
+              variant="ghost"
+              color="neutral"
+              class="rounded-xl px-4 font-semibold"
+              >Cancel</UButton
+            >
+            <UButton
+              @click="confirmDelete"
+              color="error"
+              class="rounded-xl px-6 font-semibold shadow-md inline-flex items-center"
+              :loading="isDeleting"
+            >
+              Yes, delete project
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Continue Project Modal -->
+    <UModal
+      v-model:open="continueModalOpen"
+      title="Continue Generation?"
+      :ui="{ footer: 'justify-end' }"
+    >
+      <template #content>
+        <div class="p-6">
+          <div class="flex items-start gap-4 mb-6">
+            <div
+              class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center shrink-0"
+            >
+              <UIcon
+                name="i-lucide-play-circle"
+                class="w-5 h-5 text-green-600"
+              />
+            </div>
+            <div>
+              <h3 class="text-lg font-bold text-slate-900 mb-1">
+                Continue Generation?
+              </h3>
+              <p class="text-sm text-slate-500">
+                Resume generation for
+                <span class="font-semibold text-slate-700"
+                  >"{{ projectToContinue?.name || "Untitled" }}"</span
+                >? The AI will continue from where it left off.
+              </p>
+            </div>
+          </div>
+          <div class="flex items-center justify-end gap-3">
+            <UButton
+              @click="continueModalOpen = false"
+              variant="ghost"
+              color="neutral"
+              class="rounded-xl px-4 font-semibold"
+              >Cancel</UButton
+            >
+            <UButton
+              @click="confirmContinue"
+              color="success"
+              class="rounded-xl px-6 font-semibold shadow-md inline-flex items-center"
+              :loading="isContinuing"
+            >
+              Continue Generation
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from "vue";
+import { useProjectStore } from "~/stores/projects";
+import { useProjectGroupStore } from "~/stores/groups";
+import { config as apiConfig } from "~/utils/api";
+
+const store = useProjectStore();
+const groupStore = useProjectGroupStore();
+const toast = useToast();
+
+// ── View state ──
+const searchQuery = ref("");
+const activeFilter = ref("all");
+const sortOptions = [
+  { label: "Newest first", value: "newest" },
+  { label: "Oldest first", value: "oldest" },
+  { label: "Name (A → Z)", value: "name" },
+];
+const sortBy = ref(sortOptions[0]);
+
+// ── Delete modal ──
+const deleteModalOpen = ref(false);
+const projectToDelete = ref<any>(null);
+const isDeleting = ref(false);
+
+// ── Continue modal ──
+const continueModalOpen = ref(false);
+const projectToContinue = ref<any>(null);
+const isContinuing = ref(false);
+
+// ── Drag state ──
+const activeDragId = ref<string | null>(null);
+const isOverUngrouped = ref(false);
+
+// ── Video durations ──
+const videoDurations = ref<Record<string, string>>({});
+
+onMounted(() => {
+  groupStore.init();
+  store.fetchProjects();
+});
+
+// Prune deleted projects from groups after fetch
+watch(
+  () => store.projects,
+  (projects) => {
+    groupStore.pruneDeletedProjects(projects.map((p: any) => p.id));
+  },
+  { deep: true },
+);
+
+// ── Computed: filtered+sorted project list ──
+const sortedAndFilteredProjects = computed(() => {
+  let result = [...store.projects];
+
+  if (activeFilter.value !== "all") {
+    if (activeFilter.value === "in_progress") {
+      result = result.filter((p) => !["completed", "error"].includes(p.status));
+    } else {
+      result = result.filter((p) => p.status === activeFilter.value);
+    }
+  }
+
+  if (searchQuery.value) {
+    const q = searchQuery.value.toLowerCase();
+    result = result.filter(
+      (p) =>
+        (p.name && p.name.toLowerCase().includes(q)) ||
+        (p.topic && p.topic.toLowerCase().includes(q)),
+    );
+  }
+
+  const sortVal = sortBy.value?.value || "newest";
+  if (sortVal === "oldest") {
+    return result.sort(
+      (a, b) =>
+        new Date(a.created_at ?? 0).getTime() -
+        new Date(b.created_at ?? 0).getTime(),
+    );
+  } else if (sortVal === "name") {
+    return result.sort((a, b) => (a.name || "").localeCompare(b.name || ""));
+  }
+  return result.sort(
+    (a, b) =>
+      new Date(b.created_at ?? 0).getTime() -
+      new Date(a.created_at ?? 0).getTime(),
+  );
+});
+
+const ungroupedFiltered = computed(() => {
+  const allIds = sortedAndFilteredProjects.value.map((p: any) => p.id);
+  const grouped = new Set(groupStore.groups.flatMap((g) => g.projectIds));
+  return sortedAndFilteredProjects.value.filter((p: any) => !grouped.has(p.id));
+});
+
+function projectsForGroup(groupId: string): any[] {
+  const group = groupStore.groups.find((g) => g.id === groupId);
+  if (!group) return [];
+  const filtered = new Set(
+    sortedAndFilteredProjects.value.map((p: any) => p.id),
+  );
+  return group.projectIds
+    .filter((id) => filtered.has(id))
+    .map((id) => sortedAndFilteredProjects.value.find((p: any) => p.id === id))
+    .filter(Boolean);
+}
+
+function listProjectsForGroup(groupId: string): any[] {
+  return projectsForGroup(groupId);
+}
+
+// ── Group actions ──
+function createGroup() {
+  groupStore.createGroup("New Group");
+}
+
+function onDeleteGroup(groupId: string) {
+  // Move its projects out before deleting
+  const group = groupStore.groups.find((g) => g.id === groupId);
+  if (group) {
+    // Projects become ungrouped automatically since we just remove them from the group
+    groupStore.deleteGroup(groupId);
+  }
+}
+
+// ── Drag-and-drop ──
+function onDropToGroup(projectId: string, groupId: string) {
+  groupStore.addToGroup(projectId, groupId);
+  activeDragId.value = null;
+}
+
+function onDragOverUngrouped() {
+  isOverUngrouped.value = true;
+}
+
+function onDragLeaveUngrouped(e: DragEvent) {
+  const related = e.relatedTarget as Node | null;
+  if (!related || !(e.currentTarget as HTMLElement).contains(related)) {
+    isOverUngrouped.value = false;
+  }
+}
+
+function onDropToUngrouped() {
+  isOverUngrouped.value = false;
+  if (activeDragId.value) {
+    groupStore.removeFromAllGroups(activeDragId.value);
+    activeDragId.value = null;
+  }
+}
+
+// ── Delete project ──
+function openDeleteModal(project: any) {
+  projectToDelete.value = project;
+  deleteModalOpen.value = true;
+}
+
+async function confirmDelete() {
+  if (!projectToDelete.value) return;
+  isDeleting.value = true;
+  try {
+    await store.deleteProject(projectToDelete.value.id);
+    deleteModalOpen.value = false;
+  } catch (error) {
+    console.error("Failed to delete project:", error);
+  } finally {
+    isDeleting.value = false;
+    projectToDelete.value = null;
+  }
+}
+
+// ── Continue project ──
+function openContinueModal(project: any) {
+  projectToContinue.value = project;
+  continueModalOpen.value = true;
+}
+
+async function confirmContinue() {
+  if (!projectToContinue.value) return;
+  isContinuing.value = true;
+  try {
+    const sessionId = await store.continueGeneration(
+      projectToContinue.value.id
+    );
+    continueModalOpen.value = false;
+    
+    // Show success toast
+    toast.add({
+      title: "Generation Started",
+      description: `Continuing generation for "${projectToContinue.value.name || "Untitled"}"`,
+      icon: "i-lucide-play-circle",
+      color: "success",
+    });
+    
+    // Navigate to project detail page to watch progress
+    await navigateTo(`/project/${projectToContinue.value.id}`);
+  } catch (error: any) {
+    console.error("Failed to continue project:", error);
+    toast.add({
+      title: "Failed to Continue",
+      description: error.message || "An error occurred while continuing generation",
+      icon: "i-lucide-alert-circle",
+      color: "error",
+    });
+  } finally {
+    isContinuing.value = false;
+    projectToContinue.value = null;
+  }
+}
+
+// ── Helpers ──
+function formatStatus(status: string) {
+  if (!status) return "Unknown";
+  return status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function canContinueProject(status: string) {
+  // Only allow continue for: error, planned, stopped, or cancelled (not actively generating)
+  return status === "error" || status === "planned" || status === "stopped" || status === "cancelled";
+}
+
+function getStatusClasses(status: string, withBackdrop = true) {
+  const base = withBackdrop ? "bg-white/80 border border-white/50 " : "";
+  if (status === "completed")
+    return base + "text-green-700 bg-green-50/80 border-green-200";
+  if (status === "error")
+    return base + "text-red-700 bg-red-50/80 border-red-200";
+  return base + "text-orange-700 bg-orange-50/80 border-orange-200";
+}
+
+function formatDate(dateString: string) {
+  if (!dateString) return "";
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  }).format(new Date(dateString));
+}
+</script>
+
+<style scoped>
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>

frontend/app/stores/chat.ts

@@ -0,0 +1,83 @@
+import { defineStore } from "pinia";
+import api from "~/utils/api";
+import { useProjectStore } from "./projects";
+
+export interface Message {
+  role: "user" | "assistant";
+  content: string;
+}
+
+export const useChatStore = defineStore("chat", {
+  state: () => ({
+    histories: {} as Record<string, Message[]>,
+    suggestions: {} as Record<string, string[]>,
+    loadingSuggestions: {} as Record<string, boolean>,
+  }),
+
+  getters: {
+    getHistory: (state) => (projectId: string) => {
+      return state.histories[projectId] || [];
+    },
+    getSuggestions: (state) => (projectId: string) => {
+      return state.suggestions[projectId] || [];
+    },
+    isLoadingSuggestions: (state) => (projectId: string) => {
+      return !!state.loadingSuggestions[projectId];
+    },
+  },
+
+  actions: {
+    addMessage(projectId: string, message: Message) {
+      if (!this.histories[projectId]) {
+        this.histories[projectId] = [];
+      }
+      this.histories[projectId].push(message);
+    },
+
+    setHistory(projectId: string, history: Message[]) {
+      this.histories[projectId] = history;
+    },
+
+    async fetchSuggestions(projectId: string, apiKeys: any) {
+      // Return cached suggestions if they exist
+      if (
+        this.suggestions[projectId] &&
+        this.suggestions[projectId].length > 0
+      ) {
+        return this.suggestions[projectId];
+      }
+
+      if (this.loadingSuggestions[projectId]) return;
+
+      this.loadingSuggestions[projectId] = true;
+      const projectStore = useProjectStore();
+      try {
+        const res = await api.chatSuggestions(projectId, {
+          model:
+            projectStore.planningModel ||
+            projectStore.selectedModel ||
+            "gemini/gemini-3.1-flash-latest",
+          openai_api_key: apiKeys.openai,
+          anthropic_api_key: apiKeys.anthropic,
+          gemini_api_key: apiKeys.gemini,
+        });
+        if (res.suggestions) {
+          this.suggestions[projectId] = res.suggestions;
+        }
+        return this.suggestions[projectId];
+      } catch (err) {
+        console.error(
+          `Error fetching suggestions for project ${projectId}:`,
+          err,
+        );
+        throw err;
+      } finally {
+        this.loadingSuggestions[projectId] = false;
+      }
+    },
+
+    clearHistory(projectId: string) {
+      delete this.histories[projectId];
+    },
+  },
+});

frontend/app/stores/groups.ts

@@ -0,0 +1,142 @@
+import { defineStore } from "pinia";
+
+export interface ProjectGroup {
+  id: string;
+  name: string;
+  projectIds: string[];
+  collapsed: boolean;
+}
+
+const STORAGE_KEY = "project-groups";
+
+function generateId(): string {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+export const useProjectGroupStore = defineStore("projectGroups", {
+  state: () => ({
+    groups: [] as ProjectGroup[],
+  }),
+
+  getters: {
+    /**
+     * Map of projectId → groupId for fast lookup.
+     */
+    projectGroupMap: (state): Record<string, string> => {
+      const map: Record<string, string> = {};
+      for (const group of state.groups) {
+        for (const pid of group.projectIds) {
+          map[pid] = group.id;
+        }
+      }
+      return map;
+    },
+
+    /**
+     * Returns projects that are NOT in any group.
+     */
+    ungroupedProjectIds: (state) => (allProjectIds: string[]) => {
+      const grouped = new Set(state.groups.flatMap((g) => g.projectIds));
+      return allProjectIds.filter((id) => !grouped.has(id));
+    },
+  },
+
+  actions: {
+    init() {
+      this._recover();
+    },
+
+    createGroup(name = "New Group"): string {
+      const newGroup: ProjectGroup = {
+        id: generateId(),
+        name,
+        projectIds: [],
+        collapsed: false,
+      };
+      this.groups.push(newGroup);
+      this._persist();
+      return newGroup.id;
+    },
+
+    renameGroup(groupId: string, name: string) {
+      const group = this.groups.find((g) => g.id === groupId);
+      if (group) {
+        group.name = name.trim() || "Untitled Group";
+        this._persist();
+      }
+    },
+
+    deleteGroup(groupId: string) {
+      this.groups = this.groups.filter((g) => g.id !== groupId);
+      this._persist();
+    },
+
+    addToGroup(projectId: string, groupId: string) {
+      // Remove from any existing group first
+      this.removeFromAllGroups(projectId);
+      const group = this.groups.find((g) => g.id === groupId);
+      if (group && !group.projectIds.includes(projectId)) {
+        group.projectIds.push(projectId);
+        this._persist();
+      }
+    },
+
+    removeFromAllGroups(projectId: string) {
+      for (const group of this.groups) {
+        group.projectIds = group.projectIds.filter((id) => id !== projectId);
+      }
+      this._persist();
+    },
+
+    toggleCollapse(groupId: string) {
+      const group = this.groups.find((g) => g.id === groupId);
+      if (group) {
+        group.collapsed = !group.collapsed;
+        this._persist();
+      }
+    },
+
+    /**
+     * Reorder groups by providing an ordered list of IDs.
+     */
+    reorderGroups(orderedIds: string[]) {
+      const map = new Map(this.groups.map((g) => [g.id, g]));
+      this.groups = orderedIds.map((id) => map.get(id)!).filter(Boolean);
+      this._persist();
+    },
+
+    /**
+     * Called after projects are fetched — removes stale project IDs.
+     */
+    pruneDeletedProjects(existingProjectIds: string[]) {
+      const existing = new Set(existingProjectIds);
+      let changed = false;
+      for (const group of this.groups) {
+        const before = group.projectIds.length;
+        group.projectIds = group.projectIds.filter((id) => existing.has(id));
+        if (group.projectIds.length !== before) changed = true;
+      }
+      if (changed) this._persist();
+    },
+
+    _persist() {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(this.groups));
+      } catch (e) {
+        console.warn("Failed to persist project groups", e);
+      }
+    },
+
+    _recover() {
+      try {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+          this.groups = JSON.parse(saved) as ProjectGroup[];
+        }
+      } catch (e) {
+        console.warn("Failed to recover project groups", e);
+        this.groups = [];
+      }
+    },
+  },
+});

frontend/app/stores/projects.ts

@@ -0,0 +1,1596 @@
+import { defineStore } from "pinia";
+import api from "~/utils/api";
+
+export const useProjectStore = defineStore("projects", {
+  state: () => ({
+    projects: [] as any[],
+    loading: false,
+    activeGenerations: {} as Record<string, any>, // session_id -> status
+    systemStatus: null,
+
+    // Configuration State
+    planningModel: "",
+    codingModel: "",
+    selectedModel: "", // Keep for backward compatibility
+    useRag: false,
+    useVisualFixCode: false,
+    targetDuration: "3-5 minutes",
+    maxRetries: 5,
+    maxSceneConcurrency: 1,
+    selectedVoice: "af_heart",
+    availableModels: [] as any[],
+    availableVoices: [] as any[],
+    loadingModels: false,
+    loadingVoices: false,
+
+    // API Keys (for BYOK model)
+    apiKeys: {
+      openai: "",
+      anthropic: "",
+      gemini: "",
+    },
+
+    // Draft State (for persistence across navigation)
+    draftProjectName: "",
+    draftTopic: "",
+    isDrafting: false,
+    isRevising: false,
+    pendingPlanStartAt: null as number | null,
+
+    // Evaluation State
+    evaluationResults: {} as Record<string, any>,
+    evaluationLoading: {} as Record<string, boolean>,
+
+    // Background Persistence State (Live Generation)
+    currentSessionId: null as string | null,
+    ws: null as WebSocket | null,
+    // Onboarding State
+    onboarding: {
+      active: false,
+      currentStep: 0,
+    },
+
+    generationState: {
+      loading: false,
+      completed: false,
+      logs: [] as string[],
+      sceneStatuses: {} as Record<string, string>,
+      stageProgress: {} as Record<string, { current: number; total: number }>,
+      totalScenes: 0,
+      currentScene: 0,
+      currentSceneSteps: 0,
+      currentPhase: 0,
+      logCount: 0, // total lines received; used for trickle progress
+      friendlyTitle: "Production Studio",
+      friendlyStatus: "Ready to produce",
+      startTime: null as string | null,
+      errorMsg: null as string | null,
+      latestLog: "" as string,
+      currentTask: "" as string,
+      isReconnecting: false,
+      reconnectAttempts: 0,
+      accumulatedCost: 0,
+      completedProjectId: null as string | null,
+      completedProjectTitle: null as string | null,
+      // Rate limit countdown state
+      rateLimitCountdown: 0 as number,
+      rateLimitInterval: null as ReturnType<typeof setInterval> | null,
+    },
+  }),
+
+  getters: {
+    getProjectById: (state) => (id: string) => {
+      return state.projects.find((p) => p.id === id);
+    },
+
+    completedProjects: (state) => {
+      return state.projects.filter((p) => p.status === "completed");
+    },
+
+    inProgressProjects: (state) => {
+      return state.projects.filter((p) => p.status === "in_progress");
+    },
+
+    totalScenes: (state) => {
+      return state.projects.reduce(
+        (total, p) => total + (p.scene_count || 0),
+        0,
+      );
+    },
+
+    completedScenes: (state) => {
+      return state.projects.reduce(
+        (total, p) => total + (p.completed_scenes || 0),
+        0,
+      );
+    },
+
+    isGenerating: (state) => {
+      return (
+        state.generationState.loading ||
+        state.generationState.isReconnecting ||
+        Object.values(state.activeGenerations).some(
+          (g) =>
+            g.status === "started" ||
+            g.status === "planning" ||
+            g.status === "revising" ||
+            g.status === "retrying" ||
+            g.status === "continuing",
+        )
+      );
+    },
+
+    currentProject: (state) => {
+      const active = Object.values(state.activeGenerations);
+      if (active.length === 0) return null;
+      const sorted = [...active].sort(
+        (a, b) => (b.timestamp || 0) - (a.timestamp || 0),
+      );
+      const p = sorted[0];
+      return {
+        id: p.projectId || p.projectName,
+        title: p.projectName,
+      };
+    },
+
+    status: (state) => {
+      return state.generationState.friendlyStatus;
+    },
+
+    progress: (state) => {
+      const { stageProgress, completed } = state.generationState;
+      if (completed) return 100;
+
+      // Define weights for each stage (total = 100%)
+      const weights = {
+        "Video Planning": 50,
+        "Scene Generation": 25,
+        "Code Rendering": 24,
+        "Video Assembly": 1,
+      } as Record<string, number>;
+
+      const orderedStages = [
+        "Video Planning",
+        "Scene Generation",
+        "Code Rendering",
+        "Video Assembly",
+      ];
+
+      const logFallback = Math.min(
+        Math.floor(state.generationState.logCount / 3),
+        5,
+      );
+
+      // Detect the "furthest" stage we have information for
+      let currentStageIndex = -1;
+      orderedStages.forEach((stageName, index) => {
+        if (stageProgress[stageName]) {
+          currentStageIndex = index;
+        }
+      });
+
+      if (currentStageIndex !== -1) {
+        let totalProgress = 0;
+        orderedStages.forEach((stageName, index) => {
+          const weight = weights[stageName] || 0;
+          if (index < currentStageIndex) {
+            // Previous stages are weighted fully
+            totalProgress += weight;
+          } else if (index === currentStageIndex) {
+            // Current stage is weighted by its relative progress
+            const prog = stageProgress[stageName];
+            if (prog) {
+              totalProgress +=
+                (prog.total > 0 ? prog.current / prog.total : 0) * weight;
+            }
+          }
+        });
+        // Use higher of calculated and fallback to ensure we don't drop to 0
+        return Math.min(Math.max(Math.round(totalProgress), logFallback), 99);
+      }
+
+      return logFallback;
+    },
+
+    filteredModels: (state) => {
+      return state.availableModels.filter((m: any) => {
+        const val = m.value || "";
+        if (val.startsWith("gemini/")) return !!state.apiKeys.gemini;
+        if (val.startsWith("openai/")) return !!state.apiKeys.openai;
+        if (val.startsWith("anthropic/")) return !!state.apiKeys.anthropic;
+        // Keep others (ollama, llamacpp, lmstudio, etc)
+        return true;
+      });
+    },
+
+    accumulatedCostPHP: (state) => {
+      const usd = state.generationState.accumulatedCost || 0;
+      const rate = 60.0; // Current approx conversion rate USD -> PHP
+      const php = usd * rate;
+      // Using 2 decimals for PHP as it's more significant than 4-decimal USD
+      return `\u20B1${php.toFixed(2)}`;
+    },
+  },
+
+  actions: {
+    // Project Management
+    async fetchProjects() {
+      // Recover active sessions and config first
+      this._recoverSessions();
+      this._recoverConfig();
+
+      this.loading = true;
+      try {
+        const fetchedProjects = await api.getProjects();
+        this.projects = fetchedProjects;
+
+        // --- STATUS RECONCILIATION ---
+        // Cross-reference activeGenerations with fetched projects to clear "stuck" states
+        let modified = false;
+        const GRACE_PERIOD_MS = 30_000; // 30 seconds — backend may not have created the project yet
+        for (const sessionId of Object.keys(this.activeGenerations)) {
+          const active = this.activeGenerations[sessionId];
+          const isNew = Date.now() - (active.timestamp || 0) < GRACE_PERIOD_MS;
+
+          // Match ONLY by unique project_id (folder name).
+          // Never match by display name — two projects can share the same name.
+          // Legacy sessions (pre-projectId) used projectName as the folder name, so keep that fallback.
+          const matchedProject = fetchedProjects?.find(
+            (p: { id: any }) =>
+              p.id === active.projectId ||
+              (!active.projectId && p.id === active.projectName),
+          );
+
+          if (
+            matchedProject &&
+            (matchedProject as any).status === "completed"
+          ) {
+            console.log(
+              `Reconciliation: Clearing session ${sessionId} as project ${active.projectName} is completed.`,
+            );
+            delete this.activeGenerations[sessionId];
+            modified = true;
+
+            // If this was our current session, stop loading
+            if (this.currentSessionId === sessionId) {
+              this.generationState.loading = false;
+              this.generationState.completed = true;
+              this.generationState.currentPhase = 5;
+              this.ws?.close();
+              this.ws = null;
+            }
+          } else if (!matchedProject && !isNew) {
+            // Only clear stale sessions — give new generations a 30s grace period
+            // for the backend to register the project
+            console.log(
+              `Reconciliation: Clearing session ${sessionId} as project ${active.projectName} no longer exists.`,
+            );
+            delete this.activeGenerations[sessionId];
+            modified = true;
+
+            // If this was our current session, stop loading
+            if (this.currentSessionId === sessionId) {
+              this.generationState.loading = false;
+              this.currentSessionId = null;
+              this.ws?.close();
+              this.ws = null;
+            }
+          }
+        }
+
+        if (modified) {
+          this._persistSessions();
+        }
+        // -----------------------------
+      } catch (error) {
+        console.error("Failed to fetch projects:", error);
+        throw error;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async fetchProject(id: string) {
+      this.loading = true;
+      try {
+        const project = await api.getProject(id);
+        // Update or add the project in the list
+        const index = this.projects.findIndex((p) => p.id === id);
+        if (index !== -1) {
+          this.projects[index] = { ...this.projects[index], ...project };
+        } else {
+          this.projects.push(project);
+        }
+        return project;
+      } catch (error: any) {
+        console.error(`Failed to fetch project ${id}:`, error);
+        throw error;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async deleteProject(id: string) {
+      try {
+        await api.deleteProject(id);
+        this.projects = this.projects.filter((p) => p.id !== id);
+        // Clean up evaluation results
+        delete this.evaluationResults[id];
+        delete this.evaluationLoading[id];
+      } catch (error: any) {
+        console.error(`Failed to delete project ${id}:`, error);
+        throw error;
+      }
+    },
+
+    // Generation
+    async triggerGeneration(projectName: string, topic: string) {
+      // Validate API keys before starting generation to prevent mid-pipeline failures
+      const keysToValidate: any = {};
+      if (this.apiKeys.openai)
+        keysToValidate.openai_api_key = this.apiKeys.openai;
+      if (this.apiKeys.anthropic)
+        keysToValidate.anthropic_api_key = this.apiKeys.anthropic;
+      if (this.apiKeys.gemini)
+        keysToValidate.gemini_api_key = this.apiKeys.gemini;
+
+      if (Object.keys(keysToValidate).length > 0) {
+        try {
+          const validationResult = await api.validateApiKeys(keysToValidate);
+          if (!validationResult.valid) {
+            const errorMsg =
+              validationResult.errors?.join(", ") || "Invalid API keys";
+            throw new Error(`API key validation failed: ${errorMsg}`);
+          }
+        } catch (error: any) {
+          console.error("API key validation failed:", error);
+          throw error; // Don't start generation if keys are invalid
+        }
+      }
+
+      // Reset state entirely for a fresh start, then show the widget immediately
+      this.resetGenerationState();
+      this.generationState.loading = true;
+      this.generationState.errorMsg = null;
+      try {
+        const result = await api.startGeneration({
+          project_name: projectName,
+          topic: topic,
+          model: this.planningModel,
+          coding_model: this.codingModel,
+          use_rag: this.useRag,
+          use_visual_fix_code: this.useVisualFixCode,
+          target_duration: this.targetDuration,
+          max_retries: this.maxRetries,
+          max_scene_concurrency: this.maxSceneConcurrency,
+          voice: this.selectedVoice,
+          openai_api_key: this.apiKeys.openai,
+          anthropic_api_key: this.apiKeys.anthropic,
+          gemini_api_key: this.apiKeys.gemini,
+        });
+        this.activeGenerations[result.session_id] = {
+          projectId: result.project_id, // unique folder ID
+          projectName: result.project_name, // human-readable display name
+          status: "started",
+          timestamp: Date.now(),
+        };
+        this._persistSessions();
+        // Automatically start listening for progress
+        this.initWebSocket(result.session_id);
+        return result.session_id;
+      } catch (error: any) {
+        console.error("Failed to trigger generation:", error);
+        throw error;
+      }
+    },
+
+    async stopGeneration(sessionId?: string, deleteDir: boolean = false) {
+      let id = sessionId || this.currentSessionId;
+
+      if (!id) {
+        const active = Object.entries(this.activeGenerations).filter(
+          ([_, g]) =>
+            g.status === "started" ||
+            g.status === "planning" ||
+            g.status === "revising" ||
+            g.status === "retrying" ||
+            g.status === "continuing",
+        );
+
+        if (active.length > 0) {
+          const sorted = active.sort(
+            (a, b) => (b[1].timestamp ?? 0) - (a[1].timestamp ?? 0),
+          );
+          const first = sorted[0];
+          if (first) {
+            id = first[0];
+            console.log(
+              `!!! [STORE] Auto-resolved session ID from active generations: ${id}`,
+            );
+          }
+        }
+      }
+
+      if (!id && this.pendingPlanStartAt) {
+        try {
+          const response = await api.getActiveSessions();
+          const sessions = response?.sessions || [];
+          const threshold = this.pendingPlanStartAt - 15000;
+          const candidates = sessions
+            .filter((s: any) => {
+              const createdAt = new Date(s.created_at || 0).getTime();
+              return (
+                s?.status === "active" &&
+                createdAt >= threshold &&
+                (!this.planningModel || s?.model === this.planningModel)
+              );
+            })
+            .sort(
+              (a: any, b: any) =>
+                new Date(b.updated_at || 0).getTime() -
+                new Date(a.updated_at || 0).getTime(),
+            );
+
+          if (candidates.length > 0) {
+            id = candidates[0].session_id;
+            if (id && !this.activeGenerations[id]) {
+              this.activeGenerations[id] = {
+                projectId: candidates[0].project_id,
+                projectName: candidates[0].project_id,
+                status: "planning",
+                timestamp: Date.now(),
+              };
+              this._persistSessions();
+            }
+            console.log(
+              `!!! [STORE] Recovered just-started session for stop: ${id}`,
+            );
+          }
+        } catch (e) {
+          console.warn("!!! [STORE] Failed to recover pending session:", e);
+        }
+      }
+
+      if (!id) {
+        console.warn("!!! [STORE] No active session to stop.");
+        return "not_found";
+      }
+
+      console.log("!!! [STORE] stopGeneration started !!!", {
+        id,
+        currentSessionId: this.currentSessionId,
+        activeGenerationsCount: Object.keys(this.activeGenerations).length,
+        deleteDir,
+      });
+
+      try {
+        console.log("!!! [STORE] Sending API call to stop session:", id);
+        await api.stopGeneration(id, deleteDir);
+
+        console.log(
+          `!!! [STORE] API response for stopGeneration: { message: 'Generation stopped', session_id: '${id}' }`,
+        );
+
+        // Get the project ID from the session before removing it
+        const sessionInfo = this.activeGenerations[id];
+        const projectId = sessionInfo?.projectId || sessionInfo?.projectName;
+
+        // Update local state
+        if (this.activeGenerations[id]) {
+          console.log("!!! [STORE] Marking session as stopped in state:", id);
+          this.activeGenerations[id].status = "stopped";
+        }
+
+        // If this was our current session, clear it
+        if (this.currentSessionId === id) {
+          console.log("!!! [STORE] Clearing local state for session:", id);
+          this.currentSessionId = null;
+          this.generationState.loading = false;
+        }
+
+        this._persistSessions();
+
+        // Update the project status in the local projects array
+        if (projectId) {
+          const projectIndex = this.projects.findIndex(
+            (p) => p.id === projectId,
+          );
+          if (projectIndex !== -1) {
+            this.projects[projectIndex].status = "stopped";
+            console.log(
+              `!!! [STORE] Updated project ${projectId} status to 'stopped'`,
+            );
+          }
+        }
+
+        return "stopped";
+      } catch (error: any) {
+        // If session not found (404), it's already stopped on server
+        if (error.response && error.response.status === 404) {
+          console.warn(
+            `Session ${id} not found on server, marking as stopped locally.`,
+          );
+          if (this.activeGenerations[id]) {
+            this.activeGenerations[id].status = "stopped";
+          }
+          if (this.currentSessionId === id) {
+            console.log("!!! [STORE] Clearing currentSessionId due to 404 !!!");
+            this.currentSessionId = null;
+            this.generationState.loading = false;
+          }
+          this._persistSessions();
+          return "not_found";
+        }
+        console.error("Failed to stop generation:", error);
+        throw error;
+      }
+    },
+
+    async retryScene(projectId: string, sceneNumber: number) {
+      try {
+        const result = await api.retryScene(projectId, sceneNumber, {
+          model: this.planningModel,
+          coding_model: this.codingModel,
+          openai_api_key: this.apiKeys.openai,
+          anthropic_api_key: this.apiKeys.anthropic,
+          gemini_api_key: this.apiKeys.gemini,
+          max_retries: this.maxRetries,
+        });
+        this.activeGenerations[result.session_id] = {
+          projectName: projectId,
+          sceneNumber: sceneNumber,
+          status: "retrying",
+          timestamp: Date.now(),
+        };
+        // Automatically start listening for progress
+        this.initWebSocket(result.session_id);
+        return result.session_id;
+      } catch (error: any) {
+        console.error(`Failed to retry scene ${sceneNumber}:`, error);
+        throw error;
+      }
+    },
+
+    async continueGeneration(projectId: string) {
+      // Check if there's already an active generation for this project
+      // Use projectId (unique ID) instead of projectName (display name) to avoid false matches
+      const existingGeneration = Object.entries(this.activeGenerations).find(
+        ([_, gen]) => {
+          const matchesProjectId =
+            gen.projectId === projectId || gen.projectName === projectId;
+          const isActive =
+            gen.status !== "stopped" && gen.status !== "completed";
+          return matchesProjectId && isActive;
+        },
+      );
+
+      if (existingGeneration) {
+        console.warn(
+          `Generation already in progress for project: ${projectId}`,
+        );
+        return existingGeneration[0]; // Return existing session_id
+      }
+
+      try {
+        const result = await api.continueGeneration(projectId, {
+          model: this.planningModel,
+          coding_model: this.codingModel,
+          openai_api_key: this.apiKeys.openai,
+          anthropic_api_key: this.apiKeys.anthropic,
+          gemini_api_key: this.apiKeys.gemini,
+          max_retries: this.maxRetries,
+        });
+        // Extract clean display name from project ID (remove UUID suffix)
+        const displayNameMatch = projectId.match(/^(.+?)_[a-f0-9]{8}$/);
+        const displayName = (displayNameMatch?.[1] ?? projectId).replace(
+          /_/g,
+          " ",
+        );
+
+        this.activeGenerations[result.session_id] = {
+          projectId: result.project_id || projectId, // Store unique project ID
+          projectName: displayName, // Clean display name for UI
+          status: "continuing",
+          timestamp: Date.now(),
+        };
+        this._persistSessions();
+        // Automatically start listening for progress
+        this.initWebSocket(result.session_id);
+        return result.session_id;
+      } catch (error: any) {
+        console.error(`Failed to continue generation for ${projectId}:`, error);
+        throw error;
+      }
+    },
+
+    async draftPlan(topic: string, persona: string, targetDuration: string) {
+      if (this.isDrafting) return;
+
+      this.isDrafting = true;
+      const originalDraft = this.draftTopic;
+      let generatedDraft = "";
+
+      try {
+        const response = await api.draftPlan({
+          topic: topic,
+          persona: persona,
+          model: this.planningModel,
+          target_duration: targetDuration,
+          openai_api_key: this.apiKeys.openai,
+          anthropic_api_key: this.apiKeys.anthropic,
+          gemini_api_key: this.apiKeys.gemini,
+        });
+
+        if (!response.body) throw new Error("No response body");
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value, { stream: true });
+
+          // Check for error markers in the stream
+          if (chunk.startsWith("Error:")) {
+            let userMessage = "Drafting failed. Please try again later.";
+
+            // Map common technical errors to user-friendly messages
+            if (
+              chunk.includes("503") ||
+              chunk.includes("high demand") ||
+              chunk.includes("ServiceUnavailableError")
+            ) {
+              userMessage =
+                "AI models are currently under heavy load. Let's try again in a few moments!";
+            } else if (chunk.includes("429") || chunk.includes("rate limit")) {
+              userMessage =
+                "We've hit a temporary rate limit. Please wait a minute before trying again.";
+            }
+
+            throw new Error(userMessage);
+          }
+
+          generatedDraft += chunk;
+        }
+
+        // Only replace user's text when generation succeeds with non-empty output.
+        if (generatedDraft.trim().length > 0) {
+          this.draftTopic = generatedDraft;
+        } else {
+          this.draftTopic = originalDraft;
+        }
+      } catch (error: any) {
+        console.error("Failed to draft plan:", error);
+        // Preserve what the user has written when drafting fails.
+        this.draftTopic = originalDraft;
+        throw error;
+      } finally {
+        this.isDrafting = false;
+      }
+    },
+
+    async testApiKey(provider: string, key: string) {
+      try {
+        return await api.testApiKey({ provider, key });
+      } catch (error: any) {
+        console.error(`Failed to test ${provider} key:`, error);
+        return { status: "error", message: error.message };
+      }
+    },
+
+    // Plan Approval Actions
+    async generatePlanOnly(topic: string, description: string) {
+      this.loading = true;
+      this.pendingPlanStartAt = Date.now();
+      // Show immediate feedback while waiting for backend to create session/project id.
+      this.generationState.loading = true;
+      this.generationState.completed = false;
+      this.generationState.errorMsg = null;
+      this.generationState.friendlyStatus = "Starting generation";
+      this.generationState.currentTask = "Preparing project...";
+      try {
+        const result = await api.generatePlan({
+          topic,
+          description,
+          model: this.planningModel,
+          openai_api_key: this.apiKeys.openai,
+          anthropic_api_key: this.apiKeys.anthropic,
+          gemini_api_key: this.apiKeys.gemini,
+          max_retries: this.maxRetries,
+          use_rag: this.useRag,
+          target_duration: this.targetDuration,
+          voice: this.selectedVoice,
+        });
+
+        // Add to active generations to track the "Designing plan..." phase
+        this.activeGenerations[result.session_id] = {
+          projectId: result.project_id,
+          projectName: topic,
+          status: "planning",
+          timestamp: Date.now(),
+        };
+        this._persistSessions();
+        this.initWebSocket(result.session_id);
+
+        return result;
+      } catch (error: any) {
+        console.error("Failed to generate plan:", error);
+        this.generationState.loading = false;
+        this.generationState.errorMsg =
+          error?.message || "Failed to start generation";
+        throw error;
+      } finally {
+        this.pendingPlanStartAt = null;
+        this.loading = false;
+      }
+    },
+
+    async revisePlan(projectId: string, feedbacks: Record<number, string>) {
+      if (this.isRevising) return;
+      this.isRevising = true;
+
+      try {
+        const result = await api.revisePlan(projectId, {
+          feedbacks,
+          model: this.planningModel,
+          openai_api_key: this.apiKeys.openai,
+          anthropic_api_key: this.apiKeys.anthropic,
+          gemini_api_key: this.apiKeys.gemini,
+          max_retries: this.maxRetries,
+        });
+
+        this.activeGenerations[result.session_id] = {
+          projectId: result.project_id || projectId,
+          projectName: projectId.replace(/_/g, " "),
+          status: "revising",
+          timestamp: Date.now(),
+        };
+        this.generationState.friendlyStatus = "Revising plans";
+        this.generationState.currentTask =
+          "Revising scene outline and implementation plans";
+        this._persistSessions();
+        this.initWebSocket(result.session_id);
+
+        return result.session_id;
+      } catch (error: any) {
+        console.error("Failed to revise plan:", error);
+        throw error;
+      } finally {
+        this.isRevising = false;
+      }
+    },
+
+    async approvePlan(projectId: string) {
+      try {
+        const result = await api.approvePlan(projectId, {
+          model: this.planningModel,
+          coding_model: this.codingModel,
+          openai_api_key: this.apiKeys.openai,
+          anthropic_api_key: this.apiKeys.anthropic,
+          gemini_api_key: this.apiKeys.gemini,
+          max_retries: this.maxRetries,
+        });
+        if (result?.session_id) {
+          this.activeGenerations[result.session_id] = {
+            projectId: result.project_id || projectId,
+            projectName: projectId.replace(/_/g, " "),
+            status: "continuing",
+            timestamp: Date.now(),
+          };
+          this.generationState.friendlyStatus = "Continuing generation";
+          this.generationState.currentTask =
+            "Generating scenes and final video";
+          this._persistSessions();
+          this.initWebSocket(result.session_id);
+        }
+        await this.fetchProject(projectId);
+        return result?.session_id || null;
+      } catch (error: any) {
+        console.error("Failed to approve plan:", error);
+        throw error;
+      }
+    },
+
+    // File Management
+    async getProjectFile(projectId: string, filePath: string) {
+      try {
+        return await api.getProjectFile(projectId, filePath);
+      } catch (error: any) {
+        console.error(`Failed to get file ${filePath}:`, error);
+        throw error;
+      }
+    },
+
+    // Evaluation
+    async evaluateProject(projectId: string, config: any = {}) {
+      this.evaluationLoading[projectId] = true;
+      try {
+        const result = await api.evaluateProject(projectId, {
+          eval_type: config.evalType || "all",
+          model_text: config.modelText || "gemini-3.1-flash-latest",
+          model_video: config.modelVideo || "gemini-3.1-flash-latest",
+          model_image: config.modelImage || "gemini-3.1-flash-latest",
+          openai_api_key: this.apiKeys.openai,
+          anthropic_api_key: this.apiKeys.anthropic,
+          gemini_api_key: this.apiKeys.gemini,
+        });
+        this.evaluationResults[projectId] = result;
+        return result;
+      } catch (error: any) {
+        console.error(`Failed to evaluate project ${projectId}:`, error);
+        throw error;
+      } finally {
+        this.evaluationLoading[projectId] = false;
+      }
+    },
+
+    // System
+    async fetchModels() {
+      // Recover keys first
+      this._recoverKeys();
+
+      // Guard against concurrent or redundant calls
+      if (this.loadingModels && this.availableModels.length > 0) return;
+      if (this.availableModels.length > 0) return;
+
+      this.loadingModels = true;
+      try {
+        const data = await api.getModels();
+        this.availableModels = data.models;
+
+        // Set defaults to the first available model if not already set
+        // Set defaults to the first available filtered model if not already set
+        const firstModel = this.filteredModels[0]?.value;
+        if (firstModel) {
+          if (!this.planningModel) this.planningModel = firstModel;
+          if (!this.codingModel) this.codingModel = firstModel;
+          if (!this.selectedModel) this.selectedModel = firstModel;
+        }
+      } catch (error) {
+        console.error("Failed to fetch models:", error);
+      } finally {
+        this.loadingModels = false;
+      }
+    },
+
+    async fetchSystemStatus() {
+      try {
+        this.systemStatus = await api.getSystemStatus();
+      } catch (error) {
+        console.error("Failed to fetch system status:", error);
+      }
+    },
+
+    async fetchVoices() {
+      // Recover keys first
+      this._recoverKeys();
+
+      // Guard against concurrent or redundant calls
+      if (this.loadingVoices && this.availableVoices.length > 0) return;
+      if (this.availableVoices.length > 0) return;
+
+      this.loadingVoices = true;
+      try {
+        const data = await api.getVoices();
+        this.availableVoices = data.voices;
+        if (this.availableVoices.length > 0) {
+          const selected = this.selectedVoice;
+          const byId = this.availableVoices.find((v: any) => v.id === selected);
+          if (!byId && selected) {
+            const byName = this.availableVoices.find(
+              (v: any) =>
+                (v.name || "").toLowerCase() === selected.toLowerCase(),
+            );
+            if (byName?.id) {
+              this.selectedVoice = byName.id;
+            }
+          }
+
+          // Set default if still not set or invalid
+          const finalIsValid = this.availableVoices.some(
+            (v: any) => v.id === this.selectedVoice,
+          );
+          if (!finalIsValid) {
+            this.selectedVoice = this.availableVoices[0].id;
+          }
+        }
+      } catch (error) {
+        console.error("Failed to fetch voices:", error);
+      } finally {
+        this.loadingVoices = false;
+      }
+    },
+
+    // Utility
+    initKeys() {
+      this._recoverKeys();
+    },
+
+    setApiKeys(keys: any) {
+      this.apiKeys = { ...this.apiKeys, ...keys };
+      this._persistKeys();
+      this._validateModelsAfterKeyChange();
+    },
+
+    setApiKey(provider: string, key: string) {
+      this.apiKeys[provider as keyof typeof this.apiKeys] = key;
+      this._persistKeys();
+      this._validateModelsAfterKeyChange();
+    },
+
+    _validateModelsAfterKeyChange() {
+      // Validate current models against filtered list
+      const filteredValues = this.filteredModels.map((m: any) => m.value);
+      const firstValid = filteredValues[0] || "";
+
+      if (this.planningModel && !filteredValues.includes(this.planningModel)) {
+        this.planningModel = firstValid;
+      }
+      if (this.codingModel && !filteredValues.includes(this.codingModel)) {
+        this.codingModel = firstValid;
+      }
+      if (this.selectedModel && !filteredValues.includes(this.selectedModel)) {
+        this.selectedModel = firstValid;
+      }
+    },
+
+    updateGenerationStatus(sessionId: string, status: string) {
+      if (this.activeGenerations[sessionId]) {
+        this.activeGenerations[sessionId].status = status;
+        this._persistSessions();
+      }
+    },
+
+    removeActiveGeneration(sessionId: string) {
+      delete this.activeGenerations[sessionId];
+      this._persistSessions();
+    },
+
+    _persistSessions() {
+      localStorage.setItem(
+        "activeGenerations",
+        JSON.stringify(this.activeGenerations),
+      );
+    },
+
+    _recoverSessions() {
+      const saved = localStorage.getItem("activeGenerations");
+      if (saved) {
+        try {
+          this.activeGenerations = JSON.parse(saved);
+
+          // Re-establish current session if lost but active generations exist
+          if (!this.currentSessionId) {
+            const active = Object.entries(this.activeGenerations).filter(
+              ([_, g]) =>
+                g.status === "started" ||
+                g.status === "planning" ||
+                g.status === "revising" ||
+                g.status === "retrying" ||
+                g.status === "continuing",
+            );
+
+            if (active.length > 0) {
+              const sorted = active.sort(
+                (a, b) => (b[1].timestamp || 0) - (a[1].timestamp || 0),
+              );
+              const first = sorted[0];
+              if (first) {
+                const latestSessionId = first[0];
+                console.log(
+                  `RecoverSessions: Restored current session ID: ${latestSessionId}`,
+                );
+                this.currentSessionId = latestSessionId;
+
+                // Only auto-connect if we're in the browser and not already connected
+                if (import.meta.client && !this.ws) {
+                  this.initWebSocket(latestSessionId);
+                }
+              }
+            }
+          }
+        } catch (e: any) {
+          console.error("Failed to recover sessions", e);
+        }
+      }
+    },
+
+    _persistKeys() {
+      localStorage.setItem("apiKeys", JSON.stringify(this.apiKeys));
+    },
+
+    _recoverKeys() {
+      const saved = localStorage.getItem("apiKeys");
+      if (saved) {
+        try {
+          const keys = JSON.parse(saved);
+          this.apiKeys = { ...this.apiKeys, ...keys };
+        } catch (e: any) {
+          console.error("Failed to recover keys", e);
+        }
+      }
+    },
+
+    // Session recovery after WebSocket failure
+    async recoverActiveSession() {
+      try {
+        const response = await api.getActiveSessions();
+        const sessions = response.sessions || [];
+
+        if (sessions.length === 0) {
+          console.log("No active sessions to recover");
+          return null;
+        }
+
+        // Get the most recently updated session
+        const sorted = sessions.sort(
+          (a: any, b: any) =>
+            new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime(),
+        );
+
+        const latestSession = sorted[0];
+        console.log(
+          `Recovering session: ${latestSession.session_id} for project: ${latestSession.project_id}`,
+        );
+
+        // Extract clean display name from project ID
+        const projectId = latestSession.project_id;
+        const displayNameMatch = projectId.match(/^(.+?)_[a-f0-9]{8}$/);
+        const displayName = (displayNameMatch?.[1] ?? projectId).replace(
+          /_/g,
+          " ",
+        );
+
+        // Re-attach to the session
+        this.currentSessionId = latestSession.session_id;
+        this.activeGenerations[latestSession.session_id] = {
+          projectId: projectId,
+          projectName: displayName, // Clean display name instead of full ID
+          status:
+            latestSession.status === "active"
+              ? "recovered"
+              : latestSession.status,
+          timestamp: Date.now(),
+        };
+
+        this._persistSessions();
+        this.initWebSocket(latestSession.session_id);
+
+        return latestSession.session_id;
+      } catch (error: any) {
+        console.error("Failed to recover active session:", error);
+        throw error;
+      }
+    },
+
+    // Onboarding
+    startOnboarding() {
+      console.log("STORE: startOnboarding called");
+      this.onboarding.active = true;
+      this.onboarding.currentStep = 0;
+    },
+
+    setOnboardingStep(step: number) {
+      console.log("STORE: setOnboardingStep", step);
+      this.onboarding.currentStep = step;
+    },
+
+    stopOnboarding() {
+      console.log("STORE: stopOnboarding called");
+      this.onboarding.active = false;
+    },
+
+    // Background Persistence Actions
+    resetGenerationState() {
+      this.currentSessionId = null;
+      this.generationState = {
+        loading: false,
+        completed: false,
+        logs: [],
+        sceneStatuses: {},
+        totalScenes: 0,
+        currentScene: 0,
+        currentSceneSteps: 0,
+        currentPhase: 0,
+        logCount: 0,
+        friendlyTitle: "Production Studio",
+        friendlyStatus: "Ready to produce",
+        startTime: null,
+        errorMsg: null,
+        latestLog: "",
+        currentTask: "",
+        isReconnecting: false,
+        reconnectAttempts: 0,
+        accumulatedCost: 0,
+        completedProjectId: null,
+        completedProjectTitle: null,
+        stageProgress: {},
+        rateLimitCountdown: 0,
+        rateLimitInterval: null,
+      };
+      if (this.ws) {
+        this.ws.close();
+        this.ws = null;
+      }
+    },
+
+    clearCurrentProject() {
+      this.activeGenerations = {};
+      this._persistSessions();
+      this.resetGenerationState();
+    },
+
+    _persistConfig() {
+      if (import.meta.client) {
+        localStorage.setItem(
+          "useVisualFixCode",
+          JSON.stringify(this.useVisualFixCode),
+        );
+      }
+    },
+
+    _recoverConfig() {
+      if (import.meta.client) {
+        const saved = localStorage.getItem("useVisualFixCode");
+        if (saved !== null) {
+          try {
+            this.useVisualFixCode = JSON.parse(saved);
+          } catch (e) {
+            console.error("Failed to recover config", e);
+          }
+        }
+      }
+    },
+
+    initWebSocket(sessionId: string) {
+      if (
+        this.ws &&
+        (this.ws.readyState === WebSocket.OPEN ||
+          this.ws.readyState === WebSocket.CONNECTING)
+      ) {
+        if (this.currentSessionId === sessionId) {
+          console.log("WebSocket already connected for session:", sessionId);
+          return;
+        }
+        this.ws.close();
+      }
+
+      this.currentSessionId = sessionId;
+      // Don't reset everything, just ensure flags are set, so we don't clear logs if reconnecting
+      if (!this.generationState.isReconnecting) {
+        this.generationState.loading = true;
+        this.generationState.errorMsg = null;
+      }
+      this.generationState.completed = false;
+
+      // Use relative path for production or absolute for local dev
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      const host =
+        window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"
+          ? `${window.location.hostname}:8001`
+          : window.location.host;
+      this.ws = new WebSocket(`${protocol}//${host}/ws/logs/${sessionId}`);
+
+      this.ws.onopen = () => {
+        console.log("WebSocket connected for session:", sessionId);
+        this.generationState.isReconnecting = false;
+        this.generationState.reconnectAttempts = 0;
+        this.generationState.errorMsg = null;
+        this.generationState.loading = true;
+      };
+
+      this.ws.onmessage = (event) => {
+        const msg = event.data;
+        this.handleLogMessage(msg);
+
+        if (msg === "COMPLETED") {
+          // Save project info before removing active generation
+          const active = this.activeGenerations[sessionId];
+          let completedProjectId: string | null = null;
+          const sessionType = active?.status || "";
+          const isPlanOrRevisionSession =
+            sessionType === "planning" || sessionType === "revising";
+          if (active) {
+            completedProjectId = active.projectId || active.projectName;
+            // Only mark "project ready" for full generation runs.
+            if (!isPlanOrRevisionSession) {
+              this.generationState.completedProjectId = completedProjectId;
+              this.generationState.completedProjectTitle = active.projectName;
+            }
+          }
+
+          this.generationState.loading = false;
+          this.generationState.completed = !isPlanOrRevisionSession;
+          this.generationState.currentPhase = 5;
+          this.removeActiveGeneration(sessionId);
+          this.currentSessionId = null;
+          this.ws?.close();
+          this.fetchProjects()
+            .then(async () => {
+              // Ensure detailed project payload (with updated plans/scenes) wins over list payload.
+              if (completedProjectId) {
+                const refreshed = await this.fetchProject(completedProjectId);
+                const hasVideo = !!refreshed?.video_url;
+                const hasVtt = Array.isArray(refreshed?.files)
+                  ? refreshed.files.some((f: string) => f.endsWith(".vtt"))
+                  : false;
+
+                // Some runs surface the mp4 slightly earlier than the .vtt on first refresh.
+                // Do a couple of delayed refetches so subtitles attach without manual page reload.
+                if (hasVideo && !hasVtt) {
+                  for (const delayMs of [1200, 2500]) {
+                    await new Promise((resolve) =>
+                      setTimeout(resolve, delayMs),
+                    );
+                    const retryProject =
+                      await this.fetchProject(completedProjectId);
+                    const retryHasVtt = Array.isArray(retryProject?.files)
+                      ? retryProject.files.some((f: string) =>
+                          f.endsWith(".vtt"),
+                        )
+                      : false;
+                    if (retryHasVtt) break;
+                  }
+                }
+              }
+            })
+            .catch((err) =>
+              console.warn(
+                "Failed to refresh project list/details on completion:",
+                err,
+              ),
+            );
+        } else if (msg === "STOPPED") {
+          // Get project ID before removing session
+          const active = this.activeGenerations[sessionId];
+          const projectId = active?.projectId || active?.projectName;
+
+          this.generationState.loading = false;
+          this.removeActiveGeneration(sessionId);
+          this.currentSessionId = null;
+          this.ws?.close();
+          this.fetchProjects();
+
+          // Also update local project status immediately
+          if (projectId) {
+            const projectIndex = this.projects.findIndex(
+              (p) => p.id === projectId,
+            );
+            if (projectIndex !== -1) {
+              this.projects[projectIndex].status = "stopped";
+            }
+          }
+        } else if (msg.startsWith("ERROR")) {
+          // Get project ID before removing session
+          const active = this.activeGenerations[sessionId];
+          const projectId = active?.projectId || active?.projectName;
+
+          this.generationState.loading = false;
+          this.generationState.errorMsg = msg;
+          this.removeActiveGeneration(sessionId);
+          this.currentSessionId = null;
+          this.ws?.close();
+
+          // Update local project status to error
+          if (projectId) {
+            const projectIndex = this.projects.findIndex(
+              (p) => p.id === projectId,
+            );
+            if (projectIndex !== -1) {
+              this.projects[projectIndex].status = "error";
+              this.projects[projectIndex].error_details = msg;
+            }
+          }
+        }
+      };
+
+      this.ws.onerror = () => {
+        console.error("WebSocket error for session:", sessionId);
+      };
+
+      this.ws.onclose = () => {
+        const gen = this.activeGenerations[sessionId];
+        const isStopped = gen && gen.status === "stopped";
+
+        if (
+          !this.generationState.completed &&
+          !isStopped &&
+          this.currentSessionId === sessionId
+        ) {
+          this.handleReconnection(sessionId);
+        }
+      };
+    },
+
+    handleReconnection(sessionId: string) {
+      if (this.generationState.reconnectAttempts >= 10) {
+        this.generationState.loading = false;
+        this.generationState.isReconnecting = false;
+        this.generationState.errorMsg =
+          "Connection lost. Max reconnection attempts reached.";
+        return;
+      }
+
+      this.generationState.isReconnecting = true;
+      this.generationState.reconnectAttempts++;
+
+      const delay = Math.min(
+        1000 * Math.pow(1.5, this.generationState.reconnectAttempts),
+        15000,
+      );
+      console.log(
+        `Attempting reconnection (${this.generationState.reconnectAttempts}) in ${delay}ms...`,
+      );
+
+      setTimeout(() => {
+        if (this.currentSessionId === sessionId) {
+          this.initWebSocket(sessionId);
+        }
+      }, delay);
+    },
+
+    handleLogMessage(rawMsg: string) {
+      const clearRetryCountdown = () => {
+        if (this.generationState.rateLimitInterval) {
+          clearInterval(this.generationState.rateLimitInterval);
+          this.generationState.rateLimitInterval = null;
+        }
+        this.generationState.rateLimitCountdown = 0;
+      };
+
+      const startRetryCountdown = (
+        retrySecs: number,
+        label: string,
+        waitingTask: string,
+      ) => {
+        clearRetryCountdown();
+        this.generationState.rateLimitCountdown = retrySecs;
+        this.generationState.friendlyStatus = `${label} - Retrying in ${retrySecs}s`;
+        this.generationState.currentTask = waitingTask;
+
+        this.generationState.rateLimitInterval = setInterval(() => {
+          this.generationState.rateLimitCountdown--;
+          if (this.generationState.rateLimitCountdown <= 0) {
+            clearRetryCountdown();
+            this.generationState.friendlyStatus = `${label} - Retrying...`;
+          } else {
+            this.generationState.friendlyStatus = `${label} - Retrying in ${this.generationState.rateLimitCountdown}s`;
+          }
+        }, 1000);
+      };
+
+      const getProviderLabel = (model: string) => {
+        const m = String(model || "").toLowerCase();
+        if (m.includes("gemini")) return "Gemini";
+        if (m.includes("claude")) return "Claude";
+        if (m.includes("gpt") || m.includes("openai")) return "OpenAI";
+        if (m.includes("vertex")) return "Provider";
+        return "Model provider";
+      };
+
+      const getActiveSceneCount = () =>
+        Object.values(this.generationState.sceneStatuses).filter(
+          (s) => s === "active",
+        ).length;
+
+      const setActiveScenesTask = () => {
+        const activeCount = getActiveSceneCount();
+        this.generationState.currentTask =
+          activeCount > 0
+            ? `Processing scenes (${activeCount} active)`
+            : "Rendering scenes...";
+      };
+
+      const stripAnsi = (str: string) =>
+        str.replace(
+          /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
+          "",
+        );
+
+      const lines = rawMsg.split("\n").filter((line) => line.trim().length > 0);
+
+      for (const rawLine of lines) {
+        const msg = stripAnsi(rawLine);
+        this.generationState.logCount++;
+
+        if (msg.startsWith("|STATUS|")) {
+          try {
+            const payload = JSON.parse(msg.substring(8));
+            const { type, data } = payload;
+
+            switch (type) {
+              case "PHASE_START":
+              case "SCENE_COUNT":
+              case "SCENE_START":
+              case "SCENE_PLAN_START":
+              case "SUBPLAN_START":
+              case "SCENE_FIX_START":
+              case "SCENE_COMPLETE":
+              case "STAGE_PROGRESS":
+              case "PIPELINE_COMPLETE":
+                clearRetryCountdown();
+                switch (type) {
+                  case "PHASE_START":
+                    if (data.phase_number)
+                      this.generationState.currentPhase = data.phase_number;
+                    this.generationState.friendlyStatus =
+                      data.phase || "Processing";
+                    this.generationState.currentTask = "";
+                    if (
+                      data.phase_number === 4 ||
+                      /scene|render/i.test(String(data.phase || ""))
+                    ) {
+                      this.generationState.sceneStatuses = {};
+                    }
+                    break;
+                  case "SCENE_COUNT":
+                    this.generationState.totalScenes = data.count;
+                    break;
+                  case "SCENE_START":
+                    this.generationState.currentScene = data.scene_number;
+                    this.generationState.sceneStatuses = {
+                      ...this.generationState.sceneStatuses,
+                      [String(data.scene_number)]: "active",
+                    };
+                    setActiveScenesTask();
+                    break;
+                  case "SCENE_PLAN_START":
+                    this.generationState.currentScene = data.scene_number;
+                    this.generationState.sceneStatuses = {
+                      ...this.generationState.sceneStatuses,
+                      [String(data.scene_number)]: "active",
+                    };
+                    setActiveScenesTask();
+                    break;
+                  case "SUBPLAN_START":
+                    this.generationState.currentScene = data.scene_number;
+                    this.generationState.sceneStatuses = {
+                      ...this.generationState.sceneStatuses,
+                      [String(data.scene_number)]: "active",
+                    };
+                    setActiveScenesTask();
+                    break;
+                  case "SCENE_FIX_START":
+                    this.generationState.currentScene = data.scene_number;
+                    this.generationState.sceneStatuses = {
+                      ...this.generationState.sceneStatuses,
+                      [String(data.scene_number)]: "active",
+                    };
+                    setActiveScenesTask();
+                    break;
+                  case "SCENE_COMPLETE":
+                    this.generationState.sceneStatuses = {
+                      ...this.generationState.sceneStatuses,
+                      [String(data.scene_number)]: data.success
+                        ? "completed"
+                        : "failed",
+                    };
+                    setActiveScenesTask();
+                    break;
+                  case "STAGE_PROGRESS":
+                    this.generationState.stageProgress = {
+                      ...this.generationState.stageProgress,
+                      [data.stage_name]: {
+                        current: data.current,
+                        total: data.total,
+                      },
+                    };
+                    this.generationState.friendlyStatus = data.stage_name;
+                    break;
+                  case "PIPELINE_COMPLETE":
+                    this.generationState.currentTask = "Pipeline complete";
+                    break;
+                }
+                break;
+              case "RATE_LIMIT": {
+                const retrySecs = Math.round(data.retry_in || 60);
+                startRetryCountdown(
+                  retrySecs,
+                  "Rate Limited",
+                  `${data.error || "API rate limit hit"}`,
+                );
+                this.generationState.latestLog = `Rate limited for ${data.model || "model"}. Will retry automatically.`;
+                break;
+              }
+              case "API_ERROR": {
+                const apiRetrySecs = Math.round(data.retry_in || 5);
+                const providerLabel = getProviderLabel(
+                  String(data.model || ""),
+                );
+                const shortDetail = String(
+                  data.detail || data.error || "Temporary provider issue",
+                ).replace(/\s+/g, " ");
+                const compactDetail =
+                  shortDetail.length > 180
+                    ? `${shortDetail.slice(0, 180)}...`
+                    : shortDetail;
+                startRetryCountdown(
+                  apiRetrySecs,
+                  "Provider Unavailable",
+                  `${providerLabel} is temporarily unavailable. Retrying automatically.`,
+                );
+                this.generationState.latestLog = compactDetail;
+                break;
+              }
+            }
+            continue;
+          } catch (e) {
+            console.error("Failed to parse status message:", e);
+          }
+        }
+
+        this.generationState.latestLog = msg;
+        this.generationState.logs.push(msg);
+        if (this.generationState.logs.length > 100) {
+          this.generationState.logs.shift();
+        }
+
+        const transientMatch = msg.match(
+          /\[LiteLLM\]\s+Transient error.*Retrying in\s+([\d.]+)s/i,
+        );
+        if (transientMatch?.[1]) {
+          const parsedSecs = Math.max(
+            1,
+            Math.round(parseFloat(transientMatch[1])),
+          );
+          startRetryCountdown(
+            parsedSecs,
+            "Provider Unavailable",
+            "Temporary provider issue, retrying automatically",
+          );
+        }
+
+        const totalScenesMatch =
+          msg.match(/Total Scenes: (\d+)/i) ||
+          msg.match(/plan for (\d+) scenes/i);
+        if (totalScenesMatch?.[1]) {
+          this.generationState.totalScenes = parseInt(totalScenesMatch[1]);
+        }
+
+        if (msg.match(/Phase 1|CREATING PLAN|PLANNING/i)) {
+          this.generationState.currentPhase = 1;
+          this.generationState.friendlyStatus = "Planning project";
+        } else if (msg.match(/Phase 2|GENERATING SCRIPTS|WRITING/i)) {
+          this.generationState.currentPhase = 2;
+          this.generationState.friendlyStatus = "Writing scripts";
+        } else if (msg.match(/Phase 3|GENERATING AUDIO|SYNTHESIZING/i)) {
+          this.generationState.currentPhase = 3;
+          this.generationState.friendlyStatus = "Synthesizing audio";
+        } else if (msg.match(/Phase 4|PRODUCING SCENES|RENDERING/i)) {
+          this.generationState.currentPhase = 4;
+          this.generationState.friendlyStatus = "Rendering scenes";
+        } else if (msg.match(/Phase 5|MERGING VIDEO|FINALIZING/i)) {
+          this.generationState.currentPhase = 5;
+          this.generationState.friendlyStatus = "Finalizing video";
+        }
+
+        const sceneMatch =
+          msg.match(/Scene (\d+)[\/| of ](\d+)/i) ||
+          msg.match(/\[(\d+)\/(\d+)\]/);
+        if (sceneMatch?.[1] && sceneMatch?.[2]) {
+          this.generationState.currentScene = parseInt(sceneMatch[1] as string);
+          this.generationState.totalScenes = parseInt(sceneMatch[2] as string);
+        }
+
+        const stepMatch = msg.match(/Step (\d+)\/(\d+)/i);
+        if (stepMatch?.[1]) {
+          this.generationState.currentSceneSteps = parseInt(
+            stepMatch[1] as string,
+          );
+        }
+
+        const costMatch = msg.match(/COST_UPDATE:([\.\d]+):([\.\d]+)/i);
+        if (costMatch) {
+          const cost1 = parseFloat(costMatch[1] || "0") || 0;
+          const cost2 = parseFloat(costMatch[2] || "0") || 0;
+          const newCost = Math.max(cost1, cost2);
+          this.generationState.accumulatedCost = Math.max(
+            this.generationState.accumulatedCost,
+            newCost,
+          );
+        }
+      }
+    },
+  },
+});

frontend/app/stores/quiz.ts

@@ -0,0 +1,208 @@
+import { defineStore } from "pinia";
+import api from "../utils/api";
+import { useProjectStore } from "./projects";
+
+interface Question {
+  question: string;
+  options: string[];
+  answer: string;
+  explanation: string;
+}
+
+interface QuizState {
+  state: "config" | "taking" | "results";
+  questions: Question[];
+  currentQuestionIndex: number;
+  answers: Record<number, string>;
+  score: number;
+  settings: {
+    count: number;
+    difficulty: string;
+    type: string;
+  };
+}
+
+export const useQuizStore = defineStore("quiz", {
+  state: () => ({
+    quizzes: {} as Record<string, QuizState>,
+    loading: false,
+    error: null as string | null,
+    abortController: null as AbortController | null,
+  }),
+
+  getters: {
+    getQuizState(state) {
+      return (projectId: string) => state.quizzes[projectId]?.state || "config";
+    },
+    getQuestions(state) {
+      return (projectId: string) => state.quizzes[projectId]?.questions || [];
+    },
+    getCurrentQuestionIndex(state) {
+      return (projectId: string) =>
+        state.quizzes[projectId]?.currentQuestionIndex || 0;
+    },
+    getCurrentAnswer(state) {
+      return (projectId: string) => {
+        const quiz = state.quizzes[projectId];
+        if (!quiz) return null;
+        return quiz.answers[quiz.currentQuestionIndex];
+      };
+    },
+    getScore(state) {
+      return (projectId: string) => state.quizzes[projectId]?.score || 0;
+    },
+    hasQuiz(state) {
+      return (projectId: string) =>
+        !!state.quizzes[projectId] &&
+        state.quizzes[projectId].questions.length > 0;
+    },
+  },
+
+  actions: {
+    initQuiz(projectId: string) {
+      if (!this.quizzes[projectId]) {
+        this.quizzes[projectId] = {
+          state: "config",
+          questions: [],
+          currentQuestionIndex: 0,
+          answers: {},
+          score: 0,
+          settings: {
+            count: 3,
+            difficulty: "Medium",
+            type: "Multiple Choice",
+          },
+        };
+      }
+    },
+
+    updateSettings(
+      projectId: string,
+      settings: Partial<QuizState["settings"]>,
+    ) {
+      this.initQuiz(projectId);
+      if (this.quizzes[projectId]) {
+        this.quizzes[projectId]!.settings = {
+          ...this.quizzes[projectId]!.settings,
+          ...settings,
+        };
+      }
+    },
+
+    async generateQuiz(projectId: string, settings: QuizState["settings"]) {
+      if (this.abortController) {
+        this.abortController.abort();
+      }
+      this.abortController = new AbortController();
+
+      this.initQuiz(projectId);
+      this.loading = true;
+      this.error = null;
+
+      const projectStore = useProjectStore();
+
+      try {
+        if (this.quizzes[projectId]) {
+          this.quizzes[projectId]!.settings = settings;
+        }
+
+        const res = await api.generateQuiz(
+          {
+            project_id: projectId,
+            count: settings.count,
+            difficulty: settings.difficulty,
+            type: settings.type,
+            model:
+              projectStore.planningModel ||
+              projectStore.selectedModel ||
+              "gemini/gemini-3.1-flash-latest",
+            openai_api_key: projectStore.apiKeys.openai,
+            anthropic_api_key: projectStore.apiKeys.anthropic,
+            gemini_api_key: projectStore.apiKeys.gemini,
+          },
+          { signal: this.abortController.signal },
+        );
+
+        let questions = res.quiz.quiz || res.quiz;
+        if (!Array.isArray(questions)) {
+          questions = [];
+        }
+
+        if (this.quizzes[projectId]) {
+          this.quizzes[projectId]!.questions = questions;
+          this.quizzes[projectId]!.state = "taking";
+          this.quizzes[projectId]!.currentQuestionIndex = 0;
+          this.quizzes[projectId]!.answers = {};
+          this.quizzes[projectId]!.score = 0;
+        }
+      } catch (err: any) {
+        if (err.name === "CanceledError" || err.code === "ERR_CANCELED") {
+          console.log("Quiz generation canceled");
+          return;
+        }
+        console.error("Quiz generation failed:", err);
+        this.error = err.response?.data?.detail || err.message;
+      } finally {
+        if (
+          this.abortController &&
+          this.abortController.signal.aborted === false
+        ) {
+          this.loading = false;
+          this.abortController = null;
+        }
+      }
+    },
+
+    stopGeneration() {
+      if (this.abortController) {
+        this.abortController.abort();
+        this.abortController = null;
+      }
+      this.loading = false;
+    },
+
+    answerQuestion(projectId: string, option: string) {
+      const quiz = this.quizzes[projectId];
+      if (!quiz || quiz.state !== "taking") return;
+
+      const currentQ = quiz.questions[quiz.currentQuestionIndex];
+      if (!currentQ || quiz.answers[quiz.currentQuestionIndex]) return;
+
+      quiz.answers[quiz.currentQuestionIndex] = option;
+      if (option === currentQ.answer) {
+        quiz.score++;
+      }
+    },
+
+    nextQuestion(projectId: string) {
+      const quiz = this.quizzes[projectId];
+      if (!quiz) return;
+
+      if (quiz.currentQuestionIndex < quiz.questions.length - 1) {
+        quiz.currentQuestionIndex++;
+      } else {
+        quiz.state = "results";
+      }
+    },
+
+    resetQuiz(projectId: string) {
+      const quiz = this.quizzes[projectId];
+      if (!quiz) return;
+
+      quiz.currentQuestionIndex = 0;
+      quiz.answers = {};
+      quiz.score = 0;
+      quiz.state = "taking";
+    },
+
+    clearQuiz(projectId: string) {
+      if (this.quizzes[projectId]) {
+        this.quizzes[projectId].state = "config";
+        this.quizzes[projectId].questions = [];
+        this.quizzes[projectId].answers = {};
+        this.quizzes[projectId].score = 0;
+        this.quizzes[projectId].currentQuestionIndex = 0;
+      }
+    },
+  },
+});

frontend/app/utils/api.ts

@@ -0,0 +1,170 @@
+import axios from "axios";
+
+export const config = {
+  API_BASE_URL: typeof window !== "undefined"
+    ? (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"
+      ? `${window.location.protocol}//${window.location.hostname}:8001`
+      : window.location.origin)
+    : "http://localhost:8001",
+};
+
+const client = axios.create({
+  baseURL: typeof window !== "undefined"
+    ? (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"
+      ? `${window.location.protocol}//${window.location.hostname}:8001/api`
+      : "/api")
+    : `${config.API_BASE_URL}/api`,
+  timeout: 3600000, // Increased timeout for slow local LLMs and evaluation requests
+});
+
+export default {
+  // Project Management
+  async getProjects() {
+    const response = await client.get("/projects");
+    return response.data;
+  },
+  async getProject(id: string) {
+    const response = await client.get(`/projects/${id}`);
+    return response.data;
+  },
+  async deleteProject(id: string) {
+    const response = await client.delete(`/projects/${id}`);
+    return response.data;
+  },
+
+  // Generation
+  async startGeneration(data: any) {
+    const response = await client.post("/generate", data);
+    return response.data;
+  },
+  async stopGeneration(sessionId: string, deleteDir: boolean = false) {
+    const response = await client.post(
+      `/generate/stop/${sessionId}?delete_dir=${deleteDir}`,
+    );
+    return response.data;
+  },
+  async retryScene(projectId: string, sceneNumber: number, data: any) {
+    const response = await client.post(
+      `/projects/${projectId}/retry-scene/${sceneNumber}`,
+      data,
+    );
+    return response.data;
+  },
+  async continueGeneration(projectId: string, data: any) {
+    const response = await client.post(`/projects/${projectId}/continue`, data);
+    return response.data;
+  },
+
+  // File Management
+  async getProjectFile(projectId: string, filePath: string) {
+    const response = await client.get(
+      `/projects/${projectId}/files/${filePath}`,
+    );
+    return response.data;
+  },
+
+  // Evaluation
+  async evaluateProject(projectId: string, evaluationConfig: any) {
+    const response = await client.post(`/projects/${projectId}/evaluate`, {
+      project_id: projectId,
+      ...evaluationConfig,
+    });
+    return response.data;
+  },
+
+  // System
+  async getModels() {
+    const response = await client.get("/models");
+    return response.data;
+  },
+  async getSystemStatus() {
+    const response = await client.get("/system/status");
+    return response.data;
+  },
+  async validateApiKeys(data: {
+    openai_api_key?: string;
+    anthropic_api_key?: string;
+    gemini_api_key?: string;
+  }) {
+    const response = await client.post("/validate-keys", data);
+    return response.data;
+  },
+  async getActiveSessions() {
+    const response = await client.get("/sessions/active");
+    return response.data;
+  },
+  async getVoices() {
+    const response = await client.get("/voices");
+    return response.data;
+  },
+
+  async previewVoice(voiceId: string): Promise<string> {
+    const response = await client.post(
+      "/voices/preview",
+      { voice_id: voiceId },
+      { responseType: "blob" },
+    );
+    return URL.createObjectURL(response.data);
+  },
+
+  async draftPlan(data: any) {
+    // Axios doesn't handle streams as easily as fetch for simple text/plain streams
+    const response = await fetch(`${config.API_BASE_URL}/api/assist/plan`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response;
+  },
+
+  async testApiKey(data: any) {
+    const response = await client.post("/assist/test-key", data);
+    return response.data;
+  },
+
+  // Interactive Learning
+  async chat(projectId: string, data: any) {
+    const response = await client.post(`/assist/chat`, {
+      project_id: projectId,
+      ...data,
+    });
+    return response.data;
+  },
+  async chatSuggestions(projectId: string, data: any) {
+    const response = await client.post(
+      `/projects/${projectId}/chat/suggestions`,
+      data,
+    );
+    return response.data;
+  },
+  async generateQuiz(payload: any, axiosConfig: any) {
+    const response = await client.post("/assist/quiz", payload, axiosConfig);
+    return response.data;
+  },
+
+  // Plan Approval Workflow
+  async generatePlan(data: any) {
+    const response = await client.post("/generate/plan", data);
+    return response.data;
+  },
+
+  async revisePlan(
+    projectId: string,
+    data: any,
+  ) {
+    const response = await client.post(`/projects/${projectId}/revise-plan`, data);
+    return response.data;
+  },
+
+  async approvePlan(projectId: string, data: any = {}) {
+    const response = await client.post(`/projects/${projectId}/approve`, data);
+    return response.data;
+  },
+};

frontend/eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

frontend/nuxt.config.ts

@@ -0,0 +1,43 @@
+export default defineNuxtConfig({
+  modules: ['@nuxt/eslint', '@nuxt/ui', '@pinia/nuxt'],
+
+  devtools: {
+    enabled: true
+  },
+
+  css: ['~/assets/css/main.css'],
+
+  routeRules: {
+    '/': { prerender: true },
+    // Handle well-known and nuxt asset paths to avoid router warnings
+    '/.well-known/**': { prerender: false },
+    '/_nuxt/**': { prerender: false }
+  },
+
+  compatibilityDate: '2025-01-15',
+
+  nitro: {
+    routeRules: {
+      // Bypass proxy for local Nuxt Icon files
+      '/api/_nuxt_icon/**': {},
+
+      // Backend API Routes
+      '/api/**': { proxy: 'http://localhost:8001/api/**' },
+
+      // Video Outputs
+      '/output/**': { proxy: 'http://localhost:8001/output/**' },
+
+      // WebSocket
+      '/ws/**': { proxy: 'http://localhost:8001/ws/**' }
+    }
+  },
+
+  eslint: {
+    config: {
+      stylistic: {
+        commaDangle: 'never',
+        braceStyle: '1tbs'
+      }
+    }
+  }
+})

frontend/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "frontend",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "typecheck": "nuxt typecheck"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.2.96",
+    "@iconify-json/simple-icons": "^1.2.72",
+    "@nuxt/ui": "^4.5.1",
+    "@pinia/nuxt": "^0.11.3",
+    "axios": "^1.13.6",
+    "highlight.js": "^11.11.1",
+    "katex": "^0.16.43",
+    "marked": "^17.0.4",
+    "marked-katex-extension": "^5.1.7",
+    "nuxt": "^4.3.1",
+    "pinia": "^3.0.4",
+    "plyr": "^3.8.4",
+    "tailwindcss": "^4.2.1",
+    "ws": "^8.21.0"
+  },
+  "devDependencies": {
+    "@iconify-json/heroicons": "^1.2.3",
+    "@nuxt/eslint": "^1.15.2",
+    "eslint": "^10.0.3",
+    "typescript": "^5.9.3",
+    "vue-tsc": "^3.2.5"
+  },
+  "packageManager": "pnpm@10.31.0"
+}

frontend/plugins/suppress-router-warnings.client.ts

@@ -0,0 +1,14 @@
+export default defineNuxtPlugin(() => {
+  if (process.dev) {
+    const originalWarn = console.warn;
+    console.warn = (...args) => {
+      if (
+        typeof args[0] === "string" &&
+        args[0].includes("[Vue Router warn]: No match found for location")
+      ) {
+        return;
+      }
+      originalWarn(...args);
+    };
+  }
+});

frontend/pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+ignoredBuiltDependencies:
+  - '@parcel/watcher'
+  - '@tailwindcss/oxide'
+  - esbuild
+  - unrs-resolver
+  - vue-demi

frontend/renovate.json

@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "github>nuxt/renovate-config-nuxt"
+  ],
+  "lockFileMaintenance": {
+    "enabled": true
+  },
+  "packageRules": [{
+    "matchDepTypes": ["resolutions"],
+    "enabled": false
+  }],
+  "postUpdateOptions": ["pnpmDedupe"]
+}

frontend/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    { "path": "./.nuxt/tsconfig.app.json" },
+    { "path": "./.nuxt/tsconfig.server.json" },
+    { "path": "./.nuxt/tsconfig.shared.json" },
+    { "path": "./.nuxt/tsconfig.node.json" }
+  ]
+}