oli-server 0.1.4

A simple, blazingly fast AI coding assistant server
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

import React, { useMemo } from "react";
import { Box, Text } from "ink";
import theme from "../styles/gruvbox.js";
import AnimatedSpinner from "./AnimatedSpinner.js";

// Component props
interface StatusBarProps {
  modelName: string;
  isProcessing: boolean;
  backendConnected?: boolean;
  showShortcuts?: boolean;
}

// Status bar component - modern minimalist design
const StatusBar: React.FC<StatusBarProps> = ({
  modelName,
  isProcessing,
  backendConnected = false,
  showShortcuts = false,
}) => {
  // Get connection status icon and color - memoized to prevent rerenders
  const status = useMemo(() => {
    if (isProcessing) {
      return {
        icon: <AnimatedSpinner color={theme.styles.status.processing.color} />,
        color: theme.styles.status.processing.color,
        text: "Processing",
      };
    } else if (backendConnected) {
      return {
        icon: theme.styles.status.active.icon,
        color: theme.styles.status.active.color,
        text: "Ready",
      };
    } else {
      return {
        icon: theme.styles.status.error.icon,
        color: theme.styles.status.error.color,
        text: "Disconnected",
      };
    }
  }, [isProcessing, backendConnected]);

  return (
    <Box
      paddingX={2}
      paddingY={1}
      flexDirection="row"
      alignItems="center"
      width="100%"
    >
      {/* Status and model info aligned to the left */}
      <Box flexDirection="row" alignItems="center">
        {/* Status indicator */}
        <Box marginRight={2}>
          <Text>
            <Text color={status.color}>{status.icon}</Text>
            <Text {...theme.styles.text.dimmed}> {status.text}</Text>
          </Text>
        </Box>

        {/* Model info */}
        <Box marginRight={2} flexDirection="row" alignItems="center">
          <Text {...theme.styles.text.dimmed}>Model:</Text>
          <Text {...theme.styles.text.highlight}> {modelName}</Text>
        </Box>

        {/* Separator */}
        <Box marginRight={2}>
          <Text {...theme.styles.text.dimmed}>|</Text>
        </Box>

        {/* Shortcuts */}
        <Box flexDirection="row" alignItems="center">
          <Text
            {...theme.styles.text.dimmed}
            color={
              showShortcuts ? theme.colors.dark.yellow : theme.colors.dark.gray
            }
            bold={showShortcuts}
          >
            ? shortcuts
          </Text>
          <Text {...theme.styles.text.dimmed}> | </Text>
          <Text {...theme.styles.text.dimmed}>Ctrl+C to exit</Text>
        </Box>
      </Box>

      {/* Empty box to maintain full width */}
      <Box flexGrow={1} />
    </Box>
  );
};

export default React.memo(StatusBar);