dsh-plugin-capabilities 0.2.1 → 0.3.1

package/src/client/MarketTab.tsx

@@ -48,6 +48,7 @@ export function MarketTab(props: { t: Translate; market: MarketInjected; mcp: Mc
   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 [detail, setDetail] = useState<{ kind: Segment; id: string } | null>(null)
   const [reload, setReload] = useState(0)
 
   const refreshSkills = useCallback((): void => {
@@ -128,6 +129,15 @@ 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() }
+
+  // The card list refreshes on install/uninstall, so the detail modal resolves
+  // its entry by id each render and follows the fresh installed state.
+  const detailRepo = detail !== null && detail.kind === 'skills' && repos !== null ? repos.find(repo => repo.id === detail.id) ?? null : null
+  const detailServer = detail !== null && detail.kind === 'mcp' && servers !== null ? servers.find(server => server.id === detail.id) ?? null : null
 
   return (
     <div className="dpc-section">
@@ -172,7 +182,7 @@ export function MarketTab(props: { t: Translate; market: MarketInjected; mcp: Mc
           {repos !== null && repos.length > 0 && (
             <ul className="dpc-cards">
               {repos.map((repo) => (
-                <li className="dpc-card" key={repo.id}>
+                <li className="dpc-card" key={repo.id} onClick={() => setDetail({ kind: 'skills', id: 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>}
@@ -180,14 +190,15 @@ export function MarketTab(props: { t: Translate; market: MarketInjected; mcp: Mc
                   </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>
+                    <button type="button" className="dpc-link" onClick={() => setDetail({ kind: 'skills', id: repo.id })}>{t('marketDetail')}</button>
+                    <a className="dpc-link" href={repo.homepage ?? repo.url} target="_blank" rel="noreferrer" onClick={cardStop}>{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) })}>
+                      <Button variant="ghost" size="sm" disabled={busyId !== null} onClick={(event) => { event.stopPropagation(); 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)}>
+                      <Button variant="primary" size="sm" disabled={busyId !== null} onClick={(event) => { event.stopPropagation(); void doInstallRepo(repo) }}>
                         {busyId === repo.id ? t('marketInstalling') : t('marketInstall')}
                       </Button>
                     )}
@@ -207,7 +218,7 @@ export function MarketTab(props: { t: Translate; market: MarketInjected; mcp: Mc
           {servers !== null && servers.length > 0 && (
             <ul className="dpc-cards">
               {servers.map((server) => (
-                <li className="dpc-card" key={server.id}>
+                <li className="dpc-card" key={server.id} onClick={() => setDetail({ kind: 'mcp', id: server.id })}>
                   <div className="dpc-cardTop">
                     <strong className="dpc-cardTitle" title={server.id}>{title(server)}</strong>
                     <span className="dpc-tag">{server.transport}</span>
@@ -219,20 +230,21 @@ export function MarketTab(props: { t: Translate; market: MarketInjected; mcp: Mc
                     <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>
+                    <button type="button" className="dpc-link" onClick={() => setDetail({ kind: 'mcp', id: server.id })}>{t('marketDetail')}</button>
+                    <a className="dpc-link" href={server.homepage} target="_blank" rel="noreferrer" onClick={cardStop}>{t('marketHome')}</a>
                     <span className="dpc-spacer" />
                     {server.installed ? (
-                      <Button variant="ghost" size="sm" disabled={busyId !== null} onClick={() => void mcp.list().then(
+                      <Button variant="ghost" size="sm" disabled={busyId !== null} onClick={(event) => { event.stopPropagation(); 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)}>
+                      <Button variant="primary" size="sm" disabled={busyId !== null} onClick={(event) => { event.stopPropagation(); void doInstallMcp(server) }}>
                         {busyId === server.id ? t('marketInstalling') : t('marketAdd')}
                       </Button>
                     )}
@@ -244,6 +256,101 @@ export function MarketTab(props: { t: Translate; market: MarketInjected; mcp: Mc
         </>
       )}
 
+      <Modal
+        open={detailRepo !== null || detailServer !== null}
+        onClose={() => setDetail(null)}
+        title={detailRepo !== null ? title(detailRepo) : detailServer !== null ? title(detailServer) : ''}
+        footer={
+          <>
+            {detailRepo !== null && (
+              <a className="dpc-link" href={detailRepo.homepage ?? detailRepo.url} target="_blank" rel="noreferrer">{t('marketHome')}</a>
+            )}
+            {detailServer !== null && (
+              <a className="dpc-link" href={detailServer.homepage} target="_blank" rel="noreferrer">{t('marketHome')}</a>
+            )}
+            <span className="dpc-spacer" />
+            {detailRepo !== null && (detailRepo.installedId !== null ? (
+              <Button variant="ghost" disabled={busyId !== null} onClick={() => { setConfirmUninstall({ kind: 'root', id: detailRepo.installedId as string, name: title(detailRepo) }); setDetail(null) }}>
+                {t('marketUninstall')}
+              </Button>
+            ) : (
+              <Button variant="primary" disabled={busyId !== null} onClick={() => void doInstallRepo(detailRepo)}>
+                {busyId === detailRepo.id ? t('marketInstalling') : t('marketInstall')}
+              </Button>
+            ))}
+            {detailServer !== null && (detailServer.installed ? (
+              <Button variant="ghost" disabled={busyId !== null} onClick={() => void mcp.list().then(
+                (body) => {
+                  const row = body.servers.find(item => item.serverName === detailServer.id)
+                  if (row !== undefined) { setConfirmUninstall({ kind: 'mcp', id: row.id, name: title(detailServer) }); setDetail(null) }
+                },
+                (error: Error) => setOutcome({ ok: false, text: `${t('failed')}: ${String(error.message ?? error)}` }),
+              )}>
+                {t('marketUninstall')}
+              </Button>
+            ) : (
+              <Button variant="primary" disabled={busyId !== null} onClick={() => void doInstallMcp(detailServer)}>
+                {busyId === detailServer.id ? t('marketInstalling') : t('marketAdd')}
+              </Button>
+            ))}
+          </>
+        }
+      >
+        {detailRepo !== null && (
+          <>
+            <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>
+                <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">{longText(detailServer)}</p>
+            {detailServer.command !== undefined && (
+              <div className="dpc-detailSection">
+                <div className="dpc-detailLabel">{t('marketCommandLabel')}</div>
+                <code className="dpc-code">{[detailServer.command, ...(detailServer.args ?? [])].join(' ')}</code>
+              </div>
+            )}
+            {detailServer.transport === 'streamable-http' && detailServer.url !== undefined && (
+              <div className="dpc-detailSection">
+                <div className="dpc-detailLabel">{t('marketCommandLabel')}</div>
+                <code className="dpc-code">{detailServer.url}</code>
+              </div>
+            )}
+            {detailServer.envKeys !== undefined && detailServer.envKeys.length > 0 && (
+              <div className="dpc-detailSection">
+                <div className="dpc-detailLabel">{t('marketNeedsEnv')}</div>
+                <div className="dpc-detailTags">
+                  {detailServer.envKeys.map(key => <span className="dpc-tag" key={key}>{key}</span>)}
+                </div>
+              </div>
+            )}
+            {detailServer.tools !== undefined && detailServer.tools.length > 0 && (
+              <div className="dpc-detailSection">
+                <div className="dpc-detailLabel">{t('marketToolsLabel')}</div>
+                <div className="dpc-detailTags">
+                  {detailServer.tools.map(name => <span className="dpc-tag" key={name}>{name}</span>)}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </Modal>
+
       <Modal
         open={confirmUninstall !== null}
         onClose={() => setConfirmUninstall(null)}

package/src/client/css.ts

@@ -26,7 +26,7 @@ export const CSS = `
 .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{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;cursor:pointer}
 .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)}
@@ -108,5 +108,14 @@ 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. */
+.dpc-detailDesc{margin:0;font-size:13px;line-height:20px}
+.dpc-detailSection{margin-top:12px;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-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: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,9 +145,12 @@ export interface MarketRepoView {
   nameZh?: string
   description: string
   descriptionZh?: string
+  detail?: string
+  detailZh?: string
   url: string
   homepage?: string
   skillCount?: number
+  skills?: MarketSkillItemView[]
 }
 
 /** One MCP-market server as the browser sees it. */
@@ -158,4 +168,7 @@ export interface MarketServerView {
   homepage: string
   category?: string
   runtime?: string
+  tools?: string[]
+  detail?: string
+  detailZh?: string
 }

package/src/client/locales.ts

@@ -125,6 +125,10 @@ export const zh = {
   marketRepoInstalled: '仓库已安装，技能稍候出现在「技能」页列表。',
   marketUninstallConfirm: '确认移除？',
   marketUninstallRootWarn: '将取消扫描该仓库并删除下载的副本（移除后可重新安装）。',
+  marketDetail: '详情',
+  marketSkillListLabel: '技能清单',
+  marketToolsLabel: '提供工具',
+  marketCommandLabel: '启动命令',
 }
 
 export const en = {
@@ -252,4 +256,8 @@ export const en = {
   marketRepoInstalled: 'Repository installed — its skills appear on the Skills tab shortly.',
   marketUninstallConfirm: 'Uninstall?',
   marketUninstallRootWarn: 'Stops scanning the repository and deletes the downloaded copy (you can reinstall later).',
+  marketDetail: 'Details',
+  marketSkillListLabel: 'Skills included',
+  marketToolsLabel: 'Tools provided',
+  marketCommandLabel: 'Launch command',
 }

package/src/market.test.ts

@@ -8,10 +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' }] }),
+      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]?.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 () => {
@@ -29,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' },
+          { 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',
@@ -38,7 +41,7 @@ describe('loadMarketIndex', () => {
     })
     expect(index?.source).toBe('remote')
     expect(index?.servers).toHaveLength(1)
-    expect(index?.servers?.[0]).toMatchObject({ id: 'ok', envKeys: ['K'] })
+    expect(index?.servers?.[0]).toMatchObject({ id: 'ok', envKeys: ['K'], tools: ['t1'], detail: 'long' })
   })
 
   it('ships parseable bundled snapshots with expected top-level shape', () => {
@@ -54,4 +57,12 @@ describe('loadMarketIndex', () => {
     const index = await loadMarketIndex('mcp', { fetcher: okJson({ servers: [{ id: 'http1', name: 'H', description: 'd', transport: 'streamable-http', url: 'https://e/mcp', homepage: 'https://x' }] }) })
     expect(index?.servers?.[0]).toMatchObject({ transport: 'streamable-http', url: 'https://e/mcp' })
   })
+
+  it('bundles skill and tool inventories for the market detail view', async () => {
+    const failing = (async () => { throw new Error('offline') }) as unknown as typeof fetch
+    const skills = await loadMarketIndex('skills', { fetcher: failing })
+    expect(skills?.skills?.some(repo => (repo.skills?.length ?? 0) > 0)).toBe(true)
+    const mcp = await loadMarketIndex('mcp', { fetcher: failing })
+    expect(mcp?.servers?.some(server => (server.tools?.length ?? 0) > 0)).toBe(true)
+  })
 })

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,9 +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 inventory for the market detail view. */
+  skills?: MarketSkillItem[]
 }
 
 /** One installable server in the MCP index. */
@@ -41,6 +53,11 @@ export interface MarketMcpServer {
   category?: string
   /** Runtime hint shown next to stdio commands (npx / uvx). */
   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 {
@@ -62,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
@@ -71,15 +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 } : {}),
+      ...(skills !== null ? { skills } : {}),
     })
   }
   return out.length > 0 ? out : null
@@ -111,6 +148,9 @@ function parseMcpIndex(parsed: unknown): MarketMcpServer[] | null {
       homepage: record.homepage,
       ...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