+
+ );
+ }
+
+ return (
+ No recent connections
+
+ {/* Header */}
+
+ );
+}
+
+/** Strip common email domains for cleaner display */
+function cleanEmail(email: string): string {
+ return email.replace(/@(gmail|yahoo|hotmail|outlook|icloud)\.com$/i, '');
+}
+
+function getTimeAgo(dateStr?: string): string {
+ if (!dateStr) return 'never';
+ const date = new Date(dateStr);
+ if (isNaN(date.getTime())) return 'unknown';
+ const now = new Date();
+ const diffMs = now.getTime() - date.getTime();
+ if (diffMs < 0) return 'just now';
+ const diffMins = Math.floor(diffMs / 60000);
+ if (diffMins < 1) return 'just now';
+ if (diffMins < 60) return `${diffMins}m ago`;
+ const diffHours = Math.floor(diffMins / 60);
+ if (diffHours < 24) return `${diffHours}h ago`;
+ const diffDays = Math.floor(diffHours / 24);
+ return `${diffDays}d ago`;
+}
+
+export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
+ const containerRef = useRef
+
+
+ {/* Timeline container */}
+
+
+
+ {/* Vertical line */}
+
+
+ {/* Events */}
+
+
+ {events.slice(0, 8).map((event) => {
+ const statusColor =
+ event.status === 'success'
+ ? STATUS_COLORS.success
+ : event.status === 'failed'
+ ? STATUS_COLORS.failed
+ : STATUS_COLORS.degraded;
+
+ return (
+
+
+ {/* Show more indicator */}
+ {events.length > 8 && (
+
+ {/* Timeline dot */}
+
+
+ {/* Event content */}
+
+ );
+ })}
+
+
+
+
+ {cleanEmail(event.accountEmail)}
+
+
+ {formatTimelineTime(event.timestamp)}
+
+
+
+
+ {event.status}
+
+ {event.latencyMs && (
+
+ {event.latencyMs}ms
+
+ )}
+
+
+
+ +{events.length - 8} more events
+
+
+ )}
+
+ {/* Back button */}
+ {onBack && (
+
+ )}
+
+ {/* Main visualization area - 3 column layout: Left Accounts | Provider | Right Accounts + Timeline */}
+
+ );
+}
diff --git a/ui/src/components/auth-monitor.tsx b/ui/src/components/auth-monitor.tsx
new file mode 100644
index 00000000..4f812050
--- /dev/null
+++ b/ui/src/components/auth-monitor.tsx
@@ -0,0 +1,463 @@
+/**
+ * Auth Monitor Component with Account Flow Visualization
+ * Shows request flow from accounts to providers using custom SVG bezier curves
+ * Uses glass panel aesthetic with hover interactions and glow effects
+ */
+
+import { useState, useMemo, useEffect } from 'react';
+import { useCliproxyAuth } from '@/hooks/use-cliproxy';
+import { useCliproxyStats, type AccountUsageStats } from '@/hooks/use-cliproxy-stats';
+import { cn, STATUS_COLORS } from '@/lib/utils';
+import { getProviderDisplayName, PROVIDER_COLORS } from '@/lib/provider-config';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ProviderIcon } from '@/components/provider-icon';
+import { AccountFlowViz } from '@/components/account-flow-viz';
+import type { AuthStatus, OAuthAccount } from '@/lib/api-client';
+import { Activity, CheckCircle2, XCircle, ChevronRight, Radio } from 'lucide-react';
+
+interface AccountRow {
+ id: string;
+ email: string;
+ provider: string;
+ displayName: string;
+ isDefault: boolean;
+ successCount: number;
+ failureCount: number;
+ lastUsedAt?: string;
+ color: string;
+}
+
+interface ProviderStats {
+ provider: string;
+ displayName: string;
+ totalRequests: number;
+ successCount: number;
+ failureCount: number;
+ accountCount: number;
+ accounts: AccountRow[];
+}
+
+function getSuccessRate(success: number, failure: number): number {
+ const total = success + failure;
+ if (total === 0) return 100;
+ return Math.round((success / total) * 100);
+}
+
+/** Strip common email domains for cleaner display */
+function cleanEmail(email: string): string {
+ return email.replace(/@(gmail|yahoo|hotmail|outlook|icloud)\.com$/i, '');
+}
+
+// Vibrant colors for account segments - darker for light theme contrast
+const ACCOUNT_COLORS = [
+ '#1e6091', // Deep Cerulean (was #277da1)
+ '#2d8a6e', // Deep Seaweed (was #43aa8b)
+ '#d4a012', // Dark Tuscan (was #f9c74f)
+ '#c92a2d', // Deep Strawberry (was #f94144)
+ '#c45a1a', // Deep Pumpkin (was #f3722c)
+ '#6b9c4d', // Dark Willow (was #90be6d)
+ '#3d5a73', // Deep Blue Slate (was #577590)
+ '#cc7614', // Dark Carrot (was #f8961e)
+ '#3a7371', // Deep Cyan (was #4d908e)
+ '#7c5fc4', // Deep Purple (was #a78bfa)
+];
+
+/** Enhanced live pulse indicator with multi-ring animation */
+function LivePulse() {
+ return (
+
+ {/* Flow visualization section */}
+
+
+ {/* Detail Panel - slides in from bottom, pushes content */}
+
+ {/* SVG Canvas (Background) */}
+
+
+ {/* Left Accounts */}
+
+
+ {/* Right Section: Connection Timeline - Fixed compact width */}
+
+ {leftAccounts.map((account) => {
+ const originalIndex = accounts.findIndex((a) => a.id === account.id);
+ const total = account.successCount + account.failureCount;
+ const isHovered = hoveredAccount === originalIndex;
+ const isDragging = draggingId === account.id;
+ const offset = getOffset(account.id);
+
+ return (
+
+
+ {/* Center Provider */}
+ !isDragging && setSelectedAccount(account)}
+ onMouseEnter={() => setHoveredAccount(originalIndex)}
+ onMouseLeave={() => setHoveredAccount(null)}
+ onPointerDown={(e) => handlePointerDown(account.id, e)}
+ onPointerMove={handlePointerMove}
+ onPointerUp={handlePointerUp}
+ onPointerCancel={handlePointerUp}
+ className={cn(
+ 'group/card relative rounded-lg p-3 pr-6 cursor-grab transition-shadow duration-200',
+ 'bg-muted/30 dark:bg-zinc-900/60 backdrop-blur-sm',
+ 'border border-border/50 dark:border-white/[0.08]',
+ 'border-l-2 select-none touch-none',
+ isHovered && 'bg-muted/50 dark:bg-zinc-800/60',
+ isDragging && 'cursor-grabbing shadow-xl scale-105 z-50'
+ )}
+ style={{
+ borderLeftColor: account.color,
+ transform: `translate(${offset.x}px, ${offset.y}px)${isDragging ? ' scale(1.05)' : ''}`,
+ }}
+ >
+ {/* Drag handle indicator */}
+
+ );
+ })}
+
+
+ {cleanEmail(account.email)}
+
+
+
+
+ {total.toLocaleString()} reqs
+
+
+ {/* Connector Dot - Right side */}
+
+
+ {account.failureCount > 0 && (
+
+ )}
+
+
+
+ {(() => {
+ const isDragging = draggingId === 'provider';
+ const offset = getOffset('provider');
+ return (
+
+
+ {/* Right Accounts */}
+ {hasRightAccounts && (
+ handlePointerDown('provider', e)}
+ onPointerMove={handlePointerMove}
+ onPointerUp={handlePointerUp}
+ onPointerCancel={handlePointerUp}
+ className={cn(
+ 'group relative w-full rounded-xl p-4 cursor-grab transition-shadow duration-200',
+ 'bg-muted/30 dark:bg-zinc-900/60 backdrop-blur-sm',
+ 'border-2 border-border/50 dark:border-white/[0.08]',
+ // Idle animations: float + border glow (disabled when dragging)
+ !isDragging && 'animate-subtle-float animate-border-glow',
+ 'select-none touch-none',
+ hoveredAccount !== null && 'scale-[1.02]',
+ isDragging && 'cursor-grabbing shadow-2xl scale-105 z-50'
+ )}
+ style={
+ {
+ '--glow-color': `${providerColor}60`,
+ borderColor: hoveredAccount !== null ? `${providerColor}80` : undefined,
+ transform: `translate(${offset.x}px, ${offset.y}px)${isDragging ? ' scale(1.05)' : ''}`,
+ } as React.CSSProperties
+ }
+ >
+ {/* Drag handle */}
+
+ );
+ })()}
+
+ {/* Provider icon with breathing animation */}
+
+
+
+
+
+
+ + {providerData.displayName} +
++ Provider +
+
+
+
+ Total Requests
+
+ {totalRequests.toLocaleString()}
+
+
+
+ Accounts
+ {accounts.length}
+
+
+
+
+
+ {rightAccounts.map((account) => {
+ const originalIndex = accounts.findIndex((a) => a.id === account.id);
+ const total = account.successCount + account.failureCount;
+ const isHovered = hoveredAccount === originalIndex;
+ const isDragging = draggingId === account.id;
+ const offset = getOffset(account.id);
+
+ return (
+
+ )}
+ !isDragging && setSelectedAccount(account)}
+ onMouseEnter={() => setHoveredAccount(originalIndex)}
+ onMouseLeave={() => setHoveredAccount(null)}
+ onPointerDown={(e) => handlePointerDown(account.id, e)}
+ onPointerMove={handlePointerMove}
+ onPointerUp={handlePointerUp}
+ onPointerCancel={handlePointerUp}
+ className={cn(
+ 'group/card relative rounded-lg p-3 pl-6 cursor-grab transition-shadow duration-200',
+ 'bg-muted/30 dark:bg-zinc-900/60 backdrop-blur-sm',
+ 'border border-border/50 dark:border-white/[0.08]',
+ 'border-r-2 select-none touch-none',
+ isHovered && 'bg-muted/50 dark:bg-zinc-800/60',
+ isDragging && 'cursor-grabbing shadow-xl scale-105 z-50'
+ )}
+ style={{
+ borderRightColor: account.color,
+ transform: `translate(${offset.x}px, ${offset.y}px)${isDragging ? ' scale(1.05)' : ''}`,
+ }}
+ >
+ {/* Drag handle indicator */}
+
+ );
+ })}
+
+
+
+
+ {/* Connector Dot - Left side */}
+
+
+
+ {account.failureCount > 0 && (
+
+ )}
+
+
+ {total.toLocaleString()} reqs
+
+
+
+
+
+
+
+
+
+
+ {selectedAccount && (
+
+
+ {/* Account Info */}
+
+ )}
+
+
+
+ {/* Stats */}
+
+
+
+ {cleanEmail(selectedAccount.email)}
+
+
+
+ Source Account
+
+
+
+
+
+
+
+ {selectedAccount.successCount.toLocaleString()}
+
+
+
+
+
+
+
+ {selectedAccount.failureCount.toLocaleString()}
+
+
+
+
+
+
+ {getTimeAgo(selectedAccount.lastUsedAt)}
+
+
+ {/* Outer ping ring */}
+
+ {/* Middle pulse ring */}
+
+ {/* Inner solid dot */}
+
+
+ );
+}
+
+/** Inline success/failure badge for provider cards */
+function InlineStatsBadge({ success, failure }: { success: number; failure: number }) {
+ if (success === 0 && failure === 0) {
+ return no activity;
+ }
+
+ return (
+
+
+ );
+}
+
+export function AuthMonitor() {
+ const { data, isLoading, error } = useCliproxyAuth();
+ const { data: statsData, isLoading: statsLoading, dataUpdatedAt } = useCliproxyStats();
+ const [selectedProvider, setSelectedProvider] = useState
+
+ {failure > 0 && (
+
+
+ )}
+
+
+ );
+ }
+
+ if (error || !data?.authStatus || accounts.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+ {[1, 2, 3, 4].map((i) => (
+
+
+ {/* Enhanced Live Header with gradient glow */}
+
+ );
+}
+
+// Summary Card Component
+function SummaryCard({
+ icon,
+ label,
+ value,
+ color,
+}: {
+ icon: React.ReactNode;
+ label: string;
+ value: string | number;
+ color?: string;
+}) {
+ return (
+
+
+
+ {/* Summary Stats Row */}
+
+
+
+
+
+
+ |
+ {accounts.length} accounts
+ {totalRequests.toLocaleString()} req
+
+
+
+ {/* Flow Visualization */}
+
+ {selectedProviderData ? (
+ // Account-level flow view
+ setSelectedProvider(null)}
+ />
+ ) : (
+ // Provider cards view
+
+
+
+ )}
+
+ Request Distribution by Provider
+
+
+ {providerStats.map((ps) => {
+ const successRate = getSuccessRate(ps.successCount, ps.failureCount);
+ const providerColor = PROVIDER_COLORS[ps.provider.toLowerCase()] || '#6b7280';
+ const isHovered = hoveredProvider === ps.provider;
+
+ return (
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/ui/src/components/docs-link.tsx b/ui/src/components/docs-link.tsx
new file mode 100644
index 00000000..72e16014
--- /dev/null
+++ b/ui/src/components/docs-link.tsx
@@ -0,0 +1,20 @@
+/**
+ * Docs Link Button
+ *
+ * Links to CCS documentation site for guides and reference.
+ */
+
+import { BookOpen } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const DOCS_URL = 'https://docs.ccs.kaitran.ca';
+
+export function DocsLink() {
+ return (
+
+ );
+}
diff --git a/ui/src/components/hero-section.tsx b/ui/src/components/hero-section.tsx
index 17418826..47b49b91 100644
--- a/ui/src/components/hero-section.tsx
+++ b/ui/src/components/hero-section.tsx
@@ -1,85 +1,22 @@
import { Badge } from '@/components/ui/badge';
import { CcsLogo } from '@/components/ccs-logo';
-import { CheckCircle2, AlertCircle, XCircle } from 'lucide-react';
-import { cn } from '@/lib/utils';
interface HeroSectionProps {
version?: string;
- healthStatus?: 'ok' | 'warning' | 'error';
- healthPassed?: number;
- healthTotal?: number;
}
-const statusConfig = {
- ok: {
- icon: CheckCircle2,
- label: 'All Systems Operational',
- color: 'text-green-600',
- badgeBg: 'bg-green-500/10 text-green-600 border-green-500/20',
- },
- warning: {
- icon: AlertCircle,
- label: 'Some Issues Detected',
- color: 'text-yellow-500',
- badgeBg: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
- },
- error: {
- icon: XCircle,
- label: 'Action Required',
- color: 'text-red-500',
- badgeBg: 'bg-red-500/10 text-red-500 border-red-500/20',
- },
-};
-
-export function HeroSection({
- version = '5.0.0',
- healthStatus = 'ok',
- healthPassed = 0,
- healthTotal = 0,
-}: HeroSectionProps) {
- const status = statusConfig[healthStatus];
- const StatusIcon = status.icon;
-
+export function HeroSection({ version = '5.0.0' }: HeroSectionProps) {
return (
-
+ {icon}
+
+
+
+ {label}
+
+ {value}
+
+
- {/* Subtle background pattern */}
-
-
-
-
-
- {/* Left: Logo and Welcome */}
-
-
-
- {/* Right: Health Status */}
-
-
-
-
- v{version}
-
-
- CCS Config
-Claude Code Switch Dashboard
-
-
-
+ {status.label}
- {healthTotal > 0 && ( -- {healthPassed}/{healthTotal} checks passed -
- )} -
+
);
diff --git a/ui/src/components/layout.tsx b/ui/src/components/layout.tsx
index fba044b2..2872d377 100644
--- a/ui/src/components/layout.tsx
+++ b/ui/src/components/layout.tsx
@@ -4,6 +4,7 @@ import { SidebarProvider } from '@/components/ui/sidebar';
import { AppSidebar } from '@/components/app-sidebar';
import { ThemeToggle } from '@/components/theme-toggle';
import { GitHubLink } from '@/components/github-link';
+import { DocsLink } from '@/components/docs-link';
import { ConnectionIndicator } from '@/components/connection-indicator';
import { LocalhostDisclaimer } from '@/components/localhost-disclaimer';
import { Skeleton } from '@/components/ui/skeleton';
@@ -26,6 +27,7 @@ export function Layout() {
+
+
+ v{version}
+
+ CCS Config
+Claude Code Switch Dashboard
CCS Config
Profiles
- {mockProfiles.map((profile) => (
+ {normalizedProfiles.map((profile) => (
+ );
+ }
+
+ const bgColor = PROVIDER_COLORS[normalized] || '#6b7280';
+ return (
+ ) {
+ return (
+
+
+
+
+ );
+}
+
+export { Checkbox };
diff --git a/ui/src/components/ui/switch.tsx b/ui/src/components/ui/switch.tsx
new file mode 100644
index 00000000..09603b92
--- /dev/null
+++ b/ui/src/components/ui/switch.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+import { cn } from '@/lib/utils';
+
+function Switch({ className, ...props }: React.ComponentProps) {
+ return (
+
+
+ );
+}
+
+export { Switch };
diff --git a/ui/src/hooks/use-cliproxy-stats.ts b/ui/src/hooks/use-cliproxy-stats.ts
index 89f461a0..3d27c7a9 100644
--- a/ui/src/hooks/use-cliproxy-stats.ts
+++ b/ui/src/hooks/use-cliproxy-stats.ts
@@ -4,9 +4,25 @@
import { useQuery } from '@tanstack/react-query';
+/** Per-account usage statistics */
+export interface AccountUsageStats {
+ /** Account email or identifier */
+ source: string;
+ /** Number of successful requests */
+ successCount: number;
+ /** Number of failed requests */
+ failureCount: number;
+ /** Total tokens used */
+ totalTokens: number;
+ /** Last request timestamp */
+ lastUsedAt?: string;
+}
+
/** CLIProxy usage statistics */
export interface CliproxyStats {
totalRequests: number;
+ successCount: number;
+ failureCount: number;
tokens: {
input: number;
output: number;
@@ -14,6 +30,8 @@ export interface CliproxyStats {
};
requestsByModel: Record;
requestsByProvider: Record;
+ /** Per-account usage breakdown */
+ accountStats: Record;
quotaExceededCount: number;
retryCount: number;
collectedAt: string;
@@ -67,9 +85,9 @@ export function useCliproxyStats(enabled = true) {
queryKey: ['cliproxy-stats'],
queryFn: fetchCliproxyStats,
enabled,
- refetchInterval: 30000, // Refresh every 30 seconds
+ refetchInterval: 5000, // Refresh every 5 seconds for near-real-time updates
retry: 1,
- staleTime: 10000, // Consider data stale after 10 seconds
+ staleTime: 3000, // Consider data stale after 3 seconds
});
}
diff --git a/ui/src/index.css b/ui/src/index.css
index 664ae9c1..1eba2243 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -5,46 +5,46 @@
:root {
/* CCS Brand Colors - Calculated from Crail, Pampas, White, Cloudy */
/* Primary: Neutral (Dark Warm Grey) - Demoted Crail from Primary */
- --primary: oklch(0.2 0.02 40);
+ --primary: oklch(0.15 0.02 40); /* Darker for better contrast */
--primary-foreground: oklch(0.9635 0.0067 97.35); /* Pampas */
- --secondary: oklch(0.9 0.01 95); /* Light Cloudy */
- --secondary-foreground: oklch(0.2 0.02 40);
+ --secondary: oklch(0.88 0.012 95); /* Slightly darker */
+ --secondary-foreground: oklch(0.15 0.02 40);
/* Accent: Crail (Moved from Primary) */
- --accent: oklch(0.5971 0.1352 39.87); /* Crail */
+ --accent: oklch(0.52 0.15 39.87); /* Crail - slightly darker */
--accent-foreground: oklch(1 0 0); /* White */
--background: oklch(0.9635 0.0067 97.35); /* Pampas */
- --foreground: oklch(0.2 0.02 40); /* Dark warm grey */
+ --foreground: oklch(0.15 0.02 40); /* Darker for better readability */
- --muted: oklch(0.92 0.01 95);
- --muted-foreground: oklch(0.55 0.02 40);
+ --muted: oklch(0.9 0.012 95);
+ --muted-foreground: oklch(0.4 0.025 40); /* Much darker: 0.55 -> 0.40 */
- --border: oklch(0.85 0.015 91.6); /* Based on Cloudy */
- --input: oklch(0.85 0.015 91.6);
+ --border: oklch(0.78 0.02 91.6); /* Darker: 0.85 -> 0.78 */
+ --input: oklch(0.78 0.02 91.6);
- --ring: oklch(0.2 0.02 40); /* Match primary */
+ --ring: oklch(0.15 0.02 40); /* Match primary */
--radius: 0.5rem;
- --popover: oklch(0.9635 0.0067 97.35); /* Match background */
- --popover-foreground: oklch(0.2 0.02 40); /* Match foreground */
+ --popover: oklch(0.98 0.005 97.35); /* Slight depth */
+ --popover-foreground: oklch(0.15 0.02 40); /* Match foreground */
- --card: oklch(0.9635 0.0067 97.35); /* Match background */
- --card-foreground: oklch(0.2 0.02 40); /* Match foreground */
+ --card: oklch(0.98 0.005 97.35); /* Slight depth from background */
+ --card-foreground: oklch(0.15 0.02 40); /* Match foreground */
- --destructive: oklch(0.577 0.245 27.325); /* Red 600 */
- --destructive-foreground: oklch(0.9635 0.0067 97.35); /* White */
+ --destructive: oklch(0.5 0.22 27); /* Darker red for visibility */
+ --destructive-foreground: oklch(0.98 0.005 97.35); /* White */
/* Sidebar colors - Light */
--sidebar: oklch(0.9635 0.0067 97.35); /* Pampas */
- --sidebar-foreground: oklch(0.2 0.02 40);
- --sidebar-primary: oklch(0.2 0.02 40); /* Neutral */
+ --sidebar-foreground: oklch(0.15 0.02 40);
+ --sidebar-primary: oklch(0.15 0.02 40); /* Neutral - darker */
--sidebar-primary-foreground: oklch(0.9635 0.0067 97.35);
- --sidebar-accent: oklch(0.5971 0.1352 39.87); /* Crail */
+ --sidebar-accent: oklch(0.52 0.15 39.87); /* Crail - darker */
--sidebar-accent-foreground: oklch(1 0 0);
- --sidebar-border: oklch(0.85 0.015 91.6);
- --sidebar-ring: oklch(0.2 0.02 40);
+ --sidebar-border: oklch(0.78 0.02 91.6); /* Darker */
+ --sidebar-ring: oklch(0.15 0.02 40);
}
.dark {
@@ -199,3 +199,116 @@
.zoom-in-95 {
animation-name: zoom-in;
}
+
+/* Flow visualization animations */
+@keyframes request-pulse {
+ 0% {
+ stroke-opacity: 1;
+ stroke-width: inherit;
+ filter: drop-shadow(0 0 2px currentColor);
+ }
+ 30% {
+ stroke-opacity: 0.9;
+ filter: drop-shadow(0 0 8px currentColor);
+ }
+ 60% {
+ stroke-opacity: 0.5;
+ stroke-width: calc(inherit * 1.5);
+ filter: drop-shadow(0 0 4px currentColor);
+ }
+ 100% {
+ stroke-opacity: 0;
+ stroke-width: calc(inherit * 2);
+ filter: none;
+ }
+}
+
+/* Traveling dot along path */
+@keyframes travel-dot {
+ 0% {
+ offset-distance: 0%;
+ opacity: 1;
+ }
+ 80% {
+ opacity: 1;
+ }
+ 100% {
+ offset-distance: 100%;
+ opacity: 0;
+ }
+}
+
+@keyframes glow-pulse {
+ 0%,
+ 100% {
+ box-shadow: 0 0 0 0 var(--glow-color, rgba(16, 185, 129, 0.3));
+ transform: scale(1);
+ }
+ 25% {
+ box-shadow: 0 0 15px 3px var(--glow-color, rgba(16, 185, 129, 0.5));
+ transform: scale(1.02);
+ }
+ 50% {
+ box-shadow: 0 0 25px 6px var(--glow-color, rgba(16, 185, 129, 0.4));
+ transform: scale(1.01);
+ }
+ 75% {
+ box-shadow: 0 0 12px 2px var(--glow-color, rgba(16, 185, 129, 0.35));
+ }
+}
+
+@keyframes subtle-float {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-3px);
+ }
+}
+
+@keyframes icon-breathe {
+ 0%,
+ 100% {
+ transform: scale(1);
+ opacity: 0.9;
+ }
+ 50% {
+ transform: scale(1.05);
+ opacity: 1;
+ }
+}
+
+@keyframes border-glow {
+ 0%,
+ 100% {
+ border-color: var(--glow-color, rgba(16, 185, 129, 0.2));
+ }
+ 50% {
+ border-color: var(--glow-color, rgba(16, 185, 129, 0.5));
+ }
+}
+
+.animate-request-pulse {
+ animation: request-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.animate-glow-pulse {
+ animation: glow-pulse 2.5s ease-in-out infinite;
+}
+
+.animate-travel-dot {
+ animation: travel-dot 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.animate-subtle-float {
+ animation: subtle-float 3s ease-in-out infinite;
+}
+
+.animate-icon-breathe {
+ animation: icon-breathe 2.5s ease-in-out infinite;
+}
+
+.animate-border-glow {
+ animation: border-glow 2s ease-in-out infinite;
+}
diff --git a/ui/src/lib/provider-config.ts b/ui/src/lib/provider-config.ts
new file mode 100644
index 00000000..299e8145
--- /dev/null
+++ b/ui/src/lib/provider-config.ts
@@ -0,0 +1,37 @@
+/**
+ * Provider Configuration
+ * Shared constants for provider branding and assets
+ */
+
+// Map provider names to asset filenames (only providers with actual logos)
+export const PROVIDER_ASSETS: Record = {
+ gemini: '/assets/providers/gemini-color.svg',
+ agy: '/assets/providers/agy.png',
+ codex: '/assets/providers/openai.svg',
+ qwen: '/assets/providers/qwen-color.svg',
+};
+
+// Provider brand colors
+export const PROVIDER_COLORS: Record = {
+ gemini: '#4285F4',
+ agy: '#f3722c',
+ codex: '#10a37f',
+ vertex: '#4285F4',
+ iflow: '#f94144',
+ qwen: '#6236FF',
+};
+
+// Provider display names
+const PROVIDER_NAMES: Record = {
+ gemini: 'Gemini',
+ agy: 'Antigravity',
+ codex: 'Codex',
+ vertex: 'Vertex AI',
+ iflow: 'iFlow',
+ qwen: 'Qwen',
+};
+
+// Map provider to display name
+export function getProviderDisplayName(provider: string): string {
+ return PROVIDER_NAMES[provider.toLowerCase()] || provider;
+}
diff --git a/ui/src/lib/utils.ts b/ui/src/lib/utils.ts
index d683130e..326a4440 100644
--- a/ui/src/lib/utils.ts
+++ b/ui/src/lib/utils.ts
@@ -5,21 +5,38 @@ export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
-export function getModelColor(model: string): string {
- // Vibrant Tones Palette
- const colors = [
- '#f94144', // Strawberry Red
- '#f3722c', // Pumpkin Spice
- '#f8961e', // Carrot Orange
- '#f9844a', // Atomic Tangerine
- '#f9c74f', // Tuscan Sun
- '#90be6d', // Willow Green
- '#43aa8b', // Seaweed
- '#4d908e', // Dark Cyan
- '#577590', // Blue Slate
- '#277da1', // Cerulean
- ];
+// Vibrant Tones Palette
+const VIBRANT_TONES = [
+ '#f94144', // Strawberry Red
+ '#f3722c', // Pumpkin Spice
+ '#f8961e', // Carrot Orange
+ '#f9844a', // Atomic Tangerine
+ '#f9c74f', // Tuscan Sun
+ '#90be6d', // Willow Green
+ '#43aa8b', // Seaweed
+ '#4d908e', // Dark Cyan
+ '#577590', // Blue Slate
+ '#277da1', // Cerulean
+];
+// Provider color mapping (fixed colors for consistency)
+const PROVIDER_COLORS: Record = {
+ agy: '#f3722c', // Pumpkin
+ gemini: '#277da1', // Cerulean
+ codex: '#f8961e', // Carrot
+ vertex: '#577590', // Blue Slate
+ iflow: '#f94144', // Strawberry
+ qwen: '#f9c74f', // Tuscan
+};
+
+// Status colors (from Analytics Cost breakdown) - darker for light theme contrast
+export const STATUS_COLORS = {
+ success: '#15803d', // Green-700 (was Seaweed #43aa8b)
+ degraded: '#b45309', // Amber-700 (was Ochre #e09f3e)
+ failed: '#b91c1c', // Red-700 (was Merlot #9e2a2b)
+} as const;
+
+export function getModelColor(model: string): string {
// FNV-1a hash algorithm
let hash = 0x811c9dc5;
for (let i = 0; i < model.length; i++) {
@@ -28,5 +45,10 @@ export function getModelColor(model: string): string {
}
// Ensure positive index
- return colors[(hash >>> 0) % colors.length];
+ return VIBRANT_TONES[(hash >>> 0) % VIBRANT_TONES.length];
+}
+
+export function getProviderColor(provider: string): string {
+ const normalized = provider.toLowerCase();
+ return PROVIDER_COLORS[normalized] || getModelColor(provider);
}
diff --git a/ui/src/pages/home.tsx b/ui/src/pages/home.tsx
index 31b2bcb7..ccc5bf92 100644
--- a/ui/src/pages/home.tsx
+++ b/ui/src/pages/home.tsx
@@ -1,25 +1,13 @@
import { useNavigate } from 'react-router-dom';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { StatCard } from '@/components/stat-card';
import { HeroSection } from '@/components/hero-section';
-import { QuickCommands } from '@/components/quick-commands';
+import { AuthMonitor } from '@/components/auth-monitor';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Skeleton } from '@/components/ui/skeleton';
-import {
- Key,
- Zap,
- Users,
- Activity,
- Plus,
- Stethoscope,
- BookOpen,
- FolderOpen,
- AlertTriangle,
- ArrowRight,
-} from 'lucide-react';
+import { Key, Zap, Users, Activity, AlertTriangle } from 'lucide-react';
import { useOverview } from '@/hooks/use-overview';
import { useSharedSummary } from '@/hooks/use-shared';
+import { cn } from '@/lib/utils';
+import type { LucideIcon } from 'lucide-react';
const HEALTH_VARIANTS = {
ok: 'success',
@@ -27,6 +15,51 @@ const HEALTH_VARIANTS = {
error: 'error',
} as const;
+type StatVariant = 'default' | 'success' | 'warning' | 'error' | 'accent';
+
+const variantStyles: Record = {
+ default: { iconBg: 'bg-muted', iconColor: 'text-muted-foreground' },
+ success: { iconBg: 'bg-green-600/15', iconColor: 'text-green-700 dark:text-green-500' },
+ warning: { iconBg: 'bg-amber-500/15', iconColor: 'text-amber-700 dark:text-amber-400' },
+ error: { iconBg: 'bg-red-600/15', iconColor: 'text-red-700 dark:text-red-500' },
+ accent: { iconBg: 'bg-accent/15', iconColor: 'text-accent' },
+};
+
+function InlineStat({
+ title,
+ value,
+ icon: Icon,
+ variant = 'default',
+ onClick,
+}: {
+ title: string;
+ value: number | string;
+ icon: LucideIcon;
+ variant?: StatVariant;
+ onClick?: () => void;
+}) {
+ const styles = variantStyles[variant];
+
+ return (
+
+ );
+}
+
export function HomePage() {
const navigate = useNavigate();
const { data: overview, isLoading: isOverviewLoading } = useOverview();
@@ -35,8 +68,8 @@ export function HomePage() {
if (isOverviewLoading || isSharedLoading) {
return (
+ {iconElement}
+
+ );
+ }
+
+ // Without background - original behavior for logos, colored circle for fallback
+ if (assetPath) {
+ return (
+
+ {provider.charAt(0).toUpperCase()}
+
+ );
+}
diff --git a/ui/src/components/ui/checkbox.tsx b/ui/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..ae5a2796
--- /dev/null
+++ b/ui/src/components/ui/checkbox.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function Checkbox({ className, ...props }: React.ComponentProps
- {/* Hero Skeleton */}
-
+ {/* Hero Row Skeleton */}
+
@@ -44,42 +77,31 @@ export function HomePage() {
- {[1, 2, 3, 4].map((i) => (
-
-
- {/* Quick Actions Skeleton */}
-
-
- ))}
-
-
-
-
-
-
-
- {/* Quick Commands Skeleton */}
-
-
-
-
);
}
@@ -90,13 +112,57 @@ export function HomePage() {
return (
+
+
+ {/* Auth Monitor Skeleton */}
+
{[1, 2, 3, 4].map((i) => (
-
+
+
+
+
+ {[1, 2, 3].map((i) => (
+
+
+ ))}
+
- {/* Hero Section */}
-
-
- Quick Actions
-
-
-
-
-
-
-
-
- {/* Quick Commands */}
-
-
-
-
-
-
-
-
-
+ {/* Auth Monitor */}
+
);
}
diff --git a/ui/src/pages/settings.tsx b/ui/src/pages/settings.tsx
index 98d5c4e9..d14175db 100644
--- a/ui/src/pages/settings.tsx
+++ b/ui/src/pages/settings.tsx
@@ -1,46 +1,721 @@
/**
- * Settings Page - Deprecated
- * Settings functionality has been moved to API Profiles page
+ * Settings Page - WebSearch Configuration
+ * Supports Gemini CLI and Grok CLI providers
*/
-import { Link } from 'react-router-dom';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useState, useEffect } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import { Button } from '@/components/ui/button';
-import { Construction, ArrowRight } from 'lucide-react';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Switch } from '@/components/ui/switch';
+import { Input } from '@/components/ui/input';
+import {
+ Globe,
+ RefreshCw,
+ CheckCircle2,
+ AlertCircle,
+ FileCode,
+ Copy,
+ Check,
+ GripVertical,
+ Terminal,
+ ExternalLink,
+ ChevronDown,
+ ChevronUp,
+} from 'lucide-react';
+import { CodeEditor } from '@/components/code-editor';
+
+interface ProviderConfig {
+ enabled?: boolean;
+ model?: string;
+ timeout?: number;
+}
+
+interface WebSearchProvidersConfig {
+ gemini?: ProviderConfig;
+ grok?: ProviderConfig;
+ opencode?: ProviderConfig;
+}
+
+interface WebSearchConfig {
+ enabled: boolean;
+ providers?: WebSearchProvidersConfig;
+}
+
+interface CliStatus {
+ installed: boolean;
+ path: string | null;
+ version: string | null;
+}
+
+interface WebSearchStatus {
+ geminiCli: CliStatus;
+ grokCli: CliStatus;
+ opencodeCli: CliStatus;
+ readiness: {
+ status: 'ready' | 'unavailable';
+ message: string;
+ };
+}
export function SettingsPage() {
- return (
-
+ {/* Subtle background pattern */}
+
{/* Configuration Warning */}
{shared?.symlinkStatus && !shared.symlinkStatus.valid && (
@@ -107,98 +173,8 @@ export function HomePage() {
)}
- {/* Stats Grid */}
-
+
+
+
+ {/* Single Row Layout */}
+
+ {/* Left: Logo + Title */}
+
+
+ navigate('/api')}
+ />
+ navigate('/cliproxy')}
+ />
+ navigate('/accounts')}
+ />
+ navigate('/health')}
+ />
+
+
- navigate('/api')}
- />
- navigate('/cliproxy')}
- />
- navigate('/accounts')}
- />
- navigate('/health')}
- />
-
-
- {/* Quick Actions */}
-
-
-
- {shared?.commands ?? 0}
- Commands
-
-
- {shared?.skills ?? 0}
- Skills
-
-
- {shared?.agents ?? 0}
- Agents
-
-
- (null);
+ const [loading, setLoading] = useState(true);
+ const [saving, setSaving] = useState(false);
+ const [error, setError] = useState(null);
+ const [success, setSuccess] = useState(false);
+ const [status, setStatus] = useState(null);
+ const [statusLoading, setStatusLoading] = useState(true);
+ // Config viewer state
+ const [rawConfig, setRawConfig] = useState(null);
+ const [rawConfigLoading, setRawConfigLoading] = useState(false);
+ const [copied, setCopied] = useState(false);
+ // Local model input state (to avoid saving on every keystroke)
+ const [geminiModelInput, setGeminiModelInput] = useState('');
+ const [opencodeModelInput, setOpencodeModelInput] = useState('');
+ // Collapsible install hints state
+ const [showGeminiHint, setShowGeminiHint] = useState(false);
+ const [showOpencodeHint, setShowOpencodeHint] = useState(false);
+ const [showGrokHint, setShowGrokHint] = useState(false);
-
-
-
-
-
-
-
Settings
+ const [config, setConfig] = useState- The settings editor has been integrated into the API Profiles page for - a better user experience. -
-To edit environment variables for a profile:
--
-
- Go to API Profiles page -
- Click the actions menu (...) on any profile -
- Select "Edit Settings" -
-
+ // Load config and status on mount
+ useEffect(() => {
+ fetchConfig();
+ fetchStatus();
+ fetchRawConfig();
+ }, []);
+
+ // Sync local model inputs when config changes
+ useEffect(() => {
+ if (config) {
+ setGeminiModelInput(config.providers?.gemini?.model ?? 'gemini-2.5-flash');
+ setOpencodeModelInput(config.providers?.opencode?.model ?? 'opencode/grok-code');
+ }
+ }, [config]);
+
+ const fetchConfig = async () => {
+ try {
+ setLoading(true);
+ setError(null);
+ const res = await fetch('/api/websearch');
+ if (!res.ok) throw new Error('Failed to load WebSearch config');
+ const data = await res.json();
+ setConfig(data);
+ } catch (err) {
+ setError((err as Error).message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const fetchStatus = async () => {
+ try {
+ setStatusLoading(true);
+ const res = await fetch('/api/websearch/status');
+ if (!res.ok) throw new Error('Failed to load status');
+ const data = await res.json();
+ setStatus(data);
+ } catch (err) {
+ console.error('Failed to fetch WebSearch status:', err);
+ } finally {
+ setStatusLoading(false);
+ }
+ };
+
+ const fetchRawConfig = async () => {
+ try {
+ setRawConfigLoading(true);
+ const res = await fetch('/api/config/raw');
+ if (!res.ok) {
+ setRawConfig(null);
+ return;
+ }
+ const text = await res.text();
+ setRawConfig(text);
+ } catch (err) {
+ console.error('Failed to fetch raw config:', err);
+ setRawConfig(null);
+ } finally {
+ setRawConfigLoading(false);
+ }
+ };
+
+ const copyToClipboard = async () => {
+ if (!rawConfig) return;
+ try {
+ await navigator.clipboard.writeText(rawConfig);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error('Failed to copy:', err);
+ }
+ };
+
+ // Toggle Gemini provider
+ const toggleGemini = () => {
+ const providers = config?.providers || {};
+ const currentState = providers.gemini?.enabled ?? false;
+ const grokState = providers.grok?.enabled ?? false;
+ const opencodeState = providers.opencode?.enabled ?? false;
+
+ saveConfig({
+ enabled: !currentState || grokState || opencodeState, // Enable WebSearch if any provider is enabled
+ providers: {
+ ...providers,
+ gemini: {
+ ...providers.gemini,
+ enabled: !currentState,
+ },
+ },
+ });
+ };
+
+ const saveConfig = async (updates: Partial) => {
+ if (!config) return;
+
+ // Optimistic update - apply changes immediately to local state
+ const optimisticConfig = { ...config, ...updates };
+ setConfig(optimisticConfig);
+
+ try {
+ setSaving(true);
+ setError(null);
+
+ const res = await fetch('/api/websearch', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(optimisticConfig),
+ });
+
+ if (!res.ok) {
+ const data = await res.json();
+ throw new Error(data.error || 'Failed to save');
+ }
+
+ const data = await res.json();
+ setConfig(data.websearch);
+ // Quick flash of success (shorter duration, less intrusive)
+ setSuccess(true);
+ setTimeout(() => setSuccess(false), 1500);
+ // Silently refresh raw config without loading state
+ fetch('/api/config/raw')
+ .then((r) => (r.ok ? r.text() : null))
+ .then((text) => text && setRawConfig(text))
+ .catch(() => {});
+ } catch (err) {
+ // Revert optimistic update on error
+ setConfig(config);
+ setError((err as Error).message);
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const isGeminiEnabled = config?.providers?.gemini?.enabled ?? false;
+ const isGrokEnabled = config?.providers?.grok?.enabled ?? false;
+ const isOpenCodeEnabled = config?.providers?.opencode?.enabled ?? false;
+
+ // Toggle Grok provider
+ const toggleGrok = () => {
+ const providers = config?.providers || {};
+ const currentState = providers.grok?.enabled ?? false;
+
+ saveConfig({
+ enabled: isGeminiEnabled || !currentState || isOpenCodeEnabled, // Enable WebSearch if any provider is enabled
+ providers: {
+ ...providers,
+ grok: {
+ ...providers.grok,
+ enabled: !currentState,
+ },
+ },
+ });
+ };
+
+ // Toggle OpenCode provider
+ const toggleOpenCode = () => {
+ const providers = config?.providers || {};
+ const currentState = providers.opencode?.enabled ?? false;
+
+ saveConfig({
+ enabled: isGeminiEnabled || isGrokEnabled || !currentState, // Enable WebSearch if any provider is enabled
+ providers: {
+ ...providers,
+ opencode: {
+ ...providers.opencode,
+ enabled: !currentState,
+ },
+ },
+ });
+ };
+
+ // Save Gemini model on blur (only if changed)
+ const saveGeminiModel = () => {
+ const currentModel = config?.providers?.gemini?.model ?? 'gemini-2.5-flash';
+ if (geminiModelInput !== currentModel) {
+ const providers = config?.providers || {};
+ saveConfig({
+ providers: {
+ ...providers,
+ gemini: {
+ ...providers.gemini,
+ model: geminiModelInput,
+ },
+ },
+ });
+ }
+ };
+
+ // Save OpenCode model on blur (only if changed)
+ const saveOpencodeModel = () => {
+ const currentModel = config?.providers?.opencode?.model ?? 'opencode/grok-code';
+ if (opencodeModelInput !== currentModel) {
+ const providers = config?.providers || {};
+ saveConfig({
+ providers: {
+ ...providers,
+ opencode: {
+ ...providers.opencode,
+ model: opencodeModelInput,
+ },
+ },
+ });
+ }
+ };
+
+ if (loading) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ {/* Left Panel - WebSearch Controls */}
+
+
+
+ {/* Resize Handle */}
+
+
+
+ {/* Right Panel - Config Viewer */}
+
+
+
);
}
diff --git a/ui/src/vite-env.d.ts b/ui/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/ui/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+ {/* Header */}
+
+
+
+ {/* Footer */}
+
-
-
+
+
+
+ {/* Toast-style alerts - absolute positioned, no layout shift */}
+
+
+
+
+ WebSearch
++ CLI-based web search for third-party profiles +
+
+ {error && (
+
+ {error}
+
+ )}
+ {success && (
+
+
+ {/* Scrollable Content */}
+
+
+ )}
+
+ {/* Status Summary */}
+
+
+
+
+ {/* CLI Providers */}
+
+
+
+ + {isGeminiEnabled ? 'WebSearch enabled' : 'WebSearch disabled'} +
+ {statusLoading ? ( +Checking status...
+ ) : status?.readiness ? ( +{status.readiness.message}
+ ) : null} +
+
+ Providers
+ + {/* Gemini CLI Provider */} +
+
+
+ {/* OpenCode CLI Provider */}
+
+
+ {/* Model input when enabled */}
+ {isGeminiEnabled && (
+
+
+
+
+
+
+ gemini
+ + FREE + + {status?.geminiCli?.installed ? ( + + installed + + ) : ( + + not installed + + )} ++ Google Gemini CLI (1000 req/day free) +
+
+
+ )}
+ {/* Installation hint when not installed - inside card */}
+ {!status?.geminiCli?.installed && !statusLoading && (
+
+
+ setGeminiModelInput(e.target.value)}
+ onBlur={saveGeminiModel}
+ placeholder="gemini-2.5-flash"
+ className="h-8 text-sm font-mono"
+ disabled={saving}
+ />
+
+
+
+ {showGeminiHint && (
+
+ )}
+
+
+ )}
+ + Install globally (FREE tier available): +
+
+ npm install -g @google/gemini-cli
+
+
+
+
+
+ {/* Grok CLI Provider */}
+
+
+ {/* Model input when enabled */}
+ {isOpenCodeEnabled && (
+
+
+
+
+
+
+ opencode
+ + FREE + + {status?.opencodeCli?.installed ? ( + + installed + + ) : ( + + not installed + + )} ++ OpenCode (web search via Zen) +
+
+
+ )}
+ {/* Installation hint when not installed - inside card */}
+ {!status?.opencodeCli?.installed && !statusLoading && (
+
+
+ setOpencodeModelInput(e.target.value)}
+ onBlur={saveOpencodeModel}
+ placeholder="opencode/grok-code"
+ className="h-8 text-sm font-mono"
+ disabled={saving}
+ />
+
+
+
+ {showOpencodeHint && (
+
+ )}
+
+
+ )}
+ + Install globally (FREE tier available): +
+
+ curl -fsSL https://opencode.ai/install | bash
+
+
+
+
+
+
+ {/* Installation hint when not installed - inside card */}
+ {!status?.grokCli?.installed && !statusLoading && (
+
+
+
+
+
+
+ grok
+ + GROK_API_KEY + + {status?.grokCli?.installed ? ( + + installed + + ) : ( + + not installed + + )} ++ xAI Grok CLI (web + X search) +
+
+
+ {showGrokHint && (
+
+ )}
+
+
+ )}
+ + Install globally (requires xAI API key): +
+
+ npm install -g @vibe-kit/grok-cli
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+ {/* Config Content - scrollable */}
+
+
+
+
+ config.yaml
+~/.ccs/config.yaml
+
+
+
+
+
+ {rawConfigLoading ? (
+ {}}
+ language="yaml"
+ readonly
+ minHeight="auto"
+ className="min-h-full"
+ />
+ ) : (
+
+
+
+ ) : rawConfig ? (
+
+
+ )}
+
+
+ Config file not found
+
+ ccs migrate
+
+