copilot-usage-tui 1.0.0

package/src/ui/screens/dashboard.ts

@@ -0,0 +1,275 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type CliRenderer,
+} from "@opentui/core"
+import { THEME, type UsageSummary, type Config } from "../../types.ts"
+import { formatCurrency, formatNumber, getMonthName } from "../../utils/format.ts"
+import {
+  predictMonthlyUsage,
+  predictOverageCost,
+  getDaysInMonth,
+  getCurrentDay,
+} from "../../utils/prediction.ts"
+import { ProgressBarComponent } from "../components/progressBar.ts"
+import { ChartComponent } from "../components/chart.ts"
+
+export interface DashboardScreenOptions {
+  usage: UsageSummary
+  config: Config
+  onRefresh: () => void
+  onSettings: () => void
+}
+
+export class DashboardScreen {
+  private renderer: CliRenderer
+  private container: BoxRenderable
+  private progressBar: ProgressBarComponent | null = null
+  private chart: ChartComponent | null = null
+
+  constructor(renderer: CliRenderer, options: DashboardScreenOptions) {
+    this.renderer = renderer
+    const { usage, config } = options
+
+    // Main container
+    this.container = new BoxRenderable(renderer, {
+      id: "dashboard-screen",
+      width: "100%",
+      height: "100%",
+      flexDirection: "column",
+      backgroundColor: THEME.bg,
+      padding: 1,
+    })
+
+    this.createUI(usage, config)
+    renderer.root.add(this.container)
+  }
+
+  private createUI(usage: UsageSummary, config: Config) {
+    const { quota } = config
+    const monthName = getMonthName(usage.month)
+
+    // Header
+    const headerBox = new BoxRenderable(this.renderer, {
+      id: "dashboard-header",
+      width: "100%",
+      flexDirection: "column",
+      alignItems: "center",
+      padding: 1,
+      border: ["top", "left", "right", "bottom"],
+      borderStyle: "rounded",
+      borderColor: THEME.blue,
+      backgroundColor: THEME.bgDark,
+    })
+
+    const title = new TextRenderable(this.renderer, {
+      id: "dashboard-title",
+      content: `GitHub Copilot Usage - ${monthName} ${usage.year}`,
+      fg: THEME.blue,
+    })
+
+    const userText = new TextRenderable(this.renderer, {
+      id: "dashboard-user",
+      content: `User: ${usage.user}`,
+      fg: THEME.fgMuted,
+    })
+
+    headerBox.add(title)
+    headerBox.add(userText)
+    this.container.add(headerBox)
+
+    // Spacer
+    this.container.add(new BoxRenderable(this.renderer, { id: "spacer-1", height: 1 }))
+
+    // Progress section
+    const progressSection = new BoxRenderable(this.renderer, {
+      id: "progress-section",
+      width: "100%",
+      flexDirection: "column",
+      padding: 1,
+      border: ["top", "left", "right", "bottom"],
+      borderStyle: "rounded",
+      borderColor: THEME.border,
+      backgroundColor: THEME.bgDark,
+    })
+
+    this.progressBar = new ProgressBarComponent(this.renderer, {
+      used: usage.totalRequests,
+      quota: quota,
+      width: 50,
+    })
+
+    progressSection.add(this.progressBar.getContainer())
+    this.container.add(progressSection)
+
+    // Spacer
+    this.container.add(new BoxRenderable(this.renderer, { id: "spacer-2", height: 1 }))
+
+    // Chart section
+    const chartSection = new BoxRenderable(this.renderer, {
+      id: "chart-section",
+      width: "100%",
+      flexDirection: "column",
+      padding: 1,
+      border: ["top", "left", "right", "bottom"],
+      borderStyle: "rounded",
+      borderColor: THEME.border,
+      backgroundColor: THEME.bgDark,
+    })
+
+    this.chart = new ChartComponent(this.renderer, {
+      items: usage.items,
+      maxRows: 6,
+      barWidth: 35,
+    })
+
+    chartSection.add(this.chart.getContainer())
+    this.container.add(chartSection)
+
+    // Spacer
+    this.container.add(new BoxRenderable(this.renderer, { id: "spacer-3", height: 1 }))
+
+    // Summary and prediction section (side by side)
+    const bottomSection = new BoxRenderable(this.renderer, {
+      id: "bottom-section",
+      width: "100%",
+      flexDirection: "row",
+      gap: 2,
+    })
+
+    // Costs summary
+    const costsBox = new BoxRenderable(this.renderer, {
+      id: "costs-box",
+      flexGrow: 1,
+      flexDirection: "column",
+      padding: 1,
+      border: ["top", "left", "right", "bottom"],
+      borderStyle: "rounded",
+      borderColor: THEME.border,
+      backgroundColor: THEME.bgDark,
+    })
+
+    const costsTitle = new TextRenderable(this.renderer, {
+      id: "costs-title",
+      content: "Costs",
+      fg: THEME.fgMuted,
+    })
+
+    const costsSeparator = new TextRenderable(this.renderer, {
+      id: "costs-separator",
+      content: "─".repeat(25),
+      fg: THEME.border,
+    })
+
+    const grossLine = new TextRenderable(this.renderer, {
+      id: "costs-gross",
+      content: `Gross Amount:   ${formatCurrency(usage.grossAmount)}`,
+      fg: THEME.fg,
+    })
+
+    const discountLine = new TextRenderable(this.renderer, {
+      id: "costs-discount",
+      content: `Discount:      -${formatCurrency(usage.discountAmount)}`,
+      fg: THEME.green,
+    })
+
+    const netLine = new TextRenderable(this.renderer, {
+      id: "costs-net",
+      content: `Net Amount:     ${formatCurrency(usage.netAmount)}`,
+      fg: usage.netAmount > 0 ? THEME.yellow : THEME.green,
+    })
+
+    costsBox.add(costsTitle)
+    costsBox.add(costsSeparator)
+    costsBox.add(grossLine)
+    costsBox.add(discountLine)
+    costsBox.add(netLine)
+
+    // Prediction box
+    const predictionBox = new BoxRenderable(this.renderer, {
+      id: "prediction-box",
+      flexGrow: 1,
+      flexDirection: "column",
+      padding: 1,
+      border: ["top", "left", "right", "bottom"],
+      borderStyle: "rounded",
+      borderColor: THEME.border,
+      backgroundColor: THEME.bgDark,
+    })
+
+    const predictionTitle = new TextRenderable(this.renderer, {
+      id: "prediction-title",
+      content: "Prediction",
+      fg: THEME.fgMuted,
+    })
+
+    const predictionSeparator = new TextRenderable(this.renderer, {
+      id: "prediction-separator",
+      content: "─".repeat(25),
+      fg: THEME.border,
+    })
+
+    // Calculate prediction
+    const currentDay = getCurrentDay()
+    const daysInMonth = getDaysInMonth(usage.year, usage.month)
+    const predictedUsage = predictMonthlyUsage(usage.totalRequests, currentDay, daysInMonth)
+    const predictedOverage = predictOverageCost(predictedUsage, quota)
+
+    const predictionLine = new TextRenderable(this.renderer, {
+      id: "prediction-usage",
+      content: `End of month:   ~${formatNumber(predictedUsage)} reqs`,
+      fg: predictedUsage > quota ? THEME.yellow : THEME.fg,
+    })
+
+    const overageLine = new TextRenderable(this.renderer, {
+      id: "prediction-overage",
+      content: `Overage cost:    ${formatCurrency(predictedOverage)}`,
+      fg: predictedOverage > 0 ? THEME.red : THEME.green,
+    })
+
+    const daysLine = new TextRenderable(this.renderer, {
+      id: "prediction-days",
+      content: `Day ${currentDay} of ${daysInMonth}`,
+      fg: THEME.fgMuted,
+    })
+
+    predictionBox.add(predictionTitle)
+    predictionBox.add(predictionSeparator)
+    predictionBox.add(predictionLine)
+    predictionBox.add(overageLine)
+    predictionBox.add(daysLine)
+
+    bottomSection.add(costsBox)
+    bottomSection.add(predictionBox)
+    this.container.add(bottomSection)
+
+    // Spacer
+    this.container.add(new BoxRenderable(this.renderer, { id: "spacer-4", height: 1 }))
+
+    // Footer with keybindings
+    const footer = new BoxRenderable(this.renderer, {
+      id: "dashboard-footer",
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "center",
+      padding: 1,
+      border: ["top", "left", "right", "bottom"],
+      borderStyle: "rounded",
+      borderColor: THEME.border,
+      backgroundColor: THEME.bgDark,
+    })
+
+    const keybindings = new TextRenderable(this.renderer, {
+      id: "footer-keybindings",
+      content: "[r] Refresh   [s] Settings   [q] Quit",
+      fg: THEME.fgMuted,
+    })
+
+    footer.add(keybindings)
+    this.container.add(footer)
+  }
+
+  public destroy() {
+    this.container.destroyRecursively()
+  }
+}

package/src/ui/screens/setup.ts

@@ -0,0 +1,188 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  SelectRenderable,
+  InputRenderable,
+  type CliRenderer,
+  type KeyEvent,
+  SelectRenderableEvents,
+  InputRenderableEvents,
+} from "@opentui/core"
+import { THEME, PLAN_OPTIONS, type Config } from "../../types.ts"
+import { saveConfig } from "../../config/config.ts"
+import { formatNumber } from "../../utils/format.ts"
+
+export interface SetupScreenOptions {
+  onComplete: (config: Config) => void
+}
+
+export class SetupScreen {
+  private renderer: CliRenderer
+  private container: BoxRenderable
+  private select: SelectRenderable | null = null
+  private customInput: InputRenderable | null = null
+  private onComplete: (config: Config) => void
+  private showingCustomInput = false
+
+  constructor(renderer: CliRenderer, options: SetupScreenOptions) {
+    this.renderer = renderer
+    this.onComplete = options.onComplete
+
+    // Main container
+    this.container = new BoxRenderable(renderer, {
+      id: "setup-screen",
+      width: "100%",
+      height: "100%",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: THEME.bg,
+    })
+
+    this.createUI()
+    renderer.root.add(this.container)
+  }
+
+  private createUI() {
+    // Title box
+    const titleBox = new BoxRenderable(this.renderer, {
+      id: "setup-title-box",
+      width: 60,
+      flexDirection: "column",
+      alignItems: "center",
+      padding: 1,
+      border: ["top", "left", "right"],
+      borderStyle: "rounded",
+      borderColor: THEME.blue,
+      backgroundColor: THEME.bgDark,
+    })
+
+    const title = new TextRenderable(this.renderer, {
+      id: "setup-title",
+      content: "Copilot Usage Setup",
+      fg: THEME.blue,
+    })
+
+    titleBox.add(title)
+
+    // Content box
+    const contentBox = new BoxRenderable(this.renderer, {
+      id: "setup-content-box",
+      width: 60,
+      flexDirection: "column",
+      padding: 2,
+      border: ["bottom", "left", "right"],
+      borderStyle: "rounded",
+      borderColor: THEME.border,
+      backgroundColor: THEME.bgDark,
+    })
+
+    const description = new TextRenderable(this.renderer, {
+      id: "setup-description",
+      content: "Select your Copilot plan to set your monthly\npremium request quota:",
+      fg: THEME.fg,
+    })
+
+    const spacer = new BoxRenderable(this.renderer, {
+      id: "setup-spacer",
+      height: 1,
+    })
+
+    // Plan options for select
+    const selectOptions = PLAN_OPTIONS.map((plan) => ({
+      name: plan.name,
+      label: `${plan.label.padEnd(12)} ${plan.description}`,
+    }))
+
+    this.select = new SelectRenderable(this.renderer, {
+      id: "setup-select",
+      options: selectOptions,
+      width: 50,
+      height: PLAN_OPTIONS.length + 2,
+      selectedColor: THEME.blue,
+      unselectedColor: THEME.fgMuted,
+    })
+
+    // Custom input (hidden initially)
+    this.customInput = new InputRenderable(this.renderer, {
+      id: "setup-custom-input",
+      placeholder: "Enter custom quota (e.g., 500)",
+      width: 40,
+      fg: THEME.fg,
+      visible: false,
+    })
+
+    const hint = new TextRenderable(this.renderer, {
+      id: "setup-hint",
+      content: "Use ↑/↓ to navigate, Enter to select",
+      fg: THEME.fgMuted,
+    })
+
+    contentBox.add(description)
+    contentBox.add(spacer)
+    contentBox.add(this.select)
+    contentBox.add(this.customInput)
+    contentBox.add(new BoxRenderable(this.renderer, { id: "hint-spacer", height: 1 }))
+    contentBox.add(hint)
+
+    this.container.add(titleBox)
+    this.container.add(contentBox)
+
+    // Handle selection
+    this.select.on(SelectRenderableEvents.ITEM_SELECTED, (_index, option) => {
+      const plan = PLAN_OPTIONS.find((p) => p.name === option.name)
+      if (!plan) return
+
+      if (plan.name === "custom") {
+        this.showCustomInput()
+      } else {
+        this.savePlan(plan.name, plan.quota)
+      }
+    })
+
+    // Handle custom input
+    this.customInput.on(InputRenderableEvents.CHANGE, (value) => {
+      const quota = parseInt(value, 10)
+      if (!isNaN(quota) && quota > 0) {
+        this.savePlan("custom", quota)
+      }
+    })
+
+    this.select.focus()
+  }
+
+  private showCustomInput() {
+    if (this.select && this.customInput) {
+      this.showingCustomInput = true
+      this.select.visible = false
+      this.customInput.visible = true
+      this.customInput.focus()
+    }
+  }
+
+  private async savePlan(planName: string, quota: number) {
+    const config: Config = { plan: planName, quota }
+    await saveConfig(config)
+    this.onComplete(config)
+  }
+
+  public handleKey(event: KeyEvent) {
+    if (this.showingCustomInput && event.name === "escape") {
+      // Go back to plan selection
+      this.showingCustomInput = false
+      if (this.customInput) {
+        this.customInput.visible = false
+        this.customInput.content = ""
+      }
+      if (this.select) {
+        this.select.visible = true
+        this.select.focus()
+      }
+      event.preventDefault()
+    }
+  }
+
+  public destroy() {
+    this.container.destroyRecursively()
+  }
+}

package/src/utils/format.ts

@@ -0,0 +1,61 @@
+/**
+ * Format a number as currency (USD)
+ */
+export function formatCurrency(amount: number): string {
+  return `$${amount.toFixed(2)}`
+}
+
+/**
+ * Format a number with commas as thousand separators
+ */
+export function formatNumber(value: number): string {
+  return Math.round(value).toLocaleString("en-US")
+}
+
+/**
+ * Format a percentage value
+ */
+export function formatPercent(value: number): string {
+  return `${value.toFixed(1)}%`
+}
+
+/**
+ * Calculate percentage with bounds checking
+ */
+export function calculatePercent(used: number, total: number): number {
+  if (total <= 0) return 0
+  return Math.min(100, (used / total) * 100)
+}
+
+/**
+ * Get month name from month number (1-12)
+ */
+export function getMonthName(month: number): string {
+  const months = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+  ]
+  return months[month - 1] || "Unknown"
+}
+
+/**
+ * Pad a string to a fixed width (right-aligned for numbers)
+ */
+export function padLeft(str: string, width: number): string {
+  return str.padStart(width)
+}
+
+/**
+ * Pad a string to a fixed width (left-aligned for text)
+ */
+export function padRight(str: string, width: number): string {
+  return str.padEnd(width)
+}
+
+/**
+ * Truncate a string to a maximum length with ellipsis
+ */
+export function truncate(str: string, maxLength: number): string {
+  if (str.length <= maxLength) return str
+  return str.slice(0, maxLength - 1) + "…"
+}

package/src/utils/prediction.ts

@@ -0,0 +1,62 @@
+/**
+ * Get the number of days in a given month
+ */
+export function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month, 0).getDate()
+}
+
+/**
+ * Get the current day of the month (1-31)
+ */
+export function getCurrentDay(): number {
+  return new Date().getDate()
+}
+
+/**
+ * Get current year and month
+ */
+export function getCurrentYearMonth(): { year: number; month: number } {
+  const now = new Date()
+  return {
+    year: now.getFullYear(),
+    month: now.getMonth() + 1, // JavaScript months are 0-indexed
+  }
+}
+
+/**
+ * Predict end-of-month usage based on current usage pattern
+ * Uses linear extrapolation from current usage
+ */
+export function predictMonthlyUsage(
+  currentUsage: number,
+  currentDay: number,
+  daysInMonth: number
+): number {
+  if (currentDay <= 0) return currentUsage
+  const dailyAverage = currentUsage / currentDay
+  return Math.round(dailyAverage * daysInMonth)
+}
+
+/**
+ * Calculate predicted overage cost
+ * @param predictedUsage - Predicted total usage for the month
+ * @param quota - Monthly quota limit
+ * @param pricePerRequest - Price per premium request (default $0.04)
+ */
+export function predictOverageCost(
+  predictedUsage: number,
+  quota: number,
+  pricePerRequest: number = 0.04
+): number {
+  const overage = Math.max(0, predictedUsage - quota)
+  return overage * pricePerRequest
+}
+
+/**
+ * Get usage status level based on percentage
+ */
+export function getUsageLevel(percent: number): "normal" | "warning" | "critical" {
+  if (percent >= 90) return "critical"
+  if (percent >= 70) return "warning"
+  return "normal"
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}