@veltra/ai 2.1.10 → 2.1.11

package/dist/providers/types.d.ts

@@ -18,6 +18,8 @@ export interface ChatModel {
   reasoningLevels?: ChatReasoningLevel[];
   /** 默认推理等级（须落在 reasoningLevels 内） */
   defaultReasoningLevel?: string;
+  /** 上下文窗口上限（token）。配置后输入栏用量环按「最近一次请求总 token / 上限」显示占比 */
+  contextWindow?: number;
 }
 /** 模型服务商配置（内嵌 models） */
 export interface ChatProvider {

package/dist/types/ai-chat.d.ts

@@ -42,7 +42,8 @@ export interface AiChatProps {
   rendererProps?: Record<string, unknown>;
   /**
    * 是否展示 token 用量明细（缓存命中 / 未命中；缺字段不显示）。
-   * 默认 false：仅在拿到 usage 时显示会话累计「总 token」。接口未返回 usage 时不展示。
+   * 默认 false：用量环明细面板只列 总 / 输入 / 输出；true 时追加有数据的缓存项。
+   * 接口未返回 usage 时不展示用量环。
    */
   tokenUsageDetail?: boolean;
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/ai",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"

package/src/chat/use-chat.ts

@@ -60,6 +60,8 @@ export function useChat(options: UseChatOptions) {
   const tokenUsage = ref<ChatTokenUsage | null>(null)
   /** 最近一轮用户对话（含工具多轮请求）的 token；该轮无 usage 时为 null */
   const lastTurnUsage = ref<ChatTokenUsage | null>(null)
+  /** 最近一次单次请求的 token（未跨轮累计），其 totalTokens 近似当前上下文占用 */
+  const lastRequestUsage = ref<ChatTokenUsage | null>(null)
 
   /** session 下由 jobs/snapshot 整体替换；函数 transport 保持空数组 */
   const jobs = ref<ChatJob[]>([])
@@ -344,6 +346,7 @@ export function useChat(options: UseChatOptions) {
             emit('tool-call', toolCall)
           },
           onUsage: (usage) => {
+            lastRequestUsage.value = usage
             lastTurnUsage.value = lastTurnUsage.value
               ? addTokenUsage(lastTurnUsage.value, usage)
               : usage
@@ -462,6 +465,7 @@ export function useChat(options: UseChatOptions) {
     if (session()) {
       sessionRuntime.resetLocal()
       lastTurnUsage.value = null
+      lastRequestUsage.value = null
       return
     }
     abort()
@@ -469,6 +473,7 @@ export function useChat(options: UseChatOptions) {
     messages.value = []
     tokenUsage.value = null
     lastTurnUsage.value = null
+    lastRequestUsage.value = null
     snapshot()
   }
 
@@ -481,6 +486,7 @@ export function useChat(options: UseChatOptions) {
     jobs,
     tokenUsage,
     lastTurnUsage,
+    lastRequestUsage,
     projections,
     title,
     pendingApprovals,

package/src/components/ai-chat/__test__/ai-chat.test.ts

@@ -1234,7 +1234,7 @@ describe('UAiChat', () => {
     expect(
       host.querySelector('.u-ai-chat__input-clear-wrap')?.classList.contains('is-disabled')
     ).toBe(true)
-    expect(host.querySelector('.u-ai-chat__input-usage')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__usage-trigger')).toBeFalsy()
 
     chat.value?.send('你好')
     await vi.waitFor(() => {
@@ -1272,7 +1272,21 @@ describe('UAiChat', () => {
     unmount()
   })
 
-  it('有 usage 时默认只显示总 token，tokenUsageDetail 追加缓存命中/未命中', async () => {
+  async function openUsagePanel(host: HTMLElement) {
+    const trigger = host.querySelector<HTMLElement>('.u-ai-chat__usage-trigger')
+    trigger?.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
+    await nextTick()
+    await nextTick()
+    const panel = document.body.querySelector('.u-ai-chat__usage-panel')
+    const rows: Record<string, string> = {}
+    panel?.querySelectorAll('.u-ai-chat__usage-row').forEach((row) => {
+      const label = row.querySelector('.u-ai-chat__usage-label')?.textContent ?? ''
+      rows[label] = row.querySelector('.u-ai-chat__usage-value')?.textContent ?? ''
+    })
+    return rows
+  }
+
+  it('有 usage 时显示用量环，悬停弹出明细；tokenUsageDetail 追加缓存命中/未命中', async () => {
     const usageTransport: ChatTransport = (_req, handlers) => {
       handlers.onTextDelta('ok')
       handlers.onUsage?.({
@@ -1285,27 +1299,28 @@ describe('UAiChat', () => {
     }
 
     const compact = mountAiChat({ transport: usageTransport })
+    // 未收到 usage 时不渲染用量环
+    expect(compact.host.querySelector('.u-ai-chat__usage-trigger')).toBeFalsy()
     compact.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(compact.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe('总 token 12')
+      expect(compact.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
-    expect(compact.host.querySelector('.u-ai-chat__input-usage')?.textContent).not.toContain(
-      '缓存命中'
-    )
+    const compactRows = await openUsagePanel(compact.host)
+    expect(compactRows['总 token']).toBe('12')
+    expect(compactRows['输入']).toBe('10')
+    expect(compactRows['输出']).toBe('2')
+    expect(compactRows['缓存命中']).toBeUndefined()
     compact.unmount()
 
     const detail = mountAiChat({ transport: usageTransport, tokenUsageDetail: true })
     detail.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(detail.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe(
-        '总 token 12 · 缓存命中 4 · 缓存未命中 6'
-      )
+      expect(detail.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
-    const text = detail.host.querySelector('.u-ai-chat__input-usage')?.textContent ?? ''
-    expect(text).not.toContain('本次')
-    expect(text).not.toContain('累计')
-    expect(text).not.toContain('输入')
-    expect(text).not.toContain('输出')
+    const detailRows = await openUsagePanel(detail.host)
+    expect(detailRows['总 token']).toBe('12')
+    expect(detailRows['缓存命中']).toBe('4')
+    expect(detailRows['缓存未命中']).toBe('6')
     detail.unmount()
   })
 
@@ -1323,10 +1338,12 @@ describe('UAiChat', () => {
     const scaled = mountAiChat({ transport: scaledTransport, tokenUsageDetail: true })
     scaled.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(scaled.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe(
-        '总 token 1.5K · 缓存命中 1K · 缓存未命中 1M'
-      )
+      expect(scaled.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
+    const scaledRows = await openUsagePanel(scaled.host)
+    expect(scaledRows['总 token']).toBe('1.5K')
+    expect(scaledRows['缓存命中']).toBe('1K')
+    expect(scaledRows['缓存未命中']).toBe('1M')
     scaled.unmount()
 
     const noCacheTransport: ChatTransport = (_req, handlers) => {
@@ -1336,12 +1353,33 @@ describe('UAiChat', () => {
     const noCache = mountAiChat({ transport: noCacheTransport, tokenUsageDetail: true })
     noCache.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(noCache.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe('总 token 12')
+      expect(noCache.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
-    expect(noCache.host.querySelector('.u-ai-chat__input-usage')?.textContent).not.toContain('缓存')
+    const noCacheRows = await openUsagePanel(noCache.host)
+    expect(noCacheRows['总 token']).toBe('12')
+    expect(Object.keys(noCacheRows).some((label) => label.includes('缓存'))).toBe(false)
     noCache.unmount()
   })
 
+  it('模型声明 contextWindow 时用量环按上下文占用填充，面板展示占比', async () => {
+    const usageTransport: ChatTransport = (_req, handlers) => {
+      handlers.onTextDelta('ok')
+      handlers.onUsage?.({ promptTokens: 600, completionTokens: 400, totalTokens: 1000 })
+    }
+    const models: ChatModelOption[] = [
+      { id: 'm1', label: 'M1', providerId: 'p1', contextWindow: 10000 }
+    ]
+    const { host, chat, unmount } = mountAiChat({ transport: usageTransport, models, model: 'm1' })
+    chat.value?.send('hi')
+    await vi.waitFor(() => {
+      const ring = host.querySelector('.u-ai-chat__usage-ring-value')
+      expect(ring?.getAttribute('stroke-dasharray')).toBe('10 100')
+    })
+    const rows = await openUsagePanel(host)
+    expect(rows['上下文占用']).toBe('1K / 10K · 10%')
+    unmount()
+  })
+
   const UNKNOWN_TOOL = 'totally-unknown-tool-xyz'
 
   function seedUnknownCall(init: Partial<ChatToolCall> = {}) {

package/src/components/ai-chat/ai-chat.vue

@@ -53,6 +53,7 @@
         :max-attachment-size="maxAttachmentSize"
         :clearable="clearable"
         :token-usage="tokenUsage"
+        :last-request-usage="lastRequestUsage"
         :token-usage-detail="tokenUsageDetail"
         @send="handleSend"
         @abort="abort"
@@ -133,6 +134,7 @@ const {
   jobs,
   tokenUsage,
   lastTurnUsage,
+  lastRequestUsage,
   pendingApprovals,
   pendingQuestion,
   send,

package/src/components/ai-chat/chat-input.vue

@@ -46,14 +46,48 @@
             </template>
           </UPopConfirm>
         </span>
-
-        <span v-if="tokenUsage" :class="cls.e('input-usage')" :title="usageText">
-          {{ usageText }}
-        </span>
       </div>
 
-      <!-- 右簇：模型/推理选择 → 发送或停止（互斥） -->
+      <!-- 右簇：token 用量环 → 模型/推理选择 → 发送或停止（互斥） -->
       <div :class="cls.e('input-toolbar-right')">
+        <UDropdown
+          v-if="tokenUsage"
+          width="auto"
+          min-width="200px"
+          :content-class="cls.e('usage-panel')"
+        >
+          <template #trigger>
+            <button type="button" :class="cls.e('usage-trigger')" aria-label="Token 用量">
+              <svg :class="cls.e('usage-ring')" viewBox="0 0 36 36">
+                <circle :class="cls.e('usage-ring-track')" cx="18" cy="18" r="15.5" />
+                <circle
+                  :class="cls.e('usage-ring-value')"
+                  cx="18"
+                  cy="18"
+                  r="15.5"
+                  pathLength="100"
+                  transform="rotate(-90 18 18)"
+                  :stroke-dasharray="`${contextPercent ?? 0} 100`"
+                  :stroke-linecap="contextPercent ? 'round' : undefined"
+                />
+              </svg>
+            </button>
+          </template>
+
+          <template #content>
+            <div :class="cls.e('usage-list')">
+              <div v-if="contextText" :class="cls.e('usage-row')">
+                <span :class="cls.e('usage-label')">上下文占用</span>
+                <span :class="cls.e('usage-value')">{{ contextText }}</span>
+              </div>
+              <div v-for="row in usageRows" :key="row.label" :class="cls.e('usage-row')">
+                <span :class="cls.e('usage-label')">{{ row.label }}</span>
+                <span :class="cls.e('usage-value')">{{ row.value }}</span>
+              </div>
+            </div>
+          </template>
+        </UDropdown>
+
         <ModelPicker
           v-if="models?.length"
           v-model:model="model"
@@ -89,7 +123,7 @@
 </template>
 
 <script lang="ts" setup>
-import { UButton, UFilePicker, UIcon, UPopConfirm } from '@veltra/desktop'
+import { UButton, UDropdown, UFilePicker, UIcon, UPopConfirm } from '@veltra/desktop'
 import { Attach, Clear, Close, Up } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { computed, inject, nextTick, ref, shallowRef, watch } from 'vue'
@@ -116,6 +150,8 @@ const props = defineProps<{
   clearable?: boolean
   /** 会话累计 token；无 usage 时为 null，不展示 */
   tokenUsage?: ChatTokenUsage | null
+  /** 最近一次单次请求的 token（未累计）；配合模型 contextWindow 计算用量环占比 */
+  lastRequestUsage?: ChatTokenUsage | null
   /** 是否展示缓存命中 / 未命中（默认只显示总 token） */
   tokenUsageDetail?: boolean
 }>()
@@ -159,20 +195,52 @@ const formatTokenCount = (n: number) => {
   return scaled(n / 1_000_000, 'M')
 }
 
-/** 会话累计：总 token；明细再拼有数据的缓存项，缺字段不写 0 */
-const usageText = computed(() => {
+/** 百分比：最多 1 位小数，整数不写 `.0` */
+const formatPercent = (p: number) => {
+  const rounded = Math.round(p * 10) / 10
+  return `${Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1)}%`
+}
+
+/** 当前模型声明的上下文窗口；未声明则用量环不填充、面板不显示占用 */
+const contextWindow = computed(() => {
+  return props.models?.find((m) => m.id === model.value)?.contextWindow
+})
+
+/** 上下文占用百分比：最近一次请求总 token / 窗口上限；缺数据时为 null */
+const contextPercent = computed(() => {
+  const win = contextWindow.value
+  const total = props.lastRequestUsage?.totalTokens
+  if (!win || total == null) return null
+  return Math.min(100, (total / win) * 100)
+})
+
+/** 面板占用行文案：1.5K / 128K · 1.2% */
+const contextText = computed(() => {
+  const percent = contextPercent.value
+  const win = contextWindow.value
+  const total = props.lastRequestUsage?.totalTokens
+  if (percent == null || !win || total == null) return ''
+  return `${formatTokenCount(total)} / ${formatTokenCount(win)} · ${formatPercent(percent)}`
+})
+
+/** 明细面板行：总 / 输入 / 输出；明细开关下再拼有数据的缓存项，缺字段不写 0 */
+const usageRows = computed(() => {
   const usage = props.tokenUsage
-  if (!usage) return ''
-  const parts = [`总 token ${formatTokenCount(usage.totalTokens)}`]
+  if (!usage) return []
+  const rows = [
+    { label: '总 token', value: formatTokenCount(usage.totalTokens) },
+    { label: '输入', value: formatTokenCount(usage.promptTokens) },
+    { label: '输出', value: formatTokenCount(usage.completionTokens) }
+  ]
   if (props.tokenUsageDetail) {
     if (usage.cacheHitTokens != null) {
-      parts.push(`缓存命中 ${formatTokenCount(usage.cacheHitTokens)}`)
+      rows.push({ label: '缓存命中', value: formatTokenCount(usage.cacheHitTokens) })
     }
     if (usage.cacheMissTokens != null) {
-      parts.push(`缓存未命中 ${formatTokenCount(usage.cacheMissTokens)}`)
+      rows.push({ label: '缓存未命中', value: formatTokenCount(usage.cacheMissTokens) })
     }
   }
-  return parts.join(' · ')
+  return rows
 })
 
 /** 生成中提示用户消息将进入队列 */

package/src/components/ai-chat/format-duration.ts

@@ -0,0 +1,8 @@
+/** 格式化工作时长：整秒显示，≥60s 显示 Xm Ys */
+export const formatDuration = (ms: number): string => {
+  const seconds = Math.round(ms / 1000)
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  const rest = seconds % 60
+  return rest ? `${minutes}m ${rest}s` : `${minutes}m`
+}

package/src/components/ai-chat/message-item.vue

@@ -73,6 +73,9 @@
       </div>
 
       <div v-if="showActions" :class="cls.e('message-actions')">
+        <span v-if="duration != null" :class="cls.e('message-duration')">
+          用时 {{ formatDuration(duration) }}
+        </span>
         <UButton
           size="small"
           plain
@@ -107,6 +110,7 @@ import { computed, inject, nextTick, onBeforeUnmount, ref, useTemplateRef, watch
 
 import type { ChatMessage } from '../../chat/types'
 import { AiChatDIKey } from './di'
+import { formatDuration } from './format-duration'
 import ToolCallCard from './tool-call.vue'
 
 defineOptions({ name: 'UAiChatMessageItem' })
@@ -115,6 +119,8 @@ const props = defineProps<{
   message: ChatMessage
   /** 是否为最后一条可见消息（决定是否显示重新生成） */
   isLast: boolean
+  /** 本轮总用时（ms；仅 live 轮次有，历史回放无计时数据） */
+  duration?: number
   /** 透传给 MarkdownRender 的属性 */
   rendererProps?: Record<string, unknown>
 }>()

package/src/components/ai-chat/message-list.vue

@@ -2,6 +2,7 @@
   <div :class="cls.e('list-wrap')">
     <UScroll
       :class="cls.e('list')"
+      :content-class="cls.e('list-content')"
       ref="scrollRef"
       @scroll="handleScroll"
       @wheel.passive="handleWheel"
@@ -39,6 +40,7 @@
           v-if="turn.answerMsg"
           :message="turn.answerMsg"
           :is-last="turn.isLast"
+          :duration="turnDurations.get(turn.key)"
           :renderer-props="rendererProps"
           @respond="(id, approved) => emit('respond', id, approved)"
           @regenerate="emit('regenerate')"
@@ -48,7 +50,13 @@
       <!-- 工作中：活体球从输入框上方跳到最新会话下面；结束停留后再跳回 -->
       <div v-if="showWorking" :class="[cls.e('working'), bem.is('leaving', workingLeaving)]">
         <UAiOrb ref="workingOrb" :size="ORB_SIZE" :status="workingOrbStatus" />
-        <span v-if="running" :class="[cls.e('working-text'), 'u-shine']">工作中…</span>
+        <template v-if="running">
+          <span :class="[cls.e('working-text'), 'u-shine']">工作中…</span>
+          <span :class="cls.e('working-time')">{{ formatDuration(elapsedMs) }}</span>
+        </template>
+        <span v-else-if="lastTurnDuration != null" :class="cls.e('working-time')">
+          用时 {{ formatDuration(lastTurnDuration) }}
+        </span>
       </div>
     </UScroll>
 
@@ -115,6 +123,7 @@ import type { ChatMessage } from '../../chat/types'
 import type { AiOrbExposed, AiOrbReaction, AiOrbStatus } from '../../types/ai-orb'
 import UAiOrb from '../ai-orb/ai-orb.vue'
 import { AiChatDIKey } from './di'
+import { formatDuration } from './format-duration'
 import MessageItem from './message-item.vue'
 import TurnProcess from './turn-process.vue'
 
@@ -262,6 +271,26 @@ const clearJumpTimers = () => {
   clearTimeout(jumpTimer)
 }
 
+/** 工作计时的起算时间戳（running 升起时记录） */
+let workStartAt = 0
+/** 进行中的已逝时长（100ms 跳动刷新） */
+const elapsedMs = ref(0)
+let tickTimer: ReturnType<typeof setInterval> | undefined
+
+/** 各轮次总用时（key 同 turns；仅 live 轮次有，历史回放无计时数据） */
+const turnDurations = shallowRef(new Map<string, number>())
+
+const stopTick = () => {
+  clearInterval(tickTimer)
+  tickTimer = undefined
+}
+
+/** 收尾停留期间展示的末轮总用时 */
+const lastTurnDuration = computed(() => {
+  const last = turns.value[turns.value.length - 1]
+  return last ? turnDurations.value.get(last.key) : undefined
+})
+
 /** 列表末尾的工作球：生成中 / 收尾停留 / 跳回过渡 */
 const showWorking = computed(() => !!(props.running || finishing.value || workingLeaving.value))
 /** 输入框上方的空闲欢迎：含工作开始时的缩小离开帧 */
@@ -308,6 +337,13 @@ watch(
     if (running) {
       // 工作开始：立即从输入框上方跳到列表，无停留
       clearJumpTimers()
+      // 工作计时开始：100ms 跳动刷新已逝时长
+      workStartAt = Date.now()
+      elapsedMs.value = 0
+      stopTick()
+      tickTimer = setInterval(() => {
+        elapsedMs.value = Date.now() - workStartAt
+      }, 100)
       const idleWasVisible = !prev && !finishing.value && !workingLeaving.value
       finishing.value = false
       workingLeaving.value = false
@@ -324,6 +360,15 @@ watch(
     }
     if (!prev) return
 
+    stopTick()
+    // 记录本轮总用时（key 同 turns：regenerate 同 key 覆盖，队列接续各自计时）
+    const lastTurn = turns.value[turns.value.length - 1]
+    if (lastTurn) {
+      const next = new Map(turnDurations.value)
+      next.set(lastTurn.key, Date.now() - workStartAt)
+      turnDurations.value = next
+    }
+
     // 清除会话后列表已空：跳过结束停留，立刻回到欢迎区
     if (visibleMessages.value.length === 0) {
       finishing.value = false
@@ -363,6 +408,7 @@ watch(
   (len) => {
     if (len > 0) return
     clearJumpTimers()
+    turnDurations.value = new Map()
     finishing.value = false
     workingLeaving.value = false
     idleLeaving.value = false
@@ -383,6 +429,7 @@ watch(
 onBeforeUnmount(() => {
   stopWelcomeRotation()
   clearJumpTimers()
+  stopTick()
 })
 
 const scrollRef = shallowRef<{ scrollTo: (position: ScrollPosition) => void }>()

package/src/components/ai-chat/style.scss

@@ -178,12 +178,14 @@ $root-name: ai-chat;
     color: fn.use-var(text-color, assist);
   }
 
+  // 负边距吃掉主列横向 padding、顶到主列边缘：滚动条出现在容器右侧而非贴着会话列表；
+  // 800px 限宽下沉到 UScroll 内容层（__list-content）
   @include m.e(list-wrap) {
     position: relative;
     flex: 1;
     min-height: 0;
-    width: 100%;
-    max-width: 800px;
+    width: calc(100% + #{fn.use-var(gap, default)} * 2);
+    margin: 0 calc(#{fn.use-var(gap, default)} * -1);
     display: flex;
     flex-direction: column;
     // 纵向留出呼吸位：首条消息不贴容器顶，滚动时内容不顶边；横向由各消息自身 padding 控制
@@ -191,6 +193,16 @@ $root-name: ai-chat;
     box-sizing: border-box;
   }
 
+  // UScroll 内容层：左右 gap 补偿 list-wrap 负边距，宽屏内层 800px、窄屏与主列内容盒同宽，
+  // 消息区视觉几何与限宽在 list-wrap 时一致
+  @include m.e(list-content) {
+    width: 100%;
+    max-width: calc(800px + #{fn.use-var(gap, default)} * 2);
+    margin: 0 auto;
+    padding: 0 fn.use-var(gap, default);
+    box-sizing: border-box;
+  }
+
   @include m.e(list) {
     flex: 1;
     min-height: 0;
@@ -200,6 +212,8 @@ $root-name: ai-chat;
   @include m.e(welcome) {
     flex-shrink: 0;
     width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
     height: 48px;
     @include m.flex(flex, flex-start, center);
     color: fn.use-var(text-color, assist);
@@ -303,11 +317,11 @@ $root-name: ai-chat;
     transform: translateY(-6px);
   }
 
-  // 生成中的统一工作状态指示（列表末尾）
+  // 生成中的统一工作状态指示（列表末尾）；横向定位由 __list-content 的 padding 提供
   @include m.e(working) {
     @include m.flex(flex, flex-start, center);
     gap: fn.use-var(gap, small);
-    padding: 0 fn.use-var(gap, default) fn.use-var(gap, small);
+    padding: 0 0 fn.use-var(gap, small);
     width: fit-content;
 
     // 工作开始：立即从 0 放大（无延时），与输入框上方缩小形成对向跳
@@ -334,6 +348,13 @@ $root-name: ai-chat;
     font-size: fn.use-var(font-size-main, small);
   }
 
+  // 工作计时 / 收尾停留期间的总用时
+  @include m.e(working-time) {
+    font-size: fn.use-var(font-size-main, small);
+    color: fn.use-var(text-color, assist);
+    font-variant-numeric: tabular-nums;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .u-#{$root-name}__welcome.is-enter .u-ai-orb,
     .u-#{$root-name}__working .u-ai-orb {
@@ -480,6 +501,14 @@ $root-name: ai-chat;
     gap: fn.use-var(gap, small);
   }
 
+  // 答案操作区前的本轮总用时
+  @include m.e(message-duration) {
+    align-self: center;
+    color: fn.use-var(text-color, assist);
+    font-size: fn.use-var(font-size-main, small);
+    font-variant-numeric: tabular-nums;
+  }
+
   // 思考过程
   @include m.e(reasoning) {
     margin-bottom: 4px;
@@ -1151,12 +1180,32 @@ $root-name: ai-chat;
     }
   }
 
-  @include m.e(input-usage) {
-    min-width: 0;
-    @include m.ellipsis;
-    font-size: fn.use-var(font-size-main, small);
-    color: fn.use-var(text-color, assist);
-    line-height: 1.4;
+  @include m.e(usage-trigger) {
+    @include m.flex(inline-flex, center, center);
+    flex-shrink: 0;
+    padding: 2px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+  }
+
+  @include m.e(usage-ring) {
+    display: block;
+    width: 14px;
+    height: 14px;
+  }
+
+  @include m.e(usage-ring-track) {
+    fill: none;
+    stroke: fn.use-var(border-color);
+    stroke-width: 5;
+  }
+
+  @include m.e(usage-ring-value) {
+    fill: none;
+    stroke: fn.use-var(color, primary);
+    stroke-width: 5;
+    transition: stroke-dasharray 0.3s ease;
   }
 
   @include m.e(input-stop) {
@@ -1201,6 +1250,29 @@ $root-name: ai-chat;
   }
 }
 
+// 用量明细面板经 teleport 挂载到 popper 容器，不处于 .u-ai-chat 内，需独立定义
+.u-#{$root-name}__usage-panel {
+  padding: 6px 4px;
+  user-select: none;
+
+  .u-#{$root-name}__usage-row {
+    @include m.flex(flex, space-between, center);
+    gap: 24px;
+    padding: 3px 8px;
+    font-size: fn.use-var(font-size-main, small);
+    line-height: 1.6;
+  }
+
+  .u-#{$root-name}__usage-label {
+    color: fn.use-var(text-color, assist);
+  }
+
+  .u-#{$root-name}__usage-value {
+    color: fn.use-var(text-color, main);
+    font-variant-numeric: tabular-nums;
+  }
+}
+
 // 模型选择面板经 teleport 挂载到 popper 容器，不处于 .u-ai-chat 内，需独立定义
 .u-#{$root-name}__model-panel {
   padding: 4px;

package/src/providers/types.ts

@@ -18,6 +18,8 @@ export interface ChatModel {
   reasoningLevels?: ChatReasoningLevel[]
   /** 默认推理等级（须落在 reasoningLevels 内） */
   defaultReasoningLevel?: string
+  /** 上下文窗口上限（token）。配置后输入栏用量环按「最近一次请求总 token / 上限」显示占比 */
+  contextWindow?: number
 }
 
 /** 模型服务商配置（内嵌 models） */

package/src/types/ai-chat.ts

@@ -52,7 +52,8 @@ export interface AiChatProps {
   rendererProps?: Record<string, unknown>
   /**
    * 是否展示 token 用量明细（缓存命中 / 未命中；缺字段不显示）。
-   * 默认 false：仅在拿到 usage 时显示会话累计「总 token」。接口未返回 usage 时不展示。
+   * 默认 false：用量环明细面板只列 总 / 输入 / 输出；true 时追加有数据的缓存项。
+   * 接口未返回 usage 时不展示用量环。
    */
   tokenUsageDetail?: boolean
   /**