@mevdragon/vidfarm-devcli 0.18.0 → 0.19.0

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

@@ -66,7 +66,7 @@ function PrimaryNav({ account }) {
         ? [
             { id: "chat", href: withAccountQuery("/chat", account.userId), label: "Chat" },
             { id: "job-runs", href: withAccountQuery("/job-runs", account.userId), label: "Run History" },
-            { id: "inpaint", href: withAccountQuery("/inpaint", account.userId), label: "Inpaint" },
+            { id: "tools", href: withAccountQuery("/tools/image", account.userId), label: "Tools" },
             { id: "help", href: "/help", label: "Help" },
             { id: "logout", action: "logout", label: "Log Out" }
         ]
@@ -286,7 +286,7 @@ function editorHref(templateId, accountUserId) {
         : withAccountQuery(`/templates/${encodeURIComponent(templateId)}/editor/docs`, accountUserId);
 }
 function CreateButton({ templateId, accountUserId }) {
-    return _jsx("a", { className: "cta-button", href: editorHref(templateId, accountUserId), children: "Editor" });
+    return _jsx("a", { className: "cta-button", href: editorHref(templateId, accountUserId), target: "_blank", rel: "noopener", children: "Editor" });
 }
 function CardMenu(input) {
     const { template } = input;
@@ -343,7 +343,7 @@ function CardMenu(input) {
             window.alert(result.error || "Unable to delete this template.");
         }
     };
-    return (_jsxs("div", { className: "discover-card-menu", ref: menuRef, children: [_jsx("button", { type: "button", className: "discover-card-menu-trigger", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-label": `More actions for ${template.title}`, title: "More actions", onClick: () => setIsOpen((prev) => !prev), children: _jsx(MoreIcon, {}) }), isOpen ? (_jsxs("div", { className: "discover-card-menu-panel", role: "menu", children: [_jsx("button", { type: "button", className: "discover-card-menu-item", role: "menuitem", onClick: () => void handleCopyId(), children: copied ? "Copied!" : "Copy ID" }), isPending ? (_jsx("span", { className: "discover-card-menu-item is-disabled", role: "menuitem", "aria-disabled": "true", children: "Open in Editor" })) : (_jsx("a", { className: "discover-card-menu-item", role: "menuitem", href: editorHref(template.templateId, input.accountUserId), children: "Open in Editor" })), _jsx("button", { type: "button", className: "discover-card-menu-item", role: "menuitem", onClick: () => {
+    return (_jsxs("div", { className: "discover-card-menu", ref: menuRef, children: [_jsx("button", { type: "button", className: "discover-card-menu-trigger", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-label": `More actions for ${template.title}`, title: "More actions", onClick: () => setIsOpen((prev) => !prev), children: _jsx(MoreIcon, {}) }), isOpen ? (_jsxs("div", { className: "discover-card-menu-panel", role: "menu", children: [_jsx("button", { type: "button", className: "discover-card-menu-item", role: "menuitem", onClick: () => void handleCopyId(), children: copied ? "Copied!" : "Copy ID" }), isPending ? (_jsx("span", { className: "discover-card-menu-item is-disabled", role: "menuitem", "aria-disabled": "true", children: "Open in Editor" })) : (_jsx("a", { className: "discover-card-menu-item", role: "menuitem", href: editorHref(template.templateId, input.accountUserId), target: "_blank", rel: "noopener", children: "Open in Editor" })), _jsx("button", { type: "button", className: "discover-card-menu-item", role: "menuitem", onClick: () => {
                             input.onToggleBookmark?.(template.templateId);
                             setIsOpen(false);
                         }, children: input.isBookmarked ? "Remove Bookmark" : "Bookmark" }), canDelete ? (_jsx("button", { type: "button", className: "discover-card-menu-item is-danger", role: "menuitem", disabled: deleting, onClick: () => void handleDelete(), children: deleting ? "Deleting…" : "Delete" })) : null] })) : null] }));

package/dist/src/frontend/template-editor-chat.js

@@ -2,6 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { debugError, debugLog, debugWarn } from "./debug.js";
+// Parse the fork id out of the canonical editor path
+// /editor/<template_id>/fork/<fork_id> → "<fork_id>" (else null). The editor
+// URL scheme moved from ?fork= to a path segment; this reads the new form.
+function forkIdFromLocation() {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const match = new URL(window.location.href).pathname.match(/^\/editor\/[^/]+\/fork\/([^/]+)\/?$/);
+        if (!match)
+            return null;
+        const forkId = decodeURIComponent(match[1]);
+        // /editor/original/fork/new (blank new project) has no real fork yet.
+        return forkId === "new" ? null : forkId;
+    }
+    catch {
+        return null;
+    }
+}
 const MB = 1024 * 1024;
 const MY_FILES_UPLOAD_LIMIT_BYTES = 50 * MB;
 const CHAT_INLINE_IMAGE_TARGET_BYTES = 2 * MB;
@@ -372,8 +390,11 @@ function collectLabeledUrls(value, output, seen = new Set(), path = []) {
     }
 }
 function buildJobQueuedMessage(job) {
+    // MUST stay string-identical to buildAsyncJobHandoffText in src/editor-chat.ts —
+    // the server streams that text and this client copy dedupes it by substring.
+    // Job-KIND-agnostic ("job", not "render"): fires for any queued async job.
     return [
-        `Started render \`${job.job_id}\`${job.tracer ? ` with tracer \`${job.tracer}\`` : ""}.`,
+        `Started job \`${job.job_id}\`${job.tracer ? ` with tracer \`${job.tracer}\`` : ""}.`,
         "If it takes a while, ask for an update later and I can check it for you."
     ].join("\n\n");
 }
@@ -1461,7 +1482,7 @@ function mediaInpaintHref(preview, ensureTracer = false) {
     if (typeof window === "undefined" || preview.kind !== "image" || !preview.url) {
         return "";
     }
-    const pageUrl = new URL("/inpaint", window.location.origin);
+    const pageUrl = new URL("/tools/image", window.location.origin);
     const bridge = window.__vidfarmEditorTracers;
     const existingTracers = bridge?.get() ?? readTracersFromLocation();
     const tracer = existingTracers[0] || (ensureTracer ? bridge?.add() ?? "" : "");
@@ -1482,7 +1503,7 @@ function MediaPreviewModal(props) {
     const activePreview = gallery[activeIndex] || props.preview;
     const canNavigate = gallery.length > 1;
     const canInpaint = activePreview.kind === "image";
-    const initialInpaintHref = canInpaint ? mediaInpaintHref(activePreview, false) || "/inpaint" : "/inpaint";
+    const initialInpaintHref = canInpaint ? mediaInpaintHref(activePreview, false) || "/tools/image" : "/tools/image";
     useEffect(() => {
         setIsMounted(true);
     }, []);
@@ -2417,25 +2438,10 @@ export function TemplateEditorChat({ boot }) {
     useEffect(() => {
         threadsRef.current = threads;
     }, [threads]);
-    const [currentForkId, setCurrentForkId] = useState(() => {
-        if (typeof window === "undefined") {
-            return null;
-        }
-        try {
-            return new URL(window.location.href).searchParams.get("fork");
-        }
-        catch {
-            return null;
-        }
-    });
+    const [currentForkId, setCurrentForkId] = useState(() => forkIdFromLocation());
     useEffect(() => {
         const syncForkFromLocation = () => {
-            try {
-                setCurrentForkId(new URL(window.location.href).searchParams.get("fork"));
-            }
-            catch {
-                setCurrentForkId(null);
-            }
+            setCurrentForkId(forkIdFromLocation());
         };
         window.addEventListener("popstate", syncForkFromLocation);
         return () => {
@@ -3704,7 +3710,7 @@ export function TemplateEditorChat({ boot }) {
             if (!forkRes.ok)
                 throw new Error(fork?.error || `couldn't create an editable copy (${forkRes.status})`);
             const forkId = fork?.fork_id;
-            const editorUrl = `${origin}/editor/${encodeURIComponent(templateId)}${forkId ? `?fork=${encodeURIComponent(forkId)}` : ""}`;
+            const editorUrl = `${origin}/editor/${encodeURIComponent(templateId)}${forkId ? `/fork/${encodeURIComponent(forkId)}` : ""}`;
             patch("Your video is ready.", `✅ Your video is ready — [Open it in the editor](${editorUrl}).`);
         }
         catch (error) {
@@ -4142,7 +4148,7 @@ export function TemplateEditorChat({ boot }) {
                                             left: openThreadMenu.left
                                         }, onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: () => copyThreadId(openThreadMenuThread.id), children: "Copy Chat ID" }), _jsx("button", { type: "button", onClick: () => editThreadTracers(openThreadMenuThread.id), children: "Edit tracers" }), _jsx("button", { type: "button", onClick: () => removeThreadFromView(openThreadMenuThread.id), children: "Remove from view" }), _jsx("button", { type: "button", onClick: () => archiveThread(openThreadMenuThread.id), children: "Archive thread" }), _jsx("button", { type: "button", "data-danger": "true", onClick: () => deleteThread(openThreadMenuThread.id), children: "Delete" })] }), document.body) : null] }), _jsx("div", { className: "vf-editor-chat-viewport", ref: viewportRef, children: showHistoryPanel ? (_jsx("div", { className: "vf-editor-chat-history-panel", children: threadListContent })) : showBranchesPanel ? (_jsxs("div", { className: "vf-editor-chat-history-panel vf-editor-chat-branches-panel", children: [_jsxs("div", { className: "vf-editor-chat-branches-header", children: [_jsxs("div", { className: "vf-editor-chat-branches-header-main", children: [_jsx("div", { className: "vf-editor-chat-branches-kicker", children: "Forks" }), _jsxs("div", { className: "vf-editor-chat-branches-title", children: [branches?.length ?? 0, " fork", (branches?.length ?? 0) === 1 ? "" : "s", " of this template"] })] }), _jsx("button", { type: "button", className: "vf-editor-chat-branches-refresh", onClick: () => { void loadBranches({ force: true }); }, disabled: branchesLoading, "aria-label": "Refresh forks", children: branchesLoading ? "Loading…" : "Refresh" })] }), branchesError ? (_jsx("div", { className: "vf-editor-chat-thread-empty", role: "status", children: branchesError })) : branchesLoading && !branches ? (_jsx("div", { className: "vf-editor-chat-thread-empty", children: "Loading forks\u2026" })) : branches && branches.length ? (_jsx("div", { className: "vf-editor-chat-thread-list", children: branches.map((fork) => {
                                                 const isCurrent = currentForkId === fork.forkId;
-                                                const forkUrl = `/editor/${encodeURIComponent(boot.template.templateId)}?fork=${encodeURIComponent(fork.forkId)}`;
+                                                const forkUrl = `/editor/${encodeURIComponent(boot.template.templateId)}/fork/${encodeURIComponent(fork.forkId)}`;
                                                 const label = fork.title && fork.title.trim() ? fork.title : fork.forkId;
                                                 const parentSuffix = fork.parentForkId ? ` · forked from ${fork.parentForkId.slice(0, 12)}${fork.parentVersion ? `#v${fork.parentVersion}` : ""}` : "";
                                                 const versionSuffix = fork.latestVersion && fork.latestVersion > 0 ? ` · v${fork.latestVersion}` : "";

package/dist/src/landing-page.js

@@ -33,8 +33,24 @@ export function renderLandingPage(input) {
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Vidfarm — short-form video that makes itself</title>
-<meta name="description" content="Fork a proven short-form template, remix it on the timeline, and render a share-ready MP4 — all in your browser. Vidfarm is the serverless video studio that scales to zero.">
+<title>VidFarm — short-form video that makes itself</title>
+<meta name="description" content="Fork a proven short-form template, remix it on the timeline, and render a share-ready MP4 — all in your browser. VidFarm is the serverless video studio that scales to zero.">
+<meta name="theme-color" content="#171717">
+<meta name="robots" content="index, follow">
+<meta name="application-name" content="VidFarm">
+<link rel="canonical" href="https://vidfarm.cc/">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="VidFarm">
+<meta property="og:title" content="VidFarm — short-form video that makes itself">
+<meta property="og:description" content="Fork a proven short-form template, remix it on the timeline, and render a share-ready MP4 — all in your browser. VidFarm is the serverless video studio that scales to zero.">
+<meta property="og:url" content="https://vidfarm.cc/">
+<meta property="og:image" content="https://vidfarm.cc/assets/logo-vidfarm.png">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="VidFarm — short-form video that makes itself">
+<meta name="twitter:description" content="Fork a proven short-form template, remix it on the timeline, and render a share-ready MP4 — all in your browser. VidFarm is the serverless video studio that scales to zero.">
+<meta name="twitter:image" content="https://vidfarm.cc/assets/logo-vidfarm.png">
+<link rel="icon" href="/assets/favicon.ico" sizes="any">
+<link rel="apple-touch-icon" href="/assets/logo-vidfarm.png">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -80,7 +96,7 @@ h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.025
 .glass{background:rgba(255,255,255,.72);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border);box-shadow:var(--shadow-nav)}
 .nav{width:min(var(--container),100%);display:flex;align-items:center;gap:24px;padding:10px 12px 10px 22px;border-radius:var(--r-full)}
 .brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.02em}
-.brand-mark{width:28px;height:28px;border-radius:9px;background:var(--gold-500);display:grid;place-items:center;font-size:16px;box-shadow:var(--shadow-xs)}
+.brand-mark{display:inline-block;vertical-align:middle;width:48px;height:48px;border-radius:12px;background:center/contain no-repeat url("/assets/logo-vidfarm.png");font-size:0;color:transparent;text-indent:-9999px;overflow:hidden}
 .nav-links{display:flex;gap:2px;margin:0 auto;list-style:none}
 .nav-links a{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:var(--r-lg);font-size:15px;font-weight:500;color:var(--n-700);transition:background var(--dur) var(--ease)}
 .nav-links a:hover{background:#0000000a}
@@ -186,7 +202,8 @@ h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.025
 .footer-inner{width:min(var(--container),100%);margin:0 auto}
 .footer-top{display:grid;grid-template-columns:1.4fr 3fr;gap:40px;margin-bottom:40px}
 @media(max-width:820px){.footer-top{grid-template-columns:1fr}}
-.footer-brand{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--gold-500);display:inline-flex;align-items:center;gap:8px}
+.footer-brand{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--gold-500);display:inline-flex;align-items:center;gap:12px}
+.footer-brand .brand-mark{width:60px;height:60px;border-radius:14px}
 .footer-tagline{color:var(--n-500);margin-top:10px;max-width:280px}
 .footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
 @media(max-width:560px){.footer-cols{grid-template-columns:repeat(2,1fr)}}
@@ -204,7 +221,7 @@ h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.025
 <!-- NAV (body-level so it stays sticky across the whole page) -->
 <header class="nav-wrap">
   <nav class="nav glass">
-    <a class="brand" href="/"><span class="brand-mark">🎬</span>vidfarm</a>
+    <a class="brand" href="/"><span class="brand-mark">🎬</span>VidFarm</a>
     <ul class="nav-links">
       <li><a href="${HREF.studio}">Templates</a></li>
       <li><a href="${HREF.clips}">Clips</a></li>
@@ -239,7 +256,7 @@ h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.025
 <div class="hero-shot">
   <div class="shot-head">
     <span class="dot dot-r"></span><span class="dot dot-y"></span><span class="dot dot-g"></span>
-    <span class="shot-title">vidfarm · trackpad editor</span>
+    <span class="shot-title">VidFarm · trackpad editor</span>
   </div>
   <div class="pipeline">
     <div class="node"><span class="tile tile-sky">📼</span><div><div class="node-title">Fork template</div><div class="node-sub">Proven hook</div></div></div>
@@ -344,7 +361,7 @@ h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.025
   <div class="footer-inner">
     <div class="footer-top">
       <div>
-        <div class="footer-brand"><span class="brand-mark">🎬</span>vidfarm</div>
+        <div class="footer-brand"><span class="brand-mark">🎬</span>VidFarm</div>
         <div class="footer-tagline">The serverless studio for short-form video.</div>
       </div>
       <div class="footer-cols">

package/dist/src/page-shell.js

@@ -82,7 +82,7 @@ export function renderPrimaryNav(input) {
         ? [
             { id: "chat", href: withAccountQuery("/chat", input.accountId), label: "Chat" },
             { id: "job-runs", href: withAccountQuery("/job-runs", input.accountId), label: "Run History" },
-            { id: "inpaint", href: withAccountQuery("/inpaint", input.accountId), label: "Inpaint" },
+            { id: "tools", href: withAccountQuery("/tools/image", input.accountId), label: "Tools" },
             { id: "help", href: "/help", label: "Help" },
             { id: "logout", action: "logout", label: "Log Out" }
         ]
@@ -168,14 +168,38 @@ export function renderBrandLockup(input) {
     </a>
   `;
 }
+const BRAND_NAME = "VidFarm";
+const BRAND_ORIGIN = "https://vidfarm.cc";
+const BRAND_OG_IMAGE = `${BRAND_ORIGIN}/assets/logo-vidfarm.png`;
 export function renderPageShell(input) {
     const isEditorTheme = input.bodyClass?.split(/\s+/).includes("is-editor-theme") ?? false;
+    // Brand the tab title unless the page already names VidFarm.
+    const pageTitle = /vidfarm/i.test(input.title) ? input.title : `${input.title} · ${BRAND_NAME}`;
+    const description = input.description ?? `${BRAND_NAME} — serverless short-form video studio. Fork a proven template, remix it, and render a share-ready MP4 in your browser.`;
+    const ogImage = input.social?.image ?? BRAND_OG_IMAGE;
+    const ogType = input.social?.type ?? "website";
+    const ogUrl = input.social?.url ?? BRAND_ORIGIN;
+    const metaTags = `
+    <meta name="description" content="${escapeHtml(description)}" />
+    <meta name="theme-color" content="#f8f4eb" />
+    <meta name="robots" content="index, follow" />
+    <meta name="application-name" content="${BRAND_NAME}" />
+    <meta property="og:type" content="${escapeHtml(ogType)}" />
+    <meta property="og:site_name" content="${BRAND_NAME}" />
+    <meta property="og:title" content="${escapeHtml(pageTitle)}" />
+    <meta property="og:description" content="${escapeHtml(description)}" />
+    <meta property="og:url" content="${escapeHtml(ogUrl)}" />
+    <meta property="og:image" content="${escapeHtml(ogImage)}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="${escapeHtml(pageTitle)}" />
+    <meta name="twitter:description" content="${escapeHtml(description)}" />
+    <meta name="twitter:image" content="${escapeHtml(ogImage)}" />`;
     return `<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <title>${escapeHtml(input.title)}</title>
+    <title>${escapeHtml(pageTitle)}</title>${metaTags}
     <link rel="icon" href="/assets/favicon.ico" sizes="any" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />