@graphit/cli 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,24 +0,0 @@
-#!/usr/bin/env node
-import { Command } from "commander";
-import { registerAuthCommands } from "./commands/auth.js";
-import { registerKBCommands } from "./commands/kb.js";
-import { registerQueryCommands } from "./commands/query.js";
-import { registerDSCommands } from "./commands/ds.js";
-import { registerDashboardCommands } from "./commands/dashboard.js";
-import { registerConnectorCommands } from "./commands/connector.js";
-import { registerSetupCommand } from "./commands/setup.js";
-const program = new Command();
-program
-    .name("graphit")
-    .description("Graphit CLI - Build custom dashboards from any AI coding assistant")
-    .version("0.1.1")
-    .option("--output <format>", "Output format: json (default) or table", "json");
-registerAuthCommands(program);
-registerKBCommands(program);
-registerQueryCommands(program);
-registerDSCommands(program);
-registerDashboardCommands(program);
-registerConnectorCommands(program);
-registerSetupCommand(program);
-program.parse();
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,SAAS,CAAC;KACf,WAAW,CAAC,oEAAoE,CAAC;KACjF,OAAO,CAAC,OAAO,CAAC;KAChB,MAAM,CAAC,mBAAmB,EAAE,wCAAwC,EAAE,MAAM,CAAC,CAAC;AAEjF,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAC9B,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAC5B,qBAAqB,CAAC,OAAO,CAAC,CAAC;AAC/B,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAC5B,yBAAyB,CAAC,OAAO,CAAC,CAAC;AACnC,yBAAyB,CAAC,OAAO,CAAC,CAAC;AACnC,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAE9B,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/dist/output/format.d.ts

@@ -1,8 +0,0 @@
-import { Command } from "commander";
-export type OutputFormat = "json" | "table";
-export declare function getOutputFormat(cmd: Command): OutputFormat;
-export declare function output(cmd: Command, data: unknown, opts?: {
-    columns?: string[];
-    keyValue?: boolean;
-}): void;
-export declare function errorOutput(err: unknown): void;

package/dist/output/format.js

@@ -1,30 +0,0 @@
-import { formatJson } from "./json.js";
-import { formatTable, formatKeyValue } from "./table.js";
-export function getOutputFormat(cmd) {
-    const root = cmd.parent ?? cmd;
-    const format = root.opts().output;
-    return format === "table" ? "table" : "json";
-}
-export function output(cmd, data, opts) {
-    const format = getOutputFormat(cmd);
-    if (format === "json") {
-        console.log(formatJson(data));
-        return;
-    }
-    if (opts?.keyValue && !Array.isArray(data)) {
-        console.log(formatKeyValue(data));
-        return;
-    }
-    const rows = Array.isArray(data) ? data : [data];
-    console.log(formatTable(rows, opts?.columns));
-}
-export function errorOutput(err) {
-    const message = err instanceof Error
-        ? err.message
-        : typeof err === "object" && err !== null && "detail" in err
-            ? err.detail
-            : String(err);
-    console.error(JSON.stringify({ error: message }));
-    process.exit(1);
-}
-//# sourceMappingURL=format.js.map

package/dist/output/format.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"format.js","sourceRoot":"","sources":["../../src/output/format.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIzD,MAAM,UAAU,eAAe,CAAC,GAAY;IAC1C,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC;IAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAgB,CAAC;IAC5C,OAAO,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,MAAM,CACpB,GAAY,EACZ,IAAa,EACb,IAAiD;IAEjD,MAAM,MAAM,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IAEpC,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9B,OAAO;IACT,CAAC;IAED,IAAI,IAAI,EAAE,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAC3C,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAA+B,CAAC,CAAC,CAAC;QAC7D,OAAO;IACT,CAAC;IAED,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACjD,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,IAAiC,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;AAC7E,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,GAAY;IACtC,MAAM,OAAO,GACX,GAAG,YAAY,KAAK;QAClB,CAAC,CAAC,GAAG,CAAC,OAAO;QACb,CAAC,CAAC,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,IAAI,IAAI,QAAQ,IAAI,GAAG;YAC1D,CAAC,CAAE,GAA0B,CAAC,MAAM;YACpC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAEpB,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IAClD,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC"}

package/dist/output/json.d.ts

@@ -1 +0,0 @@
-export declare function formatJson(data: unknown): string;

package/dist/output/json.js

@@ -1,4 +0,0 @@
-export function formatJson(data) {
-    return JSON.stringify(data, null, 2);
-}
-//# sourceMappingURL=json.js.map

package/dist/output/json.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"json.js","sourceRoot":"","sources":["../../src/output/json.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,UAAU,CAAC,IAAa;IACtC,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AACvC,CAAC"}

package/dist/output/table.d.ts

@@ -1,2 +0,0 @@
-export declare function formatTable(rows: Record<string, unknown>[], columns?: string[]): string;
-export declare function formatKeyValue(data: Record<string, unknown>): string;

package/dist/output/table.js

@@ -1,17 +0,0 @@
-export function formatTable(rows, columns) {
-    if (rows.length === 0)
-        return "(no results)";
-    const cols = columns || Object.keys(rows[0]);
-    const widths = cols.map((col) => Math.max(col.length, ...rows.map((r) => String(r[col] ?? "").length)));
-    const header = cols.map((col, i) => col.padEnd(widths[i])).join("  ");
-    const separator = widths.map((w) => "-".repeat(w)).join("  ");
-    const body = rows.map((row) => cols.map((col, i) => String(row[col] ?? "").padEnd(widths[i])).join("  "));
-    return [header, separator, ...body].join("\n");
-}
-export function formatKeyValue(data) {
-    const maxKeyLen = Math.max(...Object.keys(data).map((k) => k.length));
-    return Object.entries(data)
-        .map(([k, v]) => `${k.padEnd(maxKeyLen)}  ${v}`)
-        .join("\n");
-}
-//# sourceMappingURL=table.js.map

package/dist/output/table.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/output/table.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CACzB,IAA+B,EAC/B,OAAkB;IAElB,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,cAAc,CAAC;IAE7C,MAAM,IAAI,GAAG,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAC9B,IAAI,CAAC,GAAG,CACN,GAAG,CAAC,MAAM,EACV,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAChD,CACF,CAAC;IAEF,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9D,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAC5B,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAC1E,CAAC;IAEF,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,IAA6B;IAC1D,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IACtE,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SACxB,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;SAC/C,IAAI,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC"}

package/skill/cursor/graphit-chart-patterns.mdc

@@ -1,148 +0,0 @@
----
-alwaysApply: false
-description: "Graphit: Inline CSS/SVG/canvas implementations for dashboards. No external libraries - the iframe CSP blocks all external resources."
-globs: []
----
-
-# Chart Patterns
-
-Inline CSS/SVG/canvas implementations for dashboards. No external libraries - the iframe CSP blocks all external resources.
-
-## CSS Horizontal Bar
-```js
-var maxVal = Math.max.apply(null, data.map(function(d){return d.value}));
-data.forEach(function(d) {
-  var pct = (d.value / maxVal * 100).toFixed(1);
-  container.innerHTML += '<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">'
-    + '<span style="width:100px;font-size:13px;font-weight:500;text-align:right">' + d.name + '</span>'
-    + '<div style="flex:1;height:28px;background:var(--graphit-surface-sunken);border-radius:6px;overflow:hidden">'
-    + '<div style="width:' + pct + '%;height:100%;background:var(--graphit-accent);border-radius:6px;min-width:2px"></div></div>'
-    + '<span style="width:70px;font-size:13px;font-weight:600;text-align:right">' + fmt(d.value) + '</span></div>';
-});
-```
-
-## CSS Vertical Bar (Column)
-```js
-var maxVal = Math.max.apply(null, data.map(function(d){return d.value}));
-container.style.cssText = 'display:flex;align-items:flex-end;gap:8px;height:200px;padding-top:20px';
-data.forEach(function(d) {
-  var pct = (d.value / maxVal * 100).toFixed(1);
-  container.innerHTML += '<div style="flex:1;height:' + pct + '%;background:var(--graphit-accent);border-radius:4px 4px 0 0;'
-    + 'position:relative;min-width:30px">'
-    + '<span style="position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:600">'
-    + d.value + '</span>'
-    + '<span style="position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--graphit-fg-subtle);white-space:nowrap">'
-    + d.name + '</span></div>';
-});
-```
-
-## CSS Stacked Bar
-```js
-var colors = ['var(--graphit-accent)','#80CBC4','#26A69A','#5FA39B'];
-data.forEach(function(row) {
-  var total = row.segments.reduce(function(a,s){return a+s.value},0);
-  var html = '<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">'
-    + '<span style="width:100px;font-size:13px;font-weight:500;text-align:right">' + row.name + '</span>'
-    + '<div style="flex:1;height:28px;display:flex;border-radius:6px;overflow:hidden">';
-  row.segments.forEach(function(s, i) {
-    html += '<div style="width:' + (s.value/total*100).toFixed(1) + '%;height:100%;background:' + colors[i%colors.length] + '"></div>';
-  });
-  html += '</div><span style="width:70px;font-size:13px;font-weight:600;text-align:right">' + total + '</span></div>';
-  container.innerHTML += html;
-});
-```
-
-## SVG Line/Area Chart
-```js
-var w = 600, h = 200, pad = 20;
-var maxVal = Math.max.apply(null, data.map(function(d){return d.value}));
-var points = data.map(function(d, i) {
-  var x = pad + (i / (data.length - 1)) * (w - 2*pad);
-  var y = h - pad - ((d.value / maxVal) * (h - 2*pad));
-  return x + ',' + y;
-});
-svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
-svg.innerHTML =
-  '<path d="M' + points.join(' L') + ' L' + (w-pad) + ',' + (h-pad) + ' L' + pad + ',' + (h-pad) + ' Z" fill="rgba(77,182,172,0.15)"/>'
-  + '<path d="M' + points.join(' L') + '" fill="none" stroke="var(--graphit-accent)" stroke-width="2"/>';
-```
-
-## SVG Multi-Series Line
-```js
-var colors = ['var(--graphit-accent)','#FF7043','#7E57C2','#42A5F5'];
-series.forEach(function(s, si) {
-  var pts = s.values.map(function(v, i) {
-    var x = pad + (i / (s.values.length - 1)) * (w - 2*pad);
-    var y = h - pad - ((v / maxAll) * (h - 2*pad));
-    return x + ',' + y;
-  });
-  svg.innerHTML += '<path d="M' + pts.join(' L') + '" fill="none" stroke="' + colors[si] + '" stroke-width="2"/>';
-});
-```
-
-## SVG Sparkline (for KPI cards)
-```js
-var vals = [10,15,12,18,22,19,25];
-var max = Math.max.apply(null,vals), min = Math.min.apply(null,vals);
-var pts = vals.map(function(v,i){
-  return (i/(vals.length-1))*120 + ',' + (30 - ((v-min)/(max-min||1))*26 - 2);
-}).join(' L');
-sparkSvg.innerHTML = '<path d="M' + pts + '" fill="none" stroke="var(--graphit-accent)" stroke-width="1.5"/>';
-```
-
-## Canvas Donut Chart
-```js
-var ctx = canvas.getContext('2d');
-var slices = [{v:40,c:'var(--graphit-accent)'},{v:25,c:'#80CBC4'},{v:20,c:'#26A69A'},{v:15,c:'#009688'}];
-var total = slices.reduce(function(a,s){return a+s.v},0);
-var cx=150, cy=150, r=120, hole=70, angle = -Math.PI/2;
-slices.forEach(function(s) {
-  var arc = (s.v/total)*Math.PI*2;
-  ctx.beginPath(); ctx.moveTo(cx,cy);
-  ctx.arc(cx,cy,r,angle,angle+arc);
-  ctx.fillStyle=s.c; ctx.fill(); angle+=arc;
-});
-ctx.beginPath(); ctx.arc(cx,cy,hole,0,Math.PI*2);
-ctx.fillStyle='white'; ctx.fill();
-```
-
-## CSS Heatmap Grid
-```js
-var max = Math.max.apply(null, cells.map(function(c){return c.value}));
-container.style.cssText = 'display:grid;grid-template-columns:repeat(' + cols + ',1fr);gap:2px';
-cells.forEach(function(c) {
-  var intensity = c.value / max;
-  var bg = 'rgba(77,182,172,' + (0.1 + intensity*0.9).toFixed(2) + ')';
-  var fg = intensity > 0.6 ? 'white' : 'var(--graphit-fg)';
-  container.innerHTML += '<div style="aspect-ratio:1;border-radius:3px;display:flex;align-items:center;'
-    + 'justify-content:center;font-size:11px;font-weight:600;background:' + bg + ';color:' + fg + '">'
-    + c.value + '</div>';
-});
-```
-
-## CSS Funnel
-```js
-var maxVal = data[0].value;
-data.forEach(function(d, i) {
-  var pct = (d.value / maxVal * 100).toFixed(1);
-  var rate = i > 0 ? (d.value / data[i-1].value * 100).toFixed(1) + '%' : '';
-  container.innerHTML += '<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">'
-    + '<span style="width:120px;font-size:13px;text-align:right">' + d.name + '</span>'
-    + '<div style="width:' + pct + '%;height:36px;background:var(--graphit-accent);border-radius:4px;'
-    + 'display:flex;align-items:center;padding:0 12px;color:white;font-weight:600;font-size:13px">'
-    + d.value.toLocaleString() + '</div>'
-    + '<span style="font-size:12px;color:var(--graphit-fg-subtle)">' + rate + '</span></div>';
-});
-```
-
-## CSS Gauge / Progress
-```html
-<div style="position:relative;width:200px;height:100px;overflow:hidden">
-  <div id="gauge-arc" style="width:200px;height:200px;border-radius:50%;
-       background:conic-gradient(var(--graphit-accent) 0% 72%, var(--graphit-surface-sunken) 72% 100%);
-       clip-path:inset(0 0 50% 0)"></div>
-  <div style="position:absolute;bottom:0;left:50%;transform:translateX(-50%);
-       font-size:28px;font-weight:700">72%</div>
-</div>
-```
-Dynamic: set `background: conic-gradient(var(--graphit-accent) 0% ${pct}%, var(--graphit-surface-sunken) ${pct}% 100%)`.

package/skill/graphit.mdc

@@ -1,135 +0,0 @@
----
-alwaysApply: false
-description: "Build Graphit HTML dashboards with KB-aware queries and entity wrapping"
-globs: []
----
-
-# Graphit CLI
-
-Build custom HTML dashboards from real data using the Graphit CLI.
-
-## HARD CONSTRAINTS (violating these produces a broken dashboard)
-
-### 1. ZERO external resources
-The dashboard renders in a sandboxed iframe with a strict CSP. External requests are BLOCKED.
-Your HTML must NEVER contain:
-- `<script src="...">` - no Chart.js, D3.js, Alpine.js, ANY external JS
-- `<link href="...">` - no Tailwind CDN, Google Fonts, ANY external CSS
-- `<img src="https://...">` - no external images
-
-If you use ANY `src=` or `href=` pointing to a URL, the dashboard will be blank.
-Build charts with: CSS width% bars, inline SVG paths, or `<canvas>` with inline drawing code.
-All CSS in `<style>`, all JS in `<script>`, all fonts from system stack.
-
-### 2. EVERY element must have entity wrapping
-Without `data-graphit-*` attributes, elements are invisible to the platform - no click info, no mentions, no KB provenance. Every chart, KPI card, table, and text section needs ALL FOUR attributes:
-
-```html
-<div data-graphit-id="revenue-trend"
-     data-graphit-label="Revenue Trend"
-     data-graphit-kb="metric:REVENUE,dimension:REGION,table:ORDERS"
-     data-graphit-sql="SELECT region, SUM(revenue) FROM orders GROUP BY region">
-  <!-- chart/KPI/table content here -->
-</div>
-```
-
-| Attribute | Format | Example |
-|-----------|--------|---------|
-| `data-graphit-id` | Unique kebab-case | `"spend-by-source"` |
-| `data-graphit-label` | Human-readable name | `"Ad Spend by Source"` |
-| `data-graphit-kb` | `type:NAME` comma-separated | `"metric:CPI,dimension:MEDIA_SOURCE,table:MARKETING_UA"` |
-| `data-graphit-sql` | SQL query (HTML-encode `<>&"`) | `"SELECT ..."` |
-
-KB types: `metric`, `dimension`, `table`, `rule`. Names are UPPER_SNAKE_CASE matching the KB exactly.
-
-**Label = visible title.** The `data-graphit-label` MUST match the card's visible heading exactly. Users see labels in @ mention dropdowns - mismatched labels mean they can't find their chart.
-
-### 2. ALWAYS query through data sources
-NEVER query the warehouse directly when a cached data source covers the table. Data sources return in ~100ms. Warehouse queries take ~10s and cost Snowflake credits.
-
-Run `graphit ds list` FIRST. If a DS covers your table, use `graphit query "SQL" --ds <id>`. Only use `--warehouse` if NO data source exists and the user approves.
-
----
-
-## Workflow
-
-1. **Ask the user** what dashboard they want. Don't start querying until you know what they need.
-2. **Explore KB** to understand available metrics, dimensions, tables, and tables.
-3. **Find a data source** (`graphit ds list`) - prefer cached data sources (~100ms) over live warehouse (~10s).
-4. **Query data** and embed results as inline JS variables.
-5. **Build HTML** - all CSS and JS must be inline. Write to a local `.html` file.
-6. **Save** with `graphit dashboard update-html <id> --file <path>`.
-7. Give the user the dashboard URL so they can open it.
-
-## Commands
-
-| Command | Description |
-|---------|-------------|
-| `graphit kb list <type>` | List metrics, dimensions, tables, rules, domains, synonyms |
-| `graphit kb get <type> <name>` | Full entity details by name |
-| `graphit kb search <query>` | Search across all KB types |
-| `graphit kb explore metric <name>` | Metric -> tables -> dimensions graph |
-| `graphit ds list` | List cached data sources (use these for fast queries) |
-| `graphit query "<sql>" --ds <id>` | Query cached data source (~100ms) |
-| `graphit query "<sql>" --warehouse --connection <id>` | Query live Snowflake (~10s) |
-| `graphit dashboard create --name "..."` | Create dashboard (returns ID) |
-| `graphit dashboard update-html <id> --file <path>` | Upload HTML to dashboard |
-| `graphit dashboard list` | List existing dashboards |
-| `graphit metadata schemas --connection <id>` | List Snowflake schemas |
-| `graphit connector list` | List active connections |
-
-## Presenting Results to the User
-
-The user CANNOT see raw CLI output clearly. You MUST format and present every result - never silently consume tool output and move on.
-
-**After every query**, show the data:
-```
-Queried **MARKETING_UA** (ds_abc123, 6 rows):
-
-| Channel     | Spend    | Installs | CPI   |
-|-------------|----------|----------|-------|
-| Facebook    | $42,100  | 12,400   | $3.40 |
-| Google UAC  | $38,500  | 9,800    | $3.93 |
-| TikTok      | $21,300  | 8,200    | $2.60 |
-```
-```
-
-**After KB exploration**, summarize what you found:
-```
-Found **12 metrics** and **8 dimensions** on table MARKETING_UA:
-- **Metrics:** TOTAL_SPEND, CPI, ROAS_D7, ROAS_D30, INSTALLS, ...
-- **Dimensions:** MEDIA_SOURCE, CAMPAIGN_NAME, COUNTRY, PLATFORM, ...
-- **Rules:** EXCLUDE_ORGANIC (filters organic installs from paid metrics)
-```
-
-**Formatting rules:**
-- **Bold** metric names, table names, and key numbers
-- Use **markdown tables** for any tabular data (query results, entity lists, comparisons)
-- Format numbers: commas for thousands (`12,400`), `$` for currency, `%` for rates
-- After KB or data source discovery, list what's available before asking what to build
-- Show the SQL you ran (in a code block) so the user can validate the logic
-- When a query returns nulls or zero rows, explain what you checked and what went wrong
-- Narrate your progress between steps: "Found 3 data sources. Using **Marketing UA DS** (ds_abc123) which covers spend, installs, and ROAS columns."
-
-**Never do these:**
-- Run 3 queries silently then jump to building HTML
-- Say "I found the data" without showing what the data looks like
-- Present raw JSON output without formatting
-- Skip showing KB exploration results before proposing a dashboard
-
----
-
-## Chart Type Quick Reference
-
-| Data shape | Chart | Inline technique |
-|---|---|---|
-| 1 temporal + 1 numeric | Line | SVG path |
-| 1 categorical + 1 numeric | Bar | CSS width% divs |
-| Single number | KPI card | Styled div |
-| Part-whole (max 5) | Donut | Canvas arc |
-| Matrix / cohort | Heatmap | CSS grid + opacity |
-| Stages | Funnel | CSS width% bars, narrowing |
-| Time sparkline | Sparkline | Inline SVG path |
-| Detail / raw data | Table | HTML table + hover rows |
-
-For detailed chart selection logic, dashboard planning, SQL reference, domain-specific lenses, Graphit visual style, and chart pattern implementations, see the companion rule files (graphit-planning, graphit-sql, graphit-lenses, graphit-style, graphit-kb, graphit-patterns).

package/skill/references/chart-patterns.md

@@ -1,257 +0,0 @@
-# Chart Patterns
-
-Inline CSS/SVG implementations for dashboards. No external libraries - the iframe CSP blocks all external resources.
-
-**NEVER use `<canvas>`.** Canvas produces blurry charts inside the sandboxed iframe due to DPI scaling issues. Always use SVG with `viewBox` (resolution-independent) or CSS-based techniques.
-
-**Tooltips:** Every chart with data points should include hover tooltips. Use a shared tooltip div and attach DOM events on SVG elements or HTML rows. See the Tooltip Pattern section at the bottom.
-
-## CSS Horizontal Bar
-```js
-var maxVal = Math.max.apply(null, data.map(function(d){return d.value}));
-data.forEach(function(d) {
-  var pct = (d.value / maxVal * 100).toFixed(1);
-  container.innerHTML += '<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">'
-    + '<span style="width:100px;font-size:13px;font-weight:500;text-align:right">' + d.name + '</span>'
-    + '<div style="flex:1;height:28px;background:var(--graphit-surface-sunken);border-radius:6px;overflow:hidden">'
-    + '<div style="width:' + pct + '%;height:100%;background:var(--graphit-accent);border-radius:6px;min-width:2px"></div></div>'
-    + '<span style="width:70px;font-size:13px;font-weight:600;text-align:right">' + fmt(d.value) + '</span></div>';
-});
-```
-
-## CSS Vertical Bar (Column)
-```js
-var maxVal = Math.max.apply(null, data.map(function(d){return d.value}));
-container.style.cssText = 'display:flex;align-items:flex-end;gap:8px;height:200px;padding-top:20px';
-data.forEach(function(d) {
-  var pct = (d.value / maxVal * 100).toFixed(1);
-  container.innerHTML += '<div style="flex:1;height:' + pct + '%;background:var(--graphit-accent);border-radius:4px 4px 0 0;'
-    + 'position:relative;min-width:30px">'
-    + '<span style="position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:600">'
-    + d.value + '</span>'
-    + '<span style="position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--graphit-fg-subtle);white-space:nowrap">'
-    + d.name + '</span></div>';
-});
-```
-
-## CSS Stacked Bar
-```js
-var colors = ['var(--graphit-accent)','#80CBC4','#26A69A','#5FA39B'];
-data.forEach(function(row) {
-  var total = row.segments.reduce(function(a,s){return a+s.value},0);
-  var html = '<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">'
-    + '<span style="width:100px;font-size:13px;font-weight:500;text-align:right">' + row.name + '</span>'
-    + '<div style="flex:1;height:28px;display:flex;border-radius:6px;overflow:hidden">';
-  row.segments.forEach(function(s, i) {
-    html += '<div style="width:' + (s.value/total*100).toFixed(1) + '%;height:100%;background:' + colors[i%colors.length] + '"></div>';
-  });
-  html += '</div><span style="width:70px;font-size:13px;font-weight:600;text-align:right">' + total + '</span></div>';
-  container.innerHTML += html;
-});
-```
-
-## SVG Line/Area Chart
-```js
-var w = 600, h = 200, pad = 20;
-var maxVal = Math.max.apply(null, data.map(function(d){return d.value}));
-var points = data.map(function(d, i) {
-  var x = pad + (i / (data.length - 1)) * (w - 2*pad);
-  var y = h - pad - ((d.value / maxVal) * (h - 2*pad));
-  return x + ',' + y;
-});
-svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
-svg.innerHTML =
-  '<path d="M' + points.join(' L') + ' L' + (w-pad) + ',' + (h-pad) + ' L' + pad + ',' + (h-pad) + ' Z" fill="rgba(77,182,172,0.15)"/>'
-  + '<path d="M' + points.join(' L') + '" fill="none" stroke="var(--graphit-accent)" stroke-width="2"/>';
-```
-
-## SVG Multi-Series Line
-```js
-var colors = ['var(--graphit-accent)','#FF7043','#7E57C2','#42A5F5'];
-series.forEach(function(s, si) {
-  var pts = s.values.map(function(v, i) {
-    var x = pad + (i / (s.values.length - 1)) * (w - 2*pad);
-    var y = h - pad - ((v / maxAll) * (h - 2*pad));
-    return x + ',' + y;
-  });
-  svg.innerHTML += '<path d="M' + pts.join(' L') + '" fill="none" stroke="' + colors[si] + '" stroke-width="2"/>';
-});
-```
-
-## SVG Sparkline (for KPI cards)
-```js
-var vals = [10,15,12,18,22,19,25];
-var max = Math.max.apply(null,vals), min = Math.min.apply(null,vals);
-var pts = vals.map(function(v,i){
-  return (i/(vals.length-1))*120 + ',' + (30 - ((v-min)/(max-min||1))*26 - 2);
-}).join(' L');
-sparkSvg.innerHTML = '<path d="M' + pts + '" fill="none" stroke="var(--graphit-accent)" stroke-width="1.5"/>';
-```
-
-## SVG Donut Chart
-```js
-var slices = [{v:40,c:'var(--graphit-accent)',label:'Category A'},{v:25,c:'#80CBC4',label:'Category B'},{v:20,c:'#26A69A',label:'Category C'},{v:15,c:'#009688',label:'Category D'}];
-var total = slices.reduce(function(a,s){return a+s.v},0);
-var cx=100, cy=100, r=80, hole=50, angle=-Math.PI/2;
-svg.setAttribute('viewBox','0 0 200 200');
-slices.forEach(function(s) {
-  var arc = (s.v/total)*Math.PI*2;
-  var x1 = cx + r*Math.cos(angle), y1 = cy + r*Math.sin(angle);
-  var x2 = cx + r*Math.cos(angle+arc), y2 = cy + r*Math.sin(angle+arc);
-  var large = arc > Math.PI ? 1 : 0;
-  var path = 'M'+x1+','+y1+' A'+r+','+r+' 0 '+large+' 1 '+x2+','+y2+' L'+cx+','+cy+' Z';
-  var el = document.createElementNS('http://www.w3.org/2000/svg','path');
-  el.setAttribute('d', path); el.setAttribute('fill', s.c);
-  el.style.cursor = 'pointer';
-  el.addEventListener('mouseenter', function(e) { showTooltip(e, s.label+': '+s.v+' ('+(s.v/total*100).toFixed(1)+'%)'); });
-  el.addEventListener('mouseleave', hideTooltip);
-  svg.appendChild(el);
-  angle += arc;
-});
-// Center hole
-var circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
-circle.setAttribute('cx',cx); circle.setAttribute('cy',cy); circle.setAttribute('r',hole);
-circle.setAttribute('fill','var(--graphit-surface-raised)');
-svg.appendChild(circle);
-```
-
-## SVG Scatter / Bubble Chart
-```js
-// data: [{label, x, y, size}]  x/y are raw values, size is relative (0-1)
-var svgW=500, svgH=300, pad={top:16,right:16,bottom:36,left:50};
-var pW=svgW-pad.left-pad.right, pH=svgH-pad.top-pad.bottom;
-svg.setAttribute('viewBox','0 0 '+svgW+' '+svgH);
-var maxX=Math.max.apply(null,data.map(function(d){return d.x}))*1.1;
-var maxY=Math.max.apply(null,data.map(function(d){return d.y}))*1.15;
-// Sort large-to-small so small bubbles render on top
-data.sort(function(a,b){return b.size-a.size});
-data.forEach(function(d) {
-  var cx = pad.left + (d.x/maxX)*pW;
-  var cy = svgH - pad.bottom - (d.y/maxY)*pH;
-  var r = Math.max(5, Math.sqrt(d.size)*28);
-  var g = document.createElementNS('http://www.w3.org/2000/svg','g');
-  g.style.cursor = 'pointer';
-  var c = document.createElementNS('http://www.w3.org/2000/svg','circle');
-  c.setAttribute('cx',cx); c.setAttribute('cy',cy); c.setAttribute('r',r);
-  c.setAttribute('fill','var(--graphit-accent)'); c.setAttribute('fill-opacity','0.55');
-  c.setAttribute('stroke','var(--graphit-accent)'); c.setAttribute('stroke-width','1.5');
-  g.appendChild(c);
-  var t = document.createElementNS('http://www.w3.org/2000/svg','text');
-  t.setAttribute('x',cx); t.setAttribute('y',cy-r-4);
-  t.setAttribute('text-anchor','middle'); t.setAttribute('font-size','10');
-  t.setAttribute('fill','var(--graphit-fg-subtle)');
-  t.textContent = d.label; g.appendChild(t);
-  g.addEventListener('mouseenter', function(e){ showTooltip(e, d.tooltipHtml); });
-  g.addEventListener('mousemove', function(e){ showTooltip(e, tooltip.innerHTML); });
-  g.addEventListener('mouseleave', hideTooltip);
-  svg.appendChild(g);
-});
-```
-
-## CSS Heatmap Grid
-```js
-var max = Math.max.apply(null, cells.map(function(c){return c.value}));
-container.style.cssText = 'display:grid;grid-template-columns:repeat(' + cols + ',1fr);gap:2px';
-cells.forEach(function(c) {
-  var intensity = c.value / max;
-  var bg = 'rgba(77,182,172,' + (0.1 + intensity*0.9).toFixed(2) + ')';
-  var fg = intensity > 0.6 ? 'white' : 'var(--graphit-fg)';
-  container.innerHTML += '<div style="aspect-ratio:1;border-radius:3px;display:flex;align-items:center;'
-    + 'justify-content:center;font-size:11px;font-weight:600;background:' + bg + ';color:' + fg + '">'
-    + c.value + '</div>';
-});
-```
-
-## CSS Funnel
-```js
-var maxVal = data[0].value;
-data.forEach(function(d, i) {
-  var pct = (d.value / maxVal * 100).toFixed(1);
-  var rate = i > 0 ? (d.value / data[i-1].value * 100).toFixed(1) + '%' : '';
-  container.innerHTML += '<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">'
-    + '<span style="width:120px;font-size:13px;text-align:right">' + d.name + '</span>'
-    + '<div style="width:' + pct + '%;height:36px;background:var(--graphit-accent);border-radius:4px;'
-    + 'display:flex;align-items:center;padding:0 12px;color:white;font-weight:600;font-size:13px">'
-    + d.value.toLocaleString() + '</div>'
-    + '<span style="font-size:12px;color:var(--graphit-fg-subtle)">' + rate + '</span></div>';
-});
-```
-
-## CSS Gauge / Progress
-```html
-<div style="position:relative;width:200px;height:100px;overflow:hidden">
-  <div id="gauge-arc" style="width:200px;height:200px;border-radius:50%;
-       background:conic-gradient(var(--graphit-accent) 0% 72%, var(--graphit-surface-sunken) 72% 100%);
-       clip-path:inset(0 0 50% 0)"></div>
-  <div style="position:absolute;bottom:0;left:50%;transform:translateX(-50%);
-       font-size:28px;font-weight:700">72%</div>
-</div>
-```
-Dynamic: set `background: conic-gradient(var(--graphit-accent) 0% ${pct}%, var(--graphit-surface-sunken) ${pct}% 100%)`.
-
-## Tooltip Pattern
-
-Every chart with data points should have hover tooltips. Add ONE shared tooltip div to the page and reuse it from all charts.
-
-### HTML (add once, before `<script>`)
-```html
-<div id="tooltip" style="position:fixed;pointer-events:none;z-index:100;
-  background:var(--graphit-surface-raised);color:var(--graphit-fg);
-  border:1px solid var(--graphit-border);border-radius:8px;
-  padding:10px 14px;font-size:13px;line-height:1.5;
-  box-shadow:0 4px 12px rgba(0,0,0,0.15);opacity:0;transition:opacity 0.15s;
-  max-width:240px"></div>
-```
-
-### JS helpers (add once)
-```js
-var tooltip = document.getElementById('tooltip');
-function showTooltip(e, html) {
-  tooltip.innerHTML = html;
-  tooltip.style.opacity = '1';
-  var tx = Math.min(e.clientX + 12, window.innerWidth - 260);
-  var ty = e.clientY - tooltip.offsetHeight - 8;
-  tooltip.style.left = tx + 'px';
-  tooltip.style.top = (ty < 4 ? e.clientY + 16 : ty) + 'px';
-}
-function hideTooltip() { tooltip.style.opacity = '0'; }
-```
-
-### Tooltip row layout
-```html
-<!-- Inside tooltip content -->
-<div style="font-weight:700;margin-bottom:4px">Title</div>
-<div style="display:flex;justify-content:space-between;gap:16px">
-  <span style="color:var(--graphit-fg-muted)">Label</span>
-  <span style="font-weight:600">Value</span>
-</div>
-```
-
-### SVG event attachment patterns
-```js
-// Bubble/scatter/donut: attach on each SVG <g> or <path>
-element.addEventListener('mouseenter', function(e) { showTooltip(e, htmlContent); });
-element.addEventListener('mousemove', function(e) { showTooltip(e, tooltip.innerHTML); });
-element.addEventListener('mouseleave', hideTooltip);
-
-// Line chart: invisible rect columns per x-tick + vertical guide line
-weekData.forEach(function(w, i) {
-  var rect = document.createElementNS(NS, 'rect');
-  // x, y, width=colWidth, height=plotHeight, fill='transparent', cursor='pointer'
-  var vLine = document.createElementNS(NS, 'line');
-  // vertical dashed line at xPos(i), opacity=0
-  rect.addEventListener('mouseenter', function(e) {
-    vLine.setAttribute('opacity', '1');
-    showTooltip(e, buildWeekTooltip(w));
-  });
-  rect.addEventListener('mouseleave', function() {
-    vLine.setAttribute('opacity', '0');
-    hideTooltip();
-  });
-});
-
-// CSS bar rows: attach on each bar <div> row
-row.addEventListener('mouseenter', function(e) { showTooltip(e, htmlContent); });
-row.addEventListener('mousemove', function(e) { showTooltip(e, tooltip.innerHTML); });
-row.addEventListener('mouseleave', hideTooltip);
-```