@mevdragon/vidfarm-devcli 0.15.0 → 0.17.0

package/dist/src/reskin/help-page.js

@@ -0,0 +1,318 @@
+// /reskin/help — the vidfarm Help / Getting-started center, ported into the
+// farmville design system using ONLY shared rk-* primitives + a page-scoped
+// CSS block + a small self-contained module script.
+//
+// Renders with representative SAMPLE help content so it can be viewed without
+// auth. Faithfully mirrors src/help-page.ts → renderHelpPage: a friendly intro,
+// support entry points (video tutorials / report a bug / contact / billing),
+// and a native <details>/<summary> accordion whose items can be deep-linked
+// open via an `?expand=id,id` query param (URL stays in sync on toggle).
+//
+// Content is representative vidfarm help: forking templates, editing on the
+// timeline, rendering, publishing, and billing / credits.
+import { reskinDocument, rkEscape } from "./document.js";
+const SEARCH_ICON = `<svg class="rk-help-search-ic" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>`;
+const TOPICS = [
+    { expand: "getting_started", title: "Getting started", blurb: "Fork a template on Discover and make it yours in a click.", count: "6 articles" },
+    { expand: "editing", title: "Editing", blurb: "Retime clips, swap media, and edit by chatting on the timeline.", count: "9 articles" },
+    { expand: "rendering", title: "Rendering", blurb: "Turn your composition into a finished MP4 on HyperFrames.", count: "4 articles" },
+    { expand: "publishing", title: "Publishing", blurb: "Schedule and post approved cuts straight to your channels.", count: "5 articles" },
+    { expand: "billing", title: "Billing & credits", blurb: "Understand your wallet, compute charges, and rate limits.", count: "7 articles" }
+];
+const FAQ = [
+    {
+        id: "getting_started",
+        cat: "Getting started",
+        catPill: "rk-pill-green",
+        question: "How do I start from a template?",
+        answer: `<p>Head to <strong>Discover</strong> and tap any template to preview it. When one clicks, hit <strong>Fork</strong> — vidfarm copies it into your <strong>Library</strong> as an editable project with its own timeline.</p>
+      <p>Forking never touches the original, so you're free to remix hooks, captions, and clips however you like. Your forks always show a <em>“Your project”</em> pill so they're easy to spot.</p>`
+    },
+    {
+        id: "editing",
+        cat: "Editing",
+        catPill: "rk-pill-sky",
+        question: "How does the timeline editor work?",
+        answer: `<p>Open any project in <strong>/editor</strong> to get a track-based timeline. Drag a clip to retime it, click a layer to edit its text or swap the media, and use the handles on the canvas frame to move or resize anything.</p>
+      <p>Prefer words to knobs? The AI chat dock edits for you in plain language — try <code>make the hook bigger</code> or <code>swap scene 2 for a beach clip</code>. Every change is saved to your project and you'll see a confirmation banner.</p>`
+    },
+    {
+        id: "rendering",
+        cat: "Rendering",
+        catPill: "rk-pill-violet",
+        question: "How do I render my video, and what does it cost?",
+        answer: `<p>Hit <strong>Render</strong> in the editor. Vidfarm renders your composition to a full-quality MP4 on HyperFrames Lambda, and the finished file lands back in your <strong>Library</strong> when it's done.</p>
+      <p>You're only charged for the <strong>compute time</strong> the render actually uses — your own AI keys are never billed by vidfarm. Long renders keep you posted from the <strong>Job runs</strong> page.</p>`
+    },
+    {
+        id: "publishing",
+        cat: "Publishing",
+        catPill: "rk-pill-red",
+        question: "Can I publish straight to social?",
+        answer: `<p>Yes. First connect a channel in <strong>Settings → Channels</strong> (via FlockPoster or an email channel). Then, from any finished render, choose <strong>Publish</strong> to post or schedule to TikTok, Instagram, and more.</p>
+      <p>Scheduled posts show up on your <strong>Calendar</strong>, so you can plan a week of content and let vidfarm ship it for you.</p>`
+    },
+    {
+        id: "billing",
+        cat: "Billing",
+        catPill: "rk-pill-gold",
+        question: "How do credits and billing work?",
+        answer: `<p>Your <strong>wallet</strong> holds a prepaid balance. Renders and clip scans draw from it based on the compute they use — nothing else. Every charge is itemized in <strong>Settings → Wallet</strong>.</p>
+      <p>Top up any time, and set <strong>rate limits</strong> like “max spend per hour / per day” so a runaway job can never surprise you.</p>`
+    },
+    {
+        id: "clips",
+        cat: "Editing",
+        catPill: "rk-pill-sky",
+        question: "What are Clips, and how do I use them?",
+        answer: `<p>Clips are short, tagged moments mined from your footage. Point vidfarm at a source video and it cuts the video into scenes, tags each one, and drops them into your <strong>Clips</strong> library.</p>
+      <p>From there you can search by what's on screen (“founder on camera”, “product close-up”) and drop any clip straight into a project on the timeline.</p>`
+    },
+    {
+        id: "ai_keys",
+        cat: "Billing",
+        catPill: "rk-pill-gold",
+        question: "Do I need my own AI keys?",
+        answer: `<p>Bring-your-own keys — OpenAI, Gemini, OpenRouter, or Anthropic — power clip tagging, recaption, and Swipe mode. Add them in <strong>Settings → Developer</strong>; they're stored per workspace.</p>
+      <p>These keys are <strong>never billed by vidfarm</strong>. You only ever pay us for render and clip-scan compute.</p>`
+    },
+    {
+        id: "cancel",
+        cat: "Billing",
+        catPill: "rk-pill-gold",
+        question: "How do I cancel or get a refund?",
+        answer: `<p>You can cancel any time from the self-serve billing portal — no email required. We also offer <strong>90-day refunds</strong>.</p>
+      <p>For a refund, email <a href="mailto:operator@zoom-gtm.com">operator@zoom-gtm.com</a> and mention the email address you used at checkout so we can find your subscription quickly.</p>
+      <p><a class="rk-help-inline-cta" href="https://billing.stripe.com/p/login/fZecQubkxcwOgDuaEE" target="_blank" rel="noopener noreferrer">Open the billing portal <span class="rk-arrow">↗</span></a></p>`
+    }
+];
+const SUPPORT_LINKS = [
+    { title: "Watch the tutorials", blurb: "A 4-minute tour from fork to published post.", cta: "Play video", href: "#" },
+    { title: "Report a bug", blurb: "Something broken? Send us the details in 30 seconds.", cta: "Report it", href: "#" },
+    { title: "Billing portal", blurb: "Update payment, download invoices, or cancel.", cta: "Manage billing", href: "#" }
+];
+function renderTopicCard(t) {
+    return `<a class="rk-card rk-card-hover rk-help-topic" href="?expand=${rkEscape(t.expand)}#rk-help-faq">
+    <h3>${rkEscape(t.title)}</h3>
+    <p class="rk-muted rk-help-topic-blurb">${rkEscape(t.blurb)}</p>
+    <span class="rk-help-topic-foot">${rkEscape(t.count)} <span class="rk-arrow">→</span></span>
+  </a>`;
+}
+function renderFaqItem(f) {
+    return `<details class="rk-help-faq-item" data-expand-id="${rkEscape(f.id)}">
+    <summary class="rk-help-faq-summary">
+      <span class="rk-help-faq-q">
+        <span class="rk-pill ${f.catPill} rk-help-faq-cat">${rkEscape(f.cat)}</span>
+        <span class="rk-help-faq-qt">${rkEscape(f.question)}</span>
+      </span>
+      <span class="rk-help-faq-toggle" aria-hidden="true"></span>
+    </summary>
+    <div class="rk-help-faq-body">${f.answer}</div>
+  </details>`;
+}
+function renderSupportLink(s) {
+    return `<a class="rk-item rk-help-support" href="${rkEscape(s.href)}">
+    <div class="rk-item-main">
+      <div class="rk-item-title">${rkEscape(s.title)}</div>
+      <div class="rk-help-support-sub rk-muted">${rkEscape(s.blurb)}</div>
+    </div>
+    <span class="rk-btn rk-btn-ghost rk-btn-sm">${rkEscape(s.cta)} <span class="rk-arrow">→</span></span>
+  </a>`;
+}
+export function renderReskinHelp() {
+    const popular = ["Fork a template", "Render an MP4", "Connect TikTok", "Wallet top-up", "What are Clips?"];
+    const hero = `
+  <div class="rk-hero-band rk-help-band">
+    <div class="rk-hero-art rk-help-art"></div>
+    <div class="rk-hero rk-help-hero">
+      <span class="rk-badge rk-help-badge">Help center</span>
+      <h1 class="rk-help-title">How can we help?</h1>
+      <p class="rk-help-lede">Guides and answers for making short-form video with vidfarm — from your first fork to your first published post.</p>
+      <form class="rk-help-search" role="search" onsubmit="return false">
+        ${SEARCH_ICON}
+        <input class="rk-help-search-input" type="search" placeholder="Search help articles — “how do I render?”" aria-label="Search help articles" />
+        <button class="rk-btn rk-btn-gold rk-help-search-btn" type="submit">Search</button>
+      </form>
+      <div class="rk-help-popular">
+        <span class="rk-help-popular-label">Popular:</span>
+        ${popular.map((p) => `<a class="rk-help-chip" href="#rk-help-faq">${rkEscape(p)}</a>`).join("")}
+      </div>
+    </div>
+  </div>`;
+    const topics = `
+  <section class="rk-help-topics" aria-label="Browse by topic">
+    <div class="rk-grid rk-help-topic-grid">
+      ${TOPICS.map(renderTopicCard).join("")}
+    </div>
+  </section>`;
+    const faq = `
+  <section class="rk-help-faq" id="rk-help-faq" aria-labelledby="rk-help-faq-title">
+    <div class="rk-page-head rk-help-faq-head">
+      <span class="rk-eyebrow">Frequently asked</span>
+      <h2 class="rk-h1 rk-help-faq-h" id="rk-help-faq-title">Questions, answered</h2>
+      <p class="rk-sub">The quick answers most folks are looking for. Still stuck? We're one message away.</p>
+    </div>
+    <div class="rk-help-faq-list">
+      ${FAQ.map(renderFaqItem).join("")}
+    </div>
+  </section>`;
+    const contact = `
+  <section class="rk-help-contact" aria-label="Contact support">
+    <div class="rk-card rk-help-cta-card">
+      <div class="rk-help-cta-copy">
+        <span class="rk-eyebrow rk-help-cta-eyebrow">Still need help?</span>
+        <h2>Talk to a human</h2>
+        <p class="rk-help-cta-sub">Real people, quick replies. Tell us what you're building and we'll help you ship it.</p>
+      </div>
+      <div class="rk-help-cta-actions">
+        <a class="rk-btn rk-btn-gold rk-btn-lg" href="mailto:operator@zoom-gtm.com">Contact the team <span class="rk-arrow">→</span></a>
+        <span class="rk-pill rk-pill-green">Typically replies in a few hours</span>
+      </div>
+    </div>
+    <div class="rk-list rk-help-support-list">
+      ${SUPPORT_LINKS.map(renderSupportLink).join("")}
+    </div>
+  </section>`;
+    const body = `
+${hero}
+<main class="rk-container rk-help-main">
+  ${topics}
+  ${faq}
+  ${contact}
+</main>`;
+    const pageCss = `
+/* ── hero band ── */
+.rk-help-band{padding-bottom:110px}
+.rk-help-art{background:
+  radial-gradient(52% 42% at 82% 14%,rgba(255,241,204,.95),transparent 62%),
+  radial-gradient(46% 40% at 12% 92%,rgba(255,245,228,.55),transparent 60%),
+  linear-gradient(180deg,#3f9fe0 0%,#6cc0f5 52%,#a9dbfb 100%)}
+.rk-help-hero{max-width:780px;margin:0 auto;display:grid;justify-items:center;gap:18px;padding-bottom:36px}
+.rk-help-badge{background:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
+.rk-help-title{font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.035em;color:#fff;text-shadow:0 2px 18px rgba(20,54,90,.28)}
+.rk-help-lede{font-size:var(--rk-text-lg);color:#f3fbff;max-width:560px;line-height:1.55;text-shadow:0 1px 10px rgba(20,54,90,.25)}
+/* decorative search */
+.rk-help-search{position:relative;display:flex;align-items:center;width:min(560px,100%);
+  background:#fff;border-radius:var(--rk-r-full);box-shadow:var(--rk-shadow-lg);padding:7px 7px 7px 18px;margin-top:6px}
+.rk-help-search-ic{color:var(--rk-n-400);flex:none}
+.rk-help-search-input{flex:1;border:0;outline:none;font-family:var(--rk-font-body);font-size:15px;
+  color:var(--rk-ink);background:transparent;padding:11px 12px}
+.rk-help-search-input::placeholder{color:var(--rk-n-400)}
+.rk-help-search-btn{flex:none;padding:11px 20px}
+.rk-help-popular{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:2px}
+.rk-help-popular-label{font-size:13px;font-weight:600;color:#eaf6ff}
+.rk-help-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--rk-r-full);
+  font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
+  backdrop-filter:blur(6px);transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.rk-help-chip:hover{background:rgba(255,255,255,.28);transform:translateY(-1px)}
+
+/* ── main column ── */
+.rk-help-main{position:relative;z-index:2;padding-bottom:96px}
+
+/* ── topic cards (pulled up onto the hero seam) ── */
+.rk-help-topics{margin-top:-72px}
+.rk-help-topic-grid{grid-template-columns:repeat(5,1fr)}
+@media(max-width:1080px){.rk-help-topic-grid{grid-template-columns:repeat(3,1fr)}}
+@media(max-width:720px){.rk-help-topic-grid{grid-template-columns:repeat(2,1fr)}}
+@media(max-width:460px){.rk-help-topic-grid{grid-template-columns:1fr}}
+.rk-help-topic{display:grid;gap:10px;align-content:start;padding:24px;text-align:left}
+.rk-help-topic h3{font-size:var(--rk-text-lg);font-weight:800;font-family:var(--rk-font-display);color:var(--rk-ink)}
+.rk-help-topic-tile{margin-bottom:4px}
+.rk-help-topic-blurb{font-size:13.5px;line-height:1.5}
+.rk-help-topic-foot{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
+  font-size:13px;font-weight:700;color:var(--rk-gold-700)}
+.rk-help-topic:hover .rk-help-topic-foot .rk-arrow{transform:translateX(3px)}
+.rk-help-topic-foot .rk-arrow{transition:transform var(--rk-dur) var(--rk-ease)}
+
+/* ── FAQ accordion ── */
+.rk-help-faq{margin-top:72px}
+.rk-help-faq-head{justify-items:center;text-align:center;margin-bottom:28px;gap:10px}
+.rk-help-faq-h{font-size:var(--rk-text-3xl)}
+.rk-help-faq-list{display:grid;gap:14px;max-width:820px;margin:0 auto}
+.rk-help-faq-item{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);
+  box-shadow:var(--rk-shadow-card);overflow:hidden;transition:box-shadow var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-help-faq-item[open]{border-color:var(--rk-gold-tint2);box-shadow:var(--rk-shadow-lg)}
+.rk-help-faq-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
+  padding:20px 22px;cursor:pointer;list-style:none;user-select:none}
+.rk-help-faq-summary::-webkit-details-marker{display:none}
+.rk-help-faq-q{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
+.rk-help-faq-cat{flex:none}
+.rk-help-faq-qt{font-family:var(--rk-font-display);font-weight:700;font-size:var(--rk-text-lg);color:var(--rk-ink);letter-spacing:-.01em}
+.rk-help-faq-toggle{position:relative;flex:none;width:30px;height:30px;border-radius:var(--rk-r-full);
+  background:var(--rk-n-100);transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.rk-help-faq-toggle::before,.rk-help-faq-toggle::after{content:"";position:absolute;top:50%;left:50%;
+  width:12px;height:2px;border-radius:2px;background:var(--rk-n-600);transform:translate(-50%,-50%);transition:opacity var(--rk-dur) var(--rk-ease)}
+.rk-help-faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
+.rk-help-faq-item[open] .rk-help-faq-toggle{background:var(--rk-gold-tint2);transform:rotate(180deg)}
+.rk-help-faq-item[open] .rk-help-faq-toggle::after{opacity:0}
+.rk-help-faq-item[open] .rk-help-faq-toggle::before{background:var(--rk-gold-700)}
+.rk-help-faq-summary:hover .rk-help-faq-toggle{background:var(--rk-n-200)}
+.rk-help-faq-body{display:grid;gap:12px;padding:0 22px 22px;max-width:680px;color:var(--rk-text);line-height:1.65;font-size:14.5px}
+.rk-help-faq-body p{margin:0}
+.rk-help-faq-body strong{color:var(--rk-n-800);font-weight:600}
+.rk-help-faq-body a{color:var(--rk-gold-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}
+.rk-help-inline-cta{display:inline-flex;align-items:center;gap:6px;text-decoration:none!important}
+.rk-help-inline-cta .rk-arrow{transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-help-inline-cta:hover .rk-arrow{transform:translateX(3px)}
+
+/* ── contact ── */
+.rk-help-contact{margin-top:72px;display:grid;gap:20px}
+.rk-help-cta-card{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
+  background:linear-gradient(135deg,#fffaf0 0%,#fff 60%);border-color:var(--rk-gold-tint2)}
+.rk-help-cta-copy{display:grid;gap:8px;max-width:460px}
+.rk-help-cta-card h2{font-size:var(--rk-text-3xl)}
+.rk-help-cta-eyebrow{color:var(--rk-gold-700)}
+.rk-help-cta-sub{color:var(--rk-text-muted);font-size:var(--rk-text-base);line-height:1.55}
+.rk-help-cta-actions{display:grid;gap:12px;justify-items:start}
+.rk-help-support-list{grid-template-columns:repeat(3,1fr);display:grid;gap:14px}
+@media(max-width:860px){.rk-help-support-list{grid-template-columns:1fr}}
+.rk-help-support{gap:16px;padding:18px}
+.rk-help-support-sub{font-size:13px;margin-top:2px;white-space:normal}
+@media(max-width:560px){.rk-help-support{flex-wrap:wrap}}
+`;
+    const script = `
+(function(){
+  var items=Array.prototype.slice.call(document.querySelectorAll('.rk-help-faq-item[data-expand-id]'));
+  var allowed={}; items.forEach(function(d){if(d.dataset.expandId)allowed[d.dataset.expandId]=1;});
+
+  function readExpandedFromUrl(){
+    var params=new URLSearchParams(window.location.search);
+    var set={};
+    (params.get('expand')||'').split(',').map(function(v){return v.trim();})
+      .forEach(function(v){if(allowed[v])set[v]=1;});
+    return set;
+  }
+  function writeExpandedToUrl(){
+    var open=items.filter(function(d){return d.open&&d.dataset.expandId;})
+      .map(function(d){return d.dataset.expandId;});
+    var url=new URL(window.location.href);
+    if(open.length){url.searchParams.set('expand',open.join(','));}
+    else{url.searchParams.delete('expand');}
+    if(window.history.replaceState){
+      window.history.replaceState(null,'',url.pathname+url.search+url.hash);
+    }
+  }
+
+  var initial=readExpandedFromUrl();
+  items.forEach(function(d){
+    d.open=Boolean(d.dataset.expandId&&initial[d.dataset.expandId]);
+    d.addEventListener('toggle',writeExpandedToUrl);
+  });
+
+  var firstOpen=items.filter(function(d){return d.open;})[0];
+  if(firstOpen){
+    requestAnimationFrame(function(){
+      firstOpen.scrollIntoView({block:'center',behavior:'smooth'});
+    });
+  }
+})();`;
+    return reskinDocument({
+        title: "vidfarm reskin — Help",
+        description: "Reskinned vidfarm help center — getting started, topics, FAQ, and support.",
+        activeSlug: "help",
+        pageCss,
+        body,
+        script
+    });
+}
+//# sourceMappingURL=help-page.js.map

package/dist/src/reskin/index-page.js

@@ -0,0 +1,62 @@
+// /reskin index — a gallery of every page in the migration, with status.
+import { reskinDocument } from "./document.js";
+import { RESKIN_PAGES } from "./theme.js";
+export function renderReskinIndex() {
+    const done = RESKIN_PAGES.filter((p) => p.done).length;
+    const cards = RESKIN_PAGES.map((p) => {
+        const status = p.done
+            ? `<span class="rk-pill rk-pill-green">✓ Ported</span>`
+            : `<span class="rk-pill">In progress</span>`;
+        const href = p.done ? `/reskin/${p.slug}` : `/reskin/${p.slug}`;
+        return `<a class="rk-card rk-card-hover rk-idx-card" href="${href}">
+      <div class="rk-spread">
+        <span class="rk-tile rk-tile-lg rk-tile-gold rk-idx-mark">${p.label.charAt(0)}</span>
+        ${status}
+      </div>
+      <div>
+        <h3 class="rk-idx-title">${p.label}</h3>
+        <p class="rk-muted rk-idx-blurb">${p.blurb}</p>
+      </div>
+      <div class="rk-idx-foot rk-muted">
+        <span>reskins <code>${p.live}</code></span>
+        <span class="rk-idx-go">Open <span class="rk-arrow">→</span></span>
+      </div>
+    </a>`;
+    }).join("");
+    const body = `
+<section class="rk-hero-band">
+  <div class="rk-hero-art"></div>
+  <div class="rk-hero">
+    <span class="rk-badge">Design-system migration</span>
+    <h1 class="rk-idx-hero-h1">Reskinning vidfarm,<br>one page at a time</h1>
+    <p class="rk-idx-hero-sub">A safe sandbox at <code>/reskin/*</code> where each old page is
+    rebuilt in the warm, sunny design system — with fully isolated CSS, so nothing touches the live app.</p>
+    <div class="rk-idx-progress">${done} of ${RESKIN_PAGES.length} pages ported</div>
+  </div>
+</section>
+<main class="rk-container rk-page">
+  <div class="rk-grid rk-grid-3 rk-idx-grid">${cards}</div>
+</main>`;
+    const pageCss = `
+.rk-idx-hero-h1{font-size:clamp(2.4rem,5vw,3.6rem);color:#fff;letter-spacing:-.03em;text-shadow:0 2px 24px rgba(0,0,0,.12);margin-top:18px}
+.rk-hero .rk-badge{background:rgba(255,255,255,.9)}
+.rk-idx-hero-sub{max-width:620px;margin:18px auto 0;font-size:var(--rk-text-lg);color:rgba(255,255,255,.95)}
+.rk-idx-hero-sub code{background:rgba(255,255,255,.22);color:#fff}
+.rk-idx-progress{display:inline-block;margin-top:22px;padding:8px 16px;border-radius:var(--rk-r-full);background:rgba(255,255,255,.9);color:var(--rk-ink);font-weight:600;font-size:14px}
+.rk-idx-grid{margin-top:-56px;position:relative;z-index:2}
+.rk-idx-card{display:grid;gap:16px;text-decoration:none}
+.rk-idx-title{margin-bottom:4px}
+.rk-idx-blurb{font-size:14px}
+.rk-idx-foot{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding-top:14px;border-top:1px solid var(--rk-border)}
+.rk-idx-go{font-weight:600;color:var(--rk-ink)}
+.rk-idx-mark{font-family:var(--rk-font-display);font-weight:800;font-size:22px;color:var(--rk-ink)}
+`;
+    return reskinDocument({
+        title: "vidfarm reskin — page gallery",
+        description: "The /reskin/* design-system migration surface for vidfarm.",
+        activeSlug: null,
+        pageCss,
+        body
+    });
+}
+//# sourceMappingURL=index-page.js.map

package/dist/src/reskin/job-runs-page.js

@@ -0,0 +1,249 @@
+// /reskin/job-runs — render & job history / health, ported into the farmville
+// design system. Reference: renderSettingsPage (settings-page.ts) for the
+// zero-arg + SAMPLE-data + page-scoped rk-<page>- CSS + self-contained script
+// conventions.
+//
+// Faithfully mirrors src/account-pages-legacy.ts → renderJobRunsPage ("Render
+// runs."): a scrollable history of job runs, each row surfacing job type
+// (render, clip-scan, decompose, tts…), status (queued/running/succeeded/
+// failed), the linked composition/source + tracer, started-at + duration,
+// compute cost, and a logs link. Baked with representative SAMPLE runs so it
+// renders without auth.
+import { reskinDocument, rkEscape } from "./document.js";
+const SAMPLE = {
+    totalRuns: 128,
+    succeeded: 108,
+    failed: 7,
+    spendUsd: 27.6,
+    spendWindow: "last 30 days",
+    runs: [
+        { jobId: "job_a91f", type: "Timeline render", emoji: "🎬", status: "succeeded", sub: "Sunny UGC hook v3", operation: "primitive:timeline_render", tracer: "render-final", startedAt: "Jul 7, 4:12 PM", duration: "1m 04s", costUsd: 1.8 },
+        { jobId: "job_c740", type: "Clip scan", emoji: "✂️", status: "succeeded", sub: "founder-b-roll.mp4 · 14 clips tagged", operation: "clip_scan_lambda", tracer: "clip-hunt", startedAt: "Jul 7, 3:58 PM", duration: "38s", costUsd: 0.42 },
+        { jobId: "job_dd12", type: "Decompose", emoji: "🧬", status: "running", sub: "Costco haul remix", operation: "decompose", tracer: "decompose-dna", startedAt: "Jul 7, 3:40 PM", duration: "", progress: 0.71, costUsd: 0 },
+        { jobId: "job_77c2", type: "HyperFrames render", emoji: "🎞️", status: "failed", sub: "Q3 launch reel · ffprobe not found", operation: "primitive:hyperframes_render", tracer: "render-final", startedAt: "Jul 7, 2:15 PM", duration: "12s", costUsd: 0.06 },
+        { jobId: "job_9b3e", type: "Text-to-speech", emoji: "🔊", status: "succeeded", sub: "Founder VO · 320 words", operation: "primitive:tts", tracer: "vo-narration", startedAt: "Jul 7, 1:50 PM", duration: "9s", costUsd: 0.03 },
+        { jobId: "job_51aa", type: "Scene annotation", emoji: "🗂️", status: "succeeded", sub: "DTC skincare ad · 8 scenes", operation: "scene_annotation", tracer: "scene-dna", startedAt: "Jul 7, 12:30 PM", duration: "54s", costUsd: 0.71 },
+        { jobId: "job_2f08", type: "Video download", emoji: "⬇️", status: "succeeded", sub: "youtube.com/watch?v=… · URL import", operation: "primitive:video_download", tracer: "url-import", startedAt: "Jul 6, 6:22 PM", duration: "22s", costUsd: 0.08 },
+        { jobId: "job_be61", type: "Swipe customize", emoji: "🃏", status: "running", sub: "Recut: Morning routine → HydraGlow", operation: "swipe_customize", tracer: "swipe-deck", startedAt: "Jul 6, 5:10 PM", duration: "", progress: 0.33, costUsd: 0 },
+        { jobId: "job_04c9", type: "Image generate", emoji: "🖼️", status: "succeeded", sub: "hero-frame-02 · 1080×1920", operation: "primitive:image_generate", tracer: "gen-frames", startedAt: "Jul 6, 3:44 PM", duration: "7s", costUsd: 0.04 },
+        { jobId: "job_7a20", type: "Cast identification", emoji: "🎭", status: "failed", sub: "Interview cut · provider rate limit", operation: "cast_identification", tracer: "cast-isolate", startedAt: "Jul 6, 11:05 AM", duration: "4s", costUsd: 0 },
+        { jobId: "job_3d1c", type: "Speech-to-text", emoji: "📝", status: "succeeded", sub: "podcast-ep12.mp3 · word timestamps", operation: "primitive:stt", tracer: "caption-sync", startedAt: "Jul 5, 8:31 PM", duration: "41s", costUsd: 0.19 },
+        { jobId: "job_e5f7", type: "Product placement", emoji: "📦", status: "queued", sub: "SaaS dashboard promo · waiting for provider", operation: "product_placement", tracer: "placement-scout", startedAt: "Jul 5, 7:58 PM", duration: "", costUsd: 0 }
+    ]
+};
+const STATUS_META = {
+    succeeded: { label: "Succeeded", tile: "rk-tile-green", pill: "rk-pill-green", glyph: "✓" },
+    running: { label: "Running", tile: "rk-jobs-tile-run", pill: "rk-pill-gold", glyph: "●" },
+    failed: { label: "Failed", tile: "rk-jobs-tile-fail", pill: "rk-pill-red", glyph: "✕" },
+    queued: { label: "Queued", tile: "rk-tile-ink", pill: "rk-pill", glyph: "◔" }
+};
+function money(n) {
+    if (!n)
+        return "—";
+    return `$${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+}
+function statChip(count, filter, label, tone, active = false) {
+    return `<button type="button" class="rk-jobs-chip${tone}${active ? " is-active" : ""}" data-rk-filter="${filter}">
+    ${rkEscape(label)}<span class="rk-jobs-chip-n">${count}</span>
+  </button>`;
+}
+function runRow(r) {
+    const meta = STATUS_META[r.status];
+    const pct = Math.round((r.progress ?? 0) * 100);
+    const when = r.status === "running"
+        ? `<div class="rk-jobs-progress" role="progressbar" aria-valuenow="${pct}" aria-valuemin="0" aria-valuemax="100">
+         <span class="rk-jobs-progress-bar" style="width:${pct}%"></span>
+       </div>
+       <div class="rk-jobs-when-dur is-run">${pct}% done</div>`
+        : r.status === "queued"
+            ? `<div class="rk-jobs-when-dur is-wait">In queue</div>`
+            : `<div class="rk-jobs-when-dur">${rkEscape(r.duration)}</div>`;
+    return `<div class="rk-jobs-row" data-rk-status="${r.status}">
+    <span class="rk-tile ${meta.tile} rk-jobs-tile" aria-hidden="true">${meta.glyph}</span>
+    <div class="rk-jobs-main">
+      <div class="rk-jobs-row-title">
+        <span class="rk-jobs-type">${rkEscape(r.type)}</span>
+        <span class="rk-mono rk-jobs-id">${rkEscape(r.jobId)}</span>
+        <span class="rk-pill ${meta.pill}">${meta.label}</span>
+      </div>
+      <div class="rk-jobs-sub">
+        ${rkEscape(r.sub)} · <span class="rk-mono">${rkEscape(r.operation)}</span>${r.tracer ? ` · tracer <span class="rk-mono">${rkEscape(r.tracer)}</span>` : ""}
+      </div>
+    </div>
+    <div class="rk-jobs-tail">
+      <div class="rk-jobs-when">
+        <div class="rk-jobs-when-at">${rkEscape(r.startedAt)}</div>
+        ${when}
+      </div>
+      <div class="rk-jobs-cost${r.costUsd ? "" : " is-zero"}">${money(r.costUsd)}</div>
+      <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-jobs-logs">View logs</button>
+    </div>
+  </div>`;
+}
+export function renderReskinJobRuns() {
+    const s = SAMPLE;
+    const running = s.runs.filter((r) => r.status === "running").length;
+    const queued = s.runs.filter((r) => r.status === "queued").length;
+    const succeeded = s.runs.filter((r) => r.status === "succeeded").length;
+    const failed = s.runs.filter((r) => r.status === "failed").length;
+    const successRate = Math.round((s.succeeded / s.totalRuns) * 100);
+    const rows = s.runs.map(runRow).join("");
+    const body = `
+<main class="rk-container rk-page">
+  <div class="rk-page-head">
+    <span class="rk-badge">Run history &amp; health</span>
+    <h1 class="rk-h1">Job runs</h1>
+    <p class="rk-sub">Every render, clip scan, decompose and primitive job — with status, timing, and the compute it cost.</p>
+  </div>
+
+  <div class="rk-jobs-summary"><b>${s.totalRuns}</b> runs&nbsp;·&nbsp;<b>${successRate}%</b> success&nbsp;·&nbsp;<b>${s.failed}</b> failed&nbsp;·&nbsp;<b>${money(s.spendUsd)}</b> compute&nbsp;·&nbsp;<span class="rk-jobs-summary-note">last 30 days · BYO AI keys never billed</span></div>
+
+  <div class="rk-card rk-jobs-panel">
+    <div class="rk-spread rk-wrap rk-jobs-panel-head">
+      <div class="rk-jobs-filters" role="group" aria-label="Filter runs by status">
+        ${statChip(s.runs.length, "all", "All", "", true)}
+        ${statChip(succeeded, "succeeded", "Succeeded", " is-green")}
+        ${statChip(running, "running", "Running", " is-gold")}
+        ${statChip(failed, "failed", "Failed", " is-red")}
+        ${statChip(queued, "queued", "Queued", " is-ink")}
+      </div>
+      <div class="rk-row">
+        <span class="rk-pill rk-pill-gold rk-jobs-live"><span class="rk-jobs-live-dot"></span>Live</span>
+        <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-rk-refresh>↻ Refresh</button>
+      </div>
+    </div>
+
+    <div class="rk-jobs-head" aria-hidden="true">
+      <span></span>
+      <span>Run</span>
+      <span class="rk-jobs-tail rk-jobs-head-tail">
+        <span class="rk-jobs-when">Started</span>
+        <span class="rk-jobs-cost">Cost</span>
+        <span class="rk-jobs-logs-h"></span>
+      </span>
+    </div>
+
+    <div class="rk-jobs-list" data-rk-list>${rows}</div>
+    <div class="rk-jobs-empty" data-rk-empty hidden>No runs match this filter yet.</div>
+
+    <div class="rk-row rk-jobs-foot">
+      <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm">Load older runs</button>
+      <span class="rk-hint">Showing ${s.runs.length} most recent of ${s.totalRuns}</span>
+    </div>
+  </div>
+</main>`;
+    const pageCss = `
+.rk-jobs-summary{font-size:13.5px;color:var(--rk-text-muted);font-weight:500;margin-bottom:22px;line-height:1.7}
+.rk-jobs-summary b{color:var(--rk-ink);font-weight:800;font-family:var(--rk-font-display);font-size:15px;letter-spacing:-.01em}
+.rk-jobs-summary-note{color:var(--rk-text-faint)}
+.rk-jobs-panel{padding:22px 22px 18px}
+
+/* status tiles not in the shared set */
+.rk-jobs-tile{font-size:15px;font-weight:800}
+.rk-jobs-tile-run{background:var(--rk-gold-tint2);color:var(--rk-gold-700);animation:rk-jobs-pulse 1.6s var(--rk-ease) infinite}
+.rk-jobs-tile-fail{background:var(--rk-red-tint);color:#b91c1c}
+@keyframes rk-jobs-pulse{0%,100%{box-shadow:0 0 0 0 rgba(246,199,68,.55)}50%{box-shadow:0 0 0 6px rgba(246,199,68,0)}}
+
+/* filter chips */
+.rk-jobs-panel-head{margin-bottom:18px}
+.rk-jobs-filters{display:flex;flex-wrap:wrap;gap:8px}
+.rk-jobs-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--rk-r-full);
+  font-family:var(--rk-font-body);font-size:13px;font-weight:600;color:var(--rk-n-600);cursor:pointer;
+  background:#fff;border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xs);
+  transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-jobs-chip:hover{border-color:var(--rk-border-strong)}
+.rk-jobs-chip-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--rk-r-full);
+  background:var(--rk-n-100);color:var(--rk-n-600);font-size:11px;font-weight:700}
+.rk-jobs-chip.is-active{background:var(--rk-ink);color:#fff;border-color:var(--rk-ink)}
+.rk-jobs-chip.is-active .rk-jobs-chip-n{background:#ffffff26;color:#fff}
+.rk-jobs-chip.is-green.is-active{background:#15803d;border-color:#15803d}
+.rk-jobs-chip.is-gold.is-active{background:var(--rk-gold-500);border-color:var(--rk-gold-500);color:var(--rk-ink)}
+.rk-jobs-chip.is-gold.is-active .rk-jobs-chip-n{background:#00000012;color:var(--rk-ink)}
+.rk-jobs-chip.is-red.is-active{background:#b91c1c;border-color:#b91c1c}
+.rk-jobs-chip.is-ink.is-active{background:var(--rk-n-700);border-color:var(--rk-n-700)}
+
+.rk-jobs-live{gap:7px}
+.rk-jobs-live-dot{width:7px;height:7px;border-radius:50%;background:var(--rk-gold-700);animation:rk-jobs-pulse 1.6s var(--rk-ease) infinite}
+
+/* table-ish column header — 5 tracks that the display:contents tail flows into */
+.rk-jobs-head{display:grid;grid-template-columns:44px minmax(0,1fr) 156px 78px auto;gap:16px;align-items:center;
+  padding:0 16px 10px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--rk-text-faint)}
+.rk-jobs-head .rk-jobs-when{justify-items:start;text-align:left}
+.rk-jobs-head .rk-jobs-cost{text-align:right}
+
+/* run rows */
+.rk-jobs-list{display:grid;gap:10px}
+.rk-jobs-row{display:grid;grid-template-columns:44px minmax(0,1fr) 156px 78px auto;gap:16px;align-items:center;
+  padding:14px 16px;background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);
+  box-shadow:var(--rk-shadow-xs);transition:box-shadow var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-jobs-row:hover{box-shadow:var(--rk-shadow-md);border-color:var(--rk-border-strong)}
+.rk-jobs-row[data-rk-status="running"]{border-color:var(--rk-gold-tint2);background:linear-gradient(180deg,var(--rk-gold-tint) 0%,#fff 42%)}
+.rk-jobs-main{min-width:0}
+.rk-jobs-row-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:4px}
+.rk-jobs-emoji{font-size:15px;line-height:1}
+.rk-jobs-type{font-family:var(--rk-font-display);font-weight:700;font-size:15px;color:var(--rk-ink);letter-spacing:-.01em}
+.rk-jobs-id{font-size:12px;color:var(--rk-text-faint)}
+.rk-jobs-sub{font-size:13px;color:var(--rk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+
+.rk-jobs-tail{display:contents}
+.rk-jobs-when{width:156px;display:grid;gap:5px;justify-items:end;text-align:right}
+.rk-jobs-when-at{font-size:13px;font-weight:600;color:var(--rk-n-700)}
+.rk-jobs-when-dur{font-size:12px;color:var(--rk-text-muted)}
+.rk-jobs-when-dur.is-run{color:var(--rk-gold-700);font-weight:700}
+.rk-jobs-when-dur.is-wait{color:var(--rk-text-faint)}
+.rk-jobs-progress{width:100%;height:6px;border-radius:var(--rk-r-full);background:var(--rk-gold-tint2);overflow:hidden}
+.rk-jobs-progress-bar{display:block;height:100%;border-radius:var(--rk-r-full);
+  background:linear-gradient(90deg,var(--rk-gold-500),var(--rk-gold-700))}
+.rk-jobs-cost{width:78px;text-align:right;font-family:var(--rk-font-display);font-weight:700;font-size:15px;color:var(--rk-n-700)}
+.rk-jobs-cost.is-zero{color:var(--rk-text-faint);font-weight:500}
+.rk-jobs-logs{flex:none}
+
+.rk-jobs-empty{padding:40px 16px;text-align:center;color:var(--rk-text-muted);font-size:14px}
+.rk-jobs-foot{margin-top:16px;justify-content:space-between}
+
+@media(max-width:780px){
+  .rk-jobs-head{display:none}
+  .rk-jobs-row{grid-template-columns:44px minmax(0,1fr);row-gap:12px}
+  .rk-jobs-tail{display:flex;grid-column:1 / -1;flex-wrap:wrap;align-items:center;gap:14px;padding-left:60px}
+  .rk-jobs-when{width:auto;justify-items:start;text-align:left}
+  .rk-jobs-progress{width:120px}
+  .rk-jobs-cost{width:auto;text-align:left}
+  .rk-jobs-logs{margin-left:auto}
+}
+@media(max-width:520px){
+  .rk-jobs-foot{flex-direction:column;align-items:flex-start;gap:10px}
+}
+`;
+    const script = `
+(function(){
+  var root=document;
+  var list=root.querySelector('[data-rk-list]');
+  var empty=root.querySelector('[data-rk-empty]');
+  root.querySelectorAll('[data-rk-filter]').forEach(function(btn){
+    btn.addEventListener('click',function(){
+      var f=btn.getAttribute('data-rk-filter');
+      root.querySelectorAll('[data-rk-filter]').forEach(function(b){b.classList.toggle('is-active',b===btn)});
+      var shown=0;
+      root.querySelectorAll('[data-rk-status]').forEach(function(row){
+        var match=f==='all'||row.getAttribute('data-rk-status')===f;
+        row.hidden=!match; if(match)shown++;
+      });
+      if(empty)empty.hidden=shown!==0;
+    });
+  });
+  var refresh=root.querySelector('[data-rk-refresh]');
+  if(refresh)refresh.addEventListener('click',function(){
+    var t=refresh.textContent; refresh.textContent='↻ Refreshing…';
+    setTimeout(function(){refresh.textContent=t},900);
+  });
+})();`;
+    return reskinDocument({
+        title: "vidfarm reskin — Job runs",
+        description: "Reskinned vidfarm job runs page — render & job history, status, timing, and compute cost.",
+        activeSlug: "job-runs",
+        pageCss,
+        body,
+        script
+    });
+}
+//# sourceMappingURL=job-runs-page.js.map