@tokscale/cli 1.0.5 → 1.0.7

package/src/tui/components/OverviewView.tsx

@@ -0,0 +1,108 @@
+import { Show, For, createMemo, type Accessor } from "solid-js";
+import { BarChart } from "./BarChart.js";
+import { Legend } from "./Legend.js";
+import { ModelRow } from "./ModelRow.js";
+import type { TUIData, SortType } from "../hooks/useData.js";
+import { formatCost } from "../utils/format.js";
+import { isNarrow, isVeryNarrow } from "../utils/responsive.js";
+
+interface OverviewViewProps {
+  data: TUIData;
+  sortBy: SortType;
+  sortDesc: boolean;
+  selectedIndex: Accessor<number>;
+  scrollOffset: Accessor<number>;
+  height: number;
+  width: number;
+}
+
+export function OverviewView(props: OverviewViewProps) {
+  const safeHeight = () => Math.max(props.height, 12);
+  const chartHeight = () => Math.max(5, Math.floor(safeHeight() * 0.35));
+  const listHeight = () => Math.max(4, safeHeight() - chartHeight() - 4);
+  const itemsPerPage = () => Math.max(1, Math.floor(listHeight() / 2));
+
+  const isNarrowTerminal = () => isNarrow(props.width);
+  const isVeryNarrowTerminal = () => isVeryNarrow(props.width);
+
+  const legendModelLimit = () => isVeryNarrowTerminal() ? 3 : 5;
+  const topModelsForLegend = () => props.data.topModels.slice(0, legendModelLimit()).map(m => m.modelId);
+
+  const maxModelNameWidth = () => isVeryNarrowTerminal() ? 20 : isNarrowTerminal() ? 30 : 50;
+
+  const sortedModels = createMemo(() => {
+    const models = [...props.data.topModels];
+    return models.sort((a, b) => {
+      let cmp = 0;
+      if (props.sortBy === "cost") cmp = a.cost - b.cost;
+      else if (props.sortBy === "tokens") cmp = a.totalTokens - b.totalTokens;
+      return props.sortDesc ? -cmp : cmp;
+    });
+  });
+
+  const totalForPercentage = createMemo(() => {
+    const models = props.data.topModels;
+    if (props.sortBy === "tokens") {
+      return models.reduce((sum, m) => sum + m.totalTokens, 0) || 1;
+    }
+    return models.reduce((sum, m) => sum + m.cost, 0) || 1;
+  });
+
+  const getPercentage = (model: typeof props.data.topModels[0]) => {
+    if (props.sortBy === "tokens") {
+      return (model.totalTokens / totalForPercentage()) * 100;
+    }
+    return (model.cost / totalForPercentage()) * 100;
+  };
+
+  const visibleModels = () => sortedModels().slice(props.scrollOffset(), props.scrollOffset() + itemsPerPage());
+  const totalModels = () => sortedModels().length;
+  const endIndex = () => Math.min(props.scrollOffset() + visibleModels().length, totalModels());
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <box flexDirection="column">
+        <BarChart data={props.data.chartData} width={props.width - 4} height={chartHeight()} />
+        <Legend models={topModelsForLegend()} width={props.width} />
+      </box>
+
+      <box flexDirection="column">
+        <box flexDirection="row" justifyContent="space-between" marginBottom={0}>
+          <text bold>{isVeryNarrowTerminal() ? "Top Models" : `Models by ${props.sortBy === "tokens" ? "Tokens" : "Cost"}`}</text>
+          <box flexDirection="row">
+            <text dim>{isVeryNarrowTerminal() ? "" : "Total: "}</text>
+            <text fg="green">{formatCost(props.data.totalCost)}</text>
+          </box>
+        </box>
+
+        <box flexDirection="column">
+          <For each={visibleModels()}>
+            {(model, i) => {
+              const isActive = createMemo(() => i() === props.selectedIndex());
+              
+              return (
+                <ModelRow
+                  modelId={model.modelId}
+                  tokens={{
+                    input: model.inputTokens,
+                    output: model.outputTokens,
+                    cacheRead: model.cacheReadTokens,
+                    cacheWrite: model.cacheWriteTokens,
+                  }}
+                  percentage={getPercentage(model)}
+                  isActive={isActive()}
+                  compact={isVeryNarrowTerminal()}
+                  maxNameWidth={maxModelNameWidth()}
+                />
+              );
+            }}
+          </For>
+        </box>
+
+        <Show when={totalModels() > visibleModels().length}>
+          <text dim>{`↓ ${props.scrollOffset() + 1}-${endIndex()} of ${totalModels()} models (↑↓ to scroll)`}</text>
+        </Show>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/StatsView.tsx

@@ -0,0 +1,225 @@
+import { For, Show, createMemo, createSignal } from "solid-js";
+import type { TUIData } from "../hooks/useData.js";
+import type { ColorPaletteName } from "../config/themes.js";
+import { getPalette, getGradeColor } from "../config/themes.js";
+import { getModelColor } from "../utils/colors.js";
+import { formatTokens } from "../utils/format.js";
+import { isNarrow } from "../utils/responsive.js";
+import { DateBreakdownPanel } from "./DateBreakdownPanel.js";
+
+interface StatsViewProps {
+  data: TUIData;
+  height: number;
+  colorPalette: ColorPaletteName;
+  width?: number;
+  selectedDate?: string | null;
+}
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const MONTHS_SHORT = ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"];
+const DAYS = ["", "Mon", "", "Wed", "", "Fri", ""];
+
+interface MonthLabel {
+  month: string;
+  weekIndex: number;
+}
+
+export function StatsView(props: StatsViewProps) {
+  const palette = () => getPalette(props.colorPalette);
+  const isNarrowTerminal = () => isNarrow(props.width);
+  const grid = () => props.data.contributionGrid;
+  const cellWidth = 2;
+  
+  const [clickedCell, setClickedCell] = createSignal<string | null>(null);
+  
+  const selectedBreakdown = createMemo(() => {
+    const date = clickedCell();
+    if (!date) return null;
+    if (!props.data.dailyBreakdowns) return null;
+    if (!(props.data.dailyBreakdowns instanceof Map)) return null;
+    return props.data.dailyBreakdowns.get(date) || null;
+  });
+  
+  const monthPositions = createMemo(() => {
+    const sundayRow = grid()[0] || [];
+    if (sundayRow.length === 0) return [];
+    
+    const positions: MonthLabel[] = [];
+    let lastMonth = -1;
+    const monthNames = isNarrowTerminal() ? MONTHS_SHORT : MONTHS;
+    
+    for (let weekIdx = 0; weekIdx < sundayRow.length; weekIdx++) {
+      const cell = sundayRow[weekIdx];
+      if (!cell.date) continue;
+      const month = new Date(cell.date + "T00:00:00").getMonth();
+      if (month !== lastMonth) {
+        positions.push({ month: monthNames[month], weekIndex: weekIdx });
+        lastMonth = month;
+      }
+    }
+    return positions;
+  });
+
+  const totalWeeks = createMemo(() => (grid()[0] || []).length);
+
+  const monthLabelRow = createMemo(() => {
+    const weeks = totalWeeks();
+    const positions = monthPositions();
+    const chars: string[] = new Array(weeks * cellWidth).fill(" ");
+    
+    for (const pos of positions) {
+      const startIdx = pos.weekIndex * cellWidth;
+      const monthChars = pos.month.split("");
+      for (let i = 0; i < monthChars.length && startIdx + i < chars.length; i++) {
+        chars[startIdx + i] = monthChars[i];
+      }
+    }
+    
+    return chars.join("");
+  });
+
+  const dayLabelWidth = () => isNarrowTerminal() ? 2 : 4;
+
+  const isSelected = (cellDate: string | null) => 
+    cellDate && (clickedCell() === cellDate || props.selectedDate === cellDate);
+  
+  const getCellColor = (level: number) => 
+    level === 0 ? "#666666" : getGradeColor(palette(), level as 0 | 1 | 2 | 3 | 4);
+
+
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <box flexDirection="column">
+        <box flexDirection="row">
+          <text dim>{" ".repeat(dayLabelWidth())}</text>
+          <text dim>{monthLabelRow()}</text>
+        </box>
+
+        <box onMouseDown={(e: { x: number; y: number }) => {
+          const labelW = dayLabelWidth();
+          const col = Math.floor((e.x - labelW) / cellWidth);
+          const row = e.y - 2;
+          const gridRows = grid().length;
+          
+          if (row < 0 || row >= gridRows) {
+            return;
+          }
+          if (col < 0) {
+            return;
+          }
+          
+          const rowData = grid()[row];
+          if (!rowData || col >= rowData.length) {
+            return;
+          }
+          
+          const cell = rowData[col];
+          if (!cell?.date) {
+            return;
+          }
+          
+          const newDate = clickedCell() === cell.date ? null : cell.date;
+          setClickedCell(newDate);
+        }}>
+          <For each={DAYS}>
+            {(day, dayIndex) => (
+              <box flexDirection="row">
+                <text dim>{isNarrowTerminal() ? "  " : day.padStart(3) + " "}</text>
+                <For each={grid()[dayIndex()] || []}>
+                  {(cell) => (
+                    <text 
+                      fg={isSelected(cell.date) ? "#ffffff" : getCellColor(cell.level)} 
+                      bg={isSelected(cell.date) ? getCellColor(cell.level) : undefined}
+                    >
+                      {isSelected(cell.date) ? "▓▓" : (cell.level === 0 ? "· " : "██")}
+                    </text>
+                  )}
+                </For>
+              </box>
+            )}
+          </For>
+        </box>
+      </box>
+
+      <box flexDirection="row" gap={2} marginTop={1}>
+        <text dim>Less</text>
+        <box flexDirection="row" gap={0}>
+          <For each={[0, 1, 2, 3, 4]}>
+            {(level) => (
+              <text
+                fg={level === 0 ? "#666666" : getGradeColor(palette(), level as 0 | 1 | 2 | 3 | 4)}
+              >
+                {level === 0 ? "· " : "██"}
+              </text>
+            )}
+          </For>
+        </box>
+        <text dim>More</text>
+        <Show when={!isNarrowTerminal()}>
+          <text dim>|</text>
+          <text dim>Click on a day to see breakdown</text>
+        </Show>
+      </box>
+
+      <Show when={selectedBreakdown()}>
+        <DateBreakdownPanel breakdown={selectedBreakdown()!} isNarrow={isNarrowTerminal()} />
+      </Show>
+
+      <Show when={!selectedBreakdown()}>
+        <box flexDirection="column" marginTop={1}>
+          <box flexDirection={isNarrowTerminal() ? "column" : "row"} gap={isNarrowTerminal() ? 0 : 4}>
+            <box flexDirection="column">
+              <box flexDirection="row" gap={1}>
+                <text dim>{isNarrowTerminal() ? "Model:" : "Favorite model:"}</text>
+                <text fg={getModelColor(props.data.stats.favoriteModel)}>{props.data.stats.favoriteModel}</text>
+              </box>
+              <box flexDirection="row" gap={1}>
+                <text dim>Sessions:</text>
+                <text fg="cyan">{props.data.stats.sessions.toLocaleString()}</text>
+              </box>
+              <box flexDirection="row" gap={1}>
+                <text dim>{isNarrowTerminal() ? "Streak:" : "Current streak:"}</text>
+                <text fg="cyan">{`${props.data.stats.currentStreak} days`}</text>
+              </box>
+              <box flexDirection="row" gap={1}>
+                <text dim>{isNarrowTerminal() ? "Active:" : "Active days:"}</text>
+                <text fg="cyan">{`${props.data.stats.activeDays}/${props.data.stats.totalDays}`}</text>
+              </box>
+            </box>
+
+            <box flexDirection="column">
+              <box flexDirection="row" gap={1}>
+                <text dim>{isNarrowTerminal() ? "Tokens:" : "Total tokens:"}</text>
+                <text fg="cyan">{formatTokens(props.data.stats.totalTokens)}</text>
+              </box>
+              <box flexDirection="row" gap={1}>
+                <text dim>{isNarrowTerminal() ? "Session:" : "Longest session:"}</text>
+                <text fg="cyan">{props.data.stats.longestSession}</text>
+              </box>
+              <box flexDirection="row" gap={1}>
+                <text dim>{isNarrowTerminal() ? "Max streak:" : "Longest streak:"}</text>
+                <text fg="cyan">{`${props.data.stats.longestStreak} days`}</text>
+              </box>
+              <box flexDirection="row" gap={1}>
+                <text dim>{isNarrowTerminal() ? "Peak:" : "Peak hour:"}</text>
+                <text fg="cyan">{props.data.stats.peakHour}</text>
+              </box>
+            </box>
+          </box>
+        </box>
+
+        <Show when={!isNarrowTerminal()}>
+          <box marginTop={1}>
+            <text fg="yellow" italic>{`Your total spending is $${props.data.totalCost.toFixed(2)} on AI coding assistants!`}</text>
+          </box>
+        </Show>
+        <Show when={isNarrowTerminal()}>
+          <box marginTop={1}>
+            <text fg="yellow" italic>{`Total: $${props.data.totalCost.toFixed(2)}`}</text>
+          </box>
+        </Show>
+      </Show>
+    </box>
+  );
+}

package/src/tui/components/TokenBreakdown.tsx

@@ -0,0 +1,46 @@
+import { formatTokens, formatTokensCompact } from "../utils/format.js";
+
+export interface TokenBreakdownData {
+  input: number;
+  output: number;
+  cacheRead: number;
+  cacheWrite: number;
+}
+
+interface TokenBreakdownProps {
+  tokens: TokenBreakdownData;
+  compact?: boolean;
+  indent?: number;
+}
+
+export function TokenBreakdown(props: TokenBreakdownProps) {
+  const indentStr = () => " ".repeat(props.indent ?? 0);
+
+  if (props.compact) {
+    return (
+      <box flexDirection="row">
+        <text fg="#666666">{indentStr()}</text>
+        <text fg="#AAAAAA">{formatTokensCompact(props.tokens.input)}</text>
+        <text fg="#666666">{"/"}</text>
+        <text fg="#AAAAAA">{formatTokensCompact(props.tokens.output)}</text>
+        <text fg="#666666">{"/"}</text>
+        <text fg="#AAAAAA">{formatTokensCompact(props.tokens.cacheRead)}</text>
+        <text fg="#666666">{"/"}</text>
+        <text fg="#AAAAAA">{formatTokensCompact(props.tokens.cacheWrite)}</text>
+      </box>
+    );
+  }
+
+  return (
+    <box flexDirection="row">
+      <text fg="#666666">{`${indentStr()}In: `}</text>
+      <text fg="#AAAAAA">{formatTokens(props.tokens.input)}</text>
+      <text fg="#666666">{" · Out: "}</text>
+      <text fg="#AAAAAA">{formatTokens(props.tokens.output)}</text>
+      <text fg="#666666">{" · CR: "}</text>
+      <text fg="#AAAAAA">{formatTokens(props.tokens.cacheRead)}</text>
+      <text fg="#666666">{" · CW: "}</text>
+      <text fg="#AAAAAA">{formatTokens(props.tokens.cacheWrite)}</text>
+    </box>
+  );
+}

package/src/tui/components/index.ts

@@ -0,0 +1,15 @@
+export { Header } from "./Header.js";
+export { Footer } from "./Footer.js";
+export { OverviewView } from "./OverviewView.js";
+export { ModelView } from "./ModelView.js";
+export { DailyView } from "./DailyView.js";
+export { StatsView } from "./StatsView.js";
+export { BarChart } from "./BarChart.js";
+export type { ChartDataPoint } from "./BarChart.js";
+export { Legend } from "./Legend.js";
+export { LoadingSpinner } from "./LoadingSpinner.js";
+export { ModelRow } from "./ModelRow.js";
+export { TokenBreakdown } from "./TokenBreakdown.js";
+export type { TokenBreakdownData } from "./TokenBreakdown.js";
+export { DateBreakdownPanel } from "./DateBreakdownPanel.js";
+export type { DateBreakdownPanelProps } from "./DateBreakdownPanel.js";

package/src/tui/config/settings.ts

@@ -0,0 +1,130 @@
+import { homedir } from "os";
+import { join } from "path";
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from "fs";
+import type { TUIData, DailyModelBreakdown } from "../types/index.js";
+
+const CONFIG_DIR = join(homedir(), ".config", "tokscale");
+const CACHE_DIR = join(homedir(), ".cache", "tokscale");
+const CONFIG_FILE = join(CONFIG_DIR, "tui-settings.json");
+const CACHE_FILE = join(CACHE_DIR, "tui-data-cache.json");
+
+const CACHE_STALE_THRESHOLD_MS = 60 * 1000;
+
+interface TUISettings {
+  colorPalette: string;
+}
+
+interface CachedTUIData {
+  timestamp: number;
+  enabledSources: string[];
+  data: Omit<TUIData, 'dailyBreakdowns'> & {
+    dailyBreakdowns: Array<[string, DailyModelBreakdown]>;
+  };
+}
+
+export function loadSettings(): TUISettings {
+  try {
+    if (existsSync(CONFIG_FILE)) {
+      return JSON.parse(readFileSync(CONFIG_FILE, "utf-8"));
+    }
+  } catch {
+  }
+  return { colorPalette: "green" };
+}
+
+export function saveSettings(settings: TUISettings): void {
+  if (!existsSync(CONFIG_DIR)) {
+    mkdirSync(CONFIG_DIR, { recursive: true });
+  }
+  writeFileSync(CONFIG_FILE, JSON.stringify(settings, null, 2));
+}
+
+function sourcesMatch(enabledSources: Set<string>, cachedSources: string[]): boolean {
+  const cachedSet = new Set(cachedSources);
+  if (enabledSources.size !== cachedSet.size) {
+    return false;
+  }
+  for (const source of enabledSources) {
+    if (!cachedSet.has(source)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function loadCachedData(enabledSources: Set<string>): TUIData | null {
+  try {
+    if (!existsSync(CACHE_FILE)) {
+      return null;
+    }
+    
+    const cached: CachedTUIData = JSON.parse(readFileSync(CACHE_FILE, "utf-8"));
+    
+    if (!sourcesMatch(enabledSources, cached.enabledSources)) {
+      return null;
+    }
+    
+    if (!cached.data.dailyBreakdowns || !Array.isArray(cached.data.dailyBreakdowns)) {
+      return null;
+    }
+    
+    return {
+      ...cached.data,
+      dailyBreakdowns: new Map(cached.data.dailyBreakdowns),
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function saveCachedData(data: TUIData, enabledSources: Set<string>): void {
+  try {
+    if (!existsSync(CACHE_DIR)) {
+      mkdirSync(CACHE_DIR, { recursive: true });
+    }
+    
+    const serializableBreakdowns = Array.from(data.dailyBreakdowns.entries());
+    const cached: CachedTUIData = {
+      timestamp: Date.now(),
+      enabledSources: Array.from(enabledSources),
+      data: {
+        ...data,
+        dailyBreakdowns: serializableBreakdowns,
+      },
+    };
+    
+    writeFileSync(CACHE_FILE, JSON.stringify(cached));
+  } catch {
+  }
+}
+
+export function isCacheStale(enabledSources: Set<string>): boolean {
+  try {
+    if (!existsSync(CACHE_FILE)) {
+      return true;
+    }
+    
+    const cached: CachedTUIData = JSON.parse(readFileSync(CACHE_FILE, "utf-8"));
+    const cacheAge = Date.now() - cached.timestamp;
+    
+    if (!sourcesMatch(enabledSources, cached.enabledSources)) {
+      return true;
+    }
+    
+    return cacheAge > CACHE_STALE_THRESHOLD_MS;
+  } catch {
+    return true;
+  }
+}
+
+export function getCacheTimestamp(): number | null {
+  try {
+    if (!existsSync(CACHE_FILE)) {
+      return null;
+    }
+    const cached: CachedTUIData = JSON.parse(readFileSync(CACHE_FILE, "utf-8"));
+    return cached.timestamp;
+  } catch {
+    return null;
+  }
+}

package/src/tui/config/themes.ts

@@ -0,0 +1,115 @@
+export interface GraphColorPalette {
+  name: string;
+  grade0: string;
+  grade1: string;
+  grade2: string;
+  grade3: string;
+  grade4: string;
+}
+
+export type ColorPaletteName =
+  | "green"
+  | "halloween"
+  | "teal"
+  | "blue"
+  | "pink"
+  | "purple"
+  | "orange"
+  | "monochrome"
+  | "YlGnBu";
+
+const GRAPH_EMPTY = "#1F1F20";
+
+export const colorPalettes: Record<ColorPaletteName, GraphColorPalette> = {
+  green: {
+    name: "Green",
+    grade0: GRAPH_EMPTY,
+    grade1: "#9be9a8",
+    grade2: "#40c463",
+    grade3: "#30a14e",
+    grade4: "#216e39",
+  },
+  halloween: {
+    name: "Halloween",
+    grade0: GRAPH_EMPTY,
+    grade1: "#FFEE4A",
+    grade2: "#FFC501",
+    grade3: "#FE9600",
+    grade4: "#03001C",
+  },
+  teal: {
+    name: "Teal",
+    grade0: GRAPH_EMPTY,
+    grade1: "#7ee5e5",
+    grade2: "#2dc5c5",
+    grade3: "#0d9e9e",
+    grade4: "#0e6d6d",
+  },
+  blue: {
+    name: "Blue",
+    grade0: GRAPH_EMPTY,
+    grade1: "#79b8ff",
+    grade2: "#388bfd",
+    grade3: "#1f6feb",
+    grade4: "#0d419d",
+  },
+  pink: {
+    name: "Pink",
+    grade0: GRAPH_EMPTY,
+    grade1: "#f0b5d2",
+    grade2: "#d961a0",
+    grade3: "#bf4b8a",
+    grade4: "#99286e",
+  },
+  purple: {
+    name: "Purple",
+    grade0: GRAPH_EMPTY,
+    grade1: "#cdb4ff",
+    grade2: "#a371f7",
+    grade3: "#8957e5",
+    grade4: "#6e40c9",
+  },
+  orange: {
+    name: "Orange",
+    grade0: GRAPH_EMPTY,
+    grade1: "#ffd699",
+    grade2: "#ffb347",
+    grade3: "#ff8c00",
+    grade4: "#cc5500",
+  },
+  monochrome: {
+    name: "Monochrome",
+    grade0: GRAPH_EMPTY,
+    grade1: "#9e9e9e",
+    grade2: "#757575",
+    grade3: "#424242",
+    grade4: "#212121",
+  },
+  YlGnBu: {
+    name: "YlGnBu",
+    grade0: GRAPH_EMPTY,
+    grade1: "#a1dab4",
+    grade2: "#41b6c4",
+    grade3: "#2c7fb8",
+    grade4: "#253494",
+  },
+};
+
+export const DEFAULT_PALETTE: ColorPaletteName = "green";
+
+export const getPaletteNames = (): ColorPaletteName[] =>
+  Object.keys(colorPalettes) as ColorPaletteName[];
+
+export const getPalette = (name: ColorPaletteName): GraphColorPalette =>
+  colorPalettes[name] || colorPalettes[DEFAULT_PALETTE];
+
+export const getGradeColor = (
+  palette: GraphColorPalette,
+  intensity: 0 | 1 | 2 | 3 | 4
+): string => {
+  return (
+    [palette.grade0, palette.grade1, palette.grade2, palette.grade3, palette.grade4][
+      intensity
+    ] || palette.grade0
+  );
+};