agy-mcp-bridge 0.1.13 → 0.1.14

package/README.md

@@ -407,6 +407,12 @@ Lưu ý bảo mật: nội dung yêu cầu và phản hồi được hiển th
 - **Chưa biết:** nội dung chi tiết bên trong `step_update` (chỉ biết tên các khóa ngoài cùng: `event`, `step_update`), nên phần tóm tắt chọn các trường dễ hiểu (`title`, `type`, `status`, `tool`, `message`, `path`...) nếu có, nếu không thì hiện tên các trường. Cũng chưa kiểm chứng kết quả cuối ở chế độ này có cùng dạng với chế độ JSON (`status`, `response`, `num_turns`). Nếu không giống, task báo lỗi kèm tên các trường của `result` (chỉ tên, không có giá trị) và cách quay về chế độ JSON: tắt tùy chọn này.
 - Muốn bridge biết chính xác hình dạng bên trong các sự kiện, chạy lại `agy-mcp-bridge probe-stream` ở bản mới: nó in thêm tên và kiểu của các trường bên trong (không in giá trị).
 
+**Theo dõi mức sử dụng (tab "Sử dụng"):** kết quả JSON của `agy` có các trường `conversation_id`, `duration_seconds`, `num_turns`, `response`, `status` và `usage`. Bridge ghi lại, cho mỗi task đã chạy xong, thời gian chạy, thời gian `agy` báo, số lượt, số bước (khi bật tiến độ) và **mọi giá trị số trong `usage`** (giữ nguyên tên trường, trường lồng nhau nối bằng dấu chấm, ví dụ `cache.read_tokens`). Tab "Sử dụng" hiện tổng task (theo trạng thái), tổng thời gian, usage cộng dồn, biểu đồ 14 ngày (theo múi giờ của trình duyệt), bảng theo model và theo mức suy luận, và các task gần nhất; chi tiết mỗi task có dòng "Usage (agy báo)". Dữ liệu nằm ở `.bridge-state/usage.jsonl` (mỗi task một dòng, giữ qua các lần khởi động lại, tự cắt bớt khi file quá 1 MB, không ghi đường dẫn hay nội dung task) và `stats` trong bản ghi task.
+
+- **Đây là mức dùng qua bridge, không phải hạn mức.** `agy` không có lệnh xem hạn mức còn lại và bridge không bịa ra con số đó; xem hạn mức trên tài khoản Antigravity của bạn.
+- Bridge **không biết trước** các trường bên trong `usage` (tên trường do `agy` quyết định): nó cộng mọi giá trị số; một vài tên phổ biến (`input_tokens`, `output_tokens`, `total_tokens`...) được dịch nhãn. Task nào kết quả không có `usage` thì ghi nhận là "không có", không phải 0.
+- Chỉ thống kê task bắt đầu từ bản có tính năng này trở đi. Số liệu usage không được gửi cho Codex/Claude (không tốn token).
+
 **Biết Antigravity còn hoạt động, và gia hạn thay vì dừng giữa chừng (time out mềm):** ở chế độ `--print --output-format json`, `agy` không in gì cho đến khi xong, nên bridge không thể biết chắc nó đang "suy luận". Bridge chỉ nhìn được những dấu hiệu còn sống: byte mới ở output, và (khi bạn bật tính năng này) việc file log của `agy` được ghi thêm. Cài đặt → "Gia hạn khi Antigravity còn hoạt động" (mặc định **tắt**, áp dụng cho task mới) làm như sau:
 
 - Bridge yêu cầu `agy` ghi log vào `.bridge-state/agy-logs/<task_id>.log` (cờ `--log-file`) và cho `agy` giới hạn tuyệt đối làm print timeout của chính nó, thay vì hạn của task.

package/dist/src/tasks/manager.js

@@ -9,6 +9,7 @@ import { redact } from '../security/redact.js';
 import { delegationState } from '../delegation.js';
 import { startProcess, terminateOwned } from '../antigravity/process.js';
 import { invocationFor, finalEnvelope } from '../antigravity/invocation.js';
+import { appendUsage, extractStats } from '../usage.js';
 import { MAX_RECENT_STEPS, rawStep, readProgress, summarizeStep } from '../progress.js';
 import { helperDirectory } from '../paths.js';
 import { readWait } from '../wait-setting.js';
@@ -321,6 +322,7 @@ export class TaskManager {
                 if (!entry.stop) {
                     try {
                         const result = finalEnvelope(rawStdout, transport);
+                        entry.stats = extractStats(result, entry.steps?.total ?? null);
                         task.cli_status = typeof result.status === 'string' ? result.status : null;
                         task.final_response = typeof result.response === 'string' ? redact(result.response) : null;
                         if (Array.isArray(result.denied_actions))
@@ -361,6 +363,11 @@ export class TaskManager {
                     }
                 }
                 await this.persist(task);
+                await appendUsage(this.runtime.stateDirectory, {
+                    at: task.ended_at ?? new Date().toISOString(), status: task.status, model: entry.request?.model ?? null, effort: entry.request?.effort ?? null,
+                    permission: entry.request?.permission ?? null, duration_ms: task.duration_ms, agy_duration_seconds: entry.stats?.agy_duration_seconds ?? null,
+                    num_turns: entry.stats?.num_turns ?? null, steps: entry.steps?.total ?? null, usage: entry.stats?.usage ?? null
+                });
                 this.busy = false;
                 entry.finish?.();
                 void this.startNext();
@@ -435,7 +442,7 @@ export class TaskManager {
             ...(request.context === null ? {} : { context: request.context }), timeout_seconds: request.timeout_seconds
         }, request.client) : null;
         const entry = this.entries.get(id);
-        return { task, request, prompt, activity: entry ? this.activityOf(entry) : null };
+        return { task, request, prompt, activity: entry ? this.activityOf(entry) : null, stats: entry?.stats ?? null };
     }
     /** The latest sign of life: output on stdout/stderr or a write to agy's log file (the file's modification time). 0 when there has been none. */
     lastActivity(entry) {
@@ -555,7 +562,7 @@ export class TaskManager {
         try {
             await mkdir(this.tasksDirectory, { recursive: true, mode: 0o700 });
             const file = path.join(this.tasksDirectory, `${task.task_id}.json`);
-            await writeFile(`${file}.tmp`, JSON.stringify({ task, request: this.entries.get(task.task_id)?.request ?? null }), { mode: 0o600 });
+            await writeFile(`${file}.tmp`, JSON.stringify({ task, request: this.entries.get(task.task_id)?.request ?? null, stats: this.entries.get(task.task_id)?.stats ?? null }), { mode: 0o600 });
             await rename(`${file}.tmp`, file);
         }
         catch { /* history is a convenience, not a correctness requirement */ }
@@ -575,6 +582,7 @@ export class TaskManager {
         }
         const loaded = [];
         const requests = new Map();
+        const statsById = new Map();
         for (const name of names) {
             try {
                 const parsed = JSON.parse(await readFile(path.join(this.tasksDirectory, name), 'utf8'));
@@ -585,6 +593,8 @@ export class TaskManager {
                     continue;
                 if (request)
                     requests.set(task.task_id, request);
+                if (parsed.task && parsed.stats)
+                    statsById.set(task.task_id, parsed.stats);
                 if (task.status === 'running' || task.status === 'queued') {
                     const wasQueued = task.status === 'queued';
                     task.status = 'failed';
@@ -605,7 +615,7 @@ export class TaskManager {
         for (const task of loaded.slice(this.config.max_retained_tasks))
             await this.forget(task.task_id);
         for (const task of keep)
-            this.entries.set(task.task_id, { task, request: requests.get(task.task_id), done: Promise.resolve() });
+            this.entries.set(task.task_id, { task, request: requests.get(task.task_id), stats: statsById.get(task.task_id), done: Promise.resolve() });
         return keep.length;
     }
     // Diagnose only; never remove a lock automatically, never kill anything. PIDs can be reused, so wording stays cautious.

package/dist/src/ui/routes.js

@@ -8,6 +8,7 @@ import { knownUpdate, readPackageInfo } from '../update.js';
 import { workspaceChanges } from '../changes.js';
 import { validModelId, writeModel } from '../models.js';
 import { readProgress, writeProgress } from '../progress.js';
+import { readUsage, summarizeUsage } from '../usage.js';
 import { EFFORT_LEVELS, isEffortLevel, readEffort, writeEffort } from '../effort.js';
 import { MAX_ABSOLUTE_LIMIT_SECONDS, MIN_ABSOLUTE_LIMIT_SECONDS, isAbsoluteLimit, readSoftTimeout, writeSoftTimeout } from '../soft-timeout.js';
 import { MAX_SETTING_WAIT_SECONDS, MIN_WAIT_SECONDS, clientToolTimeoutSeconds, isWaitSeconds, writeWait } from '../wait-setting.js';
@@ -144,6 +145,11 @@ export async function handleUi(req, res, ctx) {
             json(res, 200, await overview(ctx));
             return true;
         }
+        if (pathname === '/ui/api/usage' && method === 'GET') {
+            const offset = Number(new URL(req.url ?? '', 'http://localhost').searchParams.get('tz') ?? '0');
+            json(res, 200, summarizeUsage(await readUsage(ctx.manager.stateDirectory), { tzOffsetMinutes: Number.isInteger(offset) && Math.abs(offset) <= 840 ? offset : 0 }));
+            return true;
+        }
         const detail = pathname.match(new RegExp(`^/ui/api/tasks/(${UUID})$`));
         if (detail && method === 'GET') {
             json(res, 200, ctx.manager.detail(detail[1]));

package/dist/src/usage.js

@@ -0,0 +1,120 @@
+import { appendFile, readFile, stat, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+/**
+ * Usage of Antigravity as the bridge sees it. agy's result carries `usage`, `duration_seconds` and `num_turns`; what is inside `usage` is not
+ * assumed: every numeric value in it is kept under its own name (nested names joined with a dot) and summed. Nothing here is a quota: the
+ * bridge has no source for "remaining" and does not invent one.
+ */
+export const USAGE_FILE = 'usage.jsonl';
+const MAX_FILE_BYTES = 1_000_000;
+const KEEP_RECORDS = 3000;
+const SAFE_KEY = /^[A-Za-z0-9_.-]{1,60}$/;
+/** Numeric leaves of an object, at most three levels deep and 40 of them, keyed by their dotted path. */
+export function flattenNumbers(value, prefix = '', depth = 0, out = {}) {
+    if (typeof value === 'number') {
+        if (Number.isFinite(value) && prefix && SAFE_KEY.test(prefix))
+            out[prefix] = value;
+        return out;
+    }
+    if (depth >= 3 || typeof value !== 'object' || value === null || Array.isArray(value))
+        return out;
+    for (const [key, inner] of Object.entries(value)) {
+        if (Object.keys(out).length >= 40)
+            break;
+        flattenNumbers(inner, prefix ? `${prefix}.${key}` : key, depth + 1, out);
+    }
+    return out;
+}
+const finiteOrNull = (value) => typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : null;
+/** What the result of one task says about its own cost. All parts are optional: agy may leave any of them out. */
+export function extractStats(result, steps) {
+    const usage = flattenNumbers(result.usage);
+    return { usage: Object.keys(usage).length ? usage : null, agy_duration_seconds: finiteOrNull(result.duration_seconds), num_turns: finiteOrNull(result.num_turns), steps };
+}
+/** One line per finished task, kept across restarts (the task history itself keeps only the latest tasks). Trimmed when the file grows large. */
+export async function appendUsage(stateDirectory, record) {
+    const file = path.join(stateDirectory, USAGE_FILE);
+    try {
+        await appendFile(file, JSON.stringify(record) + '\n', { mode: 0o600 });
+        if ((await stat(file)).size > MAX_FILE_BYTES) {
+            const lines = (await readFile(file, 'utf8')).split('\n').filter(Boolean);
+            await writeFile(file, lines.slice(-KEEP_RECORDS).join('\n') + '\n', { mode: 0o600 });
+        }
+    }
+    catch { /* statistics are a convenience, never a reason to fail a task */ }
+}
+export async function readUsage(stateDirectory) {
+    let text;
+    try {
+        text = await readFile(path.join(stateDirectory, USAGE_FILE), 'utf8');
+    }
+    catch {
+        return [];
+    }
+    const records = [];
+    for (const line of text.split('\n')) {
+        if (!line.trim())
+            continue;
+        try {
+            const value = JSON.parse(line);
+            if (typeof value.at === 'string' && Number.isFinite(Date.parse(value.at)) && typeof value.status === 'string' && typeof value.duration_ms === 'number')
+                records.push(value);
+        }
+        catch { /* skip a damaged line */ }
+    }
+    return records;
+}
+const add = (target, source) => {
+    for (const [key, value] of Object.entries(source ?? {}))
+        target[key] = (target[key] ?? 0) + value;
+};
+const sum = (values) => values.reduce((total, value) => total + (value ?? 0), 0);
+const newGroup = () => ({ tasks: 0, completed: 0, duration_ms: 0, turns: 0, usage: {} });
+function addTo(group, record) {
+    group.tasks += 1;
+    if (record.status === 'completed')
+        group.completed += 1;
+    group.duration_ms += record.duration_ms;
+    group.turns += record.num_turns ?? 0;
+    add(group.usage, record.usage);
+}
+/**
+ * Totals, a split by model and by effort, and the last `days` days. Days are the viewer's local days: `tzOffsetMinutes` is what
+ * `new Date().getTimezoneOffset()` returns in the browser (minutes behind UTC, so UTC+7 is -420).
+ */
+export function summarizeUsage(records, options = {}) {
+    const now = options.now ?? Date.now();
+    const offsetMs = -(options.tzOffsetMinutes ?? 0) * 60000;
+    const days = options.days ?? 14;
+    const dayOf = (ms) => new Date(ms + offsetMs).toISOString().slice(0, 10);
+    const totals = newGroup();
+    const byStatus = {};
+    const byModel = new Map();
+    const byEffort = new Map();
+    const byDay = new Map();
+    for (let i = days - 1; i >= 0; i--)
+        byDay.set(dayOf(now - i * 86400000), newGroup());
+    for (const record of records) {
+        addTo(totals, record);
+        byStatus[record.status] = (byStatus[record.status] ?? 0) + 1;
+        const model = record.model ?? 'default';
+        byModel.set(model, byModel.get(model) ?? newGroup());
+        addTo(byModel.get(model), record);
+        const effort = record.effort ?? 'default';
+        byEffort.set(effort, byEffort.get(effort) ?? newGroup());
+        addTo(byEffort.get(effort), record);
+        const day = byDay.get(dayOf(Date.parse(record.at)));
+        if (day)
+            addTo(day, record);
+    }
+    const list = (map) => [...map].map(([key, group]) => ({ key, ...group })).sort((a, b) => b.tasks - a.tasks).slice(0, 12);
+    return {
+        since: records.length ? records[0].at : null,
+        totals: { ...totals, by_status: byStatus, steps: sum(records.map(r => r.steps)), agy_duration_seconds: sum(records.map(r => r.agy_duration_seconds)),
+            with_usage: records.filter(r => r.usage).length },
+        by_model: list(byModel), by_effort: list(byEffort),
+        by_day: [...byDay].map(([day, group]) => ({ day, ...group })),
+        recent: records.slice(-15).reverse().map(r => ({ at: r.at, status: r.status, model: r.model, effort: r.effort, duration_ms: r.duration_ms, agy_duration_seconds: r.agy_duration_seconds, num_turns: r.num_turns, usage: r.usage }))
+    };
+}
+//# sourceMappingURL=usage.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agy-mcp-bridge",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Local authenticated HTTP MCP bridge that lets Codex and Claude Code delegate bounded coding tasks to the Antigravity CLI (agy)",
   "license": "MIT",
   "keywords": [

package/ui/app.css

@@ -219,3 +219,10 @@ pre.log { margin: 0; padding: 12px; border-radius: 10px; background: #0b0e14; co
 .steps { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
 .steps li { padding: 6px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
 .steps details { margin-top: 4px; }
+.bars { display: grid; gap: 6px; margin-top: 8px; }
+.bar-row { display: grid; grid-template-columns: 52px 1fr 130px; gap: 10px; align-items: center; }
+.bar-track { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
+.bar-fill { height: 100%; background: var(--accent); }
+.usage-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
+.usage-table th, .usage-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
+.usage-table th { font-weight: 600; color: var(--muted); }

package/ui/app.js

@@ -5,6 +5,7 @@ const STATUS = {queued: 'Đang chờ', running: 'Đang chạy', completed: 'Hoà
 const NS = 'http://www.w3.org/2000/svg';
 const ICONS = {
   tasks: 'M4 6h16M4 12h16M4 18h10',
+  usage: 'M4 20V10M10 20V4M16 20v-8M22 20H2',
   settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z',
   out: 'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'
 };
@@ -244,6 +245,18 @@ async function setProgress(enabled) {
   try { await api('progress', {method: 'POST', body: {enabled}}); notify(enabled ? 'Đã bật tiến độ từng bước (áp dụng cho task mới)' : 'Đã tắt tiến độ từng bước'); await refresh(); }
   catch (error) { notify(error.message); await refresh(); }
 }
+let usageAt = 0;
+/** Usage numbers change only when a task ends, so they are fetched when the page opens and then at most every 15 seconds. */
+async function loadUsage(force) {
+  if (!force && Date.now() - usageAt < 15000) return;
+  usageAt = Date.now();
+  try { state.usage = await api(`usage?tz=${new Date().getTimezoneOffset()}`); } catch { /* keep the numbers already shown */ }
+  patch();
+}
+const USAGE_LABELS = {input_tokens: 'Token vào', output_tokens: 'Token ra', total_tokens: 'Tổng token', cached_tokens: 'Token từ bộ nhớ đệm', cache_read_tokens: 'Token đọc từ bộ nhớ đệm', reasoning_tokens: 'Token suy luận', thinking_tokens: 'Token suy luận', prompt_tokens: 'Token vào', completion_tokens: 'Token ra'};
+const usageName = key => USAGE_LABELS[key] ? `${USAGE_LABELS[key]} (${key})` : key;
+const number = value => Number(value).toLocaleString('vi-VN', {maximumFractionDigits: 2});
+const usageLine = usage => usage && Object.keys(usage).length ? Object.entries(usage).map(([key, value]) => `${key} ${number(value)}`).join(' · ') : null;
 async function copy(text) {
   try { await navigator.clipboard.writeText(text); notify('Đã sao chép'); } catch { notify('Không thể sao chép tự động'); }
 }
@@ -362,7 +375,7 @@ function detailView() {
   const facts = h('dl', {class: 'kv'},
     ...[['Gửi lúc', clock(task.queued_at || task.started_at)], ['Bắt đầu chạy', queued ? 'Chưa chạy' : clock(task.started_at)], ['Kết thúc', clock(task.ended_at)],
       ['Thời gian chạy', running ? elapsedEl(task.started_at) : queued ? '—' : duration(task.duration_ms)],
-      ['Giới hạn', request ? `${request.timeout_seconds}s` : '—'], ['Model', request && 'model' in request ? request.model || 'mặc định' : '—'], ['Quyền', request && request.permission ? (PERMISSION_LEVELS.find(l => l.id === request.permission)?.title || request.permission) : '—'], ['Effort', request && request.effort ? request.effort : '—'], ['Exit code', task.exit_code ?? '—'], ['PID', task.pid ?? '—'],
+      ['Giới hạn', request ? `${request.timeout_seconds}s` : '—'], ['Model', request && 'model' in request ? request.model || 'mặc định' : '—'], ['Quyền', request && request.permission ? (PERMISSION_LEVELS.find(l => l.id === request.permission)?.title || request.permission) : '—'], ['Effort', request && request.effort ? request.effort : '—'], ['Usage (agy báo)', usageLine(state.detail?.stats?.usage) ?? '—'], ['Exit code', task.exit_code ?? '—'], ['PID', task.pid ?? '—'],
       ['CLI status', task.cli_status ?? '—']].map(([k, v]) => h('div', {}, h('dt', {text: k}), h('dd', {}, typeof v === 'string' || typeof v === 'number' ? String(v) : v))));
 
   const asker = request?.client ? `Tech Lead · ${request.client}` : 'Tech Lead (Codex / Claude)';
@@ -488,6 +501,39 @@ function permissionCard(o) {
     p.controllable ? null : h('div', {class: 'callout warn', text: `Đang bị khóa bởi biến môi trường BRIDGE_AGY_PERMISSIONS${p.reason && p.reason !== 'BRIDGE_AGY_PERMISSIONS' ? ` (${p.reason})` : ''}. Đổi biến rồi khởi động lại server để mở.`}),
     h('div', {class: 'callout warn', text: 'Danh sách "Workspace được phép" chỉ kiểm tra đường dẫn của task, không phải sandbox. Với mức Tự động hoặc Toàn quyền, Antigravity có thể tác động ra ngoài thư mục đó.'}));
 }
+function usageView(u) {
+  const head = h('div', {class: 'page-head'}, h('div', {}, h('h1', {text: 'Sử dụng'}), h('p', {text: 'Số liệu bridge ghi lại từ các task đã chạy qua nó.'})),
+    h('button', {class: 'btn small', onclick: () => loadUsage(true), text: 'Làm mới'}));
+  if (!u) return [head, h('div', {class: 'card empty', text: 'Đang tải…'})];
+  const t = u.totals;
+  const status = Object.entries(t.by_status).map(([key, count]) => `${STATUS[key] || key} ${count}`).join(' · ');
+  const cards = h('section', {class: 'stats', 'aria-label': 'Tổng quan sử dụng'},
+    stat('Task đã chạy', number(t.tasks), t.tasks ? `${number(t.completed)} hoàn tất · ${status}` : 'chưa có task nào'),
+    stat('Thời gian chạy', duration(t.duration_ms), 'tổng, do bridge đo'),
+    stat('Thời gian agy báo', t.agy_duration_seconds ? duration(t.agy_duration_seconds * 1000) : '—', 'tổng duration_seconds của agy'),
+    stat('Số lượt / bước', `${number(t.turns)} / ${number(t.steps)}`, 'num_turns / bước báo cáo'));
+  const callout = h('div', {class: 'callout warn', text: `Đây là mức dùng qua bridge${u.since ? ` kể từ ${clock(u.since)}` : ''} (nhật ký lưu qua các lần khởi động lại), không phải hạn mức. Hạn mức còn lại không có nguồn từ agy nên bridge không hiển thị; xem trên tài khoản Antigravity của bạn.`});
+  const sums = Object.entries(t.usage);
+  const usageCard = h('section', {class: 'card panel wide'}, h('h2', {text: 'Usage do agy báo'}),
+    sums.length ? [h('dl', {class: 'rows'}, sums.map(([key, value]) => row(usageName(key), number(value)))),
+        h('p', {class: 'muted', text: `Cộng dồn từ ${number(t.with_usage)} task có trường usage trong kết quả của agy. Tên trường do agy quyết định; bridge cộng mọi giá trị số.`})]
+      : h('p', {class: 'muted', text: 'Chưa có task nào mà kết quả của agy kèm số liệu usage. Với task chạy ở chế độ JSON hoặc stream, nếu agy trả trường usage thì tổng sẽ hiện ở đây.'}));
+  const peak = Math.max(1, ...u.by_day.map(d => d.tasks));
+  const bars = h('div', {class: 'bars'}, u.by_day.map(d => {
+    const fill = h('div', {class: 'bar-fill'}); fill.style.width = `${(d.tasks / peak * 100).toFixed(1)}%`;
+    return h('div', {class: 'bar-row'}, h('span', {class: 'muted mono', text: `${d.day.slice(8)}/${d.day.slice(5, 7)}`}), h('div', {class: 'bar-track'}, fill),
+      h('span', {class: 'mono', text: d.tasks ? `${d.tasks} · ${duration(d.duration_ms)}` : '0'}));
+  }));
+  const dayCard = h('section', {class: 'card panel wide'}, h('h2', {text: '14 ngày gần nhất'}), bars);
+  const groupTable = (title, groups, firstColumn) => h('section', {class: 'card panel wide'}, h('h2', {text: title}),
+    groups.length ? h('table', {class: 'usage-table'}, h('thead', {}, h('tr', {}, ...[firstColumn, 'Task', 'Hoàn tất', 'Thời gian', 'Usage'].map(c => h('th', {text: c})))),
+      h('tbody', {}, groups.map(g => h('tr', {}, h('td', {class: 'mono', text: g.key}), h('td', {text: number(g.tasks)}), h('td', {text: number(g.completed)}), h('td', {text: duration(g.duration_ms)}), h('td', {class: 'muted', text: usageLine(g.usage) ?? '—'})))))
+      : h('p', {class: 'muted', text: 'Chưa có dữ liệu.'}));
+  const recent = h('section', {class: 'card panel wide'}, h('h2', {text: 'Task gần nhất'}),
+    u.recent.length ? h('ul', {class: 'path-list'}, u.recent.map(r => h('li', {}, `${clock(r.at)} · ${STATUS[r.status] || r.status} · ${r.model || 'model mặc định'} · effort ${r.effort || 'mặc định'} · ${duration(r.duration_ms)}`,
+      usageLine(r.usage) ? h('span', {class: 'tag', text: usageLine(r.usage)}) : null))) : h('p', {class: 'muted', text: 'Chưa có task nào.'}));
+  return [head, callout, cards, usageCard, dayCard, groupTable('Theo model', u.by_model, 'Model'), groupTable('Theo mức suy luận', u.by_effort, 'Effort'), recent];
+}
 function settingsView(o) {
   const delegation = o.delegation;
   return [h('div', {class: 'page-head'}, h('div', {}, h('h1', {text: 'Cài đặt'}), h('p', {text: 'Trạng thái và giới hạn của bridge. Phần lớn chỉ đọc; chỉnh bằng file cấu hình rồi khởi động lại.'}))),
@@ -527,10 +573,10 @@ function settingsView(o) {
 
 /* ---------- Shell: built once per view change, then patched region by region ---------- */
 function mount() {
-  const nav = (view, label) => h('button', {'aria-current': state.view === view ? 'page' : null, onclick: () => { state.view = view; render(); }}, icon(view === 'tasks' ? 'tasks' : 'settings'), label);
+  const nav = (view, label) => h('button', {'aria-current': state.view === view ? 'page' : null, onclick: () => { state.view = view; render(); }}, icon(view === 'tasks' ? 'tasks' : view === 'usage' ? 'usage' : 'settings'), label);
   const live = h('div', {class: 'live', role: 'status'});
   const side = h('aside', {class: 'side'}, h('div', {class: 'brand'}, h('img', {src: '/ui/favicon.svg', alt: ''}), h('span', {text: 'Antigravity Bridge'})),
-    h('nav', {class: 'nav', 'aria-label': 'Điều hướng'}, nav('tasks', 'Task'), nav('settings', 'Cài đặt')),
+    h('nav', {class: 'nav', 'aria-label': 'Điều hướng'}, nav('tasks', 'Task'), nav('usage', 'Sử dụng'), nav('settings', 'Cài đặt')),
     h('div', {class: 'side-foot'}, live));
   const banner = h('div', {'aria-live': 'polite'});
   const main = h('main', {class: 'main'}, banner);
@@ -546,6 +592,9 @@ function mount() {
       class: 'chip-btn', 'data-filter': key, 'aria-pressed': String(state.filter === key), onclick: () => { state.filter = key; for (const b of chips.children) b.setAttribute('aria-pressed', String(b.dataset.filter === key)); patch(); }, text: label})));
     main.append(h('div', {class: 'page-head'}, h('div', {}, h('h1', {text: 'Task'}), h('p', {text: 'Nội dung trao đổi giữa Tech Lead và Antigravity.'}))),
       regions.stats, h('div', {class: 'tasks'}, h('div', {class: 'list-col'}, h('div', {class: 'list-tools'}, search, chips, regions.count), regions.list), regions.detail));
+  } else if (state.view === 'usage') {
+    regions.usage = h('div', {});
+    main.append(regions.usage);
   } else {
     regions.settings = h('div', {});
     main.append(regions.settings);
@@ -583,6 +632,9 @@ function patch() {
     if (!rebuilt) patchLogs();
     patchActivity();
     patchSteps();
+  } else if (regions.view === 'usage') {
+    loadUsage();
+    setRegion('usage', JSON.stringify(state.usage), () => usageView(state.usage));
   } else {
     if (!state.models && !state.modelsLoading) loadModels();
     setRegion('settings', JSON.stringify([state.models, o.model, o.permission, o.effort, o.wait, o.soft_timeout, o.progress, o.cli, o.delegation, o.limits, o.allowed_workspaces, o.session_workspaces, o.server.mcp_endpoint]), () => settingsView(o));