diff --git a/.changeset/web-usage-limits-panel.md b/.changeset/web-usage-limits-panel.md
new file mode 100644
index 0000000000..fb9400dcf6
--- /dev/null
+++ b/.changeset/web-usage-limits-panel.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": minor
+---
+
+web: Add a usage limits panel showing context size, managed weekly and rolling rate limits, and booster balance. Click the context ring in the composer toolbar to open it.
diff --git a/apps/kimi-web/src/api/daemon/client.ts b/apps/kimi-web/src/api/daemon/client.ts
index d8b1833edf..e85b286986 100644
--- a/apps/kimi-web/src/api/daemon/client.ts
+++ b/apps/kimi-web/src/api/daemon/client.ts
@@ -7,10 +7,12 @@ import { traceKeyEvent } from '../../debug/trace';
 import type {
   AppConfig,
   AppGoal,
+  AppManagedUsage,
   AppMessage,
   AppMessageRole,
   AppModel,
   AppProvider,
+  AppUsageRow,
   ProviderRefreshResult,
   AppSession,
   AppSkill,
@@ -35,7 +37,8 @@ import type {
   QuestionResponse,
 } from '../types';
 import { createAgentProjector } from './agentEventProjector';
-import { DaemonHttpClient } from './http';
+import { DaemonHttpClient, SERVER_AUTH_UNAUTHORIZED_CODE } from './http';
+import { DaemonApiError } from '../errors';
 import {
   toAppApprovalRequest,
   toAppConfig,
@@ -83,6 +86,8 @@ import type {
   WireSessionSnapshot,
   WireWorkspace,
   WireLogoutResult,
+  WireManagedUsage,
+  WireUsageRow,
 } from './wire';
 import { DaemonEventSocket } from './ws';
 
@@ -1359,6 +1364,58 @@ export class DaemonKimiWebApi implements KimiWebApi {
     return { loggedOut: data.logged_out };
   }
 
+  async getManagedUsage(): Promise<AppManagedUsage> {
+    let data: WireManagedUsage;
+    try {
+      data = await this.http.get<WireManagedUsage>('/oauth/usage');
+    } catch (error) {
+      // Degraded results keep the panel renderable: 404 = old backend without
+      // the route; server-auth 401 = re-login required; anything else is a
+      // plain fetch failure. Server-auth 401 also trips the global auth gate
+      // via the http layer, so the panel copy is mostly a fallback there.
+      if (error instanceof DaemonApiError) {
+        if (error.code === 404) {
+          return { kind: 'error', code: 'route_unavailable', message: error.message };
+        }
+        if (error.code === SERVER_AUTH_UNAUTHORIZED_CODE || error.code === 401) {
+          return { kind: 'error', code: 'unauthenticated', message: error.message };
+        }
+      }
+      return {
+        kind: 'error',
+        code: 'unavailable',
+        message: error instanceof Error ? error.message : String(error),
+      };
+    }
+    if (data.kind === 'error') {
+      return { kind: 'error', code: data.code, message: data.message };
+    }
+    const row = (r: WireUsageRow): AppUsageRow => ({
+      label: r.label,
+      used: r.used,
+      limit: r.limit,
+      resetHint: r.reset_hint,
+      resetAt: r.reset_at,
+      windowSeconds: r.window_seconds,
+    });
+    return {
+      kind: 'ok',
+      summary: data.summary === null ? null : row(data.summary),
+      limits: data.limits.map(row),
+      extraUsage:
+        data.extra_usage === null
+          ? null
+          : {
+              balanceCents: data.extra_usage.balance_cents,
+              totalCents: data.extra_usage.total_cents,
+              monthlyChargeLimitEnabled: data.extra_usage.monthly_charge_limit_enabled,
+              monthlyChargeLimitCents: data.extra_usage.monthly_charge_limit_cents,
+              monthlyUsedCents: data.extra_usage.monthly_used_cents,
+              currency: data.extra_usage.currency,
+            },
+    };
+  }
+
   // -------------------------------------------------------------------------
   // File upload
   // -------------------------------------------------------------------------
diff --git a/apps/kimi-web/src/api/daemon/http.ts b/apps/kimi-web/src/api/daemon/http.ts
index 140ca1deb3..76e18599b1 100644
--- a/apps/kimi-web/src/api/daemon/http.ts
+++ b/apps/kimi-web/src/api/daemon/http.ts
@@ -518,8 +518,10 @@ export class DaemonHttpClient {
     // Unwrap: code 0 = success; allowed non-zero = return data; else throw
     if (envelope.code !== 0 && !allowCodes.includes(envelope.code)) {
       throw new DaemonApiError({
-        code: envelope.code,
-        msg: envelope.msg,
+        // Non-envelope error bodies (e.g. the router's plain 404 JSON) carry no
+        // `code`; fall back to the HTTP status so callers can branch on it.
+        code: envelope.code ?? response.status,
+        msg: envelope.msg ?? response.statusText,
         requestId: envelope.request_id,
         details: envelope.details,
         timestamp: Date.now(),
diff --git a/apps/kimi-web/src/api/daemon/wire.ts b/apps/kimi-web/src/api/daemon/wire.ts
index 900d98bcf0..f45b00067a 100644
--- a/apps/kimi-web/src/api/daemon/wire.ts
+++ b/apps/kimi-web/src/api/daemon/wire.ts
@@ -423,7 +423,7 @@ export interface WireConfig {
 }
 
 // ---------------------------------------------------------------------------
-// Auth wire DTOs — REAL endpoints (GET /api/v1/auth, POST/GET/DELETE /api/v1/oauth/login, POST /api/v1/oauth/logout)
+// Auth wire DTOs — REAL endpoints (GET /api/v1/auth, POST/GET/DELETE /api/v1/oauth/login, POST /api/v1/oauth/logout, GET /api/v1/oauth/usage)
 // ---------------------------------------------------------------------------
 
 export interface WireManagedProvider {
@@ -482,6 +482,35 @@ export interface WireLogoutResult {
   logged_out: boolean;
 }
 
+// GET /oauth/usage — managed-platform quotas (weekly summary, rolling 5h
+// limits, booster wallet). Discriminated by `kind`.
+export interface WireUsageRow {
+  label: string;
+  used: number;
+  limit: number;
+  reset_hint?: string;
+  reset_at?: string;
+  window_seconds?: number;
+}
+
+export interface WireBoosterWallet {
+  balance_cents: number;
+  total_cents: number;
+  monthly_charge_limit_enabled: boolean;
+  monthly_charge_limit_cents: number;
+  monthly_used_cents: number;
+  currency: string;
+}
+
+export type WireManagedUsage =
+  | {
+      kind: 'ok';
+      summary: WireUsageRow | null;
+      limits: WireUsageRow[];
+      extra_usage: WireBoosterWallet | null;
+    }
+  | { kind: 'error'; code: 'unauthenticated' | 'unavailable'; message: string };
+
 // ---------------------------------------------------------------------------
 // File upload wire DTOs
 // ---------------------------------------------------------------------------
diff --git a/apps/kimi-web/src/api/types.ts b/apps/kimi-web/src/api/types.ts
index 3f82db6a4b..42c3f1d9b4 100644
--- a/apps/kimi-web/src/api/types.ts
+++ b/apps/kimi-web/src/api/types.ts
@@ -801,8 +801,48 @@ export interface KimiWebApi {
   } | null>;
   cancelOAuthLogin(): Promise<{ cancelled: boolean; status: string }>;
   logout(): Promise<{ loggedOut: boolean }>;
+  /** Managed-account usage quotas (5h / weekly / booster wallet) — GET /oauth/usage. */
+  getManagedUsage(): Promise<AppManagedUsage>;
 }
 
+/** Managed-platform quota row (weekly summary, rolling 5h limit, …). */
+export interface AppUsageRow {
+  label: string;
+  used: number;
+  limit: number;
+  resetHint?: string;
+  /** Raw ISO reset timestamp — preferred over `resetHint` for localized display. */
+  resetAt?: string;
+  /** Rolling window length in seconds — preferred over `label` for localized display. */
+  windowSeconds?: number;
+}
+
+/** Booster wallet — pay-as-you-go balance beyond the subscription quota. */
+export interface AppBoosterWallet {
+  balanceCents: number;
+  totalCents: number;
+  monthlyChargeLimitEnabled: boolean;
+  monthlyChargeLimitCents: number;
+  monthlyUsedCents: number;
+  currency: string;
+}
+
+/** Stable failure reason for a usage fetch — the UI binds localized copy to
+ *  the code instead of rendering the raw upstream `message`.
+ *  `unauthenticated` / `unavailable` come from the server; `route_unavailable`
+ *  is synthesized by the client when the backend predates the route (404). */
+export type AppManagedUsageErrorCode = 'unauthenticated' | 'unavailable' | 'route_unavailable';
+
+/** Result of `getManagedUsage()`, mirroring the wire discriminated union. */
+export type AppManagedUsage =
+  | {
+      kind: 'ok';
+      summary: AppUsageRow | null;
+      limits: AppUsageRow[];
+      extraUsage: AppBoosterWallet | null;
+    }
+  | { kind: 'error'; code: AppManagedUsageErrorCode; message: string };
+
 /** Result of `startOAuthLogin()`, mirroring the wire discriminated union. */
 export type OAuthLoginStartResult =
   | {
diff --git a/apps/kimi-web/src/components/chat/Composer.vue b/apps/kimi-web/src/components/chat/Composer.vue
index fc21e665be..64885adcad 100644
--- a/apps/kimi-web/src/components/chat/Composer.vue
+++ b/apps/kimi-web/src/components/chat/Composer.vue
@@ -6,7 +6,6 @@ import { useI18n } from 'vue-i18n';
 import SlashMenu from './SlashMenu.vue';
 import MentionMenu from './MentionMenu.vue';
 import { buildSlashItems, parseSlash, SKILL_COMMAND_PREFIX } from '../../lib/slashCommands';
-import { formatTokens } from '../../lib/formatTokens';
 import type { FileItem } from './MentionMenu.vue';
 import type { ActivationBadges, ConversationStatus, PermissionMode, QueuedPromptView } from '../../types';
 import type { AppGoal, AppModel, AppSkill, ThinkingLevel } from '../../api/types';
@@ -29,9 +28,9 @@ import Spinner from '../ui/Spinner.vue';
 import Button from '../ui/Button.vue';
 import IconButton from '../ui/IconButton.vue';
 import Icon from '../ui/Icon.vue';
-import ContextRing from '../ui/ContextRing.vue';
 import Tooltip from '../ui/Tooltip.vue';
 import AttachmentChip from './AttachmentChip.vue';
+import ContextUsagePanel from './ContextUsagePanel.vue';
 
 // ---------------------------------------------------------------------------
 // Props & emits
@@ -560,12 +559,14 @@ const hasUpload = computed(() => !!props.uploadImage);
 const dropdownOpen = ref(false);
 const permDropdownOpen = ref(false);
 const toolbarRef = ref<HTMLElement | null>(null);
+const usagePanelRef = ref<{ close: () => void } | null>(null);
 
 function toggleDropdown(): void {
   dropdownOpen.value = !dropdownOpen.value;
   if (dropdownOpen.value) {
     permDropdownOpen.value = false;
     closeModes();
+    usagePanelRef.value?.close();
     document.addEventListener('click', onDocClick, true);
   } else {
     document.removeEventListener('click', onDocClick, true);
@@ -584,6 +585,7 @@ function togglePermDropdown(): void {
   if (permDropdownOpen.value) {
     dropdownOpen.value = false;
     closeModes();
+    usagePanelRef.value?.close();
     document.addEventListener('click', onDocClick, true);
   } else {
     document.removeEventListener('click', onDocClick, true);
@@ -618,14 +620,15 @@ const pct = computed(() => {
   return Math.min(100, Math.max(0, Math.ceil(((props.status?.ctxUsed ?? 0) / max) * 100)));
 });
 
-const ctxTooltip = computed(() => {
-  const used = formatTokens(props.status?.ctxUsed ?? 0);
-  const max = formatTokens(props.status?.ctxMax ?? 0);
-  return t('status.ctxTooltip', { used, max, pct: pct.value });
-});
-
 const showCompact = computed(() => pct.value >= 80);
 
+// Keep the toolbar menus mutually exclusive when the usage panel opens.
+function onUsagePanelOpen(): void {
+  closeDropdown();
+  closePermDropdown();
+  closeModes();
+}
+
 // Thinking toggle
 // Identity is the model id — display/model names can collide across providers.
 const currentModel = computed(() =>
@@ -703,6 +706,7 @@ function toggleModes(): void {
   // Keep the toolbar menus mutually exclusive so they never overlap.
   closeDropdown();
   closePermDropdown();
+  usagePanelRef.value?.close();
   const r = modesRef.value?.getBoundingClientRect();
   if (r) {
     modesMenuStyle.value = {
@@ -1086,21 +1090,15 @@ function selectModel(modelId: string): void {
           <!-- Compact chip when context is high -->
           <button v-if="showCompact" class="compact-chip" @click.stop="emit('compact')">/compact</button>
 
-          <!-- Context meter — circular ring only; the full usage (used/max/pct)
-               lives in the tooltip. The ring is aria-hidden, so the trigger
-               exposes those numbers via aria-label; focusable so keyboard and
-               switch-control users reach the same tooltip hover users see. -->
-          <Tooltip :text="ctxTooltip">
-            <span
-              v-if="status && !hideContext"
-              class="ctx-group"
-              role="img"
-              tabindex="0"
-              :aria-label="ctxTooltip"
-            >
-              <ContextRing :pct="pct" />
-            </span>
-          </Tooltip>
+          <!-- Context meter + usage limits — click the ring to open the panel.
+               The trigger tooltip keeps the full used/max/pct numbers on hover. -->
+          <ContextUsagePanel
+            v-if="status && !hideContext"
+            ref="usagePanelRef"
+            :status="status"
+            :provider="currentModel?.provider"
+            @open="onUsagePanelOpen"
+          />
 
           <!-- Model pill — click to open quick-switch dropdown -->
           <span
@@ -1590,21 +1588,6 @@ function selectModel(modelId: string): void {
   color: var(--color-danger);
 }
 
-/* Context group — circular ring. Focusable for keyboard / switch access to its
-   aria-label and tooltip (see template), so it needs a focus ring. */
-.ctx-group {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-  padding: 2px 4px;
-  border-radius: var(--radius-xs);
-}
-.ctx-group:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-
 /* Model pill */
 .model-pill {
   display: inline-flex;
diff --git a/apps/kimi-web/src/components/chat/ContextUsagePanel.vue b/apps/kimi-web/src/components/chat/ContextUsagePanel.vue
new file mode 100644
index 0000000000..f947c12388
--- /dev/null
+++ b/apps/kimi-web/src/components/chat/ContextUsagePanel.vue
@@ -0,0 +1,497 @@
+<!-- apps/kimi-web/src/components/chat/ContextUsagePanel.vue -->
+<!-- Composer context meter + managed-account usage limits. The trigger is the
+     circular context ring (hover: the original tooltip); clicking it opens a
+     fixed-position panel with the context size and — when the session's model
+     runs on the managed provider — the managed quota rows (weekly summary,
+     rolling 5h limits, …) and the booster wallet. Quota data is fetched on
+     open and refreshed every 60s while the panel is open; the cache is dropped
+     on close so reopening always revalidates against the current login. -->
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ContextRing from '../ui/ContextRing.vue';
+import Tooltip from '../ui/Tooltip.vue';
+import Spinner from '../ui/Spinner.vue';
+import { getKimiWebApi } from '../../api';
+import type { AppBoosterWallet, AppManagedUsage } from '../../api/types';
+import type { ConversationStatus } from '../../types';
+import { formatTokens } from '../../lib/formatTokens';
+import { buildUsageRows, formatUsageMoney } from '../../lib/usageFormat';
+import { calculateUsagePanelPosition } from '../../lib/usagePanelPosition';
+
+const props = defineProps<{
+  status: ConversationStatus;
+  /** Provider id of the session's current model — the quota section only
+   *  applies to the managed provider; undefined while the catalog loads. */
+  provider?: string;
+}>();
+const emit = defineEmits<{ open: [] }>();
+
+const { t, locale } = useI18n();
+
+// Mirrors the TUI's isManagedUsageProvider: quota rows only exist for the
+// managed OAuth account; other providers show the context meter alone and the
+// usage endpoint is never called.
+const MANAGED_PROVIDER = 'managed:kimi-code';
+const quotaEnabled = computed(() => props.provider === MANAGED_PROVIDER);
+
+// ---------------------------------------------------------------------------
+// Trigger — context ring + tooltip (moved from Composer.vue)
+// ---------------------------------------------------------------------------
+
+// Clamped to 0–100: ctxUsed can momentarily exceed ctxMax (estimates), and
+// ctxMax can be 0 before the first status fetch — both broke the ring. ceil
+// (not round) so a session under 0.5% usage still shows a sliver of arc.
+const pct = computed(() => {
+  const max = props.status.ctxMax;
+  if (max <= 0) return 0;
+  return Math.min(100, Math.max(0, Math.ceil((props.status.ctxUsed / max) * 100)));
+});
+
+const ctxTooltip = computed(() =>
+  t('status.ctxTooltip', {
+    used: formatTokens(props.status.ctxUsed),
+    max: formatTokens(props.status.ctxMax),
+    pct: pct.value,
+  }),
+);
+
+const ctxValue = computed(() =>
+  t('status.statusContextValue', {
+    used: formatTokens(props.status.ctxUsed),
+    max: formatTokens(props.status.ctxMax),
+    pct: pct.value,
+  }),
+);
+
+// ---------------------------------------------------------------------------
+// Panel open/close — fixed to the trigger on the roomier viewport side;
+// document listeners are registered after open.
+// ---------------------------------------------------------------------------
+
+const open = ref(false);
+const triggerRef = ref<HTMLElement | null>(null);
+const panelRef = ref<HTMLElement | null>(null);
+const panelStyle = ref<Record<string, string>>({});
+let documentListenerTimer: ReturnType<typeof setTimeout> | undefined;
+let positionFrame: number | undefined;
+let panelResizeObserver: ResizeObserver | undefined;
+
+const REFRESH_INTERVAL_MS = 60_000;
+let refreshTimer: ReturnType<typeof setInterval> | undefined;
+
+function startRefreshLoop(): void {
+  if (!open.value || !quotaEnabled.value || refreshTimer !== undefined) return;
+  void refresh();
+  refreshTimer = setInterval(() => {
+    void refresh();
+  }, REFRESH_INTERVAL_MS);
+}
+
+function stopRefreshLoop(): void {
+  if (refreshTimer === undefined) return;
+  clearInterval(refreshTimer);
+  refreshTimer = undefined;
+}
+
+function positionPanel(): void {
+  const triggerRect = triggerRef.value?.getBoundingClientRect();
+  const panelRect = panelRef.value?.getBoundingClientRect();
+  if (!triggerRect || !panelRect) return;
+  const position = calculateUsagePanelPosition(
+    triggerRect,
+    {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    },
+    panelRect.width,
+  );
+  const style: Record<string, string> = {
+    right: `${String(position.right)}px`,
+    maxHeight: `${String(position.maxHeight)}px`,
+  };
+  if (position.top !== undefined) style.top = `${String(position.top)}px`;
+  if (position.bottom !== undefined) style.bottom = `${String(position.bottom)}px`;
+  panelStyle.value = style;
+}
+
+function schedulePositionPanel(): void {
+  cancelScheduledPosition();
+  positionFrame = window.requestAnimationFrame(() => {
+    positionFrame = undefined;
+    positionPanel();
+  });
+}
+
+function cancelScheduledPosition(): void {
+  if (positionFrame === undefined) return;
+  window.cancelAnimationFrame(positionFrame);
+  positionFrame = undefined;
+}
+
+function observePanelSize(): void {
+  const panel = panelRef.value;
+  if (!panel) return;
+  panelResizeObserver = new ResizeObserver(schedulePositionPanel);
+  panelResizeObserver.observe(panel);
+}
+
+function stopObservingPanelSize(): void {
+  panelResizeObserver?.disconnect();
+  panelResizeObserver = undefined;
+}
+
+function togglePanel(): void {
+  if (open.value) {
+    closePanel();
+    return;
+  }
+  // Let the composer close its own menus so toolbar popups never overlap.
+  emit('open');
+  open.value = true;
+  window.addEventListener('resize', schedulePositionPanel);
+  startRefreshLoop();
+  void nextTick(() => {
+    positionPanel();
+    observePanelSize();
+    panelRef.value?.focus();
+  });
+  documentListenerTimer = setTimeout(() => {
+    documentListenerTimer = undefined;
+    if (!open.value) return;
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onDocKeydown);
+  }, 0);
+}
+
+function closePanel(restoreFocus = false): void {
+  open.value = false;
+  stopObservingPanelSize();
+  cancelDocumentListenerRegistration();
+  cancelScheduledPosition();
+  invalidateUsage();
+  stopRefreshLoop();
+  document.removeEventListener('mousedown', onDocClick);
+  document.removeEventListener('keydown', onDocKeydown);
+  window.removeEventListener('resize', schedulePositionPanel);
+  if (restoreFocus) void nextTick(() => triggerRef.value?.focus());
+}
+
+defineExpose({ close: closePanel });
+
+function onDocClick(e: MouseEvent): void {
+  const target = e.target as Node;
+  if (triggerRef.value?.contains(target) || panelRef.value?.contains(target)) return;
+  closePanel();
+}
+
+function onDocKeydown(e: KeyboardEvent): void {
+  if (e.key === 'Escape') {
+    e.preventDefault();
+    closePanel(true);
+  }
+}
+
+function cancelDocumentListenerRegistration(): void {
+  if (documentListenerTimer === undefined) return;
+  clearTimeout(documentListenerTimer);
+  documentListenerTimer = undefined;
+}
+
+onUnmounted(() => {
+  stopObservingPanelSize();
+  cancelDocumentListenerRegistration();
+  cancelScheduledPosition();
+  invalidateUsage();
+  stopRefreshLoop();
+  document.removeEventListener('mousedown', onDocClick);
+  document.removeEventListener('keydown', onDocKeydown);
+  window.removeEventListener('resize', schedulePositionPanel);
+});
+
+// ---------------------------------------------------------------------------
+// Usage data — `loading` only covers the initial fetch; the 60s revalidation
+// is silent so the panel content never flickers. The in-flight guard keeps
+// the tick and the open-refresh from stacking requests.
+// ---------------------------------------------------------------------------
+
+const usage = ref<AppManagedUsage | null>(null);
+const loading = ref(false);
+let inFlight: Promise<void> | null = null;
+let usageGeneration = 0;
+
+function invalidateUsage(): void {
+  usageGeneration += 1;
+  usage.value = null;
+  loading.value = false;
+  inFlight = null;
+}
+
+function refresh(): Promise<void> {
+  if (inFlight !== null) return inFlight;
+  if (usage.value === null) loading.value = true;
+  const generation = usageGeneration;
+  let request!: Promise<void>;
+  request = (async () => {
+    try {
+      const result = await getKimiWebApi().getManagedUsage();
+      if (generation === usageGeneration && open.value && quotaEnabled.value) {
+        usage.value = result;
+      }
+    } finally {
+      if (generation === usageGeneration) loading.value = false;
+      if (inFlight === request) inFlight = null;
+    }
+  })();
+  inFlight = request;
+  return request;
+}
+
+watch(quotaEnabled, (enabled) => {
+  if (!open.value) return;
+  invalidateUsage();
+  if (enabled) startRefreshLoop();
+  else stopRefreshLoop();
+});
+
+const usageRows = computed(() =>
+  usage.value?.kind === 'ok' ? buildUsageRows(usage.value, t) : [],
+);
+
+const extraUsage = computed<AppBoosterWallet | null>(() =>
+  usage.value?.kind === 'ok' ? usage.value.extraUsage : null,
+);
+const usageHasDetails = computed(
+  () => usageRows.value.length > 0 || extraUsage.value !== null,
+);
+
+// Localized copy keyed off the stable error code — the raw upstream
+// `message` (English, sometimes technical) is never rendered.
+const errorText = computed(() => {
+  if (usage.value?.kind !== 'error') return '';
+  if (usage.value.code === 'unauthenticated') return t('status.usageNotLoggedIn');
+  if (usage.value.code === 'route_unavailable') return t('status.usageRouteUnavailable');
+  return t('status.usageUnavailable');
+});
+
+const monthlyLimitText = computed(() => {
+  const extra = extraUsage.value;
+  if (extra === null) return '';
+  if (!extra.monthlyChargeLimitEnabled || extra.monthlyChargeLimitCents <= 0) {
+    return t('status.usageUnlimited');
+  }
+  return formatUsageMoney(extra.monthlyChargeLimitCents, extra.currency, locale.value);
+});
+
+function money(cents: number, currency: string): string {
+  return formatUsageMoney(cents, currency, locale.value);
+}
+</script>
+
+<template>
+  <Tooltip :text="ctxTooltip" :disabled="open">
+    <button
+      ref="triggerRef"
+      type="button"
+      class="ctx-group"
+      :class="{ open }"
+      :aria-label="ctxTooltip"
+      aria-haspopup="dialog"
+      :aria-expanded="open"
+      @click.stop="togglePanel"
+      @keydown.enter.prevent="togglePanel"
+      @keydown.space.prevent="togglePanel"
+    >
+      <ContextRing :pct="pct" />
+    </button>
+  </Tooltip>
+
+  <div
+    v-if="open"
+    ref="panelRef"
+    class="usage-panel"
+    :style="panelStyle"
+    role="dialog"
+    :aria-label="t('status.usageTitle')"
+    tabindex="-1"
+  >
+    <div class="up-head">
+      <span class="up-title">{{ t('status.usageTitle') }}</span>
+    </div>
+
+    <div class="up-row">
+      <span class="up-label">{{ t('status.statusContext') }}</span>
+      <span class="up-value">{{ ctxValue }}</span>
+    </div>
+    <div class="up-track"><div class="up-fill" :style="{ width: `${String(pct)}%` }" /></div>
+
+    <template v-if="quotaEnabled">
+      <template v-if="usage?.kind === 'ok'">
+        <template v-if="usageRows.length > 0">
+          <div class="up-divider" />
+          <div v-for="row in usageRows" :key="row.key" class="up-limit">
+            <div class="up-row">
+              <span class="up-label">{{ row.label }}</span>
+              <span class="up-value">{{ row.valueText }}</span>
+            </div>
+            <div class="up-track"><div class="up-fill" :style="{ width: `${String(row.pct)}%` }" /></div>
+            <div v-if="row.resetHint" class="up-hint">{{ row.resetHint }}</div>
+          </div>
+        </template>
+
+        <template v-if="extraUsage">
+          <div class="up-divider" />
+          <div class="up-subtitle">{{ t('status.usageExtraTitle') }}</div>
+          <div class="up-row">
+            <span class="up-label">{{ t('status.usageBalance') }}</span>
+            <span class="up-value">{{ money(extraUsage.balanceCents, extraUsage.currency) }}</span>
+          </div>
+          <div class="up-row">
+            <span class="up-label">{{ t('status.usageMonthlyUsed') }}</span>
+            <span class="up-value">{{ money(extraUsage.monthlyUsedCents, extraUsage.currency) }}</span>
+          </div>
+          <div class="up-row">
+            <span class="up-label">{{ t('status.usageMonthlyLimit') }}</span>
+            <span class="up-value">{{ monthlyLimitText }}</span>
+          </div>
+        </template>
+
+        <div v-if="!usageHasDetails" class="up-empty">
+          {{ t('status.usageEmpty') }}
+        </div>
+      </template>
+
+      <div v-else-if="usage?.kind === 'error'" class="up-error">
+        <span>{{ errorText }}</span>
+      </div>
+
+      <div v-else-if="loading" class="up-loading">
+        <Spinner size="sm" :label="t('status.usageLoading')" />
+        <span>{{ t('status.usageLoading') }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* Trigger — circular ring. Focusable for keyboard / switch access, so it
+   needs a focus ring; now clickable, so it also gets a hover wash. */
+.ctx-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 2px 4px;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.ctx-group:hover {
+  background: var(--color-hover);
+}
+.ctx-group:focus-visible {
+  outline: none;
+  box-shadow: var(--p-focus-ring);
+}
+
+.usage-panel {
+  position: fixed;
+  z-index: var(--z-dropdown);
+  min-width: 240px;
+  width: max-content;
+  max-width: calc(100vw - var(--space-8));
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  font-family: var(--font-ui);
+}
+
+.up-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.up-title {
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.up-subtitle {
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  color: var(--muted);
+}
+
+.up-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+}
+.up-label {
+  font-size: var(--ui-font-size);
+  color: var(--dim);
+  line-height: var(--leading-normal);
+}
+.up-value {
+  font-size: var(--ui-font-size);
+  font-weight: var(--weight-medium);
+  color: var(--color-text);
+  line-height: var(--leading-normal);
+  white-space: nowrap;
+}
+
+.up-track {
+  height: 3px;
+  border-radius: 999px;
+  background: var(--color-line);
+  overflow: hidden;
+}
+.up-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--color-accent);
+  transition: width 0.3s ease;
+}
+
+.up-limit {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.up-hint {
+  font-size: var(--text-xs);
+  color: var(--muted);
+  line-height: var(--leading-normal);
+}
+
+.up-divider {
+  height: 1px;
+  background: var(--color-line);
+  margin: 2px 0;
+}
+
+.up-loading,
+.up-error,
+.up-empty {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--ui-font-size);
+  color: var(--muted);
+  line-height: var(--leading-normal);
+}
+</style>
diff --git a/apps/kimi-web/src/components/ui/Tooltip.vue b/apps/kimi-web/src/components/ui/Tooltip.vue
index a120cbff3d..54457d828d 100644
--- a/apps/kimi-web/src/components/ui/Tooltip.vue
+++ b/apps/kimi-web/src/components/ui/Tooltip.vue
@@ -9,7 +9,7 @@
      line; long text wraps within `maxWidth` and is clamped to `maxLines` lines with
      an ellipsis so the bubble never grows too tall. -->
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 type Placement = 'top' | 'bottom' | 'left' | 'right';
 
@@ -20,11 +20,13 @@ const props = withDefaults(
     maxWidth?: number;
     /** Clamp the bubble to at most this many lines (with an ellipsis). */
     maxLines?: number;
+    disabled?: boolean;
   }>(),
   {
     placement: 'top',
     maxWidth: 280,
     maxLines: 6,
+    disabled: false,
   },
 );
 
@@ -84,7 +86,7 @@ function position(): void {
 }
 
 function show(): void {
-  if (!props.text) return;
+  if (props.disabled || !props.text) return;
   window.clearTimeout(showTimer);
   showTimer = window.setTimeout(() => {
     open.value = true;
@@ -102,6 +104,13 @@ function hide(): void {
   positioned.value = false;
 }
 
+watch(
+  () => [props.disabled, props.text] as const,
+  ([disabled, text]) => {
+    if (disabled || !text) hide();
+  },
+);
+
 function onScrollOrResize(): void {
   if (open.value) hide();
 }
diff --git a/apps/kimi-web/src/i18n/locales/en/status.ts b/apps/kimi-web/src/i18n/locales/en/status.ts
index 23f7f2cbbe..364da06ab9 100644
--- a/apps/kimi-web/src/i18n/locales/en/status.ts
+++ b/apps/kimi-web/src/i18n/locales/en/status.ts
@@ -57,6 +57,26 @@ export default {
   statusCost: 'Cost',
   statusContextValue: '{used} / {max} ({pct}%)',
   statusNone: '—',
+  // Usage limits panel (context ring popover)
+  usageTitle: 'Usage',
+  usageLoading: 'Loading…',
+  usageUnavailable: 'Usage limits unavailable',
+  usageRouteUnavailable: 'This backend does not support usage limits',
+  usageNotLoggedIn: 'Log in to view usage limits',
+  usageEmpty: 'No usage limits to display',
+  usageExtraTitle: 'Extra usage',
+  usageBalance: 'Balance',
+  usageMonthlyUsed: 'Used this month',
+  usageMonthlyLimit: 'Monthly limit',
+  usageUnlimited: 'Unlimited',
+  usageWeekly: 'Weekly limit',
+  usageWindowLimit: '{duration} limit',
+  usageResetsIn: 'resets in {duration}',
+  usageResetNow: 'reset',
+  usageDurationDay: '{n}d',
+  usageDurationHour: '{n}h',
+  usageDurationMinute: '{n}m',
+  usageDurationSecond: '{n}s',
   activityRunning: 'Running…',
   activityAwaitingApproval: 'Awaiting approval',
   activityAwaitingQuestion: 'Awaiting answer',
diff --git a/apps/kimi-web/src/i18n/locales/zh/status.ts b/apps/kimi-web/src/i18n/locales/zh/status.ts
index b88d7907a9..02c0c87d75 100644
--- a/apps/kimi-web/src/i18n/locales/zh/status.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/status.ts
@@ -57,6 +57,26 @@ export default {
   statusCost: '花费',
   statusContextValue: '{used} / {max} ({pct}%)',
   statusNone: '—',
+  // 用量面板（上下文圆环弹层）
+  usageTitle: '用量',
+  usageLoading: '加载中…',
+  usageUnavailable: '用量信息暂不可用',
+  usageRouteUnavailable: '当前后端不支持用量查询',
+  usageNotLoggedIn: '登录后可查看用量限制',
+  usageEmpty: '暂无可显示的用量限制',
+  usageExtraTitle: '额外用量',
+  usageBalance: '余额',
+  usageMonthlyUsed: '本月已用',
+  usageMonthlyLimit: '月度上限',
+  usageUnlimited: '不限',
+  usageWeekly: '周限额',
+  usageWindowLimit: '{duration}限额',
+  usageResetsIn: '{duration}后重置',
+  usageResetNow: '已重置',
+  usageDurationDay: '{n} 天',
+  usageDurationHour: '{n} 小时',
+  usageDurationMinute: '{n} 分钟',
+  usageDurationSecond: '{n} 秒',
   activityRunning: '运行中…',
   activityAwaitingApproval: '等待批准',
   activityAwaitingQuestion: '等待回答',
diff --git a/apps/kimi-web/src/lib/usageFormat.test.ts b/apps/kimi-web/src/lib/usageFormat.test.ts
new file mode 100644
index 0000000000..bef91a133b
--- /dev/null
+++ b/apps/kimi-web/src/lib/usageFormat.test.ts
@@ -0,0 +1,146 @@
+// Pure usage-formatting scenarios: observable text, values, and row models.
+// Uses the real helpers with only the injected translator stubbed.
+// Run with: pnpm --filter @moonshot-ai/kimi-web test -- usageFormat.test.ts
+import { describe, expect, it } from 'vitest';
+
+import {
+  buildUsageRows,
+  formatUsageDuration,
+  formatUsageMoney,
+  localizedResetHint,
+  normalizeResetTimestamp,
+  usageRowPct,
+} from './usageFormat';
+
+/** Recording stub for the injected translator — returns "key{json}". */
+function makeT() {
+  const calls: Array<{ key: string; named: Record<string, unknown> }> = [];
+  const t = (key: string, named: Record<string, unknown>): string => {
+    calls.push({ key, named });
+    return Object.keys(named).length > 0 ? `${key} ${JSON.stringify(named)}` : key;
+  };
+  return { t, calls };
+}
+
+describe('usageRowPct', () => {
+  it('computes a clamped 0-100 percentage', () => {
+    expect(usageRowPct({ used: 30, limit: 100 })).toBe(30);
+    expect(usageRowPct({ used: 1, limit: 3 })).toBe(33);
+    expect(usageRowPct({ used: 150, limit: 100 })).toBe(100);
+    expect(usageRowPct({ used: 0, limit: 100 })).toBe(0);
+  });
+
+  it('returns 0 for a missing/zero limit', () => {
+    expect(usageRowPct({ used: 5, limit: 0 })).toBe(0);
+    expect(usageRowPct({ used: 5, limit: -1 })).toBe(0);
+  });
+});
+
+describe('formatUsageDuration', () => {
+  const { t } = makeT();
+
+  it('renders day/hour/minute parts in order', () => {
+    expect(formatUsageDuration(6 * 86400 + 13 * 3600 + 29 * 60, t)).toBe(
+      'status.usageDurationDay {"n":6} status.usageDurationHour {"n":13} status.usageDurationMinute {"n":29}',
+    );
+  });
+
+  it('omits zero parts and falls back to seconds', () => {
+    expect(formatUsageDuration(3600, t)).toBe('status.usageDurationHour {"n":1}');
+    expect(formatUsageDuration(59, t)).toBe('status.usageDurationSecond {"n":59}');
+    expect(formatUsageDuration(0, t)).toBe('status.usageDurationSecond {"n":0}');
+  });
+
+  it('clamps invalid input to 0 seconds', () => {
+    expect(formatUsageDuration(-10, t)).toBe('status.usageDurationSecond {"n":0}');
+    expect(formatUsageDuration(Number.NaN, t)).toBe('status.usageDurationSecond {"n":0}');
+    expect(formatUsageDuration(90.9, t)).toBe('status.usageDurationMinute {"n":1}');
+  });
+});
+
+describe('localizedResetHint', () => {
+  const { t } = makeT();
+  const now = Date.parse('2026-07-17T00:00:00Z');
+
+  it('renders a relative hint for a future ISO timestamp', () => {
+    expect(localizedResetHint({ resetAt: '2026-07-17T02:30:00Z' }, t, now)).toBe(
+      'status.usageResetsIn {"duration":"status.usageDurationHour {\\"n\\":2} status.usageDurationMinute {\\"n\\":30}"}',
+    );
+  });
+
+  it('renders the reset-now copy for a past timestamp', () => {
+    expect(localizedResetHint({ resetAt: '2026-07-16T23:00:00Z' }, t, now)).toBe(
+      'status.usageResetNow',
+    );
+  });
+
+  it('falls back to the server hint when resetAt is missing or unparseable', () => {
+    expect(localizedResetHint({ resetHint: 'resets in 2d' }, t, now)).toBe('resets in 2d');
+    expect(localizedResetHint({ resetAt: 'not-a-date', resetHint: 'resets in 2d' }, t, now)).toBe(
+      'resets in 2d',
+    );
+    expect(localizedResetHint({}, t, now)).toBeUndefined();
+  });
+});
+
+describe('normalizeResetTimestamp', () => {
+  it('returns millisecond precision when the input has nanosecond precision', () => {
+    expect(normalizeResetTimestamp('2026-07-17T02:30:00.123456789Z')).toBe(
+      '2026-07-17T02:30:00.123Z',
+    );
+  });
+});
+
+describe('formatUsageMoney', () => {
+  it('formats cents with the ISO currency', () => {
+    expect(formatUsageMoney(1050, 'USD', 'en')).toBe('$10.50');
+    expect(formatUsageMoney(0, 'USD', 'en')).toBe('$0.00');
+  });
+
+  it('falls back to plain text for an unknown currency code', () => {
+    expect(formatUsageMoney(1234, 'NOT_A_CCY', 'en')).toBe('12.34 NOT_A_CCY');
+  });
+});
+
+describe('buildUsageRows', () => {
+  it('localizes the summary label and window-based limit labels', () => {
+    const { t } = makeT();
+    const rows = buildUsageRows(
+      {
+        summary: { label: 'Weekly limit', used: 30, limit: 100, resetAt: '2026-07-24T00:00:00Z' },
+        limits: [
+          { label: '5h limit', used: 10, limit: 100, windowSeconds: 5 * 3600 },
+          { label: 'raw scope label', used: 1, limit: 2 },
+        ],
+      },
+      t,
+    );
+    expect(rows.map((r) => r.label)).toEqual([
+      'status.usageWeekly',
+      'status.usageWindowLimit {"duration":"status.usageDurationHour {\\"n\\":5}"}',
+      'raw scope label',
+    ]);
+    expect(rows.map((r) => r.key)).toEqual(['summary', 'limit:0', 'limit:1']);
+    expect(rows.map((r) => r.pct)).toEqual([30, 10, 50]);
+  });
+
+  it('assigns stable unique keys when rows have duplicate labels', () => {
+    const { t } = makeT();
+    const rows = buildUsageRows(
+      {
+        summary: null,
+        limits: [
+          { label: '5h limit', used: 10, limit: 100 },
+          { label: '5h limit', used: 20, limit: 100 },
+        ],
+      },
+      t,
+    );
+    expect(rows.map((r) => r.key)).toEqual(['limit:0', 'limit:1']);
+  });
+
+  it('returns no rows when summary is null and limits are empty', () => {
+    const { t } = makeT();
+    expect(buildUsageRows({ summary: null, limits: [] }, t)).toEqual([]);
+  });
+});
diff --git a/apps/kimi-web/src/lib/usageFormat.ts b/apps/kimi-web/src/lib/usageFormat.ts
new file mode 100644
index 0000000000..e90e69590e
--- /dev/null
+++ b/apps/kimi-web/src/lib/usageFormat.ts
@@ -0,0 +1,124 @@
+// apps/kimi-web/src/lib/usageFormat.ts
+// Pure formatting helpers for the composer context/usage-limits panel — no
+// Vue, no i18n instance; callers inject `t` so the logic stays unit-testable.
+
+export interface UsageRowInput {
+  label: string;
+  used: number;
+  limit: number;
+  resetHint?: string;
+  resetAt?: string;
+  windowSeconds?: number;
+}
+
+export interface UsageRowView {
+  key: string;
+  label: string;
+  valueText: string;
+  pct: number;
+  resetHint?: string;
+}
+
+export type UsageTranslate = (key: string, named: Record<string, unknown>) => string;
+
+/** Trim sub-millisecond precision so Date.parse receives the ECMAScript
+ *  date-time interchange format supported consistently across browsers. */
+export function normalizeResetTimestamp(value: string): string {
+  return value.replace(/(\.\d{3})\d+(Z|[+-]\d{2}:\d{2})$/, '$1$2');
+}
+
+/** Percent 0–100 for a quota row; 0 when the limit is missing or zero. */
+export function usageRowPct(row: { used: number; limit: number }): number {
+  if (row.limit <= 0) return 0;
+  return Math.min(100, Math.max(0, Math.round((row.used / row.limit) * 100)));
+}
+
+/** Compact localized duration ("6d 12h 36m" / "6 天 12 小时 36 分"), matching
+ *  the oauth parser's day/hour/minute granularity. */
+export function formatUsageDuration(totalSeconds: number, t: UsageTranslate): string {
+  const seconds = Number.isFinite(totalSeconds) ? Math.max(0, Math.floor(totalSeconds)) : 0;
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const parts: string[] = [];
+  if (days > 0) parts.push(t('status.usageDurationDay', { n: days }));
+  if (hours > 0) parts.push(t('status.usageDurationHour', { n: hours }));
+  if (minutes > 0) parts.push(t('status.usageDurationMinute', { n: minutes }));
+  if (parts.length === 0) parts.push(t('status.usageDurationSecond', { n: seconds }));
+  return parts.join(' ');
+}
+
+/** Prefer the raw reset timestamp (localized, relative to now); fall back to
+ *  the server-rendered hint when it is absent or unparseable. */
+export function localizedResetHint(
+  row: { resetAt?: string; resetHint?: string },
+  t: UsageTranslate,
+  now: number = Date.now(),
+): string | undefined {
+  if (row.resetAt !== undefined) {
+    const parsed = Date.parse(normalizeResetTimestamp(row.resetAt));
+    if (Number.isFinite(parsed)) {
+      const diffSec = Math.floor((parsed - now) / 1000);
+      return diffSec <= 0
+        ? t('status.usageResetNow', {})
+        : t('status.usageResetsIn', { duration: formatUsageDuration(diffSec, t) });
+    }
+  }
+  return row.resetHint;
+}
+
+/** ISO-currency money via Intl, with a plain "12.34 CUR" fallback for unknown
+ *  currency codes. */
+export function formatUsageMoney(cents: number, currency: string, locale: string): string {
+  try {
+    return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(cents / 100);
+  } catch {
+    return `${(cents / 100).toFixed(2)} ${currency}`;
+  }
+}
+
+/** Display rows for the panel: the weekly summary first (localized label),
+ *  then each rolling limit — window-based label when the payload declares one,
+ *  raw server label otherwise. */
+export function buildUsageRows(
+  usage: { summary: UsageRowInput | null; limits: UsageRowInput[] },
+  t: UsageTranslate,
+): UsageRowView[] {
+  const rows: UsageRowView[] = [];
+  if (usage.summary !== null) {
+    rows.push(toRowView(usage.summary, 'summary', t('status.usageWeekly', {}), t));
+  }
+  for (const [index, row] of usage.limits.entries()) {
+    rows.push(
+      toRowView(
+        row,
+        `limit:${String(index)}`,
+        row.windowSeconds !== undefined
+          ? t('status.usageWindowLimit', { duration: formatUsageDuration(row.windowSeconds, t) })
+          : row.label,
+        t,
+      ),
+    );
+  }
+  return rows;
+}
+
+function toRowView(
+  row: UsageRowInput,
+  key: string,
+  label: string,
+  t: UsageTranslate,
+): UsageRowView {
+  const pct = usageRowPct(row);
+  return {
+    key,
+    label,
+    valueText: t('status.statusContextValue', {
+      used: String(row.used),
+      max: String(row.limit),
+      pct,
+    }),
+    pct,
+    resetHint: localizedResetHint(row, t),
+  };
+}
diff --git a/apps/kimi-web/src/lib/usagePanelPosition.test.ts b/apps/kimi-web/src/lib/usagePanelPosition.test.ts
new file mode 100644
index 0000000000..dc2a1bca40
--- /dev/null
+++ b/apps/kimi-web/src/lib/usagePanelPosition.test.ts
@@ -0,0 +1,50 @@
+// Usage-panel positioning scenarios: side selection and viewport edge limits.
+// Uses the real pure helper with no mocked collaborators.
+// Run with: pnpm --filter @moonshot-ai/kimi-web test -- usagePanelPosition.test.ts
+import { describe, expect, it } from 'vitest';
+
+import { calculateUsagePanelPosition } from './usagePanelPosition';
+
+describe('usage panel viewport placement', () => {
+  it('opens above with a top gutter when the larger space is above the trigger', () => {
+    expect(
+      calculateUsagePanelPosition(
+        { top: 280, right: 300, bottom: 300 },
+        { width: 320, height: 320 },
+        240,
+      ),
+    ).toEqual({
+      right: 20,
+      bottom: 48,
+      maxHeight: 264,
+    });
+  });
+
+  it('opens below with a bottom gutter when the larger space is below the trigger', () => {
+    expect(
+      calculateUsagePanelPosition(
+        { top: 100, right: 300, bottom: 120 },
+        { width: 320, height: 800 },
+        240,
+      ),
+    ).toEqual({
+      right: 20,
+      top: 128,
+      maxHeight: 664,
+    });
+  });
+
+  it('clamps against the left gutter when right-aligning would leave the viewport', () => {
+    expect(
+      calculateUsagePanelPosition(
+        { top: 280, right: 180, bottom: 300 },
+        { width: 320, height: 320 },
+        240,
+      ),
+    ).toEqual({
+      right: 72,
+      bottom: 48,
+      maxHeight: 264,
+    });
+  });
+});
diff --git a/apps/kimi-web/src/lib/usagePanelPosition.ts b/apps/kimi-web/src/lib/usagePanelPosition.ts
new file mode 100644
index 0000000000..00a3152bda
--- /dev/null
+++ b/apps/kimi-web/src/lib/usagePanelPosition.ts
@@ -0,0 +1,60 @@
+// apps/kimi-web/src/lib/usagePanelPosition.ts
+// Pure viewport placement for the usage-limits popup.
+
+export interface UsagePanelAnchorRect {
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+export interface UsagePanelViewport {
+  width: number;
+  height: number;
+}
+
+export interface UsagePanelPosition {
+  right: number;
+  maxHeight: number;
+  top?: number;
+  bottom?: number;
+}
+
+const PANEL_GAP_PX = 8;
+const VIEWPORT_GUTTER_PX = 8;
+
+/** Place the panel on the side with more room and cap it to that available
+ *  height, leaving a gutter between the panel and the viewport edge. */
+export function calculateUsagePanelPosition(
+  anchor: UsagePanelAnchorRect,
+  viewport: UsagePanelViewport,
+  panelWidth: number,
+): UsagePanelPosition {
+  const above = Math.max(
+    0,
+    Math.floor(anchor.top - PANEL_GAP_PX - VIEWPORT_GUTTER_PX),
+  );
+  const below = Math.max(
+    0,
+    Math.floor(viewport.height - anchor.bottom - PANEL_GAP_PX - VIEWPORT_GUTTER_PX),
+  );
+  const alignedRight = Math.round(viewport.width - anchor.right);
+  const maxRight = Math.max(
+    0,
+    Math.floor(viewport.width - panelWidth - VIEWPORT_GUTTER_PX),
+  );
+  const right = Math.max(0, Math.min(alignedRight, maxRight));
+
+  if (above >= below) {
+    return {
+      right,
+      bottom: Math.max(0, Math.round(viewport.height - anchor.top + PANEL_GAP_PX)),
+      maxHeight: above,
+    };
+  }
+
+  return {
+    right,
+    top: Math.max(0, Math.round(anchor.bottom + PANEL_GAP_PX)),
+    maxHeight: below,
+  };
+}
diff --git a/apps/kimi-web/test/daemon-client.test.ts b/apps/kimi-web/test/daemon-client.test.ts
index dbe9c79186..fae84e760f 100644
--- a/apps/kimi-web/test/daemon-client.test.ts
+++ b/apps/kimi-web/test/daemon-client.test.ts
@@ -1,6 +1,6 @@
 // apps/kimi-web/test/daemon-client.test.ts
 // DaemonKimiWebApi public REST adapter: session export binary/error contracts,
-// getSessionGoal wire → app mapping, and raw stream-coordinate delivery.
+// getSessionGoal + getManagedUsage wire → app mapping, and raw stream-coordinate delivery.
 // Wiring: real client/projector; fetch or WebSocket is stubbed at the network boundary.
 // Run: pnpm --filter @moonshot-ai/kimi-web exec vitest run test/daemon-client.test.ts
 
@@ -208,6 +208,115 @@ describe('DaemonKimiWebApi.getSessionGoal', () => {
   });
 });
 
+describe('DaemonKimiWebApi.getManagedUsage', () => {
+  beforeEach(() => {
+    vi.stubGlobal('fetch', vi.fn());
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('maps the ok wire payload to camelCase app types', async () => {
+    vi.mocked(fetch).mockResolvedValue(
+      envelope({
+        kind: 'ok',
+        summary: { label: 'Weekly limit', used: 40, limit: 1000, reset_hint: 'resets in 2d', reset_at: '2026-01-08T00:00:00Z' },
+        limits: [{ label: '5h limit', used: 1, limit: 100, window_seconds: 18000 }],
+        extra_usage: {
+          balance_cents: 500,
+          total_cents: 1000,
+          monthly_charge_limit_enabled: true,
+          monthly_charge_limit_cents: 2000,
+          monthly_used_cents: 1500,
+          currency: 'USD',
+        },
+      }),
+    );
+
+    const result = await createApi().getManagedUsage();
+
+    expect(result).toEqual({
+      kind: 'ok',
+      summary: {
+        label: 'Weekly limit',
+        used: 40,
+        limit: 1000,
+        resetHint: 'resets in 2d',
+        resetAt: '2026-01-08T00:00:00Z',
+        windowSeconds: undefined,
+      },
+      limits: [
+        {
+          label: '5h limit',
+          used: 1,
+          limit: 100,
+          resetHint: undefined,
+          resetAt: undefined,
+          windowSeconds: 18000,
+        },
+      ],
+      extraUsage: {
+        balanceCents: 500,
+        totalCents: 1000,
+        monthlyChargeLimitEnabled: true,
+        monthlyChargeLimitCents: 2000,
+        monthlyUsedCents: 1500,
+        currency: 'USD',
+      },
+    });
+  });
+
+  it('requests the oauth usage endpoint and passes wire error codes through', async () => {
+    vi.mocked(fetch).mockResolvedValue(
+      envelope({ kind: 'error', code: 'unauthenticated', message: 'nope' }),
+    );
+    const result = await createApi().getManagedUsage();
+    expect(vi.mocked(fetch).mock.calls[0]?.[0]).toBe('http://daemon.test/api/v1/oauth/usage');
+    expect(result).toEqual({ kind: 'error', code: 'unauthenticated', message: 'nope' });
+  });
+
+  it('degrades transport failures to an error result instead of throwing', async () => {
+    vi.mocked(fetch).mockRejectedValue(new TypeError('fetch failed'));
+    const result = await createApi().getManagedUsage();
+    expect(result.kind).toBe('error');
+    if (result.kind === 'error') expect(result.code).toBe('unavailable');
+  });
+
+  it('degrades a missing route (old backend) to route_unavailable', async () => {
+    vi.mocked(fetch).mockResolvedValue(
+      new Response(JSON.stringify({ message: 'not found', error: 'Not Found', statusCode: 404 }), {
+        status: 404,
+        headers: { 'content-type': 'application/json' },
+      }),
+    );
+    const result = await createApi().getManagedUsage();
+    expect(result).toMatchObject({ kind: 'error', code: 'route_unavailable' });
+  });
+
+  it('degrades a server-auth 401 to unauthenticated', async () => {
+    vi.mocked(fetch).mockResolvedValue(
+      new Response(JSON.stringify({ code: 40101, msg: 'Unauthorized', request_id: 'req_1' }), {
+        status: 401,
+        headers: { 'content-type': 'application/json' },
+      }),
+    );
+    const result = await createApi().getManagedUsage();
+    expect(result).toMatchObject({ kind: 'error', code: 'unauthenticated' });
+  });
+
+  it('degrades a plain HTTP 401 to unauthenticated', async () => {
+    vi.mocked(fetch).mockResolvedValue(
+      new Response(JSON.stringify({ message: 'Unauthorized' }), {
+        status: 401,
+        headers: { 'content-type': 'application/json' },
+      }),
+    );
+    const result = await createApi().getManagedUsage();
+    expect(result).toMatchObject({ kind: 'error', code: 'unauthenticated' });
+  });
+});
+
 describe('DaemonKimiWebApi.connectEvents', () => {
   let connection: KimiEventConnection | undefined;
 
diff --git a/packages/agent-core-v2/src/app/auth/auth.ts b/packages/agent-core-v2/src/app/auth/auth.ts
index a9f97c6ef1..d8bf04ba37 100644
--- a/packages/agent-core-v2/src/app/auth/auth.ts
+++ b/packages/agent-core-v2/src/app/auth/auth.ts
@@ -3,14 +3,16 @@
  *
  * Defines the public contracts of authentication: the `AuthStatus` model, the
  * `IOAuthService` used to drive device-code login / logout / flow inspection,
- * to resolve a per-provider `BearerTokenProvider`, and to refresh a managed
- * OAuth provider's server-side model configuration, the `IOAuthToolkit`
+ * to resolve a per-provider `BearerTokenProvider`, to refresh a managed
+ * OAuth provider's server-side model configuration, and to fetch managed
+ * account usage quotas, the `IOAuthToolkit`
  * device-code client that `IOAuthService` delegates the OAuth protocol to, and
  * the `IAuthSummaryService` used to summarize auth state and provide the
  * prompt auth-readiness gate. App-scoped — shared across the application.
  */
 
 import type {
+  AuthManagedUsageResult,
   BearerTokenProvider,
   KimiOAuthLoginOptions,
   KimiOAuthLoginResult,
@@ -20,6 +22,8 @@ import type {
 import { createDecorator, type ServiceIdentifier } from '#/_base/di/instantiation';
 import { Error2 } from '#/_base/errors/errors';
 
+export type { AuthManagedUsageResult } from '@moonshot-ai/kimi-code-oauth';
+
 import type { OAuthRef } from '#/app/provider/provider';
 
 import { AuthErrors } from './errors';
@@ -47,6 +51,7 @@ export interface IOAuthService {
   refreshOAuthProviderModels(): Promise<RefreshOAuthProviderModelsResponse>;
   resolveTokenProvider(provider: string, oauthRef?: OAuthRef): BearerTokenProvider | undefined;
   getCachedAccessToken(provider: string, oauthRef?: OAuthRef): Promise<string | undefined>;
+  getManagedUsage(provider?: string): Promise<AuthManagedUsageResult>;
 }
 
 export const IOAuthService: ServiceIdentifier<IOAuthService> =
@@ -62,6 +67,10 @@ export interface IOAuthToolkit {
     oauthRef?: KimiOAuthTokenRef,
   ): Promise<string | undefined>;
   tokenProvider(providerName?: string, oauthRef?: KimiOAuthTokenRef): BearerTokenProvider;
+  getManagedUsage(
+    providerName?: string,
+    options?: { oauthRef?: KimiOAuthTokenRef; baseUrl?: string },
+  ): Promise<AuthManagedUsageResult>;
 }
 
 export const IOAuthToolkit: ServiceIdentifier<IOAuthToolkit> =
diff --git a/packages/agent-core-v2/src/app/auth/authService.ts b/packages/agent-core-v2/src/app/auth/authService.ts
index 00e402f978..0e077ffa72 100644
--- a/packages/agent-core-v2/src/app/auth/authService.ts
+++ b/packages/agent-core-v2/src/app/auth/authService.ts
@@ -27,6 +27,7 @@ import {
   resolveKimiCodeLoginAuth,
   resolveKimiCodeOAuthRef,
   resolveKimiCodeRuntimeAuth,
+  type AuthManagedUsageResult,
   type BearerTokenProvider,
   type DeviceAuthorization,
   type ManagedKimiConfigShape,
@@ -261,6 +262,21 @@ export class OAuthService extends Disposable implements IOAuthService {
     return this.toolkit.getCachedAccessToken(provider, this.resolveRuntimeOAuthRef(provider, oauthRef));
   }
 
+  getManagedUsage(provider = KIMI_CODE_PROVIDER_NAME): Promise<AuthManagedUsageResult> {
+    const config = this.providerService.get(provider);
+    if (provider !== KIMI_CODE_PROVIDER_NAME) {
+      return this.toolkit.getManagedUsage(provider, {
+        oauthRef: config?.oauth,
+        baseUrl: config?.baseUrl,
+      });
+    }
+    const auth = resolveKimiCodeRuntimeAuth({
+      configuredBaseUrl: config?.baseUrl,
+      configuredOAuthRef: config?.oauth,
+    });
+    return this.toolkit.getManagedUsage(provider, { oauthRef: auth.oauthRef, baseUrl: auth.baseUrl });
+  }
+
   refreshOAuthProviderModels(): Promise<RefreshOAuthProviderModelsResponse> {
     const run = this.refreshChain.then(() => this.doRefreshOAuthProviderModels());
     this.refreshChain = run.then(
diff --git a/packages/agent-core-v2/src/app/auth/oauthProtocol.ts b/packages/agent-core-v2/src/app/auth/oauthProtocol.ts
index 8d6cb90dbf..a45b0a6708 100644
--- a/packages/agent-core-v2/src/app/auth/oauthProtocol.ts
+++ b/packages/agent-core-v2/src/app/auth/oauthProtocol.ts
@@ -2,8 +2,9 @@
  * `auth` domain — the v1 OAuth wire DTO schemas.
  *
  * Request/response shapes of the v1 `/oauth/*` endpoints plus the managed
- * OAuth provider model-refresh response, defined as zod schemas so the
- * transports validate against the same contract the `IOAuthService` returns.
+ * OAuth provider model-refresh and usage responses, defined as zod schemas so
+ * the transports validate against the same contract the `IOAuthService`
+ * returns.
  */
 
 import { z } from 'zod';
@@ -107,3 +108,47 @@ export const refreshOAuthProviderModelsResponseSchema = z.object({
 export type RefreshOAuthProviderModelsResponse = z.infer<
   typeof refreshOAuthProviderModelsResponseSchema
 >;
+
+export const managedUsageRowSchema = z.object({
+  label: z.string(),
+  used: z.number().int().min(0),
+  limit: z.number().int().min(0),
+  reset_hint: z.string().optional(),
+  reset_at: z.string().optional(),
+  window_seconds: z.number().int().positive().optional(),
+});
+export type ManagedUsageRow = z.infer<typeof managedUsageRowSchema>;
+
+export const boosterWalletSchema = z.object({
+  balance_cents: z.number().int().min(0),
+  total_cents: z.number().int().min(0),
+  monthly_charge_limit_enabled: z.boolean(),
+  monthly_charge_limit_cents: z.number().int().min(0),
+  monthly_used_cents: z.number().int().min(0),
+  currency: z.string(),
+});
+export type BoosterWallet = z.infer<typeof boosterWalletSchema>;
+
+export const managedUsageOkSchema = z.object({
+  kind: z.literal('ok'),
+  summary: managedUsageRowSchema.nullable(),
+  limits: z.array(managedUsageRowSchema),
+  extra_usage: boosterWalletSchema.nullable(),
+});
+export type ManagedUsageOk = z.infer<typeof managedUsageOkSchema>;
+
+export const managedUsageErrorCodeSchema = z.enum(['unauthenticated', 'unavailable']);
+export type ManagedUsageErrorCode = z.infer<typeof managedUsageErrorCodeSchema>;
+
+export const managedUsageErrorSchema = z.object({
+  kind: z.literal('error'),
+  code: managedUsageErrorCodeSchema,
+  message: z.string(),
+});
+export type ManagedUsageError = z.infer<typeof managedUsageErrorSchema>;
+
+export const managedUsageResponseSchema = z.discriminatedUnion('kind', [
+  managedUsageOkSchema,
+  managedUsageErrorSchema,
+]);
+export type ManagedUsageResponse = z.infer<typeof managedUsageResponseSchema>;
diff --git a/packages/agent-core-v2/test/app/auth/auth.test.ts b/packages/agent-core-v2/test/app/auth/auth.test.ts
index 6081ef9243..a4e624c02b 100644
--- a/packages/agent-core-v2/test/app/auth/auth.test.ts
+++ b/packages/agent-core-v2/test/app/auth/auth.test.ts
@@ -74,6 +74,7 @@ interface FakeToolkit {
   readonly logout: ReturnType<typeof vi.fn>;
   readonly getCachedAccessToken: ReturnType<typeof vi.fn>;
   readonly tokenProvider: ReturnType<typeof vi.fn>;
+  readonly getManagedUsage: ReturnType<typeof vi.fn>;
 }
 
 describe('OAuthService', () => {
@@ -141,6 +142,7 @@ describe('OAuthService', () => {
       logout: vi.fn().mockResolvedValue({ providerName: OAUTH_PROVIDER, ok: true }),
       getCachedAccessToken: vi.fn().mockResolvedValue(undefined),
       tokenProvider: vi.fn().mockReturnValue({ getAccessToken: async () => 'access-token' }),
+      getManagedUsage: vi.fn().mockResolvedValue({ kind: 'error', message: 'not configured' }),
     };
     ix = createServices(disposables, {
       base: [registerBootstrapServices, registerTelemetryServices],
@@ -367,6 +369,32 @@ describe('OAuthService', () => {
     );
   });
 
+  it('getManagedUsage resolves the runtime credential slot and passes the toolkit result through', async () => {
+    const okResult = {
+      kind: 'ok' as const,
+      summary: { label: 'Weekly limit', used: 40, limit: 1000, resetHint: undefined },
+      limits: [{ label: '5h limit', used: 1, limit: 100, resetHint: undefined }],
+      extraUsage: null,
+    };
+    toolkit.getManagedUsage.mockResolvedValue(okResult);
+    const svc = createService();
+    await expect(svc.getManagedUsage()).resolves.toBe(okResult);
+    expect(toolkit.getManagedUsage).toHaveBeenCalledWith(OAUTH_PROVIDER, {
+      oauthRef: expect.objectContaining({ key: EXAMPLE_COM_SCOPED_REF.key }),
+      baseUrl: 'https://api.example.com',
+    });
+  });
+
+  it('getManagedUsage passes toolkit errors through unchanged', async () => {
+    toolkit.getManagedUsage.mockResolvedValue({ kind: 'error', status: 401, message: 'unauthorized' });
+    const svc = createService();
+    await expect(svc.getManagedUsage()).resolves.toEqual({
+      kind: 'error',
+      status: 401,
+      message: 'unauthorized',
+    });
+  });
+
   it('startLogin rejects when the device authorization fails before onDeviceCode', async () => {
     toolkit.login.mockRejectedValue(new Error('device authorization request failed'));
     const svc = createService();
diff --git a/packages/agent-core-v2/test/app/model/modelResolver-runtime.test.ts b/packages/agent-core-v2/test/app/model/modelResolver-runtime.test.ts
index 94f13a7ed3..07b251561b 100644
--- a/packages/agent-core-v2/test/app/model/modelResolver-runtime.test.ts
+++ b/packages/agent-core-v2/test/app/model/modelResolver-runtime.test.ts
@@ -33,6 +33,7 @@ function stubOAuth(): IOAuthService {
     refreshOAuthProviderModels: () => Promise.reject(new Error('not implemented')),
     resolveTokenProvider: () => undefined,
     getCachedAccessToken: () => Promise.resolve(undefined),
+    getManagedUsage: () => Promise.reject(new Error('not implemented')),
   };
 }
 
diff --git a/packages/kap-server/src/routes/oauth.ts b/packages/kap-server/src/routes/oauth.ts
index 774e06688c..9dc09e4f24 100644
--- a/packages/kap-server/src/routes/oauth.ts
+++ b/packages/kap-server/src/routes/oauth.ts
@@ -5,18 +5,22 @@
  *   GET    /oauth/login   poll current flow state  → OAuthFlowSnapshot | null
  *   DELETE /oauth/login   cancel pending flow       → { cancelled, status }
  *   POST   /oauth/logout  logout                    → { logged_out, provider }
+ *   GET    /oauth/usage   managed account quotas   → ManagedUsageResponse
  *
  * Backed by the v2 `IOAuthService` (Core scope), which already returns the
  * protocol wire types, so the handlers only swap the v1 accessor
  * (`ix.invokeFunction`) for the v2 one (`core.accessor.get`).
  */
 
-import { IOAuthService, type Scope } from '@moonshot-ai/agent-core-v2';
+import { IOAuthService, type AuthManagedUsageResult, type Scope } from '@moonshot-ai/agent-core-v2';
 import {
+  managedUsageResponseSchema,
   oauthFlowSnapshotSchema,
   oauthFlowStartSchema,
   oauthLoginCancelResponseSchema,
   oauthLogoutResponseSchema,
+  type ManagedUsageResponse,
+  type ManagedUsageRow,
 } from '@moonshot-ai/agent-core-v2/app/auth/oauthProtocol';
 import { z } from 'zod';
 
@@ -151,4 +155,70 @@ export function registerOAuthRoutes(app: RouteHost, core: Scope): void {
     logoutRoute.options,
     logoutRoute.handler as Parameters<RouteHost['post']>[2],
   );
+
+  // GET /oauth/usage — managed account quotas (5h / weekly / booster wallet) --
+  const usageRoute = defineRoute(
+    {
+      method: 'GET',
+      path: '/oauth/usage',
+      success: { data: managedUsageResponseSchema },
+      description: 'Get managed-platform usage quotas for the managed OAuth provider',
+      tags: ['auth'],
+    },
+    async (req, reply) => {
+      const result = await core.accessor.get(IOAuthService).getManagedUsage();
+      reply.send(okEnvelope(toWireManagedUsage(result), req.id));
+    },
+  );
+  app.get(
+    usageRoute.path,
+    usageRoute.options,
+    usageRoute.handler as Parameters<RouteHost['get']>[2],
+  );
+}
+
+function toWireRow(row: {
+  label: string;
+  used: number;
+  limit: number;
+  resetHint?: string;
+  resetAt?: string;
+  windowSeconds?: number;
+}): ManagedUsageRow {
+  return {
+    label: row.label,
+    used: row.used,
+    limit: row.limit,
+    reset_hint: row.resetHint,
+    reset_at: row.resetAt,
+    window_seconds: row.windowSeconds,
+  };
+}
+
+function toWireManagedUsage(result: AuthManagedUsageResult): ManagedUsageResponse {
+  if (result.kind === 'error') {
+    // Only the managed platform's 401 means "log in again"; every other
+    // failure (404, timeout, unreadable token store) is a plain unavailable.
+    return {
+      kind: 'error',
+      code: result.status === 401 ? 'unauthenticated' : 'unavailable',
+      message: result.message,
+    };
+  }
+  return {
+    kind: 'ok',
+    summary: result.summary === null ? null : toWireRow(result.summary),
+    limits: result.limits.map(toWireRow),
+    extra_usage:
+      result.extraUsage === null
+        ? null
+        : {
+            balance_cents: result.extraUsage.balanceCents,
+            total_cents: result.extraUsage.totalCents,
+            monthly_charge_limit_enabled: result.extraUsage.monthlyChargeLimitEnabled,
+            monthly_charge_limit_cents: result.extraUsage.monthlyChargeLimitCents,
+            monthly_used_cents: result.extraUsage.monthlyUsedCents,
+            currency: result.extraUsage.currency,
+          },
+  };
 }
diff --git a/packages/kap-server/test/__snapshots__/apiSurface.snapshot.test.ts.snap b/packages/kap-server/test/__snapshots__/apiSurface.snapshot.test.ts.snap
index b9bb042f93..c1ad5baeab 100644
--- a/packages/kap-server/test/__snapshots__/apiSurface.snapshot.test.ts.snap
+++ b/packages/kap-server/test/__snapshots__/apiSurface.snapshot.test.ts.snap
@@ -84,6 +84,10 @@ exports[`API surface snapshot > matches the documented v2 route table and meta e
       "GET",
       "/api/v1/oauth/login",
     ],
+    [
+      "GET",
+      "/api/v1/oauth/usage",
+    ],
     [
       "GET",
       "/api/v1/providers",
diff --git a/packages/kap-server/test/auth.test.ts b/packages/kap-server/test/auth.test.ts
index 73bf30d6bb..f77955b1e7 100644
--- a/packages/kap-server/test/auth.test.ts
+++ b/packages/kap-server/test/auth.test.ts
@@ -3,6 +3,15 @@ import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 
 import { authSummarySchema, type AuthSummary } from '@moonshot-ai/agent-core-v2/app/authLegacy/authLegacy';
+import {
+  managedUsageResponseSchema,
+  type ManagedUsageResponse,
+} from '@moonshot-ai/agent-core-v2/app/auth/oauthProtocol';
+import {
+  IOAuthService,
+  type IOAuthService as IOAuthServiceType,
+  type ScopeSeed,
+} from '@moonshot-ai/agent-core-v2';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 import { type RunningServer, startServer } from '../src/start';
@@ -133,3 +142,156 @@ describe('server-v2 GET /api/v1/auth', () => {
     expect(summary.ready).toBe(false);
   });
 });
+
+describe('server-v2 GET /api/v1/oauth/usage', () => {
+  let server: RunningServer | undefined;
+  let home: string | undefined;
+  let base: string;
+
+  beforeEach(async () => {
+    home = await mkdtemp(join(tmpdir(), 'kimi-server-v2-usage-'));
+  });
+
+  afterEach(async () => {
+    if (server !== undefined) {
+      await server.close();
+      server = undefined;
+    }
+    if (home !== undefined) {
+      await rm(home, { recursive: true, force: true });
+      home = undefined;
+    }
+  });
+
+  async function boot(seeds?: ScopeSeed): Promise<void> {
+    server = await startServer({
+      host: '127.0.0.1',
+      port: 0,
+      homeDir: home,
+      logLevel: 'silent',
+      seeds,
+    });
+    base = `http://127.0.0.1:${server.port}`;
+  }
+
+  async function getUsage(): Promise<ManagedUsageResponse> {
+    const res = await authedFetch(server as RunningServer, base, '/api/v1/oauth/usage');
+    expect(res.status).toBe(200);
+    const body = (await res.json()) as Envelope<unknown>;
+    expect(body.code).toBe(0);
+    return managedUsageResponseSchema.parse(body.data);
+  }
+
+  function oauthUsageStub(
+    getManagedUsage: IOAuthServiceType['getManagedUsage'],
+  ): IOAuthServiceType {
+    return {
+      _serviceBrand: undefined,
+      startLogin: async () => {
+        throw new Error('unused');
+      },
+      getFlow: () => undefined,
+      cancelLogin: async () => {
+        throw new Error('unused');
+      },
+      logout: async () => {
+        throw new Error('unused');
+      },
+      status: async () => ({ loggedIn: false }),
+      refreshOAuthProviderModels: async () => {
+        throw new Error('unused');
+      },
+      resolveTokenProvider: () => undefined,
+      getCachedAccessToken: async () => undefined,
+      getManagedUsage,
+    };
+  }
+
+  it('returns kind=error when no managed token exists', async () => {
+    await boot();
+    // Empty token store → the toolkit surfaces an error result (no network).
+    const parsed = await getUsage();
+    expect(parsed.kind).toBe('error');
+  });
+
+  it('maps the ok result to the snake_case wire contract', async () => {
+    const okResult = {
+      kind: 'ok' as const,
+      summary: {
+        label: 'Weekly limit',
+        used: 40,
+        limit: 1000,
+        resetHint: 'resets in 6d',
+        resetAt: '2026-07-24T00:00:00Z',
+      },
+      limits: [
+        {
+          label: '5h limit',
+          used: 30,
+          limit: 100,
+          resetHint: 'resets in 4h',
+          resetAt: '2026-07-17T09:00:00Z',
+          windowSeconds: 18000,
+        },
+      ],
+      extraUsage: {
+        balanceCents: 1000,
+        totalCents: 2000,
+        monthlyChargeLimitEnabled: true,
+        monthlyChargeLimitCents: 20000,
+        monthlyUsedCents: 5000,
+        currency: 'USD',
+      },
+    };
+    const seeds = [
+      [IOAuthService, oauthUsageStub(async () => okResult)],
+    ] as unknown as ScopeSeed;
+    await boot(seeds);
+
+    const parsed = await getUsage();
+    expect(parsed).toEqual({
+      kind: 'ok',
+      summary: {
+        label: 'Weekly limit',
+        used: 40,
+        limit: 1000,
+        reset_hint: 'resets in 6d',
+        reset_at: '2026-07-24T00:00:00Z',
+      },
+      limits: [
+        {
+          label: '5h limit',
+          used: 30,
+          limit: 100,
+          reset_hint: 'resets in 4h',
+          reset_at: '2026-07-17T09:00:00Z',
+          window_seconds: 18000,
+        },
+      ],
+      extra_usage: {
+        balance_cents: 1000,
+        total_cents: 2000,
+        monthly_charge_limit_enabled: true,
+        monthly_charge_limit_cents: 20000,
+        monthly_used_cents: 5000,
+        currency: 'USD',
+      },
+    });
+  });
+
+  it('maps a 401 toolkit error to code=unauthenticated', async () => {
+    const seeds = [
+      [IOAuthService, oauthUsageStub(async () => ({ kind: 'error' as const, status: 401, message: 'expired' }))],
+    ] as unknown as ScopeSeed;
+    await boot(seeds);
+    expect(await getUsage()).toEqual({ kind: 'error', code: 'unauthenticated', message: 'expired' });
+  });
+
+  it('maps other toolkit errors to code=unavailable', async () => {
+    const seeds = [
+      [IOAuthService, oauthUsageStub(async () => ({ kind: 'error' as const, message: 'boom' }))],
+    ] as unknown as ScopeSeed;
+    await boot(seeds);
+    expect(await getUsage()).toEqual({ kind: 'error', code: 'unavailable', message: 'boom' });
+  });
+});
diff --git a/packages/kap-server/test/modelCatalog.test.ts b/packages/kap-server/test/modelCatalog.test.ts
index 15b216e433..15f5f6b143 100644
--- a/packages/kap-server/test/modelCatalog.test.ts
+++ b/packages/kap-server/test/modelCatalog.test.ts
@@ -285,6 +285,9 @@ describe('server-v2 /api/v1 model/provider catalog', () => {
       refreshOAuthProviderModels,
       resolveTokenProvider: () => undefined,
       getCachedAccessToken: async () => undefined,
+      getManagedUsage: async () => {
+        throw new Error('unused');
+      },
     };
   }
 
diff --git a/packages/oauth/src/managed-usage.ts b/packages/oauth/src/managed-usage.ts
index 3869e2b11b..b81ea5eae9 100644
--- a/packages/oauth/src/managed-usage.ts
+++ b/packages/oauth/src/managed-usage.ts
@@ -70,6 +70,12 @@ export interface UsageRow {
   readonly used: number;
   readonly limit: number;
   readonly resetHint?: string | undefined;
+  /** Raw reset timestamp from the payload (ISO), when present — lets clients
+   *  localize / re-relativize the reset hint instead of parsing `resetHint`. */
+  readonly resetAt?: string;
+  /** Rolling window length in seconds, when the payload declares one — lets
+   *  clients localize the row label (e.g. "5h limit" / "5 小时限额"). */
+  readonly windowSeconds?: number;
 }
 
 export interface BoosterWalletInfo {
@@ -159,7 +165,10 @@ export function parseManagedUsagePayload(payload: unknown): ParsedManagedUsage {
       const window = isRecord(windowRaw) ? windowRaw : {};
       const label = limitLabel(item, detail, window, idx);
       const row = toUsageRow(detail, label);
-      if (row !== null) limits.push(row);
+      if (row !== null) {
+        const windowSeconds = windowSecondsFrom(window, item, detail);
+        limits.push(windowSeconds === null ? row : { ...row, windowSeconds });
+      }
     }
   }
   const extraUsage = parseBoosterWallet(rec['boosterWallet']);
@@ -189,9 +198,51 @@ function toUsageRow(raw: unknown, defaultLabel: string): UsageRow | null {
     used: used ?? 0,
     limit: limit ?? 0,
     resetHint,
+    resetAt: rawResetAt(raw),
   };
 }
 
+function rawResetAt(raw: Record<string, unknown>): string | undefined {
+  for (const key of ['reset_at', 'resetAt', 'reset_time', 'resetTime']) {
+    const v = raw[key];
+    if (typeof v === 'string' && v.length > 0) return v;
+  }
+  return undefined;
+}
+
+function windowSecondsFrom(
+  window: Record<string, unknown>,
+  item: Record<string, unknown>,
+  detail: Record<string, unknown>,
+): number | null {
+  const duration = toInt(window['duration'] ?? item['duration'] ?? detail['duration']);
+  if (duration === null || duration <= 0) return null;
+  const rawUnit = window['timeUnit'] ?? item['timeUnit'] ?? detail['timeUnit'];
+  switch (parseTimeUnit(rawUnit)) {
+    case 'MINUTE':
+      return duration * 60;
+    case 'HOUR':
+      return duration * 3600;
+    case 'DAY':
+      return duration * 86400;
+    case 'SECOND':
+      return duration;
+    case null:
+      return null;
+  }
+}
+
+function parseTimeUnit(raw: unknown): 'SECOND' | 'MINUTE' | 'HOUR' | 'DAY' | null {
+  if (typeof raw !== 'string') return null;
+  const parts = raw.trim().toUpperCase().split(/[^A-Z]+/).filter(Boolean);
+  const last = parts.at(-1);
+  if (last === 'SECOND' || last === 'SECONDS') return 'SECOND';
+  if (last === 'MINUTE' || last === 'MINUTES') return 'MINUTE';
+  if (last === 'HOUR' || last === 'HOURS') return 'HOUR';
+  if (last === 'DAY' || last === 'DAYS') return 'DAY';
+  return null;
+}
+
 function limitLabel(
   item: Record<string, unknown>,
   detail: Record<string, unknown>,
@@ -204,15 +255,20 @@ function limitLabel(
   }
   const duration = toInt(window['duration'] ?? item['duration'] ?? detail['duration']);
   const rawUnit = window['timeUnit'] ?? item['timeUnit'] ?? detail['timeUnit'];
-  const timeUnit = typeof rawUnit === 'string' ? rawUnit : '';
   if (duration !== null) {
-    if (timeUnit.includes('MINUTE')) {
-      if (duration >= 60 && duration % 60 === 0) return `${String(duration / 60)}h limit`;
-      return `${String(duration)}m limit`;
+    switch (parseTimeUnit(rawUnit)) {
+      case 'MINUTE':
+        if (duration >= 60 && duration % 60 === 0) return `${String(duration / 60)}h limit`;
+        return `${String(duration)}m limit`;
+      case 'HOUR':
+        return `${String(duration)}h limit`;
+      case 'DAY':
+        return `${String(duration)}d limit`;
+      case 'SECOND':
+        return `${String(duration)}s limit`;
+      case null:
+        break;
     }
-    if (timeUnit.includes('HOUR')) return `${String(duration)}h limit`;
-    if (timeUnit.includes('DAY')) return `${String(duration)}d limit`;
-    return `${String(duration)}s limit`;
   }
   return `Limit #${String(idx + 1)}`;
 }
diff --git a/packages/oauth/src/toolkit.ts b/packages/oauth/src/toolkit.ts
index 0229db7b03..31a5b2637e 100644
--- a/packages/oauth/src/toolkit.ts
+++ b/packages/oauth/src/toolkit.ts
@@ -297,6 +297,7 @@ export class KimiOAuthToolkit<TConfig = unknown> {
     } catch (error) {
       return {
         kind: 'error',
+        status: error instanceof OAuthUnauthorizedError ? 401 : undefined,
         message: error instanceof Error ? error.message : String(error),
       };
     }
diff --git a/packages/oauth/test/managed-usage.test.ts b/packages/oauth/test/managed-usage.test.ts
index f3c493040c..cb871b17b2 100644
--- a/packages/oauth/test/managed-usage.test.ts
+++ b/packages/oauth/test/managed-usage.test.ts
@@ -122,6 +122,58 @@ describe('parseManagedUsagePayload', () => {
     expect(parsed.summary?.resetHint).toMatch(/resets in/);
   });
 
+  it('passes the raw resetAt timestamp through for client-side localization', () => {
+    const future = new Date(Date.now() + 3600_000).toISOString();
+    const parsed = parseManagedUsagePayload({ usage: { used: 1, limit: 10, reset_at: future } });
+    expect(parsed.summary?.resetAt).toBe(future);
+  });
+
+  it('exposes the rolling window in seconds for client-side localization', () => {
+    const parsed = parseManagedUsagePayload({
+      limits: [
+        { detail: { used: 1, limit: 100 }, window: { duration: 300, timeUnit: 'MINUTE' } },
+        { detail: { used: 2, limit: 50 }, window: { duration: 24, timeUnit: 'HOUR' } },
+        { detail: { used: 3, limit: 10 }, window: { duration: 7, timeUnit: 'DAY' } },
+        { detail: { used: 4, limit: 10 }, window: { duration: 5, timeUnit: 'FORTNIGHT' } },
+        { detail: { used: 5, limit: 10 } },
+      ],
+    });
+    expect(parsed.limits.map((l) => l.windowSeconds)).toEqual([
+      300 * 60,
+      24 * 3600,
+      7 * 86400,
+      undefined,
+      undefined,
+    ]);
+  });
+
+  it('treats sub-second window units as unknown instead of seconds', () => {
+    const parsed = parseManagedUsagePayload({
+      limits: [
+        { detail: { used: 1, limit: 100 }, window: { duration: 500, timeUnit: 'MILLISECOND' } },
+        { detail: { used: 2, limit: 100 }, window: { duration: 500, timeUnit: 'MILLISECONDS' } },
+        { detail: { used: 3, limit: 100 }, window: { duration: 500, timeUnit: 'MICROSECONDS' } },
+        { detail: { used: 4, limit: 100 }, window: { duration: 500, timeUnit: 'NANOSECONDS' } },
+        { detail: { used: 5, limit: 100 }, window: { duration: 30, timeUnit: 'SECOND' } },
+        { detail: { used: 6, limit: 100 }, window: { duration: 45, timeUnit: 'TIME_UNIT_SECONDS' } },
+      ],
+    });
+    expect(parsed.limits.map((l) => l.windowSeconds)).toEqual([
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      30,
+      45,
+    ]);
+    expect(parsed.limits.slice(0, 4).map((l) => l.label)).toEqual([
+      'Limit #1',
+      'Limit #2',
+      'Limit #3',
+      'Limit #4',
+    ]);
+  });
+
   it('extracts extra usage from boosterWallet.balance', () => {
     const parsed = parseManagedUsagePayload({
       usage: { used: 40, limit: 1000, name: 'Weekly limit' },
diff --git a/packages/oauth/test/toolkit.test.ts b/packages/oauth/test/toolkit.test.ts
index 6ceaae4170..218e3e3eba 100644
--- a/packages/oauth/test/toolkit.test.ts
+++ b/packages/oauth/test/toolkit.test.ts
@@ -612,6 +612,20 @@ describe('KimiOAuthToolkit', () => {
     });
   });
 
+  it('classifies a missing managed token as unauthenticated usage', async () => {
+    const toolkit = new KimiOAuthToolkit({
+      homeDir: join('/tmp', 'kimi-oauth-toolkit-test'),
+      identity: TEST_IDENTITY,
+      storage: new MemoryTokenStorage(),
+      now: () => 100,
+    });
+
+    await expect(toolkit.getManagedUsage()).resolves.toMatchObject({
+      kind: 'error',
+      status: 401,
+    });
+  });
+
   it('returns null extraUsage when the payload has no boosterWallet', async () => {
     const storage = new MemoryTokenStorage();
     storage.tokens.set('kimi-code', token('access-1'));