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

package/lib/index.js

@@ -26,7 +26,7 @@ import { YAMLMap, YAMLSeq, parse, parseDocument, stringify } from "yaml";
 const UI_TWEAKS_SETTINGS_NAMESPACE = "better-sidebar";
 /** Configuration schema with documented defaults. */
 const Config$1 = z$1.object({
-	fontSize: z$1.number().min(10).max(32).default(16),
+	fontSize: z$1.number().min(10).max(32).default(14),
 	codeFontScale: z$1.number().min(50).max(150).default(81),
 	codeFontSize: z$1.number().min(8).max(32),
 	lineHeight: z$1.number().min(0).max(64).default(16),
@@ -5882,6 +5882,51 @@ function apply$1(ctx) {
 	ctx.logger.info("[ChatCode CLI UI Tweaks] settings namespace registered and Web routes mounted");
 }
 //#endregion
+//#region src/plugin-market-api.ts
+function buildPluginMarketApi(ctx, cwdOf) {
+	const service = () => {
+		const value = ctx.get("chatcodePluginMarket", false);
+		if (!value) throw new SidebarError("chatcode-unavailable", "插件市场服务未挂载，请更新并启用 ChatCode config 插件。", 503);
+		return value;
+	};
+	const scopeOf = (payload) => {
+		const scope = requireString(payload, "scope");
+		if (scope !== "project" && scope !== "user") throw new SidebarError("bad-request", "scope must be project or user");
+		return scope;
+	};
+	const contextOf = async (payload) => {
+		const sessionId = payload?.sessionId;
+		if (sessionId === void 0 || sessionId === "") return {
+			sessionId: "",
+			cwd: process.cwd()
+		};
+		requireString(payload, "sessionId");
+		return {
+			sessionId,
+			cwd: (await cwdOf(payload)).cwd
+		};
+	};
+	return {
+		"plugins.context": contextOf,
+		"plugins.marketplaces": () => service().marketplaces(),
+		"plugins.catalog": async (payload) => {
+			const market = service();
+			const id = requireString(payload, "marketplaceId");
+			if (payload.includeMetadata !== true) return market.plugins(id);
+			return market.catalog ? market.catalog(id) : {
+				plugins: await market.plugins(id),
+				warning: ""
+			};
+		},
+		"plugins.installed": async (payload) => service().installed((await contextOf(payload)).cwd),
+		"plugins.install": async (payload) => service().install((await contextOf(payload)).cwd, requireString(payload, "pluginId"), scopeOf(payload)),
+		"plugins.uninstall": async (payload) => {
+			await service().uninstall((await contextOf(payload)).cwd, requireString(payload, "pluginId"), scopeOf(payload));
+			return { ok: true };
+		}
+	};
+}
+//#endregion
 //#region src/index.ts
 /**
 * dsh-better-sidebar host half: the /sidebar JSON API (explorer listing, file
@@ -6197,6 +6242,7 @@ function buildApi(ctx, ptyManager, agentPtyRegistry, resolved, terminalShell, ge
 				parent: parentOf(cwd) ?? null
 			};
 		},
+		...buildPluginMarketApi(ctx, cwdOf),
 		"fs.tree": async (payload) => {
 			const { cwd } = await cwdOf(payload);
 			return listDirectory(payload.path === void 0 ? cwd : await ensureWorkspacePath(cwd, requireString(payload, "path"), fenceEnabledOf(getSettings)), resolved.listLimit);

package/lib/types/client/PluginMarketSettingsSection.d.ts

@@ -0,0 +1,7 @@
+import type { Context } from '../context-types.ts';
+import type { PluginMarketCatalog } from './plugin-market-catalog.ts';
+export declare function PluginMarketSettingsSection({ ctx, catalog }: {
+    ctx: Context;
+    catalog: PluginMarketCatalog;
+}): JSX.Element;
+export declare function registerPluginMarketSettings(ctx: Context, catalog: PluginMarketCatalog): void;

package/lib/types/client/PluginMarketView.d.ts

@@ -0,0 +1,7 @@
+import { type SessionScope } from './api.ts';
+import type { PluginMarketCatalog } from './plugin-market-catalog.ts';
+export declare function PluginMarketView({ scope, visible, catalog }: {
+    scope: SessionScope;
+    visible: boolean;
+    catalog: PluginMarketCatalog;
+}): JSX.Element;

package/lib/types/client/api.d.ts

@@ -1,4 +1,5 @@
 import type { BrowserProbeResult } from './browser.ts';
+import type { MarketplaceCatalog, MarketplacePlugin, InstalledMarketplacePlugin, PluginMarketScope } from '../plugin-market-shared.ts';
 /** One wire failure. */
 export declare class SidebarApiError extends Error {
     readonly code: string;
@@ -184,6 +185,20 @@ export interface SessionScope {
 }
 /** The sidebar API surface (session scope threaded through every call). */
 export declare const api: {
+    pluginMarketContext: (scope: SessionScope, signal?: AbortSignal) => Promise<{
+        sessionId: string;
+        cwd: string;
+    }>;
+    pluginMarketplaces: (signal?: AbortSignal) => Promise<MarketplaceCatalog>;
+    pluginCatalog: (marketplaceId: string, signal?: AbortSignal) => Promise<MarketplacePlugin[] | {
+        plugins: MarketplacePlugin[];
+        warning: string;
+    }>;
+    pluginsInstalled: (scope: SessionScope, signal?: AbortSignal) => Promise<InstalledMarketplacePlugin[]>;
+    pluginInstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope) => Promise<InstalledMarketplacePlugin>;
+    pluginUninstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope) => Promise<{
+        ok: true;
+    }>;
     chatcodeStatus: (signal?: AbortSignal) => Promise<ChatCodeAuthState>;
     chatcodeStart: () => Promise<{
         sessionId: string;

package/lib/types/client/builtins/tabs.d.ts

@@ -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
@@ -8,6 +8,7 @@
  * (the old standalone explorer merged into it).
  */
 import type { Context } from '../../context-types.ts';
+import { type PluginMarketCatalog } from '../plugin-market-catalog.ts';
 import type { TabDescriptor } from '../service.ts';
 /** How many UI-owned terminals may be open at once (agent-owned ones are uncapped). */
 export declare const TERMINAL_LIMIT = 3;
@@ -15,6 +16,8 @@ export declare 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;
 }
-/** The 5 built-in tab descriptors. */
+/** The 6 built-in tab descriptors. */
 export declare function builtinTabs(ctx: Context, options?: BuiltinTabOptions): readonly TabDescriptor[];

package/lib/types/client/locales.d.ts

@@ -22,6 +22,27 @@
  */
 /** The zh dictionary (also registered into the ChatCode CLI locale registry under {@link LOCALE_NS}). */
 export declare const zh: {
+    pluginMarketTitle: string;
+    pluginMarketProjectDirectory: string;
+    pluginMarketInstalledTab: string;
+    pluginMarketRefresh: string;
+    pluginMarketLoading: string;
+    pluginMarketRefreshing: string;
+    pluginMarketEmpty: string;
+    pluginMarketBack: string;
+    pluginMarketInstall: string;
+    pluginMarketUninstall: string;
+    pluginMarketProject: string;
+    pluginMarketUser: string;
+    pluginMarketInstalled: string;
+    pluginMarketUninstalled: string;
+    pluginMarketSubtitle: string;
+    pluginMarketSearch: string;
+    pluginMarketDefault: string;
+    pluginMarketBrowse: string;
+    pluginMarketNoDescription: string;
+    pluginMarketInstalling: string;
+    pluginMarketUninstalling: string;
     accountMenuSettings: string;
     accountMenuLogout: string;
     accountMenuLabel: string;

package/lib/types/client/plugin-market-catalog.d.ts

@@ -0,0 +1,25 @@
+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 declare function createPluginMarketCatalog(): PluginMarketCatalog;
+export {};

package/lib/types/client/ui-tweaks/index.d.ts

@@ -58,7 +58,7 @@ declare const en: {
     readonly fontSize: "Message font size";
     readonly fontSizeHint: "Number between 10 and 32; applies to message text, headings, tables and code.";
     readonly codeFontSize: "Code font size";
-    readonly codeFontSizeHint: "Absolute code size in px (8–32); 13px is ChatCode CLI's default at a 16px body. Applies to code blocks; inline code follows proportionally.";
+    readonly codeFontSizeHint: "Absolute code size in px (8–32); 13px is ChatCode CLI's default at a 14px body. Applies to code blocks; inline code follows proportionally.";
     readonly lineHeight: "Line spacing";
     readonly 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; 16 is ChatCode CLI's default.";
     readonly tableStyle: "Table style";

package/lib/types/client/ui-tweaks/typography.d.ts

@@ -0,0 +1,9 @@
+/** 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 declare function buildFontCss(fontSize: number, lineHeight: number, codeFontSize: number): string;

package/lib/types/plugin-market-api.d.ts

@@ -0,0 +1,5 @@
+/** Shared config plugin routes inside the sidebar's existing trust fence. */
+import type { Context } from './context-types.ts';
+export declare function buildPluginMarketApi(ctx: Pick<Context, 'get'>, cwdOf: (payload: unknown) => Promise<{
+    cwd: string;
+}>): Record<string, (payload: unknown) => Promise<unknown>>;

package/lib/types/plugin-market-shared.d.ts

@@ -0,0 +1,37 @@
+/** Credential-free structural contract of the config plugin's host service. */
+export type PluginMarketScope = 'project' | 'user';
+export interface PluginMarketplace {
+    id: string;
+    name: string;
+    description: string;
+    official: boolean;
+}
+export interface MarketplacePlugin {
+    id: string;
+    marketplaceId: string;
+    name: string;
+    description: string;
+}
+export interface InstalledMarketplacePlugin extends MarketplacePlugin {
+    scope: PluginMarketScope;
+    projectPath: string;
+    installPath: string;
+    version: string;
+    installedAt: string;
+}
+export interface MarketplaceCatalog {
+    marketplaces: PluginMarketplace[];
+    warning: string;
+}
+export interface PluginCatalog {
+    plugins: MarketplacePlugin[];
+    warning: string;
+}
+export interface PluginMarketService {
+    marketplaces(): Promise<MarketplaceCatalog>;
+    plugins(marketplaceId: string): Promise<MarketplacePlugin[]>;
+    catalog?(marketplaceId: string): Promise<PluginCatalog>;
+    installed(cwd: string): Promise<InstalledMarketplacePlugin[]>;
+    install(cwd: string, pluginId: string, scope: PluginMarketScope): Promise<InstalledMarketplacePlugin>;
+    uninstall(cwd: string, pluginId: string, scope: PluginMarketScope): Promise<void>;
+}

package/lib/types/ui-tweaks/config.d.ts

@@ -22,10 +22,9 @@ export interface UITweaksConfig {
      */
     codeFontScale?: number;
     /**
-     * Absolute code font size in px (8–32). 13 matches the stock DSH code block
-     * at a 16px body. Drives the code block directly; inline code and the small
-     * code font follow proportionally. When unset, falls back to the legacy
-     * `codeFontScale` percentage, then to the stock default.
+     * Absolute code font size in px (8–32), default 13. Drives code blocks;
+     * inline code and small code follow proportionally. When unset, uses a non-default legacy
+     * `codeFontScale` percentage, otherwise 13px.
      */
     codeFontSize?: number;
     /**
@@ -106,7 +105,7 @@ export interface UITweaksConfig {
 }
 export declare const MIN_FONT_SIZE = 10;
 export declare const MAX_FONT_SIZE = 32;
-export declare const DEFAULT_FONT_SIZE = 16;
+export declare const DEFAULT_FONT_SIZE = 14;
 /** 16px matches the stock DSH vertical rhythm (message/block gaps, etc.). */
 export declare const MIN_LINE_HEIGHT = 0;
 export declare const MAX_LINE_HEIGHT = 64;
@@ -115,7 +114,7 @@ export declare const DEFAULT_LINE_HEIGHT = 16;
 export declare const MIN_CODE_FONT_SCALE = 50;
 export declare const MAX_CODE_FONT_SCALE = 150;
 export declare const DEFAULT_CODE_FONT_SCALE = 81;
-/** Absolute code font size (px): 13 is the stock DSH code block at a 16px body. */
+/** Default absolute code-block size, paired with 14px prose. */
 export declare const MIN_CODE_FONT_SIZE = 8;
 export declare const MAX_CODE_FONT_SIZE = 32;
 export declare const DEFAULT_CODE_FONT_SIZE = 13;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatcode/cco-better-sidebar",
-  "version": "0.18.0-rc.3",
+  "version": "0.18.0-rc.4",
   "description": "ChatCode CLI Web plugin: a VS Code-like right sidebar (explorer / editor / terminal / git / browser), isolated per conversation session. Exposes a service for other plugins to register sidebar tabs and file viewers.",
   "type": "module",
   "repository": {

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'),