From 4df006ba91aae8ac265cde07481f721e0bf79963 Mon Sep 17 00:00:00 2001
From: liuxiaocs7 <liuxiao2103@qq.com>
Date: Wed, 26 Aug 2026 01:25:03 +0800
Subject: [PATCH] fix(settings): fix Tavily key label cursor and reunite the
 apply link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two UI papercuts in Settings → Web search's Tavily key field:

- The key label ("Tavily 密钥") showed a hand cursor on hover but
  forwards no click. Astryx FieldLabel renders an InputGroup label as a
  bare <span class="astryx-field-label"> (isGroupLabel), which carries
  StyleX cursor:pointer; native-cursor.css only neutralized real <label>
  elements, so the span slipped through. Match the stable themeProps
  class so group-label spans get cursor:default like every other field
  label (app-wide — the same shared PasswordInput backs bot tokens,
  provider keys, and the proxy password).

- "申请地址：" rendered above the input as the field description while the
  tavily.com link rendered below it, so the key input split the label
  from its URL. Fold the link into the description as a ReactNode so
  "申请地址：tavily.com" reads as one unit above the input — a pattern
  Astryx FieldLabel supports (its click forwarding skips nested
  interactive content); only InputGroup/Field under-declare the prop as
  string, papered over by one cast in PasswordInput.

Generated-by: Claude Code (Opus 4.8)
---
 .../renderer/locales/settings-web-search-copy.ts    |  2 +-
 .../src/renderer/settings/password-input.tsx        | 13 ++++++++++---
 .../renderer/settings/web-search-settings-page.tsx  | 12 ++++++------
 apps/desktop/src/renderer/styles/native-cursor.css  |  9 ++++++++-
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/apps/desktop/src/renderer/locales/settings-web-search-copy.ts b/apps/desktop/src/renderer/locales/settings-web-search-copy.ts
index 032fcc8cd6..9f42cbfcc7 100644
--- a/apps/desktop/src/renderer/locales/settings-web-search-copy.ts
+++ b/apps/desktop/src/renderer/locales/settings-web-search-copy.ts
@@ -62,7 +62,7 @@ const SETTINGS_WEB_SEARCH_COPY = {
     provider: 'Search source', providerHelp: 'Reuse the current model provider when it supports hosted search, or explicitly use Tavily.', providerModel: 'Current model', providerTavily: 'Tavily',
     modelCredential: 'Primary-model native search', modelCredentialHelp: 'At the start of each turn, Maka uses the current connection and exact model to decide whether to inject native web_search into the same model request. It stores no second search key and sends no separate model call from Settings.',
     statusAria: 'Web search credential status', lastTest: 'Last tested ', enabledAria: 'Enable web search', key: 'Tavily key',
-    envKeyHelp: 'Currently using TAVILY_API_KEY / MAKA_TAVILY_API_KEY from the environment. Remove the environment variable and restart to use a saved key.', savedKeyHelp: 'The key is stored only on this machine. Apply at:',
+    envKeyHelp: 'Currently using TAVILY_API_KEY / MAKA_TAVILY_API_KEY from the environment. Remove the environment variable and restart to use a saved key.', savedKeyHelp: 'The key is stored only on this machine. Apply at: ',
     envPlaceholder: 'Provided by environment variable', storedPlaceholder: 'Saved (enter a new key to replace)', keyPlaceholder: 'tvly-xxxxxxxx', keyAria: 'Tavily key',
     actions: 'Credential actions', actionsHelp: 'After saving, test with a real request. Clearing credentials also disables web search.', saving: 'Saving…', saveKey: 'Save key', testing: 'Testing…', testKey: 'Test credentials', clearing: 'Clearing…', clearKey: 'Clear key',
     testSearch: 'Test search', testSearchHelp: 'Send a real query to confirm the selected web search source is configured and working. Results appear here only and are not written to the task.', queryPlaceholder: 'For example: AI product launches this week',
diff --git a/apps/desktop/src/renderer/settings/password-input.tsx b/apps/desktop/src/renderer/settings/password-input.tsx
index 278db46b1b..7aa0ac37fa 100644
--- a/apps/desktop/src/renderer/settings/password-input.tsx
+++ b/apps/desktop/src/renderer/settings/password-input.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { ICON_SIZE, Check, Copy, Eye, EyeOff } from '@maka/ui/icons';
 import {
   IconButton,
@@ -53,7 +53,12 @@ export function PasswordInput(props: {
   placeholder?: string;
   label: string;
   isLabelHidden?: boolean;
-  description?: string;
+  // ReactNode, not string: a description may carry an inline link (e.g. the web
+  // search "申请地址：tavily.com" apply link). Astryx FieldLabel already renders
+  // a ReactNode description and its click-forwarding skips nested interactive
+  // content; only the InputGroup/Field prop types under-declare it as `string`,
+  // which the single cast at the InputGroup call site below papers over.
+  description?: ReactNode;
   status?: InputGroupProps['status'];
   isRequired?: boolean;
   isOptional?: boolean;
@@ -112,7 +117,9 @@ export function PasswordInput(props: {
     // written on, and the group's `aria-labelledby` is what names it.
     <InputGroup
       label={props.label}
-      description={props.description}
+      // Cast: InputGroup/Field type `description` as `string`, but the
+      // underlying FieldLabel renders any ReactNode (see the prop's note).
+      description={props.description as string | undefined}
       isLabelHidden={props.isLabelHidden}
       isDisabled={props.isDisabled}
       isRequired={props.isRequired}
diff --git a/apps/desktop/src/renderer/settings/web-search-settings-page.tsx b/apps/desktop/src/renderer/settings/web-search-settings-page.tsx
index 31861da54c..59d2a7e187 100644
--- a/apps/desktop/src/renderer/settings/web-search-settings-page.tsx
+++ b/apps/desktop/src/renderer/settings/web-search-settings-page.tsx
@@ -346,13 +346,13 @@ export function WebSearchSettingsPage(props: {
             isDisabled={usingEnvKey || credentialActionBusy}
             placeholder={usingEnvKey ? copy.envPlaceholder : hasStoredKey ? copy.storedPlaceholder : copy.keyPlaceholder}
             label={copy.key}
-            description={usingEnvKey ? copy.envKeyHelp : copy.savedKeyHelp}
+            description={usingEnvKey ? copy.envKeyHelp : (
+              <>
+                {copy.savedKeyHelp}
+                <Link href="https://tavily.com" target="_blank" rel="noreferrer noopener">tavily.com</Link>
+              </>
+            )}
           />
-          {!usingEnvKey && (
-            <small className="settingsQuietStatus">
-              <Link href="https://tavily.com" target="_blank" rel="noreferrer noopener">tavily.com</Link>
-            </small>
-          )}
         </SettingsField>
 
         <SettingsActions role="group" aria-label={copy.actions}>
diff --git a/apps/desktop/src/renderer/styles/native-cursor.css b/apps/desktop/src/renderer/styles/native-cursor.css
index d95c3d16d2..ed42ad88f3 100644
--- a/apps/desktop/src/renderer/styles/native-cursor.css
+++ b/apps/desktop/src/renderer/styles/native-cursor.css
@@ -49,10 +49,16 @@
 
 /* 1. Generic interactive roles (Button, menu rows, options, labels, trees…).
  * Astryx FieldLabel / TreeListItem set StyleX cursor:pointer on <label> and
- * [role=treeitem] — cover them here so the product rule stays one sheet. */
+ * [role=treeitem] — cover them here so the product rule stays one sheet.
+ * FieldLabel also renders a bare `<span class="astryx-field-label">` for a
+ * group label (InputGroup: `isGroupLabel`), which names a group via
+ * `aria-labelledby` and forwards no click — the `label` selector misses it,
+ * so it kept StyleX's hand cursor. Match the stable themeProps class to catch
+ * that span too (real <label> field labels are already covered above). */
 :where(
   button,
   label,
+  .astryx-field-label,
   [role="button"],
   [role="menuitem"],
   [role="menuitemradio"],
@@ -68,6 +74,7 @@
 :where(
   button,
   label,
+  .astryx-field-label,
   [role="button"],
   [role="menuitem"],
   [role="menuitemradio"],