copilot-usage-tui 1.0.0

package/src/ui/app.ts

@@ -0,0 +1,215 @@
+import {
+  createCliRenderer,
+  type CliRenderer,
+  type KeyEvent,
+} from "@opentui/core"
+import type { ViewState, Config, UsageSummary, AuthStatus } from "../types.ts"
+import { hasConfig, loadConfig } from "../config/config.ts"
+import { checkAuth } from "../api/auth.ts"
+import { getUsageSummary, getUsername } from "../api/github.ts"
+import { SetupScreen } from "./screens/setup.ts"
+import { AuthScreen } from "./screens/auth.ts"
+import { DashboardScreen } from "./screens/dashboard.ts"
+
+export class App {
+  private renderer: CliRenderer
+  private currentView: ViewState = "loading"
+  
+  // Screens
+  private setupScreen: SetupScreen | null = null
+  private authScreen: AuthScreen | null = null
+  private dashboardScreen: DashboardScreen | null = null
+  
+  // State
+  private config: Config | null = null
+  private authStatus: AuthStatus | null = null
+  private usage: UsageSummary | null = null
+  private username: string | null = null
+
+  private constructor(renderer: CliRenderer) {
+    this.renderer = renderer
+  }
+
+  static async create(): Promise<App> {
+    const renderer = await createCliRenderer({
+      exitOnCtrlC: true,
+    })
+
+    const app = new App(renderer)
+    await app.initialize()
+    return app
+  }
+
+  private async initialize() {
+    // Setup keyboard handler
+    this.renderer.keyInput.on("keypress", (event: KeyEvent) => {
+      this.handleKeyPress(event)
+    })
+
+    // Check if config exists
+    if (await hasConfig()) {
+      this.config = await loadConfig()
+    }
+
+    if (!this.config) {
+      // First run - show setup
+      this.showSetup()
+    } else {
+      // Check auth
+      await this.checkAuthAndProceed()
+    }
+  }
+
+  private async checkAuthAndProceed() {
+    this.authStatus = await checkAuth()
+
+    if (!this.authStatus.hasUserScope) {
+      this.showAuth()
+    } else {
+      await this.loadAndShowDashboard()
+    }
+  }
+
+  private async loadAndShowDashboard() {
+    // Get username if not cached
+    if (!this.username) {
+      this.username = await getUsername()
+    }
+
+    if (!this.username) {
+      // Fallback to auth status username
+      this.username = this.authStatus?.username || "unknown"
+    }
+
+    // Fetch usage data
+    this.usage = await getUsageSummary(this.username)
+
+    if (!this.usage) {
+      // Handle error - for now just show auth screen
+      this.authStatus = {
+        ghInstalled: true,
+        authenticated: true,
+        hasUserScope: false,
+        error: "Failed to fetch usage data. Check your authentication.",
+      }
+      this.showAuth()
+      return
+    }
+
+    this.showDashboard()
+  }
+
+  private showSetup() {
+    this.clearCurrentScreen()
+    this.currentView = "setup"
+
+    this.setupScreen = new SetupScreen(this.renderer, {
+      onComplete: async (config) => {
+        this.config = config
+        await this.checkAuthAndProceed()
+      },
+    })
+  }
+
+  private showAuth() {
+    this.clearCurrentScreen()
+    this.currentView = "auth"
+
+    if (!this.authStatus) {
+      this.authStatus = {
+        ghInstalled: false,
+        authenticated: false,
+        hasUserScope: false,
+        error: "Unknown authentication state",
+      }
+    }
+
+    this.authScreen = new AuthScreen(this.renderer, {
+      authStatus: this.authStatus,
+      onRetry: async () => {
+        await this.checkAuthAndProceed()
+      },
+    })
+  }
+
+  private showDashboard() {
+    this.clearCurrentScreen()
+    this.currentView = "dashboard"
+
+    if (!this.usage || !this.config) {
+      return
+    }
+
+    this.dashboardScreen = new DashboardScreen(this.renderer, {
+      usage: this.usage,
+      config: this.config,
+      onRefresh: async () => {
+        await this.refresh()
+      },
+      onSettings: () => {
+        this.showSetup()
+      },
+    })
+  }
+
+  private clearCurrentScreen() {
+    if (this.setupScreen) {
+      this.setupScreen.destroy()
+      this.setupScreen = null
+    }
+    if (this.authScreen) {
+      this.authScreen.destroy()
+      this.authScreen = null
+    }
+    if (this.dashboardScreen) {
+      this.dashboardScreen.destroy()
+      this.dashboardScreen = null
+    }
+  }
+
+  private async refresh() {
+    if (this.username && this.config) {
+      this.usage = await getUsageSummary(this.username)
+      if (this.usage) {
+        this.clearCurrentScreen()
+        this.showDashboard()
+      }
+    }
+  }
+
+  private handleKeyPress(event: KeyEvent) {
+    // Handle setup screen key events
+    if (this.currentView === "setup" && this.setupScreen) {
+      this.setupScreen.handleKey(event)
+      return
+    }
+
+    // Global keybindings
+    switch (event.name) {
+      case "q":
+        if (!event.ctrl) {
+          this.renderer.destroy()
+        }
+        break
+
+      case "r":
+        if (this.currentView === "auth") {
+          this.checkAuthAndProceed()
+        } else if (this.currentView === "dashboard") {
+          this.refresh()
+        }
+        break
+
+      case "s":
+        if (this.currentView === "dashboard") {
+          this.showSetup()
+        }
+        break
+    }
+  }
+
+  public destroy() {
+    this.clearCurrentScreen()
+    this.renderer.destroy()
+  }
+}

package/src/ui/components/chart.ts

@@ -0,0 +1,141 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+} from "@opentui/core"
+import { THEME, type UsageItem } from "../../types.ts"
+import { formatNumber, padRight, truncate } from "../../utils/format.ts"
+
+export interface ChartOptions {
+  items: UsageItem[]
+  maxRows?: number
+  barWidth?: number
+}
+
+// Bar characters for different fill levels
+const BAR_CHARS = ["▏", "▎", "▍", "▌", "▋", "▊", "▉", "█"]
+
+export class ChartComponent {
+  private renderer: CliRenderer
+  private container: BoxRenderable
+
+  private readonly COL_MODEL = 20
+  private readonly COL_COUNT = 6
+
+  constructor(renderer: CliRenderer, options: ChartOptions) {
+    this.renderer = renderer
+    const { items, maxRows = 8, barWidth = 30 } = options
+
+    this.container = new BoxRenderable(renderer, {
+      id: "chart-container",
+      flexDirection: "column",
+      width: "100%",
+    })
+
+    this.createChart(items, maxRows, barWidth)
+  }
+
+  private createChart(items: UsageItem[], maxRows: number, barWidth: number) {
+    // Title
+    const title = new TextRenderable(this.renderer, {
+      id: "chart-title",
+      content: "Usage by Model",
+      fg: THEME.fgMuted,
+    })
+    this.container.add(title)
+
+    // Separator
+    const separator = new TextRenderable(this.renderer, {
+      id: "chart-separator",
+      content: "─".repeat(this.COL_MODEL + barWidth + this.COL_COUNT + 2),
+      fg: THEME.border,
+    })
+    this.container.add(separator)
+
+    // Find max value for scaling
+    const maxValue = items.length > 0 ? Math.max(...items.map(i => i.grossQuantity)) : 1
+
+    // Display items
+    const displayItems = items.slice(0, maxRows)
+    
+    // Color palette for different models
+    const colors = [
+      THEME.blue,
+      THEME.cyan,
+      THEME.green,
+      THEME.magenta,
+      THEME.yellow,
+      THEME.orange,
+      THEME.red,
+      THEME.fgDark,
+    ]
+
+    for (let i = 0; i < displayItems.length; i++) {
+      const item = displayItems[i]
+      const row = this.createBarRow(item, i, maxValue, barWidth, colors[i % colors.length])
+      this.container.add(row)
+    }
+  }
+
+  private createBarRow(
+    item: UsageItem,
+    index: number,
+    maxValue: number,
+    barWidth: number,
+    color: string
+  ): BoxRenderable {
+    const row = new BoxRenderable(this.renderer, {
+      id: `chart-row-${index}`,
+      flexDirection: "row",
+    })
+
+    // Model name
+    const modelName = truncate(item.model, this.COL_MODEL - 2)
+    const modelText = new TextRenderable(this.renderer, {
+      id: `chart-${index}-model`,
+      content: padRight(modelName, this.COL_MODEL),
+      fg: THEME.fg,
+    })
+
+    // Calculate bar length
+    const ratio = maxValue > 0 ? item.grossQuantity / maxValue : 0
+    const fullBlocks = Math.floor(ratio * barWidth)
+    const remainder = (ratio * barWidth) - fullBlocks
+    const partialIndex = Math.floor(remainder * BAR_CHARS.length)
+
+    let barStr = "█".repeat(fullBlocks)
+    if (partialIndex > 0 && fullBlocks < barWidth) {
+      barStr += BAR_CHARS[partialIndex - 1]
+    }
+
+    // Pad bar to fixed width
+    barStr = barStr.padEnd(barWidth, " ")
+
+    const barText = new TextRenderable(this.renderer, {
+      id: `chart-${index}-bar`,
+      content: barStr,
+      fg: color,
+    })
+
+    // Request count
+    const countText = new TextRenderable(this.renderer, {
+      id: `chart-${index}-count`,
+      content: " " + formatNumber(item.grossQuantity).padStart(this.COL_COUNT),
+      fg: THEME.fgMuted,
+    })
+
+    row.add(modelText)
+    row.add(barText)
+    row.add(countText)
+
+    return row
+  }
+
+  public getContainer(): BoxRenderable {
+    return this.container
+  }
+
+  public destroy() {
+    this.container.destroyRecursively()
+  }
+}

package/src/ui/components/progressBar.ts

@@ -0,0 +1,114 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+} from "@opentui/core"
+import { THEME } from "../../types.ts"
+import { formatNumber, formatPercent } from "../../utils/format.ts"
+import { getUsageLevel } from "../../utils/prediction.ts"
+
+export interface ProgressBarOptions {
+  used: number
+  quota: number
+  width?: number
+}
+
+export class ProgressBarComponent {
+  private renderer: CliRenderer
+  private container: BoxRenderable
+  private labelText: TextRenderable
+  private barContainer: BoxRenderable
+  private barFilled: TextRenderable
+  private barEmpty: TextRenderable
+
+  constructor(renderer: CliRenderer, options: ProgressBarOptions) {
+    this.renderer = renderer
+
+    const { used, quota, width = 50 } = options
+    const percent = quota > 0 ? (used / quota) * 100 : 0
+    const level = getUsageLevel(percent)
+
+    // Get color based on usage level
+    const barColor = this.getBarColor(level)
+
+    // Container
+    this.container = new BoxRenderable(renderer, {
+      id: "progress-container",
+      flexDirection: "column",
+      width: "100%",
+      gap: 0,
+    })
+
+    // Label: "Premium Requests: 710 / 1,500 (47.3%)"
+    this.labelText = new TextRenderable(renderer, {
+      id: "progress-label",
+      content: `Premium Requests: ${formatNumber(used)} / ${formatNumber(quota)} (${formatPercent(percent)})`,
+      fg: THEME.fg,
+    })
+
+    // Bar container
+    this.barContainer = new BoxRenderable(renderer, {
+      id: "progress-bar-container",
+      flexDirection: "row",
+      width: width,
+    })
+
+    // Calculate bar segments
+    const filledWidth = Math.round((percent / 100) * width)
+    const emptyWidth = width - filledWidth
+
+    // Filled portion
+    this.barFilled = new TextRenderable(renderer, {
+      id: "progress-bar-filled",
+      content: "█".repeat(Math.max(0, filledWidth)),
+      fg: barColor,
+    })
+
+    // Empty portion
+    this.barEmpty = new TextRenderable(renderer, {
+      id: "progress-bar-empty",
+      content: "░".repeat(Math.max(0, emptyWidth)),
+      fg: THEME.border,
+    })
+
+    this.barContainer.add(this.barFilled)
+    this.barContainer.add(this.barEmpty)
+
+    this.container.add(this.labelText)
+    this.container.add(this.barContainer)
+  }
+
+  private getBarColor(level: "normal" | "warning" | "critical"): string {
+    switch (level) {
+      case "critical":
+        return THEME.red
+      case "warning":
+        return THEME.yellow
+      default:
+        return THEME.blue
+    }
+  }
+
+  public update(used: number, quota: number, width: number = 50) {
+    const percent = quota > 0 ? (used / quota) * 100 : 0
+    const level = getUsageLevel(percent)
+    const barColor = this.getBarColor(level)
+
+    this.labelText.content = `Premium Requests: ${formatNumber(used)} / ${formatNumber(quota)} (${formatPercent(percent)})`
+
+    const filledWidth = Math.round((percent / 100) * width)
+    const emptyWidth = width - filledWidth
+
+    this.barFilled.content = "█".repeat(Math.max(0, filledWidth))
+    this.barFilled.fg = barColor
+    this.barEmpty.content = "░".repeat(Math.max(0, emptyWidth))
+  }
+
+  public getContainer(): BoxRenderable {
+    return this.container
+  }
+
+  public destroy() {
+    this.container.destroyRecursively()
+  }
+}

package/src/ui/components/table.ts

@@ -0,0 +1,136 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+} from "@opentui/core"
+import { THEME, type UsageItem } from "../../types.ts"
+import { formatCurrency, formatNumber, padLeft, padRight, truncate } from "../../utils/format.ts"
+
+export interface TableOptions {
+  items: UsageItem[]
+  maxRows?: number
+}
+
+export class TableComponent {
+  private renderer: CliRenderer
+  private container: BoxRenderable
+
+  // Column widths
+  private readonly COL_MODEL = 22
+  private readonly COL_REQUESTS = 10
+  private readonly COL_COST = 12
+
+  constructor(renderer: CliRenderer, options: TableOptions) {
+    this.renderer = renderer
+    const { items, maxRows = 10 } = options
+
+    this.container = new BoxRenderable(renderer, {
+      id: "table-container",
+      flexDirection: "column",
+      width: "100%",
+    })
+
+    this.createTable(items, maxRows)
+  }
+
+  private createTable(items: UsageItem[], maxRows: number) {
+    // Header
+    const headerRow = new BoxRenderable(this.renderer, {
+      id: "table-header",
+      flexDirection: "row",
+    })
+
+    const headerModel = new TextRenderable(this.renderer, {
+      id: "header-model",
+      content: padRight("Model", this.COL_MODEL),
+      fg: THEME.fgMuted,
+    })
+
+    const headerRequests = new TextRenderable(this.renderer, {
+      id: "header-requests",
+      content: padLeft("Requests", this.COL_REQUESTS),
+      fg: THEME.fgMuted,
+    })
+
+    const headerCost = new TextRenderable(this.renderer, {
+      id: "header-cost",
+      content: padLeft("Cost", this.COL_COST),
+      fg: THEME.fgMuted,
+    })
+
+    headerRow.add(headerModel)
+    headerRow.add(headerRequests)
+    headerRow.add(headerCost)
+    this.container.add(headerRow)
+
+    // Separator
+    const separator = new TextRenderable(this.renderer, {
+      id: "table-separator",
+      content: "─".repeat(this.COL_MODEL + this.COL_REQUESTS + this.COL_COST),
+      fg: THEME.border,
+    })
+    this.container.add(separator)
+
+    // Data rows
+    const displayItems = items.slice(0, maxRows)
+    
+    for (let i = 0; i < displayItems.length; i++) {
+      const item = displayItems[i]
+      const row = this.createRow(item, i)
+      this.container.add(row)
+    }
+
+    // Show "and X more..." if truncated
+    if (items.length > maxRows) {
+      const moreText = new TextRenderable(this.renderer, {
+        id: "table-more",
+        content: `  ... and ${items.length - maxRows} more`,
+        fg: THEME.fgMuted,
+      })
+      this.container.add(moreText)
+    }
+  }
+
+  private createRow(item: UsageItem, index: number): BoxRenderable {
+    const row = new BoxRenderable(this.renderer, {
+      id: `table-row-${index}`,
+      flexDirection: "row",
+    })
+
+    // Model name (truncate if too long)
+    const modelName = truncate(item.model, this.COL_MODEL - 2)
+    const modelText = new TextRenderable(this.renderer, {
+      id: `row-${index}-model`,
+      content: padRight(modelName, this.COL_MODEL),
+      fg: THEME.fg,
+    })
+
+    // Request count
+    const requestsText = new TextRenderable(this.renderer, {
+      id: `row-${index}-requests`,
+      content: padLeft(formatNumber(item.grossQuantity), this.COL_REQUESTS),
+      fg: THEME.cyan,
+    })
+
+    // Cost
+    const costText = new TextRenderable(this.renderer, {
+      id: `row-${index}-cost`,
+      content: padLeft(formatCurrency(item.grossAmount), this.COL_COST),
+      fg: THEME.green,
+    })
+
+    row.add(modelText)
+    row.add(requestsText)
+    row.add(costText)
+
+    return row
+  }
+
+  public getContainer(): BoxRenderable {
+    return this.container
+  }
+
+  public destroy() {
+    this.container.destroyRecursively()
+  }
+}

package/src/ui/screens/auth.ts

@@ -0,0 +1,107 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+} from "@opentui/core"
+import { THEME, type AuthStatus } from "../../types.ts"
+import { getAuthInstructions } from "../../api/auth.ts"
+
+export interface AuthScreenOptions {
+  authStatus: AuthStatus
+  onRetry: () => void
+}
+
+export class AuthScreen {
+  private renderer: CliRenderer
+  private container: BoxRenderable
+
+  constructor(renderer: CliRenderer, options: AuthScreenOptions) {
+    this.renderer = renderer
+
+    // Main container
+    this.container = new BoxRenderable(renderer, {
+      id: "auth-screen",
+      width: "100%",
+      height: "100%",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: THEME.bg,
+    })
+
+    this.createUI(options.authStatus)
+    renderer.root.add(this.container)
+  }
+
+  private createUI(authStatus: AuthStatus) {
+    // Title box
+    const titleBox = new BoxRenderable(this.renderer, {
+      id: "auth-title-box",
+      width: 60,
+      flexDirection: "column",
+      alignItems: "center",
+      padding: 1,
+      border: ["top", "left", "right"],
+      borderStyle: "rounded",
+      borderColor: THEME.yellow,
+      backgroundColor: THEME.bgDark,
+    })
+
+    const title = new TextRenderable(this.renderer, {
+      id: "auth-title",
+      content: "Authentication Required",
+      fg: THEME.yellow,
+    })
+
+    titleBox.add(title)
+
+    // Content box
+    const contentBox = new BoxRenderable(this.renderer, {
+      id: "auth-content-box",
+      width: 60,
+      flexDirection: "column",
+      padding: 2,
+      border: ["bottom", "left", "right"],
+      borderStyle: "rounded",
+      borderColor: THEME.border,
+      backgroundColor: THEME.bgDark,
+    })
+
+    // Get instructions based on auth status
+    const instructions = getAuthInstructions(authStatus)
+
+    for (let i = 0; i < instructions.length; i++) {
+      const line = instructions[i]
+      const isCommand = line.startsWith("  ")
+      
+      const text = new TextRenderable(this.renderer, {
+        id: `auth-instruction-${i}`,
+        content: line || " ",
+        fg: isCommand ? THEME.cyan : THEME.fg,
+      })
+      contentBox.add(text)
+    }
+
+    // Spacer
+    const spacer = new BoxRenderable(this.renderer, {
+      id: "auth-spacer",
+      height: 2,
+    })
+    contentBox.add(spacer)
+
+    // Keybindings hint
+    const hint = new TextRenderable(this.renderer, {
+      id: "auth-hint",
+      content: "[r] Retry   [q] Quit",
+      fg: THEME.fgMuted,
+    })
+    contentBox.add(hint)
+
+    this.container.add(titleBox)
+    this.container.add(contentBox)
+  }
+
+  public destroy() {
+    this.container.destroyRecursively()
+  }
+}