dsh-token-total 1.0.1 → 1.0.3

package/src/client/ContextUsageEntry.module.css

@@ -0,0 +1,130 @@
+/* Mirror the host ContextMeter, including its theme and font-size tokens. */
+.root {
+  flex: none;
+  display: inline-flex;
+}
+
+.trigger {
+  border-radius: var(--dsw-radius-sm);
+  color: var(--dsw-alias-label-tertiary);
+  font-family: inherit;
+  font-size: var(--dsh-content-font-size-secondary, 13px);
+  font-variant-numeric: tabular-nums;
+  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));
+  white-space: nowrap;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  padding: 1px 8px;
+  display: inline-flex;
+}
+
+.trigger:hover,
+.trigger[aria-expanded='true'] {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.track {
+  fill: none;
+  stroke: var(--dsw-alias-border-l3);
+  stroke-width: 2px;
+}
+
+.fill {
+  fill: none;
+  stroke: var(--dsw-alias-label-tertiary);
+  stroke-width: 2px;
+  stroke-linecap: round;
+}
+
+.panel {
+  z-index: 1100;
+  box-sizing: border-box;
+  border-radius: var(--dsw-radius-lg);
+  background: var(--dsw-specific-menu);
+  width: min(264px, calc(100vw - 24px));
+  backdrop-filter: var(--dsw-menu-backdrop-filter);
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  box-shadow: var(--dsw-elevation-prominent);
+  color: var(--dsw-alias-label-secondary);
+  cursor: default;
+  border: 0;
+  padding: 12px;
+  font-size: 12px;
+  line-height: 20px;
+  position: fixed;
+}
+
+.header {
+  align-items: center;
+  gap: 6px;
+  display: flex;
+}
+
+.figures {
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-label-primary);
+  margin-left: auto;
+  font-weight: 500;
+}
+
+.percent {
+  color: var(--dsw-alias-label-primary);
+  font-weight: 500;
+}
+
+.headline { color: var(--dsw-alias-label-tertiary); }
+.headline:empty { display: none; }
+
+.bar {
+  corner-shape: round;
+  background: var(--dsw-alias-interactive-bg-hover);
+  border-radius: 999px;
+  gap: 1px;
+  height: 4px;
+  margin: 10px 0 12px;
+  display: flex;
+  overflow: hidden;
+}
+
+.segment {
+  background: var(--meter-tint, var(--dsw-alias-label-tertiary));
+  border-radius: 1px;
+  flex: none;
+  min-width: 2px;
+  height: 100%;
+}
+
+.swatch {
+  background: var(--meter-tint);
+  vertical-align: baseline;
+  border-radius: 2px;
+  width: 8px;
+  height: 8px;
+  margin-right: 6px;
+  display: inline-block;
+}
+
+.colorSystem { --meter-tint: var(--dsw-static-neutral-bluish-400); }
+.colorTools { --meter-tint: #a78bfa; }
+.colorMessages { --meter-tint: var(--dsw-static-blue-450); }
+.rows { margin: 6px 0 0; }
+
+.row {
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 2px 0;
+  display: flex;
+}
+
+.row dt { color: var(--dsw-alias-label-secondary); }
+.row dd {
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-label-primary);
+  margin: 0;
+}

package/src/client/ContextUsageEntry.tsx

@@ -0,0 +1,93 @@
+import { createPortal } from 'react-dom'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useAnchoredPosition, useDismissOnOutsidePointer } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import { MEASURE_STYLE } from './stat-dialog.ts'
+import { contextBreakdownSegments, contextOccupancy, formatContextTokens, type ContextBreakdownLike, type ContextPressureLike } from './context-meter-core.ts'
+import css from './ContextUsageEntry.module.css'
+
+export const CONTEXT_LOCALE_NS = 'tokenTotalContext'
+const keys = ['label', 'used', 'system', 'tools', 'messages', 'aria', 'thousand', 'million'] as const
+export type ContextLocaleKey = typeof keys[number]
+export const CONTEXT_LOCALES: Record<string, Record<ContextLocaleKey, string>> = {
+  zh: { label: '上下文', used: '上下文已用', system: '系统提示词', tools: '工具定义', messages: '对话消息', aria: '上下文已用 {percent}', thousand: '{value}K', million: '{value}M' },
+  en: { label: 'Context', used: 'Context used', system: 'System', tools: 'Tools', messages: 'Conversation', aria: 'Context usage {percent}', thousand: '{value}K', million: '{value}M' },
+  'zh-TW': { label: '上下文', used: '已用上下文', system: '系統提示詞', tools: '工具', messages: '對話', aria: '上下文使用量 {percent}', thousand: '{value}千', million: '{value}百萬' },
+}
+
+type ProjectionMap = {
+  contextPressure: ContextPressureLike
+  contextBreakdown: ContextBreakdownLike
+}
+type UseContextProjection = <K extends keyof ProjectionMap & string>(key: K) => ProjectionMap[K] | undefined
+
+export interface ContextUsageEntryProps extends PropsLocale<typeof CONTEXT_LOCALE_NS> {
+  useProjection: UseContextProjection
+  installContextTakeover?: (anchor: HTMLElement) => () => void
+}
+
+export function ContextUsageEntry({ useProjection, t, installContextTakeover }: ContextUsageEntryProps): JSX.Element | null {
+  const pressure = useProjection('contextPressure')
+  const breakdown = useProjection('contextBreakdown')
+  const context = contextOccupancy(pressure)
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLSpanElement | null>(null)
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  const position = useAnchoredPosition({ open: open && context !== null, anchorRef: rootRef, panelRef, side: 'top', gap: 8, margin: 12 })
+  useDismissOnOutsidePointer(rootRef, open && context !== null, setOpen, panelRef)
+  useLayoutEffect(() => {
+    const anchor = rootRef.current
+    if (anchor === null || context === null || installContextTakeover === undefined) return
+    return installContextTakeover(anchor)
+  }, [context !== null, installContextTakeover])
+  useEffect(() => { if (context === null && open) setOpen(false) }, [context, open])
+  useEffect(() => {
+    if (!open || context === null) return
+    const onKeyDown = (event: KeyboardEvent): void => { if (event.key === 'Escape') setOpen(false) }
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [context, open])
+  if (context === null) return null
+  const percent = context.percent
+  const reading = `${percent}%`
+  const segments = contextBreakdownSegments(percent, breakdown)
+  const format = (value: number): string => formatContextTokens(value, {
+    thousand: t('thousand'), million: t('million'),
+  })
+  const [headBefore = '', headAfter = ''] = t('aria', { percent: '\0' }).split('\0').map(part => part.trim())
+  const rowLabels = ['system', 'tools', 'messages'] as const
+  const rowColors = ['colorSystem', 'colorTools', 'colorMessages'] as const
+  const segmentColors: Record<string, string> = { systemTokens: css.colorSystem, toolsTokens: css.colorTools, messageTokens: css.colorMessages }
+  return (
+    <span ref={rootRef} className={css.root} data-dsh-token-total-stat="context">
+      <button type="button" className={css.trigger} aria-label={t('aria', { percent: reading })} aria-haspopup="dialog" aria-expanded={open} onClick={() => setOpen(!open)}>
+        <svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true">
+          <circle className={css.track} cx="7" cy="7" r="5.5" />
+          <circle className={css.fill} cx="7" cy="7" r="5.5" strokeDasharray={`${2 * Math.PI * 5.5 * percent / 100} ${2 * Math.PI * 5.5}`} transform="rotate(-90 7 7)" />
+        </svg>
+        <span>{reading}</span>
+      </button>
+      {open && createPortal(
+        <div ref={panelRef} className={css.panel} style={position ?? MEASURE_STYLE} role="dialog" aria-label={t('used')}>
+          <div className={css.header}>
+            <span className={css.headline}>{headBefore}</span>
+            <span className={css.percent}>{reading}</span>
+            <span className={css.headline}>{headAfter}</span>
+            <span className={css.figures}>{`~${format(context.usedTokens)} / ${format(context.contextWindow)}`}</span>
+          </div>
+          <div className={css.bar}>{segments.map(segment => <div key={segment.key} className={segmentColors[segment.key] === undefined ? css.segment : `${css.segment} ${segmentColors[segment.key]}`} style={{ width: `${segment.width}%` }} />)}</div>
+          {breakdown !== undefined && <dl className={css.rows}>
+            {(['systemTokens', 'toolsTokens', 'messageTokens'] as const).map((key, index) => <div className={css.row} key={key}>
+              <dt><span className={`${css.swatch} ${css[rowColors[index]]}`} />{t(rowLabels[index])}</dt>
+              <dd>{`~${format(breakdown[key])}`}</dd>
+            </div>)}
+          </dl>}
+        </div>, document.body,
+      )}
+    </span>
+  )
+}
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap { tokenTotalContext: ContextLocaleKey }
+}

package/src/client/StatsLineEnhanced.module.css

@@ -53,7 +53,7 @@
    declarations from `.root` onto `.anchor`. The tier stays off the plain
    `.anchor` because the pre-split row must keep its own `.root` tier. */
 .dockAnchor {
-  font-size: calc(var(--dsh-content-font-size-secondary, 13px) - 1px);
+  font-size: var(--dsh-content-font-size-secondary, 13px);
   line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));
 }
 
@@ -65,8 +65,8 @@
   max-width: 100%;
   padding: 1px 8px;
   border: none;
-  border-radius: 24px;
-  background: transparent;
+  border-radius: var(--dsw-radius-sm);
+  background: none;
   color: var(--dsw-alias-label-tertiary);
   font: inherit;
   font-variant-numeric: tabular-nums;
@@ -103,22 +103,13 @@ button.pill[aria-expanded='true'] {
   margin: 0 6px;
 }
 
-/* Reserved slot for the speed figure: the official pill's figure only changes
-   when a step settles, but the live reading refreshes on every beat. A width
-   that tracked the digits would reflow the centred row on each of them and drag
-   the counts pill beside it along; 10ch covers "1200 tok/s", the widest shape
-   formatTokensPerSecond can produce. */
+/* The live throughput reading sits inline exactly like the official figure:
+   no reserved width, no box of its own. The earlier `min-width: 10ch` slot kept
+   the centred row from shifting while the number grew, but it also left a
+   permanent gap before the separator — the official pill has no such slot, and
+   native parity wins over that jitter fix. */
 .speed {
-  display: inline-block;
-  min-width: 10ch;
-}
-
-/* Marks a usage figure that now includes subagent spend. Deliberately quiet:
-   it rides inside the official pill's label and must not read as a badge or
-   compete with the token count beside it. */
-.subagentMark {
-  color: var(--dsw-alias-label-tertiary);
-  font-variant-numeric: tabular-nums;
+  display: inline;
 }
 
 /* Portal dialog surface: fixed in the viewport, left/top supplied inline from
@@ -135,15 +126,15 @@ button.pill[aria-expanded='true'] {
   width: max-content;
   min-width: min(300px, calc(100vw - 24px));
   max-width: min(440px, calc(100vw - 24px));
-  padding: 16px;
+  padding: 12px;
   border: 0;
-  border-radius: 12px;
+  border-radius: var(--dsw-radius-lg);
   background: var(--dsw-specific-menu);
   backdrop-filter: var(--dsw-menu-backdrop-filter);
   --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
   box-shadow: var(--dsw-elevation-prominent);
-  font-size: 12px;
-  line-height: 18px;
+  font-size: var(--dsh-content-font-size-secondary, 13px);
+  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));
   color: var(--dsw-alias-label-secondary);
   cursor: default;
 }
@@ -160,7 +151,7 @@ button.pill[aria-expanded='true'] {
 
 /* Rule under the heading, above its rows. */
 .dialogTitleRule {
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   border-top: 0.5px solid var(--dsw-alias-border-l2);
 }
 
@@ -185,7 +176,7 @@ button.pill[aria-expanded='true'] {
 .dialogDetails {
   display: grid;
   grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
-  gap: 6px 16px;
+  gap: 4px 12px;
   margin: 0;
   color: var(--dsw-alias-label-tertiary);
 }

package/src/client/StatsLineEnhanced.tsx

@@ -23,9 +23,12 @@
  * Which pair to register is read from the dock's entry ledger in
  * src/client/index.tsx.
  *
- * Cache-hit precision, the full session token breakdown and streaming
- * throughput are always enabled; no stored preferences gate these readouts.
- * The token dialog includes the cache-miss row alongside every billing bucket.
+ * Streaming throughput is always enabled; no stored preference gates it. The
+ * three columns are style-for-style the official ones: same tier, radius,
+ * colours, same dialog rows and the same integer cache-hit figure. The one
+ * difference is the middle figure's SCOPE — it totals the whole session tree
+ * (this agent plus every subagent it spawned), which the native projection
+ * cannot see.
  *
  * Streaming throughput replaces the gauge pill's speed
  * figure with a live estimate while a step is still streaming and drops back to
@@ -44,14 +47,14 @@
  */
 import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { IconDatabaseOutline16, IconGaugeOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { PropsLocale, SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
+import { DatabaseIcon, GaugeIcon } from './stats-icons.tsx'
 import { LOCALE_NS } from './locales.ts'
 import { MEASURE_STYLE, useStatDialog, type StatDialogSeat } from './stat-dialog.ts'
 import {
-  billedInputTokens, cacheHitPercentPrecise, deriveStats,
+  billedInputTokens, cacheHitPercent, deriveStats,
   estimateOutputTokens, formatDuration, formatTokensCompact, formatTokensPerSecond,
-  measuredTokenScale, StreamingRateSampler, tokenBreakdown,
+  measuredTokenScale, StreamingRateSampler,
   type ConversationNodeLike, type PartialAssistantLike, type UseProjection, type WindowStats,
 } from './stats-line-core.ts'
 import { formatTokens } from './format.ts'
@@ -112,18 +115,15 @@ function anchorClass(dock: boolean): string | undefined {
   return dock ? `${css.anchor} ${css.dockAnchor}` : css.anchor
 }
 
-/** The separator + figure shape both speed arms render into the gauge pill.
- *  The figure sits in a width-reserved slot (css.speed): the live reading
- *  changes every second, and a slot that tracked its digits would reflow the
- *  centred row — and with it the counts pill — on every refresh. The slot is
- *  rendered even with no figure at all (an empty session has no official figure
- *  to fall back to until its first step settles), so the row's layout never
- *  depends on whether a number is available. */
+/** The separator + figure shape both speed arms render into the gauge pill:
+ *  exactly the official pill's inline shape — separator and figure appear only
+ *  when there is a figure, and the figure occupies no reserved width, so the
+ *  row reads and reflows like the native one. */
 function SpeedFigure({ text }: { text: string | null }) {
   return (
     <>
       {text !== null && <span className={css.sep} aria-hidden>·</span>}
-      <span className={css.speed} data-stats-speed>{text}</span>
+      {text !== null && <span className={css.speed} data-stats-speed>{text}</span>}
     </>
   )
 }
@@ -290,14 +290,14 @@ function TimePill({ stats, t, dialog, useChat, scale, dock }: {
     return (
       <span className={anchorClass(dock)}>
         <span className={css.pill}>
-          <IconGaugeOutline16 />
+          <GaugeIcon />
           {label}
         </span>
       </span>
     )
   }
   return (
-    <span ref={rootRef} className={anchorClass(dock)}>
+    <span ref={rootRef} className={anchorClass(dock)} data-dsh-token-total-stat>
       <button
         type="button"
         className={css.pill}
@@ -306,7 +306,7 @@ function TimePill({ stats, t, dialog, useChat, scale, dock }: {
         aria-label={officialTps === null ? counts : counts + ' · ' + officialTps}
         onClick={() => { setOpen(!open) }}
       >
-        <IconGaugeOutline16 />
+        <GaugeIcon />
         {label}
       </button>
       {open && createPortal(
@@ -320,7 +320,7 @@ function TimePill({ stats, t, dialog, useChat, scale, dock }: {
         >
           <div className={css.dialogTitle}>
             <span className={css.dialogTitleLabel}>
-              <IconGaugeOutline16 />
+              <GaugeIcon />
               {t('stats.dialog.title')}
             </span>
           </div>
@@ -372,18 +372,20 @@ function UsagePill({ usage, tree, t, dialog, dock }: {
 }) {
   const { open, setOpen, rootRef, panelRef, pos } = useStatDialog(dialog)
   const display = sessionUsageForDisplay(usage, tree?.tree ?? null)
-  const subagentTotals = display.subagents
-  const showSubagents = display.subagentSessions > 0
   const billed = display.total
   // Same aggregate as the official pill total: every prompt-side billing bucket plus output.
   const total = billedTotal(billed)
   const totalText = t('message.turnUsage.count', { count: formatTokensCompact(total) })
-  const cacheHit = cacheHitPercentPrecise(billed)
+  // Native formatting, one consistent scope: the ratio comes from the same
+  // aggregate the headline uses, so "33M tok · 87%" can never contradict the
+  // number printed beside it. The integer shape and its >99% guard are the
+  // official ones, untouched.
+  const cacheHit = cacheHitPercent(billed)
   const cacheHitText = cacheHit !== null ? t('stats.cacheHit', { percent: cacheHit }) : null
   const exactCount = (value: number): string =>
     t('message.turnUsage.count', { count: formatTokens(value) })
   return (
-    <span ref={rootRef} className={anchorClass(dock)}>
+    <span ref={rootRef} className={anchorClass(dock)} data-dsh-token-total-stat>
       <button
         type="button"
         className={css.pill}
@@ -392,19 +394,13 @@ function UsagePill({ usage, tree, t, dialog, dock }: {
         aria-label={cacheHitText === null ? totalText : totalText + ' · ' + cacheHitText}
         onClick={() => { setOpen(!open) }}
       >
-        <IconDatabaseOutline16 />
+        <DatabaseIcon />
         <span className={css.label}>
           {totalText}
-          {showSubagents && (
-            <span className={css.sep} aria-hidden>·</span>
-          )}
-          {showSubagents && (
-            <span className={css.subagentMark} title={t('stats.dialog.subagents')}>
-              +{tree?.tree?.subagentSessions ?? 0}
-            </span>
-          )}
           {cacheHitText !== null && (
             <>
+              {/* Separator only when the second figure exists: an empty span
+                  would still take the label's gap and read as a trailing dot. */}
               <span className={css.sep} aria-hidden>·</span>
               {cacheHitText}
             </>
@@ -422,12 +418,14 @@ function UsagePill({ usage, tree, t, dialog, dock }: {
         >
           <div className={css.dialogTitle}>
             <span className={css.dialogTitleLabel}>
-              <IconDatabaseOutline16 />
+              <DatabaseIcon />
               {t('stats.dialog.usageTitle')}
             </span>
             <span className={css.dialogTitleValue}>{exactCount(total)}</span>
           </div>
           <div className={css.dialogTitleRule} aria-hidden />
+          {/* Exactly the official dialog's rows, in the official order: the
+              takeover adds the tree to the TOTAL, not to the breakdown. */}
           <dl className={css.dialogDetails} data-session-stats-usage>
             {cacheHit !== null && (
               <>
@@ -439,28 +437,14 @@ function UsagePill({ usage, tree, t, dialog, dock }: {
             <dd>{exactCount(billed.uncachedInputTokens)}</dd>
             <dt>{t('message.turnUsage.cacheRead')}</dt>
             <dd>{exactCount(billed.cacheReadTokens)}</dd>
-            <dt>{t('message.turnUsage.cacheWrite')}</dt>
-            <dd>{exactCount(billed.cacheWriteTokens)}</dd>
-            <dt>{t('stats.cacheMiss')}</dt>
-            <dd>{exactCount(tokenBreakdown(billed).cacheMiss)}</dd>
-            <dt>{t('message.turnUsage.output')}</dt>
-            <dd>{exactCount(billed.outputTokens)}</dd>
-            {/* The split that the native figure cannot show: this session's own
-                main agent against every subagent it delegated to. */}
-            {showSubagents && (
+            {billed.cacheWriteTokens !== 0 && (
               <>
-                <dt>{t('stats.dialog.main')}</dt>
-                <dd>{exactCount(billedTotal(display.self))}</dd>
-                <dt>{t('stats.dialog.subagents')}</dt>
-                <dd>
-                  {exactCount(billedTotal(subagentTotals))}
-                  {' · '}
-                  {t('stats.dialog.subagentCount', { count: tree?.tree?.subagentSessions ?? 0 })}
-                </dd>
-                <dt>{t('stats.dialog.treeTotal')}</dt>
-                <dd>{exactCount(billedTotal(billed))}</dd>
+                <dt>{t('message.turnUsage.cacheWrite')}</dt>
+                <dd>{exactCount(billed.cacheWriteTokens)}</dd>
               </>
             )}
+            <dt>{t('message.turnUsage.output')}</dt>
+            <dd>{exactCount(billed.outputTokens)}</dd>
           </dl>
         </div>,
         document.body,

package/src/client/TokenTotalPanel.tsx

@@ -282,7 +282,7 @@ export function TokenTotalPanel({ t }: { t: Translator }): JSX.Element {
  *  (zero input/output but real cache hits) or a failed-call day (requests
  *  but no tokens) both carry real usage and must not read as "no data". */
 function isEmptyRange(stats: TokenTotalRange): boolean {
-  return stats.tokens === 0 && stats.cacheHit === 0 && stats.requests === 0 && stats.turns === 0
+  return stats.tokens === 0 && stats.cacheHit === 0 && stats.requests === 0 && stats.failures === 0 && stats.turns === 0
 }
 
 function StatCards({ stats, t }: { stats: TokenTotalRange; t: Translator }) {
@@ -299,8 +299,10 @@ function StatCards({ stats, t }: { stats: TokenTotalRange; t: Translator }) {
     { icon: Database, label: t('cacheTokens'), value: formatCompact(stats.cacheTokens), sub: `${formatTokens(stats.cacheTokens)} ${t('tokensUnit')}` },
     // 缓存命中率 —cached share of all prompt tokens in the range.
     { icon: Activity, label: t('cacheRate'), value: cacheRateText(stats.cacheHit, stats.cacheMiss), hint: t('cacheRateHint'), sub: `${formatCompact(stats.cacheHit)} ${t('cachedTokens')}` },
-    // 请求数量 —provider calls (tokens or not).
-    { icon: MessagesSquare, label: t('requests'), value: String(stats.requests) },
+    // 请求数量 —provider calls (tokens or not). The failed share sits
+    // underneath, and only when there were any: a healthy range stays a
+    // single line. Failed calls are a SUBSET of requests, never additive.
+    { icon: MessagesSquare, label: t('requests'), value: String(stats.requests), sub: stats.failures > 0 ? `${t('requestsFailed')} ${stats.failures} · ${formatPercent((stats.failures / Math.max(stats.requests, 1)) * 100)}` : undefined },
   ]
   return (
     <div className={css.cards}>

package/src/client/context-meter-core.ts

@@ -0,0 +1,54 @@
+export interface ContextPressureLike {
+  projectedTokens?: number
+  pressureTokens?: number
+  contextWindow?: number
+}
+
+export interface ContextBreakdownLike {
+  systemTokens: number
+  toolsTokens: number
+  messageTokens: number
+}
+
+export interface ContextOccupancy {
+  percent: number
+  usedTokens: number
+  contextWindow: number
+}
+
+/** Mirrors the host meter's occupancy calculation exactly. */
+export function contextOccupancy(pressure: ContextPressureLike | undefined): ContextOccupancy | null {
+  const usedTokens = pressure?.projectedTokens ?? pressure?.pressureTokens
+  if (usedTokens === undefined || pressure?.contextWindow === undefined) return null
+  return {
+    percent: Math.min(100, Math.round(usedTokens / pressure.contextWindow * 100)),
+    usedTokens,
+    contextWindow: pressure.contextWindow,
+  }
+}
+
+export function contextBreakdownTotal(breakdown: ContextBreakdownLike | undefined): number {
+  return breakdown === undefined ? 0 : breakdown.systemTokens + breakdown.toolsTokens + breakdown.messageTokens
+}
+
+export function contextBreakdownSegments(
+  percent: number,
+  breakdown: ContextBreakdownLike | undefined,
+): Array<{ key: string; width: number }> {
+  const total = contextBreakdownTotal(breakdown)
+  if (breakdown === undefined || total === 0) return [{ key: 'total', width: percent }]
+  return [
+    { key: 'systemTokens', width: percent * breakdown.systemTokens / total },
+    { key: 'toolsTokens', width: percent * breakdown.toolsTokens / total },
+    { key: 'messageTokens', width: percent * breakdown.messageTokens / total },
+  ].filter(segment => segment.width > 0)
+}
+
+export function formatContextTokens(value: number, units: { thousand: string; million: string }): string {
+  const scaled = (candidate: number): string => candidate >= 100
+    ? String(Math.round(candidate))
+    : String(Math.round(candidate * 10) / 10)
+  if (value < 1e3) return String(value)
+  if (value < 1e6) return units.thousand.replace('{value}', scaled(value / 1e3))
+  return units.million.replace('{value}', scaled(value / 1e6))
+}

package/src/client/context-takeover.ts

@@ -0,0 +1,35 @@
+/** The host ContextMeter is hard-coded beside composer.dock, not a slot.
+ * Suppress only that recognizable sibling while our replacement is mounted;
+ * never hide a whole dock, slot wrapper, or another plugin's readout. */
+export function installContextTakeover(anchor: HTMLElement): () => void {
+  const dock = anchor.closest<HTMLElement>('[data-composer-dock]')
+  const view = anchor.ownerDocument.defaultView
+  if (dock === null || view === null) return () => {}
+  const hidden = new Map<HTMLElement, { display: string; priority: string }>()
+  const reconcile = (): void => {
+    for (const sibling of Array.from(dock.children)) {
+      if (!(sibling instanceof view.HTMLElement) || sibling.tagName !== 'SPAN'
+        || sibling.contains(anchor) || sibling.hasAttribute('data-slot-entry')
+        || sibling.hasAttribute('data-dsh-token-total-stat')
+        || hidden.has(sibling)) continue
+      // ContextMeter's stable SVG geometry, not a private CSS-module hash or
+      // a translated label. Current hosts mount its span directly in the dock.
+      if (sibling.querySelector('button[aria-haspopup="dialog"] svg[viewBox="0 0 14 14"] circle[cx="7"][cy="7"][r="5.5"]') === null) continue
+      hidden.set(sibling, { display: sibling.style.getPropertyValue('display'), priority: sibling.style.getPropertyPriority('display') })
+      sibling.setAttribute('data-dsh-token-total-native-context', '')
+      sibling.style.setProperty('display', 'none', 'important')
+    }
+  }
+  reconcile()
+  const observer = new view.MutationObserver(reconcile)
+  observer.observe(dock, { childList: true, subtree: true })
+  return () => {
+    observer.disconnect()
+    for (const [element, previous] of hidden) {
+      element.removeAttribute('data-dsh-token-total-native-context')
+      if (previous.display === '') element.style.removeProperty('display')
+      else element.style.setProperty('display', previous.display, previous.priority)
+    }
+    hidden.clear()
+  }
+}