@demicodes/web-ui 0.3.1

package/src/agent/AgentTabBar.vue

@@ -0,0 +1,422 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import { AddLine } from '@mingcute/vue/add'
+import { reportError } from '@demicodes/web-ui/infra/errors'
+import { useContextMenuOwner } from '@demicodes/web-ui/composables/useContextMenuOwner'
+import { t } from '@demicodes/web-ui/infra/i18n'
+import { appOverlayStore } from '@demicodes/web-ui/overlay/appOverlay'
+import Popover from '@demicodes/web-ui/ui/Popover.vue'
+import Menu from '@demicodes/web-ui/ui/Menu.vue'
+import MenuItem from '@demicodes/web-ui/ui/MenuItem.vue'
+import MenuDivider from '@demicodes/web-ui/ui/MenuDivider.vue'
+import Tooltip from '@demicodes/web-ui/ui/Tooltip.vue'
+import { useAgentWorkspace } from './workspace'
+import { conversationStatus } from './conversation-status'
+import type { ConversationState } from './types'
+import AgentTabItem from './AgentTabItem.vue'
+import ConversationListDropdown from './ConversationListDropdown.vue'
+
+const DRAG_THRESHOLD = 3
+
+const props = defineProps<{
+  tabs: ConversationState[]
+  allConversations: ConversationState[]
+  activeTabId: string | null
+}>()
+
+const workspace = useAgentWorkspace()
+
+const localTabs = ref<ConversationState[]>([...props.tabs])
+const isDragging = ref(false)
+const containerRef = ref<HTMLElement>()
+const dragIdx = ref(-1)
+const dragDeltaX = ref(0)
+const tabShifts = ref<number[]>([])
+const closingTabIds = ref(new Set<string>())
+const enteringTabIds = ref(new Set<string>())
+const isSettling = ref(false)
+
+const focusedTabId = ref<string | null>(null)
+const pendingRenameTabId = ref<string | null>(null)
+const renameValue = ref('')
+
+let startX = 0
+let tabRects: DOMRect[] = []
+let hasDragged = false
+let currentNewIdx = -1
+let closeTimer: ReturnType<typeof setTimeout> | null = null
+let settleTimer: ReturnType<typeof setTimeout> | null = null
+
+const {
+  isOpen: isContextMenuOpen,
+  anchorX: contextMenuX,
+  anchorY: contextMenuY,
+  open: openContextMenu,
+  close: closeContextMenu,
+} = useContextMenuOwner(() => {
+  focusedTabId.value = null
+})
+
+const focusedTabIndex = computed(() =>
+  localTabs.value.findIndex((tab) => tab.id === (focusedTabId.value ?? props.activeTabId)),
+)
+const hasOtherTabs = computed(() => localTabs.value.length > 1)
+const hasTabsToLeft = computed(() => focusedTabIndex.value > 0)
+const hasTabsToRight = computed(() => focusedTabIndex.value < localTabs.value.length - 1)
+
+watch(() => props.tabs, (newTabs, oldTabs) => {
+  if (isDragging.value) return
+
+  if (oldTabs) {
+    const oldIds = new Set(oldTabs.map((tab) => tab.id))
+    for (const tab of newTabs) {
+      if (!oldIds.has(tab.id)) enteringTabIds.value.add(tab.id)
+    }
+  }
+
+  if (closingTabIds.value.size > 0) {
+    const newTabIds = new Set(newTabs.map((tab) => tab.id))
+    closingTabIds.value = new Set([...closingTabIds.value].filter((id) => newTabIds.has(id)))
+  }
+
+  localTabs.value = [...newTabs]
+
+  if (enteringTabIds.value.size > 0) {
+    nextTick(() => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          enteringTabIds.value = new Set()
+        })
+      })
+    })
+  }
+}, { deep: true, immediate: true })
+
+watch(pendingRenameTabId, (id) => {
+  if (!id) return
+  const tab = localTabs.value.find((entry) => entry.id === id)
+  if (!tab) return
+  renameValue.value = tab.title
+})
+
+// ── Navigation ──
+
+function navigateToConversation(conversationId: string) {
+  workspace.setActive(conversationId)
+}
+
+// ── Tab operations ──
+
+function handleCreateTab(afterConversationId?: string) {
+  workspace.createConversation(afterConversationId ? { afterId: afterConversationId } : {})
+}
+
+function handleCloseTabs(conversationIds: string[]) {
+  if (conversationIds.length === 0) return
+  if (closingTabIds.value.size > 0) finishClose()
+
+  closingTabIds.value = new Set(conversationIds)
+  closeTimer = setTimeout(finishClose, 300)
+}
+
+function handleRenameTab(conversationId: string, newTitle: string) {
+  workspace.renameConversation(conversationId, newTitle)
+}
+
+// The history menu shows every persisted conversation (from the server) plus
+// any open tab not yet persisted; selecting one opens it (resuming if needed).
+const historyConversations = computed(() => {
+  const byId = new Map<string, { id: string; title: string; createdAt: string }>()
+  for (const summary of workspace.serverConversations.value) byId.set(summary.id, summary)
+  for (const tab of props.allConversations) if (!byId.has(tab.id)) byId.set(tab.id, tab)
+  return [...byId.values()]
+})
+
+function handleOpenConversation(conversationId: string) {
+  workspace.openConversation({ id: conversationId })
+}
+
+// ── Context menu ──
+
+function handleTabContextMenu(event: MouseEvent, tabId: string) {
+  if (isDragging.value || isSettling.value) return
+  focusedTabId.value = tabId
+  openContextMenu(event)
+}
+
+function handleCopyConversationId() {
+  const id = focusedTabId.value ?? props.activeTabId
+  if (id) void navigator.clipboard.writeText(id)
+}
+
+function handleNewTabToRight() {
+  const tabId = focusedTabId.value ?? props.activeTabId
+  if (tabId) handleCreateTab(tabId)
+}
+
+function handleRenameFocused() {
+  pendingRenameTabId.value = focusedTabId.value ?? props.activeTabId
+}
+
+function handleCloseFocused() {
+  const tabId = focusedTabId.value ?? props.activeTabId
+  if (tabId) handleCloseTab(tabId)
+}
+
+function handleCloseOthers() {
+  const tabId = focusedTabId.value ?? props.activeTabId
+  handleCloseTabs(localTabs.value.filter((tab) => tab.id !== tabId).map((tab) => tab.id))
+}
+
+function handleCloseToLeft() {
+  handleCloseTabs(localTabs.value.slice(0, focusedTabIndex.value).map((tab) => tab.id))
+}
+
+function handleCloseToRight() {
+  handleCloseTabs(localTabs.value.slice(focusedTabIndex.value + 1).map((tab) => tab.id))
+}
+
+function handleCloseAll() {
+  handleCloseTabs(localTabs.value.map((tab) => tab.id))
+}
+
+// ── Rename ──
+
+function submitRename() {
+  const id = pendingRenameTabId.value
+  if (!id) return
+  const tab = localTabs.value.find((entry) => entry.id === id)
+  const trimmed = renameValue.value.trim()
+  pendingRenameTabId.value = null
+  if (trimmed && trimmed !== tab?.title) {
+    handleRenameTab(id, trimmed)
+  }
+}
+
+function cancelRename() {
+  pendingRenameTabId.value = null
+}
+
+// ── Tab close animation ──
+
+function handleCloseTab(tabId: string) {
+  if (closingTabIds.value.size > 0) finishClose()
+
+  closingTabIds.value = new Set([tabId])
+  closeTimer = setTimeout(finishClose, 300)
+}
+
+function finishClose() {
+  if (closeTimer) {
+    clearTimeout(closeTimer)
+    closeTimer = null
+  }
+  if (closingTabIds.value.size === 0) return
+
+  const ids = [...closingTabIds.value]
+  closingTabIds.value = new Set()
+
+  const closedSet = new Set(ids)
+  localTabs.value = localTabs.value.filter((tab) => !closedSet.has(tab.id))
+
+  void closeTabs(ids)
+}
+
+async function closeTabs(conversationIds: readonly string[]) {
+  try {
+    for (const conversationId of conversationIds) {
+      await workspace.closeConversation(conversationId)
+    }
+  } catch (error) {
+    localTabs.value = [...props.tabs]
+    reportError('Failed to close conversation tabs', error, { userVisible: true })
+  }
+}
+
+function handleTransitionEnd(event: TransitionEvent, tabId: string) {
+  if (!closingTabIds.value.has(tabId)) return
+  if (event.propertyName !== 'max-width') return
+  finishClose()
+}
+
+// ── Drag ──
+
+function getTabShift(index: number): number {
+  if (!isDragging.value && !isSettling.value) return 0
+  return index === dragIdx.value ? dragDeltaX.value : (tabShifts.value[index] ?? 0)
+}
+
+function handlePointerDown(event: PointerEvent, index: number) {
+  if (event.button !== 0) return
+  if (closingTabIds.value.size > 0) return
+  if (isSettling.value) return
+  const target = event.currentTarget as HTMLElement
+  target.setPointerCapture(event.pointerId)
+  startX = event.clientX
+  dragIdx.value = index
+  hasDragged = false
+  currentNewIdx = index
+  const children = containerRef.value!.children
+  tabRects = Array.from(children).map((el) => (el as HTMLElement).getBoundingClientRect())
+}
+
+function handlePointerMove(event: PointerEvent) {
+  if (dragIdx.value < 0 || isSettling.value) return
+
+  const deltaX = event.clientX - startX
+  if (!hasDragged && Math.abs(deltaX) < DRAG_THRESHOLD) return
+
+  if (!hasDragged) {
+    hasDragged = true
+    isDragging.value = true
+    tabShifts.value = new Array(localTabs.value.length).fill(0)
+  }
+
+  dragDeltaX.value = deltaX
+
+  const draggedRect = tabRects[dragIdx.value]!
+  const draggedLeft = draggedRect.left + deltaX
+  const draggedRight = draggedRect.right + deltaX
+  const draggedWidth = draggedRect.width
+  const shifts = new Array(localTabs.value.length).fill(0)
+  let newIdx = dragIdx.value
+
+  for (let i = 0; i < tabRects.length; i++) {
+    if (i === dragIdx.value) continue
+    const otherCenter = tabRects[i]!.left + tabRects[i]!.width / 2
+
+    if (i > dragIdx.value && draggedRight > otherCenter) {
+      shifts[i] = -draggedWidth
+      newIdx = Math.max(newIdx, i)
+    } else if (i < dragIdx.value && draggedLeft < otherCenter) {
+      shifts[i] = draggedWidth
+      newIdx = Math.min(newIdx, i)
+    }
+  }
+
+  tabShifts.value = shifts
+  currentNewIdx = newIdx
+}
+
+function handlePointerUp() {
+  if (dragIdx.value < 0 || isSettling.value) return
+
+  const idx = dragIdx.value
+
+  if (!hasDragged) {
+    dragIdx.value = -1
+    navigateToConversation(localTabs.value[idx]!.id)
+    return
+  }
+
+  isSettling.value = true
+
+  let targetDeltaX = 0
+  if (currentNewIdx !== idx) {
+    if (currentNewIdx > idx) {
+      targetDeltaX = tabRects[currentNewIdx]!.right - tabRects[idx]!.right
+    } else {
+      targetDeltaX = tabRects[currentNewIdx]!.left - tabRects[idx]!.left
+    }
+  }
+
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      dragDeltaX.value = targetDeltaX
+    })
+  })
+
+  settleTimer = setTimeout(finishSettle, 140)
+}
+
+function finishSettle() {
+  if (settleTimer) {
+    clearTimeout(settleTimer)
+    settleTimer = null
+  }
+
+  const idx = dragIdx.value
+  const newIdx = currentNewIdx
+
+  isSettling.value = false
+  isDragging.value = false
+  dragIdx.value = -1
+  dragDeltaX.value = 0
+  tabShifts.value = []
+
+  if (newIdx !== idx && idx >= 0) {
+    const [tab] = localTabs.value.splice(idx, 1)
+    localTabs.value.splice(newIdx, 0, tab!)
+    workspace.reorderTabs(localTabs.value.map((entry) => entry.id))
+  }
+}
+</script>
+
+<template>
+  <div class="flex h-11 shrink-0 items-center bg-surface-base px-2">
+    <div ref="containerRef" class="titlebar-no-drag flex min-w-0 items-center gap-0.5 overflow-x-auto scrollbar-hidden">
+      <AgentTabItem
+        v-for="(tab, index) in localTabs"
+        :key="tab.id"
+        :tab="tab"
+        :is-active="tab.id === activeTabId"
+        :status="conversationStatus(tab)"
+        :provider-icon-id="tab.model.providerId"
+        :is-closing="closingTabIds.has(tab.id)"
+        :is-entering="enteringTabIds.has(tab.id)"
+        :is-dragging="isDragging"
+        :is-drag-target="isDragging && index === dragIdx"
+        :is-settling="isSettling"
+        :shift="getTabShift(index)"
+        :is-renaming="pendingRenameTabId === tab.id"
+        :rename-value="renameValue"
+        @pointerdown="handlePointerDown($event, index)"
+        @pointermove="handlePointerMove"
+        @pointerup="handlePointerUp"
+        @lostpointercapture="handlePointerUp"
+        @transitionend="handleTransitionEnd($event, tab.id)"
+        @contextmenu="handleTabContextMenu($event, tab.id)"
+        @close="handleCloseTab(tab.id)"
+        @rename-submit="submitRename"
+        @rename-cancel="cancelRename"
+        @update:rename-value="renameValue = $event"
+      />
+    </div>
+    <Tooltip
+      content=""
+      class="titlebar-no-drag ml-1 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-fg-faint transition-colors hover:bg-hover hover:text-fg-muted"
+      @click="handleCreateTab()"
+    >
+      <AddLine :size="14" />
+    </Tooltip>
+    <span class="titlebar-no-drag ml-auto">
+      <ConversationListDropdown
+        :conversations="historyConversations"
+        :active-tab-id="activeTabId"
+        @select="handleOpenConversation"
+      />
+    </span>
+  </div>
+  <Popover
+    :overlay-store="appOverlayStore"
+    :is-open="isContextMenuOpen"
+    :anchor-x="contextMenuX"
+    :anchor-y="contextMenuY"
+    :offset="0"
+    @close="closeContextMenu"
+  >
+    <Menu @click="closeContextMenu">
+      <MenuItem :label="t('agent.tab.newTabRight')" @select="handleNewTabToRight" />
+      <MenuDivider />
+      <MenuItem :label="t('common.rename')" @select="handleRenameFocused" />
+      <MenuDivider />
+      <MenuItem :label="t('common.close')" @select="handleCloseFocused" />
+      <MenuItem :label="t('agent.tab.closeOthers')" :disabled="!hasOtherTabs" @select="handleCloseOthers" />
+      <MenuItem :label="t('agent.tab.closeToLeft')" :disabled="!hasTabsToLeft" @select="handleCloseToLeft" />
+      <MenuItem :label="t('agent.tab.closeToRight')" :disabled="!hasTabsToRight" @select="handleCloseToRight" />
+      <MenuItem :label="t('agent.tab.closeAll')" @select="handleCloseAll" />
+      <MenuDivider />
+      <MenuItem :label="t('agent.tab.copyConversationId')" @select="handleCopyConversationId" />
+    </Menu>
+  </Popover>
+</template>

package/src/agent/AgentTabItem.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import { CloseLine } from '@mingcute/vue/close'
+import type { ConversationState } from './types'
+import type { ConversationStatus } from './conversation-status'
+import ProviderIcon from './providers/ProviderIcon.vue'
+import Tooltip from '@demicodes/web-ui/ui/Tooltip.vue'
+import ConversationStatusDot from './ConversationStatusDot.vue'
+import { useAgentUiOptions } from './ui-options'
+
+const uiOptions = useAgentUiOptions()
+
+const TAB_TRANSITION = 'max-width 200ms ease-out, min-width 200ms ease-out, padding 200ms ease-out, opacity 150ms ease, background-color 150ms ease, color 150ms ease'
+const DRAG_TRANSITION = 'transform 120ms ease'
+
+const props = defineProps<{
+  tab: ConversationState
+  isActive: boolean
+  status: ConversationStatus
+  isClosing: boolean
+  isEntering: boolean
+  isDragging: boolean
+  isDragTarget: boolean
+  isSettling: boolean
+  shift: number
+  isRenaming: boolean
+  renameValue: string
+  providerIconId: string | null
+}>()
+
+const emit = defineEmits<{
+  pointerdown: [event: PointerEvent]
+  pointermove: [event: PointerEvent]
+  pointerup: []
+  lostpointercapture: []
+  transitionend: [event: TransitionEvent]
+  contextmenu: [event: MouseEvent]
+  close: []
+  renameSubmit: []
+  renameCancel: []
+  'update:renameValue': [value: string]
+}>()
+
+const renameInputRef = ref<HTMLInputElement | null>(null)
+
+watch(() => props.isRenaming, (val) => {
+  if (!val) return
+  nextTick(() => {
+    renameInputRef.value?.focus()
+    renameInputRef.value?.select()
+  })
+})
+
+const tabStyle = computed(() => {
+  const isCollapsed = props.isClosing || props.isEntering
+
+  if (props.isDragging || props.isSettling) {
+    return {
+      maxWidth: isCollapsed ? '0px' : '220px',
+      minWidth: isCollapsed ? '0px' : undefined,
+      paddingLeft: isCollapsed ? '0px' : undefined,
+      paddingRight: isCollapsed ? '0px' : undefined,
+      opacity: isCollapsed ? '0' : undefined,
+      transform: `translateX(${props.shift}px)`,
+      transition: (props.isSettling || !props.isDragTarget) ? DRAG_TRANSITION : undefined,
+    }
+  }
+
+  return isCollapsed
+    ? { maxWidth: '0px', minWidth: '0px', paddingLeft: '0px', paddingRight: '0px', opacity: '0', transition: TAB_TRANSITION }
+    : { maxWidth: '220px', transition: TAB_TRANSITION }
+})
+</script>
+
+<template>
+  <span
+    class="relative flex shrink cursor-pointer items-center overflow-hidden rounded-lg text-[13px] select-none touch-none"
+    :class="[
+      isActive
+        ? 'bg-surface text-fg-emphasis'
+        : isDragging && isDragTarget
+          ? 'bg-surface text-fg-body'
+          : 'text-fg-subtle',
+      !isDragging && 'group',
+      !isDragging && !isActive && 'hover:bg-surface hover:text-fg-body',
+      isDragging && isDragTarget && 'z-50',
+      isClosing && 'pointer-events-none',
+    ]"
+    :style="tabStyle"
+    @pointerdown="emit('pointerdown', $event)"
+    @pointermove="emit('pointermove', $event)"
+    @pointerup="emit('pointerup')"
+    @lostpointercapture="emit('lostpointercapture')"
+    @transitionend="emit('transitionend', $event)"
+    @contextmenu.prevent="emit('contextmenu', $event)"
+  >
+    <span
+      v-if="uiOptions.showTabIcon"
+      class="relative ml-1.5 flex shrink-0 items-center justify-center"
+    >
+      <ProviderIcon
+        v-if="providerIconId"
+        :provider-id="providerIconId"
+        :size="18"
+        class="text-fg-subtle"
+      />
+      <span
+        v-else
+        class="inline-block size-4 rounded-full bg-surface-raised"
+      />
+      <ConversationStatusDot
+        :status="status"
+      />
+    </span>
+    <input
+      v-if="isRenaming"
+      ref="renameInputRef"
+      :value="renameValue"
+      class="w-32 truncate bg-transparent pl-1.5 pr-1.5 py-1.5 outline-none"
+      @input="emit('update:renameValue', ($event.target as HTMLInputElement).value)"
+      @keydown.enter="emit('renameSubmit')"
+      @keydown.escape="emit('renameCancel')"
+      @blur="emit('renameSubmit')"
+      @pointerdown.stop
+      @click.stop
+    />
+    <Tooltip v-else :content="tab.title" placement="bottom" class="w-32 truncate whitespace-nowrap pl-1.5 pr-1.5 py-1.5">{{ tab.title }}</Tooltip>
+    <span
+      class="pointer-events-none absolute inset-y-0 right-0 z-10 flex w-9 items-center justify-end pr-1.5 opacity-0 transition-opacity group-hover:opacity-100"
+    >
+      <span
+        class="absolute inset-y-0 left-0 w-4"
+        :class="isActive
+          ? 'bg-linear-to-r from-surface/0 to-surface'
+          : 'bg-linear-to-r from-surface-base/0 to-surface-base group-hover:from-surface/0 group-hover:to-surface'"
+      />
+      <span
+        class="absolute inset-y-0 right-0 w-6"
+        :class="isActive ? 'bg-surface' : 'bg-surface-base group-hover:bg-surface'"
+      />
+      <span
+        class="pointer-events-auto relative z-10 flex size-5 shrink-0 items-center justify-center rounded text-fg-faint transition-colors hover:bg-hover hover:text-fg-body"
+        @pointerdown.stop
+        @click.stop="emit('close')"
+      >
+        <CloseLine :size="12" />
+      </span>
+    </span>
+  </span>
+</template>

package/src/agent/ContextUsageIndicator.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { TokenUsage } from '@demicodes/core'
+import IndeterminateSpinner from '@demicodes/web-ui/ui/IndeterminateSpinner.vue'
+import { t } from '@demicodes/web-ui/infra/i18n'
+
+const props = defineProps<{
+  conversationId?: string
+  usage?: TokenUsage | null
+  contextWindow?: number | null
+  inputLimit?: number | null
+  isCompacting?: boolean
+  isClickable?: boolean
+  instructionFiles?: string[]
+}>()
+
+const emit = defineEmits<{
+  compact: []
+}>()
+
+const isHovered = ref(false)
+
+const EMPTY_USAGE: TokenUsage = { inputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0 }
+
+const displayUsage = computed(() => props.usage ?? EMPTY_USAGE)
+const isUsageAvailable = computed(() => props.usage != null)
+const isTokenLimitAvailable = computed(() =>
+  (props.inputLimit != null && props.inputLimit > 0)
+  || (props.contextWindow != null && props.contextWindow > 0),
+)
+const usedTokens = computed(() =>
+  displayUsage.value.inputTokens + displayUsage.value.outputTokens
+  + (displayUsage.value.cacheReadTokens ?? 0) + (displayUsage.value.cacheWriteTokens ?? 0),
+)
+const effectiveLimit = computed(() => {
+  if (props.inputLimit != null && props.inputLimit > 0) return props.inputLimit
+  if (props.contextWindow != null && props.contextWindow > 0) return props.contextWindow
+  return 1
+})
+const ratio = computed(() => {
+  if (!isTokenLimitAvailable.value) return 0
+  return Math.min(usedTokens.value / effectiveLimit.value, 1)
+})
+const percentage = computed(() => Math.round(ratio.value * 100))
+
+const radius = 5.5
+const circumference = 2 * Math.PI * radius
+const strokeDashoffset = computed(() => circumference * (1 - ratio.value))
+
+const ringColor = computed(() => {
+  if (!isTokenLimitAvailable.value) return 'text-fg-subtle'
+  if (ratio.value >= 0.9) return 'text-on-danger'
+  if (ratio.value >= 0.7) return 'text-on-warning'
+  return 'text-fg-muted'
+})
+
+function formatTokens(tokens: number): string {
+  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`
+  if (tokens >= 1_000) return `${(tokens / 1_000).toFixed(1)}K`
+  return String(tokens)
+}
+
+function handleClick() {
+  if (!props.isClickable || props.isCompacting) return
+  emit('compact')
+}
+</script>
+
+<template>
+  <span
+    class="relative flex size-7 items-center justify-center rounded-lg transition-colors"
+    :class="[
+      isClickable && !isCompacting
+        ? 'cursor-pointer hover:bg-active'
+        : 'cursor-default',
+    ]"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+    @click="handleClick"
+  >
+    <IndeterminateSpinner v-if="isCompacting" />
+    <svg v-else width="14" height="14" viewBox="0 0 14 14" class="-rotate-90">
+      <circle
+        cx="7" cy="7" :r="radius"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        class="text-overlay/8"
+      />
+      <circle
+        cx="7" cy="7" :r="radius"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        :stroke-dasharray="String(circumference)"
+        :stroke-dashoffset="strokeDashoffset"
+        :class="ringColor"
+      />
+    </svg>
+
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div
+        v-if="isHovered"
+        class="absolute bottom-full left-1/2 z-50 -translate-x-1/2 cursor-default pb-2"
+        @click.stop
+      >
+        <div class="rounded-lg bg-surface px-3 py-2 text-xs leading-relaxed whitespace-nowrap ring-1 ring-line-subtle shadow-lg">
+          <template v-if="isCompacting">
+            <div class="text-fg-body">{{ t('agent.context.compacting') }}</div>
+          </template>
+          <template v-else>
+            <template v-if="isTokenLimitAvailable">
+              <div class="text-fg">{{ percentage }}% used <span class="text-fg-subtle">({{ formatTokens(usedTokens) }} / {{ formatTokens(effectiveLimit) }})</span></div>
+              <div v-if="!isUsageAvailable" class="mt-0.5 text-fg-subtle">{{ t('agent.context.noUsage') }}</div>
+            </template>
+            <div v-else class="text-fg-muted">{{ t('agent.context.unavailable') }}</div>
+            <div
+              v-for="file in instructionFiles"
+              :key="file"
+              class="mt-0.5 max-w-48 truncate text-fg-subtle direction-rtl text-left"
+            >{{ file }}</div>
+            <div v-if="isClickable" class="mt-1 text-fg-subtle">{{ t('agent.context.compactHint') }}</div>
+          </template>
+        </div>
+      </div>
+    </Transition>
+  </span>
+</template>