dsh-mcp 1.3.0 → 1.5.0

package/src/client/GlobalEnvEditor.tsx

@@ -0,0 +1,254 @@
+/**
+ * Process-level environment-variable editor: a global key-value list shared
+ * by every MCP server's header substitution. Values are referenced from
+ * server headers as `${NAME}` or by bare name; secret values are stored in
+ * the credentials document and never shown back.
+ * @module dsh-mcp/client/GlobalEnvEditor
+ */
+
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import type { McpEnvVarView } from './types.ts'
+import type { McpSettingsLocaleKey } from './locales.ts'
+import css from './GlobalEnvEditor.module.css'
+
+/** One editable row in the editor. */
+interface EnvRowDraft {
+  readonly key: string
+  name: string
+  secret: boolean
+  value: string
+  configured: boolean
+}
+
+/** Host Remote face required by the editor. */
+export interface GlobalEnvRemote {
+  /** Read the process-level env rows. */
+  envList: () => Promise<{ vars: readonly McpEnvVarView[] }>
+  /** Replace the whole process-level env table. */
+  envSet: (vars: readonly { name: string; secret?: boolean; value?: string }[]) => Promise<{ vars: readonly McpEnvVarView[] }>
+}
+
+/** Props for the process env editor panel. */
+export interface GlobalEnvEditorProps {
+  readonly injected: GlobalEnvRemote
+  readonly t: (key: McpSettingsLocaleKey) => string
+  /** Called after a successful save; the parent refreshes the page. */
+  readonly onApplied: () => void
+}
+
+let rowSeq = 0
+function nextKey(): string {
+  rowSeq += 1
+  return `genv-${rowSeq}`
+}
+
+function emptyRow(): EnvRowDraft {
+  return { key: nextKey(), name: '', secret: true, value: '', configured: false }
+}
+
+/** Render the process-level environment-variable editor panel. */
+export function GlobalEnvEditor({ injected, t, onApplied }: GlobalEnvEditorProps): ReactNode {
+  const [rows, setRows] = useState<EnvRowDraft[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [notice, setNotice] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [loaded, setLoaded] = useState(false)
+  const [loadFailed, setLoadFailed] = useState(false)
+  const [bulkOpen, setBulkOpen] = useState(false)
+  const [bulkText, setBulkText] = useState('')
+  const seqRef = useRef(0)
+
+  const reload = (): void => {
+    const seq = ++seqRef.current
+    setLoadFailed(false)
+    void injected.envList().then(
+      (state) => {
+        if (seq !== seqRef.current) return
+        setRows(state.vars.map(row => ({
+          key: nextKey(),
+          name: row.name,
+          secret: row.secret,
+          // 展示 process.env 优先返回的值（非 secret）；secret 值不展示
+          value: row.secret ? '' : (row.value ?? ''),
+          configured: row.configured,
+        })))
+        setLoaded(true)
+        setError(null)
+      },
+      (error: unknown) => {
+        if (seq !== seqRef.current) return
+        setLoadFailed(true)
+        setError(error instanceof Error ? error.message : String(error))
+      },
+    )
+  }
+
+  useEffect(() => {
+    if (loaded) return
+    reload()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [injected, loaded])
+
+  const update = (key: string, patch: Partial<EnvRowDraft>): void => {
+    setRows(prev => prev.map(row => row.key === key ? { ...row, ...patch } : row))
+  }
+  const remove = (key: string): void => {
+    setRows(prev => prev.filter(row => row.key !== key))
+  }
+  const add = (): void => {
+    setRows(prev => [...prev, emptyRow()])
+  }
+
+  /** Parse "NAME=value" lines (one per line) into fresh draft rows. */
+  const applyBulk = (): void => {
+    const parsed = bulkText.split(/\r?\n/).map(line => line.trim()).filter(line => line.length > 0)
+    if (parsed.length === 0) {
+      setBulkOpen(false)
+      return
+    }
+    const next: EnvRowDraft[] = []
+    for (const line of parsed) {
+      const eq = line.indexOf('=')
+      if (eq <= 0) {
+        next.push({ key: nextKey(), name: line, secret: false, value: '', configured: false })
+        continue
+      }
+      const name = line.slice(0, eq).trim()
+      const value = line.slice(eq + 1)
+      if (name.length === 0) continue
+      next.push({ key: nextKey(), name, secret: false, value, configured: false })
+    }
+    if (next.length > 0) setRows(prev => [...prev, ...next])
+    setBulkOpen(false)
+    setBulkText('')
+  }
+
+  const save = (): void => {
+    const vars: Array<{ name: string; secret?: boolean; value?: string }> = []
+    const seen = new Set<string>()
+    for (const row of rows) {
+      const name = row.name.trim()
+      if (name.length === 0) {
+        if (row.value.trim().length > 0) {
+          setError('存在未填写变量名的行')
+          return
+        }
+        continue // 空行跳过
+      }
+      if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(name)) {
+        setError(`变量名 "${name}" 必须是字母/数字/下划线，且以字母或下划线开头`)
+        return
+      }
+      if (seen.has(name)) {
+        setError(`变量名 "${name}" 重复`)
+        return
+      }
+      seen.add(name)
+      vars.push({
+        name,
+        secret: row.secret,
+        // 填了值就提交（secret 也会写入凭据文档）；留空不提交（secret 保留原值）
+        ...(row.value.trim().length > 0 ? { value: row.value } : {}),
+      })
+    }
+    const seq = ++seqRef.current
+    setBusy(true)
+    setError(null)
+    setNotice(null)
+    void injected.envSet(vars).then(
+      (state) => {
+        if (seq !== seqRef.current) return
+        setRows(state.vars.map(row => ({
+          key: nextKey(),
+          name: row.name,
+          secret: row.secret,
+          value: row.secret ? '' : (row.value ?? ''),
+          configured: row.configured,
+        })))
+        setNotice(t('globalEnvDone'))
+        onApplied()
+      },
+      (error: unknown) => {
+        if (seq !== seqRef.current) return
+        setError(error instanceof Error ? error.message : String(error))
+      },
+    ).finally(() => {
+      if (seq === seqRef.current) setBusy(false)
+    })
+  }
+
+  return (
+    <div className={css.panel}>
+      <p className={css.hint}>{t('globalEnvHint')}</p>
+      {rows.length === 0 && !loadFailed ? <p className={css.muted}>{t('globalEnvEmpty')}</p> : null}
+      {rows.map(row => (
+        <div key={row.key} className={css.row}>
+          <input
+            type="text"
+            className={css.name}
+            value={row.name}
+            placeholder={t('globalEnvName')}
+            aria-label={t('globalEnvName')}
+            onChange={(event) => update(row.key, { name: event.currentTarget.value })}
+          />
+          <input
+            type={row.secret ? 'password' : 'text'}
+            className={css.value}
+            value={row.value}
+            placeholder={row.secret && row.configured ? '••••••••' : t('globalEnvValue')}
+            aria-label={t('globalEnvValue')}
+            onChange={(event) => update(row.key, { value: event.currentTarget.value })}
+          />
+          <label className={`${css.secretToggle} ${row.secret ? css.secretOn : ''}`} title={t('globalEnvSecretHint')}>
+            <input
+              type="checkbox"
+              checked={row.secret}
+              aria-label={t('globalEnvSecret')}
+              onChange={(event) => update(row.key, { secret: event.currentTarget.checked })}
+            />
+            {t('globalEnvSecret')}
+          </label>
+          <button type="button" className={css.danger} aria-label={t('globalEnvRemove')} onClick={() => remove(row.key)}>
+            ✕
+          </button>
+        </div>
+      ))}
+      {loadFailed ? (
+        <div className={css.retryRow}>
+          <p className={css.error} role="alert">{t('globalEnvLoadFailed')}</p>
+          <button type="button" onClick={reload}>{t('globalEnvRetry')}</button>
+        </div>
+      ) : null}
+      {error !== null && !loadFailed ? <p className={css.error} role="alert">{error}</p> : null}
+      {notice !== null ? <p className={css.notice} role="status">{notice}</p> : null}
+      <div className={css.actions}>
+        <button type="button" disabled={busy} onClick={add}>{t('globalEnvAdd')}</button>
+        <button type="button" disabled={busy} onClick={() => setBulkOpen(true)}>{t('globalEnvBulk')}</button>
+        <button type="button" className={css.primary} disabled={busy} onClick={save}>
+          {busy ? t('globalEnvSaving') : t('globalEnvSave')}
+        </button>
+      </div>
+
+      {bulkOpen ? (
+        <div className={css.overlay} onClick={() => setBulkOpen(false)}>
+          <div className={css.dialog} role="dialog" aria-label={t('globalEnvBulk')} onClick={(event) => event.stopPropagation()}>
+            <p className={css.dialogTitle}>{t('globalEnvBulk')}</p>
+            <p className={css.hint}>{t('globalEnvBulkPrompt')}</p>
+            <textarea
+              className={css.bulkText}
+              rows={8}
+              autoFocus
+              spellCheck={false}
+              value={bulkText}
+              onChange={(event) => setBulkText(event.currentTarget.value)}
+            />
+            <div className={css.actions}>
+              <button type="button" onClick={() => setBulkOpen(false)}>{t('cancel')}</button>
+              <button type="button" className={css.primary} onClick={applyBulk}>{t('globalEnvBulkOk')}</button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/client/McpSettingsSection.module.css

@@ -68,6 +68,73 @@ button:disabled {
   background: var(--dsw-alias-button-primary-hover);
 }
 
+.active {
+  border-color: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-brand-primary);
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent);
+}
+
+.module {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  padding: 10px 14px;
+  background: var(--dsw-alias-bg-layer-3);
+}
+
+.moduleTitle {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary) !important;
+}
+
+.moduleTitle:hover {
+  background: transparent !important;
+}
+
+.caret {
+  display: inline-block;
+  width: 14px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.configHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.configActions {
+  display: flex;
+  gap: 8px;
+}
+
+.inlineForm {
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  padding: 12px 14px;
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.inlineFormItem {
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  padding: 12px 14px;
+  background: var(--dsw-alias-bg-layer-2);
+  list-style: none;
+}
+
 .list {
   display: flex;
   flex-direction: column;

package/src/client/McpSettingsSection.tsx

@@ -5,13 +5,15 @@ import type {
 } from './types.ts'
 import type { InjectFace, PropsLocale, PropsRuntime, PropsStore } from '@deepseek-ai/dsh-client-ui-slots'
 import { McpServerForm, type McpServerFormRemote } from './ServerForm.tsx'
+import { ServersJsonEditor, type ServersJsonEntry } from './ServersJsonEditor.tsx'
+import { GlobalEnvEditor, type GlobalEnvRemote } from './GlobalEnvEditor.tsx'
 import type { McpToolControlRemote } from './ToolControlSection.tsx'
 import type { McpSettingsLocaleKey } from './locales.ts'
 import { createMcpManagerStore, type McpDraft, type McpTestOutcome } from './mcp-store.ts'
 import css from './McpSettingsSection.module.css'
 
 /** Registration-side Remote face used by the section. */
-export interface McpManagerInjected extends McpServerFormRemote, McpToolControlRemote {
+export interface McpManagerInjected extends McpServerFormRemote, McpToolControlRemote, GlobalEnvRemote {
   /** Read the current server list. */
   list: () => Promise<readonly McpServerView[]>
   /** Persist one draft; null means success, a failure is otherwise returned. */
@@ -20,6 +22,8 @@ export interface McpManagerInjected extends McpServerFormRemote, McpToolControlR
   remove: (id: McpServerId) => Promise<McpManagerFailure | null>
   /** Probe one draft; `draft.id` lets stored secret values resolve. */
   test: (draft: McpDraft) => Promise<McpTestOutcome>
+  /** Replace the whole server list (JSON editor path). */
+  upsertJson: (servers: readonly ServersJsonEntry[]) => Promise<{ added: number; updated: number; removed: number }>
 }
 
 /** Full component props assembled by the Settings slot renderer. */
@@ -58,13 +62,6 @@ function viewToDraft(server: McpServerView): McpDraft {
     cwd: server.cwd,
     url: server.url,
     headersText: server.headers.map(header => `${header.name}: ${header.value}`).join('\n'),
-    env: server.env.map((entry, index) => ({
-      key: `view-${index}`,
-      name: entry.name,
-      secret: entry.secret,
-      value: '',
-      configured: entry.configured,
-    })),
     toolCallTimeoutMs: String(server.toolCallTimeoutMs),
     failOnStartupError: server.failOnStartupError,
   }
@@ -86,7 +83,10 @@ export function McpSettingsSection(props: McpSettingsSectionProps): ReactNode {
   const [toolsError, setToolsError] = useState<string | null>(null)
   const [expanded, setExpanded] = useState<ReadonlySet<string>>(new Set())
   const [refreshing, setRefreshing] = useState<ReadonlySet<string>>(new Set())
+  const [jsonOpen, setJsonOpen] = useState(false)
+  const [envOpen, setEnvOpen] = useState(true)
   const timersRef = useRef<number[]>([])
+  let inlineForm: ReactNode | null = null
 
   useEffect(() => () => {
     for (const id of timersRef.current) window.clearTimeout(id)
@@ -239,7 +239,7 @@ export function McpSettingsSection(props: McpSettingsSectionProps): ReactNode {
       setTest,
       setServers,
     }
-    return (
+    const form = (
       <McpServerForm
         draft={state.draft}
         busy={state.busy}
@@ -258,14 +258,11 @@ export function McpSettingsSection(props: McpSettingsSectionProps): ReactNode {
         }}
       />
     )
+    inlineForm = form
   }
 
   return (
     <div className={css.section}>
-      <div className={css.header}>
-        <button type="button" className={css.primary} onClick={beginCreate}>{t('addServer')}</button>
-      </div>
-
       <div className={css.modeRow}>
         <span className={css.modeLabel}>{t('toolsModeLabel')}</span>
         <label className={css.modeOption}>
@@ -291,15 +288,75 @@ export function McpSettingsSection(props: McpSettingsSectionProps): ReactNode {
         {toolsError !== null ? toolsError : tools === null ? t('toolsLoading') : mode === 'search' ? t('toolsHintSearch') : t('toolsHintFull')}
       </p>
 
-      {state.servers.length === 0 ? (
-        <p className={css.status}>{t('empty')}</p>
-      ) : (
+      <div className={css.module}>
+        <button
+          type="button"
+          className={css.moduleTitle}
+          aria-expanded={envOpen}
+          onClick={() => setEnvOpen(open => !open)}
+        >
+          <span className={css.caret}>{envOpen ? '▾' : '▸'}</span>
+          {t('globalEnv')}
+        </button>
+        {envOpen ? (
+          <GlobalEnvEditor
+            injected={{ envList: props.envList, envSet: props.envSet }}
+            t={t}
+            onApplied={() => {
+              // New process env may feed header substitution: refresh server
+              // rows (connection attempts re-resolve env) but keep the tool list.
+              refreshServer('')
+            }}
+          />
+        ) : null}
+      </div>
+
+      <div className={css.module}>
+        <div className={css.configHeader}>
+          <span className={css.moduleTitle}>{t('configTitle')}</span>
+          <div className={css.configActions}>
+            <button
+              type="button"
+              className={jsonOpen ? css.active : undefined}
+              aria-expanded={jsonOpen}
+              onClick={() => setJsonOpen(open => !open)}
+            >
+              {t('serversJson')}
+            </button>
+            <button type="button" className={css.primary} onClick={beginCreate}>{t('addServer')}</button>
+          </div>
+        </div>
+        {jsonOpen ? (
+          <ServersJsonEditor
+            injected={{ list: props.list, upsertJson: props.upsertJson }}
+            t={t}
+            onApplied={() => {
+              // The whole list changed on the Host: refresh the server rows and
+              // the tool list, then close the JSON panel to show the UI list.
+              refreshServer('')
+              refreshTools()
+              setJsonOpen(false)
+              // Mounting is asynchronous: refresh again after the connection
+              // settles so badges/tool counts reflect the live state.
+              timersRef.current.push(window.setTimeout(() => refreshServer(''), 2000))
+              timersRef.current.push(window.setTimeout(() => refreshServer(''), 6000))
+            }}
+          />
+        ) : null}
+
+        {state.draft !== null && state.draft.id === null ? (
+          <div className={css.inlineForm}>{inlineForm}</div>
+        ) : null}
+
+        {jsonOpen ? null : state.servers.length === 0 ? (
+          <p className={css.status}>{t('empty')}</p>
+        ) : (
         <ul className={css.list}>
-          {state.servers.map(server => {
+          {state.servers.flatMap(server => {
             const isExpanded = expanded.has(server.serverName)
             const isRefreshing = refreshing.has(server.serverName)
             const serverToolList = serverTools(server.serverName)
-            return (
+            const card = (
               <li key={server.id} className={css.card}>
                 <div className={css.row}>
                   <div className={css.rowMain}>
@@ -351,9 +408,16 @@ export function McpSettingsSection(props: McpSettingsSectionProps): ReactNode {
                 ) : null}
               </li>
             )
+            // Editing this server: expand the form right below its row so the
+            // user never has to scroll away to find it.
+            if (state.draft !== null && state.draft.id === server.id) {
+              return [card, <li key={`${server.id}-form`} className={css.inlineFormItem}>{inlineForm}</li>]
+            }
+            return [card]
           })}
         </ul>
       )}
+      </div>
     </div>
   )
 }

package/src/client/ServerForm.module.css

@@ -110,23 +110,6 @@ button:disabled {
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary) 18%, transparent);
 }
 
-.envBlock {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 10px;
-  padding: 10px 12px 12px;
-  margin: 0;
-}
-
-.envBlock legend {
-  padding: 0 4px;
-  font-size: 13px;
-  line-height: 20px;
-  font-weight: 600;
-}
-
 .hint,
 .muted {
   margin: 0;
@@ -135,36 +118,6 @@ button:disabled {
   color: var(--dsw-alias-label-tertiary);
 }
 
-.envRow {
-  display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto auto;
-  align-items: center;
-  gap: 8px;
-}
-
-.envRow input {
-  box-sizing: border-box;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 6px;
-  padding: 5px 8px;
-  outline: none;
-  background: var(--dsw-alias-bg-layer-1);
-  color: var(--dsw-alias-label-primary);
-  font: inherit;
-  font-size: 13px;
-}
-
-.secretToggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--dsw-alias-label-secondary);
-  font-size: 12px;
-  line-height: 18px;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
 .checkRow {
   display: inline-flex;
   align-items: center;

package/src/client/ServerForm.tsx

@@ -1,9 +1,8 @@
 import { useState, type ReactNode } from 'react'
 import type { McpManagerFailure, McpServerId, McpServerView } from './types.ts'
 import type {
-  McpDraft, McpEnvRowDraft, McpTestOutcome,
+  McpDraft, McpTestOutcome,
 } from './mcp-store.ts'
-import { createEnvRowDraft } from './mcp-store.ts'
 import type { McpSettingsLocaleKey } from './locales.ts'
 import css from './ServerForm.module.css'
 
@@ -48,18 +47,6 @@ export function McpServerForm(props: McpServerFormProps): ReactNode {
     actions.updateDraft(patch)
   }
 
-  const updateEnvRow = (key: string, patch: Partial<McpEnvRowDraft>): void => {
-    update({ env: draft.env.map(row => row.key === key ? { ...row, ...patch } : row) })
-  }
-
-  const removeEnvRow = (key: string): void => {
-    update({ env: draft.env.filter(row => row.key !== key) })
-  }
-
-  const addEnvRow = (): void => {
-    update({ env: [...draft.env, createEnvRowDraft()] })
-  }
-
   const errorText = (error: unknown): string =>
     error instanceof Error ? error.message : String(error)
 
@@ -220,47 +207,6 @@ export function McpServerForm(props: McpServerFormProps): ReactNode {
         </>
       )}
 
-      {stdio ? (
-        <fieldset className={css.envBlock}>
-          <legend>{t('envVars')}</legend>
-          <p className={css.hint}>{t('envHint')}</p>
-          {draft.env.length === 0 ? <p className={css.muted}>{t('envVars')}: 0</p> : null}
-          {draft.env.map(row => (
-            <div key={row.key} className={css.envRow}>
-              <input
-                type="text"
-                className={css.envName}
-                value={row.name}
-                placeholder={t('envName')}
-                aria-label={t('envName')}
-                onChange={(event) => updateEnvRow(row.key, { name: event.currentTarget.value })}
-              />
-              <input
-                type={row.secret ? 'password' : 'text'}
-                className={css.envValue}
-                value={row.value}
-                placeholder={row.secret && row.configured ? '••••••••' : t('envValue')}
-                aria-label={t('envValue')}
-                onChange={(event) => updateEnvRow(row.key, { value: event.currentTarget.value })}
-              />
-              <label className={css.secretToggle}>
-                <input
-                  type="checkbox"
-                  checked={row.secret}
-                  title={t('envSecretHint')}
-                  onChange={(event) => updateEnvRow(row.key, { secret: event.currentTarget.checked })}
-                />
-                {t('envSecret')}
-              </label>
-              <button type="button" className={css.danger} aria-label={t('removeEnvVar')} onClick={() => removeEnvRow(row.key)}>
-                ✕
-              </button>
-            </div>
-          ))}
-          <button type="button" onClick={addEnvRow}>{t('addEnvVar')}</button>
-        </fieldset>
-      ) : null}
-
       <label className={css.field}>
         <span>{t('toolCallTimeoutMs')}</span>
         <input