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

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

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

package/src/client/ui-tweaks/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)
+  }
+}

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

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

package/src/index.ts

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