@tokscale/cli 1.4.3 → 2.0.0

package/src/tui/components/BarChart.tsx

@@ -1,205 +0,0 @@
-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 getBarWidth = (index: number, total: number) => {
-    const cw = chartWidth();
-    if (total === 0) return 1;
-    const start = Math.floor((index * cw) / total);
-    const end = Math.floor(((index + 1) * cw) / total);
-    return Math.max(1, end - start);
-  };
-  
-  const visibleData = () => data();
-
-  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 = () => chartWidth();
-  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, barIndex: 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 = getBarWidth(barIndex, visibleData().length);
-
-    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, barIndex) => {
-                    const bar = getBarContent(point, row, barIndex());
-                    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>
-  );
-}

package/src/tui/components/DailyView.tsx

@@ -1,132 +0,0 @@
-import { For, createMemo, type Accessor } from "solid-js";
-import type { TUIData, SortType } from "../hooks/useData.js";
-import { formatTokensCompact, formatCostFull } from "../utils/format.js";
-import { isNarrow } 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_DATE_COLUMN = 14;
-
-interface DailyViewProps {
-  data: TUIData;
-  sortBy: SortType;
-  sortDesc: boolean;
-  selectedIndex: Accessor<number>;
-  height: number;
-  width?: number;
-}
-
-export function DailyView(props: DailyViewProps) {
-  const isNarrowTerminal = () => isNarrow(props.width);
-  const terminalWidth = () => props.width ?? process.stdout.columns ?? 80;
-  
-  const dateColumnWidths = createMemo(() => {
-    const metricWidth = isNarrowTerminal() ? METRIC_COLUMNS_WIDTH_NARROW : METRIC_COLUMNS_WIDTH_FULL;
-    const minDate = MIN_DATE_COLUMN;
-    const available = Math.max(terminalWidth() - SIDE_PADDING - metricWidth, minDate);
-    const dateColumn = Math.max(minDate, available);
-
-    return {
-      column: dateColumn,
-      text: dateColumn,
-    };
-  });
-  
-  const sortedEntries = createMemo(() => {
-    const entries = props.data.dailyEntries;
-    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 if (sortBy === "date") cmp = a.date.localeCompare(b.date);
-      return sortDesc ? -cmp : cmp;
-    });
-  });
-
-  const visibleEntries = createMemo(() => {
-    const maxRows = Math.max(props.height - 3, 0);
-    return sortedEntries().slice(0, maxRows);
-  });
-
-  const formattedRows = createMemo(() => {
-    const dateColWidth = dateColumnWidths().column;
-    const narrow = isNarrowTerminal();
-    return visibleEntries().map((entry) => ({
-      entry,
-      dateColWidth,
-      narrow,
-      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 dateHeader = () => (props.sortBy === "date" ? `${sortArrow()} Date` : "Date");
-  const totalHeader = () => (props.sortBy === "tokens" ? `${sortArrow()} Total` : "Total");
-  const costHeader = () => (props.sortBy === "cost" ? `${sortArrow()} Cost` : "Cost");
-
-  const renderHeader = () => {
-    const dateColWidth = dateColumnWidths().column;
-    if (isNarrowTerminal()) {
-      return `${"Date".padEnd(dateColWidth)}${totalHeader().padStart(TOTAL_COL_WIDTH)}${costHeader().padStart(COST_COL_WIDTH)}`;
-    }
-    return `${("  " + dateHeader()).padEnd(dateColWidth)}${"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 (row.narrow) {
-      return `${row.entry.date.padEnd(row.dateColWidth)}${row.total.padStart(TOTAL_COL_WIDTH)}`;
-    }
-    return `${row.entry.date.padEnd(row.dateColWidth)}${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
-                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/DateBreakdownPanel.tsx

@@ -1,79 +0,0 @@
-import { For, createMemo } from "solid-js";
-import type { DailyModelBreakdown } from "../types/index.js";
-import { getSourceColor, getSourceDisplayName } from "../utils/colors.js";
-import { formatTokens, formatCost } from "../utils/format.js";
-import { ModelRow } from "./ModelRow.js";
-
-function formatDateDisplay(dateStr: string): string {
-  const date = new Date(dateStr + "T00:00:00");
-  return date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", year: "numeric" });
-}
-
-export interface DateBreakdownPanelProps {
-  breakdown: DailyModelBreakdown;
-  isNarrow: boolean;
-}
-
-export function DateBreakdownPanel(props: DateBreakdownPanelProps) {
-  const groupedBySource = createMemo(() => {
-    if (!props.breakdown?.models) return new Map();
-    const groups = new Map<string, typeof props.breakdown.models>();
-    for (const model of props.breakdown.models) {
-      const existing = groups.get(model.source) || [];
-      existing.push(model);
-      groups.set(model.source, existing);
-    }
-    for (const [, models] of groups) {
-      models.sort((a, b) => {
-        const totalA = a.tokens.input + a.tokens.output + (a.tokens.cacheRead || 0) + (a.tokens.cacheWrite || 0);
-        const totalB = b.tokens.input + b.tokens.output + (b.tokens.cacheRead || 0) + (b.tokens.cacheWrite || 0);
-        return totalB - totalA;
-      });
-    }
-    return groups;
-  });
-
-  return (
-    <box flexDirection="column" marginTop={1} paddingX={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text bold fg="white">{formatDateDisplay(props.breakdown.date)}</text>
-        <box flexDirection="row" gap={2}>
-          <text fg="cyan">{formatTokens(props.breakdown.totalTokens)}</text>
-          <text fg="green" bold>{formatCost(props.breakdown.cost)}</text>
-        </box>
-      </box>
-      
-      <box flexDirection="column" marginTop={1}>
-        <For each={Array.from(groupedBySource().entries())}>
-          {([source, models]) => (
-            <box flexDirection="column">
-              <box flexDirection="row" gap={1}>
-                <text fg={getSourceColor(source)} bold>{`● ${getSourceDisplayName(source)}`}</text>
-                <text dim>{`(${models.length} model${models.length > 1 ? "s" : ""})`}</text>
-              </box>
-              <For each={models}>
-                {(model) => (
-                  <ModelRow
-                    modelId={model.modelId}
-                    tokens={{
-                      input: model.tokens.input,
-                      output: model.tokens.output,
-                      cacheRead: model.tokens.cacheRead,
-                      cacheWrite: model.tokens.cacheWrite,
-                    }}
-                    compact={props.isNarrow}
-                    indent={2}
-                  />
-                )}
-              </For>
-            </box>
-          )}
-        </For>
-      </box>
-      
-      <box flexDirection="row" marginTop={1}>
-        <text dim>Click another day or same day to close</text>
-      </box>
-    </box>
-  );
-}