dsh-mcp 1.0.0

package/src/client/ServerForm.tsx

@@ -0,0 +1,301 @@
+import { useState, type ReactNode } from 'react'
+import type { McpServerId, McpServerView } from './types.ts'
+import type {
+  McpDraft, McpEnvRowDraft, McpTestOutcome,
+} from './mcp-store.ts'
+import { createEnvRowDraft } from './mcp-store.ts'
+import type { McpSettingsLocaleKey } from './locales.ts'
+import css from './ServerForm.module.css'
+
+/** The Remote verbs the editor needs; structurally the section's inject face. */
+export interface McpServerFormRemote {
+  save: (draft: McpDraft) => Promise<{ message: string } | null>
+  remove: (id: McpServerId) => Promise<{ message: string } | null>
+  test: (draft: McpDraft) => Promise<McpTestOutcome>
+  list: () => Promise<readonly McpServerView[]>
+}
+
+/** Store actions the editor drives. */
+export interface McpServerFormActions {
+  updateDraft: (patch: Partial<McpDraft>) => void
+  cancelEdit: () => void
+  setBusy: (busy: 'save' | 'remove' | null) => void
+  setTestRunning: (running: boolean) => void
+  setTest: (test: McpTestOutcome | null) => void
+  setServers: (servers: readonly McpServerView[]) => void
+}
+
+/** Full editor props assembled by the section. */
+export interface McpServerFormProps {
+  draft: McpDraft
+  busy: 'save' | 'remove' | null
+  testRunning: boolean
+  test: McpTestOutcome | null
+  t: (key: McpSettingsLocaleKey) => string
+  actions: McpServerFormActions
+  injected: McpServerFormRemote
+}
+
+/** Render the editor for one server draft. */
+export function McpServerForm(props: McpServerFormProps): ReactNode {
+  const { draft, busy, testRunning, test, t, actions, injected } = props
+  const [saveError, setSaveError] = useState<string | null>(null)
+
+  const update = (patch: Partial<McpDraft>): void => {
+    setSaveError(null)
+    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 runTest = async (): Promise<void> => {
+    setSaveError(null)
+    actions.setTestRunning(true)
+    try {
+      actions.setTest(await injected.test(draft))
+    } catch {
+      actions.setTest(null)
+    } finally {
+      actions.setTestRunning(false)
+    }
+  }
+
+  const submit = async (): Promise<void> => {
+    setSaveError(null)
+    actions.setBusy('save')
+    try {
+      const failure = await injected.save(draft)
+      if (failure !== null) {
+        setSaveError(failure.message)
+        return
+      }
+      await refresh()
+      actions.cancelEdit()
+    } catch {
+      setSaveError(t('failureTitle'))
+    } finally {
+      actions.setBusy(null)
+    }
+  }
+
+  const removeServer = async (): Promise<void> => {
+    if (draft.id === null || !window.confirm(t('removeConfirm'))) return
+    setSaveError(null)
+    actions.setBusy('remove')
+    try {
+      const failure = await injected.remove(draft.id)
+      if (failure !== null) {
+        setSaveError(failure.message)
+        return
+      }
+      await refresh()
+      actions.cancelEdit()
+    } catch {
+      setSaveError(t('failureTitle'))
+    } finally {
+      actions.setBusy(null)
+    }
+  }
+
+  const refresh = async (): Promise<void> => {
+    try {
+      actions.setServers(await injected.list())
+    } catch {
+      // The save/remove outcome is the actionable one; a failed refresh is
+      // re-run on the next page visit.
+    }
+  }
+
+  const stdio = draft.transport === 'stdio'
+  const probe = test?.probe
+  return (
+    <form className={css.form} onSubmit={(event) => { event.preventDefault(); void submit() }}>
+      <div className={css.titleRow}>
+        <h3 className={css.title}>{draft.id === null ? t('newTitle') : t('editTitle')}</h3>
+        <div className={css.titleActions}>
+          <button type="button" onClick={() => actions.cancelEdit()}>{t('backToList')}</button>
+          {draft.id !== null ? (
+            <button type="button" className={css.danger} disabled={busy !== null} onClick={() => void removeServer()}>
+              {busy === 'remove' ? t('removing') : t('remove')}
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      {saveError !== null ? <p className={css.error} role="alert">{saveError}</p> : null}
+
+      <label className={css.field}>
+        <span>{t('serverName')}</span>
+        <input
+          type="text"
+          value={draft.serverName}
+          placeholder={t('serverNameHint')}
+          onChange={(event) => update({ serverName: event.currentTarget.value })}
+        />
+      </label>
+
+      <label className={css.field}>
+        <span>{t('transport')}</span>
+        <select
+          value={draft.transport}
+          onChange={(event) => update({ transport: event.currentTarget.value as McpDraft['transport'] })}
+        >
+          <option value="stdio">{t('transportStdio')}</option>
+          <option value="streamable-http">{t('transportHttp')}</option>
+        </select>
+      </label>
+
+      {stdio ? (
+        <>
+          <label className={css.field}>
+            <span>{t('command')}</span>
+            <input
+              type="text"
+              value={draft.command}
+              placeholder={t('commandPlaceholder')}
+              onChange={(event) => update({ command: event.currentTarget.value })}
+            />
+          </label>
+          <label className={css.field}>
+            <span>{t('args')}</span>
+            <textarea
+              rows={2}
+              value={draft.argsText}
+              placeholder={t('argsPlaceholder')}
+              onChange={(event) => update({ argsText: event.currentTarget.value })}
+            />
+          </label>
+          <label className={css.field}>
+            <span>{t('cwd')}</span>
+            <input
+              type="text"
+              value={draft.cwd}
+              placeholder={t('cwdPlaceholder')}
+              onChange={(event) => update({ cwd: event.currentTarget.value })}
+            />
+          </label>
+        </>
+      ) : (
+        <>
+          <label className={css.field}>
+            <span>{t('url')}</span>
+            <input
+              type="url"
+              value={draft.url}
+              placeholder={t('urlPlaceholder')}
+              onChange={(event) => update({ url: event.currentTarget.value })}
+            />
+          </label>
+          <label className={css.field}>
+            <span>{t('headers')}</span>
+            <textarea
+              rows={2}
+              value={draft.headersText}
+              placeholder={t('headersPlaceholder')}
+              onChange={(event) => update({ headersText: event.currentTarget.value })}
+            />
+          </label>
+        </>
+      )}
+
+      {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
+          type="number"
+          min={1}
+          value={draft.toolCallTimeoutMs}
+          onChange={(event) => update({ toolCallTimeoutMs: event.currentTarget.value })}
+        />
+      </label>
+
+      <label className={css.checkRow}>
+        <input
+          type="checkbox"
+          checked={draft.failOnStartupError}
+          onChange={(event) => update({ failOnStartupError: event.currentTarget.checked })}
+        />
+        {t('failOnStartupError')}
+      </label>
+
+      <label className={css.checkRow}>
+        <input
+          type="checkbox"
+          checked={draft.enabled}
+          onChange={(event) => update({ enabled: event.currentTarget.checked })}
+        />
+        {t('enabled')}
+      </label>
+
+      {test !== null ? (
+        <p className={`${css.testResult} ${probe !== undefined && probe.ok ? css.testOk : css.testFail}`} role="status">
+          {probe !== undefined && probe.ok
+            ? `${t('testOk')} (${probe.tools.length} ${t('toolCount')}, ${test.elapsedMs}ms)`
+            : probe !== undefined && !probe.ok
+              ? `${t('testFail')}: ${probe.message}`
+              : t('testUnknown')}
+        </p>
+      ) : null}
+
+      <div className={css.actions}>
+        <button type="button" disabled={testRunning || busy !== null} onClick={() => void runTest()}>
+          {testRunning ? t('testRunning') : t('test')}
+        </button>
+        <button type="submit" className={css.primary} disabled={busy !== null || testRunning}>
+          {busy === 'save' ? t('saving') : t('save')}
+        </button>
+        <button type="button" disabled={busy !== null} onClick={() => actions.cancelEdit()}>{t('cancel')}</button>
+      </div>
+    </form>
+  )
+}

package/src/client/ToolControlSection.module.css

@@ -0,0 +1,100 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  padding-top: 16px;
+  margin-top: 4px;
+}
+
+.title {
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+}
+
+.mode {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.modeLabel {
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.mode label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.mode input {
+  margin: 0;
+}
+
+.hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.groupTitle {
+  margin: 10px 0 4px;
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 2px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.row input {
+  flex: none;
+  margin: 0;
+}
+
+.name {
+  flex: none;
+  max-width: 44%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+}
+
+.desc {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-tertiary);
+}

package/src/client/ToolControlSection.tsx

@@ -0,0 +1,137 @@
+/**
+ * Tool-control section merged into the MCP settings page: injection-mode
+ * selector (full / on-demand search) plus per-tool enable switches grouped by
+ * MCP server. Reads and writes the Host's tool-control Remote methods; all
+ * state is process-local on the Host, so the page just reflects it.
+ * @module dsh-mcp/client/ToolControlSection
+ */
+
+import { useEffect, useState, type ReactNode } from 'react'
+import type {
+  McpToolInjectionMode, McpToolView, McpToolsState,
+} from './types.ts'
+import type { McpSettingsLocaleKey } from './locales.ts'
+import css from './ToolControlSection.module.css'
+
+/** Host Remote face required by this section. */
+export interface McpToolControlRemote {
+  /** Read the tool-control state. */
+  toolsList: () => Promise<McpToolsState>
+  /** Set one tool's enable switch. */
+  toolsSet: (request: { name: string; enabled: boolean }) => Promise<{ ok: boolean }>
+  /** Switch the injection mode. */
+  toolsMode: (request: { mode: McpToolInjectionMode }) => Promise<{ ok: boolean }>
+}
+
+/** Props: the injected Remote face plus the bound locale `t`. */
+export interface ToolControlSectionProps {
+  readonly injected: McpToolControlRemote
+  readonly t: (key: McpSettingsLocaleKey) => string
+}
+
+/** Display name of one tool: the raw `mcp__<server>__<tool>` tail. */
+function rawOf(name: string): string {
+  const rest = name.slice(5)
+  const i = rest.indexOf('__')
+  return i < 0 ? rest : rest.slice(i + 2)
+}
+
+/** Render the mode selector and grouped per-tool switches. */
+export function ToolControlSection({ injected, t }: ToolControlSectionProps): ReactNode {
+  const [state, setState] = useState<McpToolsState | null>(null)
+
+  const refresh = (): void => {
+    void injected.toolsList().then(setState, () => setState(null))
+  }
+
+  useEffect(() => {
+    let current = true
+    void injected.toolsList().then(
+      (next) => { if (current) setState(next) },
+      () => { if (current) setState(null) },
+    )
+    return () => { current = false }
+  }, [injected])
+
+  const setMode = (mode: McpToolInjectionMode): void => {
+    void injected.toolsMode({ mode }).then(refresh, (error) => {
+      console.error('[dsh-mcp] toolsMode failed:', error)
+      refresh()
+    })
+  }
+  const toggle = (tool: McpToolView): void => {
+    void injected.toolsSet({ name: tool.name, enabled: !tool.enabled }).then(refresh, (error) => {
+      console.error('[dsh-mcp] toolsSet failed:', error)
+      refresh()
+    })
+  }
+
+  const groups = new Map<string, McpToolView[]>()
+  for (const tool of state?.tools ?? []) {
+    const bucket = groups.get(tool.server) ?? []
+    bucket.push(tool)
+    groups.set(tool.server, bucket)
+  }
+  const servers = [...groups.keys()].sort()
+
+  const rows: ReactNode[] = []
+  for (const server of servers) {
+    rows.push(
+      <div key={server} className={css.groupTitle}>
+        {server}（{groups.get(server)!.length} 个）
+      </div>,
+    )
+    for (const tool of groups.get(server)!) {
+      rows.push(
+        <label key={tool.name} className={css.row} title={tool.name}>
+          <input
+            type="checkbox"
+            checked={tool.enabled}
+            onChange={() => toggle(tool)}
+          />
+          <span className={css.name}>{rawOf(tool.name)}</span>
+          <span className={css.desc}>{tool.description}</span>
+        </label>,
+      )
+    }
+  }
+
+  return (
+    <section className={css.section}>
+      <h3 className={css.title}>{t('toolsTitle')}</h3>
+      <div className={css.mode}>
+        <span className={css.modeLabel}>{t('toolsModeLabel')}</span>
+        <label>
+          <input
+            type="radio"
+            name="mcp-tool-mode"
+            checked={state?.mode === 'full'}
+            onChange={() => setMode('full')}
+          />
+          {t('toolsModeFull')}
+        </label>
+        <label>
+          <input
+            type="radio"
+            name="mcp-tool-mode"
+            checked={state?.mode === 'search'}
+            onChange={() => setMode('search')}
+          />
+          {t('toolsModeSearch')}
+        </label>
+      </div>
+      <p className={css.hint}>
+        {state === null
+          ? t('toolsLoading')
+          : state.mode === 'search'
+            ? t('toolsHintSearch')
+            : t('toolsHintFull')}
+      </p>
+      {state === null ? null : rows.length === 0 ? (
+        <p className={css.hint}>{t('toolsEmpty')}</p>
+      ) : (
+        <div className={css.list}>{rows}</div>
+      )}
+    </section>
+  )
+}

package/src/client/index.ts

@@ -0,0 +1,160 @@
+/**
+ * MCP server management settings page, browser half: one `settings.section`
+ * entry named `mcp` over the `mcpManager` Remote namespace.
+ */
+
+// Type-only: pulls the locale plugin's Context merge (ctx.locale).
+import type {} from '@deepseek-ai/dsh-client-locale/client'
+// Type-only: the settings shell's SlotMap merge (the 'settings.section' entry).
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+// Local wire vocabulary (vendored from the original mcp-manager types).
+import type { McpManagerFailure, McpServerId, McpServerView } from './types.ts'
+import remoteContribution from './remote-contribution.js'
+import { McpSettingsSection, type McpManagerInjected } from './McpSettingsSection.tsx'
+import { en, zh, type McpSettingsLocaleKey } from './locales.ts'
+import { createMcpManagerStore, draftToSubmission } from './mcp-store.ts'
+
+/** One Remote carrier result: success carries the decoded value, failure a code. */
+type McpRemoteResult<Value> =
+  | { readonly ok: true; readonly value: Value }
+  | { readonly ok: false; readonly error: { readonly code: string; readonly message: string } }
+
+/** Wire face of the self-mounted `mcpManager` Remote namespace. */
+interface McpManagerRemote {
+  list(): Promise<McpRemoteResult<{ readonly servers: readonly McpServerView[] }>>
+  upsert(request: {
+    readonly id?: McpServerId
+    readonly server: unknown
+    readonly env: readonly unknown[]
+  }): Promise<McpRemoteResult<{ readonly server: McpServerView }>>
+  delete(request: { readonly id: McpServerId }): Promise<McpRemoteResult<unknown>>
+  test(request: {
+    readonly id?: McpServerId
+    readonly server: unknown
+    readonly env: readonly unknown[]
+  }): Promise<McpRemoteResult<{ readonly probe: unknown; readonly elapsedMs: number }>>
+  toolsList(): Promise<McpRemoteResult<{ readonly tools: readonly unknown[]; readonly mode: unknown; readonly hotSize: number }>>
+  toolsSet(request: { readonly name: string; readonly enabled: boolean }): Promise<McpRemoteResult<{ readonly ok: boolean }>>
+  toolsMode(request: { readonly mode: unknown }): Promise<McpRemoteResult<{ readonly ok: boolean }>>
+}
+
+export type { McpSettingsSectionProps, McpManagerInjected } from './McpSettingsSection.tsx'
+export type { McpServerFormProps } from './ServerForm.tsx'
+export type { McpDraft, McpEnvRowDraft, McpTestOutcome } from './mcp-store.ts'
+export type { McpSettingsLocaleKey } from './locales.ts'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** MCP server management copy. */
+    'settings.mcp': McpSettingsLocaleKey
+  }
+}
+
+/** Dictionary namespace owned by this plugin. */
+export const NS = 'settings.mcp'
+
+/**
+ * Services required by the Settings registration and the Remote mount. The
+ * `mcpManager` Remote namespace is NOT injected: this standalone plugin mounts
+ * the contribution itself in `apply`, so waiting for `remote.mcpManager` here
+ * would deadlock against its own mount.
+ */
+export const inject = ['slots', 'locale', 'remote']
+
+/**
+ * Resolve one Remote call: unwrap the value or throw on a carrier failure.
+ * @param run - The typed Remote method invocation.
+ * @returns the business value.
+ */
+async function unwrap<Value>(
+  run: () => Promise<{ ok: true; value: Value } | { ok: false; error: { code: string; message: string } }>,
+): Promise<Value> {
+  const result = await run()
+  if (!result.ok) throw new Error(`${result.error.code}: ${result.error.message}`)
+  return result.value
+}
+
+/** Map a Remote failure to the manager's business failure vocabulary. */
+function failureOf(error: { code: string; message: string }): McpManagerFailure {
+  return { code: error.code as McpManagerFailure['code'], message: error.message }
+}
+
+/**
+ * Contribute the MCP management page to the Settings section. Unlike the
+ * original assembly (where the api-remotes facade mounted every Remote
+ * namespace), this standalone plugin mounts the `mcpManager` contribution
+ * itself so it needs no modification to any in-box package.
+ * @param ctx - Client Cordis root.
+ */
+export async function apply(ctx: ClientContext): Promise<void> {
+  await ctx.remote.$mount(remoteContribution)
+
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'ui-settings-mcp: dictionaries')
+
+  const t = ctx.locale.bind(NS)
+
+  // The mcpManager namespace is self-mounted by $mount above, so injecting
+  // `remote.mcpManager` would deadlock this plugin's own activation. Read the
+  // provided service through the global service store instead of the ctx
+  // property proxy, which would demand an inject declaration.
+  const manager = ctx.get('remote.mcpManager') as McpManagerRemote | undefined
+  if (manager === undefined) {
+    throw new Error('dsh-mcp: remote.mcpManager namespace is not mounted after $mount')
+  }
+
+  const injected = (): McpManagerInjected => ({
+    list: async () => {
+      const result = await unwrap(() => manager.list())
+      return result.servers
+    },
+    save: async (draft) => {
+      const submission = draftToSubmission(draft)
+      const result = await manager.upsert({
+        ...draft.id === null ? {} : { id: draft.id },
+        server: submission.server,
+        env: submission.env,
+      })
+      if (result.ok) return null
+      return failureOf(result.error)
+    },
+    remove: async (id) => {
+      const result = await manager.delete({ id })
+      if (result.ok) return null
+      return failureOf(result.error)
+    },
+    test: async (draft) => {
+      const submission = draftToSubmission(draft)
+      const result = await unwrap(() => manager.test({
+        ...draft.id === null ? {} : { id: draft.id },
+        server: submission.server,
+        env: submission.env,
+      }))
+      return { probe: result.probe, elapsedMs: result.elapsedMs }
+    },
+    toolsList: async () => {
+      // The contribution declares no parameters for toolsList; pass none.
+      const result = await unwrap(() => manager.toolsList())
+      return { tools: result.tools, mode: result.mode, hotSize: result.hotSize }
+    },
+    toolsSet: async (request) => {
+      // `request` is the single wire parameter: pass the payload directly.
+      const result = await unwrap(() => manager.toolsSet(request))
+      return { ok: result.ok }
+    },
+    toolsMode: async (request) => {
+      const result = await unwrap(() => manager.toolsMode({ mode: request.mode }))
+      return { ok: result.ok }
+    },
+  })
+
+  ctx.slots.inject('settings.section', () => ctx.slots.register({
+    name: 'settings.section',
+    id: 'mcp',
+    order: 25,
+    label: () => t('nav'),
+    locale: NS,
+    store: createMcpManagerStore,
+    inject: injected,
+  }, McpSettingsSection))
+}