dsh-plugin-capabilities 0.1.5 → 0.2.0

package/src/client/MarketTab.tsx

@@ -0,0 +1,263 @@
+/** Settings “市场” tab: browse and install curated skill repositories and
+ * MCP servers. Two segments (skills / MCP) with independently fetched
+ * indexes; installs reuse the repositories and MCP-row plumbing, so a
+ * skills install lands live in the catalog and an MCP install raises the
+ * same pending-restart notice as the MCP tab. */
+
+import { useCallback, useEffect, useState } from 'react'
+import type { ReactElement } from 'react'
+import { Button, IconRefreshOutline14, Modal, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
+import { CSS } from './css.ts'
+import type { MarketRepoView, MarketServerView, Translate } from './index.ts'
+import type { McpInjected } from './McpTab.tsx'
+
+/** One registered skill repository as the roots route reports it. */
+export interface RootRowView {
+  id: string
+  kind: 'local' | 'git'
+  label: string
+  url?: string
+  ref?: string
+  path?: string
+  roots: string[]
+  materialDir?: string
+  addedAt: number
+  /** False once one of its scan roots vanished from disk. */
+  live: boolean
+}
+
+export interface MarketInjected {
+  skillsIndex(): Promise<{ source: 'remote' | 'bundled'; repos: Array<MarketRepoView & { installedId: string | null }> }>
+  mcpIndex(): Promise<{ source: 'remote' | 'bundled'; servers: Array<MarketServerView & { installed: boolean }> }>
+  installSkillRepo(url: string): Promise<{ ok: boolean; root: RootRowView }>
+  installMcp(id: string): Promise<{ ok: boolean; id: string }>
+  removeRoot(id: string): Promise<{ ok: boolean }>
+}
+
+/** UI language hint for the index's zh display fields. */
+const zhUi = (): boolean => navigator.language.toLowerCase().startsWith('zh')
+
+type Segment = 'skills' | 'mcp'
+
+export function MarketTab(props: { t: Translate; market: MarketInjected; mcp: McpInjected }): ReactElement {
+  const { t, market, mcp } = props
+  const [segment, setSegment] = useState<Segment>('skills')
+  const [repos, setRepos] = useState<Array<MarketRepoView & { installedId: string | null }> | null>(null)
+  const [servers, setServers] = useState<Array<MarketServerView & { installed: boolean }> | null>(null)
+  const [source, setSource] = useState<'remote' | 'bundled'>('remote')
+  const [busyId, setBusyId] = useState<string | null>(null)
+  const [outcome, setOutcome] = useState<{ ok: boolean; text: string } | null>(null)
+  const [confirmUninstall, setConfirmUninstall] = useState<{ kind: 'root' | 'mcp'; id: string; name: string } | null>(null)
+  const [reload, setReload] = useState(0)
+
+  const refreshSkills = useCallback((): void => {
+    setRepos(null)
+    void market.skillsIndex().then(
+      (body) => { setRepos(body.repos); setSource(body.source) },
+      (error: Error) => { setRepos([]); setOutcome({ ok: false, text: `${t('failed')}: ${String(error.message ?? error)}` }) },
+    )
+  }, [market, t])
+
+  const refreshMcp = useCallback((): void => {
+    setServers(null)
+    void market.mcpIndex().then(
+      (body) => { setServers(body.servers); setSource(body.source) },
+      (error: Error) => { setServers([]); setOutcome({ ok: false, text: `${t('failed')}: ${String(error.message ?? error)}` }) },
+    )
+  }, [market, t])
+
+  useEffect(() => {
+    // Refetch the visible segment when it changes or the reload ticks; the
+    // hidden segment keeps its last state as a cache.
+    if (segment === 'skills') refreshSkills()
+    else refreshMcp()
+  }, [segment, reload, refreshSkills, refreshMcp])
+
+  const doInstallRepo = async (repo: MarketRepoView): Promise<void> => {
+    setBusyId(repo.id)
+    setOutcome(null)
+    try {
+      await market.installSkillRepo(repo.url)
+      setOutcome({ ok: true, text: t('marketRepoInstalled') })
+      refreshSkills()
+    } catch (error) {
+      setOutcome({ ok: false, text: `${t('failed')}: ${String(error instanceof Error ? error.message : error)}` })
+      refreshSkills()
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  const doInstallMcp = async (server: MarketServerView): Promise<void> => {
+    setBusyId(server.id)
+    setOutcome(null)
+    try {
+      await market.installMcp(server.id)
+      setOutcome({ ok: true, text: t('restartNeeded') })
+      refreshMcp()
+    } catch (error) {
+      setOutcome({ ok: false, text: `${t('failed')}: ${String(error instanceof Error ? error.message : error)}` })
+      refreshMcp()
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  const doUninstall = async (): Promise<void> => {
+    if (confirmUninstall === null) return
+    const target = confirmUninstall
+    setBusyId(target.id)
+    try {
+      if (target.kind === 'root') {
+        await market.removeRoot(target.id)
+        setOutcome({ ok: true, text: t('rootRemoved') })
+        refreshSkills()
+      } else {
+        await mcp.remove(target.id)
+        setOutcome({ ok: true, text: t('restartNeeded') })
+        refreshMcp()
+      }
+    } catch (error) {
+      setOutcome({ ok: false, text: `${t('failed')}: ${String(error instanceof Error ? error.message : error)}` })
+    } finally {
+      setBusyId(null)
+      setConfirmUninstall(null)
+    }
+  }
+
+  const pick = <T,>(base: T, zh: T | undefined): T => (zhUi() && zh !== undefined ? zh : base)
+  const title = (entry: { name: string; nameZh?: string }): string => pick(entry.name, entry.nameZh)
+  const desc = (entry: { description: string; descriptionZh?: string }): string => pick(entry.description, entry.descriptionZh)
+
+  return (
+    <div className="dpc-section">
+      <style>{CSS}</style>
+
+      <div className="dpc-head">
+        <h3>{t('marketTitle')}</h3>
+        <span className="dpc-spacer" />
+        <button type="button" className="dpc-refresh" aria-label={t('refresh')} title={t('refresh')} onClick={() => setReload((value) => value + 1)}>
+          <IconRefreshOutline14 size={14} aria-hidden="true" />
+        </button>
+      </div>
+      <p className="dpc-intro">{t('marketIntro')}</p>
+
+      <div className="dpc-segments" role="tablist" aria-label={t('marketTitle')}>
+        <button type="button" role="tab" aria-selected={segment === 'skills'} className="dpc-segment" data-active={segment === 'skills' ? 'true' : undefined} onClick={() => setSegment('skills')}>
+          {t('marketSkills')}
+        </button>
+        <button type="button" role="tab" aria-selected={segment === 'mcp'} className="dpc-segment" data-active={segment === 'mcp' ? 'true' : undefined} onClick={() => setSegment('mcp')}>
+          {t('marketMcp')}
+        </button>
+      </div>
+
+      {outcome !== null && (
+        <div className="dpc-banner" data-kind={outcome.ok ? 'ok' : 'error'} role="status">
+          <StateDot state={outcome.ok ? 'done' : 'error'} size={10} />
+          <div className="dpc-bannerBody"><span>{outcome.text}</span></div>
+        </div>
+      )}
+      {source === 'bundled' && (
+        <div className="dpc-banner" data-kind="info" role="status">
+          <StateDot state="ongoing" size={10} />
+          <div className="dpc-bannerBody"><span>{t('marketOffline')}</span></div>
+        </div>
+      )}
+
+      {segment === 'skills' && (
+        <>
+          <p className="dpc-intro">{t('marketSkillsIntro')}</p>
+          {repos === null && <p className="dpc-empty">{t('loading')}</p>}
+          {repos !== null && repos.length === 0 && <p className="dpc-empty">{t('marketEmpty')}</p>}
+          {repos !== null && repos.length > 0 && (
+            <ul className="dpc-cards">
+              {repos.map((repo) => (
+                <li className="dpc-card" key={repo.id}>
+                  <div className="dpc-cardTop">
+                    <strong className="dpc-cardTitle" title={repo.url}>{title(repo)}</strong>
+                    {repo.skillCount !== undefined && <span className="dpc-tag">{t('marketSkillCount').replace('{n}', String(repo.skillCount))}</span>}
+                    {repo.installedId !== null && <span className="dpc-tag" data-kind="source">{t('marketInstalled')}</span>}
+                  </div>
+                  <p className="dpc-cardDesc">{desc(repo)}</p>
+                  <div className="dpc-cardRow">
+                    <a className="dpc-link" href={repo.homepage ?? repo.url} target="_blank" rel="noreferrer">{t('marketHome')}</a>
+                    <span className="dpc-spacer" />
+                    {repo.installedId !== null ? (
+                      <Button variant="ghost" size="sm" disabled={busyId !== null} onClick={() => setConfirmUninstall({ kind: 'root', id: repo.installedId as string, name: title(repo) })}>
+                        {t('marketUninstall')}
+                      </Button>
+                    ) : (
+                      <Button variant="primary" size="sm" disabled={busyId !== null} onClick={() => void doInstallRepo(repo)}>
+                        {busyId === repo.id ? t('marketInstalling') : t('marketInstall')}
+                      </Button>
+                    )}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </>
+      )}
+
+      {segment === 'mcp' && (
+        <>
+          <p className="dpc-intro">{t('marketMcpIntro')}</p>
+          {servers === null && <p className="dpc-empty">{t('loading')}</p>}
+          {servers !== null && servers.length === 0 && <p className="dpc-empty">{t('marketEmpty')}</p>}
+          {servers !== null && servers.length > 0 && (
+            <ul className="dpc-cards">
+              {servers.map((server) => (
+                <li className="dpc-card" key={server.id}>
+                  <div className="dpc-cardTop">
+                    <strong className="dpc-cardTitle" title={server.id}>{title(server)}</strong>
+                    <span className="dpc-tag">{server.transport}</span>
+                    {server.runtime !== undefined && <span className="dpc-tag">{server.runtime}</span>}
+                    {server.installed && <span className="dpc-tag" data-kind="source">{t('marketInstalled')}</span>}
+                  </div>
+                  <p className="dpc-cardDesc">{desc(server)}</p>
+                  {server.envKeys !== undefined && server.envKeys.length > 0 && (
+                    <p className="dpc-envHint">{t('marketNeedsEnv')}: {server.envKeys.join(', ')}</p>
+                  )}
+                  <div className="dpc-cardRow">
+                    <a className="dpc-link" href={server.homepage} target="_blank" rel="noreferrer">{t('marketHome')}</a>
+                    <span className="dpc-spacer" />
+                    {server.installed ? (
+                      <Button variant="ghost" size="sm" disabled={busyId !== null} onClick={() => void mcp.list().then(
+                        (body) => {
+                          const row = body.servers.find(item => item.serverName === server.id)
+                          if (row !== undefined) setConfirmUninstall({ kind: 'mcp', id: row.id, name: server.id })
+                        },
+                        (error: Error) => setOutcome({ ok: false, text: `${t('failed')}: ${String(error.message ?? error)}` }),
+                      )}>
+                        {t('marketUninstall')}
+                      </Button>
+                    ) : (
+                      <Button variant="primary" size="sm" disabled={busyId !== null} onClick={() => void doInstallMcp(server)}>
+                        {busyId === server.id ? t('marketInstalling') : t('marketAdd')}
+                      </Button>
+                    )}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </>
+      )}
+
+      <Modal
+        open={confirmUninstall !== null}
+        onClose={() => setConfirmUninstall(null)}
+        title={t('marketUninstallConfirm')}
+        description={confirmUninstall?.name ?? undefined}
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setConfirmUninstall(null)}>{t('cancel')}</Button>
+            <Button variant="primary" disabled={busyId !== null} onClick={() => void doUninstall()}>{t('marketUninstall')}</Button>
+          </>
+        }
+      >
+        <p>{confirmUninstall?.kind === 'root' ? t('marketUninstallRootWarn') : t('removeWarn')}</p>
+      </Modal>
+    </div>
+  )
+}

package/src/client/McpTab.tsx

@@ -82,6 +82,128 @@ function mapToPairs(map: Record<string, string> | undefined, separator: string):
   return Object.entries(map).map(([key, value]) => `${key}${separator}${value.includes('\n') ? JSON.stringify(value) : value}`).join('\n')
 }
 
+/** YAML double-quoted scalar (JSON syntax is valid YAML); plain for simple ids. */
+function yamlScalar(value: string): string {
+  return /^[A-Za-z0-9_./@-]+$/.test(value) ? value : JSON.stringify(value)
+}
+
+/** Shape the profile patch row exactly as the host would persist it (preview). */
+export function mcpRowYaml(input: { serverName: string; transport: 'stdio' | 'streamable-http'; command?: string; args?: string[]; env?: Record<string, string>; url?: string; headers?: Record<string, string> }): string {
+  const name = input.serverName.trim() === '' ? 'server-name' : input.serverName.trim()
+  const lines = [
+    '- insert:',
+    `    - id: mcp-${name}`,
+    "      name: '@deepseek-ai/dsh-mcp-client'",
+    '      config:',
+    `        serverName: ${yamlScalar(name)}`,
+    `        transport: ${input.transport}`,
+  ]
+  if (input.transport === 'stdio') {
+    lines.push(`        command: ${yamlScalar(input.command ?? '')}`)
+    const args = input.args ?? []
+    if (args.length > 0) {
+      lines.push('        args:')
+      for (const arg of args) lines.push(`          - ${yamlScalar(arg)}`)
+    }
+    const env = input.env ?? {}
+    if (Object.keys(env).length > 0) {
+      lines.push('        env:')
+      for (const [key, value] of Object.entries(env)) lines.push(`          ${yamlScalar(key)}: ${yamlScalar(value)}`)
+    }
+  } else {
+    lines.push(`        url: ${yamlScalar(input.url ?? '')}`)
+    const headers = input.headers ?? {}
+    if (Object.keys(headers).length > 0) {
+      lines.push('        headers:')
+      for (const [key, value] of Object.entries(headers)) lines.push(`          ${yamlScalar(key)}: ${yamlScalar(value)}`)
+    }
+  }
+  return lines.join('\n')
+}
+
+/** The equivalent mcpServers JSON a foreign config or docs page would show. */
+export function mcpJsonExample(transport: 'stdio' | 'streamable-http'): string {
+  const entry = transport === 'stdio'
+    ? {
+        command: 'npx',
+        args: ['-y', '@example/mcp-server'],
+        env: { API_KEY: 'value' },
+      }
+    : {
+        type: 'http',
+        url: 'https://example.com/mcp',
+        headers: { Authorization: 'Bearer <token>' },
+      }
+  return JSON.stringify({ mcpServers: { 'server-name': entry } }, null, 2)
+}
+
+/** Fields parsed out of a pasted MCP JSON config (any common shape). */
+export interface ParsedMcpJson {
+  serverName?: string
+  transport: 'stdio' | 'streamable-http'
+  command?: string
+  args?: string[]
+  env?: Record<string, string>
+  url?: string
+  headers?: Record<string, string>
+}
+
+/** Parse one MCP server from pasted JSON: a bare entry, a dsh row, or a
+ *  `{"mcpServers": {…}}` wrapper (first entry wins). Returns the reason on bad input. */
+export function parseMcpJson(text: string): ParsedMcpJson | { error: string } {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(text)
+  } catch {
+    return { error: 'not valid JSON' }
+  }
+  if (typeof parsed !== 'object' || parsed === null) return { error: 'expected a JSON object' }
+  let record = parsed as Record<string, unknown>
+  let nameFromWrapper: string | undefined
+  const wrapped = record.mcpServers ?? record.mcp_servers ?? record.servers
+  if (typeof wrapped === 'object' && wrapped !== null && !Array.isArray(wrapped)) {
+    const first = Object.entries(wrapped as Record<string, unknown>)[0]
+    if (first === undefined) return { error: 'mcpServers object is empty' }
+    nameFromWrapper = first[0]
+    if (typeof first[1] !== 'object' || first[1] === null) return { error: 'server entry is not an object' }
+    record = first[1] as Record<string, unknown>
+  }
+  const stringMap = (value: unknown): Record<string, string> | undefined => {
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) return undefined
+    const out: Record<string, string> = {}
+    for (const [key, entry] of Object.entries(value)) {
+      if (typeof entry === 'string') out[key] = entry
+    }
+    return Object.keys(out).length > 0 ? out : undefined
+  }
+  const args = Array.isArray(record.args) && record.args.every(entry => typeof entry === 'string')
+    ? record.args as string[]
+    : undefined
+  const command = typeof record.command === 'string' ? record.command : undefined
+  const url = typeof record.url === 'string' ? record.url : undefined
+  const declared = typeof record.type === 'string' ? record.type : typeof record.transport === 'string' ? record.transport : undefined
+  const httpDeclared = declared === 'http' || declared === 'streamable-http' || declared === 'sse'
+  const transport: 'stdio' | 'streamable-http' = command !== undefined && !httpDeclared
+    ? 'stdio'
+    : url !== undefined ? 'streamable-http' : httpDeclared ? 'streamable-http' : 'stdio'
+  if (transport === 'stdio' && command === undefined) return { error: 'stdio config needs a "command" field' }
+  if (transport === 'streamable-http' && url === undefined) return { error: 'http config needs a "url" field' }
+  const serverName = nameFromWrapper
+    ?? (typeof record.serverName === 'string' ? record.serverName : undefined)
+    ?? (typeof record.name === 'string' && record.name !== '@deepseek-ai/dsh-mcp-client' ? record.name : undefined)
+  const env = stringMap(record.env)
+  const headers = stringMap(record.headers)
+  return {
+    ...(serverName !== undefined ? { serverName } : {}),
+    transport,
+    ...(command !== undefined ? { command } : {}),
+    ...(args !== undefined ? { args } : {}),
+    ...(env !== undefined ? { env } : {}),
+    ...(url !== undefined ? { url } : {}),
+    ...(headers !== undefined ? { headers } : {}),
+  }
+}
+
 export function McpTab(props: { t: Translate; injected: McpInjected }): ReactElement {
   const { t, injected } = props
   const [servers, setServers] = useState<McpRow[] | null>(null)
@@ -96,6 +218,8 @@ export function McpTab(props: { t: Translate; injected: McpInjected }): ReactEle
   const [outcome, setOutcome] = useState<{ ok: boolean; text: string } | null>(null)
   const [formError, setFormError] = useState<string | null>(null)
   const [reload, setReload] = useState(0)
+  const [pasteJson, setPasteJson] = useState('')
+  const [pasteError, setPasteError] = useState<string | null>(null)
 
   const openImport = async (): Promise<void> => {
     setImportOpen(true)
@@ -150,11 +274,15 @@ export function McpTab(props: { t: Translate; injected: McpInjected }): ReactEle
 
   const openCreate = (): void => {
     setFormError(null)
+    setPasteError(null)
+    setPasteJson('')
     setEditor({ id: '', serverName: '', transport: 'stdio', command: '', args: '', env: '', url: '', headers: '' })
   }
 
   const openEdit = (row: McpRow): void => {
     setFormError(null)
+    setPasteError(null)
+    setPasteJson('')
     setEditor({
       id: row.id,
       serverName: row.serverName,
@@ -167,6 +295,40 @@ export function McpTab(props: { t: Translate; injected: McpInjected }): ReactEle
     })
   }
 
+  /** Fill the form from pasted JSON (mcpServers wrapper, bare entry, dsh row). */
+  const doPasteFill = (): void => {
+    if (editor === null || pasteJson.trim() === '') return
+    const parsed = parseMcpJson(pasteJson)
+    if ('error' in parsed) {
+      setPasteError(parsed.error)
+      return
+    }
+    // Existing rows keep their identity (serverName + transport); a pasted
+    // config of the other transport cannot apply to them.
+    const lockIdentity = editor.id !== ''
+    if (lockIdentity && parsed.transport !== editor.transport) {
+      setPasteError(t('pasteTransportMismatch'))
+      return
+    }
+    setPasteError(null)
+    setFormError(null)
+    setEditor({
+      ...editor,
+      ...(parsed.serverName !== undefined && !lockIdentity ? { serverName: parsed.serverName } : {}),
+      ...(!lockIdentity ? { transport: parsed.transport } : {}),
+      ...(parsed.transport === 'stdio'
+        ? {
+            command: parsed.command ?? editor.command,
+            args: (parsed.args ?? []).join('\n'),
+            env: mapToPairs(parsed.env, '='),
+          }
+        : {
+            url: parsed.url ?? editor.url,
+            headers: mapToPairs(parsed.headers, ':'),
+          }),
+    })
+  }
+
   const doSave = async (): Promise<void> => {
     if (editor === null) return
     setBusy(true)
@@ -373,6 +535,42 @@ export function McpTab(props: { t: Translate; injected: McpInjected }): ReactEle
                 </label>
               </>
             )}
+            <details className="dpc-format">
+              <summary>{t('formatTitle')}</summary>
+              <div className="dpc-form">
+                <label className="dpc-label">
+                  <span>{t('formatPaste')}</span>
+                  <textarea
+                    className="dpc-textarea"
+                    data-short="true"
+                    placeholder={'{\n  "mcpServers": { "name": { "command": "npx", "args": ["…"] } } }\n'}
+                    value={pasteJson}
+                    onChange={(event) => setPasteJson(event.target.value)}
+                  />
+                </label>
+                {pasteError !== null && <p className="dpc-formError">{pasteError}</p>}
+                <div className="dpc-cardRow">
+                  <Button variant="outline" size="sm" disabled={pasteJson.trim() === ''} onClick={doPasteFill}>{t('formatFill')}</Button>
+                </div>
+                <p className="dpc-formatHint">{t('formatYamlHint')}</p>
+                <pre className="dpc-code">{mcpRowYaml({
+                  serverName: editor.serverName,
+                  transport: editor.transport,
+                  ...(editor.transport === 'stdio'
+                    ? {
+                        command: editor.command.trim(),
+                        args: editor.args.split(/\r?\n/).map(line => line.trim()).filter(line => line !== ''),
+                        env: parsePairs(editor.env, '='),
+                      }
+                    : {
+                        url: editor.url.trim(),
+                        headers: parsePairs(editor.headers, ':'),
+                      }),
+                })}</pre>
+                <p className="dpc-formatHint">{t('formatJsonHint')}</p>
+                <pre className="dpc-code">{mcpJsonExample(editor.transport)}</pre>
+              </div>
+            </details>
             {formError !== null && <p className="dpc-formError">{formError}</p>}
             <div className="dpc-cardRow">
               <span className="dpc-spacer" />