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

package/src/features/config/llxprtConfig.ts

@@ -0,0 +1,418 @@
+import os from 'node:os';
+import path from 'node:path';
+import { ProfileManager } from '@vybestack/llxprt-code-core';
+import type { ProviderKey, SessionConfig } from './llxprtAdapter';
+import type { ConfigSessionOptions } from './configSession';
+
+export interface ConfigCommandResult {
+  readonly handled: boolean;
+  readonly nextConfig: SessionConfig;
+  readonly messages: string[];
+}
+
+export interface ConfigCommandResultWithSession extends ConfigCommandResult {
+  readonly sessionOptions?: ConfigSessionOptions;
+}
+
+interface ApplyOptions {
+  readonly profileDir?: string;
+  readonly profileManager?: Pick<
+    ProfileManager,
+    'loadProfile' | 'listProfiles'
+  >;
+}
+
+const SYNTHETIC_PROFILE_DEFAULT = path.join(
+  os.homedir(),
+  '.llxprt/profiles/synthetic.json',
+);
+
+export async function applyConfigCommand(
+  rawInput: string,
+  current: SessionConfig,
+  options?: ApplyOptions,
+): Promise<ConfigCommandResult> {
+  const trimmed = rawInput.trim();
+  if (!trimmed.startsWith('/')) {
+    return Promise.resolve({
+      handled: false,
+      nextConfig: current,
+      messages: [],
+    });
+  }
+
+  const body = trimmed.slice(1).trim();
+  if (!body) {
+    return Promise.resolve({
+      handled: false,
+      nextConfig: current,
+      messages: [],
+    });
+  }
+
+  const tokens = body.split(/\s+/).filter((token) => token.length > 0);
+  const [rawCommand, ...rest] = tokens;
+  const command = rawCommand.toLowerCase();
+  const argument = rest.join(' ').trim();
+
+  if (command === 'provider') {
+    if (!argument) {
+      return Promise.resolve({
+        handled: false,
+        nextConfig: current,
+        messages: [],
+      });
+    }
+    return Promise.resolve(applyProvider(argument, current));
+  }
+  if (command === 'baseurl' || command === 'base-url' || command === 'basurl') {
+    return Promise.resolve(applyBaseUrl(argument, current));
+  }
+  if (command === 'keyfile') {
+    return Promise.resolve(applyKeyFile(argument, current));
+  }
+  if (command === 'key') {
+    return Promise.resolve(applyKey(argument, current));
+  }
+  if (command === 'model') {
+    if (!argument) {
+      return Promise.resolve({
+        handled: false,
+        nextConfig: current,
+        messages: [],
+      });
+    }
+    return Promise.resolve(applyModel(argument, current));
+  }
+  if (command === 'profile') {
+    return applyProfile(rest, current, options);
+  }
+
+  return Promise.resolve({ handled: false, nextConfig: current, messages: [] });
+}
+
+function applyProvider(
+  argument: string,
+  current: SessionConfig,
+): ConfigCommandResult {
+  if (!argument) {
+    return {
+      handled: true,
+      nextConfig: current,
+      messages: [
+        'Provider is required. Usage: /provider <openai|gemini|anthropic>',
+      ],
+    };
+  }
+  const provider = normalizeProvider(argument);
+  if (!provider) {
+    return {
+      handled: true,
+      nextConfig: current,
+      messages: [`Unknown provider: ${argument}`],
+    };
+  }
+  return {
+    handled: true,
+    nextConfig: { ...current, provider },
+    messages: [`Provider set to ${provider}`],
+  };
+}
+
+function applyBaseUrl(
+  argument: string,
+  current: SessionConfig,
+): ConfigCommandResult {
+  if (!argument) {
+    return {
+      handled: true,
+      nextConfig: current,
+      messages: ['Base URL is required. Usage: /baseurl <url>'],
+    };
+  }
+  return {
+    handled: true,
+    nextConfig: { ...current, baseUrl: argument },
+    messages: [`Base URL set to ${argument}`],
+  };
+}
+
+function applyKeyFile(
+  argument: string,
+  current: SessionConfig,
+): ConfigCommandResult {
+  if (!argument) {
+    return {
+      handled: true,
+      nextConfig: current,
+      messages: ['Keyfile path is required. Usage: /keyfile <path>'],
+    };
+  }
+  return {
+    handled: true,
+    nextConfig: { ...current, keyFilePath: argument, apiKey: undefined },
+    messages: ['Keyfile configured'],
+  };
+}
+
+function applyKey(
+  argument: string,
+  current: SessionConfig,
+): ConfigCommandResult {
+  if (!argument) {
+    return {
+      handled: true,
+      nextConfig: current,
+      messages: ['API key is required. Usage: /key <token>'],
+    };
+  }
+  return {
+    handled: true,
+    nextConfig: { ...current, apiKey: argument, keyFilePath: undefined },
+    messages: ['API key configured'],
+  };
+}
+
+function applyModel(
+  argument: string,
+  current: SessionConfig,
+): ConfigCommandResult {
+  if (!argument) {
+    return {
+      handled: true,
+      nextConfig: current,
+      messages: ['Model is required. Usage: /model <id>'],
+    };
+  }
+  return {
+    handled: true,
+    nextConfig: { ...current, model: argument },
+    messages: [`Model set to ${argument}`],
+  };
+}
+
+interface ParsedProfileArgs {
+  readonly action: string;
+  readonly name: string;
+}
+
+interface ProfileValidationError {
+  readonly error: string;
+}
+
+type ProfileArgResult = ParsedProfileArgs | ProfileValidationError;
+
+function parseProfileArgs(args: string[]): ProfileArgResult {
+  if (args.length === 0) {
+    return { error: 'Profile name is required. Usage: /profile load <name>' };
+  }
+  const [action, name] =
+    args.length === 1 ? ['load', args[0]] : [args[0], args[1]];
+  if (action.toLowerCase() !== 'load') {
+    return { error: 'Usage: /profile load <name>' };
+  }
+  if (!name) {
+    return { error: 'Profile name is required. Usage: /profile load <name>' };
+  }
+  return { action, name };
+}
+
+export interface ProfileData {
+  readonly provider?: string;
+  readonly baseUrl?: string;
+  readonly model?: string;
+  readonly authKeyfile?: string;
+  readonly ephemeralSettings?: Record<string, unknown>;
+}
+
+function mapProfileToSessionConfig(
+  profile: ProfileData,
+): Partial<SessionConfig> | null {
+  const ephemeral = profile.ephemeralSettings ?? {};
+  const provider = normalizeProvider(profile.provider);
+  const baseUrl = (ephemeral['base-url'] ??
+    ephemeral.baseUrl ??
+    profile.baseUrl) as string | undefined;
+  const keyFilePath = (ephemeral['auth-keyfile'] ??
+    ephemeral.authKeyfile ??
+    profile.authKeyfile) as string | undefined;
+  const model = (ephemeral.model ?? profile.model) as string | undefined;
+
+  if (!provider || !baseUrl || !keyFilePath || !model) {
+    return null;
+  }
+
+  // Pass through all ephemeral settings to the session config
+  return {
+    provider,
+    baseUrl,
+    keyFilePath,
+    model,
+    apiKey: undefined,
+    ephemeralSettings: ephemeral,
+  };
+}
+
+function validateProfileConfig(
+  config: Partial<SessionConfig> | null,
+  profileName: string,
+): string | null {
+  if (config === null) {
+    return `Profile "${profileName}" is incomplete; need provider, base-url, auth-keyfile, and model.`;
+  }
+  return null;
+}
+
+async function applyProfile(
+  args: string[],
+  current: SessionConfig,
+  options?: ApplyOptions,
+): Promise<ConfigCommandResult> {
+  const parsed = parseProfileArgs(args);
+  if ('error' in parsed) {
+    return { handled: true, nextConfig: current, messages: [parsed.error] };
+  }
+
+  const profileDir =
+    options?.profileDir ?? path.dirname(SYNTHETIC_PROFILE_DEFAULT);
+  const manager = options?.profileManager ?? new ProfileManager(profileDir);
+
+  try {
+    const profile = await manager.loadProfile(parsed.name);
+    const config = mapProfileToSessionConfig(profile as unknown as ProfileData);
+    const error = validateProfileConfig(config, parsed.name);
+
+    if (error !== null) {
+      return { handled: true, nextConfig: current, messages: [error] };
+    }
+
+    return {
+      handled: true,
+      nextConfig: { ...current, ...config },
+      messages: [`Loaded profile: ${parsed.name}`],
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return {
+      handled: true,
+      nextConfig: current,
+      messages: [`Failed to load profile "${parsed.name}": ${message}`],
+    };
+  }
+}
+
+function normalizeProvider(input: string | undefined): ProviderKey | null {
+  if (!input) {
+    return null;
+  }
+  const lowered = input.trim().toLowerCase();
+  if (lowered === 'openai' || lowered === 'gemini' || lowered === 'anthropic') {
+    return lowered;
+  }
+  return null;
+}
+
+export function validateSessionConfig(
+  config: SessionConfig,
+  options?: { requireModel?: boolean },
+): string[] {
+  const messages: string[] = [];
+  if (!config.baseUrl?.trim()) {
+    messages.push('Base URL not set. Use /baseurl <url>.');
+  }
+  if (options?.requireModel !== false) {
+    if (!config.model?.trim()) {
+      messages.push('Model not set. Use /model <id>.');
+    }
+  }
+  const hasKey = Boolean(config.apiKey?.trim() ?? config.keyFilePath?.trim());
+  if (!hasKey) {
+    messages.push(
+      'API key or keyfile not set. Use /key <token> or /keyfile <path>.',
+    );
+  }
+  return messages;
+}
+
+export async function listAvailableProfiles(
+  options?: ApplyOptions,
+): Promise<string[]> {
+  const profileDir =
+    options?.profileDir ?? path.dirname(SYNTHETIC_PROFILE_DEFAULT);
+  const manager = options?.profileManager ?? new ProfileManager(profileDir);
+  try {
+    return await manager.listProfiles();
+  } catch {
+    return [];
+  }
+}
+
+export function profileToConfigOptions(
+  profile: ProfileData,
+  workingDir: string,
+): ConfigSessionOptions {
+  const ephemeral = profile.ephemeralSettings ?? {};
+
+  return {
+    model: ((ephemeral.model ?? profile.model) as string) || 'gemini-2.5-flash',
+    provider: profile.provider,
+    workingDir,
+    baseUrl: (ephemeral['base-url'] ?? ephemeral.baseUrl ?? profile.baseUrl) as
+      | string
+      | undefined,
+    authKeyfile: (ephemeral['auth-keyfile'] ??
+      ephemeral.authKeyfile ??
+      profile.authKeyfile) as string | undefined,
+    apiKey: ephemeral['auth-key'] as string | undefined,
+  };
+}
+
+interface ApplyWithSessionOptions extends ApplyOptions {
+  readonly workingDir: string;
+}
+
+export async function applyProfileWithSession(
+  rawInput: string,
+  current: SessionConfig,
+  options: ApplyWithSessionOptions,
+): Promise<ConfigCommandResultWithSession> {
+  const result = await applyConfigCommand(rawInput, current, options);
+
+  // Check if this was a profile load command
+  const trimmed = rawInput.trim();
+  if (!trimmed.startsWith('/')) {
+    return { ...result, sessionOptions: undefined };
+  }
+
+  const body = trimmed.slice(1).trim();
+  const tokens = body.split(/\s+/).filter((token) => token.length > 0);
+  const command = tokens.at(0)?.toLowerCase() ?? '';
+
+  // Only generate session options for profile commands
+  if (command !== 'profile') {
+    return { ...result, sessionOptions: undefined };
+  }
+
+  // If profile load failed or config is incomplete, don't return options
+  if (
+    !result.handled ||
+    !result.nextConfig.model ||
+    !result.nextConfig.baseUrl
+  ) {
+    return { ...result, sessionOptions: undefined };
+  }
+
+  // Convert the new config to session options
+  const sessionOptions = profileToConfigOptions(
+    {
+      provider: result.nextConfig.provider,
+      model: result.nextConfig.model,
+      baseUrl: result.nextConfig.baseUrl,
+      authKeyfile: result.nextConfig.keyFilePath,
+      ephemeralSettings: result.nextConfig.ephemeralSettings,
+    },
+    options.workingDir,
+  );
+
+  return { ...result, sessionOptions };
+}

package/src/features/theme/index.ts

@@ -0,0 +1,2 @@
+export * from './theme';
+export * from './themeManager';

package/src/features/theme/theme.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { createMockTheme } from '../../test/mockTheme';
+import { loadThemes } from './theme';
+import type { ThemeColors } from './theme';
+
+describe('ThemeColors message properties', () => {
+  it('should require message.userBorder property', () => {
+    const mockTheme = createMockTheme();
+    expect(mockTheme.colors.message.userBorder).toBeDefined();
+    expect(typeof mockTheme.colors.message.userBorder).toBe('string');
+  });
+
+  it('should require message.systemBorder property', () => {
+    const mockTheme = createMockTheme();
+    expect(mockTheme.colors.message.systemBorder).toBeDefined();
+    expect(typeof mockTheme.colors.message.systemBorder).toBe('string');
+  });
+
+  it('should require message.systemText property', () => {
+    const mockTheme = createMockTheme();
+    expect(mockTheme.colors.message.systemText).toBeDefined();
+    expect(typeof mockTheme.colors.message.systemText).toBe('string');
+  });
+
+  it('should accept optional message.groupSpacing property', () => {
+    const mockTheme = createMockTheme();
+    // groupSpacing is optional, so undefined is valid
+    const groupSpacing = (
+      mockTheme.colors.message as ThemeColors['message'] & {
+        groupSpacing?: number;
+      }
+    ).groupSpacing;
+    // Either undefined or a number is valid
+    expect(groupSpacing === undefined || typeof groupSpacing === 'number').toBe(
+      true,
+    );
+  });
+});
+
+describe('loadThemes', () => {
+  it('should load themes with message color properties', () => {
+    const themes = loadThemes();
+    // Verify themes can be loaded
+    expect(themes.length).toBeGreaterThan(0);
+    // Verify first theme has message properties (all themes should have them)
+    expect(themes[0].colors.message).toBeDefined();
+    expect(themes[0].colors.message.userBorder).toBeDefined();
+    expect(themes[0].colors.message.systemBorder).toBeDefined();
+    expect(themes[0].colors.message.systemText).toBeDefined();
+  });
+});

package/src/features/theme/theme.ts

@@ -0,0 +1,105 @@
+import { readFileSync, readdirSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { getLogger } from '../../lib/logger';
+
+export type ThemeKind = 'light' | 'dark' | 'ansi' | 'custom';
+
+export interface ThemeColors {
+  readonly background: string;
+  readonly panel: {
+    readonly bg: string;
+    readonly border: string;
+    readonly headerBg?: string;
+    readonly headerFg?: string;
+  };
+  readonly text: {
+    readonly primary: string;
+    readonly muted: string;
+    readonly user: string;
+    readonly responder: string;
+    readonly thinking: string;
+    readonly tool: string;
+  };
+  readonly input: {
+    readonly bg: string;
+    readonly fg: string;
+    readonly placeholder: string;
+    readonly border: string;
+  };
+  readonly status: {
+    readonly fg: string;
+    readonly muted?: string;
+  };
+  readonly accent: {
+    readonly primary: string;
+    readonly secondary?: string;
+    readonly warning?: string;
+    readonly error?: string;
+    readonly success?: string;
+  };
+  readonly selection: {
+    readonly fg: string;
+    readonly bg: string;
+  };
+  readonly diff: {
+    readonly addedBg: string;
+    readonly addedFg: string;
+    readonly removedBg: string;
+    readonly removedFg: string;
+  };
+  readonly scrollbar?: {
+    readonly thumb: string;
+    readonly track: string;
+  };
+  readonly message: {
+    readonly userBorder: string;
+    readonly systemBorder: string;
+    readonly systemText: string;
+    readonly systemBg?: string;
+  };
+}
+
+export interface ThemeDefinition {
+  readonly name: string;
+  readonly slug: string;
+  readonly kind: ThemeKind;
+  readonly colors: ThemeColors;
+}
+
+// Get the directory of this source file, then navigate to themes directory
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const THEMES_DIR = path.resolve(__dirname, '../../../themes');
+export const DEFAULT_THEME_SLUG = 'green-screen';
+
+const logger = getLogger('nui:theme');
+
+export function loadThemes(): ThemeDefinition[] {
+  try {
+    const files = readdirSync(THEMES_DIR).filter((file) =>
+      file.endsWith('.json'),
+    );
+    const themes: ThemeDefinition[] = files.map((file) => {
+      const fullPath = path.join(THEMES_DIR, file);
+      const raw = JSON.parse(readFileSync(fullPath, 'utf8')) as ThemeDefinition;
+      return { ...raw, slug: raw.slug || path.basename(file, '.json') };
+    });
+    return themes;
+  } catch (error) {
+    logger.error('Failed to load themes:', error);
+    return [];
+  }
+}
+
+export function findTheme(
+  themes: ThemeDefinition[],
+  key: string,
+): ThemeDefinition | undefined {
+  const normalized = key.trim().toLowerCase();
+  return themes.find(
+    (theme) =>
+      theme.slug.toLowerCase() === normalized ||
+      theme.name.toLowerCase() === normalized,
+  );
+}

package/src/features/theme/themeManager.ts

@@ -0,0 +1,84 @@
+import { useMemo, useState, useCallback } from 'react';
+import type { ThemeDefinition } from './theme';
+import { DEFAULT_THEME_SLUG, findTheme, loadThemes } from './theme';
+
+export interface ThemeState {
+  readonly themes: ThemeDefinition[];
+  readonly theme: ThemeDefinition;
+  readonly setThemeBySlug: (slug: string) => void;
+}
+
+export function useThemeManager(): ThemeState {
+  const themes = useMemo(() => loadThemes(), []);
+  const fallback = useMemo(() => selectInitialTheme(themes), [themes]);
+  const [theme, setTheme] = useState<ThemeDefinition>(fallback);
+
+  const setThemeBySlug = useCallback(
+    (slug: string) => {
+      const next = findTheme(themes, slug);
+      if (next) {
+        setTheme(next);
+      }
+    },
+    [themes],
+  );
+
+  return { themes, theme, setThemeBySlug };
+}
+
+function selectInitialTheme(themes: ThemeDefinition[]): ThemeDefinition {
+  if (themes.length === 0) {
+    return {
+      name: 'Fallback',
+      slug: 'fallback',
+      kind: 'dark',
+      colors: {
+        background: '#0f172a',
+        panel: {
+          bg: '#0f172a',
+          border: '#475569',
+          headerBg: '#0f172a',
+          headerFg: '#e5e7eb',
+        },
+        text: {
+          primary: '#e5e7eb',
+          muted: '#94a3b8',
+          user: '#7dd3fc',
+          responder: '#facc15',
+          thinking: '#94a3b8',
+          tool: '#c084fc',
+        },
+        input: {
+          bg: '#0f172a',
+          fg: '#e5e7eb',
+          placeholder: '#94a3b8',
+          border: '#475569',
+        },
+        status: { fg: '#a3e635', muted: '#94a3b8' },
+        accent: {
+          primary: '#38bdf8',
+          secondary: '#a78bfa',
+          warning: '#facc15',
+          error: '#ef4444',
+          success: '#22c55e',
+        },
+        selection: { fg: '#0f172a', bg: '#38bdf8' },
+        diff: {
+          addedBg: '#166534',
+          addedFg: '#e5e7eb',
+          removedBg: '#7f1d1d',
+          removedFg: '#e5e7eb',
+        },
+        scrollbar: { thumb: '#38bdf8', track: '#475569' },
+        message: {
+          userBorder: '#7dd3fc',
+          systemBorder: '#facc15',
+          systemText: '#facc15',
+          systemBg: '#0f172a',
+        },
+      },
+    };
+  }
+  const preferred = findTheme(themes, DEFAULT_THEME_SLUG);
+  return preferred ?? themes[0];
+}