turbine-orm 0.91.0-next.e72e9b4 → 0.92.0

package/dist/cli/index.js

@@ -2,23 +2,23 @@
 /**
  * turbine-orm CLI
  *
- * Commands:
- *   turbine init                 , Initialize a Turbine project
- *   turbine generate | pull      , Introspect database and generate TypeScript types
- *   turbine migrate-from-prisma   - Parse a schema.prisma and emit a Prisma->Turbine name map + report
- *   turbine push                  - Apply schema-builder definitions to database (--schema-file, destructive ops gated)
- *   turbine migrate create <name> - Create a new SQL migration file (--auto | --from-diff | --recipe <name>)
- *   turbine migrate up           , Apply pending migrations
- *   turbine migrate deploy       , Apply pending migrations without prompts
- *   turbine migrate down         , Rollback last migration
- *   turbine migrate status       , Show migration status
- *   turbine seed                 , Run seed file
- *   turbine status               , Show schema summary
- *   turbine doctor                - Index + cached-plan triage (--fix, --json, --no-concurrently, --unused, --audit, --no-plan-divergence, --allow-pooler)
- *   turbine studio                : Launch local read-only web UI (--demo for a seeded sample DB)
- *   turbine mcp                  , Start read-only MCP server over JSON-RPC stdio
- *   turbine observe              , Launch metrics dashboard (requires TURBINE_OBSERVE_URL)
- *   turbine skill                 - Install the agent query skill (--print, --agents, --dir <path>)
+ * Commands (each has its own `--help`, which is the full flag list):
+ *   turbine init                   Initialize a Turbine project
+ *   turbine generate | pull        Introspect the database and generate TypeScript types
+ *   turbine migrate-from-prisma    Parse a schema.prisma and emit a Prisma->Turbine name map + report
+ *   turbine push                   Apply defineSchema() definitions to the database (destructive ops gated)
+ *   turbine migrate create <name>  Create a SQL migration file (--auto | --from-diff | --recipe <name>)
+ *   turbine migrate up             Apply pending migrations
+ *   turbine migrate deploy         Apply pending migrations without prompts
+ *   turbine migrate down           Roll back the last migration
+ *   turbine migrate status         Show migration status
+ *   turbine seed                   Run the seed file
+ *   turbine status                 Show a schema summary
+ *   turbine doctor                 Index + cached-plan triage
+ *   turbine studio                 Launch the local read-only web UI (--demo for a seeded sample DB)
+ *   turbine mcp                    Start the read-only MCP server over JSON-RPC stdio
+ *   turbine observe                Launch the metrics dashboard (--metrics-url or TURBINE_OBSERVE_URL)
+ *   turbine skill                  Install the agent query skill
  *
  * Usage:
  *   DATABASE_URL=postgres://... npx turbine generate
@@ -43,7 +43,7 @@ import { closestName } from '../query/utils.js';
 import { snakeToCamel } from '../schema.js';
 import { DestructivePushRefusal, driftWarnings, schemaDiff, schemaPush } from '../schema-sql.js';
 import { applyCodeFirstColumnTags, extractCodeFirstColumnTags } from './code-first-tags.js';
-import { configTemplate, connectionStringHasPassword, DEFAULT_INIT_SEED_FILE, findConfigFile, loadConfigResult, looksLikeSchemaFilePath, resolveConfig, resolveSeedFile, unwrapModuleDefault, } from './config.js';
+import { configTemplate, connectionStringHasPassword, DEFAULT_INIT_SEED_FILE, findConfigFile, firstNonEmpty, loadConfigResult, looksLikeSchemaFilePath, resolveConfig, resolveSeedFile, unwrapModuleDefault, } from './config.js';
 import { DESTRUCTIVE_KIND_LABEL } from './destructive.js';
 import { errorText } from './error-text.js';
 import { canResolveTsx, getTsLoaderError, needsTsLoader, registerTsLoader } from './loader.js';
@@ -2907,6 +2907,7 @@ async function cmdMigrateUp(args, config) {
             allowDestructive: args.allowDestructive,
             onNoTransaction,
             schema: config.schema,
+            adapter: config.adapter,
         });
     }
     catch (err) {
@@ -2925,6 +2926,7 @@ async function cmdMigrateUp(args, config) {
             allowDestructive: true,
             onNoTransaction,
             schema: config.schema,
+            adapter: config.adapter,
         });
     }
     if (result.applied.length > 0) {
@@ -3087,6 +3089,7 @@ async function cmdMigrateDeploy(args, config) {
     const result = await migrateDeploy(url, config.migrationsDir, {
         allowDrift: args.allowDrift,
         schema: config.schema,
+        adapter: config.adapter,
         lockWaitMs: args.wait !== undefined ? args.wait * 1000 : undefined,
         onLockWait: () => {
             runSpinner.stop();
@@ -3198,6 +3201,7 @@ async function cmdMigrateDown(args, config) {
             allowDestructive: args.allowDestructive,
             allowDrift: args.allowDrift,
             schema: config.schema,
+            adapter: config.adapter,
         });
     }
     catch (err) {
@@ -3215,6 +3219,7 @@ async function cmdMigrateDown(args, config) {
             allowDestructive: true,
             allowDrift: args.allowDrift,
             schema: config.schema,
+            adapter: config.adapter,
         });
     }
     if (result.rolledBack.length > 0) {
@@ -4570,12 +4575,12 @@ async function cmdMcp(_args, config) {
 // ---------------------------------------------------------------------------
 async function cmdObserve(args) {
     banner();
-    const url = process.env.TURBINE_OBSERVE_URL;
+    const url = firstNonEmpty(args.metricsUrl, process.env.TURBINE_OBSERVE_URL);
     if (!url) {
-        error('TURBINE_OBSERVE_URL environment variable is required for the observe command.');
+        error('The observe command needs the metrics database: pass --metrics-url or set TURBINE_OBSERVE_URL.');
         errorLine();
-        errorLine(`${dim('Set it to the Postgres connection string where metrics are stored.')}`);
-        errorLine(`${dim('Example:')} ${cyan('TURBINE_OBSERVE_URL=postgres://... npx turbine observe')}`);
+        errorLine(`${dim('Point it at the Postgres database where metrics are stored.')}`);
+        errorLine(`${dim('Example:')} ${cyan('npx turbine observe --metrics-url postgres://...')}`);
         errorLine();
         process.exit(1);
     }
@@ -4891,7 +4896,7 @@ function showDoctorHelp() {
     console.log(`    ${cyan('--allow-pooler')}        Run against a connection pooler anyway ${dim('(refused by default)')}`);
     newline();
     console.log(`  ${dim('doctor refuses a transaction-pooling endpoint (a')} ${cyan('-pooler')} ${dim('or')} ${cyan('pgbouncer')}`);
-    console.log(`  ${dim('host, or port 6543). Point it at the direct endpoint instead: a pooler')}`);
+    console.log(`  ${dim('host, or port 6543 or 6432). Point it at the direct endpoint instead: a pooler')}`);
     console.log(`  ${dim('shares one server backend between clients, so neither the session state')}`);
     console.log(`  ${dim('doctor needs nor the session-scoped views it cites belong to it.')}`);
     newline();
@@ -4949,9 +4954,10 @@ function showMcpHelp() {
     console.log(`  ${bold('Usage:')}`);
     console.log(`    npx turbine mcp ${dim('[options]')}`);
     newline();
-    console.log(`  Speaks newline-delimited JSON-RPC 2.0 on stdin/stdout and exposes ten`);
-    console.log(`  read-only tools: schema, relation graph, join paths, migration status,`);
-    console.log(`  doctor, EXPLAIN, table stats, sample rows, and error lookup.`);
+    console.log(`  Speaks newline-delimited JSON-RPC 2.0 on stdin/stdout and exposes eleven`);
+    console.log(`  read-only tools: schema overview, table detail, relation graph, join paths,`);
+    console.log(`  migration status, doctor, EXPLAIN, query compile, table stats, sample rows`);
+    console.log(`  and error lookup.`);
     newline();
     console.log(`  ${bold('Options:')}`);
     console.log(`    ${cyan('--url, -u')} ${dim('<url>')}       Postgres connection string`);
@@ -4965,16 +4971,17 @@ function showObserveHelp() {
     console.log(`  ${bold('turbine observe')}, Query metrics dashboard`);
     newline();
     console.log(`  ${bold('Usage:')}`);
-    console.log(`    TURBINE_OBSERVE_URL=postgres://... npx turbine observe ${dim('[options]')}`);
+    console.log(`    npx turbine observe --metrics-url postgres://... ${dim('[options]')}`);
     newline();
     console.log(`  Reads the ${cyan('_turbine_metrics')} table written by ${cyan('db.$observe()')} and serves`);
     console.log(`  per-minute count / avg / p50 / p95 / p99 / error aggregates. Read-only,`);
     console.log(`  loopback-bound, behind a random per-session token, same model as Studio.`);
     newline();
-    console.log(`  ${dim('The connection string comes from')} ${cyan('TURBINE_OBSERVE_URL')}${dim(', not')} ${cyan('DATABASE_URL')}${dim(':')}`);
+    console.log(`  ${dim('The connection string comes from')} ${cyan('--metrics-url')} ${dim('or')} ${cyan('TURBINE_OBSERVE_URL')}${dim(', not')} ${cyan('DATABASE_URL')}${dim(':')}`);
     console.log(`  ${dim('metrics are meant to live in a different database from the one they measure.')}`);
     newline();
     console.log(`  ${bold('Options:')}`);
+    console.log(`    ${cyan('--metrics-url')} ${dim('<url>')}   Metrics database ${dim('(default: TURBINE_OBSERVE_URL)')}`);
     console.log(`    ${cyan('--port')} ${dim('<n>')}            HTTP port ${dim('(default: 4984)')}`);
     console.log(`    ${cyan('--host')} ${dim('<addr>')}         Bind address ${dim('(default: 127.0.0.1)')}`);
     console.log(`    ${cyan('--no-open')}             Don't auto-open the browser`);

package/dist/cli/observe-ui.d.ts

@@ -1 +1 @@
-export declare const OBSERVE_HTML = "<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n  <meta name=\"color-scheme\" content=\"dark\" />\n  <title>Turbine Observe</title>\n  <style>\n    :root {\n      --bg: #0a0a0b;\n      --bg-elev: #111113;\n      --bg-hover: #1a1a1d;\n      --border: #26262b;\n      --text: #e6e6ea;\n      --text-dim: #8a8a93;\n      --accent: #60a5fa;\n      --green: #4ade80;\n      --red: #f87171;\n      --orange: #fb923c;\n      --purple: #a78bfa;\n      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n      --sans: system-ui, -apple-system, sans-serif;\n      --radius: 6px;\n    }\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; padding: 24px; }\n    h1 { font-size: 20px; margin-bottom: 4px; }\n    .subtitle { color: var(--text-dim); margin-bottom: 24px; }\n    .controls { display: flex; gap: 8px; margin-bottom: 24px; }\n    .controls button {\n      background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);\n      color: var(--text); padding: 6px 12px; cursor: pointer; font-size: 13px;\n    }\n    .controls button.active { border-color: var(--accent); color: var(--accent); }\n    .card {\n      background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);\n      padding: 16px; margin-bottom: 16px;\n    }\n    .card h2 { font-size: 14px; color: var(--text-dim); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }\n    table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }\n    th { text-align: left; padding: 6px 8px; color: var(--text-dim); border-bottom: 1px solid var(--border); }\n    td { padding: 6px 8px; border-bottom: 1px solid var(--border); }\n    .num { text-align: right; }\n    .error-rate { color: var(--red); }\n    .low-error { color: var(--green); }\n    svg { width: 100%; height: 200px; }\n    .chart-line { fill: none; stroke-width: 1.5; }\n    .line-avg { stroke: var(--accent); }\n    .line-p95 { stroke: var(--orange); }\n    .line-p99 { stroke: var(--red); }\n    .legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text-dim); }\n    .legend span::before { content: ''; display: inline-block; width: 12px; height: 2px; margin-right: 4px; vertical-align: middle; }\n    .legend .l-avg::before { background: var(--accent); }\n    .legend .l-p95::before { background: var(--orange); }\n    .legend .l-p99::before { background: var(--red); }\n    .empty { color: var(--text-dim); text-align: center; padding: 40px; }\n  </style>\n</head>\n<body>\n  <h1>Turbine Observe</h1>\n  <p class=\"subtitle\">Query performance metrics</p>\n  <div class=\"controls\">\n    <button data-range=\"1h\" class=\"active\">1h</button>\n    <button data-range=\"6h\">6h</button>\n    <button data-range=\"24h\">24h</button>\n    <button data-range=\"7d\">7d</button>\n  </div>\n  <div class=\"card\" id=\"latency-card\">\n    <h2>Latency over time</h2>\n    <div id=\"chart\"></div>\n    <div class=\"legend\">\n      <span class=\"l-avg\">avg</span>\n      <span class=\"l-p95\">p95</span>\n      <span class=\"l-p99\">p99</span>\n    </div>\n  </div>\n  <div class=\"card\" id=\"models-card\">\n    <h2>Top models</h2>\n    <div id=\"models-table\"></div>\n  </div>\n  <div class=\"card\" id=\"errors-card\">\n    <h2>Error rates</h2>\n    <div id=\"errors-table\"></div>\n  </div>\n  <script nonce=\"__CSP_NONCE__\">\n    let currentRange = '1h';\n    // Anchored on a cookie boundary so a decoy cookie whose name ends with this\n    // one cannot shadow the real token.\n    const token = document.cookie.match(/(?:^|;\\s*)turbine_observe_token=([a-f0-9]+)/)?.[1] || '';\n    const headers = { 'x-turbine-token': token };\n\n    document.querySelector('.controls').addEventListener('click', e => {\n      if (e.target.tagName !== 'BUTTON') return;\n      document.querySelectorAll('.controls button').forEach(b => b.classList.remove('active'));\n      e.target.classList.add('active');\n      currentRange = e.target.dataset.range;\n      refresh();\n    });\n\n    async function fetchJson(path) {\n      const res = await fetch(path, { headers });\n      if (!res.ok) return null;\n      return res.json();\n    }\n\n    function buildSvgPath(points, width, height, maxY) {\n      if (points.length === 0) return '';\n      const xStep = width / Math.max(points.length - 1, 1);\n      return points.map((y, i) => {\n        const px = i * xStep;\n        const py = height - (y / maxY) * height;\n        return (i === 0 ? 'M' : 'L') + px.toFixed(1) + ',' + py.toFixed(1);\n      }).join(' ');\n    }\n\n    function renderChart(data) {\n      const el = document.getElementById('chart');\n      if (!data || data.length === 0) { el.innerHTML = '<p class=\"empty\">No data yet</p>'; return; }\n      const width = 800; const height = 180;\n      const allVals = data.flatMap(d => [d.avg_ms, d.p95_ms, d.p99_ms]);\n      const maxY = Math.max(...allVals, 1) * 1.1;\n      const avgPath = buildSvgPath(data.map(d => d.avg_ms), width, height, maxY);\n      const p95Path = buildSvgPath(data.map(d => d.p95_ms), width, height, maxY);\n      const p99Path = buildSvgPath(data.map(d => d.p99_ms), width, height, maxY);\n      el.innerHTML = '<svg viewBox=\"0 0 ' + width + ' ' + height + '\" preserveAspectRatio=\"none\">'\n        + '<path class=\"chart-line line-avg\" d=\"' + avgPath + '\"/>'\n        + '<path class=\"chart-line line-p95\" d=\"' + p95Path + '\"/>'\n        + '<path class=\"chart-line line-p99\" d=\"' + p99Path + '\"/>'\n        + '</svg>';\n    }\n\n    function escapeHtml(s) {\n      if (s == null) return '';\n      return String(s)\n        .replace(/&/g, '&amp;')\n        .replace(/</g, '&lt;')\n        .replace(/>/g, '&gt;')\n        .replace(/\"/g, '&quot;')\n        .replace(/'/g, '&#39;');\n    }\n\n    // Numeric sink: counts are integer aggregates, but they are still values\n    // arriving over the wire, so coerce rather than interpolating them raw.\n    function num(v) {\n      const n = Number(v);\n      return Number.isFinite(n) ? String(n) : '0';\n    }\n\n    function renderModels(data) {\n      const el = document.getElementById('models-table');\n      if (!data || data.length === 0) { el.innerHTML = '<p class=\"empty\">No data yet</p>'; return; }\n      let html = '<table><thead><tr><th>Model</th><th>Action</th><th class=\"num\">Count</th><th class=\"num\">Avg (ms)</th><th class=\"num\">P95 (ms)</th><th class=\"num\">P99 (ms)</th></tr></thead><tbody>';\n      for (const row of data) {\n        html += '<tr><td>' + escapeHtml(row.model) + '</td><td>' + escapeHtml(row.action) + '</td>'\n          + '<td class=\"num\">' + num(row.count) + '</td>'\n          + '<td class=\"num\">' + row.avg_ms.toFixed(1) + '</td>'\n          + '<td class=\"num\">' + row.p95_ms.toFixed(1) + '</td>'\n          + '<td class=\"num\">' + row.p99_ms.toFixed(1) + '</td></tr>';\n      }\n      html += '</tbody></table>';\n      el.innerHTML = html;\n    }\n\n    function renderErrors(data) {\n      const el = document.getElementById('errors-table');\n      if (!data || data.length === 0) { el.innerHTML = '<p class=\"empty\">No errors</p>'; return; }\n      let html = '<table><thead><tr><th>Model</th><th>Action</th><th class=\"num\">Total</th><th class=\"num\">Errors</th><th class=\"num\">Rate</th></tr></thead><tbody>';\n      for (const row of data) {\n        const rate = row.count > 0 ? (row.error_count / row.count * 100).toFixed(1) : '0.0';\n        const cls = parseFloat(rate) > 5 ? 'error-rate' : 'low-error';\n        html += '<tr><td>' + escapeHtml(row.model) + '</td><td>' + escapeHtml(row.action) + '</td>'\n          + '<td class=\"num\">' + num(row.count) + '</td>'\n          + '<td class=\"num\">' + num(row.error_count) + '</td>'\n          + '<td class=\"num ' + cls + '\">' + rate + '%</td></tr>';\n      }\n      html += '</tbody></table>';\n      el.innerHTML = html;\n    }\n\n    async function refresh() {\n      const [latency, models] = await Promise.all([\n        fetchJson('/api/latency?range=' + currentRange),\n        fetchJson('/api/models?range=' + currentRange),\n      ]);\n      renderChart(latency);\n      renderModels(models);\n      // Derive errors from models data\n      const withErrors = (models || []).filter(m => m.error_count > 0);\n      renderErrors(withErrors);\n    }\n\n    refresh();\n    setInterval(refresh, 60000);\n  </script>\n</body>\n</html>";
+export declare const OBSERVE_HTML = "<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n  <meta name=\"color-scheme\" content=\"dark\" />\n  <title>Turbine Observe</title>\n  <style>\n    :root {\n      --bg: #0a0a0b;\n      --bg-elev: #111113;\n      --bg-hover: #1a1a1d;\n      --border: #26262b;\n      --text: #e6e6ea;\n      --text-dim: #8a8a93;\n      --accent: #6f9bf7;\n      --green: #4ade80;\n      --red: #f87171;\n      --orange: #fb923c;\n      --purple: #a78bfa;\n      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n      --sans: system-ui, -apple-system, sans-serif;\n      --radius: 6px;\n    }\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; padding: 24px; }\n    h1 { font-size: 20px; margin-bottom: 4px; }\n    .subtitle { color: var(--text-dim); margin-bottom: 24px; }\n    .controls { display: flex; gap: 8px; margin-bottom: 24px; }\n    .controls button {\n      background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);\n      color: var(--text); padding: 6px 12px; cursor: pointer; font-size: 13px;\n    }\n    .controls button.active { border-color: var(--accent); color: var(--accent); }\n    .card {\n      background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);\n      padding: 16px; margin-bottom: 16px;\n    }\n    .card h2 { font-size: 14px; color: var(--text-dim); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }\n    table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }\n    th { text-align: left; padding: 6px 8px; color: var(--text-dim); border-bottom: 1px solid var(--border); }\n    td { padding: 6px 8px; border-bottom: 1px solid var(--border); }\n    .num { text-align: right; }\n    .error-rate { color: var(--red); }\n    .low-error { color: var(--green); }\n    svg { width: 100%; height: 200px; }\n    .chart-line { fill: none; stroke-width: 1.5; }\n    .line-avg { stroke: var(--accent); }\n    .line-p95 { stroke: var(--orange); }\n    .line-p99 { stroke: var(--red); }\n    .legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text-dim); }\n    .legend span::before { content: ''; display: inline-block; width: 12px; height: 2px; margin-right: 4px; vertical-align: middle; }\n    .legend .l-avg::before { background: var(--accent); }\n    .legend .l-p95::before { background: var(--orange); }\n    .legend .l-p99::before { background: var(--red); }\n    .empty { color: var(--text-dim); text-align: center; padding: 40px; }\n  </style>\n</head>\n<body>\n  <h1>Turbine Observe</h1>\n  <p class=\"subtitle\">Query performance metrics</p>\n  <div class=\"controls\">\n    <button data-range=\"1h\" class=\"active\">1h</button>\n    <button data-range=\"6h\">6h</button>\n    <button data-range=\"24h\">24h</button>\n    <button data-range=\"7d\">7d</button>\n  </div>\n  <div class=\"card\" id=\"latency-card\">\n    <h2>Latency over time</h2>\n    <div id=\"chart\"></div>\n    <div class=\"legend\">\n      <span class=\"l-avg\">avg</span>\n      <span class=\"l-p95\">p95</span>\n      <span class=\"l-p99\">p99</span>\n    </div>\n  </div>\n  <div class=\"card\" id=\"models-card\">\n    <h2>Top models</h2>\n    <div id=\"models-table\"></div>\n  </div>\n  <div class=\"card\" id=\"errors-card\">\n    <h2>Error rates</h2>\n    <div id=\"errors-table\"></div>\n  </div>\n  <script nonce=\"__CSP_NONCE__\">\n    let currentRange = '1h';\n    // Anchored on a cookie boundary so a decoy cookie whose name ends with this\n    // one cannot shadow the real token.\n    const token = document.cookie.match(/(?:^|;\\s*)turbine_observe_token=([a-f0-9]+)/)?.[1] || '';\n    const headers = { 'x-turbine-token': token };\n\n    document.querySelector('.controls').addEventListener('click', e => {\n      if (e.target.tagName !== 'BUTTON') return;\n      document.querySelectorAll('.controls button').forEach(b => b.classList.remove('active'));\n      e.target.classList.add('active');\n      currentRange = e.target.dataset.range;\n      refresh();\n    });\n\n    async function fetchJson(path) {\n      const res = await fetch(path, { headers });\n      if (!res.ok) return null;\n      return res.json();\n    }\n\n    function buildSvgPath(points, width, height, maxY) {\n      if (points.length === 0) return '';\n      const xStep = width / Math.max(points.length - 1, 1);\n      return points.map((y, i) => {\n        const px = i * xStep;\n        const py = height - (y / maxY) * height;\n        return (i === 0 ? 'M' : 'L') + px.toFixed(1) + ',' + py.toFixed(1);\n      }).join(' ');\n    }\n\n    function renderChart(data) {\n      const el = document.getElementById('chart');\n      if (!data || data.length === 0) { el.innerHTML = '<p class=\"empty\">No data yet</p>'; return; }\n      const width = 800; const height = 180;\n      const allVals = data.flatMap(d => [d.avg_ms, d.p95_ms, d.p99_ms]);\n      const maxY = Math.max(...allVals, 1) * 1.1;\n      const avgPath = buildSvgPath(data.map(d => d.avg_ms), width, height, maxY);\n      const p95Path = buildSvgPath(data.map(d => d.p95_ms), width, height, maxY);\n      const p99Path = buildSvgPath(data.map(d => d.p99_ms), width, height, maxY);\n      el.innerHTML = '<svg viewBox=\"0 0 ' + width + ' ' + height + '\" preserveAspectRatio=\"none\">'\n        + '<path class=\"chart-line line-avg\" d=\"' + avgPath + '\"/>'\n        + '<path class=\"chart-line line-p95\" d=\"' + p95Path + '\"/>'\n        + '<path class=\"chart-line line-p99\" d=\"' + p99Path + '\"/>'\n        + '</svg>';\n    }\n\n    function escapeHtml(s) {\n      if (s == null) return '';\n      return String(s)\n        .replace(/&/g, '&amp;')\n        .replace(/</g, '&lt;')\n        .replace(/>/g, '&gt;')\n        .replace(/\"/g, '&quot;')\n        .replace(/'/g, '&#39;');\n    }\n\n    // Numeric sink: counts are integer aggregates, but they are still values\n    // arriving over the wire, so coerce rather than interpolating them raw.\n    function num(v) {\n      const n = Number(v);\n      return Number.isFinite(n) ? String(n) : '0';\n    }\n\n    function renderModels(data) {\n      const el = document.getElementById('models-table');\n      if (!data || data.length === 0) { el.innerHTML = '<p class=\"empty\">No data yet</p>'; return; }\n      let html = '<table><thead><tr><th>Model</th><th>Action</th><th class=\"num\">Count</th><th class=\"num\">Avg (ms)</th><th class=\"num\">P95 (ms)</th><th class=\"num\">P99 (ms)</th></tr></thead><tbody>';\n      for (const row of data) {\n        html += '<tr><td>' + escapeHtml(row.model) + '</td><td>' + escapeHtml(row.action) + '</td>'\n          + '<td class=\"num\">' + num(row.count) + '</td>'\n          + '<td class=\"num\">' + row.avg_ms.toFixed(1) + '</td>'\n          + '<td class=\"num\">' + row.p95_ms.toFixed(1) + '</td>'\n          + '<td class=\"num\">' + row.p99_ms.toFixed(1) + '</td></tr>';\n      }\n      html += '</tbody></table>';\n      el.innerHTML = html;\n    }\n\n    function renderErrors(data) {\n      const el = document.getElementById('errors-table');\n      if (!data || data.length === 0) { el.innerHTML = '<p class=\"empty\">No errors</p>'; return; }\n      let html = '<table><thead><tr><th>Model</th><th>Action</th><th class=\"num\">Total</th><th class=\"num\">Errors</th><th class=\"num\">Rate</th></tr></thead><tbody>';\n      for (const row of data) {\n        const rate = row.count > 0 ? (row.error_count / row.count * 100).toFixed(1) : '0.0';\n        const cls = parseFloat(rate) > 5 ? 'error-rate' : 'low-error';\n        html += '<tr><td>' + escapeHtml(row.model) + '</td><td>' + escapeHtml(row.action) + '</td>'\n          + '<td class=\"num\">' + num(row.count) + '</td>'\n          + '<td class=\"num\">' + num(row.error_count) + '</td>'\n          + '<td class=\"num ' + cls + '\">' + rate + '%</td></tr>';\n      }\n      html += '</tbody></table>';\n      el.innerHTML = html;\n    }\n\n    async function refresh() {\n      const [latency, models] = await Promise.all([\n        fetchJson('/api/latency?range=' + currentRange),\n        fetchJson('/api/models?range=' + currentRange),\n      ]);\n      renderChart(latency);\n      renderModels(models);\n      // Derive errors from models data\n      const withErrors = (models || []).filter(m => m.error_count > 0);\n      renderErrors(withErrors);\n    }\n\n    refresh();\n    setInterval(refresh, 60000);\n  </script>\n</body>\n</html>";

package/dist/cli/observe-ui.js

@@ -15,7 +15,7 @@ export const OBSERVE_HTML = `<!doctype html>
       --border: #26262b;
       --text: #e6e6ea;
       --text-dim: #8a8a93;
-      --accent: #60a5fa;
+      --accent: #6f9bf7;
       --green: #4ade80;
       --red: #f87171;
       --orange: #fb923c;