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

package/lib/index.js

@@ -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");
@@ -5894,20 +6005,50 @@ function buildPluginMarketApi(ctx, cwdOf) {
 		if (scope !== "project" && scope !== "user") throw new SidebarError("bad-request", "scope must be project or user");
 		return scope;
 	};
+	const selectedProject = async (payload) => {
+		if (typeof payload?.projectPath !== "string") throw new SidebarError("bad-request", "请先选择目标项目目录。");
+		const path = requireString(payload, "projectPath");
+		const qualified = process.platform !== "win32" || /^(?:[A-Za-z]:[\\/]|[\\/]{2}[^\\/]+[\\/][^\\/]+)/.test(path);
+		if (!isAbsolute(path) || !qualified || path.includes("\0")) throw new SidebarError("bad-request", "请选择有效的项目目录。");
+		const canonical = await realpath(path);
+		if (!(await stat(canonical)).isDirectory()) throw new SidebarError("bad-request", "请选择项目文件夹。");
+		return canonical;
+	};
+	const picker = () => {
+		const value = ctx.get("directoryPicker", false);
+		if (!value) throw new SidebarError("method-error", "目录选择器未挂载，请启用宿主目录选择插件。", 503);
+		return value.capability();
+	};
 	const contextOf = async (payload) => {
 		const sessionId = payload?.sessionId;
-		if (sessionId === void 0 || sessionId === "") return {
-			sessionId: "",
-			cwd: process.cwd()
-		};
+		if (sessionId === void 0 || sessionId === "") return { sessionId: "" };
 		requireString(payload, "sessionId");
 		return {
 			sessionId,
 			cwd: (await cwdOf(payload)).cwd
 		};
 	};
+	const projectOf = async (payload) => {
+		if (payload?.projectPath !== void 0) return selectedProject(payload);
+		return (await contextOf(payload)).cwd;
+	};
 	return {
 		"plugins.context": contextOf,
+		"plugins.project.pick": async () => {
+			const capability = picker();
+			if (capability.kind === "browse") return { kind: "browse" };
+			const path = await capability.pick(AbortSignal.timeout(12e4));
+			return {
+				kind: "native",
+				path: path === null ? null : await selectedProject({ projectPath: path })
+			};
+		},
+		"plugins.project.directories": async (payload) => {
+			const capability = picker();
+			if (capability.kind !== "browse") throw new SidebarError("method-error", "当前宿主使用系统文件夹选择窗口。");
+			const path = payload?.path;
+			return capability.list(path === void 0 ? void 0 : requireString(payload, "path"), AbortSignal.timeout(15e3));
+		},
 		"plugins.marketplaces": () => service().marketplaces(),
 		"plugins.catalog": async (payload) => {
 			const market = service();
@@ -5918,10 +6059,20 @@ function buildPluginMarketApi(ctx, cwdOf) {
 				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.installed": async (payload) => {
+			const project = await projectOf(payload);
+			const records = await service().installed(project ?? process.cwd());
+			return project ? records : records.filter((record) => record.scope === "user");
+		},
+		"plugins.install": async (payload) => {
+			const scope = scopeOf(payload);
+			const project = scope === "project" ? await selectedProject(payload) : await projectOf(payload);
+			return service().install(project ?? process.cwd(), requireString(payload, "pluginId"), scope);
+		},
 		"plugins.uninstall": async (payload) => {
-			await service().uninstall((await contextOf(payload)).cwd, requireString(payload, "pluginId"), scopeOf(payload));
+			const scope = scopeOf(payload);
+			const project = scope === "project" ? await selectedProject(payload) : await projectOf(payload);
+			await service().uninstall(project ?? process.cwd(), requireString(payload, "pluginId"), scope);
 			return { ok: true };
 		}
 	};

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

@@ -0,0 +1,13 @@
+import type { PluginProjectPick } from '../plugin-market-shared.ts';
+export interface PluginProjectRequest {
+    result: Promise<PluginProjectPick>;
+    controller: AbortController;
+    finish: (path: string | null) => void;
+}
+export declare function PluginProjectPicker({ request, initialPath, onPicked, onCancel, onError }: {
+    request: PluginProjectRequest;
+    initialPath?: string;
+    onPicked: (path: string) => void;
+    onCancel: () => void;
+    onError: (message: string) => void;
+}): JSX.Element | null;

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

@@ -1,5 +1,5 @@
 import type { BrowserProbeResult } from './browser.ts';
-import type { MarketplaceCatalog, MarketplacePlugin, InstalledMarketplacePlugin, PluginMarketScope } from '../plugin-market-shared.ts';
+import type { MarketplaceCatalog, MarketplacePlugin, InstalledMarketplacePlugin, PluginMarketScope, PluginProjectPick, PluginProjectDirectories } from '../plugin-market-shared.ts';
 /** One wire failure. */
 export declare class SidebarApiError extends Error {
     readonly code: string;
@@ -187,16 +187,18 @@ export interface SessionScope {
 export declare const api: {
     pluginMarketContext: (scope: SessionScope, signal?: AbortSignal) => Promise<{
         sessionId: string;
-        cwd: string;
+        cwd?: string;
     }>;
+    pluginProjectPick: (signal?: AbortSignal) => Promise<PluginProjectPick>;
+    pluginProjectDirectories: (path?: string, signal?: AbortSignal) => Promise<PluginProjectDirectories>;
     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<{
+    pluginsInstalled: (scope: SessionScope, signal?: AbortSignal, projectPath?: string) => Promise<InstalledMarketplacePlugin[]>;
+    pluginInstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope, projectPath?: string) => Promise<InstalledMarketplacePlugin>;
+    pluginUninstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope, projectPath?: string) => Promise<{
         ok: true;
     }>;
     chatcodeStatus: (signal?: AbortSignal) => Promise<ChatCodeAuthState>;

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

@@ -37,14 +37,28 @@ export declare const zh: {
     pluginMarketInstalled: string;
     pluginMarketUninstalled: string;
     pluginMarketSubtitle: string;
+    pluginMarketChooseProject: string;
+    pluginMarketProjectHint: string;
+    pluginMarketChoosingDirectory: string;
+    pluginMarketInstalledAt: string;
+    pluginMarketInstallPath: string;
+    pluginMarketDirectoryPath: string;
+    pluginMarketOpenDirectory: string;
+    pluginMarketSelectDirectory: string;
+    pluginMarketHomeDirectory: string;
+    pluginMarketDirectoryTruncated: string;
     pluginMarketSearch: string;
     pluginMarketDefault: string;
     pluginMarketBrowse: string;
     pluginMarketNoDescription: string;
     pluginMarketInstalling: string;
     pluginMarketUninstalling: string;
+    pluginMarketInstallProgress: string;
+    pluginMarketUninstallProgress: string;
     accountMenuSettings: string;
     accountMenuLogout: string;
+    accountMenuLogoutConfirmTitle: string;
+    accountMenuLogoutConfirmDescription: string;
     accountMenuLabel: string;
     updateMenu: string;
     updateNav: string;

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

@@ -27,6 +27,28 @@ export interface PluginCatalog {
     plugins: MarketplacePlugin[];
     warning: string;
 }
+/** Host-owned paths for the remote Web directory browser. */
+export interface PluginProjectDirectories {
+    path: string;
+    home: string;
+    crumbs: Array<{
+        name: string;
+        path: string;
+        hidden: boolean;
+    }>;
+    entries: Array<{
+        name: string;
+        path: string;
+        hidden: boolean;
+    }>;
+    truncated: boolean;
+}
+export type PluginProjectPick = {
+    kind: 'native';
+    path: string | null;
+} | {
+    kind: 'browse';
+};
 export interface PluginMarketService {
     marketplaces(): Promise<MarketplaceCatalog>;
     plugins(marketplaceId: string): Promise<MarketplacePlugin[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatcode/cco-better-sidebar",
-  "version": "0.18.0-rc.4",
+  "version": "0.18.0-rc.6",
   "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>
+  )
+}

package/src/client/PluginMarketView.module.css

@@ -4,6 +4,17 @@
 .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; }
+.projectRow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+.projectRow > p { flex: 1; min-width: min(100%, 200px); }
+.projectRow > button { flex-shrink: 0; }
+.installPath { margin: 4px 0; overflow-wrap: anywhere; color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 18px; }
+.projectPicker { width: min(620px, calc(100vw - 32px)); }
+.directoryPath { display: flex; align-items: center; gap: 8px; }
+.directoryPath > span { flex: 1; min-width: 0; }
+.directoryCrumbs { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; }
+.directoryList { max-height: 320px; overflow: auto; min-height: 100px; }
+.directoryList > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
+.directoryList > button:hover, .directoryList > button:focus-visible { background: var(--dsw-alias-interactive-bg-hover); }
 .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; }
@@ -11,6 +22,9 @@
 .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; }
+.operation { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 16px; margin: 12px 0; border: 1px solid var(--dsw-alias-state-business-primary); border-radius: 10px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-state-business-primary); font-weight: 500; }
+.operation > span:first-child { flex-shrink: 0; }
+.operation > span:last-child { min-width: 0; overflow-wrap: anywhere; }
 .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); }