@tokscale/cli 1.0.4 → 1.0.6

package/dist/tui/{index.jsx → index.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@opentui/solid/jsx-runtime";
 import { render } from "@opentui/solid";
 import { App } from "./App.js";
 import { restoreTerminalState } from "./utils/cleanup.js";
@@ -24,7 +25,7 @@ export async function launchTUI(options) {
         process.exit(0);
     });
     process.on('beforeExit', cleanup);
-    await render(() => <App {...(options ?? {})}/>, {
+    await render(() => _jsx(App, { ...(options ?? {}) }), {
         exitOnCtrlC: false,
         useAlternateScreen: true,
         useMouse: true,
@@ -32,4 +33,4 @@ export async function launchTUI(options) {
         useKittyKeyboard: {},
     });
 }
-//# sourceMappingURL=index.jsx.map
+//# sourceMappingURL=index.js.map

package/dist/tui/{index.jsx.map → index.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../src/tui/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAI1D,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,OAAoB;IAClD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,oBAAoB,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CAAC,EAAE,CAAC,mBAAmB,EAAE,CAAC,KAAK,EAAE,EAAE;QACxC,OAAO,EAAE,CAAC;QACV,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;QAC5C,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,EAAE,CAAC,oBAAoB,EAAE,CAAC,MAAM,EAAE,EAAE;QAC1C,OAAO,EAAE,CAAC;QACV,OAAO,CAAC,KAAK,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;QAC9C,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE;QACxB,OAAO,EAAE,CAAC;QACV,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE;QACzB,OAAO,EAAE,CAAC;QACV,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;IAElC,MAAM,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,EAAG,EAAE;QAC/C,WAAW,EAAE,KAAK;QAClB,kBAAkB,EAAE,IAAI;QACxB,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,EAAE;QACb,gBAAgB,EAAE,EAAE;KACd,CAAC,CAAC;AACZ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tui/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAI1D,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,OAAoB;IAClD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,oBAAoB,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CAAC,EAAE,CAAC,mBAAmB,EAAE,CAAC,KAAK,EAAE,EAAE;QACxC,OAAO,EAAE,CAAC;QACV,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;QAC5C,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,EAAE,CAAC,oBAAoB,EAAE,CAAC,MAAM,EAAE,EAAE;QAC1C,OAAO,EAAE,CAAC;QACV,OAAO,CAAC,KAAK,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;QAC9C,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE;QACxB,OAAO,EAAE,CAAC;QACV,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE;QACzB,OAAO,EAAE,CAAC;QACV,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;IAElC,MAAM,MAAM,CAAC,GAAG,EAAE,CAAC,KAAC,GAAG,OAAK,CAAC,OAAO,IAAI,EAAE,CAAC,GAAI,EAAE;QAC/C,WAAW,EAAE,KAAK;QAClB,kBAAkB,EAAE,IAAI;QACxB,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,EAAE;QACb,gBAAgB,EAAE,EAAE;KACd,CAAC,CAAC;AACZ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokscale/cli",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A high-performance CLI tool and visualization dashboard for tracking AI coding assistant token usage and costs across multiple platforms.",
   "license": "MIT",
   "type": "module",
@@ -9,7 +9,8 @@
     "tokscale": "./dist/cli.js"
   },
   "files": [
-    "dist/**/*"
+    "dist/**/*",
+    "src/tui/**/*"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -21,7 +22,8 @@
     "directory": "packages/cli"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && bun run build:tui",
+    "build:tui": "echo 'TUI bundling skipped - OpenTUI requires Bun runtime'",
     "dev": "bun src/cli.ts",
     "dev:node": "tsx src/cli.ts",
     "tui": "bun src/cli.ts tui",
@@ -29,7 +31,7 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@tokscale/core": "1.0.4",
+    "@tokscale/core": "1.0.6",
     "@opentui/core": "0.1.60",
     "@opentui/react": "^0.1.60",
     "@opentui/solid": "^0.1.60",

package/src/tui/App.tsx

@@ -0,0 +1,339 @@
+import { createSignal, Switch, Match, onCleanup } from "solid-js";
+import { useKeyboard, useTerminalDimensions, useRenderer } from "@opentui/solid";
+import clipboardy from "clipboardy";
+import { Header } from "./components/Header.js";
+import { Footer } from "./components/Footer.js";
+import { ModelView } from "./components/ModelView.js";
+import { DailyView } from "./components/DailyView.js";
+import { StatsView } from "./components/StatsView.js";
+import { OverviewView } from "./components/OverviewView.js";
+import { LoadingSpinner } from "./components/LoadingSpinner.js";
+import { useData, type DateFilters } from "./hooks/useData.js";
+import type { ColorPaletteName } from "./config/themes.js";
+import { DEFAULT_PALETTE, getPaletteNames } from "./config/themes.js";
+import { loadSettings, saveSettings, getCacheTimestamp } from "./config/settings.js";
+import { TABS, ALL_SOURCES, type TUIOptions, type TabType, type SortType, type SourceType } from "./types/index.js";
+
+export type AppProps = TUIOptions;
+
+const PALETTE_NAMES = getPaletteNames();
+
+function cycleTabForward(current: TabType): TabType {
+  const idx = TABS.indexOf(current);
+  return TABS[(idx + 1) % TABS.length];
+}
+
+function cycleTabBackward(current: TabType): TabType {
+  const idx = TABS.indexOf(current);
+  return TABS[(idx - 1 + TABS.length) % TABS.length];
+}
+
+export function App(props: AppProps) {
+  const renderer = useRenderer();
+  const terminalDimensions = useTerminalDimensions();
+  const columns = () => terminalDimensions().width;
+  const rows = () => terminalDimensions().height;
+
+  const settings = loadSettings();
+  const [activeTab, setActiveTab] = createSignal<TabType>(props.initialTab ?? "overview");
+  const [enabledSources, setEnabledSources] = createSignal<Set<SourceType>>(
+    new Set(props.enabledSources ?? ALL_SOURCES)
+  );
+  const [sortBy, setSortBy] = createSignal<SortType>(props.sortBy ?? "cost");
+  const [sortDesc, setSortDesc] = createSignal(props.sortDesc ?? true);
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [scrollOffset, setScrollOffset] = createSignal(0);
+  const [colorPalette, setColorPalette] = createSignal<ColorPaletteName>(
+    props.colorPalette ?? (settings.colorPalette as ColorPaletteName) ?? DEFAULT_PALETTE
+  );
+
+  const dateFilters: DateFilters = {
+    since: props.since,
+    until: props.until,
+    year: props.year,
+  };
+
+  const { data, loading, error, refresh, loadingPhase, isRefreshing } = useData(() => enabledSources(), dateFilters);
+  
+  const cacheTimestamp = () => !isRefreshing() && !loading() ? getCacheTimestamp() : null;
+  
+  const [selectedDate, setSelectedDate] = createSignal<string | null>(null);
+
+  const [statusMessage, setStatusMessage] = createSignal<string | null>(null);
+  let statusTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const showStatus = (msg: string, duration = 2000) => {
+    if (statusTimeout) clearTimeout(statusTimeout);
+    setStatusMessage(msg);
+    statusTimeout = setTimeout(() => setStatusMessage(null), duration);
+  };
+
+  onCleanup(() => {
+    if (statusTimeout) clearTimeout(statusTimeout);
+  });
+
+  const contentHeight = () => Math.max(rows() - 6, 12);
+  const overviewChartHeight = () => Math.max(5, Math.floor(contentHeight() * 0.35));
+  const overviewListHeight = () => Math.max(4, contentHeight() - overviewChartHeight() - 4);
+  const overviewItemsPerPage = () => Math.max(1, Math.floor(overviewListHeight() / 2));
+
+  const handleSourceToggle = (source: SourceType) => {
+    const newSources = new Set(enabledSources());
+    if (newSources.has(source)) {
+      if (newSources.size > 1) {
+        newSources.delete(source);
+      }
+    } else {
+      newSources.add(source);
+    }
+    setEnabledSources(newSources);
+  };
+
+  const handlePaletteChange = () => {
+    const currentIdx = PALETTE_NAMES.indexOf(colorPalette());
+    const nextIdx = (currentIdx + 1) % PALETTE_NAMES.length;
+    const newPalette = PALETTE_NAMES[nextIdx];
+    saveSettings({ colorPalette: newPalette });
+    setColorPalette(newPalette);
+  };
+
+  const handleSortChange = (sort: SortType) => {
+    setSortBy(sort);
+    setSortDesc(true);
+  };
+
+  useKeyboard((key) => {
+    if (key.name === "q") {
+      renderer.destroy();
+      return;
+    }
+
+    if (key.name === "r") {
+      refresh();
+      return;
+    }
+
+    if (key.name === "tab" || key.name === "d" || key.name === "right") {
+      setActiveTab(cycleTabForward(activeTab()));
+      setSelectedIndex(0);
+      setScrollOffset(0);
+      return;
+    }
+
+    if (key.name === "left") {
+      setActiveTab(cycleTabBackward(activeTab()));
+      setSelectedIndex(0);
+      setScrollOffset(0);
+      return;
+    }
+
+    if (key.name === "c" && !key.meta && !key.ctrl) {
+      setSortBy("cost");
+      setSortDesc(true);
+      return;
+    }
+
+    if (key.name === "y") {
+      const d = data();
+      if (!d) return;
+      
+      let textToCopy = "";
+      const tab = activeTab();
+      
+      if (tab === "model") {
+        const sorted = [...d.modelEntries].sort((a, b) => {
+          if (sortBy() === "cost") return sortDesc() ? b.cost - a.cost : a.cost - b.cost;
+          if (sortBy() === "tokens") return sortDesc() ? b.total - a.total : a.total - b.total;
+          return sortDesc() ? b.model.localeCompare(a.model) : a.model.localeCompare(b.model);
+        });
+        const entry = sorted[selectedIndex()];
+        if (entry) {
+          textToCopy = `${entry.source} ${entry.model}: ${entry.total.toLocaleString()} tokens, $${entry.cost.toFixed(2)}`;
+        }
+      } else if (tab === "daily") {
+        const sorted = [...d.dailyEntries].sort((a, b) => {
+          if (sortBy() === "cost") return sortDesc() ? b.cost - a.cost : a.cost - b.cost;
+          if (sortBy() === "tokens") return sortDesc() ? b.total - a.total : a.total - b.total;
+          return sortDesc() ? b.date.localeCompare(a.date) : a.date.localeCompare(b.date);
+        });
+        const entry = sorted[selectedIndex()];
+        if (entry) {
+          textToCopy = `${entry.date}: ${entry.total.toLocaleString()} tokens, $${entry.cost.toFixed(2)}`;
+        }
+      } else if (tab === "overview") {
+        const model = d.topModels[scrollOffset() + selectedIndex()];
+        if (model) {
+          textToCopy = `${model.modelId}: ${model.totalTokens.toLocaleString()} tokens, $${model.cost.toFixed(2)}`;
+        }
+      }
+      
+      if (textToCopy) {
+        clipboardy.write(textToCopy)
+          .then(() => showStatus("Copied to clipboard"))
+          .catch(() => showStatus("Failed to copy"));
+      }
+      return;
+    }
+    if (key.name === "t") {
+      setSortBy("tokens");
+      setSortDesc(true);
+      return;
+    }
+
+    if (key.name === "p") {
+      handlePaletteChange();
+      return;
+    }
+
+    if (key.name === "1") { handleSourceToggle("opencode"); return; }
+    if (key.name === "2") { handleSourceToggle("claude"); return; }
+    if (key.name === "3") { handleSourceToggle("codex"); return; }
+    if (key.name === "4") { handleSourceToggle("cursor"); return; }
+    if (key.name === "5") { handleSourceToggle("gemini"); return; }
+
+    if (key.name === "up") {
+      if (activeTab() === "overview") {
+        if (selectedIndex() > 0) {
+          setSelectedIndex(selectedIndex() - 1);
+        } else if (scrollOffset() > 0) {
+          setScrollOffset(scrollOffset() - 1);
+        }
+      } else {
+        setSelectedIndex(Math.max(0, selectedIndex() - 1));
+      }
+      return;
+    }
+
+    if (key.name === "down") {
+      if (activeTab() === "overview") {
+        const maxVisible = Math.min(overviewItemsPerPage(), (data()?.topModels.length ?? 0) - scrollOffset());
+        const maxOffset = Math.max(0, (data()?.topModels.length ?? 0) - overviewItemsPerPage());
+        if (selectedIndex() < maxVisible - 1) {
+          setSelectedIndex(selectedIndex() + 1);
+        } else if (scrollOffset() < maxOffset) {
+          setScrollOffset(scrollOffset() + 1);
+        }
+      } else {
+        const d = data();
+        const maxIndex = activeTab() === "model" 
+          ? (d?.modelEntries.length ?? 0)
+          : (d?.dailyEntries.length ?? 0);
+        if (maxIndex > 0) {
+          setSelectedIndex(Math.min(selectedIndex() + 1, maxIndex - 1));
+        }
+      }
+      return;
+    }
+
+    if (key.name === "e" && data()) {
+      const d = data()!;
+      const exportData = {
+        exportedAt: new Date().toISOString(),
+        totalCost: d.totalCost,
+        modelCount: d.modelCount,
+        models: d.modelEntries,
+        daily: d.dailyEntries,
+        stats: d.stats,
+      };
+      const filename = `tokscale-export-${new Date().toISOString().split("T")[0]}.json`;
+      import("node:fs")
+        .then((fs) => {
+          fs.writeFileSync(filename, JSON.stringify(exportData, null, 2));
+          showStatus(`Exported to ${filename}`);
+        })
+        .catch(() => showStatus("Export failed"));
+      return;
+    }
+  });
+
+  const handleTabClick = (tab: TabType) => {
+    setActiveTab(tab);
+    setSelectedIndex(0);
+    setScrollOffset(0);
+    setSelectedDate(null);
+  };
+
+  return (
+    <box flexDirection="column" width={columns()} height={rows()}>
+      <Header activeTab={activeTab()} onTabClick={handleTabClick} width={columns()} />
+
+      <box flexDirection="column" flexGrow={1} paddingX={1}>
+        <Switch>
+          <Match when={loading()}>
+            <LoadingSpinner phase={loadingPhase()} />
+          </Match>
+          <Match when={error()}>
+            <box justifyContent="center" alignItems="center" flexGrow={1}>
+              <text fg="red">{`Error: ${error()}`}</text>
+            </box>
+          </Match>
+          <Match when={data()}>
+            <Switch>
+              <Match when={activeTab() === "overview"}>
+                <OverviewView
+                  data={data()!}
+                  sortBy={sortBy()}
+                  sortDesc={sortDesc()}
+                  selectedIndex={selectedIndex}
+                  scrollOffset={scrollOffset}
+                  height={contentHeight()}
+                  width={columns()}
+                />
+              </Match>
+              <Match when={activeTab() === "model"}>
+                <ModelView
+                  data={data()!}
+                  sortBy={sortBy()}
+                  sortDesc={sortDesc()}
+                  selectedIndex={selectedIndex}
+                  height={contentHeight()}
+                  width={columns()}
+                />
+              </Match>
+              <Match when={activeTab() === "daily"}>
+                <DailyView
+                  data={data()!}
+                  sortBy={sortBy()}
+                  sortDesc={sortDesc()}
+                  selectedIndex={selectedIndex}
+                  height={contentHeight()}
+                  width={columns()}
+                />
+              </Match>
+              <Match when={activeTab() === "stats"}>
+                <StatsView
+                  data={data()!}
+                  height={contentHeight()}
+                  colorPalette={colorPalette()}
+                  width={columns()}
+                  selectedDate={selectedDate()}
+                />
+              </Match>
+            </Switch>
+          </Match>
+        </Switch>
+      </box>
+
+      <Footer
+        enabledSources={enabledSources()}
+        sortBy={sortBy()}
+        totals={data()?.totals}
+        modelCount={data()?.modelCount ?? 0}
+        activeTab={activeTab()}
+        scrollStart={scrollOffset()}
+        scrollEnd={Math.min(scrollOffset() + overviewItemsPerPage(), data()?.topModels.length ?? 0)}
+        totalItems={data()?.topModels.length}
+        colorPalette={colorPalette()}
+        statusMessage={statusMessage()}
+        isRefreshing={isRefreshing()}
+        loadingPhase={loadingPhase()}
+        cacheTimestamp={cacheTimestamp()}
+        width={columns()}
+        onSourceToggle={handleSourceToggle}
+        onSortChange={handleSortChange}
+        onPaletteChange={handlePaletteChange}
+        onRefresh={refresh}
+      />
+    </box>
+  );
+}

package/src/tui/components/BarChart.tsx

@@ -0,0 +1,198 @@
+import { For, Show, createMemo } from "solid-js";
+import { formatTokensCompact } from "../utils/format.js";
+import { isNarrow, isVeryNarrow } from "../utils/responsive.js";
+
+export interface ChartDataPoint {
+  date: string;
+  models: { modelId: string; tokens: number; color: string }[];
+  total: number;
+}
+
+interface BarChartProps {
+  data: ChartDataPoint[];
+  width: number;
+  height: number;
+}
+
+const BLOCKS = [" ", "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
+const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const REPEAT_CACHE_MAX_SIZE = 256;
+
+const repeatCache = new Map<string, string>();
+function getRepeatedString(char: string, count: number): string {
+  const key = `${char}:${count}`;
+  let cached = repeatCache.get(key);
+  if (!cached) {
+    if (repeatCache.size >= REPEAT_CACHE_MAX_SIZE) {
+      const firstKey = repeatCache.keys().next().value;
+      if (firstKey) repeatCache.delete(firstKey);
+    }
+    cached = char.repeat(count);
+    repeatCache.set(key, cached);
+  }
+  return cached;
+}
+
+export function BarChart(props: BarChartProps) {
+  const data = () => props.data;
+  const width = () => props.width;
+  const height = () => props.height;
+
+  const isNarrowTerminal = () => isNarrow(width());
+  const isVeryNarrowTerminal = () => isVeryNarrow(width());
+
+  const safeHeight = () => Math.max(height(), 1);
+  
+  const maxTotal = createMemo(() => {
+    const arr = data();
+    if (arr.length === 0) return 1;
+    let max = arr[0].total;
+    for (let i = 1; i < arr.length; i++) {
+      if (arr[i].total > max) max = arr[i].total;
+    }
+    return Math.max(max, 1);
+  });
+
+  const chartWidth = () => Math.max(width() - 8, 20);
+  const barWidth = () => Math.max(1, Math.floor(chartWidth() / Math.min(data().length, 52)));
+  const visibleBars = () => Math.min(data().length, Math.floor(chartWidth() / barWidth()));
+  const visibleData = createMemo(() => data().slice(-visibleBars()));
+
+  const sortedModelsMap = createMemo(() => {
+    const vd = visibleData();
+    const map = new Map<string, { modelId: string; tokens: number; color: string }[]>();
+    for (const point of vd) {
+      const models = point.models ?? [];
+      const sorted = [...models].sort((a, b) => a.modelId.localeCompare(b.modelId));
+      map.set(point.date, sorted);
+    }
+    return map;
+  });
+
+  const rowIndices = createMemo(() => {
+    const sh = safeHeight();
+    const indices: number[] = new Array(sh);
+    for (let i = 0; i < sh; i++) {
+      indices[i] = sh - 1 - i;
+    }
+    return indices;
+  });
+
+  const dateLabels = createMemo(() => {
+    const vd = visibleData();
+    if (vd.length === 0) return [];
+    
+    const labelInterval = Math.max(1, Math.floor(vd.length / (isVeryNarrowTerminal() ? 2 : 3)));
+    const labels: string[] = [];
+    
+    for (let i = 0; i < vd.length; i += labelInterval) {
+      const dateStr = vd[i].date;
+      const parts = dateStr.split("-");
+      if (parts.length === 3) {
+        const month = parseInt(parts[1], 10);
+        const day = parseInt(parts[2], 10);
+        labels.push(isVeryNarrowTerminal() ? `${month}/${day}` : `${MONTH_NAMES[month - 1]} ${day}`);
+      } else {
+        labels.push(dateStr.slice(5));
+      }
+    }
+    return labels;
+  });
+
+  const axisWidth = () => Math.min(chartWidth(), visibleBars() * barWidth());
+  const labelPadding = () => {
+    const labels = dateLabels();
+    return labels.length > 0 ? Math.floor(axisWidth() / labels.length) : 0;
+  };
+
+  const chartTitle = () => isVeryNarrowTerminal() ? "Tokens" : "Tokens per Day";
+
+  const getBarContent = (point: ChartDataPoint, row: number): { char: string; color: string } => {
+    const mt = maxTotal();
+    const sh = safeHeight();
+    const rowThreshold = ((row + 1) / sh) * mt;
+    const prevThreshold = (row / sh) * mt;
+    const thresholdDiff = rowThreshold - prevThreshold;
+    const bw = barWidth();
+
+    if (point.total <= prevThreshold) {
+      return { char: getRepeatedString(" ", bw), color: "dim" };
+    }
+
+    const sortedModels = sortedModelsMap().get(point.date) ?? [];
+    if (sortedModels.length === 0) {
+      return { char: getRepeatedString(" ", bw), color: "dim" };
+    }
+
+    let currentHeight = 0;
+    let maxOverlap = 0;
+    let color = sortedModels[0].color;
+
+    const rowStart = prevThreshold;
+    const rowEnd = rowThreshold;
+
+    for (const m of sortedModels) {
+      const mStart = currentHeight;
+      const mEnd = currentHeight + m.tokens;
+      currentHeight += m.tokens;
+
+      const overlapStart = Math.max(mStart, rowStart);
+      const overlapEnd = Math.min(mEnd, rowEnd);
+      const overlap = Math.max(0, overlapEnd - overlapStart);
+
+      if (overlap > maxOverlap) {
+        maxOverlap = overlap;
+        color = m.color;
+      }
+    }
+
+    if (point.total >= rowThreshold) {
+      return { char: getRepeatedString("█", bw), color };
+    }
+
+    const ratio = thresholdDiff > 0 ? (point.total - prevThreshold) / thresholdDiff : 1;
+    const blockIndex = Math.min(8, Math.max(1, Math.floor(ratio * 8)));
+    return { char: getRepeatedString(BLOCKS[blockIndex], bw), color };
+  };
+
+  return (
+    <Show when={data().length > 0} fallback={<text dim>No chart data</text>}>
+      <box flexDirection="column">
+        <text bold>{chartTitle()}</text>
+        <For each={rowIndices()}>
+          {(row) => {
+            const yLabelWidth = isVeryNarrowTerminal() ? 5 : 6;
+            const yLabel = row === safeHeight() - 1 
+              ? formatTokensCompact(maxTotal()).padStart(yLabelWidth) 
+              : " ".repeat(yLabelWidth);
+            return (
+              <box flexDirection="row">
+                <text dim>{yLabel}│</text>
+                <For each={visibleData()}>
+                  {(point) => {
+                    const bar = getBarContent(point, row);
+                    return bar.color === "dim" 
+                      ? <text dim>{bar.char}</text>
+                      : <text fg={bar.color}>{bar.char}</text>;
+                  }}
+                </For>
+              </box>
+            );
+          }}
+        </For>
+        <box flexDirection="row">
+          <text dim>{isVeryNarrowTerminal() ? "    0│" : "     0│"}</text>
+          <text dim>{getRepeatedString("─", axisWidth())}</text>
+        </box>
+        <Show when={dateLabels().length > 0}>
+          <box flexDirection="row">
+            <text dim>{isVeryNarrowTerminal() ? "      " : "       "}</text>
+            <text dim>
+              {dateLabels().map((l) => l.padEnd(labelPadding())).join("")}
+            </text>
+          </box>
+        </Show>
+      </box>
+    </Show>
+  );
+}