From ceae2684edcee07210030e394081c8f8628fba53 Mon Sep 17 00:00:00 2001
From: Douglasymlai <douglas.ym.lai@gmail.com>
Date: Mon, 3 Nov 2025 10:28:35 +0000
Subject: [PATCH] update bug for mcp configure dialog

---
 src/components/AddWorker/index.tsx            |  37 +++++++++++++-----
 utils/__pycache__/__init__.cpython-310.pyc    | Bin 193 -> 214 bytes
 .../traceroot_wrapper.cpython-310.pyc         | Bin 2523 -> 2544 bytes
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/AddWorker/index.tsx b/src/components/AddWorker/index.tsx
index 073b7ada..d475aca0 100644
--- a/src/components/AddWorker/index.tsx
+++ b/src/components/AddWorker/index.tsx
@@ -16,7 +16,9 @@ import {
 	RefreshCw,
 	ChevronLeft,
 	ArrowRight,
-	Edit,
+    Edit,
+    Eye,
+    EyeOff,
 } from "lucide-react";
 import ToolSelect from "./ToolSelect";
 import { Textarea } from "@/components/ui/textarea";
@@ -68,6 +70,7 @@ export function AddWorker({
 	const [showEnvConfig, setShowEnvConfig] = useState(false);
 	const [activeMcp, setActiveMcp] = useState<McpItem | null>(null);
 	const [envValues, setEnvValues] = useState<{ [key: string]: EnvValue }>({});
+	const [secretVisible, setSecretVisible] = useState<{ [key: string]: boolean }>({});
 	const toolSelectRef = useRef<{
 		installMcp: (id: number, env?: any, activeMcp?: any) => Promise<void>;
 	} | null>(null);
@@ -86,6 +89,7 @@ export function AddWorker({
 		console.log(mcp);
 		if (mcp?.install_command?.env) {
 			const initialValues: { [key: string]: EnvValue } = {};
+			const initialVisibility: { [key: string]: boolean } = {};
 			for(const key of Object.keys(mcp.install_command.env)) {
 				initialValues[key] = {
 					value: "",
@@ -95,8 +99,10 @@ export function AddWorker({
 							?.replace(/{{/g, "")
 							?.replace(/}}/g, "") || "",
 				};
+				initialVisibility[key] = false;
 			}
 			setEnvValues(initialValues);
+			setSecretVisible(initialVisibility);
 		}
 	};
 
@@ -142,6 +148,7 @@ export function AddWorker({
 		setShowEnvConfig(false);
 		setActiveMcp(null);
 		setEnvValues({});
+		setSecretVisible({});
 	};
 
 	const handleShowEnvConfig = (mcp: McpItem) => {
@@ -150,6 +157,11 @@ export function AddWorker({
 		setShowEnvConfig(true);
 	};
 
+	const isSensitiveKey = (key: string) => /token|key|secret|password|id/i.test(key);
+	const toggleSecretVisibility = (key: string) => {
+		setSecretVisible((prev) => ({ ...prev, [key]: !prev[key] }));
+	};
+
 	const handleSelectedToolsChange = (tools: McpItem[]) => {
 		setSelectedTools(tools);
 	};
@@ -364,18 +376,24 @@ export function AddWorker({
 									{Object.keys(activeMcp?.install_command?.env || {}).map(
 										(key) => (
 											<div key={key}>
-												<div className="text-text-body text-sm leading-normal font-bold">
-													{key}*
-												</div>
 												<Input
-													placeholder=""
-													className="h-7 rounded-sm border border-solid border-input-border-default bg-input-bg-default !shadow-none text-sm leading-normal !ring-0 !ring-offset-0 resize-none"
+													size="default"
+													title={key}
+													required
+													placeholder={envValues[key]?.tip || `Enter ${key}`}
+												type={isSensitiveKey(key) && !secretVisible[key] ? "password" : "text"}
 													value={envValues[key]?.value || ""}
 													onChange={(e) => updateEnvValue(key, e.target.value)}
+													note={envValues[key]?.tip}
+												backIcon={isSensitiveKey(key) ? (
+													secretVisible[key] ? (
+														<EyeOff size={16} className="text-button-transparent-icon-disabled" />
+													) : (
+														<Eye size={16} className="text-button-transparent-icon-disabled" />
+													)
+												) : undefined}
+												onBackIconClick={isSensitiveKey(key) ? () => toggleSecretVisibility(key) : undefined}
 												/>
-												<div className="text-input-label-default text-xs leading-normal">
-													{envValues[key]?.tip}
-												</div>
 											</div>
 										)
 									)}
@@ -392,7 +410,6 @@ export function AddWorker({
 								cancelButtonVariant="ghost"
 								confirmButtonVariant="primary"
 							>
-								<ArrowRight size={16} />
 							</DialogFooter>
 							{/* hidden but keep rendering ToolSelect component */}
 							<div style={{ display: "none" }}>
diff --git a/utils/__pycache__/__init__.cpython-310.pyc b/utils/__pycache__/__init__.cpython-310.pyc
index 10d1d4a69c028b0fa2e5b31e6afd01340e2b871d..177a6d910e7322d363b40ab215bce2ba970c0831 100644
GIT binary patch
delta 69
zcmX@ec#V-OpO=@50SG45OysK8x6}_UPAw|dPsuM$&q*xScS$YIF3B&@cg{~qRd7ly
XPSsD%Oi#@#(Jw8@%qiBNI9~|>-yatI

delta 48
zcmcb{c#x4RpO=@50SMMhPUNbVQgOD5aV#jx&q_@$iAl{&Pt7ZdDJ{v&DUO-AMF{{!
CW)F-2

diff --git a/utils/__pycache__/traceroot_wrapper.cpython-310.pyc b/utils/__pycache__/traceroot_wrapper.cpython-310.pyc
index d695ee21dc2c1d82d5dfa3d82d7694ce6bef45e3..3aa22344d614d4f3bb6e0bb4df0d0af62852caef 100644
GIT binary patch
delta 72
zcmcaD{6Uy2pO=@50SG45Y~*^)r0=93TAW%`te=u!nx2zbtnZRqoL!P%pzoZYlB(d8
aSe&Y#nwg%OSE659l9^MiznP!;3>yGS;21Oj

delta 51
zcmew$d|Q|+pO=@50SMMhZsdB+B&F+Y72{Y?l%JKFToRL-nVy<g5>r}|nNu9IS%vuw
F8vu?25X1lg