feat: add reveal toggles for claude secrets

Author: pallyoung

apps/web/src/components/Settings/ClaudeSettingsPanel.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import type { HTMLAttributes } from "react";
 import type { Locale, Translator } from "../../i18n.ts";
+import { EyeIcon, EyeOffIcon } from "../icons.tsx";
 import type {
   AppSettings,
   ClaudeRuntimeProfile,
@@ -304,6 +305,9 @@ const ClaudeInputField = ({
   testId,
   inputMode,
   min,
+  allowSecretReveal = false,
+  revealLabel,
+  concealLabel,
   className = "",
 }: {
   label: string;
@@ -316,22 +320,49 @@ const ClaudeInputField = ({
   testId?: string;
   inputMode?: HTMLAttributes<HTMLInputElement>["inputMode"];
   min?: number;
+  allowSecretReveal?: boolean;
+  revealLabel?: string;
+  concealLabel?: string;
   className?: string;
-}) => (
-  <label className={`claude-field ${className}`.trim()}>
-    <ClaudeFieldCopy label={label} help={help} meta={meta} />
-    <input
-      className="settings-command-field"
-      type={type}
-      value={value}
-      min={min}
-      inputMode={inputMode}
-      onChange={(event) => onChange(event.target.value)}
-      placeholder={placeholder}
-      data-testid={testId}
-    />
-  </label>
-);
+}) => {
+  const inputId = useId();
+  const [revealed, setRevealed] = useState(false);
+  const showSecretToggle = type === "password" && allowSecretReveal;
+  const effectiveType = showSecretToggle && revealed ? "text" : type;
+
+  return (
+    <div className={`claude-field ${className}`.trim()}>
+      <label htmlFor={inputId}>
+        <ClaudeFieldCopy label={label} help={help} meta={meta} />
+      </label>
+      <div className={`claude-input-shell ${showSecretToggle ? "with-toggle" : ""}`.trim()}>
+        <input
+          id={inputId}
+          className="settings-command-field"
+          type={effectiveType}
+          value={value}
+          min={min}
+          inputMode={inputMode}
+          onChange={(event) => onChange(event.target.value)}
+          placeholder={placeholder}
+          data-testid={testId}
+        />
+        {showSecretToggle ? (
+          <button
+            type="button"
+            className="claude-visibility-toggle"
+            onClick={() => setRevealed((current) => !current)}
+            aria-label={revealed ? concealLabel : revealLabel}
+            aria-pressed={revealed}
+            data-testid={testId ? `${testId}-visibility-toggle` : undefined}
+          >
+            {revealed ? <EyeOffIcon /> : <EyeIcon />}
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+};
 
 const ClaudeTextareaField = ({
   label,
@@ -707,24 +738,32 @@ export const ClaudeSettingsPanel = ({
             help={t("claudeApiKeyHelp")}
             meta={t("claudeApiKeyMeta")}
             type="password"
+            allowSecretReveal
+            revealLabel={t("claudeShowSecret")}
+            concealLabel={t("claudeHideSecret")}
             value={scopeProfile.env.ANTHROPIC_API_KEY ?? ""}
             onChange={(value) => updateEnv((env) => ({
               ...env,
               ANTHROPIC_API_KEY: value,
             }))}
             placeholder={t("claudeApiKeyPlaceholder")}
+            testId="claude-api-key-input"
           />
           <ClaudeInputField
             label={t("claudeAuthToken")}
             help={t("claudeAuthTokenHelp")}
             meta={t("claudeAuthTokenMeta")}
             type="password"
+            allowSecretReveal
+            revealLabel={t("claudeShowSecret")}
+            concealLabel={t("claudeHideSecret")}
             value={scopeProfile.env.ANTHROPIC_AUTH_TOKEN ?? ""}
             onChange={(value) => updateEnv((env) => ({
               ...env,
               ANTHROPIC_AUTH_TOKEN: value,
             }))}
             placeholder={t("claudeAuthTokenPlaceholder")}
+            testId="claude-auth-token-input"
           />
           <ClaudeInputField
             label={t("claudeBaseUrl")}

apps/web/src/components/icons.tsx

@@ -1,7 +1,7 @@
 import type { LucideIcon, LucideProps } from "lucide-react";
 import React from "react";
 import {
-  Archive, ArrowDownUp, ArrowUp, Blocks, ChevronDown, ChevronLeft, ChevronRight, Code2, Code, File, FileDiff, FileJson, FileText, Folder, FolderOpen, FolderPlus, GitBranch, History, List, Minus, Monitor, MoonStar, Palette, Plus, RefreshCw, Rows3, Search, Settings2, SlidersHorizontal, SquarePlus, SunMedium, Terminal, Undo2, X, Maximize2, Minimize2, PanelRightClose, PanelRightOpen, SquareSplitVertical, SquareSplitHorizontal
+  Archive, ArrowDownUp, ArrowUp, Blocks, ChevronDown, ChevronLeft, ChevronRight, Code2, Code, Eye, EyeOff, File, FileDiff, FileJson, FileText, Folder, FolderOpen, FolderPlus, GitBranch, History, List, Minus, Monitor, MoonStar, Palette, Plus, RefreshCw, Rows3, Search, Settings2, SlidersHorizontal, SquarePlus, SunMedium, Terminal, Undo2, X, Maximize2, Minimize2, PanelRightClose, PanelRightOpen, SquareSplitVertical, SquareSplitHorizontal
 } from "lucide-react";
 
 const createIcon = (Icon: LucideIcon, defaults?: Partial<LucideProps>) => {
@@ -57,6 +57,8 @@ export const AgentSplitHorizontalIcon = createIcon(SquareSplitHorizontal, { size
 export const FolderIcon = createIcon(Folder, { size: 14 });
 export const FolderOpenIcon = createIcon(FolderOpen, { size: 14 });
 export const FileIcon = createIcon(File, { size: 14 });
+export const EyeIcon = createIcon(Eye, { size: 14 });
+export const EyeOffIcon = createIcon(EyeOff, { size: 14 });
 
 const fileTypeColors: Record<string, string> = {
   ts: "#3178c6", tsx: "#3178c6", js: "#f7df1e", jsx: "#f7df1e", json: "#cbcb41", md: "#519aba", html: "#e34c26", css: "#563d7c", scss: "#563d7c", py: "#3572A5", go: "#00ADD8", rs: "#dea584", java: "#b07219", sql: "#e38c00", sh: "#89e051", yml: "#cb171e", yaml: "#cb171e", toml: "#9c4121", svg: "#a0c4e3", png: "#a0c4e3", jpg: "#a0c4e3", pdf: "#b30b00"

apps/web/src/i18n.ts

@@ -222,6 +222,8 @@ const messages = {
     claudeAuthTokenHelp: "Maps to ANTHROPIC_AUTH_TOKEN. Common for bearer-token or gateway setups, especially when paired with a custom base URL.",
     claudeAuthTokenMeta: "Secret string · Example: token-demo-...",
     claudeAuthTokenPlaceholder: "token-demo-...",
+    claudeShowSecret: "Show secret",
+    claudeHideSecret: "Hide secret",
     claudeBaseUrl: "Base URL",
     claudeBaseUrlHelp: "Maps to ANTHROPIC_BASE_URL. Point Claude CLI at a proxy, gateway, or compatible endpoint instead of the default Anthropic API.",
     claudeBaseUrlMeta: "URL string · Example: https://api.anthropic.com",
@@ -706,6 +708,8 @@ const messages = {
     claudeAuthTokenHelp: "对应 ANTHROPIC_AUTH_TOKEN，常见于 bearer token 或网关代理场景，通常会和自定义 Base URL 一起使用。",
     claudeAuthTokenMeta: "密文字符串 · 示例：token-demo-...",
     claudeAuthTokenPlaceholder: "token-demo-...",
+    claudeShowSecret: "显示明文",
+    claudeHideSecret: "隐藏明文",
     claudeBaseUrl: "Base URL",
     claudeBaseUrlHelp: "对应 ANTHROPIC_BASE_URL，用来把 Claude CLI 指向代理、网关或兼容 Anthropic API 的自定义端点。",
     claudeBaseUrlMeta: "URL 字符串 · 示例：https://api.anthropic.com",

apps/web/src/styles/app.css

@@ -10153,7 +10153,8 @@ pre.diff,
 
 .claude-field > .settings-command-field,
 .claude-field > .claude-textarea,
-.claude-field > .claude-json-editor {
+.claude-field > .claude-json-editor,
+.claude-input-shell {
   width: 100%;
   min-width: 0;
   border: 1px solid transparent;
@@ -10163,6 +10164,72 @@ pre.diff,
   box-shadow: none;
 }
 
+.claude-input-shell {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  min-height: 36px;
+  transition:
+    background-color 140ms ease,
+    box-shadow 140ms ease;
+}
+
+.claude-input-shell:focus-within {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--accent) 54%, transparent),
+    0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+.claude-input-shell > .settings-command-field {
+  flex: 1;
+  min-width: 0;
+  min-height: 36px;
+  padding: 0 10px;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.claude-input-shell > .settings-command-field:focus,
+.claude-input-shell > .settings-command-field:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.claude-input-shell.with-toggle > .settings-command-field {
+  padding-right: 4px;
+}
+
+.claude-visibility-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  margin-right: 3px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.claude-visibility-toggle:hover {
+  background: color-mix(in srgb, var(--surface) 70%, var(--accent) 30%);
+  color: var(--text);
+}
+
+.claude-visibility-toggle:focus {
+  outline: none;
+}
+
+.claude-visibility-toggle:focus-visible {
+  background: color-mix(in srgb, var(--surface) 74%, var(--accent) 26%);
+  color: var(--text);
+}
+
 .claude-select-trigger {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 12px;

tests/claude-settings.test.ts

@@ -243,6 +243,8 @@ test('translator exposes the new history and Claude settings keys', () => {
   assert.equal(en('claudeModelPlaceholder'), 'claude-sonnet-4-5');
   assert.equal(en('claudeSelectUnsetOption'), 'Not set');
   assert.equal(en('claudeEditorModeVimOption'), 'vim');
+  assert.equal(en('claudeShowSecret'), 'Show secret');
+  assert.equal(zh('claudeHideSecret'), '隐藏明文');
   assert.match(en('claudeApiKeyHelperHelp'), /take precedence/i);
   assert.match(zh('claudeAuthSectionHint'), /Claude 配置/);
   assert.match(zh('claudeCleanupDaysMeta'), />= 0/);

tests/settings-layout.test.ts

@@ -42,3 +42,15 @@ test('claude settings use dedicated inline select rows for enum fields', async (
   assert.doesNotMatch(claudeSource, /meta=\{t\("claudeEffortMeta"\)\}/);
   assert.doesNotMatch(claudeSource, /meta=\{t\("claudeEditorModeMeta"\)\}/);
 });
+
+test('claude secret fields expose a reveal toggle', async () => {
+  const claudeSource = await fs.readFile(
+    new URL('../apps/web/src/components/Settings/ClaudeSettingsPanel.tsx', import.meta.url),
+    'utf8',
+  );
+
+  assert.match(claudeSource, /allowSecretReveal/);
+  assert.match(claudeSource, /claude-api-key-input/);
+  assert.match(claudeSource, /claude-auth-token-input/);
+  assert.match(claudeSource, /visibility-toggle/);
+});