codex-linux 1.0.0

package/src/renderer/components/PermissionPanel.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import { PermissionRequest } from '../../shared/types';
+import { 
+  FileEdit, 
+  Terminal, 
+  Wrench, 
+  Check, 
+  X,
+  Clock,
+  AlertCircle
+} from 'lucide-react';
+
+interface PermissionPanelProps {
+  requests: PermissionRequest[];
+  onApprove: (requestId: string) => void;
+  onReject: (requestId: string) => void;
+  onViewDetails?: (request: PermissionRequest) => void;
+}
+
+const getActionIcon = (type: string) => {
+  switch (type) {
+    case 'edit':
+      return <FileEdit className="w-4 h-4" />;
+    case 'command':
+      return <Terminal className="w-4 h-4" />;
+    case 'tool':
+      return <Wrench className="w-4 h-4" />;
+    default:
+      return <AlertCircle className="w-4 h-4" />;
+  }
+};
+
+const getActionColor = (type: string) => {
+  switch (type) {
+    case 'edit':
+      return 'text-blue-500 bg-blue-500/10';
+    case 'command':
+      return 'text-yellow-500 bg-yellow-500/10';
+    case 'tool':
+      return 'text-purple-500 bg-purple-500/10';
+    default:
+      return 'text-gray-500 bg-gray-500/10';
+  }
+};
+
+export const PermissionPanel: React.FC<PermissionPanelProps> = ({
+  requests,
+  onApprove,
+  onReject,
+  onViewDetails
+}) => {
+  if (requests.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-muted-foreground p-8">
+        <Check className="w-16 h-16 mb-4 opacity-30" />
+        <h3 className="text-lg font-medium">No Pending Permissions</h3>
+        <p className="text-sm mt-2 text-center">
+          All actions have been approved or rejected
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-4 py-3 border-b border-border flex items-center justify-between bg-background/50">
+        <div className="flex items-center gap-2">
+          <Clock className="w-5 h-5 text-yellow-500" />
+          <h3 className="font-medium">Pending Permissions</h3>
+        </div>
+        <span className="text-sm text-muted-foreground">
+          {requests.length} pending
+        </span>
+      </div>
+
+      <div className="flex-1 overflow-auto p-4 space-y-3">
+        {requests.map((request) => (
+          <div
+            key={request.id}
+            className="bg-card border border-border rounded-lg p-4 hover:border-primary/50 transition-colors"
+          >
+            {/* Header */}
+            <div className="flex items-start justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className={`p-2 rounded-lg ${getActionColor(request.type)}`}>
+                  {getActionIcon(request.type)}
+                </div>
+                <div>
+                  <span className="font-medium capitalize">{request.type}</span>
+                  <span className="text-muted-foreground text-sm ml-2">
+                    {request.action}
+                  </span>
+                </div>
+              </div>
+              <span className="text-xs text-muted-foreground">
+                {new Date(request.createdAt).toLocaleTimeString()}
+              </span>
+            </div>
+
+            {/* Details */}
+            {request.details && Object.keys(request.details).length > 0 && (
+              <div className="bg-muted/50 rounded-lg p-3 mb-3">
+                {request.type === 'edit' && request.details.filePath && (
+                  <div className="text-sm">
+                    <span className="text-muted-foreground">File: </span>
+                    <code className="bg-background px-1.5 py-0.5 rounded text-xs">
+                      {request.details.filePath}
+                    </code>
+                  </div>
+                )}
+                {request.type === 'command' && request.details.command && (
+                  <div className="text-sm">
+                    <span className="text-muted-foreground">Command: </span>
+                    <code className="bg-background px-1.5 py-0.5 rounded text-xs font-mono">
+                      {request.details.command}
+                    </code>
+                  </div>
+                )}
+                {request.details.description && (
+                  <p className="text-sm text-muted-foreground mt-2">
+                    {request.details.description}
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Actions */}
+            <div className="flex items-center justify-end gap-2">
+              {onViewDetails && (
+                <button
+                  onClick={() => onViewDetails(request)}
+                  className="px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  View Details
+                </button>
+              )}
+              <button
+                onClick={() => onReject(request.id)}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-500 hover:bg-red-500/10 rounded-lg transition-colors"
+              >
+                <X className="w-4 h-4" />
+                Reject
+              </button>
+              <button
+                onClick={() => onApprove(request.id)}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-green-500/10 text-green-500 hover:bg-green-500/20 rounded-lg transition-colors"
+              >
+                <Check className="w-4 h-4" />
+                Approve
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PermissionPanel;

package/src/renderer/components/PermissionSelector.tsx

@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react';
+import { PermissionMode } from '../../shared/types';
+import { 
+  Shield, 
+  ShieldCheck, 
+  ShieldAlert, 
+  ShieldOff,
+  ChevronDown,
+  AlertTriangle
+} from 'lucide-react';
+
+interface PermissionSelectorProps {
+  currentMode: PermissionMode;
+  onModeChange: (mode: PermissionMode) => void;
+  allowBypass: boolean;
+  disabled?: boolean;
+  showDescriptions?: boolean;
+}
+
+const permissionModes = [
+  {
+    mode: PermissionMode.ASK,
+    label: 'Ask permissions',
+    description: 'Ask before editing files or running commands',
+    icon: Shield,
+    color: 'text-blue-500',
+    bgColor: 'bg-blue-500/10',
+    borderColor: 'border-blue-500/30'
+  },
+  {
+    mode: PermissionMode.AUTO_ACCEPT_EDITS,
+    label: 'Auto accept edits',
+    description: 'Auto-accept file edits, ask for commands',
+    icon: ShieldCheck,
+    color: 'text-green-500',
+    bgColor: 'bg-green-500/10',
+    borderColor: 'border-green-500/30'
+  },
+  {
+    mode: PermissionMode.PLAN,
+    label: 'Plan mode',
+    description: 'Analyze only, no changes or commands',
+    icon: ShieldAlert,
+    color: 'text-yellow-500',
+    bgColor: 'bg-yellow-500/10',
+    borderColor: 'border-yellow-500/30'
+  },
+  {
+    mode: PermissionMode.BYPASS,
+    label: 'Bypass permissions',
+    description: 'Run without any permission prompts',
+    icon: ShieldOff,
+    color: 'text-red-500',
+    bgColor: 'bg-red-500/10',
+    borderColor: 'border-red-500/30',
+    dangerous: true
+  }
+];
+
+export const PermissionSelector: React.FC<PermissionSelectorProps> = ({
+  currentMode,
+  onModeChange,
+  allowBypass,
+  disabled = false,
+  showDescriptions = true
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showBypassWarning, setShowBypassWarning] = useState(false);
+
+  const currentConfig = permissionModes.find(m => m.mode === currentMode) || permissionModes[0];
+  const Icon = currentConfig.icon;
+
+  const handleModeSelect = (mode: PermissionMode) => {
+    if (mode === PermissionMode.BYPASS && !allowBypass) {
+      setShowBypassWarning(true);
+      return;
+    }
+    
+    onModeChange(mode);
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = () => setIsOpen(false);
+    if (isOpen) {
+      document.addEventListener('click', handleClickOutside);
+      return () => document.removeEventListener('click', handleClickOutside);
+    }
+  }, [isOpen]);
+
+  return (
+    <div className="relative">
+      {/* Selector Button */}
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          if (!disabled) setIsOpen(!isOpen);
+        }}
+        disabled={disabled}
+        className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all ${
+          disabled 
+            ? 'opacity-50 cursor-not-allowed bg-muted' 
+            : 'hover:bg-muted cursor-pointer'
+        } ${currentConfig.bgColor} ${currentConfig.borderColor}`}
+      >
+        <Icon className={`w-4 h-4 ${currentConfig.color}`} />
+        <span className="text-sm font-medium">{currentConfig.label}</span>
+        {!disabled && <ChevronDown className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />}
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 w-80 bg-card border border-border rounded-lg shadow-lg z-50 overflow-hidden">
+          <div className="p-2 space-y-1">
+            {permissionModes.map((config) => {
+              const ModeIcon = config.icon;
+              const isDisabled = config.mode === PermissionMode.BYPASS && !allowBypass;
+              const isActive = config.mode === currentMode;
+
+              return (
+                <button
+                  key={config.mode}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleModeSelect(config.mode);
+                  }}
+                  disabled={isDisabled}
+                  className={`w-full flex items-start gap-3 p-3 rounded-lg text-left transition-all ${
+                    isActive 
+                      ? `${config.bgColor} ${config.borderColor} border` 
+                      : 'hover:bg-muted'
+                  } ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+                >
+                  <div className={`mt-0.5 ${config.color}`}>
+                    <ModeIcon className="w-5 h-5" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-sm">{config.label}</span>
+                      {config.dangerous && (
+                        <AlertTriangle className="w-3.5 h-3.5 text-red-500" />
+                      )}
+                    </div>
+                    {showDescriptions && (
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        {config.description}
+                      </p>
+                    )}
+                  </div>
+                  {isActive && (
+                    <div className={`w-2 h-2 rounded-full ${config.color.replace('text-', 'bg-')}`} />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+          
+          {/* Footer hint */}
+          <div className="px-3 py-2 bg-muted/50 border-t border-border">
+            <p className="text-xs text-muted-foreground">
+              You can change permission mode anytime during a session
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Bypass Warning Modal */}
+      {showBypassWarning && (
+        <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-[400px] max-w-[90vw]">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="p-2 bg-red-500/10 rounded-lg">
+                <AlertTriangle className="w-6 h-6 text-red-500" />
+              </div>
+              <h3 className="text-lg font-semibold">Bypass Mode Disabled</h3>
+            </div>
+            
+            <p className="text-sm text-muted-foreground mb-4">
+              Bypass permission mode is disabled for security reasons. This mode allows 
+              Claude to run without any permission prompts, which can be dangerous.
+            </p>
+            
+            <p className="text-sm mb-6">
+              To enable bypass mode, go to <strong>Settings → Security</strong> and 
+              toggle &quot;Allow bypass permissions mode&quot;.
+            </p>
+            
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={() => setShowBypassWarning(false)}
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
+              >
+                Got it
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PermissionSelector;

package/src/renderer/components/PluginMarketplace.tsx

@@ -0,0 +1,325 @@
+import React, { useState, useEffect } from 'react';
+import { Search, Download, Star, Shield, Zap, Package, X, ExternalLink, Check } from 'lucide-react';
+
+export interface Plugin {
+  id: string;
+  name: string;
+  description: string;
+  author: string;
+  version: string;
+  rating: number;
+  downloads: number;
+  tags: string[];
+  icon?: string;
+  installed?: boolean;
+  updateAvailable?: boolean;
+}
+
+interface PluginMarketplaceProps {
+  onInstall: (pluginId: string) => void;
+  onUninstall: (pluginId: string) => void;
+  installedPlugins: string[];
+  onClose: () => void;
+}
+
+const PLUGIN_CATEGORIES = [
+  { id: 'all', label: 'All' },
+  { id: 'productivity', label: 'Productivity' },
+  { id: 'ai', label: 'AI & ML' },
+  { id: 'integrations', label: 'Integrations' },
+  { id: 'tools', label: 'Dev Tools' },
+  { id: 'custom', label: 'Custom' },
+];
+
+const SAMPLE_PLUGINS: Plugin[] = [
+  {
+    id: 'code-review',
+    name: 'Code Review Pro',
+    description: 'Advanced code review with pattern detection and best practices enforcement',
+    author: 'Codex Team',
+    version: '1.2.0',
+    rating: 4.8,
+    downloads: 12500,
+    tags: ['ai', 'productivity'],
+    installed: false,
+  },
+  {
+    id: 'test-generator',
+    name: 'Test Generator',
+    description: 'Automatically generate unit tests based on code changes and coverage gaps',
+    author: 'Codex Team',
+    version: '2.0.0',
+    rating: 4.6,
+    downloads: 8900,
+    tags: ['productivity', 'tools'],
+    installed: false,
+  },
+  {
+    id: 'github-integration',
+    name: 'GitHub Integration',
+    description: 'Enhanced GitHub workflow with PR templates, auto-merge, and issue tracking',
+    author: 'Community',
+    version: '1.5.0',
+    rating: 4.5,
+    downloads: 15000,
+    tags: ['integrations'],
+    installed: true,
+  },
+  {
+    id: 'slack-notifications',
+    name: 'Slack Notifications',
+    description: 'Get real-time notifications in Slack for agent activities and errors',
+    author: 'Community',
+    version: '1.0.0',
+    rating: 4.2,
+    downloads: 5200,
+    tags: ['integrations'],
+    installed: false,
+  },
+  {
+    id: 'context7-docs',
+    name: 'Context7 Docs',
+    description: 'Fetch always-up-to-date library documentation from Context7',
+    author: 'Community',
+    version: '1.1.0',
+    rating: 4.9,
+    downloads: 22000,
+    tags: ['ai', 'tools'],
+    installed: false,
+  },
+  {
+    id: 'brave-search',
+    name: 'Brave Search',
+    description: 'Web search capability using Brave Search API',
+    author: 'Anthropic',
+    version: '1.0.0',
+    rating: 4.7,
+    downloads: 18000,
+    tags: ['ai', 'integrations'],
+    installed: false,
+  },
+  {
+    id: 'database-mcp',
+    name: 'Database MCP',
+    description: 'Connect to PostgreSQL, MySQL, and other databases directly',
+    author: 'Community',
+    version: '2.1.0',
+    rating: 4.4,
+    downloads: 7500,
+    tags: ['tools', 'integrations'],
+    installed: false,
+  },
+  {
+    id: 'figma-integration',
+    name: 'Figma Integration',
+    description: 'Import designs from Figma and generate UI code automatically',
+    author: 'Community',
+    version: '0.9.0',
+    rating: 4.3,
+    downloads: 4100,
+    tags: ['integrations', 'ai'],
+    installed: false,
+  },
+];
+
+function cn(...inputs: (string | undefined | null | boolean)[]): string {
+  return inputs.filter(Boolean).join(' ');
+}
+
+export const PluginMarketplace: React.FC<PluginMarketplaceProps> = ({
+  onInstall,
+  onUninstall,
+  installedPlugins,
+  onClose,
+}) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('all');
+  const [plugins, setPlugins] = useState<Plugin[]>(SAMPLE_PLUGINS);
+  const [installing, setInstalling] = useState<string | null>(null);
+
+  useEffect(() => {
+    setPlugins(SAMPLE_PLUGINS.map(p => ({
+      ...p,
+      installed: installedPlugins.includes(p.id),
+    })));
+  }, [installedPlugins]);
+
+  const filteredPlugins = plugins.filter(plugin => {
+    const matchesSearch = plugin.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      plugin.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      plugin.tags.some(t => t.includes(searchQuery.toLowerCase()));
+    
+    const matchesCategory = selectedCategory === 'all' || 
+      plugin.tags.includes(selectedCategory);
+    
+    return matchesSearch && matchesCategory;
+  });
+
+  const handleInstall = async (pluginId: string) => {
+    setInstalling(pluginId);
+    await onInstall(pluginId);
+    setInstalling(null);
+  };
+
+  const handleUninstall = async (pluginId: string) => {
+    setInstalling(pluginId);
+    await onUninstall(pluginId);
+    setInstalling(null);
+  };
+
+  const formatDownloads = (num: number) => {
+    if (num >= 1000) {
+      return `${(num / 1000).toFixed(1)}k`;
+    }
+    return num.toString();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
+      <div className="bg-background rounded-xl shadow-2xl w-full max-w-4xl max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <Package className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold">Plugin Marketplace</h2>
+              <p className="text-sm text-muted-foreground">Extend Codex Linux with plugins</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-muted rounded-lg transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Search & Filters */}
+        <div className="px-6 py-4 border-b border-border">
+          <div className="flex items-center gap-4">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Search plugins..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 bg-muted border-0 rounded-lg text-sm"
+              />
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-2 mt-3 overflow-x-auto">
+            {PLUGIN_CATEGORIES.map((category) => (
+              <button
+                key={category.id}
+                onClick={() => setSelectedCategory(category.id)}
+                className={cn(
+                  'px-3 py-1.5 text-sm rounded-full whitespace-nowrap transition-colors',
+                  selectedCategory === category.id
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted hover:bg-muted/80'
+                )}
+              >
+                {category.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Plugin List */}
+        <div className="flex-1 overflow-y-auto p-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {filteredPlugins.map((plugin) => (
+              <div
+                key={plugin.id}
+                className="p-4 border border-border rounded-lg hover:border-primary/50 transition-colors"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-medium">{plugin.name}</h3>
+                      {plugin.installed && (
+                        <span className="px-1.5 py-0.5 text-xs bg-green-500/10 text-green-500 rounded">
+                          <Check className="w-3 h-3 inline" /> Installed
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-sm text-muted-foreground mt-1">{plugin.description}</p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-4 mt-3 text-xs text-muted-foreground">
+                  <div className="flex items-center gap-1">
+                    <Star className="w-3.5 h-3.5 text-yellow-500 fill-yellow-500" />
+                    <span>{plugin.rating}</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <Download className="w-3.5 h-3.5" />
+                    <span>{formatDownloads(plugin.downloads)}</span>
+                  </div>
+                  <span>v{plugin.version}</span>
+                </div>
+
+                <div className="flex items-center justify-between mt-3 pt-3 border-t border-border">
+                  <span className="text-xs text-muted-foreground">by {plugin.author}</span>
+                  
+                  {plugin.installed ? (
+                    <button
+                      onClick={() => handleUninstall(plugin.id)}
+                      disabled={installing === plugin.id}
+                      className="px-3 py-1.5 text-sm text-red-500 hover:bg-red-500/10 rounded-md transition-colors disabled:opacity-50"
+                    >
+                      {installing === plugin.id ? 'Uninstalling...' : 'Uninstall'}
+                    </button>
+                  ) : (
+                    <button
+                      onClick={() => handleInstall(plugin.id)}
+                      disabled={installing === plugin.id}
+                      className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 flex items-center gap-1"
+                    >
+                      <Download className="w-3.5 h-3.5" />
+                      {installing === plugin.id ? 'Installing...' : 'Install'}
+                    </button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {filteredPlugins.length === 0 && (
+            <div className="text-center py-12 text-muted-foreground">
+              <Search className="w-12 h-12 mx-auto mb-4 opacity-30" />
+              <p>No plugins found matching your search</p>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-3 border-t border-border flex items-center justify-between text-xs text-muted-foreground">
+          <div className="flex items-center gap-4">
+            <span className="flex items-center gap-1">
+              <Shield className="w-3.5 h-3.5" />
+              Verified plugins
+            </span>
+            <span className="flex items-center gap-1">
+              <Zap className="w-3.5 h-3.5" />
+              Fast installation
+            </span>
+          </div>
+          <a
+            href="#"
+            className="flex items-center gap-1 hover:text-primary transition-colors"
+          >
+            Browse more plugins
+            <ExternalLink className="w-3.5 h-3.5" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PluginMarketplace;