cowork-os 0.3.21

package/src/renderer/components/QueueSettings.tsx

@@ -0,0 +1,119 @@
+import { useState, useEffect } from 'react';
+import { QueueSettings as QueueSettingsType, DEFAULT_QUEUE_SETTINGS } from '../../shared/types';
+
+export function QueueSettings() {
+  const [settings, setSettings] = useState<QueueSettingsType | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      setLoading(true);
+      const loaded = await window.electronAPI.getQueueSettings();
+      setSettings(loaded);
+    } catch (error) {
+      console.error('Failed to load queue settings:', error);
+      // Fall back to defaults if loading fails
+      setSettings(DEFAULT_QUEUE_SETTINGS);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    if (!settings) return;
+    try {
+      setSaving(true);
+      await window.electronAPI.saveQueueSettings(settings);
+    } catch (error) {
+      console.error('Failed to save queue settings:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleReset = () => {
+    setSettings(DEFAULT_QUEUE_SETTINGS);
+  };
+
+  if (loading || !settings) {
+    return <div className="settings-loading">Loading queue settings...</div>;
+  }
+
+  return (
+    <>
+      {/* Parallel Execution Section */}
+      <div className="settings-section">
+        <h3>Parallel Task Execution</h3>
+        <p className="settings-description">
+          Control how many tasks can run simultaneously. Higher values allow more parallel work
+          but use more system resources.
+        </p>
+
+        <div className="settings-slider-group">
+          <label>Maximum concurrent tasks:</label>
+          <div className="slider-with-value">
+            <input
+              type="range"
+              className="settings-slider"
+              min={1}
+              max={10}
+              value={settings.maxConcurrentTasks}
+              onChange={(e) => setSettings({ ...settings, maxConcurrentTasks: parseInt(e.target.value) })}
+            />
+            <span className="slider-value">{settings.maxConcurrentTasks}</span>
+          </div>
+        </div>
+
+        <p className="settings-hint">
+          Default: 3. Tasks beyond this limit will be queued and start automatically when a slot becomes available.
+        </p>
+      </div>
+
+      {/* Queue Behavior Info Section */}
+      <div className="settings-section">
+        <h3>Queue Behavior</h3>
+        <p className="settings-description">
+          When you create more tasks than the concurrency limit allows, extra tasks are placed in a queue.
+        </p>
+
+        <ul className="settings-info-list">
+          <li>
+            <strong>FIFO Order:</strong> Tasks are processed in the order they were created (first-in, first-out).
+          </li>
+          <li>
+            <strong>Auto-Start:</strong> Queued tasks automatically start when a running task completes.
+          </li>
+          <li>
+            <strong>Persistence:</strong> Queued tasks are saved and will resume after app restart.
+          </li>
+          <li>
+            <strong>Cancel Anytime:</strong> You can cancel queued tasks from the queue panel before they start.
+          </li>
+        </ul>
+      </div>
+
+      {/* Actions */}
+      <div className="settings-actions">
+        <button
+          className="button-secondary"
+          onClick={handleReset}
+          disabled={saving}
+        >
+          Reset to Default
+        </button>
+        <button
+          className="button-primary"
+          onClick={handleSave}
+          disabled={saving}
+        >
+          {saving ? 'Saving...' : 'Save Settings'}
+        </button>
+      </div>
+    </>
+  );
+}

package/src/renderer/components/QuickTaskFAB.tsx

@@ -0,0 +1,71 @@
+import { useState, useRef, useEffect } from 'react';
+
+interface QuickTaskFABProps {
+  onCreateTask: (prompt: string) => void;
+  disabled?: boolean;
+}
+
+export function QuickTaskFAB({ onCreateTask, disabled }: QuickTaskFABProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [prompt, setPrompt] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  const handleSubmit = () => {
+    if (prompt.trim()) {
+      onCreateTask(prompt.trim());
+      setPrompt('');
+      setIsOpen(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    } else if (e.key === 'Escape') {
+      setIsOpen(false);
+      setPrompt('');
+    }
+  };
+
+  return (
+    <div className="quick-task-fab-container">
+      {isOpen && (
+        <div className="quick-task-input-popup">
+          <input
+            ref={inputRef}
+            type="text"
+            className="quick-task-input"
+            placeholder="What should we do?"
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+          <button
+            className="quick-task-submit"
+            onClick={handleSubmit}
+            disabled={!prompt.trim()}
+          >
+            +
+          </button>
+        </div>
+      )}
+      <button
+        className={`quick-task-fab ${isOpen ? 'open' : ''}`}
+        onClick={() => setIsOpen(!isOpen)}
+        disabled={disabled}
+        title="Quick start"
+      >
+        <span className="fab-icon">{isOpen ? 'x' : '+'}</span>
+      </button>
+    </div>
+  );
+}
+
+export default QuickTaskFAB;

package/src/renderer/components/RightPanel.tsx

@@ -0,0 +1,413 @@
+import { useState, useMemo } from 'react';
+import { Task, Workspace, TaskEvent, PlanStep, QueueStatus } from '../../shared/types';
+import { FileViewer } from './FileViewer';
+import { useAgentContext } from '../hooks/useAgentContext';
+
+// Clickable file path component - opens file viewer on click, shows in Finder on right-click
+function ClickableFilePath({
+  path,
+  workspacePath,
+  className = '',
+  onOpenViewer
+}: {
+  path: string;
+  workspacePath?: string;
+  className?: string;
+  onOpenViewer?: (path: string) => void;
+}) {
+  const handleClick = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // If viewer callback is provided and we have a workspace, use the in-app viewer
+    if (onOpenViewer && workspacePath) {
+      onOpenViewer(path);
+      return;
+    }
+
+    // Fallback to external app
+    try {
+      const error = await window.electronAPI.openFile(path, workspacePath);
+      if (error) {
+        console.error('Failed to open file:', error);
+      }
+    } catch (err) {
+      console.error('Error opening file:', err);
+    }
+  };
+
+  const handleContextMenu = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      await window.electronAPI.showInFinder(path, workspacePath);
+    } catch (err) {
+      console.error('Error showing in Finder:', err);
+    }
+  };
+
+  const fileName = path.split('/').pop() || path;
+
+  return (
+    <span
+      className={`clickable-file-path ${className}`}
+      onClick={handleClick}
+      onContextMenu={handleContextMenu}
+      title={`${path}\n\nClick to preview • Right-click to show in Finder`}
+    >
+      {fileName}
+    </span>
+  );
+}
+
+interface RightPanelProps {
+  task: Task | undefined;
+  workspace: Workspace | null;
+  events: TaskEvent[];
+  tasks?: Task[];
+  queueStatus?: QueueStatus | null;
+  onSelectTask?: (taskId: string) => void;
+  onCancelTask?: (taskId: string) => void;
+}
+
+interface FileInfo {
+  path: string;
+  action: 'created' | 'modified' | 'deleted';
+  timestamp: number;
+}
+
+interface ToolUsage {
+  name: string;
+  count: number;
+  lastUsed: number;
+}
+
+export function RightPanel({ task, workspace, events, tasks = [], queueStatus, onSelectTask, onCancelTask }: RightPanelProps) {
+  const [expandedSections, setExpandedSections] = useState({
+    progress: true,
+    queue: true,
+    folder: true,
+    context: true,
+  });
+  const [viewerFilePath, setViewerFilePath] = useState<string | null>(null);
+  const agentContext = useAgentContext();
+
+  // Queue data
+  const runningTasks = useMemo(() =>
+    queueStatus ? tasks.filter(t => queueStatus.runningTaskIds.includes(t.id)) : [],
+    [tasks, queueStatus]
+  );
+  const queuedTasks = useMemo(() =>
+    queueStatus ? tasks.filter(t => queueStatus.queuedTaskIds.includes(t.id)) : [],
+    [tasks, queueStatus]
+  );
+  const totalQueueActive = (queueStatus?.runningCount || 0) + (queueStatus?.queuedCount || 0);
+
+  const toggleSection = (section: keyof typeof expandedSections) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [section]: !prev[section],
+    }));
+  };
+
+  // Extract plan steps from events
+  const planSteps = useMemo((): PlanStep[] => {
+    const planEvent = events.find(e => e.type === 'plan_created');
+    if (!planEvent?.payload?.plan?.steps) return [];
+
+    // Get the base steps from the plan
+    const steps = [...planEvent.payload.plan.steps];
+
+    // Update step statuses based on step events
+    events.forEach(event => {
+      if (event.type === 'step_started' && event.payload.step) {
+        const step = steps.find(s => s.id === event.payload.step.id);
+        if (step) step.status = 'in_progress';
+      }
+      if (event.type === 'step_completed' && event.payload.step) {
+        const step = steps.find(s => s.id === event.payload.step.id);
+        if (step) step.status = 'completed';
+      }
+    });
+
+    return steps;
+  }, [events]);
+
+  // Extract files from events
+  const files = useMemo((): FileInfo[] => {
+    const fileMap = new Map<string, FileInfo>();
+
+    events.forEach(event => {
+      if (event.type === 'file_created' && event.payload.path) {
+        fileMap.set(event.payload.path, {
+          path: event.payload.path,
+          action: 'created',
+          timestamp: event.timestamp,
+        });
+      }
+      if (event.type === 'file_modified' && (event.payload.path || event.payload.from)) {
+        const path = event.payload.path || event.payload.from;
+        fileMap.set(path, {
+          path,
+          action: 'modified',
+          timestamp: event.timestamp,
+        });
+      }
+      if (event.type === 'file_deleted' && event.payload.path) {
+        fileMap.set(event.payload.path, {
+          path: event.payload.path,
+          action: 'deleted',
+          timestamp: event.timestamp,
+        });
+      }
+    });
+
+    return Array.from(fileMap.values()).sort((a, b) => b.timestamp - a.timestamp);
+  }, [events]);
+
+  // Extract tool usage from events
+  const toolUsage = useMemo((): ToolUsage[] => {
+    const toolMap = new Map<string, ToolUsage>();
+
+    events.forEach(event => {
+      if (event.type === 'tool_call' && event.payload.tool) {
+        const existing = toolMap.get(event.payload.tool);
+        if (existing) {
+          existing.count++;
+          existing.lastUsed = event.timestamp;
+        } else {
+          toolMap.set(event.payload.tool, {
+            name: event.payload.tool,
+            count: 1,
+            lastUsed: event.timestamp,
+          });
+        }
+      }
+    });
+
+    return Array.from(toolMap.values()).sort((a, b) => b.lastUsed - a.lastUsed);
+  }, [events]);
+
+  // Extract referenced files from tool results (files that were read)
+  const referencedFiles = useMemo((): string[] => {
+    const files = new Set<string>();
+
+    events.forEach(event => {
+      if (event.type === 'tool_call') {
+        // Check if it's a read_file or list_directory call
+        if (event.payload.tool === 'read_file' && event.payload.input?.path) {
+          files.add(event.payload.input.path);
+        }
+        if (event.payload.tool === 'search_files' && event.payload.input?.path) {
+          files.add(event.payload.input.path);
+        }
+      }
+    });
+
+    return Array.from(files).slice(0, 10); // Limit to 10 most recent
+  }, [events]);
+
+  // Get status indicator for CLI style
+  const getStatusIndicator = (status: string) => {
+    switch (status) {
+      case 'completed': return '[✓]';
+      case 'in_progress': return '[~]';
+      case 'failed': return '[✗]';
+      default: return '[ ]';
+    }
+  };
+
+  const getFileActionSymbol = (action: FileInfo['action']) => {
+    switch (action) {
+      case 'created': return '+';
+      case 'modified': return '~';
+      case 'deleted': return '-';
+    }
+  };
+
+  return (
+    <div className="right-panel cli-panel">
+
+      {/* Progress Section */}
+      <div className="right-panel-section cli-section">
+        <div className="cli-section-header" onClick={() => toggleSection('progress')}>
+          <span className="cli-section-prompt">&gt;</span>
+          <span className="cli-section-title">{agentContext.getUiCopy('rightProgressTitle')}</span>
+          <span className="cli-section-toggle">{expandedSections.progress ? '[-]' : '[+]'}</span>
+        </div>
+        {expandedSections.progress && (
+          <div className="cli-section-content">
+            {planSteps.length > 0 ? (
+              <div className="cli-progress-list">
+                {planSteps.map((step, index) => (
+                  <div key={step.id || index} className={`cli-progress-item ${step.status}`}>
+                    <span className="cli-progress-num">{String(index + 1).padStart(2, '0')}</span>
+                    <span className={`cli-progress-status ${step.status}`}>{getStatusIndicator(step.status)}</span>
+                    <span className="cli-progress-text">
+                      {step.description.length > 30 ? step.description.slice(0, 30) + '...' : step.description}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="cli-empty-state">
+                <div className="cli-ascii-box">
+                  ┌─────────────────────┐
+                  │   {task?.status === 'executing' ? '◉ WORKING...' : task?.status === 'paused' ? '⏸ PAUSED' : task?.status === 'blocked' ? '! BLOCKED' : task?.status === 'completed' ? '✓ ALL DONE' : '○ READY'}{'     '}│
+                  └─────────────────────┘
+                </div>
+                <p className="cli-hint">{agentContext.getUiCopy('rightProgressEmptyHint')}</p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Lineup Section */}
+      {totalQueueActive > 0 && (
+        <div className="right-panel-section cli-section">
+          <div className="cli-section-header" onClick={() => toggleSection('queue')}>
+            <span className="cli-section-prompt">&gt;</span>
+            <span className="cli-section-title">{agentContext.getUiCopy('rightQueueTitle')}</span>
+            <span className="cli-queue-badge">{queueStatus?.runningCount}/{queueStatus?.maxConcurrent}{queueStatus && queueStatus.queuedCount > 0 && ` +${queueStatus.queuedCount}`}</span>
+            <span className="cli-section-toggle">{expandedSections.queue ? '[-]' : '[+]'}</span>
+          </div>
+          {expandedSections.queue && (
+            <div className="cli-section-content">
+              {runningTasks.length > 0 && (
+                <div className="cli-queue-group">
+                  <div className="cli-context-label">{agentContext.getUiCopy('rightQueueActiveLabel')}</div>
+                  {runningTasks.map(t => (
+                    <div key={t.id} className="cli-queue-item running">
+                      <span className="cli-queue-status">[~]</span>
+                      <span className="cli-queue-title" onClick={() => onSelectTask?.(t.id)}>
+                        {(t.title || t.prompt).slice(0, 25)}{(t.title || t.prompt).length > 25 ? '...' : ''}
+                      </span>
+                      <button className="cli-queue-cancel" onClick={() => onCancelTask?.(t.id)} title="Cancel">×</button>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {queuedTasks.length > 0 && (
+                <div className="cli-queue-group">
+                  <div className="cli-context-label">{agentContext.getUiCopy('rightQueueNextLabel')}</div>
+                  {queuedTasks.map((t, i) => (
+                    <div key={t.id} className="cli-queue-item queued">
+                      <span className="cli-queue-status">[{i + 1}]</span>
+                      <span className="cli-queue-title" onClick={() => onSelectTask?.(t.id)}>
+                        {(t.title || t.prompt).slice(0, 25)}{(t.title || t.prompt).length > 25 ? '...' : ''}
+                      </span>
+                      <button className="cli-queue-cancel" onClick={() => onCancelTask?.(t.id)} title="Cancel">×</button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Working Folder Section */}
+      <div className="right-panel-section cli-section">
+        <div className="cli-section-header" onClick={() => toggleSection('folder')}>
+          <span className="cli-section-prompt">&gt;</span>
+          <span className="cli-section-title">{agentContext.getUiCopy('rightFilesTitle')}</span>
+          <span className="cli-section-toggle">{expandedSections.folder ? '[-]' : '[+]'}</span>
+        </div>
+        {expandedSections.folder && (
+          <div className="cli-section-content">
+            {files.length > 0 ? (
+              <div className="cli-file-list">
+                {files.map((file, index) => (
+                  <div key={`${file.path}-${index}`} className={`cli-file-item ${file.action}`}>
+                    <span className={`cli-file-action ${file.action}`}>{getFileActionSymbol(file.action)}</span>
+                    <ClickableFilePath path={file.path} workspacePath={workspace?.path} className="cli-file-name" onOpenViewer={setViewerFilePath} />
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="cli-empty-state">
+                <pre className="cli-tree">
+{`├── (empty)
+└── ...`}
+                </pre>
+                <p className="cli-hint">{agentContext.getUiCopy('rightFilesEmptyHint')}</p>
+              </div>
+            )}
+            {workspace && (
+              <div className="cli-workspace-path">
+                <span className="cli-label">PWD:</span>
+                <span className="cli-path" title={workspace.path}>{workspace.name}/</span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Context Section */}
+      <div className="right-panel-section cli-section">
+        <div className="cli-section-header" onClick={() => toggleSection('context')}>
+          <span className="cli-section-prompt">&gt;</span>
+          <span className="cli-section-title">{agentContext.getUiCopy('rightContextTitle')}</span>
+          <span className="cli-section-toggle">{expandedSections.context ? '[-]' : '[+]'}</span>
+        </div>
+        {expandedSections.context && (
+          <div className="cli-section-content">
+            {toolUsage.length > 0 || referencedFiles.length > 0 ? (
+              <div className="cli-context-list">
+                {toolUsage.length > 0 && (
+                  <div className="cli-context-group">
+                    <div className="cli-context-label"># tools_used:</div>
+                    {toolUsage.map((tool, index) => (
+                      <div key={`${tool.name}-${index}`} className="cli-context-item">
+                        <span className="cli-context-key">{tool.name}</span>
+                        <span className="cli-context-sep">:</span>
+                        <span className="cli-context-val">{tool.count}x</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                {referencedFiles.length > 0 && (
+                  <div className="cli-context-group">
+                    <div className="cli-context-label"># files_read:</div>
+                    {referencedFiles.map((file, index) => (
+                      <div key={`${file}-${index}`} className="cli-context-item">
+                        <ClickableFilePath path={file} workspacePath={workspace?.path} className="cli-context-file" onOpenViewer={setViewerFilePath} />
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="cli-empty-state">
+                <div className="cli-context-empty">
+                  tools: 0
+                  files: 0
+                </div>
+                <p className="cli-hint">{agentContext.getUiCopy('rightContextEmptyHint')}</p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Empty space filler */}
+      <div style={{ flex: 1 }} />
+
+      {/* Footer note */}
+      <div className="cli-panel-footer">
+        <span className="cli-footer-prompt">$</span>
+        <span className="cli-footer-text">{agentContext.getUiCopy('rightFooterText')}</span>
+      </div>
+
+      {/* File Viewer Modal */}
+      {viewerFilePath && workspace?.path && (
+        <FileViewer
+          filePath={viewerFilePath}
+          workspacePath={workspace.path}
+          onClose={() => setViewerFilePath(null)}
+        />
+      )}
+    </div>
+  );
+}