agent-relay 2.0.22 → 2.0.24

package/packages/dashboard/ui/react-components/ThreadList.tsx

@@ -1,198 +0,0 @@
-/**
- * ThreadList Component
- *
- * Displays a list of active threads in the sidebar with unread indicators.
- * Features a refined design with subtle glows and smooth transitions.
- */
-
-import React from 'react';
-import type { ThreadInfo } from './hooks/useMessages';
-
-export interface ThreadListProps {
-  threads: ThreadInfo[];
-  currentThread?: string | null;
-  onThreadSelect: (threadId: string) => void;
-  /** Total unread count for the threads section header badge */
-  totalUnreadCount?: number;
-  /** Whether the threads section is collapsed */
-  isCollapsed?: boolean;
-  /** Callback to toggle the collapsed state */
-  onToggleCollapse?: () => void;
-}
-
-export function ThreadList({
-  threads,
-  currentThread,
-  onThreadSelect,
-  totalUnreadCount = 0,
-  isCollapsed = false,
-  onToggleCollapse,
-}: ThreadListProps) {
-  if (threads.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="px-2 py-2">
-      {/* Section Header */}
-      <button
-        className="w-full flex items-center justify-between px-2 py-2 mb-1.5 bg-transparent border-none cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(255,255,255,0.03)] hover:to-transparent"
-        onClick={onToggleCollapse}
-        aria-expanded={!isCollapsed}
-        aria-label={isCollapsed ? 'Expand threads' : 'Collapse threads'}
-      >
-        <div className="flex items-center gap-2">
-          <CollapseIcon isCollapsed={isCollapsed} />
-          <span className="text-xs font-semibold uppercase tracking-wider text-text-muted">
-            Threads
-          </span>
-          <span className="text-xs text-text-dim font-mono">({threads.length})</span>
-        </div>
-        {totalUnreadCount > 0 && (
-          <span
-            className="min-w-[18px] h-[18px] flex items-center justify-center text-[10px] font-bold bg-accent-cyan text-bg-deep rounded-full px-1.5"
-            style={{ boxShadow: '0 0 8px rgba(0, 217, 255, 0.5)' }}
-          >
-            {totalUnreadCount > 99 ? '99+' : totalUnreadCount}
-          </span>
-        )}
-      </button>
-
-      {/* Thread Items - only show when not collapsed */}
-      {!isCollapsed && (
-        <div className="space-y-1">
-          {threads.map((thread) => (
-            <ThreadItem
-              key={thread.id}
-              thread={thread}
-              isSelected={currentThread === thread.id}
-              onClick={() => onThreadSelect(thread.id)}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface ThreadItemProps {
-  thread: ThreadInfo;
-  isSelected: boolean;
-  onClick: () => void;
-}
-
-function ThreadItem({ thread, isSelected, onClick }: ThreadItemProps) {
-  const hasUnread = thread.unreadCount > 0;
-  const timestamp = formatRelativeTime(thread.lastMessage.timestamp);
-
-  return (
-    <button
-      className={`
-        group w-full flex items-center gap-3 px-2.5 py-2.5 rounded-lg text-left transition-all duration-200 cursor-pointer border-none
-        hover:bg-gradient-to-r hover:from-[rgba(255,255,255,0.03)] hover:to-transparent
-        ${isSelected
-          ? 'bg-gradient-to-r from-[rgba(255,255,255,0.06)] to-transparent'
-          : 'bg-transparent'
-        }
-      `}
-      onClick={onClick}
-      style={{
-        borderLeft: isSelected ? '2px solid #00d9ff' : '2px solid transparent',
-        boxShadow: isSelected ? 'inset 4px 0 12px -4px rgba(0, 217, 255, 0.25)' : 'none',
-      }}
-    >
-      {/* Thread Icon */}
-      <div
-        className={`
-          relative shrink-0 w-8 h-8 rounded-lg flex items-center justify-center overflow-hidden transition-all duration-200
-          ${hasUnread ? 'text-accent-cyan' : 'text-text-muted'}
-        `}
-        style={{
-          background: hasUnread
-            ? 'linear-gradient(135deg, rgba(0, 217, 255, 0.2), rgba(0, 217, 255, 0.1))'
-            : 'rgba(255, 255, 255, 0.03)',
-          boxShadow: hasUnread ? '0 0 8px rgba(0, 217, 255, 0.2)' : 'none',
-        }}
-      >
-        {/* Subtle shine overlay */}
-        <div
-          className="absolute inset-0 opacity-20"
-          style={{
-            background: 'linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%)',
-          }}
-        />
-        <ThreadIcon />
-      </div>
-
-      {/* Thread Info */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className={`
-            text-[13px] truncate transition-colors duration-200
-            ${hasUnread ? 'font-semibold text-text-primary' : 'text-text-secondary group-hover:text-text-primary'}
-          `}>
-            {thread.name}
-          </span>
-          {hasUnread && (
-            <span
-              className="shrink-0 min-w-[16px] h-[16px] flex items-center justify-center text-[9px] font-bold bg-accent-cyan text-bg-deep rounded-full px-1"
-              style={{ boxShadow: '0 0 6px rgba(0, 217, 255, 0.4)' }}
-            >
-              {thread.unreadCount > 99 ? '99+' : thread.unreadCount}
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-1.5 text-[11px] text-text-muted font-mono">
-          <span className="truncate">{thread.participants.slice(0, 2).join(', ')}</span>
-          {thread.participants.length > 2 && (
-            <span className="text-text-dim">+{thread.participants.length - 2}</span>
-          )}
-          <span className="text-text-dim opacity-50">·</span>
-          <span className="text-text-dim">{timestamp}</span>
-        </div>
-      </div>
-    </button>
-  );
-}
-
-function formatRelativeTime(timestamp: string | number): string {
-  const date = new Date(timestamp);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / (1000 * 60));
-  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-
-  if (diffMins < 1) return 'now';
-  if (diffMins < 60) return `${diffMins}m`;
-  if (diffHours < 24) return `${diffHours}h`;
-  if (diffDays < 7) return `${diffDays}d`;
-
-  return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
-}
-
-function ThreadIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-    </svg>
-  );
-}
-
-function CollapseIcon({ isCollapsed }: { isCollapsed: boolean }) {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={`text-text-muted transition-transform duration-200 ${isCollapsed ? '' : 'rotate-90'}`}
-    >
-      <polyline points="9 18 15 12 9 6" />
-    </svg>
-  );
-}

package/packages/dashboard/ui/react-components/ThreadPanel.tsx

@@ -1,346 +0,0 @@
-/**
- * ThreadPanel Component
- *
- * Displays a thread view with the original message and all replies.
- * Includes a reply composer for adding messages to the thread.
- */
-
-import React, { useState, useRef, useEffect } from 'react';
-import type { Message, Attachment } from '../types';
-import { getAgentColor, getAgentInitials } from '../lib/colors';
-import type { CurrentUser } from './MessageList';
-import { formatMessageBody } from './utils/messageFormatting';
-
-export interface ThreadPanelProps {
-  /** The original message that started the thread */
-  originalMessage: Message | null;
-  /** All replies in this thread */
-  replies: Message[];
-  /** Called when user wants to close the thread panel */
-  onClose: () => void;
-  /** Called when user sends a reply */
-  onReply: (content: string) => Promise<boolean>;
-  /** Whether a reply is currently being sent */
-  isSending?: boolean;
-  /** Current user info (for cloud mode - shows avatar/username instead of "Dashboard") */
-  currentUser?: CurrentUser;
-  /** Show timestamps for messages */
-  showTimestamps?: boolean;
-}
-
-export function ThreadPanel({
-  originalMessage,
-  replies,
-  onClose,
-  onReply,
-  isSending = false,
-  currentUser,
-  showTimestamps = true,
-}: ThreadPanelProps) {
-  const [replyContent, setReplyContent] = useState('');
-  const bottomRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  // Auto-scroll when new replies arrive
-  useEffect(() => {
-    // Use requestAnimationFrame to ensure DOM has been updated
-    requestAnimationFrame(() => {
-      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-    });
-  }, [replies.length]);
-
-  // Focus input when panel opens
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, [originalMessage?.id]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!replyContent.trim() || isSending) return;
-
-    const success = await onReply(replyContent.trim());
-    if (success) {
-      setReplyContent('');
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
-    }
-  };
-
-  if (!originalMessage) {
-    return null;
-  }
-
-  return (
-    <div className="flex flex-col h-full bg-bg-primary border-l border-border">
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-bg-secondary">
-        <div className="flex items-center gap-2">
-          <ThreadIcon />
-          <span className="font-semibold text-sm text-text-primary">Thread</span>
-          <span className="text-text-muted text-xs">
-            {replies.length} {replies.length === 1 ? 'reply' : 'replies'}
-          </span>
-        </div>
-        <button
-          onClick={onClose}
-          className="p-1.5 rounded hover:bg-bg-hover transition-colors text-text-muted hover:text-text-primary"
-          title="Close thread"
-        >
-          <CloseIcon />
-        </button>
-      </div>
-
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto">
-        {/* Original Message */}
-        <div className="p-4 border-b border-border">
-          <ThreadMessage
-            message={originalMessage}
-            isOriginal
-            currentUser={currentUser}
-            showTimestamps={showTimestamps}
-          />
-        </div>
-
-        {/* Replies */}
-        <div className="p-4 space-y-3">
-          {replies.length === 0 ? (
-            <div className="text-center text-text-muted text-sm py-8">
-              No replies yet. Be the first to reply!
-            </div>
-          ) : (
-            replies.map((reply) => (
-              <ThreadMessage
-                key={reply.id}
-                message={reply}
-                currentUser={currentUser}
-                showTimestamps={showTimestamps}
-              />
-            ))
-          )}
-          <div ref={bottomRef} />
-        </div>
-      </div>
-
-      {/* Reply Composer */}
-      <div className="p-4 border-t border-border bg-bg-secondary">
-        <form onSubmit={handleSubmit} className="flex gap-2">
-          <textarea
-            ref={inputRef}
-            value={replyContent}
-            onChange={(e) => setReplyContent(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Reply to thread..."
-            disabled={isSending}
-            rows={1}
-            className="flex-1 py-2 px-3 bg-bg-primary border border-border rounded-md text-sm text-text-primary resize-none min-h-[40px] max-h-[100px] overflow-y-auto focus:outline-none focus:border-accent transition-colors placeholder:text-text-muted"
-          />
-          <button
-            type="submit"
-            disabled={!replyContent.trim() || isSending}
-            className="px-4 py-2 bg-accent text-white rounded-md text-sm font-medium transition-colors hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {isSending ? 'Sending...' : 'Reply'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-interface ThreadMessageProps {
-  message: Message;
-  isOriginal?: boolean;
-  currentUser?: CurrentUser;
-  showTimestamps?: boolean;
-}
-
-function ThreadMessage({ message, isOriginal, currentUser, showTimestamps = true }: ThreadMessageProps) {
-  const colors = getAgentColor(message.from);
-  const timestamp = formatTimestamp(message.timestamp);
-
-  // Check if this message is from the current user (Dashboard or their GitHub username)
-  const isFromCurrentUser = message.from === 'Dashboard' ||
-    (currentUser && message.from === currentUser.displayName);
-
-  // Display name: use GitHub username if available, otherwise message.from
-  const displayName = isFromCurrentUser && currentUser
-    ? currentUser.displayName
-    : message.from;
-
-  return (
-    <div className={`flex gap-3 ${isOriginal ? '' : 'pl-2'}`}>
-      {/* Avatar/Icon */}
-      {isFromCurrentUser && currentUser?.avatarUrl ? (
-        <img
-          src={currentUser.avatarUrl}
-          alt={displayName}
-          className="shrink-0 w-8 h-8 rounded-lg object-cover"
-        />
-      ) : (
-        <div
-          className="shrink-0 w-8 h-8 rounded-lg flex items-center justify-center font-semibold text-xs"
-          style={{ backgroundColor: colors.primary, color: colors.text }}
-        >
-          {getAgentInitials(message.from)}
-        </div>
-      )}
-
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2 mb-1">
-          <span className="font-semibold text-sm text-text-primary">{displayName}</span>
-          {message.to !== '*' && !isOriginal && (
-            <>
-              <span className="text-text-muted text-xs">→</span>
-              <span className="text-sm text-accent">{message.to}</span>
-            </>
-          )}
-          {showTimestamps && (
-            <span className="text-text-muted text-xs">{timestamp}</span>
-          )}
-          {isOriginal && (
-            <span className="text-[10px] py-0.5 px-1.5 rounded bg-accent-light text-accent font-medium">
-              Original
-            </span>
-          )}
-        </div>
-
-        <div className="text-sm leading-relaxed text-text-primary whitespace-pre-wrap break-words">
-          {formatMessageBody(message.content)}
-        </div>
-
-        {/* Attachments */}
-        {message.attachments && message.attachments.length > 0 && (
-          <ThreadAttachments attachments={message.attachments} />
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Thread Attachments Component
- * Displays image attachments with lightbox functionality
- */
-interface ThreadAttachmentsProps {
-  attachments: Attachment[];
-}
-
-function ThreadAttachments({ attachments }: ThreadAttachmentsProps) {
-  const [lightboxImage, setLightboxImage] = useState<Attachment | null>(null);
-
-  const imageAttachments = attachments.filter(a =>
-    a.mimeType.startsWith('image/')
-  );
-
-  if (imageAttachments.length === 0) return null;
-
-  return (
-    <>
-      <div className="flex flex-wrap gap-2 mt-2">
-        {imageAttachments.map((attachment) => (
-          <button
-            key={attachment.id}
-            type="button"
-            onClick={() => setLightboxImage(attachment)}
-            className="relative group cursor-pointer bg-transparent border-0 p-0"
-            title={`View ${attachment.filename}`}
-          >
-            <img
-              src={attachment.data || attachment.url}
-              alt={attachment.filename}
-              className="max-h-32 max-w-[200px] rounded-lg border border-border object-cover transition-all duration-150 group-hover:border-accent/50 group-hover:shadow-md"
-              loading="lazy"
-            />
-            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 rounded-lg transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="white"
-                strokeWidth="2"
-                className="drop-shadow-lg"
-              >
-                <circle cx="11" cy="11" r="8" />
-                <line x1="21" y1="21" x2="16.65" y2="16.65" />
-                <line x1="11" y1="8" x2="11" y2="14" />
-                <line x1="8" y1="11" x2="14" y2="11" />
-              </svg>
-            </div>
-          </button>
-        ))}
-      </div>
-
-      {/* Lightbox Modal */}
-      {lightboxImage && (
-        <div
-          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-sm"
-          onClick={() => setLightboxImage(null)}
-        >
-          <div className="relative max-w-[90vw] max-h-[90vh]">
-            <img
-              src={lightboxImage.data || lightboxImage.url}
-              alt={lightboxImage.filename}
-              className="max-w-full max-h-[90vh] rounded-lg shadow-2xl"
-              onClick={(e) => e.stopPropagation()}
-            />
-            <button
-              type="button"
-              onClick={() => setLightboxImage(null)}
-              className="absolute -top-3 -right-3 w-8 h-8 bg-bg-primary border border-border rounded-full flex items-center justify-center text-text-muted hover:text-text-primary hover:bg-bg-secondary transition-colors shadow-lg"
-              title="Close"
-            >
-              <svg width="16" height="16" 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 className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/60 to-transparent rounded-b-lg">
-              <p className="text-white text-sm truncate">{lightboxImage.filename}</p>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
-
-function formatTimestamp(timestamp: string | number): string {
-  const date = new Date(timestamp);
-  const now = new Date();
-  const isToday = date.toDateString() === now.toDateString();
-
-  if (isToday) {
-    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-  }
-
-  return date.toLocaleDateString([], {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-}
-
-function ThreadIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-text-primary">
-      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-    </svg>
-  );
-}
-
-function CloseIcon() {
-  return (
-    <svg width="16" height="16" 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>
-  );
-}