@dewtech/dare-cli 3.10.0 → 3.11.0

package/templates/dashboard/app.js

@@ -0,0 +1,184 @@
+/** Vanilla dashboard — fetch /api/telemetry and render panels (no bundler). */
+
+const STATUS_COLORS = {
+  DONE: 'bar-pass',
+  FAILED: 'bar-fail',
+  RUNNING: 'bar-accent',
+  PENDING: 'bar-warn',
+  SKIPPED: 'bar-warn',
+};
+
+function el(id) {
+  const node = document.getElementById(id);
+  if (!node) throw new Error(`Missing #${id}`);
+  return node;
+}
+
+function setText(id, html) {
+  el(id).innerHTML = html;
+}
+
+function show(id, visible) {
+  el(id).classList.toggle('hidden', !visible);
+}
+
+function metric(label, value) {
+  return `<div class="metric"><span class="label">${label}</span><span class="value">${value}</span></div>`;
+}
+
+function barChart(entries, className = 'bar-accent') {
+  if (!entries.length) return '<p class="muted">No data</p>';
+  const max = Math.max(...entries.map((e) => e.value), 1);
+  const barW = 36;
+  const gap = 12;
+  const height = 120;
+  const width = entries.length * (barW + gap) + gap;
+  const bars = entries
+    .map((entry, i) => {
+      const h = Math.max(4, (entry.value / max) * (height - 24));
+      const x = gap + i * (barW + gap);
+      const y = height - h - 16;
+      return `<rect class="${className}" x="${x}" y="${y}" width="${barW}" height="${h}" rx="4"><title>${entry.label}: ${entry.value}</title></rect>
+        <text x="${x + barW / 2}" y="${height - 2}" text-anchor="middle" font-size="10" fill="currentColor">${entry.label}</text>`;
+    })
+    .join('');
+  return `<svg viewBox="0 0 ${width} ${height}" role="img" aria-label="bar chart">${bars}</svg>`;
+}
+
+function renderEmptyHints(hints) {
+  if (!hints || hints.length === 0) {
+    show('empty-hints', false);
+    return;
+  }
+  show('empty-hints', true);
+  setText('empty-hints', `<h2>Hints</h2><ul>${hints.map((h) => `<li>${h}</li>`).join('')}</ul>`);
+}
+
+function renderDag(dag) {
+  setText(
+    'dag-summary',
+    metric('Total tasks', dag.total) + metric('Ranks', dag.ranks),
+  );
+  const entries = Object.entries(dag.byStatus || {}).map(([label, value]) => ({
+    label,
+    value,
+    className: STATUS_COLORS[label] || 'bar-accent',
+  }));
+  setText(
+    'dag-chart',
+    entries.length
+      ? entries
+          .map((e) => barChart([e], e.className))
+          .join('')
+      : '<p>No task status data</p>',
+  );
+}
+
+function renderGates(gates) {
+  setText(
+    'gates-summary',
+    metric('Verified', gates.verified) +
+      metric('Proven', gates.proven) +
+      (gates.mutationAvg !== undefined ? metric('Mutation avg', gates.mutationAvg.toFixed(2)) : ''),
+  );
+  setText(
+    'gates-chart',
+    barChart(
+      [
+        { label: 'verified', value: gates.verified },
+        { label: 'proven', value: gates.proven },
+      ],
+      'bar-pass',
+    ),
+  );
+}
+
+function renderCost(cost) {
+  setText(
+    'cost-summary',
+    metric('Total USD', `$${cost.totalUsd.toFixed(4)}`) + metric('Total tokens', cost.totalTokens),
+  );
+  const entries = (cost.byTask || []).slice(0, 8).map((t) => ({
+    label: t.id.replace(/^task[-:]/, '').slice(0, 8),
+    value: t.tokens || t.usd * 1000,
+  }));
+  setText('cost-chart', barChart(entries, 'bar-accent'));
+
+  const tbody = el('cost-table').querySelector('tbody');
+  tbody.innerHTML = (cost.byTask || [])
+    .map(
+      (t) =>
+        `<tr><td>${t.id}</td><td>${t.usd.toFixed(4)}</td><td>${t.tokens}</td></tr>`,
+    )
+    .join('');
+}
+
+function renderOptionalPanels(data) {
+  if (data.bestOfN) {
+    show('bestof-panel', true);
+    setText(
+      'bestof-summary',
+      metric('Tasks', data.bestOfN.tasks) +
+        metric('Avg candidates', data.bestOfN.avgCandidates),
+    );
+  } else {
+    show('bestof-panel', false);
+  }
+
+  if (data.guard) {
+    show('guard-panel', true);
+    setText(
+      'guard-summary',
+      metric('Pass', data.guard.pass) +
+        metric('Warn', data.guard.warn) +
+        metric('Fail', data.guard.fail),
+    );
+    setText(
+      'guard-chart',
+      barChart(
+        [
+          { label: 'pass', value: data.guard.pass },
+          { label: 'warn', value: data.guard.warn },
+          { label: 'fail', value: data.guard.fail },
+        ],
+        'bar-pass',
+      ),
+    );
+  } else {
+    show('guard-panel', false);
+  }
+
+  if (data.drift) {
+    show('drift-panel', true);
+    setText(
+      'drift-summary',
+      metric('Orphan reqs', data.drift.orphanReqs) +
+        metric('Orphan code', data.drift.orphanCode) +
+        metric('Stale', data.drift.stale),
+    );
+  } else {
+    show('drift-panel', false);
+  }
+}
+
+async function loadTelemetry() {
+  const status = el('status-line');
+  try {
+    const res = await fetch('/api/telemetry');
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+    renderEmptyHints(data.emptyHints);
+    renderDag(data.dag);
+    renderGates(data.gates);
+    renderCost(data.cost);
+    renderOptionalPanels(data);
+    status.textContent = `Updated ${new Date().toLocaleTimeString()}`;
+  } catch (err) {
+    status.textContent = `Error: ${err instanceof Error ? err.message : String(err)}`;
+    show('empty-hints', true);
+    setText('empty-hints', `<h2>Error</h2><p>Could not load telemetry. Is the server running with a valid token?</p>`);
+  }
+}
+
+loadTelemetry();
+setInterval(loadTelemetry, 30_000);

package/templates/dashboard/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>DARE Telemetry</title>
+  <link rel="stylesheet" href="/dashboard/assets/style.css">
+</head>
+<body>
+  <header class="site-header">
+    <h1>DARE Telemetry</h1>
+    <p class="subtitle">Local read-only dashboard</p>
+  </header>
+
+  <main id="app">
+    <section id="empty-hints" class="panel hints hidden" aria-live="polite"></section>
+
+    <section id="dag-panel" class="panel">
+      <h2>DAG Progress</h2>
+      <div id="dag-summary" class="metrics"></div>
+      <div id="dag-chart" class="chart"></div>
+    </section>
+
+    <section id="gates-panel" class="panel">
+      <h2>Verification Gates</h2>
+      <div id="gates-summary" class="metrics"></div>
+      <div id="gates-chart" class="chart"></div>
+    </section>
+
+    <section id="cost-panel" class="panel">
+      <h2>Cost</h2>
+      <div id="cost-summary" class="metrics"></div>
+      <div id="cost-chart" class="chart"></div>
+      <table id="cost-table" class="data-table">
+        <thead><tr><th>Task</th><th>USD</th><th>Tokens</th></tr></thead>
+        <tbody></tbody>
+      </table>
+    </section>
+
+    <section id="bestof-panel" class="panel hidden">
+      <h2>Best-of-N</h2>
+      <div id="bestof-summary" class="metrics"></div>
+    </section>
+
+    <section id="guard-panel" class="panel hidden">
+      <h2>Guard</h2>
+      <div id="guard-summary" class="metrics"></div>
+      <div id="guard-chart" class="chart"></div>
+    </section>
+
+    <section id="drift-panel" class="panel hidden">
+      <h2>Drift</h2>
+      <div id="drift-summary" class="metrics"></div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <span id="status-line">Loading…</span>
+  </footer>
+
+  <script src="/dashboard/assets/app.js"></script>
+</body>
+</html>

package/templates/dashboard/style.css

@@ -0,0 +1,134 @@
+:root {
+  color-scheme: light dark;
+  --bg: #0f1419;
+  --surface: #1a2332;
+  --border: #2d3a4d;
+  --text: #e7ecf3;
+  --muted: #9aa8bc;
+  --accent: #5b9fd4;
+  --pass: #3ecf8e;
+  --warn: #f0c14b;
+  --fail: #ef6461;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #f4f6fa;
+    --surface: #ffffff;
+    --border: #d8dee9;
+    --text: #1b2430;
+    --muted: #5c677d;
+    --accent: #2563eb;
+  }
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.site-header, .site-footer {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.site-footer {
+  border-top: 1px solid var(--border);
+  border-bottom: none;
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+
+.site-header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+.subtitle {
+  margin: 0.25rem 0 0;
+  color: var(--muted);
+}
+
+#app {
+  display: grid;
+  gap: 1rem;
+  padding: 1rem 1.5rem 2rem;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1rem 1.25rem;
+}
+
+.panel h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1.1rem;
+}
+
+.hidden { display: none; }
+
+.hints {
+  grid-column: 1 / -1;
+  border-color: var(--warn);
+}
+
+.hints ul {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+
+.metrics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 1.25rem;
+  margin-bottom: 0.75rem;
+}
+
+.metric {
+  min-width: 5rem;
+}
+
+.metric .label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.metric .value {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.chart svg {
+  width: 100%;
+  height: auto;
+  max-height: 160px;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.data-table th,
+.data-table td {
+  text-align: left;
+  padding: 0.35rem 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.bar-pass { fill: var(--pass); }
+.bar-warn { fill: var(--warn); }
+.bar-fail { fill: var(--fail); }
+.bar-accent { fill: var(--accent); }

package/templates/ide/antigravity/.agents/skills/dare-dashboard/SKILL.md

@@ -0,0 +1,18 @@
+---
+name: dare-dashboard
+description: Start the local read-only telemetry dashboard (dare dashboard).
+---
+
+# /dare-dashboard
+
+Sobe o dashboard local de telemetria (`dare dashboard`) — read-only, loopback + token.
+
+```bash
+dare dashboard [--port <n>] [--no-open]
+```
+
+- Default: `127.0.0.1:4100`
+- API: `GET /api/telemetry` (JSON read-only)
+- UI: `GET /dashboard` (HTML/CSS/JS vanilla)
+
+Reusa hardening do MCP (auth + bind loopback). Não muta grafo/estado.

package/templates/ide/claude/.claude/commands/dare-dashboard.md

@@ -0,0 +1,18 @@
+# Comando: /dare-dashboard
+
+Sobe o dashboard local de telemetria (`dare dashboard`) — read-only, loopback + token.
+
+## Como rodar
+
+```bash
+dare dashboard [--port <n>] [--no-open]
+```
+
+- Default: `127.0.0.1:4100`
+- Reusa auth/bind do MCP (token via `DARE_MCP_TOKEN` ou gerado na subida)
+- Front vanilla em `/dashboard`; API JSON em `/api/telemetry`
+
+## Notas
+
+- **Read-only** — nenhuma rota muta grafo ou estado.
+- Abre o navegador automaticamente (use `--no-open` para desabilitar).

package/templates/ide/cursor/.cursor/commands/dare-dashboard.md

@@ -0,0 +1,18 @@
+# Comando: /dare-dashboard
+
+Sobe o dashboard local de telemetria (`dare dashboard`) — read-only, loopback + token.
+
+## Como rodar
+
+```bash
+dare dashboard [--port <n>] [--no-open]
+```
+
+- Default: `127.0.0.1:4100`
+- Reusa auth/bind do MCP (token via `DARE_MCP_TOKEN` ou gerado na subida)
+- Front vanilla em `/dashboard`; API JSON em `/api/telemetry`
+
+## Notas
+
+- **Read-only** — nenhuma rota muta grafo ou estado.
+- Abre o navegador automaticamente (use `--no-open` para desabilitar).