Phase 5.5: UI Model Selection & Enhanced Fault Diagnostics

- [UI] Converted Hugging Face model inputs to curated dropdowns with a 'Manual Entry' toggle.
- [UI] Implemented high-visibility 'Synthesis Chamber Fault' error display in the central canvas.
- [UI] Upgraded the action status bar to be reactive to failure states (pulsing red text).
- [Backend] Restored SD-XL-base to the curated image model list in config.py.
- [API] Exposed hf_text_models and hf_image_models in the config endpoint.

README.md

@@ -16,21 +16,18 @@ RPGPortrait is a decoupled Next.js + FastAPI web application that helps users bu
 ## Features
 - **25+ Character Parameters**: Deep customization including Identity, Appearance, Equipment, Environment, VFX, and Technical settings.
 - **🧠 AI Refinement**: Intelligent prompt enhancement using **Gemini (Cloud)**, **Curated Hugging Face Models**, or **Ollama (Local)**.
-- **🛠️ Externalized Prompts**: Tweak the core AI system instructions by editing `prompts.yaml`.
+- **⚙️ Configuration Hub**: A dedicated center for managing AI engines, models, and API tokens with real-time status detection.
+- **🍪 Milk and Cookies Persistence**: All character selections and engine configurations are locally persisted and survive page refreshes.
+- **🔦 Full-Resolution Lightbox**: View your masterpieces in high-definition with a premium blur-in effect and direct download button.
 - **🖼️ Multi-Backend Image Gen**: Toggle between **Gemini (Cloud)**, **Hugging Face (Cloud)**, and **ComfyUI (Local)**.
 - **⚡ Hugging Face Pro Features**: 
-    - Curated list of 4 text and 4 image models.
-    - Manual **Inference Provider** support (e.g., `fal-ai`, `black-forest-labs`) to bypass rate limits or use partner backends.
-    - Automated "auto" provider selection by default.
-- **🔍 Dynamic Model Discovery**: Automatically pings local Ollama and ComfyUI servers to fetch available models and hide unavailable backends.
-- **Workflow Injection**: Automated prompt, resolution, and seed injection into custom ComfyUI workflows.
-- **💾 Save & Load**: Export your character configurations as JSON files and import them back to restore your exact selections.
-- **⚔️ Exotic Arsenal**: Expanded collection of exotic weapons, armor, and accessories (Katanas, Bone Armor, Arcane Plate, etc.).
-- **🎒 Dual Accessories**: Select up to two different accessories for your character.
-- **📥 Pro Downloads**: Standard PNG downloads for portraits with friendly filenames.
-- **Randomization**: Check individual 🎲 boxes to randomize specific features on regeneration.
-- **🛡️ Robust Error Handling**: AI refinement errors are logged to the console and displayed in the UI status area without polluting your current prompt.
-- **YAML Data Storage**: Easily add or modify races, classes, backgrounds, and templates in `features.yaml`.
+    - Support for advanced models (e.g., FLUX.1-dev).
+    - Manual **Inference Provider** support (e.g., `fal-ai`, `replicate`) to bypass rate limits.
+- **🔍 Dynamic Model Discovery**: Automatically pings local Ollama and ComfyUI servers to reflect availability in the UI.
+- **💾 Save & Load**: Export character configurations as JSON and import them to restore your exact studio state.
+- **🎒 Dual Accessories & Exotic Arsenal**: Deep customization for your hero's gear and artifacts.
+- **🛡️ Robust Error Handling**: Clear, non-intrusive status messages for AI synthesis and refinement errors.
+- **YAML Data Storage**: Flexible character features and prompt templates managed via `features.yaml` and `prompts.yaml`.
 
 ## Installation & Setup
 

api.py

@@ -74,12 +74,18 @@ class ImageGenerationRequest(BaseModel):
 def get_config():
     """Returns static config info needed by frontend to render dropdowns, etc."""
     from modules.core_logic import features_data, get_example_list
+    from modules.integrations import gemini_active, hf_active
+    from modules.config import HF_TEXT_MODELS, HF_IMAGE_MODELS
     return {
         "features_data": features_data,
         "feature_sequence": FEATURE_SEQUENCE,
         "sections": SECTIONS,
         "ollama_models": get_ollama_models(),
         "comfy_active": check_comfy_availability(),
+        "gemini_active": gemini_active,
+        "hf_active": hf_active,
+        "hf_text_models": HF_TEXT_MODELS,
+        "hf_image_models": HF_IMAGE_MODELS,
         "examples": get_example_list()
     }
 
@@ -127,6 +133,7 @@ def refine_prompt(req: RefinementRequest):
 
 @app.post("/api/generate_image")
 def generate_image(req: ImageGenerationRequest):
+    print(f"DEBUG: Received Image Request: {req.dict()}")
     img, img_path, status_msg = generate_image_master(
         req.refined_prompt,
         req.technical_prompt,

design.md

@@ -1,80 +1,56 @@
 # RPGPortrait Design Document
 
 ## Project Overview
-RPGPortrait is a Gradio-based web application that helps users build detailed prompts and generate character portraits leveraging Gemini AI models.
+RPGPortrait is a decoupled, modern web application for tabletop RPG players to build detailed prompts and generate character portraits. It follows a **Next.js (Frontend)** and **FastAPI (Backend)** architecture, utilizing a premium "Obsidian & Ember" dark-aesthetic UI.
 
 ## UI Design
-The UI is built using `gradio.Blocks` to allow for a structured, multi-column layout.
+The interface is a responsive, single-page application (SPA) with a primary content area and a secondary configuration hub.
 
 ### Layout Structure
-- **Global Control**: Save/Load character (JSON), Randomize features, **Character Naming**.
-- **Input Sections**: Organized into columns/rows of dropdown menus.
-    - **Identity**: Race, Class (with **🎲 Auto-Name**), Gender, Age.
-    - **Appearance**: Hair Style/Color, Eye Color, Build, Skin Tone, Distinguishing Features.
-    - **Equipment**: Armor/Clothing, Weapons, Accessories (up to 2), Materials.
-    - **Environment**: Background, Lighting, Atmosphere.
-    - **Artistic Style**: Art Style, Mood, Special Effects (VFX).
-- **Generation Suite**:
-    - Large technical prompt textbox (read-only).
-    - **🧠 Refine with Gemini**: Calls Gemini 3 Pro to create a vivid prompt.
-    - **🖼️ Generate Image**: Routes to selected backend (Gemini or ComfyUI).
-- **Backend Selector**:
-    - Radio buttons to toggle between **Gemini (Cloud)** and **ComfyUI (Local)**.
-- **Output Area**:
-    - Image display for the portrait.
-    - 📥 Download button (PNG) for the generated image.
+- **Navigation Tabs**:
+    - **Identity**: Core character traits (Race, Class, Gender, Age).
+    - **Appearance**: Visual details (Hair, Eyes, Build, Distinguishing Features).
+    - **Equipment**: Gear and artifacts (Armor, Weapons, Accessories).
+    - **Environment**: Scene settings (Background, Lighting, Mood).
+    - **Render Style**: Artistic direction (Art Style, VFX, Aspect Ratio).
+    - **Configuration**: System management (AI Engines, API Tokens, Local Models).
+- **Portrait Studio (Center)**:
+    - **Full-Resolution Masterpiece**: Interactive image display with lightbox.
+    - **Refinement Suite**: Narrative enhancement and renaming features.
+    - **Action Bar**: Synthesize and Randomize controls.
+- **State Management (Sidebar)**:
+    - **Save/Load**: JSON-based state export/import.
+    - **Prompt Preview**: Real-time technical prompt construction.
 
 ## Prompt Assembly Logic
-The app uses a 3-stage prompt pipeline:
-1. **Technical Segmenting**: Combines dropdown values and extra info text into a base technical prompt using a YAML-based template.
-2. **AI Refinement**: The technical prompt is sent to an LLM to "art-ify" the description. The system instructions for this are stored in `prompts.yaml`.
-    - **Cloud**: Uses `gemini-3-pro-preview`.
-    - **Local**: Uses Ollama (e.g., `llama3`).
+The system uses a modular 3-stage pipeline:
+1. **Technical Segmenting**: Assembles dropdown values into a base prompt using `features.yaml`.
+2. **AI Refinement**: Transmutes technical tokens into vivid descriptions using LLMs (Gemini, Ollama, or HF). Instructions are stored in `prompts.yaml`.
 3. **Image Synthesis**:
-    - **Cloud**: Sent to `imagen-4.0-generate-001`.
-    - **Local**: Sent to a ComfyUI endpoint via `POST /prompt`, utilizing a custom workflow (`comfy_rpg_char_gen.json`).
+    - **Cloud**: Google Gemini (Imagen) or Hugging Face (Direct API/Router).
+    - **Local**: ComfyUI via WebSocket/REST with dynamic workflow injection.
 
-## Naming & Metadata
-- **Local Naming**: Uses a procedural generator based on the `fictional-names` library for instant, thematic results.
-- **Metadata Embedding**: Generation prompts and character names are embedded directly into the PNG `tEXt` chunks (Comment and CharacterName keys).
-- **Filenames**: Character names are sanitized and used for both JSON and PNG output.
-
-## Data & Persistence
-- **YAML Configuration**: `features.yaml` stores all possible dropdown values, their descriptive labels, and the final prompt template.
-- **JSON Serialization**: "Save/Load" functionality allows users to export and import their full character state as a JSON file.
+## Persistence & State
+- **Milk and Cookies**: All UI selections and engine configurations are persisted in `localStorage`.
+- **Metadata**: Generated images embed the full character prompt and name in PNG metadata (`tEXt` chunks).
 
 ## Technical Stack
-- **Backend**: Python 3
-- **SDK**: `google-genai`
-- **UI Framework**: Gradio
-- **AI Models**:
-    - **Text (Cloud)**: `gemini-3-pro-preview`
-    - **Text (Local)**: Ollama
-- **Image Cloud**: `imagen-4.0-generate-001`
-- **Image Local**: ComfyUI (Local Server)
-- **Configuration**: 
-    - `.env` for API keys and connection hosts/ports (ComfyUI, Ollama).
-## Maintenance & Development Lessons
-
-### 1. Server Lifecycle
-- **Mandatory Restarts**: Any modification to the `modules/` folder or configuration files (`features.yaml`, `prompts.yaml`) requires a manual restart of the Gradio server.
-- **Process Management (CRITICAL)**: Always ensure the previously running process is fully terminated before starting a new one. 
-- **Safe Command**: Use this PowerShell command to only kill the process using the target port (7860):
-  ```powershell
-  Stop-Process -Id (Get-NetTCPConnection -LocalPort 7860 -ErrorAction SilentlyContinue).OwningProcess -Force -ErrorAction SilentlyContinue
-  ```
-
-### 2. Project Architecture (Modular)
-- **`app.py`**: Entry point that launches the Gradio `demo`.
-- **`modules/config.py`**: Global constants and environment variables.
-- **`modules/integrations.py`**: Wrappers for AI backends (Gemini, Ollama, ComfyUI).
-- **`modules/core_logic.py`**: Character state management and prompt assembly.
-- **`modules/ui_layout.py`**: The full Gradio UI definition (`build_ui`).
-- **`modules/name_generator.py`**: Local procedural name generator using the `fictional-names` library.
-- **`comfy/`**: Dedicated folder for ComfyUI-specific JSON workflows and utility scripts.
-
-### 3. Deployment (Hugging Face Spaces)
-- **Containerization**: The app is containerized using the provided `Dockerfile` and `.dockerignore`.
-- **User Permissions**: The Dockerfile uses `useradd -m -u 1000 user` to comply with Hugging Face's security requirements for non-root users.
-- **Port Mapping**: Hugging Face Spaces expects the app on port 7860. The `GRADIO_SERVER_NAME="0.0.0.0"` and `GRADIO_SERVER_PORT=7860` environment variables ensure the app is bound correctly for external routing.
-- **Local Testing**: Run `docker-compose up --build` to verify the deployment state locally.
+- **Frontend**: Next.js 15, Tailwind CSS v4 (Glassmorphism), Lucide Icons.
+- **Backend**: FastAPI (Python 3.11+), Uvicorn.
+- **AI Backend**:
+    - **Gemini**: `google-genai` SDK.
+    - **Ollama**: Local REST API exploration.
+    - **Hugging Face**: `huggingface_hub` and direct Router requests.
+    - **ComfyUI**: WebSocket bridge for status and history tracking.
+
+## Project Architecture
+- **`api.py`**: FastAPI server hosting the REST API and serving the static frontend in production.
+- **`frontend/src/`**: Next.js source code, components, and Tailwind styles.
+- **`modules/`**: Shared backend logic for integrations, prompt assembly, and config.
+- **`features.yaml` / `prompts.yaml`**: Externalized data and instruction layers.
+
+## Maintenance & Development
+- **Dev Servers**: 
+    - Frontend: `npm run dev` (Port 3000)
+    - Backend: `python api.py` (Port 8000)
+- **Deployment**: Configured for Hugging Face Spaces via Docker. Static export mode is used for high-performance delivery.

frontend/dev.log

@@ -0,0 +1,2173 @@
+
+> frontend@0.1.0 dev
+> next dev
+
+Γû▓ Next.js 16.2.1 (Turbopack)
+- Local:         http://localhost:3000
+- Network:       http://192.168.10.118:3000
+Γ£ô Ready in 254ms
+
+ HEAD / 200 in 184ms (next.js: 109ms, application-code: 76ms)
+ GET / 200 in 21ms (next.js: 2ms, application-code: 19ms)
+ GET / 200 in 26ms (next.js: 3ms, application-code: 23ms)
+ΓÜá Blocked cross-origin request to Next.js dev resource /_next/webpack-hmr from "127.0.0.1".
+Cross-origin access to Next.js dev resources is blocked by default for safety.
+
+To allow this host in development, add it to "allowedDevOrigins" in next.config.js and restart the dev server:
+
+// next.config.js
+module.exports = {
+  allowedDevOrigins: ['127.0.0.1'],
+}
+
+Read more: https://nextjs.org/docs/app/api-reference/config/next-config-js/allowedDevOrigins
+ GET / 200 in 28ms (next.js: 2ms, application-code: 25ms)
+ GET / 200 in 22ms (next.js: 1867┬╡s, application-code: 20ms)
+ GET / 200 in 25ms (next.js: 2ms, application-code: 23ms)
+ GET / 200 in 24ms (next.js: 1998┬╡s, application-code: 22ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505165"
+                        >
+                  ...
+ 
+ GET / 200 in 27ms (next.js: 3ms, application-code: 25ms)
+ GET / 200 in 28ms (next.js: 2ms, application-code: 26ms)
+ GET / 200 in 20ms (next.js: 2ms, application-code: 17ms)
+ GET / 200 in 24ms (next.js: 2ms, application-code: 22ms)
+ GET / 200 in 23ms (next.js: 1755┬╡s, application-code: 21ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505165"
+                        >
+                  ...
+ 
+ GET / 200 in 23ms (next.js: 3ms, application-code: 20ms)
+ GET / 200 in 21ms (next.js: 2ms, application-code: 18ms)
+Γ£ô Compiled in 42ms
+ GET / 200 in 114ms (next.js: 54ms, application-code: 60ms)
+Γ£ô Compiled in 20ms
+ΓÜá Found a change in next.config.ts. Restarting the server to apply the changes...
+Γû▓ Next.js 16.2.1 (Turbopack)
+- Local:         http://localhost:3000
+- Network:       http://192.168.10.118:3000
+Γ£ô Ready in 349ms
+
+ GET / 200 in 268ms (next.js: 181ms, application-code: 87ms)
+Γ£ô Compiled in 64ms
+ GET / 200 in 61ms (next.js: 37ms, application-code: 25ms)
+ GET / 200 in 24ms (next.js: 3ms, application-code: 21ms)
+Γ£ô Compiled in 39ms
+ GET / 200 in 52ms (next.js: 35ms, application-code: 17ms)
+ GET / 200 in 21ms (next.js: 2ms, application-code: 19ms)
+[browser] Failed to load config TypeError: NetworkError when attempting to fetch resource.
+Γ£ô Compiled in 44ms
+ GET / 200 in 44ms (next.js: 28ms, application-code: 16ms)
+ GET / 200 in 20ms (next.js: 2ms, application-code: 18ms)
+ GET / 200 in 42ms (next.js: 2ms, application-code: 40ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505257"
+                        >
+                          <body
+-                           className="antigravity-scroll-lock"
+                          >
+                  ...
+ 
+[browser] Failed to load config TypeError: Failed to fetch
+    at ClientApp.useEffect (src/components/ClientApp.tsx:78:5)
+  76 |
+  77 |   useEffect(() => {
+> 78 |     fetch(`${API_URL}/api/config`)
+     |     ^
+  79 |       .then(res => res.json())
+  80 |       .then(data => {
+  81 |         setConfig(data); (src/components/ClientApp.tsx:100:29)
+ GET / 200 in 27ms (next.js: 3ms, application-code: 24ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505257"
+                        >
+                  ...
+ 
+[browser] Failed to load config TypeError: Failed to fetch
+    at ClientApp.useEffect (src/components/ClientApp.tsx:78:5)
+  76 |
+  77 |   useEffect(() => {
+> 78 |     fetch(`${API_URL}/api/config`)
+     |     ^
+  79 |       .then(res => res.json())
+  80 |       .then(data => {
+  81 |         setConfig(data); (src/components/ClientApp.tsx:100:29)
+ GET /api/config 404 in 301ms (next.js: 272ms, application-code: 29ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/api/config" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505257"
+                        >
+                  ...
+ 
+ GET / 200 in 26ms (next.js: 3ms, application-code: 23ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505257"
+                        >
+                  ...
+ 
+[browser] Failed to load config TypeError: Failed to fetch
+    at ClientApp.useEffect (src/components/ClientApp.tsx:78:5)
+  76 |
+  77 |   useEffect(() => {
+> 78 |     fetch(`${API_URL}/api/config`)
+     |     ^
+  79 |       .then(res => res.json())
+  80 |       .then(data => {
+  81 |         setConfig(data); (src/components/ClientApp.tsx:100:29)
+ GET / 200 in 34ms (next.js: 3ms, application-code: 31ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505257"
+                        >
+                  ...
+ 
+ GET / 200 in 26ms (next.js: 3ms, application-code: 23ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505257"
+                        >
+                  ...
+ 
+ GET / 200 in 21ms (next.js: 2ms, application-code: 19ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505257"
+                        >
+                  ...
+ 
+ GET / 200 in 24ms (next.js: 1710┬╡s, application-code: 23ms)
+Γ£ô Compiled in 40ms
+ GET / 200 in 118ms (next.js: 56ms, application-code: 62ms)
+ GET / 200 in 37ms (next.js: 3ms, application-code: 35ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505259"
+                        >
+                  ...
+ 
+Γ£ô Compiled in 46ms
+Γ¿» ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx
+
+
+Γ¿» ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx
+
+
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+ GET / 500 in 290ms (next.js: 153ms, application-code: 137ms)
+ GET / 500 in 292ms (next.js: 280ms, application-code: 12ms)
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+Γ¿» ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx
+
+
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+Γ¿» ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx
+
+
+ GET / 500 in 20ms (next.js: 9ms, application-code: 11ms)
+Γ¿» ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx
+
+
+ GET / 500 in 25ms (next.js: 16ms, application-code: 10ms)
+Γ¿» ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx
+
+
+ GET / 500 in 35ms (next.js: 18ms, application-code: 17ms)
+ GET / 500 in 26ms (next.js: 16ms, application-code: 9ms)
+Γ¿» ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx
+
+
+Γ¿» ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx
+
+
+ GET / 500 in 25ms (next.js: 13ms, application-code: 12ms)
+ GET / 500 in 42ms (next.js: 22ms, application-code: 20ms)
+[browser] Uncaught Error: ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx
+
+
+    at <unknown> (Error: ./src/components/ClientApp.tsx:496:20)
+    at <unknown> (Error: (./src/components/ClientApp.tsx:496:20)
+[browser] Uncaught Error: ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx
+
+
+    at <unknown> (Error: ./src/components/ClientApp.tsx:496:20)
+    at <unknown> (Error: (./src/components/ClientApp.tsx:496:20)
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] Uncaught Error: ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx
+
+
+    at <unknown> (Error: ./src/components/ClientApp.tsx:496:20)
+    at <unknown> (Error: (./src/components/ClientApp.tsx:496:20)
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+[browser] ./src/components/ClientApp.tsx:496:20
+Unterminated regexp literal
+  494 |                     </div>
+  495 |                     </div>
+> 496 |                   </div>
+      |                    ^^^^^
+  497 |                 )}
+  498 |                 {activeTab === 'identity' && (
+  499 |                   <div className="w-full">
+
+Parsing ecmascript source code failed
+
+Import trace:
+  Server Component:
+    ./src/components/ClientApp.tsx
+    ./src/app/page.tsx 
+ GET / 200 in 317ms (next.js: 78ms, application-code: 239ms)
+ GET / 200 in 197ms (next.js: 6ms, application-code: 191ms)
+ GET / 200 in 97ms (next.js: 16ms, application-code: 81ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505257"
+                        >
+                  ...
+ 
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505259"
+                        >
+                  ...
+ 
+Γ£ô Compiled in 25ms
+[browser] The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.
+
+Previous: [Ollama (Local), Hugging Face (Cloud), hf.co/BeaverAI/Anubis-Mini-8B-v1h-GGUF:Q8_0, Qwen/Qwen2.5-72B-Instruct, auto, black-forest-labs/FLUX.1-dev, auto, ]
+Incoming: [Ollama (Local), Hugging Face (Cloud), hf.co/BeaverAI/Anubis-Mini-8B-v1h-GGUF:Q8_0, Qwen/Qwen2.5-72B-Instruct, auto, black-forest-labs/FLUX.1-dev, auto] 
+    at ClientApp (src/components/ClientApp.tsx:61:12)
+  59 |
+  60 |   // Persist Settings to LocalStorage
+> 61 |   useEffect(() => {
+     |            ^
+  62 |     const settings = {
+  63 |       refinementBackend,
+  64 |       imageBackend, (src/components/ClientApp.tsx:61:12)
+[browser] The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.
+
+Previous: [Ollama (Local), Hugging Face (Cloud), , Qwen/Qwen2.5-72B-Instruct, auto, black-forest-labs/FLUX.1-dev, auto, ]
+Incoming: [Ollama (Local), Hugging Face (Cloud), , Qwen/Qwen2.5-72B-Instruct, auto, black-forest-labs/FLUX.1-dev, auto] 
+    at ClientApp (src/components/ClientApp.tsx:61:12)
+    at Set.forEach (<anonymous>)
+  59 |
+  60 |   // Persist Settings to LocalStorage
+> 61 |   useEffect(() => {
+     |            ^
+  62 |     const settings = {
+  63 |       refinementBackend,
+  64 |       imageBackend, (src/components/ClientApp.tsx:61:12)
+[browser] The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.
+
+Previous: [Gemini (Cloud), Hugging Face (Cloud), , Qwen/Qwen2.5-72B-Instruct, auto, black-forest-labs/FLUX.1-dev, auto, ]
+Incoming: [Gemini (Cloud), Hugging Face (Cloud), , Qwen/Qwen2.5-72B-Instruct, auto, black-forest-labs/FLUX.1-dev, auto] 
+    at ClientApp (src/components/ClientApp.tsx:61:12)
+    at Set.forEach (<anonymous>)
+  59 |
+  60 |   // Persist Settings to LocalStorage
+> 61 |   useEffect(() => {
+     |            ^
+  62 |     const settings = {
+  63 |       refinementBackend,
+  64 |       imageBackend, (src/components/ClientApp.tsx:61:12)
+ GET / 200 in 142ms (next.js: 68ms, application-code: 73ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505259"
+                        >
+                  ...
+ 
+ GET / 200 in 24ms (next.js: 3ms, application-code: 21ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505259"
+                        >
+                  ...
+ 
+ GET / 200 in 20ms (next.js: 1850┬╡s, application-code: 18ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505259"
+                        >
+                  ...
+ 
+ GET / 200 in 18ms (next.js: 2ms, application-code: 16ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505259"
+                        >
+                  ...
+ 
+ GET / 200 in 28ms (next.js: 3ms, application-code: 26ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505259"
+                        >
+                  ...
+ 
+Γ£ô Compiled in 33ms
+Γ£ô Compiled in 38ms
+ GET / 200 in 120ms (next.js: 63ms, application-code: 58ms)
+[browser] A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+- A server/client branch `if (typeof window !== 'undefined')`.
+- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
+- Date formatting in a user's locale which doesn't match the server.
+- External changing data without sending a snapshot of it along with the HTML.
+- Invalid HTML tag nesting.
+
+It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+https://react.dev/link/hydration-mismatch
+
+  ...
+    <HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
+      <AppDevOverlayErrorBoundary globalError={[...]}>
+        <ReplaySsrOnlyErrors>
+        <DevRootHTTPAccessFallbackBoundary>
+          <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
+            <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
+              <RedirectBoundary>
+                <RedirectErrorBoundary router={{...}}>
+                  <Head>
+                  <__next_root_layout_boundary__>
+                    <SegmentViewNode type="layout" pagePath="layout.tsx">
+                      <SegmentTrieNode>
+                      <link>
+                      <script>
+                      <script>
+                      <RootLayout>
+                        <html
+                          lang="en"
+-                         data-jetski-tab-id="11505263"
+                        >
+                  ...
+ 
+ GET / 200 in 25ms (next.js: 2ms, application-code: 23ms)

frontend/src/components/ClientApp.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 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';
+import { User, Sparkles, Sword, Globe, Palette, Settings, Image as ImageIcon, Wand2, Dices, Save, Download, Upload, Copy, X } from 'lucide-react';
 
 const API_URL = process.env.NODE_ENV === "development" ? "http://127.0.0.1:8000" : "";
 
@@ -10,12 +10,14 @@ const tabs = [
   { id: 'appearance', label: 'Physical Traits', icon: Sparkles },
   { id: 'equipment', label: 'Gear & Weapons', icon: Sword },
   { id: 'environment', label: 'Atmosphere', icon: Globe },
-  { id: 'style', label: 'Render Style', icon: Palette }
+  { id: 'style', label: 'Render Style', icon: Palette },
+  { id: 'engines', label: 'Configuration', icon: Settings }
 ];
 
 export default function ClientApp() {
   const [config, setConfig] = useState<any>(null);
   const [activeTab, setActiveTab] = useState('identity');
+  const [showLightbox, setShowLightbox] = useState(false);
   
   const [characterName, setCharacterName] = useState("Unnamed Hero");
   const [features, setFeatures] = useState<string[]>([]);
@@ -34,7 +36,43 @@ export default function ClientApp() {
   const [hfImageModel, setHfImageModel] = useState("black-forest-labs/FLUX.1-dev");
   const [hfImageProvider, setHfImageProvider] = useState("auto");
   const [manualToken, setManualToken] = useState("");
+  const [manualTextEntry, setManualTextEntry] = useState(false);
+  const [manualImageEntry, setManualImageEntry] = useState(false);
   
+  // Restore Settings from LocalStorage
+  useEffect(() => {
+    const saved = localStorage.getItem('rpg_portrait_settings');
+    if (saved) {
+      try {
+        const data = JSON.parse(saved);
+        if (data.refinementBackend) setRefinementBackend(data.refinementBackend);
+        if (data.imageBackend) setImageBackend(data.imageBackend);
+        if (data.ollamaModel) setOllamaModel(data.ollamaModel);
+        if (data.hfTextModel) setHfTextModel(data.hfTextModel);
+        if (data.hfTextProvider) setHfTextProvider(data.hfTextProvider);
+        if (data.hfImageModel) setHfImageModel(data.hfImageModel);
+        if (data.hfImageProvider) setHfImageProvider(data.hfImageProvider);
+        if (data.manualToken) setManualToken(data.manualToken);
+      } catch (e) {
+        console.error("Failed to restore settings", e);
+      }
+    }
+  }, []);
+
+  // Persist Settings to LocalStorage
+  useEffect(() => {
+    const settings = {
+      refinementBackend,
+      imageBackend,
+      ollamaModel,
+      hfTextModel,
+      hfTextProvider,
+      hfImageModel,
+      hfImageProvider
+    };
+    localStorage.setItem('rpg_portrait_settings', JSON.stringify(settings));
+  }, [refinementBackend, imageBackend, ollamaModel, hfTextModel, hfTextProvider, hfImageModel, hfImageProvider]);
+
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -207,7 +245,7 @@ export default function ClientApp() {
       const res = await fetch(`${API_URL}/api/refine_prompt`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ prompt: promptOutput, backend: refinementBackend, ollama_model: ollamaModel, hf_text_model: hfTextModel, hf_text_provider: hfTextProvider, manual_token: manualToken, character_name: characterName })
+        body: JSON.stringify({ prompt: promptOutput, backend: refinementBackend, ollama_model: ollamaModel, hf_text_model: hfTextModel, hf_text_provider: hfTextProvider, manual_token: "", character_name: characterName })
       });
       if (res.ok) {
         const data = await res.json();
@@ -230,7 +268,7 @@ export default function ClientApp() {
       const res = await fetch(`${API_URL}/api/generate_image`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ refined_prompt: refinedOutput, technical_prompt: promptOutput, aspect_ratio: ar, backend: imageBackend, hf_image_model: hfImageModel, hf_image_provider: hfImageProvider, manual_token: manualToken, character_name: characterName })
+        body: JSON.stringify({ refined_prompt: refinedOutput, technical_prompt: promptOutput, aspect_ratio: ar, backend: imageBackend, hf_image_model: hfImageModel, hf_image_provider: hfImageProvider, manual_token: "", character_name: characterName })
       });
       
       if (res.ok) {
@@ -361,84 +399,13 @@ export default function ClientApp() {
              <span className="text-sm tracking-wide font-medium">Reroll Marked Traits</span>
           </button>
         </nav>
-        
-        {/* Backend Quick Config at Bottom */}
-        <div className="p-6 border-t border-[#2D241A] bg-[#080604]">
-            <div className="flex items-center gap-2 mb-4 text-[#A89880]">
-               <Settings size={16} />
-               <span className="text-xs uppercase tracking-wider font-semibold">Active Engines</span>
-            </div>
-            <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>
 
-      {/* 2. Main Middle Area (Form Aspects) */}
+        {/* 2. Main Middle Area (Form Aspects) */}
       <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-4 pb-24 pt-2">
+        <div className="max-w-4xl mx-auto w-full px-6 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)]" />
@@ -454,6 +421,132 @@ export default function ClientApp() {
               <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 === 'engines' && (
+                  <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                      <div className="bg-[#0a0805]/80 border border-[#2D241A] rounded-xl p-6 shadow-2xl backdrop-blur-sm">
+                         <div className="flex items-center gap-3 mb-6">
+                           <div className="p-2 bg-[#DAB062]/10 rounded-lg">
+                             <Sparkles className="text-[#DAB062]" size={20} />
+                           </div>
+                           <h3 className="font-cinzel text-xl text-[#E2D1B3]">Text Intelligence</h3>
+                         </div>
+                         <div className="space-y-5">
+                            <div>
+                              <label className="text-[10px] block uppercase tracking-widest text-[#A89880] mb-2">Backbone Engine</label>
+                              <select value={refinementBackend} onChange={e => setRefinementBackend(e.target.value)} className="input-alchemist w-full font-cinzel">
+                                <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>
+                            {refinementBackend === "Ollama (Local)" && (
+                              <div className="animate-in fade-in slide-in-from-top-2">
+                                <label className="text-[10px] block uppercase tracking-widest text-[#A89880] mb-2">Local Model Identifier</label>
+                                <select value={ollamaModel} onChange={e => setOllamaModel(e.target.value)} className="input-alchemist w-full">
+                                  <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 className="animate-in fade-in slide-in-from-top-2">
+                                <div className="flex items-center justify-between mb-2">
+                                  <label className="text-[10px] block uppercase tracking-widest text-[#A89880]">Refinement Model</label>
+                                  <button onClick={() => setManualTextEntry(!manualTextEntry)} className="text-[10px] uppercase text-[#DAB062] hover:underline transition-all">
+                                    {manualTextEntry ? "Standard List" : "Manual Entry"}
+                                  </button>
+                                </div>
+                                {manualTextEntry ? (
+                                  <input 
+                                    type="text" 
+                                    value={hfTextModel} 
+                                    onChange={e => setHfTextModel(e.target.value)} 
+                                    className="input-alchemist w-full" 
+                                    placeholder="Enter model ID..." 
+                                  />
+                                ) : (
+                                  <select 
+                                    value={hfTextModel} 
+                                    onChange={e => setHfTextModel(e.target.value)} 
+                                    className="input-alchemist w-full"
+                                  >
+                                    {config?.hf_text_models?.map((m: string) => (
+                                      <option key={m} value={m}>{m}</option>
+                                    ))}
+                                    {config?.hf_text_models && !config.hf_text_models.includes(hfTextModel) && (
+                                      <option value={hfTextModel}>{hfTextModel}</option>
+                                    )}
+                                  </select>
+                                )}
+                              </div>
+                            )}
+                         </div>
+                      </div>
+                      <div className="bg-[#0a0805]/80 border border-[#2D241A] rounded-xl p-6 shadow-2xl backdrop-blur-sm">
+                         <div className="flex items-center gap-3 mb-6">
+                           <div className="p-2 bg-[#DAB062]/10 rounded-lg">
+                             <ImageIcon className="text-[#DAB062]" size={20} />
+                           </div>
+                           <h3 className="font-cinzel text-xl text-[#E2D1B3]">Visual Synthesis</h3>
+                         </div>
+                         <div className="space-y-5">
+                            <div>
+                              <label className="text-[10px] block uppercase tracking-widest text-[#A89880] mb-2">Generation Core</label>
+                              <select value={imageBackend} onChange={e => setImageBackend(e.target.value)} className="input-alchemist w-full font-cinzel">
+                                <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>
+                            {imageBackend === "Hugging Face (Cloud)" && (
+                              <div className="space-y-4 animate-in fade-in slide-in-from-top-2">
+                                <div>
+                                  <div className="flex items-center justify-between mb-2">
+                                    <label className="text-[10px] block uppercase tracking-widest text-[#A89880]">Diffusion Model</label>
+                                    <button onClick={() => setManualImageEntry(!manualImageEntry)} className="text-[10px] uppercase text-[#DAB062] hover:underline transition-all">
+                                      {manualImageEntry ? "Standard List" : "Manual Entry"}
+                                    </button>
+                                  </div>
+                                  {manualImageEntry ? (
+                                    <input 
+                                      type="text" 
+                                      value={hfImageModel} 
+                                      onChange={e => setHfImageModel(e.target.value)} 
+                                      className="input-alchemist w-full" 
+                                      placeholder="Enter model ID..." 
+                                    />
+                                  ) : (
+                                    <select 
+                                      value={hfImageModel} 
+                                      onChange={e => setHfImageModel(e.target.value)} 
+                                      className="input-alchemist w-full"
+                                    >
+                                      {config?.hf_image_models?.map((m: string) => (
+                                        <option key={m} value={m}>{m}</option>
+                                      ))}
+                                      {config?.hf_image_models && !config.hf_image_models.includes(hfImageModel) && (
+                                        <option value={hfImageModel}>{hfImageModel}</option>
+                                      )}
+                                    </select>
+                                  )}
+                                </div>
+                                <div>
+                                  <label className="text-[10px] block uppercase tracking-widest text-[#A89880] mb-2">Inference Gateway</label>
+                                  <select value={hfImageProvider} onChange={e => setHfImageProvider(e.target.value)} className="input-alchemist w-full">
+                                    <option value="auto">Auto-Managed</option>
+                                    <option value="fal-ai">Fal-AI (Fast)</option>
+                                    <option value="replicate">Replicate</option>
+                                    <option value="hf-inference">Direct HF API</option>
+                                  </select>
+                                </div>
+                              </div>
+                            )}
+                         </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
                 {activeTab === 'identity' && (
                   <div className="w-full">
                      <div className="mb-6 p-5 bg-[#0a0805] border border-[#2D241A] rounded-xl shadow-inner relative group">
@@ -558,22 +651,37 @@ export default function ClientApp() {
         <div className="h-[45%] p-6 border-b border-[#2D241A] relative flex items-center justify-center overflow-hidden">
            <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/dark-matter.png')] opacity-10 pointer-events-none"></div>
            
-           {imageSrc ? (
-             <div className="relative w-full h-full flex items-center justify-center rounded-lg overflow-hidden group">
-               <div className="absolute inset-0 border border-[#DAB062] opacity-30 pointer-events-none z-10 rounded-lg"></div>
-               <img src={imageSrc} alt="Portrait" className="max-w-full max-h-full object-contain drop-shadow-[0_0_20px_rgba(218,176,98,0.2)] transition-transform duration-700 ease-in-out group-hover:scale-[1.02]" />
-               
-               {/* Context menu mock overlay */}
-               <div className="absolute top-3 right-3 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                  <button onClick={handleDownloadImage} title="Download Portrait" className="bg-black/60 backdrop-blur-md text-[#E2D1B3] p-2 rounded-md hover:text-[#DAB062] hover:bg-black/80 border border-[#2D241A] transition-all"><Download size={18}/></button>
-               </div>
-             </div>
-           ) : (
-             <div className="flex flex-col items-center justify-center text-center opacity-40">
-                <ImageIcon size={56} className="text-[#A89880] mb-4 stroke-1" />
-                <p className="font-cinzel text-[#A89880] tracking-widest text-sm">Visual Synthesis Pending</p>
-             </div>
-           )}
+            {imageSrc ? (
+              <div className="relative w-full h-full flex items-center justify-center rounded-lg overflow-hidden group cursor-zoom-in" onClick={() => setShowLightbox(true)}>
+                <div className="absolute inset-0 border border-[#DAB062] opacity-30 pointer-events-none z-10 rounded-lg group-hover:opacity-60 transition-opacity"></div>
+                <img src={imageSrc || ""} alt="Portrait" className="max-w-full max-h-full object-contain drop-shadow-[0_0_20px_rgba(218,176,98,0.2)] transition-transform duration-700 ease-in-out group-hover:scale-[1.02]" />
+                
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors pointer-events-none flex items-center justify-center">
+                   <div className="opacity-0 group-hover:opacity-100 transition-opacity bg-[#0a0805]/80 backdrop-blur-md border border-[#DAB062]/40 p-3 rounded-full text-[#DAB062] shadow-xl">
+                      <ImageIcon size={24} />
+                   </div>
+                </div>
+                
+                <div className="absolute bottom-3 right-3 flex items-center gap-2">
+                   <button onClick={(e) => { e.stopPropagation(); handleDownloadImage(); }} title="Download Portrait" className="opacity-0 group-hover:opacity-100 bg-black/60 backdrop-blur-md text-[#E2D1B3] p-2 rounded-md hover:text-[#DAB062] hover:bg-black/80 border border-[#2D241A] transition-all"><Download size={18}/></button>
+                </div>
+              </div>
+            ) : statusMsg && (statusMsg.includes("Error") || statusMsg.includes("Failed")) ? (
+              <div className="flex flex-col items-center justify-center text-center px-8 animate-in fade-in zoom-in-95 duration-500">
+                 <div className="p-4 bg-red-950/20 border border-red-500/30 rounded-full mb-6 relative">
+                    <X size={48} className="text-red-500/60" />
+                    <div className="absolute inset-0 bg-red-500/10 blur-xl rounded-full"></div>
+                 </div>
+                 <h4 className="font-cinzel text-red-400 tracking-[0.3em] text-sm mb-3 font-bold uppercase drop-shadow-sm">Synthesis Chamber Fault</h4>
+                 <p className="text-red-300/60 text-xs italic font-medium leading-relaxed max-w-[280px]">"{statusMsg}"</p>
+                 <button onClick={() => setStatusMsg("")} className="mt-6 px-4 py-1.5 border border-red-900/50 rounded-full text-[10px] uppercase tracking-widest text-red-400/50 hover:bg-red-900/10 hover:text-red-400 transition-all">Clear Error</button>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center text-center opacity-40">
+                 <ImageIcon size={56} className="text-[#A89880] mb-4 stroke-1 line-through opacity-20" />
+                 <p className="font-cinzel text-[#A89880] tracking-widest text-sm italic">Visual Synthesis Pending</p>
+              </div>
+            )}
         </div>
 
         {/* Action Panel */}
@@ -611,7 +719,14 @@ export default function ClientApp() {
              <textarea readOnly value={promptOutput} className="h-40 bg-[#080604] border border-[#1A2E38] rounded-xl p-4 text-xs text-[#E2D1B3] resize-none custom-scrollbar shadow-inner outline-none leading-relaxed"></textarea>
            </div>
            
-           <div className="text-center text-[#DAB062] font-cinzel text-xs tracking-[0.2em] my-5 min-h-[20px]">{statusMsg}</div>
+           <div className={`text-center font-cinzel text-[10px] tracking-[0.2em] my-4 min-h-[20px] transition-all duration-300 ${statusMsg.toLowerCase().includes('error') || statusMsg.toLowerCase().includes('failed') ? 'text-red-400 font-bold animate-pulse' : 'text-[#DAB062] font-medium'}`}>
+               {statusMsg && (
+                 <span className="flex items-center justify-center gap-2">
+                   {statusMsg.toLowerCase().includes('error') || statusMsg.toLowerCase().includes('failed') ? <X size={12}/> : <Sparkles size={12}/>}
+                   {statusMsg}
+                 </span>
+               )}
+            </div>
 
            <button 
              onClick={handleGenerateImage} 
@@ -625,6 +740,32 @@ export default function ClientApp() {
 
         </div>
       </div>
+      {/* FULL SCREEN LIGHTBOX MODAL */}
+      {showLightbox && imageSrc && (
+        <div className="fixed inset-0 z-[100] bg-[#080604]/95 backdrop-blur-2xl flex items-center justify-center p-4 md:p-12 animate-in fade-in duration-300" onClick={() => setShowLightbox(false)}>
+            <div className="absolute top-8 right-8 z-[110]">
+               <button onClick={() => setShowLightbox(false)} className="text-[#A89880] hover:text-[#DAB062] transition-colors bg-black/40 p-3 rounded-full border border-[#2D241A] shadow-xl">
+                  <X size={24} />
+                  <span className="sr-only">Close</span>
+               </button>
+            </div>
+            
+            <div className="relative max-w-full max-h-full flex items-center justify-center animate-in zoom-in-95 duration-500" onClick={e => e.stopPropagation()}>
+               <div className="absolute inset-0 border border-[#DAB062]/20 rounded-xl pointer-events-none blur-sm"></div>
+               <img 
+                 src={imageSrc || ""} 
+                 alt="Portrait High Resolution" 
+                 className="max-w-full max-h-full rounded-xl shadow-[0_0_100px_rgba(218,176,98,0.15)] object-contain border border-[#2D241A]" 
+               />
+               
+               <div className="absolute bottom-[-60px] flex gap-4">
+                  <button onClick={handleDownloadImage} className="flex items-center gap-3 px-6 py-2.5 bg-[#DAB062] text-[#0a0805] rounded-full font-cinzel font-bold text-sm tracking-widest hover:bg-[#F2DAA4] transition-colors shadow-lg shadow-yellow-900/20">
+                     <Download size={18} /> Preserve Masterpiece
+                  </button>
+               </div>
+            </div>
+        </div>
+      )}
     </div>
   );
 }

modules/config.py

@@ -2,7 +2,7 @@ import os
 from dotenv import load_dotenv
 
 # Load environment variables
-load_dotenv()
+load_dotenv(override=True)
 
 # ComfyUI Settings
 COMFY_HOST = os.getenv("COMFY_HOST", "127.0.0.1")
@@ -28,6 +28,7 @@ HF_TEXT_MODELS = [
 
 HF_IMAGE_MODELS = [
     "black-forest-labs/FLUX.1-dev",
+    "stabilityai/stable-diffusion-xl-base-1.0",
     "Tongyi-MAI/Z-Image-Turbo",
     "Qwen/Qwen-Image-2512"
 ]

modules/integrations.py

@@ -30,18 +30,24 @@ if GEMINI_API_KEY:
         client = genai.Client(api_key=GEMINI_API_KEY)
         gemini_active = True
     except Exception as e:
-        print(f"Error initializing Gemini: {e}")
+        gemini_active = False
+else:
+    gemini_active = False
 
 # Setup Hugging Face Router
 hf_client = None
+hf_active = False
 if HF_TOKEN:
     try:
         hf_client = OpenAI(
             base_url=HF_BASE_URL,
             api_key=HF_TOKEN,
         )
+        hf_active = True
     except Exception as e:
-        print(f"Error initializing HF Client: {e}")
+        hf_active = False
+else:
+    hf_active = False
 
 def load_system_prompt(key="refinement"):
     """Loads a system prompt from prompts.yaml."""
@@ -328,9 +334,14 @@ def generate_image_with_hf(prompt, aspect_ratio, model_id=None, provider=None, t
     
     try:
         client = InferenceClient(api_key=active_token, provider=active_provider)
-        img = client.text_to_image(prompt, model=active_model, width=width, height=height)
-        
-        # Embed metadata
+        # Use InferenceClient's built-in text_to_image which is more robust
+        # width/height are supported by some providers (like fal-ai, replicate)
+        img = client.text_to_image(
+            prompt,
+            model=active_model,
+            width=width,
+            height=height
+        )
         metadata = PngInfo()
         metadata.add_text("Comment", prompt)
         metadata.add_text("CharacterName", character_name)