tokentrace 0.19.1 → 0.20.0

package/CHANGELOG.md

@@ -4,6 +4,98 @@ All notable changes to TokenTrace are documented here.
 
 ## Unreleased
 
+## [0.20.0] - 2026-06-12
+
+### Changed
+
+- **Overview and shell UI polish.** The dashboard shell now groups navigation by
+  task area, and the Overview summary surface makes local evidence,
+  cached/non-cache token states, and exact/estimated/unknown cost distinctions
+  easier to scan.
+- **ChatGPT app feasibility documented.** Added a recommendation to prototype
+  only a private, redacted evidence-pack ChatGPT app workflow until public
+  distribution can preserve TokenTrace's local-first privacy boundary.
+- **Private ChatGPT app prototype.** Added `tokentrace chatgpt-app` with a
+  local HTTP `/mcp` server, one read-only `get_redacted_evidence_pack` Apps SDK
+  tool, a compact MCP Apps widget resource, and a developer-mode runbook. The
+  prototype uses redacted evidence packs and does not scan files on startup or
+  publish a public app.
+- **ChatGPT app release readiness.** Added `npm run release:chatgpt:check`, a
+  hosted `/mcp` validator, a release runbook, and optional tag-workflow wiring
+  so ChatGPT app readiness can be checked alongside npm and MCP registry
+  releases while keeping OpenAI Dashboard submission and publishing manual.
+- **ChatGPT app submission kit.** Added `docs/chatgpt-app/` with step-by-step
+  personal-account Dashboard release instructions, ready-to-paste submission
+  copy, privacy and review templates, test prompts, screenshot guidance, and
+  reusable SVG app assets for the manual ChatGPT app submission flow.
+- **Development dashboard CSP avoids React issue noise.** The local dev server
+  now allows React's development-only diagnostics without relaxing the
+  production Content Security Policy.
+- **Product website moved to Baseframe Labs.** The package `homepage`, MCP
+  registry `websiteUrl`, README link, and in-app guide link now point to
+  `https://www.baseframelabs.com/apps/tokentrace`. The previous
+  `abhiyoheswaran.com` URL redirects there.
+
+## [0.19.2] - 2026-06-05
+
+### Changed
+
+- **MCP tools now run in-process.** The MCP server calls the same library
+  functions as the CLI and HTTP API instead of spawning a `tokentrace` CLI
+  subprocess per tool call, making tool calls faster and immune to nested
+  process-spawn timeouts. Payload shapes are unchanged. `run_scan` invoked over
+  MCP now records its agent action with surface `mcp` instead of `cli`.
+  `get_report` still shells out to the CLI because its report composition has
+  not yet moved into a shared library function.
+- **Stricter compile-time safety.** TypeScript now runs with
+  `noUncheckedIndexedAccess`, `noImplicitOverride`, and
+  `noFallthroughCasesInSwitch`; ~190 unguarded array/record accesses across the
+  app, library, and tests were given explicit guards. ESLint additionally
+  enforces type-aware promise rules (`no-floating-promises`,
+  `no-misused-promises`, `await-thenable`). No behavior change intended.
+- **Type-safe chart and CSV plumbing.** `RankBarChart` is generic over its row
+  type (chart keys are now checked against the data at compile time) and
+  `toCsv` accepts typed rows, removing all eight `as unknown as` casts from the
+  export route and analytics pages.
+
+### Fixed
+
+- **MCP server reports invalid CLI JSON clearly.** If an underlying
+  `tokentrace` CLI call returns unparseable JSON, the MCP server now raises a
+  descriptive error naming the command instead of a bare `JSON.parse` failure.
+- **`DELETE /api/saved-views/:id` validates the id.** A blank or
+  whitespace-only id now returns `400` instead of attempting a delete.
+- **CSV export keeps caller input out of header syntax.** The
+  `content-disposition` filename for `/api/export` now strips characters
+  outside `[a-z0-9-]` from the `type` parameter instead of interpolating it
+  raw into a quoted string.
+- **Settings scan flow no longer renders an error body as a scan result.**
+  A failed scan previously stored the `{error}` response where the last-scan
+  panel expected scan counts, which could crash the panel.
+
+### Internal
+
+- **CLI wrapper is now strict TypeScript.** `src/cli/*` (≈800 lines,
+  previously plain JS invisible to the type checker) is typed and compiled to
+  `dist/cli/main.mjs` by the runtime build; `bin/tokentrace.js` loads the
+  compiled entry and falls back to `tsx` in dev checkouts.
+- **One report engine.** `/api/reports` and `tokentrace report --type` now
+  share `src/lib/report-service.ts`; outputs verified byte-identical against
+  the previous implementations.
+- **API routes are integration-tested.** 14 new test files (59 tests) cover
+  the previously untested HTTP routes — prices, settings, files, export,
+  import-profile-preview, saved-views, saved-reports items, repair-items,
+  evidence-pack, analytics, data, operating-metadata, reports — exercising
+  real handlers against seeded SQLite databases.
+- **Tests-and-coverage CI.** A new `Tests` workflow runs the suite with v8
+  coverage, typecheck, and lint on every PR and push to main.
+- **Frontend decomposition.** The four largest UI files were split into
+  focused modules with rendering verified byte-identical: guide page
+  (658→148 lines), evidence page (590→200), session explorer (549→149),
+  settings panel (341→123, props drilling reduced 49→12 scalars). A shared
+  `useJsonRequest` hook replaces the per-component fetch/pending/error
+  boilerplate across the client components.
+
 ## [0.19.1] - 2026-06-04
 
 ### Fixed

package/README.md

@@ -8,7 +8,7 @@ Local-first AI CLI usage analytics. TokenTrace scans local CLI logs and local us
 
 TokenTrace is designed for local development machines first, with macOS-oriented defaults. It does not require a cloud account and does not send telemetry or logs anywhere.
 
-[Website](https://www.abhiyoheswaran.com/apps/tokentrace) · [Source](https://github.com/abhiyoheswaran1/tokentrace)
+[Website](https://www.baseframelabs.com/apps/tokentrace) · [Source](https://github.com/abhiyoheswaran1/tokentrace)
 
 ![TokenTrace overview dashboard](docs/assets/overview-0.12.0.png)
 

package/TOKENTRACE_AGENT.md

@@ -44,6 +44,17 @@ The MCP server does not scan on startup. Its `run_scan` tool requires
 `confirmLocalScan=true` before reading local usage files or writing the local
 database.
 
+Private ChatGPT developer-mode prototype:
+
+```bash
+tokentrace chatgpt-app selftest --json
+tokentrace chatgpt-app --port 8787 --hostname 127.0.0.1
+```
+
+This starts a local HTTP `/mcp` server for one read-only redacted evidence-pack
+tool. ChatGPT requires an HTTPS tunnel for developer-mode connector testing.
+See `docs/CHATGPT_APP_PROTOTYPE.md`.
+
 If the local dashboard is already running, the same manifest is available from:
 
 ```bash

package/app/api/evidence-pack/route.ts

@@ -1,7 +1,6 @@
 import { NextResponse } from "next/server";
-import { getAnalyticsData } from "@/src/lib/analytics";
-import { buildEvidencePack, renderEvidencePackMarkdown } from "@/src/lib/evidence-pack";
-import { buildEvidenceTrail, parseEvidenceMetric } from "@/src/lib/evidence-trail";
+import { buildMetricEvidencePack, renderEvidencePackMarkdown } from "@/src/lib/evidence-pack";
+import { parseEvidenceMetric } from "@/src/lib/evidence-trail";
 
 export const dynamic = "force-dynamic";
 
@@ -9,43 +8,7 @@ export async function GET(request: Request) {
   const url = new URL(request.url);
   const format = url.searchParams.get("format") === "markdown" ? "markdown" : "json";
   const metric = parseEvidenceMetric(url.searchParams.get("metric"));
-  const trail = buildEvidenceTrail({ metric });
-  const analytics = getAnalyticsData();
-  const pack = buildEvidencePack({
-    scope: {
-      type: "metric",
-      id: metric,
-      label: trail.title
-    },
-    totals: trail.totals,
-    confidenceDrivers: [
-      `${trail.confidence.exact.toLocaleString()} exact interactions`,
-      `${trail.confidence.estimated.toLocaleString()} estimated interactions`,
-      `${trail.confidence.unknown.toLocaleString()} unknown interactions`,
-      `Data confidence ${analytics.dataConfidence.score}/100`
-    ],
-    sourceFiles: trail.sourceFiles.map((source) => source.sourceFile),
-    parserNotes: trail.sessions
-      .map((session) => `${session.parser ?? "unknown parser"}: ${session.parserStatus ?? "unknown status"}`)
-      .slice(0, 20),
-    modelRateState: trail.sessions
-      .map((session) =>
-        session.pricingHref ? `${session.model}: model-rate link available` : `${session.model}: no model-rate link`
-      )
-      .slice(0, 20),
-    repairLinks: trail.sessions
-      .filter((session) => session.unknownCostInteractions > 0)
-      .map((session) => `/repair?source=${encodeURIComponent(session.sourceFile)}`),
-    records: trail.sessions.map((session) => ({
-      id: session.id,
-      role: "session",
-      model: session.model,
-      sourceFile: session.sourceFile,
-      totalTokens: session.totalTokens,
-      cost: session.cost,
-      interactions: session.interactions
-    }))
-  });
+  const pack = buildMetricEvidencePack({ metric });
 
   if (format === "markdown") {
     return new NextResponse(renderEvidencePackMarkdown(pack), {

package/app/api/export/route.ts

@@ -9,19 +9,21 @@ export async function GET(request: Request) {
   const type = url.searchParams.get("type") ?? "sessions";
   const analytics = getAnalyticsData();
   const debug = type.startsWith("scan-") ? getDebugData() : null;
-  let rows: Array<Record<string, unknown>>;
 
-  if (type === "scan-files") rows = (debug?.scanFiles ?? []) as Array<Record<string, unknown>>;
-  else if (type === "scan-runs") rows = (debug?.scanRuns ?? []) as Array<Record<string, unknown>>;
-  else if (type === "projects") rows = analytics.projects as unknown as Array<Record<string, unknown>>;
-  else if (type === "models") rows = analytics.models as unknown as Array<Record<string, unknown>>;
-  else if (type === "tools") rows = analytics.tools as unknown as Array<Record<string, unknown>>;
-  else rows = analytics.sessions as unknown as Array<Record<string, unknown>>;
+  let csv: string;
+  if (type === "scan-files") csv = toCsv(debug?.scanFiles ?? []);
+  else if (type === "scan-runs") csv = toCsv(debug?.scanRuns ?? []);
+  else if (type === "projects") csv = toCsv(analytics.projects);
+  else if (type === "models") csv = toCsv(analytics.models);
+  else if (type === "tools") csv = toCsv(analytics.tools);
+  else csv = toCsv(analytics.sessions);
 
-  return new NextResponse(toCsv(rows), {
+  // Keep the caller-supplied type out of header syntax: quoted-string safe.
+  const filenameType = type.replace(/[^a-z0-9-]/gi, "") || "sessions";
+  return new NextResponse(csv, {
     headers: {
       "content-type": "text/csv; charset=utf-8",
-      "content-disposition": `attachment; filename="tokentrace-${type}.csv"`
+      "content-disposition": `attachment; filename="tokentrace-${filenameType}.csv"`
     }
   });
 }

package/app/api/reports/route.ts

@@ -1,69 +1,32 @@
 import { NextResponse } from "next/server";
-import { getAnalyticsData, getScanTrustData } from "@/src/lib/analytics";
-import { buildSourceCatalog, summarizeSourceCoverage } from "@/src/lib/source-catalog";
-import { buildSavedReportDefinitions, renderSavedReport, type SavedReportFormat } from "@/src/lib/saved-reports";
+import { generateReport } from "@/src/lib/report-service";
+import type { SavedReportFormat } from "@/src/lib/saved-reports";
 
 export const dynamic = "force-dynamic";
 
-function reportRows(definitionId: string) {
-  const analytics = getAnalyticsData();
-  const trust = getScanTrustData();
-  const sourceCoverage = summarizeSourceCoverage(trust.scanFiles);
-  if (definitionId === "source-coverage") {
-    return [
-      { label: "Native files", value: sourceCoverage.nativeFiles.toLocaleString(), detail: "First-class adapters" },
-      { label: "Profile-assisted files", value: sourceCoverage.profileAssistedFiles.toLocaleString(), detail: "Import profile or generic parser" },
-      { label: "Fallback files", value: sourceCoverage.fallbackFiles.toLocaleString(), detail: "Low-confidence text or generic fallback" },
-      { label: "Imported records", value: sourceCoverage.importedRecords.toLocaleString(), detail: "Records imported from scan files" }
-    ];
-  }
-  if (definitionId === "guardrail-status") {
-    return [
-      { label: "Cost guardrail", value: analytics.usageGuardrails.cost.status, detail: `${analytics.usageGuardrails.cost.used.toFixed(2)} used` },
-      { label: "Token guardrail", value: analytics.usageGuardrails.tokens.status, detail: `${analytics.usageGuardrails.tokens.used.toLocaleString()} tokens used` },
-      { label: "Scoped guardrails", value: analytics.usageGuardrails.scoped.length.toLocaleString(), detail: "Project/model/tool limits" },
-      { label: "Anomalies", value: analytics.usageGuardrails.anomalies.length.toLocaleString(), detail: "Warning or exceeded scoped guardrails" }
-    ];
-  }
-  return [
-    { label: "Tokens", value: analytics.summary.totalTokens.toLocaleString(), detail: "Selected local data" },
-    { label: "Cost", value: `$${analytics.summary.totalCost.toFixed(2)}`, detail: "Provider estimate or source cost" },
-    { label: "Sessions", value: analytics.summary.sessions.toLocaleString(), detail: "Imported sessions" },
-    { label: "Unknown cost", value: analytics.summary.unknownCostInteractions.toLocaleString(), detail: "Repair queue candidates" },
-    { label: "Source catalog", value: buildSourceCatalog().entries.length.toLocaleString(), detail: "Known import paths" }
-  ];
-}
-
 export async function GET(request: Request) {
   const url = new URL(request.url);
-  const definitions = buildSavedReportDefinitions();
   const definitionId = url.searchParams.get("type") ?? "weekly-usage";
-  const definition = definitions.find((item) => item.id === definitionId);
-  if (!definition) return NextResponse.json({ error: "Unknown report type." }, { status: 400 });
   const format = (url.searchParams.get("format") ?? "json") as SavedReportFormat;
-  if (!definition.formats.includes(format)) {
-    return NextResponse.json({ error: "Unsupported report format." }, { status: 400 });
+  const result = generateReport(definitionId, { format });
+  if (!result.ok) {
+    const error = result.reason === "unknown-type" ? "Unknown report type." : "Unsupported report format.";
+    return NextResponse.json({ error }, { status: 400 });
   }
-  const rendered = renderSavedReport({
-    definitionId,
-    format,
-    generatedAt: new Date().toISOString(),
-    rows: reportRows(definitionId)
-  });
   if (format === "json") {
-    return new NextResponse(rendered, {
+    return new NextResponse(result.content, {
       headers: { "content-type": "application/json; charset=utf-8" }
     });
   }
   if (format === "csv") {
-    return new NextResponse(rendered, {
+    return new NextResponse(result.content, {
       headers: {
         "content-type": "text/csv; charset=utf-8",
         "content-disposition": `attachment; filename="tokentrace-${definitionId}.csv"`
       }
     });
   }
-  return new NextResponse(rendered, {
+  return new NextResponse(result.content, {
     headers: {
       "content-type": "text/markdown; charset=utf-8",
       "content-disposition": `attachment; filename="tokentrace-${definitionId}.md"`

package/app/api/saved-views/[id]/route.ts

@@ -12,5 +12,9 @@ export async function DELETE(
   }
 ) {
   const { id } = await params;
-  return NextResponse.json({ deleted: deleteSavedView(decodeURIComponent(id)) });
+  const viewId = decodeURIComponent(id).trim();
+  if (!viewId) {
+    return NextResponse.json({ error: "view id is required" }, { status: 400 });
+  }
+  return NextResponse.json({ deleted: deleteSavedView(viewId) });
 }

package/app/evidence/evidence-context-panel.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { FieldLabel } from "@/components/ui/typography";
+
+export type EvidenceContextAction = {
+  label: string;
+  detail: string;
+  href: string;
+};
+
+export function EvidenceContextPanel({ actions }: { actions: EvidenceContextAction[] }) {
+  return (
+    <Card>
+      <CardContent className="flex flex-col gap-3 p-3 lg:flex-row lg:items-center lg:justify-between">
+        <div className="max-w-[72ch]">
+          <FieldLabel>Evidence path</FieldLabel>
+          <p className="mt-1 text-sm leading-6 text-muted-foreground">
+            Evidence is a contextual drill-down from Overview, Sessions, Repair, and exported packs. If you opened this page directly, start with processed tokens, then pivot by metric or follow the next action that matches what looks incomplete.
+          </p>
+        </div>
+        <div className="grid min-w-0 gap-2 sm:grid-cols-2 xl:grid-cols-4">
+          {actions.map((action) => (
+            <Link
+              key={action.label}
+              href={action.href}
+              className="group rounded-md border bg-card p-3 text-left transition-colors hover:bg-muted/40 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            >
+              <span className="flex items-center gap-1.5 text-xs font-semibold text-foreground">
+                {action.label}
+                <ArrowRight className="h-3.5 w-3.5 text-primary transition-transform group-hover:translate-x-0.5" aria-hidden="true" />
+              </span>
+              <span className="mt-1 block text-xs leading-5 text-muted-foreground">{action.detail}</span>
+            </Link>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/app/evidence/evidence-page-data.ts

@@ -0,0 +1,105 @@
+import { dateRangeQueryParams, mergeHrefParams, resolveDateRange } from "@/src/lib/date-range";
+import { buildEvidenceTrail, parseEvidenceMetric } from "@/src/lib/evidence-trail";
+
+export type EvidencePageSearchParams = Promise<Record<string, string | string[] | undefined>> | undefined;
+
+export type EvidenceDrilldownAction = {
+  label: string;
+  detail: string;
+  href: string;
+};
+
+function firstSearchValue(value: string | string[] | undefined) {
+  return Array.isArray(value) ? value[0] : value;
+}
+
+function openedFromLabel(value: string | undefined) {
+  if (value === "overview") return "Overview";
+  if (value === "sessions") return "Sessions";
+  if (value === "repair") return "Repair";
+  if (value === "export") return "Evidence pack";
+  if (value === "settings") return "Settings";
+  return "Direct link";
+}
+
+function safeReturnTo(value: string | string[] | undefined, fallback: string) {
+  const candidate = firstSearchValue(value);
+  if (!candidate || !candidate.startsWith("/") || candidate.startsWith("//")) return fallback;
+  if (candidate.includes("\n") || candidate.includes("\r")) return fallback;
+  return candidate;
+}
+
+export async function getEvidencePageData(searchParams: EvidencePageSearchParams) {
+  const params = (await searchParams) ?? {};
+  const range = resolveDateRange(params);
+  const metric = parseEvidenceMetric(params?.metric);
+  const trail = buildEvidenceTrail({ metric, filters: range.filters });
+  const rangeLinkParams = dateRangeQueryParams(range);
+  const overviewHref = mergeHrefParams("/", rangeLinkParams);
+  const openedFrom = openedFromLabel(firstSearchValue(params.openedFrom));
+  const fallbackReturnHref =
+    openedFrom === "Sessions"
+      ? mergeHrefParams("/sessions", rangeLinkParams)
+      : openedFrom === "Repair"
+        ? mergeHrefParams("/repair", rangeLinkParams)
+        : overviewHref;
+  const returnHref = safeReturnTo(params.returnTo, fallbackReturnHref);
+  const evidenceContextParams = {
+    ...rangeLinkParams,
+    openedFrom: firstSearchValue(params.openedFrom) ?? "direct",
+    returnTo: returnHref
+  };
+  const currentEvidenceHref = mergeHrefParams(`/evidence?metric=${trail.metric}`, evidenceContextParams);
+  const pricingReturnParams = { returnTo: currentEvidenceHref };
+  const periodPreserveParams = {
+    metric: trail.metric,
+    openedFrom: firstSearchValue(params.openedFrom),
+    returnTo: firstSearchValue(params.returnTo)
+  };
+  const sessionsHref = mergeHrefParams("/sessions", rangeLinkParams);
+  const repairHref = mergeHrefParams("/repair", rangeLinkParams);
+  const modelRatesHref = mergeHrefParams("/pricing", pricingReturnParams);
+  const confidenceTotal = Math.max(1, trail.confidence.exact + trail.confidence.estimated + trail.confidence.unknown);
+  const leadingSource = trail.sourceFiles[0];
+  const leadingSession = trail.sessions[0];
+  const drilldownActions: EvidenceDrilldownAction[] = [
+    {
+      label: "Top source files",
+      detail: "Compare the local files contributing most to this metric.",
+      href: "#top-source-files"
+    },
+    {
+      label: "Largest sessions",
+      detail: "Open the session evidence table and continue into filtered sessions.",
+      href: "#session-evidence"
+    },
+    {
+      label: "Parser confidence",
+      detail: "Check whether parser status affects the imported records.",
+      href: leadingSource ? mergeHrefParams(leadingSource.parserHref, rangeLinkParams) : "/parser-debug"
+    },
+    {
+      label: "Set model rate",
+      detail: "Follow provider model rates or unknown-cost repair when cost needs review.",
+      href: leadingSession?.pricingHref
+        ? mergeHrefParams(leadingSession.pricingHref, pricingReturnParams)
+        : mergeHrefParams("/repair", rangeLinkParams)
+    }
+  ];
+
+  return {
+    range,
+    trail,
+    rangeLinkParams,
+    openedFrom,
+    returnHref,
+    evidenceContextParams,
+    pricingReturnParams,
+    periodPreserveParams,
+    sessionsHref,
+    repairHref,
+    modelRatesHref,
+    confidenceTotal,
+    drilldownActions
+  };
+}

package/app/evidence/evidence-summary-cards.tsx

@@ -0,0 +1,74 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { DataValue, FieldLabel } from "@/components/ui/typography";
+import type { EvidenceTrail } from "@/src/lib/evidence-trail";
+import { formatCurrency, formatExactTokens } from "@/src/lib/format";
+
+export function MetricTotalsCard({ totals }: { totals: EvidenceTrail["totals"] }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Metric Totals</CardTitle>
+        <CardDescription>
+          Totals use the same filtered metric definition as the session evidence below.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className="grid divide-y border-t sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-5">
+          <div className="p-3">
+            <FieldLabel>Tokens</FieldLabel>
+            <DataValue className="mt-1" size="md">{formatExactTokens(totals.tokens)}</DataValue>
+          </div>
+          <div className="p-3">
+            <FieldLabel>Cost</FieldLabel>
+            <DataValue className="mt-1" size="md">{formatCurrency(totals.cost)}</DataValue>
+          </div>
+          <div className="p-3">
+            <FieldLabel>Sessions</FieldLabel>
+            <DataValue className="mt-1" size="md">{totals.sessions.toLocaleString()}</DataValue>
+          </div>
+          <div className="p-3">
+            <FieldLabel>Interactions</FieldLabel>
+            <DataValue className="mt-1" size="md">{totals.interactions.toLocaleString()}</DataValue>
+          </div>
+          <div className="p-3">
+            <FieldLabel>Unknown Cost</FieldLabel>
+            <DataValue className="mt-1" size="md">{totals.unknownCostInteractions.toLocaleString()}</DataValue>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ConfidenceSplitCard({
+  confidence,
+  confidenceTotal
+}: {
+  confidence: EvidenceTrail["confidence"];
+  confidenceTotal: number;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Confidence Split</CardTitle>
+        <CardDescription>Interaction-level token confidence for this metric and period.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {[
+          { label: "Exact", value: confidence.exact, variant: "success" as const },
+          { label: "Estimated", value: confidence.estimated, variant: "secondary" as const },
+          { label: "Unknown", value: confidence.unknown, variant: "warning" as const }
+        ].map((item) => (
+          <div key={item.label} className="grid grid-cols-[5.5rem_minmax(0,1fr)_4rem] items-center gap-3 text-sm">
+            <Badge variant={item.variant}>{item.label}</Badge>
+            <div className="h-2 overflow-hidden rounded-full bg-muted">
+              <div className="h-full rounded-full bg-primary" style={{ width: `${(item.value / confidenceTotal) * 100}%` }} />
+            </div>
+            <div className="text-right tabular-nums text-muted-foreground">{item.value.toLocaleString()}</div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}