cowork-os 0.3.21

package/src/renderer/components/TaskBoardCard.tsx

@@ -0,0 +1,357 @@
+import { useState } from 'react';
+import {
+  TaskLabelData,
+  AgentRoleData,
+} from '../../electron/preload';
+
+interface Task {
+  id: string;
+  title: string;
+  status: string;
+  boardColumn?: string;
+  priority?: number;
+  labels?: string[];
+  dueDate?: number;
+  estimatedMinutes?: number;
+  assignedAgentRoleId?: string;
+  createdAt: number;
+}
+
+interface TaskBoardCardProps {
+  task: Task;
+  labels: TaskLabelData[];
+  agents: Record<string, AgentRoleData>;
+  onPriorityChange: (taskId: string, priority: number) => void;
+  onSelect: (task: Task) => void;
+  isDragging?: boolean;
+}
+
+const PRIORITY_LABELS: Record<number, { label: string; color: string }> = {
+  0: { label: 'None', color: '#6b7280' },
+  1: { label: 'Low', color: '#22c55e' },
+  2: { label: 'Medium', color: '#f59e0b' },
+  3: { label: 'High', color: '#ef4444' },
+  4: { label: 'Urgent', color: '#dc2626' },
+};
+
+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();
+}
+
+function formatDueDate(timestamp: number): { text: string; isOverdue: boolean } {
+  const now = Date.now();
+  const diffMs = timestamp - now;
+  const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffDays < 0) {
+    return { text: `${Math.abs(diffDays)}d overdue`, isOverdue: true };
+  }
+  if (diffDays === 0) {
+    return { text: 'Due today', isOverdue: false };
+  }
+  if (diffDays === 1) {
+    return { text: 'Due tomorrow', isOverdue: false };
+  }
+  if (diffDays <= 7) {
+    return { text: `Due in ${diffDays}d`, isOverdue: false };
+  }
+
+  return { text: new Date(timestamp).toLocaleDateString(), isOverdue: false };
+}
+
+export function TaskBoardCard({
+  task,
+  labels,
+  agents,
+  onPriorityChange,
+  onSelect,
+  isDragging,
+}: TaskBoardCardProps) {
+  const [showActions, setShowActions] = useState(false);
+
+  const taskLabels = labels.filter(l => task.labels?.includes(l.id));
+  const assignedAgent = task.assignedAgentRoleId ? agents[task.assignedAgentRoleId] : null;
+  const priority = PRIORITY_LABELS[task.priority || 0];
+  const dueInfo = task.dueDate ? formatDueDate(task.dueDate) : null;
+
+  const handleDragStart = (e: React.DragEvent) => {
+    e.dataTransfer.setData('text/plain', task.id);
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  return (
+    <div
+      className={`task-board-card ${isDragging ? 'dragging' : ''}`}
+      draggable
+      onDragStart={handleDragStart}
+      onClick={() => onSelect(task)}
+      onMouseEnter={() => setShowActions(true)}
+      onMouseLeave={() => setShowActions(false)}
+    >
+      <div className="card-header">
+        <div className="card-labels">
+          {taskLabels.map(label => (
+            <span
+              key={label.id}
+              className="card-label"
+              style={{ backgroundColor: label.color }}
+            >
+              {label.name}
+            </span>
+          ))}
+        </div>
+        {task.priority !== undefined && task.priority > 0 && (
+          <span
+            className="card-priority"
+            style={{ backgroundColor: priority.color }}
+            title={`Priority: ${priority.label}`}
+          >
+            {priority.label}
+          </span>
+        )}
+      </div>
+
+      <div className="card-title">{task.title}</div>
+
+      <div className="card-meta">
+        {assignedAgent && (
+          <div className="card-agent" title={assignedAgent.displayName}>
+            <span
+              className="agent-avatar"
+              style={{ backgroundColor: assignedAgent.color }}
+            >
+              {assignedAgent.icon}
+            </span>
+            <span className="agent-name">{assignedAgent.displayName}</span>
+          </div>
+        )}
+        {dueInfo && (
+          <span className={`card-due ${dueInfo.isOverdue ? 'overdue' : ''}`}>
+            {dueInfo.text}
+          </span>
+        )}
+        {task.estimatedMinutes && (
+          <span className="card-estimate">
+            {task.estimatedMinutes < 60
+              ? `${task.estimatedMinutes}m`
+              : `${Math.round(task.estimatedMinutes / 60)}h`}
+          </span>
+        )}
+      </div>
+
+      <div className="card-footer">
+        <span className="card-time">{formatTimeAgo(task.createdAt)}</span>
+        <span className={`card-status status-${task.status}`}>{task.status}</span>
+      </div>
+
+      {showActions && (
+        <div className="card-quick-actions">
+          <button
+            className="quick-action-btn"
+            onClick={(e) => {
+              e.stopPropagation();
+              const newPriority = ((task.priority || 0) + 1) % 5;
+              onPriorityChange(task.id, newPriority);
+            }}
+            title="Cycle priority"
+          >
+            !
+          </button>
+        </div>
+      )}
+
+      <style>{`
+        .task-board-card {
+          background: var(--bg-primary);
+          border-radius: 8px;
+          padding: 12px;
+          cursor: pointer;
+          transition: all 0.15s ease;
+          border: 1px solid var(--border-color);
+          position: relative;
+        }
+
+        .task-board-card:hover {
+          border-color: var(--accent-color);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .task-board-card.dragging {
+          opacity: 0.5;
+          transform: rotate(2deg);
+        }
+
+        .card-header {
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+          gap: 8px;
+          margin-bottom: 8px;
+          min-height: 20px;
+        }
+
+        .card-labels {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 4px;
+        }
+
+        .card-label {
+          font-size: 10px;
+          font-weight: 500;
+          color: white;
+          padding: 2px 6px;
+          border-radius: 3px;
+        }
+
+        .card-priority {
+          font-size: 9px;
+          font-weight: 600;
+          color: white;
+          padding: 2px 6px;
+          border-radius: 3px;
+          text-transform: uppercase;
+          flex-shrink: 0;
+        }
+
+        .card-title {
+          font-size: 13px;
+          font-weight: 500;
+          color: var(--text-primary);
+          line-height: 1.4;
+          margin-bottom: 8px;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        .card-meta {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          flex-wrap: wrap;
+          margin-bottom: 8px;
+        }
+
+        .card-agent {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        }
+
+        .card-agent .agent-avatar {
+          width: 18px;
+          height: 18px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 10px;
+        }
+
+        .card-agent .agent-name {
+          font-size: 11px;
+          color: var(--text-secondary);
+        }
+
+        .card-due {
+          font-size: 11px;
+          color: var(--text-secondary);
+        }
+
+        .card-due.overdue {
+          color: #ef4444;
+          font-weight: 500;
+        }
+
+        .card-estimate {
+          font-size: 11px;
+          color: var(--text-tertiary);
+          background: var(--bg-secondary);
+          padding: 1px 4px;
+          border-radius: 3px;
+        }
+
+        .card-footer {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        .card-time {
+          font-size: 10px;
+          color: var(--text-tertiary);
+        }
+
+        .card-status {
+          font-size: 10px;
+          padding: 2px 6px;
+          border-radius: 3px;
+          background: var(--bg-secondary);
+          color: var(--text-secondary);
+        }
+
+        .card-status.status-running {
+          background: #3b82f620;
+          color: #3b82f6;
+        }
+
+        .card-status.status-completed {
+          background: #22c55e20;
+          color: #22c55e;
+        }
+
+        .card-status.status-paused {
+          background: #f59e0b20;
+          color: #f59e0b;
+        }
+
+        .card-status.status-blocked {
+          background: #f59e0b20;
+          color: #f59e0b;
+        }
+
+        .card-status.status-failed {
+          background: #ef444420;
+          color: #ef4444;
+        }
+
+        .card-quick-actions {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          display: flex;
+          gap: 4px;
+        }
+
+        .quick-action-btn {
+          width: 20px;
+          height: 20px;
+          border: none;
+          border-radius: 4px;
+          background: var(--bg-tertiary);
+          color: var(--text-secondary);
+          cursor: pointer;
+          font-size: 12px;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .quick-action-btn:hover {
+          background: var(--accent-color);
+          color: white;
+        }
+      `}</style>
+    </div>
+  );
+}

package/src/renderer/components/TaskBoardColumn.tsx

@@ -0,0 +1,211 @@
+import { useState } from 'react';
+import {
+  TaskBoardColumn as ColumnType,
+  TaskLabelData,
+  AgentRoleData,
+} from '../../electron/preload';
+import { TaskBoardCard } from './TaskBoardCard';
+import { useAgentContext } from '../hooks/useAgentContext';
+
+interface Task {
+  id: string;
+  title: string;
+  status: string;
+  boardColumn?: string;
+  priority?: number;
+  labels?: string[];
+  dueDate?: number;
+  estimatedMinutes?: number;
+  assignedAgentRoleId?: string;
+  createdAt: number;
+}
+
+interface TaskBoardColumnProps {
+  column: ColumnType;
+  title: string;
+  tasks: Task[];
+  labels: TaskLabelData[];
+  agents: Record<string, AgentRoleData>;
+  onTaskMove: (taskId: string, column: ColumnType) => void;
+  onTaskPriorityChange: (taskId: string, priority: number) => void;
+  onTaskSelect: (task: Task) => void;
+  color: string;
+}
+
+const COLUMN_LIMITS: Record<ColumnType, number | null> = {
+  backlog: null,
+  todo: 10,
+  in_progress: 5,
+  review: 3,
+  done: null,
+};
+
+export function TaskBoardColumn({
+  column,
+  title,
+  tasks,
+  labels,
+  agents,
+  onTaskMove,
+  onTaskPriorityChange,
+  onTaskSelect,
+  color,
+}: TaskBoardColumnProps) {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const agentContext = useAgentContext();
+
+  const limit = COLUMN_LIMITS[column];
+  const isOverLimit = limit !== null && tasks.length > limit;
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const taskId = e.dataTransfer.getData('text/plain');
+    if (taskId) {
+      onTaskMove(taskId, column);
+    }
+  };
+
+  // Sort tasks by priority (higher first), then by creation date
+  const sortedTasks = [...tasks].sort((a, b) => {
+    const priorityDiff = (b.priority || 0) - (a.priority || 0);
+    if (priorityDiff !== 0) return priorityDiff;
+    return b.createdAt - a.createdAt;
+  });
+
+  return (
+    <div
+      className={`task-board-column ${isDragOver ? 'drag-over' : ''}`}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <div className="column-header">
+        <div className="column-title">
+          <span className="column-indicator" style={{ backgroundColor: color }} />
+          <span className="column-name">{title}</span>
+          <span className={`column-count ${isOverLimit ? 'over-limit' : ''}`}>
+            {tasks.length}
+            {limit !== null && `/${limit}`}
+          </span>
+        </div>
+      </div>
+
+      <div className="column-content">
+        {sortedTasks.map(task => (
+          <TaskBoardCard
+            key={task.id}
+            task={task}
+            labels={labels}
+            agents={agents}
+            onPriorityChange={onTaskPriorityChange}
+            onSelect={onTaskSelect}
+          />
+        ))}
+        {tasks.length === 0 && (
+          <div className="column-empty">
+            <p>{agentContext.getUiCopy('taskBoardEmptyTitle')}</p>
+            <p className="hint">{agentContext.getUiCopy('taskBoardEmptyHint')}</p>
+          </div>
+        )}
+      </div>
+
+      <style>{`
+        .task-board-column {
+          flex: 1;
+          min-width: 280px;
+          max-width: 350px;
+          background: var(--bg-secondary);
+          border-radius: 12px;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          transition: all 0.15s ease;
+        }
+
+        .task-board-column.drag-over {
+          background: var(--bg-tertiary);
+          box-shadow: inset 0 0 0 2px var(--accent-color);
+        }
+
+        .column-header {
+          padding: 12px 16px;
+          border-bottom: 1px solid var(--border-color);
+        }
+
+        .column-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .column-indicator {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+        }
+
+        .column-name {
+          font-size: 13px;
+          font-weight: 600;
+          color: var(--text-primary);
+          flex: 1;
+        }
+
+        .column-count {
+          font-size: 12px;
+          color: var(--text-tertiary);
+          background: var(--bg-primary);
+          padding: 2px 8px;
+          border-radius: 10px;
+        }
+
+        .column-count.over-limit {
+          background: #ef444420;
+          color: #ef4444;
+        }
+
+        .column-content {
+          flex: 1;
+          padding: 12px;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          overflow-y: auto;
+          min-height: 200px;
+        }
+
+        .column-empty {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          color: var(--text-tertiary);
+          padding: 40px 20px;
+          text-align: center;
+        }
+
+        .column-empty p {
+          margin: 0;
+        }
+
+        .column-empty .hint {
+          font-size: 12px;
+          opacity: 0.6;
+          margin-top: 4px;
+        }
+      `}</style>
+    </div>
+  );
+}