@chatcode/cco-better-sidebar 0.18.0-alpha.0

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

@@ -0,0 +1,281 @@
+/**
+ * dsh-ui-tweaks — Archive manager (browser half).
+ *
+ * Renders the "归档" settings section (shown in the Settings dialog; usable
+ * when the `archiveManagerEnabled` toggle in 界面调整 is on — otherwise it
+ * shows an invite card with a one-click enable). The section lists every
+ * archived session — enriched from the framework `useSessions` /
+ * `useWorkspaces` feeds — with per-row actions and batch actions that go
+ * through the same-origin archive route (`/_dsh/ui-tweaks/archive`):
+ *
+ * - **恢复** (Restore): remove the session from the archive set — its log and
+ *   workspace slot are kept, so the conversation reappears in the normal
+ *   sidebar list.
+ * - **删除** (Delete): PERMANENTLY delete the session — the server removes its
+ *   durable log, workspace accounting, archive-set entry and caches; the list
+ *   then refreshes so the row (and the session itself) disappear.
+ * - **全部恢复 / 全部删除**: the same actions for every archived session.
+ *
+ * Live (open/running) sessions are refused by the server; the client maps the
+ * `session-live` error code to localized copy.
+ * @module dsh-ui-tweaks/client/archive
+ */
+
+import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
+import type { ISessions, SessionListState, SessionSummary } from '@deepseek-ai/dsh-api-session-controller/client'
+import type { WorkspaceSnapshot } from '@deepseek-ai/dsh-api-workspace-controller/client'
+import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
+import type { SettingsClient } from './index.tsx'
+
+/** Route matching the host half (src/archive.ts). */
+const ARCHIVE_ROUTE = '/_dsh/ui-tweaks/archive'
+
+/** Locale keys the Archive manager reads off the `ui-tweaks` dictionary. */
+type ArchiveLabelKey =
+  | 'archiveNav' | 'archiveTitle' | 'archiveEmpty' | 'archiveRestore' | 'archiveRestoring'
+  | 'archiveDelete' | 'archiveDeleteAll' | 'archiveRestoreAll'
+  | 'archiveCount' | 'archiveUnavailable' | 'archiveLiveError' | 'archiveDisabledHint'
+  | 'archiveEnable' | 'archiveRestored' | 'unavailable'
+
+type Translate = (key: ArchiveLabelKey) => string
+
+interface ApiSuccess<T> { ok: true; value: T }
+interface ApiFailure { ok: false; error: { code: string; message: string } }
+
+interface ArchiveSnapshot {
+  archivedSessionIds: string[]
+}
+
+/** Fetch one archive route call, attaching the server error code when present. */
+async function archiveRequest<T>(init?: RequestInit): Promise<T> {
+  const response = await fetch(ARCHIVE_ROUTE, { credentials: 'same-origin', ...init })
+  let body: ApiSuccess<T> | ApiFailure | undefined
+  try {
+    body = await response.json() as ApiSuccess<T> | ApiFailure
+  } catch {
+    // Non-JSON response (e.g. the route is not mounted yet) — fall through to
+    // a clean error instead of a JSON-parse exception.
+    body = undefined
+  }
+  if (!response.ok || body === undefined || !body.ok) {
+    const failure = body as ApiFailure | undefined
+    const error = new Error(failure?.error?.message ?? `UI Tweaks archive request failed with HTTP ${response.status}`) as Error & { code: string | undefined }
+    error.code = failure?.error?.code
+    throw error
+  }
+  return body.value
+}
+
+/** Map a thrown archive error to user-facing copy. */
+function errorMessage(error: unknown, t: Translate): string {
+  const code = (error as { code?: string } | null)?.code
+  if (code === 'session-live') return t('archiveLiveError')
+  return error instanceof Error ? error.message : String(error)
+}
+
+/** Re-pull the host session list after a permanent delete (the outward
+ * ISessions face omits refresh; the concrete runtime provides it). */
+function refreshSessions(sessionsService: ISessions): void {
+  void (sessionsService as unknown as { refresh(): Promise<void> }).refresh()
+}
+
+/** Workspace display title: the path's last non-empty segment. */
+function basenameOf(path: string | undefined): string {
+  if (path === undefined || path === '') return ''
+  const cleaned = path.replace(/[\\/]+$/u, '')
+  const segments = cleaned.split(/[\\/]/u)
+  return segments.at(-1) ?? ''
+}
+
+/** Locale-aware relative time for a past timestamp, e.g. "3小时前". */
+function relativeTime(ms: number, now: number, formatter: Intl.RelativeTimeFormat): string {
+  const diffSeconds = Math.round((ms - now) / 1000)
+  const abs = Math.abs(diffSeconds)
+  if (abs < 60) return formatter.format(diffSeconds, 'second')
+  if (abs < 3600) return formatter.format(Math.round(diffSeconds / 60), 'minute')
+  if (abs < 86400) return formatter.format(Math.round(diffSeconds / 3600), 'hour')
+  if (abs < 604800) return formatter.format(Math.round(diffSeconds / 86400), 'day')
+  return formatter.format(Math.round(diffSeconds / 604800), 'week')
+}
+
+export const ARCHIVE_CSS = `
+.dut-arc{display:grid;gap:12px;max-width:680px;padding:6px 2px 36px}
+.dut-arc-head{display:flex;align-items:center;gap:10px;padding:14px 16px 0}
+.dut-arc-head h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--dsw-alias-label-primary)}
+.dut-arc-count{font-size:11.5px;color:var(--dsw-alias-label-secondary);padding:2px 8px;border-radius:999px;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1)}
+.dut-arc-spacer{flex:1}
+.dut-arc-btn{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--dsw-alias-border-l1);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
+.dut-arc-btn:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.dut-arc-btn:disabled{opacity:.5;cursor:default}
+.dut-arc-btn.dut-arc-del:hover{border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary) 55%,transparent);color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent)}
+.dut-arc-btn.dut-arc-confirm{border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary) 55%,transparent);color:var(--dsw-alias-state-error-primary);font-weight:600}
+.dut-arc-body{display:grid;gap:2px;margin-top:4px}
+.dut-arc-row{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px}
+.dut-arc-row:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.dut-arc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;background:transparent;border:none;padding:0;cursor:default;color:var(--dsw-alias-label-primary);font:inherit}
+.dut-arc-title{font-size:13.5px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
+.dut-arc-sub{font-size:11.5px;color:var(--dsw-alias-label-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
+.dut-arc-empty{padding:32px 16px;text-align:center;font-size:12.5px;color:var(--dsw-alias-label-secondary)}
+.dut-arc-alert{margin:8px 16px 0;padding:8px 12px;border-radius:10px;font-size:12px;line-height:1.5;background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent);color:var(--dsw-alias-state-error-primary)}
+.dut-arc-off{padding:20px 16px;display:grid;gap:12px}
+.dut-arc-off p{margin:0;font-size:12.5px;line-height:1.6;color:var(--dsw-alias-label-secondary)}
+`
+
+/** Install the Archive stylesheet once (idempotent); returns the disposer. */
+export function installArchiveStyles(): () => void {
+  const id = 'dsh-ui-tweaks-archive'
+  const existing = document.querySelector(`style[data-plugin-css="${id}"]`)
+  if (existing !== null) return () => {}
+  const style = document.createElement('style')
+  style.dataset.plugin = 'dsh-ui-tweaks'
+  style.dataset.pluginCss = id
+  style.textContent = ARCHIVE_CSS
+  document.head.appendChild(style)
+  return () => { style.remove() }
+}
+
+/** One archived session row: the id plus the enriched session summary, when listed. */
+interface ArchiveRow {
+  id: string
+  summary: SessionSummary | undefined
+}
+
+export interface ArchiveSectionProps {
+  controller: SettingsClient
+  t: Translate
+  sessionsService: ISessions
+  /** Framework standard feeds: session list + workspace archive set. */
+  useSessions: SnapshotSelectorHook<SessionListState>
+  useWorkspaces: SnapshotSelectorHook<WorkspaceSnapshot>
+}
+
+export function ArchiveSection({ controller, t, sessionsService, useSessions, useWorkspaces }: ArchiveSectionProps) {
+  const settingsState = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot)
+  const enabled = settingsState.value?.archiveManagerEnabled === true
+  const sessions = useSessions(state => state)
+  const workspaces = useWorkspaces(state => state)
+  const [confirmId, setConfirmId] = useState<string | null>(null)
+  const [confirmAll, setConfirmAll] = useState(false)
+  const [busy, setBusy] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const timeFormatter = useMemo(() => new Intl.RelativeTimeFormat(navigator.language, { numeric: 'auto' }), [])
+  const now = Date.now()
+
+  useEffect(() => {
+    if (confirmId === null) return
+    const timer = window.setTimeout(() => { setConfirmId(current => (current === confirmId ? null : current)) }, 3000)
+    return () => { window.clearTimeout(timer) }
+  }, [confirmId])
+  useEffect(() => {
+    if (!confirmAll) return
+    const timer = window.setTimeout(() => { setConfirmAll(false) }, 3000)
+    return () => { window.clearTimeout(timer) }
+  }, [confirmAll])
+
+  const rows: ArchiveRow[] = useMemo(() => {
+    const byId = sessions.byId
+    return workspaces.archivedSessionIds.map(id => ({ id, summary: byId[id] })).sort((a, b) => {
+      const ta = a.summary?.updatedAt ?? 0
+      const tb = b.summary?.updatedAt ?? 0
+      return tb - ta
+    })
+  }, [workspaces.archivedSessionIds, sessions.byId])
+
+  const run = (key: string, body: unknown, after?: () => void): void => {
+    setBusy(key)
+    setError(null)
+    void archiveRequest<ArchiveSnapshot>({
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    }).then(() => { after?.() }).catch((reason: unknown) => {
+      setError(errorMessage(reason, t))
+    }).finally(() => { setBusy(current => (current === key ? null : current)) })
+  }
+
+  const restore = (id: string): void => {
+    run(`restore:${id}`, { action: 'restore', sessionId: id })
+  }
+
+  const remove = (id: string): void => {
+    if (confirmId !== id) {
+      setConfirmId(id)
+      return
+    }
+    setConfirmId(null)
+    run(`delete:${id}`, { action: 'delete', sessionId: id }, () => { refreshSessions(sessionsService) })
+  }
+
+  const restoreAll = (): void => {
+    run('restore-all', { action: 'restore-all' })
+  }
+
+  const removeAll = (): void => {
+    if (!confirmAll) {
+      setConfirmAll(true)
+      return
+    }
+    setConfirmAll(false)
+    run('delete-all', { action: 'delete-all' }, () => { refreshSessions(sessionsService) })
+  }
+
+  if (!enabled) {
+    return (
+      <div className="dut-arc">
+        <div className="dut-panel dut-arc-off">
+          <p>{t('archiveDisabledHint')}</p>
+          <div>
+            <button type="button" className="dut-btn dut-btn-active" onClick={() => {
+              void controller.set('archiveManagerEnabled', true).catch(() => { setError(t('unavailable')) })
+            }}>{t('archiveEnable')}</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="dut-arc">
+      <div className="dut-panel">
+        <div className="dut-arc-head">
+          <h2>{t('archiveTitle')}</h2>
+          <span className="dut-arc-count">{rows.length} {t('archiveCount')}</span>
+          <span className="dut-arc-spacer" />
+          {rows.length > 1 ? (
+            <>
+              <button type="button" className="dut-arc-btn" disabled={busy !== null} onClick={restoreAll}>{busy === 'restore-all' ? t('archiveRestoring') : t('archiveRestoreAll')}</button>
+              <button type="button" className={'dut-arc-btn dut-arc-del' + (confirmAll ? ' dut-arc-confirm' : '')} disabled={busy !== null} onClick={removeAll}>{busy === 'delete-all' ? t('archiveDeleteAll') + '…' : confirmAll ? t('archiveDeleteAll') + '?' : t('archiveDeleteAll')}</button>
+            </>
+          ) : null}
+        </div>
+        {error !== null ? <div className="dut-arc-alert">{error}</div> : null}
+        <div className="dut-arc-body">
+          {rows.length === 0 ? (
+            <div className="dut-arc-empty">{t('archiveEmpty')}</div>
+          ) : rows.map(row => {
+            const summary = row.summary
+            const title = summary?.displayTitle ?? row.id
+            const sub = [basenameOf(summary?.cwd), summary !== undefined ? relativeTime(summary.updatedAt, now, timeFormatter) : ''].filter(Boolean).join(' · ')
+            return (
+              <div className="dut-arc-row" key={row.id}>
+                <div className="dut-arc-main" title={title}>
+                  <span className="dut-arc-title">{title}</span>
+                  {sub !== '' ? <span className="dut-arc-sub">{sub}</span> : null}
+                </div>
+                <button type="button" className="dut-arc-btn" disabled={busy !== null} onClick={() => { restore(row.id) }}>{busy === `restore:${row.id}` ? t('archiveRestoring') : t('archiveRestore')}</button>
+                <button
+                  type="button"
+                  className={'dut-arc-btn dut-arc-del' + (confirmId === row.id ? ' dut-arc-confirm' : '')}
+                  disabled={busy !== null}
+                  onClick={() => { remove(row.id) }}
+                >
+                  {busy === `delete:${row.id}` ? t('archiveDelete') + '…' : confirmId === row.id ? t('archiveDelete') + '?' : t('archiveDelete')}
+                </button>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,232 @@
+/**
+ * ChatCode CLI visual identity.
+ *
+ * The host owns its component tree, so this module deliberately uses stable
+ * semantics (roles, composer data attributes and visible labels) instead of
+ * the host's CSS-module hashes.  A small observer reapplies the few DOM
+ * affordances after the host swaps a session or rerenders its sidebar.
+ */
+
+import type { ReactNode } from 'react'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface SlotMap {
+    'sidebar.brand.mark': {
+      kind: 'single'
+      scope: 'root'
+      owner: { size: number }
+    }
+    'sidebar.brand.name': {
+      kind: 'single'
+      scope: 'root'
+      owner: Record<never, never>
+    }
+  }
+}
+
+/** Browser URL for the project-owned `assets/logo.svg` file. */
+export const PROJECT_LOGO_URL = '/_dsh/ui-tweaks/assets/logo.svg'
+const PROJECT_NAME = 'ChatCode CLI'
+const LEGACY_HOST_BRAND_TEXT = /DSH\s*(?:Local\s*Build|本地构建)|ChatCode\s*CLI/giu
+const HOST_BRAND_LABEL_TEXT = /^(?:DSH\s*(?:Local\s*Build|本地构建)|ChatCode\s*CLI)$/iu
+const HOST_BUILD_VERSION_TEXT = /^v?\d+\.\d+\.\d+(?:[-+][0-9a-z.-]+)*$/iu
+const HERO_HEADLINE = /探索未至之境/u
+const HERO_PREVIEW_TEXT = /^(?:预览版|Preview)$/iu
+const FAVICON_MARKER = 'data-dut-project-favicon'
+
+/** Reusable rendering of the packaged project logo. */
+export function ProjectLogoIcon({ className = '' }: { className?: string }): ReactNode {
+  return (
+    <img className={className} src={PROJECT_LOGO_URL} alt="" aria-hidden="true" />
+  )
+}
+
+/** New-session brand-mark slot supplied by the conversation package. */
+export function HeroProjectLogo({ size, className }: { size: number, className?: string | undefined }): ReactNode {
+  return <img className={`${className ?? ''} dut-project-logo dut-hero-logo`} src={PROJECT_LOGO_URL} width={size} height={size} alt="" aria-hidden="true" />
+}
+
+/** Sidebar mark shared by the expanded header and the collapsed rail. */
+export function SidebarProjectLogo({ size }: { size: number }): ReactNode {
+  return <img className="dut-project-logo dut-sidebar-logo" src={PROJECT_LOGO_URL} width={size} height={size} alt="" aria-hidden="true" />
+}
+
+/** Expanded-sidebar wordmark supplied through the host's dedicated slot. */
+export function SidebarProjectName(): ReactNode {
+  return <span className="dut-sidebar-brand-name">ChatCode CLI</span>
+}
+
+export const BRANDING_CSS = `
+/* Keep the light-theme type hierarchy in ChatCode's restrained red family,
+   while leaving every surface and interaction state (including workspace /
+   sidebar hover and selected fills, menus, the composer and shadows) owned
+   by the host theme. */
+body:not([data-ds-dark-theme]){
+  --dsw-alias-label-primary:#301111;
+  --dsw-alias-label-secondary:#754745;
+  --dsw-alias-label-tertiary:#a77471;
+}
+/* Saturated brand red remains exclusive to explicitly marked primary actions. */
+body: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}
+body: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}
+body:not([data-ds-dark-theme]) .dut-unicom-primary-action:active{transform:translateY(1px);box-shadow:0 4px 11px rgba(155,11,9,.22) !important}
+/* In dark mode, alter only the resting background of primary buttons.  Once
+   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-brand-version{display:none !important}
+.dut-hero-preview{display:none !important}
+.dut-hero-logo{width:60px !important;height:60px !important}
+[class*="headline"]:has(.dut-hero-logo){grid-template-columns:60px auto !important;font-size:26px !important;line-height:34px !important}
+.dut-settings-logo{width:19px;height:19px;object-fit:contain}
+`
+
+function hasPrimaryLabel(button: HTMLButtonElement): boolean {
+  const label = `${button.textContent ?? ''} ${button.getAttribute('aria-label') ?? ''} ${button.title}`.trim().toLowerCase()
+  return /(?:^|\s)(new session|send|install)(?:\s|$)|新会话|发送|(?:^|\s)安装(?:\s|$)/u.test(label)
+}
+
+/** Replace one host SVG while retaining its generated layout class names. */
+function replaceHostLogo(svg: SVGElement): void {
+  if (svg.classList.contains('dut-project-logo')) return
+  const image = document.createElement('img')
+  image.className = `${svg.getAttribute('class') ?? ''} dut-project-logo dut-left-logo`.trim()
+  image.src = PROJECT_LOGO_URL
+  image.alt = ''
+  image.setAttribute('aria-hidden', 'true')
+  const width = svg.getAttribute('width')
+  const height = svg.getAttribute('height')
+  if (width !== null) image.setAttribute('width', width)
+  if (height !== null) image.setAttribute('height', height)
+  svg.replaceWith(image)
+}
+
+/** Locate the mark adjacent to an otherwise unstructured sidebar brand label. */
+function replaceLogoBesideBrandLabel(label: HTMLElement): void {
+  const nearby = [
+    label.previousElementSibling,
+    label.parentElement?.querySelector('svg') ?? null,
+  ]
+  for (const candidate of nearby) {
+    if (candidate instanceof SVGElement) {
+      replaceHostLogo(candidate)
+      return
+    }
+    const svg = candidate?.querySelector('svg')
+    if (svg instanceof SVGElement) {
+      replaceHostLogo(svg)
+      return
+    }
+  }
+}
+
+/** Hide the host build suffix that shares the sidebar wordmark container. */
+function hideVersionBesideBrandLabel(label: HTMLElement): void {
+  const container = label.parentElement
+  if (container === null) return
+  for (const sibling of container.children) {
+    if (sibling === label || !(sibling instanceof HTMLElement)) continue
+    if (!HOST_BUILD_VERSION_TEXT.test(sibling.textContent?.trim() ?? '')) continue
+    sibling.classList.add('dut-brand-version')
+    sibling.setAttribute('aria-hidden', 'true')
+  }
+}
+
+function syncBranding(): void {
+  document.title = document.title.replace(LEGACY_HOST_BRAND_TEXT, PROJECT_NAME)
+
+  // The host deliberately renders the blank-session preview badge as a
+  // third headline column. ChatCode is the production identity here, so
+  // suppress that host-owned badge and collapse the headline back to two
+  // columns (brand mark + product name).
+  document.querySelectorAll<HTMLElement>('[class*="previewBadge"]').forEach((badge) => {
+    if (!HERO_PREVIEW_TEXT.test(badge.textContent?.trim() ?? '')) return
+    badge.classList.add('dut-hero-preview')
+    badge.setAttribute('aria-hidden', 'true')
+  })
+
+  // 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 || !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 (LEGACY_HOST_BRAND_TEXT.test(node.data)) {
+      LEGACY_HOST_BRAND_TEXT.lastIndex = 0
+      node.data = node.data.replace(LEGACY_HOST_BRAND_TEXT, PROJECT_NAME)
+      LEGACY_HOST_BRAND_TEXT.lastIndex = 0
+    }
+    if (HERO_HEADLINE.test(node.data)) node.data = node.data.replace(HERO_HEADLINE, PROJECT_NAME)
+  }
+
+  // Older host builds expose a brand-mark wrapper but no text-bearing sibling.
+  document.querySelectorAll<HTMLElement>('[class*="brandMark"]').forEach((host) => {
+    const svg = host.matches('svg') ? host : host.querySelector('svg')
+    if (svg instanceof SVGElement) replaceHostLogo(svg)
+  })
+
+  document.querySelectorAll<HTMLButtonElement>('button').forEach((button) => {
+    button.classList.toggle('dut-unicom-primary-action', hasPrimaryLabel(button))
+  })
+}
+
+/** Install a last-declared SVG favicon so browsers prefer it to DSH's whale. */
+function installProjectFavicon(): HTMLLinkElement {
+  const existing = document.head.querySelector<HTMLLinkElement>(`link[${FAVICON_MARKER}]`)
+  if (existing !== null) return existing
+  const icon = document.createElement('link')
+  icon.setAttribute(FAVICON_MARKER, '')
+  icon.rel = 'icon'
+  icon.type = 'image/svg+xml'
+  icon.href = PROJECT_LOGO_URL
+  document.head.appendChild(icon)
+  return icon
+}
+
+/** Install the brand theme and retain it across host navigation/rerenders. */
+export function installBranding(): () => void {
+  const id = 'dsh-ui-tweaks-branding'
+  const existing = document.querySelector<HTMLStyleElement>(`style[data-plugin-css="${id}"]`)
+  if (existing !== null) return () => {}
+  const style = document.createElement('style')
+  style.dataset.plugin = 'dsh-ui-tweaks'
+  style.dataset.pluginCss = id
+  style.textContent = BRANDING_CSS
+  document.head.appendChild(style)
+  const favicon = installProjectFavicon()
+
+  let frame: number | undefined
+  const schedule = (): void => {
+    if (frame !== undefined) return
+    frame = window.requestAnimationFrame(() => {
+      frame = undefined
+      syncBranding()
+    })
+  }
+  syncBranding()
+  const observer = new MutationObserver(schedule)
+  observer.observe(document.body, { childList: true, characterData: true, subtree: true })
+  return () => {
+    observer.disconnect()
+    if (frame !== undefined) window.cancelAnimationFrame(frame)
+    favicon.remove()
+    style.remove()
+  }
+}

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

@@ -0,0 +1,122 @@
+/**
+ * dsh-ui-tweaks — precise cache-hit readout (browser half).
+ *
+ * Rewrites the cache-hit figure in the composer stats line under the input
+ * box ("缓存命中 96%" / "Cache hit 96%") to two decimal places ("96.35%").
+ * DSH rounds the share to an integer before display (adding decimals only to
+ * avoid a false 100%); the exact figure needs the raw token buckets, which
+ * this seat reads through the framework's per-session projection hook
+ * (`useProjection('tokenUsage')`) — the same durable whole-log totals the
+ * stock number is computed from.
+ *
+ * - Mounted in `conversation.composer.dock` (the band under the composer card
+ *   that hosts the shipped stats line), registered only while the
+ *   `preciseCacheHitEnabled` toggle is on — off costs nothing. The entry
+ *   renders nothing itself: it is a live reader that patches the stock span's
+ *   text in place, so layout, truncation and tooltip behavior stay DSH's own.
+ * - A MutationObserver re-applies the precise figure whenever React repaints
+ *   the line (token updates, group churn); writes are idempotent — a rewrite
+ *   only happens when the text actually differs — so the loop settles after
+ *   one pass. Toggling off restores the original texts.
+ * @module dsh-ui-tweaks/client/cachehit
+ */
+
+import { useEffect } from 'react'
+import type { UseProjection } from '@deepseek-ai/dsh-api-session-controller/client'
+
+/** Client-side slice of dsh-token-meter's cumulative projection. */
+interface TokenUsageProjection {
+  uncachedInputTokens: number
+  cacheReadTokens: number
+  cacheWriteTokens: number
+}
+
+declare module '@deepseek-ai/dsh-session-projection/types' {
+  interface SessionProjectionMap {
+    tokenUsage: TokenUsageProjection | undefined
+  }
+}
+
+/** Whole-span shape of the stock cache-hit group (zh + en locales). */
+const CACHE_HIT_SPAN_PATTERN = /^\s*(?:缓存命中|Cache hit)\s+\d+(?:\.\d+)?%\s*$/
+/** The trailing percentage inside that label — the only part rewritten. */
+const PERCENT_IN_SPAN_PATTERN = /\d+(?:\.\d+)?%(?=\s*$)/
+
+/**
+ * Sum the three disjoint prompt-side billing buckets — DSH's own denominator
+ * for the cache-hit share (`uncachedInput + cacheRead + cacheWrite`).
+ */
+function billedInputTokens(usage: TokenUsageProjection): number {
+  return usage.uncachedInputTokens + usage.cacheReadTokens + usage.cacheWriteTokens
+}
+
+export interface PreciseCacheHitEntryProps {
+  /** Framework seat (PropsRuntime): key-addressed per-session projection reader. */
+  useProjection: UseProjection
+}
+
+/** Session-scoped composer-dock seat that keeps the stock cache-hit figure at two decimals. */
+export function PreciseCacheHitEntry({ useProjection }: PreciseCacheHitEntryProps) {
+  // The raw cumulative usage; undefined until the host's baseline/frame
+  // carries the key — exactly when the stock line first shows the group.
+  const usage = useProjection('tokenUsage')
+
+  useEffect(() => {
+    const bands = document.querySelectorAll<HTMLElement>('[data-slot="conversation.composer.dock"]')
+    if (bands.length === 0) return
+
+    /** Original texts of spans we rewrote, restored on cleanup. */
+    const patched = new Map<HTMLSpanElement, string>()
+
+    /**
+     * Two-decimal share over the raw buckets; null while there is nothing
+     * precise to show (projection absent, or no billed input — the stock line
+     * omits the group in that case too).
+     */
+    const precisePercent = (): string | null => {
+      if (usage === undefined) return null
+      const billed = billedInputTokens(usage)
+      if (!(billed > 0)) return null
+      return ((usage.cacheReadTokens / billed) * 100).toFixed(2)
+    }
+
+    const apply = (): void => {
+      const precise = precisePercent()
+      for (const band of bands) {
+        for (const el of band.querySelectorAll<HTMLSpanElement>('span')) {
+          const current = el.textContent ?? ''
+          if (!CACHE_HIT_SPAN_PATTERN.test(current)) continue
+          if (precise === null) {
+            // Projection gone (session switch race): undo any rewrite so the
+            // stock integer shows again instead of a stale figure.
+            const original = patched.get(el)
+            if (original !== undefined && original !== current) el.textContent = original
+            patched.delete(el)
+            continue
+          }
+          if (!patched.has(el)) patched.set(el, current)
+          const rewritten = current.replace(PERCENT_IN_SPAN_PATTERN, `${precise}%`)
+          if (rewritten !== current) el.textContent = rewritten
+        }
+      }
+    }
+
+    apply()
+    // React owns these text nodes: every repaint of the line re-triggers us,
+    // and our own idempotent write settles after a single extra pass.
+    const observer = new MutationObserver(apply)
+    for (const band of bands) {
+      observer.observe(band, { childList: true, characterData: true, subtree: true })
+    }
+    return () => {
+      observer.disconnect()
+      // Toggle-off/unmount must not leave a stale precise figure behind.
+      for (const [el, original] of patched) {
+        if ((el.textContent ?? '') !== original) el.textContent = original
+      }
+      patched.clear()
+    }
+  }, [usage])
+
+  return null
+}