dsh-mcp-panel 0.2.0

package/src/aggregate.ts

@@ -0,0 +1,248 @@
+/**
+ * Status aggregation: assemble the read-only server views from the three
+ * facts the panel is allowed to read — loader rows (config, effective
+ * disabled, fiber phase), the tool-registry snapshot, and upstream
+ * `mcp/status` observations (when the proposed seam exists).
+ *
+ * Every field is read defensively: loader configs are raw serialized data
+ * (possibly `!!js` expressions, wrong types, or absent), and upstream
+ * payloads may lack optional fields. A malformed or missing field degrades
+ * to an explicit default instead of throwing — the aggregation must never
+ * take down the panel over one broken row.
+ *
+ * Pure: statuses and reconnect counters are passed in as snapshots.
+ *
+ * @module dsh-mcp-panel/aggregate
+ */
+
+import { groupMcpTools, type McpToolGroup } from './grouping.ts'
+import { sanitizeError, sanitizeUrl } from './sanitize.ts'
+import type { McpServerStatus } from './upstream.ts'
+import type {
+  McpConnectionPhase,
+  McpFiberPhase,
+  McpPanelSnapshot,
+  McpServerView,
+  McpTransport,
+} from './wire.ts'
+
+/** One loader-derived mcp-client row (config is raw serialized data). */
+export interface McpLoaderRow {
+  /** Loader entry id (the patch row id). */
+  entryId: string
+  /** Effective disabled state (parent groups and `!!js` already resolved by the Loader). */
+  disabled: boolean
+  /** Fiber phase; null when the row has no fiber. */
+  fiberPhase: McpFiberPhase
+  /** Raw `config` from the entry options; may be anything. */
+  config: unknown
+}
+
+/** The exact module name of the official MCP client bridge. */
+export const MCP_CLIENT_MODULE = '@deepseek-ai/dsh-mcp-client'
+
+/** Marker shown for a `!!js` config value, which the panel never evaluates. */
+export const JS_EXPRESSION_MARKER = '<expression>'
+
+/** Sentinel values for "not observed" numeric fields. */
+export const UNKNOWN_COUNT = -1
+
+/** One server namespace → its upstream observation and derived totals. */
+export interface McpStatusFacts {
+  /** Latest upstream payload per server; absent = not observed. */
+  statuses: ReadonlyMap<string, McpServerStatus>
+  /** Cumulative reconnect attempts observed per server. */
+  reconnects: ReadonlyMap<string, number>
+  /** Epoch ms of the latest upstream event receipt per server. */
+  observedAt: ReadonlyMap<string, number>
+  /** Passive-probe reachability facts per server (empty when probing is off). */
+  probeStates: ReadonlyMap<string, { state: 'reachable' | 'unreachable'; checkedAt: number }>
+}
+
+/**
+ * The raw face of a `!!js` expression node in serialized loader config.
+ * Detected structurally; the expression is never evaluated or displayed.
+ */
+interface JsExprNode {
+  readonly __jsExpr?: unknown
+}
+
+/** Read a plain JSON value from raw config; `!!js` nodes and wrong types become the fallback. */
+function plainField(config: unknown, key: string): unknown {
+  if (typeof config !== 'object' || config === null || Array.isArray(config)) return undefined
+  const value = (config as Record<string, unknown>)[key]
+  if (value === undefined || value === null) return undefined
+  if (typeof value === 'object' && '__jsExpr' in (value as JsExprNode)) return undefined
+  return value
+}
+
+/** Read a string config field; absent, non-string, or `!!js` becomes the fallback. */
+function stringField(config: unknown, key: string, fallback: string): string {
+  const value = plainField(config, key)
+  return typeof value === 'string' ? value : fallback
+}
+
+/** Render one argument for the display command line. */
+function renderArg(arg: unknown): string {
+  if (typeof arg === 'string') {
+    return /^[\w./:@%+=,_-]+$/u.test(arg) ? arg : JSON.stringify(arg)
+  }
+  if (typeof arg === 'object' && arg !== null && '__jsExpr' in (arg as JsExprNode)) {
+    return JS_EXPRESSION_MARKER
+  }
+  try {
+    return JSON.stringify(arg)
+  } catch {
+    return JS_EXPRESSION_MARKER
+  }
+}
+
+/** Transport and display target derived from one raw mcp-client config. */
+export function deriveTarget(config: unknown): { transport: McpTransport; target: string } {
+  const transport = stringField(config, 'transport', '')
+  if (transport === 'stdio') {
+    const command = stringField(config, 'command', '')
+    if (command === '') return { transport: 'unknown', target: '(unconfigured)' }
+    const argsValue = plainField(config, 'args')
+    const args = Array.isArray(argsValue) ? argsValue.map(renderArg) : []
+    const target = args.length === 0 ? command : `${command} ${args.join(' ')}`
+    return { transport: 'stdio', target }
+  }
+  if (transport === 'streamable-http') {
+    const url = stringField(config, 'url', '')
+    if (url === '') return { transport: 'unknown', target: '(unconfigured)' }
+    return { transport: 'streamable-http', target: sanitizeUrl(url) }
+  }
+  return { transport: 'unknown', target: '(unconfigured)' }
+}
+
+/** Read the server namespace from raw config; absent becomes a stable fallback. */
+export function serverNameOf(config: unknown, fallback: string): string {
+  const name = stringField(config, 'serverName', '')
+  return name === '' ? fallback : name
+}
+
+/**
+ * Derive the config-declared policy facts in one display line. Reads only
+ * boolean and number fields (never strings from raw config), so nothing
+ * user-supplied or secret can leak; `null` = nothing noteworthy configured.
+ */
+function configuredNote(config: unknown): string | null {
+  const parts: string[] = []
+  const reconnectValue = plainField(config, 'reconnect')
+  if (typeof reconnectValue === 'object' && reconnectValue !== null && !Array.isArray(reconnectValue)) {
+    const enabled = plainField(reconnectValue, 'enabled')
+    const maxAttempts = plainField(reconnectValue, 'maxAttempts')
+    if (typeof enabled === 'boolean' && !enabled) {
+      parts.push('reconnect off')
+    } else if (typeof maxAttempts === 'number' && Number.isFinite(maxAttempts)) {
+      parts.push(`reconnect max ${maxAttempts}`)
+    }
+  }
+  if (plainField(config, 'failOnStartupError') === true) parts.push('fail on startup error')
+  const toolTimeout = plainField(config, 'toolCallTimeoutMs')
+  if (typeof toolTimeout === 'number' && Number.isFinite(toolTimeout)) parts.push(`tool timeout ${Math.round(toolTimeout / 1000)}s`)
+  return parts.length === 0 ? null : parts.join('; ')
+}
+
+/** Upstream phase projected onto the wire vocabulary (unknown when unobserved). */
+function connectionPhase(status: McpServerStatus | undefined): McpConnectionPhase {
+  if (status === undefined) return 'unknown'
+  return status.phase
+}
+
+/**
+ * Assemble one server view from loader, registry, and upstream facts.
+ * Missing upstream data degrades to `unknown`/`-1`/`null` — never fabricated.
+ *
+ * @param row - the mcp-client loader row, or `undefined` for leftover namespaces.
+ * @param serverName - the effective namespace.
+ * @param group - the tool group for this namespace (possibly empty).
+ * @param facts - upstream observations and reconnect totals.
+ * @returns the display-ready view.
+ */
+export function aggregateServerView(
+  row: McpLoaderRow | undefined,
+  serverName: string,
+  group: McpToolGroup | undefined,
+  facts: McpStatusFacts,
+): McpServerView {
+  const status = facts.statuses.get(serverName)
+  const { transport, target } = row === undefined ? { transport: 'unknown' as const, target: '(unconfigured)' } : deriveTarget(row.config)
+  const lastError = status?.error === undefined ? null : sanitizeError(status.error)
+  const attempt = status?.attempt ?? UNKNOWN_COUNT
+  const maxAttempts = status?.maxAttempts ?? UNKNOWN_COUNT
+  const reconnect = facts.reconnects.get(serverName) ?? UNKNOWN_COUNT
+  const connectedAt = status?.connectedAt ?? null
+  const delayMs = status?.delayMs ?? null
+  const observedAt = facts.observedAt.get(serverName) ?? null
+  const probe = facts.probeStates.get(serverName)
+  return {
+    serverName,
+    entryId: row?.entryId ?? '',
+    transport,
+    target,
+    enabled: row?.disabled === false,
+    fiberPhase: row?.fiberPhase ?? null,
+    configuredNote: row === undefined ? null : configuredNote(row.config),
+    toolCount: group?.tools.length ?? 0,
+    tools: group?.tools ?? [],
+    phase: connectionPhase(status),
+    attempt,
+    maxAttempts,
+    delayMs,
+    reconnectCount: reconnect,
+    lastError,
+    connectedAt,
+    observedAt,
+    probeState: probe?.state ?? null,
+    probeCheckedAt: probe?.checkedAt ?? null,
+    statusSource: status === undefined ? 'derived' : 'upstream-event',
+  }
+}
+
+/** Inputs for {@link aggregateSnapshot}; grouped so callers never mix them up. */
+export interface McpAggregateInput {
+  /** Loader mcp-client rows (raw config included). */
+  rows: readonly McpLoaderRow[]
+  /** Tool groups from {@link groupMcpTools}. */
+  groups: readonly McpToolGroup[]
+  /** Upstream status facts (may be empty). */
+  facts: McpStatusFacts
+  /** Background probe views (may be empty). */
+  probes: McpPanelSnapshot['probes']
+  /** Absolute profile patch-layer path, or null. */
+  patchFile: string | null
+  /** Suggested panel refresh interval in ms (`0` = on demand). */
+  refreshIntervalMs: number
+}
+
+/**
+ * Assemble the complete snapshot from loader rows, tool groups, upstream
+ * facts, and probe rows. Tolerates missing fields anywhere in the inputs.
+ *
+ * @param input - the snapshot inputs (see {@link McpAggregateInput}).
+ * @returns the wire snapshot.
+ */
+export function aggregateSnapshot(input: McpAggregateInput): McpPanelSnapshot {
+  const { rows, groups, facts, probes, patchFile, refreshIntervalMs } = input
+  // One view per namespace: the enabled row wins; otherwise the first row.
+  const rowsByName = new Map<string, McpLoaderRow>()
+  for (const row of rows) {
+    const name = serverNameOf(row.config, `entry:${row.entryId}`)
+    const existing = rowsByName.get(name)
+    if (existing === undefined || (!row.disabled && existing.disabled)) rowsByName.set(name, row)
+  }
+  const groupsByName = new Map(groups.map(group => [group.serverName, group]))
+  const names = new Set([...rowsByName.keys(), ...groupsByName.keys()])
+  const servers = [...names]
+    .map(name => aggregateServerView(rowsByName.get(name), name, groupsByName.get(name), facts))
+    .sort((left, right) => left.serverName < right.serverName ? -1 : 1)
+  return {
+    observed: facts.statuses.size > 0,
+    patchFile,
+    refreshIntervalMs,
+    servers,
+    probes,
+  }
+}

package/src/client/McpPanelTab.tsx

@@ -0,0 +1,257 @@
+/** The read-only MCP management tab: server rows, badges, tools, probes. */
+
+import { useEffect, useId, useState, type ReactNode } from 'react'
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { presentMcpPanel, probeBadge, type BadgeTone, type PresentedServerRow } from './present.ts'
+import type { McpPanelSnapshot, McpProbeView, ProbeStarted } from '../wire.ts'
+
+/** Registration-side injected face: the unwrapped snapshot read + probe start. */
+export interface McpPanelTabInjected {
+  /** Read the current Host snapshot (RemoteResult already unwrapped). */
+  status: () => Promise<McpPanelSnapshot>
+  /** Start a one-shot probe of one streamable-http server (panel-only result). */
+  probe: (serverName: string) => Promise<ProbeStarted>
+}
+
+/** Full component props assembled by the Settings slot renderer. */
+export type McpPanelTabProps =
+  PropsRuntime<'settings.plugins.tab'>
+  & PropsLocale<'settings.mcpPanel'>
+  & InjectFace<McpPanelTabInjected>
+
+type ViewState =
+  | { readonly status: 'loading' }
+  | { readonly status: 'error' }
+  | { readonly status: 'ready'; readonly snapshot: McpPanelSnapshot }
+
+/** Localized label for one server badge code. */
+function badgeLabel(badge: PresentedServerRow['badge'], t: McpPanelTabProps['t']): string {
+  switch (badge) {
+    case 'disabled': return t('statusDisabled')
+    case 'failed': return t('statusFailed')
+    case 'connecting': return t('statusConnecting')
+    case 'connected': return t('statusConnected')
+    case 'waiting': return t('statusWaiting')
+    case 'exhausted': return t('statusExhausted')
+    case 'disposed': return t('statusDisposed')
+    default: return t('statusUnknown')
+  }
+}
+
+/** Localized label for one probe badge code. */
+function probeLabel(badge: ReturnType<typeof probeBadge>['badge'], t: McpPanelTabProps['t']): string {
+  switch (badge) {
+    case 'running': return t('probeRunning')
+    case 'completed': return t('probeCompleted')
+    case 'failed': return t('probeFailed')
+    case 'killed': return t('probeKilled')
+    case 'stopping': return t('probeStopping')
+  }
+}
+
+/** Local wall-clock range for one probe row; component-layer formatting only. */
+function formatProbeTime(view: McpProbeView): string {
+  const format = (ms: number): string => new Date(ms).toLocaleTimeString(undefined, { hour12: false })
+  const start = format(view.startedAt)
+  return view.finishedAt === null ? start : `${start}–${format(view.finishedAt)}`
+}
+
+/** Render the read-only MCP management tab. */
+export function McpPanelTab({ status, probe, t }: McpPanelTabProps): ReactNode {
+  const listId = useId()
+  const [request, setRequest] = useState(0)
+  const [expanded, setExpanded] = useState<string | null>(null)
+  const [probeError, setProbeError] = useState<string | null>(null)
+  const [state, setState] = useState<ViewState>({ status: 'loading' })
+  // Per-card tool filter: one query per server so expanding two cards at once
+  // never filters one card by the other card's search text.
+  const [toolQueries, setToolQueries] = useState<Record<string, string>>({})
+
+  const reload = (): void => {
+    setRequest(value => value + 1)
+  }
+
+  useEffect(() => {
+    let current = true
+    void Promise.resolve().then(() => status()).then(
+      (snapshot) => { if (current) setState({ status: 'ready', snapshot }) },
+      () => { if (current) setState({ status: 'error' }) },
+    )
+    return () => { current = false }
+  }, [status, request])
+
+  // Optional polling: the host suggests an interval through the snapshot
+  // (0 = on demand only). Errors during polling keep the last good snapshot.
+  // Polling pauses while the document is hidden and refreshes immediately on
+  // becoming visible again, so background tabs neither spin nor show stale data.
+  const intervalMs = state.status === 'ready' ? state.snapshot.refreshIntervalMs : 0
+  useEffect(() => {
+    if (intervalMs <= 0) return undefined
+    const tick = (): void => { if (!document.hidden) reload() }
+    const timer = setInterval(tick, intervalMs)
+    const onVisible = (): void => { if (!document.hidden) reload() }
+    document.addEventListener('visibilitychange', onVisible)
+    return () => {
+      clearInterval(timer)
+      document.removeEventListener('visibilitychange', onVisible)
+    }
+  }, [intervalMs])
+
+  const retry = (): void => {
+    setState({ status: 'loading' })
+    reload()
+  }
+
+  const model = state.status === 'ready' ? presentMcpPanel(state.snapshot) : undefined
+
+  return (
+    <div className="dmcp-section" data-dsh-mcp-panel="" aria-busy={state.status === 'loading'}>
+      {state.status === 'loading' ? <p className="dmcp-status">{t('loading')}</p> : null}
+      {state.status === 'error' ? (
+        <div className="dmcp-failure">
+          <p role="alert">{t('error')}</p>
+          <button type="button" onClick={retry}>{t('retry')}</button>
+        </div>
+      ) : null}
+      {model !== undefined ? (
+        <div className="dmcp-panel">
+          {model.empty ? <p className="dmcp-status">{t('empty')}</p> : (
+            <>
+              <h3 className="dmcp-heading">{t('servers')}</h3>
+              <ul className="dmcp-cards">
+                {model.servers.map((row) => {
+                  const open = expanded === row.view.serverName
+                  const detailId = `${listId}-${encodeURIComponent(row.view.serverName)}`
+                  const toolQuery = toolQueries[row.view.serverName] ?? ''
+                  const probeRunning = model.probes.some(
+                    probe => probe.view.status === 'running' && probe.view.serverName === row.view.serverName,
+                  )
+                  return (
+                    <li className="dmcp-card" key={row.view.serverName} data-mcp-server={row.view.serverName} data-open={open ? 'true' : undefined}>
+                      <button
+                        type="button"
+                        className="dmcp-card-content"
+                        aria-expanded={open}
+                        aria-controls={detailId}
+                        onClick={() => { setExpanded(current => current === row.view.serverName ? null : row.view.serverName) }}
+                      >
+                        <strong className="dmcp-card-title">{row.view.serverName}</strong>
+                        <span className="dmcp-card-trailing">
+                          {row.view.probeState !== null ? (
+                            <Badge
+                              tone={row.view.probeState === 'reachable' ? 'ok' : 'error'}
+                              label={row.view.probeState === 'reachable' ? t('probeReachable') : t('probeUnreachable')}
+                            />
+                          ) : null}
+                          <Badge tone={row.tone} label={badgeLabel(row.badge, t)} />
+                          <span className="dmcp-tool-count">
+                            {row.view.toolCount} {t('tools')}
+                          </span>
+                        </span>
+                      </button>
+                      {open ? (
+                        <div className="dmcp-card-details" id={detailId}>
+                          <dl className="dmcp-details">
+                            <div><dt>{t('status')}</dt><dd>{badgeLabel(row.badge, t)}</dd></div>
+                            {row.hasAttemptBudget ? (
+                              <div>
+                                <dt>{t('attempt')}</dt>
+                                <dd>{row.view.attempt < 0 ? t('none') : row.view.attempt}/{row.view.maxAttempts < 0 ? t('none') : row.view.maxAttempts}</dd>
+                              </div>
+                            ) : null}
+                            <div><dt>{t('reconnects')}</dt><dd>{row.reconnects ?? t('none')}</dd></div>
+                            <div><dt>{t('lastError')}</dt><dd className={row.hasError ? 'dmcp-error-text' : undefined}>{row.view.lastError ?? t('none')}</dd></div>
+                            <div><dt>{t('fiber')}</dt><dd>{row.view.fiberPhase ?? t('none')}</dd></div>
+                            {row.view.configuredNote !== null ? <div><dt>{t('configured')}</dt><dd>{row.view.configuredNote}</dd></div> : null}
+                            {row.ageSeconds !== null ? <div><dt>{t('lastEvent')}</dt><dd>{row.ageSeconds}s</dd></div> : null}
+                            {row.view.delayMs !== null ? <div><dt>{t('retryIn')}</dt><dd>{row.view.delayMs} {t('ms')}</dd></div> : null}
+                          </dl>
+                          <code className="dmcp-target" title={row.view.target}>{row.view.transport} {row.view.target}</code>
+                          {row.view.transport === 'streamable-http' ? (
+                            <button
+                              type="button"
+                              className="dmcp-probe-now"
+                              disabled={probeRunning}
+                              onClick={() => {
+                                setProbeError(null)
+                                void Promise.resolve().then(() => probe(row.view.serverName)).then(
+                                  () => { reload() },
+                                  (error: unknown) => { setProbeError(error instanceof Error ? error.message : String(error)) },
+                                )
+                              }}
+                            >
+                              {probeRunning ? t('probeRunning') : t('probeNow')}
+                            </button>
+                          ) : null}
+                          {row.view.tools.length === 0 ? (
+                            <p className="dmcp-status">{t('noTools')}</p>
+                          ) : (
+                            <>
+                              <input
+                                type="search"
+                                className="dmcp-tool-filter"
+                                value={toolQuery}
+                                placeholder={t('filterTools')}
+                                aria-label={t('filterTools')}
+                                onChange={(event) => {
+                                  setToolQueries(current => ({ ...current, [row.view.serverName]: event.currentTarget.value }))
+                                }}
+                              />
+                              <ul className="dmcp-tools">
+                                {row.view.tools
+                                  .filter(tool => toolQuery.trim() === ''
+                                    || tool.name.toLocaleLowerCase().includes(toolQuery.trim().toLocaleLowerCase())
+                                    || tool.description.toLocaleLowerCase().includes(toolQuery.trim().toLocaleLowerCase()))
+                                  .map(tool => (
+                                    <li key={tool.name}>
+                                      <code>{tool.name}</code>
+                                      {tool.description !== '' ? <span className="dmcp-tool-description">{tool.description}</span> : null}
+                                    </li>
+                                  ))}
+                              </ul>
+                            </>
+                          )}
+                        </div>
+                      ) : null}
+                    </li>
+                  )
+                })}
+              </ul>
+            </>
+          )}
+          {!model.observed && !model.empty ? <p className="dmcp-derived-note">{t('derivedNote')}</p> : null}
+          {probeError !== null ? <p className="dmcp-error-text" role="alert">{t('probeFailedAction')}: {probeError}</p> : null}
+          <h3 className="dmcp-heading">{t('probes')}</h3>
+          {model.probes.length === 0 ? <p className="dmcp-status">{t('probeEmpty')}</p> : (
+            <ul className="dmcp-probes">
+              {model.probes.map((probe) => {
+                const badge = probeBadge(probe.view.status)
+                return (
+                  <li key={probe.view.id} className="dmcp-probe" data-mcp-probe={probe.view.id}>
+                    <Badge tone={badge.tone} label={probeLabel(badge.badge, t)} />
+                    <code>{probe.view.serverName}</code>
+                    <span className="dmcp-probe-time">{formatProbeTime(probe.view)}</span>
+                    <span className="dmcp-probe-detail">{probe.view.detail ?? t('none')}</span>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+          {model.patchFile !== null ? (
+            <p className="dmcp-patch-hint">{t('patchHint')} <code>{model.patchFile}</code></p>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+/** One tone-colored badge chip. */
+function Badge({ tone, label }: { readonly tone: BadgeTone; readonly label: string }): ReactNode {
+  return (
+    <span className="dmcp-badge" data-tone={tone} role="img" aria-label={label} title={label}>
+      <span className="dmcp-dot" aria-hidden="true" />
+      {label}
+    </span>
+  )
+}

package/src/client/index.ts

@@ -0,0 +1,87 @@
+/**
+ * `dsh-mcp-panel`, browser half: mounts the `mcpPanel` Remote contribution,
+ * then registers a read-only "MCP" tab into the Plugins settings section
+ * (`settings.plugins.tab`, id `mcp`). All data arrives through the
+ * `remote.mcpPanel` namespace — the tab issues no other RPC and holds no
+ * state of its own beyond expansion and the last loaded snapshot.
+ *
+ * @module dsh-mcp-panel/client
+ */
+
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+import type {} from '@deepseek-ai/dsh-client-locale/client'
+// Type-only: pulls the 'settings.plugins.tab' SlotMap declaration into this
+// program so the tab registration typechecks against the real declaration.
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
+import { McpPanelTab, type McpPanelTabInjected } from './McpPanelTab.tsx'
+// The harness locale registry accepts only the 'en' | 'zh' UI language codes
+// today (its LocaleDictOf face), so the tab ships those two dictionaries and
+// follows the app's UI language. The `/mcp` command language is a separate
+// plugin config (`outputLanguage`) with its own five-language dictionaries.
+import { en, zh, type McpPanelLocaleKey } from './locales.ts'
+import { MCP_PANEL_REMOTE } from './remote.ts'
+import { installPanelStyles } from './styles.ts'
+import type { RemoteResult } from '@deepseek-ai/dsh-typert-protocol'
+import type { McpPanelSnapshot } from '../wire.ts'
+
+export type { McpPanelTabInjected, McpPanelTabProps } from './McpPanelTab.tsx'
+export type { McpPanelLocaleKey } from './locales.ts'
+export { presentMcpPanel, connectionBadge, probeBadge } from './present.ts'
+export type { PresentedMcpPanel, PresentedProbeRow, PresentedServerRow, BadgeTone } from './present.ts'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** MCP management tab copy. */
+    'settings.mcpPanel': McpPanelLocaleKey
+  }
+}
+
+/** Dictionary namespace owned by this plugin. */
+export const NS = 'settings.mcpPanel'
+
+/** Plugin name: matches the package name, the graph row id, and the bundle id. */
+export const name = 'dsh-mcp-panel'
+
+/** Services the tab reads; `remote.mcpPanel` appears once this plugin mounts its contribution. */
+export const inject = ['slots', 'locale', 'remote']
+
+/**
+ * Browser plugin body: dictionaries, the scoped stylesheet, the Remote
+ * contribution mount, and the settings tab registration.
+ *
+ * @param ctx - client root context.
+ */
+export async function apply(ctx: ClientContext): Promise<void> {
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-mcp-panel: dictionaries')
+  ctx.effect(() => installPanelStyles(), 'dsh-mcp-panel: stylesheet')
+
+  // $mount registers the 'remote.mcpPanel' namespace service and owns its
+  // removal for this fiber's lifetime.
+  await ctx.remote.$mount(MCP_PANEL_REMOTE)
+
+  ctx.inject(['remote.mcpPanel'], (scope) => {
+    const t = scope.locale.bind(NS)
+    const status: McpPanelTabInjected['status'] = async () => {
+      const result: RemoteResult<McpPanelSnapshot> = await scope.remote.mcpPanel.status()
+      if (!result.ok) {
+        throw new Error(`mcpPanel.status failed: ${result.error.code}: ${result.error.message}`)
+      }
+      return result.value
+    }
+    const probe: McpPanelTabInjected['probe'] = async (serverName) => {
+      const result = await scope.remote.mcpPanel.probe(serverName)
+      if (!result.ok) {
+        throw new Error(`mcpPanel.probe failed: ${result.error.code}: ${result.error.message}`)
+      }
+      return result.value
+    }
+    scope.slots.inject('settings.plugins.tab', () => scope.slots.register({
+      name: 'settings.plugins.tab',
+      id: 'mcp',
+      order: 30,
+      label: () => t('tab'),
+      locale: NS,
+      inject: (): McpPanelTabInjected => ({ status, probe }),
+    }, McpPanelTab))
+  })
+}