cowork-os 0.3.21

package/src/renderer/components/WorkingStateHistory.tsx

@@ -0,0 +1,481 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  AgentWorkingStateData,
+  WorkingStateType,
+} from '../../electron/preload';
+import { useAgentContext } from '../hooks/useAgentContext';
+
+interface WorkingStateHistoryProps {
+  agentRoleId: string;
+  workspaceId: string;
+  onRestore: (state: AgentWorkingStateData) => void;
+  onClose: () => void;
+}
+
+const STATE_TYPE_LABELS: Record<WorkingStateType, { label: string; icon: string }> = {
+  context: { label: 'Context', icon: '📋' },
+  progress: { label: 'Progress', icon: '📊' },
+  notes: { label: 'Notes', icon: '📝' },
+  plan: { label: 'Plan', icon: '🎯' },
+};
+
+function formatDate(timestamp: number): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const isToday = date.toDateString() === now.toDateString();
+
+  const time = date.toLocaleTimeString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  if (isToday) {
+    return `Today at ${time}`;
+  }
+
+  const yesterday = new Date(now);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (date.toDateString() === yesterday.toDateString()) {
+    return `Yesterday at ${time}`;
+  }
+
+  return date.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export function WorkingStateHistory({
+  agentRoleId,
+  workspaceId,
+  onRestore,
+  onClose,
+}: WorkingStateHistoryProps) {
+  const [history, setHistory] = useState<AgentWorkingStateData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [restoring, setRestoring] = useState<string | null>(null);
+  const [filterType, setFilterType] = useState<WorkingStateType | ''>('');
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const agentContext = useAgentContext();
+
+  const loadHistory = useCallback(async () => {
+    try {
+      setLoading(true);
+      const result = await window.electronAPI.getWorkingStateHistory({
+        agentRoleId,
+        workspaceId,
+        limit: 100,
+      });
+      setHistory(result);
+    } catch (err) {
+      console.error('Failed to load history:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [agentRoleId, workspaceId]);
+
+  useEffect(() => {
+    loadHistory();
+  }, [loadHistory]);
+
+  const handleRestore = async (state: AgentWorkingStateData) => {
+    try {
+      setRestoring(state.id);
+      const restored = await window.electronAPI.restoreWorkingState(state.id);
+      if (restored) {
+        onRestore(restored);
+      }
+    } catch (err) {
+      console.error('Failed to restore state:', err);
+    } finally {
+      setRestoring(null);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm(agentContext.getUiCopy('workingStateHistoryDeleteConfirm'))) return;
+
+    try {
+      await window.electronAPI.deleteWorkingState(id);
+      setHistory((prev) => prev.filter((h) => h.id !== id));
+    } catch (err) {
+      console.error('Failed to delete state:', err);
+    }
+  };
+
+  const filteredHistory = filterType
+    ? history.filter((h) => h.stateType === filterType)
+    : history;
+
+  // Group by date
+  const groupedHistory: Record<string, AgentWorkingStateData[]> = {};
+  filteredHistory.forEach((item) => {
+    const dateKey = new Date(item.updatedAt).toDateString();
+    if (!groupedHistory[dateKey]) {
+      groupedHistory[dateKey] = [];
+    }
+    groupedHistory[dateKey].push(item);
+  });
+
+  if (loading) {
+    return (
+      <div className="history-overlay" onClick={onClose}>
+        <div className="history-panel" onClick={(e) => e.stopPropagation()}>
+          <div className="history-loading">{agentContext.getUiCopy('workingStateHistoryLoading')}</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="history-overlay" onClick={onClose}>
+      <div className="history-panel" onClick={(e) => e.stopPropagation()}>
+        <div className="history-header">
+          <h3>{agentContext.getUiCopy('workingStateHistoryTitle')}</h3>
+          <button className="close-btn" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        <div className="history-filters">
+          <select
+            value={filterType}
+            onChange={(e) => setFilterType(e.target.value as WorkingStateType | '')}
+          >
+            <option value="">{agentContext.getUiCopy('workingStateHistoryAllTypes')}</option>
+            <option value="context">Context</option>
+            <option value="progress">Progress</option>
+            <option value="notes">Notes</option>
+            <option value="plan">Plan</option>
+          </select>
+          <span className="history-count">
+            {agentContext.getUiCopy('workingStateHistoryEntries', { count: filteredHistory.length })}
+          </span>
+        </div>
+
+        <div className="history-list">
+          {filteredHistory.length === 0 ? (
+            <div className="history-empty">
+              <p>{agentContext.getUiCopy('workingStateHistoryEmpty')}</p>
+            </div>
+          ) : (
+            Object.entries(groupedHistory).map(([dateKey, items]) => (
+              <div key={dateKey} className="history-group">
+                <div className="group-header">
+                  {new Date(dateKey).toLocaleDateString(undefined, {
+                    weekday: 'long',
+                    month: 'long',
+                    day: 'numeric',
+                  })}
+                </div>
+                {items.map((item) => {
+                  const config = STATE_TYPE_LABELS[item.stateType];
+                  const isExpanded = expandedId === item.id;
+
+                  return (
+                    <div
+                      key={item.id}
+                      className={`history-item ${item.isCurrent ? 'current' : ''}`}
+                    >
+                      <div
+                        className="item-header"
+                        onClick={() => setExpandedId(isExpanded ? null : item.id)}
+                      >
+                        <div className="item-info">
+                          <span className="item-icon">{config.icon}</span>
+                          <span className="item-type">{config.label}</span>
+                          <span className="item-time">
+                            {formatDate(item.updatedAt)}
+                          </span>
+                          {item.isCurrent && (
+                            <span className="current-badge">{agentContext.getUiCopy('workingStateHistoryCurrent')}</span>
+                          )}
+                        </div>
+                        <span className="expand-icon">
+                          {isExpanded ? '▼' : '▶'}
+                        </span>
+                      </div>
+
+                      {isExpanded && (
+                        <div className="item-content">
+                          <div className="content-preview">
+                            {item.content.length > 500
+                              ? item.content.slice(0, 500) + '...'
+                              : item.content}
+                          </div>
+                          {item.fileReferences && item.fileReferences.length > 0 && (
+                            <div className="file-refs">
+                              <span className="refs-label">{agentContext.getUiCopy('workingStateHistoryFilesLabel')}</span>
+                              {item.fileReferences.map((file, idx) => (
+                                <span key={idx} className="file-ref">
+                                  {file}
+                                </span>
+                              ))}
+                            </div>
+                          )}
+                          <div className="item-actions">
+                            {!item.isCurrent && (
+                              <button
+                                className="restore-btn"
+                                onClick={() => handleRestore(item)}
+                                disabled={restoring === item.id}
+                              >
+                                {restoring === item.id
+                                  ? agentContext.getUiCopy('workingStateHistoryRestoring')
+                                  : agentContext.getUiCopy('workingStateHistoryRestore')}
+                              </button>
+                            )}
+                            <button
+                              className="delete-btn"
+                              onClick={() => handleDelete(item.id)}
+                            >
+                              {agentContext.getUiCopy('workingStateHistoryDelete')}
+                            </button>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            ))
+          )}
+        </div>
+
+        <style>{`
+          .history-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+          }
+
+          .history-panel {
+            background: var(--bg-primary);
+            border-radius: 12px;
+            width: 600px;
+            max-height: 80vh;
+            display: flex;
+            flex-direction: column;
+          }
+
+          .history-loading {
+            padding: 40px;
+            text-align: center;
+            color: var(--text-secondary);
+          }
+
+          .history-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--border-color);
+          }
+
+          .history-header h3 {
+            margin: 0;
+            font-size: 16px;
+            color: var(--text-primary);
+          }
+
+          .close-btn {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 18px;
+            padding: 4px 8px;
+          }
+
+          .history-filters {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 20px;
+            border-bottom: 1px solid var(--border-color);
+          }
+
+          .history-filters select {
+            padding: 8px 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            font-size: 12px;
+          }
+
+          .history-count {
+            font-size: 12px;
+            color: var(--text-tertiary);
+          }
+
+          .history-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px;
+          }
+
+          .history-empty {
+            text-align: center;
+            color: var(--text-secondary);
+            padding: 40px;
+          }
+
+          .history-group {
+            margin-bottom: 20px;
+          }
+
+          .history-group:last-child {
+            margin-bottom: 0;
+          }
+
+          .group-header {
+            font-size: 12px;
+            font-weight: 600;
+            color: var(--text-tertiary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 8px;
+          }
+
+          .history-item {
+            background: var(--bg-secondary);
+            border-radius: 8px;
+            margin-bottom: 8px;
+            overflow: hidden;
+          }
+
+          .history-item.current {
+            border-left: 3px solid var(--accent-color);
+          }
+
+          .item-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 14px;
+            cursor: pointer;
+          }
+
+          .item-header:hover {
+            background: var(--bg-tertiary);
+          }
+
+          .item-info {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          }
+
+          .item-icon {
+            font-size: 14px;
+          }
+
+          .item-type {
+            font-weight: 500;
+            color: var(--text-primary);
+          }
+
+          .item-time {
+            font-size: 11px;
+            color: var(--text-tertiary);
+          }
+
+          .current-badge {
+            font-size: 10px;
+            color: var(--accent-color);
+            background: var(--accent-color)20;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 500;
+          }
+
+          .expand-icon {
+            font-size: 10px;
+            color: var(--text-tertiary);
+          }
+
+          .item-content {
+            padding: 0 14px 14px;
+          }
+
+          .content-preview {
+            font-size: 12px;
+            color: var(--text-secondary);
+            line-height: 1.5;
+            white-space: pre-wrap;
+            background: var(--bg-primary);
+            padding: 12px;
+            border-radius: 6px;
+          }
+
+          .file-refs {
+            margin-top: 10px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+            align-items: center;
+          }
+
+          .refs-label {
+            font-size: 11px;
+            color: var(--text-tertiary);
+          }
+
+          .file-ref {
+            font-size: 10px;
+            color: var(--text-secondary);
+            background: var(--bg-primary);
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-family: monospace;
+          }
+
+          .item-actions {
+            margin-top: 12px;
+            display: flex;
+            gap: 8px;
+          }
+
+          .restore-btn,
+          .delete-btn {
+            padding: 6px 12px;
+            border: none;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+          }
+
+          .restore-btn {
+            background: var(--accent-color);
+            color: white;
+          }
+
+          .restore-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+          }
+
+          .delete-btn {
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+          }
+
+          .delete-btn:hover {
+            background: #ef4444;
+            color: white;
+          }
+        `}</style>
+      </div>
+    </div>
+  );
+}

package/src/renderer/components/WorkspaceSelector.tsx

@@ -0,0 +1,150 @@
+import { useState, useEffect } from 'react';
+import { Workspace } from '../../shared/types';
+
+interface WorkspaceSelectorProps {
+  onWorkspaceSelected: (workspace: Workspace) => void;
+}
+
+export function WorkspaceSelector({ onWorkspaceSelected }: WorkspaceSelectorProps) {
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [appVersion, setAppVersion] = useState<string>('');
+
+  useEffect(() => {
+    loadWorkspaces();
+    loadVersion();
+  }, []);
+
+  const loadVersion = async () => {
+    try {
+      const versionInfo = await window.electronAPI.getAppVersion();
+      setAppVersion(versionInfo.version);
+    } catch (error) {
+      console.error('Failed to load version:', error);
+    }
+  };
+
+  const loadWorkspaces = async () => {
+    try {
+      const loaded = await window.electronAPI.listWorkspaces();
+      setWorkspaces(loaded);
+    } catch (error) {
+      console.error('Failed to load workspaces:', error);
+    }
+  };
+
+  const handleSelectFolder = async () => {
+    try {
+      const folderPath = await window.electronAPI.selectFolder();
+      if (!folderPath) return;
+
+      const folderName = folderPath.split('/').pop() || 'Workspace';
+
+      const workspace = await window.electronAPI.createWorkspace({
+        name: folderName,
+        path: folderPath,
+        permissions: {
+          read: true,
+          write: true,
+          delete: true,
+          network: false,
+          shell: false,
+        },
+      });
+
+      onWorkspaceSelected(workspace);
+    } catch (error) {
+      console.error('Failed to create workspace:', error);
+    }
+  };
+
+  return (
+    <div className="workspace-selector cli-workspace-selector">
+      <div className="workspace-selector-content cli-workspace-content">
+        {/* Terminal Header */}
+        <div className="cli-terminal-header">
+          <div className="cli-terminal-dots">
+            <span className="cli-dot"></span>
+            <span className="cli-dot"></span>
+            <span className="cli-dot active"></span>
+          </div>
+          <span className="cli-terminal-title">CoWork OS — init</span>
+        </div>
+
+        {/* Logo Section */}
+        <div className="cli-logo-section">
+          <img
+            src="./cowork-os-logo.png"
+            alt="CoWork OS"
+            className="cli-mascot-logo"
+          />
+          <pre className="cli-ascii-logo">{`
+  ██████╗ ██████╗ ██╗    ██╗ ██████╗ ██████╗ ██╗  ██╗       ██████╗ ███████╗
+ ██╔════╝██╔═══██╗██║    ██║██╔═══██╗██╔══██╗██║ ██╔╝      ██╔═══██╗██╔════╝
+ ██║     ██║   ██║██║ █╗ ██║██║   ██║██████╔╝█████╔╝ █████╗██║   ██║███████╗
+ ██║     ██║   ██║██║███╗██║██║   ██║██╔══██╗██╔═██╗ ╚════╝██║   ██║╚════██║
+ ╚██████╗╚██████╔╝╚███╔███╔╝╚██████╔╝██║  ██║██║  ██╗      ╚██████╔╝███████║
+  ╚═════╝ ╚═════╝  ╚══╝╚══╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝       ╚═════╝ ╚══════╝`}</pre>
+          <div className="cli-version">{appVersion ? `v${appVersion}` : ''}</div>
+        </div>
+
+        {/* Terminal Info */}
+        <div className="cli-init-info">
+          <div className="cli-line">
+            <span className="cli-prompt">$</span>
+            <span className="cli-text">Welcome to CoWork OS</span>
+          </div>
+          <div className="cli-line">
+            <span className="cli-prompt">$</span>
+            <span className="cli-text">Select a workspace folder to initialize your environment</span>
+          </div>
+          <div className="cli-line cli-blink">
+            <span className="cli-prompt">$</span>
+            <span className="cli-text">Waiting for workspace selection...</span>
+            <span className="cli-cursor-block">_</span>
+          </div>
+        </div>
+
+        {/* Recent Workspaces */}
+        {workspaces.length > 0 && (
+          <div className="cli-workspace-list">
+            <div className="cli-section-header">
+              <span className="cli-section-prompt">&gt;</span>
+              <span className="cli-section-title">RECENT_WORKSPACES</span>
+            </div>
+            {workspaces.map((workspace, index) => (
+              <div
+                key={workspace.id}
+                className="cli-workspace-item"
+                onClick={() => onWorkspaceSelected(workspace)}
+              >
+                <span className="cli-item-num">{String(index + 1).padStart(2, '0')}</span>
+                <span className="cli-item-icon">[dir]</span>
+                <div className="cli-item-info">
+                  <span className="cli-item-name">{workspace.name}/</span>
+                  <span className="cli-item-path">{workspace.path}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Select Folder Action */}
+        <div className="cli-workspace-actions">
+          <button className="cli-action-btn" onClick={handleSelectFolder}>
+            <span className="cli-btn-bracket">[</span>
+            <span className="cli-btn-icon">+</span>
+            <span className="cli-btn-bracket">]</span>
+            <span className="cli-btn-text">select_folder</span>
+          </button>
+          <p className="cli-hint"># choose a directory for CoWork OS to operate in</p>
+        </div>
+
+        {/* Footer */}
+        <div className="cli-init-footer">
+          <span className="cli-footer-prompt">$</span>
+          <span className="cli-footer-text">ready</span>
+        </div>
+      </div>
+    </div>
+  );
+}