@mevdragon/vidfarm-devcli 0.16.0 → 0.18.0

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

@@ -0,0 +1,477 @@
+// /reskin/job-runs — render & job history / health, MIGRATED to real production
+// data (part of the /reskin/* UX migration; reference: settings-page.ts).
+//
+// 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 DEFAULT_INPUT = {
+    userId: "",
+    currentAccountId: "",
+    name: null,
+    email: "",
+    storageDriver: "s3",
+    loadEndpoint: "/job-runs/history?limit=250",
+    jobs: [],
+    apiCallHistory: []
+};
+/** 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");
+}
+/** 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" data-rk-count="${filter}">0</span>
+  </button>`;
+}
+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">
+    <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>
+  ${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("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>&#8635; 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></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" data-rk-more hidden>Load older runs</button>
+      <span class="rk-hint" data-rk-count-foot></span>
+    </div>
+  </div>
+
+  <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}
+
+/* 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-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-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-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}
+
+/* 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}
+  .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}
+}
+`;
+export const JOBRUNS_SCRIPT = `
+(function(){
+  var root=document;
+  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(){
+      state.filter=btn.getAttribute('data-rk-filter');
+      root.querySelectorAll('[data-rk-filter]').forEach(function(b){ b.classList.toggle('is-active',b===btn); });
+      applyFilter();
+    });
+  });
+  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(); }
+})();`;
+//# sourceMappingURL=job-runs-page.js.map