@chatcode/cco-market 1.45.1

package/src/client/SkillMarketSection.tsx

@@ -0,0 +1,162 @@
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
+import { Button, Input, Pill } from '@deepseek-ai/dsh-client-ui-primitives'
+import { api, type Translate } from './market-data.ts'
+import css from './SkillMarket.module.css'
+
+interface SkillItem {
+  readonly id: number
+  readonly name: string
+  readonly description: string
+  readonly category: string
+  readonly downloads: number
+  readonly version: string
+  readonly author: string
+  readonly creatorName: string
+}
+
+interface ListResult {
+  readonly items: readonly SkillItem[]
+  readonly total: number
+  readonly page: number
+  readonly pageSize: number
+}
+
+interface InstalledSkill {
+  readonly name: string
+  readonly location: 'project' | 'user'
+  readonly path: string
+}
+
+export interface SkillMarketSessions {
+  readonly list: {
+    subscribe(callback: () => void): () => void
+    getSnapshot(): {
+      readonly current?: string
+      readonly byId: Readonly<Record<string, { readonly cwd?: string }>>
+    }
+  }
+}
+
+/** Browser skill catalog backed by the host's authoritative session workspace. */
+export function SkillMarketSection({ t, sessions }: { readonly t: Translate; readonly sessions: SkillMarketSessions }) {
+  const subscribe = useMemo(() => (callback: () => void) => sessions.list.subscribe(callback), [sessions])
+  const getSnapshot = useCallback(() => sessions.list.getSnapshot(), [sessions])
+  const sessionList = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+  const sessionId = sessionList.current
+  const cwd = sessionId === undefined ? undefined : sessionList.byId[sessionId]?.cwd
+  const [query, setQuery] = useState('')
+  const [deferredQuery, setDeferredQuery] = useState('')
+  const [page, setPage] = useState(1)
+  const [result, setResult] = useState<ListResult>({ items: [], total: 0, page: 1, pageSize: 12 })
+  const [installed, setInstalled] = useState<readonly InstalledSkill[]>([])
+  const [loading, setLoading] = useState(true)
+  const [working, setWorking] = useState<string | undefined>()
+  const [error, setError] = useState<string | undefined>()
+  const [notice, setNotice] = useState<string | undefined>()
+
+  useEffect(() => {
+    const timer = setTimeout(() => { setDeferredQuery(query); setPage(1) }, 300)
+    return () => clearTimeout(timer)
+  }, [query])
+
+  const loadInstalled = useCallback(async () => {
+    if (sessionId === undefined || cwd === undefined) {
+      setInstalled([])
+      return
+    }
+    const response = await fetch(api(`dsh-market/skills/installed?sessionId=${encodeURIComponent(sessionId)}`))
+    const body = await readResponse<{ items: readonly InstalledSkill[] }>(response)
+    setInstalled(body.items)
+  }, [cwd, sessionId])
+
+  const refresh = useCallback(async () => {
+    setLoading(true)
+    setError(undefined)
+    const params = new URLSearchParams({ page: String(page), pageSize: '12', sort: 'latest' })
+    if (deferredQuery.trim()) params.set('search', deferredQuery.trim())
+    try {
+      const [catalog] = await Promise.all([
+        fetch(api(`dsh-market/skills?${params.toString()}`)).then(response => readResponse<ListResult>(response)),
+        loadInstalled(),
+      ])
+      setResult(catalog)
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      setLoading(false)
+    }
+  }, [deferredQuery, loadInstalled, page])
+
+  useEffect(() => { void refresh() }, [refresh])
+  const installedNames = useMemo(() => new Set(installed.map(item => item.name)), [installed])
+  const pages = Math.max(1, Math.ceil(result.total / result.pageSize))
+
+  async function install(item: SkillItem, location: 'project' | 'user'): Promise<void> {
+    if (sessionId === undefined || cwd === undefined) return
+    setWorking(`${item.id}:${location}`)
+    setError(undefined)
+    setNotice(undefined)
+    try {
+      const response = await fetch(api('dsh-market/skills/install'), {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ id: item.id, name: item.name, version: item.version, location, sessionId }),
+      })
+      const installedResult = await readResponse<{ installPath: string }>(response)
+      setNotice(`${t('skillInstalledAt')} ${installedResult.installPath}`)
+      await loadInstalled()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause))
+    } finally {
+      setWorking(undefined)
+    }
+  }
+
+  return <section className={css.root}>
+    <header className={css.head}>
+      <div>
+        <h2 className={css.title}>{t('skillNav')}</h2>
+        <p className={css.subtitle}>{t('skillSubtitle')}</p>
+      </div>
+      <Input value={query} onChange={event => setQuery(event.currentTarget.value)} placeholder={t('skillSearch')} />
+    </header>
+    <p className={css.workspace}>{cwd === undefined ? t('skillNeedSession') : `${t('skillWorkspace')} ${cwd}`}</p>
+    <p className={css.warning}>{t('skillTrustWarning')}</p>
+    {error && <div className={css.error}>{error} <Button size="sm" variant="outline" onClick={() => void refresh()}>{t('skillRetry')}</Button></div>}
+    {notice && <div className={css.notice}>{notice}</div>}
+    {loading ? <p className={css.state}>{t('skillLoading')}</p> : result.items.length === 0 ? <p className={css.state}>{t('skillEmpty')}</p> : <div className={css.grid}>
+      {result.items.map(item => <article className={css.card} key={item.id}>
+        <div className={css.cardHead}>
+          <h3>{item.name}</h3>
+          {installedNames.has(item.name) && <Pill>{t('skillInstalled')}</Pill>}
+        </div>
+        <p className={css.description}>{item.description || t('skillNoDescription')}</p>
+        <p className={css.meta}>{item.version ? `v${item.version}` : ''}{item.author || item.creatorName ? ` · ${item.author || item.creatorName}` : ''}{` · ${item.downloads} ${t('skillDownloads')}`}</p>
+        <div className={css.actions}>
+          <Button className={css.projectInstall} size="sm" variant="primary" disabled={cwd === undefined || working !== undefined} onClick={() => void install(item, 'project')}>
+            {working === `${item.id}:project` ? t('skillInstalling') : t('skillInstallProject')}
+          </Button>
+          <Button size="sm" variant="outline" disabled={cwd === undefined || working !== undefined} onClick={() => void install(item, 'user')}>
+            {working === `${item.id}:user` ? t('skillInstalling') : t('skillInstallUser')}
+          </Button>
+        </div>
+      </article>)}
+    </div>}
+    <footer className={css.pager}>
+      <Button size="sm" variant="outline" disabled={page <= 1 || loading} onClick={() => setPage(value => value - 1)}>{t('skillPrevious')}</Button>
+      <span>{page} / {pages} · {result.total}</span>
+      <Button size="sm" variant="outline" disabled={page >= pages || loading} onClick={() => setPage(value => value + 1)}>{t('skillNext')}</Button>
+    </footer>
+  </section>
+}
+
+async function readResponse<T>(response: Response): Promise<T> {
+  const body = await response.json() as unknown
+  if (!response.ok) {
+    const message = typeof body === 'object' && body !== null && 'error' in body && typeof body.error === 'string'
+      ? body.error
+      : `HTTP ${response.status}`
+    throw new Error(message)
+  }
+  return body as T
+}

package/src/client/comments.ts

@@ -0,0 +1,54 @@
+/**
+ * giscus wiring for the in-market comment thread.
+ *
+ * A plugin has ONE discussion, whether the reader reached it from
+ * dshmarket.com, from the awesome-dsh-plugin catalog, or from inside the
+ * market itself. That is only true as long as three things agree across the
+ * three surfaces: the repository ids below, the `plugin:<slug>` term, and the
+ * slug those terms are built from. The ids here mirror site/comments.mjs and
+ * the slug mirrors scripts/build-site.mjs; both are asserted in
+ * tests/client/comments.client.spec.ts against the real files, because a
+ * silent disagreement does not fail — it forks the conversation in half and
+ * nobody notices until someone asks why their comment vanished.
+ */
+
+export const GISCUS = Object.freeze({
+  repo: 'awesome-dsh-plugin/awesome-dsh-plugin',
+  repoId: 'R_kgDOT3ajCQ',
+  category: 'Plugins',
+  categoryId: 'DIC_kwDOT3ajCc4DES8_',
+})
+
+/**
+ * The plugin's slug, derived from its GitHub URL exactly as the two site
+ * builders derive it. Entries that live in a subdirectory of a monorepo
+ * (`.../tree/<ref>/packages/x`) get the `owner/repo--packages-x` form, so two
+ * plugins from one repository do not share a thread.
+ */
+export function pluginSlug(url: string): string {
+  const repoPath = url.replace('https://github.com/', '')
+  const repo = repoPath.split('/').slice(0, 2).join('/')
+  const sub = repoPath.includes('/tree/')
+    ? repoPath.split('/tree/')[1]!.replace(/^[^/]+\//, '')
+    : null
+  return sub ? `${repo}--${sub.replaceAll('/', '-')}` : repo
+}
+
+/** The giscus discussion term for a plugin. */
+export const commentsTerm = (url: string): string => `plugin:${pluginSlug(url)}`
+
+/**
+ * GitHub's discussion search narrowed to this plugin's exact shared term.
+ *
+ * This is deliberately composed from constants and the catalog URL only.
+ * In particular it never copies the current page URL: a local ChatCode CLI Web page
+ * may carry its one-time host token there, and sending that to GitHub would
+ * trade a comment-login inconvenience for credential disclosure.
+ */
+export function commentsDiscussionUrl(url: string): string {
+  const term = `"${commentsTerm(url)}"`
+  return `https://github.com/${GISCUS.repo}/discussions?discussions_q=${encodeURIComponent(term)}`
+}
+
+/** giscus's own locale codes, which are not the ones this plugin uses. */
+export const giscusLang = (lang: string): string => (lang === 'zh' ? 'zh-CN' : 'en')

package/src/client/globals.d.ts

@@ -0,0 +1,13 @@
+/** Ambient declarations for the browser client bundle. */
+
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}
+
+interface Window {
+  /** Boot manifest written by the host page for bundle-layer plugins. */
+  __DSH_BOOT__?: {
+    entries?: Array<{ id: string }>
+  }
+}

package/src/client/index.ts

@@ -0,0 +1,180 @@
+/**
+ * dsh-market client: registers a "Market" settings section rendering the
+ * plugin market UI, plus the post-install toast in the shell overlay layer.
+ * Built by tsdown into the __ModuleLoader__ factory bundle at
+ * client/client.js; the only externals are the loader module table's react
+ * entries.
+ */
+import { createElement as h } from 'react'
+import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
+import { en, zh } from './locales.ts'
+import { InstallToast } from './InstallToast.tsx'
+import { MarketErrorBoundary } from './ErrorBoundary.tsx'
+import { MarketSection } from './MarketSection.tsx'
+import { exportMarketLog } from './self-check.ts'
+import { SettingsCard } from './SettingsCard.tsx'
+import type { ThemeSnapshot, Translate } from './market-data.ts'
+import { SkillMarketSection, type SkillMarketSessions } from './SkillMarketSection.tsx'
+
+const NS = 'dsh-market'
+
+/**
+ * Primitives this bundle relies on that did not exist before rc.6. The
+ * primitives module is host-injected (external at build time), so on an
+ * older host the module resolves but these named exports are undefined —
+ * rendering would throw and blank the whole settings dialog. Returning the
+ * gaps lets apply() skip registration for a clean downgrade instead.
+ */
+export const REQUIRED_PRIMITIVES = ['Menu', 'DisclosureRow', 'Tooltip', 'Toast'] as const
+
+export function missingPrimitives(mod: Record<string, unknown>, required: readonly string[] = REQUIRED_PRIMITIVES): string[] {
+  return required.filter(name => mod[name] === undefined)
+}
+
+/**
+ * The host surface the settings card needs, present only on rc.7+.
+ *
+ * The card no longer reads or writes settings — it manages the market's own
+ * package — but `settingsScope` stays as the INJECTION KEY, because its
+ * presence is what distinguishes a host that has the plugin configuration
+ * page from one that does not. The market's namespace (registered in
+ * settings.ts) is likewise still required: the page dispatches a card keyed
+ * by a namespace it serves, so dropping it would take the card with it.
+ */
+interface SettingsScopeHost {
+  slots: {
+    inject(name: string, register: () => unknown): void
+    register(options: Record<string, unknown>, render: () => unknown): unknown
+  }
+}
+
+/** The subset of the theme service this plugin touches. */
+interface ThemeService {
+  getTheme(): ThemeSnapshot | null
+  setTheme(id: string): void
+}
+
+/** The subset of the locale service this plugin touches. */
+interface LocaleService {
+  register(namespace: string, dicts: { zh: Record<string, string>; en: Record<string, string> }): unknown
+  bind(namespace: string): Translate
+  subscribe(callback: () => void): () => void
+  getSnapshot(): { active: string }
+}
+
+/** The subset of the slots service this plugin touches. */
+interface SlotsService {
+  inject(slot: string, register: () => unknown): void
+  register(meta: Record<string, unknown>, component: () => unknown): unknown
+}
+
+/** The client cordis context shape this plugin relies on (structural: the
+ * host provides the real Context; typing the touched surface keeps this
+ * external package free of monorepo-internal type dependencies). */
+interface MarketClientContext {
+  effect(callback: () => unknown, label?: string): void
+  on(event: string, callback: () => void): () => void
+  locale: LocaleService
+  slots: SlotsService
+  theme: ThemeService
+  sessions: SkillMarketSessions
+}
+
+export const name = 'dsh-market'
+// 'theme' is safe to require: ui-layout (mandatory in every web composition)
+// already hard-depends on it. This cordis's object-form inject means
+// intercept config, NOT {required,optional} — do not use it here.
+export const inject = ['slots', 'locale', 'theme', 'sessions']
+export function apply(ctx: MarketClientContext): void {
+  // Older hosts resolve the primitives module but lack the rc.6 exports the
+  // market renders with. Skip registration (market simply absent from the
+  // settings list) rather than throwing mid-render and blanking the dialog.
+  const gaps = missingPrimitives(primitives as unknown as Record<string, unknown>)
+  if (gaps.length > 0) {
+    console.warn('[ChatCode CLI Market] host ui-primitives missing ' + gaps.join(', ') + ' — market section disabled (ChatCode CLI >= 0.1.0-rc.6 required)')
+    return
+  }
+
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-market: dictionaries')
+  const t = ctx.locale.bind(NS)
+
+  // Kept so the removal flow can retire the market's own nav entry the
+  // moment the package is gone: leaving "插件市场" in the left menu after
+  // the user removed it is the card claiming something the profile no
+  // longer agrees with. `register` hands back its own disposer; calling it
+  // twice (here and again when the context unwinds) is harmless, but the
+  // reference is dropped after use so the intent stays readable.
+  let retireSection: (() => void) | null = null
+
+  ctx.slots.inject('settings.section', () => {
+    const off = ctx.slots.register({
+      name: 'settings.section',
+      id: 'market',
+      order: 40,
+      label: () => t('nav'),
+      locale: NS,
+      inject: () => ({ t }),
+    }, (ownerProps: { preferredSubsectionId?: string } = {}) => h(MarketErrorBoundary, {
+      // Wrapped at the registration point, so the boundary is OUTSIDE
+      // everything the section renders — including its portalled layers.
+      // A crash inside used to unmount the whole tree and leave an empty
+      // settings panel with no export-log button, which is how #293 went
+      // months without a usable report (#513 fixed that trigger; this
+      // covers the next one).
+      text: {
+        title: t('crashTitle'),
+        hint: t('crashHint'),
+        reload: t('crashReload'),
+        details: t('crashDetails'),
+      },
+      actions: h('button', {
+        type: 'button',
+        onClick: () => { void exportMarketLog().catch(() => {}) },
+      }, t('exportLog')),
+    }, h(MarketSection, {
+      t,
+      locale: ctx.locale,
+      theme: ctx.theme,
+      themeStore: {
+        subscribe: (cb: () => void) => ctx.on('theme/change', cb),
+        getSnapshot: () => ctx.theme.getTheme(),
+      },
+      preferredSubsectionId: ownerProps.preferredSubsectionId,
+    })))
+    if (typeof off === 'function') retireSection = off as () => void
+    return off
+  })
+
+  ctx.slots.inject('settings.section', () => ctx.slots.register({
+    name: 'settings.section',
+    id: 'skill-market',
+    order: 41,
+    label: () => t('skillNav'),
+    locale: NS,
+    inject: () => ({ t }),
+  }, () => h(SkillMarketSection, { t, sessions: ctx.sessions })))
+
+  // The settings card (dsh >= 0.1.0-rc.7). Registered through a NESTED
+  // inject on purpose: naming settingsScope in the module-level `inject`
+  // would keep this whole plugin unmounted on any host without that
+  // service — the market's own page would vanish on rc.6 to gain a card
+  // rc.6 cannot render. Nested, the card simply never appears there.
+  const settingsCtx = ctx as unknown as {
+    inject(services: string[], callback: (scoped: SettingsScopeHost) => void): void
+  }
+  settingsCtx.inject(['settingsScope'], (scoped) => {
+    scoped.slots.inject('settings.plugin.item', () => scoped.slots.register({
+      name: 'settings.plugin.item',
+      key: NS,
+      locale: NS,
+      inject: () => ({ t }),
+    }, () => h(SettingsCard, { t, onRemoved: () => { const off = retireSection; retireSection = null; off?.() } })))
+  })
+
+  const Toast = () => h(InstallToast, { t })
+  ctx.slots.inject('shell.overlay', () => ctx.slots.register({
+    name: 'shell.overlay',
+    id: 'dsh-market-toast',
+    label: () => 'dsh-market',
+  }, Toast))
+}