diff --git a/packages/cli/src/tui/components/top-bar.tsx b/packages/cli/src/tui/components/top-bar.tsx index fff5133..c492e57 100644 --- a/packages/cli/src/tui/components/top-bar.tsx +++ b/packages/cli/src/tui/components/top-bar.tsx @@ -3,18 +3,94 @@ import { Box, Text } from 'ink'; export interface TopBarProps { gatewayUrl: string; + version: string; + modelName: string | null; + thinkingLevel: string; + contextWindow: number; + agentName: string; + connected: boolean; + connecting: boolean; } -export function TopBar({ gatewayUrl }: TopBarProps) { - // Strip protocol for compact display - const host = gatewayUrl.replace(/^https?:\/\//, ''); +/** Compact the URL — strip protocol */ +function compactHost(url: string): string { + return url.replace(/^https?:\/\//, ''); +} +function formatContextWindow(n: number): string { + if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(0)}M`; + if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`; + return String(n); +} + +/** + * Mosaic windmill icon — 4 colored tiles + pink center + * Colors from the Mosaic brand: + * TL: blue (#2f80ff) TR: purple (#8b5cf6) + * BL: amber (#f59e0b) BR: teal (#14b8a6) + * Center: pink (#ec4899) + */ +function MosaicIcon() { return ( - - - Mosaic Stack TUI + + + ██ + + ██ + + + + ██ + + + + ██ + + ██ - {host} + + ); +} + +export function TopBar({ + gatewayUrl, + version, + modelName, + thinkingLevel, + contextWindow, + agentName, + connected, + connecting, +}: TopBarProps) { + const host = compactHost(gatewayUrl); + const connectionIndicator = connected ? '●' : '○'; + const connectionColor = connected ? 'green' : connecting ? 'yellow' : 'red'; + + // Build model description line like: "claude-opus-4-6 (1M context) · default" + const modelDisplay = modelName ?? 'awaiting model'; + const contextStr = contextWindow > 0 ? ` (${formatContextWindow(contextWindow)} context)` : ''; + const thinkingStr = thinkingLevel !== 'off' ? ` · ${thinkingLevel}` : ''; + + return ( + + + + + + Mosaic Stack + + v{version} + + + {modelDisplay} + {contextStr} + {thinkingStr} · {agentName} + + + {connectionIndicator} + {host} + + ); }