@vybestack/llxprt-ui 0.7.0-nightly.251211.5750c518a

package/src/ui/components/RadioSelect.test.ts

@@ -0,0 +1,140 @@
+import { describe, expect, it } from 'vitest';
+import type { RadioSelectOption, RadioSelectProps } from './RadioSelect';
+import type { ThemeDefinition } from '../../features/theme';
+
+describe('RadioSelect', () => {
+  const mockTheme: ThemeDefinition = {
+    slug: 'test',
+    name: 'Test Theme',
+    kind: 'dark',
+    colors: {
+      background: '#000000',
+      text: {
+        primary: '#ffffff',
+        muted: '#888888',
+        user: '#00ff00',
+        responder: '#0088ff',
+        thinking: '#ff8800',
+        tool: '#ff00ff',
+      },
+      input: {
+        fg: '#ffffff',
+        bg: '#000000',
+        border: '#333333',
+        placeholder: '#666666',
+      },
+      panel: {
+        bg: '#111111',
+        border: '#333333',
+      },
+      status: {
+        fg: '#ffffff',
+      },
+      accent: {
+        primary: '#00ffff',
+      },
+      selection: {
+        fg: '#000000',
+        bg: '#ffffff',
+      },
+      diff: {
+        addedBg: '#003300',
+        addedFg: '#00ff00',
+        removedBg: '#330000',
+        removedFg: '#ff0000',
+      },
+      message: {
+        userBorder: '#00ff00',
+        systemBorder: '#888888',
+        systemText: '#888888',
+      },
+    },
+  };
+
+  describe('RadioSelectOption type', () => {
+    it('accepts required properties', () => {
+      const option: RadioSelectOption<string> = {
+        label: 'Option 1',
+        value: 'opt1',
+        key: 'opt1',
+      };
+      expect(option.label).toBe('Option 1');
+      expect(option.value).toBe('opt1');
+      expect(option.key).toBe('opt1');
+    });
+
+    it('works with different value types', () => {
+      const stringOption: RadioSelectOption<string> = {
+        label: 'String Option',
+        value: 'string_value',
+        key: 'str',
+      };
+      expect(stringOption.value).toBe('string_value');
+
+      const numberOption: RadioSelectOption<number> = {
+        label: 'Number Option',
+        value: 42,
+        key: 'num',
+      };
+      expect(numberOption.value).toBe(42);
+
+      type CustomType = 'allow_once' | 'allow_always' | 'cancel';
+      const unionOption: RadioSelectOption<CustomType> = {
+        label: 'Union Option',
+        value: 'allow_once',
+        key: 'union',
+      };
+      expect(unionOption.value).toBe('allow_once');
+    });
+  });
+
+  describe('RadioSelectProps type', () => {
+    it('accepts required props', () => {
+      const options: RadioSelectOption<string>[] = [
+        { label: 'Option 1', value: 'opt1', key: 'opt1' },
+        { label: 'Option 2', value: 'opt2', key: 'opt2' },
+      ];
+
+      const props: RadioSelectProps<string> = {
+        options,
+        onSelect: () => {},
+      };
+
+      expect(props.options).toHaveLength(2);
+      expect(typeof props.onSelect).toBe('function');
+    });
+
+    it('accepts optional theme prop', () => {
+      const props: RadioSelectProps<string> = {
+        options: [{ label: 'Test', value: 'test', key: 'test' }],
+        onSelect: () => {},
+        theme: mockTheme,
+      };
+
+      expect(props.theme).toBe(mockTheme);
+    });
+
+    it('accepts optional isFocused prop', () => {
+      const props: RadioSelectProps<string> = {
+        options: [{ label: 'Test', value: 'test', key: 'test' }],
+        onSelect: () => {},
+        isFocused: false,
+      };
+
+      expect(props.isFocused).toBe(false);
+    });
+
+    it('accepts optional initialIndex prop', () => {
+      const props: RadioSelectProps<string> = {
+        options: [
+          { label: 'Option 1', value: 'opt1', key: 'opt1' },
+          { label: 'Option 2', value: 'opt2', key: 'opt2' },
+        ],
+        onSelect: () => {},
+        initialIndex: 1,
+      };
+
+      expect(props.initialIndex).toBe(1);
+    });
+  });
+});

package/src/ui/components/RadioSelect.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useKeyboard } from '@vybestack/opentui-react';
+import type { ThemeDefinition } from '../../features/theme';
+import { useListNavigation } from '../../hooks/useListNavigation';
+
+export interface RadioSelectOption<T> {
+  readonly label: string;
+  readonly value: T;
+  readonly key: string;
+}
+
+export interface RadioSelectProps<T> {
+  readonly options: RadioSelectOption<T>[];
+  readonly onSelect: (value: T) => void;
+  readonly theme?: ThemeDefinition;
+  readonly isFocused?: boolean;
+  readonly initialIndex?: number;
+}
+
+export function RadioSelect<T>(props: RadioSelectProps<T>): React.ReactNode {
+  const {
+    options,
+    onSelect,
+    theme,
+    isFocused = true,
+    initialIndex = 0,
+  } = props;
+  const { selectedIndex, moveSelection, setSelectedIndex } = useListNavigation(
+    options.length,
+  );
+
+  // Initialize to initialIndex on first render
+  if (
+    selectedIndex === 0 &&
+    initialIndex !== 0 &&
+    initialIndex < options.length
+  ) {
+    setSelectedIndex(initialIndex);
+  }
+
+  useKeyboard((key) => {
+    if (!isFocused) return;
+
+    if (key.eventType === 'press') {
+      if (key.name === 'up' || key.name === 'k') {
+        key.preventDefault();
+        moveSelection(-1);
+      } else if (key.name === 'down' || key.name === 'j') {
+        key.preventDefault();
+        moveSelection(1);
+      } else if (key.name === 'return') {
+        key.preventDefault();
+        const selected = options.at(selectedIndex);
+        if (selected != null) {
+          onSelect(selected.value);
+        }
+      } else if (key.name >= '1' && key.name <= '9') {
+        const index = parseInt(key.name, 10) - 1;
+        if (index < options.length) {
+          key.preventDefault();
+          const selected = options.at(index);
+          if (selected != null) {
+            onSelect(selected.value);
+          }
+        }
+      }
+    }
+  });
+
+  return (
+    <box flexDirection="column" style={{ gap: 0 }}>
+      {options.map((option, index): React.ReactNode => {
+        const isSelected = index === selectedIndex;
+        const bullet = isSelected ? '●' : '○';
+        const number = index + 1;
+        const fg = isSelected
+          ? theme?.colors.accent.primary
+          : theme?.colors.text.primary;
+
+        return (
+          <text key={option.key} fg={fg}>
+            {`${number}. ${bullet} ${option.label}`}
+          </text>
+        );
+      })}
+    </box>
+  );
+}

package/src/ui/components/SelectableList.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'vitest';
+import type { SelectableListItemProps } from './SelectableList';
+import type { ThemeDefinition } from '../../features/theme';
+
+describe('SelectableListItem', () => {
+  const mockTheme: ThemeDefinition = {
+    slug: 'test',
+    name: 'Test Theme',
+    kind: 'dark',
+    colors: {
+      background: '#000000',
+      text: {
+        primary: '#ffffff',
+        muted: '#888888',
+        user: '#00ff00',
+        responder: '#0088ff',
+        thinking: '#ff8800',
+        tool: '#ff00ff',
+      },
+      input: {
+        fg: '#ffffff',
+        bg: '#000000',
+        border: '#333333',
+        placeholder: '#666666',
+      },
+      panel: {
+        bg: '#111111',
+        border: '#333333',
+      },
+      status: {
+        fg: '#ffffff',
+      },
+      accent: {
+        primary: '#00ffff',
+      },
+      selection: {
+        fg: '#000000',
+        bg: '#ffffff',
+      },
+      diff: {
+        addedBg: '#003300',
+        addedFg: '#00ff00',
+        removedBg: '#330000',
+        removedFg: '#ff0000',
+      },
+      message: {
+        userBorder: '#00ff00',
+        systemBorder: '#888888',
+        systemText: '#888888',
+      },
+    },
+  };
+
+  it('accepts required props without optional fields', () => {
+    const props: SelectableListItemProps = {
+      label: 'Test Item',
+      isSelected: true,
+      theme: mockTheme,
+    };
+    expect(props.label).toBe('Test Item');
+    expect(props.isSelected).toBe(true);
+  });
+
+  it('accepts optional isActive prop', () => {
+    const props: SelectableListItemProps = {
+      label: 'Test Item',
+      isSelected: false,
+      isActive: true,
+      theme: mockTheme,
+    };
+    expect(props.isActive).toBe(true);
+  });
+
+  it('accepts optional activeTag prop', () => {
+    const props: SelectableListItemProps = {
+      label: 'Test Item',
+      isSelected: false,
+      activeTag: ' (active)',
+      theme: mockTheme,
+    };
+    expect(props.activeTag).toBe(' (active)');
+  });
+});

package/src/ui/components/SelectableList.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { ThemeDefinition } from '../../features/theme';
+
+export interface SelectableListItemProps {
+  readonly label: string;
+  readonly isSelected: boolean;
+  readonly isActive?: boolean;
+  readonly activeTag?: string;
+  readonly theme?: ThemeDefinition;
+  readonly width?: number;
+}
+
+export function SelectableListItem(
+  props: SelectableListItemProps,
+): React.ReactNode {
+  const bullet = props.isSelected ? '●' : '○';
+  const activeTag =
+    props.isActive === true && props.activeTag ? props.activeTag : '';
+  const labelText = `${bullet} ${props.label}${activeTag}`;
+  const finalText =
+    props.width != null ? labelText.padEnd(props.width, ' ') : labelText;
+
+  return (
+    <text
+      fg={
+        props.isSelected
+          ? props.theme?.colors.accent.primary
+          : props.theme?.colors.text.primary
+      }
+      style={{ paddingLeft: 1, paddingRight: 1 }}
+    >
+      {finalText}
+    </text>
+  );
+}

package/src/ui/components/StatusBar.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { ThemeDefinition } from '../../features/theme';
+import type { StreamState } from '../../hooks/useChatStore';
+
+export interface StatusBarProps {
+  readonly statusLabel: string;
+  readonly promptCount: number;
+  readonly responderWordCount: number;
+  readonly streamState: StreamState;
+  readonly theme: ThemeDefinition;
+}
+
+export function buildStatusLabel(
+  streamState: StreamState,
+  autoFollow: boolean,
+): string {
+  const streamingPart = streamState === 'busy' ? 'busy' : 'idle';
+  const scrollPart = autoFollow ? 'follow' : 'scroll lock';
+  return `${streamingPart} | ${scrollPart}`;
+}
+
+export function StatusBar(props: StatusBarProps): React.ReactNode {
+  return (
+    <box
+      style={{
+        minHeight: 1,
+        maxHeight: 3,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 0,
+        paddingBottom: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        backgroundColor: props.theme.colors.panel.bg,
+        border: ['top'],
+        borderColor: props.theme.colors.panel.border,
+      }}
+    >
+      <text fg={props.theme.colors.status.fg}>{props.statusLabel}</text>
+      <text fg={props.theme.colors.status.fg}>
+        {`prompts: ${props.promptCount} | words: ${props.responderWordCount} | ${props.streamState}`}
+      </text>
+    </box>
+  );
+}

package/src/ui/components/SuggestionPanel.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { MAX_SUGGESTION_COUNT } from '../../features/completion';
+import type { CompletionSuggestion } from '../../features/completion';
+import type { ThemeDefinition } from '../../features/theme';
+
+export interface SuggestionPanelProps {
+  readonly suggestions: CompletionSuggestion[];
+  readonly selectedIndex: number;
+  readonly theme: ThemeDefinition;
+}
+
+function renderSuggestionRow(
+  item: CompletionSuggestion,
+  globalIndex: number,
+  selectedIndex: number,
+  maxLabel: number,
+  theme: ThemeDefinition,
+): React.ReactNode {
+  const isSelected = globalIndex === selectedIndex;
+  const prefix =
+    item.mode === 'slash' && item.displayPrefix !== false ? '/' : '';
+  const label = `${prefix}${item.value}`.padEnd(maxLabel + 1, ' ');
+  const description = item.description ? ` ${item.description}` : '';
+  const rowText = `${label}${description}`;
+
+  // Use explicit colors to avoid rendering issues with selection
+  const bgColor = isSelected
+    ? theme.colors.selection.bg
+    : theme.colors.panel.bg;
+  const fgColor = isSelected
+    ? theme.colors.selection.fg
+    : theme.colors.text.primary;
+
+  return (
+    <text
+      key={`suggestion-${globalIndex}`}
+      bg={bgColor}
+      fg={fgColor}
+      style={{ paddingLeft: 1, paddingRight: 1 }}
+    >
+      {rowText}
+    </text>
+  );
+}
+
+export function SuggestionPanel(
+  props: SuggestionPanelProps,
+): React.ReactNode | null {
+  if (props.suggestions.length === 0) {
+    return null;
+  }
+
+  const pageSize = MAX_SUGGESTION_COUNT;
+  const totalPages = Math.max(
+    1,
+    Math.ceil(props.suggestions.length / pageSize),
+  );
+  const pageIndex = Math.floor(props.selectedIndex / pageSize);
+  const pageStart = pageIndex * pageSize;
+  const pageItems = props.suggestions.slice(pageStart, pageStart + pageSize);
+  const maxLabel = pageItems.reduce(
+    (max, item) =>
+      Math.max(max, item.value.length + (item.mode === 'slash' ? 1 : 0)),
+    0,
+  );
+  const indicatorNeeded = props.suggestions.length > pageSize;
+  const height = pageItems.length + (indicatorNeeded ? 1 : 0);
+
+  return (
+    <box
+      style={{
+        height,
+        minHeight: height,
+        maxHeight: height,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        flexDirection: 'column',
+        backgroundColor: props.theme.colors.panel.bg,
+        marginTop: 0,
+        marginBottom: 1,
+      }}
+    >
+      {pageItems.map((item, index) =>
+        renderSuggestionRow(
+          item,
+          pageStart + index,
+          props.selectedIndex,
+          maxLabel,
+          props.theme,
+        ),
+      )}
+      {indicatorNeeded ? (
+        <text
+          fg={props.theme.colors.text.muted}
+          style={{ paddingLeft: 1 }}
+        >{`▼ page ${pageIndex + 1}/${totalPages} ▲`}</text>
+      ) : null}
+    </box>
+  );
+}

package/src/ui/components/messages/ModelMessage.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ModelMessageProps } from './types';
+
+export function ModelMessage(
+  props: Readonly<ModelMessageProps>,
+): React.ReactNode {
+  return (
+    <text key={props.id} fg={props.theme.colors.text.responder}>
+      {props.text}
+    </text>
+  );
+}
+
+ModelMessage.displayName = 'ModelMessage';

package/src/ui/components/messages/SystemMessage.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { SystemMessageProps } from './types';
+import { EmptyBorder } from './types';
+
+export function SystemMessage(
+  props: Readonly<SystemMessageProps>,
+): React.ReactNode {
+  const bgColor = props.theme.colors.message.systemBg;
+  return (
+    <box
+      key={props.id}
+      border={['left']}
+      borderColor={props.theme.colors.message.systemBorder}
+      customBorderChars={{
+        ...EmptyBorder,
+        vertical: '│',
+        bottomLeft: '╵',
+        topLeft: '╷',
+      }}
+      style={{ paddingLeft: 1, marginBottom: 1, backgroundColor: bgColor }}
+    >
+      <text fg={props.theme.colors.message.systemText} bg={bgColor}>
+        {props.text}
+      </text>
+    </box>
+  );
+}
+
+SystemMessage.displayName = 'SystemMessage';

package/src/ui/components/messages/ThinkingMessage.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ThinkingMessageProps } from './types';
+
+export function ThinkingMessage(
+  props: Readonly<ThinkingMessageProps>,
+): React.ReactNode {
+  return (
+    <text key={props.id} fg={props.theme.colors.text.thinking}>
+      <i>{props.text}</i>
+    </text>
+  );
+}
+
+ThinkingMessage.displayName = 'ThinkingMessage';

package/src/ui/components/messages/UserMessage.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { UserMessageProps } from './types';
+import { EmptyBorder } from './types';
+
+export function UserMessage(
+  props: Readonly<UserMessageProps>,
+): React.ReactNode {
+  return (
+    <box
+      key={props.id}
+      border={['left']}
+      borderColor={props.theme.colors.message.userBorder}
+      customBorderChars={{
+        ...EmptyBorder,
+        vertical: '┃',
+        bottomLeft: '╹',
+        topLeft: '╻',
+      }}
+      style={{ paddingLeft: 1, marginBottom: 1 }}
+    >
+      <text fg={props.theme.colors.text.user}>{props.text}</text>
+    </box>
+  );
+}
+
+UserMessage.displayName = 'UserMessage';

package/src/ui/components/messages/index.ts

@@ -0,0 +1,15 @@
+export { UserMessage } from './UserMessage';
+export { SystemMessage } from './SystemMessage';
+export { ModelMessage } from './ModelMessage';
+export { ThinkingMessage } from './ThinkingMessage';
+export { renderMessage, getMessageRenderer, roleColor } from './renderMessage';
+export { EmptyBorder } from './types';
+export type {
+  MessageRole,
+  MessageProps,
+  UserMessageProps,
+  SystemMessageProps,
+  ModelMessageProps,
+  ThinkingMessageProps,
+  MessageComponent,
+} from './types';

package/src/ui/components/messages/renderMessage.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { createMockTheme } from '../../../test/mockTheme';
+import { getMessageRenderer, roleColor } from './renderMessage';
+
+describe('getMessageRenderer', () => {
+  it('should return UserMessage renderer for user role', () => {
+    const renderer = getMessageRenderer('user');
+    expect(renderer.displayName ?? renderer.name).toBe('UserMessage');
+  });
+
+  it('should return ModelMessage renderer for model role', () => {
+    const renderer = getMessageRenderer('model');
+    expect(renderer.displayName ?? renderer.name).toBe('ModelMessage');
+  });
+
+  it('should return SystemMessage renderer for system role', () => {
+    const renderer = getMessageRenderer('system');
+    expect(renderer.displayName ?? renderer.name).toBe('SystemMessage');
+  });
+
+  it('should return ThinkingMessage renderer for thinking role', () => {
+    const renderer = getMessageRenderer('thinking');
+    expect(renderer.displayName ?? renderer.name).toBe('ThinkingMessage');
+  });
+});
+
+describe('roleColor', () => {
+  const mockTheme = createMockTheme();
+
+  it('should return user text color for user role', () => {
+    expect(roleColor('user', mockTheme)).toBe(mockTheme.colors.text.user);
+  });
+
+  it('should return responder text color for model role', () => {
+    expect(roleColor('model', mockTheme)).toBe(mockTheme.colors.text.responder);
+  });
+
+  it('should return systemText color for system role', () => {
+    expect(roleColor('system', mockTheme)).toBe(
+      mockTheme.colors.message.systemText,
+    );
+  });
+
+  it('should return thinking text color for thinking role', () => {
+    expect(roleColor('thinking', mockTheme)).toBe(
+      mockTheme.colors.text.thinking,
+    );
+  });
+});

package/src/ui/components/messages/renderMessage.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { ThemeDefinition } from '../../../features/theme';
+import type { MessageRole, MessageComponent } from './types';
+import { UserMessage } from './UserMessage';
+import { SystemMessage } from './SystemMessage';
+import { ModelMessage } from './ModelMessage';
+import { ThinkingMessage } from './ThinkingMessage';
+
+export function getMessageRenderer(role: MessageRole): MessageComponent {
+  switch (role) {
+    case 'user':
+      return UserMessage;
+    case 'system':
+      return SystemMessage;
+    case 'model':
+      return ModelMessage;
+    case 'thinking':
+      return ThinkingMessage;
+  }
+}
+
+export function roleColor(role: MessageRole, theme: ThemeDefinition): string {
+  switch (role) {
+    case 'user':
+      return theme.colors.text.user;
+    case 'model':
+      return theme.colors.text.responder;
+    case 'system':
+      return theme.colors.message.systemText;
+    case 'thinking':
+      return theme.colors.text.thinking;
+  }
+}
+
+export function renderMessage(
+  role: MessageRole,
+  id: string,
+  text: string,
+  theme: ThemeDefinition,
+): React.ReactNode {
+  const MessageComponent = getMessageRenderer(role);
+  return <MessageComponent id={id} text={text} theme={theme} />;
+}