Jason Woltje
a061a64fff
Gateway: - Emit session:info on session creation with provider, model, thinking level - Include SessionUsagePayload in agent:end with token stats, cost, context usage - Handle set:thinking client event to cycle thinking levels - Respond with updated session:info after thinking level change Types (@mosaic/types): - Add SessionUsagePayload (tokens, cost, context) to AgentEndPayload - Add SessionInfoPayload (provider, model, thinking level, available levels) - Add SetThinkingPayload and set:thinking to ClientToServerEvents - Add session:info to ServerToClientEvents CLI TUI: - useSocket now tracks tokenUsage, modelName, providerName, thinkingLevel - Updates from both session:info and agent:end usage payload - Ctrl+T cycles thinking level via set:thinking socket event - Footer shows thinking level next to model (e.g. 'claude-opus-4-6 • medium') - Token stats populate with real ↑in ↓out Rcache Wcache $cost ctx%
109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { Box, Text } from 'ink';
|
|
import type { TokenUsage } from '../hooks/use-socket.js';
|
|
import type { GitInfo } from '../hooks/use-git-info.js';
|
|
|
|
export interface BottomBarProps {
|
|
gitInfo: GitInfo;
|
|
tokenUsage: TokenUsage;
|
|
connected: boolean;
|
|
connecting: boolean;
|
|
modelName: string | null;
|
|
providerName: string | null;
|
|
thinkingLevel: string;
|
|
}
|
|
|
|
function formatTokens(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(0)}k`;
|
|
return String(n);
|
|
}
|
|
|
|
/** Compact the cwd — replace home with ~ */
|
|
function compactCwd(cwd: string): string {
|
|
const home = process.env['HOME'] ?? '';
|
|
if (home && cwd.startsWith(home)) {
|
|
return '~' + cwd.slice(home.length);
|
|
}
|
|
return cwd;
|
|
}
|
|
|
|
export function BottomBar({
|
|
gitInfo,
|
|
tokenUsage,
|
|
connected,
|
|
connecting,
|
|
modelName,
|
|
providerName,
|
|
thinkingLevel,
|
|
}: BottomBarProps) {
|
|
const gatewayStatus = connected ? 'Connected' : connecting ? 'Connecting…' : 'Disconnected';
|
|
const gatewayColor = connected ? 'green' : connecting ? 'yellow' : 'red';
|
|
|
|
const hasTokens = tokenUsage.total > 0;
|
|
|
|
return (
|
|
<Box flexDirection="column" paddingX={0} marginTop={0}>
|
|
{/* Line 1: path (branch) ····· Gateway: Status */}
|
|
<Box justifyContent="space-between">
|
|
<Box>
|
|
<Text dimColor>{compactCwd(gitInfo.cwd)}</Text>
|
|
{gitInfo.branch && <Text dimColor> ({gitInfo.branch})</Text>}
|
|
</Box>
|
|
<Box>
|
|
<Text dimColor>Gateway: </Text>
|
|
<Text color={gatewayColor}>{gatewayStatus}</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Line 2: token stats ····· (provider) model */}
|
|
<Box justifyContent="space-between" minHeight={1}>
|
|
<Box>
|
|
{hasTokens ? (
|
|
<>
|
|
<Text dimColor>↑{formatTokens(tokenUsage.input)}</Text>
|
|
<Text dimColor>{' '}</Text>
|
|
<Text dimColor>↓{formatTokens(tokenUsage.output)}</Text>
|
|
{tokenUsage.cacheRead > 0 && (
|
|
<>
|
|
<Text dimColor>{' '}</Text>
|
|
<Text dimColor>R{formatTokens(tokenUsage.cacheRead)}</Text>
|
|
</>
|
|
)}
|
|
{tokenUsage.cacheWrite > 0 && (
|
|
<>
|
|
<Text dimColor>{' '}</Text>
|
|
<Text dimColor>W{formatTokens(tokenUsage.cacheWrite)}</Text>
|
|
</>
|
|
)}
|
|
{tokenUsage.cost > 0 && (
|
|
<>
|
|
<Text dimColor>{' '}</Text>
|
|
<Text dimColor>${tokenUsage.cost.toFixed(3)}</Text>
|
|
</>
|
|
)}
|
|
{tokenUsage.contextPercent > 0 && (
|
|
<>
|
|
<Text dimColor>{' '}</Text>
|
|
<Text dimColor>
|
|
{tokenUsage.contextPercent.toFixed(1)}%/{formatTokens(tokenUsage.contextWindow)}
|
|
</Text>
|
|
</>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Text dimColor>↑0 ↓0 $0.000</Text>
|
|
)}
|
|
</Box>
|
|
<Box>
|
|
<Text dimColor>
|
|
{providerName ? `(${providerName}) ` : ''}
|
|
{modelName ?? 'awaiting model'}
|
|
{thinkingLevel !== 'off' ? ` • ${thinkingLevel}` : ''}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|