agent-relay 2.0.21 → 2.0.23

package/packages/dashboard/ui/react-components/settings/index.ts

@@ -1,11 +0,0 @@
-/**
- * Settings Components
- *
- * Unified settings UI for dashboard, workspace, team, and billing.
- */
-
-export { SettingsPage, type SettingsPageProps } from './SettingsPage';
-export { WorkspaceSettingsPanel, type WorkspaceSettingsPanelProps } from './WorkspaceSettingsPanel';
-export { TeamSettingsPanel, type TeamSettingsPanelProps } from './TeamSettingsPanel';
-export { BillingSettingsPanel, type BillingSettingsPanelProps } from './BillingSettingsPanel';
-export { defaultSettings, type Settings } from './types';

package/packages/dashboard/ui/react-components/settings/types.ts

@@ -1,53 +0,0 @@
-/**
- * Settings Types
- *
- * Dashboard settings types for appearance, notifications, display, and connection preferences.
- */
-
-export interface Settings {
-  theme: 'light' | 'dark' | 'system';
-  notifications: {
-    enabled: boolean;
-    sound: boolean;
-    desktop: boolean;
-    mentionsOnly: boolean;
-  };
-  display: {
-    compactMode: boolean;
-    showTimestamps: boolean;
-    showAvatars: boolean;
-    animationsEnabled: boolean;
-  };
-  messages: {
-    autoScroll: boolean;
-  };
-  connection: {
-    autoReconnect: boolean;
-    reconnectDelay: number;
-    keepAliveInterval: number;
-  };
-}
-
-export const defaultSettings: Settings = {
-  theme: 'system',
-  notifications: {
-    enabled: true,
-    sound: true,
-    desktop: false,
-    mentionsOnly: false,
-  },
-  display: {
-    compactMode: false,
-    showTimestamps: true,
-    showAvatars: true,
-    animationsEnabled: true,
-  },
-  messages: {
-    autoScroll: true,
-  },
-  connection: {
-    autoReconnect: true,
-    reconnectDelay: 3000,
-    keepAliveInterval: 30000,
-  },
-};

package/packages/dashboard/ui/react-components/utils/messageFormatting.tsx

@@ -1,370 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-// Only import languages we actually need (saves ~300KB)
-import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
-import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
-import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
-import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
-import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
-import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
-import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
-import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
-import go from 'react-syntax-highlighter/dist/esm/languages/prism/go';
-import rust from 'react-syntax-highlighter/dist/esm/languages/prism/rust';
-import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
-import ruby from 'react-syntax-highlighter/dist/esm/languages/prism/ruby';
-import java from 'react-syntax-highlighter/dist/esm/languages/prism/java';
-import docker from 'react-syntax-highlighter/dist/esm/languages/prism/docker';
-
-SyntaxHighlighter.registerLanguage('javascript', javascript);
-SyntaxHighlighter.registerLanguage('typescript', typescript);
-SyntaxHighlighter.registerLanguage('python', python);
-SyntaxHighlighter.registerLanguage('bash', bash);
-SyntaxHighlighter.registerLanguage('shell', bash);
-SyntaxHighlighter.registerLanguage('json', json);
-SyntaxHighlighter.registerLanguage('markdown', markdown);
-SyntaxHighlighter.registerLanguage('yaml', yaml);
-SyntaxHighlighter.registerLanguage('css', css);
-SyntaxHighlighter.registerLanguage('go', go);
-SyntaxHighlighter.registerLanguage('rust', rust);
-SyntaxHighlighter.registerLanguage('sql', sql);
-SyntaxHighlighter.registerLanguage('ruby', ruby);
-SyntaxHighlighter.registerLanguage('java', java);
-SyntaxHighlighter.registerLanguage('docker', docker);
-SyntaxHighlighter.registerLanguage('dockerfile', docker);
-
-/**
- * Custom theme extending oneDark to match dashboard styling
- */
-const customCodeTheme = {
-  ...oneDark,
-  'pre[class*="language-"]': {
-    ...oneDark['pre[class*="language-"]'],
-    background: 'rgba(15, 23, 42, 0.8)',
-    margin: '0.5rem 0',
-    padding: '1rem',
-    borderRadius: '0.5rem',
-    border: '1px solid rgba(148, 163, 184, 0.1)',
-    fontSize: '0.75rem',
-    lineHeight: '1.5',
-  },
-  'code[class*="language-"]': {
-    ...oneDark['code[class*="language-"]'],
-    background: 'transparent',
-    fontSize: '0.75rem',
-  },
-};
-
-/**
- * CodeBlock Component - Renders syntax highlighted code
- */
-interface CodeBlockProps {
-  code: string;
-  language: string;
-}
-
-function CodeBlock({ code, language }: CodeBlockProps) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy:', err);
-    }
-  }, [code]);
-
-  // Normalize language names for syntax highlighter
-  const normalizedLanguage = language.toLowerCase().replace(/^(js|jsx)$/, 'javascript')
-    .replace(/^(ts|tsx)$/, 'typescript')
-    .replace(/^(py)$/, 'python')
-    .replace(/^(rb)$/, 'ruby')
-    .replace(/^(sh|shell|zsh)$/, 'bash');
-
-  return (
-    <div className="relative group my-2">
-      {/* Language badge and copy button */}
-      <div className="absolute top-2 right-2 flex items-center gap-2 z-10">
-        {language && language !== 'text' && (
-          <span className="text-xs px-2 py-0.5 rounded bg-accent-cyan/20 text-accent-cyan font-mono">
-            {language}
-          </span>
-        )}
-        <button
-          onClick={handleCopy}
-          className="opacity-0 group-hover:opacity-100 transition-opacity text-xs px-2 py-1 rounded bg-bg-tertiary hover:bg-bg-card text-text-muted hover:text-text-primary border border-border-subtle"
-          title="Copy code"
-        >
-          {copied ? '✓ Copied' : 'Copy'}
-        </button>
-      </div>
-      <SyntaxHighlighter
-        language={normalizedLanguage}
-        style={customCodeTheme}
-        customStyle={{
-          margin: 0,
-          background: 'rgba(15, 23, 42, 0.8)',
-        }}
-        showLineNumbers={code.split('\n').length > 3}
-        lineNumberStyle={{
-          minWidth: '2.5em',
-          paddingRight: '1em',
-          color: 'rgba(148, 163, 184, 0.4)',
-          userSelect: 'none',
-        }}
-      >
-        {code.trim()}
-      </SyntaxHighlighter>
-    </div>
-  );
-}
-
-/**
- * Check if a line looks like part of a table (has pipe characters)
- */
-function isTableLine(line: string): boolean {
-  const pipeCount = (line.match(/\|/g) || []).length;
-  return pipeCount >= 2 || (line.trim().startsWith('|') && line.trim().endsWith('|'));
-}
-
-/**
- * Check if a line is a table separator (dashes and pipes)
- */
-function isTableSeparator(line: string): boolean {
-  return /^[\s|:-]+$/.test(line) && line.includes('-') && line.includes('|');
-}
-
-interface ContentSection {
-  type: 'text' | 'table' | 'code';
-  content: string;
-  language?: string;
-}
-
-/**
- * Split content into text, table, and code sections
- * Code blocks are detected by fenced code block syntax (```language ... ```)
- */
-function splitContentSections(content: string): ContentSection[] {
-  const sections: ContentSection[] = [];
-
-  // First, extract code blocks using regex
-  // Matches ```language\ncode\n``` or ```\ncode\n```
-  const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
-  let lastIndex = 0;
-  let match;
-
-  while ((match = codeBlockRegex.exec(content)) !== null) {
-    // Add any content before this code block
-    if (match.index > lastIndex) {
-      const beforeContent = content.slice(lastIndex, match.index);
-      const beforeSections = splitTextAndTableSections(beforeContent);
-      sections.push(...beforeSections);
-    }
-
-    // Add the code block
-    sections.push({
-      type: 'code',
-      language: match[1] || 'text',
-      content: match[2],
-    });
-
-    lastIndex = match.index + match[0].length;
-  }
-
-  // Add any remaining content after the last code block
-  if (lastIndex < content.length) {
-    const afterContent = content.slice(lastIndex);
-    const afterSections = splitTextAndTableSections(afterContent);
-    sections.push(...afterSections);
-  }
-
-  // If no code blocks were found, just split text/tables
-  if (sections.length === 0) {
-    return splitTextAndTableSections(content);
-  }
-
-  return sections;
-}
-
-/**
- * Split content into text and table sections (helper for non-code content)
- */
-function splitTextAndTableSections(content: string): ContentSection[] {
-  const lines = content.split('\n');
-  const sections: ContentSection[] = [];
-  let currentSection: ContentSection | null = null;
-
-  for (const line of lines) {
-    const lineIsTable = isTableLine(line) || isTableSeparator(line);
-    const sectionType = lineIsTable ? 'table' : 'text';
-
-    if (!currentSection || currentSection.type !== sectionType) {
-      if (currentSection) {
-        sections.push(currentSection);
-      }
-      currentSection = { type: sectionType, content: line };
-    } else {
-      currentSection.content += '\n' + line;
-    }
-  }
-
-  if (currentSection) {
-    sections.push(currentSection);
-  }
-
-  return sections;
-}
-
-export interface FormatMessageOptions {
-  mentions?: string[];
-}
-
-/**
- * Format message body with newline preservation, link detection, table, and code support
- */
-export function formatMessageBody(content: string, options: FormatMessageOptions = {}): React.ReactNode {
-  const normalizedContent = content
-    .replace(/\\n/g, '\n')
-    .replace(/\r\n/g, '\n')
-    .replace(/\r/g, '\n');
-
-  const sections = splitContentSections(normalizedContent);
-
-  // If only one section and not a table, use simple rendering
-  if (sections.length === 1 && sections[0].type === 'text') {
-    const lines = normalizedContent.split('\n');
-    return lines.map((line, i) => (
-      <React.Fragment key={i}>
-        {i > 0 && <br />}
-        {formatLine(line, options.mentions)}
-      </React.Fragment>
-    ));
-  }
-
-  // Render mixed content with tables and code blocks
-  return sections.map((section, sectionIndex) => {
-    if (section.type === 'code') {
-      return (
-        <CodeBlock
-          key={sectionIndex}
-          code={section.content}
-          language={section.language || 'text'}
-        />
-      );
-    }
-
-    if (section.type === 'table') {
-      return (
-        <pre
-          key={sectionIndex}
-          className="font-mono text-xs leading-relaxed whitespace-pre overflow-x-auto my-2 p-3 bg-bg-tertiary/50 rounded-lg border border-border-subtle"
-        >
-          {section.content}
-        </pre>
-      );
-    }
-
-    // Regular text section
-    const lines = section.content.split('\n');
-    return (
-      <span key={sectionIndex}>
-        {lines.map((line, i) => (
-          <React.Fragment key={i}>
-            {i > 0 && <br />}
-            {formatLine(line, options.mentions)}
-          </React.Fragment>
-        ))}
-      </span>
-    );
-  });
-}
-
-/**
- * Format a single line, detecting URLs, inline code, and mentions
- */
-function formatLine(line: string, mentions?: string[]): React.ReactNode {
-  // Combined regex to match URLs and inline code (backticks)
-  // Order matters: check for backticks first to avoid URL detection inside code
-  const combinedRegex = /(`[^`]+`|https?:\/\/[^\s]+)/g;
-  const parts = line.split(combinedRegex);
-
-  return parts.map((part, i) => {
-    if (!part) return null;
-
-    // Check for inline code (backticks)
-    if (part.startsWith('`') && part.endsWith('`') && part.length > 2) {
-      const code = part.slice(1, -1);
-      return (
-        <code
-          key={`code-${i}`}
-          className="px-1.5 py-0.5 mx-0.5 rounded bg-bg-elevated/80 text-accent-cyan font-mono text-[0.85em] border border-border-subtle/50"
-        >
-          {code}
-        </code>
-      );
-    }
-
-    // Check for URLs
-    if (/^https?:\/\//.test(part)) {
-      return (
-        <a
-          key={`url-${i}`}
-          href={part}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-accent-cyan no-underline hover:underline"
-        >
-          {part}
-        </a>
-      );
-    }
-
-    return highlightMentions(part, mentions, `text-${i}`);
-  });
-}
-
-function escapeRegExp(value: string): string {
-  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-function highlightMentions(text: string, mentions: string[] | undefined, keyPrefix: string): React.ReactNode {
-  if (!mentions || mentions.length === 0) {
-    return text;
-  }
-
-  const escapedMentions = mentions.map(escapeRegExp).filter(Boolean);
-  if (escapedMentions.length === 0) {
-    return text;
-  }
-
-  const pattern = new RegExp(`@(${escapedMentions.join('|')})\\b`, 'g');
-  const nodes: React.ReactNode[] = [];
-  let lastIndex = 0;
-  let match;
-
-  while ((match = pattern.exec(text)) !== null) {
-    if (match.index > lastIndex) {
-      nodes.push(text.slice(lastIndex, match.index));
-    }
-
-    nodes.push(
-      <span
-        key={`${keyPrefix}-mention-${match.index}`}
-        className="px-1 py-0.5 bg-accent-cyan/20 text-accent-cyan rounded"
-      >
-        @{match[1]}
-      </span>
-    );
-
-    lastIndex = match.index + match[0].length;
-  }
-
-  if (lastIndex < text.length) {
-    nodes.push(text.slice(lastIndex));
-  }
-
-  return nodes.length > 0 ? nodes : text;
-}

package/packages/dashboard/ui/tailwind.config.js

@@ -1,148 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './react-components/**/*.{js,ts,jsx,tsx}',
-    './lib/**/*.{js,ts,jsx,tsx}',
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        // Mission Control Theme - Deep Space
-        bg: {
-          deep: '#0a0a0f',
-          primary: '#0d0d14',
-          secondary: '#12121c',
-          tertiary: '#181824',
-          card: '#1a1a28',
-          elevated: '#202030',
-          hover: 'rgba(255, 255, 255, 0.04)',
-          active: 'rgba(255, 255, 255, 0.08)',
-        },
-        text: {
-          primary: '#f0f0f5',
-          secondary: '#a0a0b0',
-          muted: '#606070',
-          dim: '#404050',
-          inverse: '#0a0a0f',
-        },
-        border: {
-          DEFAULT: 'rgba(255, 255, 255, 0.1)',
-          subtle: 'rgba(255, 255, 255, 0.06)',
-          light: 'rgba(255, 255, 255, 0.1)',
-          medium: 'rgba(255, 255, 255, 0.15)',
-        },
-        // Neon Accent Colors
-        accent: {
-          DEFAULT: '#00d9ff',
-          cyan: '#00d9ff',
-          orange: '#ff6b35',
-          purple: '#a855f7',
-          green: '#00ffc8',
-          hover: '#00b8d9',
-          light: 'rgba(0, 217, 255, 0.15)',
-        },
-        // Provider Colors
-        provider: {
-          claude: '#00d9ff',
-          codex: '#ff6b35',
-          gemini: '#a855f7',
-        },
-        // Status Colors
-        success: {
-          DEFAULT: '#00ffc8',
-          light: 'rgba(0, 255, 200, 0.15)',
-        },
-        warning: {
-          DEFAULT: '#ff6b35',
-          light: 'rgba(255, 107, 53, 0.15)',
-        },
-        error: {
-          DEFAULT: '#ff4757',
-          light: 'rgba(255, 71, 87, 0.15)',
-        },
-        // Sidebar
-        sidebar: {
-          bg: '#0d0d14',
-          border: 'rgba(255, 255, 255, 0.08)',
-          hover: 'rgba(255, 255, 255, 0.06)',
-        },
-      },
-      fontFamily: {
-        display: ['Outfit', 'sans-serif'],
-        sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
-        mono: ['IBM Plex Mono', 'SF Mono', 'Consolas', 'monospace'],
-      },
-      fontSize: {
-        xs: '11px',
-        sm: '13px',
-        base: '14px',
-        lg: '15px',
-        xl: '16px',
-        '2xl': '18px',
-        '3xl': '24px',
-        '4xl': '32px',
-      },
-      spacing: {
-        sidebar: '280px',
-        header: '52px',
-      },
-      borderRadius: {
-        sm: '4px',
-        md: '6px',
-        lg: '8px',
-        xl: '12px',
-        '2xl': '16px',
-      },
-      boxShadow: {
-        sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
-        md: '0 1px 3px rgba(0, 0, 0, 0.1)',
-        lg: '0 4px 6px rgba(0, 0, 0, 0.1)',
-        xl: '0 10px 15px rgba(0, 0, 0, 0.1)',
-        modal: '0 16px 70px rgba(0, 0, 0, 0.7)',
-        'glow-cyan': '0 0 20px rgba(0, 217, 255, 0.3)',
-        'glow-orange': '0 0 20px rgba(255, 107, 53, 0.3)',
-        'glow-purple': '0 0 20px rgba(168, 85, 247, 0.3)',
-        'glow-green': '0 0 20px rgba(0, 255, 200, 0.3)',
-      },
-      animation: {
-        spin: 'spin 1s linear infinite',
-        pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-        'fade-in': 'fadeIn 150ms ease',
-        'slide-up': 'slideUp 200ms ease',
-        'slide-down': 'slideDown 200ms ease',
-        'kill-pulse': 'killPulse 0.6s ease-in-out infinite',
-        'pulse-glow': 'pulseGlow 2s ease-in-out infinite',
-      },
-      keyframes: {
-        fadeIn: {
-          from: { opacity: '0' },
-          to: { opacity: '1' },
-        },
-        slideUp: {
-          from: { opacity: '0', transform: 'translateY(10px)' },
-          to: { opacity: '1', transform: 'translateY(0)' },
-        },
-        slideDown: {
-          from: { opacity: '0', transform: 'translateY(-10px)' },
-          to: { opacity: '1', transform: 'translateY(0)' },
-        },
-        killPulse: {
-          '0%, 100%': { opacity: '1' },
-          '50%': { opacity: '0.6' },
-        },
-        pulseGlow: {
-          '0%, 100%': { opacity: '1', boxShadow: '0 0 0 0 rgba(0, 217, 255, 0.4)' },
-          '50%': { opacity: '0.8', boxShadow: '0 0 20px 4px transparent' },
-        },
-      },
-      transitionDuration: {
-        fast: '150ms',
-        normal: '200ms',
-        slow: '300ms',
-      },
-    },
-  },
-  plugins: [],
-};