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

package/src/chatcode-update.ts

@@ -0,0 +1,193 @@
+/**
+ * ChatCode self-update for the account menu's "check for updates / update now"
+ * action. Mirrors the semantics of the upstream `yuanjing-wanma-cli /update`
+ * flow (query the npm registry for the latest version, compare against the
+ * globally installed version, then `npm install -f -g <pkg>@<latest>`), applied
+ * to the CLI package this sidebar is responsible for.
+ *
+ * All subprocess work goes through `execFile` with a plain argv array (no
+ * shell), the same posture the rest of the host uses. The npm registry (and
+ * the global install target) is the machine running the DSH host, not the
+ * browser.
+ */
+import { execFile } from 'node:child_process'
+import { readFile } from 'node:fs/promises'
+import { homedir } from 'node:os'
+import { join } from 'node:path'
+import { SidebarError } from './wire.ts'
+
+/** CLI package the sidebar keeps up to date. */
+export const CHATCODE_CLI_PKG = '@chatcode/chatcode-cli'
+/** The single package a "one-click update" upgrades. */
+export const CHATCODE_UPDATE_PACKAGES = [CHATCODE_CLI_PKG] as const
+
+/** npm registry used for both the version lookup and the global install. */
+export const NPM_REGISTRY = 'https://registry.npmjs.org'
+
+/** One package's version-check result. */
+export interface ChatCodeUpdateCheck {
+  packageName: string
+  /** Globally installed version (null when not globally present). */
+  current: string | null
+  /** Latest version on npm (null when the lookup failed). */
+  latest: string | null
+  needsUpdate: boolean
+}
+
+/** One package's perform-update result. */
+export interface ChatCodeUpdateResult {
+  packageName: string
+  from: string | null
+  to: string | null
+  ok: boolean
+  /** Human message; on failure it carries the pasteable manual command. */
+  message: string
+}
+
+interface RunResult {
+  code: number
+  stdout: string
+  stderr: string
+}
+
+/** Windows ships npm as a `npm.cmd` shim, which `execFile` cannot spawn
+ *  directly (EINVAL) — it must run through the system shell. We keep args as an
+ *  array so Node quotes each one (no string interpolation / injection), and
+ *  stay shell-free on POSIX, matching the repo's git runner. */
+function npmSpawnArgs(args: readonly string[]): { file: string; args: readonly string[] } {
+  if (process.platform === 'win32') {
+    // `cmd.exe /d /s /c` — the `/s` + array form lets Node do the argument
+    // escaping so `npm …` is invoked as a single anchored command.
+    return { file: process.env.comspec ?? 'cmd.exe', args: ['/d', '/s', '/c', 'npm', ...args] }
+  }
+  return { file: 'npm', args }
+}
+
+/** npm command runner (bounded timeout). Errors are returned, not thrown, so
+ *  callers can distinguish "npm exited non-zero" from npm missing. */
+function runNpm(args: readonly string[], cwd: string, timeoutMs: number): Promise<RunResult> {
+  return new Promise((resolvePromise) => {
+    const spawnSpec = npmSpawnArgs(args)
+    const timer = setTimeout(() => {
+      child.kill('SIGTERM')
+    }, timeoutMs)
+    const child = execFile(
+      spawnSpec.file,
+      [...spawnSpec.args],
+      { cwd, encoding: 'utf8', windowsHide: true, maxBuffer: 32 * 1024 * 1024 },
+      (error, stdout, stderr) => {
+        clearTimeout(timer)
+        if (error !== null) {
+          const raw = (error as NodeJS.ErrnoException).code
+          resolvePromise({ code: typeof raw === 'number' ? raw : 1, stdout, stderr })
+          return
+        }
+        resolvePromise({ code: 0, stdout, stderr })
+      },
+    )
+  })
+}
+
+/**
+ * Read the globally installed version of one package. Resolves the npm global
+ * modules dir via `npm root -g` and reads `<dir>/<pkg>/package.json` directly —
+ * robust against `npm ls --json` packaging quirks. Returns the version string,
+ * or null when the package is not globally installed.
+ */
+export async function installedGlobalVersion(pkg: string): Promise<string | null> {
+  const { code, stdout } = await runNpm(['root', '-g'], homedir(), 30_000)
+  const root = stdout.trim()
+  if (code !== 0 || root === '') return null
+  const packageJsonPath = pkg.startsWith('@')
+    ? join(root, pkg, 'package.json')
+    : join(root, join(...pkg.split('/')), 'package.json')
+  try {
+    const raw = await readFile(packageJsonPath, 'utf8')
+    const parsed: unknown = JSON.parse(raw)
+    const record = parsed !== null && typeof parsed === 'object' ? parsed as Record<string, unknown> : null
+    const version = record?.version
+    return typeof version === 'string' && version !== '' ? version : null
+  } catch {
+    return null
+  }
+}
+
+/** Query npm for the latest published version of one package. Throws a
+ *  SidebarError on any network / shape failure (mirrors chatcodeReleaseNote). */
+export async function npmLatestVersion(pkg: string): Promise<string> {
+  // `encodeURI` (not `encodeURIComponent`) keeps scoped packages' leading `@`
+  // and `/` intact (`@scope/name`), which the npm registry requires verbatim.
+  const url = `https://registry.npmjs.org/${encodeURI(pkg)}/latest`
+  let response: Response
+  try {
+    response = await fetch(url, { signal: AbortSignal.timeout(10_000) })
+  } catch {
+    throw new SidebarError('chatcode-update-fetch', `the npm registry is unreachable for ${pkg}`, 502)
+  }
+  if (!response.ok) {
+    throw new SidebarError('chatcode-update-fetch', `the npm registry returned HTTP ${response.status} for ${pkg}`, 502)
+  }
+  const parsed: unknown = await response.json().catch(() => null)
+  const record = parsed !== null && typeof parsed === 'object' ? parsed as Record<string, unknown> : null
+  const version = record?.version
+  if (typeof version !== 'string' || version === '') {
+    throw new SidebarError('chatcode-update-fetch', `the npm registry returned an invalid response for ${pkg}`, 502)
+  }
+  return version
+}
+
+/** One package's version check (the pure comparison extracted for tests). */
+export function chatcodeNeedsUpdate(current: string | null, latest: string | null): boolean {
+  // Unknown current version counts as needing an update; equality is up-to-date.
+  return current === null ? latest !== null : latest !== null && latest !== current
+}
+
+/** Check one package against npm. A registry failure surfaces as a thrown
+ *  SidebarError; a missing local install degrades to `current: null`. */
+export async function checkOneUpdate(pkg: string): Promise<ChatCodeUpdateCheck> {
+  const [current, latest] = await Promise.all([installedGlobalVersion(pkg), npmLatestVersion(pkg)])
+  return { packageName: pkg, current, latest, needsUpdate: chatcodeNeedsUpdate(current, latest) }
+}
+
+/** The npm registry flag appended to every global install (mirrors upstream). */
+function installArgs(pkg: string, version: string): string[] {
+  return ['install', '-f', '-g', `${pkg}@${version}`, '--registry', NPM_REGISTRY]
+}
+
+/** The pasteable manual fallback shown when a global install fails. */
+export function manualInstallCommand(pkg: string, version: string): string {
+  return `npm i -f -g ${pkg}@${version} --registry=${NPM_REGISTRY}`
+}
+
+/** Install one package at an exact latest version. Never throws on npm
+ *  failure — the failure is encoded in the result with its manual command. */
+export async function performOneUpdate(pkg: string, from: string | null, latest: string): Promise<ChatCodeUpdateResult> {
+  const { code, stderr, stdout } = await runNpm(installArgs(pkg, latest), homedir(), 120_000)
+  if (code !== 0) {
+    const detail = (stderr || stdout || 'unknown npm error').trim()
+    const message = `update failed: ${detail}\n${manualInstallCommand(pkg, latest)}`
+    return { packageName: pkg, from, to: latest, ok: false, message }
+  }
+  return { packageName: pkg, from, to: latest, ok: true, message: `${from ?? 'none'} -> ${latest}` }
+}
+
+/** Aggregate update-result shape returned by the `chatcode.update.perform`
+ *  route (one entry per package, in update order). */
+export async function performAllUpdates(checks: ChatCodeUpdateCheck[]): Promise<ChatCodeUpdateResult[]> {
+  const results: ChatCodeUpdateResult[] = []
+  for (const check of checks) {
+    const target = check.latest
+    if (target === null) {
+      results.push({
+        packageName: check.packageName,
+        from: check.current,
+        to: null,
+        ok: false,
+        message: 'no target version (the latest version lookup failed)',
+      })
+      continue
+    }
+    results.push(await performOneUpdate(check.packageName, check.current, target))
+  }
+  return results
+}

package/src/client/AccountMenu.tsx

@@ -0,0 +1,177 @@
+/**
+ * Bottom-left account control.
+ *
+ * DSH's settings launcher is currently a closed host-shell surface, so this
+ * component intentionally leaves its structure alone: it hides only the
+ * lower-left launcher while mounted and invokes that exact native button for
+ * the Settings menu item. This keeps the existing settings dialog and all
+ * host-owned navigation behavior intact.
+ */
+import { useEffect, useRef, useState } from 'react'
+import { api } from './api.ts'
+import { useChatcodeAccount } from './useChatcodeAccount.ts'
+import { t } from './locales.ts'
+import css from './sidebar.module.css'
+
+const SETTINGS_LABELS = new Set([
+  'settings', '设置', '設定', 'paramètres', 'einstellungen', 'impostazioni',
+  'configurações', 'instellingen', 'inställningar', 'ayarlar', '설정', 'настройки',
+])
+
+function nativeSettingsButton(except: HTMLElement | null): HTMLButtonElement | undefined {
+  return [...document.querySelectorAll<HTMLButtonElement>('button')]
+    .filter(button => except === null || !except.contains(button))
+    .filter(button => {
+      const text = `${button.getAttribute('aria-label') ?? ''} ${button.title} ${button.textContent ?? ''}`.trim().toLowerCase()
+      if (![...SETTINGS_LABELS].some(label => text === label || text.includes(label))) return false
+      const rect = button.getBoundingClientRect()
+      // The host launcher lives in the lower-left rail. Avoid matching a
+      // Settings item inside an already-open dialog or an unrelated panel.
+      return rect.left < window.innerWidth * 0.4 && rect.bottom > window.innerHeight - 120
+    })
+    .sort((a, b) => b.getBoundingClientRect().bottom - a.getBoundingClientRect().bottom)[0]
+}
+
+/** Find the left navigation rail's usable width from the native launcher. */
+function railWidthOf(button: HTMLButtonElement | undefined): number | undefined {
+  let element: HTMLElement | null = button?.parentElement ?? null
+  for (let depth = 0; element !== null && depth < 8; depth += 1, element = element.parentElement) {
+    const rect = element.getBoundingClientRect()
+    if (rect.left <= 8 && rect.width >= 160 && rect.width <= window.innerWidth * 0.5) return Math.round(rect.width)
+  }
+  return undefined
+}
+
+function LogoutIcon(): JSX.Element {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M6.5 2.5h-2A1.5 1.5 0 0 0 3 4v8a1.5 1.5 0 0 0 1.5 1.5h2M8 5l3 3-3 3M5.5 8h5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+/** Settings glyph kept local so every account action shares the same SVG treatment. */
+function SettingsIcon(): JSX.Element {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M6.9 2.2h2.2l.35 1.28c.33.14.64.32.92.54l1.26-.38 1.1 1.9-.93.94c.03.17.05.35.05.54s-.02.37-.05.54l.93.94-1.1 1.9-1.26-.38c-.28.22-.59.4-.92.54L9.1 13.8H6.9l-.35-1.28a4.1 4.1 0 0 1-.92-.54l-1.26.38-1.1-1.9.93-.94a3.2 3.2 0 0 1 0-1.08l-.93-.94 1.1-1.9 1.26.38c.28-.22.59-.4.92-.54L6.9 2.2Z" stroke="currentColor" strokeWidth="1.25" strokeLinejoin="round" />
+      <circle cx="8" cy="8" r="1.75" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  )
+}
+
+/** Preserve the sidebar's existing browser-session exit when the optional ChatCode service is absent. */
+function logout(): void {
+  for (const cookie of document.cookie.split(';')) {
+    const name = cookie.split('=')[0]?.trim()
+    if (name !== undefined && name !== '') document.cookie = `${name}=; Max-Age=0; Path=/; SameSite=Lax`
+  }
+  window.localStorage.clear()
+  window.sessionStorage.clear()
+  window.location.assign('/')
+}
+
+export function AccountMenu(): JSX.Element {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
+  const [userName, setUserName] = useState('User')
+  const { chatcode, busy, error, loginUrl, startLogin, logout: logoutChatcode } = useChatcodeAccount()
+
+  useEffect(() => {
+    let active = true
+    void api.accountGet()
+      .then(({ userName: next }) => { if (active && next.trim() !== '') setUserName(next) })
+      .catch(() => { /* The menu remains usable with its local fallback. */ })
+    return () => { active = false }
+  }, [])
+
+  useEffect(() => {
+    const onPointerDown = (event: PointerEvent): void => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => { document.removeEventListener('pointerdown', onPointerDown) }
+  }, [])
+
+  // The host has no slot for replacing this one closed-shell control. Keep
+  // the original fully recoverable: its inline style is restored on disposal
+  // and it remains the target invoked by our Settings menu item.
+  useEffect(() => {
+    let current: HTMLButtonElement | undefined
+    let originalStyle: string | undefined
+    const sync = (): void => {
+      const next = nativeSettingsButton(rootRef.current)
+      const width = railWidthOf(next)
+      if (width !== undefined) rootRef.current?.style.setProperty('--dsh-account-menu-width', `${width}px`)
+      if (next === current) return
+      if (current !== undefined && originalStyle !== undefined) current.style.cssText = originalStyle
+      current = next
+      originalStyle = current?.style.cssText
+      if (current !== undefined) current.style.visibility = 'hidden'
+    }
+    sync()
+    const observer = new MutationObserver(sync)
+    observer.observe(document.body, { childList: true, subtree: true, characterData: true })
+    return () => {
+      observer.disconnect()
+      if (current !== undefined && originalStyle !== undefined) current.style.cssText = originalStyle
+    }
+  }, [])
+
+  const openSettings = (): void => {
+    setOpen(false)
+    nativeSettingsButton(rootRef.current)?.click()
+  }
+
+  const chatcodeName = chatcode?.userName?.trim() || chatcode?.emailAddress?.trim() || userName
+  const signedIn = chatcode?.validation === 'valid' && chatcode.expired !== true
+  // A saved credential remains usable for the next check when the company
+  // network is unavailable. Do not turn that transient state into a login CTA.
+  const canStartChatcodeLogin = chatcode?.available === true && !signedIn
+    && !(chatcode.configured === true && chatcode.validation === 'unavailable')
+
+  return (
+    <div ref={rootRef} className={css.accountMenu}>
+      {open && (
+        <div className={css.accountDropdown} role="menu" aria-label={t('accountMenuLabel')}>
+          <div className={css.accountDropdownHeader}>
+            <span className={css.accountAvatar}>{chatcodeName.slice(0, 1).toUpperCase()}</span>
+            <span className={css.accountName}>{chatcodeName}</span>
+            <span className={css.accountPresence} style={{ opacity: signedIn ? 1 : 0.25 }} aria-hidden="true" />
+          </div>
+          <div className={css.accountMenuDivider} />
+          <button type="button" role="menuitem" className={css.accountItem} onClick={openSettings}>
+            <SettingsIcon />
+            {t('accountMenuSettings')}
+          </button>
+          {error && <div role="alert" className={css.accountItem}>{t(error === 'status' ? 'accountMenuChatcodeStatusError' : 'accountMenuChatcodeError')}</div>}
+          {(chatcode?.login?.state === 'failed' || chatcode?.login?.state === 'timed-out') && <div role="alert" className={css.accountItem}>{t('accountMenuChatcodeRetry')}</div>}
+          {loginUrl && <a data-dsh-external="true" className={css.accountItem} href={loginUrl} target="_blank" rel="noopener noreferrer" onClick={event => { event.stopPropagation() }}>{t('accountMenuChatcodeOpen')}</a>}
+          {chatcode?.available === true && <>
+            {canStartChatcodeLogin && <button type="button" role="menuitem" className={css.accountItem} disabled={busy} onClick={startLogin}>
+              <LogoutIcon />{busy ? t('accountMenuChatcodeStarting') : t('accountMenuChatcodeLogin')}
+            </button>}
+            {chatcode.configured && <button type="button" role="menuitem" className={css.accountItem} disabled={busy} onClick={logoutChatcode}>
+              <LogoutIcon />{t('accountMenuChatcodeLogout')}
+            </button>}
+          </>}
+          {chatcode?.available === false && <button type="button" role="menuitem" className={css.accountItem} onClick={logout}>
+            <LogoutIcon />{t('accountMenuLogout')}
+          </button>}
+        </div>
+      )}
+      <button
+        type="button"
+        className={css.accountTrigger}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        aria-label={t('accountMenuLabel')}
+        onClick={() => { setOpen(value => !value) }}
+      >
+        <span className={css.accountAvatar}>{chatcodeName.slice(0, 1).toUpperCase()}</span>
+        <span className={css.accountName}>{chatcodeName}</span>
+        <span className={css.accountPresence} style={{ opacity: signedIn ? 1 : 0.25 }} aria-hidden="true" />
+      </button>
+    </div>
+  )
+}

package/src/client/AiRatioSection.module.css

@@ -0,0 +1,329 @@
+.section {
+  container-type: inline-size;
+  width: 100%;
+  max-width: 920px;
+  min-width: 0;
+}
+
+/* Query row: date range – 查询 – 导出. */
+.queryRow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.dateInput {
+  flex: 1 1 140px;
+  min-width: 0;
+  max-width: 180px;
+}
+
+.dash {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* The 查询 button: the settings primary-button recipe (label-primary fill,
+   inverted surface text). */
+.primaryButton {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 5px 14px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  cursor: pointer;
+  background: var(--dsw-alias-state-business-primary);
+  color: #fff;
+}
+
+.section.section .primaryButton:hover:not(:disabled),
+.section.section .primaryButton:focus:not(:disabled),
+.section.section .primaryButton:focus-visible:not(:disabled),
+.section.section .primaryButton:active:not(:disabled) {
+  border-color: transparent !important;
+  background: var(--dsw-alias-state-business-primary) !important;
+  color: #fff !important;
+  outline: none !important;
+  box-shadow: none !important;
+  filter: none !important;
+  transform: none !important;
+}
+
+.primaryButton:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+/* The 导出 / retry / pager buttons: the hairline-button recipe. */
+.exportButton {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+  background: transparent;
+  cursor: pointer;
+}
+
+.section.section .exportButton:hover:not(:disabled),
+.section.section .exportButton:focus:not(:disabled),
+.section.section .exportButton:focus-visible:not(:disabled),
+.section.section .exportButton:active:not(:disabled) {
+  border-color: var(--dsw-alias-border-l2) !important;
+  background: transparent !important;
+  color: var(--dsw-alias-label-primary) !important;
+  outline: none !important;
+  box-shadow: none !important;
+  filter: none !important;
+  transform: none !important;
+}
+
+.exportButton:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+/* The 4-card overview strip. */
+.overview {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-layer-3);
+}
+
+.cardValue {
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.addedValue {
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.adoptedValue,
+.ratioCardHigh .cardRatio {
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.commitsValue {
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+.ratioCardHigh {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-success-primary) 35%, var(--dsw-alias-border-l2));
+  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 12%, var(--dsw-alias-bg-layer-3));
+}
+
+.ratioCardLow {
+  border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 30%, var(--dsw-alias-border-l2));
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, var(--dsw-alias-bg-layer-3));
+}
+
+.ratioCardLow .cardRatio {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.cardLabel {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Commit table heading. */
+.tableHeading {
+  margin-top: 30px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+}
+
+.tableWrap {
+  max-width: 100%;
+  max-height: 44vh;
+  overflow: auto;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+}
+
+.table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  min-width: 1180px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 8px 10px;
+  text-align: left;
+  font-weight: 600;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-bg-layer-2);
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+  border-right: 1px solid color-mix(in srgb, var(--dsw-alias-border-l2) 75%, transparent);
+}
+
+.table td {
+  padding: 7px 10px;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-primary);
+  border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-border-l2) 55%, transparent);
+  border-right: 1px solid color-mix(in srgb, var(--dsw-alias-border-l2) 65%, transparent);
+}
+
+.table :is(th, td):last-child {
+  border-right: none;
+}
+
+.table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.table tbody tr:hover td {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+/* Numeric columns: right-aligned tabular figures. */
+.num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* AI-adopted value ink when non-zero (the portal's green-if-positive). */
+.aiValue {
+  color: var(--dsw-alias-state-success-primary);
+}
+
+/* The per-row ratio: value + mini progress bar. Both carry the threshold
+   color (≥70 success / ≥50 business / else warn) inline from the component. */
+.ratioValue {
+  display: inline-block;
+  min-width: 34px;
+  font-variant-numeric: tabular-nums;
+}
+
+.ratioBar {
+  display: inline-block;
+  vertical-align: middle;
+  width: 56px;
+  height: 5px;
+  margin-left: 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--dsw-alias-border-l2) 60%, transparent);
+  overflow: hidden;
+}
+
+.ratioBar > span {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+}
+
+.dateCell {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Pager: ‹ info ›. */
+.pager {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.pager .exportButton {
+  padding: 3px 10px;
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.pageInfo {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Loading / sign-in / empty placeholder rows. */
+.state {
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* Error row with the inline retry. */
+.stateError {
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.stateError > span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@container (max-width: 600px) {
+  .overview {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (max-width: 320px) {
+  .overview {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .stateError {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}