@officexapp/vidfarm-devcli 0.21.29 → 0.21.31

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.31",
   "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,9 @@
     "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",
+    "test:stickers": "node --import tsx --test test/sticker-pack.test.ts",
+    "test:social-recycle": "node --import tsx --test test/social-recycle.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'",