codex-linux 1.0.0

package/src/renderer/components/SkillsPanel.tsx

@@ -0,0 +1,245 @@
+import React, { useState } from 'react';
+import { Skill } from '../../shared/types';
+import { Wrench, Plus, FileText, Tag, Trash2, Edit2 } from 'lucide-react';
+
+interface SkillsPanelProps {
+  skills: Skill[];
+  onCreateSkill: (config: any) => Promise<Skill>;
+}
+
+export const SkillsPanel: React.FC<SkillsPanelProps> = ({
+  skills,
+  onCreateSkill
+}) => {
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [selectedSkill, setSelectedSkill] = useState<Skill | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [newSkill, setNewSkill] = useState({
+    name: '',
+    description: '',
+    content: ''
+  });
+
+  const filteredSkills = skills.filter(skill =>
+    skill.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    skill.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    skill.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  const handleCreate = async () => {
+    try {
+      await onCreateSkill(newSkill);
+      setShowCreateModal(false);
+      setNewSkill({ name: '', description: '', content: '' });
+    } catch (error) {
+      console.error('Failed to create skill:', error);
+    }
+  };
+
+  return (
+    <div className="h-full flex">
+      {/* Skills List */}
+      <div className="w-80 border-r border-border bg-card flex flex-col">
+        <div className="p-4 border-b border-border">
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="font-semibold">Skills Library</h2>
+            <button
+              onClick={() => setShowCreateModal(true)}
+              className="p-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+            >
+              <Plus className="w-4 h-4" />
+            </button>
+          </div>
+          <input
+            type="text"
+            placeholder="Search skills..."
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            className="w-full px-3 py-2 bg-background border border-input rounded-md text-sm"
+          />
+        </div>
+
+        <div className="flex-1 overflow-auto p-2 space-y-2">
+          {filteredSkills.map(skill => (
+            <div
+              key={skill.id}
+              onClick={() => setSelectedSkill(skill)}
+              className={`p-3 rounded-lg cursor-pointer transition-colors ${
+                selectedSkill?.id === skill.id
+                  ? 'bg-primary/10 border border-primary/30'
+                  : 'hover:bg-muted border border-transparent'
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <Wrench className="w-4 h-4 text-muted-foreground" />
+                <span className="font-medium text-sm">{skill.name}</span>
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
+                {skill.description}
+              </p>
+              <div className="flex flex-wrap gap-1 mt-2">
+                {skill.tags.slice(0, 3).map(tag => (
+                  <span key={tag} className="px-1.5 py-0.5 bg-muted rounded text-xs">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ))}
+
+          {filteredSkills.length === 0 && (
+            <div className="text-center py-8 text-muted-foreground">
+              <Wrench className="w-12 h-12 mx-auto mb-2 opacity-50" />
+              <p className="text-sm">No skills found</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Skill Detail */}
+      <div className="flex-1 flex flex-col">
+        {selectedSkill ? (
+          <>
+            <div className="p-4 border-b border-border flex items-start justify-between">
+              <div>
+                <h2 className="text-lg font-semibold">{selectedSkill.name}</h2>
+                <p className="text-sm text-muted-foreground">{selectedSkill.description}</p>
+                <div className="flex flex-wrap gap-2 mt-2">
+                  {selectedSkill.tags.map(tag => (
+                    <span key={tag} className="px-2 py-0.5 bg-muted rounded-full text-xs">
+                      <Tag className="w-3 h-3 inline mr-1" />
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <button className="p-2 hover:bg-muted rounded-md">
+                  <Edit2 className="w-4 h-4" />
+                </button>
+                <button className="p-2 text-destructive hover:bg-destructive/10 rounded-md">
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+
+            <div className="flex-1 overflow-auto p-4">
+              <div className="space-y-4">
+                <div>
+                  <h3 className="text-sm font-medium mb-2">Files</h3>
+                  <div className="space-y-2">
+                    {selectedSkill.files.map(file => (
+                      <div
+                        key={file.path}
+                        className="p-3 bg-muted rounded-md"
+                      >
+                        <div className="flex items-center gap-2 mb-2">
+                          <FileText className="w-4 h-4 text-muted-foreground" />
+                          <span className="text-sm font-medium">{file.path}</span>
+                          <span className="text-xs text-muted-foreground uppercase">
+                            {file.type}
+                          </span>
+                        </div>
+                        <pre className="text-xs bg-background p-2 rounded overflow-x-auto">
+                          <code>{file.content.slice(0, 500)}{file.content.length > 500 ? '...' : ''}</code>
+                        </pre>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <h3 className="text-sm font-medium mb-2">Configuration</h3>
+                  <div className="bg-muted p-3 rounded-md text-sm">
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <span className="text-muted-foreground">Entry Point:</span>
+                        <span className="ml-2">{selectedSkill.config.entryPoint}</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">Version:</span>
+                        <span className="ml-2">{selectedSkill.version}</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">Author:</span>
+                        <span className="ml-2">{selectedSkill.author}</span>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">Dependencies:</span>
+                        <span className="ml-2">{selectedSkill.config.dependencies.length || 'None'}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-muted-foreground">
+            <div className="text-center">
+              <Wrench className="w-16 h-16 mx-auto mb-4 opacity-30" />
+              <p>Select a skill to view details</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 Skill</h2>
+            
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Name</label>
+                <input
+                  type="text"
+                  value={newSkill.name}
+                  onChange={e => setNewSkill({ ...newSkill, name: e.target.value })}
+                  className="w-full px-3 py-2 bg-background border border-input rounded-md"
+                  placeholder="My Custom Skill"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Description</label>
+                <textarea
+                  value={newSkill.description}
+                  onChange={e => setNewSkill({ ...newSkill, 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 skill do?"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Content</label>
+                <textarea
+                  value={newSkill.content}
+                  onChange={e => setNewSkill({ ...newSkill, content: e.target.value })}
+                  className="w-full px-3 py-2 bg-background border border-input rounded-md h-40 resize-none font-mono text-sm"
+                  placeholder="Enter skill instructions..."
+                />
+              </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={!newSkill.name || !newSkill.content}
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-md disabled:opacity-50"
+              >
+                Create Skill
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/SplitPane.tsx

@@ -0,0 +1,173 @@
+import React, { useState, useCallback } from 'react';
+
+interface SplitPaneProps {
+  children: [React.ReactNode, React.ReactNode];
+  direction?: 'horizontal' | 'vertical';
+  defaultSplit?: number;
+  minSize?: number;
+}
+
+export const SplitPane: React.FC<SplitPaneProps> = ({
+  children,
+  direction = 'horizontal',
+  defaultSplit = 50,
+  minSize = 200,
+}) => {
+  const [split, setSplit] = useState(defaultSplit);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleMouseDown = useCallback(() => {
+    setIsDragging(true);
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDragging) return;
+
+      const container = e.currentTarget as HTMLElement;
+      const rect = container.getBoundingClientRect();
+
+      let newSplit;
+      if (direction === 'horizontal') {
+        newSplit = ((e.clientX - rect.left) / rect.width) * 100;
+      } else {
+        newSplit = ((e.clientY - rect.top) / rect.height) * 100;
+      }
+
+      // Apply min size constraints
+      const minPercent = (minSize / (direction === 'horizontal' ? rect.width : rect.height)) * 100;
+      newSplit = Math.max(minPercent, Math.min(100 - minPercent, newSplit));
+
+      setSplit(newSplit);
+    },
+    [isDragging, direction, minSize]
+  );
+
+  const isHorizontal = direction === 'horizontal';
+
+  return (
+    <div
+      className={`flex ${isHorizontal ? 'flex-row' : 'flex-col'} w-full h-full`}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      <div
+        className="overflow-hidden"
+        style={{
+          [isHorizontal ? 'width' : 'height']: `${split}%`,
+          [isHorizontal ? 'height' : 'width']: '100%',
+        }}
+      >
+        {children[0]}
+      </div>
+
+      <div
+        className={`${
+          isHorizontal ? 'w-1 cursor-col-resize' : 'h-1 cursor-row-resize'
+        } bg-border hover:bg-primary transition-colors flex-shrink-0`}
+        onMouseDown={handleMouseDown}
+        style={{
+          userSelect: 'none',
+        }}
+      >
+        <div
+          className={`${
+            isHorizontal ? 'w-full h-8' : 'h-full w-8'
+          } mx-auto my-auto flex items-center justify-center`}
+        >
+          <div
+            className={`${
+              isHorizontal ? 'w-0.5 h-4' : 'w-4 h-0.5'
+            } bg-muted-foreground/30 rounded-full`}
+          />
+        </div>
+      </div>
+
+      <div
+        className="overflow-hidden flex-1"
+        style={{
+          [isHorizontal ? 'width' : 'height']: `${100 - split}%`,
+        }}
+      >
+        {children[1]}
+      </div>
+    </div>
+  );
+};
+
+// Multi-pane layout component
+interface Pane {
+  id: string;
+  content: React.ReactNode;
+  title: string;
+}
+
+interface MultiPaneLayoutProps {
+  panes: Pane[];
+  activePaneId: string;
+  onPaneChange: (id: string) => void;
+  onPaneClose?: (id: string) => void;
+}
+
+export const MultiPaneLayout: React.FC<MultiPaneLayoutProps> = ({
+  panes,
+  activePaneId,
+  onPaneChange,
+  onPaneClose,
+}) => {
+  const activePane = panes.find((p) => p.id === activePaneId);
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Tab bar */}
+      <div className="flex items-center border-b border-border bg-card">
+        {panes.map((pane) => (
+          <div
+            key={pane.id}
+            className={`group flex items-center gap-2 px-4 py-2 text-sm cursor-pointer border-r border-border transition-colors ${
+              pane.id === activePaneId
+                ? 'bg-background text-foreground border-t-2 border-t-primary'
+                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+            }`}
+            onClick={() => onPaneChange(pane.id)}
+          >
+            <span className="truncate max-w-[150px]">{pane.title}</span>
+            {onPaneClose && panes.length > 1 && (
+              <button
+                className="opacity-0 group-hover:opacity-100 p-0.5 hover:bg-muted rounded"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onPaneClose(pane.id);
+                }}
+              >
+                <svg
+                  className="w-3 h-3"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-hidden">
+        {activePane?.content}
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/Terminal.tsx

@@ -0,0 +1,190 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Terminal as XTerm } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import { WebLinksAddon } from 'xterm-addon-web-links';
+import 'xterm/css/xterm.css';
+import { Play, Square, Trash2, FolderOpen } from 'lucide-react';
+
+interface TerminalProps {
+  worktreePath: string;
+  onCommand?: (command: string) => void;
+}
+
+export const Terminal: React.FC<TerminalProps> = ({ worktreePath, onCommand }) => {
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const xtermRef = useRef<XTerm | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const [currentCommand, setCurrentCommand] = useState('');
+
+  useEffect(() => {
+    if (!terminalRef.current) return;
+
+    const term = new XTerm({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: 'JetBrains Mono, monospace',
+      theme: {
+        background: '#1e1e1e',
+        foreground: '#d4d4d4',
+        cursor: '#d4d4d4',
+        selectionBackground: '#264f78',
+        black: '#000000',
+        red: '#cd3131',
+        green: '#0dbc79',
+        yellow: '#e5e510',
+        blue: '#2472c8',
+        magenta: '#bc3fbc',
+        cyan: '#11a8cd',
+        white: '#e5e5e5',
+        brightBlack: '#666666',
+        brightRed: '#f14c4c',
+        brightGreen: '#23d18b',
+        brightYellow: '#f5f543',
+        brightBlue: '#3b8eea',
+        brightMagenta: '#d670d6',
+        brightCyan: '#29b8db',
+        brightWhite: '#e5e5e5'
+      },
+      rows: 20
+    });
+
+    const fitAddon = new FitAddon();
+    const webLinksAddon = new WebLinksAddon();
+    
+    term.loadAddon(fitAddon);
+    term.loadAddon(webLinksAddon);
+    
+    term.open(terminalRef.current);
+    fitAddon.fit();
+
+    // Write initial prompt
+    term.writeln(`\x1b[32m➜\x1b[0m  \x1b[34m${worktreePath}\x1b[0m`);
+    term.write('$ ');
+
+    // Handle input
+    let currentLine = '';
+    term.onData(data => {
+      const code = data.charCodeAt(0);
+      
+      if (code === 13) { // Enter
+        term.writeln('');
+        if (currentLine.trim()) {
+          executeCommand(currentLine.trim());
+        } else {
+          term.write('$ ');
+        }
+        currentLine = '';
+      } else if (code === 127) { // Backspace
+        if (currentLine.length > 0) {
+          currentLine = currentLine.slice(0, -1);
+          term.write('\b \b');
+        }
+      } else if (code >= 32 && code <= 126) { // Printable characters
+        currentLine += data;
+        term.write(data);
+      }
+    });
+
+    xtermRef.current = term;
+    fitAddonRef.current = fitAddon;
+
+    // Handle resize
+    const handleResize = () => {
+      fitAddon.fit();
+    };
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      term.dispose();
+    };
+  }, [worktreePath]);
+
+  const executeCommand = async (command: string) => {
+    if (!xtermRef.current) return;
+    
+    setIsRunning(true);
+    setCurrentCommand(command);
+    
+    if (onCommand) {
+      onCommand(command);
+    }
+
+    try {
+      const result = await window.electronAPI.terminal.execute({
+        command,
+        cwd: worktreePath
+      });
+
+      if (result.stdout) {
+        xtermRef.current.writeln(result.stdout);
+      }
+      
+      if (result.stderr) {
+        xtermRef.current.writeln(`\x1b[31m${result.stderr}\x1b[0m`);
+      }
+
+      if (result.error) {
+        xtermRef.current.writeln(`\x1b[31mError: ${result.error}\x1b[0m`);
+      }
+    } catch (error) {
+      xtermRef.current.writeln(`\x1b[31mFailed to execute command\x1b[0m`);
+    }
+
+    setIsRunning(false);
+    xtermRef.current.write('\x1b[32m➜\x1b[0m  \x1b[34m$\x1b[0m ');
+  };
+
+  const clearTerminal = () => {
+    xtermRef.current?.clear();
+    xtermRef.current?.writeln(`\x1b[32m➜\x1b[0m  \x1b[34m${worktreePath}\x1b[0m`);
+    xtermRef.current?.write('$ ');
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-[#1e1e1e] rounded-lg overflow-hidden">
+      {/* Terminal Header */}
+      <div className="flex items-center justify-between px-3 py-2 bg-[#2d2d2d] border-b border-[#3e3e3e]">
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-gray-400">Terminal</span>
+          <span className="text-xs text-gray-600">|</span>
+          <span className="text-xs text-gray-400 truncate max-w-xs">{worktreePath}</span>
+        </div>
+        
+        <div className="flex items-center gap-1">
+          {isRunning && (
+            <div className="flex items-center gap-1 text-xs text-yellow-500 mr-2">
+              <div className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse" />
+              Running...
+            </div>
+          )}
+          
+          <button
+            onClick={() => {
+              if (isRunning) {
+                window.electronAPI.terminal.kill();
+              }
+            }}
+            disabled={!isRunning}
+            className="p-1.5 hover:bg-[#3e3e3e] rounded disabled:opacity-50"
+            title="Stop"
+          >
+            <Square className="w-3.5 h-3.5 text-red-400" />
+          </button>
+          
+          <button
+            onClick={clearTerminal}
+            className="p-1.5 hover:bg-[#3e3e3e] rounded"
+            title="Clear"
+          >
+            <Trash2 className="w-3.5 h-3.5 text-gray-400" />
+          </button>
+        </div>
+      </div>
+
+      {/* Terminal Output */}
+      <div ref={terminalRef} className="flex-1 p-2 overflow-hidden" />
+    </div>
+  );
+};