@officexapp/vidfarm-devcli 0.21.15 → 0.21.17

package/dist/src/devcli/doctor.js

@@ -129,9 +129,15 @@ export async function runDoctorCommand(argv) {
     const ffmpegOk = await hasFfmpeg();
     add("ffmpeg", ffmpegOk ? "ok" : "fail", ffmpegOk ? ffmpegPath : "not found (bundled ffmpeg-static missing and none on PATH) — media commands cannot run");
     add("ffprobe", existsSync(ffprobePath) || spawnSync(ffprobePath, ["-version"], { stdio: "ignore" }).status === 0 ? "ok" : "warn", ffprobePath);
-    // 3. hyperframes CLI (local engines: Kokoro tts, whisper stt, matting, capture, beats).
+    // 3. hyperframes CLI — Vidfarm's own render/animation engine, open-source
+    // under a whitelabel (`vidfarm hf` == hyperframes; vidfarm renders ARE
+    // hyperframes renders). Powers local engines: render, Kokoro tts, whisper stt,
+    // ONNX matting, capture, beats. Recommend a standalone install so they run
+    // natively instead of the slow `npx -y hyperframes` fallback.
     const hyperframesCli = resolveHyperframesCli();
-    add("hyperframes", hyperframesCli ? "ok" : "warn", hyperframesCli ?? "not installed — local engines (tts/transcribe/remove-background/capture/beats) will fall back to `npx -y hyperframes`");
+    add("hyperframes", hyperframesCli ? "ok" : "warn", hyperframesCli
+        ? `${hyperframesCli} (Vidfarm's whitelabel render/animation engine — reach it via \`vidfarm hf …\`)`
+        : "not installed — Vidfarm's render/animation engine (open-source whitelabel). Install for native local render/tts/stt/matting: `npm i -g hyperframes` (else falls back to slow `npx -y hyperframes`)");
     // 4. Chrome for the in-process render (stills / serve local render).
     const chrome = detectChromeForRender();
     add("chrome", chrome.found ? "ok" : "warn", chrome.found ? chrome.detail : `${chrome.detail} — local render/stills will try to download one on first run`);
@@ -241,6 +247,10 @@ export async function runDoctorCommand(argv) {
         if (ffmpegMissing) {
             console.log(`\n${RED}ffmpeg is a hard requirement — install it (or \`npm i ffmpeg-static\`) and re-run.${RESET}`);
         }
+        console.log(`\n${DIM}Local Vidfarm runs on a trio — install & use all three together:${RESET}\n` +
+            `  ${DIM}• ${RESET}vidfarm${DIM}    orchestrator (this CLI)${RESET}\n` +
+            `  ${DIM}• ${RESET}ffmpeg${DIM}     media engine (greenscreen, demux, clips, stills) — required${RESET}\n` +
+            `  ${DIM}• ${RESET}hyperframes${DIM} Vidfarm's open-source render/animation engine (whitelabel; \`vidfarm hf …\`) — \`npm i -g hyperframes\`${RESET}`);
     }
     if (ffmpegMissing)
         process.exitCode = 1;

package/dist/src/devcli/greenscreen-local.js

@@ -0,0 +1,191 @@
+// Bundle-safe LOCAL green-screen / chroma-key for the published devcli.
+//
+// Why this exists: `remove-greenscreen --local` used to route through the
+// in-process Hono backend (see local-backend.ts), which is INTENTIONALLY
+// stripped from the npm tarball — so local chroma-key could never run in the
+// shipped CLI (it threw LocalModeUnavailableError). But keying a flat color is
+// a pure ffmpeg op with zero server dependency, exactly like `remove-background`
+// rides the bundled `hyperframes` CLI. This module reproduces the SAME ffmpeg
+// filter chain the cloud primitive uses (chromaKeyVideoAsset in
+// services/media-processing.ts) so local output matches cloud, and reuses the
+// shared, cached ffmpeg locator from clip-curation (already in the CLI's vetted
+// import closure — no backend module is imported here, keeping the pack guard
+// happy).
+import { spawn } from "node:child_process";
+import { existsSync, rmSync } from "node:fs";
+import path from "node:path";
+import { resolveFfmpeg, resolveFfprobe, hasFfmpeg } from "../services/clip-curation/ffmpeg.js";
+// Mirror of GREENSCREEN_PRESETS in primitive-registry.ts (kept in sync by hand;
+// it's a tiny, stable table). Each preset carries the flat key color plus the
+// tolerance/softness that read well for that background.
+export const GREENSCREEN_PRESETS = {
+    green: { label: "Green screen", key_color: "#00FF00", tolerance: 0.3, softness: 0.1 },
+    "digital-green": { label: "Digital green", key_color: "#00B140", tolerance: 0.28, softness: 0.1 },
+    blue: { label: "Blue screen", key_color: "#0047BB", tolerance: 0.3, softness: 0.1 },
+    white: { label: "White", key_color: "#FFFFFF", tolerance: 0.18, softness: 0.06 },
+    black: { label: "Black", key_color: "#000000", tolerance: 0.14, softness: 0.05 },
+    magenta: { label: "Magenta", key_color: "#FF00FF", tolerance: 0.3, softness: 0.1 }
+};
+/** ffmpeg wants a `0xRRGGBB` literal or a named color; anything else → black.
+ *  Same normalization the cloud path uses (media-processing.ts). */
+export function normalizeFfmpegColor(value) {
+    const trimmed = value.trim();
+    const hex = /^#?([0-9a-f]{6})$/i.exec(trimmed);
+    if (hex)
+        return `0x${hex[1]}`;
+    return /^[a-z]+$/i.test(trimmed) ? trimmed : "black";
+}
+/** ffmpeg's `despill` filter only knows green/blue. Return the matching type
+ *  when the key color is clearly green- or blue-dominant, else null (white/
+ *  black/magenta flat fills have no hue fringe to trim). Cloud-parity. */
+export function despillTypeForColor(value) {
+    const named = { green: "green", lime: "green", blue: "blue" };
+    const lower = value.trim().toLowerCase();
+    if (named[lower])
+        return named[lower];
+    const hex = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(lower);
+    if (!hex)
+        return null;
+    const r = parseInt(hex[1], 16);
+    const g = parseInt(hex[2], 16);
+    const b = parseInt(hex[3], 16);
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    if (max - min < 40)
+        return null;
+    if (g === max)
+        return "green";
+    if (b === max)
+        return "blue";
+    return null;
+}
+/** True when a usable ffmpeg is available (bundled ffmpeg-static or on PATH). */
+export async function localGreenscreenAvailable() {
+    return hasFfmpeg();
+}
+function runFfmpeg(bin, args) {
+    return new Promise((resolve, reject) => {
+        const child = spawn(bin, args, { stdio: ["ignore", "ignore", "pipe"] });
+        let stderr = "";
+        child.stderr.on("data", (d) => (stderr += d.toString()));
+        child.on("error", reject);
+        child.on("close", (code) => resolve({ code: code ?? 0, stderr }));
+    });
+}
+/** Report a video stream's pixel format (e.g. "yuva420p" carries alpha). */
+async function probePixFmt(filePath) {
+    const ffprobe = await resolveFfprobe();
+    const args = ["-v", "error", "-select_streams", "v:0", "-show_entries", "stream=pix_fmt", "-of", "csv=p=0", filePath];
+    return new Promise((resolve) => {
+        const child = spawn(ffprobe, args, { stdio: ["ignore", "pipe", "ignore"] });
+        let out = "";
+        child.stdout.on("data", (d) => (out += d.toString()));
+        child.on("error", () => resolve(""));
+        child.on("close", () => resolve(out.trim()));
+    });
+}
+/**
+ * Key out a flat, solid background LOCALLY with ffmpeg — free, offline, no
+ * wallet, no backend. Uses the SAME chromakey/despill filter chain as the cloud
+ * primitive so results match.
+ *
+ * IMAGE → transparent PNG/WebP.
+ * VIDEO → browser-ready VP9-alpha WebM when the local ffmpeg's libvpx supports
+ *   alpha; otherwise (many ffmpeg-static builds can't encode WebM/VP9 alpha at
+ *   all) it transparently falls back to a ProRes 4444 .mov alpha master so the
+ *   caller always gets a genuinely-transparent file rather than a silently
+ *   opaque one. The `webmAlpha` flag tells the caller which happened.
+ */
+export async function removeGreenscreenLocal(input) {
+    if (!existsSync(input.sourcePath))
+        throw new Error(`No such source file: ${input.sourcePath}`);
+    const keyColorRaw = (input.keyColor ?? "#00FF00").trim() || "#00FF00";
+    const ffmpegColor = normalizeFfmpegColor(keyColorRaw);
+    // chromakey `similarity` (color-match radius) and `blend` (soft edge band) are
+    // both 0..1; clamp to the same sane bounds the cloud path uses.
+    const similarity = Math.min(0.9, Math.max(0.01, input.tolerance ?? 0.3));
+    const blend = Math.min(0.9, Math.max(0, input.softness ?? 0.1));
+    const despill = input.despill ?? true;
+    const despillType = despillTypeForColor(keyColorRaw);
+    const chroma = `chromakey=${ffmpegColor}:${similarity.toFixed(3)}:${blend.toFixed(3)}`;
+    const despillClause = despill && despillType ? `,despill=type=${despillType}` : "";
+    const ffmpeg = await resolveFfmpeg();
+    if (input.mediaType === "image") {
+        // Single-frame RGBA still. rgba carries the alpha into PNG/WebP output.
+        // WebP needs the libwebp encoder explicitly — the generic muxer writes an
+        // invalid (animated-stub) file for a single frame.
+        const isWebp = /\.webp$/i.test(input.outputPath);
+        const args = [
+            "-hide_banner", "-y",
+            "-i", input.sourcePath,
+            "-frames:v", "1",
+            "-vf", `${chroma}${despillClause},format=rgba`,
+            ...(isWebp ? ["-c:v", "libwebp", "-lossless", "1", "-pix_fmt", "rgba"] : []),
+            input.outputPath
+        ];
+        const { code, stderr } = await runFfmpeg(ffmpeg, args);
+        if (code !== 0 || !existsSync(input.outputPath)) {
+            throw new Error(`Local greenscreen key failed (ffmpeg exit ${code})${tail(stderr)}.`);
+        }
+        return { outputPath: input.outputPath, format: isWebp ? "webp" : "png", alpha: true, webmAlpha: false };
+    }
+    // VIDEO — try browser-ready VP9 alpha WebM first (mirrors chromaKeyVideoAsset).
+    const webmPath = input.outputPath.replace(/\.[^.]+$/, "") + ".webm";
+    const webmArgs = [
+        "-hide_banner", "-y",
+        "-i", input.sourcePath,
+        "-map", "0:v:0",
+        "-map", "0:a:0?",
+        "-vf", `${chroma}${despillClause},format=yuva420p`,
+        "-c:v", "libvpx-vp9",
+        "-pix_fmt", "yuva420p",
+        "-auto-alt-ref", "0",
+        "-b:v", "0",
+        "-crf", "30",
+        "-row-mt", "1",
+        "-deadline", "good",
+        "-cpu-used", "4",
+        "-c:a", "libopus",
+        "-b:a", "128k",
+        webmPath
+    ];
+    const webm = await runFfmpeg(ffmpeg, webmArgs);
+    if (webm.code === 0 && existsSync(webmPath)) {
+        // Verify the alpha actually survived — many libvpx builds silently drop it.
+        const pixFmt = await probePixFmt(webmPath);
+        if (/^yuva/i.test(pixFmt)) {
+            return { outputPath: webmPath, format: "webm", alpha: true, webmAlpha: true };
+        }
+        rmSync(webmPath, { force: true }); // opaque WebM is useless — discard it
+    }
+    // Fallback: ProRes 4444 .mov guarantees a real alpha channel everywhere.
+    const movPath = input.outputPath.replace(/\.[^.]+$/, "") + ".mov";
+    const movArgs = [
+        "-hide_banner", "-y",
+        "-i", input.sourcePath,
+        "-map", "0:v:0",
+        "-map", "0:a:0?",
+        "-vf", `${chroma}${despillClause},format=yuva444p10le`,
+        "-c:v", "prores_ks",
+        "-profile:v", "4444",
+        "-pix_fmt", "yuva444p10le",
+        "-c:a", "pcm_s16le",
+        movPath
+    ];
+    const mov = await runFfmpeg(ffmpeg, movArgs);
+    if (mov.code !== 0 || !existsSync(movPath)) {
+        throw new Error(`Local greenscreen key failed (ffmpeg exit ${mov.code})${tail(mov.stderr)}.`);
+    }
+    return { outputPath: movPath, format: "mov", alpha: true, webmAlpha: false };
+}
+function tail(stderr) {
+    const t = stderr.trim().split("\n").slice(-3).join("\n");
+    return t ? `:\n${t}` : "";
+}
+/** Default output path next to a source, matching remove-background's naming. */
+export function defaultGreenscreenOutPath(sourcePath, mediaType, outputFormat) {
+    const stem = path.basename(sourcePath).replace(/\.[^.]+$/, "");
+    const ext = mediaType === "video" ? "webm" : outputFormat === "webp" ? "webp" : "png";
+    return path.resolve(process.cwd(), `${stem}.transparent.${ext}`);
+}
+//# sourceMappingURL=greenscreen-local.js.map

package/dist/src/services/clip-curation/hunt.js

@@ -20,15 +20,16 @@ export const DEFAULT_CLIPS_PER_10_MIN = 10;
 export const DEFAULT_CLIP_ASPECT = "9:16";
 /**
  * Fill the unspecified-prompt defaults on a normalized hunt spec: a 5–15s
- * duration band, vertical 9:16 crop, and avoid-text ON. Only fills gaps — an
- * explicit user choice (including avoid_text:false) is preserved.
+ * duration band and a vertical 9:16 crop. avoid-text is deliberately NOT
+ * defaulted on — most social sources (TikTok/Shorts/Reels) are captioned
+ * wall-to-wall, so an implicit avoid_text:true rejects EVERY scene and yields a
+ * silent 0-clip hunt. avoid_text stays opt-in (set true only when the user asks
+ * to avoid on-screen text); an explicit choice either way is preserved.
  */
 export function applyHuntSpecDefaults(spec) {
     const out = { ...spec };
     if (!out.duration_band)
         out.duration_band = { ...DEFAULT_CLIP_DURATION_BAND };
-    if (out.avoid_text === undefined)
-        out.avoid_text = true;
     if (!out.aspect)
         out.aspect = DEFAULT_CLIP_ASPECT;
     return out;

package/dist/src/services/clip-curation/media-select.js

@@ -103,50 +103,96 @@ export function pickBestVideoMedia(medias) {
 // bare programmatic fetches, and the top-res server-side "merge" rendition
 // transiently 403s while the merge runs or when rate-limited.
 const MEDIA_DOWNLOAD_UA = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36";
-const RETRYABLE_DOWNLOAD_STATUS = new Set([403, 408, 425, 429, 500, 502, 503, 504]);
+// Retryable within a round only for genuinely transient failures. A bot-challenge
+// (Cloudflare "Just a moment…") is NOT retryable in-round — the same signed URL
+// stays gated; only a fresh re-lookup (new token/proxy edge) can clear it.
+const RETRYABLE_DOWNLOAD_STATUS = new Set([408, 425, 429, 500, 502, 503, 504]);
 function delay(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
 }
+/**
+ * A response that is HTML (or an explicit anti-bot challenge) is NOT the video —
+ * the snapvideo.co CDN hosts sit behind Cloudflare, which answers server-side
+ * fetches with a `text/html` "Just a moment…" interstitial (usually 403, but it
+ * can also come back 200). Streaming that to disk would save a bogus "video", so
+ * we treat any HTML body as a download failure regardless of status code.
+ */
+function looksLikeBotChallenge(response) {
+    const ct = (response.headers.get("content-type") || "").toLowerCase();
+    if (ct.includes("text/html") || ct.includes("application/xhtml"))
+        return true;
+    // Cloudflare stamps its edge on the challenge response.
+    const cfMitigated = (response.headers.get("cf-mitigated") || "").toLowerCase();
+    return cfMitigated.includes("challenge");
+}
 /**
  * Download the first playable rendition that actually responds, walking the
  * ranked candidates highest-res first. The RapidAPI resolver returns SEVERAL
  * copies it hosts itself (e.g. a progressive 360p plus server-side-merged
- * 720p/1080p); the merge renditions can transiently 403 while merging or when
- * rate-limited, so we retry a rendition once and then fall back to the next copy
- * rather than hard-failing the whole ingest. Returns the live Response (caller
- * streams `response.body` to disk/S3) plus the winning candidate. Throws only if
- * EVERY rendition is unreachable, with each failure in the message.
+ * 720p/1080p). The merge renditions sit behind a Cloudflare bot-challenge that a
+ * Lambda fetch can't clear, and even the progressive proxy gets *intermittently*
+ * challenged — so a single lookup can momentarily return an all-gated set. We
+ * therefore (a) reject HTML/challenge bodies instead of saving them as video,
+ * (b) fall back across renditions within a lookup, and (c) when `reResolve` is
+ * supplied, re-run the resolver for a FRESH signed set (new token + proxy edge,
+ * which is what actually clears a transient full-gate) and walk it again.
+ * Returns the live Response (caller streams `response.body` to disk/S3) plus the
+ * winning candidate. Throws only if every rendition across every round is
+ * unreachable, with each failure in the message.
  */
-export async function fetchFirstDownloadableMedia(medias) {
-    const ranked = rankPlayableVideoMedias(medias);
-    if (!ranked.length) {
-        throw new Error("Video download lookup returned no playable MP4 media URL.");
-    }
+export async function fetchFirstDownloadableMedia(medias, opts = {}) {
+    const { reResolve } = opts;
+    const maxRounds = reResolve ? 3 : 1;
     const failures = [];
-    for (const media of ranked) {
-        const url = media.url;
-        if (!url)
-            continue;
-        const label = media.quality ?? media.label ?? "?";
-        for (let attempt = 0; attempt < 2; attempt++) {
-            if (attempt > 0)
-                await delay(750);
+    let current = medias;
+    let lastRankedCount = 0;
+    for (let round = 0; round < maxRounds; round++) {
+        if (round > 0) {
+            // Back off, then mint a fresh signed set — the only thing that recovers a
+            // transient Cloudflare gate on the CDN hosts.
+            await delay(1000 * round);
             try {
-                const response = await fetch(url, { headers: { "user-agent": MEDIA_DOWNLOAD_UA, accept: "*/*" } });
-                if (response.ok && response.body) {
-                    return { response, media };
-                }
-                failures.push(`${label}:HTTP ${response.status}`);
-                await response.body?.cancel?.().catch(() => { });
-                // A non-transient status won't fix itself on retry — move to the next copy.
-                if (!RETRYABLE_DOWNLOAD_STATUS.has(response.status))
-                    break;
+                current = await reResolve();
             }
             catch (error) {
-                failures.push(`${label}:${error instanceof Error ? error.message : String(error)}`);
+                failures.push(`re-lookup:${error instanceof Error ? error.message : String(error)}`);
+                break;
+            }
+        }
+        const ranked = rankPlayableVideoMedias(current);
+        lastRankedCount = ranked.length;
+        if (!ranked.length) {
+            failures.push(round === 0 ? "no playable media in lookup" : `round ${round + 1}: no playable media`);
+            continue;
+        }
+        for (const media of ranked) {
+            const url = media.url;
+            if (!url)
+                continue;
+            const label = media.quality ?? media.label ?? "?";
+            for (let attempt = 0; attempt < 2; attempt++) {
+                if (attempt > 0)
+                    await delay(750);
+                try {
+                    const response = await fetch(url, { headers: { "user-agent": MEDIA_DOWNLOAD_UA, accept: "*/*" } });
+                    const challenged = looksLikeBotChallenge(response);
+                    if (response.ok && response.body && !challenged) {
+                        return { response, media };
+                    }
+                    failures.push(`${label}:HTTP ${response.status}${challenged ? " bot-challenge" : ""}`);
+                    await response.body?.cancel?.().catch(() => { });
+                    // A bot-challenge or any non-transient status won't clear on an
+                    // immediate retry of the same URL — move to the next rendition (and,
+                    // ultimately, the next re-lookup round).
+                    if (challenged || !RETRYABLE_DOWNLOAD_STATUS.has(response.status))
+                        break;
+                }
+                catch (error) {
+                    failures.push(`${label}:${error instanceof Error ? error.message : String(error)}`);
+                }
             }
         }
     }
-    throw new Error(`Source video download failed; all ${ranked.length} rendition(s) unavailable (${failures.join("; ")}).`);
+    throw new Error(`Source video download failed; all ${lastRankedCount} rendition(s) unavailable (${failures.join("; ")}).`);
 }
 //# sourceMappingURL=media-select.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@officexapp/vidfarm-devcli",
-  "version": "0.21.15",
+  "version": "0.21.17",
   "description": "Local bridge for the Vidfarm Trackpad Editor. `vidfarm serve <template_id>` boots the FULL editor on localhost (disk-backed records/storage, free in-process render); edit composition.html on disk (Claude Code, Codex, etc.) and the browser live-morphs it.",
   "type": "module",
   "bin": {
@@ -17,6 +17,7 @@
     "dist/src/devcli/composition-edit.js",
     "dist/src/devcli/cost-mode.js",
     "dist/src/devcli/doctor.js",
+    "dist/src/devcli/greenscreen-local.js",
     "dist/src/devcli/hyperframes-cli.js",
     "dist/src/devcli/local-backend.js",
     "dist/src/devcli/local-frontend-server.js",

package/public/serve-shells/editor.html

@@ -367,7 +367,10 @@
 /* chat column */
 .rk-aichat-main{flex:1;min-width:0;display:flex;flex-direction:column}
 .rk-aichat-head{display:flex;align-items:center;gap:8px;padding:14px 14px;border-bottom:1px solid var(--rk-border);flex:none}
-.rk-aichat-head-main{flex:1;min-width:0;display:grid;gap:1px}
+.rk-aichat-head-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
+.rk-aichat-head-titles{display:grid;gap:1px;min-width:0}
+.rk-aichat-watch{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--rk-text-muted);font-size:12px;font-weight:400;font-family:inherit;cursor:pointer;padding:3px 8px;border-radius:8px;white-space:nowrap;transition:color .15s,background .15s}
+.rk-aichat-watch:hover{color:var(--rk-ink);background:var(--rk-n-100)}
 .rk-aichat-title{font-family:var(--rk-font-display);font-weight:800;font-size:15px;color:var(--rk-ink);letter-spacing:-.01em}
 .rk-aichat-sub{font-size:11.5px;color:var(--rk-text-muted)}
 .rk-aichat-back{flex:1;min-width:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;
@@ -1125,6 +1128,17 @@ html,body{margin:0;background:#050604;color:#fffbe6}
 .rk-vf-btn:hover:not(:disabled){background:#262b1a;border-color:var(--rk-border-strong)}
 .rk-vf-btn:disabled{opacity:.45;cursor:default}
 .rk-vf-status{font-size:11.5px;color:var(--rk-text-muted);margin:0}
+.rk-vf-renders{display:grid;gap:5px;margin-top:2px}
+.rk-vf-renders-head{display:flex;align-items:center;justify-content:space-between}
+.rk-vf-renders-refresh{background:none;border:none;color:var(--rk-text-muted);cursor:pointer;
+  font-size:13px;line-height:1;padding:2px 4px;border-radius:6px}
+.rk-vf-renders-refresh:hover{color:var(--rk-ink);background:#262b1a}
+.rk-vf-render-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
+  padding:7px 10px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:#171b10;
+  color:var(--rk-ink);font-size:12px;text-decoration:none;
+  transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-vf-render-row:hover{background:#222717;border-color:var(--rk-border-strong)}
+.rk-vf-render-label{font-weight:600}
 
 /* ── Rebrand: the sealed upstream <StudioApp/> header renders a "HeyGen ·
    HyperFrames" logo SVG (aria-label="Hyperframes"). The actual swap to a VidFarm
@@ -1189,10 +1203,6 @@ html,body{margin:0;background:#050604;color:#fffbe6}
   </div>
   <div class="rk-aichat-main">
     <header class="rk-aichat-head">
-      <a class="rk-aichat-back" id="rkAichatBack" href="/library" title="Back to your library">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
-        <span>Back to Library</span>
-      </a>
       <div class="rk-aichat-skill"><div class="vf-skill-install vf-skill-install-nav" data-skill-install>
     <button
       class="vf-skill-install-main"
@@ -1220,12 +1230,12 @@ html,body{margin:0;background:#050604;color:#fffbe6}
     <div class="vf-skill-install-popover" data-skill-menu hidden>
       <div class="vf-skill-install-popover-kicker">Install Command</div>
       <div class="vf-skill-install-command">
-        <input class="vf-skill-install-input" type="text" readonly value="npx skills add https://github.com/officexapp/vidfarm-director" data-skill-command-input aria-label="Skill install command">
+        <input class="vf-skill-install-input" type="text" readonly value="npx skills add https://github.com/officexapp/vidfarm" data-skill-command-input aria-label="Skill install command">
         <button class="vf-skill-install-copy" type="button" data-skill-command-copy aria-label="Copy install command" title="Copy install command">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
         </button>
       </div>
-      <a class="vf-skill-install-link" href="https://github.com/officexapp/vidfarm-director" target="_blank" rel="noopener noreferrer">
+      <a class="vf-skill-install-link" href="https://github.com/officexapp/vidfarm" target="_blank" rel="noopener noreferrer">
         <span class="vf-skill-install-link-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6"></path><path d="M10 14 20 4"></path><path d="M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5"></path></svg></span>
         <span>View GitHub</span>
       </a>

package/public/serve-shells/library-files.html

@@ -382,7 +382,10 @@
 /* chat column */
 .rk-aichat-main{flex:1;min-width:0;display:flex;flex-direction:column}
 .rk-aichat-head{display:flex;align-items:center;gap:8px;padding:14px 14px;border-bottom:1px solid var(--rk-border);flex:none}
-.rk-aichat-head-main{flex:1;min-width:0;display:grid;gap:1px}
+.rk-aichat-head-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
+.rk-aichat-head-titles{display:grid;gap:1px;min-width:0}
+.rk-aichat-watch{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--rk-text-muted);font-size:12px;font-weight:400;font-family:inherit;cursor:pointer;padding:3px 8px;border-radius:8px;white-space:nowrap;transition:color .15s,background .15s}
+.rk-aichat-watch:hover{color:var(--rk-ink);background:var(--rk-n-100)}
 .rk-aichat-title{font-family:var(--rk-font-display);font-weight:800;font-size:15px;color:var(--rk-ink);letter-spacing:-.01em}
 .rk-aichat-sub{font-size:11.5px;color:var(--rk-text-muted)}
 .rk-aichat-back{flex:1;min-width:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;
@@ -1367,6 +1370,25 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
 .rk-clips-dialog-note[data-tone="error"]{background:#fdecea;color:#8d3b2f}
 .rk-clips-dialog-note[data-tone="success"]{background:#e8f7ee;color:#1f7a44}
 .rk-clips-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
+/* Import Raws: file-upload dropzone (mirrors discover) + folder picker trigger. */
+.rk-add-optional{font-weight:500;color:var(--rk-text-faint)}
+.rk-add-or{display:flex;align-items:center;gap:12px;color:var(--rk-text-faint);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
+.rk-add-or::before,.rk-add-or::after{content:"";height:1px;flex:1;background:var(--rk-border)}
+.rk-add-file{display:flex;align-items:center;gap:12px;border:1px dashed var(--rk-border-strong);border-radius:var(--rk-r-lg);padding:13px 14px;cursor:pointer;color:var(--rk-n-700);transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-add-file:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-add-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
+.rk-add-file-ic{flex:none;color:var(--rk-gold-700);display:grid;place-items:center}
+.rk-add-file-text{font-size:13.5px;font-weight:600;display:grid;gap:2px;min-width:0}
+.rk-add-file-text .rk-add-optional{font-size:11.5px;font-weight:500}
+.rk-add-file.is-picked{border-style:solid;border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-folderpick{display:flex;align-items:stretch;gap:8px}
+.rk-folderpick-btn{flex:1;min-width:0;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;color:var(--rk-text-faint);font-weight:500}
+.rk-folderpick-btn:hover{border-color:var(--rk-gold-600)}
+.rk-folderpick-btn.is-picked{color:var(--rk-ink);font-weight:600}
+.rk-folderpick-ic{flex:none;color:var(--rk-gold-700);display:grid;place-items:center}
+.rk-folderpick-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-folderpick-clear{flex:none;width:38px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-n-50);color:var(--rk-n-700);cursor:pointer;font-size:13px;line-height:1;transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-folderpick-clear:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
 /* ── files tab: full-page mount of the shared directory-explorer component ──
    The component (.rk-dir + .rk-aichat-* rows) is tuned for the narrow chat
    drawer; on a full page we wrap it in a card and scale the search, crumbs and
@@ -1437,12 +1459,12 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     <div class="vf-skill-install-popover" data-skill-menu hidden>
       <div class="vf-skill-install-popover-kicker">Install Command</div>
       <div class="vf-skill-install-command">
-        <input class="vf-skill-install-input" type="text" readonly value="npx skills add https://github.com/officexapp/vidfarm-director" data-skill-command-input aria-label="Skill install command">
+        <input class="vf-skill-install-input" type="text" readonly value="npx skills add https://github.com/officexapp/vidfarm" data-skill-command-input aria-label="Skill install command">
         <button class="vf-skill-install-copy" type="button" data-skill-command-copy aria-label="Copy install command" title="Copy install command">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
         </button>
       </div>
-      <a class="vf-skill-install-link" href="https://github.com/officexapp/vidfarm-director" target="_blank" rel="noopener noreferrer">
+      <a class="vf-skill-install-link" href="https://github.com/officexapp/vidfarm" target="_blank" rel="noopener noreferrer">
         <span class="vf-skill-install-link-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6"></path><path d="M10 14 20 4"></path><path d="M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5"></path></svg></span>
         <span>View GitHub</span>
       </a>
@@ -1537,8 +1559,13 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     <header class="rk-aichat-head">
       <span class="rk-brand-mark">V</span>
       <div class="rk-aichat-head-main">
-        <div class="rk-aichat-title">VidFarm AI</div>
-        <div class="rk-aichat-sub">on your own AI keys</div>
+        <div class="rk-aichat-head-titles">
+          <div class="rk-aichat-title">VidFarm AI</div>
+          <div class="rk-aichat-sub">on your own AI keys</div>
+        </div>
+        <button class="rk-aichat-watch" id="rkWatchPoppanel" type="button" title="Watch Tutorial" aria-label="Watch Tutorial">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke="none"></path></svg><span>Watch Tutorial</span>
+        </button>
       </div>
       <button class="rk-aichat-tool" id="rkHistoryToggle" type="button" title="Chat history" aria-label="Toggle chat history" aria-pressed="false">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg>
@@ -3507,6 +3534,63 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     document.querySelectorAll("[data-skill-menu]").forEach((panel) => { panel.hidden = true; });
   });
 })();</script>
+<script>window.__vidfarmTutorials=[["/discover/templates/categories","/assets/blog/tutorial-videos/page-categories.mp4"],["/discover/templates/swipe","/assets/blog/tutorial-videos/page-swipe.mp4"],["/discover","/assets/blog/tutorial-videos/page-discover.mp4"],["/tools/image","/assets/blog/tutorial-videos/tools-image.mp4"],["/tools/video","/assets/blog/tutorial-videos/tools-video.mp4"],["/tools/clipper","/assets/blog/tutorial-videos/tools-clipper.mp4"],["/chat","/assets/blog/tutorial-videos/page-chat.mp4"],["/calendar","/assets/blog/tutorial-videos/page-calendar.mp4"],["/settings/profile","/assets/blog/tutorial-videos/page-profile.mp4"],["/settings/wallet","/assets/blog/tutorial-videos/page-wallet.mp4"],["/settings/channels","/assets/blog/tutorial-videos/page-channels.mp4"],["/settings/developer","/assets/blog/tutorial-videos/page-developer.mp4"],["/library","/assets/blog/tutorial-videos/page-library.mp4"]];window.__vfPoppanelVideo="/assets/blog/tutorial-videos/page-poppanel.mp4";</script>
+<script>(() => {
+  try {
+    function findTitle() {
+      var hs = document.querySelectorAll('.rk-content h1');
+      for (var i = 0; i < hs.length; i++) { var t = (hs[i].textContent || '').trim(); if (t && t.toLowerCase() !== 'vidfarm') return hs[i]; }
+      return null;
+    }
+    function openModal(url) {
+      if (document.getElementById('vf-tut-modal')) return;
+      var ov = document.createElement('div');
+      ov.id = 'vf-tut-modal';
+      ov.style.cssText = 'position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px;';
+      var box = document.createElement('div');
+      box.style.cssText = 'position:relative;width:min(900px,92vw);';
+      var vid = document.createElement('video');
+      vid.src = url; vid.controls = true; vid.autoplay = true; vid.playsInline = true;
+      vid.style.cssText = 'width:100%;max-height:86vh;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.5);background:#000;display:block;';
+      var x = document.createElement('button');
+      x.type = 'button'; x.setAttribute('aria-label', 'Close'); x.innerHTML = '&times;';
+      x.style.cssText = 'position:absolute;top:-16px;right:-16px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#111;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;';
+      function close() { try { vid.pause(); } catch (e) {} ov.remove(); document.removeEventListener('keydown', onKey); }
+      function onKey(e) { if (e.key === 'Escape') close(); }
+      x.onclick = close;
+      ov.onclick = function (e) { if (e.target === ov) close(); };
+      document.addEventListener('keydown', onKey);
+      box.appendChild(vid); box.appendChild(x); ov.appendChild(box); document.body.appendChild(ov);
+    }
+    window.__vfOpenTutorial = openModal;
+    // Pop-panel (agent dock) tutorial button — present on every full-chrome page,
+    // next to the "VidFarm AI" title. Retry briefly in case the dock mounts late.
+    var pt = 0;
+    (function wirePop() {
+      var pv = document.getElementById('rkWatchPoppanel');
+      if (pv && window.__vfPoppanelVideo) { pv.onclick = function () { openModal(window.__vfPoppanelVideo); }; return; }
+      if (pt++ < 20) setTimeout(wirePop, 300);
+    })();
+    // Page-title tutorial button — only when this route has a matching video.
+    var routes = window.__vidfarmTutorials || [];
+    var path = location.pathname, hit = null;
+    for (var i = 0; i < routes.length; i++) { if (path === routes[i][0] || path.indexOf(routes[i][0]) === 0) { hit = routes[i][1]; break; } }
+    function inject() {
+      if (document.getElementById('vf-watch-tut')) return true;
+      var h1 = findTitle(); if (!h1) return false;
+      var btn = document.createElement('button');
+      btn.id = 'vf-watch-tut'; btn.type = 'button'; btn.setAttribute('aria-label', 'Watch Tutorial');
+      btn.style.cssText = 'display:inline-flex;align-items:center;gap:6px;margin-left:16px;padding:4px 10px;border:0;background:transparent;color:#9aa0a6;font-size:13px;font-weight:400;font-family:inherit;letter-spacing:0;cursor:pointer;vertical-align:middle;border-radius:8px;transition:color .15s,background .15s;';
+      btn.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke="none"></path></svg><span>Watch Tutorial</span>';
+      btn.onmouseenter = function () { btn.style.color = '#3c4043'; btn.style.background = 'rgba(0,0,0,.05)'; };
+      btn.onmouseleave = function () { btn.style.color = '#9aa0a6'; btn.style.background = 'transparent'; };
+      btn.onclick = function () { openModal(hit); };
+      h1.appendChild(btn);
+      return true;
+    }
+    if (hit) { var tries = 0; (function loop() { if (inject()) return; if (tries++ > 40) return; setTimeout(loop, 250); })(); }
+  } catch (e) {}
+})();</script>
 <script type="module" src="/assets/file-directory-app.js"></script>
 </body>
 </html>