From 446adef0276532176da9a1d5af2861d47a35e5c0 Mon Sep 17 00:00:00 2001
From: Algis Dumbris <a.dumbris@gmail.com>
Date: Tue, 2 Jun 2026 06:01:20 +0300
Subject: [PATCH] =?UTF-8?q?feat(069-B1):=20Dashboard=20Overview=E2=86=94Us?=
 =?UTF-8?q?age=20switcher=20+=20usage=20API=20client?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Spec 069 Stream B1 (T016–T017). Adds the Overview↔Usage switcher to the
dashboard and the typed client for the A3 GET /api/v1/activity/usage
endpoint (#565).

- api: getActivityUsage(params) forwards only supplied filters
  (window/server/tool/status/top/sort); UsageAggregateResponse +
  UsageToolStat/UsageOtherBucket/UsageTimeBucket types mirror the contract.
- Dashboard: tabbed Overview↔Usage switcher rendered with v-show (never
  v-if) so Overview state survives a switch-back (SC-006). Usage panel has
  a 24h/7d/all window selector, tokens-saved headline (FR-007),
  loading/error/empty states (FR-009) and a baseline per-tool rollup table;
  the rich charts arrive in B2 (T018–T022).
- Lazy load: the aggregate is fetched on first Usage activation and on
  window change only, so the Overview first paint is never blocked (SC-004).
- Tests (TDD): activity-usage.spec (client param forwarding) +
  dashboard-usage-switcher.spec (default tab, lazy fetch, v-show preserve,
  window refetch). All 91 frontend unit tests green; vue-tsc clean.

Related #745
---
 frontend/src/services/api.ts                  |  17 +-
 frontend/src/types/api.ts                     |  62 ++++++
 frontend/src/views/Dashboard.vue              | 190 +++++++++++++++++-
 frontend/tests/unit/activity-usage.spec.ts    |  98 +++++++++
 .../unit/dashboard-usage-switcher.spec.ts     | 148 ++++++++++++++
 specs/069-observability-usage-graphs/tasks.md |   4 +-
 6 files changed, 515 insertions(+), 4 deletions(-)
 create mode 100644 frontend/tests/unit/activity-usage.spec.ts
 create mode 100644 frontend/tests/unit/dashboard-usage-switcher.spec.ts

diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 0fc3370b..1a5ba58d 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -1,4 +1,4 @@
-import type { APIResponse, Server, Tool, ToolApproval, SearchResult, StatusUpdate, SecretRef, MigrationAnalysis, ConfigSecretsResponse, GetToolCallsResponse, GetToolCallDetailResponse, GetServerToolCallsResponse, GetConfigResponse, ValidateConfigResponse, ConfigApplyResult, ServerTokenMetrics, GetRegistriesResponse, SearchRegistryServersResponse, GetSessionsResponse, GetSessionDetailResponse, InfoResponse, ActivityListResponse, ActivityDetailResponse, ActivitySummaryResponse, ImportResponse, AgentTokenInfo, CreateAgentTokenRequest, CreateAgentTokenResponse, RoutingInfo, ConnectStatusResponse, ConnectResult, OnboardingStateResponse, OnboardingMarkRequest, DiagnosticFixResponse, GlobalToolsResponse } from '@/types'
+import type { APIResponse, Server, Tool, ToolApproval, SearchResult, StatusUpdate, SecretRef, MigrationAnalysis, ConfigSecretsResponse, GetToolCallsResponse, GetToolCallDetailResponse, GetServerToolCallsResponse, GetConfigResponse, ValidateConfigResponse, ConfigApplyResult, ServerTokenMetrics, GetRegistriesResponse, SearchRegistryServersResponse, GetSessionsResponse, GetSessionDetailResponse, InfoResponse, ActivityListResponse, ActivityDetailResponse, ActivitySummaryResponse, ImportResponse, AgentTokenInfo, CreateAgentTokenRequest, CreateAgentTokenResponse, RoutingInfo, ConnectStatusResponse, ConnectResult, OnboardingStateResponse, OnboardingMarkRequest, DiagnosticFixResponse, GlobalToolsResponse, UsageQueryParams, UsageAggregateResponse } from '@/types'
 
 // Event types for API service
 export interface APIAuthEvent {
@@ -758,6 +758,21 @@ class APIService {
     return this.request<ActivitySummaryResponse>(`/api/v1/activity/summary?period=${period}`)
   }
 
+  // Spec 069 (T017): actor-owned usage aggregate backing the Usage panel.
+  // Only the supplied params are forwarded; unset filters are omitted so the
+  // daemon applies its documented defaults (window=24h, sort=resp_bytes, top=20).
+  async getActivityUsage(params: UsageQueryParams = {}): Promise<APIResponse<UsageAggregateResponse>> {
+    const searchParams = new URLSearchParams()
+    if (params.window) searchParams.append('window', params.window)
+    if (params.server) searchParams.append('server', params.server)
+    if (params.tool) searchParams.append('tool', params.tool)
+    if (params.status) searchParams.append('status', params.status)
+    if (params.top !== undefined) searchParams.append('top', String(params.top))
+    if (params.sort) searchParams.append('sort', params.sort)
+    const qs = searchParams.toString()
+    return this.request<UsageAggregateResponse>(`/api/v1/activity/usage${qs ? '?' + qs : ''}`)
+  }
+
   getActivityExportUrl(params: {
     format: 'json' | 'csv'
     type?: string
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index 6a341f46..4530d9e6 100644
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -631,6 +631,68 @@ export interface ActivitySummaryResponse {
   end_time: string
 }
 
+// Usage aggregate types (Spec 069 — GET /api/v1/activity/usage)
+
+export type UsageWindow = '24h' | '7d' | 'all'
+export type UsageSort = 'calls' | 'resp_bytes' | 'error_rate' | 'p95'
+export type UsageStatus = 'success' | 'error' | 'blocked'
+
+export interface UsageQueryParams {
+  window?: UsageWindow
+  server?: string
+  tool?: string
+  status?: UsageStatus
+  top?: number
+  sort?: UsageSort
+}
+
+// Per-(server,tool) rollup row. `avg_resp_bytes`/`avg_req_bytes` are null when
+// there are no sized (non-zero-byte) calls. `blocked` counts policy-prevented
+// attempts that never executed (excluded from `calls`, latency and bytes).
+export interface UsageToolStat {
+  server: string
+  tool: string
+  calls: number
+  errors: number
+  error_rate: number
+  blocked: number
+  total_resp_bytes: number
+  avg_resp_bytes: number | null
+  total_req_bytes: number
+  avg_req_bytes: number | null
+  sized_calls: number
+  p50_ms: number
+  p95_ms: number
+  last_used: string
+}
+
+// Present only when the tool list was truncated to `top`.
+export interface UsageOtherBucket {
+  tools_folded: number
+  calls: number
+  total_resp_bytes: number
+}
+
+// One timeline bar (executed calls only; blocked attempts excluded).
+export interface UsageTimeBucket {
+  start: string
+  calls: number
+  errors: number
+  total_resp_bytes: number
+}
+
+export interface UsageAggregateResponse {
+  window: UsageWindow
+  generated_at: string
+  freshness_ms: number
+  token_source: string
+  tokens_saved: number
+  tokens_saved_percentage: number
+  tools: UsageToolStat[]
+  other?: UsageOtherBucket
+  timeline: UsageTimeBucket[]
+}
+
 // Agent Token types (Spec 028)
 
 export interface AgentTokenInfo {
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 379674ed..875595bf 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -1,5 +1,35 @@
 <template>
   <div class="space-y-6">
+    <!-- Overview ↔ Usage switcher (Spec 069 B1 / T016). The two panels are
+         rendered with v-show (never v-if) so the Overview subtree stays mounted
+         and its state survives a switch-back (SC-006). -->
+    <div role="tablist" class="tabs tabs-boxed w-fit" data-test="dashboard-tabs">
+      <button
+        role="tab"
+        type="button"
+        class="tab"
+        :class="{ 'tab-active': activeTab === 'overview' }"
+        :aria-selected="activeTab === 'overview'"
+        data-test="dashboard-tab-overview"
+        @click="selectTab('overview')"
+      >
+        Overview
+      </button>
+      <button
+        role="tab"
+        type="button"
+        class="tab"
+        :class="{ 'tab-active': activeTab === 'usage' }"
+        :aria-selected="activeTab === 'usage'"
+        data-test="dashboard-tab-usage"
+        @click="selectTab('usage')"
+      >
+        Usage
+      </button>
+    </div>
+
+    <!-- ===== Overview panel ===== -->
+    <div v-show="activeTab === 'overview'" class="space-y-6" data-test="dashboard-overview-panel">
     <!-- Telemetry Notice Banner -->
     <TelemetryBanner />
 
@@ -376,6 +406,117 @@
 
     <!-- Hints Panel (Bottom of Page) -->
     <CollapsibleHintsPanel :hints="dashboardHints" />
+    </div>
+    <!-- ===== /Overview panel ===== -->
+
+    <!-- ===== Usage panel (Spec 069 B1). The aggregate is fetched lazily on
+         first activation and on window change so the Overview first paint is
+         never blocked (SC-004). The rich charts arrive in B2 (T018–T022); B1
+         establishes the switcher, window selector, API wiring and headline. -->
+    <div v-show="activeTab === 'usage'" class="space-y-6" data-test="dashboard-usage-panel">
+      <!-- Window selector (24h / 7d / all) -->
+      <div class="flex items-center gap-3 flex-wrap">
+        <div role="tablist" class="tabs tabs-boxed" data-test="usage-window-selector">
+          <button
+            v-for="w in usageWindows"
+            :key="w.value"
+            role="tab"
+            type="button"
+            class="tab"
+            :class="{ 'tab-active': usageWindow === w.value }"
+            :aria-selected="usageWindow === w.value"
+            :data-test="`usage-window-${w.value}`"
+            @click="setUsageWindow(w.value)"
+          >
+            {{ w.label }}
+          </button>
+        </div>
+        <span v-if="usageData" class="text-xs opacity-50" data-test="usage-freshness">
+          updated {{ usageData.freshness_ms < 1000 ? 'just now' : `${Math.round(usageData.freshness_ms / 1000)}s ago` }}
+        </span>
+      </div>
+
+      <!-- Tokens-saved headline (FR-007) -->
+      <div
+        v-if="usageData && usageData.tokens_saved > 0"
+        class="stats shadow bg-base-100 border border-base-300"
+        data-test="usage-tokens-saved"
+      >
+        <div class="stat">
+          <div class="stat-title">Tokens saved</div>
+          <div class="stat-value text-success">{{ formatNumber(usageData.tokens_saved) }}</div>
+          <div class="stat-desc">{{ usageData.tokens_saved_percentage.toFixed(1) }}% reduction · size-based proxy</div>
+        </div>
+      </div>
+
+      <!-- Loading state -->
+      <div v-if="usageLoading" class="flex items-center gap-2 text-sm opacity-60 py-8 justify-center" data-test="usage-loading">
+        <span class="loading loading-spinner loading-sm"></span>
+        Loading usage…
+      </div>
+
+      <!-- Error state -->
+      <div v-else-if="usageError" class="alert alert-error" data-test="usage-error">
+        <span>{{ usageError }}</span>
+        <button type="button" class="btn btn-sm" @click="loadUsage()">Retry</button>
+      </div>
+
+      <!-- Empty / low-data state (FR-009 / SC-007) -->
+      <div
+        v-else-if="usageData && usageData.tools.length === 0"
+        class="card bg-base-100 border border-base-300 shadow-sm"
+        data-test="usage-empty"
+      >
+        <div class="card-body items-center text-center py-10">
+          <svg class="w-10 h-10 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+          </svg>
+          <h3 class="font-semibold mt-2">No tool usage yet</h3>
+          <p class="text-sm opacity-60 max-w-md">
+            Once your AI agents start calling tools through MCPProxy, per-tool call volume,
+            response sizes, error rates and latency will appear here.
+          </p>
+        </div>
+      </div>
+
+      <!-- Per-tool rollup (B1 baseline table; B2 replaces with charts) -->
+      <div
+        v-else-if="usageData"
+        class="card bg-base-100 border border-base-300 shadow-sm overflow-x-auto"
+        data-test="usage-tools-table"
+      >
+        <table class="table table-sm">
+          <thead>
+            <tr>
+              <th>Tool</th>
+              <th class="text-right">Calls</th>
+              <th class="text-right">Errors</th>
+              <th class="text-right">Resp bytes</th>
+              <th class="text-right">p95 ms</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in usageData.tools" :key="`${row.server}:${row.tool}`" data-test="usage-tool-row">
+              <td class="font-mono text-xs">{{ row.server }}:{{ row.tool }}</td>
+              <td class="text-right">{{ row.calls }}</td>
+              <td class="text-right" :class="row.errors > 0 ? 'text-error' : 'opacity-50'">
+                {{ row.errors }}<span class="opacity-50"> ({{ (row.error_rate * 100).toFixed(1) }}%)</span>
+              </td>
+              <td class="text-right font-mono text-xs">{{ formatNumber(row.total_resp_bytes) }}</td>
+              <td class="text-right font-mono text-xs">{{ row.p95_ms }}</td>
+            </tr>
+            <tr v-if="usageData.other" class="opacity-60" data-test="usage-other-row">
+              <td class="italic">other ({{ usageData.other.tools_folded }} tools)</td>
+              <td class="text-right">{{ usageData.other.calls }}</td>
+              <td></td>
+              <td class="text-right font-mono text-xs">{{ formatNumber(usageData.other.total_resp_bytes) }}</td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <!-- ===== /Usage panel ===== -->
 
     <!-- Modals -->
     <ConnectModal :show="showConnectModal" @close="showConnectModal = false" />
@@ -399,7 +540,7 @@ import AddServerModal from '@/components/AddServerModal.vue'
 import OnboardingWizard from '@/components/OnboardingWizard.vue'
 import { useOnboardingStore } from '@/stores/onboarding'
 import type { Hint } from '@/components/CollapsibleHintsPanel.vue'
-import type { ClientStatus } from '@/types'
+import type { ClientStatus, UsageAggregateResponse, UsageWindow } from '@/types'
 
 const serversStore = useServersStore()
 const systemStore = useSystemStore()
@@ -409,6 +550,53 @@ const onboardingStore = useOnboardingStore()
 const showConnectModal = ref(false)
 const showAddServer = ref(false)
 
+// --- Overview ↔ Usage switcher (Spec 069 B1 / T016) ---
+const activeTab = ref<'overview' | 'usage'>('overview')
+
+const usageWindows: { value: UsageWindow; label: string }[] = [
+  { value: '24h', label: '24h' },
+  { value: '7d', label: '7d' },
+  { value: 'all', label: 'All' },
+]
+const usageWindow = ref<UsageWindow>('24h')
+const usageData = ref<UsageAggregateResponse | null>(null)
+const usageLoading = ref(false)
+const usageError = ref<string | null>(null)
+// Lazy-load guard: the aggregate is fetched on first Usage activation only, so
+// the Overview first paint (SC-004) and switch-backs never trigger a refetch.
+let usageLoadedOnce = false
+
+const loadUsage = async () => {
+  usageLoading.value = true
+  usageError.value = null
+  try {
+    const response = await api.getActivityUsage({ window: usageWindow.value })
+    if (response.success && response.data) {
+      usageData.value = response.data
+    } else {
+      usageError.value = response.error || 'Failed to load usage data'
+    }
+  } catch (error) {
+    usageError.value = error instanceof Error ? error.message : 'Failed to load usage data'
+  } finally {
+    usageLoading.value = false
+  }
+}
+
+const selectTab = (tab: 'overview' | 'usage') => {
+  activeTab.value = tab
+  if (tab === 'usage' && !usageLoadedOnce) {
+    usageLoadedOnce = true
+    void loadUsage()
+  }
+}
+
+const setUsageWindow = (w: UsageWindow) => {
+  if (w === usageWindow.value) return
+  usageWindow.value = w
+  void loadUsage()
+}
+
 // Auto-refresh interval
 let refreshInterval: ReturnType<typeof setInterval> | null = null
 
diff --git a/frontend/tests/unit/activity-usage.spec.ts b/frontend/tests/unit/activity-usage.spec.ts
new file mode 100644
index 00000000..2eb15574
--- /dev/null
+++ b/frontend/tests/unit/activity-usage.spec.ts
@@ -0,0 +1,98 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import api from '@/services/api'
+
+// Spec 069 B1 (T017): the Web UI consumes the actor-owned usage aggregate via
+// GET /api/v1/activity/usage. The client must forward only the supplied query
+// params (window/server/tool/status/top/sort) and surface the standard
+// {success,data} envelope so the Usage panel can render the contract response.
+
+describe('api.getActivityUsage', () => {
+  beforeEach(() => {
+    api.setAPIKey('test-key')
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    api.clearAPIKey()
+  })
+
+  it('GETs the usage endpoint with the window param and returns the aggregate', async () => {
+    const payload = {
+      window: '7d',
+      generated_at: '2026-05-31T12:00:00Z',
+      freshness_ms: 1200,
+      token_source: 'bytes',
+      tokens_saved: 184320,
+      tokens_saved_percentage: 92.4,
+      tools: [
+        {
+          server: 'github',
+          tool: 'search_issues',
+          calls: 142,
+          errors: 3,
+          error_rate: 0.021,
+          blocked: 0,
+          total_resp_bytes: 5872013,
+          avg_resp_bytes: 41352,
+          total_req_bytes: 28400,
+          avg_req_bytes: 200,
+          sized_calls: 142,
+          p50_ms: 120,
+          p95_ms: 480,
+          last_used: '2026-05-31T11:58:00Z',
+        },
+      ],
+      timeline: [
+        { start: '2026-05-31T11:00:00Z', calls: 40, errors: 1, total_resp_bytes: 1200000 },
+      ],
+    }
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({ success: true, data: payload, request_id: 'req-1' }),
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    const result = await api.getActivityUsage({ window: '7d' })
+
+    expect(result.success).toBe(true)
+    expect(result.data?.window).toBe('7d')
+    expect(result.data?.tools[0].tool).toBe('search_issues')
+    expect(result.data?.tokens_saved).toBe(184320)
+
+    const [calledUrl, calledInit] = fetchMock.mock.calls[0]
+    expect(calledUrl).toBe('/api/v1/activity/usage?window=7d')
+    expect((calledInit.headers as Record<string, string>)['X-API-Key']).toBe('test-key')
+  })
+
+  it('omits unset params and only appends provided filters', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({ success: true, data: { window: '24h', tools: [], timeline: [] } }),
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await api.getActivityUsage({ window: '24h', server: 'github', sort: 'calls' })
+
+    const calledUrl = fetchMock.mock.calls[0][0] as string
+    expect(calledUrl).toContain('window=24h')
+    expect(calledUrl).toContain('server=github')
+    expect(calledUrl).toContain('sort=calls')
+    expect(calledUrl).not.toContain('tool=')
+    expect(calledUrl).not.toContain('status=')
+  })
+
+  it('defaults to no query string when called with no params', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({ success: true, data: { window: '24h', tools: [], timeline: [] } }),
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await api.getActivityUsage()
+
+    expect(fetchMock.mock.calls[0][0]).toBe('/api/v1/activity/usage')
+  })
+})
diff --git a/frontend/tests/unit/dashboard-usage-switcher.spec.ts b/frontend/tests/unit/dashboard-usage-switcher.spec.ts
new file mode 100644
index 00000000..d0d033d6
--- /dev/null
+++ b/frontend/tests/unit/dashboard-usage-switcher.spec.ts
@@ -0,0 +1,148 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { ref } from 'vue'
+import { shallowMount, flushPromises } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+
+// Spec 069 B1 (T016): Dashboard carries an Overview↔Usage switcher. Overview
+// state must survive a switch-back (SC-006 → rendered with v-show, never v-if),
+// the Usage aggregate must be fetched lazily on first activation (SC-004, so
+// the Overview first paint is never blocked) and re-fetched when the window
+// selector (24h/7d/all) changes.
+
+const usageSpy = vi.hoisted(() =>
+  vi.fn().mockResolvedValue({
+    success: true,
+    data: { window: '24h', tokens_saved: 0, tokens_saved_percentage: 0, tools: [], timeline: [] },
+  })
+)
+
+vi.mock('@/services/api', () => {
+  // Null data keeps every guarded Overview block (`v-if="tokenSavingsData"`,
+  // etc.) hidden so the un-mocked loaders don't render with undefined fields.
+  const ok = (data: unknown = null) => vi.fn().mockResolvedValue({ success: true, data })
+  // The system store opens an SSE channel on mount via api.createEventSource();
+  // hand it an inert EventSource-like object so mount() doesn't crash.
+  const fakeEventSource = {
+    onopen: null,
+    onmessage: null,
+    onerror: null,
+    addEventListener() {},
+    removeEventListener() {},
+    close() {},
+  }
+  const base: Record<string, unknown> = {
+    getActivityUsage: usageSpy,
+    createEventSource: vi.fn(() => fakeEventSource),
+    hasAPIKey: vi.fn(() => true),
+    getAPIKeyPreview: vi.fn(() => 'test…'),
+    onAuthError: vi.fn(() => () => {}),
+  }
+  return {
+    default: new Proxy(base, {
+      get(target: Record<string, unknown>, prop: string) {
+        if (prop in target) return target[prop]
+        target[prop] = ok()
+        return target[prop]
+      },
+    }),
+  }
+})
+
+vi.mock('@/composables/useSecurityScannerStatus', () => ({
+  refreshSecurityScannerStatus: vi.fn().mockResolvedValue(undefined),
+  useSecurityScannerStatus: () => ({
+    totalFindings: ref(0),
+    totalScans: ref(0),
+    loaded: ref(true),
+  }),
+}))
+
+import Dashboard from '@/views/Dashboard.vue'
+
+// jsdom has no EventSource; the system store opens one on mount.
+class FakeEventSource {
+  close() {}
+  addEventListener() {}
+  onmessage: ((e: unknown) => void) | null = null
+  onerror: ((e: unknown) => void) | null = null
+}
+
+function mountDashboard() {
+  return shallowMount(Dashboard, {
+    global: {
+      plugins: [createPinia()],
+      stubs: { RouterLink: { template: '<a><slot /></a>' } },
+    },
+  })
+}
+
+describe('Dashboard Overview↔Usage switcher', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    usageSpy.mockClear()
+    ;(globalThis as unknown as { EventSource: unknown }).EventSource = FakeEventSource
+  })
+
+  it('defaults to the Overview tab and does not fetch usage on first paint (SC-004)', async () => {
+    const wrapper = mountDashboard()
+    await flushPromises()
+
+    const overview = wrapper.find('[data-test="dashboard-overview-panel"]')
+    const usage = wrapper.find('[data-test="dashboard-usage-panel"]')
+    expect(overview.exists()).toBe(true)
+    expect(usage.exists()).toBe(true)
+    // Overview visible, Usage hidden — both kept in the DOM (v-show), so the
+    // Overview subtree is never torn down (SC-006).
+    expect(overview.isVisible()).toBe(true)
+    expect(usage.isVisible()).toBe(false)
+    // Usage data is not fetched until the tab is opened.
+    expect(usageSpy).not.toHaveBeenCalled()
+  })
+
+  it('switches to Usage, keeps Overview mounted, and lazily fetches the aggregate', async () => {
+    const wrapper = mountDashboard()
+    await flushPromises()
+
+    await wrapper.find('[data-test="dashboard-tab-usage"]').trigger('click')
+    await flushPromises()
+
+    const overview = wrapper.find('[data-test="dashboard-overview-panel"]')
+    const usage = wrapper.find('[data-test="dashboard-usage-panel"]')
+    // Overview still in the DOM (state preserved) but hidden.
+    expect(overview.exists()).toBe(true)
+    expect(overview.isVisible()).toBe(false)
+    expect(usage.isVisible()).toBe(true)
+    // Default window is 24h on first load.
+    expect(usageSpy).toHaveBeenCalledTimes(1)
+    expect(usageSpy).toHaveBeenLastCalledWith(expect.objectContaining({ window: '24h' }))
+  })
+
+  it('re-fetches with the selected window when the window selector changes', async () => {
+    const wrapper = mountDashboard()
+    await flushPromises()
+    await wrapper.find('[data-test="dashboard-tab-usage"]').trigger('click')
+    await flushPromises()
+    usageSpy.mockClear()
+
+    await wrapper.find('[data-test="usage-window-7d"]').trigger('click')
+    await flushPromises()
+
+    expect(usageSpy).toHaveBeenCalledTimes(1)
+    expect(usageSpy).toHaveBeenLastCalledWith(expect.objectContaining({ window: '7d' }))
+  })
+
+  it('switches back to Overview without re-fetching usage (cached, state preserved)', async () => {
+    const wrapper = mountDashboard()
+    await flushPromises()
+    await wrapper.find('[data-test="dashboard-tab-usage"]').trigger('click')
+    await flushPromises()
+    usageSpy.mockClear()
+
+    await wrapper.find('[data-test="dashboard-tab-overview"]').trigger('click')
+    await flushPromises()
+
+    const overview = wrapper.find('[data-test="dashboard-overview-panel"]')
+    expect(overview.isVisible()).toBe(true)
+    expect(usageSpy).not.toHaveBeenCalled()
+  })
+})
diff --git a/specs/069-observability-usage-graphs/tasks.md b/specs/069-observability-usage-graphs/tasks.md
index 8a15e5aa..6b2db082 100644
--- a/specs/069-observability-usage-graphs/tasks.md
+++ b/specs/069-observability-usage-graphs/tasks.md
@@ -56,8 +56,8 @@ Web app: Go backend under `internal/`; embedded Vue frontend under `frontend/src
 
 **Purpose**: Dashboard switcher + four chart.js visualizations + tokens-saved headline. Depends on T013 (endpoint/contract). **Owned by the Frontend/Vue engineer via a child issue.**
 
-- [ ] T016 [FE] [US4] Add Overview↔Usage switcher to `frontend/src/views/Dashboard.vue`, preserving Overview state on switch-back (SC-006); window selector (24h/7d/all); `data-test` attrs.
-- [ ] T017 [FE] Add `getActivityUsage()` to `frontend/src/services/api.ts`.
+- [X] T016 [FE] [US4] Add Overview↔Usage switcher to `frontend/src/views/Dashboard.vue`, preserving Overview state on switch-back (SC-006); window selector (24h/7d/all); `data-test` attrs.
+- [X] T017 [FE] Add `getActivityUsage()` to `frontend/src/services/api.ts`.
 - [ ] T018 [FE] [US1] `frontend/src/components/usage/CallHistogram.vue` + `ResponseSizeRanking.vue` (token-sink, labeled size-based per FR-006) using vue-chartjs.
 - [ ] T019 [FE] [US2] `frontend/src/components/usage/ErrorRateChart.vue` + per-tool latency (p50/p95).
 - [ ] T020 [FE] [US3] `frontend/src/components/usage/Timeline.vue` honoring active filters (FR-008).