@tokscale/cli 1.0.5 → 1.0.7

package/src/spinner.ts

@@ -0,0 +1,283 @@
+/**
+ * OpenCode-style Knight Rider Spinner
+ * Accurate port from: https://github.com/sst/opencode/blob/dev/packages/opencode/src/cli/cmd/tui/ui/spinner.ts
+ *
+ * Features:
+ * - Bidirectional sweep (left→right→left)
+ * - Hold frames at each end (pause effect)
+ * - Color gradient trail using ANSI 256 colors
+ * - Same characters as OpenCode: ■ (active) / ⬝ (inactive)
+ */
+
+// =============================================================================
+// ANSI Color Helpers
+// =============================================================================
+
+function ansi256Fg(code: number): string {
+  return `\x1b[38;5;${code}m`;
+}
+
+const RESET = "\x1b[0m";
+const HIDE_CURSOR = "\x1B[?25l";
+const SHOW_CURSOR = "\x1B[?25h";
+const CLEAR_LINE = "\r\x1B[K";
+
+// =============================================================================
+// Color Gradients (ANSI 256)
+// Approximates OpenCode's RGBA alpha-based trail fade
+// =============================================================================
+
+type ColorName = "cyan" | "green" | "magenta" | "yellow" | "red" | "blue" | "white";
+
+const COLOR_GRADIENTS: Record<ColorName, number[]> = {
+  // Bright → dim (6 steps for trail)
+  cyan: [51, 44, 37, 30, 23, 17],
+  green: [46, 40, 34, 28, 22, 22],
+  magenta: [201, 165, 129, 93, 57, 53],
+  yellow: [226, 220, 214, 178, 136, 94],
+  red: [196, 160, 124, 88, 52, 52],
+  blue: [33, 27, 21, 18, 17, 17],
+  white: [255, 250, 245, 240, 236, 232],
+};
+
+const INACTIVE_COLOR = 240; // Gray for ⬝
+
+// =============================================================================
+// Frame Generation (matches OpenCode exactly)
+// =============================================================================
+
+interface SpinnerOptions {
+  /** Width of the spinner in characters (default: 8) */
+  width?: number;
+  /** Frames to hold at start position (default: 30) */
+  holdStart?: number;
+  /** Frames to hold at end position (default: 9) */
+  holdEnd?: number;
+  /** Trail length - number of colored blocks behind lead (default: 4) */
+  trailLength?: number;
+  /** Color theme (default: "cyan") */
+  color?: ColorName;
+  /** Frame interval in ms (default: 40) */
+  interval?: number;
+}
+
+interface ScannerState {
+  activePosition: number;
+  isMovingForward: boolean;
+}
+
+/**
+ * Calculate scanner state for a given frame index
+ * Matches OpenCode's getScannerState() exactly
+ */
+function getScannerState(
+  frameIndex: number,
+  width: number,
+  holdStart: number,
+  holdEnd: number
+): ScannerState {
+  const forwardFrames = width;
+  const backwardFrames = width - 1;
+  const totalCycle = forwardFrames + holdEnd + backwardFrames + holdStart;
+
+  // Normalize frame index to cycle
+  const normalizedFrame = frameIndex % totalCycle;
+
+  if (normalizedFrame < forwardFrames) {
+    // Phase 1: Moving forward (0 → width-1)
+    return {
+      activePosition: normalizedFrame,
+      isMovingForward: true,
+    };
+  } else if (normalizedFrame < forwardFrames + holdEnd) {
+    // Phase 2: Holding at end
+    return {
+      activePosition: width - 1,
+      isMovingForward: true,
+    };
+  } else if (normalizedFrame < forwardFrames + holdEnd + backwardFrames) {
+    // Phase 3: Moving backward (width-2 → 0)
+    const backwardIndex = normalizedFrame - forwardFrames - holdEnd;
+    return {
+      activePosition: width - 2 - backwardIndex,
+      isMovingForward: false,
+    };
+  } else {
+    // Phase 4: Holding at start
+    return {
+      activePosition: 0,
+      isMovingForward: false,
+    };
+  }
+}
+
+/**
+ * Generate a single frame string with colors
+ */
+function generateColoredFrame(
+  frameIndex: number,
+  width: number,
+  holdStart: number,
+  holdEnd: number,
+  trailLength: number,
+  gradient: number[]
+): string {
+  const state = getScannerState(frameIndex, width, holdStart, holdEnd);
+  const { activePosition, isMovingForward } = state;
+
+  let result = "";
+
+  for (let i = 0; i < width; i++) {
+    // Calculate directional distance (positive = trailing behind)
+    const directionalDistance = isMovingForward
+      ? activePosition - i // Forward: trail is to the left
+      : i - activePosition; // Backward: trail is to the right
+
+    if (directionalDistance >= 0 && directionalDistance < trailLength) {
+      // Active position with color gradient
+      const colorIdx = Math.min(directionalDistance, gradient.length - 1);
+      result += ansi256Fg(gradient[colorIdx]) + "■" + RESET;
+    } else {
+      // Inactive position
+      result += ansi256Fg(INACTIVE_COLOR) + "⬝" + RESET;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Calculate total frames in one complete cycle
+ */
+function getTotalFrames(width: number, holdStart: number, holdEnd: number): number {
+  return width + holdEnd + (width - 1) + holdStart;
+}
+
+// =============================================================================
+// Spinner Class
+// =============================================================================
+
+export class Spinner {
+  private intervalId: NodeJS.Timeout | null = null;
+  private frameIndex = 0;
+  private width: number;
+  private holdStart: number;
+  private holdEnd: number;
+  private trailLength: number;
+  private gradient: number[];
+  private interval: number;
+  private message: string = "";
+  private totalFrames: number;
+
+  constructor(options: SpinnerOptions = {}) {
+    this.width = options.width ?? 8;
+    this.holdStart = options.holdStart ?? 30;
+    this.holdEnd = options.holdEnd ?? 9;
+    this.trailLength = options.trailLength ?? 4;
+    this.interval = options.interval ?? 40;
+
+    const colorName = options.color ?? "cyan";
+    this.gradient = COLOR_GRADIENTS[colorName] || COLOR_GRADIENTS.cyan;
+
+    this.totalFrames = getTotalFrames(this.width, this.holdStart, this.holdEnd);
+  }
+
+  /**
+   * Start the spinner with a message
+   */
+  start(message: string): void {
+    this.message = message;
+    this.frameIndex = 0;
+
+    // Hide cursor
+    process.stdout.write(HIDE_CURSOR);
+
+    this.intervalId = setInterval(() => {
+      const frame = generateColoredFrame(
+        this.frameIndex,
+        this.width,
+        this.holdStart,
+        this.holdEnd,
+        this.trailLength,
+        this.gradient
+      );
+
+      process.stdout.write(`${CLEAR_LINE}  ${frame} ${this.message}`);
+      this.frameIndex = (this.frameIndex + 1) % this.totalFrames;
+    }, this.interval);
+  }
+
+  /**
+   * Update the spinner message while running
+   */
+  update(message: string): void {
+    this.message = message;
+  }
+
+  /**
+   * Stop the spinner and show a success message
+   */
+  success(message: string): void {
+    this.stop();
+    console.log(`  \x1b[32m✓\x1b[0m ${message}`);
+  }
+
+  /**
+   * Stop the spinner and show an error message
+   */
+  error(message: string): void {
+    this.stop();
+    console.log(`  \x1b[31m✗\x1b[0m ${message}`);
+  }
+
+  /**
+   * Stop the spinner without a message
+   */
+  stop(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+    process.stdout.write(CLEAR_LINE);
+    process.stdout.write(SHOW_CURSOR);
+  }
+
+  /**
+   * Check if spinner is currently running
+   */
+  isSpinning(): boolean {
+    return this.intervalId !== null;
+  }
+}
+
+// =============================================================================
+// Convenience Functions
+// =============================================================================
+
+/**
+ * Create a spinner with default OpenCode settings
+ */
+export function createSpinner(options?: SpinnerOptions): Spinner {
+  return new Spinner(options);
+}
+
+/**
+ * Run an async function with a spinner
+ */
+export async function withSpinner<T>(
+  message: string,
+  fn: () => Promise<T>,
+  options?: SpinnerOptions & { successMessage?: string; errorMessage?: string }
+): Promise<T> {
+  const spinner = new Spinner(options);
+  spinner.start(message);
+
+  try {
+    const result = await fn();
+    spinner.success(options?.successMessage ?? message);
+    return result;
+  } catch (error) {
+    spinner.error(options?.errorMessage ?? `Failed: ${message}`);
+    throw error;
+  }
+}

package/src/submit.ts

@@ -0,0 +1,175 @@
+/**
+ * Tokscale CLI Submit Command
+ * Submits local token usage data to the social platform
+ */
+
+import pc from "picocolors";
+import { loadCredentials, getApiBaseUrl } from "./credentials.js";
+import { PricingFetcher } from "./pricing.js";
+import {
+  isNativeAvailable,
+  generateGraphWithPricingAsync,
+} from "./native.js";
+import type { TokenContributionData } from "./graph-types.js";
+import { formatCurrency } from "./table.js";
+
+interface SubmitOptions {
+  opencode?: boolean;
+  claude?: boolean;
+  codex?: boolean;
+  gemini?: boolean;
+  cursor?: boolean;
+  since?: string;
+  until?: string;
+  year?: string;
+  dryRun?: boolean;
+}
+
+interface SubmitResponse {
+  success: boolean;
+  submissionId?: string;
+  username?: string;
+  metrics?: {
+    totalTokens: number;
+    totalCost: number;
+    dateRange: {
+      start: string;
+      end: string;
+    };
+    activeDays: number;
+    sources: string[];
+  };
+  warnings?: string[];
+  error?: string;
+  details?: string[];
+}
+
+type SourceType = "opencode" | "claude" | "codex" | "gemini" | "cursor";
+
+/**
+ * Submit command - sends usage data to the platform
+ */
+export async function submit(options: SubmitOptions = {}): Promise<void> {
+  // Step 1: Check if logged in
+  const credentials = loadCredentials();
+  if (!credentials) {
+    console.log(pc.yellow("\n  Not logged in."));
+    console.log(pc.gray("  Run 'tokscale login' first.\n"));
+    process.exit(1);
+  }
+
+  // Step 2: Log native module status (TS fallback available)
+  if (!isNativeAvailable()) {
+    console.log(pc.yellow("\n  Note: Using TypeScript fallback (native module not available)"));
+    console.log(pc.gray("  Run 'bun run build:core' for faster processing.\n"));
+  }
+
+  console.log(pc.cyan("\n  Tokscale - Submit Usage Data\n"));
+
+  // Step 3: Generate graph data
+  console.log(pc.gray("  Scanning local session data..."));
+
+  const fetcher = new PricingFetcher();
+  await fetcher.fetchPricing();
+  const pricingEntries = fetcher.toPricingEntries();
+
+  // Determine sources
+  const hasFilter = options.opencode || options.claude || options.codex || options.gemini || options.cursor;
+  let sources: SourceType[] | undefined;
+  if (hasFilter) {
+    sources = [];
+    if (options.opencode) sources.push("opencode");
+    if (options.claude) sources.push("claude");
+    if (options.codex) sources.push("codex");
+    if (options.gemini) sources.push("gemini");
+    if (options.cursor) sources.push("cursor");
+  }
+
+  let data: TokenContributionData;
+  try {
+    data = await generateGraphWithPricingAsync({
+      sources,
+      pricing: pricingEntries,
+      since: options.since,
+      until: options.until,
+      year: options.year,
+    });
+  } catch (error) {
+    console.error(pc.red(`\n  Error generating data: ${(error as Error).message}\n`));
+    process.exit(1);
+  }
+
+  // Step 4: Show summary
+  console.log(pc.white("  Data to submit:"));
+  console.log(pc.gray(`    Date range: ${data.meta.dateRange.start} to ${data.meta.dateRange.end}`));
+  console.log(pc.gray(`    Active days: ${data.summary.activeDays}`));
+  console.log(pc.gray(`    Total tokens: ${data.summary.totalTokens.toLocaleString()}`));
+  console.log(pc.gray(`    Total cost: ${formatCurrency(data.summary.totalCost)}`));
+  console.log(pc.gray(`    Sources: ${data.summary.sources.join(", ")}`));
+  console.log(pc.gray(`    Models: ${data.summary.models.length} models`));
+  console.log();
+
+  if (data.summary.totalTokens === 0) {
+    console.log(pc.yellow("  No usage data found to submit.\n"));
+    return;
+  }
+
+  // Step 5: Dry run check
+  if (options.dryRun) {
+    console.log(pc.yellow("  Dry run - not submitting data.\n"));
+    return;
+  }
+
+  // Step 6: Submit to server
+  console.log(pc.gray("  Submitting to server..."));
+
+  const baseUrl = getApiBaseUrl();
+
+  try {
+    const response = await fetch(`${baseUrl}/api/submit`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${credentials.token}`,
+      },
+      body: JSON.stringify(data),
+    });
+
+    const result: SubmitResponse = await response.json();
+
+    if (!response.ok) {
+      console.error(pc.red(`\n  Error: ${result.error || "Submission failed"}`));
+      if (result.details) {
+        for (const detail of result.details) {
+          console.error(pc.gray(`    - ${detail}`));
+        }
+      }
+      console.log();
+      process.exit(1);
+    }
+
+    // Success!
+    console.log(pc.green("\n  Successfully submitted!"));
+    console.log();
+    console.log(pc.white("  Summary:"));
+    console.log(pc.gray(`    Submission ID: ${result.submissionId}`));
+    console.log(pc.gray(`    Total tokens: ${result.metrics?.totalTokens?.toLocaleString()}`));
+    console.log(pc.gray(`    Total cost: ${formatCurrency(result.metrics?.totalCost || 0)}`));
+    console.log(pc.gray(`    Active days: ${result.metrics?.activeDays}`));
+    console.log();
+    console.log(pc.cyan(`  View your profile: ${baseUrl}/u/${credentials.username}`));
+    console.log();
+
+    if (result.warnings && result.warnings.length > 0) {
+      console.log(pc.yellow("  Warnings:"));
+      for (const warning of result.warnings) {
+        console.log(pc.gray(`    - ${warning}`));
+      }
+      console.log();
+    }
+  } catch (error) {
+    console.error(pc.red(`\n  Error: Failed to connect to server.`));
+    console.error(pc.gray(`  ${(error as Error).message}\n`));
+    process.exit(1);
+  }
+}

package/src/table.ts

@@ -0,0 +1,233 @@
+/**
+ * Dynamic width table rendering (inspired by ccusage)
+ */
+
+import Table from "cli-table3";
+import pc from "picocolors";
+import stringWidth from "string-width";
+
+export type TableCellAlign = "left" | "right" | "center";
+export type TableRow = (string | number | { content: string; hAlign?: TableCellAlign })[];
+
+export interface TableOptions {
+  head: string[];
+  colAligns?: TableCellAlign[];
+  style?: { head?: string[] };
+  compactHead?: string[];
+  compactColAligns?: TableCellAlign[];
+  compactThreshold?: number;
+}
+
+export class ResponsiveTable {
+  private head: string[];
+  private rows: TableRow[] = [];
+  private colAligns: TableCellAlign[];
+  private style?: { head?: string[] };
+  private compactHead?: string[];
+  private compactColAligns?: TableCellAlign[];
+  private compactThreshold: number;
+  private compactMode = false;
+
+  constructor(options: TableOptions) {
+    this.head = options.head;
+    this.colAligns = options.colAligns ?? Array.from({ length: this.head.length }, () => "left");
+    this.style = options.style;
+    this.compactHead = options.compactHead;
+    this.compactColAligns = options.compactColAligns;
+    this.compactThreshold = options.compactThreshold ?? 100;
+  }
+
+  push(row: TableRow): void {
+    this.rows.push(row);
+  }
+
+  private filterRowToCompact(row: TableRow, compactIndices: number[]): TableRow {
+    return compactIndices.map((index) => row[index] ?? "");
+  }
+
+  private getCurrentTableConfig(): { head: string[]; colAligns: TableCellAlign[] } {
+    if (this.compactMode && this.compactHead && this.compactColAligns) {
+      return { head: this.compactHead, colAligns: this.compactColAligns };
+    }
+    return { head: this.head, colAligns: this.colAligns };
+  }
+
+  private getCompactIndices(): number[] {
+    if (!this.compactHead || !this.compactMode) {
+      return Array.from({ length: this.head.length }, (_, i) => i);
+    }
+    return this.compactHead.map((compactHeader) => {
+      const index = this.head.indexOf(compactHeader);
+      return index < 0 ? 0 : index;
+    });
+  }
+
+  toString(): string {
+    const terminalWidth =
+      Number.parseInt(process.env.COLUMNS ?? "", 10) || process.stdout.columns || 120;
+
+    this.compactMode = terminalWidth < this.compactThreshold && this.compactHead != null;
+
+    const { head, colAligns } = this.getCurrentTableConfig();
+    const compactIndices = this.getCompactIndices();
+
+    const processedRows = this.compactMode
+      ? this.rows.map((row) => this.filterRowToCompact(row, compactIndices))
+      : this.rows;
+
+    const allRows = [
+      head.map(String),
+      ...processedRows.map((row) =>
+        row.map((cell) => {
+          if (typeof cell === "object" && cell != null && "content" in cell) {
+            return String(cell.content);
+          }
+          return String(cell ?? "");
+        })
+      ),
+    ];
+
+    const contentWidths = head.map((_, colIndex) => {
+      const maxLength = Math.max(...allRows.map((row) => stringWidth(String(row[colIndex] ?? ""))));
+      return maxLength;
+    });
+
+    const numColumns = head.length;
+    const tableOverhead = 3 * numColumns + 1;
+    const availableWidth = terminalWidth - tableOverhead;
+
+    const columnWidths = contentWidths.map((width, index) => {
+      const align = colAligns[index];
+      if (align === "right") {
+        return Math.max(width + 3, 11);
+      } else if (index === 1) {
+        return Math.max(width + 2, 15);
+      }
+      return Math.max(width + 2, 10);
+    });
+
+    const totalRequiredWidth = columnWidths.reduce((sum, width) => sum + width, 0) + tableOverhead;
+
+    let finalWidths = columnWidths;
+    if (totalRequiredWidth > terminalWidth) {
+      const scaleFactor = availableWidth / columnWidths.reduce((sum, width) => sum + width, 0);
+      finalWidths = columnWidths.map((width, index) => {
+        const align = colAligns[index];
+        let adjustedWidth = Math.floor(width * scaleFactor);
+        if (align === "right") {
+          adjustedWidth = Math.max(adjustedWidth, 10);
+        } else if (index === 0) {
+          adjustedWidth = Math.max(adjustedWidth, 10);
+        } else {
+          adjustedWidth = Math.max(adjustedWidth, 8);
+        }
+        return adjustedWidth;
+      });
+    }
+
+    const table = new Table({
+      head,
+      style: this.style,
+      colAligns,
+      colWidths: finalWidths,
+      wordWrap: true,
+      wrapOnWordBoundary: true,
+    });
+
+    for (const row of processedRows) {
+      table.push(row as any);
+    }
+
+    return table.toString();
+  }
+}
+
+export function formatNumber(num: number): string {
+  return num.toLocaleString("en-US");
+}
+
+export function formatCurrency(amount: number): string {
+  return `$${amount.toFixed(2)}`;
+}
+
+export function formatModelName(modelName: string): string {
+  // claude-sonnet-4-20250514 -> sonnet-4
+  // claude-opus-4-5-20251101 -> opus-4-5
+  const match = modelName.match(/claude-(\w+)-([\d-]+)-(\d{8})/);
+  if (match) {
+    return `${match[1]}-${match[2]}`;
+  }
+  // Handle OpenCode style: claude-opus-4-5-high -> opus-4-5-high
+  const openCodeMatch = modelName.match(/claude-(\w+)-(.+)/);
+  if (openCodeMatch) {
+    return `${openCodeMatch[1]}-${openCodeMatch[2]}`;
+  }
+  return modelName;
+}
+
+export function formatModelsMultiline(models: string[]): string {
+  const unique = [...new Set(models.map(formatModelName))];
+  return unique.sort().map((m) => `- ${m}`).join("\n");
+}
+
+export function createUsageTable(firstColumnName: string): ResponsiveTable {
+  return new ResponsiveTable({
+    head: [
+      firstColumnName,
+      "Models",
+      "Input",
+      "Output",
+      "Cache Write",
+      "Cache Read",
+      "Total",
+      "Cost",
+    ],
+    style: { head: ["cyan"] },
+    colAligns: ["left", "left", "right", "right", "right", "right", "right", "right"],
+    compactHead: [firstColumnName, "Models", "Input", "Output", "Cost"],
+    compactColAligns: ["left", "left", "right", "right", "right"],
+    compactThreshold: 100,
+  });
+}
+
+export function formatUsageRow(
+  firstCol: string,
+  models: string[],
+  input: number,
+  output: number,
+  cacheWrite: number,
+  cacheRead: number,
+  cost: number
+): TableRow {
+  const total = input + output + cacheWrite + cacheRead;
+  return [
+    firstCol,
+    formatModelsMultiline(models),
+    formatNumber(input),
+    formatNumber(output),
+    formatNumber(cacheWrite),
+    formatNumber(cacheRead),
+    formatNumber(total),
+    formatCurrency(cost),
+  ];
+}
+
+export function formatTotalsRow(
+  input: number,
+  output: number,
+  cacheWrite: number,
+  cacheRead: number,
+  cost: number
+): TableRow {
+  const total = input + output + cacheWrite + cacheRead;
+  return [
+    pc.yellow("Total"),
+    "",
+    pc.yellow(formatNumber(input)),
+    pc.yellow(formatNumber(output)),
+    pc.yellow(formatNumber(cacheWrite)),
+    pc.yellow(formatNumber(cacheRead)),
+    pc.yellow(formatNumber(total)),
+    pc.yellow(formatCurrency(cost)),
+  ];
+}