@chatcode/cco-better-sidebar 0.18.0-rc.2 → 0.18.0-rc.4

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,6 +16,27 @@
 
 /** 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: 'ログアウト',
   accountMenuLabel: 'アカウントメニュー',

package/src/client/locales.ts

@@ -23,6 +23,27 @@
 
 /** 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: '退出登录',
   accountMenuLabel: '账户菜单',
@@ -494,6 +515,27 @@ 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',
   accountMenuLabel: 'Account menu',

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() },
+  }
+}

package/src/client/ui-tweaks/branding.tsx

@@ -30,6 +30,8 @@ const PROJECT_NAME = 'ChatCode CLI'
 const HERO_TITLE = '与世界，深一度对话'
 const LEGACY_HOST_BRAND_TEXT = /DSH\s*(?:Local\s*Build|本地构建)|DeepSeek\s*Harness|ChatCode\s*CLI/giu
 const LEGACY_HOST_BRAND_LABEL_TEXT = /^(?:DSH\s*(?:Local\s*Build|本地构建)|ChatCode\s*CLI)$/iu
+const BRAND_SURFACE = '[class*="brandIdentity"],[class*="brandName"],[class*="headline"],.dut-sidebar-brand-name'
+const USER_CONTENT = 'input,textarea,[contenteditable],[role="textbox"],pre,code,script,style'
 const HOST_BUILD_VERSION_TEXT = /^v?\d+\.\d+\.\d+(?:[-+][0-9a-z.-]+)*$/iu
 const HERO_HEADLINE = /探索未至之境/u
 const HERO_PREVIEW_TEXT = /^(?:预览版|Preview)$/iu
@@ -104,6 +106,9 @@ body[data-ds-dark-theme] .dut-unicom-primary-action:not(:hover){background:#9B0B
 `
 
 function hasPrimaryLabel(button: HTMLButtonElement): boolean {
+  // Plugin cards own their appearance. Inventory disclosure buttons include
+  // descriptions, where words like "install" do not identify a primary action.
+  if (button.closest('[data-chatcode-plugin-market], [data-plugin-module]')) return false
   const label = `${button.textContent ?? ''} ${button.getAttribute('aria-label') ?? ''} ${button.title}`.trim().toLowerCase()
   return /(?:^|\s)(new session|send|install)(?:\s|$)|新会话|发送|(?:^|\s)安装(?:\s|$)/u.test(label)
 }
@@ -193,19 +198,22 @@ function syncBranding(): void {
 
   // The sidebar label identifies the precise icon to its left. Process it
   // before the generic text pass so the sibling relationship is still intact.
-  document.querySelectorAll<HTMLElement>('body *').forEach((element) => {
-    if (element.childElementCount !== 0 || !LEGACY_HOST_BRAND_LABEL_TEXT.test(element.textContent?.trim() ?? '')) return
-    if (element.textContent !== PROJECT_NAME) element.textContent = PROJECT_NAME
-    element.classList.add('dut-brand-title')
-    replaceLogoBesideBrandLabel(element)
-    hideVersionBesideBrandLabel(element)
+  document.querySelectorAll<HTMLElement>(BRAND_SURFACE).forEach((surface) => {
+    surface.querySelectorAll<HTMLElement>('*').forEach((element) => {
+      if (element.closest(USER_CONTENT) !== null) return
+      if (element.childElementCount !== 0 || !LEGACY_HOST_BRAND_LABEL_TEXT.test(element.textContent?.trim() ?? '')) return
+      if (element.textContent !== PROJECT_NAME) element.textContent = PROJECT_NAME
+      element.classList.add('dut-brand-title')
+      replaceLogoBesideBrandLabel(element)
+      hideVersionBesideBrandLabel(element)
+    })
   })
 
   const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT)
   let node: Text | null
   while ((node = walker.nextNode() as Text | null) !== null) {
     const parent = node.parentElement
-    if (parent?.closest('script,style') !== null) continue
+    if (parent === null || parent.closest(USER_CONTENT) !== null || parent.closest(BRAND_SURFACE) === null) continue
     if (LEGACY_HOST_BRAND_TEXT.test(node.data)) {
       LEGACY_HOST_BRAND_TEXT.lastIndex = 0
       node.data = node.data.replace(LEGACY_HOST_BRAND_TEXT, PROJECT_NAME)

package/src/client/ui-tweaks/index.tsx

@@ -36,6 +36,7 @@ import { WhaleIndicator, installWhaleStyles } from './whale.tsx'
 import { PreciseCacheHitEntry } from './cachehit.tsx'
 import { installTaskNotifier, previewAlerts, requestNotifyPermission } from './notifier.ts'
 import { HeroProjectLogo, installBranding, ProjectLogoIcon, SidebarProjectLogo, SidebarProjectName } from './branding.tsx'
+import { buildFontCss } from './typography.ts'
 
 const NS = 'ui-tweaks'
 const SETTINGS_ROUTE = '/_dsh/ui-tweaks/settings'
@@ -43,12 +44,12 @@ const SETTINGS_ROUTE = '/_dsh/ui-tweaks/settings'
 /** Client context narrowed to the browser sessions face in this combined build. */
 type UITweaksClientContext = ClientContext & { sessions: ISessions }
 
-const DEFAULT_FONT_SIZE = 16
+const DEFAULT_FONT_SIZE = 14
 const MIN_FONT_SIZE = 10
 const MAX_FONT_SIZE = 32
 /** Legacy: code font as a percentage of the message font size (81% = stock 13/16). */
 const DEFAULT_CODE_FONT_SCALE = 81
-/** Absolute code font size (px): 13 matches the host default at a 16px body. */
+/** Default absolute code-block size, paired with 14px prose. */
 const DEFAULT_CODE_FONT_SIZE = 13
 const MIN_CODE_FONT_SIZE = 8
 const MAX_CODE_FONT_SIZE = 32
@@ -134,7 +135,7 @@ const en = {
   fontSize: 'Message font size',
   fontSizeHint: `Number between ${MIN_FONT_SIZE} and ${MAX_FONT_SIZE}; applies to message text, headings, tables and code.`,
   codeFontSize: 'Code font size',
-  codeFontSizeHint: `Absolute code size in px (${MIN_CODE_FONT_SIZE}–${MAX_CODE_FONT_SIZE}); ${DEFAULT_CODE_FONT_SIZE}px is ChatCode CLI's default at a 16px body. Applies to code blocks; inline code follows proportionally.`,
+  codeFontSizeHint: `Absolute code size in px (${MIN_CODE_FONT_SIZE}–${MAX_CODE_FONT_SIZE}); ${DEFAULT_CODE_FONT_SIZE}px is ChatCode CLI's default at a 14px body. Applies to code blocks; inline code follows proportionally.`,
   lineHeight: 'Line spacing',
   lineHeightHint: `Base vertical spacing in px: gaps between message rows (Think ↔ tool cards) and blocks inside one reply, plus text line-height, paragraph and list margins, all scale from it; ${DEFAULT_LINE_HEIGHT} is ChatCode CLI's default.`,
   tableStyle: 'Table style',
@@ -334,7 +335,7 @@ const zh: Record<LocaleKey, string> = {
   fontSize: '消息字体大小',
   fontSizeHint: `取值 ${MIN_FONT_SIZE}–${MAX_FONT_SIZE}，作用于消息正文、标题、表格与代码。`,
   codeFontSize: '代码字号',
-  codeFontSizeHint: `代码绝对字号，取值 ${MIN_CODE_FONT_SIZE}–${MAX_CODE_FONT_SIZE}px；${DEFAULT_CODE_FONT_SIZE}px 为 ChatCode CLI 默认（正文 16 时）。作用于代码块，行内代码按比例跟随。`,
+  codeFontSizeHint: `代码绝对字号，取值 ${MIN_CODE_FONT_SIZE}–${MAX_CODE_FONT_SIZE}px；${DEFAULT_CODE_FONT_SIZE}px 为 ChatCode CLI 默认（正文 14 时）。作用于代码块，行内代码按比例跟随。`,
   lineHeight: '行高',
   lineHeightHint: `回复区垂直间距的基准值：消息之间（如 Think ↔ 工具卡片）、回复内块之间、正文行高、段落与列表边距都按它缩放；取值 ${MIN_LINE_HEIGHT}–${MAX_LINE_HEIGHT}px，${DEFAULT_LINE_HEIGHT} 为 ChatCode CLI 默认。`,
   tableStyle: '表格样式',
@@ -533,11 +534,13 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
 
 function resolveValue(value: TweaksValue | undefined): ResolvedTweaks {
   const fontSize = typeof value?.fontSize === 'number' ? value.fontSize : DEFAULT_FONT_SIZE
-  // Effective code size: the absolute px input wins; otherwise derive px from
-  // the legacy percentage at the resolved body size; otherwise stock.
+  const codeFontScale = value?.codeFontScale ?? DEFAULT_CODE_FONT_SCALE
+  // Explicit code sizing wins; the stock preference keeps readable 13px code.
   const codeFontSize = typeof value?.codeFontSize === 'number'
     ? Math.min(MAX_CODE_FONT_SIZE, Math.max(MIN_CODE_FONT_SIZE, value.codeFontSize))
-    : Math.max(8, Math.round(fontSize * (13 / 16) * ((value?.codeFontScale ?? DEFAULT_CODE_FONT_SCALE) / DEFAULT_CODE_FONT_SCALE)))
+    : codeFontScale === DEFAULT_CODE_FONT_SCALE
+      ? DEFAULT_CODE_FONT_SIZE
+      : Math.max(8, Math.round(fontSize * (13 / 16) * (codeFontScale / DEFAULT_CODE_FONT_SCALE)))
   return {
     fontSize,
     codeFontSize,
@@ -559,50 +562,6 @@ function resolveValue(value: TweaksValue | undefined): ResolvedTweaks {
   }
 }
 
-/** Scale one theme px value proportionally to the chosen base size. */
-function rel(base: number, fontSize: number): number {
-  return Math.max(8, Math.round((base / DEFAULT_FONT_SIZE) * fontSize))
-}
-
-/** Rebuild the markdown font tokens for the chosen base size, keeping the theme faces. */
-function buildFontCss(fontSize: number, lineHeight: number, codeFontSize: number): string {
-  const cs = getComputedStyle(document.body)
-  const fam = (name: string, fallback: string): string => {
-    const value = cs.getPropertyValue(name).trim()
-    return value.length > 0 ? value : fallback
-  }
-  const base = fam('--dsw-font-markdown-base-font-family', '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif')
-  const code = fam('--dsw-font-markdown-code-font-family', '"SF Mono", Consolas, monospace')
-  const codeBlock = fam('--dsw-font-markdown-code-block-font-family', '"SF Mono", Consolas, monospace')
-
-  const parts: string[] = []
-  // `baseLine` is the token's line-height at the 16px baseline; it scales with
-  // both the chosen font size and the 行高 unit, so at the default (16) it
-  // reproduces the stock rhythm exactly.
-  const token = (shorthand: string, size: number, baseLine: number, family: string): void => {
-    const line = Math.max(12, Math.round((baseLine / DEFAULT_FONT_SIZE) * fontSize * (lineHeight / DEFAULT_LINE_HEIGHT)))
-    parts.push(`--${shorthand}:${size}px/${line}px ${family}`)
-    parts.push(`--${shorthand}-font-size:${size}px`)
-    parts.push(`--${shorthand}-line-height:${line}px`)
-  }
-  // Code fonts hang off the absolute code-block size (stock: 13px at a 16px
-  // body), with inline code slightly larger and the small variant slightly
-  // smaller, preserving DSH's hierarchy (14/13 and 12/13 of the block).
-  const codePx = (blockRatio: number): number => Math.max(8, Math.round(codeFontSize * blockRatio))
-  token('dsw-font-markdown-base', fontSize, 28, base)
-  token('dsw-font-markdown-base-strong', fontSize, 28, base)
-  token('dsw-font-markdown-base-italic', fontSize, 28, base)
-  token('dsw-font-markdown-base-strong-italic', fontSize, 28, base)
-  token('dsw-font-markdown-h1', rel(24, fontSize), 34, base)
-  token('dsw-font-markdown-h2', rel(22, fontSize), 32, base)
-  token('dsw-font-markdown-h3', rel(20, fontSize), 30, base)
-  token('dsw-font-markdown-h4', fontSize, 28, base)
-  token('dsw-font-markdown-code', codePx(14 / 13), 22, code)
-  token('dsw-font-markdown-code-block', codePx(1), 22, codeBlock)
-  token('dsw-font-markdown-code-block-small', codePx(12 / 13), 18, codeBlock)
-  return `body{${parts.join(';')}}`
-}
-
 /**
  * Claude Desktop-ish markdown table look: light-gray rounded cell cards with
  * small gaps, no borders. Cells share the theme's inline-code background and
@@ -610,7 +569,7 @@ function buildFontCss(fontSize: number, lineHeight: number, codeFontSize: number
  * renderer, so headers and cells always match.
  */
 const CLAUDE_TABLE_CSS = `
-div[data-slot="conversation.chat.node"] table{
+div[data-slot="conversation.chat.node"] [class*="_markdown"]:not([data-markdown-variant="compact"]) table{
   border-collapse:separate !important;
   border-spacing:3px !important;
   width:100% !important;
@@ -621,7 +580,7 @@ div[data-slot="conversation.chat.node"] table{
   border:none !important;
   font-size:var(--dsw-font-markdown-base-font-size) !important;
 }
-div[data-slot="conversation.chat.node"] table thead th{
+div[data-slot="conversation.chat.node"] [class*="_markdown"]:not([data-markdown-variant="compact"]) table thead th{
   background:var(--dsw-alias-markdown-inline-code) !important;
   color:inherit !important;
   font-weight:400 !important;
@@ -630,7 +589,7 @@ div[data-slot="conversation.chat.node"] table thead th{
   border:none !important;
   border-radius:6px !important;
 }
-div[data-slot="conversation.chat.node"] table tbody td{
+div[data-slot="conversation.chat.node"] [class*="_markdown"]:not([data-markdown-variant="compact"]) table tbody td{
   background:var(--dsw-alias-markdown-inline-code) !important;
   color:inherit !important;
   font-size:inherit !important;
@@ -639,8 +598,8 @@ div[data-slot="conversation.chat.node"] table tbody td{
   border:none !important;
   border-radius:6px !important;
 }
-div[data-slot="conversation.chat.node"] table code,
-div[data-slot="conversation.chat.node"] table pre{
+div[data-slot="conversation.chat.node"] [class*="_markdown"]:not([data-markdown-variant="compact"]) table code,
+div[data-slot="conversation.chat.node"] [class*="_markdown"]:not([data-markdown-variant="compact"]) table pre{
   background:transparent !important;
   border:none !important;
   box-shadow:none !important;
@@ -650,52 +609,32 @@ div[data-slot="conversation.chat.node"] table pre{
 function buildRuntimeCss(value: ResolvedTweaks): string {
   const rules: string[] = []
   rules.push(buildFontCss(value.fontSize, value.lineHeight, value.codeFontSize))
-  // User-sent messages use their own fixed font-size (not the markdown tokens);
-  // route them through the same base so they follow the fontSize setting too.
+  // Sent messages share the reply metrics, including explicit UI Tweaks sizes.
   // `steering` messages are sent while the agent is busy (busyEnter: steer);
   // `[data-pending-steering]` is their in-flight bubble before it becomes durable.
-  rules.push(`[data-chat-flow-kind="user"] [class^="_text_"],[data-chat-flow-kind="steering"] [class^="_text_"],[data-pending-steering] [class^="_text_"]{font-size:var(--dsw-font-markdown-base-font-size) !important}`)
-  // Composer input follows the same base size. The visible text is rendered by
-  // the hidden-textarea + backdrop/mirror pattern: the textarea is transparent,
-  // the `data-input-backdrop` paints the text you see, and `data-input-mirror`
-  // drives auto-grow. All three (plus the placeholder) must share the size.
-  // Only font-size is touched: line-height is part of the auto-grow/caret
-  // metrics, so overriding it misplaces the caret.
-  rules.push(`[data-composer-card="true"] textarea,[data-composer-card="true"] [data-input-backdrop],[data-composer-card="true"] [data-input-mirror]{font-size:var(--dsw-font-markdown-base-font-size) !important}`)
-  rules.push(`[data-composer-card="true"] textarea::placeholder{font-size:var(--dsw-font-markdown-base-font-size) !important}`)
-  // Markdown table cells are pinned by DSH (15px); let every table style follow
-  // the fontSize setting as well.
-  rules.push(`div[data-slot="conversation.chat.node"] table th,div[data-slot="conversation.chat.node"] table td{font-size:var(--dsw-font-markdown-base-font-size) !important}`)
-  // Inline code is pinned by DSH to 0.875em of the surrounding text (it ignores
-  // the code token); scale that em by how far the chosen code size sits from
-  // the stock ratio (a 13px block at this body size).
-  const stockCodeBlock = value.fontSize * (13 / 16)
+  rules.push(`[data-chat-flow-kind="user"] [class*="_bubble"],[data-chat-flow-kind="steering"] [class*="_bubble"],[data-pending-steering] [class*="_bubble"]{font-size:var(--dsw-font-markdown-base-font-size) !important;line-height:var(--dsw-font-markdown-base-line-height) !important}`)
+  // Current contenteditable composers and older textarea composers inherit
+  // one size/leading pair, including placeholders and measurement layers.
+  rules.push(`[data-composer-card]{font:var(--dsw-font-markdown-base) !important}`)
+  // Tables use the same body size and leading in both table styles.
+  rules.push(`div[data-slot="conversation.chat.node"] [class*="_markdown"]:not([data-markdown-variant="compact"]) table th,div[data-slot="conversation.chat.node"] [class*="_markdown"]:not([data-markdown-variant="compact"]) table td{font-size:var(--dsw-font-markdown-base-font-size) !important;line-height:var(--dsw-font-markdown-base-line-height) !important}`)
+  // Inline code normally uses 0.92em. Explicit code sizing follows the
+  // same ratio relative to the 14px body / 13px code baseline.
+  const stockCodeBlock = value.fontSize * (13 / 14)
   if (Math.abs(value.codeFontSize - stockCodeBlock) > 0.5) {
-    const em = (0.875 * (value.codeFontSize / stockCodeBlock)).toFixed(3)
-    rules.push(`div[data-slot="conversation.chat.node"] div[class*="_markdown_"] :not(pre)>code{font-size:${em}em !important}`)
+    const em = (0.92 * (value.codeFontSize / stockCodeBlock)).toFixed(3)
+    rules.push(`div[data-slot="conversation.chat.node"] div[class*="_markdown"]:not([data-markdown-variant="compact"]) :not(pre)>code{font-size:${em}em !important}`)
   }
-  // 行高: the base vertical rhythm of the reply area. When it differs from
-  // the stock 16px, every vertical spacing scales from it proportionally:
-  //  ① gaps between message rows (Think ↔ tool cards like pwsh, user ↔
-  //    assistant) — the chat flow column;
-  //  ② gaps between content blocks inside one assistant reply (Think ↔ text) —
-  //    the Assistant Markdown block container (`Sxvs8a_body`, CSS-module
-  //    hashed, stable within the pinned rc.8 conversation package);
-  //  ③ the markdown typography rhythm: paragraphs (`p` has a stock `margin:
-  //    16px 0` that must be overridden on both axes, not just bottom, or it
-  //    can never tighten below 16), list margins, list-item gaps (stock 6px),
-  //    paragraphs inside list items (stock 8px), code blocks, headings and
-  //    rules — all scaled from the 行高 unit.
-  // Text line-height itself scales in buildFontCss above.
+  // Custom spacing scales prose without expanding compact thinking.
   if (value.lineHeight !== DEFAULT_LINE_HEIGHT) {
     const n = value.lineHeight
-    const md = `div[data-slot="conversation.chat.node"] div[class*="_markdown_"]`
-    const liGap = Math.max(2, Math.round((6 * n) / DEFAULT_LINE_HEIGHT))
+    const md = `div[data-slot="conversation.chat.node"] div[class*="_markdown"]:not([data-markdown-variant="compact"])`
+    const liGap = Math.max(2, Math.round((4 * n) / DEFAULT_LINE_HEIGHT))
     const liPGap = Math.max(2, Math.round((8 * n) / DEFAULT_LINE_HEIGHT))
-    rules.push(`div[data-slot="conversation.view"] .Md3f7G_column{gap:${n}px !important}`)
-    rules.push(`div[data-slot="conversation.chat.node"] .Sxvs8a_body{gap:${n}px !important}`)
-    rules.push(`${md} p{margin:${n}px 0 !important}`)
-    rules.push(`${md} ul,${md} ol{margin:${n}px 0 !important}`)
+    rules.push(`div[data-slot="conversation.view"] [data-chat-flow]{gap:${n}px !important}`)
+    rules.push(`div[data-slot="conversation.chat.node"] [data-assistant-body]{--dsh-assistant-block-gap:${n}px}`)
+    rules.push(`${md} p{margin:${Math.round(0.75 * n)}px 0 !important}`)
+    rules.push(`${md} ul,${md} ol{margin:${Math.round(0.75 * n)}px 0 !important}`)
     rules.push(`${md} pre{margin:${n}px 0 !important}`)
     // Code blocks: the pre's inner vertical padding is stock 16px (shiki
     // default); scale it so the block's own height follows 行高 too. Only
@@ -711,13 +650,11 @@ function buildRuntimeCss(value: ResolvedTweaks): string {
     }
     rules.push(`${md} li:not(:first-child){margin-top:${liGap}px !important}`)
     rules.push(`${md} li>p{margin:${liPGap}px 0 !important}`)
-    rules.push(`${md} h1,${md} h2,${md} h3{margin:${2 * n}px 0 ${n}px !important}`)
+    rules.push(`${md} h1,${md} h2,${md} h3{margin:${Math.round(1.5 * n)}px 0 ${Math.round(0.75 * n)}px !important}`)
     rules.push(`${md} h4,${md} h5,${md} h6{margin:${n}px 0 !important}`)
     rules.push(`${md} hr{margin:${2 * n}px 0 !important}`)
     rules.push(`${md} blockquote{margin:${n}px 0 0 !important}`)
-    // Keep DSH's flush edges: the first/last block of a reply has zero outer
-    // margin (stock `>*:first-child` / `>*:last-child`), so a message starts
-    // and ends tight and the spacing to the next node stays the column gap.
+    // Preserve the first and last block's flush edges.
     rules.push(`${md} > :first-child{margin-top:0 !important}`)
     rules.push(`${md} > :last-child{margin-bottom:0 !important}`)
   }

package/src/client/ui-tweaks/typography.ts

@@ -0,0 +1,38 @@
+/** Font overrides for the conversation, preserving the live theme families. */
+
+/**
+ * Apply the UI Tweaks size and spacing preferences to the host's prose tokens.
+ * @param fontSize - Selected body size in pixels.
+ * @param lineHeight - Vertical-spacing unit; 16 retains the normal rhythm.
+ * @param codeFontSize - Selected code-block size in pixels.
+ * @returns Theme-token overrides for a runtime stylesheet.
+ */
+export function buildFontCss(fontSize: number, lineHeight: number, codeFontSize: number): string {
+  const parts: string[] = []
+  const base = 'var(--dsw-font-markdown-base-font-family, var(--dsw-font-family))'
+  const code = 'var(--dsw-font-markdown-code-block-font-family, var(--ds-font-family-code))'
+  const token = (name: string, size: number, leading: number, family: string, weight = 400, style = 'normal'): void => {
+    const line = Math.max(12, Math.round(leading * (lineHeight / 16)))
+    parts.push(`--${name}:${style} ${weight} ${size}px/${line}px ${family}`)
+    parts.push(`--${name}-font-size:${size}px`)
+    parts.push(`--${name}-line-height:${line}px`)
+    parts.push(`--${name}-font-weight:${weight}`)
+    parts.push(`--${name}-font-style:${style}`)
+  }
+  const bodyLine = fontSize + 10
+  token('dsw-font-markdown-base', fontSize, bodyLine, base)
+  token('dsw-font-markdown-base-strong', fontSize, bodyLine, base, 600)
+  token('dsw-font-markdown-base-italic', fontSize, bodyLine, base, 400, 'italic')
+  token('dsw-font-markdown-base-strong-italic', fontSize, bodyLine, base, 600, 'italic')
+  token('dsw-font-markdown-h1', fontSize + 4, bodyLine + 4, base, 600)
+  token('dsw-font-markdown-h2', fontSize + 2, bodyLine + 2, base, 600)
+  token('dsw-font-markdown-h3', fontSize + 1, bodyLine + 1, base, 600)
+  token('dsw-font-markdown-h4', fontSize, bodyLine, base, 600)
+  token('dsw-font-markdown-table', fontSize, bodyLine, base)
+  token('dsw-font-markdown-table-head', fontSize, bodyLine, base, 500)
+  token('dsw-font-markdown-code', codeFontSize, codeFontSize + 7,
+    'var(--dsw-font-markdown-code-font-family, var(--ds-font-family-code))')
+  token('dsw-font-markdown-code-block', codeFontSize, codeFontSize + 7, code)
+  token('dsw-font-markdown-code-block-small', Math.max(8, codeFontSize - 2), codeFontSize + 3, code)
+  return `body{${parts.join(';')}}`
+}

package/src/index.ts

@@ -54,6 +54,7 @@ import { CodingPlanCatalogue } from './codingplan.ts'
 import { checkOneUpdate, CHATCODE_UPDATE_PACKAGES, performAllUpdates } from './chatcode-update.ts'
 import { readJsonBody, requireString, SidebarError, writeError, writeJson, writeOk } from './wire.ts'
 import { apply as applyUiTweaksHost } from './ui-tweaks/index.ts'
+import { buildPluginMarketApi } from './plugin-market-api.ts'
 
 export { Config }
 export type { SidebarConfig, ResolvedSidebarConfig }
@@ -491,6 +492,7 @@ function buildApi(
       const { sessionId, cwd } = await cwdOf(payload)
       return { sessionId, cwd, root: rootLabel(cwd), parent: parentOf(cwd) ?? null }
     },
+    ...buildPluginMarketApi(ctx, cwdOf),
     'fs.tree': async (payload) => {
       const { cwd } = await cwdOf(payload)
       const record = payload as { path?: unknown }