Jason Woltje
e42d6eadff
- Remove borders from input bar — clean '❯ message mosaic…' prompt - Two-line footer without borders: - Line 1: compact cwd (branch) | Gateway: Connected/Disconnected - Line 2: token stats (^in v_out R_cache W_cache $cost ctx%) | (provider) model - Extend TokenUsage with cacheRead, cacheWrite, cost, contextPercent, contextWindow - Add providerName to socket hook return - Reorder layout: top bar → messages → input → footer
43 lines
1009 B
TypeScript
43 lines
1009 B
TypeScript
import React, { useState, useCallback } from 'react';
|
||
import { Box, Text } from 'ink';
|
||
import TextInput from 'ink-text-input';
|
||
|
||
export interface InputBarProps {
|
||
onSubmit: (value: string) => void;
|
||
isStreaming: boolean;
|
||
connected: boolean;
|
||
}
|
||
|
||
export function InputBar({ onSubmit, isStreaming, connected }: InputBarProps) {
|
||
const [input, setInput] = useState('');
|
||
|
||
const handleSubmit = useCallback(
|
||
(value: string) => {
|
||
if (!value.trim() || isStreaming || !connected) return;
|
||
onSubmit(value);
|
||
setInput('');
|
||
},
|
||
[onSubmit, isStreaming, connected],
|
||
);
|
||
|
||
const placeholder = !connected
|
||
? 'disconnected — waiting for gateway…'
|
||
: isStreaming
|
||
? 'waiting for response…'
|
||
: 'message mosaic…';
|
||
|
||
return (
|
||
<Box paddingX={0}>
|
||
<Text bold color="green">
|
||
{'❯ '}
|
||
</Text>
|
||
<TextInput
|
||
value={input}
|
||
onChange={setInput}
|
||
onSubmit={handleSubmit}
|
||
placeholder={placeholder}
|
||
/>
|
||
</Box>
|
||
);
|
||
}
|