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

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

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import type { MessageRole } from './types';
+
+describe('MessageRole type', () => {
+  it('should include user role', () => {
+    const role: MessageRole = 'user';
+    expect(role).toBe('user');
+  });
+
+  it('should include model role', () => {
+    const role: MessageRole = 'model';
+    expect(role).toBe('model');
+  });
+
+  it('should include system role', () => {
+    const role: MessageRole = 'system';
+    expect(role).toBe('system');
+  });
+
+  it('should include thinking role', () => {
+    const role: MessageRole = 'thinking';
+    expect(role).toBe('thinking');
+  });
+});

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

@@ -0,0 +1,36 @@
+import type React from 'react';
+import type { ThemeDefinition } from '../../../features/theme';
+
+export type MessageRole = 'user' | 'model' | 'system' | 'thinking';
+
+export interface MessageProps {
+  readonly id: string;
+  readonly text: string;
+  readonly theme: ThemeDefinition;
+}
+
+export type UserMessageProps = MessageProps;
+
+export type SystemMessageProps = MessageProps;
+
+export type ModelMessageProps = MessageProps;
+
+export type ThinkingMessageProps = MessageProps;
+
+export type MessageComponent = ((props: MessageProps) => React.ReactNode) & {
+  displayName?: string;
+};
+
+export const EmptyBorder = {
+  topLeft: ' ',
+  topRight: ' ',
+  bottomLeft: ' ',
+  bottomRight: ' ',
+  horizontal: ' ',
+  vertical: ' ',
+  topT: ' ',
+  bottomT: ' ',
+  leftT: ' ',
+  rightT: ' ',
+  cross: ' ',
+};

package/src/ui/modals/AuthModal.tsx

@@ -0,0 +1,106 @@
+import { useKeyboard } from '@vybestack/opentui-react';
+import React, { useCallback, useState } from 'react';
+import { useListNavigation } from '../../hooks/useListNavigation';
+import { ModalShell } from './ModalShell';
+import type { ThemeDefinition } from '../../features/theme';
+import { SelectableListItem } from '../components/SelectableList';
+
+export interface AuthOption {
+  readonly id: string;
+  readonly label: string;
+  readonly enabled: boolean;
+}
+
+export function AuthModal(props: {
+  readonly options: AuthOption[];
+  readonly onClose: () => void;
+  readonly onSave: (next: AuthOption[]) => void;
+  readonly theme?: ThemeDefinition;
+}): React.ReactNode {
+  const [options, setOptions] = useState<AuthOption[]>(props.options);
+  const { selectedIndex, moveSelection } = useListNavigation(options.length);
+
+  const closeWithSave = useCallback((): void => {
+    props.onSave(options);
+    props.onClose();
+  }, [options, props]);
+
+  useKeyboard((key) => {
+    if (key.eventType !== 'press') {
+      return;
+    }
+    if (key.name === 'escape') {
+      closeWithSave();
+      return;
+    }
+    if (key.name === 'up') {
+      key.preventDefault();
+      moveSelection(-1);
+    } else if (key.name === 'down') {
+      key.preventDefault();
+      moveSelection(1);
+    } else if (key.name === 'return' || key.name === 'enter') {
+      key.preventDefault();
+      const current = options.at(selectedIndex);
+      if (current == null) {
+        return;
+      }
+      if (current.id === 'close') {
+        closeWithSave();
+        return;
+      }
+      setOptions((prev) =>
+        prev.map((opt, optIndex) =>
+          optIndex === selectedIndex ? { ...opt, enabled: !opt.enabled } : opt,
+        ),
+      );
+    }
+  });
+
+  return (
+    <ModalShell
+      title="OAuth Authentication"
+      onClose={closeWithSave}
+      theme={props.theme}
+    >
+      <text fg={props.theme?.colors.text.primary}>
+        Select an OAuth provider to authenticate:
+      </text>
+      <text fg={props.theme?.colors.text.muted}>
+        Note: You can also use API keys via /key, /keyfile, --key, --keyfile, or
+        environment variables
+      </text>
+      <box flexDirection="column" style={{ gap: 0 }}>
+        {renderAuthOptions(options, selectedIndex, props.theme)}
+      </box>
+      <text fg={props.theme?.colors.text.muted}>
+        (Use Enter to select, ESC to close)
+      </text>
+      <text fg={props.theme?.colors.text.primary}>
+        Terms of Services and Privacy Notice for Gemini CLI
+      </text>
+      <text fg={props.theme?.colors.text.muted}>
+        https://github.com/acoliver/llxprt-code/blob/main/docs/tos-privacy.md
+      </text>
+    </ModalShell>
+  );
+}
+
+function renderAuthOptions(
+  options: AuthOption[],
+  selectedIndex: number,
+  theme?: ThemeDefinition,
+): React.ReactNode[] {
+  return options.map((opt, optIndex): React.ReactNode => {
+    const isSelected = optIndex === selectedIndex;
+    const label = `${optIndex + 1}. ${opt.label} [${opt.enabled ? 'ON' : 'OFF'}]`;
+    return (
+      <SelectableListItem
+        key={opt.id}
+        label={label}
+        isSelected={isSelected}
+        theme={theme}
+      />
+    );
+  });
+}

package/src/ui/modals/ModalShell.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useKeyboard } from '@vybestack/opentui-react';
+import type { ThemeDefinition } from '../../features/theme';
+
+export interface ModalShellProps {
+  readonly title: string;
+  readonly subtitle?: string;
+  readonly width?: number | `${number}%`;
+  readonly onClose: () => void;
+  readonly children: React.ReactNode;
+  readonly footer?: React.ReactNode;
+  readonly theme?: ThemeDefinition;
+}
+
+export function ModalShell(props: ModalShellProps): React.ReactNode {
+  useKeyboard((key) => {
+    if (key.name === 'escape') {
+      key.preventDefault();
+      props.onClose();
+    }
+  });
+
+  return (
+    <box
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        padding: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: undefined,
+      }}
+    >
+      <box
+        border
+        style={{
+          width: props.width ?? '95%',
+          maxWidth: props.width ?? '95%',
+          padding: 1,
+          borderColor: props.theme?.colors.panel.border,
+          backgroundColor: props.theme?.colors.panel.bg,
+          flexDirection: 'column',
+          gap: 1,
+        }}
+      >
+        <text fg={props.theme?.colors.text.primary}>{props.title}</text>
+        {props.subtitle ? (
+          <text fg={props.theme?.colors.text.muted}>{props.subtitle}</text>
+        ) : null}
+        <box flexDirection="column" style={{ gap: 1, flexGrow: 1 }}>
+          {props.children}
+        </box>
+        {props.footer ?? null}
+      </box>
+    </box>
+  );
+}

package/src/ui/modals/SearchSelectModal.tsx

@@ -0,0 +1,236 @@
+import type { TextareaRenderable } from '@vybestack/opentui-core';
+import { useKeyboard } from '@vybestack/opentui-react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useFilteredList } from '../../hooks/useListNavigation';
+import { type SearchItem } from './types';
+import { ModalShell } from './ModalShell';
+import type { ThemeDefinition } from '../../features/theme';
+import { FilterInput } from '../components/FilterInput';
+import { SelectableListItem } from '../components/SelectableList';
+
+const GRID_COLUMNS = 3;
+const SEARCH_PAGE_SIZE = GRID_COLUMNS * 6;
+
+export interface SearchSelectProps {
+  readonly title: string;
+  readonly noun: string;
+  readonly items: SearchItem[];
+  readonly alphabetical?: boolean;
+  readonly footerHint?: string;
+  readonly onClose: () => void;
+  readonly onSelect: (item: SearchItem) => void;
+  readonly theme?: ThemeDefinition;
+}
+
+export function SearchSelectModal(props: SearchSelectProps): React.ReactNode {
+  const searchRef = useRef<TextareaRenderable | null>(null);
+  const [query, setQuery] = useState('');
+
+  const filterFn = useCallback(
+    (item: SearchItem, searchQuery: string): boolean => {
+      const normalized = searchQuery.trim().toLowerCase();
+      return item.label.toLowerCase().includes(normalized);
+    },
+    [],
+  );
+
+  const { filteredItems, selectedIndex, moveSelection } = useFilteredList(
+    props.items,
+    query,
+    filterFn,
+  );
+
+  const sortedFiltered = useMemo(() => {
+    if (props.alphabetical === true) {
+      return [...filteredItems].sort((a, b) => a.label.localeCompare(b.label));
+    }
+    return filteredItems;
+  }, [filteredItems, props.alphabetical]);
+
+  const { pageStart, visible, startDisplay, endDisplay } = getPagination(
+    sortedFiltered,
+    selectedIndex,
+  );
+  const current = sortedFiltered[selectedIndex];
+
+  const handleQueryChange = useCallback((newQuery: string) => {
+    setQuery(newQuery);
+  }, []);
+
+  useSearchSelectKeys(
+    sortedFiltered,
+    selectedIndex,
+    moveSelection,
+    current,
+    props.onSelect,
+    props.onClose,
+  );
+
+  return (
+    <ModalShell
+      title={props.title}
+      onClose={props.onClose}
+      theme={props.theme}
+      footer={
+        props.footerHint ? (
+          <text fg={props.theme?.colors.text.muted}>{props.footerHint}</text>
+        ) : undefined
+      }
+    >
+      <text
+        fg={props.theme?.colors.text.primary}
+      >{`Found ${sortedFiltered.length} of ${props.items.length} ${props.noun}`}</text>
+      <box flexDirection="row" style={{ gap: 1, alignItems: 'center' }}>
+        <text
+          fg={props.theme?.colors.text.primary}
+        >{`${props.alphabetical === true ? 'Search' : 'Filter'}:`}</text>
+        <FilterInput
+          textareaRef={searchRef}
+          placeholder="type to filter"
+          theme={props.theme}
+          onQueryChange={handleQueryChange}
+        />
+      </box>
+      <text
+        fg={props.theme?.colors.text.primary}
+      >{`Showing ${startDisplay}-${endDisplay} of ${sortedFiltered.length} rows`}</text>
+      <SearchGrid
+        items={visible}
+        pageStart={pageStart}
+        selectedIndex={selectedIndex}
+        theme={props.theme}
+      />
+    </ModalShell>
+  );
+}
+
+function useSearchSelectKeys(
+  filtered: SearchItem[],
+  selectedIndex: number,
+  moveSelection: (delta: number) => void,
+  current: SearchItem | undefined,
+  onSelect: (item: SearchItem) => void,
+  onClose: () => void,
+): void {
+  useKeyboard((key) => {
+    if (key.eventType !== 'press') {
+      return;
+    }
+    if (key.name === 'escape') {
+      onClose();
+      return;
+    }
+    if (filtered.length === 0) {
+      return;
+    }
+    const handlers: Record<string, () => void> = {
+      tab: () => moveSelection(key.shift ? -1 : 1),
+      return: () => {
+        if (current != null) {
+          onSelect(current);
+        }
+      },
+      enter: () => {
+        if (current != null) {
+          onSelect(current);
+        }
+      },
+      up: () => moveSelection(-GRID_COLUMNS),
+      down: () => moveSelection(GRID_COLUMNS),
+      left: () => moveSelection(-1),
+      right: () => moveSelection(1),
+    };
+    if (key.name in handlers) {
+      key.preventDefault();
+      handlers[key.name]();
+    }
+  });
+}
+
+function SearchGrid(props: {
+  readonly items: SearchItem[];
+  readonly pageStart: number;
+  readonly selectedIndex: number;
+  readonly theme?: ThemeDefinition;
+}): React.ReactNode {
+  return (
+    <box flexDirection="column" style={{ gap: 0 }}>
+      {renderSearchGrid(
+        props.items,
+        props.pageStart,
+        props.selectedIndex,
+        props.theme,
+      )}
+    </box>
+  );
+}
+
+function renderSearchGrid(
+  items: SearchItem[],
+  pageStart: number,
+  selectedIndex: number,
+  theme?: ThemeDefinition,
+): React.ReactNode[] {
+  const rows = chunkItems(items, GRID_COLUMNS);
+  const columnWidths = Array.from({ length: GRID_COLUMNS }, (_, col) =>
+    Math.max(0, ...rows.map((row) => (row.at(col)?.label.length ?? 0) + 2)),
+  );
+
+  return rows.map((row, rowIndex) => (
+    <box key={`row-${rowIndex}`} flexDirection="row" style={{ gap: 2 }}>
+      {row.map((item, index) =>
+        renderSearchItem(
+          item,
+          pageStart + rowIndex * GRID_COLUMNS + index,
+          selectedIndex,
+          columnWidths[index] ?? item.label.length + 2,
+          theme,
+        ),
+      )}
+    </box>
+  ));
+}
+
+function renderSearchItem(
+  item: SearchItem,
+  absoluteIndex: number,
+  selectedIndex: number,
+  width: number,
+  theme?: ThemeDefinition,
+): React.ReactNode {
+  const isSelected = absoluteIndex === selectedIndex;
+  return (
+    <SelectableListItem
+      key={item.id}
+      label={item.label}
+      isSelected={isSelected}
+      width={width + 2}
+      theme={theme}
+    />
+  );
+}
+
+function getPagination(
+  filtered: SearchItem[],
+  selectedIndex: number,
+): {
+  pageStart: number;
+  visible: SearchItem[];
+  startDisplay: number;
+  endDisplay: number;
+} {
+  const pageStart =
+    Math.floor(selectedIndex / SEARCH_PAGE_SIZE) * SEARCH_PAGE_SIZE;
+  const visible = filtered.slice(pageStart, pageStart + SEARCH_PAGE_SIZE);
+  const startDisplay = filtered.length === 0 ? 0 : pageStart + 1;
+  const endDisplay = Math.min(pageStart + visible.length, filtered.length);
+  return { pageStart, visible, startDisplay, endDisplay };
+}
+
+function chunkItems(list: SearchItem[], columns: number): SearchItem[][] {
+  const rows: SearchItem[][] = [];
+  for (let index = 0; index < list.length; index += columns) {
+    rows.push(list.slice(index, index + columns));
+  }
+  return rows;
+}

package/src/ui/modals/ThemeModal.tsx

@@ -0,0 +1,204 @@
+import { useKeyboard } from '@vybestack/opentui-react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { TextareaRenderable } from '@vybestack/opentui-core';
+import { useListNavigation } from '../../hooks/useListNavigation';
+import { ModalShell } from './ModalShell';
+import type { ThemeDefinition } from '../../features/theme';
+import { FilterInput } from '../components/FilterInput';
+import { SelectableListItem } from '../components/SelectableList';
+
+export interface ThemeModalProps {
+  readonly themes: ThemeDefinition[];
+  readonly current: ThemeDefinition;
+  readonly onClose: () => void;
+  readonly onSelect: (theme: ThemeDefinition) => void;
+}
+
+export function ThemeModal(props: ThemeModalProps): React.ReactNode {
+  const searchRef = useRef<TextareaRenderable | null>(null);
+  const [query, setQuery] = useState('');
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) {
+      return props.themes;
+    }
+    const normalized = query.trim().toLowerCase();
+    return props.themes.filter(
+      (theme) =>
+        theme.name.toLowerCase().includes(normalized) ||
+        theme.slug.toLowerCase().includes(normalized) ||
+        theme.kind.toLowerCase().includes(normalized),
+    );
+  }, [props.themes, query]);
+
+  const { selectedIndex, setSelectedIndex, moveSelection } = useListNavigation(
+    filtered.length,
+  );
+  const selected =
+    filtered.at(selectedIndex) ?? filtered.at(0) ?? props.current;
+
+  const handleQueryChange = useCallback((newQuery: string) => {
+    setQuery(newQuery);
+  }, []);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [query, setSelectedIndex]);
+
+  useKeyboard((key) => {
+    if (key.eventType !== 'press') {
+      return;
+    }
+    if (key.name === 'escape') {
+      props.onClose();
+      return;
+    }
+    if (filtered.length === 0) {
+      return;
+    }
+    if (key.name === 'down') {
+      key.preventDefault();
+      moveSelection(1);
+    } else if (key.name === 'up') {
+      key.preventDefault();
+      moveSelection(-1);
+    } else if (key.name === 'return' || key.name === 'enter') {
+      key.preventDefault();
+      const currentSelection = filtered.at(selectedIndex) ?? filtered.at(0);
+      if (currentSelection != null) {
+        props.onSelect(currentSelection);
+      }
+      props.onClose();
+    }
+  });
+
+  const countLabel = `Found ${filtered.length} of ${props.themes.length} themes`;
+
+  return (
+    <ModalShell
+      title="Select Theme"
+      onClose={props.onClose}
+      theme={props.current}
+    >
+      <text fg={props.current.colors.text.primary}>{countLabel}</text>
+      <box flexDirection="row" style={{ gap: 1, alignItems: 'center' }}>
+        <text fg={props.current.colors.text.primary}>Filter:</text>
+        <FilterInput
+          textareaRef={searchRef}
+          placeholder="type to filter"
+          theme={props.current}
+          onQueryChange={handleQueryChange}
+        />
+      </box>
+      <box flexDirection="row" style={{ gap: 1, height: 14 }}>
+        <ThemeList
+          themes={filtered}
+          selectedIndex={selectedIndex}
+          activeSlug={props.current.slug}
+          displayTheme={props.current}
+        />
+        <ThemePreview theme={selected} />
+      </box>
+    </ModalShell>
+  );
+}
+
+function ThemeList(props: {
+  readonly themes: ThemeDefinition[];
+  readonly selectedIndex: number;
+  readonly activeSlug: string;
+  readonly displayTheme: ThemeDefinition;
+}): React.ReactNode {
+  return (
+    <scrollbox
+      style={{
+        width: '45%',
+        border: true,
+        borderColor: props.displayTheme.colors.panel.border,
+        paddingLeft: 1,
+        paddingRight: 1,
+      }}
+      scrollY
+    >
+      <box flexDirection="column" style={{ gap: 0 }}>
+        {props.themes.map((theme, index) =>
+          renderThemeRow(
+            theme,
+            index,
+            props.selectedIndex,
+            props.activeSlug,
+            props.displayTheme,
+          ),
+        )}
+      </box>
+    </scrollbox>
+  );
+}
+
+function renderThemeRow(
+  theme: ThemeDefinition,
+  index: number,
+  selectedIndex: number,
+  activeSlug: string,
+  displayTheme: ThemeDefinition,
+): React.ReactNode {
+  const isSelected = index === selectedIndex;
+  const isActive = theme.slug === activeSlug;
+  return (
+    <SelectableListItem
+      key={theme.slug}
+      label={theme.name}
+      isSelected={isSelected}
+      isActive={isActive}
+      activeTag=" (active)"
+      theme={displayTheme}
+    />
+  );
+}
+
+function ThemePreview({
+  theme,
+}: {
+  readonly theme: ThemeDefinition;
+}): React.ReactNode {
+  return (
+    <box
+      border
+      style={{
+        flexGrow: 1,
+        padding: 1,
+        borderColor: theme.colors.panel.border,
+        backgroundColor: theme.colors.panel.bg,
+        gap: 0,
+        flexDirection: 'column',
+      }}
+    >
+      <text
+        fg={theme.colors.panel.headerFg ?? theme.colors.text.primary}
+        bg={theme.colors.panel.headerBg ?? theme.colors.panel.bg}
+      >
+        {`${theme.name} (${theme.kind})`}
+      </text>
+      <text fg={theme.colors.text.user}>[user] Hello world</text>
+      <text fg={theme.colors.text.responder}>
+        [responder] A thoughtful reply
+      </text>
+      <text fg={theme.colors.text.thinking}>
+        [thinking] Considering options...
+      </text>
+      <text fg={theme.colors.text.tool}>[tool] SearchInFile src/app.tsx</text>
+      <text fg={theme.colors.diff.addedFg} bg={theme.colors.diff.addedBg}>
+        + diff added line
+      </text>
+      <text fg={theme.colors.diff.removedFg} bg={theme.colors.diff.removedBg}>
+        - diff removed line
+      </text>
+    </box>
+  );
+}