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

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");

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

@@ -45,6 +45,8 @@ export declare const zh: {
     pluginMarketUninstalling: 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/package.json

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

package/src/client/locales-ja.ts

@@ -39,6 +39,8 @@ export const ja: Record<string, string> = {
   pluginMarketUninstalling: 'アンインストール中…',
   accountMenuSettings: '設定',
   accountMenuLogout: 'ログアウト',
+  accountMenuLogoutConfirmTitle: 'ログアウトしますか？',
+  accountMenuLogoutConfirmDescription: 'ChatCode CLI からログアウトしますか？続行するには再度ログインする必要があります。',
   accountMenuLabel: 'アカウントメニュー',
   updateMenu: '更新を確認 / 今すぐ更新',
   updateNav: '更新',

package/src/client/locales.ts

@@ -46,6 +46,8 @@ export const zh = {
   pluginMarketUninstalling: '卸载中…',
   accountMenuSettings: '设置',
   accountMenuLogout: '退出登录',
+  accountMenuLogoutConfirmTitle: '退出登录？',
+  accountMenuLogoutConfirmDescription: '确定要退出 ChatCode CLI 吗？退出后需要重新登录才能继续使用。',
   accountMenuLabel: '账户菜单',
   updateMenu: '检查更新 / 一键更新',
   updateNav: '更新',
@@ -538,6 +540,8 @@ export const en: Record<keyof typeof zh, string> = {
   pluginMarketUninstalling: 'Uninstalling…',
   accountMenuSettings: 'Settings',
   accountMenuLogout: 'Log out',
+  accountMenuLogoutConfirmTitle: 'Log out?',
+  accountMenuLogoutConfirmDescription: 'Are you sure you want to log out of ChatCode CLI? You will need to sign in again to continue.',
   accountMenuLabel: 'Account menu',
   updateMenu: 'Check for updates / Update now',
   updateNav: 'Update',
@@ -1037,6 +1041,8 @@ import { zhMO as zhMODict } from './locales-zh-MO.ts'
 // English fallback for the new account/model surfaces until third-language translations are supplied.
 // Keep this list explicit so the dictionary parity check still catches other missing keys.
 const accountAndModelFallback = {
+  accountMenuLogoutConfirmTitle: en.accountMenuLogoutConfirmTitle,
+  accountMenuLogoutConfirmDescription: en.accountMenuLogoutConfirmDescription,
   chatcodeGateChecking: en.chatcodeGateChecking,
   chatcodeGateUnverified: en.chatcodeGateUnverified,
   chatcodeGatePending: en.chatcodeGatePending,

package/src/client/sidebar.module.css

@@ -442,13 +442,11 @@
   box-sizing: border-box;
   gap: 8px;
   width: 100%;
-  min-height: 52px;
-  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
+  min-height: 44px;
+  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
   border-radius: 0;
   background: var(--dsw-alias-bg-layer-1);
-  font-family: var(--dsw-font-family-body);
-  font-size: var(--dsw-font-size-body-sm);
-  line-height: var(--dsw-font-line-height-body-sm);
+  font: var(--dsw-font-xs-13);
   transition: background var(--ds-transition-duration-slow) var(--ds-ease-in-out);
 }
 
@@ -466,18 +464,21 @@
 .accountAvatar {
   position: relative;
   display: grid;
-  width: 28px;
-  height: 28px;
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
   flex: none;
   place-items: center;
   border-radius: 50%;
   background: var(--dsw-alias-bg-layer-3);
   border: 1px solid var(--dsw-alias-border-l2);
   color: var(--dsw-alias-fg-accent);
+  font: var(--dsw-font-xxs-12);
   font-weight: 600;
 }
 
 .accountName {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -490,10 +491,10 @@
   left: 8px;
   display: grid;
   box-sizing: border-box;
-  width: min(252px, calc(100% - 16px));
-  padding: 10px 8px 8px;
+  width: min(224px, calc(100% - 16px));
+  padding: 8px 6px 6px;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 12px;
+  border-radius: 10px;
   background: var(--dsw-alias-bg-layer-2);
   z-index: 1;
 }
@@ -502,16 +503,15 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  min-height: 36px;
-  padding: 0 8px 8px;
-  font-family: var(--dsw-font-family-body);
-  font-size: var(--dsw-font-size-body-sm);
-  line-height: var(--dsw-font-line-height-body-sm);
+  min-width: 0;
+  min-height: 28px;
+  padding: 0 6px 6px;
+  font: var(--dsw-font-xs-13);
 }
 
 .accountMenuDivider {
   height: 1px;
-  margin: 0 4px 6px;
+  margin: 0 4px 4px;
   background: var(--dsw-alias-border-l2);
 }
 
@@ -519,12 +519,12 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  min-height: 32px;
-  padding: 0 10px;
+  min-height: 30px;
+  padding: 0 8px;
   border-radius: 7px;
   background: transparent;
   text-align: left;
-  font: var(--dsw-font-s-14);
+  font: var(--dsw-font-xs-13);
 }
 
 .accountItem:hover {
@@ -546,6 +546,68 @@
   border-color: var(--dsw-alias-bg-layer-1);
 }
 
+/* The native top layer is viewport-centered even though the account rail is positioned. */
+.accountLogoutDialog {
+  box-sizing: border-box;
+  width: min(400px, calc(100vw - 32px));
+  max-width: calc(100vw - 32px);
+  max-height: calc(100dvh - 32px);
+  margin: auto;
+  padding: 24px;
+  overflow: auto;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 16px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-fg-base);
+  font: var(--dsw-font-s-14);
+}
+
+.accountLogoutDialog::backdrop {
+  background: var(--dsw-alias-bg-mask-1);
+}
+
+.accountLogoutTitle {
+  margin: 0;
+  font: var(--dsw-font-base-strong-16);
+}
+
+.accountLogoutDescription {
+  margin: 12px 0 24px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.accountLogoutActions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.accountLogoutActions button {
+  min-height: 34px;
+  padding: 6px 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-fg-base);
+  font: var(--dsw-font-xs-13);
+  cursor: pointer;
+}
+
+.accountLogoutActions button:hover {
+  background: var(--dsw-alias-bg-hover);
+}
+
+.accountLogoutActions button:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-accent);
+  outline-offset: 2px;
+}
+
+.accountLogoutActions .accountLogoutConfirm {
+  border-color: var(--dsw-alias-state-error-primary);
+  color: var(--dsw-alias-state-error-primary);
+}
+
 /* The compatibility action cluster used when the host exposes no native
    right-sidebar affordance. It stays pinned to the viewport corner, sitting
    flush in the 34px tab strip (28px buttons at top: 3) whose right end it

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

@@ -8,6 +8,7 @@
  */
 
 import type { ReactNode } from 'react'
+import { clearSidebarHeader, SIDEBAR_HEADER_CSS, syncSidebarHeader } from './sidebar-header.ts'
 
 declare module '@deepseek-ai/dsh-client-ui-slots' {
   interface SlotMap {
@@ -89,14 +90,11 @@ body:not([data-ds-dark-theme]) .dut-unicom-primary-action:active{transform:trans
    hovered, the host owns the complete interaction treatment again. */
 body[data-ds-dark-theme] .dut-unicom-primary-action:not(:hover){background:#9B0B09 !important}
 .dut-project-logo{display:block;object-fit:contain}
-.dut-left-logo{width:44px !important;height:44px !important}
-.dut-brand-title{font-size:18px !important;font-weight:600 !important}
-.dut-sidebar-logo{width:44px !important;height:44px !important}
-/* The alpha sidebar keeps its slotted identity at 24px and clips the brand
-   button. Give only our expanded identity the full artwork height so the
-   44px knot is not cropped by that host-owned overflow boundary. */
-[class*="brandIdentity"]:has(.dut-sidebar-logo){height:44px !important}
-.dut-sidebar-brand-name{font-size:18px !important;line-height:22px !important;font-weight:600 !important;letter-spacing:0 !important;white-space:nowrap}
+.dut-left-logo{width:24px !important;height:24px !important}
+.dut-brand-title{font:var(--dsw-font-s-strong-14) !important}
+.dut-sidebar-logo{width:24px !important;height:24px !important}
+.dut-sidebar-brand-name{font:var(--dsw-font-s-strong-14) !important;letter-spacing:-.01em !important;white-space:nowrap}
+${SIDEBAR_HEADER_CSS}
 .dut-brand-version{display:none !important}
 .dut-hero-preview{display:none !important}
 .dut-hero-logo{width:60px !important;height:60px !important}
@@ -110,7 +108,8 @@ function hasPrimaryLabel(button: HTMLButtonElement): boolean {
   // descriptions, where words like "install" do not identify a primary action.
   if (button.closest('[data-chatcode-plugin-market], [data-plugin-module]')) return false
   const label = `${button.textContent ?? ''} ${button.getAttribute('aria-label') ?? ''} ${button.title}`.trim().toLowerCase()
-  return /(?:^|\s)(new session|send|install)(?:\s|$)|新会话|发送|(?:^|\s)安装(?:\s|$)/u.test(label)
+  if (button.classList.contains('dut-sidebar-brand') || button.classList.contains('dut-sidebar-new-session')) return false
+  return /(?:^|\s)(send|install)(?:\s|$)|发送|(?:^|\s)安装(?:\s|$)/u.test(label)
 }
 
 /** Replace one host SVG while retaining its generated layout class names. */
@@ -241,6 +240,7 @@ function syncBranding(): void {
     if (svg instanceof SVGElement) replaceHostLogo(svg)
   })
 
+  syncSidebarHeader()
   document.querySelectorAll<HTMLButtonElement>('button').forEach((button) => {
     button.classList.toggle('dut-unicom-primary-action', hasPrimaryLabel(button))
   })
@@ -285,6 +285,7 @@ export function installBranding(): () => void {
   return () => {
     observer.disconnect()
     if (frame !== undefined) window.cancelAnimationFrame(frame)
+    clearSidebarHeader()
     favicon.remove()
     style.remove()
   }

package/src/client/ui-tweaks/sidebar-header.ts

@@ -0,0 +1,73 @@
+/** Compact sidebar chrome; the host retains every button, shortcut and drag surface. */
+export const SIDEBAR_HEADER_CSS = `
+.dut-sidebar-header{height:44px !important;padding:0 4px !important;margin-bottom:8px !important;gap:8px !important}
+.dut-sidebar-brand{min-width:0 !important;background:transparent !important;box-shadow:none !important}
+.dut-sidebar-identity{height:24px !important;gap:8px !important}
+.dut-sidebar-wordmark{font:var(--dsw-font-s-strong-14) !important;letter-spacing:-.01em !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dut-sidebar-toggle{width:28px !important;height:28px !important;border-radius:8px !important;color:var(--dsw-alias-label-secondary) !important}
+.dut-sidebar-toggle:hover{background:var(--dsw-alias-interactive-bg-hover) !important}
+/* Reuse the original ChatCode primary-action red, scoped to this marked CTA. */
+.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}
+.dut-sidebar-new-session:hover{background:linear-gradient(135deg,#b71916,#cf302c) !important}
+.dut-sidebar-new-session:active{background:#9B0B09 !important}
+.dut-sidebar-new-session:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}
+.dut-sidebar-new-session > span:first-child{flex:1;min-width:0;overflow:hidden;mask-image:none !important}
+.dut-sidebar-new-session > span:first-child > span{width:auto !important;justify-content:flex-start !important;gap:8px !important;min-width:0}
+.dut-sidebar-new-session > span:first-child > span > svg{width:16px;height:16px;flex:none;color:inherit}
+.dut-sidebar-new-session > span:first-child > span > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.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)}
+/* Temporary navigation-only hide. Remove this block to restore Plugins;
+   registrations, settings, installed plugins and other panel entries stay intact. */
+nav:is([aria-label="全局面板"],[aria-label="Global panels"]) > button:is([aria-label="插件"],[aria-label="Plugins"]),
+nav:is([aria-label="全局面板"],[aria-label="Global panels"]):has(> button:is([aria-label="插件"],[aria-label="Plugins"]):only-child){display:none !important}
+`
+
+const HEADER_CLASSES = [
+  'dut-sidebar-header', 'dut-sidebar-brand', 'dut-sidebar-identity',
+  'dut-sidebar-wordmark', 'dut-sidebar-toggle', 'dut-sidebar-new-session',
+] as const
+type HeaderClass = typeof HEADER_CLASSES[number]
+
+/** Mark only the expanded brand row and its adjacent native New Session button. */
+export function syncSidebarHeader(): void {
+  const desired = new Map<HTMLElement, Set<HeaderClass>>()
+  const mark = (element: Element | null | undefined, className: HeaderClass): void => {
+    if (!(element instanceof HTMLElement)) return
+    const classes = desired.get(element) ?? new Set<HeaderClass>()
+    classes.add(className)
+    desired.set(element, classes)
+  }
+  for (const name of document.querySelectorAll<HTMLElement>('.dut-sidebar-brand-name,.dut-brand-title')) {
+    const row = name.closest<HTMLElement>('[data-window-drag]')
+    const logo = row?.querySelector('.dut-sidebar-logo,.dut-left-logo')
+    if (!row || !logo) continue
+    const brand = [...row.children].find(child => child.contains(name) && child.contains(logo))
+    if (!brand) continue
+    mark(row, 'dut-sidebar-header')
+    mark(brand, 'dut-sidebar-brand')
+    mark(logo.closest('[class*="brandIdentity"]'), 'dut-sidebar-identity')
+    mark(name, 'dut-sidebar-wordmark')
+    for (const button of row.querySelectorAll('button')) {
+      if (!brand.contains(button) && button !== brand) mark(button, 'dut-sidebar-toggle')
+    }
+    // The host renders this native action directly after the drag row. Do
+    // not infer a new action from arbitrary text in another panel or dialog.
+    const next = row.nextElementSibling
+    if (next instanceof HTMLButtonElement) mark(next, 'dut-sidebar-new-session')
+  }
+  // A collapsed rail no longer has a wordmark. Remove expanded-only styling
+  // without changing the host's rail geometry or its logo/expand interaction.
+  for (const className of HEADER_CLASSES) {
+    for (const element of document.querySelectorAll<HTMLElement>(`.${className}`)) {
+      if (!desired.get(element)?.has(className)) element.classList.remove(className)
+    }
+  }
+  for (const [element, classes] of desired) element.classList.add(...classes)
+}
+
+/** Restore native header styling when the branding effect is disposed. */
+export function clearSidebarHeader(): void {
+  for (const className of HEADER_CLASSES) {
+    for (const element of document.querySelectorAll(`.${className}`)) element.classList.remove(className)
+  }
+}