dsh-plugin-capabilities 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-capabilities",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Manage skills and MCP servers from the Web UI Settings. 在设置页管理 dsh 的技能与 MCP 服务器。",
   "type": "module",
   "main": "lib/index.js",
@@ -63,6 +63,8 @@
   },
   "dependencies": {
     "@deepseek-ai/dsh-skill-filesystem": "^0.1.0-rc.6",
+    "dompurify": "^3.4.13",
+    "marked": "^18.0.10",
     "smol-toml": "^1.3.1",
     "yaml": "^2.6.0"
   },

package/src/client/MarkdownPreview.tsx

@@ -0,0 +1,21 @@
+/**
+ * Local Markdown preview for the skill editor: marked + DOMPurify, bundled
+ * into the plugin. The host exports its own Markdown renderer (the chat
+ * pipeline), but whether a given host build serves it through the frozen
+ * platform table is not guaranteed — bundling our own keeps the preview
+ * working on every host version. Skill bodies come from third-party
+ * repositories, so the rendered HTML is sanitized before it mounts.
+ */
+
+import { useMemo } from 'react'
+import type { ReactElement } from 'react'
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
+
+const parse = (text: string): string =>
+  DOMPurify.sanitize(marked.parse(text, { async: false, gfm: true, breaks: false }) as string)
+
+export function MarkdownPreview(props: { text: string }): ReactElement {
+  const html = useMemo(() => parse(props.text), [props.text])
+  return <div className="dpc-mdBody" dangerouslySetInnerHTML={{ __html: html }} />
+}

package/src/client/SkillsTab.tsx

@@ -7,6 +7,7 @@ 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 { MarkdownPreview } from './MarkdownPreview.tsx'
 import type { OpenTarget, Translate } from './index.ts'
 import type { RootRowView } from './MarketTab.tsx'
 
@@ -19,6 +20,9 @@ export interface SkillRowView {
   source: string
   provider: string
   editable: boolean
+  /** Only user-root skills can be deleted (the delete route removes one
+   * directory under $DSH_HOME/skills); other editable sources just save. */
+  removable: boolean
   /** The skill's folder when it lives on disk (drives open-folder). */
   dir?: string
   /** File-backed skills can be enabled/disabled through the policy route. */
@@ -77,6 +81,8 @@ export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): Re
   const { t, injected } = props
   const [skills, setSkills] = useState<SkillRowView[] | null>(null)
   const [editor, setEditor] = useState<EditorState | null>(null)
+  /** Content pane of the editor modal: rendered Markdown vs the raw editor. */
+  const [preview, setPreview] = useState(false)
   const [confirmName, setConfirmName] = useState<string | null>(null)
   const [busy, setBusy] = useState(false)
   const [outcome, setOutcome] = useState<{ ok: boolean; text: string } | null>(null)
@@ -106,6 +112,7 @@ export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): Re
 
   const openCreate = (): void => {
     setFormError(null)
+    setPreview(false)
     setEditor({ mode: 'create', name: '', description: '', whenToUse: '', modelInvocable: true, userInvocable: true, content: '' })
   }
 
@@ -114,6 +121,9 @@ export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): Re
     setFormError(null)
     try {
       const body = await injected.get(skill.name)
+      // Read-only sources open on the rendered preview; editable ones on the
+      // plain-text editor. The toggle in the content row flips either way.
+      setPreview(!skill.editable)
       setEditor({
         mode: skill.editable ? 'edit' : 'view',
         name: skill.name,
@@ -363,7 +373,7 @@ export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): Re
                   <Button variant="ghost" size="sm" disabled={busy} onClick={() => void openExisting(skill)}>
                     {skill.editable ? t('edit') : t('view')}
                   </Button>
-                  {skill.editable && (
+                  {skill.removable && (
                     <Button variant="ghost" size="sm" disabled={busy} onClick={() => setConfirmName(skill.name)}>{t('delete')}</Button>
                   )}
                 </div>
@@ -485,15 +495,30 @@ export function SkillsTab(props: { t: Translate; injected: SkillsInjected }): Re
                 {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>
+            <div className="dpc-label">
+              <div className="dpc-cardRow">
+                <span>{t('skillContent')}</span>
+                <span className="dpc-spacer" />
+                <div className="dpc-segments" role="tablist" aria-label={t('skillContent')}>
+                  <button type="button" role="tab" aria-selected={preview} className="dpc-segment" data-active={preview ? 'true' : undefined} onClick={() => setPreview(true)}>
+                    {t('skillPreview')}
+                  </button>
+                  <button type="button" role="tab" aria-selected={!preview} className="dpc-segment" data-active={!preview ? 'true' : undefined} onClick={() => setPreview(false)}>
+                    {readOnly ? t('skillPlainText') : t('edit')}
+                  </button>
+                </div>
+              </div>
+              {preview
+                ? <div className="dpc-mdPreview"><MarkdownPreview text={editor.content} /></div>
+                : (
+                  <textarea
+                    className="dpc-textarea"
+                    value={editor.content}
+                    readOnly={readOnly}
+                    onChange={(event) => setEditor({ ...editor, content: event.target.value })}
+                  />
+                )}
+            </div>
             {formError !== null && <p className="dpc-formError">{formError}</p>}
             <div className="dpc-cardRow">
               <span className="dpc-spacer" />

package/src/client/css.ts

@@ -46,7 +46,7 @@ export const CSS = `
 .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:240px;resize:vertical;font-family:var(--ds-font-family-code);line-height:1.5}
+.dpc-textarea{min-height:320px;resize:vertical;font-family:var(--ds-font-family-code);line-height:1.5}
 .dpc-textarea[data-short='true']{min-height:96px}
 .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}
@@ -59,8 +59,24 @@ export const CSS = `
 /* Editor dialogs (new skill / server): 640px wide so markdown bodies and
    command/arg/env lines stop wrapping mid-token; the content column scrolls
    on short viewports instead of clipping past the dialog edge. */
-.dpc-modalForm.dpc-modalForm{width:min(640px,100%)}
+.dpc-modalForm.dpc-modalForm{width:min(760px,100%)}
 .dpc-modalScroll.dpc-modalScroll{max-height:calc(100vh - 160px);overflow-y:auto}
+.dpc-mdPreview{min-height:320px;max-height:60vh;overflow-y:auto;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:8px 12px;background:var(--dsw-alias-bg-layer-1);font-size:13px}
+/* Rendered-markdown body (bundled marked + DOMPurify). */
+.dpc-mdBody h1,.dpc-mdBody h2,.dpc-mdBody h3,.dpc-mdBody h4{margin:14px 0 6px;color:var(--dsw-alias-label-primary);line-height:1.4}
+.dpc-mdBody h1{font-size:18px}.dpc-mdBody h2{font-size:16px}.dpc-mdBody h3{font-size:14px}.dpc-mdBody h4{font-size:13px}
+.dpc-mdBody p{margin:6px 0;line-height:20px}
+.dpc-mdBody ul,.dpc-mdBody ol{margin:6px 0;padding-left:20px}
+.dpc-mdBody li{margin:2px 0;line-height:19px}
+.dpc-mdBody code{font-family:var(--ds-font-family-code);font-size:12px;background:var(--dsw-alias-bg-layer-3);border-radius:4px;padding:1px 5px}
+.dpc-mdBody pre{margin:8px 0;padding:10px 12px;overflow-x:auto;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3)}
+.dpc-mdBody pre code{padding:0;background:transparent;font-size:12px;line-height:18px}
+.dpc-mdBody a{color:var(--dsw-alias-state-business-primary)}
+.dpc-mdBody blockquote{margin:8px 0;padding:2px 12px;border-left:3px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary)}
+.dpc-mdBody table{border-collapse:collapse;margin:8px 0}
+.dpc-mdBody th,.dpc-mdBody td{border:1px solid var(--dsw-alias-border-l2);padding:4px 10px;font-size:12px;line-height:18px}
+.dpc-mdBody hr{border:0;border-top:1px solid var(--dsw-alias-border-l2);margin:12px 0}
+.dpc-mdBody>*:first-child{margin-top:0}
 .dpc-importScroll{display:flex;flex-direction:column;gap:14px;max-height:min(400px,52vh);overflow-y:auto;padding:2px 4px 2px 2px}
 .dpc-importGroup{display:flex;flex-direction:column;gap:8px}
 .dpc-importHead{display:flex;align-items:center;gap:8px;padding:0 2px}

package/src/client/locales.ts

@@ -6,7 +6,7 @@ export const zh = {
   mcpTab: 'MCP',
   marketTab: '市场',
   skillsTitle: '技能管理',
-  skillsIntro: '查看与编辑 dsh 发现的技能；用户级技能（DSH_HOME/skills）可在此新建、修改、删除，文件被监听，保存即生效。若存在 ~/.claude/skills 或 ~/.codex/skills，会自动纳入扫描（零拷贝、实时同步）。卡片上的开关控制是否加载：停用即从模型与用户目录同时摘除，开启恢复默认。',
+  skillsIntro: '查看与编辑 dsh 发现的技能；用户级技能（DSH_HOME/skills）可在此新建、修改、删除，市场/本地仓库安装的技能也能就地编辑（写回时保留文件里其余 frontmatter 键），文件被监听，保存即生效。若存在 ~/.claude/skills 或 ~/.codex/skills，会自动纳入扫描（零拷贝、实时同步）。卡片上的开关控制是否加载：停用即从模型与用户目录同时摘除，开启恢复默认。',
   newSkill: '新建技能',
   editSkill: '编辑技能',
   viewSkill: '查看技能',
@@ -14,6 +14,8 @@ export const zh = {
   skillDescription: '描述',
   skillWhenToUse: '使用时机（可选）',
   skillContent: '正文（Markdown）',
+  skillPreview: 'Markdown 预览',
+  skillPlainText: '纯文本',
   modelInvocable: '允许模型调用',
   userInvocable: '允许用户 / 调用',
   save: '保存',
@@ -137,7 +139,7 @@ export const en = {
   mcpTab: 'MCP',
   marketTab: 'Market',
   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). The switch on each card toggles loading: disabling removes the skill from both the model and user catalogs; enabling restores the default policy.',
+  skillsIntro: 'View and edit the skills dsh discovers; user-level skills (DSH_HOME/skills) can be created, edited, and deleted here, and skills installed from market/local repositories edit in place too (their other frontmatter keys survive the write). ~/.claude/skills and ~/.codex/skills are scanned too when present (zero-copy, live-synced). The switch on each card toggles loading: disabling removes the skill from both the model and user catalogs; enabling restores the default policy.',
   newSkill: 'New skill',
   editSkill: 'Edit skill',
   viewSkill: 'View skill',
@@ -145,6 +147,8 @@ export const en = {
   skillDescription: 'Description',
   skillWhenToUse: 'When to use (optional)',
   skillContent: 'Body (Markdown)',
+  skillPreview: 'Markdown preview',
+  skillPlainText: 'Plain text',
   modelInvocable: 'Model-invocable',
   userInvocable: 'User-invocable (/)',
   save: 'Save',

package/src/routes.ts

@@ -2,26 +2,51 @@
 
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import { mkdirSync } from 'node:fs'
+import { join, sep } from 'node:path'
 import { scanAllMcp } from './agents.ts'
 import { readJsonBody, sameOrigin, sendJson } from './http.ts'
 import { loadMarketIndex, type MarketMcpServer } from './market.ts'
 import { openDirectory } from './opener.ts'
 import { addGitRepo, addLocalRepo, rootExists } from './repos.ts'
 import { dshLaunch, restartOwnedByShell, scheduleRestart, trustedRestartRequest } from './restart.ts'
-import { deleteSkill, setSkillPolicy, userSkillsDir, validateSkillInput, writeSkill, type SkillInput } from './skills.ts'
+import { deleteSkill, setSkillPolicy, updateSkillFile, userSkillsDir, validateSkillInput, writeSkill, type SkillInput } from './skills.ts'
 import { findRootByUrl, loadState, pluginStateDir, removeSkillRoot, type SkillRootEntry } from './state.ts'
 import { listMcp, removeMcp, setMcpDisabled, upsertMcp, validateMcpInput, type McpInput } from './mcp.ts'
 import type { CapabilitiesHost, HostSkill } from './types.ts'
 
-/** Only this source is writable from the Settings page (provider rank 400). */
-const EDITABLE_SOURCE = 'user-dsh'
+/**
+ * A 'custom' skill is writable only when its folder sits inside a root this
+ * plugin manages: the materialized repositories under the plugin state dir,
+ * or a registered local root. Vendored skills shipped inside the plugin
+ * package (under node_modules) are custom-sourced too but stay read-only —
+ * edits there would die with the next plugin update.
+ */
+function customSkillWritable(dir: string, dshHome: string | undefined): boolean {
+  const state = pluginStateDir(dshHome)
+  if (dir === state || dir.startsWith(state + sep)) return true
+  return loadState(dshHome).skillRoots.some(entry =>
+    entry.roots.some(root => dir === root || dir.startsWith(root + sep)))
+}
+
+/** Whether the save route may write this catalog row back to disk. */
+function skillWritable(skill: HostSkill, dir: string | undefined, dshHome: string | undefined): boolean {
+  if (dir === undefined) return false
+  if (skill.source === 'user-dsh') return true
+  return skill.source === 'custom' && customSkillWritable(dir, dshHome)
+}
 
 /** One catalog skill as the browser sees it (editable/dir flags added). */
-type SkillRow = HostSkill & { editable: boolean; dir?: string; policyEditable: boolean }
+type SkillRow = HostSkill & { editable: boolean; removable: boolean; dir?: string; policyEditable: boolean }
 
-function toSkillRow(skill: HostSkill): SkillRow {
+function toSkillRow(skill: HostSkill, dshHome: string | undefined): SkillRow {
   const dir = skill.resourceBase?.kind === 'directory' ? skill.resourceBase.path : undefined
-  return { ...skill, editable: skill.source === EDITABLE_SOURCE, ...(dir !== undefined ? { dir } : {}), policyEditable: dir !== undefined }
+  return {
+    ...skill,
+    editable: skillWritable(skill, dir, dshHome),
+    removable: skill.source === 'user-dsh',
+    ...(dir !== undefined ? { dir } : {}),
+    policyEditable: dir !== undefined,
+  }
 }
 
 /** One registered repository plus a liveness flag (roots can go stale). */
@@ -49,7 +74,7 @@ export function mountCapabilitiesRoutes(host: CapabilitiesHost, config: Capabili
         }
         try {
           const skills = await host.skills.list()
-          sendJson(response, 200, { skills: skills.map(toSkillRow) })
+          sendJson(response, 200, { skills: skills.map(skill => toSkillRow(skill, process.env.DSH_HOME)) })
         } catch (error) {
           sendJson(response, 500, { error: error instanceof Error ? error.message : String(error) })
         }
@@ -108,7 +133,22 @@ export function mountCapabilitiesRoutes(host: CapabilitiesHost, config: Capabili
             sendJson(response, 400, { error: invalid })
             return
           }
-          writeSkill(input)
+          // An existing skill edits in place (its own folder, whichever
+          // editable source it comes from — preserving frontmatter keys the
+          // editor does not own); a new name creates in the user root. The
+          // file location is resolved server-side from the catalog, never
+          // taken from the request.
+          const existing = (await host.skills.list()).find(skill => skill.name === input.name)
+          if (existing !== undefined) {
+            const dir = existing.resourceBase?.kind === 'directory' ? existing.resourceBase.path : undefined
+            if (!skillWritable(existing, dir, process.env.DSH_HOME)) {
+              sendJson(response, 403, { error: `skills from source '${existing.source}' are read-only` })
+              return
+            }
+            updateSkillFile(join(dir as string, 'SKILL.md'), input)
+          } else {
+            writeSkill(input)
+          }
           sendJson(response, 200, { ok: true, name: input.name })
         } catch (error) {
           sendJson(response, 500, { error: error instanceof Error ? error.message : String(error) })

package/src/skills.test.ts

@@ -2,7 +2,7 @@ import { mkdtempSync, readFileSync, rmSync, existsSync, writeFileSync, mkdirSync
 import { tmpdir } from 'node:os'
 import { join } from 'node:path'
 import { afterAll, describe, expect, it } from 'vitest'
-import { deleteSkill, serializeSkill, setSkillPolicy, validateSkillInput, writeSkill, type SkillInput } from './skills.ts'
+import { deleteSkill, serializeSkill, setSkillPolicy, updateSkillFile, validateSkillInput, writeSkill, type SkillInput } from './skills.ts'
 
 const root = mkdtempSync(join(tmpdir(), 'dsh-caps-skills-'))
 afterAll(() => rmSync(root, { recursive: true, force: true }))
@@ -58,6 +58,29 @@ describe('writeSkill / deleteSkill', () => {
     expect(existsSync(join(root, 'skills', 'my-skill'))).toBe(false)
     expect(deleteSkill('my-skill', root)).toBe(false)
   })
+
+  it('updateSkillFile edits in place, preserving keys the editor does not own', () => {
+    const dir = join(root, 'keep-skill')
+    mkdirSync(dir, { recursive: true })
+    const file = join(dir, 'SKILL.md')
+    writeFileSync(file, '---\nname: keep-skill\nlicense: MIT\nallowed-tools: Bash\ndescription: "old one"\n---\n\n# Old\n')
+    updateSkillFile(file, {
+      name: 'keep-skill',
+      description: 'new one',
+      whenToUse: undefined,
+      modelInvocable: false,
+      userInvocable: true,
+      content: '# New body',
+    })
+    const after = readFileSync(file, 'utf8')
+    expect(after).toContain('license: MIT')
+    expect(after).toContain('allowed-tools: Bash')
+    expect(after).toContain('description: "new one"')
+    expect(after).toContain('disable-model-invocation: true')
+    expect(after).not.toContain('user-invocable')
+    expect(after).toContain('# New body')
+    expect(after).not.toContain('# Old')
+  })
   it('never touches sibling directories on delete', () => {
     mkdirSync(join(root, 'skills', 'other'), { recursive: true })
     writeFileSync(join(root, 'skills', 'other', 'SKILL.md'), '---\nname: other\ndescription: d\n---\n\nx')

package/src/skills.ts

@@ -100,3 +100,26 @@ export function setSkillPolicy(file: string, enabled: boolean): void {
   if (!enabled) kept.push('disable-model-invocation: true', 'user-invocable: false')
   writeFileSync(file, `---${newline}${kept.join(newline)}${newline}---${body}`, 'utf8')
 }
+
+/**
+ * Edit an existing skill file in place — for skills that do not live in the
+ * user root (market/custom repositories). Only the keys the editor owns
+ * (name, description, whenToUse, the two invocation flags) are rewritten;
+ * every other frontmatter key — license, allowed-tools, anything a
+ * repository ships — survives in order, like setSkillPolicy. The body is
+ * replaced by the editor's content.
+ */
+export function updateSkillFile(file: string, input: SkillInput): void {
+  const text = readFileSync(file, 'utf8')
+  const match = /^---\r?\n([\s\S]*?)\r?\n---/.exec(text)
+  if (match === null) throw new Error('skill file has no frontmatter block')
+  const newline = text.includes('\r\n---') ? '\r\n' : '\n'
+  const lines = match[1].split(/\r?\n/)
+  const kept = lines.filter(line => !/^(name|description|whenToUse|disable-model-invocation|user-invocable):/.test(line))
+  const head = [`name: ${input.name}`, `description: ${quote(input.description)}`]
+  if (input.whenToUse !== undefined && input.whenToUse !== '') head.push(`whenToUse: ${quote(input.whenToUse)}`)
+  if (!input.modelInvocable) kept.push('disable-model-invocation: true')
+  if (!input.userInvocable) kept.push('user-invocable: false')
+  const body = input.content.replace(/\r\n/g, '\n').trim()
+  writeFileSync(file, `---${newline}${[...head, ...kept].join(newline)}${newline}---${newline}${newline}${body}${newline}`, 'utf8')
+}

package/src/smoke.test.ts

@@ -158,7 +158,7 @@ describe.skipIf(process.env.DSH_DESKTOP_PLUGIN_SMOKE !== '1' || !guard || !nodeO
     // skill enters the catalog under source "custom".
     const repoDir = join(smokeRoot, 'my-repo')
     mkdirSync(join(repoDir, 'repo-skill'), { recursive: true })
-    writeFileSync(join(repoDir, 'repo-skill', 'SKILL.md'), '---\nname: repo-skill\ndescription: from a local repo\n---\n\nhi')
+    writeFileSync(join(repoDir, 'repo-skill', 'SKILL.md'), '---\nname: repo-skill\ndescription: from a local repo\nlicense: MIT\n---\n\nhi')
     const addRoot = await post('/dsh-plugin-capabilities/roots/add', { kind: 'local', path: repoDir })
     expect(addRoot.status).toBe(200)
     expect(readFileSync(join(smokeRoot, 'dsh-plugin-capabilities', 'state.json'), 'utf8')).toContain('my-repo') // roots recorded
@@ -185,6 +185,21 @@ describe.skipIf(process.env.DSH_DESKTOP_PLUGIN_SMOKE !== '1' || !guard || !nodeO
     const policyRestore = await post('/dsh-plugin-capabilities/skill/policy', { name: 'repo-skill', enabled: true })
     expect(policyRestore.status).toBe(200)
 
+    // 7b. Custom-repo skills edit in place through the save route; the
+    // frontmatter keys the editor does not own (license) survive the write.
+    const edit = await post('/dsh-plugin-capabilities/skill/save', {
+      name: 'repo-skill',
+      description: 'edited in place',
+      modelInvocable: true,
+      userInvocable: true,
+      content: '# Edited\n\nnew body',
+    })
+    expect(edit.status).toBe(200)
+    const editedFile = readFileSync(join(repoDir, 'repo-skill', 'SKILL.md'), 'utf8')
+    expect(editedFile).toContain('license: MIT')
+    expect(editedFile).toContain('description: "edited in place"')
+    expect(editedFile).toContain('# Edited')
+
     // 8. Market: MCP index serves (remote or bundled fallback) and one-click
     // install writes a profile row.
     const marketIndex = await fetch(`${base}/dsh-plugin-capabilities/market/mcp`)