tokentrace 0.1.0

package/app/api/export/route.ts

@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+import { getAnalyticsData } from "@/src/lib/analytics";
+import { toCsv } from "@/src/lib/csv";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: Request) {
+  const url = new URL(request.url);
+  const type = url.searchParams.get("type") ?? "sessions";
+  const analytics = getAnalyticsData();
+  const rows =
+    type === "projects"
+      ? analytics.projects
+      : type === "models"
+        ? analytics.models
+        : type === "tools"
+          ? analytics.tools
+          : analytics.sessions;
+
+  return new NextResponse(toCsv(rows as Array<Record<string, unknown>>), {
+    headers: {
+      "content-type": "text/csv; charset=utf-8",
+      "content-disposition": `attachment; filename="tokentrace-${type}.csv"`
+    }
+  });
+}

package/app/api/files/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+import { getDebugData } from "@/src/lib/analytics";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  return NextResponse.json(getDebugData());
+}

package/app/api/prices/route.ts

@@ -0,0 +1,33 @@
+import { NextResponse } from "next/server";
+import { getPricingRows, upsertPricing } from "@/src/lib/pricing";
+
+export const dynamic = "force-dynamic";
+
+function nullableNumber(value: unknown) {
+  if (value === "" || value == null) return null;
+  const number = Number(value);
+  return Number.isFinite(number) ? number : null;
+}
+
+export async function GET() {
+  return NextResponse.json(getPricingRows());
+}
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  if (!body.providerId || !body.model) {
+    return NextResponse.json({ error: "providerId and model are required" }, { status: 400 });
+  }
+
+  const id = upsertPricing({
+    providerId: String(body.providerId),
+    providerName: body.providerName ? String(body.providerName) : undefined,
+    model: String(body.model),
+    inputTokenPrice: nullableNumber(body.inputTokenPrice),
+    outputTokenPrice: nullableNumber(body.outputTokenPrice),
+    cachedInputTokenPrice: nullableNumber(body.cachedInputTokenPrice),
+    currency: body.currency ? String(body.currency) : "USD"
+  });
+
+  return NextResponse.json({ id });
+}

package/app/api/scan/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { runScan } from "@/src/ingestion/scan";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(request: Request) {
+  const body = await request.json().catch(() => ({}));
+  const result = await runScan({
+    folders: Array.isArray(body.folders)
+      ? body.folders.filter((folder: unknown): folder is string => typeof folder === "string")
+      : undefined,
+    force: Boolean(body.force)
+  });
+  return NextResponse.json(result);
+}

package/app/api/settings/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+import { getDatabasePath } from "@/src/db/client";
+import { getAppSettings, saveAppSettings } from "@/src/db/settings";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  return NextResponse.json({
+    ...getAppSettings(),
+    databasePath: getDatabasePath()
+  });
+}
+
+export async function PUT(request: Request) {
+  const body = await request.json();
+  const customFolders = Array.isArray(body.customFolders)
+    ? body.customFolders.filter((folder: unknown): folder is string => typeof folder === "string")
+    : [];
+  const saved = saveAppSettings({
+    customFolders,
+    storeRawMessageContent: Boolean(body.storeRawMessageContent)
+  });
+
+  return NextResponse.json(saved);
+}

package/app/debug/page.tsx

@@ -0,0 +1,101 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { getDebugData } from "@/src/lib/analytics";
+import { formatDate } from "@/src/lib/format";
+
+export const dynamic = "force-dynamic";
+
+function statusVariant(status: string) {
+  if (status === "imported") return "success";
+  if (status.includes("error") || status === "failed") return "destructive";
+  if (status.includes("skipped")) return "secondary";
+  return "warning";
+}
+
+export default function DebugPage() {
+  const data = getDebugData();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-normal">Raw Data</h1>
+        <p className="text-sm text-muted-foreground">
+          Inspect recent scan runs, parser selection, imported records, warnings, and failures.
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Scan Runs</CardTitle>
+          <CardDescription>High-level import history.</CardDescription>
+        </CardHeader>
+        <CardContent className="table-scroll">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Started</TableHead>
+                <TableHead>Completed</TableHead>
+                <TableHead>Files</TableHead>
+                <TableHead>Imported</TableHead>
+                <TableHead>Warnings</TableHead>
+                <TableHead>Errors</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {data.scanRuns.map((run) => (
+                <TableRow key={run.id}>
+                  <TableCell>{formatDate(run.startedAt)}</TableCell>
+                  <TableCell>{formatDate(run.completedAt)}</TableCell>
+                  <TableCell>{run.filesScanned.toLocaleString()}</TableCell>
+                  <TableCell>{run.recordsImported.toLocaleString()}</TableCell>
+                  <TableCell>{run.warnings.length.toLocaleString()}</TableCell>
+                  <TableCell>{run.errors.length.toLocaleString()}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Scanned Files</CardTitle>
+          <CardDescription>Parser, status, warning, error, and metadata preview per file.</CardDescription>
+        </CardHeader>
+        <CardContent className="table-scroll">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>File</TableHead>
+                <TableHead>Parser</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Imported</TableHead>
+                <TableHead>Warnings</TableHead>
+                <TableHead>Errors</TableHead>
+                <TableHead>Metadata</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {data.scanFiles.map((file) => (
+                <TableRow key={file.id}>
+                  <TableCell className="max-w-96 truncate font-mono text-xs">{file.path}</TableCell>
+                  <TableCell>{file.parser ?? "None"}</TableCell>
+                  <TableCell>
+                    <Badge variant={statusVariant(file.status)}>{file.status}</Badge>
+                  </TableCell>
+                  <TableCell>{file.recordsImported.toLocaleString()}</TableCell>
+                  <TableCell className="max-w-64 truncate">{file.warnings.join("; ") || "None"}</TableCell>
+                  <TableCell className="max-w-64 truncate">{file.errors.join("; ") || "None"}</TableCell>
+                  <TableCell className="max-w-80 truncate font-mono text-xs">
+                    {JSON.stringify(file.rawMetadata)}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/app/diagnostics/page.tsx

@@ -0,0 +1,113 @@
+import Link from "next/link";
+import { ArrowRight, CheckCircle2, FileWarning, SearchX } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { getDebugData } from "@/src/lib/analytics";
+import { formatDate } from "@/src/lib/format";
+
+export const dynamic = "force-dynamic";
+
+export default function DiagnosticsPage() {
+  const data = getDebugData();
+  const latest = data.scanRuns[0];
+  const imported = data.scanFiles.filter((file) => file.status === "imported").length;
+  const unsupported = data.scanFiles.filter((file) => file.status === "skipped_unknown").length;
+  const failed = data.scanFiles.filter((file) => file.status === "failed").length;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-normal">Ingestion Diagnostics</h1>
+        <p className="text-sm text-muted-foreground">
+          Passive filesystem ingestion status, parser coverage, and confidence transparency.
+        </p>
+      </div>
+
+      <div className="dashboard-grid">
+        <Card>
+          <CardHeader>
+            <CardTitle>Latest Scan</CardTitle>
+            <CardDescription>{latest ? formatDate(latest.startedAt) : "No scans yet"}</CardDescription>
+          </CardHeader>
+          <CardContent className="text-2xl font-semibold">
+            {latest?.filesScanned.toLocaleString() ?? "0"} files
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Imported</CardTitle>
+            <CardDescription>Files parsed successfully.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex items-center gap-2 text-2xl font-semibold">
+            <CheckCircle2 className="h-5 w-5 text-primary" />
+            {imported.toLocaleString()}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Unsupported</CardTitle>
+            <CardDescription>Discovered but no adapter matched.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex items-center gap-2 text-2xl font-semibold">
+            <SearchX className="h-5 w-5 text-muted-foreground" />
+            {unsupported.toLocaleString()}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Failed</CardTitle>
+            <CardDescription>Parser or import errors.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex items-center gap-2 text-2xl font-semibold">
+            <FileWarning className="h-5 w-5 text-destructive" />
+            {failed.toLocaleString()}
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {[
+          {
+            href: "/discovery",
+            title: "File Discovery Explorer",
+            description: "Inspect which local files were discovered, skipped, imported, or unsupported."
+          },
+          {
+            href: "/parser-debug",
+            title: "Parser Debug",
+            description: "Review adapter selection, parser confidence, warnings, errors, and extracted metadata."
+          },
+          {
+            href: "/debug",
+            title: "Raw Data",
+            description: "See raw scan files and metadata previews for troubleshooting vendor format changes."
+          }
+        ].map((item) => (
+          <Link key={item.href} href={item.href}>
+            <Card className="h-full transition-colors hover:bg-muted/40">
+              <CardHeader>
+                <CardTitle className="flex items-center justify-between">
+                  {item.title}
+                  <ArrowRight className="h-4 w-4" />
+                </CardTitle>
+                <CardDescription>{item.description}</CardDescription>
+              </CardHeader>
+            </Card>
+          </Link>
+        ))}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Architecture Guardrails</CardTitle>
+          <CardDescription>TokenTrace uses direct local filesystem ingestion as the primary architecture.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-2">
+          {["no proxy", "no packet sniffing", "no browser extension", "no cloud telemetry", "adapter based"].map((item) => (
+            <Badge key={item} variant="secondary">{item}</Badge>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/app/discovery/page.tsx

@@ -0,0 +1,61 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { getDebugData } from "@/src/lib/analytics";
+import { formatDate } from "@/src/lib/format";
+
+export const dynamic = "force-dynamic";
+
+function variant(status: string) {
+  if (status === "imported") return "success";
+  if (status === "skipped_unknown") return "secondary";
+  if (status === "failed") return "destructive";
+  return "warning";
+}
+
+export default function DiscoveryPage() {
+  const { scanFiles } = getDebugData();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-normal">File Discovery Explorer</h1>
+        <p className="text-sm text-muted-foreground">
+          Every file shown here was discovered by passive local filesystem scanning.
+        </p>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Discovered Files</CardTitle>
+          <CardDescription>Unsupported files are retained so parser gaps are visible.</CardDescription>
+        </CardHeader>
+        <CardContent className="table-scroll">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>File</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Size</TableHead>
+                <TableHead>Modified</TableHead>
+                <TableHead>Parser</TableHead>
+                <TableHead>Reason</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {scanFiles.map((file) => (
+                <TableRow key={file.id}>
+                  <TableCell className="max-w-xl truncate font-mono text-xs">{file.path}</TableCell>
+                  <TableCell><Badge variant={variant(file.status)}>{file.status}</Badge></TableCell>
+                  <TableCell>{file.sizeBytes.toLocaleString()} bytes</TableCell>
+                  <TableCell>{formatDate(file.modifiedTime)}</TableCell>
+                  <TableCell>{file.parser ?? "None"}</TableCell>
+                  <TableCell className="max-w-sm truncate">{String(file.rawMetadata.reason ?? file.errors[0] ?? "None")}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/app/globals.css

@@ -0,0 +1,51 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: 40 33% 98%;
+  --foreground: 220 20% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 220 20% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 220 20% 10%;
+  --primary: 176 72% 28%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 22 88% 56%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 35 24% 92%;
+  --muted-foreground: 220 9% 43%;
+  --accent: 46 96% 62%;
+  --accent-foreground: 220 20% 10%;
+  --destructive: 0 74% 48%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 35 18% 84%;
+  --input: 35 18% 84%;
+  --ring: 176 72% 28%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+::selection {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.dashboard-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.table-scroll {
+  overflow-x: auto;
+  scrollbar-width: thin;
+}

package/app/layout.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { MobileNav, Sidebar } from "@/components/sidebar";
+
+export const metadata: Metadata = {
+  title: "TokenTrace CLI",
+  description: "Local-first AI CLI token and cost analytics"
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <div className="flex min-h-screen">
+          <Sidebar />
+          <main className="min-w-0 flex-1">
+            <div className="border-b bg-card px-4 py-3 md:hidden">
+              <div className="text-sm font-semibold">TokenTrace CLI</div>
+              <div className="text-xs text-muted-foreground">Local analytics dashboard</div>
+            </div>
+            <MobileNav />
+            <div className="mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+              {children}
+            </div>
+          </main>
+        </div>
+      </body>
+    </html>
+  );
+}

package/app/models/page.tsx

@@ -0,0 +1,97 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { RankBarChart } from "@/components/charts/rank-bar-chart";
+import { getAnalyticsData } from "@/src/lib/analytics";
+import { formatCurrency, formatTokens } from "@/src/lib/format";
+
+export const dynamic = "force-dynamic";
+
+export default function ModelAnalyticsPage() {
+  const data = getAnalyticsData();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-normal">Model Analytics</h1>
+        <p className="text-sm text-muted-foreground">
+          Usage, cost, output length, efficiency, and configured cheaper alternatives.
+        </p>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Usage By Model</CardTitle>
+            <CardDescription>Total tokens by model.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RankBarChart
+              data={data.models as unknown as Array<Record<string, string | number | null>>}
+              nameKey="model"
+              valueKey="totalTokens"
+            />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Cost By Model</CardTitle>
+            <CardDescription>Aggregated from per-interaction costs.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RankBarChart
+              data={data.models as unknown as Array<Record<string, string | number | null>>}
+              nameKey="model"
+              valueKey="cost"
+              mode="cost"
+              color="#0f766e"
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Model Table</CardTitle>
+          <CardDescription>Flags are deterministic and based on your configured price table.</CardDescription>
+        </CardHeader>
+        <CardContent className="table-scroll">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Model</TableHead>
+                <TableHead>Provider</TableHead>
+                <TableHead>Tokens</TableHead>
+                <TableHead>Cost</TableHead>
+                <TableHead>Avg output</TableHead>
+                <TableHead>Efficiency</TableHead>
+                <TableHead>Alternative</TableHead>
+                <TableHead>Flag</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {data.models.map((model) => (
+                <TableRow key={`${model.provider}-${model.model}`}>
+                  <TableCell className="font-medium">{model.model}</TableCell>
+                  <TableCell>{model.provider}</TableCell>
+                  <TableCell>{formatTokens(model.totalTokens)}</TableCell>
+                  <TableCell>{formatCurrency(model.cost)}</TableCell>
+                  <TableCell>{formatTokens(model.averageOutputTokens)}</TableCell>
+                  <TableCell>{model.tokenEfficiency.toFixed(2)}x</TableCell>
+                  <TableCell>{model.suggestedAlternative ?? "None configured"}</TableCell>
+                  <TableCell>
+                    {model.overuseFlag ? (
+                      <Badge variant="warning">{model.overuseFlag}</Badge>
+                    ) : (
+                      <Badge variant="secondary">No flag</Badge>
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/app/optimisation/page.tsx

@@ -0,0 +1,67 @@
+import { AlertTriangle, CheckCircle2, Info, Lightbulb } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { getAnalyticsData } from "@/src/lib/analytics";
+
+const severityIcon = {
+  high: AlertTriangle,
+  medium: Lightbulb,
+  low: Info
+};
+
+const severityVariant = {
+  high: "destructive",
+  medium: "warning",
+  low: "secondary"
+} as const;
+
+export const dynamic = "force-dynamic";
+
+export default function OptimisationPage() {
+  const data = getAnalyticsData();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-normal">Optimisation Insights</h1>
+        <p className="text-sm text-muted-foreground">
+          Deterministic recommendations based on imported usage patterns.
+        </p>
+      </div>
+
+      <div className="grid gap-4">
+        {data.insights.map((insight) => {
+          const Icon = severityIcon[insight.severity] ?? CheckCircle2;
+          return (
+            <Card key={insight.id}>
+              <CardHeader className="flex flex-row items-start justify-between gap-4">
+                <div className="space-y-1">
+                  <CardTitle className="flex items-center gap-2 text-base">
+                    <Icon className="h-4 w-4 text-primary" />
+                    {insight.problem}
+                  </CardTitle>
+                  <CardDescription>{insight.evidence}</CardDescription>
+                </div>
+                <Badge variant={severityVariant[insight.severity]}>{insight.severity}</Badge>
+              </CardHeader>
+              <CardContent className="grid gap-4 md:grid-cols-2">
+                <div className="rounded-md border bg-muted/40 p-3">
+                  <div className="text-xs font-medium uppercase text-muted-foreground">
+                    Saving opportunity
+                  </div>
+                  <p className="mt-1 text-sm">{insight.savingOpportunity}</p>
+                </div>
+                <div className="rounded-md border bg-muted/40 p-3">
+                  <div className="text-xs font-medium uppercase text-muted-foreground">
+                    Recommendation
+                  </div>
+                  <p className="mt-1 text-sm">{insight.recommendation}</p>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}