From dad434999469b6ed6e87c186c690004b83676420 Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Fri, 23 Jan 2026 13:25:24 -0500
Subject: [PATCH] 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".
---
 src/cliproxy/binary-manager.ts                       | 7 +++++++
 ui/src/components/monitoring/proxy-status-widget.tsx | 2 +-
 ui/src/pages/cliproxy.tsx                            | 4 +++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/cliproxy/binary-manager.ts b/src/cliproxy/binary-manager.ts
index 84ec01e0..06218844 100644
--- a/src/cliproxy/binary-manager.ts
+++ b/src/cliproxy/binary-manager.ts
@@ -205,6 +205,9 @@ export interface CliproxyUpdateCheckResult {
   latestVersion: string;
   fromCache: boolean;
   checkedAt: number;
+  // Backend info
+  backend: CLIProxyBackend;
+  backendLabel: string;
   // Stability fields
   isStable: boolean;
   maxStableVersion: string;
@@ -223,8 +226,12 @@ export async function checkCliproxyUpdate(): Promise<CliproxyUpdateCheckResult>
     ? undefined
     : `v${result.currentVersion} has known stability issues. Max stable: v${CLIPROXY_MAX_STABLE_VERSION}`;
 
+  const backendLabel = backend === 'plus' ? 'CLIProxy Plus' : 'CLIProxy';
+
   return {
     ...result,
+    backend,
+    backendLabel,
     isStable,
     maxStableVersion: CLIPROXY_MAX_STABLE_VERSION,
     stabilityMessage,
diff --git a/ui/src/components/monitoring/proxy-status-widget.tsx b/ui/src/components/monitoring/proxy-status-widget.tsx
index 2417b6d6..31c69a23 100644
--- a/ui/src/components/monitoring/proxy-status-widget.tsx
+++ b/ui/src/components/monitoring/proxy-status-widget.tsx
@@ -282,7 +282,7 @@ export function ProxyStatusWidget() {
                 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>
 
           {/* Right side: icon buttons when running */}
diff --git a/ui/src/pages/cliproxy.tsx b/ui/src/pages/cliproxy.tsx
index 52d2027e..ec6daa57 100644
--- a/ui/src/pages/cliproxy.tsx
+++ b/ui/src/pages/cliproxy.tsx
@@ -19,6 +19,7 @@ import { ProxyStatusWidget } from '@/components/monitoring/proxy-status-widget';
 import {
   useCliproxy,
   useCliproxyAuth,
+  useCliproxyUpdateCheck,
   useSetDefaultAccount,
   useRemoveAccount,
   usePauseAccount,
@@ -179,6 +180,7 @@ export function CliproxyPage() {
   const queryClient = useQueryClient();
   const { data: authData, isLoading: authLoading } = useCliproxyAuth();
   const { data: variantsData, isFetching } = useCliproxy();
+  const { data: updateCheck } = useCliproxyUpdateCheck();
   const setDefaultMutation = useSetDefaultAccount();
   const removeMutation = useRemoveAccount();
   const pauseMutation = usePauseAccount();
@@ -249,7 +251,7 @@ export function CliproxyPage() {
           <div className="flex items-center justify-between mb-1">
             <div className="flex items-center gap-2">
               <Zap className="w-5 h-5 text-primary" />
-              <h1 className="font-semibold">CLIProxy Plus</h1>
+              <h1 className="font-semibold">{updateCheck?.backendLabel ?? 'CLIProxy'}</h1>
             </div>
             <Button
               variant="ghost"