dsh-mcp-panel 0.2.0

package/src/client/locales.ts

@@ -0,0 +1,92 @@
+/** Copy dictionaries for the MCP management Settings tab. */
+
+/** Simplified Chinese dictionary and key source of truth. */
+export const zh = {
+  tab: 'MCP',
+  loading: '正在读取 MCP 状态…',
+  error: '暂时无法读取 MCP 状态。',
+  retry: '重试',
+  empty: '此 profile 未配置官方 MCP 服务器（@deepseek-ai/dsh-mcp-client 行）。',
+  servers: '服务器',
+  tools: '工具',
+  noTools: '未注册工具',
+  status: '状态',
+  statusUnknown: '未知',
+  statusDisabled: '已停用',
+  statusFailed: '挂载失败',
+  statusConnecting: '连接中',
+  statusConnected: '已连接',
+  statusWaiting: '重连等待',
+  statusExhausted: '重连放弃',
+  statusDisposed: '已卸载',
+  reconnects: '重连',
+  lastError: '最近错误',
+  none: '—',
+  fiber: 'Cordis fiber',
+  configured: '已配置',
+  retryIn: '重试等待',
+  attempt: '尝试',
+  lastEvent: '最后事件',
+  filterTools: '过滤工具',
+  ms: 'ms',
+  derivedNote: '连接状态/重连计数来自上游 mcp/status 事件的提议（docs/upstream-proposal.md）；当前未观察到上游数据，以下连接字段为"未知"，其余为配置与工具注册表事实。',
+  probes: '连通性探测',
+  probeEmpty: '暂无探测记录。用 mcp_probe 工具发起一次探测。',
+  probeRunning: '运行中',
+  probeCompleted: '完成',
+  probeFailed: '失败',
+  probeKilled: '已取消',
+  probeStopping: '取消中',
+  probeNow: '探测',
+  probeReachable: '可达',
+  probeUnreachable: '不可达',
+  probeFailedAction: '探测失败',
+  patchHint: '启停只能通过 patch 建议（/mcp <server> disable|enable）手工应用到',
+} satisfies Record<string, string>
+
+/** MCP panel locale key union. */
+export type McpPanelLocaleKey = keyof typeof zh
+
+/** English dictionary checked against the Chinese key set. */
+export const en = {
+  tab: 'MCP',
+  loading: 'Reading MCP status…',
+  error: 'MCP status is temporarily unavailable.',
+  retry: 'Retry',
+  empty: 'This profile configures no official MCP servers (@deepseek-ai/dsh-mcp-client rows).',
+  servers: 'Servers',
+  tools: 'Tools',
+  noTools: 'No tools registered',
+  status: 'Status',
+  statusUnknown: 'Unknown',
+  statusDisabled: 'Disabled',
+  statusFailed: 'Mount failed',
+  statusConnecting: 'Connecting',
+  statusConnected: 'Connected',
+  statusWaiting: 'Reconnect waiting',
+  statusExhausted: 'Reconnect gave up',
+  statusDisposed: 'Disposed',
+  reconnects: 'Reconnects',
+  lastError: 'Last error',
+  none: '—',
+  fiber: 'Cordis fiber',
+  configured: 'Configured',
+  retryIn: 'Retry in',
+  attempt: 'Attempt',
+  lastEvent: 'Last event',
+  filterTools: 'Filter tools',
+  ms: 'ms',
+  derivedNote: 'Connection status and reconnect counts come from the proposed upstream mcp/status seam (docs/upstream-proposal.md); no upstream data was observed, so connection fields read "unknown" and the rest are config and tool-registry facts.',
+  probes: 'Connectivity probes',
+  probeEmpty: 'No probes yet. Start one with the mcp_probe tool.',
+  probeRunning: 'Running',
+  probeCompleted: 'Completed',
+  probeFailed: 'Failed',
+  probeKilled: 'Killed',
+  probeStopping: 'Stopping',
+  probeNow: 'Probe',
+  probeReachable: 'Reachable',
+  probeUnreachable: 'Unreachable',
+  probeFailedAction: 'Probe failed',
+  patchHint: 'Enable/disable is a patch suggestion only (/mcp <server> disable|enable); apply it by hand to',
+} satisfies Record<McpPanelLocaleKey, string>

package/src/client/present.ts

@@ -0,0 +1,127 @@
+/**
+ * Pure presentation for the MCP settings tab: maps the wire snapshot onto
+ * render-ready rows and badge codes. No I/O, no clock, no random — a session
+ * replay or a test may call it any number of times and get the same result.
+ * Localization happens in the component through the locale dictionaries;
+ * this module emits stable codes only.
+ *
+ * @module dsh-mcp-panel/client/present
+ */
+
+import type { McpPanelSnapshot, McpServerView, McpProbeView } from '../wire.ts'
+
+/** Badge tones the stylesheet understands. */
+export type BadgeTone = 'ok' | 'warn' | 'error' | 'muted'
+
+/** Render-ready server row plus derived badge facts. */
+export interface PresentedServerRow {
+  /** The wire server view, unchanged. */
+  readonly view: McpServerView
+  /** Badge tone for the connection state. */
+  readonly tone: BadgeTone
+  /** Badge code: `disabled` | `failed` | a connection phase | `unknown`. */
+  readonly badge: 'disabled' | 'failed' | 'connecting' | 'connected' | 'waiting' | 'exhausted' | 'disposed' | 'unknown'
+  /** Whether the row shows an error badge (sanitized `lastError` present). */
+  readonly hasError: boolean
+  /** Display form of the reconnect count (`-1` → null = dash). */
+  readonly reconnects: number | null
+  /** Whole seconds since the last upstream event; `null` = never observed. */
+  readonly ageSeconds: number | null
+  /** Whether the attempt/maxAttempts pair is displayable (either is known). */
+  readonly hasAttemptBudget: boolean
+}
+
+/** Render-ready probe row. */
+export interface PresentedProbeRow {
+  /** The wire probe view, unchanged. */
+  readonly view: McpProbeView
+  /** Badge tone for the probe state. */
+  readonly tone: BadgeTone
+  /** Badge code for the probe state. */
+  readonly badge: 'running' | 'completed' | 'failed' | 'killed' | 'stopping'
+}
+
+/** The complete render-ready tab model. */
+export interface PresentedMcpPanel {
+  /** Servers in snapshot order. */
+  readonly servers: readonly PresentedServerRow[]
+  /** Probes in snapshot order (newest first). */
+  readonly probes: readonly PresentedProbeRow[]
+  /** Whether the snapshot carries any server rows. */
+  readonly empty: boolean
+  /** Whether connection fields came from upstream or are derived. */
+  readonly observed: boolean
+  /** Absolute profile patch-layer path for the hint line, or null. */
+  readonly patchFile: string | null
+  /** Suggested refresh interval in ms (`0` = on demand only). */
+  readonly refreshIntervalMs: number
+}
+
+/**
+ * Derive the connection badge for one server row. Order matters: the entry
+ * being disabled or its fiber failed is a configuration fact that beats the
+ * (derived or upstream) connection phase.
+ *
+ * @param view - the assembled server view.
+ * @returns the badge code and tone.
+ */
+export function connectionBadge(view: McpServerView): { badge: PresentedServerRow['badge']; tone: BadgeTone } {
+  // A leftover namespace (foreign mcp__ tools, no loader row) is unconfigured,
+  // not disabled: its config facts do not exist, so it reads "unknown".
+  if (view.entryId === '') return { badge: 'unknown', tone: 'muted' }
+  if (!view.enabled) return { badge: 'disabled', tone: 'muted' }
+  if (view.fiberPhase === 'failed') return { badge: 'failed', tone: 'error' }
+  switch (view.phase) {
+    case 'connected': return { badge: 'connected', tone: 'ok' }
+    case 'connecting':
+    case 'waiting': return { badge: view.phase, tone: 'warn' }
+    case 'exhausted': return { badge: 'exhausted', tone: 'error' }
+    case 'disposed': return { badge: 'disposed', tone: 'muted' }
+    default: return { badge: 'unknown', tone: 'muted' }
+  }
+}
+
+/** Badge for one probe state. */
+export function probeBadge(status: McpProbeView['status']): { badge: PresentedProbeRow['badge']; tone: BadgeTone } {
+  switch (status) {
+    case 'completed': return { badge: 'completed', tone: 'ok' }
+    case 'running': return { badge: 'running', tone: 'warn' }
+    case 'stopping': return { badge: 'stopping', tone: 'warn' }
+    case 'failed': return { badge: 'failed', tone: 'error' }
+    case 'killed': return { badge: 'killed', tone: 'muted' }
+  }
+}
+
+/**
+ * Project the wire snapshot onto render-ready rows.
+ *
+ * @param snapshot - the `mcpPanel/status` value.
+ * @param now - epoch ms anchor for age computations (keeps the fold pure).
+ * @returns the tab model.
+ */
+export function presentMcpPanel(snapshot: McpPanelSnapshot, now = Date.now()): PresentedMcpPanel {
+  const servers = snapshot.servers.map((view): PresentedServerRow => {
+    const { badge, tone } = connectionBadge(view)
+    return {
+      view,
+      badge,
+      tone,
+      hasError: view.lastError !== null && view.lastError !== '',
+      reconnects: view.reconnectCount < 0 ? null : view.reconnectCount,
+      ageSeconds: view.observedAt === null ? null : Math.max(0, Math.floor((now - view.observedAt) / 1000)),
+      hasAttemptBudget: view.attempt >= 0 || view.maxAttempts > 0,
+    }
+  })
+  const probes = snapshot.probes.map((view): PresentedProbeRow => {
+    const { badge, tone } = probeBadge(view.status)
+    return { view, badge, tone }
+  })
+  return {
+    servers,
+    probes,
+    empty: snapshot.servers.length === 0,
+    observed: snapshot.observed,
+    patchFile: snapshot.patchFile,
+    refreshIntervalMs: snapshot.refreshIntervalMs,
+  }
+}

package/src/client/remote.ts

@@ -0,0 +1,35 @@
+/**
+ * The client-side Remote face of the `mcpPanel` namespace: the hand-written
+ * `TypertRemoteContribution` mounted through `ctx.remote.$mount`, plus the
+ * declaration merging that types `ctx.remote.mcpPanel`. The descriptor list
+ * is shared with the host `./typert` manifest (`../wire.ts`), so the two
+ * faces can never drift.
+ *
+ * @module dsh-mcp-panel/client/remote
+ */
+
+import type { RemoteResult, TypertRemoteContribution } from '@deepseek-ai/dsh-typert-protocol'
+import { MCP_PANEL_INVOCATIONS } from '../wire.ts'
+import type { McpPanelSnapshot, ProbeStarted } from '../wire.ts'
+
+declare module '@deepseek-ai/dsh-typert-protocol' {
+  interface TypertRemoteNamespace$mcpPanel {
+    /** Read the current read-only MCP snapshot. */
+    status: () => Promise<RemoteResult<McpPanelSnapshot>>
+    /** Start a one-shot connectivity probe of one streamable-http server. */
+    probe: (serverName: string) => Promise<RemoteResult<ProbeStarted>>
+  }
+  interface TypertRemoteMap {
+    'mcpPanel/status': () => Promise<RemoteResult<McpPanelSnapshot>>
+    'mcpPanel/probe': (serverName: string) => Promise<RemoteResult<ProbeStarted>>
+  }
+  interface TypertRemoteNamespaceMap {
+    mcpPanel: TypertRemoteNamespace$mcpPanel
+  }
+}
+
+/** The client Remote contribution for the `mcpPanel` namespace. */
+export const MCP_PANEL_REMOTE = Object.freeze({
+  package: 'dsh-mcp-panel',
+  descriptors: MCP_PANEL_INVOCATIONS,
+} satisfies TypertRemoteContribution)

package/src/client/styles.ts

@@ -0,0 +1,235 @@
+/**
+ * Scoped stylesheet for the MCP tab. Standalone client bundles cannot use the
+ * in-repo CSS-module pipeline, so the sheet ships as a string and is
+ * installed effect-scoped into a `<style data-dsh-mcp-panel>` element.
+ * Every selector is scoped under `[data-dsh-mcp-panel]` and uses theme
+ * design tokens only, so it follows both color schemes.
+ *
+ * @module dsh-mcp-panel/client/styles
+ */
+
+/** One `<style>` installation; returns the exact disposer that removes it. */
+export function installPanelStyles(): () => void {
+  const existing = document.querySelector('style[data-dsh-mcp-panel]')
+  if (existing !== null) return () => {}
+  const element = document.createElement('style')
+  element.dataset.dshMcpPanel = ''
+  element.textContent = PANEL_CSS
+  document.head.append(element)
+  return () => { element.remove() }
+}
+
+/** The panel stylesheet, scoped and token-driven. */
+const PANEL_CSS = `
+[data-dsh-mcp-panel] .dmcp-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+[data-dsh-mcp-panel] .dmcp-status {
+  color: var(--dsw-alias-label-secondary);
+  margin: 0;
+}
+[data-dsh-mcp-panel] .dmcp-failure {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+[data-dsh-mcp-panel] .dmcp-failure button {
+  font: inherit;
+  cursor: pointer;
+}
+[data-dsh-mcp-panel] .dmcp-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+[data-dsh-mcp-panel] .dmcp-heading {
+  margin: 4px 0 0;
+  font-size: 1em;
+  color: var(--dsw-alias-label-primary);
+}
+[data-dsh-mcp-panel] .dmcp-cards {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+[data-dsh-mcp-panel] .dmcp-card {
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1);
+  overflow: hidden;
+}
+[data-dsh-mcp-panel] .dmcp-card-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  font: inherit;
+  text-align: left;
+  background: none;
+  border: 0;
+  color: var(--dsw-alias-label-primary);
+  padding: 10px 12px;
+  cursor: pointer;
+}
+[data-dsh-mcp-panel] .dmcp-card-content:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
+}
+[data-dsh-mcp-panel] .dmcp-tool-filter {
+  font: inherit;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+[data-dsh-mcp-panel] .dmcp-probe-now {
+  align-self: flex-start;
+  font: inherit;
+  cursor: pointer;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: 4px;
+  padding: 4px 10px;
+}
+[data-dsh-mcp-panel] .dmcp-probe-now:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
+}
+[data-dsh-mcp-panel] .dmcp-probe-now:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+[data-dsh-mcp-panel] .dmcp-card-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-dsh-mcp-panel] .dmcp-card-trailing {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+[data-dsh-mcp-panel] .dmcp-tool-count {
+  color: var(--dsw-alias-label-secondary);
+  white-space: nowrap;
+}
+[data-dsh-mcp-panel] .dmcp-card-details {
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+[data-dsh-mcp-panel] .dmcp-details {
+  margin: 0;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 4px 12px;
+}
+[data-dsh-mcp-panel] .dmcp-details dt {
+  color: var(--dsw-alias-label-secondary);
+}
+[data-dsh-mcp-panel] .dmcp-details dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+  min-width: 0;
+  color: var(--dsw-alias-label-primary);
+}
+[data-dsh-mcp-panel] .dmcp-error-text {
+  color: var(--dsw-alias-state-error-primary);
+}
+[data-dsh-mcp-panel] .dmcp-target {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-secondary);
+}
+[data-dsh-mcp-panel] .dmcp-tools {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+[data-dsh-mcp-panel] .dmcp-tools li {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+[data-dsh-mcp-panel] .dmcp-tool-description {
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+}
+[data-dsh-mcp-panel] .dmcp-derived-note,
+[data-dsh-mcp-panel] .dmcp-patch-hint {
+  color: var(--dsw-alias-label-secondary);
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+[data-dsh-mcp-panel] .dmcp-probes {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+[data-dsh-mcp-panel] .dmcp-probe {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+[data-dsh-mcp-panel] .dmcp-probe-time {
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}
+[data-dsh-mcp-panel] .dmcp-probe-detail {
+  color: var(--dsw-alias-label-secondary);
+  overflow-wrap: anywhere;
+  flex: 1 1 100%;
+}
+[data-dsh-mcp-panel] .dmcp-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 0.85em;
+  white-space: nowrap;
+  border: 1px solid currentColor;
+}
+[data-dsh-mcp-panel] .dmcp-badge[data-tone='ok'] {
+  color: var(--dsw-alias-state-success-primary);
+}
+[data-dsh-mcp-panel] .dmcp-badge[data-tone='warn'] {
+  color: var(--dsw-alias-state-warn-primary);
+}
+[data-dsh-mcp-panel] .dmcp-badge[data-tone='error'] {
+  color: var(--dsw-alias-state-error-primary);
+}
+[data-dsh-mcp-panel] .dmcp-badge[data-tone='muted'] {
+  color: var(--dsw-alias-label-tertiary);
+}
+[data-dsh-mcp-panel] .dmcp-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+}
+`