@mevdragon/vidfarm-devcli 0.15.0 → 0.17.0

package/dist/src/config.js

@@ -73,6 +73,19 @@ const schema = z.object({
     // long video through GhostCut. 15 min default ceiling (per-30s pricing makes
     // long-form runs absurd anyway).
     GHOSTCUT_MAX_DURATION_SEC: z.coerce.number().min(0).default(900),
+    // Auto-decompose kicks off GhostCut subtitle removal on the source video, but
+    // GhostCut prices per-30s chunk and is meant for short clips. Skip it entirely
+    // when the decompose source is longer than this — the composition just keeps
+    // the original burned-in captions rather than paying to launder a multi-minute
+    // video. 0 = never skip on length. Distinct from GHOSTCUT_MAX_DURATION_SEC
+    // (the standalone remove-captions primitive's hard ceiling).
+    GHOSTCUT_DECOMPOSE_MAX_DURATION_SEC: z.coerce.number().min(0).default(180),
+    // Inspiration ingest + auto-decompose used to hard-cap sources at 120s (a
+    // short-form-only assumption). Longer inspiration is now allowed. 0 = unlimited;
+    // set a positive ceiling to re-impose a limit. Kept separate from
+    // MAX_PROBE_DURATION_SECONDS (the per-primitive probe cost-guard) so raising the
+    // inspiration ceiling never loosens the generic probe default.
+    INSPIRATION_MAX_DURATION_SEC: z.coerce.number().min(0).default(0),
     // Cloud passthrough for `vidfarm serve`: the local box keeps editing/render
     // fully local but lists the upstream (prod) catalog in /discover and
     // /library, seeds forks on demand, and can hand a render off to the cloud.

package/dist/src/editor-chat.js

@@ -45,7 +45,7 @@ export function buildTemplateEditorChatSystemPrompt(input) {
         "If the user asks to modify an attached image and the message includes an attachment URL, call POST /api/v1/primitives/images/edit with source_image_url inside payload set to that exact URL and instruction inside payload set to the requested edit.",
         "If the user asks to generate a new AI video from text or reference images, call POST /api/v1/primitives/videos/generate with body { tracer, payload: { prompt, input_references?, duration? } }. AI video duration is seconds; use duration: 4 for a 4-second video and never use duration_ms on /videos/generate. input_references must be direct image asset URLs, not webpage or social post URLs. Use frame_images for exact first/last-frame image-to-video.",
         "If the user asks to render HTML/design into an image, call POST /api/v1/primitives/images/render-html. If the user asks to turn existing media URLs into a slideshow/video, call POST /api/v1/primitives/videos/render-slides. If the user asks to dedupe, camouflage, or apply small zoom/tilt/rotate/filter/tint transforms to an image or video for reuse, call POST /api/v1/primitives/media/dedupe with body { tracer, payload: { source_media_url, media_type?, effects?: { zoom?, tilt?, rotate?, saturation?, speed?, horizontal_flip?, contrast?, brightness?, hue_rotate?, blur? }, tint_color?, tint_opacity?, width?, height?, duration_ms?, object_fit?, background_color?, output_format? }, webhook_url? }. Primitive media utility routes are also allowed directly here, including /videos/trim, /videos/remove-captions, /videos/extract-audio, /videos/probe, /videos/extract-frame, /videos/mute, /videos/replace-audio, /videos/concat, /audio/trim, /audio/probe, /audio/concat, and /audio/normalize. If the user asks to remove burned-in captions, subtitles, or on-screen text from a video, call POST /api/v1/primitives/videos/remove-captions with body { tracer, payload: { source_video_url } } — an async job that returns a durable caption-free MP4 and bills about $0.10 per 30 seconds of source video. Caption removal is capped at ~15 minutes of source and must NEVER be used on long-form video: when the user wants short clips out of a long video (a podcast, stream VOD, webinar, or a YouTube/TikTok/IG/X URL), call POST /clips/scan instead with body { source_url | temp_file_id | s3_key, prompt, ranges?: [\"MM:SS-MM:SS\"], target_duration_sec?, aspect?: \"9:16\"|\"16:9\"|\"4:3\"|\"1:1\", avoid_text?, tracer? } — target_duration_sec is a SOFT range (30 → 20-40s), ranges restrict the hunt to those source windows (big cost saver), aspect crops every clip, and avoid_text prefers text-free scenes via scene SELECTION (never caption removal on the source). The hunt is async (202 + scan_id): poll GET /clips/scan/:scanId, then browse GET /clips/feed?source=<source_video_id> or POST /clips/search. Hunts bill AWS compute only — the AI tagging runs on the user's own saved provider keys. To erase captions from a finished HUNTED clip, pass that short mp4 to /videos/remove-captions afterwards.",
-        "SPEECH PRIMITIVES (TTS/STT) are first-class here. VOICEOVER / NARRATION: when the user wants a script, hook, caption, or dub read aloud as AI audio, call POST /api/v1/primitives/audio/speech with body { tracer, payload: { text, voice?, instructions?, provider?, model?, output_format? } } — instructions is a free-form voice-STYLE prompt (tone, pacing, accent, emotion, persona; e.g. 'calm warm bedtime narrator' or 'excited sports announcer, fast paced'), and voice picks a provider preset (OpenAI: alloy/ash/coral/...; Gemini: Kore/Puck/Charon/...). When sending a voice you may omit provider — it is inferred from the voice preset; a voice paired with the WRONG provider (e.g. voice 'Kore' with provider 'openai') is rejected with a 400, so never mix families. The finished job returns a durable audio URL — place it on the timeline with editor_action add_layer (kind=audio, src=that URL), typically starting where the narration should begin. TRANSCRIPTION: when the user wants a transcript, subtitles/captions from speech, a translation source, or to know who says what, call POST /api/v1/primitives/audio/transcribe with body { tracer, payload: { source_url, diarize?, language?, prompt? } } — source_url may be a VIDEO or AUDIO URL (video audio is demuxed automatically; pick the fork's source via GET /api/v1/compositions/:forkId/remove-video-captions first when transcribing the current composition). One job returns BOTH formats: a simple subtitle version (plain transcript text + timed SRT cues, stored as transcript.txt/transcript.srt) and an advanced multi-speaker version (speaker-attributed timed segments in output.segments and transcript.json) for multi-narration sources like podcasts and interviews. diarize defaults to true and speaker attribution needs a Gemini key — openai/openrouter keys degrade to a plain single-speaker transcript. For transcript-grounded caption work on THIS fork, the read-only video_context tool may already contain the decompose-time transcript; prefer it before running a new billable-key transcription, and use /audio/transcribe for other URLs, multi-speaker attribution, or SRT output.",
+        "SPEECH PRIMITIVES (TTS/STT) are first-class here. VOICEOVER / NARRATION: when the user wants a script, hook, caption, or dub read aloud as AI audio, call POST /api/v1/primitives/audio/speech with body { tracer, payload: { text, voice?, instructions?, provider?, model?, output_format? } } — instructions is a free-form voice-STYLE prompt (tone, pacing, accent, emotion, persona; e.g. 'calm warm bedtime narrator' or 'excited sports announcer, fast paced'), and voice picks a provider preset (OpenAI: alloy/ash/coral/...; Gemini: Kore/Puck/Charon/...). When sending a voice you may omit provider — it is inferred from the voice preset; a voice paired with the WRONG provider (e.g. voice 'Kore' with provider 'openai') is rejected with a 400, so never mix families. The finished job returns a durable audio URL — place it on the timeline with editor_action add_layer (kind=audio, src=that URL), typically starting where the narration should begin. TRANSCRIPTION: when the user wants a transcript, subtitles/captions from speech, a translation source, or to know who says what, call POST /api/v1/primitives/audio/transcribe with body { tracer, payload: { source_url, diarize?, language?, prompt? } } — source_url may be a VIDEO or AUDIO URL (video audio is demuxed automatically; pick the fork's source via GET /api/v1/compositions/:forkId/remove-video-captions first when transcribing the current composition). One job returns BOTH formats: a simple subtitle version (plain transcript text + timed SRT cues, stored as transcript.txt/transcript.srt) and an advanced multi-speaker version (speaker-attributed timed segments in output.segments and transcript.json) for multi-narration sources like podcasts and interviews. diarize defaults to true and speaker attribution needs a Gemini key — openai/openrouter keys degrade to a plain single-speaker transcript. For transcript-grounded caption work on THIS fork, the read-only video_context tool may already contain the decompose-time transcript; prefer it before running a new billable-key transcription, and use /audio/transcribe for other URLs, multi-speaker attribution, or SRT output. REGENERATE / REVOICE: when the user wants the SAME speaker to say DIFFERENT words (reword the narration, fix a line, change an offer or CTA, redub in the original voice), call POST /api/v1/primitives/audio/regenerate-speech with body { tracer, payload: { source_url (video or audio; video audio is demuxed), rewrite_instruction (how to reword the original transcript) OR text (the exact new script — one of the two is required), voice?, instructions?, provider?, model?, language?, output_format? } }. One job listens to the source, profiles the speaker's voice, rewords the script, and returns a durable audio URL spoken by the CLOSEST PRESET voice with a style prompt matched to the speaker (result fields: audioUrl, script, original_transcript, voice_profile, voice_match). Voice profiling needs a saved Gemini key — with only openai/openrouter keys the job degrades to transcript-only rewording with a default or explicitly passed voice and voice_match 'none'. IMPORTANT HONESTY RULE: OpenAI and Gemini APIs cannot clone voice identity (preset voices only), so always tell the user the regenerated audio APPROXIMATES the original voice rather than clones it. To swap the regenerated audio into the composition, mute the original span (/videos/mute or volume/muted on the layer) and place the new audio with editor_action add_layer (kind=audio, src=audioUrl).",
         "Brainstorm primitives are also available directly here. If the user explicitly asks for hooks, angles, awareness-stage advice, a cold-start strategy questionnaire, or product-placement opportunities in a video, call the matching brainstorm primitive immediately instead of brainstorming in chat from memory. Use POST /api/v1/primitives/brainstorm/coldstart with body { tracer, payload: { user_message }, webhook_url? } when the user is clueless and needs foundational strategy questions. Use /brainstorm/awareness_stages with body { tracer, payload: { offer_description }, webhook_url? } when they are unsure what type of ads to make. Use /brainstorm/angles with body { tracer, payload: { offer_description, problem_awareness, solution_awareness }, webhook_url? } when they want persuasive ad angles; problem_awareness must be problem_unaware or problem_aware, and solution_awareness must be solution_unaware or solution_aware. Use /brainstorm/hooks with body { tracer, payload: { offer_description }, webhook_url? } when they are stuck on openings and want many hooks.",
         "Product placement is a first-class brainstorm primitive, just like angles and hooks. When the user asks to identify product-placement opportunities in a video, or to repurpose a video into a native ad for their product, prefer POST /api/v1/primitives/brainstorm/product_placement with body { tracer, payload: { source_video_url, offer_description }, webhook_url? }. source_video_url is the exact video to analyze — for the current composition, first call GET /api/v1/compositions/:forkId/remove-video-captions to pick the correct source (the ORIGINAL uploaded video vs the DECOMPOSED, caption-free video), then pass that URL. offer_description is the user's product/offer. This primitive watches the video and returns timestamped, native placement opportunities. It prefers a Gemini key for video understanding.",
         "BEFORE calling /brainstorm/product_placement for the CURRENT composition, first call the product_placement_context tool (or GET /api/v1/compositions/:forkId/product-placement.json). Decompose already scouted product-AGNOSTIC placement surfaces for this fork — real, grounded moments (timestamp, surface_type, surface_note, best_for, why_it_works). Use those surfaces to ground your answer and to seed the primitive: fold the strongest surfaces into offer_description (for example append 'Known native placement surfaces: 0:04 empty desk prop; 0:12 phone screen swap') so the product-specific pass builds on grounded moments instead of re-watching blind. If the user just wants a quick conversational take on where their product could go, the surfaces from product_placement_context are often enough to answer directly without the billable primitive.",
@@ -72,6 +72,7 @@ export function buildTemplateEditorChatSystemPrompt(input) {
         "The editor_context block includes last_export_url, last_export_title, last_export_status, and last_export_render_id when a render has succeeded in this session. Treat last_export_url as the current 'finished Export MP4' for this composition. If the user asks to approve, package, share, or schedule the exported video without providing an explicit URL, use last_export_url as the primary MP4 media (kind=video, role=primary) for POST /api/v1/approved/posts. If last_export_url is null, tell the user to Export first (or offer to call editor_action with action_type=export_composition on their behalf) instead of guessing a URL.",
         "Each layer in editor_context includes element_id (data-hf-id), optional slug (data-hf-slug), and optional note (data-hf-note). layer_key on any editor_action may be EITHER the element_id or the slug — prefer the slug when the user (or a viral DNA blurb) refers to a layer by its human name like 'the hero_image'. Use set_layer_identity to add/change a layer's slug or note. Slugs are the stable AI-friendly handle: when planning viral DNA notes, reference the element by its slug (e.g., 'raise the {{hero_image}} to full canvas at 4s') so future turns can resolve it deterministically.",
         "Treat the most recent <editor_context> block in the user message as the source of truth for current layer_keys, layer indices (called track in HTML: track=layer index, higher = drawn on top), durations, and composition_duration_seconds. Never invent layer_keys for remove/set/duplicate/split actions; only reference keys that appear there.",
+        "CRITICAL — verify your edits actually landed. An editor_action tool result only echoes the arguments you sent; it is NOT proof the change was applied or saved. The real outcome shows up in the NEXT <editor_context>. Before telling the user an edit succeeded, check that block: (1) if it contains save_status:\"error\" (or is_read_only:true / a save_error message), the composition is NOT being saved — do NOT claim any edit worked; tell the user exactly what save_error says (e.g. the video is read-only from this link and they should open their own copy to edit) and stop making mutating editor_action calls until it clears; (2) if it contains recent_action_results, each entry with ok:false is an edit from your previous turn that FAILED (read its error) — acknowledge the failure and retry or explain it rather than repeating a false success; (3) otherwise confirm the intended change is reflected in the layers (e.g. the new text on the target layer) before saying it's done. Never report a timeline edit as successful without this check.",
         "editor_context also carries the canvas shape and free time: composition_width, composition_height, and aspect_ratio (e.g. '9:16') describe the output frame — when generating media to place on this timeline, request the matching aspect_ratio on /videos/generate and /images/generate so it fills the canvas without letterboxing or wrong cropping. timeline_gaps is a precomputed array of {start, end, duration} spans (seconds) where NO visual layer is on screen — i.e. the literal blank/black moments. When the user says something like 'at 00:05:52 there's blank space, add X', map their timestamp (interpret mm:ss or seconds sensibly) to the covering entry in timeline_gaps, set the new layer's start to that gap's start (or the user's exact time if inside the gap) and clamp its duration to fit the gap unless the user asks otherwise. If the requested time is NOT inside any timeline_gaps entry, tell the user it already has content there and offer to overlay on a higher track or replace the existing layer instead of silently colliding.",
         "For add_layer, always supply a stable layer_key (e.g., vf-caption-hook, vf-hero-image, vf-narration-audio) so later tool calls in the same turn can reference the new layer without waiting for the next <editor_context>. The editor uses that layer_key as the new layer's id. Choose kind from video, image, audio, text, or html. Provide src (exact URL) for video/image/audio, text for text layers, and html for html layers. Pick a track index higher than every existing layer on the requested time range, or set start/duration so the range is collision-free. Default visual layers fill roughly the upper-middle of the canvas; text layers default to a lower-third band. Always include explanation.",
         "GENERATE-AND-PLACE (preferred for NEW AI footage/images on the timeline): when the user wants to generate a NEW AI video or image and drop it on the timeline — fill a blank gap, replace a scene, or add an overlay — call editor_action with action_type=generate_layer. This ONE action submits the primitive generate job, immediately drops a 'Generating…' placeholder clip into the target slot, and auto-swaps in the finished media when the job settles — you do NOT poll and you do NOT make a separate add_layer call. Set media_type ('video' or 'image'), prompt, and aspect_ratio to the editor_context aspect_ratio so it fills the canvas. Set intent: 'fill_gap' (also set start=the timeline_gaps span start and duration to fit the gap), 'replace_layer' (also set replace_layer_key to the scene's layer_key/slug — its timing and geometry, including full-canvas, are copied automatically), or 'add' (set start/track/geometry for an overlay). For video pass gen_duration (seconds of footage, e.g. 4) and, for character consistency, input_references=[cast reference_url or still_url]; for image pass prompt_attachments=[reference image URL]. Optionally set provider/model/resolution/generate_audio. Give explanation. Because generation is asynchronous, the placeholder appears now and the real media lands in a later turn — do NOT claim the media is finished; tell the user it is generating and will appear on the timeline shortly.",
@@ -468,7 +469,7 @@ export const EDITOR_CHAT_SKILL_PACKS = [
     { name: "hyperframes-animation", summary: "motion rules catalog, scene blueprints, transition doctrine, runtime adapters" },
     { name: "hyperframes-keyframes", summary: "seek-safe keyframe/CSS animation patterns" },
     { name: "hyperframes-creative", summary: "design specs, palettes, typography, house style, narration craft" },
-    { name: "vidfarm-media", summary: "narration TTS/STT, BGM/SFX/media resolution through vidfarm primitives" },
+    { name: "vidfarm-media", summary: "narration TTS/STT, voice-matched speech regeneration (same speaker, new words), BGM/SFX/media resolution through vidfarm primitives" },
     { name: "embedded-captions", summary: "caption identity catalog + subject-occlusion caption pipeline" },
     { name: "talking-head-recut", summary: "timed graphic overlay cards on existing footage" },
     { name: "product-launch-video", summary: "product/launch promo workflow (time-coded shot sequences)" },

package/dist/src/frontend/homepage-client.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import "./sentry.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { hydrateRoot } from "react-dom/client";
 import * as Sentry from "@sentry/react";
 import { useStore } from "zustand";
@@ -57,6 +57,21 @@ function filterTemplates(input) {
         return matchesSearch && matchesBookmarks;
     });
 }
+// The swipe API serializes snake_case; the store/view use camelCase SwipeCard.
+function mapSwipeCard(raw) {
+    return {
+        id: String(raw?.id ?? ""),
+        templateId: String(raw?.template_id ?? ""),
+        forkId: raw?.fork_id ?? null,
+        sourceTitle: raw?.source_title ?? null,
+        title: String(raw?.title ?? raw?.source_title ?? "Untitled"),
+        caption: String(raw?.caption ?? ""),
+        pinnedComment: raw?.pinned_comment ?? null,
+        previewUrl: raw?.preview_url ?? null,
+        durationSeconds: typeof raw?.duration_seconds === "number" ? raw.duration_seconds : null,
+        status: String(raw?.status ?? "ready")
+    };
+}
 function HomepageClientApp({ boot }) {
     const store = useMemo(() => createHomepageStore(boot), [boot]);
     const templates = useStore(store, (state) => state.templates);
@@ -65,6 +80,19 @@ function HomepageClientApp({ boot }) {
     const bookmarks = useStore(store, (state) => state.bookmarks);
     const loading = useStore(store, (state) => state.loading);
     const error = useStore(store, (state) => state.error);
+    const view = useStore(store, (state) => state.view);
+    const popularTemplates = useStore(store, (state) => state.popularTemplates);
+    const popularLoading = useStore(store, (state) => state.popularLoading);
+    const popularError = useStore(store, (state) => state.popularError);
+    const swipeStack = useStore(store, (state) => state.swipeStack);
+    const swipeLoading = useStore(store, (state) => state.swipeLoading);
+    const swipeLoaded = useStore(store, (state) => state.swipeLoaded);
+    const swipeError = useStore(store, (state) => state.swipeError);
+    const swipeCustomizing = useStore(store, (state) => state.swipeCustomizing);
+    const swipeTargetDepth = useStore(store, (state) => state.swipeTargetDepth);
+    const swipeProductSet = useStore(store, (state) => state.swipeProductSet);
+    const swipeRefilling = useStore(store, (state) => state.swipeRefilling);
+    const swipeFillingRef = useRef(false);
     const [bookmarksReady, setBookmarksReady] = useState(false);
     const visibleTemplates = useMemo(() => filterTemplates({ templates, searchQuery, bookmarksOnly, bookmarks }), [templates, searchQuery, bookmarksOnly, bookmarks]);
     useEffect(() => {
@@ -121,6 +149,187 @@ function HomepageClientApp({ boot }) {
         }, 8000);
         return () => window.clearInterval(timer);
     }, [hasProcessingTemplates, refreshFeed]);
+    // The curated Popular picks come from a separate endpoint and are the same
+    // for everyone, so they're fetched lazily the first time the toggle is opened
+    // (and re-fetched, without a spinner, while any pick is still downloading).
+    const refreshPopular = useCallback(async (options) => {
+        if (options?.showLoading) {
+            store.getState().setPopularLoading(true);
+        }
+        try {
+            const response = await fetch("/discover/popular", {
+                credentials: "same-origin",
+                cache: "no-store",
+                headers: { Accept: "application/json" }
+            });
+            const payload = await response.json().catch(() => ({}));
+            if (!response.ok) {
+                throw new Error(typeof payload.error === "string" && payload.error ? payload.error : "Unable to load popular formats.");
+            }
+            store.getState().setPopularTemplates(Array.isArray(payload.templates) ? payload.templates : []);
+        }
+        catch (fetchError) {
+            if (options?.showLoading) {
+                store.getState().setPopularError(fetchError instanceof Error ? fetchError.message : "Unable to load popular formats.");
+            }
+            else {
+                debugError("homepage.popular_refresh_failed", { message: fetchError instanceof Error ? fetchError.message : String(fetchError) });
+            }
+        }
+    }, [store]);
+    const popularLoaded = useStore(store, (state) => state.popularLoaded);
+    useEffect(() => {
+        if (view !== "popular" || popularLoaded) {
+            return;
+        }
+        void refreshPopular({ showLoading: true });
+    }, [view, popularLoaded, refreshPopular]);
+    const hasProcessingPopular = view === "popular" && popularTemplates.some((template) => template.status === "processing");
+    useEffect(() => {
+        if (!hasProcessingPopular) {
+            return;
+        }
+        const timer = window.setInterval(() => {
+            void refreshPopular();
+        }, 8000);
+        return () => window.clearInterval(timer);
+    }, [hasProcessingPopular, refreshPopular]);
+    // Swipe deck: the customer's own product, auto-recut from decomposed templates.
+    const refreshSwipeStack = useCallback(async (options) => {
+        if (options?.showLoading) {
+            store.getState().setSwipeLoading(true);
+        }
+        try {
+            const response = await fetch("/discover/swipe/stack", {
+                credentials: "same-origin",
+                cache: "no-store",
+                headers: { Accept: "application/json" }
+            });
+            const payload = await response.json().catch(() => ({}));
+            if (!response.ok) {
+                throw new Error(typeof payload.error === "string" && payload.error ? payload.error : "Unable to load your swipe deck.");
+            }
+            const stack = Array.isArray(payload.stack) ? payload.stack.map(mapSwipeCard) : [];
+            store.getState().setSwipeStack(stack, {
+                customizing: typeof payload.customizing === "number" ? payload.customizing : 0,
+                targetDepth: typeof payload.target_depth === "number" ? payload.target_depth : undefined,
+                productSet: typeof payload.product_description_set === "boolean" ? payload.product_description_set : undefined
+            });
+        }
+        catch (fetchError) {
+            if (options?.showLoading) {
+                store.getState().setSwipeError(fetchError instanceof Error ? fetchError.message : "Unable to load your swipe deck.");
+            }
+            else {
+                debugError("homepage.swipe_refresh_failed", { message: fetchError instanceof Error ? fetchError.message : String(fetchError) });
+            }
+        }
+    }, [store]);
+    // Progressively customize until the buffer hits target (server-capped), one
+    // per request. Each finished variant streams into the deck as it lands.
+    const fillSwipeDeck = useCallback(async () => {
+        if (swipeFillingRef.current)
+            return;
+        swipeFillingRef.current = true;
+        store.getState().setSwipeRefilling(true);
+        try {
+            for (let i = 0; i < 8; i += 1) {
+                const response = await fetch("/discover/swipe/refill", {
+                    method: "POST",
+                    credentials: "same-origin",
+                    headers: { Accept: "application/json" }
+                });
+                const payload = await response.json().catch(() => ({}));
+                if (!response.ok) {
+                    if (payload?.need_product_description) {
+                        store.getState().setSwipeMeta({ productSet: false });
+                    }
+                    else {
+                        store.getState().setSwipeError(typeof payload.error === "string" && payload.error ? payload.error : "Customization failed.");
+                    }
+                    break;
+                }
+                if (payload.filled && payload.record) {
+                    store.getState().appendSwipeCard(mapSwipeCard(payload.record));
+                }
+                if (!payload.filled) {
+                    break; // at_target or no_eligible
+                }
+            }
+        }
+        catch (fillError) {
+            debugError("homepage.swipe_refill_failed", { message: fillError instanceof Error ? fillError.message : String(fillError) });
+        }
+        finally {
+            swipeFillingRef.current = false;
+            store.getState().setSwipeRefilling(false);
+            // Re-sync the customizing/buffered counts after filling settles.
+            void refreshSwipeStack();
+        }
+    }, [store, refreshSwipeStack]);
+    // First open of Swipe → load the current deck, then top it up.
+    useEffect(() => {
+        if (view !== "swipe" || swipeLoaded) {
+            return;
+        }
+        void (async () => {
+            await refreshSwipeStack({ showLoading: true });
+            const state = store.getState();
+            if (state.swipeProductSet && state.swipeStack.length < state.swipeTargetDepth) {
+                void fillSwipeDeck();
+            }
+        })();
+    }, [view, swipeLoaded, refreshSwipeStack, fillSwipeDeck, store]);
+    const handleSwipeApprove = useCallback(async (id) => {
+        try {
+            const response = await fetch(`/discover/swipe/${encodeURIComponent(id)}/approve`, {
+                method: "POST",
+                credentials: "same-origin",
+                headers: { Accept: "application/json" }
+            });
+            const payload = await response.json().catch(() => ({}));
+            if (!response.ok) {
+                // The server retired this card (built by an older customize pipeline) —
+                // drop it from the deck and pull a fresh one instead of jamming.
+                if (payload && payload.superseded) {
+                    store.getState().removeSwipeCard(id);
+                    void fillSwipeDeck();
+                    return { ok: true };
+                }
+                return { ok: false, error: typeof payload.error === "string" && payload.error ? payload.error : "Unable to approve." };
+            }
+            store.getState().removeSwipeCard(id);
+            void fillSwipeDeck(); // +1 fresh at the tail
+            return { ok: true };
+        }
+        catch (approveError) {
+            return { ok: false, error: approveError instanceof Error ? approveError.message : "Unable to approve." };
+        }
+    }, [store, fillSwipeDeck]);
+    const handleSwipeReject = useCallback(async (id) => {
+        try {
+            const response = await fetch(`/discover/swipe/${encodeURIComponent(id)}/reject`, {
+                method: "POST",
+                credentials: "same-origin",
+                headers: { Accept: "application/json" }
+            });
+            const payload = await response.json().catch(() => ({}));
+            if (!response.ok) {
+                if (payload && payload.superseded) {
+                    store.getState().removeSwipeCard(id);
+                    void fillSwipeDeck();
+                    return { ok: true };
+                }
+                return { ok: false, error: typeof payload.error === "string" && payload.error ? payload.error : "Unable to reject." };
+            }
+            store.getState().removeSwipeCard(id);
+            void fillSwipeDeck(); // +1 fresh at the tail
+            return { ok: true };
+        }
+        catch (rejectError) {
+            return { ok: false, error: rejectError instanceof Error ? rejectError.message : "Unable to reject." };
+        }
+    }, [store, fillSwipeDeck]);
     const handleDeleteTemplate = useCallback(async (templateId) => {
         try {
             const response = await fetch(`/discover/templates/${encodeURIComponent(templateId)}`, {
@@ -219,7 +428,7 @@ function HomepageClientApp({ boot }) {
             return { ok: false, error: submitError instanceof Error ? submitError.message : "Unable to add that video." };
         }
     }, [refreshFeed]);
-    return (_jsx(HomepageShell, { account: boot.account, templates: templates, visibleTemplates: visibleTemplates, searchQuery: searchQuery, bookmarksOnly: bookmarksOnly, bookmarks: bookmarks, loading: loading, error: error, skillEndpointPrefix: boot.skillEndpointPrefix, onSearchQueryChange: (value) => store.getState().setSearchQuery(value), onBookmarksOnlyChange: (value) => store.getState().setBookmarksOnly(value), onToggleBookmark: (templateId) => store.getState().toggleBookmark(templateId), onAddTemplate: handleAddTemplate, onDeleteTemplate: handleDeleteTemplate }));
+    return (_jsx(HomepageShell, { account: boot.account, templates: templates, visibleTemplates: visibleTemplates, searchQuery: searchQuery, bookmarksOnly: bookmarksOnly, bookmarks: bookmarks, loading: loading, error: error, view: view, popularTemplates: popularTemplates, popularLoading: popularLoading, popularError: popularError, swipeStack: swipeStack, swipeLoading: swipeLoading, swipeLoaded: swipeLoaded, swipeError: swipeError, swipeCustomizing: swipeCustomizing, swipeTargetDepth: swipeTargetDepth, swipeProductSet: swipeProductSet, swipeRefilling: swipeRefilling, skillEndpointPrefix: boot.skillEndpointPrefix, onSearchQueryChange: (value) => store.getState().setSearchQuery(value), onBookmarksOnlyChange: (value) => store.getState().setBookmarksOnly(value), onViewChange: (value) => store.getState().setView(value), onToggleBookmark: (templateId) => store.getState().toggleBookmark(templateId), onAddTemplate: handleAddTemplate, onDeleteTemplate: handleDeleteTemplate, onSwipeApprove: handleSwipeApprove, onSwipeReject: handleSwipeReject }));
 }
 const boot = readBoot();
 const root = document.getElementById("homepage-root");

package/dist/src/frontend/homepage-shared.js

@@ -1,4 +1,201 @@
 export function isVideoPreview(url) {
     return Boolean(url && /\.(mp4|webm|ogg|mov)(\?|#|$)/i.test(url));
 }
+export const POPULAR_INSPIRATION_GROUPS = [
+    {
+        label: "Talking Head & Personal",
+        items: [
+            { title: "Vlog style", url: "https://vt.tiktok.com/ZSCWTFBSe/" },
+            { title: "Talking head monologue", url: "https://vt.tiktok.com/ZSCWw9wqf/" },
+            { title: "AI Avatar presenter", url: "https://vt.tiktok.com/ZSC7RVW1o/" },
+            { title: "Day in the life", url: "https://www.tiktok.com/@rubygrifiths/video/7657529386131868950" },
+            { title: "GRWM", url: "https://vt.tiktok.com/ZSCWKv8Xb/" },
+            { title: "Reaction video", url: "https://vt.tiktok.com/ZSCWEF8Rv/" },
+            { title: "Q&A", url: "https://vt.tiktok.com/ZSCWExEeV/" },
+            { title: "Behind the Scenes", url: "https://vt.tiktok.com/ZSCWTFYew/" },
+            { title: "Story time narrated", url: "https://vt.tiktok.com/ZSCW3kAT5/" },
+            { title: "VTuber", url: "https://vt.tiktok.com/ZSC7TQyVM/" },
+            { title: "Female Thirst Trap", url: "https://vt.tiktok.com/ZSCvRLyMf/" },
+            { title: "Male Thirst Trap", url: "https://vt.tiktok.com/ZSCvdUUE2/" },
+            { title: "Masked Host", url: "https://vt.tiktok.com/ZSCvdNvxG/" },
+            { title: "Hot Take", url: "https://vt.tiktok.com/ZSCvewSbB/" }
+        ]
+    },
+    {
+        label: "Text / Story-Driven",
+        items: [
+            { title: "Reddit story + gameplay", url: "https://vt.tiktok.com/ZSCWpeSRy/" },
+            { title: "Fake text message story", url: "https://vt.tiktok.com/ZSCWov56s/" },
+            { title: "Twitter/X Thread Video", url: "https://vt.tiktok.com/ZSC7199q6/" },
+            { title: "Quote / motivational card", url: "https://vt.tiktok.com/ZSC71D9QD/" },
+            { title: "Facts / did you know", url: "https://vt.tiktok.com/ZSCW3QrKA/" },
+            { title: "Bible verse / spiritual", url: "https://vt.tiktok.com/ZSCWsP8r7/" },
+            { title: "Horoscope / Astrology", url: "https://vt.tiktok.com/ZSC71497u/" },
+            { title: "Minecraft Reddit Brainrot", url: "https://youtube.com/shorts/AmdI56dl1z4" }
+        ]
+    },
+    {
+        label: "Educational / Explainer",
+        items: [
+            { title: "Educational explainer", url: "https://vt.tiktok.com/ZSC7e5fbr/" },
+            { title: "Whiteboard animation", url: "https://vt.tiktok.com/ZSCWpLa4p/" },
+            { title: "Kinetic typography", url: "https://vt.tiktok.com/ZSC7dJnJP/" },
+            { title: "Data viz / Infographic", url: "https://vt.tiktok.com/ZSC7RvdWR/" },
+            { title: "Science explainer", url: "https://youtu.be/WxmSJbG134k" },
+            { title: "Vox News Style", url: "https://www.tiktok.com/@vox/video/7619108001424723231" },
+            { title: "Low Poly Animation", url: "https://vt.tiktok.com/ZSC7RwmGR/" },
+            { title: "Math tutorial", url: "https://youtu.be/6yYnr8FL1fk" },
+            { title: "Historic retelling", url: "https://vt.tiktok.com/ZSC7N6Y68/" },
+            { title: "Book Summary", url: "https://vt.tiktok.com/ZSC7Fmemb/" },
+            { title: "Documentary Style", url: "https://vt.tiktok.com/ZSC7YBXm9/" },
+            { title: "Course lecture", url: "https://youtube.com/shorts/QoQUfVEp-d0" },
+            { title: "Scientific Selling", url: "https://www.tiktok.com/@maxcern/video/7604237124036037919" }
+        ]
+    },
+    {
+        label: "Product / Marketing",
+        items: [
+            { title: "Software product demo", url: "https://vt.tiktok.com/ZSC7rbNcV/" },
+            { title: "Product commercial", url: "https://vt.tiktok.com/ZSCv6C1Ms/" },
+            { title: "UGC Creator Ad", url: "https://vt.tiktok.com/ZSC7hwraf/" },
+            { title: "Product Spin Show", url: "https://vt.tiktok.com/ZSCWsuxxp/" },
+            { title: "Testimonial", url: "https://vt.tiktok.com/ZSC7kRvxk/" },
+            { title: "Explainer commercial", url: "https://vt.tiktok.com/ZSC7SEeHA/" },
+            { title: "Case Study", url: "https://www.tiktok.com/@juliejonesdesigns/video/7298542413948243243" },
+            { title: "Brand story", url: "https://vt.tiktok.com/ZSC7a7wvb/" },
+            { title: "Real Estate tour", url: "https://www.instagram.com/reel/DY19EdHGcDk/" },
+            { title: "Sales pitch", url: "https://www.tiktok.com/@mindfullallie/video/7633917841774742815" },
+            { title: "Logo reveal / brand intro", url: "https://vt.tiktok.com/ZSC7avGmH/" }
+        ]
+    },
+    {
+        label: "News / Journalism",
+        items: [
+            { title: "News anchor style", url: "https://vt.tiktok.com/ZSC7VtHNS/" },
+            { title: "Breaking news", url: "https://vt.tiktok.com/ZSCWWUCqS/" },
+            { title: "Weather Report", url: "https://vt.tiktok.com/ZSCWWBEEY/" },
+            { title: "Financial / stock update", url: "https://vt.tiktok.com/ZSC7Vt6rP/" },
+            { title: "Sports scores/recap", url: "https://vt.tiktok.com/ZSC7V7Pqf/" }
+        ]
+    },
+    {
+        label: "Entertainment / Creative",
+        items: [
+            { title: "Anime / manga", url: "https://vt.tiktok.com/ZSC7qnwWn/" },
+            { title: "Cartoon Animation", url: "https://vt.tiktok.com/ZSC7qvEfe/" },
+            { title: "Music Video", url: "https://vt.tiktok.com/ZSC7beC8P/" },
+            { title: "Lyric Video", url: "https://vt.tiktok.com/ZSC7bP5x7/" },
+            { title: "Meme video", url: "https://vt.tiktok.com/ZSC7g8sEn/" },
+            { title: "Meme recaptioning", url: "https://vt.tiktok.com/ZSCv6eeKD/" },
+            { title: "Hype Edit", url: "https://www.tiktok.com/@goldenhype0/video/7645035734901984543" },
+            { title: "Fantasy Hype Edit", url: "https://www.tiktok.com/@hype.edits/video/7538337237453344013" },
+            { title: "UGC Comedy", url: "https://www.tiktok.com/@very.manipulative/video/7644074719737646366" },
+            { title: "Parody", url: "https://vt.tiktok.com/ZSC7g4aa8/" },
+            { title: "ASMR", url: "https://vt.tiktok.com/ZSCvJvseN/" },
+            { title: "Cinematic short film", url: "https://vt.tiktok.com/ZSCvJV2mM/" },
+            { title: "Oddly satisfying", url: "https://vt.tiktok.com/ZSC7gqn9o/" },
+            { title: "POV video", url: "https://vt.tiktok.com/ZSCveMjMp/" },
+            { title: "Nostalgia", url: "https://vt.tiktok.com/ZSCv2DALg/" },
+            { title: "Musical", url: "https://vt.tiktok.com/ZSCvYwKBQ/" },
+            { title: "Gossip", url: "https://vt.tiktok.com/ZSCvYvrh7/" }
+        ]
+    },
+    {
+        label: "Data / Analytical",
+        items: [
+            { title: "Comparison \"X vs Y\"", url: "https://youtube.com/shorts/jFvemXPxayg" },
+            { title: "Ranking / Tier List", url: "https://youtube.com/shorts/Ku5xNHs7sAE" },
+            { title: "Countdown / top 10", url: "https://vt.tiktok.com/ZSC7psUDB/" },
+            { title: "Poll Results Reveal", url: "https://www.tiktok.com/@carterjstockman/video/7477653012874267947" },
+            { title: "Stats Comparison", url: "https://www.tiktok.com/@everythingecon/video/7650833928726564118" },
+            { title: "Leaderboard Reveal", url: "https://vt.tiktok.com/ZSC7sseno/" },
+            { title: "Sports stat breakdown", url: "https://vt.tiktok.com/ZSCvFUTHN/" },
+            { title: "Before/after Transformation", url: "https://vt.tiktok.com/ZSC7GRLT2/" }
+        ]
+    },
+    {
+        label: "Gaming",
+        items: [
+            { title: "Gameplay walkthrough", url: "https://vt.tiktok.com/ZSCWWE5X5/" },
+            { title: "Game review", url: "https://youtube.com/shorts/nrb0t9cRw3g" },
+            { title: "Game trailer", url: "https://vt.tiktok.com/ZSCW7LqKV/" },
+            { title: "Esports highlights", url: "https://vt.tiktok.com/ZSC7y4BEF/" }
+        ]
+    },
+    {
+        label: "Kids / Educational",
+        items: [
+            { title: "Nursery Rhyme", url: "https://vt.tiktok.com/ZSC7SWUUr/" },
+            { title: "Alphabet / counting", url: "https://vt.tiktok.com/ZSCWvhRNd/" },
+            { title: "Cartoon lesson", url: "https://vt.tiktok.com/ZSC7y9wHp/" },
+            { title: "Storybook read-along", url: "https://vt.tiktok.com/ZSC7yrnN8/" }
+        ]
+    },
+    {
+        label: "Ambient / Background",
+        items: [
+            { title: "Lo-fi study loop", url: "https://vt.tiktok.com/ZSCWcFgAh/" },
+            { title: "Nature + Music", url: "https://vt.tiktok.com/ZSCWc4Egr/" },
+            { title: "Fireplace / rain loop", url: "https://vt.tiktok.com/ZSCWcrF7v/" },
+            { title: "Aesthetic vibe/mood", url: "https://vt.tiktok.com/ZSCWcK2uQ/" }
+        ]
+    },
+    {
+        label: "Fitness / Wellness",
+        items: [
+            { title: "Workout tutorial", url: "https://vt.tiktok.com/ZSC7fLGUL/" },
+            { title: "Yoga / meditation", url: "https://vt.tiktok.com/ZSC7fTkJr/" },
+            { title: "Recipe / cooking", url: "https://vt.tiktok.com/ZSC7ffpcX/" },
+            { title: "Health tips", url: "https://vt.tiktok.com/ZSC7P6T8y/" }
+        ]
+    },
+    {
+        label: "Travel / Location",
+        items: [
+            { title: "Travel vlog", url: "https://vt.tiktok.com/ZSCWthBcp/" },
+            { title: "Destination showcase", url: "https://vt.tiktok.com/ZSC7aVDUv/" },
+            { title: "Review Guides", url: "https://vt.tiktok.com/ZSC7PpXUR/" },
+            { title: "City tour", url: "https://vt.tiktok.com/ZSC7ajj14/" }
+        ]
+    },
+    {
+        label: "Interview / Conversation",
+        items: [
+            { title: "Interview format", url: "https://vt.tiktok.com/ZSC74xE8A/" },
+            { title: "Panel discussion", url: "https://vt.tiktok.com/ZSC74xYML/" },
+            { title: "Debate", url: "https://vt.tiktok.com/ZSCvRpCW1/" },
+            { title: "Podcast clip", url: "https://www.tiktok.com/@rogantimes04/video/7659533957049961750" },
+            { title: "Audiogram", url: "https://vt.tiktok.com/ZSCWs6uMm/" },
+            { title: "Diary Confession", url: "https://vt.tiktok.com/ZSCvRcFAn/" }
+        ]
+    },
+    {
+        label: "Motion Design",
+        items: [
+            { title: "Motion graphics", url: "https://vt.tiktok.com/ZSC7u4VD8/" },
+            { title: "2D character animation", url: "https://vt.tiktok.com/ZSC7uCayM/" },
+            { title: "Stop motion", url: "https://vt.tiktok.com/ZSCWseh2r/" },
+            { title: "Static Fast Forward", url: "https://vt.tiktok.com/ZSC7HRUVa/" },
+            { title: "Montage Video", url: "https://vt.tiktok.com/ZSCv8QPRY/" },
+            { title: "Memoirs", url: "https://vt.tiktok.com/ZSCv89bXC/" }
+        ]
+    },
+    {
+        label: "Hype / Trailer",
+        items: [
+            { title: "Trailer / hype video", url: "https://vt.tiktok.com/ZSC7uHkTc/" },
+            { title: "Event promo", url: "https://vt.tiktok.com/ZSC7uMvBA/" },
+            { title: "Reveal video", url: "https://vt.tiktok.com/ZSCvNxK7d/" }
+        ]
+    },
+    {
+        label: "Pure AI",
+        items: [
+            { title: "AI Fruit Dramas", url: "https://vt.tiktok.com/ZSCv89Xck/" },
+            { title: "Surreal AI Characters", url: "https://vt.tiktok.com/ZSCv8nN2K/" },
+            { title: "Claymation Story", url: "https://vt.tiktok.com/ZSCvLJhAc/" },
+            { title: "Paper Mache Story", url: "https://www.youtube.com/watch?v=0JKu9TQCLMI" }
+        ]
+    }
+];
 //# sourceMappingURL=homepage-shared.js.map

package/dist/src/frontend/homepage-store.js

@@ -7,6 +7,19 @@ export function createHomepageStore(boot) {
         bookmarks: new Set(),
         loading: boot.templates.length === 0,
         error: null,
+        view: "feed",
+        popularTemplates: [],
+        popularLoading: false,
+        popularLoaded: false,
+        popularError: null,
+        swipeStack: [],
+        swipeLoading: false,
+        swipeLoaded: false,
+        swipeError: null,
+        swipeCustomizing: 0,
+        swipeTargetDepth: 5,
+        swipeProductSet: true,
+        swipeRefilling: false,
         setTemplates: (templates) => set({ templates, loading: false, error: null }),
         setSearchQuery: (searchQuery) => set({ searchQuery }),
         setBookmarksOnly: (bookmarksOnly) => set({ bookmarksOnly }),
@@ -22,7 +35,32 @@ export function createHomepageStore(boot) {
             return { bookmarks: next };
         }),
         setLoading: (loading) => set({ loading }),
-        setError: (error) => set({ error, loading: false })
+        setError: (error) => set({ error, loading: false }),
+        setView: (view) => set({ view }),
+        setPopularTemplates: (popularTemplates) => set({ popularTemplates, popularLoading: false, popularLoaded: true, popularError: null }),
+        setPopularLoading: (popularLoading) => set({ popularLoading }),
+        setPopularError: (popularError) => set({ popularError, popularLoading: false }),
+        setSwipeLoading: (swipeLoading) => set({ swipeLoading }),
+        setSwipeError: (swipeError) => set({ swipeError, swipeLoading: false }),
+        setSwipeStack: (swipeStack, meta) => set({
+            swipeStack,
+            swipeLoading: false,
+            swipeLoaded: true,
+            swipeError: null,
+            ...(meta?.customizing !== undefined ? { swipeCustomizing: meta.customizing } : {}),
+            ...(meta?.targetDepth !== undefined ? { swipeTargetDepth: meta.targetDepth } : {}),
+            ...(meta?.productSet !== undefined ? { swipeProductSet: meta.productSet } : {})
+        }),
+        setSwipeMeta: (meta) => set({
+            ...(meta.customizing !== undefined ? { swipeCustomizing: meta.customizing } : {}),
+            ...(meta.targetDepth !== undefined ? { swipeTargetDepth: meta.targetDepth } : {}),
+            ...(meta.productSet !== undefined ? { swipeProductSet: meta.productSet } : {})
+        }),
+        appendSwipeCard: (card) => set((state) => (state.swipeStack.some((existing) => existing.id === card.id)
+            ? {}
+            : { swipeStack: [...state.swipeStack, card] })),
+        removeSwipeCard: (id) => set((state) => ({ swipeStack: state.swipeStack.filter((card) => card.id !== id) })),
+        setSwipeRefilling: (swipeRefilling) => set({ swipeRefilling })
     }));
 }
 //# sourceMappingURL=homepage-store.js.map