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

.env.example

@@ -12,5 +12,5 @@ HF_API_KEY=your_huggingface_api_key_here
 
 # ── Server settings ────────────────────────────────────────────────
 HOST=0.0.0.0
-PORT=7860
+PORT=8000
 LOG_DIR=./logs

README.md

@@ -1,13 +1,3 @@
----
-title: Gooleaiprompt
-sdk: docker
-emoji: 📚
-colorFrom: indigo
-colorTo: indigo
-pinned: true
-thumbnail: >-
-  https://cdn-uploads.huggingface.co/production/uploads/66367933cc7af105efbcd2dc/BhPnIDIsrbGB8uOsUZUAX.png
----
 # ⚙️ PromptForge
 
 **PromptForge** is a cloud-ready FastAPI service that converts raw user instructions into
@@ -261,4 +251,4 @@ export const Button = ({ label, onClick }: ButtonProps) => (
 
 ## 📝 License
 
-MIT — use freely, modify as needed.
+MIT — use freely, modify as needed.

backend/main.py

@@ -1,6 +1,6 @@
 """
 PromptForge — FastAPI server
-Run: uvicorn main:app --reload --host 0.0.0.0 --port 8000
+Run: uvicorn main:app --reload --host 0.0.0.0 --port 7860
 """
 from __future__ import annotations
 import logging
@@ -62,7 +62,8 @@ if _FRONTEND_DIR.exists():
 @app.on_event("startup")
 async def _startup() -> None:
     store.load_from_disk()
-    logger.info("PromptForge started. Visit http://localhost:7860")
+    port = os.environ.get("PORT", "7860")
+    logger.info("PromptForge started. Visit http://localhost:%s", port)
 
 
 # ---------------------------------------------------------------------------

frontend/client.js

@@ -1,23 +1,344 @@
 /**
- * PromptForge — client.js v2.0
- * Custom cursor, toast system, step progress, full API flow.
+ * PromptForge — client.js v3.0
+ * Clean modern UI: API key always visible, proper provider toggle, port 7860
  */
-const API = "";
+
+const API = "";  // Relative URL — works on any port (7860 for HuggingFace)
 let currentPromptId = null;
 const $ = id => document.getElementById(id);
 const show = el => el?.classList.remove("hidden");
 const hide = el => el?.classList.add("hidden");
+const esc  = s  => String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");
+
+/* ── API Key Panel ──────────────────────────────────────────────── */
+const providerSelect = $("provider");
+const apiKeyInput    = $("api-key");
+const apiKeyHint     = $("api-key-hint");
+const apiStatusDot   = $("api-status-dot");
+const apiStatusText  = $("api-status-text");
+
+const PROVIDER_LABELS = {
+  none:         { hint:"(no key needed)",         placeholder:"Not required for local engine" },
+  google:       { hint:"Google Gemini key",        placeholder:"AIza…  (get it at aistudio.google.com/apikey)" },
+  huggingface:  { hint:"Hugging Face token",       placeholder:"hf_…   (get it at huggingface.co/settings/tokens)" },
+};
+
+function updateApiKeyPanel() {
+  const p = providerSelect.value;
+  const info = PROVIDER_LABELS[p] || PROVIDER_LABELS.none;
+  apiKeyHint.textContent = info.hint;
+  if (p === "none") {
+    apiKeyInput.disabled    = true;
+    apiKeyInput.value       = "";
+    apiKeyInput.placeholder = info.placeholder;
+    apiStatusDot.classList.remove("set");
+    apiStatusText.textContent = "Not needed — local engine selected";
+  } else {
+    apiKeyInput.disabled    = false;
+    apiKeyInput.placeholder = info.placeholder;
+    updateApiKeyStatus();
+  }
+}
+
+function updateApiKeyStatus() {
+  const key = apiKeyInput.value.trim();
+  if (!key) {
+    apiStatusDot.classList.remove("set");
+    apiStatusText.textContent = "No key entered — AI enhancement disabled";
+  } else if (key.length < 10) {
+    apiStatusDot.classList.remove("set");
+    apiStatusText.textContent = "Key too short — check it";
+  } else {
+    apiStatusDot.classList.add("set");
+    apiStatusText.textContent = "Key is set ✓ — AI enhancement enabled";
+  }
+}
+
+providerSelect.addEventListener("change", updateApiKeyPanel);
+apiKeyInput.addEventListener("input",  updateApiKeyStatus);
+updateApiKeyPanel(); // init state on load
+
+/* Show/hide key toggle */
+$("btn-toggle-key").addEventListener("click", () => {
+  const isPassword = apiKeyInput.type === "password";
+  apiKeyInput.type = isPassword ? "text" : "password";
+  $("btn-toggle-key").textContent = isPassword ? "🙈" : "👁";
+});
 
-/* 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";
+/* ── Toast ──────────────────────────────────────────────────────── */
+function toast(msg, type = "info") {
+  const icons = { success:"✅", error:"❌", info:"💡", warn:"⚠️" };
+  const c = $("toast-container");
+  const t = document.createElement("div");
+  t.className = `toast ${type}`;
+  t.innerHTML = `<div class="toast-icon">${icons[type]||"💡"}</div><span>${msg}</span>`;
+  c.appendChild(t);
+  setTimeout(() => {
+    t.classList.add("leaving");
+    t.addEventListener("animationend", () => t.remove());
+  }, 4000);
+}
+
+/* ── Step Progress ──────────────────────────────────────────────── */
+function setStep(n) {
+  for (let i = 1; i <= 5; i++) {
+    const s = $(`pstep-${i}`); if (!s) continue;
+    s.classList.remove("active", "done");
+    if (i < n) s.classList.add("done");
+    if (i === n) s.classList.add("active");
+  }
+  for (let i = 1; i <= 4; i++) {
+    const l = $(`pline-${i}`); if (!l) continue;
+    l.classList.toggle("filled", i < n);
+  }
+}
+
+/* ── Tab Switcher ───────────────────────────────────────────────── */
+document.querySelectorAll(".tab").forEach(tab => {
+  tab.addEventListener("click", () => {
+    const name = 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-${name}`));
+  });
 });
-(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)"; });
+
+/* ── Copy Buttons ───────────────────────────────────────────────── */
+document.addEventListener("click", e => {
+  const btn = e.target.closest(".btn-copy");
+  if (!btn) return;
+  const target = $(btn.dataset.target);
+  if (!target) return;
+  navigator.clipboard.writeText(target.textContent).then(() => {
+    btn.textContent = "✅ Copied!";
+    btn.classList.add("copied");
+    setTimeout(() => { btn.classList.remove("copied"); btn.textContent = "📋 Copy to Clipboard"; }, 2200);
+  });
 });
+
+/* ── Loading State ──────────────────────────────────────────────── */
+function setLoading(btn, on) {
+  btn.disabled = on;
+  btn._orig = btn._orig || btn.innerHTML;
+  btn.innerHTML = on ? `<span class="spinner"></span> Working…` : btn._orig;
+}
+
+/* ── API Fetch ──────────────────────────────────────────────────── */
+async function apiFetch(path, method = "GET", body = null) {
+  const opts = { method, headers: { "Content-Type": "application/json" } };
+  if (body) opts.body = JSON.stringify(body);
+  const r = await fetch(API + path, opts);
+  if (!r.ok) {
+    const e = await r.json().catch(() => ({ detail: r.statusText }));
+    throw new Error(e.detail || "Request failed");
+  }
+  return r.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 (at least 5 characters).", "error");
+    return;
+  }
+  const btn = $("btn-generate");
+  setLoading(btn, true);
+  try {
+    const provider = providerSelect.value;
+    const apiKey   = apiKeyInput.value.trim() || null;
+    const enhance  = provider !== "none" && !!apiKey;
+
+    const data = await apiFetch("/api/generate", "POST", {
+      instruction,
+      output_format: "both",
+      provider,
+      api_key: apiKey,
+      enhance,
+      extra_context: $("extra-context").value.trim() || null,
+    });
+
+    currentPromptId = data.prompt_id;
+    renderManifest(data.manifest);
+    hide($("step-input"));
+    show($("step-manifest"));
+    $("step-manifest").scrollIntoView({ behavior: "smooth", block: "start" });
+    setStep(2);
+    toast(enhance ? "Manifest generated & AI-enhanced! ✨" : "Manifest generated — review and approve!", "success");
+  } catch (e) {
+    toast(`Error: ${e.message}`, "error");
+  } finally {
+    setLoading(btn, false);
+  }
+});
+
+function renderManifest(manifest) {
+  const sp = manifest.structured_prompt;
+  const grid = $("manifest-grid");
+  grid.innerHTML = "";
+  [
+    { 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  },
+  ].forEach(f => {
+    const d = document.createElement("div");
+    d.className = `manifest-field${f.full ? " full" : ""}`;
+    d.innerHTML = `<label>${esc(f.label)}</label><textarea id="field-${f.key}" rows="${f.full ? 3 : 2}">${esc(f.value)}</textarea>`;
+    grid.appendChild(d);
+  });
+  $("manifest-json").textContent = JSON.stringify(manifest, null, 2);
+}
+
+/* ── STEP 2: Approve ────────────────────────────────────────────── */
+$("btn-approve").addEventListener("click", async () => {
+  if (!currentPromptId) return;
+  const edits = {};
+  ["role","style","task","input_format","output_format"].forEach(k => {
+    const el = $(`field-${k}`); if (el) edits[k] = 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 });
+    renderFinalized(data.finalized_prompt);
+    hide($("step-manifest"));
+    show($("step-finalized"));
+    $("step-finalized").scrollIntoView({ behavior: "smooth", block: "start" });
+    setStep(3);
+    toast("Prompt approved and finalized! 🎉", "success");
+  } catch (e) {
+    toast(`Approval failed: ${e.message}`, "error");
+  } finally {
+    setLoading(btn, false);
+  }
+});
+
+function renderFinalized(sp) {
+  $("finalized-text").textContent = sp.raw_prompt_text;
+  $("finalized-json").textContent = JSON.stringify(sp, null, 2);
+}
+
+/* ── STEP 4: Export ─────────────────────────────────────────────── */
+async function doExport(format) {
+  if (!currentPromptId) return;
+  try {
+    const data = await apiFetch("/api/export", "POST", { prompt_id: currentPromptId, export_format: format });
+    const content = format === "json" ? JSON.stringify(data.data, null, 2) : String(data.data);
+    const blob = new Blob([content], { type: format === "json" ? "application/json" : "text/plain" });
+    const url  = URL.createObjectURL(blob);
+    const a    = Object.assign(document.createElement("a"), { href:url, download:`prompt-${currentPromptId}.${format === "json" ? "json" : "txt"}` });
+    a.click(); URL.revokeObjectURL(url);
+    setStep(4);
+    toast(`Exported as ${format.toUpperCase()}!`, "success");
+  } catch (e) {
+    toast(`Export failed: ${e.message}`, "error");
+  }
+}
+$("btn-export-json").addEventListener("click", () => doExport("json"));
+$("btn-export-txt" ).addEventListener("click", () => doExport("text"));
+
+/* ── STEP 5: Refine ─────────────────────────────────────────────── */
+$("btn-refine").addEventListener("click", () => {
+  hide($("step-finalized"));
+  show($("step-refine"));
+  $("step-refine").scrollIntoView({ behavior:"smooth", block:"start" });
+  setStep(5);
+});
+$("btn-cancel-refine").addEventListener("click", () => {
+  hide($("step-refine"));
+  show($("step-finalized"));
+  setStep(3);
+});
+$("btn-submit-refine").addEventListener("click", async () => {
+  const feedback = $("feedback").value.trim();
+  if (!feedback) { toast("Please describe what you want to change.", "error"); return; }
+  const btn = $("btn-submit-refine");
+  setLoading(btn, true);
+  try {
+    const provider = providerSelect.value;
+    const apiKey   = apiKeyInput.value.trim() || null;
+    const data = await apiFetch("/api/refine", "POST", {
+      prompt_id: currentPromptId, feedback, provider, api_key: apiKey,
+    });
+    currentPromptId = data.prompt_id;
+    renderManifest(data.manifest);
+    hide($("step-refine"));
+    show($("step-manifest"));
+    $("step-manifest").scrollIntoView({ behavior:"smooth", block:"start" });
+    setStep(2);
+    toast(`Refined to ${data.message || "new version"} — review and approve!`, "success");
+  } catch (e) {
+    toast(`Refinement failed: ${e.message}`, "error");
+  } finally {
+    setLoading(btn, false);
+  }
+});
+
+/* ── Reset ──────────────────────────────────────────────────────── */
+$("btn-reset").addEventListener("click", () => {
+  hide($("step-manifest"));
+  show($("step-input"));
+  $("instruction").value = "";
+  $("extra-context").value = "";
+  currentPromptId = null;
+  setStep(1);
+  toast("Reset — start a new prompt.", "info");
+});
+$("btn-new")?.addEventListener("click", () => {
+  hide($("step-finalized"));
+  show($("step-input"));
+  $("instruction").value = "";
+  $("extra-context").value = "";
+  currentPromptId = null;
+  setStep(1);
+  $("step-input").scrollIntoView({ behavior:"smooth", block:"start" });
+});
+
+/* ── History ────────────────────────────────────────────────────── */
+$("btn-load-history").addEventListener("click", loadHistory);
+async function loadHistory() {
+  const btn = $("btn-load-history");
+  setLoading(btn, true);
+  try {
+    const data = await apiFetch("/api/history");
+    const tbody = $("history-body");
+    if (!data.entries?.length) {
+      tbody.innerHTML = `<tr><td class="empty-msg" colspan="6">No prompts yet. Generate your first one above!</td></tr>`;
+      return;
+    }
+    tbody.innerHTML = data.entries.map(e => `
+      <tr>
+        <td><code style="font-size:.75rem;color:var(--text-muted)">${esc(e.prompt_id?.slice(0,8))}…</code></td>
+        <td style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(e.instruction?.slice(0,60) || "—")}</td>
+        <td>v${e.version || 1}</td>
+        <td><span class="badge badge-${e.status || 'pending'}">${esc(e.status || "pending")}</span></td>
+        <td style="white-space:nowrap">${e.created_at ? new Date(e.created_at).toLocaleDateString() : "—"}</td>
+        <td>
+          <button class="btn-secondary btn-sm btn-danger" onclick="deletePrompt('${esc(e.prompt_id)}')">🗑 Delete</button>
+        </td>
+      </tr>`).join("");
+    toast(`Loaded ${data.total} prompt(s).`, "info");
+  } catch (e) {
+    toast(`Failed to load history: ${e.message}`, "error");
+  } finally {
+    setLoading(btn, false);
+  }
+}
+
+async function deletePrompt(id) {
+  if (!confirm("Delete this prompt?")) return;
+  try {
+    await apiFetch(`/api/history/${id}`, "DELETE");
+    toast("Prompt deleted.", "success");
+    loadHistory();
+  } catch (e) {
+    toast(`Delete failed: ${e.message}`, "error");
+  }
+}

frontend/index.html

@@ -3,17 +3,15 @@
 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>PromptForge — Neural Prompt Generator</title>
+  <title>PromptForge — Structured 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 ─────────────────────────────────────────────── -->
+<!-- These elements kept for JS compatibility but hidden via CSS -->
 <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>
@@ -22,27 +20,64 @@
 
 <div id="app">
 
-  <!-- ── Header ──────────────────────────────────────────────────── -->
+  <!-- ── Header ─────────────────────────────────────────────────── -->
   <header>
     <div class="header-inner">
       <div class="logo-group">
-        <div class="logo-icon">⚙️</div>
+        <div class="logo-icon">⚡</div>
         <span class="logo-text">PromptForge</span>
-        <span class="logo-tag">v2.0</span>
+        <span class="logo-tag">v3.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>
+        <a class="nav-link" href="/docs" target="_blank">📖 API Docs</a>
       </div>
     </div>
   </header>
 
   <main>
 
-    <!-- ── Step Progress ─────────────────────────────────────────── -->
+    <!-- ── API Configuration Banner ─────────────────────────────── -->
+    <div class="api-config-banner">
+      <div class="api-banner-header">
+        <div class="api-banner-icon">🔑</div>
+        <div class="api-banner-title">
+          <h3>AI Enhancement Settings</h3>
+          <p>Enter your API key to unlock AI-powered prompt enhancement (optional — works without a key too)</p>
+        </div>
+      </div>
+      <div class="api-row">
+        <div class="api-field">
+          <label><span class="lbl-dot"></span> AI Provider</label>
+          <select id="provider">
+            <option value="none">⚡ Local Engine (no API key needed)</option>
+            <option value="google">🌐 Google Gemini</option>
+            <option value="huggingface">🤗 Hugging Face</option>
+          </select>
+        </div>
+        <div class="api-field" id="api-key-group">
+          <label>
+            <span class="lbl-dot"></span> API Key
+            <span class="lbl-opt" id="api-key-hint">Select a provider above</span>
+          </label>
+          <div class="api-input-wrap">
+            <input type="password" id="api-key"
+              placeholder="Paste your API key here…"
+              disabled/>
+            <button class="api-toggle-btn" id="btn-toggle-key" title="Show/hide key">👁</button>
+          </div>
+          <div class="api-field-note">
+            <span class="api-dot" id="api-status-dot"></span>
+            <span id="api-status-text">No key entered</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Step Progress ──────────────────────────────────────────── -->
     <div class="step-progress">
       <div class="prog-step active" id="pstep-1">
         <div class="prog-node">1</div>
@@ -70,16 +105,16 @@
       </div>
     </div>
 
-    <!-- ── STEP 1: Input ─────────────────────────────────────────── -->
+    <!-- ── STEP 1: Input ──────────────────────────────────────────── -->
     <section id="step-input" class="card">
       <div class="card-header">
-        <h2>Enter Your Instruction</h2>
+        <h2>✍️ Enter Your Instruction</h2>
         <span class="step-badge">STEP 01</span>
       </div>
 
       <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>
+        <span>Describe any task in plain English. PromptForge will transform it into a fully structured, ready-to-use prompt for Google AI Studio.</span>
       </div>
 
       <div class="field">
@@ -94,36 +129,19 @@
           placeholder="e.g. Support dark mode, must be accessible (WCAG AA), use React hooks only."></textarea>
       </div>
 
-      <div class="input-grid">
-        <div class="field">
-          <label><span class="lbl-dot"></span> AI Enhancement</label>
-          <select id="provider">
-            <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 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>
-
       <div class="action-row">
         <button id="btn-generate" class="btn-primary">⚡ Generate Prompt Manifest</button>
       </div>
     </section>
 
-    <!-- ── STEP 2: Manifest Review ───────────────────────────────── -->
+    <!-- ── STEP 2: Manifest Review ──────────────────────────────── -->
     <section id="step-manifest" class="card hidden fade-in">
       <div class="card-header">
-        <h2>Review &amp; Edit Manifest</h2>
+        <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>
+      <p class="muted">Every field is editable. Tweak anything before approving — the final prompt will regenerate from your edits.</p>
 
       <div id="manifest-grid" class="manifest-grid"></div>
 
@@ -138,10 +156,10 @@
       </div>
     </section>
 
-    <!-- ── STEP 3: Finalized Prompt ──────────────────────────────── -->
+    <!-- ── STEP 3: Finalized Prompt ─────────────────────────────── -->
     <section id="step-finalized" class="card hidden fade-in">
       <div class="card-header">
-        <h2>Finalized Prompt</h2>
+        <h2>🎉 Finalized Prompt</h2>
         <span class="step-badge">STEP 03</span>
       </div>
 
@@ -171,10 +189,10 @@
       </div>
     </section>
 
-    <!-- ── STEP 5: Refine ────────────────────────────────────────── -->
+    <!-- ── STEP 5: Refine ───────────────────────────────────────── -->
     <section id="step-refine" class="card hidden fade-in">
       <div class="card-header">
-        <h2>Refine Prompt</h2>
+        <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>
@@ -191,10 +209,10 @@
       </div>
     </section>
 
-    <!-- ── History ───────────────────────────────────────────────── -->
+    <!-- ── History ──────────────────────────────────────────────── -->
     <section id="section-history" class="card">
       <div class="card-header">
-        <h2>Prompt History</h2>
+        <h2>📜 Prompt History</h2>
         <button id="btn-load-history" class="btn-secondary btn-sm">↺ Refresh</button>
       </div>
 
@@ -219,13 +237,13 @@
 
   </main>
 
-  <!-- ── Footer ──────────────────────────────────────────────────── -->
+  <!-- ── Footer ─────────────────────────────────────────────────── -->
   <footer>
     <div class="footer-inner">
-      <span class="footer-copy">© 2025 PromptForge — Neural Prompt Generator</span>
+      <span class="footer-copy">© 2025 PromptForge — Structured Prompt Generator · Port 7860</span>
       <div class="footer-links">
-        <a href="/docs" target="_blank">API Docs</a>
-        <a href="/redoc" target="_blank">ReDoc</a>
+        <a href="/docs"   target="_blank">API Docs</a>
+        <a href="/redoc"  target="_blank">ReDoc</a>
         <a href="/health" target="_blank">Health</a>
       </div>
     </div>
@@ -233,9 +251,7 @@
 
 </div><!-- #app -->
 
-<!-- ── Toast container ─────────────────────────────────────────── -->
 <div id="toast-container"></div>
-
 <script src="/static/client.js"></script>
 </body>
 </html>

frontend/style.css

@@ -1,199 +1,208 @@
 /* ═══════════════════════════════════════════════════════════════
-   PROMPTFORGE — Neural Forge UI v2.0
-   Aesthetic: Deep Space Cyberpunk + Glassmorphism
+   PROMPTFORGE — Clean Modern UI v3.0
+   Aesthetic: Professional SaaS · Light & Airy · Clear Hierarchy
    ═══════════════════════════════════════════════════════════════ */
 
-@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');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 
 :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);
+  --bg:          #f6f8fc;
+  --surface:     #ffffff;
+  --surface-2:   #f0f3f9;
+  --surface-3:   #e8ecf5;
+  --border:      #dde3ee;
+  --border-focus:#6366f1;
+  --indigo:      #6366f1;
+  --indigo-dk:   #4f46e5;
+  --indigo-lt:   #eef0ff;
+  --indigo-mid:  #c7d2fe;
+  --violet:      #8b5cf6;
+  --green:       #10b981;
+  --green-lt:    #d1fae5;
+  --amber:       #f59e0b;
+  --amber-lt:    #fef3c7;
+  --red:         #ef4444;
+  --red-lt:      #fee2e2;
+  --text:        #111827;
+  --text-soft:   #374151;
+  --text-muted:  #6b7280;
+  --text-faint:  #9ca3af;
+  --radius-sm:   8px;
+  --radius-md:   12px;
+  --radius-lg:   16px;
+  --radius-xl:   20px;
+  --shadow-sm:   0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
+  --shadow-md:   0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.05);
+  --shadow-lg:   0 12px 40px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.06);
+  --shadow-btn:  0 2px 8px rgba(99,102,241,.30);
+  --font-body:   'Inter',system-ui,sans-serif;
+  --font-mono:   'JetBrains Mono','Fira Code',monospace;
 }
+
 *,*::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}
+html{scroll-behavior:smooth}
+body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
+::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
+::-webkit-scrollbar-thumb:hover{background:var(--indigo-mid)}
+
+/* Remove dark elements */
+#cursor-dot,#cursor-ring,.bg-mesh,.bg-grid,.orb{display:none!important}
+
+/* ── Layout ── */
+#app{min-height:100vh;display:flex;flex-direction:column}
+main{max-width:860px;width:100%;margin:0 auto;padding:24px 20px 80px;display:flex;flex-direction:column;gap:20px;flex:1}
+
+/* ── Header ── */
+header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(0,0,0,.04)}
+.header-inner{max-width:860px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
+.logo-group{display:flex;align-items:center;gap:10px}
+.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--indigo),var(--violet));border-radius:10px;display:grid;place-items:center;font-size:17px;box-shadow:0 2px 8px rgba(99,102,241,.35)}
+.logo-text{font-size:1.1rem;font-weight:700;color:var(--text);letter-spacing:-.3px}
+.logo-tag{font-family:var(--font-mono);font-size:.65rem;color:var(--indigo);background:var(--indigo-lt);border:1px solid var(--indigo-mid);padding:2px 8px;border-radius:20px;letter-spacing:.5px}
+.header-meta{display:flex;align-items:center;gap:10px}
+.status-pill{display:flex;align-items:center;gap:6px;font-size:.72rem;font-family:var(--font-mono);color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);padding:5px 12px;border-radius:20px}
+.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:blink 2.5s ease-in-out infinite}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
+.nav-link{font-size:.8rem;font-weight:500;color:var(--text-muted);text-decoration:none;padding:6px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);transition:all .2s;background:var(--surface)}
+.nav-link:hover{color:var(--indigo);border-color:var(--indigo-mid);background:var(--indigo-lt)}
+
+/* ── API Config Banner ── */
+.api-config-banner{background:var(--surface);border:2px solid var(--indigo-mid);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-sm)}
+.api-banner-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
+.api-banner-icon{width:40px;height:40px;flex-shrink:0;background:var(--indigo-lt);border-radius:var(--radius-md);display:grid;place-items:center;font-size:20px}
+.api-banner-title h3{font-size:.95rem;font-weight:700;color:var(--text)}
+.api-banner-title p{font-size:.8rem;color:var(--text-muted);margin-top:2px}
+.api-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+@media(max-width:600px){.api-row{grid-template-columns:1fr}}
+.api-field label{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;color:var(--text-soft);letter-spacing:.4px;text-transform:uppercase;margin-bottom:7px}
+.api-input-wrap{position:relative}
+.api-input-wrap input{width:100%;padding:10px 40px 10px 14px;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:.85rem;font-family:var(--font-mono);color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
+.api-input-wrap input:focus{border-color:var(--border-focus);background:white;box-shadow:0 0 0 3px rgba(99,102,241,.10)}
+.api-input-wrap input::placeholder{color:var(--text-faint);font-style:italic;font-family:var(--font-body)}
+.api-toggle-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:15px;padding:4px;transition:color .2s}
+.api-toggle-btn:hover{color:var(--indigo)}
+.api-field-note{font-size:.72rem;color:var(--text-muted);margin-top:5px;display:flex;align-items:center;gap:5px}
+.api-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);flex-shrink:0;transition:background .3s}
+.api-dot.set{background:var(--green);box-shadow:0 0 6px var(--green)}
+
+/* ── Step Progress ── */
+.step-progress{display:flex;align-items:center;justify-content:center;padding:8px 0 4px;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}
+.prog-node{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);background:var(--surface);display:grid;place-items:center;font-size:.72rem;font-weight:600;color:var(--text-muted);transition:all .35s cubic-bezier(.34,1.56,.64,1)}
+.prog-step.active .prog-node{border-color:var(--indigo);background:var(--indigo);color:white;box-shadow:0 0 0 4px rgba(99,102,241,.18);transform:scale(1.1)}
+.prog-step.done .prog-node{border-color:var(--green);background:var(--green);color:white}
+.prog-label{font-size:.6rem;color:var(--text-faint);font-weight:500;letter-spacing:.4px;text-transform:uppercase}
+.prog-step.active .prog-label{color:var(--indigo);font-weight:600}
+.prog-step.done .prog-label{color:var(--green)}
+.prog-line{width:60px;height:2px;background:var(--border);margin-bottom:22px;border-radius:2px;overflow:hidden}
+.prog-line::after{content:'';display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--indigo),var(--green));transition:width .5s ease;border-radius:2px}
+.prog-line.filled::after{width:100%}
+
+/* ── Cards ── */
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:28px 30px;box-shadow:var(--shadow-md);animation:cardIn .4s ease both}
+@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
+.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px}
+.card-header h2{font-size:1.05rem;font-weight:700;color:var(--text);letter-spacing:-.2px}
+.step-badge{font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--indigo);background:var(--indigo-lt);border:1px solid var(--indigo-mid);padding:3px 10px;border-radius:20px}
+
+/* ── Info Banner ── */
+.info-banner{display:flex;gap:10px;align-items:flex-start;background:var(--indigo-lt);border:1px solid var(--indigo-mid);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:20px;font-size:.85rem;color:var(--indigo-dk);line-height:1.5}
+.info-icon{font-size:1rem;flex-shrink:0;margin-top:1px}
+
+/* ── Form ── */
+.field{margin-bottom:18px}
+label{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-soft);margin-bottom:7px}
+.lbl-dot{width:4px;height:4px;border-radius:50%;background:var(--indigo);flex-shrink:0}
+.lbl-opt{color:var(--text-faint);font-size:.65rem;margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400}
+textarea,input[type="password"],select{width:100%;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-body);font-size:.9rem;padding:11px 14px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;resize:vertical}
+textarea:focus,input:focus,select:focus{border-color:var(--border-focus);background:white;box-shadow:0 0 0 3px rgba(99,102,241,.10)}
+textarea::placeholder,input::placeholder{color:var(--text-faint);font-style:italic}
+textarea{min-height:100px;line-height:1.65}
+select{appearance:none;cursor:pointer;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='%236366f1' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
+.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+@media(max-width:600px){.input-grid{grid-template-columns:1fr}}
+.field-note{font-size:.73rem;color:var(--text-muted);margin-top:5px}
+
+/* ── Buttons ── */
+button{cursor:pointer}
+.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--radius-md);font-family:var(--font-body);font-size:.9rem;font-weight:600;padding:12px 26px;background:linear-gradient(135deg,var(--indigo) 0%,var(--violet) 100%);color:white;cursor:pointer;box-shadow:var(--shadow-btn);transition:transform .2s,box-shadow .2s,opacity .2s;position:relative;overflow:hidden}
+.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.40)}
+.btn-primary:active{transform:translateY(0)}
+.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
+.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text-soft);font-family:var(--font-body);font-size:.875rem;font-weight:500;padding:10px 20px;cursor:pointer;transition:all .2s}
+.btn-secondary:hover{border-color:var(--indigo-mid);color:var(--indigo);background:var(--indigo-lt)}
+.btn-secondary:active{transform:scale(.98)}
+.btn-danger{color:var(--red)}
+.btn-danger:hover{border-color:var(--red);color:var(--red);background:var(--red-lt)}
+.btn-sm{font-size:.78rem;padding:6px 14px;border-radius:var(--radius-sm)}
+.action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;align-items:center}
+.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* ── Manifest Grid ── */
+.manifest-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
+.manifest-field label{text-transform:uppercase;font-size:.68rem;color:var(--text-muted)}
+.manifest-field textarea{min-height:70px;font-size:.85rem}
 .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}
+@media(max-width:600px){.manifest-grid{grid-template-columns:1fr}.manifest-field.full{grid-column:auto}}
+
+/* ── Tabs ── */
+.tab-bar{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:4px;width:fit-content;margin-bottom:16px}
+.tab{border:none;background:transparent;border-radius:var(--radius-sm);padding:7px 18px;font-size:.82rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .2s}
+.tab.active{background:white;color:var(--indigo);box-shadow:var(--shadow-sm);font-weight:600}
+.tab-panel{display:block}
+.tab-panel.hidden{display:none}
+
+/* ── Code ── */
+pre{background:#1e1e2e;border-radius:var(--radius-md);padding:16px 18px;overflow-x:auto;font-family:var(--font-mono);font-size:.82rem;line-height:1.7;color:#cdd6f4;white-space:pre-wrap;word-break:break-word}
+details{margin-top:12px}
+summary{font-size:.83rem;font-weight:600;color:var(--text-muted);cursor:pointer;padding:10px 0;user-select:none;display:flex;align-items:center;gap:7px;list-style:none}
+summary:hover{color:var(--indigo)}
+summary::before{content:'▶';font-size:.7rem;transition:transform .2s}
 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}
+.btn-copy{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-muted);font-family:var(--font-mono);font-size:.73rem;padding:7px 14px;margin-top:10px;cursor:pointer;transition:all .2s}
+.btn-copy:hover{color:var(--indigo);border-color:var(--indigo-mid);background:var(--indigo-lt)}
+.btn-copy.copied{color:var(--green);border-color:var(--green);background:var(--green-lt)}
+
+/* ── Misc ── */
+.muted{font-size:.87rem;color:var(--text-muted);margin-bottom:18px;line-height:1.6}
+.divider{height:1px;background:var(--border);margin:20px 0}
+
+/* ── History Table ── */
+.table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--border)}
+table{width:100%;border-collapse:collapse;font-size:.85rem}
+thead{background:var(--surface-2)}
+th{padding:11px 14px;text-align:left;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap}
+td{padding:11px 14px;color:var(--text-soft);border-bottom:1px solid var(--surface-2)}
 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}
+tr:hover td{background:var(--surface-2)}
+.empty-msg{color:var(--text-faint);font-style:italic;text-align:center;padding:28px 14px!important}
+.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
+.badge-pending{background:var(--amber-lt);color:#92400e}
+.badge-approved{background:var(--green-lt);color:#065f46}
+.badge-exported{background:var(--indigo-lt);color:var(--indigo-dk)}
+
+/* ── Toast ── */
+#toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:9999;pointer-events:none}
+.toast{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 18px;box-shadow:var(--shadow-lg);font-size:.85rem;color:var(--text);pointer-events:all;animation:toastIn .3s cubic-bezier(.34,1.56,.64,1) both;min-width:260px;max-width:380px}
 .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)}
+@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
+@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}
+.toast.success{border-left:4px solid var(--green)}
+.toast.error{border-left:4px solid var(--red)}
+.toast.warn{border-left:4px solid var(--amber)}
+.toast.info{border-left:4px solid var(--indigo)}
+.toast-icon{font-size:1.1rem;flex-shrink:0}
+
+/* ── Footer ── */
+footer{border-top:1px solid var(--border);background:var(--surface);padding:14px 20px}
+.footer-inner{max-width:860px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.78rem;color:var(--text-faint)}
 .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)}
+.footer-links a{color:var(--text-muted);text-decoration:none;transition:color .2s}
+.footer-links a:hover{color:var(--indigo)}
 
-/* Utility */
+/* ── Utils ── */
 .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}}
+.fade-in{animation:cardIn .4s ease both}
+@media(max-width:600px){main{padding:16px 14px 60px}.card{padding:20px 18px}.prog-line{width:32px}.header-inner{padding:12px 14px}}

promptforge_fixed.zip

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e276ed5b093d1d0f9a16457518c2b36ae9d1a8cfdd37f220b8c4fb724f29c77
+size 35095

upload.zip

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