Upload PromptForge v1.0 — Structured prompt generator for Google AI Studio

frontend/client.js

@@ -1,332 +1,23 @@
 /**
- * PromptForge — client.js
- * Handles all API communication and UI state transitions.
+ * PromptForge — client.js v2.0
+ * Custom cursor, toast system, step progress, full API flow.
  */
-
-const API_BASE = "";        // Same origin; change to e.g. "http://localhost:8000" for dev
-let currentPromptId = null; // Tracks the active manifest
-
-// ── DOM refs ──────────────────────────────────────────────────────
+const API = "";
+let currentPromptId = null;
 const $ = id => document.getElementById(id);
-const steps = {
-  input:     $("step-input"),
-  manifest:  $("step-manifest"),
-  finalized: $("step-finalized"),
-  refine:    $("step-refine"),
-};
-
-// ── Utility ───────────────────────────────────────────────────────
-function show(el)  { el.classList.remove("hidden"); }
-function hide(el)  { el.classList.add("hidden"); }
-function showStep(name) {
-  Object.values(steps).forEach(hide);
-  show(steps[name]);
-}
-
-function toast(msg, type = "info") {
-  const t = $("toast");
-  t.textContent = msg;
-  t.className = `toast ${type}`;
-  show(t);
-  setTimeout(() => hide(t), 3500);
-}
-
-function setLoading(btn, loading) {
-  btn.disabled = loading;
-  btn.dataset.originalText ??= btn.textContent;
-  btn.textContent = loading ? "⏳ Working…" : btn.dataset.originalText;
-}
-
-async function apiFetch(path, method = "GET", body = null) {
-  const opts = {
-    method,
-    headers: { "Content-Type": "application/json" },
-  };
-  if (body) opts.body = JSON.stringify(body);
-  const resp = await fetch(API_BASE + path, opts);
-  if (!resp.ok) {
-    const err = await resp.json().catch(() => ({ detail: resp.statusText }));
-    throw new Error(err.detail || "Unknown error");
-  }
-  return resp.json();
-}
-
-// ── Step 1: Generate ──────────────────────────────────────────────
-$("btn-generate").addEventListener("click", async () => {
-  const instruction = $("instruction").value.trim();
-  if (!instruction || instruction.length < 5) {
-    toast("Please enter a meaningful instruction (min 5 characters).", "error");
-    return;
-  }
-
-  const provider  = $("provider").value;
-  const apiKey    = $("api-key").value.trim();
-  const extraCtx  = $("extra-context").value.trim();
-  const enhance   = provider !== "none" && !!apiKey;
-
-  const btn = $("btn-generate");
-  setLoading(btn, true);
-  try {
-    const data = await apiFetch("/api/generate", "POST", {
-      instruction,
-      output_format: "both",
-      provider,
-      api_key: apiKey || null,
-      enhance,
-      extra_context: extraCtx || null,
-    });
-
-    currentPromptId = data.prompt_id;
-    renderManifest(data.manifest);
-    show(steps.manifest);
-    steps.manifest.scrollIntoView({ behavior: "smooth" });
-    toast("✅ Manifest generated — review and approve.", "success");
-  } catch (e) {
-    toast(`Error: ${e.message}`, "error");
-  } finally {
-    setLoading(btn, false);
-  }
-});
-
-// ── Provider selector shows/hides API key field ───────────────────
-$("provider").addEventListener("change", () => {
-  const group = $("api-key-group");
-  group.style.display = $("provider").value !== "none" ? "flex" : "none";
-});
-
-// ── Render manifest into editable grid ───────────────────────────
-function renderManifest(manifest) {
-  const sp = manifest.structured_prompt;
-  const grid = $("manifest-grid");
-  grid.innerHTML = "";
-
-  const fields = [
-    { key: "role",           label: "Role",           value: sp.role,            full: false },
-    { key: "style",          label: "Style & Tone",   value: sp.style,           full: false },
-    { key: "task",           label: "Task",            value: sp.task,            full: true  },
-    { key: "input_format",   label: "Input Format",   value: sp.input_format,    full: false },
-    { key: "output_format",  label: "Output Format",  value: sp.output_format,   full: false },
-    { key: "constraints",    label: "Constraints",    value: sp.constraints.join("\n"), full: true },
-    { key: "safety",         label: "Safety",         value: sp.safety.join("\n"),     full: true },
-  ];
-
-  fields.forEach(f => {
-    const div = document.createElement("div");
-    div.className = `manifest-field${f.full ? " full" : ""}`;
-    div.innerHTML = `<label>${f.label}</label>
-      <textarea id="field-${f.key}" rows="${f.full ? 3 : 2}">${escapeHtml(f.value)}</textarea>`;
-    grid.appendChild(div);
-  });
-
-  $("manifest-json").textContent = JSON.stringify(manifest, null, 2);
-}
-
-// ── Step 2/3: Approve ─────────────────────────────────────────────
-$("btn-approve").addEventListener("click", async () => {
-  if (!currentPromptId) return;
-
-  // Collect edited field values
-  const edits = {};
-  ["role", "style", "task", "input_format", "output_format"].forEach(key => {
-    const el = $(`field-${key}`);
-    if (el) edits[key] = el.value.trim();
-  });
-  const cEl = $("field-constraints");
-  if (cEl) edits.constraints = cEl.value.trim().split("\n").filter(Boolean);
-  const sEl = $("field-safety");
-  if (sEl) edits.safety = sEl.value.trim().split("\n").filter(Boolean);
-
-  const btn = $("btn-approve");
-  setLoading(btn, true);
-  try {
-    const data = await apiFetch("/api/approve", "POST", {
-      prompt_id: currentPromptId,
-      edits,
-    });
-
-    renderFinalizedPrompt(data.finalized_prompt);
-    hide(steps.manifest);
-    show(steps.finalized);
-    steps.finalized.scrollIntoView({ behavior: "smooth" });
-    toast("✅ Prompt approved and finalized!", "success");
-  } catch (e) {
-    toast(`Approval failed: ${e.message}`, "error");
-  } finally {
-    setLoading(btn, false);
-  }
-});
-
-// ── Render finalized prompt ────────────────────────────────────────
-function renderFinalizedPrompt(sp) {
-  $("finalized-text").textContent = sp.raw_prompt_text;
-  $("finalized-json").textContent = JSON.stringify(sp, null, 2);
-}
-
-// ── Tabs ──────────────────────────────────────────────────────────
-document.querySelectorAll(".tab").forEach(tab => {
-  tab.addEventListener("click", () => {
-    const target = tab.dataset.tab;
-    document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
-    tab.classList.add("active");
-    document.querySelectorAll(".tab-panel").forEach(p => hide(p));
-    show($(`tab-${target}`));
-  });
-});
-
-// ── Copy buttons ──────────────────────────────────────────────────
-document.querySelectorAll(".btn-copy").forEach(btn => {
-  btn.addEventListener("click", () => {
-    const pre = $(btn.dataset.target);
-    if (!pre) return;
-    navigator.clipboard.writeText(pre.textContent).then(() => {
-      const orig = btn.textContent;
-      btn.textContent = "✓ Copied!";
-      setTimeout(() => (btn.textContent = orig), 1800);
-    });
-  });
+const show = el => el?.classList.remove("hidden");
+const hide = el => el?.classList.add("hidden");
+
+/* Custom Cursor */
+const dot = $("cursor-dot"), ring = $("cursor-ring");
+let mx=0,my=0,rx=0,ry=0;
+document.addEventListener("mousemove", e => {
+  mx=e.clientX; my=e.clientY;
+  dot.style.left=mx+"px"; dot.style.top=my+"px";
 });
-
-// ── Export ────────────────────────────────────────────────────────
-async function exportPrompt(format) {
-  if (!currentPromptId) return;
-  try {
-    const data = await apiFetch("/api/export", "POST", {
-      prompt_id: currentPromptId,
-      export_format: format,
-    });
-    const content  = typeof data.data === "string" ? data.data : JSON.stringify(data.data, null, 2);
-    const ext      = format === "text" ? "txt" : "json";
-    downloadFile(`prompt_${currentPromptId.slice(0,8)}.${ext}`, content);
-    toast(`⬇ Exported as .${ext}`, "success");
-  } catch (e) {
-    toast(`Export failed: ${e.message}`, "error");
-  }
-}
-
-$("btn-export-json").addEventListener("click", () => exportPrompt("json"));
-$("btn-export-txt").addEventListener("click",  () => exportPrompt("text"));
-
-function downloadFile(filename, content) {
-  const a = document.createElement("a");
-  a.href = URL.createObjectURL(new Blob([content], { type: "text/plain" }));
-  a.download = filename;
-  a.click();
-  URL.revokeObjectURL(a.href);
-}
-
-// ── Refine ────────────────────────────────────────────────────────
-$("btn-refine").addEventListener("click", () => {
-  show(steps.refine);
-  steps.refine.scrollIntoView({ behavior: "smooth" });
-});
-$("btn-cancel-refine").addEventListener("click", () => hide(steps.refine));
-
-$("btn-submit-refine").addEventListener("click", async () => {
-  if (!currentPromptId) return;
-  const feedback = $("feedback").value.trim();
-  if (!feedback) { toast("Please enter feedback.", "error"); return; }
-
-  const btn = $("btn-submit-refine");
-  setLoading(btn, true);
-  try {
-    const data = await apiFetch("/api/refine", "POST", {
-      prompt_id: currentPromptId,
-      feedback,
-      provider: $("provider").value,
-      api_key: $("api-key").value.trim() || null,
-    });
-
-    currentPromptId = data.prompt_id;
-    renderManifest(data.manifest);
-    hide(steps.finalized);
-    hide(steps.refine);
-    show(steps.manifest);
-    $("feedback").value = "";
-    steps.manifest.scrollIntoView({ behavior: "smooth" });
-    toast(`🔁 Refined to v${data.manifest.version} — please re-approve.`, "success");
-  } catch (e) {
-    toast(`Refine failed: ${e.message}`, "error");
-  } finally {
-    setLoading(btn, false);
-  }
+(function animRing(){ rx+=(mx-rx)*.14; ry+=(my-ry)*.14;
+  ring.style.left=rx+"px"; ring.style.top=ry+"px"; requestAnimationFrame(animRing); })();
+document.querySelectorAll("button,a,select,textarea,input,summary").forEach(el=>{
+  el.addEventListener("mouseenter",()=>{ dot.style.width="14px";dot.style.height="14px";dot.style.background="var(--magenta)";ring.style.width="54px";ring.style.height="54px";ring.style.borderColor="rgba(247,37,133,.45)"; });
+  el.addEventListener("mouseleave",()=>{ dot.style.width="8px";dot.style.height="8px";dot.style.background="var(--cyan)";ring.style.width="36px";ring.style.height="36px";ring.style.borderColor="rgba(0,245,212,.45)"; });
 });
-
-// ── Reset / New ───────────────────────────────────────────────────
-function resetAll() {
-  currentPromptId = null;
-  $("instruction").value = "";
-  $("extra-context").value = "";
-  $("feedback").value = "";
-  Object.values(steps).forEach(hide);
-  show(steps.input);
-  window.scrollTo({ top: 0, behavior: "smooth" });
-}
-
-$("btn-reset").addEventListener("click", resetAll);
-$("btn-new").addEventListener("click",   resetAll);
-
-// ── History ────────────────────────────────────────────────────────
-$("btn-load-history").addEventListener("click", loadHistory);
-
-async function loadHistory() {
-  try {
-    const data = await apiFetch("/api/history");
-    const tbody = $("history-body");
-
-    if (data.total === 0) {
-      tbody.innerHTML = `<tr><td colspan="6" class="muted center">No prompts generated yet.</td></tr>`;
-      return;
-    }
-
-    tbody.innerHTML = data.entries.map(e => `
-      <tr>
-        <td><code>${e.prompt_id.slice(0, 8)}…</code></td>
-        <td>${escapeHtml(e.instruction.slice(0, 60))}${e.instruction.length > 60 ? "…" : ""}</td>
-        <td>v${e.version}</td>
-        <td><span class="status-badge status-${e.status}">${e.status}</span></td>
-        <td>${new Date(e.created_at).toLocaleString()}</td>
-        <td>
-          <button class="btn-sm btn-secondary" onclick="loadPromptById('${e.prompt_id}')">Load</button>
-          <button class="btn-sm btn-secondary" onclick="deletePrompt('${e.prompt_id}')">🗑</button>
-        </td>
-      </tr>`).join("");
-  } catch (e) {
-    toast(`Could not load history: ${e.message}`, "error");
-  }
-}
-
-window.loadPromptById = async function(id) {
-  try {
-    const manifest = await apiFetch(`/api/history/${id}`);
-    currentPromptId = manifest.prompt_id;
-    renderManifest(manifest);
-    show(steps.manifest);
-    steps.manifest.scrollIntoView({ behavior: "smooth" });
-    toast("Manifest loaded from history.", "success");
-  } catch (e) {
-    toast(`Load failed: ${e.message}`, "error");
-  }
-};
-
-window.deletePrompt = async function(id) {
-  if (!confirm("Delete this prompt from history?")) return;
-  try {
-    await apiFetch(`/api/history/${id}`, "DELETE");
-    toast("Prompt deleted.", "success");
-    loadHistory();
-  } catch (e) {
-    toast(`Delete failed: ${e.message}`, "error");
-  }
-};
-
-// ── Helpers ────────────────────────────────────────────────────────
-function escapeHtml(str) {
-  return String(str)
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;");
-}
-
-// ── Init ──────────────────────────────────────────────────────────
-loadHistory();

frontend/index.html

@@ -1,54 +1,129 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>PromptForge — Google AI Studio Prompt Generator</title>
-  <link rel="stylesheet" href="/static/style.css" />
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>PromptForge — Neural Prompt Generator</title>
+  <link rel="stylesheet" href="/static/style.css"/>
+  <meta name="description" content="Transform raw instructions into structured, ready-to-use prompts for Google AI Studio."/>
 </head>
 <body>
+
+<!-- ── Custom Cursor ─────────────────────────────────────────────── -->
+<div id="cursor-dot"></div>
+<div id="cursor-ring"></div>
+
+<!-- ── Background Layers ─────────────────────────────────────────── -->
+<div class="bg-mesh"></div>
+<div class="bg-grid"></div>
+<div class="orb orb-1"></div>
+<div class="orb orb-2"></div>
+<div class="orb orb-3"></div>
+
+<div id="app">
+
+  <!-- ── Header ──────────────────────────────────────────────────── -->
   <header>
     <div class="header-inner">
-      <div class="logo">⚙️ PromptForge</div>
-      <span class="tagline">Structured prompts for Google AI Studio</span>
+      <div class="logo-group">
+        <div class="logo-icon">⚙️</div>
+        <span class="logo-text">PromptForge</span>
+        <span class="logo-tag">v2.0</span>
+      </div>
+      <div class="header-meta">
+        <div class="status-pill">
+          <div class="status-dot"></div>
+          <span>ONLINE</span>
+        </div>
+        <a class="nav-link" href="/docs" target="_blank">⚡ API Docs</a>
+      </div>
     </div>
   </header>
 
   <main>
-    <!-- ── Step 0: Input ─────────────────────────────────────────── -->
+
+    <!-- ── Step Progress ─────────────────────────────────────────── -->
+    <div class="step-progress">
+      <div class="prog-step active" id="pstep-1">
+        <div class="prog-node">1</div>
+        <div class="prog-label">Input</div>
+      </div>
+      <div class="prog-line" id="pline-1"></div>
+      <div class="prog-step" id="pstep-2">
+        <div class="prog-node">2</div>
+        <div class="prog-label">Review</div>
+      </div>
+      <div class="prog-line" id="pline-2"></div>
+      <div class="prog-step" id="pstep-3">
+        <div class="prog-node">3</div>
+        <div class="prog-label">Finalize</div>
+      </div>
+      <div class="prog-line" id="pline-3"></div>
+      <div class="prog-step" id="pstep-4">
+        <div class="prog-node">4</div>
+        <div class="prog-label">Export</div>
+      </div>
+      <div class="prog-line" id="pline-4"></div>
+      <div class="prog-step" id="pstep-5">
+        <div class="prog-node">5</div>
+        <div class="prog-label">Refine</div>
+      </div>
+    </div>
+
+    <!-- ── STEP 1: Input ─────────────────────────────────────────── -->
     <section id="step-input" class="card">
-      <h2><span class="step-badge">STEP 1</span> Enter Your Instruction</h2>
+      <div class="card-header">
+        <h2>Enter Your Instruction</h2>
+        <span class="step-badge">STEP 01</span>
+      </div>
 
-      <label for="instruction">Raw instruction / task description</label>
-      <textarea id="instruction" rows="5"
-        placeholder="e.g. Generate a TypeScript React component with TailwindCSS and unit tests."></textarea>
+      <div class="info-banner">
+        <span class="info-icon">💡</span>
+        <span>Describe any task in plain English. PromptForge will transform it into a fully structured prompt ready for Google AI Studio.</span>
+      </div>
 
-      <label for="extra-context">Additional context (optional)</label>
-      <textarea id="extra-context" rows="2"
-        placeholder="e.g. The component should be accessible and support dark mode."></textarea>
+      <div class="field">
+        <label><span class="lbl-dot"></span> Instruction</label>
+        <textarea id="instruction" rows="5"
+          placeholder="e.g. Generate a TypeScript React component with TailwindCSS and unit tests."></textarea>
+      </div>
+
+      <div class="field">
+        <label><span class="lbl-dot"></span> Additional Context <span class="lbl-opt">optional</span></label>
+        <textarea id="extra-context" rows="2"
+          placeholder="e.g. Support dark mode, must be accessible (WCAG AA), use React hooks only."></textarea>
+      </div>
 
-      <div class="row-two">
-        <div class="field-group">
-          <label for="provider">AI Enhancement Provider</label>
+      <div class="input-grid">
+        <div class="field">
+          <label><span class="lbl-dot"></span> AI Enhancement</label>
           <select id="provider">
-            <option value="none">None (local only)</option>
-            <option value="google">Google Gemini</option>
-            <option value="huggingface">Hugging Face</option>
+            <option value="none">⚡ Local Engine (no API)</option>
+            <option value="google">🌐 Google Gemini</option>
+            <option value="huggingface">🤗 Hugging Face</option>
           </select>
+          <div class="field-note">Optionally enhance via AI after generation.</div>
         </div>
-        <div class="field-group" id="api-key-group" style="display:none;">
-          <label for="api-key">API Key <span class="muted">(never stored)</span></label>
-          <input id="api-key" type="password" placeholder="Paste your API key here..." />
+        <div class="field hidden" id="api-key-group">
+          <label><span class="lbl-dot"></span> API Key <span class="lbl-opt">never stored</span></label>
+          <input type="password" id="api-key" placeholder="Paste your API key here…"/>
+          <div class="field-note">Transmitted securely, never logged.</div>
         </div>
       </div>
 
-      <button id="btn-generate" class="btn-primary">⚡ Generate Prompt Manifest</button>
+      <div class="action-row">
+        <button id="btn-generate" class="btn-primary">⚡ Generate Prompt Manifest</button>
+      </div>
     </section>
 
-    <!-- ── Step 1: Manifest preview ──────────────────────────────── -->
-    <section id="step-manifest" class="card hidden">
-      <h2><span class="step-badge">STEP 2</span> Review Manifest</h2>
-      <p class="muted">Review the generated manifest. Edit any field below, then approve.</p>
+    <!-- ── STEP 2: Manifest Review ───────────────────────────────── -->
+    <section id="step-manifest" class="card hidden fade-in">
+      <div class="card-header">
+        <h2>Review &amp; Edit Manifest</h2>
+        <span class="step-badge">STEP 02</span>
+      </div>
+
+      <p class="muted">Every field is editable. Tweak anything before approving — the final prompt will regenerate automatically.</p>
 
       <div id="manifest-grid" class="manifest-grid"></div>
 
@@ -59,71 +134,108 @@
 
       <div class="action-row">
         <button id="btn-approve" class="btn-primary">✅ Approve &amp; Finalize</button>
-        <button id="btn-reset" class="btn-secondary">↩ Start Over</button>
+        <button id="btn-reset"   class="btn-secondary">↩ Start Over</button>
       </div>
     </section>
 
-    <!-- ── Step 2: Finalized prompt ──────────────────────────────── -->
-    <section id="step-finalized" class="card hidden">
-      <h2><span class="step-badge">STEP 3</span> Finalized Prompt</h2>
-      <p class="muted">Your structured prompt is ready. Copy it directly into Google AI Studio.</p>
+    <!-- ── STEP 3: Finalized Prompt ──────────────────────────────── -->
+    <section id="step-finalized" class="card hidden fade-in">
+      <div class="card-header">
+        <h2>Finalized Prompt</h2>
+        <span class="step-badge">STEP 03</span>
+      </div>
+
+      <p class="muted">Your structured prompt is ready. Copy it directly into Google AI Studio or export it below.</p>
 
       <div class="tab-bar">
         <button class="tab active" data-tab="text">📄 Plain Text</button>
-        <button class="tab" data-tab="json">{ } JSON</button>
+        <button class="tab"        data-tab="json">{ } JSON</button>
       </div>
 
       <div id="tab-text" class="tab-panel">
         <pre id="finalized-text"></pre>
-        <button class="btn-copy" data-target="finalized-text">📋 Copy</button>
+        <button class="btn-copy" data-target="finalized-text">📋 Copy to Clipboard</button>
       </div>
       <div id="tab-json" class="tab-panel hidden">
         <pre id="finalized-json"></pre>
-        <button class="btn-copy" data-target="finalized-json">📋 Copy</button>
+        <button class="btn-copy" data-target="finalized-json">📋 Copy to Clipboard</button>
       </div>
 
+      <div class="divider"></div>
+
       <div class="action-row">
         <button id="btn-export-json" class="btn-secondary">⬇ Export JSON</button>
-        <button id="btn-export-txt" class="btn-secondary">⬇ Export Text</button>
-        <button id="btn-refine" class="btn-secondary">🔁 Refine with Feedback</button>
-        <button id="btn-new" class="btn-primary">➕ New Prompt</button>
+        <button id="btn-export-txt"  class="btn-secondary">⬇ Export Text</button>
+        <button id="btn-refine"      class="btn-secondary">🔁 Refine with Feedback</button>
+        <button id="btn-new"         class="btn-primary">➕ New Prompt</button>
       </div>
     </section>
 
-    <!-- ── Refine panel ───────────────────────────────────────────── -->
-    <section id="step-refine" class="card hidden">
-      <h2><span class="step-badge">STEP 5</span> Refine Prompt</h2>
-      <label for="feedback">Your feedback / change requests</label>
-      <textarea id="feedback" rows="3"
-        placeholder="e.g. Add accessibility constraints. Use React hooks only."></textarea>
+    <!-- ── STEP 5: Refine ────────────────────────────────────────── -->
+    <section id="step-refine" class="card hidden fade-in">
+      <div class="card-header">
+        <h2>Refine Prompt</h2>
+        <span class="step-badge">STEP 05</span>
+      </div>
+      <p class="muted">Describe what to change. PromptForge will generate a new version (v+1) of the manifest for re-approval.</p>
+
+      <div class="field">
+        <label><span class="lbl-dot"></span> Your Feedback</label>
+        <textarea id="feedback" rows="3"
+          placeholder="e.g. Add ARIA labels, keyboard navigation, and a dark-mode variant prop."></textarea>
+      </div>
+
       <div class="action-row">
         <button id="btn-submit-refine" class="btn-primary">🔁 Submit Refinement</button>
         <button id="btn-cancel-refine" class="btn-secondary">Cancel</button>
       </div>
     </section>
 
-    <!-- ── History ────────────────────────────────────────────────── -->
+    <!-- ── History ───────────────────────────────────────────────── -->
     <section id="section-history" class="card">
-      <h2>📜 Prompt History</h2>
-      <button id="btn-load-history" class="btn-secondary btn-sm">Refresh History</button>
-      <table id="history-table">
-        <thead>
-          <tr><th>ID</th><th>Instruction</th><th>Version</th><th>Status</th><th>Date</th><th></th></tr>
-        </thead>
-        <tbody id="history-body">
-          <tr><td colspan="6" class="muted center">Click "Refresh History" to load.</td></tr>
-        </tbody>
-      </table>
+      <div class="card-header">
+        <h2>Prompt History</h2>
+        <button id="btn-load-history" class="btn-secondary btn-sm">↺ Refresh</button>
+      </div>
+
+      <div class="table-wrap">
+        <table id="history-table">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Instruction</th>
+              <th>Ver</th>
+              <th>Status</th>
+              <th>Date</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody id="history-body">
+            <tr><td class="empty-msg" colspan="6">Click ↺ Refresh to load history.</td></tr>
+          </tbody>
+        </table>
+      </div>
     </section>
-  </main>
 
-  <!-- Toast notification -->
-  <div id="toast" class="toast hidden"></div>
+  </main>
 
+  <!-- ── Footer ──────────────────────────────────────────────────── -->
   <footer>
-    <p>PromptForge v1.0 · <a href="/docs" target="_blank">API Docs</a> · Built with FastAPI + Vanilla JS</p>
+    <div class="footer-inner">
+      <span class="footer-copy">© 2025 PromptForge — Neural Prompt Generator</span>
+      <div class="footer-links">
+        <a href="/docs" target="_blank">API Docs</a>
+        <a href="/redoc" target="_blank">ReDoc</a>
+        <a href="/health" target="_blank">Health</a>
+      </div>
+    </div>
   </footer>
 
-  <script src="/static/client.js"></script>
+</div><!-- #app -->
+
+<!-- ── Toast container ─────────────────────────────────────────── -->
+<div id="toast-container"></div>
+
+<script src="/static/client.js"></script>
 </body>
 </html>

frontend/style.css

@@ -1,284 +1,199 @@
-/* PromptForge — style.css */
+/* ═══════════════════════════════════════════════════════════════
+   PROMPTFORGE — Neural Forge UI v2.0
+   Aesthetic: Deep Space Cyberpunk + Glassmorphism
+   ═══════════════════════════════════════════════════════════════ */
 
-:root {
-  --bg: #0f1117;
-  --surface: #1a1d27;
-  --surface2: #22263a;
-  --border: #2e3350;
-  --accent: #5b8df6;
-  --accent-hover: #3d6fe0;
-  --success: #34d399;
-  --warning: #fbbf24;
-  --danger: #f87171;
-  --text: #e4e7f0;
-  --text-muted: #7c84a3;
-  --radius: 10px;
-  --font: 'Inter', system-ui, sans-serif;
-  --mono: 'Fira Code', 'Cascadia Code', monospace;
-}
-
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--font);
-  font-size: 15px;
-  line-height: 1.6;
-  min-height: 100vh;
-}
-
-/* ── Header ──────────────────────────────────────────────────── */
-header {
-  background: linear-gradient(135deg, #1e2336 0%, #151824 100%);
-  border-bottom: 1px solid var(--border);
-  padding: 14px 24px;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  backdrop-filter: blur(6px);
-}
-.header-inner { display: flex; align-items: center; gap: 16px; max-width: 960px; margin: 0 auto; }
-.logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px; }
-.tagline { color: var(--text-muted); font-size: 0.85rem; }
-
-/* ── Main layout ──────────────────────────────────────────────── */
-main {
-  max-width: 960px;
-  margin: 32px auto;
-  padding: 0 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-/* ── Cards ──────────────────────────────────────────────────────── */
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 28px 30px;
-}
-.card h2 {
-  font-size: 1.05rem;
-  font-weight: 600;
-  margin-bottom: 18px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.step-badge {
-  background: var(--accent);
-  color: #fff;
-  font-size: 0.65rem;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  padding: 3px 8px;
-  border-radius: 20px;
-}
-
-/* ── Form elements ─────────────────────────────────────────────── */
-label {
-  display: block;
-  margin-bottom: 6px;
-  font-size: 0.875rem;
-  color: var(--text-muted);
-  font-weight: 500;
-}
-textarea, input[type="password"], select {
-  width: 100%;
-  background: var(--surface2);
-  border: 1px solid var(--border);
-  border-radius: 7px;
-  color: var(--text);
-  font-family: var(--font);
-  font-size: 0.9rem;
-  padding: 10px 14px;
-  resize: vertical;
-  transition: border-color 0.2s;
-  margin-bottom: 16px;
-}
-textarea:focus, input:focus, select:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-select option { background: var(--surface2); }
-
-.row-two {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-}
-.field-group { display: flex; flex-direction: column; }
-.field-group label { margin-bottom: 6px; }
-.field-group textarea,
-.field-group input,
-.field-group select { margin-bottom: 0; }
-
-/* ── Buttons ────────────────────────────────────────────────────── */
-.btn-primary, .btn-secondary {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border: none;
-  border-radius: 7px;
-  cursor: pointer;
-  font-family: var(--font);
-  font-size: 0.9rem;
-  font-weight: 600;
-  padding: 10px 20px;
-  transition: background 0.2s, transform 0.1s;
-}
-.btn-primary {
-  background: var(--accent);
-  color: #fff;
-}
-.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
-.btn-primary:active { transform: translateY(0); }
-
-.btn-secondary {
-  background: var(--surface2);
-  color: var(--text);
-  border: 1px solid var(--border);
-}
-.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=Outfit:wght@300;400;500;600&display=swap');
 
-.btn-sm { font-size: 0.8rem; padding: 7px 14px; }
-
-.btn-copy {
-  background: var(--surface2);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 0.8rem;
-  margin-top: 8px;
-  padding: 6px 14px;
-  transition: color 0.2s;
-}
-.btn-copy:hover { color: var(--success); border-color: var(--success); }
-
-.action-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 20px;
-}
-
-/* ── Manifest grid ──────────────────────────────────────────────── */
-.manifest-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin-bottom: 20px;
-}
-.manifest-field { display: flex; flex-direction: column; }
-.manifest-field.full { grid-column: 1 / -1; }
-.manifest-field label { font-size: 0.78rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
-.manifest-field textarea,
-.manifest-field input {
-  margin-bottom: 0;
-  font-size: 0.85rem;
-  min-height: 70px;
-}
-
-/* ── Tabs ───────────────────────────────────────────────────────── */
-.tab-bar { display: flex; gap: 4px; margin-bottom: 14px; }
-.tab {
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-family: var(--font);
-  font-size: 0.85rem;
-  padding: 7px 16px;
-  transition: all 0.2s;
-}
-.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
-
-/* ── Pre / code blocks ──────────────────────────────────────────── */
-pre {
-  background: #0a0c14;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: #c9d1d9;
-  font-family: var(--mono);
-  font-size: 0.82rem;
-  line-height: 1.5;
-  overflow-x: auto;
-  padding: 16px 18px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-details summary {
-  cursor: pointer;
-  color: var(--text-muted);
-  font-size: 0.85rem;
-  margin-bottom: 10px;
-  user-select: none;
-}
-details[open] summary { color: var(--text); }
-
-/* ── History table ──────────────────────────────────────────────── */
-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.85rem; }
-th { color: var(--text-muted); font-weight: 600; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
-td { padding: 9px 10px; border-bottom: 1px solid #1e2236; vertical-align: middle; }
-tr:hover td { background: var(--surface2); }
-td.center { text-align: center; }
-
-.status-badge {
-  border-radius: 20px;
-  font-size: 0.72rem;
-  font-weight: 700;
-  letter-spacing: 0.3px;
-  padding: 3px 9px;
-  text-transform: uppercase;
-}
-.status-pending  { background: #2d2a1a; color: var(--warning); }
-.status-approved { background: #162820; color: var(--success); }
-.status-exported { background: #1a1f36; color: var(--accent); }
-
-/* ── Utility ────────────────────────────────────────────────────── */
-.hidden { display: none !important; }
-.muted { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 12px; }
-
-/* ── Toast ──────────────────────────────────────────────────────── */
-.toast {
-  position: fixed;
-  bottom: 28px;
-  right: 28px;
-  background: var(--surface2);
-  border: 1px solid var(--border);
-  border-radius: 9px;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
-  color: var(--text);
-  font-size: 0.875rem;
-  font-weight: 500;
-  max-width: 340px;
-  padding: 13px 18px;
-  z-index: 999;
-  animation: slideIn 0.25s ease;
-}
-.toast.success { border-color: var(--success); color: var(--success); }
-.toast.error   { border-color: var(--danger);  color: var(--danger);  }
-@keyframes slideIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
-
-/* ── Footer ──────────────────────────────────────────────────────── */
-footer {
-  text-align: center;
-  color: var(--text-muted);
-  font-size: 0.8rem;
-  padding: 24px 0 32px;
-}
-footer a { color: var(--accent); text-decoration: none; }
-footer a:hover { text-decoration: underline; }
-
-/* ── Responsive ──────────────────────────────────────────────────── */
-@media (max-width: 640px) {
-  .row-two, .manifest-grid { grid-template-columns: 1fr; }
-  .manifest-field.full { grid-column: 1; }
-  .card { padding: 20px 16px; }
-  main { margin: 16px auto; }
-}
+:root {
+  --void:#020408; --deep:#060c18;
+  --surface-1:rgba(8,15,32,.85); --surface-2:rgba(12,22,48,.75); --surface-3:rgba(16,28,58,.6);
+  --cyan:#00f5d4; --cyan-dim:rgba(0,245,212,.12); --cyan-glow:rgba(0,245,212,.4);
+  --magenta:#f72585; --magenta-dim:rgba(247,37,133,.12);
+  --violet:#7209b7; --violet-dim:rgba(114,9,183,.18); --gold:#ffd60a;
+  --text:#e8edf8; --text-soft:#a8b4cc; --text-muted:#5a6a8a; --text-dim:#3a4a6a;
+  --border:rgba(0,245,212,.1); --border-hot:rgba(0,245,212,.32);
+  --font-display:'Syne',sans-serif; --font-body:'Outfit',sans-serif; --font-mono:'DM Mono',monospace;
+  --radius-sm:8px; --radius-md:14px; --radius-lg:20px;
+  --shadow-card:0 0 0 1px rgba(0,245,212,.07),0 24px 64px rgba(0,0,0,.65),0 4px 16px rgba(0,0,0,.4);
+  --shadow-hover:0 0 0 1px rgba(0,245,212,.22),0 32px 80px rgba(0,0,0,.7),0 0 40px rgba(0,245,212,.05);
+  --glow-cyan:0 0 24px rgba(0,245,212,.55),0 0 60px rgba(0,245,212,.2);
+}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--cyan-dim) transparent}
+::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--cyan-dim);border-radius:4px}
+body{background:var(--void);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.65;min-height:100vh;overflow-x:hidden;cursor:none}
+@media(max-width:680px){body{cursor:auto}button{cursor:pointer!important}}
+
+/* Cursor */
+#cursor-dot{position:fixed;width:8px;height:8px;background:var(--cyan);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;box-shadow:var(--glow-cyan)}
+#cursor-ring{position:fixed;width:36px;height:36px;border:1px solid rgba(0,245,212,.45);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:all .1s ease}
+@media(max-width:680px){#cursor-dot,#cursor-ring{display:none}}
+
+/* Backgrounds */
+.bg-mesh{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 50% at 15% 15%,rgba(0,245,212,.065) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 85% 85%,rgba(247,37,133,.05) 0%,transparent 60%),radial-gradient(ellipse 50% 60% at 60% 5%,rgba(114,9,183,.04) 0%,transparent 55%);animation:meshAnim 22s ease-in-out infinite alternate}
+@keyframes meshAnim{0%{filter:hue-rotate(0deg) brightness(1)}50%{filter:hue-rotate(18deg) brightness(1.08)}100%{filter:hue-rotate(-8deg) brightness(.96)}}
+.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(0,245,212,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,245,212,.025) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 100% 80% at 50% 0%,black 30%,transparent 75%)}
+.orb{position:fixed;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0;animation:orbFloat 28s ease-in-out infinite}
+.orb-1{width:700px;height:700px;background:radial-gradient(circle,rgba(0,245,212,.055) 0%,transparent 70%);top:-250px;left:-250px;animation-duration:32s}
+.orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(247,37,133,.045) 0%,transparent 70%);bottom:-150px;right:-150px;animation-duration:24s;animation-delay:-12s}
+.orb-3{width:400px;height:400px;background:radial-gradient(circle,rgba(114,9,183,.038) 0%,transparent 70%);top:45%;left:50%;animation-duration:36s;animation-delay:-20s}
+@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(70px,-50px) scale(1.12)}66%{transform:translate(-50px,70px) scale(.9)}}
+
+/* Layout */
+#app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
+main{max-width:900px;width:100%;margin:0 auto;padding:20px 20px 80px;display:flex;flex-direction:column;gap:20px;flex:1}
+
+/* Header */
+header{position:sticky;top:0;z-index:100;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);background:rgba(2,4,8,.88);border-bottom:1px solid rgba(0,245,212,.07)}
+.header-inner{max-width:900px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
+.logo-group{display:flex;align-items:center;gap:12px}
+.logo-icon{width:40px;height:40px;flex-shrink:0;background:linear-gradient(135deg,var(--cyan),var(--violet));border-radius:11px;display:grid;place-items:center;font-size:18px;box-shadow:0 0 22px rgba(0,245,212,.28);animation:logoPulse 4s ease-in-out infinite}
+@keyframes logoPulse{0%,100%{box-shadow:0 0 22px rgba(0,245,212,.28)}50%{box-shadow:0 0 40px rgba(0,245,212,.5),0 0 80px rgba(0,245,212,.1)}}
+.logo-text{font-family:var(--font-display);font-size:1.25rem;font-weight:800;letter-spacing:-.3px;background:linear-gradient(90deg,var(--cyan),#b8f0e6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
+.logo-tag{font-family:var(--font-mono);font-size:.6rem;color:var(--cyan);background:var(--cyan-dim);border:1px solid rgba(0,245,212,.18);padding:2px 8px;border-radius:20px;letter-spacing:1px}
+.header-meta{display:flex;align-items:center;gap:14px}
+.status-pill{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);background:rgba(0,245,212,.04);border:1px solid var(--border);padding:5px 12px;border-radius:20px}
+.status-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:blink 2.2s ease-in-out infinite}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
+.nav-link{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);text-decoration:none;display:flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid var(--border);border-radius:6px;transition:all .2s}
+.nav-link:hover{color:var(--cyan);border-color:var(--border-hot);background:var(--cyan-dim)}
+
+/* Step Progress */
+.step-progress{display:flex;align-items:center;justify-content:center;padding:18px 0 2px;gap:0}
+.prog-step{display:flex;flex-direction:column;align-items:center;gap:5px}
+.prog-node{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface-1);display:grid;place-items:center;font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);transition:all .4s cubic-bezier(.34,1.56,.64,1);position:relative;z-index:1}
+.prog-step.active .prog-node{border-color:var(--cyan);background:var(--cyan-dim);color:var(--cyan);box-shadow:0 0 18px rgba(0,245,212,.4);transform:scale(1.18)}
+.prog-step.done .prog-node{border-color:var(--cyan);background:var(--cyan);color:var(--void);font-weight:700}
+.prog-label{font-size:.6rem;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.5px;text-transform:uppercase}
+.prog-step.active .prog-label{color:var(--cyan)}.prog-step.done .prog-label{color:var(--text-muted)}
+.prog-line{width:55px;height:1px;background:var(--border);margin-bottom:20px;position:relative;overflow:hidden}
+.prog-line::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--magenta));transform:scaleX(0);transform-origin:left;transition:transform .6s ease}
+.prog-line.filled::after{transform:scaleX(1)}
+
+/* Cards */
+.card{backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 34px;box-shadow:var(--shadow-card);position:relative;overflow:hidden;transition:box-shadow .4s,border-color .4s,transform .3s;animation:cardIn .5s cubic-bezier(.22,1,.36,1) both}
+@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
+.card:hover{box-shadow:var(--shadow-hover);border-color:rgba(0,245,212,.16)}
+.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,245,212,.5),transparent);opacity:.6}
+.card::after{content:'';position:absolute;top:-50px;right:-50px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(0,245,212,.035) 0%,transparent 70%);pointer-events:none}
+.card-header{display:flex;align-items:center;gap:12px;margin-bottom:26px}
+.card-header h2{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text);letter-spacing:-.2px;flex:1}
+.step-badge{font-family:var(--font-mono);font-size:.58rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--void);background:linear-gradient(90deg,var(--cyan),#00c4a8);padding:3px 10px;border-radius:20px;box-shadow:0 0 12px rgba(0,245,212,.38)}
+
+/* Forms */
+.field{margin-bottom:20px}
+label{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px}
+.lbl-dot{width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
+.lbl-opt{color:var(--text-dim);font-size:.62rem;margin-left:auto;letter-spacing:.5px;text-transform:none}
+textarea,input[type="password"],select{width:100%;background:rgba(4,9,20,.85);border:1px solid rgba(0,245,212,.1);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-body);font-size:.9rem;padding:12px 16px;resize:vertical;outline:none;transition:border-color .3s,box-shadow .3s,background .3s;box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 1px 4px rgba(0,0,0,.35)}
+textarea:focus,input:focus,select:focus{border-color:var(--cyan);background:rgba(0,245,212,.025);box-shadow:0 0 0 3px rgba(0,245,212,.07),0 0 20px rgba(0,245,212,.08)}
+textarea::placeholder,input::placeholder{color:var(--text-dim);font-style:italic}
+textarea{min-height:110px;line-height:1.7}
+select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5.5 6L10 1' stroke='%2300f5d4' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
+select option{background:#06101e}
+.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
+.field-note{font-size:.72rem;color:var(--text-dim);margin-top:5px;font-family:var(--font-mono)}
+
+/* Buttons */
+button{cursor:none}
+.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--radius-md);font-family:var(--font-display);font-size:.9rem;font-weight:700;letter-spacing:.3px;padding:13px 28px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--cyan) 0%,#00d4b4 40%,#00a88e 70%,var(--violet) 100%);background-size:250% 250%;color:var(--void);animation:gradFlow 5s ease infinite;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
+@keyframes gradFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
+.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);opacity:0;transition:opacity .3s}
+.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg)}
+.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 32px var(--cyan-glow),0 0 60px rgba(0,245,212,.12)}
+.btn-primary:hover::before{opacity:1}
+.btn-primary:hover::after{animation:shimmer .65s ease forwards}
+@keyframes shimmer{to{left:150%}}
+.btn-primary:active{transform:translateY(0) scale(.99)}
+.btn-primary:disabled{opacity:.6;transform:none;cursor:not-allowed;animation:none}
+.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);color:var(--text-soft);font-family:var(--font-body);font-size:.875rem;font-weight:500;padding:11px 22px;transition:all .25s;backdrop-filter:blur(8px);position:relative;overflow:hidden}
+.btn-secondary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--cyan-dim),transparent);opacity:0;transition:opacity .3s}
+.btn-secondary:hover{border-color:var(--border-hot);color:var(--cyan);transform:translateY(-1px);box-shadow:0 4px 18px rgba(0,245,212,.1)}
+.btn-secondary:hover::before{opacity:1}
+.btn-danger:hover{border-color:var(--magenta);color:var(--magenta);background:var(--magenta-dim);box-shadow:0 4px 18px rgba(247,37,133,.12)}
+.btn-sm{font-size:.76rem;padding:6px 13px;border-radius:var(--radius-sm)}
+.action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
+.btn-copy{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px;background:var(--surface-3);color:var(--text-muted);font-family:var(--font-mono);font-size:.73rem;padding:7px 14px;margin-top:10px;transition:all .25s}
+.btn-copy:hover{color:var(--cyan);border-color:var(--border-hot);background:var(--cyan-dim)}
+.btn-copy.copied{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-dim)}
+
+/* Manifest */
+.manifest-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
+.manifest-field{display:flex;flex-direction:column;gap:5px}
+.manifest-field.full{grid-column:1/-1}
+.manifest-field label{font-size:.65rem;letter-spacing:1.5px;color:var(--cyan)}
+.manifest-field textarea,.manifest-field input{font-size:.84rem;min-height:62px;border-radius:var(--radius-sm);padding:10px 13px}
+
+/* Details */
+details{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:border-color .3s}
+details[open]{border-color:rgba(0,245,212,.18)}
+details summary{padding:11px 16px;cursor:none;font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);background:var(--surface-2);display:flex;align-items:center;gap:8px;list-style:none;user-select:none;transition:all .2s}
+details summary::-webkit-details-marker{display:none}
+details summary::before{content:'▶';font-size:.5rem;color:var(--cyan);transition:transform .3s}
+details[open] summary::before{transform:rotate(90deg)}
+details summary:hover{color:var(--text);background:var(--surface-3)}
+
+/* Pre */
+pre{background:rgba(2,5,12,.92);border:1px solid rgba(0,245,212,.06);border-radius:var(--radius-md);color:#a0d0c4;font-family:var(--font-mono);font-size:.79rem;line-height:1.6;overflow:auto;padding:20px;white-space:pre-wrap;word-break:break-word;max-height:420px;position:relative}
+pre::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,245,212,.25),transparent)}
+
+/* Tabs */
+.tab-bar{display:flex;gap:4px;margin-bottom:16px;background:rgba(4,9,20,.7);padding:4px;border-radius:var(--radius-md);border:1px solid var(--border);width:fit-content}
+.tab{border:none;border-radius:9px;background:none;color:var(--text-muted);font-family:var(--font-mono);font-size:.76rem;letter-spacing:.5px;padding:7px 18px;transition:all .25s}
+.tab.active{background:linear-gradient(135deg,rgba(0,245,212,.18),rgba(0,245,212,.06));color:var(--cyan);border:1px solid rgba(0,245,212,.22);box-shadow:0 0 14px rgba(0,245,212,.14)}
+.tab:not(.active):hover{color:var(--text-soft)}
+
+/* Table */
+.table-wrap{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
+table{width:100%;border-collapse:collapse;font-size:.82rem}
+thead{background:rgba(0,245,212,.03);border-bottom:1px solid var(--border)}
+th{padding:11px 15px;text-align:left;font-family:var(--font-mono);font-size:.64rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);font-weight:400}
+td{padding:11px 15px;border-bottom:1px solid rgba(0,245,212,.03);vertical-align:middle;color:var(--text-soft);transition:background .2s}
+tr:last-child td{border-bottom:none}
+tbody tr:hover td{background:rgba(0,245,212,.025)}
+td code{font-family:var(--font-mono);font-size:.76rem;color:var(--cyan);background:var(--cyan-dim);padding:2px 8px;border-radius:4px}
+td.empty-msg{padding:36px;text-align:center;color:var(--text-dim);font-style:italic}
+
+/* Badges */
+.badge{display:inline-flex;align-items:center;gap:5px;border-radius:20px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px}
+.badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
+.badge-pending{background:rgba(255,214,10,.1);color:var(--gold);border:1px solid rgba(255,214,10,.2)}
+.badge-pending::before{background:var(--gold);box-shadow:0 0 5px var(--gold)}
+.badge-approved{background:rgba(0,245,212,.1);color:var(--cyan);border:1px solid rgba(0,245,212,.2)}
+.badge-approved::before{background:var(--cyan);box-shadow:0 0 5px var(--cyan)}
+.badge-exported{background:rgba(247,37,133,.1);color:var(--magenta);border:1px solid rgba(247,37,133,.2)}
+.badge-exported::before{background:var(--magenta);box-shadow:0 0 5px var(--magenta)}
+
+/* Info banner */
+.info-banner{display:flex;align-items:flex-start;gap:11px;background:rgba(0,245,212,.04);border:1px solid rgba(0,245,212,.1);border-radius:var(--radius-md);padding:13px 16px;font-size:.83rem;color:var(--text-soft);margin-bottom:20px}
+.info-icon{font-size:15px;flex-shrink:0;margin-top:1px}
+.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:22px 0}
+
+/* Toasts */
+#toast-container{position:fixed;bottom:26px;right:26px;z-index:9990;display:flex;flex-direction:column;gap:9px;pointer-events:none}
+.toast{pointer-events:all;backdrop-filter:blur(22px);background:rgba(6,12,24,.96);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 8px 36px rgba(0,0,0,.55);display:flex;align-items:center;gap:11px;font-size:.84rem;max-width:360px;padding:13px 16px;animation:toastIn .35s cubic-bezier(.22,1,.36,1) both}
+.toast.leaving{animation:toastOut .3s ease forwards}
+.toast-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex-shrink:0}
+.toast.success{border-color:rgba(0,245,212,.22)}.toast.success .toast-icon{background:var(--cyan-dim)}
+.toast.error{border-color:rgba(247,37,133,.22)}.toast.error .toast-icon{background:var(--magenta-dim)}
+@keyframes toastIn{from{opacity:0;transform:translateX(16px) scale(.96)}to{opacity:1;transform:none}}
+@keyframes toastOut{to{opacity:0;transform:translateX(16px) scale(.96);max-height:0;padding:0;overflow:hidden}}
+
+/* Footer */
+footer{position:relative;z-index:1;border-top:1px solid rgba(0,245,212,.05);padding:22px 20px}
+.footer-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
+.footer-copy{font-family:var(--font-mono);font-size:.7rem;color:var(--text-dim)}
+.footer-links{display:flex;gap:16px}
+.footer-links a{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);text-decoration:none;transition:color .2s}
+.footer-links a:hover{color:var(--cyan)}
+
+/* Utility */
+.hidden{display:none!important}
+.muted{color:var(--text-muted);font-size:.84rem;margin-bottom:14px;line-height:1.55}
+.fade-in{animation:fadeIn .45s cubic-bezier(.22,1,.36,1) both}
+@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
+
+/* Responsive */
+@media(max-width:680px){.input-grid,.manifest-grid{grid-template-columns:1fr}.manifest-field.full{grid-column:1}.card{padding:22px 18px}main{padding:14px 14px 60px}.prog-line{width:28px}.footer-inner{flex-direction:column;align-items:center}}
+@media(max-width:420px){.header-meta{display:none}}

frontend/style.css.bak

@@ -0,0 +1,284 @@
+/* PromptForge — style.css */
+
+:root {
+  --bg: #0f1117;
+  --surface: #1a1d27;
+  --surface2: #22263a;
+  --border: #2e3350;
+  --accent: #5b8df6;
+  --accent-hover: #3d6fe0;
+  --success: #34d399;
+  --warning: #fbbf24;
+  --danger: #f87171;
+  --text: #e4e7f0;
+  --text-muted: #7c84a3;
+  --radius: 10px;
+  --font: 'Inter', system-ui, sans-serif;
+  --mono: 'Fira Code', 'Cascadia Code', monospace;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 15px;
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+/* ── Header ──────────────────────────────────────────────────── */
+header {
+  background: linear-gradient(135deg, #1e2336 0%, #151824 100%);
+  border-bottom: 1px solid var(--border);
+  padding: 14px 24px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(6px);
+}
+.header-inner { display: flex; align-items: center; gap: 16px; max-width: 960px; margin: 0 auto; }
+.logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px; }
+.tagline { color: var(--text-muted); font-size: 0.85rem; }
+
+/* ── Main layout ──────────────────────────────────────────────── */
+main {
+  max-width: 960px;
+  margin: 32px auto;
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* ── Cards ──────────────────────────────────────────────────────── */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 28px 30px;
+}
+.card h2 {
+  font-size: 1.05rem;
+  font-weight: 600;
+  margin-bottom: 18px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.step-badge {
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  padding: 3px 8px;
+  border-radius: 20px;
+}
+
+/* ── Form elements ─────────────────────────────────────────────── */
+label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+textarea, input[type="password"], select {
+  width: 100%;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 0.9rem;
+  padding: 10px 14px;
+  resize: vertical;
+  transition: border-color 0.2s;
+  margin-bottom: 16px;
+}
+textarea:focus, input:focus, select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+select option { background: var(--surface2); }
+
+.row-two {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+.field-group { display: flex; flex-direction: column; }
+.field-group label { margin-bottom: 6px; }
+.field-group textarea,
+.field-group input,
+.field-group select { margin-bottom: 0; }
+
+/* ── Buttons ────────────────────────────────────────────────────── */
+.btn-primary, .btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: none;
+  border-radius: 7px;
+  cursor: pointer;
+  font-family: var(--font);
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding: 10px 20px;
+  transition: background 0.2s, transform 0.1s;
+}
+.btn-primary {
+  background: var(--accent);
+  color: #fff;
+}
+.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
+.btn-primary:active { transform: translateY(0); }
+
+.btn-secondary {
+  background: var(--surface2);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
+
+.btn-sm { font-size: 0.8rem; padding: 7px 14px; }
+
+.btn-copy {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.8rem;
+  margin-top: 8px;
+  padding: 6px 14px;
+  transition: color 0.2s;
+}
+.btn-copy:hover { color: var(--success); border-color: var(--success); }
+
+.action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+/* ── Manifest grid ──────────────────────────────────────────────── */
+.manifest-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+.manifest-field { display: flex; flex-direction: column; }
+.manifest-field.full { grid-column: 1 / -1; }
+.manifest-field label { font-size: 0.78rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
+.manifest-field textarea,
+.manifest-field input {
+  margin-bottom: 0;
+  font-size: 0.85rem;
+  min-height: 70px;
+}
+
+/* ── Tabs ───────────────────────────────────────────────────────── */
+.tab-bar { display: flex; gap: 4px; margin-bottom: 14px; }
+.tab {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-family: var(--font);
+  font-size: 0.85rem;
+  padding: 7px 16px;
+  transition: all 0.2s;
+}
+.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+/* ── Pre / code blocks ──────────────────────────────────────────── */
+pre {
+  background: #0a0c14;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: #c9d1d9;
+  font-family: var(--mono);
+  font-size: 0.82rem;
+  line-height: 1.5;
+  overflow-x: auto;
+  padding: 16px 18px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+details summary {
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  margin-bottom: 10px;
+  user-select: none;
+}
+details[open] summary { color: var(--text); }
+
+/* ── History table ──────────────────────────────────────────────── */
+table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.85rem; }
+th { color: var(--text-muted); font-weight: 600; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
+td { padding: 9px 10px; border-bottom: 1px solid #1e2236; vertical-align: middle; }
+tr:hover td { background: var(--surface2); }
+td.center { text-align: center; }
+
+.status-badge {
+  border-radius: 20px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  padding: 3px 9px;
+  text-transform: uppercase;
+}
+.status-pending  { background: #2d2a1a; color: var(--warning); }
+.status-approved { background: #162820; color: var(--success); }
+.status-exported { background: #1a1f36; color: var(--accent); }
+
+/* ── Utility ────────────────────────────────────────────────────── */
+.hidden { display: none !important; }
+.muted { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 12px; }
+
+/* ── Toast ──────────────────────────────────────────────────────── */
+.toast {
+  position: fixed;
+  bottom: 28px;
+  right: 28px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
+  color: var(--text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  max-width: 340px;
+  padding: 13px 18px;
+  z-index: 999;
+  animation: slideIn 0.25s ease;
+}
+.toast.success { border-color: var(--success); color: var(--success); }
+.toast.error   { border-color: var(--danger);  color: var(--danger);  }
+@keyframes slideIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
+
+/* ── Footer ──────────────────────────────────────────────────────── */
+footer {
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  padding: 24px 0 32px;
+}
+footer a { color: var(--accent); text-decoration: none; }
+footer a:hover { text-decoration: underline; }
+
+/* ── Responsive ──────────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .row-two, .manifest-grid { grid-template-columns: 1fr; }
+  .manifest-field.full { grid-column: 1; }
+  .card { padding: 20px 16px; }
+  main { margin: 16px auto; }
+}