tokentrace 0.1.0

package/app/page.tsx

@@ -0,0 +1,164 @@
+import Link from "next/link";
+import { ArrowRight, Coins, Database, MessageSquare, Sparkles } from "lucide-react";
+import { EmptyState } from "@/components/empty-state";
+import { RankBarChart } from "@/components/charts/rank-bar-chart";
+import { TrendChart } from "@/components/charts/trend-chart";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { getAnalyticsData } from "@/src/lib/analytics";
+import { formatCurrency, formatTokens, percent } from "@/src/lib/format";
+
+export const dynamic = "force-dynamic";
+
+function MetricCard({
+  label,
+  value,
+  detail,
+  icon: Icon
+}: {
+  label: string;
+  value: string;
+  detail?: string;
+  icon: typeof Database;
+}) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0">
+        <CardTitle>{label}</CardTitle>
+        <Icon className="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-semibold">{value}</div>
+        {detail ? <p className="mt-1 text-xs text-muted-foreground">{detail}</p> : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function OverviewPage() {
+  const data = getAnalyticsData();
+  const { summary } = data;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-normal">Overview</h1>
+          <p className="text-sm text-muted-foreground">
+            Local token, cost, model, and session analytics across AI CLI tools.
+          </p>
+        </div>
+        <Button asChild>
+          <Link href="/settings">
+            Configure scan <ArrowRight className="h-4 w-4" />
+          </Link>
+        </Button>
+      </div>
+
+      {summary.interactions === 0 ? (
+        <EmptyState
+          title="No usage imported yet"
+          description="Add custom folders if needed, run a scan from Settings, then return here for analytics."
+        />
+      ) : null}
+
+      <div className="dashboard-grid">
+        <MetricCard
+          label="Total tokens"
+          value={formatTokens(summary.totalTokens)}
+          detail={`${formatTokens(summary.inputTokens)} input, ${formatTokens(summary.outputTokens)} output`}
+          icon={Database}
+        />
+        <MetricCard
+          label="Cached tokens"
+          value={formatTokens(summary.cachedTokens)}
+          detail={`${formatTokens(summary.reasoningTokens)} reasoning tokens`}
+          icon={Sparkles}
+        />
+        <MetricCard
+          label="Estimated cost"
+          value={formatCurrency(summary.totalCost)}
+          detail={`${formatCurrency(summary.exactCost)} exact, ${formatCurrency(summary.estimatedCost)} estimated, ${summary.unknownCostInteractions.toLocaleString()} unknown`}
+          icon={Coins}
+        />
+        <MetricCard
+          label="Sessions"
+          value={summary.sessions.toLocaleString()}
+          detail={`${summary.interactions.toLocaleString()} interactions`}
+          icon={MessageSquare}
+        />
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Token Trend</CardTitle>
+            <CardDescription>Daily, weekly, and monthly token usage.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TrendChart data={data.trends} metric="totalTokens" />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Cost Trend</CardTitle>
+            <CardDescription>Costs use editable model prices from Pricing.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TrendChart data={data.trends} metric="cost" color="#ea580c" />
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-[1fr_1.2fr]">
+        <Card>
+          <CardHeader>
+            <CardTitle>Usage By Tool</CardTitle>
+            <CardDescription>Top tools by total tokens.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RankBarChart data={data.tools as unknown as Array<Record<string, string | number | null>>} nameKey="tool" valueKey="totalTokens" />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Current Mix</CardTitle>
+            <CardDescription>
+              Most used tool: {summary.mostUsedTool}. Most used model: {summary.mostUsedModel}.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="table-scroll">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Tool</TableHead>
+                  <TableHead>Provider</TableHead>
+                  <TableHead>Tokens</TableHead>
+                  <TableHead>Cost</TableHead>
+                  <TableHead>Cache</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data.tools.slice(0, 5).map((tool) => (
+                  <TableRow key={tool.tool}>
+                    <TableCell className="font-medium">{tool.tool}</TableCell>
+                    <TableCell>{tool.provider}</TableCell>
+                    <TableCell>{formatTokens(tool.totalTokens)}</TableCell>
+                    <TableCell>{formatCurrency(tool.cost)}</TableCell>
+                    <TableCell>
+                      <Badge variant={tool.cacheEfficiency > 0.1 ? "success" : "secondary"}>
+                        {percent(tool.cacheEfficiency)}
+                      </Badge>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/app/parser-debug/page.tsx

@@ -0,0 +1,57 @@
+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";
+
+export const dynamic = "force-dynamic";
+
+export default function ParserDebugPage() {
+  const { scanFiles } = getDebugData();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-normal">Parser Debug</h1>
+        <p className="text-sm text-muted-foreground">
+          Inspect adapter selection, parser confidence, extraction confidence, warnings, and failures.
+        </p>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Parser Results</CardTitle>
+          <CardDescription>Useful when vendors change local file formats.</CardDescription>
+        </CardHeader>
+        <CardContent className="table-scroll">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Parser</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Parser confidence</TableHead>
+                <TableHead>Token confidence</TableHead>
+                <TableHead>Imported</TableHead>
+                <TableHead>Warnings</TableHead>
+                <TableHead>Errors</TableHead>
+                <TableHead>File</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {scanFiles.map((file) => (
+                <TableRow key={file.id}>
+                  <TableCell>{file.parser ?? "None"}</TableCell>
+                  <TableCell><Badge variant={file.errors.length ? "destructive" : file.parser ? "success" : "secondary"}>{file.status}</Badge></TableCell>
+                  <TableCell>{file.rawMetadata.confidence == null ? "Unknown" : Number(file.rawMetadata.confidence).toFixed(2)}</TableCell>
+                  <TableCell className="max-w-xs truncate">{JSON.stringify(file.rawMetadata.tokenConfidence ?? { unknown: 0 })}</TableCell>
+                  <TableCell>{file.recordsImported.toLocaleString()}</TableCell>
+                  <TableCell className="max-w-sm truncate">{file.warnings.join("; ") || "None"}</TableCell>
+                  <TableCell className="max-w-sm truncate">{file.errors.join("; ") || "None"}</TableCell>
+                  <TableCell className="max-w-md truncate font-mono text-xs">{file.path}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/app/pricing/page.tsx

@@ -0,0 +1,18 @@
+import { PricingSettings } from "@/components/pricing-settings";
+import { getPricingRows } from "@/src/lib/pricing";
+
+export const dynamic = "force-dynamic";
+
+export default function PricingPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-normal">Pricing Configuration</h1>
+        <p className="text-sm text-muted-foreground">
+          Configure editable provider and model prices for transparent local cost estimates.
+        </p>
+      </div>
+      <PricingSettings initialRows={getPricingRows()} />
+    </div>
+  );
+}

package/app/projects/page.tsx

@@ -0,0 +1,111 @@
+import Link from "next/link";
+import { RankBarChart } from "@/components/charts/rank-bar-chart";
+import { TrendChart } from "@/components/charts/trend-chart";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { getAnalyticsData } from "@/src/lib/analytics";
+import { formatCurrency, formatDate, formatTokens } from "@/src/lib/format";
+
+export const dynamic = "force-dynamic";
+
+export default function ProjectAnalyticsPage() {
+  const data = getAnalyticsData();
+  const mostExpensive = data.projects[0];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-normal">Project Analytics</h1>
+        <p className="text-sm text-muted-foreground">
+          Group usage by local repository or inferred project path.
+        </p>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-[1fr_1.4fr]">
+        <Card>
+          <CardHeader>
+            <CardTitle>Most Expensive Project</CardTitle>
+            <CardDescription>Based on configured cost estimates.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {mostExpensive ? (
+              <div className="space-y-2">
+                <div className="text-2xl font-semibold">{mostExpensive.project}</div>
+                <div className="text-sm text-muted-foreground">{mostExpensive.path}</div>
+                <div className="text-sm">
+                  {formatTokens(mostExpensive.totalTokens)} tokens, {formatCurrency(mostExpensive.cost)}
+                </div>
+              </div>
+            ) : (
+              <div className="text-sm text-muted-foreground">No project data imported yet.</div>
+            )}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Tokens By Project</CardTitle>
+            <CardDescription>Top local projects by token usage.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RankBarChart
+              data={data.projects as unknown as Array<Record<string, string | number | null>>}
+              nameKey="project"
+              valueKey="totalTokens"
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Project Usage Trend</CardTitle>
+          <CardDescription>Overall local project activity over time.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <TrendChart data={data.trends} metric="totalTokens" color="#0f766e" />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Project Table</CardTitle>
+          <CardDescription>Drill into sessions using the session explorer filters.</CardDescription>
+        </CardHeader>
+        <CardContent className="table-scroll">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Project</TableHead>
+                <TableHead>Path</TableHead>
+                <TableHead>Tokens</TableHead>
+                <TableHead>Cost</TableHead>
+                <TableHead>Sessions</TableHead>
+                <TableHead>Interactions</TableHead>
+                <TableHead>Output/Input</TableHead>
+                <TableHead>Last used</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {data.projects.map((project) => (
+                <TableRow key={project.id}>
+                  <TableCell className="font-medium">
+                    <Link className="hover:underline" href={`/sessions?project=${encodeURIComponent(project.project)}`}>
+                      {project.project}
+                    </Link>
+                  </TableCell>
+                  <TableCell className="max-w-sm truncate">{project.path}</TableCell>
+                  <TableCell>{formatTokens(project.totalTokens)}</TableCell>
+                  <TableCell>{formatCurrency(project.cost)}</TableCell>
+                  <TableCell>{project.sessions.toLocaleString()}</TableCell>
+                  <TableCell>{project.interactions.toLocaleString()}</TableCell>
+                  <TableCell>{project.outputInputRatio.toFixed(2)}x</TableCell>
+                  <TableCell>{formatDate(project.lastUsedAt)}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/app/sessions/page.tsx

@@ -0,0 +1,24 @@
+import { SessionExplorer } from "@/components/session-explorer";
+import { getAnalyticsData } from "@/src/lib/analytics";
+
+export const dynamic = "force-dynamic";
+
+export default async function SessionsPage({
+  searchParams
+}: {
+  searchParams?: Promise<{ project?: string }>;
+}) {
+  const params = await searchParams;
+  const data = getAnalyticsData();
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-normal">Session Explorer</h1>
+        <p className="text-sm text-muted-foreground">
+          Search and filter imported sessions by tool, model, project, cost, and estimation status.
+        </p>
+      </div>
+      <SessionExplorer sessions={data.sessions} initialProject={params?.project} />
+    </div>
+  );
+}

package/app/settings/page.tsx

@@ -0,0 +1,26 @@
+import { getDatabasePath } from "@/src/db/client";
+import { getAppSettings } from "@/src/db/settings";
+import { SettingsPanel } from "@/components/settings-panel";
+
+export const dynamic = "force-dynamic";
+
+export default function SettingsPage() {
+  const settings = getAppSettings();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-normal">Settings</h1>
+        <p className="text-sm text-muted-foreground">
+          Configure local discovery folders, privacy controls, scans, and imported data.
+        </p>
+      </div>
+      <SettingsPanel
+        initialSettings={{
+          ...settings,
+          databasePath: getDatabasePath()
+        }}
+      />
+    </div>
+  );
+}

package/app/tools/page.tsx

@@ -0,0 +1,92 @@
+import { RankBarChart } from "@/components/charts/rank-bar-chart";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { getAnalyticsData } from "@/src/lib/analytics";
+import { formatCurrency, formatTokens, percent } from "@/src/lib/format";
+
+export const dynamic = "force-dynamic";
+
+export default function ToolComparisonPage() {
+  const data = getAnalyticsData();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-normal">Tool Comparison</h1>
+        <p className="text-sm text-muted-foreground">
+          Compare Claude Code, Codex CLI, and generic imported tools.
+        </p>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Tokens By Tool</CardTitle>
+            <CardDescription>Total token volume by CLI source.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RankBarChart
+              data={data.tools as unknown as Array<Record<string, string | number | null>>}
+              nameKey="tool"
+              valueKey="totalTokens"
+            />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Cost By Tool</CardTitle>
+            <CardDescription>Costs depend on configured model prices.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RankBarChart
+              data={data.tools as unknown as Array<Record<string, string | number | null>>}
+              nameKey="tool"
+              valueKey="cost"
+              mode="cost"
+              color="#0f766e"
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Comparison Table</CardTitle>
+          <CardDescription>Efficiency, averages, cache behavior, and expensive models.</CardDescription>
+        </CardHeader>
+        <CardContent className="table-scroll">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Tool</TableHead>
+                <TableHead>Provider</TableHead>
+                <TableHead>Tokens</TableHead>
+                <TableHead>Cost</TableHead>
+                <TableHead>Avg/session</TableHead>
+                <TableHead>Avg/interaction</TableHead>
+                <TableHead>Output/Input</TableHead>
+                <TableHead>Cache</TableHead>
+                <TableHead>Most expensive model</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {data.tools.map((tool) => (
+                <TableRow key={`${tool.provider}-${tool.tool}`}>
+                  <TableCell className="font-medium">{tool.tool}</TableCell>
+                  <TableCell>{tool.provider}</TableCell>
+                  <TableCell>{formatTokens(tool.totalTokens)}</TableCell>
+                  <TableCell>{formatCurrency(tool.cost)}</TableCell>
+                  <TableCell>{formatTokens(tool.averageTokensPerSession)}</TableCell>
+                  <TableCell>{formatTokens(tool.averageTokensPerInteraction)}</TableCell>
+                  <TableCell>{tool.outputInputRatio.toFixed(2)}x</TableCell>
+                  <TableCell>{percent(tool.cacheEfficiency)}</TableCell>
+                  <TableCell>{tool.mostExpensiveModel}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}