feat: Add Advanced Engine Settings and native UI logo

- Implemented collapsible 'Advanced Engine Settings' allowing users to override Ollama and Hugging Face models directly from the UI.
- Swapped the generic banner placeholder for the Chronicle Portrait Studio logo.svg.
- Color-matched the SVG logo to the Next.js Obsidian & Gold palette (#0a0805, #DAB062).

.gemini-commit-msg.txt

@@ -1,7 +1,4 @@
-Migrate to Next.js & FastAPI Architecture with Premium UI
+Refine Active Engines UI component
 
-- Decouples monolithic Gradio app into FastAPI backend (`api.py`) and Next.js frontend (`frontend/`).
-- Implements Stitch MCP-inspired 'Alchemist's Workshop' aesthetic with glassmorphism and Cinzel typography.
-- Replaces generic Gradio grids with precisely constrained, center-aligned HTML forms using Tailwind v4.
-- Preserves 100% functional parity including JSON Save/Load, Example Characters, and Image Generation.
-- Updates README documentation to reflect the new decoupled setup instructions.
+- Adds explicit labels (Text Refinement, Image Synthesis) to the active engines dropdowns for clarity.
+- Restores dynamic availability checking: Local options (Ollama, ComfyUI) are automatically disabled with an '(Offline)' tag if the FastAPI backend detects they are unreachable.

frontend/src/components/ClientApp.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { User, Sparkles, Sword, Globe, Palette, Settings, Image as ImageIcon, Wand2, Dices, Save, Download, Upload, Copy } from 'lucide-react';
 
-const API_URL = "http://127.0.0.1:8000";
+const API_URL = process.env.NODE_ENV === "development" ? "http://127.0.0.1:8000" : "";
 
 const tabs = [
   { id: 'identity', label: 'Identity & Race', icon: User },
@@ -48,6 +48,17 @@ export default function ClientApp() {
         });
         setFeatures(initFeatures);
         setRandomization(Array(data.feature_sequence.length).fill(false));
+
+        // Smart Active Engine Defaults
+        if (!data.comfy_active) {
+            if (data.hf_active) setImageBackend("Hugging Face (Cloud)");
+            else if (data.gemini_active) setImageBackend("Gemini (Cloud)");
+        }
+        
+        if (!data.ollama_models?.length) {
+            if (data.gemini_active) setRefinementBackend("Gemini (Cloud)");
+            else if (data.hf_active) setRefinementBackend("Hugging Face (Cloud)");
+        }
       })
       .catch(err => console.error("Failed to load config", err));
   }, []);
@@ -98,11 +109,32 @@ export default function ClientApp() {
       });
       const data = await res.json();
       setFeatures(data.new_values);
-      setRefinedOutput("");
+      setRefinedOutput(""); // Clear refined narrative when traits are re-rolled
       setStatusMsg("Randomization complete.");
     } catch (e) { console.error(e); }
   };
 
+  const handleGenerateName = async () => {
+    if (!config) return;
+    try {
+      setStatusMsg("Weaving a name from the threads of fate...");
+      // find race index
+      const raceIndex = config?.feature_sequence?.findIndex((seq: any) => seq[1] === "race");
+      const race = raceIndex !== -1 && raceIndex !== undefined ? features[raceIndex] : "Human";
+      
+      const res = await fetch(`${API_URL}/api/generate_name`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ race })
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setCharacterName(data.name);
+        setStatusMsg("Name generation complete.");
+      }
+    } catch (e) { console.error(e); }
+  };
+
   const applyLoadedData = (data: any) => {
     if (!config) return;
     setCharacterName(data.name || "Unnamed Hero");
@@ -326,7 +358,7 @@ export default function ClientApp() {
           <div className="text-[10px] uppercase tracking-widest text-[#A89880] mb-4 px-4 border-t border-[#2D241A] pt-6">Global Actions</div>
           <button onClick={handleRandomize} className="w-full mx-2 flex items-center justify-center gap-3 px-4 py-3 border border-[#3A4E59] bg-[#0E151A] rounded-lg text-[#61C2DF] hover:bg-[#121B22] hover:border-[#61C2DF] transition-all group" style={{ width: 'calc(100% - 1rem)'}}>
              <Dices size={18} />
-             <span className="text-sm tracking-wide font-medium">Randomize Flags</span>
+             <span className="text-sm tracking-wide font-medium">Reroll Marked Traits</span>
           </button>
         </nav>
         
@@ -336,16 +368,69 @@ export default function ClientApp() {
                <Settings size={16} />
                <span className="text-xs uppercase tracking-wider font-semibold">Active Engines</span>
             </div>
-            <select value={refinementBackend} onChange={e => setRefinementBackend(e.target.value)} className="input-alchemist mb-3 text-xs" title="Text Backbone">
-              <option>Gemini (Cloud)</option>
-              <option>Hugging Face (Cloud)</option>
-              <option>Ollama (Local)</option>
-            </select>
-            <select value={imageBackend} onChange={e => setImageBackend(e.target.value)} className="input-alchemist text-xs" title="Image Engine">
-              <option>ComfyUI (Local)</option>
-              <option>Gemini (Cloud)</option>
-              <option>Hugging Face (Cloud)</option>
-            </select>
+            <div className="mb-4">
+              <label className="text-[10px] block uppercase tracking-widest text-[#A89880] mb-1.5 flex items-center gap-1"><Sparkles size={10}/> Text Refinement</label>
+              <select value={refinementBackend} onChange={e => setRefinementBackend(e.target.value)} className="input-alchemist text-xs" title="Text Backbone">
+                <option value="Gemini (Cloud)" disabled={!config?.gemini_active}>Gemini (Cloud){!config?.gemini_active ? ' (Missing Key)' : ''}</option>
+                <option value="Hugging Face (Cloud)" disabled={!config?.hf_active}>Hugging Face (Cloud){!config?.hf_active ? ' (Missing Token)' : ''}</option>
+                <option value="Ollama (Local)" disabled={!config?.ollama_models?.length}>Ollama (Local){!config?.ollama_models?.length ? ' (Offline)' : ''}</option>
+              </select>
+            </div>
+            <div className="mb-4">
+              <label className="text-[10px] block uppercase tracking-widest text-[#A89880] mb-1.5 flex items-center gap-1"><ImageIcon size={10}/> Image Synthesis</label>
+              <select value={imageBackend} onChange={e => setImageBackend(e.target.value)} className="input-alchemist text-xs" title="Image Engine">
+                <option value="Gemini (Cloud)" disabled={!config?.gemini_active}>Gemini (Cloud){!config?.gemini_active ? ' (Missing Key)' : ''}</option>
+                <option value="Hugging Face (Cloud)" disabled={!config?.hf_active}>Hugging Face (Cloud){!config?.hf_active ? ' (Missing Token)' : ''}</option>
+                <option value="ComfyUI (Local)" disabled={!config?.comfy_active}>ComfyUI (Local){!config?.comfy_active ? ' (Offline)' : ''}</option>
+              </select>
+            </div>
+
+            <details className="group [&_summary::-webkit-details-marker]:hidden">
+              <summary className="flex items-center justify-between cursor-pointer py-2 text-[#A89880] hover:text-[#DAB062] transition-colors border-t border-[#2D241A] mt-2">
+                <span className="text-[10px] uppercase tracking-widest font-semibold">Advanced Constraints</span>
+                <span className="transition group-open:rotate-180">▼</span>
+              </summary>
+              <div className="pt-2 text-xs space-y-3">
+                {refinementBackend === "Ollama (Local)" && (
+                  <div>
+                    <label className="block text-[9px] uppercase tracking-widest text-[#665D4F] mb-1">Ollama Model</label>
+                    <select value={ollamaModel} onChange={e => setOllamaModel(e.target.value)} className="input-alchemist w-full text-[10px] py-1.5 px-2 bg-[#120E0A]">
+                      <option value="">Default (llama3)</option>
+                      {config?.ollama_models?.map((m: string) => <option key={m} value={m}>{m}</option>)}
+                    </select>
+                  </div>
+                )}
+                {refinementBackend === "Hugging Face (Cloud)" && (
+                  <>
+                    <div>
+                      <label className="block text-[9px] uppercase tracking-widest text-[#665D4F] mb-1">HF Text Model</label>
+                      <input type="text" value={hfTextModel} onChange={e => setHfTextModel(e.target.value)} className="input-alchemist w-full text-[10px] py-1.5 px-2 bg-[#120E0A]" placeholder="e.g. meta-llama/Meta-Llama-3-8B-Instruct" />
+                    </div>
+                  </>
+                )}
+                {imageBackend === "Hugging Face (Cloud)" && (
+                  <>
+                    <div>
+                      <label className="block text-[9px] uppercase tracking-widest text-[#665D4F] mb-1">HF Image Model</label>
+                      <input type="text" value={hfImageModel} onChange={e => setHfImageModel(e.target.value)} className="input-alchemist w-full text-[10px] py-1.5 px-2 bg-[#120E0A]" placeholder="e.g. black-forest-labs/FLUX.1-schnell" />
+                    </div>
+                    <div>
+                      <label className="block text-[9px] uppercase tracking-widest text-[#665D4F] mb-1">Inference Provider</label>
+                      <select value={hfImageProvider} onChange={e => setHfImageProvider(e.target.value)} className="input-alchemist w-full text-[10px] py-1.5 px-2 bg-[#120E0A]">
+                        <option value="auto">Auto-Managed (Serverless)</option>
+                        <option value="fal-ai">Fal-AI (Partner)</option>
+                        <option value="replicate">Replicate (Partner)</option>
+                        <option value="hf-inference">HF Inference Endpoints</option>
+                      </select>
+                    </div>
+                  </>
+                )}
+                <div>
+                  <label className="block text-[9px] uppercase tracking-widest text-[#665D4F] mb-1">Manual API Token (Optional Override)</label>
+                  <input type="password" value={manualToken} onChange={e => setManualToken(e.target.value)} className="input-alchemist w-full text-[10px] py-1.5 px-2 bg-[#120E0A] font-mono placeholder:font-sans" placeholder="hf_..., fal_..." />
+                </div>
+              </div>
+            </details>
         </div>
       </div>
 
@@ -353,38 +438,46 @@ export default function ClientApp() {
       <div className="flex-1 flex flex-col relative z-10 overflow-y-auto shadow-inner custom-scrollbar bg-[#0f0c08]">
         <div className="sticky top-0 h-12 bg-gradient-to-b from-[#080604] to-transparent z-10 pointer-events-none w-full"></div>
         
-        <div className="max-w-2xl mx-auto w-full px-8 pb-24">
+        <div className="max-w-2xl mx-auto w-full px-4 pb-24 pt-2">
+           {/* App Logo */}
+           <div className="w-full h-32 mb-6 relative border border-[#2D241A] rounded-xl bg-gradient-to-b from-[#0a0805] to-transparent shadow-inner overflow-hidden flex items-center justify-center">
+               <img src="/logo.svg" alt="Chronicle Portrait Studio Logo" className="w-full h-full object-cover drop-shadow-[0_0_15px_rgba(218,176,98,0.3)]" />
+           </div>
+
            {/* Section Headers */}
-           <div className="mb-10 pl-2">
-              <h2 className="font-cinzel text-3xl text-[#E2D1B3] mb-3">{tabs.find(t => t.id === activeTab)?.label}</h2>
+           <div className="mb-6 pl-2">
+              <h2 className="font-cinzel text-3xl text-[#E2D1B3] mb-2">{tabs.find(t => t.id === activeTab)?.label}</h2>
               <div className="w-16 h-1 bg-[#DAB062] rounded-full opacity-50"></div>
            </div>
 
-           <div className="glass-panel rounded-2xl p-10 mb-8 relative overflow-hidden group">
+           <div className="glass-panel rounded-xl p-6 mb-6 relative overflow-hidden group">
               <div className="absolute top-0 right-0 w-96 h-96 bg-[#DAB062]/5 rounded-full blur-3xl -mr-32 -mt-32 pointer-events-none transition-all duration-700 group-hover:bg-[#DAB062]/10"></div>
               
               <div className="relative z-10 w-full">
                 {activeTab === 'identity' && (
                   <div className="w-full">
-                     <div className="mb-10 p-6 bg-[#0a0805] border border-[#2D241A] rounded-xl shadow-inner relative group">
-                       <label className="block text-[10px] uppercase tracking-[0.2em] text-[#DAB062] mb-3 font-bold">Subject Name</label>
+                     <div className="mb-6 p-5 bg-[#0a0805] border border-[#2D241A] rounded-xl shadow-inner relative group">
+                       <div className="flex items-center justify-between mb-3">
+                         <label className="text-[10px] uppercase tracking-[0.2em] text-[#DAB062] font-bold">Subject Name</label>
+                         <button onClick={handleGenerateName} title="Generate random name based on Race" className="text-[#A89880] hover:text-[#DAB062] transition-colors flex items-center gap-1.5"><Dices size={14} /><span className="text-[10px] uppercase tracking-widest font-medium">Auto</span></button>
+                       </div>
                        <input type="text" value={characterName} onChange={e => setCharacterName(e.target.value)} className="w-full bg-[#120E0A] border border-[#3D3224] text-[#E2D1B3] font-cinzel text-xl font-semibold rounded-lg px-4 py-3 outline-none focus:border-[#DAB062] focus:ring-1 focus:ring-[#DAB062]/50 transition-all placeholder-[#E2D1B3]/20" placeholder="Enter name..."/>
                      </div>
-                     <div className="grid grid-cols-2 gap-x-12 gap-y-8">
+                     <div className="grid grid-cols-2 gap-x-12 gap-y-6">
                        {renderFeatureUI('identity', 'race', 'Race')}
                        {renderFeatureUI('identity', 'class', 'Class')}
                        {renderFeatureUI('identity', 'gender', 'Gender')}
                        {renderFeatureUI('identity', 'age', 'Age')}
                      </div>
-                     <div className="mt-10">
+                     <div className="mt-6">
                        <label className="block text-xs uppercase tracking-widest text-[#A89880] mb-4">Lore / Background Text</label>
                        <textarea value={extraInfo[0]} onChange={e => handleExtraInfoChange(0, e.target.value)} className="input-alchemist h-32 resize-none leading-relaxed"></textarea>
                      </div>
                      
-                     <div className="my-12 border-t border-[#2D241A]/50"></div>
+                     <div className="my-8 border-t border-[#2D241A]/50"></div>
                      
                      <h3 className="font-cinzel text-2xl text-[#DAB062] mb-8 drop-shadow-sm">Expression & Stance</h3>
-                     <div className="grid grid-cols-2 gap-x-12 gap-y-8">
+                     <div className="grid grid-cols-2 gap-x-12 gap-y-6">
                        {renderFeatureUI('expression_pose', 'expression', 'Expression')}
                        {renderFeatureUI('expression_pose', 'pose', 'Pose')}
                      </div>
@@ -393,7 +486,7 @@ export default function ClientApp() {
                 
                 {activeTab === 'appearance' && (
                   <div className="w-full">
-                    <div className="grid grid-cols-2 gap-x-16 gap-y-12">
+                    <div className="grid grid-cols-2 gap-x-12 gap-y-6">
                        {renderFeatureUI('appearance', 'hair_color', 'Hair Color')}
                        {renderFeatureUI('appearance', 'hair_style', 'Hair Style')}
                        {renderFeatureUI('appearance', 'eye_color', 'Eye Color')}
@@ -401,7 +494,7 @@ export default function ClientApp() {
                        {renderFeatureUI('appearance', 'skin_tone', 'Skin Tone')}
                        {renderFeatureUI('appearance', 'distinguishing_feature', 'Main Feature')}
                      </div>
-                     <div className="mt-10">
+                     <div className="mt-6">
                        <label className="block text-xs uppercase tracking-widest text-[#A89880] mb-4">Additional Visuals</label>
                        <textarea value={extraInfo[1]} onChange={e => handleExtraInfoChange(1, e.target.value)} className="input-alchemist h-32 resize-none leading-relaxed"></textarea>
                      </div>
@@ -410,14 +503,14 @@ export default function ClientApp() {
 
                 {activeTab === 'equipment' && (
                   <div className="w-full">
-                    <div className="grid grid-cols-2 gap-x-16 gap-y-12">
+                    <div className="grid grid-cols-2 gap-x-12 gap-y-6">
                        {renderFeatureUI('equipment', 'armor', 'Primary Gear')}
                        {renderFeatureUI('equipment', 'weapon', 'Weapon Variant')}
                        {renderFeatureUI('equipment', 'accessory', 'Acc. 1')}
                        {renderFeatureUI('equipment', 'accessory', 'Acc. 2')}
                        {renderFeatureUI('equipment', 'material', 'Material Finish')}
                      </div>
-                     <div className="mt-10">
+                     <div className="mt-6">
                        <label className="block text-xs uppercase tracking-widest text-[#A89880] mb-4">Custom Equipment Description</label>
                        <textarea value={extraInfo[2]} onChange={e => handleExtraInfoChange(2, e.target.value)} className="input-alchemist h-32 resize-none leading-relaxed"></textarea>
                      </div>
@@ -426,12 +519,12 @@ export default function ClientApp() {
 
                 {activeTab === 'environment' && (
                   <div className="w-full">
-                    <div className="grid grid-cols-2 gap-x-16 gap-y-12">
+                    <div className="grid grid-cols-2 gap-x-12 gap-y-6">
                        {renderFeatureUI('environment', 'background', 'Backdrop')}
                        {renderFeatureUI('environment', 'lighting', 'Illumination')}
                        {renderFeatureUI('environment', 'atmosphere', 'Atmosphere')}
                      </div>
-                     <div className="mt-10">
+                     <div className="mt-6">
                        <label className="block text-xs uppercase tracking-widest text-[#A89880] mb-4">Custom Environment Info</label>
                        <textarea value={extraInfo[3]} onChange={e => handleExtraInfoChange(3, e.target.value)} className="input-alchemist h-32 resize-none leading-relaxed"></textarea>
                      </div>
@@ -440,7 +533,7 @@ export default function ClientApp() {
 
                 {activeTab === 'style' && (
                   <div className="w-full">
-                    <div className="grid grid-cols-2 gap-x-16 gap-y-12">
+                    <div className="grid grid-cols-2 gap-x-12 gap-y-6">
                        {renderFeatureUI('vfx_style', 'vfx', 'Particle Effects')}
                        {renderFeatureUI('vfx_style', 'style', 'Illustration Style')}
                        {renderFeatureUI('vfx_style', 'mood', 'Color Grading/Mood')}