mosaicstack/stack
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases 11 Wiki Activity

feat(cli): simplify top bar — title + host only

Browse Source 
- 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:
Jason Woltje
2026-03-15 13:59:48 -05:00
parent 6bc4662b8f
commit 73e7d87516
2 changed files with 6 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/cli/src/tui/app.tsx
View File

@@ -31,13 +31,7 @@ export function TuiApp({ gatewayUrl, conversationId, sessionCookie }: TuiAppProp
return ( return (
<Box flexDirection="column" height="100%"> <Box flexDirection="column" height="100%">
<TopBar <TopBar gatewayUrl={gatewayUrl} />
connected={socket.connected}
connecting={socket.connecting}
gatewayUrl={gatewayUrl}
conversationId={socket.conversationId}
modelName={socket.modelName}
/>
<MessageList <MessageList
messages={socket.messages} messages={socket.messages}

45
packages/cli/src/tui/components/top-bar.tsx
View File

@@ -2,54 +2,19 @@ import React from 'react';
import { Box, Text } from 'ink'; import { Box, Text } from 'ink';
export interface TopBarProps { export interface TopBarProps {
connected: boolean;
connecting: boolean;
gatewayUrl: string; gatewayUrl: string;
conversationId?: string;
modelName: string | null;
} }
export function TopBar({ export function TopBar({ gatewayUrl }: TopBarProps) {
connected,
connecting,
gatewayUrl,
conversationId,
modelName,
}: TopBarProps) {
const indicator = connected ? '●' : '○';
const indicatorColor = connected ? 'green' : connecting ? 'yellow' : 'red';
const statusLabel = connected ? 'connected' : connecting ? 'connecting' : 'disconnected';
// Strip protocol for compact display // Strip protocol for compact display
const host = gatewayUrl.replace(/^https?:\/\//, ''); const host = gatewayUrl.replace(/^https?:\/\//, '');
return ( return (
<Box borderStyle="single" borderColor="gray" paddingX={1} justifyContent="space-between"> <Box borderStyle="single" borderColor="gray" paddingX={1} justifyContent="space-between">
<Box> <Text bold color="blue">
<Text bold color="blue"> Mosaic Stack TUI
mosaic </Text>
</Text> <Text dimColor>{host}</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>
</Box> </Box>
); );
} }