codex-linux 1.0.0

package/src/renderer/components/ui/Skeleton.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+function Skeleton({ className, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        'animate-pulse rounded-md bg-neutral-200',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface SkeletonCardProps {
+  lines?: number;
+  className?: string;
+}
+
+function SkeletonCard({ lines = 3, className }: SkeletonCardProps) {
+  return (
+    <div className={cn('space-y-3 p-6', className)}>
+      <Skeleton className="h-5 w-2/3" />
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} className="h-4 w-full" />
+      ))}
+    </div>
+  );
+}
+
+interface SkeletonTextProps {
+  lines?: number;
+  className?: string;
+}
+
+function SkeletonText({ lines = 2, className }: SkeletonTextProps) {
+  return (
+    <div className={cn('space-y-2', className)}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton
+          key={i}
+          className="h-4 w-full"
+          style={{ width: i === lines - 1 ? '75%' : '100%' }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export { Skeleton, SkeletonCard, SkeletonText };

package/src/renderer/components/ui/VirtualList.tsx

@@ -0,0 +1,196 @@
+import React, { useState, useEffect, useRef, useCallback, CSSProperties } from 'react';
+
+export interface VirtualListItem<T> {
+  id: string;
+  data: T;
+}
+
+export interface VirtualListProps<T> {
+  items: VirtualListItem<T>[];
+  height: number;
+  itemHeight: number;
+  renderItem: (item: VirtualListItem<T>, index: number) => React.ReactNode;
+  overscan?: number;
+  className?: string;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  role?: string;
+  ariaLabel?: string;
+}
+
+export function VirtualList<T>({
+  items,
+  height,
+  itemHeight,
+  renderItem,
+  overscan = 3,
+  className = '',
+  onEndReached,
+  onEndReachedThreshold = 200,
+  role = 'list',
+  ariaLabel
+}: VirtualListProps<T>) {
+  const [scrollTop, setScrollTop] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const totalHeight = items.length * itemHeight;
+  
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const endIndex = Math.min(
+    items.length - 1,
+    Math.ceil((scrollTop + height) / itemHeight) + overscan
+  );
+
+  const visibleItems = items.slice(startIndex, endIndex + 1);
+  
+  const offsetY = startIndex * itemHeight;
+
+  const handleScroll = useCallback((e: Event) => {
+    const target = e.target as HTMLDivElement;
+    setScrollTop(target.scrollTop);
+    
+    if (onEndReached) {
+      const { scrollTop: st, scrollHeight: sh, clientHeight: ch } = target;
+      const distanceFromBottom = sh - st - ch;
+      
+      if (distanceFromBottom <= onEndReachedThreshold) {
+        onEndReached();
+      }
+    }
+  }, [onEndReached, onEndReachedThreshold]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, [handleScroll]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`overflow-auto ${className}`}
+      style={{ height }}
+      role={role}
+      aria-label={ariaLabel}
+    >
+      <div
+        style={{
+          height: totalHeight,
+          position: 'relative'
+        } as CSSProperties}
+      >
+        <div
+          style={{
+            transform: `translateY(${offsetY}px)`
+          } as CSSProperties}
+        >
+          {visibleItems.map((item, index) => (
+            <div
+              key={item.id}
+              style={{ height: itemHeight }}
+              role="listitem"
+            >
+              {renderItem(item, startIndex + index)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export interface VirtualGridProps<T> {
+  items: T[];
+  height: number;
+  columns: number;
+  renderItem: (item: T, index: number) => React.ReactNode;
+  overscan?: number;
+  className?: string;
+  gap?: number;
+}
+
+export function VirtualGrid<T>({
+  items,
+  height,
+  columns,
+  renderItem,
+  overscan = 2,
+  className = '',
+  gap = 8
+}: VirtualGridProps<T>) {
+  const [scrollTop, setScrollTop] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemHeight = 80;
+
+  const rowHeight = itemHeight + gap;
+  const totalRows = Math.ceil(items.length / columns);
+  const totalHeight = totalRows * rowHeight;
+
+  const startRow = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const endRow = Math.min(
+    totalRows - 1,
+    Math.ceil((scrollTop + height) / rowHeight) + overscan
+  );
+
+  const startIndex = startRow * columns;
+  const endIndex = Math.min(items.length - 1, (endRow + 1) * columns - 1);
+
+  const visibleItems = items.slice(startIndex, endIndex + 1);
+  const offsetY = startRow * rowHeight;
+
+  const handleScroll = useCallback((e: Event) => {
+    const target = e.target as HTMLDivElement;
+    setScrollTop(target.scrollTop);
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, [handleScroll]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`overflow-auto ${className}`}
+      style={{ height }}
+      role="grid"
+    >
+      <div
+        style={{
+          height: totalHeight,
+          display: 'grid',
+          gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          gap: `${gap}px`,
+          position: 'relative'
+        } as CSSProperties}
+      >
+        <div
+          style={{
+            transform: `translateY(${offsetY}px)`,
+            gridColumn: '1 / -1',
+            display: 'grid',
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+            gap: `${gap}px`
+          } as CSSProperties}
+        >
+          {visibleItems.map((item, index) => (
+            <div
+              key={startIndex + index}
+              style={{ height: itemHeight }}
+              role="gridcell"
+            >
+              {renderItem(item, startIndex + index)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default VirtualList;

package/src/renderer/i18n/I18nProvider.tsx

@@ -0,0 +1,101 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
+import { 
+  Language, 
+  TranslationKeys, 
+  getTranslation, 
+  detectLanguage, 
+  languageNames,
+  defaultLanguage 
+} from './index';
+
+interface I18nContextType {
+  language: Language;
+  t: TranslationKeys;
+  setLanguage: (lang: Language) => void;
+  availableLanguages: typeof languageNames;
+  isRTL: boolean;
+  dir: 'ltr' | 'rtl';
+}
+
+const RTL_LANGUAGES = ['ar', 'he', 'fa', 'ur'] as const;
+
+export function isRTL(lang: string): boolean {
+  return RTL_LANGUAGES.includes(lang as typeof RTL_LANGUAGES[number]);
+}
+
+const I18nContext = createContext<I18nContextType | undefined>(undefined);
+
+interface I18nProviderProps {
+  children: ReactNode;
+  initialLanguage?: Language;
+}
+
+export function I18nProvider({ 
+  children, 
+  initialLanguage 
+}: I18nProviderProps) {
+  const [language, setLanguageState] = useState<Language>(() => {
+    if (initialLanguage) return initialLanguage;
+    
+    const stored = localStorage.getItem('codex-language');
+    if (stored && ['en', 'fr', 'es', 'de'].includes(stored)) {
+      return stored as Language;
+    }
+    return detectLanguage();
+  });
+
+  const [t, setT] = useState<TranslationKeys>(() => getTranslation(language));
+
+  useEffect(() => {
+    const translation = getTranslation(language);
+    setT(translation);
+    localStorage.setItem('codex-language', language);
+    
+    document.documentElement.lang = language;
+    document.documentElement.setAttribute('data-lang', language);
+    document.documentElement.dir = isRTL(language) ? 'rtl' : 'ltr';
+  }, [language]);
+
+  const setLanguage = useCallback((lang: Language) => {
+    setLanguageState(lang);
+  }, []);
+
+  const dir = isRTL(language) ? 'rtl' : 'ltr';
+
+  return (
+    <I18nContext.Provider value={{ 
+      language, 
+      t, 
+      setLanguage,
+      availableLanguages: languageNames,
+      isRTL: isRTL(language),
+      dir
+    }}>
+      <div dir={dir}>
+        {children}
+      </div>
+    </I18nContext.Provider>
+  );
+}
+
+export function useI18n(): I18nContextType {
+  const context = useContext(I18nContext);
+  
+  if (!context) {
+    throw new Error('useI18n must be used within an I18nProvider');
+  }
+  
+  return context;
+}
+
+export function useTranslation() {
+  const { t, language, setLanguage, availableLanguages, isRTL } = useI18n();
+  
+  return {
+    t,
+    language,
+    setLanguage,
+    availableLanguages,
+    isRTL
+  };
+}

package/src/renderer/i18n/de.ts

@@ -0,0 +1,161 @@
+export const de = {
+  app: {
+    name: 'Codex Linux',
+    loading: 'Codex wird geladen...',
+    offline: 'Sie sind offline',
+    online: 'Wieder online'
+  },
+  sidebar: {
+    agents: 'Agenten',
+    worktrees: 'Arbeitsbäume',
+    skills: 'Fähigkeiten',
+    automations: 'Automatisierungen',
+    settings: 'Einstellungen'
+  },
+  agents: {
+    title: 'Agenten',
+    description: 'Verwalten Sie Ihre KI-Codierungsagenten',
+    create: 'Neuer Agent',
+    delete: 'Agent löschen',
+    start: 'Starten',
+    stop: 'Stoppen',
+    running: 'läuft',
+    idle: 'inaktiv',
+    error: 'Fehler',
+    name: 'Agentenname',
+    model: 'Modell',
+    skills: 'Fähigkeiten',
+    worktree: 'Arbeitsbaum',
+    status: 'Status',
+    lastActivity: 'Letzte Aktivität',
+    noAgents: 'Keine Agenten',
+    createFirst: 'Erstellen Sie Ihren ersten Agenten'
+  },
+  worktrees: {
+    title: 'Arbeitsbäume',
+    description: 'Isolierte Git-Arbeitsbereiche',
+    create: 'Neuer Arbeitsbaum',
+    delete: 'Arbeitsbaum löschen',
+    name: 'Arbeitsbaumname',
+    branch: 'Branch',
+    path: 'Pfad',
+    noWorktrees: 'Keine Arbeitsbäume'
+  },
+  skills: {
+    title: 'Fähigkeiten',
+    description: 'Wiederverwendbare KI-Fähigkeiten',
+    create: 'Neue Fähigkeit',
+    delete: 'Fähigkeit löschen',
+    name: 'Fähigkeitsname',
+    description_label: 'Beschreibung',
+    instructions: 'Anweisungen',
+    tags: 'Tags',
+    noSkills: 'Keine Fähigkeiten',
+    builtIn: 'Eingebaut',
+    custom: 'Benutzerdefiniert'
+  },
+  automations: {
+    title: 'Automatisierungen',
+    description: 'Geplante Aufgaben und Workflows',
+    create: 'Neue Automatisierung',
+    delete: 'Automatisierung löschen',
+    run: 'Jetzt ausführen',
+    pause: 'Pausieren',
+    resume: 'Fortsetzen',
+    name: 'Automatisierungsname',
+    schedule: 'Zeitplan',
+    command: 'Befehl',
+    trigger: 'Auslöser',
+    lastRun: 'Letzte Ausführung',
+    nextRun: 'Nächste Ausführung',
+    noAutomations: 'Keine Automatisierungen',
+    cron: 'Cron-Ausdruck',
+    manual: 'Manuell',
+    interval: 'Intervall'
+  },
+  settings: {
+    title: 'Einstellungen',
+    description: 'Konfigurieren Sie Ihre Präferenzen',
+    general: 'Allgemein',
+    appearance: 'Erscheinungsbild',
+    api: 'API-Schlüssel',
+    security: 'Sicherheit',
+    language: 'Sprache',
+    theme: 'Thema',
+    dark: 'Dunkel',
+    light: 'Hell',
+    system: 'System',
+    openai: 'OpenAI API-Schlüssel',
+    anthropic: 'Anthropic API-Schlüssel',
+    github: 'GitHub-Token',
+    database: 'Datenbank',
+    backup: 'Sicherung',
+    restore: 'Wiederherstellen',
+    export: 'Exportieren',
+    import: 'Importieren',
+    clear: 'Daten löschen',
+    save: 'Speichern',
+    cancel: 'Abbrechen',
+    reset: 'Zurücksetzen'
+  },
+  chat: {
+    placeholder: 'Nachricht eingeben...',
+    send: 'Senden',
+    thinking: 'Denke nach...',
+    error: 'Fehler beim Senden',
+    copy: 'Kopieren',
+    edit: 'Bearbeiten',
+    delete: 'Löschen',
+    regenerate: 'Neu generieren'
+  },
+  terminal: {
+    title: 'Terminal',
+    newTab: 'Neuer Tab',
+    closeTab: 'Tab schließen',
+    clear: 'Löschen',
+    copy: 'Kopieren',
+    paste: 'Einfügen'
+  },
+  fileExplorer: {
+    title: 'Dateien',
+    openFile: 'Datei öffnen',
+    newFile: 'Neue Datei',
+    newFolder: 'Neuer Ordner',
+    rename: 'Umbenennen',
+    delete: 'Löschen',
+    refresh: 'Aktualisieren'
+  },
+  common: {
+    save: 'Speichern',
+    cancel: 'Abbrechen',
+    delete: 'Löschen',
+    edit: 'Bearbeiten',
+    create: 'Erstellen',
+    close: 'Schließen',
+    confirm: 'Bestätigen',
+    search: 'Suchen',
+    loading: 'Laden...',
+    error: 'Fehler',
+    success: 'Erfolg',
+    warning: 'Warnung',
+    info: 'Info',
+    yes: 'Ja',
+    no: 'Nein',
+    ok: 'OK',
+    back: 'Zurück',
+    next: 'Weiter',
+    previous: 'Zurück',
+    refresh: 'Aktualisieren',
+    export: 'Exportieren',
+    import: 'Importieren'
+  },
+  errors: {
+    generic: 'Ein Fehler ist aufgetreten',
+    network: 'Netzwerkfehler',
+    notFound: 'Nicht gefunden',
+    unauthorized: 'Nicht autorisiert',
+    forbidden: 'Verboten',
+    validation: 'Validierungsfehler',
+    serverError: 'Serverfehler'
+  }
+};

package/src/renderer/i18n/en.ts

@@ -0,0 +1,163 @@
+export const en = {
+  app: {
+    name: 'Codex Linux',
+    loading: 'Loading Codex...',
+    offline: 'You are offline',
+    online: 'Back online'
+  },
+  sidebar: {
+    agents: 'Agents',
+    worktrees: 'Worktrees',
+    skills: 'Skills',
+    automations: 'Automations',
+    settings: 'Settings'
+  },
+  agents: {
+    title: 'Agents',
+    description: 'Manage your AI coding agents',
+    create: 'New Agent',
+    delete: 'Delete Agent',
+    start: 'Start',
+    stop: 'Stop',
+    running: 'running',
+    idle: 'idle',
+    error: 'error',
+    name: 'Agent Name',
+    model: 'Model',
+    skills: 'Skills',
+    worktree: 'Worktree',
+    status: 'Status',
+    lastActivity: 'Last Activity',
+    noAgents: 'No agents yet',
+    createFirst: 'Create your first agent to get started'
+  },
+  worktrees: {
+    title: 'Worktrees',
+    description: 'Isolated Git workspaces',
+    create: 'New Worktree',
+    delete: 'Delete Worktree',
+    name: 'Worktree Name',
+    branch: 'Branch',
+    path: 'Path',
+    noWorktrees: 'No worktrees yet'
+  },
+  skills: {
+    title: 'Skills',
+    description: 'Reusable AI capabilities',
+    create: 'New Skill',
+    delete: 'Delete Skill',
+    name: 'Skill Name',
+    description_label: 'Description',
+    instructions: 'Instructions',
+    tags: 'Tags',
+    noSkills: 'No skills yet',
+    builtIn: 'Built-in',
+    custom: 'Custom'
+  },
+  automations: {
+    title: 'Automations',
+    description: 'Scheduled tasks and workflows',
+    create: 'New Automation',
+    delete: 'Delete Automation',
+    run: 'Run Now',
+    pause: 'Pause',
+    resume: 'Resume',
+    name: 'Automation Name',
+    schedule: 'Schedule',
+    command: 'Command',
+    trigger: 'Trigger',
+    lastRun: 'Last Run',
+    nextRun: 'Next Run',
+    noAutomations: 'No automations yet',
+    cron: 'Cron Expression',
+    manual: 'Manual',
+    interval: 'Interval'
+  },
+  settings: {
+    title: 'Settings',
+    description: 'Configure your preferences',
+    general: 'General',
+    appearance: 'Appearance',
+    api: 'API Keys',
+    security: 'Security',
+    language: 'Language',
+    theme: 'Theme',
+    dark: 'Dark',
+    light: 'Light',
+    system: 'System',
+    openai: 'OpenAI API Key',
+    anthropic: 'Anthropic API Key',
+    github: 'GitHub Token',
+    database: 'Database',
+    backup: 'Backup',
+    restore: 'Restore',
+    export: 'Export',
+    import: 'Import',
+    clear: 'Clear Data',
+    save: 'Save',
+    cancel: 'Cancel',
+    reset: 'Reset to Defaults'
+  },
+  chat: {
+    placeholder: 'Type your message...',
+    send: 'Send',
+    thinking: 'Thinking...',
+    error: 'Error sending message',
+    copy: 'Copy',
+    edit: 'Edit',
+    delete: 'Delete',
+    regenerate: 'Regenerate'
+  },
+  terminal: {
+    title: 'Terminal',
+    newTab: 'New Tab',
+    closeTab: 'Close Tab',
+    clear: 'Clear',
+    copy: 'Copy',
+    paste: 'Paste'
+  },
+  fileExplorer: {
+    title: 'Files',
+    openFile: 'Open File',
+    newFile: 'New File',
+    newFolder: 'New Folder',
+    rename: 'Rename',
+    delete: 'Delete',
+    refresh: 'Refresh'
+  },
+  common: {
+    save: 'Save',
+    cancel: 'Cancel',
+    delete: 'Delete',
+    edit: 'Edit',
+    create: 'Create',
+    close: 'Close',
+    confirm: 'Confirm',
+    search: 'Search',
+    loading: 'Loading...',
+    error: 'Error',
+    success: 'Success',
+    warning: 'Warning',
+    info: 'Info',
+    yes: 'Yes',
+    no: 'No',
+    ok: 'OK',
+    back: 'Back',
+    next: 'Next',
+    previous: 'Previous',
+    refresh: 'Refresh',
+    export: 'Export',
+    import: 'Import'
+  },
+  errors: {
+    generic: 'An error occurred',
+    network: 'Network error',
+    notFound: 'Not found',
+    unauthorized: 'Unauthorized',
+    forbidden: 'Forbidden',
+    validation: 'Validation error',
+    serverError: 'Server error'
+  }
+};
+
+export type TranslationKeys = typeof en;