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

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),
@@ -865,13 +865,124 @@ function registerBundleRoute(ctx, fence) {
 	});
 }
 //#endregion
+//#region src/login-page-script.ts
+/** Standalone sign-in recovery; each document starts once and always keeps a usable reopen action. */
+const CHATCODE_LOGIN_PAGE_SCRIPT = String.raw`
+(() => {
+  const message = document.getElementById('message');
+  const button = document.getElementById('login');
+  const fallback = document.getElementById('login-fallback');
+  const link = document.getElementById('login-link');
+  const current = new URL(location.href);
+  const returnTo = (() => {
+    const value = current.searchParams.get('return');
+    if (!value || !value.startsWith('/') || value.startsWith('//')) return '/';
+    const target = new URL(value, location.origin);
+    return target.origin === location.origin ? target.pathname + target.search + target.hash : '/';
+  })();
+  let busy = false, checking = false, attempted = false, recheck = false, attempt, popup;
+  const call = async name => {
+    const response = await fetch('/sidebar/api/' + name, {
+      method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}',
+    });
+    const data = await response.json();
+    if (!response.ok || !data.ok) throw new Error('操作失败');
+    return data.value;
+  };
+  const showMessage = (text, error = false) => {
+    message.textContent = text;
+    message.classList.toggle('error', error);
+  };
+  async function login() {
+    if (busy) return;
+    attempted = true;
+    busy = true;
+    button.disabled = true;
+    button.textContent = '正在打开登录页…';
+    let tab = null;
+    try { tab = window.open('', '_blank'); if (tab) tab.opener = null; } catch {}
+    try {
+      if (!attempt) {
+        const started = await call('chatcode.start');
+        const url = new URL(started.url);
+        if (!['http:', 'https:'].includes(url.protocol) || typeof started.sessionId !== 'string') throw new Error('登录地址无效');
+        attempt = { sessionId: started.sessionId, url: url.href };
+      }
+      link.href = attempt.url;
+      link.textContent = attempt.url;
+      fallback.hidden = false;
+      if (tab && !tab.closed) {
+        try { tab.location.href = attempt.url; popup = tab; } catch { try { tab.close(); } catch {} }
+      }
+      showMessage('请在登录页完成登录；若网页已关闭，可随时重新打开。');
+    } catch {
+      try { if (tab) tab.close(); } catch {}
+      showMessage('登录页打开失败，请重试。', true);
+    } finally {
+      busy = false;
+      button.disabled = false;
+      button.textContent = attempt ? '重新打开登录页' : '去登录';
+    }
+  }
+  async function status() {
+    if (checking || busy) return;
+    checking = true;
+    const observedAttempt = attempt, observedStarted = attempted;
+    try {
+      const state = await call('chatcode.status');
+      if (busy || attempt !== observedAttempt || attempted !== observedStarted) return;
+      if (state.available && state.validation === 'valid' && !state.expired) {
+        try { if (popup) popup.close(); window.focus(); } catch {}
+        location.replace(returnTo);
+        return;
+      }
+      if (!state.available) {
+        recheck = true;
+        button.textContent = '重新检测';
+        showMessage('登录服务暂不可用，请稍后重试。', true);
+        return;
+      }
+      if (state.configured && state.validation === 'unavailable') {
+        recheck = true;
+        button.textContent = '重新检测';
+        showMessage('暂时无法验证已有账号，请检查网络后重新检测。', true);
+        return;
+      }
+      recheck = false;
+      button.textContent = attempt ? '重新打开登录页' : '去登录';
+      if (attempt && (state.login?.sessionId !== attempt.sessionId || state.login.state !== 'pending')) {
+        attempt = undefined;
+        fallback.hidden = true;
+        link.removeAttribute('href');
+        link.textContent = '';
+        button.textContent = '去登录';
+        showMessage('登录请求已失效，请重新登录。');
+      }
+      if (!attempted) await login();
+    } catch {
+      recheck = true;
+      button.textContent = '重新检测';
+      showMessage('无法读取登录状态，请稍后重试。', true);
+    } finally {
+      checking = false;
+      if (!busy) button.disabled = false;
+    }
+  }
+  button.addEventListener('click', () => { void (recheck ? status() : login()); });
+  void status();
+  setInterval(() => { void status(); }, 2000);
+})();
+`;
+//#endregion
 //#region src/login-route.ts
 const assetPath = join(dirname(fileURLToPath(import.meta.url)), "..", "assets", "logo.svg");
-function page(logo) {
+/** Render the standalone login gate with one automatic attempt and persistent manual recovery. */
+function renderChatcodeLoginPage(logo) {
 	return `<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>请登录 ChatCode</title><style>
 *{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;display:grid;place-items:center;font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;color:#172b4d;background:radial-gradient(circle at 18% 18%,#e5edff 0,transparent 30rem),linear-gradient(135deg,#edf2fb,#dfe8f7)}.card{width:min(490px,calc(100vw - 40px));padding:34px 44px 36px;border:1px solid #dce4ef;border-radius:18px;background:#fff;box-shadow:0 20px 48px rgba(36,62,103,.18),0 2px 8px rgba(36,62,103,.06)}.brand{display:flex;align-items:center;justify-content:center;gap:12px;padding-bottom:27px;border-bottom:1px solid #edf0f5}.brand img{width:34px;height:34px}.brand strong{font-size:22px;letter-spacing:-.02em}.content{padding-top:40px;text-align:center}.content h1{margin:0;font-size:28px;line-height:1.3;font-weight:650}.content p{min-height:24px;margin:12px 0 30px;color:#71809a;font-size:14px;line-height:1.7}.action{width:100%;min-height:46px;border:0;border-radius:8px;background:#9B0B09;color:#fff;font:600 15px/1 Inter,"Microsoft YaHei",sans-serif;cursor:pointer;box-shadow:0 8px 18px rgba(155,11,9,.25);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.action:hover:not(:disabled){transform:translateY(-2px);background:#b20d0a;box-shadow:0 12px 24px rgba(155,11,9,.38)}.action:focus-visible{outline:3px solid #f0b7b5;outline-offset:3px}.action:disabled{cursor:default;opacity:.7}.error{color:#b42318}@media(max-width:480px){.card{padding:30px 26px}.content{padding-top:32px}}
-</style></head><body><main class="card"><div class="brand"><img src="data:image/svg+xml;base64,${logo}" alt=""><strong>ChatCode</strong></div><section class="content"><h1>请登录 ChatCode</h1><p id="message">请登录后继续使用。</p><button id="login" class="action" type="button">去登录</button></section></main><script>
-const message=document.getElementById('message'),button=document.getElementById('login');const current=new URL(location.href);const returnTo=(()=>{const v=current.searchParams.get('return');return v&&v.startsWith('/')&&!v.startsWith('//')?v:'/'} )();const call=async(name,body={})=>{const r=await fetch('/sidebar/api/'+name,{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(body)});const d=await r.json();if(!r.ok||!d.ok)throw new Error(d.error?.message||'操作失败');return d.value};let waiting=false;async function status(){try{const s=await call('chatcode.status');if(s.available&&s.validation==='valid'&&!s.expired){location.replace(returnTo);return}if(waiting)message.textContent='正在等待浏览器完成登录…'}catch{message.textContent='无法读取登录状态，请稍后重试。';message.classList.add('error')}}async function login(){const tab=window.open('','_blank');button.disabled=true;button.textContent='正在打开登录页…';message.classList.remove('error');try{const s=await call('chatcode.start');waiting=true;if(tab&&!tab.closed){tab.opener=null;tab.location.href=s.url;message.textContent='请在新打开的浏览器窗口完成登录…'}else{message.innerHTML='浏览器拦截了登录窗口，请 <a href="'+s.url+'" target="_blank" rel="noopener noreferrer">打开登录页</a> 后完成登录。'}}catch{try{tab&&tab.close()}catch{}button.disabled=false;button.textContent='去登录';message.textContent='登录页打开失败，请重试。';message.classList.add('error')}}button.addEventListener('click',login);status();setInterval(status,2000);
+.login-fallback{margin:18px 0 0;color:#71809a;font-size:12px;line-height:1.7;overflow-wrap:anywhere}.login-fallback a{display:block;margin-top:4px;color:#315da8;text-underline-offset:3px}
+</style></head><body><main class="card"><div class="brand"><img src="data:image/svg+xml;base64,${logo}" alt=""><strong>ChatCode</strong></div><section class="content"><h1>请登录 ChatCode</h1><p id="message" aria-live="polite">正在检查登录状态…</p><button id="login" class="action" type="button" disabled>正在检查登录状态…</button><div id="login-fallback" class="login-fallback" hidden>若登录网页已关闭或未弹出，可再次访问：<a id="login-link" target="_blank" rel="noopener noreferrer"></a></div></section></main><script>
+${CHATCODE_LOGIN_PAGE_SCRIPT}
 <\/script></body></html>`;
 }
 function registerLoginRoute(ctx, fence) {
@@ -896,7 +1007,7 @@ function registerLoginRoute(ctx, fence) {
 					"cache-control": "no-store",
 					"content-security-policy": "default-src 'self'; img-src 'self' data:; style-src 'unsafe-inline'; script-src 'unsafe-inline'"
 				});
-				res.end(req.method === "HEAD" ? void 0 : page(logo));
+				res.end(req.method === "HEAD" ? void 0 : renderChatcodeLoginPage(logo));
 			} catch {
 				res.writeHead(500);
 				res.end("login page unavailable");
@@ -5882,6 +5993,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 +6353,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/LogoutConfirmDialog.d.ts

@@ -0,0 +1,5 @@
+/** Native modal supplies an inert background and default Cancel focus until a choice is made. */
+export declare function LogoutConfirmDialog({ onCancel, onConfirm }: {
+    onCancel: () => void;
+    onConfirm: () => void;
+}): JSX.Element;

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,8 +22,31 @@
  */
 /** 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;
+    accountMenuLogoutConfirmTitle: string;
+    accountMenuLogoutConfirmDescription: string;
     accountMenuLabel: string;
     updateMenu: string;
     updateNav: 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/branding.d.ts

@@ -40,6 +40,6 @@ export declare function SidebarProjectLogo({ size }: {
 }): ReactNode;
 /** Expanded-sidebar wordmark supplied through the host's dedicated slot. */
 export declare function SidebarProjectName(): ReactNode;
-export declare const BRANDING_CSS = "\n/* ChatCode CLI branding is deliberately limited to primary actions.  Every\n   other surface and interaction state (including workspace/sidebar rows,\n   menus, the composer, text and shadows) remains owned by the host theme. */\nbody:not([data-ds-dark-theme]) .dut-unicom-primary-action{background:linear-gradient(135deg,#9B0B09,#b71916) !important;border-color:#9B0B09 !important;color:#fff !important;box-shadow:0 7px 18px rgba(155,11,9,.24) !important}\nbody:not([data-ds-dark-theme]) .dut-unicom-primary-action:hover{background:linear-gradient(135deg,#b71916,#cf302c) !important;border-color:#b71916 !important;color:#fff !important;box-shadow:0 10px 24px rgba(155,11,9,.30) !important}\nbody:not([data-ds-dark-theme]) .dut-unicom-primary-action:active{transform:translateY(1px);box-shadow:0 4px 11px rgba(155,11,9,.22) !important}\n/* In dark mode, alter only the resting background of primary buttons.  Once\n   hovered, the host owns the complete interaction treatment again. */\nbody[data-ds-dark-theme] .dut-unicom-primary-action:not(:hover){background:#9B0B09 !important}\n.dut-project-logo{display:block;object-fit:contain}\n.dut-left-logo{width:44px !important;height:44px !important}\n.dut-brand-title{font-size:18px !important;font-weight:600 !important}\n.dut-sidebar-logo{width:44px !important;height:44px !important}\n/* The alpha sidebar keeps its slotted identity at 24px and clips the brand\n   button. Give only our expanded identity the full artwork height so the\n   44px knot is not cropped by that host-owned overflow boundary. */\n[class*=\"brandIdentity\"]:has(.dut-sidebar-logo){height:44px !important}\n.dut-sidebar-brand-name{font-size:18px !important;line-height:22px !important;font-weight:600 !important;letter-spacing:0 !important;white-space:nowrap}\n.dut-brand-version{display:none !important}\n.dut-hero-preview{display:none !important}\n.dut-hero-logo{width:60px !important;height:60px !important}\n.dut-hero-title{font-size:30px !important;line-height:40px !important;font-weight:600 !important;letter-spacing:.06em !important;white-space:nowrap}\n[class*=\"headline\"]:has(.dut-hero-logo){grid-template-columns:60px auto !important;font-size:30px !important;line-height:40px !important}\n.dut-settings-logo{width:19px;height:19px;object-fit:contain}\n";
+export declare const BRANDING_CSS = "\n/* ChatCode CLI branding is deliberately limited to primary actions.  Every\n   other surface and interaction state (including workspace/sidebar rows,\n   menus, the composer, text and shadows) remains owned by the host theme. */\nbody:not([data-ds-dark-theme]) .dut-unicom-primary-action{background:linear-gradient(135deg,#9B0B09,#b71916) !important;border-color:#9B0B09 !important;color:#fff !important;box-shadow:0 7px 18px rgba(155,11,9,.24) !important}\nbody:not([data-ds-dark-theme]) .dut-unicom-primary-action:hover{background:linear-gradient(135deg,#b71916,#cf302c) !important;border-color:#b71916 !important;color:#fff !important;box-shadow:0 10px 24px rgba(155,11,9,.30) !important}\nbody:not([data-ds-dark-theme]) .dut-unicom-primary-action:active{transform:translateY(1px);box-shadow:0 4px 11px rgba(155,11,9,.22) !important}\n/* In dark mode, alter only the resting background of primary buttons.  Once\n   hovered, the host owns the complete interaction treatment again. */\nbody[data-ds-dark-theme] .dut-unicom-primary-action:not(:hover){background:#9B0B09 !important}\n.dut-project-logo{display:block;object-fit:contain}\n.dut-left-logo{width:24px !important;height:24px !important}\n.dut-brand-title{font:var(--dsw-font-s-strong-14) !important}\n.dut-sidebar-logo{width:24px !important;height:24px !important}\n.dut-sidebar-brand-name{font:var(--dsw-font-s-strong-14) !important;letter-spacing:-.01em !important;white-space:nowrap}\n\n.dut-sidebar-header{height:44px !important;padding:0 4px !important;margin-bottom:8px !important;gap:8px !important}\n.dut-sidebar-brand{min-width:0 !important;background:transparent !important;box-shadow:none !important}\n.dut-sidebar-identity{height:24px !important;gap:8px !important}\n.dut-sidebar-wordmark{font:var(--dsw-font-s-strong-14) !important;letter-spacing:-.01em !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.dut-sidebar-toggle{width:28px !important;height:28px !important;border-radius:8px !important;color:var(--dsw-alias-label-secondary) !important}\n.dut-sidebar-toggle:hover{background:var(--dsw-alias-interactive-bg-hover) !important}\n/* Reuse the original ChatCode primary-action red, scoped to this marked CTA. */\n.dut-sidebar-new-session{height:40px !important;justify-content:flex-start !important;gap:8px !important;margin:0 0 10px !important;padding:8px 10px !important;border:1px solid #9B0B09 !important;border-radius:10px !important;background:linear-gradient(135deg,#9B0B09,#b71916) !important;color:#fff !important;font:var(--dsw-font-s-strong-14) !important;font-weight:600 !important;box-shadow:none !important;transform:none !important}\n.dut-sidebar-new-session:hover{background:linear-gradient(135deg,#b71916,#cf302c) !important}\n.dut-sidebar-new-session:active{background:#9B0B09 !important}\n.dut-sidebar-new-session:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}\n.dut-sidebar-new-session > span:first-child{flex:1;min-width:0;overflow:hidden;mask-image:none !important}\n.dut-sidebar-new-session > span:first-child > span{width:auto !important;justify-content:flex-start !important;gap:8px !important;min-width:0}\n.dut-sidebar-new-session > span:first-child > span > svg{width:16px;height:16px;flex:none;color:inherit}\n.dut-sidebar-new-session > span:first-child > span > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.dut-sidebar-new-session > span + span{opacity:1 !important;flex:none;color:color-mix(in srgb,currentColor 75%,transparent);font:var(--dsw-font-xxs-12)}\n/* Temporary navigation-only hide. Remove this block to restore Plugins;\n   registrations, settings, installed plugins and other panel entries stay intact. */\nnav:is([aria-label=\"\u5168\u5C40\u9762\u677F\"],[aria-label=\"Global panels\"]) > button:is([aria-label=\"\u63D2\u4EF6\"],[aria-label=\"Plugins\"]),\nnav:is([aria-label=\"\u5168\u5C40\u9762\u677F\"],[aria-label=\"Global panels\"]):has(> button:is([aria-label=\"\u63D2\u4EF6\"],[aria-label=\"Plugins\"]):only-child){display:none !important}\n\n.dut-brand-version{display:none !important}\n.dut-hero-preview{display:none !important}\n.dut-hero-logo{width:60px !important;height:60px !important}\n.dut-hero-title{font-size:30px !important;line-height:40px !important;font-weight:600 !important;letter-spacing:.06em !important;white-space:nowrap}\n[class*=\"headline\"]:has(.dut-hero-logo){grid-template-columns:60px auto !important;font-size:30px !important;line-height:40px !important}\n.dut-settings-logo{width:19px;height:19px;object-fit:contain}\n";
 /** Install the brand theme and retain it across host navigation/rerenders. */
 export declare function installBranding(): () => void;

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/sidebar-header.d.ts

@@ -0,0 +1,6 @@
+/** Compact sidebar chrome; the host retains every button, shortcut and drag surface. */
+export declare const SIDEBAR_HEADER_CSS = "\n.dut-sidebar-header{height:44px !important;padding:0 4px !important;margin-bottom:8px !important;gap:8px !important}\n.dut-sidebar-brand{min-width:0 !important;background:transparent !important;box-shadow:none !important}\n.dut-sidebar-identity{height:24px !important;gap:8px !important}\n.dut-sidebar-wordmark{font:var(--dsw-font-s-strong-14) !important;letter-spacing:-.01em !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.dut-sidebar-toggle{width:28px !important;height:28px !important;border-radius:8px !important;color:var(--dsw-alias-label-secondary) !important}\n.dut-sidebar-toggle:hover{background:var(--dsw-alias-interactive-bg-hover) !important}\n/* Reuse the original ChatCode primary-action red, scoped to this marked CTA. */\n.dut-sidebar-new-session{height:40px !important;justify-content:flex-start !important;gap:8px !important;margin:0 0 10px !important;padding:8px 10px !important;border:1px solid #9B0B09 !important;border-radius:10px !important;background:linear-gradient(135deg,#9B0B09,#b71916) !important;color:#fff !important;font:var(--dsw-font-s-strong-14) !important;font-weight:600 !important;box-shadow:none !important;transform:none !important}\n.dut-sidebar-new-session:hover{background:linear-gradient(135deg,#b71916,#cf302c) !important}\n.dut-sidebar-new-session:active{background:#9B0B09 !important}\n.dut-sidebar-new-session:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}\n.dut-sidebar-new-session > span:first-child{flex:1;min-width:0;overflow:hidden;mask-image:none !important}\n.dut-sidebar-new-session > span:first-child > span{width:auto !important;justify-content:flex-start !important;gap:8px !important;min-width:0}\n.dut-sidebar-new-session > span:first-child > span > svg{width:16px;height:16px;flex:none;color:inherit}\n.dut-sidebar-new-session > span:first-child > span > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.dut-sidebar-new-session > span + span{opacity:1 !important;flex:none;color:color-mix(in srgb,currentColor 75%,transparent);font:var(--dsw-font-xxs-12)}\n/* Temporary navigation-only hide. Remove this block to restore Plugins;\n   registrations, settings, installed plugins and other panel entries stay intact. */\nnav:is([aria-label=\"\u5168\u5C40\u9762\u677F\"],[aria-label=\"Global panels\"]) > button:is([aria-label=\"\u63D2\u4EF6\"],[aria-label=\"Plugins\"]),\nnav:is([aria-label=\"\u5168\u5C40\u9762\u677F\"],[aria-label=\"Global panels\"]):has(> button:is([aria-label=\"\u63D2\u4EF6\"],[aria-label=\"Plugins\"]):only-child){display:none !important}\n";
+/** Mark only the expanded brand row and its adjacent native New Session button. */
+export declare function syncSidebarHeader(): void;
+/** Restore native header styling when the branding effect is disposed. */
+export declare function clearSidebarHeader(): void;

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/login-page-script.d.ts

@@ -0,0 +1,2 @@
+/** Standalone sign-in recovery; each document starts once and always keeps a usable reopen action. */
+export declare const CHATCODE_LOGIN_PAGE_SCRIPT: string;

package/lib/types/login-route.d.ts

@@ -1,2 +1,4 @@
 import type { Context, SidebarHttpRequest } from './context-types.ts';
+/** Render the standalone login gate with one automatic attempt and persistent manual recovery. */
+export declare function renderChatcodeLoginPage(logo: string): string;
 export declare function registerLoginRoute(ctx: Context, fence: (req: SidebarHttpRequest) => boolean): () => void;

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.5",
   "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/AccountMenu.tsx

@@ -11,6 +11,7 @@ import { useEffect, useRef, useState } from 'react'
 import { api } from './api.ts'
 import { useChatcodeAccount } from './useChatcodeAccount.ts'
 import { redirectToChatcodeLogin } from './chatcode-login-route.ts'
+import { LogoutConfirmDialog } from './LogoutConfirmDialog.tsx'
 import { t } from './locales.ts'
 import css from './sidebar.module.css'
 
@@ -75,6 +76,7 @@ function logout(): void {
 export function AccountMenu(): JSX.Element {
   const rootRef = useRef<HTMLDivElement>(null)
   const [open, setOpen] = useState(false)
+  const [logoutTarget, setLogoutTarget] = useState<'chatcode' | 'browser'>()
   const [userName, setUserName] = useState('User')
   const { chatcode, busy, error, loginUrl, startLogin, logout: logoutChatcode } = useChatcodeAccount()
 
@@ -157,11 +159,11 @@ export function AccountMenu(): JSX.Element {
             {canStartChatcodeLogin && <button type="button" role="menuitem" className={css.accountItem} disabled={busy} onClick={startLogin}>
               <LogoutIcon />{busy ? t('accountMenuChatcodeStarting') : t('accountMenuChatcodeLogin')}
             </button>}
-            {hasChatcodeAccount && <button type="button" role="menuitem" className={css.accountItem} disabled={busy} onClick={logoutChatcode}>
+            {hasChatcodeAccount && <button type="button" role="menuitem" className={css.accountItem} disabled={busy} onClick={() => { setLogoutTarget('chatcode') }}>
               <LogoutIcon />{t('accountMenuLogout')}
             </button>}
           </>}
-          {chatcode?.available === false && <button type="button" role="menuitem" className={css.accountItem} onClick={logout}>
+          {chatcode?.available === false && <button type="button" role="menuitem" className={css.accountItem} onClick={() => { setLogoutTarget('browser') }}>
             <LogoutIcon />{t('accountMenuLogout')}
           </button>}
         </div>
@@ -178,6 +180,14 @@ export function AccountMenu(): JSX.Element {
         <span className={css.accountName}>{chatcodeName}</span>
         <span className={css.accountPresence} style={{ opacity: signedIn ? 1 : 0.25 }} aria-hidden="true" />
       </button>
+      {logoutTarget !== undefined && <LogoutConfirmDialog
+        onCancel={() => { setLogoutTarget(undefined) }}
+        onConfirm={() => {
+          setLogoutTarget(undefined)
+          if (logoutTarget === 'chatcode') logoutChatcode()
+          else logout()
+        }}
+      />}
     </div>
   )
 }

package/src/client/LogoutConfirmDialog.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useId, useRef } from 'react'
+import { t } from './locales.ts'
+import css from './sidebar.module.css'
+
+/** Native modal supplies an inert background and default Cancel focus until a choice is made. */
+export function LogoutConfirmDialog({ onCancel, onConfirm }: {
+  onCancel: () => void
+  onConfirm: () => void
+}): JSX.Element {
+  const ref = useRef<HTMLDialogElement>(null)
+  const titleId = useId()
+  const descriptionId = useId()
+
+  useEffect(() => {
+    const dialog = ref.current
+    dialog?.showModal()
+    return () => { if (dialog?.open) dialog.close() }
+  }, [])
+
+  return (
+    <dialog
+      ref={ref}
+      className={css.accountLogoutDialog}
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      onCancel={event => { event.preventDefault(); onCancel() }}
+      onKeyDown={event => { event.stopPropagation() }}
+    >
+      <h2 id={titleId} className={css.accountLogoutTitle}>{t('accountMenuLogoutConfirmTitle')}</h2>
+      <p id={descriptionId} className={css.accountLogoutDescription}>{t('accountMenuLogoutConfirmDescription')}</p>
+      <div className={css.accountLogoutActions}>
+        <button type="button" autoFocus onClick={onCancel}>{t('cancel')}</button>
+        <button type="button" className={css.accountLogoutConfirm} onClick={onConfirm}>{t('accountMenuLogout')}</button>
+      </div>
+    </dialog>
+  )
+}