@officexapp/vidfarm-devcli 0.21.29 → 0.21.30

package/.agents/skills/vidfarm/references/automation-and-local-dev.md

@@ -365,6 +365,8 @@ vidfarm doctor                                # ✓/⚠/✗ for node, ffmpeg, hy
 - **`ffmpeg`** — the media engine the devcli drives for every local media op: `remove-greenscreen --local` (chroma-key → transparent PNG/WebP/WebM, ProRes fallback where the local libvpx can't do WebM alpha), STT/caption demux, `raws scan` clip cutting, `stills`, audio trims. **Hard requirement** — `vidfarm doctor` exits non-zero without it.
 - **`hyperframes`** — **Vidfarm's own render/animation engine, open-source under a whitelabel.** *Vidfarm renders ARE hyperframes renders.* The devcli bundles it and re-exposes everything it does locally as **`vidfarm hf <subcommand>`** — `vidfarm hf render <dir> -o out.mp4`, `capture`, `validate`, `preview`, `doctor`, plus the ONNX `remove-background` matting, Kokoro TTS, and Whisper STT engines the `tts`/`stt`/`remove-background` commands ride. Installing it standalone makes these run **natively** instead of a slower `npx -y hyperframes` fallback (which `vidfarm doctor` will warn about).
 
+**The local studio UI is whitelabeled automatically.** `hyperframes preview` (and `vidfarm hf preview`) serves a studio SPA whose stock shell paints an upstream "HeyGen · HyperFrames" header logo and a "HyperFrames Studio" tab title. Every devcli hyperframes spawn — and `vidfarm doctor` — idempotently patches that shell in place (`src/devcli/studio-brand.ts`) so the header reads **VidFarm**, the tab title is **VidFarm Studio**, and the product name in the studio's own copy (lint panel, feedback prompt, storyboard/agent prompts, clipboard writes) is rewritten. `.hyperframes/` paths and `data-hyperframes-*` DOM hooks are preserved verbatim — they name real files and hooks — and CLI verbs map to their twins (`hyperframes render` → `vidfarm render`). A fresh `npm install` restores the stock shell; the next devcli command (or `vidfarm doctor`) re-applies it. If a director ever screenshots upstream branding, run `vidfarm doctor`.
+
 **Treat `hyperframes` as Vidfarm** (it is — just whitelabeled): never point it at an external HeyGen/vendor account, publish service, or telemetry endpoint. Keep `HYPERFRAMES_SKIP_SKILLS=1` + `HYPERFRAMES_NO_TELEMETRY=1` set (the devcli sets these for its children); do not run `hyperframes auth`/`cloud`/`publish`/`play`/`feedback` — Vidfarm's own render/share/telemetry surfaces replace all of them. Everything else `hyperframes` can do locally is fair game and encouraged.
 
 ## Local dev loop (`vidfarm serve`)

package/SKILL.director.md

@@ -2059,6 +2059,8 @@ vidfarm doctor                                # ✓/⚠/✗ for node, ffmpeg, hy
 - **`ffmpeg`** — the media engine the devcli drives for every local media op: `remove-greenscreen --local` (chroma-key → transparent PNG/WebP/WebM, ProRes fallback where the local libvpx can't do WebM alpha), STT/caption demux, `raws scan` clip cutting, `stills`, audio trims. **Hard requirement** — `vidfarm doctor` exits non-zero without it.
 - **`hyperframes`** — **Vidfarm's own render/animation engine, open-source under a whitelabel.** *Vidfarm renders ARE hyperframes renders.* The devcli bundles it and re-exposes everything it does locally as **`vidfarm hf <subcommand>`** — `vidfarm hf render <dir> -o out.mp4`, `capture`, `validate`, `preview`, `doctor`, plus the ONNX `remove-background` matting, Kokoro TTS, and Whisper STT engines the `tts`/`stt`/`remove-background` commands ride. Installing it standalone makes these run **natively** instead of a slower `npx -y hyperframes` fallback (which `vidfarm doctor` will warn about).
 
+**The local studio UI is whitelabeled automatically.** `hyperframes preview` (and `vidfarm hf preview`) serves a studio SPA whose stock shell paints an upstream "HeyGen · HyperFrames" header logo and a "HyperFrames Studio" tab title. Every devcli hyperframes spawn — and `vidfarm doctor` — idempotently patches that shell in place (`src/devcli/studio-brand.ts`) so the header reads **VidFarm**, the tab title is **VidFarm Studio**, and the product name in the studio's own copy (lint panel, feedback prompt, storyboard/agent prompts, clipboard writes) is rewritten. `.hyperframes/` paths and `data-hyperframes-*` DOM hooks are preserved verbatim — they name real files and hooks — and CLI verbs map to their twins (`hyperframes render` → `vidfarm render`). A fresh `npm install` restores the stock shell; the next devcli command (or `vidfarm doctor`) re-applies it. If a director ever screenshots upstream branding, run `vidfarm doctor`.
+
 **Treat `hyperframes` as Vidfarm** (it is — just whitelabeled): never point it at an external HeyGen/vendor account, publish service, or telemetry endpoint. Keep `HYPERFRAMES_SKIP_SKILLS=1` + `HYPERFRAMES_NO_TELEMETRY=1` set (the devcli sets these for its children); do not run `hyperframes auth`/`cloud`/`publish`/`play`/`feedback` — Vidfarm's own render/share/telemetry surfaces replace all of them. Everything else `hyperframes` can do locally is fair game and encouraged.
 
 ## Local dev loop (`vidfarm serve`)

package/dist/src/devcli/doctor.js

@@ -15,6 +15,7 @@ import { parseArgs } from "node:util";
 import { detectLocalAgent } from "../services/clip-curation/index.js";
 import { hasFfmpeg, resolveFfmpeg, resolveFfprobe } from "../services/clip-curation/ffmpeg.js";
 import { resolveHyperframesCli } from "./hyperframes-cli.js";
+import { applyVidfarmStudioBrand } from "./studio-brand.js";
 import { resolveSkillsRoot } from "./skills.js";
 import { readStoredAuth } from "./auth-store.js";
 import { scanLocalServers, reapProcesses } from "./process-scan.js";
@@ -138,6 +139,18 @@ export async function runDoctorCommand(argv) {
     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`)");
+    // 3b. Whitelabel the LOCAL studio shell (the `hyperframes preview` editor UI),
+    // which otherwise renders the upstream "HeyGen · HyperFrames" header logo and
+    // tab title. `doctor` REPAIRS it rather than just reporting: the patch is
+    // idempotent and a fresh `npm install` restores the pristine shell.
+    if (hyperframesCli) {
+        const brand = applyVidfarmStudioBrand();
+        add("studio branding", brand === "unavailable" ? "warn" : "ok", brand === "patched"
+            ? "local studio shell re-branded as VidFarm (upstream logo/title replaced)"
+            : brand === "already-branded"
+                ? "local studio shell already whitelabeled as VidFarm"
+                : "could not patch the local studio shell — `hyperframes preview` will show upstream branding (cosmetic only)");
+    }
     // 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`);

package/dist/src/devcli/hyperframes-cli.js

@@ -49,6 +49,18 @@ export async function runHyperframesCommand(subcommand, args, opts = {}) {
             "Local engines and vidfarm BYOK keys are the only auth.");
     }
     const cli = resolveHyperframesCli();
+    // The local studio SPA shell ships upstream branding (a "HeyGen · HyperFrames"
+    // header logo and a "HyperFrames Studio" tab title) that `hyperframes preview`
+    // serves straight off disk — the one Vidfarm surface the web editor's own
+    // rebrand never reaches. Whitelabel the shell on EVERY hyperframes spawn, not
+    // just preview: the patch is a cheap idempotent file check, and doing it here
+    // means a director who later runs `hyperframes preview` by hand still gets the
+    // VidFarm studio. Best-effort — branding never fails a render.
+    try {
+        const { applyVidfarmStudioBrand } = await import("./studio-brand.js");
+        applyVidfarmStudioBrand();
+    }
+    catch { /* cosmetic only */ }
     // Fresh empty config dir per invocation — guarantees no ~/.heygen credential
     // (or any other persisted account state) leaks into the child process.
     const emptyConfigDir = mkdtempSync(path.join(os.tmpdir(), "vidfarm-hf-noauth-"));

package/dist/src/devcli/studio-brand.js

@@ -0,0 +1,196 @@
+// Whitelabel the LOCAL hyperframes Studio UI as VidFarm.
+//
+// The web editor (`/editor`, `vidfarm serve`) mounts the sealed <StudioApp/>
+// through demo/src/VidfarmStudioEditor.tsx, which already swaps the upstream
+// "HeyGen · HyperFrames" header logo and rewrites the product name in copy.
+// But `hyperframes preview` (and `vidfarm hf preview`) boots the studio SPA
+// straight out of `node_modules/hyperframes/dist/studio/index.html` — that
+// bundle never passes through our editor entry, so it renders upstream branding
+// on a Vidfarm director's screen.
+//
+// The studio server reads that index.html **per request** (studioServer.ts's
+// SPA fallback), so a one-time on-disk patch of the shell is enough: no fork, no
+// dist rewriting of the JS, no proxy in the middle. We inject a marker-delimited
+// <style> + <script> block that does exactly what the web editor does in JS —
+// hide `svg[aria-label="Hyperframes"]`, insert a VidFarm wordmark, and rename
+// the product in text nodes / tooltips / clipboard writes.
+//
+// The patch is idempotent and versioned: a stale block is replaced, an up-to-date
+// one is left alone, and a fresh `npm install` (which restores the pristine file)
+// is re-patched on the next hyperframes spawn. `.hyperframes/` paths, the
+// `data-hyperframes-*` DOM hooks, and CLI verbs are deliberately preserved /
+// mapped, same as the web editor — renaming those would send an agent hunting
+// for files that do not exist.
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { resolveHyperframesCli } from "./hyperframes-cli.js";
+/** Bump when the injected block changes — older blocks are replaced in place. */
+const BRAND_VERSION = 1;
+const MARK_OPEN = `<!-- vidfarm-studio-brand v${BRAND_VERSION} -->`;
+const MARK_OPEN_ANY = /<!-- vidfarm-studio-brand v\d+ -->/;
+const MARK_CLOSE = "<!-- /vidfarm-studio-brand -->";
+// Tab icon: a self-contained gold "V" plate (data URI, so we never have to ship
+// or overwrite a file inside the hyperframes package). Matches the header
+// wordmark's badge below.
+const VIDFARM_FAVICON = "data:image/svg+xml," +
+    encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">' +
+        '<rect width="100" height="100" rx="26" fill="#f5c518"/>' +
+        '<path d="M26 28h14l10 30 10-30h14L58 76H42z" fill="#1c1608"/>' +
+        "</svg>");
+/**
+ * Locate `hyperframes/dist/studio/index.html` next to the resolved CLI entry.
+ * Returns null when hyperframes is not installed locally (the `npx -y` fallback
+ * path — nothing on disk of ours to patch).
+ */
+export function resolveStudioIndexPath() {
+    const cli = resolveHyperframesCli();
+    if (!cli)
+        return null;
+    const indexPath = path.join(path.dirname(cli), "studio", "index.html");
+    return existsSync(indexPath) ? indexPath : null;
+}
+/** The injected head block: hide the upstream mark, paint ours, rename the product. */
+function brandBlock() {
+    return `${MARK_OPEN}
+<style>
+  /* Belt-and-suspenders: kill the upstream mark before the script runs so it
+     never flashes. The wordmark below is inserted in its place. */
+  svg[aria-label="Hyperframes"] { display: none !important; }
+</style>
+<script>
+(function () {
+  var MARK = "data-vidfarm-logo";
+
+  function wordmark() {
+    var el = document.createElement("div");
+    el.setAttribute(MARK, "");
+    el.style.cssText = "display:inline-flex;align-items:center;gap:8px;user-select:none;line-height:1";
+    var badge = document.createElement("span");
+    badge.style.cssText =
+      "display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;" +
+      "background:#f5c518;color:#1c1608;font-weight:800;font-size:14px;font-family:system-ui,sans-serif";
+    badge.textContent = "V";
+    var word = document.createElement("span");
+    word.style.cssText =
+      "font-weight:800;font-size:15px;letter-spacing:-.01em;color:#fffbe6;font-family:system-ui,sans-serif";
+    word.textContent = "VidFarm";
+    el.appendChild(badge);
+    el.appendChild(word);
+    return el;
+  }
+
+  function swapLogo() {
+    var logos = document.querySelectorAll('svg[aria-label="Hyperframes"]');
+    for (var i = 0; i < logos.length; i += 1) {
+      var svg = logos[i];
+      var prev = svg.previousElementSibling;
+      if ((prev && prev.hasAttribute && prev.hasAttribute(MARK)) || svg.getAttribute("data-vidfarm-hidden") === "1") continue;
+      svg.setAttribute("data-vidfarm-hidden", "1");
+      svg.style.display = "none";
+      if (svg.parentElement) svg.parentElement.insertBefore(wordmark(), svg);
+    }
+  }
+
+  // Same rewrite table as the web editor: CLI verbs and .hyperframes/ paths are
+  // matched BEFORE the bare product name, so real files/commands survive.
+  function rewrite(text) {
+    return text
+      .replace(/\\bhyperframes (render|preview|lint|check|publish|init|add)\\b/g, "vidfarm $1")
+      .replace(/(^|[^./\\w-])[Hh]yper[Ff]rames(?![./\\w-])/g, "$1Vidfarm")
+      .replace(/(^|[^./\\w-])[Hh]yper[Ff]rame(?![s./\\w-])/g, "$1Vidfarm")
+      .replace(/\\bHeyGen\\b/g, "Vidfarm");
+  }
+
+  function needsRewrite(text) {
+    return /[Hh]yper[Ff]rame|HeyGen/.test(text) && rewrite(text) !== text;
+  }
+
+  function swapText() {
+    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    var pending = [];
+    for (var node = walker.nextNode(); node; node = walker.nextNode()) {
+      var tag = node.parentElement && node.parentElement.tagName;
+      if (tag === "SCRIPT" || tag === "STYLE") continue;
+      if (needsRewrite(node.nodeValue || "")) pending.push(node);
+    }
+    for (var i = 0; i < pending.length; i += 1) pending[i].nodeValue = rewrite(pending[i].nodeValue || "");
+    var attrs = ["title", "aria-label", "placeholder"];
+    var els = document.querySelectorAll("[title],[aria-label],[placeholder]");
+    for (var j = 0; j < els.length; j += 1) {
+      for (var k = 0; k < attrs.length; k += 1) {
+        var value = els[j].getAttribute(attrs[k]);
+        if (value && needsRewrite(value)) els[j].setAttribute(attrs[k], rewrite(value));
+      }
+    }
+  }
+
+  function apply() {
+    swapLogo();
+    swapText();
+  }
+
+  function start() {
+    apply();
+    new MutationObserver(apply).observe(document.body, { childList: true, subtree: true, characterData: true });
+    // Lint / storyboard panels hand agent prompts to the clipboard — rebrand on the way out.
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        var original = navigator.clipboard.writeText.bind(navigator.clipboard);
+        navigator.clipboard.writeText = function (data) {
+          return original(typeof data === "string" ? rewrite(data) : data);
+        };
+      }
+    } catch (err) { /* clipboard locked down — branding is best-effort */ }
+  }
+
+  if (document.body) start();
+  else document.addEventListener("DOMContentLoaded", start);
+})();
+</script>
+${MARK_CLOSE}`;
+}
+/**
+ * Patch the installed studio shell in place. Never throws — a read-only or
+ * missing node_modules just means the director sees upstream branding, which is
+ * cosmetic and must not fail a render.
+ */
+export function applyVidfarmStudioBrand(indexPathOverride) {
+    const indexPath = indexPathOverride ?? resolveStudioIndexPath();
+    if (!indexPath)
+        return "unavailable";
+    let html;
+    try {
+        html = readFileSync(indexPath, "utf-8");
+    }
+    catch {
+        return "unavailable";
+    }
+    const current = brandBlock();
+    if (html.includes(MARK_OPEN) && html.includes(MARK_CLOSE)) {
+        // Up-to-date block already present (same version) — but the block body can
+        // still drift if BRAND_VERSION was not bumped during development, so compare.
+        if (html.includes(current))
+            return "already-branded";
+    }
+    // Strip any previous (older-version or drifted) block before re-injecting.
+    let out = html.replace(new RegExp(`${MARK_OPEN_ANY.source}[\\s\\S]*?${MARK_CLOSE.replace(/[/]/g, "\\/")}`), "");
+    out = out.replace(/<title>[\s\S]*?<\/title>/, "<title>VidFarm Studio</title>");
+    // Tab icon (no-op once already swapped — the upstream href is gone by then).
+    out = out.replace(/href="\/favicon\.svg"/, `href="${VIDFARM_FAVICON}"`);
+    if (out.includes("</head>")) {
+        out = out.replace("</head>", `${current}\n  </head>`);
+    }
+    else {
+        out = `${current}\n${out}`;
+    }
+    if (out === html)
+        return "already-branded";
+    try {
+        writeFileSync(indexPath, out, "utf-8");
+    }
+    catch {
+        return "unavailable";
+    }
+    return "patched";
+}
+//# sourceMappingURL=studio-brand.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@officexapp/vidfarm-devcli",
-  "version": "0.21.29",
+  "version": "0.21.30",
   "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": {
@@ -32,6 +32,7 @@
     "dist/src/devcli/skills.js",
     "dist/src/devcli/speech.js",
     "dist/src/devcli/sticker-pack.js",
+    "dist/src/devcli/studio-brand.js",
     "dist/src/devcli/stills.js",
     "dist/src/devcli/storyboard.js",
     "dist/src/devcli/telemetry.js",
@@ -93,6 +94,7 @@
     "check": "tsc -p tsconfig.json --noEmit && npm run check:skills",
     "test:clips": "node --import tsx --test test/clip-curation.test.ts",
     "test:qa": "node --import tsx --test test/qa-check.test.ts",
+    "test:studio-brand": "node --import tsx --test test/studio-brand.test.ts",
     "check:skills": "node scripts/build-director-skill-rollup.mjs --check && node scripts/check-skill-routes.mjs",
     "benchmark:editor-chat": "node --import tsx scripts/benchmark-editor-chat-harness.mjs",
     "cdk:deploy:prod-serverless": "npm run build && dotenv -e .env.production -- npx aws-cdk deploy --app 'node dist/infra/cdk/bin/vidfarm-prod.js'",