karajan-code 3.0.0 → 3.1.0

package/packages/hu-board/public/utils/command-launcher.js

@@ -0,0 +1,213 @@
+// KJC-TSK-0501 step 8e/8 — Command launcher modal + log viewer + is-test helper.
+//
+// Classic script (no exports). Loaded by index.html before app.js so the
+// top-level `function` declarations are hoisted into the shared realm —
+// the inline event listener on the ⚡ header button (in app.js) and the
+// is-test click handler resolve these names via that hoisting.
+//
+// Globals consumed from earlier scripts / app.js:
+//   - esc()                  (utils/formatters.js)
+//   - ensureDialog()         (app.js)
+//   - showError()            (utils/modals.js)
+//   - showConfirm()          (utils/modals.js)
+//   - openGenericLogPanel()  (utils/log-panel.js)
+//   - lastOpenedLog          (mutable in app.js — assignment crosses
+//                             scripts transparently)
+
+// ---- Command launcher modal ----
+//
+// Opens a small form inside the existing <dialog> singleton with a
+// command picker (plan / architect / clean) and the appropriate
+// fields per command. Submit POSTs to /api/commands/:command, the
+// server spawns a detached `kj` child, and we open the existing log
+// viewer (re-uses openLogViewer's tail loop, just pointed at the
+// new generic /api/runs/:commandId/log endpoint).
+
+
+async function showCommandLauncher() {
+  const dlg = ensureDialog();
+  // Per-command field schemas — kept in the client because each
+  // command has different inputs and the modal renders accordingly.
+  const SCHEMAS = {
+    plan: {
+      label: '📋 kj plan',
+      help: 'Generate an implementation plan with HUs. Paste the task text OR a file path.',
+      fields: [
+        { name: 'taskFile', label: 'SPEC file path (absolute)', type: 'text', placeholder: '/home/me/project/SPEC.md' },
+        { name: 'task', label: 'OR paste task text directly', type: 'textarea', rows: 6 },
+        { name: 'context', label: 'Extra context (optional)', type: 'text' },
+        { name: 'projectDir', label: 'Project directory (optional, defaults to board\'s cwd)', type: 'text' },
+        { name: 'quick', label: '--quick (skip synth + reviewer)', type: 'checkbox' },
+      ],
+    },
+    architect: {
+      label: '🏛 kj architect',
+      help: 'Design an architecture and persist ADRs. Same input as kj plan.',
+      fields: [
+        { name: 'taskFile', label: 'SPEC file path (absolute)', type: 'text', placeholder: '/home/me/project/SPEC.md' },
+        { name: 'task', label: 'OR paste task text directly', type: 'textarea', rows: 6 },
+        { name: 'context', label: 'Extra context (optional)', type: 'text' },
+        { name: 'projectDir', label: 'Project directory (optional)', type: 'text' },
+      ],
+    },
+    clean: {
+      label: '🧹 kj clean',
+      help: 'Garbage-collect plans / sessions / batches. --nuke wipes everything including the board DB.',
+      fields: [
+        { name: 'dryRun', label: '--dry-run (just report)', type: 'checkbox' },
+        { name: 'nuke', label: '⚠ --nuke (delete everything, including this board\'s DB)', type: 'checkbox' },
+      ],
+    },
+  };
+
+  let active = 'plan';
+  const renderForm = () => {
+    const s = SCHEMAS[active];
+    const fields = s.fields.map((f) => {
+      const id = `cmd-field-${f.name}`;
+      if (f.type === 'textarea') {
+        return `
+          <label style="display:flex;flex-direction:column;gap:4px;font-size:0.85rem">
+            <span style="color:var(--text-muted)">${esc(f.label)}</span>
+            <textarea id="${id}" rows="${f.rows || 4}" placeholder="${esc(f.placeholder || '')}"
+                      style="padding:8px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text);border-radius:var(--radius-sm);font-family:inherit;font-size:0.9rem;line-height:1.45;resize:vertical"></textarea>
+          </label>`;
+      }
+      if (f.type === 'checkbox') {
+        return `
+          <label style="display:flex;align-items:center;gap:8px;font-size:0.85rem">
+            <input type="checkbox" id="${id}">
+            <span>${esc(f.label)}</span>
+          </label>`;
+      }
+      return `
+        <label style="display:flex;flex-direction:column;gap:4px;font-size:0.85rem">
+          <span style="color:var(--text-muted)">${esc(f.label)}</span>
+          <input type="text" id="${id}" placeholder="${esc(f.placeholder || '')}"
+                 style="padding:8px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text);border-radius:var(--radius-sm);font-size:0.9rem">
+        </label>`;
+    }).join('');
+
+    dlg.innerHTML = `
+      <div style="padding:14px 18px;border-bottom:1px solid var(--border);font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:10px">
+        <span>⚡ Run a Karajan command</span>
+        <button id="cmd-close" type="button" class="control-btn"
+                style="padding:4px 10px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text);border-radius:var(--radius-sm);cursor:pointer">
+          ✕
+        </button>
+      </div>
+      <div style="padding:12px 18px;display:flex;gap:8px;border-bottom:1px solid var(--border)">
+        ${Object.entries(SCHEMAS).map(([key, s]) => `
+          <button type="button" data-cmd="${key}"
+                  style="padding:6px 12px;border:1px solid var(--border);
+                         background:${key === active ? 'var(--color-green)' : 'var(--bg-primary)'};
+                         color:${key === active ? '#fff' : 'var(--text)'};
+                         border-radius:var(--radius-sm);cursor:pointer;font-size:0.85rem;font-weight:${key === active ? '600' : '400'}">
+            ${esc(s.label)}
+          </button>
+        `).join('')}
+      </div>
+      <form id="cmd-form" onsubmit="return false"
+            style="padding:14px 18px;display:flex;flex-direction:column;gap:12px;width:min(640px, 88vw);box-sizing:border-box">
+        <div style="font-size:0.8rem;color:var(--text-muted)">${esc(SCHEMAS[active].help)}</div>
+        ${fields}
+        <div style="display:flex;justify-content:flex-end;gap:8px;padding-top:8px;border-top:1px solid var(--border)">
+          <button type="button" id="cmd-cancel" class="control-btn"
+                  style="padding:6px 14px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text);border-radius:var(--radius-sm);cursor:pointer">
+            Cancel
+          </button>
+          <button type="button" id="cmd-submit" class="control-btn"
+                  style="padding:6px 14px;border:none;background:var(--color-green);color:#fff;border-radius:var(--radius-sm);cursor:pointer;font-weight:600">
+            Run
+          </button>
+        </div>
+      </form>
+    `;
+
+    dlg.querySelectorAll('[data-cmd]').forEach((btn) => {
+      btn.addEventListener('click', () => { active = btn.dataset.cmd; renderForm(); });
+    });
+    dlg.querySelector('#cmd-close').addEventListener('click', () => dlg.close());
+    dlg.querySelector('#cmd-cancel').addEventListener('click', () => dlg.close());
+    dlg.querySelector('#cmd-submit').addEventListener('click', () => submitCommand(active));
+  };
+
+  async function submitCommand(command) {
+    const s = SCHEMAS[command];
+    const body = {};
+    for (const f of s.fields) {
+      const el = document.getElementById(`cmd-field-${f.name}`);
+      if (!el) continue;
+      if (f.type === 'checkbox') body[f.name] = el.checked;
+      else {
+        const v = (el.value || '').trim();
+        if (v) body[f.name] = v;
+      }
+    }
+    // plan / architect: at least one of taskFile or task is required.
+    if ((command === 'plan' || command === 'architect') && !body.taskFile && !body.task) {
+      await showError('Provide either a SPEC file path or paste the task text.', { title: 'Missing input' });
+      return;
+    }
+    if (command === 'clean' && body.nuke) {
+      const ok = await showConfirm(
+        '`kj clean --nuke` will delete EVERY plan / session / batch + wipe the HU Board DB. Cannot be undone.',
+        { title: 'Confirm --nuke', okLabel: 'Wipe everything', destructive: true }
+      );
+      if (!ok) return;
+    }
+
+    let res, payload;
+    try {
+      res = await fetch(`/api/commands/${encodeURIComponent(command)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      payload = await res.json().catch(() => ({}));
+    } catch (err) {
+      await showError(err.message, { title: 'Could not launch command' });
+      return;
+    }
+    if (!res.ok) {
+      await showError(payload.error || `HTTP ${res.status}`, { title: 'Command rejected' });
+      return;
+    }
+
+    dlg.close();
+    if (payload.commandId) openCommandLogViewer(command, payload.commandId);
+  }
+
+  renderForm();
+  dlg.showModal();
+}
+
+/**
+ * Open the run-log panel pointed at a /api/runs/<commandId>/log
+ * tail. Reuses the same panel UI as openLogViewer() for plans —
+ * just swaps the URL it polls.
+ */
+function openCommandLogViewer(commandLabel, commandId) {
+  const args = {
+    id: commandId,
+    label: `kj ${commandLabel}`,
+    tailUrl: (offset) => `/api/runs/${encodeURIComponent(commandId)}/log?offset=${offset}`,
+  };
+  // Remember it so the section header's 📜 View log button can
+  // re-open this same log after the user closes the panel.
+  lastOpenedLog = args;
+  openGenericLogPanel(args);
+}
+
+// is_test toggle (KJC-TSK-0371 — board polish #3). Three-state cycle:
+//   null (heuristic) → 1 (always test) → 0 (always keep) → null …
+// `null` is encoded as the empty string in `data-is-test` so the
+// button's HTML serialisation is stable across renders.
+function nextIsTestValue(current) {
+  // Treat both empty string ("") and "null" as "no override" — the
+  // dataset value is the empty string at render time, but URLs and
+  // some legacy callers may send the literal "null".
+  if (current === '' || current === 'null') return 1;
+  if (current === '1') return 0;
+  return null;  // from "0" → revert to default
+}

package/packages/hu-board/public/utils/config-editor.js

@@ -0,0 +1,181 @@
+// KJC-TSK-0501 step 8d/8 — Config editor modal (kj.config.yml).
+//
+// Classic script (no exports). Loaded by index.html before app.js so the
+// top-level `function` declaration is hoisted into the shared realm and
+// the inline `onclick` on the ⚙ header button (and `handleRoute`)
+// resolve `showConfigEditor` via that hoisting.
+//
+// Globals consumed from earlier scripts / app.js:
+//   - esc()             (app.js)
+//   - ensureDialog()    (app.js)
+//   - showError()       (utils/modals.js)
+
+// PR5: kj.config.yml editor modal
+//
+// Goal: a non-technical user opens the modal, picks "Sonnet siempre"
+// from a dropdown, hits "Guardar", and the next `kj run` is cheap.
+// No yml editing, no terminal trip.
+//
+// Each EDITABLE_FIELDS entry the backend exposes becomes one form
+// row. `select` → <select>, `boolean` → <input type=checkbox>,
+// `number` → <input type=number min/max>. Help text under each
+// label as a small grey paragraph.
+async function showConfigEditor(scope = 'global') {
+  // v2.30.0 PR4 — scope toggle. 'global' edita ~/.karajan/kj.config.yml
+  // (afecta a todos los proyectos); 'project' edita
+  // <projectDir>/.karajan/kj.config.yml (sólo el repo actual). El backend
+  // resuelve <projectDir> desde KJ_PROJECT_DIR || cwd.
+  let cfg;
+  try {
+    const r = await fetch(`/api/config?scope=${encodeURIComponent(scope)}`);
+    if (!r.ok) throw new Error(`HTTP ${r.status}`);
+    cfg = await r.json();
+  } catch (err) {
+    await showError(`No se pudo leer la configuración: ${err.message}`, { title: 'Configuración' });
+    return;
+  }
+  const dlg = document.getElementById('app-dialog') || ensureDialog();
+  const renderField = (f) => {
+    const id = `cfg-field-${f.key}`;
+    let input = '';
+    if (f.type === 'select') {
+      input = `<select id="${id}" data-key="${esc(f.key)}" style="width:100%;padding:6px 8px;background:var(--bg-primary);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);">
+        ${f.options.map((o) => `<option value="${esc(o)}"${o === f.value ? ' selected' : ''}>${esc(o)}</option>`).join('')}
+      </select>`;
+    } else if (f.type === 'boolean') {
+      input = `<label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
+        <input type="checkbox" id="${id}" data-key="${esc(f.key)}"${f.value ? ' checked' : ''} style="cursor:pointer;">
+        <span style="font-size:0.85rem;color:var(--text-muted);">${f.value ? 'activado' : 'desactivado'}</span>
+      </label>`;
+    } else if (f.type === 'number') {
+      // KJC-BUG-0069 — honour the schema's `step` (e.g. 'any' for floats like
+      // rag.search.alpha=0.6). HTML5 number inputs default to step=1, which
+      // marks any fractional value as stepMismatch and refuses to commit.
+      input = `<input type="number" id="${id}" data-key="${esc(f.key)}" value="${esc(String(f.value))}"${f.min != null ? ` min="${f.min}"` : ''}${f.max != null ? ` max="${f.max}"` : ''}${f.step != null ? ` step="${esc(String(f.step))}"` : ''} style="width:120px;padding:6px 8px;background:var(--bg-primary);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);">`;
+    }
+    return `
+      <div style="margin-bottom:14px;">
+        <label for="${id}" style="display:block;font-weight:600;color:var(--text);font-size:0.88rem;margin-bottom:4px;">${esc(f.label)}</label>
+        ${input}
+        ${f.help ? `<p style="margin:4px 0 0;font-size:0.75rem;color:var(--text-muted);">${esc(f.help)}</p>` : ''}
+      </div>
+    `;
+  };
+
+  // v2.30.0 — agrupa los campos por `f.category`. El backend declara
+  // las categorías ordenadas en `cfg.categories`; cualquier campo sin
+  // categoría cae a "Otros" (defensivo, no se pierde si olvidamos
+  // etiquetar uno nuevo). Mantiene el orden interno del whitelist
+  // dentro de cada sección.
+  const cats = Array.isArray(cfg.categories) && cfg.categories.length > 0
+    ? cfg.categories
+    : [{ id: 'misc', label: 'Otros', icon: '⚙', order: 999 }];
+  const byCat = new Map(cats.map((c) => [c.id, []]));
+  byCat.set('misc', byCat.get('misc') || []);
+  for (const f of cfg.fields) {
+    const id = byCat.has(f.category) ? f.category : 'misc';
+    if (!byCat.has(id)) byCat.set(id, []);
+    byCat.get(id).push(f);
+  }
+  const renderSection = (cat) => {
+    const fields = byCat.get(cat.id) || [];
+    if (fields.length === 0) return '';
+    return `
+      <section style="margin-bottom:22px;">
+        <h3 style="display:flex;align-items:center;gap:8px;margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border);font-size:0.95rem;font-weight:700;color:var(--text);">
+          <span aria-hidden="true">${esc(cat.icon || '⚙')}</span>
+          <span>${esc(cat.label)}</span>
+        </h3>
+        ${fields.map(renderField).join('')}
+      </section>
+    `;
+  };
+  const allCats = [...cats];
+  if ((byCat.get('misc') || []).length > 0 && !allCats.some((c) => c.id === 'misc')) {
+    allCats.push({ id: 'misc', label: 'Otros', icon: '⚙', order: 999 });
+  }
+  const sectionsHtml = allCats.map(renderSection).join('');
+
+  // PR4 — toggle global / proyecto. Cambiarlo recarga el modal contra el
+  // otro fichero. Visual: dos pills mutuamente excluyentes.
+  const pill = (id, value, label, active) => `
+    <button data-scope="${value}" id="${id}" type="button"
+      style="padding:4px 10px;border-radius:999px;border:1px solid var(--border);
+      background:${active ? 'var(--color-blue)' : 'var(--bg-primary)'};
+      color:${active ? '#fff' : 'var(--text)'};font-size:0.75rem;cursor:pointer;">
+      ${esc(label)}
+    </button>`;
+  const scopeToggle = `
+    <div style="display:flex;align-items:center;gap:4px;margin-left:auto;" role="radiogroup" aria-label="Ámbito de configuración">
+      ${pill('cfg-scope-global',  'global',  'Global',         scope === 'global')}
+      ${pill('cfg-scope-project', 'project', 'Este proyecto',  scope === 'project')}
+    </div>`;
+  dlg.innerHTML = `
+    <div style="padding:14px 18px;border-bottom:1px solid var(--border);font-weight:700;display:flex;align-items:center;gap:10px;">
+      <span style="font-size:1.2rem;">⚙</span>
+      <span>Configuración de Karajan</span>
+      ${scopeToggle}
+    </div>
+    <div style="padding:6px 18px 0;font-family:var(--font-mono,monospace);font-size:0.7rem;color:var(--text-muted);">
+      ${esc(cfg.path || '')}${cfg.exists === false ? ' · (aún no existe, se creará al guardar)' : ''}
+    </div>
+    <div style="padding:14px 18px;max-height:65vh;overflow:auto;">
+      ${sectionsHtml}
+      <p style="margin:14px 0 0;font-size:0.75rem;color:var(--text-muted);">
+        Los cambios se guardan en <code>kj.config.yml</code> de forma atómica (con copia de seguridad <code>.bak</code>).
+        El próximo <code>kj run</code> los aplicará — no hace falta reiniciar el board.
+      </p>
+    </div>
+    <div style="padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;">
+      <button id="config-cancel" style="padding:8px 16px;background:var(--bg-primary);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;">Cancelar</button>
+      <button id="config-save" style="padding:8px 16px;background:var(--color-green);border:none;color:#fff;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;">Guardar</button>
+    </div>
+  `;
+  if (typeof dlg.showModal === 'function' && !dlg.open) dlg.showModal();
+  // PR4 — al cambiar de pill, recargar el modal con el otro scope.
+  for (const btn of dlg.querySelectorAll('[data-scope]')) {
+    btn.addEventListener('click', () => {
+      const next = btn.getAttribute('data-scope');
+      if (next === scope) return;
+      try { dlg.close(); } catch { /* ignore */ }
+      showConfigEditor(next);
+    }, { once: true });
+  }
+  dlg.querySelector('#config-cancel')?.addEventListener('click', () => { try { dlg.close(); } catch { /* ignore */ } }, { once: true });
+  dlg.querySelector('#config-save')?.addEventListener('click', async () => {
+    // Build the patch from the form, comparing against initial values
+    // so we only send what changed.
+    const patch = {};
+    for (const f of cfg.fields) {
+      const el = dlg.querySelector(`[data-key="${f.key}"]`);
+      if (!el) continue;
+      let v;
+      if (f.type === 'boolean') v = el.checked;
+      else if (f.type === 'number') v = Number(el.value);
+      else v = el.value;
+      if (v !== f.value) patch[f.key] = v;
+    }
+    if (Object.keys(patch).length === 0) {
+      try { dlg.close(); } catch { /* ignore */ }
+      return;
+    }
+    try {
+      const r = await fetch('/api/config', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ patch, scope }),
+      });
+      if (!r.ok) {
+        const body = await r.json().catch(() => ({}));
+        const msg = body?.details?.errors?.length
+          ? body.details.errors.join('\n')
+          : (body.error || `HTTP ${r.status}`);
+        await showError(msg, { title: 'No se pudo guardar' });
+        return;
+      }
+      try { dlg.close(); } catch { /* ignore */ }
+    } catch (err) {
+      await showError(err.message || String(err), { title: 'Error guardando configuración' });
+    }
+  }, { once: true });
+}

package/packages/hu-board/public/utils/dashboard-view.js

@@ -0,0 +1,103 @@
+// KJC-TSK-0501 step 6/8 — Dashboard view (global stats + project cards).
+//
+// Classic script (no exports). Loaded by index.html after utils/api.js
+// and the other utility scripts, before app.js. Function declarations
+// hoist to the script-level lexical environment so app.js (and the
+// `data-view="dashboard"` nav handler) can call renderDashboard()
+// transparently.
+//
+// Globals consumed from earlier scripts / app.js:
+//   - api()                       (utils/api.js)
+//   - esc()                       (app.js)
+//   - timeAgo()                   (utils/formatters.js)
+//   - renderEmptyState()          (app.js)
+//   - isTestTitle() / isTestIcon()(app.js)
+//   - selectProject()             (app.js)
+
+/**
+ * Renders the dashboard view with global stats and project cards.
+ */
+async function renderDashboard() {
+  const app = document.getElementById('app');
+  app.innerHTML = '<div class="loading"><div class="loading__spinner"></div><p>Loading dashboard...</p></div>';
+
+  try {
+    const [stats, projects] = await Promise.all([
+      api('/api/dashboard'),
+      api('/api/projects'),
+    ]);
+
+    const certPct = stats.total_stories > 0
+      ? Math.round((stats.certified_stories / stats.total_stories) * 100)
+      : 0;
+
+    app.innerHTML = `
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-card__value">${stats.total_stories}</div>
+          <div class="stat-card__label">Total Stories</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-card__value stat-card__value--green">${stats.certified_stories} (${certPct}%)</div>
+          <div class="stat-card__label">Certified</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-card__value stat-card__value--yellow">${stats.pending_stories}</div>
+          <div class="stat-card__label">Pending</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-card__value stat-card__value--purple">${stats.avg_quality !== null ? stats.avg_quality + '/60' : '--'}</div>
+          <div class="stat-card__label">Avg Quality</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-card__value">${stats.total_sessions}</div>
+          <div class="stat-card__label">Sessions</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-card__value stat-card__value--green">${stats.approved_sessions}</div>
+          <div class="stat-card__label">Approved</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-card__value stat-card__value--purple">${stats.total_projects}</div>
+          <div class="stat-card__label">Projects</div>
+        </div>
+      </div>
+
+      <div class="section-header">
+        <span class="section-header__title">Projects</span>
+        <span class="section-header__count">${projects.length} projects</span>
+      </div>
+
+      ${projects.length === 0 ? renderEmptyState() : `
+        <div class="projects-grid">
+          ${projects.map((p) => `
+            <div class="project-card">
+              <button class="project-card__delete" title="Delete project (cascade)" data-project-id="${esc(p.id)}" data-project-name="${esc(p.name || p.id)}">🗑️</button>
+              <button class="project-card__is-test" title="${esc(isTestTitle(p))}" data-project-id="${esc(p.id)}" data-is-test="${p.is_test === null || p.is_test === undefined ? '' : p.is_test}">${isTestIcon(p)}</button>
+              <div class="project-card__body" onclick="selectProject('${esc(p.id)}')">
+                <div class="project-card__name">${p.is_shared === 1 ? '<span class="project-card__shared-badge" title="Team-shared via .karajan-shared/">🔗</span> ' : ''}${esc(p.name || p.id)}</div>
+                <div class="project-card__stats">
+                  <div class="project-card__stat">
+                    <div class="project-card__stat-value">${p.story_count || 0}</div>
+                    <div class="project-card__stat-label">Stories</div>
+                  </div>
+                  <div class="project-card__stat">
+                    <div class="project-card__stat-value">${p.certified_count || 0}</div>
+                    <div class="project-card__stat-label">Certified</div>
+                  </div>
+                  <div class="project-card__stat">
+                    <div class="project-card__stat-value">${p.session_count || 0}</div>
+                    <div class="project-card__stat-label">Sessions</div>
+                  </div>
+                </div>
+                <div class="project-card__activity">Last activity: ${timeAgo(p.last_activity)}</div>
+              </div>
+            </div>
+          `).join('')}
+        </div>
+      `}
+    `;
+  } catch (err) {
+    app.innerHTML = `<div class="empty-state"><div class="empty-state__title">Error loading dashboard</div><div class="empty-state__text">${esc(err.message)}</div></div>`;
+  }
+}