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

package/src/ui/components/CommandComponents.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import type { SessionConfig } from '../../features/config';
+import type { ThemeDefinition } from '../../features/theme';
+import type { SearchItem } from '../modals/types';
+import { ModelCommand } from '../../commands/ModelCommand';
+import { ProviderCommand } from '../../commands/ProviderCommand';
+import { ThemeCommand } from '../../commands/ThemeCommand';
+import { AuthCommand } from '../../commands/AuthCommand';
+
+interface CommandComponentsProps {
+  readonly fetchModelItems: () => Promise<{
+    items: SearchItem[];
+    messages?: string[];
+  }>;
+  readonly fetchProviderItems: () => Promise<{
+    items: SearchItem[];
+    messages?: string[];
+  }>;
+  readonly sessionConfig: SessionConfig;
+  readonly setSessionConfig: (config: SessionConfig) => void;
+  readonly appendMessage: (
+    role: 'user' | 'model' | 'system',
+    text: string,
+  ) => string;
+  readonly themes: ThemeDefinition[];
+  readonly currentTheme: ThemeDefinition;
+  readonly onThemeSelect: (theme: ThemeDefinition) => void;
+  readonly focusInput: () => void;
+}
+
+export function CommandComponents({
+  fetchModelItems,
+  fetchProviderItems,
+  sessionConfig,
+  setSessionConfig,
+  appendMessage,
+  themes,
+  currentTheme,
+  onThemeSelect,
+  focusInput,
+}: CommandComponentsProps): React.ReactNode {
+  return (
+    <>
+      <ModelCommand
+        fetchModelItems={fetchModelItems}
+        sessionConfig={sessionConfig}
+        setSessionConfig={setSessionConfig}
+        appendMessage={appendMessage}
+        theme={currentTheme}
+        focusInput={focusInput}
+      />
+      <ProviderCommand
+        fetchProviderItems={fetchProviderItems}
+        sessionConfig={sessionConfig}
+        setSessionConfig={setSessionConfig}
+        appendMessage={appendMessage}
+        theme={currentTheme}
+        focusInput={focusInput}
+      />
+      <ThemeCommand
+        themes={themes}
+        currentTheme={currentTheme}
+        onThemeSelect={onThemeSelect}
+        appendMessage={appendMessage}
+        focusInput={focusInput}
+      />
+      <AuthCommand
+        appendMessage={appendMessage}
+        theme={currentTheme}
+        focusInput={focusInput}
+      />
+    </>
+  );
+}

package/src/ui/components/DiffViewer.tsx

@@ -0,0 +1,306 @@
+import React from 'react';
+import { useMemo } from 'react';
+import type { ThemeDefinition } from '../../features/theme';
+
+interface DiffLine {
+  type: 'add' | 'del' | 'context' | 'hunk' | 'other';
+  oldLine?: number;
+  newLine?: number;
+  content: string;
+}
+
+interface ParsedDiffState {
+  currentOldLine: number;
+  currentNewLine: number;
+  inHunk: boolean;
+}
+
+// Precompiled regex - simpler pattern that's not vulnerable to backtracking
+const HUNK_HEADER_REGEX = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/;
+
+function isGitHeaderLine(line: string): boolean {
+  return (
+    line.startsWith('--- ') ||
+    line.startsWith('+++ ') ||
+    line.startsWith('diff --git') ||
+    line.startsWith('index ') ||
+    line.startsWith('similarity index') ||
+    line.startsWith('rename from') ||
+    line.startsWith('rename to') ||
+    line.startsWith('new file mode') ||
+    line.startsWith('deleted file mode')
+  );
+}
+
+function parseHunkHeader(
+  line: string,
+): { oldStart: number; newStart: number } | null {
+  const execResult = HUNK_HEADER_REGEX.exec(line);
+  if (!execResult) {
+    return null;
+  }
+  const oldMatch = execResult[1];
+  const newMatch = execResult[2];
+  return {
+    oldStart: parseInt(oldMatch, 10) - 1,
+    newStart: parseInt(newMatch, 10) - 1,
+  };
+}
+
+function parseDiffLine(
+  line: string,
+  state: ParsedDiffState,
+): { diffLine: DiffLine | null; newState: ParsedDiffState } {
+  const hunk = parseHunkHeader(line);
+  if (hunk) {
+    return {
+      diffLine: { type: 'hunk', content: line },
+      newState: {
+        currentOldLine: hunk.oldStart,
+        currentNewLine: hunk.newStart,
+        inHunk: true,
+      },
+    };
+  }
+
+  if (!state.inHunk || isGitHeaderLine(line)) {
+    return { diffLine: null, newState: state };
+  }
+
+  if (line.startsWith('+')) {
+    const newLine = state.currentNewLine + 1;
+    return {
+      diffLine: { type: 'add', newLine, content: line.substring(1) },
+      newState: { ...state, currentNewLine: newLine },
+    };
+  }
+
+  if (line.startsWith('-')) {
+    const oldLine = state.currentOldLine + 1;
+    return {
+      diffLine: { type: 'del', oldLine, content: line.substring(1) },
+      newState: { ...state, currentOldLine: oldLine },
+    };
+  }
+
+  if (line.startsWith(' ')) {
+    const oldLine = state.currentOldLine + 1;
+    const newLine = state.currentNewLine + 1;
+    return {
+      diffLine: {
+        type: 'context',
+        oldLine,
+        newLine,
+        content: line.substring(1),
+      },
+      newState: { ...state, currentOldLine: oldLine, currentNewLine: newLine },
+    };
+  }
+
+  if (line.startsWith('\\')) {
+    return { diffLine: { type: 'other', content: line }, newState: state };
+  }
+
+  return { diffLine: null, newState: state };
+}
+
+function parseDiff(diffContent: string): DiffLine[] {
+  const lines = diffContent.split('\n');
+  const result: DiffLine[] = [];
+  let state: ParsedDiffState = {
+    currentOldLine: 0,
+    currentNewLine: 0,
+    inHunk: false,
+  };
+
+  for (const line of lines) {
+    const { diffLine, newState } = parseDiffLine(line, state);
+    state = newState;
+    if (diffLine) {
+      result.push(diffLine);
+    }
+  }
+  return result;
+}
+
+export interface DiffViewerProps {
+  readonly diffContent: string;
+  readonly filename?: string;
+  readonly maxHeight?: number;
+  readonly theme?: ThemeDefinition;
+}
+
+interface DiffColors {
+  addedBg: string;
+  addedFg: string;
+  removedBg: string;
+  removedFg: string;
+  contextFg: string;
+  gutterFg: string;
+  borderColor: string;
+  primaryFg: string;
+}
+
+function getDefaultColors(): DiffColors {
+  return {
+    addedBg: '#1a3318',
+    addedFg: '#00ff00',
+    removedBg: '#3a1a1a',
+    removedFg: '#ff6b6b',
+    contextFg: '#888888',
+    gutterFg: '#666666',
+    borderColor: '#444444',
+    primaryFg: '#ffffff',
+  };
+}
+
+function getColorsFromTheme(theme: ThemeDefinition | undefined): DiffColors {
+  if (!theme) {
+    return getDefaultColors();
+  }
+  // Theme properties are guaranteed to exist per ThemeColors interface
+  return {
+    addedBg: theme.colors.diff.addedBg,
+    addedFg: theme.colors.diff.addedFg,
+    removedBg: theme.colors.diff.removedBg,
+    removedFg: theme.colors.diff.removedFg,
+    contextFg: theme.colors.text.muted,
+    gutterFg: theme.colors.text.muted,
+    borderColor: theme.colors.panel.border,
+    primaryFg: theme.colors.text.primary,
+  };
+}
+
+function getLinePrefix(lineType: DiffLine['type']): string {
+  switch (lineType) {
+    case 'add':
+      return '+';
+    case 'del':
+      return '-';
+    case 'context':
+    case 'hunk':
+    case 'other':
+      return ' ';
+  }
+}
+
+interface DiffLineProps {
+  readonly line: DiffLine;
+  readonly index: number;
+  readonly gutterWidth: number;
+  readonly colors: DiffColors;
+}
+
+function DiffLineRow({
+  line,
+  index,
+  gutterWidth,
+  colors,
+}: DiffLineProps): React.ReactNode {
+  const lineNum = line.type === 'del' ? line.oldLine : line.newLine;
+  const lineNumStr = (lineNum ?? '').toString().padStart(gutterWidth);
+  const prefix = getLinePrefix(line.type);
+
+  let lineFg = colors.contextFg;
+  let lineBg: string | undefined;
+  if (line.type === 'add') {
+    lineFg = colors.addedFg;
+    lineBg = colors.addedBg;
+  } else if (line.type === 'del') {
+    lineFg = colors.removedFg;
+    lineBg = colors.removedBg;
+  }
+
+  const textProps =
+    lineBg !== undefined ? { fg: lineFg, bg: lineBg } : { fg: lineFg };
+
+  return (
+    <box
+      key={`diff-line-${index}`}
+      flexDirection="row"
+      style={{ width: '100%' }}
+    >
+      <text fg={colors.gutterFg}>{lineNumStr} </text>
+      <text {...textProps}>
+        {prefix} {line.content}
+      </text>
+    </box>
+  );
+}
+
+export function DiffViewer(props: DiffViewerProps): React.ReactNode {
+  const { diffContent, filename, maxHeight = 15, theme } = props;
+
+  const parsedLines = useMemo(() => parseDiff(diffContent), [diffContent]);
+  const colors = useMemo(() => getColorsFromTheme(theme), [theme]);
+
+  const displayableLines = useMemo(
+    () => parsedLines.filter((l) => l.type !== 'hunk' && l.type !== 'other'),
+    [parsedLines],
+  );
+
+  const gutterWidth = useMemo(() => {
+    const maxLineNumber = Math.max(
+      0,
+      ...displayableLines.map((l) => l.oldLine ?? 0),
+      ...displayableLines.map((l) => l.newLine ?? 0),
+    );
+    return Math.max(3, maxLineNumber.toString().length);
+  }, [displayableLines]);
+
+  if (!diffContent || diffContent.trim() === '') {
+    return (
+      <box border style={{ padding: 1, borderColor: colors.borderColor }}>
+        <text fg={colors.contextFg}>No diff content.</text>
+      </box>
+    );
+  }
+
+  if (displayableLines.length === 0) {
+    return (
+      <box border style={{ padding: 1, borderColor: colors.borderColor }}>
+        <text fg={colors.contextFg}>No changes detected.</text>
+      </box>
+    );
+  }
+
+  const needsScroll = displayableLines.length > maxHeight;
+
+  const content = (
+    <box flexDirection="column" style={{ gap: 0, width: '100%' }}>
+      {filename && (
+        <text key="filename" fg={colors.primaryFg}>
+          <b>{filename}</b>
+        </text>
+      )}
+      {displayableLines.map((line, index) => (
+        <DiffLineRow
+          key={`line-${index}`}
+          line={line}
+          index={index}
+          gutterWidth={gutterWidth}
+          colors={colors}
+        />
+      ))}
+    </box>
+  );
+
+  if (needsScroll) {
+    return (
+      <scrollbox
+        style={{
+          height: maxHeight,
+          maxHeight,
+          borderColor: colors.borderColor,
+          overflow: 'hidden',
+        }}
+        scrollY
+        scrollX={false}
+      >
+        {content}
+      </scrollbox>
+    );
+  }
+
+  return content;
+}

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

@@ -0,0 +1,69 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { FilterInputProps } from './FilterInput';
+import type { ThemeDefinition } from '../../features/theme';
+
+describe('FilterInput', () => {
+  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', () => {
+    const onQueryChange = vi.fn();
+    const props: Omit<FilterInputProps, 'textareaRef'> = {
+      placeholder: 'type to filter',
+      theme: mockTheme,
+      onQueryChange,
+    };
+    expect(props.placeholder).toBe('type to filter');
+    expect(props.onQueryChange).toBe(onQueryChange);
+  });
+
+  it('requires onQueryChange callback', () => {
+    const onQueryChange = vi.fn();
+    expect(onQueryChange).toBeDefined();
+  });
+});

package/src/ui/components/FilterInput.tsx

@@ -0,0 +1,62 @@
+import type { TextareaRenderable } from '@vybestack/opentui-core';
+import { parseColor, stringToStyledText } from '@vybestack/opentui-core';
+import React, { useCallback, useEffect, useMemo, type RefObject } from 'react';
+import type { ThemeDefinition } from '../../features/theme';
+
+export interface FilterInputProps {
+  readonly textareaRef: RefObject<TextareaRenderable | null>;
+  readonly placeholder: string;
+  readonly theme?: ThemeDefinition;
+  readonly onQueryChange: (query: string) => void;
+}
+
+export function FilterInput(props: FilterInputProps): React.ReactNode {
+  const placeholderText = useMemo(() => {
+    const base = stringToStyledText(props.placeholder);
+    const fg = parseColor(
+      props.theme?.colors.input.placeholder ??
+        props.theme?.colors.text.muted ??
+        '#888888',
+    );
+    return { ...base, chunks: base.chunks.map((chunk) => ({ ...chunk, fg })) };
+  }, [
+    props.placeholder,
+    props.theme?.colors.input.placeholder,
+    props.theme?.colors.text.muted,
+  ]);
+
+  const handleSubmit = useCallback(() => undefined, []);
+
+  const handleContentChange = useCallback(() => {
+    props.onQueryChange(props.textareaRef.current?.plainText ?? '');
+  }, [props]);
+
+  const handleCursorChange = useCallback(() => {
+    props.onQueryChange(props.textareaRef.current?.plainText ?? '');
+  }, [props]);
+
+  useEffect(() => {
+    props.textareaRef.current?.focus();
+  }, [props.textareaRef]);
+
+  return (
+    <textarea
+      ref={props.textareaRef}
+      placeholder={placeholderText}
+      keyBindings={[{ name: 'return', action: 'submit' }]}
+      onSubmit={handleSubmit}
+      onContentChange={handleContentChange}
+      onCursorChange={handleCursorChange}
+      style={{
+        height: 1,
+        width: '90%',
+        minHeight: 1,
+        maxHeight: 1,
+      }}
+      textColor={props.theme?.colors.input.fg}
+      focusedTextColor={props.theme?.colors.input.fg}
+      backgroundColor={props.theme?.colors.input.bg}
+      focusedBackgroundColor={props.theme?.colors.input.bg}
+    />
+  );
+}

package/src/ui/components/HeaderBar.tsx

@@ -0,0 +1,137 @@
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import React from 'react';
+import { useRenderer } from '@vybestack/opentui-react';
+import { useEffect, useState } from 'react';
+import type { ThemeDefinition } from '../../features/theme';
+import { getLogger } from '../../lib/logger';
+
+const logger = getLogger('nui:headerbar');
+
+// Get the directory of this source file, then navigate to the logo
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const LOGO_PATH = path.resolve(__dirname, '../../../llxprt.png');
+
+logger.debug('HeaderBar module loaded', {
+  __filename,
+  __dirname,
+  LOGO_PATH,
+  logoExists: existsSync(LOGO_PATH),
+});
+const LOGO_PX_WIDTH = 150;
+const LOGO_PX_HEIGHT = 90;
+
+interface HeaderBarProps {
+  readonly text: string;
+  readonly theme: ThemeDefinition;
+}
+
+export function HeaderBar({ text, theme }: HeaderBarProps): React.ReactNode {
+  const renderer = useRenderer();
+
+  const caps = renderer.capabilities as {
+    pixelResolution?: { width: number; height: number };
+  } | null;
+  const resolution = caps?.pixelResolution ?? renderer.resolution ?? null;
+  const cellMetrics = renderer.getCellMetrics() ?? null;
+
+  // Log graphics support and resolution detection
+  logger.debug('HeaderBar render', {
+    graphicsSupport: renderer.graphicsSupport,
+    termProgram: process.env.TERM_PROGRAM,
+    term: process.env.TERM,
+    resolution,
+    cellMetrics,
+    rendererResolution: renderer.resolution,
+    terminalWidth: renderer.terminalWidth,
+    terminalHeight: renderer.terminalHeight,
+  });
+  const [, setTick] = useState(0);
+
+  useEffect(() => {
+    const refresh = () => setTick((t) => t + 1);
+    renderer.on('capabilities', refresh);
+    renderer.on('pixelResolution', refresh);
+    renderer.on('resize', refresh);
+    return () => {
+      renderer.off('capabilities', refresh);
+      renderer.off('pixelResolution', refresh);
+      renderer.off('resize', refresh);
+    };
+  }, [renderer]);
+
+  const pxPerCellX =
+    resolution && renderer.terminalWidth > 0
+      ? resolution.width / renderer.terminalWidth
+      : null;
+  const pxPerCellY =
+    resolution && renderer.terminalHeight > 0
+      ? resolution.height / renderer.terminalHeight
+      : null;
+  const desiredCellHeight = 2;
+  const scaleFactor = 0.9; // modest shrink to keep it inside the border
+  const fallbackPxPerCellX = 9;
+  const fallbackPxPerCellY = 20;
+  const scaledPixelHeight = Math.round(
+    pxPerCellY != null
+      ? Math.min(
+          LOGO_PX_HEIGHT * scaleFactor,
+          pxPerCellY * desiredCellHeight * scaleFactor,
+        )
+      : LOGO_PX_HEIGHT * scaleFactor,
+  );
+  const scaledPixelWidth = Math.max(
+    1,
+    Math.round((scaledPixelHeight * LOGO_PX_WIDTH) / LOGO_PX_HEIGHT),
+  );
+  const effPxPerCellX = pxPerCellX ?? fallbackPxPerCellX;
+  const effPxPerCellY = pxPerCellY ?? fallbackPxPerCellY;
+  const logoWidthCells = Math.max(
+    1,
+    Math.ceil(scaledPixelWidth / effPxPerCellX),
+  );
+  const logoHeightCells = Math.max(
+    1,
+    Math.ceil(scaledPixelHeight / effPxPerCellY),
+  );
+  const headerHeight = Math.max(logoHeightCells + 1, 3);
+
+  return (
+    <box
+      style={{
+        border: true,
+        height: headerHeight,
+        minHeight: headerHeight,
+        maxHeight: headerHeight,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        borderColor: theme.colors.panel.border,
+        backgroundColor: theme.colors.panel.headerBg ?? theme.colors.panel.bg,
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: 0,
+        justifyContent: 'flex-start',
+      }}
+    >
+      <image
+        src={LOGO_PATH}
+        alt="LLxprt Code"
+        width={logoWidthCells}
+        height={logoHeightCells}
+        pixelWidth={scaledPixelWidth}
+        pixelHeight={scaledPixelHeight}
+        style={{ marginRight: 1 }}
+      />
+      <text
+        fg={theme.colors.panel.headerFg ?? theme.colors.text.primary}
+        style={{ marginLeft: 1, alignSelf: 'center' }}
+      >
+        {text}
+      </text>
+    </box>
+  );
+}