@graphit/cli 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphit/cli",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Graphit CLI - Build custom dashboards from any AI coding assistant",
   "type": "module",
   "bin": {

package/skills/graphit/SKILL.md

@@ -22,6 +22,17 @@ If the output includes an "Update available" banner, tell the user to update bef
 When any `graphit` command fails with an unexpected error (unknown command, unrecognized flag, non-zero exit with unclear message), suggest `npm update -g @graphit/cli` before investigating further. Outdated CLI versions are the most common cause of unexpected errors.
 Do NOT suggest updating for normal operational failures (expired auth, bad SQL syntax, network timeout, entity not found).
 
+## After Setup
+
+After `graphit setup` completes successfully, offer to add a Graphit section to the project's CLAUDE.md (or AGENTS.md for Codex) so future sessions know Graphit is available without activating the skill. Suggested snippet:
+
+```
+## Graphit
+Use `/graphit` to build custom HTML dashboards from real data.
+Run `graphit ds list` to see cached data sources before querying.
+Run `graphit kb list` to explore available metrics and dimensions.
+```
+
 ## HARD CONSTRAINTS (violating these produces a broken dashboard)
 
 ### 1. ZERO external resources
@@ -91,10 +102,13 @@ NEVER embed query results as static JS variables. The dashboard iframe provides
 
 | Command | Description |
 |---------|-------------|
-| `graphit kb list <type>` | List metrics, dimensions, tables, rules, domains, synonyms |
+| `graphit kb list <type>` | List metrics, dimensions, tables, rules, domains, synonyms, templates |
 | `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 kb create template --name X --file template.html --description "..."` | Save a reusable chart template (--file or --render-code) |
+| `graphit kb update template <name> --file template.html --description "..."` | Update a template (--file or --render-code) |
+| `graphit kb delete template <name> --yes` | Delete a template |
 | `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) |
@@ -178,7 +192,7 @@ The iframe also provides optional convenience helpers if you want quick standard
 
 These are shortcuts, not requirements. Use them when a standard chart is all you need. Hand-roll when you want full control over the visualization.
 
-`graphit.chart` types: `"bar"`, `"line"`, `"area"`, `"donut"` (alias `"pie"`), `"scatter"` (alias `"bubble"`), `"stacked-bar"` (alias `"stacked"`), `"heatmap"`, `"funnel"`, `"gauge"`, `"sparkline"`. Config: `x` (category field), `y` (value field), `series` (group-by field), `title`, `height` (140-900px), `valueFormat` (`"currency"` | `"percent"` | `"number"`), `colors` (array). Scatter adds: `size` (bubble radius field), `label` (tooltip field). Gauge adds: `min`, `max`, `format`. Sparkline adds: `width`, `showValue`.
+`graphit.chart` types: `"bar"`, `"horizontal-bar"` (alias `"hbar"` - use when category labels are long), `"line"`, `"area"`, `"donut"` (alias `"pie"`), `"scatter"` (alias `"bubble"`), `"stacked-bar"` (alias `"stacked"`), `"heatmap"`, `"funnel"`, `"gauge"`, `"sparkline"`. Config: `x` (category field), `y` (value field), `series` (group-by field), `title`, `height` (140-900px), `valueFormat` (`"currency"` | `"percent"` | `"number"`), `colors` (array). Scatter adds: `size` (bubble radius field), `label` (tooltip field). Gauge adds: `min`, `max`, `format`. Sparkline adds: `width`, `showValue`.
 
 `graphit.kpi` config: `value`, `label`, `format` (`"currency"` | `"percent"` | `"number"`), `compareValue`, `compareLabel`.
 

package/skills/graphit/references/chart-patterns.md

@@ -27,6 +27,9 @@ Config: requires `series` field for stacking groups.
 CSS grid. X = columns, Y = rows. Background intensity scales linearly (rgba teal, 0.08-0.98). Text flips white at >55% intensity. Headers auto-generated. Capped at 40x40.
 Config: `x` (column), `y` (row), `value` (intensity, falls back to `y`).
 
+### horizontal-bar / hbar
+CSS horizontal bars for long category labels that overlap on vertical bar x-axis. Labels on the left, proportional bars in the middle, formatted values on the right. Each bar colored from the palette. Use instead of `bar` when categories have names longer than ~10 characters.
+
 ### funnel
 CSS horizontal bars narrowing top-to-bottom. First bar = 100% width, rest proportional. Shows step-over-step conversion rate. Colors cycle through palette.
 
@@ -38,6 +41,14 @@ Config: `value`, `min` (default 0), `max` (default 100), `format`, `label`, `col
 Inline SVG polyline for KPI cards or table cells. No axes, no grid - just trend shape. Single data point renders as a dot.
 Config: `y`, `width` (default 120), `height` (default 32), `label`, `showValue` (default true), `valueFormat`.
 
+## Saved templates
+
+Templates are reusable chart components saved to the org's KB. At dashboard load, the SDK fetches the org's template bundle and registers them alongside built-in types.
+
+**Usage:** `graphit.TEMPLATE_NAME(el, {data, value: 'revenue', label: 'Revenue'})` or via `graphit.chart(el, {type: 'TEMPLATE_NAME', ...})`.
+
+Templates are org-specific - they exist only when users have saved them. The agent's context provider lists available templates each turn. Use `list_templates()` to discover them and `get_template(name)` to read the render code.
+
 ## Color tokens
 
 | Token | Usage |