From 0eaad64f0091e1f69a41dabb27a5b87c2b3d90aa Mon Sep 17 00:00:00 2001
From: Nika Siradze <nikushasiradzee@gmail.com>
Date: Sat, 4 Jul 2026 00:17:27 +0400
Subject: [PATCH 01/11] Add horizontal (16:9) and square clip formats

Introduce a FormatSpec single source of truth (backend/services/formats.py)
and thread an output format through the render pipeline so a detected moment
can render vertical (9:16), horizontal (16:9), or square (1:1). Everything
defaults to vertical, so existing behavior is unchanged.

- Parameterize crop_to_vertical with target_dims; duration constants become
  aliases of the vertical FormatSpec (kept as module names for importers).
- Fork the render on spec.reframe: reframe formats keep face-tracked cropping;
  horizontal uses a new fit_to_frame scale+pad letterbox that skips face
  analysis. Duration cap uses spec.dur_max; web HTTP caps are format-keyed.
- Thread format across the MCP tools, web server, CLI (--format), and clip
  history (dedup treats a missing format as vertical, so a horizontal re-clip
  of a vertical range is not a false duplicate).

Captions still use vertical geometry on horizontal clips; per-format caption
profiles are a follow-up.
---
 backend/cli.py                      |  9 +++
 backend/main.py                     |  2 +
 backend/presets.py                  | 16 +++--
 backend/services/clip_generator.py  | 34 ++++++----
 backend/services/formats.py         | 67 ++++++++++++++++++++
 backend/services/video_processor.py | 34 +++++++++-
 plans/horizontal-clips.md           | 96 +++++++++++++++++++++++++++++
 src/handlers/batch-clips.handler.ts |  5 ++
 src/handlers/create-clip.handler.ts |  8 +++
 src/models/index.ts                 |  8 +++
 src/server.ts                       | 11 ++++
 src/services/clips-history.ts       |  6 +-
 src/ui/web-server.ts                | 34 ++++++++--
 13 files changed, 304 insertions(+), 26 deletions(-)
 create mode 100644 backend/services/formats.py
 create mode 100644 plans/horizontal-clips.md

diff --git a/backend/cli.py b/backend/cli.py
index 2ec78b1..8cc793c 100644
--- a/backend/cli.py
+++ b/backend/cli.py
@@ -82,6 +82,7 @@ def _selection_signature(config: dict) -> str:
         bool(config.get("ai_select", True)),
         config.get("min_clip_duration", MIN_CLIP_DURATION),
         config.get("max_clip_duration", MAX_CLIP_DURATION),
+        config.get("format", "vertical"),
     ))
 
 
@@ -440,6 +441,8 @@ def cmd_process(args):
         config["caption_style"] = args.caption_style
     if args.crop:
         config["crop_strategy"] = args.crop
+    if getattr(args, "format", None):
+        config["format"] = args.format
     if args.top:
         config["top_clips"] = args.top
     if getattr(args, "review_each", False):
@@ -796,6 +799,7 @@ def _transcribe_progress(pct, msg):
                         end_second=clip["end_second"],
                         caption_style=config.get("caption_style", "branded"),
                         crop_strategy=config.get("crop_strategy", "face"),
+                        format=config.get("format", "vertical"),
                         transcript_words=words,
                         title=clip.get("title", f"clip_{i+1}"),
                         output_dir=output_dir,
@@ -1008,6 +1012,7 @@ def _transcribe_progress(pct, msg):
                                 end_second=clip["end_second"],
                                 caption_style=config.get("caption_style", "branded"),
                                 crop_strategy=config.get("crop_strategy", "face"),
+                                format=config.get("format", "vertical"),
                                 transcript_words=words,
                                 title=clip.get("title", f"clip_{i+1}"),
                                 output_dir=output_dir,
@@ -1331,6 +1336,7 @@ def _rerender_clip(r):
                     end_second=clip["end_second"],
                     caption_style=config.get("caption_style", "branded"),
                     crop_strategy=config.get("crop_strategy", "face"),
+                    format=config.get("format", "vertical"),
                     transcript_words=words,
                     title=clip.get("title", "clip"),
                     output_dir=output_dir,
@@ -1515,6 +1521,7 @@ def _rerender_clip(r):
                                         end_second=f_clip["end_second"],
                                         caption_style=config.get("caption_style", "branded"),
                                         crop_strategy=config.get("crop_strategy", "face"),
+                                        format=config.get("format", "vertical"),
                                         transcript_words=words,
                                         title=f_clip.get("title", "clip"),
                                         output_dir=output_dir,
@@ -1569,6 +1576,7 @@ def _rerender_clip(r):
                                         end_second=nc["end_second"],
                                         caption_style=config.get("caption_style", "branded"),
                                         crop_strategy=config.get("crop_strategy", "face"),
+                                        format=config.get("format", "vertical"),
                                         transcript_words=words,
                                         title=nc.get("title", "clip"),
                                         output_dir=output_dir,
@@ -3271,6 +3279,7 @@ def main():
     proc.add_argument("--fast", action="store_true", help="Draft mode: tiny Whisper, heuristic selection, center crop, low quality")
     proc.add_argument("--caption-style", choices=["branded", "hormozi", "karaoke", "subtle"])
     proc.add_argument("--crop", choices=["center", "face", "speaker", "speaker-hardcut"])
+    proc.add_argument("--format", choices=["vertical", "horizontal", "square"], help="Output aspect ratio (default: vertical)")
     proc.add_argument("--logo", help="Logo image (asset name or path)")
     proc.add_argument("--outro", help="Outro video (asset name or path)")
     proc.add_argument("--time-adjust", type=float, help="Timestamp offset in seconds")
diff --git a/backend/main.py b/backend/main.py
index d07e803..5a94001 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -113,6 +113,7 @@ def handle_create_clip(task_id: str, params: dict):
         end_second=params["end_second"],
         caption_style=params.get("caption_style", "hormozi"),
         crop_strategy=params.get("crop_strategy", "face"),
+        format=params.get("format", "vertical"),
         crop_keyframes=params.get("crop_keyframes"),
         transcript_words=params.get("transcript_words", []),
         title=params.get("title", "clip"),
@@ -152,6 +153,7 @@ def handle_batch_clips(task_id: str, params: dict):
                 end_second=clip["end_second"],
                 caption_style=clip.get("caption_style", "hormozi"),
                 crop_strategy=clip.get("crop_strategy", "face"),
+                format=clip.get("format", params.get("format", "vertical")),
                 transcript_words=params.get("transcript_words", []),
                 title=clip.get("title", f"clip_{i + 1}"),
                 output_dir=params.get("output_dir"),
diff --git a/backend/presets.py b/backend/presets.py
index 70f30f6..5aab62c 100644
--- a/backend/presets.py
+++ b/backend/presets.py
@@ -13,19 +13,23 @@
 from typing import Optional
 
 from config.paths import paths
+from services.formats import FORMATS
 
 PRESETS_DIR = os.path.join(paths["home"], "presets")
 
-# ── Clip duration constants (single source of truth) ──
-# These are for clip CONTENT only — outro is appended separately.
-MIN_CLIP_DURATION = 20
-MAX_CLIP_DURATION = 45   # hard limit with buffer (outro not included)
-TARGET_CLIP_DURATION_MIN = 20
-TARGET_CLIP_DURATION_MAX = 35  # Claude targets this range
+# Back-compat aliases for the vertical format's durations. Source of truth is
+# FORMATS["vertical"]; kept as module-level names because cli.py,
+# clip_generator.py and claude_suggest.py import them directly.
+_VERTICAL = FORMATS["vertical"]
+MIN_CLIP_DURATION = _VERTICAL.dur_min
+MAX_CLIP_DURATION = _VERTICAL.dur_max
+TARGET_CLIP_DURATION_MIN = _VERTICAL.target_min
+TARGET_CLIP_DURATION_MAX = _VERTICAL.target_max
 
 DEFAULT_PRESET = {
     "caption_style": "branded",
     "crop_strategy": "face",
+    "format": "vertical",
     "time_adjust": -1.0,
     "logo_path": "",
     "outro_path": "",
diff --git a/backend/services/clip_generator.py b/backend/services/clip_generator.py
index 90e2adc..f73076d 100644
--- a/backend/services/clip_generator.py
+++ b/backend/services/clip_generator.py
@@ -23,12 +23,13 @@
     cut_segment,
     cut_multi_segment,
     crop_to_vertical,
+    fit_to_frame,
     burn_captions,
     normalize_audio,
     concat_outro,
 )
 from config.caption_styles import get_style
-from presets import MAX_CLIP_DURATION
+from services.formats import get_format
 
 _FILLER_WORDS = frozenset([
     "um", "uh", "uhh", "uhm", "umm", "hmm", "hm", "mhm",
@@ -574,6 +575,7 @@ def generate_clip(
     end_second: float,
     caption_style: str = "hormozi",
     crop_strategy: str = "face",
+    format: str = "vertical",
     crop_keyframes: list[dict] = None,
     transcript_words: list[dict] = None,
     title: str = "clip",
@@ -598,6 +600,7 @@ def generate_clip(
         end_second: Clip end time
         caption_style: "hormozi", "karaoke", "subtle", or "branded"
         crop_strategy: "center", "face", "speaker", or "speaker-hardcut"
+        format: "vertical", "horizontal", or "square"
         transcript_words: Word-level timestamps from transcription
         title: Clip title (used in filename)
         output_dir: Where to save the final clip (defaults to temp)
@@ -627,6 +630,8 @@ def generate_clip(
     if end_second <= start_second:
         raise ValueError("end_second must be greater than start_second")
 
+    spec = get_format(format)
+
     if trim_opening is None:
         trim_opening = not (keep_segments and len(keep_segments) > 0)
 
@@ -708,8 +713,8 @@ def generate_clip(
         keep_segments = None
         duration = end_second - start_second
 
-    if duration > MAX_CLIP_DURATION:
-        raise ValueError(f"Clip too long ({duration:.0f}s). Max {MAX_CLIP_DURATION} seconds for shorts.")
+    if duration > spec.dur_max:
+        raise ValueError(f"Clip too long ({duration:.0f}s). Max {spec.dur_max} seconds for {spec.name}.")
 
     # Load style config for branded-specific settings
     style_config = get_style(caption_style)
@@ -770,17 +775,21 @@ def generate_clip(
 
         # Step 2: Crop to vertical 9:16
         if progress_callback:
-            progress_callback(30, f"Resizing for vertical format (2/{total_steps})")
+            progress_callback(30, f"Resizing for {spec.name} format (2/{total_steps})")
 
         cropped_path = os.path.join(work_dir, "cropped.mp4")
-        crop_to_vertical(
-            segment_path, cropped_path,
-            strategy=crop_strategy,
-            transcript_words=crop_words,
-            clip_start=crop_clip_start,
-            face_map=face_map,
-            crop_keyframes=crop_keyframes,
-        )
+        if spec.reframe:
+            crop_to_vertical(
+                segment_path, cropped_path,
+                strategy=crop_strategy,
+                transcript_words=crop_words,
+                clip_start=crop_clip_start,
+                face_map=face_map,
+                crop_keyframes=crop_keyframes,
+                target_dims=spec.dims,
+            )
+        else:
+            fit_to_frame(segment_path, cropped_path, target_dims=spec.dims)
 
         # Step 3: Render captions (Remotion-first; ASS fallback optional)
         if transcript_words:
@@ -914,6 +923,7 @@ def generate_clip(
             "end_second": end_second,
             "caption_style": caption_style,
             "crop_strategy": crop_strategy,
+            "format": spec.name,
         }
         if keep_caption_overlay and caption_overlay_path and os.path.exists(caption_overlay_path):
             out["caption_overlay_path"] = caption_overlay_path
diff --git a/backend/services/formats.py b/backend/services/formats.py
new file mode 100644
index 0000000..89aba58
--- /dev/null
+++ b/backend/services/formats.py
@@ -0,0 +1,67 @@
+"""Output format specifications — the single source of truth for clip dimensions.
+
+Every aspect-ratio decision (crop target, caption geometry, duration bounds,
+which scoring profile applies) derives from a FormatSpec so the render pipeline
+is parameterized on format instead of hardcoding 1080x1920 per call site.
+"""
+
+from dataclasses import dataclass
+
+
+@dataclass(frozen=True)
+class FormatSpec:
+    name: str
+    width: int
+    height: int
+    reframe: bool
+    caption_profile: str
+    dur_min: int
+    dur_max: int
+    target_min: int
+    target_max: int
+    score_key: str
+
+    @property
+    def dims(self) -> tuple[int, int]:
+        return (self.width, self.height)
+
+    @property
+    def ratio(self) -> float:
+        return self.width / self.height
+
+
+FORMATS = {
+    "vertical": FormatSpec(
+        name="vertical",
+        width=1080, height=1920,
+        reframe=True,
+        caption_profile="vertical",
+        dur_min=20, dur_max=45,
+        target_min=20, target_max=35,
+        score_key="vertical_score",
+    ),
+    "horizontal": FormatSpec(
+        name="horizontal",
+        width=1920, height=1080,
+        reframe=False,
+        caption_profile="lower_third",
+        dur_min=60, dur_max=300,
+        target_min=90, target_max=240,
+        score_key="horizontal_score",
+    ),
+    "square": FormatSpec(
+        name="square",
+        width=1080, height=1080,
+        reframe=True,
+        caption_profile="center",
+        dur_min=20, dur_max=45,
+        target_min=20, target_max=35,
+        score_key="vertical_score",
+    ),
+}
+
+DEFAULT_FORMAT = "vertical"
+
+
+def get_format(name: str | None) -> FormatSpec:
+    return FORMATS.get(name or DEFAULT_FORMAT, FORMATS[DEFAULT_FORMAT])
diff --git a/backend/services/video_processor.py b/backend/services/video_processor.py
index cbf00d7..8787898 100644
--- a/backend/services/video_processor.py
+++ b/backend/services/video_processor.py
@@ -83,6 +83,7 @@ def crop_to_vertical(
     clip_start: float = 0,
     face_map: dict = None,
     crop_keyframes: list = None,
+    target_dims: tuple = (1080, 1920),
 ) -> str:
     """
     Crop/scale video to 1080x1920 (9:16 vertical).
@@ -100,8 +101,8 @@ def crop_to_vertical(
     clip_start: The start time of this clip in the original video (for timestamp alignment).
     """
     width, height = get_dimensions(input_path)
-    target_w, target_h = 1080, 1920
-    target_ratio = target_w / target_h  # 0.5625
+    target_w, target_h = target_dims
+    target_ratio = target_w / target_h  # 0.5625 for the vertical default
 
     source_ratio = width / height
 
@@ -314,6 +315,35 @@ def crop_to_vertical(
     )
 
 
+def fit_to_frame(
+    input_path: str,
+    output_path: str,
+    target_dims: tuple = (1920, 1080),
+) -> str:
+    """Scale to fit target_dims and letterbox with black bars, preserving the
+    whole frame. Used for non-reframe formats (e.g. 16:9) where cropping to a
+    subject is undesirable; collapses to a plain scale when the source already
+    matches the target aspect ratio.
+    """
+    target_w, target_h = target_dims
+    log_event("crop", "chose=fit-letterbox", target=f"{target_w}x{target_h}")
+    vf = (
+        f"scale={target_w}:{target_h}:force_original_aspect_ratio=decrease,"
+        f"pad={target_w}:{target_h}:(ow-iw)/2:(oh-ih)/2:black,setsar=1"
+    )
+    return _run_ffmpeg_with_fallback(
+        cmd_parts_before_enc=["ffmpeg", "-y", "-i", input_path, "-vf", vf],
+        cmd_parts_after_enc=[
+            "-c:a", "aac",
+            "-b:a", "192k",
+            "-ar", "44100",
+            "-movflags", "+faststart",
+        ],
+        output_path=output_path,
+        label="fit_frame",
+    )
+
+
 def _detect_split_screen(video_path: str, width: int, height: int) -> bool:
     """Quick check: is this a split-screen layout (two side-by-side cameras)?"""
     try:
diff --git a/plans/horizontal-clips.md b/plans/horizontal-clips.md
new file mode 100644
index 0000000..bc43e5e
--- /dev/null
+++ b/plans/horizontal-clips.md
@@ -0,0 +1,96 @@
+# podcli → Horizontal (16:9) clips + multi-format repurposing
+
+> Goal: render every detected moment to **more than one format** (vertical 9:16 today, horizontal 16:9 next, square later) so podcli becomes the one place to repurpose a podcast, not just a vertical-clip button. The AI half is the real product: horizontal needs a **different viral-moment profile** than vertical, not just a wider crop.
+
+## North star
+
+```
+one detected moment
+  ├─ 9:16 short   → Shorts / Reels / TikTok   (hook-first, 20-45s)   ← today
+  └─ 16:9 clip    → YouTube in-feed / X / LinkedIn (arc-first, 60-300s) ← this plan
+        ↓ both performance streams feed the YouTube learning loop
+        → the scorer learns which format wins per moment type
+```
+
+## The one decision everything hangs on
+
+**Format is a render-time property. A moment is format-neutral.**
+
+A moment is a scored time-range (`start`, `end`, `segments`, `speakers`, `content_type`) with no aspect ratio. It carries **per-format scores** (`vertical_score`, `horizontal_score`) because virality scoring differs by format, then renders to one or more formats. Keeping format at render time (not on the moment) is what makes "detect once, fan out to N formats" coherent and preserves the learning loop. Every other repurposing output (audiogram, quote card, show notes, X thread) is later "just another renderer off the same moment + transcript + brand KB."
+
+## Vertical vs horizontal are different products
+
+| | Vertical 9:16 (have) | Horizontal 16:9 (this plan) |
+|---|---|---|
+| Winning moment | one punchy line, hook in 3s | narrative arc, debate/tension, payoff |
+| Length | 20-45s | 60-300s |
+| Framing | active-speaker crop / split-screen | wide two-shot, reaction faces are an asset |
+| Reframe cost | high (face tracking) | low (near-passthrough, `reframe=false`) |
+| Platform | Shorts, Reels, TikTok | YouTube in-feed, X, LinkedIn desktop |
+
+So the work splits in two: **selection** (a second scoring profile + a dialogue-tension signal) and **framing** (which gets *simpler*, since 16:9-from-16:9 is scale/pad, not crop).
+
+---
+
+## Verified coupling inventory
+
+An adversarial audit (7 parallel readers + 8 refutation passes + synthesis) found the real surface is **~31 distinct aspect-ratio coupling sites (~56 raw literals, ~66 edit points including format threading + duration caps)**, not the 8 originally mapped. The audit **refuted 4 design assumptions** — those corrections are baked into the phases below:
+
+1. **Captions are NOT relative.** `HormoziCaptions`/`SubtleCaptions`/`KaraokeCaptions` read only `fps` from `useVideoConfig()`; `BrandedCaptions` also reads `height` (only for a face-avoid nudge), never `width`. All font sizes/margins/logo box/side insets are absolute pixels in `remotion/src/types.ts` STYLES tuned for 1080x1920. Changing composition dims alone leaves captions ~1.8x oversized floating mid-frame. **Caption geometry is the biggest blind spot** and is net-new plumbing across 4 layers (Python cmd → `render.mjs` CLI flag → `inputProps` → `CaptionedClip` prop), plus the ASS fallback (`captions_burn.py`, `caption_renderer.py` PlayRes, `caption_styles.py` margins).
+2. **The MCP "two schemas" was wrong.** The handler `inputSchema` objects (`create-clip.handler.ts:33`, `batch-clips.handler.ts`) are **dead code** (`server.tool()` uses only `.name`/`.description`). The real gates are (a) the inline Zod shape in `src/server.ts` (MCP, strips unknown keys), and (b) `src/ui/web-server.ts` — the **primary** path — which manually destructures `req.body` and builds the Python payload with an explicit allowlist (`styledClips` whitelist ~`2671`, `/api/create-clip`, `/api/batch-clips`). A `format` param must be added at ~10 hops or it silently reverts to vertical with no error.
+3. **`fit_to_frame` is NOT redundant** with `crop_to_vertical`'s center branch. That branch blur-pillarboxes wider-than-target sources and crops top/bottom off narrower ones; only pixel-exact 16:9 passes through. Real-world near-16:9 inputs (1920x1088, 2.39:1, 4:3 inserts) are mishandled. Keep `fit_to_frame` as a distinct scale+pad/letterbox path.
+4. **Render canvas dims are already dynamic.** `render.mjs:170-238` ffprobes the cropped clip and overrides Remotion composition width/height at `renderMedia` time, so a 1920x1080 source auto-produces a 1920x1080 overlay (DaVinci ProRes overlay too). `Root.tsx:38-39` literals govern only Remotion Studio preview. So horizontal render is *dimension*-correct for free; it is *caption-layout*-broken until profile work lands.
+
+### Two hard caps that block horizontal from functioning
+- `backend/services/clip_generator.py:711` — `if duration > MAX_CLIP_DURATION: raise ValueError` (45s). A 60-300s clip crashes here. Must become `spec.dur_max`-aware.
+- `src/ui/web-server.ts` — 180s HTTP duration cap on `/api/create-clip` and `/api/batch-clips`. Rejects horizontal at the boundary before Python.
+
+### Deferred / do-not-touch
+- **Thumbnails** are a separate ~4-file / ~12-literal 9:16 track (`thumbnail_ai.py`, `thumbnail_generator.py`, `thumbnail_html.py`, `ThumbnailTemplate.tsx`). Not part of clip FormatSpec. Horizontal clips get portrait thumbnails until Phase 5.
+- **Latent-safe at 9:16, only matters for a non-vertical *reframe* format (square):** `face_analysis.py:171` and the `crop_to_vertical:170` call into `_detect_local_speaker_reframe_plan` (which omits `target_ratio`, so `local_reframe.py:188` stays hardcoded 9/16). Fix only when square/reframe lands.
+- **Native/dist:** `formats.py` auto-propagates into `cli/internal/backend/files/` (go:embed) via the sync step; contributors must run `go generate` before a native build. Any Phase-5 CSS variant must land in `src` + `dist/ui` + `dist/studio` copies.
+
+---
+
+## Phases
+
+### Phase 1 — Parameterize rendering (SAFE, no behavior change) ✅ DONE
+
+Verified **byte-identical for the vertical default** (341/341 backend tests pass; smoke-checked that duration aliases hold 20/45/20/35, affected importers load, and `crop_to_vertical`'s `target_dims` default is `(1080,1920)`). Two guardrails were mandatory and applied:
+
+- **Guardrail A — keep duration constants as aliases.** `cli.py:70,398`, `clip_generator.py:31`, `claude_suggest.py:21`, and `DEFAULT_PRESET` itself import `MIN/MAX/TARGET_CLIP_DURATION` by name; deleting them ImportError-crashes all four. They now derive from `FORMATS["vertical"]` but keep the exact module-level names.
+- **Guardrail B — change only the crop-path literal.** Only `video_processor.py:103` was touched. Thumbnails, caption PlayRes, `clip_studio.py`, `render.mjs` fallback, and `Root.tsx` were left alone — they resolve to vertical anyway and rewriting them adds risk with no behavior benefit.
+
+Edits shipped:
+1. **NEW** `backend/services/formats.py` — `FormatSpec` (frozen dataclass) + `FORMATS` {vertical, horizontal, square} + `get_format()`. Imports nothing from `presets` (avoids cycle; `presets` imports from it).
+2. `backend/presets.py` — duration constants now alias `FORMATS["vertical"].{dur_min,dur_max,target_min,target_max}`; added `"format": "vertical"` to `DEFAULT_PRESET` (inert; the `{**DEFAULT_PRESET, **saved}` merge back-fills old presets).
+3. `backend/services/video_processor.py` — `crop_to_vertical(...)` gained `target_dims: tuple = (1080, 1920)`; line 103 is now `target_w, target_h = target_dims`.
+
+### Phase 2 — Render horizontal (still defaults vertical) ✅ DONE
+
+Verified end to end: a 1280x720 source rendered `format="horizontal"` → **1920x1080** via `chose=fit-letterbox` (face analysis skipped), and `format="vertical"` → **1080x1920** unchanged. 341 Python + 47 TS tests pass, `tsc` clean.
+
+- **Render fork** in `clip_generator.py` step 2: `spec.reframe ? crop_to_vertical(..., target_dims=spec.dims) : fit_to_frame(..., spec.dims)`. New `fit_to_frame` in `video_processor.py` = `scale=…:force_original_aspect_ratio=decrease` + centered `pad` + `setsar=1` (letterbox, collapses to plain scale for exact-ratio), skips all face analysis. `spec = get_format(format)` resolved once and reused for the dur cap, progress label, and fork. (Kept the `crop_to_vertical` name for now; rename deferred.)
+- **Caps relaxed:** `clip_generator.py` uses `spec.dur_max` (vertical still 45); the two web-server 180s HTTP caps use a format-keyed ceiling (horizontal→300, else 180 — *not* `spec.dur_max`, which would tighten vertical).
+- **`format` threaded end to end**, defaulting vertical at every hop: `generate_clip` signature + result dict; `main.py` create/batch; **6** `cli.py` `generate_clip` call sites + `--format` flag + `_selection_signature` cache key; `server.ts` create/batch Zod + primary clip literal + export-selected/clip-numbers maps + `findDuplicate`/`record`; `web-server.ts` create-clip destructure/validation/payload/history/recipe + MCP-export resolver + `styledClips` whitelist + batch per-clip cap + `createBatchHistoryRecorder`; `models/index.ts` types; `clips-history.ts` `findDuplicate` (backward-compatible, missing→vertical, so a horizontal re-clip of a vertical range is no longer a false duplicate).
+- `Root.tsx`/`render.mjs` untouched (ffprobe already sizes the canvas). Output is dimension-correct; **captions still use vertical geometry** until Phase 3 (conscious deferral, not a silent bug).
+
+### Phase 3 — Correct captions per format (the real blind spot)
+- Add a `caption_profile` carrying per-format geometry (fontSize, margins, logo box, side insets). Wire a `--format`/`--caption-profile` flag through `render.mjs` → `inputProps` → `CaptionedClipProps`, and add a `lower_third` profile to `types.ts` STYLES + the 4 Remotion caption components (make absolute pixels profile-driven).
+- Mirror in the **ASS fallback** (default path, `allow_ass_fallback=True`): thread real dims into `captions_burn.py:27`, `caption_renderer.py` PlayRes (`17`,`501`), `caption_styles.py:73` margins; wire up the already-parameterized-but-dead `_calibrate_libass_y`.
+
+### Phase 4 — Iterate the AI for horizontal viral moments (the product)
+- **Second scoring profile.** Keep `standalone/hook/relevance/quotability` as `vertical_score`; add `arc/tension/depth/payoff` as `horizontal_score` in `claude_suggest.py:_build_prompt`. New KB file `.podcli/knowledge/04b-longform-creation-guide.md` loaded alongside `04-shorts-creation-guide.md`. Moment schema (`suggest-clips.handler.ts`) gains both scores (keep `score` alias). Detect once, rank twice.
+- **Dialogue-tension signal** (highest-leverage new AI): a function in `audio_analyzer.py` next to `compute_energy_scores` combining speaker-turn frequency (from diarization labels) + sustained energy → catches debate/back-and-forth that vertical spike-scoring misses. Feeds `horizontal_score`.
+- Make the LLM duration window format-aware (`claude_suggest.py:241-311,433` currently bake 20-45s into the prompt).
+
+### Phase 5 — UI + learning loop + more renderers
+- ContentStudio format selector + "render both"; 16:9 preview variants in `styles.css` (+ `dist` copies) and `EpisodeWorkspace.jsx:77` (`PROD_TO_PCT` hardcodes 1920).
+- Feed both format performance streams into the YouTube learning loop ([studio-phase-1] roadmap) → learn format × moment-type winners → back into scoring.
+- Horizontal thumbnails (16:9 / 1280x720) as a deliverable. Then the cheap renderers off the same spine: audiograms, quote cards (reuse `thumbnail_ai.py`), show notes / X threads (LLM over the transcript).
+
+---
+
+## Sequencing guarantee
+
+Each phase is independently mergeable and leaves `main` green. Phase 1 already is (behavior-identical). Phases 2-3 ship behind the default-vertical flag (no existing user sees a change until they pick horizontal). Phase 4 is where the product value lands.
diff --git a/src/handlers/batch-clips.handler.ts b/src/handlers/batch-clips.handler.ts
index 7e4d29d..24ad80b 100644
--- a/src/handlers/batch-clips.handler.ts
+++ b/src/handlers/batch-clips.handler.ts
@@ -70,6 +70,10 @@ export const batchClipsToolDef = {
               type: "string",
               enum: ["center", "face", "speaker"],
             },
+            format: {
+              type: "string",
+              enum: ["vertical", "horizontal", "square"],
+            },
             allow_ass_fallback: {
               type: "boolean",
             },
@@ -149,6 +153,7 @@ export async function handleBatchClips(input: BatchClipsInput): Promise<string>
     title: s.title || `clip_${num}`,
     caption_style: s.suggested_caption_style || settings.captionStyle || "hormozi",
     crop_strategy: settings.cropStrategy || "speaker",
+    format: input.format || settings.format || "vertical",
     allow_ass_fallback: input.allow_ass_fallback === true,
     keep_caption_overlay: input.keep_caption_overlay === true,
     logo_path: settings.logoPath || null,
diff --git a/src/handlers/create-clip.handler.ts b/src/handlers/create-clip.handler.ts
index 8920234..56bbd5f 100644
--- a/src/handlers/create-clip.handler.ts
+++ b/src/handlers/create-clip.handler.ts
@@ -66,6 +66,12 @@ export const createClipToolDef = {
         description:
           "How to crop to vertical. Auto-loaded from session settings if omitted.",
       },
+      format: {
+        type: "string",
+        enum: ["vertical", "horizontal", "square"],
+        description:
+          "Output aspect ratio. vertical=9:16 shorts, horizontal=16:9, square=1:1. Auto-loaded from session settings if omitted. Default: vertical.",
+      },
       transcript_words: {
         type: "array",
         description:
@@ -148,6 +154,7 @@ export async function handleCreateClip(input: CreateClipInput): Promise<string>
     settings.captionStyle ||
     "hormozi";
   const cropStrategy = input.crop_strategy || settings.cropStrategy || "speaker";
+  const format = input.format || settings.format || "vertical";
   const logoPath = input.logo_path || settings.logoPath || null;
   const outroPath = input.outro_path || settings.outroPath || null;
   const transcriptWords = input.transcript_words ?? transcript?.words ?? [];
@@ -171,6 +178,7 @@ export async function handleCreateClip(input: CreateClipInput): Promise<string>
     end_second: endSecond,
     caption_style: captionStyle,
     crop_strategy: cropStrategy,
+    format,
     transcript_words: transcriptWords,
     title,
     output_dir: paths.output,
diff --git a/src/models/index.ts b/src/models/index.ts
index 79831c1..91dc943 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -71,6 +71,7 @@ export interface TranscriptResult {
 
 export type CaptionStyle = "branded" | "hormozi" | "karaoke" | "subtle";
 export type CropStrategy = "center" | "face" | "speaker";
+export type Format = "vertical" | "horizontal" | "square";
 
 export interface ClipRequest {
   video_path: string;
@@ -86,6 +87,7 @@ export interface ClipResult {
   output_path: string;
   duration: number;
   file_size_mb: number;
+  format?: string;
   caption_overlay_path?: string;
   cropped_source_path?: string;
 }
@@ -116,6 +118,7 @@ export interface UIState {
   settings?: {
     captionStyle?: string;
     cropStrategy?: string;
+    format?: string;
     logoPath?: string;
     outroPath?: string;
   };
@@ -131,6 +134,7 @@ export interface CreateClipInput {
   title?: string;
   caption_style?: string;
   crop_strategy?: string;
+  format?: string;
   logo_path?: string;
   outro_path?: string;
   transcript_words?: WordTimestamp[];
@@ -145,6 +149,7 @@ export interface BatchClipSpec {
   title?: string;
   caption_style?: string;
   crop_strategy?: string;
+  format?: string;
   logo_path?: string | null;
   allow_ass_fallback?: boolean;
   keep_caption_overlay?: boolean;
@@ -157,6 +162,7 @@ export interface BatchClipsInput {
   clip_numbers?: number[];
   clips?: BatchClipSpec[];
   export_selected?: boolean;
+  format?: string;
   clean_fillers?: boolean;
   allow_ass_fallback?: boolean;
   keep_caption_overlay?: boolean;
@@ -179,6 +185,7 @@ export interface BatchClipsResult {
     end_second?: number;
     caption_style?: string;
     crop_strategy?: string;
+    format?: string;
     title?: string;
     file_size_mb?: number;
     duration?: number;
@@ -227,6 +234,7 @@ export interface ClipHistoryEntry {
   end_second: number;
   caption_style: string;
   crop_strategy: string;
+  format?: string;
   logo_path?: string;
   outro_path?: string;
   title: string;
diff --git a/src/server.ts b/src/server.ts
index 02a8bfe..e737fc0 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -461,6 +461,11 @@ export function createServer(): McpServer {
         .optional()
         .default("speaker")
         .describe("Cropping strategy"),
+      format: z
+        .enum(["vertical", "horizontal", "square"])
+        .optional()
+        .default("vertical")
+        .describe("Output aspect ratio (vertical=9:16, horizontal=16:9, square=1:1)"),
       allow_ass_fallback: z
         .boolean()
         .optional()
@@ -565,6 +570,7 @@ export function createServer(): McpServer {
           params.end_second as number,
           (params.caption_style || "hormozi") as string,
           (params.crop_strategy || "speaker") as string,
+          (params.format || "vertical") as string,
         );
         if (dup) {
           return {
@@ -593,6 +599,7 @@ export function createServer(): McpServer {
                   title: (params.title || "clip") as string,
                   caption_style: params.caption_style || "hormozi",
                   crop_strategy: params.crop_strategy || "speaker",
+                  format: params.format || "vertical",
                   allow_ass_fallback: params.allow_ass_fallback === true,
                   keep_caption_overlay: params.keep_caption_overlay === true,
                   ...(keepSegments && { segments: keepSegments }),
@@ -655,6 +662,7 @@ export function createServer(): McpServer {
             end_second: params.end_second as number,
             caption_style: (params.caption_style || "hormozi") as string,
             crop_strategy: (params.crop_strategy || "speaker") as string,
+            format: (params.format || "vertical") as string,
             logo_path: params.logo_path as string | undefined,
             title: (params.title || "clip") as string,
             output_path: parsed.output_path,
@@ -705,6 +713,7 @@ export function createServer(): McpServer {
               .enum(["hormozi", "karaoke", "subtle", "branded"])
               .optional(),
             crop_strategy: z.enum(["center", "face", "speaker"]).optional(),
+            format: z.enum(["vertical", "horizontal", "square"]).optional(),
             allow_ass_fallback: z.boolean().optional(),
             keep_caption_overlay: z.boolean().optional(),
           }),
@@ -783,6 +792,7 @@ export function createServer(): McpServer {
                   settings.captionStyle ||
                   "hormozi",
                 crop_strategy: settings.cropStrategy || "speaker",
+                format: settings.format || "vertical",
                 allow_ass_fallback: false,
                 ...(s.segments &&
                   s.segments.length > 0 && { keep_segments: s.segments }),
@@ -801,6 +811,7 @@ export function createServer(): McpServer {
                     settings.captionStyle ||
                     "hormozi",
                   crop_strategy: settings.cropStrategy || "speaker",
+                  format: settings.format || "vertical",
                   allow_ass_fallback: false,
                   ...(s.segments &&
                     s.segments.length > 0 && { keep_segments: s.segments }),
diff --git a/src/services/clips-history.ts b/src/services/clips-history.ts
index 33c58e5..5624b56 100644
--- a/src/services/clips-history.ts
+++ b/src/services/clips-history.ts
@@ -13,6 +13,7 @@ interface BatchRecordContext {
   transcriptWords?: WordTimestamp[] | null;
   defaultCaptionStyle?: string;
   defaultCropStrategy?: string;
+  defaultFormat?: string;
   contentTypeFor?: (start: number, end: number) => string | undefined;
 }
 
@@ -98,6 +99,7 @@ export class ClipsHistory {
           end_second: end,
           caption_style: r.caption_style || ctx.defaultCaptionStyle || "hormozi",
           crop_strategy: r.crop_strategy || ctx.defaultCropStrategy || "speaker",
+          format: r.format || ctx.defaultFormat || "vertical",
           title: r.title || "clip",
           output_path: r.output_path,
           file_size_mb: r.file_size_mb || 0,
@@ -119,7 +121,8 @@ export class ClipsHistory {
     startSecond: number,
     endSecond: number,
     captionStyle: string,
-    cropStrategy: string
+    cropStrategy: string,
+    format: string = "vertical"
   ): Promise<ClipHistoryEntry | null> {
     const entries = await this.load();
     const srcName = basename(sourceVideo);
@@ -129,6 +132,7 @@ export class ClipsHistory {
         if (basename(e.source_video) !== srcName) return false;
         if (e.caption_style !== captionStyle) return false;
         if (e.crop_strategy !== cropStrategy) return false;
+        if ((e.format || "vertical") !== format) return false;
         if (Math.abs(e.start_second - startSecond) > 2) return false;
         if (Math.abs(e.end_second - endSecond) > 2) return false;
         // Check output still exists
diff --git a/src/ui/web-server.ts b/src/ui/web-server.ts
index 0c97c70..f60c92b 100644
--- a/src/ui/web-server.ts
+++ b/src/ui/web-server.ts
@@ -110,6 +110,7 @@ interface UIState {
   settings: {
     captionStyle: string;
     cropStrategy: string;
+    format: string;
     logoPath: string;
     outroPath: string;
   };
@@ -140,6 +141,7 @@ function loadPersistedState(): UIState {
         settings: {
           captionStyle: saved.settings?.captionStyle || "branded",
           cropStrategy: saved.settings?.cropStrategy || "speaker",
+          format: saved.settings?.format || "vertical",
           logoPath: saved.settings?.logoPath || "",
           outroPath: saved.settings?.outroPath || "",
         },
@@ -166,6 +168,7 @@ function loadPersistedState(): UIState {
     settings: {
       captionStyle: "branded",
       cropStrategy: "speaker",
+      format: "vertical",
       logoPath: "",
       outroPath: "",
     },
@@ -263,6 +266,7 @@ function createBatchHistoryRecorder({
   transcriptWords,
   defaultCaptionStyle,
   defaultCropStrategy,
+  defaultFormat,
   label,
 }: {
   jobId: string;
@@ -270,6 +274,7 @@ function createBatchHistoryRecorder({
   transcriptWords: WordTimestamp[];
   defaultCaptionStyle?: string;
   defaultCropStrategy?: string;
+  defaultFormat?: string;
   label: string;
 }) {
   const recordedClipIndexes = new Set<number>();
@@ -281,6 +286,7 @@ function createBatchHistoryRecorder({
       transcriptWords,
       defaultCaptionStyle,
       defaultCropStrategy,
+      defaultFormat,
       contentTypeFor: (s, e) => findContentType(uiState.suggestions, s, e),
     });
     for (const row of rows) {
@@ -635,6 +641,7 @@ app.post("/api/create-clip", async (req, res) => {
     end_second,
     caption_style = "hormozi",
     crop_strategy = "speaker",
+    format = "vertical",
     transcript_words = [],
     title = "clip",
     logo_path = null,
@@ -663,9 +670,10 @@ app.post("/api/create-clip", async (req, res) => {
     return;
   }
   const duration = end_second - start_second;
-  if (duration > 180) {
+  const maxDur = format === "horizontal" ? 300 : 180;
+  if (duration > maxDur) {
     res.status(400).json({
-      error: `Clip too long (${Math.round(duration)}s). Max 180 seconds.`,
+      error: `Clip too long (${Math.round(duration)}s). Max ${maxDur} seconds.`,
     });
     return;
   }
@@ -691,6 +699,13 @@ app.post("/api/create-clip", async (req, res) => {
       .json({ error: `Invalid crop strategy. Use: ${validCrops.join(", ")}` });
     return;
   }
+  const validFormats = ["vertical", "horizontal", "square"];
+  if (!validFormats.includes(format)) {
+    res
+      .status(400)
+      .json({ error: `Invalid format. Use: ${validFormats.join(", ")}` });
+    return;
+  }
 
   await fileManager.ensureDirectories();
 
@@ -716,6 +731,7 @@ app.post("/api/create-clip", async (req, res) => {
         end_second,
         caption_style,
         crop_strategy,
+        format,
         transcript_words,
         title,
         output_dir: paths.output,
@@ -743,6 +759,7 @@ app.post("/api/create-clip", async (req, res) => {
           end_second,
           caption_style,
           crop_strategy,
+          format,
           logo_path: logo_path || undefined,
           outro_path: outro_path || undefined,
           title,
@@ -755,7 +772,7 @@ app.post("/api/create-clip", async (req, res) => {
         const clipWords = sliceWords(transcript_words, start_second, end_second);
         await clipsHistory.saveWords(rec.id, clipWords);
         await clipsHistory.saveRecipe(rec.id, {
-          caption_style, crop_strategy, logo_path: logo_path || null, outro_path: outro_path || null,
+          caption_style, crop_strategy, format, logo_path: logo_path || null, outro_path: outro_path || null,
           clean_fillers, transcript_words: clipWords,
         });
         broadcastHistoryUpdated(jobId, [rec]);
@@ -805,9 +822,10 @@ app.post("/api/batch-clips", async (req, res) => {
       res.status(400).json({ error: `Clip ${i + 1}: end must be after start` });
       return;
     }
-    if (dur > 180) {
+    const maxDur = c.format === "horizontal" ? 300 : 180;
+    if (dur > maxDur) {
       res.status(400).json({
-        error: `Clip ${i + 1}: too long (${Math.round(dur)}s). Max 180s.`,
+        error: `Clip ${i + 1}: too long (${Math.round(dur)}s). Max ${maxDur}s.`,
       });
       return;
     }
@@ -2605,6 +2623,8 @@ app.post("/api/ui-state", (req, res) => {
       uiState.settings.captionStyle = body.settings.captionStyle;
     if (body.settings.cropStrategy !== undefined)
       uiState.settings.cropStrategy = body.settings.cropStrategy;
+    if (body.settings.format !== undefined)
+      uiState.settings.format = body.settings.format;
     if (body.settings.logoPath !== undefined)
       uiState.settings.logoPath = body.settings.logoPath;
     if (body.settings.outroPath !== undefined)
@@ -2654,6 +2674,8 @@ app.post("/api/mcp/export", async (req, res) => {
     req.body.caption_style || uiState.settings.captionStyle || "branded";
   const cropStrategy =
     req.body.crop_strategy || uiState.settings.cropStrategy || "speaker";
+  const format =
+    req.body.format || uiState.settings.format || "vertical";
   const allowAssFallback = req.body.allow_ass_fallback === true;
 
   if (!videoPath || !existsSync(videoPath)) {
@@ -2674,6 +2696,7 @@ app.post("/api/mcp/export", async (req, res) => {
     title: (c.title || "clip").slice(0, 40),
     caption_style: c.caption_style || captionStyle,
     crop_strategy: c.crop_strategy || cropStrategy,
+    format: c.format || format,
     allow_ass_fallback: c.allow_ass_fallback === true || allowAssFallback,
     // Preserve multi-cut segments from suggestions
     ...(Array.isArray(c.segments) &&
@@ -2697,6 +2720,7 @@ app.post("/api/mcp/export", async (req, res) => {
     transcriptWords,
     defaultCaptionStyle: captionStyle,
     defaultCropStrategy: cropStrategy,
+    defaultFormat: format,
     label: "MCP export",
   });
 

From 16a7bab2b9b09c340388145d2f11a411629474a3 Mon Sep 17 00:00:00 2001
From: Nika Siradze <nikushasiradzee@gmail.com>
Date: Sat, 4 Jul 2026 00:34:03 +0400
Subject: [PATCH 02/11] Scale captions per format and add studio format
 selector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Caption geometry (font sizes, margins, logo box, insets) was authored for a
1920-tall vertical canvas, so on a 1080-tall horizontal/square frame captions
rendered oversized and floated mid-frame. Multiply all geometry by
captionScale = height / 1920 in the four caption components; vertical (height
1920 → factor 1.0) is unchanged, horizontal/square get a proportional
lower-third.

Add a Format selector (Vertical 9:16 / Horizontal 16:9 / Square 1:1) to the
studio workspace next to caption style and crop. Format persists via settings
sync and rides on each clip in the export payloads, so the backend renders the
chosen aspect ratio.
---
 remotion/src/components/BrandedCaptions.tsx | 40 ++++++++++++---------
 remotion/src/components/HormoziCaptions.tsx | 12 ++++---
 remotion/src/components/KaraokeCaptions.tsx | 17 +++++----
 remotion/src/components/SubtleCaptions.tsx  | 16 +++++----
 remotion/src/types.ts                       |  7 ++++
 src/ui/client/EpisodeWorkspace.jsx          | 20 ++++++++---
 6 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/remotion/src/components/BrandedCaptions.tsx b/remotion/src/components/BrandedCaptions.tsx
index beeb939..75786df 100644
--- a/remotion/src/components/BrandedCaptions.tsx
+++ b/remotion/src/components/BrandedCaptions.tsx
@@ -7,6 +7,7 @@ import {
   staticFile,
 } from "remotion";
 import type { Word, CaptionStyle } from "../types";
+import { captionScale } from "../types";
 
 interface Props {
   words: Word[];
@@ -84,6 +85,8 @@ const WordWithPill: React.FC<{
   frame: number;
   fps: number;
 }> = ({ word, isActive, frame, fps }) => {
+  const { height } = useVideoConfig();
+  const s = captionScale(height);
   const wordEntryFrame = Math.round(word.start * fps);
 
   const pillOpacity = isActive
@@ -100,12 +103,12 @@ const WordWithPill: React.FC<{
       <span
         style={{
           position: "absolute",
-          top: -4,
-          left: -16,
-          right: -16,
-          bottom: -4,
+          top: -4 * s,
+          left: -16 * s,
+          right: -16 * s,
+          bottom: -4 * s,
           backgroundColor: "rgba(0, 0, 0, 0.85)",
-          borderRadius: 18,
+          borderRadius: 18 * s,
           boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)",
           opacity: pillOpacity,
           pointerEvents: "none",
@@ -165,7 +168,9 @@ export const BrandedCaptions: React.FC<Props> = ({
 }) => {
   const frame = useCurrentFrame();
   const { fps, height } = useVideoConfig();
+  const s = captionScale(height);
   const currentTime = frame / fps;
+  const scaledStyle = { ...style, fontSize: style.fontSize * s };
 
   const chunks = buildChunks(words, style.wordsPerChunk);
   const activeChunk = chunks.find(
@@ -175,13 +180,14 @@ export const BrandedCaptions: React.FC<Props> = ({
   // Dynamic margin: if face is in the lower portion, push captions further down
   // faceY is normalized 0-1 (0=top, 1=bottom)
   // Default margin is style.marginBottom. If face center is below 0.55, reduce margin.
-  let dynamicMargin = style.marginBottom;
+  const baseMargin = style.marginBottom * s;
+  let dynamicMargin = baseMargin;
   if (faceY != null && faceY > 0.55) {
     // Face is low — push captions to the very bottom
-    dynamicMargin = Math.max(80, style.marginBottom - Math.round((faceY - 0.55) * height * 0.6));
+    dynamicMargin = Math.max(80 * s, baseMargin - Math.round((faceY - 0.55) * height * 0.6));
   } else if (faceY != null && faceY < 0.35) {
     // Face is high — can bring captions up a bit
-    dynamicMargin = style.marginBottom + 60;
+    dynamicMargin = baseMargin + 60 * s;
   }
 
   return (
@@ -191,10 +197,10 @@ export const BrandedCaptions: React.FC<Props> = ({
           src={logoSrc.startsWith("http") ? logoSrc : staticFile(logoSrc)}
           style={{
             position: "absolute",
-            top: 180,
-            left: 108,
-            width: 255,
-            height: 126,
+            top: 180 * s,
+            left: 108 * s,
+            width: 255 * s,
+            height: 126 * s,
             objectFit: "contain",
           }}
         />
@@ -208,12 +214,12 @@ export const BrandedCaptions: React.FC<Props> = ({
             style={{
               position: "absolute",
               bottom: dynamicMargin,
-              left: 60,
-              right: 60,
+              left: 60 * s,
+              right: 60 * s,
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
-              gap: 8,
+              gap: 8 * s,
             }}
           >
             <CaptionLine
@@ -221,7 +227,7 @@ export const BrandedCaptions: React.FC<Props> = ({
               currentTime={currentTime}
               frame={frame}
               fps={fps}
-              style={style}
+              style={scaledStyle}
             />
             {line2.length > 0 && (
               <CaptionLine
@@ -229,7 +235,7 @@ export const BrandedCaptions: React.FC<Props> = ({
                 currentTime={currentTime}
                 frame={frame}
                 fps={fps}
-                style={style}
+                style={scaledStyle}
               />
             )}
           </div>
diff --git a/remotion/src/components/HormoziCaptions.tsx b/remotion/src/components/HormoziCaptions.tsx
index 725491b..7cb531c 100644
--- a/remotion/src/components/HormoziCaptions.tsx
+++ b/remotion/src/components/HormoziCaptions.tsx
@@ -6,6 +6,7 @@ import {
   spring,
 } from "remotion";
 import type { Word, CaptionStyle } from "../types";
+import { captionScale } from "../types";
 
 interface Props {
   words: Word[];
@@ -37,7 +38,8 @@ function buildChunks(words: Word[], perChunk: number): Chunk[] {
 
 export const HormoziCaptions: React.FC<Props> = ({ words, style }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, height } = useVideoConfig();
+  const s = captionScale(height);
   const currentTime = frame / fps;
 
   const chunks = buildChunks(words, style.wordsPerChunk);
@@ -66,7 +68,7 @@ export const HormoziCaptions: React.FC<Props> = ({ words, style }) => {
     <div
       style={{
         position: "absolute",
-        bottom: style.marginBottom,
+        bottom: style.marginBottom * s,
         left: 0,
         right: 0,
         display: "flex",
@@ -78,11 +80,11 @@ export const HormoziCaptions: React.FC<Props> = ({ words, style }) => {
       <div
         style={{
           backgroundColor: "rgba(0, 0, 0, 0.8)",
-          borderRadius: 16,
-          padding: "14px 32px",
+          borderRadius: 16 * s,
+          padding: `${14 * s}px ${32 * s}px`,
           textAlign: "center",
           fontFamily: style.fontFamily,
-          fontSize: style.fontSize,
+          fontSize: style.fontSize * s,
           fontWeight: 800,
           lineHeight: 1.2,
           textShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
diff --git a/remotion/src/components/KaraokeCaptions.tsx b/remotion/src/components/KaraokeCaptions.tsx
index e1303c7..30a2f35 100644
--- a/remotion/src/components/KaraokeCaptions.tsx
+++ b/remotion/src/components/KaraokeCaptions.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useCurrentFrame, useVideoConfig } from "remotion";
 import type { Word, CaptionStyle } from "../types";
+import { captionScale } from "../types";
 
 interface Props {
   words: Word[];
@@ -87,7 +88,8 @@ const KaraokeLine: React.FC<{
 
 export const KaraokeCaptions: React.FC<Props> = ({ words, style }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, height } = useVideoConfig();
+  const s = captionScale(height);
   const currentTime = frame / fps;
 
   const chunks = buildChunks(words, style.wordsPerChunk);
@@ -98,23 +100,24 @@ export const KaraokeCaptions: React.FC<Props> = ({ words, style }) => {
   if (!activeChunk) return null;
 
   const [line1, line2] = splitIntoLines(activeChunk.words);
+  const scaledStyle = { ...style, fontSize: style.fontSize * s };
 
   return (
     <div
       style={{
         position: "absolute",
-        bottom: style.marginBottom,
-        left: 60,
-        right: 60,
+        bottom: style.marginBottom * s,
+        left: 60 * s,
+        right: 60 * s,
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        gap: 4,
+        gap: 4 * s,
       }}
     >
-      <KaraokeLine words={line1} currentTime={currentTime} style={style} />
+      <KaraokeLine words={line1} currentTime={currentTime} style={scaledStyle} />
       {line2.length > 0 && (
-        <KaraokeLine words={line2} currentTime={currentTime} style={style} />
+        <KaraokeLine words={line2} currentTime={currentTime} style={scaledStyle} />
       )}
     </div>
   );
diff --git a/remotion/src/components/SubtleCaptions.tsx b/remotion/src/components/SubtleCaptions.tsx
index ddabaa9..ee35521 100644
--- a/remotion/src/components/SubtleCaptions.tsx
+++ b/remotion/src/components/SubtleCaptions.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";
 import type { Word, CaptionStyle } from "../types";
+import { captionScale } from "../types";
 
 interface Props {
   words: Word[];
@@ -38,7 +39,8 @@ function splitIntoLines(words: Word[]): [Word[], Word[]] {
 
 export const SubtleCaptions: React.FC<Props> = ({ words, style }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, height } = useVideoConfig();
+  const s = captionScale(height);
   const currentTime = frame / fps;
 
   const chunks = buildChunks(words, style.wordsPerChunk);
@@ -60,7 +62,7 @@ export const SubtleCaptions: React.FC<Props> = ({ words, style }) => {
   const translateY = interpolate(
     frame - entryFrame,
     [0, 6],
-    [8, 0],
+    [8 * s, 0],
     { extrapolateRight: "clamp" }
   );
 
@@ -72,13 +74,13 @@ export const SubtleCaptions: React.FC<Props> = ({ words, style }) => {
     <div
       style={{
         position: "absolute",
-        bottom: style.marginBottom,
-        left: 60,
-        right: 60,
+        bottom: style.marginBottom * s,
+        left: 60 * s,
+        right: 60 * s,
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        gap: 2,
+        gap: 2 * s,
         opacity,
         transform: `translateY(${translateY}px)`,
       }}
@@ -86,7 +88,7 @@ export const SubtleCaptions: React.FC<Props> = ({ words, style }) => {
       <span
         style={{
           fontFamily: style.fontFamily,
-          fontSize: style.fontSize,
+          fontSize: style.fontSize * s,
           fontWeight: 400,
           color: style.color,
           textShadow:
diff --git a/remotion/src/types.ts b/remotion/src/types.ts
index 07fae7c..ed17909 100644
--- a/remotion/src/types.ts
+++ b/remotion/src/types.ts
@@ -30,6 +30,13 @@ export interface CaptionProps {
 
 const FONT = "'DM Sans', sans-serif";
 
+// Caption geometry (font sizes, margins, insets) is authored for a 1920-tall
+// vertical canvas. Multiply pixel values by this factor so a shorter canvas
+// (16:9 = 1080 tall, 1:1 = 1080 tall) gets a proportional lower-third instead
+// of vertical-tuned captions floating mid-frame. Vertical → factor 1.0.
+export const REFERENCE_HEIGHT = 1920;
+export const captionScale = (height: number): number => height / REFERENCE_HEIGHT;
+
 export const STYLES: Record<string, CaptionStyle> = {
   hormozi: {
     name: "hormozi",
diff --git a/src/ui/client/EpisodeWorkspace.jsx b/src/ui/client/EpisodeWorkspace.jsx
index 8e26116..8874fb3 100644
--- a/src/ui/client/EpisodeWorkspace.jsx
+++ b/src/ui/client/EpisodeWorkspace.jsx
@@ -498,6 +498,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
       const [whisperModel, setWhisperModel] = useState('base');
       const [captionStyle, setCaptionStyle] = useState('branded');
       const [cropStrategy, setCropStrategy] = useState('face');
+      const [format, setFormat] = useState('vertical');
       const [showTikTokFrame, setShowTikTokFrame] = useState(false);
       const [logoPath, setLogoPath] = useState('');
       const logoRef = useRef();
@@ -585,6 +586,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
           const d = response.config || response;
           if (d.caption_style) setCaptionStyle(d.caption_style);
           if (d.crop_strategy) setCropStrategy(d.crop_strategy);
+          if (d.format) setFormat(d.format);
           if (d.logo_path !== undefined) setLogoPath(d.logo_path || '');
           if (d.outro_path !== undefined) setOutroPath(d.outro_path || '');
           if (d.video_path !== undefined) {
@@ -762,14 +764,14 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
           filePath: file?.file_path || '',
           suggestions,
           deselectedIndices: Array.from(deselected),
-          settings: { captionStyle, cropStrategy, logoPath, outroPath },
+          settings: { captionStyle, cropStrategy, format, logoPath, outroPath },
           phase,
         };
         const key = JSON.stringify(state);
         if (key === prevSyncRef.current) return;
         prevSyncRef.current = key;
         fetch('/api/ui-state', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: key }).catch(() => { });
-      }, [videoPath, file, suggestions, deselected, captionStyle, cropStrategy, logoPath, outroPath, phase]);
+      }, [videoPath, file, suggestions, deselected, captionStyle, cropStrategy, format, logoPath, outroPath, phase]);
 
       // Sync transcript separately (large payload)
       const prevTranscriptRef = useRef(null);
@@ -810,6 +812,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
           if (d.settings) {
             if (d.settings.captionStyle) setCaptionStyle(d.settings.captionStyle);
             if (d.settings.cropStrategy) setCropStrategy(d.settings.cropStrategy);
+            if (d.settings.format) setFormat(d.settings.format);
             if (d.settings.logoPath !== undefined) setLogoPath(d.settings.logoPath);
             if (d.settings.outroPath !== undefined) setOutroPath(d.settings.outroPath);
           }
@@ -871,6 +874,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
 
       const onCaptionChange = (v) => { setCaptionStyle(v); flashSetting('caption'); };
       const onCropChange = (v) => { setCropStrategy(v); flashSetting('crop'); };
+      const onFormatChange = (v) => { setFormat(v); flashSetting('format'); };
 
       // Click clip row → seek source video
       const onClipClick = (idx) => {
@@ -922,7 +926,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
         const data = await api('/batch-clips', {
           method: 'POST', body: JSON.stringify({
             video_path: vp,
-            clips: sc.map(c => ({ start_second: c.start_second, end_second: c.end_second, title: c.title.slice(0, 40), caption_style: captionStyle, crop_strategy: cropStrategy })),
+            clips: sc.map(c => ({ start_second: c.start_second, end_second: c.end_second, title: c.title.slice(0, 40), caption_style: captionStyle, crop_strategy: cropStrategy, format })),
             transcript_words: transcript?.words || [], logo_path: logoPath || undefined, outro_path: outroPath || undefined, clean_fillers: cleanFillers || undefined,
           })
         });
@@ -941,7 +945,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
         const data = await api('/create-clip', {
           method: 'POST', body: JSON.stringify({
             video_path: vp, start_second: c.start_second, end_second: c.end_second,
-            title: c.title.slice(0, 40), caption_style: captionStyle, crop_strategy: cropStrategy,
+            title: c.title.slice(0, 40), caption_style: captionStyle, crop_strategy: cropStrategy, format,
             transcript_words: transcript?.words || [], logo_path: logoPath || undefined, outro_path: outroPath || undefined, clean_fillers: cleanFillers || undefined,
           })
         });
@@ -1031,7 +1035,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
               _source: 'ui',
               videoPath: videoPath.trim(),
               rawTranscriptText: transcriptText.trim() || undefined,
-              settings: { captionStyle, cropStrategy, logoPath, outroPath },
+              settings: { captionStyle, cropStrategy, format, logoPath, outroPath },
             }),
           }).catch(() => { });
         }
@@ -1340,6 +1344,12 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                       <option value="speaker">Speaker aware</option><option value="face">Face detection</option><option value="center">Center</option>
                     </select>
                   </div>
+                  <div>
+                    <label className="field-label">Format</label>
+                    <select value={format} onChange={e => onFormatChange(e.target.value)} disabled={isProcessing}>
+                      <option value="vertical">Vertical 9:16</option><option value="horizontal">Horizontal 16:9</option><option value="square">Square 1:1</option>
+                    </select>
+                  </div>
                 </div>
                 <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                   {captionStyle === 'branded' && (

From b204a442d93106147cec5644dbc49e2f81b208fa Mon Sep 17 00:00:00 2001
From: Nika Siradze <nikushasiradzee@gmail.com>
Date: Sat, 4 Jul 2026 01:01:05 +0400
Subject: [PATCH 03/11] Refine studio palette, unify button system, add "New
 frame" thumbnail action
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Palette: replace the muddy warm-brown surfaces and desaturated tan accent
  with cleaner, higher-contrast values and a crisp orange accent, keeping the
  brand warmth.
- Buttons: make the clips toolbar consistent — the Energy button joins the
  raised ghost family instead of a bespoke outlined style, the overflow button
  matches the row height, and the raised-edge depth is aligned to 4px across
  primary/ghost/danger.
- Thumbnails: add a "New frame" button in the clip thumbnail editor that pulls
  a different ranked frame from the clip and re-renders, one click like
  Regenerate but swapping the background frame.
---
 src/ui/client/ClipDetail.tsx       | 32 +++++++++++++++++
 src/ui/client/EpisodeWorkspace.jsx |  4 +--
 src/ui/public/css/styles.css       | 58 +++++++++++++++---------------
 3 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/src/ui/client/ClipDetail.tsx b/src/ui/client/ClipDetail.tsx
index 470f442..c5b38d5 100644
--- a/src/ui/client/ClipDetail.tsx
+++ b/src/ui/client/ClipDetail.tsx
@@ -53,6 +53,7 @@ export default function ClipDetail() {
   const [line2, setLine2] = useState("");
   const [textOpts, setTextOpts] = useState<[string, string][]>([]);
   const [frameOpts, setFrameOpts] = useState<any[]>([]);
+  const [frameIdx, setFrameIdx] = useState(0);
   const [selFrame, setSelFrame] = useState<{ path: string; info?: any } | null>(null);
   const [busy, setBusy] = useState<string | null>(null);
   const [msg, setMsg] = useState<string | null>(null);
@@ -136,6 +137,34 @@ export default function ClipDetail() {
     } catch (e: any) { setMsg(`Generate failed: ${e.message}`); } finally { setBusy(null); }
   };
 
+  // Pull a different frame from the clip (cycles the ranked candidates) and
+  // re-render — same one-click flow as Regenerate, but swaps the background frame.
+  const newFrame = async () => {
+    setBusy("newframe"); setMsg(null);
+    try {
+      let frames = frameOpts;
+      if (!frames.length) {
+        const r = await api(`/clips/${clip.id}/thumbnail/options?texts=6&frames=8`);
+        if (r.error) throw new Error(r.error);
+        frames = r.frames || [];
+        setFrameOpts(frames);
+        if ((r.texts || []).length) setTextOpts(r.texts);
+      }
+      if (!frames.length) { setMsg("No frames found in this clip"); return; }
+      const next = (frameIdx + 1) % frames.length;
+      setFrameIdx(next);
+      const frame = frames[next];
+      setSelFrame({ path: frame.path, info: frame });
+      const r = await api(`/clips/${clip.id}/thumbnail/render`, {
+        method: "POST",
+        body: JSON.stringify({ line1: line1 || undefined, line2: line2 || undefined, frame_path: frame.path, frame_info: frame }),
+      });
+      if (r.error) throw new Error(r.error);
+      setBust(Date.now()); load();
+      setMsg(`New frame from clip (${next + 1}/${frames.length})`);
+    } catch (e: any) { setMsg(`New frame failed: ${e.message}`); } finally { setBusy(null); }
+  };
+
   const reopen = async () => {
     setBusy("reopen"); setMsg(null);
     try {
@@ -260,6 +289,9 @@ export default function ClipDetail() {
                   <button className="btn btn-primary btn-sm" onClick={renderThumb} disabled={busy !== null || !selFrame}>
                     {busy === "render" ? <div className="spinner sm" /> : (tc.preview_path ? "Regenerate" : "Generate")}
                   </button>
+                  <button className="btn btn-ghost btn-sm" onClick={newFrame} disabled={busy !== null} title="Pull a different frame from the clip">
+                    {busy === "newframe" ? <div className="spinner sm" /> : "New frame"}
+                  </button>
                   <button className="btn btn-ghost btn-sm" onClick={() => fileRef.current?.click()} disabled={busy !== null}>
                     {busy === "upload" ? <div className="spinner sm" /> : "Upload frame"}
                   </button>
diff --git a/src/ui/client/EpisodeWorkspace.jsx b/src/ui/client/EpisodeWorkspace.jsx
index 8874fb3..0233bb3 100644
--- a/src/ui/client/EpisodeWorkspace.jsx
+++ b/src/ui/client/EpisodeWorkspace.jsx
@@ -1557,7 +1557,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                     </div>
                     <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                       {phase === 'review' && videoPath && (
-                        <button className="energy-btn" onClick={analyzeEnergy} disabled={analyzingEnergy || suggestions.length === 0} title="Analyze audio energy levels">
+                        <button className="btn btn-ghost btn-sm" onClick={analyzeEnergy} disabled={analyzingEnergy || suggestions.length === 0} title="Analyze audio energy levels">
                           {analyzingEnergy ? <><div className="spinner sm" /> Analyzing…</> : '⚡ Energy'}
                         </button>
                       )}
@@ -1568,7 +1568,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                       )}
                       {transcript && (phase === 'review' || phase === 'done') && (
                         <div style={{ position: 'relative' }}>
-                          <button className="btn btn-ghost btn-sm overflow-menu-btn" onClick={e => { const m = e.currentTarget.nextElementSibling; m.style.display = m.style.display === 'block' ? 'none' : 'block'; }} style={{ padding: '4px 8px', fontSize: 14, color: 'var(--text3)', lineHeight: 1 }}>
+                          <button className="btn btn-ghost btn-sm overflow-menu-btn" onClick={e => { const m = e.currentTarget.nextElementSibling; m.style.display = m.style.display === 'block' ? 'none' : 'block'; }} style={{ padding: '6px 10px', fontSize: 14, color: 'var(--text3)', lineHeight: 1 }}>
                             {'\u22EF'}
                           </button>
                           <div className="overflow-menu" style={{ display: 'none' }}>
diff --git a/src/ui/public/css/styles.css b/src/ui/public/css/styles.css
index 045c988..01374e2 100644
--- a/src/ui/public/css/styles.css
+++ b/src/ui/public/css/styles.css
@@ -1,37 +1,37 @@
 /* ─── podcli — Shared Styles ─── */
 
 :root {
-  --bg: #141210;
-  --bg2: #191613;
-  --surface: #1e1b17;
-  --surface2: #26221d;
-  --surface3: #2f2a24;
-  --border: #2b2620;
-  --border-hover: #3d362d;
-  --border-h: #3d362d;
-  --text: #e8e6df;
-  --text2: #9a9388;
-  --text3: #8b8579;
-  --accent: #db8b48;
-  --accent-hover: #ec9d5b;
-  --accent-2: #f1b369;
-  --accent-edge: #9c5a28;
-  --accent-subtle: rgba(219, 139, 72, 0.12);
-  --accent-dim: rgba(219, 139, 72, 0.12);
-  --accent-glow: rgba(219, 139, 72, 0.32);
+  --bg: #0f0e0d;
+  --bg2: #16150f;
+  --surface: #1b1a17;
+  --surface2: #24221d;
+  --surface3: #302d27;
+  --border: #2c2822;
+  --border-hover: #403a31;
+  --border-h: #403a31;
+  --text: #f4f2ee;
+  --text2: #ada79c;
+  --text3: #7d766a;
+  --accent: #f2894a;
+  --accent-hover: #ff9f61;
+  --accent-2: #ffb37c;
+  --accent-edge: #b3612a;
+  --accent-subtle: rgba(242, 137, 74, 0.14);
+  --accent-dim: rgba(242, 137, 74, 0.10);
+  --accent-glow: rgba(242, 137, 74, 0.30);
   --green: #4ade80;
-  --green-subtle: rgba(74, 222, 128, 0.07);
-  --green-border: rgba(74, 222, 128, 0.18);
+  --green-subtle: rgba(74, 222, 128, 0.09);
+  --green-border: rgba(74, 222, 128, 0.22);
   --red: #f87171;
-  --red-subtle: rgba(248, 113, 113, 0.07);
-  --red-border: rgba(248, 113, 113, 0.18);
+  --red-subtle: rgba(248, 113, 113, 0.09);
+  --red-border: rgba(248, 113, 113, 0.22);
   --blue: #60a5fa;
-  --blue-subtle: rgba(96, 165, 250, 0.08);
-  --blue-border: rgba(96, 165, 250, 0.18);
+  --blue-subtle: rgba(96, 165, 250, 0.10);
+  --blue-border: rgba(96, 165, 250, 0.22);
   --yellow: #facc15;
-  --glass-bg: rgba(26, 23, 20, 0.55);
-  --glass-border: rgba(255, 255, 255, 0.055);
-  --glass-hi: rgba(255, 255, 255, 0.05);
+  --glass-bg: rgba(22, 21, 15, 0.6);
+  --glass-border: rgba(255, 255, 255, 0.07);
+  --glass-hi: rgba(255, 255, 255, 0.06);
   --radius: 12px;
   --radius-sm: 8px;
   --radius-lg: 16px;
@@ -450,7 +450,7 @@ select {
 .btn-primary:disabled { opacity: 0.25; cursor: not-allowed; }
 .btn-ghost {
   background: var(--surface3); color: var(--text);
-  box-shadow: 0 5px #1a1a1f, 0 11px 18px -5px #000000d9,
+  box-shadow: 0 4px #1a1a1f, 0 11px 18px -5px #000000d9,
     0 0 0 1px #ffffff14, inset 0 1px #ffffff24;
 }
 .btn-ghost:hover:not(:disabled) { background: var(--surface3); }
@@ -458,7 +458,7 @@ select {
 .btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }
 .btn-danger {
   background: var(--surface3); color: var(--text2);
-  box-shadow: 0 5px #1a1a1f, 0 11px 18px -5px #000000d9,
+  box-shadow: 0 4px #1a1a1f, 0 11px 18px -5px #000000d9,
     0 0 0 1px #ffffff14, inset 0 1px #ffffff24;
 }
 .btn-danger:hover:not(:disabled) { color: var(--red); box-shadow: 0 5px #1a1a1f, 0 11px 18px -5px #000000d9, 0 0 0 1px var(--red-border), inset 0 1px #ffffff24; }

From 1172122da73bb9a7a087dfb3f9c23a88b9deacec Mon Sep 17 00:00:00 2001
From: Nika Siradze <nikushasiradzee@gmail.com>
Date: Sat, 4 Jul 2026 01:03:11 +0400
Subject: [PATCH 04/11] Add "New frame" action to the standalone Thumbnail
 studio page

---
 src/ui/client/ThumbnailStudio.tsx | 41 +++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/src/ui/client/ThumbnailStudio.tsx b/src/ui/client/ThumbnailStudio.tsx
index 720c8f3..4f320ba 100644
--- a/src/ui/client/ThumbnailStudio.tsx
+++ b/src/ui/client/ThumbnailStudio.tsx
@@ -15,6 +15,7 @@ export default function ThumbnailStudio() {
   const [line2, setLine2] = useState("");
   const [textOpts, setTextOpts] = useState<[string, string][]>([]);
   const [frameOpts, setFrameOpts] = useState<any[]>([]);
+  const [frameIdx, setFrameIdx] = useState(0);
   const [selFrame, setSelFrame] = useState<{ path: string; info?: any } | null>(null);
   const [preview, setPreview] = useState<string | null>(null);
   const [busy, setBusy] = useState<string | null>(null);
@@ -95,6 +96,43 @@ export default function ThumbnailStudio() {
     } catch (e: any) { setMsg(`Generate failed: ${e.message}`); } finally { setBusy(null); }
   };
 
+  // Pull a different frame from the source (cycles the ranked candidates) and
+  // re-render — same one-click flow as Regenerate, but swaps the background frame.
+  const newFrame = async () => {
+    setBusy("newframe"); setMsg(null);
+    try {
+      let frames = frameOpts;
+      if (!frames.length) {
+        if (!title.trim()) { setMsg("Enter a title first, headlines are written from it"); return; }
+        const r = await api("/thumbnail-studio/options", {
+          method: "POST",
+          body: JSON.stringify({
+            title,
+            video_path: video?.path,
+            start: startS !== "" ? Number(startS) : undefined,
+            end: endS !== "" ? Number(endS) : undefined,
+          }),
+        });
+        frames = r.frames || [];
+        setFrameOpts(frames);
+        if ((r.texts || []).length) setTextOpts(r.texts);
+      }
+      if (!frames.length) { setMsg("No frames found. Pick a video source first."); return; }
+      const next = (frameIdx + 1) % frames.length;
+      setFrameIdx(next);
+      const frame = frames[next];
+      setSelFrame({ path: frame.path, info: frame });
+      const r = await api("/thumbnail-studio/render", {
+        method: "POST",
+        body: JSON.stringify({ title, line1: line1 || undefined, line2: line2 || undefined, frame_path: frame.path, frame_info: frame }),
+      });
+      if (!r.path) throw new Error("no thumbnail produced");
+      setPreview(r.path);
+      setBust(Date.now());
+      setMsg(`New frame from source (${next + 1}/${frames.length})`);
+    } catch (e: any) { setMsg(`New frame failed: ${e.message}`); } finally { setBusy(null); }
+  };
+
   return (
     <div className="app">
       <div className="header">
@@ -161,6 +199,9 @@ export default function ThumbnailStudio() {
               <button className="btn btn-primary btn-sm" onClick={render} disabled={busy !== null || !selFrame}>
                 {busy === "render" ? <div className="spinner sm" /> : (preview ? "Regenerate" : "Generate")}
               </button>
+              <button className="btn btn-ghost btn-sm" onClick={newFrame} disabled={busy !== null} title="Pull a different frame from the source">
+                {busy === "newframe" ? <div className="spinner sm" /> : "New frame"}
+              </button>
               {preview && (
                 <a className="btn btn-ghost btn-sm" href={img(preview, bust)} download="thumbnail.png" style={{ textDecoration: "none" }}>
                   Download

From 21c90589a552e9cdb98e29e6993c5eb278882073 Mon Sep 17 00:00:00 2001
From: Nika Siradze <nikushasiradzee@gmail.com>
Date: Sat, 4 Jul 2026 01:11:01 +0400
Subject: [PATCH 05/11] Standardize form inputs across the studio and unify
 label styling

Every text/number/password/select/textarea now inherits the shared base input
style instead of carrying its own inline font-size and padding, so inputs are
identical across all pages (they previously drifted across seven padding
values). Broaden the base selector to cover bare `input` elements (word
corrections) and strip their one-off inline styling.

Also align the labelStyle helper with the .section-label class so section
headers match regardless of which is used, and update the select-dropdown
arrow SVG to the new palette's text color.
---
 src/ui/client/AnalyticsPage.tsx     |  4 ++--
 src/ui/client/ClipDetail.tsx        |  6 +++---
 src/ui/client/ConfigPage.tsx        |  2 +-
 src/ui/client/ContentStudio.tsx     |  4 ++--
 src/ui/client/EpisodeWorkspace.jsx  | 14 +++++++-------
 src/ui/client/ThumbnailStudio.tsx   | 10 +++++-----
 src/ui/client/ThumbnailTemplate.tsx |  4 ++--
 src/ui/client/lib.ts                |  6 ++++--
 src/ui/public/css/styles.css        |  6 +++---
 9 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/ui/client/AnalyticsPage.tsx b/src/ui/client/AnalyticsPage.tsx
index c63dc55..bcf6f58 100644
--- a/src/ui/client/AnalyticsPage.tsx
+++ b/src/ui/client/AnalyticsPage.tsx
@@ -142,11 +142,11 @@ export default function AnalyticsPage() {
           <div className="thumb-fields">
             <div>
               <label style={labelStyle}>OAuth client ID</label>
-              <input type="text" value={clientId} onChange={(e) => setClientId(e.target.value)} style={{ width: "100%", fontSize: 13, padding: "8px 11px" }} />
+              <input type="text" value={clientId} onChange={(e) => setClientId(e.target.value)} style={{ width: "100%" }} />
             </div>
             <div>
               <label style={labelStyle}>OAuth client secret {hasSecret ? "(saved)" : ""}</label>
-              <input type="password" value={clientSecret} onChange={(e) => setClientSecret(e.target.value)} placeholder={hasSecret ? "••••••••" : ""} style={{ width: "100%", fontSize: 13, padding: "8px 11px" }} />
+              <input type="password" value={clientSecret} onChange={(e) => setClientSecret(e.target.value)} placeholder={hasSecret ? "••••••••" : ""} style={{ width: "100%" }} />
             </div>
           </div>
           <div style={{ marginTop: 12, display: "flex", gap: 10, alignItems: "center" }}>
diff --git a/src/ui/client/ClipDetail.tsx b/src/ui/client/ClipDetail.tsx
index c5b38d5..2f7474b 100644
--- a/src/ui/client/ClipDetail.tsx
+++ b/src/ui/client/ClipDetail.tsx
@@ -245,7 +245,7 @@ export default function ClipDetail() {
 
           <div className="section">
             <label style={labelStyle}>Title & captions</label>
-            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} style={{ width: "100%", fontSize: 14, padding: "10px 13px" }} />
+            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} style={{ width: "100%" }} />
             <div style={{ display: "flex", gap: 10, marginTop: 10, alignItems: "center" }}>
               <select value={captionStyle} onChange={(e) => setCaptionStyle(e.target.value)} style={{ flex: 1 }}>
                 {CAPTION_STYLES.map((s) => <option key={s} value={s}>{s}</option>)}
@@ -283,8 +283,8 @@ export default function ClipDetail() {
                 </div>
               </div>
               <div className="thumb-edit-controls">
-                <input type="text" value={line1} onChange={(e) => setLine1(e.target.value)} placeholder="Line 1" style={{ width: "100%", fontSize: 14, padding: "9px 12px" }} />
-                <input type="text" value={line2} onChange={(e) => setLine2(e.target.value)} placeholder="Line 2 (highlighted)" style={{ width: "100%", fontSize: 14, padding: "9px 12px", marginTop: 8 }} />
+                <input type="text" value={line1} onChange={(e) => setLine1(e.target.value)} placeholder="Line 1" style={{ width: "100%" }} />
+                <input type="text" value={line2} onChange={(e) => setLine2(e.target.value)} placeholder="Line 2 (highlighted)" style={{ width: "100%", marginTop: 8 }} />
                 <div className="set-actions" style={{ marginTop: 10 }}>
                   <button className="btn btn-primary btn-sm" onClick={renderThumb} disabled={busy !== null || !selFrame}>
                     {busy === "render" ? <div className="spinner sm" /> : (tc.preview_path ? "Regenerate" : "Generate")}
diff --git a/src/ui/client/ConfigPage.tsx b/src/ui/client/ConfigPage.tsx
index dbd09bc..726dd02 100644
--- a/src/ui/client/ConfigPage.tsx
+++ b/src/ui/client/ConfigPage.tsx
@@ -124,7 +124,7 @@ export default function ConfigPage() {
                   placeholder={s.set ? "Replace token" : "hf_..."}
                   value={secretInputs[s.key] ?? ""}
                   onChange={(e) => setSecretInputs((p) => ({ ...p, [s.key]: e.target.value }))}
-                  style={{ fontSize: 13, flex: 1 }}
+                  style={{ flex: 1 }}
                 />
                 <button
                   type="button"
diff --git a/src/ui/client/ContentStudio.tsx b/src/ui/client/ContentStudio.tsx
index 98e1f05..3d4ce9c 100644
--- a/src/ui/client/ContentStudio.tsx
+++ b/src/ui/client/ContentStudio.tsx
@@ -104,7 +104,7 @@ export default function ContentStudio() {
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               placeholder="Working title or topic"
-              style={{ width: "100%", fontSize: 14, padding: "10px 13px" }}
+              style={{ width: "100%" }}
             />
 
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", margin: "18px 0 0" }}>
@@ -119,7 +119,7 @@ export default function ContentStudio() {
               value={transcript}
               onChange={(e) => setTranscript(e.target.value)}
               placeholder="Paste the transcript here"
-              style={{ width: "100%", minHeight: 260, fontSize: 13, lineHeight: 1.6, padding: "10px 13px", marginTop: 8, resize: "vertical" }}
+              style={{ width: "100%", minHeight: 260, lineHeight: 1.6, marginTop: 8, resize: "vertical" }}
             />
 
             <div style={{ display: "flex", gap: 10, marginTop: 12, alignItems: "center" }}>
diff --git a/src/ui/client/EpisodeWorkspace.jsx b/src/ui/client/EpisodeWorkspace.jsx
index 0233bb3..8cc18d8 100644
--- a/src/ui/client/EpisodeWorkspace.jsx
+++ b/src/ui/client/EpisodeWorkspace.jsx
@@ -1198,7 +1198,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                 <input type="text" placeholder="Or paste a local path: /Users/you/episode.mp4"
                   value={videoPath} onChange={e => setVideoPath(e.target.value)}
                   disabled={isProcessing || browsing}
-                  style={{ marginTop: 8, fontSize: 12, padding: '9px 13px', background: 'var(--bg)', borderColor: videoPath ? 'var(--green-border)' : 'var(--border)' }} />
+                  style={{ marginTop: 8, borderColor: videoPath ? 'var(--green-border)' : 'var(--border)' }} />
               </div>
 
               {/* Transcript */}
@@ -1232,7 +1232,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                     <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 10 }}>
                       <span style={{ fontSize: 12, color: 'var(--text2)', whiteSpace: 'nowrap' }}>Time offset</span>
                       <input type="number" step="0.5" value={timeAdjust} onChange={e => setTimeAdjust(parseFloat(e.target.value) || 0)}
-                        style={{ width: 72, padding: '7px 10px', fontSize: 12 }} disabled={isProcessing} />
+                        style={{ width: 72 }} disabled={isProcessing} />
                       <span style={{ fontSize: 11, color: 'var(--text3)' }}>sec</span>
                     </div>
                   </div>
@@ -1303,7 +1303,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                 {/* Presets */}
                 {presets.length > 0 && (
                   <div className="preset-bar">
-                    <select value={activePreset} onChange={e => loadPreset(e.target.value)} disabled={isProcessing} style={{ fontSize: 12 }}>
+                    <select value={activePreset} onChange={e => loadPreset(e.target.value)} disabled={isProcessing}>
                       <option value="">Load preset…</option>
                       {presets.map(p => <option key={p.name || p} value={p.name || p}>{p.name || p}</option>)}
                     </select>
@@ -1396,7 +1396,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                     <div className="advanced-grid fade-in">
                       <div className="field">
                         <label className="field-label">Quality</label>
-                        <select value={quality} onChange={e => setQuality(e.target.value)} disabled={isProcessing} style={{ fontSize: 12, padding: '8px 12px' }}>
+                        <select value={quality} onChange={e => setQuality(e.target.value)} disabled={isProcessing}>
                           <option value="max">Max</option><option value="high">High</option><option value="fast">Fast</option>
                         </select>
                       </div>
@@ -1450,10 +1450,10 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                     </div>
                     <div style={{ display: 'flex', gap: 6, marginBottom: 8, alignItems: 'center' }}>
                       <input value={correctionWord} onChange={e => setCorrectionWord(e.target.value)}
-                        placeholder="Wrong (e.g. Boxel)" style={{ flex: 1, fontSize: 12, padding: '8px 12px', background: 'var(--surface)', color: 'var(--text)', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)' }} />
+                        placeholder="Wrong (e.g. Boxel)" style={{ flex: 1 }} />
                       <span style={{ color: 'var(--text3)', fontSize: 12, flexShrink: 0 }}>{'\u2192'}</span>
                       <input value={correctionFix} onChange={e => setCorrectionFix(e.target.value)}
-                        placeholder="Correct (e.g. Voxel)" style={{ flex: 1, fontSize: 12, padding: '8px 12px', background: 'var(--surface)', color: 'var(--text)', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)' }}
+                        placeholder="Correct (e.g. Voxel)" style={{ flex: 1 }}
                         onKeyDown={e => { if (e.key === 'Enter' && correctionWord.trim() && correctionFix.trim()) {
                           api('/corrections/add', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ wrong: correctionWord.trim(), correct: correctionFix.trim() }) })
                             .then(d => { if (d.corrections) { setCorrections(d.corrections); setCorrectionWord(''); setCorrectionFix(''); } });
@@ -1516,7 +1516,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                     value={momentText}
                     onChange={(e) => { setMomentText(e.target.value); setMomentNotice(null); }}
                     disabled={findingMoment}
-                    style={{ width: '100%', resize: 'vertical', fontFamily: 'inherit' }}
+                    style={{ width: '100%', resize: 'vertical' }}
                   />
                   <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8 }}>
                     <button className="btn btn-primary btn-sm" onClick={findMoment} disabled={!momentText.trim() || findingMoment}>
diff --git a/src/ui/client/ThumbnailStudio.tsx b/src/ui/client/ThumbnailStudio.tsx
index 4f320ba..c0af35d 100644
--- a/src/ui/client/ThumbnailStudio.tsx
+++ b/src/ui/client/ThumbnailStudio.tsx
@@ -161,9 +161,9 @@ export default function ThumbnailStudio() {
           {video && <span style={{ fontSize: 12, color: "var(--text2)" }}>{video.name}</span>}
         </div>
         <div style={{ display: "flex", gap: 10, marginTop: 12, alignItems: "center", flexWrap: "wrap" }}>
-          <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title to write headlines from" style={{ flex: "1 1 280px", fontSize: 14, padding: "10px 13px" }} />
-          <input type="number" min={0} value={startS} onChange={(e) => setStartS(e.target.value)} placeholder="Start (s)" style={{ width: 90, fontSize: 13, padding: "9px 10px" }} />
-          <input type="number" min={0} value={endS} onChange={(e) => setEndS(e.target.value)} placeholder="End (s)" style={{ width: 90, fontSize: 13, padding: "9px 10px" }} />
+          <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title to write headlines from" style={{ flex: "1 1 280px" }} />
+          <input type="number" min={0} value={startS} onChange={(e) => setStartS(e.target.value)} placeholder="Start (s)" style={{ width: 90 }} />
+          <input type="number" min={0} value={endS} onChange={(e) => setEndS(e.target.value)} placeholder="End (s)" style={{ width: 90 }} />
           <button className="btn btn-primary btn-sm" onClick={loadOptions} disabled={busy !== null}>
             {busy === "options" ? <><div className="spinner sm" /> Finding options…</> : (textOpts.length || frameOpts.length ? "Refresh options" : "Get options")}
           </button>
@@ -193,8 +193,8 @@ export default function ThumbnailStudio() {
             </div>
           </div>
           <div className="thumb-edit-controls">
-            <input type="text" value={line1} onChange={(e) => setLine1(e.target.value)} placeholder="Line 1" style={{ width: "100%", fontSize: 14, padding: "9px 12px" }} />
-            <input type="text" value={line2} onChange={(e) => setLine2(e.target.value)} placeholder="Line 2 (highlighted)" style={{ width: "100%", fontSize: 14, padding: "9px 12px", marginTop: 8 }} />
+            <input type="text" value={line1} onChange={(e) => setLine1(e.target.value)} placeholder="Line 1" style={{ width: "100%" }} />
+            <input type="text" value={line2} onChange={(e) => setLine2(e.target.value)} placeholder="Line 2 (highlighted)" style={{ width: "100%", marginTop: 8 }} />
             <div className="set-actions" style={{ marginTop: 10 }}>
               <button className="btn btn-primary btn-sm" onClick={render} disabled={busy !== null || !selFrame}>
                 {busy === "render" ? <div className="spinner sm" /> : (preview ? "Regenerate" : "Generate")}
diff --git a/src/ui/client/ThumbnailTemplate.tsx b/src/ui/client/ThumbnailTemplate.tsx
index 63accc5..9663abe 100644
--- a/src/ui/client/ThumbnailTemplate.tsx
+++ b/src/ui/client/ThumbnailTemplate.tsx
@@ -122,14 +122,14 @@ export default function ThumbnailTemplate({ onBack }: { onBack?: () => void }) {
           <div className="thumb-swatch-row">
             {isHex(v) && <input type="color" value={v} onChange={(e) => set(f.k, e.target.value)} />}
             {!isHex(v) && <span style={{ width: 28, height: 28, borderRadius: 6, border: "1px solid var(--border)", background: v || "transparent", flexShrink: 0 }} />}
-            <input type="text" value={v ?? ""} onChange={(e) => set(f.k, e.target.value)} style={{ fontSize: 12, padding: "7px 10px", flex: 1, minWidth: 0, fontFamily: "var(--font-mono, monospace)" }} />
+            <input type="text" value={v ?? ""} onChange={(e) => set(f.k, e.target.value)} style={{ flex: 1, minWidth: 0 }} />
           </div>
         ) : f.t === "select" ? (
           <select value={v ?? ""} onChange={(e) => set(f.k, e.target.value)}>{f.opts!.map((o) => <option key={o} value={o}>{o}</option>)}</select>
         ) : (
           <input type={f.t === "num" ? "number" : "text"} value={v ?? ""} step="any"
             onChange={(e) => set(f.k, f.t === "num" ? (e.target.value === "" ? "" : Number(e.target.value)) : e.target.value)}
-            style={{ width: "100%", fontSize: 13, padding: "8px 11px" }} />
+            style={{ width: "100%" }} />
         )}
       </div>
     );
diff --git a/src/ui/client/lib.ts b/src/ui/client/lib.ts
index 5859277..1796059 100644
--- a/src/ui/client/lib.ts
+++ b/src/ui/client/lib.ts
@@ -6,13 +6,15 @@ export const fmt = (s: number) =>
 export const fmtMs = (s: number) =>
   `${fmt(s)}.${String(Math.floor((s % 1) * 1000)).padStart(3, "0")}`;
 
+// Kept in sync with the .section-label CSS class so section headers look
+// identical whether set via this object or the class.
 export const labelStyle: CSSProperties = {
   fontSize: 11,
   fontWeight: 700,
-  letterSpacing: "0.5px",
+  letterSpacing: "0.8px",
   textTransform: "uppercase",
   color: "var(--text2)",
-  marginBottom: 8,
+  marginBottom: 10,
   display: "block",
 };
 
diff --git a/src/ui/public/css/styles.css b/src/ui/public/css/styles.css
index 01374e2..a0d849c 100644
--- a/src/ui/public/css/styles.css
+++ b/src/ui/public/css/styles.css
@@ -404,13 +404,13 @@ h1 { font-size: 28px; font-weight: 700; letter-spacing: 0; line-height: 1.15; }
 .section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: var(--text2); margin-bottom: 10px; text-transform: uppercase; }
 
 /* ─── Form Elements ─── */
-input[type="text"], input[type="number"], input[type="password"], select, textarea {
+input[type="text"], input[type="number"], input[type="password"], input:not([type]), select, textarea {
   width: 100%; background: var(--surface); border: 1px solid var(--border);
   border-radius: var(--radius); padding: 11px 14px;
   color: var(--text); font-family: inherit; font-size: 14px;
   outline: none; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
 }
-input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
+input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input:not([type]):focus, select:focus, textarea:focus {
   border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle);
 }
 input[type="text"]:focus-visible,
@@ -427,7 +427,7 @@ textarea {
 }
 select {
   appearance: none; cursor: pointer; padding-right: 34px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239a9388' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23ada79c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat; background-position: right 14px center;
 }
 

From de2b40e6455b188639d0a2e725e8a9fea49a1a66 Mon Sep 17 00:00:00 2001
From: Nika Siradze <nikushasiradzee@gmail.com>
Date: Sat, 4 Jul 2026 01:17:00 +0400
Subject: [PATCH 06/11] Extract repeated hint text into reusable .hint /
 .hint-xs classes

Muted helper and caption text was styled inline with font-size + var(--text3)
in ~30 places across the studio pages, drifting between 10px and 11px. Add
.hint (11px) and .hint-xs (10px) utility classes and replace those inline
styles, keeping only per-element layout props (margins, alignment).
---
 src/ui/client/AnalyticsPage.tsx    |  2 +-
 src/ui/client/ClipDetail.tsx       | 18 +++++++++---------
 src/ui/client/ContentStudio.tsx    | 10 +++++-----
 src/ui/client/EpisodeWorkspace.jsx | 20 ++++++++++----------
 src/ui/client/ReframeEditor.tsx    |  2 +-
 src/ui/client/ThumbnailStudio.tsx  |  8 ++++----
 src/ui/public/css/styles.css       |  3 +++
 7 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/ui/client/AnalyticsPage.tsx b/src/ui/client/AnalyticsPage.tsx
index bcf6f58..1ca8efb 100644
--- a/src/ui/client/AnalyticsPage.tsx
+++ b/src/ui/client/AnalyticsPage.tsx
@@ -201,7 +201,7 @@ export default function AnalyticsPage() {
               <Link key={c.id} to={`/clip/${c.id}`} style={{ display: "flex", alignItems: "center", gap: 12, padding: "9px 0", borderBottom: "1px solid var(--border)", textDecoration: "none", color: "inherit" }}>
                 <div style={{ flex: 1, minWidth: 0 }}>
                   <div style={{ fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.title}</div>
-                  <div style={{ fontSize: 11, color: "var(--text3)", marginTop: 2 }}>{fmt(c.duration)} · {c.caption_style}{c.content_type ? ` · ${c.content_type}` : ""}</div>
+                  <div className="hint" style={{ marginTop: 2 }}>{fmt(c.duration)} · {c.caption_style}{c.content_type ? ` · ${c.content_type}` : ""}</div>
                 </div>
                 <div style={{ display: "flex", gap: 16, fontSize: 12, fontVariantNumeric: "tabular-nums" }}>
                   <span title="Views (reach)">{fmtViews(c.metrics?.views || 0)} views</span>
diff --git a/src/ui/client/ClipDetail.tsx b/src/ui/client/ClipDetail.tsx
index 2f7474b..763d446 100644
--- a/src/ui/client/ClipDetail.tsx
+++ b/src/ui/client/ClipDetail.tsx
@@ -237,7 +237,7 @@ export default function ClipDetail() {
             {clip.content_type && <span>{clip.content_type}</span>}
             {clip.file_size_mb != null && <span>{clip.file_size_mb.toFixed(1)}MB</span>}
           </div>
-          <div style={{ fontSize: 11, color: "var(--text3)", marginTop: 8 }}>{basename(clip.source_video)}</div>
+          <div className="hint" style={{ marginTop: 8 }}>{basename(clip.source_video)}</div>
         </div>
 
         <div className="clip-detail-editor">
@@ -276,7 +276,7 @@ export default function ClipDetail() {
                   ) : selFrame ? (
                     <img src={img(selFrame.path, bust)} alt="selected frame" />
                   ) : (
-                    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "var(--text3)", fontSize: 11, textAlign: "center", padding: 12 }}>
+                    <div className="hint" style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", textAlign: "center", padding: 12 }}>
                       Get options, pick a frame, then generate
                     </div>
                   )}
@@ -297,13 +297,13 @@ export default function ClipDetail() {
                   </button>
                   <input ref={fileRef} type="file" accept=".png,.jpg,.jpeg,.webp" style={{ display: "none" }} onChange={(e) => e.target.files?.[0] && uploadFrame(e.target.files[0])} />
                 </div>
-                <div style={{ fontSize: 11, color: "var(--text3)", marginTop: 8 }}>Leave line 1 and line 2 empty to auto-write the text.</div>
+                <div className="hint" style={{ marginTop: 8 }}>Leave line 1 and line 2 empty to auto-write the text.</div>
               </div>
             </div>
 
             {textOpts.length > 0 && (
               <div style={{ marginTop: 16 }}>
-                <div style={{ fontSize: 11, color: "var(--text3)", marginBottom: 6 }}>Text options · click to use</div>
+                <div className="hint" style={{ marginBottom: 6 }}>Text options · click to use</div>
                 <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                   {textOpts.map(([l1, l2], i) => (
                     <button key={i} className={`title-option ${line1 === l1 && line2 === l2 ? "selected" : ""}`} onClick={() => { setLine1(l1); setLine2(l2); }}>
@@ -316,7 +316,7 @@ export default function ClipDetail() {
 
             {frameOpts.length > 0 && (
               <div style={{ marginTop: 16 }}>
-                <div style={{ fontSize: 11, color: "var(--text3)", marginBottom: 6 }}>Frame options · click to select</div>
+                <div className="hint" style={{ marginBottom: 6 }}>Frame options · click to select</div>
                 <div className="thumb-variations">
                   {frameOpts.map((f, i) => (
                     <button key={i} className={`thumb-variation ${selFrame?.path === f.path ? "selected" : ""}`} onClick={() => setSelFrame({ path: f.path, info: f })} disabled={busy !== null}>
@@ -341,7 +341,7 @@ export default function ClipDetail() {
               <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                 {clip.generated_titles?.length ? (
                   <div>
-                    <div style={{ fontSize: 11, color: "var(--text3)", marginBottom: 6 }}>Title options · click to use</div>
+                    <div className="hint" style={{ marginBottom: 6 }}>Title options · click to use</div>
                     <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                       {clip.generated_titles.map((t, i) => {
                         const clean = t.replace(/^\d+\.\s*/, "");
@@ -357,7 +357,7 @@ export default function ClipDetail() {
                 {clip.description ? (
                   <div>
                     <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
-                      <span style={{ fontSize: 11, color: "var(--text3)" }}>Description</span>
+                      <span className="hint">Description</span>
                       <CopyButton text={clip.description} />
                     </div>
                     <div style={{ fontSize: 13, color: "var(--text2)", lineHeight: 1.6, whiteSpace: "pre-wrap" }}>{clip.description}</div>
@@ -366,7 +366,7 @@ export default function ClipDetail() {
                 {clip.tags ? (
                   <div>
                     <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
-                      <span style={{ fontSize: 11, color: "var(--text3)" }}>Tags</span>
+                      <span className="hint">Tags</span>
                       <CopyButton text={clip.tags} />
                     </div>
                     <div style={{ fontSize: 12, color: "var(--text2)", lineHeight: 1.6 }}>{clip.tags}</div>
@@ -375,7 +375,7 @@ export default function ClipDetail() {
                 {clip.hashtags ? (
                   <div>
                     <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
-                      <span style={{ fontSize: 11, color: "var(--text3)" }}>Hashtags</span>
+                      <span className="hint">Hashtags</span>
                       <CopyButton text={clip.hashtags} />
                     </div>
                     <div style={{ fontSize: 12, color: "var(--accent)", lineHeight: 1.6 }}>{clip.hashtags}</div>
diff --git a/src/ui/client/ContentStudio.tsx b/src/ui/client/ContentStudio.tsx
index 3d4ce9c..01296f1 100644
--- a/src/ui/client/ContentStudio.tsx
+++ b/src/ui/client/ContentStudio.tsx
@@ -131,7 +131,7 @@ export default function ContentStudio() {
                 {busy ? <><div className="spinner sm" /> Generating…</> : "Generate"}
               </button>
             </div>
-            {busy && stage && <div style={{ fontSize: 11, color: "var(--text3)", marginTop: 10 }}>{stage}</div>}
+            {busy && stage && <div className="hint" style={{ marginTop: 10 }}>{stage}</div>}
             {msg && <div className="set-note ok" style={{ marginTop: 10, wordBreak: "break-word" }}>{msg}</div>}
           </div>
         </div>
@@ -145,7 +145,7 @@ export default function ContentStudio() {
             <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
               {result.titles?.length ? (
                 <div className="section">
-                  <div style={{ fontSize: 11, color: "var(--text3)", marginBottom: 6 }}>Title options · click to copy</div>
+                  <div className="hint" style={{ marginBottom: 6 }}>Title options · click to copy</div>
                   <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                     {result.titles.map((t, i) => {
                       const clean = t.replace(/^\d+\.\s*/, "");
@@ -163,7 +163,7 @@ export default function ContentStudio() {
               {result.description ? (
                 <div className="section stream-in">
                   <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
-                    <span style={{ fontSize: 11, color: "var(--text3)" }}>Description</span>
+                    <span className="hint">Description</span>
                     <CopyButton text={result.description} />
                   </div>
                   <div style={{ fontSize: 13, color: "var(--text2)", lineHeight: 1.6, whiteSpace: "pre-wrap" }}>{result.description}</div>
@@ -173,7 +173,7 @@ export default function ContentStudio() {
               {result.tags ? (
                 <div className="section stream-in">
                   <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
-                    <span style={{ fontSize: 11, color: "var(--text3)" }}>Tags</span>
+                    <span className="hint">Tags</span>
                     <CopyButton text={result.tags} />
                   </div>
                   <div style={{ fontSize: 12, color: "var(--text2)", lineHeight: 1.6 }}>{result.tags}</div>
@@ -183,7 +183,7 @@ export default function ContentStudio() {
               {result.hashtags ? (
                 <div className="section stream-in">
                   <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
-                    <span style={{ fontSize: 11, color: "var(--text3)" }}>Hashtags</span>
+                    <span className="hint">Hashtags</span>
                     <CopyButton text={result.hashtags} />
                   </div>
                   <div style={{ fontSize: 12, color: "var(--accent)", lineHeight: 1.6 }}>{result.hashtags}</div>
diff --git a/src/ui/client/EpisodeWorkspace.jsx b/src/ui/client/EpisodeWorkspace.jsx
index 8cc18d8..c048b04 100644
--- a/src/ui/client/EpisodeWorkspace.jsx
+++ b/src/ui/client/EpisodeWorkspace.jsx
@@ -461,7 +461,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
             <div className="mcp-hints-subtitle">
               {collapsed ? `${hints.length} prompts` : 'Click to copy'}
             </div>
-            <span style={{ fontSize: 10, color: 'var(--text3)', transition: 'transform 0.2s', transform: collapsed ? 'rotate(-90deg)' : 'rotate(0)', marginLeft: 4 }}>{'\u25BC'}</span>
+            <span className="hint-xs" style={{ transition: 'transform 0.2s', transform: collapsed ? 'rotate(-90deg)' : 'rotate(0)', marginLeft: 4 }}>{'\u25BC'}</span>
           </div>
           {!collapsed && (
             <div className="mcp-hint-list">
@@ -1155,7 +1155,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                   <br/>
                   <span style={{ color: 'var(--text3)' }}>1.</span> <a href="https://huggingface.co/pyannote/speaker-diarization-3.1" target="_blank" rel="noopener" style={{ color: '#facc15', textDecoration: 'none' }}>Accept model terms</a>
                   {' → '}
-                  <span style={{ color: 'var(--text3)' }}>2.</span> <a href="https://huggingface.co/settings/tokens" target="_blank" rel="noopener" style={{ color: '#facc15', textDecoration: 'none' }}>Get free token</a> <span style={{ fontSize: 10, color: 'var(--text3)' }}>(Read permission)</span>
+                  <span style={{ color: 'var(--text3)' }}>2.</span> <a href="https://huggingface.co/settings/tokens" target="_blank" rel="noopener" style={{ color: '#facc15', textDecoration: 'none' }}>Get free token</a> <span className="hint-xs">(Read permission)</span>
                   {' → '}
                   <span style={{ color: 'var(--text3)' }}>3.</span> Add <code style={{ fontFamily: 'var(--font-mono)', fontSize: 11, padding: '1px 5px', background: 'rgba(250,204,21,0.1)', borderRadius: 4, color: '#facc15' }}>HF_TOKEN=hf_...</code> to your <code style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>.env</code>
                 </div>
@@ -1233,7 +1233,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                       <span style={{ fontSize: 12, color: 'var(--text2)', whiteSpace: 'nowrap' }}>Time offset</span>
                       <input type="number" step="0.5" value={timeAdjust} onChange={e => setTimeAdjust(parseFloat(e.target.value) || 0)}
                         style={{ width: 72 }} disabled={isProcessing} />
-                      <span style={{ fontSize: 11, color: 'var(--text3)' }}>sec</span>
+                      <span className="hint">sec</span>
                     </div>
                   </div>
                 )}
@@ -1440,12 +1440,12 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                   <span style={{ fontSize: 10, transition: 'transform 0.15s', transform: correctionsOpen ? 'rotate(90deg)' : 'rotate(0deg)', display: 'inline-block' }}>▶</span>
                   Word Corrections
                   {Object.keys(corrections).length > 0 && (
-                    <span style={{ fontSize: 10, color: 'var(--text3)', fontWeight: 400 }}>({Object.keys(corrections).length})</span>
+                    <span className="hint-xs" style={{ fontWeight: 400 }}>({Object.keys(corrections).length})</span>
                   )}
                 </div>
                 {correctionsOpen && (
                   <div className="fade-in" style={{ marginTop: 8 }}>
-                    <div style={{ fontSize: 11, color: 'var(--text3)', marginBottom: 8, lineHeight: 1.4 }}>
+                    <div className="hint" style={{ marginBottom: 8, lineHeight: 1.4 }}>
                       Fix Whisper misheard words. Applied automatically to all transcripts.
                     </div>
                     <div style={{ display: 'flex', gap: 6, marginBottom: 8, alignItems: 'center' }}>
@@ -1716,7 +1716,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                   <div className="section-label" style={{ cursor: 'pointer', userSelect: 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                     onClick={() => setHistoryOpen(!historyOpen)}>
                     <span>History ({clipHistory.length})</span>
-                    <span style={{ fontSize: 10, color: 'var(--text3)', transition: 'transform 0.2s', transform: historyOpen ? 'rotate(180deg)' : 'rotate(0)' }}>{'\u25BC'}</span>
+                    <span className="hint-xs" style={{ transition: 'transform 0.2s', transform: historyOpen ? 'rotate(180deg)' : 'rotate(0)' }}>{'\u25BC'}</span>
                   </div>
                   {historyOpen && (
                     <div className="fade-in" style={{ display: 'flex', flexDirection: 'column', gap: 4, maxHeight: 300, overflowY: 'auto', marginTop: 8 }}>
@@ -1731,7 +1731,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                             <div style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--green)', flexShrink: 0 }} />
                             <div style={{ flex: 1, minWidth: 0 }}>
                               <div style={{ fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.title || fname}</div>
-                              <div style={{ color: 'var(--text3)', fontSize: 11, marginTop: 2 }}>
+                              <div className="hint" style={{ marginTop: 2 }}>
                                 {c.duration}s {'\u00B7'} {c.file_size_mb?.toFixed(1)}MB {'\u00B7'} {c.caption_style} {'\u00B7'} {timeStr}
                               </div>
                             </div>
@@ -1851,16 +1851,16 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                     <div>
                       <input type="number" step="0.5" value={editForm.start} onChange={e => setEditForm(f => ({ ...f, start: parseFloat(e.target.value) || 0 }))}
                         style={{ textAlign: 'center' }} />
-                      <div style={{ fontSize: 10, color: 'var(--text3)', textAlign: 'center', marginTop: 2 }}>{fmt(editForm.start)}</div>
+                      <div className="hint-xs" style={{ textAlign: 'center', marginTop: 2 }}>{fmt(editForm.start)}</div>
                     </div>
                     <div className="arrow">{'\u2192'}</div>
                     <div>
                       <input type="number" step="0.5" value={editForm.end} onChange={e => setEditForm(f => ({ ...f, end: parseFloat(e.target.value) || 0 }))}
                         style={{ textAlign: 'center' }} />
-                      <div style={{ fontSize: 10, color: 'var(--text3)', textAlign: 'center', marginTop: 2 }}>{fmt(editForm.end)}</div>
+                      <div className="hint-xs" style={{ textAlign: 'center', marginTop: 2 }}>{fmt(editForm.end)}</div>
                     </div>
                   </div>
-                  <div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 6, textAlign: 'center' }}>
+                  <div className="hint" style={{ marginTop: 6, textAlign: 'center' }}>
                     Duration: {Math.round(editForm.end - editForm.start)}s
                   </div>
                 </div>
diff --git a/src/ui/client/ReframeEditor.tsx b/src/ui/client/ReframeEditor.tsx
index b6d24e4..f86e2ab 100644
--- a/src/ui/client/ReframeEditor.tsx
+++ b/src/ui/client/ReframeEditor.tsx
@@ -156,7 +156,7 @@ export default function ReframeEditor({
           <div className="rf-playhead" style={{ left: `${pos(tAbs)}%` }} />
         </div>
 
-        <div style={{ fontSize: 11, color: "var(--text3)", marginTop: 6 }}>
+        <div className="hint" style={{ marginTop: 6 }}>
           {detectingCuts ? "Detecting camera switches…" : cuts.length ? `${cuts.length} camera switch${cuts.length > 1 ? "es" : ""} detected. A keyframe near one snaps to it.` : "No camera switches detected"}
         </div>
 
diff --git a/src/ui/client/ThumbnailStudio.tsx b/src/ui/client/ThumbnailStudio.tsx
index c0af35d..ec05026 100644
--- a/src/ui/client/ThumbnailStudio.tsx
+++ b/src/ui/client/ThumbnailStudio.tsx
@@ -186,7 +186,7 @@ export default function ThumbnailStudio() {
               ) : selFrame ? (
                 <img src={img(selFrame.path, bust)} alt="selected frame" />
               ) : (
-                <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "var(--text3)", fontSize: 11, textAlign: "center", padding: 12 }}>
+                <div className="hint" style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", textAlign: "center", padding: 12 }}>
                   Pick a source and get options, or upload an image
                 </div>
               )}
@@ -208,13 +208,13 @@ export default function ThumbnailStudio() {
                 </a>
               )}
             </div>
-            <div style={{ fontSize: 11, color: "var(--text3)", marginTop: 8 }}>Leave line 1 and line 2 empty to auto-write the text.</div>
+            <div className="hint" style={{ marginTop: 8 }}>Leave line 1 and line 2 empty to auto-write the text.</div>
           </div>
         </div>
 
         {textOpts.length > 0 && (
           <div style={{ marginTop: 16 }}>
-            <div style={{ fontSize: 11, color: "var(--text3)", marginBottom: 6 }}>Text options · click to use</div>
+            <div className="hint" style={{ marginBottom: 6 }}>Text options · click to use</div>
             <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
               {textOpts.map(([l1, l2], i) => (
                 <button key={i} className={`title-option stream-in ${line1 === l1 && line2 === l2 ? "selected" : ""}`} style={{ animationDelay: `${i * 40}ms` }} onClick={() => { setLine1(l1); setLine2(l2); }}>
@@ -227,7 +227,7 @@ export default function ThumbnailStudio() {
 
         {frameOpts.length > 0 && (
           <div style={{ marginTop: 16 }}>
-            <div style={{ fontSize: 11, color: "var(--text3)", marginBottom: 6 }}>Frame options · click to select</div>
+            <div className="hint" style={{ marginBottom: 6 }}>Frame options · click to select</div>
             <div className="thumb-variations">
               {frameOpts.map((f, i) => (
                 <button key={i} className={`thumb-variation stream-in ${selFrame?.path === f.path ? "selected" : ""}`} style={{ animationDelay: `${i * 40}ms` }} onClick={() => setSelFrame({ path: f.path, info: f })} disabled={busy !== null}>
diff --git a/src/ui/public/css/styles.css b/src/ui/public/css/styles.css
index a0d849c..4573031 100644
--- a/src/ui/public/css/styles.css
+++ b/src/ui/public/css/styles.css
@@ -402,6 +402,9 @@ h1 { font-size: 28px; font-weight: 700; letter-spacing: 0; line-height: 1.15; }
 /* ─── Sections ─── */
 .section { margin-bottom: 24px; }
 .section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: var(--text2); margin-bottom: 10px; text-transform: uppercase; }
+/* Muted helper / caption text. Reused instead of per-element inline font-size + color. */
+.hint { font-size: 11px; color: var(--text3); line-height: 1.5; }
+.hint-xs { font-size: 10px; color: var(--text3); line-height: 1.5; }
 
 /* ─── Form Elements ─── */
 input[type="text"], input[type="number"], input[type="password"], input:not([type]), select, textarea {

From 25599dccc07c2071c0ffad1b62bbb65b934c1208 Mon Sep 17 00:00:00 2001
From: Nika Siradze <nikushasiradzee@gmail.com>
Date: Sat, 4 Jul 2026 01:22:01 +0400
Subject: [PATCH 07/11] Extract secondary meta text into a reusable .meta class

---
 src/ui/client/ClipDetail.tsx        | 2 +-
 src/ui/client/ConfigPage.tsx        | 2 +-
 src/ui/client/ContentStudio.tsx     | 2 +-
 src/ui/client/EpisodeWorkspace.jsx  | 6 +++---
 src/ui/client/ThumbnailStudio.tsx   | 2 +-
 src/ui/client/ThumbnailTemplate.tsx | 2 +-
 src/ui/public/css/styles.css        | 1 +
 7 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/ui/client/ClipDetail.tsx b/src/ui/client/ClipDetail.tsx
index 763d446..28de101 100644
--- a/src/ui/client/ClipDetail.tsx
+++ b/src/ui/client/ClipDetail.tsx
@@ -369,7 +369,7 @@ export default function ClipDetail() {
                       <span className="hint">Tags</span>
                       <CopyButton text={clip.tags} />
                     </div>
-                    <div style={{ fontSize: 12, color: "var(--text2)", lineHeight: 1.6 }}>{clip.tags}</div>
+                    <div className="meta" style={{ lineHeight: 1.6 }}>{clip.tags}</div>
                   </div>
                 ) : null}
                 {clip.hashtags ? (
diff --git a/src/ui/client/ConfigPage.tsx b/src/ui/client/ConfigPage.tsx
index 726dd02..8daf4e1 100644
--- a/src/ui/client/ConfigPage.tsx
+++ b/src/ui/client/ConfigPage.tsx
@@ -162,7 +162,7 @@ export default function ConfigPage() {
               {importing ? "Importing…" : "Import"}
             </button>
           </div>
-          <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 10, fontSize: 12, color: "var(--text2)" }}>
+          <label className="meta" style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 10 }}>
             <input type="checkbox" checked={activate} onChange={(e) => setActivate(e.target.checked)} />
             Use imported profile
           </label>
diff --git a/src/ui/client/ContentStudio.tsx b/src/ui/client/ContentStudio.tsx
index 01296f1..3cf5627 100644
--- a/src/ui/client/ContentStudio.tsx
+++ b/src/ui/client/ContentStudio.tsx
@@ -176,7 +176,7 @@ export default function ContentStudio() {
                     <span className="hint">Tags</span>
                     <CopyButton text={result.tags} />
                   </div>
-                  <div style={{ fontSize: 12, color: "var(--text2)", lineHeight: 1.6 }}>{result.tags}</div>
+                  <div className="meta" style={{ lineHeight: 1.6 }}>{result.tags}</div>
                 </div>
               ) : null}
 
diff --git a/src/ui/client/EpisodeWorkspace.jsx b/src/ui/client/EpisodeWorkspace.jsx
index c048b04..8db4563 100644
--- a/src/ui/client/EpisodeWorkspace.jsx
+++ b/src/ui/client/EpisodeWorkspace.jsx
@@ -1150,7 +1150,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
             <div className="fade-in" style={{ margin: '0 0 16px', padding: '14px 16px', background: 'rgba(250,204,21,0.06)', border: '1px solid rgba(250,204,21,0.15)', borderRadius: 'var(--radius)', display: 'flex', alignItems: 'flex-start', gap: 12 }}>
               <div style={{ flex: 1 }}>
                 <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 4 }}>Set up speaker detection</div>
-                <div style={{ fontSize: 12, color: 'var(--text2)', lineHeight: 1.5 }}>
+                <div className="meta">
                   Identify who's talking in your podcast. Free, takes 2 minutes.
                   <br/>
                   <span style={{ color: 'var(--text3)' }}>1.</span> <a href="https://huggingface.co/pyannote/speaker-diarization-3.1" target="_blank" rel="noopener" style={{ color: '#facc15', textDecoration: 'none' }}>Accept model terms</a>
@@ -1230,7 +1230,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                       disabled={isProcessing} style={{ minHeight: transcriptText ? 80 : 120 }}
                       onDragOver={e => { preventDef(e); setTranscriptDragOver(true); }} onDrop={handleTranscriptDrop} />
                     <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 10 }}>
-                      <span style={{ fontSize: 12, color: 'var(--text2)', whiteSpace: 'nowrap' }}>Time offset</span>
+                      <span className="meta" style={{ whiteSpace: 'nowrap' }}>Time offset</span>
                       <input type="number" step="0.5" value={timeAdjust} onChange={e => setTimeAdjust(parseFloat(e.target.value) || 0)}
                         style={{ width: 72 }} disabled={isProcessing} />
                       <span className="hint">sec</span>
@@ -1687,7 +1687,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                         <div style={{ width: 20, height: 20, borderRadius: 6, background: 'rgba(74,222,128,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, color: 'var(--green)' }}>P</div>
                         <span style={{ fontSize: 13, fontWeight: 700 }}>PodStack: next steps</span>
                       </div>
-                      <p style={{ fontSize: 12, color: 'var(--text2)', lineHeight: 1.6, marginBottom: 12 }}>
+                      <p className="meta" style={{ lineHeight: 1.6, marginBottom: 12 }}>
                         Clips are rendered. Now generate titles, descriptions, and thumbnails in Claude Code:
                       </p>
                       <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
diff --git a/src/ui/client/ThumbnailStudio.tsx b/src/ui/client/ThumbnailStudio.tsx
index ec05026..3edb434 100644
--- a/src/ui/client/ThumbnailStudio.tsx
+++ b/src/ui/client/ThumbnailStudio.tsx
@@ -158,7 +158,7 @@ export default function ThumbnailStudio() {
             style={{ display: "none" }}
             onChange={(e) => e.target.files?.[0] && uploadFile(e.target.files[0])}
           />
-          {video && <span style={{ fontSize: 12, color: "var(--text2)" }}>{video.name}</span>}
+          {video && <span className="meta">{video.name}</span>}
         </div>
         <div style={{ display: "flex", gap: 10, marginTop: 12, alignItems: "center", flexWrap: "wrap" }}>
           <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title to write headlines from" style={{ flex: "1 1 280px" }} />
diff --git a/src/ui/client/ThumbnailTemplate.tsx b/src/ui/client/ThumbnailTemplate.tsx
index 9663abe..340de41 100644
--- a/src/ui/client/ThumbnailTemplate.tsx
+++ b/src/ui/client/ThumbnailTemplate.tsx
@@ -111,7 +111,7 @@ export default function ThumbnailTemplate({ onBack }: { onBack?: () => void }) {
   const field = (f: Field) => {
     const v = cfg[f.k];
     if (f.t === "bool") return (
-      <label key={f.k} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--text2)", paddingTop: 18 }}>
+      <label key={f.k} className="meta" style={{ display: "flex", alignItems: "center", gap: 8, paddingTop: 18 }}>
         <input type="checkbox" checked={v !== false && v !== undefined ? !!v : false} onChange={(e) => set(f.k, e.target.checked)} /> {titleCase(f.k)}
       </label>
     );
diff --git a/src/ui/public/css/styles.css b/src/ui/public/css/styles.css
index 4573031..d158ad4 100644
--- a/src/ui/public/css/styles.css
+++ b/src/ui/public/css/styles.css
@@ -405,6 +405,7 @@ h1 { font-size: 28px; font-weight: 700; letter-spacing: 0; line-height: 1.15; }
 /* Muted helper / caption text. Reused instead of per-element inline font-size + color. */
 .hint { font-size: 11px; color: var(--text3); line-height: 1.5; }
 .hint-xs { font-size: 10px; color: var(--text3); line-height: 1.5; }
+.meta { font-size: 12px; color: var(--text2); line-height: 1.5; }
 
 /* ─── Form Elements ─── */
 input[type="text"], input[type="number"], input[type="password"], input:not([type]), select, textarea {

From c730336c626fda4f58daec0e71d90b01859773a6 Mon Sep 17 00:00:00 2001
From: Nika Siradze <nikushasiradzee@gmail.com>
Date: Sun, 5 Jul 2026 13:41:43 +0400
Subject: [PATCH 08/11] Darken studio surfaces and fix toggle contrast,
 textarea fonts, tabular figures

---
 src/ui/client/EpisodeWorkspace.jsx |  6 +++---
 src/ui/public/css/styles.css       | 16 +++++++++-------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/ui/client/EpisodeWorkspace.jsx b/src/ui/client/EpisodeWorkspace.jsx
index 8db4563..29f5d3c 100644
--- a/src/ui/client/EpisodeWorkspace.jsx
+++ b/src/ui/client/EpisodeWorkspace.jsx
@@ -1225,7 +1225,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                         <button className="btn btn-ghost btn-sm" onClick={() => { setTranscriptText(''); setTranscriptFileName(''); }} style={{ padding: '4px 10px', fontSize: 11 }}>Clear</button>
                       </div>
                     )}
-                    <textarea placeholder={'Speaker (00:00)\nText of what they said...\n\nSpeaker2 (00:15)\nMore text...\n\nOr paste JSON / drag a .txt file above.'}
+                    <textarea className="code-input" placeholder={'Speaker (00:00)\nText of what they said...\n\nSpeaker2 (00:15)\nMore text...\n\nOr paste JSON / drag a .txt file above.'}
                       value={transcriptText} onChange={e => { setTranscriptText(e.target.value); setTranscriptFileName(''); }}
                       disabled={isProcessing} style={{ minHeight: transcriptText ? 80 : 120 }}
                       onDragOver={e => { preventDef(e); setTranscriptDragOver(true); }} onDrop={handleTranscriptDrop} />
@@ -1550,7 +1550,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                 <div>
                   <div className="spacer" />
                   <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
-                    <div className="section-label" style={{ margin: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <div className="section-label" style={{ margin: 0, display: 'flex', alignItems: 'center', gap: 8, fontVariantNumeric: 'tabular-nums' }}>
                       {phase === 'suggesting' && <div className="spinner sm" />}
                       {phase === 'suggesting' ? `Found ${suggestions.length} clip${suggestions.length !== 1 ? 's' : ''}`
                         : phase === 'review' ? `Clips \u00B7 ${selectedCount} selected` : 'Clips'}
@@ -1562,7 +1562,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                         </button>
                       )}
                       {phase === 'review' && (
-                        <button className="btn btn-primary btn-sm" disabled={selectedCount === 0} onClick={startExport}>
+                        <button className="btn btn-primary btn-sm" disabled={selectedCount === 0} onClick={startExport} style={{ fontVariantNumeric: 'tabular-nums' }}>
                           Export {selectedCount} clip{selectedCount !== 1 ? 's' : ''}
                         </button>
                       )}
diff --git a/src/ui/public/css/styles.css b/src/ui/public/css/styles.css
index d158ad4..4969d87 100644
--- a/src/ui/public/css/styles.css
+++ b/src/ui/public/css/styles.css
@@ -3,15 +3,15 @@
 :root {
   --bg: #0f0e0d;
   --bg2: #16150f;
-  --surface: #1b1a17;
-  --surface2: #24221d;
-  --surface3: #302d27;
+  --surface: #181712;
+  --surface2: #201e19;
+  --surface3: #2b2822;
   --border: #2c2822;
   --border-hover: #403a31;
   --border-h: #403a31;
   --text: #f4f2ee;
   --text2: #ada79c;
-  --text3: #7d766a;
+  --text3: #8a8377;
   --accent: #f2894a;
   --accent-hover: #ff9f61;
   --accent-2: #ffb37c;
@@ -426,9 +426,11 @@ textarea:focus-visible {
   outline-offset: 2px;
 }
 textarea {
-  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
   font-size: 12px; resize: vertical; min-height: 120px; line-height: 1.7;
 }
+textarea.code-input {
+  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
+}
 select {
   appearance: none; cursor: pointer; padding-right: 34px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23ada79c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
@@ -517,7 +519,7 @@ select {
 }
 .file-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
 .file-badge .name { font-size: 13px; color: var(--green); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.file-badge .meta { font-size: 11px; color: var(--text2); flex-shrink: 0; }
+.file-badge .meta { font-size: 11px; color: var(--text2); flex-shrink: 0; font-variant-numeric: tabular-nums; }
 
 /* ─── Tabs ─── */
 .tabs { display: flex; gap: 2px; background: var(--surface); border-radius: var(--radius); padding: 3px; margin-bottom: 14px; }
@@ -529,7 +531,7 @@ select {
   user-select: none;
 }
 .tab:hover:not(.active) { color: var(--text); }
-.tab.active { background: var(--accent); color: #fff; }
+.tab.active { background: var(--accent); color: #241803; }
 
 /* ─── Settings ─── */
 .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }

From 95f78704464cb48f5da75a7fdb0eccf4df9d6452 Mon Sep 17 00:00:00 2001
From: Nika Siradze <nikushasiradzee@gmail.com>
Date: Sun, 5 Jul 2026 14:16:29 +0400
Subject: [PATCH 09/11] Polish studio UI: unify borders, darker surfaces, SVG
 icons, portal modals, sticky preview

---
 src/ui/client/ClipDetail.tsx        |  5 +-
 src/ui/client/EpisodeWorkspace.jsx  | 74 ++++++++++++++++-------------
 src/ui/client/StudioHome.tsx        |  4 +-
 src/ui/client/ThumbnailTemplate.tsx |  3 +-
 src/ui/client/icons.tsx             |  5 +-
 src/ui/public/css/styles.css        | 23 +++++----
 6 files changed, 66 insertions(+), 48 deletions(-)

diff --git a/src/ui/client/ClipDetail.tsx b/src/ui/client/ClipDetail.tsx
index 28de101..76b5c97 100644
--- a/src/ui/client/ClipDetail.tsx
+++ b/src/ui/client/ClipDetail.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { Link, useParams, useNavigate } from "react-router-dom";
 import { api, upload, fmt, basename, labelStyle } from "./lib";
 import ClipPlayer from "./ClipPlayer";
+import { BackIcon } from "./icons";
 import ReframeEditor from "./ReframeEditor";
 import CopyButton from "./CopyButton";
 
@@ -84,7 +85,7 @@ export default function ClipDetail() {
   }, []);
 
   if (loading) return <div className="app"><div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--text2)", padding: 40 }}><div className="spinner sm" /> Loading…</div></div>;
-  if (!clip) return <div className="app"><div className="header"><h1>Clip not found</h1></div><Link to="/" style={{ color: "var(--accent)" }}>← Library</Link></div>;
+  if (!clip) return <div className="app"><div className="header"><h1>Clip not found</h1></div><Link to="/" style={{ color: "var(--accent)", display: "inline-flex", alignItems: "center", gap: 4 }}><BackIcon /> Library</Link></div>;
 
   const tc = clip.thumbnail_config || {};
   const dirty = title !== clip.title || captionStyle !== clip.caption_style;
@@ -215,7 +216,7 @@ export default function ClipDetail() {
   return (
     <div className="app">
       <div className="header">
-        <Link to="/" style={{ fontSize: 12, color: "var(--text3)", textDecoration: "none" }}>← Library</Link>
+        <Link to="/" style={{ fontSize: 12, color: "var(--text3)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 4 }}><BackIcon size={12} /> Library</Link>
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16, marginTop: 8, flexWrap: "wrap" }}>
           <h1 style={{ margin: 0 }}>{clip.title}</h1>
           <div className="set-actions">
diff --git a/src/ui/client/EpisodeWorkspace.jsx b/src/ui/client/EpisodeWorkspace.jsx
index 29f5d3c..15ee762 100644
--- a/src/ui/client/EpisodeWorkspace.jsx
+++ b/src/ui/client/EpisodeWorkspace.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import {
   Check,
   Heart as HeartGlyph,
@@ -11,6 +12,15 @@ import {
   Home as HomeGlyph,
   Users as UsersGlyph,
   Inbox,
+  X,
+  Plus,
+  Play,
+  Pencil,
+  Download,
+  Activity,
+  ChevronRight,
+  ChevronDown,
+  ArrowRight,
 } from 'lucide-react';
 import CopyButton from './CopyButton';
 
@@ -348,7 +358,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
               className={previewSrc ? '' : ''} />
           ) : (
             <div className="phone-empty">
-              <div style={{ fontSize: 22, opacity: 0.4 }}>{'▶'}</div>
+              <div style={{ opacity: 0.4, display: 'flex' }}><Play size={22} /></div>
               <div>Drop a video to see live caption preview</div>
             </div>
           )}
@@ -461,7 +471,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
             <div className="mcp-hints-subtitle">
               {collapsed ? `${hints.length} prompts` : 'Click to copy'}
             </div>
-            <span className="hint-xs" style={{ transition: 'transform 0.2s', transform: collapsed ? 'rotate(-90deg)' : 'rotate(0)', marginLeft: 4 }}>{'\u25BC'}</span>
+            <span className="hint-xs" style={{ transition: 'transform 0.2s', transform: collapsed ? 'rotate(-90deg)' : 'rotate(0)', marginLeft: 4 }}><ChevronDown size={12} /></span>
           </div>
           {!collapsed && (
             <div className="mcp-hint-list">
@@ -1133,12 +1143,12 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                   <span className="pill" style={{ fontSize: 10, letterSpacing: '0.5px', background: 'rgba(250,204,21,0.08)', color: '#facc15', border: '1px solid rgba(250,204,21,0.2)', cursor: 'pointer' }}
                     title="Speaker detection not configured. Click to learn more"
                     onClick={() => window.open('https://huggingface.co/pyannote/speaker-diarization-3.1', '_blank')}>
-                    Speakers ✗
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>Speakers <X size={11} /></span>
                   </span>
                 )}
                 {speakerStatus && speakerStatus.configured && (
                   <span className="pill" style={{ fontSize: 10, letterSpacing: '0.5px', background: 'var(--green-subtle)', color: 'var(--green)', border: '1px solid var(--green-border)' }}>
-                    Speakers ✓
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>Speakers <Check size={11} /></span>
                   </span>
                 )}
               </div>
@@ -1162,7 +1172,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
               </div>
               <button onClick={() => { sessionStorage.setItem('dismiss-speaker', '1'); setSpeakerStatus({...speakerStatus, _dismissed: true}); }}
                 style={{ background: 'none', border: 'none', color: 'var(--text3)', cursor: 'pointer', fontSize: 16, padding: 4, lineHeight: 1 }}
-                title="Dismiss">✕</button>
+                title="Dismiss"><X size={12} /></button>
             </div>
           )}
 
@@ -1171,7 +1181,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
             <div className="main-col">
 
               {/* Video */}
-              <div className="section">
+              <div className="section card">
                 <div className="section-label">Video</div>
                 {!videoPath && (
                   <div className="drop-zone" style={{ cursor: 'pointer' }} onClick={browsing || isProcessing ? undefined : doBrowse}
@@ -1202,7 +1212,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
               </div>
 
               {/* Transcript */}
-              <div className="section">
+              <div className="section card">
                 <div className="section-label">Transcript</div>
                 <div className="tabs">
                   <div className={`tab ${transcriptMode === 'import' ? 'active' : ''}`} onClick={() => setTranscriptMode('import')}>Paste transcript</div>
@@ -1297,7 +1307,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
               </div>
 
               {/* Settings */}
-              <div className="section">
+              <div className="section card">
                 <div className="section-label">Settings</div>
 
                 {/* Presets */}
@@ -1308,7 +1318,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                       {presets.map(p => <option key={p.name || p} value={p.name || p}>{p.name || p}</option>)}
                     </select>
                     {activePreset && (
-                      <button className="btn btn-ghost btn-sm" onClick={() => deletePreset(activePreset)} title="Delete preset" style={{ padding: '6px 8px', color: 'var(--red)' }}>{'\u00D7'}</button>
+                      <button className="btn btn-ghost btn-sm" onClick={() => deletePreset(activePreset)} title="Delete preset" style={{ padding: '6px 8px', color: 'var(--red)' }}><X size={14} /></button>
                     )}
                   </div>
                 )}
@@ -1325,7 +1335,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                 ) : (
                   <div style={{ marginBottom: 14 }}>
                     <button className="asset-add" onClick={() => setShowPresetSave(true)} disabled={isProcessing}>
-                      + Save as preset
+                      <Plus size={12} /> Save as preset
                     </button>
                   </div>
                 )}
@@ -1360,23 +1370,23 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                             style={{ width: 16, height: 16, objectFit: 'contain', borderRadius: 3 }} onError={e => { e.target.style.display = 'none' }} />
                         </span>
                         <span className="asset-pill-name">{logoPath.split('/').pop()}</span>
-                        <button className="asset-pill-x" onClick={() => setLogoPath('')} disabled={isProcessing}>{'\u00D7'}</button>
+                        <button className="asset-pill-x" onClick={() => setLogoPath('')} disabled={isProcessing}><X size={12} /></button>
                       </div>
                     ) : (
                       <button className="asset-add fade-in" onClick={() => logoRef.current?.click()} disabled={isProcessing || logoUploading}>
-                        {logoUploading ? <div className="spinner sm" /> : '+'} Logo
+                        {logoUploading ? <div className="spinner sm" /> : <Plus size={12} />} Logo
                       </button>
                     )
                   )}
                   {outroPath ? (
                     <div className="asset-pill">
-                      <span className="asset-pill-icon" style={{ fontSize: 11 }}>{'▶'}</span>
+                      <span className="asset-pill-icon" style={{ display: 'inline-flex' }}><Play size={11} /></span>
                       <span className="asset-pill-name">{outroPath.split('/').pop()}</span>
-                      <button className="asset-pill-x" onClick={() => setOutroPath('')} disabled={isProcessing}>{'\u00D7'}</button>
+                      <button className="asset-pill-x" onClick={() => setOutroPath('')} disabled={isProcessing}><X size={12} /></button>
                     </div>
                   ) : (
                     <button className="asset-add" onClick={() => outroRef.current?.click()} disabled={isProcessing || outroUploading}>
-                      {outroUploading ? <div className="spinner sm" /> : '+'} Outro
+                      {outroUploading ? <div className="spinner sm" /> : <Plus size={12} />} Outro
                     </button>
                   )}
                   <input ref={logoRef} type="file" accept=".png,.jpg,.jpeg,.svg" style={{ display: 'none' }}
@@ -1389,7 +1399,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                 <div style={{ marginTop: 14 }}>
                   <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 700, letterSpacing: '0.8px', color: 'var(--text2)', textTransform: 'uppercase' }}
                     onClick={() => setAdvancedOpen(!advancedOpen)}>
-                    <span style={{ fontSize: 10, transition: 'transform 0.15s', transform: advancedOpen ? 'rotate(90deg)' : 'rotate(0deg)', display: 'inline-block' }}>▶</span>
+                    <span style={{ transition: 'transform 0.15s', transform: advancedOpen ? 'rotate(90deg)' : 'rotate(0deg)', display: 'inline-flex' }}><ChevronRight size={12} /></span>
                     Advanced
                   </div>
                   {advancedOpen && (
@@ -1437,7 +1447,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
               {/* Word Corrections */}
               <div className="section">
                 <div className="section-label" style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }} onClick={() => setCorrectionsOpen(!correctionsOpen)}>
-                  <span style={{ fontSize: 10, transition: 'transform 0.15s', transform: correctionsOpen ? 'rotate(90deg)' : 'rotate(0deg)', display: 'inline-block' }}>▶</span>
+                  <span style={{ transition: 'transform 0.15s', transform: correctionsOpen ? 'rotate(90deg)' : 'rotate(0deg)', display: 'inline-flex' }}><ChevronRight size={12} /></span>
                   Word Corrections
                   {Object.keys(corrections).length > 0 && (
                     <span className="hint-xs" style={{ fontWeight: 400 }}>({Object.keys(corrections).length})</span>
@@ -1451,7 +1461,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                     <div style={{ display: 'flex', gap: 6, marginBottom: 8, alignItems: 'center' }}>
                       <input value={correctionWord} onChange={e => setCorrectionWord(e.target.value)}
                         placeholder="Wrong (e.g. Boxel)" style={{ flex: 1 }} />
-                      <span style={{ color: 'var(--text3)', fontSize: 12, flexShrink: 0 }}>{'\u2192'}</span>
+                      <span style={{ color: 'var(--text3)', display: 'inline-flex', flexShrink: 0 }}><ArrowRight size={12} /></span>
                       <input value={correctionFix} onChange={e => setCorrectionFix(e.target.value)}
                         placeholder="Correct (e.g. Voxel)" style={{ flex: 1 }}
                         onKeyDown={e => { if (e.key === 'Enter' && correctionWord.trim() && correctionFix.trim()) {
@@ -1468,12 +1478,12 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                         {Object.entries(corrections).map(([wrong, correct]) => (
                           <div key={wrong} className="asset-pill" style={{ fontSize: 11 }}>
                             <span style={{ color: 'var(--text3)', textDecoration: 'line-through' }}>{wrong}</span>
-                            <span style={{ color: 'var(--text3)', margin: '0 2px' }}>→</span>
+                            <span style={{ color: 'var(--text3)', margin: '0 2px', display: 'inline-flex' }}><ArrowRight size={12} /></span>
                             <span style={{ color: 'var(--green)' }}>{correct}</span>
                             <button className="asset-pill-x" onClick={() => {
                               fetch(`/api/corrections/${encodeURIComponent(wrong)}`, { method: 'DELETE' })
                                 .then(r => r.json()).then(d => { if (d.corrections) setCorrections(d.corrections); });
-                            }}>{'\u00D7'}</button>
+                            }}><X size={12} /></button>
                           </div>
                         ))}
                       </div>
@@ -1558,7 +1568,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                     <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                       {phase === 'review' && videoPath && (
                         <button className="btn btn-ghost btn-sm" onClick={analyzeEnergy} disabled={analyzingEnergy || suggestions.length === 0} title="Analyze audio energy levels">
-                          {analyzingEnergy ? <><div className="spinner sm" /> Analyzing…</> : '⚡ Energy'}
+                          {analyzingEnergy ? <><div className="spinner sm" /> Analyzing…</> : <><Activity size={14} /> Energy</>}
                         </button>
                       )}
                       {phase === 'review' && (
@@ -1610,7 +1620,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                         )}
 
                         {phase === 'done' && !off && r && (
-                          <div className={`status-dot ${failed ? 'fail' : 'ok'}`}>{failed ? '\u00D7' : '\u2713'}</div>
+                          <div className={`status-dot ${failed ? 'fail' : 'ok'}`}>{failed ? <X size={11} /> : <Check size={11} />}</div>
                         )}
 
                         <div className="clip-info">
@@ -1619,7 +1629,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                             {fmt(clip.start_second)} {'\u2192'} {fmt(clip.end_second)} {'\u00B7'} {clip.duration}s
                             {energyData[i] && (
                               <span className={`energy-badge ${energyData[i].level}`} title={`Energy: ${energyData[i].score}/10`}>
-                                {energyData[i].level === 'high' ? '⚡' : energyData[i].level === 'medium' ? '~' : '○'} {energyData[i].score.toFixed(1)}
+                                {energyData[i].level === 'high' ? <Activity size={10} /> : energyData[i].level === 'medium' ? '~' : '○'} {energyData[i].score.toFixed(1)}
                               </span>
                             )}
                             {r && !failed && <span> {'\u00B7'} {r.file_size_mb}MB</span>}
@@ -1629,13 +1639,13 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                         </div>
 
                         {phase === 'review' && (
-                          <button className="btn btn-ghost btn-sm clip-edit-btn" onClick={(e) => openClipEdit(i, e)} title="Edit clip">✎</button>
+                          <button className="btn btn-ghost btn-sm clip-edit-btn" onClick={(e) => openClipEdit(i, e)} title="Edit clip"><Pencil size={13} /></button>
                         )}
 
                         {phase === 'done' && !off && r && !failed && outputFile && (
                           <div className="clip-actions" onClick={e => e.stopPropagation()}>
-                            <button className="btn btn-ghost btn-sm" onClick={() => onPlayRendered(outputFile)} title="Preview">{'\u25B6'}</button>
-                            <a href={`/api/download/${outputFile}`} className="btn btn-primary btn-sm" download title="Download">{'\u2193'}</a>
+                            <button className="btn btn-ghost btn-sm" onClick={() => onPlayRendered(outputFile)} title="Preview"><Play size={13} /></button>
+                            <a href={`/api/download/${outputFile}`} className="btn btn-primary btn-sm" download title="Download"><Download size={14} /></a>
                             <button className="btn btn-ghost btn-sm" disabled={isRetryingThis} onClick={() => retryClip(resultIdx)} title="Retry">{'\u21BB'}</button>
                           </div>
                         )}
@@ -1716,7 +1726,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                   <div className="section-label" style={{ cursor: 'pointer', userSelect: 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                     onClick={() => setHistoryOpen(!historyOpen)}>
                     <span>History ({clipHistory.length})</span>
-                    <span className="hint-xs" style={{ transition: 'transform 0.2s', transform: historyOpen ? 'rotate(180deg)' : 'rotate(0)' }}>{'\u25BC'}</span>
+                    <span className="hint-xs" style={{ transition: 'transform 0.2s', transform: historyOpen ? 'rotate(180deg)' : 'rotate(0)' }}><ChevronDown size={12} /></span>
                   </div>
                   {historyOpen && (
                     <div className="fade-in" style={{ display: 'flex', flexDirection: 'column', gap: 4, maxHeight: 300, overflowY: 'auto', marginTop: 8 }}>
@@ -1836,7 +1846,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
           </div>
 
           {/* Clip Edit Modal */}
-          {editingClip !== null && suggestions[editingClip] && (
+          {editingClip !== null && suggestions[editingClip] && createPortal(
             <div className="clip-edit-overlay" onClick={() => setEditingClip(null)}>
               <div className="clip-edit-panel" onClick={e => e.stopPropagation()}>
                 <h3>Edit clip #{editingClip + 1}</h3>
@@ -1853,7 +1863,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                         style={{ textAlign: 'center' }} />
                       <div className="hint-xs" style={{ textAlign: 'center', marginTop: 2 }}>{fmt(editForm.start)}</div>
                     </div>
-                    <div className="arrow">{'\u2192'}</div>
+                    <div className="arrow"><ArrowRight size={14} /></div>
                     <div>
                       <input type="number" step="0.5" value={editForm.end} onChange={e => setEditForm(f => ({ ...f, end: parseFloat(e.target.value) || 0 }))}
                         style={{ textAlign: 'center' }} />
@@ -1871,10 +1881,10 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                 </div>
               </div>
             </div>
-          )}
+          , document.body)}
 
           {/* Modal (mobile fallback) */}
-          {previewFile && (
+          {previewFile && createPortal(
             <div className="modal-overlay" onClick={() => setPreviewFile(null)}>
               <div className="modal-body" onClick={e => e.stopPropagation()}>
                 <video src={`/api/preview/${previewFile}`} controls autoPlay />
@@ -1883,7 +1893,7 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
                 </div>
               </div>
             </div>
-          )}
+          , document.body)}
         </div>
       );
     }
diff --git a/src/ui/client/StudioHome.tsx b/src/ui/client/StudioHome.tsx
index 6c6e4fa..4b9a4e8 100644
--- a/src/ui/client/StudioHome.tsx
+++ b/src/ui/client/StudioHome.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { api, fmt, timeAgo, basename } from "./lib";
-import { TrashIcon } from "./icons";
+import { TrashIcon, PlayIcon } from "./icons";
 
 interface Clip {
   id: string;
@@ -131,7 +131,7 @@ export default function StudioHome() {
                       ) : file ? (
                         <video className="clip-card-media" src={`/api/clips/${c.id}/preview#t=0.1`} muted preload="metadata" playsInline />
                       ) : (
-                        <div className="clip-card-media empty">▶</div>
+                        <div className="clip-card-media empty"><PlayIcon size={20} /></div>
                       )}
                       <div className="clip-card-body">
                         <div className="clip-card-title">{c.title}</div>
diff --git a/src/ui/client/ThumbnailTemplate.tsx b/src/ui/client/ThumbnailTemplate.tsx
index 340de41..9fc8f43 100644
--- a/src/ui/client/ThumbnailTemplate.tsx
+++ b/src/ui/client/ThumbnailTemplate.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { api, labelStyle } from "./lib";
+import { BackIcon } from "./icons";
 
 type Cfg = Record<string, any>;
 type FieldType = "color" | "num" | "text" | "bool" | "select";
@@ -148,7 +149,7 @@ export default function ThumbnailTemplate({ onBack }: { onBack?: () => void }) {
       <div className="header">
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16, flexWrap: "wrap" }}>
           <h1 style={{ margin: 0 }}>Edit template</h1>
-          {onBack && <button className="btn btn-ghost btn-sm" onClick={onBack}>← Back to generator</button>}
+          {onBack && <button className="btn btn-ghost btn-sm" onClick={onBack}><BackIcon /> Back to generator</button>}
         </div>
       </div>
 
diff --git a/src/ui/client/icons.tsx b/src/ui/client/icons.tsx
index 273ce82..f393b42 100644
--- a/src/ui/client/icons.tsx
+++ b/src/ui/client/icons.tsx
@@ -1,9 +1,10 @@
 import React from "react";
-import { Play, Pause, ChevronLeft, ChevronRight, SkipBack, SkipForward, X, Trash2 } from "lucide-react";
+import { Play, Pause, ChevronLeft, ChevronRight, SkipBack, SkipForward, X, Trash2, ArrowLeft } from "lucide-react";
 
 const block = { display: "block" } as const;
 
-export const PlayIcon = () => <Play size={15} style={block} fill="currentColor" strokeWidth={0} />;
+export const PlayIcon = ({ size = 15 }: { size?: number }) => <Play size={size} style={block} fill="currentColor" strokeWidth={0} />;
+export const BackIcon = ({ size = 14 }: { size?: number }) => <ArrowLeft size={size} style={block} />;
 export const PauseIcon = () => <Pause size={15} style={block} />;
 export const FrameBackIcon = () => <ChevronLeft size={15} style={block} />;
 export const FrameForwardIcon = () => <ChevronRight size={15} style={block} />;
diff --git a/src/ui/public/css/styles.css b/src/ui/public/css/styles.css
index 4969d87..2f5c88a 100644
--- a/src/ui/public/css/styles.css
+++ b/src/ui/public/css/styles.css
@@ -3,12 +3,12 @@
 :root {
   --bg: #0f0e0d;
   --bg2: #16150f;
-  --surface: #181712;
-  --surface2: #201e19;
-  --surface3: #2b2822;
-  --border: #2c2822;
-  --border-hover: #403a31;
-  --border-h: #403a31;
+  --surface: #141210;
+  --surface2: #191612;
+  --surface3: #241f18;
+  --border: rgba(255, 255, 255, 0.06);
+  --border-hover: rgba(255, 255, 255, 0.12);
+  --border-h: rgba(255, 255, 255, 0.12);
   --text: #f4f2ee;
   --text2: #ada79c;
   --text3: #8a8377;
@@ -85,7 +85,7 @@ body {
 h1 { font-size: 28px; font-weight: 700; letter-spacing: 0; line-height: 1.15; }
 .layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
 .main-col { min-width: 0; }
-.preview-col { position: relative; }
+.preview-col { position: relative; align-self: stretch; }
 
 /* ─── Preview Panel ─── */
 .preview-panel { position: sticky; top: 32px; }
@@ -401,6 +401,11 @@ h1 { font-size: 28px; font-weight: 700; letter-spacing: 0; line-height: 1.15; }
 
 /* ─── Sections ─── */
 .section { margin-bottom: 24px; }
+.section.card {
+  background: var(--surface2); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 18px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 16px 40px -28px rgba(0, 0, 0, 0.9);
+}
 .section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: var(--text2); margin-bottom: 10px; text-transform: uppercase; }
 /* Muted helper / caption text. Reused instead of per-element inline font-size + color. */
 .hint { font-size: 11px; color: var(--text3); line-height: 1.5; }
@@ -595,7 +600,7 @@ select {
 /* ─── Clip List ─── */
 .clip-item {
   display: flex; align-items: center; gap: 12px;
-  padding: 12px 14px; margin-bottom: 4px;
+  padding: 9px 14px; margin-bottom: 4px;
   background: var(--surface); border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: border-color 0.15s var(--ease), background 0.15s var(--ease), opacity 0.15s var(--ease);
@@ -1036,7 +1041,7 @@ pre .punct { color: var(--text2); }
 input[type="range"] {
   -webkit-appearance: none; appearance: none;
   width: 100%; height: 4px; border-radius: 2px;
-  background: var(--surface2); outline: none;
+  background: rgba(255, 255, 255, 0.13); outline: none;
   cursor: pointer;
 }
 input[type="range"]:focus-visible {

From 3c6a080b3d2d46ea8cc70f1ce15d5ea79b81f837 Mon Sep 17 00:00:00 2001
From: Nika Siradze <nikushasiradzee@gmail.com>
Date: Sun, 5 Jul 2026 14:55:44 +0400
Subject: [PATCH 10/11] Add Content studio custom generation + preview, persist
 episode state, polish loading/borders

- Content studio: free-form 'ask for anything' generation and per-section regenerate (titles/description/tags/hashtags) via a new generate_custom backend action reusing the AI-CLI runner and KB context
- Content studio: live thumbnail preview that reflects the title and format
- Persist export results and energy analysis in uiState so they survive navigation
- Loading buttons keep their fill (no disabled fade) with a visible spinner
- Lower border opacity, tighten clip rows, swap remaining carets/glyphs to SVG icons
---
 backend/main.py                       |  24 +++++
 backend/services/content_generator.py |  66 ++++++++++++
 src/models/index.ts                   |   2 +-
 src/ui/client/ContentStudio.tsx       | 150 +++++++++++++++++++++++++-
 src/ui/client/EpisodeWorkspace.jsx    |  16 ++-
 src/ui/public/css/styles.css          |  24 +++++
 src/ui/web-server.ts                  |  48 +++++++++
 7 files changed, 324 insertions(+), 6 deletions(-)

diff --git a/backend/main.py b/backend/main.py
index 5a94001..7e0186c 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -445,6 +445,29 @@ def handle_generate_content(task_id: str, params: dict):
     emit_result(task_id, "success", data=result)
 
 
+def handle_generate_custom(task_id: str, params: dict):
+    """Run a free-form content request against the AI CLI with KB + transcript context."""
+    from services.content_generator import generate_custom_content
+
+    instruction = str(params.get("instruction", "")).strip()
+    if not instruction:
+        emit_result(task_id, "error", error="instruction is required")
+        return
+
+    result = generate_custom_content(
+        instruction=instruction,
+        transcript_segments=params.get("transcript_segments", []),
+        mode=params.get("mode", "shorts"),
+        progress_callback=lambda pct, msg: emit_progress(task_id, "generating", pct, msg),
+    )
+
+    if result is None:
+        emit_result(task_id, "error", error="No AI CLI available (install Claude Code or Codex)")
+        return
+
+    emit_result(task_id, "success", data=result)
+
+
 def handle_manage_integrations(task_id: str, params: dict):
     from services.integrations import IntegrationsManager
 
@@ -532,6 +555,7 @@ def handle_run_integration_tool(task_id: str, params: dict):
     "find_moment": handle_find_moment,
     "manage_env": handle_manage_env,
     "generate_content": handle_generate_content,
+    "generate_custom": handle_generate_custom,
     "manage_integrations": handle_manage_integrations,
     "run_integration_tool": handle_run_integration_tool,
     "manage_config": handle_manage_config,
diff --git a/backend/services/content_generator.py b/backend/services/content_generator.py
index 6359998..881b959 100644
--- a/backend/services/content_generator.py
+++ b/backend/services/content_generator.py
@@ -183,6 +183,72 @@ def _stream_claude_content(
     return out
 
 
+def generate_custom_content(
+    instruction: str,
+    transcript_segments: list[dict],
+    mode: str = "shorts",
+    progress_callback: Optional[Callable[[int, str], None]] = None,
+) -> Optional[dict]:
+    """Run a free-form content request against the AI CLI with KB + transcript context.
+
+    Returns {"text", "engine"} with the raw model output, or None if no AI CLI.
+    """
+    candidates = _find_ai_cli_candidates()
+    if not candidates:
+        return None
+
+    kb_context = load_kb_context()
+    lines = []
+    for seg in transcript_segments:
+        sp = seg.get("speaker", "")
+        sp_label = f"[{sp}] " if sp else ""
+        lines.append(f"{sp_label}{seg.get('text', '').strip()}")
+    excerpt = chr(10).join(_sample_lines(lines, max_lines=40))
+
+    # REQUEST first so codex prompt truncation never drops the ask.
+    prompt = f"""You are helping create YouTube content for a podcast. Follow the knowledge base voice and rules. Return ONLY the requested output, no preamble.
+
+REQUEST ({'full episode' if mode == 'episode' else 'short clip'}):
+{instruction.strip()}
+
+KNOWLEDGE BASE:
+{kb_context}
+
+TRANSCRIPT EXCERPT:
+{excerpt}"""
+
+    project_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), "..", "..")
+    from utils.prompt_files import write_prompt_file
+    prompt_file = write_prompt_file(prompt)
+    try:
+        for idx, (cli_path, engine) in enumerate(candidates):
+            label = _engine_label(engine)
+            if progress_callback:
+                progress_callback(30, f"Asking {label}..." if idx == 0 else f"Retrying with {label}...")
+            try:
+                cr = _run_ai_command(
+                    cli_path=cli_path,
+                    engine=engine,
+                    prompt=prompt[:4000] if engine == "codex" else prompt,
+                    prompt_file=prompt_file,
+                    project_dir=project_dir,
+                    timeout=120,
+                )
+            except Exception:
+                continue
+            if cr.returncode != 0 or not cr.stdout.strip():
+                continue
+            if progress_callback:
+                progress_callback(100, "Done")
+            return {"text": cr.stdout.strip(), "engine": engine}
+        return None
+    finally:
+        try:
+            os.unlink(prompt_file)
+        except Exception:
+            pass
+
+
 def generate_clip_content(
     clip: dict,
     transcript_segments: list[dict],
diff --git a/src/models/index.ts b/src/models/index.ts
index 91dc943..b4a12a7 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -2,7 +2,7 @@
 
 export interface TaskRequest {
   task_id: string;
-  task_type: "transcribe" | "parse_transcript" | "create_clip" | "batch_clips" | "analyze_energy" | "pack_transcript" | "detect_encoder" | "presets" | "ping" | "suggest_clips" | "find_moment" | "generate_content" | "corrections" | "manage_integrations" | "run_integration_tool" | "manage_config" | "manage_env";
+  task_type: "transcribe" | "parse_transcript" | "create_clip" | "batch_clips" | "analyze_energy" | "pack_transcript" | "detect_encoder" | "presets" | "ping" | "suggest_clips" | "find_moment" | "generate_content" | "generate_custom" | "corrections" | "manage_integrations" | "run_integration_tool" | "manage_config" | "manage_env";
   params: Record<string, unknown>;
 }
 
diff --git a/src/ui/client/ContentStudio.tsx b/src/ui/client/ContentStudio.tsx
index 3cf5627..b865e3f 100644
--- a/src/ui/client/ContentStudio.tsx
+++ b/src/ui/client/ContentStudio.tsx
@@ -24,6 +24,12 @@ export default function ContentStudio() {
   const [sessionText, setSessionText] = useState("");
   const [sessionName, setSessionName] = useState("");
   const [copied, setCopied] = useState<string | null>(null);
+  const [customReq, setCustomReq] = useState("");
+  const [customBusy, setCustomBusy] = useState(false);
+  const [customOut, setCustomOut] = useState<string | null>(null);
+  const [regenField, setRegenField] = useState<string | null>(null);
+  const [regenNote, setRegenNote] = useState("");
+  const [regenBusy, setRegenBusy] = useState(false);
 
   useEffect(() => {
     try {
@@ -89,6 +95,101 @@ export default function ContentStudio() {
     }
   };
 
+  const runCustom = async (instruction: string): Promise<string | null> => {
+    const r = await api<{ text?: string; error?: string }>("/content-studio/custom", {
+      method: "POST",
+      body: JSON.stringify({ instruction, transcript_text: transcript || undefined, mode }),
+    });
+    if (r.error) throw new Error(r.error);
+    return r.text?.trim() || null;
+  };
+
+  const askCustom = async () => {
+    if (!customReq.trim() || customBusy) return;
+    setCustomBusy(true);
+    setCustomOut(null);
+    setMsg(null);
+    try {
+      setCustomOut((await runCustom(customReq.trim())) || "No output.");
+    } catch (e: any) {
+      setMsg(`Custom request failed: ${e.message}`);
+    } finally {
+      setCustomBusy(false);
+    }
+  };
+
+  const REGEN: Record<string, string> = {
+    titles: "Give me 8 fresh YouTube title options for this content, one per line, numbered 1-8. Return only the titles.",
+    description: "Rewrite the YouTube description for this content. Return only the description text, no labels.",
+    tags: "Give a comma-separated list of 10-15 YouTube tags for this content. Return only the tags.",
+    hashtags: "Give 5 relevant hashtags for this content. Return only the hashtags, space-separated.",
+  };
+
+  const regenerate = async (field: string) => {
+    if (regenBusy) return;
+    setRegenBusy(true);
+    setMsg(null);
+    try {
+      const instruction = `${REGEN[field]}${regenNote.trim() ? ` Extra guidance: ${regenNote.trim()}` : ""}`;
+      const text = await runCustom(instruction);
+      if (!text) throw new Error("empty response");
+      setResult((prev) => {
+        const next = { ...(prev || {}) } as ContentResult;
+        if (field === "titles") {
+          next.titles = text
+            .split(/\r?\n/)
+            .map((l) => l.replace(/^\s*\d+[.)]\s*/, "").trim())
+            .filter(Boolean)
+            .slice(0, 8);
+        } else if (field === "description") next.description = text;
+        else if (field === "tags") next.tags = text;
+        else if (field === "hashtags") next.hashtags = text;
+        return next;
+      });
+      setRegenField(null);
+      setRegenNote("");
+    } catch (e: any) {
+      setMsg(`Regenerate failed: ${e.message}`);
+    } finally {
+      setRegenBusy(false);
+    }
+  };
+
+  const regenBtn = (field: string) => (
+    <button
+      className="btn btn-ghost btn-sm"
+      style={{ padding: "3px 9px", fontSize: 11 }}
+      onClick={() => { setRegenField(regenField === field ? null : field); setRegenNote(""); }}
+      disabled={regenBusy}
+    >
+      Regenerate
+    </button>
+  );
+
+  const regenInput = (field: string) =>
+    regenField === field ? (
+      <div style={{ display: "flex", gap: 6, margin: "0 0 10px" }}>
+        <input
+          value={regenNote}
+          onChange={(e) => setRegenNote(e.target.value)}
+          placeholder="optional: how to change it"
+          style={{ flex: 1, fontSize: 12 }}
+          onKeyDown={(e) => { if (e.key === "Enter") regenerate(field); }}
+          autoFocus
+        />
+        <button className="btn btn-primary btn-sm" onClick={() => regenerate(field)} disabled={regenBusy}>
+          {regenBusy ? <div className="spinner sm" /> : "Go"}
+        </button>
+      </div>
+    ) : null;
+
+  const hasTitle = !!(result?.titles?.length || title.trim());
+  const previewTitle =
+    result?.titles?.[0]?.replace(/^\d+\.\s*/, "").replace(/^["']|["']$/g, "") ||
+    title.trim() ||
+    "Your title appears here";
+  const vertical = mode === "shorts";
+
   return (
     <div className="app">
       <div className="header">
@@ -134,6 +235,40 @@ export default function ContentStudio() {
             {busy && stage && <div className="hint" style={{ marginTop: 10 }}>{stage}</div>}
             {msg && <div className="set-note ok" style={{ marginTop: 10, wordBreak: "break-word" }}>{msg}</div>}
           </div>
+
+          <div className="yt-card">
+            <div className="hint" style={{ marginBottom: -2 }}>Thumbnail preview</div>
+            <div className={`yt-thumb${vertical ? " vertical" : ""}`}>
+              <div className={`yt-thumb-title${hasTitle ? "" : " placeholder"}`}>{previewTitle}</div>
+            </div>
+          </div>
+
+          <div className="section" style={{ marginTop: 18 }}>
+            <label style={labelStyle}>Ask for anything else</label>
+            <textarea
+              value={customReq}
+              onChange={(e) => setCustomReq(e.target.value)}
+              placeholder="e.g. Write a LinkedIn post, a Twitter thread, 10 punchier hooks…"
+              style={{ width: "100%", minHeight: 78, marginTop: 8, resize: "vertical" }}
+            />
+            <button
+              className="btn btn-primary btn-sm"
+              style={{ marginTop: 10 }}
+              onClick={askCustom}
+              disabled={customBusy || !customReq.trim()}
+            >
+              {customBusy ? <><div className="spinner sm" /> Generating…</> : "Generate"}
+            </button>
+            {customOut && (
+              <div className="stream-in" style={{ marginTop: 12, borderTop: "1px solid var(--border)", paddingTop: 12 }}>
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
+                  <span className="hint">Result</span>
+                  <CopyButton text={customOut} />
+                </div>
+                <div style={{ fontSize: 13, color: "var(--text2)", lineHeight: 1.6, whiteSpace: "pre-wrap" }}>{customOut}</div>
+              </div>
+            )}
+          </div>
         </div>
 
         <div style={{ flex: "1 1 420px", minWidth: 320 }}>
@@ -145,7 +280,11 @@ export default function ContentStudio() {
             <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
               {result.titles?.length ? (
                 <div className="section">
-                  <div className="hint" style={{ marginBottom: 6 }}>Title options · click to copy</div>
+                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
+                    <span className="hint">Title options · click to copy</span>
+                    {regenBtn("titles")}
+                  </div>
+                  {regenInput("titles")}
                   <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                     {result.titles.map((t, i) => {
                       const clean = t.replace(/^\d+\.\s*/, "");
@@ -164,8 +303,9 @@ export default function ContentStudio() {
                 <div className="section stream-in">
                   <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
                     <span className="hint">Description</span>
-                    <CopyButton text={result.description} />
+                    <div style={{ display: "flex", gap: 6, alignItems: "center" }}>{regenBtn("description")}<CopyButton text={result.description} /></div>
                   </div>
+                  {regenInput("description")}
                   <div style={{ fontSize: 13, color: "var(--text2)", lineHeight: 1.6, whiteSpace: "pre-wrap" }}>{result.description}</div>
                 </div>
               ) : null}
@@ -174,8 +314,9 @@ export default function ContentStudio() {
                 <div className="section stream-in">
                   <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
                     <span className="hint">Tags</span>
-                    <CopyButton text={result.tags} />
+                    <div style={{ display: "flex", gap: 6, alignItems: "center" }}>{regenBtn("tags")}<CopyButton text={result.tags} /></div>
                   </div>
+                  {regenInput("tags")}
                   <div className="meta" style={{ lineHeight: 1.6 }}>{result.tags}</div>
                 </div>
               ) : null}
@@ -184,8 +325,9 @@ export default function ContentStudio() {
                 <div className="section stream-in">
                   <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
                     <span className="hint">Hashtags</span>
-                    <CopyButton text={result.hashtags} />
+                    <div style={{ display: "flex", gap: 6, alignItems: "center" }}>{regenBtn("hashtags")}<CopyButton text={result.hashtags} /></div>
                   </div>
+                  {regenInput("hashtags")}
                   <div style={{ fontSize: 12, color: "var(--accent)", lineHeight: 1.6 }}>{result.hashtags}</div>
                 </div>
               ) : null}
diff --git a/src/ui/client/EpisodeWorkspace.jsx b/src/ui/client/EpisodeWorkspace.jsx
index 15ee762..221a921 100644
--- a/src/ui/client/EpisodeWorkspace.jsx
+++ b/src/ui/client/EpisodeWorkspace.jsx
@@ -803,6 +803,16 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
         }
       }, [transcriptText]);
 
+      // Sync export results + energy analysis so they survive navigation
+      const prevDerivedRef = useRef('');
+      useEffect(() => {
+        if (!initializedRef.current) return;
+        const key = JSON.stringify({ results, energyData });
+        if (key === prevDerivedRef.current) return;
+        prevDerivedRef.current = key;
+        fetch('/api/ui-state', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ _source: 'ui', results, energyData }) }).catch(() => { });
+      }, [results, energyData]);
+
       // React to SSE events from MCP
       const lastHandledTsRef = useRef(0);
       useEffect(() => {
@@ -811,10 +821,14 @@ const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(
 
         if (sseEvent.type === 'state-sync' || sseEvent.type === 'state') {
           const d = sseEvent.data;
-          if (d.suggestions) { setSuggestions(d.suggestions); setEnergyData({}); }
+          if (d.suggestions) {
+            setSuggestions(d.suggestions);
+            setEnergyData(sseEvent.type === 'state' && d.energyData ? d.energyData : {});
+          }
           if (d.deselectedIndices !== undefined) setDeselected(new Set(d.deselectedIndices));
           else if (d.suggestions && !d.deselectedIndices) setDeselected(new Set());
           if (d.phase) setPhase(d.phase);
+          if (sseEvent.type === 'state' && Array.isArray(d.results)) setResults(d.results);
           if (d.activeExportJobId) setBatchJobId(d.activeExportJobId);
           if (d.videoPath !== undefined) setVideoPath(d.videoPath);
           if (d.transcript) { setTranscript(d.transcript); if (d.videoPath) autoTranscribeRef.current = d.videoPath; }
diff --git a/src/ui/public/css/styles.css b/src/ui/public/css/styles.css
index 2f5c88a..da222fa 100644
--- a/src/ui/public/css/styles.css
+++ b/src/ui/public/css/styles.css
@@ -87,6 +87,27 @@ h1 { font-size: 28px; font-weight: 700; letter-spacing: 0; line-height: 1.15; }
 .main-col { min-width: 0; }
 .preview-col { position: relative; align-self: stretch; }
 
+/* ─── Content preview (YouTube-style card) ─── */
+.yt-card { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; max-width: 400px; }
+.yt-thumb {
+  aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; position: relative;
+  background: radial-gradient(125% 125% at 22% 12%, #4a3421, #221a12 58%, #120f0c);
+  box-shadow: inset 0 0 0 1px var(--glass-border);
+  display: flex; align-items: flex-end; padding: 15px;
+}
+.yt-thumb.vertical { aspect-ratio: 9 / 16; max-width: 216px; }
+.yt-thumb::after {
+  content: ''; position: absolute; inset: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 55%);
+}
+.yt-thumb-title {
+  position: relative; z-index: 1; font-weight: 800; font-size: 21px; line-height: 1.12;
+  letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); text-wrap: balance;
+  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+}
+.yt-thumb.vertical .yt-thumb-title { font-size: 18px; -webkit-line-clamp: 5; }
+.yt-thumb-title.placeholder { color: rgba(255, 255, 255, 0.4); font-weight: 600; }
+
 /* ─── Preview Panel ─── */
 .preview-panel { position: sticky; top: 32px; }
 .preview-player {
@@ -485,6 +506,9 @@ select {
 .btn-go:hover:not(:disabled) { background: var(--accent-hover); }
 .btn-go:active:not(:disabled) { transform: translateY(5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
 .btn-go:disabled { opacity: 0.25; cursor: not-allowed; }
+/* A button that's mid-request keeps its fill (not the disabled fade) so the label stays readable */
+.btn:has(.spinner) { opacity: 1; cursor: progress; }
+.btn-primary .spinner, .btn-go .spinner { border-color: rgba(36, 24, 3, 0.28); border-top-color: #241803; }
 .title-option {
   text-align: left; width: 100%; padding: 9px 12px; cursor: pointer;
   background: var(--surface); border: 1px solid var(--border);
diff --git a/src/ui/web-server.ts b/src/ui/web-server.ts
index f60c92b..189eebc 100644
--- a/src/ui/web-server.ts
+++ b/src/ui/web-server.ts
@@ -115,6 +115,8 @@ interface UIState {
     outroPath: string;
   };
   phase: string;
+  results: unknown[];
+  energyData: Record<string, unknown>;
   lastUpdated: number;
 }
 
@@ -149,6 +151,10 @@ function loadPersistedState(): UIState {
         phase: ["exporting", "parsing", "suggesting"].includes(saved.phase)
           ? "idle"
           : saved.phase || "idle",
+        results: ["exporting", "parsing", "suggesting"].includes(saved.phase)
+          ? []
+          : saved.results || [],
+        energyData: saved.energyData || {},
         lastUpdated: saved.lastUpdated || 0,
       };
     }
@@ -173,6 +179,8 @@ function loadPersistedState(): UIState {
       outroPath: "",
     },
     phase: "idle",
+    results: [],
+    energyData: {},
     lastUpdated: 0,
   };
 }
@@ -2541,6 +2549,44 @@ app.post("/api/content-studio/generate", async (req, res) => {
   }
 });
 
+/**
+ * POST /api/content-studio/custom — free-form or per-section content request.
+ */
+app.post("/api/content-studio/custom", async (req, res) => {
+  const { instruction, transcript_text, mode } = req.body || {};
+  if (!instruction || !String(instruction).trim()) {
+    res.status(400).json({ error: "instruction is required" });
+    return;
+  }
+  let segs: Array<{ start: number; text: string }>;
+  if (typeof transcript_text === "string" && transcript_text.trim()) {
+    segs = packTranscriptText(transcript_text);
+  } else if (uiState.transcript?.segments?.length) {
+    segs = condenseSegments(uiState.transcript.segments);
+  } else {
+    res.status(400).json({ error: "paste a transcript or load an episode first" });
+    return;
+  }
+  try {
+    const result = await executor.execute(
+      "generate_custom",
+      {
+        instruction: String(instruction),
+        transcript_segments: segs,
+        mode: mode === "episode" ? "episode" : "shorts",
+      },
+      (event) => {
+        broadcastSSE("job-update", { progress: event.percent, message: event.message });
+      },
+    );
+    res.json(result.data || {});
+  } catch (err: any) {
+    res.status(500).json({
+      error: `Custom generation failed: ${err.message?.substring(0, 200)}`,
+    });
+  }
+});
+
 // --- MCP ↔ UI Bridge Endpoints ---
 
 /**
@@ -2618,6 +2664,8 @@ app.post("/api/ui-state", (req, res) => {
   if (body.deselectedIndices !== undefined)
     uiState.deselectedIndices = body.deselectedIndices;
   if (body.phase !== undefined) uiState.phase = body.phase;
+  if (body.results !== undefined) uiState.results = body.results;
+  if (body.energyData !== undefined) uiState.energyData = body.energyData;
   if (body.settings) {
     if (body.settings.captionStyle !== undefined)
       uiState.settings.captionStyle = body.settings.captionStyle;

From 3d81b9085a2ad5c7734e5b0221a92faf4bfa43f0 Mon Sep 17 00:00:00 2001
From: Nika Siradze <nikushasiradzee@gmail.com>
Date: Sun, 5 Jul 2026 15:16:29 +0400
Subject: [PATCH 11/11] Address CodeRabbit review: format validation, preset
 format, frame-index sync, content persistence

- get_format warns on unknown format name instead of silently defaulting
- /api/batch-clips validates per-clip format (mirrors /api/create-clip)
- savePreset now persists format so loadPreset's restore works
- ClipDetail/ThumbnailStudio 'New frame' derives next index from the selected frame (no counter drift)
- Content studio persists regenerated fields to localStorage (via a direct helper, not an effect)
- label the plan's diagram code fence
---
 backend/services/formats.py        |  5 +++++
 plans/horizontal-clips.md          |  2 +-
 src/ui/client/ClipDetail.tsx       |  3 ++-
 src/ui/client/ContentStudio.tsx    | 33 +++++++++++++++++-------------
 src/ui/client/EpisodeWorkspace.jsx | 16 ++++-----------
 src/ui/client/ThumbnailStudio.tsx  |  3 ++-
 src/ui/web-server.ts               |  4 ++++
 7 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/backend/services/formats.py b/backend/services/formats.py
index 89aba58..b749e3c 100644
--- a/backend/services/formats.py
+++ b/backend/services/formats.py
@@ -5,6 +5,7 @@
 is parameterized on format instead of hardcoding 1080x1920 per call site.
 """
 
+import sys
 from dataclasses import dataclass
 
 
@@ -64,4 +65,8 @@ def ratio(self) -> float:
 
 
 def get_format(name: str | None) -> FormatSpec:
+    if name is not None and name not in FORMATS:
+        # Raw MCP/API callers bypass the CLI's choices= guard; warn so a typo'd
+        # format doesn't silently render as vertical.
+        print(f"[formats] unknown format {name!r}; using {DEFAULT_FORMAT}", file=sys.stderr)
     return FORMATS.get(name or DEFAULT_FORMAT, FORMATS[DEFAULT_FORMAT])
diff --git a/plans/horizontal-clips.md b/plans/horizontal-clips.md
index bc43e5e..9cdacac 100644
--- a/plans/horizontal-clips.md
+++ b/plans/horizontal-clips.md
@@ -4,7 +4,7 @@
 
 ## North star
 
-```
+```text
 one detected moment
   ├─ 9:16 short   → Shorts / Reels / TikTok   (hook-first, 20-45s)   ← today
   └─ 16:9 clip    → YouTube in-feed / X / LinkedIn (arc-first, 60-300s) ← this plan
diff --git a/src/ui/client/ClipDetail.tsx b/src/ui/client/ClipDetail.tsx
index 76b5c97..6dd5474 100644
--- a/src/ui/client/ClipDetail.tsx
+++ b/src/ui/client/ClipDetail.tsx
@@ -152,7 +152,8 @@ export default function ClipDetail() {
         if ((r.texts || []).length) setTextOpts(r.texts);
       }
       if (!frames.length) { setMsg("No frames found in this clip"); return; }
-      const next = (frameIdx + 1) % frames.length;
+      const curIdx = frames.findIndex((f: any) => f.path === selFrame?.path);
+      const next = ((curIdx < 0 ? frameIdx : curIdx) + 1) % frames.length;
       setFrameIdx(next);
       const frame = frames[next];
       setSelFrame({ path: frame.path, info: frame });
diff --git a/src/ui/client/ContentStudio.tsx b/src/ui/client/ContentStudio.tsx
index b865e3f..07933dd 100644
--- a/src/ui/client/ContentStudio.tsx
+++ b/src/ui/client/ContentStudio.tsx
@@ -48,6 +48,12 @@ export default function ContentStudio() {
       .catch(() => {});
   }, []);
 
+  const persist = (r: ContentResult) => {
+    try {
+      localStorage.setItem(STORE, JSON.stringify({ title, mode, result: r }));
+    } catch {}
+  };
+
   const copy = (text: string) => {
     navigator.clipboard?.writeText(text).then(() => {
       setCopied(text);
@@ -85,7 +91,7 @@ export default function ContentStudio() {
       });
       if (!r.titles?.length && !r.description) throw new Error("AI CLI returned nothing. Is claude or codex installed?");
       setResult(r);
-      try { localStorage.setItem(STORE, JSON.stringify({ title, mode, result: r })); } catch {}
+      persist(r);
     } catch (e: any) {
       setMsg(`Generation failed: ${e.message}`);
     } finally {
@@ -133,19 +139,18 @@ export default function ContentStudio() {
       const instruction = `${REGEN[field]}${regenNote.trim() ? ` Extra guidance: ${regenNote.trim()}` : ""}`;
       const text = await runCustom(instruction);
       if (!text) throw new Error("empty response");
-      setResult((prev) => {
-        const next = { ...(prev || {}) } as ContentResult;
-        if (field === "titles") {
-          next.titles = text
-            .split(/\r?\n/)
-            .map((l) => l.replace(/^\s*\d+[.)]\s*/, "").trim())
-            .filter(Boolean)
-            .slice(0, 8);
-        } else if (field === "description") next.description = text;
-        else if (field === "tags") next.tags = text;
-        else if (field === "hashtags") next.hashtags = text;
-        return next;
-      });
+      const next = { ...(result || {}) } as ContentResult;
+      if (field === "titles") {
+        next.titles = text
+          .split(/\r?\n/)
+          .map((l) => l.replace(/^\s*\d+[.)]\s*/, "").trim())
+          .filter(Boolean)
+          .slice(0, 8);
+      } else if (field === "description") next.description = text;
+      else if (field === "tags") next.tags = text;
+      else if (field === "hashtags") next.hashtags = text;
+      setResult(next);
+      persist(next);
       setRegenField(null);
       setRegenNote("");
     } catch (e: any) {
diff --git a/src/ui/client/EpisodeWorkspace.jsx b/src/ui/client/EpisodeWorkspace.jsx
index 1029134..f2609e4 100644
--- a/src/ui/client/EpisodeWorkspace.jsx
+++ b/src/ui/client/EpisodeWorkspace.jsx
@@ -640,7 +640,7 @@ const isHttpUrl = (value) => /^https?:\/\//i.test(value.trim());
         try {
           await api('/presets', { method: 'POST', body: JSON.stringify({
             action: 'save', name: presetName.trim(),
-            config: { caption_style: captionStyle, crop_strategy: cropStrategy, logo_path: logoPath, outro_path: outroPath, video_path: videoPath.trim(), whisper_model: whisperModel, time_adjust: timeAdjust, clean_fillers: cleanFillers, quality, top_clips: topClips, min_clip_duration: minDuration, max_clip_duration: maxDuration, energy_boost: energyBoost }
+            config: { caption_style: captionStyle, crop_strategy: cropStrategy, format, logo_path: logoPath, outro_path: outroPath, video_path: videoPath.trim(), whisper_model: whisperModel, time_adjust: timeAdjust, clean_fillers: cleanFillers, quality, top_clips: topClips, min_clip_duration: minDuration, max_clip_duration: maxDuration, energy_boost: energyBoost }
           })});
           setActivePreset(presetName.trim());
           setPresetName(''); setShowPresetSave(false);
@@ -781,12 +781,14 @@ const isHttpUrl = (value) => /^https?:\/\//i.test(value.trim());
           deselectedIndices: Array.from(deselected),
           settings: { captionStyle, cropStrategy, format, logoPath, outroPath },
           phase,
+          results,
+          energyData,
         };
         const key = JSON.stringify(state);
         if (key === prevSyncRef.current) return;
         prevSyncRef.current = key;
         fetch('/api/ui-state', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: key }).catch(() => { });
-      }, [videoPath, file, suggestions, deselected, captionStyle, cropStrategy, format, logoPath, outroPath, phase]);
+      }, [videoPath, file, suggestions, deselected, captionStyle, cropStrategy, format, logoPath, outroPath, phase, results, energyData]);
 
       // Sync transcript separately (large payload)
       const prevTranscriptRef = useRef(null);
@@ -808,16 +810,6 @@ const isHttpUrl = (value) => /^https?:\/\//i.test(value.trim());
         }
       }, [transcriptText]);
 
-      // Sync export results + energy analysis so they survive navigation
-      const prevDerivedRef = useRef('');
-      useEffect(() => {
-        if (!initializedRef.current) return;
-        const key = JSON.stringify({ results, energyData });
-        if (key === prevDerivedRef.current) return;
-        prevDerivedRef.current = key;
-        fetch('/api/ui-state', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ _source: 'ui', results, energyData }) }).catch(() => { });
-      }, [results, energyData]);
-
       // React to SSE events from MCP
       const lastHandledTsRef = useRef(0);
       useEffect(() => {
diff --git a/src/ui/client/ThumbnailStudio.tsx b/src/ui/client/ThumbnailStudio.tsx
index 3edb434..561058a 100644
--- a/src/ui/client/ThumbnailStudio.tsx
+++ b/src/ui/client/ThumbnailStudio.tsx
@@ -118,7 +118,8 @@ export default function ThumbnailStudio() {
         if ((r.texts || []).length) setTextOpts(r.texts);
       }
       if (!frames.length) { setMsg("No frames found. Pick a video source first."); return; }
-      const next = (frameIdx + 1) % frames.length;
+      const curIdx = frames.findIndex((f: any) => f.path === selFrame?.path);
+      const next = ((curIdx < 0 ? frameIdx : curIdx) + 1) % frames.length;
       setFrameIdx(next);
       const frame = frames[next];
       setSelFrame({ path: frame.path, info: frame });
diff --git a/src/ui/web-server.ts b/src/ui/web-server.ts
index 35e191a..d8c8361 100644
--- a/src/ui/web-server.ts
+++ b/src/ui/web-server.ts
@@ -1047,6 +1047,10 @@ app.post("/api/batch-clips", async (req, res) => {
       res.status(400).json({ error: `Clip ${i + 1}: end must be after start` });
       return;
     }
+    if (c.format && !["vertical", "horizontal", "square"].includes(c.format)) {
+      res.status(400).json({ error: `Clip ${i + 1}: invalid format "${c.format}". Use: vertical, horizontal, square` });
+      return;
+    }
     const maxDur = c.format === "horizontal" ? 300 : 180;
     if (dur > maxDur) {
       res.status(400).json({