Add React/TypeScript web interface with Chakra UI and SignalR integration
Implement web frontend using Vite + React + TypeScript with: - Chakra UI component library for theming and styling - SignalR bridge (lunaBridge) for real-time server communication - Chat components (ChatPanel, ChatInput, ChatMessage) - Layout components (AppLayout, Sidebar, StatusBar, SystemPanel) - Custom useChat hook for conversation state management - Dark/light theme support via ColorModeProvider - Mock conversation data for development
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
import { Flex, Text, Box } from '@chakra-ui/react';
|
||||
|
||||
export const StatusBar = () => {
|
||||
return (
|
||||
<Flex
|
||||
h="28px"
|
||||
bg="gray.950"
|
||||
borderTop="1px solid"
|
||||
borderColor="green.900"
|
||||
align="center"
|
||||
px={4}
|
||||
justify="space-between"
|
||||
fontFamily="'JetBrains Mono', monospace"
|
||||
fontSize="11px"
|
||||
color="green.500"
|
||||
css={{
|
||||
boxShadow: 'inset 0 1px 0 rgba(0,255,0,0.1)'
|
||||
}}
|
||||
>
|
||||
<Flex gap={6} align="center">
|
||||
<Flex gap={2} align="center">
|
||||
<Box w="6px" h="6px" borderRadius="full" bg="green.400" css={{ animation: 'blink 2s infinite' }} />
|
||||
<Text fontWeight="bold">LUNA_CORE_ONLINE</Text>
|
||||
</Flex>
|
||||
<Text color="gray.500">SESSION: sess_99x</Text>
|
||||
<Text color="gray.500">MEM: 4.2GB / 16GB</Text>
|
||||
</Flex>
|
||||
|
||||
<Flex gap={6}>
|
||||
<Text color="gray.500">{new Date().toISOString()}</Text>
|
||||
<Text>v2.4.1</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user