@@ -0,0 +1,17 @@
+---
+'@hyperdx/cli': minor
+---
+
+Add terminal charting to the CLI, built on the same renderChartConfig SQL
+pipeline as the web dashboards:
+
+- Interactive Dashboards page in the TUI (`d` key) with tile navigation,
+  fullscreen tiles, time-range editing, and refresh
+- `hdx chart` command for troubleshooting from the terminal (including by
+  AI agents): render saved dashboard tiles (`-d/-t`), ad-hoc builder charts
+  (`-s <source>` with `--agg/--value/--where/--group-by/--series`), or ad-hoc
+  raw SQL (`--sql` with `$__timeFilter`/`$__timeInterval` macros)
+- Supported chart types: line, stacked bar, number, table, bar, pie, and
+  markdown; flexible time ranges (`--since 1h`, `--from now-24h`, ISO dates);
+  `--json` output for structured consumption; ANSI colors auto-stripped when
+  piping (`--color auto|always|never`)
@@ -17,6 +17,10 @@ hdx tui -s <url>                    # Interactive TUI (main command)
 hdx stream -s <url> --source "Logs" # Non-interactive streaming to stdout
 hdx sources -s <url>                # List available sources
 hdx connections                     # List ClickHouse connections (id, name, host)
+hdx dashboards                      # List dashboards with tile summaries
+hdx chart -d <dashboard> [-t tile]  # Render dashboard tiles as ANSI charts
+hdx chart -s <source> [--agg ...]   # Ad-hoc chart over a source (builder mode)
+hdx chart --sql <query> -s <source> # Ad-hoc chart from raw SQL
 hdx auth login -s <url>             # Sign in (interactive or -e/-p flags)
 hdx auth status                     # Show auth status (reads saved session)
 hdx auth logout                     # Clear saved session
@@ -48,12 +52,27 @@ src/
 │                        #   buildFullRowSql (SELECT * for row detail)
 ├── components/
 │   ├── AlertsPage.tsx   # Alerts overview page — list + detail with recent history (Shift+A)
+│   ├── DashboardPage.tsx # Dashboards page — picker + tile chart view (d)
+│   ├── Tile/            # Dashboard tile charting (mirror of web Tile component)
+│   │   ├── TileChart.tsx  # Ink wrapper: query + render per displayType
+│   │   └── useTileData.ts # React hook around shared/tileQuery fetchTileData
 │   ├── EventViewer.tsx  # Main TUI view — table, search, detail panel with tabs
 │   ├── TraceWaterfall.tsx # Trace waterfall chart with j/k navigation + event details
 │   ├── RowOverview.tsx  # Structured overview (top-level attrs, event attrs, resource attrs)
 │   ├── ColumnValues.tsx # Shared key-value renderer (used by Column Values tab + Event Details)
 │   ├── LoginForm.tsx    # Email/password login form (used inside TUI App)
 │   └── SourcePicker.tsx # Arrow-key source selector
+├── shared/
+│   ├── tileConfig.ts    # Tile → queryable chart config resolution + per-displayType
+│   │                    #   transforms (ports of web DBDashboardPage / ChartUtils)
+│   ├── tileQuery.ts     # fetchTileData — executes via queryChartConfig (renderChartConfig)
+│   ├── tileRender.ts    # displayType → ANSI string dispatch (mirror of renderChartContent)
+│   ├── chartData.ts     # Response shaping (formatResponseForTimeChart etc. ports)
+│   └── formatNumber.ts  # numbro-based formatNumber + number-format resolution ports
+├── termchart/           # Self-contained ANSI chart renderers (only dep: chalk) —
+│                        #   line, stacked bar, categorical, number, table, markdown,
+│                        #   peak-preserving resampling + nice y-axis ticks. No HyperDX
+│                        #   imports; candidate for open-sourcing. See termchart/README.md
 └── utils/
     ├── config.ts        # Session persistence (~/.config/hyperdx/cli/session.json)
     ├── editor.ts        # $EDITOR integration for time range and select clause editing
@@ -112,6 +131,56 @@ Port of the web frontend's `DBRowOverviewPanel`. Three sections:
    `source.resourceAttributesExpression`, rendered as chips with
    `backgroundColor="#3a3a3a"` and cyan key / white value
 
+### DashboardPage + Tile charting (`components/DashboardPage.tsx`, `components/Tile/`)
+
+Dashboard tiles are queried and rendered with the **same SQL pipeline as the
+web dashboard**:
+
+1. `shared/tileConfig.ts` resolves a tile's `SavedChartConfig` against its
+   source (port of the web Tile's `queriedConfig` effect in
+   `DBDashboardPage.tsx`) and applies the per-displayType config transform
+   (`convertToTimeChartConfig` / `convertToNumberChartConfig` /
+   `convertToTableChartConfig` / `convertToCategoricalChartConfig`).
+2. `shared/tileQuery.ts` executes it via
+   `clickhouseClient.queryChartConfig()` from common-utils — internally
+   `setChartSelectsAlias → splitChartConfigs → renderChartConfig`, identical
+   to the web's `useQueriedChartConfig` core (minus chunking / MV
+   optimization / PromQL).
+3. `shared/chartData.ts` shapes the response (ports of
+   `formatResponseForTimeChart`, `formatResponseForCategoricalChart`, etc.).
+4. `termchart/` renders pure ANSI strings, consumed by both the Ink
+   `TileChart` component and the non-interactive `hdx chart` command. It is
+   a self-contained module (only dependency: chalk) — number formatting is
+   injected via callbacks, and it must never import from the rest of the
+   CLI.
+
+Supported display types: line, stacked_bar, number, table, bar, pie,
+markdown. Heatmap / search / event patterns / PromQL show a placeholder.
+The web's previous-period comparison overlay is not rendered; tiles with
+`compareToPreviousPeriod` set show a dim callout instead.
+Time-series charts stretch to the full terminal width via peak-preserving
+resampling (`resampleSeries`): bucket values are placed exactly at their
+nearest column (upscale) or each column keeps its bucket range's
+max-magnitude value (downscale) — plain linear interpolation would sample
+*between* buckets and attenuate narrow spikes. Stacked bars map columns to
+buckets nearest-neighbor (upscale) or by max-total bucket (downscale).
+Auto granularity is capped at 80 buckets like the web (`maxTimeBuckets`).
+Y-axes use "nice" tick domains (`niceTicks`, steps of 1/2/2.5/5×10ⁿ,
+zero-pinned, max rounded up) with sparse tick-row labels — mirroring the
+web's recharts `domain={[0, 'auto']}` axis rather than labeling every row
+with raw range fractions.
+
+The `hdx chart` command (designed for agent-driven troubleshooting) reuses
+this same pipeline in three modes: dashboard tiles (`-d`), ad-hoc builder
+charts (`-s <source>` + `--agg/--value/--where/--group-by/--series`, built
+by `shared/adhocChart.ts`), and ad-hoc raw SQL (`--sql` with
+`$__timeFilter` / `$__timeInterval` macros). ANSI colors are stripped
+automatically when stdout is not a TTY (`--color auto|always|never`), and
+`--json` emits raw rows + column metadata.
+
+Do NOT change resolution/shaping rules without checking the web components
+first (see the alignment table below).
+
 ### ColumnValues (`components/ColumnValues.tsx`)
 
 Shared component for rendering key-value pairs from a row data object. Used by:
@@ -127,13 +196,17 @@ This package mirrors several web frontend components. **Always check the
 corresponding web component before making changes** to ensure behavior stays
 consistent:
 
-| CLI Component    | Web Component           | Notes                            |
-| ---------------- | ----------------------- | -------------------------------- |
-| `TraceWaterfall` | `DBTraceWaterfallChart` | Tree builder is a direct port    |
-| `RowOverview`    | `DBRowOverviewPanel`    | Same sections and field list     |
-| Trace tab logic  | `DBTracePanel`          | Source resolution (trace/log)    |
-| Detail panel     | `DBRowSidePanel`        | Tab structure, highlight hint    |
-| Event query      | `DBTraceWaterfallChart` | `getConfig()` → `buildTrace*Sql` |
+| CLI Component          | Web Component                     | Notes                              |
+| ---------------------- | --------------------------------- | ---------------------------------- |
+| `TraceWaterfall`       | `DBTraceWaterfallChart`           | Tree builder is a direct port      |
+| `RowOverview`          | `DBRowOverviewPanel`              | Same sections and field list       |
+| Trace tab logic        | `DBTracePanel`                    | Source resolution (trace/log)      |
+| Detail panel           | `DBRowSidePanel`                  | Tab structure, highlight hint      |
+| Event query            | `DBTraceWaterfallChart`           | `getConfig()` → `buildTrace*Sql`   |
+| `shared/tileConfig`    | `DBDashboardPage` + `ChartUtils`  | Tile config resolution/transforms  |
+| `shared/tileRender`    | `DBDashboardPage`                 | `renderChartContent` dispatch      |
+| `shared/chartData`     | `ChartUtils`                      | Response shaping ports             |
+| `shared/formatNumber`  | `utils.ts` + `source.ts`          | formatNumber + format resolution   |
 
 Key expression mappings from the web frontend's `getConfig()`:
 
@@ -163,12 +236,18 @@ Key expression mappings from the web frontend's `getConfig()`:
 | `o`           | Open trace in browser (detail panel)       |
 | `w`           | Toggle line wrap                           |
 | `A` (Shift+A) | Open alerts page                           |
+| `d`           | Open dashboards page                       |
 | `?`           | Toggle help screen                         |
 | `q`           | Quit                                       |
 
 In the **Trace tab**, `j`/`k` navigate spans/logs in the waterfall instead of
 the main table.
 
+In the **Dashboards page**: `j`/`k` select a tile, `Enter`/`l` opens the tile
+fullscreen, `t` edits the time range in `$EDITOR`, `r` refetches all tiles,
+`Esc`/`h` goes back (fullscreen → tile list → dashboard picker → previous
+screen).
+
 ## Development
 
 ```bash
 
@@ -54,6 +54,7 @@
     "ink-spinner": "^5.0.0",
     "ink-text-input": "^6.0.0",
     "jest": "^30.2.0",
+    "numbro": "^2.5.0",
     "react": "^19.0.0",
     "react-devtools-core": "^7.0.1",
     "sqlstring": "^2.3.3",
 
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
 
@@ -10,12 +10,19 @@ import {
   type SavedSearchResponse,
 } from '@/api/client';
 import AlertsPage from '@/components/AlertsPage';
+import DashboardPage from '@/components/DashboardPage';
 import ErrorDisplay from '@/components/ErrorDisplay';
 import LoginForm from '@/components/LoginForm';
 import SourcePicker from '@/components/SourcePicker';
 import EventViewer from '@/components/EventViewer';
 
-type Screen = 'loading' | 'login' | 'pick-source' | 'events' | 'alerts';
+type Screen =
+  | 'loading'
+  | 'login'
+  | 'pick-source'
+  | 'events'
+  | 'alerts'
+  | 'dashboards';
 
 interface AppProps {
   appUrl: string;
@@ -33,13 +40,24 @@ export default function App({ appUrl, query, sourceName, follow }: AppProps) {
   const [currentAppUrl, setCurrentAppUrl] = useState(appUrl);
   const [sessionExpired, setSessionExpired] = useState(false);
   const [eventSources, setLogSources] = useState<SourceResponse[]>([]);
+  // All sources (incl. metric/session) — dashboard tiles may reference any kind
+  const [allSources, setAllSources] = useState<SourceResponse[]>([]);
   const [savedSearches, setSavedSearches] = useState<SavedSearchResponse[]>([]);
   const [selectedSource, setSelectedSource] = useState<SourceResponse | null>(
     null,
   );
   const [activeQuery, setActiveQuery] = useState(query ?? '');
   const [error, setError] = useState<string | null>(null);
 
+  // Stable ClickHouse client + metadata instances — recreating them on
+  // every render would re-trigger data-fetch effects downstream (each
+  // effect aborts its in-flight query when its deps change).
+  const clickhouseClient = useMemo(
+    () => client.createClickHouseClient(),
+    [client],
+  );
+  const metadata = useMemo(() => client.createMetadata(), [client]);
+
   // Check existing session on mount
   useEffect(() => {
     (async () => {
@@ -60,6 +78,8 @@ export default function App({ appUrl, query, sourceName, follow }: AppProps) {
         apiClient.getSavedSearches().catch(() => [] as SavedSearchResponse[]),
       ]);
 
+      setAllSources(sources);
+
       const queryableSources = sources.filter(
         s => s.kind === SourceKind.Log || s.kind === SourceKind.Trace,
       );
@@ -146,17 +166,26 @@ export default function App({ appUrl, query, sourceName, follow }: AppProps) {
     [eventSources],
   );
 
-  // Track the screen before alerts so we can return to it
-  const [preAlertsScreen, setPreAlertsScreen] = useState<Screen>('events');
+  // Track the screen before alerts/dashboards so we can return to it
+  const [preOverlayScreen, setPreOverlayScreen] = useState<Screen>('events');
 
   const handleOpenAlerts = useCallback(() => {
-    setPreAlertsScreen(screen);
+    setPreOverlayScreen(screen);
     setScreen('alerts');
   }, [screen]);
 
   const handleCloseAlerts = useCallback(() => {
-    setScreen(preAlertsScreen);
-  }, [preAlertsScreen]);
+    setScreen(preOverlayScreen);
+  }, [preOverlayScreen]);
+
+  const handleOpenDashboards = useCallback(() => {
+    setPreOverlayScreen(screen);
+    setScreen('dashboards');
+  }, [screen]);
+
+  const handleCloseDashboards = useCallback(() => {
+    setScreen(preOverlayScreen);
+  }, [preOverlayScreen]);
 
   if (error) {
     return (
@@ -202,25 +231,38 @@ export default function App({ appUrl, query, sourceName, follow }: AppProps) {
             sources={eventSources}
             onSelect={handleSourceSelect}
             onOpenAlerts={handleOpenAlerts}
+            onOpenDashboards={handleOpenDashboards}
           />
         </Box>
       );
 
     case 'alerts':
       return <AlertsPage client={client} onClose={handleCloseAlerts} />;
 
+    case 'dashboards':
+      return (
+        <DashboardPage
+          client={client}
+          clickhouseClient={clickhouseClient}
+          metadata={metadata}
+          sources={allSources}
+          onClose={handleCloseDashboards}
+        />
+      );
+
     case 'events':
       if (!selectedSource) return null;
       return (
         <EventViewer
-          clickhouseClient={client.createClickHouseClient()}
-          metadata={client.createMetadata()}
+          clickhouseClient={clickhouseClient}
+          metadata={metadata}
           appUrl={currentAppUrl}
           source={selectedSource}
           sources={eventSources}
           savedSearches={savedSearches}
           onSavedSearchSelect={handleSavedSearchSelect}
           onOpenAlerts={handleOpenAlerts}
+          onOpenDashboards={handleOpenDashboards}
           initialQuery={activeQuery}
           follow={follow}
         />