codex-linux 1.0.0

package/src/renderer/components/ErrorBoundary.tsx

@@ -0,0 +1,273 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { AlertTriangle, RefreshCw, Home, Copy, ChevronDown, ChevronUp } from 'lucide-react';
+import { Button } from './ui/Button';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  resetKeys?: unknown[];
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+  showDetails: boolean;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      showDetails: false,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.setState({
+      error,
+      errorInfo,
+    });
+    
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  componentDidUpdate(prevProps: ErrorBoundaryProps): void {
+    if (this.state.hasError && this.props.resetKeys) {
+      const hasResetKeyChanged = this.props.resetKeys.some(
+        (key, index) => key !== prevProps.resetKeys?.[index]
+      );
+      
+      if (hasResetKeyChanged) {
+        this.reset();
+      }
+    }
+  }
+
+  reset = (): void => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      showDetails: false,
+    });
+  };
+
+  copyError = (): void => {
+    if (this.state.error) {
+      const errorText = `${this.state.error.message}\n\n${this.state.error.stack || ''}`;
+      navigator.clipboard.writeText(errorText);
+    }
+  };
+
+  toggleDetails = (): void => {
+    this.setState((prev) => ({ showDetails: !prev.showDetails }));
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-background p-4">
+          <div className="max-w-lg w-full bg-card border border-border rounded-lg p-6 shadow-lg">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="p-3 bg-destructive/10 rounded-full">
+                <AlertTriangle className="w-8 h-8 text-destructive" />
+              </div>
+              <div>
+                <h1 className="text-xl font-semibold">Something went wrong</h1>
+                <p className="text-muted-foreground text-sm">
+                  An unexpected error occurred
+                </p>
+              </div>
+            </div>
+
+            {this.state.error && (
+              <div className="mb-4">
+                <p className="text-sm font-medium mb-2">
+                  {this.state.error.message}
+                </p>
+                
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={this.toggleDetails}
+                  className="flex items-center gap-2 text-muted-foreground"
+                >
+                  {this.state.showDetails ? (
+                    <>
+                      <ChevronUp className="w-4 h-4" />
+                      Hide details
+                    </>
+                  ) : (
+                    <>
+                      <ChevronDown className="w-4 h-4" />
+                      Show details
+                    </>
+                  )}
+                </Button>
+
+                {this.state.showDetails && this.state.errorInfo && (
+                  <pre className="mt-3 p-3 bg-muted rounded-md text-xs overflow-auto max-h-48">
+                    <code>{this.state.errorInfo.componentStack || this.state.error.stack}</code>
+                  </pre>
+                )}
+              </div>
+            )}
+
+            <div className="flex gap-3">
+              <Button onClick={this.reset} className="flex-1">
+                <RefreshCw className="w-4 h-4 mr-2" />
+                Try again
+              </Button>
+              <Button variant="outline" onClick={() => window.location.href = '/'}>
+                <Home className="w-4 h-4 mr-2" />
+                Go home
+              </Button>
+              <Button variant="ghost" size="icon" onClick={this.copyError} title="Copy error">
+                <Copy className="w-4 h-4" />
+              </Button>
+            </div>
+
+            <p className="mt-4 text-xs text-muted-foreground text-center">
+              If this problem persists, please{' '}
+              <a
+                href="https://github.com/codex-linux/codex-linux/issues"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline hover:text-foreground"
+              >
+                report an issue
+              </a>
+            </p>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+interface AsyncErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface AsyncErrorBoundaryState {
+  hasError: boolean;
+}
+
+export class AsyncErrorBoundary extends Component<
+  AsyncErrorBoundaryProps,
+  AsyncErrorBoundaryState
+> {
+  constructor(props: AsyncErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): AsyncErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        this.props.fallback || (
+          <div className="p-4 border border-destructive rounded-md bg-destructive/10">
+            <div className="flex items-center gap-2 text-destructive">
+              <AlertTriangle className="w-5 h-5" />
+              <span>Failed to load content</span>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => this.setState({ hasError: false })}
+              className="mt-2"
+            >
+              Retry
+            </Button>
+          </div>
+        )
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+interface PanelErrorBoundaryProps {
+  children: ReactNode;
+  title?: string;
+}
+
+export class PanelErrorBoundary extends Component<
+  PanelErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: PanelErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      showDetails: false,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return { hasError: true, error };
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        <div className="p-4 border border-destructive/30 rounded-md bg-destructive/5">
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2 text-destructive">
+              <AlertTriangle className="w-4 h-4" />
+              <span className="font-medium">
+                {this.props.title || 'Panel Error'}
+              </span>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() =>
+                this.setState({ hasError: false, error: null, errorInfo: null })
+              }
+            >
+              <RefreshCw className="w-3 h-3" />
+            </Button>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            {this.state.error?.message || 'An error occurred in this panel'}
+          </p>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/renderer/components/ExtendedThinkingToggle.tsx

@@ -0,0 +1,244 @@
+import React, { useState } from 'react';
+import { Brain, Info, AlertTriangle, Zap, Gauge } from 'lucide-react';
+import { ExtendedThinkingConfig } from '../../shared/types';
+
+interface ExtendedThinkingToggleProps {
+  config: ExtendedThinkingConfig;
+  onChange: (config: ExtendedThinkingConfig) => void;
+  disabled?: boolean;
+  model?: string;
+}
+
+export const ExtendedThinkingToggle: React.FC<ExtendedThinkingToggleProps> = ({
+  config,
+  onChange,
+  disabled = false,
+  model = ''
+}) => {
+  const [showDetails, setShowDetails] = useState(false);
+
+  const handleToggle = () => {
+    onChange({
+      ...config,
+      enabled: !config.enabled
+    });
+  };
+
+  const handleMaxTokensChange = (value: number) => {
+    onChange({
+      ...config,
+      maxTokens: Math.max(0, Math.min(32000, value))
+    });
+  };
+
+  const handleReasoningEffortChange = (effort: 'low' | 'medium' | 'high') => {
+    onChange({
+      ...config,
+      reasoningEffort: effort
+    });
+  };
+
+  // Check if model supports extended thinking
+  const supportsExtendedThinking = model.startsWith('o1') || model.includes('opus');
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Brain className="w-4 h-4 text-purple-500" />
+          <span className="font-medium">Extended Thinking</span>
+        </div>
+        
+        <button
+          onClick={handleToggle}
+          disabled={disabled || !supportsExtendedThinking}
+          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+            config.enabled ? 'bg-purple-500' : 'bg-muted'
+          } ${disabled || !supportsExtendedThinking ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+        >
+          <span
+            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+              config.enabled ? 'translate-x-6' : 'translate-x-1'
+            }`}
+          />
+        </button>
+      </div>
+
+      <p className="text-xs text-muted-foreground">
+        Improves performance on complex reasoning tasks by using additional tokens for thinking.
+      </p>
+
+      {!supportsExtendedThinking && (
+        <div className="flex items-start gap-2 text-xs text-yellow-600 bg-yellow-500/10 p-2 rounded">
+          <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
+          <span>
+            Extended thinking is only available with o1 and Claude 3 Opus models.
+          </span>
+        </div>
+      )}
+
+      {config.enabled && supportsExtendedThinking && (
+        <div className="space-y-3 p-3 bg-purple-500/5 border border-purple-500/20 rounded-lg">
+          {/* Reasoning Effort Selector */}
+          <div>
+            <label className="text-xs font-medium mb-2 block">Reasoning Effort</label>
+            <div className="grid grid-cols-3 gap-2">
+              <button
+                onClick={() => handleReasoningEffortChange('low')}
+                className={`flex items-center justify-center gap-1 px-2 py-1.5 text-xs rounded transition-colors ${
+                  config.reasoningEffort === 'low'
+                    ? 'bg-purple-500 text-white'
+                    : 'bg-muted hover:bg-muted/80'
+                }`}
+              >
+                <Zap className="w-3 h-3" />
+                Low
+              </button>
+              <button
+                onClick={() => handleReasoningEffortChange('medium')}
+                className={`flex items-center justify-center gap-1 px-2 py-1.5 text-xs rounded transition-colors ${
+                  config.reasoningEffort === 'medium'
+                    ? 'bg-purple-500 text-white'
+                    : 'bg-muted hover:bg-muted/80'
+                }`}
+              >
+                <Gauge className="w-3 h-3" />
+                Medium
+              </button>
+              <button
+                onClick={() => handleReasoningEffortChange('high')}
+                className={`flex items-center justify-center gap-1 px-2 py-1.5 text-xs rounded transition-colors ${
+                  config.reasoningEffort === 'high'
+                    ? 'bg-purple-500 text-white'
+                    : 'bg-muted hover:bg-muted/80'
+                }`}
+              >
+                <Brain className="w-3 h-3" />
+                High
+              </button>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {config.reasoningEffort === 'low' && 'Minimal thinking, faster responses'}
+              {config.reasoningEffort === 'medium' && 'Balanced thinking for most tasks'}
+              {config.reasoningEffort === 'high' && 'Deep reasoning for complex problems'}
+            </p>
+          </div>
+
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label className="text-xs font-medium">Max Thinking Tokens</label>
+              <span className="text-xs text-muted-foreground">{config.maxTokens}</span>
+            </div>
+            <input
+              type="range"
+              min="0"
+              max="32000"
+              step="1000"
+              value={config.maxTokens}
+              onChange={e => handleMaxTokensChange(parseInt(e.target.value))}
+              disabled={disabled}
+              className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-purple-500"
+            />
+            <div className="flex justify-between text-xs text-muted-foreground mt-1">
+              <span>0 (disabled)</span>
+              <span>16000</span>
+              <span>32000</span>
+            </div>
+          </div>
+
+          <div className="flex items-start gap-2 text-xs text-yellow-600 bg-yellow-500/10 p-2 rounded">
+            <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
+            <span>
+              Extended thinking uses additional tokens and may increase costs. 
+              Set to 0 to disable thinking entirely.
+            </span>
+          </div>
+        </div>
+      )}
+
+      <button
+        onClick={() => setShowDetails(!showDetails)}
+        className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+      >
+        <Info className="w-3 h-3" />
+        {showDetails ? 'Hide details' : 'Learn more'}
+      </button>
+
+      {showDetails && (
+        <div className="text-xs text-muted-foreground space-y-2 bg-muted/50 p-3 rounded-lg">
+          <p>
+            <strong>How it works:</strong> When enabled, the model uses a portion of your token budget 
+            to "think" through complex problems before responding. This improves accuracy on tasks 
+            requiring multi-step reasoning, math, or logic.
+          </p>
+          <p>
+            <strong>Reasoning Effort:</strong> Controls how deeply the model thinks before responding.
+            Low = faster responses, High = deeper analysis.
+          </p>
+          <p>
+            <strong>Cost:</strong> Thinking tokens count toward your input token usage and pricing. 
+            Disable by setting max tokens to 0.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Component to display reasoning tokens in messages
+interface ReasoningDisplayProps {
+  reasoning?: string;
+  tokens?: number;
+  effort?: 'low' | 'medium' | 'high';
+}
+
+export const ReasoningDisplay: React.FC<ReasoningDisplayProps> = ({
+  reasoning,
+  tokens,
+  effort
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  if (!reasoning && !tokens) return null;
+
+  return (
+    <div className="mt-2 p-2 bg-purple-500/5 border border-purple-500/20 rounded-lg">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center justify-between w-full text-left"
+      >
+        <div className="flex items-center gap-2">
+          <Brain className="w-3.5 h-3.5 text-purple-500" />
+          <span className="text-xs font-medium text-purple-700 dark:text-purple-300">
+            Reasoning Process
+          </span>
+          {effort && (
+            <span className="text-xs px-1.5 py-0.5 bg-purple-500/10 rounded text-purple-600 dark:text-purple-400 capitalize">
+              {effort}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {tokens && (
+            <span className="text-xs text-muted-foreground">
+              {tokens.toLocaleString()} tokens
+            </span>
+          )}
+          <span className="text-xs text-muted-foreground">
+            {isExpanded ? '▼' : '▶'}
+          </span>
+        </div>
+      </button>
+
+      {isExpanded && reasoning && (
+        <div className="mt-2 pt-2 border-t border-purple-500/10">
+          <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono bg-muted/50 p-2 rounded">
+            {reasoning}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ExtendedThinkingToggle;