agent-relay 2.0.22 → 2.0.23

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

@@ -1,124 +0,0 @@
-/**
- * Pagination Component
- *
- * A reusable pagination control with page numbers and navigation.
- */
-
-import React, { useMemo } from 'react';
-
-export interface PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
-  maxVisiblePages?: number;
-}
-
-export function Pagination({
-  currentPage,
-  totalPages,
-  onPageChange,
-  maxVisiblePages = 5,
-}: PaginationProps) {
-  const pages = useMemo(() => {
-    if (totalPages <= maxVisiblePages) {
-      return Array.from({ length: totalPages }, (_, i) => i + 1);
-    }
-
-    const half = Math.floor(maxVisiblePages / 2);
-    let start = Math.max(1, currentPage - half);
-    let end = Math.min(totalPages, start + maxVisiblePages - 1);
-
-    if (end - start + 1 < maxVisiblePages) {
-      start = Math.max(1, end - maxVisiblePages + 1);
-    }
-
-    const result: (number | 'ellipsis-start' | 'ellipsis-end')[] = [];
-
-    if (start > 1) {
-      result.push(1);
-      if (start > 2) {
-        result.push('ellipsis-start');
-      }
-    }
-
-    for (let i = start; i <= end; i++) {
-      result.push(i);
-    }
-
-    if (end < totalPages) {
-      if (end < totalPages - 1) {
-        result.push('ellipsis-end');
-      }
-      result.push(totalPages);
-    }
-
-    return result;
-  }, [currentPage, totalPages, maxVisiblePages]);
-
-  if (totalPages <= 1) {
-    return null;
-  }
-
-  return (
-    <nav className="flex items-center justify-center gap-1" aria-label="Pagination">
-      {/* Previous button */}
-      <button
-        onClick={() => onPageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-        className="px-2 py-1.5 text-sm rounded-md border border-sidebar-border text-text-secondary hover:bg-sidebar-border disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-        aria-label="Previous page"
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <polyline points="15 18 9 12 15 6" />
-        </svg>
-      </button>
-
-      {/* Page numbers */}
-      <div className="flex items-center gap-1">
-        {pages.map((page, index) => {
-          if (page === 'ellipsis-start' || page === 'ellipsis-end') {
-            return (
-              <span
-                key={page}
-                className="px-2 py-1 text-sm text-text-muted"
-              >
-                ...
-              </span>
-            );
-          }
-
-          const isActive = page === currentPage;
-          return (
-            <button
-              key={page}
-              onClick={() => onPageChange(page)}
-              className={`
-                min-w-[32px] px-2 py-1.5 text-sm rounded-md border transition-colors
-                ${isActive
-                  ? 'bg-accent-cyan text-bg-deep border-accent-cyan font-medium'
-                  : 'border-sidebar-border text-text-secondary hover:bg-sidebar-border'
-                }
-              `}
-              aria-label={`Page ${page}`}
-              aria-current={isActive ? 'page' : undefined}
-            >
-              {page}
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Next button */}
-      <button
-        onClick={() => onPageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-        className="px-2 py-1.5 text-sm rounded-md border border-sidebar-border text-text-secondary hover:bg-sidebar-border disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-        aria-label="Next page"
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <polyline points="9 18 15 12 9 6" />
-        </svg>
-      </button>
-    </nav>
-  );
-}

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

@@ -1,386 +0,0 @@
-/**
- * Pricing Plans Component
- *
- * Displays available subscription plans with features and pricing.
- */
-
-import React, { useState } from 'react';
-
-export interface Plan {
-  id: string;
-  name: string;
-  description: string;
-  priceMonthly: number;
-  priceYearly: number;
-  limits: {
-    maxWorkspaces: number;
-    maxAgentsPerWorkspace: number;
-    maxTeamMembers: number;
-    maxStorageGB: number;
-    maxComputeHoursPerMonth: number;
-    customDomains: boolean;
-    prioritySupport: boolean;
-    sla: boolean;
-    ssoEnabled: boolean;
-    auditLogs: boolean;
-  };
-  features: string[];
-}
-
-export interface PricingPlansProps {
-  plans: Plan[];
-  currentPlan?: string;
-  onSelectPlan: (planId: string, interval: 'month' | 'year') => void;
-  isLoading?: boolean;
-}
-
-export function PricingPlans({
-  plans,
-  currentPlan = 'free',
-  onSelectPlan,
-  isLoading = false,
-}: PricingPlansProps) {
-  const [billingInterval, setBillingInterval] = useState<'month' | 'year'>('month');
-
-  const formatPrice = (cents: number) => {
-    if (cents === 0) return 'Free';
-    return `$${(cents / 100).toFixed(0)}`;
-  };
-
-  const formatLimit = (value: number) => {
-    if (value === -1) return 'Unlimited';
-    return value.toString();
-  };
-
-  return (
-    <div className="pricing-plans">
-      {/* Billing Toggle */}
-      <div className="billing-toggle">
-        <button
-          className={`toggle-btn ${billingInterval === 'month' ? 'active' : ''}`}
-          onClick={() => setBillingInterval('month')}
-        >
-          Monthly
-        </button>
-        <button
-          className={`toggle-btn ${billingInterval === 'year' ? 'active' : ''}`}
-          onClick={() => setBillingInterval('year')}
-        >
-          Yearly
-          <span className="save-badge">Save 17%</span>
-        </button>
-      </div>
-
-      {/* Plans Grid */}
-      <div className="plans-grid">
-        {plans.map((plan) => {
-          const isCurrent = plan.id === currentPlan;
-          const price = billingInterval === 'month' ? plan.priceMonthly : plan.priceYearly;
-          const monthlyEquivalent = billingInterval === 'year' ? plan.priceYearly / 12 : plan.priceMonthly;
-
-          return (
-            <div
-              key={plan.id}
-              className={`plan-card ${isCurrent ? 'current' : ''} ${plan.id === 'pro' ? 'popular' : ''}`}
-            >
-              {plan.id === 'pro' && <div className="popular-badge">Most Popular</div>}
-              {isCurrent && <div className="current-badge">Current Plan</div>}
-
-              <div className="plan-header">
-                <h3 className="plan-name">{plan.name}</h3>
-                <p className="plan-description">{plan.description}</p>
-              </div>
-
-              <div className="plan-pricing">
-                <span className="plan-price">{formatPrice(monthlyEquivalent)}</span>
-                {price > 0 && (
-                  <span className="plan-period">
-                    /month{billingInterval === 'year' && ', billed yearly'}
-                  </span>
-                )}
-              </div>
-
-              <ul className="plan-features">
-                {plan.features.map((feature, i) => (
-                  <li key={i}>
-                    <CheckIcon />
-                    <span>{feature}</span>
-                  </li>
-                ))}
-              </ul>
-
-              <div className="plan-limits">
-                <div className="limit-item">
-                  <span className="limit-label">Workspaces</span>
-                  <span className="limit-value">{formatLimit(plan.limits.maxWorkspaces)}</span>
-                </div>
-                <div className="limit-item">
-                  <span className="limit-label">Agents/Workspace</span>
-                  <span className="limit-value">{formatLimit(plan.limits.maxAgentsPerWorkspace)}</span>
-                </div>
-                <div className="limit-item">
-                  <span className="limit-label">Team Members</span>
-                  <span className="limit-value">{formatLimit(plan.limits.maxTeamMembers)}</span>
-                </div>
-                <div className="limit-item">
-                  <span className="limit-label">Storage</span>
-                  <span className="limit-value">{formatLimit(plan.limits.maxStorageGB)} GB</span>
-                </div>
-              </div>
-
-              <button
-                className={`plan-button ${isCurrent ? 'current' : ''} ${plan.id === 'free' ? 'free' : ''}`}
-                onClick={() => onSelectPlan(plan.id, billingInterval)}
-                disabled={isCurrent || isLoading}
-              >
-                {isLoading ? (
-                  'Loading...'
-                ) : isCurrent ? (
-                  'Current Plan'
-                ) : plan.id === 'free' ? (
-                  'Downgrade'
-                ) : plan.id === 'enterprise' ? (
-                  'Contact Sales'
-                ) : (
-                  'Upgrade'
-                )}
-              </button>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function CheckIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-  );
-}
-
-export const pricingPlansStyles = `
-.pricing-plans {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 24px;
-}
-
-.billing-toggle {
-  display: flex;
-  justify-content: center;
-  gap: 4px;
-  margin-bottom: 32px;
-  background: #2a2a3e;
-  padding: 4px;
-  border-radius: 8px;
-  width: fit-content;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.toggle-btn {
-  padding: 10px 20px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: #8d8d8e;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.toggle-btn.active {
-  background: #00c896;
-  color: #1a1a2e;
-}
-
-.save-badge {
-  font-size: 11px;
-  padding: 2px 6px;
-  background: rgba(0, 200, 150, 0.2);
-  border-radius: 4px;
-  color: #00c896;
-}
-
-.toggle-btn.active .save-badge {
-  background: rgba(26, 26, 46, 0.3);
-  color: #1a1a2e;
-}
-
-.plans-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 24px;
-}
-
-.plan-card {
-  background: #1a1a2e;
-  border: 1px solid #2a2a3e;
-  border-radius: 12px;
-  padding: 24px;
-  position: relative;
-  transition: all 0.2s;
-}
-
-.plan-card:hover {
-  border-color: #3a3a4e;
-}
-
-.plan-card.popular {
-  border-color: #00c896;
-}
-
-.plan-card.current {
-  border-color: #1264a3;
-}
-
-.popular-badge,
-.current-badge {
-  position: absolute;
-  top: -12px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 4px 12px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.popular-badge {
-  background: #00c896;
-  color: #1a1a2e;
-}
-
-.current-badge {
-  background: #1264a3;
-  color: white;
-}
-
-.plan-header {
-  margin-bottom: 20px;
-}
-
-.plan-name {
-  margin: 0 0 8px;
-  font-size: 20px;
-  font-weight: 600;
-  color: #e8e8e8;
-}
-
-.plan-description {
-  margin: 0;
-  font-size: 14px;
-  color: #8d8d8e;
-}
-
-.plan-pricing {
-  margin-bottom: 24px;
-}
-
-.plan-price {
-  font-size: 36px;
-  font-weight: 700;
-  color: #e8e8e8;
-}
-
-.plan-period {
-  font-size: 14px;
-  color: #8d8d8e;
-  margin-left: 4px;
-}
-
-.plan-features {
-  list-style: none;
-  padding: 0;
-  margin: 0 0 24px;
-}
-
-.plan-features li {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 8px 0;
-  font-size: 14px;
-  color: #b8b8b8;
-}
-
-.plan-features li svg {
-  color: #00c896;
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-
-.plan-limits {
-  padding: 16px 0;
-  border-top: 1px solid #2a2a3e;
-  margin-bottom: 24px;
-}
-
-.limit-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 6px 0;
-  font-size: 13px;
-}
-
-.limit-label {
-  color: #8d8d8e;
-}
-
-.limit-value {
-  color: #e8e8e8;
-  font-weight: 500;
-}
-
-.plan-button {
-  width: 100%;
-  padding: 12px 24px;
-  border: none;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-  background: #00c896;
-  color: #1a1a2e;
-}
-
-.plan-button:hover:not(:disabled) {
-  background: #00a87d;
-}
-
-.plan-button.current {
-  background: #2a2a3e;
-  color: #8d8d8e;
-  cursor: default;
-}
-
-.plan-button.free {
-  background: transparent;
-  border: 1px solid #3a3a4e;
-  color: #8d8d8e;
-}
-
-.plan-button.free:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: #4a4a5e;
-}
-
-.plan-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-@media (max-width: 768px) {
-  .plans-grid {
-    grid-template-columns: 1fr;
-  }
-}
-`;