dsh-plugin-capabilities 0.3.1 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-capabilities",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Manage skills and MCP servers from the Web UI Settings. 在设置页管理 dsh 的技能与 MCP 服务器。",
   "type": "module",
   "main": "lib/index.js",

package/src/client/MarketTab.tsx

@@ -260,6 +260,9 @@ export function MarketTab(props: { t: Translate; market: MarketInjected; mcp: Mc
         open={detailRepo !== null || detailServer !== null}
         onClose={() => setDetail(null)}
         title={detailRepo !== null ? title(detailRepo) : detailServer !== null ? title(detailServer) : ''}
+        closeLabel={t('close')}
+        className="dpc-marketDialog"
+        contentClassName="dpc-marketContent"
         footer={
           <>
             {detailRepo !== null && (
@@ -296,6 +299,24 @@ export function MarketTab(props: { t: Translate; market: MarketInjected; mcp: Mc
           </>
         }
       >
+        {(detailRepo !== null || detailServer !== null) && (
+          <div className="dpc-detailTagsRow">
+            {detailRepo !== null && detailRepo.skillCount !== undefined && (
+              <span className="dpc-tag">{t('marketSkillCount').replace('{n}', String(detailRepo.skillCount))}</span>
+            )}
+            {detailRepo !== null && detailRepo.installedId !== null && (
+              <span className="dpc-tag" data-kind="source">{t('marketInstalled')}</span>
+            )}
+            {detailServer !== null && (
+              <>
+                <span className="dpc-tag">{detailServer.transport}</span>
+                {detailServer.runtime !== undefined && <span className="dpc-tag">{detailServer.runtime}</span>}
+                {detailServer.category !== undefined && <span className="dpc-tag">{detailServer.category}</span>}
+                {detailServer.installed && <span className="dpc-tag" data-kind="source">{t('marketInstalled')}</span>}
+              </>
+            )}
+          </div>
+        )}
         {detailRepo !== null && (
           <>
             <p className="dpc-detailDesc">{longText(detailRepo)}</p>

package/src/client/SkillsTab.tsx

@@ -5,7 +5,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 { Button, IconRefreshOutline14, IconSkillOutline16, MarkdownText, Modal, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
 import { CSS } from './css.ts'
 import type { OpenTarget, Translate } from './index.ts'
 import type { RootRowView } from './MarketTab.tsx'
@@ -77,6 +77,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 +108,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 +117,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,
@@ -485,15 +491,32 @@ 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
+                ? (typeof MarkdownText === 'function'
+                    ? <div className="dpc-mdPreview"><MarkdownText text={editor.content} /></div>
+                    : <textarea className="dpc-textarea" value={editor.content} readOnly />)
+                : (
+                  <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,9 @@ 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}
 .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}
@@ -108,14 +109,21 @@ export const CSS = `
 .dpc-format .dpc-form{margin-top:8px}
 .dpc-formatHint{margin:2px 0 0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
 .dpc-code{margin:4px 0 8px;border:1px solid var(--dsw-alias-border-l2);border-radius:6px;padding:8px 10px;overflow-x:auto;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);font-family:var(--ds-font-family-code);font-size:11px;line-height:17px;white-space:pre}
-/* Market detail modal. */
+/* Market detail modal. The host dialog card is a fixed 380px column with no
+   scroll, which the long-form intros turn into a clipped strip — widen it
+   (doubled selector outranks the module class regardless of style order),
+   cap the height, and scroll inside the content region. */
+.dpc-marketDialog.dpc-marketDialog{width:min(720px,100%);max-height:calc(100vh - 48px)}
+.dpc-marketContent{overflow-y:auto;min-height:0}
+.dpc-detailTagsRow{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
 .dpc-detailDesc{margin:0;font-size:13px;line-height:20px}
-.dpc-detailSection{margin-top:12px;display:flex;flex-direction:column;gap:6px}
+.dpc-detailSection{margin-top:14px;display:flex;flex-direction:column;gap:6px}
 .dpc-detailLabel{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary)}
 .dpc-detailTags{display:flex;flex-wrap:wrap;gap:4px}
-.dpc-skillList{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
+.dpc-skillList{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
 .dpc-skillItem{display:flex;gap:8px;align-items:baseline;font-size:12px;line-height:18px;min-width:0}
 .dpc-skillName{font-family:var(--ds-font-family-code);color:var(--dsw-alias-label-primary);white-space:nowrap;flex:none}
 .dpc-skillDesc{color:var(--dsw-alias-label-secondary);min-width:0}
+@media(max-width:560px){.dpc-skillList{grid-template-columns:minmax(0,1fr)}}
 @media(max-width:680px){.dpc-cards{grid-template-columns:minmax(0,1fr)}}
 `

package/src/client/locales.ts

@@ -14,6 +14,8 @@ export const zh = {
   skillDescription: '描述',
   skillWhenToUse: '使用时机（可选）',
   skillContent: '正文（Markdown）',
+  skillPreview: 'Markdown 预览',
+  skillPlainText: '纯文本',
   modelInvocable: '允许模型调用',
   userInvocable: '允许用户 / 调用',
   save: '保存',
@@ -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/client/primitives.d.ts

@@ -40,6 +40,12 @@ declare module '@deepseek-ai/dsh-client-ui-primitives' {
     className?: string | undefined
   }): ReactElement
 
+  /** Untrusted-Markdown renderer over the app's own mdast pipeline. */
+  export function MarkdownText(props: {
+    text: string
+    streaming?: boolean | undefined
+  }): ReactElement
+
   export function IconRefreshOutline14(props: {
     className?: string | undefined
     size?: number | undefined