fix(ui): display dynamic backend label in dashboard

- Add backend/backendLabel fields to CliproxyUpdateCheckResult
- Update proxy-status-widget to show backendLabel from API
- Update cliproxy page header to use backendLabel

Dashboard now shows "CLIProxy" or "CLIProxy Plus" based on configured
backend in config.yaml instead of hardcoded "CLIProxy Plus".
This commit is contained in:
kaitranntt
2026-01-23 13:25:24 -05:00
parent 388ab69a97
commit dad4349994
3 changed files with 11 additions and 2 deletions
+7
View File
@@ -205,6 +205,9 @@ export interface CliproxyUpdateCheckResult {
latestVersion: string; latestVersion: string;
fromCache: boolean; fromCache: boolean;
checkedAt: number; checkedAt: number;
// Backend info
backend: CLIProxyBackend;
backendLabel: string;
// Stability fields // Stability fields
isStable: boolean; isStable: boolean;
maxStableVersion: string; maxStableVersion: string;
@@ -223,8 +226,12 @@ export async function checkCliproxyUpdate(): Promise<CliproxyUpdateCheckResult>
? undefined ? undefined
: `v${result.currentVersion} has known stability issues. Max stable: v${CLIPROXY_MAX_STABLE_VERSION}`; : `v${result.currentVersion} has known stability issues. Max stable: v${CLIPROXY_MAX_STABLE_VERSION}`;
const backendLabel = backend === 'plus' ? 'CLIProxy Plus' : 'CLIProxy';
return { return {
...result, ...result,
backend,
backendLabel,
isStable, isStable,
maxStableVersion: CLIPROXY_MAX_STABLE_VERSION, maxStableVersion: CLIPROXY_MAX_STABLE_VERSION,
stabilityMessage, stabilityMessage,
@@ -282,7 +282,7 @@ export function ProxyStatusWidget() {
isRunning ? 'bg-green-500 animate-pulse' : 'bg-muted-foreground/30' isRunning ? 'bg-green-500 animate-pulse' : 'bg-muted-foreground/30'
)} )}
/> />
<span className="text-sm font-medium">CLIProxy Plus</span> <span className="text-sm font-medium">{updateCheck?.backendLabel ?? 'CLIProxy'}</span>
</div> </div>
{/* Right side: icon buttons when running */} {/* Right side: icon buttons when running */}
+3 -1
View File
@@ -19,6 +19,7 @@ import { ProxyStatusWidget } from '@/components/monitoring/proxy-status-widget';
import { import {
useCliproxy, useCliproxy,
useCliproxyAuth, useCliproxyAuth,
useCliproxyUpdateCheck,
useSetDefaultAccount, useSetDefaultAccount,
useRemoveAccount, useRemoveAccount,
usePauseAccount, usePauseAccount,
@@ -179,6 +180,7 @@ export function CliproxyPage() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { data: authData, isLoading: authLoading } = useCliproxyAuth(); const { data: authData, isLoading: authLoading } = useCliproxyAuth();
const { data: variantsData, isFetching } = useCliproxy(); const { data: variantsData, isFetching } = useCliproxy();
const { data: updateCheck } = useCliproxyUpdateCheck();
const setDefaultMutation = useSetDefaultAccount(); const setDefaultMutation = useSetDefaultAccount();
const removeMutation = useRemoveAccount(); const removeMutation = useRemoveAccount();
const pauseMutation = usePauseAccount(); const pauseMutation = usePauseAccount();
@@ -249,7 +251,7 @@ export function CliproxyPage() {
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Zap className="w-5 h-5 text-primary" /> <Zap className="w-5 h-5 text-primary" />
<h1 className="font-semibold">CLIProxy Plus</h1> <h1 className="font-semibold">{updateCheck?.backendLabel ?? 'CLIProxy'}</h1>
</div> </div>
<Button <Button
variant="ghost" variant="ghost"