CxWebApp/static/js/panes/demand.js

// panes/demand.js — cxai-demand jobs.
import { registerPane } from '../app.js';
import { jget, jpost, escapeHtml, statusClass } from '../lib/api.js';
import { ok, err, fmtJSON } from '../lib/ui.js';

const TPL = `
  <div class="pane-head">
    <div><div class="title">Demand</div><div class="sub">Trend-driven design jobs.</div></div>
    <div class="grow"></div>
    <button class="btn btn-secondary" id="demand-refresh">Refresh</button>
  </div>

  <div class="grid cols-2">
    <div class="card">
      <div class="card-title"><h2>Run config</h2><span class="muted" id="demand-status">—</span></div>
      <form id="demand-form" class="grid cols-2 gap-3">
        <label class="field"><span class="lbl">Designs per run</span><input class="input" id="demand-count" type="number" min="1" value="3"/></label>
        <label class="field"><span class="lbl">Top trends</span><input class="input" id="demand-top" type="number"/></label>
        <label class="field"><span class="lbl">Variations / trend</span><input class="input" id="demand-var" type="number"/></label>
        <label class="field"><span class="lbl">Min score</span><input class="input" id="demand-min" type="number" step="0.01"/></label>
        <label class="field" style="grid-column: span 2">
          <span class="lbl">Platform</span>
          <select class="input" id="demand-platform"></select>
        </label>
        <label class="check"><input type="checkbox" id="demand-dry"/> dry-run</label>
        <label class="check"><input type="checkbox" id="demand-up"/> upload</label>
        <label class="check"><input type="checkbox" id="demand-web"/> web trends</label>
        <label class="check"><input type="checkbox" id="demand-q"/> quantum</label>
        <button class="btn btn-primary" type="submit" style="grid-column: span 2">Queue run</button>
      </form>
    </div>

    <div class="card">
      <div class="card-title"><h2>Jobs</h2></div>
      <div id="demand-jobs" class="scroll" style="max-height:50vh">…</div>
    </div>
  </div>

  <div class="card mt-3">
    <div class="card-title"><h2>Reports</h2></div>
    <div class="grid cols-2 gap-3">
      <div id="demand-reports" class="scroll" style="max-height:40vh"></div>
      <pre id="demand-report-body" class="muted">select a report</pre>
    </div>
  </div>
`;

function num(v) { if (v === '' || v == null) return null; const n = +v; return Number.isFinite(n) ? n : null; }

async function loadJobs(host) {
  try {
    const r = await jget('/api/demand/runs');
    host.querySelector('#demand-jobs').innerHTML = (r.jobs || []).map(j => {
      const dur = j.finished_at && j.started_at ? `${(j.finished_at - j.started_at).toFixed(1)}s`
                : (j.status === 'running' ? '…' : '—');
      return `<div class="row">
        <span class="mono muted">${escapeHtml(j.id)}</span>
        <span class="pill ${statusClass(j.status)}">${escapeHtml(j.status)}</span>
        <span class="muted mono">${dur}</span>
        <div class="grow desc">${escapeHtml(j.report_path || j.error || '')}</div>
      </div>`;
    }).join('') || '<div class="muted" style="padding:12px">no jobs yet</div>';
  } catch (e) {
    host.querySelector('#demand-jobs').innerHTML = `<div class="muted">${escapeHtml(e.message)}</div>`;
  }
}

async function loadReports(host) {
  try {
    const r = await jget('/api/demand/reports');
    host.querySelector('#demand-reports').innerHTML = (r.reports || []).map(it =>
      `<div class="row"><a href="#" data-name="${escapeHtml(it.name)}" class="report-link grow">${escapeHtml(it.name)}</a><span class="muted mono">${it.size}b</span></div>`
    ).join('') || '<div class="muted" style="padding:12px">no reports</div>';
    host.querySelectorAll('.report-link').forEach(b => {
      b.addEventListener('click', async (e) => {
        e.preventDefault();
        try { host.querySelector('#demand-report-body').textContent = fmtJSON(await jget('/api/demand/reports/' + b.dataset.name)); }
        catch (e) { host.querySelector('#demand-report-body').textContent = e.message; }
      });
    });
  } catch (e) {
    host.querySelector('#demand-reports').innerHTML = `<div class="muted">${escapeHtml(e.message)}</div>`;
  }
}

async function refresh(host) {
  try {
    const platforms = (await jget('/api/demand/platforms')).platforms || [];
    const sel = host.querySelector('#demand-platform');
    if (sel && sel.children.length === 0) {
      sel.innerHTML = `<option value="">(default)</option>` + platforms.map(p => `<option value="${p}">${p}</option>`).join('');
    }
    await loadJobs(host); await loadReports(host);
  } catch (e) {
    host.querySelector('#demand-status').textContent = 'upstream unavailable: ' + e.message;
  }
}

registerPane('demand', {
  label: 'Demand',
  init(host) {
    host.innerHTML = TPL;
    host.querySelector('#demand-refresh').addEventListener('click', () => refresh(host));
    host.querySelector('#demand-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const body = {
        designs_per_run: +host.querySelector('#demand-count').value || 0,
        top_trends: num(host.querySelector('#demand-top').value),
        variations_per_trend: num(host.querySelector('#demand-var').value),
        min_score: num(host.querySelector('#demand-min').value),
        platform: host.querySelector('#demand-platform').value || null,
        dry_run: host.querySelector('#demand-dry').checked,
        upload: host.querySelector('#demand-up').checked,
        web_trends: host.querySelector('#demand-web').checked,
        quantum: host.querySelector('#demand-q').checked,
      };
      try {
        const r = await jpost('/api/demand/runs', body);
        host.querySelector('#demand-status').textContent = `queued: ${r.job_id}`;
        ok(`queued ${r.job_id}`);
        await loadJobs(host);
      } catch (e) { host.querySelector('#demand-status').textContent = 'error: ' + e.message; err(e.message); }
    });
    refresh(host);
  },
  refresh,
});