feat(ui): add remote mode indicator to provider editor header

Shows "Remote" badge with Globe icon and "Traffic auto-routed to
remote server" message when remote CLIProxy mode is active.
This commit is contained in:
kaitranntt
2025-12-21 04:34:29 -05:00
parent 4ee3100622
commit 3bf9ebe32a
@@ -5,7 +5,7 @@
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Save, Loader2, RefreshCw } from 'lucide-react';
import { Save, Loader2, RefreshCw, Globe } from 'lucide-react';
import { ProviderLogo } from '../provider-logo';
import type { SettingsResponse } from './types';
@@ -43,16 +43,31 @@ export function ProviderEditorHeader({
<div>
<div className="flex items-center gap-2">
<h2 className="text-lg font-semibold">{displayName}</h2>
{isRemoteMode && (
<Badge
variant="secondary"
className="text-xs gap-1 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
>
<Globe className="w-3 h-3" />
Remote
</Badge>
)}
{!isRemoteMode && data?.path && (
<Badge variant="outline" className="text-xs">
{data.path.replace(/^.*[\\/]/, '')}
</Badge>
)}
</div>
{!isRemoteMode && data && (
<p className="text-xs text-muted-foreground mt-0.5">
Last modified: {new Date(data.mtime).toLocaleString()}
{isRemoteMode ? (
<p className="text-xs text-blue-600 dark:text-blue-400 mt-0.5">
Traffic auto-routed to remote server
</p>
) : (
data && (
<p className="text-xs text-muted-foreground mt-0.5">
Last modified: {new Date(data.mtime).toLocaleString()}
</p>
)
)}
</div>
</div>