cowork-os 0.3.21

package/src/renderer/components/AgentSquadSettings.tsx

@@ -0,0 +1,295 @@
+import { useState, useEffect } from 'react';
+import { AgentRoleData, AgentCapability } from '../../electron/preload';
+import { AgentRoleCard } from './AgentRoleCard';
+import { AgentRoleEditor } from './AgentRoleEditor';
+
+// Alias for UI usage
+type AgentRole = AgentRoleData;
+
+interface AgentSquadSettingsProps {
+  onSettingsChanged?: () => void;
+}
+
+export function AgentSquadSettings({ onSettingsChanged }: AgentSquadSettingsProps) {
+  const [roles, setRoles] = useState<AgentRole[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [editingRole, setEditingRole] = useState<AgentRole | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+
+  useEffect(() => {
+    loadRoles();
+  }, [showInactive]);
+
+  const loadRoles = async () => {
+    try {
+      setLoading(true);
+      const loadedRoles = await window.electronAPI.getAgentRoles(showInactive);
+      setRoles(loadedRoles);
+      setError(null);
+    } catch (err) {
+      setError('Failed to load agent roles');
+      console.error('Failed to load agent roles:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreate = () => {
+    setEditingRole({
+      id: '',
+      name: '',
+      displayName: '',
+      description: '',
+      icon: '🤖',
+      color: '#6366f1',
+      capabilities: ['code'] as AgentCapability[],
+      isSystem: false,
+      isActive: true,
+      sortOrder: 100,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    });
+    setIsCreating(true);
+  };
+
+  const handleEdit = (role: AgentRole) => {
+    setEditingRole({ ...role });
+    setIsCreating(false);
+  };
+
+  const handleSave = async (role: AgentRole) => {
+    try {
+      if (isCreating) {
+        const created = await window.electronAPI.createAgentRole({
+          name: role.name,
+          displayName: role.displayName,
+          description: role.description,
+          icon: role.icon,
+          color: role.color,
+          personalityId: role.personalityId,
+          modelKey: role.modelKey,
+          providerType: role.providerType,
+          systemPrompt: role.systemPrompt,
+          capabilities: role.capabilities,
+          toolRestrictions: role.toolRestrictions,
+        });
+        setRoles((prev) => [...prev, created]);
+      } else {
+        const updated = await window.electronAPI.updateAgentRole({
+          id: role.id,
+          displayName: role.displayName,
+          description: role.description,
+          icon: role.icon,
+          color: role.color,
+          personalityId: role.personalityId,
+          modelKey: role.modelKey,
+          providerType: role.providerType,
+          systemPrompt: role.systemPrompt,
+          capabilities: role.capabilities,
+          toolRestrictions: role.toolRestrictions,
+          isActive: role.isActive,
+          sortOrder: role.sortOrder,
+        });
+        if (updated) {
+          setRoles((prev) => prev.map((r) => (r.id === updated.id ? updated : r)));
+        }
+      }
+      setEditingRole(null);
+      setIsCreating(false);
+      setError(null);
+      onSettingsChanged?.();
+    } catch (err: any) {
+      setError(err.message || 'Failed to save agent role');
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Are you sure you want to delete this agent role?')) return;
+
+    try {
+      const success = await window.electronAPI.deleteAgentRole(id);
+      if (success) {
+        setRoles((prev) => prev.filter((r) => r.id !== id));
+        onSettingsChanged?.();
+      } else {
+        setError('Cannot delete system agent roles');
+      }
+    } catch (err) {
+      setError('Failed to delete agent role');
+    }
+  };
+
+  const handleToggleActive = async (role: AgentRole) => {
+    try {
+      const updated = await window.electronAPI.updateAgentRole({
+        id: role.id,
+        isActive: !role.isActive,
+      });
+      if (updated) {
+        setRoles((prev) => prev.map((r) => (r.id === updated.id ? updated : r)));
+        onSettingsChanged?.();
+      }
+    } catch (err) {
+      setError('Failed to update agent role');
+    }
+  };
+
+  const handleCancel = () => {
+    setEditingRole(null);
+    setIsCreating(false);
+  };
+
+  const handleSeedDefaults = async () => {
+    try {
+      const seeded = await window.electronAPI.seedDefaultAgentRoles();
+      if (seeded.length > 0) {
+        setRoles(seeded);
+        onSettingsChanged?.();
+      }
+    } catch (err) {
+      setError('Failed to seed default agent roles');
+    }
+  };
+
+  if (loading) {
+    return <div className="settings-loading">Loading agent roles...</div>;
+  }
+
+  // Show editor if editing or creating
+  if (editingRole) {
+    return (
+      <AgentRoleEditor
+        role={editingRole}
+        isCreating={isCreating}
+        onSave={handleSave}
+        onCancel={handleCancel}
+        error={error}
+      />
+    );
+  }
+
+  // Group roles by system vs custom
+  const systemRoles = roles.filter((r) => r.isSystem);
+  const customRoles = roles.filter((r) => !r.isSystem);
+
+  return (
+    <div className="agent-squad-settings">
+      <div className="settings-section">
+        <div className="settings-section-header">
+          <h3>Agent Squad</h3>
+          <div className="settings-section-actions">
+            <label className="checkbox-label" style={{ marginRight: '12px', fontSize: '13px' }}>
+              <input
+                type="checkbox"
+                checked={showInactive}
+                onChange={(e) => setShowInactive(e.target.checked)}
+              />
+              Show inactive
+            </label>
+            <button className="btn-primary btn-sm" onClick={handleCreate}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              New Agent Role
+            </button>
+          </div>
+        </div>
+        <p className="settings-description">
+          Define specialized agent roles for your team. Each role can have unique capabilities,
+          personality, and tool restrictions. Assign roles to tasks for focused work.
+        </p>
+      </div>
+
+      {error && <div className="settings-error">{error}</div>}
+
+      {roles.length === 0 ? (
+        <div className="agent-squad-empty">
+          <p>No agent roles configured.</p>
+          <p>Click "New Agent Role" to create your first specialized agent, or seed the defaults.</p>
+          <button className="btn-secondary" onClick={handleSeedDefaults} style={{ marginTop: '12px' }}>
+            Seed Default Roles
+          </button>
+        </div>
+      ) : (
+        <>
+          {/* System Roles */}
+          {systemRoles.length > 0 && (
+            <div className="agent-role-group">
+              <h4 className="agent-role-group-title">Built-in Roles</h4>
+              <div className="agent-role-grid">
+                {systemRoles.map((role) => (
+                  <AgentRoleCard
+                    key={role.id}
+                    role={role}
+                    onEdit={handleEdit}
+                    onDelete={handleDelete}
+                    onToggleActive={handleToggleActive}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Custom Roles */}
+          {customRoles.length > 0 && (
+            <div className="agent-role-group">
+              <h4 className="agent-role-group-title">Custom Roles</h4>
+              <div className="agent-role-grid">
+                {customRoles.map((role) => (
+                  <AgentRoleCard
+                    key={role.id}
+                    role={role}
+                    onEdit={handleEdit}
+                    onDelete={handleDelete}
+                    onToggleActive={handleToggleActive}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      <style>{`
+        .agent-squad-settings {
+          padding: 16px;
+        }
+
+        .agent-squad-empty {
+          text-align: center;
+          padding: 40px;
+          color: var(--text-secondary);
+          background: var(--bg-secondary);
+          border-radius: 8px;
+          margin-top: 16px;
+        }
+
+        .agent-squad-empty p {
+          margin: 0 0 8px 0;
+        }
+
+        .agent-role-group {
+          margin-top: 24px;
+        }
+
+        .agent-role-group-title {
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--text-secondary);
+          margin: 0 0 12px 0;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+        }
+
+        .agent-role-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+          gap: 12px;
+        }
+      `}</style>
+    </div>
+  );
+}

package/src/renderer/components/AgentWorkingStatePanel.tsx

@@ -0,0 +1,411 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  AgentWorkingStateData,
+  WorkingStateType,
+  AgentRoleData,
+} from '../../electron/preload';
+import { useAgentContext } from '../hooks/useAgentContext';
+
+interface AgentWorkingStatePanelProps {
+  agentRoleId: string;
+  workspaceId: string;
+  taskId?: string;
+  onEdit?: (state: AgentWorkingStateData) => void;
+}
+
+const STATE_TYPE_LABELS: Record<WorkingStateType, { label: string; icon: string; description: string }> = {
+  context: {
+    label: 'Context',
+    icon: '📋',
+    description: 'Background information and current understanding',
+  },
+  progress: {
+    label: 'Progress',
+    icon: '📊',
+    description: 'Current work progress and status',
+  },
+  notes: {
+    label: 'Notes',
+    icon: '📝',
+    description: 'Important observations and reminders',
+  },
+  plan: {
+    label: 'Plan',
+    icon: '🎯',
+    description: 'Action plan and next steps',
+  },
+};
+
+function formatTimeAgo(timestamp: number): string {
+  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+
+  if (seconds < 60) return 'just now';
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  if (seconds < 604800) return `${Math.floor(seconds / 86400)}d ago`;
+
+  return new Date(timestamp).toLocaleDateString();
+}
+
+export function AgentWorkingStatePanel({
+  agentRoleId,
+  workspaceId,
+  taskId,
+  onEdit,
+}: AgentWorkingStatePanelProps) {
+  const [states, setStates] = useState<AgentWorkingStateData[]>([]);
+  const [agent, setAgent] = useState<AgentRoleData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [expandedType, setExpandedType] = useState<WorkingStateType | null>(null);
+  const agentContext = useAgentContext();
+
+  const loadData = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      // Load agent info
+      const agentData = await window.electronAPI.getAgentRole(agentRoleId);
+      setAgent(agentData ?? null);
+
+      // Load all current working states for this agent/workspace
+      const stateTypes: WorkingStateType[] = ['context', 'progress', 'notes', 'plan'];
+      const loadedStates: AgentWorkingStateData[] = [];
+
+      for (const stateType of stateTypes) {
+        const state = await window.electronAPI.getCurrentWorkingState({
+          agentRoleId,
+          workspaceId,
+          taskId,
+          stateType,
+        });
+        if (state) {
+          loadedStates.push(state);
+        }
+      }
+
+      setStates(loadedStates);
+    } catch (err) {
+      console.error('Failed to load working states:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [agentRoleId, workspaceId, taskId]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const getStateByType = (type: WorkingStateType): AgentWorkingStateData | undefined => {
+    return states.find((s) => s.stateType === type);
+  };
+
+  if (loading) {
+    return (
+      <div className="working-state-panel loading">
+        <p>{agentContext.getUiCopy('workingStateLoading')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="working-state-panel">
+      <div className="panel-header">
+        {agent && (
+          <div className="agent-info">
+            <span
+              className="agent-avatar"
+              style={{ backgroundColor: agent.color }}
+            >
+              {agent.icon}
+            </span>
+            <div className="agent-details">
+              <span className="agent-name">{agent.displayName}</span>
+              <span className="agent-context">{agentContext.getUiCopy('workingStateTitle')}</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="state-sections">
+        {(Object.keys(STATE_TYPE_LABELS) as WorkingStateType[]).map((type) => {
+          const config = STATE_TYPE_LABELS[type];
+          const state = getStateByType(type);
+          const isExpanded = expandedType === type;
+
+          return (
+            <div
+              key={type}
+              className={`state-section ${state ? 'has-content' : 'empty'} ${isExpanded ? 'expanded' : ''}`}
+            >
+              <div
+                className="section-header"
+                onClick={() => setExpandedType(isExpanded ? null : type)}
+              >
+                <div className="section-title">
+                  <span className="section-icon">{config.icon}</span>
+                  <span className="section-name">{config.label}</span>
+                  {state && (
+                    <span className="section-updated">
+                      Updated {formatTimeAgo(state.updatedAt)}
+                    </span>
+                  )}
+                </div>
+                <div className="section-actions">
+                  {onEdit && (
+                    <button
+                      className="edit-btn"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (state) {
+                          onEdit(state);
+                        } else {
+                          // Create new state
+                          onEdit({
+                            id: '',
+                            agentRoleId,
+                            workspaceId,
+                            taskId,
+                            stateType: type,
+                            content: '',
+                            isCurrent: true,
+                            createdAt: Date.now(),
+                            updatedAt: Date.now(),
+                          });
+                        }
+                      }}
+                    >
+                      {state
+                        ? agentContext.getUiCopy('workingStateEdit')
+                        : agentContext.getUiCopy('workingStateAdd')}
+                    </button>
+                  )}
+                  <span className="expand-icon">{isExpanded ? '▼' : '▶'}</span>
+                </div>
+              </div>
+
+              {isExpanded && (
+                <div className="section-content">
+                  {state ? (
+                    <>
+                      <div className="content-text">{state.content}</div>
+                      {state.fileReferences && state.fileReferences.length > 0 && (
+                        <div className="file-references">
+                          <span className="ref-label">{agentContext.getUiCopy('workingStateReferencedFiles')}</span>
+                          {state.fileReferences.map((file, idx) => (
+                            <span key={idx} className="file-ref">
+                              {file}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <div className="empty-state">
+                      <p>{config.description}</p>
+                      <p className="hint">
+                        {agentContext.getUiCopy('workingStateEmptyHint', { label: config.label.toLowerCase() })}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      <style>{`
+        .working-state-panel {
+          background: var(--bg-secondary);
+          border-radius: 12px;
+          overflow: hidden;
+        }
+
+        .working-state-panel.loading {
+          padding: 40px;
+          text-align: center;
+          color: var(--text-secondary);
+        }
+
+        .panel-header {
+          padding: 16px;
+          border-bottom: 1px solid var(--border-color);
+        }
+
+        .agent-info {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+        }
+
+        .agent-avatar {
+          width: 36px;
+          height: 36px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 18px;
+        }
+
+        .agent-details {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+        }
+
+        .agent-name {
+          font-weight: 600;
+          color: var(--text-primary);
+        }
+
+        .agent-context {
+          font-size: 12px;
+          color: var(--text-tertiary);
+        }
+
+        .state-sections {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .state-section {
+          border-bottom: 1px solid var(--border-color);
+        }
+
+        .state-section:last-child {
+          border-bottom: none;
+        }
+
+        .section-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 12px 16px;
+          cursor: pointer;
+          transition: background 0.15s ease;
+        }
+
+        .section-header:hover {
+          background: var(--bg-tertiary);
+        }
+
+        .section-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .section-icon {
+          font-size: 16px;
+        }
+
+        .section-name {
+          font-weight: 500;
+          color: var(--text-primary);
+        }
+
+        .section-updated {
+          font-size: 11px;
+          color: var(--text-tertiary);
+          margin-left: 8px;
+        }
+
+        .section-actions {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .edit-btn {
+          padding: 4px 10px;
+          font-size: 11px;
+          background: var(--bg-tertiary);
+          border: none;
+          border-radius: 4px;
+          color: var(--text-secondary);
+          cursor: pointer;
+        }
+
+        .edit-btn:hover {
+          background: var(--accent-color);
+          color: white;
+        }
+
+        .expand-icon {
+          font-size: 10px;
+          color: var(--text-tertiary);
+        }
+
+        .section-content {
+          padding: 0 16px 16px 48px;
+        }
+
+        .content-text {
+          font-size: 13px;
+          color: var(--text-primary);
+          white-space: pre-wrap;
+          line-height: 1.6;
+        }
+
+        .file-references {
+          margin-top: 12px;
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+          align-items: center;
+        }
+
+        .ref-label {
+          font-size: 11px;
+          color: var(--text-tertiary);
+        }
+
+        .file-ref {
+          font-size: 11px;
+          color: var(--text-secondary);
+          background: var(--bg-primary);
+          padding: 2px 8px;
+          border-radius: 4px;
+          font-family: monospace;
+        }
+
+        .empty-state {
+          color: var(--text-tertiary);
+          font-size: 13px;
+        }
+
+        .empty-state p {
+          margin: 0 0 4px 0;
+        }
+
+        .empty-state .hint {
+          font-size: 12px;
+          opacity: 0.7;
+        }
+
+        .state-section.empty .section-name {
+          color: var(--text-tertiary);
+        }
+
+        .state-section.has-content .section-name {
+          color: var(--text-primary);
+        }
+
+        .state-section.has-content .section-header::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 3px;
+          background: var(--accent-color);
+        }
+
+        .state-section {
+          position: relative;
+        }
+      `}</style>
+    </div>
+  );
+}