codex-linux 1.0.0

package/src/renderer/components/AppPreview.tsx

@@ -0,0 +1,220 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Play, Square, RefreshCw, ExternalLink, Maximize2, Minimize2, Smartphone, Monitor, Tablet } from 'lucide-react';
+
+interface AppPreviewProps {
+  projectPath: string;
+  port?: number;
+  onPortChange?: (port: number) => void;
+}
+
+export const AppPreview: React.FC<AppPreviewProps> = ({
+  projectPath,
+  port = 3000,
+  onPortChange,
+}) => {
+  const [isRunning, setIsRunning] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [url, setUrl] = useState(`http://localhost:${port}`);
+  const [viewMode, setViewMode] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [logs, setLogs] = useState<string[]>([]);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const viewModes = {
+    desktop: { width: '100%', height: '100%' },
+    tablet: { width: '768px', height: '1024px' },
+    mobile: { width: '375px', height: '667px' },
+  };
+
+  const startServer = async () => {
+    setIsLoading(true);
+    try {
+      // Detect package.json and start command
+      const packageJson = await window.electronAPI.fs.readFile(
+        `${projectPath}/package.json`
+      );
+      const pkg = JSON.parse(packageJson);
+      const startCommand = pkg.scripts?.dev || pkg.scripts?.start || 'npm start';
+
+      // Start dev server
+      await window.electronAPI.terminal.execute({
+        command: startCommand,
+        cwd: projectPath,
+      });
+
+      // Wait for server to be ready
+      await waitForServer(url);
+      
+      setIsRunning(true);
+      addLog(`Server started on ${url}`);
+    } catch (error) {
+      addLog(`Error: ${error}`);
+    }
+    setIsLoading(false);
+  };
+
+  const stopServer = async () => {
+    await window.electronAPI.terminal.kill();
+    setIsRunning(false);
+    addLog('Server stopped');
+  };
+
+  const refreshPreview = () => {
+    if (iframeRef.current) {
+      iframeRef.current.src = iframeRef.current.src;
+      addLog('Preview refreshed');
+    }
+  };
+
+  const waitForServer = async (url: string, timeout = 30000): Promise<void> => {
+    const startTime = Date.now();
+    
+    while (Date.now() - startTime < timeout) {
+      try {
+        const response = await fetch(url, { method: 'HEAD', mode: 'no-cors' });
+        return;
+      } catch {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+    }
+    
+    throw new Error('Server failed to start within timeout');
+  };
+
+  const addLog = (message: string) => {
+    setLogs(prev => [...prev.slice(-50), `[${new Date().toLocaleTimeString()}] ${message}`]);
+  };
+
+  const openExternal = () => {
+    window.electronAPI.shell.openExternal(url);
+  };
+
+  return (
+    <div className={`flex flex-col bg-card ${isFullscreen ? 'fixed inset-0 z-50' : 'h-full'}`}>
+      {/* Toolbar */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-border bg-background/50">
+        <div className="flex items-center gap-2">
+          {!isRunning ? (
+            <button
+              onClick={startServer}
+              disabled={isLoading}
+              className="flex items-center gap-2 px-3 py-1.5 bg-green-500 text-white rounded-md hover:bg-green-600 disabled:opacity-50"
+            >
+              <Play className="w-4 h-4" />
+              {isLoading ? 'Starting...' : 'Start'}
+            </button>
+          ) : (
+            <button
+              onClick={stopServer}
+              className="flex items-center gap-2 px-3 py-1.5 bg-red-500 text-white rounded-md hover:bg-red-600"
+            >
+              <Square className="w-4 h-4" />
+              Stop
+            </button>
+          )}
+
+          <button
+            onClick={refreshPreview}
+            disabled={!isRunning}
+            className="p-2 hover:bg-muted rounded-md disabled:opacity-50"
+          >
+            <RefreshCw className="w-4 h-4" />
+          </button>
+
+          <div className="h-6 w-px bg-border mx-2" />
+
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => setViewMode('desktop')}
+              className={`p-2 rounded-md ${viewMode === 'desktop' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`}
+            >
+              <Monitor className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setViewMode('tablet')}
+              className={`p-2 rounded-md ${viewMode === 'tablet' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`}
+            >
+              <Tablet className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setViewMode('mobile')}
+              className={`p-2 rounded-md ${viewMode === 'mobile' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`}
+            >
+              <Smartphone className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={url}
+            onChange={(e) => {
+              setUrl(e.target.value);
+              const newPort = parseInt(e.target.value.split(':')[2]) || port;
+              onPortChange?.(newPort);
+            }}
+            className="px-3 py-1.5 bg-background border border-input rounded-md text-sm w-48"
+          />
+
+          <button
+            onClick={openExternal}
+            className="p-2 hover:bg-muted rounded-md"
+          >
+            <ExternalLink className="w-4 h-4" />
+          </button>
+
+          <button
+            onClick={() => setIsFullscreen(!isFullscreen)}
+            className="p-2 hover:bg-muted rounded-md"
+          >
+            {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Preview Area */}
+      <div className="flex-1 flex overflow-hidden">
+        <div className="flex-1 bg-[#1e1e1e] flex items-center justify-center p-4 overflow-auto">
+          {isRunning ? (
+            <div
+              className="bg-white rounded-lg shadow-2xl overflow-hidden transition-all duration-300"
+              style={viewModes[viewMode]}
+            >
+              <iframe
+                ref={iframeRef}
+                src={url}
+                className="w-full h-full border-0"
+                sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+                title="App Preview"
+              />
+            </div>
+          ) : (
+            <div className="text-center text-muted-foreground">
+              <Monitor className="w-16 h-16 mx-auto mb-4 opacity-30" />
+              <p className="text-lg font-medium">App Preview</p>
+              <p className="text-sm mt-2">Start the dev server to see your app</p>
+            </div>
+          )}
+        </div>
+
+        {/* Logs Panel */}
+        <div className="w-80 border-l border-border bg-card flex flex-col">
+          <div className="px-4 py-2 border-b border-border font-medium text-sm">
+            Server Logs
+          </div>
+          <div className="flex-1 overflow-auto p-2 font-mono text-xs">
+            {logs.map((log, i) => (
+              <div key={i} className="text-muted-foreground py-0.5">
+                {log}
+              </div>
+            ))}
+            {logs.length === 0 && (
+              <div className="text-muted-foreground italic">No logs yet...</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/AuditTrailPanel.tsx

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from 'react';
+import { ScrollText, Download, Filter, RefreshCw } from 'lucide-react';
+import { format } from 'date-fns';
+
+interface AuditEvent {
+  id: string;
+  timestamp: string;
+  action: string;
+  userId: string;
+  details: Record<string, any>;
+}
+
+export const AuditTrailPanel: React.FC = () => {
+  const [events, setEvents] = useState<AuditEvent[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [filter, setFilter] = useState<string>('');
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  const loadEvents = async () => {
+    setLoading(true);
+    try {
+      const recent = await window.electronAPI.audit.recent(100);
+      setEvents(recent as AuditEvent[]);
+    } catch (error) {
+      console.error('Failed to load audit events:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadEvents();
+  }, []);
+
+  const filteredEvents = filter
+    ? events.filter(e => e.action.toLowerCase().includes(filter.toLowerCase()))
+    : events;
+
+  const exportLogs = async () => {
+    try {
+      const path = await window.electronAPI.dialog.selectFile?.([{ name: 'JSON', extensions: ['json'] }]);
+      if (path) {
+        await window.electronAPI.audit.export(path);
+        await window.electronAPI.notification.show({
+          title: 'Audit log exported',
+          body: `Exported to ${path}`
+        });
+      }
+    } catch (error) {
+      console.error('Export failed:', error);
+    }
+  };
+
+  const getActionColor = (action: string) => {
+    if (action.includes('created')) return 'bg-green-500/10 text-green-500';
+    if (action.includes('deleted')) return 'bg-red-500/10 text-red-500';
+    if (action.includes('applied') || action.includes('restored')) return 'bg-blue-500/10 text-blue-500';
+    if (action.includes('failed')) return 'bg-orange-500/10 text-orange-500';
+    return 'bg-gray-500/10 text-gray-500';
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-card">
+      <div className="px-4 py-3 border-b border-border flex items-center justify-between bg-background/50">
+        <div className="flex items-center gap-3">
+          <ScrollText className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h3 className="font-medium">Audit Trail</h3>
+            <p className="text-xs text-muted-foreground">Session activity log</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={loadEvents}
+            disabled={loading}
+            className="p-2 hover:bg-muted rounded-md disabled:opacity-50"
+            title="Refresh"
+          >
+            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          </button>
+          <button
+            onClick={exportLogs}
+            className="p-2 hover:bg-muted rounded-md"
+            title="Export logs"
+          >
+            <Download className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="p-3 border-b border-border">
+        <div className="relative">
+          <Filter className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <input
+            type="text"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Filter by action..."
+            className="w-full pl-9 pr-3 py-2 bg-background border border-input rounded-md text-sm"
+          />
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-3 space-y-2">
+        {filteredEvents.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <ScrollText className="w-12 h-12 mx-auto mb-3 opacity-30" />
+            <p className="text-sm">No audit events</p>
+          </div>
+        ) : (
+          filteredEvents.map((event) => (
+            <div
+              key={event.id}
+              className="border border-border rounded-lg overflow-hidden"
+            >
+              <button
+                onClick={() => setExpandedId(expandedId === event.id ? null : event.id)}
+                className="w-full px-3 py-2 flex items-center gap-3 hover:bg-muted/50 transition-colors text-left"
+              >
+                <span className={`px-2 py-0.5 rounded text-xs font-medium ${getActionColor(event.action)}`}>
+                  {event.action}
+                </span>
+                <span className="text-xs text-muted-foreground flex-1">
+                  {format(new Date(event.timestamp), 'MMM d, HH:mm:ss')}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {expandedId === event.id ? '−' : '+'}
+                </span>
+              </button>
+
+              {expandedId === event.id && (
+                <div className="px-3 py-2 bg-muted/30 border-t border-border">
+                  <pre className="text-xs font-mono text-muted-foreground overflow-x-auto">
+                    {JSON.stringify(event.details, null, 2)}
+                  </pre>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+
+      <div className="px-4 py-2 border-t border-border text-xs text-muted-foreground">
+        Showing {filteredEvents.length} of {events.length} events
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/AutomationPanel.tsx

@@ -0,0 +1,220 @@
+import React, { useState } from 'react';
+import { Automation, Agent, Skill } from '../../shared/types';
+import { Clock, Plus, Play, Pause, Settings, Trash2, Calendar, Zap } from 'lucide-react';
+
+interface AutomationPanelProps {
+  automations: Automation[];
+  agents: Agent[];
+  skills: Skill[];
+  onCreateAutomation: (config: any) => Promise<Automation>;
+}
+
+export const AutomationPanel: React.FC<AutomationPanelProps> = ({
+  automations,
+  agents,
+  skills,
+  onCreateAutomation
+}) => {
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [newAutomation, setNewAutomation] = useState({
+    name: '',
+    description: '',
+    triggerType: 'schedule' as const,
+    triggerConfig: { cron: '0 9 * * *' },
+    actions: [] as any[]
+  });
+
+  const handleCreate = async () => {
+    try {
+      await onCreateAutomation(newAutomation);
+      setShowCreateModal(false);
+      setNewAutomation({
+        name: '',
+        description: '',
+        triggerType: 'schedule',
+        triggerConfig: { cron: '0 9 * * *' },
+        actions: []
+      });
+    } catch (error) {
+      console.error('Failed to create automation:', error);
+    }
+  };
+
+  const handleToggle = async (automationId: string, enabled: boolean) => {
+    try {
+      await window.electronAPI.automation.toggle(automationId, enabled);
+    } catch (error) {
+      console.error('Failed to toggle automation:', 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">Automations</h2>
+          <p className="text-sm text-muted-foreground">Schedule and automate agent tasks</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 Automation
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-auto p-4">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          {automations.map(automation => (
+            <div
+              key={automation.id}
+              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">
+                  <Clock className="w-5 h-5 text-muted-foreground" />
+                  <span className="font-medium">{automation.name}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => handleToggle(automation.id, !automation.enabled)}
+                    className={`p-1.5 rounded-md ${
+                      automation.enabled
+                        ? 'text-green-500 hover:bg-green-500/10'
+                        : 'text-muted-foreground hover:bg-muted'
+                    }`}
+                  >
+                    {automation.enabled ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+                  </button>
+                  <button className="p-1.5 text-destructive hover:bg-destructive/10 rounded-md">
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+
+              <p className="text-sm text-muted-foreground mb-3">
+                {automation.description}
+              </p>
+
+              <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                <div className="flex items-center gap-1">
+                  <Calendar className="w-3 h-3" />
+                  <span className="capitalize">{automation.trigger.type}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Zap className="w-3 h-3" />
+                  <span>{automation.actions.length} actions</span>
+                </div>
+                {automation.runCount > 0 && (
+                  <div>
+                    Run {automation.runCount} times
+                  </div>
+                )}
+              </div>
+
+              {automation.enabled && (
+                <div className="mt-3 flex items-center gap-2 text-xs text-green-500">
+                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                  Active
+                </div>
+              )}
+            </div>
+          ))}
+
+          {automations.length === 0 && (
+            <div className="col-span-full flex flex-col items-center justify-center py-12 text-muted-foreground">
+              <Clock className="w-16 h-16 mb-4 opacity-30" />
+              <p className="text-lg font-medium">No automations yet</p>
+              <p className="text-sm">Create an automation to schedule agent tasks</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-[600px]">
+            <h2 className="text-lg font-semibold mb-4">Create New Automation</h2>
+            
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Name</label>
+                <input
+                  type="text"
+                  value={newAutomation.name}
+                  onChange={e => setNewAutomation({ ...newAutomation, name: e.target.value })}
+                  className="w-full px-3 py-2 bg-background border border-input rounded-md"
+                  placeholder="Daily Code Review"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Description</label>
+                <textarea
+                  value={newAutomation.description}
+                  onChange={e => setNewAutomation({ ...newAutomation, description: e.target.value })}
+                  className="w-full px-3 py-2 bg-background border border-input rounded-md h-20 resize-none"
+                  placeholder="What does this automation do?"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Trigger Type</label>
+                <select
+                  value={newAutomation.triggerType}
+                  onChange={e => setNewAutomation({
+                    ...newAutomation,
+                    triggerType: e.target.value as any,
+                    triggerConfig: e.target.value === 'schedule' ? { cron: '0 9 * * *' } : {}
+                  })}
+                  className="w-full px-3 py-2 bg-background border border-input rounded-md"
+                >
+                  <option value="schedule">Schedule (Cron)</option>
+                  <option value="event">Event</option>
+                  <option value="webhook">Webhook</option>
+                  <option value="manual">Manual Only</option>
+                </select>
+              </div>
+
+              {newAutomation.triggerType === 'schedule' && (
+                <div>
+                  <label className="block text-sm font-medium mb-1">Cron Expression</label>
+                  <input
+                    type="text"
+                    value={newAutomation.triggerConfig.cron}
+                    onChange={e => setNewAutomation({
+                      ...newAutomation,
+                      triggerConfig: { cron: e.target.value }
+                    })}
+                    className="w-full px-3 py-2 bg-background border border-input rounded-md font-mono"
+                    placeholder="0 9 * * *"
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Example: 0 9 * * * (every day at 9 AM)
+                  </p>
+                </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={!newAutomation.name}
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-md disabled:opacity-50"
+              >
+                Create Automation
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};