+
{tail}
-
- {data.tokenUsage === undefined ? null : }
- { forkAt(closing.finalNode.seq) }}
- branchUnavailable={data.branchUnavailable || hasLaterChatNode}
- className={css.actions}
- extraActions={assistantActions}
- t={t}
- />
-
+
{ forkAt(closing.finalNode.seq) }}
+ branchUnavailable={data.branchUnavailable || hasLaterChatNode}
+ className={css.actions}
+ extraActions={assistantActions}
+ usageDetails={data.tokenUsage === undefined ? null : (
+
+ )}
+ t={t}
+ />
)
})
diff --git a/packages/client/ui-chat/src/client/chat/TurnUsageDisclosure.module.css b/packages/client/ui-chat/src/client/chat/TurnUsageDisclosure.module.css
deleted file mode 100644
index ba96155504..0000000000
--- a/packages/client/ui-chat/src/client/chat/TurnUsageDisclosure.module.css
+++ /dev/null
@@ -1,88 +0,0 @@
-.root {
- min-width: 0;
-}
-
-.root[data-open] {
- padding-bottom: 4px;
-}
-
-.root [data-disclosure-row]:focus-visible {
- border-radius: 6px;
- outline: 2px solid var(--dsw-alias-label-tertiary);
- outline-offset: -2px;
-}
-
-.chevron {
- color: var(--dsw-alias-label-secondary);
-}
-
-.separator {
- flex: none;
- width: 2px;
- height: 2px;
- margin: 0 8px;
- border-radius: 1px;
- background: var(--dsw-alias-label-caption);
-}
-
-.summary {
- min-width: 0;
- overflow: hidden;
- color: var(--dsw-alias-label-tertiary);
- font-size: var(--dsh-content-font-size-secondary, 13px);
- font-variant-numeric: tabular-nums;
- line-height: calc(24px + var(--dsh-content-font-delta, 0px));
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.details {
- display: grid;
- grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
- gap: 6px 16px;
- box-sizing: border-box;
- /* Indent under the title, which starts at leading (16 + delta) + gap 6. */
- width: calc(100% - 22px - var(--dsh-content-font-delta, 0px));
- margin: 4px 0 0 calc(22px + var(--dsh-content-font-delta, 0px));
- padding: 10px 16px 12px 12px;
- border-radius: 8px;
- background: var(--dsw-alias-markdown-code-block);
- color: var(--dsw-alias-label-tertiary);
- font-size: 12px;
- line-height: 18px;
-}
-
-.details dt,
-.details dd {
- min-width: 0;
- margin: 0;
-}
-
-.details dd {
- color: var(--dsw-alias-label-secondary);
- font-variant-numeric: tabular-nums;
- text-align: right;
-}
-
-.details .route {
- overflow-wrap: anywhere;
-}
-
-.reasoning {
- color: var(--dsw-alias-label-tertiary);
- white-space: nowrap;
-}
-
-.totalLabel,
-.details .totalValue {
- padding-top: 6px;
- border-top: 1px solid var(--dsw-alias-separator-primary);
- color: var(--dsw-alias-label-primary);
-}
-
-@media (max-width: 480px) {
- .details {
- grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
- gap-inline: 10px;
- }
-}
diff --git a/packages/client/ui-chat/src/client/chat/TurnUsageDisclosure.tsx b/packages/client/ui-chat/src/client/chat/TurnUsageDisclosure.tsx
deleted file mode 100644
index 8d79b44f4d..0000000000
--- a/packages/client/ui-chat/src/client/chat/TurnUsageDisclosure.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useState } from 'react'
-import { DisclosureRow, IconDataOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
-import type { TurnTokenUsage } from '../contract/chat-nodes.ts'
-import type { ChatViewSlotProps } from '../contract/slots.ts'
-import { formatCacheHitPercent, formatExactTokens, formatTokens } from './token-format.ts'
-import css from './TurnUsageDisclosure.module.css'
-
-export interface TurnUsageDisclosureProps {
- usage: TurnTokenUsage
- t: ChatViewSlotProps['t']
-}
-
-function formatCompactCount(value: number, t: ChatViewSlotProps['t']): string {
- return t('message.turnUsage.count', { count: formatTokens(value, t) })
-}
-
-function formatExactCount(value: number, t: ChatViewSlotProps['t']): string {
- return t('message.turnUsage.count', { count: formatExactTokens(value, t) })
-}
-
-/** Compact per-Turn usage summary with an opt-in bucket breakdown. */
-export function TurnUsageDisclosure({ usage, t }: TurnUsageDisclosureProps) {
- const [open, setOpen] = useState(false)
- const cacheHit = usage.cacheReadTokens === undefined
- ? null
- : formatCacheHitPercent(usage.cacheReadTokens, usage.totalTokens - usage.outputTokens, 1)
- const total = formatCompactCount(usage.totalTokens, t)
- const summary = cacheHit === null
- ? total
- : t('message.turnUsage.summaryWithCache', { total, percent: cacheHit })
- const routes = usage.routes?.map(route => `${route.provider}/${route.model}`).join(', ') ?? ''
-
- return (
-
}
- title={t('message.turnUsage.title')}
- open={open}
- expandable
- onToggle={() => { setOpen(value => !value) }}
- expandOnRowClick
- keepContentWhenOpen
- collapsedContent={(
- <>
-
-
{summary}
-
- )}
- className={css.root}
- chevronClassName={css.chevron}
- >
-
- {routes !== '' && (
- <>
- - {t('message.turnUsage.model')}
- - {routes}
-
- )}
- - {t('message.turnUsage.input')}
- - {formatExactCount(usage.uncachedInputTokens, t)}
- {usage.cacheReadTokens !== undefined && (
- <>
- - {t('message.turnUsage.cacheRead')}
- - {formatExactCount(usage.cacheReadTokens, t)}
-
- )}
- {usage.cacheWriteTokens !== undefined && (
- <>
- - {t('message.turnUsage.cacheWrite')}
- - {formatExactCount(usage.cacheWriteTokens, t)}
-
- )}
- - {t('message.turnUsage.output')}
- -
- {formatExactCount(usage.outputTokens, t)}
- {usage.reasoningTokens !== undefined && (
-
- {t('message.turnUsage.reasoning', { tokens: formatExactCount(usage.reasoningTokens, t) })}
-
- )}
-
- - {t('message.turnUsage.total')}
- - {formatExactCount(usage.totalTokens, t)}
-
-
- )
-}
diff --git a/packages/client/ui-chat/src/client/chat/TurnUsagePanel.module.css b/packages/client/ui-chat/src/client/chat/TurnUsagePanel.module.css
new file mode 100644
index 0000000000..1c6ac61142
--- /dev/null
+++ b/packages/client/ui-chat/src/client/chat/TurnUsagePanel.module.css
@@ -0,0 +1,99 @@
+/* Whole-line meta trigger on the finalized footer row, plus its click-open
+ Turn-details dialog (menu surface: r12, inverted hairline, shadow-lv3 —
+ ContextMeter's panel skin). */
+
+.root {
+ position: relative;
+ display: inline-flex;
+ min-width: 0;
+ /* Same 12px inset the plain clock label (.timeEnd) keeps from the icons. */
+ margin-left: 12px;
+}
+
+/* Same text treatment as the row's clock label (secondary tier, one step
+ under the body size); hover brightens one step to signal the cluster is
+ clickable. min-width 0 + hidden overflow let the one-line cluster shrink
+ with the chat column and ellipsize instead of widening it. */
+.trigger {
+ min-width: 0;
+ padding: 0;
+ border: none;
+ background: transparent;
+ color: var(--dsw-alias-label-tertiary);
+ font-size: var(--dsh-content-font-size-secondary, 13px);
+ font-variant-numeric: tabular-nums;
+ line-height: calc(24px + var(--dsh-content-font-delta, 0px));
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: pointer;
+}
+
+.trigger:hover,
+.trigger[aria-expanded='true'] {
+ color: var(--dsw-alias-label-secondary);
+}
+
+/* Same segment separators as the plain clock row's runTimeDot, so the
+ clickable and plain forms of the meta line space identically. */
+.dot {
+ margin: 0 5px;
+}
+
+.panel {
+ position: absolute;
+ bottom: calc(100% + 8px);
+ left: 0;
+ z-index: 100;
+ box-sizing: border-box;
+ /* Size to the widest row so provider/model stays on one line, within a cap. */
+ width: max-content;
+ min-width: 300px;
+ max-width: min(440px, calc(100vw - 24px));
+ padding: 12px;
+ border: 1px solid var(--dsw-alias-border-inverted);
+ border-radius: 12px;
+ background: var(--dsw-specific-menu);
+ box-shadow: var(--dsw-shadow-lv3);
+ font-size: 12px;
+ line-height: 18px;
+ color: var(--dsw-alias-label-secondary);
+ cursor: default;
+}
+
+.details {
+ display: grid;
+ grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
+ gap: 6px 16px;
+ margin: 0;
+ color: var(--dsw-alias-label-tertiary);
+}
+
+.details dt,
+.details dd {
+ min-width: 0;
+ margin: 0;
+}
+
+.details dd {
+ color: var(--dsw-alias-label-secondary);
+ font-variant-numeric: tabular-nums;
+ text-align: right;
+}
+
+.details .route {
+ overflow-wrap: anywhere;
+}
+
+.reasoning {
+ color: var(--dsw-alias-label-tertiary);
+ white-space: nowrap;
+}
+
+.totalLabel,
+.details .totalValue {
+ padding-top: 8px;
+ border-top: 1px solid var(--dsw-alias-border-l2);
+ color: var(--dsw-alias-label-primary);
+ font-weight: 500;
+}
diff --git a/packages/client/ui-chat/src/client/chat/TurnUsagePanel.tsx b/packages/client/ui-chat/src/client/chat/TurnUsagePanel.tsx
new file mode 100644
index 0000000000..65709cebb8
--- /dev/null
+++ b/packages/client/ui-chat/src/client/chat/TurnUsagePanel.tsx
@@ -0,0 +1,147 @@
+// Single-row Turn chrome: the finalized footer's whole meta line (clock,
+// duration, turn total, throughput, TTFT, cache-hit) as one inline trigger
+// whose click opens the per-Turn details dialog.
+
+import { Fragment, useEffect, useRef, useState } from 'react'
+import type { TurnTokenUsage } from '../contract/chat-nodes.ts'
+import type { ChatViewSlotProps } from '../contract/slots.ts'
+import {
+ formatLatencySeconds, formatMessageClock, formatRunDuration, formatTokensPerSecond,
+} from './message-chrome.ts'
+import { formatCacheHitPercent, formatExactTokens, formatTokens } from './token-format.ts'
+import { useCalendarDay } from './use-calendar-day.ts'
+import css from './TurnUsagePanel.module.css'
+
+export interface TurnUsagePanelProps {
+ usage: TurnTokenUsage
+ /** Turn-close instant (unix epoch ms) shown as the line's leading clock. */
+ time: number
+ /** Turn elapsed run time in ms, shown as `用时 6秒`; omitted when unrecorded. */
+ runMs?: number | undefined
+ /** Turn first-step TTFT in ms, shown as `TTFT 1.2s`; omitted when unrecorded. */
+ ttftMs?: number | undefined
+ /** Turn decode throughput, shown as `34 tok/s`; omitted when unrecorded. */
+ tokensPerSecond?: number | undefined
+ /** The owning view's locale seat, passed down as a plain prop. */
+ t: ChatViewSlotProps['t']
+}
+
+function formatCompactCount(value: number, t: ChatViewSlotProps['t']): string {
+ return t('message.turnUsage.count', { count: formatTokens(value, t) })
+}
+
+function formatExactCount(value: number, t: ChatViewSlotProps['t']): string {
+ return t('message.turnUsage.count', { count: formatExactTokens(value, t) })
+}
+
+/**
+ * Whole-line clickable meta cluster with a click-open Turn-details dialog.
+ * @param props - Turn usage buckets, close time, optional timing metrics, locale seat.
+ * @returns The trigger and, while open, its anchored dialog.
+ */
+export function TurnUsagePanel({ usage, time, runMs, ttftMs, tokensPerSecond, t }: TurnUsagePanelProps) {
+ const [open, setOpen] = useState(false)
+ const rootRef = useRef
(null)
+ const day = useCalendarDay()
+
+ // Outside click / Escape close, one document listener while open (ContextMeter's pattern).
+ useEffect(() => {
+ if (!open) return
+ const onPointerDown = (e: PointerEvent): void => {
+ if (e.target instanceof Node && rootRef.current?.contains(e.target) === true) return
+ setOpen(false)
+ }
+ const onKeyDown = (e: KeyboardEvent): void => {
+ if (e.key === 'Escape') setOpen(false)
+ }
+ document.addEventListener('pointerdown', onPointerDown)
+ document.addEventListener('keydown', onKeyDown)
+ return () => {
+ document.removeEventListener('pointerdown', onPointerDown)
+ document.removeEventListener('keydown', onKeyDown)
+ }
+ }, [open])
+
+ const cacheHit = usage.cacheReadTokens === undefined
+ ? null
+ : formatCacheHitPercent(usage.cacheReadTokens, usage.totalTokens - usage.outputTokens, 1)
+ const total = formatCompactCount(usage.totalTokens, t)
+ const routes = usage.routes?.map(route => `${route.provider}/${route.model}`).join(', ') ?? ''
+ const clock = formatMessageClock(time, t, day)
+ const metrics: string[] = [clock]
+ if (runMs !== undefined) metrics.push(t('message.ranFor', { duration: formatRunDuration(runMs, t) }))
+ metrics.push(t('message.turnUsage.consumed', { total }))
+ if (cacheHit !== null) metrics.push(t('message.turnUsage.cacheHitRate', { percent: cacheHit }))
+ if (tokensPerSecond !== undefined) {
+ metrics.push(t('message.turnUsage.speed', { tps: formatTokensPerSecond(tokensPerSecond) }))
+ }
+ if (ttftMs !== undefined) metrics.push(t('message.ttft', { seconds: formatLatencySeconds(ttftMs) }))
+
+ return (
+
+
+ {open && (
+
+
+ {routes !== '' && (
+ <>
+ - {t('message.turnUsage.model')}
+ - {routes}
+
+ )}
+ - {t('message.turnUsage.input')}
+ - {formatExactCount(usage.uncachedInputTokens, t)}
+ {usage.cacheReadTokens !== undefined && (
+ <>
+ - {t('message.turnUsage.cacheRead')}
+ - {formatExactCount(usage.cacheReadTokens, t)}
+
+ )}
+ {usage.cacheWriteTokens !== undefined && (
+ <>
+ - {t('message.turnUsage.cacheWrite')}
+ - {formatExactCount(usage.cacheWriteTokens, t)}
+
+ )}
+ - {t('message.turnUsage.output')}
+ -
+ {formatExactCount(usage.outputTokens, t)}
+ {usage.reasoningTokens !== undefined && (
+
+ {t('message.turnUsage.reasoning', { tokens: formatExactCount(usage.reasoningTokens, t) })}
+
+ )}
+
+ {cacheHit !== null && (
+ <>
+ - {t('message.turnDetails.cacheHit')}
+ - {`${cacheHit}%`}
+
+ )}
+ - {t('message.turnUsage.total')}
+ - {formatExactCount(usage.totalTokens, t)}
+
+
{renderMessageImages({ images, align: 'end' })}
@@ -271,14 +273,24 @@ export function PendingSubmissionBubble({ submission, renderMessageImages, t }:
/** User and admitted-steering keyed Chat renderer. */
export const UserMessageNodeView = memo(function UserMessageNodeView({
- node, renderMessageImages, t,
+ node, renderMessageImages, useChat, t,
}: ChatNodeViewProps<'user' | 'steering'>) {
const data = node.data
+ // The transcript's last user-authored row keeps its actions row shown, the
+ // same recency gate turn tails use; earlier rows reveal on hover.
+ const isLatestUserRow = useChat((snapshot) => {
+ for (let index = snapshot.order.length - 1; index >= 0; index -= 1) {
+ const candidate = snapshot.nodes.get(snapshot.order[index] ?? '')
+ if (candidate?.kind === 'user' || candidate?.kind === 'steering') return candidate.key === node.key
+ }
+ return true
+ })
return (
(
{ forkAt(closing.finalNode.seq) }}
branchUnavailable={data.branchUnavailable || hasLaterChatNode}
className={css.actions}
extraActions={assistantActions}
- usageDetails={data.tokenUsage === undefined ? null : (
-
+ usageAction={data.tokenUsage === undefined ? null : (
+
)}
t={t}
/>
diff --git a/packages/client/ui-chat/src/client/chat/TurnUsagePanel.module.css b/packages/client/ui-chat/src/client/chat/TurnUsagePanel.module.css
index 1c6ac61142..f95534d7c0 100644
--- a/packages/client/ui-chat/src/client/chat/TurnUsagePanel.module.css
+++ b/packages/client/ui-chat/src/client/chat/TurnUsagePanel.module.css
@@ -1,56 +1,68 @@
-/* Whole-line meta trigger on the finalized footer row, plus its click-open
+/* Icon-row Turn-usage pill (data icon + turn total) plus its click-open
Turn-details dialog (menu surface: r12, inverted hairline, shadow-lv3 —
ContextMeter's panel skin). */
.root {
- position: relative;
display: inline-flex;
min-width: 0;
- /* Same 12px inset the plain clock label (.timeEnd) keeps from the icons. */
- margin-left: 12px;
}
-/* Same text treatment as the row's clock label (secondary tier, one step
- under the body size); hover brightens one step to signal the cluster is
- clickable. min-width 0 + hidden overflow let the one-line cluster shrink
- with the chat column and ellipsize instead of widening it. */
+/* Same pill rules as the sibling `.action` icon buttons (28px hit height,
+ 15px glyph, tertiary → secondary on hover with the interactive hover
+ background), widened to carry the turn-total label. */
.trigger {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
min-width: 0;
- padding: 0;
+ height: calc(28px + var(--dsh-content-font-delta, 0px));
+ padding: 6px 8px;
border: none;
+ border-radius: 28px;
background: transparent;
color: var(--dsw-alias-label-tertiary);
font-size: var(--dsh-content-font-size-secondary, 13px);
font-variant-numeric: tabular-nums;
line-height: calc(24px + var(--dsh-content-font-delta, 0px));
white-space: nowrap;
+ cursor: pointer;
+}
+
+/* A narrow column trims the label to an ellipsis instead of overflowing the
+ pill; the data glyph never shrinks. */
+.label {
+ min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
- cursor: pointer;
+}
+
+.trigger svg {
+ width: calc(15px + var(--dsh-content-font-delta, 0px));
+ height: calc(15px + var(--dsh-content-font-delta, 0px));
+ flex: none;
}
.trigger:hover,
.trigger[aria-expanded='true'] {
+ background: var(--dsw-alias-interactive-bg-hover);
color: var(--dsw-alias-label-secondary);
}
-/* Same segment separators as the plain clock row's runTimeDot, so the
- clickable and plain forms of the meta line space identically. */
-.dot {
- margin: 0 5px;
-}
-
+/* Portal surface: fixed in the viewport, left/top supplied inline from the
+ anchored-position clamp so the panel keeps its 12px viewport margin instead
+ of hanging off the trigger and clipping at the window edge. Portaled panels
+ layer above modal overlays (z 1000). */
.panel {
- position: absolute;
- bottom: calc(100% + 8px);
- left: 0;
- z-index: 100;
+ position: fixed;
+ z-index: 1100;
box-sizing: border-box;
- /* Size to the widest row so provider/model stays on one line, within a cap. */
+ /* Size to the widest row so provider/model stays on one line, within a cap.
+ Both bounds yield to a viewport narrower than themselves (12px margins),
+ so a fixed floor cannot push the panel past the placement clamp. */
width: max-content;
- min-width: 300px;
+ min-width: min(300px, calc(100vw - 24px));
max-width: min(440px, calc(100vw - 24px));
- padding: 12px;
+ padding: 16px;
border: 1px solid var(--dsw-alias-border-inverted);
border-radius: 12px;
background: var(--dsw-specific-menu);
@@ -61,6 +73,13 @@
cursor: default;
}
+/* Dialog heading, same size and weight as the total row it concludes with. */
+.title {
+ margin-bottom: 12px;
+ color: var(--dsw-alias-label-primary);
+ font-weight: 500;
+}
+
.details {
display: grid;
grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
@@ -90,10 +109,16 @@
white-space: nowrap;
}
+/* Full-bleed rule above the total row: the grid's column gap would break a
+ per-cell border-top, so the line is its own row spanning both columns. */
+.separator {
+ grid-column: 1 / -1;
+ margin: 4px 0;
+ border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
.totalLabel,
.details .totalValue {
- padding-top: 8px;
- border-top: 1px solid var(--dsw-alias-border-l2);
color: var(--dsw-alias-label-primary);
font-weight: 500;
}
diff --git a/packages/client/ui-chat/src/client/chat/TurnUsagePanel.tsx b/packages/client/ui-chat/src/client/chat/TurnUsagePanel.tsx
index 65709cebb8..79cbb6617b 100644
--- a/packages/client/ui-chat/src/client/chat/TurnUsagePanel.tsx
+++ b/packages/client/ui-chat/src/client/chat/TurnUsagePanel.tsx
@@ -1,27 +1,17 @@
-// Single-row Turn chrome: the finalized footer's whole meta line (clock,
-// duration, turn total, throughput, TTFT, cache-hit) as one inline trigger
-// whose click opens the per-Turn details dialog.
+// Icon-row Turn-usage action: a data-icon pill labelled with the turn total
+// (and the cache-hit rate when known) that click-opens the per-Turn details
+// dialog. Sits right of the branch action in the tail's IconActions row.
-import { Fragment, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, type CSSProperties } from 'react'
+import { createPortal } from 'react-dom'
+import { IconDataOutline16, useAnchoredPosition } from '@deepseek-ai/dsh-client-ui-primitives'
import type { TurnTokenUsage } from '../contract/chat-nodes.ts'
import type { ChatViewSlotProps } from '../contract/slots.ts'
-import {
- formatLatencySeconds, formatMessageClock, formatRunDuration, formatTokensPerSecond,
-} from './message-chrome.ts'
import { formatCacheHitPercent, formatExactTokens, formatTokens } from './token-format.ts'
-import { useCalendarDay } from './use-calendar-day.ts'
import css from './TurnUsagePanel.module.css'
export interface TurnUsagePanelProps {
usage: TurnTokenUsage
- /** Turn-close instant (unix epoch ms) shown as the line's leading clock. */
- time: number
- /** Turn elapsed run time in ms, shown as `用时 6秒`; omitted when unrecorded. */
- runMs?: number | undefined
- /** Turn first-step TTFT in ms, shown as `TTFT 1.2s`; omitted when unrecorded. */
- ttftMs?: number | undefined
- /** Turn decode throughput, shown as `34 tok/s`; omitted when unrecorded. */
- tokensPerSecond?: number | undefined
/** The owning view's locale seat, passed down as a plain prop. */
t: ChatViewSlotProps['t']
}
@@ -34,21 +24,46 @@ function formatExactCount(value: number, t: ChatViewSlotProps['t']): string {
return t('message.turnUsage.count', { count: formatExactTokens(value, t) })
}
+/** Viewport margin the placement clamp keeps (the Menu portal margin). */
+const PANEL_MARGIN = 12
+
+/** Distance between the trigger's top edge and the panel's bottom. */
+const PANEL_GAP = 8
+
/**
- * Whole-line clickable meta cluster with a click-open Turn-details dialog.
- * @param props - Turn usage buckets, close time, optional timing metrics, locale seat.
- * @returns The trigger and, while open, its anchored dialog.
+ * Unplaced portal panel: hidden but laid out so the clamp measures real
+ * dimensions (the `useAnchoredPosition` measure pass).
*/
-export function TurnUsagePanel({ usage, time, runMs, ttftMs, tokensPerSecond, t }: TurnUsagePanelProps) {
+const MEASURE_STYLE: CSSProperties = { visibility: 'hidden', left: 0, top: 0 }
+
+/**
+ * Turn-usage IconActions pill with a click-open Turn-details dialog.
+ * @param props - Turn usage buckets and locale seat.
+ * @returns The icon-and-total trigger and, while open, its portaled dialog anchored above the trigger.
+ */
+export function TurnUsagePanel({ usage, t }: TurnUsagePanelProps) {
const [open, setOpen] = useState(false)
const rootRef = useRef(null)
- const day = useCalendarDay()
+ const panelRef = useRef(null)
+
+ // Portal placement: the dialog is fixed above the trigger and clamped inside
+ // the viewport, so a trigger near the window edge cannot push it off-screen.
+ const pos = useAnchoredPosition({
+ open,
+ anchorRef: rootRef,
+ panelRef,
+ side: 'top',
+ gap: PANEL_GAP,
+ margin: PANEL_MARGIN,
+ })
// Outside click / Escape close, one document listener while open (ContextMeter's pattern).
useEffect(() => {
if (!open) return
const onPointerDown = (e: PointerEvent): void => {
- if (e.target instanceof Node && rootRef.current?.contains(e.target) === true) return
+ if (!(e.target instanceof Node)) return
+ if (rootRef.current?.contains(e.target) === true) return
+ if (panelRef.current?.contains(e.target) === true) return
setOpen(false)
}
const onKeyDown = (e: KeyboardEvent): void => {
@@ -67,15 +82,6 @@ export function TurnUsagePanel({ usage, time, runMs, ttftMs, tokensPerSecond, t
: formatCacheHitPercent(usage.cacheReadTokens, usage.totalTokens - usage.outputTokens, 1)
const total = formatCompactCount(usage.totalTokens, t)
const routes = usage.routes?.map(route => `${route.provider}/${route.model}`).join(', ') ?? ''
- const clock = formatMessageClock(time, t, day)
- const metrics: string[] = [clock]
- if (runMs !== undefined) metrics.push(t('message.ranFor', { duration: formatRunDuration(runMs, t) }))
- metrics.push(t('message.turnUsage.consumed', { total }))
- if (cacheHit !== null) metrics.push(t('message.turnUsage.cacheHitRate', { percent: cacheHit }))
- if (tokensPerSecond !== undefined) {
- metrics.push(t('message.turnUsage.speed', { tps: formatTokensPerSecond(tokensPerSecond) }))
- }
- if (ttftMs !== undefined) metrics.push(t('message.ttft', { seconds: formatLatencySeconds(ttftMs) }))
return (
@@ -86,21 +92,22 @@ export function TurnUsagePanel({ usage, time, runMs, ttftMs, tokensPerSecond, t
aria-expanded={open}
onClick={() => { setOpen(!open) }}
>
- {metrics.map((metric, index) => (
-
- {index > 0 && (
- <>
- {' '}
- ·
- {' '}
-
- )}
- {metric}
-
- ))}
+
+
+ {cacheHit === null
+ ? t('message.turnUsage.consumed', { total })
+ : `${t('message.turnUsage.consumed', { total })} · ${t('message.turnUsage.cacheHitRate', { percent: cacheHit })}`}
+
- {open && (
-
+ {open && createPortal(
+
+
{t('message.turnUsage.title')}
{routes !== '' && (
<>
@@ -108,6 +115,12 @@ export function TurnUsagePanel({ usage, time, runMs, ttftMs, tokensPerSecond, t
- {routes}
)}
+ {cacheHit !== null && (
+ <>
+ - {t('message.turnUsage.cacheHit')}
+ - {`${cacheHit}%`}
+
+ )}
- {t('message.turnUsage.input')}
- {formatExactCount(usage.uncachedInputTokens, t)}
{usage.cacheReadTokens !== undefined && (
@@ -131,16 +144,12 @@ export function TurnUsagePanel({ usage, time, runMs, ttftMs, tokensPerSecond, t
)}
- {cacheHit !== null && (
- <>
- - {t('message.turnDetails.cacheHit')}
- - {`${cacheHit}%`}
-
- )}
+
- {t('message.turnUsage.total')}
- {formatExactCount(usage.totalTokens, t)}
-
+