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

.env.example

@@ -1,16 +1,14 @@
-# PromptForge — Environment Variables
-# Copy this file to .env and fill in your values.
-# NEVER commit .env to version control.
+# PromptForge v3.0 — Environment Variables
+# Copy to .env and fill in your values. NEVER commit .env to version control.
 
-# ── Google AI Studio / Gemini ──────────────────────────────────────
-# Get your key at: https://aistudio.google.com/app/apikey
-GOOGLE_API_KEY=your_google_api_key_here
+# ── AI Provider Keys ───────────────────────────────────────────────────────
+# Hugging Face: https://huggingface.co/settings/tokens  (starts with hf_)
+HF_API_KEY=your_huggingface_token_here
 
-# ── Hugging Face Inference API ─────────────────────────────────────
-# Get your key at: https://huggingface.co/settings/tokens
-HF_API_KEY=your_huggingface_api_key_here
+# Google AI Studio: https://aistudio.google.com/app/apikey  (starts with AIza)
+GOOGLE_API_KEY=your_google_api_key_here
 
-# ── Server settings ────────────────────────────────────────────────
+# ── Server Settings ────────────────────────────────────────────────────────
 HOST=0.0.0.0
-PORT=8000
-LOG_DIR=./logs
+PORT=7860          # HuggingFace Spaces requires 7860
+LOG_DIR=./logs     # Where to persist prompt/settings JSON files

README.md

@@ -1,13 +1,3 @@
----
-sdk: docker
-emoji: 🚀
-colorFrom: pink
-colorTo: yellow
-pinned: true
-thumbnail: >-
-  https://cdn-uploads.huggingface.co/production/uploads/66367933cc7af105efbcd2dc/iW0OtZd-v78iPSycCQ8AK.png
-short_description: '333'
----
 # ⚙️ PromptForge
 
 **PromptForge** is a cloud-ready FastAPI service that converts raw user instructions into
@@ -78,7 +68,8 @@ pip install -r backend/requirements.txt
 ```bash
 cp .env.example .env
 # Open .env and fill in your keys:
-#   GOOGL 
+#   GOOGLE_API_KEY=...
+#   HF_API_KEY=...
 ```
 
 > **Security note:** API keys entered in the frontend are sent only over HTTPS
@@ -153,7 +144,7 @@ Expected output: **19 tests passing**.
   "instruction": "Generate a TypeScript React component with TailwindCSS and unit tests.",
   "output_format": "both",
   "provider": "google",
-  "api_key": " ",
+  "api_key": "YOUR_KEY_HERE",
   "enhance": true,
   "extra_context": "Must support dark mode and be accessible."
 }
@@ -260,4 +251,4 @@ export const Button = ({ label, onClick }: ButtonProps) => (
 
 ## 📝 License
 
-MIT — use freely, modify as needed.
+MIT — use freely, modify as needed.

backend/instruction_store.py

@@ -0,0 +1,154 @@
+"""
+PromptForge — Persistent store for InstructionSettings.
+Separate from prompt_store to keep concerns clean.
+"""
+from __future__ import annotations
+import json
+import os
+import logging
+import uuid
+from datetime import datetime
+from pathlib import Path
+from typing import Dict, List, Optional
+
+from schemas import InstructionSettings, InstructionSettingsCreate, InstructionSettingsUpdate
+
+logger = logging.getLogger("promptforge.instruction_store")
+
+_DB: Dict[str, InstructionSettings] = {}
+_LOG_DIR = Path(os.getenv("LOG_DIR", "logs"))
+_LOG_DIR.mkdir(parents=True, exist_ok=True)
+_PERSIST_FILE = _LOG_DIR / "instruction_settings.json"
+
+
+# ── CRUD ────────────────────────────────────────────────────────────────────
+
+def create(data: InstructionSettingsCreate) -> InstructionSettings:
+    sid = str(uuid.uuid4())
+    now = datetime.utcnow()
+    setting = InstructionSettings(
+        settings_id=sid,
+        created_at=now,
+        updated_at=now,
+        use_count=0,
+        **data.model_dump(),
+    )
+    _DB[sid] = setting
+    _persist()
+    logger.info("CREATED instruction setting | id=%s title=%r", sid, setting.title)
+    return setting
+
+
+def get(settings_id: str) -> Optional[InstructionSettings]:
+    return _DB.get(settings_id)
+
+
+def list_all(tag: Optional[str] = None) -> List[InstructionSettings]:
+    items = sorted(_DB.values(), key=lambda x: x.updated_at, reverse=True)
+    if tag:
+        items = [i for i in items if tag in i.tags]
+    return items
+
+
+def update(settings_id: str, data: InstructionSettingsUpdate) -> Optional[InstructionSettings]:
+    existing = _DB.get(settings_id)
+    if not existing:
+        return None
+    patch = {k: v for k, v in data.model_dump().items() if v is not None}
+    patch["updated_at"] = datetime.utcnow()
+    updated = existing.model_copy(update=patch)
+    _DB[settings_id] = updated
+    _persist()
+    logger.info("UPDATED instruction setting | id=%s", settings_id)
+    return updated
+
+
+def delete(settings_id: str) -> bool:
+    if settings_id in _DB:
+        del _DB[settings_id]
+        _persist()
+        logger.info("DELETED instruction setting | id=%s", settings_id)
+        return True
+    return False
+
+
+def increment_use_count(settings_id: str) -> None:
+    if settings_id in _DB:
+        s = _DB[settings_id]
+        _DB[settings_id] = s.model_copy(
+            update={"use_count": s.use_count + 1, "updated_at": datetime.utcnow()}
+        )
+        _persist()
+
+
+# ── Persistence ─────────────────────────────────────────────────────────────
+
+def _persist() -> None:
+    try:
+        data = [s.model_dump(mode="json") for s in _DB.values()]
+        _PERSIST_FILE.write_text(json.dumps(data, indent=2, default=str))
+    except Exception as exc:
+        logger.warning("Could not persist instruction store: %s", exc)
+
+
+def load_from_disk() -> None:
+    if not _PERSIST_FILE.exists():
+        _seed_defaults()
+        return
+    try:
+        raw = json.loads(_PERSIST_FILE.read_text())
+        for entry in raw:
+            s = InstructionSettings.model_validate(entry)
+            _DB[s.settings_id] = s
+        logger.info("Loaded %d instruction settings from disk.", len(_DB))
+    except Exception as exc:
+        logger.warning("Could not load instruction settings: %s", exc)
+        _seed_defaults()
+
+
+def _seed_defaults() -> None:
+    """Create a few useful starter templates on first run."""
+    from schemas import InstructionSettingsCreate, OutputFormat, PersonaType, StyleType, AIProvider
+    defaults = [
+        InstructionSettingsCreate(
+            title="React Component Generator",
+            description="Generates a TypeScript React component with TailwindCSS and tests.",
+            instruction="Create a reusable TypeScript React component with TailwindCSS styling, proper props interface, and Jest unit tests.",
+            extra_context="Follow React best practices: hooks, memo, accessibility.",
+            output_format=OutputFormat.both,
+            persona=PersonaType.senior_dev,
+            style=StyleType.professional,
+            constraints=["Use TypeScript strict mode", "WCAG 2.1 AA accessibility", "Include PropTypes documentation"],
+            tags=["react", "typescript", "frontend"],
+            provider=AIProvider.none,
+            enhance=False,
+        ),
+        InstructionSettingsCreate(
+            title="Python API Endpoint",
+            description="Generates a FastAPI endpoint with validation and error handling.",
+            instruction="Create a FastAPI endpoint with Pydantic request/response models, input validation, error handling, and docstring.",
+            extra_context="Follow REST best practices. Include OpenAPI tags.",
+            output_format=OutputFormat.both,
+            persona=PersonaType.senior_dev,
+            style=StyleType.detailed,
+            constraints=["Python 3.11+", "PEP-8 compliant", "Type hints everywhere", "Include unit tests"],
+            tags=["python", "fastapi", "backend"],
+            provider=AIProvider.none,
+            enhance=False,
+        ),
+        InstructionSettingsCreate(
+            title="Technical Blog Post",
+            description="Creates a structured technical article with code examples.",
+            instruction="Write a technical blog post explaining the concept with clear sections, code examples, and actionable takeaways.",
+            output_format=OutputFormat.text,
+            persona=PersonaType.tech_writer,
+            style=StyleType.detailed,
+            constraints=["800-1200 words", "Include at least 2 code examples", "Add a TL;DR section"],
+            tags=["writing", "technical", "blog"],
+            provider=AIProvider.none,
+            enhance=False,
+        ),
+    ]
+    for d in defaults:
+        create(d)
+    logger.info("Seeded %d default instruction settings.", len(defaults))

backend/main.py

@@ -1,59 +1,58 @@
 """
-PromptForge — FastAPI server
+PromptForge — FastAPI server v3.0
 Run: uvicorn main:app --reload --host 0.0.0.0 --port 7860
 """
 from __future__ import annotations
-import logging
-import os
+import logging, os
 from pathlib import Path
 
-from fastapi import FastAPI, HTTPException, Request, status
+from fastapi import FastAPI, HTTPException, status
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
 
 import store
+import instruction_store
 from ai_client import enhance_prompt
-from prompt_logic import apply_edits, build_manifest, refine_with_feedback
+from prompt_logic import (
+    build_manifest, build_manifest_from_settings,
+    apply_edits, refine_with_feedback, generate_explanation,
+)
 from schemas import (
-    ApproveRequest,
-    ApproveResponse,
-    ExportRequest,
-    ExportResponse,
-    GenerateRequest,
-    GenerateResponse,
+    ApproveRequest, ApproveResponse,
+    ExportRequest, ExportResponse,
+    GenerateRequest, GenerateFromSettingsRequest, GenerateResponse,
     HistoryResponse,
     RefineRequest,
+    InstructionSettingsCreate, InstructionSettingsUpdate,
+    InstructionSettingsList, InstructionSettings,
+    ExplainResponse, EnvConfigStatus,
+    AIProvider,
 )
 
-# ---------------------------------------------------------------------------
-# Logging
-# ---------------------------------------------------------------------------
+# ── Logging ─────────────────────────────────────────────────────────────────
 logging.basicConfig(
     level=logging.INFO,
     format="%(asctime)s | %(levelname)s | %(name)s | %(message)s",
 )
 logger = logging.getLogger("promptforge.main")
 
-# ---------------------------------------------------------------------------
-# App bootstrap
-# ---------------------------------------------------------------------------
+# ── App bootstrap ────────────────────────────────────────────────────────────
 app = FastAPI(
     title="PromptForge",
-    description="Autonomously generate structured, ready-to-use prompts for Google AI Studio.",
-    version="1.0.0",
+    description="Structured prompt generator for Google AI Studio. v3.0",
+    version="3.0.0",
     docs_url="/docs",
     redoc_url="/redoc",
 )
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],   # Lock this down in production
+    allow_origins=["*"],
     allow_methods=["*"],
     allow_headers=["*"],
 )
 
-# Serve frontend from /frontend directory
 _FRONTEND_DIR = Path(__file__).parent.parent / "frontend"
 if _FRONTEND_DIR.exists():
     app.mount("/static", StaticFiles(directory=str(_FRONTEND_DIR)), name="static")
@@ -62,204 +61,273 @@ if _FRONTEND_DIR.exists():
 @app.on_event("startup")
 async def _startup() -> None:
     store.load_from_disk()
+    instruction_store.load_from_disk()
     port = os.environ.get("PORT", "7860")
-    logger.info("PromptForge started. Visit http://localhost:%s", port)
+    logger.info("PromptForge v3.0 started. Visit http://localhost:%s", port)
 
 
-# ---------------------------------------------------------------------------
-# Root — serve the HTML frontend
-# ---------------------------------------------------------------------------
+# ── Frontend ─────────────────────────────────────────────────────────────────
 
 @app.get("/", response_class=HTMLResponse, tags=["Frontend"])
 async def serve_frontend() -> HTMLResponse:
     index = _FRONTEND_DIR / "index.html"
     if index.exists():
         return HTMLResponse(content=index.read_text(), status_code=200)
-    return HTMLResponse(
-        content="<h1>PromptForge API is running.</h1><p>Visit <a href='/docs'>/docs</a> for API reference.</p>",
-        status_code=200,
+    return HTMLResponse("<h1>PromptForge API is running.</h1><a href='/docs'>API Docs</a>")
+
+
+# ── Environment Config (read-only) ───────────────────────────────────────────
+
+@app.get("/api/config", response_model=EnvConfigStatus, tags=["System"])
+async def get_config() -> EnvConfigStatus:
+    """Return which API keys are set in the environment (values never exposed)."""
+    return EnvConfigStatus(
+        hf_key_set=bool(os.environ.get("HF_API_KEY")),
+        google_key_set=bool(os.environ.get("GOOGLE_API_KEY")),
+        port=os.environ.get("PORT", "7860"),
+        version="3.0.0",
     )
 
 
-# ---------------------------------------------------------------------------
-# Step 0 + 1: Accept instruction → return manifest
-# ---------------------------------------------------------------------------
+# ── Instruction Settings CRUD ────────────────────────────────────────────────
 
-@app.post("/api/generate", response_model=GenerateResponse, tags=["Prompts"])
-async def generate_prompt(req: GenerateRequest) -> GenerateResponse:
+@app.post("/api/instructions", response_model=InstructionSettings,
+          status_code=status.HTTP_201_CREATED, tags=["Settings"])
+async def create_instruction(data: InstructionSettingsCreate) -> InstructionSettings:
+    """Save a new instruction setting template."""
+    setting = instruction_store.create(data)
+    logger.info("INSTRUCTION CREATED | id=%s title=%r", setting.settings_id, setting.title)
+    return setting
+
+
+@app.get("/api/instructions", response_model=InstructionSettingsList, tags=["Settings"])
+async def list_instructions(tag: str | None = None) -> InstructionSettingsList:
+    """List all saved instruction settings (optionally filtered by tag)."""
+    items = instruction_store.list_all(tag=tag)
+    return InstructionSettingsList(total=len(items), items=items)
+
+
+@app.get("/api/instructions/{settings_id}", response_model=InstructionSettings, tags=["Settings"])
+async def get_instruction(settings_id: str) -> InstructionSettings:
+    setting = instruction_store.get(settings_id)
+    if not setting:
+        raise HTTPException(404, f"Instruction setting '{settings_id}' not found.")
+    return setting
+
+
+@app.patch("/api/instructions/{settings_id}", response_model=InstructionSettings, tags=["Settings"])
+async def update_instruction(settings_id: str, data: InstructionSettingsUpdate) -> InstructionSettings:
+    updated = instruction_store.update(settings_id, data)
+    if not updated:
+        raise HTTPException(404, f"Instruction setting '{settings_id}' not found.")
+    return updated
+
+
+@app.delete("/api/instructions/{settings_id}", tags=["Settings"])
+async def delete_instruction(settings_id: str) -> JSONResponse:
+    deleted = instruction_store.delete(settings_id)
+    if not deleted:
+        raise HTTPException(404, f"Instruction setting '{settings_id}' not found.")
+    return JSONResponse({"success": True, "message": f"Setting {settings_id} deleted."})
+
+
+# ── Generate from settings ────────────────────────────────────────────────────
+
+@app.post("/api/generate/from-settings", response_model=GenerateResponse, tags=["Prompts"])
+async def generate_from_settings(req: GenerateFromSettingsRequest) -> GenerateResponse:
     """
-    **Step 1** — Accept a raw user instruction and return a JSON manifest
-    of the proposed structured prompt. The manifest must be approved before
-    the prompt is finalized.
+    Generate a prompt manifest directly from a saved InstructionSettings.
+    API key can be passed in the request OR read from environment variables.
     """
-    logger.info("GENERATE | instruction=%r | enhance=%s | provider=%s",
-                req.instruction[:80], req.enhance, req.provider)
+    setting = instruction_store.get(req.settings_id)
+    if not setting:
+        raise HTTPException(404, f"Instruction setting '{req.settings_id}' not found.")
 
-    manifest = build_manifest(
-        instruction=req.instruction,
-        extra_context=req.extra_context,
-    )
+    # Resolve API key: request > env var
+    api_key = req.api_key
+    if not api_key and setting.provider == "huggingface":
+        api_key = os.environ.get("HF_API_KEY")
+    elif not api_key and setting.provider == "google":
+        api_key = os.environ.get("GOOGLE_API_KEY")
+
+    manifest = build_manifest_from_settings(setting)
 
-    # Optional AI enhancement pass
-    if req.enhance and req.provider != "none":
+    if setting.enhance and setting.provider != "none" and api_key:
         enhanced_text, notes = await enhance_prompt(
             raw_prompt=manifest.structured_prompt.raw_prompt_text,
-            provider=req.provider,
-            api_key=req.api_key,
+            provider=setting.provider.value,
+            api_key=api_key,
         )
-        # Patch the raw_prompt_text with the enhanced version
-        sp = manifest.structured_prompt.model_copy(
-            update={"raw_prompt_text": enhanced_text}
-        )
-        manifest = manifest.model_copy(
-            update={"structured_prompt": sp, "enhancement_notes": notes}
-        )
-        logger.info("ENHANCE | %s", notes)
+        sp = manifest.structured_prompt.model_copy(update={"raw_prompt_text": enhanced_text})
+        manifest = manifest.model_copy(update={"structured_prompt": sp, "enhancement_notes": notes})
 
+    instruction_store.increment_use_count(req.settings_id)
     store.save(manifest)
-    logger.info("SAVED   | prompt_id=%s version=%d", manifest.prompt_id, manifest.version)
+    logger.info("GENERATE_FROM_SETTINGS | settings_id=%s prompt_id=%s", req.settings_id, manifest.prompt_id)
 
     return GenerateResponse(
         success=True,
         prompt_id=manifest.prompt_id,
         manifest=manifest,
+        message=f"Generated from settings '{setting.title}'.",
     )
 
 
-# ---------------------------------------------------------------------------
-# Step 2 + 3: Human approval
-# ---------------------------------------------------------------------------
+# ── Standard Generate ─────────────────────────────────────────────────────────
+
+@app.post("/api/generate", response_model=GenerateResponse, tags=["Prompts"])
+async def generate_prompt(req: GenerateRequest) -> GenerateResponse:
+    """Generate a structured prompt from a raw instruction."""
+    logger.info("GENERATE | instruction=%r | persona=%s | style=%s | enhance=%s",
+                req.instruction[:80], req.persona, req.style, req.enhance)
+
+    # Resolve API key from env if not provided
+    api_key = req.api_key
+    if not api_key:
+        if req.provider == AIProvider.huggingface:
+            api_key = os.environ.get("HF_API_KEY")
+        elif req.provider == AIProvider.google:
+            api_key = os.environ.get("GOOGLE_API_KEY")
+
+    manifest = build_manifest(
+        instruction=req.instruction,
+        extra_context=req.extra_context,
+        persona=req.persona,
+        custom_persona=req.custom_persona,
+        style=req.style,
+        user_constraints=req.user_constraints,
+        settings_id=req.settings_id,
+    )
+
+    if req.enhance and req.provider != AIProvider.none and api_key:
+        enhanced_text, notes = await enhance_prompt(
+            raw_prompt=manifest.structured_prompt.raw_prompt_text,
+            provider=req.provider.value,
+            api_key=api_key,
+        )
+        sp = manifest.structured_prompt.model_copy(update={"raw_prompt_text": enhanced_text})
+        manifest = manifest.model_copy(update={"structured_prompt": sp, "enhancement_notes": notes})
+        logger.info("ENHANCED | %s", notes)
+
+    store.save(manifest)
+    return GenerateResponse(success=True, prompt_id=manifest.prompt_id, manifest=manifest)
+
+
+# ── Explain ───────────────────────────────────────────────────────────────────
+
+@app.get("/api/explain/{prompt_id}", response_model=ExplainResponse, tags=["Prompts"])
+async def explain_prompt(prompt_id: str) -> ExplainResponse:
+    """Return a plain-English explanation for why a prompt was structured the way it was."""
+    manifest = store.get(prompt_id)
+    if not manifest:
+        raise HTTPException(404, f"Prompt '{prompt_id}' not found.")
+    explanation, decisions = generate_explanation(manifest)
+    return ExplainResponse(
+        prompt_id=prompt_id,
+        explanation=explanation,
+        key_decisions=decisions,
+    )
+
+
+# ── Approve ───────────────────────────────────────────────────────────────────
 
 @app.post("/api/approve", response_model=ApproveResponse, tags=["Prompts"])
 async def approve_prompt(req: ApproveRequest) -> ApproveResponse:
-    """
-    **Step 2/3** — Approve (and optionally edit) a pending manifest.
-    Returns the finalized structured prompt ready for Google AI Studio.
-    """
     manifest = store.get(req.prompt_id)
     if not manifest:
-        raise HTTPException(status_code=404, detail=f"Prompt '{req.prompt_id}' not found.")
-
-    if req.edits:
-        manifest = apply_edits(manifest, req.edits)
-    else:
-        manifest = manifest.model_copy(update={"status": "approved"})
-
+        raise HTTPException(404, f"Prompt '{req.prompt_id}' not found.")
+    manifest = apply_edits(manifest, req.edits) if req.edits else manifest.model_copy(update={"status": "approved"})
     store.save(manifest)
     logger.info("APPROVED | prompt_id=%s", manifest.prompt_id)
-
     return ApproveResponse(
-        success=True,
-        prompt_id=manifest.prompt_id,
+        success=True, prompt_id=manifest.prompt_id,
         message="Prompt approved and finalized.",
         finalized_prompt=manifest.structured_prompt,
     )
 
 
-# ---------------------------------------------------------------------------
-# Step 4: Export
-# ---------------------------------------------------------------------------
+# ── Export ────────────────────────────────────────────────────────────────────
 
 @app.post("/api/export", response_model=ExportResponse, tags=["Prompts"])
 async def export_prompt(req: ExportRequest) -> ExportResponse:
-    """
-    **Step 4** — Export a finalized prompt as JSON or plain text.
-    """
     manifest = store.get(req.prompt_id)
     if not manifest:
-        raise HTTPException(status_code=404, detail=f"Prompt '{req.prompt_id}' not found.")
+        raise HTTPException(404, f"Prompt '{req.prompt_id}' not found.")
     if manifest.status not in ("approved", "exported"):
-        raise HTTPException(
-            status_code=400,
-            detail="Prompt must be approved before exporting. Call /api/approve first.",
-        )
-
+        raise HTTPException(400, "Prompt must be approved before exporting.")
     manifest = manifest.model_copy(update={"status": "exported"})
     store.save(manifest)
-    logger.info("EXPORTED | prompt_id=%s format=%s", manifest.prompt_id, req.export_format)
-
     if req.export_format == "text":
         data = manifest.structured_prompt.raw_prompt_text
     elif req.export_format == "json":
         data = manifest.structured_prompt.model_dump()
-    else:  # both
-        data = {
-            "json": manifest.structured_prompt.model_dump(),
-            "text": manifest.structured_prompt.raw_prompt_text,
-        }
-
+    else:
+        data = {"json": manifest.structured_prompt.model_dump(),
+                "text": manifest.structured_prompt.raw_prompt_text}
     return ExportResponse(success=True, prompt_id=manifest.prompt_id, data=data)
 
 
-# ---------------------------------------------------------------------------
-# Step 5: Iterative refinement
-# ---------------------------------------------------------------------------
+# ── Refine ────────────────────────────────────────────────────────────────────
 
 @app.post("/api/refine", response_model=GenerateResponse, tags=["Prompts"])
 async def refine_prompt(req: RefineRequest) -> GenerateResponse:
-    """
-    **Step 5** — Refine an existing prompt with user feedback.
-    Creates a new version (v+1) of the manifest.
-    """
     manifest = store.get(req.prompt_id)
     if not manifest:
-        raise HTTPException(status_code=404, detail=f"Prompt '{req.prompt_id}' not found.")
-
+        raise HTTPException(404, f"Prompt '{req.prompt_id}' not found.")
     refined = refine_with_feedback(manifest, req.feedback)
-
-    if req.provider != "none" and req.api_key:
+    api_key = req.api_key
+    if not api_key:
+        if req.provider == AIProvider.huggingface:
+            api_key = os.environ.get("HF_API_KEY")
+        elif req.provider == AIProvider.google:
+            api_key = os.environ.get("GOOGLE_API_KEY")
+    if req.provider != AIProvider.none and api_key:
         enhanced_text, notes = await enhance_prompt(
             raw_prompt=refined.structured_prompt.raw_prompt_text,
-            provider=req.provider,
-            api_key=req.api_key,
+            provider=req.provider.value, api_key=api_key,
         )
         sp = refined.structured_prompt.model_copy(update={"raw_prompt_text": enhanced_text})
         refined = refined.model_copy(update={"structured_prompt": sp, "enhancement_notes": notes})
-
     store.save(refined)
-    logger.info("REFINED  | prompt_id=%s new_version=%d", refined.prompt_id, refined.version)
-
+    logger.info("REFINED | prompt_id=%s version=%d", refined.prompt_id, refined.version)
     return GenerateResponse(
-        success=True,
-        prompt_id=refined.prompt_id,
-        manifest=refined,
+        success=True, prompt_id=refined.prompt_id, manifest=refined,
         message=f"Refined to v{refined.version} — awaiting approval.",
     )
 
 
-# ---------------------------------------------------------------------------
-# History
-# ---------------------------------------------------------------------------
+# ── History ───────────────────────────────────────────────────────────────────
 
 @app.get("/api/history", response_model=HistoryResponse, tags=["History"])
 async def get_history() -> HistoryResponse:
-    """Return a list of all previously generated prompts."""
     entries = store.all_entries()
     return HistoryResponse(total=len(entries), entries=entries)
 
 
 @app.get("/api/history/{prompt_id}", tags=["History"])
 async def get_prompt(prompt_id: str) -> dict:
-    """Return the full manifest for a single prompt by ID."""
     manifest = store.get(prompt_id)
     if not manifest:
-        raise HTTPException(status_code=404, detail=f"Prompt '{prompt_id}' not found.")
+        raise HTTPException(404, f"Prompt '{prompt_id}' not found.")
     return manifest.model_dump(mode="json")
 
 
 @app.delete("/api/history/{prompt_id}", tags=["History"])
 async def delete_prompt(prompt_id: str) -> JSONResponse:
-    """Delete a prompt from history."""
     deleted = store.delete(prompt_id)
     if not deleted:
-        raise HTTPException(status_code=404, detail=f"Prompt '{prompt_id}' not found.")
+        raise HTTPException(404, f"Prompt '{prompt_id}' not found.")
     return JSONResponse({"success": True, "message": f"Prompt {prompt_id} deleted."})
 
 
-# ---------------------------------------------------------------------------
-# Health
-# ---------------------------------------------------------------------------
+# ── Health ────────────────────────────────────────────────────────────────────
 
 @app.get("/health", tags=["System"])
 async def health() -> dict:
-    return {"status": "ok", "service": "PromptForge", "version": "1.0.0"}
+    return {
+        "status": "ok",
+        "service": "PromptForge",
+        "version": "3.0.0",
+        "prompts_in_memory": len(store._DB),
+        "settings_in_memory": len(instruction_store._DB),
+    }

backend/prompt_logic.py

@@ -1,107 +1,125 @@
 """
-PromptForge — Core logic to transform raw user instructions into structured prompts
-compatible with Google AI Studio.
+PromptForge — Core prompt generation logic (v3.0).
+Adds persona-aware generation, style variants, user constraints, and explanation.
 """
 from __future__ import annotations
 import re
 import uuid
 import textwrap
 from datetime import datetime
-from typing import Any, Dict, List, Optional
-
-from schemas import PromptManifest, StructuredPrompt
-
-
-# ---------------------------------------------------------------------------
-# Heuristic keyword maps used for lightweight classification
-# ---------------------------------------------------------------------------
-
-_ROLE_MAP: List[tuple[List[str], str]] = [
-    (["react", "vue", "angular", "component", "frontend", "ui", "tailwind"], "Senior Frontend Engineer"),
-    (["api", "rest", "fastapi", "flask", "django", "backend", "endpoint"], "Senior Backend Engineer"),
-    (["sql", "database", "postgres", "mongo", "query", "schema"], "Database Architect"),
-    (["test", "unittest", "pytest", "jest", "coverage", "tdd"], "QA / Test Automation Engineer"),
-    (["devops", "docker", "kubernetes", "ci/cd", "deploy", "cloud", "terraform"], "DevOps / Cloud Engineer"),
-    (["machine learning", "ml", "model", "training", "dataset", "neural", "pytorch", "tensorflow"], "Machine Learning Engineer"),
-    (["data analysis", "pandas", "numpy", "visualization", "chart", "plot"], "Data Scientist"),
-    (["security", "auth", "oauth", "jwt", "encrypt", "pentest"], "Security Engineer"),
-    (["write", "blog", "article", "essay", "copy", "content"], "Professional Content Writer"),
-    (["summarize", "summary", "tldr", "abstract"], "Technical Summarizer"),
-    (["translate", "localize", "language"], "Multilingual Translation Specialist"),
+from typing import Any, Dict, List, Optional, Tuple
+
+from schemas import (
+    PromptManifest, StructuredPrompt, PersonaType, StyleType,
+    InstructionSettings,
+)
+
+
+# ── Persona definitions ──────────────────────────────────────────────────────
+
+_PERSONA_ROLES: Dict[PersonaType, str] = {
+    PersonaType.default:        "General AI Assistant",
+    PersonaType.senior_dev:     "Senior Software Engineer with 10+ years of experience",
+    PersonaType.data_scientist: "Senior Data Scientist specializing in ML/AI pipelines",
+    PersonaType.tech_writer:    "Technical Writer producing clear, precise developer documentation",
+    PersonaType.product_mgr:    "Product Manager focused on user-centric, data-driven decisions",
+    PersonaType.security_eng:   "Security Engineer with expertise in threat modeling and secure coding",
+    PersonaType.custom:         "",  # filled from custom_persona field
+}
+
+_STYLE_DESCRIPTIONS: Dict[StyleType, str] = {
+    StyleType.professional: "Professional and clear; balance technical accuracy with readability. Use precise language.",
+    StyleType.concise:      "Ultra-concise; bullet points preferred; zero filler words. Every sentence must add value.",
+    StyleType.detailed:     "Thoroughly detailed; explain every decision; include rationale, alternatives considered, and trade-offs.",
+    StyleType.beginner:     "Beginner-friendly; avoid jargon; explain acronyms; use analogies and step-by-step breakdowns.",
+    StyleType.formal:       "Formal prose; structured with headings; professional tone suitable for reports or specifications.",
+    StyleType.creative:     "Engaging and vivid; use narrative techniques; make dry content interesting without sacrificing accuracy.",
+}
+
+_HEURISTIC_ROLES: List[Tuple[List[str], str]] = [
+    (["react", "vue", "angular", "component", "frontend", "ui", "tailwind", "svelte"], "Senior Frontend Engineer"),
+    (["api", "rest", "fastapi", "flask", "django", "backend", "endpoint", "graphql"], "Senior Backend Engineer"),
+    (["sql", "database", "postgres", "mongo", "redis", "query", "schema", "orm"], "Database Architect"),
+    (["test", "unittest", "pytest", "jest", "coverage", "tdd", "bdd", "e2e"], "QA / Test Automation Engineer"),
+    (["devops", "docker", "kubernetes", "ci/cd", "deploy", "cloud", "terraform", "helm"], "DevOps / Cloud Engineer"),
+    (["machine learning", "ml", "model", "training", "dataset", "neural", "pytorch", "tensorflow", "llm"], "Machine Learning Engineer"),
+    (["data analysis", "pandas", "numpy", "visualization", "chart", "plot", "etl", "pipeline"], "Data Scientist"),
+    (["security", "auth", "oauth", "jwt", "encrypt", "pentest", "vulnerability", "cve"], "Security Engineer"),
+    (["write", "blog", "article", "essay", "copy", "content", "documentation", "readme"], "Technical Writer"),
+    (["summarize", "summary", "tldr", "abstract", "extract", "distill"], "Technical Summarizer"),
+    (["translate", "localize", "i18n", "l10n", "language"], "Multilingual Specialist"),
+    (["product", "roadmap", "user story", "backlog", "sprint", "okr", "kpi"], "Product Manager"),
+    (["sql", "bi", "dashboard", "report", "analytics", "metrics"], "Business Intelligence Analyst"),
 ]
 
-_STYLE_MAP: List[tuple[List[str], str]] = [
-    (["simple", "beginner", "basic", "easy", "novice"], "Clear, simple language; avoid jargon; explain every step."),
-    (["expert", "advanced", "senior", "professional"], "Concise, technically precise; assume expert knowledge."),
-    (["formal", "report", "documentation", "spec"], "Formal prose; structured headings; professional tone."),
-    (["creative", "story", "narrative", "fiction"], "Engaging, vivid language; narrative structure."),
+_CONSTRAINT_PATTERNS: List[Tuple[str, str]] = [
+    (r"\btypescript\b",                  "Use TypeScript with strict mode enabled."),
+    (r"\bpython\b",                      "Use Python 3.10+; follow PEP-8 style guide."),
+    (r"\btailwind(?:css)?\b",                    "Use TailwindCSS utility classes only; avoid custom CSS unless unavoidable."),
+    (r"\bunit test[s]?\b|\bjest\b|\bpytest\b", "Include comprehensive unit tests with ≥80% coverage."),
+    (r"\bjson\b",                        "All structured data must be valid, parseable JSON."),
+    (r"\baccessib\w+\b",                 "Ensure WCAG 2.1 AA accessibility compliance."),
+    (r"\bresponsive\b",                  "Design must be fully responsive for mobile, tablet, and desktop."),
+    (r"\bdocker\b",                      "Provide a Dockerfile and docker-compose.yml."),
+    (r"\bno comment[s]?\b",              "Do not include inline code comments."),
+    (r"\bcomment[s]?\b",                 "Include clear, concise inline comments explaining non-obvious logic."),
+    (r"\berror handling\b|\bexception\b","Include comprehensive error/exception handling with meaningful messages."),
+    (r"\blogg?ing\b",                    "Add structured logging at appropriate severity levels."),
+    (r"\bpagination\b",                  "Implement cursor- or offset-based pagination."),
+    (r"\bcach(e|ing)\b",                 "Implement caching with appropriate TTL and invalidation."),
+    (r"\bsecurity\b|\bauth\b",           "Follow OWASP security guidelines; validate and sanitize all inputs."),
 ]
 
 _SAFETY_DEFAULTS: List[str] = [
     "Do not produce harmful, misleading, or unethical content.",
     "Respect intellectual property; do not reproduce copyrighted material verbatim.",
-    "If the request is ambiguous or potentially harmful, ask for clarification rather than guessing.",
+    "If the request is ambiguous or potentially harmful, ask for clarification.",
     "Adhere to Google AI Studio usage policies and Responsible AI guidelines.",
-]
-
-_CONSTRAINT_PATTERNS: List[tuple[str, str]] = [
-    (r"\btypescript\b", "Use TypeScript with strict mode enabled."),
-    (r"\bpython\b", "Use Python 3.10+; follow PEP-8 style guide."),
-    (r"\btailwind\b", "Use TailwindCSS utility classes exclusively; avoid custom CSS unless unavoidable."),
-    (r"\bunit test[s]?\b|\bjest\b|\bpytest\b", "Include comprehensive unit tests with >80% coverage."),
-    (r"\bjson\b", "All structured data must be valid, parseable JSON."),
-    (r"\baccessib\w+\b", "Ensure WCAG 2.1 AA accessibility compliance."),
-    (r"\bresponsive\b", "Design must be fully responsive for mobile, tablet, and desktop."),
-    (r"\bdocker\b", "Provide a Dockerfile and docker-compose.yml."),
-    (r"\bno comment[s]?\b", "Do not include inline code comments."),
-    (r"\bcomment[s]?\b", "Include clear, concise inline comments explaining non-obvious logic."),
+    "Do not expose sensitive data, API keys, passwords, or PII in any output.",
 ]
 
 
-# ---------------------------------------------------------------------------
-# Public API
-# ---------------------------------------------------------------------------
+# ── Public API ───────────────────────────────────────────────────────────────
 
 def build_manifest(
     instruction: str,
     extra_context: Optional[str] = None,
     version: int = 1,
     existing_id: Optional[str] = None,
+    persona: PersonaType = PersonaType.default,
+    custom_persona: Optional[str] = None,
+    style: StyleType = StyleType.professional,
+    user_constraints: Optional[List[str]] = None,
+    settings_id: Optional[str] = None,
 ) -> PromptManifest:
-    """Transform a raw instruction string into a full PromptManifest."""
+    """Transform a raw instruction into a full PromptManifest."""
     prompt_id = existing_id or str(uuid.uuid4())
     lower = instruction.lower()
 
-    role = _infer_role(lower)
-    task = _infer_task(instruction)
-    input_fmt = _infer_input_format(lower)
+    role = _resolve_role(persona, custom_persona, lower)
+    task = _format_task(instruction)
+    input_fmt  = _infer_input_format(lower)
     output_fmt = _infer_output_format(lower)
-    constraints = _infer_constraints(lower)
-    style = _infer_style(lower)
+    constraints = _build_constraints(lower, user_constraints or [])
+    style_desc = _STYLE_DESCRIPTIONS.get(style, _STYLE_DESCRIPTIONS[StyleType.professional])
     safety = list(_SAFETY_DEFAULTS)
     examples = _build_examples(lower, role)
 
     raw_text = _render_raw_prompt(
-        role=role,
-        task=task,
-        input_fmt=input_fmt,
-        output_fmt=output_fmt,
-        constraints=constraints,
-        style=style,
-        safety=safety,
-        examples=examples,
-        extra_context=extra_context,
+        role=role, task=task, input_fmt=input_fmt, output_fmt=output_fmt,
+        constraints=constraints, style=style_desc, safety=safety,
+        examples=examples, extra_context=extra_context,
+    )
+    explanation = _generate_explanation(
+        role=role, instruction=instruction, constraints=constraints,
+        persona=persona, style=style,
     )
 
     structured = StructuredPrompt(
-        role=role,
-        task=task,
-        input_format=input_fmt,
-        output_format=output_fmt,
-        constraints=constraints,
-        style=style,
-        safety=safety,
-        examples=examples,
+        role=role, task=task,
+        input_format=input_fmt, output_format=output_fmt,
+        constraints=constraints, style=style_desc,
+        safety=safety, examples=examples,
         raw_prompt_text=raw_text,
     )
 
@@ -112,54 +130,82 @@ def build_manifest(
         instruction=instruction,
         status="pending",
         structured_prompt=structured,
+        explanation=explanation,
+        settings_id=settings_id,
+        persona_used=persona,
+        style_used=style,
     )
 
 
-def apply_edits(manifest: PromptManifest, edits: Dict[str, Any]) -> PromptManifest:
-    """Apply user edits to an existing manifest and regenerate raw text."""
-    sp = manifest.structured_prompt.model_copy(update=edits)
-    sp = sp.model_copy(
-        update={
-            "raw_prompt_text": _render_raw_prompt(
-                role=sp.role,
-                task=sp.task,
-                input_fmt=sp.input_format,
-                output_fmt=sp.output_format,
-                constraints=sp.constraints,
-                style=sp.style,
-                safety=sp.safety,
-                examples=sp.examples,
-            )
-        }
-    )
-    return manifest.model_copy(
-        update={"structured_prompt": sp, "status": "approved"}
+def build_manifest_from_settings(settings: InstructionSettings) -> PromptManifest:
+    """Convenience: build a manifest from a saved InstructionSettings object."""
+    return build_manifest(
+        instruction=settings.instruction,
+        extra_context=settings.extra_context,
+        persona=settings.persona,
+        custom_persona=settings.custom_persona,
+        style=settings.style,
+        user_constraints=settings.constraints,
+        settings_id=settings.settings_id,
     )
 
 
-def refine_with_feedback(manifest: PromptManifest, feedback: str) -> PromptManifest:
-    """Naively incorporate textual feedback into the task description (pre-AI fallback)."""
-    new_task = manifest.structured_prompt.task + f"\n\nAdditional requirements from user feedback:\n{feedback}"
+def apply_edits(manifest: PromptManifest, edits: Dict[str, Any]) -> PromptManifest:
+    sp = manifest.structured_prompt.model_copy(update=edits)
+    sp = sp.model_copy(update={
+        "raw_prompt_text": _render_raw_prompt(
+            role=sp.role, task=sp.task,
+            input_fmt=sp.input_format, output_fmt=sp.output_format,
+            constraints=sp.constraints, style=sp.style,
+            safety=sp.safety, examples=sp.examples,
+        )
+    })
+    return manifest.model_copy(update={"structured_prompt": sp, "status": "approved"})
+
+
+def refine_with_feedback(
+    manifest: PromptManifest,
+    feedback: str,
+) -> PromptManifest:
+    """Incorporate textual feedback and bump the version."""
     return build_manifest(
         instruction=manifest.instruction + " " + feedback,
         version=manifest.version + 1,
         existing_id=manifest.prompt_id,
+        persona=manifest.persona_used,
+        style=manifest.style_used,
+        settings_id=manifest.settings_id,
+    )
+
+
+def generate_explanation(manifest: PromptManifest) -> Tuple[str, List[str]]:
+    """Return (explanation_text, key_decisions[]) for a manifest."""
+    explanation = manifest.explanation or _generate_explanation(
+        role=manifest.structured_prompt.role,
+        instruction=manifest.instruction,
+        constraints=manifest.structured_prompt.constraints,
+        persona=manifest.persona_used,
+        style=manifest.style_used,
     )
+    decisions = _extract_key_decisions(manifest)
+    return explanation, decisions
 
 
-# ---------------------------------------------------------------------------
-# Private helpers
-# ---------------------------------------------------------------------------
+# ── Private helpers ──────────────────────────────────────────────────────────
 
-def _infer_role(lower: str) -> str:
-    for keywords, role in _ROLE_MAP:
+def _resolve_role(persona: PersonaType, custom_persona: Optional[str], lower: str) -> str:
+    if persona == PersonaType.custom and custom_persona:
+        return custom_persona
+    if persona != PersonaType.default:
+        return _PERSONA_ROLES.get(persona, "General AI Assistant")
+    # Heuristic fallback
+    for keywords, role in _HEURISTIC_ROLES:
         if any(kw in lower for kw in keywords):
             return role
     return "General AI Assistant"
 
 
-def _infer_task(instruction: str) -> str:
-    # Sentence-case the instruction and ensure it ends with a period
+def _format_task(instruction: str) -> str:
     task = instruction.strip()
     if not task.endswith((".", "!", "?")):
         task += "."
@@ -167,71 +213,114 @@ def _infer_task(instruction: str) -> str:
 
 
 def _infer_input_format(lower: str) -> str:
-    if any(k in lower for k in ["json", "object", "dict"]):
+    if any(k in lower for k in ["json", "object", "dict", "payload"]):
         return "A JSON object containing the relevant fields described in the task."
-    if any(k in lower for k in ["file", "upload", "csv", "pdf"]):
-        return "A file upload (the file path or base64-encoded content will be provided)."
-    if any(k in lower for k in ["image", "photo", "screenshot", "diagram"]):
-        return "An image or screenshot provided as a URL or base64 string."
-    return "A plain-text string describing the user's request or the content to process."
+    if any(k in lower for k in ["file", "upload", "csv", "pdf", "spreadsheet"]):
+        return "A file (provide file path, URL, or base64-encoded content)."
+    if any(k in lower for k in ["image", "photo", "screenshot", "diagram", "figure"]):
+        return "An image provided as a URL or base64-encoded string."
+    if any(k in lower for k in ["url", "link", "website", "webpage"]):
+        return "A URL or list of URLs to process."
+    return "A plain-text string describing the user's request or content to process."
 
 
 def _infer_output_format(lower: str) -> str:
-    if any(k in lower for k in ["json", "structured", "object"]):
-        return "A well-formatted JSON object with clearly named keys. Include no extra prose outside the JSON block."
-    if any(k in lower for k in ["markdown", "md", "readme", "documentation"]):
+    if any(k in lower for k in ["json", "structured", "object", "dict"]):
+        return "A well-formatted JSON object with clearly named keys. No extra prose outside the JSON block."
+    if any(k in lower for k in ["markdown", "md", "readme", "documentation", "doc"]):
         return "A Markdown-formatted document with appropriate headers, code blocks, and lists."
-    if any(k in lower for k in ["code", "script", "function", "class", "component"]):
-        return "Source code inside a properly labeled fenced code block (e.g., ```typescript ... ```). Include a brief explanation before and after the block."
-    if any(k in lower for k in ["list", "bullet", "steps"]):
+    if any(k in lower for k in ["code", "script", "function", "class", "component", "snippet"]):
+        return "Source code inside a properly labeled fenced code block. Include a brief explanation before and after."
+    if any(k in lower for k in ["list", "bullet", "steps", "enumerat"]):
         return "A numbered or bulleted list with concise, actionable items."
+    if any(k in lower for k in ["report", "analysis", "summary"]):
+        return "A structured report with an executive summary, body sections, and key findings."
+    if any(k in lower for k in ["table", "comparison", "matrix"]):
+        return "A Markdown table with clearly labeled columns and rows."
     return "A clear, well-structured plain-text response."
 
 
-def _infer_constraints(lower: str) -> List[str]:
+def _build_constraints(lower: str, user_constraints: List[str]) -> List[str]:
     found: List[str] = []
     for pattern, constraint in _CONSTRAINT_PATTERNS:
         if re.search(pattern, lower):
             found.append(constraint)
+    # Merge with user-provided constraints (dedup)
+    for uc in user_constraints:
+        if uc.strip() and uc.strip() not in found:
+            found.append(uc.strip())
     if not found:
         found.append("Keep the response concise and directly relevant to the task.")
     return found
 
 
-def _infer_style(lower: str) -> str:
-    for keywords, style in _STYLE_MAP:
-        if any(kw in lower for kw in keywords):
-            return style
-    return "Professional and clear; balance technical accuracy with readability."
-
-
 def _build_examples(lower: str, role: str) -> Optional[List[Dict[str, str]]]:
-    """Return 1 few-shot example where applicable."""
     if "react" in lower or "component" in lower:
-        return [
-            {
-                "input": "Create a Button component.",
-                "output": "```tsx\ninterface ButtonProps { label: string; onClick: () => void; }\nexport const Button = ({ label, onClick }: ButtonProps) => (\n  <button onClick={onClick} className='px-4 py-2 bg-blue-600 text-white rounded'>{label}</button>\n);\n```",
-            }
-        ]
+        return [{"input": "Create a Button component.",
+                 "output": "```tsx\ninterface ButtonProps { label: string; onClick: () => void; }\nexport const Button = ({ label, onClick }: ButtonProps) => (\n  <button onClick={onClick} className='px-4 py-2 bg-indigo-600 text-white rounded'>{label}</button>\n);\n```"}]
     if "summarize" in lower or "summary" in lower:
-        return [
-            {
-                "input": "Summarize: 'The quick brown fox jumps over the lazy dog repeatedly.'",
-                "output": "A fox repeatedly jumps over a dog.",
-            }
-        ]
+        return [{"input": "Summarize: 'The quick brown fox jumps over the lazy dog.'",
+                 "output": "A fox jumps over a dog."}]
+    if "fastapi" in lower or ("api" in lower and "endpoint" in lower):
+        return [{"input": "Create a GET /users endpoint.",
+                 "output": '```python\n@router.get("/users", response_model=list[UserOut])\nasync def list_users(db: Session = Depends(get_db)):\n    return db.query(User).all()\n```'}]
+    if "sql" in lower or "query" in lower:
+        return [{"input": "Get all users created this month.",
+                 "output": "```sql\nSELECT * FROM users\nWHERE created_at >= DATE_TRUNC('month', NOW());\n```"}]
     return None
 
 
-def _render_raw_prompt(
+def _generate_explanation(
     role: str,
-    task: str,
-    input_fmt: str,
-    output_fmt: str,
+    instruction: str,
     constraints: List[str],
-    style: str,
-    safety: List[str],
+    persona: PersonaType,
+    style: StyleType,
+) -> str:
+    lines = [
+        f"This prompt was engineered to elicit optimal output from a '{role}' persona.",
+        "",
+        f"**Why this role?** The instruction '{instruction[:80]}...' contains terminology "
+        f"most naturally handled by a {role}. Assigning the right role primes the AI's "
+        f"response patterns toward domain-specific knowledge and conventions.",
+        "",
+        f"**Why the '{style.value}' style?** The selected style ({style.value}) ensures the "
+        f"output matches the intended audience — adjusting verbosity, formality, and "
+        f"technical depth accordingly.",
+        "",
+        "**Why these constraints?**",
+    ]
+    for c in constraints[:4]:
+        lines.append(f"- {c}")
+    lines += [
+        "",
+        "**Safety section:** Every prompt includes guardrails aligned with Google AI Studio "
+        "Responsible AI policies. These prevent generation of harmful, misleading, or "
+        "policy-violating content.",
+        "",
+        "**Few-shot examples:** Where applicable, a concrete input→output example is included "
+        "to guide the model's output format and quality level.",
+    ]
+    return "\n".join(lines)
+
+
+def _extract_key_decisions(manifest: PromptManifest) -> List[str]:
+    sp = manifest.structured_prompt
+    decisions = [
+        f"Role assigned: {sp.role}",
+        f"Style applied: {manifest.style_used.value} — {_STYLE_DESCRIPTIONS[manifest.style_used][:60]}…",
+        f"Output format type: {sp.output_format[:60]}…",
+        f"{len(sp.constraints)} constraint(s) inferred + user-defined",
+        f"{len(sp.safety)} safety guardrail(s) applied",
+    ]
+    if sp.examples:
+        decisions.append(f"{len(sp.examples)} few-shot example(s) injected")
+    return decisions
+
+
+def _render_raw_prompt(
+    role: str, task: str, input_fmt: str, output_fmt: str,
+    constraints: List[str], style: str, safety: List[str],
     examples: Optional[List[Dict[str, str]]] = None,
     extra_context: Optional[str] = None,
 ) -> str:
@@ -244,21 +333,16 @@ def _render_raw_prompt(
     ]
     for i, c in enumerate(constraints, 1):
         lines.append(f"{i}. {c}")
-
     lines.append(f"\n## STYLE & TONE\n{style}")
-
     lines.append("\n## SAFETY GUIDELINES")
     for i, s in enumerate(safety, 1):
         lines.append(f"{i}. {s}")
-
     if extra_context:
         lines.append(f"\n## ADDITIONAL CONTEXT\n{extra_context}")
-
     if examples:
         lines.append("\n## FEW-SHOT EXAMPLES")
         for ex in examples:
             lines.append(f"**Input:** {ex['input']}")
             lines.append(f"**Output:** {ex['output']}\n")
-
-    lines.append("\n---\n*Prompt generated by PromptForge — compatible with Google AI Studio.*")
+    lines.append("\n---\n*Prompt generated by PromptForge v3.0 — compatible with Google AI Studio.*")
     return "\n".join(lines)

backend/schemas.py

@@ -1,5 +1,6 @@
 """
-PromptForge — Pydantic schemas for request/response validation.
+PromptForge — Pydantic schemas (v3.0)
+Adds InstructionSettings, ExplainResponse, and EnvVarConfig.
 """
 from __future__ import annotations
 from typing import Any, Dict, List, Optional
@@ -8,111 +9,173 @@ from enum import Enum
 from pydantic import BaseModel, Field
 
 
-# ---------------------------------------------------------------------------
-# Enumerations
-# ---------------------------------------------------------------------------
+# ── Enumerations ────────────────────────────────────────────────────────────
 
 class OutputFormat(str, Enum):
     text = "text"
     json = "json"
     both = "both"
 
-
 class AIProvider(str, Enum):
     none = "none"
     huggingface = "huggingface"
     google = "google"
 
+class PersonaType(str, Enum):
+    default       = "default"
+    senior_dev    = "senior_dev"
+    data_scientist= "data_scientist"
+    tech_writer   = "tech_writer"
+    product_mgr   = "product_mgr"
+    security_eng  = "security_eng"
+    custom        = "custom"
+
+class StyleType(str, Enum):
+    professional = "professional"
+    concise      = "concise"
+    detailed     = "detailed"
+    beginner     = "beginner"
+    formal       = "formal"
+    creative     = "creative"
+
+
+# ── InstructionSettings (the new core model) ───────────────────────────────
+
+class InstructionSettings(BaseModel):
+    settings_id: str = Field(..., description="Unique ID for this saved instruction setting.")
+    title: str = Field(..., min_length=2, max_length=120,
+        description="Human-readable name for this instruction template.")
+    description: Optional[str] = Field(None, max_length=1000,
+        description="Optional context or notes about this setting.")
+    instruction: str = Field(..., min_length=5, max_length=8000,
+        description="The raw instruction/task text.")
+    extra_context: Optional[str] = Field(None, max_length=2000,
+        description="Additional constraints or background info.")
+    output_format: OutputFormat = Field(OutputFormat.both)
+    persona: PersonaType = Field(PersonaType.default,
+        description="The AI persona to use for generation.")
+    custom_persona: Optional[str] = Field(None, max_length=200,
+        description="Custom persona text (when persona=custom).")
+    style: StyleType = Field(StyleType.professional)
+    constraints: List[str] = Field(default_factory=list,
+        description="User-defined constraint strings.")
+    tags: List[str] = Field(default_factory=list,
+        description="Free-form tags for filtering.")
+    provider: AIProvider = Field(AIProvider.none)
+    enhance: bool = Field(False)
+    created_at: datetime = Field(default_factory=datetime.utcnow)
+    updated_at: datetime = Field(default_factory=datetime.utcnow)
+    use_count: int = Field(0, description="How many times this setting was used to generate.")
+
+
+class InstructionSettingsCreate(BaseModel):
+    """Request model — subset of InstructionSettings without auto fields."""
+    title: str = Field(..., min_length=2, max_length=120)
+    description: Optional[str] = Field(None, max_length=1000)
+    instruction: str = Field(..., min_length=5, max_length=8000)
+    extra_context: Optional[str] = Field(None, max_length=2000)
+    output_format: OutputFormat = Field(OutputFormat.both)
+    persona: PersonaType = Field(PersonaType.default)
+    custom_persona: Optional[str] = Field(None, max_length=200)
+    style: StyleType = Field(StyleType.professional)
+    constraints: List[str] = Field(default_factory=list)
+    tags: List[str] = Field(default_factory=list)
+    provider: AIProvider = Field(AIProvider.none)
+    enhance: bool = Field(False)
 
-# ---------------------------------------------------------------------------
-# Request models
-# ---------------------------------------------------------------------------
+
+class InstructionSettingsUpdate(BaseModel):
+    title: Optional[str] = Field(None, max_length=120)
+    description: Optional[str] = None
+    instruction: Optional[str] = Field(None, min_length=5, max_length=8000)
+    extra_context: Optional[str] = None
+    output_format: Optional[OutputFormat] = None
+    persona: Optional[PersonaType] = None
+    custom_persona: Optional[str] = None
+    style: Optional[StyleType] = None
+    constraints: Optional[List[str]] = None
+    tags: Optional[List[str]] = None
+    provider: Optional[AIProvider] = None
+    enhance: Optional[bool] = None
+
+
+class InstructionSettingsList(BaseModel):
+    total: int
+    items: List[InstructionSettings]
+
+
+# ── Existing prompt models (unchanged) ─────────────────────────────────────
 
 class GenerateRequest(BaseModel):
-    instruction: str = Field(
-        ...,
-        min_length=5,
-        max_length=8000,
-        description="Raw user instruction, description, or task to convert into a structured prompt.",
-        example="Generate a TypeScript React component with TailwindCSS and unit tests.",
-    )
-    output_format: OutputFormat = Field(
-        OutputFormat.both,
-        description="Desired output format: 'text', 'json', or 'both'.",
-    )
-    provider: AIProvider = Field(
-        AIProvider.none,
-        description="Optional AI provider to use for iterative enhancement.",
-    )
-    api_key: Optional[str] = Field(
-        None,
-        description="API key for the selected provider (never stored in logs).",
-    )
-    enhance: bool = Field(
-        False,
-        description="If True, call the selected AI provider to iteratively refine the prompt.",
-    )
-    extra_context: Optional[str] = Field(
-        None,
-        max_length=2000,
-        description="Optional additional context or constraints for the prompt.",
-    )
+    instruction: str = Field(..., min_length=5, max_length=8000)
+    output_format: OutputFormat = Field(OutputFormat.both)
+    provider: AIProvider = Field(AIProvider.none)
+    api_key: Optional[str] = Field(None)
+    enhance: bool = Field(False)
+    extra_context: Optional[str] = Field(None, max_length=2000)
+    # New fields from settings
+    persona: PersonaType = Field(PersonaType.default)
+    custom_persona: Optional[str] = Field(None, max_length=200)
+    style: StyleType = Field(StyleType.professional)
+    user_constraints: List[str] = Field(default_factory=list)
+    settings_id: Optional[str] = Field(None,
+        description="If provided, links this generation to a saved settings.")
+
+
+class GenerateFromSettingsRequest(BaseModel):
+    settings_id: str
+    api_key: Optional[str] = Field(None,
+        description="API key (overrides env var if provided).")
 
 
 class ApproveRequest(BaseModel):
-    prompt_id: str = Field(..., description="ID of the pending prompt manifest to approve.")
-    edits: Optional[Dict[str, Any]] = Field(
-        None,
-        description="Optional user edits to apply before finalizing.",
-    )
+    prompt_id: str
+    edits: Optional[Dict[str, Any]] = None
 
 
 class ExportRequest(BaseModel):
-    prompt_id: str = Field(..., description="ID of the finalized prompt to export.")
+    prompt_id: str
     export_format: OutputFormat = Field(OutputFormat.json)
 
 
 class RefineRequest(BaseModel):
-    prompt_id: str = Field(..., description="ID of a previously generated prompt to refine.")
-    feedback: str = Field(
-        ...,
-        min_length=3,
-        max_length=2000,
-        description="User feedback describing changes needed.",
-    )
+    prompt_id: str
+    feedback: str = Field(..., min_length=3, max_length=2000)
     provider: AIProvider = Field(AIProvider.none)
     api_key: Optional[str] = Field(None)
 
 
-# ---------------------------------------------------------------------------
-# Inner prompt structure
-# ---------------------------------------------------------------------------
+# ── Structured prompt ───────────────────────────────────────────────────────
 
 class StructuredPrompt(BaseModel):
-    role: str = Field(..., description="The persona or role the AI should adopt.")
-    task: str = Field(..., description="Clear description of the task to perform.")
-    input_format: str = Field(..., description="Expected input format and fields.")
-    output_format: str = Field(..., description="Expected output format and fields.")
-    constraints: List[str] = Field(default_factory=list, description="Hard constraints the AI must respect.")
-    style: str = Field(..., description="Tone, style, and voice guidelines.")
-    safety: List[str] = Field(default_factory=list, description="Safety and ethical guardrails.")
-    examples: Optional[List[Dict[str, str]]] = Field(None, description="Few-shot examples (input/output pairs).")
-    raw_prompt_text: str = Field(..., description="Formatted plain-text prompt ready for copy-paste into Google AI Studio.")
+    role: str
+    task: str
+    input_format: str
+    output_format: str
+    constraints: List[str] = Field(default_factory=list)
+    style: str
+    safety: List[str] = Field(default_factory=list)
+    examples: Optional[List[Dict[str, str]]] = None
+    raw_prompt_text: str
 
 
 class PromptManifest(BaseModel):
-    prompt_id: str = Field(..., description="Unique identifier for this manifest.")
-    version: int = Field(1, description="Version counter for iterative refinement.")
+    prompt_id: str
+    version: int = 1
     created_at: datetime = Field(default_factory=datetime.utcnow)
-    instruction: str = Field(..., description="Original user instruction.")
-    status: str = Field("pending", description="pending | approved | exported")
+    instruction: str
+    status: str = "pending"
     structured_prompt: StructuredPrompt
-    enhancement_notes: Optional[str] = Field(None, description="Notes from AI enhancement pass.")
+    enhancement_notes: Optional[str] = None
+    explanation: Optional[str] = Field(None,
+        description="Plain-English explanation of why this prompt was structured this way.")
+    settings_id: Optional[str] = Field(None,
+        description="Linked InstructionSettings ID if generated from settings.")
+    persona_used: PersonaType = Field(PersonaType.default)
+    style_used: StyleType = Field(StyleType.professional)
 
 
-# ---------------------------------------------------------------------------
-# Response models
-# ---------------------------------------------------------------------------
+# ── Response models ─────────────────────────────────────────────────────────
 
 class GenerateResponse(BaseModel):
     success: bool
@@ -131,7 +194,14 @@ class ApproveResponse(BaseModel):
 class ExportResponse(BaseModel):
     success: bool
     prompt_id: str
-    data: Any  # JSON dict or plain text string
+    data: Any
+
+
+class ExplainResponse(BaseModel):
+    prompt_id: str
+    explanation: str
+    key_decisions: List[str] = Field(default_factory=list,
+        description="Bullet-point list of key structural decisions made.")
 
 
 class HistoryEntry(BaseModel):
@@ -140,8 +210,20 @@ class HistoryEntry(BaseModel):
     created_at: datetime
     instruction: str
     status: str
+    settings_id: Optional[str] = None
+    explanation: Optional[str] = None
 
 
 class HistoryResponse(BaseModel):
     total: int
     entries: List[HistoryEntry]
+
+
+# ── Env config (for UI-driven key management) ───────────────────────────────
+
+class EnvConfigStatus(BaseModel):
+    """Read-only status of which API keys are configured in the environment."""
+    hf_key_set: bool = Field(..., description="True if HF_API_KEY env var is present.")
+    google_key_set: bool = Field(..., description="True if GOOGLE_API_KEY env var is present.")
+    port: str = "7860"
+    version: str = "3.0"

backend/store.py

@@ -1,12 +1,8 @@
 """
-PromptForge — In-memory store with optional JSON-file persistence.
-In production, swap this for a proper database (PostgreSQL, SQLite, etc.).
+PromptForge — In-memory store with JSON persistence for PromptManifests.
 """
 from __future__ import annotations
-import json
-import os
-import logging
-from copy import deepcopy
+import json, os, logging
 from datetime import datetime
 from pathlib import Path
 from typing import Dict, List, Optional
@@ -21,10 +17,6 @@ _LOG_DIR.mkdir(parents=True, exist_ok=True)
 _PERSIST_FILE = _LOG_DIR / "prompt_history.json"
 
 
-# ---------------------------------------------------------------------------
-# CRUD
-# ---------------------------------------------------------------------------
-
 def save(manifest: PromptManifest) -> None:
     _DB[manifest.prompt_id] = manifest
     _persist()
@@ -42,6 +34,8 @@ def all_entries() -> List[HistoryEntry]:
             created_at=m.created_at,
             instruction=m.instruction,
             status=m.status,
+            settings_id=m.settings_id,
+            explanation=m.explanation,
         )
         for m in sorted(_DB.values(), key=lambda x: x.created_at, reverse=True)
     ]
@@ -55,10 +49,6 @@ def delete(prompt_id: str) -> bool:
     return False
 
 
-# ---------------------------------------------------------------------------
-# Persistence
-# ---------------------------------------------------------------------------
-
 def _persist() -> None:
     try:
         data = [m.model_dump(mode="json") for m in _DB.values()]
@@ -68,7 +58,6 @@ def _persist() -> None:
 
 
 def load_from_disk() -> None:
-    """Call once at startup to reload previous sessions."""
     if not _PERSIST_FILE.exists():
         return
     try:

backend/tests/test_promptforge.py

@@ -1,24 +1,34 @@
 """
-PromptForge — Unit tests for prompt logic, schemas, and API routes.
-Run with: pytest tests/ -v
+PromptForge v3.0 — Comprehensive tests.
+Run: cd backend && pytest tests/ -v --tb=short
 """
 from __future__ import annotations
-import sys
-import os
-
-# Make backend importable
+import sys, os
 sys.path.insert(0, os.path.dirname(os.path.dirname(__file__)))
 
 import pytest
 from fastapi.testclient import TestClient
+from prompt_logic import build_manifest, apply_edits, refine_with_feedback, generate_explanation
+from schemas import (
+    PromptManifest, PersonaType, StyleType, OutputFormat,
+    InstructionSettingsCreate, AIProvider,
+)
+import instruction_store as istore
+
 
-from prompt_logic import build_manifest, apply_edits, refine_with_feedback
-from schemas import PromptManifest, GenerateRequest, OutputFormat, AIProvider
+# ── Fixtures ─────────────────────────────────────────────────────────────────
 
+@pytest.fixture(autouse=True)
+def reset_stores():
+    """Reset in-memory stores before each test."""
+    from store import _DB as prompt_db
+    from instruction_store import _DB as settings_db
+    prompt_db.clear()
+    settings_db.clear()
+    yield
+    prompt_db.clear()
+    settings_db.clear()
 
-# ---------------------------------------------------------------------------
-# Fixtures
-# ---------------------------------------------------------------------------
 
 @pytest.fixture
 def client():
@@ -27,178 +37,342 @@ def client():
 
 
 @pytest.fixture
-def sample_instruction():
+def react_instruction():
     return "Generate a TypeScript React component with TailwindCSS and unit tests."
 
 
 @pytest.fixture
-def sample_manifest(sample_instruction):
-    return build_manifest(sample_instruction)
+def react_manifest(react_instruction):
+    return build_manifest(react_instruction)
 
 
-# ---------------------------------------------------------------------------
-# prompt_logic tests
-# ---------------------------------------------------------------------------
+@pytest.fixture
+def sample_settings_data():
+    return InstructionSettingsCreate(
+        title="Test Setting",
+        description="A test instruction setting",
+        instruction="Write a Python function that validates email addresses.",
+        output_format=OutputFormat.both,
+        persona=PersonaType.senior_dev,
+        style=StyleType.professional,
+        constraints=["Include type hints", "Add docstring"],
+        tags=["python", "validation"],
+        provider=AIProvider.none,
+        enhance=False,
+    )
+
+
+# ── prompt_logic: build_manifest ─────────────────────────────────────────────
 
 class TestBuildManifest:
-    def test_returns_manifest_type(self, sample_manifest):
-        assert isinstance(sample_manifest, PromptManifest)
+    def test_returns_manifest_type(self, react_manifest):
+        assert isinstance(react_manifest, PromptManifest)
 
-    def test_status_is_pending(self, sample_manifest):
-        assert sample_manifest.status == "pending"
+    def test_status_pending(self, react_manifest):
+        assert react_manifest.status == "pending"
 
-    def test_version_is_1(self, sample_manifest):
-        assert sample_manifest.version == 1
+    def test_version_is_1(self, react_manifest):
+        assert react_manifest.version == 1
 
-    def test_prompt_id_is_set(self, sample_manifest):
-        assert len(sample_manifest.prompt_id) == 36  # UUID4
+    def test_uuid_format(self, react_manifest):
+        assert len(react_manifest.prompt_id) == 36
 
-    def test_role_inferred_for_react(self, sample_manifest):
-        assert "Frontend" in sample_manifest.structured_prompt.role
+    def test_role_inferred_frontend(self, react_manifest):
+        assert "Frontend" in react_manifest.structured_prompt.role
 
-    def test_typescript_constraint_inferred(self, sample_manifest):
-        constraints = sample_manifest.structured_prompt.constraints
-        assert any("TypeScript" in c for c in constraints)
+    def test_typescript_constraint(self, react_manifest):
+        assert any("TypeScript" in c for c in react_manifest.structured_prompt.constraints)
 
-    def test_tailwind_constraint_inferred(self, sample_manifest):
-        constraints = sample_manifest.structured_prompt.constraints
-        assert any("TailwindCSS" in c for c in constraints)
+    def test_tailwind_constraint(self, react_manifest):
+        assert any("TailwindCSS" in c for c in react_manifest.structured_prompt.constraints)
 
-    def test_raw_prompt_text_contains_role(self, sample_manifest):
-        raw = sample_manifest.structured_prompt.raw_prompt_text
-        assert "## ROLE" in raw
+    def test_raw_prompt_has_role_section(self, react_manifest):
+        assert "## ROLE" in react_manifest.structured_prompt.raw_prompt_text
 
-    def test_raw_prompt_text_contains_task(self, sample_manifest):
-        raw = sample_manifest.structured_prompt.raw_prompt_text
-        assert "## TASK" in raw
+    def test_raw_prompt_has_task_section(self, react_manifest):
+        assert "## TASK" in react_manifest.structured_prompt.raw_prompt_text
 
-    def test_safety_guidelines_present(self, sample_manifest):
-        assert len(sample_manifest.structured_prompt.safety) >= 3
+    def test_raw_prompt_has_constraints_section(self, react_manifest):
+        assert "## CONSTRAINTS" in react_manifest.structured_prompt.raw_prompt_text
 
-    def test_extra_context_included(self):
-        m = build_manifest("Write a blog post.", extra_context="Keep it under 500 words.")
+    def test_safety_present(self, react_manifest):
+        assert len(react_manifest.structured_prompt.safety) >= 3
+
+    def test_extra_context_in_prompt(self):
+        m = build_manifest("Write a blog post.", extra_context="Keep under 500 words.")
         assert "500 words" in m.structured_prompt.raw_prompt_text
 
-    def test_summarize_instruction(self):
-        m = build_manifest("Summarize this document for me.")
-        assert "Summarizer" in m.structured_prompt.role
+    def test_explanation_generated(self, react_manifest):
+        assert react_manifest.explanation is not None
+        assert len(react_manifest.explanation) > 50
+
+    def test_persona_senior_dev(self):
+        m = build_manifest("Build an API", persona=PersonaType.senior_dev)
+        assert "Senior Software Engineer" in m.structured_prompt.role
+
+    def test_persona_custom(self):
+        m = build_manifest("Do something", persona=PersonaType.custom,
+                           custom_persona="Expert Blockchain Developer")
+        assert "Blockchain" in m.structured_prompt.role
 
-    def test_unknown_instruction_gets_default_role(self):
-        m = build_manifest("Do something interesting.")
+    def test_style_concise(self):
+        m = build_manifest("Summarize this.", style=StyleType.concise)
+        assert "concise" in m.structured_prompt.style.lower()
+
+    def test_user_constraints_merged(self):
+        m = build_manifest("Write code.", user_constraints=["Must use async/await", "No external libs"])
+        constraints = m.structured_prompt.constraints
+        assert any("async/await" in c for c in constraints)
+
+    def test_settings_id_stored(self):
+        m = build_manifest("Write code.", settings_id="test-123")
+        assert m.settings_id == "test-123"
+
+    def test_unknown_instruction_default_role(self):
+        m = build_manifest("Do something very generic.")
         assert m.structured_prompt.role == "General AI Assistant"
 
+    def test_fastapi_role_inferred(self):
+        m = build_manifest("Create a FastAPI REST endpoint.")
+        assert "Backend" in m.structured_prompt.role or "Engineer" in m.structured_prompt.role
+
+    def test_security_persona(self):
+        m = build_manifest("Review code for security vulnerabilities.", persona=PersonaType.security_eng)
+        assert "Security" in m.structured_prompt.role
+
 
 class TestApplyEdits:
-    def test_apply_role_edit(self, sample_manifest):
-        edited = apply_edits(sample_manifest, {"role": "Principal Software Engineer"})
-        assert edited.structured_prompt.role == "Principal Software Engineer"
+    def test_role_edit(self, react_manifest):
+        edited = apply_edits(react_manifest, {"role": "Principal Engineer"})
+        assert edited.structured_prompt.role == "Principal Engineer"
 
-    def test_status_becomes_approved(self, sample_manifest):
-        edited = apply_edits(sample_manifest, {"task": "Updated task."})
+    def test_status_becomes_approved(self, react_manifest):
+        edited = apply_edits(react_manifest, {"task": "New task."})
         assert edited.status == "approved"
 
-    def test_raw_text_regenerated(self, sample_manifest):
-        edited = apply_edits(sample_manifest, {"role": "XYZ"})
-        assert "XYZ" in edited.structured_prompt.raw_prompt_text
+    def test_raw_text_regenerated(self, react_manifest):
+        edited = apply_edits(react_manifest, {"role": "UniqueXYZRole"})
+        assert "UniqueXYZRole" in edited.structured_prompt.raw_prompt_text
+
+    def test_constraints_edit(self, react_manifest):
+        edited = apply_edits(react_manifest, {"constraints": ["Custom constraint only"]})
+        assert "Custom constraint only" in edited.structured_prompt.constraints
 
 
 class TestRefineWithFeedback:
-    def test_version_increments(self, sample_manifest):
-        refined = refine_with_feedback(sample_manifest, "Also add accessibility support.")
+    def test_version_increments(self, react_manifest):
+        refined = refine_with_feedback(react_manifest, "Add accessibility support.")
         assert refined.version == 2
 
-    def test_same_prompt_id(self, sample_manifest):
-        refined = refine_with_feedback(sample_manifest, "Add dark mode support.")
-        assert refined.prompt_id == sample_manifest.prompt_id
+    def test_same_prompt_id(self, react_manifest):
+        refined = refine_with_feedback(react_manifest, "Add dark mode.")
+        assert refined.prompt_id == react_manifest.prompt_id
 
+    def test_feedback_incorporated(self, react_manifest):
+        refined = refine_with_feedback(react_manifest, "Add accessibility support WCAG AA")
+        assert any("WCAG" in c for c in refined.structured_prompt.constraints)
 
-# ---------------------------------------------------------------------------
-# API route tests
-# ---------------------------------------------------------------------------
 
-class TestGenerateRoute:
-    def test_generate_returns_200(self, client, sample_instruction):
-        resp = client.post("/api/generate", json={"instruction": sample_instruction})
-        assert resp.status_code == 200
-
-    def test_generate_response_has_prompt_id(self, client, sample_instruction):
-        resp = client.post("/api/generate", json={"instruction": sample_instruction})
-        data = resp.json()
-        assert "prompt_id" in data
-        assert len(data["prompt_id"]) == 36
-
-    def test_generate_response_has_manifest(self, client, sample_instruction):
-        resp = client.post("/api/generate", json={"instruction": sample_instruction})
-        data = resp.json()
-        assert "manifest" in data
-        assert data["manifest"]["status"] == "pending"
+class TestGenerateExplanation:
+    def test_returns_explanation_and_decisions(self, react_manifest):
+        explanation, decisions = generate_explanation(react_manifest)
+        assert isinstance(explanation, str)
+        assert len(explanation) > 30
+        assert isinstance(decisions, list)
+        assert len(decisions) > 0
 
-    def test_generate_short_instruction_422(self, client):
-        resp = client.post("/api/generate", json={"instruction": "hi"})
-        assert resp.status_code == 422
+    def test_decisions_contain_role(self, react_manifest):
+        _, decisions = generate_explanation(react_manifest)
+        assert any("Role" in d for d in decisions)
 
-    def test_generate_missing_instruction_422(self, client):
-        resp = client.post("/api/generate", json={})
-        assert resp.status_code == 422
 
+# ── instruction_store tests ───────────────────────────────────────────────────
 
-class TestApproveRoute:
-    def _generate(self, client, instruction="Build an API endpoint."):
-        resp = client.post("/api/generate", json={"instruction": instruction})
-        return resp.json()["prompt_id"]
+class TestInstructionStore:
+    def test_create_returns_setting(self, sample_settings_data):
+        s = istore.create(sample_settings_data)
+        assert s.settings_id is not None
+        assert s.title == "Test Setting"
+        assert s.use_count == 0
 
-    def test_approve_returns_200(self, client):
-        pid = self._generate(client)
-        resp = client.post("/api/approve", json={"prompt_id": pid})
-        assert resp.status_code == 200
+    def test_get_returns_setting(self, sample_settings_data):
+        s = istore.create(sample_settings_data)
+        fetched = istore.get(s.settings_id)
+        assert fetched is not None
+        assert fetched.settings_id == s.settings_id
 
-    def test_approve_status_approved(self, client):
-        pid = self._generate(client)
-        resp = client.post("/api/approve", json={"prompt_id": pid})
-        assert resp.json()["success"] is True
+    def test_list_returns_all(self, sample_settings_data):
+        istore.create(sample_settings_data)
+        istore.create(sample_settings_data.model_copy(update={"title": "Second"}))
+        items = istore.list_all()
+        assert len(items) == 2
 
-    def test_approve_unknown_id_404(self, client):
-        resp = client.post("/api/approve", json={"prompt_id": "00000000-0000-0000-0000-000000000000"})
-        assert resp.status_code == 404
+    def test_list_filter_by_tag(self, sample_settings_data):
+        istore.create(sample_settings_data)
+        items = istore.list_all(tag="python")
+        assert len(items) == 1
+        items_no_match = istore.list_all(tag="nonexistent")
+        assert len(items_no_match) == 0
 
+    def test_delete_removes_setting(self, sample_settings_data):
+        s = istore.create(sample_settings_data)
+        deleted = istore.delete(s.settings_id)
+        assert deleted is True
+        assert istore.get(s.settings_id) is None
 
-class TestExportRoute:
-    def _generate_and_approve(self, client):
-        pid = client.post("/api/generate", json={"instruction": "Write a Python script."}).json()["prompt_id"]
-        client.post("/api/approve", json={"prompt_id": pid})
-        return pid
+    def test_increment_use_count(self, sample_settings_data):
+        s = istore.create(sample_settings_data)
+        istore.increment_use_count(s.settings_id)
+        updated = istore.get(s.settings_id)
+        assert updated.use_count == 1
 
-    def test_export_json_200(self, client):
-        pid = self._generate_and_approve(client)
-        resp = client.post("/api/export", json={"prompt_id": pid, "export_format": "json"})
-        assert resp.status_code == 200
-        data = resp.json()
-        assert isinstance(data["data"], dict)
 
-    def test_export_text_200(self, client):
-        pid = self._generate_and_approve(client)
-        resp = client.post("/api/export", json={"prompt_id": pid, "export_format": "text"})
-        assert resp.status_code == 200
-        assert isinstance(resp.json()["data"], str)
+# ── API routes ────────────────────────────────────────────────────────────────
 
-    def test_export_unapproved_400(self, client):
-        pid = client.post("/api/generate", json={"instruction": "Write a Python script again."}).json()["prompt_id"]
-        resp = client.post("/api/export", json={"prompt_id": pid, "export_format": "json"})
-        assert resp.status_code == 400
+class TestGenerateRoute:
+    def test_generate_200(self, client, react_instruction):
+        r = client.post("/api/generate", json={"instruction": react_instruction})
+        assert r.status_code == 200
+
+    def test_generate_has_prompt_id(self, client, react_instruction):
+        r = client.post("/api/generate", json={"instruction": react_instruction})
+        assert len(r.json()["prompt_id"]) == 36
+
+    def test_generate_with_persona(self, client):
+        r = client.post("/api/generate", json={
+            "instruction": "Write a security audit report.",
+            "persona": "security_eng",
+            "style": "formal",
+        })
+        assert r.status_code == 200
+        assert "Security" in r.json()["manifest"]["structured_prompt"]["role"]
+
+    def test_generate_with_user_constraints(self, client):
+        r = client.post("/api/generate", json={
+            "instruction": "Build a REST API.",
+            "user_constraints": ["Must use async/await", "Rate limiting required"],
+        })
+        assert r.status_code == 200
+        constraints = r.json()["manifest"]["structured_prompt"]["constraints"]
+        assert any("async/await" in c for c in constraints)
 
+    def test_generate_short_instruction_422(self, client):
+        r = client.post("/api/generate", json={"instruction": "hi"})
+        assert r.status_code == 422
 
-class TestHistoryRoute:
-    def test_history_returns_200(self, client):
-        resp = client.get("/api/history")
-        assert resp.status_code == 200
+    def test_generate_missing_instruction_422(self, client):
+        r = client.post("/api/generate", json={})
+        assert r.status_code == 422
+
+    def test_generate_has_explanation(self, client, react_instruction):
+        r = client.post("/api/generate", json={"instruction": react_instruction})
+        manifest = r.json()["manifest"]
+        assert manifest.get("explanation") is not None
+
+
+class TestInstructionSettingsRoutes:
+    def _create(self, client):
+        return client.post("/api/instructions", json={
+            "title": "Test Setting",
+            "instruction": "Write a Python function.",
+            "output_format": "both",
+            "persona": "senior_dev",
+            "style": "professional",
+            "constraints": [],
+            "tags": ["python"],
+            "provider": "none",
+            "enhance": False,
+        })
+
+    def test_create_201(self, client):
+        r = self._create(client)
+        assert r.status_code == 201
+        assert r.json()["settings_id"] is not None
+
+    def test_list_200(self, client):
+        self._create(client)
+        r = client.get("/api/instructions")
+        assert r.status_code == 200
+        assert r.json()["total"] >= 1
+
+    def test_get_200(self, client):
+        sid = self._create(client).json()["settings_id"]
+        r = client.get(f"/api/instructions/{sid}")
+        assert r.status_code == 200
+
+    def test_get_404(self, client):
+        r = client.get("/api/instructions/nonexistent")
+        assert r.status_code == 404
+
+    def test_delete_200(self, client):
+        sid = self._create(client).json()["settings_id"]
+        r = client.delete(f"/api/instructions/{sid}")
+        assert r.status_code == 200
+
+    def test_generate_from_settings(self, client):
+        sid = self._create(client).json()["settings_id"]
+        r = client.post("/api/generate/from-settings", json={"settings_id": sid})
+        assert r.status_code == 200
+        data = r.json()
+        assert data["manifest"]["settings_id"] == sid
+
+    def test_generate_from_settings_404(self, client):
+        r = client.post("/api/generate/from-settings", json={"settings_id": "bad-id"})
+        assert r.status_code == 404
+
+
+class TestExplainRoute:
+    def test_explain_200(self, client, react_instruction):
+        pid = client.post("/api/generate", json={"instruction": react_instruction}).json()["prompt_id"]
+        r = client.get(f"/api/explain/{pid}")
+        assert r.status_code == 200
+        data = r.json()
+        assert "explanation" in data
+        assert "key_decisions" in data
+        assert len(data["key_decisions"]) > 0
+
+    def test_explain_404(self, client):
+        r = client.get("/api/explain/nonexistent")
+        assert r.status_code == 404
 
-    def test_history_has_total_field(self, client):
-        resp = client.get("/api/history")
-        assert "total" in resp.json()
+
+class TestApproveRoute:
+    def test_approve_200(self, client):
+        pid = client.post("/api/generate", json={"instruction": "Build an API endpoint."}).json()["prompt_id"]
+        r = client.post("/api/approve", json={"prompt_id": pid})
+        assert r.status_code == 200
+
+    def test_approve_with_edits(self, client):
+        pid = client.post("/api/generate", json={"instruction": "Build an API."}).json()["prompt_id"]
+        r = client.post("/api/approve", json={"prompt_id": pid, "edits": {"role": "Custom Role XYZ"}})
+        assert r.status_code == 200
+        assert "Custom Role XYZ" in r.json()["finalized_prompt"]["role"]
+
+    def test_approve_404(self, client):
+        r = client.post("/api/approve", json={"prompt_id": "bad-id"})
+        assert r.status_code == 404
+
+
+class TestConfigRoute:
+    def test_config_200(self, client):
+        r = client.get("/api/config")
+        assert r.status_code == 200
+        data = r.json()
+        assert "hf_key_set" in data
+        assert "google_key_set" in data
+
+    def test_config_no_env_keys_false(self, client, monkeypatch):
+        monkeypatch.delenv("HF_API_KEY", raising=False)
+        monkeypatch.delenv("GOOGLE_API_KEY", raising=False)
+        r = client.get("/api/config")
+        assert r.json()["hf_key_set"] is False
+        assert r.json()["google_key_set"] is False
 
 
 class TestHealthRoute:
     def test_health_ok(self, client):
-        resp = client.get("/health")
-        assert resp.status_code == 200
-        assert resp.json()["status"] == "ok"
+        r = client.get("/health")
+        assert r.status_code == 200
+        assert r.json()["status"] == "ok"
+        assert "prompts_in_memory" in r.json()
+        assert "settings_in_memory" in r.json()

frontend/client.js

@@ -1,176 +1,201 @@
 /**
- * PromptForge — client.js v3.0
- * Clean modern UI: API key always visible, proper provider toggle, port 7860
+ * PromptForge v3.0 — client.js
+ * Tab navigation, Generate flow, Instruction Settings CRUD, History.
  */
 
-const API = "";  // Relative URL — works on any port (7860 for HuggingFace)
+const API = "";
 let currentPromptId = null;
+let allSettings = [];
 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;");
+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");
+/* ── 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();
+}
+
+/* ── Toast ─────────────────────────────────────────────────────────── */
+function toast(msg, type = "info") {
+  const icons = { success:"✅", error:"❌", info:"💡", warn:"⚠️" };
+  const t = document.createElement("div");
+  t.className = `toast ${type}`;
+  t.innerHTML = `<div class="toast-icon">${icons[type]||"💡"}</div><span>${msg}</span>`;
+  $("toast-container").appendChild(t);
+  setTimeout(() => { t.classList.add("leaving"); t.addEventListener("animationend", () => t.remove()); }, 4200);
+}
+
+/* ── Loading ───────────────────────────────────────────────────────── */
+function setLoading(btn, on) {
+  btn.disabled = on;
+  btn._orig = btn._orig || btn.innerHTML;
+  btn.innerHTML = on ? `<span class="spinner"></span> Working…` : btn._orig;
+}
+
+/* ── Main Tab Navigation ───────────────────────────────────────────── */
+document.querySelectorAll(".main-tab").forEach(tab => {
+  tab.addEventListener("click", () => {
+    document.querySelectorAll(".main-tab").forEach(t => t.classList.remove("active"));
+    document.querySelectorAll(".tab-page").forEach(p => p.classList.remove("active").add?.("hidden") || hide(p));
+    tab.classList.add("active");
+    const name = tab.dataset.mainTab;
+    const page = $(`tab-${name}`);
+    if (page) { show(page); page.classList.add("active"); }
+    if (name === "settings") { loadSettingsList(); }
+    if (name === "history")  { loadHistory(); }
+  });
+});
 
+/* ── Config (env key status) ───────────────────────────────────────── */
+async function loadConfig() {
+  try {
+    const cfg = await apiFetch("/api/config");
+    const hfDot = $("env-hf-dot");
+    const ggDot = $("env-google-dot");
+    if (cfg.hf_key_set)     { hfDot?.classList.add("active"); }
+    if (cfg.google_key_set) { ggDot?.classList.add("active"); }
+  } catch {}
+}
+
+/* ── API Key Panel ─────────────────────────────────────────────────── */
 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)" },
+  none:        { hint:"(no key needed)", placeholder:"Not required for local engine" },
+  google:      { hint:"Google Gemini",   placeholder:"AIza…  (aistudio.google.com/apikey)" },
+  huggingface: { hint:"Hugging Face",    placeholder:"hf_…   (huggingface.co/settings/tokens)" },
 };
 
 function updateApiKeyPanel() {
-  const p = providerSelect.value;
+  const p = $("provider").value;
   const info = PROVIDER_LABELS[p] || PROVIDER_LABELS.none;
-  apiKeyHint.textContent = info.hint;
+  if ($("api-key-hint")) $("api-key-hint").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";
+    $("api-key").disabled    = true;
+    $("api-key").value       = "";
+    $("api-key").placeholder = info.placeholder;
+    $("api-status-dot")?.classList.remove("set");
+    if ($("api-status-text")) $("api-status-text").textContent = "Not needed — local engine";
   } else {
-    apiKeyInput.disabled    = false;
-    apiKeyInput.placeholder = info.placeholder;
-    updateApiKeyStatus();
+    $("api-key").disabled    = false;
+    $("api-key").placeholder = info.placeholder;
+    updateApiStatus();
   }
 }
 
-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";
-  }
+function updateApiStatus() {
+  const key = $("api-key")?.value?.trim() || "";
+  const set = key.length >= 10;
+  $("api-status-dot")?.classList.toggle("set", set);
+  if ($("api-status-text"))
+    $("api-status-text").textContent = set ? "Key set ✓ — AI enhancement enabled" : "No key — AI enhancement disabled";
 }
 
-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 ? "🙈" : "👁";
+$("provider")?.addEventListener("change", updateApiKeyPanel);
+$("api-key")?.addEventListener("input", updateApiStatus);
+$("btn-toggle-key")?.addEventListener("click", () => {
+  const k = $("api-key");
+  k.type = k.type === "password" ? "text" : "password";
+  $("btn-toggle-key").textContent = k.type === "password" ? "👁" : "🙈";
 });
+updateApiKeyPanel();
 
-/* ── 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);
+/* ── Advanced options toggle ───────────────────────────────────────── */
+$("btn-toggle-advanced")?.addEventListener("click", () => {
+  const panel = $("advanced-options");
+  if (panel.classList.contains("hidden")) {
+    show(panel);
+    $("btn-toggle-advanced").textContent = "⚙️ Hide advanced options";
+  } else {
+    hide(panel);
+    $("btn-toggle-advanced").textContent = "⚙️ Advanced options";
   }
-}
+});
+
+$("gen-persona")?.addEventListener("change", () => {
+  const show = $("gen-persona").value === "custom";
+  $("custom-persona-field").style.display = show ? "block" : "none";
+});
 
-/* ── Tab Switcher ───────────────────────────────────────────────── */
+/* ── Inner tab switcher ────────────────────────────────────────────── */
 document.querySelectorAll(".tab").forEach(tab => {
   tab.addEventListener("click", () => {
-    const name = tab.dataset.tab;
-    document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
+    const tabBar = tab.closest(".tab-bar");
+    tabBar.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
     tab.classList.add("active");
-    document.querySelectorAll(".tab-panel").forEach(p => hide(p));
-    show($(`tab-${name}`));
+    const name = tab.dataset.tab;
+    // find sibling panels
+    const section = tabBar.closest("section");
+    section.querySelectorAll(".tab-panel").forEach(p => hide(p));
+    show(section.querySelector(`#tab-${name}`));
   });
 });
 
-/* ── Copy Buttons ───────────────────────────────────────────────── */
+/* ── 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(() => {
+  const el = $(btn.dataset.target);
+  if (!el) return;
+  navigator.clipboard.writeText(el.textContent).then(() => {
     btn.textContent = "✅ Copied!";
     btn.classList.add("copied");
-    setTimeout(() => { btn.classList.remove("copied"); btn.textContent = "📋 Copy to Clipboard"; }, 2200);
+    setTimeout(() => { btn.classList.remove("copied"); btn.textContent = "📋 Copy"; }, 2000);
   });
 });
 
-/* ── 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");
+/* ── 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);
   }
-  return r.json();
 }
 
-/* ── STEP 1: Generate ───────────────────────────────────────────── */
-$("btn-generate").addEventListener("click", async () => {
+/* ── 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;
-  }
+  if (instruction.length < 5) { toast("Please enter a meaningful instruction (min 5 chars).", "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 provider = $("provider").value;
+    const apiKey   = $("api-key").value.trim() || null;
+    const persona  = $("gen-persona")?.value || "default";
+    const style    = $("gen-style")?.value || "professional";
+    const customPersona = persona === "custom" ? ($("gen-custom-persona")?.value?.trim() || null) : null;
+    const constraintsRaw = $("gen-constraints")?.value?.trim() || "";
+    const userConstraints = constraintsRaw ? constraintsRaw.split("\n").map(s=>s.trim()).filter(Boolean) : [];
 
     const data = await apiFetch("/api/generate", "POST", {
       instruction,
       output_format: "both",
-      provider,
-      api_key: apiKey,
-      enhance,
+      provider, api_key: apiKey,
+      enhance: provider !== "none" && !!apiKey,
       extra_context: $("extra-context").value.trim() || null,
+      persona, custom_persona: customPersona, style,
+      user_constraints: userConstraints,
     });
-
     currentPromptId = data.prompt_id;
     renderManifest(data.manifest);
-    hide($("step-input"));
-    show($("step-manifest"));
-    $("step-manifest").scrollIntoView({ behavior: "smooth", block: "start" });
+    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);
-  }
+    toast("Manifest generated! Review and approve.", "success");
+  } catch (e) { toast(`Error: ${e.message}`, "error"); }
+  finally { setLoading(btn, false); }
 });
 
 function renderManifest(manifest) {
@@ -178,24 +203,42 @@ function renderManifest(manifest) {
   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  },
+    { 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>`;
+    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);
+  hide($("explanation-panel"));
 }
 
-/* ── STEP 2: Approve ────────────────────────────────────────────── */
-$("btn-approve").addEventListener("click", async () => {
+/* ── Explain ───────────────────────────────────────────────────────── */
+$("btn-explain")?.addEventListener("click", async () => {
+  if (!currentPromptId) return;
+  const btn = $("btn-explain");
+  setLoading(btn, true);
+  try {
+    const data = await apiFetch(`/api/explain/${currentPromptId}`);
+    const panel = $("explanation-panel");
+    $("explanation-text").textContent = data.explanation;
+    const kd = $("key-decisions");
+    kd.innerHTML = data.key_decisions.map(d => `<div class="decision-chip">${esc(d)}</div>`).join("");
+    show(panel);
+    panel.scrollIntoView({ behavior:"smooth", block:"nearest" });
+  } catch (e) { toast(`Could not load explanation: ${e.message}`, "warn"); }
+  finally { setLoading(btn, false); }
+});
+
+/* ── STEP 2: Approve ───────────────────────────────────────────────── */
+$("btn-approve")?.addEventListener("click", async () => {
   if (!currentPromptId) return;
   const edits = {};
   ["role","style","task","input_format","output_format"].forEach(k => {
@@ -208,16 +251,12 @@ $("btn-approve").addEventListener("click", async () => {
   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" });
+    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);
-  }
+    toast("Prompt approved! 🎉", "success");
+  } catch (e) { toast(`Approval failed: ${e.message}`, "error"); }
+  finally { setLoading(btn, false); }
 });
 
 function renderFinalized(sp) {
@@ -225,84 +264,344 @@ function renderFinalized(sp) {
   $("finalized-json").textContent = JSON.stringify(sp, null, 2);
 }
 
-/* ── STEP 4: Export ─────────────────────────────────────────────── */
+/* ��─ 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);
+    const a = Object.assign(document.createElement("a"), {
+      href: URL.createObjectURL(blob),
+      download: `prompt-${currentPromptId.slice(0,8)}.${format === "json" ? "json" : "txt"}`,
+    });
+    a.click(); URL.revokeObjectURL(a.href);
     setStep(4);
     toast(`Exported as ${format.toUpperCase()}!`, "success");
-  } catch (e) {
-    toast(`Export failed: ${e.message}`, "error");
-  }
+  } catch (e) { toast(`Export failed: ${e.message}`, "error"); }
 }
-$("btn-export-json").addEventListener("click", () => doExport("json"));
-$("btn-export-txt" ).addEventListener("click", () => doExport("text"));
+$("btn-export-json")?.addEventListener("click", () => doExport("json"));
+$("btn-export-txt")?.addEventListener("click",  () => doExport("text"));
+
+/* ── Save current prompt as a Setting ─────────────────────────────── */
+$("btn-save-as-setting")?.addEventListener("click", () => {
+  // Switch to settings tab and pre-populate
+  const instruction = $("instruction")?.value?.trim() || "";
+  const context = $("extra-context")?.value?.trim() || "";
+  document.querySelector('[data-main-tab="settings"]')?.click();
+  setTimeout(() => {
+    clearSettingsForm();
+    if ($("s-title")) $("s-title").value = instruction.slice(0, 60) + "…";
+    if ($("s-instruction")) $("s-instruction").value = instruction;
+    if ($("s-extra-context")) $("s-extra-context").value = context;
+    $("s-title")?.focus();
+    toast("Pre-filled from current prompt — adjust and save!", "info");
+  }, 150);
+});
 
-/* ── STEP 5: Refine ─────────────────────────────────────────────── */
-$("btn-refine").addEventListener("click", () => {
-  hide($("step-finalized"));
-  show($("step-refine"));
+/* ── 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-cancel-refine")?.addEventListener("click", () => {
+  hide($("step-refine")); show($("step-finalized")); setStep(3);
 });
-$("btn-submit-refine").addEventListener("click", async () => {
+$("btn-submit-refine")?.addEventListener("click", async () => {
   const feedback = $("feedback").value.trim();
-  if (!feedback) { toast("Please describe what you want to change.", "error"); return; }
+  if (!feedback) { toast("Please describe what 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,
+      prompt_id: currentPromptId, feedback,
+      provider: $("provider").value,
+      api_key: $("api-key").value.trim() || null,
     });
     currentPromptId = data.prompt_id;
     renderManifest(data.manifest);
-    hide($("step-refine"));
-    show($("step-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);
-  }
+    toast(`Refined to v${data.manifest.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");
+/* ── Reset / New ───────────────────────────────────────────────────── */
+$("btn-reset")?.addEventListener("click", () => {
+  hide($("step-manifest")); show($("step-input")); setStep(1);
+  $("instruction").value = ""; $("extra-context").value = "";
+  currentPromptId = null; toast("Reset.", "info");
 });
 $("btn-new")?.addEventListener("click", () => {
-  hide($("step-finalized"));
-  show($("step-input"));
-  $("instruction").value = "";
-  $("extra-context").value = "";
+  hide($("step-finalized")); show($("step-input")); setStep(1);
+  $("instruction").value = ""; $("extra-context").value = "";
   currentPromptId = null;
-  setStep(1);
   $("step-input").scrollIntoView({ behavior:"smooth", block:"start" });
 });
 
-/* ── History ────────────────────────────────────────────────────── */
-$("btn-load-history").addEventListener("click", loadHistory);
+/* ── Load from Settings (modal) ────────────────────────────────────── */
+$("btn-load-from-settings")?.addEventListener("click", async () => {
+  await loadSettingsForModal();
+  show($("modal-overlay"));
+});
+$("btn-modal-close")?.addEventListener("click", () => hide($("modal-overlay")));
+$("modal-overlay")?.addEventListener("click", e => { if (e.target === $("modal-overlay")) hide($("modal-overlay")); });
+
+$("modal-search")?.addEventListener("input", () => {
+  const q = $("modal-search").value.toLowerCase();
+  document.querySelectorAll(".modal-item").forEach(item => {
+    item.style.display = item.dataset.search?.includes(q) ? "" : "none";
+  });
+});
+
+async function loadSettingsForModal() {
+  const list = $("modal-settings-list");
+  try {
+    const data = await apiFetch("/api/instructions");
+    if (!data.items?.length) {
+      list.innerHTML = `<div class="modal-empty">No saved settings yet. Create one in the Instruction Settings tab.</div>`;
+      return;
+    }
+    list.innerHTML = data.items.map(s => `
+      <div class="modal-item" data-id="${esc(s.settings_id)}" data-search="${esc((s.title+s.instruction).toLowerCase())}">
+        <div class="modal-item-title">${esc(s.title)}</div>
+        <div class="modal-item-desc">${esc(s.instruction.slice(0, 100))}${s.instruction.length > 100 ? "…" : ""}</div>
+      </div>`).join("");
+    document.querySelectorAll(".modal-item").forEach(item => {
+      item.addEventListener("click", async () => {
+        const sid = item.dataset.id;
+        hide($("modal-overlay"));
+        await generateFromSetting(sid);
+      });
+    });
+  } catch (e) {
+    list.innerHTML = `<div class="modal-empty">Failed to load settings: ${esc(e.message)}</div>`;
+  }
+}
+
+async function generateFromSetting(sid) {
+  const btn = $("btn-generate");
+  setLoading(btn, true);
+  // Switch to generate tab
+  document.querySelector('[data-main-tab="generate"]')?.click();
+  try {
+    const apiKey = $("api-key")?.value?.trim() || null;
+    const data = await apiFetch("/api/generate/from-settings", "POST", { settings_id: sid, api_key: apiKey });
+    currentPromptId = data.prompt_id;
+    renderManifest(data.manifest);
+    hide($("step-input")); show($("step-manifest"));
+    $("step-manifest").scrollIntoView({ behavior:"smooth", block:"start" });
+    setStep(2);
+    toast(`Generated from "${data.manifest.settings_id ? "saved setting" : "settings"}"! ✨`, "success");
+  } catch (e) { toast(`Error: ${e.message}`, "error"); }
+  finally { setLoading(btn, false); }
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   INSTRUCTION SETTINGS PANEL
+══════════════════════════════════════════════════════════════════ */
+
+/* ── Persona custom field ── */
+$("s-persona")?.addEventListener("change", () => {
+  $("s-custom-persona-field").style.display = $("s-persona").value === "custom" ? "block" : "none";
+});
+
+/* ── Instruction character count ── */
+$("s-instruction")?.addEventListener("input", () => {
+  const len = $("s-instruction").value.length;
+  const note = $("s-instruction-count");
+  if (note) {
+    note.textContent = `${len} / 8000 characters`;
+    note.style.color = len > 7500 ? "var(--red)" : "var(--text-muted)";
+  }
+});
+
+/* ── Save setting ── */
+$("btn-settings-save")?.addEventListener("click", async () => {
+  const title = $("s-title").value.trim();
+  const instruction = $("s-instruction").value.trim();
+  if (!title) { toast("Please enter a title.", "error"); $("s-title").focus(); return; }
+  if (instruction.length < 5) { toast("Instruction must be at least 5 characters.", "error"); $("s-instruction").focus(); return; }
+
+  const editId = $("edit-settings-id").value;
+  const persona = $("s-persona").value;
+  const constraintsRaw = $("s-constraints").value.trim();
+  const constraints = constraintsRaw ? constraintsRaw.split("\n").map(s=>s.trim()).filter(Boolean) : [];
+  const tagsRaw = $("s-tags").value.trim();
+  const tags = tagsRaw ? tagsRaw.split(",").map(s=>s.trim().toLowerCase()).filter(Boolean) : [];
+
+  const payload = {
+    title,
+    description: $("s-description").value.trim() || null,
+    instruction,
+    extra_context: $("s-extra-context").value.trim() || null,
+    output_format: $("s-output-format").value,
+    persona,
+    custom_persona: persona === "custom" ? ($("s-custom-persona").value.trim() || null) : null,
+    style: $("s-style").value,
+    constraints,
+    tags,
+    provider: $("s-provider").value,
+    enhance: $("s-enhance").checked,
+  };
+
+  const btn = $("btn-settings-save");
+  setLoading(btn, true);
+  try {
+    if (editId) {
+      await apiFetch(`/api/instructions/${editId}`, "PATCH", payload);
+      toast("Setting updated! ✅", "success");
+    } else {
+      await apiFetch("/api/instructions", "POST", payload);
+      toast("Setting saved! 💾", "success");
+    }
+    clearSettingsForm();
+    await loadSettingsList();
+  } catch (e) { toast(`Save failed: ${e.message}`, "error"); }
+  finally { setLoading(btn, false); }
+});
+
+/* ── Clear form ── */
+$("btn-settings-clear")?.addEventListener("click", clearSettingsForm);
+
+function clearSettingsForm() {
+  $("edit-settings-id").value = "";
+  ["s-title","s-description","s-instruction","s-extra-context","s-constraints","s-tags","s-custom-persona"].forEach(id => {
+    const el = $(id); if (el) el.value = "";
+  });
+  if ($("s-persona")) $("s-persona").value = "default";
+  if ($("s-style")) $("s-style").value = "professional";
+  if ($("s-output-format")) $("s-output-format").value = "both";
+  if ($("s-provider")) $("s-provider").value = "none";
+  if ($("s-enhance")) $("s-enhance").checked = false;
+  if ($("s-custom-persona-field")) $("s-custom-persona-field").style.display = "none";
+  if ($("s-instruction-count")) $("s-instruction-count").textContent = "0 / 8000 characters";
+  if ($("settings-form-title")) $("settings-form-title").textContent = "➕ New Instruction Setting";
+  if ($("btn-settings-generate")) $("btn-settings-generate").style.display = "none";
+  document.querySelectorAll(".setting-card").forEach(c => c.classList.remove("active-edit"));
+}
+
+/* ── Load settings list ── */
+async function loadSettingsList() {
+  try {
+    const data = await apiFetch("/api/instructions");
+    allSettings = data.items || [];
+    renderSettingsList(allSettings);
+    updateSettingsCount(data.total);
+  } catch (e) { toast(`Failed to load settings: ${e.message}`, "error"); }
+}
+
+function updateSettingsCount(count) {
+  const badge = $("settings-count");
+  if (badge) badge.textContent = count;
+  const total = $("settings-total-count");
+  if (total) total.textContent = count;
+}
+
+function renderSettingsList(items) {
+  const container = $("settings-list");
+  if (!items.length) {
+    container.innerHTML = `<div class="settings-empty"><div class="empty-icon">📋</div><p>No settings yet. Create your first one!</p></div>`;
+    return;
+  }
+  container.innerHTML = items.map(s => `
+    <div class="setting-card" data-id="${esc(s.settings_id)}">
+      <div class="setting-card-title">
+        ${personaEmoji(s.persona)} ${esc(s.title)}
+      </div>
+      ${s.description ? `<div class="setting-card-desc">${esc(s.description)}</div>` : ""}
+      <div class="setting-card-meta">
+        ${s.tags.slice(0,4).map(t => `<span class="tag-chip">${esc(t)}</span>`).join("")}
+        <span class="tag-chip style">${esc(s.style)}</span>
+        <span class="use-count">${s.use_count} uses</span>
+      </div>
+      <div class="setting-card-actions">
+        <button class="btn-secondary btn-sm" onclick="editSetting('${esc(s.settings_id)}')">✏️</button>
+        <button class="btn-secondary btn-sm btn-danger" onclick="deleteSetting('${esc(s.settings_id)}')">🗑</button>
+        <button class="btn-primary btn-sm" onclick="generateFromSetting('${esc(s.settings_id)}')">⚡</button>
+      </div>
+    </div>`).join("");
+
+  // Rebuild tag filter
+  const allTags = [...new Set(items.flatMap(s => s.tags))].sort();
+  const filterEl = $("settings-filter-tag");
+  if (filterEl) {
+    filterEl.innerHTML = `<option value="">All tags</option>` + allTags.map(t => `<option value="${esc(t)}">${esc(t)}</option>`).join("");
+  }
+}
+
+function personaEmoji(persona) {
+  const map = { senior_dev:"👨‍💻", data_scientist:"📊", tech_writer:"✍️", product_mgr:"📋", security_eng:"🔒", custom:"✏️" };
+  return map[persona] || "🤖";
+}
+
+/* ── Search & filter ── */
+$("settings-search")?.addEventListener("input", filterSettings);
+$("settings-filter-tag")?.addEventListener("change", filterSettings);
+
+function filterSettings() {
+  const q = ($("settings-search")?.value || "").toLowerCase();
+  const tag = $("settings-filter-tag")?.value || "";
+  const filtered = allSettings.filter(s => {
+    const matchQ = !q || (s.title + s.instruction + (s.description || "")).toLowerCase().includes(q);
+    const matchTag = !tag || s.tags.includes(tag);
+    return matchQ && matchTag;
+  });
+  renderSettingsList(filtered);
+}
+
+/* ── Edit setting ── */
+async function editSetting(sid) {
+  try {
+    const s = await apiFetch(`/api/instructions/${sid}`);
+    $("edit-settings-id").value = s.settings_id;
+    if ($("s-title")) $("s-title").value = s.title;
+    if ($("s-description")) $("s-description").value = s.description || "";
+    if ($("s-instruction")) { $("s-instruction").value = s.instruction; $("s-instruction").dispatchEvent(new Event("input")); }
+    if ($("s-extra-context")) $("s-extra-context").value = s.extra_context || "";
+    if ($("s-output-format")) $("s-output-format").value = s.output_format;
+    if ($("s-persona")) { $("s-persona").value = s.persona; $("s-persona").dispatchEvent(new Event("change")); }
+    if ($("s-custom-persona")) $("s-custom-persona").value = s.custom_persona || "";
+    if ($("s-style")) $("s-style").value = s.style;
+    if ($("s-constraints")) $("s-constraints").value = (s.constraints || []).join("\n");
+    if ($("s-tags")) $("s-tags").value = (s.tags || []).join(", ");
+    if ($("s-provider")) $("s-provider").value = s.provider;
+    if ($("s-enhance")) $("s-enhance").checked = s.enhance;
+    if ($("settings-form-title")) $("settings-form-title").textContent = `✏️ Edit: ${s.title}`;
+    if ($("btn-settings-generate")) $("btn-settings-generate").style.display = "inline-flex";
+    document.querySelectorAll(".setting-card").forEach(c => c.classList.toggle("active-edit", c.dataset.id === sid));
+    $("settings-form-card").scrollIntoView({ behavior:"smooth", block:"start" });
+  } catch (e) { toast(`Failed to load setting: ${e.message}`, "error"); }
+}
+window.editSetting = editSetting;
+
+/* ── Delete setting ── */
+async function deleteSetting(sid) {
+  if (!confirm("Delete this instruction setting?")) return;
+  try {
+    await apiFetch(`/api/instructions/${sid}`, "DELETE");
+    toast("Setting deleted.", "success");
+    if ($("edit-settings-id").value === sid) clearSettingsForm();
+    await loadSettingsList();
+  } catch (e) { toast(`Delete failed: ${e.message}`, "error"); }
+}
+window.deleteSetting = deleteSetting;
+window.generateFromSetting = generateFromSetting;
+
+/* ── Generate Now button (in edit mode) ── */
+$("btn-settings-generate")?.addEventListener("click", async () => {
+  const sid = $("edit-settings-id").value;
+  if (!sid) return;
+  document.querySelector('[data-main-tab="generate"]')?.click();
+  await generateFromSetting(sid);
+});
+
+/* ── History ────────────────────────────────────────────────────────── */
+$("btn-load-history")?.addEventListener("click", loadHistory);
+
 async function loadHistory() {
   const btn = $("btn-load-history");
   setLoading(btn, true);
@@ -310,35 +609,38 @@ async function loadHistory() {
     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>`;
+      tbody.innerHTML = `<tr><td class="empty-msg" colspan="7">No prompts yet. Generate your first one!</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><code style="font-size:.72rem;color:var(--text-muted)">${esc(e.prompt_id?.slice(0,8))}…</code></td>
+        <td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${esc(e.instruction)}">${esc(e.instruction?.slice(0,55) || "—")}</td>
+        <td style="font-family:var(--font-mono)">v${e.version||1}</td>
+        <td><span class="badge badge-${e.status||'pending'}">${esc(e.status||"pending")}</span></td>
+        <td style="font-size:.75rem;color:var(--text-muted)">${e.settings_id ? `<span class="tag-chip">linked</span>` : "—"}</td>
+        <td style="white-space:nowrap;font-size:.75rem">${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>
+          <button class="btn-secondary btn-sm btn-danger" onclick="deleteHistory('${esc(e.prompt_id)}')">🗑</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);
-  }
+  } catch (e) { toast(`History error: ${e.message}`, "error"); }
+  finally { setLoading(btn, false); }
 }
 
-async function deletePrompt(id) {
+async function deleteHistory(id) {
   if (!confirm("Delete this prompt?")) return;
   try {
     await apiFetch(`/api/history/${id}`, "DELETE");
-    toast("Prompt deleted.", "success");
+    toast("Deleted.", "success");
     loadHistory();
-  } catch (e) {
-    toast(`Delete failed: ${e.message}`, "error");
-  }
+  } catch (e) { toast(`Delete failed: ${e.message}`, "error"); }
 }
+window.deleteHistory = deleteHistory;
+
+/* ── Init ───────────────────────────────────────────────────────────── */
+(async () => {
+  await loadConfig();
+  await loadSettingsList();
+})();

frontend/index.html

@@ -4,23 +4,20 @@
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>PromptForge — Structured Prompt Generator</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
   <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>
 
-<!-- These elements kept for JS compatibility but hidden via CSS -->
-<div id="cursor-dot"></div>
-<div id="cursor-ring"></div>
-<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>
+<!-- Legacy cursor/bg elements (hidden via CSS) -->
+<div id="cursor-dot"></div><div id="cursor-ring"></div>
+<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 ─────────────────────────────────────────────────────── -->
   <header>
     <div class="header-inner">
       <div class="logo-group">
@@ -29,221 +26,431 @@
         <span class="logo-tag">v3.0</span>
       </div>
       <div class="header-meta">
+        <div class="api-env-status" id="env-status-bar">
+          <span class="env-dot" id="env-hf-dot" title="Hugging Face API key status">HF</span>
+          <span class="env-dot" id="env-google-dot" title="Google API key status">GG</span>
+        </div>
         <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">📖 Docs</a>
+      </div>
+    </div>
+    <!-- ── Main Tab Bar ──────────────────────────────────────────────── -->
+    <div class="main-tabs">
+      <div class="tabs-inner">
+        <button class="main-tab active" data-main-tab="generate">
+          <span class="tab-icon">⚡</span> Generate
+        </button>
+        <button class="main-tab" data-main-tab="settings">
+          <span class="tab-icon">⚙️</span> Instruction Settings
+          <span class="settings-count-badge" id="settings-count">0</span>
+        </button>
+        <button class="main-tab" data-main-tab="history">
+          <span class="tab-icon">📜</span> History
+        </button>
       </div>
     </div>
   </header>
 
-  <main>
+  <!-- ═══════════════════════════════════════════════════════════════════ -->
+  <!-- TAB 1: GENERATE                                                      -->
+  <!-- ═══════════════════════════════════════════════════════════════════ -->
+  <div id="tab-generate" class="tab-page active">
+    <main>
 
-    <!-- ── 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>
+      <!-- API Config 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 Keys</h3>
+            <p>API keys are read from environment variables first. Enter below to override for this session.</p>
+          </div>
         </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 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-note">
-            <span class="api-dot" id="api-status-dot"></span>
-            <span id="api-status-text">No key entered</span>
+          <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="Not required for local engine" disabled/>
+              <button class="api-toggle-btn" id="btn-toggle-key" title="Show/hide">👁</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>
-    </div>
 
-    <!-- ── 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>
+      <!-- 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>
-      <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">
-      <div class="card-header">
-        <h2>✍️ Enter Your Instruction</h2>
-        <span class="step-badge">STEP 01</span>
-      </div>
+      <!-- STEP 1: Input -->
+      <section id="step-input" class="card">
+        <div class="card-header">
+          <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. PromptForge transforms it into a fully structured Google AI Studio prompt — with role, constraints, style, safety, and examples.</span>
+        </div>
+        <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, WCAG AA accessibility, React hooks only."></textarea>
+        </div>
+        <div class="advanced-toggle-row">
+          <button class="btn-link" id="btn-toggle-advanced">⚙️ Advanced options</button>
+        </div>
+        <div id="advanced-options" class="advanced-panel hidden">
+          <div class="adv-grid">
+            <div class="field">
+              <label><span class="lbl-dot"></span> Persona
+                <span class="tooltip-wrap"><span class="tooltip-icon">?</span><span class="tooltip-text">Sets the AI's role identity, influencing vocabulary, depth, and response style.</span></span>
+              </label>
+              <select id="gen-persona">
+                <option value="default">🤖 Auto-detect from instruction</option>
+                <option value="senior_dev">👨‍💻 Senior Software Engineer</option>
+                <option value="data_scientist">📊 Data Scientist</option>
+                <option value="tech_writer">✍️ Technical Writer</option>
+                <option value="product_mgr">📋 Product Manager</option>
+                <option value="security_eng">🔒 Security Engineer</option>
+                <option value="custom">✏️ Custom persona…</option>
+              </select>
+            </div>
+            <div class="field">
+              <label><span class="lbl-dot"></span> Style
+                <span class="tooltip-wrap"><span class="tooltip-icon">?</span><span class="tooltip-text">Controls verbosity, formality, and explanation depth.</span></span>
+              </label>
+              <select id="gen-style">
+                <option value="professional">💼 Professional</option>
+                <option value="concise">⚡ Concise</option>
+                <option value="detailed">📖 Detailed</option>
+                <option value="beginner">🎓 Beginner-friendly</option>
+                <option value="formal">📄 Formal</option>
+                <option value="creative">🎨 Creative</option>
+              </select>
+            </div>
+          </div>
+          <div class="field" id="custom-persona-field" style="display:none">
+            <label><span class="lbl-dot"></span> Custom Persona Text</label>
+            <input type="text" id="gen-custom-persona" placeholder="e.g. Expert Kubernetes architect with CNCF certification"/>
+          </div>
+          <div class="field">
+            <label><span class="lbl-dot"></span> Additional Constraints <span class="lbl-opt">one per line</span></label>
+            <textarea id="gen-constraints" rows="3" placeholder="e.g. Must use async/await&#10;Rate limiting required&#10;No external dependencies"></textarea>
+          </div>
+        </div>
+        <div class="action-row">
+          <button id="btn-generate" class="btn-primary">⚡ Generate Prompt Manifest</button>
+          <button id="btn-load-from-settings" class="btn-secondary">📂 Load from Settings</button>
+        </div>
+      </section>
 
-      <div class="info-banner">
-        <span class="info-icon">💡</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>
+      <!-- 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 from your edits.</p>
+        <div id="manifest-grid" class="manifest-grid"></div>
+        <details>
+          <summary>📋 Raw JSON Manifest</summary>
+          <pre id="manifest-json"></pre>
+        </details>
+        <!-- Explanation panel -->
+        <div id="explanation-panel" class="explanation-panel hidden">
+          <div class="explanation-header">
+            <span class="explanation-icon">🧠</span>
+            <strong>Why was this prompt structured this way?</strong>
+          </div>
+          <div id="explanation-text" class="explanation-body"></div>
+          <div id="key-decisions" class="key-decisions"></div>
+        </div>
+        <div class="action-row">
+          <button id="btn-approve" class="btn-primary">✅ Approve &amp; Finalize</button>
+          <button id="btn-explain" class="btn-secondary">🧠 Explain Structure</button>
+          <button id="btn-reset" class="btn-secondary">↩ Start Over</button>
+        </div>
+      </section>
 
-      <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>
+      <!-- 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>
+        </div>
+        <div id="tab-text" class="tab-panel">
+          <pre id="finalized-text"></pre>
+          <button class="btn-copy" data-target="finalized-text">📋 Copy</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>
+        </div>
+        <div class="divider"></div>
+        <div class="action-row">
+          <button id="btn-export-json" class="btn-secondary">⬇ JSON</button>
+          <button id="btn-export-txt" class="btn-secondary">⬇ Text</button>
+          <button id="btn-refine" class="btn-secondary">🔁 Refine</button>
+          <button id="btn-save-as-setting" class="btn-secondary">💾 Save as Setting</button>
+          <button id="btn-new" class="btn-primary">➕ New Prompt</button>
+        </div>
+      </section>
 
-      <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>
+      <!-- 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 creates a new version (v+1) 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>
 
-      <div class="action-row">
-        <button id="btn-generate" class="btn-primary">⚡ Generate Prompt Manifest</button>
-      </div>
-    </section>
+    </main>
+  </div><!-- /tab-generate -->
 
-    <!-- ── 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 from your edits.</p>
+  <!-- ═══════════════════════════════════════════════════════════════════ -->
+  <!-- TAB 2: INSTRUCTION SETTINGS                                          -->
+  <!-- ═══════════════════════════════════════════════════════════════════ -->
+  <div id="tab-settings" class="tab-page hidden">
+    <main>
 
-      <div id="manifest-grid" class="manifest-grid"></div>
+      <div class="settings-layout">
 
-      <details>
-        <summary>📋 Raw JSON Manifest</summary>
-        <pre id="manifest-json"></pre>
-      </details>
+        <!-- ── Left: Settings Form ────────────────────────────────── -->
+        <div class="settings-form-col">
+          <div class="card" id="settings-form-card">
+            <div class="card-header">
+              <h2 id="settings-form-title">➕ New Instruction Setting</h2>
+              <div style="display:flex;gap:8px">
+                <button class="btn-secondary btn-sm" id="btn-settings-clear">✕ Clear</button>
+              </div>
+            </div>
 
-      <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>
-      </div>
-    </section>
+            <input type="hidden" id="edit-settings-id"/>
 
-    <!-- ── 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>
+            <div class="field">
+              <label>
+                <span class="lbl-dot"></span> Title *
+                <span class="tooltip-wrap"><span class="tooltip-icon">?</span><span class="tooltip-text">A short, descriptive name for this instruction template.</span></span>
+              </label>
+              <input type="text" id="s-title" placeholder="e.g. React Component Generator" maxlength="120"/>
+            </div>
 
-      <p class="muted">Your structured prompt is ready. Copy it directly into Google AI Studio or export it below.</p>
+            <div class="field">
+              <label><span class="lbl-dot"></span> Description <span class="lbl-opt">optional</span></label>
+              <textarea id="s-description" rows="2" placeholder="Brief notes about when to use this setting…"></textarea>
+            </div>
 
-      <div class="tab-bar">
-        <button class="tab active" data-tab="text">📄 Plain Text</button>
-        <button class="tab"        data-tab="json">{ } JSON</button>
-      </div>
+            <div class="field">
+              <label><span class="lbl-dot"></span> Instruction *</label>
+              <textarea id="s-instruction" rows="5" placeholder="The full instruction or task description that will be used to generate the prompt…"></textarea>
+              <div class="field-note" id="s-instruction-count">0 / 8000 characters</div>
+            </div>
 
-      <div id="tab-text" class="tab-panel">
-        <pre id="finalized-text"></pre>
-        <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 to Clipboard</button>
-      </div>
+            <div class="field">
+              <label><span class="lbl-dot"></span> Extra Context <span class="lbl-opt">optional</span></label>
+              <textarea id="s-extra-context" rows="2" placeholder="Additional constraints, background info, or requirements…"></textarea>
+            </div>
 
-      <div class="divider"></div>
+            <div class="settings-grid-2">
+              <div class="field">
+                <label>
+                  <span class="lbl-dot"></span> Persona
+                  <span class="tooltip-wrap"><span class="tooltip-icon">?</span><span class="tooltip-text">The AI persona — sets domain expertise and communication style.</span></span>
+                </label>
+                <select id="s-persona">
+                  <option value="default">🤖 Auto-detect</option>
+                  <option value="senior_dev">👨‍💻 Senior Dev</option>
+                  <option value="data_scientist">📊 Data Scientist</option>
+                  <option value="tech_writer">✍️ Tech Writer</option>
+                  <option value="product_mgr">📋 Product Manager</option>
+                  <option value="security_eng">🔒 Security Engineer</option>
+                  <option value="custom">✏️ Custom…</option>
+                </select>
+              </div>
+              <div class="field">
+                <label>
+                  <span class="lbl-dot"></span> Style
+                  <span class="tooltip-wrap"><span class="tooltip-icon">?</span><span class="tooltip-text">Controls verbosity, tone, and explanation depth.</span></span>
+                </label>
+                <select id="s-style">
+                  <option value="professional">💼 Professional</option>
+                  <option value="concise">⚡ Concise</option>
+                  <option value="detailed">📖 Detailed</option>
+                  <option value="beginner">🎓 Beginner</option>
+                  <option value="formal">📄 Formal</option>
+                  <option value="creative">🎨 Creative</option>
+                </select>
+              </div>
+            </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>
-      </div>
-    </section>
+            <div class="field" id="s-custom-persona-field" style="display:none">
+              <label><span class="lbl-dot"></span> Custom Persona Text</label>
+              <input type="text" id="s-custom-persona" placeholder="e.g. Expert Rust systems programmer"/>
+            </div>
 
-    <!-- ── 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="settings-grid-2">
+              <div class="field">
+                <label>
+                  <span class="lbl-dot"></span> Output Format
+                </label>
+                <select id="s-output-format">
+                  <option value="both">📦 Both (Text + JSON)</option>
+                  <option value="text">📄 Text only</option>
+                  <option value="json">{ } JSON only</option>
+                </select>
+              </div>
+              <div class="field">
+                <label>
+                  <span class="lbl-dot"></span> AI Enhancement
+                </label>
+                <select id="s-provider">
+                  <option value="none">⚡ None (local)</option>
+                  <option value="huggingface">🤗 Hugging Face</option>
+                  <option value="google">🌐 Google Gemini</option>
+                </select>
+              </div>
+            </div>
 
-      <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="field">
+              <label>
+                <span class="lbl-dot"></span> Constraints
+                <span class="tooltip-wrap"><span class="tooltip-icon">?</span><span class="tooltip-text">Hard rules the AI must follow. One constraint per line.</span></span>
+                <span class="lbl-opt">one per line</span>
+              </label>
+              <textarea id="s-constraints" rows="4" placeholder="Use TypeScript strict mode&#10;Include unit tests&#10;WCAG 2.1 AA accessibility&#10;No external dependencies"></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>
+            <div class="field">
+              <label><span class="lbl-dot"></span> Tags <span class="lbl-opt">comma-separated</span></label>
+              <input type="text" id="s-tags" placeholder="react, typescript, frontend"/>
+            </div>
 
-    <!-- ── History ──────────────────────────────────────────────── -->
-    <section id="section-history" class="card">
-      <div class="card-header">
-        <h2>📜 Prompt History</h2>
-        <button id="btn-load-history" class="btn-secondary btn-sm">↺ Refresh</button>
-      </div>
+            <div class="field enhance-toggle-row">
+              <label class="toggle-label">
+                <input type="checkbox" id="s-enhance" class="toggle-checkbox"/>
+                <span class="toggle-track">
+                  <span class="toggle-thumb"></span>
+                </span>
+                <span>Enable AI enhancement on generate</span>
+              </label>
+            </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>
+            <div class="action-row">
+              <button id="btn-settings-save" class="btn-primary">💾 Save Setting</button>
+              <button id="btn-settings-generate" class="btn-secondary" style="display:none">⚡ Generate Now</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- ── Right: Saved Settings List ─────────────────────────── -->
+        <div class="settings-list-col">
+          <div class="settings-list-header">
+            <h3>Saved Settings <span id="settings-total-count" class="count-badge">0</span></h3>
+            <div class="settings-list-actions">
+              <input type="text" id="settings-search" placeholder="🔍 Search…" class="search-input"/>
+              <select id="settings-filter-tag" class="filter-select">
+                <option value="">All tags</option>
+              </select>
+            </div>
+          </div>
+
+          <div id="settings-list" class="settings-list">
+            <div class="settings-empty">
+              <div class="empty-icon">📋</div>
+              <p>No settings yet. Create your first one!</p>
+            </div>
+          </div>
+        </div>
 
-  </main>
+      </div><!-- /settings-layout -->
+    </main>
+  </div><!-- /tab-settings -->
 
-  <!-- ── Footer ─────────────────────────────────────────────────── -->
+
+  <!-- ════════════════════════���══════════════════════════════════════════ -->
+  <!-- TAB 3: HISTORY                                                        -->
+  <!-- ═══════════════════════════════════════════════════════════════════ -->
+  <div id="tab-history" class="tab-page hidden">
+    <main>
+      <div class="card">
+        <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>Settings</th>
+                <th>Date</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody id="history-body">
+              <tr><td class="empty-msg" colspan="7">Click ↺ Refresh to load history.</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </main>
+  </div><!-- /tab-history -->
+
+  <!-- ── Footer ─────────────────────────────────────────────────────── -->
   <footer>
     <div class="footer-inner">
-      <span class="footer-copy">© 2025 PromptForge — Structured Prompt Generator · Port 7860</span>
+      <span class="footer-copy">© 2025 PromptForge v3.0 · 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>
@@ -251,6 +458,20 @@
 
 </div><!-- #app -->
 
+<!-- Load-from-settings modal -->
+<div id="modal-overlay" class="modal-overlay hidden">
+  <div class="modal-box">
+    <div class="modal-header">
+      <h3>📂 Load from Saved Setting</h3>
+      <button class="modal-close" id="btn-modal-close">✕</button>
+    </div>
+    <div class="modal-body">
+      <input type="text" id="modal-search" class="modal-search" placeholder="🔍 Search settings…"/>
+      <div id="modal-settings-list" class="modal-list"></div>
+    </div>
+  </div>
+</div>
+
 <div id="toast-container"></div>
 <script src="/static/client.js"></script>
 </body>

frontend/style.css

@@ -1,208 +1,278 @@
-/* ═══════════════════════════════════════════════════════════════
-   PROMPTFORGE — Clean Modern UI v3.0
-   Aesthetic: Professional SaaS · Light & Airy · Clear Hierarchy
-   ═══════════════════════════════════════════════════════════════ */
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+/* PromptForge v3.0 — Full UI including Instruction Settings Panel */
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
 
 :root {
-  --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;
+  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f0f3f9; --surface-3:#e8edf6;
+  --border:#dde3ee; --border-focus:#6366f1;
+  --indigo:#6366f1; --indigo-dk:#4f46e5; --indigo-lt:#eef0ff; --indigo-mid:#c7d2fe;
+  --violet:#8b5cf6; --teal:#0d9488; --teal-lt:#ccfbf1;
+  --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 2px 6px rgba(0,0,0,.04);
+  --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:'Plus Jakarta Sans',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}
 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{width:5px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
 ::-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 shell ── */
 #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}
+.tab-page{display:none;flex:1}
+.tab-page.active{display:block}
+main{max-width:940px;width:100%;margin:0 auto;padding:24px 20px 80px;display:flex;flex-direction:column;gap:20px}
 
 /* ── 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}
+header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(0,0,0,.04)}
+.header-inner{max-width:940px;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: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}
+.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 10px rgba(99,102,241,.35);flex-shrink:0}
+.logo-text{font-size:1.1rem;font-weight:800;color:var(--text);letter-spacing:-.4px}
+.logo-tag{font-family:var(--font-mono);font-size:.62rem;color:var(--indigo);background:var(--indigo-lt);border:1px solid var(--indigo-mid);padding:2px 8px;border-radius:20px}
 .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)}
+.api-env-status{display:flex;gap:5px}
+.env-dot{font-size:.62rem;font-family:var(--font-mono);font-weight:700;padding:3px 7px;border-radius:6px;background:var(--surface-3);color:var(--text-faint);border:1px solid var(--border);transition:all .3s;cursor:default}
+.env-dot.active{background:var(--green-lt);color:#065f46;border-color:#6ee7b7}
+.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 11px;border-radius:20px}
+.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 2.5s ease-in-out infinite}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
+.nav-link{font-size:.8rem;font-weight:500;color:var(--text-muted);text-decoration:none;padding:6px 13px;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)}
+/* ── Main tab bar ── */
+.main-tabs{border-top:1px solid var(--border);background:var(--surface)}
+.tabs-inner{max-width:940px;margin:0 auto;padding:0 20px;display:flex;gap:0}
+.main-tab{display:flex;align-items:center;gap:7px;padding:11px 20px;border:none;background:transparent;font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;position:relative;white-space:nowrap}
+.main-tab:hover{color:var(--text);background:var(--surface-2)}
+.main-tab.active{color:var(--indigo);border-bottom-color:var(--indigo);background:transparent}
+.tab-icon{font-size:.9rem}
+.settings-count-badge{font-size:.6rem;font-weight:700;background:var(--indigo);color:white;border-radius:10px;padding:1px 6px;min-width:18px;text-align:center;line-height:1.5}
+
+/* ── API Key Panel ── */
+.api-config-banner{background:var(--surface);border:1.5px solid var(--indigo-mid);border-radius:var(--radius-lg);padding:18px 22px;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-banner-icon{width:38px;height:38px;flex-shrink:0;background:var(--indigo-lt);border-radius:var(--radius-md);display:grid;place-items:center;font-size:18px}
+.api-banner-title h3{font-size:.93rem;font-weight:700;color:var(--text)}
+.api-banner-title p{font-size:.78rem;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{width:100%;padding:10px 38px 10px 13px;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:.83rem;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{position:absolute;right:9px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:14px;padding:3px;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{width:6px;height:6px;border-radius:50%;background:var(--text-faint);flex-shrink:0;transition:all .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: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{display:flex;flex-direction:column;align-items:center;gap:4px}
+.prog-node{width:30px;height:30px;border-radius:50%;border:2px solid var(--border);background:var(--surface);display:grid;place-items:center;font-size:.7rem;font-weight:700;color:var(--text-muted);transition:all .3s 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,.15);transform:scale(1.12)}
+.prog-step.done .prog-node{border-color:var(--green);background:var(--green);color:white;font-size:0}
+.prog-step.done .prog-node::before{content:'✓';font-size:.75rem}
+.prog-label{font-size:.58rem;color:var(--text-faint);font-weight:600;letter-spacing:.4px;text-transform:uppercase}
+.prog-step.active .prog-label{color:var(--indigo)}
 .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{width:56px;height:2px;background:var(--border);margin-bottom:20px;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}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:26px 28px;box-shadow:var(--shadow-md);animation:cardIn .35s ease both}
+@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
+.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}
+.card-header h2{font-size:1rem;font-weight:700;color:var(--text);letter-spacing:-.2px}
+.step-badge{font-family:var(--font-mono);font-size:.58rem;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 9px;border-radius:20px;white-space:nowrap}
+
+/* ── 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:11px 15px;margin-bottom:18px;font-size:.84rem;color:var(--indigo-dk);line-height:1.55}
 .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}
+/* ── Form elements ── */
+.field{margin-bottom:16px}
+label{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-soft);margin-bottom:6px}
 .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)}
+.lbl-opt{color:var(--text-faint);font-size:.64rem;margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400}
+textarea,input[type="text"],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:.88rem;padding:10px 13px;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,.09)}
 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}
+textarea{min-height:90px;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 13px center;padding-right:36px;resize:none}
+.field-note{font-size:.7rem;color:var(--text-muted);margin-top:4px;text-align:right}
+.settings-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+@media(max-width:580px){.settings-grid-2{grid-template-columns:1fr}}
+
+/* ── Advanced panel ── */
+.advanced-toggle-row{margin-bottom:10px}
+.btn-link{background:none;border:none;color:var(--indigo);font-size:.83rem;font-weight:600;cursor:pointer;padding:0;font-family:var(--font-body)}
+.btn-link:hover{text-decoration:underline}
+.advanced-panel{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;margin-bottom:16px;animation:cardIn .3s ease}
+.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+@media(max-width:580px){.adv-grid{grid-template-columns:1fr}}
+
+/* ── Tooltip ── */
+.tooltip-wrap{position:relative;display:inline-flex;margin-left:4px}
+.tooltip-icon{width:14px;height:14px;border-radius:50%;background:var(--surface-3);border:1px solid var(--border);font-size:.65rem;display:grid;place-items:center;cursor:default;color:var(--text-muted);font-weight:700;font-style:normal}
+.tooltip-text{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);width:220px;background:#1e1e2e;color:#cdd6f4;font-size:.72rem;padding:8px 10px;border-radius:var(--radius-sm);font-weight:400;text-transform:none;letter-spacing:0;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;box-shadow:var(--shadow-lg)}
+.tooltip-wrap:hover .tooltip-text{opacity:1}
+
+/* ── Toggle switch ── */
+.enhance-toggle-row{margin-top:4px}
+.toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.85rem;font-weight:500;color:var(--text-soft);text-transform:none;letter-spacing:0}
+.toggle-checkbox{display:none}
+.toggle-track{width:40px;height:22px;background:var(--border);border-radius:11px;position:relative;transition:background .25s;flex-shrink:0}
+.toggle-checkbox:checked+.toggle-track{background:var(--indigo)}
+.toggle-thumb{position:absolute;width:16px;height:16px;background:white;border-radius:50%;top:3px;left:3px;transition:left .25s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
+.toggle-checkbox:checked+.toggle-track .toggle-thumb{left:21px}
 
 /* ── 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}
+button{cursor:pointer;font-family:var(--font-body)}
+.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:var(--radius-md);font-size:.88rem;font-weight:700;padding:11px 24px;background:linear-gradient(135deg,var(--indigo) 0%,var(--violet) 100%);color:white;box-shadow:var(--shadow-btn);transition:transform .2s,box-shadow .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-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
+.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text-soft);font-size:.85rem;font-weight:500;padding:10px 18px;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}
+.btn-sm{font-size:.76rem;padding:5px 12px;border-radius:var(--radius-sm)}
+.action-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;align-items:center}
+.spinner{display:inline-block;width:13px;height:13px;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 grid ── */
+.manifest-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:18px}
+.manifest-field label{font-size:.66rem;color:var(--text-muted);text-transform:uppercase}
+.manifest-field textarea{min-height:66px;font-size:.83rem}
 .manifest-field.full{grid-column:1/-1}
-@media(max-width:600px){.manifest-grid{grid-template-columns:1fr}.manifest-field.full{grid-column:auto}}
+@media(max-width:580px){.manifest-grid{grid-template-columns:1fr}.manifest-field.full{grid-column:auto}}
+
+/* ── Explanation panel ── */
+.explanation-panel{background:linear-gradient(135deg,var(--indigo-lt),#f5f0ff);border:1px solid var(--indigo-mid);border-radius:var(--radius-md);padding:16px 18px;margin-top:16px;animation:cardIn .35s ease}
+.explanation-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
+.explanation-icon{font-size:1.2rem}
+.explanation-header strong{font-size:.88rem;color:var(--indigo-dk);font-weight:700}
+.explanation-body{font-size:.84rem;color:var(--text-soft);line-height:1.65;white-space:pre-wrap;margin-bottom:12px}
+.key-decisions{display:flex;flex-direction:column;gap:5px}
+.decision-chip{display:inline-flex;align-items:center;gap:6px;background:white;border:1px solid var(--indigo-mid);border-radius:20px;padding:4px 12px;font-size:.75rem;color:var(--indigo-dk);font-weight:500}
+.decision-chip::before{content:'•';color:var(--indigo)}
 
-/* ── 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}
+/* ── Tabs (inner) ── */
+.tab-bar{display:flex;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;width:fit-content;margin-bottom:14px}
+.tab{border:none;background:transparent;border-radius:var(--radius-sm);padding:6px 16px;font-size:.8rem;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:700}
 .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}
+/* ── Code/Pre ── */
+pre{background:#1e1e2e;border-radius:var(--radius-md);padding:14px 16px;overflow-x:auto;font-family:var(--font-mono);font-size:.8rem;line-height:1.7;color:#cdd6f4;white-space:pre-wrap;word-break:break-word;border:1px solid rgba(205,214,244,.06)}
+details{margin-top:10px}
+summary{font-size:.82rem;font-weight:600;color:var(--text-muted);cursor:pointer;padding:9px 0;user-select:none;display:flex;align-items:center;gap:6px;list-style:none}
 summary:hover{color:var(--indigo)}
-summary::before{content:'▶';font-size:.7rem;transition:transform .2s}
+summary::before{content:'▶';font-size:.68rem;transition:transform .2s}
 details[open] summary::before{transform:rotate(90deg)}
-.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{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-muted);font-family:var(--font-mono);font-size:.72rem;padding:6px 12px;margin-top:8px;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)}
+.muted{font-size:.86rem;color:var(--text-muted);margin-bottom:16px;line-height:1.6}
+.divider{height:1px;background:var(--border);margin:18px 0}
 
-/* ── 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}
+/* ── Settings layout (two-column) ── */
+.settings-layout{display:grid;grid-template-columns:1fr 380px;gap:20px;max-width:940px;margin:0 auto;padding:24px 20px 80px;align-items:start}
+@media(max-width:780px){.settings-layout{grid-template-columns:1fr;padding:16px 14px 60px}}
+.settings-form-col{}
+.settings-list-col{position:sticky;top:120px}
+.settings-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px;flex-wrap:wrap}
+.settings-list-header h3{font-size:.95rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
+.count-badge{font-size:.62rem;font-weight:700;background:var(--indigo-lt);color:var(--indigo);border:1px solid var(--indigo-mid);border-radius:10px;padding:1px 7px}
+.settings-list-actions{display:flex;gap:8px;flex-wrap:wrap}
+.search-input{padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:.82rem;background:var(--surface);color:var(--text);outline:none;transition:border-color .2s;width:150px}
+.search-input:focus{border-color:var(--border-focus)}
+.filter-select{padding:7px 30px 7px 10px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:.78rem;background:var(--surface);color:var(--text-muted);appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;cursor:pointer;outline:none;resize:none}
+.settings-list{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 280px);overflow-y:auto;padding-right:2px}
+
+/* ── Setting card ── */
+.setting-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;transition:all .2s;position:relative}
+.setting-card:hover{border-color:var(--indigo-mid);box-shadow:var(--shadow-md);transform:translateY(-1px)}
+.setting-card.active-edit{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
+.setting-card-title{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:7px}
+.setting-card-desc{font-size:.76rem;color:var(--text-muted);margin-bottom:9px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.setting-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.tag-chip{font-size:.63rem;font-weight:600;padding:2px 7px;border-radius:10px;background:var(--indigo-lt);color:var(--indigo-dk);border:1px solid var(--indigo-mid)}
+.tag-chip.style{background:var(--teal-lt);color:var(--teal);border-color:#99f6e4}
+.use-count{font-size:.68rem;color:var(--text-faint);margin-left:auto;font-family:var(--font-mono)}
+.setting-card-actions{position:absolute;top:10px;right:10px;display:flex;gap:4px;opacity:0;transition:opacity .2s}
+.setting-card:hover .setting-card-actions{opacity:1}
+.settings-empty{text-align:center;padding:40px 20px;color:var(--text-muted)}
+.empty-icon{font-size:2.5rem;margin-bottom:10px;opacity:.4}
+.settings-empty p{font-size:.85rem}
 
 /* ── 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}
+table{width:100%;border-collapse:collapse;font-size:.83rem}
 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)}
+th{padding:10px 13px;text-align:left;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap}
+td{padding:10px 13px;color:var(--text-soft);border-bottom:1px solid var(--surface-2)}
 tr:last-child td{border-bottom:none}
 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}
+.empty-msg{color:var(--text-faint);font-style:italic;text-align:center;padding:24px 13px!important}
+.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.68rem;font-weight:700;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)}
 
+/* ── Modal ── */
+.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
+.modal-overlay.hidden{display:none!important}
+.modal-box{background:var(--surface);border-radius:var(--radius-xl);padding:0;width:100%;max-width:520px;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow:hidden;animation:cardIn .25s ease}
+.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
+.modal-header h3{font-size:.95rem;font-weight:700}
+.modal-close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:1rem;padding:4px;transition:color .2s;border-radius:6px}
+.modal-close:hover{color:var(--text);background:var(--surface-2)}
+.modal-body{padding:16px 22px;overflow-y:auto;flex:1}
+.modal-search{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:.87rem;margin-bottom:14px;outline:none;background:var(--surface-2);color:var(--text)}
+.modal-search:focus{border-color:var(--border-focus)}
+.modal-list{display:flex;flex-direction:column;gap:8px}
+.modal-item{padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all .2s}
+.modal-item:hover{border-color:var(--indigo);background:var(--indigo-lt)}
+.modal-item-title{font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:3px}
+.modal-item-desc{font-size:.75rem;color:var(--text-muted)}
+.modal-empty{text-align:center;padding:30px;color:var(--text-faint);font-style:italic}
+
 /* ── 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-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:9px;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:11px 16px;box-shadow:var(--shadow-lg);font-size:.84rem;color:var(--text);pointer-events:all;animation:toastIn .3s cubic-bezier(.34,1.56,.64,1) both;min-width:250px;max-width:360px}
 .toast.leaving{animation:toastOut .3s ease forwards}
-@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)}}
+@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
+@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(16px)}}
 .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}
+.toast-icon{font-size: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{border-top:1px solid var(--border);background:var(--surface);padding:13px 20px}
+.footer-inner{max-width:940px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.76rem;color:var(--text-faint)}
+.footer-links{display:flex;gap:14px}
 .footer-links a{color:var(--text-muted);text-decoration:none;transition:color .2s}
 .footer-links a:hover{color:var(--indigo)}
 
 /* ── Utils ── */
 .hidden{display:none!important}
-.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}}
+.fade-in{animation:cardIn .35s ease both}
+@media(max-width:600px){main{padding:16px 14px 60px}.card{padding:18px 16px}.prog-line{width:28px}.tabs-inner{overflow-x:auto;gap:0;white-space:nowrap}.main-tab{padding:10px 14px;font-size:.78rem}}