diff --git a/design-system/design_handoff_auto_tune/AutoTune.jsx b/design-system/design_handoff_auto_tune/AutoTune.jsx
new file mode 100644
index 000000000..1e120c825
--- /dev/null
+++ b/design-system/design_handoff_auto_tune/AutoTune.jsx
@@ -0,0 +1,900 @@
+// Auto-Tune — generate a whole channel lineup from library metadata (#69).
+// The "automatic-first" creation mode alongside the manual Channel Builder.
+// One screen, three steps: Configure axes/defaults -> Preview proposed channels
+// (select which to keep) -> Create (per-channel Created/Skipped/Failed summary).
+// Additive & non-destructive: never edits or deletes an existing channel; number
+// or name collisions are skipped, never overwritten. Each generated channel is
+// backed by a live SmartCollection query so it keeps tracking the library.
+(function () {
+ const NS = window.ChicoryTVDesignSystem_eb3b61;
+ const { Button, IconButton, Input, Select, Switch, Checkbox, Badge, Tag, Stat, Tooltip, ChannelLogo } = NS;
+ const Ico = window.Ico;
+ const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };
+ const eyebrow = { font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-disabled)" };
+
+ // ---- Axis catalogue (mirrors AutoTuneAxisMap.cs on the server) -------------
+ // nameOf() and order are display-only here; the real server owns query + name.
+ const AXES = [
+ { id: "TvShow", icon: "Tv", title: "TV Shows", tagline: "One 24/7 channel per show", detail: "Plays in season / episode order.", order: "Episode order", nameOf: (v) => v },
+ { id: "TvGenre", icon: "Clapperboard", title: "TV Genres", tagline: "A channel per episode genre", detail: "Shuffled across every matching episode.", order: "Shuffled", nameOf: (v) => v },
+ { id: "MovieGenre", icon: "Film", title: "Movie Genres", tagline: "A movie channel per genre", detail: "Shuffled across every matching movie.", order: "Shuffled", nameOf: (v) => v + " Movies" },
+ ];
+ const AXIS = Object.fromEntries(AXES.map((a) => [a.id, a]));
+
+ // ---- Mock library metadata (EF distinct+count in the real app) ------------
+ const LIBRARY = {
+ TvShow: [
+ { value: "The Office", count: 201 },
+ { value: "Friends", count: 236 },
+ { value: "Breaking Bad", count: 62 },
+ { value: "Parks and Recreation", count: 125 },
+ { value: "The Twilight Zone", count: 156 },
+ { value: "Firefly", count: 3 }, // below default minItems -> filtered
+ ],
+ TvGenre: [
+ { value: "Comedy", count: 640 },
+ { value: "Drama", count: 512 },
+ { value: "Sci-Fi", count: 208 },
+ { value: "Crime", count: 174 },
+ ],
+ MovieGenre: [
+ { value: "Action", count: 42 },
+ { value: "Sci-Fi", count: 28 },
+ { value: "Horror", count: 35 },
+ { value: "Comedy", count: 51 },
+ { value: "Noir", count: 3 }, // below default minItems -> filtered
+ ],
+ };
+
+ // Coexistence demo: some names already exist (deduped, unchecked by default)
+ // and some numbers are already taken (allocation skips them).
+ const EXISTING_NAMES = new Set(["Friends", "Sci-Fi"]);
+ const TAKEN_NUMBERS = new Set(["500", "503"]);
+
+ const TEMPLATES = ["Standard", "Movie night", "Music videos"];
+
+ // ---- Preview computation (advisory numbers, re-validated at create) -------
+ function buildProposals(axisIds, minItems, startingNumber) {
+ const out = [];
+ let next = Math.max(1, startingNumber | 0);
+ const takenThisRun = new Set(TAKEN_NUMBERS);
+ const alloc = () => {
+ while (takenThisRun.has(String(next))) next++;
+ const n = String(next);
+ takenThisRun.add(n);
+ next++;
+ return n;
+ };
+ // Grouped by axis order (TvShow, TvGenre, MovieGenre), then by value.
+ AXES.forEach((ax) => {
+ if (!axisIds.has(ax.id)) return;
+ LIBRARY[ax.id]
+ .filter((row) => row.count >= minItems)
+ .slice()
+ .sort((a, b) => a.value.localeCompare(b.value))
+ .forEach((row) => {
+ const name = ax.nameOf(row.value);
+ const exists = EXISTING_NAMES.has(name);
+ out.push({ axis: ax.id, value: row.value, name, number: alloc(), itemCount: row.count, alreadyExists: exists });
+ });
+ });
+ return out;
+ }
+
+ // ---- Bug (channel icon) — local variant of DS ChannelLogo that also takes
+ // explicit initials + color (ChannelLogo only derives them from name). --
+ const BUG_PALETTE = [
+ ["#5B7CFA", "#2E3A66"], ["#3FB984", "#1E4536"], ["#E0A83D", "#4A3818"],
+ ["#E5484D", "#4A1F21"], ["#B06CF0", "#38235A"], ["#48B0C8", "#193E47"],
+ ];
+ const bugHash = (s) => { let h = 0; s = s || ""; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0; return h % BUG_PALETTE.length; };
+ const bugInitials = (name, custom) => (custom && custom.trim()) || (name || "?").split(/[\s\-|:]+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("").toUpperCase() || "?";
+ function Bug({ name, initials, ci, size = 32 }) {
+ const idx = ci != null ? ci : bugHash(name);
+ const [fg, bg] = BUG_PALETTE[idx];
+ return (
+
+ {bugInitials(name, initials)}
+
+ );
+ }
+
+ // ---- Example content sources (advisory sample of the smart-collection query)
+ const GENRE_SHOWS = {
+ Comedy: ["The Office", "Friends", "Parks and Recreation"],
+ Drama: ["Breaking Bad", "The Twilight Zone"],
+ "Sci-Fi": ["The Twilight Zone", "Firefly"],
+ Crime: ["Breaking Bad"],
+ };
+ const MOVIE_TITLES = {
+ Action: ["Afterburn", "Steel Horizon", "Nightfall Run"],
+ "Sci-Fi": ["Orbital Decay", "The Quiet Sky", "Vector"],
+ Horror: ["Hollow", "The Vigil", "Saltmarsh"],
+ Comedy: ["Office Party", "Two Left Feet", "The Understudy"],
+ Noir: ["Rain on 5th", "The Long Con"],
+ };
+ const isGenreAxis = (axis) => axis !== "TvShow";
+ function baseSources(p) {
+ if (p.axis === "TvGenre") return GENRE_SHOWS[p.value] || [];
+ if (p.axis === "MovieGenre") return MOVIE_TITLES[p.value] || [];
+ return []; // TvShow channels track a single show — no per-source editor
+ }
+ function effectiveSources(p, ov) {
+ const ex = ov.exclude || [];
+ return [...baseSources(p).filter((s) => !ex.includes(s)), ...(ov.include || [])];
+ }
+ // Advisory item-count estimate as sources are added/removed (per-source share).
+ function estItems(p, ov) {
+ const base = baseSources(p);
+ if (!base.length) return p.itemCount;
+ const share = p.itemCount / base.length;
+ return Math.max(0, Math.round(share * effectiveSources(p, ov).length));
+ }
+ // Sources with their rotation weight (episodes played per rotation).
+ function sourceList(p, ov) {
+ return effectiveSources(p, ov).map((name) => ({ name, weight: (ov.ratios && ov.ratios[name]) || 1 }));
+ }
+
+ // Compact rotation-weight stepper (− N +).
+ function Weight({ w, onChange }) {
+ const btn = { width: 24, height: 26, display: "inline-flex", alignItems: "center", justifyContent: "center", background: "transparent", border: "none", cursor: "pointer", color: "var(--text-secondary)", padding: 0 };
+ return (
+
+ onChange(w - 1)}>
+ {w}
+ onChange(w + 1)}>
+
+ );
+ }
+
+ // ---- Example schedule (rundown → EPG blocks), advisory only ---------------
+ // Effective order for a channel: the axis default, unless overridden per channel.
+ function isShuffled(p, ov) { return ov && ov.shuffle != null ? ov.shuffle : AXIS[p.axis].order === "Shuffled"; }
+
+ const RUNTIME = { TvShow: 24, TvGenre: 30, MovieGenre: 100 };
+ function buildSchedule(p, ov) {
+ const mins = RUNTIME[p.axis] || 30;
+ const shuffled = isShuffled(p, ov);
+ let seq;
+ if (p.axis === "TvShow") {
+ const n = Math.min(8, Math.max(3, p.itemCount));
+ let eps = Array.from({ length: n }, (_, i) => i + 1);
+ if (shuffled) eps = eps.map((e) => ({ e, k: (e * 7 + 3) % n })).sort((a, b) => a.k - b.k).map((x) => x.e);
+ seq = eps.map((e) => ({ title: `S01E${String(e).padStart(2, "0")}`, sub: p.value }));
+ } else {
+ const list = sourceList(p, ov).filter((s) => s.weight > 0);
+ if (!list.length) return [];
+ if (shuffled) {
+ // Weighted round-robin interleave — honors the per-source rotation ratio.
+ const total = list.reduce((a, s) => a + s.weight, 0);
+ const st = list.map((s) => ({ ...s, acc: 0 }));
+ const count = Math.min(9, Math.max(5, total * 2));
+ seq = Array.from({ length: count }, () => {
+ let pick = null;
+ st.forEach((s) => { s.acc += s.weight; if (!pick || s.acc > pick.acc) pick = s; });
+ pick.acc -= total;
+ return { title: pick.name, sub: p.axis === "TvGenre" ? "Episode" : "" };
+ });
+ } else {
+ // Sequential — each source plays its rotation count in turn.
+ seq = [];
+ list.forEach((s) => { for (let i = 0; i < s.weight; i++) seq.push({ title: s.name, sub: p.axis === "TvGenre" ? "Episode" : "" }); });
+ seq = seq.slice(0, 9);
+ }
+ }
+ let t = 20 * 60;
+ return seq.map((b) => {
+ const start = `${String(Math.floor(t / 60) % 24).padStart(2, "0")}:${String(t % 60).padStart(2, "0")}`;
+ t += mins;
+ return { ...b, start, mins };
+ });
+ }
+
+ function MiniEpg({ blocks }) {
+ if (!blocks.length) return (
+ No content matches — nothing to schedule.
+ );
+ const PPM = 2.0;
+ return (
+
+
+ {blocks.map((b, i) => (
+
+ {b.start}
+ {b.title}
+ {b.sub && {b.sub} }
+
+ ))}
+
+
+ {label}
+ {value}
+
+ );
+ }
+
+ // ---- Full channel settings (mirrors the manual Channel Builder) -----------
+ const CH_TEMPLATES = [
+ { id: "Standard", builtin: true, desc: "General-purpose 1080p H.264, retro bumpers.", shuffle: false, always: true, sets: ["1080p H.264", "HLS Segmenter", "Sequential", "Always on", "Pre + post filler"] },
+ { id: "Music videos", builtin: true, desc: "Continuous rotation, no fillers, direct stream.", shuffle: true, always: true, sets: ["720p H.264", "HLS Direct", "Shuffle", "Always on", "No filler"] },
+ { id: "Movie night", builtin: true, desc: "Film-grain HEVC, mid-roll ad breaks.", shuffle: false, always: false, sets: ["1080p HEVC", "MPEG-TS", "Sequential", "On-demand", "Mid-roll ads"] },
+ ];
+ const ADV_GROUPS = [
+ { group: "Streaming", fields: [["Streaming mode", "HLS Segmenter"], ["FFmpeg profile", "1080p H.264"], ["Resolution", "1920\u00d71080"], ["Video bitrate", "8000 kbps"], ["Audio bitrate", "192 kbps"], ["Buffer size", "16000 kb"]] },
+ { group: "Filler", fields: [["Pre-roll", "Retro Bumpers"], ["Mid-roll", "Ad Break"], ["Post-roll", "Outro"], ["Tail filler", "None"], ["Fallback", "Test Pattern"], ["Filler kind", "Pad to :00"]] },
+ { group: "Playback", fields: [["Interleave", "On"], ["Keep multi-part together", "On"], ["Watermark", "Channel logo"], ["Subtitle mode", "Any"], ["Preferred audio", "English"], ["Preferred subtitle", "None"]] },
+ { group: "Behavior", fields: [["Guide mode default", "Normal"], ["Song video mode", "Off"], ["On-demand", "Off"], ["Idle behavior", "Offline image"], ["Transcode audio", "Normalize"], ["Number scheme", "Auto"]] },
+ ];
+
+ // Friendly toggle row (label + description + Switch), with an override tag.
+ function ToggleRow({ icon, iconColor, title, desc, checked, onChange, overrideOf, live }) {
+ return (
+ onChange(!checked)} style={{ display: "flex", alignItems: "flex-start", gap: 10, padding: "10px 11px", borderRadius: "var(--radius-sm)", cursor: "pointer", background: live && checked ? "var(--ctv-live-soft)" : "transparent", border: `1px solid ${live && checked ? "var(--ctv-live)" : "var(--border-hairline)"}` }}>
+ {icon &&
+
+ {title}
+ {overrideOf != null && checked !== overrideOf && overrides template }
+
+
{desc}
+
+ );
+ }
+
+ // Channel Template picker (collapsed row + dropdown + spec chips).
+ function TemplatePicker({ value, onPick }) {
+ const [open, setOpen] = React.useState(false);
+ const t = CH_TEMPLATES.find((x) => x.id === value) || CH_TEMPLATES[0];
+ return (
+
+
setOpen((o) => !o)} className="ctv-press"
+ style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "10px 11px", borderRadius: "var(--radius-sm)", cursor: "pointer", textAlign: "left", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-control)" }}>
+
+ {open && (
+
+ {CH_TEMPLATES.map((x) => {
+ const on = x.id === value;
+ return (
+
{ onPick(x); setOpen(false); }}
+ style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 9px", borderRadius: "var(--radius-xs)", cursor: "pointer", textAlign: "left", background: on ? "var(--ctv-accent-soft)" : "transparent", border: "none" }}>
+
+ );
+ })}
+
+ )}
+
+ {t.sets.map((s) => (
+ {s}
+ ))}
+
+
+
+ Advanced
+ {overridden ? `${overridden} overridden` : `${count} fields`} \u00b7 {templateName}
+
+
+ setMode((m) => (m === "override" ? "closed" : "override"))} style={tabBtn(override)}>
+ setMode((m) => (m === "view" ? "closed" : "view"))} style={tabBtn(mode === "view")}>
+
+ {mode !== "closed" && (
+
+
+
+ {ADV_GROUPS.map((g) => (
+
+
{g.group}
+
+ {g.fields.map(([k, v]) => override ? (
+
patch((o) => ({ adv: { ...(o.adv || {}), [k]: e.target.value } }))} />
+ ) : (
+
+ ))}
+
+
+ ))}
+
+ );
+ }
+
+ // Compact channel-image dropzone (sets a data-URL logo used as guide logo + bug).
+ function LogoDrop({ name, src, onSet }) {
+ const [over, setOver] = React.useState(false);
+ const fileRef = React.useRef(null);
+ const read = (file) => { if (!file) return; const r = new FileReader(); r.onload = () => onSet(r.result); r.readAsDataURL(file); };
+ return (
+ { e.preventDefault(); setOver(true); }} onDragLeave={() => setOver(false)}
+ onDrop={(e) => { e.preventDefault(); setOver(false); read(e.dataTransfer.files && e.dataTransfer.files[0]); }}
+ onClick={() => fileRef.current && fileRef.current.click()}
+ style={{ display: "flex", alignItems: "center", gap: 12, padding: 10, borderRadius: "var(--radius-sm)", cursor: "pointer", background: "var(--ctv-bg-sunken)", border: `1px dashed ${over ? "var(--ctv-accent)" : "var(--border-control)"}` }}>
+
+
+
{src ? "Channel image set" : "Drop a channel image"}
+
Used as the guide logo and on-screen bug. Falls back to the initials below.
+
+ {src &&
{ e.stopPropagation(); onSet(null); }}> }
+
read(e.target.files && e.target.files[0])} />
+
+
+
+
+ {avatar(34)}
+
+
{name || "Untitled channel"}
+
+ {number} ·
+
+
+
+
+
+
+ Playback
+ patch({ shuffle: v })} overrideOf={tpl.shuffle} />
+ patch({ always: v })} overrideOf={tpl.always} />
+
+
+
+
+
+ Query & size
+
+ {items.toLocaleString()}} />
+ {p.axis === "TvShow" ? `show="${p.value}"` : p.axis === "TvGenre" ? `genre="${p.value}"` : `genre="${p.value}" AND type=movie`}} />
+
+
+
+ {genre && (
+
+
+
Content sources
+
Everything tagged “{p.value}”. Exclude a title even though it matches, add one that isn’t tagged, or set how often each plays.
+
+ {list.length === 0 && (
+
No sources — add one below.
+ )}
+ {[...kept.map((s) => ({ s, added: false })), ...inc.map((s) => ({ s, added: true }))].map((row, idx) => (
+
+ {row.s}
+ {multi && setW(row.s, w)} />}
+ (row.added ? removeInc(row.s) : excludeSrc(row.s))}>
+
+ ))}
+
+ Rotation: {list.map((s) => `${wOf(s)}× ${s}`).join(" · ")}
+
+ )}
+
+
+
+
Add
+
+ Excluded:
+ {ex.map((s) => (
+ restoreSrc(s)} title="Add back"
+ style={{ display: "inline-flex", alignItems: "center", gap: 5, cursor: "pointer", height: 22, padding: "0 8px", borderRadius: "var(--radius-xs)", background: "transparent", border: "1px solid var(--border-hairline)", color: "var(--text-disabled)", font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)" }}>
+ {s}
+ ))}
+
+ )}
+
+ )}
+
+
+
+
Example schedule
+
A preview of tonight from 20:00 — the built playout may differ.
+
+
+
+
+
+
setStep("configure")}
+ onRestart={restart}
+ />
+
+ {step === "configure" && (
+
+ {detail != null && (() => {
+ const p = proposals.find((x) => x.name === detail);
+ if (!p) return null;
+ return setDetail(null)} />;
+ })()}
+
+
+
+
Auto-Tune
+
Generate channels from your library
+
+
+
+ {step === "configure" && (
+
+
+ )}
+ {step === "preview" && (
+
+
+
+
+ )}
+ {step === "create" && (
+
} onClick={onRestart}>Start over
+ )}
+
+ {STEPS.map((s, i) => {
+ const done = i < idx, active = i === idx;
+ const color = active ? "var(--ctv-accent)" : done ? "var(--text-secondary)" : "var(--text-disabled)";
+ return (
+
+
+ {done ?
+ {s.label}
+
+ {i < STEPS.length - 1 &&
+ );
+ })}
+
+
+ Turn your library into a full lineup in one pass. Pick which metadata axes to generate from,
+ preview the proposed channels, then create the ones you want. Existing channels are never touched.
+
+
+
+ Generate from
+
+ {AXES.map((ax) => {
+ const on = axisIds.has(ax.id);
+ return (
+
toggleAxis(ax.id)}
+ className="ctv-press"
+ style={{
+ textAlign: "left", cursor: "pointer", padding: "16px 16px 15px", borderRadius: "var(--radius-md)",
+ border: `1px solid ${on ? "var(--ctv-accent)" : "var(--border-control)"}`,
+ background: on ? "var(--ctv-accent-soft)" : "var(--surface-card)",
+ boxShadow: on ? "var(--shadow-sm)" : "none", position: "relative", display: "flex", flexDirection: "column", gap: 9,
+ }}>
+
+
+
+
{ax.title}
+
{ax.tagline}
+
+
+
+ );
+ })}
+
+
+
+
+ {label}
+ {children}
+ {hint}
+
+ );
+ }
+
+ // ---- Step 2: Preview ------------------------------------------------------
+ function Preview({ proposals, selected, setSelected, expanded, setExpanded, overrides, openDetail, dispName }) {
+ const toggle = (name) => setSelected((s) => { const n = new Set(s); n.has(name) ? n.delete(name) : n.add(name); return n; });
+ const toggleExp = (name) => setExpanded((s) => { const n = new Set(s); n.has(name) ? n.delete(name) : n.add(name); return n; });
+ const groups = AXES.map((ax) => ({ ax, rows: proposals.filter((p) => p.axis === ax.id) })).filter((g) => g.rows.length);
+ const selectable = proposals.filter((p) => !p.alreadyExists);
+ const existingCount = proposals.length - selectable.length;
+
+ if (!proposals.length) {
+ return (
+
+
+
No channels matched — try lowering the minimum items.
+
+
+
+ {selected.size} of {selectable.length} selected
+
+ {existingCount > 0 && (
+ setAll(selectable, true)}>Select all
+ setAll(selectable, false)}>Clear
+
+
+ {groups.map(({ ax, rows }) => {
+ const groupSel = rows.filter((r) => !r.alreadyExists);
+ const allOn = groupSel.length > 0 && groupSel.every((r) => selected.has(r.name));
+ const someOn = groupSel.some((r) => selected.has(r.name));
+ return (
+
+
+ setAll(rows, !allOn)} />
+ {ax.title}
+ {rows.length}
+
+
+
+
+ {rows.map((r, i) => {
+ const on = selected.has(r.name);
+ const ov = overrides[r.name] || {};
+ const name = dispName(r);
+ const isExp = expanded.has(r.name);
+ return (
+
+
+
toggle(r.name)} />
+ {r.number}
+ !r.alreadyExists && toggleExp(r.name)} style={{ flex: 1, minWidth: 0, textAlign: "left", background: "transparent", border: "none", padding: 0, cursor: r.alreadyExists ? "default" : "pointer" }}>
+ {name}
+ from “{r.value}”
+
+
+
+ {r.itemCount} items
+ toggleExp(r.name)}>
+
+
+ )}
+
+ {isExp && !r.alreadyExists && (
+
+
+ Example schedule
+
+
+
+ )}
+
+ );
+ })}
+
+ );
+ })}
+
+
+
+
+ {group}
+
+
+ {results.map((r, i) => {
+ const m = RESULT_META[r.status];
+ return (
+
+
+
+
{r.name}
+ {r.reason &&
{r.reason}
}
+
+ {r.channelId != null &&
#{r.channelId} }
+
{r.status}
+
+
`. The toolbar is constant across steps; its content and
+primary action change per step.
+
+**Toolbar (all steps):**
+- Left: a 34×34 accent **icon tile** (`var(--radius-sm)`, `background: var(--ctv-accent-soft)`,
+ `color: var(--ctv-accent)`) with the `Sparkles` icon; then title **"Auto-Tune"** (`--text-md`,
+ semibold) + subtitle **"Generate channels from your library"** (`--text-xs`, `--text-secondary`).
+- Center: a **step rail** — three steps (`Configure · Preview · Create`) joined by 26px hairline
+ connectors. Each step is a 20px round chip + label. The **active** step: chip
+ `background var(--ctv-accent)` / `color var(--text-on-accent)`, label accent + semibold. A
+ **completed** step: chip `var(--ctv-accent-soft)` bg + accent `Check` icon, label
+ `--text-secondary`. A **future** step: chip `var(--ctv-surface-2)` + `--text-disabled`.
+- Right: the contextual primary action (below).
+
+### Step 1 — Configure
+Centered column, `max-width: 860px`, `padding: 26px 24px 40px`.
+1. **Intro paragraph** (`--text-sm`, `--text-secondary`, `max-width: 620px`): what Auto-Tune does +
+ the non-destructive promise.
+2. **"Generate from"** section (eyebrow label) — a **3-column grid** of selectable **axis cards**
+ (one per axis). Each card is a `` (`ctv-press` for the tactile scale-on-press):
+ - Selected: `1px solid var(--ctv-accent)` border, `var(--ctv-accent-soft)` bg, `var(--shadow-sm)`;
+ a filled accent `CheckCircle2` top-right; the icon tile is `var(--ctv-accent)` /
+ `var(--text-on-accent)`.
+ - Unselected: `1px solid var(--border-control)`, `var(--surface-card)` bg; a `Circle` outline
+ top-right (`--text-disabled`); icon tile `var(--ctv-surface-2)` / `--text-secondary`.
+ - Content: axis icon (Tv / Clapperboard / Film), **title**, one-line **tagline**, and a bottom
+ **order** chip (`ListOrdered` "Episode order" for TV Shows; `Shuffle` "Shuffled" for the genres).
+3. **"Defaults"** section — a 2-column grid of four labelled fields, each with a helper line
+ (`Field` component: label `--text-xs` medium, hint `--text-2xs` `--text-disabled`):
+ - **Minimum items** (`Input type=number`, `Hash` leading icon) — skip channels below this count.
+ - **Starting channel number** (`Input type=number`, `Tv` icon) — numbers count up from here.
+ - **Channel group** (`Input`, `FolderTree` icon) — the group every generated channel lands in.
+ - **Channel template** (`Select`) — the batch's streaming/playout/filler defaults.
+
+**Primary action:** `Preview channels` (primary, `Eye` icon). **Disabled** with a tooltip until ≥1
+axis is selected.
+
+### Step 2 — Preview
+Centered column, `max-width: 920px`.
+- **Summary bar:** `N of M selected` (mono N), an info **Tag** `"{k} already exist — deselected"`
+ when any proposal's name collides, a spacer, then ghost **Select all** / **Clear** buttons (they
+ only touch selectable — non-existing — rows).
+- **One section per axis** that produced rows (`var(--surface-card)`, hairline border,
+ `var(--radius-md)`), in axis order (TV Shows → TV Genres → Movie Genres). Section header
+ (`var(--ctv-bg-sunken)`): a **group checkbox** (tri-state: checked / indeterminate when partial),
+ the axis icon + title, a neutral **Badge** with the row count, and a right-aligned order eyebrow.
+- **Rows** (hairline-separated): per-row **Checkbox**, the allocated **number** (mono,
+ `min-width 42`), the channel **name** (semibold, ellipsis) over a `from "{value}"` sub-line, a
+ neutral **Badge** `{itemCount} items`, and — for an already-existing name — an `Exists` **Tag**.
+ Existing rows render at `opacity: 0.55` with a **disabled, unchecked** checkbox (dedup: you can't
+ re-create a channel that already exists by that name).
+- **Empty state** (no proposals matched): centered `SearchX` + "try lowering the minimum items".
+
+**Primary action:** `Create {N} channels` (primary, `Check` icon; label pluralizes; disabled until
+≥1 selected) preceded by a ghost `Back` (`ArrowLeft`) that returns to Configure.
+
+### Step 3 — Create (results)
+Centered column, `max-width: 860px`.
+- **Three `Stat` tiles** across the top: **Created / Skipped / Failed** counts (icons
+ `CheckCircle2` / `MinusCircle` / `XCircle`).
+- A **"Added to group {group}"** line (`FolderTree` icon).
+- A **results list** (card, hairline rows): per channel a status **glyph** in the status color
+ (`CheckCircle2` live-green / `MinusCircle` secondary / `XCircle` danger), the **name**, an optional
+ **reason** sub-line (skip/fail explanation), the new **`#{channelId}`** (mono) when created, and a
+ status **Badge** (`positive` / `neutral` / `danger`).
+
+**Primary action:** `Start over` (primary, `RotateCcw`) — resets the wizard to Configure.
+
+---
+
+## API mapping (the real screen)
+
+Both endpoints already exist (PR1). The client sends **only `axis` + `value`** back — never a Lucene
+query; the server regenerates it (query authorship is server-side only).
+
+| UI element | Endpoint / field |
+|---|---|
+| `Preview channels` | `POST /api/v1/channels/auto-tune/preview` |
+| — axis cards | request `axes: AutoTuneAxis[]` (`"TvShow" \| "TvGenre" \| "MovieGenre"`) |
+| — Minimum items | request `minItems: number` |
+| — Starting channel number | request `startingNumber: number` |
+| Preview rows | response `AutoTuneProposalResponseModel[]`: `{ axis, value, name, number (string), itemCount, alreadyExists }` |
+| — number chip | `number` (string — channel numbers can be `"500.1"`; render as-is) |
+| — `{itemCount} items` badge | `itemCount` |
+| — greyed + `Exists` | `alreadyExists === true` (deselect + disable) |
+| `Create {N} channels` | `POST /api/v1/channels/auto-tune` |
+| — Channel template field | request `templateId: number` (from `GET /api/v1/channel-templates` / `…/default`) |
+| — Channel group field | request `group: string` |
+| — selected rows | request `channels: { axis, value, name, number }[]` (echo the selected proposals) |
+| Results tiles + list | response `AutoTuneResultResponseModel`: `{ results: { name, status ("Created"\|"Skipped"\|"Failed"), channelId, reason }[], createdCount, skippedCount, failedCount }` |
+
+Notes:
+- **Numbers are advisory.** The preview allocates them (skipping taken numbers); the create handler
+ **re-validates** at create time — a number taken in between yields a per-channel `Skipped`, not a
+ batch failure. So a `Skipped` outcome with "number … already taken" is normal, not an error.
+- **Default selection = every proposal whose `alreadyExists` is false.**
+- **Grouping/ordering** is fixed: axis order (TvShow, TvGenre, MovieGenre) then by value; mirror the
+ server's ordering rather than re-sorting client-side.
+- **Template default:** preselect `GET /api/v1/channel-templates/default` (fall back to the first
+ template) so the field is never empty; the batch requires a `templateId`.
+
+## Real-SPA implementation notes (target = `web/`)
+- New screen `web/src/screens/AutoTuneScreen.tsx`; new route id `autoTune`, path `/app/auto-tune`,
+ label **"Auto-Tune"**, icon `Sparkles`, placed **right after `builder`** in the first sidebar nav
+ group (the two channel-creation modes sit together). No `primaryAction` label — the wizard's
+ action lives in-body (per `spa-conventions.md` §10: the "+" banner is for single unambiguous
+ *create* list screens; a multi-step wizard drives its own buttons), so the shell shows no banner
+ button for this screen.
+- New API module `web/src/api/autoTune.ts` (re-export the generated DTOs; `previewAutoTune(body)` +
+ `createAutoTunedChannels(body)` over the shared `request` helper; a `messageFrom…Error` narrower),
+ re-exported from `web/src/api/index.ts`.
+- Reuse `getChannelTemplates` / `getDefaultChannelTemplate` from `web/src/api/channelTemplates.ts`
+ for the template `Select`.
+- Follow `spa-conventions.md` §3 for the two async calls (discriminated-union state, `seqRef` +
+ `activeRef`, no synchronous set-state in an effect body). The wizard is transient (a create flow,
+ not an editor of persisted data), so it does **not** register the §8 unsaved-changes guard.
+- Map prototype primitives → real components: `Button`, `Input`, `Select`, `Checkbox`, `Badge`,
+ `Tag`, `Stat`, `Tooltip`, `Spinner` from `web/src/components/`. The axis cards and step rail are
+ small screen-local components built from `ctv-*` utility classes + tokens (no new shared primitive).
+- Docs to update in the same PR: `docs/domain-model.md` (add `/app/auto-tune` to the channel routes),
+ `docs/blazor-route-parity.md` (net-new SPA screen, no Blazor ancestor), `docs/spa-conventions.md`
+ (if the wizard/step-rail pattern is worth recording), and `design-system/` committed alongside.
diff --git a/design-system/templates/chicorytv-admin/AutoTune.jsx b/design-system/templates/chicorytv-admin/AutoTune.jsx
new file mode 100644
index 000000000..1e120c825
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/AutoTune.jsx
@@ -0,0 +1,900 @@
+// Auto-Tune — generate a whole channel lineup from library metadata (#69).
+// The "automatic-first" creation mode alongside the manual Channel Builder.
+// One screen, three steps: Configure axes/defaults -> Preview proposed channels
+// (select which to keep) -> Create (per-channel Created/Skipped/Failed summary).
+// Additive & non-destructive: never edits or deletes an existing channel; number
+// or name collisions are skipped, never overwritten. Each generated channel is
+// backed by a live SmartCollection query so it keeps tracking the library.
+(function () {
+ const NS = window.ChicoryTVDesignSystem_eb3b61;
+ const { Button, IconButton, Input, Select, Switch, Checkbox, Badge, Tag, Stat, Tooltip, ChannelLogo } = NS;
+ const Ico = window.Ico;
+ const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };
+ const eyebrow = { font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-disabled)" };
+
+ // ---- Axis catalogue (mirrors AutoTuneAxisMap.cs on the server) -------------
+ // nameOf() and order are display-only here; the real server owns query + name.
+ const AXES = [
+ { id: "TvShow", icon: "Tv", title: "TV Shows", tagline: "One 24/7 channel per show", detail: "Plays in season / episode order.", order: "Episode order", nameOf: (v) => v },
+ { id: "TvGenre", icon: "Clapperboard", title: "TV Genres", tagline: "A channel per episode genre", detail: "Shuffled across every matching episode.", order: "Shuffled", nameOf: (v) => v },
+ { id: "MovieGenre", icon: "Film", title: "Movie Genres", tagline: "A movie channel per genre", detail: "Shuffled across every matching movie.", order: "Shuffled", nameOf: (v) => v + " Movies" },
+ ];
+ const AXIS = Object.fromEntries(AXES.map((a) => [a.id, a]));
+
+ // ---- Mock library metadata (EF distinct+count in the real app) ------------
+ const LIBRARY = {
+ TvShow: [
+ { value: "The Office", count: 201 },
+ { value: "Friends", count: 236 },
+ { value: "Breaking Bad", count: 62 },
+ { value: "Parks and Recreation", count: 125 },
+ { value: "The Twilight Zone", count: 156 },
+ { value: "Firefly", count: 3 }, // below default minItems -> filtered
+ ],
+ TvGenre: [
+ { value: "Comedy", count: 640 },
+ { value: "Drama", count: 512 },
+ { value: "Sci-Fi", count: 208 },
+ { value: "Crime", count: 174 },
+ ],
+ MovieGenre: [
+ { value: "Action", count: 42 },
+ { value: "Sci-Fi", count: 28 },
+ { value: "Horror", count: 35 },
+ { value: "Comedy", count: 51 },
+ { value: "Noir", count: 3 }, // below default minItems -> filtered
+ ],
+ };
+
+ // Coexistence demo: some names already exist (deduped, unchecked by default)
+ // and some numbers are already taken (allocation skips them).
+ const EXISTING_NAMES = new Set(["Friends", "Sci-Fi"]);
+ const TAKEN_NUMBERS = new Set(["500", "503"]);
+
+ const TEMPLATES = ["Standard", "Movie night", "Music videos"];
+
+ // ---- Preview computation (advisory numbers, re-validated at create) -------
+ function buildProposals(axisIds, minItems, startingNumber) {
+ const out = [];
+ let next = Math.max(1, startingNumber | 0);
+ const takenThisRun = new Set(TAKEN_NUMBERS);
+ const alloc = () => {
+ while (takenThisRun.has(String(next))) next++;
+ const n = String(next);
+ takenThisRun.add(n);
+ next++;
+ return n;
+ };
+ // Grouped by axis order (TvShow, TvGenre, MovieGenre), then by value.
+ AXES.forEach((ax) => {
+ if (!axisIds.has(ax.id)) return;
+ LIBRARY[ax.id]
+ .filter((row) => row.count >= minItems)
+ .slice()
+ .sort((a, b) => a.value.localeCompare(b.value))
+ .forEach((row) => {
+ const name = ax.nameOf(row.value);
+ const exists = EXISTING_NAMES.has(name);
+ out.push({ axis: ax.id, value: row.value, name, number: alloc(), itemCount: row.count, alreadyExists: exists });
+ });
+ });
+ return out;
+ }
+
+ // ---- Bug (channel icon) — local variant of DS ChannelLogo that also takes
+ // explicit initials + color (ChannelLogo only derives them from name). --
+ const BUG_PALETTE = [
+ ["#5B7CFA", "#2E3A66"], ["#3FB984", "#1E4536"], ["#E0A83D", "#4A3818"],
+ ["#E5484D", "#4A1F21"], ["#B06CF0", "#38235A"], ["#48B0C8", "#193E47"],
+ ];
+ const bugHash = (s) => { let h = 0; s = s || ""; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0; return h % BUG_PALETTE.length; };
+ const bugInitials = (name, custom) => (custom && custom.trim()) || (name || "?").split(/[\s\-|:]+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("").toUpperCase() || "?";
+ function Bug({ name, initials, ci, size = 32 }) {
+ const idx = ci != null ? ci : bugHash(name);
+ const [fg, bg] = BUG_PALETTE[idx];
+ return (
+
+ {bugInitials(name, initials)}
+
+ );
+ }
+
+ // ---- Example content sources (advisory sample of the smart-collection query)
+ const GENRE_SHOWS = {
+ Comedy: ["The Office", "Friends", "Parks and Recreation"],
+ Drama: ["Breaking Bad", "The Twilight Zone"],
+ "Sci-Fi": ["The Twilight Zone", "Firefly"],
+ Crime: ["Breaking Bad"],
+ };
+ const MOVIE_TITLES = {
+ Action: ["Afterburn", "Steel Horizon", "Nightfall Run"],
+ "Sci-Fi": ["Orbital Decay", "The Quiet Sky", "Vector"],
+ Horror: ["Hollow", "The Vigil", "Saltmarsh"],
+ Comedy: ["Office Party", "Two Left Feet", "The Understudy"],
+ Noir: ["Rain on 5th", "The Long Con"],
+ };
+ const isGenreAxis = (axis) => axis !== "TvShow";
+ function baseSources(p) {
+ if (p.axis === "TvGenre") return GENRE_SHOWS[p.value] || [];
+ if (p.axis === "MovieGenre") return MOVIE_TITLES[p.value] || [];
+ return []; // TvShow channels track a single show — no per-source editor
+ }
+ function effectiveSources(p, ov) {
+ const ex = ov.exclude || [];
+ return [...baseSources(p).filter((s) => !ex.includes(s)), ...(ov.include || [])];
+ }
+ // Advisory item-count estimate as sources are added/removed (per-source share).
+ function estItems(p, ov) {
+ const base = baseSources(p);
+ if (!base.length) return p.itemCount;
+ const share = p.itemCount / base.length;
+ return Math.max(0, Math.round(share * effectiveSources(p, ov).length));
+ }
+ // Sources with their rotation weight (episodes played per rotation).
+ function sourceList(p, ov) {
+ return effectiveSources(p, ov).map((name) => ({ name, weight: (ov.ratios && ov.ratios[name]) || 1 }));
+ }
+
+ // Compact rotation-weight stepper (− N +).
+ function Weight({ w, onChange }) {
+ const btn = { width: 24, height: 26, display: "inline-flex", alignItems: "center", justifyContent: "center", background: "transparent", border: "none", cursor: "pointer", color: "var(--text-secondary)", padding: 0 };
+ return (
+
+ onChange(w - 1)}>
+ {w}
+ onChange(w + 1)}>
+
+ );
+ }
+
+ // ---- Example schedule (rundown → EPG blocks), advisory only ---------------
+ // Effective order for a channel: the axis default, unless overridden per channel.
+ function isShuffled(p, ov) { return ov && ov.shuffle != null ? ov.shuffle : AXIS[p.axis].order === "Shuffled"; }
+
+ const RUNTIME = { TvShow: 24, TvGenre: 30, MovieGenre: 100 };
+ function buildSchedule(p, ov) {
+ const mins = RUNTIME[p.axis] || 30;
+ const shuffled = isShuffled(p, ov);
+ let seq;
+ if (p.axis === "TvShow") {
+ const n = Math.min(8, Math.max(3, p.itemCount));
+ let eps = Array.from({ length: n }, (_, i) => i + 1);
+ if (shuffled) eps = eps.map((e) => ({ e, k: (e * 7 + 3) % n })).sort((a, b) => a.k - b.k).map((x) => x.e);
+ seq = eps.map((e) => ({ title: `S01E${String(e).padStart(2, "0")}`, sub: p.value }));
+ } else {
+ const list = sourceList(p, ov).filter((s) => s.weight > 0);
+ if (!list.length) return [];
+ if (shuffled) {
+ // Weighted round-robin interleave — honors the per-source rotation ratio.
+ const total = list.reduce((a, s) => a + s.weight, 0);
+ const st = list.map((s) => ({ ...s, acc: 0 }));
+ const count = Math.min(9, Math.max(5, total * 2));
+ seq = Array.from({ length: count }, () => {
+ let pick = null;
+ st.forEach((s) => { s.acc += s.weight; if (!pick || s.acc > pick.acc) pick = s; });
+ pick.acc -= total;
+ return { title: pick.name, sub: p.axis === "TvGenre" ? "Episode" : "" };
+ });
+ } else {
+ // Sequential — each source plays its rotation count in turn.
+ seq = [];
+ list.forEach((s) => { for (let i = 0; i < s.weight; i++) seq.push({ title: s.name, sub: p.axis === "TvGenre" ? "Episode" : "" }); });
+ seq = seq.slice(0, 9);
+ }
+ }
+ let t = 20 * 60;
+ return seq.map((b) => {
+ const start = `${String(Math.floor(t / 60) % 24).padStart(2, "0")}:${String(t % 60).padStart(2, "0")}`;
+ t += mins;
+ return { ...b, start, mins };
+ });
+ }
+
+ function MiniEpg({ blocks }) {
+ if (!blocks.length) return (
+ No content matches — nothing to schedule.
+ );
+ const PPM = 2.0;
+ return (
+
+
+ {blocks.map((b, i) => (
+
+ {b.start}
+ {b.title}
+ {b.sub && {b.sub} }
+
+ ))}
+
+
+ {label}
+ {value}
+
+ );
+ }
+
+ // ---- Full channel settings (mirrors the manual Channel Builder) -----------
+ const CH_TEMPLATES = [
+ { id: "Standard", builtin: true, desc: "General-purpose 1080p H.264, retro bumpers.", shuffle: false, always: true, sets: ["1080p H.264", "HLS Segmenter", "Sequential", "Always on", "Pre + post filler"] },
+ { id: "Music videos", builtin: true, desc: "Continuous rotation, no fillers, direct stream.", shuffle: true, always: true, sets: ["720p H.264", "HLS Direct", "Shuffle", "Always on", "No filler"] },
+ { id: "Movie night", builtin: true, desc: "Film-grain HEVC, mid-roll ad breaks.", shuffle: false, always: false, sets: ["1080p HEVC", "MPEG-TS", "Sequential", "On-demand", "Mid-roll ads"] },
+ ];
+ const ADV_GROUPS = [
+ { group: "Streaming", fields: [["Streaming mode", "HLS Segmenter"], ["FFmpeg profile", "1080p H.264"], ["Resolution", "1920\u00d71080"], ["Video bitrate", "8000 kbps"], ["Audio bitrate", "192 kbps"], ["Buffer size", "16000 kb"]] },
+ { group: "Filler", fields: [["Pre-roll", "Retro Bumpers"], ["Mid-roll", "Ad Break"], ["Post-roll", "Outro"], ["Tail filler", "None"], ["Fallback", "Test Pattern"], ["Filler kind", "Pad to :00"]] },
+ { group: "Playback", fields: [["Interleave", "On"], ["Keep multi-part together", "On"], ["Watermark", "Channel logo"], ["Subtitle mode", "Any"], ["Preferred audio", "English"], ["Preferred subtitle", "None"]] },
+ { group: "Behavior", fields: [["Guide mode default", "Normal"], ["Song video mode", "Off"], ["On-demand", "Off"], ["Idle behavior", "Offline image"], ["Transcode audio", "Normalize"], ["Number scheme", "Auto"]] },
+ ];
+
+ // Friendly toggle row (label + description + Switch), with an override tag.
+ function ToggleRow({ icon, iconColor, title, desc, checked, onChange, overrideOf, live }) {
+ return (
+ onChange(!checked)} style={{ display: "flex", alignItems: "flex-start", gap: 10, padding: "10px 11px", borderRadius: "var(--radius-sm)", cursor: "pointer", background: live && checked ? "var(--ctv-live-soft)" : "transparent", border: `1px solid ${live && checked ? "var(--ctv-live)" : "var(--border-hairline)"}` }}>
+ {icon &&
+
+ {title}
+ {overrideOf != null && checked !== overrideOf && overrides template }
+
+
{desc}
+
+ );
+ }
+
+ // Channel Template picker (collapsed row + dropdown + spec chips).
+ function TemplatePicker({ value, onPick }) {
+ const [open, setOpen] = React.useState(false);
+ const t = CH_TEMPLATES.find((x) => x.id === value) || CH_TEMPLATES[0];
+ return (
+
+
setOpen((o) => !o)} className="ctv-press"
+ style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "10px 11px", borderRadius: "var(--radius-sm)", cursor: "pointer", textAlign: "left", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-control)" }}>
+
+ {open && (
+
+ {CH_TEMPLATES.map((x) => {
+ const on = x.id === value;
+ return (
+
{ onPick(x); setOpen(false); }}
+ style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 9px", borderRadius: "var(--radius-xs)", cursor: "pointer", textAlign: "left", background: on ? "var(--ctv-accent-soft)" : "transparent", border: "none" }}>
+
+ );
+ })}
+
+ )}
+
+ {t.sets.map((s) => (
+ {s}
+ ))}
+
+
+
+ Advanced
+ {overridden ? `${overridden} overridden` : `${count} fields`} \u00b7 {templateName}
+
+
+ setMode((m) => (m === "override" ? "closed" : "override"))} style={tabBtn(override)}>
+ setMode((m) => (m === "view" ? "closed" : "view"))} style={tabBtn(mode === "view")}>
+
+ {mode !== "closed" && (
+
+
+
+ {ADV_GROUPS.map((g) => (
+
+
{g.group}
+
+ {g.fields.map(([k, v]) => override ? (
+
patch((o) => ({ adv: { ...(o.adv || {}), [k]: e.target.value } }))} />
+ ) : (
+
+ ))}
+
+
+ ))}
+
+ );
+ }
+
+ // Compact channel-image dropzone (sets a data-URL logo used as guide logo + bug).
+ function LogoDrop({ name, src, onSet }) {
+ const [over, setOver] = React.useState(false);
+ const fileRef = React.useRef(null);
+ const read = (file) => { if (!file) return; const r = new FileReader(); r.onload = () => onSet(r.result); r.readAsDataURL(file); };
+ return (
+ { e.preventDefault(); setOver(true); }} onDragLeave={() => setOver(false)}
+ onDrop={(e) => { e.preventDefault(); setOver(false); read(e.dataTransfer.files && e.dataTransfer.files[0]); }}
+ onClick={() => fileRef.current && fileRef.current.click()}
+ style={{ display: "flex", alignItems: "center", gap: 12, padding: 10, borderRadius: "var(--radius-sm)", cursor: "pointer", background: "var(--ctv-bg-sunken)", border: `1px dashed ${over ? "var(--ctv-accent)" : "var(--border-control)"}` }}>
+
+
+
{src ? "Channel image set" : "Drop a channel image"}
+
Used as the guide logo and on-screen bug. Falls back to the initials below.
+
+ {src &&
{ e.stopPropagation(); onSet(null); }}> }
+
read(e.target.files && e.target.files[0])} />
+
+
+
+
+ {avatar(34)}
+
+
{name || "Untitled channel"}
+
+ {number} ·
+
+
+
+
+
+
+ Playback
+ patch({ shuffle: v })} overrideOf={tpl.shuffle} />
+ patch({ always: v })} overrideOf={tpl.always} />
+
+
+
+
+
+ Query & size
+
+ {items.toLocaleString()}} />
+ {p.axis === "TvShow" ? `show="${p.value}"` : p.axis === "TvGenre" ? `genre="${p.value}"` : `genre="${p.value}" AND type=movie`}} />
+
+
+
+ {genre && (
+
+
+
Content sources
+
Everything tagged “{p.value}”. Exclude a title even though it matches, add one that isn’t tagged, or set how often each plays.
+
+ {list.length === 0 && (
+
No sources — add one below.
+ )}
+ {[...kept.map((s) => ({ s, added: false })), ...inc.map((s) => ({ s, added: true }))].map((row, idx) => (
+
+ {row.s}
+ {multi && setW(row.s, w)} />}
+ (row.added ? removeInc(row.s) : excludeSrc(row.s))}>
+
+ ))}
+
+ Rotation: {list.map((s) => `${wOf(s)}× ${s}`).join(" · ")}
+
+ )}
+
+
+
+
Add
+
+ Excluded:
+ {ex.map((s) => (
+ restoreSrc(s)} title="Add back"
+ style={{ display: "inline-flex", alignItems: "center", gap: 5, cursor: "pointer", height: 22, padding: "0 8px", borderRadius: "var(--radius-xs)", background: "transparent", border: "1px solid var(--border-hairline)", color: "var(--text-disabled)", font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)" }}>
+ {s}
+ ))}
+
+ )}
+
+ )}
+
+
+
+
Example schedule
+
A preview of tonight from 20:00 — the built playout may differ.
+
+
+
+
+
+
setStep("configure")}
+ onRestart={restart}
+ />
+
+ {step === "configure" && (
+
+ {detail != null && (() => {
+ const p = proposals.find((x) => x.name === detail);
+ if (!p) return null;
+ return setDetail(null)} />;
+ })()}
+
+
+
+
Auto-Tune
+
Generate channels from your library
+
+
+
+ {step === "configure" && (
+
+
+ )}
+ {step === "preview" && (
+
+
+
+
+ )}
+ {step === "create" && (
+
} onClick={onRestart}>Start over
+ )}
+
+ {STEPS.map((s, i) => {
+ const done = i < idx, active = i === idx;
+ const color = active ? "var(--ctv-accent)" : done ? "var(--text-secondary)" : "var(--text-disabled)";
+ return (
+
+
+ {done ?
+ {s.label}
+
+ {i < STEPS.length - 1 &&
+ );
+ })}
+
+
+ Turn your library into a full lineup in one pass. Pick which metadata axes to generate from,
+ preview the proposed channels, then create the ones you want. Existing channels are never touched.
+
+
+
+ Generate from
+
+ {AXES.map((ax) => {
+ const on = axisIds.has(ax.id);
+ return (
+
toggleAxis(ax.id)}
+ className="ctv-press"
+ style={{
+ textAlign: "left", cursor: "pointer", padding: "16px 16px 15px", borderRadius: "var(--radius-md)",
+ border: `1px solid ${on ? "var(--ctv-accent)" : "var(--border-control)"}`,
+ background: on ? "var(--ctv-accent-soft)" : "var(--surface-card)",
+ boxShadow: on ? "var(--shadow-sm)" : "none", position: "relative", display: "flex", flexDirection: "column", gap: 9,
+ }}>
+
+
+
+
{ax.title}
+
{ax.tagline}
+
+
+
+ );
+ })}
+
+
+
+
+ {label}
+ {children}
+ {hint}
+
+ );
+ }
+
+ // ---- Step 2: Preview ------------------------------------------------------
+ function Preview({ proposals, selected, setSelected, expanded, setExpanded, overrides, openDetail, dispName }) {
+ const toggle = (name) => setSelected((s) => { const n = new Set(s); n.has(name) ? n.delete(name) : n.add(name); return n; });
+ const toggleExp = (name) => setExpanded((s) => { const n = new Set(s); n.has(name) ? n.delete(name) : n.add(name); return n; });
+ const groups = AXES.map((ax) => ({ ax, rows: proposals.filter((p) => p.axis === ax.id) })).filter((g) => g.rows.length);
+ const selectable = proposals.filter((p) => !p.alreadyExists);
+ const existingCount = proposals.length - selectable.length;
+
+ if (!proposals.length) {
+ return (
+
+
+
No channels matched — try lowering the minimum items.
+
+
+
+ {selected.size} of {selectable.length} selected
+
+ {existingCount > 0 && (
+ setAll(selectable, true)}>Select all
+ setAll(selectable, false)}>Clear
+
+
+ {groups.map(({ ax, rows }) => {
+ const groupSel = rows.filter((r) => !r.alreadyExists);
+ const allOn = groupSel.length > 0 && groupSel.every((r) => selected.has(r.name));
+ const someOn = groupSel.some((r) => selected.has(r.name));
+ return (
+
+
+ setAll(rows, !allOn)} />
+ {ax.title}
+ {rows.length}
+
+
+
+
+ {rows.map((r, i) => {
+ const on = selected.has(r.name);
+ const ov = overrides[r.name] || {};
+ const name = dispName(r);
+ const isExp = expanded.has(r.name);
+ return (
+
+
+
toggle(r.name)} />
+ {r.number}
+ !r.alreadyExists && toggleExp(r.name)} style={{ flex: 1, minWidth: 0, textAlign: "left", background: "transparent", border: "none", padding: 0, cursor: r.alreadyExists ? "default" : "pointer" }}>
+ {name}
+ from “{r.value}”
+
+
+
+ {r.itemCount} items
+ toggleExp(r.name)}>
+
+
+ )}
+
+ {isExp && !r.alreadyExists && (
+
+
+ Example schedule
+
+
+
+ )}
+
+ );
+ })}
+
+ );
+ })}
+
+
+
+
+ {group}
+
+
+ {results.map((r, i) => {
+ const m = RESULT_META[r.status];
+ return (
+
+
+
+
{r.name}
+ {r.reason &&
{r.reason}
}
+
+ {r.channelId != null &&
#{r.channelId} }
+
{r.status}
+
+
{
+ return request('/api/v1/channels/auto-tune/preview', {
+ body,
+ method: 'POST'
+ });
+}
+
+export function createAutoTunedChannels(body: CreateAutoTunedChannelsRequest): Promise {
+ return request('/api/v1/channels/auto-tune', {
+ body,
+ method: 'POST'
+ });
+}
+
+export function messageFromAutoTuneError(error: unknown, fallback = 'Unable to auto-tune channels'): string {
+ if (error instanceof ApiError) {
+ return error.detail ?? error.message;
+ }
+
+ if (error instanceof Error) {
+ return error.message;
+ }
+
+ return fallback;
+}
diff --git a/web/src/api/index.ts b/web/src/api/index.ts
index ed40e97cd..567b02c0e 100644
--- a/web/src/api/index.ts
+++ b/web/src/api/index.ts
@@ -1,5 +1,6 @@
export * from './artwork';
export * from './auth';
+export * from './autoTune';
export * from './blocks';
export * from './channels';
export * from './channelTemplates';
diff --git a/web/src/app/ScreenContent.tsx b/web/src/app/ScreenContent.tsx
index 983539c08..5a05acc8b 100644
--- a/web/src/app/ScreenContent.tsx
+++ b/web/src/app/ScreenContent.tsx
@@ -8,6 +8,7 @@ import {
parseMediaSubRoute
} from '../routing';
import { ApiKeyScreen } from '../screens/ApiKeyScreen';
+import { AutoTuneScreen } from '../screens/AutoTuneScreen';
import { BlockPlayoutTroubleshootingScreen } from '../screens/BlockPlayoutTroubleshootingScreen';
import { BlocksScreen } from '../screens/BlocksScreen';
import { ChannelEditScreen } from '../screens/ChannelEditScreen';
@@ -165,6 +166,8 @@ export function ScreenContent({
return {
+ return vi.spyOn(window, 'fetch').mockImplementation((input: RequestInfo | URL, init?: RequestInit) => {
+ const path = input.toString();
+ const method = (init?.method ?? 'GET').toUpperCase();
+
+ if (path === '/api/v1/channel-templates') {
+ return Promise.resolve(jsonResponse(templates));
+ }
+ if (path === '/api/v1/channel-templates/default') {
+ return Promise.resolve(jsonResponse(templates[0]));
+ }
+ if (path === '/api/v1/channels/auto-tune/preview' && method === 'POST') {
+ return Promise.resolve(jsonResponse(proposals));
+ }
+ if (path === '/api/v1/channels/auto-tune' && method === 'POST') {
+ return Promise.resolve(jsonResponse(createResult));
+ }
+
+ return Promise.resolve(jsonResponse(null, 404));
+ });
+}
+
+describe('AutoTuneScreen', () => {
+ beforeEach(() => {
+ window.localStorage.clear();
+ vi.restoreAllMocks();
+ });
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ it('gates the Preview action on at least one selected axis', async () => {
+ mockAutoTuneApi();
+ render( = {
+ Created: { icon: CheckCircle2, tone: 'ok', color: 'var(--status-ok)' },
+ Skipped: { icon: MinusCircle, tone: 'neutral', color: 'var(--text-secondary)' },
+ Failed: { icon: XCircle, tone: 'error', color: 'var(--status-error)' }
+};
+
+export function AutoTuneScreen() {
+ const [step, setStep] = useState('configure');
+ const [axisIds, setAxisIds] = useState>(() => new Set(['TvShow', 'TvGenre', 'MovieGenre']));
+ const [minItems, setMinItems] = useState('5');
+ const [startingNumber, setStartingNumber] = useState('500');
+ const [group, setGroup] = useState('Auto-Tuned');
+ const [templateId, setTemplateId] = useState('');
+
+ const [templatesState, setTemplatesState] = useState({ status: 'loading' });
+ const [previewState, setPreviewState] = useState({ status: 'idle' });
+ const [createState, setCreateState] = useState({ status: 'idle' });
+ const [selected, setSelected] = useState>(() => new Set());
+
+ const activeRef = useRef(true);
+ const templatesSeqRef = useRef(0);
+ const previewSeqRef = useRef(0);
+ const createSeqRef = useRef(0);
+
+ useEffect(() => {
+ activeRef.current = true;
+ return () => {
+ activeRef.current = false;
+ };
+ }, []);
+
+ const loadTemplates = useCallback(() => {
+ const id = ++templatesSeqRef.current;
+ Promise.all([getChannelTemplates(), getDefaultChannelTemplate()])
+ .then(([templates, preferred]) => {
+ if (!activeRef.current || id !== templatesSeqRef.current) {
+ return;
+ }
+ setTemplatesState({ status: 'success', templates });
+ const fallback = preferred ?? templates[0] ?? null;
+ if (fallback) {
+ setTemplateId(String(fallback.id));
+ }
+ })
+ .catch((error: unknown) => {
+ if (activeRef.current && id === templatesSeqRef.current) {
+ setTemplatesState({ status: 'error', message: messageFromChannelTemplateError(error) });
+ }
+ });
+ }, []);
+
+ useEffect(() => {
+ loadTemplates();
+ }, [loadTemplates]);
+
+ const toggleAxis = (id: AutoTuneAxis) => {
+ setAxisIds((current) => {
+ const next = new Set(current);
+ if (next.has(id)) {
+ next.delete(id);
+ } else {
+ next.add(id);
+ }
+ return next;
+ });
+ };
+
+ const runPreview = () => {
+ if (axisIds.size === 0) {
+ return;
+ }
+ const id = ++previewSeqRef.current;
+ setStep('preview');
+ setPreviewState({ status: 'loading' });
+ previewAutoTune({
+ axes: AXES.filter((axis) => axisIds.has(axis.id)).map((axis) => axis.id),
+ minItems: Math.max(1, Number.parseInt(minItems, 10) || 1),
+ startingNumber: Number.parseInt(startingNumber, 10) || 1
+ })
+ .then((proposals) => {
+ if (!activeRef.current || id !== previewSeqRef.current) {
+ return;
+ }
+ setPreviewState({ status: 'success', proposals });
+ // Default selection: every proposal that doesn't already exist.
+ setSelected(new Set(proposals.filter((proposal) => !proposal.alreadyExists).map(proposalKey)));
+ })
+ .catch((error: unknown) => {
+ if (activeRef.current && id === previewSeqRef.current) {
+ setPreviewState({ status: 'error', message: messageFromAutoTuneError(error, 'Unable to preview channels') });
+ }
+ });
+ };
+
+ const proposals = previewState.status === 'success' ? previewState.proposals : [];
+ const selectedProposals = proposals.filter(
+ (proposal) => !proposal.alreadyExists && selected.has(proposalKey(proposal))
+ );
+
+ const runCreate = () => {
+ if (selectedProposals.length === 0 || templateId === '') {
+ return;
+ }
+ const id = ++createSeqRef.current;
+ setStep('create');
+ setCreateState({ status: 'loading' });
+ createAutoTunedChannels({
+ templateId: Number(templateId),
+ group,
+ channels: selectedProposals.map((proposal) => ({
+ axis: proposal.axis as AutoTuneAxis,
+ value: proposal.value,
+ name: proposal.name,
+ number: proposal.number
+ }))
+ })
+ .then((result) => {
+ if (activeRef.current && id === createSeqRef.current) {
+ setCreateState({ status: 'success', result });
+ }
+ })
+ .catch((error: unknown) => {
+ if (activeRef.current && id === createSeqRef.current) {
+ setCreateState({ status: 'error', message: messageFromAutoTuneError(error, 'Unable to create channels') });
+ }
+ });
+ };
+
+ const restart = () => {
+ setPreviewState({ status: 'idle' });
+ setCreateState({ status: 'idle' });
+ setSelected(new Set());
+ setStep('configure');
+ };
+
+ const templateOptions =
+ templatesState.status === 'success'
+ ? templatesState.templates.map((template) => ({ value: String(template.id), label: template.name }))
+ : [];
+
+ return (
+
+
+
+
+
+
+ Auto-Tune
+
+
+ Generate channels from your library
+
+
+
+
+ {step === 'configure' && (
+
+
+ )}
+ {step === 'preview' && (
+ <>
+
} onClick={() => setStep('configure')}>
+ Back
+
+
+
+
+ )}
+ {step === 'create' && (
+
} onClick={restart}>
+ Start over
+
+ )}
+
+
+
+ {step === 'configure' && (
+
+
+ {STEPS.map((entry, i) => {
+ const done = i < index;
+ const active = i === index;
+ const color = active ? 'var(--ctv-accent)' : done ? 'var(--text-secondary)' : 'var(--text-disabled)';
+ return (
+
+
+
+ {done ?
+
+ {entry.label}
+
+
+ {i < STEPS.length - 1 && (
+
+ );
+ })}
+
+ );
+}
+
+function Field({ label, hint, children }: { label: string; hint: string; children: ReactNode }) {
+ return (
+
+ {label}
+ {children}
+ {hint}
+
+ );
+}
+
+function ConfigureStep({
+ axisIds,
+ toggleAxis,
+ minItems,
+ setMinItems,
+ startingNumber,
+ setStartingNumber,
+ group,
+ setGroup,
+ templateId,
+ setTemplateId,
+ templatesState,
+ templateOptions,
+ retryTemplates
+}: {
+ axisIds: Set;
+ toggleAxis: (id: AutoTuneAxis) => void;
+ minItems: string;
+ setMinItems: (value: string) => void;
+ startingNumber: string;
+ setStartingNumber: (value: string) => void;
+ group: string;
+ setGroup: (value: string) => void;
+ templateId: string;
+ setTemplateId: (value: string) => void;
+ templatesState: TemplatesState;
+ templateOptions: { value: string; label: string }[];
+ retryTemplates: () => void;
+}) {
+ return (
+
+
+ Turn your library into a full lineup in one pass. Pick which metadata axes to generate from, preview the proposed
+ channels, then create the ones you want. Existing channels are never touched.
+
+
+
+ Generate from
+
+ {AXES.map((axis) => {
+ const on = axisIds.has(axis.id);
+ const AxisIcon = axis.icon;
+ const OrderIcon = axis.shuffled ? Shuffle : ListOrdered;
+ return (
+
toggleAxis(axis.id)}
+ className="ctv-press"
+ style={{
+ textAlign: 'left',
+ cursor: 'pointer',
+ padding: '16px 16px 15px',
+ borderRadius: 'var(--radius-md)',
+ border: `1px solid ${on ? 'var(--ctv-accent)' : 'var(--border-control)'}`,
+ background: on ? 'var(--ctv-accent-soft)' : 'var(--surface-card)',
+ boxShadow: on ? 'var(--shadow-sm)' : 'none',
+ position: 'relative',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: 9
+ }}
+ >
+
+ {on ?
+
+
+
+
+ {axis.title}
+
+
+ {axis.tagline}
+
+
+
+
+ );
+ })}
+
+
+
+
;
+ setSelected: (updater: (current: Set) => Set) => void;
+ onRetry: () => void;
+}) {
+ if (state.status === 'loading' || state.status === 'idle') {
+ return (
+
+
+
Enumerating your library…
+
+
+
{state.message}
+
+ Retry
+
+
+
+
+ No channels matched — try lowering the minimum items.
+
+
+
+
+ {selectedCount} of{' '}
+ {selectable.length} selected
+
+ {existingCount > 0 && (
+ setAll(selectable, true)}>
+ Select all
+
+ setAll(selectable, false)}>
+ Clear
+
+
+
+ {groups.map(({ axis, rows }) => {
+ const groupSelectable = rows.filter((row) => !row.alreadyExists);
+ const allOn = groupSelectable.length > 0 && groupSelectable.every((row) => selected.has(proposalKey(row)));
+ const someOn = groupSelectable.some((row) => selected.has(proposalKey(row)));
+ const AxisIcon = axis.icon;
+ const OrderIcon = axis.shuffled ? Shuffle : ListOrdered;
+ return (
+
+
+
setAll(rows, !allOn)}
+ />
+
+ {axis.title}
+
+ {rows.length}
+
+
+
+ {rows.map((row, i) => {
+ const on = selected.has(proposalKey(row));
+ return (
+
+
+
toggle(proposalKey(row))}
+ />
+
+ {row.number}
+
+
+
+ {row.name}
+
+
+ from “{row.value}”
+
+
+ {row.itemCount} items
+
+ {row.alreadyExists && Exists }
+
+
+ );
+ })}
+
+ );
+ })}
+
+
+
{state.message}
+
+ Retry
+
+
+
+
+
+ {group}
+
+
+ {result.results.map((entry, i) => {
+ const meta = RESULT_META[entry.status] ?? RESULT_META.Skipped;
+ const StatusIcon = meta.icon;
+ return (
+
+
+
+
+
+ {entry.name}
+
+ {entry.reason && (
+
+ {entry.reason}
+
+ )}
+
+ {entry.channelId != null && (
+
+ #{entry.channelId}
+
+ )}
+
{entry.status}
+
+