@dropalltables/yacu 0.1.0

package/src/tui/App.tsx

@@ -0,0 +1,170 @@
+import { useEffect, useMemo, useState } from "react"
+import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
+import { buildDashboard } from "../domain/aggregate"
+import { SOURCE_ORDER, type BreakdownMode, type Metric, type RangeDays, type SourceId, type UsageDataset } from "../domain/types"
+import { loadUsageDataset } from "../data/load"
+import { Header } from "./components/Header"
+import { Summary } from "./components/Summary"
+import { Chart } from "./components/Chart"
+import { Totals } from "./components/Totals"
+import { Breakdown } from "./components/Breakdown"
+import { Footer } from "./components/Footer"
+import { ScanBoot } from "./components/ScanBoot"
+import { ThemeProvider } from "./ThemeContext"
+import { useTerminalTheme } from "./theme"
+
+const RANGES: RangeDays[] = [1, 7, 30, 90]
+const COMPLETED_SCAN_HOLD_MS = 800
+
+export function App() {
+  const renderer = useRenderer()
+  const theme = useTerminalTheme(renderer)
+  const { width, height } = useTerminalDimensions()
+  const [dataset, setDataset] = useState<UsageDataset | null>(null)
+  const [metric, setMetric] = useState<Metric>("cost")
+  const [range, setRange] = useState<RangeDays>(30)
+  const [breakdown, setBreakdown] = useState<BreakdownMode>("model")
+  const [visibleSources, setVisibleSources] = useState<Set<SourceId>>(() => new Set(SOURCE_ORDER))
+  const [selectedDay, setSelectedDay] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [scanCompleted, setScanCompleted] = useState(0)
+
+  const refresh = async () => {
+    const initialScan = dataset == null
+    setLoading(true)
+    setError(null)
+    if (initialScan) setScanCompleted(0)
+    try {
+      const nextDataset = await loadUsageDataset((progress) => {
+        if (initialScan) setScanCompleted(progress.completed)
+      })
+      if (initialScan) await Bun.sleep(COMPLETED_SCAN_HOLD_MS)
+      setDataset(nextDataset)
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { void refresh() }, [])
+
+  const changeRange = (next: RangeDays) => {
+    setRange(next)
+    setSelectedDay(null)
+  }
+
+  const selectDay = (day: string | null) => {
+    setSelectedDay(day)
+    if (day != null) setBreakdown("day")
+  }
+
+  const toggleSource = (source: SourceId) => {
+    setVisibleSources((current) => {
+      const next = new Set(current)
+      if (next.has(source)) next.delete(source)
+      else next.add(source)
+      return next
+    })
+  }
+
+  useKeyboard((key) => {
+    if (key.name === "q" || key.name === "escape") renderer.destroy()
+    else if (key.name === "c") setMetric((value) => value === "cost" ? "tokens" : "cost")
+    else if (key.name === "b") setBreakdown((value) => value === "model" ? "day" : "model")
+    else if (key.name === "r") void refresh()
+    else if (["1", "2", "3", "4"].includes(key.name)) changeRange(RANGES[Number(key.name) - 1]!)
+    else if (key.name === "left" || key.name === "right") {
+      const index = RANGES.indexOf(range)
+      const next = key.name === "left" ? Math.max(0, index - 1) : Math.min(RANGES.length - 1, index + 1)
+      changeRange(RANGES[next]!)
+    }
+  })
+
+  const dashboard = useMemo(() => dataset == null ? null : buildDashboard(dataset, range, metric), [dataset, range, metric])
+  const compact = width < 100
+  const wide = width >= 112
+  const contentWidth = Math.max(40, width - 4)
+  const summaryWidth = wide ? Math.min(45, Math.floor(contentWidth * 0.34)) : contentWidth
+  const chartWidth = wide ? contentWidth - summaryWidth - 3 : contentWidth
+
+  return (
+    <ThemeProvider theme={theme}>
+    <box width="100%" height="100%" flexDirection="column" backgroundColor={theme.bg}>
+      {dashboard == null ? (
+        <box flexGrow={1} width="100%" height="100%" paddingX={2} paddingTop={1}>
+          {error == null
+            ? <ScanBoot completed={scanCompleted} total={SOURCE_ORDER.length} width={contentWidth} />
+            : <text fg={theme.error}>{`Error: ${error}`}</text>}
+        </box>
+      ) : (
+        <scrollbox
+          flexGrow={1}
+          width="100%"
+          paddingX={2}
+          paddingTop={1}
+          scrollY
+          viewportCulling
+          scrollbarOptions={{
+            trackOptions: { backgroundColor: theme.bg, foregroundColor: theme.muted },
+            arrowOptions: { backgroundColor: theme.bg, foregroundColor: theme.muted },
+          }}
+        >
+          <box flexDirection="column" width="100%" gap={2}>
+            <Header
+              metric={metric}
+              range={range}
+              days={dashboard.days}
+              compact={compact}
+              onMetricChange={setMetric}
+              onRangeChange={changeRange}
+              onRefresh={() => void refresh()}
+            />
+            {dashboard.records.length === 0 ? (
+              <text fg={theme.muted}>No local usage found</text>
+            ) : (
+              <>
+                <box flexDirection={wide ? "row" : "column"} width="100%" gap={3}>
+                  <box width={wide ? summaryWidth : "100%"}>
+                    <Summary
+                      dashboard={dashboard}
+                      metric={metric}
+                      visibleSources={visibleSources}
+                      onToggleSource={toggleSource}
+                    />
+                  </box>
+                  <box width={wide ? chartWidth : "100%"}>
+                    <Chart
+                      dashboard={dashboard}
+                      metric={metric}
+                      width={chartWidth}
+                      height={wide ? 11 : 8}
+                      visibleSources={visibleSources}
+                      selectedDay={selectedDay}
+                      onSelectDay={selectDay}
+                    />
+                  </box>
+                </box>
+                <Totals dashboard={dashboard} compact={compact} />
+                <Breakdown
+                  dashboard={dashboard}
+                  mode={breakdown}
+                  metric={metric}
+                  width={contentWidth}
+                  selectedDay={selectedDay}
+                  onModeChange={setBreakdown}
+                  onSelectDay={selectDay}
+                />
+              </>
+            )}
+            {dataset?.errors.length ? <text fg={theme.error}>{dataset.errors.join(" · ")}</text> : null}
+            <box height={1} />
+          </box>
+        </scrollbox>
+      )}
+      {dashboard == null ? null : <Footer loading={loading} />}
+    </box>
+    </ThemeProvider>
+  )
+}

package/src/tui/ThemeContext.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext, type ReactNode } from "react"
+import { terminalTheme, type Theme } from "./theme"
+
+const ThemeContext = createContext<Theme>(terminalTheme("dark"))
+
+export function ThemeProvider({ theme, children }: { theme: Theme; children: ReactNode }) {
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+}
+
+export function useTheme(): Theme {
+  return useContext(ThemeContext)
+}

package/src/tui/chart.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from "bun:test"
+import type { SourceId } from "../domain/types"
+import { chartColumnForDay, dayIndexAtColumn, renderBrailleChart } from "./chart"
+
+const emptySeries = (): Record<SourceId, number[]> => ({
+  claude: [0, 0, 0],
+  codex: [0, 0, 0],
+  grok: [0, 0, 0],
+  opencode: [0, 0, 0],
+  cursor: [0, 0, 0],
+  gemini: [0, 0, 0],
+})
+
+describe("renderBrailleChart", () => {
+  test("renders the requested cell dimensions", () => {
+    const series = emptySeries()
+    series.claude = [0, 5, 10]
+
+    const chart = renderBrailleChart(series, 12, 4)
+
+    expect(chart.max).toBe(10)
+    expect(chart.rows).toHaveLength(4)
+    expect(chart.rows.every((row) => row.reduce((length, part) => length + part.text.length, 0) === 12)).toBeTrue()
+    expect(chart.rows.flatMap((row) => row).some((part) => part.text.trim().length > 0)).toBeTrue()
+  })
+
+  test("handles empty data", () => {
+    const chart = renderBrailleChart(emptySeries(), 8, 3)
+
+    expect(chart.max).toBe(0)
+    expect(chart.rows).toHaveLength(3)
+  })
+
+  test("maps pointer columns to days", () => {
+    expect(dayIndexAtColumn(0, 15, 30)).toBe(0)
+    expect(dayIndexAtColumn(14, 15, 30)).toBe(29)
+    expect(chartColumnForDay(29, 15, 30)).toBe(14)
+  })
+
+  test("highlights the active column", () => {
+    const series = emptySeries()
+    series.codex = [1, 2, 3]
+
+    const chart = renderBrailleChart(series, 8, 3, 4, "#123456")
+
+    expect(chart.rows.every((row) => row.some((part) => part.background === "#123456"))).toBeTrue()
+  })
+})

package/src/tui/chart.ts

@@ -0,0 +1,130 @@
+import type { ColorInput } from "@opentui/core"
+import type { SourceId } from "../domain/types"
+import { terminalTheme, type Theme } from "./theme"
+
+export type ChartSegment = { text: string; color: ColorInput; background?: ColorInput }
+export type ChartRow = ChartSegment[]
+
+type Cell = { bits: number; source: SourceId | null }
+
+const DOTS = [
+  [1, 8],
+  [2, 16],
+  [4, 32],
+  [64, 128],
+] as const
+
+export function renderBrailleChart(
+  series: Record<SourceId, number[]>,
+  width: number,
+  height: number,
+  highlightColumn?: number,
+  highlightColor?: ColorInput,
+  highlightForeground?: ColorInput,
+  palette: Theme = terminalTheme("dark"),
+): { rows: ChartRow[]; max: number } {
+  const safeWidth = Math.max(4, width)
+  const safeHeight = Math.max(3, height)
+  const pixelWidth = safeWidth * 2
+  const pixelHeight = safeHeight * 4
+  const cells: Cell[][] = Array.from({ length: safeHeight }, () =>
+    Array.from({ length: safeWidth }, () => ({ bits: 0, source: null })),
+  )
+  const entries = (Object.entries(series) as Array<[SourceId, number[]]>)
+    .filter(([, values]) => values.some((value) => value > 0))
+    .sort(([, a], [, b]) => sum(a) - sum(b))
+  const max = Math.max(0, ...entries.flatMap(([, values]) => values))
+
+  if (max > 0) {
+    for (const [source, values] of entries) {
+      const points = values.map((value, index) => ({
+        x: values.length <= 1 ? 0 : Math.round((index / (values.length - 1)) * (pixelWidth - 1)),
+        y: Math.round((1 - value / max) * (pixelHeight - 1)),
+      }))
+      if (points.length === 1) plot(cells, points[0]!.x, points[0]!.y, source)
+      for (let index = 1; index < points.length; index++) {
+        drawLine(cells, points[index - 1]!, points[index]!, source)
+      }
+    }
+  }
+
+  return {
+    max,
+    rows: cells.map((row) => groupSegments(row, highlightColumn, highlightColor, highlightForeground, palette)),
+  }
+}
+
+function sum(values: number[]): number {
+  return values.reduce((total, value) => total + value, 0)
+}
+
+function drawLine(
+  cells: Cell[][],
+  from: { x: number; y: number },
+  to: { x: number; y: number },
+  source: SourceId,
+): void {
+  let x = from.x
+  let y = from.y
+  const dx = Math.abs(to.x - from.x)
+  const sx = from.x < to.x ? 1 : -1
+  const dy = -Math.abs(to.y - from.y)
+  const sy = from.y < to.y ? 1 : -1
+  let error = dx + dy
+
+  while (true) {
+    plot(cells, x, y, source)
+    if (x === to.x && y === to.y) return
+    const doubled = error * 2
+    if (doubled >= dy) {
+      error += dy
+      x += sx
+    }
+    if (doubled <= dx) {
+      error += dx
+      y += sy
+    }
+  }
+}
+
+function plot(cells: Cell[][], pixelX: number, pixelY: number, source: SourceId): void {
+  const row = Math.floor(pixelY / 4)
+  const column = Math.floor(pixelX / 2)
+  const cell = cells[row]?.[column]
+  if (cell == null) return
+  cell.bits |= DOTS[pixelY % 4]![pixelX % 2]!
+  cell.source = source
+}
+
+function groupSegments(
+  cells: Cell[],
+  highlightColumn?: number,
+  highlightColor?: ColorInput,
+  highlightForeground?: ColorInput,
+  palette: Theme = terminalTheme("dark"),
+): ChartSegment[] {
+  const segments: ChartSegment[] = []
+  for (const [column, cell] of cells.entries()) {
+    const text = cell.bits === 0 ? " " : String.fromCodePoint(0x2800 + cell.bits)
+    const color = column === highlightColumn && highlightForeground != null
+      ? highlightForeground
+      : cell.source == null ? palette.faint : palette.sources[cell.source]
+    const background = column === highlightColumn ? highlightColor : undefined
+    const previous = segments.at(-1)
+    if (previous?.color === color && previous.background === background) previous.text += text
+    else segments.push({ text, color, background })
+  }
+  return segments
+}
+
+export function dayIndexAtColumn(column: number, width: number, dayCount: number): number {
+  if (dayCount <= 1 || width <= 1) return 0
+  const bounded = Math.max(0, Math.min(width - 1, column))
+  return Math.round((bounded / (width - 1)) * (dayCount - 1))
+}
+
+export function chartColumnForDay(index: number, width: number, dayCount: number): number {
+  if (dayCount <= 1 || width <= 1) return 0
+  const bounded = Math.max(0, Math.min(dayCount - 1, index))
+  return Math.round((bounded / (dayCount - 1)) * (width - 1))
+}

package/src/tui/components/Breakdown.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react"
+import type { MouseEvent } from "@opentui/core"
+import type { Dashboard } from "../../domain/aggregate"
+import type { BreakdownMode, Metric } from "../../domain/types"
+import { SOURCE_META } from "../../domain/types"
+import { Segmented } from "./Segmented"
+import { formatMetric, percent, truncate } from "../format"
+import { useTheme } from "../ThemeContext"
+import { usePointer } from "../usePointer"
+
+export function Breakdown({
+  dashboard,
+  mode,
+  metric,
+  width,
+  selectedDay,
+  onModeChange,
+  onSelectDay,
+}: {
+  dashboard: Dashboard
+  mode: BreakdownMode
+  metric: Metric
+  width: number
+  selectedDay: string | null
+  onModeChange: (mode: BreakdownMode) => void
+  onSelectDay: (day: string | null) => void
+}) {
+  const theme = useTheme()
+  const [hovered, setHovered] = useState<string | null>(null)
+  const { pointerOver, pointerOut } = usePointer()
+  const rows = mode === "model" ? dashboard.models : dashboard.daily
+  const nameWidth = Math.max(18, width - 42)
+  return (
+    <box flexDirection="column" width="100%" gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={theme.text}><strong>Breakdown</strong></text>
+        <Segmented
+          selected={mode}
+          onChange={onModeChange}
+          options={[{ value: "model", label: "Model" }, { value: "day", label: "Day" }]}
+        />
+      </box>
+      <box flexDirection="row">
+        <text fg={theme.muted} width={nameWidth}>{mode === "model" ? "Model" : "Day"}</text>
+        <text fg={theme.muted} width={15}>{metric === "cost" ? "Cost" : "Tokens"}</text>
+        <text fg={theme.muted} width={12}>Share</text>
+        <text fg={theme.muted}>Tokens</text>
+      </box>
+      {rows.slice(0, 18).map((row) => {
+        const value = metric === "cost" ? row.costUsd : row.processedTokens
+        const color = row.source == null ? theme.text : theme.sources[row.source]
+        const mark = row.source == null ? " " : SOURCE_META[row.source].mark
+        const interactive = mode === "day"
+        const selected = interactive && selectedDay === row.key
+        const hot = interactive && hovered === row.key
+        const select = interactive ? (event: MouseEvent) => {
+          if (event.button !== 0) return
+          event.stopPropagation()
+          onSelectDay(selected ? null : row.key)
+        } : undefined
+        return (
+          <box
+            key={row.key}
+            flexDirection="row"
+            backgroundColor={selected ? theme.selected : hot ? theme.hover : theme.bg}
+            onMouseDown={select}
+            onMouseOver={interactive ? () => {
+              setHovered(row.key)
+              pointerOver()
+            } : undefined}
+            onMouseOut={interactive ? () => {
+              setHovered(null)
+              pointerOut()
+            } : undefined}
+          >
+            <text selectable={!interactive} fg={selected ? theme.onSelected : hot ? theme.onHover : color} width={nameWidth}>{`${mark} ${truncate(row.label, nameWidth - 2)}`}</text>
+            <text selectable={!interactive} fg={selected ? theme.onSelected : hot ? theme.onHover : theme.text} width={15}>{formatMetric(value, metric)}</text>
+            <text selectable={!interactive} fg={selected ? theme.onSelected : hot ? theme.onHover : theme.muted} width={12}>{percent(row.share)}</text>
+            <text selectable={!interactive} fg={selected ? theme.onSelected : hot ? theme.onHover : theme.muted}>{formatMetric(row.processedTokens, "tokens")}</text>
+          </box>
+        )
+      })}
+    </box>
+  )
+}

package/src/tui/components/Chart.test.tsx

@@ -0,0 +1,67 @@
+import { afterEach, describe, expect, test } from "bun:test"
+import { testRender } from "@opentui/react/test-utils"
+import type { TestRendererSetup } from "@opentui/core/testing"
+import { act } from "react"
+import { buildDashboard } from "../../domain/aggregate"
+import { localDate } from "../../domain/dates"
+import { SOURCE_ORDER, type UsageDataset } from "../../domain/types"
+import { terminalTheme } from "../theme"
+import { Chart } from "./Chart"
+
+let setup: TestRendererSetup | null = null
+
+afterEach(() => {
+  act(() => { setup?.renderer.destroy() })
+  setup = null
+})
+
+describe("Chart", () => {
+  test("shows point cost on hover and selects the day on click", async () => {
+    const today = localDate(new Date())
+    const dataset: UsageDataset = {
+      scannedAt: new Date(),
+      errors: [],
+      sessions: [{ id: "codex:1", source: "codex", date: today }],
+      records: [{
+        date: today,
+        source: "codex",
+        model: "gpt-5-codex",
+        sessionId: "codex:1",
+        inputTokens: 100,
+        outputTokens: 10,
+        cacheCreationTokens: 0,
+        cacheReadTokens: 0,
+        costUsd: 2,
+        cacheSavingsUsd: 0,
+      }],
+    }
+    const dashboard = buildDashboard(dataset, 7, "cost")
+    let selected: string | null = null
+    setup = await testRender(
+      <Chart
+        dashboard={dashboard}
+        metric="cost"
+        width={40}
+        height={4}
+        visibleSources={new Set(SOURCE_ORDER)}
+        selectedDay={selected}
+        onSelectDay={(day) => { selected = day }}
+      />,
+      { width: 40, height: 8, autoFocus: false },
+    )
+    await setup.renderOnce()
+
+    await act(async () => { await setup!.mockMouse.moveTo(37, 2) })
+    await setup.flush()
+
+    expect(setup.captureCharFrame()).toContain("$2.00")
+    const highlightedSpans = setup.captureSpans().lines.flatMap((line) => line.spans)
+      .filter((span) => span.bg.equals(terminalTheme("dark").selected))
+    expect(highlightedSpans.length).toBeGreaterThanOrEqual(4)
+
+    await act(async () => { await setup!.mockMouse.click(37, 2) })
+
+    expect(String(selected)).toBe(today)
+    expect(setup.renderer.getSelection()).toBeNull()
+  })
+})

package/src/tui/components/Chart.tsx

@@ -0,0 +1,159 @@
+import { useMemo, useState } from "react"
+import type { MouseEvent } from "@opentui/core"
+import type { Dashboard } from "../../domain/aggregate"
+import { shortDate } from "../../domain/dates"
+import { SOURCE_META, SOURCE_ORDER, type Metric, type SourceId } from "../../domain/types"
+import { chartColumnForDay, dayIndexAtColumn, renderBrailleChart } from "../chart"
+import { formatAxis, formatMetric } from "../format"
+import { useTheme } from "../ThemeContext"
+import { usePointer } from "../usePointer"
+
+export function Chart({
+  dashboard,
+  metric,
+  width,
+  visibleSources,
+  selectedDay,
+  onSelectDay,
+  height = 11,
+}: {
+  dashboard: Dashboard
+  metric: Metric
+  width: number
+  visibleSources: Set<SourceId>
+  selectedDay: string | null
+  onSelectDay: (day: string | null) => void
+  height?: number
+}) {
+  const theme = useTheme()
+  const labelWidth = 9
+  const graphWidth = Math.max(8, width - labelWidth - 1)
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const { pointerOver, pointerOut } = usePointer("crosshair")
+  const selectedIndex = selectedDay == null ? -1 : dashboard.days.indexOf(selectedDay)
+  const activeIndex = hoveredIndex ?? (selectedIndex >= 0 ? selectedIndex : null)
+  const highlightColumn = activeIndex == null
+    ? undefined
+    : chartColumnForDay(activeIndex, graphWidth, dashboard.days.length)
+
+  const visibleSeries = useMemo(() => Object.fromEntries(
+    SOURCE_ORDER.map((source) => [
+      source,
+      visibleSources.has(source)
+        ? dashboard.series[source]
+        : dashboard.series[source].map(() => 0),
+    ]),
+  ) as Record<SourceId, number[]>, [dashboard.series, visibleSources])
+  const chart = renderBrailleChart(
+    visibleSeries,
+    graphWidth,
+    height,
+    highlightColumn,
+    theme.selected,
+    theme.onSelected,
+    theme,
+  )
+
+  const indexFromEvent = (event: MouseEvent): number => {
+    const start = event.currentTarget?.screenX ?? event.x
+    return dayIndexAtColumn(event.x - start, graphWidth, dashboard.days.length)
+  }
+
+  const move = (event: MouseEvent) => setHoveredIndex(indexFromEvent(event))
+  const select = (event: MouseEvent) => {
+    if (event.button !== 0) return
+    event.stopPropagation()
+    const index = indexFromEvent(event)
+    const day = dashboard.days[index] ?? null
+    onSelectDay(day === selectedDay ? null : day)
+  }
+
+  return (
+    <box flexDirection="column" width="100%">
+      <text fg={theme.text}>{`Daily ${metric}`}</text>
+      <box height={1}>
+        {activeIndex == null ? null : (
+          <ChartPoint
+            dashboard={dashboard}
+            metric={metric}
+            index={activeIndex}
+            visibleSources={visibleSources}
+            pinned={hoveredIndex == null && selectedIndex === activeIndex}
+          />
+        )}
+      </box>
+      <box flexDirection="row" height={height}>
+        <box flexDirection="column" width={labelWidth}>
+          {chart.rows.map((_, index) => {
+            const ratio = 1 - index / Math.max(1, chart.rows.length - 1)
+            const show = index === 0 || index === Math.floor(chart.rows.length / 2) || index === chart.rows.length - 1
+            const label = show ? formatAxis(chart.max * ratio, metric) : ""
+            return <text key={index} fg={theme.muted} height={1}>{label.padStart(labelWidth - 1)}</text>
+          })}
+        </box>
+        <box
+          focusable
+          flexDirection="column"
+          width={graphWidth}
+          height={height}
+          onMouseMove={move}
+          onMouseDown={select}
+          onMouseOver={pointerOver}
+          onMouseOut={() => {
+            setHoveredIndex(null)
+            pointerOut()
+          }}
+        >
+          {chart.rows.map((segments, index) => (
+            <text key={index} height={1} selectable={false}>
+              {segments.map((segment, segmentIndex) => (
+                <span key={segmentIndex} fg={segment.color} bg={segment.background}>
+                  {segment.text}
+                </span>
+              ))}
+            </text>
+          ))}
+        </box>
+      </box>
+      <box flexDirection="row" marginLeft={labelWidth} justifyContent="space-between" width={graphWidth}>
+        <text fg={theme.muted}>{shortDate(dashboard.days[0] ?? "")}</text>
+        <text fg={theme.muted}>{shortDate(dashboard.days[Math.floor(dashboard.days.length / 2)] ?? "")}</text>
+        <text fg={theme.muted}>{shortDate(dashboard.days.at(-1) ?? "")}</text>
+      </box>
+    </box>
+  )
+}
+
+function ChartPoint({
+  dashboard,
+  metric,
+  index,
+  visibleSources,
+  pinned,
+}: {
+  dashboard: Dashboard
+  metric: Metric
+  index: number
+  visibleSources: Set<SourceId>
+  pinned: boolean
+}) {
+  const theme = useTheme()
+  const values = SOURCE_ORDER
+    .filter((source) => visibleSources.has(source))
+    .map((source) => ({ source, value: dashboard.series[source][index] ?? 0 }))
+    .filter(({ value }) => value > 0)
+  const total = values.reduce((sum, { value }) => sum + value, 0)
+
+  return (
+    <text height={1}>
+      <span fg={theme.text}>{shortDate(dashboard.days[index] ?? "")}</span>
+      <span fg={theme.muted}>{`  ${formatMetric(total, metric)}`}</span>
+      {values.map(({ source, value }) => (
+        <span key={source} fg={theme.sources[source]}>
+          {`  ${SOURCE_META[source].mark} ${formatMetric(value, metric)}`}
+        </span>
+      ))}
+      {pinned ? <span fg={theme.muted}>{"  pinned"}</span> : null}
+    </text>
+  )
+}

package/src/tui/components/Footer.tsx

@@ -0,0 +1,11 @@
+import { useTheme } from "../ThemeContext"
+
+export function Footer({ loading }: { loading: boolean }) {
+  const theme = useTheme()
+  return (
+    <box width="100%" flexDirection="row" justifyContent="space-between" backgroundColor={theme.panel} paddingX={1}>
+      <text fg={theme.muted}>c cost/tokens   1-4 range   b breakdown   r refresh   q quit</text>
+      <text fg={loading ? theme.accent : theme.muted}>{loading ? "loading" : "local"}</text>
+    </box>
+  )
+}