tokentrace 0.8.2 → 0.8.4

package/app/page.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { ArrowRight, Coins, Database, Gauge, MessageSquare, Minus, Sparkles, TrendingDown, TrendingUp } from "lucide-react";
+import { ArrowRight, Coins, Database, Gauge, Layers, MessageSquare, Minus, TrendingDown, TrendingUp } from "lucide-react";
 import { RankBarChart } from "@/components/charts/rank-bar-chart";
 import { TrendChart } from "@/components/charts/trend-chart";
 import { PeriodFilter } from "@/components/period-filter";
@@ -10,11 +10,11 @@ import { HelpTooltip } from "@/components/ui/help-tooltip";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { DataValue, FieldLabel, MonoText, PageHeader } from "@/components/ui/typography";
 import { getAnalyticsData, getScanTrustData } from "@/src/lib/analytics";
-import { buildDoctorReport } from "@/src/lib/doctor";
+import { buildDoctorReport, type DoctorReport } from "@/src/lib/doctor";
 import { getDefaultSearchRoots } from "@/src/ingestion/discovery";
 import { buildFirstRunStatus, type FirstRunStatus } from "@/src/lib/first-run-status";
 import { buildUnknownCostRepairWorkbench } from "@/src/lib/unknown-cost-repair";
-import { resolveDateRange } from "@/src/lib/date-range";
+import { dateRangeQueryParams, mergeHrefParams, resolveDateRange } from "@/src/lib/date-range";
 import { formatCurrency, formatSignedTokens, formatTokens, percent } from "@/src/lib/format";
 import { cn } from "@/src/lib/utils";
 import type { UsageGuardrailMetric } from "@/src/lib/usage-guardrails";
@@ -28,6 +28,8 @@ function MetricCard({
   description,
   href,
   actionLabel = "Inspect sessions",
+  secondaryHref,
+  secondaryActionLabel,
   icon: Icon,
   className,
   valueClassName
@@ -38,6 +40,8 @@ function MetricCard({
   description?: string;
   href?: string;
   actionLabel?: string;
+  secondaryHref?: string;
+  secondaryActionLabel?: string;
   icon: typeof Database;
   className?: string;
   valueClassName?: string;
@@ -45,35 +49,127 @@ function MetricCard({
   const tooltipId = `metric-${label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")}-help`;
 
   return (
-    <Card className={cn("h-full", className)}>
-      <CardHeader className="flex flex-row items-center justify-between gap-3 space-y-0 pb-3">
+    <Card className={cn("flex h-full flex-col overflow-hidden", className)}>
+      <CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0 pb-3">
         <div className="flex min-w-0 items-center gap-1.5">
           <CardTitle className="leading-tight">{label}</CardTitle>
           {description ? (
             <HelpTooltip id={tooltipId} label={label} description={description} />
           ) : null}
         </div>
-        <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
+        <span className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+          <Icon className="h-4 w-4" aria-hidden="true" />
+        </span>
       </CardHeader>
-      <CardContent>
-        <DataValue size="lg" className={valueClassName}>{value}</DataValue>
+      <CardContent className="flex flex-1 flex-col">
+        <DataValue size="lg" className={cn("break-words leading-none", valueClassName)}>{value}</DataValue>
         {detailItems?.length ? (
-          <div className="mt-3 flex flex-wrap gap-x-2 gap-y-1 text-xs leading-snug text-muted-foreground">
-            {detailItems.map((item) => (
-              <span key={item}>{item}</span>
+          <div className="mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-muted-foreground">
+            {detailItems.map((item, index) => (
+              <span key={item} className="inline-flex min-w-0 items-center gap-2">
+                <span className="min-w-0">{item}</span>
+                {index < detailItems.length - 1 ? <span className="hidden text-border sm:inline">/</span> : null}
+              </span>
             ))}
           </div>
         ) : null}
-        {href ? (
-          <Link href={href} className="mt-3 inline-flex text-xs font-medium text-primary underline-offset-4 hover:underline">
-            {actionLabel}
-          </Link>
+        {href || secondaryHref ? (
+          <div className="mt-auto flex flex-wrap items-center gap-x-3 gap-y-1 pt-4">
+            {href ? (
+              <Link href={href} className="inline-flex w-fit items-center gap-1.5 text-xs font-medium text-primary underline-offset-4 hover:underline">
+                {actionLabel}
+                <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
+              </Link>
+            ) : null}
+            {secondaryHref ? (
+              <Link href={secondaryHref} className="inline-flex w-fit items-center gap-1.5 text-xs font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">
+                {secondaryActionLabel ?? "View details"}
+              </Link>
+            ) : null}
+          </div>
         ) : null}
       </CardContent>
     </Card>
   );
 }
 
+function OverviewTrustStrip({
+  latestScan,
+  confidence,
+  repairHref,
+  processedTokensHref
+}: {
+  latestScan: { id: string | null; filesScanned: number; recordsImported: number };
+  confidence: {
+    interactions: number;
+    exactTokenInteractions: number;
+    exactCostInteractions: number;
+    estimatedCostInteractions: number;
+    unknownCostInteractions: number;
+  };
+  repairHref: string;
+  processedTokensHref: string;
+}) {
+  const exactTokenShare = confidence.interactions > 0 ? percent(confidence.exactTokenInteractions / confidence.interactions) : "0%";
+  const costCoverage =
+    confidence.interactions > 0
+      ? percent((confidence.exactCostInteractions + confidence.estimatedCostInteractions) / confidence.interactions)
+      : "0%";
+  const trustItems = [
+    {
+      label: "Latest scan",
+      value: latestScan.id ? `${latestScan.recordsImported.toLocaleString()} imports` : "No scan",
+      detail: latestScan.id ? `${latestScan.filesScanned.toLocaleString()} files scanned` : "Waiting for imported usage",
+      href: "/discovery",
+      icon: Database
+    },
+    {
+      label: "Exact tokens",
+      value: exactTokenShare,
+      detail: `${confidence.exactTokenInteractions.toLocaleString()} interactions with provider counts`,
+      href: processedTokensHref,
+      icon: Gauge
+    },
+    {
+      label: "Cost coverage",
+      value: costCoverage,
+      detail:
+        confidence.unknownCostInteractions > 0
+          ? `${confidence.unknownCostInteractions.toLocaleString()} interactions need repair`
+          : "All imported interactions priced",
+      href: confidence.unknownCostInteractions > 0 ? repairHref : "/pricing",
+      icon: Coins
+    }
+  ];
+
+  return (
+    <section className="grid overflow-hidden rounded-lg border border-border bg-card md:grid-cols-3" aria-label="Overview data confidence">
+      {trustItems.map((item, index) => {
+        const Icon = item.icon;
+        return (
+          <Link
+            key={item.label}
+            href={item.href}
+            className={cn(
+              "group flex min-w-0 items-start gap-3 p-4 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              index > 0 ? "border-t border-border md:border-l md:border-t-0" : ""
+            )}
+          >
+            <span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+              <Icon className="h-4 w-4" aria-hidden="true" />
+            </span>
+            <span className="min-w-0 space-y-1">
+              <FieldLabel>{item.label}</FieldLabel>
+              <span className="block truncate text-base font-semibold text-foreground">{item.value}</span>
+              <span className="block text-sm text-muted-foreground">{item.detail}</span>
+            </span>
+          </Link>
+        );
+      })}
+    </section>
+  );
+}
+
 function formatSignedCurrency(value: number) {
   if (value === 0) return "$0.00";
   return `${value > 0 ? "+" : "-"}${formatCurrency(Math.abs(value))}`;
@@ -113,15 +209,15 @@ function DeltaMetric({
         : "text-muted-foreground";
 
   return (
-    <div className="min-w-44 border-t p-3 first:border-t-0 sm:border-l sm:border-t-0 sm:first:border-l-0">
-      <div className="flex items-center justify-between gap-3">
-        <FieldLabel>{label}</FieldLabel>
-        <span className={cn("inline-flex items-center gap-1 text-xs font-semibold", toneClass)}>
-          <ToneIcon className="h-3.5 w-3.5" />
+    <div className="min-w-0 border-t px-4 py-4 first:border-t-0 sm:border-l sm:border-t-0 sm:first:border-l-0">
+      <div className="flex min-w-0 items-center justify-between gap-3">
+        <FieldLabel className="truncate">{label}</FieldLabel>
+        <span className={cn("inline-flex shrink-0 items-center gap-1 text-xs font-semibold tabular-nums", toneClass)}>
+          <ToneIcon className="h-3.5 w-3.5" aria-hidden="true" />
           {formatPercentValue(percentValue)}
         </span>
       </div>
-      <DataValue className="mt-1" size="md">{value}</DataValue>
+      <DataValue className="mt-1 truncate" size="md">{value}</DataValue>
       <div className="mt-1 text-xs text-muted-foreground">
         {delta} vs {previous}
       </div>
@@ -254,6 +350,97 @@ function FirstRunPanel({ status }: { status: FirstRunStatus }) {
   );
 }
 
+function readinessVariant(state: "ready" | "review" | "blocked") {
+  if (state === "ready") return "success";
+  if (state === "blocked") return "destructive";
+  return "warning";
+}
+
+function DataReadinessPanel({
+  report,
+  selectedInteractions,
+  selectedCachedTokens,
+  repairHref,
+  cachedEvidenceHref
+}: {
+  report: DoctorReport;
+  selectedInteractions: number;
+  selectedCachedTokens: number;
+  repairHref: string;
+  cachedEvidenceHref: string;
+}) {
+  const parserReviewFiles = report.parserCoverage.parserReviewFiles + report.parserCoverage.failureFiles;
+  const items = [
+    {
+      label: "Local scans",
+      value: report.latestScan.id ? `${report.latestScan.recordsImported.toLocaleString()} imports` : "No scan",
+      detail: report.latestScan.zeroImportExplanation ?? `${report.latestScan.filesScanned.toLocaleString()} files checked in the latest scan.`,
+      state: report.latestScan.id ? "ready" as const : "blocked" as const,
+      href: "/discovery"
+    },
+    {
+      label: "Parser coverage",
+      value: parserReviewFiles > 0 ? `${parserReviewFiles.toLocaleString()} files need review` : "No parser blockers",
+      detail: "Discovery and Parser Debug explain ignored, unsupported, failed, and imported files.",
+      state: report.parserCoverage.failureFiles > 0 ? "blocked" as const : parserReviewFiles > 0 ? "review" as const : "ready" as const,
+      href: parserReviewFiles > 0 ? "/parser-debug" : "/discovery"
+    },
+    {
+      label: "Pricing",
+      value: report.pricing.unknown > 0 ? `${report.pricing.unknown.toLocaleString()} unknown` : "Priced",
+      detail: `${report.pricing.priced.toLocaleString()} priced interactions across ${report.pricing.pricedModelCount.toLocaleString()} priced models.`,
+      state: report.pricing.unknown > 0 ? "blocked" as const : "ready" as const,
+      href: report.pricing.unknown > 0 ? repairHref : "/pricing"
+    },
+    {
+      label: "Cache accounting",
+      value: selectedCachedTokens > 0 ? formatTokens(selectedCachedTokens) : "No cache tokens",
+      detail: selectedCachedTokens > 0
+        ? "Cache read and write tokens are separated from fresh input/output."
+        : selectedInteractions > 0 ? "The selected period has no imported cache read/write counts." : "Scan usage before cache accounting appears.",
+      state: selectedCachedTokens > 0 ? "ready" as const : "review" as const,
+      href: cachedEvidenceHref
+    },
+    {
+      label: "Boundaries",
+      value: `${report.supportMatrix.summary.stable} stable, ${report.supportMatrix.summary.bestEffort} best effort`,
+      detail: "Unsupported desktop scraping, packet capture, proxying, and telemetry stay out of scope.",
+      state: "ready" as const,
+      href: "/doctor"
+    }
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Data Readiness</CardTitle>
+        <CardDescription>Current trust checks before acting on cost, token, parser, or cache numbers.</CardDescription>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className="grid border-t md:grid-cols-2 xl:grid-cols-5">
+          {items.map((item, index) => (
+            <Link
+              key={item.label}
+              href={item.href}
+              className={cn(
+                "block min-w-0 p-4 transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                index > 0 ? "border-t border-border md:border-l md:border-t-0 xl:border-l" : ""
+              )}
+            >
+              <div className="flex min-w-0 items-start justify-between gap-2">
+                <FieldLabel className="truncate">{item.label}</FieldLabel>
+                <Badge variant={readinessVariant(item.state)}>{item.state}</Badge>
+              </div>
+              <div className="mt-2 text-sm font-semibold text-foreground">{item.value}</div>
+              <div className="mt-1 text-xs leading-relaxed text-muted-foreground">{item.detail}</div>
+            </Link>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
 type OverviewPageProps = {
   searchParams?: Promise<Record<string, string | string[] | undefined>>;
 };
@@ -262,10 +449,20 @@ export default async function OverviewPage({ searchParams }: OverviewPageProps)
   const params = (await searchParams) ?? {};
   const range = resolveDateRange(params);
   const data = getAnalyticsData(range.filters);
-  const trust = getScanTrustData();
+  const rangeLinkParams = dateRangeQueryParams(range);
+  const evidenceLinks = Object.fromEntries(
+    Object.entries(data.evidenceLinks).map(([key, href]) => [key, mergeHrefParams(href, rangeLinkParams)])
+  ) as typeof data.evidenceLinks;
+  const trust = getScanTrustData(range.filters);
   const roots = await getDefaultSearchRoots();
   const doctorReport = buildDoctorReport({ ...trust, roots });
-  const repairWorkbench = buildUnknownCostRepairWorkbench();
+  const repairWorkbench = buildUnknownCostRepairWorkbench(range.filters);
+  const nextRepairGroup =
+    repairWorkbench.groups.find((group) => group.review.status !== "ignored" && group.review.status !== "resolved")
+    ?? repairWorkbench.groups[0]
+    ?? null;
+  const repairFocusHref = mergeHrefParams(nextRepairGroup?.itemHref ?? "/repair", rangeLinkParams);
+  const unknownCostEvidenceHref = evidenceLinks["unknown-cost"];
   const firstRunStatus = buildFirstRunStatus({
     rootCount: roots.length,
     pricedModelCount: trust.pricedModelCount,
@@ -360,7 +557,7 @@ export default async function OverviewPage({ searchParams }: OverviewPageProps)
             `${formatTokens(summary.outputTokens)} output`,
             `${formatTokens(summary.cachedTokens)} cached`
           ]}
-          href={data.evidenceLinks["processed-tokens"]}
+          href={evidenceLinks["processed-tokens"]}
           actionLabel="View evidence"
           icon={Database}
         />
@@ -373,7 +570,7 @@ export default async function OverviewPage({ searchParams }: OverviewPageProps)
             `${formatTokens(summary.outputTokens)} output`,
             `${formatTokens(summary.reasoningTokens)} reasoning`
           ]}
-          href={data.evidenceLinks["non-cache-tokens"]}
+          href={evidenceLinks["non-cache-tokens"]}
           actionLabel="View evidence"
           icon={Database}
         />
@@ -385,21 +582,24 @@ export default async function OverviewPage({ searchParams }: OverviewPageProps)
             `${formatTokens(summary.cacheReadTokens)} read`,
             `${formatTokens(summary.cacheWriteTokens)} write`
           ]}
-          href={data.evidenceLinks["cached-tokens"]}
+          href={evidenceLinks["cached-tokens"]}
           actionLabel="View evidence"
-          icon={Sparkles}
+          icon={Layers}
         />
         <MetricCard
           label="Estimated cost"
           value={formatCurrency(summary.totalCost)}
+          valueClassName="break-normal whitespace-nowrap text-2xl"
           description="Cost is calculated from editable model prices. Unknown means a model price or usable token count is missing."
           detailItems={[
             `${formatCurrency(summary.exactCost)} exact`,
             `${formatCurrency(summary.estimatedCost)} estimated`,
             `${summary.unknownCostInteractions.toLocaleString()} unknown`
           ]}
-          href={summary.unknownCostInteractions > 0 ? "/repair" : data.evidenceLinks["estimated-cost"]}
-          actionLabel={summary.unknownCostInteractions > 0 ? "Repair unknown costs" : "View evidence"}
+          href={summary.unknownCostInteractions > 0 ? repairFocusHref : evidenceLinks["estimated-cost"]}
+          actionLabel={summary.unknownCostInteractions > 0 ? "Open next repair item" : "View evidence"}
+          secondaryHref={summary.unknownCostInteractions > 0 ? unknownCostEvidenceHref : undefined}
+          secondaryActionLabel="View unknown-cost evidence"
           icon={Coins}
         />
         <MetricCard
@@ -407,7 +607,7 @@ export default async function OverviewPage({ searchParams }: OverviewPageProps)
           value={summary.sessions.toLocaleString()}
           description="Imported local CLI sessions and interactions in the selected period."
           detailItems={[`${summary.interactions.toLocaleString()} interactions`]}
-          href={data.evidenceLinks.sessions}
+          href={evidenceLinks.sessions}
           actionLabel="View evidence"
           icon={MessageSquare}
         />
@@ -434,6 +634,25 @@ export default async function OverviewPage({ searchParams }: OverviewPageProps)
         </Card>
       </div>
 
+      {summary.interactions > 0 ? (
+        <OverviewTrustStrip
+          latestScan={doctorReport.latestScan}
+          confidence={trust.confidence}
+          repairHref={repairFocusHref}
+          processedTokensHref={evidenceLinks["processed-tokens"]}
+        />
+      ) : null}
+
+      {summary.interactions > 0 ? (
+        <DataReadinessPanel
+          report={doctorReport}
+          selectedInteractions={summary.interactions}
+          selectedCachedTokens={summary.cachedTokens}
+          repairHref={repairFocusHref}
+          cachedEvidenceHref={evidenceLinks["cached-tokens"]}
+        />
+      ) : null}
+
       <UsageGuardrailsPanel progress={data.usageGuardrails} />
 
       <Card>
@@ -443,19 +662,34 @@ export default async function OverviewPage({ searchParams }: OverviewPageProps)
             Local rules ranked from your scan, pricing, parser, project, and cache data.
           </CardDescription>
         </CardHeader>
-        <CardContent className="grid divide-y overflow-hidden p-0 lg:grid-cols-3 lg:divide-x lg:divide-y-0">
-          {data.recommendations.slice(0, 3).map((item) => (
-            <Link key={item.id} href={item.href} className="px-4 py-3 transition-colors hover:bg-muted/30">
-              <div className="flex flex-wrap items-center gap-2">
-                <div className="text-sm font-semibold">{item.title}</div>
-                <Badge variant={item.severity === "high" ? "destructive" : item.severity === "medium" ? "warning" : "secondary"}>
-                  {item.severity}
-                </Badge>
-              </div>
-              <div className="mt-1 text-xs leading-relaxed text-muted-foreground">{item.evidence}</div>
-              <div className="mt-2 text-xs font-medium text-emerald-800">{item.action}</div>
-            </Link>
-          ))}
+        <CardContent className="p-0">
+          <ol className="grid divide-y overflow-hidden lg:grid-cols-3 lg:divide-x lg:divide-y-0">
+            {data.recommendations.slice(0, 3).map((item, index) => (
+              <li key={item.id} className="min-w-0">
+                <Link
+                  href={item.href}
+                  className="group flex h-full min-w-0 gap-3 px-4 py-4 transition-colors hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                >
+                  <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border text-xs font-semibold tabular-nums text-muted-foreground">
+                    {index + 1}
+                  </span>
+                  <span className="min-w-0">
+                    <span className="flex min-w-0 flex-wrap items-center gap-2">
+                      <span className="text-sm font-semibold text-foreground">{item.title}</span>
+                      <Badge variant={item.severity === "high" ? "destructive" : item.severity === "medium" ? "warning" : "secondary"}>
+                        {item.severity}
+                      </Badge>
+                    </span>
+                    <span className="mt-1 block text-xs leading-relaxed text-muted-foreground">{item.evidence}</span>
+                    <span className="mt-2 inline-flex items-center gap-1.5 text-xs font-medium text-primary">
+                      {item.action}
+                      <ArrowRight className="h-3.5 w-3.5" aria-hidden="true" />
+                    </span>
+                  </span>
+                </Link>
+              </li>
+            ))}
+          </ol>
         </CardContent>
       </Card>
 
@@ -521,8 +755,8 @@ export default async function OverviewPage({ searchParams }: OverviewPageProps)
               </CardDescription>
             </div>
             <Button asChild variant="outline" size="sm">
-              <Link href="/repair">
-                Open Repair <ArrowRight className="h-4 w-4" />
+              <Link href={repairFocusHref}>
+                Open next repair <ArrowRight className="h-4 w-4" />
               </Link>
             </Button>
           </CardHeader>
@@ -558,17 +792,23 @@ export default async function OverviewPage({ searchParams }: OverviewPageProps)
                     <TableCell>{row.interactions.toLocaleString()}</TableCell>
                     <TableCell>{formatTokens(row.totalTokens)}</TableCell>
                     <TableCell className="max-w-72 truncate">
-                      <Link href={row.sourceHref} title={row.sourceFile}>
+                      <Link href={mergeHrefParams(row.sourceHref, rangeLinkParams)} title={row.sourceFile}>
                         <MonoText className="text-muted-foreground underline-offset-4 hover:underline">{row.sourceFile}</MonoText>
                       </Link>
                     </TableCell>
                     <TableCell>
                       <div className="flex flex-wrap gap-2">
-                        <Link href={row.repairHref} className="font-medium text-primary underline-offset-4 hover:underline">
+                        <Link href={mergeHrefParams(row.repairHref, rangeLinkParams)} className="font-medium text-primary underline-offset-4 hover:underline">
                           {row.pricingHref ? "Configure price" : "Review parser"}
                         </Link>
+                        <Link href={mergeHrefParams(row.itemHref, rangeLinkParams)} className="font-medium text-muted-foreground underline-offset-4 hover:underline">
+                          Item
+                        </Link>
+                        <Link href={mergeHrefParams(row.sourceHref, rangeLinkParams)} className="font-medium text-muted-foreground underline-offset-4 hover:underline">
+                          Evidence
+                        </Link>
                         {row.pricingHref ? (
-                          <Link href={row.parserHref} className="font-medium text-muted-foreground underline-offset-4 hover:underline">
+                          <Link href={mergeHrefParams(row.parserHref, rangeLinkParams)} className="font-medium text-muted-foreground underline-offset-4 hover:underline">
                             Parser
                           </Link>
                         ) : null}

package/app/pricing/page.tsx

@@ -8,7 +8,7 @@ export const dynamic = "force-dynamic";
 export default async function PricingPage({
   searchParams
 }: {
-  searchParams?: Promise<{ model?: string }>;
+  searchParams?: Promise<{ model?: string; returnTo?: string }>;
 }) {
   const params = await searchParams;
   const data = getAnalyticsData();
@@ -21,6 +21,7 @@ export default async function PricingPage({
       <PricingSettings
         initialRows={getPricingRows()}
         initialModel={params?.model}
+        returnTo={params?.returnTo}
         aliasSuggestions={data.modelAliasSuggestions}
       />
     </div>