@tokscale/cli 1.0.4 → 1.0.6

package/src/tui/components/ModelView.tsx

@@ -0,0 +1,145 @@
+import { For, createMemo, type Accessor } from "solid-js";
+import type { TUIData, SortType } from "../hooks/useData.js";
+import { getModelColor } 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_COL_WIDTH = 12;
+const TOTAL_COL_WIDTH = 14;
+const COST_COL_WIDTH = 12;
+const METRIC_COLUMNS_WIDTH_FULL = INPUT_COL_WIDTH + OUTPUT_COL_WIDTH + CACHE_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 = entry.source.charAt(0).toUpperCase() + entry.source.slice(1);
+      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),
+        cache: formatTokensCompact(entry.cacheRead),
+        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)}${"Cache".padStart(CACHE_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.cache.padStart(CACHE_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

@@ -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/{dist/tui/components/StatsView.jsx → src/tui/components/StatsView.tsx}

@@ -1,102 +1,143 @@
 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", ""];
-export function StatsView(props) {
-    const palette = () => getPalette(props.colorPalette);
-    const isNarrowTerminal = () => isNarrow(props.width);
-    const grid = () => props.data.contributionGrid;
-    const cellWidth = 2;
-    const [clickedCell, setClickedCell] = createSignal(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 = [];
-        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 = 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) => cellDate && (clickedCell() === cellDate || props.selectedDate === cellDate);
-    const getCellColor = (level) => level === 0 ? "#666666" : getGradeColor(palette(), level);
-    return (<box flexDirection="column" gap={1}>
+
+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) => {
-            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);
+        <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">
+            {(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}>
+                  {(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>)}
+                    </text>
+                  )}
                 </For>
-              </box>)}
+              </box>
+            )}
           </For>
         </box>
       </box>
@@ -105,9 +146,13 @@ export function StatsView(props) {
         <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)}>
+            {(level) => (
+              <text
+                fg={level === 0 ? "#666666" : getGradeColor(palette(), level as 0 | 1 | 2 | 3 | 4)}
+              >
                 {level === 0 ? "· " : "██"}
-              </text>)}
+              </text>
+            )}
           </For>
         </box>
         <text dim>More</text>
@@ -118,7 +163,7 @@ export function StatsView(props) {
       </box>
 
       <Show when={selectedBreakdown()}>
-        <DateBreakdownPanel breakdown={selectedBreakdown()} isNarrow={isNarrowTerminal()}/>
+        <DateBreakdownPanel breakdown={selectedBreakdown()!} isNarrow={isNarrowTerminal()} />
       </Show>
 
       <Show when={!selectedBreakdown()}>
@@ -175,6 +220,6 @@ export function StatsView(props) {
           </box>
         </Show>
       </Show>
-    </box>);
+    </box>
+  );
 }
-//# sourceMappingURL=StatsView.jsx.map

package/{dist/tui/components/TokenBreakdown.jsx → src/tui/components/TokenBreakdown.tsx}

@@ -1,8 +1,24 @@
 import { formatTokens, formatTokensCompact } from "../utils/format.js";
-export function TokenBreakdown(props) {
-    const indentStr = () => " ".repeat(props.indent ?? 0);
-    if (props.compact) {
-        return (<box flexDirection="row">
+
+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>
@@ -11,9 +27,12 @@ export function TokenBreakdown(props) {
         <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">
+      </box>
+    );
+  }
+
+  return (
+    <box flexDirection="row">
       <text fg="#666666">{`${indentStr()}In: `}</text>
       <text fg="#AAAAAA">{formatTokens(props.tokens.input)}</text>
       <text fg="#666666">{" · Out: "}</text>
@@ -22,6 +41,6 @@ export function TokenBreakdown(props) {
       <text fg="#AAAAAA">{formatTokens(props.tokens.cacheRead)}</text>
       <text fg="#666666">{" · CW: "}</text>
       <text fg="#AAAAAA">{formatTokens(props.tokens.cacheWrite)}</text>
-    </box>);
+    </box>
+  );
 }
-//# sourceMappingURL=TokenBreakdown.jsx.map

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";