agent-relay 1.6.0 → 2.0.0

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

@@ -0,0 +1,284 @@
+/**
+ * Logo Component - Monogram AR
+ *
+ * The Agent Relay logo featuring interwoven A and R letters.
+ * Uses the signature cyan (#00d9ff) and teal (#00ffc8) colors
+ * to symbolize structure and flow.
+ */
+
+import React from 'react';
+
+export interface LogoProps {
+  /** Size of the logo in pixels (width and height) */
+  size?: number;
+  /** Whether to include the wordmark alongside the icon */
+  showWordmark?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether to apply a glow effect */
+  withGlow?: boolean;
+  /** Whether to animate on hover */
+  animated?: boolean;
+}
+
+/**
+ * Agent Relay Monogram Logo
+ *
+ * An SVG logo with interwoven A and R letters representing
+ * the connection between agents in the relay system.
+ */
+export function Logo({
+  size = 40,
+  showWordmark = false,
+  className = '',
+  withGlow = true,
+  animated = true,
+}: LogoProps) {
+  return (
+    <div
+      className={`
+        inline-flex items-center gap-3
+        ${animated ? 'group' : ''}
+        ${className}
+      `}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 100 100"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={`
+          transition-all duration-300
+          ${withGlow ? 'drop-shadow-[0_0_8px_rgba(0,217,255,0.3)]' : ''}
+          ${animated ? 'group-hover:drop-shadow-[0_0_16px_rgba(0,217,255,0.5)] group-hover:scale-105' : ''}
+        `}
+        aria-label="Agent Relay Logo"
+        role="img"
+      >
+        {/* A shape - Primary structure */}
+        <path
+          d="M30 80 L 50 20 L 70 80"
+          stroke="#00d9ff"
+          strokeWidth="4"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+          fill="none"
+          className={`
+            ${animated ? 'transition-all duration-300 group-hover:[stroke-width:5]' : ''}
+          `}
+        />
+        {/* A crossbar */}
+        <line
+          x1="40"
+          y1="50"
+          x2="60"
+          y2="50"
+          stroke="#00d9ff"
+          strokeWidth="4"
+          strokeLinecap="round"
+          className={`
+            ${animated ? 'transition-all duration-300 group-hover:[stroke-width:5]' : ''}
+          `}
+        />
+
+        {/* R overlay - Representing flow/relay */}
+        <path
+          d="M50 20 L 50 80"
+          stroke="#00ffc8"
+          strokeWidth="2"
+          strokeLinecap="round"
+          opacity="0.7"
+          className={`
+            ${animated ? 'transition-opacity duration-300 group-hover:opacity-100' : ''}
+          `}
+        />
+        <path
+          d="M50 20 C 80 20 80 50 50 50 L 80 80"
+          stroke="#00ffc8"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+          opacity="0.7"
+          className={`
+            ${animated ? 'transition-opacity duration-300 group-hover:opacity-100' : ''}
+          `}
+        />
+      </svg>
+
+      {showWordmark && (
+        <span
+          className={`
+            font-display font-semibold text-text-primary tracking-tight
+            transition-all duration-300
+            ${animated ? 'group-hover:text-accent-cyan' : ''}
+          `}
+          style={{ fontSize: size * 0.45 }}
+        >
+          Agent Relay
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Compact logo icon for tight spaces like headers
+ */
+export function LogoIcon({
+  size = 24,
+  className = '',
+  withGlow = false,
+}: Pick<LogoProps, 'size' | 'className' | 'withGlow'>) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 100 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`
+        transition-all duration-300
+        ${withGlow ? 'drop-shadow-[0_0_8px_rgba(0,217,255,0.3)]' : ''}
+        ${className}
+      `}
+      aria-label="Agent Relay Logo"
+      role="img"
+    >
+      {/* A shape */}
+      <path
+        d="M30 80 L 50 20 L 70 80"
+        stroke="#00d9ff"
+        strokeWidth="5"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        fill="none"
+      />
+      <line
+        x1="40"
+        y1="50"
+        x2="60"
+        y2="50"
+        stroke="#00d9ff"
+        strokeWidth="5"
+        strokeLinecap="round"
+      />
+
+      {/* R overlay */}
+      <path
+        d="M50 20 L 50 80"
+        stroke="#00ffc8"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        opacity="0.7"
+      />
+      <path
+        d="M50 20 C 80 20 80 50 50 50 L 80 80"
+        stroke="#00ffc8"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        opacity="0.7"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Large animated logo for landing pages and hero sections
+ */
+export function LogoHero({
+  className = '',
+}: {
+  className?: string;
+}) {
+  return (
+    <div className={`relative inline-block ${className}`}>
+      {/* Outer glow ring animation */}
+      <div
+        className="
+          absolute inset-[-20%]
+          rounded-full
+          bg-accent-cyan/10
+          animate-pulse
+          blur-2xl
+        "
+        aria-hidden="true"
+      />
+
+      <svg
+        width={120}
+        height={120}
+        viewBox="0 0 100 100"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="
+          relative z-10
+          drop-shadow-[0_0_20px_rgba(0,217,255,0.4)]
+          animate-[float_6s_ease-in-out_infinite]
+        "
+        aria-label="Agent Relay Logo"
+        role="img"
+      >
+        <defs>
+          <linearGradient id="logoGradientA" x1="30" y1="80" x2="70" y2="20" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="#00d9ff" />
+            <stop offset="100%" stopColor="#00b8d9" />
+          </linearGradient>
+          <linearGradient id="logoGradientR" x1="50" y1="20" x2="80" y2="80" gradientUnits="userSpaceOnUse">
+            <stop offset="0%" stopColor="#00ffc8" />
+            <stop offset="100%" stopColor="#00d9b8" />
+          </linearGradient>
+        </defs>
+
+        {/* A shape with gradient */}
+        <path
+          d="M30 80 L 50 20 L 70 80"
+          stroke="url(#logoGradientA)"
+          strokeWidth="5"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <line
+          x1="40"
+          y1="50"
+          x2="60"
+          y2="50"
+          stroke="url(#logoGradientA)"
+          strokeWidth="5"
+          strokeLinecap="round"
+        />
+
+        {/* R overlay with gradient */}
+        <path
+          d="M50 20 L 50 80"
+          stroke="url(#logoGradientR)"
+          strokeWidth="3"
+          strokeLinecap="round"
+          opacity="0.8"
+        />
+        <path
+          d="M50 20 C 80 20 80 50 50 50 L 80 80"
+          stroke="url(#logoGradientR)"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+          opacity="0.8"
+        />
+      </svg>
+
+      <style>{`
+        @keyframes float {
+          0%, 100% { transform: translateY(0px); }
+          50% { transform: translateY(-8px); }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default Logo;

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

@@ -0,0 +1,384 @@
+/**
+ * MentionAutocomplete Component
+ *
+ * Provides @-mention autocomplete for the message composer.
+ * Shows a dropdown list of agents and teams when typing @ at the start of a message.
+ * Supports:
+ * - @AgentName - mention a specific agent
+ * - @everyone / @* - broadcast to all agents
+ * - @team:name - mention all agents in a team
+ */
+
+import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import type { Agent } from '../types';
+import { getAgentColor, getAgentInitials } from '../lib/colors';
+
+/** Human user info for autocomplete */
+export interface HumanUser {
+  /** Username (GitHub username) */
+  username: string;
+  /** Optional avatar URL */
+  avatarUrl?: string;
+}
+
+export interface MentionAutocompleteProps {
+  /** List of available agents */
+  agents: Agent[];
+  /** List of human users (extracted from recent messages) */
+  humanUsers?: HumanUser[];
+  /** Current input value */
+  inputValue: string;
+  /** Cursor position in input */
+  cursorPosition: number;
+  /** Called when a mention is selected */
+  onSelect: (mention: string, newValue: string) => void;
+  /** Called when autocomplete should be hidden */
+  onClose: () => void;
+  /** Whether the autocomplete is visible */
+  isVisible: boolean;
+}
+
+interface MentionOption {
+  name: string;
+  displayName: string;
+  description: string;
+  isBroadcast?: boolean;
+  isTeam?: boolean;
+  isHuman?: boolean;
+  avatarUrl?: string;
+  memberCount?: number;
+}
+
+/**
+ * Check if the input has an @-mention being typed at the cursor position.
+ * Works for @ at any position in the text, not just the start.
+ */
+export function getMentionQuery(value: string, cursorPos: number): string | null {
+  // Search backwards from cursor to find @
+  const textBeforeCursor = value.substring(0, cursorPos);
+
+  // Find the last @ before cursor that starts a mention
+  // A mention starts after whitespace, at start of string, or after certain punctuation
+  const mentionMatch = textBeforeCursor.match(/(?:^|[\s(])@(\S*)$/);
+  if (mentionMatch) {
+    return mentionMatch[1]; // Return the text after @
+  }
+  return null;
+}
+
+/**
+ * Result of completing a mention.
+ */
+export interface CompletionResult {
+  /** The new input value with the completed mention */
+  value: string;
+  /** The cursor position after the completion (after the trailing space) */
+  cursorPosition: number;
+}
+
+/**
+ * Complete a mention in the input value at the cursor position.
+ */
+export function completeMentionInValue(
+  value: string,
+  mention: string,
+  cursorPos: number
+): CompletionResult {
+  const textBeforeCursor = value.substring(0, cursorPos);
+  const textAfterCursor = value.substring(cursorPos);
+
+  // Find the @ and partial text before cursor
+  const mentionMatch = textBeforeCursor.match(/(?:^|[\s(])@(\S*)$/);
+  if (mentionMatch) {
+    // Calculate where the @ starts (accounting for whitespace/punctuation before it)
+    const matchStart = mentionMatch.index || 0;
+    const prefixChar = mentionMatch[0].charAt(0);
+    const atStart = prefixChar === '@' ? matchStart : matchStart + 1;
+
+    // Build the new value
+    const beforeMention = value.substring(0, atStart);
+    const completedMention = `@${mention} `;
+    const newValue = beforeMention + completedMention + textAfterCursor;
+    const newCursorPos = beforeMention.length + completedMention.length;
+    return { value: newValue, cursorPosition: newCursorPos };
+  }
+  return { value, cursorPosition: cursorPos };
+}
+
+export function MentionAutocomplete({
+  agents,
+  humanUsers = [],
+  inputValue,
+  cursorPosition,
+  onSelect,
+  onClose,
+  isVisible,
+}: MentionAutocompleteProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Get the current mention query
+  const query = useMemo(
+    () => getMentionQuery(inputValue, cursorPosition),
+    [inputValue, cursorPosition]
+  );
+
+  // Extract unique teams from agents
+  const teams = useMemo(() => {
+    const teamMap = new Map<string, Agent[]>();
+    agents.forEach((agent) => {
+      if (agent.team) {
+        const existing = teamMap.get(agent.team) || [];
+        existing.push(agent);
+        teamMap.set(agent.team, existing);
+      }
+    });
+    return teamMap;
+  }, [agents]);
+
+  // Filter options based on query
+  const options = useMemo((): MentionOption[] => {
+    if (query === null) return [];
+
+    const queryLower = query.toLowerCase();
+    const result: MentionOption[] = [];
+
+    // Add broadcast option if it matches
+    const broadcastMatches =
+      '*'.includes(queryLower) ||
+      'everyone'.includes(queryLower) ||
+      'all'.includes(queryLower) ||
+      'broadcast'.includes(queryLower) ||
+      queryLower === '';
+
+    if (broadcastMatches) {
+      result.push({
+        name: '*',
+        displayName: '@everyone',
+        description: 'Broadcast to all agents',
+        isBroadcast: true,
+      });
+    }
+
+    // Add team options if query matches "team" or a team name
+    const isTeamQuery = queryLower.startsWith('team:') || queryLower.startsWith('team');
+    const teamSearchQuery = queryLower.startsWith('team:')
+      ? queryLower.substring(5)
+      : queryLower.replace(/^team/, '');
+
+    if (isTeamQuery || queryLower === '') {
+      teams.forEach((members, teamName) => {
+        const teamNameLower = teamName.toLowerCase();
+        if (
+          teamSearchQuery === '' ||
+          teamNameLower.includes(teamSearchQuery) ||
+          `team:${teamNameLower}`.includes(queryLower)
+        ) {
+          result.push({
+            name: `team:${teamName}`,
+            displayName: `@team:${teamName}`,
+            description: `${members.length} agent${members.length !== 1 ? 's' : ''}: ${members.map(m => m.name).join(', ')}`,
+            isTeam: true,
+            memberCount: members.length,
+          });
+        }
+      });
+    }
+
+    // Filter human users by username
+    const agentNames = new Set(agents.map(a => a.name.toLowerCase()));
+    const matchingHumans = humanUsers.filter((user) => {
+      const usernameLower = user.username.toLowerCase();
+      return usernameLower.includes(queryLower) &&
+        !agentNames.has(usernameLower); // Don't show if they're also an agent name
+    });
+
+    matchingHumans.forEach((user) => {
+      result.push({
+        name: user.username,
+        displayName: `@${user.username}`,
+        description: 'Human user',
+        isHuman: true,
+        avatarUrl: user.avatarUrl,
+      });
+    });
+
+    // Filter agents by name
+    const matchingAgents = agents.filter((agent) =>
+      agent.name.toLowerCase().includes(queryLower)
+    );
+
+    matchingAgents.forEach((agent) => {
+      result.push({
+        name: agent.name,
+        displayName: `@${agent.name}`,
+        description: agent.team ? `${agent.status || 'Agent'} · ${agent.team}` : (agent.status || 'Agent'),
+      });
+    });
+
+    return result;
+  }, [query, agents, humanUsers, teams]);
+
+  // Reset selection when options change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [options.length]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (!listRef.current) return;
+    const selected = listRef.current.querySelector('[data-selected="true"]');
+    if (selected) {
+      selected.scrollIntoView({ block: 'nearest' });
+    }
+  }, [selectedIndex]);
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!isVisible || options.length === 0) return;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setSelectedIndex((prev) => (prev + 1) % options.length);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setSelectedIndex((prev) => (prev - 1 + options.length) % options.length);
+          break;
+        case 'Enter':
+        case 'Tab':
+          e.preventDefault();
+          const selected = options[selectedIndex];
+          if (selected) {
+            const result = completeMentionInValue(inputValue, selected.name, cursorPosition);
+            onSelect(selected.name, result.value);
+          }
+          break;
+        case 'Escape':
+          e.preventDefault();
+          onClose();
+          break;
+      }
+    },
+    [isVisible, options, selectedIndex, inputValue, cursorPosition, onSelect, onClose]
+  );
+
+  // Register keyboard listener
+  useEffect(() => {
+    if (isVisible) {
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [isVisible, handleKeyDown]);
+
+  // Handle click on option
+  const handleClick = useCallback(
+    (option: MentionOption) => {
+      const result = completeMentionInValue(inputValue, option.name, cursorPosition);
+      onSelect(option.name, result.value);
+    },
+    [inputValue, cursorPosition, onSelect]
+  );
+
+  if (!isVisible || options.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className="absolute bottom-full left-0 right-0 max-h-[200px] overflow-y-auto bg-[#1a1d21] border border-white/10 rounded-lg shadow-[0_-4px_20px_rgba(0,0,0,0.4)] z-[100] mb-1"
+      ref={listRef}
+    >
+      {options.map((option, index) => (
+        <div
+          key={option.name}
+          data-selected={index === selectedIndex}
+          className={`flex items-center gap-2.5 py-2 px-3 cursor-pointer transition-colors duration-150 ${
+            index === selectedIndex ? 'bg-white/[0.08]' : 'hover:bg-white/[0.08]'
+          }`}
+          onClick={() => handleClick(option)}
+          onMouseEnter={() => setSelectedIndex(index)}
+        >
+          {/* Avatar/Icon */}
+          {option.isHuman && option.avatarUrl ? (
+            <img
+              src={option.avatarUrl}
+              alt={option.name}
+              className="w-7 h-7 rounded-md object-cover"
+            />
+          ) : (
+            <div
+              className="w-7 h-7 rounded-md flex items-center justify-center text-white text-[11px] font-semibold"
+              style={{
+                background: option.isBroadcast
+                  ? 'var(--color-warning, #f59e0b)'
+                  : option.isTeam
+                  ? 'var(--color-accent-purple, #a855f7)'
+                  : option.isHuman
+                  ? '#a855f7' // Purple for human users
+                  : getAgentColor(option.name).primary,
+              }}
+            >
+              {option.isBroadcast ? '*' : option.isTeam ? (
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                  <circle cx="9" cy="7" r="4" />
+                  <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                  <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                </svg>
+              ) : option.isHuman ? (
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+              ) : getAgentInitials(option.name)}
+            </div>
+          )}
+          <div className="flex flex-col gap-0.5 min-w-0 flex-1">
+            <span className="text-sm font-medium text-[#d1d2d3]">{option.displayName}</span>
+            <span className="text-xs text-[#8d8d8e] truncate">{option.description}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Hook to manage mention autocomplete state
+ */
+export function useMentionAutocomplete(agents: Agent[]) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [cursorPosition, setCursorPosition] = useState(0);
+
+  const handleInputChange = useCallback((value: string, cursorPos: number) => {
+    setInputValue(value);
+    setCursorPosition(cursorPos);
+
+    // Show autocomplete if typing @mention at start
+    const query = getMentionQuery(value, cursorPos);
+    setIsVisible(query !== null);
+  }, []);
+
+  const handleSelect = useCallback((mention: string, newValue: string) => {
+    setInputValue(newValue);
+    setCursorPosition(newValue.indexOf(' ') + 1);
+    setIsVisible(false);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  return {
+    isVisible,
+    inputValue,
+    cursorPosition,
+    setInputValue: handleInputChange,
+    handleSelect,
+    handleClose,
+  };
+}