Merge branch 'logging'

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add structured logging for job queue and workflow prompts
2026-03-05 23:02:41 +00:00 · 2026-03-05 22:55:53 +00:00 · 2026-03-05 22:48:28 +00:00 · 2026-03-05 16:46:36 +00:00 · 2026-03-04 21:43:40 +00:00 · 2026-03-03 02:33:04 +00:00
33 changed files with 2477 additions and 4035 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,8 @@
+venv/
+__pycache__/
+*.pyc
+instance/
+flask_session/
+static/uploads/
+tools/
+.git/
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -96,6 +96,30 @@ Cross-deduplicates tags between the positive and negative prompt strings. For ea

 Called as the last step of `_prepare_workflow`, after `_apply_checkpoint_settings` has added `base_positive`/`base_negative`, so it operates on fully-assembled prompts.

+### `_IDENTITY_KEYS` / `_WARDROBE_KEYS` (module-level constants)
+Lists of canonical field names for the `identity` and `wardrobe` sections. Used by `_ensure_character_fields()` to avoid hard-coding key lists in every route.
+
+### `_resolve_character(character_slug)`
+Returns a `Character` ORM object for a given slug string. Handles the `"__random__"` sentinel by selecting a random character. Returns `None` if `character_slug` is falsy or no match is found. Every route that accepts an optional character dropdown (outfit, action, style, scene, detailer, checkpoint, look generate routes) uses this instead of an inline if/elif block.
+
+### `_ensure_character_fields(character, selected_fields, include_wardrobe=True, include_defaults=False)`
+Mutates `selected_fields` in place, appending any populated identity, wardrobe, and optional defaults keys that are not already present. Ensures `"special::name"` is always included. Called in every secondary-category generate route immediately after `_resolve_character()` to guarantee the character's essential fields are sent to `build_prompt`.
+
+### `_append_background(prompts, character=None)`
+Appends a `"<primary_color> simple background"` tag (or plain `"simple background"` if no primary color) to `prompts['main']`. Called in outfit, action, style, detailer, and checkpoint generate routes instead of repeating the same inline string construction.
+
+### `_make_finalize(category, slug, db_model_class=None, action=None)`
+Factory function that returns a `_finalize(comfy_prompt_id, job)` callback closure. The closure:
+1. Calls `get_history()` and `get_image()` to retrieve the generated image from ComfyUI.
+2. Saves the image to `static/uploads/<category>/<slug>/gen_<timestamp>.png`.
+3. Sets `job['result']` with `image_url` and `relative_path`.
+4. If `db_model_class` is provided **and** (`action` is `None` or `action == 'replace'`), updates the ORM object's `image_path` and commits.
+
+All `generate` routes pass a `_make_finalize(...)` call as the finalize argument to `_enqueue_job()` instead of defining an inline closure.
+
+### `_prune_job_history(max_age_seconds=3600)`
+Removes entries from `_job_history` that are in a terminal state (`done`, `failed`, `removed`) and older than `max_age_seconds`. Called at the end of every worker loop iteration to prevent unbounded memory growth.
+
 ### `_queue_generation(character, action, selected_fields, client_id)`
 Convenience wrapper for character detail page generation. Loads workflow, calls `build_prompt`, calls `_prepare_workflow`, calls `queue_prompt`.

@@ -225,8 +249,7 @@ Checkpoint JSONs are keyed by `checkpoint_path`. If no JSON exists for a discove
 ### Characters
 - `GET /` — character gallery (index)
 - `GET /character/<slug>` — character detail with generation UI
- `POST /character/<slug>/generate` — queue generation (AJAX or form)
- `POST /character/<slug>/finalize_generation/<prompt_id>` — retrieve image from ComfyUI
+- `POST /character/<slug>/generate` — queue generation (AJAX or form); returns `{"job_id": ...}`
 - `POST /character/<slug>/replace_cover_from_preview` — promote preview to cover
 - `GET/POST /character/<slug>/edit` — edit character data
 - `POST /character/<slug>/upload` — upload cover image
@@ -239,8 +262,7 @@ Checkpoint JSONs are keyed by `checkpoint_path`. If no JSON exists for a discove
 Each category follows the same URL pattern:
 - `GET /<category>/` — gallery
 - `GET /<category>/<slug>` — detail + generation UI
- `POST /<category>/<slug>/generate` — queue generation
- `POST /<category>/<slug>/finalize_generation/<prompt_id>` — retrieve image
+- `POST /<category>/<slug>/generate` — queue generation; returns `{"job_id": ...}`
 - `POST /<category>/<slug>/replace_cover_from_preview`
 - `GET/POST /<category>/<slug>/edit`
 - `POST /<category>/<slug>/upload`
@@ -254,15 +276,13 @@ Each category follows the same URL pattern:
 - `GET /looks` — gallery
 - `GET /look/<slug>` — detail
 - `GET/POST /look/<slug>/edit`
- `POST /look/<slug>/generate`
- `POST /look/<slug>/finalize_generation/<prompt_id>`
+- `POST /look/<slug>/generate` — queue generation; returns `{"job_id": ...}`
 - `POST /look/<slug>/replace_cover_from_preview`
 - `GET/POST /look/create`
 - `POST /looks/rescan`

 ### Generator (Mix & Match)
 - `GET/POST /generator` — freeform generator with multi-select accordion UI
- `POST /generator/finalize/<slug>/<prompt_id>` — retrieve image
 - `POST /generator/preview_prompt` — AJAX: preview composed prompt without generating

 ### Checkpoints
@@ -271,11 +291,16 @@ Each category follows the same URL pattern:
 - `POST /checkpoint/<slug>/save_json`
 - `POST /checkpoints/rescan`

+### Job Queue API
+All generation routes use the background job queue. Frontend polls:
+- `GET /api/queue/<job_id>/status` — returns `{"status": "pending"|"running"|"done"|"failed", "result": {...}}`
+
+Image retrieval is handled server-side by the `_make_finalize()` callback; there are no separate client-facing finalize routes.
+
 ### Utilities
 - `POST /set_default_checkpoint` — save default checkpoint to session
- `GET /check_status/<prompt_id>` — poll ComfyUI for completion
 - `GET /get_missing_{characters,outfits,actions,scenes}` — AJAX: list items without cover images
- `POST /generate_missing` — batch generate covers for characters
+- `POST /generate_missing` — batch generate covers for all characters missing one (uses job queue)
 - `POST /clear_all_covers` / `clear_all_{outfit,action,scene}_covers`
 - `GET /gallery` — global image gallery browsing `static/uploads/`
 - `GET/POST /settings` — LLM provider configuration
@@ -295,7 +320,7 @@ Each category follows the same URL pattern:
  - `initJsonEditor(saveUrl)` — shared JSON editor modal (simple form + raw textarea tabs)
 - Context processors inject `all_checkpoints`, `default_checkpoint_path`, and `COMFYUI_WS_URL` into every template.
 - **No `{% block head %}` exists** in layout.html — do not try to use it.
- Generation is async: JS submits the form via AJAX (`X-Requested-With: XMLHttpRequest`), receives a `prompt_id`, opens a WebSocket to ComfyUI to show progress, then calls the finalize endpoint to save the image.
+- Generation is async: JS submits the form via AJAX (`X-Requested-With: XMLHttpRequest`), receives a `{"job_id": ...}` response, then polls `/api/queue/<job_id>/status` every ~1.5 seconds until `status == "done"`. The server-side worker handles all ComfyUI polling and image saving via the `_make_finalize()` callback. There are no client-facing finalize HTTP routes.

 ---

@@ -374,6 +399,8 @@ The Flask filesystem session stores:

 ## Running the App

+### Directly (development)
+
 ```bash
 cd /mnt/alexander/Projects/character-browser
 source venv/bin/activate
@@ -384,6 +411,25 @@ The app runs in debug mode on port 5000 by default. ComfyUI must be running at `

 The DB is initialised and all sync functions are called inside `with app.app_context():` at the bottom of `app.py` before `app.run()`.

+### Docker
+
+```bash
+docker compose up -d
+```
+
+The compose file (`docker-compose.yml`) runs two services:
+- **`danbooru-mcp`** — built from `https://git.liveaodh.com/aodhan/danbooru-mcp.git`; the MCP tag-search container used by `call_llm()`.
+- **`app`** — the Flask app, exposed on host port **5782** → container port 5000.
+
+Key environment variables set by compose:
+- `COMFYUI_URL=http://10.0.0.200:8188` — points at ComfyUI on the Docker host network.
+- `SKIP_MCP_AUTOSTART=true` — disables the app's built-in danbooru-mcp launch logic (compose manages it).
+
+Volumes mounted into the app container:
+- `./data`, `./static/uploads`, `./instance`, `./flask_session` — persistent app data.
+- `/Volumes/ImageModels:/ImageModels:ro` — model files for checkpoint/LoRA scanning (**requires Docker Desktop file sharing enabled for `/Volumes/ImageModels`**).
+- `/var/run/docker.sock` — Docker socket so the app can exec danbooru-mcp tool containers.
+
 ---

 ## Common Pitfalls
@@ -396,3 +442,4 @@ The DB is initialised and all sync functions are called inside `with app.app_con
 - **AJAX detection**: `request.headers.get('X-Requested-With') == 'XMLHttpRequest'` determines whether to return JSON or redirect.
 - **Session must be marked modified for JSON responses**: After setting session values in AJAX-responding routes, set `session.modified = True`.
 - **Detailer `prompt` is a list**: The `prompt` field in detailer JSON is stored as a list of strings (e.g. `["detailed skin", "pores"]`), not a plain string. When merging into `tags` for `build_prompt`, use `extend` for lists and `append` for strings — never append the list object itself or `", ".join()` will fail on the nested list item.
+- **`_make_finalize` action semantics**: Pass `action=None` when the route should always update the DB cover (e.g. batch generate, checkpoint generate). Pass `action=request.form.get('action')` for routes that support both "preview" (no DB update) and "replace" (update DB). The factory skips the DB write when `action` is truthy and not `"replace"`.
--- a/29
+++ b/29
@@ -0,0 +1,29 @@
+FROM python:3.12-slim
+
+# Install system deps: git (for danbooru-mcp repo clone) + docker CLI
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    curl \
+    ca-certificates \
+    && install -m 0755 -d /etc/apt/keyrings \
+    && curl -fsSL https://download.docker.com/linux/debian/gpg -o /etc/apt/keyrings/docker.asc \
+    && chmod a+r /etc/apt/keyrings/docker.asc \
+    && echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/debian $(. /etc/os-release && echo "$VERSION_CODENAME") stable" \
+       > /etc/apt/sources.list.d/docker.list \
+    && apt-get update && apt-get install -y --no-install-recommends docker-ce-cli docker-compose-plugin \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Writable dirs that will typically be bind-mounted at runtime
+RUN mkdir -p static/uploads instance flask_session data/characters data/clothing \
+    data/actions data/styles data/scenes data/detailers data/checkpoints data/looks
+
+EXPOSE 5000
+
+CMD ["python", "app.py"]
--- a/README.md
+++ b/README.md
@@ -39,6 +39,20 @@ A local web-based GUI for managing character profiles (JSON) and generating cons

 ## Setup & Installation

+### Option A — Docker (recommended)
+
+1. **Clone the repository.**
+2. Edit `docker-compose.yml` if needed:
+   - Set `COMFYUI_URL` to your ComfyUI host/port.
+   - Adjust the `/Volumes/ImageModels` volume path to your model directory. If you're on Docker Desktop, add the path under **Settings → Resources → File Sharing** first.
+3. **Start services:**
+   ```bash
+   docker compose up -d
+   ```
+   The app will be available at `http://localhost:5782`.
+
+### Option B — Local (development)
+
 1. **Clone the repository** to your local machine.
 2. **Configure Paths**: Open `app.py` and update the following variables to match your system:
   ```python
--- a/app.py
+++ b/app.py
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,31 @@
+services:
+  danbooru-mcp:
+    build: https://git.liveaodh.com/aodhan/danbooru-mcp.git
+    image: danbooru-mcp:latest
+    stdin_open: true
+    restart: unless-stopped
+
+  app:
+    build: .
+    ports:
+      - "5782:5000"
+    environment:
+      # ComfyUI runs on the Docker host
+      COMFYUI_URL: http://10.0.0.200:8188     # Compose manages danbooru-mcp — skip the app's auto-start logic
+      SKIP_MCP_AUTOSTART: "true"
+    volumes:
+      # Persistent data
+      - ./data:/app/data
+      - ./static/uploads:/app/static/uploads
+      - ./instance:/app/instance
+      - ./flask_session:/app/flask_session
+      # Model files (read-only — used for checkpoint/LoRA scanning)
+      - /Volumes/ImageModels:/ImageModels:ro
+      # Docker socket so the app can run danbooru-mcp tool containers
+      - /var/run/docker.sock:/var/run/docker.sock
+    extra_hosts:
+      # Resolve host.docker.internal on Linux hosts
+      - "host.docker.internal:host-gateway"
+    depends_on:
+      - danbooru-mcp
+    restart: unless-stopped
--- a/migrate_actions.py
+++ b/migrate_actions.py
@@ -1,63 +0,0 @@
-import os
-import json
-from collections import OrderedDict
-
-ACTIONS_DIR = 'data/actions'
-
-def migrate_actions():
-    if not os.path.exists(ACTIONS_DIR):
-        print(f"Directory {ACTIONS_DIR} not found.")
-        return
-
-    count = 0
-    for filename in os.listdir(ACTIONS_DIR):
-        if not filename.endswith('.json'):
-            continue
-            
-        filepath = os.path.join(ACTIONS_DIR, filename)
-        try:
-            with open(filepath, 'r') as f:
-                data = json.load(f, object_pairs_hook=OrderedDict)
-            
-            # Check if participants already exists
-            if 'participants' in data:
-                print(f"Skipping {filename}: 'participants' already exists.")
-                continue
-                
-            # Create new ordered dict to enforce order
-            new_data = OrderedDict()
-            
-            # Copy keys up to 'action'
-            found_action = False
-            for key, value in data.items():
-                new_data[key] = value
-                if key == 'action':
-                    found_action = True
-                    # Insert participants here
-                    new_data['participants'] = {
-                        "solo_focus": "true",
-                        "orientation": "MF"
-                    }
-            
-            # If 'action' wasn't found, append at the end
-            if not found_action:
-                print(f"Warning: 'action' key not found in {filename}. Appending 'participants' at the end.")
-                new_data['participants'] = {
-                    "solo_focus": "true",
-                    "orientation": "MF"
-                }
-            
-            # Write back to file
-            with open(filepath, 'w') as f:
-                json.dump(new_data, f, indent=2)
-                
-            count += 1
-            # print(f"Updated {filename}") # Commented out to reduce noise if many files
-            
-        except Exception as e:
-            print(f"Error processing {filename}: {e}")
-
-    print(f"Migration complete. Updated {count} files.")
-
-if __name__ == "__main__":
-    migrate_actions()
--- a/migrate_detailers.py
+++ b/migrate_detailers.py
@@ -1,61 +0,0 @@
-import os
-import json
-import re
-
-DETAILERS_DIR = 'data/detailers'
-
-def migrate_detailers():
-    if not os.path.exists(DETAILERS_DIR):
-        print(f"Directory {DETAILERS_DIR} does not exist.")
-        return
-
-    count = 0
-    for filename in os.listdir(DETAILERS_DIR):
-        if filename.endswith('.json'):
-            file_path = os.path.join(DETAILERS_DIR, filename)
-            try:
-                with open(file_path, 'r') as f:
-                    data = json.load(f)
-                
-                # Create a new ordered dictionary
-                new_data = {}
-                
-                # Copy existing fields up to 'prompt'
-                if 'detailer_id' in data:
-                    new_data['detailer_id'] = data['detailer_id']
-                if 'detailer_name' in data:
-                    new_data['detailer_name'] = data['detailer_name']
-                
-                # Handle 'prompt'
-                prompt_val = data.get('prompt', [])
-                if isinstance(prompt_val, str):
-                    # Split by comma and strip whitespace
-                    new_data['prompt'] = [p.strip() for p in prompt_val.split(',') if p.strip()]
-                else:
-                    new_data['prompt'] = prompt_val
-                
-                # Insert 'focus'
-                if 'focus' not in data:
-                    new_data['focus'] = ""
-                else:
-                    new_data['focus'] = data['focus']
-                
-                # Copy remaining fields
-                for key, value in data.items():
-                    if key not in ['detailer_id', 'detailer_name', 'prompt', 'focus']:
-                        new_data[key] = value
-                
-                # Write back to file
-                with open(file_path, 'w') as f:
-                    json.dump(new_data, f, indent=2)
-                
-                print(f"Migrated {filename}")
-                count += 1
-                
-            except Exception as e:
-                print(f"Error processing {filename}: {e}")
-
-    print(f"Migration complete. Processed {count} files.")
-
-if __name__ == '__main__':
-    migrate_detailers()
--- a/migrate_lora_weight_range.py
+++ b/migrate_lora_weight_range.py
@@ -1,79 +0,0 @@
-#!/usr/bin/env python3
-"""
-Migration: add lora_weight_min / lora_weight_max to every entity JSON.
-
-For each JSON file in the target directories we:
-  - Read the existing lora_weight value (default 1.0 if missing)
-  - Write lora_weight_min = lora_weight (if not already set)
-  - Write lora_weight_max = lora_weight (if not already set)
-  - Leave lora_weight in place (the resolver still uses it as a fallback)
-
-Directories processed (skip data/checkpoints — no LoRA weight there):
-  data/characters/
-  data/clothing/
-  data/actions/
-  data/styles/
-  data/scenes/
-  data/detailers/
-  data/looks/
-"""
-
-import glob
-import json
-import os
-import sys
-
-DIRS = [
-    'data/characters',
-    'data/clothing',
-    'data/actions',
-    'data/styles',
-    'data/scenes',
-    'data/detailers',
-    'data/looks',
-]
-
-dry_run = '--dry-run' in sys.argv
-updated = 0
-skipped = 0
-errors = 0
-
-for directory in DIRS:
-    pattern = os.path.join(directory, '*.json')
-    for path in sorted(glob.glob(pattern)):
-        try:
-            with open(path, 'r', encoding='utf-8') as f:
-                data = json.load(f)
-
-            lora = data.get('lora')
-            if not isinstance(lora, dict):
-                skipped += 1
-                continue
-
-            weight = float(lora.get('lora_weight', 1.0))
-            changed = False
-
-            if 'lora_weight_min' not in lora:
-                lora['lora_weight_min'] = weight
-                changed = True
-            if 'lora_weight_max' not in lora:
-                lora['lora_weight_max'] = weight
-                changed = True
-
-            if changed:
-                if not dry_run:
-                    with open(path, 'w', encoding='utf-8') as f:
-                        json.dump(data, f, indent=2, ensure_ascii=False)
-                        f.write('\n')
-                print(f"  [{'DRY' if dry_run else 'OK'}]  {path}  weight={weight}")
-                updated += 1
-            else:
-                skipped += 1
-
-        except Exception as e:
-            print(f"  [ERR] {path}: {e}", file=sys.stderr)
-            errors += 1
-
-print(f"\nDone. updated={updated}  skipped={skipped}  errors={errors}")
-if dry_run:
-    print("(dry-run — no files were written)")
--- a/migrate_wardrobe.py
+++ b/migrate_wardrobe.py
@@ -1,153 +0,0 @@
-#!/usr/bin/env python3
-"""
-Migration script to convert wardrobe structure from flat to nested format.
-
-Before:
-  "wardrobe": {
-    "headwear": "...",
-    "top": "...",
-    ...
-  }
-
-After:
-  "wardrobe": {
-    "default": {
-      "headwear": "...",
-      "top": "...",
-      ...
-    }
-  }
-
-This enables multiple outfits per character.
-"""
-
-import os
-import json
-from pathlib import Path
-
-
-def migrate_wardrobe(characters_dir: str = "characters", dry_run: bool = False):
-    """
-    Migrate all character JSON files to the new wardrobe structure.
-    
-    Args:
-        characters_dir: Path to the directory containing character JSON files
-        dry_run: If True, only print what would be changed without modifying files
-    """
-    characters_path = Path(characters_dir)
-    
-    if not characters_path.exists():
-        print(f"Error: Directory '{characters_dir}' does not exist")
-        return
-    
-    json_files = list(characters_path.glob("*.json"))
-    
-    if not json_files:
-        print(f"No JSON files found in '{characters_dir}'")
-        return
-    
-    migrated_count = 0
-    skipped_count = 0
-    error_count = 0
-    
-    for json_file in json_files:
-        try:
-            with open(json_file, 'r', encoding='utf-8') as f:
-                data = json.load(f)
-            
-            # Check if character has a wardrobe
-            if 'wardrobe' not in data:
-                print(f"  [SKIP] {json_file.name}: No wardrobe field")
-                skipped_count += 1
-                continue
-            
-            wardrobe = data['wardrobe']
-            
-            # Check if already migrated (wardrobe contains 'default' key with nested dict)
-            if 'default' in wardrobe and isinstance(wardrobe['default'], dict):
-                # Verify it's actually the new format (has wardrobe keys inside)
-                expected_keys = {'headwear', 'top', 'legwear', 'footwear', 'hands', 'accessories', 
-                                'inner_layer', 'outer_layer', 'lower_body', 'gloves'}
-                if any(key in wardrobe['default'] for key in expected_keys):
-                    print(f"  [SKIP] {json_file.name}: Already migrated")
-                    skipped_count += 1
-                    continue
-            
-            # Check if wardrobe is a flat structure (not already nested)
-            # A flat wardrobe has string values, a nested one has dict values
-            if not isinstance(wardrobe, dict):
-                print(f"  [ERROR] {json_file.name}: Wardrobe is not a dictionary")
-                error_count += 1
-                continue
-            
-            # Check if any value is a dict (indicating partial migration or different structure)
-            has_nested_values = any(isinstance(v, dict) for v in wardrobe.values())
-            if has_nested_values:
-                print(f"  [SKIP] {json_file.name}: Wardrobe has nested values, may already be migrated")
-                skipped_count += 1
-                continue
-            
-            # Perform migration
-            new_wardrobe = {
-                "default": wardrobe
-            }
-            data['wardrobe'] = new_wardrobe
-            
-            if dry_run:
-                print(f"  [DRY-RUN] {json_file.name}: Would migrate wardrobe")
-                print(f"            Old: {json.dumps(wardrobe, indent=2)[:100]}...")
-                print(f"            New: {json.dumps(new_wardrobe, indent=2)[:100]}...")
-            else:
-                with open(json_file, 'w', encoding='utf-8') as f:
-                    json.dump(data, f, indent=2, ensure_ascii=False)
-                print(f"  [MIGRATED] {json_file.name}")
-            
-            migrated_count += 1
-            
-        except json.JSONDecodeError as e:
-            print(f"  [ERROR] {json_file.name}: Invalid JSON - {e}")
-            error_count += 1
-        except Exception as e:
-            print(f"  [ERROR] {json_file.name}: {e}")
-            error_count += 1
-    
-    print()
-    print("=" * 50)
-    print(f"Migration complete:")
-    print(f"  - Migrated: {migrated_count}")
-    print(f"  - Skipped:  {skipped_count}")
-    print(f"  - Errors:   {error_count}")
-    if dry_run:
-        print()
-        print("This was a dry run. No files were modified.")
-        print("Run with --execute to apply changes.")
-
-
-if __name__ == "__main__":
-    import argparse
-    
-    parser = argparse.ArgumentParser(
-        description="Migrate character wardrobe structure to support multiple outfits"
-    )
-    parser.add_argument(
-        "--execute",
-        action="store_true",
-        help="Actually modify files (default is dry-run)"
-    )
-    parser.add_argument(
-        "--dir",
-        default="characters",
-        help="Directory containing character JSON files (default: characters)"
-    )
-    
-    args = parser.parse_args()
-    
-    print("=" * 50)
-    print("Wardrobe Migration Script")
-    print("=" * 50)
-    print(f"Directory: {args.dir}")
-    print(f"Mode: {'EXECUTE' if args.execute else 'DRY-RUN'}")
-    print("=" * 50)
-    print()
-    
-    migrate_wardrobe(characters_dir=args.dir, dry_run=not args.execute)
--- a/models.py
+++ b/models.py
@@ -132,6 +132,15 @@ class Settings(db.Model):
    openrouter_model = db.Column(db.String(100), default='google/gemini-2.0-flash-001')
    local_base_url = db.Column(db.String(255), nullable=True)
    local_model = db.Column(db.String(100), nullable=True)
+    # LoRA directories (absolute paths on disk)
+    lora_dir_characters = db.Column(db.String(500), default='/ImageModels/lora/Illustrious/Looks')
+    lora_dir_outfits    = db.Column(db.String(500), default='/ImageModels/lora/Illustrious/Clothing')
+    lora_dir_actions    = db.Column(db.String(500), default='/ImageModels/lora/Illustrious/Poses')
+    lora_dir_styles     = db.Column(db.String(500), default='/ImageModels/lora/Illustrious/Styles')
+    lora_dir_scenes     = db.Column(db.String(500), default='/ImageModels/lora/Illustrious/Backgrounds')
+    lora_dir_detailers  = db.Column(db.String(500), default='/ImageModels/lora/Illustrious/Detailers')
+    # Checkpoint scan directories (comma-separated list of absolute paths)
+    checkpoint_dirs     = db.Column(db.String(1000), default='/ImageModels/Stable-diffusion/Illustrious,/ImageModels/Stable-diffusion/Noob')

    def __repr__(self):
        return '<Settings>'
--- a/static/style.css
+++ b/static/style.css
@@ -1,42 +1,78 @@
 /* ============================================================
-   Character Browser — Dark Theme (Indigo / Violet)
+   GAZE — Character Browser Design System
+   Space Grotesk (display) + Inter (body)
+   Deep dark, violet-indigo accent palette
   ============================================================ */

 /* --- Variables ------------------------------------------------ */
 :root {
-  --bg-base:      #0f0f1a;
-  --bg-card:      #1a1a2e;
-  --bg-raised:    #222240;
-  --bg-input:     #16162a;
-  --accent:       #6c63ff;
-  --accent-dim:   #4f46e5;
-  --accent-glow:  rgba(108, 99, 255, 0.22);
-  --border:       #2d2d5e;
-  --border-light: #3a3a6a;
-  --text:         #e2e2f0;
-  --text-muted:   #8888aa;
-  --text-dim:     #5555aa;
-  --success:      #22c55e;
-  --danger:       #ef4444;
-  --warning:      #f59e0b;
-  --info:         #38bdf8;
-  --radius:       10px;
+  /* Backgrounds */
+  --bg-base:      #07070f;
+  --bg-card:      #0c0c1c;
+  --bg-raised:    #111128;
+  --bg-input:     #09091a;
+
+  /* Accent — violet */
+  --accent:       #8b7eff;
+  --accent-dim:   #6c5ce7;
+  --accent-bright:#b0a8ff;
+  --accent-glow:  rgba(139, 126, 255, 0.14);
+  --accent-glow-strong: rgba(139, 126, 255, 0.32);
+
+  /* Borders */
+  --border:       #16163a;
+  --border-light: #21214a;
+  --border-focus: #5548c8;
+
+  /* Text */
+  --text:         #e8e8f5;
+  --text-muted:   #6a6a9a;
+  --text-dim:     #35356a;
+
+  /* Status */
+  --success:      #34d399;
+  --danger:       #f87171;
+  --warning:      #fbbf24;
+  --info:         #60c8ff;
+
+  /* Shape */
+  --radius:       12px;
+  --radius-sm:    8px;
+
+  /* Fonts */
+  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
+  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
 }

 /* --- Base ----------------------------------------------------- */
 body {
  background-color: var(--bg-base);
+  /* Subtle radial accent glow — premium depth effect */
+  background-image:
+    radial-gradient(ellipse at 18% 0%, rgba(139, 126, 255, 0.06) 0%, transparent 55%),
+    radial-gradient(ellipse at 82% 100%, rgba(192, 132, 252, 0.05) 0%, transparent 55%);
+  background-attachment: fixed;
  color: var(--text);
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.6;
  min-height: 100vh;
 }

-a { color: var(--accent); }
-a:hover { color: #9d98ff; }
+a { color: var(--accent-bright); text-decoration: none; }
+a:hover { color: #c4b5fd; }
+
+h1, h2, h3, h4 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: -0.02em;
+}
+h5, h6 { color: var(--text); }

 /* Scrollbar */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: var(--bg-card); }
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

@@ -44,83 +80,160 @@ a:hover { color: #9d98ff; }
   Navbar
   ============================================================ */
 .navbar {
-  background: rgba(15, 15, 26, 0.95) !important;
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--border);
-  padding: 0.55rem 0;
+  background: rgba(7, 7, 15, 0.97) !important;
+  backdrop-filter: blur(24px) saturate(1.3);
+  border-bottom: 1px solid var(--border) !important;
+  padding: 0.5rem 0;
 }

 .navbar-brand {
+  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.18em;
  text-transform: uppercase;
-  background: linear-gradient(90deg, #a78bfa, #6c63ff, #c084fc);
+  background: linear-gradient(135deg, #c084fc 0%, #8b7eff 45%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
 }
 .navbar-brand:hover {
-  background: linear-gradient(90deg, #c4b5fd, #818cf8, #d8b4fe);
+  background: linear-gradient(135deg, #d8b4fe 0%, #b0a8ff 45%, #93c5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
 }

 .navbar-logo {
-  height: 28px;
+  height: 26px;
  width: auto;
 }

-/* All nav outline-light buttons become understated link-style items */
+/* Nav links — borderless, subtle hover */
 .navbar .btn-outline-light {
  border: none;
  color: var(--text-muted) !important;
  background: transparent;
-  font-size: 0.82rem;
-  padding: 0.28rem 0.6rem;
-  border-radius: 6px;
+  font-size: 0.79rem;
+  font-weight: 500;
+  padding: 0.28rem 0.58rem;
+  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
+  letter-spacing: 0.01em;
 }
 .navbar .btn-outline-light:hover,
 .navbar .btn-outline-light:focus {
  color: var(--text) !important;
-  background: rgba(255, 255, 255, 0.07);
+  background: rgba(139, 126, 255, 0.08);
  box-shadow: none;
 }

-/* Generator and Gallery get accent tint */
 .navbar .btn-outline-light[href="/generator"],
 .navbar .btn-outline-light[href="/gallery"] {
-  color: #9d98ff !important;
+  color: var(--accent-bright) !important;
 }
 .navbar .btn-outline-light[href="/generator"]:hover,
 .navbar .btn-outline-light[href="/gallery"]:hover {
  background: var(--accent-glow);
-  color: #b8b4ff !important;
+  color: #c4b5fd !important;
 }

-/* Create Character */
 .navbar .btn-outline-success {
-  border: 1px solid rgba(34, 197, 94, 0.5);
+  border: 1px solid rgba(52, 211, 153, 0.35);
  color: var(--success) !important;
-  font-size: 0.82rem;
+  font-size: 0.79rem;
+  font-weight: 500;
  padding: 0.28rem 0.7rem;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
  transition: all 0.15s;
 }
 .navbar .btn-outline-success:hover {
-  background: rgba(34, 197, 94, 0.12);
+  background: rgba(52, 211, 153, 0.1);
  border-color: var(--success);
  box-shadow: none;
  color: var(--success) !important;
 }

-/* Vertical divider in navbar */
 .navbar .vr {
-  background-color: var(--border);
+  background-color: var(--border-light);
  opacity: 1;
 }

+/* Queue button */
+.queue-btn {
+  position: relative;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 0.95rem;
+  padding: 0.2rem 0.48rem;
+  border-radius: var(--radius-sm);
+  transition: color 0.15s, background 0.15s;
+  line-height: 1;
+}
+.queue-btn:hover {
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.06);
+}
+.queue-btn-active { color: var(--accent-bright) !important; }
+.queue-badge {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.58rem;
+  font-weight: 700;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 3px;
+  line-height: 1;
+}
+.queue-icon { font-size: 0.88rem; }
+
+/* Queue status dots */
+.queue-status-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: inline-block;
+}
+.queue-status-pending    { background: var(--text-muted); }
+.queue-status-processing { background: var(--warning); animation: pulse 1s infinite; }
+.queue-status-paused     { background: var(--text-dim); }
+.queue-status-done       { background: var(--success); }
+.queue-status-failed     { background: var(--danger); }
+.queue-status-removed    { background: var(--border-light); }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.35; }
+}
+
+.btn-xs {
+  padding: 0.1rem 0.35rem;
+  font-size: 0.7rem;
+  border-radius: 4px;
+  line-height: 1.4;
+}
+
+/* ============================================================
+   Checkpoint Bar
+   ============================================================ */
+.default-checkpoint-bar {
+  background:
+    linear-gradient(to right,
+      rgba(139, 126, 255, 0.04) 0%,
+      transparent 25%,
+      transparent 75%,
+      rgba(139, 126, 255, 0.04) 100%);
+  border-bottom: 1px solid var(--border) !important;
+}
+
 /* ============================================================
   Cards
   ============================================================ */
@@ -136,10 +249,10 @@ a:hover { color: #9d98ff; }
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-weight: 600;
-  font-size: 0.88rem;
+  font-size: 0.84rem;
+  letter-spacing: 0.01em;
 }

-/* Override Bootstrap bg utility classes on card-header */
 .card-header.bg-primary,
 .card-header.bg-dark,
 .card-header.bg-secondary,
@@ -156,19 +269,76 @@ a:hover { color: #9d98ff; }

 .card-body { color: var(--text); }

-/* Character / category card hover */
+/* ============================================================
+   Gallery Cards (.character-card)
+   ============================================================ */
 .character-card {
  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+  overflow: hidden;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+  display: flex !important;
+  flex-direction: column;
 }
 .character-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 32px var(--accent-glow);
+  transform: translateY(-5px);
+  box-shadow: 0 20px 60px rgba(4, 4, 10, 0.7), 0 0 0 1px var(--accent);
  border-color: var(--accent) !important;
 }

+/* Gallery card image container — portrait 2:3 ratio */
+.character-card .img-container {
+  aspect-ratio: 2 / 3;
+  height: auto;
+  min-height: unset;
+  flex-shrink: 0;
+}
+
+.character-card .img-container img {
+  transition: transform 0.4s ease;
+}
+.character-card:hover .img-container img {
+  transform: scale(1.07);
+}
+
+/* Subtle accent tint on hover via pseudo-overlay */
+.character-card:hover .img-container::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, transparent 55%, rgba(108, 92, 231, 0.12) 100%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Compact name strip */
+.character-card .card-body {
+  padding: 0.55rem 0.7rem 0.4rem;
+  flex: 1;
+}
+.character-card .card-title {
+  font-family: var(--font-display);
+  font-size: 0.84rem;
+  font-weight: 600;
+  margin-bottom: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: -0.01em;
+}
+.character-card .card-text {
+  display: none; /* Hide verbose prompt text — cleaner gallery look */
+}
+.character-card .card-footer {
+  padding: 0.28rem 0.7rem;
+}
+.character-card .card-footer small {
+  font-size: 0.66rem;
+  font-family: monospace;
+  color: var(--text-dim) !important;
+}
+
 /* ============================================================
-   Image container
+   Image container (detail pages and standalone use)
   ============================================================ */
 .img-container {
  height: 300px;
@@ -178,6 +348,7 @@ a:hover { color: #9d98ff; }
  align-items: center;
  justify-content: center;
  border-radius: var(--radius) var(--radius) 0 0;
+  position: relative;
 }
 .img-container img {
  width: 100%;
@@ -197,15 +368,16 @@ a:hover { color: #9d98ff; }
 .form-control,
 .form-select {
  background-color: var(--bg-input) !important;
-  border-color: var(--border) !important;
+  border-color: var(--border-light) !important;
  color: var(--text) !important;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
+  font-size: 0.875rem;
 }
 .form-control:focus,
 .form-select:focus {
-  border-color: var(--accent) !important;
-  box-shadow: 0 0 0 3px var(--accent-glow) !important;
+  border-color: var(--border-focus) !important;
+  box-shadow: 0 0 0 3px rgba(85, 72, 200, 0.22) !important;
  background-color: var(--bg-input) !important;
  color: var(--text) !important;
 }
@@ -214,10 +386,11 @@ a:hover { color: #9d98ff; }
 .form-select:disabled {
  background-color: var(--bg-raised) !important;
  color: var(--text-muted) !important;
+  opacity: 0.65;
 }

-.form-label { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; }
-.form-text  { color: var(--text-dim) !important; }
+.form-label { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem; }
+.form-text  { color: var(--text-dim) !important; font-size: 0.77rem; }

 .form-check-input {
  background-color: var(--bg-input);
@@ -227,8 +400,11 @@ a:hover { color: #9d98ff; }
  background-color: var(--accent);
  border-color: var(--accent);
 }
-.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-glow); }
-.form-check-label { color: var(--text); }
+.form-check-input:focus {
+  box-shadow: 0 0 0 3px rgba(85, 72, 200, 0.22);
+  border-color: var(--border-focus);
+}
+.form-check-label { color: var(--text); font-size: 0.875rem; }

 option { background-color: var(--bg-raised); color: var(--text); }

@@ -236,22 +412,24 @@ option { background-color: var(--bg-raised); color: var(--text); }
   Buttons
   ============================================================ */
 .btn-primary {
-  background-color: var(--accent);
-  border-color: var(--accent-dim);
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
+  border: 1px solid var(--accent-dim);
  color: #fff;
+  font-weight: 500;
 }
 .btn-primary:hover,
 .btn-primary:active,
 .btn-primary:focus {
-  background-color: var(--accent-dim);
-  border-color: #3730a3;
-  box-shadow: 0 0 0 3px var(--accent-glow);
+  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(139, 126, 255, 0.22);
  color: #fff;
 }

 .btn-outline-primary {
  border-color: var(--accent);
  color: var(--accent);
+  font-weight: 500;
 }
 .btn-outline-primary:hover,
 .btn-outline-primary:active {
@@ -264,9 +442,10 @@ option { background-color: var(--bg-raised); color: var(--text); }
  background-color: var(--bg-raised);
  border-color: var(--border-light);
  color: var(--text);
+  font-weight: 500;
 }
 .btn-secondary:hover {
-  background-color: #2a2a50;
+  background-color: #1c1c38;
  border-color: var(--border-light);
  color: var(--text);
 }
@@ -274,6 +453,7 @@ option { background-color: var(--bg-raised); color: var(--text); }
 .btn-outline-secondary {
  border-color: var(--border-light);
  color: var(--text-muted);
+  font-weight: 500;
 }
 .btn-outline-secondary:hover,
 .btn-outline-secondary:active {
@@ -284,36 +464,36 @@ option { background-color: var(--bg-raised); color: var(--text); }

 /* Active resolution preset */
 .btn-secondary.preset-btn {
-  background-color: var(--accent);
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  border-color: var(--accent-dim);
  color: #fff;
 }

-.btn-outline-success { border-color: var(--success); color: var(--success); }
-.btn-outline-success:hover { background-color: rgba(34,197,94,.12); border-color: var(--success); color: var(--success); }
-.btn-success { background-color: var(--success); border-color: #16a34a; color: #fff; }
-.btn-success:hover { background-color: #16a34a; border-color: #15803d; color: #fff; }
+.btn-outline-success { border-color: var(--success); color: var(--success); font-weight: 500; }
+.btn-outline-success:hover { background-color: rgba(52,211,153,.1); border-color: var(--success); color: var(--success); }
+.btn-success { background-color: #059669; border-color: #047857; color: #fff; font-weight: 500; }
+.btn-success:hover { background-color: #047857; border-color: #065f46; color: #fff; }

-.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
-.btn-outline-danger:hover { background-color: rgba(239,68,68,.12); border-color: var(--danger); color: var(--danger); }
-.btn-danger { background-color: var(--danger); border-color: #dc2626; color: #fff; }
-.btn-danger:hover { background-color: #dc2626; border-color: #b91c1c; color: #fff; }
+.btn-outline-danger { border-color: var(--danger); color: var(--danger); font-weight: 500; }
+.btn-outline-danger:hover { background-color: rgba(248,113,113,.1); border-color: var(--danger); color: var(--danger); }
+.btn-danger { background-color: #dc2626; border-color: #b91c1c; color: #fff; font-weight: 500; }
+.btn-danger:hover { background-color: #b91c1c; border-color: #991b1b; color: #fff; }

-.btn-outline-warning { border-color: var(--warning); color: var(--warning); }
-.btn-outline-warning:hover { background-color: rgba(245,158,11,.12); border-color: var(--warning); color: var(--warning); }
+.btn-outline-warning { border-color: var(--warning); color: var(--warning); font-weight: 500; }
+.btn-outline-warning:hover { background-color: rgba(251,191,36,.1); border-color: var(--warning); color: var(--warning); }

 .btn-light, .btn-outline-light {
-  background-color: rgba(255,255,255,.08);
+  background-color: rgba(255,255,255,.06);
  border-color: var(--border-light);
  color: var(--text);
+  font-weight: 500;
 }
 .btn-light:hover, .btn-outline-light:hover {
-  background-color: rgba(255,255,255,.14);
+  background-color: rgba(255,255,255,.1);
  color: var(--text);
 }

-/* Close button override (visible on dark bg) */
-.btn-close { filter: invert(1) brightness(0.8); }
+.btn-close { filter: invert(1) brightness(0.7); }

 /* ============================================================
   Accordion
@@ -322,60 +502,57 @@ option { background-color: var(--bg-raised); color: var(--text); }
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
 }
-
 .accordion-button {
  background-color: var(--bg-raised) !important;
  color: var(--text) !important;
-  font-size: 0.88rem;
+  font-size: 0.875rem;
+  font-weight: 500;
 }
 .accordion-button:not(.collapsed) {
-  background-color: #252450 !important;
-  color: var(--text) !important;
+  background-color: #181835 !important;
+  color: var(--accent-bright) !important;
  box-shadow: inset 0 -1px 0 var(--border);
 }
-/* Make the chevron arrow visible on dark bg */
 .accordion-button::after,
 .accordion-button:not(.collapsed)::after {
-  filter: invert(1) brightness(0.75);
+  filter: invert(1) brightness(0.6);
 }
 .accordion-button:focus { box-shadow: none; }
 .accordion-body { background-color: var(--bg-card); padding: 0.5rem; }

 /* Mix & match list items */
-.mix-item { user-select: none; border-radius: 6px; }
-.mix-item:hover { background-color: rgba(108, 99, 255, 0.12) !important; }
-
-/* N/A placeholder for items without images */
+.mix-item { user-select: none; border-radius: var(--radius-sm); }
+.mix-item:hover { background-color: rgba(139, 126, 255, 0.1) !important; }
 .mix-item .bg-light {
  background-color: var(--bg-raised) !important;
  color: var(--text-dim) !important;
 }

 /* ============================================================
-   Progress bars
+   Progress Bars
   ============================================================ */
 .progress {
  background-color: var(--bg-raised);
  border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 999px;
 }
 .progress-bar {
-  background-color: var(--accent);
-  border-radius: 8px;
+  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
+  border-radius: 999px;
  transition: width 0.4s ease-in-out;
 }
-.progress-bar.bg-success { background-color: var(--success) !important; }
-.progress-bar.bg-info    { background-color: var(--info)    !important; }
+.progress-bar.bg-success { background: var(--success) !important; }
+.progress-bar.bg-info    { background: var(--info)    !important; }

 /* ============================================================
   Badges
   ============================================================ */
 .badge.bg-primary   { background-color: var(--accent)  !important; }
-.badge.bg-secondary { background-color: #2e2e52        !important; color: var(--text-muted) !important; }
-.badge.bg-info      { background-color: var(--info)    !important; color: #0f172a !important; }
-.badge.bg-success   { background-color: var(--success) !important; }
+.badge.bg-secondary { background-color: #1b1b40        !important; color: var(--text-muted) !important; }
+.badge.bg-info      { background-color: var(--info)    !important; color: #0c1a2b !important; }
+.badge.bg-success   { background-color: var(--success) !important; color: #012218 !important; }
 .badge.bg-danger    { background-color: var(--danger)  !important; }
-.badge.bg-warning   { background-color: var(--warning) !important; color: #0f172a !important; }
+.badge.bg-warning   { background-color: var(--warning) !important; color: #1a0f00 !important; }
 .badge.bg-light     { background-color: var(--bg-raised) !important; color: var(--text-muted) !important; border-color: var(--border) !important; }

 /* ============================================================
@@ -383,39 +560,50 @@ option { background-color: var(--bg-raised); color: var(--text); }
   ============================================================ */
 .modal-content {
  background-color: var(--bg-card);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text);
+  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(139, 126, 255, 0.08);
 }
 .modal-header {
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-raised);
  border-radius: var(--radius) var(--radius) 0 0;
+  padding: 1rem 1.25rem;
 }
 .modal-footer {
  border-top: 1px solid var(--border);
  background-color: var(--bg-raised);
  border-radius: 0 0 var(--radius) var(--radius);
+  padding: 0.75rem 1.25rem;
+}
+.modal-title {
+  color: var(--text);
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 1rem;
 }
-.modal-title { color: var(--text); }

 /* ============================================================
   Alerts
   ============================================================ */
 .alert-info {
-  background-color: rgba(56, 189, 248, 0.1);
-  border-color: rgba(56, 189, 248, 0.3);
+  background-color: rgba(96, 200, 255, 0.08);
+  border-color: rgba(96, 200, 255, 0.22);
  color: var(--info);
+  border-radius: var(--radius-sm);
 }
 .alert-success {
-  background-color: rgba(34, 197, 94, 0.1);
-  border-color: rgba(34, 197, 94, 0.3);
+  background-color: rgba(52, 211, 153, 0.08);
+  border-color: rgba(52, 211, 153, 0.22);
  color: var(--success);
+  border-radius: var(--radius-sm);
 }
 .alert-danger {
-  background-color: rgba(239, 68, 68, 0.1);
-  border-color: rgba(239, 68, 68, 0.3);
+  background-color: rgba(248, 113, 113, 0.08);
+  border-color: rgba(248, 113, 113, 0.22);
  color: var(--danger);
+  border-radius: var(--radius-sm);
 }

 /* ============================================================
@@ -425,6 +613,7 @@ option { background-color: var(--bg-raised); color: var(--text); }
  background-color: var(--bg-card);
  border-color: var(--border);
  color: var(--text-muted);
+  font-size: 0.875rem;
 }
 .page-link:hover {
  background-color: var(--bg-raised);
@@ -443,22 +632,31 @@ option { background-color: var(--bg-raised); color: var(--text); }
 }

 /* ============================================================
-   Text / utility overrides
+   Text / Utility overrides
   ============================================================ */
 .text-muted { color: var(--text-muted) !important; }
-h1, h2, h3, h4, h5, h6 { color: var(--text); }
 .border-bottom { border-color: var(--border) !important; }
 .border-top    { border-color: var(--border) !important; }
 .border        { border-color: var(--border) !important; }
-hr             { border-color: var(--border); }
-small          { color: var(--text-muted); }
+hr             { border-color: var(--border); opacity: 1; }
+small          { color: var(--text-muted); font-size: 0.8em; }
 .font-monospace { color: var(--text); }
-
-/* Spinner on dark bg */
 .spinner-border.text-secondary { color: var(--text-muted) !important; }

+/* List group */
+.list-group-item {
+  background-color: var(--bg-card);
+  border-color: var(--border);
+  color: var(--text);
+}
+.list-group-item:hover { background-color: var(--bg-raised); }
+.list-group-flush .list-group-item {
+  border-left: none;
+  border-right: none;
+}
+
 /* ============================================================
-   Gallery page
+   Gallery Page
   ============================================================ */
 .gallery-card {
  position: relative;
@@ -471,20 +669,20 @@ small          { color: var(--text-muted); }
 }
 .gallery-card:hover {
  border-color: var(--accent);
-  box-shadow: 0 0 20px var(--accent-glow);
+  box-shadow: 0 0 28px var(--accent-glow);
 }
 .gallery-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
-  transition: transform 0.2s;
+  transition: transform 0.25s ease;
 }
 .gallery-card:hover img { transform: scale(1.04); }
 .gallery-card .overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
-  background: linear-gradient(transparent, rgba(0,0,0,0.88));
-  padding: 28px 8px 8px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
+  padding: 32px 10px 10px;
  opacity: 0;
  transition: opacity 0.2s;
 }
@@ -496,16 +694,16 @@ small          { color: var(--text-muted); }

 .gallery-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
 }
-@media (min-width: 768px)  { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
-@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
+@media (min-width: 768px)  { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
+@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }

 /* Lightbox */
 #lightbox {
  display: none; position: fixed; inset: 0;
-  background: rgba(0, 0, 0, 0.94); z-index: 9999;
+  background: rgba(0, 0, 0, 0.97); z-index: 9999;
  align-items: center; justify-content: center; flex-direction: column;
 }
 #lightbox.active { display: flex; }
@@ -513,16 +711,16 @@ small          { color: var(--text-muted); }
 #lightbox-img {
  max-width: 90vw; max-height: 80vh; object-fit: contain;
  border-radius: 8px;
-  box-shadow: 0 0 60px rgba(108, 99, 255, 0.3);
+  box-shadow: 0 0 80px rgba(139, 126, 255, 0.22);
  cursor: zoom-in; display: block;
 }
-#lightbox-meta  { color: #eee; margin-top: 10px; text-align: center; font-size: .85rem; }
-#lightbox-hint  { color: rgba(255,255,255,.38); font-size: .75rem; margin-top: 3px; }
+#lightbox-meta  { color: #eee; margin-top: 12px; text-align: center; font-size: .85rem; }
+#lightbox-hint  { color: rgba(255,255,255,.3); font-size: .75rem; margin-top: 4px; }
 #lightbox-close { position: fixed; top: 16px; right: 20px; font-size: 2rem; color: #fff; cursor: pointer; z-index: 10000; line-height: 1; }
 #lightbox-actions { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; gap: 8px; }

 /* Prompt modal metadata */
-.meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .85rem; }
+.meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .85rem; }
 .meta-grid .meta-label { color: var(--text-muted); white-space: nowrap; font-weight: 600; }
 .meta-grid .meta-value { font-family: monospace; word-break: break-all; color: var(--text); }

@@ -534,49 +732,10 @@ small          { color: var(--text-muted); }
  font-size: .8rem; font-family: monospace; margin: 2px;
  color: var(--text);
 }
-.lora-chip .lora-strength { color: var(--accent); }
+.lora-chip .lora-strength { color: var(--accent-bright); }

 /* ============================================================
-   Misc
-   ============================================================ */
-/* Vertical rule in navbar */
-.vr { opacity: 1; background-color: var(--border); }
-
-/* Inline icons inside buttons */
-.btn img { height: 1em; vertical-align: -0.125em; }
-
-/* Icon-only square button */
-.btn-icon {
-  width: 34px;
-  height: 34px;
-  padding: 0;
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.btn-icon img {
-  width: 18px;
-  height: 18px;
-  filter: brightness(0) invert(1);
-}
-
-/* Make forms invisible to flex layout so buttons flow naturally */
-.d-contents { display: contents !important; }
-
-/* Tags display */
-.badge.rounded-pill { font-weight: 400; }
-
-/* Textarea read-only */
-textarea[readonly] {
-  background-color: var(--bg-raised) !important;
-  color: var(--text) !important;
-  border-color: var(--border) !important;
-  resize: vertical;
-}
-
-/* ============================================================
-   Service status indicators (navbar)
+   Service Status Indicators (navbar)
   ============================================================ */
 .service-status {
  display: inline-flex;
@@ -584,30 +743,63 @@ textarea[readonly] {
  gap: 4px;
  cursor: default;
  user-select: none;
-  opacity: 0.85;
+  opacity: 0.8;
 }
 .service-status:hover { opacity: 1; }

 .status-dot {
  display: inline-block;
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.4s ease;
 }
-.status-dot.status-ok       { background-color: #3dd68c; box-shadow: 0 0 4px #3dd68c88; }
-.status-dot.status-error    { background-color: #f06080; box-shadow: 0 0 4px #f0608088; }
-.status-dot.status-checking { background-color: #888; animation: status-pulse 1.2s ease-in-out infinite; }
+.status-dot.status-ok       { background-color: #34d399; box-shadow: 0 0 5px rgba(52, 211, 153, 0.55); }
+.status-dot.status-error    { background-color: #f87171; box-shadow: 0 0 5px rgba(248, 113, 113, 0.55); }
+.status-dot.status-checking { background-color: var(--border-light); animation: status-pulse 1.4s ease-in-out infinite; }

 .status-label {
  font-size: 0.7rem;
  font-weight: 500;
-  color: rgba(255,255,255,0.65);
+  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
 }

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.3; }
+  50%       { opacity: 0.2; }
+}
+
+/* ============================================================
+   Misc
+   ============================================================ */
+.vr { opacity: 1; background-color: var(--border-light); }
+
+.btn img { height: 1em; vertical-align: -0.125em; }
+
+.btn-icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.btn-icon img {
+  width: 16px;
+  height: 16px;
+  filter: brightness(0) invert(1);
+}
+
+.d-contents { display: contents !important; }
+
+.badge.rounded-pill { font-weight: 400; }
+
+textarea[readonly] {
+  background-color: var(--bg-raised) !important;
+  color: var(--text) !important;
+  border-color: var(--border) !important;
+  resize: vertical;
 }
--- a/templates/actions/detail.html
+++ b/templates/actions/detail.html
@@ -56,7 +56,7 @@
        <div class="card mb-4">
            <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
                {% if action.image_path %}
-                <img src="{{ url_for('static', filename='uploads/' + action.image_path) }}" alt="{{ action.name }}" class="img-fluid">
+                <img src="{{ url_for('static', filename='uploads/' + action.image_path) }}" alt="{{ action.name }}" class="img-fluid" data-preview-path="{{ action.image_path }}">
                {% else %}
                <span class="text-muted">No Image Attached</span>
                {% endif %}
@@ -97,35 +97,20 @@
            </div>
        </div>

-        {% if preview_image %}
-        <div class="card mb-4 border-success">
-            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
-                <span>Latest Preview</span>
+        <div class="card mb-4 {% if preview_image %}border-success{% else %}border-secondary d-none{% endif %}" id="preview-card">
+            <div class="card-header {% if preview_image %}bg-success{% else %}bg-secondary{% endif %} text-white d-flex justify-content-between align-items-center" id="preview-card-header">
+                <span>Selected Preview</span>
                <form action="{{ url_for('replace_action_cover_from_preview', slug=action.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn">Replace Cover</button>
+                    <input type="hidden" name="preview_path" id="preview-path" value="{{ preview_image or '' }}">
+                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" {% if not preview_image %}disabled{% endif %}>Replace Cover</button>
                </form>
            </div>
            <div class="card-body p-0">
                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) }}" alt="Preview" class="img-fluid">
+                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) if preview_image else '' }}" alt="Preview" class="img-fluid">
                </div>
            </div>
        </div>
-        {% else %}
-        <div class="card mb-4 border-secondary d-none" id="preview-card">
-            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
-                <span>Latest Preview</span>
-                <form action="{{ url_for('replace_action_cover_from_preview', slug=action.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" disabled>Replace Cover</button>
-                </form>
-            </div>
-            <div class="card-body p-0">
-                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="" alt="Preview" class="img-fluid">
-                </div>
-            </div>
-        </div>
-        {% endif %}
        
        <div class="card mb-4">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
@@ -163,7 +148,7 @@
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
-                <a href="{{ url_for('actions_index') }}" class="btn btn-outline-secondary">Back to Gallery</a>
+                <a href="{{ url_for('actions_index') }}" class="btn btn-outline-secondary">Back to Library</a>
            </div>
        </div>

@@ -288,7 +273,8 @@
                             class="img-fluid rounded"
                             style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
                             onclick="showImage(this.src)"
-                             data-bs-toggle="modal" data-bs-target="#imageModal">
+                             data-bs-toggle="modal" data-bs-target="#imageModal"
+                             data-preview-path="{{ img }}">
                    </div>
                    {% else %}
                    <div class="col-12 text-muted small" id="gallery-empty">No previews yet. Generate some!</div>
@@ -314,200 +300,75 @@
        const progressLabel = document.getElementById('progress-label');
        const previewCard = document.getElementById('preview-card');
        const previewImg = document.getElementById('preview-img');
+        const previewPath = document.getElementById('preview-path');
+        const replaceBtn = document.getElementById('replace-cover-btn');
+        const previewHeader = document.getElementById('preview-card-header');
        const charSelect = document.getElementById('character_select');
        const charContext = document.getElementById('character-context');
-        
-        // Toggle character context info
+
        charSelect.addEventListener('change', () => {
-            if (charSelect.value && charSelect.value !== '__random__') {
-                charContext.classList.remove('d-none');
-            } else {
-                charContext.classList.add('d-none');
-            }
+            charContext.classList.toggle('d-none', !charSelect.value || charSelect.value === '__random__');
        });

-        // Generate a unique client ID
-        const clientId = 'action_detail_' + Math.random().toString(36).substring(2, 15);
+        function selectPreview(relativePath, imageUrl) {
+            if (!relativePath) return;
+            previewImg.src = imageUrl;
+            previewPath.value = relativePath;
+            replaceBtn.disabled = false;
+            previewCard.classList.remove('d-none');
+            previewHeader.classList.replace('bg-secondary', 'bg-success');
+            previewCard.classList.replace('border-secondary', 'border-success');
+        }

-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
-        let currentAction = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
+        document.addEventListener('click', e => {
+            const img = e.target.closest('img[data-preview-path]');
+            if (img) selectPreview(img.dataset.previewPath, img.src);
        });

-        let resolveCompletion = null;
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            console.log('Finished via Polling');
-                            checkResolve();
-                        }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else progressLabel.textContent = data.status === 'processing' ? 'Generating…' : 'Queued…';
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
            });
        }

        form.addEventListener('submit', async (e) => {
-            // Only intercept generate actions
            const submitter = e.submitter;
-            if (!submitter || submitter.value !== 'preview') {
-                return; 
-            }
-            
+            if (!submitter || submitter.value !== 'preview') return;
            e.preventDefault();
-            
-            currentAction = submitter.value;
            const formData = new FormData(form);
-            formData.append('action', currentAction);
-            formData.append('client_id', clientId);
-            
-            // UI Reset
+            formData.append('action', 'preview');
            progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-            
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
            try {
                const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
-                
                const data = await response.json();
-                
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
+                if (data.error) { alert('Error: ' + data.error); return; }
+                progressLabel.textContent = 'Queued…';
+                const jobResult = await waitForJob(data.job_id);
+                if (jobResult.result?.image_url) {
+                    selectPreview(jobResult.result.relative_path, jobResult.result.image_url);
+                    addToPreviewGallery(jobResult.result.image_url, jobResult.result.relative_path, '');
                }
-                
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                
-                // Wait for completion (WebSocket or Polling)
-                await waitForCompletion(currentPromptId);
-                
-                // Finalize
-                finalizeGeneration(currentPromptId, currentAction);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
+            } catch (err) { console.error(err); alert('Generation failed: ' + err.message); }
+            finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
        });
-        
-        async function finalizeGeneration(promptId, action) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/action/{{ action.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');  // Always save as preview
-            
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                
-                if (data.success) {
-                    // Update preview image
-                    previewImg.src = data.image_url;
-                    if (previewCard) previewCard.classList.remove('d-none');
-                    
-                    // Enable the replace cover button if it exists
-                    const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        // Check if there's a form to update
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/action/{{ action.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            } finally {
-                progressContainer.classList.add('d-none');
-            }
-        }

-        // Batch: Generate All Characters
        const allCharacters = [
            {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
            {% endfor %}
        ];
-        const finalizeBaseUrl = '/action/{{ action.slug }}/finalize_generation';
-
        let stopBatch = false;
        const generateAllBtn = document.getElementById('generate-all-btn');
        const stopAllBtn = document.getElementById('stop-all-btn');
@@ -515,7 +376,7 @@
        const batchLabel = document.getElementById('batch-label');
        const batchBar = document.getElementById('batch-bar');

-        function addToPreviewGallery(imageUrl, charName) {
+        function addToPreviewGallery(imageUrl, relativePath, charName) {
            const gallery = document.getElementById('preview-gallery');
            const placeholder = document.getElementById('gallery-empty');
            if (placeholder) placeholder.remove();
@@ -526,8 +387,9 @@
                     style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
                     onclick="showImage(this.src)"
                     data-bs-toggle="modal" data-bs-target="#imageModal"
+                     data-preview-path="${relativePath}"
                     title="${charName}">
-                <div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white p-1 rounded-bottom" style="font-size: 0.7rem; line-height: 1.2;">${charName}</div>
+                ${charName ? `<div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white p-1 rounded-bottom" style="font-size: 0.7rem; line-height: 1.2;">${charName}</div>` : ''}
            </div>`;
            gallery.insertBefore(col, gallery.firstChild);
            const badge = document.querySelector('#previews-tab .badge');
@@ -543,53 +405,36 @@
            batchProgress.classList.remove('d-none');
            bootstrap.Tab.getOrCreateInstance(document.getElementById('previews-tab')).show();

-            for (let i = 0; i < allCharacters.length; i++) {
+            const genForm = document.getElementById('generate-form');
+            const formAction = genForm.getAttribute('action');
+            batchLabel.textContent = 'Queuing all characters…';
+            const pending = [];
+            for (const char of allCharacters) {
                if (stopBatch) break;
-                const char = allCharacters[i];
-                batchBar.style.width = `${Math.round((i / allCharacters.length) * 100)}%`;
-                batchLabel.textContent = `Generating ${char.name} (${i + 1} / ${allCharacters.length})`;
-
-                const genForm = document.getElementById('generate-form');
                const fd = new FormData();
                genForm.querySelectorAll('input[name="include_field"]:checked').forEach(cb => fd.append('include_field', cb.value));
                fd.append('character_slug', char.slug);
                fd.append('action', 'preview');
-                fd.append('client_id', clientId);
-
                try {
-                    progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
-
-                    const resp = await fetch(genForm.getAttribute('action'), {
-                        method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
-                    });
+                    const resp = await fetch(formAction, { method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                    const data = await resp.json();
-                    if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
-                        if (previewCard) previewCard.classList.remove('d-none');
-                    }
-                    currentPromptId = null;
-                } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
-                } finally {
-                    progressContainer.classList.add('d-none');
-                }
+                    if (!data.error) pending.push({ char, jobId: data.job_id });
+                } catch (err) { console.error(`Submit error for ${char.name}:`, err); }
            }

+            batchBar.style.width = '0%';
+            let done = 0;
+            const total = pending.length;
+            batchLabel.textContent = `0 / ${total} complete`;
+            await Promise.all(pending.map(({ char, jobId }) =>
+                waitForJob(jobId).then(result => {
+                    done++;
+                    batchBar.style.width = `${Math.round((done / total) * 100)}%`;
+                    batchLabel.textContent = `${done} / ${total} complete`;
+                    if (result.result?.image_url) addToPreviewGallery(result.result.image_url, result.result.relative_path, char.name);
+                }).catch(err => { done++; console.error(`Failed for ${char.name}:`, err); })
+            ));
+
            batchBar.style.width = '100%';
            batchLabel.textContent = stopBatch ? 'Stopped.' : 'Complete!';
            generateAllBtn.disabled = false;
@@ -600,10 +445,9 @@
        stopAllBtn.addEventListener('click', () => {
            stopBatch = true;
            stopAllBtn.classList.add('d-none');
-            batchLabel.textContent = 'Stopping after current generation...';
+            batchLabel.textContent = 'Stopping…';
        });

-        // JSON Editor
        initJsonEditor('{{ url_for("save_action_json", slug=action.slug) }}');
    });

--- a/templates/actions/index.html
+++ b/templates/actions/index.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
-    <h2>Action Gallery</h2>
+    <h2>Action Library</h2>
    <div class="d-flex gap-1 align-items-center">
        <button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for actions without one"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
        <button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all actions"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for action in actions %}
    <div class="col" id="card-{{ action.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/action/{{ action.slug }}'">
@@ -102,71 +102,18 @@
        const itemNameText = document.getElementById('current-item-name');
        const stepProgressText = document.getElementById('current-step-progress');
        
-        const clientId = 'actions_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                    } catch (err) {}
-                }, 2000);
+                }, 1500);
            });
        }

@@ -183,68 +130,65 @@
            batchBtn.disabled = true;
            regenAllBtn.disabled = true;
            container.classList.remove('d-none');
-            
-            let completed = 0;
-            for (const item of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating Actions: ${completed + 1} / ${missing.length}`;
-                itemNameText.textContent = `Current: ${item.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');

+            // Phase 1: Queue all jobs upfront
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
+            for (const item of missing) {
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                try {
-                    // Random character for action preview
                    const genResp = await fetch(`/action/${item.slug}/generate`, {
                        method: 'POST',
-                        body: new URLSearchParams({ 
-                            'action': 'replace', 
-                            'client_id': clientId,
-                            'character_slug': '__random__' 
-                        }),
+                        body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    if (genData.job_id) jobs.push({ item, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${item.name}:`, err);
+                }
+            }

-                    await waitForCompletion(currentPromptId);
+            // Phase 2: Poll all concurrently
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;

-                    const finResp = await fetch(`/action/${item.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
                        const img = document.getElementById(`img-${item.slug}`);
                        const noImgSpan = document.getElementById(`no-img-${item.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
-                        }
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                        if (noImgSpan) noImgSpan.classList.add('d-none');
                    }
                } catch (err) {
                    console.error(`Failed for ${item.name}:`, err);
                }
                completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));

            progressBar.style.width = '100%';
            progressBar.textContent = '100%';
-            statusText.textContent = "Batch Action Generation Complete!";
-            itemNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Action Generation Complete!';
+            itemNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
            taskProgressBar.style.width = '0%';
            taskProgressBar.textContent = '';
            batchBtn.disabled = false;
            regenAllBtn.disabled = false;
-            setTimeout(() => { container.classList.add('d-none'); }, 5000);
+            setTimeout(() => container.classList.add('d-none'), 5000);
        }

        batchBtn.addEventListener('click', async () => {
--- a/templates/checkpoints/detail.html
+++ b/templates/checkpoints/detail.html
@@ -47,7 +47,8 @@
                 data-bs-toggle="modal" data-bs-target="#imageModal"
                 onclick="showImage(this.querySelector('img') ? this.querySelector('img').src : '')">
                {% if ckpt.image_path %}
-                <img src="{{ url_for('static', filename='uploads/' + ckpt.image_path) }}" alt="{{ ckpt.name }}" class="img-fluid">
+                <img src="{{ url_for('static', filename='uploads/' + ckpt.image_path) }}" alt="{{ ckpt.name }}" class="img-fluid"
+                     data-preview-path="{{ ckpt.image_path }}">
                {% else %}
                <div class="d-flex align-items-center justify-content-center bg-light" style="height: 400px;">
                    <span class="text-muted">No Image Attached</span>
@@ -89,39 +90,22 @@
            </div>
        </div>

-        {% if preview_image %}
-        <div class="card mb-4 border-success">
-            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center p-2">
-                <small>Latest Preview</small>
-                <form action="{{ url_for('replace_checkpoint_cover_from_preview', slug=ckpt.slug) }}" method="post" class="m-0">
-                    <button type="submit" class="btn btn-sm btn-outline-light">Replace Cover</button>
-                </form>
-            </div>
-            <div class="card-body p-0">
-                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;"
-                     data-bs-toggle="modal" data-bs-target="#imageModal"
-                     onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) }}" alt="Preview" class="img-fluid">
-                </div>
-            </div>
-        </div>
-        {% else %}
-        <div class="card mb-4 border-secondary d-none" id="preview-card">
-            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center p-2">
-                <small>Latest Preview</small>
+        <div class="card mb-4 {% if preview_image %}border-success{% else %}border-secondary d-none{% endif %}" id="preview-card">
+            <div class="card-header {% if preview_image %}bg-success{% else %}bg-secondary{% endif %} text-white d-flex justify-content-between align-items-center p-2" id="preview-card-header">
+                <small>Selected Preview</small>
                <form action="{{ url_for('replace_checkpoint_cover_from_preview', slug=ckpt.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" disabled>Replace Cover</button>
+                    <input type="hidden" name="preview_path" id="preview-path" value="{{ preview_image or '' }}">
+                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" {% if not preview_image %}disabled{% endif %}>Replace Cover</button>
                </form>
            </div>
            <div class="card-body p-0">
                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;"
                     data-bs-toggle="modal" data-bs-target="#imageModal"
-                     onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="" alt="Preview" class="img-fluid">
+                     onclick="showImage(this.querySelector('img') ? this.querySelector('img').src : '')">
+                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) if preview_image else '' }}" alt="Preview" class="img-fluid">
                </div>
            </div>
        </div>
-        {% endif %}
    </div>

    <div class="col-md-8">
@@ -131,7 +115,7 @@
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
-                <a href="{{ url_for('checkpoints_index') }}" class="btn btn-outline-secondary">Back to Gallery</a>
+                <a href="{{ url_for('checkpoints_index') }}" class="btn btn-outline-secondary">Back to Library</a>
            </div>
        </div>

@@ -238,6 +222,7 @@
                        <img src="{{ url_for('static', filename='uploads/' + img) }}"
                             class="img-fluid rounded"
                             style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
+                             data-preview-path="{{ img }}"
                             onclick="showImage(this.src)"
                             data-bs-toggle="modal" data-bs-target="#imageModal">
                    </div>
@@ -259,54 +244,38 @@
        const progressContainer = document.getElementById('progress-container');
        const progressLabel = document.getElementById('progress-label');
        const previewCard = document.getElementById('preview-card');
+        const previewCardHeader = document.getElementById('preview-card-header');
        const previewImg = document.getElementById('preview-img');
+        const previewPath = document.getElementById('preview-path');
+        const replaceBtn = document.getElementById('replace-cover-btn');

-        const clientId = 'checkpoint_detail_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
+        function selectPreview(relativePath, imageUrl) {
+            if (!relativePath) return;
+            previewImg.src = imageUrl;
+            previewPath.value = relativePath;
+            replaceBtn.disabled = false;
+            previewCard.classList.remove('d-none');
+            previewCardHeader.classList.replace('bg-secondary', 'bg-success');
+            previewCard.classList.replace('border-secondary', 'border-success');
+        }

-        const nodeNames = {
-            "3": "Sampling", "11": "Face Detailing", "13": "Hand Detailing",
-            "4": "Loading Models", "16": "Character LoRA", "17": "Outfit LoRA",
-            "18": "Action LoRA", "19": "Style/Detailer LoRA", "8": "Decoding Image", "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
-        let resolveCompletion = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const q = msg.data.status.exec_info.queue_remaining;
-                    if (q > 0) progressLabel.textContent = `Queue position: ${q}`;
-                }
-            } else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const percent = Math.round((msg.data.value / msg.data.max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            } else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    progressLabel.textContent = nodeNames[nodeId] || 'Processing...';
-                }
-            }
+        document.addEventListener('click', e => {
+            const img = e.target.closest('img[data-preview-path]');
+            if (img) selectPreview(img.dataset.previewPath, img.src);
        });

-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => { clearInterval(pollInterval); resolve(); };
-                resolveCompletion = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') checkResolve();
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') progressLabel.textContent = 'Generating…';
+                        else progressLabel.textContent = 'Queued…';
                    } catch (err) {}
-                }, 2000);
+                }, 1500);
            });
        }

@@ -314,76 +283,29 @@
            const submitter = e.submitter;
            if (!submitter || submitter.value !== 'preview') return;
            e.preventDefault();
-
            const formData = new FormData(form);
            formData.append('action', 'preview');
-            formData.append('client_id', clientId);
-
            progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
            try {
                const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const data = await response.json();
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
-                }
-
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-
-                await waitForCompletion(currentPromptId);
-                await finalizeGeneration(currentPromptId);
-                currentPromptId = null;
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
+                if (data.error) { alert('Error: ' + data.error); progressContainer.classList.add('d-none'); return; }
+                const jobResult = await waitForJob(data.job_id);
+                if (jobResult.result?.image_url) selectPreview(jobResult.result.relative_path, jobResult.result.image_url);
+            } catch (err) { console.error(err); alert('Generation failed: ' + err.message); }
+            finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
        });

-        async function finalizeGeneration(promptId) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/checkpoint/{{ ckpt.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');
-
-            try {
-                const response = await fetch(url, { method: 'POST', body: formData });
-                const data = await response.json();
-                if (data.success) {
-                    previewImg.src = data.image_url;
-                    if (previewCard) previewCard.classList.remove('d-none');
-                    const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) replaceBtn.disabled = false;
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            } finally {
-                progressContainer.classList.add('d-none');
-            }
-        }
-
        // Batch: Generate All Characters
        const allCharacters = [
            {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
            {% endfor %}
        ];
-        const finalizeBaseUrl = '/checkpoint/{{ ckpt.slug }}/finalize_generation';

        let stopBatch = false;
        const generateAllBtn = document.getElementById('generate-all-btn');
@@ -392,7 +314,7 @@
        const batchLabel = document.getElementById('batch-label');
        const batchBar = document.getElementById('batch-bar');

-        function addToPreviewGallery(imageUrl, charName) {
+        function addToPreviewGallery(imageUrl, relativePath, charName) {
            const gallery = document.getElementById('preview-gallery');
            const placeholder = document.getElementById('gallery-empty');
            if (placeholder) placeholder.remove();
@@ -401,6 +323,7 @@
            col.innerHTML = `<div class="position-relative">
                <img src="${imageUrl}" class="img-fluid rounded"
                     style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
+                     data-preview-path="${relativePath}"
                     onclick="showImage(this.src)"
                     data-bs-toggle="modal" data-bs-target="#imageModal"
                     title="${charName}">
@@ -420,52 +343,35 @@
            batchProgress.classList.remove('d-none');
            bootstrap.Tab.getOrCreateInstance(document.getElementById('previews-tab')).show();

-            for (let i = 0; i < allCharacters.length; i++) {
+            // Phase 1: submit all jobs immediately
+            const pending = [];
+            for (const char of allCharacters) {
                if (stopBatch) break;
-                const char = allCharacters[i];
-                batchBar.style.width = `${Math.round((i / allCharacters.length) * 100)}%`;
-                batchLabel.textContent = `Generating ${char.name} (${i + 1} / ${allCharacters.length})`;
-
-                const genForm = document.getElementById('generate-form');
                const fd = new FormData();
                fd.append('character_slug', char.slug);
                fd.append('action', 'preview');
-                fd.append('client_id', clientId);
-
                try {
-                    progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
-
-                    const resp = await fetch(genForm.getAttribute('action'), {
+                    const resp = await fetch(form.getAttribute('action'), {
                        method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const data = await resp.json();
-                    if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
-                        if (previewCard) previewCard.classList.remove('d-none');
-                    }
-                    currentPromptId = null;
-                } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
-                } finally {
-                    progressContainer.classList.add('d-none');
-                }
+                    if (!data.error) pending.push({ char, jobId: data.job_id });
+                } catch (err) { console.error(`Submit error for ${char.name}:`, err); }
            }

+            // Phase 2: poll all in parallel
+            batchLabel.textContent = `0 / ${pending.length} complete`;
+            let done = 0;
+            const total = pending.length;
+            await Promise.all(pending.map(({ char, jobId }) =>
+                waitForJob(jobId).then(result => {
+                    done++;
+                    batchBar.style.width = `${Math.round((done / total) * 100)}%`;
+                    batchLabel.textContent = `${done} / ${total} complete`;
+                    if (result.result?.image_url) addToPreviewGallery(result.result.image_url, result.result.relative_path, char.name);
+                }).catch(err => { done++; console.error(`Failed for ${char.name}:`, err); })
+            ));
+
            batchBar.style.width = '100%';
            batchLabel.textContent = stopBatch ? 'Stopped.' : 'Complete!';
            generateAllBtn.disabled = false;
@@ -476,7 +382,7 @@
        stopAllBtn.addEventListener('click', () => {
            stopBatch = true;
            stopAllBtn.classList.add('d-none');
-            batchLabel.textContent = 'Stopping after current generation...';
+            batchLabel.textContent = 'Stopping after current submissions...';
        });

        // JSON Editor
--- a/templates/checkpoints/index.html
+++ b/templates/checkpoints/index.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
-    <h2>Checkpoint Gallery</h2>
+    <h2>Checkpoint Library</h2>
    <div class="d-flex gap-1 align-items-center">
        <button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for checkpoints without one"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
        <button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all checkpoints"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
@@ -44,7 +44,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for ckpt in checkpoints %}
    <div class="col" id="card-{{ ckpt.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/checkpoint/{{ ckpt.slug }}'">
@@ -84,55 +84,20 @@
        const ckptNameText = document.getElementById('current-ckpt-name');
        const stepProgressText = document.getElementById('current-step-progress');

-        const clientId = 'checkpoints_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
+        let currentJobId = null;

-        const nodeNames = {
-            "3": "Sampling", "11": "Face Detailing", "13": "Hand Detailing",
-            "4": "Loading Models", "16": "Character LoRA", "17": "Outfit LoRA",
-            "18": "Action LoRA", "19": "Style/Detailer LoRA", "8": "Decoding", "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const percent = Math.round((msg.data.value / msg.data.max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            } else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || 'Processing...';
-                    stepProgressText.textContent = '';
-                    if (nodeId !== '3') {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => { clearInterval(pollInterval); resolve(); };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') checkResolve();
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                    } catch (err) {}
-                }, 2000);
+                }, 1500);
            });
        }

@@ -157,36 +122,32 @@
                progressBar.textContent = `${percent}%`;
                statusText.textContent = `Batch Generating: ${completed + 1} / ${missing.length}`;
                ckptNameText.textContent = `Current: ${ckpt.name}`;
-                nodeStatus.textContent = 'Queuing...';
+                nodeStatus.textContent = 'Queuing…';
                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
+                taskProgressBar.textContent = '';
                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');

                try {
                    const genResp = await fetch(`/checkpoint/${ckpt.slug}/generate`, {
                        method: 'POST',
-                        body: new URLSearchParams({ 'client_id': clientId, 'character_slug': '__random__' }),
+                        body: new URLSearchParams({ 'character_slug': '__random__' }),
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    currentJobId = genData.job_id;

-                    await waitForCompletion(currentPromptId);
+                    const jobResult = await waitForJob(currentJobId);
+                    currentJobId = null;

-                    const finResp = await fetch(`/checkpoint/${ckpt.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
+                    if (jobResult.result && jobResult.result.image_url) {
                        const img = document.getElementById(`img-${ckpt.slug}`);
                        const noImgSpan = document.getElementById(`no-img-${ckpt.slug}`);
-                        if (img) { img.src = finData.image_url; img.classList.remove('d-none'); }
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                        if (noImgSpan) noImgSpan.classList.add('d-none');
                    }
                } catch (err) {
                    console.error(`Failed for ${ckpt.name}:`, err);
+                    currentJobId = null;
                }
                completed++;
            }
@@ -196,7 +157,6 @@
            statusText.textContent = 'Batch Generation Complete!';
            ckptNameText.textContent = '';
            nodeStatus.textContent = 'Done';
-            stepProgressText.textContent = '';
            taskProgressBar.style.width = '0%';
            taskProgressBar.textContent = '';
            batchBtn.disabled = false;
--- a/templates/detail.html
+++ b/templates/detail.html
@@ -17,7 +17,7 @@
        <div class="card mb-4">
            <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
                {% if character.image_path %}
-                <img src="{{ url_for('static', filename='uploads/' + character.image_path) }}" alt="{{ character.name }}" class="img-fluid">
+                <img src="{{ url_for('static', filename='uploads/' + character.image_path) }}" alt="{{ character.name }}" class="img-fluid" data-preview-path="{{ character.image_path }}">
                {% else %}
                <span class="text-muted">No Image Attached</span>
                {% endif %}
@@ -44,35 +44,20 @@
            </div>
        </div>

-        {% if preview_image %}
-        <div class="card mb-4 border-success">
-            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
-                <span>Latest Preview</span>
-                <form action="{{ url_for('replace_cover_from_preview', slug=character.slug) }}" method="post" class="m-0">
-                    <button type="submit" class="btn btn-sm btn-outline-light">Replace Cover</button>
-                </form>
-            </div>
-            <div class="card-body p-0">
-                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) }}" alt="Preview" class="img-fluid">
-                </div>
-            </div>
-        </div>
-        {% else %}
-        <div class="card mb-4 border-secondary d-none" id="preview-card">
-            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
-                <span>Latest Preview</span>
+        <div class="card mb-4 {% if preview_image %}border-success{% else %}border-secondary d-none{% endif %}" id="preview-card">
+            <div class="card-header {% if preview_image %}bg-success{% else %}bg-secondary{% endif %} text-white d-flex justify-content-between align-items-center" id="preview-card-header">
+                <span>Selected Preview</span>
                <form action="{{ url_for('replace_cover_from_preview', slug=character.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" disabled>Replace Cover</button>
+                    <input type="hidden" name="preview_path" id="preview-path" value="{{ preview_image or '' }}">
+                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" {% if not preview_image %}disabled{% endif %}>Replace Cover</button>
                </form>
            </div>
            <div class="card-body p-0">
                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="" alt="Preview" class="img-fluid">
+                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) if preview_image else '' }}" alt="Preview" class="img-fluid">
                </div>
            </div>
        </div>
-        {% endif %}
        
        <div class="card mb-4">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
@@ -103,7 +88,7 @@
                <h1 class="mb-0">{{ character.name }}</h1>
                <a href="{{ url_for('edit_character', slug=character.slug) }}" class="btn btn-sm btn-link text-decoration-none">Edit Profile</a>
            </div>
-            <a href="/" class="btn btn-outline-secondary">Back to Gallery</a>
+            <a href="/" class="btn btn-outline-secondary">Back to Library</a>
        </div>

        <!-- Outfit Switcher -->
@@ -227,184 +212,90 @@
        const progressLabel = document.getElementById('progress-label');
        const previewCard = document.getElementById('preview-card');
        const previewImg = document.getElementById('preview-img');
-        
-        // Generate a unique client ID
-        const clientId = 'detail_view_' + Math.random().toString(36).substring(2, 15);
+        const previewPath = document.getElementById('preview-path');
+        const replaceBtn = document.getElementById('replace-cover-btn');
+        const previewHeader = document.getElementById('preview-card-header');

-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
+        let currentJobId = null;

-        let currentPromptId = null;
-        let currentAction = null;
+        function selectPreview(relativePath, imageUrl) {
+            if (!relativePath) return;
+            previewImg.src = imageUrl;
+            previewPath.value = relativePath;
+            replaceBtn.disabled = false;
+            previewCard.classList.remove('d-none');
+            previewHeader.classList.replace('bg-secondary', 'bg-success');
+            previewCard.classList.replace('border-secondary', 'border-success');
+        }

-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
+        // Clicking any image with data-preview-path selects it into the preview pane
+        document.addEventListener('click', e => {
+            const img = e.target.closest('img[data-preview-path]');
+            if (img) selectPreview(img.dataset.previewPath, img.src);
        });

-        let resolveCompletion = null;
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            console.log('Finished via Polling');
-                            checkResolve();
+                        if (data.status === 'done') {
+                            clearInterval(poll);
+                            resolve(data);
+                        } else if (data.status === 'failed' || data.status === 'removed') {
+                            clearInterval(poll);
+                            reject(new Error(data.error || 'Job failed'));
+                        } else if (data.status === 'processing') {
+                            progressLabel.textContent = 'Generating…';
+                        } else {
+                            progressLabel.textContent = 'Queued…';
                        }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
            });
        }

        form.addEventListener('submit', async (e) => {
-            // Only intercept generate actions
            const submitter = e.submitter;
-            if (!submitter || submitter.value !== 'preview') {
-                return; 
-            }
-            
+            if (!submitter || submitter.value !== 'preview') return;
            e.preventDefault();
-            
-            currentAction = submitter.value;
+
            const formData = new FormData(form);
-            formData.append('action', currentAction);
-            formData.append('client_id', clientId);
-            
-            // UI Reset
+            formData.append('action', 'preview');
+
            progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-            
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
+
            try {
                const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
-                });
-                
-                const data = await response.json();
-                
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
-                }
-                
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                
-                // Wait for completion (WebSocket or Polling)
-                await waitForCompletion(currentPromptId);
-                
-                // Finalize
-                finalizeGeneration(currentPromptId, currentAction);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
-        });
-        
-        async function finalizeGeneration(promptId, action) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/character/{{ character.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');  // Always save as preview
-            
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    body: formData
+                    method: 'POST', body: formData,
+                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const data = await response.json();
-                
-                if (data.success) {
-                    // Update preview image
-                    previewImg.src = data.image_url;
-                    if (previewCard) previewCard.classList.remove('d-none');
-                    
-                    // Enable the replace cover button if it exists
-                    const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        // Check if there's a form to update
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/character/{{ character.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
+                if (data.error) { alert('Error: ' + data.error); return; }
+
+                currentJobId = data.job_id;
+                progressLabel.textContent = 'Queued…';
+                const jobResult = await waitForJob(currentJobId);
+                currentJobId = null;
+
+                if (jobResult.result?.image_url) {
+                    selectPreview(jobResult.result.relative_path, jobResult.result.image_url);
                }
            } catch (err) {
                console.error(err);
-                alert('Finalize request failed');
+                alert('Generation failed: ' + err.message);
            } finally {
                progressContainer.classList.add('d-none');
+                progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
            }
-        }
+        });
    });
-    
-    // Image modal function
+
    function showImage(src) {
        document.getElementById('modalImage').src = src;
    }
--- a/templates/detailers/detail.html
+++ b/templates/detailers/detail.html
@@ -56,7 +56,7 @@
        <div class="card mb-4">
            <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
                {% if detailer.image_path %}
-                <img src="{{ url_for('static', filename='uploads/' + detailer.image_path) }}" alt="{{ detailer.name }}" class="img-fluid">
+                <img src="{{ url_for('static', filename='uploads/' + detailer.image_path) }}" alt="{{ detailer.name }}" class="img-fluid" data-preview-path="{{ detailer.image_path }}">
                {% else %}
                <div class="d-flex align-items-center justify-content-center bg-light" style="height: 400px;">
                    <span class="text-muted">No Image Attached</span>
@@ -121,35 +121,20 @@
            </div>
        </div>

-        {% if preview_image %}
-        <div class="card mb-4 border-success">
-            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center p-2">
-                <small>Latest Preview</small>
+        <div class="card mb-4 {% if preview_image %}border-success{% else %}border-secondary d-none{% endif %}" id="preview-card">
+            <div class="card-header {% if preview_image %}bg-success{% else %}bg-secondary{% endif %} text-white d-flex justify-content-between align-items-center p-2" id="preview-card-header">
+                <small>Selected Preview</small>
                <form action="{{ url_for('replace_detailer_cover_from_preview', slug=detailer.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn">Replace Cover</button>
+                    <input type="hidden" name="preview_path" id="preview-path" value="{{ preview_image or '' }}">
+                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" {% if not preview_image %}disabled{% endif %}>Replace Cover</button>
                </form>
            </div>
            <div class="card-body p-0">
                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) }}" alt="Preview" class="img-fluid">
+                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) if preview_image else '' }}" alt="Preview" class="img-fluid">
                </div>
            </div>
        </div>
-        {% else %}
-        <div class="card mb-4 border-secondary d-none" id="preview-card">
-            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center p-2">
-                <small>Latest Preview</small>
-                <form action="{{ url_for('replace_detailer_cover_from_preview', slug=detailer.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" disabled>Replace Cover</button>
-                </form>
-            </div>
-            <div class="card-body p-0">
-                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="" alt="Preview" class="img-fluid">
-                </div>
-            </div>
-        </div>
-        {% endif %}
    </div>

    <div class="col-md-8">
@@ -162,7 +147,7 @@
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
-                <a href="{{ url_for('detailers_index') }}" class="btn btn-outline-secondary">Back to Gallery</a>
+                <a href="{{ url_for('detailers_index') }}" class="btn btn-outline-secondary">Back to Library</a>
            </div>
        </div>

@@ -257,7 +242,8 @@
                             class="img-fluid rounded"
                             style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
                             onclick="showImage(this.src)"
-                             data-bs-toggle="modal" data-bs-target="#imageModal">
+                             data-bs-toggle="modal" data-bs-target="#imageModal"
+                             data-preview-path="{{ img }}">
                    </div>
                    {% else %}
                    <div class="col-12 text-muted small" id="gallery-empty">No previews yet. Generate some!</div>
@@ -283,185 +269,76 @@
        const progressLabel = document.getElementById('progress-label');
        const previewCard = document.getElementById('preview-card');
        const previewImg = document.getElementById('preview-img');
+        const previewPath = document.getElementById('preview-path');
+        const replaceBtn = document.getElementById('replace-cover-btn');
+        const previewHeader = document.getElementById('preview-card-header');
        const charSelect = document.getElementById('character_select');
        const charContext = document.getElementById('character-context');
        const actionSelect = document.getElementById('action_select');
-        
-        // Toggle character context info
+
        charSelect.addEventListener('change', () => {
-            if (charSelect.value && charSelect.value !== '__random__') {
-                charContext.classList.remove('d-none');
-            } else {
-                charContext.classList.add('d-none');
-            }
+            charContext.classList.toggle('d-none', !charSelect.value || charSelect.value === '__random__');
        });

-        // Generate a unique client ID
-        const clientId = 'detailer_detail_' + Math.random().toString(36).substring(2, 15);
+        function selectPreview(relativePath, imageUrl) {
+            if (!relativePath) return;
+            previewImg.src = imageUrl;
+            previewPath.value = relativePath;
+            replaceBtn.disabled = false;
+            previewCard.classList.remove('d-none');
+            previewHeader.classList.replace('bg-secondary', 'bg-success');
+            previewCard.classList.replace('border-secondary', 'border-success');
+        }

-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
-        let currentAction = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
+        document.addEventListener('click', e => {
+            const img = e.target.closest('img[data-preview-path]');
+            if (img) selectPreview(img.dataset.previewPath, img.src);
        });

-        let resolveCompletion = null;
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            console.log('Finished via Polling');
-                            checkResolve();
-                        }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else progressLabel.textContent = data.status === 'processing' ? 'Generating…' : 'Queued…';
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
            });
        }

        form.addEventListener('submit', async (e) => {
            const submitter = e.submitter;
            if (!submitter || submitter.value !== 'preview') return;
-            
            e.preventDefault();
-            
-            currentAction = submitter.value;
            const formData = new FormData(form);
-            formData.append('action', currentAction);
-            formData.append('client_id', clientId);
-            
+            formData.append('action', 'preview');
            progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-            
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
            try {
                const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
-                
                const data = await response.json();
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
+                if (data.error) { alert('Error: ' + data.error); return; }
+                progressLabel.textContent = 'Queued…';
+                const jobResult = await waitForJob(data.job_id);
+                if (jobResult.result?.image_url) {
+                    selectPreview(jobResult.result.relative_path, jobResult.result.image_url);
+                    addToPreviewGallery(jobResult.result.image_url, jobResult.result.relative_path, '');
                }
-                
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                
-                await waitForCompletion(currentPromptId);
-                finalizeGeneration(currentPromptId, currentAction);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
+            } catch (err) { console.error(err); alert('Generation failed: ' + err.message); }
+            finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
        });
-        
-        async function finalizeGeneration(promptId, action) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/detailer/{{ detailer.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');  // Always save as preview
-            
-            try {
-                const response = await fetch(url, { method: 'POST', body: formData });
-                const data = await response.json();
-                
-                if (data.success) {
-                    previewImg.src = data.image_url;
-                    if (previewCard) previewCard.classList.remove('d-none');
-                    
-                    const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/detailer/{{ detailer.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            } finally {
-                progressContainer.classList.add('d-none');
-            }
-        }

-        // Batch: Generate All Characters
        const allCharacters = [
            {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
            {% endfor %}
        ];
-        const finalizeBaseUrl = '/detailer/{{ detailer.slug }}/finalize_generation';
-
        let stopBatch = false;
        const generateAllBtn = document.getElementById('generate-all-btn');
        const stopAllBtn = document.getElementById('stop-all-btn');
@@ -469,7 +346,7 @@
        const batchLabel = document.getElementById('batch-label');
        const batchBar = document.getElementById('batch-bar');

-        function addToPreviewGallery(imageUrl, charName) {
+        function addToPreviewGallery(imageUrl, relativePath, charName) {
            const gallery = document.getElementById('preview-gallery');
            const placeholder = document.getElementById('gallery-empty');
            if (placeholder) placeholder.remove();
@@ -480,8 +357,9 @@
                     style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
                     onclick="showImage(this.src)"
                     data-bs-toggle="modal" data-bs-target="#imageModal"
+                     data-preview-path="${relativePath}"
                     title="${charName}">
-                <div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white p-1 rounded-bottom" style="font-size: 0.7rem; line-height: 1.2;">${charName}</div>
+                ${charName ? `<div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white p-1 rounded-bottom" style="font-size: 0.7rem; line-height: 1.2;">${charName}</div>` : ''}
            </div>`;
            gallery.insertBefore(col, gallery.firstChild);
            const badge = document.querySelector('#previews-tab .badge');
@@ -497,13 +375,12 @@
            batchProgress.classList.remove('d-none');
            bootstrap.Tab.getOrCreateInstance(document.getElementById('previews-tab')).show();

-            for (let i = 0; i < allCharacters.length; i++) {
+            const genForm = document.getElementById('generate-form');
+            const formAction = genForm.getAttribute('action');
+            batchLabel.textContent = 'Queuing all characters…';
+            const pending = [];
+            for (const char of allCharacters) {
                if (stopBatch) break;
-                const char = allCharacters[i];
-                batchBar.style.width = `${Math.round((i / allCharacters.length) * 100)}%`;
-                batchLabel.textContent = `Generating ${char.name} (${i + 1} / ${allCharacters.length})`;
-
-                const genForm = document.getElementById('generate-form');
                const fd = new FormData();
                genForm.querySelectorAll('input[name="include_field"]:checked').forEach(cb => fd.append('include_field', cb.value));
                fd.append('character_slug', char.slug);
@@ -511,42 +388,26 @@
                fd.append('extra_positive', document.getElementById('extra_positive').value);
                fd.append('extra_negative', document.getElementById('extra_negative').value);
                fd.append('action', 'preview');
-                fd.append('client_id', clientId);
-
                try {
-                    progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
-
-                    const resp = await fetch(genForm.getAttribute('action'), {
-                        method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
-                    });
+                    const resp = await fetch(formAction, { method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                    const data = await resp.json();
-                    if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
-                        if (previewCard) previewCard.classList.remove('d-none');
-                    }
-                    currentPromptId = null;
-                } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
-                } finally {
-                    progressContainer.classList.add('d-none');
-                }
+                    if (!data.error) pending.push({ char, jobId: data.job_id });
+                } catch (err) { console.error(`Submit error for ${char.name}:`, err); }
            }

+            batchBar.style.width = '0%';
+            let done = 0;
+            const total = pending.length;
+            batchLabel.textContent = `0 / ${total} complete`;
+            await Promise.all(pending.map(({ char, jobId }) =>
+                waitForJob(jobId).then(result => {
+                    done++;
+                    batchBar.style.width = `${Math.round((done / total) * 100)}%`;
+                    batchLabel.textContent = `${done} / ${total} complete`;
+                    if (result.result?.image_url) addToPreviewGallery(result.result.image_url, result.result.relative_path, char.name);
+                }).catch(err => { done++; console.error(`Failed for ${char.name}:`, err); })
+            ));
+
            batchBar.style.width = '100%';
            batchLabel.textContent = stopBatch ? 'Stopped.' : 'Complete!';
            generateAllBtn.disabled = false;
@@ -557,10 +418,9 @@
        stopAllBtn.addEventListener('click', () => {
            stopBatch = true;
            stopAllBtn.classList.add('d-none');
-            batchLabel.textContent = 'Stopping after current generation...';
+            batchLabel.textContent = 'Stopping…';
        });

-        // JSON Editor
        initJsonEditor('{{ url_for("save_detailer_json", slug=detailer.slug) }}');
    });

--- a/templates/detailers/index.html
+++ b/templates/detailers/index.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
-    <h2>Detailer Gallery</h2>
+    <h2>Detailer Library</h2>
    <div class="d-flex gap-1 align-items-center">
        <button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for detailers without one"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
        <button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all detailers"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for detailer in detailers %}
    <div class="col" id="card-{{ detailer.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/detailer/{{ detailer.slug }}'">
@@ -104,72 +104,18 @@
        const detailerNameText = document.getElementById('current-detailer-name');
        const stepProgressText = document.getElementById('current-step-progress');
        
-        const clientId = 'detailers_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                    } catch (err) {}
-                }, 2000);
+                }, 1500);
            });
        }

@@ -186,67 +132,66 @@
            batchBtn.disabled = true;
            regenAllBtn.disabled = true;
            container.classList.remove('d-none');
-            
-            let completed = 0;
-            for (const item of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating Detailers: ${completed + 1} / ${missing.length}`;
-                detailerNameText.textContent = `Current: ${item.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');

+            // Phase 1: Queue all jobs upfront
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
+            for (const item of missing) {
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                try {
                    const genResp = await fetch(`/detailer/${item.slug}/generate`, {
                        method: 'POST',
-                        body: new URLSearchParams({ 
-                            'action': 'replace', 
-                            'client_id': clientId,
-                            'character_slug': '__random__' 
-                        }),
+                        body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    if (genData.job_id) jobs.push({ item, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${item.name}:`, err);
+                }
+            }

-                    await waitForCompletion(currentPromptId);
+            // Phase 2: Poll all concurrently
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;

-                    const finResp = await fetch(`/detailer/${item.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
                        const img = document.getElementById(`img-${item.slug}`);
                        const noImgSpan = document.getElementById(`no-img-${item.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
-                        }
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                        if (noImgSpan) noImgSpan.classList.add('d-none');
                    }
                } catch (err) {
                    console.error(`Failed for ${item.name}:`, err);
                }
                completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));

            progressBar.style.width = '100%';
            progressBar.textContent = '100%';
-            statusText.textContent = "Batch Detailer Generation Complete!";
-            detailerNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Detailer Generation Complete!';
+            detailerNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
+            stepProgressText.textContent = '';
            taskProgressBar.style.width = '0%';
            taskProgressBar.textContent = '';
            batchBtn.disabled = false;
            regenAllBtn.disabled = false;
-            setTimeout(() => { container.classList.add('d-none'); }, 5000);
+            setTimeout(() => container.classList.add('d-none'), 5000);
        }

        batchBtn.addEventListener('click', async () => {
--- a/templates/gallery.html
+++ b/templates/gallery.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="d-flex align-items-center justify-content-between mb-3">
-  <h4 class="mb-0">Gallery
+  <h4 class="mb-0">Image Gallery
    <span class="text-muted fs-6 fw-normal ms-2">{{ total }} image{{ 's' if total != 1 else '' }}</span>
  </h4>
 </div>
--- a/templates/generator.html
+++ b/templates/generator.html
@@ -310,73 +310,24 @@
        const placeholder  = document.getElementById('placeholder-text');
        const resultFooter = document.getElementById('result-footer');

-        const clientId = 'generator_view_' + Math.random().toString(36).substring(2, 15);
-        const socket   = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
+        let currentJobId = null;
+        let stopRequested = false;

-        const nodeNames = {
-            "3": "Sampling", "4": "Loading Models", "8": "Decoding Image", "9": "Saving Image",
-            "11": "Face Detailing", "13": "Hand Detailing",
-            "16": "Character LoRA", "17": "Outfit LoRA", "18": "Action LoRA", "19": "Style/Detailer LoRA"
-        };
-
-        let currentPromptId  = null;
-        let resolveCompletion = null;
-        let stopRequested    = false;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const q = msg.data.status.exec_info.queue_remaining;
-                    if (q > 0) progressLbl.textContent = `Queue position: ${q}`;
-                }
-            } else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const pct = Math.round((msg.data.value / msg.data.max) * 100);
-                progressBar.style.width = `${pct}%`;
-                progressBar.textContent = `${pct}%`;
-            } else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                if (msg.data.node === null) {
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    progressLbl.textContent = nodeNames[msg.data.node] || 'Processing...';
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const done = () => { clearInterval(poll); resolve(); };
-                resolveCompletion = done;
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
                const poll = setInterval(async () => {
                    try {
-                        const r = await fetch(`/check_status/${promptId}`);
-                        if ((await r.json()).status === 'finished') done();
-                    } catch (_) {}
-                }, 2000);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
+                        const data = await resp.json();
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') progressLbl.textContent = 'Generating…';
+                        else progressLbl.textContent = 'Queued…';
+                    } catch (err) {}
+                }, 1500);
            });
        }

-        async function finalizeGeneration(slug, promptId) {
-            progressLbl.textContent = 'Saving image...';
-            try {
-                const r    = await fetch(`/generator/finalize/${slug}/${promptId}`, { method: 'POST' });
-                const data = await r.json();
-                if (data.success) {
-                    resultImg.src = data.image_url;
-                    resultImg.parentElement.classList.remove('d-none');
-                    if (placeholder) placeholder.classList.add('d-none');
-                    resultFooter.classList.remove('d-none');
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            }
-        }
-
        function setGeneratingState(active) {
            generateBtn.disabled = active;
            endlessBtn.disabled  = active;
@@ -388,12 +339,11 @@
            if (document.getElementById('lucky-dip').checked) applyLuckyDip();

            progressCont.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
            progressLbl.textContent = label;

            const fd = new FormData(form);
-            fd.append('client_id', clientId);

            const resp = await fetch(form.action, {
                method: 'POST', body: fd,
@@ -402,15 +352,19 @@
            const data = await resp.json();
            if (data.error) throw new Error(data.error);

-            currentPromptId = data.prompt_id;
-            progressLbl.textContent = 'Queued...';
-            progressBar.style.width = '100%';
-            progressBar.textContent = 'Queued';
-            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            currentJobId = data.job_id;
+            progressLbl.textContent = 'Queued…';

-            await waitForCompletion(currentPromptId);
-            await finalizeGeneration(document.getElementById('character').value, currentPromptId);
-            currentPromptId = null;
+            const jobResult = await waitForJob(currentJobId);
+            currentJobId = null;
+
+            if (jobResult.result && jobResult.result.image_url) {
+                resultImg.src = jobResult.result.image_url;
+                resultImg.parentElement.classList.remove('d-none');
+                if (placeholder) placeholder.classList.add('d-none');
+                resultFooter.classList.remove('d-none');
+            }
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
        }

        async function runLoop(endless) {
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
-    <h2>Character Gallery</h2>
+    <h2>Character Library</h2>
    <div class="d-flex gap-1 align-items-center">
        <button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for characters without one"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
        <button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all characters"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
@@ -39,7 +39,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for char in characters %}
    <div class="col" id="card-{{ char.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/character/{{ char.slug }}'">
@@ -103,72 +103,18 @@
        const charNameText = document.getElementById('current-char-name');
        const stepProgressText = document.getElementById('current-step-progress');
        
-        const clientId = 'gallery_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    // Reset task bar for new node if it's not sampling
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                    } catch (err) {}
-                }, 2000);
+                }, 1500);
            });
        }

@@ -185,63 +131,66 @@
            batchBtn.disabled = true;
            regenAllBtn.disabled = true;
            container.classList.remove('d-none');
-            
-            let completed = 0;
-            for (const char of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating: ${completed + 1} / ${missing.length}`;
-                charNameText.textContent = `Current: ${char.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');

+            // Phase 1: Queue all jobs upfront so the page can be navigated away from
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
+            for (const char of missing) {
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                try {
                    const genResp = await fetch(`/character/${char.slug}/generate`, {
                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace', 'client_id': clientId }),
+                        body: new URLSearchParams({ action: 'replace' }),
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    if (genData.job_id) jobs.push({ item: char, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${char.name}:`, err);
+                }
+            }

-                    await waitForCompletion(currentPromptId);
+            // Phase 2: Poll all jobs concurrently; update UI as each finishes
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;

-                    const finResp = await fetch(`/character/${char.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
-                        const img = document.getElementById(`img-${char.slug}`);
-                        const noImgSpan = document.getElementById(`no-img-${char.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
-                        }
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
+                        const img = document.getElementById(`img-${item.slug}`);
+                        const noImgSpan = document.getElementById(`no-img-${item.slug}`);
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                        if (noImgSpan) noImgSpan.classList.add('d-none');
                    }
                } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
+                    console.error(`Failed for ${item.name}:`, err);
                }
                completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));

            progressBar.style.width = '100%';
            progressBar.textContent = '100%';
-            statusText.textContent = "Batch Complete!";
-            charNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Complete!';
+            charNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
+            stepProgressText.textContent = '';
            taskProgressBar.style.width = '0%';
            taskProgressBar.textContent = '';
            batchBtn.disabled = false;
            regenAllBtn.disabled = false;
-            setTimeout(() => { container.classList.add('d-none'); }, 5000);
+            setTimeout(() => container.classList.add('d-none'), 5000);
        }

        batchBtn.addEventListener('click', async () => {
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -6,7 +6,7 @@
    <title>GAZE</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
 </head>
@@ -26,9 +26,15 @@
                <div class="vr mx-1 d-none d-lg-block"></div>
                <a href="/create" class="btn btn-sm btn-outline-success">+ Character</a>
                <a href="/generator" class="btn btn-sm btn-outline-light">Generator</a>
-                <a href="/gallery" class="btn btn-sm btn-outline-light">Gallery</a>
+                <a href="/gallery" class="btn btn-sm btn-outline-light">Image Gallery</a>
                <a href="/settings" class="btn btn-sm btn-outline-light">Settings</a>
                <div class="vr mx-1 d-none d-lg-block"></div>
+                <!-- Queue indicator -->
+                <button id="queue-btn" class="btn btn-sm queue-btn" data-bs-toggle="modal" data-bs-target="#queueModal" title="Generation Queue">
+                    <span class="queue-icon">⏳</span>
+                    <span id="queue-count-badge" class="queue-badge d-none">0</span>
+                </button>
+                <div class="vr mx-1 d-none d-lg-block"></div>
                <!-- Service status indicators -->
                <span id="status-comfyui" class="service-status" title="ComfyUI" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="ComfyUI: checking…">
                    <span class="status-dot status-checking"></span>
@@ -42,19 +48,6 @@
        </div>
    </nav>

-    <div class="default-checkpoint-bar border-bottom mb-4">
-        <div class="container d-flex align-items-center gap-2 py-2">
-            <small class="text-muted text-nowrap">Default checkpoint:</small>
-            <select id="defaultCheckpointSelect" class="form-select form-select-sm" style="max-width: 320px;">
-                <option value="">— workflow default —</option>
-                {% for ckpt in all_checkpoints %}
-                <option value="{{ ckpt.checkpoint_path }}"{% if ckpt.checkpoint_path == default_checkpoint_path %} selected{% endif %}>{{ ckpt.name }}</option>
-                {% endfor %}
-            </select>
-            <small id="checkpointSaveStatus" class="text-muted" style="opacity:0;transition:opacity 0.5s">Saved</small>
-        </div>
-    </div>
-
    <div class="container">
        {% with messages = get_flashed_messages() %}
          {% if messages %}
@@ -94,26 +87,73 @@
  </div>
 </div>

+<!-- Generation Queue Modal -->
+<div class="modal fade" id="queueModal" tabindex="-1">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">
+          Generation Queue
+          <span id="queue-modal-count" class="badge bg-secondary ms-2">0</span>
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body p-0">
+        <div id="queue-empty-msg" class="text-center text-muted py-4">
+          <p class="mb-0">No jobs in queue.</p>
+        </div>
+        <ul id="queue-job-list" class="list-group list-group-flush d-none"></ul>
+      </div>
+      <div class="modal-footer">
+        <small class="text-muted me-auto">Jobs are processed sequentially. Close this window to continue browsing.</small>
+        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
-
-            const ckptSelect = document.getElementById('defaultCheckpointSelect');
-            const saveStatus = document.getElementById('checkpointSaveStatus');
-            if (ckptSelect) {
-                ckptSelect.addEventListener('change', () => {
-                    fetch('/set_default_checkpoint', {
-                        method: 'POST',
-                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
-                        body: 'checkpoint_path=' + encodeURIComponent(ckptSelect.value)
-                    }).then(() => {
-                        saveStatus.style.opacity = '1';
-                        setTimeout(() => { saveStatus.style.opacity = '0'; }, 1500);
-                    });
-                });
-            }
        });
+
+        // ---- Loaded checkpoint → ComfyUI tooltip ----
+        (function() {
+            let _loadedCheckpoint = null;
+            async function pollLoadedCheckpoint() {
+                try {
+                    const r = await fetch('/api/comfyui/loaded_checkpoint', { cache: 'no-store' });
+                    const data = await r.json();
+                    _loadedCheckpoint = data.checkpoint || null;
+                } catch {
+                    _loadedCheckpoint = null;
+                }
+                updateComfyTooltip();
+            }
+            function updateComfyTooltip() {
+                const el = document.getElementById('status-comfyui');
+                if (!el) return;
+                const dot = el.querySelector('.status-dot');
+                const online = dot && dot.classList.contains('status-ok');
+                let text = 'ComfyUI: ' + (online ? 'online' : 'offline');
+                if (_loadedCheckpoint) {
+                    const parts = _loadedCheckpoint.split(/[/\\]/);
+                    const name = parts[parts.length - 1].replace(/\.safetensors$/, '');
+                    text += '\n' + name;
+                }
+                el.setAttribute('data-bs-title', text);
+                el.setAttribute('title', text);
+                const tip = bootstrap.Tooltip.getInstance(el);
+                if (tip) tip.setContent({ '.tooltip-inner': text });
+            }
+            // Hook into the existing status polling to refresh tooltip after status changes
+            window._updateComfyTooltip = updateComfyTooltip;
+            document.addEventListener('DOMContentLoaded', () => {
+                pollLoadedCheckpoint();
+                setInterval(pollLoadedCheckpoint, 30000);
+            });
+        })();
    </script>
    <script>
    // ---- Resource delete modal (category galleries) ----
@@ -309,14 +349,15 @@
            if (!el) return;
            const dot = el.querySelector('.status-dot');
            dot.className = 'status-dot ' + (ok ? 'status-ok' : 'status-error');
+            if (id === 'status-comfyui' && window._updateComfyTooltip) {
+                window._updateComfyTooltip();
+                return;
+            }
            const tooltipText = label + ': ' + (ok ? 'online' : 'offline');
            el.setAttribute('data-bs-title', tooltipText);
            el.setAttribute('title', tooltipText);
-            // Refresh tooltip instance if already initialised
            const tip = bootstrap.Tooltip.getInstance(el);
-            if (tip) {
-                tip.setContent({ '.tooltip-inner': tooltipText });
-            }
+            if (tip) tip.setContent({ '.tooltip-inner': tooltipText });
        }

        async function pollService(svc) {
@@ -339,6 +380,148 @@
        });
    })();
    </script>
+    <script>
+    // ---- Generation Queue UI ----
+    (function() {
+        const badge = document.getElementById('queue-count-badge');
+        const modalCount = document.getElementById('queue-modal-count');
+        const jobList = document.getElementById('queue-job-list');
+        const emptyMsg = document.getElementById('queue-empty-msg');
+
+        const STATUS_LABELS = {
+            pending: { text: 'Pending', cls: 'text-muted' },
+            processing: { text: 'Generating…', cls: 'text-warning' },
+            paused: { text: 'Paused', cls: 'text-secondary' },
+            done: { text: 'Done', cls: 'text-success' },
+            failed: { text: 'Failed', cls: 'text-danger' },
+            removed: { text: 'Removed', cls: 'text-muted' },
+        };
+
+        function renderQueue(jobs) {
+            const activeJobs = jobs.filter(j => !['done', 'failed', 'removed'].includes(j.status));
+            const count = activeJobs.length;
+
+            // Update badge
+            if (count > 0) {
+                badge.textContent = count;
+                badge.classList.remove('d-none');
+                document.getElementById('queue-btn').classList.add('queue-btn-active');
+            } else {
+                badge.classList.add('d-none');
+                document.getElementById('queue-btn').classList.remove('queue-btn-active');
+            }
+
+            // Update modal count
+            if (modalCount) modalCount.textContent = jobs.length;
+
+            // Render job list
+            if (!jobList) return;
+            if (jobs.length === 0) {
+                jobList.classList.add('d-none');
+                if (emptyMsg) emptyMsg.classList.remove('d-none');
+                return;
+            }
+            jobList.classList.remove('d-none');
+            if (emptyMsg) emptyMsg.classList.add('d-none');
+
+            jobList.innerHTML = '';
+            jobs.forEach(job => {
+                const li = document.createElement('li');
+                li.className = 'list-group-item d-flex align-items-center gap-2 py-2';
+                li.id = `queue-job-${job.id}`;
+
+                const statusInfo = STATUS_LABELS[job.status] || { text: job.status, cls: 'text-muted' };
+
+                // Status indicator
+                const statusDot = document.createElement('span');
+                statusDot.className = `queue-status-dot queue-status-${job.status}`;
+                li.appendChild(statusDot);
+
+                // Label
+                const label = document.createElement('span');
+                label.className = 'flex-grow-1 small';
+                label.textContent = job.label;
+                li.appendChild(label);
+
+                // Status text
+                const statusText = document.createElement('span');
+                statusText.className = `small ${statusInfo.cls}`;
+                statusText.textContent = statusInfo.text;
+                if (job.status === 'failed' && job.error) {
+                    statusText.title = job.error;
+                    statusText.style.cursor = 'help';
+                }
+                li.appendChild(statusText);
+
+                // Action buttons
+                const btnGroup = document.createElement('div');
+                btnGroup.className = 'd-flex gap-1';
+
+                if (job.status === 'pending') {
+                    const pauseBtn = document.createElement('button');
+                    pauseBtn.className = 'btn btn-xs btn-outline-secondary';
+                    pauseBtn.textContent = '⏸';
+                    pauseBtn.title = 'Pause';
+                    pauseBtn.onclick = () => queuePause(job.id);
+                    btnGroup.appendChild(pauseBtn);
+                }
+                if (job.status === 'paused') {
+                    const resumeBtn = document.createElement('button');
+                    resumeBtn.className = 'btn btn-xs btn-outline-success';
+                    resumeBtn.textContent = '▶';
+                    resumeBtn.title = 'Resume';
+                    resumeBtn.onclick = () => queuePause(job.id);
+                    btnGroup.appendChild(resumeBtn);
+                }
+                if (['pending', 'paused', 'failed'].includes(job.status)) {
+                    const removeBtn = document.createElement('button');
+                    removeBtn.className = 'btn btn-xs btn-outline-danger';
+                    removeBtn.textContent = '✕';
+                    removeBtn.title = 'Remove';
+                    removeBtn.onclick = () => queueRemove(job.id);
+                    btnGroup.appendChild(removeBtn);
+                }
+
+                li.appendChild(btnGroup);
+                jobList.appendChild(li);
+            });
+        }
+
+        async function fetchQueue() {
+            try {
+                const resp = await fetch('/api/queue');
+                const data = await resp.json();
+                renderQueue(data.jobs || []);
+            } catch (e) {}
+        }
+
+        async function queueRemove(jobId) {
+            try {
+                await fetch(`/api/queue/${jobId}/remove`, { method: 'POST' });
+                fetchQueue();
+            } catch (e) {}
+        }
+
+        async function queuePause(jobId) {
+            try {
+                await fetch(`/api/queue/${jobId}/pause`, { method: 'POST' });
+                fetchQueue();
+            } catch (e) {}
+        }
+
+        // Poll queue every 2 seconds
+        document.addEventListener('DOMContentLoaded', () => {
+            fetchQueue();
+            setInterval(fetchQueue, 2000);
+
+            // Refresh when modal opens
+            const queueModal = document.getElementById('queueModal');
+            if (queueModal) {
+                queueModal.addEventListener('show.bs.modal', fetchQueue);
+            }
+        });
+    })();
+    </script>
    {% block scripts %}{% endblock %}
 </body>
 </html>
--- a/templates/looks/detail.html
+++ b/templates/looks/detail.html
@@ -43,9 +43,10 @@
 <div class="row">
    <div class="col-md-4">
        <div class="card mb-4">
-            <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
+            <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img') ? this.querySelector('img').src : '')">
                {% if look.image_path %}
-                <img src="{{ url_for('static', filename='uploads/' + look.image_path) }}" alt="{{ look.name }}" class="img-fluid">
+                <img src="{{ url_for('static', filename='uploads/' + look.image_path) }}" alt="{{ look.name }}" class="img-fluid"
+                     data-preview-path="{{ look.image_path }}">
                {% else %}
                <span class="text-muted">No Image Attached</span>
                {% endif %}
@@ -89,35 +90,20 @@
            </div>
        </div>

-        {% if preview_image %}
-        <div class="card mb-4 border-success">
-            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
-                <span>Latest Preview</span>
+        <div class="card mb-4 {% if preview_image %}border-success{% else %}border-secondary d-none{% endif %}" id="preview-card">
+            <div class="card-header {% if preview_image %}bg-success{% else %}bg-secondary{% endif %} text-white d-flex justify-content-between align-items-center" id="preview-card-header">
+                <span>Selected Preview</span>
                <form action="{{ url_for('replace_look_cover_from_preview', slug=look.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn">Replace Cover</button>
+                    <input type="hidden" name="preview_path" id="preview-path" value="{{ preview_image or '' }}">
+                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" {% if not preview_image %}disabled{% endif %}>Replace Cover</button>
                </form>
            </div>
            <div class="card-body p-0">
-                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) }}" alt="Preview" class="img-fluid">
+                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img') ? this.querySelector('img').src : '')">
+                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) if preview_image else '' }}" alt="Preview" class="img-fluid">
                </div>
            </div>
        </div>
-        {% else %}
-        <div class="card mb-4 border-secondary d-none" id="preview-card">
-            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
-                <span>Latest Preview</span>
-                <form action="{{ url_for('replace_look_cover_from_preview', slug=look.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" disabled>Replace Cover</button>
-                </form>
-            </div>
-            <div class="card-body p-0">
-                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="" alt="Preview" class="img-fluid">
-                </div>
-            </div>
-        </div>
-        {% endif %}

        <div class="card mb-4">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
@@ -156,7 +142,7 @@
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
-                <a href="{{ url_for('looks_index') }}" class="btn btn-outline-secondary">Back to Gallery</a>
+                <a href="{{ url_for('looks_index') }}" class="btn btn-outline-secondary">Back to Library</a>
            </div>
        </div>

@@ -237,47 +223,38 @@
        const progressContainer = document.getElementById('progress-container');
        const progressLabel = document.getElementById('progress-label');
        const previewCard = document.getElementById('preview-card');
+        const previewCardHeader = document.getElementById('preview-card-header');
        const previewImg = document.getElementById('preview-img');
+        const previewPath = document.getElementById('preview-path');
+        const replaceBtn = document.getElementById('replace-cover-btn');

-        const clientId = 'look_detail_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
+        function selectPreview(relativePath, imageUrl) {
+            if (!relativePath) return;
+            previewImg.src = imageUrl;
+            previewPath.value = relativePath;
+            replaceBtn.disabled = false;
+            previewCard.classList.remove('d-none');
+            previewCardHeader.classList.replace('bg-secondary', 'bg-success');
+            previewCard.classList.replace('border-secondary', 'border-success');
+        }

-        const nodeNames = {
-            "3": "Sampling", "11": "Face Detailing", "13": "Hand Detailing",
-            "4": "Loading Models", "16": "Look LoRA", "17": "Outfit LoRA",
-            "18": "Action LoRA", "19": "Style/Detailer LoRA",
-            "8": "Decoding Image", "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
-        let resolveCompletion = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            if (msg.type === 'progress' && msg.data.prompt_id === currentPromptId) {
-                const percent = Math.round((msg.data.value / msg.data.max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            } else if (msg.type === 'executing' && msg.data.prompt_id === currentPromptId) {
-                if (msg.data.node === null) {
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    progressLabel.textContent = nodeNames[msg.data.node] || 'Processing...';
-                }
-            }
+        document.addEventListener('click', e => {
+            const img = e.target.closest('img[data-preview-path]');
+            if (img) selectPreview(img.dataset.previewPath, img.src);
        });

-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => { clearInterval(pollInterval); resolve(); };
-                resolveCompletion = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') checkResolve();
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') progressLabel.textContent = 'Generating…';
+                        else progressLabel.textContent = 'Queued…';
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
            });
        }

@@ -285,67 +262,27 @@
            const submitter = e.submitter;
            if (!submitter || submitter.value !== 'preview') return;
            e.preventDefault();
-
            const formData = new FormData(form);
            formData.append('action', 'preview');
-            formData.append('client_id', clientId);
-
            progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
            try {
                const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST', body: formData,
-                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const data = await response.json();
                if (data.error) { alert('Error: ' + data.error); progressContainer.classList.add('d-none'); return; }
-
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-
-                await waitForCompletion(currentPromptId);
-                finalizeGeneration(currentPromptId);
-                currentPromptId = null;
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
+                const jobResult = await waitForJob(data.job_id);
+                if (jobResult.result?.image_url) selectPreview(jobResult.result.relative_path, jobResult.result.image_url);
+            } catch (err) { console.error(err); alert('Generation failed: ' + err.message); }
+            finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
        });
-
-        async function finalizeGeneration(promptId) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/look/{{ look.slug }}/finalize_generation/${promptId}`;
-            try {
-                const response = await fetch(url, {
-                    method: 'POST', body: new FormData()
-                });
-                const data = await response.json();
-                if (data.success) {
-                    previewImg.src = data.image_url;
-                    if (previewCard) previewCard.classList.remove('d-none');
-                    const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) replaceBtn.disabled = false;
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            } finally {
-                progressContainer.classList.add('d-none');
-            }
-        }
    });

    function showImage(src) {
-        document.getElementById('modalImage').src = src;
+        if (src) document.getElementById('modalImage').src = src;
    }

    initJsonEditor('{{ url_for("save_look_json", slug=look.slug) }}');
--- a/templates/looks/index.html
+++ b/templates/looks/index.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
-    <h2>Looks Gallery</h2>
+    <h2>Looks Library</h2>
    <div class="d-flex gap-1 align-items-center">
        <button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for looks without one"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
        <button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all looks"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for look in looks %}
    <div class="col" id="card-{{ look.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='{{ url_for('look_detail', slug=look.slug) }}'">
@@ -105,56 +105,20 @@
        const itemNameText = document.getElementById('current-item-name');
        const stepProgressText = document.getElementById('current-step-progress');

-        const clientId = 'looks_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
+        let currentJobId = null;

-        const nodeNames = {
-            "3": "Sampling", "11": "Face Detailing", "13": "Hand Detailing",
-            "4": "Loading Models", "16": "Look LoRA", "17": "Outfit LoRA",
-            "18": "Action LoRA", "19": "Style/Detailer LoRA",
-            "8": "Decoding", "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const percent = Math.round((msg.data.value / msg.data.max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            } else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || 'Processing...';
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => { clearInterval(pollInterval); resolve(); };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') checkResolve();
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                    } catch (err) {}
-                }, 2000);
+                }, 1500);
            });
        }

@@ -179,40 +143,32 @@
                progressBar.textContent = `${percent}%`;
                statusText.textContent = `Batch Generating Looks: ${completed + 1} / ${missing.length}`;
                itemNameText.textContent = `Current: ${item.name}`;
-                nodeStatus.textContent = "Queuing...";
+                nodeStatus.textContent = "Queuing…";
                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
+                taskProgressBar.textContent = '';
                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');

                try {
-                    // Looks are self-contained — no character_slug passed
                    const genResp = await fetch(`/look/${item.slug}/generate`, {
                        method: 'POST',
-                        body: new URLSearchParams({
-                            'action': 'replace',
-                            'client_id': clientId
-                        }),
+                        body: new URLSearchParams({ 'action': 'replace' }),
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    currentJobId = genData.job_id;

-                    await waitForCompletion(currentPromptId);
+                    const jobResult = await waitForJob(currentJobId);
+                    currentJobId = null;

-                    const finResp = await fetch(`/look/${item.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
+                    if (jobResult.result && jobResult.result.image_url) {
                        const img = document.getElementById(`img-${item.slug}`);
                        const noImgSpan = document.getElementById(`no-img-${item.slug}`);
-                        if (img) { img.src = finData.image_url; img.classList.remove('d-none'); }
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                        if (noImgSpan) noImgSpan.classList.add('d-none');
                    }
                } catch (err) {
                    console.error(`Failed for ${item.name}:`, err);
+                    currentJobId = null;
                }
                completed++;
            }
--- a/templates/outfits/detail.html
+++ b/templates/outfits/detail.html
@@ -45,7 +45,7 @@
        <div class="card mb-4">
            <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
                {% if outfit.image_path %}
-                <img src="{{ url_for('static', filename='uploads/' + outfit.image_path) }}" alt="{{ outfit.name }}" class="img-fluid">
+                <img src="{{ url_for('static', filename='uploads/' + outfit.image_path) }}" alt="{{ outfit.name }}" class="img-fluid" data-preview-path="{{ outfit.image_path }}">
                {% else %}
                <span class="text-muted">No Image Attached</span>
                {% endif %}
@@ -86,35 +86,20 @@
            </div>
        </div>

-        {% if preview_image %}
-        <div class="card mb-4 border-success">
-            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
-                <span>Latest Preview</span>
+        <div class="card mb-4 {% if preview_image %}border-success{% else %}border-secondary d-none{% endif %}" id="preview-card">
+            <div class="card-header {% if preview_image %}bg-success{% else %}bg-secondary{% endif %} text-white d-flex justify-content-between align-items-center" id="preview-card-header">
+                <span>Selected Preview</span>
                <form action="{{ url_for('replace_outfit_cover_from_preview', slug=outfit.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn">Replace Cover</button>
+                    <input type="hidden" name="preview_path" id="preview-path" value="{{ preview_image or '' }}">
+                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" {% if not preview_image %}disabled{% endif %}>Replace Cover</button>
                </form>
            </div>
            <div class="card-body p-0">
                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) }}" alt="Preview" class="img-fluid">
+                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) if preview_image else '' }}" alt="Preview" class="img-fluid">
                </div>
            </div>
        </div>
-        {% else %}
-        <div class="card mb-4 border-secondary d-none" id="preview-card">
-            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
-                <span>Latest Preview</span>
-                <form action="{{ url_for('replace_outfit_cover_from_preview', slug=outfit.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" disabled>Replace Cover</button>
-                </form>
-            </div>
-            <div class="card-body p-0">
-                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="" alt="Preview" class="img-fluid">
-                </div>
-            </div>
-        </div>
-        {% endif %}
        
        <div class="card mb-4">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
@@ -152,7 +137,7 @@
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
-                <a href="{{ url_for('outfits_index') }}" class="btn btn-outline-secondary">Back to Gallery</a>
+                <a href="{{ url_for('outfits_index') }}" class="btn btn-outline-secondary">Back to Library</a>
            </div>
        </div>

@@ -245,7 +230,8 @@
                             class="img-fluid rounded"
                             style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
                             onclick="showImage(this.src)"
-                             data-bs-toggle="modal" data-bs-target="#imageModal">
+                             data-bs-toggle="modal" data-bs-target="#imageModal"
+                             data-preview-path="{{ img }}">
                    </div>
                    {% else %}
                    <div class="col-12 text-muted small" id="gallery-empty">No previews yet. Generate some!</div>
@@ -271,188 +257,91 @@
        const progressLabel = document.getElementById('progress-label');
        const previewCard = document.getElementById('preview-card');
        const previewImg = document.getElementById('preview-img');
-        
-        // Generate a unique client ID
-        const clientId = 'outfit_detail_' + Math.random().toString(36).substring(2, 15);
+        const previewPath = document.getElementById('preview-path');
+        const replaceBtn = document.getElementById('replace-cover-btn');
+        const previewHeader = document.getElementById('preview-card-header');

-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
+        function selectPreview(relativePath, imageUrl) {
+            if (!relativePath) return;
+            previewImg.src = imageUrl;
+            previewPath.value = relativePath;
+            replaceBtn.disabled = false;
+            previewCard.classList.remove('d-none');
+            previewHeader.classList.replace('bg-secondary', 'bg-success');
+            previewCard.classList.replace('border-secondary', 'border-success');
+        }

-        let currentPromptId = null;
-        let currentAction = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
+        // Clicking any image with data-preview-path selects it into the preview pane
+        document.addEventListener('click', e => {
+            const img = e.target.closest('img[data-preview-path]');
+            if (img) selectPreview(img.dataset.previewPath, img.src);
        });

-        let resolveCompletion = null;
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            console.log('Finished via Polling');
-                            checkResolve();
+                        if (data.status === 'done') {
+                            clearInterval(poll);
+                            resolve(data);
+                        } else if (data.status === 'failed' || data.status === 'removed') {
+                            clearInterval(poll);
+                            reject(new Error(data.error || 'Job failed'));
+                        } else if (data.status === 'processing') {
+                            progressLabel.textContent = 'Generating…';
+                        } else {
+                            progressLabel.textContent = 'Queued…';
                        }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
            });
        }

        form.addEventListener('submit', async (e) => {
-            // Only intercept generate actions
            const submitter = e.submitter;
-            if (!submitter || submitter.value !== 'preview') {
-                return; 
-            }
-            
+            if (!submitter || submitter.value !== 'preview') return;
            e.preventDefault();
-            
-            currentAction = submitter.value;
+
            const formData = new FormData(form);
-            formData.append('action', currentAction);
-            formData.append('client_id', clientId);
-            
-            // UI Reset
+            formData.append('action', 'preview');
+
            progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-            
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
+
            try {
                const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
-                });
-                
-                const data = await response.json();
-                
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
-                }
-                
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                
-                // Wait for completion (WebSocket or Polling)
-                await waitForCompletion(currentPromptId);
-                
-                // Finalize
-                finalizeGeneration(currentPromptId, currentAction);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
-        });
-        
-        async function finalizeGeneration(promptId, action) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/outfit/{{ outfit.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');  // Always save as preview
-            
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    body: formData
+                    method: 'POST', body: formData,
+                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const data = await response.json();
-                
-                if (data.success) {
-                    // Update preview image
-                    previewImg.src = data.image_url;
-                    if (previewCard) previewCard.classList.remove('d-none');
-                    
-                    // Enable the replace cover button if it exists
-                    const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        // Check if there's a form to update
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/outfit/{{ outfit.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
+                if (data.error) { alert('Error: ' + data.error); return; }
+
+                progressLabel.textContent = 'Queued…';
+                const jobResult = await waitForJob(data.job_id);
+
+                if (jobResult.result?.image_url) {
+                    selectPreview(jobResult.result.relative_path, jobResult.result.image_url);
+                    addToPreviewGallery(jobResult.result.image_url, jobResult.result.relative_path, '');
                }
            } catch (err) {
                console.error(err);
-                alert('Finalize request failed');
+                alert('Generation failed: ' + err.message);
            } finally {
                progressContainer.classList.add('d-none');
+                progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
            }
-        }
+        });

        // Batch: Generate All Characters
        const allCharacters = [
            {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
            {% endfor %}
        ];
-        const finalizeBaseUrl = '/outfit/{{ outfit.slug }}/finalize_generation';
        let stopBatch = false;
        const generateAllBtn = document.getElementById('generate-all-btn');
        const stopAllBtn = document.getElementById('stop-all-btn');
@@ -460,7 +349,7 @@
        const batchLabel = document.getElementById('batch-label');
        const batchBar = document.getElementById('batch-bar');

-        function addToPreviewGallery(imageUrl, charName) {
+        function addToPreviewGallery(imageUrl, relativePath, charName) {
            const gallery = document.getElementById('preview-gallery');
            const placeholder = document.getElementById('gallery-empty');
            if (placeholder) placeholder.remove();
@@ -471,8 +360,9 @@
                     style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
                     onclick="showImage(this.src)"
                     data-bs-toggle="modal" data-bs-target="#imageModal"
+                     data-preview-path="${relativePath}"
                     title="${charName}">
-                <div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white p-1 rounded-bottom" style="font-size: 0.7rem; line-height: 1.2;">${charName}</div>
+                ${charName ? `<div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white p-1 rounded-bottom" style="font-size: 0.7rem; line-height: 1.2;">${charName}</div>` : ''}
            </div>`;
            gallery.insertBefore(col, gallery.firstChild);
            const badge = document.querySelector('#previews-tab .badge');
@@ -487,47 +377,46 @@
            stopAllBtn.classList.remove('d-none');
            batchProgress.classList.remove('d-none');
            bootstrap.Tab.getOrCreateInstance(document.getElementById('previews-tab')).show();
-            for (let i = 0; i < allCharacters.length; i++) {
+
+            const genForm = document.getElementById('generate-form');
+            const formAction = genForm.getAttribute('action');
+
+            // Phase 1: submit all jobs immediately
+            batchLabel.textContent = 'Queuing all characters…';
+            const pending = [];
+            for (const char of allCharacters) {
                if (stopBatch) break;
-                const char = allCharacters[i];
-                batchBar.style.width = `${Math.round((i / allCharacters.length) * 100)}%`;
-                batchLabel.textContent = `Generating ${char.name} (${i + 1} / ${allCharacters.length})`;
-                const genForm = document.getElementById('generate-form');
                const fd = new FormData();
                genForm.querySelectorAll('input[name="include_field"]:checked').forEach(cb => fd.append('include_field', cb.value));
                fd.append('character_slug', char.slug);
                fd.append('action', 'preview');
-                fd.append('client_id', clientId);
                try {
-                    progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
-                    const resp = await fetch(genForm.getAttribute('action'), {
-                        method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
-                    });
+                    const resp = await fetch(formAction, { method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                    const data = await resp.json();
-                    if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
-                        if (previewCard) previewCard.classList.remove('d-none');
-                    }
-                    currentPromptId = null;
-                } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
-                } finally {
-                    progressContainer.classList.add('d-none');
-                }
+                    if (!data.error) pending.push({ char, jobId: data.job_id });
+                } catch (err) { console.error(`Submit error for ${char.name}:`, err); }
            }
+
+            // Phase 2: poll all in parallel
+            batchBar.style.width = '0%';
+            let done = 0;
+            const total = pending.length;
+            batchLabel.textContent = `0 / ${total} complete`;
+
+            await Promise.all(pending.map(({ char, jobId }) =>
+                waitForJob(jobId).then(result => {
+                    done++;
+                    batchBar.style.width = `${Math.round((done / total) * 100)}%`;
+                    batchLabel.textContent = `${done} / ${total} complete`;
+                    if (result.result?.image_url) {
+                        addToPreviewGallery(result.result.image_url, result.result.relative_path, char.name);
+                    }
+                }).catch(err => {
+                    done++;
+                    console.error(`Failed for ${char.name}:`, err);
+                })
+            ));
+
            batchBar.style.width = '100%';
            batchLabel.textContent = stopBatch ? 'Stopped.' : 'Complete!';
            generateAllBtn.disabled = false;
@@ -538,7 +427,7 @@
        stopAllBtn.addEventListener('click', () => {
            stopBatch = true;
            stopAllBtn.classList.add('d-none');
-            batchLabel.textContent = 'Stopping after current generation...';
+            batchLabel.textContent = 'Stopping…';
        });

        initJsonEditor('{{ url_for("save_outfit_json", slug=outfit.slug) }}');
--- a/templates/outfits/index.html
+++ b/templates/outfits/index.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
-    <h2>Outfit Gallery</h2>
+    <h2>Outfit Library</h2>
    <div class="d-flex gap-1 align-items-center">
        <button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for outfits without one"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
        <button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all outfits"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for outfit in outfits %}
    <div class="col" id="card-{{ outfit.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/outfit/{{ outfit.slug }}'">
@@ -102,71 +102,18 @@
        const itemNameText = document.getElementById('current-item-name');
        const stepProgressText = document.getElementById('current-step-progress');
        
-        const clientId = 'outfits_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                    } catch (err) {}
-                }, 2000);
+                }, 1500);
            });
        }

@@ -183,67 +130,66 @@
            batchBtn.disabled = true;
            regenAllBtn.disabled = true;
            container.classList.remove('d-none');
-            
-            let completed = 0;
-            for (const item of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating Outfits: ${completed + 1} / ${missing.length}`;
-                itemNameText.textContent = `Current: ${item.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');

+            // Phase 1: Queue all jobs upfront
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
+            for (const item of missing) {
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                try {
                    const genResp = await fetch(`/outfit/${item.slug}/generate`, {
                        method: 'POST',
-                        body: new URLSearchParams({ 
-                            'action': 'replace', 
-                            'client_id': clientId,
-                            'character_slug': '__random__' 
-                        }),
+                        body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    if (genData.job_id) jobs.push({ item, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${item.name}:`, err);
+                }
+            }

-                    await waitForCompletion(currentPromptId);
+            // Phase 2: Poll all concurrently
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;

-                    const finResp = await fetch(`/outfit/${item.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
                        const img = document.getElementById(`img-${item.slug}`);
                        const noImgSpan = document.getElementById(`no-img-${item.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
-                        }
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                        if (noImgSpan) noImgSpan.classList.add('d-none');
                    }
                } catch (err) {
                    console.error(`Failed for ${item.name}:`, err);
                }
                completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));

            progressBar.style.width = '100%';
            progressBar.textContent = '100%';
-            statusText.textContent = "Batch Outfit Generation Complete!";
-            itemNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Outfit Generation Complete!';
+            itemNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
+            stepProgressText.textContent = '';
            taskProgressBar.style.width = '0%';
            taskProgressBar.textContent = '';
            batchBtn.disabled = false;
            regenAllBtn.disabled = false;
-            setTimeout(() => { container.classList.add('d-none'); }, 5000);
+            setTimeout(() => container.classList.add('d-none'), 5000);
        }

        batchBtn.addEventListener('click', async () => {
--- a/templates/partials/strengths_gallery.html
+++ b/templates/partials/strengths_gallery.html
@@ -101,11 +101,10 @@

  const SG_CAT  = {{ sg_category | tojson }};
  const SG_SLUG = {{ sg_entity.slug | tojson }};
-  const SG_WS   = {{ COMFYUI_WS_URL | tojson }};
-  const SG_CLIENT_ID = 'sg_' + Math.random().toString(36).slice(2, 10);

  let sgRunning = false;
  let sgShouldStop = false;
+  let sgQueuedJobs = []; // track all queued job IDs so stop can cancel them

  // ---- helpers ----

@@ -241,52 +240,23 @@
    sgHighlightBounds();
  }

-  // ---- WebSocket wait ----
+  // ---- Job queue wait ----

-  function sgWaitForCompletion(promptId) {
+  function sgWaitForJob(jobId) {
    return new Promise((resolve, reject) => {
-      let ws;
-      try {
-        ws = new WebSocket(`${SG_WS}?clientId=${SG_CLIENT_ID}`);
-      } catch (e) {
-        // Fall back to polling if WS unavailable
-        sgPollUntilDone(promptId).then(resolve).catch(reject);
-        return;
-      }
-
-      const timeout = setTimeout(() => {
-        ws.close();
-        sgPollUntilDone(promptId).then(resolve).catch(reject);
-      }, 120000);
-
-      ws.onmessage = (event) => {
-        let msg;
-        try { msg = JSON.parse(event.data); } catch { return; }
-        if (msg.type === 'executing' && msg.data && msg.data.prompt_id === promptId) {
-          if (msg.data.node === null) {
-            clearTimeout(timeout);
-            ws.close();
-            resolve();
+      const poll = setInterval(async () => {
+        try {
+          const resp = await fetch(`/api/queue/${jobId}/status`);
+          const data = await resp.json();
+          if (data.status === 'done') { clearInterval(poll); resolve(data); }
+          else if (data.status === 'failed' || data.status === 'removed') {
+            clearInterval(poll); reject(new Error(data.error || 'Job failed'));
          }
-        }
-      };
-
-      ws.onerror = () => {
-        clearTimeout(timeout);
-        sgPollUntilDone(promptId).then(resolve).catch(reject);
-      };
+        } catch (err) { console.error('[Strengths] poll error:', err); }
+      }, 1500);
    });
  }

-  async function sgPollUntilDone(promptId) {
-    for (let i = 0; i < 120; i++) {
-      await new Promise(r => setTimeout(r, 2000));
-      const r = await fetch(`/check_status/${promptId}`);
-      const d = await r.json();
-      if (d.status === 'complete' || d.status === 'finished' || d.done) return;
-    }
-  }
-
  // ---- main flow ----

  async function sgClearImages() {
@@ -310,64 +280,65 @@
    const steps = sgBuildSteps(min, max, sgGetInterval());
    if (!steps.length) return;

-    // Clear any previous set before starting a new one
    await sgClearImages();

    sgRunning = true;
    sgShouldStop = false;
+    sgQueuedJobs = [];
    document.getElementById('sg-btn-run').classList.add('d-none');
    document.getElementById('sg-btn-stop').classList.remove('d-none');
    document.getElementById('sg-progress').classList.remove('d-none');

+    const charSelect = document.getElementById('character_select');
+    const charSlug = charSelect ? charSelect.value : '';
+
+    // Phase 1: Queue all steps upfront so generation continues even if the page is navigated away
+    document.getElementById('sg-progress-bar').style.width = '100%';
+    document.getElementById('sg-progress-bar').classList.add('progress-bar-striped', 'progress-bar-animated');
    for (let i = 0; i < steps.length; i++) {
      if (sgShouldStop) break;
-
      const sv = steps[i];
-      const pct = Math.round(((i) / steps.length) * 100);
-      document.getElementById('sg-progress-bar').style.width = pct + '%';
      document.getElementById('sg-progress-label').textContent =
-        `${i} / ${steps.length} \u2014 weight: ${sv}`;
-
+        `Queuing ${i + 1} / ${steps.length} \u2014 weight: ${sv}`;
      try {
-        // Queue one generation
-        // Pick up the character currently selected on this detail page (if any)
-        const charSelect = document.getElementById('character_select');
-        const charSlug = charSelect ? charSelect.value : '';
-        const formData = new URLSearchParams({
-          strength_value: sv,
-          seed: seed,
-          client_id: SG_CLIENT_ID,
-          character_slug: charSlug,
-        });
+        const formData = new URLSearchParams({ strength_value: sv, seed, character_slug: charSlug });
        const queueResp = await fetch(`/strengths/${SG_CAT}/${SG_SLUG}/generate`, {
          method: 'POST',
          headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/x-www-form-urlencoded' },
          body: formData,
        });
        const queueData = await queueResp.json();
-        if (!queueData.prompt_id) throw new Error('No prompt_id returned');
-
-        await sgWaitForCompletion(queueData.prompt_id);
-
-        // Finalize
-        const finData = new URLSearchParams({ strength_value: sv, seed: seed });
-        const finResp = await fetch(`/strengths/${SG_CAT}/${SG_SLUG}/finalize/${queueData.prompt_id}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-          body: finData,
-        });
-        const finJson = await finResp.json();
-        if (finJson.success && finJson.image_url) {
-          sgAddImage(finJson.image_url, sv);
-        }
+        if (!queueData.job_id) throw new Error('No job_id returned');
+        sgQueuedJobs.push({ jobId: queueData.job_id, sv });
      } catch (err) {
-        console.error('[Strengths] step error:', sv, err);
+        console.error('[Strengths] queue error:', sv, err);
      }
    }

+    // Phase 2: Poll all jobs concurrently; show results as each finishes
+    document.getElementById('sg-progress-bar').classList.remove('progress-bar-striped', 'progress-bar-animated');
+    document.getElementById('sg-progress-bar').style.width = '0%';
+
+    let completed = 0;
+    await Promise.all(sgQueuedJobs.map(async ({ jobId, sv }) => {
+      try {
+        const jobResult = await sgWaitForJob(jobId);
+        if (jobResult.result && jobResult.result.image_url) {
+          sgAddImage(jobResult.result.image_url, sv);
+        }
+      } catch (err) {
+        console.error('[Strengths] job error:', sv, err);
+      }
+      completed++;
+      const pct = Math.round((completed / sgQueuedJobs.length) * 100);
+      document.getElementById('sg-progress-bar').style.width = pct + '%';
+      document.getElementById('sg-progress-label').textContent =
+        `${completed} / ${sgQueuedJobs.length} done`;
+    }));
+
    document.getElementById('sg-progress-bar').style.width = '100%';
    document.getElementById('sg-progress-label').textContent =
-      `Done \u2014 ${steps.length} images generated`;
+      `Done \u2014 ${sgQueuedJobs.length} images generated`;
    setTimeout(() => document.getElementById('sg-progress').classList.add('d-none'), 3000);

    document.getElementById('sg-btn-stop').classList.add('d-none');
@@ -377,6 +348,10 @@

  function sgStop() {
    sgShouldStop = true;
+    // Cancel any pending (not yet processing) queued jobs
+    sgQueuedJobs.forEach(({ jobId }) => {
+      fetch(`/api/queue/${jobId}/remove`, { method: 'POST' }).catch(() => {});
+    });
    document.getElementById('sg-btn-stop').classList.add('d-none');
    document.getElementById('sg-btn-run').classList.remove('d-none');
  }
--- a/templates/scenes/detail.html
+++ b/templates/scenes/detail.html
@@ -56,7 +56,7 @@
        <div class="card mb-4">
            <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
                {% if scene.image_path %}
-                <img src="{{ url_for('static', filename='uploads/' + scene.image_path) }}" alt="{{ scene.name }}" class="img-fluid">
+                <img src="{{ url_for('static', filename='uploads/' + scene.image_path) }}" alt="{{ scene.name }}" class="img-fluid" data-preview-path="{{ scene.image_path }}">
                {% else %}
                <div class="d-flex align-items-center justify-content-center bg-light" style="height: 400px;">
                    <span class="text-muted">No Image Attached</span>
@@ -100,35 +100,20 @@
            </div>
        </div>

-        {% if preview_image %}
-        <div class="card mb-4 border-success">
-            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center p-2">
-                <small>Latest Preview</small>
+        <div class="card mb-4 {% if preview_image %}border-success{% else %}border-secondary d-none{% endif %}" id="preview-card">
+            <div class="card-header {% if preview_image %}bg-success{% else %}bg-secondary{% endif %} text-white d-flex justify-content-between align-items-center p-2" id="preview-card-header">
+                <small>Selected Preview</small>
                <form action="{{ url_for('replace_scene_cover_from_preview', slug=scene.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn">Replace Cover</button>
+                    <input type="hidden" name="preview_path" id="preview-path" value="{{ preview_image or '' }}">
+                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" {% if not preview_image %}disabled{% endif %}>Replace Cover</button>
                </form>
            </div>
            <div class="card-body p-0">
                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) }}" alt="Preview" class="img-fluid">
+                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) if preview_image else '' }}" alt="Preview" class="img-fluid">
                </div>
            </div>
        </div>
-        {% else %}
-        <div class="card mb-4 border-secondary d-none" id="preview-card">
-            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center p-2">
-                <small>Latest Preview</small>
-                <form action="{{ url_for('replace_scene_cover_from_preview', slug=scene.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" disabled>Replace Cover</button>
-                </form>
-            </div>
-            <div class="card-body p-0">
-                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="" alt="Preview" class="img-fluid">
-                </div>
-            </div>
-        </div>
-        {% endif %}
    </div>

    <div class="col-md-8">
@@ -145,7 +130,7 @@
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
-                <a href="{{ url_for('scenes_index') }}" class="btn btn-outline-secondary">Back to Gallery</a>
+                <a href="{{ url_for('scenes_index') }}" class="btn btn-outline-secondary">Back to Library</a>
            </div>
        </div>

@@ -255,7 +240,8 @@
                             class="img-fluid rounded"
                             style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
                             onclick="showImage(this.src)"
-                             data-bs-toggle="modal" data-bs-target="#imageModal">
+                             data-bs-toggle="modal" data-bs-target="#imageModal"
+                             data-preview-path="{{ img }}">
                    </div>
                    {% else %}
                    <div class="col-12 text-muted small" id="gallery-empty">No previews yet. Generate some!</div>
@@ -281,185 +267,75 @@
        const progressLabel = document.getElementById('progress-label');
        const previewCard = document.getElementById('preview-card');
        const previewImg = document.getElementById('preview-img');
+        const previewPath = document.getElementById('preview-path');
+        const replaceBtn = document.getElementById('replace-cover-btn');
+        const previewHeader = document.getElementById('preview-card-header');
        const charSelect = document.getElementById('character_select');
        const charContext = document.getElementById('character-context');
-        
+
        charSelect.addEventListener('change', () => {
-            if (charSelect.value && charSelect.value !== '__random__') {
-                charContext.classList.remove('d-none');
-            } else {
-                charContext.classList.add('d-none');
-            }
+            charContext.classList.toggle('d-none', !charSelect.value || charSelect.value === '__random__');
        });

-        // Generate a unique client ID
-        const clientId = 'scene_detail_' + Math.random().toString(36).substring(2, 15);
+        function selectPreview(relativePath, imageUrl) {
+            if (!relativePath) return;
+            previewImg.src = imageUrl;
+            previewPath.value = relativePath;
+            replaceBtn.disabled = false;
+            previewCard.classList.remove('d-none');
+            previewHeader.classList.replace('bg-secondary', 'bg-success');
+            previewCard.classList.replace('border-secondary', 'border-success');
+        }

-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
-        let resolveCompletion = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
+        document.addEventListener('click', e => {
+            const img = e.target.closest('img[data-preview-path]');
+            if (img) selectPreview(img.dataset.previewPath, img.src);
        });

-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            console.log('Finished via Polling');
-                            checkResolve();
-                        }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else progressLabel.textContent = data.status === 'processing' ? 'Generating…' : 'Queued…';
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
            });
        }

        form.addEventListener('submit', async (e) => {
            const submitter = e.submitter;
            if (!submitter || submitter.value !== 'preview') return;
-            
            e.preventDefault();
-            
            const formData = new FormData(form);
            formData.append('action', 'preview');
-            formData.append('client_id', clientId);
-            
            progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-            
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
            try {
                const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
-                
                const data = await response.json();
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
+                if (data.error) { alert('Error: ' + data.error); return; }
+                progressLabel.textContent = 'Queued…';
+                const jobResult = await waitForJob(data.job_id);
+                if (jobResult.result?.image_url) {
+                    selectPreview(jobResult.result.relative_path, jobResult.result.image_url);
+                    addToPreviewGallery(jobResult.result.image_url, jobResult.result.relative_path, '');
                }
-                
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                
-                // Wait for completion (WebSocket or Polling)
-                await waitForCompletion(currentPromptId);
-                
-                // Finalize
-                finalizeGeneration(currentPromptId);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
+            } catch (err) { console.error(err); alert('Generation failed: ' + err.message); }
+            finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
        });
-        
-        async function finalizeGeneration(promptId) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/scene/{{ scene.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');
-            
-            try {
-                const response = await fetch(url, { method: 'POST', body: formData });
-                const data = await response.json();
-                
-                if (data.success) {
-                    // Update preview image
-                    previewImg.src = data.image_url;
-                    if (previewCard) previewCard.classList.remove('d-none');
-                    
-                    const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/scene/{{ scene.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            } finally {
-                progressContainer.classList.add('d-none');
-            }
-        }

-        // Batch: Generate All Characters
        const allCharacters = [
            {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
            {% endfor %}
        ];
-        const finalizeBaseUrl = '/scene/{{ scene.slug }}/finalize_generation';
-
        let stopBatch = false;
        const generateAllBtn = document.getElementById('generate-all-btn');
        const stopAllBtn = document.getElementById('stop-all-btn');
@@ -467,7 +343,7 @@
        const batchLabel = document.getElementById('batch-label');
        const batchBar = document.getElementById('batch-bar');

-        function addToPreviewGallery(imageUrl, charName) {
+        function addToPreviewGallery(imageUrl, relativePath, charName) {
            const gallery = document.getElementById('preview-gallery');
            const placeholder = document.getElementById('gallery-empty');
            if (placeholder) placeholder.remove();
@@ -478,8 +354,9 @@
                     style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
                     onclick="showImage(this.src)"
                     data-bs-toggle="modal" data-bs-target="#imageModal"
+                     data-preview-path="${relativePath}"
                     title="${charName}">
-                <div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white p-1 rounded-bottom" style="font-size: 0.7rem; line-height: 1.2;">${charName}</div>
+                ${charName ? `<div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white p-1 rounded-bottom" style="font-size: 0.7rem; line-height: 1.2;">${charName}</div>` : ''}
            </div>`;
            gallery.insertBefore(col, gallery.firstChild);
            const badge = document.querySelector('#previews-tab .badge');
@@ -495,53 +372,36 @@
            batchProgress.classList.remove('d-none');
            bootstrap.Tab.getOrCreateInstance(document.getElementById('previews-tab')).show();

-            for (let i = 0; i < allCharacters.length; i++) {
+            const genForm = document.getElementById('generate-form');
+            const formAction = genForm.getAttribute('action');
+            batchLabel.textContent = 'Queuing all characters…';
+            const pending = [];
+            for (const char of allCharacters) {
                if (stopBatch) break;
-                const char = allCharacters[i];
-                batchBar.style.width = `${Math.round((i / allCharacters.length) * 100)}%`;
-                batchLabel.textContent = `Generating ${char.name} (${i + 1} / ${allCharacters.length})`;
-
-                const genForm = document.getElementById('generate-form');
                const fd = new FormData();
                genForm.querySelectorAll('input[name="include_field"]:checked').forEach(cb => fd.append('include_field', cb.value));
                fd.append('character_slug', char.slug);
                fd.append('action', 'preview');
-                fd.append('client_id', clientId);
-
                try {
-                    progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
-
-                    const resp = await fetch(genForm.getAttribute('action'), {
-                        method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
-                    });
+                    const resp = await fetch(formAction, { method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                    const data = await resp.json();
-                    if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
-                        if (previewCard) previewCard.classList.remove('d-none');
-                    }
-                    currentPromptId = null;
-                } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
-                } finally {
-                    progressContainer.classList.add('d-none');
-                }
+                    if (!data.error) pending.push({ char, jobId: data.job_id });
+                } catch (err) { console.error(`Submit error for ${char.name}:`, err); }
            }

+            batchBar.style.width = '0%';
+            let done = 0;
+            const total = pending.length;
+            batchLabel.textContent = `0 / ${total} complete`;
+            await Promise.all(pending.map(({ char, jobId }) =>
+                waitForJob(jobId).then(result => {
+                    done++;
+                    batchBar.style.width = `${Math.round((done / total) * 100)}%`;
+                    batchLabel.textContent = `${done} / ${total} complete`;
+                    if (result.result?.image_url) addToPreviewGallery(result.result.image_url, result.result.relative_path, char.name);
+                }).catch(err => { done++; console.error(`Failed for ${char.name}:`, err); })
+            ));
+
            batchBar.style.width = '100%';
            batchLabel.textContent = stopBatch ? 'Stopped.' : 'Complete!';
            generateAllBtn.disabled = false;
@@ -552,10 +412,9 @@
        stopAllBtn.addEventListener('click', () => {
            stopBatch = true;
            stopAllBtn.classList.add('d-none');
-            batchLabel.textContent = 'Stopping after current generation...';
+            batchLabel.textContent = 'Stopping…';
        });

-        // JSON Editor
        initJsonEditor('{{ url_for("save_scene_json", slug=scene.slug) }}');
    });

--- a/templates/scenes/index.html
+++ b/templates/scenes/index.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
-    <h2>Scene Gallery</h2>
+    <h2>Scene Library</h2>
    <div class="d-flex gap-1 align-items-center">
        <button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for scenes without one"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
        <button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all scenes"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for scene in scenes %}
    <div class="col" id="card-{{ scene.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/scene/{{ scene.slug }}'">
@@ -102,71 +102,18 @@
        const sceneNameText = document.getElementById('current-scene-name');
        const stepProgressText = document.getElementById('current-step-progress');
        
-        const clientId = 'scenes_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                    } catch (err) {}
-                }, 2000);
+                }, 1500);
            });
        }

@@ -183,66 +130,65 @@
            batchBtn.disabled = true;
            regenAllBtn.disabled = true;
            container.classList.remove('d-none');
-            
-            let completed = 0;
-            for (const scene of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating Scenes: ${completed + 1} / ${missing.length}`;
-                sceneNameText.textContent = `Current: ${scene.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');

+            // Phase 1: Queue all jobs upfront
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
+            for (const scene of missing) {
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                try {
                    const genResp = await fetch(`/scene/${scene.slug}/generate`, {
                        method: 'POST',
-                        body: new URLSearchParams({ 
-                            'action': 'replace', 
-                            'client_id': clientId,
-                            'character_slug': '__random__' 
-                        }),
+                        body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    if (genData.job_id) jobs.push({ item: scene, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${scene.name}:`, err);
+                }
+            }

-                    await waitForCompletion(currentPromptId);
+            // Phase 2: Poll all concurrently
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;

-                    const finResp = await fetch(`/scene/${scene.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
-                        const img = document.getElementById(`img-${scene.slug}`);
-                        const noImgSpan = document.getElementById(`no-img-${scene.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
-                        }
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
+                        const img = document.getElementById(`img-${item.slug}`);
+                        const noImgSpan = document.getElementById(`no-img-${item.slug}`);
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                        if (noImgSpan) noImgSpan.classList.add('d-none');
                    }
                } catch (err) {
-                    console.error(`Failed for ${scene.name}:`, err);
+                    console.error(`Failed for ${item.name}:`, err);
                }
                completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));

            progressBar.style.width = '100%';
            progressBar.textContent = '100%';
-            statusText.textContent = "Batch Scene Generation Complete!";
-            sceneNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Scene Generation Complete!';
+            sceneNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
+            stepProgressText.textContent = '';
            taskProgressBar.style.width = '0%';
            taskProgressBar.textContent = '';
            batchBtn.disabled = false;
-            setTimeout(() => { container.classList.add('d-none'); }, 5000);
+            setTimeout(() => container.classList.add('d-none'), 5000);
        }

        batchBtn.addEventListener('click', async () => {
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -73,6 +73,70 @@
                            </div>
                        </div>

+                        <hr>
+
+                        <!-- Directory Settings -->
+                        <h5 class="mb-3 text-primary">LoRA Directories</h5>
+                        <p class="text-muted small">Absolute paths on disk where LoRA files are scanned for each category.</p>
+
+                        <div class="mb-3">
+                            <label for="lora_dir_characters" class="form-label">Characters / Looks</label>
+                            <input type="text" class="form-control" id="lora_dir_characters" name="lora_dir_characters"
+                                   value="{{ settings.lora_dir_characters or '/ImageModels/lora/Illustrious/Looks' }}">
+                        </div>
+                        <div class="mb-3">
+                            <label for="lora_dir_outfits" class="form-label">Outfits</label>
+                            <input type="text" class="form-control" id="lora_dir_outfits" name="lora_dir_outfits"
+                                   value="{{ settings.lora_dir_outfits or '/ImageModels/lora/Illustrious/Clothing' }}">
+                        </div>
+                        <div class="mb-3">
+                            <label for="lora_dir_actions" class="form-label">Actions</label>
+                            <input type="text" class="form-control" id="lora_dir_actions" name="lora_dir_actions"
+                                   value="{{ settings.lora_dir_actions or '/ImageModels/lora/Illustrious/Poses' }}">
+                        </div>
+                        <div class="mb-3">
+                            <label for="lora_dir_styles" class="form-label">Styles</label>
+                            <input type="text" class="form-control" id="lora_dir_styles" name="lora_dir_styles"
+                                   value="{{ settings.lora_dir_styles or '/ImageModels/lora/Illustrious/Styles' }}">
+                        </div>
+                        <div class="mb-3">
+                            <label for="lora_dir_scenes" class="form-label">Scenes</label>
+                            <input type="text" class="form-control" id="lora_dir_scenes" name="lora_dir_scenes"
+                                   value="{{ settings.lora_dir_scenes or '/ImageModels/lora/Illustrious/Backgrounds' }}">
+                        </div>
+                        <div class="mb-3">
+                            <label for="lora_dir_detailers" class="form-label">Detailers</label>
+                            <input type="text" class="form-control" id="lora_dir_detailers" name="lora_dir_detailers"
+                                   value="{{ settings.lora_dir_detailers or '/ImageModels/lora/Illustrious/Detailers' }}">
+                        </div>
+
+                        <hr>
+
+                        <h5 class="mb-3 text-primary">Checkpoint Directories</h5>
+                        <div class="mb-3">
+                            <label for="checkpoint_dirs" class="form-label">Checkpoint Scan Paths</label>
+                            <input type="text" class="form-control" id="checkpoint_dirs" name="checkpoint_dirs"
+                                   value="{{ settings.checkpoint_dirs or '/ImageModels/Stable-diffusion/Illustrious,/ImageModels/Stable-diffusion/Noob' }}">
+                            <div class="form-text">Comma-separated list of directories to scan for checkpoint files.</div>
+                        </div>
+
+                        <hr>
+
+                        <h5 class="mb-3 text-primary">Default Checkpoint</h5>
+                        <div class="mb-3">
+                            <label for="default_checkpoint" class="form-label">Active Checkpoint</label>
+                            <div class="input-group">
+                                <select class="form-select" id="default_checkpoint">
+                                    <option value="">— workflow default —</option>
+                                    {% for ckpt in all_checkpoints %}
+                                    <option value="{{ ckpt.checkpoint_path }}"{% if ckpt.checkpoint_path == default_checkpoint_path %} selected{% endif %}>{{ ckpt.name }}</option>
+                                    {% endfor %}
+                                </select>
+                                <span id="ckpt-save-status" class="input-group-text text-success" style="opacity:0;transition:opacity 0.5s">Saved</span>
+                            </div>
+                            <div class="form-text">Sets the checkpoint used for all generation requests. Saved immediately on change.</div>
+                        </div>
+
                        <div class="d-grid mt-4">
                            <button type="submit" class="btn btn-primary btn-lg">Save All Settings</button>
                        </div>
@@ -152,6 +216,22 @@
            }
        });

+        // Default Checkpoint
+        const defaultCkptSelect = document.getElementById('default_checkpoint');
+        const ckptSaveStatus = document.getElementById('ckpt-save-status');
+        if (defaultCkptSelect) {
+            defaultCkptSelect.addEventListener('change', () => {
+                fetch('/set_default_checkpoint', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+                    body: 'checkpoint_path=' + encodeURIComponent(defaultCkptSelect.value)
+                }).then(() => {
+                    ckptSaveStatus.style.opacity = '1';
+                    setTimeout(() => { ckptSaveStatus.style.opacity = '0'; }, 1500);
+                });
+            });
+        }
+
        // Local Model Loading
        const connectLocalBtn = document.getElementById('connect-local-btn');
        const localModelSelect = document.getElementById('local_model');
--- a/templates/styles/detail.html
+++ b/templates/styles/detail.html
@@ -56,7 +56,7 @@
        <div class="card mb-4">
            <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
                {% if style.image_path %}
-                <img src="{{ url_for('static', filename='uploads/' + style.image_path) }}" alt="{{ style.name }}" class="img-fluid">
+                <img src="{{ url_for('static', filename='uploads/' + style.image_path) }}" alt="{{ style.name }}" class="img-fluid" data-preview-path="{{ style.image_path }}">
                {% else %}
                <div class="d-flex align-items-center justify-content-center bg-light" style="height: 400px;">
                    <span class="text-muted">No Image Attached</span>
@@ -100,35 +100,20 @@
            </div>
        </div>

-        {% if preview_image %}
-        <div class="card mb-4 border-success">
-            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center p-2">
-                <small>Latest Preview</small>
+        <div class="card mb-4 {% if preview_image %}border-success{% else %}border-secondary d-none{% endif %}" id="preview-card">
+            <div class="card-header {% if preview_image %}bg-success{% else %}bg-secondary{% endif %} text-white d-flex justify-content-between align-items-center p-2" id="preview-card-header">
+                <small>Selected Preview</small>
                <form action="{{ url_for('replace_style_cover_from_preview', slug=style.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn">Replace Cover</button>
+                    <input type="hidden" name="preview_path" id="preview-path" value="{{ preview_image or '' }}">
+                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" {% if not preview_image %}disabled{% endif %}>Replace Cover</button>
                </form>
            </div>
            <div class="card-body p-0">
                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) }}" alt="Preview" class="img-fluid">
+                    <img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) if preview_image else '' }}" alt="Preview" class="img-fluid">
                </div>
            </div>
        </div>
-        {% else %}
-        <div class="card mb-4 border-secondary d-none" id="preview-card">
-            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center p-2">
-                <small>Latest Preview</small>
-                <form action="{{ url_for('replace_style_cover_from_preview', slug=style.slug) }}" method="post" class="m-0" id="replace-cover-form">
-                    <button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" disabled>Replace Cover</button>
-                </form>
-            </div>
-            <div class="card-body p-0">
-                <div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
-                    <img id="preview-img" src="" alt="Preview" class="img-fluid">
-                </div>
-            </div>
-        </div>
-        {% endif %}
    </div>

    <div class="col-md-8">
@@ -145,7 +130,7 @@
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
-                <a href="{{ url_for('styles_index') }}" class="btn btn-outline-secondary">Back to Gallery</a>
+                <a href="{{ url_for('styles_index') }}" class="btn btn-outline-secondary">Back to Library</a>
            </div>
        </div>

@@ -247,7 +232,8 @@
                             class="img-fluid rounded"
                             style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
                             onclick="showImage(this.src)"
-                             data-bs-toggle="modal" data-bs-target="#imageModal">
+                             data-bs-toggle="modal" data-bs-target="#imageModal"
+                             data-preview-path="{{ img }}">
                    </div>
                    {% else %}
                    <div class="col-12 text-muted small" id="gallery-empty">No previews yet. Generate some!</div>
@@ -273,183 +259,75 @@
        const progressLabel = document.getElementById('progress-label');
        const previewCard = document.getElementById('preview-card');
        const previewImg = document.getElementById('preview-img');
+        const previewPath = document.getElementById('preview-path');
+        const replaceBtn = document.getElementById('replace-cover-btn');
+        const previewHeader = document.getElementById('preview-card-header');
        const charSelect = document.getElementById('character_select');
        const charContext = document.getElementById('character-context');
-        
-        // Toggle character context info
+
        charSelect.addEventListener('change', () => {
-            if (charSelect.value && charSelect.value !== '__random__') {
-                charContext.classList.remove('d-none');
-            } else {
-                charContext.classList.add('d-none');
-            }
+            charContext.classList.toggle('d-none', !charSelect.value || charSelect.value === '__random__');
        });

-        // Generate a unique client ID
-        const clientId = 'style_detail_' + Math.random().toString(36).substring(2, 15);
+        function selectPreview(relativePath, imageUrl) {
+            if (!relativePath) return;
+            previewImg.src = imageUrl;
+            previewPath.value = relativePath;
+            replaceBtn.disabled = false;
+            previewCard.classList.remove('d-none');
+            previewHeader.classList.replace('bg-secondary', 'bg-success');
+            previewCard.classList.replace('border-secondary', 'border-success');
+        }

-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
-        let currentAction = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
+        document.addEventListener('click', e => {
+            const img = e.target.closest('img[data-preview-path]');
+            if (img) selectPreview(img.dataset.previewPath, img.src);
        });

-        let resolveCompletion = null;
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else progressLabel.textContent = data.status === 'processing' ? 'Generating…' : 'Queued…';
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
            });
        }

        form.addEventListener('submit', async (e) => {
            const submitter = e.submitter;
            if (!submitter || submitter.value !== 'preview') return;
-            
            e.preventDefault();
-            
-            currentAction = submitter.value;
            const formData = new FormData(form);
-            formData.append('action', currentAction);
-            formData.append('client_id', clientId);
-            
+            formData.append('action', 'preview');
            progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-            
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
            try {
                const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
-                
                const data = await response.json();
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
+                if (data.error) { alert('Error: ' + data.error); return; }
+                progressLabel.textContent = 'Queued…';
+                const jobResult = await waitForJob(data.job_id);
+                if (jobResult.result?.image_url) {
+                    selectPreview(jobResult.result.relative_path, jobResult.result.image_url);
+                    addToPreviewGallery(jobResult.result.image_url, jobResult.result.relative_path, '');
                }
-                
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                
-                await waitForCompletion(currentPromptId);
-                finalizeGeneration(currentPromptId, currentAction);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
+            } catch (err) { console.error(err); alert('Generation failed: ' + err.message); }
+            finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
        });
-        
-        async function finalizeGeneration(promptId, action) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/style/{{ style.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');  // Always save as preview
-            
-            try {
-                const response = await fetch(url, { method: 'POST', body: formData });
-                const data = await response.json();
-                
-                if (data.success) {
-                    previewImg.src = data.image_url;
-                    if (previewCard) previewCard.classList.remove('d-none');
-                    
-                    const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/style/{{ style.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            } finally {
-                progressContainer.classList.add('d-none');
-            }
-        }

-        // Batch: Generate All Characters
        const allCharacters = [
            {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
            {% endfor %}
        ];
-        const finalizeBaseUrl = '/style/{{ style.slug }}/finalize_generation';
-
        let stopBatch = false;
        const generateAllBtn = document.getElementById('generate-all-btn');
        const stopAllBtn = document.getElementById('stop-all-btn');
@@ -457,7 +335,7 @@
        const batchLabel = document.getElementById('batch-label');
        const batchBar = document.getElementById('batch-bar');

-        function addToPreviewGallery(imageUrl, charName) {
+        function addToPreviewGallery(imageUrl, relativePath, charName) {
            const gallery = document.getElementById('preview-gallery');
            const placeholder = document.getElementById('gallery-empty');
            if (placeholder) placeholder.remove();
@@ -468,8 +346,9 @@
                     style="cursor: pointer; aspect-ratio: 1; object-fit: cover; width: 100%;"
                     onclick="showImage(this.src)"
                     data-bs-toggle="modal" data-bs-target="#imageModal"
+                     data-preview-path="${relativePath}"
                     title="${charName}">
-                <div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white p-1 rounded-bottom" style="font-size: 0.7rem; line-height: 1.2;">${charName}</div>
+                ${charName ? `<div class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white p-1 rounded-bottom" style="font-size: 0.7rem; line-height: 1.2;">${charName}</div>` : ''}
            </div>`;
            gallery.insertBefore(col, gallery.firstChild);
            const badge = document.querySelector('#previews-tab .badge');
@@ -485,53 +364,36 @@
            batchProgress.classList.remove('d-none');
            bootstrap.Tab.getOrCreateInstance(document.getElementById('previews-tab')).show();

-            for (let i = 0; i < allCharacters.length; i++) {
+            const genForm = document.getElementById('generate-form');
+            const formAction = genForm.getAttribute('action');
+            batchLabel.textContent = 'Queuing all characters…';
+            const pending = [];
+            for (const char of allCharacters) {
                if (stopBatch) break;
-                const char = allCharacters[i];
-                batchBar.style.width = `${Math.round((i / allCharacters.length) * 100)}%`;
-                batchLabel.textContent = `Generating ${char.name} (${i + 1} / ${allCharacters.length})`;
-
-                const genForm = document.getElementById('generate-form');
                const fd = new FormData();
                genForm.querySelectorAll('input[name="include_field"]:checked').forEach(cb => fd.append('include_field', cb.value));
                fd.append('character_slug', char.slug);
                fd.append('action', 'preview');
-                fd.append('client_id', clientId);
-
                try {
-                    progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
-
-                    const resp = await fetch(genForm.getAttribute('action'), {
-                        method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
-                    });
+                    const resp = await fetch(formAction, { method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                    const data = await resp.json();
-                    if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
-                        if (previewCard) previewCard.classList.remove('d-none');
-                    }
-                    currentPromptId = null;
-                } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
-                } finally {
-                    progressContainer.classList.add('d-none');
-                }
+                    if (!data.error) pending.push({ char, jobId: data.job_id });
+                } catch (err) { console.error(`Submit error for ${char.name}:`, err); }
            }

+            batchBar.style.width = '0%';
+            let done = 0;
+            const total = pending.length;
+            batchLabel.textContent = `0 / ${total} complete`;
+            await Promise.all(pending.map(({ char, jobId }) =>
+                waitForJob(jobId).then(result => {
+                    done++;
+                    batchBar.style.width = `${Math.round((done / total) * 100)}%`;
+                    batchLabel.textContent = `${done} / ${total} complete`;
+                    if (result.result?.image_url) addToPreviewGallery(result.result.image_url, result.result.relative_path, char.name);
+                }).catch(err => { done++; console.error(`Failed for ${char.name}:`, err); })
+            ));
+
            batchBar.style.width = '100%';
            batchLabel.textContent = stopBatch ? 'Stopped.' : 'Complete!';
            generateAllBtn.disabled = false;
@@ -542,10 +404,9 @@
        stopAllBtn.addEventListener('click', () => {
            stopBatch = true;
            stopAllBtn.classList.add('d-none');
-            batchLabel.textContent = 'Stopping after current generation...';
+            batchLabel.textContent = 'Stopping…';
        });

-        // JSON Editor
        initJsonEditor('{{ url_for("save_style_json", slug=style.slug) }}');
    });

--- a/templates/styles/index.html
+++ b/templates/styles/index.html
@@ -2,7 +2,7 @@

 {% block content %}
 <div class="d-flex justify-content-between align-items-center mb-4">
-    <h2>Style Gallery</h2>
+    <h2>Style Library</h2>
    <div class="d-flex gap-1 align-items-center">
        <button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for styles without one"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
        <button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all styles"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for style in styles %}
    <div class="col" id="card-{{ style.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/style/{{ style.slug }}'">
@@ -102,71 +102,18 @@
        const styleNameText = document.getElementById('current-style-name');
        const stepProgressText = document.getElementById('current-step-progress');
        
-        const clientId = 'styles_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                    try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                        const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                    } catch (err) {}
-                }, 2000);
+                }, 1500);
            });
        }

@@ -183,62 +130,61 @@
            batchBtn.disabled = true;
            regenAllBtn.disabled = true;
            container.classList.remove('d-none');
-            
-            let completed = 0;
-            for (const style of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating Styles: ${completed + 1} / ${missing.length}`;
-                styleNameText.textContent = `Current: ${style.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');

+            // Phase 1: Queue all jobs upfront
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
+            for (const style of missing) {
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                try {
                    const genResp = await fetch(`/style/${style.slug}/generate`, {
                        method: 'POST',
-                        body: new URLSearchParams({ 
-                            'action': 'replace', 
-                            'client_id': clientId,
-                            'character_slug': '__random__' 
-                        }),
+                        body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    if (genData.job_id) jobs.push({ item: style, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${style.name}:`, err);
+                }
+            }

-                    await waitForCompletion(currentPromptId);
+            // Phase 2: Poll all concurrently
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;

-                    const finResp = await fetch(`/style/${style.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
-                        const img = document.getElementById(`img-${style.slug}`);
-                        const noImgSpan = document.getElementById(`no-img-${style.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
-                        }
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
+                        const img = document.getElementById(`img-${item.slug}`);
+                        const noImgSpan = document.getElementById(`no-img-${item.slug}`);
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                        if (noImgSpan) noImgSpan.classList.add('d-none');
                    }
                } catch (err) {
-                    console.error(`Failed for ${style.name}:`, err);
+                    console.error(`Failed for ${item.name}:`, err);
                }
                completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));

            progressBar.style.width = '100%';
            progressBar.textContent = '100%';
-            statusText.textContent = "Batch Style Generation Complete!";
-            styleNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Style Generation Complete!';
+            styleNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
+            stepProgressText.textContent = '';
            taskProgressBar.style.width = '0%';
            taskProgressBar.textContent = '';
            batchBtn.disabled = false;
Author	SHA1	Message	Date
Aodhan Collins	e226548471	Merge branch 'logging' Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-05 23:02:41 +00:00
Aodhan Collins	b9196ef5f5	Add structured logging for job queue and workflow prompts Replace bare print() calls with Python logging module. Job lifecycle (enqueue, start, ComfyUI acceptance, completion, failure) now emits timestamped INFO logs to stdout, captured by Docker. Failures use logger.exception() for full tracebacks. Workflow prompt block logs as a single INFO entry; LoRA chain details moved to DEBUG level. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-05 22:55:53 +00:00
Aodhan Collins	a38915b354	Refactor UI, settings, and code quality across all categories - Fix Replace Cover: routes now read preview_path from form POST instead of session (session writes from background threads were lost) - Fix batch generation: submit all jobs immediately, poll all in parallel via Promise.all - Fix label NameError in character generate route - Fix style detail missing characters context - Selected Preview pane: click any image to select it; data-preview-path on all images across all 8 detail templates - Gallery → Library rename across all index page headings and navbar - Settings: add configurable LoRA/checkpoint directories; default checkpoint selector moved from navbar to settings page - Consolidate 6 get_available_*_loras() into single get_available_loras(category) reading from Settings - ComfyUI tooltip shows currently loaded checkpoint name - Remove navbar checkpoint bar - Phase 4 cleanup: remove dead _queue_generation(), add session.modified, standardize log prefixes, rename action_type → action Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-05 22:48:28 +00:00
Aodhan Collins	da55b0889b	Add Docker support and refactor prompt/queue internals - Add Dockerfile, docker-compose.yml, .dockerignore for containerised deployment - Extract _resolve_character(), _ensure_character_fields(), _append_background() helpers to eliminate repeated inline character-field injection and background-tag patterns across all secondary-category generate routes - Add _IDENTITY_KEYS / _WARDROBE_KEYS constants - Fix build_extras_prompt() bug: detailer prompt (a list) was being appended as a single item instead of extended - Replace all per-route _finalize closures with _make_finalize() factory, reducing duplication across 10 generate routes - Add _prune_job_history() called each worker loop iteration to prevent unbounded memory growth - Remove 10 orphaned legacy finalize_generation HTTP routes and check_status route (superseded by job queue API since job-queue branch) - Remove one-time migration scripts (migrate_actions, migrate_detailers, migrate_lora_weight_range, migrate_wardrobe) - Update CLAUDE.md and README.md to document new helpers, queue architecture, and Docker deployment Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-05 16:46:36 +00:00
Aodhan Collins	9b143e65b1	Redesign gallery grid layout and update CSS across all index pages Increase card density with more columns per breakpoint (2→6 across sm/xl). Refactor style.css for consistent card sizing, spacing, and responsive layout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-04 21:43:40 +00:00
Aodhan Collins	27d2a70867	Merge branch 'job-queue' Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-03 02:33:04 +00:00
Aodhan Collins	3c828a170f	Add background job queue system for generation - Implements sequential job queue with background worker thread (_enqueue_job, _queue_worker) - All generate routes now return job_id instead of prompt_id; frontend polls /api/queue/<id>/status - Queue management UI in navbar with live badge, job list, pause/resume/remove controls - Fix: replaced url_for() calls inside finalize callbacks with direct string paths (url_for raises RuntimeError without request context in background threads) - Batch cover generation now uses two-phase pattern: queue all jobs upfront, then poll concurrently via Promise.all so page navigation doesn't interrupt the process - Strengths gallery sweep migrated to same two-phase pattern; sgStop() cancels queued jobs server-side - LoRA weight randomisation via lora_weight_min/lora_weight_max already present in _resolve_lora_weight Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-03 02:32:50 +00:00