@tokscale/cli 1.4.3 → 2.0.0

package/src/tui/components/ModelView.tsx

@@ -1,147 +0,0 @@
-import { For, createMemo, type Accessor } from "solid-js";
-import type { TUIData, SortType } from "../hooks/useData.js";
-import { getModelColor, getSourceDisplayName } from "../utils/colors.js";
-import { formatTokensCompact, formatCostFull } from "../utils/format.js";
-import { isNarrow, isVeryNarrow } from "../utils/responsive.js";
-
-const STRIPE_BG = "#232328";
-
-const INPUT_COL_WIDTH = 12;
-const OUTPUT_COL_WIDTH = 12;
-const CACHE_READ_COL_WIDTH = 10;
-const CACHE_WRITE_COL_WIDTH = 10;
-const TOTAL_COL_WIDTH = 14;
-const COST_COL_WIDTH = 12;
-const METRIC_COLUMNS_WIDTH_FULL = INPUT_COL_WIDTH + OUTPUT_COL_WIDTH + CACHE_READ_COL_WIDTH + CACHE_WRITE_COL_WIDTH + TOTAL_COL_WIDTH + COST_COL_WIDTH;
-const METRIC_COLUMNS_WIDTH_NARROW = TOTAL_COL_WIDTH + COST_COL_WIDTH;
-const SIDE_PADDING = 2;
-const MIN_NAME_COLUMN = 16;
-const MIN_NAME_COLUMN_NARROW = 12;
-
-interface ModelViewProps {
-  data: TUIData;
-  sortBy: SortType;
-  sortDesc: boolean;
-  selectedIndex: Accessor<number>;
-  height: number;
-  width: number;
-}
-
-export function ModelView(props: ModelViewProps) {
-  const sortedEntries = createMemo(() => {
-    const entries = props.data.modelEntries;
-    const sortBy = props.sortBy;
-    const sortDesc = props.sortDesc;
-    
-    return [...entries].sort((a, b) => {
-      let cmp = 0;
-      if (sortBy === "cost") cmp = a.cost - b.cost;
-      else if (sortBy === "tokens") cmp = a.total - b.total;
-      else cmp = a.model.localeCompare(b.model);
-      return sortDesc ? -cmp : cmp;
-    });
-  });
-
-  const isNarrowTerminal = () => isNarrow(props.width);
-  const isVeryNarrowTerminal = () => isVeryNarrow(props.width);
-  
-  const nameColumnWidths = createMemo(() => {
-    const metricWidth = isNarrowTerminal() ? METRIC_COLUMNS_WIDTH_NARROW : METRIC_COLUMNS_WIDTH_FULL;
-    const minName = isNarrowTerminal() ? MIN_NAME_COLUMN_NARROW : MIN_NAME_COLUMN;
-    const available = Math.max(props.width - SIDE_PADDING - metricWidth, minName);
-    const nameColumn = Math.max(minName, available);
-
-    return {
-      column: nameColumn,
-      text: Math.max(nameColumn - 1, 1),
-    };
-  });
-
-  const visibleEntries = createMemo(() => {
-    const maxRows = Math.max(props.height - 3, 0);
-    return sortedEntries().slice(0, maxRows);
-  });
-
-  const formattedRows = createMemo(() => {
-    const nameWidth = nameColumnWidths().text;
-    return visibleEntries().map((entry) => {
-      const sourceLabel = getSourceDisplayName(entry.source);
-      const fullName = `${sourceLabel} ${entry.model}`;
-      let displayName = fullName;
-      if (fullName.length > nameWidth) {
-        displayName = nameWidth > 1 ? `${fullName.slice(0, nameWidth - 1)}…` : fullName.slice(0, 1);
-      }
-
-      return {
-        entry,
-        displayName,
-        nameWidth,
-        input: formatTokensCompact(entry.input),
-        output: formatTokensCompact(entry.output),
-        cacheRead: formatTokensCompact(entry.cacheRead),
-        cacheWrite: formatTokensCompact(entry.cacheWrite),
-        total: formatTokensCompact(entry.total),
-        cost: formatCostFull(entry.cost),
-      };
-    });
-  });
-
-  const sortArrow = () => (props.sortDesc ? "▼" : "▲");
-  const nameHeader = () => isVeryNarrowTerminal() 
-    ? ` Model`
-    : ` Source/Model`;
-  const totalHeader = () => (props.sortBy === "tokens" ? `${sortArrow()} Total` : "Total");
-  const costHeader = () => (props.sortBy === "cost" ? `${sortArrow()} Cost` : "Cost");
-
-  const renderHeader = () => {
-    if (isNarrowTerminal()) {
-      return `${nameHeader().padEnd(nameColumnWidths().column)}${totalHeader().padStart(TOTAL_COL_WIDTH)}${costHeader().padStart(COST_COL_WIDTH)}`;
-    }
-    return `${nameHeader().padEnd(nameColumnWidths().column)}${"Input".padStart(INPUT_COL_WIDTH)}${"Output".padStart(OUTPUT_COL_WIDTH)}${"C.Read".padStart(CACHE_READ_COL_WIDTH)}${"C.Write".padStart(CACHE_WRITE_COL_WIDTH)}${totalHeader().padStart(TOTAL_COL_WIDTH)}${costHeader().padStart(COST_COL_WIDTH)}`;
-  };
-
-  const renderRowData = (row: typeof formattedRows extends () => (infer T)[] ? T : never) => {
-    if (isNarrowTerminal()) {
-      return `${row.displayName.padEnd(row.nameWidth)}${row.total.padStart(TOTAL_COL_WIDTH)}`;
-    }
-    return `${row.displayName.padEnd(row.nameWidth)}${row.input.padStart(INPUT_COL_WIDTH)}${row.output.padStart(OUTPUT_COL_WIDTH)}${row.cacheRead.padStart(CACHE_READ_COL_WIDTH)}${row.cacheWrite.padStart(CACHE_WRITE_COL_WIDTH)}${row.total.padStart(TOTAL_COL_WIDTH)}`;
-  };
-
-  return (
-    <box flexDirection="column">
-      <box flexDirection="row">
-        <text fg="cyan" bold>
-          {renderHeader()}
-        </text>
-      </box>
-
-      <For each={formattedRows()}>
-        {(row, i) => {
-          const isActive = createMemo(() => i() === props.selectedIndex());
-          const rowBg = createMemo(() => isActive() ? "blue" : (i() % 2 === 1 ? STRIPE_BG : undefined));
-          
-          return (
-            <box flexDirection="row">
-              <text 
-                fg={getModelColor(row.entry.model)} 
-                bg={rowBg()}
-              >●</text>
-              <text
-                bg={rowBg()}
-                fg={isActive() ? "white" : undefined}
-              >
-                {renderRowData(row)}
-              </text>
-              <text
-                fg="green"
-                bg={rowBg()}
-              >
-                {row.cost.padStart(COST_COL_WIDTH)}
-              </text>
-            </box>
-          );
-        }}
-      </For>
-    </box>
-  );
-}

package/src/tui/components/OverviewView.tsx

@@ -1,121 +0,0 @@
-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";
-
-const CHART_MAX_DAYS = 60;
-
-function getDateDaysAgo(days: number): string {
-  const date = new Date();
-  date.setDate(date.getDate() - days);
-  return date.toISOString().split("T")[0];
-}
-
-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 recentChartData = createMemo(() => {
-    const cutoffDate = getDateDaysAgo(CHART_MAX_DAYS);
-    return props.data.chartData.filter(d => d.date >= cutoffDate);
-  });
-
-  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={recentChartData()} width={props.width - 2} 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

@@ -1,249 +0,0 @@
-import { For, Show, createMemo, createSignal } from "solid-js";
-import type { TUIData } from "../hooks/useData.js";
-import type { ColorPaletteName } from "../config/themes.js";
-import type { SortType, GridCell } from "../types/index.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;
-  sortBy?: SortType;
-}
-
-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 metric = () => props.sortBy ?? "tokens";
-  const cellWidth = 2;
-
-  const grid = createMemo((): GridCell[][] => {
-    const contributions = props.data.contributions;
-    const baseGrid = props.data.contributionGrid;
-    
-    const values = contributions.map(c => metric() === "tokens" ? c.tokens : c.cost);
-    const maxValue = Math.max(1, ...values);
-    
-    const levelMap = new Map<string, number>();
-    for (const c of contributions) {
-      const value = metric() === "tokens" ? c.tokens : c.cost;
-      const level = value === 0 ? 0 : Math.min(4, Math.ceil((value / maxValue) * 4));
-      levelMap.set(c.date, level);
-    }
-    
-    return baseGrid.map(row => 
-      row.map(cell => ({
-        date: cell.date,
-        level: cell.date ? (levelMap.get(cell.date) ?? 0) : 0,
-      }))
-    );
-  });
-  
-  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

@@ -1,46 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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";