feat(cli): simplify top bar — title + host only
- Show 'Mosaic Stack TUI' on left, gateway host on right - Remove connection status from top bar (lives in footer) - Remove model/conversation from top bar (lives in footer)
This commit is contained in:
@@ -31,13 +31,7 @@ export function TuiApp({ gatewayUrl, conversationId, sessionCookie }: TuiAppProp
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" height="100%">
|
||||
<TopBar
|
||||
connected={socket.connected}
|
||||
connecting={socket.connecting}
|
||||
gatewayUrl={gatewayUrl}
|
||||
conversationId={socket.conversationId}
|
||||
modelName={socket.modelName}
|
||||
/>
|
||||
<TopBar gatewayUrl={gatewayUrl} />
|
||||
|
||||
<MessageList
|
||||
messages={socket.messages}
|
||||
|
||||
@@ -2,54 +2,19 @@ import React from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
|
||||
export interface TopBarProps {
|
||||
connected: boolean;
|
||||
connecting: boolean;
|
||||
gatewayUrl: string;
|
||||
conversationId?: string;
|
||||
modelName: string | null;
|
||||
}
|
||||
|
||||
export function TopBar({
|
||||
connected,
|
||||
connecting,
|
||||
gatewayUrl,
|
||||
conversationId,
|
||||
modelName,
|
||||
}: TopBarProps) {
|
||||
const indicator = connected ? '●' : '○';
|
||||
const indicatorColor = connected ? 'green' : connecting ? 'yellow' : 'red';
|
||||
|
||||
const statusLabel = connected ? 'connected' : connecting ? 'connecting' : 'disconnected';
|
||||
|
||||
export function TopBar({ gatewayUrl }: TopBarProps) {
|
||||
// Strip protocol for compact display
|
||||
const host = gatewayUrl.replace(/^https?:\/\//, '');
|
||||
|
||||
return (
|
||||
<Box borderStyle="single" borderColor="gray" paddingX={1} justifyContent="space-between">
|
||||
<Box>
|
||||
<Text bold color="blue">
|
||||
mosaic
|
||||
</Text>
|
||||
<Text> </Text>
|
||||
<Text color={indicatorColor}>{indicator}</Text>
|
||||
<Text dimColor> {statusLabel}</Text>
|
||||
<Text dimColor> · {host}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
{modelName && (
|
||||
<>
|
||||
<Text dimColor>model: </Text>
|
||||
<Text color="magenta">{modelName}</Text>
|
||||
<Text> </Text>
|
||||
</>
|
||||
)}
|
||||
{conversationId && (
|
||||
<>
|
||||
<Text dimColor>conv: </Text>
|
||||
<Text>{conversationId.slice(0, 8)}</Text>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
<Text bold color="blue">
|
||||
Mosaic Stack TUI
|
||||
</Text>
|
||||
<Text dimColor>{host}</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user