Function buildDashboardHtml

src/cli/dashboard.ts:46–287

(d: DashboardData, opts: { token?: string } = {})

/** Render the dashboard as one self-contained HTML page (PURE). Chart.js via CDN; everything else
 *  inline. When `token` is given the page is a live CONTROL panel (toggles/buttons call the local
 *  API); without it the same page renders read-only. */
export function buildDashboardHtml(d: DashboardData, opts: { token?: string } = {}): string {
  const live = !!opts.token;
  const card = (label: string, value: string, accent: string) =>
    `<div class="card"><div class="v" style="color:${accent}">${value}</div><div class="l">${label}</div></div>`;

  // ── Controls: config toggles/selects grouped, + scheduled tasks with enable/remove ──
  const groups = [...new Set(d.controls.map(c => c.group))];
  const controlPanel = d.controls.length === 0 ? '' : groups.map(g => {
    const rows = d.controls.filter(c => c.group === g).map(c => {
      if (c.type === 'bool') {
        const on = c.current === 'true';
        const btn = live
          ? `<button class="tg ${on ? 'on' : ''}" onclick="act('config.set',{key:'${c.path}',value:${!on}})">${on ? 'ON' : 'OFF'}</button>`
          : `<span class="${on ? 'ok' : 'dim'}">${on ? 'ON' : 'OFF'}</span>`;
        return `<div class="ctl"><span>${esc(c.label)}</span>${btn}</div>`;
      }
      const sel = live
        ? `<select onchange="act('config.set',{key:'${c.path}',value:this.value})">${(c.values ?? []).map(v => `<option${v === c.current ? ' selected' : ''}>${esc(v)}</option>`).join('')}</select>`
        : `<span class="mono">${esc(c.current)}</span>`;
      return `<div class="ctl"><span>${esc(c.label)}</span>${sel}</div>`;
    }).join('');
    return `<div class="panel"><h2>${esc(g)}</h2>${rows}</div>`;
  }).join('');
  // These knobs are read from config ONCE when a qodex session starts (config is not hot-
  // reloaded mid-session). A toggle here writes the config file immediately, but a session
  // that's already running keeps its old value until it restarts — the #1 "I turned it on
  // but nothing changed" confusion. Say so, prominently, right above the toggles.
  const controlNote = (live && d.controls.length)
    ? `<p class="dim" style="margin:-4px 0 14px">Changes are written to <code>~/.qodex/config.yaml</code> and picked up on your <b>next message/task</b> — a running QodeX session hot-reloads these knobs at the start of each run (no restart needed).</p>`
    : '';

  const scheduleRows = d.schedules.length ? d.schedules.map(s => `<tr>
    <td>${s.enabled ? '🟢' : '⚪'} <b>${esc(s.name)}</b>${s.recipe ? ` <span class="mono dim">${esc(s.recipe)}</span>` : ''}</td>
    <td class="mono dim">${esc(s.cron)}</td>
    <td class="r">${live ? `<button onclick="act('schedule.setEnabled',{id:'${esc(s.id)}',enabled:${!s.enabled}})">${s.enabled ? 'Disable' : 'Enable'}</button> <button class="danger" onclick="if(confirm('Remove ${esc(s.name)}?'))act('schedule.remove',{id:'${esc(s.id)}'})">Remove</button>` : `<span class="dim">${s.enabled ? 'enabled' : 'disabled'}</span>`}</td>
  </tr>`).join('') : '<tr><td colspan="3" class="dim">No scheduled tasks. Add one with `qodex schedule add`.</td></tr>';
  const addForm = live ? `<div class="addform">
    <input id="s_name" placeholder="name (e.g. nightly-fix)">
    <input id="s_cron" placeholder="cron (@daily, 0 3 * * *)">
    <input id="s_prompt" placeholder="prompt — or maintain: dead-code | unused-imports/locals/params | lint-fix | dep-bump [--dry-run] [path]" style="flex:2">
    <select id="s_recipe"><option value="">plain</option><option value="verified-pr">verified-pr</option><option value="maintain">maintain (self-improving → verified PR)</option></select>
    <input id="s_deliver" placeholder="deliver (telegram:&lt;id&gt;)">
    <button onclick="act('schedule.add',{name:s_name.value,cron:s_cron.value,prompt:s_prompt.value,recipe:s_recipe.value,deliver:s_deliver.value})">Schedule</button>
  </div>` : '';
  const schedulePanel = `<div class="panel"><h2>Scheduled tasks</h2><table><thead><tr><th>task</th><th>cron</th><th class="r">${live ? 'actions' : 'state'}</th></tr></thead><tbody>${scheduleRows}</tbody></table>${addForm}</div>`;

  // Run history + trust receipts (proof-carrying autonomy, surfaced).
  const runRows = d.runs.length ? d.runs.map(r => {
    const rc = r.receipt;
    const verdict = rc ? `<span class="${rc.status === 'opened' || rc.status === 'done' ? 'ok' : rc.status === 'blocked' ? 'warn' : 'dim'}">🧾 ${esc(rc.status)}</span>${rc.prUrl ? ` <a href="${esc(rc.prUrl)}" target="_blank" class="mono">PR</a>` : ''}${rc.verification?.length ? ` <span class="dim mono">${rc.verification.map(v => (v.passed ? '✓' : '✗') + v.command).join(' ')}</span>` : ''}` : '<span class="dim">—</span>';
    return `<tr><td><b>${esc(r.schedule)}</b>${r.recipe ? ` <span class="mono dim">${esc(r.recipe)}</span>` : ''}</td><td class="dim">${esc(r.when)}</td><td>${esc(r.status)}</td><td>${verdict}</td></tr>`;
  }).join('') : '<tr><td colspan="4" class="dim">No runs yet. A verified-pr / maintain schedule produces a 🧾 receipt.</td></tr>';
  const runsPanel = `<div class="panel"><h2>Run history &amp; receipts</h2><table><thead><tr><th>schedule · recipe</th><th>when</th><th>status</th><th>receipt</th></tr></thead><tbody>${runRows}</tbody></table></div>`;

  // Maintain status & analytics (self-improvement loop at a glance).
  const ms = d.maintainStats;