From 7a6341f0d9a8dffdcbb318cf34f3dbbfbea70cb5 Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Fri, 26 Dec 2025 12:23:24 -0500
Subject: [PATCH] feat(ui): add Settings link to control panel key hint

Adds a gear icon link next to the masked key hint that navigates
to Settings > Auth, improving UX for users who need to manage
their auth tokens.
---
 ui/src/components/cliproxy/control-panel-embed.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/cliproxy/control-panel-embed.tsx b/ui/src/components/cliproxy/control-panel-embed.tsx
index f2e4c797..6fcce60f 100644
--- a/ui/src/components/cliproxy/control-panel-embed.tsx
+++ b/ui/src/components/cliproxy/control-panel-embed.tsx
@@ -7,7 +7,7 @@
  */
 
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { RefreshCw, AlertCircle, Key, X, Gauge, Globe } from 'lucide-react';
+import { RefreshCw, AlertCircle, Key, X, Gauge, Globe, Settings } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/lib/api-client';
 import type { CliproxyServerConfig } from '@/lib/api-client';
@@ -233,6 +233,13 @@ export function ControlPanelEmbed({ port = CLIPROXY_DEFAULT_PORT }: ControlPanel
                   : authToken || 'ccs'}
               </code>
             </span>
+            <a
+              href="/settings?tab=auth"
+              className="text-blue-600 hover:text-blue-800 dark:hover:text-blue-400"
+              title="Manage auth tokens"
+            >
+              <Settings className="h-3.5 w-3.5" />
+            </a>
             <button
               className="text-blue-600 hover:text-blue-800 dark:hover:text-blue-400"
               onClick={() => setShowLoginHint(false)}