@mevdragon/vidfarm-devcli 0.17.0 → 0.18.1

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

@@ -1,115 +1,94 @@
-// /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.
+// /reskin/job-runs — render & job history / health, MIGRATED to real production
+// data (part of the /reskin/* UX migration; reference: settings-page.ts).
 //
-// 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.
+// Like the live page (src/account-pages-legacy.ts → renderJobRunsPage), this
+// renders a SHELL then CLIENT-FETCHES the real history from `input.loadEndpoint`
+// (`/job-runs/history?limit=250`, same-origin, credentials). The endpoint
+// returns `{ entries, storage_driver, next_cursor }`; each entry is an
+// api-call-history row (`id, method, path, routePrefix, tracer, jobId, status,
+// durationMs, request, response, mediaUrls, outputMediaUrls, createdAt`) with an
+// optional resolved `linkedJob` ({ job_id, template_id, operation_name,
+// workflow_name, tracer, status, progress, started_at, completed_at,
+// billing.consumed_usd, ... }). We map each entry into a farmville run row —
+// status tile (✓/●/✕/◔), friendly type + job id, primitive/tracer sub-meta,
+// started + duration, REAL compute cost from `linkedJob.billing.consumed_usd`,
+// and an inline "View logs" details panel. Summary counts + compute total are
+// recomputed from the real data; the status filter runs over the real rows.
+//
+// The renderer takes the SAME input the live route builds
+// (`Parameters<typeof renderJobRunsPage>[0]`) and defaults it, so the existing
+// zero-arg `/reskin/job-runs` route keeps working (it fetches the live endpoint
+// client-side). NOTE: `linkedJob.billing` is present at RUNTIME on the real
+// endpoint but omitted from the declared input type — the client reads it off
+// the parsed JSON, so cost is real, not mocked.
 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: "◔" }
+const DEFAULT_INPUT = {
+    userId: "",
+    currentAccountId: "",
+    name: null,
+    email: "",
+    storageDriver: "s3",
+    loadEndpoint: "/job-runs/history?limit=250",
+    jobs: [],
+    apiCallHistory: []
 };
-function money(n) {
-    if (!n)
-        return "—";
-    return `$${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+/** Safe JSON embedding inside a <script> tag (mirrors page-shell.escapeJsonForHtml). */
+function jsonForScript(value) {
+    return JSON.stringify(value ?? null)
+        .replace(/</g, "\\u003c")
+        .replace(/>/g, "\\u003e")
+        .replace(/&/g, "\\u0026")
+        .replace(/\u2028/g, "\\u2028")
+        .replace(/\u2029/g, "\\u2029");
 }
-function statChip(count, filter, label, tone, active = false) {
+/** Server-rendered filter chip (counts start at 0; the client fills them). */
+function statChip(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>
+    ${rkEscape(label)}<span class="rk-jobs-chip-n" data-rk-count="${filter}">0</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("");
+export function renderReskinJobRuns(input = DEFAULT_INPUT) {
+    const loadEndpoint = input.loadEndpoint || "/job-runs/history?limit=250";
+    const accountId = input.currentAccountId || "";
+    const storageDriver = input.storageDriver || "s3";
+    const seed = Array.isArray(input.apiCallHistory) ? input.apiCallHistory : [];
+    const boot = { loadEndpoint, accountId, storageDriver, entries: seed };
     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>
+  ${jobRunsPanel(boot)}
+</main>`;
+    return reskinDocument({
+        title: "vidfarm reskin — Job runs",
+        description: "Reskinned vidfarm job runs page — real render & job history, status, timing, and compute cost.",
+        activeSlug: "job-runs",
+        pageCss: JOBRUNS_PAGE_CSS,
+        body,
+        script: JOBRUNS_SCRIPT
+    });
+}
+// The runs panel (summary + filterable list + boot JSON), WITHOUT the page
+// <main>/head — so it can be embedded standalone (renderReskinJobRuns) OR folded
+// into the Library "Logs" tab (library-page.ts). Hoisted; safe to call above.
+export function jobRunsPanel(boot) {
+    return `
+  <div class="rk-jobs-summary" data-rk-summary>Loading run history&hellip;</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")}
+        ${statChip("all", "All", "", true)}
+        ${statChip("succeeded", "Succeeded", " is-green")}
+        ${statChip("running", "Running", " is-gold")}
+        ${statChip("failed", "Failed", " is-red")}
+        ${statChip("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>
+        <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-rk-refresh>&#8635; Refresh</button>
       </div>
     </div>
 
@@ -123,17 +102,20 @@ export function renderReskinJobRuns() {
       </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-jobs-list" data-rk-list></div>
+    <div class="rk-jobs-state" data-rk-state>Loading run history&hellip;</div>
+    <div class="rk-jobs-empty" data-rk-empty hidden>No runs match this filter.</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>
+      <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-rk-more hidden>Load older runs</button>
+      <span class="rk-hint" data-rk-count-foot></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}
+
+  <script type="application/json" data-rk-jobs-boot>${jsonForScript(boot)}</script>`;
+}
+export const JOBRUNS_PAGE_CSS = `
+.rk-jobs-summary{font-size:13.5px;color:var(--rk-text-muted);font-weight:500;margin-bottom:22px;line-height:1.7;min-height:24px}
 .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}
@@ -173,14 +155,15 @@ export function renderReskinJobRuns() {
 
 /* run rows */
 .rk-jobs-list{display:grid;gap:10px}
+.rk-jobs-item{min-width:0}
+.rk-jobs-item[hidden]{display:none}
 .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-item[data-rk-status="running"] .rk-jobs-row{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}
@@ -198,8 +181,28 @@ export function renderReskinJobRuns() {
 .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}
+/* inline "View logs" details panel */
+.rk-jobs-details{margin-top:8px;padding:14px 16px;background:var(--rk-n-50);border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-2xl);display:grid;gap:8px;font-size:13px}
+.rk-jobs-details[hidden]{display:none}
+.rk-jobs-detail-row{display:flex;gap:12px;align-items:baseline}
+.rk-jobs-detail-k{flex:none;min-width:96px;color:var(--rk-text-faint);font-weight:800;font-size:10.5px;
+  letter-spacing:.06em;text-transform:uppercase;padding-top:1px}
+.rk-jobs-detail-v{color:var(--rk-n-700);word-break:break-word;min-width:0;font-family:var(--rk-font-mono);font-size:12.5px}
+.rk-jobs-detail-media{display:flex;flex-wrap:wrap;gap:8px}
+.rk-jobs-detail-media a{font-family:var(--rk-font-body);font-size:12px;font-weight:600;color:#1d6fb8;
+  padding:3px 10px;border-radius:var(--rk-r-full);background:var(--rk-sky-tint)}
+
+/* load / empty / error states */
+.rk-jobs-state{padding:44px 16px;text-align:center;color:var(--rk-text-muted);font-size:14px;
+  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-xs)}
+.rk-jobs-state[hidden]{display:none}
+.rk-jobs-state.is-error{color:#b91c1c;background:var(--rk-red-tint);border-color:#fecaca;font-weight:500}
+.rk-jobs-empty{padding:36px 16px;text-align:center;color:var(--rk-text-muted);font-size:14px}
+.rk-jobs-empty[hidden]{display:none}
 .rk-jobs-foot{margin-top:16px;justify-content:space-between}
+/* .rk-btn sets display:inline-flex, which beats the UA [hidden] rule — force it */
+[data-rk-more][hidden]{display:none}
 
 @media(max-width:780px){
   .rk-jobs-head{display:none}
@@ -214,36 +217,261 @@ export function renderReskinJobRuns() {
   .rk-jobs-foot{flex-direction:column;align-items:flex-start;gap:10px}
 }
 `;
-    const script = `
+export const JOBRUNS_SCRIPT = `
 (function(){
   var root=document;
-  var list=root.querySelector('[data-rk-list]');
-  var empty=root.querySelector('[data-rk-empty]');
+  var bootEl=root.querySelector('[data-rk-jobs-boot]');
+  var boot={};
+  try{ boot=JSON.parse(bootEl&&bootEl.textContent?bootEl.textContent:'{}'); }catch(e){ boot={}; }
+  var loadEndpoint=boot.loadEndpoint||'/job-runs/history?limit=250';
+  var accountId=boot.accountId||'';
+
+  var listEl=root.querySelector('[data-rk-list]');
+  var stateEl=root.querySelector('[data-rk-state]');
+  var emptyEl=root.querySelector('[data-rk-empty]');
+  var summaryEl=root.querySelector('[data-rk-summary]');
+  var footEl=root.querySelector('[data-rk-count-foot]');
+  var moreBtn=root.querySelector('[data-rk-more]');
+  var refreshBtn=root.querySelector('[data-rk-refresh]');
+
+  var state={ entries:[], filter:'all', nextCursor:null, loading:false, error:null };
+
+  function esc(v){ return String(v==null?'':v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;'); }
+  function money(n){ n=Number(n)||0; if(!n) return '\\u2014'; return '$'+n.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}); }
+  function humanMs(ms){ ms=Number(ms)||0; if(ms<1000) return ms+'ms'; var s=Math.round(ms/1000); if(s<60) return s+'s'; var m=Math.floor(s/60); var r=s%60; return m+'m '+(r<10?'0':'')+r+'s'; }
+  function whenText(iso){ var t=Date.parse(iso); if(isNaN(t)) return ''; var d=new Date(t); return d.toLocaleDateString('en-US',{month:'short',day:'numeric'})+', '+d.toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'}); }
+  function shortId(id){ id=String(id||''); return id.length>18? id.slice(0,16)+'\\u2026' : id; }
+
+  var TYPE_MAP={timeline_render:'Timeline render',hyperframes_render:'HyperFrames render',still_render:'Still render',render_still:'Still render',clip_scan_lambda:'Clip scan',clip_scan:'Clip scan',decompose:'Decompose',scene_annotation:'Scene annotation',cast_identification:'Cast identification',product_placement:'Product placement',swipe_customize:'Swipe customize',tts:'Text-to-speech',stt:'Speech-to-text',image_generate:'Image generate',image_edit:'Image edit',video_download:'Video download',video_generate:'Video generate',render_slides:'Slide render',captions:'Animated captions',transcribe:'Transcribe',speech:'Narration',regenerate_speech:'Revoice narration',remove_captions:'Caption removal',dedupe:'Media dedupe'};
+  function prettify(raw){
+    raw=String(raw||'').replace(/^primitive:/,'').trim();
+    if(!raw) return 'Job';
+    var key=raw.split('/').filter(Boolean).pop()||raw;
+    key=key.replace(/:/g,'_');
+    if(TYPE_MAP[key]) return TYPE_MAP[key];
+    var words=key.split(/[_\\-\\s]+/).filter(Boolean);
+    if(!words.length) return 'Job';
+    return words.map(function(w,i){ return i===0? (w.charAt(0).toUpperCase()+w.slice(1)) : w.toLowerCase(); }).join(' ');
+  }
+  function typeLabel(entry){
+    var j=entry.linkedJob;
+    var raw=(j&&(j.operation_name||j.workflow_name||j.template_id))||'';
+    if(!raw) raw=entry.routePrefix||entry.path||'';
+    return prettify(raw);
+  }
+  function operationStr(entry){
+    var j=entry.linkedJob;
+    return String((j&&(j.template_id||j.operation_name))||entry.routePrefix||entry.path||'\\u2014');
+  }
+  function runStatus(entry){
+    var j=entry.linkedJob;
+    if(j&&j.status){
+      var s=String(j.status).toLowerCase();
+      if(s==='failed'||s==='cancelled'||s==='canceled'||s==='error') return 'failed';
+      if(s==='queued'||s==='pending') return 'queued';
+      if(s==='running'||s.indexOf('waiting')===0) return 'running';
+      if(s==='succeeded'||s==='success'||s==='completed'||s==='done') return 'succeeded';
+      return 'running';
+    }
+    var http=Number(entry.status)||0;
+    if(http>=400) return 'failed';
+    if(http===202) return 'queued';
+    if(http>=200&&http<300) return 'succeeded';
+    return 'failed';
+  }
+  function costOf(entry){ var j=entry.linkedJob; return (j&&j.billing&&Number(j.billing.consumed_usd))||0; }
+  function durationText(entry){
+    var j=entry.linkedJob;
+    if(j&&j.started_at&&j.completed_at){ var ms=Date.parse(j.completed_at)-Date.parse(j.started_at); if(ms>=0) return humanMs(ms); }
+    if(entry.durationMs&&entry.durationMs>0) return humanMs(entry.durationMs);
+    return '';
+  }
+
+  var STATUS_META={
+    succeeded:{label:'Succeeded',tile:'rk-tile-green',pill:'rk-pill-green',glyph:'\\u2713'},
+    running:{label:'Running',tile:'rk-jobs-tile-run',pill:'rk-pill-gold',glyph:'\\u25CF'},
+    failed:{label:'Failed',tile:'rk-jobs-tile-fail',pill:'rk-pill-red',glyph:'\\u2715'},
+    queued:{label:'Queued',tile:'rk-tile-ink',pill:'rk-pill',glyph:'\\u25D4'}
+  };
+
+  function normalize(entry){
+    var j=entry.linkedJob||null;
+    var status=runStatus(entry);
+    var media=(Array.isArray(entry.outputMediaUrls)&&entry.outputMediaUrls.length)?entry.outputMediaUrls:(Array.isArray(entry.mediaUrls)?entry.mediaUrls:[]);
+    return {
+      status:status,
+      type:typeLabel(entry),
+      jobId:String(entry.jobId||(j&&j.job_id)||entry.id||''),
+      operation:operationStr(entry),
+      tracer:String(entry.tracer||(j&&j.tracer)||''),
+      when:whenText(entry.createdAt||(j&&j.created_at)),
+      duration:durationText(entry),
+      progress:(j&&typeof j.progress==='number')?j.progress:0,
+      cost:costOf(entry),
+      method:String(entry.method||''),
+      path:String(entry.path||''),
+      httpStatus:Number(entry.status)||0,
+      workflow:(j&&j.workflow_name)||'',
+      jobStatus:(j&&j.status)||'',
+      eventCount:(j&&j.billing&&Number(j.billing.event_count))||0,
+      media:media
+    };
+  }
+
+  function detailRow(k,v){ return '<div class="rk-jobs-detail-row"><span class="rk-jobs-detail-k">'+k+'</span><span class="rk-jobs-detail-v">'+v+'</span></div>'; }
+
+  function rowHtml(n){
+    var meta=STATUS_META[n.status]||STATUS_META.queued;
+    var pct=Math.max(0,Math.min(100,Math.round((n.progress||0)*100)));
+    var when = n.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>'
+      : n.status==='queued'
+        ? '<div class="rk-jobs-when-dur is-wait">In queue</div>'
+        : '<div class="rk-jobs-when-dur">'+esc(n.duration||'\\u2014')+'</div>';
+    var sub = '<span class="rk-mono">'+esc(n.operation)+'</span>'+(n.tracer?' \\u00b7 tracer <span class="rk-mono">'+esc(n.tracer)+'</span>':'');
+
+    var det = detailRow('HTTP', esc(n.method)+' '+esc(n.path)+' \\u2192 '+esc(n.httpStatus||'\\u2014'))
+      + detailRow('Job', esc(n.jobId||'\\u2014'))
+      + detailRow('Operation', esc(n.operation))
+      + (n.workflow?detailRow('Workflow', esc(n.workflow)):'')
+      + (n.tracer?detailRow('Tracer', esc(n.tracer)):'')
+      + detailRow('Job status', esc(n.jobStatus||n.status))
+      + detailRow('Started', esc(n.when||'\\u2014'))
+      + (n.duration?detailRow('Duration', esc(n.duration)):'')
+      + detailRow('Compute', esc(money(n.cost))+(n.eventCount?(' \\u00b7 '+n.eventCount+' event'+(n.eventCount===1?'':'s')):''))
+      + (n.media.length?detailRow('Output', '<span class="rk-jobs-detail-media">'+n.media.map(function(u){return '<a href="'+esc(u)+'" target="_blank" rel="noreferrer">Open \\u2197</a>';}).join('')+'</span>'):'');
+
+    return '<div class="rk-jobs-item" data-rk-status="'+n.status+'">'
+      + '<div class="rk-jobs-row">'
+        + '<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">'+esc(n.type)+'</span><span class="rk-mono rk-jobs-id" title="'+esc(n.jobId)+'">'+esc(shortId(n.jobId))+'</span><span class="rk-pill '+meta.pill+'">'+meta.label+'</span></div>'
+          + '<div class="rk-jobs-sub">'+sub+'</div>'
+        + '</div>'
+        + '<div class="rk-jobs-tail">'
+          + '<div class="rk-jobs-when"><div class="rk-jobs-when-at">'+esc(n.when||'\\u2014')+'</div>'+when+'</div>'
+          + '<div class="rk-jobs-cost'+(n.cost?'':' is-zero')+'">'+esc(money(n.cost))+'</div>'
+          + '<button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-jobs-logs" data-rk-logs>View logs</button>'
+        + '</div>'
+      + '</div>'
+      + '<div class="rk-jobs-details" data-rk-details hidden>'+det+'</div>'
+    + '</div>';
+  }
+
+  function computeCounts(){
+    var c={all:state.entries.length,succeeded:0,running:0,failed:0,queued:0};
+    state.entries.forEach(function(e){ var s=runStatus(e); if(c[s]!=null) c[s]++; });
+    return c;
+  }
+
+  function updateSummary(){
+    var c=computeCounts();
+    root.querySelectorAll('[data-rk-count]').forEach(function(el){ var k=el.getAttribute('data-rk-count'); el.textContent = (c[k]!=null?c[k]:0); });
+    if(!summaryEl) return;
+    if(state.loading&&state.entries.length===0){ summaryEl.innerHTML='Loading run history\\u2026'; return; }
+    if(state.error&&state.entries.length===0){ summaryEl.innerHTML=esc(state.error); return; }
+    var compute=0; state.entries.forEach(function(e){ compute+=costOf(e); });
+    var completed=c.succeeded+c.failed;
+    var rate=completed?Math.round(c.succeeded/completed*100)+'%':'\\u2014';
+    summaryEl.innerHTML='<b>'+c.all+'</b> runs&nbsp;\\u00b7&nbsp;<b>'+rate+'</b> success&nbsp;\\u00b7&nbsp;<b>'+c.failed+'</b> failed&nbsp;\\u00b7&nbsp;<b>'+esc(money(compute))+'</b> compute&nbsp;\\u00b7&nbsp;<span class="rk-jobs-summary-note">most recent '+c.all+' \\u00b7 BYO AI keys never billed</span>';
+  }
+
+  function applyFilter(){
+    var shown=0;
+    listEl.querySelectorAll('.rk-jobs-item').forEach(function(w){
+      var m=state.filter==='all'||w.getAttribute('data-rk-status')===state.filter;
+      w.hidden=!m; if(m) shown++;
+    });
+    if(emptyEl) emptyEl.hidden = shown!==0 || state.entries.length===0;
+  }
+
+  function wireRows(){
+    listEl.querySelectorAll('[data-rk-logs]').forEach(function(btn){
+      btn.addEventListener('click',function(){
+        var item=btn.closest('.rk-jobs-item'); if(!item) return;
+        var det=item.querySelector('[data-rk-details]'); if(!det) return;
+        var willShow=det.hidden; det.hidden=!willShow;
+        btn.textContent=willShow?'Hide logs':'View logs';
+      });
+    });
+  }
+
+  function setStateMsg(msg,isError){
+    if(!stateEl) return;
+    stateEl.textContent=msg;
+    stateEl.hidden=false;
+    stateEl.classList.toggle('is-error',!!isError);
+    if(listEl) listEl.innerHTML='';
+    if(emptyEl) emptyEl.hidden=true;
+  }
+  function hideStateMsg(){ if(stateEl) stateEl.hidden=true; }
+
+  function render(){
+    updateSummary();
+    if(footEl) footEl.textContent = state.entries.length? ('Showing '+state.entries.length+' most recent'+(state.nextCursor?' \\u00b7 more available':'')) : '';
+    if(moreBtn) moreBtn.hidden = !state.nextCursor;
+
+    if(state.loading&&state.entries.length===0){ setStateMsg('Loading run history\\u2026',false); return; }
+    if(state.error&&state.entries.length===0){ setStateMsg(state.error,true); return; }
+    if(state.entries.length===0){ setStateMsg('No runs yet \\u2014 fire a render, clip scan, or decompose and it will show up here.',false); return; }
+
+    hideStateMsg();
+    listEl.innerHTML = state.entries.map(function(e){ return rowHtml(normalize(e)); }).join('');
+    wireRows();
+    applyFilter();
+  }
+
+  function load(cursor){
+    state.loading=true; state.error=null;
+    if(!cursor) render();
+    if(refreshBtn){ refreshBtn.disabled=true; }
+    var href=loadEndpoint;
+    try{
+      var url=new URL(loadEndpoint, window.location.href);
+      if(accountId) url.searchParams.set('account', accountId);
+      if(cursor) url.searchParams.set('cursor', cursor);
+      href=url.toString();
+    }catch(e){ href=loadEndpoint; }
+    fetch(href,{credentials:'same-origin',headers:{'accept':'application/json'}})
+      .then(function(r){
+        if(!r.ok){ throw new Error(r.status===401?'Sign in to view your run history.':('Couldn\\'t load run history ('+r.status+').')); }
+        return r.json();
+      })
+      .then(function(j){
+        var entries=(j&&Array.isArray(j.entries))?j.entries:[];
+        state.entries = cursor? state.entries.concat(entries) : entries;
+        state.nextCursor = (j&&j.next_cursor)?j.next_cursor:null;
+        state.loading=false; state.error=null;
+        if(refreshBtn){ refreshBtn.disabled=false; }
+        render();
+      })
+      .catch(function(err){
+        state.loading=false;
+        var msg=(err&&err.message)?String(err.message):'';
+        // Raw network TypeErrors ("Failed to fetch") aren't user-friendly.
+        state.error=(!msg||/failed to fetch|networkerror|load failed/i.test(msg))
+          ? "Couldn't reach the server \\u2014 check your connection, or sign in to view your run history."
+          : msg;
+        if(refreshBtn){ refreshBtn.disabled=false; }
+        render();
+      });
+  }
+
+  // filter chips (work over the real, client-rendered rows)
   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;
+      state.filter=btn.getAttribute('data-rk-filter');
+      root.querySelectorAll('[data-rk-filter]').forEach(function(b){ b.classList.toggle('is-active',b===btn); });
+      applyFilter();
     });
   });
-  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);
-  });
+  if(refreshBtn) refreshBtn.addEventListener('click',function(){ load(); });
+  if(moreBtn) moreBtn.addEventListener('click',function(){ if(state.nextCursor) load(state.nextCursor); });
+
+  // boot: render a server seed immediately if present (mirrors the live page),
+  // otherwise fetch the real endpoint. Refresh always re-fetches.
+  state.entries = Array.isArray(boot.entries)? boot.entries : [];
+  if(state.entries.length){ render(); }
+  else { state.loading=true; render(); load(); }
 })();`;
-    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