codex-linux 1.0.0

package/src/renderer/components/VoiceCommand.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Mic, MicOff, Loader2 } from 'lucide-react';
+
+interface VoiceCommandProps {
+  onCommand: (transcript: string) => void;
+  disabled?: boolean;
+}
+
+export const VoiceCommand: React.FC<VoiceCommandProps> = ({
+  onCommand,
+  disabled = false,
+}) => {
+  const [isListening, setIsListening] = useState(false);
+  const [transcript, setTranscript] = useState('');
+  const [recognition, setRecognition] = useState<SpeechRecognition | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      const rec = new SpeechRecognition();
+      
+      rec.continuous = false;
+      rec.interimResults = true;
+      rec.lang = 'en-US';
+
+      rec.onstart = () => {
+        setIsListening(true);
+        setError(null);
+      };
+
+      rec.onresult = (event) => {
+        const current = event.resultIndex;
+        const transcript = event.results[current][0].transcript;
+        setTranscript(transcript);
+
+        if (event.results[current].isFinal) {
+          onCommand(transcript);
+          setTranscript('');
+          setIsListening(false);
+        }
+      };
+
+      rec.onerror = (event) => {
+        setError(event.error);
+        setIsListening(false);
+      };
+
+      rec.onend = () => {
+        setIsListening(false);
+      };
+
+      setRecognition(rec);
+    }
+  }, [onCommand]);
+
+  const toggleListening = useCallback(() => {
+    if (!recognition) {
+      setError('Speech recognition not supported');
+      return;
+    }
+
+    if (isListening) {
+      recognition.stop();
+    } else {
+      recognition.start();
+    }
+  }, [recognition, isListening]);
+
+  const supportedCommands = [
+    'Create a new agent',
+    'Open file [filename]',
+    'Search for [query]',
+    'Run tests',
+    'Commit changes',
+    'Explain this code',
+    'Refactor this function',
+  ];
+
+  if (!recognition) {
+    return (
+      <button
+        disabled
+        className="p-2 text-muted-foreground cursor-not-allowed"
+        title="Voice commands not supported in this browser"
+      >
+        <MicOff className="w-5 h-5" />
+      </button>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <button
+        onClick={toggleListening}
+        disabled={disabled}
+        className={`p-2 rounded-full transition-all ${
+          isListening
+            ? 'bg-red-500 text-white animate-pulse'
+            : 'hover:bg-muted text-muted-foreground hover:text-foreground'
+        } disabled:opacity-50`}
+        title={isListening ? 'Stop listening' : 'Start voice command'}
+      >
+        {isListening ? (
+          <Loader2 className="w-5 h-5 animate-spin" />
+        ) : (
+          <Mic className="w-5 h-5" />
+        )}
+      </button>
+
+      {isListening && (
+        <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-card border border-border rounded-lg p-3 shadow-lg whitespace-nowrap z-50">
+          <div className="text-sm font-medium mb-2">
+            {transcript || 'Listening...'}
+          </div>
+          <div className="text-xs text-muted-foreground">
+            Try saying: "Create a new agent" or "Explain this code"
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-destructive text-destructive-foreground rounded-lg p-2 text-xs whitespace-nowrap">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/WorktreePanel.tsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import { Worktree } from '../../shared/types';
+import { GitBranch, Plus, Folder, Trash2, GitMerge } from 'lucide-react';
+
+interface WorktreePanelProps {
+  worktrees: Worktree[];
+  onCreateWorktree: (repoPath: string, name: string) => Promise<Worktree>;
+}
+
+export const WorktreePanel: React.FC<WorktreePanelProps> = ({
+  worktrees,
+  onCreateWorktree
+}) => {
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [newWorktreeConfig, setNewWorktreeConfig] = useState({
+    repoPath: '',
+    name: ''
+  });
+
+  const handleCreate = async () => {
+    try {
+      await onCreateWorktree(newWorktreeConfig.repoPath, newWorktreeConfig.name);
+      setShowCreateModal(false);
+      setNewWorktreeConfig({ repoPath: '', name: '' });
+    } catch (error) {
+      console.error('Failed to create worktree:', error);
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-4 border-b border-border flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold">Worktrees</h2>
+          <p className="text-sm text-muted-foreground">Isolated workspaces for agents</p>
+        </div>
+        <button
+          onClick={() => setShowCreateModal(true)}
+          className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+        >
+          <Plus className="w-4 h-4" />
+          New Worktree
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-auto p-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {worktrees.map(worktree => (
+            <div
+              key={worktree.name}
+              className="p-4 bg-card border border-border rounded-lg"
+            >
+              <div className="flex items-start justify-between mb-3">
+                <div className="flex items-center gap-2">
+                  <GitBranch className="w-5 h-5 text-muted-foreground" />
+                  <span className="font-medium">{worktree.name}</span>
+                </div>
+                {worktree.isMain && (
+                  <span className="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full">
+                    Main
+                  </span>
+                )}
+              </div>
+
+              <div className="space-y-2 text-sm text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <Folder className="w-4 h-4" />
+                  <span className="truncate">{worktree.path}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <GitBranch className="w-4 h-4" />
+                  <span>{worktree.branch}</span>
+                </div>
+                <div className="text-xs font-mono truncate">
+                  {worktree.commit?.slice(0, 8)}
+                </div>
+              </div>
+
+              {!worktree.isMain && (
+                <div className="flex gap-2 mt-4 pt-4 border-t border-border">
+                  <button className="flex-1 px-3 py-1.5 text-sm bg-muted rounded-md hover:bg-muted/80">
+                    <GitMerge className="w-4 h-4 inline mr-1" />
+                    Merge
+                  </button>
+                  <button className="p-1.5 text-destructive hover:bg-destructive/10 rounded-md">
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              )}
+            </div>
+          ))}
+
+          {worktrees.length === 0 && (
+            <div className="col-span-full flex flex-col items-center justify-center py-12 text-muted-foreground">
+              <GitBranch className="w-16 h-16 mb-4 opacity-30" />
+              <p className="text-lg font-medium">No worktrees yet</p>
+              <p className="text-sm">Create a worktree to isolate agent changes</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-card border border-border rounded-lg p-6 w-[500px]">
+            <h2 className="text-lg font-semibold mb-4">Create New Worktree</h2>
+            
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Repository Path</label>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={newWorktreeConfig.repoPath}
+                    onChange={e => setNewWorktreeConfig({ ...newWorktreeConfig, repoPath: e.target.value })}
+                    className="flex-1 px-3 py-2 bg-background border border-input rounded-md"
+                    placeholder="/path/to/repo"
+                  />
+                  <button
+                    onClick={async () => {
+                      const path = await window.electronAPI.dialog.selectFolder();
+                      if (path) setNewWorktreeConfig({ ...newWorktreeConfig, repoPath: path });
+                    }}
+                    className="px-3 py-2 bg-muted rounded-md"
+                  >
+                    Browse
+                  </button>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Worktree Name</label>
+                <input
+                  type="text"
+                  value={newWorktreeConfig.name}
+                  onChange={e => setNewWorktreeConfig({ ...newWorktreeConfig, name: e.target.value })}
+                  className="w-full px-3 py-2 bg-background border border-input rounded-md"
+                  placeholder="feature-branch"
+                />
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2 mt-6">
+              <button
+                onClick={() => setShowCreateModal(false)}
+                className="px-4 py-2 text-muted-foreground"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreate}
+                disabled={!newWorktreeConfig.repoPath || !newWorktreeConfig.name}
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-md disabled:opacity-50"
+              >
+                Create Worktree
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,193 @@
+import React from 'react';
+
+interface SkipLinkProps {
+  targetId: string;
+  children: React.ReactNode;
+}
+
+export const SkipLink: React.FC<SkipLinkProps> = ({ targetId, children }) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    const target = document.getElementById(targetId);
+    if (target) {
+      target.tabIndex = -1;
+      target.focus();
+      target.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <a
+      href={`#${targetId}`}
+      onClick={handleClick}
+      className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+    >
+      {children}
+    </a>
+  );
+};
+
+interface LiveRegionProps {
+  message: string;
+  politeness?: 'polite' | 'assertive';
+  atomic?: boolean;
+}
+
+export const LiveRegion: React.FC<LiveRegionProps> = ({ 
+  message, 
+  politeness = 'polite',
+  atomic = true 
+}) => {
+  return (
+    <div
+      role="status"
+      aria-live={politeness}
+      aria-atomic={atomic}
+      className="sr-only"
+    >
+      {message}
+    </div>
+  );
+};
+
+interface VisuallyHiddenProps {
+  children: React.ReactNode;
+  as?: keyof JSX.IntrinsicElements;
+}
+
+export const VisuallyHidden: React.FC<VisuallyHiddenProps> = ({ 
+  children,
+  as: Component = 'span' 
+}) => {
+  return (
+    <Component className="sr-only">
+      {children}
+    </Component>
+  );
+};
+
+interface AriaButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+  ariaExpanded?: boolean;
+  ariaPressed?: boolean;
+}
+
+export const AriaButton: React.FC<AriaButtonProps> = ({
+  ariaLabel,
+  ariaDescribedBy,
+  ariaExpanded,
+  ariaPressed,
+  children,
+  ...props
+}) => {
+  return (
+    <button
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedBy}
+      aria-expanded={ariaExpanded}
+      aria-pressed={ariaPressed}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+interface AriaDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+export const AriaDialog: React.FC<AriaDialogProps> = ({
+  isOpen,
+  onClose,
+  title,
+  description,
+  children
+}) => {
+  React.useEffect(() => {
+    if (isOpen) {
+      const handleEscape = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      };
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="dialog-title"
+      aria-describedby={description ? 'dialog-description' : undefined}
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      onClick={onClose}
+    >
+      <div className="fixed inset-0 bg-black/50" aria-hidden="true" />
+      <div 
+        className="relative z-10 bg-background rounded-lg shadow-lg p-6 max-w-lg w-full mx-4"
+        onClick={e => e.stopPropagation()}
+      >
+        <h2 id="dialog-title" className="text-lg font-semibold mb-2">
+          {title}
+        </h2>
+        {description && (
+          <p id="dialog-description" className="text-sm text-muted-foreground mb-4">
+            {description}
+          </p>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+};
+
+interface TooltipProps {
+  content: string;
+  children: React.ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  children,
+  position = 'top'
+}) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+
+  const positionClasses = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2'
+  };
+
+  return (
+    <div 
+      className="relative inline-block"
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+      onFocus={() => setIsVisible(true)}
+      onBlur={() => setIsVisible(false)}
+    >
+      {children}
+      {isVisible && (
+        <div
+          role="tooltip"
+          className={`absolute ${positionClasses[position]} z-50 px-2 py-1 text-xs bg-neutral-900 text-white rounded whitespace-nowrap`}
+        >
+          {content}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-neutral-900 text-white hover:bg-neutral-800 active:scale-[0.98]',
+        secondary: 'bg-neutral-100 text-neutral-900 hover:bg-neutral-200 active:scale-[0.98]',
+        outline: 'border border-neutral-200 bg-transparent hover:bg-neutral-50 hover:border-neutral-300',
+        ghost: 'hover:bg-neutral-100 hover:text-neutral-900',
+        link: 'text-neutral-900 underline-offset-4 hover:underline',
+        subtle: 'bg-neutral-50 text-neutral-700 hover:bg-neutral-100',
+        danger: 'bg-red-50 text-red-600 hover:bg-red-100',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-8 px-3 text-xs',
+        lg: 'h-12 px-6',
+        icon: 'h-10 w-10',
+        'icon-sm': 'h-8 w-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  loading?: boolean;
+  asChild?: boolean;
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+  ariaExpanded?: boolean;
+  ariaPressed?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, loading, children, disabled, ariaLabel, ariaDescribedBy, ariaExpanded, ariaPressed, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy}
+        aria-expanded={ariaExpanded}
+        aria-pressed={ariaPressed}
+        {...props}
+      >
+        {loading && (
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+        )}
+        {children}
+      </button>
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const cardVariants = cva(
+  'rounded-xl bg-white border border-neutral-200 shadow-sm transition-all duration-200',
+  {
+    variants: {
+      variant: {
+        default: 'hover:shadow-md hover:border-neutral-300',
+        ghost: 'border-transparent shadow-none hover:bg-neutral-50',
+        elevated: 'shadow-md hover:shadow-lg hover:-translate-y-0.5',
+        interactive: 'cursor-pointer hover:shadow-md hover:border-neutral-300 active:scale-[0.99]',
+      },
+      padding: {
+        none: '',
+        sm: 'p-4',
+        default: 'p-6',
+        lg: 'p-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      padding: 'default',
+    },
+  }
+);
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, padding, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(cardVariants({ variant, padding, className }))}
+        {...props}
+      />
+    );
+  }
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 pb-4', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn('font-semibold leading-none tracking-tight text-neutral-900', className)}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-neutral-500', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center pt-4 mt-4 border-t border-neutral-100', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const inputVariants = cva(
+  'flex w-full rounded-lg border border-neutral-200 bg-transparent px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200',
+  {
+    variants: {
+      variant: {
+        default: 'focus:border-neutral-400',
+        error: 'border-red-300 focus:border-red-500 focus:ring-red-200',
+        success: 'border-green-300 focus:border-green-500 focus:ring-green-200',
+      },
+      size: {
+        default: 'h-10',
+        sm: 'h-8 text-xs',
+        lg: 'h-12 text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    VariantProps<typeof inputVariants> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <input
+        className={cn(inputVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };