tokentrace 0.15.0 → 0.15.2

package/CHANGELOG.md

@@ -4,6 +4,35 @@ All notable changes to TokenTrace are documented here.
 
 ## Unreleased
 
+## [0.15.2] - 2026-05-23
+
+### Fixed
+
+- Period filter presets (Today / 7d / 30d / 60d / 90d / Month / All time) now navigate correctly when clicked on the production webpack build. Previously the preset `<Link>` elements were rendered inside the custom-date `<form>`, and under Next.js 16 + React 19 the form was eating Link clicks, leaving the URL and rendered data unchanged. The preset links are now siblings of the form rather than children.
+
+## [0.15.1] - 2026-05-22
+
+### Changed
+
+- Upgraded Next.js from 15 to 16 (and `eslint-config-next` to 16). Lint config now uses `eslint-config-next`'s native flat config; the `FlatCompat`/`@eslint/eslintrc` bridge is no longer needed.
+- Upgraded Tailwind CSS from 3 to 4 via `@tailwindcss/upgrade`. Tailwind config moved from `tailwind.config.ts` into `@theme` directives in `app/globals.css`; `postcss.config.mjs` now uses `@tailwindcss/postcss`; `autoprefixer` is removed (built into Tailwind 4).
+- Upgraded `tailwind-merge` from 2 to 3 (gated on Tailwind 4).
+- Upgraded Recharts from 2 to 3.
+- Upgraded Vitest from 3 to 4 (added `@vitejs/plugin-react` so React/JSX is parsed by Vite instead of Rolldown's parser).
+- Upgraded TypeScript from 5 to 6. Removed the deprecated `baseUrl` from `tsconfig.json` (path mapping still works under `moduleResolution: "bundler"`).
+- Bumped minimum Node.js engine to `>=20.9.0` (required by Next 16).
+
+### Fixed
+
+- Replaced three `useEffect` -> `setState` synchronization patterns with the React-recommended previous-value comparison (in `components/charts/trend-chart.tsx`, `components/charts/trend-section.tsx`, `components/session-explorer.tsx`) to satisfy the new `react-hooks/set-state-in-effect` rule and avoid cascading renders.
+- Reverted the Tailwind 4 codemod's accidental rename of the `"outline"` button/badge `variant` name to `"outline-solid"` (it is an internal variant label, not a Tailwind class).
+- Wrapped Recharts `Tooltip.labelFormatter` to match the new v3 signature.
+- Parallelized 10-spawn CLI subprocess test in `tests/serve-command.test.ts` so it no longer times out under parallel test contention; raised global Vitest timeouts and `spawnSync` timeouts in remaining CLI subprocess tests to match.
+
+### Deferred
+
+- ESLint 9 -> 10: blocked on `eslint-plugin-react` (peer-pinned by `eslint-config-next`); the latest 7.37.5 caps its eslint peer at `^9.7`. Staying on ESLint 9.39.4.
+
 ## [0.15.0] - 2026-05-22
 
 ### Changed

package/app/discovery/page.tsx

@@ -70,7 +70,7 @@ export default function DiscoveryPage() {
             <CardDescription>Latest 500 discovered files. Ignored files are retained so support-file noise stays visible without becoming usage.</CardDescription>
           </CardHeader>
           <CardContent className="table-scroll">
-            <Table className="min-w-[64rem]">
+            <Table className="min-w-5xl">
               <TableHeader>
                 <TableRow>
                   <TableHead>File</TableHead>
@@ -91,7 +91,7 @@ export default function DiscoveryPage() {
                     <TableCell>{file.sizeBytes.toLocaleString()} bytes</TableCell>
                     <TableCell>{formatDate(file.modifiedTime)}</TableCell>
                     <TableCell>{file.parser ?? "None"}</TableCell>
-                    <TableCell className="max-w-sm whitespace-normal break-words text-xs leading-relaxed text-muted-foreground">
+                    <TableCell className="max-w-sm whitespace-normal wrap-break-word text-xs leading-relaxed text-muted-foreground">
                       {String(file.rawMetadata.ignoreReason ?? file.rawMetadata.reason ?? file.errors[0] ?? file.warnings[0] ?? "None")}
                     </TableCell>
                   </TableRow>

package/app/evidence/page.tsx

@@ -111,7 +111,7 @@ function EvidenceMetricTabs({
           key={item.metric}
           href={mergeHrefParams(`/evidence?metric=${item.metric}`, rangeLinkParams)}
           className={cn(
-            "inline-flex h-8 items-center rounded-md border px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            "inline-flex h-8 items-center rounded-md border px-3 text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             current === item.metric
               ? "border-primary bg-primary text-primary-foreground"
               : "border-border bg-card text-foreground hover:bg-muted"
@@ -141,7 +141,7 @@ function EvidenceDrilldownStrip({
           key={action.label}
           href={action.href}
           className={cn(
-            "group min-w-0 p-3 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            "group min-w-0 p-3 transition-colors hover:bg-muted/50 focus-visible:outline-hidden 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" : ""
           )}
         >
@@ -204,7 +204,7 @@ function EvidenceContextPanel({
             <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-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              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}

package/app/globals.css

@@ -1,6 +1,54 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --radius-lg: 0.5rem;
+  --radius-md: 0.375rem;
+  --radius-sm: 0.25rem;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 :root {
   --background: 40 33% 98%;

package/app/guide/page.tsx

@@ -421,7 +421,7 @@ export default function GuidePage() {
                   </div>
                 </div>
                 <div className="table-scroll">
-                  <Table className="min-w-[42rem]">
+                  <Table className="min-w-2xl">
                     <TableHeader>
                       <TableRow>
                         <TableHead>Label</TableHead>
@@ -527,7 +527,7 @@ export default function GuidePage() {
                 {mcpAgentEntries.map(([label, value, detail]) => (
                   <div key={label} className="rounded-md border bg-muted/30 p-3">
                     <FieldLabel>{label}</FieldLabel>
-                    <div className="mt-2 min-h-10 break-words text-sm font-medium leading-5">
+                    <div className="mt-2 min-h-10 wrap-break-word text-sm font-medium leading-5">
                       <MonoText>{value}</MonoText>
                     </div>
                     <p className="mt-2 text-xs leading-5 text-muted-foreground">{detail}</p>
@@ -538,7 +538,7 @@ export default function GuidePage() {
             <div className="border-t p-4">
               <h3 className="text-sm font-semibold leading-tight">Agent quickstart</h3>
               <div className="table-scroll mt-3">
-                <Table className="min-w-[46rem]">
+                <Table className="min-w-184">
                   <TableHeader>
                     <TableRow>
                       <TableHead>Step</TableHead>
@@ -570,7 +570,7 @@ export default function GuidePage() {
                 Use <MonoText>tokentrace roadmap --json</MonoText> or <MonoText>/api/roadmap</MonoText> for implementation status and release gates.
               </p>
               <div className="table-scroll mt-3">
-                <Table className="min-w-[44rem]">
+                <Table className="min-w-176">
                   <TableHeader>
                     <TableRow>
                       <TableHead>Surface</TableHead>

package/app/parser-debug/page.tsx

@@ -92,14 +92,14 @@ export default async function ParserDebugPage({
                     <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 whitespace-normal break-words">
+                    <TableCell className="max-w-xs whitespace-normal wrap-break-word">
                       <MonoText className="text-muted-foreground">
                         {JSON.stringify(file.rawMetadata.tokenConfidence ?? { unknown: 0 })}
                       </MonoText>
                     </TableCell>
                     <TableCell>{file.recordsImported.toLocaleString()}</TableCell>
-                    <TableCell className="max-w-sm whitespace-normal break-words text-xs leading-relaxed text-muted-foreground">{file.warnings.join("; ") || "None"}</TableCell>
-                    <TableCell className="max-w-sm whitespace-normal break-words text-xs leading-relaxed text-muted-foreground">{file.errors.join("; ") || "None"}</TableCell>
+                    <TableCell className="max-w-sm whitespace-normal wrap-break-word text-xs leading-relaxed text-muted-foreground">{file.warnings.join("; ") || "None"}</TableCell>
+                    <TableCell className="max-w-sm whitespace-normal wrap-break-word text-xs leading-relaxed text-muted-foreground">{file.errors.join("; ") || "None"}</TableCell>
                     <TableCell className="max-w-md break-all" title={file.path}>
                       <MonoText>{file.path}</MonoText>
                     </TableCell>

package/app/sessions/[id]/page.tsx

@@ -211,7 +211,7 @@ export default async function SessionTimelinePage({
           <CardDescription>Interaction rows are expanded with model changes, spikes, cache activity, unknown cost, and tool calls.</CardDescription>
         </CardHeader>
         <CardContent className="table-scroll">
-          <Table className="min-w-[78rem]">
+          <Table className="min-w-312">
             <TableHeader>
               <TableRow>
                 <TableHead className="w-36">Time</TableHead>

package/app/sessions/page.tsx

@@ -45,7 +45,7 @@ export default async function SessionsPage({
             </CardDescription>
           </CardHeader>
           <CardContent className="table-scroll overflow-x-auto">
-            <Table className="min-w-[54rem]">
+            <Table className="min-w-216">
               <TableHeader>
                 <TableRow>
                   <TableHead>Priority</TableHead>

package/components/charts/rank-bar-chart.tsx

@@ -8,11 +8,11 @@ function ChartSkeleton() {
   return (
     <div className="grid h-full grid-cols-[7rem_minmax(0,1fr)]" aria-label="Chart loading">
       <div className="space-y-10 border-r border-border/70 pt-10">
-        <div className="h-3 w-20 rounded bg-muted" />
-        <div className="h-3 w-16 rounded bg-muted" />
+        <div className="h-3 w-20 rounded-sm bg-muted" />
+        <div className="h-3 w-16 rounded-sm bg-muted" />
       </div>
       <div className="relative overflow-hidden p-8">
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#e7ded3_1px,transparent_1px),linear-gradient(to_bottom,#e7ded3_1px,transparent_1px)] bg-[size:25%_33%] opacity-80" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#e7ded3_1px,transparent_1px),linear-gradient(to_bottom,#e7ded3_1px,transparent_1px)] bg-size-[25%_33%] opacity-80" />
         <div className="relative mt-8 h-10 w-[82%] rounded-r bg-primary/20" />
         <div className="relative mt-10 h-10 w-[22%] rounded-r bg-primary/15" />
       </div>

package/components/charts/trend-chart.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts";
 import type { TrendPoint } from "@/src/lib/analytics";
 import { formatCurrency, formatShortDate, formatTokens } from "@/src/lib/format";
@@ -41,7 +41,7 @@ function ChartSkeleton() {
     <div className="grid h-full grid-cols-[2.5rem_minmax(0,1fr)] grid-rows-[minmax(0,1fr)_1.5rem]" aria-label="Chart loading">
       <div className="row-span-1 border-r border-border/70" />
       <div className="relative overflow-hidden">
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#e7ded3_1px,transparent_1px),linear-gradient(to_bottom,#e7ded3_1px,transparent_1px)] bg-[size:25%_33%] opacity-80" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#e7ded3_1px,transparent_1px),linear-gradient(to_bottom,#e7ded3_1px,transparent_1px)] bg-size-[25%_33%] opacity-80" />
         <div className="absolute bottom-[18%] left-[8%] h-[38%] w-[84%] rounded-t-full border-t-4 border-primary/25" />
         <div className="absolute bottom-[12%] left-[8%] h-2 w-[84%] rounded-full bg-muted" />
       </div>
@@ -137,11 +137,13 @@ export function TrendChart({
 }) {
   const [internalPeriod, setInternalPeriod] = useState<TrendBucket>("daily");
   const [internalTrendWindow, setInternalTrendWindow] = useState<TrendWindow>(defaultWindow);
+  const [prevDefaultWindow, setPrevDefaultWindow] = useState<TrendWindow>(defaultWindow);
   const { ref: chartRef, size } = useChartSize<HTMLDivElement>();
 
-  useEffect(() => {
+  if (defaultWindow !== prevDefaultWindow) {
+    setPrevDefaultWindow(defaultWindow);
     if (!controlledTrendWindow) setInternalTrendWindow(defaultWindow);
-  }, [controlledTrendWindow, defaultWindow]);
+  }
 
   const period = controlledPeriod ?? internalPeriod;
   const trendWindow = controlledTrendWindow ?? internalTrendWindow;
@@ -217,7 +219,7 @@ export function TrendChart({
                   ? formatCurrency(Number(value))
                   : `${formatTokens(Number(value))} tokens`
               }
-              labelFormatter={formatShortDate}
+              labelFormatter={(label) => formatShortDate(label as string | number | null | undefined)}
             />
             <Area
               type="monotone"

package/components/charts/trend-section.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import type { TrendPoint } from "@/src/lib/analytics";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -23,10 +23,12 @@ export function TrendSection({
 }) {
   const [period, setPeriod] = useState<TrendBucket>("daily");
   const [trendWindow, setTrendWindow] = useState<TrendWindow>(defaultWindow);
+  const [prevDefaultWindow, setPrevDefaultWindow] = useState<TrendWindow>(defaultWindow);
 
-  useEffect(() => {
+  if (defaultWindow !== prevDefaultWindow) {
+    setPrevDefaultWindow(defaultWindow);
     setTrendWindow(defaultWindow);
-  }, [defaultWindow]);
+  }
 
   return (
     <section className="space-y-3">

package/components/diagnostics/parser-panels.tsx

@@ -19,7 +19,7 @@ export function ParserTrustPanel({ report }: { report: DoctorReport["parserTrust
       </CardHeader>
       <CardContent className="table-scroll">
         {report.parsers.length ? (
-          <Table className="min-w-[72rem]">
+          <Table className="min-w-6xl">
             <TableHeader>
               <TableRow>
                 <TableHead>Parser</TableHead>
@@ -249,7 +249,7 @@ export function SourceCoveragePanel({ scanFiles }: { scanFiles: ReturnType<typeo
               <p className="mt-1 text-xs leading-relaxed text-muted-foreground">{entry.description}</p>
               <div className="mt-2 flex flex-wrap gap-1">
                 {entry.matchers.map((matcher) => (
-                  <code key={matcher} className="rounded bg-muted px-1.5 py-0.5 text-xs">{matcher}</code>
+                  <code key={matcher} className="rounded-sm bg-muted px-1.5 py-0.5 text-xs">{matcher}</code>
                 ))}
               </div>
             </div>

package/components/overview/recommendations-card.tsx

@@ -23,7 +23,7 @@ export function OverviewRecommendationsCard({
             <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"
+                className="group flex h-full min-w-0 gap-3 px-4 py-4 transition-colors hover:bg-muted/30 focus-visible:outline-hidden 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}

package/components/overview/review-status-strip.tsx

@@ -41,7 +41,7 @@ function OverviewReviewStatusTile({
     <Link
       href={href}
       className={cn(
-        "group flex min-w-0 gap-3 p-3 transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "group flex min-w-0 gap-3 p-3 transition-colors hover:bg-muted/40 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         className
       )}
     >

package/components/overview/summary-cards.tsx

@@ -36,7 +36,7 @@ function CostSessionsMetricPane({
   return (
     <section
       className={cn(
-        "cost-sessions-section grid min-w-0 grid-rows-[auto_auto_auto_auto_1fr_auto] p-4 md:row-span-6 md:[grid-template-rows:subgrid]",
+        "cost-sessions-section grid min-w-0 grid-rows-[auto_auto_auto_auto_1fr_auto] p-4 md:row-span-6 md:grid-rows-subgrid",
         className
       )}
     >
@@ -48,7 +48,7 @@ function CostSessionsMetricPane({
       </div>
 
       <div className="mt-3">
-        <DataValue size="lg" className={cn("break-words leading-none", valueClassName)}>{value}</DataValue>
+        <DataValue size="lg" className={cn("wrap-break-word leading-none", valueClassName)}>{value}</DataValue>
       </div>
 
       <div className="mt-3 flex flex-wrap items-start gap-x-2 gap-y-1 text-xs leading-snug text-muted-foreground">
@@ -118,11 +118,11 @@ export function CostSessionsCard({
         <CardDescription>Model-rate trust and imported activity in one place.</CardDescription>
       </CardHeader>
       <CardContent className="flex flex-1 flex-col p-0">
-        <div className="grid flex-1 border-t md:grid-cols-2 md:[grid-template-rows:auto_auto_auto_auto_1fr_auto]">
+        <div className="grid flex-1 border-t md:grid-cols-2 md:grid-rows-[auto_auto_auto_auto_1fr_auto]">
           <CostSessionsMetricPane
             label="Cost"
             value={formatCurrency(summary.totalCost)}
-            valueClassName="break-words text-2xl"
+            valueClassName="wrap-break-word text-2xl"
             detailItems={[
               `${formatCurrency(summary.exactCost)} exact`,
               `${formatCurrency(summary.estimatedCost)} estimated`,
@@ -176,7 +176,7 @@ function TokenAccountingSlice({
   return (
     <div className="min-w-0 border-t p-3 first:border-t-0 md:border-l md:border-t-0 md:first:border-l-0">
       <FieldLabel>{label}</FieldLabel>
-      <DataValue className="mt-1 break-words leading-none" size="md">{value}</DataValue>
+      <DataValue className="mt-1 wrap-break-word leading-none" size="md">{value}</DataValue>
       <p className="mt-2 text-xs leading-5 text-muted-foreground">{detail}</p>
     </div>
   );
@@ -220,7 +220,7 @@ export function TokenAccountingCard({
         </span>
       </CardHeader>
       <CardContent className="flex flex-1 flex-col">
-        <DataValue size="lg" className="break-words text-3xl leading-none">{formatTokens(summary.totalTokens)}</DataValue>
+        <DataValue size="lg" className="wrap-break-word text-3xl leading-none">{formatTokens(summary.totalTokens)}</DataValue>
         <div className="mt-1 text-sm font-medium text-foreground">processed tokens</div>
         <div className="mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-muted-foreground">
           {[

package/components/period-filter.tsx

@@ -71,48 +71,46 @@ export function PeriodFilter({
   const statusLabel = range.key === "custom" ? "Custom range" : range.label;
 
   return (
-    <div className="min-w-0 max-w-full rounded-lg bg-card p-3 outline outline-1 outline-border sm:p-4">
-      <form className="max-w-full" action={basePath}>
-        <input type="hidden" name="range" value="custom" />
-        {Object.entries(preserveParams).map(([key, value]) =>
-          value ? <input key={key} type="hidden" name={key} value={value} /> : null
-        )}
-        <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-3 lg:flex-nowrap">
-          <div className="flex shrink-0 items-center gap-2 text-sm font-semibold">
-            <CalendarDays className="h-4 w-4 shrink-0 text-muted-foreground" />
-            <span>Period</span>
-            <span className="hidden shrink-0 whitespace-nowrap rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground 2xl:inline-flex">
-              {statusLabel}
-            </span>
-          </div>
-
-          <div className="period-preset-scroll -mx-3 min-w-0 flex-1 overflow-x-auto px-3 sm:mx-0 sm:px-0 md:overflow-visible">
-            <div className="flex w-max items-center gap-1.5 pr-1 md:w-auto md:flex-wrap">
-              {dateRangeOptions.map((option) => (
-                <Button
-                  key={option.key}
-                  asChild
-                  size="sm"
-                  variant={range.key === option.key ? "default" : "outline"}
-                  className="px-2.5"
-                >
-                  <Link href={rangeHref(option.key, basePath, preserveParams)}>
-                    {compactOptionLabel(option.key, option.label)}
-                  </Link>
-                </Button>
-              ))}
-            </div>
-          </div>
+    <div className="min-w-0 max-w-full rounded-lg bg-card p-3 outline-solid outline-1 outline-border sm:p-4">
+      <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-3 lg:flex-nowrap">
+        <div className="flex shrink-0 items-center gap-2 text-sm font-semibold">
+          <CalendarDays className="h-4 w-4 shrink-0 text-muted-foreground" />
+          <span>Period</span>
+          <span className="hidden shrink-0 whitespace-nowrap rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground 2xl:inline-flex">
+            {statusLabel}
+          </span>
+        </div>
 
-          <div className="period-custom-row ml-auto flex min-w-0 flex-wrap items-center gap-2 shrink-0 lg:flex-nowrap">
-            <PeriodDateField label="From" name="from" defaultValue={range.fromInput} />
-            <PeriodDateField label="To" name="to" defaultValue={range.toInput} />
-            <Button size="sm" type="submit" variant={range.key === "custom" ? "default" : "outline"}>
-              Apply
-            </Button>
+        <div className="period-preset-scroll -mx-3 min-w-0 flex-1 overflow-x-auto px-3 sm:mx-0 sm:px-0 md:overflow-visible">
+          <div className="flex w-max items-center gap-1.5 pr-1 md:w-auto md:flex-wrap">
+            {dateRangeOptions.map((option) => (
+              <Button
+                key={option.key}
+                asChild
+                size="sm"
+                variant={range.key === option.key ? "default" : "outline"}
+                className="px-2.5"
+              >
+                <Link href={rangeHref(option.key, basePath, preserveParams)}>
+                  {compactOptionLabel(option.key, option.label)}
+                </Link>
+              </Button>
+            ))}
           </div>
         </div>
-      </form>
+
+        <form className="period-custom-row ml-auto flex min-w-0 flex-wrap items-center gap-2 shrink-0 lg:flex-nowrap" action={basePath}>
+          <input type="hidden" name="range" value="custom" />
+          {Object.entries(preserveParams).map(([key, value]) =>
+            value ? <input key={key} type="hidden" name={key} value={value} /> : null
+          )}
+          <PeriodDateField label="From" name="from" defaultValue={range.fromInput} />
+          <PeriodDateField label="To" name="to" defaultValue={range.toInput} />
+          <Button size="sm" type="submit" variant={range.key === "custom" ? "default" : "outline"}>
+            Apply
+          </Button>
+        </form>
+      </div>
     </div>
   );
 }

package/components/pricing/model-alias-suggestions-table.tsx

@@ -19,7 +19,7 @@ function ModelAliasSuggestionMobileCards({
           <div className="flex flex-wrap items-start justify-between gap-2">
             <div className="min-w-0">
               <div className="text-xs font-medium uppercase text-muted-foreground">Observed model</div>
-              <div className="mt-1 break-words text-sm font-semibold">{suggestion.model}</div>
+              <div className="mt-1 wrap-break-word text-sm font-semibold">{suggestion.model}</div>
             </div>
             <Badge variant={suggestion.confidence === "high" ? "success" : suggestion.confidence === "medium" ? "warning" : "secondary"}>
               {suggestion.confidence}

package/components/pricing/model-rates-table.tsx

@@ -40,7 +40,7 @@ function ModelRateMobileCards({
             <div className="flex flex-wrap items-start justify-between gap-2">
               <div className="min-w-0">
                 <div className="text-xs font-medium uppercase text-muted-foreground">Provider/model</div>
-                <div className="mt-1 break-words text-sm font-medium">{row.model || "Unnamed model"}</div>
+                <div className="mt-1 wrap-break-word text-sm font-medium">{row.model || "Unnamed model"}</div>
                 <div className="mt-1 text-xs text-muted-foreground">{(row.providerName ?? row.provider) || row.providerId || "No provider"}</div>
               </div>
               {duplicate ? <Badge variant="warning">duplicate rate</Badge> : null}

package/components/pricing-settings.tsx

@@ -110,7 +110,7 @@ export function PricingSettings({
         <CardContent className="space-y-3 text-sm text-muted-foreground">
           <Label>Formula</Label>
           <pre className="overflow-x-auto rounded-md bg-muted/40 p-3 whitespace-pre-wrap">
-            <MonoText className="break-words">
+            <MonoText className="wrap-break-word">
               input * inputPrice + output * outputPrice + cacheRead * cacheReadPrice + cacheWrite * cacheWritePrice
             </MonoText>
           </pre>

package/components/repair/repair-guidance.tsx

@@ -77,7 +77,7 @@ export function RepairFlowSteps() {
         <CardDescription>Move left to right so every unknown-cost item ends with a checked local result.</CardDescription>
       </CardHeader>
       <CardContent className="overflow-x-auto p-0">
-        <div className="grid divide-y border-t sm:min-w-[46rem] sm:grid-cols-5 sm:divide-x sm:divide-y-0">
+        <div className="grid divide-y border-t sm:min-w-184 sm:grid-cols-5 sm:divide-x sm:divide-y-0">
           {steps.map(([label, detail], index) => (
             <div key={label} className="p-3">
               <div className="flex items-center gap-2">

package/components/repair/repair-items-table.tsx

@@ -35,7 +35,7 @@ function RepairItemsMobileList({
                 <Badge variant={causeVariant(group.cause)}>{causeLabel(group.cause)}</Badge>
                 <span className="text-xs text-muted-foreground">{group.interactions.toLocaleString()} interactions</span>
               </div>
-              <div className="mt-2 break-words text-sm font-medium">{group.model}</div>
+              <div className="mt-2 wrap-break-word text-sm font-medium">{group.model}</div>
               <div className="mt-1 text-xs text-muted-foreground">
                 {group.provider} / {group.tool}
               </div>
@@ -144,7 +144,7 @@ export function RepairItemsTable({
             />
             <RepairItemsMobileList groups={workbench.groups} focusKey={focusKey} rangeLinkParams={rangeLinkParams} />
             <div className="hidden overflow-x-auto md:block">
-              <Table className="min-w-[84rem]">
+              <Table className="min-w-336">
                 <TableHeader>
                   <TableRow>
                     <TableHead>State</TableHead>

package/components/repair-state-control.tsx

@@ -84,7 +84,7 @@ export function RepairStateControl({
       <Badge variant={statusVariant(status)}>{status}</Badge>
       <select
         aria-label="Repair state"
-        className="h-8 w-full rounded-md border bg-card px-2 text-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="h-8 w-full rounded-md border bg-card px-2 text-xs font-medium focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
         value={status}
         disabled={isPending}
         onChange={(event) => {
@@ -100,7 +100,7 @@ export function RepairStateControl({
       </select>
       <input
         aria-label="Repair note"
-        className="h-8 w-full rounded-md border bg-card px-2 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="h-8 w-full rounded-md border bg-card px-2 text-xs focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
         value={notes}
         maxLength={500}
         disabled={isPending}

package/components/scan-health-summary.tsx

@@ -193,7 +193,7 @@ export function ScanHealthSummary({ health }: { health: ScanHealth }) {
             </div>
             <ul className="space-y-1 text-xs leading-relaxed text-muted-foreground">
               {health.latestNoteGroups.map((group) => (
-                <li key={`${group.severity}-${group.message}`} className="break-words">
+                <li key={`${group.severity}-${group.message}`} className="wrap-break-word">
                   <span className="font-medium text-foreground">{group.message}</span>
                   <span className="ml-2 text-muted-foreground">
                     {plural(group.count, "file")}

package/components/scan-now-button.tsx

@@ -114,10 +114,10 @@ export function ScanNowButton({
         {isPending ? "Scanning..." : label}
       </Button>
       {status ? (
-        <div role="status" aria-live="polite" className={cn("max-w-[26rem] text-xs leading-5", statusClassName)}>
+        <div role="status" aria-live="polite" className={cn("max-w-104 text-xs leading-5", statusClassName)}>
           <p className={scanStatusClassName(status.tone)}>{status.message}</p>
           {status.result ? (
-            <div className="mt-2 rounded-md border bg-card p-2 text-left text-muted-foreground shadow-sm">
+            <div className="mt-2 rounded-md border bg-card p-2 text-left text-muted-foreground shadow-xs">
               <div className="grid grid-cols-2 gap-x-3 gap-y-1">
                 <span>{status.result.filesScanned.toLocaleString()} files checked</span>
                 <span>{status.result.recordsImported.toLocaleString()} records imported</span>

package/components/session-explorer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import Link from "next/link";
 import { BookmarkPlus, Download, Filter, RotateCcw, Trash2 } from "lucide-react";
 import type { SessionRow } from "@/src/lib/analytics";
@@ -93,6 +93,11 @@ export function SessionExplorer({
     () => ({ query, tool, model, project, exact, cost, from, to, highCost, hasCache }),
     [cost, exact, from, hasCache, highCost, model, project, query, to, tool]
   );
+  const [prevFilterState, setPrevFilterState] = useState(filterState);
+  if (filterState !== prevFilterState) {
+    setPrevFilterState(filterState);
+    setPage(1);
+  }
   const filtered = useMemo(
     () => filterSessions(sessions, filterState, highCostThreshold),
     [filterState, highCostThreshold, sessions]
@@ -106,10 +111,6 @@ export function SessionExplorer({
   const activeFilters = useMemo(() => getActiveSessionFilters(filterState), [filterState]);
   const currentFilters = useMemo(() => getCurrentSessionFilters(filterState), [filterState]);
 
-  useEffect(() => {
-    setPage(1);
-  }, [filterState]);
-
   function clearFilters() {
     setQuery("");
     setTool("all");
@@ -431,9 +432,9 @@ export function SessionExplorer({
             </div>
           </div>
           {filtered.length ? (
-          <div className="table-scroll max-h-[38rem] overflow-x-auto">
-          <Table className={cn("min-w-[78rem]", tableDensityClass)}>
-            <TableHeader className="sticky top-0 z-10 bg-background shadow-sm">
+          <div className="table-scroll max-h-152 overflow-x-auto">
+          <Table className={cn("min-w-312", tableDensityClass)}>
+            <TableHeader className="sticky top-0 z-10 bg-background shadow-xs">
               <TableRow>
                 <TableHead className="w-28">Date</TableHead>
                 <TableHead className="w-28">Tool</TableHead>

package/components/settings/import-profiles-section.tsx

@@ -59,7 +59,7 @@ export function ImportProfilesSection({
               </div>
               <div className="mt-2 flex flex-wrap gap-1">
                 {profile.matchers.map((matcher) => (
-                  <code key={matcher} className="rounded bg-muted px-1.5 py-0.5 text-xs">{matcher}</code>
+                  <code key={matcher} className="rounded-sm bg-muted px-1.5 py-0.5 text-xs">{matcher}</code>
                 ))}
               </div>
               <div className="mt-3 flex flex-wrap gap-2">
@@ -126,7 +126,7 @@ export function ImportProfilesSection({
                 <FieldLabel>Matchers</FieldLabel>
                 <div className="mt-1 flex flex-wrap gap-1">
                   {previewResult.recommendedMatchers.map((matcher) => (
-                    <code key={matcher} className="rounded bg-muted px-1.5 py-0.5 text-xs">{matcher}</code>
+                    <code key={matcher} className="rounded-sm bg-muted px-1.5 py-0.5 text-xs">{matcher}</code>
                   ))}
                 </div>
               </div>

package/components/settings/section-nav.tsx

@@ -22,7 +22,7 @@ export function SettingsSectionNav() {
   return (
     <nav
       aria-label="Settings sections"
-      className="sticky top-2 z-20 rounded-lg border bg-background/95 p-2 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/80"
+      className="sticky top-2 z-20 rounded-lg border bg-background/95 p-2 shadow-xs backdrop-blur-sm supports-backdrop-filter:bg-background/80"
     >
       <div className="flex items-center gap-2 overflow-x-auto pb-1 sm:pb-0">
         <div className="sticky left-0 shrink-0 bg-background/95 pr-2 text-xs font-semibold text-foreground">
@@ -33,7 +33,7 @@ export function SettingsSectionNav() {
             key={section.id}
             href={`#${section.id}`}
             title={section.detail}
-            className="inline-flex h-8 shrink-0 items-center rounded-md border bg-card px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            className="inline-flex h-8 shrink-0 items-center rounded-md border bg-card px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           >
             {section.label}
           </a>

package/components/sidebar.tsx

@@ -64,7 +64,7 @@ function NavLink({
     ? cn(
         "flex shrink-0 items-center gap-2 rounded-md border px-3 py-2 text-xs transition-colors",
         isActive
-          ? "border-primary/30 bg-primary/10 font-medium text-primary shadow-sm"
+          ? "border-primary/30 bg-primary/10 font-medium text-primary shadow-xs"
           : variant === "support"
             ? "bg-muted/50 font-medium text-foreground"
             : "text-muted-foreground"
@@ -107,7 +107,7 @@ function MobileIconLink({
       className={cn(
         "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border transition-colors",
         isActive
-          ? "border-primary/30 bg-primary/10 text-primary shadow-sm"
+          ? "border-primary/30 bg-primary/10 text-primary shadow-xs"
           : "bg-card text-muted-foreground hover:bg-muted hover:text-foreground"
       )}
     >

package/components/ui/badge.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/src/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium leading-none outline outline-1 -outline-offset-1",
+  "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium leading-none outline-solid outline-1 -outline-offset-1",
   {
     variants: {
       variant: {

package/components/ui/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/src/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex h-9 items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex h-9 items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium leading-none transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

package/components/ui/help-tooltip.tsx

@@ -19,7 +19,7 @@ export function HelpTooltip({
         type="button"
         aria-label={`${label} details`}
         aria-describedby={id}
-        className="inline-flex h-5 w-5 items-center justify-center rounded-sm text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        className="inline-flex h-5 w-5 items-center justify-center rounded-xs text-muted-foreground outline-hidden transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
       >
         <Info className="h-3.5 w-3.5" aria-hidden="true" />
       </button>

package/components/ui/input.tsx

@@ -7,7 +7,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
   <input
     type={type}
     className={cn(
-      "flex h-9 w-full rounded-md border bg-card px-3 py-1 text-sm leading-5 shadow-sm tabular-nums transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-9 w-full rounded-md border bg-card px-3 py-1 text-sm leading-5 shadow-xs tabular-nums transition-colors placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     ref={ref}

package/components/ui/textarea.tsx

@@ -6,7 +6,7 @@ export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => (
   <textarea
     className={cn(
-      "flex min-h-24 w-full rounded-md border bg-card px-3 py-2 text-sm leading-6 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      "flex min-h-24 w-full rounded-md border bg-card px-3 py-2 text-sm leading-6 shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     ref={ref}

package/components/ui/typography.tsx

@@ -16,7 +16,7 @@ export function PageHeader({
     <div className={cn("flex w-full max-w-full flex-col justify-between gap-4 sm:flex-row sm:items-end", className)}>
       <div className="min-w-0 max-w-full">
         <h1 className="text-2xl font-semibold leading-tight tracking-normal text-foreground">{title}</h1>
-        <p className="mt-1 max-w-full break-words text-sm leading-6 text-muted-foreground sm:max-w-[65ch]">{description}</p>
+        <p className="mt-1 max-w-full wrap-break-word text-sm leading-6 text-muted-foreground sm:max-w-[65ch]">{description}</p>
       </div>
       {actions ? <div className="flex w-full min-w-0 flex-wrap gap-2 sm:w-auto sm:shrink-0 sm:justify-end">{actions}</div> : null}
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokentrace",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "mcpName": "io.github.abhiyoheswaran1/tokentrace",
   "description": "Local-first dashboard for AI CLI token, cost, and session analytics.",
   "author": {
@@ -40,7 +40,6 @@
     "fixtures",
     "next.config.mjs",
     "postcss.config.mjs",
-    "tailwind.config.ts",
     "tsconfig.json",
     "components.json",
     "README.md"
@@ -77,7 +76,7 @@
     "postcss": "^8.5.15"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=20.9.0"
   },
   "keywords": [
     "tokens",
@@ -95,34 +94,35 @@
   "license": "MIT",
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.1",
+    "@tailwindcss/postcss": "^4.3.0",
     "@types/node": "^22.19.19",
     "@types/react": "^19.2.15",
-    "autoprefixer": "^10.5.0",
     "better-sqlite3": "^12.10.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.45.2",
     "get-port": "^7.2.0",
     "lucide-react": "^1.16.0",
-    "next": "^15.5.18",
+    "next": "^16.2.6",
     "open": "^11.0.0",
     "postcss": "^8.5.15",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "recharts": "^2.15.0",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.2"
+    "recharts": "^3.8.1",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^6.0.3"
   },
   "devDependencies": {
     "@playwright/test": "^1.60.0",
     "@types/better-sqlite3": "^7.6.12",
     "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^5.2.0",
     "esbuild": "^0.28.0",
     "eslint": "^9.39.4",
-    "eslint-config-next": "^15.1.4",
+    "eslint-config-next": "^16.2.6",
     "eslint-plugin-react-hooks": "^5.2.0",
     "tsx": "^4.22.3",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.7"
   }
 }

package/postcss.config.mjs

@@ -1,7 +1,6 @@
 const config = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
+    '@tailwindcss/postcss': {},
   }
 };
 

package/scripts/package-inspect.mjs

@@ -40,8 +40,8 @@ try {
   );
 }
 
-if (packageJson.dependencies?.next !== "^15.5.18") {
-  fail("Keep the published Next.js dependency floor at ^15.5.18 or newer.");
+if (packageJson.dependencies?.next !== "^16.2.6") {
+  fail("Keep the published Next.js dependency floor at ^16.2.6 or newer.");
 }
 
 if (packageJson.dependencies?.["drizzle-orm"] !== "^0.45.2") {

package/server.json

@@ -8,12 +8,12 @@
     "url": "https://github.com/abhiyoheswaran1/tokentrace",
     "source": "github"
   },
-  "version": "0.15.0",
+  "version": "0.15.2",
   "packages": [
     {
       "registryType": "npm",
       "identifier": "tokentrace",
-      "version": "0.15.0",
+      "version": "0.15.2",
       "runtimeHint": "npx",
       "packageArguments": [
         {

package/src/cli/runtime.js

@@ -31,7 +31,6 @@ function copyDashboardSource(context, targetRoot) {
     "next.config.mjs",
     "package.json",
     "postcss.config.mjs",
-    "tailwind.config.ts",
     "tsconfig.json"
   ];
 
@@ -63,7 +62,7 @@ function copyDashboardSource(context, targetRoot) {
 
 function runNextBuild(context, cwd) {
   return new Promise((resolve, reject) => {
-    const child = spawn(process.execPath, [context.nextBin(), "build"], {
+    const child = spawn(process.execPath, [context.nextBin(), "build", "--webpack"], {
       cwd,
       env: context.runtimeEnv(),
       stdio: "inherit"

package/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "lib": ["dom", "dom.iterable", "es2022"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "es2022"
+    ],
     "allowJs": false,
     "skipLibCheck": true,
     "strict": true,
@@ -11,11 +15,14 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "baseUrl": ".",
+    "ignoreDeprecations": "6.0",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     },
     "plugins": [
       {
@@ -23,6 +30,14 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

package/tailwind.config.ts

@@ -1,53 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  darkMode: ["class"],
-  content: [
-    "./app/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}"
-  ],
-  theme: {
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))"
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))"
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
-        }
-      },
-      borderRadius: {
-        lg: "0.5rem",
-        md: "0.375rem",
-        sm: "0.25rem"
-      }
-    }
-  },
-  plugins: []
-};
-
-export default config;