cowork-os 0.3.21

package/src/renderer/components/ActivityFeed.tsx

@@ -0,0 +1,407 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  ActivityData,
+  ActivityType,
+  ActivityActorType,
+  ActivityEvent,
+} from '../../electron/preload';
+import { ActivityFeedItem } from './ActivityFeedItem';
+import { useAgentContext } from '../hooks/useAgentContext';
+
+interface ActivityFeedProps {
+  workspaceId: string;
+  taskId?: string;
+  compact?: boolean;
+  maxItems?: number;
+  showFilters?: boolean;
+}
+
+const ACTIVITY_TYPE_LABELS: Partial<Record<ActivityType, string>> = {
+  task_created: 'Task Created',
+  task_started: 'Task Started',
+  task_completed: 'Task Completed',
+  task_failed: 'Task Failed',
+  task_paused: 'Task Paused',
+  task_resumed: 'Task Resumed',
+  comment: 'Comment',
+  file_created: 'File Created',
+  file_modified: 'File Modified',
+  command_executed: 'Command',
+  tool_used: 'Tool Used',
+  mention: 'Mention',
+  agent_assigned: 'Agent Assigned',
+  error: 'Error',
+  info: 'Info',
+};
+
+export function ActivityFeed({
+  workspaceId,
+  taskId,
+  compact = false,
+  maxItems = 50,
+  showFilters = true,
+}: ActivityFeedProps) {
+  const [activities, setActivities] = useState<ActivityData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filterType, setFilterType] = useState<ActivityType | ''>('');
+  const [filterActor, setFilterActor] = useState<ActivityActorType | ''>('');
+  const [showUnreadOnly, setShowUnreadOnly] = useState(false);
+  const agentContext = useAgentContext();
+
+  const loadActivities = useCallback(async () => {
+    try {
+      setLoading(true);
+      const query: any = {
+        workspaceId,
+        limit: maxItems,
+      };
+
+      if (taskId) {
+        query.taskId = taskId;
+      }
+
+      if (filterType) {
+        query.activityType = filterType;
+      }
+
+      if (filterActor) {
+        query.actorType = filterActor;
+      }
+
+      if (showUnreadOnly) {
+        query.isRead = false;
+      }
+
+      const result = await window.electronAPI.listActivities(query);
+      setActivities(result);
+      setError(null);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load activities');
+      console.error('Failed to load activities:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [workspaceId, taskId, maxItems, filterType, filterActor, showUnreadOnly]);
+
+  useEffect(() => {
+    loadActivities();
+  }, [loadActivities]);
+
+  // Subscribe to real-time activity events
+  useEffect(() => {
+    const unsubscribe = window.electronAPI.onActivityEvent((event: ActivityEvent) => {
+      switch (event.type) {
+        case 'created':
+          if (event.activity && event.activity.workspaceId === workspaceId) {
+            setActivities((prev) => [event.activity!, ...prev].slice(0, maxItems));
+          }
+          break;
+        case 'read':
+          setActivities((prev) =>
+            prev.map((a) => (a.id === event.id ? { ...a, isRead: true } : a))
+          );
+          break;
+        case 'all_read':
+          if (event.workspaceId === workspaceId) {
+            setActivities((prev) => prev.map((a) => ({ ...a, isRead: true })));
+          }
+          break;
+        case 'pinned':
+          if (event.activity) {
+            setActivities((prev) =>
+              prev.map((a) =>
+                a.id === event.activity!.id ? event.activity! : a
+              )
+            );
+          }
+          break;
+        case 'deleted':
+          setActivities((prev) => prev.filter((a) => a.id !== event.id));
+          break;
+      }
+    });
+
+    return () => unsubscribe();
+  }, [workspaceId, maxItems]);
+
+  const handleMarkRead = async (id: string) => {
+    try {
+      await window.electronAPI.markActivityRead(id);
+    } catch (err) {
+      console.error('Failed to mark activity as read:', err);
+    }
+  };
+
+  const handlePin = async (id: string) => {
+    try {
+      await window.electronAPI.pinActivity(id);
+    } catch (err) {
+      console.error('Failed to pin activity:', err);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await window.electronAPI.deleteActivity(id);
+    } catch (err) {
+      console.error('Failed to delete activity:', err);
+    }
+  };
+
+  const handleMarkAllRead = async () => {
+    try {
+      await window.electronAPI.markAllActivitiesRead(workspaceId);
+    } catch (err) {
+      console.error('Failed to mark all as read:', err);
+    }
+  };
+
+  const unreadCount = activities.filter((a) => !a.isRead).length;
+
+  // Separate pinned and regular activities
+  const pinnedActivities = activities.filter((a) => a.isPinned);
+  const regularActivities = activities.filter((a) => !a.isPinned);
+
+  if (loading && activities.length === 0) {
+    return <div className="activity-loading">{agentContext.getUiCopy('activityLoading')}</div>;
+  }
+
+  return (
+    <div className="activity-feed">
+      {showFilters && (
+        <div className="activity-feed-header">
+          <div className="activity-feed-title">
+            <h4>{agentContext.getUiCopy('activityTitle')}</h4>
+            {unreadCount > 0 && (
+              <span className="unread-badge">{unreadCount}</span>
+            )}
+          </div>
+          <div className="activity-feed-actions">
+            {unreadCount > 0 && (
+              <button
+                className="btn-text"
+                onClick={handleMarkAllRead}
+              >
+                {agentContext.getUiCopy('activityMarkAllRead')}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {showFilters && (
+        <div className="activity-filters">
+          <select
+            value={filterType}
+            onChange={(e) => setFilterType(e.target.value as ActivityType | '')}
+          >
+            <option value="">{agentContext.getUiCopy('activityAllTypes')}</option>
+            {Object.entries(ACTIVITY_TYPE_LABELS).map(([type, label]) => (
+              <option key={type} value={type}>
+                {label}
+              </option>
+            ))}
+          </select>
+
+          <select
+            value={filterActor}
+            onChange={(e) => setFilterActor(e.target.value as ActivityActorType | '')}
+          >
+            <option value="">{agentContext.getUiCopy('activityAllActors')}</option>
+            <option value="agent">{agentContext.getUiCopy('activityActorAgent')}</option>
+            <option value="user">{agentContext.getUiCopy('activityActorUser')}</option>
+            <option value="system">{agentContext.getUiCopy('activityActorSystem')}</option>
+          </select>
+
+          <label className="filter-checkbox">
+            <input
+              type="checkbox"
+              checked={showUnreadOnly}
+              onChange={(e) => setShowUnreadOnly(e.target.checked)}
+            />
+            {agentContext.getUiCopy('activityUnreadOnly')}
+          </label>
+        </div>
+      )}
+
+      {error && <div className="activity-error">{error}</div>}
+
+      <div className="activity-list">
+        {pinnedActivities.length > 0 && (
+          <div className="activity-group">
+            <div className="activity-group-title">{agentContext.getUiCopy('activityPinned')}</div>
+            {pinnedActivities.map((activity) => (
+              <ActivityFeedItem
+                key={activity.id}
+                activity={activity}
+                onMarkRead={handleMarkRead}
+                onPin={handlePin}
+                onDelete={handleDelete}
+                compact={compact}
+              />
+            ))}
+          </div>
+        )}
+
+        {regularActivities.length > 0 ? (
+          <div className="activity-group">
+            {pinnedActivities.length > 0 && (
+              <div className="activity-group-title">{agentContext.getUiCopy('activityRecent')}</div>
+            )}
+            {regularActivities.map((activity) => (
+              <ActivityFeedItem
+                key={activity.id}
+                activity={activity}
+                onMarkRead={handleMarkRead}
+                onPin={handlePin}
+                onDelete={handleDelete}
+                compact={compact}
+              />
+            ))}
+          </div>
+        ) : (
+          pinnedActivities.length === 0 && (
+            <div className="activity-empty">
+              <p>{agentContext.getUiCopy('activityEmptyTitle')}</p>
+              <p className="activity-empty-hint">
+                {agentContext.getUiCopy('activityEmptyHint')}
+              </p>
+            </div>
+          )
+        )}
+      </div>
+
+      <style>{`
+        .activity-feed {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+        }
+
+        .activity-feed-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 12px 16px;
+          border-bottom: 1px solid var(--border-color);
+        }
+
+        .activity-feed-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .activity-feed-title h4 {
+          margin: 0;
+          font-size: 14px;
+          font-weight: 600;
+        }
+
+        .unread-badge {
+          background: var(--accent-color);
+          color: white;
+          font-size: 11px;
+          font-weight: 600;
+          padding: 2px 6px;
+          border-radius: 10px;
+          min-width: 18px;
+          text-align: center;
+        }
+
+        .btn-text {
+          background: none;
+          border: none;
+          color: var(--accent-color);
+          font-size: 12px;
+          cursor: pointer;
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .btn-text:hover {
+          background: var(--bg-secondary);
+        }
+
+        .activity-filters {
+          display: flex;
+          gap: 8px;
+          padding: 12px 16px;
+          border-bottom: 1px solid var(--border-color);
+        }
+
+        .activity-filters select {
+          padding: 6px 10px;
+          border: 1px solid var(--border-color);
+          border-radius: 6px;
+          background: var(--bg-primary);
+          color: var(--text-primary);
+          font-size: 12px;
+          cursor: pointer;
+        }
+
+        .filter-checkbox {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 12px;
+          color: var(--text-secondary);
+          cursor: pointer;
+        }
+
+        .activity-list {
+          flex: 1;
+          overflow-y: auto;
+          padding: 12px 16px;
+        }
+
+        .activity-group {
+          margin-bottom: 16px;
+        }
+
+        .activity-group-title {
+          font-size: 11px;
+          font-weight: 600;
+          color: var(--text-tertiary);
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+          margin-bottom: 8px;
+        }
+
+        .activity-group > .activity-feed-item {
+          margin-bottom: 8px;
+        }
+
+        .activity-empty {
+          text-align: center;
+          padding: 40px 20px;
+          color: var(--text-secondary);
+        }
+
+        .activity-empty p {
+          margin: 0;
+        }
+
+        .activity-empty-hint {
+          font-size: 12px;
+          color: var(--text-tertiary);
+          margin-top: 8px !important;
+        }
+
+        .activity-error {
+          padding: 12px 16px;
+          background: color-mix(in srgb, var(--error-color) 10%, var(--bg-secondary));
+          color: var(--error-color);
+          font-size: 13px;
+        }
+
+        .activity-loading {
+          padding: 40px;
+          text-align: center;
+          color: var(--text-secondary);
+        }
+      `}</style>
+    </div>
+  );
+}

package/src/renderer/components/ActivityFeedItem.tsx

@@ -0,0 +1,285 @@
+import { ActivityData, ActivityType, ActivityActorType } from '../../electron/preload';
+
+interface ActivityFeedItemProps {
+  activity: ActivityData;
+  onMarkRead: (id: string) => void;
+  onPin: (id: string) => void;
+  onDelete: (id: string) => void;
+  compact?: boolean;
+}
+
+const ACTIVITY_ICONS: Record<ActivityType, string> = {
+  task_created: '📋',
+  task_started: '▶️',
+  task_completed: '✅',
+  task_failed: '❌',
+  task_paused: '⏸️',
+  task_resumed: '▶️',
+  comment: '💬',
+  file_created: '📄',
+  file_modified: '✏️',
+  file_deleted: '🗑️',
+  command_executed: '💻',
+  tool_used: '🔧',
+  mention: '@',
+  agent_assigned: '🤖',
+  error: '⚠️',
+  info: 'ℹ️',
+};
+
+const ACTIVITY_COLORS: Record<ActivityType, string> = {
+  task_created: '#3b82f6',
+  task_started: '#22c55e',
+  task_completed: '#22c55e',
+  task_failed: '#ef4444',
+  task_paused: '#f59e0b',
+  task_resumed: '#22c55e',
+  comment: '#ec4899',
+  file_created: '#8b5cf6',
+  file_modified: '#f59e0b',
+  file_deleted: '#ef4444',
+  command_executed: '#06b6d4',
+  tool_used: '#6366f1',
+  mention: '#ec4899',
+  agent_assigned: '#6366f1',
+  error: '#ef4444',
+  info: '#3b82f6',
+};
+
+const ACTOR_LABELS: Record<ActivityActorType, string> = {
+  agent: 'Agent',
+  user: 'User',
+  system: 'System',
+};
+
+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 ActivityFeedItem({
+  activity,
+  onMarkRead,
+  onPin,
+  onDelete,
+  compact = false,
+}: ActivityFeedItemProps) {
+  const icon = ACTIVITY_ICONS[activity.activityType];
+  const color = ACTIVITY_COLORS[activity.activityType];
+
+  const handleClick = () => {
+    if (!activity.isRead) {
+      onMarkRead(activity.id);
+    }
+  };
+
+  return (
+    <div
+      className={`activity-feed-item ${!activity.isRead ? 'unread' : ''} ${activity.isPinned ? 'pinned' : ''} ${compact ? 'compact' : ''}`}
+      onClick={handleClick}
+    >
+      <div className="activity-icon" style={{ backgroundColor: color }}>
+        {icon}
+      </div>
+
+      <div className="activity-content">
+        <div className="activity-header">
+          <span className="activity-title">{activity.title}</span>
+          <span className="activity-time">{formatTimeAgo(activity.createdAt)}</span>
+        </div>
+
+        {!compact && activity.description && (
+          <p className="activity-description">{activity.description}</p>
+        )}
+
+        <div className="activity-meta">
+          <span className="activity-actor">{ACTOR_LABELS[activity.actorType]}</span>
+          {activity.taskId && (
+            <span className="activity-task">Task</span>
+          )}
+        </div>
+      </div>
+
+      <div className="activity-actions">
+        <button
+          className={`activity-action-btn ${activity.isPinned ? 'active' : ''}`}
+          onClick={(e) => {
+            e.stopPropagation();
+            onPin(activity.id);
+          }}
+          title={activity.isPinned ? 'Unpin' : 'Pin'}
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill={activity.isPinned ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2">
+            <path d="M12 2l3 6h6l-5 5 2 9-6-4-6 4 2-9-5-5h6l3-6z" />
+          </svg>
+        </button>
+        <button
+          className="activity-action-btn"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete(activity.id);
+          }}
+          title="Delete"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+
+      {!activity.isRead && <div className="unread-indicator" />}
+
+      <style>{`
+        .activity-feed-item {
+          display: flex;
+          align-items: flex-start;
+          gap: 12px;
+          padding: 12px;
+          border-radius: 8px;
+          background: var(--bg-secondary);
+          cursor: pointer;
+          transition: all 0.15s ease;
+          position: relative;
+        }
+
+        .activity-feed-item:hover {
+          background: var(--bg-tertiary);
+        }
+
+        .activity-feed-item.unread {
+          background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-secondary));
+        }
+
+        .activity-feed-item.pinned {
+          border-left: 3px solid var(--accent-color);
+        }
+
+        .activity-feed-item.compact {
+          padding: 8px;
+        }
+
+        .activity-icon {
+          width: 32px;
+          height: 32px;
+          border-radius: 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          flex-shrink: 0;
+        }
+
+        .activity-feed-item.compact .activity-icon {
+          width: 24px;
+          height: 24px;
+          font-size: 12px;
+        }
+
+        .activity-content {
+          flex: 1;
+          min-width: 0;
+        }
+
+        .activity-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 8px;
+        }
+
+        .activity-title {
+          font-size: 13px;
+          font-weight: 500;
+          color: var(--text-primary);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .activity-time {
+          font-size: 11px;
+          color: var(--text-tertiary);
+          flex-shrink: 0;
+        }
+
+        .activity-description {
+          font-size: 12px;
+          color: var(--text-secondary);
+          margin: 4px 0 0 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+
+        .activity-meta {
+          display: flex;
+          gap: 8px;
+          margin-top: 6px;
+        }
+
+        .activity-actor,
+        .activity-task {
+          font-size: 10px;
+          padding: 2px 6px;
+          border-radius: 4px;
+          background: var(--bg-tertiary);
+          color: var(--text-tertiary);
+        }
+
+        .activity-actions {
+          display: flex;
+          gap: 4px;
+          opacity: 0;
+          transition: opacity 0.15s ease;
+        }
+
+        .activity-feed-item:hover .activity-actions {
+          opacity: 1;
+        }
+
+        .activity-action-btn {
+          width: 24px;
+          height: 24px;
+          border: none;
+          background: transparent;
+          color: var(--text-tertiary);
+          cursor: pointer;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.15s ease;
+        }
+
+        .activity-action-btn:hover {
+          background: var(--bg-tertiary);
+          color: var(--text-primary);
+        }
+
+        .activity-action-btn.active {
+          color: var(--accent-color);
+        }
+
+        .unread-indicator {
+          position: absolute;
+          top: 50%;
+          left: 4px;
+          transform: translateY(-50%);
+          width: 6px;
+          height: 6px;
+          background: var(--accent-color);
+          border-radius: 50%;
+        }
+      `}</style>
+    </div>
+  );
+}