dsh-plugin-capabilities 0.1.0

package/src/client/SkillsTab.tsx

@@ -0,0 +1,301 @@
+/** Settings → Plugins “技能/Skills” tab: view the discovered catalog, edit the
+ * user-owned root. Pure presentation-layer — data arrives through props. */
+
+import { useEffect, useState } from 'react'
+import type { ReactElement } from 'react'
+import { Button, IconRefreshOutline14, IconSkillOutline16, Modal, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
+import { CSS } from './css.ts'
+import type { Translate } from './index.ts'
+
+/** One skill as the host reports it (plus the editable flag the route adds). */
+export interface SkillRowView {
+  name: string
+  description: string
+  whenToUse?: string
+  invocation: { modelInvocable: boolean; userInvocable: boolean }
+  source: string
+  provider: string
+  editable: boolean
+}
+
+export interface SkillsInjected {
+  list(): Promise<{ skills: SkillRowView[] }>
+  get(name: string): Promise<{ content: string }>
+  save(input: { name: string; description: string; whenToUse?: string; modelInvocable: boolean; userInvocable: boolean; content: string }): Promise<{ ok: boolean }>
+  remove(name: string): Promise<{ ok: boolean }>
+}
+
+/** Editor dialog state; null when closed. */
+interface EditorState {
+  mode: 'create' | 'edit' | 'view'
+  name: string
+  description: string
+  whenToUse: string
+  modelInvocable: boolean
+  userInvocable: boolean
+  content: string
+}
+
+const SOURCE_KEYS: Record<string, string> = {
+  'project-dsh': 'sourceProjectDsh',
+  'project-agents': 'sourceProjectAgents',
+  'user-dsh': 'sourceUserDsh',
+  'user-agents': 'sourceUserAgents',
+  runtime: 'sourceRuntime',
+  bundled: 'sourceBundled',
+  custom: 'sourceCustom',
+}
+
+export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): ReactElement {
+  const { t, injected } = props
+  const [skills, setSkills] = useState<SkillRowView[] | null>(null)
+  const [editor, setEditor] = useState<EditorState | null>(null)
+  const [confirmName, setConfirmName] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [outcome, setOutcome] = useState<{ ok: boolean; text: string } | null>(null)
+  const [formError, setFormError] = useState<string | null>(null)
+  const [reload, setReload] = useState(0)
+
+  useEffect(() => {
+    let current = true
+    void injected.list().then(
+      (body) => { if (current) setSkills(body.skills) },
+      (error: Error) => { if (current) { setSkills([]); setOutcome({ ok: false, text: `${t('failed')}: ${String(error.message ?? error)}` }) } },
+    )
+    return () => { current = false }
+  }, [injected, reload, t])
+
+  const openCreate = (): void => {
+    setFormError(null)
+    setEditor({ mode: 'create', name: '', description: '', whenToUse: '', modelInvocable: true, userInvocable: true, content: '' })
+  }
+
+  const openExisting = async (skill: SkillRowView): Promise<void> => {
+    setBusy(true)
+    setFormError(null)
+    try {
+      const body = await injected.get(skill.name)
+      setEditor({
+        mode: skill.editable ? 'edit' : 'view',
+        name: skill.name,
+        description: skill.description,
+        whenToUse: skill.whenToUse ?? '',
+        modelInvocable: skill.invocation.modelInvocable,
+        userInvocable: skill.invocation.userInvocable,
+        content: body.content,
+      })
+    } catch (error) {
+      setOutcome({ ok: false, text: `${t('failed')}: ${String(error instanceof Error ? error.message : error)}` })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  /**
+   * After a write/delete, the watched directory takes a moment to invalidate
+   * the catalog — poll until the change is visible (bounded), then stop.
+   */
+  const refreshUntil = (predicate: (skills: SkillRowView[]) => boolean, timeoutMs = 10_000): void => {
+    const deadline = Date.now() + timeoutMs
+    const tick = (): void => {
+      if (Date.now() > deadline) return
+      setTimeout(() => {
+        void injected.list().then(
+          (body) => {
+            setSkills(body.skills)
+            if (!predicate(body.skills)) tick()
+          },
+          () => tick(),
+        )
+      }, 1000)
+    }
+    tick()
+  }
+
+  const doSave = async (): Promise<void> => {
+    if (editor === null) return
+    setBusy(true)
+    setFormError(null)
+    try {
+      const name = editor.name.trim()
+      await injected.save({
+        name,
+        description: editor.description,
+        whenToUse: editor.whenToUse.trim() === '' ? undefined : editor.whenToUse,
+        modelInvocable: editor.modelInvocable,
+        userInvocable: editor.userInvocable,
+        content: editor.content,
+      })
+      setOutcome({ ok: true, text: t('saved') })
+      setEditor(null)
+      refreshUntil(skills => skills.some(skill => skill.name === name))
+    } catch (error) {
+      setFormError(String(error instanceof Error ? error.message : error))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const doDelete = async (): Promise<void> => {
+    if (confirmName === null) return
+    const name = confirmName
+    setBusy(true)
+    try {
+      await injected.remove(name)
+      setOutcome({ ok: true, text: t('saved') })
+      refreshUntil(skills => !skills.some(skill => skill.name === name))
+    } catch (error) {
+      setOutcome({ ok: false, text: `${t('failed')}: ${String(error instanceof Error ? error.message : error)}` })
+    } finally {
+      setBusy(false)
+      setConfirmName(null)
+    }
+  }
+
+  const readOnly = editor?.mode === 'view'
+
+  return (
+    <div className="dpc-section">
+      <style>{CSS}</style>
+
+      <div className="dpc-head">
+        <IconSkillOutline16 aria-hidden="true" />
+        <h3>{t('skillsTitle')}</h3>
+        <span className="dpc-spacer" />
+        <Button variant="primary" size="sm" onClick={openCreate}>{t('newSkill')}</Button>
+      </div>
+      <p className="dpc-intro">{t('skillsIntro')}</p>
+
+      {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>
+      )}
+
+      <div className="dpc-listHead">
+        <h3>{t('skillsTab')}</h3>
+        {skills !== null && <span className="dpc-count">{skills.length}</span>}
+        <span className="dpc-spacer" />
+        <button type="button" className="dpc-refresh" aria-label={t('view')} title={t('view')} disabled={busy} onClick={() => setReload((value) => value + 1)}>
+          <IconRefreshOutline14 size={14} aria-hidden="true" />
+        </button>
+      </div>
+
+      {skills === null && <p className="dpc-empty">{t('loading')}</p>}
+      {skills !== null && skills.length === 0 && <p className="dpc-empty">{t('emptySkills')}</p>}
+      {skills !== null && skills.length > 0 && (
+        <ul className="dpc-cards">
+          {skills.map((skill) => (
+            <li className="dpc-card" key={`${skill.source}/${skill.name}`}>
+              <div className="dpc-cardTop">
+                <strong className="dpc-cardTitle" title={skill.name}>{skill.name}</strong>
+                <span className="dpc-tag" data-kind="source">{t(SOURCE_KEYS[skill.source] ?? 'sourceCustom')}</span>
+              </div>
+              <p className="dpc-cardDesc" title={skill.description}>{skill.description}</p>
+              <div className="dpc-cardRow">
+                {!skill.invocation.modelInvocable && <span className="dpc-tag">⚙</span>}
+                {!skill.invocation.userInvocable && <span className="dpc-tag">/</span>}
+                <span className="dpc-spacer" />
+                <Button variant="ghost" size="sm" disabled={busy} onClick={() => void openExisting(skill)}>
+                  {skill.editable ? t('edit') : t('view')}
+                </Button>
+                {skill.editable && (
+                  <Button variant="ghost" size="sm" disabled={busy} onClick={() => setConfirmName(skill.name)}>{t('delete')}</Button>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <Modal
+        open={editor !== null}
+        onClose={() => setEditor(null)}
+        title={editor === null ? '' : editor.mode === 'create' ? t('newSkill') : editor.mode === 'edit' ? t('editSkill') : t('viewSkill')}
+      >
+        {editor !== null && (
+          <div className="dpc-form">
+            <label className="dpc-label">
+              <span>{t('skillName')}</span>
+              <input
+                className="dpc-input"
+                value={editor.name}
+                disabled={readOnly || editor.mode === 'edit'}
+                onChange={(event) => setEditor({ ...editor, name: event.target.value })}
+              />
+            </label>
+            <label className="dpc-label">
+              <span>{t('skillDescription')}</span>
+              <input
+                className="dpc-input"
+                value={editor.description}
+                disabled={readOnly}
+                onChange={(event) => setEditor({ ...editor, description: event.target.value })}
+              />
+            </label>
+            <label className="dpc-label">
+              <span>{t('skillWhenToUse')}</span>
+              <input
+                className="dpc-input"
+                value={editor.whenToUse}
+                disabled={readOnly}
+                onChange={(event) => setEditor({ ...editor, whenToUse: event.target.value })}
+              />
+            </label>
+            <div className="dpc-checks">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={editor.modelInvocable}
+                  disabled={readOnly}
+                  onChange={(event) => setEditor({ ...editor, modelInvocable: event.target.checked })}
+                />
+                {t('modelInvocable')}
+              </label>
+              <label>
+                <input
+                  type="checkbox"
+                  checked={editor.userInvocable}
+                  disabled={readOnly}
+                  onChange={(event) => setEditor({ ...editor, userInvocable: event.target.checked })}
+                />
+                {t('userInvocable')}
+              </label>
+            </div>
+            <label className="dpc-label">
+              <span>{t('skillContent')}</span>
+              <textarea
+                className="dpc-textarea"
+                value={editor.content}
+                readOnly={readOnly}
+                onChange={(event) => setEditor({ ...editor, content: event.target.value })}
+              />
+            </label>
+            {formError !== null && <p className="dpc-formError">{formError}</p>}
+            <div className="dpc-cardRow">
+              <span className="dpc-spacer" />
+              <Button variant="ghost" onClick={() => setEditor(null)}>{readOnly ? t('close') : t('cancel')}</Button>
+              {!readOnly && <Button variant="primary" disabled={busy} onClick={() => void doSave()}>{t('save')}</Button>}
+            </div>
+          </div>
+        )}
+      </Modal>
+
+      <Modal
+        open={confirmName !== null}
+        onClose={() => setConfirmName(null)}
+        title={t('confirmDelete')}
+        description={confirmName ?? undefined}
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setConfirmName(null)}>{t('cancel')}</Button>
+            <Button variant="primary" disabled={busy} onClick={() => void doDelete()}>{t('delete')}</Button>
+          </>
+        }
+      >
+        <p>{t('deleteWarn')}</p>
+      </Modal>
+    </div>
+  )
+}

package/src/client/css.ts

@@ -0,0 +1,47 @@
+/** Shared scoped stylesheet for the capabilities tabs — rides the host's
+ * --dsw-* tokens (same design language as the plugin-inventory and install
+ * tabs) so light and dark themes both stay correct. Prefix: dpc-. */
+
+export const CSS = `
+.dpc-section{display:flex;flex-direction:column;gap:14px;width:100%;max-width:760px;color:var(--dsw-alias-label-primary)}
+.dpc-head{display:flex;align-items:center;gap:8px}
+.dpc-head h3{margin:0;font-size:13px;line-height:20px;font-weight:600}
+.dpc-head>svg{flex:none;color:var(--dsw-alias-label-tertiary)}
+.dpc-intro{margin:0;font-size:13px;line-height:20px;color:var(--dsw-alias-label-tertiary)}
+.dpc-listHead{display:flex;align-items:baseline;gap:7px;padding:0 2px;margin-top:2px}
+.dpc-listHead h3{margin:0;font-size:13px;line-height:20px;font-weight:600}
+.dpc-count{font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}
+.dpc-spacer{flex:1}
+.dpc-refresh{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer}
+.dpc-refresh:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.dpc-refresh:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:-2px}
+.dpc-empty{margin:0;font-size:13px;line-height:20px;color:var(--dsw-alias-label-tertiary)}
+.dpc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:10px;margin:0;padding:0;list-style:none}
+.dpc-card{display:flex;flex-direction:column;gap:8px;min-width:0;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-layer-3);padding:12px 14px}
+.dpc-card:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.dpc-cardTop{display:flex;align-items:center;gap:8px}
+.dpc-cardTitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px;font-weight:600;font-family:var(--ds-font-family-code)}
+.dpc-cardDesc{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.dpc-cardRow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.dpc-tag{display:inline-flex;align-items:center;min-height:20px;border-radius:5px;padding:1px 6px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font-size:11px;line-height:16px;white-space:nowrap}
+.dpc-tag[data-kind='source']{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 10%,transparent);color:var(--dsw-alias-state-business-primary)}
+.dpc-tag[data-kind='off']{background:color-mix(in srgb,var(--dsw-alias-state-warning-primary,var(--dsw-alias-label-tertiary)) 12%,transparent);color:var(--dsw-alias-label-secondary)}
+.dpc-cardActions{display:flex;align-items:center;gap:6px;margin-left:auto}
+.dpc-banner{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:10px 12px;background:var(--dsw-alias-bg-layer-3);font-size:13px;line-height:20px}
+.dpc-banner[data-kind='ok']{border-color:color-mix(in srgb,var(--dsw-alias-state-success-primary) 35%,transparent);background:color-mix(in srgb,var(--dsw-alias-state-success-primary) 8%,transparent)}
+.dpc-banner[data-kind='error']{border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary) 35%,transparent);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 8%,transparent)}
+.dpc-banner[data-kind='info']{border-color:color-mix(in srgb,var(--dsw-alias-state-business-primary) 35%,transparent);background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 8%,transparent)}
+.dpc-bannerBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
+.dpc-bannerHint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.dpc-form{display:flex;flex-direction:column;gap:10px}
+.dpc-label{display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary)}
+.dpc-label>span:first-child{color:var(--dsw-alias-label-tertiary)}
+.dpc-input,.dpc-textarea,.dpc-select{width:100%;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:7px 10px;outline:none;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px}
+.dpc-textarea{min-height:120px;resize:vertical;font-family:var(--ds-font-family-code);line-height:1.5}
+.dpc-textarea[data-short='true']{min-height:64px}
+.dpc-input:focus-visible,.dpc-textarea:focus-visible,.dpc-select:focus-visible{border-color:var(--dsw-alias-state-business-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--dsw-alias-state-business-primary) 18%,transparent)}
+.dpc-checks{display:flex;gap:16px;font-size:13px;line-height:20px}
+.dpc-checks label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
+.dpc-formError{margin:0;color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
+@media(max-width:680px){.dpc-cards{grid-template-columns:minmax(0,1fr)}}
+`

package/src/client/desktop-bridge.d.ts

@@ -0,0 +1,12 @@
+/** The desktop shell's preload bridge (present only inside DSH Desktop). */
+declare global {
+  interface Window {
+    dshDesktop?: {
+      retry(): void
+      openLogs(): void
+      restartSidecar(): void
+    }
+  }
+}
+
+export {}

package/src/client/index.ts

@@ -0,0 +1,108 @@
+/** dsh-plugin-capabilities client entry: contributes the “技能/Skills” and
+ * “MCP” tabs into Settings → Plugins. Calls the host routes with fetch. */
+
+import { createElement as h } from 'react'
+import { McpTab, type McpInjected, type McpRow } from './McpTab.tsx'
+import { SkillsTab, type SkillsInjected, type SkillRowView } from './SkillsTab.tsx'
+import { zh, en } from './locales.ts'
+
+/** Locale dictionary namespace owned by this plugin. */
+export const NS = 'settings.pluginCapabilities'
+
+/** The `t` function bound by the locale service. */
+export interface Translate {
+  (key: string): string
+}
+
+/** Minimal structural subset of the slots service. */
+interface SlotsService {
+  inject(slot: string, register: () => unknown): void
+  register(meta: Record<string, unknown>, component: () => unknown): unknown
+}
+
+/** Minimal structural subset of the locale service. */
+interface LocaleService {
+  register(namespace: string, dicts: { zh: Record<string, string>; en: Record<string, string> }): unknown
+  bind(namespace: string): Translate
+}
+
+/** The client cordis context this plugin relies on (structural). */
+interface CapabilitiesClientContext {
+  effect(callback: () => unknown, label?: string): void
+  locale: LocaleService
+  slots: SlotsService
+}
+
+/** Same-origin fetch of the manager's host routes. */
+async function fetchJson<T>(path: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(path, init)
+  const body = (await response.json()) as T & { error?: string }
+  if (!response.ok) throw new Error(body.error ?? `HTTP ${response.status}`)
+  return body
+}
+
+const post = (path: string, body: unknown): Promise<unknown> =>
+  fetchJson(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) })
+
+export const name = 'dsh-plugin-capabilities'
+export const inject = ['slots', 'locale']
+
+export interface SkillBody { content: string }
+
+/** One foreign-agent server from the import scan. */
+export interface ImportedServerView {
+  agent: 'claude-code' | 'codex'
+  name: string
+  transport: 'stdio' | 'streamable-http'
+  command?: string
+  args?: string[]
+  env?: Record<string, string>
+  url?: string
+  headers?: Record<string, string>
+}
+
+export function apply(ctx: CapabilitiesClientContext): void {
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-plugin-capabilities: dictionaries')
+  const t = ctx.locale.bind(NS)
+
+  const skillsInjected: SkillsInjected = {
+    list: () => fetchJson<{ skills: SkillRowView[] }>('/dsh-plugin-capabilities/skills'),
+    get: (name: string) => fetchJson<SkillBody>(`/dsh-plugin-capabilities/skill?name=${encodeURIComponent(name)}`),
+    save: (input: unknown) => post('/dsh-plugin-capabilities/skill/save', input) as Promise<{ ok: boolean }>,
+    remove: (name: string) => post('/dsh-plugin-capabilities/skill/delete', { name }) as Promise<{ ok: boolean }>,
+  }
+
+  const mcpInjected: McpInjected = {
+    list: () => fetchJson<{ servers: McpRow[] }>('/dsh-plugin-capabilities/mcp'),
+    save: (input: unknown) => post('/dsh-plugin-capabilities/mcp/save', input) as Promise<{ ok: boolean; id: string }>,
+    toggle: (id: string, disabled: boolean) => post('/dsh-plugin-capabilities/mcp/toggle', { id, disabled }) as Promise<{ ok: boolean }>,
+    remove: (id: string) => post('/dsh-plugin-capabilities/mcp/remove', { id }) as Promise<{ ok: boolean }>,
+    scanImport: () => fetchJson<{ servers: ImportedServerView[]; existing: string[] }>('/dsh-plugin-capabilities/import/scan'),
+    applyImport: (items: Array<{ agent: string; name: string }>) =>
+      post('/dsh-plugin-capabilities/import/apply', { items }) as Promise<{ ok: boolean; results: Array<{ name: string; ok: boolean; error?: string }> }>,
+    restart: (): void => { window.dshDesktop?.restartSidecar?.() },
+    desktop: window.dshDesktop !== undefined,
+  }
+
+  ctx.slots.inject('settings.plugins.tab', () => {
+    return ctx.slots.register({
+      name: 'settings.plugins.tab',
+      id: 'capabilities-skills',
+      order: 30,
+      label: () => t('skillsTab'),
+      locale: NS,
+      inject: () => skillsInjected,
+    }, () => h(SkillsTab, { t, injected: skillsInjected }))
+  })
+
+  ctx.slots.inject('settings.plugins.tab', () => {
+    return ctx.slots.register({
+      name: 'settings.plugins.tab',
+      id: 'capabilities-mcp',
+      order: 40,
+      label: () => t('mcpTab'),
+      locale: NS,
+      inject: () => mcpInjected,
+    }, () => h(McpTab, { t, injected: mcpInjected }))
+  })
+}

package/src/client/locales.ts

@@ -0,0 +1,131 @@
+/** zh/en dictionaries for the Settings capabilities tabs. */
+
+export const zh = {
+  skillsTab: '技能',
+  mcpTab: 'MCP',
+  skillsTitle: '技能管理',
+  skillsIntro: '查看与编辑 dsh 发现的技能；用户级技能（DSH_HOME/skills）可在此新建、修改、删除，文件被监听，保存即生效。若存在 ~/.claude/skills 或 ~/.codex/skills，会自动纳入扫描（零拷贝、实时同步）。',
+  newSkill: '新建技能',
+  editSkill: '编辑技能',
+  viewSkill: '查看技能',
+  skillName: '名称（kebab-case）',
+  skillDescription: '描述',
+  skillWhenToUse: '使用时机（可选）',
+  skillContent: '正文（Markdown）',
+  modelInvocable: '允许模型调用',
+  userInvocable: '允许用户 / 调用',
+  save: '保存',
+  cancel: '取消',
+  delete: '删除',
+  edit: '编辑',
+  view: '查看',
+  close: '关闭',
+  emptySkills: '还没有发现任何技能',
+  loading: '载入中…',
+  source: '来源',
+  sourceProjectDsh: '项目',
+  sourceProjectAgents: '项目',
+  sourceUserDsh: '用户',
+  sourceUserAgents: '用户',
+  sourceRuntime: '运行时',
+  sourceBundled: '内置',
+  sourceCustom: '自定义',
+  readOnly: '只读',
+  confirmDelete: '确认删除技能？',
+  deleteWarn: '将删除 DSH_HOME/skills 下的整个技能目录，此操作不可撤销。',
+  saved: '已保存，技能目录被监听，稍候即可在会话中使用。',
+  mcpTitle: 'MCP 服务器',
+  mcpIntro: '管理 profile 中的 MCP 服务器行（@deepseek-ai/dsh-mcp-client）。新增、修改或删除后需要重启 dsh 才生效。',
+  addServer: '添加服务器',
+  editServer: '编辑服务器',
+  serverName: '服务器名（工具名前缀）',
+  transport: '传输方式',
+  transportStdio: 'stdio（本地命令）',
+  transportHttp: 'streamable-http（URL）',
+  command: '命令',
+  args: '参数（每行一个）',
+  envPairs: '环境变量（每行 KEY=VALUE）',
+  url: 'URL',
+  headersPairs: '请求头（每行 KEY: VALUE）',
+  disabled: '已停用',
+  enabled: '启用中',
+  toggle: '停用/启用',
+  confirmRemove: '确认移除该服务器？',
+  removeWarn: '将从 profile 配置中移除这一行，重启 dsh 后其工具不再出现。',
+  emptyMcp: '还没有配置 MCP 服务器',
+  importServers: '从其他 Agent 导入',
+  importIntro: '扫描 Claude Code（~/.claude.json）与 Codex（~/.codex/config.toml）的 MCP 服务器配置，勾选后导入为本 profile 的服务器行。',
+  importEmpty: '没有发现可导入的 MCP 服务器',
+  importExisting: '已存在',
+  importSelected: '导入选中项',
+  restartNeeded: '配置已写入，重启 dsh 后生效。',
+  restartDesktopHint: '重启由桌面应用负责：托盘菜单「重启服务」。',
+  restartOtherHint: '重启方式：关闭当前 dsh 进程后重新运行。',
+  restartNow: '重启服务',
+  failed: '操作失败',
+}
+
+export const en = {
+  skillsTab: 'Skills',
+  mcpTab: 'MCP',
+  skillsTitle: 'Skills',
+  skillsIntro: 'View and edit the skills dsh discovers; user-level skills (DSH_HOME/skills) can be created, edited, and deleted here — the directory is watched, saves apply without a restart. ~/.claude/skills and ~/.codex/skills are scanned too when present (zero-copy, live-synced).',
+  newSkill: 'New skill',
+  editSkill: 'Edit skill',
+  viewSkill: 'View skill',
+  skillName: 'Name (kebab-case)',
+  skillDescription: 'Description',
+  skillWhenToUse: 'When to use (optional)',
+  skillContent: 'Body (Markdown)',
+  modelInvocable: 'Model-invocable',
+  userInvocable: 'User-invocable (/)',
+  save: 'Save',
+  cancel: 'Cancel',
+  delete: 'Delete',
+  edit: 'Edit',
+  view: 'View',
+  close: 'Close',
+  emptySkills: 'No skills discovered yet',
+  loading: 'Loading…',
+  source: 'Source',
+  sourceProjectDsh: 'project',
+  sourceProjectAgents: 'project',
+  sourceUserDsh: 'user',
+  sourceUserAgents: 'user',
+  sourceRuntime: 'runtime',
+  sourceBundled: 'bundled',
+  sourceCustom: 'custom',
+  readOnly: 'read-only',
+  confirmDelete: 'Delete this skill?',
+  deleteWarn: 'Removes the whole skill directory under DSH_HOME/skills. This cannot be undone.',
+  saved: 'Saved. The skills directory is watched; the skill is usable in sessions shortly.',
+  mcpTitle: 'MCP servers',
+  mcpIntro: 'Manage the MCP server rows (@deepseek-ai/dsh-mcp-client) in this profile. Additions, edits, and removals take effect after a dsh restart.',
+  addServer: 'Add server',
+  editServer: 'Edit server',
+  serverName: 'Server name (tool name prefix)',
+  transport: 'Transport',
+  transportStdio: 'stdio (local command)',
+  transportHttp: 'streamable-http (URL)',
+  command: 'Command',
+  args: 'Arguments (one per line)',
+  envPairs: 'Environment (KEY=VALUE per line)',
+  url: 'URL',
+  headersPairs: 'Headers (KEY: VALUE per line)',
+  disabled: 'Disabled',
+  enabled: 'Enabled',
+  toggle: 'Enable/disable',
+  confirmRemove: 'Remove this server?',
+  removeWarn: 'Removes the row from the profile configuration; its tools disappear after the next dsh restart.',
+  emptyMcp: 'No MCP servers configured yet',
+  importServers: 'Import from other agents',
+  importIntro: 'Scans Claude Code (~/.claude.json) and Codex (~/.codex/config.toml) MCP server configs; selected entries become server rows in this profile.',
+  importEmpty: 'No importable MCP servers found',
+  importExisting: 'already here',
+  importSelected: 'Import selected',
+  restartNeeded: 'Configuration written — restart dsh to apply.',
+  restartDesktopHint: 'The desktop app owns restarts: use the tray “Restart service”.',
+  restartOtherHint: 'Restart by closing this dsh process and running it again.',
+  restartNow: 'Restart service',
+  failed: 'Operation failed',
+}

package/src/client/primitives.d.ts

@@ -0,0 +1,57 @@
+/** Minimal ambient types for the primitives the browser half uses, matching
+ * @deepseek-ai/dsh-client-ui-primitives (provided by the host's frozen
+ * platform module table; never bundled). Only members used here are
+ * declared — keep in sync with the host package. */
+
+declare module '@deepseek-ai/dsh-client-ui-primitives' {
+  import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, SVGProps } from 'react'
+
+  export type ButtonVariant = 'primary' | 'ghost' | 'outline' | 'toolbar'
+  export function Button(props: {
+    variant?: ButtonVariant
+    size?: 'md' | 'sm'
+    icon?: ReactNode
+    className?: string | undefined
+    children?: ReactNode
+  } & ButtonHTMLAttributes<HTMLButtonElement>): ReactElement
+
+  export function Input(props: {
+    icon?: ReactNode
+    className?: string
+  } & InputHTMLAttributes<HTMLInputElement>): ReactElement
+
+  export function Modal(props: {
+    open: boolean
+    onClose: () => void
+    title: string
+    closeLabel?: string
+    description?: string
+    children?: ReactNode
+    footer?: ReactNode
+    className?: string
+    contentClassName?: string
+    headless?: boolean
+  }): ReactElement | null
+
+  export type StateDotState = 'done' | 'warning' | 'ongoing' | 'error'
+  export function StateDot(props: {
+    state: StateDotState
+    size?: number | undefined
+    className?: string | undefined
+  }): ReactElement
+
+  export function IconRefreshOutline14(props: {
+    className?: string | undefined
+    size?: number | undefined
+  } & SVGProps<SVGSVGElement>): ReactElement
+
+  export function IconSkillOutline16(props: {
+    className?: string | undefined
+    size?: number | undefined
+  } & SVGProps<SVGSVGElement>): ReactElement
+
+  export function IconApiOutline14(props: {
+    className?: string | undefined
+    size?: number | undefined
+  } & SVGProps<SVGSVGElement>): ReactElement
+}