mirror of
https://github.com/Routstr/routstrd.git
synced 2026-10-05 12:28:23 +00:00
refacrtored tui
This commit is contained in:
redshift
@@ -0,0 +1,113 @@
|
||||
# TUI refactor plan
|
||||
|
||||
## Goals
|
||||
- Move the usage TUI implementation out of `src/cli/usage-tui.ts` into a dedicated `src/tui/` folder.
|
||||
- Reduce the size and responsibility of the current monolithic file.
|
||||
- Keep the existing CLI entrypoint stable so current usage does not break.
|
||||
- Preserve behavior while making future TUI work easier.
|
||||
|
||||
## Current state
|
||||
`src/cli/usage-tui.ts` currently mixes several concerns in one file:
|
||||
- TUI-specific types and constants
|
||||
- ANSI/terminal helpers
|
||||
- scroll/search/vim navigation state
|
||||
- data fetching from the daemon
|
||||
- usage aggregation/stat helpers
|
||||
- rendering for all tabs
|
||||
- app lifecycle and keyboard event handling
|
||||
|
||||
This makes the file hard to extend safely.
|
||||
|
||||
## Refactor strategy
|
||||
Do this incrementally and keep a thin compatibility wrapper in `src/cli/usage-tui.ts`.
|
||||
|
||||
### Target structure
|
||||
- `src/tui/usage/index.ts`
|
||||
- public entrypoint: `runUsageTui()`
|
||||
- `src/tui/usage/types.ts`
|
||||
- `UsageStats`, tab ids, tab metadata, derived stat types
|
||||
- `src/tui/usage/constants.ts`
|
||||
- tabs, colors, model/client color maps
|
||||
- `src/tui/usage/terminal.ts`
|
||||
- ANSI helpers, width/height helpers, `stripAnsi`
|
||||
- `src/tui/usage/state.ts`
|
||||
- vim/search/scroll state and state mutation helpers
|
||||
- `src/tui/usage/data.ts`
|
||||
- `fetchUsage()` and usage aggregation helpers
|
||||
- `src/tui/usage/render.ts`
|
||||
- shared render helpers and tab renderers
|
||||
- `src/tui/usage/app.ts`
|
||||
- main loop, render orchestration, input handling, cleanup
|
||||
- `src/cli/usage-tui.ts`
|
||||
- compatibility wrapper that re-exports or calls `runUsageTui()` from `src/tui/usage`
|
||||
|
||||
## Design choices
|
||||
### 1. Keep CLI path compatibility
|
||||
Do not delete the CLI file outright. Turn it into a tiny wrapper:
|
||||
- minimal import from `../tui/usage/index.ts`
|
||||
- export `runUsageTui()`
|
||||
|
||||
This avoids breaking any existing imports or scripts.
|
||||
|
||||
### 2. Separate pure logic from side effects
|
||||
Keep these pure where possible:
|
||||
- aggregation helpers
|
||||
- formatting helpers
|
||||
- render helpers that return strings
|
||||
- scroll clamping logic
|
||||
|
||||
Keep side effects isolated in the app layer:
|
||||
- reading terminal size
|
||||
- writing to stdout
|
||||
- raw mode setup
|
||||
- signal handling
|
||||
- interval scheduling
|
||||
|
||||
### 3. Avoid over-engineering
|
||||
This should be a pragmatic refactor, not a framework:
|
||||
- no unnecessary classes
|
||||
- keep function-based design
|
||||
- only extract modules around clear responsibility boundaries
|
||||
|
||||
### 4. Preserve behavior first
|
||||
No UX changes unless needed to support the extraction.
|
||||
That means:
|
||||
- same tabs
|
||||
- same keybindings
|
||||
- same output format
|
||||
- same fetch cadence
|
||||
- same search/scroll behavior
|
||||
|
||||
## Implementation steps
|
||||
1. Create `src/tui/usage/`.
|
||||
2. Extract types/constants first.
|
||||
3. Extract terminal helpers.
|
||||
4. Extract data fetching + aggregation helpers.
|
||||
5. Extract state/search/scroll logic.
|
||||
6. Extract rendering helpers + tab renderers.
|
||||
7. Build `app.ts` using the extracted modules.
|
||||
8. Replace `src/cli/usage-tui.ts` with a thin wrapper.
|
||||
9. Run a TypeScript/bun check and fix imports.
|
||||
10. Smoke-test keyboard handling and rendering behavior.
|
||||
|
||||
## Risks
|
||||
- circular imports between render/state/constants
|
||||
- broken relative import paths during extraction
|
||||
- subtle behavior regressions in scroll/search state
|
||||
- terminal escape handling differences if helpers are split carelessly
|
||||
|
||||
## Validation checklist
|
||||
- `src/cli/usage-tui.ts` still exposes `runUsageTui()`
|
||||
- TUI starts from the same CLI path
|
||||
- scroll still works for long content
|
||||
- vim keys still work
|
||||
- arrow keys still work
|
||||
- tab switching still resets scroll
|
||||
- search mode still works
|
||||
- cleanup still restores cursor and alternate screen
|
||||
|
||||
## Non-goals
|
||||
- redesigning the UI
|
||||
- changing tab contents
|
||||
- introducing tests unless needed for safety
|
||||
- adding new features unrelated to the refactor
|
||||
+1
-1236
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,243 @@
|
||||
import { TABS } from "./constants.ts";
|
||||
import { fetchUsage } from "./data.ts";
|
||||
import {
|
||||
applyScrollToContent,
|
||||
exitSearchMode,
|
||||
nextSearchResult,
|
||||
pageDown,
|
||||
pageUp,
|
||||
performSearch,
|
||||
prevSearchResult,
|
||||
scrollDown,
|
||||
scrollToBottom,
|
||||
scrollToTop,
|
||||
scrollUp,
|
||||
startSearch,
|
||||
vimState,
|
||||
} from "./state.ts";
|
||||
import {
|
||||
enterAlternateScreen,
|
||||
eraseDown,
|
||||
getHeight,
|
||||
getWidth,
|
||||
hideCursor,
|
||||
leaveAlternateScreen,
|
||||
moveCursor,
|
||||
showCursor,
|
||||
} from "./terminal.ts";
|
||||
import { COLORS } from "./constants.ts";
|
||||
import { renderHeader, renderSearchBar, renderSeparator, renderTabContent, renderTabs } from "./render.ts";
|
||||
import type { TabId, UsageStats } from "./types.ts";
|
||||
import { isDaemonRunning } from "../../cli-shared.ts";
|
||||
|
||||
export async function runUsageTui(): Promise<void> {
|
||||
const running = await isDaemonRunning();
|
||||
if (!running) {
|
||||
console.log(`${COLORS.red}Error: routstrd daemon is not running.${COLORS.reset}`);
|
||||
console.log(`Run ${COLORS.green}routstrd start${COLORS.reset} first.`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const stdin = process.stdin;
|
||||
const stdout = process.stdout;
|
||||
const isInteractive = Boolean(stdout.isTTY && stdin.isTTY);
|
||||
|
||||
let currentTab: TabId = "overview";
|
||||
let stats: UsageStats | null = null;
|
||||
let refreshInterval: ReturnType<typeof setInterval> | null = null;
|
||||
let shouldUpdate = true;
|
||||
let autoRefresh = true;
|
||||
let cleanedUp = false;
|
||||
let rendering = false;
|
||||
|
||||
if (isInteractive) {
|
||||
stdout.write(enterAlternateScreen() + hideCursor());
|
||||
stdin.setRawMode?.(true);
|
||||
stdin.resume();
|
||||
stdin.setEncoding("utf-8");
|
||||
}
|
||||
|
||||
function cleanup(exitCode = 0) {
|
||||
if (cleanedUp) return;
|
||||
cleanedUp = true;
|
||||
if (refreshInterval) clearInterval(refreshInterval);
|
||||
|
||||
if (isInteractive) {
|
||||
stdin.setRawMode?.(false);
|
||||
stdin.pause();
|
||||
stdout.write(showCursor() + leaveAlternateScreen());
|
||||
} else {
|
||||
stdout.write(showCursor());
|
||||
}
|
||||
|
||||
process.exit(exitCode);
|
||||
}
|
||||
|
||||
process.on("SIGINT", () => cleanup(0));
|
||||
process.on("SIGTERM", () => cleanup(0));
|
||||
|
||||
async function render(forceFetch = false) {
|
||||
if (rendering) return;
|
||||
rendering = true;
|
||||
|
||||
try {
|
||||
const width = getWidth();
|
||||
const height = getHeight();
|
||||
|
||||
if (forceFetch || shouldUpdate) {
|
||||
stats = await fetchUsage(1000);
|
||||
shouldUpdate = false;
|
||||
}
|
||||
|
||||
if (!stats) {
|
||||
stdout.write(
|
||||
moveCursor(1, 1) +
|
||||
eraseDown() +
|
||||
`${COLORS.red}Error: Could not fetch usage data.${COLORS.reset}\n` +
|
||||
`Make sure routstrd is running.\n` +
|
||||
`\nPress Q to quit.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const content = renderTabContent(currentTab, stats, width);
|
||||
const footer = `${COLORS.dim}Press [Q] to quit, [R] to refresh, [A] to toggle auto-refresh${autoRefresh ? " (on)" : " (off)"} scroll:${vimState.scrollPos}${COLORS.reset}${vimState.mode === "normal" ? ` ${COLORS.yellow}vim: hjkl/arrows, / search, g top, gg bottom${COLORS.reset}` : ""}`;
|
||||
const chrome = renderHeader(currentTab, width) + renderTabs(currentTab) + renderSeparator(width) + renderSearchBar();
|
||||
const chromeLines = chrome.split("\n").length - 1;
|
||||
const footerSeparator = renderSeparator(width);
|
||||
const footerLines = footerSeparator.split("\n").length - 1;
|
||||
const contentViewportHeight = Math.max(1, height - chromeLines - footerLines - 1);
|
||||
const visibleContent = applyScrollToContent(content, contentViewportHeight);
|
||||
const footerBlock = (visibleContent ? "\n" : "") + footerSeparator + footer;
|
||||
|
||||
stdout.write(moveCursor(1, 1) + eraseDown() + chrome + visibleContent + footerBlock);
|
||||
} finally {
|
||||
rendering = false;
|
||||
}
|
||||
}
|
||||
|
||||
const handleKey = (key: string) => {
|
||||
if (vimState.isSearching) {
|
||||
if (key === "\x1b" || key === "\x1b[3~") {
|
||||
exitSearchMode();
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
if (key === "\r" || key === "\n") {
|
||||
if (stats?.entries) performSearch(vimState.searchQuery, stats.entries);
|
||||
exitSearchMode();
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
if (key === "\x7f" || key === "\x08") {
|
||||
vimState.searchQuery = vimState.searchQuery.slice(0, -1);
|
||||
if (stats?.entries) performSearch(vimState.searchQuery, stats.entries);
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
if (key === "\x03") {
|
||||
exitSearchMode();
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
if (key.length === 1 && key.charCodeAt(0) >= 32 && key.charCodeAt(0) < 127) {
|
||||
vimState.searchQuery += key;
|
||||
if (stats?.entries) performSearch(vimState.searchQuery, stats.entries);
|
||||
void render(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === "q" || key === "Q" || key === "\u0003") return cleanup(0);
|
||||
if (key === "r" || key === "R") {
|
||||
shouldUpdate = true;
|
||||
void render(true);
|
||||
return;
|
||||
}
|
||||
if (key === "a" || key === "A") {
|
||||
autoRefresh = !autoRefresh;
|
||||
shouldUpdate = true;
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === "j" || key === "\x1b[B" || key === "\x1bOB") {
|
||||
scrollDown();
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
if (key === "k" || key === "\x1b[A" || key === "\x1bOA") {
|
||||
scrollUp();
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
if (key === "l" || key === "\x1b[C" || key === "\x1bOC") {
|
||||
const currentIdx = TABS.findIndex((t) => t.id === currentTab);
|
||||
currentTab = TABS[(currentIdx + 1) % TABS.length]!.id;
|
||||
vimState.scrollPos = 0;
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
if (key === "h" || key === "\x1b[D" || key === "\x1bOD") {
|
||||
const currentIdx = TABS.findIndex((t) => t.id === currentTab);
|
||||
currentTab = TABS[(currentIdx - 1 + TABS.length) % TABS.length]!.id;
|
||||
vimState.scrollPos = 0;
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === "g") {
|
||||
if (vimState.lastKey === "g" && Date.now() - vimState.lastKeyTime < 300) {
|
||||
scrollToBottom();
|
||||
vimState.lastKey = "";
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
vimState.lastKey = "g";
|
||||
vimState.lastKeyTime = Date.now();
|
||||
scrollToTop();
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === "\x02") { pageUp(); void render(false); return; }
|
||||
if (key === "\x06") { pageDown(); void render(false); return; }
|
||||
if (key === "\x15") { scrollUp(10); void render(false); return; }
|
||||
if (key === "\x04") { scrollDown(10); void render(false); return; }
|
||||
if (key === "\x1b[H" || key === "\x1b[1~" || key === "\x1bOH") { scrollToTop(); void render(false); return; }
|
||||
if (key === "\x1b[F" || key === "\x1b[4~" || key === "\x1bOF") { scrollToBottom(); void render(false); return; }
|
||||
if (key === "/") { startSearch(false); void render(false); return; }
|
||||
if (key === "?") { startSearch(true); void render(false); return; }
|
||||
if (key === "n") {
|
||||
if (vimState.searchReverse) prevSearchResult(stats?.entries.length || 0);
|
||||
else nextSearchResult(stats?.entries.length || 0);
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
if (key === "N") {
|
||||
if (vimState.searchReverse) nextSearchResult(stats?.entries.length || 0);
|
||||
else prevSearchResult(stats?.entries.length || 0);
|
||||
void render(false);
|
||||
return;
|
||||
}
|
||||
if (key === "\x1b") { scrollToTop(); void render(false); return; }
|
||||
|
||||
const tab = TABS.find((t) => t.key === key);
|
||||
if (tab) {
|
||||
currentTab = tab.id;
|
||||
vimState.scrollPos = 0;
|
||||
void render(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isInteractive) stdin.on("data", handleKey);
|
||||
|
||||
await render(true);
|
||||
|
||||
refreshInterval = setInterval(() => {
|
||||
if (autoRefresh) {
|
||||
shouldUpdate = true;
|
||||
void render(true);
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { Tab } from "./types.ts";
|
||||
|
||||
export const TABS: Tab[] = [
|
||||
{ id: "overview", name: "Overview", key: "1" },
|
||||
{ id: "today", name: "Today", key: "2" },
|
||||
{ id: "models", name: "Models", key: "3" },
|
||||
{ id: "providers", name: "Providers", key: "4" },
|
||||
{ id: "tokens", name: "Tokens", key: "5" },
|
||||
{ id: "clients", name: "Clients", key: "6" },
|
||||
{ id: "recent", name: "Recent", key: "7" },
|
||||
];
|
||||
|
||||
export const COLORS = {
|
||||
reset: "\x1b[0m",
|
||||
bold: "\x1b[1m",
|
||||
dim: "\x1b[2m",
|
||||
red: "\x1b[31m",
|
||||
green: "\x1b[32m",
|
||||
yellow: "\x1b[33m",
|
||||
blue: "\x1b[34m",
|
||||
magenta: "\x1b[35m",
|
||||
cyan: "\x1b[36m",
|
||||
white: "\x1b[37m",
|
||||
bgBlue: "\x1b[44m",
|
||||
bgGreen: "\x1b[42m",
|
||||
bgYellow: "\x1b[43m",
|
||||
bright: "\x1b[1m",
|
||||
};
|
||||
|
||||
export const MODEL_COLORS: Record<string, string> = {
|
||||
"gpt-5.4": COLORS.magenta,
|
||||
"minimax-m2.7": COLORS.cyan,
|
||||
default: COLORS.white,
|
||||
};
|
||||
|
||||
export const CLIENT_COLORS: Record<string, string> = {
|
||||
opencode: COLORS.blue,
|
||||
openclaw: COLORS.green,
|
||||
"pi-agent": COLORS.yellow,
|
||||
unknown: COLORS.dim,
|
||||
default: COLORS.white,
|
||||
};
|
||||
@@ -0,0 +1,156 @@
|
||||
import type { UsageTrackingEntry } from "../../daemon/types.ts";
|
||||
import { callDaemon, isDaemonRunning } from "../../cli-shared.ts";
|
||||
import type { ClientStats, DayStats, ModelStats, ProviderStats, UsageStats } from "./types.ts";
|
||||
|
||||
export async function fetchUsage(limit = 1000): Promise<UsageStats | null> {
|
||||
try {
|
||||
const running = await isDaemonRunning();
|
||||
if (!running) return null;
|
||||
|
||||
const result = await callDaemon(`/usage?limit=${limit}`);
|
||||
if (result.error) return null;
|
||||
|
||||
const output = result.output as {
|
||||
entries?: UsageTrackingEntry[];
|
||||
totalEntries?: number;
|
||||
totalSatsCost?: number;
|
||||
recentSatsCost?: number;
|
||||
limit?: number;
|
||||
};
|
||||
|
||||
return {
|
||||
entries: output?.entries || [],
|
||||
totalEntries: output?.totalEntries || 0,
|
||||
totalSatsCost: output?.totalSatsCost || 0,
|
||||
recentSatsCost: output?.recentSatsCost || 0,
|
||||
limit: output?.limit || limit,
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function getTodayStart(): number {
|
||||
const now = new Date();
|
||||
return new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
|
||||
}
|
||||
|
||||
export function formatDate(timestamp: number): string {
|
||||
return new Date(timestamp).toISOString().split("T")[0] ?? "";
|
||||
}
|
||||
|
||||
export function formatTime(timestamp: number): string {
|
||||
return new Date(timestamp).toISOString().split("T")[1]?.slice(0, 8) ?? "";
|
||||
}
|
||||
|
||||
export function formatNumber(n: number): string {
|
||||
if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
|
||||
if (n >= 1_000) return (n / 1_000).toFixed(1) + "K";
|
||||
return n.toString();
|
||||
}
|
||||
|
||||
export function getDayStats(entries: UsageTrackingEntry[]): Map<string, DayStats> {
|
||||
const days = new Map<string, DayStats>();
|
||||
for (const entry of entries) {
|
||||
const date = formatDate(entry.timestamp);
|
||||
const existing = days.get(date) || { date, requests: 0, satsCost: 0, promptTokens: 0, completionTokens: 0, totalTokens: 0 };
|
||||
days.set(date, {
|
||||
...existing,
|
||||
requests: existing.requests + 1,
|
||||
satsCost: existing.satsCost + entry.satsCost,
|
||||
promptTokens: existing.promptTokens + entry.promptTokens,
|
||||
completionTokens: existing.completionTokens + entry.completionTokens,
|
||||
totalTokens: existing.totalTokens + entry.totalTokens,
|
||||
});
|
||||
}
|
||||
return days;
|
||||
}
|
||||
|
||||
export function getHourlyToday(entries: UsageTrackingEntry[]): Map<number, DayStats> {
|
||||
const todayStart = getTodayStart();
|
||||
const hours = new Map<number, DayStats>();
|
||||
for (const entry of entries) {
|
||||
if (entry.timestamp < todayStart) continue;
|
||||
const hour = new Date(entry.timestamp).getHours();
|
||||
const existing = hours.get(hour) || {
|
||||
date: formatDate(entry.timestamp), requests: 0, satsCost: 0, promptTokens: 0, completionTokens: 0, totalTokens: 0,
|
||||
};
|
||||
hours.set(hour, {
|
||||
...existing,
|
||||
requests: existing.requests + 1,
|
||||
satsCost: existing.satsCost + entry.satsCost,
|
||||
promptTokens: existing.promptTokens + entry.promptTokens,
|
||||
completionTokens: existing.completionTokens + entry.completionTokens,
|
||||
totalTokens: existing.totalTokens + entry.totalTokens,
|
||||
});
|
||||
}
|
||||
return hours;
|
||||
}
|
||||
|
||||
export function getModelStats(entries: UsageTrackingEntry[]): ModelStats[] {
|
||||
const models = new Map<string, ModelStats>();
|
||||
for (const entry of entries) {
|
||||
const existing = models.get(entry.modelId) || {
|
||||
modelId: entry.modelId, requests: 0, satsCost: 0, promptTokens: 0, completionTokens: 0, totalTokens: 0,
|
||||
};
|
||||
models.set(entry.modelId, {
|
||||
...existing,
|
||||
requests: existing.requests + 1,
|
||||
satsCost: existing.satsCost + entry.satsCost,
|
||||
promptTokens: existing.promptTokens + entry.promptTokens,
|
||||
completionTokens: existing.completionTokens + entry.completionTokens,
|
||||
totalTokens: existing.totalTokens + entry.totalTokens,
|
||||
});
|
||||
}
|
||||
return Array.from(models.values()).sort((a, b) => b.satsCost - a.satsCost);
|
||||
}
|
||||
|
||||
export function getProviderStats(entries: UsageTrackingEntry[]): ProviderStats[] {
|
||||
const providers = new Map<string, ProviderStats>();
|
||||
for (const entry of entries) {
|
||||
const url = entry.baseUrl || "unknown";
|
||||
const existing = providers.get(url) || {
|
||||
baseUrl: url, requests: 0, satsCost: 0, promptTokens: 0, completionTokens: 0, totalTokens: 0,
|
||||
};
|
||||
providers.set(url, {
|
||||
...existing,
|
||||
requests: existing.requests + 1,
|
||||
satsCost: existing.satsCost + entry.satsCost,
|
||||
promptTokens: existing.promptTokens + entry.promptTokens,
|
||||
completionTokens: existing.completionTokens + entry.completionTokens,
|
||||
totalTokens: existing.totalTokens + entry.totalTokens,
|
||||
});
|
||||
}
|
||||
return Array.from(providers.values()).sort((a, b) => b.satsCost - a.satsCost);
|
||||
}
|
||||
|
||||
export function getClientStats(entries: UsageTrackingEntry[]): ClientStats[] {
|
||||
const clients = new Map<string, ClientStats>();
|
||||
for (const entry of entries) {
|
||||
const client = entry.client || "unknown";
|
||||
const existing = clients.get(client) || {
|
||||
client, requests: 0, satsCost: 0, promptTokens: 0, completionTokens: 0, totalTokens: 0,
|
||||
};
|
||||
clients.set(client, {
|
||||
...existing,
|
||||
requests: existing.requests + 1,
|
||||
satsCost: existing.satsCost + entry.satsCost,
|
||||
promptTokens: existing.promptTokens + entry.promptTokens,
|
||||
completionTokens: existing.completionTokens + entry.completionTokens,
|
||||
totalTokens: existing.totalTokens + entry.totalTokens,
|
||||
});
|
||||
}
|
||||
return Array.from(clients.values()).sort((a, b) => b.satsCost - a.satsCost);
|
||||
}
|
||||
|
||||
export function getTotals(entries: UsageTrackingEntry[]) {
|
||||
return entries.reduce(
|
||||
(acc, entry) => ({
|
||||
promptTokens: acc.promptTokens + entry.promptTokens,
|
||||
completionTokens: acc.completionTokens + entry.completionTokens,
|
||||
totalTokens: acc.totalTokens + entry.totalTokens,
|
||||
satsCost: acc.satsCost + entry.satsCost,
|
||||
}),
|
||||
{ promptTokens: 0, completionTokens: 0, totalTokens: 0, satsCost: 0 }
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { runUsageTui } from "./app.ts";
|
||||
@@ -0,0 +1,328 @@
|
||||
import { CLIENT_COLORS, COLORS, MODEL_COLORS, TABS } from "./constants.ts";
|
||||
import {
|
||||
formatDate,
|
||||
formatNumber,
|
||||
formatTime,
|
||||
getClientStats,
|
||||
getDayStats,
|
||||
getHourlyToday,
|
||||
getModelStats,
|
||||
getProviderStats,
|
||||
getTodayStart,
|
||||
getTotals,
|
||||
} from "./data.ts";
|
||||
import { vimState } from "./state.ts";
|
||||
import { stripAnsi } from "./terminal.ts";
|
||||
import type { TabId, UsageStats } from "./types.ts";
|
||||
|
||||
export function renderHeader(activeTab: TabId, width: number): string {
|
||||
const title = `${COLORS.bold}${COLORS.cyan}ROUTSTRD USAGE MONITOR${COLORS.reset}`;
|
||||
const vimIndicator = `${COLORS.yellow}[vim]${COLORS.reset}`;
|
||||
const help = `${COLORS.dim}[Q] Quit [↑↓] Scroll [←→] Tabs [1-7] Tabs [R] Refresh${COLORS.reset}`;
|
||||
const fill = width - title.length - help.length - vimIndicator.length - 6;
|
||||
return `${title}${vimIndicator}${" ".repeat(Math.max(1, fill))}${help}\n`;
|
||||
}
|
||||
|
||||
export function renderSearchBar(): string {
|
||||
if (!vimState.isSearching) return "";
|
||||
const prompt = vimState.searchReverse ? "?" : "/";
|
||||
const matches = vimState.searchResults.length > 0
|
||||
? ` (${vimState.currentSearchIdx + 1}/${vimState.searchResults.length})`
|
||||
: "";
|
||||
const searchLine = `${COLORS.yellow}${prompt}${COLORS.reset}${vimState.searchQuery}${COLORS.dim}_${COLORS.reset}${matches} `;
|
||||
const placeholder = `${COLORS.dim}type to search, Enter to confirm, Esc to cancel${COLORS.reset}`;
|
||||
return `\n${searchLine}${placeholder}\n`;
|
||||
}
|
||||
|
||||
export function renderTabs(activeTab: TabId): string {
|
||||
const tabStr = TABS.map((tab) => tab.id === activeTab
|
||||
? `${COLORS.bgBlue} ${tab.key}:${tab.name} ${COLORS.reset}`
|
||||
: `${COLORS.dim}[${tab.key}]${COLORS.reset} ${tab.name}`).join(" ");
|
||||
return `${" ".repeat(2)}${tabStr}\n`;
|
||||
}
|
||||
|
||||
export function renderSeparator(width: number): string {
|
||||
return `${COLORS.dim}${"─".repeat(width)}${COLORS.reset}\n`;
|
||||
}
|
||||
|
||||
export function renderBox(lines: string[], width: number, title?: string): string {
|
||||
const result: string[] = [];
|
||||
const innerWidth = width - 4;
|
||||
result.push(`┌─${title ? ` ${title} ` : " "}${("─".repeat(innerWidth - (title?.length || 0) - 2))}─┐`);
|
||||
for (const line of lines) {
|
||||
const padding = innerWidth - stripAnsi(line).length;
|
||||
result.push(`│ ${line}${" ".repeat(Math.max(0, padding))} │`);
|
||||
}
|
||||
result.push(`└${"─".repeat(width - 2)}─┘`);
|
||||
return result.join("\n");
|
||||
}
|
||||
|
||||
export function renderBarChart(label: string, value: number, maxValue: number, width: number, color: string): string {
|
||||
const maxBarWidth = width - label.length - 20;
|
||||
const barLen = Math.round((value / maxValue) * maxBarWidth);
|
||||
const bar = color + "█".repeat(barLen) + COLORS.reset;
|
||||
const pct = maxValue > 0 ? ((value / maxValue) * 100).toFixed(1) : "0.0";
|
||||
return `${label.padEnd(width - maxBarWidth - 15)}${bar} ${pct}%`;
|
||||
}
|
||||
|
||||
export function renderOverview(stats: UsageStats, width: number): string {
|
||||
const totals = getTotals(stats.entries);
|
||||
const avgCost = stats.totalEntries > 0 ? stats.totalSatsCost / stats.totalEntries : 0;
|
||||
const avgTokens = stats.totalEntries > 0 ? totals.totalTokens / stats.totalEntries : 0;
|
||||
const halfWidth = Math.floor((width - 6) / 2);
|
||||
|
||||
const leftBox = [
|
||||
`${COLORS.bold}Total Spent:${COLORS.reset} ${COLORS.green}${stats.totalSatsCost.toFixed(3)} sats${COLORS.reset}`,
|
||||
`${COLORS.bold}Total Requests:${COLORS.reset} ${formatNumber(stats.totalEntries)}`,
|
||||
`${COLORS.bold}Avg Cost/Req:${COLORS.reset} ${avgCost.toFixed(3)} sats`,
|
||||
].map((l) => l.padEnd(halfWidth));
|
||||
|
||||
const rightBox = [
|
||||
`${COLORS.bold}Total Tokens:${COLORS.reset} ${formatNumber(totals.totalTokens)}`,
|
||||
`${COLORS.bold}Avg Tokens/Req:${COLORS.reset} ${formatNumber(Math.round(avgTokens))}`,
|
||||
`${COLORS.bold}Prompt/Comp:${COLORS.reset} ${(totals.promptTokens / Math.max(1, totals.completionTokens)).toFixed(2)}x`,
|
||||
].map((l) => l.padEnd(halfWidth));
|
||||
|
||||
let output = renderBox(leftBox, width, "Summary Stats");
|
||||
output += "\n" + renderBox(rightBox, width, "Token Stats");
|
||||
|
||||
const modelStats = getModelStats(stats.entries);
|
||||
if (modelStats.length > 0) {
|
||||
const maxCost = modelStats[0]!.satsCost;
|
||||
const modelLines = modelStats.slice(0, 5).map((m) => renderBarChart(m.modelId, m.satsCost, maxCost, width - 4, MODEL_COLORS[m.modelId] || MODEL_COLORS.default || COLORS.white));
|
||||
output += "\n" + renderBox(modelLines, width, "Top Models by Cost");
|
||||
}
|
||||
|
||||
const clientStats = getClientStats(stats.entries);
|
||||
if (clientStats.length > 0) {
|
||||
const maxCost = clientStats[0]!.satsCost;
|
||||
const clientLines = clientStats.slice(0, 5).map((c) => renderBarChart(c.client, c.satsCost, maxCost, width - 4, CLIENT_COLORS[c.client] || CLIENT_COLORS.default || COLORS.white));
|
||||
output += "\n" + renderBox(clientLines, width, "Usage by Client");
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
export function renderToday(stats: UsageStats, width: number): string {
|
||||
const hourly = getHourlyToday(stats.entries);
|
||||
const todayStart = getTodayStart();
|
||||
const currentHour = new Date().getHours();
|
||||
const todayStats = { date: formatDate(Date.now()), requests: 0, satsCost: 0, promptTokens: 0, completionTokens: 0, totalTokens: 0 };
|
||||
|
||||
for (const entry of stats.entries) {
|
||||
if (entry.timestamp >= todayStart) {
|
||||
todayStats.requests++;
|
||||
todayStats.satsCost += entry.satsCost;
|
||||
todayStats.promptTokens += entry.promptTokens;
|
||||
todayStats.completionTokens += entry.completionTokens;
|
||||
todayStats.totalTokens += entry.totalTokens;
|
||||
}
|
||||
}
|
||||
|
||||
const summaryLines = [
|
||||
`${COLORS.bold}Date:${COLORS.reset} ${todayStats.date}`,
|
||||
`${COLORS.bold}Requests:${COLORS.reset} ${todayStats.requests}`,
|
||||
`${COLORS.bold}Cost:${COLORS.reset} ${COLORS.green}${todayStats.satsCost.toFixed(3)} sats${COLORS.reset}`,
|
||||
`${COLORS.bold}Tokens:${COLORS.reset} ${formatNumber(todayStats.totalTokens)} (p: ${formatNumber(todayStats.promptTokens)} + c: ${formatNumber(todayStats.completionTokens)})`,
|
||||
];
|
||||
|
||||
let output = renderBox(summaryLines, width, "Today");
|
||||
output += "\n" + renderBox([], width, "Hourly Activity");
|
||||
|
||||
const hourLines: string[] = [];
|
||||
const maxHourCost = Math.max(...Array.from(hourly.values()).map((h) => h.satsCost), 1);
|
||||
for (let h = 0; h <= currentHour; h++) {
|
||||
const hStat = hourly.get(h);
|
||||
const reqs = hStat?.requests || 0;
|
||||
const cost = hStat?.satsCost || 0;
|
||||
const time = `${h.toString().padStart(2, "0")}:00`;
|
||||
const label = `${time} (${reqs} req, ${cost.toFixed(2)} sats)`;
|
||||
hourLines.push(renderBarChart(label, cost, maxHourCost, width - 4, h === currentHour ? COLORS.green : COLORS.cyan));
|
||||
}
|
||||
|
||||
output += "\n" + renderBox(hourLines.length > 0 ? hourLines : ["No activity today yet"], width);
|
||||
|
||||
const days = Array.from(getDayStats(stats.entries).values()).slice(0, 7);
|
||||
if (days.length > 1) {
|
||||
const dayLines = days.slice(1).map((d) => `${d.date}: ${d.requests} req, ${d.satsCost.toFixed(2)} sats, ${formatNumber(d.totalTokens)} tokens`);
|
||||
output += "\n" + renderBox(dayLines, width, "Recent Days");
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
export function renderModels(stats: UsageStats, width: number): string {
|
||||
const modelStats = getModelStats(stats.entries);
|
||||
if (modelStats.length === 0) return renderBox(["No model data available"], width, "Models");
|
||||
|
||||
const totalCost = stats.totalSatsCost;
|
||||
const maxCost = modelStats[0]!.satsCost;
|
||||
const lines: string[] = [];
|
||||
|
||||
for (const model of modelStats) {
|
||||
const color = MODEL_COLORS[model.modelId] || MODEL_COLORS.default || COLORS.white;
|
||||
const pct = totalCost > 0 ? ((model.satsCost / totalCost) * 100).toFixed(1) : "0.0";
|
||||
lines.push(`${color}${COLORS.bold}${model.modelId}${COLORS.reset}`);
|
||||
lines.push(` ${COLORS.dim}Cost:${COLORS.reset} ${model.satsCost.toFixed(3)} sats (${pct}%)`);
|
||||
lines.push(` ${COLORS.dim}Requests:${COLORS.reset} ${model.requests}`);
|
||||
lines.push(` ${COLORS.dim}Tokens:${COLORS.reset} ${formatNumber(model.totalTokens)}`);
|
||||
lines.push(` ${COLORS.dim}Avg:${COLORS.reset} ${(model.satsCost / model.requests).toFixed(4)} sats/req`);
|
||||
lines.push(` ${renderBarChart(" ", model.satsCost, maxCost, width - 4, color)}`);
|
||||
lines.push("");
|
||||
}
|
||||
|
||||
return renderBox(lines, width, "Model Breakdown");
|
||||
}
|
||||
|
||||
export function renderProviders(stats: UsageStats, width: number): string {
|
||||
const providerStats = getProviderStats(stats.entries);
|
||||
if (providerStats.length === 0) return renderBox(["No provider data available"], width, "Providers");
|
||||
|
||||
const lines: string[] = [];
|
||||
for (const provider of providerStats) {
|
||||
const shortUrl = provider.baseUrl.replace("https://", "").replace("http://", "");
|
||||
lines.push(`${COLORS.cyan}${COLORS.bold}${shortUrl}${COLORS.reset}`);
|
||||
lines.push(` ${COLORS.dim}Requests:${COLORS.reset} ${provider.requests}`);
|
||||
lines.push(` ${COLORS.dim}Cost:${COLORS.reset} ${provider.satsCost.toFixed(3)} sats`);
|
||||
lines.push(` ${COLORS.dim}Tokens:${COLORS.reset} ${formatNumber(provider.totalTokens)}`);
|
||||
lines.push("");
|
||||
}
|
||||
return renderBox(lines, width, "Provider Breakdown");
|
||||
}
|
||||
|
||||
export function renderTokens(stats: UsageStats, width: number): string {
|
||||
const totals = getTotals(stats.entries);
|
||||
const modelStats = getModelStats(stats.entries);
|
||||
const summaryLines = [
|
||||
`${COLORS.bold}Total Prompt Tokens:${COLORS.reset} ${formatNumber(totals.promptTokens)}`,
|
||||
`${COLORS.bold}Total Completion Tokens:${COLORS.reset} ${formatNumber(totals.completionTokens)}`,
|
||||
`${COLORS.bold}Total Tokens:${COLORS.reset} ${formatNumber(totals.totalTokens)}`,
|
||||
`${COLORS.bold}Prompt/Completion Ratio:${COLORS.reset} ${(totals.promptTokens / Math.max(1, totals.completionTokens)).toFixed(2)}x`,
|
||||
`${COLORS.bold}Avg Tokens/Request:${COLORS.reset} ${(totals.totalTokens / Math.max(1, stats.totalEntries)).toFixed(0)}`,
|
||||
];
|
||||
|
||||
let output = renderBox(summaryLines, width, "Token Summary");
|
||||
|
||||
if (modelStats.length > 0) {
|
||||
const tokenLines = modelStats.slice(0, 6).map((m) => {
|
||||
const color = MODEL_COLORS[m.modelId] || MODEL_COLORS.default;
|
||||
const promptPct = m.totalTokens > 0 ? ((m.promptTokens / m.totalTokens) * 100).toFixed(0) : "0";
|
||||
return `${color}${m.modelId.padEnd(15)}${COLORS.reset} ${formatNumber(m.totalTokens).padStart(8)} tokens (${promptPct}% prompt)`;
|
||||
});
|
||||
output += "\n" + renderBox(tokenLines, width, "Tokens by Model");
|
||||
}
|
||||
|
||||
const sizeBuckets = {
|
||||
tiny: { min: 0, max: 1000, count: 0, cost: 0 },
|
||||
small: { min: 1000, max: 10000, count: 0, cost: 0 },
|
||||
medium: { min: 10000, max: 50000, count: 0, cost: 0 },
|
||||
large: { min: 50000, max: 100000, count: 0, cost: 0 },
|
||||
huge: { min: 100000, max: Infinity, count: 0, cost: 0 },
|
||||
};
|
||||
|
||||
for (const entry of stats.entries) {
|
||||
for (const bucket of Object.values(sizeBuckets)) {
|
||||
if (entry.totalTokens >= bucket.min && entry.totalTokens < bucket.max) {
|
||||
bucket.count++;
|
||||
bucket.cost += entry.satsCost;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const sizeLines = Object.entries(sizeBuckets).map(([name, bucket]) => `${name.padEnd(6)}: ${bucket.count.toString().padStart(4)} reqs, ${bucket.cost.toFixed(2)} sats`);
|
||||
output += "\n" + renderBox(sizeLines, width, "Request Size Distribution");
|
||||
return output;
|
||||
}
|
||||
|
||||
export function renderClients(stats: UsageStats, width: number): string {
|
||||
const clientStats = getClientStats(stats.entries);
|
||||
if (clientStats.length === 0) return renderBox(["No client data available (API key auth not used)"], width, "Client Breakdown");
|
||||
|
||||
const totalCost = stats.totalSatsCost;
|
||||
const maxCost = clientStats[0]!.satsCost;
|
||||
const lines: string[] = [];
|
||||
lines.push(`${COLORS.bold}Client${"".padEnd(20)} Requests${"".padEnd(10)} Cost${"".padEnd(12)} Tokens${"".padEnd(10)} Avg Cost${COLORS.reset}`);
|
||||
lines.push(COLORS.dim + "─".repeat(width - 4) + COLORS.reset);
|
||||
|
||||
for (const client of clientStats) {
|
||||
const color = CLIENT_COLORS[client.client] || CLIENT_COLORS.default || COLORS.white;
|
||||
const pct = totalCost > 0 ? ((client.satsCost / totalCost) * 100).toFixed(1) : "0.0";
|
||||
const avgCost = client.requests > 0 ? (client.satsCost / client.requests).toFixed(4) : "0.0000";
|
||||
lines.push(
|
||||
`${color}${COLORS.bold}${client.client.padEnd(20)}${COLORS.reset}` +
|
||||
`${client.requests.toString().padEnd(12)}` +
|
||||
`${COLORS.green}${client.satsCost.toFixed(3).padEnd(12)} sats${COLORS.reset} (${pct}%)` +
|
||||
`${COLORS.dim} ${formatNumber(client.totalTokens).padEnd(10)} ${avgCost.padEnd(10)} sats/req${COLORS.reset}`
|
||||
);
|
||||
lines.push(` ${renderBarChart("", client.satsCost, maxCost, width - 4, color)}`);
|
||||
lines.push("");
|
||||
}
|
||||
|
||||
let output = renderBox(lines, width, "Client Breakdown");
|
||||
const clientModelMap = new Map<string, Map<string, { requests: number; satsCost: number; tokens: number }>>();
|
||||
|
||||
for (const entry of stats.entries) {
|
||||
const client = entry.client || "unknown";
|
||||
const model = entry.modelId;
|
||||
if (!clientModelMap.has(client)) clientModelMap.set(client, new Map());
|
||||
const modelMap = clientModelMap.get(client)!;
|
||||
const existing = modelMap.get(model) || { requests: 0, satsCost: 0, tokens: 0 };
|
||||
modelMap.set(model, {
|
||||
requests: existing.requests + 1,
|
||||
satsCost: existing.satsCost + entry.satsCost,
|
||||
tokens: existing.tokens + entry.totalTokens,
|
||||
});
|
||||
}
|
||||
|
||||
const clientModelLines: string[] = [];
|
||||
for (const topClient of clientStats.slice(0, 3)) {
|
||||
const modelMap = clientModelMap.get(topClient.client);
|
||||
if (!modelMap) continue;
|
||||
const models = Array.from(modelMap.entries()).sort((a, b) => b[1].satsCost - a[1].satsCost).slice(0, 5);
|
||||
clientModelLines.push(`${COLORS.bold}${topClient.client}${COLORS.reset} (${topClient.requests} reqs, ${topClient.satsCost.toFixed(2)} sats)`);
|
||||
for (const [model, data] of models) {
|
||||
clientModelLines.push(` ${(MODEL_COLORS[model] || MODEL_COLORS.default)}${model.padEnd(18)}${COLORS.reset} ${formatNumber(data.tokens).padEnd(8)} tokens ${data.satsCost.toFixed(3)} sats`);
|
||||
}
|
||||
clientModelLines.push("");
|
||||
}
|
||||
|
||||
if (clientModelLines.length > 0) {
|
||||
output += "\n" + renderBox(clientModelLines, width, "Top Models per Client");
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
export function renderRecent(stats: UsageStats, width: number): string {
|
||||
const recentEntries = stats.entries.slice(0, 50);
|
||||
if (recentEntries.length === 0) return renderBox(["No recent entries"], width, "Recent Requests");
|
||||
|
||||
const lines: string[] = [];
|
||||
lines.push(`${COLORS.bold}${"TIME".padEnd(10)} ${"MODEL".padEnd(18)} ${"TOKENS".padEnd(10)} ${"COST".padEnd(12)} ${"PROVIDER".slice(0, Math.max(0, width - 60))}${COLORS.reset}`);
|
||||
lines.push(COLORS.dim + "─".repeat(width - 4) + COLORS.reset);
|
||||
|
||||
for (const entry of recentEntries) {
|
||||
const time = formatTime(entry.timestamp).slice(0, 8);
|
||||
const model = entry.modelId.slice(0, 18).padEnd(18);
|
||||
const tokens = `${formatNumber(entry.totalTokens).padEnd(6)} (${formatNumber(entry.promptTokens)}+${formatNumber(entry.completionTokens)})`;
|
||||
const cost = `${entry.satsCost.toFixed(3).padEnd(10)} sats`;
|
||||
const provider = (entry.baseUrl || "unknown").replace("https://", "").replace("http://", "").slice(0, Math.max(0, width - 60));
|
||||
const color = MODEL_COLORS[entry.modelId] || MODEL_COLORS.default;
|
||||
lines.push(`${COLORS.dim}${time}${COLORS.reset} ${color}${model}${COLORS.reset} ${tokens.padEnd(10)} ${COLORS.green}${cost}${COLORS.reset} ${COLORS.dim}${provider}${COLORS.reset}`);
|
||||
}
|
||||
|
||||
return renderBox(lines, width, `Recent Requests (${stats.entries.length} shown)`);
|
||||
}
|
||||
|
||||
export function renderTabContent(activeTab: TabId, stats: UsageStats, width: number): string {
|
||||
switch (activeTab) {
|
||||
case "overview": return renderOverview(stats, width);
|
||||
case "today": return renderToday(stats, width);
|
||||
case "models": return renderModels(stats, width);
|
||||
case "providers": return renderProviders(stats, width);
|
||||
case "tokens": return renderTokens(stats, width);
|
||||
case "clients": return renderClients(stats, width);
|
||||
case "recent": return renderRecent(stats, width);
|
||||
default: return "Unknown tab";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import type { UsageTrackingEntry } from "../../daemon/types.ts";
|
||||
import type { VimState } from "./types.ts";
|
||||
|
||||
export const vimState: VimState = {
|
||||
scrollPos: 0,
|
||||
searchQuery: "",
|
||||
searchResults: [],
|
||||
currentSearchIdx: 0,
|
||||
isSearching: false,
|
||||
searchReverse: false,
|
||||
mode: "normal",
|
||||
lastKey: "",
|
||||
lastKeyTime: 0,
|
||||
};
|
||||
|
||||
let maxScrollLines = 0;
|
||||
|
||||
export function clampScrollPos(contentHeight: number, viewportHeight: number): void {
|
||||
const maxScroll = Math.max(0, contentHeight - viewportHeight);
|
||||
vimState.scrollPos = Math.max(0, Math.min(vimState.scrollPos, maxScroll));
|
||||
}
|
||||
|
||||
export function applyScrollToContent(content: string, viewportHeight: number): string {
|
||||
const lines = content.split("\n");
|
||||
maxScrollLines = Math.max(0, lines.length - Math.max(0, viewportHeight));
|
||||
clampScrollPos(lines.length, viewportHeight);
|
||||
|
||||
if (viewportHeight <= 0) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return lines.slice(vimState.scrollPos, vimState.scrollPos + viewportHeight).join("\n");
|
||||
}
|
||||
|
||||
export function scrollDown(lines = 1): void {
|
||||
vimState.scrollPos = Math.min(vimState.scrollPos + lines, maxScrollLines);
|
||||
}
|
||||
|
||||
export function scrollUp(lines = 1): void {
|
||||
vimState.scrollPos = Math.max(vimState.scrollPos - lines, 0);
|
||||
}
|
||||
|
||||
export function scrollToTop(): void {
|
||||
vimState.scrollPos = 0;
|
||||
}
|
||||
|
||||
export function scrollToBottom(): void {
|
||||
vimState.scrollPos = maxScrollLines;
|
||||
}
|
||||
|
||||
export function pageUp(): void {
|
||||
scrollUp(15);
|
||||
}
|
||||
|
||||
export function pageDown(): void {
|
||||
scrollDown(15);
|
||||
}
|
||||
|
||||
export function startSearch(reverse = false): void {
|
||||
vimState.isSearching = true;
|
||||
vimState.searchReverse = reverse;
|
||||
vimState.searchQuery = "";
|
||||
vimState.mode = "search";
|
||||
}
|
||||
|
||||
export function performSearch(query: string, entries: UsageTrackingEntry[]): void {
|
||||
vimState.searchQuery = query;
|
||||
vimState.searchResults = [];
|
||||
vimState.currentSearchIdx = 0;
|
||||
|
||||
if (!query) {
|
||||
vimState.searchResults = [];
|
||||
return;
|
||||
}
|
||||
|
||||
const lowerQuery = query.toLowerCase();
|
||||
entries.forEach((entry, idx) => {
|
||||
const searchable = [entry.modelId, entry.baseUrl || "", entry.client || ""].join(" ").toLowerCase();
|
||||
if (searchable.includes(lowerQuery)) {
|
||||
vimState.searchResults.push(idx);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function nextSearchResult(totalEntries: number): void {
|
||||
if (vimState.searchResults.length === 0) return;
|
||||
vimState.currentSearchIdx = (vimState.currentSearchIdx + 1) % vimState.searchResults.length;
|
||||
vimState.scrollPos = Math.floor((vimState.searchResults[vimState.currentSearchIdx]! / Math.max(1, totalEntries)) * maxScrollLines);
|
||||
}
|
||||
|
||||
export function prevSearchResult(totalEntries: number): void {
|
||||
if (vimState.searchResults.length === 0) return;
|
||||
vimState.currentSearchIdx = (vimState.currentSearchIdx - 1 + vimState.searchResults.length) % vimState.searchResults.length;
|
||||
vimState.scrollPos = Math.floor((vimState.searchResults[vimState.currentSearchIdx]! / Math.max(1, totalEntries)) * maxScrollLines);
|
||||
}
|
||||
|
||||
export function exitSearchMode(): void {
|
||||
vimState.isSearching = false;
|
||||
vimState.mode = "normal";
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
export function clearScreen(): string {
|
||||
return "\x1b[2J\x1b[H";
|
||||
}
|
||||
|
||||
export function enterAlternateScreen(): string {
|
||||
return "\x1b[?1049h";
|
||||
}
|
||||
|
||||
export function leaveAlternateScreen(): string {
|
||||
return "\x1b[?1049l";
|
||||
}
|
||||
|
||||
export function hideCursor(): string {
|
||||
return "\x1b[?25l";
|
||||
}
|
||||
|
||||
export function showCursor(): string {
|
||||
return "\x1b[?25h";
|
||||
}
|
||||
|
||||
export function moveCursor(row: number, col: number): string {
|
||||
return `\x1b[${row};${col}H`;
|
||||
}
|
||||
|
||||
export function eraseDown(): string {
|
||||
return "\x1b[J";
|
||||
}
|
||||
|
||||
export function getWidth(): number {
|
||||
return process.stdout.columns || 80;
|
||||
}
|
||||
|
||||
export function getHeight(): number {
|
||||
return process.stdout.rows || 24;
|
||||
}
|
||||
|
||||
export function stripAnsi(str: string): string {
|
||||
return str.replace(/\x1b\[[0-9;]*m/g, "");
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import type { UsageTrackingEntry } from "../../daemon/types.ts";
|
||||
|
||||
export interface UsageStats {
|
||||
entries: UsageTrackingEntry[];
|
||||
totalEntries: number;
|
||||
totalSatsCost: number;
|
||||
recentSatsCost: number;
|
||||
limit: number;
|
||||
}
|
||||
|
||||
export interface DayStats {
|
||||
date: string;
|
||||
requests: number;
|
||||
satsCost: number;
|
||||
promptTokens: number;
|
||||
completionTokens: number;
|
||||
totalTokens: number;
|
||||
}
|
||||
|
||||
export interface ModelStats {
|
||||
modelId: string;
|
||||
requests: number;
|
||||
satsCost: number;
|
||||
promptTokens: number;
|
||||
completionTokens: number;
|
||||
totalTokens: number;
|
||||
}
|
||||
|
||||
export interface ProviderStats {
|
||||
baseUrl: string;
|
||||
requests: number;
|
||||
satsCost: number;
|
||||
promptTokens: number;
|
||||
completionTokens: number;
|
||||
totalTokens: number;
|
||||
}
|
||||
|
||||
export interface ClientStats {
|
||||
client: string;
|
||||
requests: number;
|
||||
satsCost: number;
|
||||
promptTokens: number;
|
||||
completionTokens: number;
|
||||
totalTokens: number;
|
||||
}
|
||||
|
||||
export type TabId = "overview" | "today" | "models" | "providers" | "tokens" | "clients" | "recent";
|
||||
|
||||
export interface Tab {
|
||||
id: TabId;
|
||||
name: string;
|
||||
key: string;
|
||||
}
|
||||
|
||||
export interface VimState {
|
||||
scrollPos: number;
|
||||
searchQuery: string;
|
||||
searchResults: number[];
|
||||
currentSearchIdx: number;
|
||||
isSearching: boolean;
|
||||
searchReverse: boolean;
|
||||
mode: "normal" | "search";
|
||||
lastKey: string;
|
||||
lastKeyTime: number;
|
||||
}
|
||||
Reference in New Issue
Block a user