@chatcode/cco-better-sidebar 0.18.0-rc.3 → 0.18.0-rc.5

package/src/client/PluginMarketSettingsSection.tsx

@@ -0,0 +1,55 @@
+/** Replace the product's market settings seat through the public slot API. */
+import { useCallback, useEffect, useState, useSyncExternalStore } from 'react'
+import type { Context } from '../context-types.ts'
+import { api, type SessionScope } from './api.ts'
+import { useCurrentSessionId } from './current-session.ts'
+import { PluginMarketView } from './PluginMarketView.tsx'
+import { RenderBoundary } from './RenderBoundary.tsx'
+import { t } from './locales.ts'
+import type { PluginMarketCatalog } from './plugin-market-catalog.ts'
+
+export function PluginMarketSettingsSection({ ctx, catalog }: { ctx: Context; catalog: PluginMarketCatalog }): JSX.Element {
+  const sessionId = useCurrentSessionId(ctx) ?? ''
+  const sessions = useSyncExternalStore(
+    useCallback(listener => ctx.sessions.list.subscribe(listener), [ctx]),
+    useCallback(() => ctx.sessions.list.getSnapshot(), [ctx]),
+  )
+  useSyncExternalStore(
+    useCallback(listener => ctx.locale.subscribe(listener), [ctx]),
+    useCallback(() => ctx.locale.getSnapshot(), [ctx]),
+  )
+  const cwd = sessions.byId[sessionId]?.cwd
+  const key = `${sessionId}\0${cwd ?? ''}`
+  const [context, setContext] = useState<{ key: string; scope: SessionScope }>()
+  const [error, setError] = useState('')
+  const [revision, setRevision] = useState(0)
+  useEffect(() => {
+    const controller = new AbortController()
+    let active = true
+    setError('')
+    void api.pluginMarketContext({ sessionId, cwd }, controller.signal)
+      .then(scope => { if (active) setContext({ key, scope }) })
+      .catch(cause => { if (active) setError(cause instanceof Error ? cause.message : String(cause)) })
+    return () => { active = false; controller.abort() }
+  }, [sessionId, cwd, revision])
+
+  return <div data-chatcode-plugin-market-settings>
+    {context?.key === key ? <PluginMarketView key={key} scope={context.scope} catalog={catalog} visible />
+      : error ? <><p role="status">{error}</p><button type="button" onClick={() => setRevision(value => value + 1)}>{t('pluginMarketRefresh')}</button></>
+      : <p role="status">{t('pluginMarketLoading')}</p>}
+  </div>
+}
+
+export function registerPluginMarketSettings(ctx: Context, catalog: PluginMarketCatalog): void {
+  // Same seat as dsh-market, lower priority wins independent of activation
+  // order. The settings shell projects elected entries, giving one nav row.
+  // The old market component never mounts; the skill-market seat is untouched.
+  ctx.slots.inject('settings.section', () => ctx.slots.register({
+    name: 'settings.section',
+    id: 'market',
+    order: 40,
+    priority: -10,
+    label: () => t('pluginMarketTitle'),
+    inject: () => ({ ctx, catalog }),
+  }, ({ ctx, catalog }: { ctx: Context; catalog: PluginMarketCatalog }) => <RenderBoundary><PluginMarketSettingsSection ctx={ctx} catalog={catalog} /></RenderBoundary>))
+}

package/src/client/PluginMarketView.module.css

@@ -0,0 +1,35 @@
+.root { box-sizing: border-box; height: 100%; overflow: auto; padding: 4px; color: var(--dsw-alias-label-primary); font: var(--dsw-font-s-14); }
+.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
+.head > span { box-sizing: border-box; min-width: 220px; max-width: 380px; flex: 1; }
+.title { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; }
+.subtitle, .project, .meta, .state { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); margin: 2px 0; }
+.project { overflow-wrap: anywhere; }
+.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 12px; }
+.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+.tabs button { white-space: nowrap; }
+.tabs button[aria-pressed='true'] { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-primary); font-weight: 600; }
+.breadcrumb { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
+.breadcrumb button { flex-shrink: 0; white-space: nowrap; }
+.breadcrumb > span:last-child { min-width: 0; }
+.warning { padding: 8px 10px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; margin: 10px 0; font-size: 12px; color: var(--dsw-alias-label-secondary); }
+.error, .notice { font-size: 12px; padding: 8px 10px; border-radius: 8px; margin: 10px 0; overflow-wrap: anywhere; }
+.error { color: var(--dsw-alias-state-danger-primary); background: var(--dsw-alias-state-danger-bg); }
+.notice { color: var(--dsw-alias-state-success-primary); background: var(--dsw-alias-state-success-bg); }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin-top: 12px; }
+.card { display: flex; flex-direction: column; min-width: 0; min-height: 150px; padding: 12px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; background: var(--dsw-alias-bg-layer-1); }
+.cardHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.card h3 { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
+.description { font-size: 12px; line-height: 18px; margin: 8px 0; flex: 1; color: var(--dsw-alias-label-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
+.meta { min-height: 18px; overflow-wrap: anywhere; }
+.actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
+.projectInstall.projectInstall { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); }
+.projectInstall.projectInstall:hover:not(:disabled) { background-color: var(--dsw-alias-button-primary-fill) !important; color: var(--dsw-alias-label-primary-foreground) !important; }
+.marketCard { text-align: left; color: inherit; font: inherit; cursor: pointer; width: 100%; }
+.marketCard:hover:not(:disabled) { border-color: var(--dsw-alias-border-l1); background: var(--dsw-alias-interactive-bg-hover); }
+.marketCard:disabled { cursor: not-allowed; opacity: 0.5; }
+.spinning { display: inline-flex; animation: marketRefresh 1s linear infinite; }
+@keyframes marketRefresh { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .spinning { animation: none; } }
+.marketCard:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary); outline-offset: 2px; }
+.enter { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; }
+@media (max-width: 640px) { .head { flex-direction: column; } .head > span { width: 100%; max-width: none; min-width: 0; } }

package/src/client/PluginMarketView.tsx

@@ -0,0 +1,154 @@
+/** Two catalog levels with project/user actions directly on plugin cards. */
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react'
+import { Button, Input, Pill } from '@deepseek-ai/dsh-client-ui-primitives'
+import { api, type SessionScope } from './api.ts'
+import { t } from './locales.ts'
+import { IconChevronLeftOutline14, IconChevronRightOutline14, IconRefreshOutline14 } from './icons.tsx'
+import type { PluginMarketCatalog } from './plugin-market-catalog.ts'
+import type { InstalledMarketplacePlugin, MarketplacePlugin, PluginMarketScope } from '../plugin-market-shared.ts'
+import css from './PluginMarketView.module.css'
+
+export function PluginMarketView({ scope, visible, catalog }: { scope: SessionScope; visible: boolean; catalog: PluginMarketCatalog }): JSX.Element {
+  const snapshot = useSyncExternalStore(catalog.subscribe, catalog.getSnapshot)
+  const [marketId, setMarketId] = useState<string | null>(null)
+  const [tab, setTab] = useState<'markets' | 'installed'>('markets')
+  const [query, setQuery] = useState('')
+  const [installed, setInstalled] = useState<InstalledMarketplacePlugin[]>([])
+  const [recordsReady, setRecordsReady] = useState(false)
+  const [recordsError, setRecordsError] = useState('')
+  const [message, setMessage] = useState<{ text: string; error: boolean }>()
+  const [working, setWorking] = useState<{ id: string; scope: PluginMarketScope }>()
+  const [revision, setRevision] = useState(0)
+  const pending = useRef(false)
+  const breadcrumbNode = useRef<HTMLDivElement>(null)
+  const mutationVersion = useRef(0)
+  const focusBack = useRef(false)
+  const scopeKey = `${scope.sessionId}\0${scope.cwd ?? ''}`
+  const latestScope = useRef(scopeKey)
+  latestScope.current = scopeKey
+  const markets = snapshot.markets?.data?.marketplaces ?? []
+  const market = markets.find(item => item.id === marketId)
+  const catalogEntry = tab === 'markets' && marketId ? snapshot.plugins[marketId] : snapshot.markets
+  const loading = snapshot.refresh?.status === 'loading' || (tab === 'markets' && (!catalogEntry || catalogEntry.status === 'loading'))
+  const blocked = loading || snapshot.refresh?.status === 'error'
+
+  useEffect(() => {
+    if (!visible) return
+    catalog.start()
+    if (tab === 'markets' && marketId) catalog.ensure(marketId)
+  }, [catalog, visible, tab, marketId])
+  useEffect(() => { setQuery('') }, [tab, marketId])
+  useEffect(() => { if (focusBack.current) { breadcrumbNode.current?.querySelector('button')?.focus(); focusBack.current = false } }, [marketId])
+
+  useEffect(() => {
+    setInstalled([]); setRecordsReady(false); setRecordsError(''); setMessage(undefined)
+  }, [scopeKey])
+  useEffect(() => {
+    if (!visible) return
+    const controller = new AbortController()
+    let active = true
+    let reading = false
+    const read = async (): Promise<void> => {
+      if (pending.current || reading) return
+      reading = true
+      const version = mutationVersion.current
+      try {
+        const records = await api.pluginsInstalled(scope, controller.signal)
+        if (active && !pending.current && version === mutationVersion.current) { setInstalled(records); setRecordsReady(true); setRecordsError('') }
+      } catch (cause) {
+        if (active && version === mutationVersion.current) setRecordsError(cause instanceof Error ? cause.message : String(cause))
+      } finally { reading = false }
+    }
+    void read()
+    // Only local installation records are polled for CLI synchronization.
+    // Remote catalogs are never polled or refreshed by navigation.
+    const timer = setInterval(() => { void read() }, 2000)
+    return () => { active = false; clearInterval(timer); controller.abort() }
+  }, [scopeKey, visible, revision])
+
+  const perform = async (plugin: MarketplacePlugin, installScope: PluginMarketScope): Promise<void> => {
+    const refreshStatus = catalog.getSnapshot().refresh?.status
+    if (pending.current || !recordsReady || blocked || refreshStatus === 'loading' || refreshStatus === 'error') return
+    const key = scopeKey
+    const present = installed.some(item => item.id === plugin.id && item.scope === installScope)
+    pending.current = true
+    mutationVersion.current++
+    setWorking({ id: plugin.id, scope: installScope })
+    setMessage(undefined)
+    try {
+      if (present) await api.pluginUninstall(scope, plugin.id, installScope)
+      else await api.pluginInstall(scope, plugin.id, installScope)
+      const records = await api.pluginsInstalled(scope)
+      if (latestScope.current === key) {
+        setInstalled(records); setRecordsReady(true); setRecordsError('')
+        setMessage({ text: t(present ? 'pluginMarketUninstalled' : 'pluginMarketInstalled'), error: false })
+      }
+    } catch (cause) {
+      if (latestScope.current === key) setMessage({ text: cause instanceof Error ? cause.message : String(cause), error: true })
+    } finally { pending.current = false; setWorking(undefined) }
+  }
+  const refresh = (): void => {
+    if (loading || pending.current) return
+    catalog.refresh(tab === 'markets' && marketId ? marketId : undefined)
+    setRevision(value => value + 1)
+    setMessage(undefined)
+  }
+  const term = query.trim().toLocaleLowerCase()
+  const matches = (item: { name: string; description: string }): boolean => `${item.name} ${item.description}`.toLocaleLowerCase().includes(term)
+  // One installed card per plugin, with independent controls for both scopes.
+  const entries = tab === 'installed' ? [...new Map(installed.map(item => [item.id, item])).values()] : marketId ? snapshot.plugins[marketId]?.data ?? [] : []
+  const filteredPlugins = entries.filter(matches)
+  const filteredMarkets = markets.filter(matches)
+  const showMarkets = tab === 'markets' && !marketId
+  const error = snapshot.refresh?.error || (tab === 'markets' ? catalogEntry?.error : '') || recordsError
+  const warning = [snapshot.markets?.data?.warning, marketId ? snapshot.plugins[marketId]?.warning : ''].filter(Boolean).join('\n')
+  const hasData = tab === 'installed' ? recordsReady : !!catalogEntry?.data
+
+  return <section className={css.root} aria-label={t('pluginMarketTitle')} aria-busy={loading} data-chatcode-plugin-market>
+    <header className={css.head}>
+      <div><h2 className={css.title}>{t('pluginMarketTitle')}</h2><p className={css.subtitle}>{t('pluginMarketSubtitle')}</p></div>
+      <Input disabled={blocked} value={query} onChange={event => setQuery(event.target.value)} placeholder={t('pluginMarketSearch')} aria-label={t('pluginMarketSearch')} />
+    </header>
+    {scope.cwd ? <p className={css.project}>{t('pluginMarketProjectDirectory', { path: scope.cwd })}</p> : null}
+    <div className={css.toolbar}>
+      <div className={css.tabs}>
+        <Button size="sm" variant="ghost" disabled={blocked} aria-pressed={tab === 'markets'} onClick={() => setTab('markets')}>{t('pluginMarketTitle')}</Button>
+        <Button size="sm" variant="ghost" disabled={blocked} aria-pressed={tab === 'installed'} onClick={() => setTab('installed')}>{t('pluginMarketInstalledTab')}</Button>
+      </div>
+      <Button size="sm" variant="outline" aria-label={t('pluginMarketRefresh')} disabled={snapshot.markets?.status === 'loading' || loading || !!working} onClick={refresh}><span aria-hidden="true" className={loading ? css.spinning : undefined}><IconRefreshOutline14 /></span>{t(loading ? 'pluginMarketRefreshing' : 'pluginMarketRefresh')}</Button>
+    </div>
+    {warning && tab === 'markets' ? <p className={css.warning} role="status">{warning}</p> : null}
+    {error ? <p className={css.error} role="status">{error}</p> : null}
+    {message ? <p className={message.error ? css.error : css.notice} role="status">{message.text}</p> : null}
+    {tab === 'markets' && marketId ? <div ref={breadcrumbNode} className={css.breadcrumb}>
+      <Button size="sm" variant="ghost" disabled={blocked} onClick={() => setMarketId(null)}><IconChevronLeftOutline14 />{t('pluginMarketBack')}</Button>
+      <span aria-hidden="true">/</span><span>{market?.name ?? marketId}</span>
+    </div> : null}
+    {loading ? <p className={css.state} role="status">{t(hasData ? 'pluginMarketRefreshing' : 'pluginMarketLoading')}</p> : null}
+    <div className={css.grid} aria-busy={loading}>
+      {showMarkets ? filteredMarkets.map(item => <button key={item.id} type="button" disabled={blocked} className={`${css.card} ${css.marketCard}`} onClick={() => { focusBack.current = true; setMarketId(item.id) }}>
+        <div className={css.cardHead}><h3>{item.name}</h3>{item.official ? <Pill>{t('pluginMarketDefault')}</Pill> : null}</div>
+        <p className={css.description}>{item.description || t('pluginMarketNoDescription')}</p>
+        <span className={css.enter}>{t('pluginMarketBrowse')}<IconChevronRightOutline14 /></span>
+      </button>) : filteredPlugins.map(item => {
+        const records = installed.filter(record => record.id === item.id)
+        const marketName = markets.find(value => value.id === item.marketplaceId)?.name ?? item.marketplaceId
+        return <article key={item.id} className={css.card} aria-label={item.name} data-plugin-id={item.id}>
+          <div className={css.cardHead}><h3>{item.name}</h3>{records.length ? <Pill>{t('pluginMarketInstalledTab')}</Pill> : null}</div>
+          <p className={css.description}>{item.description || t('pluginMarketNoDescription')}</p>
+          <p className={css.meta}>{marketName}{tab === 'installed' && records[0]?.version ? ` · ${records[0].version}` : ''}</p>
+          <div className={css.actions}>
+            {(['project', 'user'] as const).map(installScope => {
+              const present = records.some(record => record.scope === installScope)
+              const busy = working?.id === item.id && working.scope === installScope
+              return <Button key={installScope} size="sm" variant={installScope === 'project' && !present ? 'primary' : 'outline'} className={installScope === 'project' && !present ? css.projectInstall : undefined} disabled={blocked || !!working || !recordsReady} onClick={() => { void perform(item, installScope) }}>
+                {t(busy ? present ? 'pluginMarketUninstalling' : 'pluginMarketInstalling' : present ? 'pluginMarketUninstall' : 'pluginMarketInstall')} · {t(installScope === 'project' ? 'pluginMarketProject' : 'pluginMarketUser')}
+              </Button>
+            })}
+          </div>
+        </article>
+      })}
+    </div>
+    {!loading && hasData && (showMarkets ? filteredMarkets : filteredPlugins).length === 0 ? <p className={css.state}>{t('pluginMarketEmpty')}</p> : null}
+  </section>
+}

package/src/client/api.ts

@@ -8,6 +8,7 @@
  */
 import { encodeHtmlUrl } from '../html-route.ts'
 import type { BrowserProbeResult } from './browser.ts'
+import type { MarketplaceCatalog, MarketplacePlugin, InstalledMarketplacePlugin, PluginMarketScope } from '../plugin-market-shared.ts'
 
 /** One wire failure. */
 export class SidebarApiError extends Error {
@@ -287,6 +288,12 @@ function gitPayload(scope: SessionScope, worktree: string | undefined, extra: Re
 
 /** The sidebar API surface (session scope threaded through every call). */
 export const api = {
+  pluginMarketContext: (scope: SessionScope, signal?: AbortSignal) => call<{ sessionId: string; cwd: string }>('plugins.context', scopePayload(scope, {}), signal),
+  pluginMarketplaces: (signal?: AbortSignal) => call<MarketplaceCatalog>('plugins.marketplaces', {}, signal),
+  pluginCatalog: (marketplaceId: string, signal?: AbortSignal) => call<MarketplacePlugin[] | { plugins: MarketplacePlugin[]; warning: string }>('plugins.catalog', { marketplaceId, includeMetadata: true }, signal),
+  pluginsInstalled: (scope: SessionScope, signal?: AbortSignal) => call<InstalledMarketplacePlugin[]>('plugins.installed', scopePayload(scope, {}), signal),
+  pluginInstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope) => call<InstalledMarketplacePlugin>('plugins.install', scopePayload(scope, { pluginId, scope: installScope })),
+  pluginUninstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope) => call<{ ok: true }>('plugins.uninstall', scopePayload(scope, { pluginId, scope: installScope })),
   chatcodeStatus: (signal?: AbortSignal) => call<ChatCodeAuthState>('chatcode.status', {}, signal),
   chatcodeStart: () => call<{ sessionId: string; url: string }>('chatcode.start', {}),
   chatcodeCancel: (sessionId: string) => call<{ ok: true }>('chatcode.cancel', { sessionId }),

package/src/client/builtins/tabs.tsx

@@ -1,6 +1,6 @@
 /**
- * The 7 built-in tab descriptors: the plugin registers its own pages
- * (editor / git / terminal / browser / diff) through
+ * The 6 built-in tab descriptors: the plugin registers its own pages
+ * (editor / git / terminal / browser / diff / plugin-market) through
  * the same {@link BetterSidebarService} external plugins use — eating its
  * own dogfood. The terminal descriptor owns its quota (`TERMINAL_LIMIT`)
  * and mints `terminal:<uuid>` ids through `createTab`; the browser mints
@@ -17,6 +17,8 @@ import { lazyChunkComponent } from '../lazy-chunk.tsx'
 import { GitView } from '../GitView.tsx'
 import { DiffTab } from '../DiffTab.tsx'
 import { BrowserView } from '../BrowserView.tsx'
+import { PluginMarketView } from '../PluginMarketView.tsx'
+import { createPluginMarketCatalog, type PluginMarketCatalog } from '../plugin-market-catalog.ts'
 import {
   IconBranchOutline16,
   IconCodeOutline16,
@@ -63,6 +65,8 @@ export const TERMINAL_LIMIT = 3
 export interface BuiltinTabOptions {
   /** Returns the display title for newly opened terminal tabs. */
   terminalTitle?: () => string
+  /** Shared app-lifetime catalog; production supplies the activation's store. */
+  pluginMarketCatalog?: PluginMarketCatalog
 }
 
 /** A client-side uuid for terminal tab identity (not shown in the UI). */
@@ -80,8 +84,9 @@ function uiTerminalCount(state: SidebarState): number {
     .filter(tab => tab.type === 'terminal' && !isAgentTabId(tab.id)).length
 }
 
-/** The 5 built-in tab descriptors. */
+/** The 6 built-in tab descriptors. */
 export function builtinTabs(ctx: Context, options: BuiltinTabOptions = {}): readonly TabDescriptor[] {
+  const pluginMarketCatalog = options.pluginMarketCatalog ?? createPluginMarketCatalog()
   return [
     {
       id: 'editor',
@@ -266,6 +271,14 @@ export function builtinTabs(ctx: Context, options: BuiltinTabOptions = {}): read
       }),
       component: (props) => <BrowserView {...props} />,
     },
+    {
+      id: 'plugin-market',
+      title: () => t('pluginMarketTitle'),
+      icon: (size: number) => <IconGlobeOutline16 size={size} />,
+      order: 60,
+      single: true,
+      component: ({ scope, visible }) => <PluginMarketView scope={scope} visible={visible} catalog={pluginMarketCatalog} />,
+    },
     {
       id: 'diff',
       title: () => t('git'),

package/src/client/index.tsx

@@ -39,6 +39,8 @@ import { SideCardSection } from './SideCardSection.tsx'
 import { UsageHeatmapSection } from './UsageHeatmapSection.tsx'
 import { AiRatioSection } from './AiRatioSection.tsx'
 import { UpdateSettingsSection } from './UpdateSettingsSection.tsx'
+import { registerPluginMarketSettings } from './PluginMarketSettingsSection.tsx'
+import { createPluginMarketCatalog } from './plugin-market-catalog.ts'
 import { api } from './api.ts'
 import { LOCALE_NS, attachLocale, attachBetterLocale, t, zh, en,
   ja, de, fr, pt, ko, ar, hi, id, tr, vi, th, ru, it, nl, sv, pl,
@@ -142,6 +144,11 @@ export function apply(ctx: Context): void {
   // registrations (the official createXXXStore() factory rule — no
   // module-level singleton).
   const sidebarStore = createSidebarStore()
+  const pluginMarketCatalog = createPluginMarketCatalog()
+  ctx.effect(() => {
+    pluginMarketCatalog.start()
+    return () => pluginMarketCatalog.dispose()
+  }, 'dsh-better-sidebar: plugin catalogs')
   // Extend (rather than replace) DSH's single-owner Workspace browser with a
   // durable Pinned sessions peer group and an extra native row-menu action.
   // The native browser keeps ownership of search, workspace management and
@@ -180,7 +187,7 @@ export function apply(ctx: Context): void {
   // service (eating our own dogfood). The disposer unregisters them on
   // fiber disposal (HMR-safe).
   ctx.effect(
-    () => registerBuiltins(ctx, service, { terminalTitle: () => terminalTitle }),
+    () => registerBuiltins(ctx, service, { terminalTitle: () => terminalTitle, pluginMarketCatalog }),
     'dsh-better-sidebar: register built-in tabs and viewers',
   )
   // A failure anywhere in the client lifecycle must never take the app down
@@ -481,6 +488,8 @@ export function apply(ctx: Context): void {
       'dsh-better-sidebar: skill market navigation icon fallback',
     )
 
+    registerPluginMarketSettings(ctx, pluginMarketCatalog)
+
     // The "Side card" settings section: appears in the DSH Settings shell
     // once the shell's declaration is on the ledger (slots.inject waits for
     // it); the section reads/writes the prefs through the plugin's own

package/src/client/locales-ja.ts

@@ -16,8 +16,31 @@
 
 /** The ja dictionary (key-set-equal to zh, enforced by the type annotation in locales.ts). */
 export const ja: Record<string, string> = {
+  pluginMarketTitle: 'プラグインマーケット',
+  pluginMarketProjectDirectory: 'プロジェクトディレクトリ：{path}',
+  pluginMarketInstalledTab: 'インストール済み',
+  pluginMarketRefresh: '更新',
+  pluginMarketLoading: 'プラグインを読み込み中…',
+  pluginMarketRefreshing: '一覧を更新中…',
+  pluginMarketEmpty: 'プラグインはありません。',
+  pluginMarketBack: '戻る',
+  pluginMarketInstall: 'インストール',
+  pluginMarketUninstall: 'アンインストール',
+  pluginMarketProject: 'プロジェクト',
+  pluginMarketUser: 'ユーザー',
+  pluginMarketInstalled: 'プラグインをインストールしました。',
+  pluginMarketUninstalled: 'プラグインをアンインストールしました。',
+  pluginMarketSubtitle: 'マーケットを参照し、プロジェクトまたはユーザー環境にインストールします。',
+  pluginMarketSearch: 'マーケットやプラグインを検索',
+  pluginMarketDefault: 'デフォルト',
+  pluginMarketBrowse: 'プラグインを見る',
+  pluginMarketNoDescription: '説明なし',
+  pluginMarketInstalling: 'インストール中…',
+  pluginMarketUninstalling: 'アンインストール中…',
   accountMenuSettings: '設定',
   accountMenuLogout: 'ログアウト',
+  accountMenuLogoutConfirmTitle: 'ログアウトしますか？',
+  accountMenuLogoutConfirmDescription: 'ChatCode CLI からログアウトしますか？続行するには再度ログインする必要があります。',
   accountMenuLabel: 'アカウントメニュー',
   updateMenu: '更新を確認 / 今すぐ更新',
   updateNav: '更新',

package/src/client/locales.ts

@@ -23,8 +23,31 @@
 
 /** The zh dictionary (also registered into the ChatCode CLI locale registry under {@link LOCALE_NS}). */
 export const zh = {
+  pluginMarketTitle: '插件市场',
+  pluginMarketProjectDirectory: '项目目录：{path}',
+  pluginMarketInstalledTab: '已安装',
+  pluginMarketRefresh: '刷新',
+  pluginMarketLoading: '正在加载插件…',
+  pluginMarketRefreshing: '正在刷新列表…',
+  pluginMarketEmpty: '暂无插件。',
+  pluginMarketBack: '返回',
+  pluginMarketInstall: '安装',
+  pluginMarketUninstall: '卸载',
+  pluginMarketProject: '项目级',
+  pluginMarketUser: '用户级',
+  pluginMarketInstalled: '插件安装成功。',
+  pluginMarketUninstalled: '插件卸载成功。',
+  pluginMarketSubtitle: '浏览插件市场，选择安装到当前项目或用户环境。',
+  pluginMarketSearch: '搜索市场或插件',
+  pluginMarketDefault: '默认',
+  pluginMarketBrowse: '查看插件',
+  pluginMarketNoDescription: '暂无描述',
+  pluginMarketInstalling: '安装中…',
+  pluginMarketUninstalling: '卸载中…',
   accountMenuSettings: '设置',
   accountMenuLogout: '退出登录',
+  accountMenuLogoutConfirmTitle: '退出登录？',
+  accountMenuLogoutConfirmDescription: '确定要退出 ChatCode CLI 吗？退出后需要重新登录才能继续使用。',
   accountMenuLabel: '账户菜单',
   updateMenu: '检查更新 / 一键更新',
   updateNav: '更新',
@@ -494,8 +517,31 @@ export const zh = {
 
 /** The en dictionary (key-set-equal to zh, enforced by the type annotation). */
 export const en: Record<keyof typeof zh, string> = {
+  pluginMarketTitle: 'Plugin marketplace',
+  pluginMarketProjectDirectory: 'Project directory: {path}',
+  pluginMarketInstalledTab: 'Installed',
+  pluginMarketRefresh: 'Refresh',
+  pluginMarketLoading: 'Loading plugins…',
+  pluginMarketRefreshing: 'Refreshing list…',
+  pluginMarketEmpty: 'No plugins.',
+  pluginMarketBack: 'Back',
+  pluginMarketInstall: 'Install',
+  pluginMarketUninstall: 'Uninstall',
+  pluginMarketProject: 'Project',
+  pluginMarketUser: 'User',
+  pluginMarketInstalled: 'Plugin installed.',
+  pluginMarketUninstalled: 'Plugin uninstalled.',
+  pluginMarketSubtitle: 'Browse marketplaces and install plugins for your project or user.',
+  pluginMarketSearch: 'Search marketplaces or plugins',
+  pluginMarketDefault: 'Default',
+  pluginMarketBrowse: 'Browse plugins',
+  pluginMarketNoDescription: 'No description',
+  pluginMarketInstalling: 'Installing…',
+  pluginMarketUninstalling: 'Uninstalling…',
   accountMenuSettings: 'Settings',
   accountMenuLogout: 'Log out',
+  accountMenuLogoutConfirmTitle: 'Log out?',
+  accountMenuLogoutConfirmDescription: 'Are you sure you want to log out of ChatCode CLI? You will need to sign in again to continue.',
   accountMenuLabel: 'Account menu',
   updateMenu: 'Check for updates / Update now',
   updateNav: 'Update',
@@ -995,6 +1041,8 @@ import { zhMO as zhMODict } from './locales-zh-MO.ts'
 // English fallback for the new account/model surfaces until third-language translations are supplied.
 // Keep this list explicit so the dictionary parity check still catches other missing keys.
 const accountAndModelFallback = {
+  accountMenuLogoutConfirmTitle: en.accountMenuLogoutConfirmTitle,
+  accountMenuLogoutConfirmDescription: en.accountMenuLogoutConfirmDescription,
   chatcodeGateChecking: en.chatcodeGateChecking,
   chatcodeGateUnverified: en.chatcodeGateUnverified,
   chatcodeGatePending: en.chatcodeGatePending,

package/src/client/plugin-market-catalog.ts

@@ -0,0 +1,90 @@
+/** App-lifetime remote catalogs, shared by Settings and the sidebar tab. */
+import { api } from './api.ts'
+import type { MarketplaceCatalog, MarketplacePlugin } from '../plugin-market-shared.ts'
+
+interface Entry<T> {
+  readonly status: 'loading' | 'ready' | 'error'
+  readonly data?: T
+  readonly error?: string
+  readonly warning?: string
+}
+interface Snapshot {
+  readonly markets?: Entry<MarketplaceCatalog>
+  readonly plugins: Readonly<Record<string, Entry<MarketplacePlugin[]>>>
+  readonly refresh?: { readonly status: 'loading' | 'ready' | 'error'; readonly error?: string }
+}
+export interface PluginMarketCatalog {
+  subscribe(listener: () => void): () => void
+  getSnapshot(): Snapshot
+  start(): void
+  ensure(marketplaceId: string): void
+  refresh(marketplaceId?: string): void
+  dispose(): void
+}
+
+export function createPluginMarketCatalog(): PluginMarketCatalog {
+  let snapshot: Snapshot = { plugins: {} }
+  let disposed = false
+  const listeners = new Set<() => void>()
+  const controllers = new Set<AbortController>()
+  const requests = new Map<string, Promise<string | undefined>>()
+  const publish = (next: Snapshot): void => {
+    if (disposed) return
+    snapshot = next
+    listeners.forEach(listener => listener())
+  }
+  const load = <T>(
+    key: string,
+    current: () => Entry<T> | undefined,
+    update: (entry: Entry<T>) => void,
+    request: (signal: AbortSignal) => Promise<{ data: T; warning?: string }>,
+  ): Promise<string | undefined> => {
+    if (disposed) return Promise.resolve(undefined)
+    const pending = requests.get(key)
+    if (pending) return pending
+    const entry: Entry<T> = { status: 'loading', data: current()?.data }
+    const controller = new AbortController()
+    controllers.add(controller)
+    update(entry)
+    const result = request(controller.signal).then(
+      ({ data, warning }) => { if (current() === entry) update({ status: 'ready', data, ...(warning ? { warning } : {}) }); return undefined },
+      cause => {
+        const error = cause instanceof Error ? cause.message : String(cause)
+        if (current() === entry) update({ status: 'error', data: entry.data, error })
+        return error
+      },
+    ).finally(() => { controllers.delete(controller); requests.delete(key) })
+    requests.set(key, result)
+    return result
+  }
+  const markets = (force = false): Promise<string | undefined> => {
+    if (!force && snapshot.markets) return Promise.resolve(undefined)
+    return load('markets', () => snapshot.markets, entry => publish({ ...snapshot, markets: entry }), async signal => ({ data: await api.pluginMarketplaces(signal) }))
+  }
+  const plugins = (id: string, force = false): Promise<string | undefined> => {
+    if (!force && snapshot.plugins[id]) return Promise.resolve(undefined)
+    return load(`plugins:${id}`, () => snapshot.plugins[id], entry => publish({ ...snapshot, plugins: { ...snapshot.plugins, [id]: entry } }), async signal => {
+      const result = await api.pluginCatalog(id, signal)
+      return Array.isArray(result) ? { data: result } : { data: result.plugins, warning: result.warning }
+    })
+  }
+  return {
+    subscribe: listener => { listeners.add(listener); return () => { listeners.delete(listener) } },
+    getSnapshot: () => snapshot,
+    start: () => { void markets() },
+    ensure: id => { void plugins(id) },
+    refresh: id => {
+      if (disposed || snapshot.refresh?.status === 'loading') return
+      // Refresh every previously visited catalog before unlocking navigation.
+      // Keep cached cards for layout continuity; views disable their controls.
+      const ids = new Set(Object.keys(snapshot.plugins))
+      if (id) ids.add(id)
+      publish({ ...snapshot, refresh: { status: 'loading' } })
+      void Promise.all([markets(true), ...[...ids].map(key => plugins(key, true))]).then(results => {
+        const errors = [...new Set(results.filter((value): value is string => value !== undefined))]
+        publish({ ...snapshot, refresh: errors.length ? { status: 'error', error: errors.join('\n') } : { status: 'ready' } })
+      })
+    },
+    dispose: () => { disposed = true; controllers.forEach(controller => controller.abort()); controllers.clear(); requests.clear(); listeners.clear() },
+  }
+}