@dropalltables/yacu 0.1.0

package/src/tui/components/Header.tsx

@@ -0,0 +1,52 @@
+import type { Metric, RangeDays } from "../../domain/types"
+import { shortDate } from "../../domain/dates"
+import { Segmented } from "./Segmented"
+import { useTheme } from "../ThemeContext"
+import { PointerButton } from "./PointerButton"
+
+export function Header({
+  metric,
+  range,
+  days,
+  compact,
+  onMetricChange,
+  onRangeChange,
+  onRefresh,
+}: {
+  metric: Metric
+  range: RangeDays
+  days: string[]
+  compact: boolean
+  onMetricChange: (metric: Metric) => void
+  onRangeChange: (range: RangeDays) => void
+  onRefresh: () => void
+}) {
+  const theme = useTheme()
+  const dateLabel = days.length === 0 ? "" : `${shortDate(days[0]!)} to ${shortDate(days.at(-1)!)}`
+  return (
+    <box flexDirection={compact ? "column" : "row"} justifyContent="space-between" width="100%" gap={1}>
+      <text fg={theme.text}>
+        <strong>yacu</strong>
+        <span fg={theme.muted}>{`  /  ${dateLabel}`}</span>
+      </text>
+      <box flexDirection="row" gap={2}>
+        <Segmented
+          selected={metric}
+          onChange={onMetricChange}
+          options={[{ value: "cost", label: "Cost" }, { value: "tokens", label: "Tokens" }]}
+        />
+        <Segmented
+          selected={range}
+          onChange={onRangeChange}
+          options={[
+            { value: 1, label: "Past 24h" },
+            { value: 7, label: "7 days" },
+            { value: 30, label: "30 days" },
+            { value: 90, label: "90 days" },
+          ]}
+        />
+        <PointerButton label="r ↻" onPress={onRefresh} />
+      </box>
+    </box>
+  )
+}

package/src/tui/components/PointerButton.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react"
+import type { KeyEvent, MouseEvent } from "@opentui/core"
+import { useTheme } from "../ThemeContext"
+import { usePointer } from "../usePointer"
+
+export function PointerButton({ label, onPress }: { label: string; onPress: () => void }) {
+  const theme = useTheme()
+  const [hovered, setHovered] = useState(false)
+  const { pointerOver, pointerOut } = usePointer()
+
+  const press = (event: MouseEvent) => {
+    if (event.button !== 0) return
+    event.stopPropagation()
+    onPress()
+  }
+
+  const keyPress = (key: KeyEvent) => {
+    if (key.name === "return" || key.name === "space") onPress()
+  }
+
+  return (
+    <box
+      focusable
+      height={1}
+      backgroundColor={hovered ? theme.hover : theme.panel}
+      onMouseDown={press}
+      onMouseOver={() => {
+        setHovered(true)
+        pointerOver()
+      }}
+      onMouseOut={() => {
+        setHovered(false)
+        pointerOut()
+      }}
+      onKeyDown={keyPress}
+    >
+      <text selectable={false} fg={hovered ? theme.onHover : theme.muted}>{` ${label} `}</text>
+    </box>
+  )
+}

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

@@ -0,0 +1,30 @@
+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 { ScanBoot } from "./ScanBoot"
+
+let setup: TestRendererSetup | null = null
+
+afterEach(() => {
+  act(() => { setup?.renderer.destroy() })
+  setup = null
+})
+
+describe("ScanBoot", () => {
+  test("renders only a centered compact scanner", async () => {
+    setup = await testRender(
+      <ScanBoot completed={3} total={6} width={80} />,
+      { width: 80, height: 20 },
+    )
+    await setup.renderOnce()
+
+    const frame = setup.captureCharFrame()
+    expect(frame).toContain("scanning usage...")
+    expect(frame).toContain("[##########          ]")
+    expect(frame).not.toContain("Scanning Codex")
+    expect(frame).not.toContain("files")
+    expect(frame).not.toContain("╭")
+    expect(frame).not.toContain("│")
+  })
+})

package/src/tui/components/ScanBoot.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from "../ThemeContext"
+
+export function ScanBoot({
+  completed,
+  total,
+  width,
+}: {
+  completed: number
+  total: number
+  width: number
+}) {
+  const theme = useTheme()
+  const progress = total === 0 ? 1 : Math.max(0, Math.min(1, completed / total))
+  const barWidth = Math.max(8, Math.min(20, width - 4))
+  const filled = Math.round(progress * barWidth)
+
+  return (
+    <box
+      width="100%"
+      flexGrow={1}
+      justifyContent="center"
+      alignItems="center"
+    >
+      <box flexDirection="column" alignItems="center" gap={1}>
+        <text fg={theme.text}>scanning usage...</text>
+        <text fg={theme.text}>{`[${"#".repeat(filled)}${" ".repeat(barWidth - filled)}]`}</text>
+      </box>
+    </box>
+  )
+}

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

@@ -0,0 +1,32 @@
+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 { Segmented } from "./Segmented"
+
+let setup: TestRendererSetup | null = null
+
+afterEach(() => {
+  act(() => { setup?.renderer.destroy() })
+  setup = null
+})
+
+describe("Segmented", () => {
+  test("changes value through a mouse click", async () => {
+    let selected = "cost"
+    setup = await testRender(
+      <Segmented
+        selected={selected}
+        onChange={(value) => { selected = value }}
+        options={[{ value: "cost", label: "Cost" }, { value: "tokens", label: "Tokens" }]}
+      />,
+      { width: 24, height: 2, autoFocus: false },
+    )
+    await setup.renderOnce()
+
+    await act(async () => { await setup!.mockMouse.click(9, 0) })
+
+    expect(selected).toBe("tokens")
+    expect(setup.renderer.getSelection()).toBeNull()
+  })
+})

package/src/tui/components/Segmented.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react"
+import type { KeyEvent, MouseEvent } from "@opentui/core"
+import { useTheme } from "../ThemeContext"
+import { usePointer } from "../usePointer"
+
+type Option<T extends string | number> = { value: T; label: string }
+
+export function Segmented<T extends string | number>({
+  options,
+  selected,
+  onChange,
+}: {
+  options: Array<Option<T>>
+  selected: T
+  onChange: (value: T) => void
+}) {
+  const theme = useTheme()
+  const [hovered, setHovered] = useState<T | null>(null)
+  const { pointerOver, pointerOut } = usePointer()
+
+  const mousePress = (value: T) => (event: MouseEvent) => {
+    if (event.button !== 0) return
+    event.stopPropagation()
+    onChange(value)
+  }
+
+  const keyPress = (value: T) => (key: KeyEvent) => {
+    if (key.name === "return" || key.name === "space") onChange(value)
+  }
+
+  return (
+    <box flexDirection="row" backgroundColor={theme.panel}>
+      {options.map((option) => {
+        const active = option.value === selected
+        const hot = option.value === hovered
+        return (
+          <box
+            key={String(option.value)}
+            focusable
+            height={1}
+            backgroundColor={active ? theme.selected : hot ? theme.hover : theme.panel}
+            onMouseDown={mousePress(option.value)}
+            onMouseOver={() => {
+              setHovered(option.value)
+              pointerOver()
+            }}
+            onMouseOut={() => {
+              setHovered(null)
+              pointerOut()
+            }}
+            onKeyDown={keyPress(option.value)}
+          >
+            <text selectable={false} fg={active ? theme.onSelected : hot ? theme.onHover : theme.muted}>{` ${option.label} `}</text>
+          </box>
+        )
+      })}
+    </box>
+  )
+}

package/src/tui/components/Summary.tsx

@@ -0,0 +1,67 @@
+import { useState } from "react"
+import type { MouseEvent } from "@opentui/core"
+import type { Dashboard } from "../../domain/aggregate"
+import type { Metric, SourceId } from "../../domain/types"
+import { SOURCE_META } from "../../domain/types"
+import { formatCompact, formatMetric, formatMoney, percent } from "../format"
+import { useTheme } from "../ThemeContext"
+import { usePointer } from "../usePointer"
+
+export function Summary({
+  dashboard,
+  metric,
+  visibleSources,
+  onToggleSource,
+}: {
+  dashboard: Dashboard
+  metric: Metric
+  visibleSources: Set<SourceId>
+  onToggleSource: (source: SourceId) => void
+}) {
+  const theme = useTheme()
+  const [hovered, setHovered] = useState<SourceId | null>(null)
+  const { pointerOver, pointerOut } = usePointer()
+  const total = metric === "cost" ? formatMoney(dashboard.totals.costUsd) : formatCompact(dashboard.totals.processedTokens)
+  return (
+    <box flexDirection="column" width="100%" gap={1}>
+      <text fg={theme.text}><strong>{total}</strong></text>
+      <text fg={theme.muted}>{`${dashboard.sessions.toLocaleString("en-US")} sessions · API estimate`}</text>
+      <box height={1} />
+      {dashboard.providers.map((provider) => {
+        const meta = SOURCE_META[provider.source]
+        const value = metric === "cost" ? provider.costUsd : provider.processedTokens
+        const visible = visibleSources.has(provider.source)
+        const hot = hovered === provider.source
+        const toggle = (event: MouseEvent) => {
+          if (event.button !== 0) return
+          event.stopPropagation()
+          onToggleSource(provider.source)
+        }
+        return (
+          <box
+            key={provider.source}
+            flexDirection="column"
+            marginBottom={1}
+            backgroundColor={hot ? theme.hover : theme.bg}
+            opacity={visible ? 1 : 0.45}
+            onMouseDown={toggle}
+            onMouseOver={() => {
+              setHovered(provider.source)
+              pointerOver()
+            }}
+            onMouseOut={() => {
+              setHovered(null)
+              pointerOut()
+            }}
+          >
+            <box flexDirection="row" justifyContent="space-between">
+              <text selectable={false} fg={hot ? theme.onHover : theme.sources[provider.source]}>{`${meta.mark} `}<span fg={hot ? theme.onHover : theme.text}>{meta.label}</span><span fg={hot ? theme.onHover : theme.muted}>{` ${provider.sessions} sessions`}</span></text>
+              <text selectable={false} fg={hot ? theme.onHover : theme.text}>{formatMetric(value, metric)}</text>
+            </box>
+            <text selectable={false} fg={hot ? theme.onHover : theme.muted}>{`${percent(provider.share)} of ${metric} · ${formatCompact(provider.processedTokens)} tokens`}</text>
+          </box>
+        )
+      })}
+    </box>
+  )
+}

package/src/tui/components/Totals.tsx

@@ -0,0 +1,27 @@
+import type { Dashboard } from "../../domain/aggregate"
+import { formatCompact, formatMoney } from "../format"
+import { useTheme } from "../ThemeContext"
+
+export function Totals({ dashboard, compact }: { dashboard: Dashboard; compact: boolean }) {
+  const theme = useTheme()
+  const values = [
+    ["Processed tokens", formatCompact(dashboard.totals.processedTokens)],
+    ["Cached input", formatCompact(dashboard.totals.cacheReadTokens)],
+    ["Uncached input", formatCompact(dashboard.totals.inputTokens + dashboard.totals.cacheCreationTokens)],
+    ["Output", formatCompact(dashboard.totals.outputTokens)],
+    ["Cache savings", formatMoney(dashboard.totals.cacheSavingsUsd)],
+  ]
+  return (
+    <box flexDirection="column" width="100%" gap={1}>
+      <text fg={theme.text}><strong>Totals</strong></text>
+      <box flexDirection={compact ? "column" : "row"} justifyContent="space-between" gap={compact ? 0 : 2}>
+        {values.map(([label, value]) => (
+          <box key={label} flexDirection={compact ? "row" : "column"} justifyContent="space-between" flexGrow={1}>
+            <text fg={theme.muted}>{label}</text>
+            <text fg={theme.text}>{value}</text>
+          </box>
+        ))}
+      </box>
+    </box>
+  )
+}

package/src/tui/format.ts

@@ -0,0 +1,44 @@
+export function formatMoney(value: number): string {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value)
+}
+
+export function formatCompact(value: number): string {
+  if (value < 1_000) return Math.round(value).toLocaleString("en-US")
+  const units = [
+    [1_000_000_000, "B"],
+    [1_000_000, "M"],
+    [1_000, "K"],
+  ] as const
+  const [divisor, suffix] = units.find(([divisor]) => value >= divisor) ?? units[2]
+  const scaled = value / divisor
+  return `${scaled >= 100 ? scaled.toFixed(0) : scaled >= 10 ? scaled.toFixed(1) : scaled.toFixed(2)}${suffix}`
+}
+
+export function formatMetric(value: number, metric: "cost" | "tokens"): string {
+  return metric === "cost" ? formatMoney(value) : formatCompact(value)
+}
+
+export function formatAxis(value: number, metric: "cost" | "tokens"): string {
+  if (metric === "tokens") return formatCompact(value)
+  if (value >= 1_000) return `$${formatCompact(value)}`
+  return `$${Math.round(value).toLocaleString("en-US")}`
+}
+
+export function percent(value: number): string {
+  return `${(value * 100).toFixed(1)}%`
+}
+
+export function padLeft(value: string, width: number): string {
+  return value.length >= width ? value.slice(0, width) : value.padStart(width)
+}
+
+export function truncate(value: string, width: number): string {
+  if (value.length <= width) return value.padEnd(width)
+  if (width <= 1) return value.slice(0, width)
+  return `${value.slice(0, width - 1)}…`
+}

package/src/tui/theme.ts

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react"
+import { RGBA, type CliRenderer, type TerminalColors, type ThemeMode } from "@opentui/core"
+import type { SourceId } from "../domain/types"
+
+export type Theme = {
+  mode: ThemeMode
+  bg: RGBA
+  panel: RGBA
+  hover: RGBA
+  selected: RGBA
+  text: RGBA
+  onHover: RGBA
+  onSelected: RGBA
+  muted: RGBA
+  faint: RGBA
+  accent: RGBA
+  error: RGBA
+  progress: RGBA
+  onProgress: RGBA
+  sources: Record<SourceId, RGBA>
+}
+
+const dark = createTheme("dark")
+const light = createTheme("light")
+
+export function terminalTheme(mode: ThemeMode): Theme {
+  return mode === "light" ? light : dark
+}
+
+export function useTerminalTheme(renderer: CliRenderer): Theme {
+  const [mode, setMode] = useState<ThemeMode>(renderer.themeMode ?? colorFgBgMode() ?? "dark")
+
+  useEffect(() => {
+    const update = (next: ThemeMode) => setMode(next)
+    const updatePalette = (colors: TerminalColors) => {
+      const next = backgroundMode(colors.defaultBackground)
+      if (next != null) setMode(next)
+    }
+    renderer.on("theme_mode", update)
+    renderer.on("palette", updatePalette)
+    void renderer.waitForThemeMode(300).then((next) => {
+      if (next != null) setMode(next)
+    })
+    void renderer.getPalette({ size: 16, timeout: 300 }).then(updatePalette).catch(() => {})
+    return () => {
+      renderer.off("theme_mode", update)
+      renderer.off("palette", updatePalette)
+    }
+  }, [renderer])
+
+  return terminalTheme(mode)
+}
+
+function colorFgBgMode(): ThemeMode | null {
+  const index = Number(process.env.COLORFGBG?.split(";").at(-1))
+  if (!Number.isInteger(index)) return null
+  return index === 7 || index > 8 ? "light" : "dark"
+}
+
+function backgroundMode(background: string | null): ThemeMode | null {
+  if (background == null) return null
+  const hex = background.match(/^#([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i)
+  if (hex == null) return null
+  const red = Number.parseInt(hex[1]!, 16)
+  const green = Number.parseInt(hex[2]!, 16)
+  const blue = Number.parseInt(hex[3]!, 16)
+  const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255
+  return luminance >= 0.55 ? "light" : "dark"
+}
+
+function createTheme(mode: ThemeMode): Theme {
+  const isLight = mode === "light"
+  const textSnapshot = isLight ? "#202020" : "#ededed"
+  const backgroundSnapshot = isLight ? "#fafafa" : "#1e1e1e"
+  return {
+    mode,
+    bg: RGBA.defaultBackground(backgroundSnapshot),
+    panel: RGBA.defaultBackground(backgroundSnapshot),
+    hover: RGBA.fromHex(isLight ? "#e4e4e4" : "#303030"),
+    selected: RGBA.fromHex(isLight ? "#d8d8d8" : "#3a3a3a"),
+    text: RGBA.defaultForeground(textSnapshot),
+    onHover: RGBA.defaultForeground(textSnapshot),
+    onSelected: RGBA.defaultForeground(textSnapshot),
+    muted: RGBA.fromHex(isLight ? "#666666" : "#858585"),
+    faint: RGBA.fromHex(isLight ? "#c8c8c8" : "#424242"),
+    accent: RGBA.fromHex(isLight ? "#8a5a00" : "#d7a94a"),
+    error: RGBA.fromHex(isLight ? "#a52a2a" : "#dc6b6b"),
+    progress: RGBA.fromHex(isLight ? "#1f9d68" : "#35c98b"),
+    onProgress: RGBA.fromHex(isLight ? "#ffffff" : "#111111"),
+    sources: {
+      claude: RGBA.fromHex(isLight ? "#a84324" : "#dc7957"),
+      codex: RGBA.defaultForeground(textSnapshot),
+      cursor: RGBA.fromHex(isLight ? "#713b91" : "#c58be2"),
+      gemini: RGBA.fromHex(isLight ? "#245fa8" : "#77a7e8"),
+      grok: RGBA.fromHex(isLight ? "#5e5e5e" : "#a5a5a5"),
+      opencode: RGBA.fromHex(isLight ? "#287a73" : "#72a7a0"),
+    },
+  }
+}

package/src/tui/usePointer.ts

@@ -0,0 +1,11 @@
+import type { MousePointerStyle } from "@opentui/core"
+import { useRenderer } from "@opentui/react"
+
+export function usePointer(style: MousePointerStyle = "pointer") {
+  const renderer = useRenderer()
+
+  return {
+    pointerOver: () => renderer.setMousePointer(style),
+    pointerOut: () => renderer.setMousePointer("default"),
+  }
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@opentui/react",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["bun"]
+  },
+  "include": ["src", "test"]
+}