dsh-plugin-capabilities 0.3.0 → 0.3.2

package/src/client/MarketTab.tsx

@@ -129,6 +129,8 @@ export function MarketTab(props: { t: Translate; market: MarketInjected; mcp: Mc
   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)
+  const longText = (entry: { description: string; descriptionZh?: string; detail?: string; detailZh?: string }): string =>
+    entry.detail !== undefined ? pick(entry.detail, entry.detailZh) : desc(entry)
 
   const cardStop = (event: { stopPropagation(): void }): void => { event.stopPropagation() }
 
@@ -258,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 && (
@@ -294,22 +299,47 @@ 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">{desc(detailRepo)}</p>
+            <p className="dpc-detailDesc">{longText(detailRepo)}</p>
             {detailRepo.skills !== undefined && detailRepo.skills.length > 0 && (
               <div className="dpc-detailSection">
                 <div className="dpc-detailLabel">{t('marketSkillListLabel')}</div>
-                <div className="dpc-detailTags">
-                  {detailRepo.skills.map(name => <span className="dpc-tag" key={name}>{name}</span>)}
-                </div>
+                <ul className="dpc-skillList">
+                  {detailRepo.skills.map(item => (
+                    <li className="dpc-skillItem" key={item.name}>
+                      <code className="dpc-skillName">{item.name}</code>
+                      {item.description !== undefined && (
+                        <span className="dpc-skillDesc">{pick(item.description, item.descriptionZh)}</span>
+                      )}
+                    </li>
+                  ))}
+                </ul>
               </div>
             )}
           </>
         )}
         {detailServer !== null && (
           <>
-            <p className="dpc-detailDesc">{desc(detailServer)}</p>
+            <p className="dpc-detailDesc">{longText(detailServer)}</p>
             {detailServer.command !== undefined && (
               <div className="dpc-detailSection">
                 <div className="dpc-detailLabel">{t('marketCommandLabel')}</div>

package/src/client/css.ts

@@ -108,10 +108,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: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/index.ts

@@ -131,6 +131,13 @@ export function apply(ctx: CapabilitiesClientContext): void {
   })
 }
 
+/** One skill inside a market repository's inventory, as the browser sees it. */
+export interface MarketSkillItemView {
+  name: string
+  description?: string
+  descriptionZh?: string
+}
+
 /** One skills-market repository as the browser sees it. */
 export interface MarketRepoView {
   id: string
@@ -138,10 +145,12 @@ export interface MarketRepoView {
   nameZh?: string
   description: string
   descriptionZh?: string
+  detail?: string
+  detailZh?: string
   url: string
   homepage?: string
   skillCount?: number
-  skills?: string[]
+  skills?: MarketSkillItemView[]
 }
 
 /** One MCP-market server as the browser sees it. */
@@ -160,4 +169,6 @@ export interface MarketServerView {
   category?: string
   runtime?: string
   tools?: string[]
+  detail?: string
+  detailZh?: string
 }

package/src/market.test.ts

@@ -8,11 +8,13 @@ const okJson = (body: unknown): typeof fetch =>
 describe('loadMarketIndex', () => {
   it('prefers a valid remote index', async () => {
     const index = await loadMarketIndex('skills', {
-      fetcher: okJson({ repos: [{ id: 'r1', name: 'Repo', description: 'd', url: 'https://github.com/a/b', skills: ['s1', 's2'] }] }),
+      fetcher: okJson({ repos: [{ id: 'r1', name: 'Repo', description: 'd', url: 'https://github.com/a/b', detail: 'long', detailZh: '长文', skills: [{ name: 's1', description: 'first', descriptionZh: '第一个' }, { name: 's2' }, 'junk'] }] }),
     })
     expect(index?.source).toBe('remote')
     expect(index?.skills?.[0]?.id).toBe('r1')
-    expect(index?.skills?.[0]?.skills).toEqual(['s1', 's2'])
+    expect(index?.skills?.[0]?.detail).toBe('long')
+    expect(index?.skills?.[0]?.detailZh).toBe('长文')
+    expect(index?.skills?.[0]?.skills).toEqual([{ name: 's1', description: 'first', descriptionZh: '第一个' }, { name: 's2' }])
   })
 
   it('falls back to the bundled snapshot when remote is unreachable or invalid', async () => {
@@ -30,7 +32,7 @@ describe('loadMarketIndex', () => {
     const index = await loadMarketIndex('mcp', {
       fetcher: okJson({
         servers: [
-          { id: 'ok', name: 'OK', description: 'd', transport: 'stdio', command: 'npx', args: ['-y', 'x'], envKeys: ['K'], homepage: 'https://x', tools: ['t1'] },
+          { id: 'ok', name: 'OK', description: 'd', transport: 'stdio', command: 'npx', args: ['-y', 'x'], envKeys: ['K'], homepage: 'https://x', tools: ['t1'], detail: 'long' },
           { id: 'no-command', name: 'Bad', description: 'd', transport: 'stdio', homepage: 'https://x' },
           { id: 'no-home', name: 'Bad2', description: 'd', transport: 'stdio', command: 'npx' },
           'not an object',
@@ -39,7 +41,7 @@ describe('loadMarketIndex', () => {
     })
     expect(index?.source).toBe('remote')
     expect(index?.servers).toHaveLength(1)
-    expect(index?.servers?.[0]).toMatchObject({ id: 'ok', envKeys: ['K'], tools: ['t1'] })
+    expect(index?.servers?.[0]).toMatchObject({ id: 'ok', envKeys: ['K'], tools: ['t1'], detail: 'long' })
   })
 
   it('ships parseable bundled snapshots with expected top-level shape', () => {

package/src/market.ts

@@ -13,6 +13,13 @@ import { fileURLToPath } from 'node:url'
 /** Which catalog a request wants. */
 export type MarketKind = 'skills' | 'mcp'
 
+/** One skill inside a market repository's inventory. */
+export interface MarketSkillItem {
+  name: string
+  description?: string
+  descriptionZh?: string
+}
+
 /** One installable skill repository in the skills index. */
 export interface MarketSkillRepo {
   id: string
@@ -20,11 +27,14 @@ export interface MarketSkillRepo {
   nameZh?: string
   description: string
   descriptionZh?: string
+  /** Long-form intro for the detail view (falls back to description). */
+  detail?: string
+  detailZh?: string
   url: string
   homepage?: string
   skillCount?: number
-  /** Skill names inside the repository, for the market detail view. */
-  skills?: string[]
+  /** Skill inventory for the market detail view. */
+  skills?: MarketSkillItem[]
 }
 
 /** One installable server in the MCP index. */
@@ -45,6 +55,9 @@ export interface MarketMcpServer {
   runtime?: string
   /** Tool names the server exposes, for the market detail view. */
   tools?: string[]
+  /** Long-form intro for the detail view (falls back to description). */
+  detail?: string
+  detailZh?: string
 }
 
 export interface MarketIndex {
@@ -66,6 +79,22 @@ export function bundledMarketPath(kind: MarketKind): string {
 const isString = (value: unknown): value is string => typeof value === 'string' && value !== ''
 const isStringArray = (value: unknown): value is string[] => Array.isArray(value) && value.every(isString)
 
+function parseSkillItems(value: unknown): MarketSkillItem[] | null {
+  if (!Array.isArray(value)) return null
+  const out: MarketSkillItem[] = []
+  for (const item of value) {
+    if (typeof item !== 'object' || item === null) continue
+    const record = item as Record<string, unknown>
+    if (!isString(record.name)) continue
+    out.push({
+      name: record.name,
+      ...isString(record.description) ? { description: record.description } : {},
+      ...isString(record.descriptionZh) ? { descriptionZh: record.descriptionZh } : {},
+    })
+  }
+  return out.length > 0 ? out : null
+}
+
 function parseSkillsIndex(parsed: unknown): MarketSkillRepo[] | null {
   if (typeof parsed !== 'object' || parsed === null) return null
   const repos = (parsed as { repos?: unknown }).repos
@@ -75,16 +104,19 @@ function parseSkillsIndex(parsed: unknown): MarketSkillRepo[] | null {
     if (typeof entry !== 'object' || entry === null) continue
     const record = entry as Record<string, unknown>
     if (!isString(record.id) || !isString(record.name) || !isString(record.description) || !isString(record.url)) continue
+    const skills = parseSkillItems(record.skills)
     out.push({
       id: record.id,
       name: record.name,
       ...isString(record.nameZh) ? { nameZh: record.nameZh } : {},
       description: record.description,
       ...isString(record.descriptionZh) ? { descriptionZh: record.descriptionZh } : {},
+      ...isString(record.detail) ? { detail: record.detail } : {},
+      ...isString(record.detailZh) ? { detailZh: record.detailZh } : {},
       url: record.url,
       ...isString(record.homepage) ? { homepage: record.homepage } : {},
       ...(typeof record.skillCount === 'number' ? { skillCount: record.skillCount } : {}),
-      ...isStringArray(record.skills) ? { skills: record.skills } : {},
+      ...(skills !== null ? { skills } : {}),
     })
   }
   return out.length > 0 ? out : null
@@ -117,6 +149,8 @@ function parseMcpIndex(parsed: unknown): MarketMcpServer[] | null {
       ...isString(record.category) ? { category: record.category } : {},
       ...isString(record.runtime) ? { runtime: record.runtime } : {},
       ...isStringArray(record.tools) ? { tools: record.tools } : {},
+      ...isString(record.detail) ? { detail: record.detail } : {},
+      ...isString(record.detailZh) ? { detailZh: record.detailZh } : {},
     })
   }
   return out.length > 0 ? out : null