agent-relay 2.0.22 → 2.0.24

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

@@ -1,399 +0,0 @@
-/**
- * ChannelSidebar Component
- *
- * Displays joined channels and allows channel management.
- * Slack-like interface for channel navigation.
- */
-
-import React, { useState, useCallback } from 'react';
-import type { ChannelMessage } from './hooks/useChannels';
-
-export interface ChannelSidebarProps {
-  /** List of joined channels */
-  channels: string[];
-  /** Currently selected channel */
-  selectedChannel?: string;
-  /** Callback when channel is selected */
-  onSelectChannel: (channel: string) => void;
-  /** Callback to join a channel */
-  onJoinChannel: (channel: string) => void;
-  /** Callback to leave a channel */
-  onLeaveChannel: (channel: string) => void;
-  /** Unread message counts per channel */
-  unreadCounts?: Record<string, number>;
-  /** Whether connected to server */
-  isConnected?: boolean;
-}
-
-const DEFAULT_CHANNELS = ['#general', '#random', '#help'];
-
-export function ChannelSidebar({
-  channels,
-  selectedChannel,
-  onSelectChannel,
-  onJoinChannel,
-  onLeaveChannel,
-  unreadCounts = {},
-  isConnected = true,
-}: ChannelSidebarProps) {
-  const [showJoinModal, setShowJoinModal] = useState(false);
-  const [newChannelName, setNewChannelName] = useState('');
-
-  const handleJoinChannel = useCallback(() => {
-    if (!newChannelName.trim()) return;
-
-    let channelName = newChannelName.trim();
-    // Auto-prefix with # if missing
-    if (!channelName.startsWith('#') && !channelName.startsWith('dm:')) {
-      channelName = `#${channelName}`;
-    }
-
-    onJoinChannel(channelName);
-    setNewChannelName('');
-    setShowJoinModal(false);
-  }, [newChannelName, onJoinChannel]);
-
-  const handleLeaveChannel = useCallback((e: React.MouseEvent, channel: string) => {
-    e.stopPropagation();
-    onLeaveChannel(channel);
-  }, [onLeaveChannel]);
-
-  // Separate public channels and DMs
-  const publicChannels = channels.filter(c => c.startsWith('#'));
-  const dmChannels = channels.filter(c => c.startsWith('dm:'));
-
-  return (
-    <div className="channel-sidebar" style={{
-      width: '240px',
-      backgroundColor: 'var(--bg-secondary, #1e1e2e)',
-      borderRight: '1px solid var(--border-color, #313244)',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-    }}>
-      {/* Header */}
-      <div style={{
-        padding: '16px',
-        borderBottom: '1px solid var(--border-color, #313244)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <span style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary, #cdd6f4)' }}>
-            Channels
-          </span>
-          <span style={{
-            width: '8px',
-            height: '8px',
-            borderRadius: '50%',
-            backgroundColor: isConnected ? '#a6e3a1' : '#f38ba8',
-          }} />
-        </div>
-        <button
-          onClick={() => setShowJoinModal(true)}
-          style={{
-            background: 'none',
-            border: 'none',
-            color: 'var(--text-secondary, #a6adc8)',
-            cursor: 'pointer',
-            padding: '4px 8px',
-            borderRadius: '4px',
-            fontSize: '16px',
-          }}
-          title="Join or create channel"
-        >
-          +
-        </button>
-      </div>
-
-      {/* Channel List */}
-      <div style={{ flex: 1, overflow: 'auto', padding: '8px 0' }}>
-        {/* Public Channels */}
-        <div style={{ marginBottom: '16px' }}>
-          <div style={{
-            padding: '4px 16px',
-            fontSize: '11px',
-            fontWeight: 600,
-            color: 'var(--text-secondary, #a6adc8)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.5px',
-          }}>
-            Channels
-          </div>
-          {publicChannels.length === 0 ? (
-            <div style={{
-              padding: '8px 16px',
-              fontSize: '13px',
-              color: 'var(--text-muted, #6c7086)',
-              fontStyle: 'italic',
-            }}>
-              No channels joined
-            </div>
-          ) : (
-            publicChannels.map(channel => (
-              <ChannelItem
-                key={channel}
-                channel={channel}
-                isSelected={selectedChannel === channel}
-                unreadCount={unreadCounts[channel] || 0}
-                onSelect={() => onSelectChannel(channel)}
-                onLeave={(e) => handleLeaveChannel(e, channel)}
-              />
-            ))
-          )}
-        </div>
-
-        {/* Direct Messages */}
-        <div>
-          <div style={{
-            padding: '4px 16px',
-            fontSize: '11px',
-            fontWeight: 600,
-            color: 'var(--text-secondary, #a6adc8)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.5px',
-          }}>
-            Direct Messages
-          </div>
-          {dmChannels.length === 0 ? (
-            <div style={{
-              padding: '8px 16px',
-              fontSize: '13px',
-              color: 'var(--text-muted, #6c7086)',
-              fontStyle: 'italic',
-            }}>
-              No conversations
-            </div>
-          ) : (
-            dmChannels.map(channel => (
-              <ChannelItem
-                key={channel}
-                channel={channel}
-                displayName={formatDmName(channel)}
-                isSelected={selectedChannel === channel}
-                unreadCount={unreadCounts[channel] || 0}
-                onSelect={() => onSelectChannel(channel)}
-                onLeave={(e) => handleLeaveChannel(e, channel)}
-                isDm
-              />
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* Quick Join Suggestions */}
-      {channels.length === 0 && (
-        <div style={{
-          padding: '16px',
-          borderTop: '1px solid var(--border-color, #313244)',
-        }}>
-          <div style={{
-            fontSize: '12px',
-            color: 'var(--text-secondary, #a6adc8)',
-            marginBottom: '8px',
-          }}>
-            Suggested channels:
-          </div>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
-            {DEFAULT_CHANNELS.map(channel => (
-              <button
-                key={channel}
-                onClick={() => onJoinChannel(channel)}
-                style={{
-                  padding: '4px 8px',
-                  fontSize: '12px',
-                  backgroundColor: 'var(--bg-tertiary, #313244)',
-                  border: 'none',
-                  borderRadius: '4px',
-                  color: 'var(--text-primary, #cdd6f4)',
-                  cursor: 'pointer',
-                }}
-              >
-                {channel}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Join Modal */}
-      {showJoinModal && (
-        <div style={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          zIndex: 1000,
-        }} onClick={() => setShowJoinModal(false)}>
-          <div style={{
-            backgroundColor: 'var(--bg-secondary, #1e1e2e)',
-            borderRadius: '8px',
-            padding: '24px',
-            width: '320px',
-            boxShadow: '0 4px 24px rgba(0,0,0,0.3)',
-          }} onClick={e => e.stopPropagation()}>
-            <h3 style={{
-              margin: '0 0 16px 0',
-              fontSize: '16px',
-              fontWeight: 600,
-              color: 'var(--text-primary, #cdd6f4)',
-            }}>
-              Join Channel
-            </h3>
-            <input
-              type="text"
-              value={newChannelName}
-              onChange={(e) => setNewChannelName(e.target.value)}
-              placeholder="Channel name (e.g., general)"
-              style={{
-                width: '100%',
-                padding: '10px 12px',
-                backgroundColor: 'var(--bg-primary, #11111b)',
-                border: '1px solid var(--border-color, #313244)',
-                borderRadius: '6px',
-                color: 'var(--text-primary, #cdd6f4)',
-                fontSize: '14px',
-                marginBottom: '16px',
-                outline: 'none',
-              }}
-              onKeyDown={(e) => e.key === 'Enter' && handleJoinChannel()}
-              autoFocus
-            />
-            <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
-              <button
-                onClick={() => setShowJoinModal(false)}
-                style={{
-                  padding: '8px 16px',
-                  backgroundColor: 'transparent',
-                  border: '1px solid var(--border-color, #313244)',
-                  borderRadius: '6px',
-                  color: 'var(--text-primary, #cdd6f4)',
-                  cursor: 'pointer',
-                  fontSize: '14px',
-                }}
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleJoinChannel}
-                disabled={!newChannelName.trim()}
-                style={{
-                  padding: '8px 16px',
-                  backgroundColor: 'var(--accent-color, #89b4fa)',
-                  border: 'none',
-                  borderRadius: '6px',
-                  color: '#11111b',
-                  cursor: 'pointer',
-                  fontSize: '14px',
-                  fontWeight: 500,
-                  opacity: newChannelName.trim() ? 1 : 0.5,
-                }}
-              >
-                Join
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface ChannelItemProps {
-  channel: string;
-  displayName?: string;
-  isSelected: boolean;
-  unreadCount: number;
-  onSelect: () => void;
-  onLeave: (e: React.MouseEvent) => void;
-  isDm?: boolean;
-}
-
-function ChannelItem({ channel, displayName, isSelected, unreadCount, onSelect, onLeave, isDm }: ChannelItemProps) {
-  const [showLeave, setShowLeave] = useState(false);
-
-  return (
-    <div
-      onClick={onSelect}
-      onMouseEnter={() => setShowLeave(true)}
-      onMouseLeave={() => setShowLeave(false)}
-      style={{
-        padding: '6px 16px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        cursor: 'pointer',
-        backgroundColor: isSelected ? 'var(--bg-tertiary, #313244)' : 'transparent',
-        color: unreadCount > 0
-          ? 'var(--text-primary, #cdd6f4)'
-          : 'var(--text-secondary, #a6adc8)',
-        fontWeight: unreadCount > 0 ? 600 : 400,
-        fontSize: '14px',
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flex: 1, minWidth: 0 }}>
-        <span style={{ flexShrink: 0 }}>
-          {isDm ? '@' : '#'}
-        </span>
-        <span style={{
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}>
-          {displayName || channel.replace(/^#/, '')}
-        </span>
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-        {unreadCount > 0 && (
-          <span style={{
-            backgroundColor: 'var(--accent-color, #89b4fa)',
-            color: '#11111b',
-            fontSize: '11px',
-            fontWeight: 600,
-            padding: '2px 6px',
-            borderRadius: '10px',
-            minWidth: '18px',
-            textAlign: 'center',
-          }}>
-            {unreadCount > 99 ? '99+' : unreadCount}
-          </span>
-        )}
-        {showLeave && (
-          <button
-            onClick={onLeave}
-            style={{
-              background: 'none',
-              border: 'none',
-              color: 'var(--text-muted, #6c7086)',
-              cursor: 'pointer',
-              padding: '2px',
-              fontSize: '12px',
-              lineHeight: 1,
-            }}
-            title="Leave channel"
-          >
-            x
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Format DM channel name for display.
- * dm:alice:bob -> "alice, bob" (excluding current user if known)
- */
-function formatDmName(channel: string): string {
-  if (!channel.startsWith('dm:')) return channel;
-  const parts = channel.split(':').slice(1);
-  return parts.join(', ');
-}
-
-export default ChannelSidebar;

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

@@ -1,130 +0,0 @@
-/**
- * Cloud Session Provider
- *
- * Wraps the dashboard app to provide cloud session management.
- * Automatically detects session expiration and prompts re-login.
- *
- * Usage:
- * ```tsx
- * <CloudSessionProvider>
- *   <App />
- * </CloudSessionProvider>
- * ```
- */
-
-import React, { createContext, useContext, useCallback } from 'react';
-import { useSession, type UseSessionReturn, type SessionError } from './hooks/useSession';
-import { SessionExpiredModal } from './SessionExpiredModal';
-
-// Context type
-interface CloudSessionContextValue extends UseSessionReturn {
-  /** Whether this is a cloud-hosted dashboard */
-  isCloudMode: boolean;
-}
-
-// Create context with undefined default
-const CloudSessionContext = createContext<CloudSessionContextValue | undefined>(undefined);
-
-export interface CloudSessionProviderProps {
-  /** Child components */
-  children: React.ReactNode;
-  /** Whether this dashboard is running in cloud mode (default: auto-detect) */
-  cloudMode?: boolean;
-  /** Session check interval in ms (default: 60000) */
-  checkInterval?: number;
-  /** Callback when session expires */
-  onSessionExpired?: (error: SessionError) => void;
-}
-
-/**
- * Auto-detect if running in cloud mode
- * Cloud mode is detected by checking for cloud-specific environment markers
- */
-function detectCloudMode(): boolean {
-  if (typeof window === 'undefined') return false;
-
-  // Check for cloud URL patterns
-  const hostname = window.location.hostname;
-  if (hostname.includes('agent-relay.com')) return true;
-  if (hostname.includes('agentrelay.cloud')) return true;
-
-  // Check for cloud mode flag in meta tags
-  const cloudMeta = document.querySelector('meta[name="agent-relay-cloud"]');
-  if (cloudMeta?.getAttribute('content') === 'true') return true;
-
-  // Check for cloud mode in local storage (for development)
-  if (localStorage.getItem('agent-relay-cloud-mode') === 'true') return true;
-
-  return false;
-}
-
-export function CloudSessionProvider({
-  children,
-  cloudMode,
-  checkInterval = 60000,
-  onSessionExpired,
-}: CloudSessionProviderProps) {
-  const isCloudMode = cloudMode ?? detectCloudMode();
-
-  // Use session hook only in cloud mode
-  const session = useSession({
-    checkOnMount: isCloudMode,
-    checkInterval: isCloudMode ? checkInterval : 0,
-    onExpired: onSessionExpired,
-  });
-
-  // Handle login redirect
-  const handleLogin = useCallback(() => {
-    session.redirectToLogin();
-  }, [session]);
-
-  // Handle modal dismiss (optional - keeps modal closable for some use cases)
-  const handleDismiss = useCallback(() => {
-    session.clearExpired();
-  }, [session]);
-
-  // Context value
-  const contextValue: CloudSessionContextValue = {
-    ...session,
-    isCloudMode,
-  };
-
-  return (
-    <CloudSessionContext.Provider value={contextValue}>
-      {children}
-
-      {/* Session Expired Modal - only shown in cloud mode */}
-      {isCloudMode && (
-        <SessionExpiredModal
-          isOpen={session.isExpired}
-          error={session.error}
-          onLogin={handleLogin}
-          onDismiss={handleDismiss}
-        />
-      )}
-    </CloudSessionContext.Provider>
-  );
-}
-
-/**
- * Hook to access cloud session context
- *
- * @throws Error if used outside of CloudSessionProvider
- */
-export function useCloudSession(): CloudSessionContextValue {
-  const context = useContext(CloudSessionContext);
-  if (!context) {
-    throw new Error('useCloudSession must be used within a CloudSessionProvider');
-  }
-  return context;
-}
-
-/**
- * Hook to optionally access cloud session context
- * Returns undefined if not within a CloudSessionProvider
- */
-export function useCloudSessionOptional(): CloudSessionContextValue | undefined {
-  return useContext(CloudSessionContext);
-}
-
-export default CloudSessionProvider;