feat(hub): usage fact breakdown API + admin usage/session UI + release v0.0.34

Expose UsageFact kind/capability rollups on org and project usage reports, and add admin pages that separate model tokens from external-capability meters.
2026-07-18 17:19:22 +00:00
11 changed files with 1047 additions and 134 deletions
@@ -193,13 +193,81 @@ export interface ProjectUsageRow extends UsageTotals {
 	folderId: string | null;
 }

+/** Ledger slice from UsageFact (ADR-0026): separates model tokens vs external meters. */
+export interface UsageBreakdownRow {
+	kind: string;
+	provider: string;
+	model: string | null;
+	capabilityId: string | null;
+	unit: string | null;
+	factCount: number;
+	factsWithCost: number;
+	factsWithoutCost: number;
+	inputTokens: number;
+	outputTokens: number;
+	quantity: number | null;
+	costUsd: number | null;
+}
+
 export interface UsageReport {
 	from: string | null;
 	to: string | null;
 	projects: ProjectUsageRow[];
 	totals: UsageTotals;
+	breakdown: UsageBreakdownRow[];
 }

+export interface ProjectUsageReport extends ProjectUsageRow {
+	from: string | null;
+	to: string | null;
+	breakdown: UsageBreakdownRow[];
+}
+
+export interface UsageFactRow {
+	id: string;
+	occurredAt: string;
+	kind: string;
+	provider: string;
+	model: string | null;
+	inputTokens: number | null;
+	outputTokens: number | null;
+	quantity: number | null;
+	unit: string | null;
+	costUsd: number | null;
+	costSource: string;
+	capabilityId: string | null;
+	correlationId: string | null;
+}
+
+export interface SessionRunRow {
+	id: string;
+	status: string;
+	model: string;
+	provider: string;
+	inputTokens: number | null;
+	outputTokens: number | null;
+	costUsd: number | null;
+	costSource: string | null;
+	startedAt: string;
+	finishedAt: string | null;
+	error: string | null;
+	usageFacts: UsageFactRow[];
+}
+
+export interface SessionDetail {
+	id: string;
+	provider: string;
+	roleId: string;
+	model: string;
+	title: string | null;
+	createdAt: string;
+	updatedAt: string;
+	archivedAt: string | null;
+	project: { id: string; name: string };
+	runs: SessionRunRow[];
+}
+
+
 export type CapacityDimension =
 	| 'requestRate'
 	| 'requestBodySize'
@@ -353,6 +421,8 @@ export const api = {
 		get(`${orgBase(slug)}/projects/${projectId}/sessions${limit !== undefined ? `?limit=${limit}` : ''}`) as Promise<{
 			sessions: SessionSummary[];
 		}>,
+	session: (slug: string, sessionId: string) =>
+		get(`${orgBase(slug)}/sessions/${encodeURIComponent(sessionId)}`) as Promise<SessionDetail>,
 	usage: (slug: string, params?: { from?: string; to?: string; folderId?: string }) => {
 		const q = new URLSearchParams();
 		if (params?.from) q.set('from', params.from);
@@ -361,6 +431,16 @@ export const api = {
 		const qs = q.toString();
 		return get(`${orgBase(slug)}/usage${qs ? `?${qs}` : ''}`) as Promise<UsageReport>;
 	},
+	projectUsage: (slug: string, projectId: string, params?: { from?: string; to?: string }) => {
+		const q = new URLSearchParams();
+		if (params?.from) q.set('from', params.from);
+		if (params?.to) q.set('to', params.to);
+		const qs = q.toString();
+		return get(
+			`${orgBase(slug)}/projects/${encodeURIComponent(projectId)}/usage${qs ? `?${qs}` : ''}`,
+		) as Promise<ProjectUsageReport>;
+	},
+

 	providerConnections: (slug: string) =>
 		get(`${orgBase(slug)}/provider-connections`) as Promise<{ connections: ProviderConnectionRow[] }>,
@@ -29,6 +29,52 @@ export function fmtNum(n: number): string {
 	return n.toLocaleString();
 }

+const USAGE_KIND_LABELS: Record<string, string> = {
+	model_completion: '模型完成',
+	external_capability: '外部能力',
+	tool_proxy: '工具代理',
+};
+
+const METER_UNIT_LABELS: Record<string, string> = {
+	pages: '页',
+	audio_seconds: '音频秒',
+	invocations: '次调用',
+};
+
+export function usageKindLabel(kind: string): string {
+	return USAGE_KIND_LABELS[kind] ?? kind;
+}
+
+export function meterUnitLabel(unit: string | null | undefined): string {
+	if (!unit) return '—';
+	return METER_UNIT_LABELS[unit] ?? unit;
+}
+
+export function fmtQuantity(quantity: number | null | undefined, unit: string | null | undefined): string {
+	if (quantity === null || quantity === undefined) return '—';
+	const u = meterUnitLabel(unit);
+	return u === '—' ? fmtNum(quantity) : `${fmtNum(quantity)} ${u}`;
+}
+
+export function fmtTokens(input: number | null | undefined, output: number | null | undefined): string {
+	const hasIn = input !== null && input !== undefined;
+	const hasOut = output !== null && output !== undefined;
+	if (!hasIn && !hasOut) return '—';
+	return `${fmtNum(input ?? 0)} / ${fmtNum(output ?? 0)}`;
+}
+
+export function runStatusLabel(status: string): string {
+	const key = status.toUpperCase();
+	if (key === 'COMPLETED') return '完成';
+	if (key === 'FAILED') return '失败';
+	if (key === 'CANCELED') return '取消';
+	if (key === 'TIMED_OUT') return '超时';
+	if (key === 'RUNNING') return '运行中';
+	if (key === 'QUEUED') return '排队';
+	return status;
+}
+
+
 export function orgRoleLabel(role: string): string {
 	const key = role.toUpperCase() as OrgRole;
 	return ORG_ROLE_LABELS[key] ?? role;
@@ -20,6 +20,7 @@

 	const navItems = [
 		{ key: 'overview', label: '概览', icon: 'overview' as const },
+		{ key: 'usage', label: '用量', icon: 'overview' as const },
 		{ key: 'members', label: '成员', icon: 'members' as const },
 		{ key: 'teams', label: '团队', icon: 'teams' as const },
 		{ key: 'projects', label: '项目', icon: 'projects' as const },
@@ -81,10 +82,10 @@
 		if (key === 'overview') return `/admin/org/${slug}`;
 		return `/admin/org/${slug}/${key}`;
 	}
-
 	function pageTitle(): string {
 		const key = activeKey();
 		if (key === 'overview' || key === '') return '概览';
+		if (key === 'sessions') return '会话详情';
 		return navItems.find((i) => i.key === key)?.label ?? '管理后台';
 	}

@@ -94,19 +94,56 @@
 	<div class="mb-4 flex items-end justify-between gap-3">
 		<div>
 			<h2 class="saas-section-title">用量概览</h2>
-			<p class="saas-muted">全组织智能体运行汇总</p>
+			<p class="saas-muted">totals 含全部 UsageFact；分账明细见用量页。</p>
 		</div>
+		<a class="saas-btn-secondary py-1.5! text-sm" href={`/admin/org/${orgSlug}/usage`}>完整用量报告</a>
 	</div>

 	<div class="mb-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
 		<StatCard label="运行总数" value={fmtNum(usage.totals.runCount)} />
 		<StatCard label="有成本运行" value={fmtNum(usage.totals.runsWithCost)} />
-		<StatCard label="无成本运行" value={fmtNum(usage.totals.runsWithoutCost)} />
+		<StatCard label="无成本运行" value={fmtNum(usage.totals.runsWithoutCost)} hint="未知 ≠ $0" />
 		<StatCard label="输入 tokens" value={fmtNum(usage.totals.inputTokens)} />
 		<StatCard label="输出 tokens" value={fmtNum(usage.totals.outputTokens)} />
 		<StatCard label="成本 (USD)" value={fmtCost(usage.totals.costUsd)} />
 	</div>

+	{#if usage.breakdown.length > 0}
+		<div class="saas-card overflow-hidden mb-6">
+			<div class="border-b border-surface-200 px-5 py-3 flex items-center justify-between gap-3">
+				<div>
+					<h3 class="text-sm font-semibold text-surface-800">消费来源（Top）</h3>
+					<p class="saas-muted text-xs">模型完成 vs 外部能力，按成本降序前 5</p>
+				</div>
+				<a class="text-sm text-primary-700 hover:underline" href={`/admin/org/${orgSlug}/usage`}>查看全部分账</a>
+			</div>
+			<div class="overflow-x-auto">
+				<table class="data-table">
+					<thead>
+						<tr>
+							<th>类型</th>
+							<th>供应方</th>
+							<th>模型 / 能力</th>
+							<th>次数</th>
+							<th>成本</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each [...usage.breakdown].sort((a, b) => (b.costUsd ?? -1) - (a.costUsd ?? -1)).slice(0, 5) as row}
+							<tr>
+								<td class="text-sm">{row.kind === 'external_capability' ? '外部能力' : row.kind === 'model_completion' ? '模型完成' : row.kind}</td>
+								<td class="font-mono text-xs">{row.provider}</td>
+								<td class="font-mono text-xs">{row.capabilityId ?? row.model ?? '—'}</td>
+								<td class="tabular-nums">{fmtNum(row.factCount)}</td>
+								<td class="tabular-nums">{fmtCost(row.costUsd)}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	{/if}
+
 	<div class="saas-card overflow-hidden">
 		<div class="border-b border-surface-200 px-5 py-3">
 			<h3 class="text-sm font-semibold text-surface-800">按项目用量</h3>
@@ -129,7 +166,11 @@
 					<tbody>
 						{#each usage.projects as p}
 							<tr>
-								<td class="font-medium">{p.projectName}</td>
+								<td class="font-medium">
+									<a class="hover:text-primary-700 hover:underline" href={`/admin/org/${orgSlug}/projects/${p.projectId}`}>
+										{p.projectName}
+									</a>
+								</td>
 								<td class="tabular-nums">{fmtNum(p.runCount)}</td>
 								<td class="tabular-nums text-surface-600">{fmtNum(p.inputTokens)} / {fmtNum(p.outputTokens)}</td>
 								<td class="tabular-nums">{fmtCost(p.costUsd)}</td>
@@ -7,8 +7,17 @@
 		type TeamRow,
 		type SessionSummary,
 		type ExplorerData,
+		type ProjectUsageReport,
 	} from '$lib/api';
-	import { fmtDate, permissionRoleLabel } from '$lib/format';
+	import {
+		fmtCost,
+		fmtDate,
+		fmtNum,
+		fmtQuantity,
+		fmtTokens,
+		permissionRoleLabel,
+		usageKindLabel,
+	} from '$lib/format';
 	import { PERMISSION_ROLES, PERMISSION_ROLE_LABELS } from '$lib/constants';
 	import PageHeader from '$lib/components/PageHeader.svelte';
 	import LoadingState from '$lib/components/LoadingState.svelte';
@@ -26,6 +35,7 @@
 	let proj = $state<ProjectDetail | null>(null);
 	let access = $state<TeamAccessEntry[]>([]);
 	let sessions = $state<SessionSummary[]>([]);
+	let projectUsage = $state<ProjectUsageReport | null>(null);
 	let teams = $state<TeamRow[]>([]);
 	let explorer = $state<ExplorerData | null>(null);
 	let loading = $state(true);
@@ -49,14 +59,18 @@
 			// Team list is needed for grant UI whenever the actor has project MANAGE
 			// (org admin or member). Sessions/explorer stay org-admin oversight only.
 			const needTeams = p.actorIsOrgAdmin === true || p.actorCanManageProject === true;
-			const [s, t, e] = await Promise.all([
+			const [s, t, e, u] = await Promise.all([
 				p.actorIsOrgAdmin ? api.sessions(slug, projectId) : Promise.resolve({ sessions: [] as SessionSummary[] }),
 				needTeams ? api.teams(slug) : Promise.resolve({ teams: [] as TeamRow[] }),
 				p.actorIsOrgAdmin ? api.explorer(slug) : Promise.resolve(null as ExplorerData | null),
+				p.actorIsOrgAdmin
+					? api.projectUsage(slug, projectId)
+					: Promise.resolve(null as ProjectUsageReport | null),
 			]);
 			sessions = s.sessions;
 			teams = t.teams;
 			explorer = e;
+			projectUsage = u;
 			if (p.actorIsOrgAdmin) {
 				moveFolder = p.folderId ?? '';
 			}
@@ -269,9 +283,67 @@
 	</div>

 	{#if actorIsOrgAdmin}
+		{#if projectUsage}
+			<div class="saas-card overflow-hidden mb-6">
+				<div class="border-b border-surface-200 px-5 py-3 flex items-center justify-between gap-3">
+					<div>
+						<h3 class="text-sm font-semibold">项目用量分账</h3>
+						<p class="saas-muted mt-0.5 text-xs">
+							{fmtNum(projectUsage.runCount)} 次运行 · 成本 {fmtCost(projectUsage.costUsd)} · tokens
+							{fmtTokens(projectUsage.inputTokens, projectUsage.outputTokens)}
+						</p>
+					</div>
+					<a class="text-sm text-primary-700 hover:underline" href={`/admin/org/${slug}/usage`}>组织报告</a>
+				</div>
+				{#if projectUsage.breakdown.length === 0}
+					<div class="px-5 py-4 text-sm text-surface-600">尚无 UsageFact。</div>
+				{:else}
+					<div class="overflow-x-auto">
+						<table class="data-table">
+							<thead>
+								<tr>
+									<th>类型</th>
+									<th>供应方</th>
+									<th>模型 / 能力</th>
+									<th>次数</th>
+									<th>计量</th>
+									<th>成本</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each projectUsage.breakdown as row}
+									<tr>
+										<td>
+											<span
+												class={row.kind === 'external_capability' ? 'saas-badge-primary' : 'saas-badge-success'}
+											>
+												{usageKindLabel(row.kind)}
+											</span>
+										</td>
+										<td class="font-mono text-xs">{row.provider}</td>
+										<td class="font-mono text-xs">{row.capabilityId ?? row.model ?? '—'}</td>
+										<td class="tabular-nums">{fmtNum(row.factCount)}</td>
+										<td class="tabular-nums text-xs">
+											{#if row.unit}
+												{fmtQuantity(row.quantity, row.unit)}
+											{:else}
+												{fmtTokens(row.inputTokens, row.outputTokens)}
+											{/if}
+										</td>
+										<td class="tabular-nums">{fmtCost(row.costUsd)}</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
 		<div class="saas-card overflow-hidden">
 			<div class="border-b border-surface-200 px-5 py-3">
 				<h3 class="text-sm font-semibold">智能体会话</h3>
+				<p class="saas-muted mt-0.5 text-xs">点进会话可查看每次 run 的 UsageFact 分账（模型 / 外部能力）。</p>
 			</div>
 			{#if sessions.length === 0}
 				<EmptyState title="暂无会话" description="飞书侧触发智能体后会显示在此。" />
@@ -283,6 +355,7 @@
 							<th>模型</th>
 							<th>运行次数</th>
 							<th>更新</th>
+							<th></th>
 						</tr>
 					</thead>
 					<tbody>
@@ -292,6 +365,14 @@
 								<td class="font-mono text-xs">{s.model}</td>
 								<td class="tabular-nums">{s.runCount}</td>
 								<td class="text-surface-700">{fmtDate(s.updatedAt)}</td>
+								<td class="text-right">
+									<a
+										class="text-sm text-primary-700 hover:underline"
+										href={`/admin/org/${slug}/sessions/${s.id}`}
+									>
+										详情
+									</a>
+								</td>
 							</tr>
 						{/each}
 					</tbody>
@@ -0,0 +1,235 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { api, type SessionDetail, type SessionRunRow, type UsageFactRow } from '$lib/api';
+	import {
+		fmtCost,
+		fmtDate,
+		fmtNum,
+		fmtQuantity,
+		fmtTokens,
+		runStatusLabel,
+		usageKindLabel,
+	} from '$lib/format';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import LoadingState from '$lib/components/LoadingState.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
+	import EmptyState from '$lib/components/EmptyState.svelte';
+	import Icon from '$lib/components/Icon.svelte';
+
+	const slug = $derived(page.params.slug ?? '');
+	const sessionId = $derived(page.params.sessionId ?? '');
+
+	let detail = $state<SessionDetail | null>(null);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let expandedRunId = $state<string | null>(null);
+
+	async function load() {
+		if (!slug || !sessionId) return;
+		loading = true;
+		error = null;
+		try {
+			detail = await api.session(slug, sessionId);
+			if (detail.runs.length > 0) {
+				expandedRunId = detail.runs[0]!.id;
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : String(err);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function statusClass(status: string): string {
+		const key = status.toUpperCase();
+		if (key === 'COMPLETED') return 'saas-badge-success';
+		if (key === 'FAILED' || key === 'TIMED_OUT' || key === 'CANCELED') return 'saas-badge-error';
+		return 'saas-badge-primary';
+	}
+
+	function factMeter(f: UsageFactRow): string {
+		if (f.unit) return fmtQuantity(f.quantity, f.unit);
+		if (f.inputTokens !== null || f.outputTokens !== null) {
+			return fmtTokens(f.inputTokens, f.outputTokens);
+		}
+		return '—';
+	}
+
+	function factSource(f: UsageFactRow): string {
+		if (f.capabilityId) return f.capabilityId;
+		if (f.model) return f.model;
+		return '—';
+	}
+
+	function runCostHint(run: SessionRunRow): string {
+		const factCost = run.usageFacts.reduce<number | null>((acc, f) => {
+			if (f.costUsd === null) return acc;
+			return (acc ?? 0) + f.costUsd;
+		}, null);
+		const cache = run.costUsd;
+		if (factCost !== null && cache !== null && Math.abs(factCost - cache) > 1e-9) {
+			return `运行缓存 ${fmtCost(cache)}；事实合计 ${fmtCost(factCost)}（缓存可能未含外部能力）`;
+		}
+		if (factCost !== null) return `事实合计 ${fmtCost(factCost)}`;
+		if (cache !== null) return `运行缓存 ${fmtCost(cache)}`;
+		return '成本未知';
+	}
+
+	function toggleRun(id: string) {
+		expandedRunId = expandedRunId === id ? null : id;
+	}
+
+	$effect(() => {
+		if (slug && sessionId) void load();
+	});
+</script>
+
+{#if loading}
+	<LoadingState />
+{:else if error}
+	<ErrorBanner message={error} onretry={load} />
+{:else if detail}
+	<div class="mb-2">
+		<a
+			class="inline-flex items-center gap-1 text-sm text-surface-700 hover:text-primary-700"
+			href={`/admin/org/${slug}/projects/${detail.project.id}`}
+		>
+			<Icon name="arrow-left" class="h-4 w-4" />
+			返回项目 {detail.project.name}
+		</a>
+	</div>
+
+	<PageHeader
+		title={detail.title?.trim() || '未命名会话'}
+		description={`${detail.provider} · ${detail.roleId} · ${detail.model}`}
+	/>
+
+	<div class="saas-card-pad mb-6">
+		<dl class="grid gap-x-8 gap-y-3 text-sm sm:grid-cols-2 lg:grid-cols-3">
+			<div>
+				<dt class="text-surface-600">会话 ID</dt>
+				<dd class="mt-0.5 break-all font-mono text-xs">{detail.id}</dd>
+			</div>
+			<div>
+				<dt class="text-surface-600">项目</dt>
+				<dd class="mt-0.5">
+					<a class="text-primary-700 hover:underline" href={`/admin/org/${slug}/projects/${detail.project.id}`}>
+						{detail.project.name}
+					</a>
+				</dd>
+			</div>
+			<div>
+				<dt class="text-surface-600">创建 / 更新</dt>
+				<dd class="mt-0.5 text-surface-800">{fmtDate(detail.createdAt)} · {fmtDate(detail.updatedAt)}</dd>
+			</div>
+			{#if detail.archivedAt}
+				<div>
+					<dt class="text-surface-600">已归档</dt>
+					<dd class="mt-0.5">{fmtDate(detail.archivedAt)}</dd>
+				</div>
+			{/if}
+			<div>
+				<dt class="text-surface-600">运行数</dt>
+				<dd class="mt-0.5 tabular-nums">{fmtNum(detail.runs.length)}</dd>
+			</div>
+		</dl>
+	</div>
+
+	<div class="mb-3">
+		<h2 class="saas-section-title">运行与计费事实</h2>
+		<p class="saas-muted">每条 UsageFact 是一次可计费消费；外部能力与模型完成分开列出。</p>
+	</div>
+
+	{#if detail.runs.length === 0}
+		<div class="saas-card">
+			<EmptyState title="尚无运行" description="此会话还没有 Agent run。" />
+		</div>
+	{:else}
+		<div class="space-y-3">
+			{#each detail.runs as run (run.id)}
+				{@const open = expandedRunId === run.id}
+				<div class="saas-card overflow-hidden">
+					<button
+						type="button"
+						class="flex w-full items-start justify-between gap-3 px-5 py-4 text-left hover:bg-surface-50"
+						onclick={() => toggleRun(run.id)}
+					>
+						<div class="min-w-0 space-y-1">
+							<div class="flex flex-wrap items-center gap-2">
+								<span class={statusClass(run.status)}>{runStatusLabel(run.status)}</span>
+								<span class="font-mono text-xs text-surface-700">{run.provider} / {run.model}</span>
+								<span class="font-mono text-[11px] text-surface-500">{run.id}</span>
+							</div>
+							<div class="text-xs text-surface-700">
+								{fmtDate(run.startedAt)}
+								{#if run.finishedAt}
+									→ {fmtDate(run.finishedAt)}
+								{/if}
+							</div>
+							<div class="text-xs text-surface-600">{runCostHint(run)}</div>
+							{#if run.error}
+								<div class="text-xs text-error-700">{run.error}</div>
+							{/if}
+						</div>
+						<div class="shrink-0 text-right text-sm">
+							<div class="tabular-nums text-surface-800">{fmtTokens(run.inputTokens, run.outputTokens)}</div>
+							<div class="tabular-nums font-medium">{fmtCost(run.costUsd)}</div>
+							<div class="mt-1 text-[11px] text-surface-600">{open ? '收起事实' : `${run.usageFacts.length} 条事实`}</div>
+						</div>
+					</button>
+
+					{#if open}
+						<div class="border-t border-surface-200">
+							{#if run.usageFacts.length === 0}
+								<div class="px-5 py-4">
+									<p class="text-sm text-surface-600">此 run 没有 UsageFact（可能尚未结束或未记费）。</p>
+								</div>
+							{:else}
+								<div class="overflow-x-auto">
+									<table class="data-table">
+										<thead>
+											<tr>
+												<th>时间</th>
+												<th>类型</th>
+												<th>供应方</th>
+												<th>模型 / 能力</th>
+												<th>计量</th>
+												<th>成本</th>
+												<th>来源</th>
+												<th>关联 ID</th>
+											</tr>
+										</thead>
+										<tbody>
+											{#each run.usageFacts as fact}
+												<tr>
+													<td class="whitespace-nowrap text-xs text-surface-700">{fmtDate(fact.occurredAt)}</td>
+													<td>
+														<span
+															class={fact.kind === 'external_capability'
+																? 'saas-badge-primary'
+																: 'saas-badge-success'}
+														>
+															{usageKindLabel(fact.kind)}
+														</span>
+													</td>
+													<td class="font-mono text-xs">{fact.provider}</td>
+													<td class="font-mono text-xs">{factSource(fact)}</td>
+													<td class="tabular-nums text-xs">{factMeter(fact)}</td>
+													<td class="tabular-nums">{fmtCost(fact.costUsd)}</td>
+													<td class="font-mono text-[11px] text-surface-600">{fact.costSource}</td>
+													<td class="max-w-[10rem] truncate font-mono text-[11px] text-surface-500" title={fact.correlationId ?? ''}>
+														{fact.correlationId ?? '—'}
+													</td>
+												</tr>
+											{/each}
+										</tbody>
+									</table>
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+{/if}
@@ -0,0 +1,238 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { api, type UsageReport, type UsageBreakdownRow } from '$lib/api';
+	import {
+		fmtCost,
+		fmtDateOnly,
+		fmtNum,
+		fmtQuantity,
+		fmtTokens,
+		usageKindLabel,
+	} from '$lib/format';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import StatCard from '$lib/components/StatCard.svelte';
+	import LoadingState from '$lib/components/LoadingState.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
+	import EmptyState from '$lib/components/EmptyState.svelte';
+
+	const slug = $derived(page.params.slug ?? '');
+
+	let usage = $state<UsageReport | null>(null);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let from = $state('');
+	let to = $state('');
+
+	function toIsoStart(dateLocal: string): string | undefined {
+		if (!dateLocal) return undefined;
+		const d = new Date(`${dateLocal}T00:00:00`);
+		return Number.isNaN(d.getTime()) ? undefined : d.toISOString();
+	}
+
+	function toIsoEnd(dateLocal: string): string | undefined {
+		if (!dateLocal) return undefined;
+		const d = new Date(`${dateLocal}T23:59:59.999`);
+		return Number.isNaN(d.getTime()) ? undefined : d.toISOString();
+	}
+
+	async function load() {
+		if (!slug) return;
+		loading = true;
+		error = null;
+		try {
+			usage = await api.usage(slug, {
+				...(toIsoStart(from) !== undefined ? { from: toIsoStart(from) } : {}),
+				...(toIsoEnd(to) !== undefined ? { to: toIsoEnd(to) } : {}),
+			});
+		} catch (err) {
+			error = err instanceof Error ? err.message : String(err);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function clearRange() {
+		from = '';
+		to = '';
+		void load();
+	}
+
+	function sourceLabel(row: UsageBreakdownRow): string {
+		if (row.capabilityId) return row.capabilityId;
+		if (row.model) return row.model;
+		return '—';
+	}
+
+	function meterCell(row: UsageBreakdownRow): string {
+		if (row.unit) return fmtQuantity(row.quantity, row.unit);
+		if (row.inputTokens > 0 || row.outputTokens > 0) return fmtTokens(row.inputTokens, row.outputTokens);
+		return '—';
+	}
+
+	function meterHint(row: UsageBreakdownRow): string {
+		if (row.unit) return '非 token 计量';
+		if (row.inputTokens > 0 || row.outputTokens > 0) return 'in / out tokens';
+		return '无计量';
+	}
+
+	$effect(() => {
+		if (slug) void load();
+	});
+</script>
+
+{#if loading && !usage}
+	<LoadingState />
+{:else if error && !usage}
+	<ErrorBanner message={error} onretry={load} />
+{:else if usage}
+	<PageHeader
+		title="用量报告"
+		description="按 UsageFact 分账：模型完成与外部能力（PDF→MD、ASR 等）分开汇总。缺失成本计为未知，不为 0。"
+	/>
+
+	<div class="saas-card-pad mb-6">
+		<div class="flex flex-wrap items-end gap-3">
+			<div>
+				<label class="saas-label" for="usage-from">从</label>
+				<input id="usage-from" class="saas-input" type="date" bind:value={from} />
+			</div>
+			<div>
+				<label class="saas-label" for="usage-to">到</label>
+				<input id="usage-to" class="saas-input" type="date" bind:value={to} />
+			</div>
+			<button class="saas-btn-primary py-1.5! text-sm" type="button" onclick={load} disabled={loading}>
+				{loading ? '加载中…' : '应用筛选'}
+			</button>
+			<button class="saas-btn-secondary py-1.5! text-sm" type="button" onclick={clearRange} disabled={loading}>
+				清除
+			</button>
+			{#if usage.from || usage.to}
+				<p class="saas-muted grow text-right text-xs">
+					窗口：
+					{usage.from ? fmtDateOnly(usage.from) : '—'}
+					→
+					{usage.to ? fmtDateOnly(usage.to) : '—'}
+				</p>
+			{/if}
+		</div>
+		{#if error}
+			<p class="mt-3 text-sm text-error-700">{error}</p>
+		{/if}
+	</div>
+
+	<div class="mb-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+		<StatCard label="运行总数" value={fmtNum(usage.totals.runCount)} />
+		<StatCard
+			label="有成本 / 无成本"
+			value={`${fmtNum(usage.totals.runsWithCost)} / ${fmtNum(usage.totals.runsWithoutCost)}`}
+			hint="无成本 = 成本未知，不是 $0"
+		/>
+		<StatCard label="成本 (USD)" value={fmtCost(usage.totals.costUsd)} hint="仅汇总已知 costUsd" />
+		<StatCard label="输入 tokens" value={fmtNum(usage.totals.inputTokens)} hint="主要来自模型完成" />
+		<StatCard label="输出 tokens" value={fmtNum(usage.totals.outputTokens)} hint="主要来自模型完成" />
+		<StatCard
+			label="分账条目"
+			value={fmtNum(usage.breakdown.reduce((n, b) => n + b.factCount, 0))}
+			hint={`${fmtNum(usage.breakdown.length)} 个分项`}
+		/>
+	</div>
+
+	<div class="saas-card overflow-hidden mb-6">
+		<div class="border-b border-surface-200 px-5 py-3">
+			<h3 class="text-sm font-semibold text-surface-800">按来源分账</h3>
+			<p class="saas-muted mt-0.5 text-xs">
+				kind × provider × model/capability。外部能力显示页数/秒等计量，不与 tokens 混排。
+			</p>
+		</div>
+		{#if usage.breakdown.length === 0}
+			<EmptyState title="暂无用量事实" description="跑过智能体后，模型与外部能力消费会出现在此。" />
+		{:else}
+			<div class="overflow-x-auto">
+				<table class="data-table">
+					<thead>
+						<tr>
+							<th>类型</th>
+							<th>供应方</th>
+							<th>模型 / 能力</th>
+							<th>次数</th>
+							<th>计量</th>
+							<th>有成本 / 未知</th>
+							<th>成本</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each usage.breakdown as row}
+							<tr>
+								<td>
+									<span
+										class={row.kind === 'external_capability'
+											? 'saas-badge-primary'
+											: row.kind === 'model_completion'
+												? 'saas-badge-success'
+												: 'saas-badge-primary'}
+									>
+										{usageKindLabel(row.kind)}
+									</span>
+								</td>
+								<td class="font-mono text-xs">{row.provider}</td>
+								<td class="font-mono text-xs">{sourceLabel(row)}</td>
+								<td class="tabular-nums">{fmtNum(row.factCount)}</td>
+								<td class="tabular-nums">
+									<div>{meterCell(row)}</div>
+									<div class="text-[11px] text-surface-600">{meterHint(row)}</div>
+								</td>
+								<td class="tabular-nums text-surface-700">
+									{fmtNum(row.factsWithCost)} / {fmtNum(row.factsWithoutCost)}
+								</td>
+								<td class="tabular-nums font-medium">{fmtCost(row.costUsd)}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/if}
+	</div>
+
+	<div class="saas-card overflow-hidden">
+		<div class="border-b border-surface-200 px-5 py-3">
+			<h3 class="text-sm font-semibold text-surface-800">按项目</h3>
+			<p class="saas-muted mt-0.5 text-xs">项目仍是权限边界；行内成本已含该项目全部 fact 类型。</p>
+		</div>
+		{#if usage.projects.length === 0}
+			<EmptyState title="暂无项目" description="创建项目并触发智能体后会出现用量。" />
+		{:else}
+			<div class="overflow-x-auto">
+				<table class="data-table">
+					<thead>
+						<tr>
+							<th>项目</th>
+							<th>运行</th>
+							<th>有成本 / 未知</th>
+							<th>in / out tokens</th>
+							<th>成本</th>
+							<th></th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each usage.projects as p}
+							<tr>
+								<td class="font-medium">{p.projectName}</td>
+								<td class="tabular-nums">{fmtNum(p.runCount)}</td>
+								<td class="tabular-nums text-surface-700">
+									{fmtNum(p.runsWithCost)} / {fmtNum(p.runsWithoutCost)}
+								</td>
+								<td class="tabular-nums text-surface-600">{fmtTokens(p.inputTokens, p.outputTokens)}</td>
+								<td class="tabular-nums">{fmtCost(p.costUsd)}</td>
+								<td class="text-right">
+									<a class="text-sm text-primary-700 hover:underline" href={`/admin/org/${slug}/projects/${p.projectId}`}>
+										查看项目
+									</a>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/if}
+	</div>
+{/if}
@@ -1,12 +1,12 @@
 {
  "name": "@paradigm/hub",
-  "version": "0.0.31",
+  "version": "0.0.34",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@paradigm/hub",
-      "version": "0.0.31",
+      "version": "0.0.34",
      "dependencies": {
        "@alicloud/credentials": "^2.4.5",
        "@alicloud/docmind-api20220711": "^1.4.15",
@@ -1,6 +1,6 @@
 {
  "name": "@paradigm/hub",
-  "version": "0.0.33",
+  "version": "0.0.34",
  "private": true,
  "type": "module",
  "engines": {
@@ -9,13 +9,14 @@
 * external-capability consumption (PDF→MD, ASR, …) is attributed correctly,
 * not just the main model loop. A run with no cost-bearing fact is
 * `runsWithoutCost` — ADR-0022: missing cost ≠ zero.
+ *
+ * Breakdown buckets keep kind / provider / model / capability / unit, so the
+ * admin UI can separate model tokens from non-token external meters instead of
+ * collapsing everything into a single input/output token total.
 */
 import type { Prisma, PrismaClient } from "@prisma/client";

-export interface ProjectUsageRow {
-  readonly projectId: string;
-  readonly projectName: string;
-  readonly folderId: string | null;
+export interface UsageTotals {
  readonly runCount: number;
  readonly runsWithCost: number;
  readonly runsWithoutCost: number;
@@ -24,21 +25,50 @@ export interface ProjectUsageRow {
  readonly costUsd: number | null;
 }

+export interface ProjectUsageRow extends UsageTotals {
+  readonly projectId: string;
+  readonly projectName: string;
+  readonly folderId: string | null;
+}
+
+/** One ledger slice: kind + provider + model + capability + unit. */
+export interface UsageBreakdownRow {
+  readonly kind: string;
+  readonly provider: string;
+  readonly model: string | null;
+  readonly capabilityId: string | null;
+  readonly unit: string | null;
+  readonly factCount: number;
+  readonly factsWithCost: number;
+  readonly factsWithoutCost: number;
+  readonly inputTokens: number;
+  readonly outputTokens: number;
+  /** Sum of quantity when unit is non-null; null when this bucket is token-only. */
+  readonly quantity: number | null;
+  readonly costUsd: number | null;
+}
+
 export interface UsageReport {
  readonly from: string | null;
  readonly to: string | null;
  readonly projects: readonly ProjectUsageRow[];
-  readonly totals: {
-    readonly runCount: number;
-    readonly runsWithCost: number;
-    readonly runsWithoutCost: number;
-    readonly inputTokens: number;
-    readonly outputTokens: number;
-    readonly costUsd: number | null;
-  };
+  readonly totals: UsageTotals;
+  readonly breakdown: readonly UsageBreakdownRow[];
+}
+
+export interface ProjectUsageReport extends ProjectUsageRow {
+  readonly from: string | null;
+  readonly to: string | null;
+  readonly breakdown: readonly UsageBreakdownRow[];
 }

 type FactRow = {
+  readonly kind: string;
+  readonly provider: string;
+  readonly model: string | null;
+  readonly capabilityId: string | null;
+  readonly unit: string | null;
+  readonly quantity: unknown;
  readonly inputTokens: number | null;
  readonly outputTokens: number | null;
  readonly costUsd: unknown;
@@ -49,26 +79,91 @@ type RunWithFacts = {
  readonly usageFacts: readonly FactRow[];
 };

-/** A run is "recorded with cost" if any of its facts carries a known costUsd. */
-function runHasRecordedCost(facts: readonly FactRow[]): boolean {
-  return facts.some((f) => f.costUsd !== null && f.costUsd !== undefined);
-}
+type MutableTotals = {
+  runCount: number;
+  runsWithCost: number;
+  runsWithoutCost: number;
+  inputTokens: number;
+  outputTokens: number;
+  costUsd: number | null;
+};
+
+type MutableBreakdown = {
+  kind: string;
+  provider: string;
+  model: string | null;
+  capabilityId: string | null;
+  unit: string | null;
+  factCount: number;
+  factsWithCost: number;
+  factsWithoutCost: number;
+  inputTokens: number;
+  outputTokens: number;
+  quantity: number | null;
+  costUsd: number | null;
+};
+
+type MutableProjectRow = MutableTotals & {
+  readonly projectId: string;
+  readonly projectName: string;
+  readonly folderId: string | null;
+};
+
+const FACT_SELECT = {
+  kind: true,
+  provider: true,
+  model: true,
+  capabilityId: true,
+  unit: true,
+  quantity: true,
+  inputTokens: true,
+  outputTokens: true,
+  costUsd: true,
+} as const;

-/** Decimal→number for Prisma Decimal; null/undefined → null. */
 function factCostUsdToNumber(value: unknown): number | null {
  if (value === null || value === undefined) return null;
  const n = typeof value === "number" ? value : Number(value);
  return Number.isFinite(n) ? n : null;
 }

-interface RunRollup {
+function factQuantityToNumber(value: unknown): number | null {
+  if (value === null || value === undefined) return null;
+  const n = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(n) ? n : null;
+}
+
+function breakdownKey(f: FactRow): string {
+  return [
+    f.kind,
+    f.provider,
+    f.model ?? "",
+    f.capabilityId ?? "",
+    f.unit ?? "",
+  ].join("\u0000");
+}
+
+function emptyMutableTotals(): MutableTotals {
+  return {
+    runCount: 0,
+    runsWithCost: 0,
+    runsWithoutCost: 0,
+    inputTokens: 0,
+    outputTokens: 0,
+    costUsd: null,
+  };
+}
+
+function addCost(existing: number | null, add: number): number {
+  return (existing ?? 0) + add;
+}
+
+function rollupRunTokensAndCost(facts: readonly FactRow[]): {
  readonly hasCost: boolean;
  readonly inputTokens: number;
  readonly outputTokens: number;
  readonly costUsd: number | null;
-}
-
-function rollupRun(facts: readonly FactRow[]): RunRollup {
+} {
  let inputTokens = 0;
  let outputTokens = 0;
  let costUsd: number | null = null;
@@ -79,12 +174,118 @@ function rollupRun(facts: readonly FactRow[]): RunRollup {
    const c = factCostUsdToNumber(f.costUsd);
    if (c !== null) {
      hasCost = true;
-      costUsd = (costUsd ?? 0) + c;
+      costUsd = addCost(costUsd, c);
    }
  }
  return { hasCost, inputTokens, outputTokens, costUsd };
 }

+function accumulateBreakdown(
+  buckets: Map<string, MutableBreakdown>,
+  facts: readonly FactRow[],
+): void {
+  for (const f of facts) {
+    const key = breakdownKey(f);
+    let bucket = buckets.get(key);
+    if (bucket === undefined) {
+      bucket = {
+        kind: f.kind,
+        provider: f.provider,
+        model: f.model,
+        capabilityId: f.capabilityId,
+        unit: f.unit,
+        factCount: 0,
+        factsWithCost: 0,
+        factsWithoutCost: 0,
+        inputTokens: 0,
+        outputTokens: 0,
+        quantity: null,
+        costUsd: null,
+      };
+      buckets.set(key, bucket);
+    }
+    bucket.factCount += 1;
+    bucket.inputTokens += f.inputTokens ?? 0;
+    bucket.outputTokens += f.outputTokens ?? 0;
+    const qty = factQuantityToNumber(f.quantity);
+    if (qty !== null) {
+      bucket.quantity = (bucket.quantity ?? 0) + qty;
+    }
+    const c = factCostUsdToNumber(f.costUsd);
+    if (c !== null) {
+      bucket.factsWithCost += 1;
+      bucket.costUsd = addCost(bucket.costUsd, c);
+    } else {
+      bucket.factsWithoutCost += 1;
+    }
+  }
+}
+
+function freezeBreakdown(buckets: Map<string, MutableBreakdown>): UsageBreakdownRow[] {
+  return [...buckets.values()]
+    .map((b) => ({
+      kind: b.kind,
+      provider: b.provider,
+      model: b.model,
+      capabilityId: b.capabilityId,
+      unit: b.unit,
+      factCount: b.factCount,
+      factsWithCost: b.factsWithCost,
+      factsWithoutCost: b.factsWithoutCost,
+      inputTokens: b.inputTokens,
+      outputTokens: b.outputTokens,
+      quantity: b.quantity,
+      costUsd: b.costUsd,
+    }))
+    .sort((a, b) => {
+      const kindCmp = a.kind.localeCompare(b.kind);
+      if (kindCmp !== 0) return kindCmp;
+      const provCmp = a.provider.localeCompare(b.provider);
+      if (provCmp !== 0) return provCmp;
+      const capA = a.capabilityId ?? "";
+      const capB = b.capabilityId ?? "";
+      const capCmp = capA.localeCompare(capB);
+      if (capCmp !== 0) return capCmp;
+      const modelA = a.model ?? "";
+      const modelB = b.model ?? "";
+      return modelA.localeCompare(modelB);
+    });
+}
+
+function freezeTotals(t: MutableTotals): UsageTotals {
+  return {
+    runCount: t.runCount,
+    runsWithCost: t.runsWithCost,
+    runsWithoutCost: t.runsWithoutCost,
+    inputTokens: t.inputTokens,
+    outputTokens: t.outputTokens,
+    costUsd: t.costUsd,
+  };
+}
+
+function applyRunToTotals(totals: MutableTotals, facts: readonly FactRow[]): void {
+  const roll = rollupRunTokensAndCost(facts);
+  totals.runCount += 1;
+  if (roll.hasCost) {
+    totals.runsWithCost += 1;
+    totals.costUsd = addCost(totals.costUsd, roll.costUsd ?? 0);
+  } else {
+    totals.runsWithoutCost += 1;
+  }
+  totals.inputTokens += roll.inputTokens;
+  totals.outputTokens += roll.outputTokens;
+}
+
+function emptyReport(from?: Date, to?: Date): UsageReport {
+  return {
+    from: from?.toISOString() ?? null,
+    to: to?.toISOString() ?? null,
+    projects: [],
+    totals: freezeTotals(emptyMutableTotals()),
+    breakdown: [],
+  };
+}
+
 export async function getOrgUsage(
  prisma: PrismaClient,
  input: {
@@ -108,101 +309,65 @@ export async function getOrgUsage(
  }

  const projectIds = projects.map((p) => p.id);
-  const runWhere: Prisma.AgentRunWhereInput = {
-    projectId: { in: projectIds },
-    ...(input.from !== undefined || input.to !== undefined
-      ? {
-          startedAt: {
-            ...(input.from !== undefined ? { gte: input.from } : {}),
-            ...(input.to !== undefined ? { lte: input.to } : {}),
-          },
-        }
-      : {}),
-  };
-
  // Date range filters by run.startedAt, matching the pre-ADR-0026 semantics:
  // a run is in or out of the window based on when it started, and all of its
  // facts come along. Filtering facts by occurredAt independently would let a
  // run contribute partial cost to a window it doesn't belong to.
  const runs = await prisma.agentRun.findMany({
-    where: runWhere,
+    where: {
+      projectId: { in: projectIds },
+      ...(input.from !== undefined || input.to !== undefined
+        ? {
+            startedAt: {
+              ...(input.from !== undefined ? { gte: input.from } : {}),
+              ...(input.to !== undefined ? { lte: input.to } : {}),
+            },
+          }
+        : {}),
+    },
    select: {
      projectId: true,
      usageFacts: {
-        select: { inputTokens: true, outputTokens: true, costUsd: true },
+        select: FACT_SELECT,
        orderBy: { occurredAt: "asc" },
      },
    },
  });

-  type MutableRow = {
-    readonly projectId: string;
-    readonly projectName: string;
-    readonly folderId: string | null;
-    runCount: number;
-    runsWithCost: number;
-    runsWithoutCost: number;
-    inputTokens: number;
-    outputTokens: number;
-    costUsd: number | null;
-  };
-
-  const byProject = new Map<string, MutableRow>();
+  const byProject = new Map<string, MutableProjectRow>();
  for (const p of projects) {
    byProject.set(p.id, {
      projectId: p.id,
      projectName: p.name,
      folderId: p.folderId,
-      runCount: 0,
-      runsWithCost: 0,
-      runsWithoutCost: 0,
-      inputTokens: 0,
-      outputTokens: 0,
-      costUsd: null,
+      ...emptyMutableTotals(),
    });
  }

+  const breakdownBuckets = new Map<string, MutableBreakdown>();
  for (const run of runs as readonly RunWithFacts[]) {
    const row = byProject.get(run.projectId);
    if (row === undefined) continue;
-    const roll = rollupRun(run.usageFacts);
-    row.runCount += 1;
-    if (roll.hasCost) {
-      row.runsWithCost += 1;
-      row.costUsd = (row.costUsd ?? 0) + (roll.costUsd ?? 0);
-    } else {
-      row.runsWithoutCost += 1;
-    }
-    row.inputTokens += roll.inputTokens;
-    row.outputTokens += roll.outputTokens;
+    applyRunToTotals(row, run.usageFacts);
+    accumulateBreakdown(breakdownBuckets, run.usageFacts);
  }

  const projectsOut: ProjectUsageRow[] = [...byProject.values()].map((r) => ({
    projectId: r.projectId,
    projectName: r.projectName,
    folderId: r.folderId,
-    runCount: r.runCount,
-    runsWithCost: r.runsWithCost,
-    runsWithoutCost: r.runsWithoutCost,
-    inputTokens: r.inputTokens,
-    outputTokens: r.outputTokens,
-    costUsd: r.costUsd,
+    ...freezeTotals(r),
  }));

-  let runCount = 0;
-  let runsWithCost = 0;
-  let runsWithoutCost = 0;
-  let inputTokens = 0;
-  let outputTokens = 0;
-  let costUsd: number | null = null;
+  const totals = emptyMutableTotals();
  for (const row of projectsOut) {
-    runCount += row.runCount;
-    runsWithCost += row.runsWithCost;
-    runsWithoutCost += row.runsWithoutCost;
-    inputTokens += row.inputTokens;
-    outputTokens += row.outputTokens;
+    totals.runCount += row.runCount;
+    totals.runsWithCost += row.runsWithCost;
+    totals.runsWithoutCost += row.runsWithoutCost;
+    totals.inputTokens += row.inputTokens;
+    totals.outputTokens += row.outputTokens;
    if (row.costUsd !== null) {
-      costUsd = (costUsd ?? 0) + row.costUsd;
+      totals.costUsd = addCost(totals.costUsd, row.costUsd);
    }
  }

@@ -210,14 +375,8 @@ export async function getOrgUsage(
    from: input.from?.toISOString() ?? null,
    to: input.to?.toISOString() ?? null,
    projects: projectsOut,
-    totals: {
-      runCount,
-      runsWithCost,
-      runsWithoutCost,
-      inputTokens,
-      outputTokens,
-      costUsd,
-    },
+    totals: freezeTotals(totals),
+    breakdown: freezeBreakdown(breakdownBuckets),
  };
 }

@@ -229,7 +388,7 @@ export async function getProjectUsage(
    readonly from?: Date | undefined;
    readonly to?: Date | undefined;
  },
-): Promise<ProjectUsageRow> {
+): Promise<ProjectUsageReport> {
  const project = await prisma.project.findFirst({
    where: { id: input.projectId, organizationId: input.organizationId },
    select: { id: true, name: true, folderId: true },
@@ -237,39 +396,41 @@ export async function getProjectUsage(
  if (project === null) {
    throw new Error(`project not found: ${input.projectId}`);
  }
-  const report = await getOrgUsage(prisma, {
-    organizationId: input.organizationId,
-    from: input.from,
-    to: input.to,
-  });
-  const row = report.projects.find((p) => p.projectId === project.id);
-  return (
-    row ?? {
-      projectId: project.id,
-      projectName: project.name,
-      folderId: project.folderId,
-      runCount: 0,
-      runsWithCost: 0,
-      runsWithoutCost: 0,
-      inputTokens: 0,
-      outputTokens: 0,
-      costUsd: null,
-    }
-  );
-}

-function emptyReport(from?: Date, to?: Date): UsageReport {
-  return {
-    from: from?.toISOString() ?? null,
-    to: to?.toISOString() ?? null,
-    projects: [],
-    totals: {
-      runCount: 0,
-      runsWithCost: 0,
-      runsWithoutCost: 0,
-      inputTokens: 0,
-      outputTokens: 0,
-      costUsd: null,
+  const runs = await prisma.agentRun.findMany({
+    where: {
+      projectId: project.id,
+      ...(input.from !== undefined || input.to !== undefined
+        ? {
+            startedAt: {
+              ...(input.from !== undefined ? { gte: input.from } : {}),
+              ...(input.to !== undefined ? { lte: input.to } : {}),
+            },
+          }
+        : {}),
    },
+    select: {
+      usageFacts: {
+        select: FACT_SELECT,
+        orderBy: { occurredAt: "asc" },
+      },
+    },
+  });
+
+  const totals = emptyMutableTotals();
+  const breakdownBuckets = new Map<string, MutableBreakdown>();
+  for (const run of runs) {
+    applyRunToTotals(totals, run.usageFacts as readonly FactRow[]);
+    accumulateBreakdown(breakdownBuckets, run.usageFacts as readonly FactRow[]);
+  }
+
+  return {
+    projectId: project.id,
+    projectName: project.name,
+    folderId: project.folderId,
+    ...freezeTotals(totals),
+    from: input.from?.toISOString() ?? null,
+    to: input.to?.toISOString() ?? null,
+    breakdown: freezeBreakdown(breakdownBuckets),
  };
 }
@@ -71,7 +71,7 @@ describe("usage rollup from UsageFact (ADR-0026)", () => {
          occurredAt: new Date(startedAt.getTime() + i * 1000),
          kind: f.kind ?? "model_completion",
          provider: f.provider ?? "openrouter",
-          model: f.model ?? "mock-model",
+          model: f.model !== undefined ? f.model : "mock-model",
          inputTokens: f.inputTokens ?? null,
          outputTokens: f.outputTokens ?? null,
          costUsd: f.costUsd ?? null,
@@ -158,6 +158,32 @@ describe("usage rollup from UsageFact (ADR-0026)", () => {
    expect(report.totals.inputTokens).toBe(100);
    expect(report.totals.outputTokens).toBe(50);
    expect(report.totals.costUsd).toBeCloseTo(0.035, 8);
+    // ADR-0026 breakdown: model tokens vs external non-token meter must not collapse.
+    expect(report.breakdown).toHaveLength(2);
+    const modelBucket = report.breakdown.find((b) => b.kind === "model_completion");
+    const capBucket = report.breakdown.find((b) => b.kind === "external_capability");
+    expect(modelBucket).toMatchObject({
+      provider: "openrouter",
+      model: "mock-model",
+      capabilityId: null,
+      inputTokens: 100,
+      outputTokens: 50,
+      quantity: null,
+      costUsd: 0.02,
+      factCount: 1,
+    });
+    expect(capBucket).toMatchObject({
+      provider: "mineru",
+      model: null,
+      capabilityId: "pdf_to_md_bundle",
+      unit: "pages",
+      quantity: 12,
+      inputTokens: 0,
+      outputTokens: 0,
+      costUsd: 0.015,
+      factCount: 1,
+    });
+
  });

  it("a run with no facts at all is runsWithoutCost and contributes nothing", async () => {
@@ -180,6 +206,8 @@ describe("usage rollup from UsageFact (ADR-0026)", () => {
    expect(row.projectId).toBe("proj-x");
    expect(row.runCount).toBe(1);
    expect(row.costUsd).toBeCloseTo(0.1, 8);
+    expect(row.breakdown).toHaveLength(1);
+    expect(row.breakdown[0]).toMatchObject({ kind: "model_completion", costUsd: 0.1, inputTokens: 1 });
  });

  it("returns an empty report for an org with no projects", async () => {
@@ -187,5 +215,7 @@ describe("usage rollup from UsageFact (ADR-0026)", () => {
    expect(report.projects).toHaveLength(0);
    expect(report.totals.runCount).toBe(0);
    expect(report.totals.costUsd).toBeNull();
+    expect(report.breakdown).toEqual([]);
+
  });
 });