agent-relay 2.0.22 → 2.0.24

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

@@ -1,69 +0,0 @@
-/**
- * TypingIndicator Component
- *
- * Shows animated typing indicator when other users are typing.
- * Displays user avatars and "X is typing..." text.
- */
-
-import React from 'react';
-import type { TypingIndicator as TypingIndicatorType } from './hooks/usePresence';
-
-export interface TypingIndicatorProps {
-  /** List of users currently typing */
-  typingUsers: TypingIndicatorType[];
-}
-
-export function TypingIndicator({ typingUsers }: TypingIndicatorProps) {
-  if (typingUsers.length === 0) {
-    return null;
-  }
-
-  // Format the typing text
-  const formatTypingText = () => {
-    if (typingUsers.length === 1) {
-      return `${typingUsers[0].username} is typing`;
-    } else if (typingUsers.length === 2) {
-      return `${typingUsers[0].username} and ${typingUsers[1].username} are typing`;
-    } else {
-      return `${typingUsers[0].username} and ${typingUsers.length - 1} others are typing`;
-    }
-  };
-
-  return (
-    <div className="flex items-center gap-2 px-4 py-2 text-sm text-[#8d8d8e]">
-      {/* Avatars */}
-      <div className="flex -space-x-1.5">
-        {typingUsers.slice(0, 3).map((user) => (
-          <div
-            key={user.username}
-            className="relative"
-            title={user.username}
-          >
-            {user.avatarUrl ? (
-              <img
-                src={user.avatarUrl}
-                alt={user.username}
-                className="w-5 h-5 rounded-full border border-[#1a1d21]"
-              />
-            ) : (
-              <div className="w-5 h-5 rounded-full bg-[#a855f7] border border-[#1a1d21] flex items-center justify-center text-[9px] text-white font-medium">
-                {user.username.charAt(0).toUpperCase()}
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-
-      {/* Typing text */}
-      <span className="flex items-center gap-1">
-        {formatTypingText()}
-        {/* Animated dots */}
-        <span className="flex gap-0.5">
-          <span className="w-1 h-1 bg-[#8d8d8e] rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
-          <span className="w-1 h-1 bg-[#8d8d8e] rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
-          <span className="w-1 h-1 bg-[#8d8d8e] rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
-        </span>
-      </span>
-    </div>
-  );
-}

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

@@ -1,231 +0,0 @@
-/**
- * Usage Banner Component
- *
- * Displays remaining compute hours for free tier users.
- * Shows warning when approaching limit and upgrade CTA when exceeded.
- */
-
-import React, { useEffect, useState } from 'react';
-
-interface UsageData {
-  plan: 'free' | 'pro' | 'team' | 'enterprise';
-  limits: {
-    computeHoursPerMonth: number;
-  };
-  usage: {
-    computeHoursThisMonth: number;
-  };
-  percentUsed: {
-    computeHours: number;
-  };
-  introBonus?: {
-    isActive: boolean;
-    daysRemaining: number;
-    totalDays: number;
-    expiresAt: string | null;
-    resources: {
-      cpus: number;
-      memoryGb: number;
-      description: string;
-    };
-  };
-}
-
-export interface UsageBannerProps {
-  /** API base URL (default: '') */
-  apiBaseUrl?: string;
-  /** Callback when upgrade is clicked */
-  onUpgradeClick?: () => void;
-}
-
-export function UsageBanner({ apiBaseUrl = '', onUpgradeClick }: UsageBannerProps) {
-  const [usage, setUsage] = useState<UsageData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [dismissed, setDismissed] = useState(false);
-
-  useEffect(() => {
-    async function fetchUsage() {
-      try {
-        const response = await fetch(`${apiBaseUrl}/api/usage`, {
-          credentials: 'include',
-        });
-
-        if (!response.ok) {
-          if (response.status === 401) {
-            // Not logged in, don't show banner
-            setLoading(false);
-            return;
-          }
-          throw new Error('Failed to fetch usage');
-        }
-
-        const data = await response.json();
-        setUsage(data);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Unknown error');
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchUsage();
-
-    // Refresh every 5 minutes
-    const interval = setInterval(fetchUsage, 5 * 60 * 1000);
-    return () => clearInterval(interval);
-  }, [apiBaseUrl]);
-
-  // Don't show for non-free plans
-  if (loading || error || !usage || usage.plan !== 'free' || dismissed) {
-    return null;
-  }
-
-  const { computeHoursThisMonth } = usage.usage;
-  const { computeHoursPerMonth } = usage.limits;
-  const percentUsed = usage.percentUsed.computeHours;
-  const remaining = Math.max(0, computeHoursPerMonth - computeHoursThisMonth);
-  const isExceeded = remaining <= 0;
-  const isWarning = percentUsed >= 80 && !isExceeded;
-
-  // Intro bonus status
-  const introBonus = usage.introBonus;
-  const hasActiveIntro = introBonus?.isActive && introBonus.daysRemaining > 0;
-
-  // Get current month name
-  const monthName = new Date().toLocaleDateString('en-US', { month: 'long' });
-
-  // Determine banner style
-  let bgClass = 'bg-bg-tertiary border-border-subtle';
-  let textClass = 'text-text-secondary';
-  let iconColor = 'text-accent-cyan';
-
-  if (isExceeded) {
-    bgClass = 'bg-error/10 border-error/30';
-    textClass = 'text-error';
-    iconColor = 'text-error';
-  } else if (isWarning) {
-    bgClass = 'bg-warning/10 border-warning/30';
-    textClass = 'text-warning';
-    iconColor = 'text-warning';
-  } else if (hasActiveIntro) {
-    // Special styling for intro bonus - use brand cyan
-    bgClass = 'bg-accent-cyan/10 border-accent-cyan/30';
-    textClass = 'text-accent-cyan';
-    iconColor = 'text-accent-cyan';
-  }
-
-  return (
-    <div className={`flex items-center justify-between px-4 py-2 border-b ${bgClass}`}>
-      <div className="flex items-center gap-3">
-        {hasActiveIntro ? <RocketIcon className={iconColor} /> : <ClockIcon className={iconColor} />}
-        <span className={`text-sm ${textClass}`}>
-          {isExceeded ? (
-            <>
-              <strong>Compute limit reached</strong> — Your free tier compute hours for {monthName} have been used.
-              Workspaces are paused until next month.
-            </>
-          ) : isWarning ? (
-            <>
-              <strong>{remaining.toFixed(1)}h remaining</strong> — You&apos;ve used {percentUsed}% of your
-              free tier compute hours for {monthName}.
-            </>
-          ) : hasActiveIntro ? (
-            <>
-              <strong>Intro Bonus Active</strong> — {introBonus!.resources.cpus} CPU / {introBonus!.resources.memoryGb}GB RAM.{' '}
-              <span className="text-text-secondary">
-                {introBonus!.daysRemaining} day{introBonus!.daysRemaining !== 1 ? 's' : ''} remaining before auto-resize to 1 CPU / 2GB.
-              </span>
-            </>
-          ) : (
-            <>
-              <strong>{remaining.toFixed(1)} of {computeHoursPerMonth}h</strong> compute hours remaining
-              this month
-            </>
-          )}
-        </span>
-      </div>
-
-      <div className="flex items-center gap-2">
-        {(isExceeded || isWarning || hasActiveIntro) && (
-          <button
-            onClick={onUpgradeClick || (() => window.location.href = '/pricing')}
-            className="px-3 py-1.5 bg-gradient-to-r from-accent-cyan to-[#00b8d9] text-bg-deep font-semibold border-none rounded-md text-xs cursor-pointer transition-all duration-150 hover:shadow-glow-cyan hover:-translate-y-0.5"
-          >
-            {hasActiveIntro ? 'Keep Pro Resources' : 'Upgrade Plan'}
-          </button>
-        )}
-
-        {!isExceeded && (
-          <button
-            onClick={() => setDismissed(true)}
-            className="p-1 text-text-muted hover:text-text-primary transition-colors"
-            aria-label="Dismiss"
-          >
-            <CloseIcon />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function ClockIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-    >
-      <circle cx="12" cy="12" r="10" />
-      <polyline points="12 6 12 12 16 14" />
-    </svg>
-  );
-}
-
-function CloseIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>
-  );
-}
-
-function RocketIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-    >
-      <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
-      <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
-      <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
-      <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
-    </svg>
-  );
-}
-
-export default UsageBanner;

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

@@ -1,233 +0,0 @@
-/**
- * UserProfilePanel Component
- *
- * Slide-out panel showing user profile details.
- * Displays avatar, username, GitHub link, and action buttons.
- */
-
-import React, { useEffect, useRef } from 'react';
-import type { UserPresence } from './hooks/usePresence';
-
-export interface UserProfilePanelProps {
-  /** User to display (null to hide panel) */
-  user: UserPresence | null;
-  /** Callback when panel should close */
-  onClose: () => void;
-  /** Callback when mention button is clicked */
-  onMention?: (username: string) => void;
-  /** Callback when send message button is clicked */
-  onSendMessage?: (user: UserPresence) => void;
-}
-
-export function UserProfilePanel({ user, onClose, onMention, onSendMessage }: UserProfilePanelProps) {
-  const panelRef = useRef<HTMLDivElement>(null);
-
-  // Close on Escape key
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    if (user) {
-      window.addEventListener('keydown', handleKeyDown);
-    }
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [user, onClose]);
-
-  // Close on outside click
-  // Use a ref to track if the panel just opened to avoid closing on the same click
-  const justOpenedRef = useRef(false);
-
-  useEffect(() => {
-    if (user) {
-      // Mark as just opened
-      justOpenedRef.current = true;
-    }
-  }, [user]);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      // Skip if panel just opened (same event loop tick that opened it)
-      if (justOpenedRef.current) {
-        justOpenedRef.current = false;
-        return;
-      }
-
-      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
-        onClose();
-      }
-    };
-
-    if (user) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [user, onClose]);
-
-  if (!user) {
-    return null;
-  }
-
-  const githubUrl = `https://github.com/${user.username}`;
-
-  return (
-    <>
-      {/* Backdrop */}
-      <div className="fixed inset-0 bg-black/50 z-40" />
-
-      {/* Panel */}
-      <div
-        ref={panelRef}
-        className="fixed right-0 top-0 h-full w-80 bg-[#1a1d21] border-l border-white/10 shadow-2xl z-50 flex flex-col animate-slide-in-right"
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-white/10">
-          <h2 className="text-lg font-semibold text-[#d1d2d3]">Profile</h2>
-          <button
-            onClick={onClose}
-            className="p-1 hover:bg-white/10 rounded-md transition-colors"
-            title="Close"
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        {/* User Info */}
-        <div className="flex flex-col items-center p-6 border-b border-white/10">
-          {/* Large Avatar */}
-          <div className="relative mb-4">
-            {user.avatarUrl ? (
-              <img
-                src={user.avatarUrl}
-                alt={user.username}
-                className="w-24 h-24 rounded-full object-cover border-4 border-[#a855f7]/30"
-              />
-            ) : (
-              <div className="w-24 h-24 rounded-full bg-[#a855f7] flex items-center justify-center text-3xl text-white font-bold border-4 border-[#a855f7]/30">
-                {user.username.charAt(0).toUpperCase()}
-              </div>
-            )}
-            {/* Online indicator */}
-            <div className="absolute bottom-1 right-1 w-5 h-5 bg-green-500 rounded-full border-4 border-[#1a1d21]" />
-          </div>
-
-          {/* Username */}
-          <h3 className="text-xl font-semibold text-[#d1d2d3] mb-1">
-            {user.username}
-          </h3>
-
-          {/* Status */}
-          <span className="text-sm text-green-400 flex items-center gap-1.5">
-            <div className="w-2 h-2 bg-green-500 rounded-full" />
-            Online
-          </span>
-        </div>
-
-        {/* Details */}
-        <div className="flex-1 p-4 overflow-y-auto">
-          <div className="space-y-4">
-            {/* Online Since */}
-            <div>
-              <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">Online Since</label>
-              <p className="text-sm text-[#d1d2d3] mt-1">
-                {formatDateTime(user.connectedAt)}
-              </p>
-            </div>
-
-            {/* Last Active */}
-            <div>
-              <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">Last Active</label>
-              <p className="text-sm text-[#d1d2d3] mt-1">
-                {formatDateTime(user.lastSeen)}
-              </p>
-            </div>
-
-            {/* GitHub Link */}
-            <div>
-              <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">GitHub</label>
-              <a
-                href={githubUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-2 mt-1 text-sm text-[#a855f7] hover:text-[#c084fc] transition-colors"
-              >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
-                </svg>
-                @{user.username}
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
-                </svg>
-              </a>
-            </div>
-          </div>
-        </div>
-
-        {/* Actions */}
-        <div className="p-4 border-t border-white/10 space-y-2">
-          {/* Send Message Button */}
-          <button
-            onClick={() => {
-              onSendMessage?.(user);
-              onClose();
-            }}
-            className="w-full flex items-center justify-center gap-2 py-2.5 bg-[#00d4aa] hover:bg-[#00bfa0] text-[#0a0e14] font-medium rounded-lg transition-colors"
-          >
-            <svg width="16" height="16" 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>
-            Send Message
-          </button>
-
-          {/* Mention Button */}
-          <button
-            onClick={() => {
-              onMention?.(user.username);
-              onClose();
-            }}
-            className="w-full flex items-center justify-center gap-2 py-2.5 bg-[#a855f7] hover:bg-[#9333ea] text-white font-medium rounded-lg transition-colors"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <circle cx="12" cy="12" r="4" />
-              <path d="M16 8v5a3 3 0 006 0v-1a10 10 0 10-3.92 7.94" />
-            </svg>
-            Mention @{user.username}
-          </button>
-
-          {/* View on GitHub */}
-          <a
-            href={githubUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="w-full flex items-center justify-center gap-2 py-2.5 border border-white/20 text-[#d1d2d3] hover:bg-white/5 font-medium rounded-lg transition-colors"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
-            </svg>
-            View on GitHub
-          </a>
-        </div>
-      </div>
-    </>
-  );
-}
-
-/**
- * Format a timestamp to a readable date/time
- */
-function formatDateTime(timestamp: string): string {
-  const date = new Date(timestamp);
-  return date.toLocaleString([], {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-}

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

@@ -1,107 +0,0 @@
-/**
- * Workspace Context
- *
- * Provides the current workspace's base URL for WebSocket connections.
- * Used by LogViewer and other components that need to connect to workspace-specific endpoints.
- */
-
-import React, { createContext, useContext, useMemo } from 'react';
-
-interface WorkspaceContextValue {
-  /** Base WebSocket URL for the workspace (e.g., wss://workspace-abc.agentrelay.dev) */
-  wsBaseUrl: string | null;
-  /** Whether we're in cloud mode (workspace URL is different from page host) */
-  isCloudMode: boolean;
-}
-
-const WorkspaceContext = createContext<WorkspaceContextValue>({
-  wsBaseUrl: null,
-  isCloudMode: false,
-});
-
-export interface WorkspaceProviderProps {
-  children: React.ReactNode;
-  /** The workspace WebSocket URL (e.g., wss://workspace-abc.agentrelay.dev/ws) */
-  wsUrl?: string;
-}
-
-/**
- * Extract base URL from a WebSocket URL
- * e.g., wss://workspace-abc.agentrelay.dev/ws -> wss://workspace-abc.agentrelay.dev
- */
-function getBaseUrl(wsUrl: string): string {
-  try {
-    const url = new URL(wsUrl);
-    return `${url.protocol}//${url.host}`;
-  } catch {
-    return wsUrl;
-  }
-}
-
-export function WorkspaceProvider({ children, wsUrl }: WorkspaceProviderProps) {
-  const value = useMemo(() => {
-    if (!wsUrl) {
-      return { wsBaseUrl: null, isCloudMode: false };
-    }
-
-    const wsBaseUrl = getBaseUrl(wsUrl);
-
-    // Check if we're in cloud mode by comparing the workspace URL host with the current page host
-    let isCloudMode = false;
-    if (typeof window !== 'undefined') {
-      try {
-        const wsHost = new URL(wsUrl).host;
-        isCloudMode = wsHost !== window.location.host;
-      } catch {
-        // Ignore parse errors
-      }
-    }
-
-    return { wsBaseUrl, isCloudMode };
-  }, [wsUrl]);
-
-  return (
-    <WorkspaceContext.Provider value={value}>
-      {children}
-    </WorkspaceContext.Provider>
-  );
-}
-
-/**
- * Hook to access the workspace context
- */
-export function useWorkspace(): WorkspaceContextValue {
-  return useContext(WorkspaceContext);
-}
-
-/**
- * Get the WebSocket URL for a specific path within the workspace
- * Falls back to current host if not in a workspace context
- */
-export function useWorkspaceWsUrl(path: string): string {
-  const { wsBaseUrl } = useWorkspace();
-
-  return useMemo(() => {
-    if (wsBaseUrl) {
-      return `${wsBaseUrl}${path}`;
-    }
-
-    // Fallback to current host
-    if (typeof window === 'undefined') {
-      return `ws://localhost:3889${path}`;
-    }
-
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const isDev = process.env.NODE_ENV === 'development';
-    const { hostname, port } = window.location;
-
-    // Next.js dev runs on 3888, dashboard server on 3889
-    if (isDev && port === '3888') {
-      return `${protocol}//${hostname || 'localhost'}:3889${path}`;
-    }
-
-    return `${protocol}//${window.location.host}${path}`;
-  }, [wsBaseUrl, path]);
-}
-
-export default WorkspaceContext;