@mevdragon/vidfarm-devcli 0.20.6 → 0.20.9

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

@@ -1,477 +0,0 @@
-// /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