@agent-relay/dashboard 2.0.81 → 2.0.82

package/src/components/TypingIndicator.tsx

@@ -0,0 +1,69 @@
+/**
+ * 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/src/components/UsageBanner.tsx

@@ -0,0 +1,231 @@
+/**
+ * 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/src/components/UserProfilePanel.tsx

@@ -0,0 +1,233 @@
+/**
+ * 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/src/components/WorkspaceContext.tsx

@@ -0,0 +1,95 @@
+/**
+ * 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';
+import { getWebSocketUrl } from '../lib/config';
+
+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 centralized config if not in a workspace context
+ */
+export function useWorkspaceWsUrl(path: string): string {
+  const { wsBaseUrl } = useWorkspace();
+
+  return useMemo(() => {
+    if (wsBaseUrl) {
+      return `${wsBaseUrl}${path}`;
+    }
+
+    // Fallback to centralized config
+    return getWebSocketUrl(path);
+  }, [wsBaseUrl, path]);
+}
+
+export default WorkspaceContext;